@charset "utf-8";

/* reset
----------------------------------------------- */

h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,figure {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
	line-height: 1em;
	list-style: none;
}
a,
a:hover,
a:active,
a:visited {
	margin: 0;
	padding: 0;
	text-decoration: none;
	overflow: hidden;
	outline: none;
}
img {
	vertical-align: top;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
	user-drag: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: none;
}

/* clear */

.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* html
----------------------------------------------- */

html {
	margin: 0;
	padding: 0;
	-webkit-print-color-adjust: exact;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
	-moz-user-drag: none;
	-ms-user-drag: none;
	user-drag: none;
}

/* body
----------------------------------------------- */

body {
	margin: 50px 0 0;
	padding: 0;
	font-family: Meiryo, "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif;
}

/* loading
----------------------------------------------- */

#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: white;
	z-index: 10;
}
#loading .logo {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -16px 0 0 -70px;
	z-index: 2;
}
#loading .bar {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 40px 0 0 -40px;
	width: 80px;
	height: 2px;
	background: rgb(230,230,230);
	z-index: 2;
}
#loading .progress {
	width: 0;
	height: 2px;
	background: #25b7aa;
}
#loading .base {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -83px 0 0 -83px;
	width: 166px;
	height: 166px;
	background: white;
	z-index: 1;
	-webkit-border-radius: 170px;
	-moz-border-radius: 170px;
	-ms-border-radius: 170px;
	border-radius: 170px;
}
#loading .colors {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -85px 0 0 -85px;
	width: 170px;
	height: 170px;
	background: rgb(245,245,245);
	overflow: hidden;
	z-index: 1;
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	-moz-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	-ms-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	-webkit-border-radius: 170px;
	-moz-border-radius: 170px;
	-ms-border-radius: 170px;
	border-radius: 170px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}
#loading .colors ul {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 0 0 -240px;
	width: 480px;
	height: 170px;
	-webkit-animation: slide 4s linear infinite;
	-moz-animation: slide 4s linear infinite;
	-ms-animation: slide 4s linear infinite;
	animation: slide 4s linear infinite;
}
#loading .colors li {
	float: left;
	width: 20px;
	height: 170px;
}
#loading .colors .c0 {
	background: #ff6476;
}
#loading .colors .c1 {
	background: #fe6ea1;
}
#loading .colors .c2 {
	background: #ffb18a;
}
#loading .colors .c3 {
	background: #ff8989;
}
#loading .colors .c4 {
	background: #fed579;
}
#loading .colors .c5 {
	background: #99d14a;
}
#loading .colors .c6 {
	background: #9aeed7;
}
#loading .colors .c7 {
	background: #61d8ff;
}
#loading .colors .c8 {
	background: #3286de;
}
#loading .colors .c9 {
	background: #9f63dd;
}
#loading .colors .c10 {
	background: #838383;
}
#loading .colors .c11 {
	background: #8e6d64;
}

/* stamps
----------------------------------------------- */

.stamp.c26 {
	background-image: url(../images/stamp_c26.png);
}
.stamp.c87 {
	background-image: url(../images/stamp_c87.png);
}
.stamp.c88 {
	background-image: url(../images/stamp_c88.png);
}
.stamp.c27 {
	background-image: url(../images/stamp_c27.png);
}
.stamp.c02 {
	background-image: url(../images/stamp_c02.png);
}
.stamp.c08 {
	background-image: url(../images/stamp_c08.png);
}
.stamp.c09 {
	background-image: url(../images/stamp_c09.png);
}
.stamp.c14 {
	background-image: url(../images/stamp_c14.png);
}
.stamp.c16 {
	background-image: url(../images/stamp_c16.png);
}
.stamp.c20 {
	background-image: url(../images/stamp_c20.png);
}
.stamp.c34 {
	background-image: url(../images/stamp_c34.png);
}
.stamp.c30 {
	background-image: url(../images/stamp_c30.png);
}

/* stamps
----------------------------------------------- */

