/* features-hux-08.css — 和風・縦書き見出しのセクション。旧 features-th13 の置き換え。
 * 旧版の壊れ方: 写真が枠を突き抜けて重複表示され、縦書き見出しが写真に埋もれていた。
 * 対策: 縦書きは【1024px以上のときだけ】。狭い画面で縦書きにすると行が画面外へ流れて読めない。
 *   写真は器を aspect-ratio で確定させ cover で敷く。重ねない。
 * .lgx は付けない。
 */
.features-hux-08 .mx-auto{margin-inline:auto}
.features-hux-08 .max-w-7xl{max-width:80rem}
.features-hux-08 .px-4{padding-inline:1rem}
.features-hux-08 .py-8{padding-block:2rem}

.features-hux-08 .hux08-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
.features-hux-08 .hux08-media{margin:0;aspect-ratio:4/3;max-height:460px;overflow:hidden;border-radius:.5rem}
.features-hux-08 .hux08-media img{display:block;width:100%;height:100%;object-fit:cover}
.features-hux-08 .hux08-title{margin:0 0 .5em;line-height:1.5}
.features-hux-08 .hux08-en{margin:0 0 1em;letter-spacing:.2em;text-transform:uppercase;color:var(--color-primary);font-size:var(--fs-small,.9375rem)}
.features-hux-08 .hux08-text{margin:0 0 1.5rem}
.features-hux-08 .hux08-more{margin:0}
.features-hux-08 .hux-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.7em 2.2em;border-radius:999px;background:var(--color-primary);color:var(--color-on-primary);text-decoration:none;font-weight:600}
.features-hux-08 .hux-btn:hover{opacity:.88}

@media (min-width:768px){
  .features-hux-08 .px-4{padding-inline:1.5rem}
  .features-hux-08 .hux08-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:center}
}
@media (min-width:1024px){
  .features-hux-08 .px-4{padding-inline:2rem}
  .features-hux-08 .hux08-grid{grid-template-columns:minmax(0,1fr) auto;gap:3rem}
  /* ★縦書きはここから。行が溢れないよう高さを写真に合わせて上限を切る。 */
  .features-hux-08 .hux08-body{display:flex;flex-direction:row-reverse;align-items:flex-start;gap:1.5rem}
  .features-hux-08 .hux08-title,.features-hux-08 .hux08-en{writing-mode:vertical-rl;text-orientation:mixed;margin:0;max-height:460px}
  .features-hux-08 .hux08-text,.features-hux-08 .hux08-more{writing-mode:horizontal-tb;max-width:22rem}
}