@charset 'utf-8';
/*
 * name:top.css
 * author:sovanda nulo
*/

/* top
------------------------------------------------ */

/* === section what === */
#what { padding: 45px 0 85px; }
.what__desc { max-width: 535px; display: block; margin-left: auto; }
.what__desc--title {  }
.what__desc--title .wt-En { font-family:"minion-pro-caption"; font-size: 15px; font-size: 1.5rem; letter-spacing: .2em; color: #ccc; margin-bottom: .666em; }
.what__desc--title .wt-Jp { font-size: 30px; font-size: 3rem; font-weight: 500; letter-spacing: .35em; line-height: 1.3; }
.what__desc--btn { margin-top: 40px; }

	@media screen and (max-width: 768px) {

		#what { padding: 45px 0 60px; }
		.what__desc { margin-left: 0; }
		.what__desc--title .wt-En { font-size: 13px; font-size: 1.3rem; }
		.what__desc--title .wt-Jp { font-size: 19px; font-size: 1.9rem; }
		.what__desc--btn { max-width: 200px; margin-top: 30px; }

	}

/* === section visual === */
#visual { position: relative; width: calc( 100% + 1px ); height: 540px; display: block; overflow: hidden; margin-left: -1px; background: #000; }
#visual:after { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 540px; background-image: linear-gradient(180deg, rgba( 0, 0, 0, 0) 60%, rgba( 0, 0, 0, .7)); z-index: 1; }
.visual__items { position: relative; }
.visual__items__pic { position: relative; width: 100%; height: 540px; min-height: 500px; display: block; overflow: hidden; }
.visual__items__pic:after { content: ''; display: block; position: absolute; right: 0; left: 0; width: 100%; height: 100%; }
.visual__items__pic--frame { position: absolute; left: -60px; top: -30px; width: calc( 100% + 60px ); height: calc( 100% + 60px ); transition: linear 6s; transition-delay: 2s; }

#visual .owl-dots { position: absolute; bottom: 30px; left: 0; width: 100%; text-align: center; z-index: 2; }
#visual .owl-dot { padding: 0; margin: 0 20px; width: 40px; height: 40px; background-color: transparent; border:0; position: relative; cursor: pointer; }
#visual .owl-dot:focus { outline: none; }
#visual .owl-dot svg { width: 100%; height: 100%; }
#visual .owl-dot .c-circle-01 { visibility: hidden; position: absolute; left: 0; top:0; }
#visual .owl-dot .c-circle-02 { position: absolute; left: 0; top: 0; }
#visual .owl-dot.active .c-circle-01 { visibility: visible; }

.owl-item.active .visual__items__pic--framew { animation: animatedBackground 6s linear forwards; -moz-animation: animatedBackground 6s linear forwards; -webkit-animation: animatedBackground 6s linear forwards; -ms-animation: animatedBackground 6s linear forwards; -o-animation: animatedBackground 6s linear forwards; }
.owl-item.active .visual__items__pic--frame { transform: translate(30px, 0%) rotate3d(1, 0, 0, 0); transition-delay: 1s; }

	@media screen and (max-width: 768px) {
		#visual { height: calc( 100vh - 394px ); min-height: 200px; }
		#visual:after { content: none; height: calc( 100vh - 394px ); min-height: 200px; }
		.visual__items__pic { height: calc( 100vh - 394px ); min-height: 200px; }

		#visual .owl-dots { bottom: 20px; left: 15px; text-align: left; }
		#visual .owl-dot { margin: 0 5px; width: 28px; height: 28px; }

		.visual__scroll { font-family:"minion-pro-caption"; font-size: 12px; font-size: 1.2rem; letter-spacing: .1em; color: #fff; bottom: 33px; right: calc( 1em + 25px ); position: absolute; z-index: 3; }
		.visual__scroll--label {  }
		.visual__scroll--barr { position: absolute; right: -1em; top: .45em; }
		.visual__scroll--barr::before,
		.visual__scroll--barr::after { content: ''; width: 1px; display: block; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: #fff; }
		.visual__scroll--barr::before { width: 2px; height: 13px; z-index: 2; -webkit-animation: scroll_bar 2s linear infinite; animation: scroll_bar 2s linear infinite; }
		.visual__scroll--barr::after { height: 47px; z-index: 1; }

		@-webkit-keyframes scroll_bar { 0% { opacity: 0; -webkit-transform: translateX(-50%) translateY(0px); transform: translateX(-50%) translateY(0px); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateX(-50%) translateY(36px); transform: translateX(-50%) translateY(36px); } }
		@keyframes scroll_bar { 0% { opacity: 0; -webkit-transform: translateX(-50%) translateY(0px); transform: translateX(-50%) translateY(0px); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateX(-50%) translateY(36px); transform: translateX(-50%) translateY(36px); } }

	}

@keyframes animatedBackground { 0% { left: -60px; } 100% { left: -30px; } }
@-moz-keyframes animatedBackground { 0% { left: -60px; } 100% { left: -30px; } }
@-webkit-keyframes animatedBackground { 0% { left: -60px; } 100% { left: -30px; } }
@-ms-keyframes animatedBackground { 0% { left: -60px; } 100% { left: -30px; } }
@-o-keyframes animatedBackground { 0% { left: -60px; } 100% { left: -30px; } }

@-webkit-keyframes stroke01In { 0% { stroke-dasharray: 0 , 252; } 100% { stroke-dasharray: 252, 252; } }
@-webkit-keyframes stroke01Out { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -252; } }
@-webkit-keyframes stroke02In { 0% { stroke-dashoffset: 252; } 100% { stroke-dashoffset: 0; } }
@-webkit-keyframes stroke02Out { 0% { stroke-dashoffset: 0; } 100%{ stroke-dashoffset: -252; } }

@keyframes stroke01In { 0% { stroke-dasharray: 0 , 252; } 100% { stroke-dasharray: 252, 252; } }
@keyframes stroke01Out { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -252; } }
@keyframes stroke02In { 0% { stroke-dashoffset: 252; } 100% { stroke-dashoffset: 0; } }
@keyframes stroke02Out { 0% { stroke-dashoffset: 0; } 100%{ stroke-dashoffset: -252; } }

/* === section shop === */
#shop { padding: 80px 0 140px; }
.shop__links { max-width: 796px; width: 100%; display: block; margin: 0 auto; }
.shop__links__lists { display: block; overflow: hidden; -webkit-border-radius: 20px; border-radius: 20px; }
.shop__links__lists a { display: flex; flex-direction: column; justify-content: center; padding: 0 40px; width: 100%; height: 170px; transition: linear .4s; -webkit-box-sizing: border-box; box-sizing: border-box; }
.shop__links__lists--desc { display: block; color: #fff; }
.shop__links__lists--desc dt { max-width: 292.8px; width: 100%; }
.shop__links__lists--desc dt img { width: 100%; }
.shop__links__lists--desc dd { font-size: 15px; font-size: 1.5rem; line-height: 1.6; margin-top: 1.4em; }

	.shop__links--one a { background: url(../../img/top/bg-shop-1.jpg) no-repeat center; background-size: cover; }
	.shop__links--one a:hover { background: url(../../img/top/bg-shop-2.jpg) no-repeat center; background-size: cover; }

	@media screen and (max-width: 768px) {

		#shop { padding: 40px 0 80px; }
		.shop__links { max-width: 315px; }
		.shop__links__lists a { padding: 0 20px; height: 160px; }
		.shop__links__lists--desc dt { max-width: 206.78px; }
		.shop__links__lists--desc dd { font-size: 14px; font-size: 1.4rem; margin-top: .71em; }

			.shop__links--one a { background: url(../../img/top/bg-shop-1_sp.jpg) no-repeat center; background-size: cover; }
			.shop__links--one a:hover { background: url(../../img/top/bg-shop-1_sp.jpg) no-repeat center; background-size: cover; }
			
	}

/* === section insta === */
#insta { padding: 80px 0 140px; }
.insta--title { font-family:"minion-pro-caption"; font-size: 20px; font-size: 2rem; letter-spacing: .3em; text-align: center; position: relative; margin-bottom: 60px; }
.insta--title:after { content: ''; display: block; width: 60px; height: 2px; margin: .6em auto 0; background: #59574E; }
.insta__desc { display: flex; flex-wrap: wrap; align-items: center; max-width: 820px; margin: 80px auto 0; }
.insta__desc dt { font-size: 16px; font-size: 1.6rem; line-height: 1.8; width: calc( 63.4% - 15px ); margin-right: 15px; }
.insta__desc dd { width: 36.6%; }
.insta__feeds { display: flex; flex-wrap: wrap; align-items: flex-start; }
.insta__feeds__lists { position: relative; width: 23.7%; padding-bottom: 23.7%; margin-right: 1.73333333333%; }
.insta__feeds__lists:nth-child(4n) { margin-right: 0; }
.insta__feeds__lists:nth-child(n+5) { margin-top: 1.73333333333%; }
.insta__feeds__lists a { display: block; overflow: hidden; color: #fff; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-border-radius: 20px; border-radius: 20px; }
.insta__feeds__lists__desc { font-size: 14px; font-size: 1.4rem; display: block; position: absolute; width: 100%; height: 100%; padding: 1.07em 1.42em; background: rgba(0, 0, 0, .65); -webkit-box-sizing: border-box; box-sizing: border-box; transition: linear .2s; opacity: 0; }
.insta__feeds__lists__desc--title {  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.insta__feeds__lists__desc--date { position: absolute; left: 1.42em; bottom: 1.07em; }

	.insta__feeds__lists a:hover .insta__feeds__lists__desc { opacity: 1; }

	@media screen and (max-width: 768px) {

		#insta { padding: 50px 0 80px; }
		.insta--title { font-size: 18px; font-size: 1.8rem; margin-bottom: 35px; }
		.insta--title:after { height: 1px; }
		.insta__desc { display: block; margin: 30px auto 0; }
		.insta__desc dt { font-size: 15px; font-size: 1.5rem; width: 100%; margin-right: 0; }
		.insta__desc dd { width: 100%; margin-top: 30px; }
		.insta__desc--btn { max-width: 325px; }
		.insta__feeds__lists {width: 48.4%; padding-bottom: 48.4%; margin-right: 3.2%; }
		.insta__feeds__lists:nth-child(2n) { margin-right: 0; }
		.insta__feeds__lists:nth-child(n+3) { margin-top: 3.2%; }
		.insta__feeds__lists__desc { display: none; }

	}

/* === section about === */
.about {  }


/* === section faceb === */
#faceb { padding: 80px 0; background: #F4F4F4; }
.faceb__block { display: flex; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.faceb__block__desc { width: 50%; padding-right: 6%; -webkit-box-sizing: border-box; box-sizing: border-box; }
.faceb__block__desc--title { font-size: 30px; font-size: 3rem; letter-spacing: .35em; line-height: 1.5; margin-bottom: 1em; }
.faceb__block__desc--cmn { font-size: 16px; font-size: 1.6rem; line-height: 1.8; }
.faceb__block__desc--btn { margin-top: 50px; }
.faceb__block--iframe { width: 44%; }

	@media screen and (max-width: 768px) {
		#faceb { padding: 80px 0; }
		.faceb__block { display: block; }
		.faceb__block__desc { width: 100%; padding-right: 0; }
		.faceb__block__desc--title { font-size: 19px; font-size: 1.9rem; line-height: 1.3; margin-bottom: 1.02em; }
		.faceb__block__desc--cmn { font-size: 15px; font-size: 1.5rem; }
		.faceb__block__desc--btn { max-width: 325px; margin-top: 30px; }
		.faceb__block--iframe { width: 100%; margin-top: 40px; }
		.faceb__block--iframe iframe { -webkit-transform: scale(.94); transform: scale(.94); margin: -10px; }
	}