#stamps li {
	position: absolute;
	left: 50%;
	width: 34px;
	height: 34px;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 1;
	-webkit-background-size: 34px 34px;
	-moz-background-size: 34px 34px;
	-ms-background-size: 34px 34px;
	background-size: 34px 34px;
	-webkit-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-ms-transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#stamps li.on {
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	transform: scale(0.9);
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	opacity: 0;
}
#stamps li:nth-child(1) {
	top: 742px;
	margin: 0 0 0 -125px;
}
#stamps li:nth-child(2) {
	top: 753px;
	margin: 0 0 0 -140px;
}
#stamps li:nth-child(3) {
	top: 786px;
	margin: 0 0 0 -86px;
}
#stamps li:nth-child(4) {
	top: 1464px;
	margin: 0 0 0 95px;
}
#stamps li:nth-child(5) {
	top: 1480px;
	margin: 0 0 0 111px;
}
#stamps li:nth-child(6) {
	top: 1773px;
	margin: 0 0 0 -147px;
}
#stamps li:nth-child(7) {
	top: 2263px;
	margin: 0 0 0 -105px;
}
#stamps li:nth-child(8) {
	top: 2432px;
	margin: 0 0 0 111px;
}
#stamps li:nth-child(9) {
	top: 2491px;
	margin: 0 0 0 -124px;
}
#stamps li:nth-child(10) {
	top: 2502px;
	margin: 0 0 0 -143px;
}
#stamps li:nth-child(11) {
	top: 2549px;
	margin: 0 0 0 -88px;
}
#stamps li:nth-child(12) {
	top: 3405px;
	margin: 0 0 0 78px;
}
#stamps li:nth-child(13) {
	top: 3417px;
	margin: 0 0 0 60px;
}
#stamps li:nth-child(14) {
	top: 3412px;
	margin: 0 0 0 -171px;
}
#stamps li:nth-child(15) {
	top: 3429px;
	margin: 0 0 0 -157px;
}
#stamps li:nth-child(16) {
	top: 3479px;
	margin: 0 0 0 111px;
}
#stamps li:nth-child(17) {
	top: 3726px;
	margin: 0 0 0 110px;
}
#stamps li:nth-child(18) {
	top: 3744px;
	margin: 0 0 0 95px;
}
#stamps li:nth-child(19) {
	top: 3869px;
	margin: 0 0 0 -130px;
}
#stamps li:nth-child(20) {
	top: 3889px;
	margin: 0 0 0 -143px;
}
#stamps li:nth-child(21) {
	top: 3985px;
	margin: 0 0 0 121px;
}
#stamps li:nth-child(22) {
	top: 4201px;
	margin: 0 0 0 139px;
}
#stamps li:nth-child(23) {
	top: 4458px;
	margin: 0 0 0 98px;
}
#stamps li:nth-child(24) {
	top: 4471px;
	margin: 0 0 0 109px;
}
#stamps li:nth-child(25) {
	top: 4597px;
	margin: 0 0 0 -140px;
}
#stamps li:nth-child(26) {
	top: 4612px;
	margin: 0 0 0 -154px;
}
#stamps li:nth-child(27) {
	top: 4661px;
	margin: 0 0 0 107px;
}
#stamps li:nth-child(28) {
	top: 4847px;
	margin: 0 0 0 86px;
}
#stamps li:nth-child(29) {
	top: 4862px;
	margin: 0 0 0 73px;
}
#stamps li:nth-child(30) {
	top: 4902px;
	margin: 0 0 0 -137px;
}
#stamps li:nth-child(31) {
	top: 4924px;
	margin: 0 0 0 118px;
}
#stamps li:nth-child(32) {
	top: 5630px;
	margin: 0 0 0 120px;
}
#stamps li:nth-child(33) {
	top: 5824px;
	margin: 0 0 0 -155px;
}
#stamps li:nth-child(34) {
	top: 5841px;
	margin: 0 0 0 -141px;
}
/* main
----------------------------------------------- */

#main {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* header
----------------------------------------------- */

#header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background: white;
	z-index: 5;
	-webkit-box-shadow: 0 0 6px rgba(0,0,0,0.25);
	-moz-box-shadow: 0 0 6px rgba(0,0,0,0.25);
	-ms-box-shadow: 0 0 6px rgba(0,0,0,0.25);
	box-shadow: 0 0 6px rgba(0,0,0,0.25);
}
#header h1 {
	position: absolute;
	top: 16px;
	left: 20px;
}
#header .menu {
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	height: 50px;
	cursor: pointer;
}
#header .menu:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2px 0 0 -12px;
	width: 24px;
	height: 4px;
	background: #25b7aa;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
#header .menu span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -12px 0 0 -12px;
	width: 24px;
	height: 24px;
}
#header .menu span:before,
#header .menu span:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -2px 0 0 -12px;
	width: 24px;
	height: 4px;
	background: #25b7aa;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all 0.15s ease;
	-moz-transition: all 0.15s ease;
	-ms-transition: all 0.15s ease;
	transition: all 0.15s ease;
}
#header .menu span:before {
	margin-top: -11px;
}
#header .menu span:after {
	margin-top: 7px;
}

/* open */

