/* AIページの構成を不快指数ページへ当てはめた検討用サンプル */
.discomfortGuide{display:block;padding:50px 0 44px}
.discomfortGuide .heroTitle{margin-bottom:30px}
.discomfortGuide .heroGuideGrid{display:grid;grid-template-columns:minmax(0,1.48fr) minmax(430px,.82fr);gap:clamp(34px,4vw,64px);align-items:start}
.heroMainColumn{min-width:0}
.discomfortGuide .heroInvitation{padding:2px clamp(10px,1vw,20px) 0 0}
.discomfortGuide .heroInvitation>section{padding:2px 0 24px}
.discomfortGuide .heroInvitation h2,.simpleUse h2{margin:0;color:var(--ink);font:600 clamp(23px,2vw,30px)/1.45 var(--sans)}
.discomfortGuide .heroInvitation p{margin:14px 0 0;color:#29493f;font:700 20px/2 var(--sans);text-wrap:pretty}
.simpleUse{margin-top:24px;padding:24px 0 0;border-top:1px solid var(--line)}
.simpleUse .quickSteps{display:grid;margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--line);background:transparent}
.simpleUse .quickSteps li{display:grid;grid-template-columns:18px minmax(220px,.62fr) minmax(0,1.38fr);gap:16px;align-items:center;margin:0;padding:17px 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.simpleUse .quickSteps li::before{content:"•";color:var(--deep);font:700 27px/1 var(--sans)}
.simpleUse .quickStepCopy{display:contents}
.simpleUse .quickSteps strong{display:block;margin:0;color:var(--ink);font:700 24px/1.4 var(--sans)}
.simpleUse .quickSteps small{display:block;margin:0;color:#52675f;font:600 20px/1.5 var(--sans);text-align:left;white-space:normal}
.simpleUse .quickSteps .formula{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;font-size:18px;letter-spacing:-.02em}
.detailGuideLink{margin:19px 2px 0;text-align:left}
.detailGuideLink a{display:inline-flex;gap:8px;align-items:center;color:var(--deep);font:700 15px/1.5 var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.detailGuideLink a:hover{color:#8b6926}
.sampleDatePanel{margin-top:36px}
.discomfortGuide .compactDatePanel{grid-area:auto!important;grid-column:2;grid-row:1;align-self:stretch;margin:0;padding:22px 18px;border:1px solid #d8d2c4;border-radius:14px;background:#fbf8ef;box-shadow:0 8px 22px rgba(24,62,49,.08)}
.compactDatePanel .sectionTitle{margin:0 0 18px;padding:0;border:0}
.compactDatePanel .sectionTitle h2{font-size:22px;line-height:1.45}
.compactDatePanel .dateModeGrid{display:grid;grid-template-columns:1fr;gap:0}
.compactDatePanel .dateMode{min-width:0;padding:18px 0;border:0;border-top:1px solid #ddd6c8;background:transparent;box-shadow:none}
.compactDatePanel .dateMode:first-child{padding-top:0;border-top:0}
.compactDatePanel .dateModeLabel{display:block;margin-bottom:8px;font-size:14px}
.compactDatePanel .singleDateControls{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:10px;align-items:center}
.compactDatePanel .rangeDateInputs{display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 112px;gap:8px;align-items:center}
.compactDatePanel .rangeArrow{display:block;align-self:center;padding:0;text-align:center;color:#52675f}
.compactDatePanel input,.compactDatePanel button{width:100%;min-width:0}
.compactDatePanel .rangeInfo{margin:0;padding:18px 0 0;border-top:1px solid #d8d2c4}
.compactDatePanel .rangeInfo p{display:grid;gap:11px;margin:0}
.compactDatePanel .rangeInfo p>span{display:block;font-size:14px;line-height:1.55}
.compactDatePanel .rangeInfo strong{display:block;margin-bottom:2px;color:var(--ink);font-size:14px;letter-spacing:.04em}
.compactDatePanel .rangeInfo .statusMessage:not(.isError){display:none}
.sampleDatePanel .sectionTitle>div,.sampleGraphHeading>div{display:flex;align-items:center;gap:13px}
.sampleGraphHeading{display:flex!important}
.sampleGraphHeading>p{display:block!important}
.viewerSection{margin-top:24px}
.methodSection{margin-top:36px}
@media(max-width:980px){.discomfortGuide .heroGuideGrid{grid-template-columns:1fr;gap:0}.discomfortGuide .heroInvitation{padding-right:0}.simpleUse{margin-top:24px;padding:24px 0 0}.discomfortGuide .compactDatePanel{grid-column:1;grid-row:auto;display:block;margin-top:28px}.compactDatePanel .sectionTitle{margin-bottom:18px}.compactDatePanel .dateModeGrid{grid-template-columns:1fr}.compactDatePanel .rangeInfo{margin:0;padding:18px 0 0;border-left:0;border-top:1px solid #d8d2c4}}
@media(max-width:720px){.discomfortGuide{padding:34px 12px 30px}.discomfortGuide .heroInvitation p{font-size:19px}.simpleUse .quickSteps li{grid-template-columns:16px minmax(0,1fr);gap:8px 10px;padding:13px 2px}.simpleUse .quickStepCopy{display:grid;gap:4px}.simpleUse .quickSteps strong{font-size:16px}.simpleUse .quickSteps small{font-size:14px}.simpleUse .quickSteps .formula{font-size:11px}.compactDatePanel .singleDateControls{grid-template-columns:1fr 104px}.compactDatePanel .rangeDateInputs{grid-template-columns:1fr}.compactDatePanel .rangeArrow{display:none}.detailGuideLink{text-align:left}.sampleGraphHeading{display:block!important}.sampleGraphHeading>p{margin-top:8px!important}}

/* PlantEnvLab Outdoor Comfort — wide date controls above graph */
.discomfortGuide .heroGuideGrid{
  grid-template-columns:1fr !important;
  gap:28px !important;
}

.discomfortGuide .compactDatePanel{
  grid-column:1 !important;
  grid-row:auto !important;
  width:100%;
  margin:0 !important;
  padding:22px 28px 24px !important;
  display:grid !important;
  grid-template-columns:minmax(0,2.25fr) minmax(300px,.75fr);
  column-gap:28px;
  row-gap:16px;
  align-items:end;
}

.compactDatePanel .sectionTitle{
  grid-column:1 / -1;
  margin:0 !important;
  padding:0 0 14px !important;
  border-bottom:1px solid #d8d2c4 !important;
}

.compactDatePanel .dateModeGrid{
  grid-column:1;
  display:grid !important;
  grid-template-columns:minmax(260px,.8fr) minmax(520px,1.45fr) !important;
  gap:22px !important;
  align-items:end;
}

.compactDatePanel .dateMode{
  padding:0 !important;
  border:0 !important;
}

.compactDatePanel .singleDateControls{
  grid-template-columns:minmax(0,1fr) 150px !important;
  gap:10px !important;
}

.compactDatePanel .rangeDateInputs{
  grid-template-columns:minmax(150px,1fr) 20px minmax(150px,1fr) 150px !important;
  gap:10px !important;
  align-items:center !important;
}

.compactDatePanel .rangeArrow{
  display:block !important;
  padding:0 !important;
  align-self:center !important;
}

.compactDatePanel input,
.compactDatePanel button{
  min-height:48px;
  font-size:17px;
  text-align:center;
}

.compactDatePanel button{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.15;
}

.compactDatePanel .rangeInfo{
  grid-column:2;
  margin:0 !important;
  padding:0 0 0 24px !important;
  border-top:0 !important;
  border-left:1px solid #d8d2c4 !important;
  align-self:stretch;
}

.compactDatePanel .rangeInfo p{
  height:100%;
  display:grid !important;
  grid-template-columns:1fr !important;
  align-content:center;
  gap:10px !important;
}

.compactDatePanel .rangeInfo p>span{
  font-size:15px !important;
}

.compactDatePanel .rangeInfo strong{
  font-size:15px !important;
}

@media(max-width:1200px){
  .discomfortGuide .compactDatePanel{
    grid-template-columns:1fr !important;
  }
  .compactDatePanel .dateModeGrid{
    grid-column:1;
    grid-template-columns:1fr 1.35fr !important;
  }
  .compactDatePanel .rangeInfo{
    grid-column:1;
    padding:16px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid #d8d2c4 !important;
  }
  .compactDatePanel .rangeInfo p{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:16px !important;
  }
}

@media(max-width:820px){
  .compactDatePanel .dateModeGrid{
    grid-template-columns:1fr !important;
  }
  .compactDatePanel .rangeDateInputs{
    grid-template-columns:1fr !important;
  }
  .compactDatePanel .rangeArrow{
    display:none !important;
  }
  .compactDatePanel .rangeInfo p{
    grid-template-columns:1fr !important;
  }
}

/* Outdoor Comfort — place the simple-guide block to the right of the introduction */
.discomfortGuide .heroMainColumn{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(420px,.72fr);
  gap:clamp(34px,4vw,64px);
  align-items:start;
}

.discomfortGuide .heroMainColumn .heroInvitation{
  min-width:0;
}

.discomfortGuide .heroMainColumn .simpleUse{
  min-width:0;
  margin:0 !important;
  padding:0 0 0 clamp(26px,3vw,46px) !important;
  border-top:0 !important;
  border-left:1px solid #d8d2c4;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps{
  margin-top:18px;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps li{
  grid-template-columns:16px 1fr !important;
  gap:7px 10px !important;
  padding:14px 2px !important;
}

.discomfortGuide .heroMainColumn .simpleUse .quickStepCopy{
  display:grid !important;
  gap:4px;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps strong{
  font-size:18px !important;
  line-height:1.4 !important;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps small{
  font-size:15px !important;
  line-height:1.55 !important;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps .formula{
  font-size:13px !important;
}

@media(max-width:1100px){
  .discomfortGuide .heroMainColumn{
    grid-template-columns:1fr;
    gap:26px;
  }
  .discomfortGuide .heroMainColumn .simpleUse{
    padding:24px 0 0 !important;
    border-left:0;
    border-top:1px solid #d8d2c4 !important;
  }
}

/* Outdoor Comfort — align intro/guide and compact the date header row */
.discomfortGuide .heroMainColumn{
  align-items:stretch !important;
}

.discomfortGuide .heroMainColumn .heroInvitation,
.discomfortGuide .heroMainColumn .simpleUse{
  height:100%;
}

.discomfortGuide .heroMainColumn .simpleUse{
  display:flex;
  flex-direction:column;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps{
  flex:1 1 auto;
  display:grid;
  grid-template-rows:repeat(3,minmax(0,1fr));
  align-content:stretch;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps li{
  align-content:center;
}

.discomfortGuide .heroMainColumn .simpleUse .detailGuideLink{
  margin-top:auto !important;
  padding-top:14px;
}

.discomfortGuide .heroMainColumn .heroInvitation h2,
.discomfortGuide .heroMainColumn .simpleUse h2{
  font-size:clamp(28px,2vw,34px) !important;
  line-height:1.28 !important;
}

.discomfortGuide .heroMainColumn .heroInvitation p{
  font-size:18px !important;
  line-height:1.72 !important;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps strong{
  font-size:18px !important;
  line-height:1.4 !important;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps small{
  font-size:15px !important;
  line-height:1.55 !important;
}

.discomfortGuide .heroMainColumn .detailGuideLink a{
  font-size:16px !important;
}

/* Put Observation point / Available range / Display interval beside "Choose a date". */
.discomfortGuide .compactDatePanel{
  grid-template-columns:minmax(260px,.72fr) minmax(0,2.28fr) !important;
  grid-template-rows:auto auto !important;
  align-items:center !important;
  row-gap:18px !important;
}

.compactDatePanel .sectionTitle{
  grid-column:1 !important;
  grid-row:1 !important;
  align-self:center !important;
  padding:0 !important;
  border-bottom:0 !important;
  margin:0 !important;
}

.compactDatePanel .sectionTitle h2{
  margin:0 !important;
  font-size:28px !important;
  line-height:1.25 !important;
}

.compactDatePanel .rangeInfo{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:stretch !important;
  margin:0 !important;
  padding:0 0 0 26px !important;
  border-left:1px solid #d8d2c4 !important;
  border-top:0 !important;
  display:flex;
  align-items:center;
}

.compactDatePanel .rangeInfo p{
  width:100%;
  height:auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:18px 28px !important;
  align-items:start !important;
  align-content:center !important;
}

.compactDatePanel .rangeInfo p>span{
  font-size:16px !important;
  line-height:1.5 !important;
}

.compactDatePanel .rangeInfo strong{
  margin-bottom:4px !important;
  font-size:17px !important;
  line-height:1.35 !important;
}

.compactDatePanel .dateModeGrid{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  padding-top:18px !important;
  border-top:1px solid #d8d2c4 !important;
  align-items:end !important;
}

.compactDatePanel .dateModeLabel{
  font-size:16px !important;
  line-height:1.4 !important;
}

.compactDatePanel input,
.compactDatePanel button{
  min-height:50px !important;
  font-size:17px !important;
}

@media(max-width:1200px){
  .discomfortGuide .compactDatePanel{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto !important;
  }
  .compactDatePanel .sectionTitle{
    grid-column:1 !important;
    grid-row:1 !important;
  }
  .compactDatePanel .rangeInfo{
    grid-column:1 !important;
    grid-row:2 !important;
    padding:14px 0 0 !important;
    border-left:0 !important;
    border-top:1px solid #d8d2c4 !important;
  }
  .compactDatePanel .dateModeGrid{
    grid-column:1 !important;
    grid-row:3 !important;
  }
}

@media(max-width:820px){
  .compactDatePanel .rangeInfo p{
    grid-template-columns:1fr !important;
  }
}



/* 2026-09-06 Outdoor Comfort title/text readability adjustment */
.discomfortGuide .heroTitle h1{
  font-size:clamp(46px,3.9vw,58px) !important;
  line-height:1.08 !important;
  letter-spacing:.01em !important;
  max-width:none !important;
}

.discomfortGuide .heroTitle .eyebrow,
.methodHeader .eyebrow{
  font-size:13px !important;
}

.discomfortGuide .heroMainColumn .heroInvitation h2,
.discomfortGuide .heroMainColumn .simpleUse h2{
  font-size:clamp(30px,2vw,36px) !important;
  line-height:1.24 !important;
}

.discomfortGuide .heroMainColumn .heroInvitation p{
  font-size:20px !important;
  line-height:1.82 !important;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps strong{
  font-size:20px !important;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps small{
  font-size:16px !important;
}

.discomfortGuide .heroMainColumn .simpleUse .quickSteps .formula{
  font-size:14px !important;
}

.discomfortGuide .heroMainColumn .detailGuideLink a{
  font-size:17px !important;
}

.methodHeader h2{
  font-size:clamp(30px,2.2vw,38px) !important;
  line-height:1.25 !important;
}

.methodArticle h2{
  font-size:28px !important;
  line-height:1.3 !important;
}

.methodArticle p,
.methodArticle li,
.methodArticle .contentNotice p{
  font-size:18px !important;
  line-height:1.78 !important;
}

.methodArticle .contentNotice strong{
  font-size:19px !important;
}

@media(max-width:900px){
  .discomfortGuide .heroTitle h1{
    font-size:clamp(40px,7vw,52px) !important;
  }
  .discomfortGuide .heroMainColumn .heroInvitation p{
    font-size:18px !important;
  }
  .methodArticle p,
  .methodArticle li,
  .methodArticle .contentNotice p{
    font-size:17px !important;
  }
}

/* PlantEnvLab shared heading scale — 2026-09-06 */
.discomfortGuide .heroTitle .eyebrow,
.methodHeader .eyebrow{
  font-size:13px !important;
  line-height:1.4 !important;
}
.discomfortGuide .heroTitle h1{
  font-size:48px !important;
  line-height:1.12 !important;
}
.discomfortGuide .heroInvitation h2,
.discomfortGuide .simpleUse h2,
.compactDatePanel .sectionTitle h2,
.sampleGraphHeading h2,
.methodHeader h2,
.methodSection>h2{
  font-size:29px !important;
  line-height:1.30 !important;
}
.methodSection h3{
  font-size:22px !important;
  line-height:1.35 !important;
}

/* Outdoor Comfort presentation — mobile layout containment, 2026-09-06 */
@media(max-width:820px){
  .discomfortGuide,
  .discomfortGuide .heroMainColumn,
  .discomfortGuide .heroGuideGrid,
  .discomfortGuide .compactDatePanel,
  .compactDatePanel .dateModeGrid,
  .compactDatePanel .singleDateControls,
  .compactDatePanel .rangeDateInputs,
  .compactDatePanel .rangeInfo p{
    grid-template-columns:1fr !important;
    width:100%;
    max-width:100%;
  }
  .discomfortGuide .heroMainColumn,
  .discomfortGuide .heroInvitation,
  .discomfortGuide .simpleUse,
  .discomfortGuide .compactDatePanel,
  .compactDatePanel .sectionTitle,
  .compactDatePanel .rangeInfo,
  .compactDatePanel .dateModeGrid{
    min-width:0 !important;
    max-width:100% !important;
  }
  .discomfortGuide .heroMainColumn .simpleUse{
    padding-left:0 !important;
    border-left:0 !important;
  }
  .discomfortGuide .heroMainColumn .simpleUse .quickSteps li{
    grid-template-columns:16px minmax(0,1fr) !important;
  }
  .compactDatePanel .rangeInfo{
    padding-left:0 !important;
  }
  .compactDatePanel input,
  .compactDatePanel button{
    width:100% !important;
  }
}