/* ========================================================= Premier Motors – renewal シンプル × ポップ × さわやか / 健全・安心・信頼 ========================================================= */ :root { --hd-space: 92px; --blue: #22569c; --blue-d: #173f78; --navy: #13295a; --sky: #eaf5fe; --sky-2: #cfe7fb; --sky-3: #9fd0f6; --red: #e5194f; --red-d: #c40d3d; --yellow: #ffe03d; --yellow-l: #fff5bf; --green: #1b9e5f; --orange: #f0841c; --line: #06c755; --ink: #17223a; --text: #2d3647; --muted: #677287; --bd: #e1e8f1; --bg: #ffffff; --bg-2: #f4f8fc; --r-s: 10px; --r: 18px; --r-l: 30px; --f-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; --f-disp: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif; --f-en: "Outfit", "Noto Sans JP", sans-serif; --f-hand: "Klee One", "Noto Sans JP", sans-serif; --ease: cubic-bezier(.22, 1, .36, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --hd-h: 76px; --shadow: 0 18px 40px -18px rgba(19, 41, 90, .28); --shadow-s: 0 8px 22px -12px rgba(19, 41, 90, .3); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } body.pmr { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 16px; line-height: 1.95; letter-spacing: .04em; font-feature-settings: "palt" 0; -webkit-font-smoothing: antialiased; overflow-x: clip; } body.pmr.admin-bar { --ab: 32px; } :where(.pmr) img, :where(.pmr) video, :where(.pmr) iframe { max-width: 100%; display: block; } :where(.pmr) img { height: auto; } :where(.pmr) a { color: inherit; text-decoration: none; } :where(.pmr) p { margin: 0 0 1.1em; } :where(.pmr) p:last-child { margin-bottom: 0; } :where(.pmr) :is(h1, h2, h3, h4) { margin: 0; font-weight: 800; line-height: 1.45; color: var(--ink); } :where(.pmr) :is(ul, ol) { margin: 0; padding: 0; list-style: none; } :where(.pmr) button { font: inherit; color: inherit; cursor: pointer; } :where(.pmr) mark { background: linear-gradient(transparent 58%, var(--yellow) 58%); color: inherit; padding: 0 .1em; } :where(.pmr) mark.red { background: linear-gradient(transparent 58%, #ffd2dc 58%); } .pmr ::selection { background: var(--yellow); color: var(--ink); } .pmr :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; } .main { display: block; overflow-x: clip; } .wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 32px; } .narrow { max-width: 880px; } .center { text-align: center; } .sec { padding-block: clamp(72px, 9vw, 130px); } .lead { font-size: clamp(15px, 1.4vw, 17px); color: var(--text); margin-bottom: 2.4em !important; } .kicker { font-family: var(--f-disp); font-weight: 800; color: var(--blue); letter-spacing: .12em; } .intro { font-family: var(--f-disp); font-weight: 700; font-size: clamp(17px, 2vw, 22px); line-height: 1.9; text-align: center; color: var(--ink); max-width: 860px; margin: 0 auto 4em !important; } .pc { display: inline; } @media (max-width: 767px) { .pc { display: none; } .wrap { padding-inline: 16px; } } /* ---------- motion primitives ---------- */ .ch { display: inline-block; white-space: pre; } .mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; } .mask > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); } .is-in .mask > span, .mask.is-in > span { transform: none; } .sh-en .ch, .ph-en .ch { transform: translateY(110%) rotate(8deg); opacity: 0; transition: transform .8s var(--ease-back), opacity .4s; transition-delay: calc(var(--i) * 32ms); } .is-in .sh-en .ch, .sh-en.is-in .ch, .is-in .ph-en .ch { transform: none; opacity: 1; } .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); } .reveal.is-in { opacity: 1; transform: none; } .reveal-clip { position: relative; overflow: hidden; } .reveal-clip > img, .reveal-clip > iframe, .reveal-clip > .video { clip-path: inset(0 0 100% 0); transform: scale(1.18); transition: clip-path 1.3s var(--ease), transform 1.8s var(--ease); } .reveal-clip.is-in > img, .reveal-clip.is-in > iframe, .reveal-clip.is-in > .video { clip-path: inset(0 0 0 0); transform: scale(1); } .reveal-clip::after { content: ""; position: absolute; inset: 0; background: var(--sky-2); transform-origin: top; transform: scaleY(1); transition: transform 1s var(--ease) .1s; pointer-events: none; z-index: 2; opacity: 0; } /* ---------- loader ---------- */ .loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #fff; pointer-events: none; } .loader-in { position: relative; width: min(320px, 70vw); } .loader-in img { width: 100%; opacity: 0; transform: translateY(14px); animation: ldLogo .9s var(--ease) .25s forwards; } .loader-arc { position: absolute; left: 0; bottom: -20px; width: 100%; height: 6px; fill: none; stroke: var(--blue); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 300; stroke-dashoffset: 300; animation: ldArc 1s var(--ease) forwards; opacity: .9; } .loader-wipe { position: absolute; inset: 0; background: var(--blue); transform: translateY(100%); } .loader.is-done { animation: ldOut .9s var(--ease) forwards; } .loader.is-done .loader-wipe { animation: ldWipe .9s var(--ease) forwards; } .loader.is-skip { display: none; } @keyframes ldLogo { to { opacity: 1; transform: none; } } @keyframes ldArc { to { stroke-dashoffset: 0; } } @keyframes ldWipe { 0% { transform: translateY(100%); } 50% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @keyframes ldOut { 0%, 49% { background: #fff; } 50%, 100% { background: transparent; } } .loader.is-done .loader-in { animation: ldHide .1s linear .45s forwards; } @keyframes ldHide { to { opacity: 0; } } /* ---------- progress ---------- */ .progress { position: fixed; top: var(--ab, 0px); left: 0; height: 3px; width: 100%; z-index: 120; background: linear-gradient(90deg, var(--blue), var(--sky-3) 60%, var(--yellow)); transform-origin: left; transform: scaleX(0); } /* ---------- header ---------- */ .hd { position: fixed; top: calc(var(--ab, 0px) + 12px); left: 16px; right: 16px; height: var(--hd-h); z-index: 110; display: flex; align-items: center; gap: 24px; padding: 0 10px 0 24px; border-radius: 99px; transition: transform .5s var(--ease), height .4s, top .4s; } .hd::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, .86); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 0 0 1px rgba(19, 41, 90, .06), 0 14px 34px -18px rgba(19, 41, 90, .35); z-index: -1; transition: background .4s; } .hd.is-scrolled::before { background: rgba(255, 255, 255, .94); } .hd.is-scrolled { --hd-h: 62px; top: calc(var(--ab, 0px) + 8px); } .hd.is-hidden { transform: translateY(calc(-100% - 30px)); } .hd-logo { flex: none; } .hd-logo img { display: block; width: 230px; height: auto; transition: width .4s; } @media (max-width: 1440px) { .hd-tel span { display: none; } } .hd.is-scrolled .hd-logo img { width: 210px; } .hd-nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; font-family: var(--f-disp); font-weight: 800; font-size: 15px; color: var(--ink); } .roll { position: relative; display: block; padding: 6px 0; } .roll-in { display: grid; height: 1.7em; overflow: hidden; line-height: 1.7; } .roll-in > span { transition: transform .5s var(--ease); } .roll-in .en { font-family: var(--f-en); font-weight: 700; color: var(--blue); letter-spacing: .06em; } .roll:hover .roll-in > span { transform: translateY(-100%); } .roll::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); transform: translateX(-50%) scale(0); transition: transform .4s var(--ease-back); } .roll.is-current::after, .roll:hover::after { transform: translateX(-50%) scale(1); } .hd-act { display: flex; align-items: center; gap: 14px; } .hd-tel { display: flex; align-items: center; gap: 8px; color: var(--blue); } .hd-tel .ico { width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--sky); } .hd-tel b { display: block; font-family: var(--f-en); font-size: 21px; font-weight: 700; letter-spacing: .03em; line-height: 1.1; } .hd-tel small { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.3; letter-spacing: .02em; } .burger { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px 0 16px; border: 0; border-radius: 99px; background: var(--navy); color: #fff; transition: background .3s; } .burger:hover { background: var(--blue); } .burger-lines { position: relative; width: 20px; height: 10px; } .burger-lines i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease), width .3s; } .burger-lines i:first-child { top: 0; } .burger-lines i:last-child { top: 8px; width: 70%; } .burger:hover .burger-lines i:last-child { width: 100%; } .burger-txt { font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: .14em; } .menu-open .burger-lines i:first-child { top: 4px; transform: rotate(45deg); } .menu-open .burger-lines i:last-child { top: 4px; width: 100%; transform: rotate(-45deg); } @media (max-width: 1180px) { .hd-nav { display: none; } .hd-act { margin-left: auto; } } @media (max-width: 767px) { :root { --hd-h: 62px; } .hd { left: 10px; right: 10px; top: calc(var(--ab, 0px) + 8px); padding: 0 6px 0 16px; gap: 10px; } .hd-logo img { width: 168px; } .hd.is-scrolled .hd-logo img { width: 156px; } .hd-tel span, .hd-act .btn { display: none; } .hd-tel .ico { width: 42px; height: 42px; padding: 10px; } .burger { height: 42px; padding: 0 14px; } body.pmr.admin-bar { --ab: 46px; } } @media (max-width: 600px) { body.pmr.admin-bar { --ab: 0px; } } /* ---------- full screen menu ---------- */ .menu { position: fixed; inset: 0; z-index: 105; background: var(--navy); color: #fff; clip-path: circle(0 at var(--mx, 95%) var(--my, 40px)); transition: clip-path .9s var(--ease); overflow-y: auto; visibility: hidden; } .menu::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(159, 208, 246, .18), transparent 40%), radial-gradient(circle at 85% 85%, rgba(229, 25, 79, .16), transparent 40%); pointer-events: none; } .menu-open .menu { clip-path: circle(150% at var(--mx, 95%) var(--my, 40px)); visibility: visible; } .menu-in { position: relative; min-height: 100%; max-width: 1200px; margin: 0 auto; padding: calc(var(--hd-h) + 60px) 32px 60px; display: grid; grid-template-columns: 1fr 340px; gap: 60px; align-items: start; } .menu-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; } .menu-label { font-family: var(--f-en); font-size: 12px; letter-spacing: .18em; color: var(--sky-3); margin-bottom: 14px !important; border-bottom: 1px solid rgba(255, 255, 255, .15); padding-bottom: 10px; } .menu-group li { overflow: hidden; } .menu-group a { display: inline-block; padding: 7px 0; font-family: var(--f-disp); font-weight: 800; font-size: 17px; transform: translateY(110%); transition: transform .8s var(--ease), color .3s; } .menu-open .menu-group a { transform: none; transition-delay: calc(.25s + var(--i, 0) * 30ms), 0s; } .menu-group a:hover { color: var(--yellow); } .menu-side { display: grid; gap: 12px; opacity: 0; transform: translateX(30px); transition: opacity .6s .4s, transform .8s var(--ease) .4s; } .menu-open .menu-side { opacity: 1; transform: none; } .menu-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-family: var(--f-en); font-weight: 700; font-size: 22px; transition: background .3s, transform .4s var(--ease); } .menu-card:hover { background: rgba(255, 255, 255, .16); transform: translateX(-4px); } .menu-card small { display: block; font-family: var(--f-body); font-size: 12px; font-weight: 500; opacity: .8; } .menu-card .ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #fff; color: var(--blue); flex: none; } .menu-card.is-red { background: var(--red); border-color: var(--red); font-family: var(--f-disp); font-size: 20px; } .menu-card.is-red .ico { color: var(--red); } .menu-card.is-line .ico { color: var(--line); } .menu-addr { font-size: 13px; line-height: 1.9; opacity: .8; margin-top: 10px !important; } @media (max-width: 960px) { .menu-in { grid-template-columns: 1fr; gap: 36px; padding: calc(var(--hd-h) + 30px) 20px 110px; } .menu-groups { grid-template-columns: 1fr 1fr; gap: 24px 20px; } .menu-group:first-child { grid-row: span 2; } .menu-group a { font-size: 15px; padding: 5px 0; } } /* ---------- buttons ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 60px; padding: 0 26px 0 34px; border: 2px solid transparent; border-radius: 99px; font-family: var(--f-disp); font-weight: 800; font-size: 16px; letter-spacing: .06em; overflow: hidden; isolation: isolate; transition: color .4s, border-color .4s, transform .3s; } .btn::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--navy); transform: translateX(-101%); transition: transform .6s var(--ease); z-index: -1; } .btn:hover::before { transform: none; } .btn-ar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: transform .5s var(--ease); } .btn-ar .ico { width: 18px; height: 18px; } .btn:hover .btn-ar { transform: translateX(4px); } .btn-blue { background: var(--blue); color: #fff; } .btn-red { background: var(--red); color: #fff; box-shadow: 0 10px 24px -10px rgba(229, 25, 79, .7); } .btn-green { background: var(--line); color: #fff; } .btn-line { background: #fff; color: var(--blue); border-color: var(--blue); } .btn-line .btn-ar { background: var(--sky); } .btn-line:hover { color: #fff; border-color: var(--navy); } .btn-sm { min-height: 46px; padding: 0 22px; font-size: 14px; } .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 56px; } .center > .btn { margin-top: 48px; } .more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-en); font-weight: 700; font-size: 14px; color: var(--blue); } .more .ico { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--blue); color: #fff; transition: transform .5s var(--ease); } a:hover .more .ico { transform: translateX(6px); } /* ---------- section heading ---------- */ .sh { margin-bottom: clamp(36px, 5vw, 60px); } .sh-center { text-align: center; } .sh-en { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-en); font-weight: 700; font-size: 14px; letter-spacing: .2em; color: var(--blue); margin-bottom: 10px !important; overflow: hidden; } .sh-en::before { content: ""; width: 26px; height: 8px; flex: none; background: radial-gradient(circle at 4px 4px, var(--blue) 3.4px, transparent 4px), radial-gradient(circle at 13px 4px, var(--red) 3.4px, transparent 4px), radial-gradient(circle at 22px 4px, var(--yellow) 3.4px, transparent 4px); } .sh-ttl { font-family: var(--f-disp); font-weight: 900; font-size: clamp(26px, 3.6vw, 44px); line-height: 1.4; letter-spacing: .04em; color: var(--ink); text-wrap: balance; } .sh.is-light .sh-en, .sh.is-light .sh-ttl { color: #fff; } /* ---------- page hero (下層) ---------- */ .ph { position: relative; padding: calc(var(--hd-h) + 70px) 0 0; background: linear-gradient(180deg, var(--sky) 0%, #fff 78%); overflow: hidden; } .ph-in { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 32px; } .ph-en { font-family: var(--f-en); font-weight: 800; font-size: clamp(46px, 9vw, 128px); line-height: 1; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1.5px var(--sky-3); margin: 0 0 6px !important; white-space: nowrap; overflow: hidden; padding-bottom: .06em; } .ph-title { font-family: var(--f-disp); font-weight: 900; font-size: clamp(26px, 4vw, 48px); color: var(--ink); line-height: 1.35; text-wrap: balance; } .ph-title .mask > span { transition-delay: .25s; } .bc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 12.5px; color: var(--muted); } .bc a:hover { color: var(--blue); } .bc b { font-weight: 500; color: var(--ink); } .ph-img { position: relative; z-index: 1; max-width: 1360px; margin: 44px auto 0; padding: 0 24px; } .ph-img-in { position: relative; height: clamp(200px, 30vw, 400px); border-radius: var(--r-l); overflow: hidden; clip-path: inset(12% 6% 0 6% round var(--r-l)); transition: clip-path 1.4s var(--ease) .2s; } .is-in .ph-img-in, .ph-img.is-in .ph-img-in { clip-path: inset(0 0 0 0 round var(--r-l)); } .ph-img-in img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; } .ph-deco i { position: absolute; border-radius: 50%; pointer-events: none; } .ph-deco .d1 { width: 280px; height: 280px; right: -60px; top: 40px; background: radial-gradient(circle, var(--sky-2) 1.6px, transparent 2px) 0 0 / 16px 16px; animation: floaty 9s ease-in-out infinite; } .ph-deco .d2 { width: 18px; height: 18px; right: 22%; top: calc(var(--hd-h) + 40px); background: var(--yellow); animation: floaty 6s ease-in-out infinite -2s; } .ph-deco .d3 { width: 12px; height: 12px; right: 30%; top: calc(var(--hd-h) + 120px); background: var(--red); animation: floaty 7s ease-in-out infinite -4s; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @media (max-width: 767px) { .ph { padding-top: calc(var(--hd-h) + 36px); } .ph-in { padding: 0 16px; } .ph-img { padding: 0 12px; margin-top: 28px; } .ph-img-in { border-radius: var(--r); } } /* ========================================================= FIRST VIEW（先方支給イメージを HTML で再現） 座標は支給画像（1536×1024）基準。1u = 支給画像の 15.36px 相当 ========================================================= */ .sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .fv { --u: min(1vw, calc((100vh - var(--hd-h) - var(--ab, 0px) - 26px) / 66.67)); --fv-navy: #10295e; --fv-band: #183b85; --fv-deep: #021f40; --fv-red: #e3125a; position: relative; height: 100vh; height: 100svh; overflow: hidden; background: linear-gradient(180deg, #2c8de6 0%, #66b5f1 26%, #b5defa 50%, #e6f4fd 66%, #f3f9fd 100%); isolation: isolate; } @supports (height: 100svh) { .fv { --u: min(1vw, calc((100svh - var(--hd-h) - var(--ab, 0px) - 26px) / 66.67)); } } .fv::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * 19); background: var(--fv-deep); clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 100%); z-index: 1; } .fv-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .cloud { position: absolute; display: block; height: 8vh; border-radius: 99px; background: rgba(255, 255, 255, .8); filter: blur(7px); animation: drift linear infinite; } .cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; } .cloud::before { width: 45%; height: 160%; left: 18%; bottom: 20%; } .cloud::after { width: 32%; height: 130%; left: 52%; bottom: 25%; } .cloud.c1 { width: 20vw; top: 16vh; left: -25vw; animation-duration: 80s; } .cloud.c2 { width: 14vw; top: 34vh; left: -25vw; animation-duration: 110s; animation-delay: -50s; opacity: .7; } .cloud.c3 { width: 26vw; top: 6vh; left: -25vw; animation-duration: 140s; animation-delay: -95s; opacity: .5; } @keyframes drift { to { transform: translateX(135vw); } } .fv-flare { position: absolute; left: -6vw; bottom: 22vh; width: 38vw; height: 38vw; border-radius: 50%; background: radial-gradient(circle, rgba(255, 252, 220, .9), rgba(255, 255, 255, 0) 60%); animation: flare 7s ease-in-out infinite; } .fv-green { position: absolute; left: -8vw; bottom: 14vh; width: 34vw; height: 30vh; border-radius: 50%; background: radial-gradient(ellipse at 40% 60%, rgba(60, 150, 70, .55), rgba(110, 180, 90, .25) 45%, transparent 70%); filter: blur(18px); } @keyframes flare { 50% { opacity: .65; transform: scale(1.08); } } .fv-photo-bg { position: absolute; right: 0; top: 0; width: 50%; height: calc(100% - var(--u) * 17); background-size: cover; background-position: right 30%; filter: blur(12px) saturate(1.1); transform: scale(1.04); -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); z-index: 0; } .fv-stage { position: absolute; left: 50%; bottom: 0; width: calc(var(--u) * 100); height: calc(var(--u) * 66.67); transform: translateX(-50%); z-index: 2; } .fv-stage > *, .fv-bottom > *, .fv-foot > * { position: absolute; } .fv-bottom, .fv-foot { left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; } .fv-bottom a, .fv-bottom li { pointer-events: auto; } /* 写真（女性と白い車） */ .fv-photo { left: calc(var(--u) * 55.99); top: 0; width: calc(var(--u) * 44.01); height: calc(var(--u) * 36.46); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 17%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0, #000 10%); mask-composite: intersect; } .fv-photo img { width: 100%; height: 100%; object-fit: cover; transform-origin: 70% 60%; animation: fvZoom 22s ease-in-out infinite alternate; } @keyframes fvZoom { to { transform: scale(1.05); } } /* 見出し */ .fv-brush { left: calc(var(--u) * 1.6); top: calc(var(--u) * 14.8); width: calc(var(--u) * 63); height: calc(var(--u) * 8.5); z-index: 1; overflow: visible; } .fv-brush path { fill: none; stroke: var(--yellow); stroke-linecap: round; stroke-dasharray: 760; stroke-dashoffset: 760; } .fv-brush .b1 { stroke-width: 30; } .fv-brush .b2 { stroke-width: 16; opacity: .7; } .fv-copy { left: 0; top: 0; width: 100%; height: 0; margin: 0; z-index: 3; font-family: var(--f-disp); font-weight: 900; line-height: 1; letter-spacing: 0; color: var(--fv-navy); white-space: nowrap; paint-order: stroke fill; -webkit-text-stroke: calc(var(--u) * .5) #fff; text-shadow: 0 calc(var(--u) * .35) calc(var(--u) * .9) rgba(16, 41, 94, .2); } .fv-copy > span { position: absolute; display: block; } .fv-l1 { left: calc(var(--u) * 2.3); top: calc(var(--u) * 1.3); font-size: calc(var(--u) * 7.7); } .fv-l2 { left: calc(var(--u) * 1.9); top: calc(var(--u) * 9.7); font-size: calc(var(--u) * 9.7); } .fv-copy .ch, .fv-copy .br { display: inline-block; } .fv-copy .br { margin-inline: -.2em; } .fv-copy .fv-s { font-size: .72em; margin-left: .04em; } .fv-copy em { font-style: normal; color: var(--fv-red); } .fv-copy .fv-s2 { font-size: .7em; margin-left: .06em; } /* 紺の帯・プレゼント */ .fv-band { left: calc(var(--u) * 1.6); top: calc(var(--u) * 24.3); z-index: 2; margin: 0 !important; padding: calc(var(--u) * .75) calc(var(--u) * 2.6) calc(var(--u) * .8) calc(var(--u) * 1.3); background: var(--fv-band); color: #fff; font-family: var(--f-disp); font-weight: 800; font-size: calc(var(--u) * 1.85); line-height: 1.45; letter-spacing: .01em; transform: rotate(-7deg); transform-origin: left top; clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%); } .fv-band span { display: block; } .fv-gift { left: calc(var(--u) * 22.3); top: calc(var(--u) * 24.6); z-index: 3; margin: 0 !important; display: flex; flex-direction: column; font-family: var(--f-disp); font-weight: 900; color: var(--fv-red); line-height: 1.08; white-space: nowrap; transform: rotate(-7deg); transform-origin: left top; paint-order: stroke fill; -webkit-text-stroke: calc(var(--u) * .45) #fff; } .fv-gift .ch { display: inline-block; } .fv-gift .g1 { font-size: calc(var(--u) * 3.4); padding-left: calc(var(--u) * .4); } .fv-gift small { font-size: .74em; } .fv-gift .g2 { position: relative; font-size: calc(var(--u) * 4.6); letter-spacing: -.03em; } .fv-gift .g2::before { content: ""; position: absolute; left: 30%; right: -3%; bottom: .02em; height: .4em; border-radius: .1em; background: var(--yellow); z-index: -1; transform: skewX(-14deg) scaleX(0); transform-origin: left; transition: transform .9s var(--ease) 1.9s; } .fv.is-ready .fv-gift .g2::before { transform: skewX(-14deg) scaleX(1); } /* バッジ */ .fv-badge { left: calc(var(--u) * 61.5); top: calc(var(--u) * 19.8); width: calc(var(--u) * 12.4); height: calc(var(--u) * 12.4); z-index: 4; } .fv-badge-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; border-radius: 50%; background: repeating-conic-gradient(rgba(255, 255, 255, .2) 0 5deg, transparent 5deg 10deg), radial-gradient(circle at 38% 32%, #fff6a0, #ffe23a 52%, #f4c300 100%); box-shadow: 0 calc(var(--u) * .7) calc(var(--u) * 1.8) calc(var(--u) * -.5) rgba(0, 0, 0, .3), inset 0 0 0 calc(var(--u) * .4) rgba(255, 255, 255, .5); font-family: var(--f-disp); font-weight: 900; color: var(--fv-navy); line-height: 1.12; transform: rotate(-10deg); } .fv-badge-in span { font-size: calc(var(--u) * 2.45); } .fv-badge-in b { font-size: calc(var(--u) * 3.7); font-weight: 900; } .fv-badge-in .ch { display: inline-block; } .fv.is-ready .fv-badge-in { animation: wobble 3.4s ease-in-out infinite 3.4s; } .fv-ribbon { position: absolute; left: calc(var(--u) * 1); top: calc(var(--u) * -3.6); width: calc(var(--u) * 9); z-index: 2; fill: #e8173a; filter: drop-shadow(0 calc(var(--u) * .3) calc(var(--u) * .4) rgba(0, 0, 0, .22)); transform: rotate(-10deg); transform-origin: 50% 60%; } .fv.is-ready .fv-ribbon { animation: ribbon 3.4s ease-in-out infinite 3.6s; } @keyframes ribbon { 0%, 100% { transform: rotate(-10deg); } 10% { transform: rotate(-2deg) scale(1.06); } 20% { transform: rotate(-14deg); } } .fv-spark { position: absolute; width: calc(var(--u) * 1.7); height: calc(var(--u) * .34); border-radius: 9px; background: var(--yellow); box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); animation: spark 1.6s ease-in-out infinite; } .fv-spark.s1 { right: calc(var(--u) * -2.1); top: calc(var(--u) * 2.4); transform: rotate(-35deg); } .fv-spark.s2 { right: calc(var(--u) * -2.8); top: calc(var(--u) * 5.3); animation-delay: .25s; } .fv-spark.s3 { right: calc(var(--u) * -2.1); top: calc(var(--u) * 8.2); transform: rotate(35deg); animation-delay: .5s; } .fv-spark.s4 { left: calc(var(--u) * -1.6); top: calc(var(--u) * 2.2); width: calc(var(--u) * 1.1); transform: rotate(40deg); animation-delay: .75s; } @keyframes spark { 0%, 100% { opacity: .25; scale: .6 1; } 50% { opacity: 1; scale: 1 1; } } @keyframes wobble { 0%, 100% { transform: rotate(-10deg) scale(1); } 8% { transform: rotate(2deg) scale(1.07); } 16% { transform: rotate(-14deg) scale(1); } 24% { transform: rotate(-8deg); } } /* 手書き文字（右上） */ .fv-hand { left: calc(var(--u) * 76.6); top: calc(var(--u) * 2.2); z-index: 3; margin: 0 !important; font-family: var(--f-hand); font-weight: 600; font-size: calc(var(--u) * 2.6); line-height: 1.38; color: #fff; transform: rotate(-10deg); transform-origin: left top; text-shadow: 0 calc(var(--u) * .12) calc(var(--u) * .6) rgba(10, 40, 90, .45); white-space: nowrap; } .fv-hand span { display: block; clip-path: inset(0 100% 0 0); } .fv-hand span:nth-child(2) { padding-left: 1.7em; } .fv-hand span:nth-child(3) { padding-left: 3.1em; } .fv-hand svg { display: block; width: 6.2em; height: 1.1em; margin: -.15em 0 0 3em; overflow: visible; } .fv-hand svg path, .fv-new svg path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 1s var(--ease) 2.9s; } .fv.is-ready .fv-hand svg path { stroke-dashoffset: 0; } /* 特長カード */ .fv-feats { left: calc(var(--u) * 1.95); top: calc(var(--u) * 35.8); width: calc(var(--u) * 96.05); height: calc(var(--u) * 10.55); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * .85); z-index: 3; } .fv-feats li { display: flex; align-items: flex-start; gap: calc(var(--u) * 1.1); min-width: 0; padding: calc(var(--u) * 1.25) calc(var(--u) * .9) calc(var(--u) * .9) calc(var(--u) * 1.15); border-radius: calc(var(--u) * 1.4); background: #fff; box-shadow: 0 calc(var(--u) * .8) calc(var(--u) * 2) calc(var(--u) * -1) rgba(16, 41, 94, .35); transition: transform .5s var(--ease); } .fv-feats li:hover { transform: translateY(calc(var(--u) * -.6)); } .fv-ico { flex: none; display: grid; place-items: center; width: calc(var(--u) * 4.9); height: calc(var(--u) * 4.9); border-radius: 50%; color: #fff; background: var(--c); } .fv-ico .ico { width: 56%; height: 56%; stroke-width: 2.2; } .fv.is-ready .fv-ico { animation: icoBob 3.2s ease-in-out infinite; } .fv.is-ready .fv-feats li:nth-child(2) .fv-ico { animation-delay: .4s; } .fv.is-ready .fv-feats li:nth-child(3) .fv-ico { animation-delay: .8s; } .fv.is-ready .fv-feats li:nth-child(4) .fv-ico { animation-delay: 1.2s; } @keyframes icoBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--u) * -.35); } } .fv-feats b { display: block; font-family: var(--f-disp); font-weight: 900; font-size: calc(var(--u) * 1.85); line-height: 1.3; color: var(--c); margin-bottom: calc(var(--u) * .5); letter-spacing: .01em; white-space: nowrap; } .fv-feats p { margin: 0 !important; font-size: calc(var(--u) * 1); line-height: 1.6; font-weight: 700; color: var(--ink); letter-spacing: 0; white-space: nowrap; } .fv-feats .ft-orange p { margin-left: calc(var(--u) * -3.8) !important; text-align: center; } .ft-red { --c: var(--red); } .ft-blue { --c: var(--blue); } .ft-green { --c: var(--green); } .ft-orange { --c: var(--orange); } /* リース満了後の流れ */ .fv-flow-tag { left: calc(var(--u) * 2.1); top: calc(var(--u) * 47.2); z-index: 4; margin: 0 !important; transform: rotate(-5deg); transform-origin: left center; } .fv-flow-tag span { display: inline-block; padding: calc(var(--u) * .35) calc(var(--u) * 1.7) calc(var(--u) * .4) calc(var(--u) * 1.3); font-family: var(--f-disp); font-weight: 900; font-size: calc(var(--u) * 1.6); color: var(--fv-navy); background: var(--yellow); clip-path: polygon(1% 14%, 6% 2%, 100% 0, 97% 50%, 99% 96%, 3% 100%, 0 60%); } .fv-steps { left: calc(var(--u) * 2.93); top: calc(var(--u) * 49.35); width: calc(var(--u) * 80.7); height: calc(var(--u) * 11.33); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 0 calc(var(--u) * 2.4); padding: calc(var(--u) * .75) calc(var(--u) * .9); border-radius: calc(var(--u) * 1.2); background: #fff; box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 3) rgba(0, 0, 0, .3); z-index: 3; } .fv-steps li { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--u) * .3); min-width: 0; min-height: 0; padding: calc(var(--u) * .45) calc(var(--u) * .5) calc(var(--u) * .3); border-radius: calc(var(--u) * .8); background: linear-gradient(180deg, #e7f2fd 0%, #fff 72%); transition: box-shadow .4s; } .fv-steps li + li::before { content: ""; position: absolute; left: calc(var(--u) * -1.75); top: 46%; width: calc(var(--u) * 1); height: calc(var(--u) * 1); border-top: calc(var(--u) * .36) solid #1f4fa0; border-right: calc(var(--u) * .36) solid #1f4fa0; transform: rotate(45deg); animation: chev 1.6s ease-in-out infinite; } @keyframes chev { 50% { translate: calc(var(--u) * .35) 0; } } .fv.is-ready .fv-steps li { animation: stepOn 8s ease-in-out infinite; } .fv.is-ready .fv-steps li:nth-child(1) { animation-delay: 4s; } .fv.is-ready .fv-steps li:nth-child(2) { animation-delay: 6s; } .fv.is-ready .fv-steps li:nth-child(3) { animation-delay: 8s; } .fv.is-ready .fv-steps li:nth-child(4) { animation-delay: 10s; } @keyframes stepOn { 0%, 25%, 100% { box-shadow: 0 0 0 0 rgba(255, 224, 61, 0); translate: 0 0; } 6%, 18% { box-shadow: 0 0 0 calc(var(--u) * .22) #ffd93b; translate: 0 calc(var(--u) * -.3); } } .st-h { display: flex; gap: calc(var(--u) * .6); align-items: flex-start; } .st-h i { flex: none; display: grid; place-items: center; width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%; background: #1f4fa0; color: #fff; font-style: normal; font-family: var(--f-en); font-weight: 800; font-size: calc(var(--u) * 1.3); } .st-h b { display: block; font-family: var(--f-disp); font-weight: 900; font-size: calc(var(--u) * 1.32); line-height: 1.25; color: var(--fv-navy); white-space: nowrap; } .st-h p { margin: calc(var(--u) * .2) 0 0 !important; font-size: calc(var(--u) * .8); line-height: 1.45; font-weight: 700; letter-spacing: 0; color: var(--ink); white-space: nowrap; } .st-v { position: relative; min-height: 0; border-radius: calc(var(--u) * .5); overflow: hidden; } .st-v img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; } .fv-steps li:nth-child(2) .st-v img { object-fit: cover; object-position: center 60%; } .fv-new { left: calc(var(--u) * 84.9); top: calc(var(--u) * 48.6); z-index: 3; margin: 0 !important; font-family: var(--f-hand); font-weight: 600; font-size: calc(var(--u) * 2.35); line-height: 1.35; color: #fff; transform: rotate(-11deg); transform-origin: left top; white-space: nowrap; } .fv-new span { display: block; clip-path: inset(0 100% 0 0); } .fv-new span:nth-child(2) { padding-left: 1.3em; } .fv-new .y { color: var(--yellow); font-size: 1.1em; padding-left: .2em; } .fv-new svg { display: block; width: 7em; height: 1em; margin: -.1em 0 0 .3em; color: var(--yellow); overflow: visible; } .fv-new svg path { stroke-width: 4; transition-delay: 3.5s; } .fv.is-ready .fv-new svg path { stroke-dashoffset: 0; } /* 下段：ロゴ・相談ボタン */ .fv-brand { left: calc(var(--u) * 3.6); top: calc(var(--u) * 61.75); display: flex; align-items: center; margin: 0 !important; color: #fff; } .fv-brand img { width: calc(var(--u) * 31); height: auto; } .fv-brand span { margin-left: calc(var(--u) * 1); padding-left: calc(var(--u) * 1.3); border-left: 1px solid rgba(255, 255, 255, .5); font-family: var(--f-en); font-weight: 500; font-size: calc(var(--u) * 1.08); line-height: 1.35; letter-spacing: .42em; } .fv-brand small { display: block; font-family: var(--f-body); font-size: .86em; letter-spacing: .32em; } .fv-consult { left: calc(var(--u) * 75.5); top: calc(var(--u) * 62.5); width: calc(var(--u) * 22); height: calc(var(--u) * 2.5); display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * .7); border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 99px; color: #fff; font-size: calc(var(--u) * .95); font-weight: 700; letter-spacing: .04em; transition: background .3s, color .3s; } .fv-consult svg { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.6s ease-in-out infinite; } .fv-consult:hover { background: #fff; color: var(--fv-deep); } @keyframes nudge { 50% { transform: translateX(4px); } } /* 文字のループアニメーション（登場演出のあと） */ .fv.is-ready .fv-l2 em .ch { animation: chWave 4.6s ease-in-out infinite; animation-delay: calc(3.2s + var(--i) * .1s); } .fv.is-ready .fv-gift .g2 .ch { animation: chJump 5.2s ease-in-out infinite; animation-delay: calc(4.2s + var(--i) * .06s); } .fv.is-ready .fv-badge-in b .ch { animation: chPop 3.4s ease-in-out infinite; animation-delay: calc(3.6s + var(--i) * .08s); } .fv.is-ready .fv-l1 .fv-s .ch { animation: chWave 4.6s ease-in-out infinite; animation-delay: calc(5.2s + var(--i) * .1s); } @keyframes chWave { 0%, 70%, 100% { translate: 0 0; } 78% { translate: 0 -9%; } 86% { translate: 0 2%; } } @keyframes chJump { 0%, 76%, 100% { translate: 0 0; rotate: 0deg; } 82% { translate: 0 -14%; rotate: -4deg; } 90% { translate: 0 0; rotate: 0deg; } } @keyframes chPop { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.18; } } /* 登場前の状態（JS が動かす） */ .js .fv-copy .ch, .js .fv-copy .br, .js .fv-band, .js .fv-gift, .js .fv-badge, .js .fv-feats li, .js .fv-flow-tag, .js .fv-steps, .js .fv-steps li, .js .fv-foot > *, .js .fv-photo { opacity: 0; } .no-motion .fv-copy .ch, .no-motion .fv-copy .br, .no-motion .fv-band, .no-motion .fv-gift, .no-motion .fv-badge, .no-motion .fv-feats li, .no-motion .fv-flow-tag, .no-motion .fv-steps, .no-motion .fv-steps li, .no-motion .fv-foot > *, .no-motion .fv-photo { opacity: 1; } .no-motion .fv-hand span, .no-motion .fv-new span { clip-path: none; } /* --- FV スマホ --- */ @media (max-width: 900px) { .fv { --u: 1vw; height: auto; min-height: 100svh; padding-top: calc(var(--hd-h) + var(--ab, 0px) + 24px); background: linear-gradient(180deg, #3c97ea 0%, #8fcaf5 26%, #d8eefc 48%, #f3f9fd 62%); } .fv::after, .fv-photo-bg, .fv-green { display: none; } .fv-stage { position: relative; left: auto; bottom: auto; width: 100%; height: auto; transform: none; display: flex; flex-direction: column; } .fv-stage > *, .fv-bottom > *, .fv-foot > * { position: relative; left: auto; top: auto; right: auto; } .fv-copy { order: 1; height: auto; padding: 0 4vw; -webkit-text-stroke-width: 1.3vw; } .fv-copy > span { position: relative; left: auto; top: auto; } .fv-l1 { font-size: 11.6vw; } .fv-l2 { font-size: 13.4vw; margin-top: .5vw; } .fv-brush { position: absolute !important; left: 2vw; top: 17vw !important; width: 94vw; height: 13vw; } .fv-photo { order: 2; width: auto; height: 66vw; margin: 3vw 3vw 0; border-radius: 6vw; -webkit-mask-image: none; mask-image: none; box-shadow: var(--shadow); } .fv-photo img { object-position: 45% 35%; } .fv-hand { position: absolute !important; left: auto !important; right: 5vw !important; top: 34vw !important; font-size: 4vw; } .fv-badge { position: absolute !important; left: 14vw !important; right: auto !important; top: 63vw !important; width: 32vw; height: 32vw; } .fv-badge-in span { font-size: 5.6vw; } .fv-badge-in b { font-size: 8.6vw; } .fv-ribbon { width: 20vw; left: 3vw; top: -8vw; } .fv-band { order: 3; align-self: flex-start; margin: 4vw 0 0 3vw !important; font-size: 3.6vw; padding: 2vw 6vw 2.2vw 3.4vw; z-index: 3; } .fv-gift { order: 4; margin: 1vw 0 0 7vw !important; } .fv-gift .g1 { font-size: 5.8vw; } .fv-gift .g2 { font-size: 8.4vw; } .fv-feats { order: 5; width: auto; height: auto; grid-template-columns: 1fr 1fr; gap: 2.4vw; margin: 7vw 3vw 0; } .fv-feats li { flex-direction: column; gap: 2vw; padding: 4vw 3.6vw; border-radius: 4vw; } .fv-ico { width: 11vw; height: 11vw; } .fv-feats b { font-size: 4.1vw; white-space: normal; } .fv-feats p { font-size: 3.1vw; white-space: normal; } .fv-feats p br { display: none; } .fv-feats .ft-orange p { margin-left: 0 !important; text-align: left; } .fv-bottom { order: 6; position: relative; width: auto; height: auto; margin-top: 8vw; padding: 9vw 0 7vw; background: var(--fv-deep); clip-path: polygon(0 3vw, 100% 0, 100% 100%, 0 100%); pointer-events: auto; } .fv-foot { position: relative; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; gap: 5vw; margin-top: 6vw; } .fv-flow-tag { margin: 0 0 3vw 4vw !important; } .fv-flow-tag span { font-size: 4.6vw; padding: 1vw 4vw; } .fv-steps { width: auto; height: auto; margin: 0 3vw; grid-template-columns: 1fr 1fr; grid-template-rows: auto; gap: 3vw; padding: 2.6vw; border-radius: 4vw; } .fv-steps li { padding: 2vw 2vw 1vw; border-radius: 3vw; gap: 2vw; } .fv-steps li + li::before { display: none; } .st-h { gap: 1.6vw; } .st-h i { width: 6.4vw; height: 6.4vw; font-size: 3.6vw; } .st-h b { font-size: 3.6vw; white-space: normal; } .st-h p { font-size: 2.7vw; white-space: normal; } .st-h p br { display: none; } .st-v { height: 20vw; } .fv-new { margin: 8vw 0 0 10vw !important; font-size: 5.6vw; transform: rotate(-6deg); } .fv-brand img { width: 62vw; } .fv-brand span { font-size: 2.4vw; } .fv-consult { width: auto; height: auto; padding: 3vw 5vw 3vw 6vw; font-size: 3.5vw; gap: 2vw; } .fv-consult svg { width: 4vw; height: 4vw; } } /* ---------- news / marquee ---------- */ .news { position: relative; background: #fff; overflow-x: clip; } .marquee { overflow: hidden; background: var(--yellow); color: var(--navy); font-family: var(--f-disp); font-weight: 900; font-size: clamp(16px, 2vw, 24px); padding: 14px 0; transform: rotate(-1.2deg); margin: -10px -20px 0; position: relative; z-index: 3; box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .4); } .marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee p { display: flex; align-items: center; gap: 28px; margin: 0 !important; padding-right: 28px; white-space: nowrap; } .marquee i { font-style: normal; color: var(--red); font-size: .8em; } @keyframes marquee { to { transform: translateX(-50%); } } .news-bar { display: flex; align-items: center; gap: 22px; padding-block: 34px 6px; font-size: 14px; } .news-label { flex: none; padding: 3px 12px; border-radius: 99px; background: var(--red); color: #fff; font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: .12em; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(229, 25, 79, 0); } 0% { box-shadow: 0 0 0 0 rgba(229, 25, 79, .45); } } .news-link { display: flex; gap: 18px; min-width: 0; font-weight: 500; } .news-link time { flex: none; font-family: var(--f-en); color: var(--blue); font-weight: 600; } .news-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-link:hover span { text-decoration: underline; } .news-more { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--blue); } .news-more .ico { width: 18px; height: 18px; } @media (max-width: 767px) { .news-bar { flex-wrap: wrap; gap: 8px 12px; } .news-link { width: 100%; order: 3; flex-direction: column; gap: 0; } .news-more { margin-left: auto; } } /* ---------- message ---------- */ .msg { position: relative; padding-block: clamp(90px, 12vw, 170px); overflow: hidden; text-align: center; } .msg-bgtxt { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); pointer-events: none; white-space: nowrap; } .msg-bgtxt span { display: inline-block; font-family: var(--f-en); font-weight: 800; font-size: clamp(90px, 17vw, 260px); line-height: 1; color: var(--sky); letter-spacing: -.01em; } .msg .wrap { position: relative; } .msg-lead { font-family: var(--f-en); font-weight: 700; letter-spacing: .3em; color: var(--blue); font-size: 14px; } .msg-big { font-family: var(--f-disp); font-weight: 900; font-size: clamp(28px, 5vw, 64px); line-height: 1.5; color: var(--ink); margin: 18px 0 44px !important; } [data-fill] .ch { color: #c9d6e6; transition: color .3s; } [data-fill] .ch.on { color: var(--ink); } .msg-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .msg-chips li { display: inline-flex; flex-direction: column; padding: 18px 34px; border-radius: 99px; background: var(--sky); font-family: var(--f-disp); font-weight: 900; font-size: clamp(16px, 1.8vw, 21px); color: var(--navy); line-height: 1.5; } .msg-chips li span { font-family: var(--f-body); font-weight: 700; font-size: 13px; color: var(--blue); } .msg-chips li:nth-child(2) { background: #fff0f4; color: var(--red-d); } .msg-chips li:nth-child(2) span { color: var(--red); } .msg-chips li:nth-child(3) { background: var(--yellow-l); color: #6b5300; } .msg-chips li:nth-child(3) span { color: #a07c00; } .msg-chips li { transition: transform .4s var(--ease), box-shadow .4s; } .msg-chips li:hover { transform: translateY(-4px); box-shadow: var(--shadow-s); } .msg-chips a { display: flex; flex-direction: column; } /* ---------- pick up ---------- */ .pick { padding-bottom: clamp(70px, 9vw, 120px); } .pick-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(20px, 3vw, 40px); align-items: center; } .pick-banner { position: relative; display: block; border-radius: var(--r-l); box-shadow: var(--shadow); transform: rotate(-2deg); transition: transform .6s var(--ease); overflow: visible; } .pick-banner > img { border-radius: var(--r-l); width: 100%; } .pick-banner:hover { transform: rotate(0) scale(1.02); } .pick-sticker { position: absolute; right: -14px; bottom: -18px; z-index: 3; display: grid; place-content: center; width: 128px; height: 128px; border-radius: 50%; background: var(--blue); color: #fff; text-align: center; font-family: var(--f-disp); font-weight: 800; font-size: 13px; line-height: 1.4; transform: rotate(10deg); box-shadow: var(--shadow-s); animation: spinslow 14s linear infinite; } .pick-sticker b { display: block; font-size: 22px; font-weight: 900; color: var(--yellow); } .pick-sticker { white-space: nowrap; } @keyframes spinslow { 0% { transform: rotate(10deg); } 50% { transform: rotate(-6deg) scale(1.05); } 100% { transform: rotate(10deg); } } .pick-video .video, .video { position: relative; border-radius: var(--r-l); overflow: hidden; background: #000; aspect-ratio: 16 / 9; box-shadow: var(--shadow); } .video video { width: 100%; height: 100%; object-fit: cover; } .video-play { position: absolute; inset: 0; border: 0; background: linear-gradient(180deg, rgba(19, 41, 90, 0) 40%, rgba(19, 41, 90, .45)); display: grid; place-items: center; transition: opacity .4s; } .video-play span { position: relative; width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); animation: ring 2s ease-out infinite; transition: transform .4s var(--ease-back); } .video-play span::after { content: ""; margin-left: 6px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--red); } .video-play:hover span { transform: scale(1.1); } @keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .6); } 100% { box-shadow: 0 0 0 28px rgba(255, 255, 255, 0); } } .video.is-playing .video-play { opacity: 0; pointer-events: none; } .pick-cap { margin-top: 18px !important; text-align: center; font-family: var(--f-disp); font-weight: 800; font-size: clamp(16px, 1.7vw, 20px); color: var(--ink); } .hl { background: linear-gradient(transparent 62%, var(--yellow) 62%); } @media (max-width: 860px) { .pick-grid { grid-template-columns: 1fr; gap: 50px; } .pick-banner { max-width: 440px; margin: 0 auto; } .pick-sticker { width: 104px; height: 104px; right: -6px; font-size: 11px; } .pick-sticker b { font-size: 18px; } .video-play span { width: 72px; height: 72px; } } /* ---------- about ---------- */ .about { padding-block: clamp(80px, 10vw, 140px); background: linear-gradient(180deg, #fff, var(--sky) 40%, var(--sky) 70%, #fff); position: relative; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); } .about-card { position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); overflow: hidden; background: #fff; box-shadow: var(--shadow); transition: transform .6s var(--ease), box-shadow .6s; } .about-card:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -24px rgba(19, 41, 90, .4); } .about-img { display: block; aspect-ratio: 3 / 1.25; overflow: hidden; } .about-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .about-card:hover .about-img img { transform: scale(1.06); } .about-body { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 34px clamp(24px, 3vw, 44px) 38px; flex: 1; } .about-tag { position: absolute; top: -18px; left: clamp(24px, 3vw, 44px); padding: 6px 16px; border-radius: 99px; background: var(--blue); color: #fff; font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: .2em; } .about-card.is-red .about-tag { background: var(--red); } .about-ttl { font-family: var(--f-disp); font-weight: 900; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.4; color: var(--ink); } .about-ttl em { font-style: normal; font-size: 1.5em; color: var(--blue); } .about-card.is-red .about-ttl em { color: var(--red); } .about-txt { font-size: 15px; line-height: 1.95; } .about-img.is-lease { position: relative; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%, #3a2c10 0%, #15110a 45%, #050505 100%); } .about-img.is-lease img { width: min(88%, 480px); height: auto; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(214, 178, 96, .25)); } .about-card:hover .about-img.is-lease img { transform: scale(1.04); } .lease-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 228, 160, .35) 50%, transparent 62%); background-size: 260% 100%; background-position: 140% 0; animation: leaseShine 4.5s var(--ease) infinite; pointer-events: none; mix-blend-mode: screen; } @keyframes leaseShine { 0%, 45% { background-position: 140% 0; } 100% { background-position: -60% 0; } } .about-txt strong { color: var(--red); font-weight: 700; } .about-body .more { margin-top: auto; } .about-card.is-red .more { color: var(--red); } .about-card.is-red .more .ico { background: var(--red); } .nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(50px, 6vw, 80px); } .nums li { position: relative; padding: 26px 16px; text-align: center; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); } .nums li::before { content: ""; position: absolute; top: 16px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--yellow); } .nums small { display: block; font-weight: 700; font-size: 13px; color: var(--muted); margin-top: 6px; } .nums b { display: block; font-family: var(--f-disp); font-weight: 900; color: var(--blue); font-size: 15px; line-height: 1.2; } .nums b span { font-family: var(--f-en); font-weight: 800; font-size: clamp(40px, 5vw, 62px); letter-spacing: -.01em; margin: 0 2px; } .nums b i { font-style: normal; font-size: 18px; } .nums li:nth-child(2) b { color: var(--red); } .nums li:nth-child(3) b { color: var(--green); } .nums li:nth-child(4) b { color: var(--orange); } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .nums { grid-template-columns: 1fr 1fr; gap: 12px; } } /* ---------- service horizontal ---------- */ .svc { position: relative; background: var(--navy); color: #fff; overflow: hidden; } .svc::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 10% 0%, rgba(159, 208, 246, .22), transparent 35%), radial-gradient(circle at 100% 100%, rgba(229, 25, 79, .18), transparent 40%); pointer-events: none; } .svc-pin { position: relative; padding-block: clamp(80px, 9vw, 120px) 60px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } .svc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; } .svc-head .sh { margin-bottom: 40px; } .svc .sh-en, .svc .sh-ttl { color: #fff; } .svc .sh-en::before { filter: brightness(1.6); } .svc-lead { max-width: 440px; margin-bottom: 44px !important; color: rgba(255, 255, 255, .85); } .svc-track { display: flex; gap: 24px; padding-left: max(32px, calc((100vw - 1200px) / 2 + 32px)); padding-right: 10vw; width: max-content; will-change: transform; } .svc-card { position: relative; flex: none; display: flex; flex-direction: column; width: clamp(280px, 26vw, 360px); border-radius: var(--r-l); background: #fff; color: var(--text); overflow: hidden; transition: transform .6s var(--ease); } .svc-card:hover { transform: translateY(-10px) rotate(-1deg); } .svc-no { position: absolute; top: 14px; left: 16px; z-index: 2; font-family: var(--f-en); font-weight: 800; font-size: 46px; line-height: 1; color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, .35); } .svc-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; } .svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .svc-card:hover .svc-img img { transform: scale(1.08); } .svc-img.is-logo, .bento-img.is-logo, .chip-img.is-logo { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 55%, #3a2c10 0%, #15110a 50%, #050505 100%); } .svc-img.is-logo img, .bento-img.is-logo img, .chip-img.is-logo img, .svc-card:hover .svc-img.is-logo img, .bento-item:hover .bento-img.is-logo img { width: 88%; height: auto !important; object-fit: contain; transform: none; } .chips .chip-img.is-logo img { width: 96%; } .svc-body { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 70px; } .svc-en { font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: .14em; color: var(--blue); } .svc-body b { font-family: var(--f-disp); font-weight: 900; font-size: 21px; color: var(--ink); line-height: 1.4; } .svc-txt { font-size: 14px; line-height: 1.85; } .svc-ar { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sky); color: var(--blue); transition: background .3s, color .3s, transform .5s var(--ease); } .svc-ar .ico { width: 20px; height: 20px; } .svc-card:hover .svc-ar { background: var(--red); color: #fff; transform: rotate(-45deg); } .svc-all { justify-content: center; align-items: center; background: var(--yellow); color: var(--navy); width: clamp(220px, 18vw, 260px); } .svc-all-in { display: flex; flex-direction: column; align-items: center; gap: 18px; font-family: var(--f-disp); font-weight: 900; font-size: 26px; line-height: 1.35; text-align: center; } .svc-all-in i { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--navy); color: #fff; transition: transform .5s var(--ease); } .svc-all:hover .svc-all-in i { transform: translateX(8px); } .svc-bar { margin-top: 40px; height: 3px; position: relative; } .svc-bar::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .15); border-radius: 3px; margin-inline: 32px; } .svc-bar i { position: absolute; left: 32px; top: 0; height: 100%; width: calc(100% - 64px); background: var(--yellow); border-radius: 3px; transform-origin: left; transform: scaleX(0); } @media (max-width: 900px) { .svc-pin { min-height: 0; padding-bottom: 70px; } .svc-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 16px 20px; scrollbar-width: none; } .svc-track::-webkit-scrollbar { display: none; } .svc-card { width: 76vw; scroll-snap-align: center; } .svc-bar { display: none; } } /* ---------- blog cards ---------- */ .tblog { padding-block: clamp(80px, 10vw, 140px); } .tblog-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0 30px; } .tblog-sub { font-family: var(--f-hand); font-size: 18px; color: var(--blue); margin-bottom: clamp(36px, 5vw, 60px) !important; } .bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 32px); } .bcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s; } .bcard:hover { transform: translateY(-6px); box-shadow: var(--shadow); } .bcard-img { display: block; aspect-ratio: 4 / 3; background: var(--sky); overflow: hidden; } .bcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .bcard:hover .bcard-img img { transform: scale(1.07); } .bcard-date { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-s); color: var(--navy); line-height: 1.15; } .bcard-date b { font-family: var(--f-en); font-weight: 800; font-size: 30px; color: var(--blue); } .bcard-date span { font-family: var(--f-en); font-weight: 600; font-size: 11px; letter-spacing: .08em; } .bcard-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 26px; } .bcard-ttl { font-weight: 700; font-size: 13px; line-height: 1.6; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bcard-ex { font-size: 15px; line-height: 1.8; color: var(--ink); font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 960px) { .bgrid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .bgrid { grid-template-columns: 1fr; } .bcard { flex-direction: row; } .bcard-img { width: 38%; flex: none; aspect-ratio: auto; } .bcard-date { top: 8px; left: 8px; padding: 5px 9px; gap: 5px; border-radius: 10px; } .bcard-date b { font-size: 20px; } .bcard-date span { font-size: 9px; } .bcard-body { padding: 14px 14px 16px; } .bcard-ex { font-size: 13.5px; -webkit-line-clamp: 3; } .bcard-ttl { font-size: 11.5px; -webkit-line-clamp: 1; } } /* ---------- shop ---------- */ .shop { padding-block: clamp(80px, 10vw, 130px); background: var(--bg-2); } .shop-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(24px, 4vw, 56px); align-items: start; } .shop-img { border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); } .shop-img img { width: 100%; aspect-ratio: 1; object-fit: cover; } .shop-dl { display: grid; gap: 2px; margin: 0 0 24px; } .shop-dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 14px; padding: 16px 4px; border-bottom: 1px dashed var(--bd); } .shop-dl dt { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--blue); } .shop-dl dt .ico { width: 20px; height: 20px; } .shop-dl dd { margin: 0; } .shop-dl a { font-family: var(--f-en); font-weight: 700; font-size: 1.15em; color: var(--ink); } .shop-map iframe, .access-map iframe { width: 100%; height: 260px; border: 0; border-radius: var(--r); } .shop-info .btn { margin-top: 28px; } @media (max-width: 860px) { .shop-grid { grid-template-columns: 1fr; } .shop-img img { aspect-ratio: 4 / 3; } .shop-dl > div { grid-template-columns: 1fr; gap: 2px; } } /* ---------- CTA ---------- */ .cta { position: relative; padding-block: clamp(90px, 11vw, 150px); color: #fff; overflow: hidden; isolation: isolate; } .cta-bg { position: absolute; inset: 0; z-index: -1; } .cta-bg img { width: 100%; height: 130%; object-fit: cover; position: absolute; top: -15%; } .cta-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(23, 63, 120, .94), rgba(34, 86, 156, .86) 60%, rgba(19, 41, 90, .92)); } .cta-in { position: relative; max-width: 1080px; margin: 0 auto; padding: 0 32px; } .cta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .cta-card { position: relative; display: flex; align-items: center; gap: 18px; padding: 26px 26px; border-radius: var(--r); background: #fff; color: var(--ink); transition: transform .5s var(--ease), box-shadow .5s; box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .5); } .cta-card:hover { transform: translateY(-6px); } .cta-ico { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: var(--sky); color: var(--blue); } .cta-ico .ico { width: 28px; height: 28px; } .cta-txt { display: flex; flex-direction: column; line-height: 1.35; } .cta-txt small { font-size: 13px; font-weight: 700; color: var(--muted); } .cta-txt b { font-family: var(--f-disp); font-weight: 900; font-size: 24px; margin-top: 4px; } .cta-txt b.num { font-family: var(--f-en); font-weight: 800; font-size: 32px; color: var(--blue); letter-spacing: .02em; } .cta-txt em { font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; } .cta-arrow { margin-left: auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sky); color: var(--blue); flex: none; transition: transform .5s var(--ease); } .cta-arrow .ico { width: 18px; height: 18px; } .cta-card:hover .cta-arrow { transform: translateX(6px); } .cta-card.is-red { background: var(--red); color: #fff; } .cta-card.is-red small { color: rgba(255, 255, 255, .85); } .cta-card.is-red .cta-ico, .cta-card.is-red .cta-arrow { background: #fff; color: var(--red); } .cta-card.is-line .cta-ico { background: #e6f9ee; color: var(--line); } @media (max-width: 760px) { .cta-in { padding: 0 16px; } .cta-grid { grid-template-columns: 1fr; gap: 12px; } .cta-card { padding: 18px; gap: 14px; } .cta-ico { width: 50px; height: 50px; } .cta-txt b { font-size: 20px; } .cta-txt b.num { font-size: 27px; } } /* ---------- footer ---------- */ .ft { position: relative; background: var(--navy); color: rgba(255, 255, 255, .85); padding-top: 40px; overflow: hidden; } .ft-wave { position: absolute; left: 0; right: 0; top: -1px; height: 60px; transform: rotate(180deg); } .ft-wave svg { width: 100%; height: 100%; display: block; } .ft-wave .w1 { fill: #fff; opacity: .06; animation: wave 8s ease-in-out infinite alternate; } .ft-wave .w2 { fill: #fff; opacity: .04; animation: wave 11s ease-in-out infinite alternate-reverse; } @keyframes wave { to { transform: translateX(-4%) scaleY(1.2); } } .ft-in { max-width: 1200px; margin: 0 auto; padding: 70px 32px 50px; display: grid; grid-template-columns: 360px 1fr; gap: 60px; } .ft-logo img { width: 280px; max-width: 100%; } .ft-catch { margin: 14px 0 12px !important; font-family: var(--f-disp); font-weight: 800; color: #fff; } .ft address { font-style: normal; font-size: 13.5px; line-height: 2; } .ft address a { color: #fff; font-weight: 700; } .ft-sns { display: flex; gap: 10px; margin-top: 22px; } .ft-sns a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: background .3s, transform .4s var(--ease-back); } .ft-sns a:hover { background: var(--yellow); color: var(--navy); transform: translateY(-4px); } .ft-sns .ico { width: 20px; height: 20px; } .ft-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .ft-nav p { font-family: var(--f-en); font-size: 12px; letter-spacing: .16em; color: var(--sky-3); margin-bottom: 12px !important; } .ft-nav li a { display: inline-block; padding: 4px 0; font-size: 14px; transition: color .3s, transform .3s; } .ft-nav li a:hover { color: var(--yellow); transform: translateX(4px); } .ft-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; padding: 18px 32px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; } .ft-sub a:hover { color: #fff; text-decoration: underline; } .ft-copy { text-align: center; font-size: 11.5px; letter-spacing: .1em; padding: 14px 0 26px; margin: 0 !important; opacity: .7; } @media (max-width: 900px) { .ft-in { grid-template-columns: 1fr; gap: 40px; padding: 60px 20px 40px; } .ft-nav { grid-template-columns: 1fr 1fr; } .ft-copy { padding-bottom: 90px; } } /* ---------- dock / sp bar / totop ---------- */ .dock { position: fixed; right: 0; top: 50%; z-index: 90; display: flex; flex-direction: column; gap: 2px; transform: translate(100%, -50%); transition: transform .6s var(--ease); } .dock.is-show { transform: translate(0, -50%); } .dock a { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; padding: 12px 0 10px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; transition: background .3s, width .4s var(--ease); } .dock a:first-child { border-radius: 14px 0 0 0; } .dock a:last-child { border-radius: 0 0 0 14px; } .dock a:hover { background: var(--navy); width: 72px; } .dock a.is-line { background: var(--line); } .dock .ico { width: 24px; height: 24px; } .spbar { display: none; } @media (max-width: 900px) { .dock { display: none; } .spbar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 95; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 5px; border-radius: 20px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 10px 30px -10px rgba(19, 41, 90, .45); transform: translateY(140%); transition: transform .6s var(--ease); } .spbar.is-show { transform: none; } .spbar a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 0 5px; border-radius: 15px; font-size: 10.5px; font-weight: 700; color: var(--blue); background: var(--sky); } .spbar a.is-line { background: var(--line); color: #fff; } .spbar a.is-red { background: var(--red); color: #fff; } .spbar .ico { width: 22px; height: 22px; } } .totop { position: fixed; right: 18px; bottom: 18px; z-index: 89; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--blue); box-shadow: var(--shadow-s); opacity: 0; transform: translateY(20px); transition: opacity .4s, transform .5s var(--ease); pointer-events: none; } .totop.is-show { opacity: 1; transform: none; pointer-events: auto; } .totop svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .totop-ring { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 138.2; stroke-dashoffset: var(--off, 138.2); } .totop .ico { width: 20px; height: 20px; transform: rotate(-90deg); } @media (max-width: 900px) { .totop { bottom: calc(86px + env(safe-area-inset-bottom)); right: 12px; width: 46px; height: 46px; } } /* ========================================================= 下層ページ ========================================================= */ /* service bento */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .bento-item { position: relative; display: flex; flex-direction: column; border-radius: var(--r-l); background: #fff; overflow: hidden; box-shadow: var(--shadow-s); transition: transform .6s var(--ease), box-shadow .6s; } .bento-item:hover { transform: translateY(-8px); box-shadow: var(--shadow); } .bento-item.is-wide { grid-column: span 3; flex-direction: row; } .bento-item.is-wide:nth-child(2) { flex-direction: row-reverse; } .bento-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; } .is-wide .bento-img { flex: 1.3; aspect-ratio: auto; min-height: 300px; } .bento-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); } .bento-item:hover .bento-img img { transform: scale(1.07); } .bento-body { position: relative; flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 30px 30px 32px; } .is-wide .bento-body { justify-content: center; padding: 40px 48px; } .bento-ico { position: absolute; top: -28px; right: 26px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: var(--shadow-s); transition: transform .6s var(--ease-back); } .is-wide .bento-ico { position: static; margin-bottom: 8px; } .bento-item:hover .bento-ico { transform: rotate(-12deg) scale(1.1); } .bento-ico .ico { width: 26px; height: 26px; } .bento-en { font-family: var(--f-en); font-weight: 600; font-size: 12px; letter-spacing: .12em; color: var(--blue); } .bento-body b { font-family: var(--f-disp); font-weight: 900; font-size: clamp(20px, 2vw, 26px); color: var(--ink); } .is-wide .bento-body b { font-size: clamp(24px, 2.6vw, 32px); } .bento-txt { font-size: 15px; margin-bottom: 14px; } .bento-item:nth-child(3n+2) .bento-ico { background: var(--red); } .bento-item:nth-child(3n) .bento-ico { background: var(--green); } .bento-item:nth-child(4) .bento-ico { background: var(--orange); } @media (max-width: 900px) { .bento { grid-template-columns: 1fr 1fr; } .bento-item.is-wide { grid-column: span 2; flex-direction: column !important; } .is-wide .bento-img { min-height: 0; aspect-ratio: 16 / 9; flex: none; } .is-wide .bento-body { padding: 30px; } } @media (max-width: 600px) { .bento { grid-template-columns: 1fr; } .bento-item.is-wide { grid-column: auto; } } /* zigzag */ .zig { display: grid; gap: clamp(50px, 7vw, 100px); margin-top: 20px; } .zig-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 70px); align-items: center; } .zig-row.is-rev .zig-img { order: 2; } .zig-img { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 470 / 300; box-shadow: var(--shadow); } .zig-img img { width: 100%; height: 115%; object-fit: cover; } .zig-no { display: inline-block; padding: 4px 14px; border-radius: 99px; background: var(--yellow); color: var(--navy); font-family: var(--f-en); font-weight: 700; font-size: 12px; letter-spacing: .14em; margin-bottom: 14px; } .zig-body h3 { font-family: var(--f-disp); font-weight: 900; font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 18px; color: var(--ink); } @media (max-width: 800px) { .zig-row { grid-template-columns: 1fr; } .zig-row.is-rev .zig-img { order: 0; } } /* loan box (service/loan) */ .loanbox { margin-top: clamp(80px, 10vw, 130px); padding: clamp(50px, 6vw, 80px) clamp(20px, 4vw, 60px); border-radius: var(--r-l); background: var(--sky); } .loanbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .lcard { position: relative; padding: 46px 26px 30px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); font-size: 15px; } .lcard-no { position: absolute; top: -22px; left: 22px; font-family: var(--f-en); font-weight: 800; font-size: 50px; line-height: 1; color: var(--blue); } @media (max-width: 860px) { .loanbox-grid { grid-template-columns: 1fr; gap: 34px; } } /* voices */ .voices { columns: 3 300px; column-gap: 20px; } .voice { break-inside: avoid; margin-bottom: 20px; padding: 28px 26px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); position: relative; } .voice::before { content: "“"; position: absolute; right: 18px; top: 4px; font-family: var(--f-en); font-size: 80px; line-height: 1; color: var(--sky-2); } .voice-av { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: #fff; margin-bottom: 12px; } .voice-av .ico { width: 24px; height: 24px; } .av0 { background: var(--blue); } .av1 { background: var(--red); } .av2 { background: var(--green); } .av3 { background: var(--orange); } .voice h3 { font-family: var(--f-disp); font-weight: 900; font-size: 19px; margin-bottom: 10px; } .voice p { font-size: 14.5px; line-height: 1.9; } /* others chips */ .others { background: var(--bg-2); } .chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .chip { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-s); transition: transform .4s var(--ease), background .3s; overflow: hidden; } .chip:hover { transform: translateY(-4px); } .chip-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; } .chip-img img { width: 100%; height: 100%; object-fit: cover; } .chip-ico { display: none; } .chip b { font-family: var(--f-disp); font-weight: 800; font-size: 15px; line-height: 1.4; color: var(--ink); } .chip.is-current { background: var(--blue); } .chip.is-current b { color: #fff; } @media (max-width: 900px) { .chips { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .chip-img { width: 48px; height: 48px; } .chip b { font-size: 13px; } } /* split / stack (loan) */ .split { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 70px); align-items: center; } .split-img { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 470 / 300; box-shadow: var(--shadow); } .split-img img { width: 100%; height: 115%; object-fit: cover; } .split-label { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-disp); font-weight: 900; color: var(--red); margin-bottom: 4px !important; } .split-label b { font-family: var(--f-en); font-size: 72px; line-height: 1; } .split-label span { font-size: 22px; } .split-label small { font-size: 14px; color: var(--muted); } .h3 { font-family: var(--f-disp); font-weight: 900; font-size: clamp(21px, 2.4vw, 28px); margin-bottom: 18px !important; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } .stack-sec { padding-block: clamp(80px, 10vw, 140px); background: linear-gradient(180deg, #fff, var(--sky) 20%, var(--sky) 80%, #fff); } .stack { position: relative; display: grid; gap: 30px; } .stack-card { position: sticky; top: calc(var(--hd-h) + 30px); display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 40px; min-height: 340px; padding: 44px 50px; border-radius: var(--r-l); background: #fff; box-shadow: 0 -10px 40px -20px rgba(19, 41, 90, .3), var(--shadow); transform-origin: center top; } .stack-card.c2 { top: calc(var(--hd-h) + 50px); } .stack-card.c3 { top: calc(var(--hd-h) + 70px); } .stack-no { display: inline-block; font-family: var(--f-en); font-weight: 800; font-size: 14px; letter-spacing: .14em; color: var(--yellow); background: var(--navy); padding: 4px 14px; border-radius: 99px; margin-bottom: 14px; } .stack-card h3 { font-family: var(--f-disp); font-weight: 900; font-size: clamp(22px, 2.8vw, 34px); margin-bottom: 16px; } .stack-card h3 .big { font-family: var(--f-en); font-weight: 800; color: var(--red); font-size: 1.8em; margin-left: 10px; } .stack-img { border-radius: var(--r); overflow: hidden; aspect-ratio: 470 / 300; } .stack-img img { width: 100%; height: 100%; object-fit: cover; } .family { margin-top: 60px; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 470 / 200; } .family img { width: 100%; height: 120%; object-fit: cover; } @media (max-width: 800px) { .stack-card { grid-template-columns: 1fr; padding: 30px 22px; gap: 20px; min-height: 0; } .stack-img { order: -1; } .family { aspect-ratio: 470 / 300; } } /* faq */ .faq { display: grid; gap: 14px; } .faq-item { border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); overflow: hidden; border: 1px solid var(--bd); } .faq-item summary { position: relative; display: flex; align-items: center; gap: 16px; padding: 22px 64px 22px 22px; cursor: pointer; list-style: none; font-family: var(--f-disp); font-weight: 800; font-size: clamp(15px, 1.6vw, 18px); color: var(--ink); line-height: 1.6; } .faq-item summary::-webkit-details-marker { display: none; } .q, .a { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--f-en); font-weight: 800; font-size: 18px; color: #fff; background: var(--blue); } .a { background: var(--red); } .faq-pm { position: absolute; right: 22px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--sky); } .faq-pm::before, .faq-pm::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12px; height: 2px; background: var(--blue); transition: transform .4s var(--ease); } .faq-pm::after { transform: rotate(90deg); } .faq-item[open] .faq-pm::after { transform: rotate(0); } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); } .faq-item.is-open .faq-a { grid-template-rows: 1fr; } .no-motion .faq-item[open] .faq-a { grid-template-rows: 1fr; } .faq-a > div { min-height: 0; display: flex; gap: 16px; padding: 0 22px 24px; overflow: hidden; } .faq-a p { padding-top: 6px; } .faq-a a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; } /* warranty */ .wbadges { display: flex; justify-content: center; align-items: center; gap: 18px; margin-bottom: 40px; } .wbadge { display: grid; place-content: center; text-align: center; width: clamp(150px, 18vw, 210px); aspect-ratio: 1; border-radius: 50%; background: var(--blue); color: #fff; box-shadow: var(--shadow); line-height: 1.3; animation: floaty 5s ease-in-out infinite; } .wbadge.is-red { background: var(--red); animation-delay: -2.5s; } .wbadge small { font-weight: 700; font-size: 14px; } .wbadge b { font-family: var(--f-disp); font-weight: 900; font-size: clamp(22px, 2.6vw, 30px); } .wbadge b span { font-family: var(--f-en); font-size: 1.7em; } .wplus { font-family: var(--f-en); font-weight: 800; font-size: 50px; color: var(--yellow); -webkit-text-stroke: 2px var(--navy); } .story { font-size: clamp(15px, 1.5vw, 17px); line-height: 2.1; } .story p { margin-bottom: 1.4em; } .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: clamp(40px, 6vw, 70px) 0; } .trio > div { border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-s); } .trio img { width: 100%; height: 100%; object-fit: cover; } .talk { display: grid; gap: 10px; margin: 30px 0 40px; } .bubble { position: relative; max-width: 80%; padding: 18px 24px; border-radius: 22px; font-family: var(--f-disp); font-weight: 800; line-height: 1.7; } .bubble.is-me { justify-self: start; background: var(--sky); color: var(--navy); border-bottom-left-radius: 4px; } .bubble.is-you { justify-self: end; background: #3d4558; color: #fff; border-bottom-right-radius: 4px; } .talk-note { font-size: 14px; color: var(--muted); text-align: center; margin: 0 !important; } .conclusion { max-width: 880px; margin: clamp(50px, 7vw, 90px) auto 0; padding: clamp(36px, 5vw, 60px); border-radius: var(--r-l); background: var(--navy); color: #fff; text-align: center; font-size: clamp(16px, 1.8vw, 20px); line-height: 2; position: relative; overflow: hidden; } .conclusion::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -100px; top: -120px; background: radial-gradient(circle, rgba(255, 224, 61, .3), transparent 65%); } .conclusion b { font-family: var(--f-disp); font-weight: 900; font-size: 1.2em; color: var(--yellow); } .conclusion .hl { background: linear-gradient(transparent 62%, rgba(229, 25, 79, .8) 62%); font-family: var(--f-disp); font-weight: 900; } @media (max-width: 600px) { .trio { grid-template-columns: 1fr 1fr; } .trio > div:last-child { grid-column: span 2; aspect-ratio: 16 / 7; } .bubble { max-width: 92%; } .wplus { font-size: 34px; } } /* staff */ .mission { text-align: center; margin-bottom: clamp(60px, 8vw, 110px); } .mission .sh-en { justify-content: center; } .mission-ttl { font-family: var(--f-disp); font-weight: 900; font-size: clamp(26px, 4.4vw, 54px); line-height: 1.55; margin: 10px 0 30px !important; } .ceo { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(28px, 5vw, 70px); align-items: center; margin-bottom: clamp(70px, 9vw, 120px); padding: clamp(24px, 3vw, 40px); border-radius: var(--r-l); background: var(--sky); } .ceo-img { border-radius: var(--r); overflow: hidden; aspect-ratio: 5 / 4; } .ceo-img img { width: 100%; height: 100%; object-fit: cover; } .ceo-role { font-family: var(--f-en); font-weight: 700; letter-spacing: .2em; color: var(--blue); font-size: 13px; margin-bottom: 6px !important; } .ceo-body h3 { font-family: var(--f-disp); font-weight: 800; font-size: 16px; margin-bottom: 18px; } .ceo-body h3 b { display: block; font-weight: 900; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: .12em; } .staff { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .staff-card { padding: 14px 14px 26px; border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-s); transform-style: preserve-3d; transition: box-shadow .4s; } .staff-card:hover { box-shadow: var(--shadow); } .staff-img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; margin-bottom: 18px; background: var(--sky); } .staff-img img { width: 100%; height: 100%; object-fit: cover; } .staff-card h3 { font-family: var(--f-disp); font-weight: 900; font-size: 19px; margin: 0 10px 8px; } .staff-card p { margin: 0 10px !important; font-size: 14.5px; } @media (max-width: 860px) { .ceo { grid-template-columns: 1fr; } .staff { grid-template-columns: 1fr 1fr; gap: 14px; } } @media (max-width: 520px) { .staff { grid-template-columns: 1fr; } } /* access / company */ .access-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(28px, 5vw, 60px); align-items: center; margin-bottom: clamp(70px, 9vw, 120px); } .access-big { font-family: var(--f-disp); font-weight: 900; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.6; color: var(--ink); margin: 6px 0 14px !important; } .access-addr .btn { margin-top: 24px; } .access-map { border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); } .access-map iframe { height: 380px; border-radius: 0; } .access-map.wide iframe { height: 420px; } .routes { display: grid; gap: clamp(50px, 6vw, 80px); } .route-ttl { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-disp); font-weight: 900; font-size: clamp(19px, 2.2vw, 26px); margin-bottom: 26px; } .route-ttl span { font-family: var(--f-en); font-weight: 800; color: var(--red); letter-spacing: .14em; font-size: 14px; } .route-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; counter-reset: rs; } .route-steps li { counter-increment: rs; position: relative; padding: 14px 14px 22px; border-radius: var(--r-l); background: var(--bg-2); } .route-steps li::before { content: counter(rs); position: absolute; top: -14px; left: -10px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--f-en); font-weight: 800; font-size: 20px; } .route-img { display: block; border-radius: var(--r); overflow: hidden; margin-bottom: 14px; } .route-steps p { margin: 0 6px !important; font-weight: 500; } .table { margin: 0; border-top: 2px solid var(--blue); } .table > div { display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--bd); } .table dt { padding: 22px 20px; font-weight: 700; color: var(--blue); background: var(--sky); } .table dd { margin: 0; padding: 22px 24px; } .table.small > div { grid-template-columns: 140px 1fr; } .table.small dt, .table.small dd { padding: 14px 18px; } @media (max-width: 760px) { .access-top { grid-template-columns: 1fr; } .route-steps { grid-template-columns: 1fr; gap: 30px; } .table > div, .table.small > div { grid-template-columns: 1fr; } .table dt { padding: 12px 16px; } .table dd { padding: 14px 16px 20px; } .access-map iframe { height: 300px; } } /* doc (privacy etc.) */ .doc h2 { position: relative; display: flex; align-items: center; gap: 14px; font-family: var(--f-disp); font-weight: 900; font-size: clamp(19px, 2.2vw, 24px); margin: 50px 0 16px; padding-bottom: 14px; border-bottom: 2px solid var(--sky-2); } .doc h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 80px; height: 2px; background: var(--blue); } .doc-no { font-family: var(--f-en); font-weight: 800; color: var(--blue); font-size: .9em; } .doc-lead { font-size: 16.5px; padding: 26px 30px; border-radius: var(--r); background: var(--sky); } .doc ul { margin: 14px 0; display: grid; gap: 8px; } .doc ul li { position: relative; padding-left: 26px; } .doc ul li::before { content: ""; position: absolute; left: 4px; top: .7em; width: 10px; height: 10px; border-radius: 50%; border: 3px solid var(--blue); } .doc-box { margin-top: 30px; padding: 26px 30px; border-radius: var(--r); border: 2px dashed var(--sky-3); } .doc-box-ttl { font-weight: 700; color: var(--blue); margin-bottom: 6px !important; } .measures { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px !important; margin: 20px 0 40px !important; } .measures li { padding: 22px 12px !important; text-align: center; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-s); font-weight: 700; font-size: 14px; } .measures li::before { display: none; } .measures img { width: 80px; margin: 0 auto 10px; } @media (max-width: 600px) { .measures { grid-template-columns: 1fr 1fr; } } /* forms */ .form-sec { padding-top: clamp(60px, 7vw, 100px); } .fsteps { display: flex; justify-content: center; gap: 0; margin: 10px auto 50px; max-width: 520px; counter-reset: s; } .fsteps li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--muted); } .fsteps li + li::before { content: ""; position: absolute; top: 20px; right: 50%; width: 100%; height: 3px; background: var(--bd); z-index: -1; } .fsteps i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 3px solid var(--bd); font-style: normal; font-family: var(--f-en); font-weight: 800; font-size: 17px; transition: all .4s var(--ease); } .fsteps li.is-on { color: var(--blue); } .fsteps li.is-on i { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 6px var(--sky-2); } .fsteps li.is-done i { background: var(--sky-2); border-color: var(--sky-2); color: var(--blue); } .fsteps li.is-done + li::before, .fsteps li.is-on::before { background: var(--blue); } .form-layout { display: grid; gap: 40px; max-width: 880px; margin: 0 auto; } .form-layout.has-nav { max-width: 1140px; grid-template-columns: 240px 1fr; align-items: start; } .form-nav { position: sticky; top: calc(var(--hd-h) + 30px); padding: 22px; border-radius: var(--r); background: var(--sky); font-size: 13.5px; } .form-nav > p { font-weight: 700; color: var(--navy); margin-bottom: 10px !important; } .form-meter { position: relative; height: 12px; border-radius: 9px; background: #fff; margin-bottom: 18px; } .form-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--blue), var(--sky-3)); transition: width .6s var(--ease); } .form-meter span { position: absolute; right: 0; top: 16px; font-family: var(--f-en); font-weight: 700; color: var(--blue); } .form-nav ul { display: grid; gap: 4px; margin-top: 24px !important; } .form-nav li a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; color: var(--text); transition: background .3s; } .form-nav li a:hover, .form-nav li a.is-cur { background: #fff; color: var(--blue); } .form-nav li a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sky-3); flex: none; transition: all .3s; } .form-nav li a.is-ok::before { background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; border-color: var(--green); } @media (max-width: 960px) { .form-layout.has-nav { grid-template-columns: 1fr; } .form-nav { position: sticky; top: calc(var(--hd-h) + var(--ab, 0px) + 6px); z-index: 20; padding: 12px 16px; box-shadow: var(--shadow-s); } .form-nav ul, .form-nav > p { display: none; } .form-meter { margin: 0 46px 0 0; } .form-meter span { top: -4px; right: -46px; } } .form-box { padding: clamp(24px, 4vw, 54px); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow); border: 1px solid var(--bd); } .f-sec { margin-bottom: 44px; scroll-margin-top: calc(var(--hd-h) + 90px); } .f-sec-ttl { display: flex; align-items: center; gap: 12px; font-family: var(--f-disp); font-weight: 900; font-size: 20px; color: var(--navy); margin-bottom: 18px !important; padding: 12px 18px; border-radius: 12px; background: var(--sky); } .f-sec-ttl::before { content: ""; width: 8px; height: 22px; border-radius: 4px; background: var(--blue); } .f-row { display: grid; grid-template-columns: 210px 1fr; gap: 10px 24px; padding: 18px 0; border-bottom: 1px solid var(--bd); } .f-row:last-child { border-bottom: 0; } .f-lab { display: flex; align-items: flex-start; gap: 8px; padding-top: 12px; font-weight: 700; font-size: 15px; color: var(--ink); line-height: 1.5; } .f-lab small { display: block; font-weight: 500; font-size: 12px; color: var(--muted); } .req, .opt { flex: none; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #fff; background: var(--red); line-height: 1.6; } .opt { background: #a7b1c2; } .f-in { min-width: 0; } .f-note { font-size: 12.5px; color: var(--muted); margin-top: 6px !important; line-height: 1.6; } .f-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .f-inline > span.u { font-size: 14px; } .f-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .f-addr { display: grid; gap: 10px; } .f-addr .f-zip { display: flex; align-items: center; gap: 10px; } .f-addr .f-zip .wpcf7-form-control-wrap { width: 180px; } .pmr-form input[type=text], .pmr-form input[type=email], .pmr-form input[type=tel], .pmr-form input[type=number], .pmr-form select, .pmr-form textarea { width: 100%; min-height: 54px; padding: 12px 16px; border: 2px solid var(--bd); border-radius: 12px; background: var(--bg-2); font: inherit; font-size: 16px; color: var(--ink); transition: border-color .3s, background .3s, box-shadow .3s; -webkit-appearance: none; appearance: none; } .pmr-form select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322569c' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; } .pmr-form textarea { min-height: 180px; line-height: 1.8; } .pmr-form input:focus, .pmr-form select:focus, .pmr-form textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 5px var(--sky-2); } .pmr-form .f-inline .wpcf7-form-control-wrap { flex: 0 1 auto; } .pmr-form .w-s input, .pmr-form .w-s select { width: 86px; } .pmr-form .w-m input, .pmr-form .w-m select { width: 150px; } .pmr-form ::placeholder { color: #a8b2c2; } .pmr-form .wpcf7-radio, .pmr-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 10px; } .pmr-form .wpcf7-list-item { margin: 0; } .pmr-form .wpcf7-list-item label { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border: 2px solid var(--bd); border-radius: 12px; background: var(--bg-2); cursor: pointer; font-weight: 500; transition: border-color .3s, background .3s; } .pmr-form .wpcf7-list-item input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border-radius: 50%; border: 2px solid #b6c2d3; background: #fff; transition: all .3s var(--ease-back); flex: none; } .pmr-form .wpcf7-checkbox .wpcf7-list-item input, .pmr-form .wpcf7-acceptance .wpcf7-list-item input { border-radius: 6px; } .pmr-form .wpcf7-list-item input:checked { border: 6px solid var(--blue); } .pmr-form .wpcf7-checkbox .wpcf7-list-item input:checked, .pmr-form .wpcf7-acceptance input:checked { border: 0; background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; } .pmr-form .wpcf7-list-item label:has(input:checked) { border-color: var(--blue); background: #fff; color: var(--blue); } .pmr-form input[type=file] { width: 100%; padding: 16px; border: 2px dashed var(--sky-3); border-radius: 12px; background: var(--sky); font-size: 14px; cursor: pointer; } .pmr-form input[type=file]::file-selector-button { margin-right: 14px; padding: 8px 16px; border: 0; border-radius: 99px; background: var(--blue); color: #fff; font-weight: 700; cursor: pointer; } .f-agree { margin-top: 36px; text-align: center; } .f-agree a { color: var(--blue); text-decoration: underline; } .f-submit { margin-top: 30px; text-align: center; } .pmr-form .wpcf7-submit, .f-submit .btn { min-width: min(100%, 340px); min-height: 66px; border: 0; border-radius: 99px; background: var(--red); color: #fff; font-family: var(--f-disp); font-weight: 900; font-size: 18px; letter-spacing: .08em; cursor: pointer; box-shadow: 0 14px 30px -12px rgba(229, 25, 79, .7); transition: transform .3s var(--ease-back), background .3s; } .pmr-form .wpcf7-submit:hover { transform: translateY(-3px); background: var(--red-d); } .pmr-form .wpcf7-not-valid-tip { font-size: 13px; color: var(--red); margin-top: 6px; font-weight: 700; } .pmr-form .wpcf7-not-valid { border-color: var(--red) !important; background: #fff5f7 !important; } .pmr-form .wpcf7-response-output { margin: 24px 0 0 !important; padding: 14px 18px !important; border-radius: 12px; border-width: 2px !important; font-size: 14px; } .pmr-form .wpcf7-spinner { display: block; margin: 14px auto 0; } .form-missing { padding: 24px; border-radius: 12px; background: var(--yellow-l); text-align: center; } .form-note { margin-top: 24px !important; font-size: 13.5px; } .form-note a { color: var(--blue); text-decoration: underline; } .line-box { display: flex; align-items: center; gap: 30px; max-width: 700px; margin: 50px auto 0; padding: 24px 30px; border-radius: var(--r-l); background: #e9f9ef; } .line-box img { width: 140px; border-radius: 12px; } .line-box-ttl { font-family: var(--f-disp); font-weight: 900; font-size: 18px; color: #087a3a; margin-bottom: 16px !important; } @media (max-width: 760px) { .f-row { grid-template-columns: 1fr; padding: 14px 0; gap: 8px; } .f-lab { padding-top: 0; } .f-grid2 { grid-template-columns: 1fr 1fr; } .line-box { flex-direction: column; text-align: center; } .pmr-form .wpcf7-list-item label { padding: 10px 14px 10px 12px; } } /* confirm modal */ .confirm { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(19, 41, 90, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .4s; } .confirm[hidden] { display: none; } .confirm.is-open { opacity: 1; } .confirm-in { width: min(760px, 100%); max-height: calc(100vh - 40px); max-height: calc(100svh - 40px); overflow-y: auto; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-l); background: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5); transform: translateY(30px) scale(.97); transition: transform .5s var(--ease); overscroll-behavior: contain; } .confirm.is-open .confirm-in { transform: none; } .confirm-step { font-family: var(--f-en); font-weight: 700; letter-spacing: .2em; color: var(--blue); font-size: 13px; margin-bottom: 4px !important; } .confirm h2 { font-family: var(--f-disp); font-weight: 900; font-size: 24px; } .confirm-lead { font-size: 14px; color: var(--muted); margin: 6px 0 20px !important; } .confirm-list { margin: 0; border-top: 2px solid var(--blue); } .confirm-list > div { display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--bd); font-size: 14.5px; } .confirm-list dt { padding: 12px 14px; background: var(--sky); font-weight: 700; color: var(--navy); } .confirm-list dd { margin: 0; padding: 12px 16px; white-space: pre-wrap; word-break: break-all; } .confirm-list .sec-row { display: block; padding: 18px 0 6px; font-family: var(--f-disp); font-weight: 900; color: var(--blue); border-bottom: 0; } .confirm-list dd.empty { color: #b0b8c6; } .confirm-btns { display: flex; justify-content: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; } .confirm-btns .btn { min-width: 200px; } @media (max-width: 600px) { .confirm-list > div { grid-template-columns: 1fr; } .confirm-list dt { padding: 8px 12px; } .confirm-btns .btn { flex: 1; min-width: 0; } } /* thanks */ .thanks { text-align: center; } .thanks-mark svg { width: 96px; height: 96px; margin: 0 auto 10px; display: block; fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .thanks-mark circle { stroke-dasharray: 230; stroke-dashoffset: 230; animation: draw 1s var(--ease) .3s forwards; } .thanks-mark path { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .6s var(--ease) 1.1s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .thanks-big { font-family: var(--f-disp); font-weight: 900; font-size: clamp(28px, 4.4vw, 46px); line-height: 1.35; color: var(--navy); margin: 6px 0 10px !important; } .thanks h2 { font-family: var(--f-body); font-weight: 700; font-size: clamp(17px, 2vw, 21px); color: var(--blue); margin: 0 0 24px; } .thanks .small { font-size: 14px; color: var(--muted); } .thanks .doc-box { text-align: left; max-width: 560px; margin: 40px auto 0; } /* blog single / pager */ .single { padding-top: calc(var(--hd-h) + 70px); padding-bottom: clamp(70px, 9vw, 120px); } .single-hd .bc { margin: 0 0 30px; } .single-date { display: flex; align-items: center; gap: 14px; margin-bottom: 14px !important; font-family: var(--f-en); color: var(--blue); } .single-date b { font-size: 22px; font-weight: 800; } .single-cat { padding: 2px 12px; border-radius: 99px; background: var(--sky); font-family: var(--f-body); font-size: 12px; font-weight: 700; } .single-ttl { font-family: var(--f-disp); font-weight: 900; font-size: clamp(20px, 2.8vw, 30px); line-height: 1.6; padding-bottom: 26px; border-bottom: 2px solid var(--sky-2); } .single-eye { margin-top: 34px; } .single-eye img { width: 100%; border-radius: var(--r-l); } .entry { margin-top: 40px; font-size: 16.5px; line-height: 2.05; } .entry p { margin-bottom: 1.2em; } .entry figure { margin: 26px 0; } .entry img, .entry video { border-radius: var(--r); margin-inline: auto; height: auto; } .entry video { width: 100%; height: auto; background: #000; } .entry strong { color: var(--blue); } .entry a { color: var(--blue); text-decoration: underline; } .entry h2, .entry h3 { font-family: var(--f-disp); margin: 1.8em 0 .8em; } .pn { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 70px; } .pn a { display: flex; flex-direction: column; padding: 18px 22px; border-radius: var(--r); background: var(--bg-2); transition: background .3s; } .pn a:hover { background: var(--sky-2); } .pn small { font-size: 12px; color: var(--muted); } .pn span { font-family: var(--f-en); font-weight: 700; color: var(--blue); } .pn-next { text-align: right; } .pn-list { align-items: center; justify-content: center; width: 90px; height: 90px; padding: 0 !important; border-radius: 50% !important; background: var(--blue) !important; color: #fff; font-weight: 700; font-size: 14px; } .pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 60px; } .pager a, .pager b, .pager-dots { display: grid; place-items: center; min-width: 48px; height: 48px; padding: 0 6px; border-radius: 50%; font-family: var(--f-en); font-weight: 700; } .pager a { background: var(--bg-2); color: var(--blue); transition: background .3s, color .3s; } .pager a:hover { background: var(--blue); color: #fff; } .pager b { background: var(--blue); color: #fff; } .pager-ar { font-size: 22px; } .pager-total { margin-top: 16px !important; font-size: 13px; color: var(--muted); } @media (max-width: 600px) { .pn { grid-template-columns: 1fr 1fr; } .pn-list { grid-column: span 2; order: 3; width: auto; height: 50px; border-radius: 99px !important; } .pager a, .pager b, .pager-dots { min-width: 40px; height: 40px; } } /* reduce motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .reveal, .js .fv-copy .ch, .js .fv-copy .br, .js .fv-band, .js .fv-gift, .js .fv-badge, .js .fv-feats li, .js .fv-flow-tag, .js .fv-steps, .js .fv-steps li, .js .fv-foot > *, .js .fv-photo { opacity: 1 !important; transform: none !important; } .fv-hand span, .fv-new span { clip-path: none !important; } .reveal-clip > img, .reveal-clip > iframe, .reveal-clip > .video { clip-path: none !important; transform: none !important; } .mask > span, .sh-en .ch, .ph-en .ch { transform: none !important; opacity: 1 !important; } .loader { display: none; } } /* page transition（対応ブラウザのみ） */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vtOut .35s var(--ease) both; } ::view-transition-new(root) { animation: vtIn .55s var(--ease) both; } @keyframes vtOut { to { opacity: 0; transform: translateY(-14px); } } @keyframes vtIn { from { opacity: 0; transform: translateY(18px); } } /* ========================================================= プレミアカーリース（仮ページ） ========================================================= */ .sp { display: none; } @media (max-width: 767px) { .sp { display: inline; } } .pmr-tpl-lease .ph-img-in img { object-position: 50% 42%; } .lease-intro { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .lease-logo { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: var(--r-l); background: radial-gradient(ellipse at 50% 55%, #3a2c10 0%, #15110a 50%, #050505 100%); box-shadow: var(--shadow); overflow: hidden; } .lease-logo img { width: 90%; height: auto; } .lease-kicker { display: inline-block; padding: 4px 16px; border-radius: 99px; background: var(--red); color: #fff; font-family: var(--f-disp); font-weight: 800; font-size: 15px; margin-bottom: 14px !important; } .lease-catch { font-family: var(--f-disp); font-weight: 900; font-size: clamp(24px, 3vw, 36px); line-height: 1.45; color: var(--ink); margin-bottom: 18px !important; text-wrap: balance; } .lease-intro-body b { color: var(--red); } .lease-concept { position: relative; padding-block: clamp(80px, 10vw, 130px); background: linear-gradient(180deg, #3c97ea 0%, #8fcaf5 45%, #e6f4fd 100%); text-align: center; overflow: hidden; } .lease-concept::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -60px; height: 120px; background: #fff; border-radius: 50% 50% 0 0; } .lease-concept .wrap { position: relative; z-index: 1; } .lease-concept-sub { display: inline-block; padding: 8px 24px; background: #183b85; color: #fff; font-family: var(--f-disp); font-weight: 800; font-size: clamp(14px, 1.6vw, 19px); transform: rotate(-3deg); } .lease-concept-ttl { margin: 22px 0 10px !important; font-family: var(--f-disp); font-weight: 900; font-size: clamp(40px, 7.4vw, 104px); line-height: 1.12; color: #10295e; paint-order: stroke fill; -webkit-text-stroke: clamp(4px, .6vw, 9px) #fff; } .lease-concept-ttl .ch { color: rgba(16, 41, 94, .25); } .lease-concept-ttl .ch.on { color: #10295e; } .lease-concept-gift { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; font-family: var(--f-disp); font-weight: 900; font-size: clamp(20px, 2.6vw, 34px); color: #e3125a; paint-order: stroke fill; -webkit-text-stroke: 5px #fff; margin-bottom: 26px !important; } .lease-concept-gift strong { font-size: 1.35em; background: linear-gradient(transparent 68%, var(--yellow) 68%); } .lease-badge { display: inline-grid; place-content: center; width: 4.2em; height: 4.2em; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #fff6a0, #ffe23a 52%, #f4c300 100%); color: #10295e; font-size: .62em; line-height: 1.15; -webkit-text-stroke: 0; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .35); animation: wobble 3.4s ease-in-out infinite; } .lease-badge b { font-size: 1.4em; font-weight: 900; } .lease-concept-txt { max-width: 820px; margin: 0 auto !important; padding: 22px 28px; border-radius: var(--r); background: rgba(255, 255, 255, .9); font-weight: 500; color: var(--ink); } .lease-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .lease-feats li { padding: 30px 22px 26px; border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-s); text-align: center; } .lf-ico { --u: 10px; display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; background: var(--c); color: #fff; animation: icoBob 3.2s ease-in-out infinite; } .lease-feats li:nth-child(2) .lf-ico { animation-delay: .4s; } .lease-feats li:nth-child(3) .lf-ico { animation-delay: .8s; } .lease-feats li:nth-child(4) .lf-ico { animation-delay: 1.2s; } .lf-ico .ico { width: 38px; height: 38px; stroke-width: 2.2; } .lease-feats b { display: block; font-family: var(--f-disp); font-weight: 900; font-size: 19px; line-height: 1.45; color: var(--c); margin-bottom: 8px; } .lease-feats p { font-size: 14.5px; } .lease-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; } .lease-nums li { padding: 28px 18px; border-radius: var(--r-l); background: var(--navy); color: #fff; text-align: center; } .lease-nums small { display: block; font-weight: 700; color: var(--sky-3); } .lease-nums b { display: block; margin: 8px 0 6px; font-family: var(--f-disp); font-weight: 900; font-size: 20px; line-height: 1.25; color: var(--yellow); } .lease-nums b span { font-family: var(--f-en); font-weight: 800; font-size: clamp(48px, 6vw, 72px); margin: 0 4px; } .lease-nums b.txt { font-size: clamp(26px, 3vw, 36px); } .lease-nums b i { font-style: normal; font-size: 22px; } .lease-nums p { font-size: 13.5px; opacity: .85; } .lease-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; max-width: 900px; margin: 56px auto 0; } .lc-col { padding: 30px 24px; border-radius: var(--r-l); background: var(--bg-2); text-align: center; color: var(--muted); } .lc-col.is-premier { background: #fff0f4; color: var(--red-d); box-shadow: 0 0 0 3px var(--red), var(--shadow); } .lc-label { font-weight: 700; margin-bottom: 4px !important; } .lc-big { font-family: var(--f-disp); font-weight: 900; font-size: clamp(32px, 4vw, 48px); line-height: 1.2; margin-bottom: 6px !important; } .lc-vs { font-family: var(--f-en); font-weight: 800; font-size: 26px; color: var(--blue); } .lease-flow-sec { background: var(--sky); } .lease-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .lease-flow li { --u: 10px; position: relative; padding: 18px 16px 22px; border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-s); text-align: center; } .lease-flow li + li::before { content: ""; position: absolute; left: -19px; top: 44%; width: 12px; height: 12px; border-top: 4px solid var(--blue); border-right: 4px solid var(--blue); transform: rotate(45deg); animation: chev 1.6s ease-in-out infinite; } .lfl-no { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: #fff; font-family: var(--f-en); font-weight: 800; font-size: 19px; } .lfl-img { display: block; height: 110px; margin: 14px 0 12px; border-radius: 14px; overflow: hidden; } .lfl-img img { width: 100%; height: 100%; object-fit: contain; } .lease-flow li:nth-child(2) .lfl-img img { object-fit: cover; } .lease-flow b { display: block; font-family: var(--f-disp); font-weight: 900; font-size: 18px; color: var(--navy); margin-bottom: 4px; } .lease-flow p { font-size: 14px; } .lease-both { max-width: 960px; margin: 0 auto; padding: clamp(36px, 5vw, 60px); border-radius: var(--r-l); background: linear-gradient(135deg, #fff 0%, var(--sky) 100%); box-shadow: var(--shadow); text-align: center; } .lease-both-kicker { font-family: var(--f-en); font-weight: 800; letter-spacing: .2em; color: var(--red); margin-bottom: 6px !important; } .lease-both h2 { font-family: var(--f-disp); font-weight: 900; font-size: clamp(22px, 3vw, 34px); margin-bottom: 16px; } .lease-both .btns { margin-top: 30px; } @media (max-width: 900px) { .lease-intro { grid-template-columns: 1fr; } .lease-feats, .lease-flow { grid-template-columns: 1fr 1fr; gap: 26px 14px; } .lease-flow li + li::before { display: none; } .lease-nums { grid-template-columns: 1fr; } } @media (max-width: 600px) { .lease-compare { grid-template-columns: 1fr; gap: 10px; } .lease-feats li { padding: 22px 14px; } .lease-feats b { font-size: 16px; } .lfl-img { height: 80px; } } /* ========================================================= ローン申込ページ（誠実さ・信頼感を重視した落ち着いたデザイン） ========================================================= */ body.pmr-tpl-form-loan { background: #f5f7fa; } .pmr-tpl-form-loan .ph { padding-bottom: 36px; background: #fff; border-bottom: 1px solid #e3e8ef; } .pmr-tpl-form-loan .ph-deco { display: none; } .pmr-tpl-form-loan .ph-en { font-size: 13px; font-weight: 700; letter-spacing: .3em; color: var(--blue); -webkit-text-stroke: 0; display: flex; align-items: center; gap: 12px; margin-bottom: 10px !important; } .pmr-tpl-form-loan .ph-en::before { content: ""; width: 28px; height: 2px; background: var(--blue); } .pmr-tpl-form-loan .ph-en .ch { transform: none; opacity: 1; } .pmr-tpl-form-loan .ph-title, .pmr-tpl-form-loan .sh-ttl, .pmr-tpl-form-loan .f-sec-ttl, .pmr-tpl-form-loan .secure h2, .pmr-tpl-form-loan .draft-note-ttl { font-family: var(--f-body); font-weight: 700; letter-spacing: .06em; } .pmr-tpl-form-loan .ph-title { font-size: clamp(24px, 3vw, 34px); } .pmr-tpl-form-loan .sh-en::before { width: 24px; height: 2px; background: var(--navy); } .pmr-tpl-form-loan .sh-ttl { font-size: clamp(22px, 2.6vw, 30px); color: var(--navy); } .pmr-tpl-form-loan .form-sec { padding-top: 56px; } .pmr-tpl-form-loan .lead { font-size: 15px; color: var(--text); } .pmr-tpl-form-loan .fsteps i { border-width: 2px; } .pmr-tpl-form-loan .fsteps li.is-on i { background: var(--navy); border-color: var(--navy); box-shadow: 0 0 0 5px #dde5f0; } .pmr-tpl-form-loan .fsteps li.is-on { color: var(--navy); } .pmr-tpl-form-loan .fsteps li.is-done + li::before, .pmr-tpl-form-loan .fsteps li.is-on::before { background: var(--navy); } /* 安心してお申込みいただくために */ .secure { max-width: 1140px; margin: 0 auto 28px; padding: clamp(24px, 3.4vw, 40px); background: #fff; border: 1px solid #dfe5ee; border-top: 4px solid var(--navy); border-radius: 6px; } .secure-head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 22px; } .secure-ico { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #e9eef6; color: var(--navy); } .secure-ico .ico { width: 28px; height: 28px; } .secure h2 { font-size: clamp(18px, 2vw, 22px); color: var(--navy); margin-bottom: 6px; } .secure-head p { font-size: 14.5px; } .secure-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .secure-list li { position: relative; padding: 16px 18px 16px 48px; background: #f7f9fc; border: 1px solid #e6ebf2; border-radius: 4px; } .secure-list li::before { content: ""; position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; border-radius: 50%; background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; } .secure-list b { display: block; font-size: 15px; color: var(--navy); margin-bottom: 2px; } .secure-list span { display: block; font-size: 13.5px; line-height: 1.75; color: var(--text); } .secure-foot { margin-top: 18px !important; font-size: 13.5px; color: var(--muted); } .secure-foot a { color: var(--blue); text-decoration: underline; } /* 一時保存のお知らせ・復元 */ .draft-note { display: flex; gap: 16px; max-width: 1140px; margin: 0 auto 28px; padding: 20px 24px; background: #fffaf0; border: 1px solid #f0dfb5; border-left: 4px solid #d9a521; border-radius: 4px; } .draft-note-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #b88400; border: 1px solid #f0dfb5; } .draft-note-ico .ico { width: 20px; height: 20px; } .draft-note-ttl { font-size: 16px; color: #6b5100; margin-bottom: 4px !important; } .draft-note p { font-size: 13.5px; line-height: 1.8; } .draft-note b { color: #6b5100; } .draft-restore { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1140px; margin: 0 auto 28px; padding: 18px 24px; background: #eef4fb; border: 1px solid #c9d8ec; border-radius: 4px; } .draft-restore[hidden] { display: none; } .draft-restore p { margin: 0 !important; font-size: 14px; } .draft-restore p b { display: block; color: var(--navy); font-size: 15px; } .draft-restore > div { display: flex; gap: 10px; flex-wrap: wrap; } .draft-save { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-top: 16px; padding: 0 14px; border: 1.5px solid var(--navy); border-radius: 6px; background: #fff; color: var(--navy); font-weight: 700; font-size: 14px; transition: background .3s, color .3s; } .draft-save:hover { background: var(--navy); color: #fff; } .draft-save .ico { width: 18px; height: 18px; } .draft-save.is-wide { width: auto; margin: 0 auto; padding: 0 28px; } .draft-status { margin: 8px 0 0 !important; font-size: 12px; color: var(--green); min-height: 1em; } .draft-bottom { margin-top: 34px; padding-top: 26px; border-top: 1px dashed #d6dde8; text-align: center; } .secure-mini { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 0 !important; font-size: 12.5px; color: var(--muted); } .secure-mini .ico { width: 16px; height: 16px; color: var(--navy); flex: none; } .toast { position: fixed; left: 50%; bottom: 28px; z-index: 300; max-width: calc(100vw - 32px); padding: 14px 22px; border-radius: 6px; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .45); transform: translate(-50%, 30px); opacity: 0; transition: opacity .3s, transform .4s var(--ease); pointer-events: none; } .toast.is-show { opacity: 1; transform: translate(-50%, 0); } /* フォーム本体：申込書のような表組み */ .pmr-tpl-form-loan .form-nav { background: #fff; border: 1px solid #dfe5ee; border-radius: 6px; } .pmr-tpl-form-loan .form-meter { background: #e9eef5; border-radius: 3px; height: 8px; margin-bottom: 34px; } .pmr-tpl-form-loan .form-meter i { border-radius: 3px; background: var(--navy); } .pmr-tpl-form-loan .form-meter span { color: var(--navy); } .pmr-tpl-form-loan .form-nav li a { border-radius: 4px; } .pmr-tpl-form-loan .form-nav li a:hover, .pmr-tpl-form-loan .form-nav li a.is-cur { background: #f1f4f9; color: var(--navy); } .pmr-tpl-form-loan .form-box { border-radius: 6px; border: 1px solid #dfe5ee; box-shadow: 0 2px 10px rgba(19, 41, 90, .05); } .pmr-tpl-form-loan .f-sec { counter-increment: fsec; } .pmr-tpl-form-loan .pmr-form { counter-reset: fsec; } .pmr-tpl-form-loan .f-sec-ttl { padding: 12px 16px; border-radius: 4px; background: var(--navy); color: #fff; font-size: 17px; margin-bottom: 0 !important; } .pmr-tpl-form-loan .f-sec-ttl::before { content: counter(fsec, decimal-leading-zero); width: auto; height: auto; padding-right: 12px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, .35); border-radius: 0; background: none; font-family: var(--f-en); font-weight: 600; letter-spacing: .06em; } .pmr-tpl-form-loan .f-row { grid-template-columns: 230px 1fr; gap: 0; padding: 0; border: 1px solid #e1e7ef; border-top: 0; } .pmr-tpl-form-loan .f-row:last-child { border-bottom: 1px solid #e1e7ef; } .pmr-tpl-form-loan .f-lab { padding: 16px 18px; background: #f4f6f9; font-size: 14.5px; } .pmr-tpl-form-loan .f-in { padding: 14px 18px; background: #fff; } .pmr-tpl-form-loan .f-sec > .f-note { margin: 12px 2px !important; } .pmr-tpl-form-loan .req { border-radius: 2px; background: #c8102e; } .pmr-tpl-form-loan .opt { border-radius: 2px; background: #9aa5b5; } .pmr-tpl-form-loan .pmr-form input[type=text], .pmr-tpl-form-loan .pmr-form input[type=email], .pmr-tpl-form-loan .pmr-form input[type=tel], .pmr-tpl-form-loan .pmr-form select, .pmr-tpl-form-loan .pmr-form textarea { min-height: 48px; border: 1px solid #c3cddb; border-radius: 4px; background-color: #fff; font-size: 15.5px; } .pmr-tpl-form-loan .pmr-form input:focus, .pmr-tpl-form-loan .pmr-form select:focus, .pmr-tpl-form-loan .pmr-form textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px #dbe4f1; } .pmr-tpl-form-loan .pmr-form .wpcf7-list-item label { border: 1px solid #c3cddb; border-radius: 4px; background: #fff; padding: 10px 16px 10px 12px; } .pmr-tpl-form-loan .pmr-form .wpcf7-list-item input:checked { border-color: var(--navy); } .pmr-tpl-form-loan .pmr-form .wpcf7-list-item label:has(input:checked) { border-color: var(--navy); color: var(--navy); background: #f1f5fb; } .pmr-tpl-form-loan .pmr-form input[type=file] { border-radius: 4px; border: 1px dashed #9fb2cc; background: #f7f9fc; } .pmr-tpl-form-loan .pmr-form input[type=file]::file-selector-button { border-radius: 4px; background: var(--navy); } .pmr-tpl-form-loan .pmr-form .wpcf7-submit { border-radius: 6px; background: var(--navy); box-shadow: none; font-family: var(--f-body); font-weight: 700; letter-spacing: .12em; } .pmr-tpl-form-loan .pmr-form .wpcf7-submit:hover { background: var(--blue); transform: none; } .pmr-tpl-form-loan .f-agree { padding: 18px; background: #f7f9fc; border: 1px solid #e1e7ef; border-radius: 4px; } .pmr-tpl-form-loan .btn { border-radius: 6px; } .pmr-tpl-form-loan .confirm-in { border-radius: 8px; } .pmr-tpl-form-loan .confirm h2 { font-family: var(--f-body); font-weight: 700; } @media (max-width: 960px) { .pmr-tpl-form-loan .form-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .pmr-tpl-form-loan .form-meter { flex: 1; margin: 0 40px 0 0; } .pmr-tpl-form-loan .draft-save { width: auto; margin: 0; min-height: 38px; font-size: 12.5px; padding: 0 12px; } .pmr-tpl-form-loan .draft-status { display: none; } } @media (max-width: 760px) { .secure-list { grid-template-columns: 1fr; } .secure-head { flex-direction: column; gap: 12px; } .draft-note { flex-direction: column; gap: 10px; padding: 18px; } .pmr-tpl-form-loan .f-row { grid-template-columns: 1fr; } .pmr-tpl-form-loan .f-lab { padding: 10px 14px; } .pmr-tpl-form-loan .f-in { padding: 12px 14px; } .draft-save.is-wide { width: 100%; padding: 0 14px; } } .pmr-tpl-form-contact .ph-img-in img { object-position: 50% 8%; } .about-lead { max-width: 820px; margin: -20px auto 44px !important; text-align: center; font-size: clamp(15px, 1.5vw, 17px); line-height: 2; color: var(--text); } /* reCAPTCHA の注記（フォームの下） */ .recaptcha-note { margin: 22px 0 0 !important; padding-top: 16px; border-top: 1px solid var(--bd); text-align: center; font-size: 12px; line-height: 1.8; color: var(--muted); } .recaptcha-note a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }