/*
Theme Name: yakata-life
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/

/* ==========================================================================
   03 信頼バッジ／12 実績の数字：共通（強調数字を明朝体に）
   ========================================================================== */
.yakata-badge strong {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   03 信頼バッジ：文字サイズ
   ========================================================================== */
.yakata-badges .yakata-badge {
  font-size: 0.82rem;
  line-height: 1.6;
}
.yakata-badges .yakata-badge strong {
  font-size: 1.55rem;
}

/* ==========================================================================
   12 実績の数字：文字サイズ
   ========================================================================== */
.yakata-stats .yakata-badge {
  font-size: 0.82rem;
}
.yakata-stats .yakata-badge strong {
  font-size: clamp(2rem, 5vw, 2.9rem);
  line-height: 1.2;
}

/* ==========================================================================
   各セクション冒頭の英字ラベル（CONCERNS / FLOW など）：色（金茶）＋左右の罫線
   ※WP側のブロック色設定（primary color）が !important 付きで強制指定しているため、
     こちらも !important が必要
   ========================================================================== */
.yakata-eyebrow {
  color: #a98c50 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.yakata-eyebrow::before,
.yakata-eyebrow::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: #a98c50;
}

/* ==========================================================================
   02 ファーストビュー：間取り図の方眼を模した薄い地紋
   ========================================================================== */
.yakata-hero {
  background-image: linear-gradient(
      rgba(247, 243, 234, 0.045) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(247, 243, 234, 0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ==========================================================================
   01 ヘッダー：半透明の生成り＋ぼかし、ナビのホバー色、右端ボタン
   ========================================================================== */
.site-header {
  background: rgba(247, 243, 234, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #ddd4c2;
}

/* ヘッダーの中身を全幅にする（左右の余白は padding で調整） */
#site-header-container {
  max-width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
}

.global-nav-list a:hover {
  color: #a8382a;
}
/* NOTE と 30分ボタンの間隔をあける */
.global-nav-list li:last-child {
  margin-left: 0.6rem; /* 数値で間隔を調整（0.4〜1rem くらい） */
}
/* ==========================================================================
   グローバルナビ：CTA（無料30分相談＝last-child）と NOTE（.nav-btn）
   → 2つを反転ペアにして、ホバーで色が入れ替わる
   ========================================================================== */

/* 共通の形（枠・余白・アニメ） */
.global-nav-list li:last-child a,
.global-nav-list li.nav-btn a {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.15rem;
  transition: background 0.18s, color 0.18s;
}

/* 30分無料相談：濃紺塗り → ホバーで反転（生成り地×濃紺文字） */
.global-nav-list li:last-child a {
  background: #16233c;
  color: #f7f3ea;
}
.global-nav-list li:last-child a:hover {
  background: #a8382a;
  color: #16233c;
}

/* NOTE：生成り地×濃紺文字 → ホバーで反転（濃紺塗り×生成り文字） */
.global-nav-list li.nav-btn a {
  background: #a8382a;
  color: #f7f3ea;
}
.global-nav-list li.nav-btn a:hover {
  background: #16233c;
  color: #f7f3ea;
}

/* ==========================================================================
   18 フッター：墨紺の背景＋文字色、MENU/CONTACTラベル
   ========================================================================== */
.site-footer {
  background: #16233c;
  color: #aab3c1;
  font-size: 0.83rem;
  padding-block: 4rem 1.5rem;
}
.site-footer a {
  display: block;
  padding: 0.28rem 0;
  color: #aab3c1;
  text-decoration: none;
}
.site-footer a:hover {
  color: #f7f3ea;
}
.site-footer-copyright,
.site-footer-copyright p {
  color: #aab3c1;
}
.yakata-footer-logo {
  color: #f7f3ea;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}
/* 「MENU」「CONTACT」の見出し（widget IDで指定） */
#block-10 p,
#block-9 p {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: #c6ab72;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

/* ==========================================================================
   見出し・ボタン文言の折り返し調整：1文字だけ次行に孤立するのを防ぐ
   ========================================================================== */
h1,
h2,
h3 {
  text-wrap: balance;
}
.yakata-btn .vk_button_link_txt {
  text-wrap: balance;
}

/* ==========================================================================
   02 ファーストビュー：CTAボタン2つを等幅カラムではなく内容幅に（1行表示）
   ※列（.wp-block-column）ではなくボタン本体（.btn-block）を内容幅に
   変更する方式に修正。列側をwidth:autoにすると、枠線だけのゴーストボタン
   （is-style-outline）の枠が正しく描画されなくなってしまうため。
   ========================================================================== */
.yakata-hero .wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.yakata-hero .yakata-btn.vk_button-align-block {
  width: auto;
}
.yakata-hero .yakata-btn .btn-block {
  width: fit-content;
}
.yakata-hero .yakata-btn .vk_button_link_txt {
  white-space: nowrap;
}

/* ==========================================================================
   02 ファーストビュー：SP幅では見出しを中央揃えに
   ========================================================================== */
@media (max-width: 860px) {
  .yakata-hero h1 {
    text-align: center;
  }
}

/* ==========================================================================
   02 ファーストビュー：「家相」の強調文字を大きく
   ========================================================================== */
.yakata-hero h1 mark {
  font-size: 1.8em;
  color: #ff6900;
  border-bottom: solid;
}

/* ==========================================================================
   02 ファーストビュー：テキスト列と画像列の間の隙間（列間ガップが0だった）
   ========================================================================== */
@media (min-width: 576px) {
  .yakata-hero .vk_gridcolcard {
    column-gap: 3rem;
  }
}

/* ==========================================================================
   02 ファーストビュー：方位盤画像が上下で見切れていたのを防ぐ
   （object-fit:coverだと枠の形に合わせて絵柄の端が切れてしまうため、
   全体が必ず収まるcontainに変更）
   ※箱の高さ（最小の高さ）は、検証環境で678px→350pxに変更したところ
   上下の余白がちょうど良くなったのを確認済み。ブロックの設定パネルからの
   保存が難しい場合はここで指定する（ブロックのインラインstyle属性を
   上書きするため!importantが必要）。
   ========================================================================== */
.yakata-hero-houi .wp-block-cover {
  min-height: 350px !important;
}
.yakata-hero-houi .wp-block-cover__image-background {
  object-fit: contain;
}

/* ==========================================================================
   14 プロフィール／11 お客様の声／07 ご相談の流れ：
   SP幅では見出しを中央揃えに
   ========================================================================== */
@media (max-width: 780px) {
  .yakata-profile h3,
  .yakata-voice h2,
  .yakata-voice h3,
  .yakata-flow h2 {
    text-align: center !important;
  }
}

/* ==========================================================================
   03 信頼バッジ／12 実績の数字：SP幅では2列×2行に
   ========================================================================== */
@media (max-width: 700px) {
  .yakata-badges .wp-block-columns,
  .yakata-stats .wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  .yakata-badges .wp-block-columns > .wp-block-column,
  .yakata-stats .wp-block-columns > .wp-block-column {
    width: auto;
  }
}

/* ==========================================================================
   10 診断9項目：SP幅では横スクロール＋スナップのスライド表示に
   （9項目が1つのCSSグリッドに全部入っている作りだったため、
   グリッドのままflexの横スクロールに切り替えるだけで対応可能だった）
   ========================================================================== */
@media (max-width: 700px) {
  .yakata-kensa .yakata-kensa-item.is-layout-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 0.5rem;
  }
  .yakata-kensa .yakata-kensa-item.is-layout-grid > * {
    flex: 0 0 82%;
    scroll-snap-align: center;
  }
}

/* ==========================================================================
   14 プロフィール：SP幅で 見出し→画像→文章→ボタン の順に並べ替え、
   ボタンを中央揃えに
   ========================================================================== */
@media (max-width: 780px) {
  .yakata-profile .wp-block-columns {
    display: flex;
    flex-direction: column;
  }
  .yakata-profile .wp-block-column {
    display: contents;
  }
  .yakata-profile .wp-block-vk-blocks-spacer {
    display: none;
  }
  .yakata-profile .yakata-eyebrow,
  .yakata-profile h3 {
    order: 1;
  }
  .yakata-profile .wp-block-column:last-child > .wp-block-group {
    order: 2;
    margin-top: 1.5rem;
  }
  .yakata-profile .yakata-profile-meta,
  .yakata-profile
    .wp-block-column:first-child
    > p.wp-block-paragraph:not(.yakata-eyebrow):not(.yakata-profile-meta) {
    order: 3;
  }
  .yakata-profile .yakata-profile-meta {
    margin-top: 1.5rem;
  }
  .yakata-profile .yakata-more {
    order: 4;
    text-align: center;
    margin-top: 1rem;
  }
}

/* ==========================================================================
   18 フッター：SP幅での余白・行間の調整
   ========================================================================== */
@media (max-width: 780px) {
  .site-footer .row > div {
    margin-bottom: 2rem;
  }
  .site-footer .menu li {
    margin: 0;
  }
  .site-footer-copyright {
    text-align: center;
    border-top: 1px solid rgba(247, 243, 234, 0.14);
    margin-top: 1rem;
    padding-top: 1.5rem;
  }
}

/* ==========================================================================
   お問い合わせフォーム（Contact Form 7）
   ========================================================================== */
/* 文字色はここ1箇所（.wpcf7-form）だけで決める。ラベル・ヒント・
   ラジオの選択肢・同意文などは全部ここから継承される。
   濃い背景に置く場合は、その親要素に対して
   ".yakata-xxx .wpcf7-form { color: ...; }" を1行足すだけでよい。 */
.wpcf7-form {
  max-width: 46rem;
  margin-inline: auto;
  color: #fff;
}
.wpcf7-form .row {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.5rem;
  padding: 1.3rem 0;
  border-bottom: 1px solid #ddd4c2;
  align-items: start;
}
.wpcf7-form .row:first-child {
  border-top: 1px solid #ddd4c2;
}
.wpcf7-form label.l {
  font-size: 0.88rem;
  font-weight: 700;
  padding-top: 0.85rem;
  line-height: 1.7;
}
.wpcf7-form .must {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: #a8382a;
  color: #fff;
  padding: 0.14rem 0.42rem;
  margin-left: 0.5rem;
  vertical-align: 0.12em;
}
.wpcf7-form .opt {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: #efe9dc;
  color: #55606f;
  border: 1px solid #ddd4c2;
  padding: 0.13rem 0.42rem;
  margin-left: 0.5rem;
  vertical-align: 0.12em;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea,
.wpcf7-form input[type="file"] {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  background: #f7f3ea;
  color: #16233c;
  border: 1px solid #ddd4c2;
  border-radius: 2px;
}
.wpcf7-form textarea {
  min-height: 9rem;
  line-height: 1.9;
  resize: vertical;
}
.wpcf7-form .hint {
  display: block;
  font-size: 0.78rem;
  opacity: 0.72;
  margin-top: 0.5rem;
  line-height: 1.75;
}
.wpcf7-form .radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.wpcf7-form .radios label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.88rem;
  background: #f7f3ea;
  color: #16233c;
  border: 1px solid #ddd4c2;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.wpcf7-form .radios label:hover {
  border-color: #16233c;
}
.wpcf7-form .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.wpcf7-form .agree {
  text-align: center;
  padding: 2.5rem 0 0;
  font-size: 0.88rem;
}
.wpcf7-form .agree a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wpcf7-form .send {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.wpcf7-form .send input[type="submit"] {
  background: #a8382a;
  border: 1px solid #a8382a;
  color: #fff;
  min-width: 20rem;
  padding: 1.15rem 2.6rem;
  font-size: 1.05rem;
  border-radius: 2px;
  cursor: pointer;
}
.wpcf7-form .send input[type="submit"]:hover {
  background: #8e2c20;
  border-color: #8e2c20;
}
.wpcf7-form .recap {
  text-align: center;
  font-size: 0.74rem;
  opacity: 0.65;
  margin-top: 1rem;
}
@media (max-width: 700px) {
  .wpcf7-form {
    padding-inline: 1rem;
  }
  .wpcf7-form .row {
    grid-template-columns: 1fr;
    gap: 0.6rem;
    padding: 1.1rem 0;
  }
  .wpcf7-form label.l {
    padding-top: 0;
  }
  .wpcf7-form .two {
    grid-template-columns: 1fr;
  }
  .wpcf7-form .send input[type="submit"] {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   モバイル用ドロップダウンメニュー
   ========================================================================== */
.vk-mobile-nav-menu-btn {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: #16233c;
}
.vk-mobile-nav-drop-in {
  background: #16233c;
}
.vk-mobile-nav-drop-in .menu a {
  color: #f7f3ea;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(247, 243, 234, 0.12);
  display: block;
}
.vk-mobile-nav-drop-in .menu a:hover,
.vk-mobile-nav-drop-in .menu .current-menu-item > a {
  color: #a98c50;
}

/* ==========================================================================
   モバイル固定表示（無料30分相談ボタン）
   ========================================================================== */
.vk_fixed-display .wp-block-group {
  background: rgba(247, 243, 234, 0.92) !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
}
.vk_fixed-display .vk_button_link {
  background: #a8382a !important;
  border-color: #a8382a !important;
}
.vk_fixed-display .vk_button_link:hover {
  background: #8e2c20 !important;
  border-color: #8e2c20 !important;
}

/* ==========================================================================
   16 CONTACT（お問い合わせフォームのCTA）：
   濃い紺背景(.yakata-finalcta)の上に置かれているため、
   文字色が紺のままだと読めなかった問題を修正
   ※レイアウトが崩れて文字が見えなくなっていた本当の原因は、CF7が自動で
   <p>タグを挿入していたこと（CF7側で「exclude_lines_breaks: on」を設定して
   解決）。ここでの色指定はinfoの上書き競合が無いため!importantは不要。
   文字色は.wpcf7-form自体に1行指定するだけで、ラベル・ヒント・同意文など
   全部まとめて継承される（ラジオの選択肢だけは背景色も変えているため
   個別に指定）。
   ========================================================================== */

.yakata-finalcta .wpcf7-form .row,
.yakata-finalcta .wpcf7-form .row:first-child {
  border-color: rgba(247, 243, 234, 0.18);
}
.yakata-finalcta .wpcf7-form .radios label {
  background: rgba(247, 243, 234, 0.06);
  color: #f7f3ea;
  border-color: rgba(247, 243, 234, 0.25);
  color: #f7f3ea;
}
.yakata-finalcta .wpcf7-form .radios label:hover {
  border-color: #a98c50;
}

/* SP幅：ラジオボタンを縦積みにして詰まりを解消 */
@media (max-width: 480px) {
  .wpcf7-form .radios {
    flex-direction: column;
  }
  .wpcf7-form .radios label {
    width: 100%;
  }
}

/* ==========================================================================
   18 フッター：SP幅では中央揃えに
   ========================================================================== */
@media (max-width: 780px) {
  .site-footer .site-footer-content {
    text-align: center;
  }
}

/* ヘッダー下・フッター上の余白を全ページで消す */
.site-body {
  padding-top: 0;
}