@charset "utf-8";

/* =========================================================
   TABILION コーポレートサイト
   PC 1440px のデザインを基準に実装。SP は 768px 未満で成り行き対応。
   ========================================================= */

/* ---------- フォント ----------
   Google Fonts 配信は日本語だと分割 woff2 を 40 以上（計 800KB 弱）引いて
   PageSpeed の FCP に丸ごと計上されるため、使用文字のサブセットを自前配信する。
   woff2 の再生成はリポジトリ親フォルダの make_font_subset.py（文言を大きく
   変えたら再実行。サブセットに無い字はシステムフォントで出る）。 */
@font-face {
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-400.woff2") format("woff2");
}

@font-face {
  font-family: "Noto Sans JP";
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/noto-sans-jp-700.woff2") format("woff2");
}

/* ---------- 変数 ---------- */
:root {
  /* ブランドカラー */
  --navy: #0a2241;
  --navy-deep: #002f47;
  --gold: #c19962;

  /* 背景 */
  --bg-grey: #eeeded;
  --bg-note: #e9f3ff;
  --bg-blue: #e9f3ff;
  --bg-cream: #fff6ed;

  /* 申し込みボタン */
  --cta: #ff8c00;

  /* オンライン説明会ボタン。申し込みのオレンジと役割を分けるための深い緑。
     白文字とのコントラスト比 4.4:1 で、オレンジ（2.3:1）より読みやすい。 */
  --cta-briefing: #17876b;

  /* アクセント（アイコン円・見出し） */
  --teal: #00a9a8;
  --red: #ff6b6b;
  --yellow: #ffb703;
  --blue: #037dff;
  --sage: #8aa9a8;

  /* 企業理念の TABI 4 文字 */
  --tabi-t: #ff8c00;
  --tabi-a: #06bc00;
  --tabi-b: #005ace;
  --tabi-i: #e7c901;

  /* レイアウト */
  --content: 1000px;
  --gutter: 20px;
  --radius: 20px;
  --shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
  --shadow-strong: 10px 10px 20px rgba(0, 0, 0, 0.25);
  --header-h: 108px;
}

/* ---------- リセット ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul,
li,
figure {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---------- ベース ---------- */
html {
  scroll-behavior: smooth;
  /* 固定ヘッダー分だけアンカー位置をずらす */
  scroll-padding-top: var(--header-h);
}

body {
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.375; /* 16px / lh22 */
  color: var(--navy);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

/* ---------- レイアウト ---------- */
.l-container {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-section {
  padding: 70px 0 80px;
}

.l-section--grey {
  background: var(--bg-grey);
}

.l-section--cream {
  background: var(--bg-cream);
}

.l-section--blue {
  background: var(--bg-blue);
}

/* セクション内の縦リズム（Figma の gap 32 相当） */
.l-section__inner > * + * {
  margin-top: 32px;
}

/* =========================================================
   ヘッダー
   ========================================================= */
.p-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 120px;
  background: #fff;
}

.p-header__logo img {
  width: 270px;
  height: auto;
  /* ロゴ画像は白背景が焼き込まれている。
     Figma でも乗算合成しているので、同じ指定で背景に馴染ませる。 */
  mix-blend-mode: multiply;
}

.p-header__nav ul {
  display: flex;
  align-items: center;
  gap: 24px;
}

.p-header__nav a {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3571429; /* Figma の実測行高 19px に合わせる */
  transition: color 0.2s;
}

.p-header__nav a:hover {
  color: var(--gold);
}

/* LP のヘッダーはナビの代わりに申し込みボタンを置く */
.p-header__cta .c-cta {
  min-width: 348px;
  padding: 22px;
}

/* SP メニュー開閉ボタン（PC では非表示） */
.p-header__toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
}

.p-header__toggle span {
  display: block;
  height: 2px;
  background: var(--navy);
  transition: transform 0.25s, opacity 0.25s;
}

.p-header__toggle span + span {
  margin-top: 6px;
}

/* =========================================================
   ヒーロー
   ========================================================= */
