:root {
--v-blue: #2EA8D5;
--v-blue-dark: #0c5879;
--v-dark: #102f42;
--v-text: #33444f;
--v-sub: #60737f;
--v-border: #d9eef7;
--v-green: #1f9d55;
--v-orange: #f5a623;
--v-pink: #f06f80;
--v-purple: #a56bc2
}
/* =============================================
   TOP MV / ファーストビュー
============================================= */
.mv{
  background-image:url('../img/temp-bg.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
  height:540px;
}
.mv .container{
  padding:0; /* MVのみ左右余白を解除。重要！style.cssの左右余白20px上書き*/
  position:relative;
  width:100%;
  height:100%;
  margin: 0 auto;
}
/* 女性画像 */
.mv-person img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  z-index:1;
  pointer-events:none;

}
.mv-label, h1,.mv-sub,.mv-lead{
  position:absolute;
  left:max(5%,60px);
}
.mv-label{
    top:8%;
    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-label svg{
    width:20px;
    height:20px;
    fill:currentColor;
    flex:none;
filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
 opacity:.95;
}
.mt2{ margin-top: 2px;}

h1{
  top:22%;
  font-size:5rem;
  font-weight:900;
  color:#0a2d4a;
  line-height:1.2;
  letter-spacing:.01em;
  z-index:3;
}

.mv-sub{
  top:45%;
  left:5%;
  max-width:650px;
  font-size:clamp(1.35rem,3vw,2.05rem);
  font-weight:900;
  color:#0a2d4a;
  line-height:1.45;
  margin:0;
  z-index:3;
}

.mv-lead{
  top:66%;
  max-width:620px;
  color:#0a2d4a;
  font-size:1.02rem;
  line-height:2;
  margin:0;
  font-weight:500;
  text-shadow:
  0 1px 3px rgba(255,255,255,.9),
  0 0 10px rgba(255,255,255,.7);
  z-index:3;
}

h1,
.mv-sub{
  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;
}

.mv-sub strong,
.mv-sub em{
  color:var(--v-green);
  font-style:normal;
}

/* iPad sp*/
@media (max-width: 900px) {

  .mv{
  height:auto;
  }
  .mv-label{
    top:6%;
    left:5%;
    font-size:.75rem;
padding:6px 18px 6px 10px;
  }
  h1{
    font-size:3.5rem;
  }
h1,.mv-label,.mv-sub, .mv-lead{
  left:8%;}
.mv-lead{
  top:67%;
  max-width:650px;
  font-size:0.89rem;
  line-height:1.8;
  letter-spacing: -.03rem;
}
}
/* スマホ */
@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-label{
    position:absolute;
    top:6%;
    left:6%;
    font-size:3vw;
  }
  h1{
    position:absolute;
    top:14%;
    left:6%;
    width:auto;
    white-space:normal; /* ←重要 */
    font-size:14vw;/*9.3vw*/
    line-height:1.2;
  }
 
.mv-sub{
  top:27%;
  left:6%;
  width:71%;
  font-size:1rem;
  line-height:1.8;
  }
 .mv-lead{
    position:absolute;
    font-size:3.8vw;
    top:65%;
    left:6%;
    width:91%;
    /*background:rgba(255,255,255,.55);
   border-radius: 12px;
    padding:14px;*/
  }
main{padding:0;
}
}
.summary,
#what,
#symptoms,
#cause,
#season,
#medicine,
#selfcare,
#supplement,
#check,
#severity,
#radical-treatment,
#diagnosis,
#faq {
width: 100%;
}

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


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

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

.simple-body th {
background: #2ea8d5;
color: #fff;
font-size: .76rem
}

.simple-body td {
border: 1px solid #d9eef7;
font-size: .78rem
}

.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:20px;
margin-top: 38px;
cursor: pointer;
font-weight: 700
}

.pollen-chart {
background: #fff;
border: 1px solid #d9eef7;
border-radius: 14px;
padding: 20px;
margin: 28px 0 46px;
box-shadow: 0 4px 16px rgba(46, 168, 213, .08);
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
max-width: 100%
}

.month-head,
.pollen-row {
display: grid;
grid-template-columns: 90px repeat(12, 46px);
min-width: 650px;
align-items: start
}

.month-head {
margin-bottom: 10px;
font-size: .8rem;
color: #666;
text-align: center
}

.month-head b {
border-left: 1px solid #aaa
}

.month-head b:last-child {
border-right: 1px solid #aaa
}

.pollen-row {
min-height: 52px;
border-top: 1px solid #eef6fa;
position: relative
}

