/* ==========================================================
   トップページ専用（body.top）。寸法は assets/img/parts/measure.md のとおり
   （参照画像1024幅を1200幅へ×1.172した値）。style.css の後に読む。
   ========================================================== */

.top{color:var(--text)}
.top .container{max-width:1200px;padding:0 61px}

/* ---------- ヘッダー ---------- */
.top .header{border-bottom:1px solid var(--line-2)}
.top .header__inner{height:55px;gap:0}
.top .logo__name{font-size:26px;letter-spacing:.02em;line-height:1}
.top .logo__sub{font-size:10px;letter-spacing:.18em;margin-top:4px;color:var(--ink)}
.top .nav{gap:0}
.top .nav__list{gap:27px;font-size:13px;letter-spacing:.02em}
.top .nav__list a{padding:4px 0}
.top .nav__cta{margin-left:94px;gap:23px}
.top .nav__cta .btn{min-height:36px;height:36px;padding:0 18px;white-space:nowrap;font-size:13px;letter-spacing:.04em;border-radius:4px}
.top .nav__login{font-size:13px}

/* ---------- ファーストビュー ---------- */
.top .hero{background:var(--white);padding:4px 0 3px;overflow:hidden}
.top .hero__grid{display:grid;grid-template-columns:385px 1fr;gap:0;align-items:start;padding-right:0}
.top .hero__copy{padding-top:34px}
.top .hero__title{font-size:46px;line-height:60px;letter-spacing:-.01em;font-weight:900;color:var(--ink);white-space:nowrap}
.top .hero__title .p,.top .band__title .p{letter-spacing:-.45em}
.top .hero__sub{margin-top:10px;font-size:13.5px;line-height:21px;letter-spacing:.02em;font-weight:500;color:var(--ink);white-space:nowrap}
.top .hero__hand{display:block;width:290px;height:auto;margin-top:14px}
.top .hero__img{height:312px;aspect-ratio:auto;margin-right:min(0px,calc((1200px - 100vw) / 2))}
.top .hero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* ---------- 6つの入口 ---------- */
.top .entry{background:var(--white);padding:16px 0 26px}
.top .entry__grid{grid-template-columns:repeat(3,1fr);gap:14px 17px}
.top .entry__item{min-height:58px;height:58px;padding:0;font-size:20px;letter-spacing:.04em;border-radius:4px}
.top .entry__item span{padding-bottom:0;line-height:1}
.top .entry__item--give span::after{bottom:-14px;width:82px;height:3px}
.top .entry__item--take{border-width:3px}

/* ---------- 物件種別 ---------- */
.top .types{background:var(--paper);padding:20px 0 18px}
.top .sec-head{gap:22px;margin-bottom:20px}
.top .sec-head h2{font-size:20px;line-height:1;letter-spacing:.03em}
.top .sec-head::after{background:var(--line)}
.top .type-grid{grid-template-columns:repeat(7,1fr);gap:14px}
.top .type-tile__img{aspect-ratio:auto;height:163px}
.top .type-tile__name{margin-top:12px;font-size:15px;line-height:1;letter-spacing:.02em}

/* ---------- 帯 ---------- */
.top .band{padding:26px 0 23px}
.top .band__grid{grid-template-columns:1fr 558px;gap:0;align-items:start}
.top .band__copy{padding-left:4px}
.top .band__title{font-size:36px;line-height:47px;letter-spacing:0;font-weight:900;white-space:nowrap}
.top .band__sub{margin-top:6px;font-size:23px;line-height:30px;letter-spacing:0}
.top .band__text{margin-top:10px;font-size:13px;line-height:20.5px;letter-spacing:.02em;color:var(--white);white-space:nowrap}
.top .band__btn{margin-top:14px;width:363px;padding:0;min-height:42px;height:42px;font-size:18px;letter-spacing:.04em;border-radius:3px}
.top .compare{display:block;padding:6px 12px;height:255px;overflow:hidden;background:var(--white);border-radius:3px}
.top .compare img{width:100%;height:100%;object-fit:contain;object-position:50% 50%}

