@charset "UTF-8";
/*
 * ひだまり工務店 WordPress ブロックエディター用スタイル。
 * assets/css/style.css（静的サイト版・240行）を .hidamari にスコープして移植。
 * すべてのセレクタは .hidamari 配下に収めること（検証項目9）。
 * 色は .hidamari の変数定義ブロック以外で16進直書きしないこと（検証項目10）。
 * SWELL のヘッダー・フッターは触らないため、それらのセレクタは移植していない。
 */

/* ===== tokens + base ===== */
.hidamari{
  --c-primary:#8B6F47;
  --c-accent:#E8A87C;
  --c-base:#FAF7F2;
  --c-text:#3A3226;
  --c-sub:#7A7060;
  --c-border:#E5DDD0;
  --c-white:#FFFFFF;
  --c-error:#B3261E;
  --sp-1:8px;
  --sp-2:16px;
  --sp-3:24px;
  --sp-4:32px;
  --sp-5:48px;
  --sp-6:64px;
  --sp-7:96px;
  --maxw:1120px;
  --radius:8px;
  --radius-card:12px;
  --shadow-card:0 2px 12px rgba(0,0,0,.06);
  --sec-y:var(--sp-7);
  --pad-x:var(--sp-4);
  margin:0;
  background:var(--c-base);
  color:var(--c-text);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.8;
}
.hidamari *,.hidamari *::before,.hidamari *::after{box-sizing:border-box}
.hidamari img{max-width:100%;display:block}
.hidamari h1,.hidamari h2,.hidamari h3,.hidamari h4{line-height:1.4;font-weight:700;margin:0 0 var(--sp-3)}
.hidamari h1{font-size:2rem;letter-spacing:.02em}
.hidamari h2{font-size:1.625rem}
.hidamari h3{font-size:1.125rem}
.hidamari p{margin:0 0 var(--sp-2)}
.hidamari p:last-child{margin-bottom:0}
.hidamari ul,.hidamari ol{margin:0 0 var(--sp-2);padding-left:1.4em}
.hidamari ul:not([type]){list-style:disc}
.hidamari ol:not([type]){list-style:decimal}
.hidamari ul ul,.hidamari ol ul{list-style:circle}
.hidamari a{color:var(--c-primary)}
.hidamari .note{font-size:.8125rem;color:var(--c-sub);line-height:1.7;margin:0}

/* ===== layout ===== */
.hidamari .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.hidamari .section{padding-block:var(--sec-y);background:var(--c-base)}
/* .section--white は .section と同じ詳細度（クラス1個）だが、この位置（.section の直後）に
   置くことでソース順により上書きされる。この上書き関係を崩さないこと。 */
.hidamari .section--white{background:var(--c-white)}
.hidamari .section__head{text-align:center;margin-bottom:var(--sp-5)}
.hidamari .section__head h2{position:relative;display:inline-block;padding-bottom:var(--sp-2);margin-bottom:var(--sp-2)}
.hidamari .section__head h2::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:48px;height:3px;background:var(--c-accent);border-radius:2px}
.hidamari .section__lead{color:var(--c-sub);margin:0}
.hidamari .page-head{background:var(--c-white);border-bottom:1px solid var(--c-border);padding-block:var(--sp-6)}
.hidamari .page-head h1{margin-bottom:var(--sp-2)}
.hidamari .page-head p{color:var(--c-sub);margin:0}
/* SWELL が wp:group の中身を .wp-block-group__inner-container で1段包むため、
   .stack の直下の子は inner-container 1個だけになり `* + *` は素通りする。
   inner-container を経由させて元の意図（子要素間 48px）を復元する。 */
.hidamari .stack > .wp-block-group__inner-container > * + *{margin-top:var(--sp-5)}
.hidamari .container--narrow{max-width:760px}

/* ===== components ===== */
.hidamari .card{background:var(--c-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;height:100%}
/* .card の直接の子は SWELL が挿入する inner-container 1個だけなので、
   flex-direction:column をそこへ中継し、.card__body の flex:1 が効くようにする。
   .steps__item（高さ100%を直接持つ）と同じ流儀に揃える。 */
.hidamari .card > .wp-block-group__inner-container{display:flex;flex-direction:column;flex:1;min-height:0}
.hidamari .card__body{padding:var(--sp-3);flex:1}
.hidamari .card__tag{display:inline-block;font-size:.8125rem;line-height:1.6;color:var(--c-sub);border:1px solid var(--c-border);border-radius:999px;padding:2px 12px;margin-bottom:var(--sp-1)}
.hidamari .card__title{font-size:1.125rem;margin:0 0 var(--sp-1)}
.hidamari .card__text{color:var(--c-sub);font-size:1rem;margin:0}

/* 画像プレースホルダー枠 */
.hidamari .ph{
  position:relative;
  margin:0;
  aspect-ratio:var(--ratio,3/2);
  background:var(--c-border);
  border-radius:var(--radius);
  overflow:hidden;
}
.hidamari .ph::after{
  content:attr(data-label);
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--sp-2);
  text-align:center;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--c-sub);
  word-break:break-all;
}
.hidamari .ph img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.hidamari .card .ph{border-radius:0}

