@charset "UTF-8"; /* ============================================================================ トークン（色や画像の指定は依頼どおり据え置き） ============================================================================ */ :root { --bg: #e4e4e4; /* 背景画像が読めない時の下地 */ --txt: #ffffff; /* 本文幅と位置（768px〜） */ --content-max: 430px; --left-offset: clamp(72px, 14vw, 240px); /* やや左寄り */ /* 背景画像（768px〜） */ --rail-img-right: url("../images/788891.jpg"); /*"../images/23341754.jpg"*/ /* 左も使うなら：--rail-img-left:url("../images/left-rail.webp"); */ /* グラデボタン色（ピンク→濃紺→ブルー） */ --grad-pink: #ff4db0; --grad-deep: #3a2a7a; --grad-blue: #2f76d2; /* ボーダー＆影 */ --btn-edge: rgba(0, 0, 0, .32); --btn-shadow: 0 12px 28px 8px rgba(47, 118, 210, .20), 0 6px 14px 0 rgba(0, 0, 0, .12); /* ふんわり強めのホバー影を用意 */ --btn-shadow-hover: 0 20px 56px 16px rgba(47, 118, 210, .18), 0 12px 28px 0 rgba(0, 0, 0, .12); } /* ============================================================================ ベース ============================================================================ */ body { background: var(--bg); color: var(--txt); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================ レイアウト ============================================================================ */ .section { padding-block: 0; } .container { max-width: none; width: 100%; margin: 0; padding: 0; } .img-block { border: 0; border-radius: 0; overflow: visible; background: transparent; } .img-block > img { display: block; width: 100%; height: auto; } /* CTAコンテナ白帯に */ .container.cta { background: #ffffff; padding: 1em 1em; /* 画像つなぎを崩さない程度の薄い帯 */ } .container.cta.cta--final { background: #000000; } /* 背景画像（768px〜）：固定1枚 */ @media (min-width:768px) { body { background-image: var(--rail-img-right); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; background-color: rgba(0, 0, 0, 0.3); background-blend-mode: overlay; } /* 左も使う場合はを付与 */ body.has-left-rail { background-image: var(--rail-img-left), var(--rail-img-right); background-position: left center, right center; background-repeat: no-repeat, no-repeat; background-size: contain, cover; background-attachment: fixed, fixed; } /* 本文：幅固定＋“やや中央寄り” */ .container { max-width: var(--content-max); margin-left: var(--left-offset); margin-right: 0; } .section + .section { margin-top: 0; } } /* ============================================================================ テキスト ============================================================================ */ .cta-lead-copy { background: linear-gradient(90deg, #58c7ff 0%, #4f7df3 25%, #7a3be0 45%, #ff3b8d 65%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 2rem; font-weight: 800; margin-bottom: 1em; } .rail-cta .cta-lead-copy { font-size: 3rem; color: #FFEB3B; text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); } .cta-catch-copy { color: #333333; font-weight: 700; } .rail-cta .cta-catch-copy, .cta--final .cta-catch-copy { color: #ffffff; font-size: 2rem; text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4); } .big { font-size: 1.5em; } /* ── バンザイ ── */ .banzai { /* 腕のサイズは据え置き、ギャップだけ大幅に縮める */ --arm-len: clamp(26px, 5vw, 30px); --arm-thick: clamp(3px, 0.5vw, 3.5px); --arm-tilt: -55deg; /* ★ここを小さくして詰める */ --arm-gap: clamp(2px, 0.6vw, 8px); /* 腕が文字側に“食い込む”量（マイナス方向OK） */ --arm-overlap: 14%; --arm-c1: #79e0ff; --arm-c2: #48c7ff; position: relative; display: inline-block; /* 腕の長さぶんのパディングを減らして、内側に寄せる */ padding-inline: calc(var(--arm-len) * 0.35 + var(--arm-gap)); line-height: 1.2; width: 90%; } /* 左右のアーム */ .banzai::before, .banzai::after { content: ""; position: absolute; top: 50%; width: var(--arm-len); height: var(--arm-thick); background: linear-gradient(90deg, var(--arm-c1), var(--arm-c2)); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .07)); } /* 左アーム：文字側へ寄せる（-50% → -15%） */ .banzai::before { left: 0; transform: translate(calc(-1 * var(--arm-overlap)), -50%) rotate(calc(-1 * var(--arm-tilt))); } /* 右アーム */ .banzai::after { right: 0; transform: translate(var(--arm-overlap), -50%) rotate(var(--arm-tilt)); } /* さらに詰めたい時はクラス追加 */ .banzai.is-tight { --arm-gap: 0px; --arm-overlap: 18%; padding-inline: calc(var(--arm-len) * 0.28); } @media (max-width:768px) { .banzai { width: 100%; } } /* ============================================================================ ボタン（グラデ・キラッ） ============================================================================ */ /* 他CSSの影響をリセット */ a.btn-cta { /*all: unset;*/ display: inline-grid; } .btn-cta { display: inline-grid; place-items: center; cursor: pointer; padding: 14px 24px; min-height: 56px; width: 100%; font: 700 clamp(16px, 5vw, 22px)/1 "Noto Sans JP", system-ui, sans-serif; letter-spacing: .04em; color: #fff; text-decoration: none; border-radius: 8px; /*border: 1px solid var(--btn-edge);*/ background-image: linear-gradient(90deg, var(--grad-pink) 0%, var(--grad-deep) 50%, var(--grad-blue) 100%); box-shadow: var(--btn-shadow); position: relative; overflow: hidden; /* キラッはみ出し防止（必須） */ will-change: transform; } .btn-cta:focus-visible { outline: 3px solid rgba(255, 255, 255, .45); outline-offset: 2px; } .btn-cta:active { transform: translateY(1px); box-shadow: 0 8px 18px rgba(47, 118, 210, .22), 0 2px 0 rgba(0, 0, 0, .28); } .rail-cta .btn-cta.is-sm { margin-top: 2em; } /* サイズバリエーション（任意） */ .btn-cta.is-sm { padding: 10px 18px; min-height: 48px; font-size: clamp(14px, 4vw, 18px); } .btn-cta.is-lg { padding: 16px 28px; min-height: 64px; font-size: clamp(18px, 5vw, 24px); } /* キラッ（ボタン内にだけ表示） */ .btn-cta::after { content: ""; position: absolute; top: 0; left: -40%; /* ボタン内から開始 */ width: 40%; height: 100%; background: linear-gradient(60deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .45) 50%, rgba(255, 255, 255, 0) 70%); transform: translateX(0); animation: shine 3.0s ease-in-out infinite; pointer-events: none; } @keyframes shine { 0% { transform: translateX(0); } 60%, 100% { transform: translateX(300%); } } /* PCでだけ見た目をしっかり変える */ @media (hover:hover) { .btn-cta:hover { transform: translateY(-5px); /* ちょい浮く */ filter: saturate(1.06) brightness(1.2); /* 少し明るく */ box-shadow: var(--btn-shadow-hover); /* 影を強めに */ } .btn-cta:hover::after { animation-duration: 2s; /* キラッ加速 */ } } /* タッチ端末の“押した感”も付ける（任意） */ .btn-cta:active { transform: translateY(1px); box-shadow: 0 8px 18px rgba(47, 118, 210, .22), 0 2px 0 rgba(0, 0, 0, .28); } @media (prefers-reduced-motion:reduce) { .btn-cta::after { animation: none; } } /* セクション内のCTA：スマホは左右に少し余白、768px〜は本文幅いっぱい */ .cta { text-align: center; } .cta .btn-cta { margin: 12px 12px; width: calc(100% - 24px); } @media (min-width:768px) { .cta .btn-cta { margin: 1.5em 0 0; width: 100%; } } /* ============================================================================ 追従CTA - スマホ：画面下固定バー - PC：右側背景エリアの天地左右中央に固定 ============================================================================ */ /* スマホ下固定 */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; padding: 1em; background: #ffffff; display: flex; justify-content: center; gap: 8px; flex-direction: column; justify-content: center; align-items: center; } .sticky-cta .cta-lead-copy { margin-bottom: 0.5em; text-align: center; font-size: 1.8rem; } .sticky-cta .btn-cta { width: 100%; } @media (min-width:1024px) { .sticky-cta { display: none; } } /* PCでは非表示 */ /* PC右フローティング */ .rail-cta { display: none; } @media (min-width:1024px) { /* 右エリアの幅 = 100vw - (左の寄せ + 本文幅) */ :root { --right-area-w: calc(100vw - (var(--left-offset) + var(--content-max))); --rail-cta-w: min(450px, 35vw); } .rail-cta { position: fixed; /* 右エリアの中で水平中央に来るright値を計算 */ right: calc((var(--right-area-w) - var(--rail-cta-w)) / 2); top: 50%; transform: translateY(-50%); /* 天地中央 */ z-index: 998; width: var(--rail-cta-w); display: block; text-align: center; } .rail-cta .btn-cta { width: 100%; } } /* スマホだけ、最終CTAを非表示 */ @media (max-width: 767.98px) { .cta--final { display: none; } /* 下固定CTAぶんの余白（被り防止） */ body { padding-bottom: 120px; } /* 下固定の高さに合わせて調整 */ } background-image: url("../images/kika@2x.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; background-color: rgba(255, 255, 255, 0.3); background-blend-mode: overlay;