/* 役割: Storyレイアウト。
 * 利用ページ: Story（日英）。
 * 関係する棚: メニュー・日英・フッター・共通土台。
 * 注意: 元の詳細度・!important・条件分岐を保持。生成位置はplacement.jsonの最終旧ブロック。
 */
.story-editorial {
  overflow-anchor: none;
  --story-gap: clamp(40px,7vw,100px);
  --story-space: clamp(96px,11vw,160px);
  padding-top: 0;
  padding-bottom: 0
}
.story-editorial .story-chapter {
  padding: var(--story-space) 0;
  scroll-margin-top: 100px
}
.story-editorial .story-chapter h2 {
  max-width: 28em;
  margin: 0 0 48px;
  font: 400 clamp(25px,2.6vw,36px)/1.8 yu-gothic-pr6n,'Yu Gothic',sans-serif;
  letter-spacing: .06em;
  overflow-wrap: anywhere
}
html[lang=en] .story-editorial .story-chapter h2 {
  font-family: futura-pt,Futura,sans-serif;
  letter-spacing: .02em;
  line-height: 1.5
}
.story-editorial .story-copy {
  min-width: 0
}
.story-editorial .story-copy p {
  max-width: none;
  white-space: pre-line;
  font-size: 16px;
  line-height: 2.25;
  overflow-wrap: anywhere;
  margin: 0 0 32px
}
.story-editorial .story-copy p:last-child {
  margin-bottom: 0
}
.story-editorial .story-photo {
  min-width: 0;
  margin: 0
}
.story-editorial .story-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover
}
.story-editorial .story-photo figcaption {
  margin-top: 10px;
  color: #999;
  font-size: 11px;
  line-height: 1.8
}
.story-editorial .story-opening {
  max-width: 680px;
  margin: 0 auto 100px
}
.story-editorial .story-opening p:first-child {
  font-size: clamp(21px,2.1vw,28px);
  line-height: 2;
  letter-spacing: .07em;
  margin-bottom: 42px
}
.story-editorial .story-chapter--origins h2 {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto
}
.story-editorial .story-water .story-photo {
  width: 88%;
  margin-right: auto
}
.story-editorial .story-water img {
  aspect-ratio: 16/9
}
.story-editorial .story-water .story-copy {
  width: min(610px,70%);
  margin: 60px auto 0 calc((88% - min(610px,70%))/2)
}
.story-editorial .story-split {
  display: grid;
  grid-template-columns: minmax(0,1.12fr) minmax(0,1fr);
  gap: var(--story-gap);
  align-items: center
}
.story-editorial .story-split img {
  aspect-ratio: 4/5
}
.story-editorial .story-chapter--legend {
  border-top: 1px solid #333
}
.story-editorial .story-chapter--legend h2 {
  max-width: 30em
}
.story-editorial .story-chapter--arrival {
  padding-top: 40px
}
.story-editorial .story-chapter--arrival h2 {
  max-width: 850px;
  margin-bottom: 52px
}
.story-editorial .story-panorama {
  width: calc(100% + (100vw - 100%)/2);
  max-width: none;
  margin-left: calc((100% - 100vw)/4)
}
.story-editorial .story-panorama img {
  aspect-ratio: 16/9
}
.story-editorial .story-arrival-copy {
  max-width: 700px;
  margin: 72px auto 0
}
.story-editorial .story-arrival-copy p:first-child {
  font-size: 18px;
  line-height: 2.3
}
.story-editorial .story-chapter--seasons {
  border-top: 1px solid #333
}
.story-editorial .story-chapter--seasons .story-split {
  grid-template-columns: minmax(0,1.25fr) minmax(0,1fr);
  align-items: start
}
.story-editorial .story-chapter--seasons img {
  aspect-ratio: 1/1
}
.story-editorial .story-chapter--seasons .story-copy {
  padding-top: 36px
}
.story-editorial .story-chapter--seasons p+p {
  margin-top: 56px
}
.story-editorial .story-chapter--bathing .story-split {
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: clamp(40px,9vw,125px);
  align-items: start
}
.story-editorial .story-chapter--bathing h2 {
  margin-bottom: 44px
}
.story-editorial .story-chapter--bathing img {
  aspect-ratio: 3/4
}
.story-editorial .story-chapter--bathing p+p {
  margin-top: 56px;
  font-size: 18px
}
.story-editorial .story-chapter--night {
  padding-top: 40px;
  padding-bottom: 80px
}
.story-editorial .story-chapter--night h2 {
  text-align: center;
  max-width: none;
  margin-bottom: 58px
}
.story-editorial .story-night-copy {
  max-width: 590px;
  margin: 80px auto 0
}
.story-editorial .story-night-copy p:first-child {
  font-size: 22px;
  line-height: 2.2;
  margin-bottom: 48px
}
.story-editorial .narrative-end {
  padding-top: 30px
}
@media (min-width:1600px) {
  .story-editorial .story-panorama {
    width: calc(100% + 160px);
    margin-left: -80px
  }
}
@media (max-width:900px) {
  .story-editorial .story-split,
.story-editorial .story-chapter--seasons .story-split,
.story-editorial .story-chapter--bathing .story-split {
    gap: 40px
  }
  .story-editorial .story-copy p {
    font-size: 15px
  }
  .story-editorial .story-opening p:first-child {
    font-size: 23px
  }
  .story-editorial .story-chapter--bathing p+p {
    font-size: 17px
  }
}
@media (max-width:768px) {
  .story-editorial {
    --story-space: 88px;
    width: 88%
  }
  .story-editorial .story-chapter {
    scroll-margin-top: 82px
  }
  .story-editorial .story-chapter h2 {
    font-size: 24px;
    line-height: 1.85;
    margin-bottom: 32px;
    letter-spacing: .04em
  }
  .story-editorial .story-copy,
.story-editorial .story-chapter h2 {
    padding-right: 26px
  }
  .story-editorial .story-copy p {
    font-size: 15px;
    line-height: 2.1;
    margin-bottom: 28px
  }
  html[lang=ja] .story-editorial .story-copy p {
    white-space: normal
  }
  html[lang=ja] .story-editorial .story-copy p br {
    display: none
  }
  .story-editorial .story-opening {
    margin-bottom: 54px
  }
  .story-editorial .story-opening p:first-child {
    font-size: 21px;
    line-height: 2;
    margin-bottom: 34px
  }
  .story-editorial .story-water .story-photo {
    width: calc(100% + 6.82%);
    margin-left: -6.82%
  }
  .story-editorial .story-water img {
    aspect-ratio: 4/3
  }
  .story-editorial .story-water .story-copy {
    width: 100%;
    margin: 38px 0 0
  }
  .story-editorial .story-split,
.story-editorial .story-chapter--seasons .story-split,
.story-editorial .story-chapter--bathing .story-split {
    display: flex;
    flex-direction: column;
    gap: 34px
  }
  .story-editorial .story-split>* {
    width: 100%
  }
  .story-editorial .story-chapter--legend .story-photo {
    width: 86%;
    align-self: flex-start
  }
  .story-editorial .story-chapter--legend img {
    aspect-ratio: 4/5
  }
  .story-editorial .story-chapter--arrival {
    padding-top: 12px
  }
  .story-editorial .story-panorama {
    width: 113.64%;
    margin-left: -6.82%
  }
  .story-editorial .story-panorama img {
    aspect-ratio: 4/3
  }
  .story-editorial .story-panorama figcaption {
    padding-left: 6%
  }
  .story-editorial .story-arrival-copy {
    margin-top: 40px
  }
  .story-editorial .story-arrival-copy p:first-child {
    font-size: 16px
  }
  .story-editorial .story-chapter--seasons .story-photo {
    width: 90%;
    align-self: flex-end
  }
  .story-editorial .story-chapter--seasons .story-copy {
    padding-top: 0
  }
  .story-editorial .story-chapter--seasons p+p {
    margin-top: 38px
  }
  .story-editorial .story-chapter--bathing .story-photo {
    width: 88%;
    align-self: flex-start
  }
  .story-editorial .story-chapter--bathing img {
    aspect-ratio: 4/5
  }
  .story-editorial .story-chapter--bathing p+p {
    margin-top: 38px;
    font-size: 16px
  }
  .story-editorial .story-chapter--night {
    padding-top: 12px;
    padding-bottom: 50px
  }
  .story-editorial .story-chapter--night h2 {
    text-align: left;
    margin-bottom: 32px
  }
  .story-editorial .story-chapter--night .story-panorama img {
    aspect-ratio: 4/5
  }
  .story-editorial .story-night-copy {
    margin-top: 42px
  }
  .story-editorial .story-night-copy p:first-child {
    font-size: 19px;
    line-height: 2.1;
    margin-bottom: 34px
  }
  .story-editorial .narrative-end {
    padding-top: 20px
  }
.story-editorial .story-photo figcaption{font-size:12px}}
html:has(.story-editorial) {
  scroll-behavior: auto
}