/* ==========================================================
   YOHAKU design — style.css
   1ドメイン内に BtoC / BtoB を導線分離した共通スタイル
   ========================================================== */

/* ----------------------------------------------------------
   1. デザイントークン（CSS変数）
   ---------------------------------------------------------- */
:root{
  /* --- ブランド共通 --- */
  --c-bg:           #ffffff;
  --c-bg-soft:      #faf8f5;   /* オフホワイト */
  --c-bg-alt:       #f3efe8;   /* セクション背景 */
  --c-text:         #2a2a2a;
  --c-text-sub:     #6b6b6b;
  --c-line:         #e5e0d8;
  --c-line-soft:    #efeae1;

  /* --- BtoC: ウォームベージュ（一般のお客様向け） --- */
  --c-warm:         #c8a886;   /* やわらかなベージュ */
  --c-warm-dk:      #8a6a48;   /* 深いキャラメル */
  --c-warm-soft:    #f4ebde;   /* 薄ベージュ */
  --c-warm-bg:      #faf4ec;   /* 背景用クリーム */

  /* --- BtoB: クールグレー（業者・パートナー向け／落ち着いた寒色） --- */
  --c-cool:         #7a8590;   /* ブルーグレー */
  --c-cool-dk:      #3d4a58;   /* チャコール寄り */
  --c-cool-soft:    #e6ebf0;   /* 淡いクールグレー */
  --c-cool-bg:      #eff2f5;   /* 背景用 */

  /* --- フォント --- */
  --ff-sans:        'Noto Sans JP', system-ui, -apple-system, "Segoe UI", sans-serif;
  --ff-serif:       'Shippori Mincho', 'Noto Serif JP', serif;

  /* --- フォントサイズ --- */
  --fs-xs:          .78rem;
  --fs-sm:          .88rem;
  --fs-md:          1rem;
  --fs-lg:          1.125rem;
  --fs-xl:          1.4rem;
  --fs-2xl:         1.85rem;
  --fs-3xl:         2.4rem;
  --fs-hero:        clamp(2rem, 5vw, 3.4rem);

  /* --- 余白 --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* --- レイアウト --- */
  --container-w:    1180px;
  --container-narrow: 820px;
  --container-pad:  20px;

  /* --- 角丸・影 --- */
  --radius-sm:      6px;
  --radius-md:      14px;
  --radius-lg:      24px;
  --radius-pill:    999px;
  --shadow-sm:      0 2px 8px rgba(40,30,20,.04);
  --shadow-md:      0 6px 24px rgba(40,30,20,.08);

  /* --- アニメーション --- */
  --ease:           cubic-bezier(.2,.7,.2,1);
}

/* ----------------------------------------------------------
   2. ベースリセット
   ---------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-sans);
  font-size:var(--fs-md);
  line-height:1.8;
  color:var(--c-text);
  background:var(--c-bg);
  font-feature-settings:"palt";
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; transition:opacity .2s var(--ease); }
a:hover{ opacity:.7; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; line-height:1.4; font-weight:500; }
p{ margin:0; }
button{ font:inherit; cursor:pointer; border:none; background:none; }

/* ----------------------------------------------------------
   3. レイアウト共通
   ---------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 var(--container-pad);
}
.container-narrow{ max-width:var(--container-narrow); }
.section{ padding:var(--sp-9) 0; }
.section-soft{ background:var(--c-bg-soft); }
.section-alt{ background:var(--c-bg-alt); }

.section-eyebrow{
  font-family:var(--ff-serif);
  font-size:var(--fs-xs);
  letter-spacing:.4em;
  color:var(--c-text-sub);
  text-transform:uppercase;
  margin-bottom:var(--sp-3);
}
.section-title{
  font-family:var(--ff-serif);
  font-size:var(--fs-3xl);
  letter-spacing:.04em;
  margin-bottom:var(--sp-5);
}
.section-lead{
  color:var(--c-text-sub);
  margin-bottom:var(--sp-7);
  max-width:680px;
}

/* ----------------------------------------------------------
   3b. トップ告知バー（EC Coming Soon）
   ---------------------------------------------------------- */
.top-notice{
  display:flex; align-items:center; justify-content:center;
  gap:var(--sp-3);
  width:100%;
  padding:10px var(--container-pad);
  background:#1a1410;
  color:#fff;
  font-size:.78rem;
  letter-spacing:.06em;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  transition:background .3s var(--ease);
}
.top-notice:hover{
  background:var(--c-warm-dk);
  opacity:1;
}
.top-notice-pulse{
  width:7px; height:7px; border-radius:50%;
  background:#e8c89a;
  animation:topNoticePulse 2s var(--ease) infinite;
  flex-shrink:0;
}
@keyframes topNoticePulse{
  0%,100%{ transform:scale(1); opacity:1; box-shadow:0 0 0 0 rgba(232,200,154,.6); }
  50%   { transform:scale(1.3); opacity:.7; box-shadow:0 0 0 6px rgba(232,200,154,0); }
}
.top-notice-tag{
  font-family:var(--ff-serif);
  font-size:.7rem;
  letter-spacing:.32em;
  font-weight:500;
  color:#e8c89a;
  padding-right:var(--sp-3);
  border-right:1px solid rgba(255,255,255,.25);
}
.top-notice-text{
  color:rgba(255,255,255,.92);
  font-weight:300;
}
.top-notice-arrow{
  font-family:var(--ff-serif);
  font-size:.74rem;
  letter-spacing:.15em;
  color:#fff;
  padding-left:var(--sp-3);
  white-space:nowrap;
  transition:transform .3s var(--ease);
}
.top-notice:hover .top-notice-arrow{
  transform:translateX(4px);
}

