html,body{margin:0;padding:0}


/* ==========================================================================
   株式会社かわしま — お問い合わせ（/contact/）
   .kw 配下にスコープ。ただしフォーム（.wpcf7）だけは、
   WordPress のショートコードが .kw の外に出力されるためグローバル指定。
   ========================================================================== */
.kw{
  /* --- 色 --- */
  --ink:#0D1922;
  --ink-2:#16242F;
  --ink-3:#22333F;
  --paper:#F2F4F5;
  --paper-2:#FBFCFC;
  --line:#CBD4D8;
  --line-2:#E1E7E9;
  --muted:#5B6A73;
  --muted-d:#9BAAB3;
  --sig:#0B6FB8;
  --sig-ink:#08558D;
  --sig-lite:#5AB4E8;
  --lamp:#B0106A;
  --lamp-lite:#E86AA8;

  /* --- 書体 --- */
  --f-min:'Zen Old Mincho','Yu Mincho','游明朝',YuMincho,'Hiragino Mincho ProN',serif;
  --f-sans:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* --- 寸法（8px基準） --- */
  --gut:clamp(20px,5vw,64px);
  --maxw:1240px;
  --sec:clamp(72px,10vw,144px);
}

/* --- スコープ内リセット ------------------------------------------------- */
.kw,.kw *,.kw *::before,.kw *::after{box-sizing:border-box}
.kw{
  margin-inline:calc(50% - 50vw + var(--kw-sb,0px) / 2);
  overflow-x:hidden;overflow-x:clip;
  font-family:var(--f-sans);font-size:16px;line-height:1.9;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  font-feature-settings:"palt" 1;
}
.kw :where(h1,h2,h3,h4,p,ul,ol,dl,dt,dd,figure,blockquote,table){margin:0;padding:0}
.kw :where(ul,ol){list-style:none}
.kw :where(img){display:block;max-width:100%;height:auto}
.kw :where(a){color:inherit;text-decoration:none}
.kw :where(em){font-style:normal}
.kw :where(svg){display:block}
.kw :focus-visible{outline:2px solid var(--sig);outline-offset:3px}

/* --- レイアウト --------------------------------------------------------- */
.kw-wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);position:relative}
.kw-sec{padding-block:var(--sec)}
.kw-wrap--narrow{max-width:920px}

/* --- 方眼罫（建築図面のシート） ----------------------------------------- */
.kw-sheet{position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(13,25,34,.05) 1px,transparent 1px),
    linear-gradient(rgba(13,25,34,.05) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px,34px 34px,calc(100% / 4) 100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 52%,transparent 100%);
}
.kw-lit{background-image:
  radial-gradient(46% 56% at 3% 2%,rgba(11,111,184,.13),transparent 62%),
  radial-gradient(44% 52% at 98% 30%,rgba(176,16,106,.10),transparent 64%)}

/* --- 寸法線（シグネチャー要素） ----------------------------------------- */
.kw-dim{display:flex;align-items:center;gap:14px;color:var(--muted)}
.kw-dim i{flex:1 1 auto;position:relative;height:1px;background:currentColor;opacity:.4}
.kw-dim i::before,.kw-dim i::after{content:'';position:absolute;top:-4px;width:1px;height:9px;background:currentColor}
.kw-dim i::before{left:0}
.kw-dim i::after{right:0}
.kw-dim span{flex:0 0 auto;font-family:var(--f-mono);font-size:.76rem;font-weight:500;
  letter-spacing:.18em;line-height:1;white-space:nowrap}

/* --- 見出し ------------------------------------------------------------- */
.kw-h2{font-family:var(--f-min);font-weight:700;font-size:clamp(1.75rem,3.6vw,2.75rem);
  line-height:1.45;letter-spacing:.03em;text-wrap:balance}
.kw-h3{font-family:var(--f-min);font-weight:700;font-size:clamp(1.15rem,1.9vw,1.4rem);
  line-height:1.6;letter-spacing:.04em}
.kw-lead{max-width:34em;font-size:clamp(.95rem,1.05vw,1.0625rem);line-height:2.1;color:var(--muted)}
.kw-body{max-width:36em;line-height:2.05;color:var(--muted)}

.kw :is(.kw-h2,.kw-h3,.kw-phero__h1,.kw-way__t,.kw-formhead__t,.kw-faq__q){word-break:auto-phrase}
.kw-nb{display:inline-block}

