/* =====================================================================
   KV案A+ のヒーロー差し替え用スタイル
   - KVは暗くしない（オーバーレイ/減光を無効化）
   - キャッチコピーは「継ぎ目のない白帯（不透明度80%）＋紺文字」
   - 角丸・影・出現アニメなし／文字間に隙間を作らない
   - 2行目が出ても左右がずれないよう、両列ぶんの幅を最初から確保
   base.css / honban.css の後に読み込むこと。
   ===================================================================== */

/* --- KVは一切減光しない（オーバーレイなし・映像の色そのまま） --- */
.hero-chips .teaser-hero-video {
  opacity: 1;
}

.hero-chips .hero-overlay {
  background: none;
}

/* --- キャッチコピー本体：紺文字。KVを暗くする影は使わない ---
 * height を固定することで、文字が増えても上端が動かず（上揃え）、
 * 下へ向かって伸びていく。width も固定＝左右のずれなし。
 * gap で2列（行）の間隔を確保する。 */
.hero-chips h1 {
  --hero-copy-column-width: 1.5em;
  --hero-copy-gap: 0.55em;
  gap: var(--hero-copy-gap);
  align-items: flex-start;
  width: calc(var(--hero-copy-column-width) * 2 + var(--hero-copy-gap));
  height: 14.4em; /* 字間を広げた分、列が伸びるので枠も追従（末尾の「。」を切らない） */
  max-height: none;
  color: var(--color-ink); /* 「月に一度、紙の便りで届く一篇の詩。」と同じ墨色 #2b2723 */
  text-shadow: none;
  font-weight: 400; /* 元の500から一段細く（Zen Old Minchoの最軽量） */
  letter-spacing: 0.09em;
  line-height: 1.5;
  /* フォントサイズの式は .hero-content 側（下記）に持たせ、ここでは継承する。
   * 位置計算（上へ逃がす量）にコピー自身の高さ（em）を使うため。 */
  font-size: 1em;
}

/* 横幅97%の平体（白帯ごと水平方向に3%圧縮。高さ・縦位置は不変）。
 * base.css の [data-typewriter].hero-fade { transform: none }（詳細度0,2,0）に
 * 負けないよう、属性付きセレクタで詳細度を上げる。 */
.hero-chips h1[data-typewriter] {
  transform: scaleX(0.97);
  transform-origin: 50% 50%;
}

/* コピーの大きさと縦位置。
 * フォントサイズ：幅（4.5vw）・上限（1.94rem）・高さ（svh）の3つで決まる。
 * 縦位置：通常は中央（50%）。縦が縮んだら、まず中央から上へスライドして
 * 透明ヘッダー側の余白を使い、大きさを保つ。上端 32px まで逃げても
 * 入らないときだけ、font-size の svh 項が効いて縮み始める。
 * （top は translateY(-50%) と組むのでコピーの中心位置。7.2em = 高さ14.4emの半分） */
.hero-chips .hero-content {
  font-size: max(0.8rem, min(4.5vw, 1.94rem, calc((100svh - 186px) / 14.4)));
  top: clamp(calc(32px + 7.2em), 50%, calc(100% - 150px - 7.2em));
}

/* --- 白帯は「行＝縦一列」ごとに1枚。文字が増えた分だけ白がそのまま伸びる --- *
 * 両列とも固定幅（＝列幅）なので、2行目が現れても左右がずれない。
 * 帯幅 = line-height に揃えることで、縦書き文字が帯の左右中央に収まる。 */
.hero-chips .typewriter-line {
  position: relative;
  width: var(--hero-copy-column-width);
  min-width: var(--hero-copy-column-width);
  height: auto;
  min-height: 1em;
  padding: 0.5em 0;
  background: rgba(253, 251, 245, 0.8);
  text-align: center;
}

/* まだ打ち始めていない列は白を出さない（幅は確保したまま背景だけ消す） */
.hero-chips .typewriter-line:empty {
  background: none;
}

/* 文字は白地に直接置くだけ。箱・角丸・影・アニメは一切付けない。 */
.hero-chips .typewriter-char {
  display: inline;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  animation: none;
}

/* 句読点（、。）：縦書きでは字面が枡の上に寄るため、そのままだと
 * 後ろが約1文字分空いて見える。送りを詰めて、行末（帯の下端）の空きを
 * 「こ」「あ」の上の空き（帯の上パディング）と揃える。
 * 印付けは index.html 内の小スクリプト（MutationObserver）が行う。 */
.hero-chips .typewriter-char.is-punct {
  margin-inline-end: -0.6em;
}

