@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: 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: -35px 0 0 -150px;
	z-index: 2;
}
#loading .bar {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 80px 0 0 -75px;
	width: 150px;
	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: -170px 0 0 -170px;
	width: 340px;
	height: 340px;
	background: white;
	z-index: 1;
	-webkit-border-radius: 350px;
	-moz-border-radius: 350px;
	-ms-border-radius: 350px;
	border-radius: 350px;
}
#loading .colors {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -175px 0 0 -175px;
	width: 350px;
	height: 350px;
	background: rgb(245,245,245);
	overflow: hidden;
	z-index: 1;
	-webkit-border-radius: 350px;
	-moz-border-radius: 350px;
	-ms-border-radius: 350px;
	border-radius: 350px;
	-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 -600px;
	width: 1200px;
	height: 350px;
	-webkit-animation: slide 5s linear infinite;
	-moz-animation: slide 5s linear infinite;
	-ms-animation: slide 5s linear infinite;
	animation: slide 5s linear infinite;
}
#loading .colors li {
	float: left;
	width: 50px;
	height: 350px;
}
#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);
}

/* main
----------------------------------------------- */

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

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

#stamps li {
	position: absolute;
	left: 50%;
	width: 85px;
	height: 85px;
	background-repeat: no-repeat;
	pointer-events: none;
	-webkit-background-size: 85px 85px;
	-moz-background-size: 85px 85px;
	-ms-background-size: 85px 85px;
	background-size: 85px 85px;
	mix-blend-mode: multiply;
}
#stamps li:nth-child(1) {
	top: 1226px;
	margin: 0 0 0 488px;
}
#stamps li:nth-child(2) {
	top: 1265px;
	margin: 0 0 0 442px;
}
#stamps li:nth-child(3) {
	top: 1388px;
	margin: 0 0 0 571px;
}
#stamps li:nth-child(4) {
	top: 2104px;
	margin: 0 0 0 553px;
}
#stamps li:nth-child(5) {
	top: 2151px;
	margin: 0 0 0 590px;
}
#stamps li:nth-child(6) {
	top: 2300px;
	margin: 0 0 0 -648px;
}
#stamps li:nth-child(7) {
	top: 2615px;
	margin: 0 0 0 518px;
}
#stamps li:nth-child(8) {
	top: 2868px;
	margin: 0 0 0 -561px;
}
#stamps li:nth-child(9) {
	top: 2898px;
	margin: 0 0 0 -605px;
}
#stamps li:nth-child(10) {
	top: 3439px;
	margin: 0 0 0 -579px;
}
#stamps li:nth-child(11) {
	top: 4034px;
	margin: 0 0 0 -673px;
}
#stamps li:nth-child(12) {
	top: 4255px;
	margin: 0 0 0 490px;
}
#stamps li:nth-child(13) {
	top: 4293px;
	margin: 0 0 0 450px;
}
#stamps li:nth-child(14) {
	top: 4382px;
	margin: 0 0 0 -735px;
}
#stamps li:nth-child(15) {
	top: 4425px;
	margin: 0 0 0 -710px;
}
#stamps li:nth-child(16) {
	top: 4485px;
	margin: 0 0 0 549px;
}
#stamps li:nth-child(17) {
	top: 5009px;
	margin: 0 0 0 -595px;
}
#stamps li:nth-child(18) {
	top: 5274px;
	margin: 0 0 0 480px;
}
#stamps li:nth-child(19) {
	top: 5320px;
	margin: 0 0 0 445px;
}
#stamps li:nth-child(20) {
	top: 5451px;
	margin: 0 0 0 -597px;
}
#stamps li:nth-child(21) {
	top: 5487px;
	margin: 0 0 0 -640px;
}
#stamps li:nth-child(22) {
	top: 5632px;
	margin: 0 0 0 -492px;
}
#stamps li:nth-child(23) {
	top: 5654px;
	margin: 0 0 0 574px;
}
#stamps li:nth-child(24) {
	top: 5744px;
	margin: 0 0 0 492px;
}
#stamps li:nth-child(25) {
	top: 6414px;
	margin: 0 0 0 535px;
}
#stamps li:nth-child(26) {
	top: 6814px;
	margin: 0 0 0 -547px;
}
#stamps li:nth-child(27) {
	top: 6842px;
	margin: 0 0 0 -500px;
}

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

