@charset "utf-8";

#howto .inner-sct { padding: 20px 0 150px;}
#howto .tab { width: 72%; max-width: 520px; margin: 0 auto 100px;}
#howto .tab ul { font-size: 0px; text-align: center;}
#howto .tab ul li { display: inline-block; width: 50%; color: #e9c6bb; font-size: 30px; line-height: 1;}
#howto .tab ul li.on { color: #d38d78;}
#howto .tab ul li span { display: inline-block; padding: 12px 0; cursor: pointer;}
#howto .tab ul li.on span { border-bottom: solid 1px #d38d78;}

#howto .ctn { position: relative; width: 100%;}
#howto .tab-ctn { visibility: hidden; position: absolute; width: 100%; left: 0; top: 0;}
#howto .tab-ctn.show { visibility: visible; position: relative; left: auto; top: auto;}

#howto .movie-ctn { width: 86%; max-width: 640px; margin: 0 auto 100px;}
#howto .movie-ctn .movie { position: relative; width: 100%; padding-top: 56.25%; background: #eee;}
#howto .movie-ctn .movie iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

#howto .step-slide { position: relative; width: 100%; max-width: 780px; margin: 0 auto 60px;}
#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: 40px; 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: 12px; height: 12px; background: #c1c1c1; border-radius: 50%;
 position: relative; margin: 0 auto;
}
#howto .slide-aside ul li.current:after { background: #d38d78;}
#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 .effect { margin-bottom: 50px; padding-top: 20px;}
#howto .effect figure { text-align: center;}
#howto .effect figure img { width: 88%; max-width: 720px; height: auto;}
#howto .effect figure img.sp { display: none;}
#howto .effect p { font-size: 21px; font-weight: 700; text-align: center;}
#howto .effect p sub { font-size: 10px; vertical-align: baseline;}
#howto .effect p br { display: none;}

#howto .note ul { width: 86%; max-width: 720px; margin: 0 auto;}
#howto .note ul li { font-size: 10px; line-height: 1.4;}
@media (max-width: 801px) {
	#howto .tab { margin: 0 auto 60px;}
	#howto .tab ul li { font-size: 24px;}
	#howto .movie-ctn { margin: 0 auto 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 .slick-prev { margin-left: -100px;}
	#howto .slick-next { margin-left: 100px;}
	#howto .slide-aside { max-width: 220px;}
	#howto .slide-aside ul li:last-child { display: inline-block;}
	
	#howto .effect figure img.pc { display: none;}
	#howto .effect figure img.sp { display: block; margin: 0 auto;}
	#howto .effect p { font-size: 18px;}
	#howto .effect p br { display: block;}
}
@media (max-width: 481px) {
	#howto .inner-sct { padding: 12px 0 80px;}
	#howto .tab { margin: 0 auto 40px;}
	#howto .tab ul li { font-size: 16px;}
	#howto .tab ul li span { padding: 6px 0;}

	#howto .movie-ctn { margin: 0 auto 40px;}
	#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: 12px;}
	#howto .step-slide .slide dl dd span { display: inline;}
	#howto .step-slide .slide dl dd br.sp { display: block;}

	#howto .slick-prev { margin-left: -80px;}
	#howto .slick-next { margin-left: 80px;}
	#howto .slide-aside ul li { width: 32px;}

	#howto .effect p { font-size: 16px;}
}