#header .menu.open:after {
	margin: -2px 0 0 0;
	width: 0px;
}
#header .menu.open span:before {
	-webkit-transform: rotate(45deg) translate(6px,7px);
	-moz-transform: rotate(45deg) translate(6px,7px);
	-ms-transform: rotate(45deg) translate(6px,7px);
	transform: rotate(45deg) translate(6px,7px);
}
#header .menu.open span:after {
	-webkit-transform: rotate(-45deg) translate(6px,-7px);
	-moz-transform: rotate(-45deg) translate(6px,-7px);
	-ms-transform: rotate(-45deg) translate(6px,-7px);
	transform: rotate(-45deg) translate(6px,-7px);
}

/* footer
----------------------------------------------- */

#footer {
	padding: 5px 0 10px;
	text-align: center;
	background: white;
	overflow: hidden;
}
#footer p {
	padding: 15px 0 0;
}
#footer .copyright {
	color: #666666;
	font-family: Arial;
	font-size: 0.55em;
	font-weight: bold;
}

/* nav
----------------------------------------------- */

#nav {
	display: none;
	position: fixed;
	top: 50px;
	left: 0;
	width: 100%;
	background: white;
	z-index: 5;
}
#nav.open {
	display: block;
}
#nav ul {
	border-bottom: 1px solid #25b7aa;
}
#nav li {
	border-top: 1px solid #25b7aa;
}
#nav li a {
	display: block;
	position: relative;
	height: 50px;
}
#nav li img {
	position: absolute;
	top: 50%;
	left: 20px;
}
#nav li:first-child img {
	margin: -8px 0 0;
}
#nav li:last-child img {
	margin: -6px 0 0;
}

/* sns
----------------------------------------------- */

#sns {
	height: 39px;
}
#sns ul {
	font-size: 0;
	text-align: center;
}
#sns li {
	display: inline-block;
	margin: 0 8px;
	vertical-align: top;
}

/* pageup
----------------------------------------------- */

#pageup {
	position: fixed;
	right: 15px;
	bottom: 50px;
	width: 40px;
	height: 40px;
	background: rgb(37,183,170);
	cursor: pointer;
	z-index: 2;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	-ms-border-radius: 40px;
	border-radius: 40px;
}
#pageup:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -5px 0 0 -6px;
	width: 13px;
	height: 10px;
	background: url(../images/pageup.png) no-repeat;
	-webkit-background-size: 13px 10px;
	-moz-background-size: 13px 10px;
	-ms-background-size: 13px 10px;
	background-size: 13px 10px;
}

/* intro
----------------------------------------------- */

#intro {
	position: relative;
	height: 300px;
	overflow: hidden;
}
#intro h2 {
	position: absolute;
	top: 132px;
	left: 50%;
	margin: 0 0 0 -70px;
	width: 140px;
	z-index: 2;
}
#intro h2 span {
	display: block;
	overflow: hidden;
}
#intro .pen {
	position: absolute;
	top: -25px;
	left: 50%;
	margin: 0 0 0 25px;
	width: 170px;
	z-index: 2;
	pointer-events: none;
}
#intro .shadow {
	position: absolute;
	top: 88px;
	left: 50%;
	margin: 0 0 0 25px;
	width: 86px;
	z-index: 2;
	pointer-events: none;
}
#intro .circle {
	position: absolute;
	top: 63px;
	left: 50%;
	margin: 0 0 0 -87px;
	width: 175px;
	height: 175px;
	background: rgba(255,255,255,0.75);
	overflow: hidden;
	z-index: 1;
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	-moz-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	-ms-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	-webkit-border-radius: 175px;
	-moz-border-radius: 175px;
	-ms-border-radius: 175px;
	border-radius: 175px;
}
#intro .circle span {
	position: absolute;
	top: 125px;
	left: 50%;
}
#intro .circle span:nth-child(1) {
	margin: 0 0 0 -61px;
}
#intro .circle span:nth-child(2) {
	margin: 0 0 0 -31px;
}
#intro .circle span:nth-child(3) {
	margin: 0 0 0 0px;
}
#intro .circle span:nth-child(4) {
	margin: 0 0 0 32px;
}

/* pens */

#intro .pens {
	position: absolute;
	top: 70px;
	margin: 0 0 0 -936px;
	left: 50%;
	width: 1404px;
}
#intro .pens li {
	float: left;
	width: 39px;
	text-align: center;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
	-webkit-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-ms-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#intro .pens li.on {
	-webkit-transform: rotate(25deg) translateY(-10px);
	-moz-transform: rotate(25deg) translateY(-10px);
	-ms-transform: rotate(25deg) translateY(-10px);
	transform: rotate(25deg) translateY(-10px);
	-webkit-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-moz-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-ms-transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* stamps */

