/* ===================================================================
   蔵守（KURAMORI）— Xwrite「追加CSS」に貼るスタイル
   カスタマイザー → 追加CSS にそのまま貼り付けてください。

   使い方：ブロックを選んで、右サイドバーの
   「高度な設定 → 追加CSSクラス」に km-xxxx と入力すると当たります。
   テーマ内部のクラス名に依存していないので、
   Xwriteがアップデートされても壊れにくい作りにしています。
   =================================================================== */

/* --- 書体 -------------------------------------------------------
   2026-09-20 Noto Sans JP → Zen Kaku Gothic New に変更（まみ確定）
   字面が大きくふところが広いので、15pxの本文・13pxの注記が読みやすい。
   ※ Zen Antique（明朝・ウェイト1つ）とは別物。間違えない
   ---------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap");

/* --- 色と数値（ここだけ直せば全体が変わります）------------------- */
:root{
  --km-navy:      #142139;  /* 濃紺・主 */
  --km-navy-pale: #e8ecf2;  /* 濃紺・淡 */
  --km-gold:      #b69a5b;  /* 金・差し色 */
  --km-gold-deep: #8a7238;  /* 金・濃（文字用） */
  --km-gold-pale: #f3eee3;  /* 金・淡（チップ地） */
  --km-warm:      #f7f6f2;  /* 背景・温白 */
  --km-text:      #333333;  /* 本文 */
  --km-sub:       #667085;  /* 補助文字 */
  --km-line:      #d8dde5;  /* 罫線 */
  --km-line-warm: #eae6dc;  /* 温色面の罫線 */

  --km-r-btn:   0.5rem;     /* 角丸 ボタン 8 */
  --km-r-card:  0.75rem;    /* 角丸 カード 12 */
  --km-r-photo: 0.875rem;   /* 角丸 写真枠 14 */
  --km-r-form:  1rem;       /* 角丸 フォーム・ヘッダー 16 */

  --km-shadow: 0 1.125rem 2.5rem -0.375rem rgba(20,33,57,.07); /* 黒い影は使わない */
}

