@charset "utf-8";


.ttl { position: relative; background: #d38d78;}
.ttl:before { content: ''; display: block; width: 40%; height: 100%; background: #fbede4; position: absolute; left: 0; top: 0; z-index: 1;}
.ttl div { position: relative; z-index: 2; width: 100%; max-width: 860px; margin: 0 auto; padding: 30px; background: #d38d78; border-left: solid 8px #fbede4;}
.ttl div h2 { color: #fff; font-size: 22px; letter-spacing: 0.1rem;}
.ttl div h2 span { display: inline-block; vertical-align: middle;}
.ttl div h2 span.eng { margin-right: 40px; font-size: 42px;}
.ttl div h2 span.jp { font-weight: 600;}
@media (max-width: 641px) {
	.ttl div h2 { font-size: 18px;}
	.ttl div h2 span.eng { margin-right: 30px; font-size: 32px;}
}
@media (max-width: 481px) {
	.ttl div { padding: 12px 16px; border-width: 10px;}
	.ttl div h2 { font-size: 13px; letter-spacing: 0.08rem;}
	.ttl div h2 span.eng { margin-right: 20px; font-size: 24px;}
}


.btn a { position: relative; display: block; width: 100%; padding: 18px 0; background: #fbede4; border-radius: 8px;
 color: #d38d78; font-size: 18px; font-weight: 700; text-decoration: none; text-align: center;
}
.btn a:after { content: ''; display: block; width: 12px; height: 12px;
 border-top: solid 4px #d38d78; border-right: solid 4px #d38d78;
 position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg);
}
@media (max-width: 481px) {
	.btn a { padding: 8px 0; border-radius: 5px; font-size: 14px;}
	.btn a:after { width: 9px; height: 9px; border-width: 2px; right: 15px;}
}


#kv { position: relative; background: linear-gradient(#f4e9e1,#f4e9e1);}
#kv:after { content: ''; display: block; width: 100%; height: 100%; background: url('../img/index/kv@wide.jpg') no-repeat 50% 50%;
 position: absolute; left: 0; bottom: 0;
}
#kv .inner-kv { position: relative; width: 100%; max-width: 1400px; margin: 0 auto; z-index: 2;}
#kv .ctn { position: absolute; left: 0; top: 0; width: 100%; z-index: 3;}
#kv .ctn .inner { width: 60%; margin: 0 0 0 auto; padding-top: 120px;/*  padding-top: 12vw; */}
#kv .ctn .logo { width: 23.5%; max-width: 180px; margin: 0 auto 50px;}
#kv .ctn .logo img { width: 100%;}
#kv .ctn .txt { width: 60%; max-width: 450px; margin: 0 auto 60px;}
#kv .ctn .txt p img { width: 100%;}
#kv .ctn .txt p img.sp { display: none;}
#kv .ctn .news { width: 82%; max-width: 380px; margin: 0 auto 50px;}
#kv .ctn .news a { display: block; padding: 12px 16px; background: linear-gradient(90deg,#f9e4d1,#fff,#f9e4d1); box-shadow: 5px 5px 0 #fff;
 color: #716050; text-decoration: none;
}
#kv .ctn .news a dl { display: table; width: 100%;}
#kv .ctn .news a dl dt,
#kv .ctn .news a dl dd { display: table-cell; vertical-align: middle;}
#kv .ctn .news a dl dt { width: 90px;}
#kv .ctn .news a dl dt img { width: 100%;}
#kv .ctn .news a dl dd { padding-left: 15px; font-size: 12px;}
#kv .ctn .news a dl dd sub { font-size: 10px; vertical-align: baseline;}
#kv .ctn .news a:hover { opacity: 0.8;}
#kv .ctn .btn a { max-width: 340px; margin: 0 auto; padding: 12px 0; background: #d38d78; border-radius: 50px; color: #fff; font-size: 20px; text-indent: 20px;}
#kv .ctn .btn a svg { position: absolute; left: 50%; top: 50%; transform: translate(-80px,-55%); width: 24px; fill: #fff;}
#kv .ctn .btn a:after { border-top: solid 2px #fff; border-right: solid 2px #fff;}
#kv .ctn .btn a:hover { background: #fff; color: #d38d78;}
#kv .ctn .btn a:hover:after { border-color: #d38d78;}
#kv .ctn .btn a:hover svg { fill: #d38d78;}

#kv .note { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2;}
#kv .note ul { width: 92%; max-width: 1080px; margin: 0 auto; padding-bottom: 50px;}
#kv .note ul li { color: #c1bfbf;}
#kv .bg { position: relative; width: 100%; z-index: 1; opacity: 0;}
#kv .bg img { width: 100%;}
#kv .bg img.sp { display: none;}
@media (max-width: 1281px) {
	#kv:after { content: none;}
	#kv .ctn .inner { padding-top: 6vw;}
	#kv .ctn .logo { margin-bottom: 4vw;}
	#kv .ctn .txt { margin-bottom: 4vw;}
	#kv .ctn .news { margin: 0 auto 30px;}
	#kv .ctn .news a { display: block; padding: 10px 12px;}
	#kv .bg { opacity: 1;}
}
@media (max-width: 801px) {
	#kv .ctn { top: auto; bottom: 0; width: 100%;}
	#kv .ctn .inner { width: 100%; margin: 0 auto; padding: 0 0 10vw;}
	#kv .ctn .logo { display: none;}
	#kv .ctn .txt { width: 76%; max-width: 500px; margin-bottom: 4vw;}
	#kv .ctn .txt p img.pc { display: none;}
	#kv .ctn .txt p img.sp { display: block;}
	#kv .ctn .news { margin-bottom: 6vw;}
	#kv .bg img.pc { display: none;}
	#kv .bg img.sp { display: block;}
}
@media (max-width: 641px) {
}
@media (max-width: 481px) {
	#kv .ctn .news a { padding: 8px; box-shadow: 3px 3px 0 #fff;}
	#kv .ctn .news a dl dt { width: 60px;}
	#kv .ctn .news a dl dd { font-size: 10px;}
	
	#kv .ctn .btn a { max-width: 260px; padding: 8px 0; font-size: 14px; text-indent: 20px;}
	#kv .ctn .btn a svg { transform: translate(-60px,-55%); width: 20px;}
}



#concept .inner-sct { width: 100%;/* max-width: 1280px;*/ margin: 0 auto; padding: 0px 0 50px;}
#concept .ctn { position: relative; width: 100%; max-width: 800px; margin: 0 auto 30px; padding: 40px 0; padding-left: 260px;}
#concept .ctn .txt { position: absolute; left: 0; top: 50%; transform: translateY(-55%);}
#concept .ctn .txt p { font-size: 22px; line-height: 1.85;}
#concept .ctn .txt p span { display: block;}
#concept .ctn .txt p sub { font-size: 12px; vertical-align: baseline;}
#concept .ctn .txt p br.sp { display: none;}
#concept .ctn .fig { position: relative; padding-bottom: 40px;}
#concept .ctn .fig:after { content: ''; display: block; width: 210px; height: 180px; background: url('../img/index/badge.png') no-repeat 50% 50% / 100% auto;
 position: absolute; left: -100px; bottom: 0; z-index: 2;
 transition: 0.9s cubic-bezier(0.39,0.57,0.56,1); transition-delay: 0.9s; opacity: 0;
}
#concept .ctn .fig ul { position: relative; width: 100%; z-index: 1;}
#concept .ctn .fig ul li { width: 100%; transition: 0.9s cubic-bezier(0.39,0.57,0.56,1); opacity: 0;}
#concept .ctn .fig ul li:nth-child(1) { position: absolute; left: 0; top: 0; width: 100%; z-index: 1;}
#concept .ctn .fig ul li:nth-child(2) { position: relative; transition-delay: 0.3s; width: 100%; z-index: 2;}
#concept .ctn .fig ul li:nth-child(3) { position: absolute; transition-delay: 0.6s; left: 0; bottom: 0; width: 100%; z-index: 3;}
#concept .ctn .fig ul li img { width: 100%;}
#concept .ctn .fig ul li img.sp { display: none;}

