@charset "utf-8";
/* ===========================================================
   森継株式会社 サイト共通スタイル
   E4_方針適合.html の部品を切り出したもの。
   値は 参照層(--ref-*) → 役割層 の2層で持つ。
   ここ以外（HTML）には色の hex を書かない。
   グループ共通の基準：_共通/デザイン方針.md
   =========================================================== */

/* ---------- 1. トークン ---------- */
:root {
  color-scheme: light dark;

  /* 参照層：ここだけが hex を持つ */
  --ref-ivory:      #FAF8F3;
  --ref-paper:      #F1ECE3;
  --ref-white:      #FFFFFF;
  --ref-ink:        #24251F;
  --ref-gray:       #69655C;
  --ref-line:       #DED7CB;
  --ref-line-firm:  #8F8270;
  --ref-green:      #2B4436;
  --ref-green-deep: #1E3027;
  --ref-green-on:   #EEEBE2;
  --ref-green-sub:  #AFBDB2;
  --ref-wood:       #8A6A4E; /* 装飾専用（生成り地で 4.2〜4.65:1） */
  --ref-wood-text:  #7E5F45; /* 文字用（生成り地で 4.9〜5.5:1） */
  --ref-white-a45:  rgba(255, 255, 255, .45);
  --ref-white-a70:  rgba(255, 255, 255, .70);
  --ref-scrim:      rgba(18, 22, 18, .66);
  --ref-scrim-soft: rgba(18, 22, 18, .15);
  --ref-scrim-firm: rgba(18, 22, 18, .78);

  /* 役割層 */
  --surface:            var(--ref-ivory);
  --surface-alt:        var(--ref-paper);
  --surface-card:       var(--ref-white);
  --on-surface:         var(--ref-ink);
  --on-surface-variant: var(--ref-gray);
  --primary:            var(--ref-green);
  --primary-hover:      var(--ref-green-deep);
  --on-primary:         var(--ref-green-on);
  --on-primary-variant: var(--ref-green-sub);
  --tertiary:           var(--ref-wood-text); /* 文字・リンクの差し色 */
  --tertiary-decor:     var(--ref-wood);      /* 線・記号だけ */
  --outline:            var(--ref-line-firm); /* 枠（生成り地 3.54:1 / 別地 3.19:1） */
  --focus:              var(--ref-green);      /* フォーカスの輪郭。地に対し高い差 */
  --outline-variant:    var(--ref-line);      /* 区切り線（装飾） */
  --scrim:              var(--ref-scrim);
  --scrim-soft:         var(--ref-scrim-soft);
  --scrim-firm:         var(--ref-scrim-firm);
  --footer-surface:     var(--ref-green-deep);
  --on-footer:          var(--ref-green-on);
  --on-footer-variant:  var(--ref-green-sub);
  --on-media:           var(--ref-white);      /* 写真・幕の上の文字 */
  --on-media-dim:       var(--ref-white-a45);  /* 同・選択されていない印 */
  --on-media-line:      var(--ref-white-a70);  /* 同・枠線 */
  /* 状態レイヤー（Material）。ホバー8%・フォーカス/押下10%・無効38% */
  --state-hover:        color-mix(in srgb, var(--on-surface) 8%, transparent);
  --state-press:        color-mix(in srgb, var(--on-surface) 10%, transparent);

  /* 寸法 */
  --r: 0px;    /* 角丸は目盛りから1つ。森継は 0 */
  --tap: 44px; /* 押せる場所の最小 */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;
  --gutter: var(--s4);

  /* 文字の段階 */
  --fs-display:  clamp(28px, 4vw, 52px);
  --fs-headline: clamp(26px, 3vw, 36px);
  --fs-title:    24px;
  --fs-title-s:  19px;
  --fs-body:     16px;
  --fs-body-s:   14px;
  --fs-label:    12px;
  --lh-body: 1.8;
  --lh-head: 1.35;

  /* 動き */
  --dur-in: 320ms; --dur-out: 200ms; --ease: cubic-bezier(.2, 0, 0, 1);

  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* 暗色テーマ。参照層は変えず、役割層だけ差し替える（方針3「明・暗の両方の値を持つ」） */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface:            #1A1C18;
    --surface-alt:        #23251F;
    --surface-card:       #2B2E27;
    --on-surface:         #EDEDE4; /* 地に対し 14.58:1 */
    --on-surface-variant: #B4B2A6; /* 同 8.06:1 */
    --primary:            #8FB39B; /* 同 7.43:1 */
    --primary-hover:      #A8C7B3;
    --on-primary:         #16211A;
    --on-primary-variant: #16211A;
    --tertiary:           #C8A886; /* 同 7.69:1 */
    --tertiary-decor:     #C8A886;
    --outline:            #84826F; /* 同 4.42:1、カード地でも 3.55:1 */
    --outline-variant:    #3B3D35;
    --focus:              #A8C7B3;
    --footer-surface:     #14160F;
    --on-footer:          #EDEDE4;
    --on-footer-variant:  #B4B2A6;
  }
}