.pollen-row strong {
font-size: .95rem;
color: #1a2f3a
}

.bar {
width: 100%;
height: 30px;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: .75rem;
font-weight: 900;
color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
border-radius: 0;
line-height: 1.3;
text-align: center
}

.pollen-chart .bar {
height: 42px;
font-size: .8rem;
padding: 4px 6px
}

.bar-red-peak {
background: #c0392b;
color: #fff
}

.bar-red-sub {
background: #e8a09a;
color: #7a1a14
}

.bar-blue-peak {
background: #2471a3;
color: #fff
}

.bar-blue-sub {
background: #a9cce3;
color: #1a4a6e
}

.bar-wrap {
position: relative;
display: flex;
flex-direction: column;
align-items: center
}

.bar-area-label {
font-size: .72rem;
color: #2471a3;
font-weight: 700;
margin-top: 3px;
white-space: nowrap
}

.pollen-legend {
display: flex;
gap: 16px;
margin-bottom: 18px;
flex-wrap: wrap;
font-size: .82rem;
justify-content: center;
align-items: center
}

.pollen-legend span {
display: inline-flex;
align-items: center;
gap: 6px
}

.legend-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 60px;
height: 22px;
font-weight: 700;
font-size: .78rem
}

.legend-red-peak {
background: #c0392b;
color: #fff
}

.legend-red-sub {
background: #e8a09a;
color: #c0392b
}

.legend-blue-peak {
background: #2471a3;
color: #fff
}

.legend-blue-sub {
background: #a9cce3;
color: #2471a3
}

.season-region-title {
margin-top: 48px
}

.season-note {
font-size: .8rem;
color: #888;
margin-top: 8px
}

.small-star {
font-size: .7em;
font-weight: 400
}

.region-tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 0
}

.region-tab {
padding: 8px 14px;
background: #f0f8ff;
border: 1px solid #2ea8d5;
border-bottom: none;
border-radius: 6px 6px 0 0;
cursor: pointer;
font-size: .85rem;
font-weight: 700;
color: #2ea8d5;
transition: background .2s
}

.region-tab.active {
background: #2ea8d5;
color: #fff
}

.region-panel {
display: none;
border: 1px solid #2ea8d5;
border-radius: 0 6px 6px 6px;
padding: 20px;
background: #fff;
margin-bottom: 32px
}

.region-panel.active {
display: block
}

.region-note {
font-size: .82rem;
background: #f8fcff;
border-left: 3px solid #2ea8d5;
padding: 10px 14px;
margin-top: 16px;
line-height: 1.8;
position: relative;
z-index: 4
}

.r-chart {
position: relative;
overflow: hidden
}

.r-head,
.r-row {
display: grid;
grid-template-columns: 90px repeat(36, 1fr);
width: 100%;
min-width: 0;
font-size: .72rem;
align-items: center
}

.r-head {
margin-bottom: 4px;
color: #666;
position: relative;
z-index: 3;
background: #fff
}

.r-head span,
.r-head b {
height: 34px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: #fff;
font-weight: 700
}

.r-head b {
border-left: 1px solid #b8c4cc;
background: #fff7ef;
position: relative;
font-size: .72rem
}

.r-head b::before,
.r-head b::after {
display: none !important
}

.r-head b:nth-child(odd) {
background: #fffdf9
}

.r-head b:last-child {
border-right: 1px solid #b8c4cc
}

.r-row {
position: relative;
z-index: 1;
min-height: 34px;
border-top: 1px solid #eef3f6
}

.r-row::before {
content: "";
position: absolute;
left: 90px;
right: 0;
top: 0;
bottom: 0;
background: repeating-linear-gradient(to right, transparent 0, transparent calc(8.333333% - 1px), rgba(184, 196, 204, .95) calc(8.333333% - 1px), rgba(184, 196, 204, .95) 8.333333%), repeating-linear-gradient(to right, transparent 0, transparent calc(2.777777% - 1px), rgba(215, 225, 232, .55) calc(2.777777% - 1px), rgba(215, 225, 232, .55) 2.777777%);
pointer-events: none;
z-index: 0
}

.r-row strong {
font-size: .72rem;
line-height: 1.3;
padding-right: 4px;
position: relative;
z-index: 3;
background: #fff
}

.r-row strong small {
font-size: .68em;
font-weight: 400
}

.r-bar {
height: 30px;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
display: flex;
align-items: center;
justify-content: center;
font-size: .68rem;
font-weight: 700;
text-align: center;
line-height: 1.2;
position: relative;
z-index: 3;
overflow: hidden
}