.p-hero {
  position: relative;
  height: 660px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.p-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.p-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Figma は 1440x1080 の写真を上下中央でトリミングしている */
  object-position: center center;
}

/* 写真の上に黒 15% を重ねて文字を読みやすくする */
.p-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}

.p-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 120px;
}

.p-hero__title {
  font-size: 108px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

/* 1 行ずつ白 60% の帯を敷く */
.p-hero__title span {
  display: table; /* 文字幅ぴったりの帯にする */
  padding-bottom: 8px;
  background: rgba(255, 255, 255, 0.6);
}

.p-hero__title span + span {
  margin-top: 24px;
}

.p-hero__title em {
  font-style: normal;
  color: var(--gold);
}

.p-hero__lead {
  margin-top: 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4167; /* 24 / lh34 */
  color: #fff;
}

/* =========================================================
   共通パーツ
   ========================================================= */

/* 見出しブロック（英語の小見出し＋日本語見出し） */
.c-heading {
  text-align: center;
}

.c-heading__eyebrow {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gold);
}

.c-heading__title {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.40625; /* 32 / lh45 */
}

/* 小見出しがある場合だけ間隔を空ける。
   無条件に margin-top を持たせると、小見出しのないセクションで
   マージンが親からはみ出して（相殺して）位置がずれる。 */
.c-heading__eyebrow + .c-heading__title {
  margin-top: 12px;
}

/* セクションのリード文（40px） */
.c-lead {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4; /* 40 / lh56 */
  text-align: center;
}

/* 補足の帯（薄青の囲み） */
.c-note {
  padding: 16px 24px;
  background: var(--bg-note);
  font-size: 16px;
  line-height: 1.375;
}

/* 申し込みボタン（オレンジのピル型） */
.c-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 348px;
  /* Figma のボーダーは内側描画なので、border 分を padding から引いて
     全体を 348x68 に合わせる（22 + 2 = Figma の pad 24） */
  padding: 22px;
  border: 2px solid #fff;
  border-radius: 40px;
  background: var(--cta);
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: filter 0.2s, transform 0.2s;
}

.c-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* オンライン説明会ボタン。大きさは申し込みボタンと同じで、色だけ変える */
.c-cta--briefing {
  background: var(--cta-briefing);
}

/* お問い合わせボタン。申し込みボタンより一段小さく、色はフッターと同じ紺 */
.c-cta--sub {
  min-width: 280px;
  padding: 16px;
  background: var(--navy);
  font-size: 17px;
}

/* フォームの URL が未設定のあいだ（見た目は同じまま、押せない） */
.c-cta.is-pending {
  cursor: default;
}

.c-cta.is-pending:hover {
  filter: none;
  transform: none;
}

/* 区切り線
   Figma 側は高さ 0 のベクターに 1px の線が乗っている。
   height:1px にすると線の分だけ以降が下にずれるので、
   レイアウトを占有しない box-shadow で 1px の線を描く。 */
.c-divider {
  height: 0;
  border: 0;
  box-shadow: 0 0 0 0.5px var(--navy);
}

/* 「／」区切りで並ぶ住所・連絡先。
   PC は 1 行に並べ、SP（767px 以下）では区切りを消して項目ごとに改行する。
   16px のままだと住所 1 項目が 375px の本文幅（343px）に収まらないため、
   SP では呼び出し側で font-size も落とす。 */
.c-inline-list__sep {
  white-space: nowrap;
}

/* アイコン円 */
.c-circle {
  flex: none;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--circle-color, var(--teal));
}

.c-circle img {
  width: 63px;
  height: 64px;
  object-fit: contain;
}

/* =========================================================
   企業理念（TABI の 4 文字）
   ========================================================= */
