/* ========================================================= 家族のきもち 2026 main.css 青 #007cba ／ 緑 #00b900 ／ ロゴ緑 #5cb531 を基調に、白ベース ========================================================= */ :root { --blue: #007cba; --blue-d: #00609a; --blue-dd: #0a4570; --blue-l: #e3f2fb; --blue-ll: #f2f9fd; --green: #00b900; --green-d: #009a0c; --leaf: #5cb531; --mint: #eaf8e6; --line-g: #06c755; --yellow: #ffe14a; --orange: #f15a24; --red: #e3141e; --ink: #1d2b36; --ink-2: #4b5b67; --ink-3: #7b8a95; --line: #d9e7f0; --bg: #ffffff; --grad: linear-gradient(115deg, #007cba 0%, #0099b8 45%, #00b900 100%); --grad-soft: linear-gradient(115deg, #e3f2fb 0%, #eaf8e6 100%); --r: 22px; --r-s: 14px; --shadow: 0 12px 30px -14px rgba(0, 70, 120, .28); --shadow-l: 0 34px 70px -28px rgba(0, 70, 120, .42); --f-head: "Zen Maru Gothic", "noto-sans-cjk-jp", "Noto Sans JP", sans-serif; --f-en: "Montserrat", "Zen Maru Gothic", sans-serif; --hh: 64px; --ease: cubic-bezier(.2, .75, .2, 1); --ease-b: cubic-bezier(.34, 1.56, .64, 1); } @media (min-width: 1024px) { :root { --hh: 84px; } } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hh) + 16px); } body.kz { margin: 0; color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.9; letter-spacing: .03em; overflow-x: clip; -webkit-font-smoothing: antialiased; } @media (min-width: 768px) { body.kz { font-size: 16px; } } body.kz img, body.kz svg, body.kz video, body.kz iframe { max-width: 100%; } body.kz img { height: auto; vertical-align: middle; } body.kz a { color: var(--blue); text-decoration: none; transition: color .25s; } body.kz a:hover { color: var(--green-d); } body.kz h1, body.kz h2, body.kz h3, body.kz h4 { font-family: var(--f-head); line-height: 1.45; margin: 0; font-weight: 900; letter-spacing: .04em; color: var(--ink); } body.kz p { margin: 0 0 1em; } body.kz ul, body.kz ol { margin: 0; padding: 0; } body.kz button { font: inherit; color: inherit; cursor: pointer; } body.kz :focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; } .kz-ic { width: 1.2em; height: 1.2em; flex: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .kz-skip { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--blue); color: #fff !important; padding: 10px 16px; border-radius: 10px; } .kz-skip:focus { top: 12px; } .kz-wrap { width: min(100% - 32px, 1200px); margin-inline: auto; } .kz-narrow { max-width: 880px; margin-inline: auto; } .kz-center { text-align: center; } .kz-sec { position: relative; padding: 72px 0; } @media (min-width: 1024px) { .kz-sec { padding: 120px 0; } } .pc { display: none; } @media (min-width: 768px) { .pc { display: inline; } .sp { display: none; } } /* ジャンプしないよう、旧プラグインの出力を隠す */ #fixed-bottom-menu, .fixed-bottom-menu-container, #ast-scroll-top { display: none !important; } /* ---------- progress ---------- */ .kz-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120; pointer-events: none; } .kz-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: var(--grad); } /* ---------- header ---------- */ .kz-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--hh); transition: background .35s, box-shadow .35s, height .35s; } body.admin-bar .kz-header { top: 32px; } @media (max-width: 782px) { body.admin-bar .kz-header { top: 46px; } } .kz-header::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid rgba(0, 124, 186, .08); transition: background .35s; } .kz-header.is-scrolled::before { background: rgba(255, 255, 255, .9); box-shadow: 0 8px 30px -18px rgba(0, 60, 100, .35); } .kz-header__inner { position: relative; height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 16px; max-width: 1440px; margin: 0 auto; } .kz-logo { flex: none; display: block; width: 168px; } .kz-logo img { width: 100%; height: auto; display: block; } @media (min-width: 1024px) { .kz-logo { width: 210px; } .kz-header__inner { padding: 0 28px; } } .kz-gnav { display: none; margin-left: auto; } .kz-gnav > ul { display: flex; list-style: none; gap: 4px; } .kz-gnav li { position: relative; } .kz-gnav > ul > li > a { display: flex; align-items: center; gap: 4px; padding: 10px 12px; color: var(--ink); font-weight: 700; font-size: 14.5px; border-radius: 999px; position: relative; } .kz-gnav > ul > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--grad); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); } .kz-gnav > ul > li > a:hover::after, .kz-gnav > ul > li:focus-within > a::after { transform: scaleX(1); transform-origin: left; } .kz-gnav .kz-ic { width: 14px; height: 14px; transition: transform .3s; } .kz-gnav .has-sub:hover > a .kz-ic { transform: rotate(180deg); } .kz-gnav__sub { position: absolute; left: 50%; top: 100%; min-width: 240px; list-style: none; padding: 10px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-l); opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: .3s var(--ease); } .kz-gnav .has-sub:hover .kz-gnav__sub, .kz-gnav .has-sub:focus-within .kz-gnav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .kz-gnav__sub a { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; color: var(--ink); font-weight: 700; font-size: 14px; } .kz-gnav__sub a:hover { background: var(--blue-ll); color: var(--blue); } .kz-gnav__sub .kz-paw { width: 16px; height: 16px; color: var(--leaf); } .kz-header__cta { display: none; align-items: center; gap: 10px; margin-left: 8px; } .kz-htel { display: flex; align-items: center; gap: 8px; color: var(--ink) !important; } .kz-htel__free { font-size: 10px; line-height: 1.25; font-weight: 700; color: #fff; background: var(--green); padding: 5px 6px; border-radius: 8px; text-align: center; } .kz-htel__num b { display: block; font-family: var(--f-en); font-size: 22px; font-weight: 800; letter-spacing: .02em; line-height: 1.1; color: var(--blue); } .kz-htel__num small { display: block; font-size: 10.5px; color: var(--ink-2); line-height: 1.3; } .kz-hbtn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 999px; color: #fff !important; font-weight: 700; font-size: 14px; transition: transform .3s var(--ease-b), box-shadow .3s; } .kz-hbtn:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .kz-hbtn--line { background: var(--line-g); } .kz-hbtn--form { background: var(--grad); } @media (min-width: 1280px) and (max-width: 1439px) { .kz-hbtn--form { display: none; } .kz-gnav > ul > li > a { padding: 10px 9px; } } @media (min-width: 1280px) { .kz-gnav { display: block; } .kz-header__cta { display: flex; } .kz-burger { display: none !important; } } @media (min-width: 1024px) and (max-width: 1279px) { .kz-header__cta { display: flex; margin-left: auto; } .kz-hbtn--form { display: none; } } .kz-burger { margin-left: auto; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 54px; height: 50px; border: 0; border-radius: 16px; background: var(--grad); color: #fff; padding: 9px 0 6px; box-shadow: var(--shadow); } @media (min-width: 1024px) and (max-width: 1279px) { .kz-burger { margin-left: 4px; } } .kz-burger__bars { position: relative; width: 22px; height: 16px; display: block; } .kz-burger__bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: #fff; transition: transform .4s var(--ease), opacity .3s, top .4s var(--ease); } .kz-burger__bars i:nth-child(1) { top: 1px; } .kz-burger__bars i:nth-child(2) { top: 7px; } .kz-burger__bars i:nth-child(3) { top: 13px; } .kz-burger__label { font-family: var(--f-en); font-size: 9px; font-weight: 700; letter-spacing: .12em; line-height: 1; } body.kz-menu-open .kz-burger__bars i:nth-child(1) { top: 7px; transform: rotate(45deg); } body.kz-menu-open .kz-burger__bars i:nth-child(2) { opacity: 0; transform: scaleX(0); } body.kz-menu-open .kz-burger__bars i:nth-child(3) { top: 7px; transform: rotate(-45deg); } /* drawer */ .kz-drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; } .kz-drawer__bg { position: absolute; inset: 0; overflow: hidden; } .kz-drawer__bg span { position: absolute; border-radius: 50%; right: 30px; top: 30px; width: 40px; height: 40px; transform: scale(0); transition: transform .7s var(--ease); } .kz-drawer__bg span:nth-child(1) { background: var(--blue); } .kz-drawer__bg span:nth-child(2) { background: #fff; transition-delay: .08s; } body.kz-menu-open .kz-drawer { visibility: visible; pointer-events: auto; } body.kz-menu-open .kz-drawer__bg span { transform: scale(70); } .kz-drawer__inner { position: relative; height: 100%; overflow-y: auto; padding: calc(var(--hh) + 28px) 24px 120px; opacity: 0; transition: opacity .4s .25s; } body.kz-menu-open .kz-drawer__inner { opacity: 1; } .kz-drawer__nav { list-style: none; max-width: 560px; margin: 0 auto; } .kz-drawer__nav > li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateX(30px); transition: .6s var(--ease); transition-delay: calc(.3s + var(--i) * .06s); } body.kz-menu-open .kz-drawer__nav > li { opacity: 1; transform: none; } .kz-drawer__nav > li > a { display: flex; align-items: baseline; gap: 14px; padding: 16px 4px; color: var(--ink) !important; } .kz-drawer__nav .en { font-family: var(--f-en); font-size: 11px; font-weight: 700; color: var(--blue); width: 64px; letter-spacing: .1em; text-transform: uppercase; } .kz-drawer__nav .ja { font-family: var(--f-head); font-weight: 900; font-size: 18px; } .kz-drawer__nav ul { list-style: none; padding: 0 0 14px 78px; } .kz-drawer__nav ul a { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--ink-2) !important; font-weight: 700; font-size: 14.5px; } .kz-drawer__nav ul .kz-paw { width: 14px; height: 14px; color: var(--leaf); } .kz-drawer__cta { display: grid; gap: 12px; max-width: 560px; margin: 28px auto 0; } .kz-drawer__area { max-width: 560px; margin: 18px auto 0; font-size: 13px; color: var(--ink-2); } body.kz-menu-open { overflow: hidden; } /* ---------- buttons ---------- */ .kz-btn { --mx: 0px; --my: 0px; display: inline-flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 26px 10px 12px; border-radius: 999px; color: #fff !important; font-weight: 700; position: relative; overflow: hidden; isolation: isolate; transform: translate(var(--mx), var(--my)); transition: transform .35s var(--ease-b), box-shadow .35s; box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .35); text-align: left; border: 0; } .kz-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .35) 40%, transparent 60%); transform: translateX(-120%); transition: transform .8s var(--ease); } .kz-btn:hover::after { transform: translateX(120%); } .kz-btn:hover { box-shadow: 0 20px 34px -14px rgba(0, 0, 0, .4); } .kz-btn__icon { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .22); } .kz-btn__icon .kz-ic { width: 22px; height: 22px; } .kz-btn__body { display: flex; flex-direction: column; line-height: 1.25; } .kz-btn__body small { font-size: 11px; opacity: .92; font-weight: 700; } .kz-btn__body b { font-size: 17px; letter-spacing: .04em; } .kz-btn--tel { background: linear-gradient(115deg, #ff6a2a, var(--orange)); } .kz-btn--tel b { font-family: var(--f-en); font-size: 22px; font-weight: 800; letter-spacing: .02em; } .kz-btn--tel .kz-btn__icon { animation: kzRing 2.6s ease-in-out infinite; } .kz-btn--line { background: var(--line-g); } .kz-btn--form { background: var(--grad); } .kz-btn.is-big { min-height: 72px; padding-right: 32px; } .kz-btn--tel.is-big b { font-size: 26px; } @keyframes kzRing { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-16deg); } 78% { transform: rotate(14deg); } 82% { transform: rotate(-10deg); } 86% { transform: rotate(8deg); } 90% { transform: rotate(0); } } .kz-more { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; border: 2px solid var(--blue); color: var(--blue) !important; font-weight: 700; background: #fff; transition: .35s var(--ease); } .kz-more .kz-ic { transition: transform .35s var(--ease); } .kz-more:hover { background: var(--blue); color: #fff !important; } .kz-more:hover .kz-ic { transform: translateX(4px); } .kz-more.is-light { border-color: #fff; background: transparent; color: #fff !important; } .kz-more.is-light:hover { background: #fff; color: var(--blue) !important; } .kz-pill { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink) !important; font-weight: 700; box-shadow: var(--shadow); transition: .3s var(--ease); } .kz-pill .kz-ic { color: var(--green); } .kz-pill:hover { transform: translateY(-3px); border-color: var(--green); } .kz-round { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--blue); background: #fff; color: var(--blue); display: grid; place-items: center; transition: .3s; } .kz-round:hover { background: var(--blue); color: #fff; } .kz-round .kz-ic { width: 22px; height: 22px; } /* ---------- heading ---------- */ .kz-head { text-align: center; margin-bottom: 44px; } @media (min-width: 1024px) { .kz-head { margin-bottom: 64px; } } .kz-head__en { margin: 0 0 6px !important; font-family: var(--f-en); font-weight: 800; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; color: var(--blue); } .kz-head__en span { display: inline-flex; align-items: center; gap: 10px; } .kz-head__en span::before, .kz-head__en span::after { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad); } .kz-head__ja { font-size: clamp(1.6rem, 5vw, 2.6rem); } .kz-head__lead { margin: 14px 0 0 !important; color: var(--ink-2); } .kz-big6 { font-family: var(--f-en); font-size: 1.6em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; padding: 0 .04em; } /* ---------- hero ---------- */ .kz-hero { position: relative; padding: calc(var(--hh) + 34px) 0 110px; overflow: hidden; background: linear-gradient(180deg, #f2f9fd 0%, #fff 70%); } body.admin-bar .kz-hero { padding-top: calc(var(--hh) + 66px); } @media (min-width: 1024px) { .kz-hero { min-height: min(100svh, 920px); display: flex; align-items: center; padding: calc(var(--hh) + 40px) 0 130px; } } .kz-hero__bg { position: absolute; inset: 0; pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: kzBlob 18s ease-in-out infinite alternate; } .kz-hero__bg .b1 { width: 52vmax; height: 52vmax; left: -18vmax; top: -22vmax; background: radial-gradient(circle at 30% 30%, #7cc8f2, transparent 65%); } .kz-hero__bg .b2 { width: 46vmax; height: 46vmax; right: -16vmax; top: 10%; background: radial-gradient(circle at 50% 50%, #9be58f, transparent 65%); animation-duration: 22s; animation-delay: -6s; } .kz-hero__bg .b3 { width: 34vmax; height: 34vmax; left: 30%; bottom: -20vmax; background: radial-gradient(circle at 50% 50%, #ffe98a, transparent 65%); opacity: .35; animation-duration: 26s; animation-delay: -11s; } @keyframes kzBlob { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(6vmax, -4vmax) scale(1.12); } 66% { transform: translate(-4vmax, 5vmax) scale(.92); } 100% { transform: translate(3vmax, 2vmax) scale(1.05); } } .kz-hero__grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 124, 186, .16) 1.4px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); } .kz-hero__inner { position: relative; display: grid; gap: 34px; align-items: center; } @media (min-width: 1024px) { .kz-hero__inner { grid-template-columns: 1.08fr .92fr; gap: 40px; } } .kz-hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-weight: 700; font-size: 13px; color: var(--blue-d); margin-bottom: 18px !important; } .pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--green); position: relative; flex: none; } .pulse::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--green); animation: kzPulse 1.8s ease-out infinite; } @keyframes kzPulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } } .kz-hero__title { font-size: clamp(1.95rem, 8.6vw, 4.05rem); line-height: 1.22; margin-bottom: 20px !important; letter-spacing: .02em; } .kz-hero__pre { display: block; font-size: .46em; color: var(--blue); margin-bottom: .2em; letter-spacing: .12em; } .kz-hero__ln { display: block; white-space: nowrap; } .kz-hero__ln.is-accent { position: relative; display: inline-block; isolation: isolate; color: var(--blue); } .kz-hero__ln.is-accent .kz-char { background: var(--grad); background-size: calc(var(--n, 1) * 1em) 100%; background-position: calc(var(--k, 0) * -1em) 0; -webkit-background-clip: text; background-clip: text; color: transparent; } .kz-hero__ln.is-accent::after { content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .26em; z-index: -1; background: var(--yellow); border-radius: 6px; transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease) 1.1s; } .kz-hero__title.is-in .kz-hero__ln.is-accent::after { transform: scaleX(1); } .kz-hero__lead { font-weight: 700; font-size: clamp(14.5px, 3.8vw, 17px); color: var(--ink); line-height: 1.8; } .kz-hero__badges { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0 26px !important; } @media (min-width: 640px) { .kz-hero__badges { gap: 10px; } } .kz-hero__badges li { display: flex; align-items: center; gap: 8px; padding: 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(0, 124, 186, .14); box-shadow: 0 10px 22px -16px rgba(0, 70, 120, .5); font-weight: 900; font-family: var(--f-head); font-size: 12.5px; line-height: 1.3; color: var(--blue-dd); } @media (min-width: 640px) { .kz-hero__badges li { font-size: 14px; padding: 12px 14px; } } .kz-hero__badges .kz-ic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--grad); color: #fff; flex: none; } .kz-js .kz-hero__badges li { opacity: 0; transform: translateY(18px) scale(.9); } .kz-js .kz-hero.is-ready .kz-hero__badges li { animation: kzPop .7s var(--ease-b) forwards; animation-delay: calc(.8s + var(--i) * .08s); } @keyframes kzPop { to { opacity: 1; transform: none; } } .kz-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .kz-hero__area { display: flex; gap: 8px; align-items: flex-start; margin: 18px 0 0 !important; font-size: 13px; font-weight: 700; color: var(--ink-2); } .kz-hero__area .kz-ic { color: var(--green); margin-top: 4px; } /* hero visual */ .kz-hero__visual { position: relative; } .kz-hero__stage { --rx: 0deg; --ry: 0deg; position: relative; width: min(100%, 560px); aspect-ratio: 1 / 1; margin: 0 auto; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease); transform-style: preserve-3d; } .kz-hero__disc { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #e8f6ff 45%, #d8f3d2 100%); box-shadow: inset 0 0 0 10px rgba(255, 255, 255, .7), var(--shadow-l); } .kz-hero__disc::before { content: ""; position: absolute; inset: -12px; border-radius: 50%; padding: 4px; background: conic-gradient(from 0deg, #007cba, #00b900, #ffe14a, #007cba); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: kzSpin 14s linear infinite; opacity: .7; } @keyframes kzSpin { to { transform: rotate(360deg); } } .kz-hero__cat { position: absolute; left: 50%; top: 50%; width: 44%; translate: -50% -50%; filter: drop-shadow(0 18px 24px rgba(0, 100, 30, .25)); animation: kzBob 4.5s ease-in-out infinite; } @keyframes kzBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } } .kz-hero__photo { --px: 0px; --py: 0px; position: absolute; margin: 0; padding: 7px 7px 30px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-l); translate: var(--px) var(--py); transition: translate .5s var(--ease); animation: kzFloat 6s ease-in-out infinite; } .kz-hero__photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; } .kz-hero__photo figcaption { position: absolute; left: 10px; right: 10px; bottom: 6px; display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; } .kz-hero__photo figcaption .kz-ic { width: 13px; height: 13px; color: var(--green); } .kz-hero__photo.p0 { left: 0; top: 7%; width: 33%; rotate: -8deg; animation-delay: -1s; } .kz-hero__photo.p1 { right: 1%; top: 3%; width: 28%; rotate: 7deg; animation-delay: -2.4s; } .kz-hero__photo.p2 { right: 0; bottom: 10%; width: 29%; rotate: 5deg; animation-delay: -3.3s; } .kz-hero__photo.p3 { left: 3%; bottom: 4%; width: 32%; rotate: -5deg; animation-delay: -4.1s; } .kz-hero__photo.p4 { display: none; } @media (min-width: 1024px) { .kz-hero__photo.p4 { display: block; left: 40%; bottom: -6%; width: 22%; rotate: 3deg; animation-delay: -1.8s; } } @keyframes kzFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .kz-js .kz-hero__photo { opacity: 0; scale: .6; } .kz-js .kz-hero.is-ready .kz-hero__photo { opacity: 1; scale: 1; transition: opacity .8s var(--ease), scale .9s var(--ease-b), translate .5s var(--ease); } .kz-hero.is-ready .kz-hero__photo.p0 { transition-delay: .5s, .5s, 0s; } .kz-hero.is-ready .kz-hero__photo.p1 { transition-delay: .62s, .62s, 0s; } .kz-hero.is-ready .kz-hero__photo.p2 { transition-delay: .74s, .74s, 0s; } .kz-hero.is-ready .kz-hero__photo.p3 { transition-delay: .86s, .86s, 0s; } .kz-hero.is-ready .kz-hero__photo.p4 { transition-delay: .98s, .98s, 0s; } .kz-hero__seal { position: absolute; left: 37%; top: -3%; width: 25%; aspect-ratio: 1; display: grid; place-items: center; } .kz-hero__seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: kzSpin 16s linear infinite; } .kz-hero__seal-ring text { font-size: 15.5px; font-weight: 700; letter-spacing: .12em; fill: var(--blue-d); font-family: var(--f-head); } .kz-hero__seal-core { width: 58%; aspect-ratio: 1; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-content: center; text-align: center; line-height: 1.15; box-shadow: var(--shadow); } .kz-hero__seal-core b { font-size: clamp(10px, 2.4vw, 14px); font-family: var(--f-head); } .kz-hero__seal-core em { font-style: normal; font-weight: 900; font-size: clamp(14px, 3.6vw, 22px); font-family: var(--f-head); color: var(--yellow); } .kz-hero__sticker { position: absolute; display: grid; place-items: center; text-align: center; border-radius: 50%; font-family: var(--f-head); font-weight: 900; line-height: 1.2; box-shadow: var(--shadow); animation: kzWobble 5s ease-in-out infinite; } .kz-hero__sticker.s1 { left: -1%; top: 47%; width: 19%; aspect-ratio: 1; background: var(--yellow); color: var(--red); font-size: clamp(12px, 3vw, 17px); rotate: -12deg; } .kz-hero__sticker.s2 { right: 24%; bottom: -3%; width: 17%; aspect-ratio: 1; background: var(--green); color: #fff; font-size: clamp(11px, 2.6vw, 15px); rotate: 10deg; animation-delay: -2s; } @media (min-width: 1024px) { .kz-hero__sticker.s2 { right: 6%; bottom: -5%; } } @keyframes kzWobble { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } .kz-hero__scroll { position: absolute; left: 50%; bottom: 52px; translate: -50% 0; display: none; flex-direction: column; align-items: center; gap: 8px; color: var(--blue) !important; font-family: var(--f-en); font-weight: 700; font-size: 10px; letter-spacing: .3em; z-index: 2; } .kz-hero__scroll i { width: 2px; height: 46px; background: linear-gradient(var(--blue) 50%, rgba(0, 124, 186, .15) 50%); background-size: 100% 200%; animation: kzScroll 1.8s ease-in-out infinite; } @keyframes kzScroll { from { background-position: 0 100%; } to { background-position: 0 -100%; } } @media (min-width: 1024px) { .kz-hero__scroll { display: flex; } } .kz-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 60px; display: block; } .kz-wave .w1 { fill: rgba(255, 255, 255, .6); animation: kzWave 9s ease-in-out infinite alternate; } .kz-wave .w2 { fill: #fff; animation: kzWave 12s ease-in-out infinite alternate-reverse; } @keyframes kzWave { from { transform: translateX(0); } to { transform: translateX(-40px); } } /* split text */ .kz-char, .kz-word { display: inline-block; } .kz-js [data-split] .kz-char { opacity: 0; transform: translateY(.55em) rotate(8deg); filter: blur(8px); transition: opacity .7s var(--ease), transform .9s var(--ease-b), filter .7s var(--ease); transition-delay: calc(var(--ci) * 38ms + .1s); } .kz-js [data-split].is-in .kz-char { opacity: 1; transform: none; filter: none; } /* ---------- ticker ---------- */ .kz-ticker { position: relative; overflow: hidden; background: var(--grad); color: #fff; padding: 16px 0; transform: rotate(-1.6deg); margin: -26px -10px 0; z-index: 3; box-shadow: var(--shadow); } .kz-ticker__track { display: flex; width: max-content; animation: kzMarquee 38s linear infinite; } .kz-ticker:hover .kz-ticker__track { animation-play-state: paused; } .kz-ticker__row { display: flex; align-items: center; } .kz-ticker__item { font-family: var(--f-head); font-weight: 900; font-size: clamp(18px, 3.6vw, 28px); white-space: nowrap; padding: 0 20px; letter-spacing: .06em; } .kz-ticker__item:nth-child(4n+3) { color: transparent; -webkit-text-stroke: 1.2px #fff; } .kz-ticker__sep .kz-paw { width: 24px; height: 24px; color: var(--yellow); } @keyframes kzMarquee { to { transform: translateX(-50%); } } /* ---------- warning ---------- */ .kz-alert-sec { padding: 64px 0 0; } .kz-warn { position: relative; display: grid; gap: 14px; padding: 26px 24px; border-radius: var(--r); background: #fff; border: 2px solid var(--green); box-shadow: var(--shadow); overflow: hidden; } .kz-warn::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: repeating-linear-gradient(-45deg, var(--yellow) 0 10px, #1d2b36 10px 20px); } @media (min-width: 768px) { .kz-warn { grid-template-columns: 300px 1fr; align-items: center; padding: 26px 32px 26px 38px; } } .kz-warn__head { display: flex; align-items: center; gap: 12px; } .kz-warn__head .kz-ic { width: 44px; height: 44px; color: #fff; background: var(--red); border-radius: 50%; padding: 9px; flex: none; animation: kzWobble 2.4s ease-in-out infinite; } .kz-warn__head p { margin: 0 !important; font-family: var(--f-head); font-weight: 900; font-size: 17px; line-height: 1.5; } .kz-warn__text { margin: 0 !important; font-size: 14px; line-height: 1.85; color: var(--ink-2); } /* ---------- message ---------- */ .kz-message { overflow: hidden; } .kz-message__inner { text-align: center; } .kz-message__cat { width: 140px; display: block; margin: 0 auto 6px; } @media (min-width: 1024px) { .kz-message__cat { width: 170px; } } .kz-message__en { font-family: var(--f-en); font-weight: 800; letter-spacing: .3em; color: var(--green-d); font-size: 14px; margin-bottom: 8px !important; } .kz-message__img { max-width: 760px; margin: 0 auto 26px; } .kz-message__img img { width: 100%; } .kz-js [data-wipe] img { clip-path: inset(0 100% 0 0); transition: clip-path 2.2s cubic-bezier(.65, 0, .35, 1); } .kz-js [data-wipe].is-in img { clip-path: inset(0 0 0 0); } .kz-message__h { font-size: clamp(1.15rem, 3.6vw, 1.6rem); display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--grad-soft); } .kz-message__trail { margin-top: 40px; } /* paw trail */ .kz-trail { display: flex; justify-content: center; gap: clamp(10px, 4vw, 46px); color: var(--leaf); } .kz-trail span { display: block; opacity: 0; animation: kzStep 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * .35s); } .kz-trail span:nth-child(odd) { transform: translateY(10px) rotate(78deg); } .kz-trail span:nth-child(even) { transform: translateY(-10px) rotate(102deg); } .kz-trail .kz-paw { width: 26px; height: 26px; } @keyframes kzStep { 0%, 100% { opacity: 0; } 12%, 55% { opacity: .85; } 80% { opacity: 0; } } /* ---------- services (bento) ---------- */ .kz-services { background: linear-gradient(180deg, #fff 0%, var(--blue-ll) 100%); } .kz-bento { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 680px) { .kz-bento { grid-template-columns: repeat(2, 1fr); } .kz-svc--0, .kz-svc--7 { grid-column: span 2; } } @media (min-width: 1024px) { .kz-bento { grid-template-columns: repeat(4, 1fr); grid-auto-flow: dense; gap: 20px; } .kz-svc--0 { grid-column: span 2; } .kz-svc--2 { grid-row: span 2; } .kz-svc--5, .kz-svc--7 { grid-column: span 2; } } .kz-svc { --mx: 50%; --my: 50%; position: relative; overflow: hidden; isolation: isolate; padding: 28px 24px 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .45s var(--ease), box-shadow .45s; display: flex; flex-direction: column; } .kz-svc::before, .kz-stack__inner::before, .kz-point::before, .kz-card::before, .kz-can__item::before, .kz-itemsgrid__list li::before, .kz-other__card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(0, 185, 0, .13), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; } [data-spot]:hover::before { opacity: 1; } .kz-svc:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); } .kz-svc__no { position: absolute; right: 18px; top: 8px; font-family: var(--f-en); font-weight: 800; font-size: 58px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(0, 124, 186, .18); z-index: -1; } .kz-svc__icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--grad); color: #fff; margin-bottom: 16px; box-shadow: 0 12px 22px -12px rgba(0, 124, 186, .7); transition: transform .5s var(--ease-b); } .kz-svc:hover .kz-svc__icon { transform: rotate(-8deg) scale(1.08); } .kz-svc__icon .kz-ic { width: 28px; height: 28px; } .kz-svc__title { display: flex; align-items: center; gap: 8px; font-size: 1.22rem; margin-bottom: 10px !important; } .kz-svc__title .kz-paw { width: 20px; height: 20px; color: var(--green); flex: none; } .kz-svc__text { font-size: 14px; color: var(--ink-2); line-height: 1.85; margin-bottom: 16px !important; } .kz-svc__link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; align-self: flex-start; } .kz-svc__link .kz-ic { transition: transform .3s; } .kz-svc__link:hover .kz-ic { transform: translateX(4px); } .kz-svc--0, .kz-svc--2 { background: var(--grad); border-color: transparent; color: #fff; } .kz-svc--0 .kz-svc__title, .kz-svc--2 .kz-svc__title { color: #fff; font-size: 1.45rem; } .kz-svc--0 .kz-svc__text, .kz-svc--2 .kz-svc__text { color: rgba(255, 255, 255, .92); font-size: 15px; } .kz-svc--0 .kz-svc__icon, .kz-svc--2 .kz-svc__icon { background: #fff; color: var(--blue); } .kz-svc--0 .kz-svc__title .kz-paw, .kz-svc--2 .kz-svc__title .kz-paw { color: var(--yellow); } .kz-svc--0 .kz-svc__no, .kz-svc--2 .kz-svc__no { -webkit-text-stroke-color: rgba(255, 255, 255, .35); } .kz-svc--0 .kz-svc__link, .kz-svc--2 .kz-svc__link { color: #fff !important; background: rgba(255, 255, 255, .18); padding: 8px 16px; border-radius: 999px; } .kz-svc--0::before, .kz-svc--2::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .25), transparent 45%); } .kz-svc--2 { justify-content: center; } @media (min-width: 1024px) { .kz-svc--2 .kz-svc__icon { width: 78px; height: 78px; border-radius: 24px; } .kz-svc--2 .kz-svc__icon .kz-ic { width: 38px; height: 38px; } } .kz-svc-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; } /* ---------- items rail ---------- */ .kz-items { padding-bottom: 80px; overflow: hidden; } .kz-items__rail { overflow: hidden; padding: 10px 0 30px; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .kz-items__track { display: flex; gap: 18px; width: max-content; animation: kzMarquee 60s linear infinite; } .kz-items__rail:hover .kz-items__track { animation-play-state: paused; } .kz-item { flex: none; width: 210px; color: var(--ink) !important; transition: transform .4s var(--ease); } .kz-item:nth-child(even) { margin-top: 26px; } .kz-item:hover { transform: translateY(-6px) rotate(-1deg); } .kz-item__img { display: block; border-radius: 18px; overflow: hidden; background: var(--blue-ll); box-shadow: var(--shadow); } .kz-item__img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .6s var(--ease); } .kz-item:hover .kz-item__img img { transform: scale(1.06); } .kz-item__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.6; } .kz-subhead { font-family: var(--f-head); font-weight: 900; font-size: 1.2rem; margin: 54px 0 22px !important; display: flex; align-items: center; gap: 10px; } .kz-subhead::before { content: ""; width: 26px; height: 4px; border-radius: 4px; background: var(--grad); } /* ---------- CTA ---------- */ .kz-cta { position: relative; padding: 64px 0; background: var(--green); color: #fff; } .kz-cta .kz-btn--line { background: #fff; color: var(--green-d) !important; } .kz-cta .kz-btn--line .kz-btn__icon { background: var(--line-g); color: #fff; } .kz-cta__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .kz-cta__bg span { position: absolute; border-radius: 50%; filter: blur(50px); opacity: .55; animation: kzBlob 16s ease-in-out infinite alternate; } .kz-cta__bg span:nth-child(1) { width: 520px; height: 520px; left: -160px; top: -200px; background: #8ce97d; } .kz-cta__bg span:nth-child(2) { width: 460px; height: 460px; right: -120px; bottom: -220px; background: #009a3c; animation-delay: -7s; } .kz-cta__inner { position: relative; display: grid; gap: 26px; align-items: center; } @media (min-width: 1024px) { .kz-cta__inner { grid-template-columns: 1fr auto 230px; gap: 36px; } } /* スタッフ：スマホは見出しの右上、PC は右端に立って帯の上へはみ出す。手で左の案内を示す */ .kz-cta__head { position: relative; padding-right: 104px; min-height: 172px; } .kz-cta img.kz-cta__staff { position: absolute; right: -8px; top: -26px; z-index: 3; width: auto; height: 192px; pointer-events: none; filter: drop-shadow(0 14px 18px rgba(0, 40, 80, .35)); } @media (min-width: 640px) { .kz-cta__head { padding-right: 150px; min-height: 200px; } .kz-cta img.kz-cta__staff { height: 250px; top: -40px; right: 0; } } @media (min-width: 1024px) { .kz-cta__head { padding-right: 0; min-height: 0; } .kz-cta img.kz-cta__staff { position: relative; right: auto; top: auto; justify-self: center; align-self: end; height: 440px; margin: -160px 0 -64px; } } .kz-cta__kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px !important; } .kz-cta__kicker span { padding: 4px 12px; border-radius: 999px; background: var(--yellow); color: var(--red); font-weight: 900; font-family: var(--f-head); font-size: 14px; } .kz-cta__title { font-family: var(--f-head); font-weight: 900; font-size: clamp(1.3rem, 4vw, 2rem); line-height: 1.5; margin-bottom: 20px !important; } .kz-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; } .kz-cta__note { margin: 16px 0 0 !important; font-size: 13.5px; opacity: .95; } .kz-cta__note a { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; display: inline-flex; align-items: center; gap: 4px; } .kz-cta__line { display: flex; align-items: center; gap: 14px; background: #fff; color: var(--ink); padding: 14px 18px 14px 14px; border-radius: 20px; box-shadow: var(--shadow-l); justify-self: start; } .kz-cta__line p { margin: 0 !important; font-weight: 700; font-size: 13px; line-height: 1.6; } .kz-qr { flex: none; display: block; width: 104px; height: 104px; border-radius: 12px; overflow: hidden; background: #fff; border: 4px solid var(--line-g); } .kz-qr__img { display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-size: 600px 130.2px; background-position: -484px -18px; } /* ---------- drive ---------- */ .kz-drive { position: relative; height: 170px; overflow: hidden; } @media (min-width: 1024px) { .kz-drive { height: 230px; } } .kz-drive__road { position: absolute; left: 0; right: 0; bottom: 22px; height: 6px; border-radius: 6px; background: repeating-linear-gradient(90deg, #cfdde6 0 40px, transparent 40px 70px); } .kz-drive__car { position: absolute; bottom: 24px; left: 50%; width: 300px; translate: -50% 0; transform: translateX(110vw); } @media (min-width: 1024px) { .kz-drive__car { width: 420px; } } .kz-drive.is-in .kz-drive__car { animation: kzDrive 2.6s cubic-bezier(.22, .9, .3, 1) forwards, kzBump .35s ease-in-out 2.6s 6 alternate; } @keyframes kzDrive { 0% { transform: translateX(110vw); } 80% { transform: translateX(-12px) rotate(-1deg); } 90% { transform: translateX(6px) rotate(.6deg); } 100% { transform: translateX(0) rotate(0); } } @keyframes kzBump { from { transform: translateY(0); } to { transform: translateY(-3px); } } /* ---------- reasons ---------- */ .kz-reasons { background: linear-gradient(180deg, var(--blue-ll), #fff); } .kz-reasons__grid { display: grid; gap: 30px; } @media (min-width: 1024px) { .kz-reasons__grid { grid-template-columns: 380px 1fr; gap: 64px; align-items: start; } .kz-reasons__sticky { position: sticky; top: calc(var(--hh) + 40px); } } .kz-reasons__side { align-self: stretch; } .kz-reasons__side .kz-head__ja { font-size: clamp(1.6rem, 2.6vw, 2.15rem); } .kz-reasons__side .kz-head { text-align: center; margin-bottom: 20px; } @media (min-width: 1024px) { .kz-reasons__side .kz-head { text-align: left; } .kz-reasons__side .kz-head__en span::before { display: none; } } .kz-reasons__cat { width: 120px; display: block; margin: 0 auto 10px; } @media (min-width: 1024px) { .kz-reasons__cat { margin: 0 0 10px; width: 150px; } } .kz-reasons__stat { display: none; padding: 22px 24px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); } @media (min-width: 1024px) { .kz-reasons__stat { display: block; } } .kz-reasons__stat p { margin: 0 !important; font-family: var(--f-en); font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .kz-reasons__stat b { font-size: 76px; } .kz-reasons__stat span { font-size: 34px; } .kz-reasons__stat small { display: block; margin-top: 8px; font-size: 13px; color: var(--ink-2); font-weight: 700; } .kz-stack { list-style: none; display: grid; gap: 22px; } .kz-stack__card { position: sticky; top: calc(var(--hh) + 20px + var(--i) * 16px); } .kz-stack__inner { --mx: 50%; --my: 50%; position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: center; padding: 26px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: 0 -6px 30px -16px rgba(0, 70, 120, .25), var(--shadow); min-height: 170px; } @media (min-width: 768px) { .kz-stack__inner { padding: 32px 36px; min-height: 190px; } } .kz-stack__no { position: absolute; right: 22px; top: 12px; font-family: var(--f-en); font-weight: 800; font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(0, 185, 0, .22); } .kz-stack__icon { grid-row: span 2; width: 64px; height: 64px; border-radius: 20px; background: var(--blue-l); color: var(--blue); display: grid; place-items: center; } .kz-stack__icon .kz-ic { width: 32px; height: 32px; } .kz-stack__inner h3 { font-size: 1.3rem; align-self: end; } .kz-stack__inner p { grid-column: 2; margin: 0 !important; font-size: 14.5px; color: var(--ink-2); line-height: 1.85; } .kz-stack__card:nth-child(even) .kz-stack__icon { background: var(--mint); color: var(--green-d); } /* ---------- notice ---------- */ .kz-notice { background: #fffbea; overflow: hidden; padding: 0; } .kz-tape { background: var(--yellow); border-block: 3px solid #1d2b36; transform: rotate(-2deg); margin: 34px -20px; overflow: hidden; } .kz-tape.is-rev { transform: rotate(1.6deg); } .kz-tape__track { display: flex; width: max-content; animation: kzMarquee 28s linear infinite; } .kz-tape.is-rev .kz-tape__track { animation-direction: reverse; } .kz-tape span { display: flex; white-space: nowrap; } .kz-tape b, .kz-tape i { padding: 8px 18px; font-style: normal; font-weight: 900; font-family: var(--f-en); letter-spacing: .14em; color: #1d2b36; } .kz-tape i { font-family: var(--f-head); letter-spacing: .06em; background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(29, 43, 54, .08) 10px 20px); } .kz-notice__box { position: relative; text-align: center; padding: 40px 22px; margin: 20px 0; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-l); } @media (min-width: 768px) { .kz-notice__box { padding: 54px 56px; } } .kz-notice__big { margin: 0 auto 26px !important; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 12px; padding: 14px 24px; background: var(--red); color: #fff; font-family: var(--f-head); font-weight: 900; font-size: clamp(15px, 3.6vw, 22px); line-height: 1.4; border-radius: 10px; box-shadow: 0 12px 30px -12px rgba(227, 20, 30, .7); } .kz-notice__big strong { font-size: 2.3em; color: var(--yellow); text-shadow: 0 3px 0 rgba(0, 0, 0, .2); letter-spacing: .1em; display: inline-block; animation: kzShake 3.5s ease-in-out infinite; } @keyframes kzShake { 0%, 86%, 100% { transform: none; } 88% { transform: rotate(-4deg) scale(1.06); } 92% { transform: rotate(4deg) scale(1.06); } 96% { transform: rotate(-2deg); } } .kz-notice__h { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.5rem; margin-bottom: 16px !important; } .kz-notice__h .kz-ic { color: var(--red); width: 30px; height: 30px; } .kz-notice__text { text-align: left; font-size: 14.5px; line-height: 2; color: var(--ink-2); margin-bottom: 26px !important; } @media (min-width: 768px) { .kz-notice__text { text-align: center; } } .kz-notice .kz-more.is-light { border-color: var(--blue); color: var(--blue) !important; } .kz-notice .kz-more.is-light:hover { background: var(--blue); color: #fff !important; } /* ---------- voices ---------- */ .kz-voices { overflow: hidden; } .kz-voices__ctrl { display: flex; justify-content: center; gap: 12px; margin: -24px 0 26px; } .kz-voices__rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px max(16px, calc((100% - 1200px) / 2)) 40px; scrollbar-width: none; cursor: grab; } .kz-voices__rail::-webkit-scrollbar { display: none; } .kz-voices__rail.is-dragging { cursor: grabbing; scroll-snap-type: none; } .kz-voices__rail.is-static { flex-wrap: wrap; justify-content: center; overflow: visible; cursor: auto; } .kz-voices__rail.is-static .kz-voice { width: min(100%, 560px); } .kz-voice { flex: none; width: min(86vw, 440px); scroll-snap-align: center; display: flex; flex-direction: column; padding: 26px 24px; border-radius: var(--r); background: #fff; border: 2px solid var(--green); box-shadow: var(--shadow); position: relative; } .kz-voice::after { content: "”"; position: absolute; right: 18px; top: -6px; font-family: Georgia, serif; font-size: 90px; line-height: 1; color: var(--mint); } .kz-voice__head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; position: relative; z-index: 1; } .kz-voice__img { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--mint); flex: none; } .kz-voice__who { margin: 0 0 2px !important; font-size: 12px; font-weight: 700; color: var(--ink-3); } .kz-voice__title { font-size: 1.05rem; color: var(--orange); line-height: 1.5; } .kz-voice__text { font-size: 14px; line-height: 1.9; color: var(--ink-2); flex: 1; } .kz-voice__rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); } .kz-voice__rate div { text-align: center; } .kz-voice__rate dt { font-size: 11px; font-weight: 700; color: #fff; background: var(--green); border-radius: 999px; padding: 2px 6px; margin-bottom: 6px; } .kz-voice__rate dd { margin: 0; } .kz-stars { display: inline-flex; gap: 1px; } .kz-stars svg { width: 15px; height: 15px; color: #d6e2e9; transition: color .4s, transform .5s var(--ease-b); transition-delay: calc(var(--i) * .1s + .3s); } .kz-voice.is-in .kz-stars svg, .kz-no-io .kz-stars svg { color: #ffc400; transform: rotate(72deg); } /* ---------- FAQ ---------- */ .kz-qa { background: var(--blue-ll); } .kz-faq { display: grid; gap: 14px; } .kz-faq__item { border-radius: 18px; background: #fff; box-shadow: var(--shadow); overflow: hidden; interpolate-size: allow-keywords; } .kz-faq__item summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 18px 20px; cursor: pointer; font-weight: 700; } .kz-faq__item summary::-webkit-details-marker { display: none; } .kz-faq__q, .kz-faq__aa { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--f-en); font-weight: 800; color: #fff; background: var(--blue); } .kz-faq__aa { background: var(--green); } .kz-faq__qt { flex: 1; line-height: 1.6; } .kz-faq__pm { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-l); color: var(--blue); transition: transform .4s var(--ease), background .3s; } .kz-faq__item[open] .kz-faq__pm { transform: rotate(135deg); background: var(--blue); color: #fff; } .kz-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ease), content-visibility .45s allow-discrete; } .kz-faq__item[open]::details-content { block-size: auto; } .kz-faq__a { display: flex; gap: 14px; padding: 0 20px 20px; } .kz-faq__a p { margin: 6px 0 0 !important; color: var(--ink-2); } /* ---------- cards ---------- */ .kz-news__block + .kz-news__block { margin-top: 90px; } .kz-cards { display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 640px) { .kz-cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .kz-cards { grid-template-columns: repeat(3, 1fr); gap: 28px; } } .kz-card { --mx: 50%; --my: 50%; position: relative; isolation: isolate; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s; } .kz-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-l); } .kz-card__link { display: flex; flex-direction: column; height: 100%; color: var(--ink) !important; } .kz-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--grad-soft); } .kz-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); } .kz-card:hover .kz-card__img img { transform: scale(1.07); } .kz-card__noimg { display: grid; place-items: center; height: 100%; color: var(--leaf); } .kz-card__noimg .kz-paw { width: 54px; height: 54px; opacity: .5; } .kz-card__body { position: relative; padding: 18px 20px 22px; flex: 1; } .kz-card__meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); margin-bottom: 8px !important; font-family: var(--f-en); font-weight: 600; } .kz-card__cat { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--blue-l); color: var(--blue) !important; font-weight: 700; font-family: var(--f-head); font-size: 11.5px; letter-spacing: .04em; } .kz-card__title { font-size: 1rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding-right: 30px; } .kz-card__more { position: absolute; right: 16px; bottom: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-l); color: var(--blue); transition: .35s var(--ease); } .kz-card:hover .kz-card__more { background: var(--blue); color: #fff; transform: rotate(-45deg); } .kz-card__more .kz-ic { width: 16px; height: 16px; } .kz-news .kz-center, .kz-related .kz-center, .kz-items .kz-center { margin-top: 36px; } /* ---------- area ---------- */ .kz-area { position: relative; padding: 72px 0 90px; background: linear-gradient(180deg, #fff, var(--mint)); } @media (min-width: 1024px) { .kz-area { padding: 120px 0 130px; } } .kz-area__inner { display: grid; gap: 30px; align-items: center; } @media (min-width: 1024px) { .kz-area__inner { grid-template-columns: 1fr 1fr; gap: 50px; } } .kz-map { width: 100%; height: auto; display: block; overflow: visible; } .kz-map__sea { font-size: 13px; fill: var(--blue); opacity: .55; font-weight: 700; letter-spacing: .2em; } .kz-map .ring { fill: none; stroke: var(--green); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: kzRingOut 3.6s ease-out infinite; opacity: 0; } .kz-map .r2 { animation-delay: 1.2s; } .kz-map .r3 { animation-delay: 2.4s; } @keyframes kzRingOut { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(3.6); opacity: 0; } } .kz-map__line { stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 3 5; opacity: .45; } .kz-map__dot { fill: #fff; stroke: var(--blue); stroke-width: 3; } .kz-map__node.is-base .kz-map__dot { fill: var(--green); stroke: #fff; stroke-width: 4; } .kz-map__label { font-size: 13px; font-weight: 700; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; } .kz-map__node.is-base .kz-map__label { font-size: 16px; fill: var(--green-d); } .kz-js .kz-map__node { opacity: 0; transition: opacity .6s var(--ease); transition-delay: calc(var(--i) * .12s); } .kz-js .kz-area.is-in .kz-map__node { opacity: 1; } .kz-area__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; } .kz-area__list li { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow); font-weight: 700; font-size: 14px; transition: transform .35s var(--ease-b), background .3s, color .3s; } .kz-area__list li .kz-ic { color: var(--green); width: 16px; height: 16px; } .kz-area__list li:hover { transform: translateY(-4px) scale(1.05); background: var(--blue); color: #fff; } .kz-area__list li:hover .kz-ic { color: var(--yellow); } .kz-js .kz-area__list li[data-reveal] { transition-delay: calc(var(--i) * 40ms); } /* ---------- footer ---------- */ .kz-footer { position: relative; background: linear-gradient(160deg, var(--blue-d) 0%, var(--blue) 55%, #0096a8 100%); color: #fff; padding: 90px 0 calc(100px + env(safe-area-inset-bottom)); margin-top: 0; } @media (min-width: 1024px) { .kz-footer { padding-bottom: 40px; } } .kz-footer__trail { position: absolute; left: 0; right: 0; top: 20px; color: rgba(255, 255, 255, .5); } .kz-footer__grid { display: grid; gap: 36px; } @media (min-width: 768px) { .kz-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1100px) { .kz-footer__grid { grid-template-columns: 220px 1fr 1.3fr 1.3fr; gap: 44px; } } .kz-footer__brand { text-align: center; } .kz-footer__logo { display: inline-block; width: 170px; background: #fff; border-radius: 26px; padding: 16px 20px; box-shadow: var(--shadow-l); } .kz-footer__logo img { width: 100%; } .kz-footer__sns { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: #fff !important; font-weight: 700; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .14); } .kz-footer__sns:hover { background: rgba(255, 255, 255, .26); } .kz-footer__h { font-family: var(--f-head); font-weight: 900; font-size: 1.05rem; margin-bottom: 14px !important; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .25); } .kz-footer__menu, .kz-footer__posts { list-style: none; display: grid; gap: 4px; } .kz-footer__menu a, .kz-footer__posts a { color: rgba(255, 255, 255, .92) !important; font-size: 14px; display: block; padding: 4px 0; } .kz-footer__menu a:hover, .kz-footer__posts a:hover { color: var(--yellow) !important; } .kz-footer__menu .is-child a { padding-left: 16px; font-size: 13px; position: relative; } .kz-footer__menu .is-child a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 1px; background: currentColor; } .kz-footer__posts time { display: block; font-family: var(--f-en); font-size: 11px; opacity: .7; } .kz-footer__area { font-size: 13.5px; line-height: 2; opacity: .95; } .kz-footer__contact { display: grid; gap: 10px; margin-top: 18px; } .kz-footer__contact .kz-btn { min-height: 60px; } .kz-footer__bottom { margin-top: 50px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .22); display: grid; gap: 8px; font-size: 12px; opacity: .9; } @media (min-width: 900px) { .kz-footer__bottom { grid-template-columns: 1fr auto; align-items: end; } } .kz-footer__bottom p { margin: 0 !important; } .kz-footer__copy { font-family: var(--f-en); letter-spacing: .06em; } .kz-fixbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: .8fr 1.2fr 1fr 1fr; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -10px 30px -16px rgba(0, 60, 100, .4); transform: translateY(110%); transition: transform .5s var(--ease); } .kz-fixbar.is-show { transform: none; } .kz-fixbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 54px; border-radius: 14px; color: #fff !important; font-size: 11.5px; font-weight: 700; } .kz-fixbar .kz-ic { width: 22px; height: 22px; } .kz-fixbar .is-top { background: var(--blue-l); color: var(--blue) !important; } .kz-fixbar .is-tel { background: linear-gradient(115deg, #ff6a2a, var(--orange)); } .kz-fixbar .is-line { background: var(--line-g); } .kz-fixbar .is-mail { background: var(--blue); } @media (min-width: 1024px) { .kz-fixbar { display: none; } } .kz-totop { position: fixed; right: 18px; bottom: 96px; z-index: 79; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--blue) !important; box-shadow: var(--shadow-l); opacity: 0; transform: translateY(20px); pointer-events: none; transition: .4s var(--ease); } .kz-totop.is-show { opacity: 1; transform: none; pointer-events: auto; } .kz-totop:hover { background: var(--blue); color: #fff !important; } @media (min-width: 1024px) { .kz-totop { bottom: 28px; right: 28px; } } /* reCAPTCHA のバッジはお問い合わせページだけに出る。固定バー・上へ戻るボタンと重ならないように並べる */ .kz-page-contact .grecaptcha-badge { bottom: calc(78px + env(safe-area-inset-bottom)) !important; } .kz-page-contact .kz-totop { bottom: calc(148px + env(safe-area-inset-bottom)); } @media (min-width: 1024px) { .kz-page-contact .grecaptcha-badge { bottom: 14px !important; } .kz-page-contact .kz-totop { bottom: 86px; right: 28px; } } .kz-preview-badge { position: fixed; left: 12px; bottom: 90px; z-index: 200; padding: 8px 14px; border-radius: 12px; background: rgba(29, 43, 54, .88); color: #fff; font-size: 12px; font-weight: 700; line-height: 1.4; pointer-events: none; } .kz-preview-badge small { display: block; font-weight: 400; opacity: .8; font-size: 10.5px; } @media (min-width: 1024px) { .kz-preview-badge { bottom: 16px; } } /* ---------- page hero ---------- */ .kz-phero { position: relative; overflow: hidden; padding: calc(var(--hh) + 40px) 0 96px; background: linear-gradient(180deg, var(--blue-ll), #fff); } body.admin-bar .kz-phero, body.admin-bar .kz-article__head { padding-top: calc(var(--hh) + 72px); } @media (min-width: 1024px) { .kz-phero { padding: calc(var(--hh) + 64px) 0 120px; } } .kz-phero__bg .b1 { width: 40vmax; height: 40vmax; right: -12vmax; top: -18vmax; background: radial-gradient(circle, #8fd2f5, transparent 65%); } .kz-phero__bg .b2 { width: 30vmax; height: 30vmax; left: -10vmax; bottom: -14vmax; background: radial-gradient(circle, #a8e89b, transparent 65%); animation-delay: -8s; } .kz-phero .kz-wrap, .kz-article__head .kz-wrap { position: relative; } .kz-phero__title { font-size: clamp(1.7rem, 6vw, 3rem); margin-top: 18px !important; } .kz-phero__lead { margin: 18px 0 0 !important; max-width: 760px; font-weight: 700; color: var(--ink-2); } .kz-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 12px; color: var(--ink-3); } .kz-crumbs li + li::before { content: "/"; margin: 0 8px; opacity: .6; } .kz-crumbs a { color: var(--ink-2) !important; } .kz-crumbs a:hover { color: var(--blue) !important; } /* ---------- service page ---------- */ .kz-worry { background: #fff; } .kz-worry__list { list-style: none; display: grid; gap: 12px; } @media (min-width: 768px) { .kz-worry__list { grid-template-columns: 1fr 1fr; } } .kz-worry__list li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: var(--blue-ll); font-weight: 700; line-height: 1.7; } .kz-check { flex: none; width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 2px solid var(--blue); color: var(--blue); display: grid; place-items: center; } .kz-check .kz-ic { width: 18px; height: 18px; stroke-width: 3; stroke-dasharray: 30; stroke-dashoffset: 30; transition: stroke-dashoffset .6s var(--ease) .3s; } .kz-worry__list li.is-in .kz-check .kz-ic, .kz-no-io .kz-check .kz-ic { stroke-dashoffset: 0; } .kz-worry__answer { margin: 40px 0 0 !important; text-align: center; font-family: var(--f-head); font-weight: 900; font-size: clamp(1.25rem, 4vw, 1.9rem); line-height: 1.6; } .kz-worry__answer b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.2em; padding: 0 .1em; } .kz-intro { background: linear-gradient(180deg, #fff, var(--blue-ll)); } .kz-intro__grid { display: grid; gap: 40px; align-items: center; } @media (min-width: 1024px) { .kz-intro__grid { grid-template-columns: 1.1fr .9fr; gap: 70px; } } .kz-intro__text .kz-head { text-align: left; margin-bottom: 26px; } .kz-intro__text .kz-head__en span::before { display: none; } .kz-intro__text p { line-height: 2.05; } .kz-intro__visual { position: relative; min-height: 300px; display: grid; place-items: center; } .kz-intro__blob { position: absolute; width: min(90%, 420px); aspect-ratio: 1; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; background: var(--grad-soft); animation: kzMorph 12s ease-in-out infinite; } @keyframes kzMorph { 0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; transform: rotate(0); } 50% { border-radius: 63% 37% 37% 63% / 56% 62% 38% 44%; transform: rotate(20deg); } } .kz-intro__logo { position: relative; width: min(60%, 240px); } .kz-intro__car { position: relative; width: min(90%, 440px); } .kz-intro__visual--photos { grid-template-columns: 1fr 1fr; gap: 14px; } .kz-polaroid { margin: 0; padding: 8px 8px 34px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-l); position: relative; } .kz-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; } .kz-polaroid figcaption { position: absolute; left: 12px; bottom: 8px; font-size: 12px; font-weight: 700; color: var(--ink-2); } .kz-polaroid.p0 { rotate: -4deg; } .kz-polaroid.p1 { rotate: 3deg; margin-top: 30px; } .kz-polaroid.p2 { rotate: 2deg; margin-top: -20px; } .kz-polaroid.p3 { rotate: -3deg; margin-top: 10px; } .kz-steps { background: var(--blue-ll); } .kz-steps__list { list-style: none; display: grid; gap: 18px; margin-bottom: 40px !important; counter-reset: s; } @media (min-width: 900px) { .kz-steps__list { grid-template-columns: repeat(3, 1fr); gap: 26px; } } .kz-steps__list li { position: relative; padding: 30px 24px 26px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); text-align: center; } @media (min-width: 900px) { .kz-steps__list li:not(:last-child)::after { content: ""; position: absolute; right: -22px; top: 50%; width: 18px; height: 18px; border-top: 4px solid var(--green); border-right: 4px solid var(--green); transform: translateY(-50%) rotate(45deg); } } .kz-steps__no { position: absolute; left: 18px; top: 14px; font-family: var(--f-en); font-weight: 800; font-size: 42px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .kz-steps__icon { width: 74px; height: 74px; margin: 0 auto 14px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; } .kz-steps__icon .kz-ic { width: 34px; height: 34px; } .kz-steps__list h3 { font-size: 1.25rem; margin-bottom: 8px !important; } .kz-steps__list p { margin: 0 !important; font-size: 14px; color: var(--ink-2); text-align: left; } .kz-points__grid { display: grid; gap: 18px; } @media (min-width: 768px) { .kz-points__grid { grid-template-columns: 1fr 1fr; gap: 24px; } } .kz-point { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; padding: 30px 26px 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); } .kz-point__no { display: inline-flex; align-items: baseline; gap: 6px; font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: .14em; color: var(--blue); } .kz-point__no b { font-size: 34px; letter-spacing: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .kz-point__icon { position: absolute; right: 22px; top: 22px; width: 56px; height: 56px; border-radius: 18px; background: var(--mint); color: var(--green-d); display: grid; place-items: center; } .kz-point__icon .kz-ic { width: 28px; height: 28px; } .kz-point h3 { font-size: 1.25rem; margin: 6px 0 10px !important; padding-right: 60px; } .kz-point p { margin: 0 !important; font-size: 14.5px; color: var(--ink-2); } .kz-itemsgrid { background: linear-gradient(180deg, #fff, var(--blue-ll)); overflow: hidden; } .kz-itemsgrid__list { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 768px) { .kz-itemsgrid__list { grid-template-columns: repeat(3, 1fr); gap: 18px; } } @media (min-width: 1100px) { .kz-itemsgrid__list { grid-template-columns: repeat(5, 1fr); } } .kz-itemsgrid__list li { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; padding: 20px 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: center; transition: transform .4s var(--ease); } .kz-itemsgrid__list li:hover { transform: translateY(-5px); } .kz-itemsgrid__icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-l); color: var(--blue); transition: transform .5s var(--ease-b); } .kz-itemsgrid__list li:hover .kz-itemsgrid__icon { transform: rotate(-10deg) scale(1.1); background: var(--blue); color: #fff; } .kz-itemsgrid__icon .kz-ic { width: 28px; height: 28px; } .kz-itemsgrid__list h3 { font-size: 1rem; margin-bottom: 4px !important; } .kz-itemsgrid__list p { margin: 0 !important; font-size: 12.5px; color: var(--ink-2); line-height: 1.7; } .kz-blocks { background: #fff; } .kz-block { display: grid; gap: 18px; padding: 30px 24px; border-radius: var(--r); background: var(--blue-ll); scroll-margin-top: calc(var(--hh) + 24px); } .kz-block + .kz-block { margin-top: 20px; } @media (min-width: 768px) { .kz-block { grid-template-columns: 170px 1fr; gap: 34px; padding: 40px 44px; align-items: center; } } .kz-block__icon { display: flex; flex-direction: column; align-items: center; gap: 8px; } .kz-block__icon .kz-ic { width: 84px; height: 84px; padding: 20px; border-radius: 50%; background: var(--grad); color: #fff; box-shadow: var(--shadow); } .kz-block__icon span { font-family: var(--f-en); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--blue); text-align: center; } .kz-block h2 { font-size: 1.45rem; margin-bottom: 12px !important; } .kz-block p { color: var(--ink-2); } .kz-block p:last-child { margin-bottom: 0 !important; } .kz-can { background: var(--blue-ll); } .kz-can__grid { display: grid; gap: 16px; } @media (min-width: 640px) { .kz-can__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .kz-can__grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } } .kz-can__item { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; padding: 26px 22px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow); } .kz-can__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--grad); color: #fff; margin-bottom: 12px; } .kz-can__item h3 { font-size: 1.12rem; margin-bottom: 8px !important; } .kz-can__item p { margin: 0 !important; font-size: 14px; color: var(--ink-2); } .kz-flowsec { background: #fff; } .kz-flow { list-style: none; display: grid; gap: 16px; } @media (min-width: 768px) { .kz-flow { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .kz-flow { grid-template-columns: repeat(4, 1fr); gap: 22px; } } .kz-flow__step { position: relative; padding: 28px 22px 24px; border-radius: var(--r); background: var(--blue-ll); } .kz-flow__no { display: block; font-family: var(--f-en); font-weight: 800; font-size: 11px; letter-spacing: .16em; color: var(--blue); } .kz-flow__no b { display: block; font-size: 40px; line-height: 1; letter-spacing: 0; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .kz-flow__icon { position: absolute; right: 20px; top: 24px; width: 50px; height: 50px; border-radius: 50%; background: #fff; color: var(--green-d); display: grid; place-items: center; box-shadow: var(--shadow); } .kz-flow__step h3 { font-size: 1.12rem; margin: 14px 0 8px !important; } .kz-flow__step p { margin: 0 !important; font-size: 14px; color: var(--ink-2); } .kz-other { background: #fff; } .kz-other__grid { display: grid; gap: 14px; } @media (min-width: 768px) { .kz-other__grid { grid-template-columns: 1fr 1fr; } .kz-other__grid.is-3 { grid-template-columns: repeat(3, 1fr); } } .kz-other__card { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 22px 22px; border-radius: var(--r); background: var(--blue-ll); color: var(--ink) !important; transition: transform .4s var(--ease), box-shadow .4s; } .kz-other__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); } .kz-other__icon { flex: none; width: 56px; height: 56px; border-radius: 18px; background: var(--grad); color: #fff; display: grid; place-items: center; } .kz-other__body { flex: 1; display: flex; flex-direction: column; line-height: 1.4; } .kz-other__body small { font-family: var(--f-en); font-weight: 700; font-size: 11px; color: var(--blue); letter-spacing: .08em; } .kz-other__body b { font-family: var(--f-head); font-size: 1.08rem; } .kz-other__card > .kz-ic { color: var(--blue); transition: transform .3s; } .kz-other__card:hover > .kz-ic { transform: translateX(5px); } .kz-voices--sub { background: linear-gradient(180deg, #fff, var(--mint)); } /* ---------- company ---------- */ .kz-company__grid { display: grid; gap: 34px; } @media (min-width: 1024px) { .kz-company__grid { grid-template-columns: 1.3fr 1fr; gap: 54px; align-items: start; } } .kz-dl { margin: 0; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); background: #fff; } .kz-dl div { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); } @media (min-width: 640px) { .kz-dl div { grid-template-columns: 170px 1fr; } } .kz-dl div:last-child { border-bottom: 0; } .kz-dl dt { padding: 14px 20px 4px; font-weight: 700; color: var(--blue-d); background: transparent; font-size: 14px; } .kz-dl dd { margin: 0; padding: 0 20px 14px; } @media (min-width: 640px) { .kz-dl dt { padding: 18px 22px; background: var(--blue-ll); } .kz-dl dd { padding: 18px 22px; } } .kz-company__privacy { margin-top: 24px !important; } .kz-company__logo { width: 210px; margin: 0 auto 24px; padding: 20px; border-radius: 30px; background: #fff; box-shadow: var(--shadow); } .kz-company__map { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; } .kz-company__map iframe { width: 100%; height: 100%; border: 0; display: block; } /* ---------- contact / CF7 ---------- */ .kz-contact__quick { display: grid; gap: 16px; margin-bottom: 44px; } @media (min-width: 900px) { .kz-contact__quick { grid-template-columns: 1fr 1fr; gap: 22px; } } .kz-contact__qcard { padding: 24px 22px; border-radius: var(--r); background: var(--blue-ll); } .kz-contact__qcard.is-line { background: #eafbea; } .kz-contact__qh { display: flex; align-items: center; gap: 8px; font-weight: 900; font-family: var(--f-head); font-size: 1.05rem; } .kz-contact__qh .kz-ic { color: var(--blue); } .kz-contact__qcard.is-line .kz-contact__qh .kz-ic { color: var(--line-g); } .kz-contact__lrow { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .kz-contact__form { padding: 30px 18px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-l); border: 1px solid var(--line); } @media (min-width: 768px) { .kz-contact__form { padding: 50px 54px; } } .kz-contact__h { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: clamp(1.15rem, 3.6vw, 1.5rem); text-align: center; margin-bottom: 22px !important; } .kz-contact__h .kz-ic { color: var(--blue); } .kz-formsteps { list-style: none; display: flex; justify-content: center; gap: 8px; margin-bottom: 34px !important; } .kz-formsteps li { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--blue-ll); color: var(--ink-3); font-weight: 700; font-size: 13px; transition: .4s; } .kz-formsteps li b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-family: var(--f-en); font-size: 12px; } .kz-formsteps li.is-on { background: var(--blue); color: #fff; } .kz-formsteps li.is-on b { color: var(--blue); } .kz-formsteps li.is-done { background: var(--mint); color: var(--green-d); } .kz-contact__notes { margin-top: 26px; font-size: 13px; color: var(--ink-2); } .kz-contact__notes p { margin: 0 0 .4em !important; } .kz-form__row { display: grid; gap: 8px; padding: 18px 0; border-bottom: 1px dashed var(--line); } @media (min-width: 768px) { .kz-form__row { grid-template-columns: 240px 1fr; gap: 24px; align-items: start; } } .kz-form__label { display: flex; align-items: center; gap: 8px; margin: 0 !important; font-weight: 700; padding-top: 10px; line-height: 1.5; } .kz-form__label::before { content: "任意"; flex: none; font-size: 11px; padding: 2px 8px; border-radius: 6px; background: #eef2f5; color: var(--ink-3); } .kz-form__label.is-req::before { content: "必須"; background: var(--red); color: #fff; } .kz-form__field small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); line-height: 1.7; } .kz-form__name { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .kz-form__name label, .kz-form__addr label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); } .kz-form__addr { display: grid; gap: 12px; } @media (min-width: 640px) { .kz-form__addr { grid-template-columns: 1fr 1fr; } .kz-form__addr .is-wide { grid-column: span 2; } } .kz-form__addr .zip-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; } .kz-cf7 input[type="text"], .kz-cf7 input[type="tel"], .kz-cf7 input[type="email"], .kz-cf7 select, .kz-cf7 textarea { width: 100%; font: inherit; font-size: 16px; color: var(--ink); padding: 13px 16px; border-radius: 12px; border: 2px solid var(--line); background: #f8fbfd; transition: border-color .25s, box-shadow .25s, background .25s; } .kz-cf7 textarea { min-height: 200px; resize: vertical; line-height: 1.8; } .kz-cf7 input:focus, .kz-cf7 select:focus, .kz-cf7 textarea:focus { outline: 0; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(0, 124, 186, .15); } .kz-cf7 .wpcf7-form-control-wrap { display: block; } .kz-cf7 .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; } .kz-cf7 .wpcf7-list-item { margin: 0; } .kz-cf7 .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-weight: 700; font-size: 14px; transition: .25s; } .kz-cf7 .wpcf7-list-item input { width: 18px; height: 18px; accent-color: var(--green); } .kz-cf7 .wpcf7-list-item label:has(input:checked) { border-color: var(--green); background: var(--mint); color: var(--green-d); } .kz-cf7 .wpcf7-not-valid-tip { display: block; margin-top: 6px; color: var(--red); font-size: 13px; font-weight: 700; } .kz-cf7 .wpcf7-not-valid { border-color: var(--red) !important; background: #fff5f5 !important; } .kz-cf7 .wpcf7-response-output { margin: 24px 0 0; padding: 16px 20px; border-radius: 14px; border: 2px solid var(--blue); font-weight: 700; } .kz-cf7 .wpcf7-response-output:empty, .kz-cf7.init .wpcf7-response-output { display: none; } .kz-cf7.invalid .wpcf7-response-output, .kz-cf7.unaccepted .wpcf7-response-output { border-color: var(--red); color: var(--red); background: #fff5f5; } .kz-cf7.sent .wpcf7-response-output { border-color: var(--green); color: var(--green-d); background: var(--mint); } .kz-cf7 .hidden-fields-container { display: none !important; border: 0; padding: 0; margin: 0; } .wpcf7 .screen-reader-response { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); margin: -1px; padding: 0; border: 0; } .kz-cf7 .wpcf7-spinner { display: none; } .kz-cf7.submitting .wpcf7-spinner { display: inline-block; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--blue); animation: kzSpin .8s linear infinite; vertical-align: middle; margin-left: 10px; } .kz-zipbtn { flex: none; height: 50px; padding: 0 18px; border-radius: 12px; border: 2px solid var(--blue); background: #fff; color: var(--blue); font-weight: 700; font-size: 14px; } .kz-zipbtn:hover { background: var(--blue); color: #fff; } .kz-zipmsg { font-size: 12.5px; color: var(--ink-3); } .kz-form__privacy { margin: 22px 0 0 !important; font-size: 13px; text-align: center; color: var(--ink-2); } .kz-form__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; } .kz-cf7 .kz-btn--submit, .kz-btn--submit { min-height: 64px; padding: 0 46px; border-radius: 999px; border: 0; background: var(--green); color: #fff !important; font-weight: 900; font-size: 17px; font-family: var(--f-head); letter-spacing: .08em; box-shadow: 0 16px 28px -14px rgba(0, 150, 0, .7); cursor: pointer; transition: transform .3s var(--ease-b), box-shadow .3s, background .3s; } .kz-cf7 .kz-btn--submit:hover, .kz-btn--submit:hover { background: var(--green-d); transform: translateY(-2px); } .kz-btn--back { min-height: 64px; padding: 0 30px; border-radius: 999px; border: 2px solid var(--line); background: #fff; color: var(--ink-2); font-weight: 700; } .kz-btn--back:hover { border-color: var(--blue); color: var(--blue); } .kz-confirm__lead { text-align: center; font-weight: 700; } .kz-confirm__list { margin: 20px 0 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); } .kz-confirm__list div { display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); } @media (min-width: 640px) { .kz-confirm__list div { grid-template-columns: 220px 1fr; } } .kz-confirm__list div:last-child { border-bottom: 0; } .kz-confirm__list dt { padding: 12px 18px 2px; font-weight: 700; font-size: 13.5px; color: var(--blue-d); } .kz-confirm__list dd { margin: 0; padding: 0 18px 12px; white-space: pre-wrap; word-break: break-word; } @media (min-width: 640px) { .kz-confirm__list dt { background: var(--blue-ll); padding: 14px 18px; } .kz-confirm__list dd { padding: 14px 18px; } } .kz-cf7.is-confirm .kz-form__input { display: none; } .kz-cf7:not(.is-confirm) .kz-confirm { display: none; } .kz-thanks { text-align: center; padding: 30px 10px; } .kz-thanks .kz-paw { width: 60px; height: 60px; color: var(--leaf); animation: kzBob 2s ease-in-out infinite; } .kz-thanks h3 { font-size: 1.4rem; margin: 10px 0 12px !important; } /* ---------- doc / prose ---------- */ .kz-doc__intro { padding: 24px 26px; border-radius: var(--r); background: var(--blue-ll); margin-bottom: 36px !important; } .kz-doc__item { margin-bottom: 32px; } .kz-doc__item h2 { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; margin-bottom: 12px !important; padding-bottom: 10px; border-bottom: 2px solid var(--blue-l); } .kz-doc__item h2 span { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--grad); color: #fff; font-family: var(--f-en); font-size: 14px; } .kz-doc__item ul { padding-left: 1.4em; } .kz-doc__item li { margin-bottom: .3em; } .kz-article__head { position: relative; overflow: hidden; padding: calc(var(--hh) + 36px) 0 40px; background: linear-gradient(180deg, var(--blue-ll), #fff); } .kz-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 12px !important; font-size: 13px; color: var(--ink-3); font-family: var(--f-en); font-weight: 600; } .kz-article__meta time { display: inline-flex; align-items: center; gap: 4px; } .kz-article__meta .kz-ic { width: 15px; height: 15px; } .kz-article__title { font-size: clamp(1.45rem, 4.6vw, 2.25rem); line-height: 1.5; } .kz-article__eye { margin: 0 0 34px; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-l); } .kz-article__eye img { width: 100%; display: block; max-height: 620px; object-fit: cover; } .kz-prose { font-size: 16px; line-height: 2; padding-bottom: 20px; overflow-wrap: anywhere; } .kz-prose > * + * { margin-top: 1.2em; } .kz-prose h2 { font-size: clamp(1.3rem, 3.6vw, 1.6rem); margin: 2.4em 0 1em !important; padding: 16px 20px; border-radius: 16px; background: var(--grad); color: #fff; line-height: 1.5; } .kz-prose h3 { font-size: 1.2rem; margin: 2em 0 .8em !important; padding: 4px 0 8px 16px; border-left: 6px solid var(--green); border-bottom: 1px solid var(--line); } .kz-prose h4 { font-size: 1.05rem; margin: 1.6em 0 .6em !important; color: var(--blue-d); } .kz-prose ul, .kz-prose ol { padding-left: 1.5em; } .kz-prose li { margin-bottom: .4em; } .kz-prose img { border-radius: 14px; height: auto; } .kz-prose figure { margin: 1.6em 0; } .kz-prose figcaption { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 6px; } .kz-prose a { text-decoration: underline; text-underline-offset: 3px; } .kz-prose strong { background: linear-gradient(transparent 62%, rgba(255, 225, 74, .7) 62%); } .kz-prose blockquote { margin: 1.6em 0; padding: 18px 22px; border-radius: 14px; background: var(--blue-ll); border-left: 5px solid var(--blue); } .kz-prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; display: block; overflow-x: auto; } .kz-prose th, .kz-prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; vertical-align: top; } .kz-prose th { background: var(--blue-ll); white-space: nowrap; } .kz-prose .kz-box { padding: 20px 22px; border-radius: 16px; background: var(--mint); border: 2px solid var(--green); } .kz-prose .kz-box.is-blue { background: var(--blue-ll); border-color: var(--blue); } .kz-prose .kz-box.is-warn { background: #fff8e6; border-color: #f0b400; } .kz-prose .kz-box > :first-child { margin-top: 0; } .kz-prose .kz-box > :last-child { margin-bottom: 0; } .kz-prose .kz-box-title { font-weight: 900; font-family: var(--f-head); margin-bottom: .4em !important; } .kz-toc { margin: 0 0 40px; padding: 22px 24px; border-radius: var(--r); background: var(--blue-ll); border: 1px solid var(--line); } .kz-toc__h { display: flex; align-items: center; gap: 8px; font-family: var(--f-head); font-weight: 900; font-size: 1.1rem; margin-bottom: 10px !important; } .kz-toc__h .kz-ic { color: var(--blue); } .kz-toc ol { list-style: none; counter-reset: toc; } .kz-toc > ol > li { counter-increment: toc; padding: 6px 0; border-bottom: 1px dashed var(--line); } .kz-toc > ol > li:last-child { border-bottom: 0; } .kz-toc > ol > li > a::before { content: counter(toc, decimal-leading-zero); font-family: var(--f-en); font-weight: 800; color: var(--green-d); margin-right: 10px; } .kz-toc a { color: var(--ink) !important; font-weight: 700; font-size: 14.5px; } .kz-toc a:hover { color: var(--blue) !important; } .kz-toc ol ol { padding: 4px 0 0 34px; } .kz-toc ol ol a { font-weight: 400; font-size: 13.5px; color: var(--ink-2) !important; } .kz-colcta { margin: 50px 0 30px; padding: 30px 22px; border-radius: 28px; background: linear-gradient(160deg, var(--blue-ll), var(--mint)); border: 2px solid var(--blue-l); } @media (min-width: 768px) { .kz-colcta { padding: 40px 44px; } } .kz-colcta__head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; } .kz-colcta__head img { width: 86px; flex: none; } .kz-colcta__en { margin: 0 !important; font-family: var(--f-en); font-weight: 800; letter-spacing: .2em; font-size: 12px; color: var(--blue); } .kz-colcta__h { margin: 0 !important; font-family: var(--f-head); font-weight: 900; font-size: clamp(1.05rem, 3.4vw, 1.35rem); line-height: 1.55; } .kz-colcta__points { list-style: none; display: grid; gap: 6px; margin-bottom: 20px !important; } @media (min-width: 640px) { .kz-colcta__points { grid-template-columns: 1fr 1fr; } } .kz-colcta__points li { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; } .kz-colcta__points .kz-ic { color: var(--green); stroke-width: 3; } .kz-colcta__btns { display: flex; flex-wrap: wrap; gap: 10px; } .kz-colcta__btns .kz-btn { flex: 1 1 240px; } .kz-colcta__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .kz-colcta__links a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fff; font-weight: 700; font-size: 13.5px; color: var(--ink) !important; } .kz-colcta__links .kz-ic { color: var(--green); width: 16px; height: 16px; } .kz-colcta__by { margin: 18px 0 0 !important; font-size: 12px; color: var(--ink-3); } .kz-pn { display: grid; gap: 12px; margin: 40px 0 10px; } @media (min-width: 768px) { .kz-pn { grid-template-columns: 1fr 1fr; } } .kz-pn a { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: var(--blue-ll); color: var(--ink) !important; font-weight: 700; font-size: 14px; line-height: 1.5; } .kz-pn a:hover { background: var(--blue-l); } .kz-pn small { display: block; color: var(--blue); font-size: 11.5px; } .kz-pn .is-next { justify-content: flex-end; text-align: right; grid-column: -2; } .kz-related { background: var(--blue-ll); } .kz-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px !important; } .kz-chips a { display: inline-block; padding: 8px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink) !important; font-weight: 700; font-size: 14px; } .kz-chips a[aria-current], .kz-chips a:hover { background: var(--blue); color: #fff !important; border-color: var(--blue); } .kz-pager ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 46px !important; } .kz-pager a, .kz-pager span { min-width: 46px; height: 46px; padding: 0 10px; display: grid; place-items: center; border-radius: 14px; background: #fff; box-shadow: var(--shadow); color: var(--ink) !important; font-family: var(--f-en); font-weight: 700; } .kz-pager .current { background: var(--grad); color: #fff !important; } .kz-pager a:hover { background: var(--blue); color: #fff !important; } .kz-empty { text-align: center; padding: 40px 0; color: var(--ink-2); } .kz-empty .kz-paw { width: 56px; height: 56px; color: var(--leaf); } .kz-contact__fallback { text-align: center; font-weight: 700; } /* ---------- reveal ---------- */ .kz-js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); } .kz-js [data-reveal].is-in { opacity: 1; transform: none; } .kz-js .kz-hero__text [data-reveal] { transition-delay: .55s; } .kz-js .kz-hero__cta[data-reveal] { transition-delay: 1.2s; } .kz-js .kz-hero__area[data-reveal] { transition-delay: 1.35s; } /* ---------- view transitions ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: kzVtOut .28s ease both; } ::view-transition-new(root) { animation: kzVtIn .42s var(--ease) both; } @keyframes kzVtOut { to { opacity: 0; transform: translateY(-10px); } } @keyframes kzVtIn { from { opacity: 0; transform: translateY(14px); } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .kz-js [data-reveal], .kz-js [data-split] .kz-char, .kz-js .kz-hero__badges li, .kz-js .kz-hero__photo { opacity: 1 !important; transform: none !important; filter: none !important; scale: 1 !important; } .kz-js [data-wipe] img { clip-path: none !important; } .kz-drive__car { transform: none !important; } .kz-ticker__track, .kz-items__track, .kz-tape__track { animation: none !important; } .kz-items__rail { overflow-x: auto; } @view-transition { navigation: none; } } /* ---------- 幅の調整（グリッドの子が内容で広がらないように） ---------- */ .kz-hero__inner > *, .kz-reasons__grid > *, .kz-intro__grid > *, .kz-company__grid > *, .kz-area__inner > *, .kz-cta__inner > *, .kz-footer__grid > * { min-width: 0; } @media (max-width: 639px) { .kz-hero__badges li { flex-direction: column; justify-content: center; text-align: center; gap: 6px; padding: 10px 4px; font-size: 11.5px; letter-spacing: 0; } .kz-hero__badges .kz-ic { width: 28px; height: 28px; } .kz-hero__cta .kz-btn { width: 100%; } .kz-stack__no { font-size: 40px; right: 14px; top: 8px; } .kz-stack__inner h3 { padding-right: 44px; font-size: 1.15rem; } .kz-stack__inner { grid-template-columns: 1fr; padding: 22px 20px; } .kz-stack__icon { grid-row: auto; width: 52px; height: 52px; } .kz-stack__inner p { grid-column: 1; } .kz-more { padding: 12px 20px; font-size: 14px; } .kz-btn__body b { font-size: 16px; } .kz-btn--tel b { font-size: 21px; } } .kz-voice__rate dt { white-space: nowrap; letter-spacing: 0; font-size: 10.5px; } .kz-intro__text .kz-head__ja { font-size: clamp(1.5rem, 3vw, 2.15rem); } .kz-form__addr .zip-row label { flex: 0 1 220px; } .kz-form__addr .zip-row .kz-zipmsg { flex: 1 1 100%; } @media (min-width: 640px) { .kz-form__addr .zip-row .kz-zipmsg { flex: 1 1 auto; padding-bottom: 14px; } } .kz-btn__body b { white-space: nowrap; } .kz-colcta__btns .kz-btn { flex: 1 1 250px; padding-right: 18px; }