/* 画像＋文章の左右交互（.media--rev の反転ルールは下の Gutenberg 対応セクションにある
   .wp-block-columns.media--rev{flex-direction:row-reverse} が本体。.media は wp:columns を
   直接使うようになったため未使用、.media__img / .media__body も同様に未使用のため削除済み） */

/* 定義テーブル */
.hidamari .table{width:100%;border-collapse:collapse;background:var(--c-white);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card)}
.hidamari .table th,.hidamari .table td{text-align:left;padding:var(--sp-3);border-bottom:1px solid var(--c-border);font-size:.9375rem;vertical-align:top}
.hidamari .table tr:last-child th,.hidamari .table tr:last-child td{border-bottom:none}
.hidamari .table th{width:11em;font-weight:700;background:var(--c-base);color:var(--c-text)}

/* ステップ（見出し・本文の書式のみ。番号カウンタと枠は下の Gutenberg 対応セクションで定義） */
.hidamari .steps h3{font-size:1rem;margin-bottom:var(--sp-1)}
.hidamari .steps p{font-size:1rem;color:var(--c-sub)}

/* お客様の声 */
.hidamari .voice{background:var(--c-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;height:100%}
.hidamari .voice > .wp-block-group__inner-container{display:flex;flex-direction:column;flex:1;min-height:0}
.hidamari .voice__body{padding:var(--sp-3);flex:1}
.hidamari .voice__name{font-size:.875rem;color:var(--c-sub);margin:var(--sp-2) 0 0}

/* 共通 CTA */
.hidamari .cta{background:var(--c-primary);color:var(--c-white);text-align:center;padding-block:var(--sec-y)}
.hidamari .cta h2{margin-bottom:var(--sp-2)}
.hidamari .cta p{margin-bottom:var(--sp-4);opacity:.92}
.hidamari .cta .wp-block-buttons{justify-content:center}
.hidamari .cta .wp-block-button__link{padding:16px 40px}

/* ===== 縦横比クラス（style="--ratio:…" の代替） ===== */
.hidamari .ph.ratio-16-9{--ratio:16/9}
.hidamari .ph.ratio-3-2{--ratio:3/2}
.hidamari .ph.ratio-4-3{--ratio:4/3}
.hidamari .ph.ratio-4-5{--ratio:4/5}

/* ===== Gutenberg 既定スタイルの打ち消し／ボタン ===== */
.hidamari .wp-block-image{margin:0}
.hidamari .wp-block-image.ph{margin:0}
.hidamari figure.ph{margin:0}
.hidamari .wp-block-columns{margin-bottom:0;gap:var(--sp-3)}
.hidamari .wp-block-column{min-width:0}
/* .container の実測幅が親の .alignfull > .wp-block-group__inner-container に付く
   SWELL の max-width:var(--article_size)（900px）に潰されないよう解除する。
   design.md のコンテンツ最大幅 1120px は .hidamari .container の max-width:var(--maxw) で担保する。 */
.hidamari .alignfull > .wp-block-group__inner-container{max-width:none}
/* works ページのように .stack を使わない .container 内で wp:columns が2段続く場合、
   隣接カラム間の縦の隙間が既定で0になる。.stack がある .container ではこの隙間は
   stack のルール（48px）が既に担い、二重に効かせないよう :not(.stack) で除外する。 */
.hidamari .container:not(.stack) .wp-block-columns + .wp-block-columns{margin-top:var(--sp-3)}
/* 782px は wp:columns（core/columns）がモバイル1カラム表示からPC横並びへ切り替わる
   WordPress コア既定のブレークポイント（wp-includes/blocks/columns/style.css の
   `@media (min-width: 782px)`）。900px や768pxに「揃えて」変更しないこと。 */
@media (min-width:782px){.hidamari .wp-block-columns.media--rev{flex-direction:row-reverse}}
.hidamari .wp-block-group{margin-block:0}
.hidamari .wp-block-buttons{gap:var(--sp-2)}
.hidamari .wp-block-button__link{
  display:inline-block;padding:14px 28px;border-radius:var(--radius);
  background:var(--c-accent);color:var(--c-text);font-weight:700;
  font-size:1rem;line-height:1.4;text-decoration:none;
}
.hidamari .wp-block-button__link:hover{filter:brightness(.93);transform:translateY(-1px)}
.hidamari .wp-block-button.is-style-outline .wp-block-button__link,
.hidamari .btn--outline .wp-block-button__link{
  background:transparent;border:1px solid var(--c-primary);color:var(--c-primary);
}
.hidamari .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hidamari .btn--outline .wp-block-button__link:hover{background:var(--c-white)}

/* ===== 「家づくりの流れ」の連番（CSS カウンタ） ===== */
.hidamari .steps{counter-reset:step}
.hidamari .steps__item{
  counter-increment:step;
  background:var(--c-white);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:var(--sp-4) var(--sp-3) var(--sp-3);
  height:100%;
}
.hidamari .steps__item::before{
  content:counter(step,decimal-leading-zero);
  display:block;font-size:1.5rem;font-weight:700;line-height:1;
  color:var(--c-accent);margin-bottom:var(--sp-2);
}

/* ===== Contact Form 7 ===== */
.hidamari .wpcf7{
  background:var(--c-white);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:var(--sp-5);
}
.hidamari .wpcf7 label{display:block;font-weight:700;font-size:.9375rem;margin-bottom:var(--sp-1)}
.hidamari .wpcf7 input[type="text"],
.hidamari .wpcf7 input[type="email"],
.hidamari .wpcf7 input[type="tel"],
.hidamari .wpcf7 textarea{
  width:100%;font-family:inherit;font-size:1rem;line-height:1.6;color:var(--c-text);
  background:var(--c-base);border:1px solid var(--c-border);border-radius:var(--radius);
  padding:12px var(--sp-2);
}
.hidamari .wpcf7 input:focus,
.hidamari .wpcf7 textarea:focus{outline:2px solid var(--c-accent);outline-offset:1px;background:var(--c-white)}
.hidamari .wpcf7 textarea{min-height:180px;resize:vertical}
.hidamari .wpcf7 input[type="checkbox"]{width:18px;height:18px;accent-color:var(--c-primary);margin-right:var(--sp-1)}
/* 静的版の .form__req / .form__opt（アクセント色のピル）を CF7 の .required / .optional に移植 */
.hidamari .wpcf7 .required,.hidamari .wpcf7 .optional{font-size:.75rem;font-weight:400;border-radius:999px;padding:2px 10px;margin-left:var(--sp-1);vertical-align:2px}
.hidamari .wpcf7 .required{background:var(--c-accent);color:var(--c-text)}
.hidamari .wpcf7 .optional{background:var(--c-base);color:var(--c-sub);border:1px solid var(--c-border)}
.hidamari .wpcf7 input[type="submit"]{
  display:block;padding:14px 28px;border:none;border-radius:var(--radius);
  background:var(--c-accent);color:var(--c-text);font-family:inherit;font-size:1rem;
  font-weight:700;cursor:pointer;
  /* 静的版の .form__submit{text-align:center;margin-top:48px} 相当 */
  margin:var(--sp-5) auto 0;
}
.hidamari .wpcf7 input[type="submit"]:hover{filter:brightness(.93)}
.hidamari .wpcf7 .wpcf7-not-valid-tip{color:var(--c-error);font-size:.8125rem}
.hidamari .wpcf7 form .wpcf7-response-output{border-radius:var(--radius);font-size:.9375rem}

/* ===== page: home ===== */
.hidamari .hero{padding-block:var(--sp-6);background:var(--c-base)}
.hidamari .hero h1{font-size:2.375rem;margin-bottom:var(--sp-3)}
.hidamari .hero p{color:var(--c-sub);margin-bottom:var(--sp-4)}

/* ===== page: company ===== */
.hidamari .access{background:var(--c-border);border-radius:var(--radius-card);aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sp-3);color:var(--c-sub);font-size:.875rem;line-height:1.7}