/* ---------- 2. 土台 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  background: var(--surface); color: var(--on-surface);
  font-family: var(--gothic);
  font-size: var(--fs-body); line-height: var(--lh-body);
  overflow-wrap: break-word;
}
a { color: inherit; text-decoration: none; }
:where(a, button):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
.num, .co dd, .news .d { font-variant-numeric: tabular-nums; }

.frame { width: min(1160px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.narrow { width: min(672px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.mincho { font-family: var(--mincho); }
.planned { display: inline-block; font-size: var(--fs-label); letter-spacing: .08em;
           color: var(--on-surface-variant); border: 1px solid var(--outline);
           padding: 0 var(--s2); line-height: 1.9; vertical-align: middle; }
.ph { position: relative; overflow: hidden; background: var(--surface-alt) center / cover no-repeat; }
.skip { position: absolute; left: -9999px; display: inline-flex; align-items: center;
        min-height: var(--tap); padding: 0 var(--s3); }
.skip:focus { left: var(--s3); top: var(--s2); z-index: 50;
              background: var(--primary); color: var(--on-primary); }

/* ---------- 3. ヘッダー ---------- */
.hd { position: sticky; top: 0; z-index: 30; background: var(--surface);
      border-bottom: 1px solid var(--outline-variant); }
.hd .frame { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
             gap: var(--s2) var(--s5); padding-block: var(--s3); }
.logo { display: flex; align-items: center; gap: var(--s2) var(--s3); min-height: var(--tap); }
/*
 * ロゴは原版（03_ブランド/ロゴ/原版/）の横長版 SVG をそのまま使う。
 * 縦横比を変えない（width 指定だけで height は auto）。色は原版の黒／白抜きのまま。
 * 周りの余白は「森継」の字高の 1/4 以上（横長版はロゴの高さの約25%）。36px なら 9px 以上。
 */
/* 押せるのはロゴだけ（トップへ）。「森不動産グループ」は所属を示す文字で、リンクにしない（2026-10-08） */
.logo-link { display: flex; align-items: center; min-height: var(--tap); }
.logo picture, .logo img { display: block; }
.logo img { width: 140px; height: auto; }
.logo small { display: block; font-size: var(--fs-label); letter-spacing: .08em;
              color: var(--on-surface-variant); line-height: 1.5;
              padding-left: var(--s3); border-left: 1px solid var(--outline-variant); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s4); font-size: var(--fs-body-s); }
.nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s1); }
.nav a:hover { color: var(--tertiary); }
.nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--primary); }
.cta { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap);
       background: var(--primary); color: var(--on-primary); padding: 0 var(--s4);
       font-size: var(--fs-body-s); letter-spacing: .08em; }
.cta:hover { background: var(--primary-hover); }
.cta--ghost { background: none; color: var(--on-surface); border: 1px solid var(--outline); }
.cta--ghost:hover { background: var(--state-hover); color: var(--on-surface); }

/* ---------- 4. パンくず ---------- */
.crumb { padding-block: var(--s3); font-size: var(--fs-label); color: var(--on-surface-variant);
         border-bottom: 1px solid var(--outline-variant); }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s2); }
