@charset "UTF-8";
/* CSS Document */

/*fonts*/
@import url('https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c');
@font-face {
    font-family: 'dosislight';
    src: url('fonts/dosis-light.ttf') format('truetype'),
         url('fonts/dosis-light.svg#dosislight') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dosismedium';
    src: url('fonts/dosis-medium.ttf') format('truetype'),
         url('fonts/dosis-medium.svg#dosismedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dosissemibold';
    src: url('fonts/dosis-semibold.ttf') format('truetype'),
         url('fonts/dosis-semibold.svg#dosissemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dosisbold';
    src: url('fonts/dosis-bold.ttf') format('truetype'),
         url('fonts/dosis-bold.svg#dosisbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*content*/
body {
	margin: 0;
	padding: 0;
	font-family: 'dosismedium','M PLUS Rounded 1c', sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #333;
    letter-spacing: 0.02em;
	position: fixed;
}
img, div, ul, li, p, h1, h2, h3, h4 {
	-webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 0;
    vertical-align: top;
    outline: none;
    border: none;
	box-sizing: border-box;
	-webkit-appearance:none;
	list-style: none;
	font-weight: normal;
}
img {
	max-width: 100%;
}
.box {
	position: fixed;
	overflow: hidden;
	top: 0;
	bottom: 0;
    left: 0;
    right: 0;
}
#intro {
	width: 100%;
	background-color: #fff;
	z-index: -3;
}
#stage {
	width: 0;
	height: 2px;
	animation: show2 1s ease 1s both;
    -webkit-animation: show2 1s ease 1s both;
	z-index: -2;
	background-color: #eee;
	margin: auto;
}
@keyframes show2 {
    60%{width: 100%;height: 2px}
	100% {width: 100%;height: 100%}
 }

@-webkit-keyframes show2 {
    60%{width: 100%;height: 2px}
	100% {width: 100%;height: 100%}
}
#intro svg {
    width: 80%;
	max-width: 600px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.cls-1{fill:none;stroke:#000;stroke-linejoin: round;
		transform: rotateY(270deg);
		-webkit-transform: rotateY(270deg);
		animation: show 0.3s ease both;
    -webkit-animation: show 0.3s ease both;}
		@keyframes show {
    to {transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
 }

@-webkit-keyframes show {
    to {transform: rotateY(0deg);-webkit-transform: rotateY(0deg);}
}
		.cls-1:first-of-type {
		-webkit-transform-origin: 5.03316890627658% 49.5183545951575%;
		transform-origin: 5.03316890627658% 49.5183545951575%;
		}
		.cls-1:nth-of-type(2) {
		animation-delay: 0.1s;
		-webkit-animation-delay: 0.1s;
		-webkit-transform-origin: 17.8959006633781% 49.3881801614163%;
		transform-origin: 17.8959006633781% 49.3881801614163%;
		}
		.cls-1:nth-of-type(3) {
		animation-delay: 0.2s;
		-webkit-animation-delay: 0.2s;
		-webkit-transform-origin: 31.490049328117% 49.140848737308%;
		transform-origin: 31.490049328117% 49.140848737308%;
		}
		.cls-1:nth-of-type(4) {
		animation-delay: 0.3s;
		-webkit-animation-delay: 0.3s;
		-webkit-transform-origin: 44.7137268242899% 50.088518614944%;
		transform-origin: 44.7137268242899% 50.088518614944%;
		}
		.cls-1:nth-of-type(5) {
		animation-delay: 0.4s;
		-webkit-animation-delay: 0.4s;
		-webkit-transform-origin: 57.6305494131655% 50.0312418640979%;
		transform-origin: 57.6305494131655% 50.0312418640979%;
		}
		.cls-1:nth-of-type(6) {
		animation-delay: 0.5s;
		-webkit-animation-delay: 0.5s;
		-webkit-transform-origin: 70.5783296478993% 49.2970580577975%;
		transform-origin: 70.5783296478993% 49.2970580577975%;
		}
		.cls-1:nth-of-type(7) {
		animation-delay: 0.6s;
		-webkit-animation-delay: 0.6s;
		-webkit-transform-origin: 82.7416227249532% 50.0312418640979%;
		transform-origin: 82.7416227249532% 50.0312418640979%;
		}
		.cls-1:nth-of-type(8) {
		animation-delay: 0.7s;
		-webkit-animation-delay: 0.7s;
		-webkit-transform-origin: 95.0770539207348% 51.5985420463421%;
		transform-origin: 95.0770539207348% 51.5985420463421%;
		}
/*morph*/
.stage {
	width: 150px;
    display: grid;
    grid-template-columns: 50px 50px;
    grid-gap: 30px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 350px;
}

.item {
	display: block;
	height: 50px;
}

svg {
	display: block;
}
/*main*/
.mask {
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
	position: absolute;
	top: -10%;
	left: 0;
	right: 0;
	bottom: 0;
}
.txt-box {
    position: absolute;
    font-size: 12px;
	animation: txtbox 1s ease 4s both;
    -webkit-animation: txtbox 1s ease 4s both;
	transform: translateY(150%);
}
@keyframes txtbox {
	to {transform: translateY(0);}
 }

@-webkit-keyframes txtbox {
    to {transform: translateY(0);}
}
#cloud {
	background-color: rgba(255,255,255,0);
	animation: color 1s ease 4s both;
    -webkit-animation: color 1s ease 4s both;
	z-index: -1;
}
@keyframes color {
	to {background-color: rgba(255,255,255,1);}
 }

@-webkit-keyframes color {
    to {background-color: rgba(255,255,255,1);}
}
@media(min-width: 601px) {
	#svgPath {
	transform: translate(-50%, -100%);
	animation: mojap 1s ease 4s both;
    -webkit-animation: mojap 1s ease 4s both;
}
@keyframes mojap {
	to {transform: translate(-5%, -20%);}
 }
	@-webkit-keyframes mojap {
		to {transform: translate(-5%, -20%);}
}
.txt-box {
    right: 20px;
    bottom: 20px;
    font-size: 16px;
}
	.mask {
	background-image: url(img/main01p.jpg);
	background-size: 1036px;
    background-position: left top;
}
}
@media(max-width: 600px) {
	#svgPath {
	transform: translate(-25%, -100%);
	animation: mojas 1s ease 4s both;
    -webkit-animation: mojas 1s ease 4s both;
}
@keyframes mojas {
	to {transform: translate(-25%, -32%);}
 }
	@-webkit-keyframes mojas {
    to {transform: translate(-25%, -32%);}
}
.txt-box {
    left: 15px;
    bottom: 15px;
}
	.mask {
	background-image: url(img/main01.jpg);
		background-size: cover;
	background-position: center bottom;
}
}
#main {
	overflow: hidden;
    background-color: #fff;
	text-align: center;
}
.style-title {
	font-family: 'dosissemibold';
	font-size: 28px;
    padding: 20px 10px 10px;
}
div .style-title:before {
	display: block;
	font-size: 36px;
}
#style div:first-of-type .style-title:before {
	content:'1';
}
#style div:nth-of-type(3) .style-title:before {
	content:'2';
}
#style div:nth-of-type(5) .style-title:before {
	content:'3';
}
#style div:nth-of-type(7) .style-title:before {
	content:'4';
}
#style > div {
    position: relative;
    max-width: 1080px;
    margin: auto;
}
.detail-title {
    background-image: url(img/dots.svg);
    background-size: 20px;
    line-height: 80px;
    text-align: center;
    font-family: 'dosisbold';
    font-size: 40px;
    -webkit-text-stroke: 1px #333;
    color: #fff;
}
.detail {
	background-image: url(img/dots.svg);
    background-size: 20px;
	padding: 40px 20px;
	margin-bottom: 40px;
}
.detail div {
    max-width: 760px;
    margin: auto;
}

