@charset "utf-8";

#hd .menu ul.nav li.index { display: none;}


#topic-hd .inner { padding: 80px 0 100px;}
#topic-hd h1 { margin-bottom: 20px; text-align: center;}
#topic-hd h1 img { width: 18%; max-width: 150px; filter: drop-shadow(0 0 8px #36ACED);}
#topic-hd h2 { text-align: center;}
#topic-hd h2:after { content: ''; display: block; width: 34%; max-width: 240px; height: 3px; margin: 0 auto;
 background: #fff; box-shadow: 0 0 8px #36ACED, 0 0 8px #36ACED;
}
#topic-hd h2 img { width: 55%; max-width: 400px;}
@media (max-width: 481px) {
	#topic-hd .inner { padding: 40px 0 50px;}
	#topic-hd h1 { margin-bottom: 12px;}
	#topic-hd h2:after { height: 2px;}
}



#article {}
#article .inner-sct { width: 100%; max-width: 800px; margin: 0 auto;}
#article .article-hd { padding: 40px 0px;}
#article .article-hd h2 { margin-bottom: 30px; color: #36ACED; font-size: 32px; font-weight: 700;}
#article .article-hd h2 span.ruby { position: relative;}
#article .article-hd h2 span.ruby em { position: absolute; right: 0; bottom: -18px; font-size: 14px;}
#article .article-hd p.update { color: #6799B4; font-size: 24px;}
#article .main { }
#article .main figure img { width: 100%;}
#article .article-ctn { padding: 40px 0 200px;}
#article .article-ctn .tit { margin-bottom: 80px; padding: 20px 0;
 border-top: solid 1px #36ACED; border-bottom: solid 1px #36ACED;}
#article .article-ctn .tit h3 { color: #36ACED; font-size: 30px; font-weight: 700; line-height: 1.4; text-align: center;}
#article .article-ctn .read { margin-bottom: 120px;}
#article .article-ctn .read.mb { margin-bottom: 200px;}
#article .article-ctn p { line-height: 1.85;}
#article .article-ctn p span.ruby { position: relative;}
#article .article-ctn p span.ruby em { position: absolute; right: 0; bottom: -12px; font-size: 10px;}
#article .article-ctn p.mb20 { margin-bottom: 20px;}
#article .article-ctn p.mb40 { margin-bottom: 40px;}
#article .article-ctn p.mb60 { margin-bottom: 60px;}
#article .article-ctn .note { padding-top: 20px;}
#article .article-ctn .note ul li { font-size: 12px;}
#article .article-ctn .note ul li span { text-decoration: underline;}

#article .article-ctn .bloc { padding: 40px 0;}
#article .article-ctn .line { padding: 80px 0;}
#article .article-ctn .line:before { content: ''; display: block; width: 100%; height: 1px; margin: 0 auto; background: #fff;}

#article .article-ctn .series { margin-bottom: 20px;}
#article .article-ctn .series h4 { margin-bottom: 30px; font-size: 32px; font-weight: 700; letter-spacing: 0.05rem; line-height: 1.2; text-align: center;}
#article .article-ctn .series p { text-align: center;}
#article .article-ctn .series p.aroma { margin-bottom: 20px;}
#article .article-ctn .series p.aroma span { display: inline-block; padding: 0px 12px; border-radius: 6px; color: #fff;}
#article .article-ctn .series p.copy { font-size: 24px; font-weight: 700; line-height: 1.6;}

#article .article-ctn .series.moist h4 { color: #3AA6E1;}
#article .article-ctn .series.moist p.aroma span { background: #3AA6E1;}
#article .article-ctn .series.moist p.copy { color: #3AA6E1;}
#article .article-ctn .series.repair h4 { color: #C7B12C;}
#article .article-ctn .series.repair p.aroma span { background: #C7B12C;}
#article .article-ctn .series.repair p.copy { color: #C7B12C;}
#article .article-ctn .series.hairpack h4 { color: #7570CF;}
#article .article-ctn .series.hairpack p.aroma span { background: #7570CF;}
#article .article-ctn .series.hairpack p.copy { color: #7570CF;}
#article .article-ctn .series.hairspray h4 { color: #A864CD;}
#article .article-ctn .series.hairspray p.aroma span { background: #A864CD;}
#article .article-ctn .series.hairspray p.copy { color: #A864CD;}



