/* ===== Reset / Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background:#000; }
html { height: -webkit-fill-available; }
body {
  min-height: 100vh; min-height: -webkit-fill-available;
  overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans","Hiragino Kaku Gothic ProN", sans-serif;
}

/* === スマホだけ縦スクロール許可 === */
@media (max-width: 767px) {
  html, body {
    height: auto !important;
    overflow-y: auto !important;   /* ← 縦スクロールON */
    overflow-x: hidden !important; /* ← 横スクロールは禁止のまま */
  }
}

/* ===== 背景（動画） ===== */
.stage { position: fixed; inset: 0; overflow: hidden; z-index: 0; }
.bg-video {
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover; display: block; background:#000;
}
@supports (-webkit-touch-callout: none) {
  .bg-video { height: calc(101vh + 2px); } /* Safari丸め対策 */
}
.bg-overlay {
  position: absolute; inset: -1px; background: rgba(0,0,0,.40); pointer-events: none;
}
@media (max-width: 767px) {
  .stage { position: fixed; inset: 0; z-index: 0; }
}

/* ===== タイトル画像（上端ピタ & 横幅100%） ===== */
.masthead {
  position: fixed;
  top: -6px;
  left: 0;
  width: 100vw;
  z-index: 10;
  margin: 0; padding: 0;
}
/* スマホだけ masthead をフロー配置に */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 767px) {
    .masthead {
      top: calc(env(safe-area-inset-top) * -1 - 1px);
      position: static !important;
      top:auto !important; left:auto !important;
      width:100% !important; z-index: 1 !important;
    }
  }
}

/* ===== 画像マスク方式 ===== */
.title-mask {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 204.047;
  background-color: #00FF45;
  display: block;
  -webkit-mask-image: url("/assets/images/shop-for-rent.svg");
  mask-image: url("/assets/images/shop-for-rent.svg");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: top left; mask-position: top left;
  -webkit-mask-size: 100% auto; mask-size: 100% auto;
}
@media (max-width: 767px){
  .title-mask{ display:block; width:100%; height:auto; margin: 0 auto; }
}

/* ===== 3カラム：左ピタ + 可変レイアウト ===== */
.info-row{
  --fs: clamp(12px, 1.1vw, 18px);
  font-size: var(--fs);
  --head-size: clamp(22px, 2.6vw, 40px);

  display: grid;
  grid-template-columns: auto minmax(26ch, 1fr) minmax(28ch, 1fr);
  align-items: start;
  column-gap: clamp(24px, 6vw, 120px);
  width: 100vw;
  margin: 0;
  padding-top: clamp(12px, 2vw, 32px);
  padding-left: clamp(16px, 2vw, 48px);
  padding-right: clamp(16px, 3vw, 48px);
  color:#fff;
  font-family:"Helvetica Neue", Arial, "Hiragino Sans","Hiragino Kaku Gothic ProN", sans-serif;
}
.info-row > .info-col{ min-width:0; }
.info-row p{ margin:0; }

@media (max-width: 767px){
  .info-row,
  .center-content,
  .left-info { position: relative; z-index: 10; }
}

/* 左（面積） */
.info-col.left .subline{
  white-space: nowrap; color:#00FF45; font-weight:500;
  font-size: clamp(20px, 3.2vw, 48px);
  line-height:.9; display:inline-block;
  transform: translateY(-.08em);
  letter-spacing: 0.01em;
}
.info-col.left .subline sup{ vertical-align:text-top; font-size:.6em; }

/* スマホはドーンと大きく幅いっぱい */
@media (max-width: 767px){
  .info-col.left{ width: 100%; text-align: center; }
  .info-col.left .subline{
    display: inline-block; width: auto;
    font-size: clamp(30px, 10vw, 64px);
    line-height: 1.1; transform: none;
  }
}

/* 中央（Plan + SHOP） */
.info-col.center{ justify-self: start; }
.center-grid{
  display: grid;
  grid-template-columns: auto auto 1fr; /* [label][main][details] */
  align-items: start;
  column-gap: clamp(.6em, 1.6em, 2em);
  row-gap: .4em;
  grid-auto-rows: min-content;
}
.center-grid .label{
  font-size: .9em; color: #ccc; line-height: 1;
  position: relative; top: .5em;
}
.center-grid .main{
  font-size: var(--head-size); font-weight: 800;
  line-height: 0.9; white-space: nowrap; color:#fff; transform:none;
}
.center-grid .details,
.right-grid .details{
  font-size: 13px; line-height: 1.4; color: #ccc; margin: 0;
}