#concept .ctn .fig figure {}
#concept .ctn .fig figure img { width: 100%;}
#concept .ctn .fig figure img.sp { display: none;}
#concept .note ul { width: 82%; max-width: 800px; margin: 0 auto;}
#concept .ctn.show .fig ul li { opacity: 1;}
#concept .ctn.show .fig:after { opacity: 1;}
@media (max-width: 801px) {
	#concept .inner-sct { padding: 0px 0 40px;}
	#concept .ctn .txt { padding-left: 40px;}
	#concept .ctn .txt p { font-size: 18px;}
	#concept .ctn .txt p sub { font-size: 10px;}
	#concept .ctn .fig:after { bottom: -40px;}
}
@media (max-width: 641px) {
	#concept .ctn { margin: 0 auto; padding: 40px 0;}
	#concept .ctn .txt { position: relative; left: auto; top: auto; transform: translateY(0%); margin-bottom: 40px;}
	#concept .ctn .txt p span { display: inline;}
	#concept .ctn .txt p br.sp { display: block;}
	#concept .ctn .fig { padding-bottom: 0px;}
	#concept .ctn .fig ul li img.pc { display: none;}
	#concept .ctn .fig ul li img.sp { display: block; width: 92%; margin: 0 auto;}
	#concept .ctn .fig:after { content: none;}
}
@media (max-width: 481px) {
	#concept .inner-sct { padding: 0px 0 30px;}
	#concept .ctn { margin: 0 auto; padding: 30px 0;}
	#concept .ctn .txt { margin-bottom: 30px; padding-left: 30px;}
	#concept .ctn .txt p { font-size: 13px;}
}


