/* ===================================================================== GARAGE A&Y 車買取 — main.css（v2） 白い紙 × イエロー × インク。値札・査定チケット・方眼紙・警告テープがモチーフ。 角はほぼ四角、線は2px、影は右下にずらしたベタ影。 書体：見出し・太字 ゴシックMB101 B／本文 中ゴシックBBB／英数字 Archivo（2026-10-29 案B に決定） ===================================================================== */ :root { --y: #FFD60A; --y2: #FFE45C; --y-deep: #E9B800; --y-soft: #FFF6C9; --paper: #FAF8F1; --cream: #FAF8F1; --ink: #161616; --ink2: #4A4A48; --ink3: #8A887F; --line: #E3DFD2; --bg: #FFFFFF; --red: #E8382F; --blue: #2F7FE0; --pink: #FF6F91; --green: #1FAF6B; --line-g: #06C755; --f-jp: "中ゴシックBBB", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif; --f-jpb: "ゴシックMB101 B", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif; --f-head: "ゴシックMB101 B", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif; --f-en: "Archivo", "ゴシックMB101 B", "Hiragino Sans", system-ui, sans-serif; --f-pop: var(--f-en); --f-num: var(--f-en); --r: 6px; --r-s: 4px; --pill: 6px; --bw: 2px; --sh: 4px 4px 0 var(--ink); --sh-l: 7px 7px 0 var(--ink); --hd: 76px; --notch: #fff; --ease: cubic-bezier(.22, 1, .36, 1); --bounce: cubic-bezier(.34, 1.56, .64, 1); --grid: linear-gradient(rgba(22, 22, 22, .055) 1px, transparent 1px) 0 0 / 28px 28px, linear-gradient(90deg, rgba(22, 22, 22, .055) 1px, transparent 1px) 0 0 / 28px 28px; --tape: repeating-linear-gradient(-45deg, var(--ink) 0 14px, var(--y) 14px 28px); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; font-synthesis: none; scroll-behavior: auto; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-jp); font-size: 16px; line-height: 1.95; letter-spacing: .04em; overflow-x: clip; -webkit-font-smoothing: antialiased; font-feature-settings: "palt" 1; } img, svg, video, iframe { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } mark { background: none; color: inherit; } :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; } ::selection { background: var(--y); color: var(--ink); } /* TypeSquare は読み込み中に文字やページを隠す（.typesquare_option {opacity:0}・body {visibility:hidden}。URL の fadein=-1 は効かない）。先に端末のゴシック体で表示して、届いたら切り替える */ .typesquare_option { opacity: 1 !important; } body { visibility: visible !important; } [hidden] { display: none !important; } :where(b, strong, th, dt, summary, legend, h3, h4) { font-family: var(--f-jpb); font-weight: normal; } :where(h1, h2) { font-family: var(--f-head); font-weight: normal; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: 12px; top: -60px; z-index: 1000; background: var(--ink); color: #fff; padding: 10px 16px; text-decoration: none; } .skip:focus { top: 12px; } .sp { display: none; } @media (max-width: 640px) { .sp { display: inline; } .pc { display: none; } } main { counter-reset: shn; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); } .sec { position: relative; padding-block: clamp(80px, 10vw, 150px); } .sec + .sec:not(.tgsec):not(.flow):not(.voice):not(.shops):not(.kaitori-page)::before { content: ""; position: absolute; left: clamp(20px, 4vw, 48px); right: clamp(20px, 4vw, 48px); top: 0; max-width: 1224px; margin-inline: auto; border-top: 1px dashed var(--line); } .sec-head { margin-bottom: clamp(32px, 4vw, 56px); } .sec-more { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 56px); } .note { margin-top: 20px; font-size: 13px; color: var(--ink2); line-height: 1.8; } .empty { padding: 32px; border: 2px dashed var(--ink3); text-align: center; color: var(--ink2); } .tape { height: 14px; background: var(--tape); border-block: var(--bw) solid var(--ink); } /* ---------- ボタン ---------- */ .btn { --bg: var(--ink); --fg: #fff; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; padding: 12px 30px; border: var(--bw) solid var(--ink); border-radius: var(--r-s); background: var(--bg); color: var(--fg); font-family: var(--f-jpb); font-size: 16px; line-height: 1.3; letter-spacing: .06em; text-decoration: none; box-shadow: var(--sh); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; } .btn .ic { width: 20px; height: 20px; flex: none; transition: transform .3s var(--bounce); } .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .btn:hover .ic:last-child { transform: translateX(4px); } .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); } .btn-y { --bg: var(--y); --fg: var(--ink); } .btn-k { --bg: var(--ink); --fg: #fff; } .btn-k .ic { color: var(--y); } .btn-w { --bg: #fff; --fg: var(--ink); } .btn-line { --bg: var(--line-g); --fg: #fff; } .btn-lg { min-height: 68px; padding: 16px 36px; font-size: 18px; } .btn-sm { min-height: 44px; padding: 8px 18px; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); } .btn-block { width: 100%; } .link-ext { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-jpb); font-size: 14px; color: var(--ink2); text-decoration: underline; text-underline-offset: 4px; } .link-ext .ic { width: 16px; height: 16px; } .seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: var(--bw) solid var(--ink); background: #fff; } .seg button, .seg-a { padding: 9px 18px; border: 0; border-right: var(--bw) solid var(--ink); background: none; font-family: var(--f-jpb); font-size: 14px; line-height: 1.4; text-decoration: none; transition: background-color .2s, color .2s; } .seg button:last-child { border-right: 0; } .seg button.is-on, .seg-a.is-on { background: var(--ink); color: var(--y); } .checks { display: grid; gap: 10px; margin-top: 24px; } .checks li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--f-jpb); } .checks .ic { flex: none; width: 24px; height: 24px; padding: 3px; background: var(--y); stroke-width: 3; margin-top: 2px; } /* 浮かぶ図形は使わない（販売サイトとの違い） */ .shapes { display: none; } /* ---------- 車のSVG ---------- */ .carsvg { width: 100%; height: auto; overflow: visible; } .carsvg-body { fill: var(--y); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; } .carsvg-win { fill: #fff; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; } .carsvg-wheel circle { fill: var(--ink); } .carsvg-wheel .carsvg-hub { fill: #fff; } /* ===================================================================== ローダー・ページ遷移・進み具合・カーソル ===================================================================== */ .ld { display: none; } .ay-ld .ld { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: var(--y); background-image: var(--grid); overflow: hidden; } .ld-in { position: relative; z-index: 1; text-align: center; width: min(92vw, 900px); } .ld-word { display: flex; justify-content: center; font-family: var(--f-en); font-weight: 900; font-size: clamp(40px, 9vw, 120px); line-height: 1; letter-spacing: -.01em; } .ld-ch { display: inline-block; transform: translateY(-120vh) rotate(-20deg); } .ld-sub { margin-top: 18px; font-family: var(--f-jpb); font-size: clamp(13px, 2.2vw, 18px); letter-spacing: .14em; opacity: 0; } .ld-road { position: relative; height: 6px; margin: 30px auto 0; width: min(80vw, 560px); background: repeating-linear-gradient(90deg, var(--ink) 0 26px, transparent 26px 44px); } .ld-car { position: absolute; bottom: 4px; left: -30%; width: clamp(70px, 9vw, 110px); } .pt { position: fixed; inset: 0; z-index: 890; pointer-events: none; } .pt i { position: absolute; inset: -10% -30%; transform: translateX(110%) skewX(-14deg); } .pt-y { background: var(--y); } .pt-k { background: var(--ink); } .pt-car { position: absolute; left: 50%; top: 50%; width: 120px; transform: translate(-50%, -50%) scale(0); } .ay-pt .pt-y { transform: translateX(0) skewX(-14deg); } .ay-pt .pt-car { transform: translate(-50%, -50%) scale(1); } .prog { position: fixed; left: 0; right: 0; top: 0; height: 5px; z-index: 600; pointer-events: none; } .prog-bar { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--tape); } .prog-car { position: absolute; top: 4px; left: 0; width: 34px; transform: translateX(-50%); } .cur { display: none; } @media (hover: hover) and (pointer: fine) { .cur { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 950; } .cur-dot, .cur-ring { position: fixed; left: 0; top: 0; } .cur-dot { width: 8px; height: 8px; background: var(--ink); border-radius: 50%; } .cur-ring { width: 36px; height: 36px; border: 2px solid var(--ink); display: grid; place-items: center; transition: width .3s var(--ease), height .3s var(--ease), background-color .3s, transform .3s; } .cur-ring em { font-style: normal; font-family: var(--f-en); font-weight: 800; font-size: 11px; letter-spacing: .08em; opacity: 0; transition: opacity .2s; } .cur.is-link .cur-ring { width: 54px; height: 54px; background: rgba(255, 214, 10, .4); } .cur.is-label .cur-ring { width: 84px; height: 84px; background: var(--y); } .cur.is-label .cur-ring em { opacity: 1; } } /* ===================================================================== ヘッダー・メニュー ===================================================================== */ .hd { position: fixed; left: 0; right: 0; top: 0; z-index: 500; transition: transform .45s var(--ease); } .hd.is-hide { transform: translateY(-110%); } .hd-in { display: flex; align-items: stretch; gap: 0; height: var(--hd); padding-left: clamp(16px, 2vw, 28px); border-bottom: var(--bw) solid var(--ink); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); } .hd-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; flex: none; padding-right: 18px; } .hd-logo-img { width: clamp(124px, 12vw, 160px); height: auto; } .logo-txt { font-family: var(--f-en); font-weight: 900; font-size: 22px; } .hd-logo-sub { display: grid; justify-items: start; gap: 2px; padding-left: 14px; border-left: var(--bw) solid var(--ink); font-family: var(--f-jpb); font-size: 11px; line-height: 1.35; letter-spacing: .04em; max-width: 9.5em; } .hd-logo-tag { display: inline-block; padding: 0 7px; background: var(--y); border: 1.5px solid var(--ink); font-size: 11px; line-height: 1.6; } .hd-nav { margin-left: auto; display: flex; align-items: center; } .hd-nav ul { display: flex; height: 100%; } .hd-nav li { display: flex; } .hd-nav a { position: relative; display: grid; place-items: center; padding: 0 clamp(8px, .9vw, 14px); text-decoration: none; font-family: var(--f-jpb); font-size: 14px; white-space: nowrap; overflow: hidden; } .hd-nav-jp, .hd-nav-en { grid-area: 1 / 1; transition: transform .35s var(--ease), opacity .25s; } .hd-nav-en { font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: .06em; opacity: 0; transform: translateY(14px); } .hd-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 5px; background: var(--y); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); } .hd-nav a:hover .hd-nav-jp { opacity: 0; transform: translateY(-14px); } .hd-nav a:hover .hd-nav-en { opacity: 1; transform: translateY(0); } .hd-nav a:hover::after, .hd-nav a[aria-current="page"]::after { transform: scaleX(1); } .hd-act { display: flex; align-items: stretch; flex: none; margin-left: 12px; } .hd-tel { display: grid; align-content: center; padding: 0 18px; border-left: var(--bw) solid var(--ink); text-decoration: none; line-height: 1.25; } .hd-tel small { font-family: var(--f-jpb); font-size: 10px; color: var(--ink2); } .hd-tel b { display: flex; align-items: center; gap: 6px; font-family: var(--f-en); font-weight: 800; font-size: 19px; letter-spacing: 0; } .hd-tel .ic { width: 18px; height: 18px; } .hd-cta.btn { min-height: 0; height: 100%; padding: 0 22px; border: 0; border-left: var(--bw) solid var(--ink); border-radius: 0; box-shadow: none; font-size: 15px; } .hd-cta.btn:hover { transform: none; box-shadow: none; background: var(--y2); } .hd-burger { display: grid; place-items: center; align-content: center; gap: 4px; width: var(--hd); border: 0; border-left: var(--bw) solid var(--ink); background: var(--ink); color: #fff; } .hd-burger-l { position: relative; display: block; width: 26px; height: 14px; } .hd-burger-l i { position: absolute; left: 0; width: 100%; height: 2.5px; background: var(--y); transition: transform .4s var(--ease), opacity .2s, top .3s; } .hd-burger-l i:nth-child(1) { top: 0; } .hd-burger-l i:nth-child(2) { top: 6px; width: 64%; } .hd-burger-l i:nth-child(3) { top: 12px; } .hd-burger em { font-style: normal; font-family: var(--f-en); font-weight: 700; font-size: 9px; letter-spacing: .14em; line-height: 1; } .is-menu .hd-burger-l i:nth-child(1) { top: 6px; transform: rotate(45deg); } .is-menu .hd-burger-l i:nth-child(2) { opacity: 0; } .is-menu .hd-burger-l i:nth-child(3) { top: 6px; transform: rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 480; background: var(--y); background-image: var(--grid); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .6s var(--ease), visibility 0s .6s; overflow: hidden; } .is-menu .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; } .menu-in { position: relative; z-index: 1; height: 100%; overflow-y: auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 64px); align-content: center; padding: calc(var(--hd) + 30px) clamp(24px, 6vw, 96px) 40px; } .menu-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } .menu-nav a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; text-decoration: none; border-bottom: var(--bw) solid var(--ink); opacity: 0; transform: translateY(24px); transition: opacity .5s var(--ease), transform .6s var(--ease); } .is-menu .menu-nav a { opacity: 1; transform: none; } .menu-en { font-family: var(--f-en); font-weight: 800; font-size: clamp(18px, 2vw, 26px); line-height: 1.2; } .menu-jp { font-family: var(--f-jpb); font-size: 14px; } .menu-nav a:hover .menu-en { color: #fff; -webkit-text-stroke: 1.5px var(--ink); } .menu-side { display: grid; gap: 16px; align-content: start; } .menu-free { display: grid; padding: 18px 22px; border: var(--bw) solid var(--ink); background: #fff; text-decoration: none; box-shadow: var(--sh); } .menu-free small { font-family: var(--f-jpb); font-size: 12px; } .menu-free b { font-family: var(--f-en); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.3; } .menu-free span { font-size: 12px; color: var(--ink2); } .menu-btns { display: grid; gap: 12px; } .shoptels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .shoptels a { display: grid; padding: 10px 14px; border: var(--bw) solid var(--ink); background: #fff; text-decoration: none; line-height: 1.35; } .shoptels small { font-family: var(--f-jpb); font-size: 11px; } .shoptels b { font-family: var(--f-en); font-size: 16px; font-weight: 700; } .formside .shoptels, .menu-side .shoptels { grid-template-columns: 1fr; } .formside .shoptels a { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } /* ---------- 右の縦タブ・スマホ下部 ---------- */ .stabs { position: fixed; right: 0; top: 50%; z-index: 400; display: grid; transform: translateY(-50%) translateX(110%); transition: transform .5s var(--ease); border: var(--bw) solid var(--ink); border-right: 0; box-shadow: -4px 4px 0 var(--ink); } .stabs.is-on { transform: translateY(-50%); } .stab { display: grid; justify-items: center; gap: 8px; width: 54px; padding: 16px 0; text-decoration: none; font-family: var(--f-jpb); font-size: 14px; writing-mode: vertical-rl; letter-spacing: .14em; transition: padding .3s var(--ease), background-color .2s; } .stab + .stab { border-top: var(--bw) solid var(--ink); } .stab .ic { width: 20px; height: 20px; writing-mode: horizontal-tb; } .stab:hover { padding-block: 22px; } .stab-y { background: var(--y); } .stab-k { background: var(--ink); color: #fff; } .stab-k .ic { color: var(--y); } .stab-g { background: var(--line-g); color: #fff; } .fixbar { display: none; } /* ===================================================================== 見出し・ページ上部・パンくず・流れる帯 ===================================================================== */ .sh { position: relative; z-index: 1; counter-increment: shn; } .sh-no { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 1.6vw, 22px); } .sh-n { display: inline-grid; place-items: center; min-width: 46px; height: 30px; padding: 0 8px; background: var(--ink); color: var(--y); font-family: var(--f-en); font-weight: 800; font-size: 14px; letter-spacing: .04em; } .sh-n::before { content: counter(shn, decimal-leading-zero); } .sh-rule { flex: 0 0 clamp(36px, 5vw, 72px); height: var(--bw); background: var(--ink); } .sh-en { font-family: var(--f-en); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; } .sh-en .ch, .ph-en .ch, .cta-en .ch, .thx-en .ch { display: inline-block; } .sh-jp { font-family: var(--f-head); font-size: clamp(30px, 4.1vw, 56px); line-height: 1.38; letter-spacing: .03em; text-wrap: balance; } .sh-jp mark, .kv-h mark, .ph-jp mark, .kintro-h em, .cl-ttl mark { background: linear-gradient(transparent 58%, var(--y) 58%, var(--y) 92%, transparent 92%); padding-inline: .06em; font-style: normal; } .sh-lead { margin-top: 18px; max-width: 44em; color: var(--ink2); font-size: clamp(15px, 1.15vw, 17px); } .sh-c { text-align: center; } .sh-c .sh-no { justify-content: center; } .sh-c .sh-lead { margin-inline: auto; } .ph { position: relative; padding: calc(var(--hd) + clamp(48px, 7vw, 100px)) 0 clamp(56px, 7vw, 96px); background: var(--paper); background-image: var(--grid); overflow: hidden; } .ph-big { position: absolute; right: -1vw; bottom: clamp(10px, 2vw, 24px); font-family: var(--f-en); font-weight: 900; font-size: clamp(72px, 15vw, 240px); line-height: .9; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 2px rgba(22, 22, 22, .12); white-space: nowrap; pointer-events: none; } .ph-in { position: relative; z-index: 1; } .ph-en { display: flex; align-items: center; gap: 12px; margin: 22px 0 10px; font-family: var(--f-en); font-weight: 700; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; } .ph-en i { width: 40px; height: 12px; background: var(--y); border: var(--bw) solid var(--ink); } .ph-jp { font-family: var(--f-head); font-size: clamp(32px, 5vw, 66px); line-height: 1.3; letter-spacing: .03em; } .ph-lead { margin-top: 18px; max-width: 46em; font-size: clamp(15px, 1.2vw, 17px); color: var(--ink2); } .ph .tape { position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 0; } .crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; font-family: var(--f-jpb); font-size: 12.5px; } .crumb li + li::before { content: "/"; margin: 0 10px; opacity: .45; } .crumb a { text-decoration: none; border-bottom: 1.5px solid currentColor; } .crumb [aria-current] { color: var(--ink2); } /* 流れるハッシュタグ */ .mq { position: relative; overflow: hidden; padding: 14px 0; background: var(--ink); color: #fff; } .mq-track { display: flex; width: max-content; will-change: transform; } .mq-set { display: flex; flex: none; align-items: center; } .mq-w { display: inline-flex; align-items: baseline; gap: 2px; margin-right: clamp(26px, 3vw, 44px); font-family: var(--f-head); font-size: clamp(20px, 2.3vw, 32px); line-height: 1.2; white-space: nowrap; } .mq-w b { font-family: var(--f-en); font-weight: 800; color: var(--y); } /* 斜めのテープ（大きな英字） */ .band { position: relative; z-index: 2; margin: 0 -5vw; padding: 10px 0; background: var(--y); border-block: var(--bw) solid var(--ink); transform: rotate(-2deg); overflow: hidden; } .band-in { display: flex; width: max-content; align-items: center; gap: 26px; will-change: transform; } .band-in span { font-family: var(--f-en); font-weight: 900; font-size: clamp(26px, 3.6vw, 52px); line-height: 1.1; white-space: nowrap; } .band-in i { width: clamp(20px, 2.2vw, 30px); flex: none; color: var(--ink); } .band-in .ic { width: 100%; height: auto; } /* ===================================================================== トップ：メインビジュアル（看板と同じ見出し・放射線・人物＋黒い円・吹き出し・回るスタンプ） 見出しは1文字ずつ跳ねて落ちてくる → 「売り時」だけ3秒ごとに跳ね続ける（CSS だけで動く。ローダー中は止めておく） ===================================================================== */ @keyframes spin { to { transform: rotate(360deg); } } .kv { --fs: clamp(56px, 8.3vw, 138px); --gt: clamp(20px, 4vw, 48px); --pw: max(330px, min(40vw, 640px, calc((100svh - var(--hd) - 110px) / 1.153))); --shift: max(0px, 6 * var(--fs) - 14px + var(--pw) - min(100vw, 1440px) + 2 * var(--gt)); position: relative; padding-top: var(--hd); background: var(--y); overflow: hidden; isolation: isolate; border-bottom: var(--bw) solid var(--ink); } .kv-rays { position: absolute; left: calc(50% + min(50%, 720px) - var(--gt) + var(--shift) - var(--pw) * .47); top: calc(var(--hd) + var(--pw) * .66); z-index: -3; width: 300vmax; height: 300vmax; margin: -150vmax 0 0 -150vmax; background: repeating-conic-gradient(rgba(255, 255, 255, .3) 0deg 6deg, transparent 6deg 16deg); animation: spin 160s linear infinite; pointer-events: none; } .kv-dots { position: absolute; inset: 0; z-index: -2; background: radial-gradient(rgba(22, 22, 22, .16) 1.7px, transparent 1.9px) 0 0 / 16px 16px; -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 34%, transparent 66%, #000 100%); mask-image: linear-gradient(100deg, #000 0%, transparent 34%, transparent 66%, #000 100%); pointer-events: none; } .kv-bgword { position: absolute; left: -.04em; top: calc(var(--hd) + 10px); z-index: -1; font-family: var(--f-en); font-weight: 900; font-size: clamp(110px, 21vw, 340px); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .45); white-space: nowrap; pointer-events: none; } .kv-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(16px, 3vw, 48px); align-items: end; max-width: 1440px; padding-block: clamp(10px, 1.4vw, 20px) 0; } .kv-copy { align-self: center; padding-block: clamp(8px, 1.2vw, 18px) clamp(30px, 3.6vw, 52px); } .kv-kick { display: inline-flex; flex-wrap: wrap; border: var(--bw) solid var(--ink); background: #fff; font-family: var(--f-jpb); font-size: clamp(12px, 1vw, 14px); line-height: 1.4; box-shadow: var(--sh); } .kv-kick span { padding: 6px 14px; } .kv-kick span + span { border-left: var(--bw) solid var(--ink); } .kv-kick span:first-child { background: var(--ink); color: var(--y); } .kv-h { margin-top: clamp(14px, 1.8vw, 24px); font-family: var(--f-head); line-height: 1.16; letter-spacing: 0; } .kv-l { display: block; white-space: nowrap; } .kv-l1 { font-size: clamp(40px, 5.2vw, 84px); } .kv-l2 { font-size: var(--fs); } .kv-l3 { font-size: clamp(46px, 6.4vw, 106px); } /* 文字は「白いフチ（16方向の影で作る）＋そのさらに外に黒い影」のステッカー風。黒い影が文字に直接くっつかないので形がつぶれない */ .kc { display: inline-block; margin-right: .02em; color: var(--ink); text-shadow: .045em 0 0 #fff, .0416em .0172em 0 #fff, .0318em .0318em 0 #fff, .0172em .0416em 0 #fff, 0 .045em 0 #fff, -.0172em .0416em 0 #fff, -.0318em .0318em 0 #fff, -.0416em .0172em 0 #fff, -.045em 0 0 #fff, -.0416em -.0172em 0 #fff, -.0318em -.0318em 0 #fff, -.0172em -.0416em 0 #fff, 0 -.045em 0 #fff, .0172em -.0416em 0 #fff, .0318em -.0318em 0 #fff, .0416em -.0172em 0 #fff, .085em .095em 0 var(--ink); opacity: 0; animation: kcIn .75s var(--bounce) both; animation-delay: calc(.2s + var(--i) * .06s); } .kc-hot { color: var(--red); animation: kcIn .75s var(--bounce) both, kcHop 3s ease-in-out infinite; animation-delay: calc(.2s + var(--i) * .06s), calc(1.9s + var(--j) * .1s); } .kv-hot { position: relative; display: inline-block; } .kv-burst { position: absolute; left: 50%; top: 50%; z-index: -1; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; background: radial-gradient(circle, #fff 0 38%, transparent 38.5%), repeating-conic-gradient(#fff 0deg 8deg, transparent 8deg 16deg); opacity: 0; animation: burstIn .6s var(--bounce) both, spin 14s linear infinite; animation-delay: 1.1s, 1.1s; pointer-events: none; } @keyframes kcIn { 0% { opacity: 0; transform: translateY(-.9em) rotate(-14deg) scale(.5); } 55% { opacity: 1; transform: translateY(.08em) rotate(5deg) scale(1.12); } 78% { opacity: 1; transform: translateY(-.04em) rotate(-2deg) scale(.97); } 100% { opacity: 1; transform: none; } } @keyframes kcHop { 0%, 62%, 100% { transform: none; } 70% { transform: translateY(-.24em) rotate(-8deg) scale(1.16); } 79% { transform: translateY(.05em) rotate(4deg) scale(.97); } 87% { transform: translateY(-.06em) rotate(-1deg); } } @keyframes burstIn { from { opacity: 0; scale: .2; } to { opacity: .8; scale: 1; } } .ay-ld .kc, .ay-ld .kv-burst, .ay-ld .kv-disc, .ay-ld .kv-person-in, .ay-ld .kv-sway, .ay-ld .kv-bub, .ay-ld .kv-star, .ay-ld .kv-fx-lines path { animation-play-state: paused; } .kv-lead { margin-top: clamp(14px, 1.6vw, 22px); font-family: var(--f-jpb); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; } .kv-lead b { padding: 0 .3em; background: #fff; border: 1.5px solid var(--ink); } /* 人物：帯の裏から飛び出す → ゆらゆら → 8秒ごとに小さく跳ねて、ピースの周りに線が走る。 入れ子の役割：.kv-person＝マウス追従とスクロール（GSAP）／.kv-person-in＝登場／.kv-sway＝常時の動き。同じ要素に重ねると transform が取り合いになる。 --shift は広い画面で見出し（6文字×--fs）にピースの指が重ならないよう、人物を右へ逃がす量。--pw の 110px は下の査定フォームを1画面目に残す分。幅を変えたら inc/setup.php の ay_kv_sizes() も揃える */ .kv-vis { position: relative; align-self: end; justify-self: end; width: var(--pw); aspect-ratio: 1460 / 1684; margin: 0 calc(-1 * var(--shift)) -34px 0; clip-path: inset(-300px -300px 0 -300px); } .kv-disc { position: absolute; left: 7%; top: 15%; width: 92%; aspect-ratio: 1; border-radius: 50%; background: var(--ink) radial-gradient(rgba(255, 214, 10, .5) 2.2px, transparent 2.4px) 0 0 / 14px 14px; box-shadow: 0 0 0 7px #fff, 0 0 0 9px var(--ink); animation: discIn .7s var(--bounce) .75s both; } .kv-ring { position: absolute; inset: -5%; border: 3px dashed var(--ink); border-radius: 50%; animation: spin 40s linear infinite; } .kv-person, .kv-person-in, .kv-sway { position: absolute; inset: 0; } .kv-person { z-index: 1; } .kv-person-in { animation: kvUp .95s cubic-bezier(.18, 1.3, .4, 1) .95s both; } .kv-sway { transform-origin: 50% 100%; animation: kvSway 8s ease-in-out 2s infinite; } .kv-sway img { display: block; width: 100%; height: 100%; } .kv-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .kv-fx-lines path { fill: none; stroke: var(--ink); stroke-width: 15; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; animation: kvLine 8s linear 2s infinite; } .kv-fx-lines path:nth-child(2n) { stroke: var(--red); } .kv-star { fill: #fff; stroke: var(--ink); stroke-width: 5; transform-box: fill-box; transform-origin: center; opacity: 0; animation: kvTw 2.8s ease-in-out 1.7s infinite; } g:nth-of-type(3) > .kv-star { animation-delay: 2.6s; } g:nth-of-type(4) > .kv-star { animation-delay: 3.3s; } @keyframes discIn { from { transform: scale(0); } to { transform: scale(1); } } @keyframes kvUp { from { transform: translateY(102%) scale(.92); } to { transform: none; } } @keyframes kvSway { 0%, 100% { transform: none; } 18% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } 70% { transform: none; } 76% { transform: translateY(-2.4%) scale(1.03); } 82% { transform: translateY(0) scale(.992); } 88% { transform: scale(1.006); } } @keyframes kvLine { 0%, 74% { stroke-dashoffset: 1; opacity: 0; } 75% { stroke-dashoffset: 1; opacity: 1; } 81% { stroke-dashoffset: 0; opacity: 1; } 90% { stroke-dashoffset: -1; opacity: 1; } 91%, 100% { stroke-dashoffset: -1; opacity: 0; } } @keyframes kvTw { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } } .kv-bub { --r: -5deg; --d: 1.5s; position: absolute; z-index: 3; padding: 10px 16px; border: var(--bw) solid var(--ink); background: #fff; font-family: var(--f-jpb); font-size: clamp(12px, 1.05vw, 15px); line-height: 1.35; text-align: center; white-space: nowrap; box-shadow: var(--sh); transform: rotate(var(--r)); animation: bubIn .5s var(--bounce) var(--d) both, bob 3.6s ease-in-out calc(var(--d) + .5s) infinite; } .kv-bub b { font-family: var(--f-head); font-size: 1.55em; line-height: 1.15; color: var(--red); } .kv-bub::after { content: ""; position: absolute; left: 28px; bottom: -11px; width: 18px; height: 18px; background: inherit; border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); transform: rotate(45deg); } .kv-bub1 { left: 9%; top: 7%; } .kv-bub1::after { left: auto; right: 26px; } .kv-bub2 { --r: 6deg; --d: 1.7s; right: -4%; top: 20%; background: var(--ink); color: #fff; } .kv-bub2 b { color: var(--y); } .kv-bub3 { --r: -3deg; --d: 1.9s; left: -6%; bottom: 15%; background: var(--red); color: #fff; } .kv-bub3 b { color: var(--y); font-family: var(--f-en); font-weight: 900; } .kv-bub3::after { left: auto; right: 30px; top: -11px; bottom: auto; transform: rotate(225deg); } @keyframes bubIn { from { opacity: 0; transform: scale(.3) rotate(calc(var(--r) - 16deg)); } to { opacity: 1; transform: rotate(var(--r)); } } @keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-10px) rotate(var(--r)); } } .kv-stamp { position: absolute; right: -4%; bottom: 16%; z-index: 4; display: grid; place-items: center; width: clamp(104px, 10vw, 146px); aspect-ratio: 1; border-radius: 50%; background: var(--ink); color: var(--y); box-shadow: 0 0 0 4px var(--y), 0 0 0 6px var(--ink); } .js .kv-stamp { transform: scale(0); } .kv-stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 14s linear infinite; } .kv-stamp text { fill: var(--y); font-family: var(--f-jpb); font-size: 15px; letter-spacing: 1px; } .kv-stamp span { font-family: var(--f-head); font-size: clamp(17px, 1.6vw, 23px); line-height: 1.15; text-align: center; } /* かんたん査定（横長）＋ LINE・電話 */ .kv-bar { position: relative; z-index: 2; background: #fff; border-top: var(--bw) solid var(--ink); } .kv-alt a { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border: var(--bw) solid var(--ink); text-decoration: none; box-shadow: var(--sh); font-family: var(--f-jpb); font-size: 16px; line-height: 1.3; transition: transform .2s var(--ease), box-shadow .2s; } .kv-alt a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .kv-alt small { display: block; font-family: var(--f-jpb); font-size: 11px; } .kv-alt .ic { width: 26px; height: 26px; flex: none; } .kv-alt-line { background: var(--line-g); color: #fff; } .kv-alt-tel { background: var(--y); } .kv-alt-tel span { font-family: var(--f-en); font-weight: 800; font-size: 21px; } .kv-checks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 2vw, 26px); } .kv-checks li { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh); font-family: var(--f-jpb); font-size: clamp(13px, 1.05vw, 15px); line-height: 1.35; } .kv-checks .ic { flex: none; width: 34px; height: 34px; padding: 6px; background: var(--ink); color: var(--y); } /* 1列のとき：見出し → 人物 → 3つの特長の順に並べ替える（人物を1画面目に入れる）。特長の帯が人物の下の切れ目を隠す */ @media (max-width: 820px) { .kv-in { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 18px; } .kv-copy { display: contents; } .kv-kick { justify-self: start; } .kv-lead { order: 3; } .kv { --pw: min(88vw, 430px); --shift: 0px; } .kv-vis { order: 4; align-self: auto; justify-self: center; margin-top: 8px; } .kv-checks { order: 5; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0 calc(-1 * clamp(20px, 4vw, 48px)); background: #fff; border-top: var(--bw) solid var(--ink); } .kv-checks li { flex-direction: column; gap: 5px; padding: 9px 3px 10px; border: 0; background: none; box-shadow: none; font-size: 12px; text-align: center; } .kv-checks li + li { border-left: 1.5px solid var(--ink); } .kv-checks .ic { width: 28px; height: 28px; padding: 5px; } .kv-rays { left: 50%; top: 590px; } } @media (max-width: 640px) { .kv-bgword { font-size: 120px; top: calc(var(--hd) + 60px); } .kv-kick span { padding: 5px 9px; } .kv-l1 { font-size: clamp(34px, 10vw, 44px); } .kv-l2 { font-size: clamp(48px, 13.6vw, 62px); } .kv-l3 { font-size: clamp(40px, 11.4vw, 52px); } .kv-bub { padding: 6px 9px; font-size: 11.5px; } .kv-bub::after { left: 18px; width: 13px; height: 13px; bottom: -8px; } .kv-bub1::after { left: auto; right: 16px; } .kv-bub3::after { left: auto; right: 18px; top: -8px; bottom: auto; } .kv-bub1 { left: 4%; top: 4%; } .kv-bub2 { right: -3%; top: 17%; } .kv-bub3 { left: -3%; bottom: 13%; } .kv-stamp { right: -3%; bottom: 13%; width: 84px; } .kv-stamp text { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .kc, .kc-hot, .kv-burst { opacity: 1; animation: none; } .kv-rays, .kv-bub, .kv-stamp svg, .kv-disc, .kv-ring, .kv-person-in, .kv-sway, .kv-fx-lines path, .kv-star { animation: none; } .kv-fx { display: none; } } /* 電光掲示板（買取実績） */ .tkr { display: flex; align-items: stretch; padding: 0; border-block: var(--bw) solid var(--ink); } .tkr-l { position: relative; z-index: 2; flex: none; display: grid; align-content: center; padding: 0 18px; background: var(--y); color: var(--ink); border-right: var(--bw) solid var(--ink); font-family: var(--f-en); font-weight: 800; font-size: 11px; line-height: 1.25; letter-spacing: .12em; } .tkr .mq-track { padding: 14px 0; } .tk { display: inline-flex; align-items: baseline; gap: 10px; padding: 0 26px; border-right: 1px solid rgba(255, 255, 255, .22); white-space: nowrap; font-size: 15px; } .tk b { font-family: var(--f-jpb); } .tk > small { color: #A9A79F; font-size: 12px; } .tk em { font-style: normal; font-family: var(--f-en); font-weight: 800; font-size: 19px; color: var(--y); } .tk em small { font-family: var(--f-jpb); font-size: 12px; margin-left: 2px; color: #fff; } .tk-up { width: 0; height: 0; border-inline: 6px solid transparent; border-bottom: 9px solid var(--y); align-self: center; } /* 評価のバッジ */ .rchip { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; padding: 8px 16px 8px 8px; border: var(--bw) solid var(--ink); background: #fff; text-decoration: none; box-shadow: var(--sh); transition: transform .2s var(--ease), box-shadow .2s; } .rchip:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .rchip-ic { display: grid; place-items: center; width: 40px; height: 40px; background: var(--y); } .rchip-ic .ic { width: 22px; height: 22px; color: var(--ink); } .rchip-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; line-height: 1.35; } .rchip-t small { font-family: var(--f-jpb); font-size: 11px; color: var(--ink2); } .rchip-t b { font-size: 13px; } .rchip-t em { font-style: normal; font-family: var(--f-en); font-weight: 800; font-size: 19px; } /* ---------- 査定チケット（かんたん査定） ---------- */ .qe { position: relative; display: grid; gap: 12px; padding: 0 clamp(18px, 2.2vw, 26px) 16px; border: var(--bw) solid var(--ink); background: var(--y); box-shadow: 9px 9px 0 var(--ink); } .qe::before, .qe::after { content: ""; position: absolute; top: 34px; width: 22px; height: 22px; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--notch); } .qe::before { left: -12px; clip-path: inset(0 0 0 50%); } .qe::after { right: -12px; clip-path: inset(0 50% 0 0); } .qe-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 calc(clamp(18px, 2.2vw, 26px) * -1); padding: 10px clamp(18px, 2.2vw, 26px) 12px; border-bottom: 2px dashed var(--ink); background: var(--ink); color: var(--y); font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .16em; } .qe-top b { font-weight: 800; color: #fff; letter-spacing: .06em; } .qe-h { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-family: var(--f-head); font-size: clamp(21px, 2vw, 26px); line-height: 1.3; } .qe-h span { display: grid; place-items: center; text-align: center; width: 64px; height: 64px; flex: none; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--red); color: #fff; font-family: var(--f-jpb); font-size: 10px; line-height: 1.1; transform: rotate(-10deg); } .qe-h span b { display: block; font-family: var(--f-en); font-weight: 900; font-size: 22px; } .qe-row { display: grid; gap: 4px; font-family: var(--f-jpb); font-size: 13px; } /* 年式・走行距離：選んだ文字（例「2008年（平成20年）」「100,001～105,000」）が切れない幅（約230px）より狭くなったら1列に */ .qe-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .qe input, .qe select, .f-in input[type="text"], .f-in input[type="tel"], .f-in input[type="email"], .f-in select, .f-in textarea, .sf input[type="text"], .sf input[type="tel"], .sf input[type="email"], .sf select { width: 100%; min-height: 52px; padding: 11px 14px; border: var(--bw) solid var(--ink); border-radius: var(--r-s); background: #fff; font-family: var(--f-jpb); font-size: 16px; appearance: none; transition: box-shadow .2s, background-color .2s; } .qe select, .f-in select, .sf select { padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; } .qe input:focus, .qe select:focus, .f-in input:focus, .f-in select:focus, .f-in textarea:focus, .sf input:focus, .sf select:focus { outline: 0; background-color: var(--y-soft); box-shadow: 4px 4px 0 var(--ink); } .qe .btn { margin-top: 4px; } .qe-note { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--f-jpb); font-size: 12px; } .qe-note .ic { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; stroke-width: 3; } .qe-bar { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 2px dashed var(--ink); font-family: var(--f-en); font-weight: 700; font-size: 9px; letter-spacing: .2em; } .qe-bar i { flex: none; width: 120px; height: 26px; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 13px); } /* ===================================================================== トップ：ABOUT・数字 ===================================================================== */ .about-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 80px); align-items: start; margin-top: clamp(28px, 3vw, 44px); } .about-fill { font-family: var(--f-head); font-size: clamp(19px, 1.9vw, 27px); line-height: 2; } .about-fill .w { color: rgba(22, 22, 22, .16); transition: color .25s; } .about-fill .w.is-fill { color: var(--ink); } .nums { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--bw) solid var(--ink); border-left: var(--bw) solid var(--ink); } .nums li { display: grid; gap: 2px; padding: 18px 20px 16px; border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); background: #fff; } .nums li:nth-child(2), .nums li:nth-child(3) { background: var(--y); } .nums-k { font-family: var(--f-jpb); font-size: 13px; } .nums b { font-family: var(--f-en); font-weight: 900; font-size: clamp(40px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.02em; } .nums b small { margin-left: 4px; font-family: var(--f-jpb); font-size: 15px; letter-spacing: 0; } .nums-s { font-size: 12px; color: var(--ink2); } /* ===================================================================== 買取実績（値札） ===================================================================== */ .jsec { background: var(--paper); background-image: var(--grid); } .jsec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(32px, 4vw, 52px); } .jsec-count { display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 22px; border: var(--bw) solid var(--ink); background: var(--ink); color: #fff; font-family: var(--f-jpb); font-size: 14px; box-shadow: 6px 6px 0 var(--y); } .jsec-count b { font-family: var(--f-en); font-weight: 900; font-size: clamp(40px, 4.6vw, 60px); line-height: 1; color: var(--y); } .jsec-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-bottom: clamp(28px, 4vw, 44px); } .jsec-note { flex: 1 1 360px; font-size: 13px; color: var(--ink2); line-height: 1.8; } .jks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); } .jk { position: relative; display: flex; flex-direction: column; padding: 34px 12px 12px; border: var(--bw) solid var(--ink); border-radius: 4px 4px 4px 4px; background: #fff; box-shadow: var(--sh); transform-origin: 50% 0; transition: transform .45s var(--bounce), box-shadow .3s; } .jk:hover { transform: rotate(-1.6deg) translateY(-2px); box-shadow: 6px 8px 0 var(--ink); } .jk:nth-child(even):hover { transform: rotate(1.6deg) translateY(-2px); } .jk-hole { position: absolute; left: 50%; top: 10px; width: 16px; height: 16px; margin-left: -8px; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--paper); } .jk-hole::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 26px; margin-left: -1px; background: var(--ink3); } .jk.is-more { display: none; } .jk-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: var(--bw) solid var(--ink); background: var(--paper); } .jk-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .jk:hover .jk-ph img { transform: scale(1.05); } .jk-noimg { display: grid; place-items: center; height: 100%; } .jk-noimg .carsvg { width: 50%; } .jk-year { position: absolute; left: 0; top: 0; padding: 3px 10px; background: var(--ink); color: var(--y); font-family: var(--f-jpb); font-size: 12px; line-height: 1.5; } .jk-b { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 2px 0; } .jk-name { font-family: var(--f-jpb); font-size: 15.5px; line-height: 1.45; } .jk-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; font-family: var(--f-jpb); font-size: 12px; color: var(--ink2); } .jk-note { padding: 0 6px; background: var(--y-soft); color: var(--ink); border: 1px solid var(--y-deep); } .jk-price { display: flex; align-items: baseline; gap: 2px; margin-top: auto; padding-top: 10px; border-top: 2px dashed var(--ink); } .jk-price-l { margin-right: auto; padding: 2px 6px; background: var(--red); color: #fff; font-family: var(--f-jpb); font-size: 11px; line-height: 1.4; align-self: center; } .jk-price b { font-family: var(--f-en); font-weight: 900; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -.02em; } .jk-price small { font-family: var(--f-jpb); font-size: 13px; } /* ===================================================================== 選ばれる5つの理由（番号つきの行） ===================================================================== */ .rs { margin-top: clamp(36px, 4vw, 60px); border-top: var(--bw) solid var(--ink); } .rs-row { display: grid; grid-template-columns: clamp(86px, 10vw, 150px) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(18px, 3vw, 48px); align-items: center; padding: clamp(28px, 3.4vw, 48px) 0; border-bottom: var(--bw) solid var(--ink); } .rs-n { align-self: start; font-family: var(--f-en); font-weight: 900; font-size: clamp(54px, 7vw, 108px); line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--ink); transition: color .3s; } .rs-row:hover .rs-n { color: var(--y); } .rs-en { display: inline-block; padding: 2px 10px; background: var(--y); border: 1.5px solid var(--ink); font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; } .rs-h { margin-top: 12px; font-family: var(--f-head); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.45; } .rs-p { margin-top: 12px; font-size: clamp(15px, 1.1vw, 16.5px); color: var(--ink2); } .rs-ph { overflow: hidden; aspect-ratio: 4 / 3; border: var(--bw) solid var(--ink); box-shadow: 10px 10px 0 var(--y), 10px 10px 0 var(--bw) var(--ink); } .rs-ph img { width: 100%; height: 100%; object-fit: cover; } .rs-green .rs-en { background: #D8F5E6; } .rs-pink .rs-en { background: #FFE1E8; } .rs-blue .rs-en { background: #DDEBFF; } /* ===================================================================== こんなお車も買い取ります（黄色の面＋スタンプ） ===================================================================== */ .tgsec { background: var(--y); padding-block: 0; } .tgsec > .wrap { padding-block: clamp(70px, 9vw, 130px); } .tgsec-head { position: relative; padding-right: clamp(0px, 16vw, 220px); } .tgsec-stamp, .kaitori-stamp { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: clamp(130px, 13vw, 180px); aspect-ratio: 1; border: 3px solid var(--red); border-radius: 50%; background: #fff; color: var(--red); text-align: center; font-family: var(--f-head); font-size: clamp(13px, 1.2vw, 16px); line-height: 1.35; transform: rotate(10deg); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5.5px var(--red); } .tgsec-stamp b, .kaitori-stamp b { font-family: var(--f-en); font-weight: 900; font-size: 2em; line-height: 1; } .tgs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 4vw, 56px); border-top: var(--bw) solid var(--ink); border-left: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh-l); } .tg { position: relative; display: grid; align-content: start; gap: 6px; padding: 22px 20px 22px; border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); } .tg-n { font-family: var(--f-en); font-weight: 800; font-size: 12px; color: var(--ink3); } .tg b { font-family: var(--f-head); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; } .tg small { font-size: 13px; color: var(--ink2); } .tg-ok { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 50px; height: 50px; border: 2px solid var(--red); border-radius: 50%; color: var(--red); font-family: var(--f-head); font-size: 11px; line-height: 1.1; text-align: center; transform: rotate(-14deg); opacity: .9; } /* ===================================================================== 下取りと買取の比較 ===================================================================== */ .cmp { max-width: 1100px; margin: clamp(32px, 4vw, 52px) auto 0; border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh-l); } .tipx .cmp { margin-top: 20px; box-shadow: var(--sh); } .cmp-row { display: grid; grid-template-columns: 10.5em minmax(0, 1fr) minmax(0, 1.15fr); } .cmp-row > * { padding: 16px 18px; border-top: 1px dashed var(--ink3); } .cmp-head > * { position: relative; border-top: 0; border-bottom: var(--bw) solid var(--ink); padding: 14px 18px; text-align: center; font-family: var(--f-head); font-size: 20px; line-height: 1.3; } .cmp-head small { display: block; font-family: var(--f-jpb); font-size: 11px; } .cmp-head .cmp-sita { background: #EFEEEA; color: var(--ink2); } .cmp-head .cmp-kai { display: block; background: var(--y); border-left: var(--bw) solid var(--ink); } .cmp-vs { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -23px; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--ink); color: var(--y); font-style: normal; font-family: var(--f-en); font-weight: 900; font-size: 13px; } .cmp-k { display: flex; align-items: center; background: var(--paper); font-family: var(--f-jpb); font-size: 15px; border-right: var(--bw) solid var(--ink); } .cmp-sita { font-size: 14px; color: var(--ink2); } .cmp-kai { display: flex; gap: 8px; background: var(--y-soft); font-family: var(--f-jpb); font-size: 15px; border-left: var(--bw) solid var(--ink); } .cmp-kai .ic { flex: none; width: 20px; height: 20px; margin-top: 4px; color: var(--red); stroke-width: 3.2; } .cmp-note { margin-top: 22px; text-align: center; font-family: var(--f-jpb); } .cmp-note a { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; text-underline-offset: 4px; } .cmp-note .ic { width: 16px; height: 16px; } /* ===================================================================== 流れ（チケットを並べたステップ） ===================================================================== */ .flow { background: var(--paper); background-image: var(--grid); } .steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 36px); margin-top: clamp(36px, 4vw, 60px); } .steps-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .step { position: relative; display: grid; align-content: start; border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh); } .step-n { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 16px; background: var(--y); border-bottom: 2px dashed var(--ink); font-family: var(--f-en); font-weight: 900; font-size: 30px; line-height: 1; } .step-n small { font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .2em; } .step-b { padding: 16px 18px 20px; } .step h3 { font-family: var(--f-head); font-size: 19px; line-height: 1.45; } .step p { margin-top: 8px; font-size: 14px; line-height: 1.85; color: var(--ink2); } .steps-road .step:not(:last-child)::after { content: ""; position: absolute; right: calc(clamp(20px, 2.6vw, 36px) / -2 - 9px); top: 18px; z-index: 2; width: 18px; height: 18px; border-top: 3px solid var(--ink); border-right: 3px solid var(--ink); transform: rotate(45deg); } .flow-cta { margin-top: clamp(36px, 5vw, 60px); text-align: center; } .flow-cta > p { font-family: var(--f-head); font-size: clamp(16px, 1.5vw, 20px); } .flow-cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 20px; } .ways { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(32px, 4vw, 48px); } .way { padding: clamp(22px, 3vw, 30px); border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh); } .way-y { background: var(--y); } .way-ic { display: grid; place-items: center; width: 52px; height: 52px; background: var(--ink); color: var(--y); } .way-ic .ic { width: 26px; height: 26px; } .way h3 { margin-top: 12px; font-family: var(--f-head); font-size: 21px; } .way p { margin-top: 6px; font-size: 15px; } /* ===================================================================== お客様の声 ===================================================================== */ .voice { overflow: hidden; } .voice-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); } .voice-sums { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: var(--bw) solid var(--ink); box-shadow: var(--sh-l); } .voice-sums-page { max-width: 900px; margin-inline: auto; } .rsum { position: relative; padding: 20px 22px 18px; background: #fff; } .rsum + .rsum { border-left: var(--bw) solid var(--ink); } .rsum-hakodate { background: var(--y); } .rsum-shop { font-family: var(--f-jpb); font-size: 14px; } .rsum-score { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; } .rsum-score b { font-family: var(--f-en); font-weight: 900; font-size: clamp(46px, 5vw, 70px); line-height: 1; letter-spacing: -.03em; } .rsum-score span { font-family: var(--f-en); font-weight: 700; color: var(--ink2); } .rsum-count { margin-top: 6px; font-family: var(--f-jpb); font-size: 13px; } .rsum-count b { font-family: var(--f-en); font-size: 17px; } .rsum-bars { display: grid; gap: 6px; margin-top: 12px; } .rsum-bars li { display: grid; grid-template-columns: 4.6em 1fr 2.4em; align-items: center; gap: 8px; font-family: var(--f-jpb); font-size: 12px; } .rsum-bar { height: 8px; border: 1.5px solid var(--ink); background: #fff; overflow: hidden; } .rsum-bar i { display: block; width: var(--v); height: 100%; background: var(--ink); } .rsum-bars b { font-family: var(--f-en); text-align: right; } .rsum-src { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; font-family: var(--f-jpb); font-size: 11px; color: var(--ink2); } .rsum-src .ic { width: 12px; height: 12px; } .stars { position: relative; display: inline-block; line-height: 0; } .stars .ic { display: inline-block; width: 17px; height: 17px; } .stars-bg { color: rgba(22, 22, 22, .18); display: flex; } .stars-fg { position: absolute; left: 0; top: 0; width: var(--v); overflow: hidden; display: flex; color: var(--ink); white-space: nowrap; } .stars-lg .ic { width: 24px; height: 24px; } .vrows { display: grid; gap: 22px; } .vrow { overflow: hidden; padding-block: 6px 12px; } .vrow-track { display: flex; gap: 22px; width: max-content; will-change: transform; } .vrow .rv { width: clamp(280px, 27vw, 350px); flex: none; } .rv { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh); } .rv::before { content: "“"; position: absolute; right: 16px; top: 2px; font-family: var(--f-en); font-weight: 900; font-size: 64px; line-height: 1; color: var(--y); } .rv-top { display: flex; align-items: center; gap: 8px; } .rv-top .stars .ic { width: 15px; height: 15px; } .rv-score { font-family: var(--f-en); font-weight: 800; font-size: 16px; } .rv-shop { margin-right: 40px; padding: 1px 8px; border: 1.5px solid var(--ink); font-family: var(--f-jpb); font-size: 11px; } .rv-shop-hakodate { background: var(--y); } .rv-title { font-family: var(--f-jpb); font-size: 16px; line-height: 1.5; } .rv-body { font-size: 14.5px; line-height: 1.85; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .rv-full .rv-body { -webkit-line-clamp: unset; display: block; } .rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--ink3); font-family: var(--f-jpb); font-size: 12px; color: var(--ink2); } .rv-car { display: inline-flex; align-items: center; gap: 4px; } .rv-car .ic { width: 15px; height: 15px; } .rv-date { margin-left: auto; font-family: var(--f-en); font-size: 11px; } .rv-reply summary { cursor: pointer; font-family: var(--f-jpb); font-size: 12px; } .rv-reply p { margin-top: 8px; padding: 12px; background: var(--paper); font-size: 13px; } .vsum { padding-bottom: 0; } .vlist-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 28px; } .vlist-count b { font-family: var(--f-en); font-weight: 900; font-size: 32px; } .vgrid { columns: 3 320px; column-gap: 22px; } .vgrid .rv { break-inside: avoid; margin-bottom: 22px; } .vgrid .rv.is-more, .vgrid .rv.is-hide { display: none; } /* ===================================================================== コラムのカード・一覧 ===================================================================== */ .colsec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(32px, 4vw, 52px); } .ccs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 30px); } .cc-a { display: flex; flex-direction: column; height: 100%; border: var(--bw) solid var(--ink); background: #fff; text-decoration: none; box-shadow: var(--sh); transition: transform .2s var(--ease), box-shadow .2s; } .cc-a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .cc-ph { aspect-ratio: 1200 / 630; overflow: hidden; border-bottom: var(--bw) solid var(--ink); background: var(--y); } .cc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .cc-a:hover .cc-ph img { transform: scale(1.04); } .cc-noimg { display: grid; place-items: center; height: 100%; } .cc-noimg .carsvg { width: 40%; } .cc-b { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 16px; } .cc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 12px; } .cc-cat { padding: 1px 8px; background: var(--ink); color: var(--y); font-family: var(--f-jpb); } .cc-meta time { font-family: var(--f-en); font-size: 11px; color: var(--ink2); } .cc-t { font-family: var(--f-head); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; } .cc-ex { font-size: 14px; color: var(--ink2); } .cc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--ink3); font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .14em; } .cc-go .ic { width: 16px; height: 16px; transition: transform .3s var(--bounce); } .cc-a:hover .cc-go .ic { transform: translateX(5px); } .cc-lg { grid-column: 1 / -1; } .cc-lg .cc-a { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .cc-lg .cc-ph { border-bottom: 0; border-right: var(--bw) solid var(--ink); aspect-ratio: auto; min-height: 100%; } .cc-lg .cc-b { padding: clamp(20px, 3vw, 36px); justify-content: center; } .cc-lg .cc-t { font-size: clamp(21px, 2.2vw, 30px); } .cl-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); } .cl-cats a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: var(--bw) solid var(--ink); background: #fff; font-family: var(--f-jpb); font-size: 14px; text-decoration: none; transition: background-color .2s; } .cl-cats a:hover { background: var(--y-soft); } .cl-cats a[aria-current] { background: var(--ink); color: var(--y); } .cl-cats small { font-family: var(--f-en); font-size: 11px; opacity: .7; } .pager { margin-top: clamp(36px, 4vw, 56px); } .pager .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .pager .page-numbers { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px; border: var(--bw) solid var(--ink); background: #fff; text-decoration: none; font-family: var(--f-en); font-weight: 700; font-size: 14px; } .pager .page-numbers.current { background: var(--ink); color: var(--y); } .pager .prev, .pager .next { font-family: var(--f-jpb); } /* ===================================================================== コラムの記事 ===================================================================== */ .cl-hd { padding: calc(var(--hd) + clamp(40px, 5vw, 72px)) 0 clamp(28px, 3vw, 44px); background: var(--paper); background-image: var(--grid); border-bottom: var(--bw) solid var(--ink); } .cl-hd-in { max-width: 1120px; } .cl-cat { margin-top: 22px; } .cl-cat a { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px; border: var(--bw) solid var(--ink); background: #fff; font-family: var(--f-jpb); font-size: 14px; text-decoration: none; } .cl-cat b { font-family: var(--f-en); font-weight: 800; font-size: 11px; letter-spacing: .12em; padding: 1px 6px; background: var(--y); } .cl-ttl { margin-top: 16px; font-family: var(--f-head); font-size: clamp(27px, 3.6vw, 46px); line-height: 1.45; text-wrap: balance; } .cl-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 18px; font-family: var(--f-jpb); font-size: 13px; color: var(--ink2); } .cl-meta span { display: inline-flex; align-items: center; gap: 6px; } .cl-meta .ic { width: 16px; height: 16px; } .cl-meta time { font-family: var(--f-en); font-size: 12px; } .cl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 64px); align-items: start; max-width: 1200px; padding-block: clamp(36px, 5vw, 64px) clamp(60px, 7vw, 100px); } .cl-eye { overflow: hidden; border: var(--bw) solid var(--ink); box-shadow: var(--sh-l); } .cl-eye img { width: 100%; } .cl-toc { margin-top: clamp(28px, 3vw, 40px); border: var(--bw) solid var(--ink); background: var(--paper); } .cl-toc-h { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: var(--bw) solid var(--ink); background: var(--y); font-family: var(--f-jpb); } .cl-toc-h b { font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: .16em; } .cl-toc ol { display: grid; padding: 10px 20px 14px; } .cl-toc a { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--ink3); text-decoration: none; font-family: var(--f-jpb); font-size: 15px; line-height: 1.55; } .cl-toc li:last-child a { border-bottom: 0; } .cl-toc a span { flex: none; font-family: var(--f-en); font-weight: 800; font-size: 12px; padding-top: 3px; } .cl-toc a:hover { color: var(--ink2); text-decoration: underline; text-underline-offset: 4px; } .cl-body { margin-top: clamp(28px, 3vw, 44px); font-size: 16.5px; line-height: 2.05; } .cl-body > * + * { margin-top: 1.25em; } .cl-body h2 { position: relative; margin-top: 2.6em; padding: 16px 20px 16px 74px; border: var(--bw) solid var(--ink); background: var(--ink); color: #fff; font-family: var(--f-head); font-size: clamp(21px, 2.1vw, 27px); line-height: 1.5; scroll-margin-top: calc(var(--hd) + 24px); } .cl-h2n { position: absolute; left: 0; top: 0; bottom: 0; display: grid; place-items: center; width: 56px; background: var(--y); color: var(--ink); font-family: var(--f-en); font-weight: 900; font-size: 18px; border-right: var(--bw) solid var(--ink); } .cl-body h3 { margin-top: 2em; padding: 4px 0 6px 16px; border-left: 8px solid var(--y); border-bottom: var(--bw) solid var(--ink); font-family: var(--f-head); font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; } .cl-body h2 + *, .cl-body h3 + * { margin-top: 1em; } .cl-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--y-deep); text-decoration-thickness: 3px; text-underline-offset: 4px; font-family: var(--f-jpb); } .cl-body strong { font-family: var(--f-jpb); background: linear-gradient(transparent 62%, var(--y) 62%); } .cl-body ul, .cl-body ol { display: grid; gap: 6px; padding: 18px 22px 18px 24px; border: var(--bw) solid var(--ink); background: var(--paper); } .cl-body ul li { position: relative; padding-left: 22px; } .cl-body ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 10px; height: 10px; background: var(--y); border: 2px solid var(--ink); } .cl-body ol { counter-reset: oli; } .cl-body ol li { position: relative; padding-left: 36px; counter-increment: oli; } .cl-body ol li::before { content: counter(oli); position: absolute; left: 0; top: .3em; display: grid; place-items: center; width: 24px; height: 24px; background: var(--ink); color: var(--y); font-family: var(--f-en); font-weight: 800; font-size: 12px; line-height: 1; } .cl-body .wp-block-table { overflow-x: auto; } .cl-body table { width: 100%; border-collapse: collapse; border: var(--bw) solid var(--ink); font-size: 15px; line-height: 1.7; } .cl-body th, .cl-body td { padding: 10px 14px; border: 1px solid var(--ink); text-align: left; vertical-align: top; } .cl-body thead th, .cl-body tr:first-child th { background: var(--y); } .cl-body tbody th { background: var(--paper); white-space: nowrap; } .cl-body figcaption, .cl-body .wp-element-caption { margin-top: 6px; font-size: 12.5px; color: var(--ink2); } .cl-body blockquote { margin: 0; padding: 16px 20px; border-left: 6px solid var(--ink); background: var(--paper); } .cl-body .ay-point, .cl-body .is-style-ay-point { position: relative; padding: 22px 24px 20px; border: var(--bw) solid var(--ink); background: var(--y-soft); box-shadow: var(--sh); } .cl-body .ay-point > * + * { margin-top: .8em; } .cl-body .ay-point::before { content: "POINT"; position: absolute; left: -2px; top: -14px; padding: 2px 10px; background: var(--ink); color: var(--y); font-family: var(--f-en); font-weight: 800; font-size: 11px; letter-spacing: .16em; line-height: 1.6; } .cl-body .ay-sum { padding: 22px 24px; border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh-l); } .cl-body .ay-note { font-size: 13px; color: var(--ink2); } .cl-by { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 20px; align-items: center; margin-top: clamp(40px, 5vw, 64px); padding: 20px; border: var(--bw) solid var(--ink); background: var(--paper); } .cl-by-ph { overflow: hidden; border: var(--bw) solid var(--ink); aspect-ratio: 1; background: #fff; } .cl-by-ph img { width: 100%; height: 100%; object-fit: cover; } .cl-by-k { font-size: 12px; color: var(--ink2); } .cl-by-n { font-family: var(--f-head); font-size: 18px; } .cl-by-p { margin-top: 6px; font-size: 13.5px; line-height: 1.8; } .cl-cta { position: relative; margin-top: 28px; padding: clamp(24px, 3.4vw, 40px); border: var(--bw) solid var(--ink); background: var(--y); box-shadow: var(--sh-l); overflow: hidden; text-align: center; } .cl-cta-en { position: absolute; right: -6px; bottom: -14px; font-family: var(--f-en); font-weight: 900; font-size: clamp(48px, 7vw, 92px); line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(22, 22, 22, .2); pointer-events: none; } .cl-cta-h { position: relative; font-family: var(--f-head); font-size: clamp(21px, 2.4vw, 30px); line-height: 1.45; } .cl-cta-p { position: relative; margin-top: 8px; font-size: 14.5px; } .cl-cta-btns { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 20px; } .cl-side { position: sticky; top: calc(var(--hd) + 24px); } .cl-side-in { display: grid; gap: 24px; } .cl-stoc { border: var(--bw) solid var(--ink); background: #fff; } .cl-stoc-h { padding: 8px 16px; border-bottom: var(--bw) solid var(--ink); background: var(--ink); color: var(--y); font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: .16em; } .cl-stoc ol { display: grid; max-height: 46vh; overflow-y: auto; padding: 6px 14px 10px; } .cl-stoc a { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); text-decoration: none; font-family: var(--f-jpb); font-size: 13px; line-height: 1.55; color: var(--ink2); transition: color .2s; } .cl-stoc li:last-child a { border-bottom: 0; } .cl-stoc a span { flex: none; font-family: var(--f-en); font-weight: 800; font-size: 11px; padding-top: 2px; } .cl-stoc a.is-on { color: var(--ink); } .cl-stoc a.is-on span { background: var(--y); } .qe-side { box-shadow: 6px 6px 0 var(--ink); } .qe-side .qe-h { font-size: 19px; } .qe-side .qe-h span { width: 54px; height: 54px; } .qe-side .qe-2 { grid-template-columns: 1fr; } .cl-rel { background: var(--paper); background-image: var(--grid); border-top: var(--bw) solid var(--ink); } /* ===================================================================== コツ・店舗・エリア・FAQ ===================================================================== */ .tip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); margin-top: clamp(32px, 4vw, 52px); } .tip { position: relative; padding: 24px 22px 22px; border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); } .tip::after { content: ""; position: absolute; right: 0; top: 0; width: 28px; height: 28px; background: linear-gradient(225deg, transparent 50%, var(--y) 50%); border-left: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); } .tip-n { display: inline-block; padding: 1px 10px; background: var(--ink); color: var(--y); font-family: var(--f-en); font-weight: 800; font-size: 11px; letter-spacing: .14em; } .tip h3 { margin-top: 12px; font-family: var(--f-head); font-size: 18px; line-height: 1.5; } .tip p { margin-top: 6px; font-size: 14px; color: var(--ink2); } .shops { background: var(--paper); background-image: var(--grid); } .shops-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); margin-top: clamp(36px, 4vw, 56px); } .shop { display: flex; flex-direction: column; overflow: hidden; border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh-l); } .shop-ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: var(--bw) solid var(--ink); background: #ddd; } .shop-ph img { width: 100%; height: 100%; object-fit: cover; } .shop-en { position: absolute; left: 0; bottom: 0; padding: 6px 16px; background: var(--y); border-top: var(--bw) solid var(--ink); border-right: var(--bw) solid var(--ink); font-family: var(--f-en); font-weight: 900; font-size: clamp(18px, 2vw, 26px); line-height: 1.2; } .shop-b { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.6vw, 30px); } .shop-area { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-jpb); font-size: 13px; color: var(--ink2); } .shop-area .ic { width: 16px; height: 16px; } .shop-name { font-family: var(--f-head); font-size: clamp(21px, 2.2vw, 28px); line-height: 1.4; } .shop-rv { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--f-jpb); font-size: 13px; } .shop-rv b { font-family: var(--f-en); font-weight: 800; font-size: 18px; } .shopdl { display: grid; margin-top: 14px; border-top: 1px solid var(--ink); } .shopdl > div { display: grid; grid-template-columns: 7.4em 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--ink3); font-size: 14px; } .shopdl dt { display: flex; align-items: center; gap: 6px; font-family: var(--f-jpb); } .shopdl dt .ic { width: 17px; height: 17px; flex: none; } .shopdl dd { font-family: var(--f-jpb); word-break: break-all; } .shopdl a { text-decoration: none; border-bottom: 1.5px solid currentColor; } .shopdl-fax { display: block; font-size: 12px; color: var(--ink2); } .shop-access { margin-top: 12px; padding: 10px 14px; background: var(--y-soft); border-left: 5px solid var(--y-deep); font-size: 13px; } .shop-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 18px; } .shop-wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .shop-wide .shop-ph { aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: var(--bw) solid var(--ink); } .area { margin-top: clamp(32px, 4vw, 56px); padding: clamp(22px, 3vw, 34px); border: var(--bw) solid var(--ink); background: #fff; } .area-h { display: flex; align-items: center; gap: 8px; font-family: var(--f-head); font-size: 20px; } .area-h .ic { width: 22px; height: 22px; } .area-p { margin-top: 6px; font-size: 14px; color: var(--ink2); } .area-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .area-list li { padding: 3px 12px; border: 1.5px solid var(--ink); background: var(--paper); font-family: var(--f-jpb); font-size: 13px; } .area-list li:nth-child(-n+4) { background: var(--y); } .area-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-family: var(--f-jpb); text-underline-offset: 4px; } .area-more .ic { width: 18px; height: 18px; } .faq-wrap { max-width: 1000px; } .faq { margin-top: clamp(32px, 4vw, 48px); border-top: var(--bw) solid var(--ink); } .faq-i { border-bottom: var(--bw) solid var(--ink); } .faq-i summary { display: flex; align-items: center; gap: 16px; padding: 18px 4px; cursor: pointer; list-style: none; font-family: var(--f-jpb); font-size: clamp(15px, 1.3vw, 18px); line-height: 1.55; } .faq-i summary::-webkit-details-marker { display: none; } .faq-q, .faq-al { display: grid; place-items: center; flex: none; width: 40px; height: 40px; font-family: var(--f-en); font-weight: 900; font-size: 17px; } .faq-q { background: var(--y); border: var(--bw) solid var(--ink); } .faq-al { background: var(--ink); color: var(--y); } .faq-t { flex: 1; } .faq-pm { position: relative; flex: none; width: 20px; height: 20px; } .faq-pm::before, .faq-pm::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2.5px; margin-top: -1.25px; background: var(--ink); transition: transform .4s var(--ease); } .faq-pm::after { transform: rotate(90deg); } .faq-i[open] .faq-pm::after { transform: rotate(0); } .faq-i summary:hover .faq-t { text-decoration: underline; text-decoration-color: var(--y-deep); text-decoration-thickness: 3px; text-underline-offset: 5px; } .faq-a { display: flex; gap: 16px; padding: 4px 4px 22px; } .faq-a p { font-size: 15px; padding-top: 6px; } .faq-a a { font-family: var(--f-jpb); } .faq-i::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; } .faq-i[open]::details-content { block-size: auto; } @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } } /* ===================================================================== お問い合わせの帯・フッター ===================================================================== */ .cta { position: relative; padding-block: clamp(80px, 10vw, 140px); background: var(--y); background-image: var(--grid); overflow: hidden; border-top: var(--bw) solid var(--ink); } .cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--tape); border-bottom: var(--bw) solid var(--ink); } .cta-in { position: relative; z-index: 1; text-align: center; } .cta-en { font-family: var(--f-en); font-weight: 900; font-size: clamp(40px, 8vw, 120px); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 2px var(--ink); white-space: nowrap; } .cta-h { margin-top: 18px; font-family: var(--f-head); font-size: clamp(26px, 3.4vw, 44px); line-height: 1.45; } .cta-lead { margin-top: 10px; font-family: var(--f-jpb); } .cta-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: clamp(32px, 4vw, 48px); border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh-l); text-align: left; } .cta-card { position: relative; display: grid; gap: 4px; padding: 24px 24px 22px; text-decoration: none; transition: background-color .2s; } .cta-card + .cta-card { border-left: var(--bw) solid var(--ink); } .cta-card:hover { background: var(--y-soft); } .cta-ic { display: grid; place-items: center; width: 52px; height: 52px; background: var(--ink); color: var(--y); margin-bottom: 6px; } .cta-ic .ic { width: 26px; height: 26px; } .cta-line .cta-ic { background: var(--line-g); color: #fff; } .cta-k { font-family: var(--f-jpb); font-size: 14px; } .cta-k small { font-size: 11px; } .cta-v { font-family: var(--f-head); font-size: 21px; line-height: 1.4; } .cta-num { font-family: var(--f-en); font-weight: 900; font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.01em; } .cta-s { font-size: 12px; color: var(--ink2); } .cta-sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 28px; } .cta-sub a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-jpb); text-decoration: none; border-bottom: var(--bw) solid var(--ink); padding-bottom: 2px; } .cta-sub .ic { width: 17px; height: 17px; } .ft { position: relative; background: #fff; border-top: var(--bw) solid var(--ink); padding-top: clamp(56px, 7vw, 90px); } .ft-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); } .ft-logo-img { width: 200px; height: auto; } .ft-catch { margin-top: 12px; font-family: var(--f-jpb); font-size: 14px; line-height: 1.7; } .ft-free { display: grid; margin-top: 18px; padding: 14px 18px; border: var(--bw) solid var(--ink); background: var(--y); text-decoration: none; box-shadow: var(--sh); max-width: 320px; } .ft-free small { font-family: var(--f-jpb); font-size: 11px; } .ft-free b { display: flex; align-items: center; gap: 6px; font-family: var(--f-en); font-weight: 900; font-size: 24px; line-height: 1.3; } .ft-free b .ic { width: 20px; height: 20px; } .ft-free span { font-size: 11px; color: var(--ink2); } .ft-sns { display: flex; gap: 0; margin-top: 18px; border: var(--bw) solid var(--ink); width: max-content; } .ft-sns li + li { border-left: var(--bw) solid var(--ink); } .ft-sns a { display: grid; place-items: center; width: 46px; height: 44px; background: #fff; transition: background-color .2s; } .ft-sns a:hover { background: var(--y); } .ft-sns .ic { width: 21px; height: 21px; } .ft-shops { display: grid; gap: 18px; font-size: 13px; line-height: 1.8; } .ft-shop-name { font-family: var(--f-head); font-size: 16px; } .ft-shop a { text-decoration: none; font-family: var(--f-jpb); } .ft-nav ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; } .ft-nav a { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-jpb); font-size: 14px; text-decoration: none; } .ft-nav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--y-deep); text-decoration-thickness: 3px; } .ft-nav .ic { width: 14px; height: 14px; } .ft-bottom { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: clamp(40px, 5vw, 64px); padding-block: 18px 24px; border-top: var(--bw) solid var(--ink); } .ft-kobutsu, .ft-copy { font-family: var(--f-jpb); font-size: 12px; } .ft-copy small { font-family: var(--f-en); font-size: 10.5px; } .totop { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border: var(--bw) solid var(--ink); background: #fff; font-family: var(--f-en); font-weight: 800; font-size: 11px; box-shadow: 3px 3px 0 var(--ink); } .totop .carsvg { width: 40px; transform: rotate(-90deg) translateX(-4px); transition: transform .4s var(--bounce); } .totop:hover .carsvg { transform: rotate(-90deg) translateX(4px); } /* ===================================================================== 下層ページの部品 ===================================================================== */ .kaitori-page { --notch: var(--y-soft); background: var(--y-soft); border-top: var(--bw) solid var(--ink); } .kaitori-stripe { display: none; } .kaitori-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .kreasons { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 24px; border-top: var(--bw) solid var(--ink); border-left: var(--bw) solid var(--ink); background: #fff; } .kreason { position: relative; padding: 18px 16px; border-right: var(--bw) solid var(--ink); border-bottom: var(--bw) solid var(--ink); } .kreason-n { display: none; } .kreason-ic { display: grid; place-items: center; width: 42px; height: 42px; background: var(--ink); color: var(--y); } .kreason-ic .ic { width: 22px; height: 22px; } .kreason h3 { margin-top: 10px; font-family: var(--f-head); font-size: 16px; line-height: 1.45; } .kreason p { margin-top: 4px; font-size: 13px; color: var(--ink2); } .kintro-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .kintro-kick { display: inline-block; padding: 3px 12px; background: var(--red); color: #fff; font-family: var(--f-jpb); font-size: 14px; } .kintro-h { margin-top: 14px; font-family: var(--f-head); font-size: clamp(30px, 4vw, 54px); line-height: 1.38; } .kintro-tx > p:not(.kintro-kick) { margin-top: 18px; color: var(--ink2); } .kintro-ph { overflow: hidden; border: var(--bw) solid var(--ink); box-shadow: 12px 12px 0 var(--y), 12px 12px 0 var(--bw) var(--ink); transform: rotate(2deg); } .kintro-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .tipnav { display: grid; margin-top: 22px; border-top: var(--bw) solid var(--ink); } .tipnav a { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px dashed var(--ink3); text-decoration: none; font-family: var(--f-jpb); font-size: 15px; line-height: 1.45; transition: background-color .2s; } .tipnav a:hover { background: var(--y-soft); } .tipnav b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; background: var(--ink); color: var(--y); font-family: var(--f-en); font-weight: 800; font-size: 13px; } .tipsec { padding-top: 0; } .tipsec::before { display: none; } .tipx-wrap { max-width: 1080px; display: grid; gap: clamp(20px, 3vw, 32px); } .tipx { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); padding: clamp(22px, 3vw, 40px); border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh-l); scroll-margin-top: calc(var(--hd) + 30px); } .tipx-1 { background: var(--y-soft); } .tipx-3 { background: var(--paper); } .tipx-n { display: grid; align-content: start; justify-items: center; } .tipx-n span { font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .2em; } .tipx-n b { font-family: var(--f-en); font-weight: 900; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--ink); } .tipx-h { font-family: var(--f-head); font-size: clamp(21px, 2.2vw, 28px); line-height: 1.5; } .tipx-b > p { margin-top: 10px; } .docsec { padding-top: 0; } .docsec::before { display: none; } .flow + .docsec { padding-top: clamp(80px, 10vw, 150px); } .docs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 52px); align-items: start; } .docs { border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh-l); } .docs-h { display: flex; align-items: baseline; gap: 12px; padding: 14px 22px; background: var(--ink); color: #fff; font-family: var(--f-head); font-size: 22px; } .docs-en { font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: .14em; color: var(--y); } .docs + .docs .docs-h { background: var(--y); color: var(--ink); border-bottom: var(--bw) solid var(--ink); } .docs + .docs .docs-en { color: var(--ink); } .docs-list { display: grid; padding: 4px 22px 12px; } .docs-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--ink3); } .docs-list li:last-child { border-bottom: 0; } .docs-n { display: grid; place-items: center; width: 30px; height: 30px; border: var(--bw) solid var(--ink); background: var(--y); font-family: var(--f-en); font-weight: 800; font-size: 13px; } .docs-list b { font-size: 16px; line-height: 1.5; } .docs-list p { margin-top: 2px; font-size: 13.5px; line-height: 1.75; color: var(--ink2); } .note-box { margin-top: 24px; padding: 20px 22px; border: var(--bw) solid var(--ink); background: var(--y-soft); } .note-box-h { display: flex; align-items: center; gap: 8px; font-family: var(--f-head); } .note-box-h .ic { width: 22px; height: 22px; } .note-box p + p { margin-top: 6px; font-size: 14px; } .taxsec { padding-top: 0; } .taxsec::before { display: none; } .tax { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px 32px; padding: clamp(22px, 3vw, 36px); border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh-l); } .tax-en { font-family: var(--f-en); font-weight: 900; font-size: clamp(28px, 3vw, 42px); line-height: 1; color: var(--red); transform: rotate(-6deg); padding: 6px 10px; border: 3px solid var(--red); } .tax-h { font-family: var(--f-head); font-size: clamp(20px, 2vw, 26px); } .tax-b p { margin-top: 6px; } .tax-b b { background: linear-gradient(transparent 60%, var(--y) 60%); } .agroups { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0; margin-top: clamp(32px, 4vw, 48px); border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh-l); } .agroup { padding: 22px; } .agroup + .agroup { border-left: var(--bw) solid var(--ink); } .agroup-h { display: flex; align-items: center; gap: 6px; font-family: var(--f-head); font-size: 20px; } .agroup-h .ic { width: 22px; height: 22px; } .agroup .area-list { margin-top: 12px; } .agroup-etc { background: var(--paper); } .agroup-etc p:not(.agroup-h) { margin-top: 8px; font-size: 14px; } .aspots { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(36px, 5vw, 60px); } .aspot { padding: clamp(22px, 3vw, 30px); border: var(--bw) solid var(--ink); background: #fff; box-shadow: var(--sh); } .aspot:first-child { grid-column: 1 / -1; background: var(--y); } .aspot-tag { display: inline-block; padding: 1px 10px; background: var(--ink); color: var(--y); font-family: var(--f-jpb); font-size: 12px; } .aspot-h { margin-top: 10px; font-family: var(--f-head); font-size: clamp(20px, 2vw, 26px); line-height: 1.5; } .aspot p:last-child { margin-top: 8px; font-size: 15px; } .company-in { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); } .ctable { margin-top: clamp(28px, 4vw, 44px); border-top: var(--bw) solid var(--ink); } .ctable > div { display: grid; grid-template-columns: 10em 1fr; gap: 16px; padding: 16px 4px; border-bottom: 1px dashed var(--ink3); } .ctable dt { font-family: var(--f-jpb); } .company-side { display: grid; gap: 22px; align-content: start; } .company-ph, .company-cert { overflow: hidden; border: var(--bw) solid var(--ink); box-shadow: var(--sh-l); background: #fff; } .company-cert figcaption { padding: 8px 14px; border-top: var(--bw) solid var(--ink); background: var(--y); font-family: var(--f-jpb); font-size: 13px; text-align: center; } .shop-jump { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(24px, 3vw, 36px) 0 clamp(28px, 4vw, 44px); } .shopblock + .shopblock { margin-top: clamp(48px, 6vw, 80px); } .shopblock-sub { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(16px, 2vw, 24px); margin-top: clamp(16px, 2vw, 24px); } .shopblock-map { overflow: hidden; border: var(--bw) solid var(--ink); min-height: 320px; } .shopblock-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; } .shopblock-ph { overflow: hidden; border: var(--bw) solid var(--ink); } .shopblock-ph img { width: 100%; height: 100%; object-fit: cover; } .office { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: clamp(56px, 7vw, 100px); padding: clamp(22px, 3vw, 40px); border: var(--bw) solid var(--ink); background: var(--y); box-shadow: var(--sh-l); } .office-ph { overflow: hidden; border: var(--bw) solid var(--ink); } .office-en { font-family: var(--f-en); font-weight: 900; font-size: clamp(30px, 3.6vw, 50px); line-height: 1; } .office-h { margin: 10px 0 12px; font-family: var(--f-head); font-size: clamp(21px, 2.3vw, 30px); line-height: 1.45; } .sec-text { padding-top: clamp(56px, 7vw, 96px); } .prose { max-width: 860px; } .prose h2 { margin: 40px 0 12px; padding-left: 14px; border-left: 8px solid var(--y); font-family: var(--f-head); font-size: 22px; line-height: 1.5; } .prose p + p { margin-top: 14px; } .prose-box { margin-top: 18px; padding: 18px 22px; border: var(--bw) solid var(--ink); background: var(--paper); font-family: var(--f-jpb); } .thx { position: relative; min-height: 86svh; display: grid; align-items: center; padding: calc(var(--hd) + 60px) 0 100px; background: var(--y); background-image: var(--grid); overflow: hidden; text-align: center; } .thx-in { position: relative; z-index: 1; } .thx-en { font-family: var(--f-en); font-weight: 900; font-size: clamp(44px, 8vw, 110px); line-height: 1; letter-spacing: -.03em; } .thx-h { margin-top: 18px; font-family: var(--f-head); font-size: clamp(22px, 2.8vw, 34px); } .thx-p { max-width: 640px; margin: 22px auto 0; padding: 24px 26px; border: var(--bw) solid var(--ink); background: #fff; text-align: left; font-size: 15px; box-shadow: var(--sh-l); } .thx-p p + p { margin-top: 10px; } .thx-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; } .thx-road { position: absolute; left: 0; right: 0; bottom: 60px; height: 6px; background: repeating-linear-gradient(90deg, var(--ink) 0 30px, transparent 30px 52px); } .thx-car { position: absolute; bottom: 4px; width: 100px; animation: drive 7s linear infinite; } @keyframes drive { from { left: -140px; } to { left: 100%; } } .nf { display: grid; grid-template-columns: minmax(0, 480px); justify-content: center; gap: 28px; } .nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .formside-satei { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: var(--bw) solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; box-shadow: 4px 4px 0 var(--y-deep); font-family: var(--f-jpb); font-size: 12px; line-height: 1.5; } .formside-satei span { flex: 1; } .formside-satei b { display: block; font-size: 18px; color: var(--y); } .formside-satei .ic { flex: none; width: 28px; height: 28px; color: var(--y); } /* ===================================================================== フォーム（お問い合わせ・ローン） ===================================================================== */ .sec-form { padding-top: clamp(48px, 6vw, 80px); } .formwrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .formside { position: sticky; top: calc(var(--hd) + 24px); display: grid; gap: 14px; } .formside-tel, .formside-line { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border: 2px solid var(--ink); border-radius: var(--r-s); background: #fff; text-decoration: none; box-shadow: var(--sh); font-size: 12px; font-weight: 700; line-height: 1.4; font-family: var(--f-jpb); } .formside-tel .ic, .formside-line .ic { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--y); } .formside-line .ic { background: var(--line-g); color: #fff; } .formside-tel b, .formside-line b { display: block; font-family: var(--f-num); font-weight: 900; font-size: 22px; } .formside-line b { font-family: var(--f-jp); font-size: 16px; } .formside-tel small { display: block; font-size: 11px; color: var(--ink2); } .formside-tel-lg { background: var(--y); } .formside-tel-lg .ic { background: #fff; } .formside-card { padding: 20px; border: 2px solid var(--ink); border-radius: var(--r-s); background: var(--cream); } .formside-en { font-family: var(--f-pop); font-weight: 900; font-size: 26px; color: var(--y); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; } .formside-h { margin-top: 4px; font-weight: 900; font-size: 18px; line-height: 1.5; font-family: var(--f-jpb); } .formside-list { display: grid; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 700; font-family: var(--f-jpb); } .formside-list li { display: flex; gap: 6px; } .formside-list .ic { flex: none; width: 18px; height: 18px; margin-top: 4px; stroke-width: 3; } .formside-ssl, .formside-save { display: flex; gap: 8px; font-size: 12px; color: var(--ink2); line-height: 1.7; } .formside-ssl .ic { flex: none; width: 18px; height: 18px; } .fprog { padding: 20px; border: 2px solid var(--ink); border-radius: var(--r-s); background: #fff; box-shadow: var(--sh); } .fprog-k { font-weight: 900; font-size: 13px; font-family: var(--f-jpb); } .fprog-v b { font-family: var(--f-num); font-weight: 900; font-size: 44px; line-height: 1.1; } .fprog-bar { display: block; height: 12px; border: 2px solid var(--ink); border-radius: var(--r-s); overflow: hidden; } .fprog-bar i { display: block; height: 100%; width: 0; background: var(--y); transition: width .4s var(--ease); } .fprog-list { display: grid; gap: 4px; margin-top: 12px; font-size: 13px; } .fprog-list a { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; color: var(--ink2); font-family: var(--f-jpb); } .fprog-list a::before { content: ""; width: 14px; height: 14px; flex: none; border: 2px solid var(--ink); border-radius: 50%; } .fprog-list a.is-done { color: var(--ink); } .fprog-list a.is-done::before { background: var(--ink); box-shadow: inset 0 0 0 2px var(--y); } .formbox { min-width: 0; } .draftmsg { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: var(--r-s); background: var(--y-soft); font-weight: 700; font-size: 14px; font-family: var(--f-jpb); } .draftmsg button { border: 0; background: none; padding: 0; text-decoration: underline; font-weight: 900; font-family: var(--f-jpb); } .f-sec { padding: clamp(20px, 3vw, 32px); border: 2px solid var(--ink); border-radius: var(--r); background: #fff; box-shadow: var(--sh); scroll-margin-top: calc(var(--hd) + 30px); } .f-sec + .f-sec { margin-top: 24px; } .f-sec-ttl { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-weight: 900; font-size: 20px; font-family: var(--f-jpb); } .f-sec-ttl::before { content: ""; width: 12px; height: 26px; border-radius: var(--r-s); background: var(--y); border: 2px solid var(--ink); } .f-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 24px; padding: 16px 0; border-bottom: 2px dashed var(--line); } .f-row:last-child { border-bottom: 0; } .f-lab { font-weight: 900; font-size: 15px; line-height: 1.6; padding-top: 12px; font-family: var(--f-jpb); } .f-lab small { display: block; font-size: 11px; font-weight: 700; color: var(--ink2); font-family: var(--f-jpb); } .req, .opt { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: var(--r-s); font-size: 11px; line-height: 1.8; vertical-align: 2px; } .req { background: var(--red); color: #fff; } .opt { background: var(--line); color: var(--ink2); } .f-in textarea { min-height: 180px; resize: vertical; } .f-note { margin-top: 6px; font-size: 12px; color: var(--ink2); } .f-sub { margin-top: 16px; font-weight: 900; font-family: var(--f-jpb); } .f-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .f-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .f-inline .u { font-weight: 900; font-family: var(--f-jpb); } .f-inline .w-s { width: 90px; } .f-inline .w-m { width: 150px; } .f-addr { display: grid; gap: 10px; } .f-zip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .f-zip .wpcf7-form-control-wrap { width: 160px; } .f-mt { margin-top: 10px; } .f-file input[type="file"] { width: 100%; padding: 14px; border: 2px dashed var(--ink); border-radius: var(--r-s); background: var(--cream); font-size: 14px; } .wpcf7-radio, .wpcf7-checkbox, .wpcf7-acceptance { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; } .wpcf7-list-item { margin: 0; } .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 2px solid var(--ink); border-radius: var(--pill); background: #fff; font-weight: 700; cursor: pointer; transition: background-color .2s, transform .2s var(--bounce); font-family: var(--f-jpb); } .wpcf7-list-item label:hover { transform: translateY(-2px); } .wpcf7-list-item input { width: 18px; height: 18px; accent-color: var(--ink); } .wpcf7-list-item label:has(input:checked) { background: var(--y); } .f-agree { margin-top: 20px; text-align: center; font-weight: 700; font-family: var(--f-jpb); } .f-agree .wpcf7-list-item label { padding: 12px 20px; } .f-submit { margin-top: 28px; text-align: center; } .f-submit input[type="submit"], .f-submit .wpcf7-submit { min-width: min(100%, 360px); min-height: 68px; padding: 14px 40px; border: 2px solid var(--ink); border-radius: var(--pill); background: var(--y); font-weight: 900; font-size: 18px; letter-spacing: .08em; box-shadow: var(--sh-l); cursor: pointer; transition: transform .2s var(--bounce), box-shadow .2s; font-family: var(--f-jpb); } .f-submit .wpcf7-submit:hover { transform: translateY(-3px); box-shadow: 0 11px 0 var(--ink); } .f-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .f-recaptcha, .f-fallback { margin-top: 14px; font-size: 12px; color: var(--ink2); } .grecaptcha-badge { visibility: hidden !important; } .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--red); font-weight: 900; font-size: 13px; font-family: var(--f-jpb); } .wpcf7-not-valid { border-color: var(--red) !important; background: #FFF1EE !important; } .wpcf7-response-output { margin: 20px 0 0 !important; padding: 14px 18px !important; border: 2px solid var(--ink) !important; border-radius: var(--r-s); font-weight: 700; font-size: 14px; font-family: var(--f-jpb); } .wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output { background: #FFF1EE; } .wpcf7 form.sent .wpcf7-response-output { background: var(--y-soft); } .wpcf7-spinner { display: none; } .wpcf7 form.submitting .wpcf7-submit { opacity: .5; pointer-events: none; } .screen-reader-response, .hidden-fields-container { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; padding: 0; margin: 0; } /* 確認画面（お問い合わせ・ローン） */ .cfm { position: fixed; inset: 0; z-index: 970; display: grid; place-items: center; padding: 20px; background: rgba(16, 16, 16, .7); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } .cfm.is-open { opacity: 1; visibility: visible; transition: opacity .3s; } .cfm-box { display: flex; flex-direction: column; width: min(760px, 100%); max-height: 88vh; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; box-shadow: var(--sh-l); overflow: hidden; transform: translateY(30px) scale(.96); transition: transform .5s var(--bounce); } .cfm.is-open .cfm-box { transform: none; } .cfm-h { padding: 18px 24px; background: var(--y); border-bottom: 2px solid var(--ink); font-weight: 900; font-size: 20px; font-family: var(--f-jpb); } .cfm-body { padding: 10px 24px 20px; overflow-y: auto; } .cfm-sec { margin-top: 16px; font-weight: 900; font-family: var(--f-jpb); } .cfm-body dl > div { display: grid; grid-template-columns: 11em 1fr; gap: 12px; padding: 8px 0; border-bottom: 1.5px dashed var(--line); font-size: 14px; } .cfm-body dt { font-weight: 900; font-family: var(--f-jpb); } .cfm-body dd { white-space: pre-wrap; word-break: break-all; } .cfm-f { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px; border-top: 2px solid var(--ink); } .cfm-back, .cfm-go { min-height: 52px; padding: 10px 26px; border: 2px solid var(--ink); border-radius: var(--pill); font-weight: 900; font-family: var(--f-jpb); } .cfm-back { background: #fff; } .cfm-go { background: var(--ink); color: var(--y); } /* ===================================================================== 無料WEB査定（3ステップ） ===================================================================== */ .sx { position: relative; padding: calc(var(--hd) + clamp(48px, 6vw, 90px)) 0 clamp(60px, 7vw, 100px); background: var(--y); overflow: hidden; } .sx-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; } .sx-kick { margin-top: 18px; font-weight: 900; color: var(--red); font-family: var(--f-jpb); } .sx-ttl { display: grid; margin-top: 6px; font-weight: 900; line-height: 1.15; font-family: var(--f-jpb); } .sx-ttl span:first-child { font-size: clamp(22px, 2.6vw, 34px); } .sx-ttl span:first-child b { font-family: var(--f-pop); font-weight: 900; font-size: 1.8em; color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; margin: 0 4px; } .sx-ttl span:last-child { font-family: var(--f-jpb); font-size: clamp(44px, 7vw, 100px); } .sx-points { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .sx-points li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border: 2px solid var(--ink); border-radius: var(--pill); background: #fff; font-weight: 900; font-size: 14px; font-family: var(--f-jpb); } .sx-points .ic { width: 18px; height: 18px; stroke-width: 3; } .sx-badge { display: grid; place-items: center; width: clamp(140px, 16vw, 220px); aspect-ratio: 1; border: 2px solid var(--ink); border-radius: 50%; background: var(--red); color: #fff; text-align: center; font-weight: 900; font-size: clamp(14px, 1.4vw, 20px); line-height: 1.4; transform: rotate(10deg); box-shadow: var(--sh-l); font-family: var(--f-jpb); } .sx-badge b { font-size: 1.5em; color: var(--y); } .sf-sec { padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 9vw, 130px); } .sf-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: clamp(24px, 4vw, 48px); align-items: start; } .sf-prog { position: sticky; top: calc(var(--hd) + 14px); z-index: 5; display: grid; gap: 10px; margin-bottom: 24px; padding: 14px 20px; border: 2px solid var(--ink); border-radius: var(--r-s); background: #fff; box-shadow: var(--sh); } .sf-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sf-steps li { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 13px; color: var(--ink3); font-family: var(--f-jpb); } .sf-steps b { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 2px solid currentColor; border-radius: 50%; font-family: var(--f-num); } .sf-steps li.is-on { color: var(--ink); } .sf-steps li.is-on b { background: var(--y); border-color: var(--ink); } .sf-steps li.is-done { color: var(--ink); } .sf-steps li.is-done b { background: var(--ink); color: var(--y); border-color: var(--ink); } .sf-meter { position: relative; height: 10px; border: 2px solid var(--ink); border-radius: var(--r-s); background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(22, 22, 22, .08) 12px 20px); } .sf-meter i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--y); transition: width .5s var(--ease); } .sf-meter-car { position: absolute; bottom: 2px; left: 0; width: 48px; transform: translateX(-50%); transition: left .5s var(--ease); } .sf-left { font-size: 12px; font-weight: 700; font-family: var(--f-jpb); } .sf-left b { font-family: var(--f-num); font-size: 20px; } .sf-box { padding: clamp(20px, 3vw, 36px); border: 2px solid var(--ink); border-radius: var(--r); background: #fff; box-shadow: var(--sh-l); } .sf-step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; } .sf-step.is-on { display: block; animation: stepIn .5s var(--ease); } .sf-step.is-on.is-back { animation-name: stepBack; } @keyframes stepIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } } @keyframes stepBack { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } } .sf-legend { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-weight: 900; font-size: clamp(18px, 2vw, 24px); font-family: var(--f-jpb); } .sf-legend .num { padding: 2px 12px; border-radius: var(--pill); background: var(--ink); color: var(--y); font-family: var(--f-num); font-size: 13px; letter-spacing: .1em; } .sf-row { padding: 14px 0; border-bottom: 2px dashed var(--line); } .sf-row.is-ok .sf-lab::after { content: "OK"; margin-left: 8px; padding: 0 8px; border-radius: var(--r-s); background: var(--green); color: #fff; font-family: var(--f-num); font-size: 11px; } .sf-lab { margin-bottom: 8px; font-weight: 900; font-family: var(--f-jpb); } .sf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .sf-makers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } .sf-makers button { min-height: 50px; border: 2px solid var(--ink); border-radius: var(--r-s); background: #fff; font-weight: 900; transition: background-color .2s, transform .2s var(--bounce); font-family: var(--f-jpb); } .sf-makers button:hover { transform: translateY(-2px); } .sf-makers button.is-on { background: var(--y); box-shadow: inset 0 0 0 2px var(--ink); } .sf-sel-note { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--ink2); font-family: var(--f-jpb); } .sf-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .sf-grade .wpcf7-form-control-wrap:first-child { flex: 1 1 200px; } .sf-grade.is-unknown input[type="text"] { opacity: .4; } .sf-chips .wpcf7-list-item label, .sf-pills .wpcf7-list-item label { padding: 8px 14px; font-size: 14px; } .sf-agree { margin-top: 20px; text-align: center; font-weight: 700; font-family: var(--f-jpb); } .sf-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 24px; } .sf-next, .sf-back, .sf-submit .wpcf7-submit { display: inline-grid; justify-items: center; min-height: 64px; padding: 10px 36px; border: 2px solid var(--ink); border-radius: var(--pill); font-weight: 900; font-size: 18px; line-height: 1.2; box-shadow: var(--sh); transition: transform .2s var(--bounce); font-family: var(--f-jpb); } .sf-next { margin-left: auto; background: var(--y); } .sf-next small { font-size: 11px; font-weight: 700; font-family: var(--f-jpb); } .sf-back { background: #fff; font-size: 15px; } .sf-submit { margin-left: auto; } .sf-submit .wpcf7-submit { background: var(--ink); color: var(--y); cursor: pointer; } .sf-next:hover, .sf-submit .wpcf7-submit:hover { transform: translateY(-3px); } .sf-next.is-shake { animation: shake .45s; } @keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } } .sf-ssl { display: flex; gap: 8px; margin-top: 16px; font-size: 12px; color: var(--ink2); } .sf-ssl .ic { flex: none; width: 18px; height: 18px; } .sf-side-in { position: sticky; top: calc(var(--hd) + 24px); display: grid; gap: 14px; } .sf-trust { padding: 20px; border: 2px solid var(--ink); border-radius: var(--r); background: var(--y); box-shadow: var(--sh); } .sf-trust-ttl { font-weight: 900; font-size: 17px; font-family: var(--f-jpb); } .sf-trust ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .sf-trust li { display: grid; justify-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; background: #fff; text-align: center; } .sf-trust li .ic { width: 28px; height: 28px; } .sf-trust-n { font-family: var(--f-num); font-weight: 900; font-size: 28px; line-height: 1; } .sf-trust small { font-size: 11px; font-weight: 900; line-height: 1.4; font-family: var(--f-jpb); } .sf-line { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border: 2px solid var(--ink); border-radius: var(--r-s); background: var(--line-g); color: #fff; text-decoration: none; font-weight: 900; box-shadow: var(--sh); font-family: var(--f-jpb); } .sf-line .ic { width: 36px; height: 36px; } .sf-line small { display: block; font-size: 11px; } .sf-tel { display: grid; padding: 16px 18px; border: 2px solid var(--ink); border-radius: var(--r-s); background: #fff; text-decoration: none; box-shadow: var(--sh); } .sf-tel small { font-size: 11px; font-weight: 700; font-family: var(--f-jpb); } .sf-tel b { display: flex; align-items: center; gap: 6px; font-family: var(--f-num); font-weight: 900; font-size: 26px; } .sf-tel b .ic { width: 24px; height: 24px; } .sf-tel span { font-size: 11px; color: var(--ink2); } .cf { position: fixed; inset: 0; z-index: 970; display: grid; place-items: center; padding: 20px; background: rgba(16, 16, 16, .7); opacity: 0; transition: opacity .3s; } .cf.is-open { opacity: 1; } .cf-box { width: min(680px, 100%); max-height: 88vh; overflow-y: auto; padding: clamp(22px, 3vw, 36px); border: 2px solid var(--ink); border-radius: var(--r); background: #fff; box-shadow: var(--sh-l); transform: translateY(30px) scale(.96); transition: transform .5s var(--bounce); } .cf.is-open .cf-box { transform: none; } .cf-en { font-family: var(--f-pop); font-weight: 900; font-size: 34px; color: var(--y); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; line-height: 1; } .cf-ttl { margin-top: 6px; font-weight: 900; font-size: 22px; font-family: var(--f-jpb); } .cf-lead { margin-top: 6px; font-size: 13px; color: var(--ink2); } .cf-list { display: grid; grid-template-columns: 9em 1fr; margin-top: 16px; border-top: 2px solid var(--ink); } .cf-list dt, .cf-list dd { padding: 10px 6px; border-bottom: 1.5px dashed var(--line); font-size: 14px; } .cf-list dt { font-weight: 900; font-family: var(--f-jpb); } .cf-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 22px; } .cf-back, .cf-send { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 10px 26px; border: 2px solid var(--ink); border-radius: var(--pill); font-weight: 900; box-shadow: var(--sh); font-family: var(--f-jpb); } .cf-back { background: #fff; } .cf-send { background: var(--y); } .cf-send .ic { width: 20px; height: 20px; } /* ---------- フォーム：v2 の見た目に合わせた上書き ---------- */ .sx { background: var(--paper); background-image: var(--grid); border-bottom: var(--bw) solid var(--ink); } .sx-kick { display: inline-block; padding: 3px 12px; background: var(--red); color: #fff; } .sx-ttl span:first-child { font-family: var(--f-head); } .sx-ttl span:first-child b { font-family: var(--f-en); color: var(--ink); -webkit-text-stroke: 0; background: var(--y); padding: 0 8px; margin: 0 6px; font-size: 1.5em; } .sx-ttl span:last-child { font-family: var(--f-head); font-size: clamp(42px, 6.6vw, 96px); } .sx-points li { border-radius: 0; } .sx-badge { border: 3px solid var(--red); background: #fff; color: var(--red); font-family: var(--f-head); box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6.5px var(--red); } .sx-badge b { color: var(--red); } /* 見出しの右の人物：黄色の円の前に立ち、腰のあたりから下は見出しの枠の下に隠す（--sw は人物の幅）。 入れ子の役割：.sx-person＝マウス追従（GSAP）／.sx-person-in＝登場／img＝ゆらゆら */ .sx { --sw: clamp(280px, 27vw, 380px); padding-bottom: 0; } .sx-in { grid-template-columns: minmax(0, 1fr) var(--sw); align-items: end; gap: clamp(24px, 6vw, 96px); } .sx-copy { align-self: center; padding-bottom: clamp(60px, 7vw, 100px); } .sx-vis { position: relative; width: var(--sw); aspect-ratio: 917 / 1404; margin-top: calc(-1 * clamp(40px, 5vw, 76px)); margin-bottom: calc(var(--sw) * -.23); } .sx-disc { position: absolute; left: -12%; top: 13%; width: 124%; aspect-ratio: 1; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--y) radial-gradient(rgba(22, 22, 22, .13) 2px, transparent 2.2px) 0 0 / 13px 13px; animation: discIn .6s var(--bounce) .1s both; } .sx-disc i { position: absolute; inset: -4.5%; border: 2.5px dashed var(--ink); border-radius: 50%; animation: spin 40s linear infinite; } .sx-person, .sx-person-in { position: absolute; inset: 0; } .sx-person-in { animation: sxUp .8s cubic-bezier(.18, 1.3, .4, 1) .25s both; } .sx-person img { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; animation: sxSway 6s ease-in-out 1.1s infinite; } .sx-badge { position: absolute; right: calc(var(--sw) * 1.02); top: -14px; z-index: 2; width: clamp(116px, 10.5vw, 158px); font-size: clamp(12px, 1.05vw, 15.5px); } @keyframes sxUp { from { transform: translateY(72%); } to { transform: none; } } @keyframes sxSway { 0%, 100% { transform: none; } 25% { transform: rotate(-.9deg); } 75% { transform: rotate(.9deg); } } .ay-ld .sx-disc, .ay-ld .sx-person-in, .ay-ld .sx-person img { animation-play-state: paused; } @media (max-width: 1240px) { .sx-disc { left: -6%; width: 112%; } } @media (prefers-reduced-motion: reduce) { .sx-disc, .sx-disc i, .sx-person-in, .sx-person img { animation: none; } } .sf textarea { width: 100%; min-height: 130px; padding: 12px 14px; border: var(--bw) solid var(--ink); border-radius: var(--r-s); background: #fff; font-family: var(--f-jpb); font-size: 16px; resize: vertical; } .sf textarea:focus { outline: 0; background-color: var(--y-soft); box-shadow: 4px 4px 0 var(--ink); } .sf-steps b { border-radius: 0; } .formside-en, .cf-en { color: var(--ink); -webkit-text-stroke: 0; font-size: 22px; } .formside-tel .ic, .formside-line .ic { border-radius: 0; } .f-sec-ttl { font-family: var(--f-head); font-weight: normal; } .f-sec-ttl::before { border-radius: 0; } .f-submit .wpcf7-submit, .sf-next, .sf-back, .sf-submit .wpcf7-submit, .cf-back, .cf-send { box-shadow: var(--sh); } .wpcf7-list-item label { border-radius: var(--r-s); } /* ===================================================================== スクロール演出の初期状態（JS が動くときだけ） ===================================================================== */ .js [data-reveal] { opacity: 0; transform: translateY(32px); } .js [data-pop] { opacity: 0; transform: scale(.92); } .js [data-hero] { opacity: 0; transform: translateY(30px); } .js [data-hero-line] { transform: translateY(110%); } .js [data-hero-visual] { opacity: 0; transform: scale(.94); } /* ===================================================================== レスポンシブ ===================================================================== */ @media (max-width: 1500px) { .hd-logo-sub { display: none; } } @media (max-width: 1320px) { .hd-tel { display: none; } .hd-nav a { font-size: 13.5px; } } /* 地域別の車買取ページ（/area/hakodate/ など） */ .ac-top { padding-top: clamp(48px, 6vw, 88px); } .ac-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 60px); align-items: start; } .ac-main.cl-body { margin-top: 0; } .ac-main > h2:first-child { margin-top: 0; } .ac-side { position: sticky; top: calc(var(--hd) + 24px); } .ac-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.4vw, 32px); } .ac-links a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: var(--bw) solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink); font-family: var(--f-jpb); font-size: 14px; line-height: 1.4; transition: background-color .2s; } .ac-links a:hover { background: var(--y); } .ac-links .ic { width: 16px; height: 16px; flex: none; } .ac-col-h { margin-top: clamp(48px, 6vw, 72px); } .ac-cols { margin-top: clamp(24px, 3vw, 36px); } .ac-main.cl-body h2 { padding-left: 20px; } .ac-main.cl-body h2::before { content: none; } .area-list li:has(a) { padding: 0; } .area-list li a { display: block; padding: 3px 12px; } .area-list li a:hover { background: var(--ink); color: var(--y); } .ft-area { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 16px; font-size: 13px; } .ft-area-h { font-family: var(--f-jpb); } .ft-area ul { display: flex; flex-wrap: wrap; gap: 4px 16px; } .ft-area a { text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 1100px) { .ac-wrap { grid-template-columns: minmax(0, 1fr); } .ac-side { position: static; } .hd-nav { display: none; } .hd-act { margin-left: auto; } .hd-tel { display: grid; } .about-body, .voice-head, .kaitori-grid, .company-in, .kintro-in, .office { grid-template-columns: 1fr; } .jks { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps-4 { grid-template-columns: 1fr 1fr; } .steps-4 .step:nth-child(2)::after { display: none; } .ccs { grid-template-columns: 1fr 1fr; } .ft-in { grid-template-columns: 1fr 1fr; } .ft-nav { grid-column: 1 / -1; } .cl-wrap { grid-template-columns: 1fr; } .cl-side { position: static; } .cl-stoc { display: none; } .qe-side { max-width: 480px; } .agroups { grid-template-columns: 1fr 1fr; } .agroup:first-child { grid-column: 1 / -1; } .agroup:nth-child(2) { border-left: 0; } .agroup + .agroup { border-top: var(--bw) solid var(--ink); } } @media (max-width: 900px) { :root { --hd: 64px; } .hd-in { padding-left: 14px; } .hd-logo-img { width: 120px; } .hd-tel { display: none; } .menu-in { grid-template-columns: 1fr; align-content: start; } .rs-row { grid-template-columns: 64px minmax(0, 1fr); } .rs-ph { grid-column: 1 / -1; order: -1; } .rs-n { font-size: 54px; } .tip-grid, .docs-grid, .ways, .aspots, .shops-grid, .shopblock-sub { grid-template-columns: 1fr; } .shop-wide { grid-template-columns: 1fr; } .shop-wide .shop-ph { aspect-ratio: 16 / 9; border-right: 0; border-bottom: var(--bw) solid var(--ink); } .cta-grid { grid-template-columns: 1fr; } .cta-card + .cta-card { border-left: 0; border-top: var(--bw) solid var(--ink); } .steps { grid-template-columns: 1fr; } .steps-4 { grid-template-columns: 1fr; } .steps-road .step:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: calc(clamp(20px, 2.6vw, 36px) / -2 - 10px); margin-left: -9px; transform: rotate(135deg); display: block; } .tax { grid-template-columns: 1fr; justify-items: start; } .formwrap, .sf-wrap { grid-template-columns: 1fr; } .formside, .sf-side-in { position: static; } .formwrap .formbox { order: -1; } /* 査定の見出し：上は1列、下は「特長3つ＋人物」の横並び。人物を縦に積むとフォームが下がるので積まない */ .sx { --sw: clamp(136px, 41vw, 220px); } .sx-in { grid-template-columns: minmax(0, 1fr) var(--sw); gap: 0 6px; } .sx-copy { display: contents; } .sx-copy > * { grid-column: 1 / -1; justify-self: start; } .sx-copy > .sx-points { grid-column: 1; align-self: start; display: grid; gap: 8px; padding-bottom: 30px; } .sx-points li { padding: 6px 10px; font-size: 12.5px; line-height: 1.35; } .sx-vis { grid-column: 2; margin-top: 2px; margin-bottom: calc(var(--sw) * -.2); } .sx-disc { left: -9%; top: 14%; width: 118%; } .sx-badge { position: absolute; right: 0; top: -20px; width: 116px; font-size: 13px; } .sx-kick { margin-right: 124px; } .tgsec-head { padding-right: 0; } .tgsec-stamp, .kaitori-stamp { position: relative; right: auto; top: auto; margin: 0 0 18px auto; width: 120px; } .cc-lg .cc-a { grid-template-columns: 1fr; } .cc-lg .cc-ph { border-right: 0; border-bottom: var(--bw) solid var(--ink); aspect-ratio: 1200 / 630; } .stabs { display: none; } .fixbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 450; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-top: var(--bw) solid var(--ink); background: #fff; padding-bottom: env(safe-area-inset-bottom); transform: translateY(110%); transition: transform .45s var(--ease); } .fixbar.is-on { transform: none; } .is-menu .fixbar { transform: translateY(110%); } .fixbar a { display: grid; justify-items: center; gap: 2px; padding: 8px 0 7px; text-decoration: none; font-family: var(--f-jpb); font-size: 11px; line-height: 1.2; } .fixbar a + a { border-left: var(--bw) solid var(--ink); } .fixbar .ic { width: 21px; height: 21px; } .fixbar small { display: block; font-size: 9px; } .fb-tel { background: var(--ink); color: #fff; } .fb-tel .ic { color: var(--y); } .fb-stock { background: #fff; } .fb-est { background: var(--y); } .fb-line { background: var(--line-g); color: #fff; } .ft { padding-bottom: 70px; } } @media (max-width: 380px) { .sx-points li { padding: 6px 8px; font-size: 12px; } } @media (max-width: 640px) { body { font-size: 16px; line-height: 1.9; } .sec { padding-block: 72px; } .tgsec > .wrap { padding-block: 64px; } .hd-cta { display: none; } .btn-lg { min-height: 60px; padding: 12px 22px; font-size: 16px; } .kv { padding-top: calc(var(--hd) + 22px); } .qe-2 { grid-template-columns: 1fr; } .tk { padding: 0 18px; font-size: 14px; } .tkr-l { padding: 0 10px; font-size: 9px; } .nums b { font-size: 40px; } .jks { grid-template-columns: 1fr 1fr; gap: 14px; } .jk { padding: 30px 8px 10px; } .jk-name { font-size: 13.5px; } .jk-price { flex-wrap: wrap; } .jk-price-l { margin-bottom: 4px; } .jk-price b { font-size: 24px; } .tgs { grid-template-columns: 1fr 1fr; } .tg { padding: 16px 12px 16px; } .tg-ok { width: 40px; height: 40px; font-size: 9px; right: 8px; top: 8px; } .tg b { font-size: 16px; padding-right: 34px; } .cmp-row { grid-template-columns: 1fr 1fr; } .cmp-k { grid-column: 1 / -1; padding: 9px 14px; border-right: 0; border-bottom: 1px dashed var(--ink3); } .cmp-head > span:first-child { display: none; } .cmp-row > p { padding: 12px; font-size: 13.5px; border-top: 0; } .cmp-kai .ic { width: 16px; height: 16px; } .voice-sums { grid-template-columns: 1fr; } .rsum + .rsum { border-left: 0; border-top: var(--bw) solid var(--ink); } .ccs { grid-template-columns: 1fr; } .kreasons { grid-template-columns: 1fr 1fr; } .menu-nav ul { grid-template-columns: 1fr; } .shopdl > div { grid-template-columns: 1fr; gap: 2px; } .shopdl dt { font-size: 12px; color: var(--ink2); } .shopdl dd { font-size: 15px; word-break: normal; overflow-wrap: anywhere; } .ctable > div, .cfm-body dl > div { grid-template-columns: 1fr; gap: 2px; } .cf-list { grid-template-columns: 1fr; } .cf-list dt { border-bottom: 0; padding-bottom: 0; } .f-row { grid-template-columns: 1fr; gap: 6px; } .f-lab { padding-top: 0; } .f-grid2, .sf-grid2 { grid-template-columns: 1fr; } .sf-makers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sf-steps span { font-size: 11px; } .ft-in { grid-template-columns: 1fr; } .tipx { grid-template-columns: 1fr; } .tipx-n { display: flex; align-items: baseline; justify-content: flex-start; gap: 8px; } .tipx-n b { font-size: 48px; } .agroups { grid-template-columns: 1fr; } .agroup + .agroup { border-left: 0; } .docs-list { padding: 4px 16px 10px; } .cl-body { font-size: 16px; } .cl-body h2 { padding: 14px 14px 14px 58px; } .cl-h2n { width: 44px; font-size: 15px; } .cl-by { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; } .ph-big { font-size: 64px; bottom: 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .js [data-reveal], .js [data-pop], .js [data-hero], .js [data-hero-line], .js [data-hero-visual] { opacity: 1; transform: none; } } /* 横に広い英数字（Unbounded）が狭い枠で折り返さないように */ .sf-tel b, .formside-tel b { font-size: 20px; white-space: nowrap; letter-spacing: -.01em; } .cl-body tbody th { white-space: normal; min-width: 7em; } @media (max-width: 640px) { .jk-price b { font-size: 22px; } .cl-body table { font-size: 14px; } .cl-body th, .cl-body td { padding: 8px 10px; } } /* ---------- FV の下：かんたん査定（横長）＋ LINE・電話 ---------- 入力欄が狭くなると、選んだ文字（メーカー名・年式・走行距離）が切れる。1欄 約210px を下回らないように、幅に合わせて並べ方を変える 1401px〜：見出し＋4欄を1行、2行目に注記とボタン ／ 1101〜1400px：見出しを上に、4欄を1行 ／ 581〜1100px：2列 ／ 〜580px：1列 */ .kv-bar { position: relative; z-index: 2; background: #fff; } .kv-bar-in { display: grid; gap: 14px; max-width: 1440px; padding-block: 20px 18px; } .qe-wide { grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: end; gap: 10px 14px; padding: 16px 18px 14px; box-shadow: 6px 6px 0 var(--ink); } .qe-wide::before, .qe-wide::after, .qe-wide .qe-top, .qe-wide .qe-bar { display: none; } .qe-wide .qe-2 { display: contents; } .qe-wide .qe-h { margin: 0; align-self: center; font-size: 19px; white-space: nowrap; } .qe-wide .qe-h span { width: 54px; height: 54px; } .qe-wide .qe-row input, .qe-wide .qe-row select { min-height: 50px; } .qe-wide .btn { grid-column: 4 / 6; margin: 0; min-height: 54px; } .qe-wide .qe-note { grid-column: 1 / 4; grid-row: 2; align-self: center; } .kv-alt { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; } .kv-alt-l { margin-right: auto; font-family: var(--f-jpb); font-size: 14px; } .kv-alt a { display: flex; align-items: center; gap: 10px; padding: 8px 18px; border: var(--bw) solid var(--ink); text-decoration: none; box-shadow: var(--sh); font-family: var(--f-jpb); font-size: 16px; line-height: 1.3; transition: transform .2s var(--ease), box-shadow .2s; } .kv-alt a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } .kv-alt small { display: block; font-family: var(--f-jpb); font-size: 11px; } .kv-alt .ic { width: 24px; height: 24px; flex: none; } .kv-alt-line { background: var(--line-g); color: #fff; } .kv-alt-tel { background: var(--y); } .kv-alt-tel span { font-family: var(--f-en); font-weight: 800; font-size: 20px; white-space: nowrap; } @media (max-width: 1400px) { .qe-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } .qe-wide .qe-h { grid-column: 1 / -1; } .qe-wide .btn { grid-column: 3 / 5; } .qe-wide .qe-note { grid-column: 1 / 3; grid-row: auto; } } @media (max-width: 1100px) { .qe-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qe-wide .btn, .qe-wide .qe-note { grid-column: 1 / -1; } .qe-wide .qe-note { order: 1; } } @media (max-width: 760px) { .kv-alt { justify-content: stretch; } .kv-alt-l { width: 100%; margin: 0; text-align: center; } .kv-alt a { flex: 1 1 220px; justify-content: center; } } @media (max-width: 580px) { .qe-wide { grid-template-columns: 1fr; } .qe-wide .qe-h { white-space: normal; } }