/* ========================================================================== Variables ========================================================================== */ :root { --color-text: #222; --color-text-muted: #444; --color-white: #fff; --color-bg: #1e1e1e; --color-bg-deep: #1e1805; --color-bg-quiz: #1a1a1a; --color-lineup: #141414; /* Figma 132:10786 — linear #FDD23E → #FFEEBE → #FDD657 */ --color-nav-start: #fdd23e; --color-nav-mid: #ffeebe; --color-nav-end: #fdd657; --color-blue: #003893; --color-blue-menu: #003464; --color-blue-soft: #1a4fa0; --color-pink: #e03a6e; --color-red: #c4000b; --color-wink-bg: #fdcfc8; --color-border-blue: #003893; --color-border-pink: #e85a8a; --font-sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; --font-serif: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; --content-sp: 100%; --content-pc: 846px; --radius-card: 24px; --radius-pill: 999px; --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.18); --ease: 0.25s ease; --section-pad-sp: 40px; --section-pad-pc: 64px; } /* ========================================================================== Page variants（） ========================================================================== */ html[data-taiyaki-loop="off"] .taiyaki-loop { display: none; } html[data-lineup-float="off"] .lineup__float { display: none; } html[data-campaign="off"] .campaign, html[data-campaign="off"] .local-nav__item:has(a[href="#campaign"]) { display: none; } /* キャンペーン非表示時: ラインナップ上ハブの下地（ラインナップと同背景） */ html[data-campaign="off"] .lineup-spacer { display: block; } /* いちご＆ミルクはキャンペーンと独立して切替 */ html[data-product-ichigo="off"] #product-ichigo, html[data-product-ichigo="off"] .product--ichigo { display: none; } /* ========================================================================== Base ========================================================================== */ html { scroll-behavior: smooth; } body { position: relative; font-family: var(--font-sans); line-height: 1.7; color: var(--color-text); -webkit-font-smoothing: antialiased; } img { width: 100%; height: auto; } a { transition: opacity var(--ease), transform var(--ease); } a:hover { opacity: 0.85; } a:focus-visible { outline: 2px solid var(--color-nav-mid); outline-offset: 3px; } .u-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== Layout ========================================================================== */ .l-main { position: relative; width: 100%; overflow-x: clip; } /* ========================================================================== KV ========================================================================== */ .kv { position: relative; width: 100%; background-color: #c4000b; overflow: hidden; } .kv__visual { width: 100%; } .kv__img { display: block; width: 100%; height: auto; object-fit: cover; object-position: center top; } .kv__img-product { width: 65.7%; top: 0; left: 0; position: absolute; } @media (max-width: 767px) { .kv__img-product { width: 100.2%; max-width: 100.2%; top: auto; bottom: 0; } } .kv__img-badge { width: 18.5%; top: 11.3%; left: 49.2%; position: absolute; } @media (max-width: 767px) { .kv__img-badge { width: 43.3%; top: 6.3%; left: 3.9%; } } .kv__img-title { width: 37.3%; top: -4.3%; left: 61.2%; position: absolute; } @media (max-width: 767px) { .kv__img-title { width: 63.2%; top: -2.2%; left: 38.6%; } } .kv__img-deco { width: 28.9%; top: 3.9%; left: 27.1%; position: absolute; } @media (max-width: 767px) { .kv__img-deco { display: none; } } /* KV load animation order: bg/deco (static) → product → title → badge */ .kv__img-product, .kv__img-title, .kv__img-badge { opacity: 0; animation-duration: 1s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); animation-fill-mode: forwards; } .kv__img-product { transform: translateX(-20px); animation-name: kv-in-from-left; animation-delay: 0.2s; } .kv__img-title { transform: translateY(-20px); animation-name: kv-in-from-top; animation-delay: 0.4s; } .kv__img-badge { transform: scale(1.1); animation-name: kv-in-scale; animation-delay: 1.4s; } @media (max-width: 767px) { .kv__img-product { transform: translateY(20px); animation-name: kv-in-from-bottom; } } @keyframes kv-in-from-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } @keyframes kv-in-from-bottom { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes kv-in-from-top { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes kv-in-scale { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: scale(1); } } /* ========================================================================== Local Nav ========================================================================== */ .local-nav { position: relative; z-index: 100; background-color: var(--color-nav-start); background-image: url("../images/nav_bg.webp"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } .local-nav__list { display: flex; align-items: stretch; justify-content: center; max-width: 750px; padding-right: 30px; margin-inline: auto; } @media (max-width: 767px) { .local-nav__list { padding-right: 5px; } } .local-nav__item { position: relative; } .local-nav__item:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: 0; width: 1px; height: 40%; background-color: rgba(255, 255, 255, 0.55); transform: translateY(-50%); } .local-nav__link { display: flex; align-items: center; justify-content: center; min-height: 98px; padding: 12px 60px; color: var(--color-white); } @media (hover: hover) { .local-nav__link:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.12); } } @media (max-width: 767px) { .local-nav__link { min-height: 40px; padding: 10px 24px; } } .local-nav__label { display: block; width: auto; } .local-nav__label--campaign { width: 142px; } @media (max-width: 767px) { .local-nav__label--campaign { width: 56px; } } .local-nav__label--lineup { width: 145px; } @media (max-width: 767px) { .local-nav__label--lineup { width: 58px; } } .local-nav__label--quiz { width: 67px; } @media (max-width: 767px) { .local-nav__label--quiz { width: 27px; } } /* ========================================================================== Float nav (ハンバーガー) — ページ内ナビ通過後に表示 開パネル: Figma 132:12221 ========================================================================== */ .float-nav { position: fixed; top: 24px; right: 48px; z-index: 200; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; } @media (max-width: 767px) { .float-nav { top: 16px; right: 18px; } } .float-nav.is-shown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .float-nav[hidden] { display: block; } .float-nav__wrapper { position: relative; display: flex; flex-direction: column; align-items: flex-end; } .float-nav__toggle { display: block; width: 88px; padding: 0; border: 0; background: transparent; cursor: pointer; line-height: 0; opacity: 1; transition: opacity 0.2s ease, visibility 0.2s ease; } @media (max-width: 767px) { .float-nav__toggle { width: 68px; } } .float-nav.is-open .float-nav__toggle { opacity: 0; visibility: hidden; pointer-events: none; } .float-nav__icon { display: block; width: 100%; height: auto; } .float-nav__panel { /* レイアウトから外して開閉時のサイズ変化（ガクつき）を防ぐ */ position: absolute; top: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 284px; min-height: 420px; padding: 64px 32px 52px; border: 3px solid var(--color-blue-menu); border-radius: 42px; background-color: var(--color-white); color: var(--color-blue-menu); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; } @media (max-width: 767px) { .float-nav__panel { width: 240px; min-height: 360px; padding: 52px 20px 40px; border-radius: 32px; } } .float-nav.is-open .float-nav__panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .float-nav__close { position: absolute; top: 18px; right: 18px; display: block; width: 56px; padding: 0; border: 0; background: transparent; color: var(--color-blue-menu); cursor: pointer; line-height: 0; } @media (max-width: 767px) { .float-nav__close { width: 48px; } } .float-nav__close:hover { opacity: 0.75; } .float-nav__close-icon { display: block; width: 100%; height: auto; } .float-nav__list { display: grid; gap: 48px; width: 100%; margin: 0; padding: 0; list-style: none; } @media (max-width: 767px) { .float-nav__list { gap: 40px; } } .float-nav__list .local-nav__item { flex: none; } .float-nav__list .local-nav__item::after { display: none; } .float-nav__list .local-nav__link { min-height: 0; justify-content: center; padding: 0; color: var(--color-blue-menu); } .float-nav__list .local-nav__link:hover { background-color: transparent; opacity: 0.75; } .float-nav__list .local-nav__label--top { display: block; width: 65px; height: auto; } @media (max-width: 767px) { .float-nav__list .local-nav__label--top { width: 52px; } .float-nav__list .local-nav__label--campaign { width: 112px; } .float-nav__list .local-nav__label--lineup { width: 116px; } .float-nav__list .local-nav__label--quiz { width: 54px; } } /* ========================================================================== Campaign ========================================================================== */ .campaign { --wave-height: 102px; position: relative; z-index: 2; padding: 76px 40px calc(120px + var(--wave-height)); background-color: var(--color-lineup); background-image: url("../images/campaign_bg_pattern.webp"); background-repeat: repeat; background-position: center top; background-size: 40px auto; color: var(--color-white); text-align: center; } @media (max-width: 767px) { .campaign { --wave-height: 40px; padding: 40px 24px calc(48px + var(--wave-height)); background-size: 20px auto; } } /* セクション下端の波つなぎ: 次セクションの背景を波型マスクで重ねる（section全体へのmaskは使わない） */ .campaign::after, .lineup::after { content: ""; position: absolute; left: 50%; bottom: -1px; z-index: 0; /* PC: 1440px未満でも波の形を1440基準で維持 */ width: max(100%, 1440px); height: var(--wave-height); pointer-events: none; transform: translateX(-50%); -webkit-mask-image: url("../images/mask-wave-bottom.svg"); mask-image: url("../images/mask-wave-bottom.svg"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-position: center bottom; } .campaign::after { --dot-color: rgba(255, 255, 255, 0.28); --dot-size: 6px; --dot-radius: 27%; background-color: var(--color-lineup); /* ラインナップと同じドット＋パターン（波つなぎ用） */ background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 1%)), radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 1%)), url("../images/lineup_bg_pattern.webp"); background-repeat: repeat, repeat, repeat-y; background-position: 0 0, calc(var(--dot-size) / 2) calc(var(--dot-size) / 2), center top; background-size: var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), 100% auto; } .campaign__heading { position: relative; display: flex; justify-content: center; margin: 0 auto 78px; max-width: 380px; } @media (max-width: 767px) { .campaign__heading { max-width: 200px; margin-bottom: 40px; } } .campaign__heading-img { display: block; position: relative; z-index: 1; width: 100%; height: auto; } .campaign__heading-deco { position: absolute; z-index: 2; right: 0; bottom: 0; display: block; width: 20.5%; height: auto; transform: translate(42%, 28%); pointer-events: none; } .campaign__banner { max-width: 846px; margin: 0 auto; } @media (max-width: 767px) { .campaign__banner { max-width: 480px; } } .campaign__banner-img { display: block; width: 100%; height: auto; } .campaign__period { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== Section Hub（波の上に載せる装飾・全幅） ========================================================================== */ .section-hub { margin: -6.4% 0 -8.4%; width: 100%; overflow: hidden; position: relative; pointer-events: none; } /* color-burn + z-index は画像ラッパー側（親へ移すと背面と合成されない） */ .section-hub__burn { position: relative; z-index: 30; mix-blend-mode: color-burn; } .section-hub--2 { margin: -7.6% 0 -7.2%; } /* PC 1440px以下: %マージンを1440基準の固定値にロック */ @media (max-width: 1440px) and (min-width: 768px) { .section-hub { margin-top: calc(1440px * -0.064); margin-bottom: calc(1440px * -0.084); } .section-hub--2 { margin-top: calc(1440px * -0.076); margin-bottom: calc(1440px * -0.072); } } /* SP 528px以下: %マージンを528基準の固定値にロック */ @media (max-width: 528px) { .section-hub { margin-top: calc(528px * -0.064); margin-bottom: calc(528px * -0.084); } .section-hub--2 { margin-top: calc(528px * -0.076); margin-bottom: calc(528px * -0.072); } } .section-hub__img { display: block; /* PC: 1440px未満でも装飾の形を1440基準で維持 */ width: max(100%, 1440px); max-width: none; height: auto; margin-left: 50%; transform: translateX(-50%); } @media (max-width: 767px) { /* SP: hubは528基準で形を維持 */ .section-hub__img { width: max(100%, 528px); margin-left: 50%; transform: translateX(-50%); } } /* ========================================================================== Lineup spacer（キャンペーン非表示時のハブ下地） ========================================================================== */ .lineup-spacer { display: none; --dot-color: rgba(255, 255, 255, 0.28); --dot-size: 6px; --dot-radius: 27%; /* セクションハブが載るだけの高さ（ハブの負マージン込み） */ height: clamp(96px, 14vw, 200px); background-color: var(--color-lineup); background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 1%)), radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 1%)), url("../images/lineup_bg_pattern.webp"); background-repeat: repeat, repeat, repeat-y; background-position: 0 0, calc(var(--dot-size) / 2) calc(var(--dot-size) / 2), center top; background-size: var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), 100% auto; } @media (max-width: 767px) { .lineup-spacer { height: clamp(64px, 18vw, 120px); } } /* ========================================================================== Lineup ========================================================================== */ .lineup { --wave-height: 102px; --dot-color: rgba(255, 255, 255, 0.28); --dot-size: 6px; --dot-radius: 27%; position: relative; z-index: 1; padding: var(--section-pad-pc) 0 calc(200px + var(--wave-height)); background-color: var(--color-lineup); /* 千鳥配置の半透明ドット + 既存パターン */ background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 1%)), radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent calc(var(--dot-radius) + 1%)), url("../images/lineup_bg_pattern.webp"); background-repeat: repeat, repeat, repeat-y; background-position: 0 0, calc(var(--dot-size) / 2) calc(var(--dot-size) / 2), center top; background-size: var(--dot-size) var(--dot-size), var(--dot-size) var(--dot-size), 100% auto; color: var(--color-white); } @media (max-width: 767px) { .lineup { --wave-height: 40px; padding: 20px 0 calc(56px + var(--wave-height)); } } .lineup__container { position: relative; z-index: 2; padding: max(0px, calc((100vw - 1440px) * 0.07)) 40px 0; } @media (max-width: 767px) { .lineup__container { padding: max(0px, calc((100vw - 528px) * 0.07)) 18px 0; } } /* ラインナップ内を右→左へ流れるたい焼き（product/wink=z2 の上下層） */ .lineup__float { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .lineup__float--below { z-index: 1; } .lineup__float--above { z-index: 3; } .lineup__floater { --taiyaki-swim-y: -14.4px; --taiyaki-swim-rotate: 16deg; --drift-delay: 0s; position: absolute; top: 0; left: 100%; /* PC: ループ(88px)の1.4倍 */ width: 123.2px; margin-top: -61.6px; will-change: transform, opacity; animation: lineup-floater-drift var(--drift-duration, 40s) linear forwards; animation-delay: var(--drift-delay); } /* 初回シード: 画面内配置後にフェードイン */ .lineup__floater.is-enter { opacity: 0; animation: lineup-floater-drift var(--drift-duration, 40s) linear forwards, lineup-floater-fade-in 0.85s ease-out forwards; animation-delay: var(--drift-delay), 0s; } @keyframes lineup-floater-fade-in { from { opacity: 0; } to { opacity: 1; } } .lineup__floater-img { display: block; width: 100%; height: auto; will-change: transform; animation: taiyaki-loop-swim var(--swim-duration, 3.6s) ease-in-out infinite; animation-delay: var(--swim-delay, 0s); } @media (max-width: 767px) { .lineup__floater { --taiyaki-swim-y: -7.2px; --taiyaki-swim-rotate: 8deg; width: 39px; margin-top: -20px; } } @keyframes lineup-floater-drift { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 140%)); } } /* キャンペーン波の左右反転 + クイズ背景 */ .lineup::after { background-color: var(--color-bg-quiz); background-image: url("../images/quiz_bg_pattern.webp"); background-repeat: repeat; background-position: center top; transform: translateX(-50%) scaleX(-1); } @media (max-width: 767px) { /* SP: 波は528基準で形を維持 */ .campaign::after, .lineup::after { left: 50%; width: max(100%, 528px); transform: translateX(-50%); } .lineup::after { transform: translateX(-50%) scaleX(-1); } } .lineup__heading { position: relative; display: flex; justify-content: center; margin: 36px auto 72px; max-width: 380px; } @media (max-width: 767px) { .lineup__heading { max-width: 200px; margin: 17px auto 32px; } } .lineup__heading-img { display: block; position: relative; z-index: 1; width: 100%; height: auto; } .lineup__heading-deco { position: absolute; z-index: 2; right: 0; bottom: 0; display: block; width: 20.5%; height: auto; transform: translate(42%, 28%); pointer-events: none; } /* ========================================================================== Product PC: 左=パッケージ+シズル / 右=説明+断面+ボタン SP: 縦積み（見出し→画像→説明→断面→ボタン） ========================================================================== */ /* 四隅を正円でえぐる（凹円クリップ）。Figma: PC32 / SP24 */ .product-panel, .product, .wink { --product-corner: 24px; -webkit-mask-image: radial-gradient(circle at 0 0, #0000 var(--product-corner), #000 var(--product-corner)), radial-gradient(circle at 100% 0, #0000 var(--product-corner), #000 var(--product-corner)), radial-gradient(circle at 0 100%, #0000 var(--product-corner), #000 var(--product-corner)), radial-gradient(circle at 100% 100%, #0000 var(--product-corner), #000 var(--product-corner)); -webkit-mask-size: 51% 51%; -webkit-mask-position: 0 0, 100% 0, 0 100%, 100% 100%; -webkit-mask-repeat: no-repeat; mask-image: radial-gradient(circle at 0 0, #0000 var(--product-corner), #000 var(--product-corner)), radial-gradient(circle at 100% 0, #0000 var(--product-corner), #000 var(--product-corner)), radial-gradient(circle at 0 100%, #0000 var(--product-corner), #000 var(--product-corner)), radial-gradient(circle at 100% 100%, #0000 var(--product-corner), #000 var(--product-corner)); mask-size: 51% 51%; mask-position: 0 0, 100% 0, 0 100%, 100% 100%; mask-repeat: no-repeat; } @media (max-width: 767px) { .product-panel, .product, .wink { --product-corner: 12px; } } .product-panel { max-width: var(--content-pc); margin: 0 auto 72px; padding: 84px 54px; background-color: var(--color-white); color: var(--color-text); } @media (max-width: 767px) { .product-panel { max-width: 480px; margin-bottom: 56px; padding: 58px 18px 46px; } } .product { display: grid; grid-template-columns: minmax(0, 1.43fr) minmax(0, 1fr); grid-template-areas: "heading heading" "media body" "media actions" "media none"; column-gap: 45px; row-gap: 0; align-items: start; max-width: var(--content-pc); margin: 0 auto 72px; padding: 80px 54px 68px; background-color: var(--color-white); color: var(--color-text); } @media (max-width: 767px) { .product { display: flex; flex-direction: column; align-items: center; max-width: 480px; margin-bottom: 16px; padding: 38px 18px 46px; } } .product-panel .product { max-width: none; margin: 0 0 120px; padding: 0; background: transparent; color: inherit; -webkit-mask-image: none; mask-image: none; } @media (max-width: 767px) { .product-panel .product { margin-bottom: 70px; } } .product-panel .product:last-child { margin-bottom: 0; } .product__heading { grid-area: heading; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: none; } .product__heading-img { display: block; position: relative; z-index: 1; width: 100%; height: auto; } .product--ichigo .product__heading-img { max-width: 71.4%; margin-bottom: 37px; } @media (max-width: 767px) { .product--ichigo .product__heading-img { max-width: 74.3%; margin-bottom: 27px; } } .product--standard .product__heading-img { max-width: 31%; margin-bottom: 38px; } @media (max-width: 767px) { .product--standard .product__heading-img { max-width: 33%; margin-bottom: 24px; } } .product--box .product__heading-img { max-width: 44.6%; margin-bottom: 32px; } @media (max-width: 767px) { .product--box .product__heading-img { max-width: 47.2%; margin-bottom: 24px; } } .product__heading-deco { position: absolute; z-index: 0; display: block; width: auto; height: auto; pointer-events: none; } .product--ichigo .product__heading-deco--1 { left: -3%; top: 2%; width: 7.4%; max-width: 54px; transform: translateY(-50%); } .product--ichigo .product__heading-deco--2 { right: -3%; top: 2%; width: 7.4%; max-width: 54px; transform: translateY(-50%); } @media (max-width: 767px) { .product--ichigo .product__heading-deco--1, .product--ichigo .product__heading-deco--2 { top: 10%; max-width: 22px; } } .product--standard .product__heading-deco--1, .product--box .product__heading-deco--1 { left: -3%; top: -30%; width: 20.4%; max-width: 150px; transform: translateY(-50%); } .product--standard .product__heading-deco--2, .product--box .product__heading-deco--2 { right: -3%; top: -30%; width: 20.4%; max-width: 150px; transform: translateY(-50%) scaleX(-1); } @media (max-width: 767px) { .product--standard .product__heading-deco--1, .product--standard .product__heading-deco--2, .product--box .product__heading-deco--1, .product--box .product__heading-deco--2 { top: -40%; width: 20%; max-width: 60px; } } .product__media { grid-area: media; display: flex; flex-direction: column; gap: 8px; margin: 0; } @media (max-width: 767px) { .product__media { width: 100%; max-width: 218px; gap: 0; margin-bottom: 25px; } } .product__figure { margin: 0; text-align: center; } .product__figure img { display: inline-block; width: auto; max-width: 100%; height: auto; } .product__figure--package img, .product__figure--sizzle img { width: 100%; max-width: none; } .product__body { grid-area: body; display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0; padding-top: 4px; } @media (max-width: 767px) { .product__body { width: 100%; gap: 24px; margin-bottom: 20px; padding-top: 0; } } .product__copy { width: 100%; } .product__text-img { display: block; width: 100%; max-width: 284px; height: auto; margin-inline: auto; } @media (max-width: 767px) { .product__text-img { max-width: 213px; } } .product__figure--cross { margin: 0; } .product__figure--cross img { width: 100%; max-width: 233px; } @media (max-width: 767px) { .product__figure--cross img { width: 100%; max-width: 175px; } } .product__actions { grid-area: actions; display: grid; gap: 10px; width: 100%; max-width: 287px; margin: 16px auto 0; } @media (max-width: 767px) { .product__actions { max-width: 242px; margin-top: 0; gap: 20px; } } .product__btn { display: block; transition: opacity var(--ease), transform var(--ease); } .product__btn img { display: block; width: 100%; height: auto; } @media (hover: hover) { .product__btn:hover { opacity: 0.9; transform: translateY(-1px); } } /* ========================================================================== Wink (inside lineup) ========================================================================== */ .lineup .wink { max-width: var(--content-pc); margin: 0 auto; } @media (max-width: 767px) { .lineup .wink { max-width: 480px; } } .wink__img { display: block; width: 100%; height: auto; } /* ========================================================================== Quiz ========================================================================== */ .quiz { position: relative; z-index: 0; padding: var(--section-pad-pc) 0 calc(96px + 6%); background-color: var(--color-bg-quiz); background-image: url("../images/quiz_bg_pattern.webp"); background-repeat: repeat; background-position: center top; background-size: 360px auto; color: var(--color-white); } @media (max-width: 767px) { .quiz { padding: 20px 0 72px; background-size: 200px auto; } } .quiz__container { padding: max(0px, calc((100vw - 1440px) * 0.058)) 40px 0; } @media (max-width: 767px) { .quiz__container { padding: max(0px, calc((100vw - 528px) * 0.058)) 18px 0; } } .quiz__heading { display: flex; justify-content: center; margin: 0 auto 64px; max-width: 460px; } @media (max-width: 767px) { .quiz__heading { max-width: 250px; margin-bottom: 24px; } } .quiz__heading-img, .quiz__lead-img, .quiz__question img, .quiz__answer img { display: block; width: 100%; height: auto; } .quiz__lead { display: flex; justify-content: center; margin: 0 auto 30px; max-width: 472px; } .quiz__lead-img { animation: quiz-lead-float 2.4s ease-in-out infinite; } @keyframes quiz-lead-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @media (max-width: 767px) { .quiz__lead { max-width: 300px; margin-bottom: 24px; } } .quiz__list { display: grid; gap: 28px; max-width: 846px; margin-inline: auto; } @media (max-width: 767px) { .quiz__list { max-width: 480px; gap: 20px; } } .quiz__item { background: none; box-shadow: none; } .quiz__question { position: relative; display: block; padding: 0; background: none; cursor: pointer; list-style: none; z-index: 2; } .quiz__question::-webkit-details-marker { display: none; } .quiz__question::after { content: ""; position: absolute; top: 50%; right: 6%; z-index: 1; width: 28px; height: 28px; transform: translateY(-50%); pointer-events: none; background-image: linear-gradient(var(--color-white), var(--color-white)), linear-gradient(var(--color-white), var(--color-white)); background-repeat: no-repeat; background-position: center; background-size: 100% 4px, 4px 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); transition: background-size 0.2s ease; } @media (max-width: 767px) { .quiz__question::after { right: 4%; width: 14px; height: 14px; background-size: 100% 2.5px, 2.5px 100%; } } .quiz__item[open] .quiz__question::after { /* − : 横バーのみ */ background-size: 100% 3px, 0 0; } @media (max-width: 767px) { .quiz__item[open] .quiz__question::after { background-size: 100% 2.5px, 0 0; } } .quiz__answer { overflow: hidden; height: 0; opacity: 0; transform: translateY(-12px); transition: height 0.4s ease, opacity 0.35s ease, transform 0.35s ease; } .quiz__item[open] .quiz__answer { height: auto; opacity: 1; transform: translateY(0); } .quiz__answer picture { display: block; width: 88.8%; max-width: 750px; margin-inline: auto; } /* ========================================================================== Footer ========================================================================== */ .footer { padding: 136px 40px 188px; background-image: url("../images/footer_bg.webp"); background-position: center top; background-repeat: no-repeat; background-size: cover; color: var(--color-white); text-align: center; position: relative; margin-top: -6%; } @media (max-width: 767px) { .footer { padding: 50px 18px 36px; } } .share { margin-bottom: 72px; } @media (max-width: 767px) { .share { margin-bottom: 32px; } } .share__heading { display: flex; justify-content: center; margin: 0 auto 54px; max-width: 302px; } @media (max-width: 767px) { .share__heading { max-width: 151px; margin-bottom: 27px; } } .share__heading-img { display: block; width: 100%; height: auto; } .share__list { display: flex; justify-content: center; gap: 72px; } @media (max-width: 767px) { .share__list { gap: 50px; } } .share__link { display: block; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; transition: transform var(--ease), opacity var(--ease); } @media (max-width: 767px) { .share__link { width: 45px; height: 45px; } } @media (hover: hover) { .share__link:hover { opacity: 1; transform: translateY(-2px) scale(1.06); } } .share__link img { display: block; width: 100%; height: 100%; object-fit: cover; } .footer__nav { margin-bottom: 100px; } @media (max-width: 767px) { .footer__nav { margin-bottom: 32px; } } .footer__nav-list { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 60px; row-gap: 40px; } @media (max-width: 767px) { .footer__nav-list { gap: 20px; } } .footer__nav-item { width: 452px; } @media (max-width: 767px) { .footer__nav-item { width: 340px; } } .footer__nav-link { display: block; } .footer__nav-link img { display: block; width: 100%; height: auto; } /* PAGE TOP — Figma 205:60 / PCはフッター右下、SPはボタン下 */ .footer__page-top { position: absolute; right: 48px; bottom: 48px; z-index: 1; display: block; /* PC: 110px の約80% */ width: 88px; line-height: 0; transition: opacity var(--ease), transform var(--ease); } .footer__page-top:hover { opacity: 0.85; transform: translateY(-2px); } .footer__page-top img { display: block; width: 100%; height: auto; } @media (max-width: 767px) { .footer__page-top { position: static; width: 72px; margin: 28px auto 0; transform: none; } .footer__page-top:hover { transform: translateY(-2px); } } .footer__copyright { color: #000; font-size: 12px; } @media (max-width: 767px) { .footer__copyright { font-size: 11px; } } .footer__copyright small { font-size: inherit; } /* ========================================================================== Taiyaki loop（横スクロール装飾） 参考: https://imuraya-cp.jp/kinsei_taiyaki/ ========================================================================== */ .taiyaki-loop { --taiyaki-swim-y: -14.4px; --taiyaki-swim-rotate: 16deg; /* 1グループ幅（JSで上書き。未計測時のフォールバック） */ --taiyaki-loop-x: -1320px; position: absolute; top: 50%; left: 0; z-index: 31; width: 100%; overflow: hidden; padding: 28px 0 16px; pointer-events: none; transform: translateY(calc(-50% - 30px)); } .taiyaki-loop__track { display: flex; width: max-content; will-change: transform; animation: taiyaki-loop-scroll 40s linear infinite; } .taiyaki-loop__group { display: flex; align-items: center; flex-shrink: 0; gap: 32px; padding-inline: 16px; } .taiyaki-loop__item { display: block; flex-shrink: 0; width: 88px; height: auto; will-change: transform; /* translateY + rotate で泳いでいるような上下動 */ animation: taiyaki-loop-swim 3.6s ease-in-out infinite; } .taiyaki-loop__item:nth-child(2n) { animation-delay: -0.9s; } .taiyaki-loop__item:nth-child(3n) { animation-delay: -1.8s; } .taiyaki-loop__item:nth-child(4n) { animation-delay: -2.7s; } @media (max-width: 767px) { .taiyaki-loop { --taiyaki-swim-y: -7.2px; --taiyaki-swim-rotate: 8deg; --taiyaki-loop-x: -583px; padding: 12px 0 8px; transform: translateY(calc(-50% - 17px)); } .taiyaki-loop__group { gap: 14px; padding-inline: 7px; } .taiyaki-loop__item { width: 39px; } } @keyframes taiyaki-loop-scroll { from { transform: translate3d(0, 0, 0); } to { /* % ではなく px（iOS WebKit で max-content 幅に対する % が効かない対策） */ transform: translate3d(var(--taiyaki-loop-x), 0, 0); } } @keyframes taiyaki-loop-swim { 0%, 100% { transform: translateY(0) rotate(var(--taiyaki-swim-rotate, 16deg)); } 50% { transform: translateY(var(--taiyaki-swim-y, -14.4px)) rotate(calc(var(--taiyaki-swim-rotate, 16deg) * -1)); } } /* アンカー位置の余白 */ .kv, .campaign, .lineup, .quiz { scroll-margin-top: 24px; } @media (max-width: 767px) { .kv, .campaign, .lineup, .quiz { scroll-margin-top: 16px; } }