@charset "UTF-8";
/* =============================================================
   top.css — TOPページ固有のセクションスタイル
   （共通部品は common.css。ここは各ブロックの組版のみ）
   ============================================================= */

/* ---- HERO -------------------------------------------------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,.34) 0%,rgba(20,18,16,.24) 38%,rgba(20,18,16,.24) 62%,rgba(20,18,16,.40) 100%)}
.hero__inner{position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding-inline:var(--gut);max-width:var(--maxw);margin-inline:auto}
.hero__title{color:#fff;font-family:var(--en);font-weight:500;
  font-size:clamp(19px,2.7vw,34px);line-height:1.5;letter-spacing:.05em;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
/* ヒーロー内ボタン（リフォーム／リノベ）：写真の上のアウトライン枠 */
.hero__btns{display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(14px,1.6vw,28px);margin-top:clamp(34px,4.6vw,58px)}
.hbtn{display:flex;align-items:center;justify-content:space-between;gap:30px;
  min-width:clamp(232px,24vw,338px);padding:19px 34px;
  border:1px solid rgba(255,255,255,.82);color:#fff;
  font-size:15px;letter-spacing:.08em;font-weight:500;
  transition:background .35s ease, color .35s ease, border-color .35s ease}
.hbtn:hover{background:#fff;color:var(--accent);border-color:#fff}
.hbtn-arw{width:36px;height:11px;flex-shrink:0}
/* 右側中央：公式SNS縦並び */
.hero__social{position:absolute;z-index:3;right:clamp(12px,1.6vw,30px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:14px}
.hsoc{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  display:grid;place-items:center;color:#fff;transition:all .3s ease;background:rgba(20,18,16,.12)}
.hsoc svg{width:19px;height:19px;display:block}
.hsoc:hover{background:#fff;color:var(--accent);border-color:#fff}
.hero__scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:2;
  font-family:var(--en);font-size:11px;letter-spacing:.3em;color:#fff;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;opacity:.9}
.hero__scroll::after{content:"";width:1px;height:54px;background:#fff;
  animation:scrollline 2.4s ease-in-out infinite;transform-origin:top}
@keyframes scrollline{0%{transform:scaleY(0)}40%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---- ブランドコンセプト ----------------------------------- */
.concept{background:var(--bg)}
/* 写真の上に白ボックスが垂直中央で重なるレイアウト（影なし・hover拡大なし） */
.concept__overlap{position:relative}
.concept__photo{width:76%;margin-left:auto;aspect-ratio:3/2;overflow:hidden}
.concept__photo img{width:100%;height:100%;object-fit:cover}
.concept__box{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:clamp(330px,46%,560px);background:var(--white);border:1px solid var(--line);
  padding:clamp(36px,3.8vw,64px)}
.concept__title{font-family:var(--serif);font-weight:500;
  font-size:30px;line-height:50px;letter-spacing:.09em;margin:18px 0 26px}
.concept__lead{color:var(--sub);line-height:2.2;font-size:15px;margin-bottom:32px}

/* ---- 2入口分岐 -------------------------------------------- */
.entry{background:var(--white)}
/* フルブリード：画面幅いっぱいの2大カード（ハイラインで仕切る） */
.entry__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  width:100vw;margin-inline:calc(50% - 50vw)}
.entry__card{display:block;position:relative;background:var(--white);overflow:hidden;
  border:none;transition:transform .6s ease}
.entry__media{position:relative;aspect-ratio:3/2;overflow:hidden}
.entry__media img{width:100%;height:100%;object-fit:cover}
.entry__body{padding:clamp(30px,4vw,72px)}
.entry__cat{font-family:var(--en);font-size:13px;letter-spacing:.18em;color:var(--accent);
  text-transform:uppercase;font-weight:600}
.entry__cat small{font-family:var(--serif);color:var(--sub);text-transform:none;letter-spacing:.06em;font-size:12px;margin-left:8px}
.entry__title{font-family:var(--serif);font-size:clamp(21px,2.6vw,32px);font-weight:500;line-height:1.55;margin:16px 0 14px;letter-spacing:.04em}
.entry__desc{font-size:13.5px;color:var(--sub);line-height:1.95}
.entry__tags{margin:16px 0 22px}
.entry__more{font-family:var(--en);font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:.6em}
.entry__card:hover .entry__more{color:var(--accent)}
.entry__undecided{margin-top:clamp(28px,4vw,48px);text-align:center;
  border:1px solid var(--line);padding:clamp(28px,4vw,48px);background:var(--bg)}
.entry__undecided h3{font-size:clamp(17px,2vw,22px);font-weight:500;margin-bottom:22px;letter-spacing:.08em}

/* ---- 事例グリッド（共通カード） --------------------------- */
.works{background:var(--bg)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px)}
.workcard{display:block}
.workcard__media{position:relative;aspect-ratio:4/3;overflow:hidden;margin-bottom:18px}
.workcard__media img{width:100%;height:100%;object-fit:cover}
.workcard__title{font-size:17px;font-weight:500;line-height:1.6;letter-spacing:.06em}
.workcard:hover .workcard__title{color:var(--accent)}
.workcard__cat{font-size:12.5px;color:var(--sub);margin-top:7px;letter-spacing:.06em}
.workcard__tags{margin-top:12px}
.center-more{text-align:center;margin-top:clamp(40px,5vw,60px)}

/* ---- 4つの約束 -------------------------------------------- */
.promise{background:var(--white)}
.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(28px,6vw,90px);
  margin-bottom:clamp(48px,6vw,76px);padding-bottom:clamp(40px,5vw,56px);border-bottom:1px solid var(--line)}
.stat{text-align:center}
.stat b{font-family:var(--num);font-size:clamp(38px,5vw,60px);font-weight:300;line-height:1;color:var(--ink);
  display:inline-flex;align-items:baseline;letter-spacing:.01em}
.stat b small{font-family:var(--serif);font-size:.32em;font-weight:500;margin-left:4px;color:var(--accent)}
.stat span{display:block;font-size:12.5px;color:var(--sub);margin-top:16px;letter-spacing:.08em}
.promise__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px)}
.promise__item{display:flex;gap:clamp(18px,2.5vw,32px);align-items:flex-start;
  padding-bottom:clamp(24px,3vw,40px);border-bottom:1px solid var(--line)}