.crumb li + li::before { content: "／"; margin-right: var(--s2); color: var(--outline); }
.crumb a { display: inline-flex; align-items: center; min-height: var(--tap);
           text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 5. 下層ページの見出し ---------- */
.ph-head { padding-block: var(--s7) var(--s6); border-bottom: 1px solid var(--outline-variant); }
.ph-head h1 { font-family: var(--mincho); font-weight: 600; font-size: var(--fs-headline);
              letter-spacing: .08em; line-height: var(--lh-head); margin-top: var(--s2); text-wrap: balance; }
.ph-head p { margin-top: var(--s4); color: var(--on-surface-variant); max-width: 40em; }

/* ---------- 6. セクション ---------- */
section { padding-block: var(--s8); }
.sh { margin-bottom: var(--s6); }
.sh h2 { font-family: var(--mincho); font-weight: 600; font-size: var(--fs-headline);
         letter-spacing: .08em; line-height: var(--lh-head); margin-top: var(--s2); text-wrap: balance; }
.sh p { margin-top: var(--s3); color: var(--on-surface-variant); max-width: 40em; }
/* 本文（.prose）の中に置いた見出しブロックは、本文の h2 の線・余白を引き継がない */
.prose .sh h2 { font-size: var(--fs-headline); letter-spacing: .08em; margin: var(--s2) 0 0;
                padding-bottom: 0; border-bottom: 0; }
/* 語の途中で改行させたくない塊（見出し・住所）。幅が足りなければ塊ごと次の行へ送る */
.nw { display: inline-block; }
.alt { background: var(--surface-alt); }

/* 本文（原稿をそのまま流し込む場所） */
.prose h2 { font-family: var(--mincho); font-weight: 600; font-size: var(--fs-title);
            letter-spacing: .06em; margin-top: var(--s7); margin-bottom: var(--s3);
            padding-bottom: var(--s2); border-bottom: 1px solid var(--outline-variant); }
.prose h3 { font-size: var(--fs-title-s); font-weight: 700; margin-top: var(--s5); margin-bottom: var(--s2); }
.prose p { margin-top: var(--s3); }
.prose ul { margin-top: var(--s3); }
.prose ul li { position: relative; padding-left: var(--s4); }
.prose ul li::before { content: ""; position: absolute; left: var(--s2); top: .9em;
                       width: 6px; height: 1px; background: var(--tertiary-decor); }
.prose ol { margin-top: var(--s3); counter-reset: n; }
.prose ol li { position: relative; padding-left: var(--s5); counter-increment: n; }
.prose ol li::before { content: counter(n) "."; position: absolute; left: 0;
                       font-family: var(--mincho); color: var(--tertiary); }
.prose a { text-decoration: underline; text-underline-offset: 4px; }
.prose > :first-child { margin-top: 0; }

/* ---------- 7. 定義リスト（会社概要・仕様） ---------- */
.dl { display: grid; grid-template-columns: 200px 1fr; border-top: 1px solid var(--on-surface); }
.dl dt, .dl dd { padding: var(--s4) 0; border-bottom: 1px solid var(--outline-variant); }
.dl dt { color: var(--on-surface-variant); }
.dl dd a { text-decoration: underline; text-underline-offset: 4px; }
.tbd { color: var(--on-surface-variant); }

/* ---------- 8. サービスカード ---------- */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
.svc article { display: flex; flex-direction: column; scroll-margin-top: 100px; }
.svc .ph { aspect-ratio: 4 / 3; }
.svc h3 { font-family: var(--mincho); font-weight: 600; font-size: var(--fs-title);
          letter-spacing: .06em; line-height: 1.4; margin-top: var(--s4); }
.svc .who { display: block; font-size: var(--fs-body-s); color: var(--on-surface-variant); margin-top: var(--s2); }
.svc p.t { margin-top: var(--s3); }
.svc .body { display: flex; flex-direction: column; flex: 1; }
.svc .note a { display: inline-flex; align-items: center; min-height: var(--tap); }
.svc .note { margin-top: auto; padding-top: var(--s4);
             color: var(--on-surface-variant); border-top: 1px solid var(--outline-variant); }
.svc .body > .tags { margin-bottom: var(--s4); }

/* 品目タグ */
.tags { display: flex; flex-wrap: wrap; gap: var(--s2) 6px; margin-top: var(--s4); }
.tags li { font-size: var(--fs-label); border: 1px solid var(--outline-variant);
           padding: 2px var(--s2); background: var(--surface-card); }

/* サービス詳細（下層：写真＋本文の交互配置） */
.detail { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.detail:nth-of-type(even) .ph { order: 2; }
.detail .ph { aspect-ratio: 4 / 3; }
.detail h2 { font-family: var(--mincho); font-weight: 600; font-size: clamp(26px, 3vw, 36px);
             letter-spacing: .08em; line-height: var(--lh-head); margin-top: var(--s2); }
.detail .lead { margin-top: var(--s4); }
.detail + .detail { margin-top: var(--s8); }

/* ---------- 9. 流れ ---------- */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--on-surface); }
.flow li { padding: var(--s4) var(--s4) var(--s2) 0; }
.flow li + li { padding-left: var(--s4); border-left: 1px solid var(--outline-variant); }
.flow .n { font-family: var(--mincho); font-size: var(--fs-label);
           color: var(--tertiary); letter-spacing: .16em; }