#header {
	position: fixed;
	top: -20px;
	left: 0;
	width: 100%;
	height: 80px;
	background: white;
	z-index: 5;
	-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	-ms-box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
#header h1 {
	position: absolute;
	top: 36px;
	left: 50%;
	margin: 0 0 0 -420px;
}
#header .menu {
	position: absolute;
	top: 28px;
	left: 50%;
	margin: 0 0 0 96px;
}
#header .menu li {
	float: left;
	margin: 0 60px 0 0;
}
#header .menu li a {
	display: block;
	padding: 15px 0;
	-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 li a:hover {
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	-ms-opacity: 0.5;
	opacity: 0.5;
}

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

#footer {
	padding: 10px 0 20px;
	text-align: center;
	background: #f0f0f0;
	overflow: hidden;
}
#footer p {
	padding: 20px 0 0;
}
#footer .logo img {
	width: auto;
	height: 40px;
}
#footer .copyright {
	color: #969696;
	font-family: Arial;
	font-size: 0.65em;
	font-weight: bold;
}

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

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

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

#pageup {
	position: fixed;
	right: 25px;
	bottom: 25px;
	width: 60px;
	height: 60px;
	background: rgb(37,183,170);
	cursor: pointer;
	z-index: 2;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	-ms-border-radius: 60px;
	border-radius: 60px;
	-webkit-transition: background 0.15s ease;
	-moz-transition: background 0.15s ease;
	-ms-transition: background 0.15s ease;
	transition: background 0.15s ease;
}
#pageup:hover {
	background: rgb(17,163,150);
}
#pageup:after {
	display: block;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -7px 0 0 -10px;
	width: 21px;
	height: 14px;
	background: url(../images/pageup.png) no-repeat;
	-webkit-background-size: 21px 14px;
	-moz-background-size: 21px 14px;
	-ms-background-size: 21px 14px;
	background-size: 21px 14px;
}
#pageup.bottom {
	bottom: 145px;
}

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

#intro {
	position: relative;
	height: 580px;
	overflow: hidden;
}
#intro h2 {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -44px 0 0 -150px;
	width: 300px;
	z-index: 2;
}
#intro h2 span {
	display: block;
	overflow: hidden;
}
#intro .pen {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -364px 0 0 52px;
	z-index: 3;
}
#intro .shadow {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -127px 0 0 32px;
	z-index: 2;
}
#intro .circle {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -185px 0 0 -175px;
	width: 350px;
	height: 350px;
	background: rgba(255,255,255,0.75);
	overflow: hidden;
	z-index: 1;
	-webkit-border-radius: 350px;
	-moz-border-radius: 350px;
	-ms-border-radius: 350px;
	border-radius: 350px;
}
#intro .circle span {
	display: block;
	position: absolute;
	top: 250px;
	left: 50%;
}
#intro .circle .pen01 {
	margin: 0 0 0 -119px;
}
#intro .circle .pen02 {
	margin: 0 0 0 -57px;
}
#intro .circle .pen03 {
	margin: 0 0 0 5px;
}
#intro .circle .pen04 {
	margin: 0 0 0 68px;
}

/* pens */

#intro .pens {
	position: absolute;
	top: 134px;
	left: 50%;
	margin: 0 0 0 -1314px;
	width: 2628px;
}
#intro .pens li {
	float: left;
	width: 73px;
	text-align: center;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}

/* stamps */

#intro .stamps {
	position: absolute;
	left: 50%;
	margin: 0 0 0 -700px;
	width: 1400px;
}
#intro .stamps.top {
	top: 0;
}
#intro .stamps.bottom {
	bottom: 0;
}

#intro .stamps li {
	position: absolute;
	width: 50px;
	height: 50px;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: 48px 48px;
	-moz-background-size: 48px 48px;
	-ms-background-size: 48px 48px;
	background-size: 48px 48px;
	mix-blend-mode: multiply;
}

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