/* スマホでは要素を絞ってコンパクトに */
@media (max-width:640px){
  .top-notice{ padding:9px 14px; gap:var(--sp-2); font-size:.7rem; }
  .top-notice-text{ display:none; }
  .top-notice-tag{ border-right:none; padding-right:0; }
  .top-notice-arrow{ font-size:.68rem; padding-left:var(--sp-2); }
}

/* ----------------------------------------------------------
   4. ヘッダー
   ---------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--c-line-soft);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.brand{
  display:inline-flex; align-items:center;
  font-family:var(--ff-serif);
  font-size:1.4rem;
  letter-spacing:.22em;
  font-weight:500;
  color:var(--c-text);
}
.brand img{ height:48px; width:auto; display:block; }
.brand small{ display:block; font-size:.58rem; letter-spacing:.3em; color:var(--c-text-sub); margin-top:2px; font-family:var(--ff-sans); }
.footer-brand img{ height:42px; width:auto; filter:invert(1) brightness(1.1); display:block; margin-bottom:var(--sp-3); }

.nav ul{ display:flex; gap:var(--sp-6); align-items:center; }
.nav a{ font-size:var(--fs-sm); letter-spacing:.05em; }
.nav a.is-warm{ color:var(--c-warm-dk); }
.nav a.is-cool{ color:var(--c-cool-dk); }

.nav-toggle{
  display:none;
  width:32px; height:32px;
  position:relative;
}
.nav-toggle span{
  position:absolute; left:6px; right:6px; height:1.5px; background:var(--c-text);
  transition:.3s var(--ease);
}
.nav-toggle span:nth-child(1){ top:10px; }
.nav-toggle span:nth-child(2){ top:16px; }
.nav-toggle span:nth-child(3){ top:22px; }
.nav-toggle.open span:nth-child(1){ top:16px; transform:rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ top:16px; transform:rotate(-45deg); }

@media (max-width:880px){
  /* ヘッダーとハンバーガーボタンは常に最前面 */
  .site-header{ z-index:210; }
  .nav-toggle{ display:block; position:relative; z-index:220; }

  /* フルスクリーンナビ（モダン版・位置ズレなし） */
  .nav{
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    width:100vw;
    height:100vh;
    height:100svh;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    padding:96px var(--container-pad) var(--sp-7);
    overflow-y:auto;
    z-index:200;
    opacity:0;
    visibility:hidden;
    transform:translateY(-12px);
    transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    border:none;
    box-shadow:none;
    flex:none;
  }
  .nav.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:var(--sp-5);
    max-width:480px;
  }
  .nav a{
    font-family:var(--ff-serif);
    font-size:1.4rem;
    letter-spacing:.08em;
    padding:8px 0;
    display:inline-block;
    border-bottom:1px solid transparent;
    transition:border-color .2s var(--ease);
  }
  .nav a:hover{
    border-bottom-color:var(--c-text);
  }
}

/* スクロール無効化（メニュー開いている時に背景がスクロールしないように） */
body.nav-open{ overflow:hidden; }

/* ----------------------------------------------------------
   5. ボタン
   ---------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  padding:14px 32px;
  font-size:var(--fs-sm); letter-spacing:.08em;
  border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:all .25s var(--ease);
  white-space:nowrap;
}
.btn-lg{ padding:18px 44px; font-size:var(--fs-md); }
.btn-sm{ padding:10px 22px; font-size:var(--fs-xs); }

.btn-warm{ background:var(--c-warm-dk); color:#fff; }
.btn-warm:hover{ background:var(--c-warm); opacity:1; transform:translateY(-1px); }

.btn-cool{ background:var(--c-cool-dk); color:#fff; }
.btn-cool:hover{ background:var(--c-cool); opacity:1; transform:translateY(-1px); }

.btn-ghost-warm{ border-color:var(--c-warm-dk); color:var(--c-warm-dk); }
.btn-ghost-warm:hover{ background:var(--c-warm-dk); color:#fff; opacity:1; }

.btn-ghost-cool{ border-color:var(--c-cool-dk); color:var(--c-cool-dk); }
.btn-ghost-cool:hover{ background:var(--c-cool-dk); color:#fff; opacity:1; }

.btn-dark{ background:var(--c-text); color:#fff; }
.btn-dark:hover{ opacity:.85; }

/* ----------------------------------------------------------
   6. ヒーロー（トップ）
   ---------------------------------------------------------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center;
  background:#1a1410;
  overflow:hidden;
  color:#fff;
}
.hero-image{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{
  from{ transform:scale(1.08); }
  to{   transform:scale(1); }
}
/* 旧YOHAKUと同じ暖色シャドウオーバーレイ（黒ではなくチャコールブラウン） */
.hero-image::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg,  rgba(20,16,12,.58) 0%, rgba(20,16,12,.24) 55%, rgba(20,16,12,.08) 100%),
    linear-gradient(180deg, rgba(20,16,12,.10) 0%, rgba(20,16,12,.40) 100%);
}
.hero-content{
  position:relative; z-index:2;
  padding:var(--sp-9) 0;
}
.hero-eyebrow{
  display:inline-block;
  font-family:var(--ff-sans);
  font-weight:500;
  letter-spacing:.28em;
  font-size:.74rem;
  padding:9px 22px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:var(--radius-pill);
  color:#fff;
  margin-bottom:var(--sp-5);
  text-transform:none;
}
.hero-title{
  font-family:var(--ff-serif);
  font-weight:500;
  font-size:clamp(1.95rem, 5.2vw, 3.8rem);
  line-height:1.55;
  letter-spacing:.06em;
  margin-bottom:var(--sp-6);
  color:#fff;
}
.hero-lead{
  font-size:clamp(.95rem, 1.5vw, 1.08rem);
  line-height:2.2;
  color:rgba(255,255,255,.94);
  max-width:640px;
  margin-bottom:var(--sp-7);
  font-weight:300;
}