/* ===== responsive ===== */
@media (max-width:900px){
  .hidamari{--sec-y:56px}
  .hidamari .wpcf7{padding:var(--sp-4) var(--sp-3)}
}
@media (max-width:600px){
  .hidamari{--pad-x:var(--sp-2)}
  .hidamari h1{font-size:1.625rem}
  .hidamari h2{font-size:1.375rem}
  .hidamari .hero h1{font-size:1.75rem}
  .hidamari .table th,.hidamari .table td{display:block;width:auto;padding:var(--sp-2) var(--sp-3)}
  .hidamari .table th{border-bottom:none;padding-bottom:0}
  /* 静的版の @media(max-width:600px){.btn-row .btn{width:100%}} 相当。
     Gutenberg ではフレックスの子は .wp-block-button__link ではなく親の .wp-block-button なので、
     そちらを全幅にする。静的版でも CTA 帯のボタン（.cta .btn）は全幅ではなかったので除外する。 */
  .hidamari .wp-block-buttons > .wp-block-button{width:100%}
  .hidamari .wp-block-buttons > .wp-block-button > .wp-block-button__link{display:block;width:100%}
  .hidamari .cta .wp-block-buttons > .wp-block-button{width:auto}
  .hidamari .cta .wp-block-buttons > .wp-block-button > .wp-block-button__link{display:inline-block;width:auto}
}