#howto .inner-sct { width: 100%;/* max-width: 1280px;*/ margin: 0 auto; padding: 50px 0 150px;}
#howto .ctn { width: 100%; max-width: 820px; margin: 0 auto 120px; padding-top: 80px;}
#howto .ctn .tips { position: relative; width: 100%; margin-bottom: 50px;}
#howto .ctn .tips:after { content: ''; display: block; width: 100%; height: 1px; background: #716050; position: absolute; left: 0; top: 50%;}
#howto .ctn .tips h3 { position: relative; color: #716050; font-size: 30px; line-height: 1; z-index: 2;}
#howto .ctn .tips h3 span { display: inline-block; padding: 0 30px; background: #fff;}

#howto .step-slide { position: relative; width: 100%; max-width: 800px; margin: 0 auto 50px;}
#howto .step-slide .slide { padding-bottom: 20px;}
#howto .step-slide .slide dl { position: relative; display: block; width: 100%; max-width: 350px; margin: 0 auto; padding: 20px 10px;}
#howto .step-slide .slide dl dt { position: relative; margin-bottom: 18px;}
#howto .step-slide .slide dl dt span.no { display: block; width: 52px; height: 52px;
 background: #d38d78; border-radius: 50%; border: solid 5px #fff; position: absolute; left: -15px; top: -20px;
 color: #fff; font-size: 23px; font-weight: 700; line-height: 40px; text-align: center;
}
#howto .step-slide .slide dl dt figure img { width: 100%; height: auto; border-radius: 10px;}
#howto .step-slide .slide dl dd { color: #716050; font-size: 18px; font-weight: 700;}
#howto .step-slide .slide dl dd span { display: block;}
#howto .step-slide .slide dl dd sub { font-size: 10px;}
#howto .step-slide .slide dl dd br.sp { display: none;}

#howto .slick-arrow{ width: 40px; height: 40px; bottom: -12px; left: 50%; background: none;
 transform: translateX(-50%); z-index: 10;}
#howto .slick-prev { margin-left: -72px;}
#howto .slick-next { margin-left: 72px;}
#howto .slick-arrow:before{ position: absolute; content: ''; display: block; width: 15px; height: 15px; top: 50%; transform: translateY(-50%) rotate(45deg);}
#howto .slick-prev:before { left: 40%; border-bottom: solid 2px #d38d78; border-left: solid 2px #d38d78;}
#howto .slick-next:before { right: 40%; border-top: solid 2px #d38d78; border-right: solid 2px #d38d78;}