/* ファーストビュー：BtoC / BtoB 二択導線（ミニマル版） */
.audience-split{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
  margin-top:var(--sp-7);
  max-width:720px;
}
.audience-card{
  position:relative;
  padding:var(--sp-6) var(--sp-7);
  border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border-radius:0;
  transition:all .4s var(--ease);
  text-align:left;
  display:flex; flex-direction:column; gap:var(--sp-2);
  color:#fff;
  overflow:hidden;
}
/* ホバー時にスライドする下線 */
.audience-card::after{
  content:""; position:absolute;
  left:0; bottom:0;
  width:0; height:1.5px;
  background:#fff;
  transition:width .5s var(--ease);
}
.audience-card:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.6);
  opacity:1;
}
.audience-card:hover::after{ width:100%; }

.audience-tag{
  display:inline-block;
  font-family:var(--ff-sans);
  font-size:.7rem;
  letter-spacing:.35em;
  font-weight:500;
  color:#fff;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.45);
  margin-bottom:var(--sp-3);
  align-self:flex-start;
}
.audience-card h3{
  font-family:var(--ff-serif);
  font-size:1.25rem;
  letter-spacing:.08em;
  font-weight:500;
  color:#fff;
  line-height:1.6;
}
.audience-card p{
  font-size:.82rem;
  color:rgba(255,255,255,.78);
  line-height:1.9;
  font-weight:300;
}
.audience-card .arrow{
  margin-top:var(--sp-4);
  font-family:var(--ff-serif);
  font-size:.82rem;
  letter-spacing:.2em;
  color:#fff;
  display:inline-flex; align-items:center; gap:var(--sp-3);
  transition:gap .4s var(--ease);
}
.audience-card .arrow::after{
  content:"→";
  display:inline-block;
  transition:transform .4s var(--ease);
}
.audience-card:hover .arrow{ gap:var(--sp-5); }
.audience-card:hover .arrow::after{ transform:translateX(6px); }

@media (max-width:680px){
  /* ===== ヘッダー：常に最前面で見える ===== */
  .top-notice{ z-index:55; }
  .site-header{ z-index:60; }
  .header-inner{ height:60px; }
  .brand img{ height:30px; }

  /* ===== ヒーロー：画面いっぱい・写真を主役に ===== */
  .hero{
    min-height:100vh;
    min-height:100svh;
    padding:0;
    display:flex;
    align-items:stretch;
  }
  .hero-content{
    display:flex;
    flex-direction:column;
    width:100%;
    padding:var(--sp-7) var(--container-pad) var(--sp-5);
  }

  /* テキストブロックはコンパクトに上部 */
  .hero-eyebrow{
    font-size:.62rem;
    padding:5px 14px;
    letter-spacing:.22em;
    margin-bottom:var(--sp-4);
  }
  .hero-title{
    font-size:1.55rem;
    letter-spacing:.03em;
    line-height:1.75;
    margin-bottom:var(--sp-4);
  }
  .hero-lead{
    font-size:.76rem;
    line-height:1.95;
    margin-bottom:var(--sp-5);
    max-width:90%;
  }

  /* 写真：オーバーレイは控えめに、写真の表示位置を調整 */
  .hero-image{
    background-position:center center;
  }
  .hero-image::after{
    background:
      linear-gradient(180deg,
        rgba(20,16,12,.30) 0%,
        rgba(20,16,12,.10) 35%,
        rgba(20,16,12,.10) 65%,
        rgba(20,16,12,.55) 100%);
  }

  /* ===== バナー：2列のまま小さく、画面下部に配置 ===== */
  .audience-split{
    margin-top:auto;          /* 下に押し出して写真が中央に */
    grid-template-columns:1fr 1fr;
    gap:var(--sp-2);
    max-width:100%;
  }
  .audience-card{
    padding:var(--sp-3);
    min-height:0;
  }
  .audience-card h3{
    font-size:.74rem;
    line-height:1.55;
    letter-spacing:.02em;
  }
  .audience-card p{
    display:none;             /* 説明文はモバイルでは非表示にして写真エリア確保 */
  }
  .audience-card .arrow{
    font-size:.66rem;
    margin-top:var(--sp-2);
    letter-spacing:.12em;
  }
  .audience-tag{
    font-size:.56rem;
    letter-spacing:.22em;
    padding-bottom:4px;
    margin-bottom:var(--sp-2);
  }
}

/* さらに極小画面（〜400px） */
@media (max-width:400px){
  .hero-title{ font-size:1.4rem; line-height:1.8; }
  .hero-lead{ font-size:.72rem; }
  .audience-card h3{ font-size:.78rem; }
  .audience-card .arrow{ font-size:.62rem; }
  .top-notice{ padding:8px 12px; font-size:.65rem; }
}

