/* about.css｜ハウジングボックスを知る（ページ専用）※下層共通パーツは css/sub.css */

/* ===== INTRO ===== */
.ab-intro{padding-top:clamp(56px,6vw,90px);background:#fff;}
.ab-intro .grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,6vw,90px);align-items:center;}
.ab-intro .sh{margin-bottom:36px;}
.ab-intro .photo{aspect-ratio:4/5;border-radius:36px;overflow:hidden;}
.ab-intro .photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* ===== 01 AT A GLANCE ===== */
.ab-glance{background:#f2f2f2;}
.ab-cat{display:flex;align-items:center;gap:14px;margin:56px 0 0;font-size:20px;font-weight:700;letter-spacing:.08em;color:#1a2433;}
.ab-cat:first-of-type{margin-top:0;}
.ab-cat::after{content:"";flex:1;height:1px;background:#cfd8e3;}
.ab-glance .stat{grid-column:span 2;min-width:0;}
.ab-glance .stat .num{padding-right:clamp(80px,9vw,130px);}
.ab-glance .stat .num .v{font-size:clamp(40px,4.4vw,72px);}
.ab-glance .stat .num .u{font-size:clamp(18px,1.8vw,28px);}

/* ===== 02 OUR BUSINESS ===== */
.ab-business{background:linear-gradient(90deg,#fff 55%,#dcebff 100%);}
.biz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px;}
.biz-card .photo{aspect-ratio:4/3;border-radius:36px;overflow:hidden;}
.biz-card .photo img{width:100%;height:100%;object-fit:cover;display:block;}
.biz-card h3{display:flex;align-items:center;gap:12px;margin:26px 0 12px;font-size:22px;font-weight:700;letter-spacing:.06em;color:#1a2433;}
.biz-card h3::before{content:"";width:8px;height:6px;border-radius:3px;background:#1BB9F3;}
.biz-card p{margin:0;font-size:15px;line-height:2;color:#1a2433;}
.ab-business .btn-link{margin-top:56px;}

/* ===== 03 ROOTED IN SAKURA ===== */
.ab-sakura{background:linear-gradient(180deg,#5CC8F5 0%,#1BB9F3 34%,#0E8FE6 68%,#1461D2 100%);color:#fff;}
.ab-sakura .sh-en,.ab-sakura .sh-ja{background:none;color:#fff;}
.ab-sakura .sh::before{background:linear-gradient(90deg,#fff 0 50%,#9fe9ff 50% 100%) left top/96px 100% no-repeat;}
.sakura-catch{margin:0 0 48px;font-size:clamp(34px,4.6vw,68px);font-weight:700;line-height:1.45;letter-spacing:.06em;}
.sakura-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,6vw,90px);align-items:start;}
.sakura-grid .ab-text p{color:#fff;}
.sakura-grid .ab-text .promise{margin-top:28px;font-size:18px;font-weight:700;line-height:1.9;}
.sakura-photos{position:relative;}
.sakura-photos .p1{aspect-ratio:16/11;border-radius:36px;overflow:hidden;}
.sakura-photos .p2{position:relative;width:56%;aspect-ratio:1/1;margin:-22% 0 0 auto;border-radius:36px;overflow:hidden;border:6px solid #fff;}
.sakura-photos .ph{height:100%;border:none;}

/* ===== 04 OUR HISTORY ===== */
.ab-history{background:#fff;}
.tl{position:relative;margin-top:64px;}
.tl::before{content:"";position:absolute;left:calc(22% + 11px);top:10px;bottom:10px;width:2px;background:linear-gradient(180deg,#5CC8F5,#1461D2);}
.tl-item{position:relative;display:grid;grid-template-columns:22% minmax(0,1fr);gap:clamp(40px,5vw,72px);padding:0 0 64px;}
.tl-item::before{content:"";position:absolute;left:calc(22% + 4px);top:14px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid #1BB9F3;}
.tl-year{text-align:right;}
.tl-year .y{display:block;font-family:"Poppins",sans-serif;font-weight:600;font-size:clamp(40px,4.4vw,64px);line-height:1;letter-spacing:-.01em;color:#1461D2;}
.tl-year .tag{display:inline-block;margin-top:12px;font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;color:#1BB9F3;}
.tl-body{padding-left:24px;}
.tl-body h3{margin:4px 0 14px;font-size:clamp(20px,1.9vw,26px);font-weight:700;line-height:1.5;letter-spacing:.06em;color:#1a2433;}
.tl-body p{margin:0 0 10px;font-size:15px;line-height:2;color:#1a2433;}
.tl-item.turn .tl-body{padding:36px 40px;border-radius:28px;background:linear-gradient(135deg,#1BB9F3,#1461D2);}
.tl-item.turn .tl-body h3,.tl-item.turn .tl-body p{color:#fff;}
.tl-item.turn::before{background:#FFE14D;border-color:#FFE14D;}
.tl-future{position:relative;margin-top:16px;padding:clamp(48px,6vw,80px) clamp(28px,5vw,72px);border-radius:36px;background:#f2f7fc;text-align:center;}
.tl-future .tag{display:block;font-family:"Poppins",sans-serif;font-size:13px;font-weight:600;letter-spacing:.2em;color:#1BB9F3;}
.tl-future h3{margin:14px 0 8px;font-size:clamp(26px,2.8vw,40px);font-weight:700;letter-spacing:.06em;color:#1461D2;}
.tl-future .sub{margin:0 0 28px;font-size:18px;font-weight:700;color:#1a2433;}
.tl-future p{margin:0 0 6px;font-size:16px;line-height:2.1;color:#1a2433;}

/* ===== 05 COMPANY PROFILE ===== */
.ab-profile{background:#f2f2f2;}
.ab-profile .btn-link{margin-top:48px;background:#fff;}

/* ===== responsive ===== */
@media (max-width:920px){
  .ab-intro .grid,.sakura-grid{grid-template-columns:1fr;}
  .ab-intro .photo{aspect-ratio:16/11;}
  .biz-grid{grid-template-columns:1fr;gap:48px;}
  .ab-glance .stat{grid-column:span 2;}
  .tl::before{left:7px;}
  .tl-item{grid-template-columns:1fr;gap:12px;padding-left:40px;}
  .tl-item::before{left:0;}
  .tl-year{text-align:left;}
  .tl-body{padding-left:0;}
  .tl-item.turn .tl-body{padding:28px 24px;}
}
@media (max-width:560px){
  .tl-future p br{display:none;}
}

.pf-photo{margin:0 0 clamp(40px,5vw,64px);aspect-ratio:3/2;border-radius:36px;overflow:hidden;}
.pf-photo img{width:100%;height:100%;object-fit:cover;display:block;}
@media (max-width:920px){.pf-photo{border-radius:24px;}}
.ab-sakura .sh::before{background:linear-gradient(90deg,#1461D2 0 50%,#FFE14D 50% 100%) left top/96px 100% no-repeat;}

/* 数字＋単位は1行で（「3年10か月」など長い単位も折り返さない） */
.ab-glance .stat .num{white-space:nowrap;}
.ab-glance .stat .num .u{white-space:nowrap;}

/* 沿革：円と縦線の中心をそろえる（同じ基準位置から中央寄せ） */
.tl{--tl-x:calc(22% + 12px);}
.tl::before{left:var(--tl-x);transform:translateX(-50%);}
.tl-item::before{left:var(--tl-x);transform:translateX(-50%);box-sizing:border-box;width:20px;height:20px;}
@media (max-width:920px){
  .tl{--tl-x:10px;}
}

/* なぜ佐倉：キャッチは1行ずつ折り返さない（画面幅に合わせて文字サイズを調整） */
.sakura-catch{font-size:clamp(20px,calc((100vw - 56px) / 16.5),64px);}
.sakura-catch span{white-space:nowrap;}

/* なぜ佐倉：右下の写真（お客様宅訪問）を少し右へ */
.sakura-photos .p2{transform:translateX(clamp(16px,3vw,48px));}
@media (max-width:920px){.sakura-photos .p2{transform:translateX(12px);}}

/* 事業紹介：見出しを1行に（「リフォーム・リノベーション」が途中で折り返さない） */
.biz-card h3{white-space:nowrap;font-size:clamp(16px,1.55vw,22px);}
.biz-card h3::before{flex-shrink:0;}
@media (max-width:920px){.biz-card h3{font-size:20px;}}

/* 沿革の締め（これからのハウジングボックス）：本文を大きく */
.tl-future p{font-size:clamp(17px,1.45vw,21px);line-height:2;}
.tl-future .sub{font-size:clamp(19px,1.6vw,23px);}