/* ═══════════════════════════════════════════════════════════
   スマホ版スタディ 2026-07-29（2層モデル・社長確定）共通層
   ①ヒーロー＝カシャ→チェキ→アプリに入る（開いた瞬間に自動再生）
   ②以降＝実機前面・スクロール＝あなたの指（矢印は廃止）
   前提: preview-top.html の全スタイルの後に読み込むこと
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 560px) and (orientation: portrait) {
  /* ── ヒーロー自動再生の舞台を復活（旧 mobileHeroNoPhoto を上書き） ── */
  .hero-photo-stage,
  .hero-shutter-flash,
  .hero-flight-layer,
  .hero-captured-photo,
  .focus-corners {
    display: block !important;
  }

  /* 写真の帯: 実機の背後に敷く */
  .hero-photo-stage {
    top: 300px;
    right: 0;
    left: 0;
    height: 340px;
    border-radius: 0;
    box-shadow: none;
  }

  .hero-photo-stage::after {
    background:
      linear-gradient(180deg, rgba(250, 248, 244, .55), transparent 26%),
      linear-gradient(180deg, transparent 62%, rgba(250, 248, 244, .62));
  }

  .hero-photo {
    object-position: 61% 52%;
  }

  .hero-shutter-flash {
    top: 300px;
    right: 0;
    bottom: auto;
    left: 0;
    height: 340px;
    border-radius: 0;
  }

  .hero-flight-layer {
    display: block !important;
    left: 0;
    width: 100vw;
    height: 100svh;
    min-height: 0;
    transform: none;
  }

  /* 撮れた1枚: 実機の上（前面）に現れて、実機の中へ入っていく */
  .hero-captured-photo {
    top: 396px;
    left: 50%;
    width: 148px;
    border-radius: 14px;
    box-shadow:
      0 4px 10px rgba(60, 45, 25, .14),
      0 20px 38px -14px rgba(60, 45, 25, .36);
  }

  .focus-corners {
    top: 372px;
    right: auto;
    left: calc(50% - 98px);
    width: 196px;
    height: 196px;
    transform: none;
  }

  /* ── スクロール＝指。画面送り矢印は置かない ── */
  .mobile-story-arrows {
    display: none !important;
  }

  .mobile-story-controls {
    grid-template-columns: minmax(96px, .9fr) minmax(150px, 1.3fr);
  }

  /* チェキ最終カード: patchの translate:-50% -50% とデッキの負マージンが二重掛けになり
     左上へ飛ぶ（2026-07-29 実測）。translate 基準の中央寄せに統一する */
  .journey-final-card {
    top: 50%;
    left: 50%;
    margin: -30px 0 0;
  }

  /* ── 社長指摘① 2026-07-29: ヒーローのトラスト3点はスマホでは出さない
     （無料はCTA下・FAQ・最終段の「無料で使えます」で担保） ── */
  .hero-trust {
    display: none !important;
  }

  /* トラスト行の分だけヒーロー実機に高さを渡す */
  .hero-phone-slot {
    width: clamp(178px, 52vw, 212px);
  }

  /* ── 社長指摘② 2026-07-29: メニューボタンを独自設計に
     白い丸チップ＋コーラルの2本バー（長短で非対称＝やわらかさ）。文字ラベルなし ── */
  .mobile-menu-toggle {
    width: 42px;
    min-width: 42px;
    height: 42px;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 0;
    border-radius: 50%;
    background: var(--card, #FEFCFB);
    box-shadow:
      0 1px 2px rgba(60, 45, 25, .08),
      0 6px 14px -6px rgba(60, 45, 25, .22);
    color: var(--brand-icon-coral, #ED9073);
  }

  .mobile-menu-label {
    display: none;
  }

  .mobile-menu-toggle-lines {
    width: 18px;
    height: 12px;
  }

  .mobile-menu-toggle-lines i {
    height: 2.6px;
    border: 0;
    border-radius: 3px;
    background: currentColor;
    transform: none;
  }

  .mobile-menu-toggle-lines i:nth-child(1) {
    top: 1px;
    width: 18px;
  }

  .mobile-menu-toggle-lines i:nth-child(2) {
    top: 8.5px;
    left: auto;
    right: 0;
    width: 12px;
  }

  .mobile-menu-toggle-lines i:nth-child(3) {
    display: none;
  }

  .site-header.is-mobile-menu-open .mobile-menu-toggle {
    background: rgba(255, 249, 242, .12);
    color: #FFF9F2;
  }

  .site-header.is-mobile-menu-open .mobile-menu-toggle-lines i {
    top: 4.7px;
    height: 2.6px;
    border-radius: 3px;
  }

  .site-header.is-mobile-menu-open .mobile-menu-toggle-lines i:first-child {
    width: 18px;
    transform: rotate(40deg);
  }

  .site-header.is-mobile-menu-open .mobile-menu-toggle-lines i:nth-child(2) {
    left: 0;
    right: auto;
    width: 18px;
    opacity: 1;
    transform: rotate(-40deg);
  }

  /* ── 社長指摘③④ 2026-07-29: レール（SCROLL 01/06＋大型CTA）を解体
     ・進捗＝画面最下端のヘアラインバー（数字・SCROLL文字なし）
     ・CTA＝右下の小型フローティングピル（常時・親指圏・44px） ── */
  .mobile-story-controls-hero {
    display: none !important;
  }

  .mobile-story-controls {
    position: static;
    display: block;
    height: 0;
  }

  /* 進捗＝「02＋ホームのドットページャ」（2026-07-29 社長確定）
     アプリのホーム月齢ページャと同じ言語: 小ドット＋現在だけ伸びるコーラル */
  .mobile-story-progress {
    position: fixed;
    z-index: 30;
    right: auto;
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    height: auto;
    margin: 0;
  }

  .mobile-story-progress-caption,
  .mobile-story-progress > span:not(.mobile-story-dots) {
    display: none;
  }

  .mobile-story-progress > b {
    display: none;
  }

  .mobile-story-dots {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .mobile-story-dots i {
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 3px;
    background: rgba(237, 144, 115, .32);
    transition: width .28s ease, background-color .28s ease;
  }

  .mobile-story-dots i.is-active {
    width: 18px;
    background: var(--brand-icon-coral, #ED9073);
  }

  /* CTA＝アプリのFAB言語をそのまま着る（2026-07-29 社長確定「アプリとトンマナを合わせる」）
     グラデ・inset白ハイライト・影は .home-demo-fab と同値 */
  .mobile-story-cta {
    position: fixed;
    z-index: 31;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    display: inline-flex;
    width: auto;
    height: 46px;
    padding: 0 22px;
    align-items: center;
    justify-content: center;
    border-radius: 23px;
    /* 2026-08-04: 一度濃くしたが社長指示で元の色へ戻した（FABと同値を優先） */
    background: linear-gradient(150deg, #F0A079 0%, #C2603A 100%);
    color: #FEFDFB;
    font-size: 13.5px;
    font-weight: 800;
    text-decoration: none;
    box-shadow:
      0 8px 22px rgba(194, 96, 58, .42),
      inset 0 1px 0 rgba(255, 255, 255, .4);
  }

  /* ── 実機FB 2026-07-29: ブランドアイコンの頭が切れる
     デッキの27×27正方形が原因（原比率38:44）。比率を保って収める ── */
  .brand-mark {
    width: 27px;
    height: 31px;
  }

  .brand-mark img {
    width: 84px;
  }

  /* ── 実機FB 2026-07-29: ヒーローの実機は右からのスライドをやめ、その場で立ち上がる ── */
  html.motion-ready .hero.is-active + .journey .shared-phone-entrance {
    animation: study-device-rise-in-place 7.8s linear both;
  }

  /* ── 実機FB 2026-07-29: 「あしあととは」等のカテゴリはPC版と同じ貼り紙チップに ── */
  .journey-static-category {
    margin: 0 0 12px;
  }

  .journey-static-category .cat-sheet {
    position: relative;
    display: inline-flex;
    min-height: 30px;
    padding: 0 12px;
    align-items: center;
    border: 0;
    border-radius: 9px;
    background: var(--card, #FEFCFB);
    box-shadow:
      0 1px 2px rgba(60, 45, 25, .08),
      0 6px 16px rgba(60, 45, 25, .07);
    color: var(--ink, #1F1A17);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    transform: rotate(-.6deg);
  }

  /* ── 実機FB 2026-07-29: 01/02/03 はPC版と同じ「淡い大きな番号に機能名を重ねる」に ── */
  .journey-step {
    position: relative;
    margin: 0 0 8px;
    min-height: 34px;
  }

  .journey-step-detail {
    min-height: 34px;
  }

  .journey-step-number {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -1px;
    color: rgba(194, 96, 58, .15);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -.07em;
    line-height: .78;
    transform: translate3d(0, -50%, 0);
  }

  .journey-step-detail strong {
    position: relative;
    z-index: 1;
    margin-left: 30px;
    color: var(--ink, #1F1A17);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .02em;
  }

  /* 引継書§7-3: 本文の孤立行（1文字折り返し）を潰す */
  .journey-copy h2,
  .journey-copy > p,
  .hero-copy h1,
  .hero-mobile-lead {
    text-wrap: pretty;
  }

  .journey-copy h2 {
    letter-spacing: -.02em;
  }
  /* 2026-07-30 社長FB: ロゴの頭が切れる。原比率38:44を保ち、画像は枠に対し265%（PC版と同率） */
  .brand-mark { width: 33px; height: 38px; }
  .brand-mark img { width: 265%; transform: translate(-50%, calc(-50% + 1.2px)); }
  .brand-name { font-size: 19px; }

  /* 2026-07-30 社長FB: 実機内の画面がベゼル外枠に張り付き、右に隙間＋写真が左寄りに見える。
     画面レイヤーをベゼル幅8.9px分だけ内側へ入れ、キャンバスと実画面を一致させる */
  .shared-phone-entrance .journey-home-view,
  .shared-phone-entrance .record-detail-view,
  .shared-phone-entrance .journey-sodachi-view,
  .shared-phone-entrance .sodachi-demo-view { inset: 8.9px; transform: none; }
}

@keyframes study-device-rise-in-place {
  0%,
  32.5% {
    opacity: 0;
    transform: translate3d(0, 38px, 0) scale(.985);
  }

  36.5% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.008);
  }

  38%,
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   本番トップだけに効く既存不具合の是正（2026-07-30 実測）
   561〜1040px で締めの単票チェキ(.journey-final-card)が右へはみ出し、
   文書幅が広がって横スクロールが出ていた（preview-top.html にも同じ症状＝土台由来）。
   overflow:clip はスクロールポートを作らないので sticky を壊さない。
   ═══════════════════════════════════════════════════════════ */
@media (min-width: 561px) and (max-width: 1040px) {
  .journey {
    overflow-x: clip;
  }
}