/* ----------------------------------------------------------
   7. ページヒーロー（下層共通）
   ---------------------------------------------------------- */
.page-hero{
  position:relative;
  padding:var(--sp-8) 0 var(--sp-7);
  background:var(--c-bg-soft);
  border-bottom:1px solid var(--c-line-soft);
  overflow:hidden;
}
.page-hero.is-warm{ background:var(--c-warm-bg); }
.page-hero.is-cool{ background:var(--c-cool-bg); }

/* 背景画像つき page-hero（オーバーレイで読みやすさ確保） */
.page-hero.has-bg{
  padding:var(--sp-9) 0 var(--sp-8);
  color:#fff;
  isolation:isolate;
  background:#1a1410;
}
.page-hero.has-bg::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--page-hero-bg);
  background-size:cover; background-position:center;
}
.page-hero.has-bg.is-warm::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,  rgba(34,24,16,.72) 0%, rgba(34,24,16,.38) 70%, rgba(34,24,16,.22) 100%),
    linear-gradient(180deg, rgba(34,24,16,.10) 0%, rgba(34,24,16,.55) 100%);
}
.page-hero.has-bg.is-cool::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,  rgba(18,22,28,.78) 0%, rgba(18,22,28,.45) 70%, rgba(18,22,28,.28) 100%),
    linear-gradient(180deg, rgba(18,22,28,.10) 0%, rgba(18,22,28,.55) 100%);
}
.page-hero.has-bg .breadcrumb{ color:rgba(255,255,255,.7); }
.page-hero.has-bg .breadcrumb a{ color:rgba(255,255,255,.85); }
.page-hero.has-bg .section-eyebrow{ color:rgba(255,255,255,.85); }
.page-hero.has-bg h1{ color:#fff; }
.page-hero.has-bg .lead{ color:rgba(255,255,255,.92); }
.breadcrumb{
  font-size:var(--fs-xs); letter-spacing:.1em;
  color:var(--c-text-sub); margin-bottom:var(--sp-4);
}
.page-hero h1{
  font-family:var(--ff-serif);
  font-size:var(--fs-3xl);
  letter-spacing:.05em;
  margin-bottom:var(--sp-3);
}
.page-hero .lead{ color:var(--c-text-sub); max-width:640px; }

/* ----------------------------------------------------------
   8. カードグリッド
   ---------------------------------------------------------- */
.card-grid{
  display:grid; gap:var(--sp-6);
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
}
.card{
  background:#fff;
  border:1px solid var(--c-line-soft);
  border-radius:var(--radius-md);
  padding:var(--sp-6);
  transition:all .3s var(--ease);
  position:relative;
}
/* 得意分野ハイライトカード */
.card.is-featured{
  border:2px solid var(--c-cool-dk);
  box-shadow:0 8px 28px rgba(40,30,20,.10);
}
.card.is-featured::before{
  content:"FEATURED";
  position:absolute; top:-12px; left:24px;
  background:var(--c-cool-dk); color:#fff;
  font-size:.62rem; letter-spacing:.3em;
  padding:5px 14px; border-radius:var(--radius-pill);
  font-weight:500;
}
.featured-badge{
  display:inline-block;
  margin-left:var(--sp-3);
  background:var(--c-cool-dk);
  color:#fff;
  font-family:var(--ff-sans);
  font-size:.6rem;
  font-weight:500;
  letter-spacing:.2em;
  padding:3px 10px;
  border-radius:var(--radius-pill);
  vertical-align:middle;
}
.card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.card h3{
  font-family:var(--ff-serif);
  font-size:var(--fs-lg);
  letter-spacing:.04em;
  margin-bottom:var(--sp-3);
}
.card p{ font-size:var(--fs-sm); color:var(--c-text-sub); }

/* ----------------------------------------------------------
   9. プレースホルダー画像（ダミー）
   ---------------------------------------------------------- */
.ph-img{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--c-bg-alt), var(--c-line));
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  color:var(--c-text-sub);
  font-size:var(--fs-xs); letter-spacing:.2em;
}
.ph-img.square{ aspect-ratio:1/1; }
.ph-img.wide{ aspect-ratio:16/9; }
.ph-img.portrait{ aspect-ratio:3/4; }
.ph-img img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .6s var(--ease);
}
.ph-img:hover img{ transform:scale(1.04); }
.ph-img:has(img) > span:not(.badge-online),
.ph-img:has(img)::after{ display:none; }

/* オンライン対応バッジ（写真左上） */
.badge-online{
  position:absolute; top:var(--sp-3); left:var(--sp-3);
  z-index:2;
  display:inline-block !important;
  font-size:.66rem;
  letter-spacing:.18em;
  font-weight:500;
  padding:5px 12px;
  background:rgba(255,255,255,.92);
  color:var(--c-warm-dk);
  border-radius:var(--radius-pill);
  backdrop-filter:blur(4px);
}

/* Before / After（施工事例用） */
.ba-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3);
}
.ba-item{ position:relative; }
.ba-item .label{
  position:absolute; top:var(--sp-3); left:var(--sp-3);
  background:rgba(0,0,0,.65); color:#fff;
  font-size:var(--fs-xs); letter-spacing:.2em;
  padding:4px 12px; border-radius:var(--radius-pill);
  z-index:2;
}

/* ----------------------------------------------------------
   9b. モザイクギャラリー（スタイル紹介用）
   ---------------------------------------------------------- */