#intro .stamps {
	position: absolute;
	left: 50%;
	margin: 0 0 0 -350px;
	width: 700px;
}
#intro .stamps.top {
	top: 0;
}
#intro .stamps.bottom {
	bottom: 0;
}
#intro .stamps li {
	position: absolute;
	width: 25px;
	height: 25px;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: 24px 24px;
	-moz-background-size: 24px 24px;
	-ms-background-size: 24px 24px;
	background-size: 24px 24px;
/* 	mix-blend-mode: multiply; */
}

/* about
----------------------------------------------- */

#about {
	position: relative;
	height: 480px;
	overflow: hidden;
	border-top: 1px solid #f2f2f2;
	background: url(../images/about_base.png) no-repeat center -45px;
	-webkit-background-size: 700px 286px;
	-moz-background-size: 700px 286px;
	-ms-background-size: 700px 286px;
	background-size: 700px 286px;
}
#about h2 {
	position: absolute;
	top: 48px;
	left: 50%;
	margin: 0 0 0 -114px;
	width: 228px;
}
#about .pen {
	position: absolute;
	top: 200px;
	left: 50%;
	margin: 0 0 0 -144px;
	width: 289px;
	z-index: 1;
}
#about .articles {
	position: absolute;
	top: 225px;
	left: 50%;
	margin: 0 0 0 -150px;
	width: 300px;
}
#about .left {
	float: left;
	width: 140px;
}
#about .right {
	float: right;
	width: 140px;
}
#about h3 {
	margin: 10px 0 0;
}
#about p {
	font-size: 0.7em;
	line-height: 1.5em;
}
#about p em {
	color: #ff6a6a;
	font-style: normal;
}
#about .left h3 {
	margin: 10px 0 0 10px;
}
#about .left p {
	margin: 10px 0 0 10px;
}
#about .right p {
	margin: 10px 0 0 0;
}
#about .right figure {
	text-align: right;
}
#about .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}

#about .icons span:nth-child(1) {
	top: 39px;
	margin: 0 0 0 82px;
}
#about .icons span:nth-child(2) {
	top: 285px;
	margin: 0 0 0 -152px;
}

/* feature
----------------------------------------------- */

#feature {
	position: relative;
	height: 1500px;
	border-top: 1px solid #f2f2f2;
	background: url(../images/feature_base.png) no-repeat center 45px;
	overflow: hidden;
	-webkit-background-size: 700px 326px;
	-moz-background-size: 700px 326px;
	-ms-background-size: 700px 326px;
	background-size: 700px 326px;
}
#feature h2 {
	position: absolute;
	top: 59px;
	left: 50%;
	margin: 0 0 0 -120px;
	width: 241px;
	z-index: 1;
}
#feature h3 {
	position: absolute;
	top: 367px;
	left: 50%;
	margin: 0 0 0 -131px;
	width: 262px;
	z-index: 1;
}

#feature .image {
	position: absolute;
	top: 176px;
	left: 50%;
	margin: 0 0 0 -17px;
	width: 158px;
	height: 167px;
}
#feature .image span {
	display: block;
	position: absolute;
	width: 28px;
	height: 34px;
}
#feature .image span img {
	position: absolute;
}
#feature .image span:nth-child(1) {
	top: 132px;
	left: 0;
}
#feature .image span:nth-child(2) {
	top: 120px;
	left: 44px;
}
#feature .image span:nth-child(3) {
	top: 132px;
	left: 89px;
}
#feature .image span:nth-child(4) {
	top: 120px;
	left: 130px;
}

#feature .bee {
	position: absolute;
	top: 176px;
	left: 50%;
	margin: 0 0 0 -17px;
	width: 158px;
	height: 167px;
}
#feature .bee span {
	display: block;
	position: absolute;
}
#feature .bee span:nth-child(1) {
	top: 40px;
	left: 30px;
}
#feature .bee span:nth-child(2) {
	top: 0;
	left: 110px;
}

#feature .points {
	position: absolute;
	top: 407px;
	left: 50%;
	margin: 0 0 0 -140px;
	width: 280px;
	z-index: 1;
}
#feature .points li {
	padding: 0 0 24px;
}

#feature .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#feature .icons span:nth-child(1) {
	top: 8px;
	margin: 0 0 0 105px;
}
#feature .icons span:nth-child(2) {
	top: 1420px;
	margin: 0 0 0 -150px;
}

/* enjoy
----------------------------------------------- */