/* --- ボタン ------------------------------------------------------------- */
.kw-btn{position:relative;display:inline-flex;align-items:center;gap:1.1em;
  padding:1.05em 1.9em;border:1px solid var(--ink);overflow:hidden;
  font-size:.9375rem;font-weight:500;letter-spacing:.06em;line-height:1;
  transition:color .35s ease,border-color .35s ease}
.kw-btn::before{content:'';position:absolute;inset:0;background:var(--ink);z-index:0;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s cubic-bezier(.22,.72,.2,1)}
.kw-btn>*{position:relative;z-index:1}
.kw-btn svg{transition:transform .4s cubic-bezier(.22,.72,.2,1)}
.kw-btn:hover,.kw-btn:focus-visible{color:var(--paper)}
.kw-btn:hover::before,.kw-btn:focus-visible::before{transform:scaleX(1)}
.kw-btn:hover svg,.kw-btn:focus-visible svg{transform:translateX(5px)}
.kw-btn--sig{border-color:var(--sig);color:var(--sig-ink)}
.kw-btn--sig::before{background:var(--sig)}
.kw-btn--solid{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.kw-btn--solid::before{background:var(--paper)}
.kw-btn--solid:hover,.kw-btn--solid:focus-visible{color:var(--ink)}

/* --- テキストリンク ----------------------------------------------------- */
.kw-tlink{display:inline-flex;align-items:center;gap:.7em;font-size:.9375rem;font-weight:500;
  letter-spacing:.05em;border-bottom:1px solid currentColor;padding-bottom:.35em;
  transition:gap .3s ease}
.kw-tlink:hover{gap:1.1em}

/* --- スクロール演出 ----------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
  .kw [data-rv]{opacity:0;transform:translateY(22px);
    transition:opacity .9s cubic-bezier(.22,.72,.2,1) var(--d,0s),
               transform .9s cubic-bezier(.22,.72,.2,1) var(--d,0s)}
  .kw [data-rv].is-in{opacity:1;transform:none}
}

/* --- 未確定情報のプレースホルダ枠 --------------------------------------- */
.kw-slot{border:1px dashed var(--line);background:repeating-linear-gradient(
  135deg,transparent 0 7px,rgba(15,127,134,.045) 7px 14px);
  padding:1em 1.15em;color:var(--muted);font-size:.8125rem;line-height:1.8}
.kw-slot b{display:block;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.2em;
  color:var(--sig-ink);margin-bottom:.5em}

/* ==========================================================================
   下層ページ共通：ページヒーロー
   ========================================================================== */
.kw-phero{position:relative;overflow:hidden;
  padding-block:clamp(48px,7vw,96px) clamp(52px,7.5vw,104px);
  border-bottom:1px solid var(--line);
  background-image:
    radial-gradient(48% 58% at 2% 0%,rgba(11,111,184,.14),transparent 62%),
    radial-gradient(46% 54% at 99% 30%,rgba(176,16,106,.10),transparent 64%)}
.kw-phero__inner{position:relative;z-index:1;max-width:44em}
.kw-phero__glyph{position:absolute;right:-.1em;top:50%;transform:translateY(-46%);z-index:0;
  font-family:var(--f-min);font-weight:900;line-height:.72;
  font-size:clamp(11rem,25vw,20rem);color:var(--ink);opacity:.055;
  pointer-events:none;user-select:none}
@media (max-width:719px){.kw-phero__glyph{font-size:15rem;right:-.18em;opacity:.05}}

.kw-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .9em;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;color:var(--muted)}
.kw-crumb a{border-bottom:1px solid transparent;transition:border-color .3s ease}
.kw-crumb a:hover{border-color:currentColor}
.kw-crumb span[aria-current]{color:var(--ink)}
.kw-crumb i{width:14px;height:1px;background:var(--line);display:block}

.kw-phero__h1{margin-top:clamp(24px,3.4vw,40px);font-family:var(--f-min);font-weight:700;
  font-size:clamp(2.1rem,5.4vw,3.75rem);line-height:1.35;letter-spacing:.05em}
.kw-phero__en{margin-top:18px;font-family:var(--f-mono);font-size:.76rem;font-weight:500;
  letter-spacing:.24em;color:var(--sig-ink)}
.kw-phero__lead{margin-top:clamp(24px,3vw,34px)}

