/* /1min 「1分でわかるウララ歯科クリニック」（templates/main/one-minute.mjs） 値は docs/design-main.md §3-3 と capture/main-current/1min/slices・capture/compare/1min/slices の実測。色・書体・余白は tokens.css の変数のみ。 幅の帯: 〜599 / 600〜767 / 768〜1079（展開した折りたたみ＝独立） / 1080〜。100vh・ch・body overflow-x:hidden は使わない。 2026-09-20 PC 幅: 原本の下層ページは本文容器 min(1180, 100vw - 160)（1280 で 1120・1440 以上で 1180）。1min の原本は 1280 しか無い（capture/main-current/1min）ので about/staff の 1440/1920 実測（カード類・帯の中身・下部ナビは 1136、1280 では 1050〜1120）に揃える。 */ /* ---------- PC の本文容器（ヘッダー・フッターの shell には及ぼさない） ---------- */ @media (min-width: 1080px) { .page-one-minute .main { --container: 1180px; --gutter: 80px; } .om-safety .om-card { max-width: 1136px; margin-inline: auto; } /* about の FEATURES カードと同じ 1136（1280 では容器なり 1120） */ .om-bottom-nav .container { max-width: 1136px; } } /* ---------- ページ限定のトークン上書き（tokens.css の --fs-h1/--fs-h2 は clamp の中央値が最小値を上回り、344 で H1 38px・H2 27px になる。 参照は SP 28 / 24。tokens 側が直ったらこの 1 行は削除する） ---------- */ .page-one-minute { --fs-h1: clamp(28px, 1.2rem + 2.2vw, 40px); --fs-h2: clamp(24px, 0.9rem + 1.5vw, 32px); } /* ---------- 見出し直下のページ内目次（参照 344: ピル 156×56・間隔 8・文字 13.5px で 8 文字が 1 行に収まる。768〜1079 は 2×2） ---------- */ @media (max-width: 599px) { .page-one-minute .anchor-nav ul { gap: 8px; } .page-one-minute .anchor-pill { padding: 8px 12px 8px 14px; gap: 4px; letter-spacing: 0; } .page-one-minute .anchor-pill .icon { width: 14px; height: 14px; } } @media (min-width: 768px) and (max-width: 1079px) { .page-one-minute .anchor-nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- 共通（このページ内） ---------- */ .om-center-cta { display: flex; justify-content: center; margin-top: var(--head-gap); } .om-center-cta .btn { width: 100%; max-width: 380px; } /* 〜599 の「お口のお悩み一覧を見る」は共通 .btn の幅（文字＋左 26／右 57＝264）に任せる（下の 〜599 ブロック） */ .om-card { position: relative; } .om-card + .om-card { margin-top: var(--sp-6); } .om-card-head { display: flex; align-items: center; gap: 16px; scroll-margin-top: 24px; } .om-card-head .tooth-badge { flex: none; } .om-card-title { font-size: var(--fs-h2); line-height: 1.5; } .om-card-rule { margin: 20px 0 8px; } /* カード見出しは text-wrap:balance（base.css の h3）だと「ミーレジェッ／トウォッシャー」「セファ／ロ」と語の途中で折れる。参照どおり普通に詰める */ .gear-title, .flow-title { text-wrap: wrap; } /* ---------- 初めての方へ（白いアーチ面。上辺が弧・左右は直線・下は背景へ溶ける。写真は 1080〜 でパネルの左右外側） ---------- */ .om-first { padding-top: clamp(24px, 3vw, 40px); } .om-first .container { position: relative; } /* 〜1079: 画面幅いっぱい（container の外へ gutter ぶん張り出す） */ .om-first .oval { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); padding-block: clamp(56px, 8vw, 120px) clamp(48px, 6vw, 96px); } .om-first .oval::before { inset: 0; border-radius: 50% 50% 0 0 / clamp(48px, 12vw, 200px) clamp(48px, 12vw, 200px) 0 0; background: linear-gradient(180deg, var(--c-white) 0%, var(--c-white) 82%, rgba(255, 255, 255, 0) 100%); } .om-first-inner { max-width: 690px; margin-inline: auto; padding-inline: 8px; } .om-first-head .sec-title { font-size: var(--fs-h2); } .om-first-head .sec-lead { font-size: var(--fs-lead); color: var(--c-orange); line-height: 1.6; letter-spacing: 0.04em; margin-top: clamp(32px, 4vw, 56px); max-width: none; } .om-first-body { color: var(--c-ink); line-height: var(--lh-loose); letter-spacing: 0.04em; } .om-first-body > p + p { margin-top: 1.4em; } .om-first-cta { display: flex; justify-content: center; margin-top: var(--sp-7); } .om-first-cta .btn { width: calc(100% - 40px); max-width: 300px; } .om-first .om-first-photos { display: none; } /* 白カード 2 枚（ご予約について／初診時にお持ちいただくもの）。参照は 344 も 841 も 1 列、1080〜 で 2 列 */ .om-first .om-info { margin-top: var(--sp-6); grid-template-columns: 1fr; } .om-info-card { padding: var(--card-pad); } .om-info-title { font-size: var(--fs-h3); color: var(--c-orange); line-height: 1.5; } .om-info-rule { margin: 16px 0 20px; } .om-info-text, .om-info-list { font-size: var(--fs-small); line-height: 1.9; color: var(--c-ink); } .om-info-list li + li { margin-top: 2px; } /* 768〜1079（展開した折りたたみ）: 写真 4 枚はパネルの上に横 1 列（参照は PC 配置がはみ出して右の 2 枚が画面外。こちらは 4 枚とも見せる） */ @media (min-width: 768px) { .om-first .om-first-photos { display: flex; gap: 12px; width: min(100% - var(--gutter) * 2, var(--container)); margin: 0 auto 32px; } .ft-photo { flex: 1 1 0; min-width: 0; } .ft-photo img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-m); } .om-info-rule { margin: 20px 0 24px; } } /* 1080〜: 幅 960 のアーチ面（弧の高さ 260）。写真は面の左右外側に散らし、画面端に食い込む。面の縁に重なるので写真をパネルより前に置く */ @media (min-width: 1080px) { .om-first { padding-top: 8px; } .om-first .oval { width: min(100%, 960px); margin-inline: auto; padding-inline: 0; overflow: visible; padding-block: 120px 96px; } .om-first .oval::before { border-radius: 50% 50% 0 0 / 260px 260px 0 0; } .om-first .om-first-photos { display: block; position: absolute; inset: 0; z-index: 2; margin: 0; width: auto; pointer-events: none; } .om-first .container { z-index: 1; } .ft-photo { position: absolute; flex: none; } .ft-photo img { height: 100%; aspect-ratio: auto; border-radius: var(--r-l); } .ft-photo-1 { left: 15px; top: 180px; width: 245px; height: 340px; } .ft-photo-2 { left: 0; top: 490px; width: 95px; height: 230px; } .ft-photo-3 { right: -50px; top: 410px; width: 100px; height: 120px; } .ft-photo-4 { right: 0; top: 580px; width: 220px; height: 340px; } .om-first .om-info { margin-top: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); } .om-info-card { padding: 44px 44px 40px; } .om-info-title { font-size: 26px; } .om-info-rule { margin: 16px 0 20px; } } /* ---------- ピーチ帯（初診の流れ・滅菌の流れ）＋ カルーセル ---------- */ .om-band { position: relative; padding-block: var(--section-y-s) var(--section-y); background: linear-gradient(180deg, var(--c-peach-soft) 0%, var(--c-peach-soft) 120px, transparent 420px); } .om-band .om-band-head { display: grid; gap: 16px; padding-top: clamp(32px, 5vw, 72px); } .om-band-title { font-size: var(--fs-h2); } .om-band-lead { font-size: var(--fs-small); line-height: 1.9; color: var(--c-ink); } .om-band-rule { margin-top: 32px; } .flow-ctrl { display: flex; justify-content: flex-end; gap: 12px; width: min(100% - var(--gutter) * 2, var(--container)); margin: 40px auto 0; } .flow-btn { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-line-2); color: var(--c-ink-deep); display: inline-flex; align-items: center; justify-content: center; } .flow-btn .icon { width: 16px; height: 16px; } @media (hover: hover) and (pointer: fine) { .flow-btn:hover { color: var(--c-orange); } } /* 横スクロール箱: 先頭に必ず到達できる（center と overflow-x を併用しない）。歯型バッジは上 8px・左 12px はみ出す（参照 344/841 実測）ので padding で受ける */ .flow-list { padding-top: 16px; padding-bottom: 8px; margin-top: 8px; padding-inline: max(var(--gutter), (100% - var(--container)) / 2); scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2); } .flow-card { position: relative; width: 220px; background: var(--c-white); border-radius: var(--r-m); padding: 40px 24px 32px; display: grid; gap: 12px; align-content: start; } .flow-card .tooth-badge { position: absolute; left: -12px; top: -8px; } .flow-photo img { width: 100%; aspect-ratio: 272 / 200; border-radius: 0; } .flow-title { font-size: 16px; color: var(--c-orange); line-height: 1.6; } .flow-body { font-size: 14px; line-height: 1.8; color: var(--c-ink); } @media (min-width: 600px) { .flow-card { width: 260px; } .flow-title { font-size: 18px; } } @media (min-width: 768px) { .om-band-head { grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; } .flow-card { width: calc((100% - 16px) / 2); } /* 展開した折りたたみは 2 枚見せる */ } /* 1080〜: 参照 1280 は帯の中身が 1050 幅（x 115〜1165）、カード 330・内側余白 40、バッジは角にほぼ揃う（左 4・上 -6）。 1440 以上は about の HISTORY と同じ 1136（min(1136, 100vw - 230) で 1280 は 1050 のまま） */ @media (min-width: 1080px) { .om-band { --container: 1136px; --gutter: 115px; } .om-band-head { grid-template-columns: 400px 1fr; } .om-band-lead { font-size: 16px; max-width: 620px; } .flow-list { gap: 16px; } .flow-card { width: 330px; padding: 40px 40px 40px; } .flow-card .tooth-badge { left: 4px; top: -6px; } .flow-title { font-size: 20px; } } /* ---------- 診療科目（トップと同じ格子。下のグラデ楕円は SAFETY 側の decor） ---------- */ .om-subjects { scroll-margin-top: 16px; padding-bottom: var(--section-y-s); } .om-subjects .igrid-label { font-size: 14px; } .om-subjects .igrid-ic { width: 80px; height: 80px; } /* 参照 344 は約 80px */ @media (min-width: 768px) { .om-subjects .igrid-label { font-size: 16px; } .om-subjects .igrid-ic { width: 96px; height: 96px; } } @media (min-width: 1080px) { .om-subjects .igrid-label { font-size: 18px; } .om-subjects .igrid-ic { width: 100px; height: 100px; } } /* ---------- SAFETY and SECURITY（グラデ楕円の上。見出しは楕円の中ほど＝ボタンから約 230px 下） ---------- */ .om-safety { position: relative; padding-top: 0; } .om-safety .om-safety-decor { position: absolute; left: 50%; top: 0; width: max(140%, 1000px); transform: translateX(-50%); z-index: 0; pointer-events: none; } .om-safety-decor img { width: 100%; height: auto; } .om-safety .container { position: relative; z-index: 1; padding-top: 160px; } .om-safety-head .sec-lead { color: var(--c-ink); font-size: var(--fs-small); line-height: 2; text-align: center; max-width: 620px; } /* 01 滅菌とは: 〜767 は 縦積み（ラベル横長 → イラスト → 本文）、768〜1079 は 3 列を細く、1080〜 は 168 / 240 / 1fr */ .term-list { display: grid; } .term-row { display: grid; gap: 24px; padding: 28px 0; border-bottom: var(--dash); } .term-label { display: flex; align-items: center; min-height: 56px; padding: 8px 20px; background: var(--c-orange); color: var(--c-white); border-radius: var(--r-m); font-size: 20px; letter-spacing: 0.1em; line-height: 1.3; } .term-ic { width: 220px; max-width: 100%; } .term-ic img { width: 100%; height: auto; } .term-body { font-size: var(--fs-small); line-height: 1.9; color: var(--c-ink); } @media (min-width: 768px) { .term-row { grid-template-columns: 120px 180px minmax(0, 1fr); align-items: center; gap: 20px; padding: 20px 0; } .term-label { justify-content: center; min-height: 100px; padding: 8px; text-align: center; } .term-ic { width: 100%; } } @media (min-width: 1080px) { .om-safety .om-card { padding: 64px 96px 80px; } /* 参照 1280: カード内余白 96、バッジまで 64 */ .om-card + .om-card { margin-top: 40px; } .term-row { grid-template-columns: 168px 240px minmax(0, 1fr); gap: 16px 32px; padding: 12px 0; } .term-label { min-height: 136px; font-size: 24px; } .term-body { font-size: 16px; line-height: 1.75; padding-right: 8px; } } /* 02 院内感染防止対策: 〜767 縦積み（写真 → 見出し横書き → 本文。参照 344 の順）、768〜1079 写真｜見出し＋本文、1080〜 縦書き見出し｜写真｜本文。最終行に罫は無い */ .measure-list { display: grid; } .measure-row { display: grid; grid-template-areas: "photo" "title" "body"; gap: 16px; padding: 24px 0; border-bottom: var(--dash); } .measure-row:last-child { border-bottom: 0; } .measure-title { grid-area: title; font-size: 20px; color: var(--c-orange); line-height: 1.5; letter-spacing: 0.06em; } .measure-photo { grid-area: photo; } .measure-photo img { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-m); } .measure-body { grid-area: body; font-size: var(--fs-small); line-height: 1.9; color: var(--c-ink); } @media (min-width: 768px) { .measure-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "photo title" "photo body"; gap: 12px 28px; align-content: start; padding: 32px 0; } } @media (min-width: 1080px) { .measure-row { grid-template-columns: 96px minmax(0, 1fr) 360px; grid-template-areas: "title photo body"; gap: 40px; align-items: start; padding: 32px 0 40px; } .measure-title { writing-mode: vertical-rl; font-size: 22px; letter-spacing: var(--ls-vertical); line-height: 1.8; text-align: left; height: auto; min-height: 320px; margin-left: 8px; } .measure-body { font-size: 16px; line-height: 1.9; } } /* ---------- 白カード 3 列（感染予防機器・安心の最新設備）。行の高さは grid で揃う。参照 1280: 360×?・写真 312×250・行間 36 / 列間 20 ---------- */ .gear-card { display: grid; gap: 12px; align-content: start; background: var(--c-white); border-radius: var(--r-m); padding: 24px; } .gear-photo img { width: 100%; aspect-ratio: 5 / 4; border-radius: var(--r-s); } .gear-title { font-size: 18px; color: var(--c-orange); line-height: 1.5; letter-spacing: 0.04em; } .gear-body { font-size: 14px; line-height: 1.9; color: var(--c-ink); } @media (min-width: 600px) and (max-width: 767px) { .gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .gear-card { padding: 24px 24px 28px; } } @media (min-width: 1080px) { .gear-grid { row-gap: 36px; column-gap: 20px; } .gear-card { padding: 24px 24px 32px; } .gear-title { font-size: 20px; } } /* ---------- CLINIC INTRODUCTION（写真＋テキスト、左右交互。写真の背後にぼかした光） ---------- */ .om-clinic { position: relative; z-index: 1; overflow: clip; padding-bottom: 0; } /* ぼかしの光（120%）と楕円の溢れをこの節で切る（body ではない）。楕円の下に FACILITY の帯が潜るので前面に */ .clinic-blocks { display: grid; gap: var(--section-y-s); } .clinic-block { display: grid; gap: 24px; } .clinic-photos { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: auto auto; gap: 12px; padding-top: 24px; } .clinic-glow { position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--c-hero-top) 0%, var(--c-hero-mid) 35%, transparent 72%); opacity: 0.9; pointer-events: none; z-index: 0; } .clinic-photo { position: relative; z-index: 1; } .clinic-photo img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-l); } .clinic-photo-1 { grid-column: 1 / 6; grid-row: 1; } .clinic-photo-2 { grid-column: 3 / 7; grid-row: 2; margin-top: -48px; } .clinic-photo-2 img { aspect-ratio: 4 / 3; border-radius: var(--r-m); } .clinic-title { font-size: 20px; color: var(--c-orange); line-height: 1.6; } .clinic-body { margin-top: 16px; font-size: var(--fs-small); line-height: 2; color: var(--c-ink); } .clinic-body > p + p { margin-top: 1.2em; } .clinic-closing { text-align: center; margin-top: var(--section-y-s); font-size: 18px; line-height: 1.9; } @media (min-width: 768px) { .clinic-block { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; } .clinic-block.is-reverse .clinic-photos { order: 2; } .clinic-title { font-size: 22px; } } @media (min-width: 1080px) { .clinic-block { grid-template-columns: 560px minmax(0, 1fr); gap: 80px; } .clinic-title { font-size: 26px; } .clinic-body { font-size: 17px; margin-top: 24px; } .clinic-closing { font-size: 20px; } } /* 白い楕円パネル（スマイル 3 個の飾り＋写真 4 枚）。横に溢れる楕円は .clinic-oval で clip（body ではない）。参照 1280: 高さ約 545、締めの文から 185px 下 */ .clinic-oval { margin-top: clamp(48px, 8vw, 120px); } .clinic-oval-panel { padding-block: clamp(56px, 12vw, 170px); } .clinic-oval-panel .oval-inner { width: min(100% - var(--gutter) * 2, var(--container)); margin-inline: auto; } .clinic-smile { position: absolute; z-index: 3; pointer-events: none; } /* 写真（.clinic-gallery z 2）より前（Figma の重なり順。写真の裏に半分隠れて形が崩れて見えていた） */ .clinic-smile img { width: 100%; height: auto; } .clinic-smile-1 { left: 4%; top: 16px; width: 64px; } .clinic-smile-2 { right: 6%; top: 0; width: 80px; } .clinic-smile-3 { left: 30%; bottom: 8px; width: 44px; } .clinic-gallery { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .clinic-gallery img { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-m); } @media (min-width: 768px) { .clinic-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 640px; margin-inline: auto; } /* 841 で楕円が縦に伸びすぎない */ .clinic-smile-1 { left: 2%; top: 24px; width: 120px; } .clinic-smile-2 { right: 2%; top: 8px; width: 150px; } .clinic-smile-3 { left: 20%; bottom: 0; width: 88px; } } @media (min-width: 1080px) { .clinic-oval-panel::before { inset: 0 -10%; } .clinic-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; max-width: none; } .clinic-gallery img { border-radius: var(--r-l); } } /* ---------- FACILITY（ピーチ帯の上。帯は前の楕円の下に潜り込む: 参照 1280 で約 170px、344 で約 50px） ---------- */ .om-facility { --om-overlap: clamp(48px, 12vw, 170px); position: relative; margin-top: calc(-1 * var(--om-overlap)); padding-top: 0; overflow: clip; } .om-facility-band { position: absolute; left: 0; top: 0; width: 100%; height: clamp(360px, 45vw, 640px); z-index: 0; pointer-events: none; } .om-facility-band img { width: 100%; height: 100%; object-fit: cover; object-position: top; } .om-facility .container { position: relative; z-index: 1; padding-top: calc(var(--om-overlap) + clamp(96px, 10vw, 160px)); } /* ---------- 下部ナビ 4 カード（参照 1280: 設備カードから約 200px 下） ---------- */ .page-one-minute .om-bottom-nav { padding-top: clamp(0px, 6vw, 80px); } /* .section + .section より強くする */ /* 固定電話ボタン（右下）と最終行が被らないよう、1079 まで下に余白 */ @media (max-width: 1079px) { .om-bottom-nav { padding-bottom: calc(var(--section-y-s) + 80px); } } /* ============ 〜599 スマホ（2026-09-24 見比べ: capture/sp-compare/main__1min の ip440 / ip393 / fold344）============ 値は原本の実測（画素）と原本 DOM のスタジオ CSS（capture/main-current/1min/dom.html の max-width:540px 分）から。768〜 には効かせない */ @media (max-width: 599px) { .page-one-minute :is(.sec-title, .om-card-title, .measure-title, .clinic-title) { text-wrap: wrap; } /* ---- 見出し＋目次 ---- ABOUT はヘッダー下 44（新 30）、H1 は自然な折り返し（「…歯科ク／リニック」）。H1 → ピル 77。 ピルは x10〜W−10 の 2 列（列間 6・行間 12）、高さ 56、文字 14px・左 18、山形は右 18 */ .page-one-minute .page-head { padding-top: 38px; padding-bottom: 0; } .page-one-minute .page-head h1.sec-title { font-size: 28px; max-width: calc(100% - 40px); } /* 原本の見出し箱は左右 40 内側（W − 80）。440 で「…歯科ク」、344 で「…ウララ」で折れる */ .page-one-minute .page-head .anchor-nav { margin-top: 81px; } /* 2 周目: ピルの上端が原本より 4 上だった（440 実測 318 に対し 314） */ /* 原本（STUDIO）は禁則が normal。「オートクレ／ーブ」のように長音で行を始めるので、strict のままだと 1 行増える（滅菌とは 01 で +24） */ .page-one-minute .main p { line-break: normal; } .page-one-minute .anchor-nav ul { gap: 12px 6px; margin-inline: -10px; } .page-one-minute .anchor-pill { padding: 8px 13px 8px 18px; gap: 2px; font-size: min(14px, calc(2.4vw + 5.3px)); letter-spacing: 0; } /* 344 でも「院内感染予防対策」が 159 幅のピルに 1 行で収まる */ /* ---- 初めての方へ ---- ピルの 44 下に白いアーチ（幅 1.25W・縦半径 122。端で 49 下がる）。頂点 → H2 の上 144。 H2 → キャッチ 40（20px・左揃え）→ 本文 40（13px/2.2・字間 0.06em・#574D45、段落の間は 1 行空き）→ ボタン 40 → アーチの中 100 → 白カード 40 */ .om-first { padding-top: 43px; } /* ピルの下端 → アーチの頂点 44 */ .om-first .smile { display: none; } /* 原本の SP に透かしのスマイルは見えない */ .om-first .oval { padding-block: 144px 100px; } .om-first .oval::before { inset: 0 -12.5%; border-radius: 50% 50% 0 0 / 122px 122px 0 0; } .om-first-inner { padding-inline: 12px; } .om-first-head { margin-bottom: 40px; } .om-first-head .sec-lead { margin-top: 32px; font-size: 20px; line-height: 1.7; letter-spacing: 0; text-align: left; justify-self: stretch; } .om-first-body { font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); } .om-first-body > p + p { margin-top: 28.6px; } .om-first-cta { margin-top: 40px; } .om-first-cta .btn { width: auto; } /* 白カード 2 枚: 角は四角・余白 24、見出し 20px（字間 0）→ 点線 16 → 本文 16（14px/1.7・#574D45）、カードの間 16 */ .om-first .om-info { margin-top: 40px; gap: 16px; } .om-info-card { padding: 24px; border-radius: 0; } .om-info-title { font-size: 20px; line-height: 1.7; letter-spacing: 0; } .om-info-rule { margin: 16px 0; } .om-info-text, .om-info-list { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } .om-info-list li + li { margin-top: 0; } /* ---- ピーチ帯（初診の流れ・滅菌の流れ） ---- 帯は高さ 0.428W（1366×585 の SVG と同じ比）。上 23% はベタの #FFDCBF、55% で地の色へ。 帯の上端 → H2 の上 72、H2 → 説明 32（14px/1.7）、説明（滅菌は H2）→ 点線 40。 点線から 420（滅菌 500）下にカードの下端が揃う（原本は高さ固定の箱の下端にカード列、上端に ‹ ›） */ .page-one-minute .om-band.section { padding-top: 72px; background: linear-gradient(180deg, #FFDCBF 0%, #FFDCBF 23%, #FEE0C7 27%, #FDE6D3 34%, #FAECE2 43%, #F8F1ED 50%, #F8F4F2 55%, #F8F4F2 90%, rgba(249, 246, 244, 0) 94%) top / 100% 42.83vw no-repeat; } .page-one-minute .om-flow.section { padding-bottom: 88px; } /* カード下端 → WORRIES 88（2026-09-28 現行 393・344 を出現アニメの後で実測。以前の 168 は動く前の撮影で 80 下にずれていた） */ .page-one-minute .om-steril.section { padding-bottom: 120px; } /* カード下端 → CLINIC INTRODUCTION 127 */ .om-band .om-band-head { gap: 32px; padding-top: 0; } .om-band-title { font-size: 24px; line-height: 1.7; } .om-band-lead { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } .om-band-rule { margin-top: 40px; } .flow-box { display: flex; flex-direction: column; margin-top: 36px; } .om-flow .flow-box { min-height: 383px; } .om-steril .flow-box { min-height: 463px; } /* ‹ › は見た目 35 の白丸（枠 #C5B5A8・山形は橙）、押せる範囲 44。中心間 45、右端は W − 38（440）／W − 35（344） */ .flow-ctrl { width: auto; margin: 0 calc(20px + 3.1vw - 0.2px) 0 auto; gap: 1px; } /* 原本の箱は高さ固定でカードは下端揃え。カードが高いと ‹ › の裏まで上がる（滅菌の流れ 440: 点線 → カード上端 68・‹ › の下端より 8 上）。 ‹ › を流れから外して（下 −44）カード列を下に付け、ボタンは前面に置く。新は ‹ › の下に列を積んで 31 高くなっていた */ /* 2026-10-05 ユーザー「滅菌の流れ、矢印のボタンがカードに被ってる」: 下 −44 で重ねると、本文のある滅菌の流れ（とくに WebKit は字が高い）で右に覗く次のカードと番号の歯型が ‹ › の裏に入っていた（344〜599 の全幅、初診の流れも 393〜599）。 ‹ › は流れに戻し（下 4）、カード列は今までどおり箱の下端に付ける。箱の高さ（min-height）に収まる幅は見た目が変わらず、収まらない幅だけ箱が伸びる */ .flow-ctrl { position: relative; z-index: 2; margin-bottom: 4px; } /* 2026-09-29 現行どおりに戻した（ユーザー「現状のサイトとレイアウト違う」）: 9/28 は ‹ › の下に 28 空けて、カードが高いと箱を下へ伸ばしていた （滅菌の流れ 393 でカード列が現行より 57 下がり、初診の流れも 390 で 31 伸びて、下の節が全部ずれていた）。 現行は高さ固定の箱の下端にカード列を付け、カードが高いときは上へ伸びて ‹ › の裏に回る（滅菌の流れの 02 の歯型は現行でも ‹ › の裏）。 初診の流れの題は語の途中で折らない（phr の ）ので 390〜599 は現行より 1 行多く、カードの上端が現行より約 30 上がる（下端・下の節は現行と同じ） */ .flow-btn { position: relative; background: none; border: 0; color: var(--c-orange); } .flow-btn::before { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: var(--c-white); border: 1px solid var(--c-line-2); } .flow-btn .icon { position: relative; width: 17px; height: 17px; } @media (hover: hover) and (pointer: fine) { .page-one-minute .flow-btn:hover { background: none; color: var(--c-white); } } @media (hover: hover) and (pointer: fine) { .page-one-minute .flow-btn:hover::before { background: var(--c-orange); border-color: var(--c-orange); } } /* カード列: 左端 x40、カード幅 0.74W − 34.6（440 で 291・344 で 220）、間 16、角丸 16、余白 24/24/32、写真 4:3（角なし）、見出し 18px・字間 0.06em。 歯型バッジ 73×71 はカードの左 −14・上 −18 */ .flow-list { margin-top: auto; padding: 18px 40px 0; scroll-padding-inline: 40px; gap: 16px; } .flow-card { width: calc(74vw - 34.6px); flex: none; padding: 24px 24px 32px; gap: 20px; border-radius: 16px; } .flow-card .tooth-badge { left: -14px; top: -18px; width: 73px; height: 71px; } .flow-card .tooth-badge-txt { font-size: 16px; letter-spacing: 0.1em; padding-left: 0.1em; } .flow-photo img { aspect-ratio: 4 / 3; } .flow-title { font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; } .flow-body { font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--c-ink); } /* 現行は字間なし（body の 0.02em を継ぐと滅菌の流れ 02 が 6 行に増え、カード列が 17 上がっていた） */ /* ---- 診療科目（WORRIES） ---- H2 → 格子 80（字の上端から）、格子は 2 列（列間 8・行間 10）、カード 高 165・角丸 16、 アイコン 99 幅（インク 73）が上 16、文字 14px・字間 0.06em。格子 → ボタン 48、ボタンは文字なりの幅（264） */ .om-subjects { position: relative; z-index: 1; } /* 下の SAFETY の楕円がボタンの裏に回り込む（原本どおり） */ .om-subjects .sec-head { margin-bottom: 48px; } .om-subjects .igrid { gap: 8px; } /* 現行 393・344: 行の間隔 175＝札 167＋8 */ .om-subjects .igrid-card { min-height: 167px; justify-content: flex-start; gap: 6px; padding: 17px 8px 21px; border-radius: 16px; } /* 現行 393・344（アニメ後）: 札 167、文字は札の上 122・下 21（344 で 2 行になる札は 191） */ .om-subjects .igrid-ic { width: 99px; height: 99px; } .om-subjects .igrid-label { font-size: 14px; letter-spacing: 0.06em; line-height: 1.7; } /* 行の中で札の高さをそろえる（原本は 4 行目の 2 枚とも 181。新は右の札だけ 175 だった） */ .om-subjects .igrid-card { height: 100%; } /* 「歯を白くしたい（ホワイトニング）」: 原本は 2 行目も 13px/1.7・#271200（字頭は 1 行目の 19 下）。1 行目の字頭は札の上端から 123（1 行の札は 135）、札の高さ 181 */ .om-subjects .igrid-label:has(small) { margin-top: -12px; } .om-subjects .igrid-label small { margin-top: -6px; font-size: 13px; line-height: 1.7; letter-spacing: 0.02em; color: inherit; } .om-subjects .igrid-card:has(small) { padding-bottom: 22px; } /* 2026-09-28 現行 393・344（アニメ後）: 字頭 110 → （ホワイトニング）128 → 札 172（以前の 181 は 440 の値） */ .om-center-cta { margin-top: 48px; } .om-center-cta .btn { width: auto; max-width: 100%; } /* ---- SAFETY and SECURITY ---- 楕円（about の HISTORY と同じ形）の頂点はボタンの下端の 78 下。頂点 → ラベル 148。 2026-09-28 現行 393・344 を出現アニメの後で実測（ボタン下端 4400 → 頂点 4480 → 字頭 約 4630）。以前の「頂点はボタンの裏・頂点 → ラベル 234」は アニメの前の撮影（字が 80 下にあるとき）の値で、ボタンが楕円に乗って見えていた。 H2 は幅 206 で折る（「患者様の安心・／安全を第一に」）→ 説明 32（13px/2.2）→ カード 64 */ .page-one-minute .om-safety.section { margin-top: -55px; padding-top: 55px; padding-bottom: 80px; } /* 節の上端はボタン下端の 7 上（楕円は ::before の top で下げる）。最後のカード → 感染予防機器 +5 */ .om-safety .om-safety-decor { display: none; } .om-safety::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 85px; width: calc(128.1vw - 44.8px); aspect-ratio: 2 / 1; transform: translateX(-50%); border-radius: 50%; pointer-events: none; background: linear-gradient(180deg, #FFF4C6 0%, #FFF0C3 5.8%, #FFE9BF 11.7%, #FFE3BF 17.5%, #FFDEC0 23.3%, #FEE0C7 29.2%, #FDE5D1 35%, #FBE8DA 40.9%, #FAECE2 46.7%, #F8F1ED 52.5%, #F8F4F2 58.4%, #F8F4F2 100%); } .om-safety .container { padding-top: 175px; } /* 節の上端 → SAFETY の字頭 約 233（見出しの位置は現行と ±5 で一致。楕円だけ上の top: 85px で下げる） */ .om-safety-head { margin-bottom: 64px; } .om-safety-head .sec-title { max-width: 206px; text-wrap: balance; } /* 2026-09-29「患者様」に統一して 1 字減り「患者様の安心・安／全を第一に」と語の中で折れたので、2 行をそろえて「・」の後で折る */ .om-safety-head .sec-lead { margin-top: 24px; font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); } /* カード: 角丸 16・余白 56/20/40（02 は下 56）、間 56。見出し: 歯型 41×40＋24px（上揃え）→ 点線 32 → 中身 32 */ .om-safety .om-card { padding: 56px 20px 40px; border-radius: 16px; } .om-safety .om-card + .om-card { margin-top: 56px; padding-bottom: 56px; } .om-card-head { align-items: flex-start; gap: 16px; } .om-card-head .tooth-badge { width: 41px; height: 40px; } .om-card-head .tooth-badge-txt { font-size: 16px; letter-spacing: 0.1em; padding: 0 0 3px 0.1em; } .om-card-title { font-size: 24px; line-height: 1.7; letter-spacing: 0.06em; } .om-card-rule { margin: 32px 0; } /* 01 滅菌とは: 橙の帯（高 50・角丸 8・20px）→ 24 → イラスト（幅 80%・中央）→ 48 → 本文（14px/1.7・#574D45）→ 次の帯まで 56。 原本は 3 つ目（消毒）の下にだけ点線がある（本文の 10 下、次の帯の 33 上） */ .term-row { gap: 24px; padding: 0 0 24px; border-bottom: 0; } .term-row + .term-row { margin-top: 32px; } .term-row:nth-child(3) { padding-bottom: 23px; border-bottom: var(--dash); } /* 2 周目: 本文の字の下端 → 点線 29（新 16） */ .term-row:last-child { padding-bottom: 23px; } /* 最後の行の字 → カード下端 +23（440 実測 82、新 59） */ .term-label { min-height: 50px; padding: 8px 20px; border-radius: 8px; font-size: 20px; line-height: 1.7; letter-spacing: 0; } .term-ic { width: 80%; justify-self: center; } .term-body { margin-top: 24px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } /* 02 院内感染防止対策: 写真（元の縦横比・角丸 16）→ 12 → 見出し 20px/1.2・字間 0.1em → 20 → 本文 14px/1.7（#271200）。行の間は点線＋上下 32 */ .measure-row { gap: 0; padding: 32px 0; } .measure-row:first-child { padding-top: 0; } .measure-row:last-child { padding-bottom: 0; } .measure-photo img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; border-radius: 16px; } /* 現行の 2 枚はどちらも 3:2。仮の差し替え写真（4:3）も同じ枠に切り抜く */ .measure-title { margin-top: 12px; font-size: 20px; line-height: 1.2; letter-spacing: 0.1em; } .measure-body { margin-top: 20px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); } /* ---- 白カード 1 列（感染予防機器・安心の最新設備）: 余白 24/20・角丸 16、写真は元の縦横比（角丸 16）→ 28 → 見出し 18px・字間 0.06em（行送り 32）→ 16 → 本文 14px/1.7・#574D45 ---- */ .gear-card { gap: 0; padding: 24px 20px 25px; border-radius: 16px; } /* 本文の下端 → カードの下端 24（現行 393 実測。24 だと端数で 1 ずつ短く、21 枚で 15 ずれた） */ .gear-photo img { aspect-ratio: auto 4 / 3; height: auto; border-radius: 16px; } .gear-title { margin-top: 28px; font-size: 18px; line-height: 1.7; letter-spacing: 0.06em; } /* 現行 393・344: 1 行 31・2 行 61・3 行 92（18px/1.7）。1.75 だと見出しの行数ぶん伸びていた */ .gear-body { margin-top: 15px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } .page-one-minute .om-equipment.section { padding-bottom: 144px; } /* 最後のカード → 滅菌の流れの帯 145 */ /* ---- CLINIC INTRODUCTION ---- 見出し → 40。 1 つ目: 写真 60%（4:3）の下に 50%（4:3）を右寄せで 56 重ね、光は 2 枚目の右 32 外・下 12 まで。写真 → 見出し 50。 2 つ目: 45%（縦長・上 122 下げ）と 40%+24（縦長・左 −24 で重ねる）の横並びを中央に、光は 1 枚目の左 +21〜右 +19・上 −22〜下 −10。 見出し 20px（字間 0）→ 本文 23（13px/2.2・#271200、段落の間は 1 行空き）。ブロックの間 44、締めの文は 48 下・17px/2.2・左揃え */ .om-clinic .sec-head { margin-bottom: 40px; } .clinic-blocks { gap: 44px; } .clinic-block { gap: 50px; } .clinic-photos { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding-top: 0; } .clinic-photo img { aspect-ratio: auto 4 / 3; height: auto; border-radius: 16px; } .clinic-photo-2 img { aspect-ratio: auto 4 / 3; border-radius: 16px; } .clinic-photo-1 { width: 60%; } .clinic-photo-2 { width: 50%; margin-top: -56px; align-self: flex-end; } .clinic-glow { left: auto; top: auto; right: -32px; bottom: -12px; width: 50%; height: auto; aspect-ratio: 1.22; transform: none; border-radius: 16px; background: #FFE8CC; filter: blur(16px); opacity: 1; } .clinic-block.is-reverse .clinic-photos { flex-direction: row; justify-content: center; align-items: flex-start; } .clinic-block.is-reverse .clinic-photo-1 { width: 45%; margin-top: 122px; } .clinic-block.is-reverse .clinic-photo-2 { width: calc(40% + 24px); margin: 0 0 0 -24px; align-self: flex-start; } .clinic-block.is-reverse .clinic-glow { right: auto; bottom: auto; left: calc(7.5% + 21px); top: 100px; width: calc(45% - 2px); aspect-ratio: 0.73; } .clinic-title { font-size: 20px; line-height: 1.7; letter-spacing: 0; } .clinic-body { margin-top: 23px; font-size: 13px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); } .clinic-body > p + p { margin-top: 28.6px; } .clinic-closing { margin-top: 48px; text-align: left; font-size: 17px; line-height: 2.2; letter-spacing: 0.06em; } /* 白い楕円: 幅 1.5W・高さ = 上下 80 ＋写真の段（226 幅×4 枚・間 24、2・4 枚目は 24 下げ）。締めの文の 79 下。 スマイル 3 個は楕円の箱基準で 80px 右 144・上 0／60px 左 150・上 47／40px 左 237・下 36 */ .clinic-oval { margin-top: 79px; } .clinic-oval-panel { padding-block: 80px; } .clinic-oval-panel::before { inset: 0 -25%; border-radius: 50%; } .clinic-oval-panel .oval-inner { width: 100%; position: static; } .clinic-gallery { display: flex; align-items: flex-start; gap: 24px; width: 976px; margin-left: calc(50% - 488px); grid-template-columns: none; } .clinic-gallery li { flex: none; width: 226px; } .clinic-gallery li:nth-child(even) { margin-top: 24px; } .clinic-gallery img { aspect-ratio: auto 4 / 3; height: auto; border-radius: 16px; } /* 577〜599 で右上のスマイルが画面の右端で欠けていた（599 で 5.8。right が負になる）→ 画面の端の 8 内側で止める（544 以下は現行どおりの位置のまま） */ .clinic-smile-1 { left: auto; right: max(calc(144px - 25%), 8px); top: 0; width: 80px; } .clinic-smile-2 { left: max(calc(150px - 25%), 8px); right: auto; top: 47px; width: 60px; } .clinic-smile-3 { left: calc(237px - 25%); bottom: 36px; width: 40px; } /* ---- FACILITY ---- 帯（1366×1247 の SVG をそのまま幅 100%）は楕円の下端の 160 上から始まり、帯の上端 → ラベル 287 */ .om-facility { --om-overlap: 160px; } .om-facility-band { height: auto; } .om-facility-band img { height: auto; object-fit: fill; } .om-facility .container { padding-top: 280px; } /* ---- 下部ナビ（about と同じ原本値）: 設備カード → 146、最後のカード → 口 26 ---- */ .page-one-minute .om-bottom-nav { padding-top: 64px; padding-bottom: 41px; } /* 最後の設備カード → 下部ナビ 144（現行 393・344 実測。以前は 134） */ } /* ============ 1080〜 Figma pc/1min 490:2689（医院「📍デザイン_作業中」・1366 幅）に合わせる（2026-09-25）============ 値は Figma の数値（ノード ID を併記）。1366 で位置・大きさ・余白を一致させ、ほかの PC 幅は同じ構造のまま中央の 1136 容器で伸縮する。 Figma の仮文言・仮写真は使わない（中身は content/main/one-minute.json のまま）。帯・楕円の色は Figma の塗り （#FFF9CC → #FFE2CA 36.8% → #F9F6F4 82.7%。グラデの向きは transform から縦＝高さの 20% で #FFE2CA、52% で地の色）。 初診の流れ・滅菌の流れの帯（Rectangle 206・Icon 632:8245）だけは #FFF9CC の段が無く、上端から 20% まで #FFE2CA のベタ。 粒（2026-09-28）: 4 つの帯（初診の流れ・SAFETY の楕円・滅菌の流れ・FACILITY）の 2 枚目の塗りは黒の雑音 PNG（b61a10c7）を不透明度 40%・OVERLAY。 /about と同じ assets/img/ab-grain.png（102.4px のタイル）を overlay で重ね、3 枚目の塗り（高さの 83.7〜93.5% で地の色へ溶ける）を一番上に置いて、 帯の下では粒を隠す（about.css の MISSION・HISTORY と同じ組み方）。 ここより上の 1080〜 の指定は、この節で上書きする（〜1079 は変えない）。 */ @media (min-width: 1080px) { .page-one-minute { --om-y: #FFF9CC; --om-p: #FFE2CA; } .page-one-minute .main { --container: 1136px; } /* ---- catch 505:10930（0〜650）: 英字 Roboto 18px 字間 25% の上端 y202 → H1 40px（y233・高さ 68）→ 目次 y402（Frame 219: 272×56 ×4・間 16） ---- */ .page-one-minute .page-head { padding: 113px 0 62px; } /* 89（ヘッダー）+ 113 = 202。目次の下端 458 → 白いアーチの頂点 520 */ .page-one-minute .page-head .sec-label { font-size: 18px; } .page-one-minute .page-head .anchor-nav { margin-top: 101px; } /* H1 の下端 301 → 402 */ .page-one-minute .anchor-nav ul { gap: 16px; } .page-one-minute .anchor-nav li { flex: 0 1 272px; min-width: 0; } /* 1366 で 272×4＋16×3 = 1136。1080 では 4 個が 1 行のまま縮む */ /* anchor link _btn 482:3243: 白・角丸 100・左 32 右 18 上下 12・17px 字間 2%・右に 32 の丸（中に 13×7 の山形） */ .page-one-minute .anchor-pill { min-height: 56px; padding: 12px 18px 12px 32px; gap: 10px; font-size: 17px; letter-spacing: 0.02em; line-height: 1.7; } .page-one-minute .anchor-pill .icon { width: 32px; height: 32px; padding: 3px; } /* 1080〜1199 で 4 個目「最新設備」だけ次の行に落ちていた（共通部品の flex-wrap: wrap は縮む前に折り返す）→ 1 行に固定して縮める */ .page-one-minute .anchor-nav ul { flex-wrap: nowrap; } /* ---- 初めての方へ ---- 白いアーチ 631:8032: 963×1113（x211・y520）、角丸 487.5＝上辺は半円、塗りは白 71.5% → 透明 100%。 H2 32px は頂点の 120 下 → 52 → キャッチ 26px 字間 6%（オレンジ）→ 52 → 本文 686 幅 16px/2.2 字間 6% #574D45 → 56 → ボタン 280×79 → 96 → アーチの下端＝白カードの上端 */ .page-one-minute .om-first { padding-top: 0; overflow-x: clip; overflow-y: visible; } /* 上に出るスマイル（y409）を切らない。横だけ切る */ .page-one-minute .om-first .oval { width: min(100%, 963px); padding-block: 120px 96px; } /* 面だけ 9.5 右へ（Figma 631:8032 は x211＝中央より 9.5 右。写真・スマイルは Figma の座標で置いてあるので、面との重なり方をそろえる。 クリニック紹介の楕円の 8 右と同じ扱い）。中の見出し・本文は Figma でも中央なのでずらさない。演出の translate と重ねないよう inset でずらす */ .page-one-minute .om-first .oval::before { inset: 0 -9.5px 0 9.5px; border-radius: 487.5px 487.5px 0 0; background: linear-gradient(180deg, var(--c-white) 0%, var(--c-white) 71.5%, rgba(255, 255, 255, 0) 100%); } .page-one-minute .om-first-inner { max-width: 686px; padding-inline: 0; } .page-one-minute .om-first-head { margin-bottom: 52px; } .page-one-minute .om-first-head .sec-lead { margin-top: 52px; font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-orange); } .page-one-minute .om-first-body { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); } .page-one-minute .om-first-body > p + p { margin-top: 35.2px; } /* 段落の間は 1 行空き（Figma の本文は空行で区切る） */ .page-one-minute .om-first-cta { margin-top: 56px; } .page-one-minute .om-first-cta .btn { width: auto; max-width: none; } /* スマイル 527:3784（344×310・#F1EAE5）: x−16・y409＝アーチの頂点の 111 上 */ .page-one-minute .om-first .smile { width: 344px; left: -16px; top: -111px; max-width: none; } /* smileDecor の style="--smile-w:620px" より強くするため width で指定 */ /* 写真 4 枚（image 4 / 6 / 18 / 5）。位置は 1366 の Figma 座標を画面中央基準に直したもの（アーチとの関係を保って PC 幅で伸縮）。横は .om-first-photos で切る */ .page-one-minute .om-first .om-first-photos { overflow: clip; } .page-one-minute .ft-photo img { height: 100%; aspect-ratio: auto; object-fit: cover; } .page-one-minute .ft-photo-1 { left: calc(50% - 629px); top: 134px; width: 251px; height: 375px; right: auto; } .page-one-minute .ft-photo-1 img { border-radius: 30px; } /* 1080〜1266（開いた折りたたみの横 1104 を含む）で 2 枚目が左端の 1〜39 の帯、3 枚目が画面の外／右端の帯になっていた → スマイルと同じく画面の端で止める （2 枚目は 56・3 枚目は 64 を必ず見せる。1366 以上は Figma の座標のまま） */ .page-one-minute .ft-photo-2 { left: max(calc(50% - 715px), -115px); top: 475px; width: 171px; height: 255px; right: auto; } .page-one-minute .ft-photo-2 img { border-radius: 30px; } .page-one-minute .ft-photo-3 { left: min(calc(50% + 594px), calc(100% - 64px)); top: 289px; width: 122px; height: 184px; right: auto; } .page-one-minute .ft-photo-3 img { border-radius: 18px; } .page-one-minute .ft-photo-4 { left: calc(50% + 419px); top: 560px; width: 238px; height: 358px; right: auto; } .page-one-minute .ft-photo-4 img { border-radius: 30px; } /* 白カード 2 枚（Frame 238 / 237）: 560×254・間 16・角は四角・余白 上 32 左右 44 下 38（stackVerticalPadding 32・stackPaddingBottom 38）・見出し 26px 字間 6% → 16 → 点線 → 16 → 本文 16px/1.7 字間 0 #574D45。 以前は上 38・下 32（現行の位置）で、見出しが Figma より 6 下がっていた */ .page-one-minute .om-first .om-info { max-width: 1136px; margin: 0 auto; gap: 16px; } .page-one-minute .om-info-card { min-height: 254px; padding: 32px 44px 38px; border-radius: 0; } .page-one-minute .om-info-title { font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; color: var(--c-ink-deep); } /* Figma 490:3650・490:3653 は #271200（〜1079 は現行どおり橙）。本文は Figma が仮の Inter #000 なので #574D45 のまま */ .page-one-minute .om-info-rule { margin: 16px 0; } .page-one-minute :is(.om-info-text, .om-info-list) { font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } .page-one-minute .om-info-list li + li { margin-top: 0; } /* ---- 初診の流れ／滅菌の流れ（Rectangle 206・Icon 632:8245）: 帯 1366×585（滅菌は 620）。 初診: 帯の上端 → H2 78・説明は右端揃え 725 幅（16px/1.7 字間 0 #574D45）→ 40 → 点線 1136 → 40 → ‹ › 45 丸（線 #C5B5A8・間 32）→ 40 → カード。 カード Frame 46 490:3676: 368 幅・間 24・角丸 16・余白 上 24 左右 24 下 40・写真 320×213 角丸 16 → 24 → 見出し 20px 字間 6% → 24 → 本文 16px/1.7。歯型 68×71 はカードの左 −10・上 −17 ---- */ /* 帯: #FFE2CA のベタ（上端 → 高さの 20%）→ 52% で地の色 ＋ 粒 ＋ 83.7〜93.5% で地の色へ溶かす（その下は地の色で粒を隠す）。初診 585 高・滅菌 620 高 */ .page-one-minute .om-band { --container: 1136px; --gutter: 115px; background: linear-gradient(180deg, rgba(249, 246, 244, 0) 490px, var(--c-cream) 547px), url("/assets/img/ab-grain.32e4c43c3e.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, var(--om-p) 116px, var(--c-cream) 304px); background-blend-mode: normal, overlay, normal; } .page-one-minute .om-steril { background: linear-gradient(180deg, rgba(249, 246, 244, 0) 519px, var(--c-cream) 580px), url("/assets/img/ab-grain.32e4c43c3e.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, var(--om-p) 123px, var(--c-cream) 322px); background-blend-mode: normal, overlay, normal; } .page-one-minute .om-band.section { padding-bottom: 0; } .page-one-minute .om-band .om-band-head { grid-template-columns: auto minmax(0, 725px); justify-content: space-between; gap: 24px; padding-top: 0; } /* 1366: H2 は左端、説明は右端揃えの 725 幅（x526）。狭い PC 幅では説明が縮む */ .page-one-minute .om-band-title { font-size: 32px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .om-band-lead { font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); max-width: none; } .page-one-minute .om-band-rule { margin-top: 40px; } .page-one-minute .flow-ctrl { gap: 32px; margin-top: 40px; } .page-one-minute .flow-btn { width: 45px; height: 45px; border-color: var(--c-line-2); } .page-one-minute .flow-list { gap: 24px; margin-top: 23px; padding-top: 17px; padding-bottom: 0; } .page-one-minute .flow-card { width: 368px; flex: none; padding: 24px 24px 40px; gap: 24px; border-radius: 16px; } .page-one-minute .om-steril .flow-card { min-height: 501px; } /* Frame 46 は 368×501 固定（本文 4 行の下に 74 空く）。初診の流れは本文が無いので中身なり（501 にすると写真と見出しの下が 130 空く） */ .page-one-minute .flow-card .tooth-badge { left: -10px; top: -17px; width: 68px; height: 71px; } .page-one-minute .flow-card .tooth-badge-txt { font-size: 24px; letter-spacing: 0.15em; padding-left: 0.15em; } .page-one-minute .flow-photo img { aspect-ratio: 320 / 213; border-radius: 16px; object-fit: cover; } .page-one-minute .flow-title { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .flow-body { font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } /* ---- 診療科目（Group 190）: 226×226・間 24・4 列（976 幅）。アイコン 140 はカードの上 30、文字 20px/1.7 字間 6% はカードの上 168。 「歯を白くしたい」は上 156 ＋（ホワイトニング）17px 字間 2% が上 185 ---- */ .page-one-minute .om-subjects .sec-head { margin-bottom: 56px; } .page-one-minute .om-subjects .igrid { gap: 24px; } .page-one-minute .om-subjects .igrid-card { min-height: 226px; justify-content: flex-start; gap: 0; padding: 30px 8px 0; border-radius: 16px; } .page-one-minute .om-subjects .igrid-ic { width: 140px; height: 140px; } .page-one-minute .om-subjects .igrid-label { margin-top: -2px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .om-subjects .igrid-label:has(small) { margin-top: -14px; } .page-one-minute .om-subjects .igrid-label small { margin-top: -5px; font-size: 17px; line-height: 1.7; letter-spacing: 0.02em; color: inherit; } .page-one-minute .om-center-cta { margin-top: 56px; } .page-one-minute .om-center-cta .btn { width: auto; max-width: none; } /* ---- SAFETY and SECURITY（Union 505:11270）: 楕円 1549×774（中心 = 画面中央・上端がこの節の上端）＋ 上端から 275 下の全幅の帯（〜754）。 楕円の頂点 → 英字 141 → H2 → 40 → 説明 686 幅 16px/2.2 字間 6% #574D45（中央）→ 89 → カード ---- */ .page-one-minute .om-safety .om-safety-decor { display: none; } .page-one-minute .om-safety::before, .page-one-minute .om-safety::after { content: ""; position: absolute; z-index: 0; pointer-events: none; background-blend-mode: normal, overlay, normal; } .page-one-minute .om-safety::before { left: calc(50% - 774.5px); top: 0; width: 1549px; height: 774px; border-radius: 50%; background: linear-gradient(180deg, rgba(249, 246, 244, 0) 648px, var(--c-cream) 724px), url("/assets/img/ab-grain.32e4c43c3e.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, #FFF3CB 0, var(--om-p) 154px, var(--c-cream) 402px); } /* 帯（Rectangle 172）の粒は楕円の粒と同じ原点（楕円の左上）から敷いて、重なりの境目で模様がずれないようにする（calc の 50% は（幅 − 102.4）の半分なので 774.5 − 51.2） */ .page-one-minute .om-safety::after { left: 0; right: 0; top: 275px; height: 479px; background: linear-gradient(180deg, rgba(249, 246, 244, 0) 373px, var(--c-cream) 449px), url("/assets/img/ab-grain.32e4c43c3e.png") calc(50% - 723.3px) -275px / 102.4px 102.4px, linear-gradient(180deg, #FFF3CB -275px, var(--om-p) -121px, var(--c-cream) 127px); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px); mask-image: linear-gradient(180deg, transparent 0, #000 80px); } /* 1366 では上端は楕円に隠れる。1440〜 で楕円の外に出る帯の上端の直線をぼかす */ .page-one-minute .om-safety .container { padding-top: 141px; } .page-one-minute .om-safety-head { margin-bottom: 89px; } .page-one-minute .om-safety-head .sec-lead { margin-top: 40px; max-width: 686px; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); } /* カード（長方形 1 490:3829・Container 490:3920）: 1136 幅・角丸 16・白。01 は余白 上 47 左右 60 下 124、02 は 上 48 左 91 右 101 下 98。カードの間 53 */ .page-one-minute .om-safety .om-card { max-width: 1136px; border-radius: 16px; padding: 47px 60px 124px; } .page-one-minute .om-safety .om-card + .om-card { margin-top: 53px; padding: 48px 101px 98px 91px; } /* 見出し title 501:2469: 歯型 68×66（01 は Roboto 24 字間 15%）→ 24 → H 32px/1.7 字間 6% #271200。→ 32 → 点線 */ .page-one-minute .om-card-head { gap: 24px; } .page-one-minute .om-card-head .tooth-badge { width: 68px; height: 66px; } .page-one-minute .om-card-head .tooth-badge-txt { font-size: 24px; letter-spacing: 0.15em; padding-left: 0.15em; } .page-one-minute .om-card-title { font-size: 32px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .om-card-rule { margin: 32px 0 0; } /* 01 滅菌とは（表 659:8058 × 5）: 点線 → 76 → 945 幅の表（カードの内側からさらに左 35 右 36）。行 160: 橙の札 174×150（角丸 17・26px 字間 6% 白・上下 5） → イラスト 216×79（中央）→ 34 → 本文 521 幅 16px/1.7 字間 0 #574D45（縦中央）。行の下の点線は札の右 15 から右端まで（756） */ .page-one-minute .term-list { margin: 76px 36px 0 35px; } .page-one-minute .term-row { position: relative; grid-template-columns: 174px 216px minmax(0, 1fr); gap: 0; min-height: 160px; padding: 5px 0; border-bottom: 0; align-items: center; } .page-one-minute .term-row::after { content: ""; position: absolute; left: 189px; right: 0; bottom: 0; border-top: var(--dash); } .page-one-minute .term-label { min-height: 150px; padding: 8px; border-radius: 17px; font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .term-ic { width: 216px; } .page-one-minute .term-body { margin-left: 34px; padding-right: 0; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } /* 02 院内感染防止対策（text 501:2369）: 点線 → 32 → 行 944×265: 縦書き見出し 26px・1 字 1 行で字送り 31.2（66 幅・縦中央）→ 22 → 写真 397×265 角丸 16 → 89 → 本文 370 幅 16px/1.7 字間 0 #271200（縦中央）。行の間は 32 ＋ 点線 ＋ 32 */ /* 列は 66 ＋ 22 ＋ 397 ＋ 89 ＋ 370 = 944（1366）。1366 未満は fr の比のまま縮む（1080 で写真 335・本文 313） */ .page-one-minute .measure-row { grid-template-columns: 66px 22fr 397fr 89fr 370fr; grid-template-areas: "title . photo . body"; gap: 0; align-items: center; padding: 32px 0; } .page-one-minute .measure-row:last-child { padding-bottom: 0; } /* 縦書きの字送り 31.2（Figma 501:2335・501:2336 は 1 字 1 行・行送り 1.2＝26 × 1.2。「プリコーション」7 字で 217。現行も字間 0.2em で 218）。 字間 0.06em だと字送り 27.6（193）で詰まって見えた。「3つの滅菌器を使用」は 281 で写真 265 より 16 長いが、現行も同じ */ .page-one-minute .measure-title { min-height: 0; margin-left: 0; font-size: 26px; line-height: 1.2; letter-spacing: 0.2em; justify-self: center; text-orientation: upright; } /* 「3つの…」の 3 を横倒しにしない（現行 sd-164 も upright） */ .page-one-minute .measure-photo img { aspect-ratio: 397 / 265; border-radius: 16px; object-fit: cover; } .page-one-minute .measure-body { font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); } /* ---- 感染予防機器／安心の最新設備（感染対策 490:3622）: 368 幅・列間 16・行間 32・角丸 16・余白 24・写真 320×237 角丸 16 → 29 → 見出し 20px/1.7 字間 6% → 16 → 本文 16px/1.7 字間 0 #574D45 ---- */ .page-one-minute .gear-grid { max-width: 1136px; margin-inline: auto; column-gap: 16px; row-gap: 32px; } .page-one-minute .gear-card { gap: 0; padding: 24px; border-radius: 16px; } .page-one-minute .gear-photo img { aspect-ratio: 320 / 237; border-radius: 16px; object-fit: cover; } .page-one-minute .gear-title { margin-top: 29px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .gear-body { margin-top: 16px; font-size: 16px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } .page-one-minute .om-equipment .sec-head { margin-bottom: 50px; } .page-one-minute .om-facility .sec-head { margin-bottom: 80px; } /* ---- 節の間（Figma の y から）: 白カード → 初診の帯 129／帯 → H2 78（滅菌は 62）／カード → WORRIES 126／格子（ここではボタン）→ SAFETY の楕円 80／ 02 のカード → EQUIPMENT 120／設備カード → 滅菌の帯 143／滅菌カード → CLINIC 196 ---- */ .page-one-minute .om-first.section { padding-bottom: 129px; } .page-one-minute .om-flow.section { padding-top: 78px; } .page-one-minute .om-subjects.section { padding-top: 126px; padding-bottom: 80px; } .page-one-minute .om-safety.section { padding-bottom: 120px; } .page-one-minute .om-equipment.section { padding-bottom: 143px; } .page-one-minute .om-steril.section { padding-top: 62px; padding-bottom: 196px; } .page-one-minute .om-clinic.section { padding-top: 0; } /* 見出しの左上のスマイル（logo 527:3789 は WORRIES の 60 上、527:3793 は CLINIC の 54 上。どちらも x−16） */ .page-one-minute .om-smile-pc { display: block; --smile-w: 344px; left: -16px; max-width: none; } .page-one-minute .om-subjects .om-smile-pc { top: 66px; } /* CLINIC の節は上の余白 0（英字ラベルが節の上端）なので、Figma の「ラベルの 54 上」は top −54。以前の 142 は節に上余白 196 があった頃の値で、 スマイルが見出しの 142 下（写真の裏）に落ちていた。上に出る 54 を切らないよう、この節の clip は横だけにする */ .page-one-minute .om-clinic { overflow: clip visible; } .page-one-minute .om-clinic .om-smile-pc { top: -54px; } /* ---- CLINIC INTRODUCTION ---- H2 → 80 → ブロック 1（写真の箱 557×480: Rectangle 25 382×255 を左上、Rectangle 28 381×255 を右 176・下 225 に重ねる。角丸 16） ＋ 99 ＋ 文字 480 幅（上 88: 見出し 26px 字間 6% → 40 → 本文 16px/2.2 字間 6% #271200、段落の間 40）。→ 79 → ブロック 2（文字 480 幅 上 122、見出し → 50 → 本文、段落の間 54）＋ 135 ＋ 写真の箱 472×557（image 18 288×435 を下 122、image 4 251×375 を右上に重ねる）。 光（ぼかし 34 の #FFF9CC → #FFE2CA の角丸 16）は下の写真の右 19・下 46/66 にずらして後ろへ。→ 106 → 締めの 2 行（20px 字間 6%・行の間隔 46） */ .page-one-minute .om-clinic .sec-head { margin-bottom: 80px; } .page-one-minute .clinic-blocks { gap: 79px; } /* 列は 1366 の px をそのまま fr の比にする（557 ＋ 99 ＋ 480 = 1136、480 ＋ 135 ＋ 472 ＋ 49 = 1136）。写真の箱は縦横比で、中の写真は箱に対する % で置く → 1080 でも同じ形のまま縮む */ .page-one-minute .clinic-block { grid-template-columns: minmax(0, 557fr) minmax(0, 99fr) minmax(0, 480fr); gap: 0; align-items: start; } .page-one-minute .clinic-block > .clinic-photos { grid-column: 1; grid-row: 1; } .page-one-minute .clinic-block > .clinic-text { grid-column: 3; grid-row: 1; } .page-one-minute .clinic-block.is-reverse { grid-template-columns: minmax(0, 480fr) minmax(0, 135fr) minmax(0, 472fr) minmax(0, 49fr); } .page-one-minute .clinic-block.is-reverse > .clinic-photos { grid-column: 3; } .page-one-minute .clinic-block.is-reverse > .clinic-text { grid-column: 1; } .page-one-minute .clinic-photos { display: block; position: relative; aspect-ratio: 557 / 480; padding: 0; } .page-one-minute .clinic-block.is-reverse .clinic-photos { aspect-ratio: 472 / 557; } .page-one-minute .clinic-photo { position: absolute; margin: 0; } .page-one-minute .clinic-photo img { width: 100%; height: 100%; aspect-ratio: auto 4 / 3; object-fit: cover; border-radius: 16px; } .page-one-minute .clinic-photo-1 { left: 0; top: 0; width: 68.582%; height: 53.125%; } /* 382×255 at (0,0) */ .page-one-minute .clinic-photo-2 { left: 31.598%; top: 46.875%; width: 68.402%; height: 53.125%; } /* 381×255 at (176,225) */ .page-one-minute .is-reverse .clinic-photo-1 { left: 0; top: 21.903%; width: 61.017%; height: 78.097%; } /* 288×435 at (0,122) */ .page-one-minute .is-reverse .clinic-photo-2 { left: 46.822%; top: 0; width: 53.178%; height: 67.325%; } /* 251×375 at (221,0) */ .page-one-minute .clinic-glow { left: 35.009%; top: 56.458%; width: 68.582%; height: 53.125%; transform: none; border-radius: 16px; opacity: 1; background: linear-gradient(175deg, #FFF6CB 0%, var(--om-p) 72%, var(--c-cream) 96%); filter: blur(17px); } /* 382×255 at (195,271) */ .page-one-minute .is-reverse .clinic-glow { left: 4.025%; top: 33.752%; width: 61.017%; height: 78.097%; } /* 288×435 at (19,188) */ .page-one-minute .clinic-text { padding-top: 88px; } .page-one-minute .is-reverse .clinic-text { padding-top: 122px; } .page-one-minute .clinic-title { font-size: 26px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .clinic-body { margin-top: 40px; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); } .page-one-minute .clinic-body > p + p { margin-top: 40px; } .page-one-minute .is-reverse .clinic-body { margin-top: 50px; } .page-one-minute .is-reverse .clinic-body > p + p { margin-top: 54px; } .page-one-minute .clinic-closing { margin-top: 100px; font-size: 20px; line-height: 46px; letter-spacing: 0.06em; } /* Figma の文字の箱は高さ 34（行の間隔 46）。字の中心を合わせて 106 → 100 */ /* 白い楕円 Ellipse 1 490:3849: 1549×521（中央）。締めの文の 160 下。写真 4 枚 Container 490:3834: 361×247 角丸 16・間 40・2 枚目と 4 枚目は 24 下げ（楕円の上端から 113）。 スマイル 3 個（Image Container 120×109／Group 187 158×144／Group 189 87×79）は楕円の上端から 43／−24／336 */ .page-one-minute .clinic-oval { margin-top: 154px; overflow: visible; } /* Figma: 2 行目の字の中心 → 楕円の上端 177（こちらの行の箱は 46 なので 177 − 23 = 154） */ .page-one-minute .clinic-oval-panel { padding-block: 113px 137px; } /* Figma の楕円・写真の列・スマイルは組ごと画面の中央より 8 右（Ellipse 1 の中心 690.5、Container の中心 691／1366 の中央 683）。1366 で座標を一致させるため同じだけずらす */ .page-one-minute .clinic-oval-panel::before { inset: 0 auto; left: calc(50% - 766.5px); width: 1549px; border-radius: 50%; } .page-one-minute .clinic-oval-panel .oval-inner { width: 100%; } .page-one-minute .clinic-gallery { display: flex; align-items: flex-start; gap: 40px; width: 1564px; max-width: none; margin: 0 0 0 calc(50% - 774px); } .page-one-minute .clinic-gallery li { flex: none; width: 361px; } .page-one-minute .clinic-gallery li:nth-child(even) { margin-top: 24px; } .page-one-minute .clinic-gallery img { aspect-ratio: 361 / 247; height: auto; object-fit: cover; border-radius: 16px; } /* 2026-09-28 医院の指摘「画像が 4 つ並んでいる部分のアイコンがおかしい」: 画像と位置の組が入れ替わっていた（右上に 120 幅用の形、左に 158 幅用の形）うえ、 右上のスマイルの上 24px が楕円の箱の clip で切れていた。content の decor[0]＝f9118515（159×144・Group 187）が右上、decor[1]＝ee710988（121×110・Image Container）が左。 x は写真の列（中央から −782）基準で Figma と同じ（Group 187 は写真 1 の左端 +1173.6、Image Container は +290.2）。Figma では写真より前 */ .page-one-minute .clinic-oval-panel[data-allow-bleed] { overflow: clip visible; } /* 横だけ切る（楕円 1549・写真の列 1564 は画面より広い）。上に 24 出るスマイルは切らない */ /* 右上のスマイルは 1080〜1100 で画面の右端から 10 はみ出して欠けていた（楕円の箱の横の clip で切れる）→ 画面の右端の 8 内側で止める */ .page-one-minute .clinic-smile-1 { left: min(calc(50% + 400px), calc(100% - 166px)); right: auto; top: -137px; bottom: auto; width: 158px; } /* x1083・楕円の上端 −24 */ .page-one-minute .clinic-smile-2 { left: calc(50% - 484px); right: auto; top: -70px; bottom: auto; width: 120px; } /* x199・楕円の上端 +43 */ .page-one-minute .clinic-smile-3 { left: calc(50% - 415px); right: auto; top: 223px; bottom: auto; width: 87px; } /* x268・楕円の上端 +336 */ /* ---- FACILITY（Rectangle 207 631:8034: 帯 1366×2195 は楕円の下端の 161 上から。#FFF9CC → 20% #FFE2CA → 52% 地の色）。楕円の下端 → 英字 148 → H2 → 80 → カード ---- */ .page-one-minute .om-facility { --om-overlap: 161px; } .page-one-minute .om-facility-band { height: 2195px; background: linear-gradient(180deg, rgba(249, 246, 244, 0) 1837px, var(--c-cream) 2052px), url("/assets/img/ab-grain.32e4c43c3e.png") 0 0 / 102.4px 102.4px, linear-gradient(180deg, #FFF3CB 0, var(--om-p) 437px, var(--c-cream) 1139px); background-blend-mode: normal, overlay, normal; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 39px); mask-image: linear-gradient(180deg, transparent 0, #000 39px); } /* 1366 で楕円の外に見えるのは上端の 39 下から（画面端）。1440〜 で見える上端の直線をぼかす */ .page-one-minute .om-facility-band img { display: none; } .page-one-minute .om-facility .container { padding-top: 309px; } .page-one-minute .om-facility.section { padding-bottom: 193px; } /* ---- 下部ナビ Page Link 503:4086: 272×218・間 16・角丸 16。アイコン（高さ 66〜77）は上 50〜54 → 文字 20px 字間 6% は上 138。右下の 44×40（Rectangle 195）は左上 4・右下 16・ほかは角なし（rectangleCornerRadiiIndependent。cornerRadius 40 は使われていない値）＝ /about・/case と同じ四角いタブ。→ フッター 193 ---- */ .page-one-minute .om-bottom-nav.section { padding-top: 0; padding-bottom: 129px; } /* ＋ フッターの margin-top 64（shell）= 193 */ .page-one-minute .bnav-card { min-height: 218px; justify-content: flex-start; gap: 0; padding: 50px 12px 46px; border-radius: 16px; } .page-one-minute .bnav-ic { width: 100px; height: 77px; } .page-one-minute .bnav-label { margin-top: 11px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .bnav-btn { width: 44px; height: 40px; border-radius: 4px 0 16px 0; } } /* ---------- 見出しの折れ方（2026-09-26 医院の指摘「全体的に細かいところまで」）〜1079 ---------- カード・節の見出しが 1〜2 字だけ次の行に残っていた（344〜841 で「…専用／滅菌」「…徹底洗／浄」「…インキュベー／ター」「…いただくも／の」「…お守りしま／す」。 現行も同じ崩れ）。句で折り、行の長さを釣り合わせる（balance）。PC（1080〜）は Figma の組みのまま。 2026-09-28: word-break: auto-phrase は iPhone の WebKit で効かず、balance が「歯科衛／生士」「オートクレー／ブ」「一人ひと／り」「セフ／ァロ」と語の途中で折っていた → keep-all にして、折れるのはテンプレートの （one-minute.mjs の phr: 助詞の後・漢字とカナの境・content の U+200B）と記号の前後だけにする。 入り切らない語は overflow-wrap: anywhere で折る（はみ出さない保険）。 PC（1080〜）のカード見出しも同じ（1080・1366 で「オートクレー／ブ」「コンパクトクリーンブー／ス」「X線CT診／断装置」と語の途中で折れていた。 Figma の見出しも仮の文字で「オートクレ／ーブ」と折れている）。1366 の感染予防機器 1 枚目だけ 1 行増える（「高圧蒸気滅菌器／（オートクレーブ）2台・小型／…」） */ .page-one-minute :is(.flow-title, .gear-title, .clinic-title, .om-info-title, .om-first-head .sec-lead, .om-safety-head .sec-lead) { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; } /* SAFETY のリードは 3 行の段落。〜599 は現行どおり普通に詰める（keep-all ＋ balance だと 344 で 4 行になり、現行の 3 行より 28 高くなった） */ @media (max-width: 599px) { .page-one-minute .om-safety-head .sec-lead { word-break: normal; overflow-wrap: break-word; text-wrap: wrap; } } /* SAFETY のリードの改行（Figma 490:3735 は「…危機意識と」で改行）。1080〜 だけ（テンプレートの leadBreaks が
を置く） */ .om-br-pc { display: none; } @media (min-width: 1080px) { .om-br-pc { display: inline; } } /* H1「1分でわかるウララ歯科クリニック」: 440 で「…ウララ歯科ク／リニック」と語の途中で折れていた（現行も同じ）。 テンプレートが「1分でわかる｜ウララ｜歯科｜クリニック」の境目にだけ を置き、〜767 は keep-all で境目以外では折らない （440・390「…ウララ歯科／クリニック」、344「…ウララ／歯科クリニック」） */ @media (max-width: 767px) { .page-one-minute .page-head h1.sec-title { word-break: keep-all; } } /* ---------- 写真の無い 02 の行（.is-nophoto。content で photo を外した行: 現行の写真が PIXTA の透かし入り見本だった「スタンダードプリコーション」）---------- 見出し → 本文 だけで組む。〜767 は見出しの上の余白（写真との間）を消し、768〜1079 は 1 列、1080〜 は 縦書き見出し｜本文（写真と本文の列をまとめて使う） */ .measure-row.is-nophoto { grid-template-areas: "title" "body"; } @media (max-width: 599px) { .measure-row.is-nophoto .measure-title { margin-top: 0; } } @media (min-width: 768px) { .measure-row.is-nophoto { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "body"; } } @media (min-width: 1080px) { .page-one-minute .measure-row.is-nophoto { grid-template-columns: 66px 22fr 856fr; grid-template-areas: "title . body"; } .page-one-minute .measure-row.is-nophoto .measure-body { max-width: 760px; } } /* 1080〜 だけのスマイル（テンプレートの om-smile-pc）。〜1079 は出さない */ @media (max-width: 1079px) { .om-smile-pc { display: none; } } /* ============ 演出（docs/MOTION.md。2026-09-26）============ 隠す・動かすのは html.mo の下だけ（JS なし・reduce・Playwright〔?motion=1 なし〕では最初から全部見える）。 動かすのは opacity / translate / scale / clip-path だけ（transform は hover.css と既存の配置が使う）。横方向の初期ずれ・枠の外の拡大はしない。 テンプレート側の属性は templates/main/one-minute.mjs。見せ場は 初診の流れ／滅菌の流れ のカード列 */ /* ---- 初めての方へ: 白いアーチが下から上がる（:has 非対応では最初から見えたまま） ---- 1080〜 は見出しが出たら。〜1079 は節の頭の見えない札 .om-first-trig（data-mo-group）が画面に入ったら。 2026-09-29: 〜1079 も見出しを引き金にしていたので、読み込み直後の画面（iPhone 393 は見える高さ 659）では見出しが画面の下 1 割の外にあり、 目次のピルの下にアーチが出ないまま大きく空いていた（現行は最初からアーチが見える）。札はアーチの頭の上にあり、読み込み時に画面に入るので最初から上がる */ @keyframes om-arch-rise { from { opacity: 0; translate: 0 56px; } } .om-first > .om-first-trig { position: absolute; left: 0; top: 0; width: 1px; height: 200px; pointer-events: none; } @media (min-width: 1080px) { html.mo .om-first:not(:has(.om-first-head.is-in)) .oval::before { opacity: 0; } html.mo .om-first:has(.om-first-head.is-in) .oval::before { animation: om-arch-rise 1.4s var(--mo-ease) backwards; } } @media (max-width: 1079px) { html.mo .om-first:not(:has(> .om-first-trig.is-in)) .oval::before { opacity: 0; } html.mo .om-first:has(> .om-first-trig.is-in) .oval::before { animation: om-arch-rise 1.4s var(--mo-ease) backwards; } } /* ---- 流れのカード（見せ場）: 下から clip-path で現れる（横スクロール箱の中なので translate で縦にずらさない＝箱に縦スクロールが出ない）。 切り抜きは左右上下に 40px の余白を取り、カードの外へ出る歯型バッジ（左 −14・上 −18 まで）を最後に切らない ---- */ @keyframes om-card-in { from { opacity: 0; clip-path: inset(100% -40px -40px -40px round 16px); } 55% { opacity: 1; } to { opacity: 1; clip-path: inset(-40px -40px -40px -40px round 16px); } } html.mo .flow-card[data-mo].is-in { animation-name: om-card-in; animation-duration: calc(var(--mo-dur) * 1.1); } /* ---- SAFETY: 楕円の頂点が画面に入ったら、背景のグラデ楕円（〜767 と 1080〜 は ::before/::after、768〜1079 は画像）が下から昇る（縦だけ）。 2026-09-26: スクロール連動をやめて一度きりの時間の演出（1.6s）に。スクロールを止めた位置で昇りかけのまま残り「アニメーションが途中」に見えていたため（医院の指摘）。 引き金は節の頭の見えない札 .om-safety-trig（data-mo-group。motion.js が .is-in を付ける）。:has 非対応では最初から見える ---- */ .om-safety > .om-safety-trig { position: absolute; left: 0; top: 0; width: 1px; height: 200px; pointer-events: none; } @keyframes om-dome-rise { from { opacity: 0; translate: 0 96px; } 50% { opacity: 1; } to { opacity: 1; translate: 0 0; } } html.mo .om-safety:not(:has(> .om-safety-trig.is-in))::before, html.mo .om-safety:not(:has(> .om-safety-trig.is-in))::after, html.mo .om-safety:not(:has(> .om-safety-trig.is-in)) .om-safety-decor { opacity: 0; } html.mo .om-safety:has(> .om-safety-trig.is-in)::before, html.mo .om-safety:has(> .om-safety-trig.is-in)::after, html.mo .om-safety:has(> .om-safety-trig.is-in) .om-safety-decor { animation: om-dome-rise 1.6s cubic-bezier(.3, .6, .4, 1) backwards; } /* ---- 02 院内感染防止対策の見出し: PC は縦書きなので上から下へ描く（〜1079 は横書き＝motion.css の既定の左から右） ---- */ @media (min-width: 1080px) { html.mo .measure-title[data-mo="wipe"].is-in { animation-name: mo-wipe-down; } } /* ---- クリニック紹介の白い楕円: 楕円の箱（.clinic-oval＝data-mo-group）が画面に入ったら中心から楕円のまま開く（ellipse 72% で箱の四隅まで覆う＝最後は切り抜きなしと同じ）。 2026-09-26: スクロール連動をやめて一度きりの時間の演出（1.5s）に（止めた位置で開きかけのまま残らない） ---- */ @keyframes om-oval-bloom { from { opacity: 0; clip-path: ellipse(22% 18% at 50% 50%); } 45% { opacity: 1; } to { opacity: 1; clip-path: ellipse(72% 72% at 50% 50%); } } html.mo .clinic-oval[data-mo-group]:not(.is-in) .clinic-oval-panel::before { opacity: 0; } html.mo .clinic-oval[data-mo-group].is-in .clinic-oval-panel::before { animation: om-oval-bloom 1.5s cubic-bezier(.3, .6, .4, 1) var(--mo-d, 0ms) backwards; } /* 写真の後ろの光: 写真より先に四角い光だけが見えないよう、写真の組が出るまで透明にしておき、出たら少し遅れて灯る（視差の animation と別に transition で） */ @media screen { html.mo .clinic-photos[data-mo-group]:not(.is-in) .clinic-glow { opacity: 0; } html.mo .clinic-glow { transition: opacity 1.4s ease .35s; } } /* スマイル 3 個の浮遊の位相をずらす（motion.css の mo-float は 5s。同じ位相で揃って上下しないように） */ html.mo .clinic-smile-2 .mo-float { animation-delay: -1.7s; } html.mo .clinic-smile-3 .mo-float { animation-delay: -3.4s; } /* ---- unveil の枠を写真と同じ角丸に（動いている間だけ枠が clip されるので、角が四角く見えないように） ---- */ html.mo :is(.measure-photo, .clinic-gallery > li) { border-radius: 16px; } html.mo .gear-photo { border-radius: var(--r-s); } html.mo .clinic-photo { border-radius: var(--r-l); } html.mo .clinic-photo-2 { border-radius: var(--r-m); } @media (max-width: 599px), (min-width: 1080px) { html.mo :is(.gear-photo, .clinic-photo, .clinic-photo-2) { border-radius: 16px; } } @media (min-width: 1080px) { html.mo .flow-photo { border-radius: 16px; } } /* ---- 印刷は全部見せる（motion.css の印刷指定は [data-mo] だけなので、疑似要素・光・視差をここで戻す） ---- */ @media print { html.mo .om-first .oval::before, html.mo .om-safety::before, html.mo .om-safety::after, html.mo .clinic-oval-panel::before { opacity: 1 !important; animation: none !important; clip-path: none !important; translate: none !important; } html.mo :is(.om-safety-decor, .clinic-glow, .ft-photo) { animation: none !important; translate: none !important; opacity: 1 !important; } } /* フッターの口の上の間隔を現行に合わせる（2026-09-26 統合時。最後の中身の下端→口の上端を現行と同じ方法で実測: tools なし・scratchpad の gap.mjs）。 〜599 は現行 390、768〜1079 は現行 841 の値 */ @media (max-width: 599px) { body.page-one-minute main > .om-bottom-nav { padding-bottom: 130px; } } /* 現行 104。新 15 → 104 */ /* ============ 600〜1079 現行サイト（STUDIO の 541〜910 の組み。capture は open841。2026-09-28 撮り直して実測: 841・673・1000）============ 2026-09-28 医院の指摘「Figma と現行を突き合わせて全体を直す」: この帯は Figma に SP が無いので現行が正。以前は独自の 2 列（写真｜文）・2×2 の写真格子だったのを、 現行の「写真の上に文」「写真 4 枚の横 1 列（画面の外まで）」「文字の大きさ（H1 40・H2 32・キャッチ 26・本文 16/2.2）」へ戻した。 911〜1079 は現行でも楕円 113%・写真の間 40（下の小さい節）。初めての方へ の写真 4 枚だけは以前の判断のまま（現行は PC 配置が画面の外へはみ出して 2 枚が見えない） */ @media (min-width: 600px) and (max-width: 1079px) { .page-one-minute { --fs-h1: 40px; --fs-h2: 32px; } /* ---- 初めての方へ: キャッチ 26/1.7（字間なし）→ 本文 16/2.2・字間 0.06em・#574D45。白カード: 見出し 26/1.7 → 本文 14/1.7 #574D45 ---- */ .page-one-minute .om-first-head .sec-lead { font-size: 26px; line-height: 1.7; letter-spacing: 0; } .page-one-minute .om-first-body { font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); } .page-one-minute .om-first-body > p + p { margin-top: 35.2px; } .page-one-minute .om-info-title { font-size: 26px; line-height: 1.7; letter-spacing: 0; } .page-one-minute :is(.om-info-text, .om-info-list) { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } .page-one-minute .om-info-list li + li { margin-top: 0; } /* 現行は 1 つの段落の改行（行送り 23.8）。項目の間 2 が 3 つで初診の流れが 6 下がっていた */ /* ---- 初診の流れ・滅菌の流れ: 説明 14/1.7 #574D45、カードの見出し 20/1.7・字間 0.06em、本文 13/1.8 #333 ---- */ .page-one-minute .om-band-title { line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .om-band-lead { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } .page-one-minute .flow-title { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .flow-body { font-size: 13px; line-height: 1.8; letter-spacing: 0; color: var(--c-ink); } /* ---- 診療科目: 226 角の札（2 列／768〜 は 3 列、間 24、中央）。アイコン 136（絵 136×119 が札の上 35）→ 文字 20/1.7・字間 0.06em（札の上 166）。 「歯を白くしたい」は上 154 ＋（ホワイトニング）17px 字間 2% が上 184 ---- */ .page-one-minute .om-subjects .igrid { grid-template-columns: repeat(2, minmax(0, 226px)); justify-content: center; gap: 24px; } .page-one-minute .om-subjects .igrid-card { min-height: 226px; justify-content: flex-start; gap: 0; padding: 27px 8px 16px; border-radius: 16px; } .page-one-minute .om-subjects .igrid-ic { width: 136px; height: 136px; } .page-one-minute .om-subjects .igrid-label { margin-top: 3px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .om-subjects .igrid-label:has(small) { margin-top: -10px; } .page-one-minute .om-subjects .igrid-card:has(small) { padding-bottom: 14px; } /* 現行 841: この札も 226（字頭 153・（ホワイトニング）183）。以前は 229 で 4 行目が 3 下がっていた */ .page-one-minute .om-subjects .igrid-label small { margin-top: -4px; font-size: 17px; line-height: 1.7; letter-spacing: 0.02em; color: inherit; } /* ---- SAFETY: 01 の本文 14/1.7 #574D45。02 は縦積み（写真 3:2・角丸 16 → 41 → 見出し 26/1.2・字間 0.1em → 24 → 本文 14/1.7 #271200）。 点線の下 32 から中身、行の間は 32 ＋点線＋32（現行 841: 写真 697×465） ---- */ .page-one-minute .term-body { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } .page-one-minute .measure-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "title" "body"; gap: 0; align-content: start; padding: 32px 0; } .page-one-minute .measure-row:first-child { padding-top: 24px; } .page-one-minute .measure-row:last-child { padding-bottom: 0; } .page-one-minute .measure-photo img { aspect-ratio: 3 / 2; border-radius: 16px; object-fit: cover; } .page-one-minute .measure-title { margin-top: 41px; font-size: 26px; line-height: 1.2; letter-spacing: 0.1em; } .page-one-minute .measure-row.is-nophoto .measure-title { margin-top: 0; } .page-one-minute .measure-body { margin-top: 24px; font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-deep); } /* ---- 感染予防機器・安心の最新設備のカード: 見出し 20/1.7・字間 0.06em、本文 14/1.7 #574D45 ---- */ .page-one-minute .gear-title { font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .gear-body { font-size: 14px; line-height: 1.7; letter-spacing: 0; color: var(--c-ink-soft); } /* ---- CLINIC INTRODUCTION: 写真の組の下に文（49 下）。ブロックの間 40、締めの文は 64 下・20/44・字間 0.06em・中央。 1 つ目の写真の組 530×428（左寄せ）: 300×225 を (0,0)、330×248 を (200,180)、光 292×203 を (270,252)。 2 つ目 406×429（中央）: 230×307 を (0,122)、200×267 を (206,0)、光 228×319 を (21,100)。狭い幅では組ごと比のまま縮む ---- */ .page-one-minute .clinic-blocks { gap: 40px; } .page-one-minute .clinic-block { display: block; } .page-one-minute .clinic-photos { display: block; position: relative; width: min(100%, 530px); aspect-ratio: 530 / 428; padding: 0; gap: 0; } .page-one-minute .clinic-photo { position: absolute; margin: 0; } .page-one-minute .clinic-photo img, .page-one-minute .clinic-photo-2 img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 16px; } .page-one-minute .clinic-photo-1 { left: 0; top: 0; width: 56.604%; height: 52.570%; } .page-one-minute .clinic-photo-2 { left: 37.736%; top: 42.056%; width: 62.264%; height: 57.944%; margin: 0; } .page-one-minute .clinic-glow { left: 50.943%; top: 58.879%; width: 55.094%; height: 47.430%; transform: none; border-radius: 16px; opacity: 1; background: linear-gradient(175deg, #FFF6CB 0%, #FFE2CA 72%, var(--c-cream) 96%); filter: blur(17px); } .page-one-minute .clinic-block.is-reverse .clinic-photos { width: min(100%, 406px); aspect-ratio: 406 / 429; margin-inline: auto; } .page-one-minute .is-reverse .clinic-photo-1 { left: 0; top: 28.438%; width: 56.650%; height: 71.562%; } .page-one-minute .is-reverse .clinic-photo-2 { left: 50.739%; top: 0; width: 49.261%; height: 62.238%; } .page-one-minute .is-reverse .clinic-glow { left: 5.172%; top: 23.310%; width: 56.158%; height: 74.359%; } .page-one-minute .clinic-text { margin-top: 49px; } .page-one-minute .clinic-title { font-size: 26px; line-height: 1.7; letter-spacing: 0; } .page-one-minute .clinic-body { margin-top: 40px; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-deep); } .page-one-minute .clinic-body > p + p { margin-top: 35.2px; } .page-one-minute .clinic-closing { max-width: none; margin: 64px 0 0; text-align: center; font-size: 20px; line-height: 44px; letter-spacing: 0.06em; } /* 現行の箱は文字なりの幅（841 で 678＝2 行目の長さ） */ /* ---- 白い楕円（写真 4 枚）: 楕円は画面幅の 150%・高さ 545（上 113・下 137）、締めの文の 120 下。写真 361×271（元の比）・間 24 を中央から横 1 列 （両端は画面の外。2・4 枚目は 24 下げ）。スマイルは楕円の箱（150%）基準で 158 幅を右 224・上 24、120 幅を左 225・上 43、87 幅を左 352・下 106。写真より前 ---- */ .page-one-minute .clinic-oval { margin-top: 120px; } .page-one-minute .clinic-oval-panel { padding-block: 113px 137px; } .page-one-minute .clinic-oval-panel[data-allow-bleed] { overflow: clip visible; } .page-one-minute .clinic-oval-panel::before { inset: 0 -25%; border-radius: 50%; } .page-one-minute .clinic-oval-panel .oval-inner { width: 100%; position: static; } .page-one-minute .clinic-gallery { display: flex; align-items: flex-start; gap: 24px; width: 1516px; max-width: none; margin: 0 0 0 calc(50% - 758px); grid-template-columns: none; } .page-one-minute .clinic-gallery li { flex: none; width: 361px; } .page-one-minute .clinic-gallery li:nth-child(even) { margin-top: 24px; } .page-one-minute .clinic-gallery img { aspect-ratio: 2048 / 1537; height: auto; object-fit: cover; border-radius: 16px; } /* 右上・左のスマイルは 880〜910 で画面の端から 2〜4 はみ出して欠けていた → 画面の端の 8 内側で止める（841 以下は現行どおりの位置） */ .page-one-minute .clinic-smile-1 { left: auto; right: max(calc(224px - 25%), 8px); top: 24px; bottom: auto; width: 158px; } .page-one-minute .clinic-smile-2 { left: max(calc(225px - 25%), 8px); right: auto; top: 43px; bottom: auto; width: 120px; } .page-one-minute .clinic-smile-3 { left: calc(352px - 25%); right: auto; top: auto; bottom: 106px; width: 87px; } /* ---- FACILITY: 帯（1366×1247 の SVG を幅なり）は楕円の下端の 161 上から。帯の上端 → 英字 190 ---- */ .page-one-minute .om-facility { --om-overlap: 161px; } .page-one-minute .om-facility-band { height: auto; } .page-one-minute .om-facility-band img { height: auto; object-fit: fill; } .page-one-minute .om-facility .container { padding-top: 190px; } } @media (min-width: 768px) and (max-width: 1079px) { .page-one-minute .om-subjects .igrid { grid-template-columns: repeat(3, minmax(0, 226px)); } } /* 911〜1079: 現行は楕円 113%・写真の間 40・120 幅のスマイルは左 163、締めの文 → 楕円 160（現行 1000 実測） */ @media (min-width: 911px) and (max-width: 1079px) { .page-one-minute .clinic-oval { margin-top: 160px; } .page-one-minute .clinic-oval-panel::before { inset: 0 -6.5%; } .page-one-minute .clinic-gallery { gap: 40px; width: 1564px; margin-left: calc(50% - 782px); } .page-one-minute .clinic-smile-1 { right: calc(224px - 6.5%); } .page-one-minute .clinic-smile-2 { left: calc(163px - 6.5%); } .page-one-minute .clinic-smile-3 { left: calc(352px - 6.5%); } } /* unveil の枠（動いている間だけ clip される）を写真と同じ角丸 16 に（600〜1079 の写真の組） */ @media (min-width: 600px) and (max-width: 1079px) { html.mo :is(.clinic-photo, .clinic-photo-2) { border-radius: 16px; } } /* ---------- 600〜1079 見出し・目次・初めての方へ（現行 841/673 実測。2026-09-28）---------- 英字は画面の上 200（ヘッダー 90 ＋ 110）・18px → すぐ下に H1 → 100 → 目次（332×56 の 2×2・列 16・行 24・中央、文字 17px 字間 2%）→ 64 → 写真の組。 写真: 180×240 を左 40、140×187 を左 −48・その 202 下（角丸 30）。4 枚目 158×211 はボタンの右（画面の右 24・ボタンの上 20 上）、3 枚目は出さない（現行どおり）。 白いアーチは写真の組の 69 下（画面の 125%・縦半径 180 の楕円の上半分）→ 160 → H2 → 56 → キャッチ → 56 → 本文（643 幅）→ 56 → ボタン 280×80 → 100 → アーチの下端 → 51 → 白カード */ .om-first-cta-photo { display: none; } @media (min-width: 600px) and (max-width: 1079px) { .page-one-minute .page-head { padding: 110px 0 0; } .page-one-minute .page-head .sec-head { gap: 0; } .page-one-minute .page-head .sec-label { font-size: 18px; line-height: 1.4; } .page-one-minute .page-head .anchor-nav { margin-top: 100px; } .page-one-minute .anchor-nav ul { grid-template-columns: repeat(2, minmax(0, 332px)); justify-content: center; gap: 24px 16px; } .page-one-minute .anchor-pill { padding: 8px 20px 8px 33px; font-size: 17px; letter-spacing: 0.02em; } .page-one-minute .om-first { padding-top: 133px; overflow: clip visible; } /* 上に出るスマイルを切らない。横だけ切る */ /* スマイル（現行 sd-7: 250 幅・右 −40・画面の上 480＝目次の下端の 49 上。H1 が 2 行になる 〜767 は 117 上）。目次より後ろ */ .page-one-minute .page-head { position: relative; z-index: 2; } .page-one-minute .om-first .smile { display: block; left: auto; right: -40px; top: -49px; width: 250px; max-width: none; } .page-one-minute .om-first .om-first-photos { display: block; position: absolute; inset: 0; z-index: 2; width: auto; margin: 0; pointer-events: none; } .page-one-minute .ft-photo { position: absolute; flex: none; } .page-one-minute .ft-photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 30px; } .page-one-minute .ft-photo-1 { left: 40px; top: 64px; width: 180px; height: 240px; } .page-one-minute .ft-photo-2 { left: -48px; top: 266px; width: 140px; height: 187px; } .page-one-minute :is(.ft-photo-3, .ft-photo-4) { display: none; } .page-one-minute .om-first .oval[data-allow-bleed] { overflow: visible; } /* 4 枚目の写真がアーチの下端から 11 出る。横のはみ出し（アーチ 125%・左の写真）は節（data-allow-bleed）で切る */ .page-one-minute .om-first .oval { padding-block: 160px 100px; } .page-one-minute .om-first .oval::before { inset: 0 -12.5%; border-radius: 50% 50% 0 0 / 180px 180px 0 0; } .page-one-minute .om-first-inner { max-width: 643px; padding-inline: 0; } .page-one-minute .om-first-head { gap: 0; margin-bottom: 56px; } .page-one-minute .om-first-head .sec-lead { margin-top: 56px; } .page-one-minute .om-first-cta { margin-top: 56px; } .page-one-minute .om-first-cta .btn { width: 280px; max-width: 100%; min-height: 80px; font-size: 18px; } .page-one-minute .om-first-cta-photo { display: block; position: absolute; z-index: 2; right: calc(24px - var(--gutter)); bottom: -111px; width: 158px; height: 211px; pointer-events: none; } .page-one-minute .om-first-cta-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 30px; } /* 白カード（1 列・角は四角）: 上 32・左右 44・下 38、見出し 26 → 16 → 点線 → 16 → 本文、カードの間 16 */ .page-one-minute .om-first .om-info { margin-top: 51px; gap: 16px; } .page-one-minute .om-info-card { padding: 32px 44px 38px; border-radius: 0; } .page-one-minute .om-info-rule { margin: 16px 0; } } @media (min-width: 600px) and (max-width: 767px) { .page-one-minute .om-first .smile { top: -117px; } } /* 600〜672 は 2 列の設備カードの中が 188〜224 しかなく、20px だと「（DACユニバーサル2）」（字幅 約 11.2 字分）が入らず「…ユニバーサル／2）」「オートクレーブ／）」と折れていた → その幅が入る大きさまでだけ縮める（600 で 16.8px。673〜 は 20px のまま） */ @media (min-width: 600px) and (max-width: 767px) { .page-one-minute .gear-title { font-size: min(20px, calc((50vw - 112px) / 11.2)); } } /* 〜1079 滅菌の流れの写真は現行どおり写真ごとの元の縦横比（01・05 は 4:3、02〜04 は 3:2。841 で 02〜04 の写真が 25 低く、題・本文がその分上に詰まる）。 設備カードと同じ書き方（読み込み前は 4:3）。カードの高さは一番高い 01 で決まるので、箱の外の位置は変わらない。初診の流れは 5 枚とも 4:3 */ @media (max-width: 1079px) { .page-one-minute .om-steril .flow-photo img { aspect-ratio: auto 4 / 3; height: auto; } } /* ---------- 600〜1079 節の間・帯・カード（現行 841 実測。2026-09-28）---------- 白カード → 初診の帯 120 → H2 72 → 説明の下 40 に点線 → 41 下に高さ固定の箱（初診 450・滅菌 500。上 5 に ‹ ›、下端にカード列）→ 帯の終わり＝カードの下端 → WORRIES 120 → H2 → 56 → 格子 → 57 → ボタン → 80 → SAFETY の楕円（幅 123%）→ 英字 144 → H2 → 40 → 説明 16/2.2（618 幅）→ 88 → カード → 120 → EQUIPMENT → H2 → 49 → カード（373 幅・間 16・行間 36、余白 32、写真 3:2 角丸 16 → 27 → 見出し → 16 → 本文）→ 145 → 滅菌の帯 → … → カードの下端 → 196 → CLINIC。 英字ラベルは 16px・H2 との間 0（現行はラベルの直下に H2） */ @media (min-width: 600px) and (max-width: 1079px) { .page-one-minute .sec-head { gap: 0; } .page-one-minute .sec-label { font-size: 16px; line-height: 1.7; } .page-one-minute .om-first.section { padding-bottom: 120px; } /* ---- 初診の流れ・滅菌の流れ（帯は 1366×585 の SVG と同じ比のグラデ。〜599 と同じ塗り） ---- */ .page-one-minute .om-band.section { padding-top: 72px; padding-bottom: 0; background: linear-gradient(180deg, #FFDCBF 0%, #FFDCBF 23%, #FEE0C7 27%, #FDE6D3 34%, #FAECE2 43%, #F8F1ED 50%, #F8F4F2 55%, #F8F4F2 90%, rgba(249, 246, 244, 0) 94%) top / 100% 42.83vw no-repeat; } .page-one-minute .om-band .om-band-head { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; padding-top: 0; align-items: start; } .page-one-minute .om-band-rule { margin-top: 40px; } .page-one-minute .flow-box { display: flex; flex-direction: column; margin-top: 41px; min-height: 450px; } .page-one-minute .om-steril .flow-box { min-height: 500px; } .page-one-minute .flow-ctrl { position: relative; z-index: 2; gap: 24px; margin: 5px auto 4px; padding-right: 21px; } /* 2026-10-05 下 −45 で重ねると 600 でカード・884/968 で番号の歯型が ‹ › の裏に入っていたので流れに戻した（下 4）。カード列は箱の下端に付けたまま */ .page-one-minute .flow-btn { width: 45px; height: 45px; color: var(--c-orange); } .page-one-minute .flow-list { margin-top: auto; padding-top: 18px; padding-bottom: 0; gap: 16px; } .page-one-minute .flow-card { width: 345px; flex: none; padding: 24px 24px 32px; gap: 20px; border-radius: 16px; } .page-one-minute .flow-card .tooth-badge { left: -14px; top: -18px; width: 73px; height: 71px; } .page-one-minute .flow-card .tooth-badge-txt { font-size: 24px; letter-spacing: 0.15em; padding-left: 0.15em; } .page-one-minute .flow-photo img { aspect-ratio: 4 / 3; } .page-one-minute .om-steril.section { padding-bottom: 196px; } .page-one-minute .om-clinic.section { padding-top: 0; } /* ---- 診療科目 ---- */ .page-one-minute .om-subjects.section { padding-top: 120px; padding-bottom: 80px; } .page-one-minute .om-subjects .sec-head { margin-bottom: 56px; } .page-one-minute .om-center-cta { margin-top: 56px; } .page-one-minute .om-center-cta .btn { width: auto; max-width: 100%; min-height: 80px; font-size: 18px; } /* 現行 841: 格子の 56 下に 327×80・文字 18px */ /* ---- SAFETY（楕円の画像は画面の 123%・中央） ---- */ .page-one-minute .om-safety.section { padding-top: 0; padding-bottom: 120px; } .page-one-minute .om-safety .om-safety-decor { width: 123.2%; } .page-one-minute .om-safety .container { padding-top: 144px; } .page-one-minute .om-safety-head { margin-bottom: 88px; } .page-one-minute .om-safety-head .sec-lead { max-width: 618px; margin-top: 40px; font-size: 16px; line-height: 2.2; letter-spacing: 0.06em; color: var(--c-ink-soft); } .page-one-minute .om-card + .om-card { margin-top: 56px; } /* ---- 感染予防機器・安心の最新設備のカード ---- */ .page-one-minute .om-equipment.section { padding-top: 0; padding-bottom: 145px; } .page-one-minute .om-equipment .sec-head { margin-bottom: 49px; } .page-one-minute .om-facility .sec-head { margin-bottom: 48px; } .page-one-minute .gear-grid { column-gap: 16px; row-gap: 36px; } .page-one-minute .gear-card { gap: 0; padding: 32px 32px 32px; border-radius: 16px; } .page-one-minute .gear-photo img { aspect-ratio: auto 3 / 2; height: auto; border-radius: 16px; object-fit: cover; } /* 現行 841 は写真ごとの元の縦横比（309×206〜266）。固定比だとカードの行が 24〜47 低くなっていた */ .page-one-minute .om-facility .gear-photo img { aspect-ratio: auto 4 / 3; } .page-one-minute .gear-title { margin-top: 27px; } .page-one-minute .gear-body { margin-top: 16px; } .page-one-minute .om-facility.section { padding-bottom: 130px; } } @media (min-width: 600px) and (max-width: 1079px) { html.mo .page-one-minute .gear-photo, html.mo body.page-one-minute .gear-photo { border-radius: 16px; } } /* ---------- 600〜1079 SAFETY のカード・下部ナビ（現行 841 実測。2026-09-28）---------- カード: 余白 上 64・左右 32・下 80・角丸 16、間 56。見出し: 歯型 70×68（24px）→ 24 → H 32px → 32 → 点線 → 32 → 中身。 01 の行: 橙の札 124 幅（26px・角丸 17・行の高さ −10）→ 16 → イラスト 203 → 33 → 本文、行の高さ 134 以上・上下 5、行の下に点線（札の右 16 から）。 下部ナビ: 設備の節の下端 → 65 → 371×218 の 2×2（間 20）、文字 20px は札の上 132 */ @media (min-width: 600px) and (max-width: 1079px) { .page-one-minute .om-safety .om-card { padding: 64px 32px 80px; border-radius: 16px; } .page-one-minute .om-card-head { gap: 24px; } .page-one-minute .om-card-head .tooth-badge { width: 70px; height: 68px; } .page-one-minute .om-card-head .tooth-badge-txt { font-size: 24px; letter-spacing: 0.15em; padding-left: 0.15em; } .page-one-minute .om-card-title { line-height: 1.7; letter-spacing: 0.06em; } .page-one-minute .om-card-rule { margin: 32px 0 0; } .page-one-minute .term-list { margin-top: 32px; } .page-one-minute .term-row { position: relative; grid-template-columns: 124px 203px minmax(0, 1fr); gap: 0; min-height: 134px; padding: 5px 0; border-bottom: 0; align-items: center; } .page-one-minute .term-row::after { content: ""; position: absolute; left: 140px; right: 0; bottom: 0; border-top: var(--dash); } .page-one-minute .term-label { align-self: stretch; min-height: 124px; margin-right: 16px; padding: 8px; border-radius: 17px; font-size: 26px; line-height: 1.7; letter-spacing: 0; } .page-one-minute .term-row { grid-template-columns: 140px 203px minmax(0, 1fr); } .page-one-minute .term-row:first-child { min-height: 144px; } /* 現行 841: 1 行目だけ札 134（行 144）、2 行目からは札 124 */ .page-one-minute .term-ic { width: 203px; } .page-one-minute .term-body { margin-left: 33px; } .page-one-minute .measure-row:first-child { padding-top: 32px; } .page-one-minute .om-bottom-nav.section { padding-top: 65px; } .page-one-minute .bnav { gap: 20px; } .page-one-minute .bnav-card { min-height: 218px; justify-content: flex-start; gap: 0; padding: 51px 12px 0; border-radius: 16px; } .page-one-minute .bnav-ic { width: 100px; height: 72px; } .page-one-minute .bnav-label { margin-top: 9px; font-size: 20px; line-height: 1.7; letter-spacing: 0.06em; } } /* 600〜1079 の本文の左右 40（現行 541〜910 の余白。673・841 とも x40）。下部ナビ → フッターの箱 120（フッターの margin-top 14 を足して） */ @media (min-width: 600px) and (max-width: 1079px) { .page-one-minute .main { --gutter: 40px; } .page-one-minute .om-bottom-nav.section { padding-bottom: 106px; } } /* 1080〜1199（開いた折りたたみの横向き 1104 を含む）: 目次のピル 4 個を 1 行に収める。1080 で 1 個 218 幅に対し「院内感染予防対策」（17px）＋左 32＋山形の丸 32 が 231 で溢れる → 文字 16px・左 20・間 6 で 211 にする（1200〜 は Figma の 17px・左 32 のまま） */ @media (min-width: 1080px) and (max-width: 1199px) { .page-one-minute .anchor-pill { padding-left: 20px; gap: 6px; font-size: 16px; } } /* 「診療科目」の節（#subjects）を出さない間（2026-09-29〜。content/main/one-minute.json の worries.hidden）: 初診の流れのカードの下端に SAFETY の楕円の頂点が接してしまうので、600〜 は間を 80 あける（Figma pc/1min の「格子 → SAFETY の楕円 80」と同じ値）。〜599 は初診の流れの下の余白 88 のままで足りる。 節を戻すと .om-flow の次が .om-subjects になるので、この指定は自然に効かなくなる */ @media (min-width: 600px) { .page-one-minute .om-flow + .om-safety { margin-top: 80px; } } /* ============ 2026-09-29 現行 urala.com との再照合（ユーザー「ここも現状のサイトとレイアウト違う」）============ WebKit（iPhone 15 Pro 393）・344・673・841 で現行とうちを上から下まで撮り、DOM の位置を測って 8px を超えて違う所を現行に戻した。 ここより上の 1080〜 の指定には触れない（〜1079 だけに効く書き方） */ /* ---- 目次のピルの山形: 現行は 13×7 の画像（線 約 1.5。〜599 は右端から 18、600〜1079 は 26）。うちは 14〜16 の枠で山形が 7〜8 幅と小さかった。 24 の viewBox の山形（6〜18）を 23 の枠で 11.5 幅＋線 1.5 にし、枠の左右の透明な 5.75 を負のマージンで打ち消す（並びの幅は山形だけ） ---- */ @media (max-width: 1079px) { .page-one-minute .anchor-pill .icon { width: 23px; height: 23px; margin: 0 -5.75px; } .page-one-minute .anchor-pill .icon path { stroke-width: 1.6; } } @media (max-width: 599px) { .page-one-minute .anchor-pill { padding-right: 18px; } /* 344 でも「院内感染予防対策」（13.6px）が 1 行のまま入る（余り 1） */ /* 英字ラベル: 現行 393・344 は ABOUT が 16px（行 22.4・上端 y120）、ほかの節の英字は 14px（うちは 14.5〜14.6px） */ .page-one-minute .page-head .sec-label { font-size: 16px; line-height: 1.4; } .page-one-minute .sec-label { font-size: 14px; } .page-one-minute .page-head { padding-top: 40px; } /* ラベルの行が 25 → 22.4 に縮んだぶん、上端を現行の y120 に（H1 142・ピル 318 も現行どおり） */ } @media (min-width: 600px) and (max-width: 1079px) { .page-one-minute .anchor-pill { padding-right: 26px; } } /* ---- 600〜910（現行 STUDIO の 541〜910 の組み。673・841・884 など開いた折りたたみの縦） ---- 1) 初診の流れ・滅菌の流れのカード列: 現行は幅 0.576 ×（W − 40）の箱の中央に 1 枚目（345 幅、箱が狭いときは箱の幅）を置く。 1 枚目の左端は 40 ＋（箱 − 345）÷ 2（673 で 50・841 で 98。うちは 40 に固定していた）。 ‹ › の右端は 40 ＋ 0.936 ×（W − 40）（673 で 633・841 で 788。うちは 612・780）。W は .flow-box の幅（cqw） 2) 初めての方への本文・SAFETY の説明: 現行は左右 56 の内側（W − 112）で、最大 643／618（673 で 561 幅。うちは 593 幅） 3) 01 滅菌とは の行: 現行はイラストが「札の右の残り × 40% − 19.2」（673 で 136・841 で 203）、本文との間 32（うちはイラスト 203 に固定で、673 で本文が 153 幅に細り行が 36 高かった） 911〜1079 は現行が PC に近い組み（札 170・イラスト 216 など）で、ここでは変えない */ @media (min-width: 600px) and (max-width: 910px) { .page-one-minute .flow-box { container-type: inline-size; } .page-one-minute .flow-list { padding-left: calc(40px + max(0px, (57.6cqw - 23.04px - 345px) / 2)); scroll-padding-left: calc(40px + max(0px, (57.6cqw - 23.04px - 345px) / 2)); } .page-one-minute .flow-card { width: min(345px, 57.6cqw - 23.04px); } .page-one-minute .flow-ctrl { width: calc(93.6cqw - 37.44px); margin-left: 40px; margin-right: 0; padding-right: 0; } .page-one-minute .om-first-inner { max-width: min(643px, 100% - 32px); } .page-one-minute .om-safety-head .sec-lead { max-width: min(618px, 100% - 32px); } /* 4) 初めての方への左上の写真: 現行は幅 min(180, 0.32W − 40)・縦横 3:4（673 で 175×234。うちは 180×240 に固定）。 2 枚目はその 38 上に重なり、白いアーチの頭は 1 枚目の高さ − 107（節の上端から。841 で 133・673 で 127）。 padding の % は幅基準なので W、写真の組（.om-first-photos・inset 0）は cqw で W を使う */ .page-one-minute .om-first { padding-top: calc(min(180px, 32% - 40px) * 4 / 3 - 107px); } .page-one-minute .om-first .om-first-photos { container-type: inline-size; } .page-one-minute .ft-photo-1 { width: min(180px, 32cqw - 40px); height: auto; aspect-ratio: 3 / 4; } .page-one-minute .ft-photo-2 { top: calc(26px + min(180px, 32cqw - 40px) * 4 / 3); } /* 5) SAFETY のカードの見出し: 現行は上揃えで題が歯型の 7 下（02「ウララ歯科の院内感染防止対策」が 2 行になる 673 で、うちは中央揃えのため題が 7 上がっていた） */ .page-one-minute .om-card-head { align-items: flex-start; } .page-one-minute .om-card-title { margin-top: 7px; } /* 行の高さも現行の組み方に: 札は上下 5 の内側、本文は上下 24 の外側（行＝札＋10 と 本文＋48 の大きい方。673 の 1 行目は本文 6 行で 192） */ .page-one-minute .term-row { grid-template-columns: 140px calc((100% - 140px) * 0.4 - 19.2px) minmax(0, 1fr); padding: 0; } .page-one-minute .term-label { margin-block: 5px; } .page-one-minute .term-ic { width: 100%; } .page-one-minute .term-body { margin: 24px 0 24px 32px; } } /* ---------- 下部 CTA の見直し案 c03: 4 カードの上の予約の帯 .om-rsv（docs/CTA.md・templates/main/_cta.mjs。旗がオフのときは要素が無い） ---------- 帯 → 4 カードはどの幅でも約 64: 〜1079 は 4 カードの節の上の余白（64・65）がそのまま間になるので帯の下は 0。1080〜 は 4 カードの節の上が 0 なので帯の下 64（components.css の既定） */ @media (max-width: 1079px) { .page-one-minute .om-rsv { padding-bottom: 0; } } /* 設備カードの写真を切り抜かず全体を見せる（content の items[].fit: "contain" → .gear-photo.is-contain。templates/main/one-minute.mjs）。 1080〜 は枠が 320:237 で object-fit: cover なので、縦長・正方形の写真は上下が切れる。地が白の機器写真に限って使う（余白がカードの白になじむ）。 2026-10-05 アルミブロックインキュベーター（b85abdbf、383×400。医院が現行 STUDIO で差し替えた画像） */ .page-one-minute .gear-photo.is-contain img { object-fit: contain; }