.flow h3 { font-size: 18px; font-weight: 700; margin: var(--s2) 0; letter-spacing: .04em; }
.flow p { color: var(--on-surface-variant); }
.flow-note { margin-top: var(--s5); color: var(--on-surface-variant); }

/* ---------- 10. 注記の枠 ---------- */
.notice { border: 1px solid var(--outline); padding: var(--s4); background: var(--surface-card);
          }
.notice b { display: block; font-weight: 700; margin-bottom: var(--s2); }
.notice a { text-decoration: underline; text-underline-offset: 4px; }
.notice p + p { margin-top: var(--s2); }

/* ---------- 11. 問い合わせ ---------- */
.ct .box { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s7); align-items: center;
           border-top: 1px solid var(--on-surface); border-bottom: 1px solid var(--on-surface);
           padding-block: var(--s6); }
.ct h2 { font-family: var(--mincho); font-weight: 600; font-size: var(--fs-headline);
         letter-spacing: .08em; line-height: var(--lh-head); margin-top: var(--s2); }
.ct p { margin-top: var(--s3); color: var(--on-surface-variant); }
.ct .mail { border-left: 1px solid var(--outline-variant); padding-left: var(--s6); }
.ct .mail .l { font-size: var(--fs-label); color: var(--on-surface-variant); letter-spacing: .1em; }
.ct .mail .a { font-family: var(--mincho); font-size: clamp(18px, 2vw, 24px); margin-top: var(--s1); }
.ct .mail .a a { text-decoration: underline; text-underline-offset: 4px; }
.ct .mail .a a:hover { color: var(--tertiary); }
.ct .mail .h { font-size: var(--fs-body-s); color: var(--on-surface-variant); margin-top: var(--s2); }

/* ---------- 11b. 小さな道具 ---------- */
.mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); }
.detail .who { margin-top: var(--s3); font-size: var(--fs-body-s); color: var(--on-surface-variant); }
.detail .prose { margin-top: var(--s4); }

/* ---------- 12. フッター ---------- */
footer { background: var(--footer-surface); color: var(--on-footer-variant);
         padding-block: var(--s6); font-size: var(--fs-body-s); }
footer .frame { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
                gap: var(--s3) var(--s5); }
footer .fl { display: block; width: 120px; height: auto; }
/* グループ共通の理念（文言は 森不動産_ツール/_共通/企業理念.md のまま。森不動産サイトのフッターと同じ扱い） */
footer .rinen { margin-top: var(--s3); font-family: var(--mincho); font-size: 15px;
                letter-spacing: .06em; color: var(--on-footer); }
footer .rinen small { display: block; font-family: var(--gothic); font-size: var(--fs-label);
                      letter-spacing: .12em; color: var(--on-footer-variant); }
footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
footer nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
footer a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 13. 画面幅：Material の段（840 / 600） ---------- */
@media (min-width: 840px) {
  /* ナビと「相談する」を右に寄せる（space-between だとボタンが真ん中に浮く） */
  .hd .nav { margin-left: auto; }
  .hd .cta { order: 2; }
}
/* サービス3つ：1024px 以上は3列。それより狭いと3列では見出しが割れ、
   2列だと3枚目が1枚だけ残るので、写真＋本文の横並びを縦に3つ積む */
@media (max-width: 1023px) {
  .svc { grid-template-columns: 1fr; gap: var(--s7); }
  .svc article { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s5); }
  .svc .ph { grid-row: span 2; }
  .svc h3 { margin-top: 0; }
}
@media (max-width: 839px) {
  .detail, .ct .box { grid-template-columns: 1fr; gap: var(--s5); }
  .detail:nth-of-type(even) .ph { order: 0; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li:nth-child(3) { padding-left: 0; border-left: 0; }
  .dl { grid-template-columns: 150px 1fr; }
  .ct .mail { border-left: 0; padding-left: 0; border-top: 1px solid var(--outline-variant); padding-top: var(--s4); }
}
@media (max-width: 599px) {
  :root { --gutter: var(--s3); --s8: 64px; }
  html { scroll-padding-top: 72px; }
  /* ナビは隠さない。1段目に置き、スクロールしたらナビだけ隠れて
     社名と「相談する」が残る（sticky の位置をナビの高さ分だけ上げる） */
  .hd { top: -45px; }
  .hd .frame { padding-block: var(--s2); }
  .nav { order: -1; width: 100%; gap: 0 var(--s3); font-size: var(--fs-label);
         justify-content: space-between; border-bottom: 1px solid var(--outline-variant); }
  .nav a { min-height: var(--tap); padding-inline: 0; }
  .cta { padding: 0 var(--s3); }
  .logo { flex-direction: column; align-items: flex-start; gap: var(--s2); } /* 余白は字高の1/4以上：30pxなら8px */
  .logo img { width: 116px; }
  .logo small { padding-left: 0; border-left: 0; line-height: 1.3; }
  .sh { margin-bottom: var(--s5); }
  .ph-head { padding-block: var(--s6) var(--s5); }
  .svc article { grid-template-columns: 1fr; }
  .svc h3 { margin-top: var(--s4); }
  .flow { grid-template-columns: 1fr; }
  .flow li, .flow li + li { padding: var(--s4) 0; border-left: 0; border-bottom: 1px solid var(--outline-variant); }
  /* 項目名は折り返さない（「宅地建物取引業」「グループ会社」が2行に割れていた） */
  .dl { grid-template-columns: max-content 1fr; }
  .dl dt, .dl dd { padding: var(--s3) 0; }
  .dl dt { padding-right: var(--s3); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- 14. 印刷 ---------- */
@media print {
  /* 16pt以下の太字を使わない（紙で潰れる） */
  :root { --fs-body: 10.5pt; --fs-body-s: 9.5pt; --fs-label: 9pt; }
  body { background: #fff; color: #000; font-size: var(--fs-body); line-height: 1.6; }
  .hd { position: static; border-bottom: 1px solid #000; }
  .nav, .cta, .skip, .crumb, .img-note, .hero .bg { display: none; }
  .alt, .msg, footer { background: #fff !important; color: #000 !important; }
  footer .fl { filter: invert(1); } /* 白抜きロゴを白地で黒版と同じ見え方に（原版の色は黒か白のみ） */
  footer .rinen, footer .rinen small { color: #000; }
  section { padding-block: 12pt; }
  .flow h3, .notice b, .prose h3 { font-weight: 400; }
  .flow, .dl, .prose h2 { border-color: #000; }
  a { text-decoration: underline; }
  main a[href^="http"]::after { content: "（" attr(href) "）"; font-size: 9pt; }
  article, .notice, .dl > div { break-inside: avoid; }
}