@charset "utf-8";
/* ONE POLE STYLE（page-onepole.php）専用のスタイル。
 *
 * 骨格は COCKPIT CAMP（cockpit.css）と同じ作りだが、配色と構成は秋向けに起こし直した。
 * 共通の約束事（なぜそうしているか）は cockpit.css の冒頭を見ること。
 *
 *   - すべて .onepole の下にスコープ
 *   - .container はテーマの common.css と衝突するので .op-wrap
 *   - 見出し・段落のブラウザ既定余白を冒頭で復元（テーマのリセットが潰すため）
 *   - ページ内アンカーはテーマの固定ヘッダー(65px / 768px以下 40px)に合わせる
 *
 * 読み込みは functions.php の tf_onepole_styles()。
 */

/* --- ブラウザ既定値の復元（デザイナー指定より前に置く）------------------ */
.onepole h1{margin-bottom:.67em}
.onepole h2{margin-bottom:.83em}
.onepole h3{margin-bottom:1em}
.onepole p{margin-bottom:1em}
.onepole img{margin:0}
.onepole ul{margin:0;padding:0;list-style:none}

/* --- 配色 -----------------------------------------------------------------
 * 素材写真のブラウン幕・オリーブ幕・枯草色から起こした秋の配色。
 * COCKPIT の緑基調（#465241 / #f7f7f4）に対し、
 * 紙を暖色に振り（#f6f1e8）、差し色をテラコッタ（#8c4a2f）に置き換えている。
 */
