/* =============================================
   TOP MV / ファーストビュー
============================================= */
.mv{
  background-image:url('../img/m-bg.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  height:541px;
}/* 共通MV */
.mv .container{
  padding:0; /* MVのみ左右余白を解除。重要！style.cssの左右余白20px上書き*/
  position:relative;
  width:100%;
  height:100%;
  margin: 0 auto;
}
.mv-title,.mv-catch{
position: absolute;
left:11%;
text-shadow:
  1px 1px 0 #fff,
 -1px 1px 0 #fff,
  1px -1px 0 #fff,
 -1px -1px 0 #fff,
  1px 0 0 #fff,
 -1px 0 0 #fff,
  0 1px 0 #fff,
  0 -1px 0 #fff;
  z-index: 2;
}
.mv-subtitle{
position: absolute;
  top:10%;
  left:11%;
    display:inline-flex;
    align-items:center;
    gap:2px;
    background:#1f9d55;
    color:#fff;
    font-weight:700;
    font-size:.95rem;
    padding:7px 20px 7px 12px;
    border-radius:999px;
    box-shadow:0 6px 16px rgba(46,168,213,.22);
    z-index:3;
}
.mv-subtitle svg{
    width:20px;
    height:20px;
    fill:currentColor;
    flex:none;
filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
 opacity:.95;
}
.mv-title{
  top:18%;
  font-size:4.5rem;
  font-weight:900;
  color:#0a2d4a;
  line-height:1.2;
  margin-bottom:10px;
}


/* MV キャッチコピー */
.mv-catch{
  max-width: 640px;
  top:53%;
  font-size:1rem;
  margin:0;
  padding:0;
}

/* MV内 画像 */
.mv-person{
  position:absolute;
  inset:0;
  z-index:1;
}

.mv-person img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

@media (min-width: 901px) and (max-width: 1366px) {
/* 小型ノート・iPad Pro */
.mv{
height:470px;
}
.mv-title,
.mv-catch,
.mv-subtitle{
left:10%;
}
.mv-title{
top:20%;left:10%;
font-size:4rem;}
.mv-catch{
max-width: 640px;
top:55%;
}}
/* iPad */
@media (max-width:900px){

.mv{
height:360px;
}
.mv-subtitle{
    font-size:.75rem;
padding:6px 18px 6px 10px;
  }
.mv-title{
  top:20%;
  font-size:3rem;
  }
.mv-title,
.mv-catch,
.mv-subtitle{
  left:10%;
}
.mv-catch{
font-size: .78rem; letter-spacing: -.03rem;
top:55%;
}
}

/* スマホ */
@media(max-width:680px){
  .mv{
    height:auto;
    min-height:0;
  }
   .mv-person{
    position:relative;
    z-index:1;
  }
  .mv-person img{
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
  }
  .mv-subtitle{
    position:absolute;
    top:8%;
    left:6%;
    font-size:3vw;
  }
  .mv-title{
    position:absolute;
    top:16%;
    left:5%;
    width:auto;
    white-space:normal; /* ←重要 */
    font-size:14vw;
    line-height:1.15;
  }
  .mv-catch{
    position:absolute;
    font-size:4vw;
    top:40%;
    left:5%;
    width:60%;
  }
}


/* ==================================
   花粉症k薬ページ専用
================================== */

.toc{
  max-width:1000px;
  width:100%;
  margin:0 auto;
}


.simple-body h3{
font-size:1.3rem;
font-weight:700;
margin:35px 0 15px;
color:#1a2f3a;
  display:flex;
  align-items:center;
  justify-content:flex-start;/*kusuri*/
  gap:4px;
}
.simple-body p{
line-height:2;
margin-bottom:20px;
}

.simple-body ul{
list-style:disc;
padding-left:24px;
margin-bottom:25px;
}

.simple-body li{
margin-bottom:10px;
line-height:1.8;
}


.simple-body table{
table-layout:fixed;
width:100%;
border-collapse:collapse;
margin:30px 0;
font-size:.95rem;
}
.simple-body th,
.simple-body td{
word-break:break-word;
overflow-wrap:anywhere;
}
.simple-body th{
background:#2EA8D5;
color:#fff;
padding:12px;
}

.simple-body td{
padding:12px;
border:1px solid #d9eef7;
}

.notice{
background:#fff8e6;
border-left:5px solid #f5a623;
padding:18px;
margin:25px 0;
line-height:1.8;
}

.summary{
background:#f8fcff;
border:1px solid #d9eef7;
border-radius:12px;
padding:24px;
margin-top:50px;
margin-bottom: 50px;
}


@media(max-width:680px){

.simple-body table{
display:table;
width:100%;
table-layout:fixed;
overflow:visible;
white-space:normal;
font-size:.78rem;
}

.simple-body th,
.simple-body td{
padding:8px 6px;
line-height:1.55;
word-break:break-word;
overflow-wrap:anywhere;
}

.simple-body th{
font-size:.76rem;
}
.simple-body td{
font-size:.78rem;
}
.toc{grid-template-columns:repeat(2,1fr);
}
}


/*2カラム*/
.fr2-1-64{
  display:grid;
  grid-template-columns:58% 42%;
  gap:10px;
}
.fr2-1-64 img{ width: 100%; height: auto;}
.fr2-1-64 p{font-size:1.1rem;line-height: 2.2;}
.fr2-1-64 figcaption,.fr2-1  figcaption{
  text-align:center;
  font-size:.85rem;
  color:#666;
}

.fr2-1{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  align-items:stretch;
}
#what,#types,#difference,#choose,#strength,#sleep,#early,#ranking,#severe,#family,#caution,#faq,#matome{scroll-margin-top:90px!important;}
@media (min-width: 901px) and (max-width: 1366px) {
 .fr2-1-64 p{line-height:1.8;} 
}
@media (max-width:900px){
 .fr2-1-64 p{font-size:0.95rem;line-height: 1.7;} 
}
/* スマホ */
@media (max-width:680px){
  .fr2-1,.fr2-1-64{
     grid-template-columns:1fr;
  }
  .fr2-1-64 p{font-size:1rem}
  .fr2-1-64 figure img{
    width:100%;
  }
.fr2-1{gap:10px;
}
.sp-ue0ma{ margin-top: 0!important;}
}


.type-banar{
  display:inline-block;
  width:165px;
  height:auto;
  vertical-align:middle;
  border-radius: 16px;
}

.type-icon{
  display:inline-block;
  width:58px;
  height:60px;
  margin-right:1px;
  vertical-align:middle;
  background-image:url("/img/icons-02.webp");
  background-repeat:no-repeat;
  background-size:330px 160px;
}

/* 6個横並び想定：各アイコン42px */
.icon-pill{background-position:-55px 0;}
.icon-spray{background-position:-165px 0;}
.icon-eye{background-position:-220px 0;}
.icon-no-sleep{background-position:0 0;}

@media(max-width:680px){
  .fig-box{
    margin:22px auto 30px;
  }

  .fig-box img{
    border-radius:10px;
  }

}