@charset "utf-8";
/* トップページだけで使う部品。共通は style.css */

/* ---------- ヒーロー（高さは中身で決まる。vh で固定しない） ---------- */
.hero { padding-top: var(--s4); }
.hero .stage { position: relative; overflow: hidden; background: var(--surface-alt);
               display: grid; align-items: end; }
/* 写真は1枚で見せる（切り替えはしない。2026-11-02） */
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero .shade { position: absolute; inset: 0;
               background: linear-gradient(90deg, var(--scrim) 0%, var(--scrim) 48%, transparent 92%); }
.hero .copy { position: relative; padding: var(--s8) var(--s6) var(--s6); max-width: 860px;
              color: var(--on-media); }
.hero h1 { font-family: var(--mincho); font-weight: 600; font-size: var(--fs-display);
           line-height: var(--lh-head); letter-spacing: .06em; text-wrap: balance; }
.hero h1 .ln { display: block; }
.hero .lead { margin-top: var(--s4); max-width: 34em; }
.hero .status { margin-top: var(--s3); font-size: var(--fs-body-s); letter-spacing: .08em; }
.img-note { position: absolute; right: var(--s3); top: var(--s3); font-size: var(--fs-label);
            color: var(--on-media); background: var(--scrim); padding: 2px var(--s2); }

/* ---------- 窓口をひとつに ---------- */
.one .grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s7); align-items: center; }
.one h2 { font-family: var(--mincho); font-weight: 600; font-size: clamp(30px, 3.6vw, 46px);
          letter-spacing: .08em; line-height: var(--lh-head); margin-top: var(--s2); }
.one .body { margin-top: var(--s4); color: var(--on-surface-variant); }
.one .body p + p { margin-top: var(--s3); }
.one .link { display: inline-flex; align-items: center; gap: var(--s3); margin-top: var(--s4);
             min-height: var(--tap); font-size: var(--fs-body-s);
             box-shadow: inset 0 -1px 0 var(--on-surface); }
.one .link:hover { color: var(--tertiary); box-shadow: inset 0 -1px 0 var(--tertiary); }
/* 仕事の順番（売る前 → 売る → 売ったあと）を縦の線でつなぐ。担当の会社を右に置く */
.chain { border: 1px solid var(--outline-variant); background: var(--surface-card); }
.chain ol { padding: var(--s4) var(--s5); }
.chain li { position: relative; display: grid; grid-template-columns: 6.5em 1fr auto;
            align-items: center; gap: 0 var(--s4); padding: var(--s3) 0 var(--s3) var(--s5); }
.chain li + li { border-top: 1px solid var(--outline-variant); }
/* 点：森継は白抜き、森不動産は塗り（角丸 0 の決まりに合わせて四角） */
.chain li::before { content: ""; position: absolute; left: 0; top: 50%; z-index: 1;
                    width: 11px; height: 11px; margin-top: -6px;
                    border: 1px solid var(--tertiary-decor); background: var(--surface-card); }
.chain li.parent::before { background: var(--primary); border-color: var(--primary); }
/* 線：この行の点から次の行の点まで */
.chain li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 50%;
                                    height: 100%; width: 1px; background: var(--tertiary-decor); }
.chain .when { font-size: var(--fs-label); letter-spacing: .1em; color: var(--on-surface-variant); }
.chain b { font-family: var(--mincho); font-weight: 600; font-size: 21px;
           letter-spacing: .06em; line-height: 1.4; }
.chain small { font-size: var(--fs-label); letter-spacing: .1em; color: var(--on-surface-variant); }
.chain .parent small, .chain .parent b { color: var(--primary); }
.chain-foot { border-top: 1px solid var(--outline-variant);
              background: var(--primary); color: var(--on-primary); padding: var(--s3) var(--s4);
              display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4);
              font-size: var(--fs-body-s); letter-spacing: .08em; }
.chain-foot b { font-family: var(--mincho); font-weight: 600; font-size: 17px; letter-spacing: .08em; }