#about {
	position: relative;
	height: 705px;
	border-top: 1px solid #f2f2f2;
	overflow: hidden;
}
#about h2 {
	position: absolute;
	top: 100px;
	left: 50%;
	margin: 0 0 0 -228px;
	width: 457px;
	height: 148px;
	z-index: 1;
}
#about h2 span {
	display: block;
	position: absolute;
}
#about h2 span:nth-child(2) {
	top: -7px;
	left: 136px;
}
#about h2 span:nth-child(3) {
	top: -25px;
	left: 138px;
}
#about .articles {
	position: absolute;
	top: 385px;
	left: 50%;
	margin: 0 0 0 -480px;
	width: 960px;
	z-index: 1;
}
#about article {
	float: left;
	position: relative;
	width: 50%;
}
#about article h3 {
	padding: 120px 0 0;
}
#about article p {
	padding: 20px 0 0;
	font-size: 0.95em;
	line-height: 1.35em;
}
#about article em {
	color: #ff6a6a;
	font-style: normal;
}
#about article figure {
	position: absolute;
	top: 0;
}
#about .left h3 {
	margin: 0 0 0 210px;
}
#about .left p {
	margin: 0 0 0 210px;
}
#about .left figure {
	left: 0;
}
#about .right h3 {
	margin: 0 0 0 89px;
}
#about .right p {
	margin: 0 0 0 89px;
}
#about .right figure {
	right: 0;
}
#about .pen {
	position: absolute;
	top: 375px;
	left: 50%;
	margin: 0 0 0 -351px;
	width: 703px;
	text-align: center;
	z-index: 1;
	pointer-events: none;
}
#about .pen figure:last-child {
	padding: 30px 0 0;
}
#about .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#about .icons span:nth-child(1) {
	top: 51px;
	margin: 0 0 0 163px;
}
#about .icons span:nth-child(2) {
	top: 527px;
	margin: 0 0 0 -480px;
}

#about .base {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -700px;
}

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

#feature {
	position: relative;
	height: 1635px;
	border-top: 1px solid #f2f2f2;
	overflow: hidden;
}
#feature h2 {
	position: absolute;
	top: 101px;
	left: 50%;
	margin: 0 0 0 -241px;
	width: 483px;
	height: 110px;
	text-align: center;
	z-index: 1;
}
#feature h2 span {
	display: block;
}
#feature h2 span:last-child {
	padding: 20px 0 0;
}
#feature h3 {
	position: absolute;
	top: 680px;
	left: 50%;
	margin: 0 0 0 -255px;
	width: 510px;
	z-index: 1;
}
#feature h3 span {
	display: block;
	overflow: hidden;
}

#feature .image {
	position: absolute;
	top: 270px;
	left: 50%;
	margin: 0 0 0 155px;
	width: 413px;
	height: 354px;
}
#feature .image span {
	display: block;
	position: absolute;
}
#feature .image span img {
	position: absolute;
}
#feature .image span:nth-child(1) {
	top: 263px;
	left: 0;
	width: 74px;
	height: 90px;
}
#feature .image span:nth-child(2) {
	top: 232px;
	left: 113px;
	width: 74px;
	height: 89px;
}
#feature .image span:nth-child(3) {
	top: 262px;
	left: 226px;
	width: 74px;
	height: 91px;
}
#feature .image span:nth-child(4) {
	top: 232px;
	left: 339px;
	width: 74px;
	height: 91px;
}

#feature .bee {
	position: absolute;
	top: 270px;
	left: 50%;
	margin: 0 0 0 155px;
	width: 413px;
	height: 354px;
}
#feature .bee span {
	display: block;
	position: absolute;
}
#feature .bee span:nth-child(1) {
	top: 69px;
	left: 23px;
}
#feature .bee span:nth-child(2) {
	top: 0px;
	left: 209px;
}
#feature .bee span:nth-child(3) {
	top: 70px;
	left: 305px;
}

#feature .points {
	position: absolute;
	top: 750px;
	left: 50%;
	margin: 0 0 0 -400px;
	width: 800px;
	z-index: 1;
}
#feature .points li {
	float: left;
}
#feature .points li:nth-child(1) {
	padding: 0 39px 0 0;
}
#feature .points li:nth-child(2) {
	padding: 3px 0 27px;
}
#feature .points li:nth-child(4) {
	padding: 26px 0 0;
}
#feature .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#feature .icons span:nth-child(1) {
	top: 57px;
	margin: 0 0 0 275px;
}
#feature .icons span:nth-child(2) {
	top: 1395px;
	margin: 0 0 0 -563px;
}
#feature .base {
	position: absolute;
	top: -60px;
	left: 50%;
	margin: 0 0 0 -700px;
	width: 1400px;
}

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

