/* ============================================================
   style.css ／ 見た目（デザイン）を担当するファイル
   ============================================================
   ■ 読み方の基本
     セレクタ { プロパティ: 値; }
     例）  h1 { color: red; }  →「h1タグの文字を赤にして」

     ・ .hero  … 頭にドットが付くのは class（HTML側で class="hero" と書いたもの）
     ・ #about … 頭にシャープが付くのは id（ページ内に1つだけの目印）

   ■ 数値の単位
     px  … 絶対的な大きさ（16px = 約16ドット）
     rem … 基準文字サイズの倍数（1rem = 16px。拡大縮小に強いのでこちらを多用）
     %   … 親要素に対する割合

   ■ 色の変え方
     一番下ではなく、すぐ下の :root にまとめてあります。
     そこの色コードを書き換えるだけで、サイト全体の色が一気に変わります。
   ============================================================ */


/* ---------- ① カラー設定（ここだけ変えれば全体の色が変わる） ---------- */
:root {
  --color-main:    #0f2a44;  /* メインの濃紺。ロゴやボタンに使用 */
  --color-accent:  #e8622a;  /* アクセントのオレンジ。目立たせたい所だけに */
  --color-text:    #1c2b36;  /* 本文の文字色。真っ黒より少し柔らかい */
  --color-muted:   #61707c;  /* 補足文の文字色（少し薄いグレー） */
  --color-bg:      #ffffff;  /* 背景の白 */
  --color-bg-gray: #f5f7f9;  /* セクションを区切るための薄いグレー */
  --color-line:    #dfe5ea;  /* 罫線の色 */
  --radius:        10px;     /* 角の丸み。大きくすると柔らかい印象に */
}


/* ---------- ② 全体のリセットと土台 ---------- */

/* すべての要素に共通で適用する設定。* は「全部」の意味 */
* {
  margin: 0;                 /* ブラウザが勝手につける余白を消す */
  padding: 0;
  box-sizing: border-box;    /* 幅の計算を直感的にする定番のおまじない */
}

body {
  /* フォント指定。左から順に「あれば使う」。日本語環境で自然に見える並び */
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--color-text);        /* var(--○○) で ①で決めた色を呼び出す */
  background: var(--color-bg);
  line-height: 1.9;                /* 行間。日本語は 1.8〜2.0 が読みやすい */
  font-size: 16px;
  -webkit-font-smoothing: antialiased;  /* Macで文字を滑らかに */
}

/* リンクの下線と色を一旦リセット（個別に指定していく） */
a {
  color: inherit;
  text-decoration: none;
}

/* 中央寄せの共通枠。max-width で「広がりすぎ」を防ぐのがコツ */
.container {
  width: 100%;
  max-width: 1040px;   /* これ以上は横に広がらない */
  margin: 0 auto;      /* 左右autoで中央寄せ */
  padding: 0 24px;     /* スマホで端に文字がくっつかないための余白 */
}


/* ---------- ③ ヘッダー ---------- */

.header {
  position: sticky;        /* スクロールしても上に貼りつく */
  top: 0;
  z-index: 100;            /* 他の要素より手前に表示 */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);              /* 背後をすりガラス風にぼかす */
  border-bottom: 1px solid var(--color-line);
}

.header__inner {
  display: flex;                   /* 中身を横並びにする（超重要な指定） */
  align-items: center;             /* 縦方向を中央でそろえる */
  justify-content: space-between;  /* 左端と右端に振り分ける */
  height: 68px;
}

.header__logo {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.14em;   /* 文字と文字の間隔。ロゴは広げると品が出る */
  color: var(--color-main);
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 26px;                /* 並んだ要素の間隔。marginより楽で確実 */
  font-size: 0.9rem;
}

/* :hover = マウスを乗せたときだけ適用されるスタイル */
.header__nav a:hover {
  color: var(--color-accent);
}

.header__cta {
  background: var(--color-main);
  color: #fff;
  padding: 9px 18px;
  border-radius: 999px;     /* 極端に大きい値を入れると完全な楕円になる */
}

.header__cta:hover {
  background: var(--color-accent);
  color: #fff;
}


/* ---------- ④ ヒーロー（最初の一枚） ---------- */

.hero {
  /* linear-gradient = グラデーション。斜め135度に2色を流している */
  background: linear-gradient(135deg, #0f2a44 0%, #1d4c73 100%);
  color: #fff;
  padding: 110px 0 100px;   /* 上110px / 左右0 / 下100px の余白 */
}

.hero__eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  opacity: 0.7;             /* 透明度70%。控えめにしたい文字に便利 */
  margin-bottom: 22px;
}

.hero__title {
  font-size: clamp(2rem, 6vw, 3.4rem);
  /* clamp(最小, 可変, 最大) … 画面幅に応じて文字サイズが自動で伸縮する魔法。
     スマホでは2rem、大画面では3.4rem、その間はなめらかに変化します */
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 26px;
}

.hero__lead {
  font-size: 1.02rem;
  max-width: 620px;         /* 一行が長すぎると読みにくいので幅を制限 */
  opacity: 0.92;
  margin-bottom: 38px;
}

.hero__lead strong {
  color: #ffd0b8;           /* 強調部分だけ淡いオレンジに */
}

.hero__buttons {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;          /* 幅が足りなければ折り返す（スマホ対策） */
}


/* ---------- ⑤ ボタン（使い回す部品） ---------- */

.button {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: all 0.25s;    /* 変化を0.25秒かけて滑らかに。無いとパッと切り替わる */
}

.button--primary {
  background: var(--color-accent);
  color: #fff;
}