/* ---------- お悩み ---------- */
.worry .grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s7); align-items: start; }
.worry .sh { margin-bottom: 0; position: sticky; top: 120px; }
.worry ul { border-top: 1px solid var(--on-surface); }
.worry li a { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s2) var(--s4);
              padding: var(--s4) var(--s1); min-height: var(--tap);
              border-bottom: 1px solid var(--outline-variant); transition: padding-left var(--dur-in) var(--ease); }
.worry li a:hover { padding-left: 14px; }
.worry .q { font-family: var(--mincho); font-weight: 500; font-size: var(--fs-title-s);
            letter-spacing: .04em; line-height: 1.5; }
.worry .to { font-size: var(--fs-label); color: var(--tertiary); letter-spacing: .06em; white-space: nowrap; }

/* ---------- メッセージ ---------- */
.msg { background: var(--surface-alt); }
.msg .grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.msg .ph { aspect-ratio: 4 / 5; }
.msg h2 { font-family: var(--mincho); font-weight: 600; font-size: clamp(32px, 4vw, 52px);
          letter-spacing: .08em; line-height: var(--lh-head); margin-top: var(--s2); }
.msg p { margin-top: var(--s4); max-width: 32em; color: var(--on-surface-variant); }
.msg dl { margin-top: var(--s5); border-top: 2px solid var(--primary); }
.msg dl div { display: grid; grid-template-columns: 7em 1fr; padding: var(--s3) 0;
              border-bottom: 1px solid var(--outline-variant); }
.msg dt { font-family: var(--mincho); font-size: 17px; letter-spacing: .08em; }
.msg dd { color: var(--on-surface-variant); align-self: center; }

/* ---------- お知らせ・会社概要 ---------- */
.news { display: grid; grid-template-columns: 240px 1fr; gap: var(--s6);
        padding-bottom: var(--s8); margin-bottom: var(--s8); border-bottom: 1px solid var(--outline-variant); }
.news .sh, .co .sh { margin: 0; }
.news ul { border-top: 1px solid var(--outline-variant); }
.news li { display: grid; grid-template-columns: 96px 80px 1fr; gap: var(--s3); padding: var(--s3) 0;
           border-bottom: 1px solid var(--outline-variant); align-items: baseline; font-size: var(--fs-body-s); }
.news .d { font-family: var(--mincho); color: var(--on-surface-variant); }
.news .c { font-size: var(--fs-label); border: 1px solid var(--outline); text-align: center; background: var(--surface); }
.co { display: grid; grid-template-columns: 240px 1fr; gap: var(--s6); }
.co .dl { grid-template-columns: 160px 1fr; }
.co-more { margin-top: var(--s4); display: inline-flex; align-items: center; min-height: var(--tap);
           font-size: var(--fs-body-s); box-shadow: inset 0 -1px 0 var(--on-surface); }
.co-more:hover { color: var(--tertiary); box-shadow: inset 0 -1px 0 var(--tertiary); }

@media (max-width: 839px) {
  .one .grid, .worry .grid, .msg .grid { grid-template-columns: 1fr; gap: var(--s6); }
  .worry .sh { position: static; }
  .msg .ph { aspect-ratio: 16 / 10; }
  .news, .co { grid-template-columns: 1fr; gap: var(--s4); }
}
@media (max-width: 599px) {
  .hero { padding-top: var(--s2); }
  .hero .shade { background: linear-gradient(180deg, var(--scrim-soft) 0%, var(--scrim) 28%, var(--scrim-firm) 100%); }
  .hero .copy { padding: 200px var(--s4) var(--s5); }
  /* 「いつ」を上の段に出し、仕事名と会社名を下の段に並べる */
  .chain ol { padding: var(--s2) var(--s4); }
  .chain li { grid-template-columns: 1fr auto; padding-left: var(--s4); }
  .chain .when { grid-column: 1 / -1; }
  .chain b { font-size: var(--fs-title-s); }
  .worry li a { grid-template-columns: 1fr; padding: var(--s3) 2px; }
  .msg .grid { gap: var(--s5); }
  .msg dl div { grid-template-columns: 5.5em 1fr; }
  .news li { grid-template-columns: 76px 1fr; }
  .news li > span:last-child { grid-column: 1 / -1; }
  .news .c { justify-self: start; padding-inline: var(--s2); }
  .co .dl { grid-template-columns: max-content 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .worry li a { transition: none; }
}