@charset "utf-8";

/* ==========================================================================
   GROWTH CUBE LP
   Figma: GrowthCubeLP_PC (Mode=PC 1280 / Mode=SP 375)
   --------------------------------------------------------------------------
   ========================================================================== */

.cube-lp{
  font-family: "Noto Sans JP", sans-serif;
  color: #000;
  line-height: 160%;
  --cube-u: min(calc(1vw / 375*100), calc(425px / 375));
  /* 固定ヘッダーの高さぶんを空けてFV以降の位置をデザインに合わせる。
     ヘッダーの高さはロゴ（19.531vw）とナビ（1.25vw）で組まれていて画面幅で変わるため、
     実測値を js/growthcube/style.js が --cube-header-h に入れ直す。
     ここの値はJSが動かないときのフォールバック（1280pxでの実測が約60px） */
  --cube-header-h: 60px;
  padding-top: var(--cube-header-h);
}
@media only screen and (max-width: 768px) {
  .cube-lp{
    --cube-header-h: 50px;
  }
}
:where(.cube-lp) h1,:where(.cube-lp) h2,:where(.cube-lp) h3,
:where(.cube-lp) h4,:where(.cube-lp) p,:where(.cube-lp) a{
  line-height: 145%;
}

/* style.css の img{width:100%;object-fit:contain} を打ち消す */
:where(.cube-lp) img,
:where(.cube-lp) svg{
  width: auto;
  max-width: 100%;
  object-fit: initial;
}
:where(.cube-lp) p{
  margin: 0;
}
:where(.cube-lp) a{
  color: inherit;
  text-decoration: none;
}

/* BankGothic Md BT はWebフォント配信がないため近似フォントへフォールバック */
.cube-en{
  font-family: "BankGothic Md BT", "Jost", "futura-pt", "Noto Sans JP", sans-serif;
}

.cube-container{
  width: calc(1160vw / 1280*100);
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .cube-container{
    width: calc(328vw / 375*100);
  }
}

/* 本文（Figma jp/p : 16px / 25.4976px / 0.8px） */
.cube-p,
.cube-p p{
  font-size: calc(16vw / 1280*100);
  line-height: 159%;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 768px) {
  .cube-p,
  .cube-p p{
    font-size: calc(14 * var(--cube-u));
  }
}

/* 写真に重ねる注釈（「〜完成予想図」）。Figma: Noto Sans JP Medium / #fff。
   サイズと位置は重ねる写真ごとに指定する */
.cube-figcap{
  position: absolute;
  z-index: 1;
  margin: 0;
  color: #fff;
  font-weight: 500;
  line-height: 145%;
  white-space: nowrap;
  pointer-events: none;
}

/* 本文下に置く注釈（Figma jp/caption : 12px / 1.8 / 0.96px） */
.cube-caption,
.cube-caption p{
  font-size: calc(12vw / 1280*100);
  line-height: 180%;
  letter-spacing: 0.08em;
}
@media only screen and (max-width: 768px) {
  .cube-caption,
  .cube-caption p{
    font-size: calc(12 * var(--cube-u));
  }
}

/* 片方の幅でだけ改行させる br。SP専用が .cube-spbr、PC専用が .cube-pcbr。
   FVの「GROWTH CUBE赤坂 完成予想図」のように、PCだけ入れたい半角スペースを
   包む span にも .cube-pcbr を使っている（SPは改行するのでスペースが要らない） */
.cube-spbr{
  display: none;
}
@media only screen and (max-width: 768px) {
  .cube-spbr{
    display: inline;
  }
}
.cube-pcbr{
  display: inline;
}
@media only screen and (max-width: 768px) {
  .cube-pcbr{
    display: none;
  }
}

/* --------------------------------------------------------------------------
   見出しバー（POINT / LAYOUT / LINE UP 共通）
   -------------------------------------------------------------------------- */
.cube-secttl{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: rgba(0,0,0,0.6);
}
.cube-secttl__inner{
  display: flex;
  align-items: center;
  gap: calc(32vw / 1280*100);
  padding: calc(80vw / 1280*100) 0;
}
@media only screen and (max-width: 768px) {
  /* Figmaの上下は40（POINT 8246:8448 に「TB40にした」の注記。LINE UP 8246:8510 も
     ロゴ上40・本文下40で同じ）。帯はPOINT・LAYOUT・LINE UPで共通なので3つとも40にする */
  .cube-secttl__inner{
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--cube-u));
    padding: calc(40 * var(--cube-u)) 0;
  }
}
.cube-secttl__logo{
  display: block;
  width: auto;
  height: calc(32vw / 1280*100);
  flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
  .cube-secttl__logo{
    height: calc(24 * var(--cube-u));
  }
}
/* Figma jp/h2 : PC 28px / SP 24px */
.cube-secttl__txt{
  font-size: calc(28vw / 1280*100);
  font-weight: 700;
  line-height: 145%;
  color: #fff;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .cube-secttl__txt{
    font-size: calc(20 * var(--cube-u));
    white-space: normal;
  }
}

/* ==========================================================================
   FV
   ========================================================================== */