/* ===== PC: OFFICE を SHOP と揃える ===== */
.right-grid{
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: start;
  column-gap: clamp(10px, 1.8vw, 28px);
  width: 100%; max-width: 100%;
}
.right-grid .main{
  font-size: var(--head-size); font-weight: 800;
  line-height: 0.9; white-space: nowrap; color:#fff; margin: 0;
}
.right-grid .details{
  min-width: 0; line-height: 1.3; margin: 0; color:#917373;
}

/* ===== センターコンテンツ ===== */
.center-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  text-align: center;
  width: 100%;
  max-width: 960px;
  color: #fff;
  font-family: "Helvetica Neue", "Hiragino Sans","Hiragino Kaku Gothic ProN", sans-serif;
  z-index: 20;
  line-height: 1.8;
  padding: 0 20px;
  font-size: 16pt; /* ← 全体の基準サイズ（PC時） */
}

/* 日本語テキスト（説明文） */
.center-content .lead {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 2.5em;
  color: rgba(255, 255, 255, 0.85);
}

/* 「April 2026 Grand opening」 */
.center-content .highlight {
  font-size: 24px;
  font-weight: 700;
  color: #00FF45;
  margin-bottom: -0.2em; /* ← ここでグッと詰まる。数値はお好みで */
  line-height: 1.1;      /* ← 行間も少しタイトに */

}

/* CTA（Get information） */
.center-content .cta {
  display: inline-flex; /* テキストと矢印を横並びで中央揃え */
  align-items: center;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid #00FF45;
  padding-bottom: 1px;
  transition: opacity .3s ease;
  line-height: 1.2;
}
.center-content .cta:hover {
  opacity: 0.7;
}

.center-content .cta .cta-arrow {
  display: inline-block;
  width: 18px;       /* PC時の矢印サイズ（ちょうど文字高さに合う） */
  height: auto;
  margin-left: 8px;  /* テキストとの余白 */
  filter: brightness(0) invert(1); /* 白くする */
  vertical-align: middle;
}

/* スマホ時は少し小さく */
@media (max-width: 767px) {
  .center-content .cta .cta-arrow {
    width: 12px;
    margin-left: 6px;
  }
}

/* ===== スマホ（〜767px）：左寄せ＋サイズ調整 ===== */
@media (max-width: 767px) {
  :root {
    --sp-side: clamp(24px, 6vw, 40px);
    --sp-meta-gap: clamp(12px, 3vw, 20px);
    --sp-logo-offset: clamp(44px, 9vw, 72px);
    --sp-contact-offset: clamp(80px, 18vw, 160px);
  }

  .center-content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
    text-align: left;
    max-width: 90vw;
    margin: clamp(24px, 8vw, 48px) auto 0;
    padding-left: var(--sp-side);
    padding-right: var(--sp-side);
    line-height: 1.6;
  }

  .center-content .highlight {
    font-size: 20px; /* ← 見出しを少し小さめに */
    text-align: left;
    margin-left: 0;
  }

  .center-content .lead {
    font-size: 13px;
    text-align: left;
    margin-left: 0;
  }

  .center-content .cta {
    font-size: 16px; /* ← ← Get information を小さく！ */
    text-align: left;
    margin-left: 0;
    line-height: 1.4;
  }
}