#howto .slick-prev.slick-disabled:before ,
#howto .slick-next.slick-disabled:before { border-color: #e9c6bb;}
/*
@keyframes circle {
	0% { stroke-dasharray: 0 366; }
	99.9%,to { stroke-dasharray: 366 366;}
}
#howto .slide-aside { position: relative; width: 100%; max-width: 160px; margin: 0 auto 50px;}
#howto .slide-aside ul { font-size: 0; text-align: center;}
#howto .slide-aside ul li { position: relative; display: inline-block; width: 35px; margin: 0 8px; cursor: pointer;}
#howto .slide-aside ul li:last-child { display: none;}
#howto .slide-aside ul li span { position: relative; z-index: 2; display: block; color: #e9c6bb; font-size: 13px; font-weight: 700;}
#howto .slide-aside ul li.current span { color: #d38d78;}
#howto .slide-aside ul li:after{ content: ''; display: block; width: 20px; height: 20px;
 border: solid 2px #e9c6bb; border-radius: 50%;
 position: relative; margin: 0 auto;
}
#howto .slide-aside ul li svg { position: absolute; left: 50%; top: 50%; width: 19px; height: 19px; transform: translate(-50%,-50%) rotate(-90deg); z-index: 2;}
#howto .slide-aside ul li svg circle { fill: transparent;}
#howto .slide-aside ul li.current svg circle { stroke: #d38d78; stroke-width: 8; animation: circle 4.8s forwards;}
*/
#howto .ctn .note ul { width: 88%; max-width: 720px; margin: 0 auto;}
#howto .btn { width: 80%; max-width: 480px; margin: 0 auto;}
@media (max-width: 801px) {
	#howto .inner-sct { padding: 40px 0 100px;}
	#howto .ctn { margin-bottom: 100px; padding-top: 60px;}
	#howto .step-slide .slide dl dd { font-size: 16px;}
}
@media (max-width: 641px) {
	#howto .step-slide .slide { transform: translateX(-8%);}
	#howto .step-slide .slide dl { margin: 0; width: 92%; max-width: 92%;}

	#howto .slide-aside { max-width: 220px;}
	#howto .slide-aside ul li:last-child { display: inline-block;}
}
@media (max-width: 481px) {
	#howto .inner-sct { padding: 30px 0 80px;}
	#howto .ctn { margin-bottom: 80px; padding-top: 30px;}
	#howto .ctn .tips { margin-bottom: 12px;}
	#howto .ctn .tips h3 { font-size: 18px;}
	#howto .ctn .tips h3 span { padding: 0 16px 0 30px; background: #fff;}

	#howto .step-slide { margin: 0 auto 30px;}
	#howto .step-slide .slide dl dt { margin-bottom: 12px;}
	#howto .step-slide .slide dl dt span.no { width: 40px; height: 40px; border-width: 2px; left: -10px; top: -12px; font-size: 18px; line-height: 34px;}

	#howto .step-slide .slide dl dd { font-size: 13px;}
	#howto .ctn .note ul {}
}



#message .inner-sct { width: 100%;/* max-width: 1280px;*/ margin: 0 auto; padding: 50px 0;}
#message .ctn { width: 90%; max-width: 800px; margin: 0 auto; padding: 80px 0px;}
#message .ctn h2 { margin-bottom: 50px; font-size: 42px; font-weight: 700; line-height: 1;}
#message .ctn p { font-size: 22px; font-weight: 600; line-height: 1.8;}
#message .ctn p span { display: block;}
#message .ctn p br.sp { display: none;}
#message figure { text-align: center;}
#message figure img { width: 100%; max-width: 1280px;}
#message .txt { width: 90%; max-width: 800px; margin: 0 auto; padding: 80px 0;}
#message .txt p { font-size: 22px; font-weight: 600; line-height: 1.8;}
#message .txt p span { display: block;}
#message .txt p i { display: inline-block; position: relative; width: 52px; height: 1px; margin-left: 8px; vertical-align: middle; background: #716050;
 transform: translateY(-4px);
}
#message .btn-more { padding-top: 60px;}
#message .btn-more .open-read { position: relative; width: 60%; max-width: 380px; margin: 0 auto; background: #fbede4; border-radius: 50px;
 cursor: pointer;
}
#message .btn-more .open-read:before,
#message .btn-more .open-read:after { content: ''; display: block; width: 20px; height: 2px; background: #604e3e;
 position: absolute; left: 50%; top: 50%;
}
#message .btn-more .open-read:before{ transform: translate(-100px,-50%);}
#message .btn-more .open-read:after { transform: translate(-100px,-50%) rotate(90deg);}
#message .btn-more .open-read span { position: relative; display: block; width: 100%; padding: 18px 0;
 color: #6d5e4f; font-size: 18px; font-weight: 700; letter-spacing: 0.15rem; text-align: center; text-indent: 40px;
}
#message .btn-more .open-read:hover { opacity: 0.8;}
#message .btn-more .open-read span.close { display: none;}
#message .btn-more .open-read.open:before{ transform: translate(-65px,-50%) rotate(45deg);}
#message .btn-more .open-read.open:after { transform: translate(-65px,-50%) rotate(135deg);}
#message .btn-more .open-read.open span.more { display: none;}
#message .btn-more .open-read.open span.close { display: block;}
#message .hide-ctn { display: none;}
@media (max-width: 801px) {
	#message .inner-sct { padding: 40px 0px;}
	#message .ctn { padding: 60px; 0}
	#message .ctn h2 { margin-bottom: 30px;}
	#message .ctn p { font-size: 18px;}
	#message .txt { padding: 50px 0;}
	#message .txt p { font-size: 18px;}
	#message .txt p i { transform: translateY(-2px);}
	#message .btn-more { padding-top: 50px;}
}
@media (max-width: 481px) {
	#message .inner-sct { padding: 20px 0px;}
	#message .ctn { padding: 30px 0;}
	#message .ctn h2 { font-size: 28px;}
	#message .ctn p { font-size: 12px;}
	#message .ctn p br.sp { display: block;}
	#message .txt { padding: 30px 0;}
	#message .txt p { font-size: 12px;}
	#message .txt p i { transform: translateY(-1px);}
	#message .btn-more { padding-top: 40px;}
	#message .btn-more .open-read:before,
	#message .btn-more .open-read:after { width: 12px;}
	#message .btn-more .open-read:before{ transform: translate(-72px,-50%);}
	#message .btn-more .open-read:after { transform: translate(-72px,-50%) rotate(90deg);}
	#message .btn-more .open-read span { padding: 10px 0; font-size: 14px;}
	#message .btn-more .open-read.open:before{ transform: translate(-50px,-50%) rotate(45deg);}
	#message .btn-more .open-read.open:after { transform: translate(-50px,-50%) rotate(135deg);}
}