.promise__no{font-family:var(--en);font-size:clamp(30px,4vw,48px);font-weight:500;color:var(--accent);line-height:1;flex-shrink:0}
.promise__item h4{font-size:clamp(16px,1.9vw,19px);font-weight:500;line-height:1.7;margin-bottom:12px;letter-spacing:.06em}
.promise__item p{font-size:13.5px;color:var(--sub);line-height:1.95}

/* ---- お客様の声 ------------------------------------------- */
.voice{background:var(--bg)}
.voice__score{text-align:center;margin-bottom:clamp(40px,5vw,60px)}
.voice__score .num{font-family:var(--num);font-size:clamp(40px,5vw,58px);font-weight:300;color:var(--ink);letter-spacing:.02em}
.voice__score .star{color:var(--accent);font-size:.6em;margin-right:.15em;letter-spacing:.1em}
.voice__score .of{color:var(--sub);font-size:16px;margin-left:8px}
.voice__score .note{display:block;font-size:11.5px;color:var(--sub);margin-top:12px;letter-spacing:.04em}
.quote{background:var(--white);border:1px solid var(--line);padding:clamp(26px,3vw,38px)}
.quote__head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.quote__av{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--line);flex-shrink:0}
.quote__g{font-size:12px;letter-spacing:.06em;color:var(--sub)}
.quote__g .s{color:var(--accent)}
.quote__lines i{display:block;height:9px;background:var(--line);border-radius:3px;margin-bottom:11px}
.quote__lines i:last-child{width:62%;margin-bottom:0}
.quote__who{margin-top:20px;font-size:12.5px;color:var(--sub);letter-spacing:.06em}