/* ===== 左下ロゴエリア（PC） ===== */
.left-info {
  position: fixed;
  left: clamp(16px, 2vw, 48px);
  bottom: calc(env(safe-area-inset-bottom, 0) + clamp(16px, 2vw, 36px));
  z-index: 15; color:#fff; font-size:16px; line-height:1.3;
  font-family: "Helvetica Neue", "Hiragino Sans","Hiragino Kaku Gothic ProN", sans-serif; text-shadow:none;
}
.left-info .address { margin: 0 0 8px 0; }
.left-info .hl { background:#00FF45; color:#0b0b0b; padding:0; border-radius:0; display:inline; }
.left-info .meta { margin:0; color:rgba(255,255,255,.9); }
.left-info .meta .sep { margin:0 8px; opacity:.75; }
.left-info .meta a{ color:rgba(255,255,255,.9); text-decoration:none; }
.left-info .meta a:hover{ opacity:.8; }


/* ===== 左下ロゴのサイズを統一 ===== */
.left-info .brand-logo {
  width: 15rem;       /* ← ここでサイズを調整（例: 160px） */
  height: auto;
  margin-bottom: 8px;
}

/* スマホは少しだけ小さく */
@media (max-width: 767px) {
  .left-info .brand-logo {
    width: 13rem;     /* ← スマホでさらに小さめに */
  }
}

/* 右下インフォ（PC） */
.right-info {
  position: fixed;
  right: clamp(16px, 2vw, 48px);
  bottom: calc(env(safe-area-inset-bottom, 0) + clamp(16px, 2vw, 36px));
  z-index: 15; text-align:right; color:rgba(255,255,255,.92);
  display:flex; flex-direction:column; justify-content:flex-end; gap:6px;
  line-height:1.3; font-size:13px; font-family: "Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif; text-shadow:none;
}
.right-info .contact-link{
  display:inline-block; margin:0; text-decoration:none; color:#fff; font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:1px; transition:opacity .2s ease; align-self:flex-end;
}
.right-info .contact-link:hover{ opacity:.75; }
.right-info .meta{ margin:0; color:rgba(255,255,255,.85); }
.right-info .meta a{ color:rgba(255,255,255,.9); text-decoration:none; }
.right-info .meta a:hover{ opacity:.8; }


.right-info .contact-link {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  font-weight: 600;
  padding-bottom: 1px;
  transition: opacity 0.2s ease;
}

.right-info .contact-link:hover {
  opacity: 0.75;
}

/* ← これを追加 */
.right-info .contact-link .contact-arrow {
  width: 14px;       /* PCでのサイズ（文字と同じ高さ） */
  height: auto;
  margin-left: 6px;  /* Contactとの間隔 */
  filter: brightness(0) invert(1); /* 白く表示 */
  vertical-align: middle;
}

/* スマホ時は少し小さく */
@media (max-width: 767px) {
  .right-info .contact-link .contact-arrow {
    width: 10px;
    margin-left: 4px;
  }
}




@media (max-width: 480px){
  .left-info, .right-info{
    bottom: calc(env(safe-area-inset-bottom, 0) + clamp(12px, 3vw, 20px));
  }
  .right-info{ right: clamp(12px, 4vw, 20px); max-width: 90vw; word-break: break-word; }
}

/* ====== レスポンシブ：タブレット ====== */
@media (max-width: 1024px) {
  .info-row { column-gap: clamp(24px, 5vw, 80px); }
  .info-col.left .subline { font-size: clamp(16px, 10vw, 60px); }
  .center-content { max-width: 100%; transform: translate(-50%, -45%); }
  .left-info .brand-logo { width: 220px; }
  .right-form { width: min(420px, 46vw); }
}

/* ===== (218.36m² / 66.05坪) の中央寄せ（スマホ） ===== */
@media (max-width: 768px) {
  .info-col.left {
    grid-column: 1 / -1; justify-self: center; text-align: center;
    margin: 0; padding: 0;
  }
  .info-col.left .subline {
    display: inline-block; width: auto;
    font-size: clamp(30px, 10vw, 64px); line-height:1.1; transform:none;
  }
}

/* ===== スマホだけ <br> を出す用途 ===== */
.sp-only { display: none; }
@media (max-width: 767px){
  .sp-only { display: inline; }
  .right-grid .details { white-space: normal; }
}

/* ===============================
   行構成（スマホ：1カラム化）
   =============================== */
@media (max-width: 767px){
  .info-row{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: clamp(10px, 2.8vw, 18px);
    /* 余白はコンテンツと統一 */
    padding-left: var(--sp-side);
    padding-right: var(--sp-side);
  }

  .info-col.left{
    grid-column: 1 / -1;
    justify-self: center; text-align: center;
    margin: 0; padding: 0;
    margin-bottom: clamp(40px, 12vw, 90px);
  }
  .info-col.left .subline{
    display: block; width: 100vw;
    position: relative; left: 46vw; transform: translateX(-50%);
    text-align: center; line-height: 1.05; font-weight: 400; letter-spacing: .02em;
  }

  .info-col.center,
  .info-col.right{
    grid-column: 1 / -1;
    /* 親の左右余白と被らないように0（内側の文言は自然に折り返す） */
    padding: 0;
  }

  /* ── SHOP 行（左：見出し / 右：説明） ── */
  .center-grid{
    display: grid;
    grid-template-columns: minmax(7.5ch, max-content) 1fr;
    column-gap: clamp(12px, 3.5vw, 20px);
    row-gap: 6px; align-items: start; text-align: left;
  }
  .center-grid .label{
    grid-column: 1 / -1; margin: 0 0 .35em 0; font-size: 12px; line-height: 1.2;
  }
  .center-grid .main{
    grid-column: 1; font-weight: 800; font-size: clamp(22px, 6.4vw, 32px);
    line-height: 1.1; white-space: nowrap; margin: 0;
  }
  .center-grid .details{
    grid-column: 2; font-size: 13px; line-height: 1.45; margin: 0; color: #ccc; min-width: 0;
  }

/* === SP: 「(面積)」→「Plan」を詰める決定版 === */
@media (max-width: 767px){

  /* 行全体の上余白も少しだけ縮める（任意） */
  .info-row{
    padding-top: clamp(0px, 1.5vw, 8px);
  }

  /* 面積ブロックの“下マージン”を大幅に縮小（←これが一番効く） */
  .info-col.left{
    margin-bottom: clamp(8px, 3vw, 16px);   /* 既存: clamp(40px, 12vw, 90px) → 小さく */
  }

  /* “Plan” ラベルの下げオフセットをリセットして上に寄せる */
  .center-grid .label{
    top: 0;
  }

  /* 行内の上下ギャップも少しだけ詰める（微調整） */
  .center-grid{
    row-gap: 2px;      /* 既存よりタイトに */
  }
}

  /* ── OFFICE 行も同じ2カラム ── */
  .right-grid{
    display: grid;
    grid-template-columns: minmax(7.5ch, max-content) 1fr;
    column-gap: clamp(12px, 3.5vw, 20px);
    row-gap: 6px; align-items: start; text-align: left;
  }
  .right-grid .main{
    grid-column: 1; font-weight: 800; font-size: clamp(22px, 6.4vw, 32px);
    line-height: 1.1; white-space: nowrap; margin: 0;
  }
  .right-grid .details{
    grid-column: 2; font-size: 13px; line-height: 1.45; margin: 0; color: #ccc; white-space: normal;
  }
  .right-grid .details .soon{ display:block; margin-bottom: 2px; }
}

/* ===== スマホ：フッター配置 & 縦バナー ===== */
@media (max-width: 767px){
  /* 左：ロゴ＋住所 → 会社インフォの少し上に固定（左ラインは --sp-side） */
  .left-info{
    position: fixed;
    left: var(--sp-side); right: auto;
    bottom: calc(var(--sp-meta-gap) + var(--sp-logo-offset));
    width: auto; margin: 0; padding: 0;
    text-align: left; align-items: flex-start; z-index: 45;
  }
  .left-info .brand-logo{ width: 13rem; margin: 0 0 6px 0; }
  .left-info .address{ margin: 0 0 4px 0; }

  /* 右：会社インフォ → 左下いちばん下に固定（左ラインは --sp-side） */
  .right-info{
    position: fixed;
    left: var(--sp-side); right: auto;
    bottom: var(--sp-meta-gap);
    width: auto; margin: 0; padding: 0;
    text-align: left; align-items: flex-start; z-index: 40;
  }
  .right-info .contact-link{ display: none; } /* SPは縦バナーに統一 */

  /* 右サイド縦バナー「お問い合わせ」 → さらに上に固定 */
  .contact-button{
    display: flex; position: fixed; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0) + var(--sp-contact-offset));
    width: 48px; background:#fff; color:#000; text-decoration:none;
    border-radius: 0; box-shadow: 0 0 8px rgba(0,0,0,0.2);
    z-index: 50; padding: 8px 0; flex-direction: column; align-items:center; justify-content:center;
  }
  .contact-button .icon { font-size: 18px; margin-bottom: 4px; }
  .contact-button .label { writing-mode: vertical-rl; text-orientation: mixed; font-size: 12px; letter-spacing: 1px; }
  .contact-button:hover { background: #00FF45; color: #000; transition: 0.3s; }
}
@media (max-width: 767px){
  .contact-button .label {
    font-size: 14px;   /* ← center-content の lead と近いサイズに調整 */
    letter-spacing: 0.5px;
  }
}