body, .km-section{ font-family:"Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif; color:var(--km-text); }

/* --- セクションの器 --------------------------------------------- */
/* 背景は白と温白を交互に。同色が隣り合うと境目が濁ります */
.km-section{ padding:7.5rem 8.75rem; background:#fff; }   /* 上下120 / 左右140・既定は白（2026-09-22 104→120） */
.km-section--warm{ background:var(--km-warm); }
.km-section--navy{ background:var(--km-navy); color:#fff; }
.km-section--navy .km-h2{ color:#fff; }
.km-section--navy .km-lead{ color:rgba(255,255,255,.82); }

/* 同色が続いてしまうときだけ、上辺に細い罫線を入れる */
.km-section--divider{ border-top:1px solid var(--km-line-warm); }

/* --- セクションの型（この順で必ず組む）--------------------------- */
/* 英語ラベル → 見出し → リード文 → 中身 */

.km-label{                                     /* 英語ラベル 13px 金 */
  font-size:0.8125rem; font-weight:500;
  letter-spacing:0.16em; color:var(--km-gold);
  margin:0 0 0.75rem;
}
.km-h2{                                        /* セクション見出し 36px */
  font-size:2.25rem; font-weight:700; line-height:1.45;
  color:var(--km-navy); margin:0 0 1.25rem;
}
.km-h1{ font-size:3rem;   font-weight:700; line-height:1.4; color:var(--km-navy); }
.km-display{ font-size:3.5rem; font-weight:700; line-height:1.35; color:var(--km-navy); }
.km-h3{ font-size:1.75rem; font-weight:500; line-height:1.5; color:var(--km-navy); }
.km-lead{ font-size:1.125rem; line-height:1.9; color:var(--km-text); margin:0 0 2.5rem; }
.km-body{ font-size:1rem;     line-height:1.9; }
.km-small{ font-size:0.875rem; line-height:1.85; color:var(--km-sub); }
.km-caption{ font-size:0.75rem; font-weight:500; color:var(--km-sub); }

/* --- カード ------------------------------------------------------ */
.km-card{
  background:#fff; border:1px solid var(--km-line);
  border-radius:var(--km-r-card); padding:2rem;
  box-shadow:var(--km-shadow);
}
.km-card .km-h3{ font-size:1.25rem; margin:0 0 0.75rem; }

/* --- チップ（全丸・金）------------------------------------------- */
.km-chip{
  display:inline-block; border-radius:999px;
  background:var(--km-gold-pale); color:var(--km-gold-deep);
  font-size:0.75rem; font-weight:500;
  padding:0.35rem 0.9rem; margin:0 0.35rem 0.35rem 0;
}

/* --- ボタン（CTAは「お問い合わせ」で統一）------------------------ */
.km-btn{
  display:inline-block; border-radius:var(--km-r-btn);
  background:var(--km-gold); color:#fff; text-decoration:none;
  font-weight:700; padding:0.95rem 2.25rem;
  transition:background .2s ease;
}
.km-btn:hover{ background:var(--km-gold-deep); color:#fff; }
.km-btn--outline{
  background:transparent; color:var(--km-navy);
  border:1px solid var(--km-navy);
}
.km-btn--outline:hover{ background:var(--km-navy); color:#fff; }

/* --- 写真 ---------------------------------------------------------
   ★2026-09-20 変更：濃紺デュオトーンは「ファーストビューだけ」。
   人物が写っている写真は加工しない（人から体温を抜くと実在感が下がる）。
   加工したいときだけ .km-photo--navy を足す。
   ------------------------------------------------------------------ */
.km-photo{ border-radius:var(--km-r-photo); overflow:hidden; position:relative; }
.km-photo img{ display:block; width:100%; }

.km-photo--navy img{ filter:saturate(.45) contrast(1.08) brightness(.96); }
.km-photo--navy::after{                        /* 濃紺をCOLORで重ねる */
  content:""; position:absolute; inset:0;
  background:var(--km-navy); mix-blend-mode:color; opacity:.75;
}

/* --- 電話番号（この年齢層は電話を選ぶ人が多い）------------------- */
.km-tel{
  font-size:1.875rem; font-weight:700; color:var(--km-navy);
  text-decoration:none; letter-spacing:.02em;
}

/* --- フォーム（ラベルは入力欄の上・必須は金のバッジ）------------- */
.km-form{
  background:#fff; border:1px solid var(--km-line);
  border-radius:var(--km-r-form); padding:2.5rem;
  box-shadow:var(--km-shadow);
}
.km-form label{ display:block; font-size:0.875rem; font-weight:500; margin:0 0 0.5rem; }
.km-form input, .km-form textarea, .km-form select{
  width:100%; border:1px solid var(--km-line); border-radius:var(--km-r-btn);
  padding:0.85rem 1rem; font-size:1rem; font-family:inherit;
}
.km-form .km-required{
  display:inline-block; background:var(--km-gold-pale); color:var(--km-gold-deep);
  font-size:0.75rem; border-radius:999px; padding:0.1rem 0.5rem; margin-left:0.5rem;
}

/* ===================================================================
   スマホ（393px基準）
   考え方は変えず、寸法だけ縮める。色・角丸・影・写真加工は同じ。
   =================================================================== */
@media (max-width: 47.9375rem){
  .km-section{ padding:5rem 1.25rem; }         /* 上下80 / 左右20（2026-09-22 64→80） */
  .km-label{ font-size:0.75rem; }              /* 12px・字間16%は同じ */
  .km-h2{ font-size:1.5rem; line-height:1.55; }
  .km-display{ font-size:2rem; line-height:1.5; }
  .km-h1{ font-size:1.75rem; }
  .km-card .km-h3{ font-size:1.0625rem; }
  .km-lead{ font-size:1rem; }
  .km-body{ font-size:0.9375rem; line-height:1.9; }
  .km-small{ font-size:0.875rem; }
  .km-tel{ font-size:1.75rem; }
  .km-card{ padding:1.5rem; }
  .km-form{ padding:1.5rem; }

  /* 多段組みはすべて1列に。横スクロールは使わない */
  .km-cols{ display:block; }
  .km-cols > * + *{ margin-top:1rem; }

  /* CTAは幅いっぱい（金は差し色の例外。指で押す領域を優先）*/
  .km-btn{ display:block; width:100%; text-align:center; }
}

/* --- デスクトップの列組み ---------------------------------------- */
@media (min-width: 48rem){
  .km-cols{ display:grid; gap:1.5rem; }
  .km-cols--2{ grid-template-columns:repeat(2,1fr); }
  .km-cols--3{ grid-template-columns:repeat(3,1fr); }
  .km-cols--4{ grid-template-columns:repeat(4,1fr); }
}