/* タイプ中カーソル（｜の棒）
 * 元実装はインライン要素で、表示中だけ1文字分の送り（1em）を占めていたため、
 * カーソルが消えた瞬間に白帯が1文字ぶん縮んでガタついていた。
 * 絶対配置にしてレイアウトから外し、帯の高さに一切影響させない。
 * 帯の下端（最後の文字の直下）に追従して描かれる。 */
.hero-chips .typewriter-line.is-active::after {
  position: absolute;
  /* 帯の下パディング（0.5em）の中央に置き、
     最後の文字との距離と帯の縁との距離を均等（0.25em / 0.25em）にする */
  bottom: 0.25em;
  left: 0;
  right: 0;
  width: auto;
  height: 1px;
  margin: 0;
  content: "";
  background: linear-gradient(rgba(43, 39, 35, 0.72), rgba(43, 39, 35, 0.72))
    center / 1em 1px no-repeat;
  animation: none;
}

/* --- Scroll キューのエリアは表示しない --- */
.hero-chips .hero-scroll {
  display: none;
}

/* --- ヒーローCTA：位置をさらに下げ、ボタンは少し小さく --- */
.hero-chips .hero-cta {
  bottom: clamp(34px, 7svh, 58px);
  gap: 13px;
  width: min(calc(100% - 40px), 520px);
}

/* ボタンは「元」と「縮小版」の中間サイズ。
 * 幅が狭いときはコピー（vw連動）と同じようにボタンも縮み、
 * ボタンだけが強調されてコピーが相対的に負けるのを防ぐ。 */
.hero-chips .hero-cta .button {
  flex: 1 1 clamp(150px, 32vw, 205px);
  max-width: clamp(170px, 37.5vw, 240px);
  min-height: clamp(38px, 7.5vw, 48px);
  padding: clamp(8px, 1.9vw, 12px) clamp(14px, 4vw, 26px);
  font-size: clamp(0.7rem, 2.2vw, 0.88rem);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}

/* ヒーロー内のCTAのみ、白地を不透明度80%に（ヘッダー/SP追従バーの白はそのまま）。
 * 赤線・青線の枠はいったん無しに（transparent なら寸法は変わらない）。 */
.hero-chips .hero-cta .button-send-outline,
.hero-chips .hero-cta .button-receive-outline {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.8);
}

/* --- スマホ（640px以下）：コピーを主役に大きく、CTAは縦積み ---
 * 必ずファイル末尾に置く（上のボタン基本ルールより後で効かせるため）。 */
@media (max-width: 640px) {
  /* 幅係数を 4.5vw → 7.4vw、上限も 2.05rem に引き上げ。
   * 縦積みCTAのぶん、下側の確保幅は 180px に広げる。
   * 縦位置は 50% から 3svh だけ上へバイアス：ロゴ下〜CTA上の
   * 「見た目の中央」に合わせる（そのままだと上の空きが下より大きい）。 */
  .hero-chips .hero-content {
    font-size: max(0.78rem, min(6.6vw, 1.85rem, calc((100svh - 240px) / 14.4)));
    /* 上限84px＝左上ロゴ（実測下端79px）の直下＋余白。320px級の狭幅で
       コピーがロゴに食い込むのを防ぐ */
    top: clamp(calc(84px + 7.2em), calc(50% - 5.5svh), calc(100% - 180px - 7.2em));
  }

  .hero-chips .hero-cta {
    gap: 10px;
  }

  /* ボタンは縦に並べ、幅を揃える（ひと回り大きく） */
  .hero-chips .hero-cta .button {
    flex: 1 1 100%;
    width: 100%;
    max-width: 340px;
    min-height: 50px;
    padding: 12px 20px;
    font-size: 0.9rem;
  }
}

/* --- フッター：左右分割（元のbase.css 2カラム仕様を維持） --- */

/* --- プロダクト写真：栞を外して2点構成にしたため、3カラム→2カラムに ---
 * 元の3カラム指定は min-width:640px から効くので、同じ640pxから上書きする
 * （900px起点にすると 640〜899px で3枠目がぽっかり空く）。 */
@media (min-width: 640px) {
  .product-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 880px;
    margin-inline: auto;
  }
}

/* --- タブレット縦（iPad mini / iPad Pro 縦向きなど、641〜1100px） ---
 * PCルールのままだとコピーが1.94remで頭打ちになり、縦長の大画面では
 * 余白ばかり広がってバランスが悪い。幅連動の係数と上限を引き上げ、
 * CTAもひと回り大きくする。 */
