/* ============================================ 活きの魚政 ホームページ 構成の手本: 根津松本(白地・明朝・写真主役・細い罫線) 白版(shiro)と紺版(kon)を data-theme で切り替える。 色はトークンだけを差し替え、レイアウトは共通。 ============================================ */ :root { /* 白版 */ --bg: #fcfbf8; /* 生成りに近い白 */ --bg-alt: #f5f3ee; /* 交互セクション */ --bg-band: #e4eef5; /* 花金の帯(ロゴの淡い水色) */ --fg: #1b2740; /* 濃紺(文字) */ --fg-soft: #5f6774; /* 補助文字 */ --line: rgba(27, 39, 64, 0.22); --line-soft: rgba(27, 39, 64, 0.12); --accent: #c1272d; /* 鯛の朱。点使いのみ */ --btn-solid-bg: #1b2740; --btn-solid-fg: #fcfbf8; --header-bg: rgba(252, 251, 248, 0.94); --shade-top: rgba(27, 39, 64, 0.28); --shade-bottom: rgba(27, 39, 64, 0.34); --scrim: rgba(27, 39, 64, 0.45); /* ドロワー展開中の暗幕 */ --jp: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif; --latin: "EB Garamond", Garamond, "Times New Roman", serif; } [data-theme="kon"] { --bg: #0b1119; --bg-alt: #0f1722; --bg-band: #151f2d; --fg: #e9ecef; --fg-soft: #a8b2bc; --line: rgba(233, 236, 239, 0.22); --line-soft: rgba(233, 236, 239, 0.1); --accent: #d0625a; --btn-solid-bg: #e9ecef; --btn-solid-fg: #0b1119; --header-bg: rgba(11, 17, 25, 0.92); --shade-top: rgba(11, 17, 25, 0.35); --shade-bottom: rgba(11, 17, 25, 0.7); --scrim: rgba(0, 0, 0, 0.55); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { font-family: var(--latin), var(--jp); font-weight: 400; font-size: 15px; line-height: 2.0; letter-spacing: 0.06em; color: var(--fg); background: var(--bg); font-feature-settings: "palt" 1, "kern" 1; line-break: strict; overflow-wrap: break-word; word-break: normal; -webkit-font-smoothing: antialiased; } /* 欧文はガラモン、和文は明朝。EB Garamond は和文グリフを持たないので 和文は自動的に2番目の Shippori Mincho B1 に落ちる */ img { max-width: 100%; display: block; } a { color: var(--fg); } ::selection { background: rgba(193, 39, 45, 0.22); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* 日本語の改行 auto-phrase: 文節の切れ目で折り返す( が前提) pretty: 最終行に1文字だけ取り残さない どちらも未対応のブラウザでは、これまでどおりの折り返しになる */ .statement-text, .showcase-text, .hanakin-text, .product-lead p, .history-list dd, .specialty-desc, .news-grid p, .order-ways dd, .shop-list dd, .dash-list li, .note, .footer-cols p, .section-desc, .brand-band-sub, .store-search { word-break: auto-phrase; text-wrap: pretty; } /* 見出しは行の長さをそろえる */ .statement-catch, .section-title, .showcase-catch, .product-lead h3, .hanakin-title, .company-title, .specialty-name h3 { text-wrap: balance; } /* 途中で割れると読みにくい語をひとまとまりにする */ .nobr { white-space: nowrap; } /* ---------- 共通 ---------- */ .container { max-width: 1040px; margin: 0 auto; padding: 0 28px; } .container.narrow { max-width: 720px; } .section { padding: 96px 0; } .section--alt { background: var(--bg-alt); } .section-title { text-align: center; font-family: var(--jp); font-weight: 500; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.5; letter-spacing: 0.2em; margin-bottom: 56px; } .section-desc { max-width: 640px; color: var(--fg-soft); margin: -24px 0 40px; } .section-desc.center { margin-left: auto; margin-right: auto; text-align: center; } .note { font-size: 13px; color: var(--fg-soft); margin-top: 24px; letter-spacing: 0.04em; line-height: 1.9; } .note.center { text-align: center; } /* 罫線ボタン */ .btn-line { display: inline-block; min-height: 48px; padding: 12px 40px; font-size: 14px; letter-spacing: 0.2em; color: var(--fg); text-decoration: none; border: 1px solid var(--fg); background: transparent; transition: background 0.3s, color 0.3s; } .btn-line:hover { background: var(--fg); color: var(--bg); } /* 塗りボタン(ページで1つだけ: モバイルオーダー) */ .btn-solid { display: block; width: min(100%, 420px); margin: 0 auto; min-height: 56px; padding: 15px 32px; text-align: center; font-size: 15px; letter-spacing: 0.2em; color: var(--btn-solid-fg); background: var(--btn-solid-bg); text-decoration: none; transition: opacity 0.3s; } .btn-solid:hover { opacity: 0.85; } .tel-link { display: inline-block; padding: 9px 0; /* 指で押せる高さ44pxを確保する */ color: var(--fg); font-size: 20px; letter-spacing: 0.08em; } /* 本文中のリンクは細い下線で示す。罫線を基調とする作りに合わせる */ .tel-link, .footer-cols a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: currentColor; /* 薄い罫線色だと下線が見えず、押せると気づけない */ text-underline-offset: 0.32em; transition: color 0.25s; } .tel-link:hover, .footer-cols a:hover { color: var(--accent); } /* ---------- ヘッダー ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); transition: background 0.4s, color 0.4s; } /* backdrop-filter は使わない(固定配置のドロワーの基準がヘッダーになり、背景が描かれなくなる) */ .site-header.scrolled { color: var(--fg); background: var(--header-bg); border-bottom: 1px solid var(--line-soft); } .header-inner { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 72px; display: flex; align-items: center; gap: 32px; } .brand { display: flex; align-items: center; gap: 12px; padding: 6px 0; text-decoration: none; margin-right: auto; color: inherit; } .brand-logo { width: 38px; height: 38px; border-radius: 50%; } .brand-name { font-family: var(--jp); font-weight: 600; font-size: 17px; letter-spacing: 0.2em; } .global-nav { display: flex; gap: 2px; } .global-nav a { display: inline-block; padding: 12px 12px; min-width: 44px; text-align: center; font-size: 13px; letter-spacing: 0.1em; color: inherit; text-decoration: none; opacity: 0.9; transition: opacity 0.25s; } .global-nav a:hover { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.5em; } /* ドロワーの暗幕と末尾の導線。960px以下でだけ使う */ .nav-backdrop, .nav-actions { display: none; } .nav-toggle { display: none; width: 48px; height: 48px; background: none; border: none; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 8px; color: inherit; } .nav-toggle span { display: block; width: 26px; height: 1px; background: currentColor; transition: transform 0.3s; } /* ---------- ヒーロー ---------- */ .hero { position: relative; /* 根津松本と同じく画面の高さいっぱい。svh はスマホのアドレスバーを除いた高さ(未対応なら vh) */ height: 100vh; height: 100svh; min-height: 480px; overflow: hidden; background: #1b2740; } .hero-slides { position: absolute; inset: 0; z-index: 0; isolation: isolate; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center 45%; opacity: 0; transition: opacity 1.8s ease; } /* 北海道・落部漁港での握手: 横長の画面では二人の顔を優先し、空を切る */ .hero-slide--hokkaido { background-position: 55% 32%; } /* 店舗外観: 鯛の看板が中央に来るよう、空と道路を切る */ .hero-slide--shop { background-position: 57% 36%; } /* 切り替えの演出。main.js が各 .hero-slide の中に .hero-slide-move > .hero-slide-img を作り、 背景写真は .hero-slide-img に移す(JS が動かないときは .hero-slide 自身の背景で1枚目だけ見える)。 3層の役割: .hero-slide = 見える範囲(clip) / -move = 位置 / -img = 写真と寄り 時間と減速は --hero-dur / --hero-ease にまとめる */ .hero { --hero-dur: 1.35s; --hero-ease: cubic-bezier(0.76, 0, 0.24, 1); } .hero-slide.is-active { opacity: 1; } .hero-slide-move, .hero-slide-img { position: absolute; inset: 0; } .hero-slide-img { background-size: cover; background-position: inherit; } .hero.is-fx .hero-slide { background-image: none !important; transition: none; } .hero.is-fx .hero-slide-img { animation: heroDrift 7s linear forwards paused; } .hero.is-fx .hero-slide.is-active .hero-slide-img { animation-play-state: running; } @keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.08); } } /* 案A「幕」: 次の写真が下(戻るときは上)から画面を覆う。中の写真は覆いより遅れて動いて奥行きを出し、 消える写真は少し縮んで暗く沈む */ .hero[data-fx="cover"] .hero-slide { opacity: 1; clip-path: inset(100% 0 0 0); transition: clip-path var(--hero-dur) var(--hero-ease), filter var(--hero-dur) var(--hero-ease), transform var(--hero-dur) var(--hero-ease); } .hero[data-fx="cover"] .hero-slide-move { transition: transform var(--hero-dur) var(--hero-ease); } .hero[data-fx="cover"] .hero-slide.is-active { clip-path: inset(0 0 0 0); z-index: 2; } .hero[data-fx="cover"] .hero-slide.is-active .hero-slide-move { transform: translateY(0); } /* 待機中(次に来る写真): 画面の外で、中の写真は幕と同じ向きに少しずらしておく(幕より遅れて追いつく。逆向きにすると端に地が見える) */ .hero[data-fx="cover"] .hero-slide.is-next { clip-path: inset(100% 0 0 0); transition: none; } .hero[data-fx="cover"] .hero-slide.is-next .hero-slide-move { transform: translateY(14%); transition: none; } .hero[data-fx="cover"] .hero-slide.is-next.from-top { clip-path: inset(0 0 100% 0); } .hero[data-fx="cover"] .hero-slide.is-next.from-top .hero-slide-move { transform: translateY(-14%); } /* 消える写真: 覆われる方向へ少しずれながら暗く沈む(縮めると周りの地が見えるので縮めない) */ .hero[data-fx="cover"] .hero-slide.is-leaving { z-index: 1; clip-path: inset(0 0 0 0); filter: brightness(0.5); } .hero[data-fx="cover"] .hero-slide.is-leaving .hero-slide-move { transform: translateY(-10%); } .hero[data-fx="cover"] .hero-slide.is-leaving.to-down .hero-slide-move { transform: translateY(10%); } .hero[data-fx="cover"] .hero-slide.is-gone { clip-path: inset(100% 0 0 0); transition: none; filter: none; } .hero[data-fx="cover"] .hero-slide.is-gone .hero-slide-move { transform: none; transition: none; } /* 案B「カット」: 次の写真は少し寄った状態から静まりながら現れ、消える写真は寄りながら消える。映画のカットつなぎ */ .hero[data-fx="cut"] .hero-slide { opacity: 0; transition: opacity var(--hero-dur) ease; } .hero[data-fx="cut"] .hero-slide-move { transition: transform 1.9s cubic-bezier(0.16, 1, 0.3, 1); } .hero[data-fx="cut"] .hero-slide.is-active { opacity: 1; z-index: 2; } .hero[data-fx="cut"] .hero-slide.is-next { opacity: 0; transition: none; } .hero[data-fx="cut"] .hero-slide.is-next .hero-slide-move { transform: scale(1.18); transition: none; } .hero[data-fx="cut"] .hero-slide.is-active .hero-slide-move { transform: scale(1); } .hero[data-fx="cut"] .hero-slide.is-leaving { opacity: 0; z-index: 1; transition: opacity 0.9s ease; } .hero[data-fx="cut"] .hero-slide.is-leaving .hero-slide-move { transform: scale(1.07); transition: transform 0.9s ease; } to { transform: scale(1.08); } } .hero-shade { position: absolute; inset: 0; background: linear-gradient(var(--shade-top), rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 70%, var(--shade-bottom)); } /* 両端の矢印。写真の上なので白で描き、薄い地を敷いて写真が明るくても見えるようにする */ .hero-arrow { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-top: -24px; padding: 0 0 5px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; background: rgba(0, 0, 0, 0.18); color: #fff; font-family: var(--latin); font-size: 34px; line-height: 1; cursor: pointer; transition: background 0.25s, border-color 0.25s; } .hero-arrow--prev { left: 28px; } .hero-arrow--next { right: 28px; } .hero-arrow:hover { background: rgba(0, 0, 0, 0.4); border-color: #fff; } .hero-dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 1; display: flex; } .hero-dots button { position: relative; width: 44px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer; } .hero-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); transition: background 0.3s, transform 0.3s; } .hero-dots button.is-active::before { background: #fff; transform: scale(1.25); } /* ---------- ブランド帯 ---------- */ .brand-band { padding: 72px 28px 64px; text-align: center; } .brand-band-logo { width: 148px; margin: 0 auto 22px; border-radius: 50%; } .brand-band-name { font-family: var(--jp); font-weight: 600; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: 0.32em; line-height: 1.4; margin-bottom: 10px; padding-left: 0.32em; /* 字間ぶんの右寄りを相殺 */ } .brand-band-sub { font-size: 13px; letter-spacing: 0.18em; color: var(--fg-soft); } /* ---------- ステートメント ---------- */ .statement { padding: 24px 0 112px; } .statement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .statement-photo { overflow: hidden; } .statement-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; object-position: 55% 50%; } .statement-catch { font-family: var(--jp); font-weight: 500; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.7; letter-spacing: 0.14em; margin-bottom: 28px; } .statement-text { max-width: 34em; color: var(--fg-soft); line-height: 2.2; } .statement-text + .statement-text { margin-top: 1.4em; } /* ---------- 魚政のあゆみ ---------- */ .history-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 26px 0; border-top: 1px solid var(--line-soft); } .history-list > div:last-child { border-bottom: 1px solid var(--line-soft); } .history-list dt { font-family: var(--jp); font-size: 15px; letter-spacing: 0.12em; padding-top: 2px; } .history-list dd { font-size: 14px; color: var(--fg-soft); } /* ---------- 名物 ---------- */ .section--products { padding-bottom: 96px; } /* 写真の帯: 横スクロール、参考サイトの商品カルーセルに相当 */ .photo-strip { display: flex; gap: 8px; padding: 0 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-bottom: 72px; } .photo-strip::-webkit-scrollbar { display: none; } .photo-strip img { -webkit-user-drag: none; user-select: none; } /* PCではつかんで横に動かせる。指で動かせるスマホ・タブレットには出さない */ @media (hover: hover) and (pointer: fine) { .photo-strip { cursor: grab; } .photo-strip.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; /* 掴んでいる間は吸着を切り、離したときに近い位置へ収める */ } } .photo-strip-wrap { position: relative; } .strip-arrow { display: none; } @media (hover: hover) and (pointer: fine) { .photo-strip-wrap.is-ready .strip-arrow { position: absolute; top: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px; padding: 0 0 4px; border: 1px solid var(--fg); border-radius: 50%; background: var(--bg); color: var(--fg); font-family: var(--latin); font-size: 30px; line-height: 1; cursor: pointer; transition: background 0.25s, color 0.25s, opacity 0.25s; } .strip-arrow--prev { left: 24px; } .strip-arrow--next { right: 24px; } .photo-strip-wrap.is-ready .strip-arrow:hover { background: var(--fg); color: var(--bg); } .photo-strip-wrap.is-ready .strip-arrow:disabled { opacity: 0.3; cursor: default; background: var(--bg); color: var(--fg); } } .photo-strip figure { position: relative; flex: 0 0 min(42vw, 560px); scroll-snap-align: start; overflow: hidden; } .photo-strip img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 62%; /* 上部に写る厨房の壁を切る */ } .photo-strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 24px 20px; font-family: var(--jp); font-size: 16px; letter-spacing: 0.14em; color: #fff; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55)); } .product-lead { max-width: 640px; margin: 0 auto 72px; text-align: center; } .product-lead h3 { font-family: var(--jp); font-weight: 500; font-size: 24px; letter-spacing: 0.2em; line-height: 1.6; margin-bottom: 16px; } .product-lead p { font-size: 14px; color: var(--fg-soft); margin-bottom: 32px; } .specialty-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; } .specialty-list li { padding: 28px 0; border-top: 1px solid var(--line-soft); } .specialty-name { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; } .specialty-name h3 { font-family: var(--jp); font-weight: 500; font-size: 18px; letter-spacing: 0.12em; } .specialty-price { font-size: 14px; color: var(--accent); letter-spacing: 0.06em; } .specialty-desc { font-size: 14px; color: var(--fg-soft); } /* ---------- 花金セール ---------- */ .hanakin { background: var(--bg-band); padding: 88px 0; text-align: center; } .hanakin-label { display: inline-block; font-size: 12px; letter-spacing: 0.3em; color: var(--accent); border: 1px solid var(--accent); padding: 3px 18px 3px 22px; margin-bottom: 26px; } .hanakin-title { font-family: var(--jp); font-weight: 500; font-size: clamp(28px, 4vw, 40px); letter-spacing: 0.3em; padding-left: 0.3em; line-height: 1.5; margin-bottom: 18px; } .hanakin-text { font-size: 14px; color: var(--fg-soft); } /* ---------- スマホ画面の見せ場(ご注文・アプリ) ---------- */ .showcase { display: grid; grid-template-columns: 320px 1fr; grid-template-areas: "phone lead" "phone more"; gap: 0 80px; align-items: center; } .showcase--reverse { grid-template-columns: 1fr 320px; grid-template-areas: "lead phone" "more phone"; } .showcase .phone { grid-area: phone; } .showcase-lead { grid-area: lead; } .showcase-more { grid-area: more; } /* iPhone の枠を CSS だけで描く(チタンの側面、黒いベゼル、Dynamic Island、側面ボタン、ホームバー)。 奥行きのため、サイトで唯一の影をここに許す */ .phone { position: relative; width: 296px; margin: 0 auto; } .phone-body { position: relative; padding: 3px; border-radius: 58px; background: linear-gradient(150deg, #8c8f96 0%, #4a4d54 22%, #2a2c31 50%, #4d5057 78%, #9a9da4 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 1px 0 rgba(255, 255, 255, 0.25), 0 44px 80px -36px rgba(0, 0, 0, 0.55), 0 12px 28px -14px rgba(0, 0, 0, 0.35); } /* 黒いベゼル */ .phone-body::before { content: ""; position: absolute; inset: 3px; border-radius: 55px; background: #050507; } .phone-screen { position: relative; margin: 10px; border-radius: 46px; overflow: hidden; aspect-ratio: 1179 / 2556; background: var(--screen-top, #fff); isolation: isolate; } /* 全画面キャプチャでない画像は、ステータスバーぶん(50px)下げて置く */ .phone-screen--fit { padding-top: 50px; } .phone-screen > img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; } /* ステータスバー(時刻と電池)。画面上部の色の上に白で描く */ .phone-status { position: absolute; top: 0; left: 0; right: 0; height: 50px; z-index: 3; color: #fff; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0; } .phone-battery { position: absolute; right: 30px; top: 17px; width: 24px; height: 11px; border: 1.5px solid rgba(255, 255, 255, 0.55); border-radius: 4px; } .phone-battery::before { content: ""; position: absolute; left: 1.5px; top: 1.5px; bottom: 1.5px; width: 16px; background: #fff; border-radius: 1.5px; } .phone-battery::after { content: ""; position: absolute; right: -4.5px; top: 2.5px; width: 2px; height: 4px; background: rgba(255, 255, 255, 0.55); border-radius: 0 1px 1px 0; } /* 明るい画面では電池を濃い色で描く。実機のiPhoneと同じ振る舞い */ .phone-status--dark .phone-battery { border-color: rgba(0, 0, 0, 0.4); } .phone-status--dark .phone-battery::before { background: #1b2740; } .phone-status--dark .phone-battery::after { background: rgba(0, 0, 0, 0.4); } /* 画面より縦が短い画像は、幅を合わせて上に寄せ、余った下側を同じ画像のぼかしで埋める */ .phone-screen--fit > img { height: auto; } .phone-screen--fit .phone-ambient { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; filter: blur(22px) saturate(1.15); transform: scale(1.3); z-index: 0; } /* Dynamic Island */ .phone-island { position: absolute; top: 11px; left: 50%; width: 88px; height: 26px; margin-left: -44px; border-radius: 13px; background: #050507; z-index: 2; } /* ホームバー */ .phone-home { position: absolute; bottom: 7px; left: 50%; width: 104px; height: 4px; margin-left: -52px; border-radius: 2px; background: #fff; mix-blend-mode: difference; opacity: 0.9; z-index: 2; } /* 側面ボタン(左: アクション・音量、右: 電源) */ .phone-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, #6b6e75, #3a3c42); z-index: 0; } .phone-btn--action { left: -3px; top: 104px; height: 22px; } .phone-btn--up { left: -3px; top: 146px; height: 48px; } .phone-btn--down { left: -3px; top: 204px; height: 48px; } .phone-btn--power { right: -3px; top: 168px; height: 78px; background: linear-gradient(90deg, #3a3c42, #6b6e75); } .showcase-catch { font-family: var(--jp); font-weight: 500; font-size: clamp(21px, 2.2vw, 25px); line-height: 1.7; letter-spacing: 0.12em; margin-bottom: 16px; } .showcase-text { font-size: 14px; color: var(--fg-soft); margin-bottom: 32px; max-width: 34em; } .showcase-lead .btn-solid { margin: 0; } /* ---------- ご注文 ---------- */ .order-ways { margin-top: 48px; } .order-ways > div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--line-soft); } .order-ways > div:last-child { border-bottom: 1px solid var(--line-soft); } .order-ways dt { font-family: var(--jp); font-size: 15px; letter-spacing: 0.1em; } .order-ways dd { font-size: 14px; color: var(--fg-soft); } .order-ways .tel-link { font-size: 19px; } /* padding は残す。指で押せる高さを保つため */ /* ---------- アプリ・会員 ---------- */ .discount { margin-bottom: 28px; } .discount-row { padding: 22px 0; border-top: 1px solid var(--line-soft); } .discount-row:last-child { border-bottom: 1px solid var(--line-soft); } .discount-num { line-height: 1; color: var(--accent); margin-bottom: 8px; } .discount-num .num { font-size: 56px; letter-spacing: 0; } .discount-num .unit { font-size: 15px; letter-spacing: 0.1em; margin-left: 6px; } .discount-cond { font-size: 14px; } .dash-list { list-style: none; margin-bottom: 28px; } .dash-list li { position: relative; padding-left: 20px; font-size: 14px; color: var(--fg-soft); margin-bottom: 10px; } .dash-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 10px; height: 1px; background: var(--accent); } .store-row { display: flex; gap: 28px; align-items: center; } .store-links { display: flex; flex-wrap: wrap; gap: 12px; } /* ストアへの導線は面で塗る。枠だけでは押せると気づけないという指摘への対応。 各ストアのマークが、押した先が何かを一目で伝える手がかりになる */ .btn-store { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 22px; color: var(--btn-solid-fg); background: var(--btn-solid-bg); text-decoration: none; transition: opacity 0.25s; } .btn-store:hover { opacity: 0.85; } .btn-store-mark { width: 22px; height: 22px; flex: none; } .btn-store-text { display: flex; flex-direction: column; line-height: 1.25; } .btn-store-sub { font-size: 10.5px; letter-spacing: 0.16em; opacity: 0.75; } .btn-store-name { font-size: 17px; letter-spacing: 0.06em; } .qr-link { display: block; } .qr-link .qr { transition: border-color 0.25s; } .qr-link:hover .qr { border-color: var(--fg); } .store-search { font-size: 13px; color: var(--fg-soft); margin-top: 20px; line-height: 1.9; } /* QRは148pxの元画像を拡大するので、にじまないようにピクセル補間を止める */ .qr { flex: 0 0 104px; width: 104px; height: 104px; padding: 6px; background: #fff; border: 1px solid var(--line-soft); image-rendering: pixelated; } /* ---------- お知らせ ---------- */ .news-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .news-grid li { padding-top: 22px; border-top: 1px solid var(--line-soft); } .news-grid time { display: block; font-size: 14px; letter-spacing: 0.04em; color: var(--fg-soft); margin-bottom: 8px; } .news-grid p { font-size: 14px; } /* ---------- 店舗案内 ---------- */ .section--info { background: var(--bg-alt); } .shop-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; } .shop-name { font-family: var(--jp); font-weight: 600; font-size: 22px; letter-spacing: 0.24em; margin-bottom: 20px; } .shop-list > div { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-soft); } .shop-list > div:last-of-type { border-bottom: 1px solid var(--line-soft); } .shop-list dt { font-family: var(--jp); font-size: 13px; color: var(--fg-soft); letter-spacing: 0.16em; padding-top: 2px; } .shop-list dd { font-size: 14px; } .dd-note { display: block; font-size: 13px; color: var(--fg-soft); margin-top: 4px; } .shop-info .btn-line { margin-top: 32px; } .shop-visual { display: grid; gap: 16px; } .shop-exterior img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .shop-map { border: 1px solid var(--line-soft); overflow: hidden; } .shop-map iframe { width: 100%; height: 360px; border: 0; display: block; } /* ---------- フッター ---------- */ .site-footer { border-top: 1px solid var(--line-soft); padding: 72px 0 40px; } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 64px; } .footer-cols h3 { font-family: var(--jp); font-weight: 500; font-size: 14px; letter-spacing: 0.16em; margin-bottom: 14px; } .footer-cols p { font-size: 13px; line-height: 1.9; color: var(--fg-soft); margin-bottom: 6px; } .footer-cols a { color: var(--fg-soft); } .footer-bottom { text-align: center; padding-top: 40px; border-top: 1px solid var(--line-soft); } .footer-logo { width: 52px; margin: 0 auto 20px; border-radius: 50%; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin-bottom: 28px; } .footer-nav a { display: inline-block; min-width: 44px; color: var(--fg-soft); font-size: 12.5px; letter-spacing: 0.12em; text-decoration: none; padding: 12px 2px; } .footer-nav a:hover { color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.4em; } .copyright { font-size: 12px; letter-spacing: 0.12em; color: var(--fg-soft); } /* ---------- スクロールで浮かび上がる演出 ---------- JS が対象に .reveal / .reveal-chars を付け、画面に入ったら .is-in を足す。 JS が動かなければクラスが付かず、最初から表示される */ .reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--d, 0) * 1ms); } .reveal.is-in { opacity: 1; transform: none; filter: none; } /* 見出しは一文字ずつ。--i は文字の順番 */ .reveal-chars .ch { display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(6px); transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 40ms); } .reveal-chars.is-in .ch { opacity: 1; transform: none; filter: none; } /* ドロワー展開中は背景スクロールを止める */ body.nav-open { overflow: hidden; } /* スマホ用の固定バー(電話・予約・地図)。960px以下でヒーローを過ぎたら出す */ .quick-bar { display: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal, .reveal-chars .ch { opacity: 1; transform: none; filter: none; transition: none; } .hero-slide, .hero-slide-move, .hero-slide-img { animation: none !important; transition: none !important; transform: none !important; filter: none !important; clip-path: none !important; } .hero-slide { opacity: 0; transition: opacity 0.4s ease !important; } .hero-slide.is-active { opacity: 1; } } /* ---------- レスポンシブ ---------- */ @media (max-width: 960px) { .section { padding: 72px 0; } .section-title { margin-bottom: 40px; } .statement { padding-bottom: 88px; } .global-nav { position: fixed; top: 0; right: 0; bottom: 0; width: min(78vw, 340px); background: var(--bg); color: var(--fg); flex-direction: column; justify-content: center; padding: 40px 44px; gap: 6px; transform: translateX(105%); transition: transform 0.4s ease; z-index: 99; border-left: 1px solid var(--line-soft); overflow-y: auto; } .global-nav.open { transform: translateX(0); } .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 98; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .nav-backdrop.open { opacity: 1; pointer-events: auto; } .nav-actions { display: block; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-soft); } .nav-actions .tel-link { display: block; padding: 9px 0; margin-bottom: 14px; font-family: var(--latin), var(--jp); font-size: 20px; letter-spacing: 0.08em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.32em; opacity: 1; } .nav-actions .btn-solid { display: block; width: 100%; min-height: 56px; padding: 15px 12px; font-family: var(--latin), var(--jp); font-size: 14px; letter-spacing: 0.1em; line-height: 1.6; text-align: center; color: var(--btn-solid-fg); background: var(--btn-solid-bg); opacity: 1; } .global-nav a { font-family: var(--jp); font-size: 16px; padding: 14px 0; letter-spacing: 0.2em; text-align: left; min-width: 0; } .nav-toggle { display: flex; z-index: 101; } .nav-toggle.open { color: var(--fg); } .nav-toggle.open span:first-child { transform: translateY(4.5px) rotate(20deg); } .nav-toggle.open span:last-child { transform: translateY(-4.5px) rotate(-20deg); } .statement-grid { grid-template-columns: 1fr; gap: 36px; } .statement-photo img { aspect-ratio: 16 / 10; } .history-list > div { grid-template-columns: 88px 1fr; gap: 14px; } .photo-strip figure { flex-basis: min(72vw, 420px); } .specialty-list { grid-template-columns: 1fr; gap: 0; } .showcase, .showcase--reverse { grid-template-columns: 1fr; grid-template-areas: "lead" "phone" "more"; gap: 44px; } .showcase-more .order-ways { margin-top: 0; } .phone { width: 250px; } .phone-btn--action { top: 88px; } .phone-btn--up { top: 124px; height: 40px; } .phone-btn--down { top: 172px; height: 40px; } .phone-btn--power { top: 142px; height: 66px; } .news-grid { grid-template-columns: 1fr; gap: 24px; } .shop-grid { grid-template-columns: 1fr; gap: 40px; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-cols a { display: inline-block; padding: 14px 0; } .info-watermark { width: 420px; left: -100px; bottom: -120px; } /* 固定バー。フッター末尾が隠れないよう body に同じ高さの余白を足す */ body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } .quick-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; background: var(--bg); /* 半透明だと下の文字が透けて読みにくい */ border-top: 1px solid var(--line-soft); padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform 0.35s ease; } .quick-bar.is-visible { transform: none; } body.nav-open .quick-bar { transform: translateY(110%); } .quick-bar a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 56px; font-family: var(--jp); font-size: 14px; letter-spacing: 0.14em; color: var(--fg); text-decoration: none; } .quick-bar a + a { border-left: 1px solid var(--line-soft); } } @media (max-width: 560px) { body { font-size: 14px; } .hero { min-height: 420px; } .hero-slide--shop { background-position: 50% 36%; } /* 縦長の画面では看板を中央に */ .hero-arrow { width: 44px; height: 44px; margin-top: -22px; font-size: 30px; } .hero-arrow--prev { left: 12px; } .hero-arrow--next { right: 12px; } .brand-band { padding: 56px 24px 48px; } .brand-band-logo { width: 120px; } .order-ways > div { grid-template-columns: 1fr; gap: 4px; } .history-list > div { grid-template-columns: 1fr; gap: 4px; } .store-row { flex-direction: column; align-items: stretch; gap: 20px; } .store-links { flex-direction: column; gap: 12px; } .btn-store { justify-content: center; } .qr-link { align-self: center; } .footer-cols { grid-template-columns: 1fr; } .btn-line { width: 100%; text-align: center; } }