@charset "UTF-8"; /* ========================================================================== NAKAZAKI INDUSTRY — 中崎工業 接頭辞: nz- （WordPress・プラグインのCSSと衝突させないため） 方向性：白基調・日本語見出しが主役・暖色アクセント・フェード主体 ========================================================================== */ /* -------------------------------------------------------------- 1. デザイントークン -------------------------------------------------------------- */ :root { /* 面 */ --nz-bg: #ffffff; --nz-bg-2: #f6f3ef; /* 温かみのあるオフホワイト */ --nz-bg-3: #ece7e0; --nz-ink: #16181c; /* 濃い背景が必要な箇所だけ */ --nz-line: #ddd6cd; /* 文字 */ --nz-fg: #1a1c20; --nz-fg-mid: #5b5f66; --nz-fg-dim: #8d9199; --nz-on-ink: #f7f5f2; /* アクセント（ロゴのオレンジ由来） */ --nz-acc: #e2541c; --nz-acc-soft: #fbeee7; --nz-earth: #a8875f; /* タイポ：日本語が主役、英語は小さなラベル */ --nz-ff: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; --nz-fs-hero: clamp(2.05rem, 5.3vw, 4.7rem); --nz-fs-h2: clamp(1.7rem, 3.4vw, 3rem); --nz-fs-h3: clamp(1.1rem, 1.7vw, 1.4rem); --nz-fs-body: clamp(0.94rem, 1.02vw, 1.02rem); --nz-fs-small: clamp(0.8rem, 0.9vw, 0.88rem); --nz-fs-label: 0.68rem; /* 余白 */ --nz-gut: clamp(1.25rem, 5vw, 5.5rem); --nz-sec: clamp(5.5rem, 13vw, 12rem); --nz-maxw: 1360px; /* 動き */ --nz-e-out: cubic-bezier(0.22, 1, 0.36, 1); --nz-e-io: cubic-bezier(0.65, 0, 0.35, 1); --nz-header-h: 88px; --nz-r: 4px; /* 画面高。main.js が px で上書きし、幅が変わったときだけ更新する。 svh/dvh を直接使うと、アプリ内ブラウザ（LINE等）のバー開閉で WebView ごとリサイズされ、レイアウトが指の下でズレる */ --nz-vh: 1svh; } @media (max-width: 767px) { :root { --nz-header-h: 62px; } } /* -------------------------------------------------------------- 2. リセット -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--nz-bg); color: var(--nz-fg); font-family: var(--nz-ff); font-size: var(--nz-fs-body); line-height: 2.05; letter-spacing: 0.045em; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } ::selection { background: var(--nz-acc); color: #fff; } /* -------------------------------------------------------------- 3. 共通パーツ -------------------------------------------------------------- */ .nz-wrap { width: 100%; max-width: var(--nz-maxw); margin-inline: auto; padding-inline: var(--nz-gut); } .nz-sec { padding-block: var(--nz-sec); position: relative; } .nz-sec--tint { background: var(--nz-bg-2); } /* 英語は小さなラベルに徹する */ .nz-label { display: inline-flex; align-items: center; gap: 0.8em; font-size: var(--nz-fs-label); font-weight: 700; letter-spacing: 0.24em; color: var(--nz-acc); margin-bottom: 1.4em; } .nz-label::before { content: ""; width: 26px; height: 1px; background: var(--nz-acc); flex: none; } /* セクション見出し行：左に［ラベル＋見出し］、右にボタン。 BUSINESSを作り替えたときに .nz-biz__head を消してWORKSが崩れたので、共通化した */ .nz-sechead { display: flex; flex-wrap: wrap; gap: 1.4rem 2.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(2.4rem, 5vw, 4rem); } .nz-sechead__body { min-width: min(100%, 18em); } .nz-sechead .nz-label { margin-bottom: 1em; } .nz-sechead .nz-btn { flex: none; } @media (max-width: 599px) { .nz-sechead { align-items: flex-start; } } .nz-h2 { font-size: var(--nz-fs-h2); font-weight: 700; line-height: 1.55; letter-spacing: 0.02em; } .nz-h2 em { font-style: normal; color: var(--nz-acc); } .nz-lead { color: var(--nz-fg-mid); max-width: 34em; } /* 日本語は em。ch は半角幅基準で半分になる */ /* ボタン */ .nz-btn { position: relative; display: inline-flex; align-items: center; gap: 1.2em; padding: 1.1em 2.3em; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; border: 1px solid var(--nz-fg); color: var(--nz-fg); border-radius: 999px; overflow: hidden; isolation: isolate; transition: color 0.45s var(--nz-e-out), border-color 0.45s var(--nz-e-out); } .nz-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--nz-fg); transform: scaleX(0); transform-origin: right center; transition: transform 0.55s var(--nz-e-out); } .nz-btn:hover { color: #fff; } .nz-btn:hover::before { transform: scaleX(1); transform-origin: left center; } .nz-btn__arw { width: 1.5em; height: 1px; background: currentColor; position: relative; flex: none; } .nz-btn__arw::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); } .nz-btn--acc { border-color: var(--nz-acc); background: var(--nz-acc); color: #fff; } .nz-btn--acc::before { background: var(--nz-fg); } .nz-btn--acc:hover { border-color: var(--nz-fg); } .nz-btn--ghost-light { border-color: rgba(255,255,255,0.5); color: #fff; } .nz-btn--ghost-light::before { background: #fff; } .nz-btn--ghost-light:hover { color: var(--nz-fg); border-color: #fff; } /* -------------------------------------------------------------- 4. ローダー（TOPのみ） 背景は別レイヤー（.nz-loader__bg）にする。ローダー自体を透過させると ヒーローへ運ぶ最中のコピーまで一緒に消えてしまう -------------------------------------------------------------- */ .nz-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: hidden; } /* 面はベタ塗り→すりガラス→透明の3段階。色の濃さと背景ぼかしを カスタムプロパティで持たせているのは、ベンダー接頭辞つきの -webkit-backdrop-filter も同じ値で追随させるため （GSAPに backdropFilter を直接触らせると接頭辞側が取り残される） */ .nz-loader__bg { position: absolute; inset: 0; --nz-veil: 1; --nz-bd: 0px; background: rgb(22 24 28 / var(--nz-veil)); -webkit-backdrop-filter: blur(var(--nz-bd)); backdrop-filter: blur(var(--nz-bd)); } /* JSが無いときは出さない（明けられずページを覆ったままになるため） */ html:not(.js) .nz-loader { display: none; } .nz-loader__stage { position: relative; display: grid; justify-items: center; gap: clamp(2.2rem, 5.5vw, 3.6rem); padding-inline: var(--nz-gut); } .nz-loader__logo { width: min(46vw, 210px); } /* ヒーローと同じ字面のまま平行移動させたいので、幅は内容ぴったり・左揃え */ .nz-loader__copy { color: #fff; width: max-content; max-width: calc(100vw - var(--nz-gut) * 2); text-align: left; } /* clip-path のワイプ幅を「その行の文字幅」に合わせる。 親の max-content 幅のままだと、短い行で拭き終わったあとに空走が出る */ .nz-loader__copy .nz-hero__kicker, .nz-loader__copy .nz-line > span { width: max-content; } /* -------------------------------------------------------------- 5. ヘッダー -------------------------------------------------------------- */ .nz-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 500; height: var(--nz-header-h); display: flex; align-items: center; padding-inline: var(--nz-gut); background: rgba(255,255,255,0); transition: background 0.45s var(--nz-e-out), box-shadow 0.45s var(--nz-e-out); } .nz-header.is-solid { background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--nz-line); } /* ヒーロー上（透過時）はロゴを白抜きにする */ .nz-nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.2rem, 2.3vw, 2.3rem); } .nz-nav__list { display: flex; gap: clamp(1.2rem, 2.3vw, 2.3rem); } .nz-nav__link { position: relative; font-size: 0.84rem; font-weight: 500; letter-spacing: 0.08em; padding-block: 0.5em; transition: color 0.35s; } .nz-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0.1em; width: 100%; height: 1px; background: var(--nz-acc); transform: scaleX(0); transform-origin: right center; transition: transform 0.45s var(--nz-e-out); } .nz-nav__link:hover::after, .nz-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; } .nz-header__cta { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.95em 1.9em; background: var(--nz-acc); color: #fff; border-radius: 999px; transition: background 0.4s; } .nz-header__cta:hover { background: var(--nz-fg); } .nz-burger { display: none; width: 40px; height: 40px; position: relative; margin-left: auto; z-index: 2; } .nz-burger span { position: absolute; left: 8px; width: 24px; height: 1.5px; background: var(--nz-fg); transition: transform 0.45s var(--nz-e-out), background 0.35s; } .nz-burger span:nth-child(1) { top: 16px; } .nz-burger span:nth-child(2) { top: 23px; } .nz-burger.is-open span { background: var(--nz-fg) !important; } .nz-burger.is-open span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .nz-burger.is-open span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } .nz-drawer { position: fixed; inset: 0; z-index: 400; background: var(--nz-bg); display: flex; flex-direction: column; justify-content: center; padding: var(--nz-header-h) var(--nz-gut) 3rem; clip-path: inset(0 0 100% 0); transition: clip-path 0.75s var(--nz-e-out); overflow-y: auto; } .nz-drawer.is-open { clip-path: inset(0 0 0 0); } .nz-drawer__list li { border-bottom: 1px solid var(--nz-line); } .nz-drawer__link { display: flex; align-items: baseline; gap: 1rem; padding: 1.15rem 0; font-size: 1.1rem; font-weight: 700; } .nz-drawer__link small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; color: var(--nz-acc); } @media (max-width: 1023px) { .nz-nav { display: none; } .nz-burger { display: block; } } /* -------------------------------------------------------------- 6. ヒーロー -------------------------------------------------------------- */ .nz-hero { position: relative; height: min(calc(var(--nz-vh) * 100), 900px); min-height: 520px; overflow: hidden; } .nz-hero__media { position: absolute; inset: 0; overflow: hidden; } .nz-hero__media img { width: 100%; height: 112%; object-fit: cover; } .nz-hero__media::after { content: ""; position: absolute; inset: 0; /* 事務所写真は右側にグラフィティがあるので、左を濃くして文字を読ませ、右は見せる */ background: linear-gradient(96deg, rgba(16,18,22,0.82) 0%, rgba(16,18,22,0.62) 34%, rgba(16,18,22,0.16) 62%, rgba(16,18,22,0.05) 100%), linear-gradient(180deg, rgba(16,18,22,0.34) 0%, rgba(16,18,22,0) 30%, rgba(16,18,22,0.42) 100%); } .nz-hero__inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; max-width: var(--nz-maxw); margin-inline: auto; padding: var(--nz-header-h) var(--nz-gut) 0; color: #fff; } .nz-hero__kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.32em; margin-bottom: 1.8em; color: rgba(255,255,255,0.9); } .nz-hero__ttl { font-size: var(--nz-fs-hero); font-weight: 700; line-height: 1.42; letter-spacing: 0.02em; text-shadow: 0 2px 24px rgba(0,0,0,0.28); } .nz-hero__ttl em { font-style: normal; color: #ffb28a; } .nz-hero__desc { margin-top: 1.7rem; font-size: clamp(0.86rem, 1vw, 0.97rem); line-height: 2.2; max-width: 27em; color: rgba(255,255,255,0.88); } .nz-hero__scroll { position: absolute; left: var(--nz-gut); bottom: 2.2rem; z-index: 3; display: flex; align-items: center; gap: 0.9rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.24em; color: rgba(255,255,255,0.8); } .nz-hero__scroll i { display: block; width: 60px; height: 1px; background: rgba(255,255,255,0.35); position: relative; overflow: hidden; } .nz-hero__scroll i::after { content: ""; position: absolute; inset: 0; background: #fff; animation: nz-scrl 2.4s var(--nz-e-io) infinite; } @keyframes nz-scrl { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } } /* -------------------------------------------------------------- 7. ABOUT -------------------------------------------------------------- */ .nz-about__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 6vw, 5.5rem); align-items: center; } @media (min-width: 900px) { .nz-about__grid { grid-template-columns: 1fr 1.05fr; } } .nz-about__fig { position: relative; overflow: hidden; aspect-ratio: 4/3; border-radius: var(--nz-r); } .nz-about__fig img { width: 100%; height: 114%; object-fit: cover; } .nz-about__body p + p { margin-top: 1.6em; } .nz-about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2.4rem); margin-top: clamp(3rem, 7vw, 5.5rem); } .nz-about__stat { border-top: 2px solid var(--nz-fg); padding-top: 1.2rem; } .nz-about__stat dt { font-size: var(--nz-fs-label); font-weight: 700; letter-spacing: 0.2em; color: var(--nz-fg-dim); } .nz-about__stat dd { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; line-height: 1.2; margin-top: 0.3em; letter-spacing: 0.01em; } .nz-about__stat dd small { font-size: 0.38em; color: var(--nz-fg-mid); margin-left: 0.35em; letter-spacing: 0.06em; } @media (max-width: 599px) { .nz-about__stats { grid-template-columns: 1fr; gap: 0; } .nz-about__stat { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-top-width: 1px; } .nz-about__stat dd { margin-top: 0; font-size: 1.7rem; } } /* -------------------------------------------------------------- 8. BUSINESS（背景固定＋カードが流れる） 背景は position:sticky で画面に貼り付け、カードはセクション内に 絶対配置して通常速度で通過させる。ScrollTrigger の pin は使わない （pin はレイアウトを差し替えるため、下の要素の位置ズレを招きやすい） -------------------------------------------------------------- */ .nz-bizflow { --nz-bf-n: 4; /* カード枚数 */ --nz-bf-step: calc(var(--nz-vh) * 64); /* カード1枚あたりのスクロール量 */ position: relative; height: calc(var(--nz-vh) * 100 + var(--nz-bf-n) * var(--nz-bf-step) + var(--nz-vh) * 34); background: var(--nz-ink); } .nz-bizflow__sticky { position: sticky; top: 0; height: calc(var(--nz-vh) * 100); overflow: hidden; } .nz-bizflow__bg { position: absolute; inset: 0; overflow: hidden; } .nz-bizflow__bg-imgs { position: absolute; inset: 0; will-change: transform; } .nz-bizflow__bg-imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity; } .nz-bizflow__bg-imgs img:first-child { opacity: 1; } .nz-bizflow__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 50%, rgba(16,18,22,0.62) 0%, rgba(16,18,22,0.34) 60%, rgba(16,18,22,0.28) 100%), linear-gradient(180deg, rgba(16,18,22,0.34) 0%, rgba(16,18,22,0.12) 38%, rgba(16,18,22,0.46) 100%); } .nz-bizflow__head { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 62vw); z-index: 2; color: #fff; text-align: center; } /* 見出しは動かさない。中央寄せの transform を GSAP に触らせないため、 将来アニメを足すときも外側ではなくこの内側の要素を対象にすること */ .nz-bizflow__head-inner { } .nz-bizflow__en { font-size: clamp(2.6rem, 7.6vw, 6.6rem); font-weight: 700; line-height: 1; letter-spacing: 0.01em; color: rgba(255,255,255,0.92); text-shadow: 0 2px 30px rgba(0,0,0,0.3); } .nz-bizflow__jp { margin-top: 0.7rem; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.28em; color: rgba(255,255,255,0.82); } .nz-bizflow__note { margin-top: 1.5rem; margin-inline: auto; max-width: 25em; font-size: var(--nz-fs-small); line-height: 2.1; color: rgba(255,255,255,0.82); } /* 流れるカード */ .nz-bizflow__card { /* display:block は必須。a は既定でインラインなので、position:relative に戻る モバイル時に背景もマージンも効かなくなる（absolute がブロック化していただけ） */ display: block; position: absolute; z-index: 3; width: clamp(238px, 24vw, 330px); background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 22px 60px rgba(10,12,16,0.28); top: calc(var(--nz-vh) * 86 + var(--i) * var(--nz-bf-step)); transition: box-shadow 0.5s var(--nz-e-out), transform 0.5s var(--nz-e-out); } .nz-bizflow__card:nth-child(odd) { right: clamp(1.25rem, 9vw, 10rem); } .nz-bizflow__card:nth-child(even) { left: clamp(1.25rem, 9vw, 10rem); } .nz-bizflow__card:hover { transform: translateY(-6px); box-shadow: 0 28px 70px rgba(10,12,16,0.36); } .nz-bizflow__card-body { padding: 1.5rem 1.5rem 0.2rem; } .nz-bizflow__card-num { font-size: var(--nz-fs-label); font-weight: 700; letter-spacing: 0.2em; color: var(--nz-acc); } .nz-bizflow__card-ttl { margin-top: 0.5em; font-size: 1.12rem; font-weight: 700; letter-spacing: 0.03em; } .nz-bizflow__card-txt { margin-top: 0.7em; font-size: 0.8rem; line-height: 1.95; color: var(--nz-fg-mid); } .nz-bizflow__card-media { margin-top: 1.3rem; aspect-ratio: 16/10; overflow: hidden; } .nz-bizflow__card-media img { width: 100%; height: 100%; object-fit: cover; } .nz-bizflow__card-more { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.05rem 1.5rem; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.12em; border-top: 1px solid var(--nz-line); } .nz-bizflow__card-more i { width: 1.4em; height: 1px; background: currentColor; position: relative; flex: none; } .nz-bizflow__card-more i::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 5px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: translateY(-50%) rotate(45deg); } .nz-bizflow__card:hover .nz-bizflow__card-more { color: var(--nz-acc); } /* セクション末尾のリンク */ .nz-bizflow__cta { margin-top: 2.2rem; } /* 狭い画面では固定をやめて素直に積む */ @media (max-width: 899px) { .nz-bizflow { height: auto; } .nz-bizflow__sticky { position: relative; height: calc(var(--nz-vh) * 62); } .nz-bizflow__head { top: auto; bottom: clamp(1.6rem, 5vw, 3rem); left: 50%; transform: translateX(-50%); width: calc(100% - var(--nz-gut) * 2); } .nz-bizflow__card { position: relative; top: auto; left: auto !important; right: auto !important; width: auto; margin: 0 var(--nz-gut) 1.6rem; box-shadow: 0 12px 30px rgba(10,12,16,0.2); } .nz-bizflow__cards { padding-top: clamp(2rem, 8vw, 3.4rem); padding-bottom: 1.4rem; } .nz-bizflow__cta { margin-top: 1.6rem; } } /* -------------------------------------------------------------- 9. WORKS（通常グリッド） -------------------------------------------------------------- */ .nz-works__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: clamp(1.8rem, 3.4vw, 3rem); } .nz-card { display: block; } .nz-card__media { position: relative; aspect-ratio: 3/2; overflow: hidden; border-radius: var(--nz-r); background: var(--nz-bg-3); } .nz-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--nz-e-out); } .nz-card:hover .nz-card__media img { transform: scale(1.05); } .nz-card__cat { position: absolute; left: 0; top: 0; background: rgba(255,255,255,0.94); color: var(--nz-fg); font-size: var(--nz-fs-label); font-weight: 700; letter-spacing: 0.12em; padding: 0.65em 1.2em; } .nz-card__ttl { margin-top: 1.05em; font-size: 1rem; font-weight: 700; line-height: 1.75; } .nz-card__date { margin-top: 0.4em; font-size: 0.76rem; letter-spacing: 0.1em; color: var(--nz-fg-dim); } /* -------------------------------------------------------------- 10. NEWS -------------------------------------------------------------- */ .nz-news__list { border-top: 1px solid var(--nz-line); } .nz-news__item { border-bottom: 1px solid var(--nz-line); } .nz-news__link { display: grid; grid-template-columns: 1fr; gap: 0.4rem 1.8rem; padding: clamp(1.3rem, 3vw, 1.9rem) 0; transition: color 0.4s; } @media (min-width: 760px) { .nz-news__link { grid-template-columns: 7.5rem 8rem 1fr; align-items: center; } } .nz-news__link:hover { color: var(--nz-acc); } .nz-news__date { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--nz-fg-dim); } .nz-news__cat { justify-self: start; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; color: var(--nz-acc); background: var(--nz-acc-soft); padding: 0.35em 1.1em; border-radius: 999px; } .nz-news__ttl { font-size: 0.96rem; line-height: 1.85; } /* -------------------------------------------------------------- 11. 全幅CTA（濃い背景はここだけ） -------------------------------------------------------------- */ .nz-cta { position: relative; overflow: hidden; } .nz-cta__media { position: absolute; inset: 0; } .nz-cta__media img { width: 100%; height: 114%; object-fit: cover; } .nz-cta__media::after { content: ""; position: absolute; inset: 0; background: rgba(20,22,26,0.62); } .nz-cta__inner { position: relative; z-index: 2; padding-block: clamp(5rem, 13vw, 9rem); color: #fff; } .nz-cta__ttl { font-size: var(--nz-fs-h2); font-weight: 700; line-height: 1.55; } .nz-cta__txt { margin-top: 1.2rem; font-size: var(--nz-fs-small); color: rgba(255,255,255,0.86); max-width: 30em; line-height: 2.1; } .nz-cta__btns { margin-top: clamp(2rem, 4vw, 2.8rem); display: flex; flex-wrap: wrap; gap: 1rem; } .nz-cta .nz-label { color: #ffb28a; } .nz-cta .nz-label::before { background: #ffb28a; } /* -------------------------------------------------------------- 12. フッター -------------------------------------------------------------- */ .nz-footer { background: var(--nz-bg-2); padding-top: clamp(3.5rem, 8vw, 6rem); } .nz-footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 4rem); } @media (min-width: 900px) { .nz-footer__grid { grid-template-columns: 1.3fr 1fr 1fr; } } .nz-footer__logo img { width: 180px; } .nz-footer__addr { margin-top: 1.4rem; font-size: var(--nz-fs-small); color: var(--nz-fg-mid); font-style: normal; line-height: 2.2; } .nz-footer__navttl { font-size: var(--nz-fs-label); font-weight: 700; letter-spacing: 0.22em; color: var(--nz-acc); margin-bottom: 1.1rem; } .nz-footer__nav li + li { margin-top: 0.7rem; } .nz-footer__nav a { font-size: 0.86rem; color: var(--nz-fg-mid); transition: color 0.35s; } .nz-footer__nav a:hover { color: var(--nz-acc); } .nz-footer__bottom { margin-top: clamp(3rem, 7vw, 4.5rem); border-top: 1px solid var(--nz-line); padding-block: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; font-size: 0.7rem; letter-spacing: 0.1em; color: var(--nz-fg-dim); } .nz-pagetop { position: fixed; right: clamp(1rem, 3vw, 2.4rem); bottom: 1.8rem; z-index: 300; width: 46px; height: 46px; border: 1px solid var(--nz-line); background: rgba(255,255,255,0.9); backdrop-filter: blur(8px); border-radius: 50%; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s, background 0.35s, border-color 0.35s; } .nz-pagetop.is-show { opacity: 1; pointer-events: auto; } .nz-pagetop:hover { background: var(--nz-acc); border-color: var(--nz-acc); } .nz-pagetop span { width: 8px; height: 8px; border-top: 1.5px solid var(--nz-fg); border-right: 1.5px solid var(--nz-fg); transform: translateY(2px) rotate(-45deg); } .nz-pagetop:hover span { border-color: #fff; } /* -------------------------------------------------------------- 13. 下層共通 -------------------------------------------------------------- */ .nz-phead { background: var(--nz-bg-2); padding-top: calc(var(--nz-header-h) + clamp(3.5rem, 9vw, 7rem)); padding-bottom: clamp(3rem, 7vw, 5rem); } .nz-phead__jp { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: 0.03em; } .nz-crumb { margin-top: 1.4rem; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--nz-fg-dim); display: flex; flex-wrap: wrap; gap: 0.6em; } .nz-crumb a:hover { color: var(--nz-acc); } .nz-rich h2 { font-size: var(--nz-fs-h3); font-weight: 700; margin-top: 2.8em; margin-bottom: 1em; padding-left: 0.85em; border-left: 3px solid var(--nz-acc); } .nz-rich h2:first-child { margin-top: 0; } .nz-rich h3 { font-size: 1.02rem; font-weight: 700; margin-top: 2.2em; margin-bottom: 0.7em; } .nz-rich p { color: var(--nz-fg-mid); } .nz-rich p + p { margin-top: 1.5em; } .nz-rich img { margin-block: 2.2em; border-radius: var(--nz-r); } .nz-rich ul { margin-block: 1.5em; } .nz-rich ul li { position: relative; padding-left: 1.4em; color: var(--nz-fg-mid); } .nz-rich ul li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 7px; height: 1px; background: var(--nz-acc); } .nz-rich a { color: var(--nz-acc); text-decoration: underline; text-underline-offset: 0.25em; } .nz-dl { border-top: 1px solid var(--nz-line); } .nz-dl__row { display: grid; grid-template-columns: 1fr; gap: 0.3rem; padding-block: clamp(1.1rem, 2.4vw, 1.7rem); border-bottom: 1px solid var(--nz-line); } @media (min-width: 700px) { .nz-dl__row { grid-template-columns: 13rem 1fr; gap: 2rem; } } .nz-dl__row dt { font-size: 0.86rem; font-weight: 700; letter-spacing: 0.06em; } .nz-dl__row dd { color: var(--nz-fg-mid); font-size: 0.92rem; } .nz-filter { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .nz-filter__btn { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.7em 1.6em; border: 1px solid var(--nz-line); border-radius: 999px; color: var(--nz-fg-mid); transition: all 0.35s; } .nz-filter__btn:hover { border-color: var(--nz-fg); color: var(--nz-fg); } .nz-filter__btn.is-active { background: var(--nz-acc); border-color: var(--nz-acc); color: #fff; } .nz-pager { display: flex; justify-content: center; gap: 0.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); } .nz-pager a, .nz-pager span { min-width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--nz-line); border-radius: 50%; font-size: 0.82rem; color: var(--nz-fg-mid); transition: all 0.35s; } .nz-pager a:hover { border-color: var(--nz-acc); color: var(--nz-acc); } .nz-pager .is-current { background: var(--nz-acc); border-color: var(--nz-acc); color: #fff; } .nz-form__row { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); } .nz-form__label { display: flex; align-items: center; gap: 0.8em; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.7em; } .nz-form__req { font-size: 0.62rem; letter-spacing: 0.1em; background: var(--nz-acc); color: #fff; padding: 0.35em 0.85em; border-radius: 3px; } .nz-form__input, .nz-form__textarea, .nz-form__select { width: 100%; background: var(--nz-bg-2); border: 1px solid var(--nz-line); color: var(--nz-fg); padding: 0.95em 1.1em; font-family: inherit; font-size: 0.94rem; border-radius: var(--nz-r); transition: border-color 0.35s, background 0.35s; } .nz-form__input:focus, .nz-form__textarea:focus, .nz-form__select:focus { outline: none; border-color: var(--nz-acc); background: #fff; } .nz-form__textarea { min-height: 12rem; resize: vertical; } .nz-form__note { font-size: 0.78rem; color: var(--nz-fg-dim); margin-top: 0.6em; } .nz-form__submit { display: flex; justify-content: center; margin-top: clamp(2.4rem, 5vw, 3.4rem); } .nz-404 { min-height: calc(var(--nz-vh) * 100); display: grid; place-items: center; text-align: center; padding: var(--nz-header-h) var(--nz-gut) 4rem; } .nz-404__num { font-size: clamp(4.5rem, 16vw, 12rem); font-weight: 700; line-height: 1; color: var(--nz-bg-3); } /* -------------------------------------------------------------- 14. アニメーション初期状態（JS有効時のみ） -------------------------------------------------------------- */ .js [data-anim] { opacity: 0; } .js [data-anim="up"] { transform: translateY(30px); } .js [data-anim="clip"] { opacity: 1; clip-path: inset(0 0 100% 0); } .js [data-split] .nz-line { display: block; overflow: hidden; } .js [data-split] .nz-line > span { display: block; transform: translateY(105%); } .js [data-stagger] > * { opacity: 0; transform: translateY(24px); } @media (prefers-reduced-motion: reduce) { .js [data-anim], .js [data-stagger] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; } .js [data-split] .nz-line > span { transform: none !important; } .nz-hero__scroll i::after { animation: none; } } /* -------------------------------------------------------------- 15. ヘッダーのロゴ切替（ヒーロー上は白抜き、それ以外は濃色） -------------------------------------------------------------- */ .nz-header__logo { position: relative; display: block; line-height: 0; } .nz-header__logo img { width: clamp(130px, 15vw, 172px); transition: opacity 0.4s var(--nz-e-out); } .nz-header__logo-light { position: absolute; left: 0; top: 0; } /* 既定（ソリッド）は濃色ロゴ */ .nz-header__logo-dark { opacity: 1; } .nz-header__logo-light { opacity: 0; } /* ヒーロー上の透過状態だけ白ロゴ */ .nz-header[data-header-hero]:not(.is-solid) .nz-header__logo-dark { opacity: 0; } .nz-header[data-header-hero]:not(.is-solid) .nz-header__logo-light { opacity: 1; } .nz-header[data-header-hero]:not(.is-solid) .nz-nav__link { color: #fff; } .nz-header[data-header-hero]:not(.is-solid) .nz-burger span { background: #fff; } /* 下層ページは常にソリッド */ .nz-header--fixed-solid { background: rgba(255,255,255,0.94); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--nz-line); } /* -------------------------------------------------------------- 16. 下層ページ個別 TOPと同じトークン・同じ余白リズムで組む。新しい色は足さない -------------------------------------------------------------- */ /* 幅の狭い読み物用ラッパ */ .nz-wrap--narrow { max-width: 980px; } /* 中央寄せの見出し（.nz-sechead は既定で flex 横並びなので上書きする） */ .nz-sechead--center { display: block; text-align: center; } .nz-sechead--center .nz-label { margin-bottom: 1.4em; } .nz-lead--center { margin-inline: auto; margin-top: 1.6rem; text-align: left; } @media (min-width: 760px) { .nz-lead--center { text-align: center; max-width: 42em; } } /* 画像＋テキストの2カラム */ .nz-cols { display: grid; gap: clamp(2.2rem, 5vw, 4.6rem); align-items: start; } @media (min-width: 900px) { .nz-cols { grid-template-columns: 1fr 1.18fr; } .nz-cols--rev { grid-template-columns: 1.18fr 1fr; } .nz-cols--rev .nz-cols__fig { order: 2; } .nz-cols--mid { align-items: center; } /* 本文が長いカラムに写真が置いていかれないよう、写真側を貼り付ける */ .nz-cols--sticky .nz-cols__fig { position: sticky; top: calc(var(--nz-header-h) + clamp(1.5rem, 4vw, 3rem)); } } .nz-cols__fig { position: relative; overflow: hidden; border-radius: var(--nz-r); aspect-ratio: 4/3; background: var(--nz-bg-3); } .nz-cols__fig img { width: 100%; height: 112%; object-fit: cover; } .nz-cols__body p + p { margin-top: 1.6em; } /* 署名（代表挨拶） */ .nz-sign { margin-top: clamp(2rem, 4vw, 3rem); display: flex; align-items: baseline; justify-content: flex-end; gap: 1.1rem; } .nz-sign small { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--nz-fg-dim); } .nz-sign strong { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.14em; } /* 企業理念 */ .nz-creed__ttl { font-size: clamp(1.25rem, 2.7vw, 1.95rem); font-weight: 700; line-height: 1.85; letter-spacing: 0.02em; } .nz-creed__list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--nz-line); } .nz-creed__list li { display: flex; gap: 0.9em; align-items: baseline; padding: 1.05em 0; border-bottom: 1px solid var(--nz-line); font-size: 0.98rem; } .nz-creed__list li::before { content: "一."; flex: none; color: var(--nz-acc); font-weight: 700; letter-spacing: 0.05em; } /* 地図 */ .nz-map { position: relative; aspect-ratio: 16/9; border-radius: var(--nz-r); overflow: hidden; background: var(--nz-bg-3); } .nz-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } @media (max-width: 599px) { .nz-map { aspect-ratio: 4/3; } } /* 業務内容リスト（画像とテキストを交互に） */ .nz-bizlist { display: grid; gap: clamp(3.2rem, 8vw, 6.5rem); } .nz-bizitem { display: grid; gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; } @media (min-width: 860px) { .nz-bizitem { grid-template-columns: 1.05fr 1fr; } .nz-bizitem:nth-child(even) .nz-bizitem__fig { order: 2; } } .nz-bizitem__fig { overflow: hidden; border-radius: var(--nz-r); aspect-ratio: 3/2; background: var(--nz-bg-3); } .nz-bizitem__fig img { width: 100%; height: 100%; object-fit: cover; } .nz-bizitem__num { font-size: var(--nz-fs-label); font-weight: 700; letter-spacing: 0.24em; color: var(--nz-acc); } .nz-bizitem__ttl { margin-top: 0.5em; font-size: clamp(1.3rem, 2.4vw, 1.85rem); font-weight: 700; letter-spacing: 0.03em; } .nz-bizitem__txt { margin-top: 1.2rem; color: var(--nz-fg-mid); font-size: 0.94rem; } .nz-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; } .nz-tags li { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; color: var(--nz-fg-mid); border: 1px solid var(--nz-line); border-radius: 999px; padding: 0.5em 1.15em; } /* 工程フロー */ .nz-flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: clamp(1.5rem, 3vw, 2.6rem); } .nz-flow__fig { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--nz-r); background: var(--nz-bg-3); } .nz-flow__fig img { width: 100%; height: 100%; object-fit: cover; } .nz-flow__num { position: absolute; left: 0; top: 0; z-index: 2; background: var(--nz-acc); color: #fff; font-size: var(--nz-fs-label); font-weight: 700; letter-spacing: 0.12em; padding: 0.6em 1.1em; } .nz-flow__ttl { margin-top: 1.05em; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.03em; } .nz-flow__txt { margin-top: 0.5em; font-size: 0.8rem; line-height: 1.95; color: var(--nz-fg-mid); } /* 番号付きカード（働きやすい環境作り） */ .nz-numlist { display: grid; gap: clamp(1.4rem, 3vw, 2.2rem); counter-reset: nznum; } @media (min-width: 860px) { .nz-numlist { grid-template-columns: 1fr 1fr; } } .nz-numcard { counter-increment: nznum; background: #fff; border: 1px solid var(--nz-line); border-radius: var(--nz-r); padding: clamp(1.6rem, 3vw, 2.5rem); } .nz-numcard::before { content: counter(nznum, decimal-leading-zero); display: block; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.14em; color: var(--nz-acc); } .nz-numcard__ttl { margin-top: 0.6em; font-size: 1.08rem; font-weight: 700; line-height: 1.7; } .nz-numcard__txt { margin-top: 0.9em; font-size: 0.86rem; line-height: 2; color: var(--nz-fg-mid); } .nz-dots { margin-top: 1.3rem; } .nz-dots li { position: relative; padding-left: 1.4em; font-size: 0.84rem; line-height: 2; color: var(--nz-fg-mid); } .nz-dots li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 6px; height: 6px; border-radius: 50%; background: var(--nz-acc); } /* 採用KV */ .nz-rkv { position: relative; overflow: hidden; border-radius: var(--nz-r); display: grid; align-items: end; min-height: clamp(340px, calc(var(--nz-vh) * 56), 560px); } .nz-rkv__media { position: absolute; inset: 0; } .nz-rkv__media img { width: 100%; height: 100%; object-fit: cover; } .nz-rkv__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,18,22,0.15) 0%, rgba(16,18,22,0.35) 45%, rgba(16,18,22,0.78) 100%); } .nz-rkv__body { position: relative; z-index: 2; padding: clamp(1.6rem, 4vw, 3.4rem); color: #fff; } .nz-rkv__catch { font-size: clamp(1.25rem, 2.9vw, 2.15rem); font-weight: 700; line-height: 1.75; text-shadow: 0 2px 22px rgba(0,0,0,0.32); } .nz-rkv__btns { margin-top: clamp(1.4rem, 3vw, 2.2rem); display: flex; flex-wrap: wrap; gap: 1rem; } /* 募集要項などの帯 */ .nz-band { background: var(--nz-bg-2); border-radius: var(--nz-r); padding: clamp(2rem, 5vw, 3.6rem); text-align: center; } .nz-band__ttl { font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 700; } .nz-band__btns { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } /* 記事（施工実績・お知らせ 詳細） */ .nz-article__head { border-bottom: 1px solid var(--nz-line); padding-bottom: clamp(1.4rem, 3vw, 2.1rem); margin-bottom: clamp(2.2rem, 5vw, 3.4rem); } .nz-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.3rem; } .nz-article__date { font-size: 0.8rem; letter-spacing: 0.1em; color: var(--nz-fg-dim); } .nz-article__cat { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; color: var(--nz-acc); background: var(--nz-acc-soft); padding: 0.4em 1.15em; border-radius: 999px; } .nz-article__ttl { margin-top: 1.1rem; font-size: clamp(1.35rem, 3vw, 2.2rem); font-weight: 700; line-height: 1.7; letter-spacing: 0.02em; } .nz-article__nav { display: flex; justify-content: center; margin-top: clamp(3rem, 6vw, 4.5rem); } .nz-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 1rem; margin-block: 2.4em; } .nz-gallery img { margin: 0; aspect-ratio: 4/3; object-fit: cover; width: 100%; } /* 一覧の件数表示 */ .nz-count { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--nz-fg-dim); margin-bottom: 1.4rem; } /* サイトマップ */ .nz-sitemap { border-top: 1px solid var(--nz-line); } .nz-sitemap__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25em 0; border-bottom: 1px solid var(--nz-line); font-size: 1rem; font-weight: 700; transition: color 0.35s var(--nz-e-out), padding-left 0.35s var(--nz-e-out); } .nz-sitemap__link small { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; color: var(--nz-fg-dim); } .nz-sitemap__link:hover { color: var(--nz-acc); padding-left: 0.6em; } .nz-sitemap__sub { padding-left: clamp(1rem, 3vw, 2.2rem); } .nz-sitemap__sub .nz-sitemap__link { font-size: 0.88rem; font-weight: 400; color: var(--nz-fg-mid); } /* 番号付き本文（プライバシーポリシー） */ .nz-olist { counter-reset: nzol; border-top: 1px solid var(--nz-line); } .nz-olist li { counter-increment: nzol; display: grid; grid-template-columns: 2.8em 1fr; gap: 0 1em; padding: 1.35em 0; border-bottom: 1px solid var(--nz-line); font-size: 0.92rem; line-height: 2; color: var(--nz-fg-mid); } .nz-olist li::before { content: counter(nzol, decimal-leading-zero); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em; color: var(--nz-acc); line-height: 2.25; } /* 電話での問い合わせ */ .nz-tel { display: grid; gap: 0.4rem; text-align: center; } .nz-tel__num { font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 700; letter-spacing: 0.06em; } .nz-tel__note { font-size: 0.78rem; color: var(--nz-fg-dim); letter-spacing: 0.08em; } /* フォームの補足 */ .nz-form__privacy { margin-top: clamp(2rem, 4vw, 3rem); background: var(--nz-bg-2); border-radius: var(--nz-r); padding: clamp(1.3rem, 3vw, 2rem); font-size: 0.84rem; color: var(--nz-fg-mid); } .nz-form__check { display: flex; align-items: flex-start; gap: 0.7em; margin-top: 1rem; font-size: 0.86rem; } .nz-form__check input { margin-top: 0.55em; accent-color: var(--nz-acc); } /* -------------------------------------------------------------- 17. WordPress 側の出力に当てる分 静的HTMLでは使わないが、テーマと同じ1本のCSSで運用したいのでここに置く （2本に分けると、片方だけ直して差分が出る） -------------------------------------------------------------- */ /* 管理バーの分だけ固定ヘッダーを下げる */ .admin-bar .nz-header { top: 32px; } @media (max-width: 782px) { .admin-bar .nz-header { top: 46px; } } /* Contact Form 7 ------------------------------------------------- フォームのマークアップは管理画面（CF7の編集画面）側にあり、テーマからは触れない。 クラスが付いていないフォームでも成立するよう、クラスではなく要素セレクタで当てる。 docs/cf7-*.txt のテンプレートを貼れば行の間隔と必須バッジまで揃うが、 貼らなくても「素のCF7」がこの見た目になる、という二段構えにしている */ .nz-form .wpcf7-form-control-wrap { display: block; } .nz-form label { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.7em; } .nz-form form > p { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); } .nz-form input[type="text"], .nz-form input[type="email"], .nz-form input[type="tel"], .nz-form input[type="url"], .nz-form input[type="number"], .nz-form input[type="date"], .nz-form input[type="search"], .nz-form input[type="password"], .nz-form select, .nz-form textarea { width: 100%; background: var(--nz-bg-2); border: 1px solid var(--nz-line); color: var(--nz-fg); padding: 0.95em 1.1em; font-family: inherit; font-size: 0.94rem; line-height: 1.7; border-radius: var(--nz-r); -webkit-appearance: none; appearance: none; transition: border-color 0.35s, background 0.35s; } .nz-form select { /* appearance:none で消える矢印を描き直す */ background-image: linear-gradient(45deg, transparent 50%, var(--nz-fg-mid) 50%), linear-gradient(135deg, var(--nz-fg-mid) 50%, transparent 50%); background-position: calc(100% - 1.35em) 1.25em, calc(100% - 1.05em) 1.25em; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.8em; } .nz-form input:focus, .nz-form select:focus, .nz-form textarea:focus { outline: none; border-color: var(--nz-acc); background: #fff; } .nz-form textarea { min-height: 12rem; resize: vertical; } .nz-form input[type="checkbox"], .nz-form input[type="radio"] { width: auto; accent-color: var(--nz-acc); margin-right: 0.6em; } /* 送信・確認・戻るボタン。 input には ::before を置けないので .nz-btn のスライド塗りつぶしは効かない。 塗りは最初から入れておく */ .nz-form input[type="submit"], .nz-form input[type="button"], .nz-form button[type="submit"], .nz-form button:not(.nz-btn) { display: inline-flex; align-items: center; justify-content: center; padding: 1.1em 2.6em; font-size: 0.86rem; font-weight: 700; letter-spacing: 0.1em; border-radius: 999px; border: 1px solid var(--nz-acc); background: var(--nz-acc); color: #fff; cursor: pointer; width: auto; -webkit-appearance: none; appearance: none; transition: background 0.4s var(--nz-e-out), border-color 0.4s var(--nz-e-out), color 0.4s var(--nz-e-out); } .nz-form input[type="submit"]:hover, .nz-form button[type="submit"]:hover { background: var(--nz-fg); border-color: var(--nz-fg); } /* 「戻る」は副次的な操作なので白抜きにする（Confirm Plus は input[type=button] で出す） */ .nz-form input[type="button"] { background: transparent; color: var(--nz-fg); border-color: var(--nz-fg); } .nz-form input[type="button"]:hover { background: var(--nz-fg); color: #fff; } /* ボタンが2つ並ぶときの間隔。CF7側のマークアップに依存しないよう、親をflexにしない */ .nz-form input[type="submit"] + input[type="button"], .nz-form input[type="button"] + input[type="submit"] { margin-left: 1rem; } .nz-form .nz-form__submit { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: clamp(2.4rem, 5vw, 3.4rem); } /* 同意チェックとエラー表示 */ .nz-form .wpcf7-list-item { margin: 0; } .nz-form .wpcf7-list-item-label { font-size: 0.86rem; font-weight: 400; } .nz-form .wpcf7-not-valid-tip { display: block; margin-top: 0.5em; font-size: 0.78rem; color: #c0341d; } .nz-form .wpcf7-not-valid { border-color: #c0341d; } .nz-form .wpcf7-response-output { margin: 1.6rem 0 0; padding: 1em 1.2em; border: 1px solid var(--nz-line); border-radius: var(--nz-r); font-size: 0.86rem; color: var(--nz-fg-mid); } .nz-form .wpcf7-spinner { margin-left: 0.8em; } /* 旧サイトから引き継いだCF7フォーム本文のマークアップに当てる分。 本文は dl.row > dt.ttl + dd.desc という構造で、クラス名が旧テーマのもの。 docs/cf7-*.txt に差し替えれば不要になるが、差し替えないままでも 成立するように、.nz-form の中に限って受け止めておく */ .nz-form .lead-txt { color: var(--nz-fg-mid); font-size: var(--nz-fs-body); margin-bottom: clamp(2rem, 4vw, 3rem); } .nz-form .form-box .row { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); } .nz-form .form-box .ttl { display: flex; align-items: center; gap: 0.8em; font-size: 0.88rem; font-weight: 700; margin-bottom: 0.7em; } .nz-form .form-box .ttl label { display: inline; margin: 0; font-size: inherit; font-weight: inherit; } /* 必須バッジは旧マークアップの is-required から描く（.nz-form__req と同じ見た目） */ .nz-form .is-required::after { content: "必須"; flex: none; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; background: var(--nz-acc); color: #fff; padding: 0.35em 0.85em; border-radius: 3px; } .nz-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .nz-form legend { display: block; width: 100%; padding: 0; } .nz-form .btn-box { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2.4rem, 5vw, 3.4rem); } .nz-form .agree-privacy-policy { display: block; } /* 同意文の中のリンク。