.p-vision__tabi {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.p-vision__item {
  width: 200px;
  text-align: center;
}

.p-vision__letter {
  font-size: 140px;
  font-weight: 700;
  line-height: 1;
  color: var(--letter-color);
}

.p-vision__word {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.375;
}

.p-vision__word em {
  font-style: normal;
  color: var(--letter-color);
}

.p-vision__closing {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* リード文中の TABI 4 文字 */
.c-lead em {
  font-style: normal;
}

.c-lead em:nth-of-type(1) { color: var(--tabi-t); }
.c-lead em:nth-of-type(2) { color: var(--tabi-a); }
.c-lead em:nth-of-type(3) { color: var(--tabi-b); }
.c-lead em:nth-of-type(4) { color: var(--tabi-i); }

/* =========================================================
   カード（事業内容・社会貢献）
   ========================================================= */
.c-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

.c-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 16px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.c-card__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* 社会貢献①②のカードは見出しも本文も左揃え */
.c-card--start .c-card__title {
  text-align: left;
  align-self: stretch;
}

.c-card__text {
  align-self: stretch;
  font-size: 16px;
  line-height: 1.375;
}

/* 濃紺カード（関係人口創出の 3 ステップ） */
.c-card--navy {
  gap: 12px;
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-strong);
}

.c-card--navy .c-card__step {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3889; /* 36 / lh50 */
}

.c-card--navy .c-card__label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--gold);
}

.c-card--navy .c-card__text {
  text-align: center;
}

/* =========================================================
   事業詳細（セクション 05）
   ========================================================= */
.p-detail + .p-detail {
  margin-top: 32px;
}

/* 事業名の見出し（円＋タイトル） */
.p-detail__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 44px;
}

.p-detail__name {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.40625;
  color: var(--accent);
}

/* 2 カラムの説明 */
.p-detail__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.p-detail__col-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--col-color, var(--navy));
}

.p-detail__col-text {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.375;
}

/* モデル名のラベル */
.p-detail__model {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--model-color, var(--navy));
}

.p-detail__text {
  font-size: 16px;
  line-height: 1.375;
}

/* =========================================================
   お金・サービスの流れ図
   ========================================================= */
.c-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.c-flow--tight {
  gap: 4px;
}

.c-flow__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 16px 12px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.c-flow__label {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* 矢印＋注記 */
.c-flow__arrow {
  flex: none;
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.c-flow__arrow svg {
  width: 50px;
  height: 45px;
  fill: var(--navy);
}

.c-flow__arrow span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4167; /* 12 / lh17 */
  text-align: center;
}

/* =========================================================
   会社概要
   ========================================================= */
.p-company__logo {
  display: flex;
  justify-content: center;
}

.p-company__logo img {
  width: 362px;
  mix-blend-mode: multiply;
}

.p-company__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.p-company__address {
  font-size: 16px;
  line-height: 1.375;
  text-align: center;
}

/* =========================================================
   フッター
   ========================================================= */
.p-footer {
  padding: 40px 0;
  background: var(--navy);
  color: #fff;
}

.p-footer__nav ul {
  display: flex;
  justify-content: center;
  gap: 48px;
}

.p-footer__nav a {
  /* インライン要素のままだと li の行ボックス（本文の line-height）に
     引きずられて高さが増えるため、ブロックにして 18px に揃える */
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3571429; /* Figma の実測行高 19px に合わせる */
  transition: color 0.2s;
}

.p-footer__nav a:hover {
  color: var(--gold);
}

.p-footer__copyright {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.3571429; /* Figma の実測行高 19px に合わせる */
  text-align: center;
}

/* =========================================================
   ページトップへ戻るボタン
   ========================================================= */
/* 一定量スクロールしたら右下に出す。
   ネイビーのフッターに重なっても輪郭が消えないよう白フチを付ける。
   スクロール自体は html の scroll-behavior: smooth に任せる。 */
.c-pagetop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90; /* 本文より手前、ヘッダー（100）より奥 */
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  /* 非表示のときはボタンとして拾わせない */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.2s;
}

.c-pagetop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.c-pagetop:hover {
  background: var(--navy-deep);
}

.c-pagetop svg {
  width: 20px;
  height: 20px;
  /* 矢印の重心を光学的に中央へ寄せる */
  margin-top: -2px;
}

/* =========================================================
   流れ図の縦積み（〜1039px）
   横並びのままだとアイコン円 120px よりカードが狭くなって潰れるため、
   本文用の SP ブレークポイント（767px）より早く縦積みに切り替える。
   ========================================================= */