#enjoy {
	position: relative;
	height: 1153px;
	border-top: 1px solid #f2f2f2;
	background: url(../images/enjoy_base.png) no-repeat center 78px;
	overflow: hidden;
	-webkit-background-size: 700px 317px;
	-moz-background-size: 700px 317px;
	-ms-background-size: 700px 317px;
	background-size: 700px 317px;
}
#enjoy h2 {
	position: absolute;
	top: 59px;
	left: 50%;
	margin: 0 0 0 -136px;
	width: 273px;
	z-index: 1;
}
#enjoy h3 {
	position: absolute;
	top: 339px;
	left: 50%;
	margin: 0 0 0 -133px;
	width: 266px;
	z-index: 1;
}
#enjoy .hello {
	position: absolute;
	top: 122px;
	left: 50%;
	margin: 0 0 0 -140px;
	width: 200px;
	height: 60px;
	z-index: 1;
}
#enjoy .hello li {
	position: absolute;
	width: 12px;
	height: 12px;
	background-repeat: no-repeat;
	-webkit-background-size: 12px 12px;
	-moz-background-size: 12px 12px;
	-ms-background-size: 12px 12px;
	background-size: 12px 12px;
/* 	mix-blend-mode: multiply; */
}
#enjoy .hello .c02 {
	background-image: url(../images/enjoy_c02.png);
}
#enjoy .hello .c14 {
	background-image: url(../images/enjoy_c14.png);
}
#enjoy .hello .c20 {
	background-image: url(../images/enjoy_c20.png);
}
#enjoy .hello .c26 {
	background-image: url(../images/enjoy_c26.png);
}
#enjoy .hello .c27 {
	background-image: url(../images/enjoy_c27.png);
}
#enjoy .hello .c87 {
	background-image: url(../images/enjoy_c87.png);
}

#enjoy .button {
	position: absolute;
	top: 1026px;
	left: 50%;
	margin: 0 0 0 -120px;
	width: 240px;
	z-index: 1;
	cursor: pointer;
}

#enjoy .scenes {
	position: absolute;
	top: 380px;
	left: 50%;
	margin: 0 0 0 -150px;
	width: 300px;
	z-index: 1;
}
#enjoy .scenes li {
	position: absolute;
}
#enjoy .scenes li:nth-child(2) {
	top: 88px;
	left: 122px;
}
#enjoy .scenes li:nth-child(3) {
	top: 195px;
	left: 0px;
}
#enjoy .scenes li:nth-child(4) {
	top: 289px;
	left: 127px;
}
#enjoy .scenes li:nth-child(5) {
	top: 390px;
	left: 0px;
}
#enjoy .scenes li:nth-child(6) {
	top: 497px;
	left: 177px;
}

#enjoy .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#enjoy .icons span:nth-child(1) {
	top: 5px;
	margin: 0 0 0 100px;
}
#enjoy .icons span:nth-child(2) {
	top: 90px;
	margin: 0 0 0 -150px;
}
#enjoy .icons span:nth-child(3) {
	top: 405px;
	margin: 0 0 0 -35px;
}
#enjoy .icons span:nth-child(4) {
	top: 378px;
	margin: 0 0 0 52px;
}
#enjoy .icons span:nth-child(5) {
	top: 412px;
	margin: 0 0 0 93px;
}
#enjoy .icons span:nth-child(6) {
	top: 650px;
	margin: 0 0 0 15px;
}
#enjoy .icons span:nth-child(7) {
	top: 942px;
	margin: 0 0 0 -135px;
}
#enjoy .icons span:nth-child(8) {
	top: 973px;
	margin: 0 0 0 -90px;
}
#enjoy .icons span:nth-child(9) {
	top: 1055px;
	margin: 0 0 0 -132px;
}

/* lineup
----------------------------------------------- */

#lineup {
	position: relative;
	height: 1482px;
	border-top: 1px solid #f2f2f2;
	overflow: hidden;
}
#lineup h2 {
	position: absolute;
	top: 60px;
	left: 50%;
	margin: 0 0 0 -120px;
	width: 240px;
	z-index: 1;
}
#lineup .pens {
	position: absolute;
	top: 170px;
	left: 50%;
	margin: 0 0 0 -160px;
	width: 320px;
	z-index: 1;
}
#lineup .pens li {
	float: left;
	width: 50px;
	height: 237px;
}
#lineup .pens li:nth-child(4) {
	margin: 0 75px 0 0;
}
#lineup .pens li:nth-child(5) {
	margin: 0 0 0 30px;
}
#lineup .pens li:nth-child(8) {
	margin: 0 45px 0 0;
}
#lineup .pens li span {
	display: block;
}
#lineup .pens li .pen {
	-webkit-transform: translateX(74px) rotate(30deg);
	-moz-transform: translateX(74px) rotate(30deg);
	-ms-transform: translateX(74px) rotate(30deg);
	transform: translateX(74px) rotate(30deg);
}
#lineup .pens li .color {
	margin: -29px 0 0 9px;
}
#lineup .articles {
	position: absolute;
	top: 890px;
	left: 50%;
	margin: 0 0 0 -140px;
	width: 280px;
	z-index: 1;
}
#lineup article {
	position: relative;
	height: 182px;
}
#lineup article h3 {
	margin: 0 0 0 121px;
	padding: 12px 0 0;
}
#lineup article p {
	margin: 13px 0 0 121px;
	color: #515151;
	font-size: 0.75em;
	line-height: 1.3em;
}
#lineup article figure {
	position: absolute;
	top: 0;
	left: 62px;
}
#lineup .item02 {
	height: 202px;
}
#lineup .item03 h3 {
	margin: 0 0 0 164px;
	padding: 10px 0 0;
}
#lineup .item03 figure {
	left: 2px;
}