@media (min-width: 641px) and (max-width: 1100px) and (orientation: portrait) {
  .hero-chips .hero-content {
    font-size: max(0.8rem, min(5.2vw, 3rem, calc((100svh - 210px) / 14.4)));
    top: clamp(calc(32px + 7.2em), calc(50% - 2svh), calc(100% - 170px - 7.2em));
  }

  .hero-chips .hero-cta {
    gap: 16px;
    width: min(calc(100% - 48px), 640px);
  }

  .hero-chips .hero-cta .button {
    flex: 1 1 240px;
    max-width: 300px;
    min-height: 54px;
    padding: 14px 28px;
    font-size: 1rem;
  }
}

/* --- 低い画面（横向きスマホ等・高さ500px以下） ---
 * 縦積みCTA＋コピー下限0.8remの組み合わせは、568×320のような
 * ビューポートでは clamp の min が max を追い越して重なりが生じる。
 * CTAを横並びの小型に戻し、コピーの下限も下げて共存させる。 */
@media (max-width: 940px) and (max-height: 500px) {
  .hero-chips .hero-content {
    font-size: max(0.55rem, min(4vw, 1.5rem, calc((100svh - 150px) / 14.4)));
    top: clamp(calc(20px + 7.2em), 50%, calc(100% - 120px - 7.2em));
  }

  .hero-chips .hero-cta {
    bottom: 18px;
    gap: 10px;
    width: min(calc(100% - 40px), 520px);
  }

  .hero-chips .hero-cta .button {
    flex: 1 1 180px;
    width: auto;
    max-width: 220px;
    min-height: 38px;
    padding: 8px 16px;
    font-size: 0.78rem;
  }
}

/* --- prefers-reduced-motion：base.css の減光保護を復活させる ---
 * 上部の .hero-chips .teaser-hero-video { opacity: 1 } が詳細度で
 * base.css の減光（0.46）を打ち消してしまうため、ここで再指定する。
 * 動画の停止・autoplay除去は main.js の setupReducedMotionVideo が行う。 */
@media (prefers-reduced-motion: reduce) {
  .hero-chips .teaser-hero-video {
    opacity: 0.46;
  }
}

/* =====================================================================
   KV案B バリエーション（index_B.html / .hero-plain）
   .hero-chips のレイアウト（レスポンシブ・カーソル・句読点詰め等）は
   引き継ぎつつ、見せ方だけを変える：
   - キャッチコピーの白帯なし（白文字＋にじみ影）
   - KVに K10%（黒10%）のフラットな重ね
   - CTAは半透明をやめ、白100%＋青線/赤線（上流デザイン）を復活
   必ずファイル末尾に置く（.hero-chips の同詳細度ルールより後勝ちさせる）。
   ===================================================================== */

.hero-plain .hero-overlay {
  background: rgba(0, 0, 0, 0.2);
}

/* コピーの組みはデプロイ版（base.cssの原型）に寄せる：
 * ウェイト500・字間0.14em・列幅1.95em（行間はline-heightが担い、gapは使わない）。
 * サイズと縦位置のレスポンシブ式は .hero-chips のものをそのまま継承する。 */
.hero-plain h1 {
  --hero-copy-column-width: 1.95em;
  --hero-copy-gap: 0px;
  color: var(--color-paper);
  text-shadow: 0 0 28px rgba(16, 42, 94, 0.4);
  font-weight: 500; /* 400から一段太く */
  letter-spacing: 0.14em;
  line-height: 1.95;
}

/* A+版の平体97%はB版では使わない（デプロイ版と同じ素の字形） */
.hero-plain h1[data-typewriter] {
  transform: none;
}

.hero-plain .typewriter-line {
  background: none;
}

.hero-plain .typewriter-line.is-active::after {
  background: linear-gradient(rgba(253, 251, 245, 0.78), rgba(253, 251, 245, 0.78))
    center / 1em 1px no-repeat;
}

.hero-plain .hero-cta .button-send-outline {
  border-color: rgba(16, 42, 94, 0.35);
  background: #ffffff;
}

.hero-plain .hero-cta .button-send-outline:hover {
  color: var(--color-paper);
  border-color: var(--color-send);
  background: var(--color-send);
}

.hero-plain .hero-cta .button-receive-outline {
  border-color: rgba(176, 47, 39, 0.45);
  background: #ffffff;
}

.hero-plain .hero-cta .button-receive-outline:hover {
  color: var(--color-paper);
  border-color: var(--color-receive);
  background: var(--color-receive);
}

/* --- K10%修飾（index_C.html）：白帯レイアウトのままKVにK10%だけ重ねる ---
 * .hero-chips .hero-overlay { background: none } より後に置いて上書きする。 */
.hero-k10 .hero-overlay {
  background: rgba(0, 0, 0, 0.1);
}