/* ==========================================================================
   お問い合わせ 固有
   ========================================================================== */

/* --- お問い合わせ分野（2枚の選択カード） -------------------------------- */
.kw-ways{display:grid;gap:1px;background:var(--line-2);border:1px solid var(--line-2);
  grid-template-columns:minmax(0,1fr);margin-top:clamp(32px,4vw,52px)}
@media (min-width:820px){.kw-ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kw-way{background:var(--paper-2);padding:clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden}
.kw-way::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.07;pointer-events:none}
.kw-way--building::before{background:linear-gradient(135deg,var(--sig),transparent 58%)}
.kw-way--advertising::before{background:linear-gradient(135deg,var(--lamp),transparent 58%)}
.kw-way__label{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;color:var(--sig-ink);
  display:flex;align-items:center;gap:12px}
.kw-way__label::after{content:'';flex:1 1 auto;height:1px;background:var(--line);opacity:.7}
.kw-way--advertising .kw-way__label{color:var(--lamp)}
.kw-way__t{margin-top:16px;font-family:var(--f-min);font-weight:700;
  font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.55;letter-spacing:.04em}
.kw-way__d{margin-top:14px;font-size:.9rem;line-height:1.95;color:var(--muted)}
.kw-way__examples{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.kw-way__examples li{font-size:.72rem;line-height:1.3;padding:.5em .7em;border:1px solid var(--line);background:#fff}
.kw-way__foot{margin-top:auto;padding-top:clamp(24px,3vw,34px)}
.kw-way--advertising .kw-btn--sig{border-color:var(--lamp);color:var(--lamp)}
.kw-way--advertising .kw-btn--sig::before{background:var(--lamp)}
.kw-ways__fallback{margin-top:20px;font-size:.875rem;line-height:1.8;color:var(--muted);text-align:center}
.kw-ways__fallback a{color:var(--sig-ink);border-bottom:1px solid currentColor}

/* --- お問い合わせの流れ ------------------------------------------------- */
.kw-steps{background-color:var(--ink);color:var(--paper);
  background-image:
    radial-gradient(44% 54% at 4% 4%,rgba(11,111,184,.28),transparent 62%),
    radial-gradient(42% 50% at 98% 92%,rgba(176,16,106,.20),transparent 64%),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,34px 34px,34px 34px}
.kw-steps .kw-dim{color:var(--muted-d)}
.kw-steps .kw-h2{color:var(--paper)}
.kw-steps__list{margin-top:clamp(36px,4.5vw,60px);display:grid;gap:1px;
  background:var(--ink-3);border:1px solid var(--ink-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.kw-steps__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.kw-steps__list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kw-steps__item{background:var(--ink);padding:clamp(26px,3vw,38px)}
.kw-steps__no{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.22em;color:var(--sig-lite)}
.kw-steps__t{margin-top:14px;font-family:var(--f-min);font-weight:700;font-size:1.0625rem;
  line-height:1.65;letter-spacing:.04em;color:var(--paper)}
.kw-steps__d{margin-top:12px;font-size:.875rem;line-height:1.95;color:var(--muted-d)}

/* --- フォームの見出し（この直後にショートコードブロックが入る） --------- */
.kw-formhead{background:#fff;padding-block:clamp(56px,7vw,96px) clamp(28px,3.4vw,40px)}
.kw-formhead__t{margin-top:24px;font-family:var(--f-min);font-weight:700;
  font-size:clamp(1.6rem,3.2vw,2.35rem);line-height:1.5;letter-spacing:.04em}
.kw-formhead__d{margin-top:20px;max-width:36em;color:var(--muted);line-height:2.05;
  font-size:.9375rem}
.kw-formhead__note{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
.kw-formhead__note li{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  line-height:1;padding:.7em .9em;border:1px solid var(--line);color:var(--sig-ink);
  background:var(--paper-2)}

/* ==========================================================================
   お問い合わせフォームの体裁
   Contact Form 7 のショートコードは .kw の外に出力されるため、
   ここだけスコープを外して指定しています。
   （このサイトでフォームを使うのはこのページだけ、という前提です）
   ========================================================================== */
.wpcf7{max-width:920px;margin:0 auto;padding:0 clamp(20px,5vw,64px) clamp(56px,7vw,96px);
  font-family:'Noto Sans JP','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;
  color:#0D1922;font-feature-settings:"palt" 1}
.wpcf7 p{margin:0}
/* 1行＝1項目 */
.wpcf7 .kwf-row{padding-block:clamp(20px,2.4vw,26px);border-bottom:1px solid #E1E7E9;
  display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.wpcf7 .kwf-row{grid-template-columns:210px minmax(0,1fr);gap:28px;
  align-items:start}}
.wpcf7 .kwf-row:first-of-type{border-top:1px solid #0D1922}
.wpcf7 .kwf-label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.78rem;
  letter-spacing:.14em;color:#5B6A73;line-height:1.9;padding-top:.55em;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.wpcf7 .kwf-req{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.14em;line-height:1;padding:.45em .6em;background:#0B6FB8;color:#fff}
.wpcf7 .kwf-any{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.14em;line-height:1;padding:.45em .6em;border:1px solid #CBD4D8;color:#5B6A73}
.wpcf7 .kwf-help{margin-top:8px;font-size:.78rem;line-height:1.8;color:#5B6A73}

/* 入力欄 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea{
  width:100%;max-width:100%;box-sizing:border-box;
  font-family:inherit;font-size:1rem;line-height:1.8;color:#0D1922;
  background:#FBFCFC;border:1px solid #CBD4D8;border-radius:0;
  padding:.85em 1em;transition:border-color .3s ease,background-color .3s ease,box-shadow .3s ease;
  -webkit-appearance:none;appearance:none}
.wpcf7 select{background-image:linear-gradient(45deg,transparent 50%,#5B6A73 50%),
  linear-gradient(135deg,#5B6A73 50%,transparent 50%);
  background-position:calc(100% - 20px) center,calc(100% - 14px) center;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:3em}
.wpcf7 textarea{min-height:11em;resize:vertical}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  outline:none;border-color:#0B6FB8;background:#fff;box-shadow:0 0 0 3px rgba(11,111,184,.12)}
.wpcf7 input::placeholder,.wpcf7 textarea::placeholder{color:#9BAAB3}

/* ラジオ・チェックボックス */
.wpcf7 .wpcf7-radio .wpcf7-list-item,
.wpcf7 .wpcf7-checkbox .wpcf7-list-item,
.wpcf7 .wpcf7-acceptance .wpcf7-list-item{margin:0 1.4em .6em 0;display:inline-block}
.wpcf7 .wpcf7-list-item-label{font-size:.9375rem;line-height:1.9;margin-left:.5em}
.wpcf7 input[type="radio"],.wpcf7 input[type="checkbox"]{width:auto;accent-color:#0B6FB8;
  transform:translateY(1px)}

/* お問い合わせ区分：フォーム内でも最初に大きく選べる */
.wpcf7 .kwf-purpose{margin:0;padding:0 0 clamp(28px,3.2vw,38px);border:0;border-bottom:1px solid #E1E7E9}
.wpcf7 .kwf-purpose__legend{width:100%;font-family:'Zen Old Mincho','Yu Mincho','游明朝',serif;
  font-size:clamp(1.15rem,2vw,1.4rem);font-weight:700;line-height:1.65;letter-spacing:.03em}
.wpcf7 .kwf-purpose__legend .kwf-req{display:inline-block;vertical-align:.2em;margin-left:.65em}
.wpcf7 .kwf-purpose__help{margin-top:8px;color:#5B6A73;font-size:.82rem;line-height:1.8}
.wpcf7 .kwf-purpose__options{margin-top:18px}
.wpcf7 .kwf-purpose__options .wpcf7-radio{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.wpcf7 .kwf-purpose__options .wpcf7-radio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wpcf7 .kwf-purpose__options .wpcf7-list-item{margin:0;display:block}
.wpcf7 .kwf-purpose__options label{display:flex;align-items:center;min-height:78px;height:100%;
  border:1px solid #CBD4D8;background:#FBFCFC;padding:16px;cursor:pointer;
  transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
.wpcf7 .kwf-purpose__options input{flex:0 0 auto;margin:0;transform:none}
.wpcf7 .kwf-purpose__options .wpcf7-list-item-label{margin-left:.7em;font-weight:500;line-height:1.6}
.wpcf7 .kwf-purpose__options label:hover{border-color:#0B6FB8;background:#fff}
.wpcf7 .kwf-purpose__options .is-selected label,
.wpcf7 .kwf-purpose__options label:has(input:checked){border-color:#0B6FB8;background:#EDF5FB;
  box-shadow:inset 4px 0 0 #0B6FB8}
.wpcf7 .kwf-purpose__options .wpcf7-list-item:nth-child(2).is-selected label,
.wpcf7 .kwf-purpose__options .wpcf7-list-item:nth-child(2) label:has(input:checked){border-color:#B0106A;
  background:#FBEFF5;box-shadow:inset 4px 0 0 #B0106A}

/* 同意 */
.wpcf7 .kwf-privacy{padding-block:clamp(22px,2.6vw,30px);font-size:.875rem;line-height:1.95;
  color:#5B6A73;border-bottom:1px solid #E1E7E9}
.wpcf7 .kwf-privacy a{color:#08558D;border-bottom:1px solid currentColor}

/* 送信ボタン */
.wpcf7 .kwf-submit{margin-top:clamp(30px,3.6vw,44px);display:flex;flex-wrap:wrap;
  align-items:center;gap:18px}
.wpcf7 input[type="submit"]{
  font-family:inherit;font-size:.9375rem;font-weight:500;letter-spacing:.1em;line-height:1;
  color:#F2F4F5;background:#0D1922;border:1px solid #0D1922;border-radius:0;
  padding:1.25em 3.2em;cursor:pointer;width:auto;
  transition:background-color .35s ease,color .35s ease}
.wpcf7 input[type="submit"]:hover{background:#0B6FB8;border-color:#0B6FB8}
.wpcf7 input[type="submit"]:disabled{opacity:.5;cursor:not-allowed}
.wpcf7 .kwf-submit-note{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.7rem;
  letter-spacing:.12em;color:#5B6A73}

/* 送信中・エラー・完了メッセージ */
.wpcf7 .wpcf7-spinner{margin:0 0 0 14px}
.wpcf7 form .wpcf7-response-output{margin:24px 0 0;padding:1.1em 1.3em;border-width:1px;
  font-size:.9rem;line-height:1.85;border-radius:0}
.wpcf7 form.sent .wpcf7-response-output{border-color:#0B6FB8;background:#EDF5FB;color:#08558D}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:#B0106A;background:#FBEFF5;color:#B0106A}
.wpcf7 .wpcf7-not-valid-tip{margin-top:8px;font-size:.8125rem;line-height:1.7;color:#B0106A}
.wpcf7 .wpcf7-not-valid{border-color:#B0106A}


/* パート2で使う分の追記（トークンはパート1で定義済み） */
.kw--contact2{background:#fff}
.kw-faq{background:#fff;padding-block:clamp(48px,6vw,80px) clamp(72px,9vw,120px);
  border-top:1px solid var(--line-2)}
.kw-faq__list{margin-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--line)}
.kw-faq__item{border-bottom:1px solid var(--line)}
.kw-faq__q{position:relative;display:flex;align-items:flex-start;gap:16px;
  padding:clamp(20px,2.4vw,26px) 44px clamp(20px,2.4vw,26px) 0;cursor:pointer;
  font-size:1rem;font-weight:500;line-height:1.85;list-style:none}
.kw-faq__q::-webkit-details-marker{display:none}
.kw-faq__q::before{content:'Q';flex:0 0 auto;font-family:var(--f-mono);font-size:.8rem;
  color:var(--sig-ink);line-height:1.9;letter-spacing:.1em}
.kw-faq__q::after{content:'';position:absolute;right:8px;top:50%;width:13px;height:1px;
  background:var(--ink);transition:transform .4s cubic-bezier(.22,.72,.2,1)}
.kw-faq__mark{position:absolute;right:8px;top:50%;width:13px;height:1px;background:var(--ink);
  transform:rotate(90deg);transition:transform .4s cubic-bezier(.22,.72,.2,1);pointer-events:none}
.kw-faq__item[open] .kw-faq__mark{transform:rotate(0deg)}
.kw-faq__a{display:flex;gap:16px;padding:0 44px clamp(24px,2.8vw,30px) 0;
  font-size:.9375rem;line-height:2;color:var(--muted)}
.kw-faq__a::before{content:'A';flex:0 0 auto;font-family:var(--f-mono);font-size:.8rem;
  color:var(--muted);line-height:2.05;letter-spacing:.1em}