@media (max-width: 767px) {
  .left-info .address {
    font-size: 14px;    /* ← スマホ時のみ14pxに変更 */
    line-height: 1.4;   /* ← 行間も少し広げて自然に */
  }
}

@media (max-width: 767px){
  .contact-button{
    display: flex;
    flex-direction: column;        /* 上から下へ積む */
    align-items: center;           /* 中央揃え */
    justify-content: center;

    position: fixed;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0) + 40px);

    width: 48px;
    background: #fff;
    color: #000;
    text-decoration: none;
    border-radius: 0;
    box-shadow: 0 0 8px rgba(0,0,0,0.2);
    z-index: 50;
    padding: 8px 0;
  }

  /* 縦書きのテキストだけに writing-mode を当てる */
  .contact-button .vtext{
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 14px;               /* 文字サイズ */
    letter-spacing: 1px;
    line-height: 1.2;
  }

  /* 文字の“下”に来る矢印 */
  .contact-button .arrow-icon{
    width: 14px;                   /* 文字と釣り合う高さに */
    height: auto;
    margin-top: 6px;               /* 文字との間隔 */
    object-fit: contain;
    display: block;
  }

  /* お好み：ホバー時の配色 */
  .contact-button:hover{ background:#00FF45; color:#000; transition:.3s; }
}