#article .article-ctn .img { position: relative; margin-bottom: 40px; padding-top: 30px;}
#article .article-ctn .img .badge { width: 80px; position: absolute; right: 0; top: 0;}
#article .article-ctn .img .badge img{ width: 100%;}
#article .article-ctn .img figure { text-align: center;}
#article .article-ctn .img figure img { width: 80%;}
#article .article-ctn .img figure img.w540 { max-width: 540px;}
#article .article-ctn .img figure img.w140 { max-width: 140px;}

#article .article-ctn .detail dl dt,
#article .article-ctn .detail dl dd { font-size: 14px;}
#article .article-ctn .detail dl dt { margin-bottom: 5px; font-weight: 700;}
#article .article-ctn .detail dl dt.moist { color: #3AA6E1;}
#article .article-ctn .detail dl dt.repair{ color: #C7B12C;}
#article .article-ctn .detail dl dd { line-height: 1.8;}


.btn-back { width: 85%; max-width: 660px; margin: 0 auto; padding: 100px 0;}
.btn-back a { display: block; width: 100%; border-radius: 30px; overflow: hidden;
	 box-shadow: 0 0 8px #46ACE4;border: solid 1px #fff;
}
.btn-back a img { width: 100%;}
.btn-back a:hover { opacity: 0.8;}


@media (max-width: 1281px) {
}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#article .article-hd { width: 90%; margin: 0 auto;}
	#article .article-hd h2 { margin-bottom: 20px; font-size: 3.5vw;}
	#article .article-hd p.update { font-size: 3.0vw;}
	#article .article-ctn { width: 90%; margin: 0 auto;}
	#article .article-ctn p { font-size: 14px;}
	#article .article-ctn .series h4 { margin-bottom: 12px; font-size: 3.5vw;}
	#article .article-ctn .series p.aroma { margin-bottom: 10px;}
	#article .article-ctn .series p.copy { font-size: 20px;}
	#article .article-ctn .series p.copy span.br { display: block;}
	#article .article-ctn .detail dl dt,
	#article .article-ctn .detail dl dd { font-size: 12px;}
}
@media (max-width: 481px) {
	#article .article-hd { padding: 20px 0px;}
	#article .article-hd h2 { margin-bottom: 12px; font-size: 15px;}
	#article .article-hd h2 span.ruby em { bottom: -12px; font-size: 10px;}
	#article .article-hd p.update { font-size: 13px;}

	#article .article-ctn { padding: 20px 0 80px;}
	#article .article-ctn .read { margin-bottom: 60px;}
	#article .article-ctn .read.mb { margin-bottom: 100px;}
	#article .article-ctn .tit { margin-bottom: 30px; padding: 12px 0;}
	#article .article-ctn .tit h3 { font-size: 24px;}

	#article .article-ctn p { font-size: 13px;}
	#article .article-ctn p.mb20 { margin-bottom: 10px;}
	#article .article-ctn p.mb40 { margin-bottom: 20px;}
	#article .article-ctn p.mb60 { margin-bottom: 30px;}

	#article .article-ctn .series { margin-bottom: 10px;}
	#article .article-ctn .series h4 { margin-bottom: 8px; font-size: 24px;}
	#article .article-ctn .series p.aroma { font-size: 12px;}
	#article .article-ctn .series p.copy { font-size: 18px;}
	#article .article-ctn .note ul li { font-size: 10px;}

	#article .article-ctn .bloc { padding: 20px 0;}
	#article .article-ctn .line { padding: 30px 0;}
	#article .article-ctn .line:before { width: 80%;}

	#article .article-ctn .img { margin-bottom: 20px; padding-top: 20px;}
	#article .article-ctn .img .badge { width: 50px; right: 5%;}
	#article .article-ctn .img figure img.w140 { max-width: 80px;}

	#article .article-ctn .detail { width: 90%; margin: 0 auto;}
	#article .article-ctn .detail dl dd { padding: 6px 0;}
	#article .article-ctn .detail dl dd span { display: block;}

	#article .article-ctn .bloc .note { width: 90%; margin: 0 auto;}

	.btn-back { padding: 50px 0;}
	.btn-back a { border-radius: 18px;}
}