.button--primary:hover {
  transform: translateY(-2px);   /* 2px上に浮かせる */
  box-shadow: 0 8px 20px rgba(232, 98, 42, 0.35);
  color: #fff;
}

.button--ghost {
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
}

.button--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.button--large {
  padding: 17px 44px;
  font-size: 1.02rem;
}


/* ---------- ⑥ セクション共通 ---------- */

.section {
  padding: 90px 0;          /* 各ブロックの上下の余白。ここが窮屈だと素人っぽく見える */
}

.section--gray {
  background: var(--color-bg-gray);
}

.section--dark {
  background: var(--color-main);
  color: #fff;
}

.section__label {
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: 10px;
}

.section__title {
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 34px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--color-line);   /* 見出しの下線 */
}

.prose p {
  max-width: 780px;
  margin-bottom: 20px;
}

.prose strong {
  color: var(--color-main);
  border-bottom: 2px solid #ffd9c8;   /* マーカーを引いたような下線 */
}


/* ---------- ⑦ カード（横並びのブロック） ---------- */

.cards {
  display: grid;   /* grid = 格子状に並べるレイアウト。今のWebの主役 */
  /* auto-fit + minmax = 「最低280px、入るだけ横に並べ、入らなければ自動で折り返せ」
     この一行だけでスマホ対応が完了します。とても便利な書き方 */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 44px;
}

.card {
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: all 0.25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(15, 42, 68, 0.09);
  border-color: #c9d4dd;
}

.card__num {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-accent);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}

.card__title {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--color-main);
  margin-bottom: 12px;
  line-height: 1.6;
}

.card__text {
  font-size: 0.93rem;
  color: var(--color-muted);
}


/* ---------- ⑧ 番号つきリスト（3つの強み） ---------- */

.steps {
  list-style: none;    /* デフォルトの「1.」を消して自作の番号に差し替える */
  counter-reset: step; /* カウンターを0にリセット */
  margin-top: 10px;
}

.steps__item {
  counter-increment: step;   /* 項目ごとに1ずつ増やす */
  position: relative;        /* 番号を絶対配置する土台 */
  padding: 26px 0 26px 74px; /* 左に74pxあけて番号を置くスペースを作る */
  border-bottom: 1px solid var(--color-line);
}

/* ::before = その要素の「直前」に中身を差し込む疑似要素 */
.steps__item::before {
  content: counter(step, decimal-leading-zero);  /* 01, 02, 03 の形式で出力 */
  position: absolute;
  left: 0;
  top: 26px;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--color-accent);
  opacity: 0.5;
}

.steps__title {
  font-size: 1.05rem;
  color: var(--color-main);
  margin-bottom: 6px;
}

.steps__text {
  font-size: 0.93rem;
  color: var(--color-muted);
}

.quote {
  margin-top: 48px;
  padding: 26px 30px;
  border-left: 4px solid var(--color-accent);   /* 左だけ太い線を引く */
  background: var(--color-bg-gray);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-main);
  border-radius: 0 var(--radius) var(--radius) 0;  /* 右側だけ角丸に */
}


/* ---------- ⑨ 表（会社概要） ---------- */

.table {
  width: 100%;
  border-collapse: collapse;   /* セルの線の重なりを1本にまとめる */
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;            /* 角丸から中身がはみ出すのを防ぐ */
  border: 1px solid var(--color-line);
}

.table th,
.table td {
  padding: 17px 22px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.94rem;
}

.table th {
  width: 150px;
  background: #fafbfc;
  color: var(--color-main);
  font-weight: 700;
  white-space: nowrap;   /* 項目名を途中で改行させない */
}

/* :last-child = 最後の要素だけを狙う。一番下の線を消して見た目を整える */
.table tr:last-child th,
.table tr:last-child td {
  border-bottom: none;
}


/* ---------- ⑩ お問い合わせ ---------- */

.contact {
  text-align: center;   /* 中身を中央揃えに */
}

.contact__title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  margin-bottom: 18px;
}

.contact__text {
  opacity: 0.85;
  margin-bottom: 34px;
}

.contact__note {
  margin-top: 20px;
  font-size: 0.88rem;
  opacity: 0.6;
}


/* ---------- ⑪ フッター ---------- */

.footer {
  background: #0a1c2e;
  color: rgba(255, 255, 255, 0.65);
  padding: 40px 0;
  text-align: center;
}

.footer__logo {
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #fff;
  margin-bottom: 8px;
}

.footer__copy {
  font-size: 0.78rem;
}


/* ============================================================
   ⑫ スマホ対応（レスポンシブ）
   ============================================================
   @media (max-width: 768px) { ... }
   → 「画面幅が768px以下のときだけ、この中の指定を上書きしろ」という意味。
     PC用に作ったあと、狭い画面での崩れをここで直す、という順番で書きます。
   ============================================================ */

@media (max-width: 768px) {

  /* スマホではヘッダーのメニュー文字を隠し、問い合わせボタンだけ残す
     （本格的なハンバーガーメニューはJavaScriptが必要なので、まずはこれで十分） */
  .header__nav a:not(.header__cta) {
    display: none;
  }

  .hero {
    padding: 70px 0 64px;
  }

  .section {
    padding: 60px 0;
  }

  .steps__item {
    padding-left: 0;
    padding-top: 46px;   /* 番号を左ではなく上に置く配置に変更 */
  }

  .steps__item::before {
    top: 12px;
  }

  /* 表を縦積みにする。横幅の狭いスマホでは、この形が一番読みやすい */
  .table th,
  .table td {
    display: block;
    width: 100%;
    white-space: normal;
  }

  .table th {
    border-bottom: none;
    padding-bottom: 4px;
  }

  .button {
    width: 100%;
    text-align: center;
  }
}