.rb-peak {
background: #c0392b;
color: #fff
}

.rb-sub {
background: #e8a09a;
color: #7a1a14
}

.rb-bpeak {
background: #2471a3;
color: #fff
}

.rb-bsub {
background: #a9cce3;
color: #1a4a6e
}

.pollen-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
margin: 34px 0
}

.pollen-card {
display: block;
background: #fff;
border: 1px solid var(--v-border);
border-radius: 14px;
padding: 20px;
color: var(--v-dark);
text-decoration: none;
box-shadow: 0 7px 20px rgba(16, 47, 66, .05)
}

.pollen-card h4 {
color: var(--v-dark);
font-size: 1.08rem;
font-weight: 900;
margin: 0 0 8px
}

.pollen-card p {
color: var(--v-sub);
font-size: .9rem;
line-height: 1.75;
margin: 0
}

.table-scroll {
overflow-x: auto
}




.pollen-cards {
grid-template-columns: 1fr
}

.pollen-chart {
padding: 14px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch
}

.month-head,
.pollen-row {
grid-template-columns: 90px repeat(12, 46px);
min-width: 650px
}

.r-chart {
overflow-x: auto
}

.r-head,
.r-row {
grid-template-columns: 84px repeat(36, 20px);
min-width: 804px
}

.r-row::before {
left: 84px
}

.r-row strong {
font-size: .68rem
}

.r-bar {
height: 28px;
font-size: .62rem
}

.pollen-chart,
.region-panel {
position: relative
}



#symptoms ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px;
padding-left: 0;
margin: 10px 0 18px;
list-style: none
}

#symptoms li {
position: relative;
margin: 0;
padding: 6px 10px 6px 24px;
line-height: 1.45;
font-size: .9rem;
background: #f8fcff;
border: 1px solid #e5f2f8;
border-radius: 8px
}

#symptoms li::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: #2ea8d5;
transform: translateY(-50%)
}

@media (max-width:680px) {

#symptoms .summary {
padding: 12px 10px;
margin-top: 28px
}

#symptoms .summary h3 {
margin: 0 0 12px
}

#symptoms .summary ul {
margin: 0
}

#symptoms li {
font-size: .78rem;
line-height: 1.35;
padding: 6px 6px 6px 20px
}

#symptoms li::before {
left: 8px;
width: 5px;
height: 5px
}

#symptoms .nolist li::before {
top: 1em;
transform: none
}

#symptoms h3 {
margin: 20px 0 8px;
font-size: 1rem
}

#symptoms p {
line-height: 1.7;
margin-bottom: 10px
}
}

#cause ul,
#medicine ul,
#selfcare ul,
#supplement ul,
#check ul,
#diagnosis ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px 18px;
padding-left: 0;
margin: 10px 0 18px;
list-style: none
}

#cause li,
#medicine li,
#selfcare li,
#supplement li,
#check li,
#diagnosis li {
position: relative;
margin: 0;
padding: 6px 10px 6px 24px;
line-height: 1.45;
font-size: .9rem;
background: #f8fcff;
border: 1px solid #e5f2f8;
border-radius: 8px
}

#cause li::before,
#medicine li::before,
#selfcare li::before,
#supplement li::before,
#check li::before,
#diagnosis li::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: #2ea8d5;
transform: translateY(-50%)
}

#cause h3,
#medicine h3,
#selfcare h3,
#supplement h3,
#check h3,
#diagnosis h3 {
margin: 24px 0 10px;
font-size: 1.12rem
}

#cause p,
#medicine p,
#selfcare p,
#supplement p,
#check p,
#diagnosis p {
margin-bottom: 12px;
line-height: 1.8
}

#supplement .summary,
#check .summary,
#diagnosis .summary {
padding: 16px 16px;
margin-top: 28px
}

@media (max-width:680px) {

#cause ul,
#medicine ul,
#selfcare ul,
#supplement ul,
#check ul,
#diagnosis ul {
grid-template-columns: repeat(2, 1fr);
gap: 6px
}

#cause li,
#medicine li,
#selfcare li,
#supplement li,
#check li,
#diagnosis li {
font-size: .78rem;
line-height: 1.35;
padding: 6px 6px 6px 20px
}

#cause li::before,
#medicine li::before,
#selfcare li::before,
#supplement li::before,
#check li::before,
#diagnosis li::before {
left: 8px;
width: 5px;
height: 5px
}

#cause h3,
#medicine h3,
#selfcare h3,
#supplement h3,
#check h3,
#diagnosis h3 {
margin: 20px 0 8px;
font-size: 1rem
}

