@charset "UTF-8";
/* ==========================================================================
   株式会社ライブグッド｜準備中ページ  style.css
   設計方針
   - 色はロゴPNGから実測サンプリング（Blue #2461AD / Black #000000）。推測値は使わない。
   - 角丸を一切使わない。LGマークが直角とブロックで構成されているため、面・罫・
     ブロックもすべて直角で統一する（ブランドの幾何の再利用）。
   - 外部フォント／外部CDNは参照しない。システムフォントスタックで組む。
   ========================================================================== */

/* --------------------------------------------------
   1. トークン（ブランド変数）
   -------------------------------------------------- */
:root{
  /* ブランド実測色 */
  --c-blue:        #2461AD;   /* ロゴ G・Good の青（実測） */
  --c-blue-deep:   #17457F;   /* 濃青：フォーカスリング等の限定用途 */
  --c-blue-line:   #D3DFEF;   /* 青20%相当の細罫 */
  --c-blue-tint:   #EEF2F8;   /* 青8%相当の面 */
  --c-black:       #000000;   /* ロゴ L・Live の黒（実測） */

  /* UI色 */
  --c-bg:          #FFFFFF;
  --c-bg-2:        #FAFBFD;   /* ごく淡い下地（青みを1%だけ含ませ、ロゴの青と喧嘩させない） */
  --c-surface:     #F5F7FA;   /* マークを載せる面 */
  --c-ink:         #0B0D10;   /* 見出し：ロゴの黒に寄せたほぼ黒（白地 19.5:1 / L* 3.6） */
  --c-body:        #4E5661;   /* 本文：白地でコントラスト約7:1（L* 36.2） */
  /* 補助テキスト（ドメイン・英文・フッター）。旧 #8A929C は下地 #FAFBFD 上で 3.04:1 しかなく
     WCAG AA（通常サイズ 4.5:1）を満たさなかったため、同じ色相・彩度のまま明度だけ下げた。
     ・色相/彩度は据え置き＝新しい色を1色も足していない（色数を絞る方針の維持）
     ・最悪条件（下地 #FAFBFD）で 5.13:1、白地 5.31:1、面 #EEF2F8 上でも 4.73:1 ＝すべてAA合格
     ・L* 45.3。本文(L* 36.2)より約9ポイント明るく、主役より一段下がった階層は保つ。 */
  --c-mute:        #646C77;
  --c-line:        #E3E6EA;   /* 罫 */

  /* タイポ */
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;

  /* 余白（8pxグリッド） */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  /* レイアウト */
  --page-max: 1200px;
  --page-pad: 24px;

  /* マークを載せる面の高さ（確定値で持つ。%指定は aspect-ratio 箱の中で解決されず
     マークがはみ出す実害が出たため、面の高さを基準にマークの寸法を calc で従属させる） */
  --plate-h: clamp(220px, 64vw, 280px);
  --plate-mark: .60;   /* 面の高さに対するマークの高さ比（横長の帯では大きめに） */
}

/* --------------------------------------------------
   2. リセット／基礎
   -------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  /* 日本語を文節で折り返す（不自然な行頭・行末を防ぐ） */
  word-break: auto-phrase;
}

body{
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%);
  color: var(--c-body);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, h1, h2, p, dl, dd{ line-break: strict; }
h1, h2, p, dl, dd, dt{ margin: 0; }
img{ max-width: 100%; height: auto; display: block; }

a{ color: var(--c-blue); text-underline-offset: .2em; }
a:hover{ color: var(--c-blue-deep); }

:focus-visible{
  outline: 2px solid var(--c-blue-deep);
  outline-offset: 3px;
}

/* --------------------------------------------------
   3. ページ骨格（上バー／本体／下フッター の3段）
   -------------------------------------------------- */
.sheet{
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.bar__inner,
.hero__inner,
.foot__inner{
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* --- 上バー：ロゴとドメインのみ --- */
.bar{
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--sp-3);
}
.bar__inner{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
/* 罫の左端に短い青のセグメントを重ねる（ロゴの青を面ではなく“線”で1点だけ効かせる） */
.bar__inner::after{
  content: "";
  position: absolute;
  left: var(--page-pad);
  bottom: calc(var(--sp-3) * -1 - 1px);
  width: 88px;
  height: 2px;
  background: var(--c-blue);
}
.bar__logo{
  width: auto;
  height: 26px;                 /* 横型ロゴは高さ基準で管理（伸び防止のため width:auto） */
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}
.bar__domain{
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--c-mute);
  white-space: nowrap;
}

/* --- 本体 --- */
.hero{
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: var(--sp-6);
}
.hero__inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}