#product .inner-sct { width: 100%;/* max-width: 1280px;*/ margin: 0 auto; padding: 60px 0 180px;}
#product .ctn { padding-top: 72px;}
#product .ctn figure { width: 80%; max-width: 720px; margin: 0 auto 32px; transition: 0.8s cubic-bezier(0.39,0.57,0.56,1); opacity: 0;}
#product .ctn figure img { width: 100%; border-radius: 10px; transition: 0.3s linear;}
#product .ctn figure a:hover img { opacity: 0.8;}
#product .ctn .link { position: relative; width: 80%; max-width: 440px; margin: 0 auto;}
#product .ctn .link a { position: relative; display: block; width: 100%; color: #d38d78; font-weight: 700; line-height: 1;}
#product .ctn .link a:before,
#product .ctn .link a:after { content: ''; display: block; position: absolute;}
#product .ctn .link a:before{ right: 0; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border: solid 2px #716050; border-radius: 50%; transition: 0.3s ease;}
#product .ctn .link a:after { right: 18px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 12px; height: 12px;
 border-top: solid 3px #716050; border-right: solid 3px #716050; transition: 0.3s ease;
}
#product .ctn .link a span { display: inline-block; vertical-align: middle;}
#product .ctn .link a span.eng { margin-right: 20px; font-family: "Arial"; font-size: 36px;}
#product .ctn .link a span.min { font-size: 21px;}
#product .ctn .link a:hover:before,
#product .ctn .link a:hover:after { border-color: #d38d78;}
#product .ctn.show figure { opacity: 1;}
@media (max-width: 481px) {
	#product .inner-sct { padding: 30px 0;}
	#product .ctn { padding-top: 30px;}
	#product .ctn figure { margin-bottom: 12px;}
	#product .ctn figure img { border-radius: 6px;}
	#product .ctn .link a span { display: block;}
	#product .ctn .link a span.eng { margin-right: 0px; margin-bottom: 8px; font-size: 24px; letter-spacing: 0.05rem;}
	#product .ctn .link a span.min { font-size: 14px;}
}


#faq .inner-sct { padding: 180px 0 130px; background: url('../img/index/bg-faq.jpg') no-repeat 50% 50% / cover;}
#faq h2 { margin-bottom: 40px; color: #fff; font-size: 65px; letter-spacing: 0.3rem; line-height: 1; text-align: center;}
#faq h2 em { font-size: 74px;}
#faq .btn { width: 80%; max-width: 480px; margin: 0 auto;}
#faq .btn a { background: #fff; color: #b2856a;}
#faq .btn a:after{ border-color: #b2856a;}
@media (max-width: 481px) {
	#faq .inner-sct { padding: 50px 0 60px;}
	#faq h2 { margin-bottom: 20px; font-size: 40px;}
	#faq h2 em { font-size: 56px;}
}