.mosaic{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:180px;
  gap:var(--sp-3);
  margin-top:var(--sp-7);
}
.mosaic-item{
  margin:0; overflow:hidden;
  border-radius:2px;
  position:relative;
}
.mosaic-item img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .8s var(--ease);
}
.mosaic-item:hover img{ transform:scale(1.06); }
.mosaic-item.m-tall{ grid-row:span 2; }
.mosaic-item.m-wide{ grid-column:span 2; }
@media (max-width:760px){
  .mosaic{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:160px; }
  .mosaic-item.m-wide{ grid-column:span 2; }
  .mosaic-item.m-tall{ grid-row:span 2; }
}

/* ----------------------------------------------------------
   10. 料金プラン
   ---------------------------------------------------------- */
.plan-grid{
  display:grid; gap:var(--sp-6);
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.plan{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius-lg);
  padding:var(--sp-7);
  text-align:left;
  position:relative;
}
.plan.is-recommend{
  border-color:var(--c-warm);
  border-width:2px;
}
.plan.is-recommend::before{
  content:"おすすめ";
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--c-warm-dk); color:#fff;
  font-size:var(--fs-xs); letter-spacing:.2em;
  padding:6px 18px; border-radius:var(--radius-pill);
}
.plan h3{
  font-family:var(--ff-serif);
  font-size:var(--fs-xl);
  margin-bottom:var(--sp-3);
}
.plan .price{
  font-family:var(--ff-serif);
  font-size:var(--fs-2xl);
  letter-spacing:.04em;
  margin-bottom:var(--sp-2);
}
.plan .price small{ font-size:var(--fs-sm); color:var(--c-text-sub); margin-left:6px; }
.plan ul{
  margin-top:var(--sp-5);
  border-top:1px solid var(--c-line-soft);
  padding-top:var(--sp-5);
}
.plan ul li{
  padding:var(--sp-2) 0;
  font-size:var(--fs-sm);
  color:var(--c-text);
  position:relative; padding-left:24px;
}
.plan ul li::before{
  content:"✓"; position:absolute; left:0; color:var(--c-warm-dk);
}

/* ----------------------------------------------------------
   11. FAQ（アコーディオン）
   ---------------------------------------------------------- */
.faq-list details{
  border-bottom:1px solid var(--c-line-soft);
  padding:var(--sp-5) 0;
}
.faq-list summary{
  font-family:var(--ff-serif);
  font-size:var(--fs-lg);
  letter-spacing:.04em;
  cursor:pointer;
  list-style:none;
  position:relative; padding-right:32px;
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary::after{
  content:"+"; position:absolute; right:8px; top:0;
  font-size:1.4rem; color:var(--c-text-sub);
  transition:transform .3s var(--ease);
}
.faq-list details[open] summary::after{ content:"−"; }
.faq-list details p{
  margin-top:var(--sp-3);
  color:var(--c-text-sub);
  font-size:var(--fs-sm);
}

/* ----------------------------------------------------------
   12. フォーム
   ---------------------------------------------------------- */
.form-wrap{
  background:#fff;
  border:1px solid var(--c-line-soft);
  border-radius:var(--radius-lg);
  padding:var(--sp-8);
}
.form-row{ margin-bottom:var(--sp-5); }
.form-row.two-col{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); margin-bottom:0;
}
.form-row.two-col > .form-row{ margin-bottom:var(--sp-5); }
@media (max-width:640px){
  .form-row.two-col{ grid-template-columns:1fr; }
  .form-wrap{ padding:var(--sp-5); }
}

.form-label{
  display:block;
  font-size:var(--fs-sm);
  font-weight:500;
  margin-bottom:var(--sp-2);
}
.form-label .req{
  font-size:var(--fs-xs); color:#fff; background:var(--c-warm-dk);
  padding:2px 8px; border-radius:var(--radius-pill); margin-left:8px;
  letter-spacing:.1em;
}
.form-label .opt{
  font-size:var(--fs-xs); color:var(--c-text-sub); border:1px solid var(--c-line);
  padding:2px 8px; border-radius:var(--radius-pill); margin-left:8px;
  letter-spacing:.1em;
}
.form-input,.form-select,.form-textarea{
  width:100%;
  padding:14px 16px;
  border:1px solid var(--c-line);
  border-radius:var(--radius-sm);
  font:inherit;
  background:var(--c-bg-soft);
  transition:all .2s var(--ease);
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  outline:none;
  border-color:var(--c-warm);
  background:#fff;
}
.is-cool .form-input:focus,.is-cool .form-select:focus,.is-cool .form-textarea:focus{
  border-color:var(--c-cool);
}
.form-textarea{ min-height:160px; resize:vertical; line-height:1.8; }
.form-check{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  font-size:var(--fs-sm); color:var(--c-text-sub);
  margin:var(--sp-5) 0;
}
.form-submit{ text-align:center; margin-top:var(--sp-6); }

/* ----------------------------------------------------------
   13. ブログ・コラム
   ---------------------------------------------------------- */