#enjoy {
	position: relative;
	height: 1519px;
	border-top: 1px solid #f2f2f2;
	overflow: hidden;
}
#enjoy h2 {
	position: absolute;
	top: 100px;
	left: 50%;
	margin: 0 0 0 -273px;
	width: 546px;
	z-index: 1;
}
#enjoy h3 {
	position: absolute;
	top: 619px;
	left: 50%;
	margin: 0 0 0 -274px;
	width: 529px;
	z-index: 1;
}
#enjoy h3 span {
	display: block;
	overflow: hidden;
}
#enjoy .hello {
	position: absolute;
	top: 301px;
	left: 50%;
	margin: 0 0 0 -526px;
	width: 530px;
	height: 145px;
	z-index: 1;
}
#enjoy .hello li {
	position: absolute;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	-webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	-ms-background-size: 30px 30px;
	background-size: 30px 30px;
	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);
}

/* scenes */

#enjoy .scenes {
	position: absolute;
	top: 700px;
	left: 50%;
	margin: 0 0 0 -482px;
	width: 964px;
	z-index: 1;
}
#enjoy .scenes li {
	position: absolute;
}
#enjoy .scenes li span {
	display: block;
	position: absolute;
	left: 0;
}
#enjoy .scenes li span:first-child {
	z-index: 1;
}
#enjoy .scenes li:nth-child(1) {
	top: 0;
	left: 0;
}
#enjoy .scenes li:nth-child(2) {
	top: 0;
	left: 320px;
}
#enjoy .scenes li:nth-child(3) {
	top: 0;
	left: 639px;
}
#enjoy .scenes li:nth-child(4) {
	top: 259px;
	left: 79px;
}
#enjoy .scenes li:nth-child(5) {
	top: 262px;
	left: 400px;
}
#enjoy .scenes li:nth-child(1) span:last-child,
#enjoy .scenes li:nth-child(2) span:last-child,
#enjoy .scenes li:nth-child(3) span:last-child {
	top: 20px;
	left: 40px;
}
#enjoy .scenes li:nth-child(4) span:first-child,
#enjoy .scenes li:nth-child(5) span:first-child {
	top: 180px;
	left: 0;
}
#enjoy .scenes li:nth-child(4) span:last-child,
#enjoy .scenes li:nth-child(5) span:last-child {
	top: 0;
	left: 40px;
}
#enjoy .art {
	position: absolute;
	top: 1013px;
	left: 50%;
	margin: 0 0 0 263px;
	width: 210px;
	z-index: 1;
}
#enjoy .art span {
	display: block;
	position: absolute;
}
#enjoy .art span:first-child {
	top: 0;
	left: 46px;
}
#enjoy .art span:last-child {
	top: 47px;
	left: 0;
}
#enjoy .icons span {
	display: block;
	position: absolute;
	z-index: 1;
}
#enjoy .icons span:nth-child(1) {
	top: 35px;
	left: 50%;
	margin: 0 0 0 303px;
}
#enjoy .icons span:nth-child(2) {
	top: 126px;
	left: 50%;
	margin: 0 0 0 -375px;
}
#enjoy .icons span:nth-child(3) {
	top: 775px;
	left: 50%;
	margin: 0 0 0 -265px;
}
#enjoy .icons span:nth-child(4) {
	top: 860px;
	left: 50%;
	margin: 0 0 0 126px;
}
#enjoy .icons span:nth-child(5) {
	top: 868px;
	left: 50%;
	margin: 0 0 0 520px;
}
#enjoy .icons span:nth-child(6) {
	top: 966px;
	left: 50%;
	margin: 0 0 0 -555px;
}
#enjoy .icons span:nth-child(7) {
	top: 1030px;
	left: 50%;
	margin: 0 0 0 -474px;
}
#enjoy .button03 {
	position: absolute;
	top: 1321px;
	left: 50%;
	margin: 0 0 0 -200px;
}
#enjoy .base {
	position: absolute;
	top: 36px;
	left: 50%;
	margin: 0 0 0 -700px;
	width: 1400px;
}

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

