/*
 * ======================================
 * 追加クラス一覧（共通SCSS取り込み検討用）
 * ======================================
 *
 * .kw-inner / --wide / --mid      - 内側の幅（1200／1360／1280px）＋左右 clamp(24px,4vw,48px)
 * .kw-head / .kw-en / .kw-h2      - 英字（Cormorant イタリック・杉色）＋日本語（明朝）の縦積み見出し
 * .kw-text / --sm / --sub         - 本文（16px／15px の可変サイズ・行高2.2／2.1）と段落間（PC 1.1em／SP 0.8em）
 * .kw-btn / --light               - 細い枠線のボタン（ホバーで墨／生成りが満ちる）＋右の矢印
 * .kw-zoom                        - 写真枠（比率は各セクション側）。ホバーでわずかに拡大
 * [data-aos="kw-reveal"]           - 写真の表示：左から右へ幕が開くように現れ、写真は少し引きながら落ち着く（AOS のカスタム動き）
 * .kw-ph                          - 写真待ちの仮枠
 * .kw-header / .kw-logo / .kw-gnav / .kw-burger / .kw-spnav - ヘッダー（84px固定・TOPはMVに重ねて透明）
 * .kw-footer                      - フッター（ロゴ／ナビ／地図の3列）
 * .kw-hero                        - 下層ページのタイトル（写真背景＋墨ブラウンのカーテン）
 * .kw-cta                         - お問い合わせ誘導（写真背景・電話＋フォームボタン）
 * .kw-sample                      - カットサンプル・試し打ちのバナー（ホバーでテキスト面が墨に）
 * .kw-mv                          - TOPのメインビジュアル（スライダーCMS。ズーム1.05倍・デザインのページャー）
 * .kw-loader                      - ローディング（全ページ。TOPはMVの1枚目、ほかはページの読み込みを待つ・8秒で強制解除）
 * .kw-about / .kw-texture / .kw-formwork / .kw-top-works / .kw-top-news - TOPの各セクション
 * .kw-intro / .kw-finish / .kw-color / .kw-size / .kw-support - ケイウッドの型枠ページ
 * .kw-greeting / .kw-philosophy / .kw-dl / .kw-map - 会社概要ページ
 * .kw-works / .kw-works-list / .kw-lb - 施工事例ページ（カード・案件名一覧・拡大表示）
 * .kw-contact-tel / .kw-form-wrap         - お問い合わせページ（フォームCMSの上書き）
 *
 * ======================================
 * 共通SCSSに不足していたもの
 * ======================================
 *
 * 値の粒度不足：.container（1200px・左右余白なし）と .section（120px／60px）が、デザインの clamp の左右余白・上下余白と合わない
 *               本文が tablet 14px／SP 12px に落ちる（デザインは 16px→14.5px の可変。SP で 14px 未満にしない）
 * 指定方向不足：ヘッダーナビの切り替えが 1100px 固定（デザインは 1080px）。SP の切り替えが 639px（デザインは 768px）
 * 状態不足　　：ヘッダーの「MVに重ねて透明→スクロール後に生成り」の色の切り替え（ロゴ・ナビ線・ボタンの色まで連動）
 *               カード全体ホバーでテキスト面だけ色が変わる表現（カットサンプルのバナー）
 * 構造不足　　：英字＋日本語の縦積み見出し（heading は en 5rem・ja 太字前提で、細い明朝＋小さな英字イタリックが組めない）
 *               写真の比較スライダー（仕上げ×カラーのプレビュー）、写真の拡大表示（複数枚の送り付き）
 * 装飾パターン不足：背景下部の針葉樹林シルエット（About us）
 *
 */

/* ==========================================================================
   土台（デザインの値）
   ========================================================================== */
:root {
  --kw-ink: #3A2E26;          /* 文字の黒（墨にブラウンを混ぜた色） */
  --kw-ink-2: #54473D;        /* 補助テキスト */
  --kw-sumi: #322E2B;         /* 背景・罫線の墨 */
  --kw-kinari: #F4F2EE;       /* 生成り */
  --kw-gray: #6E6C67;
  --kw-line: #C9C6C0;
  --kw-line-2: #DEDAD3;
  --kw-sugi: #B5835A;         /* 杉の赤身 */
  --kw-sugi-l: #9F7554;       /* 明るい背景の杉色の英字 */
  --kw-sugi-d: #DFC08F;       /* 暗い背景の杉色の英字 */
  --kw-beige: #E3D5C3;
  --kw-bg-2: #E9E6E0;
  --kw-bg-3: #EAE6DF;
  --kw-mincho: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --kw-serif: "Cormorant Garamond", "Shippori Mincho", serif;
  --kw-pad: clamp(24px, 4vw, 48px);
  --kw-pad-h: clamp(20px, 3.5vw, 48px);
  /* ヘッダー・MVの画面端からの余白：1360pxより広い画面では、広がった分の1割ずつ内側に寄せる（作業者指示：端に張り付けすぎず、中央にも寄せすぎない） */
  --kw-edge: calc(var(--kw-pad-h) + max(0px, (100vw - 1360px) * .1));
  --kw-header-h: 85px;
  --kw-t16: clamp(14.5px, calc(13.5px + 0.25vw), 16px);
  --kw-t15: clamp(14px, calc(13px + 0.2vw), 15px);
  --kw-para: 1.1em;           /* 本文の段落間（PC 1.1em／SP 0.8em） */
  --kw-btn-gap: 28px;
}
@media (max-width: 767px) {
  :root { --kw-para: 0.8em; --kw-btn-gap: 16px; }
}

/* Claude Design は body に行高・字間を指定していないため normal に戻す */
body {
  background: var(--kw-kinari);
  color: var(--kw-ink);
  font-family: var(--kw-mincho);
  font-size: 16px;
  line-height: normal;
  letter-spacing: normal;
}
@media (max-width: 896px) { body { font-size: 16px; } }
@media (max-width: 639px) { body { font-size: 16px; } }

a { color: var(--kw-ink); transition: color .4s ease, opacity .4s ease, background-color .4s ease, border-color .4s ease; }
a:hover { color: var(--kw-sugi-l); opacity: 1; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3 { font-weight: 500; margin: 0; }
p { margin: 0; }
.kw-nb { display: inline-block; }
/* スマホ（767px以下）だけ効かせる改行／PCだけ効かせる改行 */
.spbr { display: none; }
@media (max-width: 767px) { .spbr { display: inline; } .pcbr, .kw-pc-inline { display: none; } }
.kw-sp-only { display: none; }
@media (max-width: 767px) { .kw-sp-only { display: block; } .kw-pc-only { display: none; } }

/* ページ遷移のフェード（common.js が html に js を付けたときだけ） */
html.js body { opacity: 0; transition: opacity .5s ease; }
html.js.is-loaded body { opacity: 1; }
html.js.is-leaving body { opacity: 0; transition-duration: .4s; }
/* ローダーが画面をおおうので、ページ自体のフェードインはしない（白い画面が一瞬見えるのを防ぐ） */
html.js:not(.is-leaving) body { opacity: 1; transition: none; }

/* スクロールでゆっくりフェードイン：移動量を控えめに（aos.css の 100px を上書き） */
html [data-aos="fade-up"] { transform: translate3d(0, 24px, 0); }

/* 装飾の画像は選択・ドラッグさせない */
.kw-about__bg, .kw-logo__mark { pointer-events: none; user-select: none; }

/* 写真待ちの仮枠 */
.kw-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, #D6D2CB 0 12px, #DAD6CF 12px 24px);
  color: var(--kw-gray); font-size: 12px; line-height: 1.6; letter-spacing: .06em; text-align: center;
}

/* ==========================================================================
   レイアウト・見出し・本文・ボタン
   ========================================================================== */
/* デザインは box-sizing の指定がなく max-width が中身の幅なので、左右の余白ぶんを足す */
.kw-inner { max-width: calc(1200px + var(--kw-pad) * 2); margin: 0 auto; padding-left: var(--kw-pad); padding-right: var(--kw-pad); }
.kw-inner--mid { max-width: calc(1280px + var(--kw-pad) * 2); }

.kw-head { display: flex; flex-direction: column; gap: 6px; }
.kw-head--center { align-items: center; text-align: center; }
@media (max-width: 767px) { .kw-head--center { align-items: flex-start; text-align: left; } }
.kw-en {
  font-family: var(--kw-serif); font-style: italic; text-transform: uppercase;
  font-size: clamp(17px, calc(14px + 0.8vw), 20px); letter-spacing: .16em; color: var(--kw-sugi-l);
}
.kw-dark .kw-en { color: var(--kw-sugi-d); }
.kw-h2 { font-size: clamp(22px, 2.95vw, 40px); line-height: 1.7; letter-spacing: .08em; }
.kw-h2--wide { letter-spacing: .12em; }