/* ---- イベント --------------------------------------------- */
.event{background:var(--white)}
.eventcard{background:var(--bg);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.eventcard__media{position:relative;aspect-ratio:16/9;overflow:hidden}
.eventcard__media img{width:100%;height:100%;object-fit:cover}
.eventcard__body{padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.eventcard__date{align-self:flex-start;font-family:var(--en);font-size:12px;letter-spacing:.1em;
  color:var(--white);background:var(--accent);padding:4px 12px;border-radius:2px}
.eventcard__title{font-size:18px;font-weight:500;letter-spacing:.06em}
.eventcard__meta{font-size:12.5px;color:var(--sub);display:flex;gap:16px}
.eventcard .btn{margin-top:auto}

/* ---- 下層導線（4カード） ---------------------------------- */
.nav4{background:var(--bg)}
.nav4__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.navcard{display:block;text-align:center}
.navcard__media{position:relative;aspect-ratio:3/4;overflow:hidden;margin-bottom:18px}
.navcard__media img{width:100%;height:100%;object-fit:cover}
.navcard__media::after{content:"";position:absolute;inset:0;background:rgba(20,18,16,.12);transition:background .4s ease}
.navcard:hover .navcard__media::after{background:rgba(20,18,16,.02)}
.navcard__en{font-family:var(--en);font-size:12px;letter-spacing:.16em;color:var(--accent);text-transform:uppercase;font-weight:600}
.navcard h4{font-size:16px;font-weight:500;margin:8px 0 5px;letter-spacing:.06em}
.navcard p{font-size:12px;color:var(--sub)}

/* ---- CTAバンド -------------------------------------------- */
.cta{position:relative;overflow:hidden;color:#fff;text-align:center}
.cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta::after{content:"";position:absolute;inset:0;background:rgba(28,24,20,.56)}
.cta__inner{position:relative;z-index:2;padding-block:clamp(80px,11vw,150px);padding-inline:var(--gut);
  max-width:760px;margin-inline:auto}
.cta__en{font-family:var(--en);font-size:15px;letter-spacing:.3em;text-transform:uppercase;opacity:.9;margin-bottom:24px;display:block}
.cta h3{font-family:var(--serif);font-size:clamp(26px,4vw,52px);font-weight:500;line-height:1.5;letter-spacing:.09em}
.cta p{margin:26px 0 38px;font-size:14px;line-height:2.05;opacity:.92;font-weight:300}
.cta .btn{color:#fff;border-color:rgba(255,255,255,.6)}
.cta .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
.cta .btn.primary{background:var(--accent);border-color:var(--accent)}
.cta .btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}

/* ---- レスポンシブ ----------------------------------------- */
@media (max-width:880px){
  .concept__overlap{flex-direction:column;align-items:stretch;min-height:0}
  .concept__photo{width:100%;aspect-ratio:16/10}
  .concept__box{position:relative;top:auto;left:auto;transform:none;
    width:88%;max-width:none;margin:-56px auto 0;z-index:2}
  .nav4__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .entry__grid{grid-template-columns:1fr}
  .cards3{grid-template-columns:1fr 1fr}
  .promise__grid{grid-template-columns:1fr}
  .promise__item{padding-bottom:24px}
  .hero__social{display:none}
}
@media (max-width:560px){
  .cards3{grid-template-columns:1fr}
  .nav4__grid{grid-template-columns:1fr 1fr;gap:14px}
  .hero{height:88svh}
  .stats{gap:20px 40px}
  .event .cards3{grid-template-columns:1fr}
  .hero__btns{flex-direction:column;width:100%;max-width:340px}
  .hbtn{width:100%;min-width:0}
}