#lineup {
	position: relative;
	height: 924px;
	border-top: 1px solid #f2f2f2;
	overflow: hidden;
}
#lineup h2 {
	position: absolute;
	top: 100px;
	left: 50%;
	margin: 0 0 0 -166px;
	width: 332px;
	z-index: 1;
}
#lineup .pens {
	position: absolute;
	top: 259px;
	left: 50%;
	margin: 0 0 0 -1223px;
	width: 2520px;
	z-index: 1;
}
#lineup .pens li {
	float: left;
	margin: 0 25px;
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}
#lineup .colors {
	position: absolute;
	top: 495px;
	left: 50%;
	margin: 0 0 0 -439px;
	width: 838px;
}
#lineup .colors li {
	float: left;
	margin: 0 0 0 -11px;
	mix-blend-mode: multiply;
}
#lineup .articles {
	position: absolute;
	top: 674px;
	left: 50%;
	margin: 0 0 0 -387px;
	width: 824px;
}
#lineup article {
	float: left;
	position: relative;
	min-height: 83px;
}
#lineup article p {
	font-size: 0.8em;
	line-height: 1.5em;
}
#lineup article figure {
	position: absolute;
	top: 0;
	left: 0;
}
#lineup .item01 {
	width: 255px;
}
#lineup .item01 h3 {
	margin: 0 0 0 70px;
}
#lineup .item01 p {
	margin: 16px 0 0 70px;
}
#lineup .item02 {
	width: 254px;
}
#lineup .item02 h3 {
	margin: 0 0 0 73px;
}
#lineup .item02 p {
	margin: 16px 0 0 73px;
}
#lineup .item03 h3 {
	margin: 0 0 0 170px;
}
#lineup .item03 p {
	margin: 16px 0 0 170px;
}
#lineup .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#lineup .icons span:nth-child(1) {
	top: 99px;
	margin: 0 0 0 -327px;
}
#lineup .icons span:nth-child(2) {
	top: 620px;
	margin: 0 0 0 176px;
}
#lineup .icons span:nth-child(3) {
	top: 837px;
	margin: 0 0 0 -478px;
}

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

#movie {
	position: relative;
	height: 636px;
	border-top: 1px solid #f2f2f2;
	overflow: hidden;
}
#movie h2 {
	position: absolute;
	top: 100px;
	left: 50%;
	margin: 0 0 0 -145px;
	width: 291px;
	z-index: 1;
}
#movie .image {
	position: absolute;
	top: 195px;
	left: 50%;
	margin: 0 0 0 -300px;
	width: 600px;
	cursor: pointer;
	z-index: 1;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
#movie .image:hover {
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	-ms-opacity: 0.5;
	opacity: 0.5;
}
#movie .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#movie .icons span:nth-child(1) {
	top: 75px;
	margin: 0 0 0 -215px;
}
#movie .icons span:nth-child(2) {
	top: 75px;
	margin: 0 0 0 165px;
}
#movie .icons span:nth-child(3) {
	top: 502px;
	margin: 0 0 0 -396px;
}

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

#links {
	position: relative;
	height: 600px;
	overflow: hidden;
}
#links .mydot {
	position: absolute;
	top: 47px;
	left: 50%;
	margin: 0 0 0 -440px;
	width: 880px;
}
#links .banners {
	position: absolute;
	top: 361px;
	left: 50%;
	margin: 0 0 0 -440px;
	width: 880px;
}
#links .banners .left {
	float: left;
	width: 400px;
}
#links .banners .right {
	float: right;
	width: 400px;
}
#links .icons span {
	display: block;
	position: absolute;
	left: 50%;
	z-index: 1;
}
#links .icons span:nth-child(1) {
	top: 258px;
	margin: 0 0 0 -670px;
}
#links .icons span:nth-child(2) {
	top: 285px;
	margin: 0 0 0 470px;
}

/* campaign
----------------------------------------------- */

#campaign {
	position: relative;
	height: 240px;
	background: white;
	overflow: hidden;
	padding-top:100px;
}
#campaign p {
	position: relative;
	width: 100%;
	height: 240px;
	-webkit-transition: opacity 0.25s;
	-moz-transition: opacity 0.25s;
	-ms-transition: opacity 0.25s;
	transition: opacity 0.25s;
}
#campaign p:hover {
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-opacity: 0.7;
	opacity: 0.7;
}
#campaign p img {
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0 0 0 -437px;
	width: 880px;
}

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

#special .button01 {
	position: absolute;
	top: 465px;
}
#special .mydot {
	left: 28px;
}
#special .twitter {
	left: 230px;
}

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