.onepole{
  --ink:#231f1b;        /* 暖かい黒 */
  --muted:#6f6356;      /* 本文のグレー（暖色寄り） */
  --rust:#8c4a2f;       /* テラコッタ。差し色 */
  --ochre:#b08244;      /* 黄土。番号や罫に使う */
  --moss:#4a5140;       /* 深いオリーブ。幕の色 */
  --paper:#f6f1e8;      /* 暖かい生成り */
  --sand:#ece2d2;       /* 砂色 */
  --line:#dccfba;
  --deep:#2b241d;       /* 濃い帯 */
  --wrap:1180px;
  --pad:clamp(22px,4.8vw,72px);
}
.onepole *,.onepole *:before,.onepole *:after{box-sizing:border-box}
.onepole{
  background:var(--paper);color:var(--ink);
  font-family:"Noto Sans JP","Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.onepole a{color:inherit;text-decoration:none}
.onepole img{display:block;width:100%;height:auto}
.onepole p{line-height:1.95;color:var(--muted);font-size:14px}
.onepole .op-wrap{max-width:var(--wrap);padding:0 var(--pad);margin:auto}

.onepole .overline{
  font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--rust);
  display:block;margin-bottom:10px;
}
.onepole .kicker{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.onepole .kicker .overline{margin:0;white-space:nowrap}
.onepole .kicker:after{content:"";flex:1;height:1px;background:var(--line)}
.onepole h2{
  font-size:clamp(28px,3.3vw,44px);font-weight:850;line-height:1.45;
  letter-spacing:-.05em;color:var(--ink);
}

/* --- ヒーロー -------------------------------------------------------------
 * 写真を全面に敷き、下half に暖色のグラデーションを重ねて文字を乗せる。
 * COCKPIT の左右2分割に対し、こちらは一枚で見せる。
 */
.onepole .hero{position:relative;min-height:clamp(440px,74vh,700px);overflow:hidden;background:var(--deep)}
.onepole .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.onepole .hero:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,36,29,.40) 0%,rgba(43,36,29,.10) 22%,rgba(43,36,29,.58) 58%,rgba(43,36,29,.90) 100%);
}
.onepole .hero-copy{
  position:relative;z-index:1;max-width:var(--wrap);margin:auto;
  padding:0 var(--pad) clamp(46px,6vw,76px);
  min-height:inherit;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;
}
.onepole .hero-copy .overline{color:#e3bd92}
.onepole .hero-copy h1{
  font-size:clamp(42px,6vw,86px);font-weight:900;line-height:1.02;
  letter-spacing:-.05em;margin:0 0 20px;
}
.onepole .hero-copy h1 em{font-style:normal;color:#d79a62}
.onepole .hero-copy .jp{
  font-size:clamp(18px,2vw,27px);font-weight:800;line-height:1.6;
  letter-spacing:-.04em;margin:0 0 14px;
}
.onepole .hero-copy p{color:rgba(255,255,255,.84);max-width:520px;margin:0}

/* --- 導入 ----------------------------------------------------------------- */
.onepole .intro{padding:clamp(66px,8vw,110px) 0}
.onepole .intro-grid{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:clamp(30px,6vw,86px)}
.onepole .intro .lead{
  font-size:clamp(19px,2.1vw,27px);font-weight:800;line-height:1.85;
  letter-spacing:-.04em;color:var(--ink);margin:0;
}
.onepole .intro .body p:last-child{margin-bottom:0}

/* --- パターン -------------------------------------------------------------
 * 以前は中列を下げた「ずらし」にしていたが、左右で写真の高さが揃わないのが
 * 気になるという指摘があったので、素直に揃えた。
 *
 * 本文の長さがカードごとに違うため、カードを等高の flex にして
 * USE GEAR の枠を下端に送っている。これをやめると枠の高さがバラつく。
 */
/* --- 言い切り -------------------------------------------------------------
 * コンセプトを読ませたあと、機能の話に入る前に一度立ち止まらせる。
 * 既に深色の帯（HI-TC）があるので、こちらはモスにして明暗を交互にする。 */
.onepole .statement{
  background:var(--moss);color:#fff;text-align:center;
  padding:clamp(54px,6.5vw,86px) 0;
}
.onepole .statement .overline{color:#cbd3c3}
.onepole .statement h2{color:#fff;margin:16px 0 20px}
.onepole .statement .sub{
  margin:0;font-size:11px;font-weight:800;
  letter-spacing:.3em;color:rgba(255,255,255,.62);
}

/* --- 選ぶ理由 -------------------------------------------------------------
 * コンセプト（01）と作例（03）のあいだに、実務的な根拠を4つ置く。
 * 地色を砂に変えて、前後の生成りから一段だけ沈ませる。 */
.onepole .reasons{background:var(--sand);padding:clamp(60px,7vw,96px) 0}
.onepole .reasons-lead{max-width:620px;margin:0 0 38px;color:var(--muted)}
.onepole .reason-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.onepole .reason{border-top:2px solid var(--ochre);padding-top:15px}
.onepole .reason .num{
  font-size:28px;font-weight:800;line-height:1;
  letter-spacing:-.04em;color:var(--ochre);
}
.onepole .reason .en{
  display:block;margin-top:13px;
  font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--rust);
}
.onepole .reason h3{font-size:17px;font-weight:800;margin:6px 0 9px;color:var(--ink)}
.onepole .reason p{font-size:13px;line-height:1.95;color:var(--muted);margin:0}

/* 上の余白は、もともと直前の .intro の下余白で足りていた。 間に地色の付いた .reasons が入ったことで、その余白が 色のブロックの内側に入ってしまい、見出しが境目に貼り付いた。 他のセクションと同じだけ自前で持たせる。 */
.onepole .patterns{padding:clamp(66px,8vw,110px) 0 clamp(70px,8vw,116px)}
/* 公式原稿に合わせて、幕の中のスタイル（5つ）と張り方（3つ）に分ける。
   各カードには副題（tagline）が付き、土間だけ下位スタイルの箇条書きを持つ。 */
.onepole .patterns-lead{max-width:680px;margin:0 0 42px;color:var(--muted)}
.onepole .patterns-sub{margin:46px 0 16px}
.onepole .patterns-sub .overline{color:var(--ochre)}
/* 土間だけは公式原稿で下位スタイルが2つある。別カードに割ると
   「6つのスタイル」に見えてしまうので、2列ぶんの枠に写真を2枚並べて
   「ひとつの形の、2つの状態」として見せる。5枚では欠けていた
   最終行も、これで 3 + (2+1) ときれいに埋まる。 */
.onepole .pattern.wide{grid-column:span 2}
.onepole .shot-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.onepole .shot-pair .shot{margin:0}

.onepole .pattern .tagline{
  font-size:12px;font-weight:800;color:var(--rust);
  margin:0 0 10px;line-height:1.7;
}
.onepole .pattern .substyle{
  list-style:none;margin:12px 0 0;padding:0;
  display:flex;flex-direction:column;gap:9px;
}
.onepole .pattern .substyle li{
  font-size:12.5px;line-height:1.95;color:var(--muted);
  padding-left:11px;border-left:2px solid var(--line);
}
.onepole .pattern .substyle b{display:block;color:var(--ink);font-weight:800}
.onepole .pattern-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,38px);align-items:stretch;
}

.onepole .pattern{background:transparent;display:flex;flex-direction:column}
.onepole .pattern .shot{position:relative;overflow:hidden;background:var(--sand);aspect-ratio:4/5}
/* 番号を乗せる左上だけ、ごく薄く落とす。
 * 白抜きの番号は空や明るい幕に乗ると消えるため。写真全体は暗くしない。 */
.onepole .pattern .shot:before{
  content:"";position:absolute;left:0;top:0;width:46%;height:34%;z-index:1;
  background:linear-gradient(145deg,rgba(35,31,27,.42),rgba(35,31,27,0) 72%);
  pointer-events:none;
}
.onepole .pattern .shot img{width:100%;height:100%;object-fit:cover}
.onepole .pattern .no{
  position:absolute;left:0;top:0;z-index:1;
  font-size:58px;font-weight:900;line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.95);
  padding:14px 0 0 16px;
  filter:drop-shadow(0 1px 3px rgba(35,31,27,.55));
}
.onepole .pattern .en{
  display:block;margin:20px 0 6px;font-size:11px;font-weight:800;
  letter-spacing:.17em;color:var(--ochre);
}
.onepole .pattern h3{
  font-size:19px;font-weight:850;letter-spacing:-.03em;line-height:1.5;
  margin:0 0 9px;color:var(--ink);
}
.onepole .pattern p{margin:0 0 14px;font-size:13.5px;line-height:1.9}

