/* ===== SPHERE スフィアシリーズ ページ ===== */
.sphere-page{background:#fff}

/* Hero */
.sphere-hero{position:relative;height:76vh;min-height:520px;overflow:hidden}
.sphere-hero .sh-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03)}
.sphere-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,18,30,.35) 0%,rgba(10,18,30,.05) 40%,rgba(10,18,30,.55) 100%)}
.sh-logo{position:absolute;top:14%;left:6%;width:170px;height:auto;z-index:2;opacity:.95}
.sh-caption{position:absolute;right:6%;bottom:12%;z-index:2;color:#fff;text-align:right}
.sh-award{font-size:.72rem;letter-spacing:.12em;opacity:.85;margin-bottom:6px}
.sh-caption h2{font-family:"Shippori Mincho",serif;font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:.1em;font-weight:600}
.sh-sub{font-size:.9rem;letter-spacing:.06em;margin-top:8px;opacity:.9}

/* What's SPHERE */
.whats{position:relative;padding:120px 0;overflow:hidden;color:#fff}
.whats-bg{position:absolute;inset:0;background-size:cover;background-position:center}
.whats::after{content:"";position:absolute;inset:0;background:rgba(14,22,36,.7)}
.whats-inner{position:relative;z-index:2}
.whats-title{font-family:"Shippori Mincho",serif;font-weight:600;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:.06em;margin-bottom:26px}
.whats-title span{letter-spacing:.12em}
.whats-inner p{font-size:.95rem;line-height:2.1;opacity:.92}

/* Brand intro + PROJECT */
.brand{background:linear-gradient(180deg,#1a2436 0%,#20304a 40%,#4a6076 100%);color:#fff;padding:110px 0 130px}
.brand-inner{max-width:1080px;margin:0 auto;padding:0 28px;text-align:center}
.brand-logo{width:210px;height:auto;margin:0 auto 40px}
.brand-lead{font-family:"Shippori Mincho",serif;font-size:clamp(1.1rem,2.4vw,1.4rem);line-height:2;margin-bottom:34px}
.brand-body{font-size:.95rem;line-height:2.2;opacity:.9;margin-bottom:90px}
.project-title{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:2rem;letter-spacing:.14em;margin-bottom:50px}

.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 30px;text-align:left}
.pj a{display:block;color:#fff}
.pj-img{display:block;aspect-ratio:3/2;background-size:cover;background-position:center;background-color:#dfe3e8;transition:opacity .3s}
.pj a:hover .pj-img{opacity:.85}
.pj b{display:block;font-weight:500;font-size:.92rem;letter-spacing:.04em;text-align:center;margin-top:14px}
.pj-empty .pj-img{position:relative;background-color:#dcdfe4}
.pj-empty .pj-img::after{content:"";position:absolute;inset:0;background:url('../img/sphere-logo.png') center/74px no-repeat;opacity:.25;filter:grayscale(1) brightness(.6)}

/* PICK UP */
.pickup{background:#fff;padding:90px 0 0}
.pickup-title{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:2rem;letter-spacing:.14em;text-align:center;color:var(--navy);margin-bottom:50px}
/* PICK UP: 原本(2_スフィアシリーズ.png)の写真構成・比率を実測して再現
   Block1: 全幅ヒーロー(1048x551) → [481][294(2段)][249] 高さ399
   Block2: [ヒーロー752][285(2段)] 高さ650 → [520][518] 高さ346  ギャップ約11px */
.feat{margin-bottom:10px}
.feat-hero{position:relative;aspect-ratio:1048/551;background-size:cover;background-position:center}
.feat-hero.side{aspect-ratio:auto;height:100%}
.feat-label{position:absolute;left:0;top:30px;display:flex;align-items:center;gap:16px;color:#fff;padding:0 3.5%;z-index:2}
.feat-label img{width:56px;height:auto}
.feat-label b{display:block;font-family:"Shippori Mincho",serif;font-size:1.15rem;letter-spacing:.06em;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.feat-label small{font-size:.8rem;opacity:.9;letter-spacing:.04em;text-shadow:0 1px 6px rgba(0,0,0,.35)}

.fg-row{display:grid;gap:10px;margin-top:10px}
.fg-row1{grid-template-columns:481fr 294fr 249fr;aspect-ratio:1048/399}
.fg-row2{grid-template-columns:752fr 285fr;aspect-ratio:1048/650;margin-top:0}
.fg-row3{grid-template-columns:1fr 1fr;aspect-ratio:1048/346}
/* グリッド項目は min-width/height:auto だと fr が縮まず溢れるため 0 に */
.fg-row>*{min-width:0;min-height:0}
.fg-col{display:grid;grid-template-rows:1fr 1fr;gap:10px;min-height:0;min-width:0}
.fg-row2 .fg-col{grid-template-rows:342fr 300fr}
.fg-cell{position:relative;background-size:cover;background-position:center;min-height:0;min-width:0;display:block}
.viewmore{position:absolute;right:14px;bottom:14px;color:#fff;font-size:.78rem;letter-spacing:.14em;display:inline-flex;align-items:center;gap:5px;text-shadow:0 1px 5px rgba(0,0,0,.55)}
.viewmore i{width:4px;height:4px;border-radius:50%;background:currentColor;display:inline-block}

.pickup .feat:last-child{margin-bottom:0}
.site-footer{margin-top:60px}

/* Responsive */
@media(max-width:860px){
  .project-grid{gap:26px 18px}
}
@media(max-width:700px){
  .sphere-hero{height:64vh;min-height:420px}
  .sh-logo{width:120px;top:16%;left:24px}
  .sh-caption{right:20px;left:20px;text-align:right}
  .sh-caption h2{font-size:1.4rem}
  .sh-award,.sh-sub{font-size:.72rem}
  .whats{padding:80px 0}
  .whats-inner p br{display:none}
  .brand-lead br,.brand-body br{display:none}
  .brand{padding:80px 0 90px}
  .brand-body{margin-bottom:60px}
  .project-grid{grid-template-columns:1fr 1fr;gap:22px 14px}
  .feat-label b{font-size:1rem}
  .feat-label img{width:44px}
  /* 狭幅では PICK UP を積み上げ(比率は維持) */
  .fg-row{gap:6px;margin-top:6px}
  .fg-row1{grid-template-columns:1fr 1fr;aspect-ratio:auto}
  .fg-row1 .fg-cell:first-child{aspect-ratio:481/399}
  .fg-row1 .fg-col{aspect-ratio:294/399}
  .fg-row1 > .fg-cell:last-child{grid-column:1/3;aspect-ratio:16/9}
  .fg-row2{grid-template-columns:1fr;aspect-ratio:auto}
  .fg-row2 .feat-hero.side{aspect-ratio:752/650;height:auto}
  .fg-row2 .fg-col{grid-template-rows:1fr 1fr;aspect-ratio:16/10}
  .fg-row3{aspect-ratio:1048/346}
  .fg-col{gap:6px}
}