/* =========================================================
   サーラ住宅 リニューアル ワイヤーフレーム 共通スタイル
   - 白黒（グレースケール）ワイヤー専用
   - PC / SP 切替は CSS container query で実現
   ========================================================= */

:root{
  --ink:#222;          /* 文字・主要罫線 */
  --ink-2:#666;        /* 補助テキスト */
  --line:#bdbdbd;      /* 罫線 */
  --line-2:#d9d9d9;    /* 薄い罫線 */
  --ph:#e9e9e9;        /* プレースホルダ面 */
  --ph-2:#f2f2f2;      /* 薄い面 */
  --bg:#fff;
  --chrome:#1c1c1c;    /* レビュー用ツールバー */
  --maxw:1240px;
  --gut:24px;
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#9a9a9a;            /* キャンバス外の余白 */
  color:var(--ink);
  font-size:14px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- レビュー用ツールバー（サイト本体ではない） ---------- */
.wf-bar{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--chrome);color:#fff;
  padding:8px 16px;font-size:12px;
}
.wf-bar a{color:#fff;text-decoration:none;}
.wf-bar .wf-home{border:1px solid #555;border-radius:4px;padding:4px 10px;}
.wf-bar .wf-home:hover{background:#333;}
.wf-bar .wf-id{opacity:.6;font-variant-numeric:tabular-nums;}
.wf-bar .wf-title{font-weight:700;}
.wf-bar .wf-seg{border:1px solid #555;border-radius:3px;padding:2px 7px;font-size:10px;opacity:.85;}
.wf-bar .wf-spacer{flex:1;}
.wf-bar .wf-toggle{display:flex;border:1px solid #555;border-radius:4px;overflow:hidden;}
.wf-bar .wf-toggle button{
  background:transparent;color:#fff;border:0;padding:5px 12px;
  font-size:11px;cursor:pointer;font-family:inherit;
}
.wf-bar .wf-toggle button.on{background:#fff;color:#1c1c1c;font-weight:700;}
.wf-bar .wf-nav a{border:1px solid #555;border-radius:4px;padding:4px 9px;}
.wf-bar .wf-nav a:hover{background:#333;}

/* ---------- キャンバス（PC/SP プレビュー枠） ---------- */
.canvas{
  container-type:inline-size;
  background:var(--bg);
  margin:24px auto;
  width:100%;max-width:var(--maxw);
  box-shadow:0 4px 30px rgba(0,0,0,.25);
  transition:max-width .25s ease;
}
.canvas.view-sp{max-width:390px;}

/* 注記バンド */
.wf-note{
  background:#333;color:#eee;font-size:11px;line-height:1.6;
  padding:6px 16px;border-bottom:1px solid #000;
}
.wf-note b{color:#fff;}

/* =========================================================
   サイト本体のワイヤー要素
   ========================================================= */

/* ----- ヘッダー ----- */
.site-head{border-bottom:1px solid var(--ink);}
.head-top{
  display:flex;align-items:center;gap:16px;
  padding:12px 28px;border-bottom:1px solid var(--line-2);
}
.logo{
  display:inline-block;border:1.5px solid var(--ink);border-radius:4px;
  padding:8px 16px;font-weight:700;letter-spacing:.05em;font-size:15px;
  text-decoration:none;color:var(--ink);
}
a.logo:hover{background:var(--ink);color:#fff;}
.head-top .tel{font-size:13px;color:var(--ink-2);}
.head-top .head-cta{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap;}

/* ハンバーガー（全ページ・全サイトメニュー起動） */
.menu-btn{
  display:inline-flex;align-items:center;gap:8px;margin-left:10px;
  border:1px solid var(--ink);border-radius:6px;background:#fff;
  padding:9px 14px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;color:var(--ink);white-space:nowrap;
}
.menu-btn:hover{background:var(--ink);color:#fff;}

/* ----- グローバルナビ + ドロップダウン ----- */
.gnav{display:flex;gap:0;padding:0 28px;flex-wrap:wrap;}
.gnav .navitem{position:relative;border-right:1px solid var(--line-2);}
.gnav .navitem:first-child{border-left:1px solid var(--line-2);}
.gnav .navitem>a{
  display:inline-flex;align-items:center;gap:5px;
  padding:14px 18px;text-decoration:none;color:var(--ink);
  font-size:13px;font-weight:500;
}
.gnav .navitem>a:hover{background:var(--ph-2);}
.gnav .navitem.has-drop>a::after{content:"▾";font-size:9px;color:var(--ink-2);}
.gnav .drop{
  position:absolute;top:100%;left:0;z-index:60;min-width:250px;
  background:#fff;border:1px solid var(--line);border-top:2px solid var(--ink);
  border-radius:0 0 8px 8px;box-shadow:0 10px 26px rgba(0,0,0,.12);
  padding:8px;display:none;
}
.gnav .navitem:hover .drop{display:block;}
.gnav .drop.mega{min-width:520px;}
.gnav .navitem:hover .drop.mega{display:grid;grid-template-columns:1fr 1fr;gap:2px;}
.gnav .drop a{display:block;padding:9px 12px;font-size:12px;border-radius:5px;text-decoration:none;color:var(--ink);}
.gnav .drop a:hover{background:var(--ph-2);}
.gnav .drop a .dno{color:var(--ink-2);font-size:10px;margin-right:6px;}

/* ----- 全サイトメニュー ドロワー（ハンバーガー） ----- */
.sp-only{display:none;}
.drawer{position:fixed;inset:0;z-index:2000;display:none;}
html.wf-drawer-open .drawer{display:block;}
html.wf-drawer-open{overflow:hidden;}
.drawer-backdrop{position:absolute;inset:0;background:rgba(28,28,28,.55);}
.drawer-panel{
  position:absolute;top:0;right:0;height:100%;width:min(480px,94vw);
  background:#fff;overflow-y:auto;padding:22px 24px 60px;
  box-shadow:-10px 0 34px rgba(0,0,0,.25);
}
.drawer-head{display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:-22px;background:#fff;padding:6px 0 12px;margin-bottom:6px;border-bottom:1px solid var(--line);}
.drawer-head b{font-size:13px;letter-spacing:.04em;}
.drawer-close{border:1px solid var(--ink);background:#fff;border-radius:6px;width:36px;height:36px;cursor:pointer;font-size:16px;font-family:inherit;}
.drawer-close:hover{background:var(--ink);color:#fff;}
.drawer a{display:block;text-decoration:none;color:var(--ink);font-size:13px;padding:6px 4px;border-radius:4px;}
.drawer a:hover{background:var(--ph-2);}
.drawer a .dno{color:var(--ink-2);font-size:10px;margin-right:8px;font-variant-numeric:tabular-nums;}
.drawer .dl1{font-weight:700;font-size:14px;border-bottom:1px solid var(--line);margin-bottom:4px;}
.drawer .dl2{font-weight:700;font-size:13px;margin-top:14px;border-top:1px solid var(--line-2);padding-top:10px;}
.drawer .dl3{padding-left:18px;}
.drawer .dl4{padding-left:34px;font-size:12px;color:#555;}
.drawer .dl5{padding-left:50px;font-size:12px;color:#666;}

/* ----- パンくず ----- */
.crumb{padding:10px 28px;font-size:11px;color:var(--ink-2);border-bottom:1px solid var(--line-2);}
.crumb span{margin:0 6px;}

/* ----- 汎用セクション ----- */
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;}
section.s{padding:64px 0;border-bottom:1px dashed var(--line-2);}
section.s:last-of-type{border-bottom:0;}
.sec-head{margin-bottom:28px;}
.sec-eyebrow{font-size:11px;letter-spacing:.18em;color:var(--ink-2);text-transform:uppercase;margin-bottom:8px;}
.sec-title{font-size:24px;font-weight:700;line-height:1.4;margin:0 0 8px;}
.sec-lead{color:var(--ink-2);max-width:640px;margin:0;}
.center{text-align:center;}
.center .sec-lead{margin-left:auto;margin-right:auto;}

/* ----- プレースホルダ画像 ----- */
.ph{
  position:relative;background:var(--ph);
  border:1px solid var(--line);overflow:hidden;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.05em;
}
.ph::before,.ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px));
  pointer-events:none;
}
.ph::after{background:linear-gradient(to bottom right,transparent calc(50% - .5px),var(--line) 50%,transparent calc(50% + .5px));}
.ph span{position:relative;z-index:1;background:var(--ph);padding:3px 8px;border-radius:3px;}
.r-16-9{aspect-ratio:16/9;}
.r-21-9{aspect-ratio:21/9;}
.r-4-3{aspect-ratio:4/3;}
.r-1-1{aspect-ratio:1/1;}
.r-3-4{aspect-ratio:3/4;}

/* ----- テキスト行プレースホルダ ----- */
.lines{display:flex;flex-direction:column;gap:9px;margin:14px 0;}
.lines i{display:block;height:9px;background:var(--ph);border-radius:2px;}
.lines i:nth-child(3n){width:92%;}
.lines i:nth-child(4n){width:78%;}
.lines i.last{width:55%;}

/* ----- ボタン ----- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 22px;border:1.5px solid var(--ink);border-radius:6px;
  font-size:13px;font-weight:600;background:#fff;color:var(--ink);
  text-decoration:none;white-space:nowrap;
}
.btn.primary{background:var(--ink);color:#fff;}
.btn.sm{padding:7px 14px;font-size:11px;border-width:1px;}
.btn.ghost{border:0;border-bottom:1.5px solid var(--ink);border-radius:0;padding:6px 2px;}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;}

/* ----- タグ／バッジ ----- */
.tag{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:3px 11px;font-size:11px;color:var(--ink-2);background:var(--ph-2);}

/* ----- グリッド ----- */
.grid{display:grid;gap:20px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.split.media-l{grid-template-columns:1fr 1fr;}

/* ----- カード ----- */
.card{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;}
.card .body{padding:16px;}
.card .meta{font-size:11px;color:var(--ink-2);margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;}
.card h4{margin:6px 0;font-size:15px;font-weight:600;}
.card .cat{font-size:10px;letter-spacing:.1em;color:var(--ink-2);}

/* ----- 統計/数値 ----- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.stat{border:1px solid var(--line);border-radius:8px;padding:22px 16px;text-align:center;}
.stat b{display:block;font-size:30px;font-weight:700;line-height:1.1;}
.stat small{color:var(--ink-2);font-size:11px;}

/* ----- 表 ----- */
table.wf{width:100%;border-collapse:collapse;font-size:12px;}
table.wf th,table.wf td{border:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top;}
table.wf th{background:var(--ph-2);font-weight:600;}

/* ----- ステップ/タイムライン ----- */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:st;}
.step{border:1px solid var(--line);border-radius:8px;padding:16px;position:relative;}
.step b{counter-increment:st;font-size:11px;color:var(--ink-2);}
.step b::before{content:"STEP " counter(st);}
.timeline{border-left:2px solid var(--line);padding-left:22px;display:flex;flex-direction:column;gap:24px;}
.timeline .tl{position:relative;}
.timeline .tl::before{content:"";position:absolute;left:-29px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--ink);}
.timeline .yr{font-weight:700;font-size:13px;}

/* ----- アコーディオン/FAQ ----- */
.faq{border-top:1px solid var(--line);}
.faq .q{border-bottom:1px solid var(--line);padding:16px 4px;display:flex;justify-content:space-between;gap:16px;align-items:center;cursor:pointer;}
.faq .q::after{content:"＋";color:var(--ink-2);}
.faq .q b{font-weight:500;}

/* ----- 図解ブロック ----- */
.diagram{border:1px dashed var(--line);border-radius:8px;background:var(--ph-2);padding:28px;text-align:center;color:var(--ink-2);}
.diagram .ico{font-size:26px;}

/* ----- フォーム ----- */
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-size:12px;font-weight:600;margin-bottom:6px;}
.form-field .req{color:var(--ink);border:1px solid var(--ink);border-radius:3px;font-size:9px;padding:1px 5px;margin-left:6px;vertical-align:middle;}
.input{border:1px solid var(--line);border-radius:5px;background:#fff;height:44px;width:100%;}
.input.area{height:120px;}
.input.sel::after{content:"▾";}
.form-card{border:1px solid var(--line);border-radius:10px;padding:28px;max-width:680px;margin:0 auto;}

/* ----- 地図 ----- */
.map{aspect-ratio:16/7;background:var(--ph);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-2);position:relative;}
.map::after{content:"📍";position:absolute;font-size:22px;}

/* ----- 声/引用 ----- */
.quote{border:1px solid var(--line);border-radius:8px;padding:22px;display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;}
.quote .av{width:64px;height:64px;border-radius:50%;background:var(--ph);border:1px solid var(--line);}

/* ----- ヒーロー ----- */
.hero{position:relative;}
.hero .ph{border:0;border-bottom:1px solid var(--line);}
.hero-copy{padding:44px 28px;}
.hero-copy .big{font-size:34px;font-weight:700;line-height:1.35;margin:0 0 12px;}
.hero-copy .sub{color:var(--ink-2);font-size:15px;}

/* ----- フィルタバー ----- */
.filterbar{border:1px solid var(--line);border-radius:8px;padding:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:12px;}
.filterbar .fchip{border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ink-2);}
.sidebar-layout{display:grid;grid-template-columns:240px 1fr;gap:32px;align-items:start;}
.sidebar{border:1px solid var(--line);border-radius:8px;padding:18px;font-size:12px;}
.sidebar h5{margin:0 0 6px;font-size:12px;}
.sidebar .fchip{display:inline-block;margin:3px 3px 3px 0;}
.sidebar .grp{padding:12px 0;border-bottom:1px solid var(--line-2);}
.sidebar .grp:last-child{border-bottom:0;}

/* ----- 子ページ入り口（ゲートウェイ） ----- */
.gate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.gate-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.gate-card{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:8px;padding:14px 16px;text-decoration:none;color:var(--ink);background:#fff;}
.gate-card:hover{background:var(--ph-2);}
.gate-card .gthumb{width:46px;height:46px;flex:none;background:var(--ph);border:1px solid var(--line);border-radius:6px;position:relative;}
.gate-card .gtxt{flex:1;min-width:0;}
.gate-card .gno{display:block;font-size:10px;color:var(--ink-2);letter-spacing:.04em;}
.gate-card b{display:block;font-weight:600;font-size:13px;line-height:1.4;}
.gate-card .garrow{color:var(--ink-2);flex:none;}

/* ----- 横スライダー（トピックス等） ----- */
.slider-head{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:14px;}
.slider-arrow{width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;background:#fff;cursor:pointer;font-size:14px;color:var(--ink);font-family:inherit;}
.slider-arrow:hover{background:var(--ink);color:#fff;}
.hscroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory;scroll-behavior:smooth;}
.hscroll>*{scroll-snap-align:start;flex:0 0 auto;}
.banner{width:380px;}
.banner .body{padding:12px 4px;}
.banner h4{margin:0;font-size:14px;font-weight:600;}
.banner .cat{font-size:10px;letter-spacing:.1em;color:var(--ink-2);}

/* ----- 検索導線ブロック ----- */
.search-block{border:1px solid var(--line);border-radius:8px;padding:20px;}
.search-block h5{margin:0 0 12px;font-size:14px;}
.search-block .chips{display:flex;gap:8px;flex-wrap:wrap;}

/* ----- タブ（下線型） ----- */
.tablist{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:28px;justify-content:center;flex-wrap:wrap;}
.wf-tab{background:transparent;border:0;border-bottom:2px solid transparent;padding:12px 24px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:inherit;margin-bottom:-1px;}
.wf-tab:hover{color:var(--ink);}
.wf-tab.on{color:var(--ink);border-bottom-color:var(--ink);}
.tabpanel.hidden{display:none;}

/* ----- ページネーション ----- */
.pager{display:flex;gap:6px;justify-content:center;margin-top:36px;}
.pager span{border:1px solid var(--line);border-radius:5px;min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-2);}
.pager span.on{background:var(--ink);color:#fff;}

/* ----- CTAバンド ----- */
.cta-band{background:var(--ph);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative;}
.cta-band .ph{position:absolute;inset:0;border:0;}
.cta-inner{position:relative;text-align:center;padding:56px 28px;}
.cta-inner h3{font-size:22px;margin:0 0 8px;}
.cta-inner p{color:var(--ink-2);margin:0 0 20px;}

/* ----- フッター ----- */
.site-foot{background:#fff;border-top:2px solid var(--ink);padding:48px 28px 24px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;}
.foot-grid h6{font-size:12px;margin:0 0 12px;border-bottom:1px solid var(--line-2);padding-bottom:8px;}
.foot-grid ul{list-style:none;margin:0;padding:0;font-size:12px;color:var(--ink-2);}
.foot-grid li{padding:4px 0;}
.foot-bottom{margin-top:32px;padding-top:16px;border-top:1px solid var(--line-2);font-size:11px;color:var(--ink-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.foot-sns{display:flex;gap:8px;}
.foot-sns span{width:30px;height:30px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;}

/* SP固定CTAバー表現 */
.sp-fixed-cta{display:none;}

/* =========================================================
   container query: SP表示（キャンバス幅 ≤ 600px）
   ========================================================= */
@container (max-width:600px){
  .head-top .head-cta{display:none;}
  .gnav{display:none;}
  .sp-only{display:flex;}
  .head-top{padding:12px 16px;}
  .head-top .menu-btn{margin-left:auto;}
  .wrap{padding:0 16px;}
  section.s{padding:40px 0;}
  .hero-copy{padding:28px 16px;}
  .hero-copy .big{font-size:24px;}
  .sec-title{font-size:20px;}
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .gate-grid,.gate-grid.cols-4{grid-template-columns:1fr;}
  .banner{width:80cqw;}
  .split,.split.media-l{grid-template-columns:1fr;gap:20px;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .steps{grid-template-columns:1fr;}
  .sidebar-layout{grid-template-columns:1fr;}
  .sidebar{order:-1;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .quote{grid-template-columns:1fr;}
  .quote .av{margin-bottom:-6px;}
  table.wf{font-size:11px;}
  .site-foot{padding:36px 16px 90px;}
  .sp-fixed-cta{
    display:flex;position:sticky;bottom:0;gap:8px;
    background:#fff;border-top:1px solid var(--ink);padding:10px 12px;z-index:50;
  }
  .sp-fixed-cta .btn{flex:1;justify-content:center;padding:12px 6px;font-size:12px;}
  .cta-inner{padding:40px 16px;}
}