@charset "UTF-8";

/* ==============================================================
*  TOPICSページ
* ============================================================ */

/* ========  TOPICS 共通 ========= */
.l-topics .l-main{padding:0;}
.l-topics .l-header{top:0;opacity:1;}
.l-topics .bgmv .cover{position:absolute;width:100%;height:100%;background:rgba(255,255,255,.4);}

.p-topicsTop{background:#fff;}
.p-topicsTop{position:relative;top:0;width:100%;/*min-height:100vh;*/padding-top:140px;padding-bottom:140px;opacity:1;z-index:1;}
.p-topicsTop_wrap{width:90%;max-width:1192px;display:flex;justify-content:space-between;align-items:start;margin:0 auto;}
.p-topicsTop_wrap > div{}
.p-topicsTop .topics_L h2{position:relative;padding-bottom:18px;}
.p-topicsTop .topics_L h2:after{content: "";width:16px;height: 1px;background: #9A938F;position: absolute;left: 0;bottom: 0;}
.p-topicsTop h2.p-topHeadingH2 img{height:14px;}
.p-topicsTop .topics_L h3{margin:30px auto;font-size:32px;}
.p-topicsTop_wrap .topics_L{position:relative;width:26%;}
.p-topicsTop_wrap .topics_R{position:relative;width:74%;max-width:880px;padding-top:70px;}
.cat{color:#9A938F;border:1px solid #9A938F;font-size:12px;padding:2px 8px;display:inline-block;margin-right:10px;text-align:center;border-radius:1px;}
.date{font-size:14px;color:#9A938F;}
.p-topicsTop_wrap .topics_R .topic{font-family:serif;letter-spacing:0.05em;}
.p-topicsTop_wrap .topics_R h1{font-size:28px;margin-top:20px;color:#30353A;}
.p-topicsTop_wrap .topics_R h2{font-size:20px;margin-top:10px;}
.p-topicsTop_wrap .topics_R img{width:100%;height:auto;}
.p-topicsTop_wrap p{margin:2em 0;font-size:16px;color:#4C5256;letter-spacing:0.1em;text-align:justify;line-height:2em;}
.p-topicsTop_wrap p.annote{color:#4C5256;color:rgba(76,82,86,.5);font-size:10px;letter-spacing:0.025em;}
.topic .links p{text-align:left;}

.topic h1{}
.topic h2{letter-spacing:0.1em;}
.topic h3,
.topic h4{font-weight:bold;font-size:24px;}
.topic h5{font-weight:bold;font-size:22px;margin-top:2em;}
.topic h6{font-weight:bold;font-size:18px;}
.topic h5 + h6{margin-top:1em;}
.topic h5 + p,
.topic h6 + p{margin-top:1em;}
.topic sup{font-size:60%;}
.topic .tflex{display:flex;}
.topic .w75p{width:75%;}
.topic .w70p{width:70%;}
.topic .w64p{width:64%;}
.topic .w49p{width:49%;}
.topic .w45p{width:45%;}
.topic .w35p{width:35%;}
.topic .w32p{width:32%;}
.topic .w25p{width:25%;}
.topic .w20p{width:20%;}


.p-topicsNav{margin:60px auto 0;}
nav.topicsNavWrapper{width:100%;border-top:1px solid #D6D0CB;border-bottom:1px solid #D6D0CB;display:flex;justify-content:space-around;position:relative;}
.topicsNavWrapper a{width:300px;padding:40px 0;text-align:center;position:relative;}
.topicsNavWrapper a.yet{opacity:.25;}
.topicsNavWrapper a img{height:14px;vertical-align:middle;}
.topicsNavWrapper a.topic_prev:after{content:"";width:18px;height:8px;display:block;position:absolute;top:50%;left:25%;transform:translate(-50%,-50%) rotateZ(180deg);background:url(../img/btn_arrow_r.svg) no-repeat;background-position:center;background-size:contain;}
.topicsNavWrapper a.topic_next:after{content:"";width:18px;height:8px;display:block;position:absolute;top:50%;left:65%;transform:translate(-50%,-50%);background:url(../img/btn_arrow_r.svg) no-repeat;background-position:center;background-size:contain;}
nav.topicsNavWrapper:after{content:"";display:block;width:1px;height:38px;background:#D6D0CB;position:absolute;top:50%;left:50%;transform:translate(-175px,-50%);}
nav.topicsNavWrapper:before{content:"";display:block;width:1px;height:38px;background:#D6D0CB;position:absolute;top:50%;left:50%;transform:translate(175px,-50%);}



@media screen and (max-width: 1440px) {
  
}
@media screen and (max-width: 1200px) {
  .p-topicsTop h3 img{width:75%;height:auto;}
}
@media screen and (max-width: 850px) {
  .p-topicsTop{padding-top:80px;}
  .p-topicsTop_wrap{flex-wrap:wrap;}
  .p-topicsTop_wrap > div{width:100%;margin:0 auto;}
  .p-topicsTop_wrap .topics_L{margin-top:50px;width:100%;}
  .p-topicsTop_wrap .topics_R{width:100%;}
  .p-topicsTop h2.p-topHeadingH2 img{height:14px;}
  .p-topicsTop h3{}
  .p-topicsTop h3 img{width:35%;height:auto;max-width:180px;}
  .topic a{word-break:break-all;}
  
  .topicsNavWrapper{flex-wrap:wrap;}
  nav.topicsNavWrapper:after{display:none;}
  nav.topicsNavWrapper:before{left:50%;top:110px;transform:translate(-50%,-50%);}
  .topicsNavWrapper a{padding:25px 0;}
  .topicsNavWrapper a.topic_home{width:100%;order:1;border-bottom:1px solid #E3E5EE;}
  .topicsNavWrapper a.topic_next{width:50%;order:3;}
  .topicsNavWrapper a.topic_prev{width:50%;order:2;}
  
  .topicsNavWrapper a.topic_next:after{left:72%;}
  .topicsNavWrapper a.topic_prev:after{left:18%;}
}
@media screen and (max-width: 480px) {
  .p-topicsTop_wrap .topics_R h1{font-size:20px;}
  .p-topicsTop_wrap .topics_R h2{font-size:18px;}
}


/* ==============================================================
*  TOPICS 個別ページ
* ============================================================ */


.topic img{border-radius:6px;}
.topic figure.brad50{border-radius: 50%;border: 1px solid #ccc;overflow: hidden;}
.topic p.cap{font-size:14px;text-align:center;margin:0.25em auto;}
.topic span.smll{font-size:80%;}
.topic p.cap .smll{display:block;}


.topic .products{margin:2.5em auto;/*border-bottom:1px solid rgba(76,82,86,.25);*/padding-bottom:2.5em;}

.topic a{position:relative;display:inline-block;height:32px;line-height:32px;text-align:left;font-size:16px;color:#2CB7B3;}
.topic a.outer:after{content:"";width:9px;height:9px;display:block;position:absolute;top:40%;right:-13px;transform:translateY(-50%);background:url(../img/topics/target_blank.svg) no-repeat;background-size:contain;}


.topic#t26_1 h3{border-bottom:1px solid #D6D0CB;margin-bottom:1em;}
.topic#t26_1 h4 + p{margin-top:0.5em;margin-bottom:1em;}
.topic#t26_1 .shampoo .tflex{justify-content:space-between;align-items:center;}
.topic#t26_1 h6 + h6{margin-top:1em;}
.topic#t26_1 h6.exg{font-size:130%;}
.topic#t26_1 .treatment{justify-content:space-between;flex-wrap:wrap;}
.topic#t26_1 .treatment .tflexL.w70p,
.topic#t26_1 .treatment .tflexR.w25p{width:100%;}
.topic#t26_1 .treatment .tflexR{margin-top:1em;}
.topic#t26_1 .treatment h4{text-align:left;line-height:1.5em;margin:1em auto;font-size:18px;}
.topic#t26_1 p.rate{margin-top:0em;}
.topic#t26_1 .product{align-items:center;margin-bottom:1em;}
.topic#t26_1 .product .tflexL{text-align:center;}
.topic#t26_1 .product .tflexL img{width:60%;height:auto;margin:0 auto;}
.topic#t26_1 .lineups hr{margin:0 auto 2em;}
.topic#t26_1 .lineups h4{color:#4C5256;text-align:left;display:inline-block;padding:5px 10px;}
.topic#t26_1 .tflex.lineup{align-items:center;justify-content:space-between;}
.topic#t26_1 .tflex.lineup .tflexL{margin:0 auto;}

@media screen and (max-width: 480px) {
  .topic h3,
  .topic h4{font-size:20px;}
  .topic .t_product h4{font-size:18px;}
  .topic h5{font-size:18px;}
  .topic h6{font-size:16px;}
  .p-topicsTop_wrap p{line-height:1.75em;font-size:14px;}
  .topic a{font-size:14px;line-height:1.5em;}
  .topic a.outer:after{display:inline-block;position:relative;top:0%;right:-5px;}
  .topic .tflex{flex-wrap:wrap;}
  .topic .w75p{width:100%;}
  .topic .w70p{width:100%;}
  .topic .w64p{width:100%;}
  .topic .w45p{width:100%;}
  .topic .w32p{width:50%;}
  .topic .w25p{width:50%;}
  
  .topic#t26_1 .product .tflexL{margin:0 auto;}

}