/* 使うギアのスロット。中身は後から入れる前提で、空でも形が見えるようにしてある */
.onepole .slot{
  margin-top:auto;padding:11px 13px;
  border:1px dashed var(--line);background:rgba(255,255,255,.5);
}
.onepole .slot .slot-label{
  display:block;font-size:10px;font-weight:800;letter-spacing:.14em;
  color:var(--ochre);margin-bottom:6px;
}
.onepole .slot ul{display:flex;flex-wrap:wrap;gap:6px}
.onepole .slot li{
  font-size:11.5px;color:var(--muted);background:var(--sand);
  padding:4px 9px;border-radius:2px;
}
.onepole .slot li.empty{background:transparent;border:1px dashed var(--line);color:#a99382}
/* 商品が入ったタグ。li の余白は a に移して、札全体を押せるようにする。 */
.onepole .slot li.gear{padding:0}
.onepole .slot li.gear a{
  display:block;padding:4px 9px;color:var(--muted);text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.onepole .slot li.gear a:hover{background:var(--ochre);color:#fff}
.onepole .slot li.gear a:focus-visible{outline:2px solid var(--rust);outline-offset:2px}

/* 写真が未入稿のカードでは、この枠は「写真に写っているもの」を
   名乗れないので出さない。写真が入ったら pending を外すだけで戻る。 */
.onepole .pattern.pending .slot{display:none}

/* 撮影待ちのパターン。写真の代わりに枠だけ置く。
 * 番号用の影（.shot:before）は写真が無いと黒い染みに見えるので消し、
 * 番号も白抜きではなく淡い文字に切り替える。 */
.onepole .pattern.pending .shot:before{display:none}
.onepole .pattern.pending .no{
  -webkit-text-stroke:0;color:#c6b7a4;filter:none;font-size:34px;
}
.onepole .pattern.pending .shot{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line);background:rgba(255,255,255,.4);
}
.onepole .pattern.pending .shot span{
  font-size:12px;letter-spacing:.1em;color:#a99382;font-weight:700;
}

/* --- 濃い帯。格子が続いたあとのリズムの切れ目 --------------------------- */
.onepole .band{background:var(--deep);color:#fff;padding:clamp(60px,7vw,96px) 0}
.onepole .band .band-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,46%);
  gap:clamp(30px,5vw,70px);align-items:center;
}
.onepole .band .overline{color:#d79a62}
.onepole .band h2{color:#fff;margin-bottom:16px}
.onepole .band p{color:rgba(255,255,255,.76);margin:0}
.onepole .band .shot{overflow:hidden;aspect-ratio:16/9;background:#1d1813}
.onepole .band .shot img{width:100%;height:100%;object-fit:cover}

/* --- ラインアップ（商品は後から入れる）---------------------------------- */
.onepole .lineup{padding:clamp(66px,8vw,110px) 0}
/* ラインアップは「テント」と「道具」の2段。見出しが
   「組み合わせる、ワンポールと道具。」なので、並びもそこで割る。
   1段にまとめると7枚が 3+3+1 になって最終行に1枚だけ残る。 */
.onepole .lineup-sub{margin:40px 0 0}
.onepole .lineup-sub .overline{color:var(--ochre)}
.onepole .lineup-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:14px}
.onepole .lineup-grid.gear{grid-template-columns:repeat(4,minmax(0,1fr))}
.onepole .product-slot{
  border:1px dashed var(--line);background:rgba(255,255,255,.5);
  padding:26px 22px;min-height:190px;display:flex;flex-direction:column;justify-content:space-between;
}
.onepole .product-slot .en{
  font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--ochre);
}
.onepole .product-slot h3{font-size:17px;margin:8px 0 0;color:#a99382;font-weight:800}
.onepole .product-slot .hint{font-size:11.5px;color:#a99382;margin:0;line-height:1.8}

/* 商品が入った枠。破線は「まだ空」の印なので、埋まったら実線にして
   カード全体をリンクにする。写真は白抜きなので、カードの地も白で合わせる。 */
.onepole a.product-slot{
  text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.onepole .product-slot.is-set{
  border-style:solid;border-color:var(--line);background:#fff;
  justify-content:flex-start;padding:18px 18px 22px;
}
.onepole a.product-slot:hover{
  transform:translateY(-3px);border-color:var(--ochre);
  box-shadow:0 12px 26px rgba(60,45,30,.12);
}
.onepole a.product-slot:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.onepole .product-slot img{display:block;width:100%;height:auto;margin:0 0 14px}
.onepole .product-slot.is-set h3{color:var(--ink);margin:6px 0 8px}
.onepole .product-slot.is-set h3:after{content:"→";margin-left:.45em;color:var(--ochre)}
.onepole a.product-slot:hover h3:after{color:var(--rust)}
.onepole .product-slot.is-set .hint{margin-top:auto}

/* --- 結び ----------------------------------------------------------------- */
/* --- はじめ方 -------------------------------------------------------------
 * 作例（03）は七つが並列なので、どれから手を付けるかが決まらない。
 * ここで時間の順番だけ与えて、結びへ送る。 */
.onepole .steps{padding:clamp(60px,7vw,96px) 0 clamp(70px,8vw,110px)}
.onepole .steps-lead{max-width:640px;margin:0 0 40px;color:var(--muted)}
.onepole .step-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.onepole .step{position:relative;padding-left:0}
.onepole .step .num{
  font-size:40px;font-weight:800;line-height:1;
  letter-spacing:-.05em;color:var(--line);
}
.onepole .step .en{
  display:block;margin-top:10px;
  font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--ochre);
}
.onepole .step h3{font-size:19px;font-weight:800;margin:8px 0 10px;color:var(--ink)}
.onepole .step p{font-size:13.5px;line-height:2;color:var(--muted);margin:0}

/* --- 動画 -----------------------------------------------------------------
 * 4本とも縦撮り（9:16）。カードの 4:5 と並びの呼吸が近いので、
 * パターンと同じ列組みで置ける。
 * poster を敷いて preload="none"。押すまで1バイトも落とさない
 * （4本で 55MB あるため、既定で読ませると重すぎる）。 */
.onepole .movies{background:var(--sand);padding:clamp(60px,7vw,96px) 0}
.onepole .movies-lead{max-width:640px;margin:0 0 38px;color:var(--muted)}
.onepole .movie-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.onepole .movie{margin:0}
.onepole .movie video{
  display:block;width:100%;height:auto;aspect-ratio:9/16;
  background:#1a1612;object-fit:cover;
}
.onepole .movie figcaption{margin-top:12px;line-height:1.75}
.onepole .movie .en{
  display:block;font-size:10px;font-weight:800;
  letter-spacing:.16em;color:var(--ochre);
}
.onepole .movie b{display:block;font-size:15px;font-weight:800;color:var(--ink);margin:4px 0 4px}
.onepole .movie figcaption{font-size:12px;color:var(--muted)}

.onepole .outro{background:var(--moss);color:#fff;padding:clamp(60px,7vw,96px) 0;text-align:center}
.onepole .outro .overline{color:#cbd3c3}
.onepole .outro h2{color:#fff}
.onepole .outro p{color:rgba(255,255,255,.78);max-width:620px;margin:0 auto}
/* 結びの出口。外の商品ページへ直接飛ばさず、ラインアップへ戻す。
   ここで読み手が抱えているのは「買うか」ではなく「どれか」で、
   RG / R1 / 180V の三択がまだ解けていないため。
   コックピット（#gear へのアンカー）と同じ作法。 */
.onepole .outro .op-cta{
  display:inline-block;margin-top:28px;padding:17px 22px;
  color:#fff;text-decoration:none;
  border:1px solid rgba(255,255,255,.45);
  font-size:13px;font-weight:800;letter-spacing:.04em;
  transition:background .18s ease, border-color .18s ease;
}
.onepole .outro .op-cta span{margin-left:.5em}
.onepole .outro .op-cta:hover{background:rgba(255,255,255,.12);border-color:#fff}
.onepole .outro .op-cta:focus-visible{outline:2px solid var(--ochre);outline-offset:3px}

/* --- 折り返し ------------------------------------------------------------- */
@media (max-width:1000px){
  .onepole .intro-grid{grid-template-columns:1fr;gap:26px}
  .onepole .pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .onepole .pattern.wide{grid-column:span 2}
  .onepole .reason-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .onepole .movie-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .onepole .step-grid{grid-template-columns:1fr;gap:30px}
  .onepole .band .band-grid{grid-template-columns:1fr;gap:28px}
  .onepole .lineup-grid, .onepole .lineup-grid.gear{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .onepole .pattern-grid{grid-template-columns:1fr;gap:34px}
  .onepole .pattern.wide{grid-column:span 1}
  .onepole .shot-pair{grid-template-columns:1fr;gap:18px}
  .onepole .reason-grid{grid-template-columns:1fr;gap:26px}
  .onepole .lineup-grid, .onepole .lineup-grid.gear{grid-template-columns:1fr}
  .onepole .pattern .no{font-size:46px}
}

/* --- テーマとの折り合い --------------------------------------------------- */
html{scroll-behavior:smooth;scroll-padding-top:98px}
@media screen and (max-width:768px){
  html{scroll-padding-top:65px}
}

/* --- 写真の拡大（モーダル）-------------------------------------------------
 * パターンの写真6枚をクリックすると、大きい版を重ねて表示する。
 *
 * 画像はボタンで包んである。div に onclick を付けるのではなくボタンにすると、
 * キーボードの Tab と Enter がそのまま効き、読み上げにも「ボタン」と伝わる。
 *
 * 番号と左上の影は pointer-events:none にしてある。これをしないと、
 * 番号の上をクリックしたときだけ反応しない穴ができる。
 *
 * 背景は黒ではなく、このページの暖色の地（--ink）を敷いている。
 * 純黒だと紙色の本文との落差が強すぎて、写真の色も冷たく見える。
 */
.onepole .shot-zoom{
  position:absolute;inset:0;z-index:0;
  display:block;width:100%;height:100%;
  padding:0;margin:0;border:0;background:none;
  cursor:zoom-in;
}
.onepole .shot-zoom:focus-visible{outline:2px solid var(--rust);outline-offset:3px}
.onepole .pattern .no,
.onepole .pattern .shot:before{pointer-events:none}

.onepole .shot-modal{
  /* inset:0 だと、下で確保しているスクロールバーの溝（約15px）が
     幕の外に残り、右端に地の色の筋が出る。100vw は溝を含んだ幅。 */
  position:fixed;top:0;left:0;width:100vw;height:100%;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,54px);
  background:rgba(35,31,27,.94);
  opacity:0;transition:opacity .18s ease;
}
.onepole .shot-modal[hidden]{display:none}
.onepole .shot-modal.is-open{opacity:1}

.onepole .shot-modal-fig{
  margin:0;max-width:min(94vw,760px);max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.onepole .shot-modal-fig img{
  display:block;width:auto;max-width:100%;
  /* 説明文のぶんを引いて、縦に収まるようにする */
  max-height:calc(100vh - clamp(32px,8vw,108px) - 52px);
  object-fit:contain;background:#1a1612;
}
.onepole .shot-modal-fig figcaption{
  color:#e8e0d4;font-size:13px;font-weight:700;letter-spacing:.02em;text-align:center;
}

/* 別カットの送り。写真の左右に置く。1枚しかないスタイルでは
   JS が hidden を立てるので出ない。 */
.onepole .shot-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:48px;height:48px;padding:0;flex:none;line-height:1;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#e8e0d4;
  background:rgba(255,255,255,.08);border:1px solid rgba(232,224,212,.28);
  border-radius:50%;cursor:pointer;z-index:1;
}
.onepole .shot-nav[hidden]{display:none}
.onepole .shot-nav.prev{left:clamp(10px,2.4vw,30px)}
.onepole .shot-nav.next{right:clamp(10px,2.4vw,30px)}
.onepole .shot-nav:hover{background:rgba(255,255,255,.16)}
.onepole .shot-nav:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}

.onepole .shot-modal-close{
  position:absolute;top:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px);
  /* テーマ側の button に padding:.5em 2.5em が当たっていて、
     border-box だと幅指定を食い潰して横長の帯になる。打ち消しておく。 */
  width:44px;height:44px;padding:0;flex:none;line-height:1;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#e8e0d4;
  background:rgba(255,255,255,.08);border:1px solid rgba(232,224,212,.28);
  border-radius:50%;cursor:pointer;
}
.onepole .shot-modal-close:hover{background:rgba(255,255,255,.16)}
.onepole .shot-modal-close:focus-visible{outline:2px solid var(--ochre);outline-offset:2px}

/* 開いている間は背面をスクロールさせない。
 * body に overflow:hidden を当てると、スクロールを持っているのは html の側
 * なので、その量が 0 に丸められて背面がページ先頭まで巻き戻る。
 * 幕の裏で起きるので開くときは見えないが、閉じた瞬間に元の位置へ
 * 戻る動きが見えてしまう。html に当てれば今の位置のまま止まる。
 * スクロールバーが消えるぶんの横ずれを防ぐため、溝は常に空けておく。 */
html{scrollbar-gutter:stable}
html.op-modal-open{overflow:hidden}

/* 幕を張っている間は、サイトの固定ヘッダーを引っ込める。
 * 背景を透かしているので、出したままだと × ボタンが
 * ヘッダー右上のアイコンに重なって読めない。 */
html.op-modal-open .header{opacity:0;pointer-events:none}
.header{transition:opacity .18s ease}

@media (prefers-reduced-motion:reduce){
  .onepole .shot-modal{transition:none}
}