#modal_close {
	display: none;
	position: fixed;
	top: 25px;
	right: 25px;
	width: 60px;
	height: 60px;
	background: rgb(255,137,137);
	cursor: pointer;
	z-index: 5;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	-ms-border-radius: 60px;
	border-radius: 60px;
	-webkit-transition: background 0.15s ease;
	-moz-transition: background 0.15s ease;
	-ms-transition: background 0.15s ease;
	transition: background 0.15s ease;
}
#modal_close.on {
	display: block;
}
#modal_close:hover {
	background: rgb(245,127,127);
}
#modal_close span {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -10px 0 0 -10px;
}

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

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

#modal_enjoy {
	display: none;
}
#modal_enjoy.on {
	display: block;
}
#modal_enjoy .main {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -350px 0 0 -400px;
	padding: 60px 0;
	width: 800px;
	height: 580px;
	z-index: 1;
}
#modal_enjoy .main.fix {
	position: relative;
	top: 0;
	margin: 0 0 0 -400px;
}
#modal_enjoy .movie {
	position: absolute;
	top: 205px;
	left: 390px;
	width: 370px;
	overflow: hidden;
}
#modal_enjoy .movie img {
	width: 100%;
	height: auto;
}
#modal_enjoy .icons span {
	position: absolute;
	left: 50%;
	z-index: 1;
}
#modal_enjoy .icons span:nth-child(1) {
	top: 499px;
	margin: 0 0 0 -473px;
}
#modal_enjoy .icons span:nth-child(2) {
	top: 360px;
	margin: 0 0 0 305px;
}
#modal_enjoy .icons span:nth-child(3) {
	top: 620px;
	margin: 0 0 0 -362px;
}

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

#modal_movie {
	display: none;
}
#modal_movie.on {
	display: block;
}
#modal_movie .main {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
}

/* buttons
----------------------------------------------- */

/* button01 */

.button01 a {
	display: block;
	position: relative;
	width: 177px;
	height: 177px;
	overflow: visible;
}
.button01 span {
	display: block;
	position: absolute;
}
.button01 .rotation {
	position: relative;
	width: 177px;
	height: 177px;
}
.button01 .rotation span {
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.button01 .text {
	left: 0;
	bottom: 22px;
	width: 100%;
	text-align: center;
	-webkit-transition: opacity 0.25s ease-out;
	-moz-transition: opacity 0.25s ease-out;
	-ms-transition: opacity 0.25s ease-out;
	transition: opacity 0.25s ease-out;
}
.button01 a:hover .text {
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	-ms-opacity: 0.7;
	opacity: 0.7;
}
.button01 .on {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	opacity: 0;
	-webkit-transition: opacity 0.25s ease-out;
	-moz-transition: opacity 0.25s ease-out;
	-ms-transition: opacity 0.25s ease-out;
	transition: opacity 0.25s ease-out;
}
.button01 a:hover .on {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	opacity: 1;
}
.button01.mydot .icon {
	top: -9px;
	left: 3px;
}
.button01.twitter .icon {
	top: -20px;
	left: 106px;
}

/* button02 */

.button02 a {
	display: block;
	position: relative;
	width: 400px;
	height: 120px;
}
.button02 span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.button02 .on {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	opacity: 0;
	-webkit-transition: opacity 0.15s ease-out;
	-moz-transition: opacity 0.15s ease-out;
	-ms-transition: opacity 0.15s ease-out;
	transition: opacity 0.15s ease-out;
}
.button02 a:hover .on {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	opacity: 1;
}

/* button03 */

.button03 a {
	display: block;
	position: relative;
	width: 400px;
	height: 100px;
	overflow: visible;
	cursor: pointer;
}
.button03 span {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.button03 .on {
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	opacity: 0;
	-webkit-transition: opacity 0.15s ease-out;
	-moz-transition: opacity 0.15s ease-out;
	-ms-transition: opacity 0.15s ease-out;
	transition: opacity 0.15s ease-out;
}
.button03 a:hover .on {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	opacity: 1;
}
.button03 .icon {
	top: 42px;
	left: -20px;
}
.button03 .balloon {
	top: -11px;
	left: 50px;
}

/* 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(600px); }
}
@-moz-keyframes slide {
	0% { -moz-transform: translateX(0px); }
	100% { -moz-transform: translateX(600px); }
}
@-ms-keyframes slide {
	0% { -ms-transform: translateX(0px); }
	100% { -ms-transform: translateX(600px); }
}
@keyframes slide {
	0% { transform: translateX(0px); }
	100% { transform: translateX(600px); }
}