#lineup .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#lineup .icons span:nth-child(1) {
	top: 51px;
	margin: 0 0 0 -135px;
}
#lineup .icons span:nth-child(2) {
	top: 990px;
	margin: 0 0 0 -140px;
}
#lineup .icons span:nth-child(3) {
	top: 1245px;
	margin: 0 0 0 -55px;
}

/* movie
----------------------------------------------- */

#movie {
	position: relative;
	height: 326px;
	border-top: 1px solid #f2f2f2;
	overflow: hidden;
}
#movie h2 {
	position: absolute;
	top: 62px;
	left: 50%;
	margin: 0 0 0 -72px;
	width: 145px;
	z-index: 1;
}
#movie .image {
	position: absolute;
	top: 108px;
	left: 50%;
	margin: 0 0 0 -140px;
	width: 280px;
	z-index: 1;
}

#movie .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#movie .icons span:nth-child(1) {
	top: 53px;
	margin: 0 0 0 -110px;
}
#movie .icons span:nth-child(2) {
	top: 54px;
	margin: 0 0 0 85px;
}
#movie .icons span:nth-child(3) {
	top: 276px;
	margin: 0 0 0 -150px;
}

/* susume
----------------------------------------------- */

#susume {
	position: relative;
	height: 135px;
	overflow: hidden;
	margin-top: 30px;
}
#susume p {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -140px;
}

a.anchor{
    display: block;
    padding-top: 90px;
    margin-top: -90px;
}

/* links
----------------------------------------------- */

#links {
	position: relative;
	height: 391px;
	text-align: center;
}
#links .mydot {
	margin: 35px 0 0;
}
#links ul {
	padding: 25px 0 0;
}
#links li {
	margin: 30px 0 0;
}

#links .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#links .icons span:nth-child(1) {
	top: 145px;
	margin: 0 0 0 -155px;
}
#links .icons span:nth-child(2) {
	top: 253px;
	margin: 0 0 0 115px;
}

/* special
----------------------------------------------- */

#special {
	position: absolute;
	top: 251px;
	left: 10px;
	z-index: 1;
}
#special li {
	float: left;
	margin: 0 5px 0 0;
}
#special li:first-child {
	padding: 5px 0 0;
}

/* modal
----------------------------------------------- */

#modal_close {
	display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	width: 35px;
	height: 35px;
	background: rgb(255,137,137);
	cursor: pointer;
	z-index: 5;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	-ms-border-radius: 35px;
	border-radius: 35px;
}
#modal_close.on {
	display: block;
}
#modal_close span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -5px 0 0 -5px;
}

.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.modal .main {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 2;
}
.modal_mask {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.65);
	z-index: 1;
}

/* modal_enjoy
----------------------------------------------- */

#modal_enjoy {
	display: none;
}
#modal_enjoy.on {
	display: block;
}
#modal_enjoy .main {
	margin: 0 0 0 -150px;
	padding: 60px 0;
	width: 300px;
}
#modal_enjoy .movie {
	position: absolute;
	top: 50%;
	left: 5px;
	margin: -70px 0 0;
	width: 290px;
	height: 175px;
	text-align: center;
	overflow: hidden;
}
#modal_enjoy .movie img {
	width: 100%;
	height: auto;
}
#modal_enjoy .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#modal_enjoy .icons span:nth-child(1) {
	top: 495px;
	margin: 0 0 0 112px;
}
#modal_enjoy .icons span:nth-child(2) {
	top: 798px;
	margin: 0 0 0 -150px;
}
#modal_enjoy .icons span:nth-child(3) {
	top: 845px;
	margin: 0 0 0 -100px;
}

/* modal_movie
----------------------------------------------- */

#modal_movie {
	display: none;
}
#modal_movie.on {
	display: block;
}
#modal_movie .main {
	top: 50%;
}

/* keyframes
----------------------------------------------- */