@media (max-width: 1039px) {
  .c-flow {
    flex-direction: column;
    gap: 12px;
  }

  .c-flow--tight {
    gap: 12px;
  }

  .c-flow__card {
    flex: none;
    width: 100%;
    max-width: 280px;
  }

  .c-flow__arrow {
    width: auto;
    max-width: 280px;
  }

  .c-flow__arrow svg {
    transform: rotate(90deg);
  }
}

/* =========================================================
   タブレット（〜1200px）
   1000px の内容が収まらなくなる領域を先に緩める
   ========================================================= */
@media (max-width: 1200px) {
  .p-header {
    padding: 15px 40px;
  }

  .p-hero__inner {
    padding: 0 40px;
  }

  .p-hero__title {
    font-size: 80px;
  }

  .p-vision__letter {
    font-size: 110px;
  }
}

/* =========================================================
   スマートフォン（〜767px）
   PC デザインからの成り行き対応
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --header-h: 64px;
    --gutter: 16px;
  }

  /* ---- ヘッダー ---- */
  .p-header {
    padding: 8px 16px;
  }

  .p-header__logo img {
    width: 180px;
  }

  .p-header__toggle {
    display: block;
  }

  .p-header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    /* 閉じている状態 */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease;
  }

  .p-header__nav > ul {
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .p-header__nav a {
    display: block;
    padding: 16px;
    border-top: 1px solid var(--bg-grey);
    font-size: 15px;
  }

  .p-header.is-open .p-header__nav {
    grid-template-rows: 1fr;
  }

  .p-header.is-open .p-header__toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .p-header.is-open .p-header__toggle span:nth-child(2) {
    opacity: 0;
  }

  .p-header.is-open .p-header__toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ---- ヒーロー ---- */
  .p-hero {
    height: 480px;
  }

  .p-hero__inner {
    padding: 0 16px;
  }

  .p-hero__title {
    font-size: 40px;
  }

  .p-hero__title span {
    padding-bottom: 4px;
  }

  .p-hero__title span + span {
    margin-top: 8px;
  }

  .p-hero__lead {
    margin-top: 16px;
    font-size: 16px;
  }

  /* ---- セクション共通 ---- */
  .l-section {
    padding: 48px 0 56px;
  }

  .l-section__inner > * + * {
    margin-top: 24px;
  }

  .c-heading__eyebrow {
    font-size: 16px;
  }

  .c-heading__title {
    margin-top: 8px;
    font-size: 24px;
  }

  .c-lead {
    font-size: 24px;
  }

  /* ---- 企業理念 ---- */
  .p-vision__tabi {
    flex-wrap: wrap;
    gap: 16px 8px;
  }

  .p-vision__item {
    width: calc(50% - 4px);
  }

  .p-vision__letter {
    font-size: 80px;
  }

  .p-vision__word {
    font-size: 14px;
  }

  .p-vision__closing {
    font-size: 16px;
    text-align: left;
  }

  /* ---- カード ---- */
  .c-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .c-card {
    padding: 20px 16px;
  }

  /* ---- 事業詳細 ---- */
  .p-detail__head {
    flex-direction: column;
    gap: 16px;
  }

  .p-detail__name {
    font-size: 22px;
    text-align: center;
  }

  .p-detail__cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 流れ図の縦積みは 1039px 以下のブロックで指定済み */

  /* ---- 会社概要 ---- */
  .p-company__logo img {
    width: 260px;
  }

  .p-company__address {
    font-size: 14px;
  }

  /* ---- 「／」区切りの住所・連絡先 ---- */
  .c-inline-list__item {
    display: block;
  }

  .c-inline-list__sep {
    display: none;
  }

  /* ---- フッター ---- */
  .p-footer__nav ul {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* ---- ページトップ ---- */
  .c-pagetop {
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
  }

  .c-pagetop svg {
    width: 18px;
    height: 18px;
  }
}

/* 動きを減らす設定のときはスクロールもフェードも即時に */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .c-pagetop {
    transition: none;
  }
}