.kw-text { display: flex; flex-direction: column; gap: var(--kw-para); font-size: var(--kw-t16); line-height: 2.2; letter-spacing: .05em; }
.kw-text--sm { font-size: var(--kw-t15); line-height: 2.1; color: var(--kw-ink-2); }
.kw-lead { font-size: var(--kw-t15); line-height: 2.1; letter-spacing: .05em; color: var(--kw-ink-2); }
.kw-note { font-size: 13px; line-height: 1.9; color: var(--kw-gray); letter-spacing: .04em; }

.kw-btn {
  display: inline-flex; align-items: center; gap: var(--kw-btn-gap);
  padding: 18px 32px; border: 1px solid var(--kw-sumi);
  color: var(--kw-ink); font-size: 14px; letter-spacing: .12em; line-height: normal;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.kw-btn:hover { background: var(--kw-sumi); color: var(--kw-kinari); }
.kw-btn__arrow { font-family: var(--kw-serif); font-size: 18px; }
.kw-btn--light { border-color: var(--kw-kinari); color: var(--kw-kinari); }
.kw-btn--light:hover { background: var(--kw-kinari); color: var(--kw-ink); }
/* ボタンの置き方：PCは左（--left）／右（--right）、スマホは中央 */
.kw-btn-row { display: flex; }
.kw-btn-row--right { justify-content: flex-end; }
@media (max-width: 767px) { .kw-btn-row { justify-content: center; } }

.kw-zoom { overflow: hidden; }
.kw-zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
a:hover .kw-zoom img, button:hover .kw-zoom img { transform: scale(1.04); }

/* ==========================================================================
   ヘッダー（84px＋下線1px。TOPはMVに重ねて透明・白文字、スクロール後は生成り）
   ========================================================================== */
.kw-header.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(244, 242, 238, 1);
  border-bottom: 1px solid var(--kw-line-2);
  color: var(--kw-ink);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
  --kw-h-sub: var(--kw-gray);
  --kw-h-tel-sub: #5E5147;
  --kw-h-line: #B5835A;
  --kw-h-btn-bg: var(--kw-sumi);
  --kw-h-btn-ink: var(--kw-kinari);
  --kw-h-btn-line: var(--kw-sumi);
  --kw-h-btn-hover-bg: rgba(244, 242, 238, 0);
  --kw-h-btn-hover-line: var(--kw-sumi);
}
/* TOP：スクロール前・メニューを開いていないときは透明 */
html.kw-overlay:not(.is-scrolled):not(.is-menu-open) .kw-header.header {
  background: rgba(244, 242, 238, 0);
  border-bottom-color: rgba(255, 255, 255, .28);
  color: #FFFFFF;
  --kw-h-sub: rgba(255, 255, 255, .82);
  --kw-h-tel-sub: rgba(255, 255, 255, .9);
  --kw-h-line: #FFFFFF;
  --kw-h-btn-bg: rgba(255, 255, 255, 0);
  --kw-h-btn-ink: #FFFFFF;
  --kw-h-btn-line: rgba(255, 255, 255, .8);
  --kw-h-btn-hover-bg: #FFFFFF;
  --kw-h-btn-hover-line: #FFFFFF;
}
.kw-header .header__inner {
  max-width: none; height: 84px; padding: 0 var(--kw-edge);
  justify-content: space-between; gap: 24px;
}
.kw-logo.header__logo { display: flex; align-items: center; gap: 12px; color: inherit; line-height: 1; transition: opacity .4s ease, color .4s ease; }
.kw-logo:hover { color: inherit; opacity: .6; }
.kw-logo__mark { flex: none; display: block; width: 31px; height: 46px; }
.kw-logo__text { display: flex; flex-direction: column; gap: 2px; }
.kw-logo__en { font-family: var(--kw-serif); text-transform: uppercase; font-weight: 600; font-size: 28px; letter-spacing: .2em; }
.kw-logo__ja { font-weight: 500; font-size: 11px; letter-spacing: .32em; color: var(--kw-h-sub); transition: color .4s ease; }

.kw-header__right { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 40px); }
.kw-gnav.header__nav { gap: clamp(18px, 2.2vw, 34px); margin: 0; }
.kw-gnav .header__nav-item a {
  position: relative; padding: 8px 0; color: inherit;
  font-size: 14px; font-weight: 500; letter-spacing: .1em; line-height: normal;
}
.kw-gnav .header__nav-item a::after {
  bottom: -2px; left: 50%; width: 0; height: 1px; background: var(--kw-h-line);
  transform: translateX(-50%); transition: width .4s ease, background .4s ease;
}
.kw-gnav .header__nav-item a:hover { color: inherit; }
.kw-gnav .header__nav-item a:hover::after,
.kw-gnav .header__nav-item.is-current a::after { width: 24px; left: 50%; }

.kw-header__contact { display: flex; align-items: center; gap: 16px; }
.kw-header__tel {
  display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.3;
  padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid; border-color: inherit;
}
.kw-header .kw-header__tel { border-left-color: var(--kw-line-2); }
html.kw-overlay:not(.is-scrolled):not(.is-menu-open) .kw-header__tel { border-left-color: rgba(255, 255, 255, .28); }
.kw-header__tel-num { font-weight: 600; font-size: 20px; letter-spacing: .06em; white-space: nowrap; }
.kw-header__tel-num small { font-size: 12px; letter-spacing: .14em; margin-right: 6px; }
.kw-header__tel-sub { font-size: 12px; color: var(--kw-h-tel-sub); letter-spacing: .04em; white-space: nowrap; transition: color .4s ease; }
.kw-header__mail {
  display: flex; align-items: center; justify-content: center; width: 52px; height: 52px;
  border: 1px solid var(--kw-h-btn-line); background: var(--kw-h-btn-bg); color: var(--kw-h-btn-ink);
  transition: background .4s ease, color .4s ease, border-color .4s ease;
}
.kw-header__mail:hover { background: var(--kw-h-btn-hover-bg); border-color: var(--kw-h-btn-hover-line); color: var(--kw-ink); }