#cause p,
#medicine p,
#selfcare p,
#supplement p,
#check p,
#diagnosis p {
line-height: 1.7;
margin-bottom: 10px
}
}

#diagnosis ul,
#radical-treatment ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px 18px;
padding-left: 0;
list-style: none;
margin: 10px 0 18px
}

#diagnosis li,
#radical-treatment li {
position: relative;
margin: 0;
padding: 6px 10px 6px 24px;
line-height: 1.45;
font-size: .9rem;
background: #f8fcff;
border: 1px solid #e5f2f8;
border-radius: 8px
}

#diagnosis li::before,
#radical-treatment li::before {
content: "";
position: absolute;
left: 10px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: #2ea8d5;
transform: translateY(-50%)
}

#radical-treatment .notice,
#radical-treatment .summary {
padding: 16px 18px;
margin: 18px 0;
line-height: 1.7
}

@media (max-width:680px) {

#diagnosis ul,
#radical-treatment ul {
grid-template-columns: repeat(2, 1fr);
gap: 6px
}

#diagnosis li,
#radical-treatment li {
font-size: .78rem;
line-height: 1.35;
padding: 6px 6px 6px 20px
}

#diagnosis li::before,
#radical-treatment li::before {
left: 8px;
width: 5px;
height: 5px
}
}

.symptom-h3 {
position: relative;
padding-left: 57px;
min-height: 50px;
display: flex;
align-items: center
}

.symptom-h3::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-image: url(../img/syoj-icon.webp);
background-repeat: no-repeat;
background-size: 250px 48px
}

.symptom-nose::before {
background-position: 10px 0
}

.symptom-eye::before {
background-position: -40px 0
}

.symptom-throat::before {
background-position: -90px 0
}

.symptom-skin::before {
background-position: -144px 0
}

.symptom-body::before {
background-position: -200px 0
}

.pollen-bg-card {
position: relative;
overflow: hidden;
isolation: isolate;
padding-right: 138px;
min-height: 150px
}

.pollen-bg-card::before {
content: "";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
width: 112px;
height: 126px;
border-radius: 16px;
background-image: url(../img/major-kafun1.webp);
background-repeat: no-repeat;
background-size: 726px 531px;
z-index: -1;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55)
}

.pollen-bg-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1
}

.pollen-img-sugi::before {
background-position: -10px -100px
}

.pollen-img-hinoki::before {
background-position: -155px -100px
}

.pollen-img-ine::before {
background-position: -440px -100px
}

.pollen-img-butakusa::before {
background-position: -300px -100px
}

.pollen-img-shirakaba::before {
background-position: -155px -330px
}

.pollen-img-kanamugura::before {
background-position: -300px -330px
}
/* =============================================
   都道府県ピッカー（CTA風・目立たせる）
============================================= */
.region-nav-box{
  background:linear-gradient(135deg,#1f9d55,#2EA8D5);
  border-radius:20px;
  padding:30px 24px;
  margin:28px auto;
  box-shadow:0 14px 30px rgba(31,157,85,.25);
  text-align:center;
}
.region-nav-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  color:#fff;
  font-size:1.25rem;
  font-weight:900;
  margin-bottom:18px;
  text-shadow:0 1px 4px rgba(0,0,0,.15);
}
.mv-pref-picker label{
  display:block;
  color:rgba(255,255,255,.92);
  font-size:.85rem;
  font-weight:700;
  margin-bottom:10px;
}
.mv-pref-picker select{
  width:100%;
  max-width:440px;
  padding:16px 44px 16px 22px;
  border:none;
  border-radius:999px;
  font-size:1.05rem;
  font-weight:900;
  color:#0a2d4a;
  background:#fff;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#1f9d55 50%),linear-gradient(135deg,#1f9d55 50%,transparent 50%);
  background-position:right 22px center,right 16px center;
  background-size:8px 8px,8px 8px;
  background-repeat:no-repeat;
  transition:transform .2s,box-shadow .2s;
}
.mv-pref-picker select:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(0,0,0,.24);
}

#what,#symptoms,#cause,#season,#medicine,#selfcare,#supplement,#check,#severity,#radical-treatment,#diagnosis,#faq,#summary
{scroll-margin-top:90px!important;}
@media(max-width:680px){
  .region-nav-box{padding:24px 18px;border-radius:16px;}
  .region-nav-title{font-size:.93rem; letter-spacing: -.0.05rem;}
  .mv-pref-picker select{font-size:.95rem;padding:14px 40px 14px 18px;}
}