/* --------------------------------------------------
   4. メッセージ側
   -------------------------------------------------- */
.eyebrow{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--sp-3);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .18em;
  color: var(--c-ink);
  font-weight: 700;
}
/* 小さな青の正方形：マークのブロック単位（直角）を最小サイズで反復させた印 */
.eyebrow__block{
  width: 8px;
  height: 8px;
  background: var(--c-blue);
  flex: none;
}
.eyebrow__ja{
  padding-left: 12px;
  border-left: 1px solid var(--c-line);
  letter-spacing: .16em;
  font-weight: 500;
  color: var(--c-mute);
}

.title{
  /* 「〜の／ウェブサイトを準備しています。」の2行で収まる上限に抑える。
     大きくすると3行目に「準備しています。」だけが落ち、右側が大きく空いて締まらない。 */
  font-size: clamp(21px, 2.55vw, 34px);
  line-height: 1.62;
  letter-spacing: .01em;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--sp-3);
}

/* 本文はカラム幅いっぱいまで流す（極端に短く折り返して右を空けない） */
.lead{
  font-size: 15px;
  line-height: 2.05;
  color: var(--c-body);
  max-width: 100%;
}

.en{
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--c-mute);
}

/* --- 会社情報スロット（現在はHTML側でコメントアウト。届きしだい表示） --- */
.info{
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-blue-tint);
  border-left: 3px solid var(--c-blue);
}
.info__title{
  font-size: 12px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.info__list{ font-size: 14px; line-height: 1.9; }
.info__row{
  display: grid;
  grid-template-columns: 6.5em 1fr;
  gap: var(--sp-2);
  padding-block: 4px;
}
.info__row dt{ color: var(--c-mute); }
.info__row dd{ color: var(--c-ink); }

/* --------------------------------------------------
   5. ロゴマークの面（右）
   -------------------------------------------------- */
.plate{
  position: relative;
  margin: 0;
  height: var(--plate-h);            /* 確定高さ（狭い画面では横長の帯になる） */
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 角のブロック：黒＝L、青＝G。ロゴの2色をページの四隅の構造として反復する。 */
.plate__block{ position: absolute; width: 32px; height: 32px; }
.plate__block--ink{  top: 0;    left: 0;  background: var(--c-black); }
.plate__block--blue{ bottom: 0; right: 0; background: var(--c-blue); }

.plate__mark{
  width: auto;
  /* 高さ基準で置く＝マークの縦横比を絶対に崩さない */
  height: calc(var(--plate-h) * var(--plate-mark));
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* --------------------------------------------------
   6. フッター
   -------------------------------------------------- */
.foot{
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-3);
}
.foot__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--c-mute);
}
.foot__status{ letter-spacing: .12em; white-space: nowrap; }

/* --------------------------------------------------
   7. レスポンシブ
   -------------------------------------------------- */

/* タブレット以上：面を少し大きく、余白を広げる */
@media (min-width: 600px){
  :root{
    --page-pad: 40px;
    --plate-h: clamp(300px, 42vw, 400px);
  }
  .bar__logo{ height: 30px; }
  .plate__block{ width: 40px; height: 40px; }
}

/* PC：左＝メッセージ／右＝マークの面 の2カラム。中央のドンと置きを避ける。 */
@media (min-width: 960px){
  :root{
    --page-pad: 56px;
    --plate-h: clamp(420px, 36vw, 540px);
    --plate-mark: .52;   /* 縦長の面では控えめに置き、余白で見せる */
  }

  .bar{ padding-block: var(--sp-4); }
  .bar__inner::after{ bottom: calc(var(--sp-4) * -1 - 1px); }
  .bar__logo{ height: 34px; }

  .hero{ padding-block: var(--sp-7); }
  .hero__inner{
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: var(--sp-7);
  }

  .title{ margin-bottom: var(--sp-4); }
  .lead{ font-size: 16px; }

  .plate__block{ width: 44px; height: 44px; }

  .foot{ padding-block: var(--sp-4); }
}

@media (min-width: 1280px){
  .hero__inner{ gap: 120px; }
}

/* --------------------------------------------------
   8. その他の環境配慮
   -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  @keyframes lg-rise{
    from{ opacity: 0; transform: translateY(12px); }
    to{   opacity: 1; transform: translateY(0); }
  }
  .hero__body{ animation: lg-rise .8s cubic-bezier(.2,.7,.3,1) both; }
  .hero__visual{ animation: lg-rise .8s cubic-bezier(.2,.7,.3,1) .12s both; }
}

@media print{
  body{ background: #FFF; }
  .plate{ break-inside: avoid; }
}