.cloud {
	-webkit-animation: cloud 1s ease infinite;
	-moz-animation: cloud 1s ease infinite;
	-ms-animation: cloud 1s ease infinite;
	animation: cloud 1s ease infinite;
}
.cloud.alternate {
	-webkit-animation: cloud 1s ease infinite alternate;
	-moz-animation: cloud 1s ease infinite alternate;
	-ms-animation: cloud 1s ease infinite alternate;
	animation: cloud 1s ease infinite alternate;
}

.rotation {
	-webkit-animation: rotation 30s linear infinite;
	-moz-animation: rotation 30s linear infinite;
	-ms-animation: rotation 30s linear infinite;
	animation: rotation 30s linear infinite;
}
.rotation.alternate {
	-webkit-animation: rotation 30s linear infinite alternate;
	-moz-animation: rotation 30s linear infinite alternate;
	-ms-animation: rotation 30s linear infinite alternate;
	animation: rotation 30s linear infinite alternate;
}

.move {
	-webkit-animation: move 1s linear infinite;
	-moz-animation: move 1s linear infinite;
	-ms-animation: move 1s linear infinite;
	animation: move 1s linear infinite;
}
.move.alternate {
	-webkit-animation: move 1s linear infinite alternate;
	-moz-animation: move 1s linear infinite alternate;
	-ms-animation: move 1s linear infinite alternate;
	animation: move 1s linear infinite alternate;
}

.jump {
	-webkit-animation: jump 1s linear infinite;
	-moz-animation: jump 1s linear infinite;
	-ms-animation: jump 1s linear infinite;
	animation: jump 1s linear infinite;
}
.jump.alternate {
	-webkit-animation: jump 1s linear infinite alternate;
	-moz-animation: jump 1s linear infinite alternate;
	-ms-animation: jump 1s linear infinite alternate;
	animation: jump 1s linear infinite alternate;
}

.pop:active {
	-webkit-animation: pop 0.25s;
	-moz-animation: pop 0.25s;
	-ms-animation: pop 0.25s;
	animation: pop 0.25s;
}

/* jump */

