@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 h2.p-topHeadingH2 img{height:18px;}
.p-topicsTop h3{margin:30px auto;}
.p-topicsTop h3 img{height:30px;}
.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{background:#667085;color:#fff;font-size:12px;padding:4px 8px;display:inline-block;margin-right:10px;text-align:center;}
.date{font-size:14px;color:#4C5256;}
.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;}
.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 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 #E3E5EE;border-bottom:1px solid #E3E5EE;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:9px;height:9px;display:block;position:absolute;top:50%;left:25%;transform:translate(-50%,-50%);background:url(../img/topics/btn_arrow_l.svg) no-repeat;background-position:center;background-size:contain;}
.topicsNavWrapper a.topic_next:after{content:"";width:9px;height:9px;display:block;position:absolute;top:50%;left:65%;transform:translate(-50%,-50%) rotateZ(180deg);background:url(../img/topics/btn_arrow_l.svg) no-repeat;background-position:center;background-size:contain;}
nav.topicsNavWrapper:after{content:"";display:block;width:1px;height:38px;background:#E3E5EE;position:absolute;top:50%;left:50%;transform:translate(-175px,-50%);}
nav.topicsNavWrapper:before{content:"";display:block;width:1px;height:38px;background:#E3E5EE;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 .t_product_imgs{display:flex;align-items:center;}
.topic .t_product_imgs figure.w64p{max-width:60%;margin:0 auto;}

#t_product_shiratama ul.ppoint li{border:2px solid #eac02a;font-size:16px;}
#t_product_suikou ul.ppoint li{border:2px solid #41b8f9;}
#t_product_lh-a ul.ppoint li{border:2px solid #7ecd2f;}
#t_product_p-drn ul.ppoint li{border:2px solid #f0949f;}
#t_product_azelamide ul.ppoint li{border:2px solid #9b89c6;}
.topic ul.ppoint{display:flex;}
.topic ul.ppoint li{border-radius:10px;padding:5px 10px;margin-right:10px;}

.topic .t_product{margin:2.5em auto;border-bottom:1px solid rgba(76,82,86,.25);padding-bottom:2.5em;}
.topic .t_product h4{font-size:20px;border-radius:6px;}
.topic .t_product .recommend{padding:20px;border-radius:20px;display:inline-block;}
.topic .t_product#t_product_shiratama .recommend{background:rgba(234,192,42,.5);}
.topic .t_product#t_product_suikou .recommend{background:rgba(65,184,249,.5);}
.topic .t_product#t_product_lh-a .recommend{background:rgba(126,205,47,.5);}

.topic .step ul li{line-height:1.75em;margin:0.5em 0;font-size:16px;}
.topic .step ul li .annote{font-size:80%;}
.topic .t_product#t_product_shiratama .step ul li .tc{color:rgba(234,192,42,1);}
.topic .t_product#t_product_suikou .step ul li .tc{color:rgba(65,184,249,1);}
.topic .t_product#t_product_lh-a .step ul li .tc{color:rgba(126,205,47,1);}

.topic .detail{justify-content:space-between;}

.topic .example figure{display:inline-block;width:15em;margin-right:3em;}
.topic .example figure .cap{text-align:right;display:block;}

.topic .prep figure{max-width:320px;margin-right:2em;}
.topic .prep figure .cap{font-weight:bold;font-size:16px;display:block;margin-bottom:0.5em;}
.topic .prep figure .cap2{display:block;margin-top:1em;}

.topic a{position:relative;display:inline-block;height:32px;line-height:32px;text-align:left;font-size:16px;color:#2c8bb7;}
.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 h4,
.topic#t26_2 h4{text-align:center;color:#3C78D8;line-height:1.5em;margin:1em auto;}
.topic#t26_1 ul.medilia_point3{display:flex;margin:1em auto;justify-content:center;}
.topic#t26_1 ul.medilia_point3 li{margin-right:1%;padding:5px 10px;border-radius:10px;font-weight:bold;font-size:18px;}
.topic#t26_1 ul.medilia_point3 li:nth-child(1){border:2px solid #eac02a;}
.topic#t26_1 ul.medilia_point3 li:nth-child(2){border:2px solid #41b8f9;}
.topic#t26_1 ul.medilia_point3 li:nth-child(3){border:2px solid #7ecd2f;}
.topic#t26_1 .t_philosophy .tflex figure.brad50{width:80%;margin:0 auto;}

.topic#t26_1 .lineups > h5,
.topic#t26_2 .lineups > h5{text-align:center;}
.topic#t26_1 .lineups > h5 + p,
.topic#t26_2 .lineups > h5 + p{text-align:center;}
.topic#t26_1 .lineups h5 + p + p.annote,
.topic#t26_2 .lineups h5 + p + p.annote{margin-top:0;text-align:center;}
.topic#t26_1 .lineups hr,
.topic#t26_2 .lineups hr{margin:0 auto 2em;}
.topic#t26_1 .lineups h4,
.topic#t26_2 .lineups h4{color:#4C5256;text-align:left;display:inline-block;padding:5px 10px;}
.topic#t26_1 .lineups #t_product_shiratama h4,
.topic#t26_2 .lineups #t_product_shiratama h4{background:rgba(234,192,42,.5);}
.topic#t26_1 .lineups #t_product_suikou h4,
.topic#t26_2 .lineups #t_product_suikou h4{background:rgba(65,184,249,.5);}
.topic#t26_1 .lineups #t_product_lh-a h4,
.topic#t26_2 .lineups #t_product_lh-a h4{background:rgba(126,205,47,.5);}
.topic#t26_1 .lineups .recommend h6{font-size:16px;}
.topic#t26_1 .lineups .recommend ul li{font-size:16px;}

.topic#t26_2 h6 + h6{margin-top:1em;}
.topic#t26_2 figure.flL{float:left;width:50%;margin-right:2%;margin-top:1.5em;}
.topic#t26_2 figure.flL + p{margin-top:1.5em;}
.topic#t26_2 .tflex{justify-content:space-between;}
.topic#t26_2 .prep.tflex{justify-content:initial;}
.topic#t26_2 h5 + .tflex{margin:1.5em 0;}
.topic#t26_2 .t_product_imgs{justify-content:space-between;}
.p-topicsTop_wrap .topic#t26_2 .detail p{margin-top:0;margin-bottom:0;}


@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 .w70p{width:100%;}
  .topic .w64p{width:80%;}
  .topic .w45p{width:100%;}
  .topic .w32p{width:50%;}
  .topic .w25p{width:50%;}
  .topic#t26_1 ul.medilia_point3{flex-wrap:wrap;}
  .topic#t26_1 ul.medilia_point3 li{font-size:14px;width:100%;margin-bottom:2%;}
  .topic .t_product_imgs{flex-wrap:Wrap;}
  .topic .t_product_imgs figure.w32p{max-width:90%;margin:1em auto;}
  .topic .t_product_imgs figure.w64p{max-width:100%;}
  .topic .step ul li{font-size:14px;line-height:1.6em;}
  .topic .example figure{width:48%;margin-right:1%;}
  .topic .example figure .cap{font-size:11px;}
  .topic .prep figure{margin-top:2em;}
  
  .topic#t26_2 figure.flL{float:none;width:100%;margin-right:0%;margin-top:1.5em;}
  .topic#t26_2 .t_product_imgs .w45p{width:90%;margin:0 auto 1em;}
  .topic#t26_2 .t_product_imgs .w32p{width:60%;}
  .topic#t26_2 .t_product_imgs .w20p{width:30%;}
}