#tag-box {
    background-color: #eee;
    display: inline-block;
    text-align: left;
    padding: 20px;
    box-sizing: border-box;
	position: absolute;
	bottom: 30px;
	z-index: 3;
}
a.buy {
	font-family: 'dosissemibold';
    text-decoration: none;
    color: #fff;
    background-color: #333;
    display: block;
	width: 120px;
    padding: 10px 20px;
    margin: 40px auto 80px;
    font-size: 21px;
}
.bx-wrapper {
    margin: 20px auto 90px;
}
.bx-viewport {
    overflow: initial!important;
}
@media(min-width: 601px) {
	#style div div.action {
    width: 400px;
    margin: 10px;
    display: inline-block;
}
	#tag-box {
    right: 10px;
}
	#style div div:nth-of-type(2) {
    margin-bottom: 90px;
}
}
@media(max-width: 600px) {
	#style div div:nth-of-type(2) {
    margin-bottom: 100px;
}
	#style div div:first-of-type {
	margin: 20px 0;
}
#style div:nth-of-type(2n+1) div:first-of-type, #style div:nth-of-type(2n) div:nth-of-type(2) {
	margin-right: 15%;
}
#style div:nth-of-type(2n+1) div:nth-of-type(2), #style div:nth-of-type(2n) div:first-of-type {
	margin-left: 15%;
}
	#style div:nth-of-type(2n+1) #tag-box {
	left: 10px;
}
#style div:nth-of-type(2n) #tag-box {
	right: 10px;
}
	#tag-box {
		bottom: -70px;
	}
}
.action {
	position: relative;
	overflow: hidden;
}
.action:before, .action:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
-webkit-transition: 0.5s liner;
-moz-transition: 0.5s liner;
-o-transition: 0.5s liner;
transition: 0.5s;
	transform: translateX(0);
}
.action:before {
	background-color: #333;
	z-index: 2;
}
.action:after {
	background-color: #eee;
	z-index: 1;
	webkit-transition-delay: 0.6s liner;
-moz-transition-delay: 0.6s liner;
-o-transition-delay: 0.6s liner;
transition-delay: 0.6s;
}
.action.active:nth-of-type(2n+1):before, .action.active:nth-of-type(2n+1):after {
	transform: translateX(100%);
}
.action.active:nth-of-type(2n):before, .action.active:nth-of-type(2n):after {
	transform: translateX(-100%);
}
.bx-wrapper a {
    text-decoration: none;
    color: #333;
}
@media(max-width: 600px) {
	.comment p {
	font-size:11px;
	text-align: left;
    padding: 0 10px;
    letter-spacing: 0;
}
	.comment p br {
		display: none;
	}
}