/* ============================================================
   15-responsive.css
   画面幅ごとの上書きと、動きを控える設定
   読み込み順は index.html の <link> の並びが正。順番を変えると見た目が変わる。
   ============================================================ */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:44px;padding-top:44px}
  .hero-side{width:min(400px,90%)}
  .booth-grid,.stamp-top,.prize,.off-hero,.juku-hero{grid-template-columns:1fr}
  .hl-grid,.off-perks{grid-template-columns:1fr}
  .juku-visual{order:-1;padding:24px}
  .juku-visual img{width:52%}
  .juku-copy{padding:28px 24px}
  .off-visual{order:-1;padding:26px}
  .off-visual img{width:56%}
  .prize-meti{width:52%}
}
@media(max-width:760px){
  .hero-inner{grid-template-columns:minmax(0,1fr)}
  .countdown{display:block;padding:16px 18px 18px}
  .cd-row{gap:2px;margin-top:10px}
  .cd-unit{min-width:0;flex:1}
  .cd-unit b{font-size:clamp(1.9rem,10.5vw,2.9rem)}
  .cd-unit span{font-size:.52rem;letter-spacing:.14em;margin-top:7px}
  .cd-sep{font-size:1.5rem;margin-top:4px}
}
@media(max-width:860px){
  nav.main{gap:18px}
  nav.main a{font-size:.82rem;letter-spacing:.04em}
}
@media(max-width:640px){
  .caliper{display:none}
  .section-inner{padding:66px 20px}
  .off-meta,.juku-meta{grid-template-columns:1fr}
  .org-card{padding:22px 20px}
  .booth-map{padding:16px 12px;border-radius:20px}
  .booth-no-big{padding:24px 22px}
  .org-card .btn{width:100%;justify-content:center}
  .prize{padding:26px 22px}
  .off-copy{padding:26px 22px}
  .steps-head{margin-bottom:6px}
  .puni-hint{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-meti{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-bg #ticks{animation:none}
  .parade-belt{animation:none}
  .puni-hint{animation:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* 320px級の狭い画面だけ、出展表明プレートの内側の余白と字送りを詰める。
   これをしないと「第33回日本国際工作機械見本市」が入りきらず、
   「市」だけが次の行に落ちる。ここ以外には影響しない */
@media(max-width:365px){
  .hero-exhibit{padding:12px 12px}
  .hero-exhibit b{letter-spacing:.08em}
}

/* ============================================================
   ここから下は「スマホ表示の作り込み」。860px以下だけに効かせる。
   PCの見た目は一切変えないこと（変えたら意味がない）
   ============================================================ */
@media(max-width:760px){
  /* ── ヘッダー：ハンバーガーメニュー ── */
  .header-inner{justify-content:space-between;padding:9px 18px;position:relative}
  .nav-brand{
    display:inline-block;font-weight:900;font-size:.9rem;letter-spacing:.08em;
    color:var(--navy);font-family:var(--font-sans);white-space:nowrap;
    font-feature-settings:"palt" 1;
  }
  .nav-toggle{
    display:grid;place-items:center;width:44px;height:44px;margin-right:-8px;
    border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .nav-toggle .bars{display:block;width:22px;height:16px;position:relative}
  .nav-toggle .bars i{
    position:absolute;left:0;width:100%;height:2.5px;border-radius:2px;
    background:var(--navy);transition:transform .28s ease,opacity .2s ease,top .28s ease;
  }
  .nav-toggle .bars i:nth-child(1){top:0}
  .nav-toggle .bars i:nth-child(2){top:6.75px}
  .nav-toggle .bars i:nth-child(3){top:13.5px}
  /* 開いているときは×に */
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(1){top:6.75px;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .bars i:nth-child(3){top:6.75px;transform:rotate(-45deg)}

  /* たたまれたメニュー本体。高さを0→実寸で開閉する */
  nav.main{
    position:absolute;left:0;right:0;top:100%;
    /* nowrap 必須：PC用の flex-wrap:wrap が残ると、高さ0〜開く途中で項目が横の列へ折り返してしまう */
    flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;
    background:var(--white);border-bottom:1px solid var(--line-strong);
    box-shadow:0 18px 30px rgba(17,26,60,.16);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s ease,visibility .3s;
  }
  nav.main.is-open{max-height:70vh;visibility:visible;overflow-y:auto}
  nav.main a{
    padding:16px 22px;border-bottom:1px solid var(--line);
    border-bottom-color:var(--line);font-size:.95rem;letter-spacing:.06em;
  }
  nav.main a:hover,nav.main a:focus-visible{border-bottom-color:var(--line);color:var(--navy);background:var(--paper)}
  .nav-booth{
    margin:14px 22px 18px;justify-content:center;border-radius:12px;
    padding:14px 18px!important;font-size:.9rem;
  }
  .nav-booth:hover{transform:none}
}

@media(max-width:760px){
  /* ── 「3つのお楽しみ」を横3列のシンプルなカードに ──
     幅が110px程度しかないので、番号・絵記号・見出しだけに絞る。
     カード全体がリンクなので、説明文と「詳しくはこちら」は省いてよい */
  .hl-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px}
  .hl-card{padding:14px 10px 24px;border-radius:14px;align-items:center;text-align:center}
  .hl-card::before{height:5px}
  /* 切り取り線をやめて、「押せる・先がある」印の小さな▽を下の中央に置く */
  .hl-card::after{
    left:50%;right:auto;bottom:10px;transform:translateX(-50%);
    width:0;height:0;border:none;
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid var(--navy);opacity:.45;
  }
  .hl-card p,.hl-card .go{display:none}   /* 説明文と折り目タブ */
  .hl-card .mark{                          /* 絵記号を先頭に持ってくる */
    order:-1;position:static;width:44px;height:44px;margin:2px auto 8px;
  }
  .hl-card:hover .mark{transform:none}
  .hl-card .n{
    order:0;align-self:center;margin:0 0 6px;padding:1px 6px 6px;
    font-size:1.15rem;background-size:100% 46%;
  }
  .hl-card .n::after{left:50%;transform:translateX(-50%);width:26px}
  .hl-card h3{order:1;margin:0;font-size:.68rem;line-height:1.5;letter-spacing:.01em}
  .hl-card:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}

  /* ── ブースのカード：東7ホールとE-7021が分かればよいので、小さくまとめる ── */
  .booth-no-big{padding:18px 20px}
  .booth-no-big .k,
  .booth-no-big .note{display:none}       /* 見出しラベルと説明文 */
  .booth-no-big .hall{margin-top:0;font-size:1rem}
  .booth-no-big .no{font-size:2.5rem;margin-top:2px}

  /* ── ORGANIZER：たたんで開けるようにする。右端に向きが変わる▾を出す ── */
  .org-details>summary{
    display:flex;width:100%;padding:13px 0;cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .org-details>summary::after{
    content:'';margin-left:auto;align-self:center;
    width:0;height:0;
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid var(--ink-soft);
    transition:transform .2s ease;
  }
  .org-details[open]>summary::after{transform:rotate(180deg)}
}

@media(max-width:640px){
  /* 主催者カード：協賛の羅列が小さすぎて読めないので、少し大きく・行間を広く */
  .org-card p{font-size:.86rem;line-height:1.95}
  .org-card p.org-note{font-size:.8rem}

  /* 上下の余白を詰めて、縦に長すぎるのを抑える */
  .section-inner{padding:52px 18px}

  /* Q&A：指で押しやすい高さにする */
  .qa details{padding:14px 16px}
  .qa summary{font-size:.92rem;line-height:1.6;padding:4px 38px 4px 0}

  /* フッターのリンクも間隔を広げてタップしやすく */
  footer .flinks{gap:14px 20px}
  footer .flinks a{padding:6px 2px}

  /* 見出しが大きすぎて1かたまりが1行に入らない。画面幅なりに縮める */
  .section-title{font-size:clamp(1.35rem,6.2vw,1.8rem)}
  #stamp .section-title{font-size:clamp(1.4rem,6.6vw,2rem)}
  /* 意味のかたまりで折り返す。PC幅では効かせない（折り返し位置が変わってしまうため） */
  .section-title.phrase>span{display:inline-block}
}

/* ============================================================
   スマホの仕上げ（2026-09-23）
   文章と構成はそのまま。読みやすさ・押しやすさ・見た目の整理だけを行う
   ============================================================ */

/* ── ヘッダーまわり（ハンバーガーの幅＝760px以下） ── */
@media(max-width:760px){
  /* 読み進めた量のバー（JSが --read に 0〜1 を入れる） */
  .read-progress{
    display:block;position:absolute;left:0;right:0;bottom:-1px;height:2px;
    pointer-events:none;overflow:hidden;
  }
  .read-progress i{
    display:block;height:100%;background:var(--yellow);
    transform-origin:0 50%;transform:scaleX(var(--read,0));
  }
  /* メニューの行に「→」の目印。押せる行だとひと目でわかるように */
  nav.main a:not(.nav-booth){display:flex;align-items:center;justify-content:space-between}
  nav.main a:not(.nav-booth)::after{
    content:'';flex:none;width:7px;height:7px;margin-right:4px;
    border-top:2px solid var(--line-strong);border-right:2px solid var(--line-strong);
    transform:rotate(45deg);transition:border-color .2s;
  }
  nav.main a:not(.nav-booth):active::after{border-color:var(--navy)}
  /* メニューを開いている間は後ろを暗くする（ここを触ると閉じる） */
  body::after{
    content:'';position:fixed;inset:0;z-index:110;
    background:rgba(11,23,64,.42);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
  }
  body.nav-open::after{opacity:1;visibility:visible}

  /* お楽しみカード02の見出し：「はかる仲間の／交流会」で折る */
  .hl-card h3>span{display:inline-block}
  .hl-card:active{transform:scale(.97)}
}

@media(max-width:640px){
  /* ── 本文まわりの基本 ── */
  .section-lead{font-size:.94rem;line-height:1.9}
  .mp-tag:empty{margin-bottom:12px}

  /* ── トップ：メティが大きすぎて2画面ぶんになっていたので小さく ── */
  .hero-inner{gap:6px;padding-bottom:0}
  .hero-side{width:min(250px,66%);margin-top:-4px}
  .hero-meti{width:100%}
  .countdown{margin-top:28px}

  /* ── 開催概要の表：ラベルを左、内容を右に並べる（ラベルは2文字なので狭くてよい） ── */
  .spec-head{padding:13px 20px}
  .spec-table tr{
    display:grid;grid-template-columns:3em minmax(0,1fr);column-gap:12px;align-items:baseline;
    padding:13px 20px;border-top:1px solid var(--line);
  }
  .spec-table tr:first-child{border-top:none}
  .spec-table th,.spec-table td,
  .spec-table tr:last-child th,.spec-table tr:last-child td{
    display:block;width:auto;padding:0;border:none;background:none;
  }
  .spec-table th{font-size:.74rem;font-weight:700;letter-spacing:.12em;color:var(--ink-soft)}
  .spec-table th::before{display:none}
  .spec-table td{font-size:.98rem;line-height:1.6}
  .spec-table td>span{display:inline-block}   /* 「（土）」「込）」だけが次の行に落ちないように */
  .spec-table td small{margin-top:3px;font-size:.76rem;line-height:1.6}

  /* 主催者カード：閉じているときに余白が大きく見えていたので詰める */
  .org-card{padding:6px 18px 18px;gap:10px}
  .org-card .btn{padding:12px 18px;font-size:.84rem}
  .org-card p{margin-top:6px}
  .org-details[open]{padding-bottom:4px}

  /* ── スタンプラリー：参加方法 ──
     番号を見出しの横に並べ、本文はカードの幅いっぱいに使う（左66pxの空きをなくす） */
  .step{
    display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:center;
    padding:18px 18px 18px;border-radius:16px;
  }
  .step .n{position:static;width:32px;height:32px;font-size:.9rem}
  .step h4{margin:0;font-size:1.04rem;line-height:1.45}
  .step h4>span{display:inline-block}     /* 狭い画面で「景 / 品」と割れないように */
  .step p{grid-column:1/-1;margin-top:10px;font-size:.88rem;line-height:1.85}
  .step p .em{white-space:nowrap}         /* 「E- / 7021」のような割れを防ぐ */
  /* メティのひとことは吹き出し風の小さな札に */
  .step p .voice{
    display:table;margin:10px 0 0;padding:3px 12px;border-radius:999px;
    background:var(--yellow-soft);color:var(--navy);font-weight:700;font-size:.78rem;line-height:1.7;
  }
  .prize p{font-size:.88rem;line-height:1.9}
  .prize .tags span{font-size:.76rem;padding:4px 12px}
  .prize-meti-wrap::before{width:min(290px,100%)}

  /* ── オフ会 ── */
  .off-visual{padding:18px}
  .off-visual img{width:40%}
  .off-copy{padding:24px 22px 26px}
  .off-meta{margin-top:20px;gap:12px}

  /* タイムライン：目盛りの飾りをやめ、丸い番号と細い線だけに */
  .timeline{margin-top:32px;padding-left:50px}
  .timeline::before{left:16px;top:10px;bottom:10px;width:3px}
  .timeline::after{display:none}
  .tl-item{padding-bottom:26px}
  .tl-item .tick{
    left:-50px;top:0;width:35px;height:35px;padding:0;border-radius:50%;
    display:grid;place-items:center;font-size:.7rem;font-weight:600;
    box-shadow:0 0 0 4px var(--white);
  }
  .tl-item .tick::after{display:none}
  .tl-item h4{font-size:1.04rem;margin:4px 0 6px}
  .tl-item p{font-size:.88rem;line-height:1.85}
  .tl-item p b{white-space:nowrap}        /* 「# / メティオフ会」の割れを防ぐ */

  /* 特典：番号を小さな札にして、カードを低く */
  .off-perks{gap:10px}
  .perk{padding:16px 18px 17px;border-radius:14px}
  .perk .n{
    display:inline-block;background:var(--navy);color:var(--yellow);
    border-radius:999px;padding:1px 10px;font-size:.58rem;letter-spacing:.16em;line-height:1.9;
  }
  .perk h4{margin:8px 0 4px;font-size:.98rem;line-height:1.5}
  .perk p{font-size:.84rem;line-height:1.8}

  .hashtags{gap:7px}
  .hashtags span{font-size:.72rem;padding:5px 12px}

  /* ── 測定義塾 ── */
  .juku-visual{padding:22px}
  .juku-visual img{width:44%}
  .juku-visual::before{width:min(220px,64%)}
  .juku-badge{left:18px;top:18px}
  .juku-copy{padding:24px 22px 28px}
  .juku-copy p{font-size:.9rem;line-height:1.9}

  /* ── Q&A ── */
  .qa{gap:10px}
  .qa details p{font-size:.86rem;line-height:1.85}

  /* ── フッター：右下のノギス表示がないので下の余白は要らない ── */
  footer{padding:44px 20px 48px}
  footer .fname{font-size:.94rem;line-height:1.7}
  footer .fname>span{display:inline-block}

  /* ── ページ先頭へ戻るボタン ── */
  .to-top{
    position:fixed;right:16px;bottom:18px;z-index:105;
    width:46px;height:46px;border-radius:50%;
    display:grid;place-items:center;
    background:var(--navy);color:var(--yellow);
    box-shadow:0 10px 24px rgba(11,23,64,.32),inset 0 0 0 1.5px rgba(245,197,24,.35);
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:opacity .3s ease,transform .3s ease,visibility .3s;
  }
  .to-top.is-show{opacity:1;visibility:visible;transform:none}
  body.nav-open .to-top{opacity:0;visibility:hidden}   /* メニューを開いている間は引っ込める */
  .to-top:active{transform:scale(.94)}
  .to-top svg{width:22px;height:22px;display:block}
}
/* PC・タブレット幅では出さない */
@media(min-width:641px){.to-top{display:none}}

/* 指で操作する端末では、ホバーの動きを出さない（タップ後に浮いたまま残るため） */
@media(hover:none){
  .poster:hover img,.poster:hover .poster-stamp,
  .hl-card:hover .mark,.nav-booth:hover,
  .btn-y:hover,.btn-navy:hover,.btn-ghost:hover,.btn-o:hover{transform:none}
  footer .fsocial a:hover{transform:none;box-shadow:none}
}

/* 320px級：お楽しみカードの幅が88pxまで縮むので、「スタンプラリ / ー」と割れないよう詰める。
   760px以下のカードの指定より後ろに置くこと（前に置くと上書きされて効かない） */
@media(max-width:365px){
  .hl-card{padding-left:6px;padding-right:6px}
  .hl-card h3{font-size:.64rem;letter-spacing:0}
  /* トップの「日本精密測定機器工業会」も「工 / 業会」と割れるので字送りを詰める */
  .hero-org{gap:10px;letter-spacing:.06em}
  .hero-org::before{width:30px}
}