@-webkit-keyframes jump {
	0% { -webkit-transform: translateY(0px); }
	20% { -webkit-transform: translateY(-4px); }
	30% { -webkit-transform: translateY(0px); }
	50% { -webkit-transform: translateY(-2px); }
	100% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes jump {
	0% { -moz-transform: translateY(0px); }
	20% { -moz-transform: translateY(-4px); }
	30% { -moz-transform: translateY(0px); }
	50% { -moz-transform: translateY(-2px); }
	100% { -moz-transform: translateY(0px); }
}
@-ms-keyframes jump {
	0% { -ms-transform: translateY(0px); }
	20% { -ms-transform: translateY(-4px); }
	30% { -ms-transform: translateY(0px); }
	50% { -ms-transform: translateY(-2px); }
	100% { -ms-transform: translateY(0px); }
}
@keyframes jump {
	0% { transform: translateY(0px); }
	20% { transform: translateY(-4px); }
	30% { transform: translateY(0px); }
	50% { transform: translateY(-2px); }
	100% { transform: translateY(0px); }
}

/* move */

@-webkit-keyframes move {
	0% { -webkit-transform: translateX(0px); }
	30% { -webkit-transform: translateX(5px); }
	100% { -webkit-transform: translateX(0px); }
}
@-moz-keyframes move {
	0% { -moz-transform: translateX(0px); }
	30% { -moz-transform: translateX(5px); }
	100% { -moz-transform: translateX(0px); }
}
@-ms-keyframes move {
	0% { -ms-transform: translateX(0px); }
	30% { -ms-transform: translateX(5px); }
	100% { -ms-transform: translateX(0px); }
}
@keyframes move {
	0% { transform: translateX(0px); }
	30% { transform: translateX(5px); }
	100% { transform: translateX(0px); }
}

/* pop */

@-webkit-keyframes pop {
	0% { -webkit-transform: scale(1); }
	40% { -webkit-transform: scale(1.05); }
	100% { -webkit-transform: scale(1); }
}
@-moz-keyframes pop {
	0% { -moz-transform: scale(1); }
	40% { -moz-transform: scale(1.05); }
	100% { -moz-transform: scale(1); }
}
@-ms-keyframes pop {
	0% { -ms-transform: scale(1); }
	40% { -ms-transform: scale(1.05); }
	100% { -ms-transform: scale(1); }
}
@keyframes pop {
	0% { transform: scale(1); }
	40% { transform: scale(1.05); }
	100% { transform: scale(1); }
}

/* cloud */

@-webkit-keyframes cloud {
	0% { -webkit-transform: translateY(0px); }
	30% { -webkit-transform: translateY(-3px); }
	100% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes cloud {
	0% { -moz-transform: translateY(0px); }
	30% { -moz-transform: translateY(-3px); }
	100% { -moz-transform: translateY(0px); }
}
@-ms-keyframes cloud {
	0% { -ms-transform: translateY(0px); }
	30% { -ms-transform: translateY(-3px); }
	100% { -ms-transform: translateY(0px); }
}
@keyframes cloud {
	0% { transform: translateY(0px); }
	30% { transform: translateY(-3px); }
	100% { transform: translateY(0px); }
}

/* rotation */

@-webkit-keyframes rotation {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes rotation {
	0% { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(360deg); }
}
@-ms-keyframes rotation {
	0% { -ms-transform: rotate(0deg); }
	100% { -ms-transform: rotate(360deg); }
}
@keyframes rotation {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* slide */

@-webkit-keyframes slide {
	0% { -webkit-transform: translateX(0px); }
	100% { -webkit-transform: translateX(240px); }
}
@-moz-keyframes slide {
	0% { -moz-transform: translateX(0px); }
	100% { -moz-transform: translateX(240px); }
}
@-ms-keyframes slide {
	0% { -ms-transform: translateX(0px); }
	100% { -ms-transform: translateX(240px); }
}
@keyframes slide {
	0% { transform: translateX(0px); }
	100% { transform: translateX(240px); }
}

/* pen */

.penready {
	-webkit-transform: translate3d(240px,-220px,0);
	-moz-transform: translate3d(240px,-220px,0);
	-ms-transform: translate3d(240px,-220px,0);
	transform: translate3d(240px,-220px,0);
}
.penstart {
	-webkit-animation: penstart 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	-moz-animation: penstart 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	-ms-animation: penstart 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	animation: penstart 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@-webkit-keyframes penstart {
	0% { -webkit-transform: translate3d(240px,-220px,0); }
	100% { -webkit-transform: translate3d(0px,0px,0px); }
}
@-moz-keyframes penstart {
	0% { -moz-transform: translate3d(240px,-220px,0); }
	100% { -moz-transform: translate3d(0px,0px,0px); }
}
@-ms-keyframes penstart {
	0% { -ms-transform: translate3d(240px,-220px,0); }
	100% { -ms-transform: translate3d(0px,0px,0px); }
}
@keyframes penstart {
	0% { transform: translate3d(240px,-220px,0); }
	100% { transform: translate3d(0px,0px,0px); }
}

/* penshadow */

.penshadow {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	opacity: 0;
}
.penshadowon {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	opacity: 1;
	-webkit-transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
	-moz-transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
	-ms-transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* pens */

.pensready {
	-webkit-transform: translate3d(-936px,0,0);
	-moz-transform: translate3d(-936px,0,0);
	-ms-transform: translate3d(-936px,0,0);
	transform: translate3d(-936px,0,0);
}

.pensstart {
	-webkit-animation: pensstart 2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	-moz-animation: pensstart 2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	-ms-animation: pensstart 2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
	animation: pensstart 2s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}

@-webkit-keyframes pensstart {
	0% { -webkit-transform: translate3d(-936px,0px,0px); }
	100% { -webkit-transform: translate3d(0px,0px,0px); }
}
@-moz-keyframes pensstart {
	0% { -moz-transform: translate3d(-936px,0px,0px); }
	100% { -moz-transform: translate3d(0px,0px,0px); }
}
@-ms-keyframes pensstart {
	0% { -ms-transform: translate3d(-936px,0px,0px); }
	100% { -ms-transform: translate3d(0px,0px,0px); }
}
@keyframes pensstart {
	0% { transform: translate3d(-936px,0px,0px); }
	100% { transform: translate3d(0px,0px,0px); }
}

.pensslide {
	-webkit-animation: pensslide 48s linear infinite;
	-moz-animation: pensslide 48s linear infinite;
	-ms-animation: pensslide 48s linear infinite;
	animation: pensslide 48s linear infinite;
}

@-webkit-keyframes pensslide {
	0% { -webkit-transform: translate3d(0px,0px,0px); }
	100% { -webkit-transform: translate3d(468px,0px,0px); }
}
@-moz-keyframes pensslide {
	0% { -moz-transform: translate3d(0px,0px,0px); }
	100% { -moz-transform: translate3d(468px,0px,0px); }
}
@-ms-keyframes pensslide {
	0% { -ms-transform: translate3d(0px,0px,0px); }
	100% { -ms-transform: translate3d(468px,0px,0px); }
}
@keyframes pensslide {
	0% { transform: translate3d(0px,0px,0px); }
	100% { transform: translate3d(468px,0px,0px); }
}