/* ハンバーガー（1080px未満）：MENU／CLOSE の文字＋2本線。幅は CLOSE に合わせて固定 */
.kw-burger.nav-toggle {
  display: none; position: fixed; top: 18px; right: var(--kw-edge); z-index: 60;
  width: auto; height: 48px; padding: 0; background: none; backdrop-filter: none; border-radius: 0;
  align-items: center; gap: 12px; color: var(--kw-ink);
  font-family: var(--kw-serif); text-transform: uppercase; font-size: 15px; letter-spacing: .2em;
  transition: color .4s ease;
}
html.kw-overlay:not(.is-scrolled):not(.is-menu-open) .kw-burger { color: #FFFFFF; }
.kw-burger__label { position: relative; display: inline-grid; text-align: right; }
.kw-burger__label span { grid-area: 1 / 1; transition: opacity .3s ease; }
.kw-burger__label span + span { opacity: 0; }
.kw-burger.is-active .kw-burger__label span:first-child { opacity: 0; }
.kw-burger.is-active .kw-burger__label span + span { opacity: 1; }
.kw-burger__lines { position: relative; display: block; width: 28px; height: 8px; }
.kw-burger .nav-toggle__line {
  position: absolute; left: 0; top: 0; width: 28px; height: 1px; background: currentColor; transform: none;
  transition: transform .4s ease, top .4s ease, background .4s ease;
}
.kw-burger .nav-toggle__line:nth-child(1) { top: 0; }
.kw-burger .nav-toggle__line:nth-child(2) { top: 8px; }
.kw-burger.is-active .nav-toggle__line:nth-child(1) { top: 4px; transform: rotate(14deg); }
.kw-burger.is-active .nav-toggle__line:nth-child(2) { top: 4px; transform: rotate(-14deg); opacity: 1; }

.kw-spnav.sp-nav {
  top: var(--kw-header-h); bottom: auto; height: calc(100dvh - var(--kw-header-h)); z-index: 45;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 40px;
  padding: 48px 28px; background: var(--kw-sumi); color: var(--kw-kinari);
  overflow: auto; overscroll-behavior: contain;
  transform: translateY(-12px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s;
}
.kw-spnav.sp-nav.is-open { transform: translateY(0); }
.kw-spnav .sp-nav__list { max-width: none; text-align: left; }
.kw-spnav .sp-nav__item { border-bottom: 1px solid #4A4845; }
/* 開くとき：項目を上から順に、最後に電話・メールのボタンを少し遅れてふわっと出す（閉じるときは遅らせない） */
.kw-spnav .sp-nav__item, .kw-spnav .sp-nav__bottom { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s ease; transition-delay: 0s; }
.kw-spnav.is-open .sp-nav__item, .kw-spnav.is-open .sp-nav__bottom { opacity: 1; transform: translateY(0); }
.kw-spnav.is-open .sp-nav__item:nth-child(1) { transition-delay: .08s; }
.kw-spnav.is-open .sp-nav__item:nth-child(2) { transition-delay: .14s; }
.kw-spnav.is-open .sp-nav__item:nth-child(3) { transition-delay: .2s; }
.kw-spnav.is-open .sp-nav__item:nth-child(4) { transition-delay: .26s; }
.kw-spnav.is-open .sp-nav__item:nth-child(5) { transition-delay: .32s; }
.kw-spnav.is-open .sp-nav__bottom { transition-delay: .42s; }
.kw-spnav .sp-nav__item:first-child { border-top: 0; }
.kw-spnav .sp-nav__link {
  justify-content: space-between; align-items: baseline; padding: 20px 0;
  color: var(--kw-kinari); font-size: 17px; font-weight: 400; letter-spacing: .1em; transition: color .4s ease;
}
.kw-spnav .sp-nav__link::after { display: none; }
.kw-spnav .sp-nav__link:hover { background: none; color: var(--kw-sugi-d); }
.kw-spnav .sp-nav__en {
  font-family: var(--kw-serif); font-style: italic; text-transform: uppercase; font-size: 12px; letter-spacing: normal;
  color: var(--kw-sugi-d); opacity: 1; margin: 0; padding: 0;
}
.kw-spnav .sp-nav__bottom { max-width: none; margin-top: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.kw-spnav__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; }
.kw-spnav__btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; height: 56px;
  border: 1px solid #6E6A64; color: var(--kw-kinari);
  font-weight: 500; font-size: 14px; letter-spacing: .04em; white-space: nowrap;
}
.kw-spnav__btn--tel { font-size: 16px; }
.kw-spnav__btn:hover { background: var(--kw-kinari); color: var(--kw-sumi); }
.kw-spnav__btn svg { flex: none; }
.kw-spnav__hours { font-size: 13px; color: #BDB9B2; text-align: center; }

@media (max-width: 1079px) {
  .kw-header__right { display: none; }
  .kw-burger.nav-toggle { display: flex; }
}
@media (min-width: 1080px) {
  .kw-spnav.sp-nav { display: none; }
}
html.is-menu-open, html.is-menu-open body { overflow: hidden; }

/* ==========================================================================
   下層ページのタイトル
   ========================================================================== */
.kw-main--sub { padding-top: var(--kw-header-h); }
.kw-hero { position: relative; background-color: #3A332D; background-position: center; background-size: cover; background-repeat: no-repeat; }
.kw-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(40, 32, 26, .55), rgba(40, 32, 26, .62)); }
.kw-hero--product { background-position: center 40%; }
.kw-hero__inner {
  position: relative; max-width: calc(1200px + var(--kw-pad) * 2); margin: 0 auto;
  padding: clamp(120px, 14vw, 200px) var(--kw-pad) clamp(44px, 5vw, 64px);
  display: flex; flex-direction: column; gap: 2px;
}
.kw-hero__en { font-family: var(--kw-serif); font-style: italic; text-transform: uppercase; font-size: clamp(18px, 2.2vw, 22px); letter-spacing: .16em; color: #E3C3A3; }
.kw-hero__title { color: #FFFFFF; font-size: clamp(26px, 3.6vw, 48px); letter-spacing: .1em; line-height: 1.5; }
.kw-hero__crumb { position: absolute; right: var(--kw-pad); bottom: calc(clamp(44px, 5vw, 64px) + 14px); font-size: 13px; letter-spacing: .1em; color: #FFFFFF; }
.kw-hero__crumb { display: flex; align-items: center; }
.kw-hero__crumb a { color: var(--kw-beige); }
.kw-hero__home { display: flex; }
.kw-hero__home svg { display: block; }
.kw-hero__sep { margin: 0 .9em; }
.kw-hero__crumb a:hover { color: #FFFFFF; }
@media (max-width: 767px) { .kw-hero__crumb { display: none; } }

/* ==========================================================================
   お問い合わせ誘導（全ページ共通）
   ========================================================================== */
.kw-cta { position: relative; background-color: #3A332D; background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--kw-kinari); }
.kw-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(40, 32, 26, .6), rgba(40, 32, 26, .68)); }
.kw-cta__inner {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 16px; padding: clamp(72px, 9vw, 120px) var(--kw-pad);
}
.kw-cta__en { font-family: var(--kw-serif); font-style: italic; text-transform: uppercase; font-size: clamp(17px, 2vw, 20px); letter-spacing: .16em; color: var(--kw-sugi-d); }
.kw-cta__title { font-size: clamp(21px, 2.4vw, 32px); letter-spacing: .1em; }
.kw-cta__lead { font-size: 14px; line-height: 2; letter-spacing: .05em; color: #D9D5CE; }
.kw-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 40px; margin-top: 12px; }
.kw-cta__tel { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--kw-kinari); line-height: 1.3; }
.kw-cta__tel:hover { color: var(--kw-kinari); opacity: .7; }
.kw-cta__tel-num { font-weight: 500; font-size: clamp(24px, 2.9vw, 29px); letter-spacing: .08em; }
.kw-cta__tel-num small { font-size: var(--kw-t15); margin-right: 10px; }
.kw-cta__tel-sub { font-size: 14px; color: #FFFFFF; }

/* ==========================================================================
   カットサンプル・試し打ちのバナー（TOP・型枠ページ）
   ========================================================================== */
.kw-sample { padding-top: clamp(88px, 11vw, 140px); padding-bottom: clamp(88px, 11vw, 140px); }
.kw-sample--flush { padding-top: 0; }
.kw-sample__link { display: flex; flex-wrap: wrap; color: var(--kw-ink); }
.kw-sample__link:hover { color: #FFFFFF; }
.kw-sample__photo { position: relative; flex: 1.2 1 400px; min-height: 340px; overflow: hidden; }
.kw-sample__photo span { position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1); transition: transform .8s ease; }
.kw-sample__link:hover .kw-sample__photo span { transform: scale(1.06); }
.kw-sample__body {
  flex: 1.4 1 420px; box-sizing: content-box; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: clamp(36px, 5vw, 64px); background: #FFFFFF; transition: background-color .5s ease, color .5s ease;
}
.kw-sample__title { font-size: clamp(19px, 2.2vw, 28px); font-weight: 500; letter-spacing: .1em; line-height: 1.6; }
.kw-sample__text { font-size: var(--kw-t15); line-height: 2; letter-spacing: .05em; color: var(--kw-ink-2); transition: color .5s ease; }
.kw-sample__btn {
  align-self: flex-start; display: flex; align-items: center; gap: var(--kw-btn-gap); margin-top: 8px; padding: 18px 32px;
  background: var(--kw-sumi); border: 1px solid var(--kw-sumi); color: #FFFFFF; font-size: 14px; letter-spacing: .12em;
  transition: background-color .5s ease, border-color .5s ease, color .5s ease;
}
.kw-sample__link:hover .kw-sample__body { background: var(--kw-sumi); }
.kw-sample__link:hover .kw-sample__text { color: #FFFFFF; }
.kw-sample__link:hover .kw-sample__btn { background: #FFFFFF; border-color: #FFFFFF; color: var(--kw-sumi); }
@media (max-width: 767px) {
  .kw-sample__title { text-align: center; }
  .kw-sample__btn { align-self: center; }
}

/* ==========================================================================
   フッター
   ========================================================================== */
.kw-footer { background: var(--kw-sumi); color: var(--kw-kinari); }
.kw-footer__inner {
  max-width: calc(1360px + var(--kw-pad-h) * 2); margin: 0 auto; padding: clamp(64px, 8vw, 104px) var(--kw-pad-h) 40px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(40px, 5vw, 72px);
}
.kw-footer__info { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; text-align: center; }
.kw-footer .kw-logo { flex-direction: column; gap: 16px; color: var(--kw-kinari); }
.kw-footer .kw-logo__mark { width: 60px; height: 88px; }
.kw-footer .kw-logo__text { align-items: center; gap: 6px; }
.kw-footer .kw-logo__en { font-size: clamp(28px, 3.4vw, 34px); }
.kw-footer .kw-logo__ja { font-size: 12px; font-weight: 400; color: #BDB9B2; }
.kw-footer__address { font-size: 14px; line-height: 2; color: #D9D5CE; letter-spacing: .04em; }
.kw-footer__nav { display: flex; flex-direction: column; align-self: start; }
.kw-footer__nav a {
  display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #4A4845;
  color: var(--kw-kinari); font-size: 14px; letter-spacing: .1em;
}
.kw-footer__nav a:hover { color: var(--kw-sugi-d); }
.kw-footer__nav-en { font-family: var(--kw-serif); font-style: italic; text-transform: uppercase; font-size: 14px; letter-spacing: normal; color: #A9A59E; }
.kw-footer__map { display: block; width: 100%; height: auto; min-height: 240px; border: 0; align-self: stretch; filter: grayscale(1); transition: filter .5s ease; }
.kw-footer__map:hover { filter: grayscale(0); }
.kw-footer__copy {
  max-width: calc(1360px + var(--kw-pad-h) * 2); margin: 0 auto; padding: 24px var(--kw-pad-h) 32px; border-top: 1px solid #4A4845;
  display: flex; justify-content: center; flex-wrap: wrap;
  font-family: var(--kw-serif); text-transform: uppercase; font-size: 13px; letter-spacing: .14em; color: #A9A59E; text-align: center;
}

/* ==========================================================================
   TOP：メインビジュアル
   ========================================================================== */
.kw-mv {
  /* キャッチ・ページャーはヘッダーと同じく画面の端から --kw-edge の余白 */
  --kw-mv-x: var(--kw-edge);
  position: relative; height: clamp(420px, 112vw, 100svh); min-height: clamp(420px, 112vw, 600px);
  overflow: hidden; background: #3A332D; color: #FFFFFF;
}
/* 写真の枠：#slideshow（外枠）いっぱい。静止画（確認用）もCMSスライダーも同じ構造（.swiper-slide > .main_slider__inner > img） */
/* CMS の中の z-index が暗幕・キャッチ・ページャーより上に出ないよう、#slideshow の中に閉じ込める */
#slideshow { position: absolute; inset: 0; z-index: 0; isolation: isolate; }
.kw-mv__static, .kw-mv__slide { position: absolute; inset: 0; }
.kw-mv__slide { opacity: 0; transition: opacity 1.8s ease; }
.kw-mv__slide.is-active { opacity: 1; }
#slideshow .main_slider__inner { height: 100%; overflow: hidden; }
#slideshow .main_slider__inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 確認用の静止画：表示中の写真を1.05倍までゆっくり寄せる（CMSのズームを1.05倍に抑えたときと同じ動き） */
.kw-mv__slide .main_slider__inner { transform: scale(1); transition: transform 7.8s linear; }
.kw-mv__slide.is-active .main_slider__inner { transform: scale(1.05); }
/* CMSスライダー（cms_id=11。中身は Swiper のフェード）
   出力：#cms-slider-1-1-area > .slider_wrapper > .main_slider__outer > .main_slider > .swiper-wrapper > .swiper-slide > .main_slider__inner > img
   ・高さ：CMS は高さ自動なので、すべて #slideshow の100%にそろえる（CMS の CSS より強く効くよう id を2つ重ねる）
   ・ズーム：CMS が .main_slider__inner に JS でかける（設定は1.1倍から）。1.05倍への抑えは js/top.js
   ・ページャー：CMS 標準のページャーは隠し、デザインのページャー（.kw-mv__pager）を CMS の写真に合わせて動かす（js/top.js） */
#slideshow #cms-slider-1-1-area { position: absolute; inset: 0; }
#slideshow #cms-slider-1-1-area .slider_wrapper { --swiper-wrapper-height: 100%; position: absolute; inset: 0; height: 100%; margin: 0; transition: opacity 1s ease; }
#slideshow #cms-slider-1-1-area .main_slider__outer, #slideshow #cms-slider-1-1-area .main_slider,
#slideshow #cms-slider-1-1-area .swiper-wrapper, #slideshow #cms-slider-1-1-area .swiper-slide { height: 100%; }
#slideshow #cms-slider-1-1-area .main_catch__outer { display: none; }
#slideshow #cms-slider-1-1-area .swiper-pagination,
#slideshow #cms-slider-1-1-area .swiper-button-prev,
#slideshow #cms-slider-1-1-area .swiper-button-next { display: none; }
.kw-mv__veil { position: absolute; inset: 0; pointer-events: none; background: rgba(52, 40, 30, .42); }
.kw-mv__veil--side { background: linear-gradient(90deg, rgba(40, 32, 26, .35), rgba(40, 32, 26, 0) 60%); }
.kw-mv__veil--top { bottom: auto; height: 200px; background: linear-gradient(rgba(40, 32, 26, .4), rgba(40, 32, 26, 0)); }
.kw-mv__copy {
  position: relative; height: 100%; box-sizing: border-box;
  padding: calc(85px + 32px) var(--kw-mv-x) var(--kw-mv-x);
  display: flex; flex-direction: column; justify-content: flex-end; gap: 32px;
}
.kw-mv__title { font-weight: 500; font-size: clamp(26px, 4.3vw, 62px); line-height: 1.6; letter-spacing: .12em; text-shadow: 0 2px 24px rgba(30, 24, 20, .35); }
.kw-mv__sub { margin: 0 0 -0.55em; font-size: clamp(15px, calc(13.5px + 0.4vw), 18px); line-height: 2.1; letter-spacing: .08em; color: #FFFFFF; }
.kw-mv__pager { position: absolute; right: var(--kw-mv-x); bottom: var(--kw-mv-x); display: flex; align-items: center; gap: 16px; font-size: 14px; letter-spacing: .12em; }
.kw-mv__dots { display: flex; gap: 8px; }
.kw-mv__dot { all: unset; cursor: pointer; padding: 10px 0; }
.kw-mv__dot span { display: block; width: 36px; height: 1px; background: rgba(255, 255, 255, .4); transition: background .6s ease; }
.kw-mv__dot.is-active span { background: #FFFFFF; }
@media (max-width: 767px) {
  .kw-mv__copy { padding-bottom: calc(var(--kw-mv-x) + 44px); }
  .kw-mv__title { position: relative; top: 5px; }
  .kw-mv__sub { position: relative; top: -5px; font-size: 13.5px; } /* 作業者指示：スマホは一回り小さく（デザインは15px） */
  /* 作業者指示：スマホのページャーは二回り小さく（デザインは文字14px・バー36px） */
  .kw-mv__pager { gap: 12px; font-size: 12px; }
  .kw-mv__dots { gap: 6px; }
  .kw-mv__dot span { width: 26px; }
}

/* ==========================================================================
   TOP：About us（背景下部に針葉樹林のシルエット）
   ========================================================================== */
.kw-about { position: relative; }
.kw-about__bg { position: absolute; left: 0; right: 0; bottom: 0; height: 33.2vw; background-position: center bottom; background-size: cover; background-repeat: no-repeat; }
@media (max-width: 767px) { .kw-about__bg { height: max(33.2vw, 320px); } }
.kw-about__inner {
  position: relative; padding-top: clamp(96px, 12vw, 176px); padding-bottom: clamp(96px, 12vw, 176px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 6vw, 96px); align-items: start;
}
.kw-about__body { display: flex; flex-direction: column; gap: 40px; } /* 見出しと文章は上揃え（作業者指示。デザインは文章を最大48px下げていた） */

/* ==========================================================================
   TOP：触れるコンクリート（墨の帯・写真3枚）
   ========================================================================== */
.kw-texture { background: var(--kw-sumi); color: var(--kw-kinari); }
.kw-texture__inner {
  padding-top: clamp(96px, 12vw, 168px); padding-bottom: clamp(96px, 12vw, 168px);
  display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(32px, 4vw, 56px);
}
.kw-texture__main { flex: 1.25 1 440px; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(48px, 6vw, 80px); }
.kw-texture__head { display: flex; flex-direction: column; gap: clamp(28px, 3vw, 40px); }
.kw-texture__text { display: flex; flex-direction: column; gap: 20px; font-size: var(--kw-t15); line-height: 2.2; letter-spacing: .06em; color: #D9D5CE; }
.kw-texture__pair { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(32px, 4vw, 56px); }
.kw-texture__pair > div { flex: 1 1 200px; min-width: 0; }
.kw-texture__pair > div + div { padding-bottom: clamp(0px, 4vw, 56px); }
.kw-texture__side { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; }
.kw-photo { position: relative; margin: 0; overflow: hidden; background: #3A3936; }
.kw-photo > img, .kw-photo > .kw-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kw-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(30, 24, 20, 0) 60%, rgba(30, 24, 20, .6)); }
.kw-photo figcaption {
  position: absolute; left: 16px; bottom: 12px; z-index: 1; pointer-events: none;
  font-family: var(--kw-serif); font-style: italic; text-transform: uppercase; font-size: var(--kw-t16); letter-spacing: .14em; color: #FFFFFF;
}
.kw-photo--43 { aspect-ratio: 4 / 3; width: 100%; }
.kw-photo--tall { flex: 1; width: 100%; min-height: 420px; }
.kw-photo--tall::after { background: linear-gradient(180deg, rgba(30, 24, 20, 0) 70%, rgba(30, 24, 20, .55)); }
.kw-photo--tall figcaption { left: 20px; bottom: 16px; font-size: 18px; }
.kw-texture__pair--sp { display: none; }
@media (max-width: 767px) {
  .kw-texture__pair--pc { display: none; }
  .kw-photo--tall { min-height: 320px; }
  .kw-texture__pair--sp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .kw-texture__pair--sp .kw-photo::after { background: linear-gradient(180deg, rgba(30, 24, 20, 0) 55%, rgba(30, 24, 20, .6)); }
  .kw-texture__pair--sp figcaption { left: 10px; bottom: 8px; font-size: 13px; }
}

/* ==========================================================================
   TOP：ケイウッド型枠とは（3つの仕上げのカード）
   ========================================================================== */
.kw-formwork { padding-top: clamp(80px, 10vw, 144px); padding-bottom: clamp(80px, 10vw, 144px); }
.kw-formwork__head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(32px, 5vw, 80px); align-items: start; margin-bottom: clamp(56px, 7vw, 96px); /* 見出しと文章は上揃え（作業者指示） */
}
.kw-formwork__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(32px, 3vw, 48px); }
.kw-fcard { display: flex; flex-direction: column; gap: 20px; color: var(--kw-ink); }
.kw-fcard:hover { color: var(--kw-ink); }
.kw-fcard__img { aspect-ratio: 4 / 3; background: var(--kw-bg-2); }
.kw-fcard__meta { display: flex; align-items: baseline; gap: 14px; } /* 写真下の罫線は外す（作業者指示。施工事例のカードとそろえる） */
.kw-fcard__no { font-size: var(--kw-t16); letter-spacing: .06em; color: var(--kw-sugi-l); }
.kw-fcard__name { font-size: clamp(18px, 2.2vw, 22px); font-weight: 500; letter-spacing: .08em; }
.kw-fcard__en { font-family: var(--kw-serif); font-style: italic; text-transform: uppercase; font-size: 14px; letter-spacing: .12em; color: var(--kw-gray); }
.kw-fcard__desc { font-size: 14px; line-height: 2; color: var(--kw-ink-2); }
.kw-formwork__btn { margin-top: clamp(48px, 6vw, 72px); }

/* ==========================================================================
   TOP：施工事例
   ========================================================================== */
.kw-top-works { background: var(--kw-bg-2); }
.kw-top-works__inner { padding-top: clamp(80px, 10vw, 144px); padding-bottom: clamp(80px, 10vw, 144px); }
.kw-top-works__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: clamp(48px, 6vw, 72px); }
.kw-top-works__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(24px, 3vw, 40px); }
@media (max-width: 767px) { .kw-top-works__grid { gap: 32px; } }
.kw-wcard { display: flex; flex-direction: column; gap: 18px; color: var(--kw-ink); }
.kw-wcard:hover { color: var(--kw-ink); }
@media (max-width: 767px) { .kw-wcard { gap: 10px; } }
.kw-wcard__img { aspect-ratio: 3 / 2; background: #D6D2CB; }
.kw-wcard__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.kw-wcard__name { font-size: clamp(16px, 1.9vw, 19px); font-weight: 500; letter-spacing: .08em; }
.kw-wcard__place { flex: none; font-size: 13px; color: var(--kw-gray); letter-spacing: .08em; }

/* ==========================================================================
   TOP：お知らせ（お知らせCMS。CMSのテンプレートもこの形で出す）
   ========================================================================== */
.kw-top-news {
  padding-top: clamp(80px, 10vw, 144px);
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start;
}
@media (max-width: 767px) { .kw-top-news { grid-template-columns: minmax(0, 1fr); } }
/* 件数が増えたら枠の中で縦スクロール（PC 240px・スマホは1件が2段になるので 300px。作業者指示） */
.kw-news { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--kw-line) transparent; }
@media (max-width: 767px) { .kw-news { max-height: 300px; } }
.kw-news::-webkit-scrollbar { width: 4px; }
.kw-news::-webkit-scrollbar-thumb { background: var(--kw-line); }
/* 上の線は1件目に付ける（記事が0件のときに線だけ残らないように） */
.kw-news__item { border-bottom: 1px solid var(--kw-line); }
.kw-news__item:first-of-type { border-top: 1px solid var(--kw-line); }
.kw-news__link { display: flex; align-items: baseline; gap: 6px 32px; padding: 22px 16px; color: var(--kw-ink); transition: background-color .4s ease; }
@media (max-width: 767px) { .kw-news__link { flex-direction: column; padding: 16px 12px; } }
.kw-news__date { flex: none; font-weight: 500; font-size: 15px; letter-spacing: .08em; color: var(--kw-sugi-l); } /* 数字は電話番号と同じ明朝（作業者指示） */
.kw-news__title { flex: 1; font-size: var(--kw-t15); line-height: 1.9; letter-spacing: .05em; }
/* タイトルに <a> がある行は js/top.js が行全体のリンク（a.kw-news__link＋右端の矢印）に置き換える。置き換え前も下線は付けない */
.kw-news__title a { color: inherit; text-decoration: none; }
.kw-news__arrow { flex: none; align-self: center; margin-left: auto; font-family: var(--kw-serif); font-size: 18px; color: var(--kw-sugi-l); transition: transform .4s ease; }
@media (max-width: 767px) { .kw-news__arrow { display: none; } }
a.kw-news__link:hover { color: var(--kw-ink); background: rgba(159, 117, 84, .05); } /* リンクのある行だけ、hover でごく薄い杉色の背景。文字色は変えない（作業者指示） */
a.kw-news__link:hover .kw-news__arrow { transform: translateX(4px); }
/* 新着ラベル（CMSの <if_disp_new>） */
.kw-news__new { display: inline-block; margin-left: 10px; padding: 0 8px; border: 1px solid var(--kw-sugi-l); color: var(--kw-sugi-l); font-family: var(--kw-serif); font-size: 11px; line-height: 1.6; letter-spacing: .1em; vertical-align: 2px; }

/* ==========================================================================
   ケイウッドの型枠：導入・3つの仕上げ
   ========================================================================== */
.kw-intro {
  padding-top: clamp(88px, 11vw, 160px); padding-bottom: clamp(88px, 11vw, 160px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 96px);
}
.kw-intro .kw-text { gap: 24px; }

.kw-finish { background: var(--kw-bg-3); }
.kw-finish__inner { padding-top: clamp(88px, 11vw, 160px); padding-bottom: clamp(88px, 11vw, 160px); }
.kw-finish__head { margin-bottom: clamp(56px, 7vw, 96px); }
.kw-finish__list { display: flex; flex-direction: column; gap: clamp(72px, 9vw, 128px); }
.kw-finish__item { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.kw-finish__item--rev { direction: rtl; }
.kw-finish__item--rev > * { direction: ltr; }
.kw-finish__visual { position: relative; }
.kw-finish__img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--kw-bg-2); }
.kw-finish__img img, .kw-finish__img .kw-ph { width: 100%; height: 100%; object-fit: cover; }
.kw-finish__surface {
  position: absolute; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px);
  width: clamp(84px, 13vw, 150px); aspect-ratio: 1 / 1; border-radius: 50%;
  background-position: center; background-size: 180%; background-repeat: no-repeat;
}
.kw-finish__body { display: flex; flex-direction: column; gap: 20px; }
.kw-finish__title { display: flex; align-items: baseline; gap: clamp(16px, 2vw, 24px); flex-wrap: wrap; }
.kw-finish__no { font-weight: 500; font-size: clamp(30px, 4vw, 40px); line-height: 1; letter-spacing: .06em; color: var(--kw-sugi); }
.kw-finish__name { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; font-size: clamp(22px, 3vw, 30px); letter-spacing: .1em; }
.kw-finish__en { font-family: var(--kw-serif); font-style: italic; text-transform: uppercase; font-weight: 500; font-size: var(--kw-t16); letter-spacing: .14em; color: var(--kw-gray); }
.kw-finish__text { font-size: var(--kw-t16); line-height: 2.1; letter-spacing: .05em; }

/* ==========================================================================
   ケイウッドの型枠：仕上げ×カラーのプレビュー
   ========================================================================== */
.kw-color { background: #FFFFFF; }
.kw-color__inner { padding-top: clamp(80px, 10vw, 144px); padding-bottom: clamp(80px, 10vw, 144px); }
.kw-color__head {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(24px, 5vw, 80px); align-items: start; margin-bottom: clamp(40px, 5vw, 64px); /* 見出しと文章は上揃え（作業者指示） */
}
.kw-color__body { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 56px); align-items: flex-start; }
.kw-color__view { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kw-stage { --split: 50%; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #999; user-select: none; touch-action: none; cursor: ew-resize; }
.kw-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .5s ease; }
.kw-stage__colored { --b: 1.18; --d: .25; --c: #E4DED3; position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split)); }
.kw-stage__colored img { filter: brightness(var(--b)); }
.kw-stage__hue, .kw-stage__depth { position: absolute; inset: 0; background-color: var(--c); }
.kw-stage__hue { mix-blend-mode: color; transition: background-color .6s ease; }
.kw-stage__depth { mix-blend-mode: multiply; opacity: var(--d); transition: background-color .6s ease, opacity .6s ease; }
.kw-stage__handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 1px; background: rgba(255, 255, 255, .9); pointer-events: none; }
.kw-stage__knob {
  position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); display: flex; align-items: center; justify-content: center;
  font-size: var(--kw-t15); color: var(--kw-ink); box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
}
.kw-stage__tag { position: absolute; bottom: 14px; font-size: 12px; letter-spacing: .12em; color: #FFFFFF; background: rgba(30, 29, 28, .6); padding: 3px 10px; pointer-events: none; }
.kw-stage__tag--l { left: 14px; }
.kw-stage__tag--r { right: 14px; }
.kw-color__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: clamp(17px, 2vw, 20px); letter-spacing: .06em; }
.kw-color__panel { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.kw-color__block { display: flex; flex-direction: column; gap: 16px; }
.kw-color__block + .kw-color__block { padding-top: 28px; border-top: 1px solid var(--kw-line-2); }
.kw-color__label { display: flex; flex-direction: column; gap: 2px; }
.kw-color__label-en { font-family: var(--kw-serif); text-transform: uppercase; font-size: 14px; letter-spacing: .3em; color: var(--kw-sugi-l); }
.kw-color__label-ja { font-size: 17px; font-weight: 500; letter-spacing: .06em; }
.kw-color__finishes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kw-pick { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 8px; }
.kw-pick__thumb {
  position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; outline: 1px solid var(--kw-line-2);
  background-position: center; background-size: 260%; background-repeat: no-repeat; transition: background-size .6s ease;
}
.kw-pick:hover .kw-pick__thumb { background-size: 285%; }
.kw-pick__thumb::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--kw-sumi); opacity: 0; transition: opacity .3s ease; }
.kw-pick.is-active .kw-pick__thumb::after { opacity: 1; }
.kw-pick:focus-visible .kw-pick__thumb { outline: 2px solid var(--kw-sugi); }
.kw-pick__name { font-size: 14px; letter-spacing: .06em; text-align: center; }
.kw-color__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 16px 8px; }
.kw-chip { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kw-chip__dot { position: relative; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .3s ease; }
.kw-chip:hover .kw-chip__dot { transform: translateY(-2px); }
.kw-chip__dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--kw-sumi); opacity: 0; transition: opacity .3s ease; }
.kw-chip.is-active .kw-chip__dot::after { opacity: 1; }
.kw-chip:focus-visible .kw-chip__dot::after { opacity: 1; border-color: var(--kw-sugi); }
.kw-chip__name { font-size: 13px; letter-spacing: .06em; }
.kw-chip__dot--shiro { background: #E4DED3; }
.kw-chip__dot--suna { background: #C8B18E; }
.kw-chip__dot--kuri { background: #9C7656; }
.kw-chip__dot--koge { background: #5E4636; }
.kw-chip__dot--sumi { background: #3C3B39; }

/* ==========================================================================
   ケイウッドの型枠：標準サイズ
   ========================================================================== */
.kw-size { padding-top: clamp(88px, 11vw, 160px); padding-bottom: clamp(88px, 11vw, 160px); }
.kw-size__head { margin-bottom: clamp(48px, 6vw, 72px); }
.kw-size__figure { max-width: 760px; margin: 0 auto clamp(48px, 6vw, 72px); }
.kw-size__figure svg { display: block; width: 100%; height: auto; }
.kw-size__figure text { font-family: var(--kw-mincho); font-size: 28px; }
@media (max-width: 767px) { .kw-size__figure text { font-size: 40px; } }
.kw-size__grid {
  position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border-top: 1px solid var(--kw-sumi);
}
.kw-size__grid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--kw-sumi); }
.kw-size__cell { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 32px 24px 32px 0; border-bottom: 1px solid var(--kw-line); }
.kw-size__label { font-size: 14px; letter-spacing: .14em; color: var(--kw-ink-2); }
.kw-size__num { font-weight: 500; font-size: clamp(26px, 4.6vw, 60px); line-height: 1.2; letter-spacing: .02em; white-space: nowrap; }
.kw-size__num small { font-size: clamp(12px, 1.6vw, 20px); margin-left: clamp(3px, 0.6vw, 8px); color: var(--kw-gray); }
.kw-size__joint { font-weight: 500; font-size: clamp(25px, 3vw, 40px); line-height: 1.6; }
.kw-size__note { margin-top: 20px; font-size: 14px; color: var(--kw-gray); letter-spacing: .06em; }
@media (max-width: 767px) {
  .kw-size__grid { grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.4fr) minmax(0, 1.7fr); }
  .kw-size__cell { padding: 24px 12px 24px 0; }
  .kw-size__cell--joint { grid-column: 1 / -1; }
  .kw-size__num { font-size: clamp(24px, 8.4vw, 34px); }
  .kw-size__num small { font-size: clamp(12px, 3.6vw, 14px); }
}

/* ==========================================================================
   ケイウッドの型枠：ご相談いただけること
   ========================================================================== */
.kw-support { background: var(--kw-bg-2); margin-bottom: clamp(88px, 11vw, 140px); }
.kw-support__inner { padding-top: clamp(80px, 10vw, 144px); padding-bottom: clamp(80px, 10vw, 144px); }
.kw-support__head { margin-bottom: clamp(48px, 6vw, 72px); }
.kw-support__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.kw-support__card { display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; padding: clamp(28px, 3vw, 36px) clamp(24px, 2.6vw, 32px); }
.kw-support__title { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; font-size: clamp(17px, 2vw, 20px); letter-spacing: .08em; }
.kw-support__title svg { flex: none; width: 54px; height: 54px; }
.kw-support__text { font-size: 14px; line-height: 2; color: var(--kw-ink-2); }
.kw-support__note { font-size: 13px; letter-spacing: .03em; }
@media (max-width: 767px) {
  .kw-support__title { flex-direction: row; align-items: center; text-align: left; gap: 12px; }
  .kw-support__title svg { width: 26px; height: 26px; }
}

/* ==========================================================================
   会社概要
   ========================================================================== */
.kw-greeting {
  padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(88px, 11vw, 160px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start;
}
.kw-greeting__main { display: flex; flex-direction: column; gap: 32px; }
.kw-greeting__catch { margin-top: 12px; font-weight: 500; font-size: clamp(17px, 1.8vw, 24px); line-height: 1.8; letter-spacing: .08em; }
.kw-greeting .kw-text { line-height: 2; }
.kw-greeting__sign { display: flex; align-items: baseline; gap: 16px; align-self: flex-end; padding-top: 8px; }
.kw-greeting__sign-role { font-size: 14px; letter-spacing: .1em; color: var(--kw-ink-2); }
.kw-greeting__sign-name { font-size: clamp(17px, 2vw, 20px); font-weight: 500; letter-spacing: .24em; }
.kw-greeting__photo { position: sticky; top: 140px; aspect-ratio: 4 / 5; overflow: hidden; background: #D6D2CB; }
.kw-greeting__photo img, .kw-greeting__photo .kw-ph, .kw-greeting__photo-sp img, .kw-greeting__photo-sp .kw-ph { width: 100%; height: 100%; object-fit: cover; }
.kw-greeting__photo-sp { display: none; aspect-ratio: 4 / 3; overflow: hidden; background: #D6D2CB; }
.kw-greeting__photo-sp img { object-position: center 85%; }
@media (max-width: 767px) {
  .kw-greeting__catch, .kw-greeting__photo { display: none; }
  .kw-greeting__photo-sp { display: block; }
  .kw-greeting__sign { padding-top: 0; }
}

.kw-philosophy { position: relative; background-color: #3A332D; background-position: center; background-size: cover; color: #FFFFFF; }
.kw-philosophy::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(47, 46, 44, .55), rgba(47, 46, 44, .7)); }
.kw-philosophy__inner {
  position: relative; padding-top: clamp(96px, 12vw, 176px); padding-bottom: clamp(96px, 12vw, 176px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 6vw, 96px); align-items: start; /* 見出しと文章は上揃え（作業者指示） */
}
.kw-philosophy .kw-en { color: #E3C3A3; }
.kw-philosophy .kw-text { gap: 24px; font-size: var(--kw-t15); }

.kw-company { padding-top: clamp(88px, 11vw, 160px); padding-bottom: clamp(88px, 11vw, 160px); display: flex; flex-direction: column; gap: clamp(40px, 5vw, 64px); }
.kw-dl { position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; border-top: 1px solid var(--kw-sumi); }
.kw-dl::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--kw-sumi); }
.kw-dl__row { display: flex; flex-wrap: wrap; gap: 4px 32px; padding: 24px 0; border-bottom: 1px solid var(--kw-line); }
.kw-dl dt { flex: 0 0 140px; font-size: 14px; font-weight: 500; letter-spacing: .1em; color: var(--kw-ink-2); }
.kw-dl dd { flex: 1 1 280px; margin: 0; font-size: var(--kw-t15); line-height: 1.9; letter-spacing: .05em; }
.kw-map { display: block; width: 100%; border: 0; aspect-ratio: 21 / 9; min-height: 320px; height: auto; }

/* ==========================================================================
   施工事例
   ========================================================================== */
.kw-works { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(88px, 11vw, 160px); }
.kw-works__head { margin-bottom: clamp(48px, 6vw, 72px); }
.kw-works__lead { max-width: 720px; text-align: center; }
@media (max-width: 767px) { .kw-works__lead { max-width: none; align-self: stretch; text-align: left; } }
.kw-works__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(48px, 5vw, 64px) clamp(20px, 2.4vw, 32px); }
.kw-wk { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.kw-wk__btn {
  position: relative; display: block; width: 100%; padding: 0; border: 0; aspect-ratio: 4 / 3; overflow: hidden;
  background: #D6D2CB; cursor: zoom-in;
}
.kw-wk__btn img, .kw-wk__btn .kw-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .6s ease; }
.kw-wk__btn:hover img { transform: scale(1.04); opacity: .9; }
.kw-wk__tag { position: absolute; left: 0; top: 0; padding: 5px 12px; background: rgba(50, 46, 43, .78); color: #FFFFFF; font-size: 13px; letter-spacing: .1em; line-height: 1.4; }
.kw-wk__count { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: rgba(47, 46, 44, .72); color: var(--kw-kinari); font-size: 13px; letter-spacing: .08em; }
.kw-wk__name-wrap { padding-top: 0; } /* 写真下の罫線は外す（作業者指示。TOPの仕上げカードとそろえる） */
.kw-wk__name { font-size: 19px; line-height: 1.6; letter-spacing: .06em; }
.kw-wk__note { margin-top: 4px; font-size: 13px; line-height: 1.8; letter-spacing: .04em; color: var(--kw-ink-2); }
@media (max-width: 767px) {
  .kw-wk__note { font-size: 12px; }
  .kw-works__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; }
  .kw-wk { gap: 10px; }
  .kw-wk__tag { padding: 3px 8px; font-size: 11px; }
  .kw-wk__name { font-size: 14px; }
}
.kw-works-list { margin-top: clamp(64px, 8vw, 96px); padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 56px); background: var(--kw-bg-3); }
.kw-works-list ol { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: 48px; }
.kw-works-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-size: 16px; line-height: 1.6; font-weight: 500; letter-spacing: .06em; }
.kw-works-list li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--kw-sugi); transform: rotate(45deg); }
@media (max-width: 767px) {
  .kw-works-list { padding: 20px; }
  .kw-works-list li { gap: 10px; padding: 7px 0; font-size: 14px; }
  .kw-works-list li::before { width: 5px; height: 5px; }
}

/* 写真の拡大表示（ふわっと開閉・写真の切り替えもふわっと。SPは送りボタンを写真の下） */
.kw-lb {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: clamp(56px, 7vw, 96px) clamp(16px, 6vw, 96px); background: rgba(40, 32, 26, .92);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s;
}
.kw-lb.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s ease, visibility 0s linear 0s; }
.kw-lb__fig { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 1200px; width: 100%; height: 100%; transform: scale(.97); transition: transform .6s ease; }
.kw-lb.is-open .kw-lb__fig { transform: scale(1); }
.kw-lb__img { flex: 1 1 auto; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .35s ease; }
.kw-lb__img.is-fading { opacity: 0; }
.kw-lb__cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 20px; text-align: center; color: var(--kw-kinari); font-size: var(--kw-t15); letter-spacing: .08em; }
.kw-lb__pos { font-size: 14px; color: #BDB9B2; }
.kw-lb__note { display: inline-block; }
.kw-lb__close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border: 0; background: none; color: var(--kw-kinari); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease; }
.kw-lb__close:hover { opacity: .6; }
.kw-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  border: 1px solid rgba(244, 242, 238, .5); background: none; color: var(--kw-kinari); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .4s ease, color .4s ease;
}
.kw-lb__nav:hover { background: var(--kw-kinari); color: var(--kw-ink); }
.kw-lb__nav--prev { left: clamp(4px, 2vw, 24px); }
.kw-lb__nav--next { right: clamp(4px, 2vw, 24px); }
.kw-lb.is-single .kw-lb__nav, .kw-lb.is-single .kw-lb__pos { display: none; }
@media (max-width: 767px) {
  .kw-lb { padding: 72px 16px 48px; }
  .kw-lb__fig { height: auto; }
  .kw-lb__img { max-height: calc(100dvh - 260px); }
  .kw-lb__nav { top: auto; bottom: 48px; transform: none; }
  .kw-lb__nav--prev { left: calc(50% - 60px); }
  .kw-lb__nav--next { right: calc(50% - 60px); }
}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.kw-contact { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(88px, 11vw, 160px); display: flex; flex-direction: column; gap: clamp(56px, 7vw, 96px); }
.kw-contact__lead { max-width: 760px; }
.kw-contact__note { display: block; margin-top: 10px; font-size: 13px; letter-spacing: .03em; }
.kw-contact-tel { display: flex; flex-direction: column; align-items: center; gap: 28px; padding: clamp(40px, 5vw, 56px) clamp(24px, 4vw, 48px); background: var(--kw-bg-3); }
.kw-contact-tel__title { font-weight: 500; font-size: clamp(18px, 1.8vw, 22px); letter-spacing: .1em; text-align: center; }
.kw-contact-tel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1px; width: 100%; max-width: 800px; background: var(--kw-line); }
.kw-contact-tel__cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px clamp(16px, 3vw, 40px); background: var(--kw-bg-3); }
.kw-contact-tel__item { display: flex; flex-direction: row; align-items: baseline; gap: 14px; color: var(--kw-ink); }
a.kw-contact-tel__item:hover { color: var(--kw-ink); opacity: .6; }
.kw-contact-tel__label { font-family: var(--kw-serif); text-transform: uppercase; font-size: var(--kw-t16); letter-spacing: .2em; color: var(--kw-sugi-l); }
.kw-contact-tel__num { font-weight: 500; font-size: clamp(23px, 2.8vw, 34px); letter-spacing: .04em; line-height: 1.2; }
.kw-contact-tel__hours { font-size: 14px; letter-spacing: .05em; color: var(--kw-ink-2); text-align: center; }
@media (max-width: 767px) {
  .kw-contact-tel__grid { grid-template-columns: 1fr 1fr; gap: 0; }
  .kw-contact-tel__cell { padding: 14px 8px; }
  .kw-contact-tel__item { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kw-contact-tel__num { font-size: clamp(16px, 4.6vw, 19px); }
  .kw-contact-tel__hours { margin-top: -18px; }
}

/* お問い合わせフォーム（フォームCMSの出力 .form-contents をデザインの見た目に合わせる。CMS標準CSSより詳細度を上げて上書き） */
.kw-form-wrap { scroll-margin-top: calc(var(--kw-header-h) + 24px); }
.kw-form-wrap .form-contents { padding: 0; background: none; }
/* 768px以上は項目名（220px＋間32px）と入力欄を2列のグリッドで並べる（罫線が途切れないよう間は項目名の幅に含める） */
.kw-form-wrap .form-contents form dl { display: grid; grid-template-columns: 252px minmax(0, 1fr); column-gap: 0; margin: 0; border-top: 1px solid var(--kw-sumi); }
.kw-form-wrap .form-contents form dl dt:not(.pattern-exclusion) {
  float: none; width: auto; margin: 0; padding: 28px 0; display: flex; align-items: center;
  border-bottom: 1px solid var(--kw-line); font-size: var(--kw-t15); font-weight: 500; letter-spacing: .08em; white-space: nowrap;
}
.kw-form-wrap .form-contents form dl dd:not(.pattern-exclusion) { margin: 0; padding: 28px 0; line-height: normal; border-bottom: 1px solid var(--kw-line); }
.kw-form-wrap .form-contents form dl > dt:nth-last-of-type(1):not(.pattern-exclusion),
.kw-form-wrap .form-contents form dl > dd:nth-last-of-type(1):not(.pattern-exclusion) { border-bottom-color: var(--kw-sumi); }
/* お問い合わせ内容（最後の項目）は項目名を上にそろえる */
.kw-form-wrap .form-contents form dl > dt:nth-last-of-type(1):not(.pattern-exclusion) { align-items: flex-start; padding-top: 40px; }
.kw-form-wrap .form-contents form dl dt:not(.pattern-exclusion) span { display: inline-flex; align-items: center; gap: 12px; }
/* 必須・任意の印（項目名の前） */
.kw-form-wrap .form-pattern-1 dl dt:not(.pattern-exclusion) span::before {
  top: 0; margin: 0; padding: 2px 8px; border-radius: 0; background: none;
  font-size: 12px; font-weight: 400; letter-spacing: .1em; line-height: normal;
}
.kw-form-wrap .form-pattern-1 dl dt:not(.pattern-exclusion) span.required::before { content: "必須"; border: 1px solid var(--kw-sugi-l); background: none; color: var(--kw-sugi-l); }
.kw-form-wrap .form-pattern-1 dl dt:not(.pattern-exclusion) span.optional::before { content: "任意"; border: 1px solid #8C8A85; background: none; color: var(--kw-gray); }
/* 入力欄（CMSの入力チェックが style 属性で背景・文字色を入れるため、エラー時の色はそのまま生かす） */
.kw-form-wrap .form-pattern-1 dd:not(.pattern-exclusion) .textarea {
  width: 100%; height: 54px; padding: 0 16px; border: 1px solid var(--kw-line-2); border-radius: 0; outline: none; background: #FFFFFF;
  font: inherit; font-size: var(--kw-t15); color: var(--kw-ink); transition: border-color .3s ease;
}
.kw-form-wrap .form-pattern-1 dd:not(.pattern-exclusion) textarea.textarea { height: calc(14.4em + 30px); padding: 14px 16px; line-height: 1.8; resize: vertical; }
.kw-form-wrap .form-pattern-1 dd:not(.pattern-exclusion) .textarea:focus { border-color: var(--kw-sugi); }
.kw-form-wrap .form-contents .textarea::placeholder { color: #A9A59E; }
/* 送信ボタン（デザインどおり墨のボタン＋矢印） */
.kw-form-wrap .form-pattern-1 .submit-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--kw-btn-gap);
  width: min(100%, 360px); height: 64px; margin: 48px auto 0; padding: 0; border: 0; border-radius: 0;
  background: var(--kw-sumi); color: var(--kw-kinari); font: inherit; font-size: var(--kw-t15); font-weight: 400; letter-spacing: .16em;
  transition: background .3s ease, opacity .3s ease;
}
.kw-form-wrap .form-pattern-1 .submit-btn::before { display: none; }
.kw-form-wrap .form-pattern-1 .submit-btn::after { content: "→"; font-family: var(--kw-serif); font-size: 18px; letter-spacing: normal; }
.kw-form-wrap .form-pattern-1 .submit-btn:hover { background: var(--kw-sugi-l); }
.kw-form-wrap .form-pattern-1 .submit-btn:disabled { cursor: not-allowed; opacity: .35; }
.kw-form-wrap .form-pattern-1 .submit-btn:disabled:hover { background: var(--kw-sumi); }
/* エラー・送信完了のメッセージ */
.kw-form-wrap .form-contents .form-err-msg { margin: 0 0 32px; padding: 16px 20px; border: 1px solid #B5574F; background: #FBEDEB; color: #9E3B33; font-size: 14px; line-height: 1.9; }
.kw-form-wrap .form-pattern-1 .form-thanks-msg { padding: 48px 24px; border: 1px solid var(--kw-line); background: #FFFFFF; line-height: 2.2; }
.kw-form-wrap .form-pattern-1 .form-thanks-msg .back-home-btn { width: auto; text-align: center; }
.kw-form-wrap .form-pattern-1 .form-thanks-msg .back-home-btn a {
  display: inline-flex; padding: 18px 32px; border: 1px solid var(--kw-sumi); border-radius: 0; background: transparent;
  color: var(--kw-ink); font-size: 14px; font-weight: 400; letter-spacing: .12em; transition: background .3s ease, color .3s ease;
}
.kw-form-wrap .form-pattern-1 .form-thanks-msg .back-home-btn a:hover { background: var(--kw-sumi); color: var(--kw-kinari); }
/* 767px以下：項目名を上・入力欄を下に */
@media (max-width: 767px) {
  .kw-form-wrap .form-contents form dl { display: block; }
  .kw-form-wrap .form-contents form dl dt:not(.pattern-exclusion) { width: 100%; padding: 28px 0 0; margin: 0 0 12px; border-bottom: 0; }
  .kw-form-wrap .form-contents form dl > dt:nth-last-of-type(1):not(.pattern-exclusion) { padding-top: 28px; }
  .kw-form-wrap .form-contents form dl dd:not(.pattern-exclusion) { padding: 0 0 28px; }
}/* iOS Safari の入力時ズーム対策：タッチ端末では入力欄を 16px 以上にする */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="url"], input[type="password"], input[type="date"],
  select, textarea, .kw-form-wrap .textarea { font-size: 16px; }
}

/* ==========================================================================
   写真の表示の動き（AOS のカスタム動き data-aos="kw-reveal"）
   左から右へ幕が開くように写真の枠が現れ、中の写真は少し大きい状態からゆっくり引いて落ち着く。
   写真は individual transform の scale で動かすので、ホバーの拡大（transform）とは干渉しない。
   aos.css の body[data-aos-duration] [data-aos] より詳細度を上げて、時間・イージングを固定する
   ========================================================================== */
html body [data-aos="kw-reveal"][data-aos] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(.77, 0, .18, 1);
}
html body [data-aos="kw-reveal"][data-aos].aos-animate { clip-path: inset(0 0 0 0); }
html body [data-aos="kw-reveal"] > img,
html body [data-aos="kw-reveal"] > .kw-ph,
html body [data-aos="kw-reveal"] > span:first-child {
  scale: 1.14;
  transition: scale 2.4s cubic-bezier(.22, 1, .36, 1), transform .8s ease, opacity .6s ease;
}
html body [data-aos="kw-reveal"].aos-animate > img,
html body [data-aos="kw-reveal"].aos-animate > .kw-ph,
html body [data-aos="kw-reveal"].aos-animate > span:first-child { scale: 1; }
@media (prefers-reduced-motion: reduce) {
  html body [data-aos="kw-reveal"][data-aos] { clip-path: none; transition: none; }
  html body [data-aos="kw-reveal"] > img, html body [data-aos="kw-reveal"] > .kw-ph, html body [data-aos="kw-reveal"] > span:first-child { scale: 1; transition: none; }
}/* TOPの「人が気になって、触れるコンクリート」の写真だけは下から上へ開く（作業者指定） */
html body .kw-texture [data-aos="kw-reveal"][data-aos] { clip-path: inset(100% 0 0 0); }
html body .kw-texture [data-aos="kw-reveal"][data-aos].aos-animate { clip-path: inset(0 0 0 0); }
/* ==========================================================================
   ローディング（全ページ・読み込みを待つ間だけ）：TOPはMVの1枚目、ほかはページの読み込みで html に is-ready（js/top.js・js/common.js）
   ========================================================================== */
