@charset "UTF-8"; /* ========================================================================== 鳥貴族 40TH × au PAY 食べ飲みFESTIVAL2026 — LP スタイルシート構成 1. Tailwind 基盤レイヤー（theme / base） 2. 使用中のユーティリティ・共通スタイル 3. リセット & LP 本体スタイル（全10セクション共通） 4. テーマ変数整理メモ - Webフォントは index.html のので読み込む。旧版は @font-face 877件が /_next/static/media/*.woff2 を指していたがそのファイル群は同梱されておらず全て読み込み失敗していたため削除した。（Google Fonts の @import も @font-face より後ろにあり CSS 仕様上無視されていた。） - セクション3は旧版では HTML 内に10回・この CSS 内に10回、合計20回重複していた。全セクションが共有する .imported-html-block を軸に1つへ統合。 - LP Studio の編集画面専用スタイル（[data-field-key] のホバー枠、 lp-studio-flash、body の背景透過、.aurbit-itn-editing、 .part-hl / .ins-pill などの編集オーバーレイ）は削除した。 - LP Studio のコンポーネントライブラリ（rt-p-* / part-* / anim-* / bc-*）と未使用の Tailwind ユーティリティを削除した。この LP には JavaScript が無く動的なクラス付与が起こらないため、HTML に存在しないクラス・要素・属性にしか一致しないルールは到達不能と判定できる。セレクタ2,785件のうち2,746件が到達不能で、残る39件を保持している。実際に使われているユーティリティは .w-full のみ。参照ゼロになった @keyframes 142件・@property 60件超も削除した。 - @layer properties（全要素に --tw-* を約70個セットするブロック）は var(--tw-*) の参照が0件のため全削除。@layer theme は177変数のうち実際に参照される4つだけに縮小した。 - 上記の削減により、このファイルを LP Studio へ再取り込みすること（ラウンドトリップ）は想定できなくなっている点に注意。画像について - assets/icon-arrow.svg 〜 image-59.png（計60件）を参照している。必要な画像の一覧と用途は assets-spec.md を参照。 ========================================================================== */ /* ========================================================================== 1. Tailwind 基盤レイヤー（theme / base） ========================================================================== */ /* Tailwind のテーマ変数のうち、このLPで実際に参照される4つだけを残している。旧版は177変数を定義していたが、参照は下記2つの --default-* 経由のみ（@layer base の `:host, html` と `code, kbd, pre, samp` のフォント指定）。併せて @layer properties（全要素に --tw-* を約70個セットするブロック）も var(--tw-*) の参照が0件になったため削除した。 */ @layer theme { :host, :root { --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); } } @layer base { *, ::backdrop, ::after, ::before { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } ::file-selector-button { box-sizing: border-box; border: 0px solid; margin: 0px; padding: 0px; } :host, html { text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings,normal); font-variation-settings: var(--default-font-variation-settings,normal); -webkit-tap-highlight-color: transparent; } hr { height: 0px; color: inherit; border-top-width: 1px; } abbr:where([title]) { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, pre, samp { font-family: var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace); font-feature-settings: var(--default-mono-font-feature-settings,normal); font-variation-settings: var(--default-mono-font-variation-settings,normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0px; border-color: inherit; border-collapse: collapse; } progress { vertical-align: baseline; } summary { display: list-item; } menu, ol, ul { list-style: none; } audio, canvas, embed, iframe, img, object, svg, video { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, optgroup, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } ::file-selector-button { font: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: rgba(0, 0, 0, 0); border-radius: 0px; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) { ::placeholder { color: currentcolor; } @supports (color:color-mix(in lab,red,red)) { ::placeholder { color: color-mix(currentcolor, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0px; } ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field { padding-block: 0px; } ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-month-field { padding-block: 0px; } ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field { padding-block: 0px; } ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-second-field { padding-block: 0px; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0px; } ::-webkit-calendar-picker-indicator { line-height: 1; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } } @layer components; /* ========================================================================== 2. 使用中のユーティリティ・共通スタイル ========================================================================== */ @layer utilities { .w-full { width: 100%; } } :root { --ins-pill-line-op: .28; --ins-pill-btn-op: .42; } .lp-gap-standard { --section-pad-y: 32px; } @media (max-width: 1024px) { .lp-gap-standard { --section-pad-y: 28px; } } @media (max-width: 767px) { .lp-gap-standard { --section-pad-y: 24px; } } :root { --ease-spring: linear(0,.0377,.1279,.2438,.3674,.4871,.5961,.6908,.7703,.8349,.8859,.9251,.9542,.9752,.9898,.9994,1.0054,1.0086,1.01,1.0101,1.0095,1.0085,1.0073,1.006,1.0048,1.0038,1.0028,1.0021,1); --ease-spring-snappy: linear(0,.0629,.2005,.3603,.5132,.6454,.7522,.8341,.8941,.9364,.9649,.9833,.9945,1.0007,1.0038,1.0049,1.0049,1.0044,1.0036,1.0028,1.0021,1); --ease-spring-flat: linear(0,.1175,.3275,.5249,.6796,.7905,.8661,.9158,.9478,.968,.9805,.9882,.9929,.9958,.9975,1); --dur-instant: 80ms; --dur-fast: .12s; --ease-spring-dur: .731s; --ease-spring-snappy-dur: .465s; --ease-spring-flat-dur: .35s; --dur-exit: .2s; --ease-exit: cubic-bezier(.4,0,1,1); --color-primary: #f60; --color-primary-rgb: 255 102 0; --color-primary-light: #ff8c00; --color-primary-dark: #e55a00; --color-background: #fff8f0; --color-background-deep: #ffe8cc; --color-surface: #fff; --color-text: #1a1a1a; --color-text-muted: #888; --color-ink: #3e2a15; --shadow-pop-offset: 0 4px 0; --font-num: var(--font-anton,"Anton"),"Noto Sans JP",sans-serif; --font-pop: var(--font-mplus,"M PLUS Rounded 1c"),"Noto Sans JP",sans-serif; --c-header: #0f1117; --c-header-2: #1c2333; --c-header-3: #2d3748; --c-primary: #f97316; --c-primary-hover: #ea6c10; --c-primary-tint: #fff3e8; --c-primary-mid: #fed7aa; --c-bg: #f8f9fa; --c-surface: #fff; --c-surface-2: #f8f9fa; --c-surface-3: #f3f4f6; --c-border: #e9ecef; --c-border-light: #f1f3f5; --c-text: #212529; --c-text-2: #343a40; --c-text-3: #6c757d; --c-text-4: #adb5bd; --c-success: #2e7d32; --c-success-bg: #e8f5e9; --c-warning: #c77700; --c-warning-bg: #fff3cd; --c-danger: #c62828; --c-danger-bg: #ffebee; --c-info: #1565c0; --c-info-bg: #e3f2fd; --c-ai: #5e35b1; --c-ai-bg: #ede7f6; --shadow-sm: 0 1px 3px #0000000f,0 1px 2px #0000000a; --shadow-md: 0 4px 12px #00000014,0 2px 4px #0000000a; --shadow-lg: 0 8px 32px #0000001a,0 2px 8px #0000000a; --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --badge-band-bg: #f60; --badge-band-color: #fff; --section-title-bg: #f60; --section-title-bg-color-1: #f60; --section-title-border-width: 0px; --section-title-border-color: transparent; --section-title-shadow: none; --section-title-text-color: #fff; --section-title-mb: 0px; --section-title-display: inline-block; --section-title-width: auto; --section-title-container-align: center; --c-st-saving: #888; --c-st-dirty: #f59e0b; --c-st-saved: #10b981; --c-st-error: #ef4444; --c-st-published: #22c55e; --c-toast-ok: #10b981; --c-toast-err: #ef4444; --c-canvas: #fff; --c-note-bg: #fff7f0; --c-note-border: #ffe0cc; --c-note-text: #9a5b2d; --c-bezel-ring: transparent; } * { box-sizing: border-box; text-wrap: pretty; } body { font-family: var(--font-noto,"Noto Sans JP"),"Hiragino Sans","Yu Gothic",sans-serif; background: var(--c-bg); color: var(--c-text); -webkit-font-smoothing: antialiased; } a, button, h1, h2, h3, h4, h5, h6, label, li, p, span, td, th { word-break: auto-phrase; } ::-webkit-scrollbar-track { background: 0px 0px; } ::-webkit-scrollbar-thumb:hover { background: var(--c-text-4); } .lp-page, .lp-preview { --lp-press-scale: .97; --lp-press-dur: 90ms; --lp-hover-lift-y: -2px; --lp-hover-dur: .14s; --lp-ease: cubic-bezier(.22,1,.36,1); } .lp-page [role="button"]:not([aria-disabled="true"]), .lp-page a[href], .lp-page button:not(:disabled), .lp-preview [role="button"]:not([aria-disabled="true"]), .lp-preview a[href], .lp-preview button:not(:disabled) { transition: scale var(--lp-press-dur) var(--lp-ease); } .lp-page [role="button"]:not([aria-disabled="true"]):active, .lp-page a[href]:active, .lp-page button:not(:disabled):active, .lp-preview [role="button"]:not([aria-disabled="true"]):active, .lp-preview a[href]:active, .lp-preview button:not(:disabled):active { scale: var(--lp-press-scale); } .lp-page [role="button"]:focus-visible, .lp-page a[href]:focus-visible, .lp-page button:not(:disabled):focus-visible, .lp-preview [role="button"]:focus-visible, .lp-preview a[href]:focus-visible, .lp-preview button:not(:disabled):focus-visible { outline: 2px solid var(--color-primary,#f60); outline-offset: 2px; } @media (hover: hover) and (pointer: fine) { .lp-page [role="button"]:not([aria-disabled="true"]), .lp-page a[href], .lp-page button:not(:disabled), .lp-preview [role="button"]:not([aria-disabled="true"]), .lp-preview a[href], .lp-preview button:not(:disabled) { transition: scale var(--lp-press-dur) var(--lp-ease),translate var(--lp-hover-dur) var(--lp-ease); } .lp-page [role="button"]:not([aria-disabled="true"]):hover, .lp-page a[href]:hover, .lp-page button:not(:disabled):hover, .lp-preview [role="button"]:not([aria-disabled="true"]):hover, .lp-preview a[href]:hover, .lp-preview button:not(:disabled):hover { translate: 0 var(--lp-hover-lift-y); } .lp-page [role="button"]:not([aria-disabled="true"]):active, .lp-page a[href]:active, .lp-page button:not(:disabled):active, .lp-preview [role="button"]:not([aria-disabled="true"]):active, .lp-preview a[href]:active, .lp-preview button:not(:disabled):active { translate: 0px; } } @media (prefers-reduced-motion: reduce) { .lp-page, .lp-preview { --lp-press-scale: 1; --lp-press-dur: .01ms; --lp-hover-lift-y: 0px; --lp-hover-dur: .01ms; } } :root { --color-primary: #f97316; --color-primary-light: #fff3e8; --color-primary-dark: #ea6c10; --color-primary-rgb: 249 115 22; } * { scrollbar-width: thin; scrollbar-color: rgb(229, 231, 235) transparent; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { background: rgb(229, 231, 235); border-radius: 2px; } :root { --dur-aux: .01ms; } @media (prefers-reduced-motion: reduce) { :root, :root.motion-level-high, :root.motion-level-low, :root.motion-level-mid, :root.motion-level-off { --dur-instant: .01ms; --dur-fast: .01ms; --ease-spring-dur: .01ms; --ease-spring-snappy-dur: .01ms; --ease-spring-flat-dur: .01ms; --dur-exit: .01ms; --dur-aux: .01ms; --press-scale: 1; --press-dur: .01ms; --shift-dur: .01ms; --page-dur: .01ms; } } :root { --press-scale: 1; --press-dur: .01ms; --press-ease: linear; --shift-dur: .01ms; --shift-ease: linear; --page-dur: .01ms; } :root { --color-primary: #F97316; --color-primary-light: #FFF3E8; --color-primary-dark: #EA6C10; --color-primary-ring: #FED7AA; } html, body { margin: 0px; padding: 0px; box-sizing: border-box; } * { box-sizing: border-box; } html { scrollbar-width: thin; overflow-y: scroll; } /* ========================================================================== 3. リセット & LP 本体スタイル（全10セクション共通）旧版: HTML内 10回 + CSS内 10回 = 20重複 → 1つに統合 ========================================================================== */ .imported-html-block { line-height: 1.15; -webkit-text-size-adjust: 100%; } .imported-html-block { margin: 0; } main { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type=checkbox], [type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } [type=search]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none; } ._disp-ib { display: inline-block !important; } @media (max-width: 1117px) { ._view-cw-high { display: none !important; } } @media (min-width: 1118px) { ._view-cw-low { display: none !important; } } @media (max-width: 1279px) { ._view-xl-high { display: none !important; } } @media (min-width: 1280px) { ._view-xl-low { display: none !important; } } @media (max-width: 1023px) { ._view-lg-high { display: none !important; } } @media (min-width: 1024px) { ._view-lg-low { display: none !important; } } @media (max-width: 767px) { ._view-md-high { display: none !important; } } @media (min-width: 768px) { ._view-md-low { display: none !important; } } @media (max-width: 479px) { ._view-sm-high { display: none !important; } } @media (min-width: 480px) { ._view-sm-low { display: none !important; } } ._clearfix { zoom: 1; } ._clearfix:after { content: ""; display: block; clear: both; overflow: auto; } ._center { text-align: center !important; } ._left { text-align: left !important; } ._right { text-align: right !important; } ._float-l { float: left !important; } ._float-r { float: right !important; } ._clear { clear: both !important; } ._hidden { display: none !important; } ._disp-ib { display: inline-block !important; } ._margin0 { margin: 0 !important; } ._padding0 { padding: 0 !important; } ._border0 { border: none !important; } ._fixed { position: absolute !important; } ._absolute { position: absolute !important; } ._static { position: static !important; } ._xsmall { font-size: 75% !important; } ._small { font-size: 88% !important; } ._large { font-size: 113% !important; } ._xlarge { font-size: 133% !important; } ._nowrap { white-space: nowrap !important; } ._nobg { background: none !important; } ._full { width: 100% !important; } .imported-html-block { font-size: min(16px, 1.5640273705vw); } @media (max-width: 767px) { .imported-html-block { font-size: 4.2666666667vw; } } .imported-html-block *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } .imported-html-block, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, small, button, time, figure { border: 0; margin: 0; padding: 0; vertical-align: baseline; } .imported-html-block { min-width: 320px; padding: 0; color: black; font-family: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "Hiragino Sans", "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", sans-serif; font-size: 1rem; line-height: 1.5; } img { max-width: 100%; height: auto; vertical-align: bottom; } a { color: inherit; cursor: pointer; text-decoration: none; -webkit-transition: opacity 0.15s ease-out; transition: opacity 0.15s ease-out; } a:hover { opacity: 0.7; } em { font-style: normal; } ol, ul { list-style: none; } li, dd { list-style-type: none; } header, footer, nav, section, article, aside, figure, figcaption { display: block; } a.-telink, a.js-telink { cursor: default; opacity: 1 !important; } body._ios a:hover { opacity: 1; } .l-page-container { position: relative; } .l-page-contents { max-width: 1020px; margin-left: auto; margin-right: auto; position: relative; padding: 0 2.5rem; } @media (max-width: 767px) { .l-page-contents { padding: 0 1.25rem; } } .l-page-contents-point { max-width: 1190px; margin-left: auto; margin-right: auto; position: relative; padding: 0 2.5rem; } @media (max-width: 767px) { .l-page-contents-point { padding: 0 1.25rem; } } .footer-menu { text-align: center; padding: 1.875rem 0; background: rgba(0, 0, 0, 0.2); } .footer-menu__links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 4.375rem; -moz-column-gap: 4.375rem; column-gap: 4.375rem; } .footer-menu__link { color: #000b36; display: inline-block; padding-right: 0.875rem; position: relative; font-size: 0.9375rem; } .footer-menu__link::before { position: absolute; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 0.5625rem; height: 1rem; background: currentColor; content: ""; -webkit-mask-image: url("assets/icon-arrow.svg"); mask-image: url("assets/icon-arrow.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50%; mask-position: 50%; -webkit-mask-size: contain; mask-size: contain; width: 0.375rem; height: 0.6875rem; right: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .footer-menu__copyright { font-size: 0.75rem; margin-top: 1.875rem; font-weight: 400; display: block; } @media (max-width: 767px) { .footer-menu__links { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 0.875rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer-menu__link { font-size: 0.8125rem; } .footer-menu__copyright { font-size: 0.6875rem; } } .footer-app { background: #FDF1BD; padding: 2.375rem 0; } .footer-app__title { text-align: center; line-height: 1.58; font-size: 1.5rem; font-weight: bold; } .footer-app__title > span { display: inline-block; text-align: center; color: #333; padding: 0 2.5rem; position: relative; } .footer-app__title > span::before, .footer-app__title > span::after { content: ""; position: absolute; width: 1.375rem; height: 2.125rem; bottom: 0.25rem; } .footer-app__title > span::before { left: 0; background: url("assets/deco-app.svg") center bottom no-repeat; background-size: contain; -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } .footer-app__title > span::after { right: 0; background: url("assets/deco-app.svg") center bottom no-repeat; background-size: contain; } .footer-app__links { margin-top: 1.5rem; display: -webkit-box; display: -ms-flexbox; display: flex; /* 幅を揃えた結果、2枚の高さが変わるので上下中央で合わせる */ -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 2.5rem; -moz-column-gap: 2.5rem; column-gap: 2.5rem; } /* キャンペーン内のDL枠と同じく、高さを揃える側に寄せている。 */ .footer-app__link { display: block; } .footer-app__link > img { display: block; height: 5.1875rem; width: auto; } @media (max-width: 767px) { .footer-app__title { font-size: 1.0625rem; margin-left: -0.375rem; margin-right: -0.375rem; } .footer-app__title > span { padding: 0 1.375rem; } .footer-app__title > span::before, .footer-app__title > span::after { width: 0.9375rem; height: 1.5rem; } .footer-app__links { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 1.5rem; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } .deco-img { position: absolute; content: ""; z-index: 2; } /* 旧素材は斜めの串を描いたイラストで、1枚ごとに縦横比が違った。新素材（yakitori_01〜05）は縦向きの写真で比率が揃っているので、高さだけ決めて幅は比率に任せる。傾きは .-right / .-left で付ける。 */ .deco-img img { height: 12.5rem; width: auto; } /* 串は素材では真っ直ぐ縦を向いている。そのまま置くと置物に見えるので、外側へ倒して「見出しの角から覗いている」形にする。左右で向きは対称。傾きはこの箱に掛ける。中の img にはふわふわ（mo-float）が別に掛かるので、同じ要素に transform を二重に書くと片方が消える。 */ .deco-img.-right { top: -2.5rem; right: 2rem; transform: rotate(-25deg); } .deco-img.-left { top: -2.75rem; left: 2rem; transform: rotate(25deg); } /* 同じ角度だと判で押したように見えるので、少しずつ散らす */ .deco-img.-deco03 { transform: rotate(-32deg); } .deco-img.-deco06 { transform: rotate(-17deg); } .deco-img.-deco07 { transform: rotate(18deg); } /* 飲み物（drink_01〜03）は串と扱いが違う。 1. 傾けない。グラスを倒すと中身がこぼれて見えるので、-right / -left の回転をここで打ち消す。動きは mo-float のごく浅い揺れだけに任せる。（この規則は上の角度指定より後に置くこと。詳細度が同じなので順番で決まる） 2. 串より低くする。グラスは横に太いので、同じ高さにすると赤帯を覆ってしまう。 */ .deco-img.-drink { transform: none; } .deco-img.-drink img { height: 9.375rem; } .deco-img.-pt10 { padding-top: 0.625rem; } .deco-img.-pt15 { padding-top: 0.9375rem; } .deco-img.-deco01 { top: -1.875rem; } @media (max-width: 767px) { /* 寸法は .deco-img img の height 一本で決める。ここで持つのは位置だけ。端から少しはみ出させて覗かせている（はみ出しは .campaign の overflow: hidden で切られる）。 */ /* 当選人数を必ず次の行へ送る（440px未満のときだけ）。放っておくと「4〜10位」は1行に収まり「11〜100位」から折り返す、という不揃いが起きる（実機で指摘を受けた）。実測すると、いちばん長い「301〜1,000位 410P（1品分）700名様」が1行に収まるのは 440px から。440px 以上では4行とも収まるので手を出さない。 440px 未満では、収まる行と収まらない行が混ざるくらいなら全部折り返したほうが目が揃う。（収まるまで文字を小さくする手もあるが、「41,000P」という主役の数字まで小さくなるので採らない。）市販のスマホは widest でも430px なので、実機はすべてこちら側に入る。 li::after は flex コンテナの子なので、それ自体がフレックスアイテムになる。幅いっぱいの空アイテムを挟んで改行を作り、人数は order で必ずその後ろへ送る。 */ @media (max-width: 439px) { .campaign__point-high li::after, .campaign__point-low li::after { content: ""; flex-basis: 100%; height: 0; } .campaign__point-high .count, .campaign__point-low .count { order: 1; margin-left: 0; margin-top: 0.125rem; } } .deco-img img { height: 6.25rem; } .deco-img.-drink img { height: 5rem; } .deco-img.-deco01 { top: -1.5rem; right: -0.625rem; } /* 飲み物を置いた2か所。串より太いので端に寄せすぎない */ .deco-img.-deco04 { top: -1.75rem; left: -0.5rem; } .deco-img.-deco05 { top: -1.75rem; left: -0.5rem; } .deco-img.-deco02 { top: -2.25rem; left: -1rem; } .deco-img.-deco03 { top: -2.25rem; right: -1rem; } .deco-img.-deco06 { top: -2rem; right: -0.625rem; } /* 後半（対象店舗・よくある質問）に足したぶん。前半と同じ寸法に揃える。 */ .deco-img.-deco07 { top: -2.25rem; left: -1rem; } .deco-img.-deco08 { top: -2.25rem; right: -1rem; } } .c-list > li { position: relative; padding-left: 0.875rem; line-height: 1.7; } .c-list > li > em { color: #BF1D20; font-weight: bold; } .c-list > li + li { margin-top: 0.5rem; } .c-list > li::before { content: ""; position: absolute; width: 0.5rem; height: 0.5rem; border-radius: 0.5rem; background: #BF1D20; left: 0; top: calc(0.85em - 0.25rem); } @media (max-width: 767px) { .c-list > li { font-size: 0.9375rem; } } .c-list.-sm > li { font-size: 0.9375rem; } .c-list.-sm > li + li { margin-top: 0.25rem; } @media (max-width: 767px) { .c-list.-sm > li { font-size: 0.875rem; } } .c-list.-au > li::before { background: #FA5902; } .c-list.-attention > li::before { background: #BF1D20; } .c-sublist > li { padding-left: 0.875rem; position: relative; margin-top: 0.5rem; font-size: 0.9375rem; line-height: 1.7; } @media (max-width: 767px) { .c-sublist > li { font-size: 0.875rem; } } .c-sublist > li::before { position: absolute; content: ""; width: 0.5rem; height: 0.125rem; border-radius: 3.125rem; background: #BF1D20; left: 0; top: calc(0.85em - 0.0625rem); } .c-notes-list { padding-left: 1em; text-indent: -1em; } .c-button { display: inline-block; background: #FA5902; color: #fff; width: 23.75rem; max-width: 100%; font-size: 1.25rem; font-weight: bold; border-radius: 6.25rem; position: relative; padding: 1rem 2.25rem; text-align: center; } .c-button::before { position: absolute; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 0.5625rem; height: 1rem; background: currentColor; content: ""; -webkit-mask-image: url("assets/icon-arrow.svg"); mask-image: url("assets/icon-arrow.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50%; mask-position: 50%; -webkit-mask-size: contain; mask-size: contain; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 1.625rem; } .c-button.-black { background: black; } @media (max-width: 767px) { .c-button { font-size: 1rem; width: 20rem; } } .c-button-b { display: inline-block; background: #0065B2; color: #fff; max-width: 100%; font-size: 1.25rem; font-weight: bold; border-radius: 6.25rem; position: relative; padding: 0.9375rem 3.4375rem 0.9375rem 2.8125rem; line-height: 1.5; text-align: center; } .c-button-b::before { position: absolute; display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; width: 0.5625rem; height: 1rem; background: currentColor; content: ""; -webkit-mask-image: url("assets/icon-arrow.svg"); mask-image: url("assets/icon-arrow.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50%; mask-position: 50%; -webkit-mask-size: contain; mask-size: contain; width: 0.5rem; height: 0.9375rem; top: 50%; -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); right: 1.625rem; } @media (max-width: 767px) { .c-button-b { font-size: 1rem; } } .c-indent1 { line-height: 1.7; } .c-indent1 > li { padding-left: 1em; text-indent: -1em; margin-top: 0.375rem; } .mv { width: 100%; background-color: #FCD600; position: relative; } /* KV は画面いっぱいに表示する。旧版は max-width 59.9375rem で中央寄せだったため左右に地色が出ていた。 img に width: 100% を指定しているのは、リセットの max-width: 100% だけでは元画像（PC.png 1200px / SP.png 750px）より大きく引き伸ばせないため。 */ .mv__inner { display: block; width: 100%; margin: 0; padding: 0; position: relative; z-index: 50; } .mv__inner picture { display: block; width: 100%; } .mv__inner img { display: block; width: 100%; height: auto; } .campaign { overflow: hidden; position: relative; /* 旧版は image-6.webp（縦リピートの柄）。素材が無いので、バナー部（bg-banner.png）と同じ「黄＋白ドット」の意匠をCSSで再現している。 PCだけ地色が無く灰色に抜けていたのも、これで解消。 */ background-color: #FCD600; /* 大小2サイズの水玉。大きい粒だけだと等間隔の格子に見えて機械的なので、半目ずらした位置に小さい粒を足している。柄に線（ストライプ・市松）を使わないのは、この区間では「さらに8がつく順位には追加ポイント！」のように文字が白箱の外、背景の上に直接乗るため。連続した線は文字のストロークと干渉して読みにくくなる。独立した粒なら干渉しない。 */ background-image: radial-gradient(circle, rgba(255, 255, 255, 0.5) 18%, transparent 19%), radial-gradient(circle, rgba(255, 255, 255, 0.34) 9%, transparent 10%); background-size: 2rem 2rem, 2rem 2rem; background-position: 0 0, 1rem 1rem; /* 下余白は後半の章（.campaign__chapter2）側で持つ。ここに持たせると、章の地の下に黄色の帯が残ってしまう。 */ padding: 3rem 0 0; } @media (max-width: 767px) { .campaign { /* SP版も PC と同じ柄。画面が狭いぶん粒の間隔を詰める。 2層あるので size / position を両方とも指定し直すこと。 */ background-size: 1.5rem 1.5rem, 1.5rem 1.5rem; background-position: 0 0, 0.75rem 0.75rem; } } /* ========================================================================== 後半（確かめる・読む）の地全長の約4分の3が同じ黄色の水玉だったため、どこまで読んだのかの手がかりが無かった。順位表から先は「探す・確認する」作業の章なので、地をクリームに落として章の切れ目を作る。ねらい・赤い順位パネルが黄色の上より際立つ・店舗カード（白）が地から浮いて読みやすくなる・水玉の意匠は残して、前半との連続性は保つドットは白のままだとクリーム地でほぼ消えるので、ブランドの赤をごく薄く敷いている。 ========================================================================== */ .campaign__chapter2 { /* 地はクリームではなく「彩度を落とした黄」。白に近いクリームにしたところ、ドットがほぼ見えず LPの途中で急に素のページになったように見えてしまった。前半と同じ「白ドット」の意匠のまま、地の彩度だけを落として章の違いを出している。白ドットは地が明るいぶん濃いめ。 */ background-color: #FBE3A8; /* 柄は前半と同じ大小2サイズの水玉。地が明るいぶん粒は濃いめ。 */ background-image: radial-gradient(circle, rgba(255, 255, 255, 0.95) 18%, transparent 19%), radial-gradient(circle, rgba(255, 255, 255, 0.6) 9%, transparent 10%); background-size: 2rem 2rem, 2rem 2rem; background-position: 0 0, 1rem 1rem; /* 章の切れ目はここだけ余白を広く取る。 .campaign__block の 4.375rem より明確に広いこと。 */ margin-top: 6.25rem; /* 下余白は .campaign から引き取っている（黄色の帯を残さないため） */ padding: 5rem 0 6.25rem; /* 豆提灯を章の上端に吊るすための基準 */ position: relative; } /* 章の入口に渡す豆提灯。素材（deco-garland.webp 950×180）は左右がつながるタイル。元画像から提灯4つぶんを切り出し、その鏡像を右に継いで作ってある。こうするとタイルの左端と右端が同じ列になるので、敷き詰めても紐が途切れない（元画像の左右端は紐の高さが14pxずれていて、そのままでは継げない）。高さを固定して横に敷くので、画面が広くなっても提灯は大きくならない。紐が章の境目に乗るよう、帯の上端を章の外へ出している。クリックを吸わないよう pointer-events は無効。 */ .chapter2__garland { position: absolute; left: 0; width: 100%; height: 7.5rem; /* 紐は画像の上端にある。帯の高さの2割ほど上へ出すと境界線に乗る。 */ top: -1.5rem; background-image: url("assets/deco-garland.webp"); background-repeat: repeat-x; background-position: left top; /* 幅を auto にして高さで合わせる。でないと提灯が横に潰れる。 */ background-size: auto 100%; pointer-events: none; z-index: 3; } @media (max-width: 767px) { .chapter2__garland { height: 3.25rem; top: -0.625rem; } } @media (max-width: 767px) { .campaign__chapter2 { background-size: 1.5rem 1.5rem, 1.5rem 1.5rem; background-position: 0 0, 0.75rem 0.75rem; margin-top: 3.75rem; padding: 2.5rem 0 3.75rem; } } /* 章の先頭ブロックは、章じたいの padding があるので上余白を持たせない */ .campaign__chapter2 > .l-page-contents > .campaign__rank-block { margin-top: 0; } /* 見出しは白文字＋「＝＝」装飾の透過画像（886〜959×66〜69px）。赤帯の上に重ねる。img の max-width: 100% はリセットで効いているため、 SP で帯より広くなることはない。 */ .campaign__heading { position: relative; text-align: center; margin: 0 auto; background-color: #BF1D20; padding: 1.5625rem 0.9375rem 1.375rem; } .campaign__inner { padding: 2.1875rem 3.3125rem 2.9375rem; } .campaign__block { margin-top: 4.375rem; position: relative; z-index: 2; } /* 1〜2行しかない事実の箱（キャンペーン期間・ポイント加算時期）。独立した大箱が同じ間隔で続くと、冒頭が細切れに見えてリズムが悪い。余白を詰めて前の箱とひとまとまりにし、「キャンペーンの基本情報」というかたまりに見せる。見出しは探す手がかりなので消さない。 */ .campaign__block.-compact { margin-top: 1.875rem; } .campaign__block.-compact .campaign__inner { padding-top: 1.375rem; padding-bottom: 1.625rem; } .campaign__block:first-child { margin-top: 0 !important; } /* 訴求バナーは複数枚を縦に積む（トリキ晩餐会 / 鳥貴族公式アプリ）。 */ .campaign__bnr { max-width: 51.625rem; margin: -1.25rem auto -3.75rem; display: grid; gap: 1.25rem; } /* バナーと、その下に付く補足文（公式アプリの翠ジンフェス告知）のセット。 */ .campaign__bnr-item { display: grid; gap: 0.75rem; } .campaign__bnr-note { padding: 0.875rem 1.25rem; border: 0.125rem solid #BF1D20; border-radius: 0.5rem; background: #fff; color: #3E2A15; font-weight: bold; font-size: 1rem; line-height: 1.7; text-align: center; } @media (max-width: 767px) { .campaign__bnr-item { gap: 0.5rem; } .campaign__bnr-note { padding: 0.75rem 0.875rem; font-size: 0.875rem; line-height: 1.6; text-align: left; /* 3文とも SP では折り返すので、対応ブラウザでは文節で折る。未対応でも通常の折り返しになるだけで崩れない。 */ word-break: auto-phrase; } } /* 鳥貴族公式アプリのインストール動線。 */ .campaign__appdl { text-align: center; } .campaign__appdl-title { font-weight: bold; font-size: 1.0625rem; line-height: 1.5; color: #3E2A15; } .campaign__appdl-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.5rem; margin-top: 0.75rem; } .campaign__appdl-link { display: inline-block; /* ストアバッジ自体は42pxなので、上下に余白を足して44px以上にする */ padding: 0.125rem 0; border-radius: 0.5rem; transition: transform 0.15s, box-shadow 0.15s; } /* バッジ画像は App Store 448×166、Google Play 558×166 と縦横比が違うため、幅と高さの両方は揃えられない。高さを揃える側に寄せている（Apple・Google のバッジガイドラインが想定する扱い）。 */ .campaign__appdl-link > img { display: block; height: 3.25rem; width: auto; } .campaign__appdl-link:hover, .campaign__appdl-link:focus-visible { transform: translateY(-0.125rem); box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.2); } .campaign__appdl-link:focus-visible { outline: 0.1875rem solid #FA5902; outline-offset: 0.1875rem; } @media (max-width: 767px) { .campaign__appdl-title { font-size: 0.9375rem; } .campaign__appdl-links { gap: 0.625rem 1rem; margin-top: 0.625rem; } .campaign__appdl-link > img { height: 2.625rem; } } /* 各バナーは画像に「タップして詳細を確認する」等が入っているので、カード全体を遷移先へのリンクにしている。 */ .campaign__bnr-link { display: block; border-radius: 0.75rem; overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; } .campaign__bnr-link img { display: block; width: 100%; height: auto; } .campaign__bnr-link:hover, .campaign__bnr-link:focus-visible { transform: translateY(-0.125rem); box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.2); } .campaign__bnr-link:focus-visible { outline: 0.1875rem solid #FA5902; outline-offset: 0.1875rem; } /* 押したときに沈む。スマホには hover が無いので、これが「反応した」と分かる唯一の手がかりになる。 */ .campaign__bnr-link:active { transform: scale(0.985); box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.18); } /* ========================================================================== バナー下端の誘導帯絵だけのバナーは「押せる」と伝わらない、とTLから指摘があった。このLPには既に答えがある。Pontaバナー（.banner__more）は白帯＋オレンジ文字＋矢印で、そこだけ指摘が出ていない。同じ作りを、文字の入っていない2つのバナーにも広げる。帯はリンク（）の内側に置くこと。外に出すと、帯だけが押せるのか絵も押せるのかが分からなくなる。矢印は .c-button と同じ icon-arrow.svg をマスクで使い、ページ内の矢印の形を揃えている。 ========================================================================== */ .bnr-cta { display: block; position: relative; background: #fff; color: #FA5902; font-weight: bold; font-size: 1.125rem; line-height: 1.4; text-align: center; /* 右の矢印と重ならないよう、左右の余白を矢印のぶん広く取る */ padding: 1rem 3rem; } .bnr-cta::after { content: ""; position: absolute; top: 50%; right: 1.625rem; transform: translateY(-50%); width: 0.5625rem; height: 1rem; background: currentColor; -webkit-mask-image: url("assets/icon-arrow.svg"); mask-image: url("assets/icon-arrow.svg"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50%; mask-position: 50%; -webkit-mask-size: contain; mask-size: contain; } @media (max-width: 767px) { .bnr-cta { font-size: 0.9375rem; padding: 0.8125rem 2.25rem; } .bnr-cta::after { right: 1rem; } } @media (max-width: 767px) { .campaign__bnr { margin: 0 auto; } } .campaign__box { position: relative; background: white; border: solid 0.3125rem #BF1D20; } .campaign__text { text-align: center; font-size: 1.375rem; line-height: 1.7272727273; font-weight: bold; } /* ========== カウントダウン ========== countdown.js が data-cd="…" に数字とラベルを書き、 .countdown の data-state を before / during / ended に切り替える。 JSが動かなくても before のまま「--」で出るだけなので崩れない。 before（開催前）… 開始までの残り時間 during（開催中）… 終了までの残り時間。赤をより強く出して煽る ended （終了後）… 数字を伏せて終了メッセージに差し替え。配色も落とす */ /* KV 下端の「キャンペーン期間」帯からそのまま続いて見えるよう、カード（白地＋枠＋影）をやめて全幅の赤帯にしている。 */ .countdown { width: 100%; padding: 1.25rem 1.25rem 1.5rem; background: #B81C22; /* KV画像下端の赤をスポイトした値。境目を出さないため */ text-align: center; box-sizing: border-box; } .countdown__label { font-family: "M PLUS 1"; font-weight: 800; font-size: clamp(1rem, 2.4vw, 1.5rem); letter-spacing: 0.08em; line-height: 1.4; color: #FFF3B1; } .countdown__list { display: flex; align-items: flex-end; justify-content: center; gap: clamp(0.5rem, 1.6vw, 1.25rem); margin-top: 0.75rem; } .countdown__list li { display: flex; align-items: baseline; gap: 0.15em; font-family: "M PLUS 1"; font-weight: 800; } .countdown__list b { display: inline-block; min-width: 1.6em; padding: 0.1em 0.25em; background: #fff; color: #BF1D20; border-radius: 0.375rem; font-size: clamp(1.75rem, 5.2vw, 3.25rem); line-height: 1.1; font-variant-numeric: tabular-nums; } .countdown__list span { font-size: clamp(0.8125rem, 1.8vw, 1.125rem); color: #fff; } /* --- 終了メッセージ。ended 以外では出さない --- */ .countdown__ended { display: none; font-family: "M PLUS 1"; font-weight: 800; line-height: 1.4; } .countdown__ended-main { display: block; font-size: clamp(1.125rem, 2.8vw, 1.75rem); letter-spacing: 0.06em; color: #fff; } .countdown__ended-sub { display: block; margin-top: 0.5rem; font-size: clamp(0.8125rem, 1.8vw, 1.0625rem); font-weight: bold; color: #F0D8C8; } /* --- during（開催中）: 終了が近いことを示すため、より濃い赤に --- */ .countdown[data-state="during"] { background: #8E1518; } /* --- ended（終了後）: 数字を伏せ、赤を沈めて役目を終えた見た目に --- */ .countdown[data-state="ended"] { background: #7A6B5C; } .countdown[data-state="ended"] .countdown__label, .countdown[data-state="ended"] .countdown__list { display: none; } .countdown[data-state="ended"] .countdown__ended { display: block; } @media (max-width: 767px) { .countdown { padding: 0.875rem 0.75rem 1rem; } .countdown__list { margin-top: 0.5rem; } } .campaign__text.-important { margin-top: 1.875rem; color: #BF1D20; } .campaign__text a { color: #BF1D20; text-decoration-line: underline; text-decoration-style: solid; } .campaign__text.small { font-size: 1.125rem; margin: 10px auto -10px; } @media (max-width: 767px) { .campaign__text.small { font-size: 14px; margin: 10px auto 0; } } .campaign__subBox { margin: 1.75rem auto 0; padding: 1.5625rem 2.5rem; background: #F0F0F0; border-radius: 0.25rem; } .campaign__subBox .c-list.-sm > li { font-size: 1rem; } @media (max-width: 767px) { .campaign__subBox .c-list.-sm > li { font-size: 0.875rem; } } .campaign__subBox .-red { color: #BF1D20; font-weight: bold; } .campaign__iphoneImg { margin: 1.5625rem auto 0; width: 26.25rem; display: block; } /* ========== セクションナビ ========== 旧 .rank-btn（button.webp の画像1枚）を置き換えたページ内目次。「最新の順位」は -main で塗りつぶし、他は白抜きにして主従を付ける。 */ .secnav { margin-bottom: -1.25rem; } @media (max-width: 767px) { .secnav { margin-bottom: -0.5rem; } } /* 主導線。旧 button.webp の位置に相当する赤いボタン。 */ .secnav__main { display: flex; align-items: baseline; justify-content: center; gap: 0.25rem; max-width: 51.625rem; margin: 0 auto; padding: 1rem 1.5rem; border: 0.1875rem solid #BF1D20; border-radius: 10rem; background: #BF1D20; color: #fff; box-shadow: 0 0.25rem 0 #8E1417; font-family: "M PLUS 1"; font-weight: 800; line-height: 1.3; text-decoration: none; transition: background-color 0.15s, border-color 0.15s, transform 0.15s; } .secnav__main:hover { background: #FA5902; border-color: #FA5902; box-shadow: 0 0.25rem 0 #C24602; transform: translateY(-0.125rem); } .secnav__main:focus-visible { outline: 0.1875rem solid #FA5902; outline-offset: 0.1875rem; } .secnav__label { font-size: clamp(1.25rem, 3.2vw, 1.75rem); } .secnav__sub { font-size: clamp(0.9375rem, 2vw, 1.1875rem); } /* サブ項目。PCでは5つを1行に収める。折り返さないぶん、幅に応じて文字と余白を詰める（clamp）。 */ /* 7項目あるので1行には入らない。以前は5項目を nowrap で1行に収めていたが、「鳥貴族のおトク情報」と「もらえるポイント」を足した時点で成立しなくなった。無理に詰めると文字が潰れるので、折り返しを許して2行にしている。 */ .secnav__list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.5rem, 1vw, 0.75rem); max-width: 58rem; margin: 0.75rem auto 0; padding: 0; list-style: none; } .secnav__item { display: block; padding: 0.625rem clamp(0.625rem, 1.2vw, 1rem); border: 0.1875rem solid #BF1D20; border-radius: 10rem; background: #fff; color: #BF1D20; font-family: "M PLUS 1"; font-weight: 800; font-size: clamp(0.875rem, 1.3vw, 1rem); line-height: 1.3; white-space: nowrap; text-decoration: none; transition: background-color 0.15s, color 0.15s, transform 0.15s; } .secnav__item:hover { background: #BF1D20; color: #fff; transform: translateY(-0.125rem); } .secnav__item:focus-visible { outline: 0.1875rem solid #FA5902; outline-offset: 0.1875rem; } /* ===== いま読んでいるセクション ===== motion.js が aria-current="location" を付け替える。これは装飾ではなく道案内なので、:root[data-anim="on"] の配下には置かないこと。動きを減らす設定の人にも出す必要がある。リングを白にしているのは、このナビが黄色（#FCD600）の上に乗っているため。金色のリングでは地と同化して見えない。ホバーも同じ赤塗りになるので、リングの有無で区別している。 */ .secnav__item[aria-current] { background: #BF1D20; color: #fff; box-shadow: 0 0 0 0.1875rem #fff; } .secnav__main[aria-current] { box-shadow: 0 0.25rem 0 #8E1417, 0 0 0 0.1875rem #fff; } /* SPは1行に収まらないので折り返す。 */ @media (max-width: 767px) { .secnav__main { padding: 0.875rem 1rem; } /* SPはピルの一覧を出さない。追従CTAに「目次」が常にあり、そこから全8項目へ飛べるので、同じものを上にもう一度並べると画面の上の271pxが目次で埋まる。残す赤いボタン（.secnav__main）は目次ではなく主導線。これで役割が分かれて重複が無くなる。最新の順位 … 赤いボタン対象店舗 … 追従CTAの主リンク（開催前の状態）残り6項目 … 追従CTAの目次シート PCには追従CTAが出ないので、PCでは7項目とも出したまま。 */ .secnav__list { display: none; } } @media (max-width: 767px) { .campaign { /* 下余白は .campaign__chapter2 側に持たせている */ padding: 1.875rem 0 0; } .campaign__heading { padding: 0.9375rem 0.625rem 0.75rem; } .campaign__inner { padding: 0.9375rem 1.25rem 1.25rem; } .campaign__block { margin-top: 2.5rem; } .campaign__block.-compact { margin-top: 1.125rem; } .campaign__block.-compact .campaign__inner { padding-top: 0.75rem; padding-bottom: 0.875rem; } .campaign__box { border-width: 0.1875rem; } .campaign__text { font-size: 1rem; line-height: 1.6; } .campaign__text.-important { margin-top: 0.9375rem; color: #BF1D20; } .campaign__subBox { padding: 1.25rem 1rem; } } .campaign__point-block { position: relative; background: url("assets/image-10.webp") no-repeat center center/100%; padding: 3.75rem 0 2.5rem; } .campaign__point-block > img { width: 100%; } @media (max-width: 767px) { /* 親（.l-page-contents-point）の左右余白1.25remを打ち消して画面いっぱいに出す。 100vw だとスクロールバーの幅まで含んでしまい、幅の狭い端末（320px級）で横スクロールが発生する。 */ .campaign__point-block > img { width: calc(100% + 2.5rem); max-width: none; margin: 0 -1.25rem; } } .campaign__point-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 48.9375rem; width: 100%; margin: 1.25rem auto 0; font-family: "M PLUS 1"; line-height: 1.6; font-weight: 800; } .campaign__point-high { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 0.875rem; } .campaign__point-high li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .campaign__point-high .rank { font-size: 1.375rem; color: #fff; padding: 0.125rem 1rem 0.3125rem; background-color: #BF1D20; border-radius: 30px; } .campaign__point-high .point { font-size: 2rem; margin-left: 0.8125rem; } .campaign__point-high .note { font-size: 1.75rem; } /* 当選人数。金額より一段下の情報なので小さく、少し離して置く。行が長くなるので、入りきらないときは折り返させる（下の li の flex-wrap）。 */ .campaign__point-high .count, .campaign__point-low .count { margin-left: 0.625rem; padding: 0.0625rem 0.625rem 0.1875rem; border-radius: 10rem; background: rgba(191, 29, 32, 0.1); color: #BF1D20; font-size: 1rem; white-space: nowrap; } .campaign__point-high li, .campaign__point-low li { flex-wrap: wrap; row-gap: 0.25rem; } /* Pontaポイントの履歴に出る名称の一覧。利用者が自分の履歴と1文字ずつ見比べる場所なので、本文と混ざらないよう枠で囲い、行ごとに切って読みやすくする。 */ .campaign__ptname { max-width: 34rem; margin: 1rem auto 0; padding: 1rem 1.25rem; border: 0.125rem solid #E2D9CE; border-radius: 0.625rem; background: #FFFBF2; list-style: none; text-align: left; } /* 全角なので長い。狭い画面では折り返す。そのとき2行目を字下げしないと、次の名称との境目が分からなくなる。ぶら下げインデントで、1件が1かたまりに見えるようにする。 */ .campaign__ptname > li { padding-left: 1.25em; text-indent: -1.25em; font-family: "Noto Sans JP"; font-weight: bold; font-size: 0.9375rem; line-height: 1.6; color: #3E2A15; } .campaign__ptname > li + li { margin-top: 0.5rem; } @media (max-width: 767px) { .campaign__ptname { padding: 0.875rem 1rem; } .campaign__ptname > li { font-size: 0.8125rem; } } /* 「期間中の決済金額上位1,000位の方にプレゼント」。表の前提条件。これが無いと下の追加ポイントとの区別がつかない。 */ .campaign__point-lead { max-width: 48.9375rem; width: 100%; margin: 0 auto 1rem; font-family: "M PLUS 1"; font-weight: 800; font-size: clamp(0.9375rem, 1.8vw, 1.25rem); line-height: 1.5; text-align: center; color: #BF1D20; } .campaign__point-low { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; row-gap: 0.875rem; } .campaign__point-low li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .campaign__point-low .rank { font-size: 1.125rem; color: #BF1D20; padding: 0.125rem 1rem 0.3125rem; background-color: #fff; border-radius: 30px; } .campaign__point-low .point { font-size: 1.5rem; margin-left: 0.8125rem; } .campaign__point-low .note { font-size: 1.375rem; } /* 2026年版スペックで追加。8がつく順位への追加ポイント。ポイント表（.campaign__point-box）の直下に置き、同じ M PLUS 1 / 800 の字面と赤ピル（#BF1D20）のあしらいを踏襲している。見出し用の画像素材が無いためテキストで組み、clamp() で幅に追従させる。 */ .campaign__bonus { max-width: 48.9375rem; width: 100%; margin: 2.5rem auto 0; font-family: "M PLUS 1"; font-weight: 800; line-height: 1.6; text-align: center; } .campaign__bonus-title { font-size: clamp(1.125rem, 2.6vw, 1.75rem); color: #BF1D20; margin-bottom: 1.25rem; } /* inline-flex で最長行の幅に縮め、親の text-align: center で全体を中央に置く。各行は左揃えなので、ピルと金額の開始位置が3行で揃う。 */ .campaign__bonus-list { display: inline-flex; flex-direction: column; align-items: flex-start; row-gap: 0.875rem; text-align: left; } .campaign__bonus-list li { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0.8125rem; row-gap: 0.25rem; } .campaign__bonus-list .rank { font-size: 1.375rem; color: #fff; padding: 0.125rem 1rem 0.3125rem; background-color: #BF1D20; border-radius: 30px; min-width: 7rem; text-align: center; flex: none; } .campaign__bonus-list .point { font-size: clamp(1.0625rem, 2.1vw, 1.625rem); } /* 当選人数。金額と同じ行に、小さいピルで添える。 */ .campaign__bonus-list .count { display: inline-block; padding: 0.0625rem 0.625rem 0.1875rem; border-radius: 10rem; background: #FFF3B1; color: #BF1D20; font-size: 0.875rem; white-space: nowrap; flex: none; } /* 2つある追加ポイントの小見出し。「末尾が8の順位すべて」と「8位・88位・888位ちょうど」は別の賞なので、ここで言い切らないと同じものだと誤解される。 */ .campaign__bonus-sub { margin-bottom: 0.625rem; font-size: clamp(0.875rem, 1.7vw, 1.0625rem); color: #3E2A15; } .campaign__bonus-list + .campaign__bonus-sub { margin-top: 1.5rem; } .campaign__bonus-note { margin-top: 1rem; font-family: "Noto Sans JP"; font-weight: bold; font-size: 0.8125rem; line-height: 1.6; color: #3E2A15; } @media (max-width: 767px) { .campaign__bonus-list .note { margin-left: 0.375rem; font-size: 0.75rem; } .campaign__bonus-note { margin-top: 0.75rem; text-align: left; } } @media (max-width: 767px) { .campaign__bonus { margin-top: 1.5rem; } .campaign__bonus-title { margin-bottom: 0.875rem; } .campaign__bonus-list { row-gap: 0.625rem; } .campaign__bonus-list .rank { font-size: 1.125rem; min-width: 4.75rem; } } @media (max-width: 767px) { .campaign__point-block { padding: 1.25rem 0 1.875rem; background: none; position: relative; } .campaign__point-block::before { display: block; content: ""; width: calc(100% + 2.5rem); height: 29.875rem; background: url("assets/image-11.webp") no-repeat center center/100%; position: absolute; top: -7.5rem; left: -1.25rem; } .campaign__point-block img { position: relative; } .campaign__point-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 0; } .campaign__point-high { row-gap: 0.625rem; margin-top: 0.625rem; } .campaign__point-high li { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-left: 2.25rem; position: relative; } .campaign__point-high .rank { position: absolute; top: calc(50% - 1.125rem); left: calc(50% - 6.875rem); font-size: 1.125rem; } .campaign__point-high .point { font-size: 1.75rem; } .campaign__point-high .note { font-size: 1.5rem; margin-top: -0.3125rem; } .campaign__point-low { margin: 1.25rem auto 1rem; } .campaign__point-low li { margin: 0 auto; } .campaign__point-low .rank { font-size: 1rem; } .campaign__point-low .point { font-size: 1.25rem; } .campaign__point-low .note { font-size: 1.125rem; } } .campaign__rank-block { background-color: #BF1D20; padding: 1.875rem 3.4375rem 3.125rem; max-width: 51.625rem; width: 100%; display: block; margin: 0 auto; /* シャインの帯をパネルの内側で切るため。帯は ::after で、位置の基準もはみ出しの処理もここで持つ。 */ position: relative; overflow: hidden; } @media (max-width: 767px) { .campaign__rank-block { padding: 1.875rem 0.9375rem 1.875rem; } } /* 「最新順位はこちら」はここだけ画像（rank.webp）のまま。 */ .campaign__rank-block > img { width: 26.8125rem; max-width: 100%; display: block; margin: 0 auto; } .campaign__rank-text { margin-top: 1.25rem; font-family: "M PLUS 1"; color: #fff; font-weight: 800; text-align: center; line-height: 1.2; } .campaign__rank-text > .-heading { font-size: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.125rem; } .campaign__rank-text > .-heading::before, .campaign__rank-text > .-heading::after { display: inline-block; content: ""; height: 1.8125rem; width: 0.9375rem; background: url("assets/image-12.webp") no-repeat center bottom/100% 100%; } .campaign__rank-text > .-heading::before { margin-right: 0.625rem; } .campaign__rank-text > .-heading::after { -webkit-transform: scale(-1, 1); -ms-transform: scale(-1, 1); transform: scale(-1, 1); } @media (max-width: 767px) { .campaign__rank-text > .-heading { font-size: 1.125rem; } .campaign__rank-text > .-heading::before, .campaign__rank-text > .-heading::after { width: 0.625rem; height: 1.25rem; } } .campaign__rank-text > .-kikan { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.625rem; font-size: 1.375rem; margin-top: 0.75rem; } .campaign__rank-text > .-kikan > span { background: white; border-radius: 0.25rem; color: #BF1D20; display: inline-block; padding: 0 0.4375rem 0.125rem; } @media (max-width: 767px) { .campaign__rank-text > .-kikan { font-size: 1rem; gap: 0.375rem; } .campaign__rank-text > .-kikan > span { padding: 0 0.1875rem 0.125rem; } } .campaign__rank-text > .-date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.75rem; font-size: 1.875rem; margin-top: 1.5rem; } .campaign__rank-text > .-date::before, .campaign__rank-text > .-date::after { display: inline-block; content: ""; height: 0.625rem; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: url("assets/image-13.webp") no-repeat center center/100% 100%; } @media (max-width: 767px) { .campaign__rank-text > .-date { font-size: 1.125rem; margin-top: 1.25rem; gap: 0.5rem; } .campaign__rank-text > .-date::before, .campaign__rank-text > .-date::after { height: 0.375rem; } } .campaign__rank-notes { margin-top: 1.5625rem; } @media (max-width: 767px) { .campaign__rank-notes { font-size: 0.9375rem; } } .campaign__rank-notes li { color: #fff; } .campaign__rank-box { width: calc(100% + 1rem); margin-left: -0.5rem; margin-top: 0.75rem; border-collapse: separate; border-spacing: 0.5rem; font-family: "M PLUS 1"; font-weight: 800; line-height: 1.4; } @media (max-width: 767px) { .campaign__rank-box { border-spacing: 0.1875rem; width: calc(100% + 0.5rem); margin-left: -0.25rem; } } .campaign__rank-box .-number { font-size: 1.875rem; text-align: center; } @media (max-width: 767px) { .campaign__rank-box .-number { font-size: 1rem; } } .campaign__rank-box th, .campaign__rank-box td { padding: 0.625rem 1.5625rem; } @media (max-width: 767px) { .campaign__rank-box th, .campaign__rank-box td { padding: 0.625rem 0.375rem; } } .campaign__rank-box th { background-color: #FFF3B1; font-size: 1.75rem; } @media (max-width: 767px) { .campaign__rank-box th { font-size: 1rem; } } .campaign__rank-box td { position: relative; background-color: #fff; font-size: 2rem; } .campaign__rank-box td:not(.-number) { text-align: end; } @media (max-width: 767px) { .campaign__rank-box td { font-size: 1.125rem; } } /* ========== 次回更新までのカウントダウン ========== 順位表の上に置く1行。KV下の赤帯と役割がぶつからないよう、あちらは「期限」、こちらは「次に情報が出る時刻」に徹して小さく出す。中身は countdown.js が更新日程表から拾って入れる。 */ .rank-next[hidden] { display: none; } .rank-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; margin: 1rem auto 0; padding: 0.5rem 1.125rem; width: -webkit-fit-content; width: fit-content; max-width: 100%; border: 0.125rem solid rgba(255, 243, 177, 0.6); border-radius: 10rem; font-family: "M PLUS 1"; font-weight: 800; font-size: 1rem; line-height: 1.4; color: #fff; } .rank-next__label { padding: 0.125rem 0.625rem; border-radius: 0.25rem; background: #FFF3B1; color: #BF1D20; font-size: 0.875rem; } .rank-next__time > b { margin: 0 0.125rem; color: #FFF3B1; font-size: 1.25rem; } @media (max-width: 767px) { .rank-next { gap: 0.375rem; padding: 0.5rem 0.875rem; font-size: 0.8125rem; } .rank-next__label { padding: 0.125rem 0.4375rem; font-size: 0.75rem; } .rank-next__time > b { font-size: 1rem; } } /* 数字が入るまでの仮置き。鳥貴族のシンボルである ∞ を置き、データではないことが分かるよう色を落として少し小さくしている。 */ .campaign__rank-box td.-tbd { /* 値ではないので、数字の右寄せではなく中央に置く */ text-align: center; color: #C9A227; font-size: 2.25rem; letter-spacing: 0.05em; } @media (max-width: 767px) { .campaign__rank-box td.-tbd { font-size: 1.375rem; } } .campaign__rank-tbd { margin-top: 0.75rem; text-align: center; font-weight: bold; font-size: 0.875rem; line-height: 1.5; color: rgba(255, 255, 255, 0.85); } .campaign__rank-tbd > b { margin-right: 0.125rem; color: #FFF3B1; font-size: 1.125rem; } /* ========== ラッキー賞 ========== パネルも表も通常ランキングと同じクラス（.campaign__rank-block / .campaign__rank-box）を使っている。ここはその差分だけ。見出しが画像（rank.webp）ではなくテキストなので、その分の指定が主。 */ /* 通常ランキングの後ろに続く特別枠。破線で区切るより金枠のほうが「別の賞」であることが伝わるので、囲みだけで分けている。 */ .campaign__lucky-block { margin-top: 2.5rem; padding: 1.75rem 1.5rem 1.5rem; border: 0.1875rem solid #FFF3B1; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.12); /* 提灯を金枠の肩から吊るすための基準 */ position: relative; } @media (max-width: 767px) { .campaign__lucky-block { margin-top: 1.75rem; padding: 1.25rem 0.75rem 1rem; } } /* ========================================================================== 祭提灯（ラッキー賞の金枠の肩に吊るす）枠の上端に半分かかる位置に置くと「吊り下がっている」ように見える。地が赤パネル（#BF1D20）なので、提灯の赤い胴は沈む。読めているのは黒い金具と白い「祭」の丸で、その2つが枠線にかかる高さに置くこと。親は .campaign__rank-block（overflow: hidden）の内側にあるが、枠はパネルの余白より内側なので切られない。 ========================================================================== */ /* top は width の半分のマイナス。こうすると枠線が提灯の胴の中ほどを通り、枠から吊り下がっているように見える。大きさを変えるときは top も連動させること。 */ .lantern { position: absolute; top: -3.25rem; width: 6.5rem; z-index: 4; pointer-events: none; } .lantern img { display: block; width: 100%; height: auto; } .lantern.-l1 { left: 1.25rem; } /* 左右で少し大きさと高さを変えると、並んで吊るした感じが出る */ .lantern.-l2 { right: 1.25rem; width: 5.5rem; top: -2.75rem; } @media (max-width: 767px) { /* SPは枠が狭く、中央の「8がつく順位の方には」との間が詰まる。 PCほど大きくはできない。 */ .lantern { width: 3.75rem; top: -1.875rem; } .lantern.-l1 { left: 0.25rem; } .lantern.-l2 { right: 0.25rem; width: 3.125rem; top: -1.5625rem; } } .campaign__lucky-lead { margin-top: 0.75rem; text-align: center; font-family: "M PLUS 1"; font-weight: 800; line-height: 1.5; font-size: clamp(0.875rem, 1.9vw, 1.25rem); color: #fff; } .campaign__lucky-lead > b { color: #FFF3B1; } /* 888位は3つの中でいちばん手前。そこだけ目印を出す。 */ .campaign__rank-box .-pick > td { background-color: #FFF8D0; } .campaign__rank-box .-pick > td.-number::after { position: absolute; content: "ねらいめ"; left: 50%; bottom: -0.5rem; transform: translateX(-50%); padding: 0.0625rem 0.5rem; border-radius: 10rem; background: #FA5902; color: #fff; font-size: 0.75rem; line-height: 1.5; white-space: nowrap; } @media (max-width: 767px) { .campaign__rank-box .-pick > td.-number::after { bottom: -0.4375rem; padding: 0 0.3125rem; font-size: 0.625rem; } } /* 通常ランキング。パネル先頭（rank.webp と次回更新の直後）に来る。 */ .campaign__rank-main { margin-top: 1.5rem; } @media (max-width: 767px) { .campaign__rank-main { margin-top: 1.25rem; } } .campaign__rank-subtitle { text-align: center; font-family: "M PLUS 1"; font-weight: 800; line-height: 1.25; color: #fff; font-size: clamp(1.25rem, 3vw, 1.875rem); } .campaign__lucky-title { font-family: "M PLUS 1"; font-weight: 800; text-align: center; line-height: 1.25; color: #fff; } .campaign__lucky-title > .-sub { display: block; font-size: clamp(0.875rem, 1.9vw, 1.25rem); } .campaign__lucky-title > .-main { display: block; margin-top: 0.25rem; color: #FFF3B1; font-size: clamp(1.875rem, 4.6vw, 2.875rem); letter-spacing: 0.08em; } .campaign__rank-box .king { z-index: 5; line-height: 1; vertical-align: bottom; text-shadow: 0.125rem 0.125rem 0 white, -0.125rem 0.125rem 0 white, 0.125rem -0.125rem 0 white, -0.125rem -0.125rem 0 white; } @media (max-width: 767px) { .campaign__rank-box .king { text-shadow: 0.0625rem 0.0625rem 0 white, -0.0625rem 0.0625rem 0 white, 0.0625rem -0.0625rem 0 white, -0.0625rem -0.0625rem 0 white; } } .campaign__rank-box .king::after { position: absolute; content: ""; width: 4.5rem; height: 3.5rem; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } @media (max-width: 767px) { .campaign__rank-box .king::after { width: 3.5rem; height: 2.5rem; } } .campaign__rank-box .king-01::after { background: url("assets/rank1.svg") no-repeat center center/100% auto; } .campaign__rank-box .king-02::after { background: url("assets/rank2.svg") no-repeat center center/100% auto; } .campaign__rank-box .king-03::after { background: url("assets/rank3.svg") no-repeat center center/100% auto; } /* ========================================================================== 順位の目安チェッカー赤パネルの中に置くので、ラッキー賞の金枠と同じ囲みの作法に合わせる。ただし「入力して使う道具」なので、賞の枠より枠線を薄くして、ポイントの金額より目立たないようにしている。 ========================================================================== */ .rankcheck { margin-top: 2.5rem; padding: 1.75rem 1.5rem 1.5rem; border: 0.125rem solid rgba(255, 243, 177, 0.55); border-radius: 0.75rem; background: rgba(0, 0, 0, 0.12); text-align: center; } .rankcheck[hidden] { display: none; } .rankcheck__title { font-family: "M PLUS 1"; font-weight: 800; font-size: clamp(1.0625rem, 2.2vw, 1.375rem); line-height: 1.4; color: #FFF3B1; } .rankcheck__lead { margin-top: 0.5rem; font-family: "Noto Sans JP"; font-weight: bold; font-size: 0.8125rem; line-height: 1.6; color: #fff; } /* 赤い地の上で、白い地の文に対して淡い黄色というだけでは「押せる」と伝わらない（太さも地の文と同じ bold）。決済履歴の締めのリンクは下線付きなので、そちらに揃える。 */ .rankcheck__lead > a { color: #FFF3B1; text-decoration: underline; text-underline-offset: 0.15em; } .rankcheck__form { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.625rem; margin-top: 1rem; } /* 入力欄と「円」をひとかたまりの白い箱に見せる */ .rankcheck__field { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.875rem; border-radius: 0.625rem; background: #fff; } .rankcheck__field:focus-within { box-shadow: 0 0 0 0.1875rem #FCD600; } .rankcheck__input { width: 9rem; min-height: 3rem; border: 0; background: transparent; font-family: "M PLUS 1"; font-weight: 800; font-size: 1.25rem; text-align: right; color: #3E2A15; } .rankcheck__input:focus { outline: none; } .rankcheck__unit { flex: none; font-family: "M PLUS 1"; font-weight: 800; font-size: 1rem; color: #3E2A15; } .rankcheck__btn { flex: none; min-height: 3rem; padding: 0 1.75rem; border: 0; border-radius: 10rem; background: #FCD600; color: #BF1D20; font-family: "M PLUS 1"; font-weight: 800; font-size: 1.0625rem; cursor: pointer; transition: transform 0.15s, filter 0.15s; } .rankcheck__btn:hover { filter: brightness(1.06); } .rankcheck__btn:active { transform: scale(0.97); } .rankcheck__btn:focus-visible { outline: 0.1875rem solid #fff; outline-offset: 0.1875rem; } .rankcheck__result { margin-top: 1rem; padding: 0.875rem 1rem; border-radius: 0.625rem; background: #FFF8E1; font-family: "Noto Sans JP"; font-weight: bold; font-size: 0.9375rem; line-height: 1.7; color: #3E2A15; } .rankcheck__result[hidden] { display: none; } /* 順位と差額だけ赤く大きく。ここだけ読めば用が足りるようにする。 */ .rankcheck__result b { font-family: "M PLUS 1"; font-weight: 800; font-size: 1.25em; color: #BF1D20; } /* 集計前の案内。入力欄を止めている理由をここで言う。 */ .rankcheck__wait { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 0.625rem; background: rgba(255, 255, 255, 0.14); font-family: "Noto Sans JP"; font-weight: bold; font-size: 0.875rem; line-height: 1.6; color: #FFF3B1; } .rankcheck__wait[hidden] { display: none; } /* 使えない状態。入力欄とボタンを沈めて、押せないことを見た目で伝える。 */ .rankcheck.-waiting .rankcheck__field, .rankcheck.-waiting .rankcheck__btn { opacity: 0.45; } .rankcheck.-waiting .rankcheck__btn { cursor: default; } .rankcheck__note { margin-top: 0.875rem; font-family: "Noto Sans JP"; font-weight: bold; font-size: 0.75rem; line-height: 1.6; color: rgba(255, 255, 255, 0.85); } @media (max-width: 767px) { .rankcheck { margin-top: 1.75rem; padding: 1.25rem 0.875rem 1rem; } .rankcheck__input { width: 7.5rem; font-size: 1.125rem; } .rankcheck__btn { padding: 0 1.25rem; font-size: 1rem; } } /* 更新日程。「次回更新まで」のカウントダウンと同じ話題なので、赤パネル（.campaign__rank-block）の中に入れている。上に破線を引いて、ランキング／ラッキー賞と区切る。 */ .campaign__date-block { margin-top: 2.5rem; padding-top: 2.1875rem; border-top: 0.125rem dashed rgba(255, 255, 255, 0.45); } @media (max-width: 767px) { .campaign__date-block { margin-top: 1.75rem; padding-top: 1.5rem; } } /* 旧版は PC/SP で別画像（