/* ============================================================ Auguri! ─ ベース・共通部品 ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* 紙の地。白ではなくサイトのアイボリーにしておく（2026-09-17）。 帯のつなぎ目が小数になったときに、後ろの地が白い筋として出るのを防ぐ（下の .band + .band を参照）。 帯はすべて自分の地色で塗りつぶすので、ふだんこの色は見えない。 */ html { background: var(--c-ivory); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--c-ivory); color: var(--c-ink); font-family: var(--ff-jp-body); font-size: var(--fs-16); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg, video { max-width: 100%; } img { height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6, p, figure, dl, dd, ul, ol, form { margin: 0; } /* form を足したのは 2026-09-17。ブラウザの既定では
に下マージン（1em）が付く場合があり、 お問い合わせのフォームの帯とフッターのあいだに白い帯ができていた（統合プレビューで発生）。 */ ul, ol { padding: 0; list-style: none; } /* 見出しの太字は使わない（ai は全見出し Regular／Light） */ h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } /* ── アクセシビリティ ── */ :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .skip { position: absolute; left: calc(240 * var(--s)); top: 0; z-index: 1000; padding: 12px 20px; background: var(--c-ink); color: var(--c-white); font-size: var(--fs-14); transform: translateY(-120%); transition: transform 200ms var(--e-out); } .skip:focus { transform: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ── キャンバス：1920 基準・中央寄せ。1920 超は地色で左右を埋める（Q11・2026-09-22 確定） ── */ .page { position: relative; width: 100%; overflow: clip; } /* --s は「縦スクロールバーを除いた表示幅」から出す。 100vw はスクロールバーを含むため、そのままだと帯が数 px はみ出す（横スクロールの原因）。 body をコンテナにして 100cqw（＝body の内容幅）で割る。対象ブラウザはすべて対応済み。 */ @supports (width: 1cqw) { body { container-type: inline-size; --s: clamp(0.62px, calc(100cqw / 1920), 1px); } /* 1920 超は 1920 で止める（2026-09-22） */ } .band { position: relative; width: 100%; } .band__in { position: relative; width: calc(1920 * var(--s)); height: 100%; margin-inline: auto; } /* ── 帯のつなぎ目に、後ろの紙の地が細い筋になって出るのを止める（2026-09-17 高野様ご指摘・お問い合わせ） ── 帯の高さは `1920px を画面幅で割った倍率`から出すので、ほとんどが小数になる （お問い合わせのフォームは中身なりの高さなので、下端が 3478.94px といった値になる）。 小数の境目では、上の帯にも下の帯にも塗られない画素の列ができ、 後ろにある紙の地（白）がそこから透けて **白い筋**に見える。手当ては 2 つ。 ① 紙の地そのものをアイボリーにする（万一のぞいても白くならない） ② 下の帯の地色を **1px だけ上から塗りはじめ**、同じだけ中身を下げる ② は `margin-top:-1px` と `padding-top:1px` の組み合わせ。 中身（.band__in と、その中の絶対配置）が基準にするのは padding の内側なので、 1px 上げて 1px 下げた差し引きで **位置は 1px も動かない**。 高さの数え方を content-box にしてあるので、帯の下端も動かない （＝次の帯がずれていく、ということが起きない）。 */ main.page > .band + .band { box-sizing: content-box; margin-top: -1px; padding-top: 1px; } /* ── 絶対配置の共通 ── */ .band__in > *, .abs { position: absolute; } .t { margin: 0; } .t.nowrap { white-space: nowrap; } .t .ln { display: block; } .rule { pointer-events: none; } .circle { display: block; } /* ── 写真枠プレースホルダー（カット No 表示。差し替え後も枠寸法は CSS 側で固定） ── */ .ph { overflow: hidden; } .ph__label { position: absolute; left: 0; bottom: 0; padding: calc(4 * var(--s)) calc(8 * var(--s)); font-family: var(--ff-en-display); font-size: calc(12 * var(--s)); line-height: 1; letter-spacing: .06em; color: rgba(0,0,0,.55); background: rgba(255,255,255,.35); pointer-events: none; } /* 写真枠の通し番号（2026-09-17 高野様ご指示） 「写真データに No をふっていくので、分かりやすいようにプレースホルダーに数字を」 TOP から順に 1, 2, 3 …。番号のあとに **枠の大きさ**（1920px 基準の実寸）を並べる。 文字は 8px（ご指示）。数字だけ 11px にして、ぱっと拾えるようにしてある。 写真が入ったあとも読めるよう、濃い地に白で置く（左上＝既存のカット No は左下なので重ならない）。 */ .ph__no { position: absolute; left: 0; top: 0; z-index: 2; padding: 3px 6px 4px; /* **画面の幅に関わらず 8px**（--s で縮めない）。作業用の印なので、 窓を小さくしても読めるほうが大事なため。番号だけ 11px。 */ font-family: var(--ff-en-display); font-size: 8px; line-height: 1; letter-spacing: .06em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; /* 数字を大文字の高さでそろえる */ font-feature-settings: "lnum" 1, "tnum" 1; color: #fff; background: rgba(28,28,26,.74); pointer-events: none; } .ph__no b { font-weight: 400; font-size: 11px; letter-spacing: .1em; margin-right: 5px; } /* 写真の動きの印（2026-09-24 高野様「今の動きが入っている最新の箇所を、画像の数字ナンバーの色を変えるなどしてわかりやすく」） 作業用の印。番号の地の色を動きの種類ごとに変え、大きさのあとに動きの名前を添える。 動きの付け方は変えない（見分けるのは、枠に付いている印・クラスだけ）。 ・ズームループ …… 枠の data-motion="zoom-loop"（tools/place_photos.py の ZOOM_LOOP） ・ズームアウト …… photo-motion.js が付ける .pmz（TARGETS） ・動画 ……………… 枠の中の