.cube-fv{
  position: relative;
  width: 100%;
  height: calc(650vw / 1280*100);
  overflow: hidden;
  background: #1a1a1a;
}
@media only screen and (max-width: 768px) {
  /* 9/11のFigma（8699:13480）でSPのFVは 375×550 になった */
  .cube-fv{
    height: calc(550vw / 375*100);
    min-height: 550px;
  }
}
@media only screen and (max-width: 360px) {
  .cube-fv{
    min-height: 486px;
  }
}
.cube-fv__bg{
  position: absolute;
  inset: 0;
  background-image: url(../../img/growthcube/fv-bg-pc.jpg?v=20260901);
  background-size: cover;
  background-position: center;
}
@media only screen and (max-width: 768px) {
  .cube-fv__bg{
    background-image: url(../../img/growthcube/fv-bg-sp.jpg?v=20260911);
  }
}
/* 絵柄の基準はコンテンツ幅（PC 1160 / SP 328）ではなく全幅（PC 1280 / SP 375）。
   ステージを全幅にして、中の座標はFigmaの値をそのまま置く */
.cube-fv__stage{
  position: relative;
  width: 100%;
  height: calc(650vw / 1280*100);
  
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  /* セクションと同じ比。max-height を付けないのも同じ理由（上の注記参照） */
  .cube-fv__stage{
    width: 100%;
    height: calc(550vw / 375*100);
    min-height: 550px;
  }
}
@media only screen and (max-width: 360px) {
  .cube-fv__stage{
    min-height: 486px;
  }
}
/* 完成予想図の注釈。明るい写真の上に載るので影を敷く */
.cube-fv__cap{
  font-size: calc(12vw / 1280*100);
}
.cube-fv__cap--akasaka{
  left: calc(512vw / 1280*100);
  top: calc(5vw / 1280*100);
  text-shadow: 0 0 calc(4vw / 1280*100) rgba(0,0,0,0.5);
}
.cube-fv__cap--nishishinjuku{
  left: calc(12vw / 1280*100);
  top: calc(622vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  /* FV内は背景の絵柄に合わせた座標なので、--cube-u で頭打ちにすると背景とずれる。
     ここから下は文字サイズも含めて画面幅に追従させる */
  .cube-fv__cap{
    font-size: calc(10vw / 375*100);
  }
  /* 赤坂の写真は右上の六角形。注釈は画面上端へ移り1行になった（Figma 8699:13765）。
     Figmaは「中心x=293.5 / 上端8」なので、左端ではなく中心を合わせる */
  .cube-fv__cap--akasaka{
    left: calc(293.5vw / 375*100);
    transform: translateX(-50%);
    top: calc(8vw / 375*100);
    text-align: center;
    text-shadow: 0 0 calc(2.305vw / 375*100) rgba(0,0,0,0.5);
  }
  /* 西新宿の注釈はSPだけ非表示（Figma 8636:11261 が hidden）。
     PC（Mode=PC）には左下に残っているので、要素そのものは消さない */
  .cube-fv__cap--nishishinjuku{
    display: none;
  }
}

/* 9/11のFigmaでSPのFVは背景写真全体に黒80%が乗る形になり、キャッチ用の
   下敷きグラデーション（旧 8636:11545）はなくなった。濃度は背景画像に焼き込み済み */
.cube-fv__catch{
  position: absolute;
  left: calc(81vw / 1280*100);
  top: calc(370vw / 1280*100);
  margin: 0;
  color: #fff;
  font-size: calc(32vw / 1280*100);
  font-weight: 700;
  line-height: 140%;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  /* Figma 8699:13768。9/11版で2行に戻り、写真の中ほどへ下りた */
  .cube-fv__catch{
    left: calc(46vw / 375*100);
    top: calc(141vw / 375*100);
    font-size: calc(17vw / 375*100);
    line-height: 145%;
  }
}
.cube-fv__logo{
  position: absolute;
  left: calc(85vw / 1280*100);
  top: calc(438vw / 1280*100);
  width: calc(468vw / 1280*100);
  height: calc(143.51vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  /* Figma 8699:13769。中央ではなく少し左寄り（左端48／右端55）なので左端で合わせる */
  .cube-fv__logo{
    left: calc(48vw / 375*100);
    transform: none;
    top: calc(211vw / 375*100);
    width: calc(271.84vw / 375*100);
    height: calc(83.48vw / 375*100);
  }
}
.cube-fv__graph{
  position: absolute;
  left: calc(816vw / 1280*100);
  top: calc(325vw / 1280*100);
  width: calc(409vw / 1280*100);
  height: calc(293.49vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  /* 白い六角形は左下のまま。FVが550pxに詰まったぶんグラフも上へ（Figma 8699:13487） */
  .cube-fv__graph{
    left: calc(23vw / 375*100);
    top: calc(371vw / 375*100);
    width: calc(209.41vw / 375*100);
    height: calc(150.27vw / 375*100);
    margin-left: 0;
  }
}
/* 表示の動き（translateY＋フェード／data-delay）は growth-connect のFVと共通の
   .animate-top（common.js + 下記CSS）に任せる。
   isolation は重ね合わせの基準づくり。これがないと z-index:-1 の CUBE レイヤーが
   FVの背景写真より奥に沈む */
.cube-fv__graph{
  z-index: 0;
  isolation: isolate;
}
.cube-fv__graph img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* 遅れて出す2枚はベースより奥。矢印をさらに奥にして、
   曲線がビルの窓の上を通らないよう元の1枚と同じ重なり順にする */
.cube-fv__graphcube{
  z-index: -1;
}
.cube-fv__grapharrow{
  z-index: -2;
}
/* growth-connect と同じ仕組みだが、ビルは下からふわっと出したいので translateY は＋にする */
.animate-top img{
  transform: translateY(15px);
  transition: all 0.8s ease;
  opacity: 0;
  visibility: hidden;
}
.animate-top.show img{
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
/* 矢印だけは線が伸びるように出す。img なので stroke-dashoffset は使えず、
   見える範囲を左端から右へ広げる。曲線は右へ行くほど上がる一方通行なので、
   これで下から上へ伸びて見える（下辺からの横帯だと左半分が一瞬で出てしまう） */
.animate-top .cube-fv__grapharrow{
  transform: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s ease-out, opacity 0.3s ease, visibility 0s;
}
.animate-top.show .cube-fv__grapharrow{
  clip-path: inset(0 0 0 0);
}
/* 動きを減らす設定のときは伸ばさずそのまま出す */
@media (prefers-reduced-motion: reduce) {
  .animate-top .cube-fv__grapharrow,
  .animate-top.show .cube-fv__grapharrow{
    clip-path: none;
  }
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.cube-about{
  position: relative;
  background: #f2f3f3;
  padding: calc(80vw / 1280*100) 0;
}
@media only screen and (max-width: 768px) {
  .cube-about{
    padding: calc(80 * var(--cube-u)) 0;
  }
}
.cube-about__head{
  display: flex;
  align-items: center;
  gap: calc(32vw / 1280*100);
  padding-bottom: calc(32vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-about__head{
    flex-direction: column;
    align-items: flex-start;
    gap: calc(16 * var(--cube-u));
    padding-bottom: calc(32 * var(--cube-u));
  }
}
.cube-about__logo{
  display: block;
  width: calc(215vw / 1280*100);
  height: calc(32vw / 1280*100);
  flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
  .cube-about__logo{
    width: calc(161 * var(--cube-u));
    height: calc(24 * var(--cube-u));
  }
}
/* Figma jp/h2 : PC 28px / SP 24px */
.cube-about__ttl{
  font-size: calc(28vw / 1280*100);
  font-weight: 700;
  line-height: 145%;
  white-space: nowrap;
}
@media only screen and (max-width: 768px) {
  .cube-about__ttl{
    font-size: calc(20 * var(--cube-u));
    white-space: normal;
  }
}

/* ==========================================================================
   POINT
   ========================================================================== */
.cube-point{
  position: relative;
  --point-u: min(calc(1vw / 1280*100), calc((100vh - var(--cube-header-h)) / 800));
  /* 本文サイズ。16.5 はブロックが分母800に収まる上限、
     13.5px は1440px未満で本文だけ痩せて見えないようにする下限 */
  --point-fs: min(calc(16.5 * var(--point-u)), max(13.5px, calc(12vw / 1280*100)));
  /* タブ（アイコン・英字・日本語）をひとまとまりで縮小する倍率。
     3者の文字サイズだけでなく、アイコンの寸法とその間隔にも同じ値を掛けるので、
     見た目のバランスは変えずに、かたまりごと小さくできる */
  --point-tab-scale: 0.8;
  --point-fs-lead: calc(var(--point-fs) * 1.5 * var(--point-tab-scale));
  --point-fs-label: calc(var(--point-fs) * 1.8 * var(--point-tab-scale));
}
@media only screen and (max-width: 768px) {
  .cube-point{
    /* SPは画面高の制約がない（固定しない）ので、他セクションと同じ --cube-u に揃える */
    --point-u: var(--cube-u);
    /* SPのタブはアイコン左・見出し右の別レイアウトで元から小さいため縮小しない */
    --point-tab-scale: 1;
  }
}
.cube-point__bgwrap{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cube-point__bg{
  position: sticky;
  top: 0;
  height: 100vh;
  background-image: url(../../img/growthcube/point-bg.jpg?v=20260901);
  background-size: cover;
  background-position: center;
}
/* Figmaは写真の上に黒20%と黒60%を2枚重ねているので、合わせて68%になる */
.cube-point__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.68);
}
@media only screen and (max-width: 768px) {
  .cube-point__bg{
    position: absolute;
    inset: 0;
    height: auto;
  }
}
.cube-point__head,
.cube-point__scroll{
  position: relative;
  z-index: 1;
}
.cube-point__scroll{
  height: 300vh;
}
@media only screen and (max-width: 768px) {
  .cube-point__scroll{
    height: auto;
  }
}
.cube-point__stage{
  position: sticky;
  top: var(--cube-header-h);
  height: calc(100vh - var(--cube-header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media only screen and (max-width: 768px) {
  .cube-point__stage{
    position: static;
    display: block;
    height: auto;
  }
}

.cube-point__body{
  width: calc(1160 * var(--point-u));
  margin: 0 auto;
  /* Figmaは80。上の注記のとおり高さを詰めている */
  padding: calc(40 * var(--point-u)) 0;
}
@media only screen and (max-width: 768px) {
  .cube-point__body{
    width: calc(328vw / 375*100);
    padding: calc(80 * var(--point-u)) 0;
  }
}
.cube-point__list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* 選択中タブの白背景。矢印と同じく横スライドさせる（クロスフェードしない） */
.cube-point__list::before{
  content: "";
  grid-row: 1;
  grid-column: 1;
  z-index: 0;
  background: rgba(255,255,255,0.9);
  transform: translateX(calc(100% * var(--point-index, 0)));
  transition: transform 0.4s ease;
}
/* 矢印＋パネルの白背景。切替中に濃度が変わらないよう常時1枚だけ敷く */
.cube-point__list::after{
  content: "";
  grid-row: 2 / 4;
  grid-column: 1 / -1;
  z-index: 0;
  background: rgba(255,255,255,0.9);
}
@media only screen and (max-width: 768px) {
  .cube-point__list{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(32 * var(--point-u));
  }
  .cube-point__list::before,
  .cube-point__list::after{
    display: none;
  }
}
.cube-point__item{
  display: contents;
}
@media only screen and (max-width: 768px) {
  .cube-point__item{
    display: flex;
    flex-direction: column;
    gap: calc(32 * var(--point-u));
    width: 100%;
    padding: calc(40 * var(--point-u)) calc(16 * var(--point-u));
    background: rgba(255,255,255,0.9);
  }
}
@media only screen and (min-width: 769px) {
  .cube-point__item.js-hide{
    opacity: 1;
    transform: none;
  }
}
@media only screen and (max-width: 768px) {
  .cube-point__body.js-hide{
    opacity: 1;
    transform: none;
  }
}

/* --- タブ --- */
.cube-point__tab{
  grid-row: 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(16 * var(--point-tab-scale) * var(--point-u));
  padding: calc(64 * var(--point-u)) 0 calc(32 * var(--point-u));
  border: 0;
  border-left: 1px solid transparent;
  background: none;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.4s ease;
  -webkit-appearance: none;
  appearance: none;
}
.cube-point__tab[data-point-tab="0"]{ grid-column: 1; }
.cube-point__tab[data-point-tab="1"]{ grid-column: 2; }
.cube-point__tab[data-point-tab="2"]{ grid-column: 3; }
.cube-point__tab.is-active{
  color: #000;
}
/* 区切り線は非アクティブ同士の境界にだけ出す（付け外しは style.js が担当）。
   アクティブ列は白背景の辺が境界になるので線を引かない */
.cube-point__tab.has-divider{
  border-left-color: #cab168;
}
@media only screen and (max-width: 768px) {
  /* SPは「アイコン＋英字」を横1行の中央寄せ、その下にリード文（Figma 8583:12142）。
     縦の間隔は8、アイコン〜英字は16 */
  .cube-point__tab,
  .cube-point__tab.is-active{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--point-u));
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: #000;
    text-align: center;
    cursor: default;
  }
}
.cube-point__tabhead{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14 * var(--point-tab-scale) * var(--point-u));
  /* Figmaは129。ラベルを大きくすると FLEXIBLE が溢れるので広げている
     （中身は中央寄せなので、枠を広げても見た目は変わらない） */
  width: calc(180 * var(--point-u));
}
@media only screen and (max-width: 768px) {
  .cube-point__tabhead{
    flex-direction: row;
    justify-content: left;
    gap: calc(16 * var(--point-u));
    width: 100%;
  }
}
.cube-point__tab--speed{
  --icon: url(../../img/growthcube/icon-speed.svg);
  --icon-on: url(../../img/growthcube/icon-speed-on.svg);
}
.cube-point__tab--cost{
  --icon: url(../../img/growthcube/icon-cost.svg);
  --icon-on: url(../../img/growthcube/icon-cost-on.svg);
}
.cube-point__tab--flexible{
  --icon: url(../../img/growthcube/icon-flexible.svg);
  --icon-on: url(../../img/growthcube/icon-flexible-on.svg);
}
/* アイコンはアクティブが #595757、非アクティブが #cab168 の2種を持ち替える */
.cube-point__icon{
  /* Figmaは80。PDFの実測（本文比 約3.7倍）に合わせて72にしている */
  width: calc(72 * var(--point-tab-scale) * var(--point-u));
  height: calc(72 * var(--point-tab-scale) * var(--point-u));
  background-image: var(--icon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.cube-point__tab.is-active .cube-point__icon{
  background-image: var(--icon-on);
}
@media only screen and (max-width: 768px) {
  /* SPは常にアクティブの見た目。Figmaは40（8583:12223） */
  .cube-point__icon{
    flex-shrink: 0;
    width: calc(40 * var(--point-u));
    height: calc(40 * var(--point-u));
    background-image: var(--icon-on);
  }
}
.cube-point__label{
  font-size: var(--point-fs-label);
  font-weight: 700;
  line-height: 135%;
  letter-spacing: 0.05em;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  /* Figmaは24だが、文字サイズは現状のまま（19）で組む */
  .cube-point__label{
    color: #cab168;
    font-size: calc(24 * var(--point-u));
    line-height: 160%;
  }
}
.cube-point__lead{
  /* Figmaは211。改行は br で持っているので、最長行が入る幅があればよい */
  width: calc(260 * var(--point-u));
  font-size: var(--point-fs-lead);
  font-weight: 700;
  line-height: 142%;
  letter-spacing: 0.042em;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .cube-point__lead{
    width: 100%;
    font-size: calc(20 * var(--point-u));
    text-align: left;
  }
}

/* --- 矢印 --- */
.cube-point__arrow{
  grid-row: 2;
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  /* Figmaは80。上の注記のとおり詰める */
  height: calc(40 * var(--point-u));
}
/* 1列ぶん（1160/3 = 386.6667）ずつ transform でずらし、
   タブのハイライト（__list::before）と動きを完全に揃える */
.cube-point__arrow::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 16.6667%;
  transform: translate(-50%, -50%)
             translateX(calc(386.6667 * var(--point-u) * var(--point-index, 0)));
  width: 0;
  height: 0;
  /* PDFの実測は47x18。Figmaの正三角形（27.7x24）より横に広く平たい */
  border-left: calc(23.5 * var(--point-u)) solid transparent;
  border-right: calc(23.5 * var(--point-u)) solid transparent;
  border-top: calc(18 * var(--point-u)) solid #cab168;
  transition: transform 0.4s ease;
}
@media only screen and (max-width: 768px) {
  .cube-point__arrow{
    display: none;
  }
}

/* --- パネル --- */
/* 3枚が同じマスに重なるので、同時にクロスフェードすると文字が二重に見える。
   前半0.2sで消して後半0.2sで出す順送りにし、合計をスライドと同じ0.4sに揃える */
.cube-point__panel{
  grid-row: 3;
  grid-column: 1 / -1;
  z-index: 1;
  display: flex;
  align-items: center;
  /* 図版を広げるぶん、左右の余白（Figma48）と本文との間隔（40）を詰めて横幅を捻出する。
     下の余白（48→72）はタブを縮小して浮いた高さを回し、白ベタの天地を広げている */
  gap: calc(24 * var(--point-u));
  padding: 0 calc(32 * var(--point-u)) calc(72 * var(--point-u));
  color: #000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s 0.2s;
}
.cube-point__panel.is-active{
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease 0.2s, visibility 0s;
}
@media only screen and (max-width: 768px) {
  .cube-point__panel,
  .cube-point__panel.is-active{
    flex-direction: column;
    align-items: stretch;
    gap: calc(32 * var(--point-u));
    padding: 0;
    opacity: 1;
    visibility: visible;
    transition: none;
  }
}
.cube-point__txt{
  flex: 1 1 0;
  min-width: 0;
}
/* 他セクションの本文に寄せつつ、行が増えて右の図版より高くなると
   ブロックがはみ出すので --point-fs 側で頭打ちにしている */
.cube-point__txt,
.cube-point__txt p{
  font-size: var(--point-fs);
  line-height: 159%;
  letter-spacing: 0.05em;
}
@media only screen and (max-width: 768px) {
  .cube-point__txt,
  .cube-point__txt p{
    font-size: calc(14 * var(--point-u));
  }
}
.cube-point__figwrap{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--point-u));
  /* Figmaは600。タブを詰めて空いた高さを図版に回すぶん、幅も広げて大きく見せている。
     図版は下の注記のとおり幅で止まるので、大きくするには高さではなく幅を広げる。
     本文の1行あたりの文字数が減りすぎない範囲（残り300ユニット＝約18文字）で
     取れる上限が772。パネルの左右余白48→32・本文との間隔40→24もここに回している */
  width: calc(772 * var(--point-u));
}
@media only screen and (max-width: 768px) {
  .cube-point__figwrap{
    width: 100%;
  }
}
.cube-point__fig{
  width: 100%;
  height: calc(284 * var(--point-u));
  object-fit: contain;
}
@media only screen and (max-width: 768px) {
  /* 高さは図版ごとの比（下の --speed / --cost / --flexible）で決める */
  .cube-point__fig{
    height: auto;
  }
}
.cube-point__fig--sp{
  display: none;
}
@media only screen and (max-width: 768px) {
  .cube-point__fig--pc{
    display: none;
  }
  .cube-point__fig--sp{
    display: block;
  }
  /* 9/11のFigmaで3枚とも差し替わり、SPは図版ごとに比が違う（幅はいずれも296） */
  .cube-point__fig--speed{
    aspect-ratio: 296 / 436;
  }
  .cube-point__fig--cost{
    aspect-ratio: 296 / 137;
  }
  .cube-point__fig--flexible{
    aspect-ratio: 296 / 125;
  }
}
/* Figma jp/caption : 12px / 1.8 / 0.96px。
   本文と同じ上限・下限に乗せたいので、本文からの倍率で持たせる */
.cube-point__note{
  font-size: calc(var(--point-fs) * 0.9);
  line-height: 180%;
  letter-spacing: 0.08em;
  text-align: right;
}
@media only screen and (max-width: 768px) {
  /* SPは幅基準だと極端に小さくなるので、他のSP指定と同じ --point-u に揃える */
  .cube-point__note{
    font-size: calc(12 * var(--point-u));
  }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.cube-layout{
  position: relative;
  padding-bottom: calc(80vw / 1280*100);
  background: #000;
}
.cube-layout,
.cube-layout *{
  touch-action: manipulation;
}
@media only screen and (max-width: 768px) {
  .cube-layout{
    padding-bottom: calc(64 * var(--cube-u));
  }
}
.cube-layout__bg{
  position: absolute;
  inset: 0;
  background-image: url(../../img/growthcube/layout-bg-pc.jpg?v=20260901);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.cube-layout__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
}
@media only screen and (max-width: 768px) {
  .cube-layout__bg{
    background-image: url(../../img/growthcube/layout-bg-sp.jpg?v=20260901);
  }
  .cube-layout__bg::after{
  background: rgba(0,0,0,0.8);
}
}

.cube-layout > .cube-secttl,
.cube-layout__body{
  position: relative;
  z-index: 1;
}
/* Figmaは見出し帯と図版のあいだが gap（PC 56 / SP 32） */
.cube-layout__body{
  padding-top: calc(56vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-layout__body{
    padding-top: calc(32 * var(--cube-u));
  }
}

/* --- 図版 --- */
.cube-layout__fig{
  width: calc(1160vw / 1280*100);
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .cube-layout__fig{
    width: calc(300vw / 375*100);
  }
}
@media only screen and (max-width: 600px) {
  .cube-layout__fig{
    width: calc(328vw / 375*100);
  }
}
.cube-layout__fig + .cube-layout__fig{
  margin-top: calc(56vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-layout__fig + .cube-layout__fig{
    margin-top: calc(32 * var(--cube-u));
  }
}
.cube-layout__figimg{
  display: block;
  width: 100%;
  height: auto;
}
/* 暗い写真の上に載るので注記だけ白 */
.cube-layout__note{
  width: calc(1160vw / 1280*100);
  margin: calc(56vw / 1280*100) auto 0;
  color: #fff;
}
@media only screen and (max-width: 768px) {
  .cube-layout__note{
    width: calc(328vw / 375*100);
    margin-top: calc(32 * var(--cube-u));
  }
}
@media only screen and (max-width: 768px) {
  .cube-layout__figimg--pc{
    display: none;
  }
}

/* --- SPのスライダー --- */
.cube-layout__sp{
  display: none;
}
@media only screen and (max-width: 768px) {
  .cube-layout__sp{
    display: block;
  }
}
.cube-layout__plan{
  display: block;
  width: 100%;
  height: auto;
}
.cube-layout__slides{
  margin-top: calc(32 * var(--cube-u));
}
.cube-layout__slide{
  display: block;
  width: 100%;
  height: auto;
}
/* slickの初期化前（PC表示・JS無効時）に縦積みで見えてしまうので2枚目以降を隠す。
   初期化されるとカードは .slick-list > .slick-track の中へ移されて
   枠の直下ではなくなるため、この指定は自然に外れる */
.cube-layout__slides > .cube-layout__slide + .cube-layout__slide{
  display: none;
}
.cube-layout__nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(24 * var(--cube-u));
  margin-top: calc(32 * var(--cube-u));
}
.cube-layout__nav,
.cube-layout__nav *{
  touch-action: pan-y;
}
.cube-layout__arrow{
  flex-shrink: 0;
  width: calc(56 * var(--cube-u));
  height: calc(56 * var(--cube-u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff url(../../img/growthcube/icon-slider-arrow.svg?v=20260901) no-repeat center / calc(24 * var(--cube-u)) auto;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* 戻るボタンは同じ矢印を左右反転して使う */
.cube-layout__arrow--prev{
  transform: scaleX(-1);
}
.cube-layout__dots{
  display: flex;
  align-items: center;
  gap: calc(8 * var(--cube-u));
}
.cube-layout__dot{
  width: calc(10 * var(--cube-u));
  height: calc(10 * var(--cube-u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #595757;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.cube-layout__dot.is-active{
  background: #cab168;
}

/* ==========================================================================
   LINE UP
   ========================================================================== */
.cube-lineup__head{
  background: #3d3d3d;
}
.cube-lineup__list{
  display: flex;
  width: 100%;
}
@media only screen and (max-width: 768px) {
  .cube-lineup__list{
    flex-wrap: wrap;
  }
}
.cube-lineup__list li{
  flex: 1 1 0;
  min-width: 0;
  height: calc(399vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-lineup__list li{
    flex: 0 0 50%;
    height: calc(198.5 * var(--cube-u));
  }
}
.cube-lineup__list img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   施設カード
   ========================================================================== */
.cube-cards{
  padding: calc(80vw / 1280*100) 0;
  background: #f2f3f3;
}
@media only screen and (max-width: 768px) {
  .cube-cards{
    padding: calc(64 * var(--cube-u)) 0;
  }
}
.cube-cards__list{
  display: flex;
  gap: calc(40vw / 1280*100);
  width: calc(1160vw / 1280*100);
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .cube-cards__list{
    flex-direction: column;
    gap: calc(40 * var(--cube-u));
    width: calc(328vw / 375*100);
  }
}
/* 高さは指定せず内容ぶん（なりゆき）に任せる。「詳細はこちら」ボタンを
   出していないぶん詰まって、Figma（PC 272px / SP 497px）と同じ高さになる */
.cube-card{
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  background: #fff;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .cube-card{
    flex: none;
    flex-direction: column;
    height: auto;
  }
}
/* 写真の高さはテキスト側（cube-card__body）のなりゆきに合わせて伸ばす */
.cube-card__imgwrap{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  overflow: hidden;
}
.cube-card__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 赤坂だけFigmaのトリミングが中央から少し右にずれている（PCのみ／SPは中央） */
.cube-card__img--akasaka{
  object-position: 55% center;
}
@media only screen and (max-width: 768px) {
  .cube-card__img--akasaka{
    object-position: center;
  }
}
.cube-card__imgwrap .cube-figcap{
  right: calc(12vw / 1280*100);
  bottom: calc(9.69vw / 1280*100);
  font-size: calc(12vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-card__imgwrap{
    flex: none;
    width: 100%;
    height: calc(289 * var(--cube-u));
  }
  .cube-card__imgwrap .cube-figcap{
    right: calc(10.5 * var(--cube-u));
    bottom: calc(9.29 * var(--cube-u));
    font-size: calc(12 * var(--cube-u));
  }
}
.cube-card__body{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-shrink: 0;
  width: calc(317vw / 1280*100);
  padding: calc(64vw / 1280*100) calc(24vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-card__body{
    width: 100%;
    padding: calc(40 * var(--cube-u)) calc(16 * var(--cube-u));
  }
}
.cube-card__head{
  display: flex;
  flex-direction: column;
  gap: calc(8vw / 1280*100);
  padding-bottom: calc(16vw / 1280*100);
  border-bottom: 1px solid #595757;
}
@media only screen and (max-width: 768px) {
  .cube-card__head{
    gap: calc(8 * var(--cube-u));
    padding-bottom: calc(8 * var(--cube-u));
  }
}
/* Figma jp/p-sm : 14px / 1.8 / 1.12px、色は --main の #cab168。
   SP版のFigmaは未更新だがPCと同じ体裁でよいので、数値だけ等倍で置いている */
.cube-card__open{
  font-size: calc(14vw / 1280*100);
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: #cab168;
}
@media only screen and (max-width: 768px) {
  .cube-card__open{
    font-size: calc(14 * var(--cube-u));
  }
}
.cube-card__logo{
  display: block;
  width: calc(269vw / 1280*100);
  height: calc(18vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-card__logo{
    width: calc(269 * var(--cube-u));
    height: calc(18 * var(--cube-u));
  }
}
/* Figma jp/h3 : 24px / 34.9952px / 1.2998px */
.cube-card__name{
  font-size: calc(24vw / 1280*100);
  font-weight: 700;
  line-height: 146%;
  letter-spacing: 0.054em;
}
@media only screen and (max-width: 768px) {
  .cube-card__name{
    font-size: calc(24 * var(--cube-u));
  }
}
.cube-card__addr{
  padding-top: calc(16vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-card__addr{
    padding-top: calc(8 * var(--cube-u));
  }
}
/* 「詳細はこちら」ボタン用。Figmaで非表示指定になっていて index.html 側も
   コメントアウトしているため現状は未使用。リンク先ページができたら復活させる */
.cube-card__btnwrap{
  padding-top: calc(32vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-card__btnwrap{
    padding-top: calc(24 * var(--cube-u));
  }
}
.cube-btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(57vw / 1280*100);
  border: 1px solid #000;
  background: #fff;
  font-size: calc(17.997vw / 1280*100);
  font-weight: 700;
  line-height: 133%;
  letter-spacing: 0.05em;
}
/* 矢印は growth-connect の「TOPページへ戻る」と同じ素材（Figmaの sankaku-icon）。
   他ディレクトリを参照しないよう img/growthcube/ に複製している。
   素材が左向きなので、右向きに使うところは scaleX(-1) で反転させる */
.cube-btn::after{
  content: "";
  position: absolute;
  top: 50%;
  right: calc(10.21vw / 1280*100);
  transform: translateY(-50%) scaleX(-1);
  width: calc(10vw / 1280*100);
  height: calc(19.651vw / 1280*100);
  background: url(../../img/growthcube/icon-arrow.svg) no-repeat center / contain;
}
@media only screen and (max-width: 768px) {
  .cube-btn{
    height: calc(57 * var(--cube-u));
    font-size: calc(15 * var(--cube-u));
  }
  .cube-btn::after{
    right: calc(19.5 * var(--cube-u));
    width: calc(10 * var(--cube-u));
    height: calc(19.651 * var(--cube-u));
  }
}

/* --- Coming soon... --- */
.cube-cards__soon{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(56vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-cards__soon{
    padding-top: calc(32 * var(--cube-u));
  }
}
.cube-cards__soondots{
  display: block;
  width: calc(6vw / 1280*100);
  height: calc(38vw / 1280*100);
}
.cube-cards__soonttl{
  display: block;
  box-sizing: content-box;
  width: auto;
  height: calc(14.451vw / 1280*100);
  padding: calc(12.375vw / 1280*100) 0;
}
@media only screen and (max-width: 768px) {
  .cube-cards__soondots{
    width: calc(4 * var(--cube-u));
    height: calc(28 * var(--cube-u));
  }
  .cube-cards__soonttl{
    height: calc(12.387 * var(--cube-u));
    padding: calc(10.607 * var(--cube-u)) 0;
  }
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.cube-contact{
  position: relative;
  padding: calc(80vw / 1280*100) 0;
  overflow: hidden;
}
@media only screen and (max-width: 768px) {
  .cube-contact{
    padding: calc(64 * var(--cube-u)) 0;
  }
}
/* FigmaはPOINTと同じ写真を同じ cover / center で敷いているだけなので、
   POINT用に書き出した1枚を使い回している（読み込みも1回で済む）。
   不透明度25%はFigmaの指定どおり */
.cube-contact__bg{
  position: absolute;
  inset: 0;
  background-image: url(../../img/growthcube/point-bg.jpg?v=20260901);
  background-size: cover;
  background-position: center;
  opacity: 0.25;
}
.cube-contact__inner{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: calc(1160vw / 1280*100);
  margin: 0 auto;
}
@media only screen and (max-width: 768px) {
  .cube-contact__inner{
    flex-direction: column;
    gap: calc(32 * var(--cube-u));
    width: calc(328vw / 375*100);
  }
}
.cube-contact__logo{
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
}
.cube-contact__logo img{
  width: calc(309vw / 1280*100);
  height: calc(138vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-contact__logo{
    flex: none;
  }
  .cube-contact__logo img{
    width: calc(309 * var(--cube-u));
    height: calc(138 * var(--cube-u));
  }
}
.cube-contact__body{
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #595757;
}
@media only screen and (max-width: 768px) {
  .cube-contact__body{
    /* 縦並びでは flex-basis:0 が height より優先されてしまうので解除する */
    flex: none;
    height: calc(137.72 * var(--cube-u));
    border-left: 0;
    /* SPは区切り線が上に回る */
    border-top: 1px solid #595757;
  }
}
/* 画像なので高さはキャップハイト（PC 14.451px = 28px相当 / SP 12.387px = 24px相当）。
   上下paddingで見出し1行ぶん（28×1.4）を確保し、他要素との間隔を揃える */
.cube-contact__ttl{
  display: block;
  box-sizing: content-box;
  width: auto;
  height: calc(14.451vw / 1280*100);
  padding: calc(12.375vw / 1280*100) 0;
}
@media only screen and (max-width: 768px) {
  .cube-contact__ttl{
    height: calc(12.387 * var(--cube-u));
    padding: calc(10.607 * var(--cube-u)) 0;
  }
}
.cube-contact__btn{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16vw / 1280*100);
  width: calc(507vw / 1280*100);
  padding: calc(19.2vw / 1280*100);
  background: #000;
  color: #fff;
}
.cube-contact__btn::after{
  content: "";
  position: absolute;
  top: 50%;
  right: calc(9.5vw / 1280*100);
  transform: translateY(-50%) scaleX(-1);
  width: calc(10vw / 1280*100);
  height: calc(19.651vw / 1280*100);
  background: url(../../img/growthcube/icon-arrow-white.svg) no-repeat center / contain;
}
@media only screen and (max-width: 768px) {
  .cube-contact__btn{
    gap: calc(16 * var(--cube-u));
    width: 100%;
    padding: calc(19.2 * var(--cube-u));
  }
  .cube-contact__btn::after{
    right: calc(15.5 * var(--cube-u));
    width: calc(10 * var(--cube-u));
    height: calc(19.651 * var(--cube-u));
  }
}
.cube-contact__btn img{
  width: calc(29vw / 1280*100);
  height: calc(22vw / 1280*100);
}
@media only screen and (max-width: 768px) {
  .cube-contact__btn img{
    width: calc(29 * var(--cube-u));
    height: calc(22 * var(--cube-u));
  }
}
.cube-contact__btn span{
  font-size: calc(18.56vw / 1280*100);
  font-weight: 700;
  line-height: 150%;
  letter-spacing: 0.027em;
}
@media only screen and (max-width: 768px) {
  .cube-contact__btn span{
    font-size: calc(18.56 * var(--cube-u));
  }
}

/* ==========================================================================
   TOPページへ戻る
   ========================================================================== */
.cube-backtop{
  padding: calc(80vw / 1280*100) 0;
  background: #fff;
  text-align: center;
}
@media only screen and (max-width: 768px) {
  .cube-backtop{
    padding: calc(64 * var(--cube-u)) 0;
  }
}
.cube-backtop__note{
  width: calc(1160vw / 1280*100);
  margin: calc(64vw / 1280*100) auto 0;
  text-align: left;
}
@media only screen and (max-width: 768px) {
  .cube-backtop__note{
    width: calc(328vw / 375*100);
    margin-top: calc(40 * var(--cube-u));
  }
}
.cube-backtop a{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(500vw / 1280*100);
  height: calc(100vw / 1280*100);
  margin: 0 auto;
  border: 1px solid #000;
  background: #fff;
  font-size: calc(17.997vw / 1280*100);
  font-weight: 700;
  line-height: 133%;
  letter-spacing: 0.02em;
}
/* 戻る動線なので矢印は左向き（共有素材がそのまま左向きなので反転不要） */
.cube-backtop a::before{
  content: "";
  position: absolute;
  top: 50%;
  left: calc(19vw / 1280*100);
  transform: translateY(-50%);
  width: calc(10vw / 1280*100);
  height: calc(19.651vw / 1280*100);
  background: url(../../img/growthcube/icon-arrow.svg) no-repeat center / contain;
}
@media only screen and (max-width: 768px) {
  /* 高さは「入居希望・資料請求」ボタンに合わせる（padding 19.2×2 ＋ 18.56×150% の行高） */
  .cube-backtop a{
    width: calc(328vw / 375*100);
    height: calc(66.24 * var(--cube-u));
    font-size: calc(17.997 * var(--cube-u));
  }
  .cube-backtop a::before{
    left: calc(30.5 * var(--cube-u));
    width: calc(10 * var(--cube-u));
    height: calc(19.651 * var(--cube-u));
  }
}