.post-grid{
  display:grid; gap:var(--sp-6);
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr));
}
.post-card{
  background:#fff;
  border:1px solid var(--c-line-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:all .3s var(--ease);
}
.post-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
.post-card .ph-img{ border-radius:0; }
.post-card-body{ padding:var(--sp-5); }
.post-card .meta{
  font-size:var(--fs-xs); letter-spacing:.15em;
  color:var(--c-text-sub); margin-bottom:var(--sp-2);
  display:flex; gap:var(--sp-3);
}
.post-card .category{
  background:var(--c-bg-alt);
  padding:2px 10px; border-radius:var(--radius-pill);
}
.post-card h3{
  font-family:var(--ff-serif);
  font-size:var(--fs-lg);
  margin-bottom:var(--sp-3);
}
.post-card p{ font-size:var(--fs-sm); color:var(--c-text-sub); }

/* ----------------------------------------------------------
   13b. ECショップ告知バナー（Coming Soon）
   ---------------------------------------------------------- */
.ec-teaser{
  position:relative;
  padding:var(--sp-9) 0;
  overflow:hidden;
  isolation:isolate;
}
.ec-teaser-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1000px 480px at 100% 0%, var(--c-warm-bg) 0%, transparent 60%),
    radial-gradient(800px 400px at 0% 100%, var(--c-warm-bg) 0%, transparent 55%),
    var(--c-bg);
}
.ec-teaser-inner{
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:var(--sp-8);
  align-items:center;
}
@media (max-width:880px){
  .ec-teaser-inner{ grid-template-columns:1fr; gap:var(--sp-7); }
}

/* 左カラム：テキスト */
.ec-teaser-eyebrow{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  font-family:var(--ff-sans);
  font-size:.72rem;
  letter-spacing:.32em;
  font-weight:500;
  color:var(--c-warm-dk);
  margin-bottom:var(--sp-4);
}
.ec-pulse{
  width:8px; height:8px; border-radius:50%;
  background:var(--c-warm-dk);
  position:relative;
  animation:ecPulse 2s var(--ease) infinite;
}
@keyframes ecPulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.5); opacity:.5; }
}
.ec-teaser-title{
  font-family:var(--ff-serif);
  font-weight:500;
  font-size:clamp(1.55rem, 3.4vw, 2.3rem);
  letter-spacing:.06em;
  line-height:1.7;
  color:var(--c-text);
  margin-bottom:var(--sp-5);
}
.ec-teaser-title em{
  font-style:normal;
  font-weight:600;
  position:relative;
  padding:0 4px;
}
.ec-teaser-title em::after{
  content:""; position:absolute; left:0; right:0; bottom:6px;
  height:8px;
  background:var(--c-warm-soft);
  z-index:-1;
}
.ec-teaser-lead{
  color:var(--c-text-sub);
  line-height:2;
  margin-bottom:var(--sp-6);
  font-weight:300;
  font-size:.95rem;
}
.ec-teaser-lead strong{
  display:inline-block; margin-top:var(--sp-2);
  color:var(--c-text);
  font-weight:500;
}

/* 3つの特徴 */
.ec-teaser-features{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-3);
  margin-bottom:var(--sp-6);
  padding:var(--sp-5) 0;
  border-top:1px solid var(--c-line-soft);
  border-bottom:1px solid var(--c-line-soft);
}
@media (max-width:560px){
  .ec-teaser-features{ grid-template-columns:1fr; gap:var(--sp-3); }
}
.ec-teaser-features li{
  display:flex; align-items:flex-start; gap:var(--sp-3);
}
.ec-feature-icon{
  font-family:var(--ff-serif);
  font-size:1.1rem;
  color:var(--c-warm-dk);
  line-height:1;
  margin-top:2px;
}
.ec-teaser-features div{ display:flex; flex-direction:column; }
.ec-teaser-features strong{
  font-family:var(--ff-serif);
  font-size:.85rem;
  letter-spacing:.2em;
  color:var(--c-text);
  margin-bottom:2px;
}
.ec-teaser-features span{
  font-size:.72rem;
  color:var(--c-text-sub);
  line-height:1.6;
}
.ec-teaser-note{
  font-size:.78rem;
  color:var(--c-text-sub);
  line-height:1.8;
}

/* 右カラム：写真＋バッジ */
.ec-teaser-visual{
  position:relative;
  aspect-ratio:4/5;
  max-width:420px;
  width:100%;
  justify-self:end;
}
@media (max-width:880px){
  .ec-teaser-visual{ justify-self:center; aspect-ratio:5/4; max-width:520px; }
}
.ec-teaser-photo{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:grayscale(.3) contrast(1.05) brightness(1.02);
}
.ec-teaser-badge{
  position:absolute;
  top:-26px; right:-26px;
  width:130px; height:130px;
  border-radius:50%;
  background:var(--c-warm-dk);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--ff-serif);
  font-size:.92rem;
  font-weight:500;
  letter-spacing:.18em;
  line-height:1.5;
  box-shadow:0 8px 24px rgba(40,30,20,.18);
  animation:ecBadgeRotate 24s linear infinite;
}
@keyframes ecBadgeRotate{
  from{ transform:rotate(-6deg); }
  50% { transform:rotate(6deg); }
  to  { transform:rotate(-6deg); }
}
@media (max-width:560px){
  .ec-teaser-badge{ width:100px; height:100px; font-size:.78rem; top:-12px; right:-12px; }
}

/* ----------------------------------------------------------
   14a. 施工写真マーキー（無限横スクロール）
   ---------------------------------------------------------- */