.kw-loader {
  position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: #3A332D; color: var(--kw-kinari); transition: opacity .7s ease, visibility .7s;
}
html:not(.js) .kw-loader { display: none; }
html.is-ready .kw-loader { opacity: 0; visibility: hidden; }
.kw-loader .kw-logo__mark { width: 68px; height: 100px; opacity: .9; animation: kw-loader-breath 2.4s ease-in-out infinite; }
.kw-loader__bar { position: relative; display: block; width: 72px; height: 1px; overflow: hidden; background: rgba(244, 242, 238, .2); }
.kw-loader__bar span { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--kw-kinari); animation: kw-loader-bar 1.6s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes kw-loader-breath { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
@keyframes kw-loader-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .kw-loader .kw-logo__mark, .kw-loader__bar span { animation: none; } }
/* 3つの仕上げの右下の丸い写真：メインの写真が開いたあと（0.7秒後）に、少し小さい状態からふわっと出す（作業者指示） */
html body [data-aos="kw-pop"][data-aos] {
  opacity: 0; transform: scale(.85);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
html body [data-aos="kw-pop"][data-aos].aos-animate { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { html body [data-aos="kw-pop"][data-aos] { opacity: 1; transform: none; transition: none; } }
/* 本文より小さくしている注記・ラベル（PC 13px）は、スマホでも本文より小さく見えるよう 12px に（作業者指示 2026-10-28。11〜12px のものは読みにくくなるためそのまま） */
@media (max-width: 767px) {
  .kw-note, .kw-support__note, .kw-contact__note, .kw-chip__name, .kw-wk__count, .kw-wcard__place, .kw-footer__copy { font-size: 12px; }
}