/* ---------- 数字 ---------- */
.top .stats{padding:24px 0 0}
.top .stats__grid{grid-template-columns:1fr 1fr}
.top .stat{padding:0 0 10px}
.top .stat+.stat{border-left:1px solid var(--line)}
.top .stat__label{display:inline-flex;align-items:center;gap:21px;font-size:20px;line-height:1;letter-spacing:.03em;margin-left:0;transform:translateX(0)}
.top .stat__label::before{display:none}
.top .stat__label::after{width:112px;height:1px;background:var(--line)}
.top .stat__num{margin-top:10px;font-size:58px;line-height:66px;letter-spacing:.02em;font-weight:900;color:var(--gold)}
.top .stat__num small{font-size:39px;margin-left:16px;font-weight:700;color:var(--ink);vertical-align:baseline}
.top .stat__text{margin-top:10px;font-size:13px;line-height:1.4;letter-spacing:.02em;color:var(--text)}

/* ---------- 声 ---------- */
.top .voices{padding:10px 0 19px}
.top .voices .sec-head h2{font-size:21px}
.top .voices .sec-head{margin-bottom:16px}
.top .voice-grid{grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.top .voice{grid-template-columns:130px 1fr;min-height:155px;height:auto;overflow:visible;border:1px solid var(--line);border-radius:3px}
.top .voice__img{overflow:hidden;position:relative}
.top .voice__img img{position:absolute;inset:auto;width:200%;max-width:none;height:200%;object-fit:cover}
.top .voice:nth-child(1) .voice__img img{left:-14px;top:-46px}
.top .voice:nth-child(2) .voice__img img{width:180%;height:180%;left:-64px;top:-34px}
.top .voice:nth-child(3) .voice__img img{left:-66px;top:-62px}
.top .voice__img{min-height:0;height:auto;align-self:stretch}

.top .voice__body{padding:13px 4px 12px 13px}
.top .label{font-size:12px;line-height:20px;padding:0 10px;letter-spacing:.05em;border-radius:2px}
.top .voice__quote{margin-top:8px;font-size:13px;line-height:1.6;letter-spacing:0;color:var(--ink)}
.top .voice__who{margin-top:14px;font-size:13px;line-height:1;letter-spacing:.02em}

/* ---------- セミナー帯 ---------- */
.top .seminar{padding:0;height:70px;border-bottom:1px solid rgba(255,255,255,.35)}
.top .seminar__inner{height:70px;gap:0;display:flex;align-items:center}
.top .seminar__tag{display:inline-flex;align-items:center;justify-content:center;width:114px;height:35px;border:1.5px solid var(--gold);color:var(--gold);font-size:14px;font-weight:700;letter-spacing:.15em;border-radius:2px}
.top .seminar__kind{margin-left:21px;font-size:15px;letter-spacing:.04em}
.top .seminar__sep{height:35px;background:rgba(255,255,255,.45);margin-left:25px}
.top .seminar__title{margin-left:33px;font-size:26px;letter-spacing:.06em;line-height:1}
.top .seminar__title+.seminar__sep{margin-left:33px}
.top .seminar__date{margin-left:20px;font-size:17px;letter-spacing:.04em}
.top .seminar__btn{margin-left:auto;width:156px;min-width:0;min-height:35px;height:35px;font-size:14px;letter-spacing:.06em;border-radius:3px;padding:0}

/* ---------- フッター ---------- */
.top .footer{padding-top:20px}
.top .footer__grid{grid-template-columns:259px 170px 162px 153px 161px 1fr;gap:0;padding-bottom:0;height:148px}
.top .footer .logo__name{font-size:23px}
.top .footer .logo__sub{font-size:10px;color:rgba(255,255,255,.85)}
.top .footer__tagline{margin-top:20px;font-size:14px;line-height:21px;letter-spacing:.03em;color:var(--white)}
.top .footer__col h4{font-size:12px;line-height:1;letter-spacing:.03em;margin:4px 0 12px}
.top .footer__col ul{font-size:12px;line-height:20px;letter-spacing:.03em;color:var(--white)}
.top .footer__cta{padding-top:16px;justify-self:end;align-items:center;gap:17px}
.top .footer__cta .btn{width:175px;min-width:0;min-height:41px;height:41px;padding:0;font-size:14px;letter-spacing:.04em;border-radius:3px;white-space:nowrap}
.top .footer__login{font-size:13px}
.top .footer__bottom{border-top:1px solid rgba(255,255,255,.35);padding:12px 0 26px;font-size:11px;line-height:1;color:var(--white)}
.top .footer__legal{gap:16px}
.top .footer__legal li+li{border-left:1px solid rgba(255,255,255,.6);padding-left:16px}

/* ---------- レスポンシブ（トップ専用） ---------- */
@media (max-width:1100px){
  .top .container{padding:0 24px}
  .top .nav__cta{margin-left:32px}
  .top .hero__grid{grid-template-columns:1fr 1.4fr}
  .top .hero__title{font-size:40px;line-height:50px;white-space:normal}
  .top .hero__sub{white-space:normal}
  .top .band__grid{grid-template-columns:1fr 1fr;gap:24px}
  .top .band__title{font-size:30px;line-height:40px;white-space:normal}
  .top .band__text{white-space:normal}
  .top .compare{height:auto;aspect-ratio:16/9}
  .top .compare img{object-fit:contain}
  .top .type-grid{grid-template-columns:repeat(4,1fr)}
  .top .type-tile__img{height:auto;aspect-ratio:1/1}
  .top .footer__grid{grid-template-columns:1fr 1fr 1fr;gap:24px;height:auto;padding-bottom:24px}
  .top .footer__cta{grid-column:1/-1;justify-self:start;flex-direction:row;padding-top:0}
  .top .seminar,.top .seminar__inner{height:auto}
  .top .seminar__inner{flex-wrap:wrap;gap:12px 16px;padding-top:16px;padding-bottom:16px}
  .top .seminar__kind,.top .seminar__sep,.top .seminar__title,.top .seminar__date{margin-left:0}
  .top .seminar__sep{display:none}
  .top .seminar__title{width:100%}
}
@media (max-width:860px){
  .top .header__inner{height:var(--header-h)}
  .top .nav{gap:var(--sp-3)}
  .top .nav__cta{margin:var(--sp-3) 0 0;gap:var(--sp-3)}
  .top .nav__cta .btn{height:auto;min-height:44px}
  .top .hero{padding:0}
  .top .hero__grid{grid-template-columns:1fr}
  .top .hero__img{order:-1;height:auto;aspect-ratio:3/2;margin:0 -24px}
  .top .hero__copy{padding:24px 0 8px}
  .top .hero__title{font-size:32px;line-height:1.3}
  .top .hero__hand{width:100%;max-width:360px}
  .top .band__grid{grid-template-columns:1fr}
  .top .band__btn{width:100%}
  .top .stats__grid{grid-template-columns:1fr;gap:24px}
  .top .stat+.stat{border-left:0;border-top:1px solid var(--line);padding-top:24px}
  .top .voice-grid{grid-template-columns:1fr}
  .top .voice{min-height:155px}
  .top .seminar__btn{margin-left:0;width:100%}
}
@media (max-width:600px){
  .top .container{padding:0 16px}
  .top .hero__img{margin:0 -16px}
  .top .hero__title{font-size:28px}
  .top .entry__grid{grid-template-columns:1fr;gap:12px}
  .top .entry__item{height:56px;min-height:56px;font-size:17px}
  .top .type-grid{grid-template-columns:repeat(2,1fr)}
  .top .band__title{font-size:26px;line-height:36px}
  .top .band__sub{font-size:19px}
  .top .band__text br{display:none}
  .top .stat__num{font-size:56px}
  .top .stat__num small{font-size:28px}
  .top .voice{grid-template-columns:110px 1fr;min-height:160px}
  .top .voice__img{aspect-ratio:auto}
  .top .voice__body{padding:12px 12px 12px 14px}
  .top .voice__quote{font-size:13px;line-height:19px}
  .top .footer__grid{grid-template-columns:1fr 1fr}
  .top .footer__brand{grid-column:1/-1}
  .top .footer__cta{flex-direction:column;align-items:stretch;justify-self:stretch}
  .top .footer__cta .btn{width:100%}
  .top .footer__bottom .container{flex-direction:column;align-items:flex-start}
}