.marquee-section{
  padding:var(--sp-8) 0;
  background:var(--c-bg-soft);
  overflow:hidden;
}
.marquee{
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.marquee-track{
  display:flex; gap:var(--sp-4);
  width:max-content;
  animation:marqueeScroll 60s linear infinite;
}
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeScroll{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}
.marquee-item{
  flex:0 0 auto;
  width:340px;
  height:240px;
  margin:0;
  border-radius:2px;
  overflow:hidden;
}
.marquee-item img{
  width:100%; height:100%; object-fit:cover;
  display:block;
  transition:transform .6s var(--ease);
}
.marquee-item:hover img{ transform:scale(1.05); }
@media (max-width:680px){
  .marquee-item{ width:240px; height:180px; }
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; }
}

/* ----------------------------------------------------------
   14b. 無料相談CTAバナー（背景画像入り・暖色オーバーレイ）
   ---------------------------------------------------------- */
.cta-banner{
  position:relative;
  padding:var(--sp-9) 0;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.cta-banner-bg{
  position:absolute; inset:0; z-index:-2;
  background-size:cover; background-position:center;
}
.cta-banner::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(20,16,12,.78) 0%, rgba(20,16,12,.55) 50%, rgba(20,16,12,.4) 100%),
    linear-gradient(180deg, rgba(20,16,12,.2) 0%, rgba(20,16,12,.55) 100%);
}
.cta-banner-inner{
  position:relative; z-index:1;
  text-align:center;
  max-width:760px;
}
.cta-banner-title{
  font-family:var(--ff-serif);
  font-weight:500;
  font-size:clamp(1.6rem, 3.4vw, 2.4rem);
  letter-spacing:.06em;
  line-height:1.6;
  color:#fff;
  margin-bottom:var(--sp-5);
}
.cta-banner-lead{
  color:rgba(255,255,255,.9);
  line-height:2;
  margin-bottom:var(--sp-7);
  font-weight:300;
}
.cta-banner-actions{
  display:flex; justify-content:center; gap:var(--sp-4); flex-wrap:wrap;
}
.btn-primary{ background:#fff; color:var(--c-text); }
.btn-primary:hover{ background:var(--c-warm-soft); opacity:1; transform:translateY(-1px); }
.btn-ghost-light{ border:1px solid rgba(255,255,255,.6); color:#fff; }
.btn-ghost-light:hover{ background:#fff; color:var(--c-text); opacity:1; }

/* ----------------------------------------------------------
   14. CTA帯
   ---------------------------------------------------------- */
.cta-band{
  padding:var(--sp-9) 0;
  text-align:center;
}
.cta-band.is-warm{ background:var(--c-warm-bg); }
.cta-band.is-cool{ background:var(--c-cool-bg); }
.cta-band h2{
  font-family:var(--ff-serif);
  font-size:var(--fs-2xl);
  margin-bottom:var(--sp-4);
}
.cta-band p{ color:var(--c-text-sub); margin-bottom:var(--sp-6); }

/* ----------------------------------------------------------
   15. プロセス・フロー
   ---------------------------------------------------------- */
.flow-list{ counter-reset:flow; }
.flow-item{
  display:grid; grid-template-columns:80px 1fr; gap:var(--sp-5);
  padding:var(--sp-6) 0;
  border-bottom:1px solid var(--c-line-soft);
}
.flow-item .num{
  counter-increment:flow;
  font-family:var(--ff-serif);
  font-size:var(--fs-2xl);
  color:var(--c-cool);
}
.flow-item .num::before{ content:"0" counter(flow); }
.flow-item h3{
  font-family:var(--ff-serif);
  font-size:var(--fs-xl);
  margin-bottom:var(--sp-3);
}
.flow-item p{ color:var(--c-text-sub); font-size:var(--fs-sm); }

/* ----------------------------------------------------------
   16. プロフィール
   ---------------------------------------------------------- */
.profile{
  display:grid; grid-template-columns:280px 1fr;
  gap:var(--sp-8); align-items:start;
}
@media (max-width:760px){
  .profile{ grid-template-columns:1fr; }
}
.profile .ph-img{ aspect-ratio:3/4; }
.spec-list{
  display:grid; grid-template-columns:120px 1fr;
  gap:var(--sp-3) var(--sp-5);
  margin-top:var(--sp-5);
  font-size:var(--fs-sm);
}
.spec-list dt{ color:var(--c-text-sub); }
.spec-list dd{ margin:0; }

/* ----------------------------------------------------------
   16b. 軽め自己紹介ページ専用
   ---------------------------------------------------------- */
.about-light{
  display:grid; grid-template-columns:5fr 6fr;
  gap:var(--sp-8); align-items:center;
}
.about-light-img img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:2px; display:block;
}
.about-light-text h2{ margin-bottom:var(--sp-5); }
.about-light-text p{
  color:var(--c-text-sub);
  line-height:2.1;
  margin-bottom:var(--sp-5);
  font-weight:300;
}
@media (max-width:760px){
  .about-light{ grid-template-columns:1fr; gap:var(--sp-6); }
}

/* パーソナル4カード */
.personal-grid{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-5);
  margin-top:var(--sp-7);
}
@media (max-width:640px){
  .personal-grid{ grid-template-columns:1fr; }
}
.personal-card{
  background:#fff;
  border:1px solid var(--c-line-soft);
  border-radius:var(--radius-md);
  padding:var(--sp-6);
  transition:all .3s var(--ease);
}
.personal-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}
.personal-icon{
  display:inline-block;
  font-size:1.6rem;
  margin-bottom:var(--sp-3);
}
.personal-card h3{
  font-family:var(--ff-serif);
  font-size:var(--fs-lg);
  letter-spacing:.05em;
  margin-bottom:var(--sp-3);
}
.personal-card p{
  font-size:var(--fs-sm);
  color:var(--c-text-sub);
  line-height:1.95;
}

