/*
Theme Name: NISHIKI LP
Theme URI: https://nishiki.ink/
Author: NISHIKI
Author URI: https://nishiki.ink/
Description: 練習用に白紙から作る自作テーマ。CrowdWorks案件(Figma→WordPress実装)に向けた学習用。
Version: 0.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: nishiki-lp
*/

/* =========================================================
   1. カラー・変数（デザイン仕様を1箇所に集約）
   ここを直せばサイト全体の色・サイズが変わる = 忠実再現・修正がラク
========================================================= */
:root {
  --paper: #f7f5f0;   /* 背景（和紙っぽいオフホワイト） */
  --ink:   #1a1a1a;   /* 文字（墨） */
  --vermilion: #b7282e; /* アクセント（朱） */
  --gray:  #726c5c;   /* 補助グレー（和紙背景でコントラスト約4.8:1 = WCAG AA準拠） */

  --font-mincho: "Shippori Mincho", serif;
  --font-gothic: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  --container: 1000px; /* コンテンツ最大幅 */
}

/* =========================================================
   2. リセット・下地（ブラウザ差をならす最小限）
========================================================= */
* {
  box-sizing: border-box; /* paddingを幅に含める = レイアウト計算が直感的に */
}
body {
  margin: 0;
  font-family: var(--font-gothic);
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%; /* 画像がはみ出さない = レスポンシブの基本 */
  height: auto;
  display: block;
}
a {
  color: inherit;
}

/* キーボード操作時だけ、フォーカス中の要素に枠を出す（マウス操作では出ない） */
:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 3px;
  border-radius: 2px;
}

/* 中央寄せの共通コンテナ（各セクションの中身をこれで包む） */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;   /* 左右中央 */
  padding-inline: 24px;  /* 画面端の余白（スマホで端に張り付かない） */
}

/* =========================================================
   3. ヒーローセクション
========================================================= */
.hero {
  padding-block: 140px; /* 上下の余白をたっぷり = 余白主役 */
}
.hero__lead {
  font-size: 14px;
  letter-spacing: 0.2em; /* 小さい導入文字は字間を開けると上品に */
  color: var(--vermilion);
  margin: 0 0 24px;
}
.hero__title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 52px;
  line-height: 1.5;
  margin: 0 0 32px;
}
.hero__desc {
  font-size: 17px;
  color: var(--gray);
  max-width: 34em; /* 1行が長すぎると読みにくいので文字数で制限 */
  margin: 0 0 40px;
}

/* ボタン（朱色の塗り） */
.btn {
  display: inline-block;
  background: var(--vermilion);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.08em;
  padding: 16px 40px;
  border-radius: 2px;
  transition: opacity 0.2s;
}
.btn:hover {
  opacity: 0.85;
}

/* =========================================================
   4. セクション見出し（SERVICE以降で使い回す共通パーツ）
========================================================= */
.section-head {
  text-align: center;
  margin-bottom: 64px;
}
.section-head__label {
  font-size: 13px;
  letter-spacing: 0.25em;
  color: var(--vermilion);
  margin: 0 0 12px;
}
.section-head__title {
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: 34px;
  margin: 0;
}

/* =========================================================
   5. サービスセクション（3カード横並び）
========================================================= */
.services {
  padding-block: 120px;
  background: #fff; /* ヒーロー(和紙色)と差をつけて区切りを見せる */
}
.services__grid {
  display: flex;      /* 子(カード)を横並びに */
  gap: 32px;          /* カード間の余白 */
}
.card {
  flex: 1;            /* 3枚を均等幅に伸ばす */
  border: 1px solid #e6e2d8;
  border-radius: 4px;
  padding: 40px 32px;
  text-align: center;
}
.card__num {
  font-family: var(--font-mincho);
  font-size: 20px;
  color: var(--vermilion);
  margin: 0 0 16px;
}
.card__title {
  font-family: var(--font-mincho);
  font-size: 20px;
  margin: 0 0 16px;
}
.card__text {
  font-size: 15px;
  color: var(--gray);
  margin: 0;
  text-align: left;
}

/* =========================================================
   6. 制作の流れ（3ステップ）
========================================================= */
.flow {
  padding-block: 120px; /* 背景は body の和紙色をそのまま使う */
}
.flow__list {
  display: flex;
  gap: 24px;
  list-style: none; /* olの数字マーカーは消して、自前のSTEP表記を使う */
  margin: 0;
  padding: 0;
}
.flow__step {
  flex: 1;
}
.flow__step-num {
  display: block;
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--vermilion);
  margin-bottom: 12px;
}
.flow__step-title {
  font-family: var(--font-mincho);
  font-size: 22px;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink); /* 見出し下に墨の線 = 和の引き締め */
}
.flow__step-text {
  font-size: 15px;
  color: var(--gray);
  margin: 0;
}

/* =========================================================
   7. 実績（WordPressループで表示）
========================================================= */
.works {
  padding-block: 120px;
  background: #fff;
}
.works__grid {
  display: grid;                          /* 格子レイアウト */
  grid-template-columns: repeat(3, 1fr);  /* 3列・均等幅 */
  gap: 24px;
}
.work-card {
  border: 1px solid #e6e2d8;
  border-radius: 4px;
  overflow: hidden;
}
.work-card__thumb {
  aspect-ratio: 3 / 2;      /* 画像枠の縦横比を固定 = カードの高さが揃う */
  background: #ece8df;      /* 画像が無い時の下地 */
}
.work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 枠に対して画像を切り抜いてフィット */
}
.work-card__body {
  padding: 24px;
}
.work-card__title {
  font-family: var(--font-mincho);
  font-size: 18px;
  margin: 0 0 10px;
}
.work-card__excerpt {
  font-size: 14px;
  color: var(--gray);
  margin: 0;
}

/* =========================================================
   8. お問い合わせCTA（墨背景で締める）
========================================================= */
.cta {
  padding-block: 120px;
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.cta__title {
  font-family: var(--font-mincho);
  font-size: 32px;
  margin: 0 0 20px;
}
.cta__text {
  font-size: 16px;
  color: #cfcabd;
  margin: 0 0 40px;
}

/* =========================================================
   9. フッター（全ページ共通 / footer.php）
========================================================= */
.site-footer {
  background: #111;
  color: #9a958a;
  text-align: center;
  padding-block: 36px;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.site-footer__brand {
  font-family: var(--font-mincho);
  font-size: 18px;
  color: #fff;
  margin: 0 0 8px;
}

/* =========================================================
   10. レスポンシブ（768px以下 = スマホ）
========================================================= */
@media (max-width: 768px) {
  .hero {
    padding-block: 90px;
  }
  .hero__title {
    font-size: 34px; /* スマホでは見出しを縮める */
  }
  .hero__desc {
    font-size: 16px;
  }

  .services {
    padding-block: 80px;
  }
  .services__grid {
    flex-direction: column; /* 横並び→縦積み */
  }
  .section-head__title {
    font-size: 28px;
  }

  .flow {
    padding-block: 80px;
  }
  .flow__list {
    flex-direction: column; /* ステップも縦積みに */
    gap: 40px;
  }

  .works {
    padding-block: 80px;
  }
  .works__grid {
    grid-template-columns: 1fr; /* 3列→1列 */
  }

  .cta {
    padding-block: 80px;
  }
  .cta__title {
    font-size: 26px;
  }
}