/* ----------------------------------------------------------
   16c. プロフィール — 名前/メタ／強み引用 ／ コンセプト
   ---------------------------------------------------------- */
.profile-name{
  font-family:var(--ff-serif);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.18em;
  line-height:1.6;
  margin:0 0 var(--sp-2);
  color:var(--c-text-sub);
}
.profile-meta{
  font-family:var(--ff-sans);
  font-size:.78rem;
  letter-spacing:.18em;
  color:var(--c-text-sub);
  font-weight:400;
}
/* MOEの section-eyebrow をプロフィール内では大きく見せる */
.profile-text-eyebrow{
  font-family:var(--ff-serif);
  font-size:1.6rem !important;
  font-weight:500 !important;
  letter-spacing:.32em !important;
  text-transform:uppercase;
  color:var(--c-text) !important;
  margin-bottom:var(--sp-3) !important;
  line-height:1 !important;
}

/* スタイリッシュな強み引用ボックス */
.strength{
  position:relative;
  margin:var(--sp-7) 0 0;
  padding:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-7);
  border-top:1px solid var(--c-line);
  border-bottom:1px solid var(--c-line);
}
.strength-quote-mark{
  position:absolute;
  top:-6px; left:-2px;
  font-family:'Shippori Mincho', serif;
  font-size:5rem;
  line-height:1;
  color:var(--c-cool-dk);
  opacity:.18;
  font-weight:600;
}
.strength p{
  font-family:var(--ff-serif);
  font-size:1.02rem;
  line-height:2;
  letter-spacing:.06em;
  color:var(--c-text);
  font-weight:400;
}
.strength em{
  font-style:normal;
  font-weight:500;
  color:var(--c-cool-dk);
  font-size:1.16em;
  letter-spacing:.08em;
  display:inline-block;
  margin-top:8px;
}

/* YOHAKUコンセプトセクション（世界観の主役） */
.concept-section{
  position:relative;
  isolation:isolate;
  padding:var(--sp-9) 0;
  text-align:center;
  overflow:hidden;
  background:var(--c-bg);
}
.concept-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 400px at 50% 0%, var(--c-warm-bg) 0%, transparent 60%),
    radial-gradient(1000px 360px at 50% 100%, var(--c-warm-bg) 0%, transparent 60%);
  opacity:.7;
}
.concept-section::before,
.concept-section::after{
  content:""; position:absolute;
  left:50%; transform:translateX(-50%);
  width:1px; height:48px;
  background:linear-gradient(180deg, transparent, var(--c-warm-dk));
  opacity:.4;
}
.concept-section::before{ top:0; }
.concept-section::after{ bottom:0; transform:translateX(-50%) rotate(180deg); }

.concept-title{
  font-family:var(--ff-serif);
  font-weight:500;
  font-size:clamp(1.6rem, 3.6vw, 2.6rem);
  letter-spacing:.1em;
  line-height:1.85;
  margin:var(--sp-5) 0 var(--sp-7);
  color:var(--c-text);
}
.concept-title em{
  font-style:normal;
  position:relative;
  padding:0 4px;
  font-weight:600;
}
.concept-title em::after{
  content:"";
  position:absolute; left:0; right:0; bottom:8px;
  height:8px;
  background:var(--c-warm-soft);
  z-index:-1;
}
.concept-body p{
  font-family:var(--ff-serif);
  font-size:1.02rem;
  letter-spacing:.06em;
  line-height:2.4;
  color:var(--c-text);
  font-weight:400;
  margin-bottom:var(--sp-5);
}
.concept-body p:last-child{ margin-bottom:0; }

/* ----------------------------------------------------------
   17. フッター
   ---------------------------------------------------------- */
.site-footer{
  background:#1f1f1f;
  color:#aaa;
  padding:var(--sp-8) 0 var(--sp-6);
  font-size:var(--fs-sm);
}
.footer-inner{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-7);
  margin-bottom:var(--sp-7);
}
@media (max-width:760px){
  .footer-inner{ grid-template-columns:1fr 1fr; gap:var(--sp-5); }
}
.footer-brand{ font-family:var(--ff-serif); color:#fff; font-size:1.1rem; letter-spacing:.18em; }
.footer-tag{ font-size:var(--fs-xs); margin-top:var(--sp-3); color:#888; line-height:1.8; }
.footer-col h4{
  color:#fff;
  font-size:var(--fs-xs); letter-spacing:.25em;
  margin-bottom:var(--sp-4);
}
.footer-col ul li{ margin-bottom:var(--sp-2); }
.footer-col a{ color:#aaa; }
.footer-col a:hover{ color:#fff; opacity:1; }
.copyright{
  border-top:1px solid #333;
  padding-top:var(--sp-5);
  text-align:center;
  font-size:var(--fs-xs);
  color:#666;
}

/* ----------------------------------------------------------
   18. アニメーション（フェードイン）
   ---------------------------------------------------------- */
.fade-in{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.fade-in.is-visible{ opacity:1; transform:translateY(0); }

/* ----------------------------------------------------------
   19. ユーティリティ
   ---------------------------------------------------------- */
.center{ text-align:center; }
.mt-7{ margin-top:var(--sp-7); }
.mb-0{ margin-bottom:0; }
.pc{ display:inline; } .sp{ display:none; }
@media (max-width:640px){ .pc{ display:none; } .sp{ display:inline; } }