/* =========================================================
   HAJIMETE｜格安Webサイト制作
   初心者向け・サイト内容反映版 CSS

   このCSSは、index.htmlに書かれている順番と内容を確認し、
   「どのCSSが、サイトのどの場所を変えるのか」が分かるように
   日本語コメントを細かく付けています。

   【トップページの並び順】
   01. サイト全体の色・横幅
   02. ブラウザの基本設定
   03. 共通レイアウト
   04. 共通文字・装飾
   05. 共通ボタン
   06. 黄色いヘッダー・メニュー
   07. 最上部の大きなHero画像
   08. 共通の価格表示
   09. 安心材料を並べるリスト
   10. 画像・アイコン共通
   11. 各セクション見出し
   12. 白いカードの共通形
   13. 「このようなお悩みはありませんか？」
   14. 「当社が選ばれる理由」
   15. 「制作サンプル」
   16. 画像付きカード
   17. 箇条書き
   18. 「料金プラン」
   19. 「制作の流れ」
   20. 「お客様の声」「対応外となる内容」
   21. 下層ページ上部
   22. 下層ページのHero List
   23. 比較表
   24. よくある質問
   25. お問い合わせフォーム
   26. ページ下部の無料相談CTA
   27. 黄色いフッター
   28. 900px以下の表示
   29. 560px以下の表示
   30. 動きを減らす設定

   【探し方】
   CSS内で Ctrl + F を押し、次の言葉を検索してください。

   ヘッダーを直す      → 「06. ヘッダー」
   最初の画像を直す    → 「07. トップページ」
   お悩み欄を直す      → 「13.」
   制作実績を直す      → 「15.」
   料金を直す          → 「18.」
   制作の流れを直す    → 「19.」
   フッターを直す      → 「27.」
   スマホ表示を直す    → 「29.」

   注意：
   コメントの中は説明文です。
   実際の見た目を変更するのは、{ } の中にある数値や色です。
========================================================= */

/* =========================================================
   01. サイト全体で使う色・幅・影などの共通設定

   この :root の中を変更すると、サイト全体の色や横幅を
   まとめて変更できます。

   例：
   --yellow  → ヘッダーやCTAの黄色
   --navy    → 見出しや文字の紺色
   --max     → コンテンツ全体の最大横幅
========================================================= */
:root {
  --yellow: #ffd900;
  --yellow-soft: #fff4a6;
  --pink: #e3c1bb;
  --pink-soft: #fff1ee;
  --navy: #0b2447;
  --text: #222222;
  --muted: #5d6570;
  --line: #eadfd9;
  --cream: #fffdf8;
  --beige: #faf7f1;
  --white: #ffffff;
  --shadow: 0 10px 26px rgba(11, 36, 71, 0.08);
  --radius: 8px;
  --max: 1120px;
}


/* =========================================================
   02. ブラウザごとの差を整える基本設定

   ページ全体の余白、文字、画像、リンクなどの
   初期状態をここで統一しています。

   基本的には頻繁に変更しない場所です。
========================================================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.8;
  background: var(--cream);
}

body.menu-open {
  overflow: hidden;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  color: var(--navy);
  line-height: 1.45;
  letter-spacing: 0;
}

h1 {
  margin: 14px 0 20px;
  font-size: clamp(2rem, 4vw, 3.3rem);
}

label {
  color: var(--navy);
  font-weight: 800;
}


/* =========================================================
   03. 全ページ共通の横幅・セクション・グリッド

   主に次の部分で共通使用しています。

   ・ヘッダーの内側
   ・各 section の内側
   ・フッターの内側
   ・2列、3列のカード配置

   HTMLで使うクラス：
   .section
   .section.alt
   .section.beige
   .grid
   .grid-2
   .grid-3
========================================================= */
/* ヘッダー、本文セクション、フッターの左右幅をそろえます。
   --max の1120pxを超えて横に広がらないようにしています。 */
.header-inner,
.section,
/* フッターを4列に分けます。
   1列目：HAJIMETEの説明
   2列目：サービス
   3列目：サポート
   4列目：運営者情報 */
.footer-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

/* 各セクションの上下余白です。
   72pxを大きくすると、セクション同士の間隔が広がります。 */
.section {
  padding: 50px 0;
}

/* 白背景にしたいセクションです。
   トップページでは「お悩み」「制作サンプル」
   「制作の流れ」「対応外となる内容」で使っています。 */
.section.alt {
  background: var(--white);
}

/* 「当社が選ばれる理由」の薄いベージュ背景です。 */
.section.beige {
  width: 100%;
  max-width: none;
  padding: 72px max(16px, calc((100% - var(--max)) / 2));
  background: var(--beige);
}

/* カードを横並びにする共通設定です。
   gapの22pxがカード同士の間隔です。 */
.grid {
  display: grid;
  gap: 22px;
}

/* 2列表示です。
   「このようなお悩みはありませんか？」で使用しています。 */
.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* 3列表示です。
   「当社が選ばれる理由」「制作サンプル」
   「お客様の声」で使用しています。 */
.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}


.wide-text {
  max-width: 760px;
}


/* =========================================================
   04. サイト全体で繰り返し使う文字・装飾

   HTMLで使う主なクラス：
   .eyebrow  → Hero上部の小さな見出し
   .accent   → 黄色で強調する文字
   .lead     → 説明文
   .label    → 料金欄などの丸いラベル
   .note     → 補足・注意書き
========================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 800;
  font-size: 0.9rem;
}

.eyebrow::before,
.section-title::before,
.section-title::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--yellow);
}

.accent {
  color: #e6b600;
}

.lead {
  max-width: 720px;
  color: #394454;
  font-size: 1.04rem;
}

.label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.86rem;
  font-weight: 800;
}

.note {
  color: var(--muted);
  font-size: 0.9rem;
}


/* =========================================================
   05. ボタン共通

   HTMLで使う主なクラス：
   .button          → ボタンの基本形
   .button-primary  → 灰色の主要ボタン
   .button-yellow   → 黄色いボタン
   .button-small    → 小さいボタン

   「無料で相談する」「実サイトを見る」などに使用。
========================================================= */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--navy);
  border-radius: 6px;
  background: var(--white);
  color: var(--navy);
  font-weight: 800;
  text-decoration: none;
  line-height: 1.3;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.button-primary {
  background: rgb(101, 101, 101);
  color: var(--white);
}

.button-yellow {
  border-color: var(--yellow);
  background: var(--yellow);
  color: var(--navy);
}

.button-small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9rem;
}


/* =========================================================
   06. ヘッダー・ロゴ・グローバルナビ

   ページ最上部の黄色い部分です。

   HTMLの該当部分：
   <header class="site-header">
     <div class="header-inner">
       <a class="brand">...</a>
       <nav class="nav">...</nav>
     </div>
   </header>

   主なクラス：
   .site-header
   .header-inner
   .brand
   .nav
   .menu-button
========================================================= */
/* 画面上部に固定される黄色いヘッダー全体です。
   position: sticky により、スクロールしても上部に残ります。 */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--yellow);
  border-bottom: 1px solid rgba(11, 36, 71, 0.1);
}

/* HAJIMETEロゴ、ナビ、MENUボタンを横並びにします。 */
.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 左上の「HAJIMETE／格安Webサイト制作」のロゴ文字です。 */
.brand {
  display: inline-flex;
  flex-direction: column;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0;
}

.brand strong {
  font-size: 1.45rem;
}

.brand span {
  font-size: 0.82rem;
}

/* 「サービス・料金・制作の流れ・よくある質問・お問い合わせ」
   を横並びにするナビゲーションです。 */
.nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
}

.nav a {
  color: var(--navy);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  padding: 10px;
  border-bottom: 3px solid transparent;
}

.nav a[aria-current="page"],
.nav a:hover {
  border-color: var(--navy);
}

.nav .button-primary {
  color: var(--white);
  border-bottom-color: var(--navy);
}

/* スマホ・タブレットで表示されるMENUボタンです。
   パソコン表示では display:none で隠しています。 */
.menu-button {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(11, 36, 71, 0.18);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--navy);
  font-weight: 800;
}


/* =========================================================
   07. トップページのファーストビュー

   ページを開いた直後に表示される大きな画像と
   「はじめてのホームページを、手の届く価格で」
   の文章部分です。

   HTMLの該当部分：
   <section class="hero hero-visual">
     <img class="hero-bg-image">
     <div class="hero-overlay-copy">...</div>
   </section>

   主なクラス：
   .hero
   .hero-visual
   .hero-bg-image
   .hero-overlay-copy
   .hero-inner
========================================================= */
/* トップページ最上部のHero全体です。
   現在は背景画像を使っていますが、予備として
   グラデーション背景も設定されています。 */
.hero {
  overflow: hidden;
  background:
    radial-gradient(
      circle at 72% 42%,
      rgba(255, 217, 0, 0.14),
      transparent 26rem
    ),
    linear-gradient(90deg, #ffffff 0%, #ffffff 58%, #fff8dd 100%);
}

/* Hero画像を表示する大きな領域です。
   min-heightでファーストビューの高さを決めています。 */
.hero-visual {
  position: relative;
  min-height: clamp(620px, calc(100vh - 76px), 860px);
  display: flex;
  align-items: flex-start;
  background: #ffffff;
}

/* assets/images/hero-homepage-support.png の表示方法です。
   object-fit: cover で領域いっぱいに表示しています。 */
.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

/* Hero画像の上に重なる白い文章ボックスです。
   「はじめてのホームページ制作」
   「はじめてのホームページを、手の届く価格で」
   の文章が入っています。 */
.hero-overlay-copy {
  position: relative;
  z-index: 2;
  width: min(560px, calc(100% - 40px));
  margin-left: max(20px, calc((100% - var(--max)) / 2));
  margin-top: clamp(42px, 7vh, 76px);
  padding: clamp(18px, 2.5vw, 28px);
  border: 1px solid rgba(11, 36, 71, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 30px rgba(11, 36, 71, 0.1);
  color: var(--navy);
}

/* Hero内の一番大きなキャッチコピーです。 */
.hero-overlay-copy h1 {
  max-width: 520px;
  margin: 12px 0 18px;
  font-size: clamp(1.82rem, 3.2vw, 2.8rem);
  line-height: 1.32;
}

/* Hero内のテンプレート選択・公開・更新レクチャーを
   説明している文章です。 */
.hero-overlay-copy .lead {
  max-width: 500px;
  font-size: clamp(0.95rem, 1.25vw, 1.06rem);
  line-height: 1.85;
  color: #243247;
  font-weight: 600;
}

.hero-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: 48px;
  align-items: center;
  padding: 70px 0 62px;
}

.hero-actions,
.cta-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 24px 0;
}


/* =========================================================
   08. Heroや料金ページで使う価格表示

   金額を大きく表示するための共通設定です。

   主なクラス：
   .price-box
   .price
========================================================= */
.price-box {
  margin: 26px 0 22px;
  padding-left: 18px;
  border-left: 5px solid var(--pink);
}

.price-box span {
  display: block;
  color: var(--navy);
  font-weight: 800;
}

.price {
  color: var(--navy);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
}

.price small {
  font-size: 1rem;
}


/* =========================================================
   09. 安心材料・特徴を並べるリスト

   画像と文章を横並びで表示するための設定です。

   主なクラス：
   .trust-list
   .trust-item
========================================================= */
.trust-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 30px;
}

.trust-item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
}

.trust-item strong {
  display: block;
  color: var(--navy);
  line-height: 1.4;
}

.trust-item small {
  color: var(--muted);
  line-height: 1.5;
}


/* =========================================================
   10. サイト内の画像・アイコン共通設定

   制作サンプル画像、人物イラスト、STEP画像などの
   表示サイズと切り抜き方をまとめています。

   主なクラス：
   .placeholder
   .icon
   .person-illust
   .media-image
========================================================= */
.placeholder {
  background: var(--white);
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 76px;
  border: 1px solid var(--navy);
  border-radius: 8px;
  color: var(--navy);
  background: var(--white);
  font-weight: 800;
  overflow: hidden;
}

.template-card .placeholder img,
.media-image img,
.person-illust img,
.icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================================
   11. 各セクションの見出し

   次のような見出しに共通使用しています。

   ・このようなお悩みはありませんか？
   ・当社が選ばれる理由
   ・制作サンプル
   ・制作の流れ
   ・お客様の声
   ・対応外となる内容について

   主なクラス：
   .section-head
   .section-title
========================================================= */
/* 各セクションの見出しと説明文を中央にまとめます。 */
.section-head {
 
  text-align: center;
  max-width: 760px;
  margin: 70px auto 70px;
}

/* 「制作サンプル」「料金プラン」などのH2見出しです。
   左右の黄色い短い線は ::before と ::after で作っています。 */
.section-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
}

.section-head p {
  
  margin: 12px auto 0;
  color: var(--muted);
}


/* =========================================================
   12. カードの共通デザイン

   白い背景、枠線、角丸、影、内側余白を設定しています。

   次のカードの土台です：
   ・お悩みカード
   ・選ばれる理由
   ・制作サンプル
   ・料金カード
   ・お客様の声

   主なクラス：
   .card
========================================================= */
/* サイト内の白いカードすべての土台です。
   枠線・角丸・影・内側余白を共通で設定しています。 */
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 4px 18px rgba(11, 36, 71, 0.04);
  padding: 24px;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 1.14rem;
}


/* =========================================================
   13. 「このようなお悩みはありませんか？」セクション

   人物イラストと文章を横並びにする部分です。

   HTMLの該当部分：
   <article class="card worry-card">
     <div class="person-illust">...</div>
     <div>...</div>
   </article>

   主なクラス：
   .worry-card
   .person-illust
========================================================= */
/* 「制作会社の見積もりが高すぎる」
   「自分で更新できず放置している」
   の2つのお悩みカードです。 */
.worry-card {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, var(--pink-soft), #ffffff 76%);
  border-color: rgba(227, 193, 187, 0.9);
}

/* お悩みカード左側の人物イラスト枠です。 */
.person-illust {
  min-height: 148px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(227, 193, 187, 0.8);
}

.person-illust img {
  object-fit: contain;
  padding: 4px;
  transform: scale(1.08);
}


/* =========================================================
   14. 「当社が選ばれる理由」セクション

   01・02・03の番号、イラスト、見出し、説明文を
   3列で表示するカードです。

   主なクラス：
   .reason-card
   .num
   .reason-card .icon
========================================================= */
/* 「当社が選ばれる理由」の3枚のカードです。 */
.reason-card {
  position: relative;
  text-align: center;
  padding-top: 42px;
}

/* 選ばれる理由の左上にある01・02・03の黄色い丸です。 */
.num {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-weight: 900;
  font-size: 0.8rem;
}

.reason-card .icon {
  margin: 0 auto 18px;
  width: min(100%, 196px);
  height: 150px;
  font-size: 1.3rem;
  background: #fffaf0;
  border-color: rgba(227, 193, 187, 0.9);
}

.reason-card .icon img,
.trust-item .icon img,
.flow-step .icon img {
  object-fit: contain;
  padding: 4px;
  transform: scale(1.12);
}


/* =========================================================
   15. 「制作サンプル」セクション

   サンプルサイトの画像、タイトル、説明文、一覧、
   「実サイトを見る」ボタンを表示する部分です。

   HTMLの該当部分：
   <article class="card template-card">
     <div class="placeholder">...</div>
     <div class="body">...</div>
   </article>

   .two-steps は制作サンプル二段目の上余白です。

   主なクラス：
   .template-card
   .template-card .placeholder
   .template-card .body
   .two-steps
========================================================= */
/* 制作サンプル1件分のカードです。
   福岡の歴史と文化をめぐる旅、Japanese Learning、
   和菓子でワタシなどに使用しています。 */
.template-card {
  overflow: hidden;
  padding: 0;
}

/* 制作サンプルのサイト画像を表示する上半分です。 */
.template-card .placeholder {
  position: relative;
  min-height: 310px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  background: var(--white);
}

.template-card .placeholder img,
.media-image img {
  position: absolute;
  inset: 0;
}

/* サンプルサイト画像は上端を基準に表示します。
   縦長サイトの上部が見えるよう object-position: top center
   にしています。 */
.template-card .placeholder img {
  object-fit: cover;
  object-position: top center;
}

.template-card .placeholder::before {
  display: none;
}

/* 制作サンプルのタイトル・説明・特徴・ボタン部分です。 */
.template-card .body {
  padding: 22px;
}

/*
  制作サンプル二段目の上余白

  HTML：
  <div class="grid grid-3 two-steps">

  数値を大きくすると一段目との間隔が広がり、
  小さくすると間隔が狭くなります。
*/
/* 制作サンプル二段目の上余白です。

   HTML：
   <div class="grid grid-3 two-steps">

   40pxを大きくすると一段目との間が広がります。 */
.two-steps {
  padding-top: 40px;
}


/* =========================================================
   16. 画像付きメディアカード

   画像と文章を組み合わせた別形式のカード用です。
   トップページでは現在ほとんど使っていませんが、
   下層ページなどで使用できます。

   主なクラス：
   .media-card
   .media-image
   .media-image.image-only
========================================================= */
.media-card {
  padding: 0;
  overflow: hidden;
}

.media-image {
  position: relative;
  min-height: 330px;
  background: var(--pink-soft);
}

/* =========================================================
   カウンセリングカードの画像
   ピンク色の画像枠いっぱいに表示する
========================================================= */
.media-image img {
  width: 100%;
  height: 100%;

  /* 画像を枠いっぱいに広げる */
  object-fit: cover;

  /* 画像の中央を基準に表示する */
  object-position: center;

  /* ピンク色の余白をなくす */
  padding: 0;

  /* 以前の拡大指定を解除する */
  transform: none;
}

.media-image.image-only {
  background: var(--white);
}

.media-image.image-only img {
  object-fit: cover;
  object-position: center;
  padding: 0;
  transform: none;
}

.media-card .body {
  padding: 24px;
}


/* =========================================================
   17. 箇条書きリスト共通

   制作サンプルの特徴一覧、料金プランの内容、
   通常リスト、プライバシーポリシーなどに使います。

   黄色い丸印もここで設定しています。

   主なクラス：
   .check-list
   .plain-list
   .privacy-list
   .template-card ul
========================================================= */
.template-card ul,
.check-list,
.plain-list,
.privacy-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.template-card li,
.check-list li,
.plain-list li,
.privacy-list li {
  position: relative;
  padding-left: 22px;
}

.template-card li::before,
.check-list li::before,
.plain-list li::before {
  content: "";
  position: absolute;
  top: 0.82em;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}


/* =========================================================
   トップページ：料金プラン
   はじめてのホームページ制作プラン
========================================================= */
/* 「料金プラン」を左の説明と右の料金カードに分けます。 */
.price-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}

/* 右側の「はじめてのホームページ制作プラン」カードです。 */
.price-card {
  position: relative;
  border: 2px solid rgba(227, 193, 187, 0.72);
  background: var(--white);
}

.price-card-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 30px;
  margin: 0 auto 14px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
}

.price-card h3,
.price-card .price {
  text-align: center;
}

.price-card-subtitle {
  margin: -4px 0 18px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
  text-align: center;
}

.price-card .label {
  margin: 12px auto 20px;
  display: flex;
  width: fit-content;
}


/* =========================================================
   19. 「制作の流れ」STEP 01〜06

   無料相談から公開・更新レクチャーまでの6段階を
   横並びで表示する部分です。

   主なクラス：
   .flow
   .flow-step
   .flow-step .icon
========================================================= */
/* STEP01からSTEP06までを6列で並べます。 */
.flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

/* 制作の流れ1ステップ分です。
   無料相談、ヒアリング、素材準備、制作、修正、公開に使用。 */
.flow-step {
  position: relative;
  text-align: center;
  padding: 20px 8px;
}

.flow-step strong {
  display: block;
  color: var(--navy);
  font-size: 0.84rem;
}

.flow-step .icon {
  margin: 10px auto 12px;
  width: 100%;
  height: 112px;
  border-color: rgba(227, 193, 187, 0.9);
  background: #fffaf0;
}


/* =========================================================
   20. 「お客様の声」と「対応外となる内容」

   .voice-card
   → お客様の声のカード

   .excluded
   → 予約システム、オンライン決済、多言語サイトなどを
      一覧表示する部分
========================================================= */
/* 「お客様の声は準備中です」の3枚のカードです。 */
.voice-card {
  min-height: 150px;
  background: linear-gradient(135deg, #ffffff, var(--pink-soft));
}

/* 基本プランに含まれない8項目を4列で並べます。
   予約システム、オンライン決済、多言語サイトなどです。 */
.excluded {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.excluded span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 10px;
  border: 1px solid rgba(227, 193, 187, 0.9);
  border-radius: 6px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  text-align: center;
}


/* =========================================================
   21. サービス・料金・FAQなど下層ページ上部

   下層ページのタイトル背景とパンくずリストに使用します。

   主なクラス：
   .page-hero
   .page-hero-inner
   .breadcrumb
========================================================= */
.page-hero {
  background:
    linear-gradient(
      120deg,
      #ffffff 0%,
      #ffffff 62%,
      rgba(227, 193, 187, 0.24) 100%
    );
  border-bottom: 1px solid var(--line);
}

.page-hero-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 46px 0 42px;
}

.page-hero h1 {
  margin-bottom: 10px;
}

.breadcrumb {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.9rem;
}

.breadcrumb a {
  color: var(--navy);
  text-decoration: none;
}


/* =========================================================
   22. 下層ページの「Hero List」

   黄色い枠の箇条書きと右側の人物画像を配置する部分です。

   主なクラス：
   .page-hero1
   .page-hero-inner1
   .hero-list
   .hero-image
========================================================= */
.page-hero1 {
  padding: 60px 20px;
  background: #ffffff;
}

.page-hero-inner1 {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
}

.hero-list {
  border: 2px solid #ffd900;
  border-radius: 8px;
  padding: 1em 1.5em;
  margin: 0;
  flex: 2;
}

.hero-list li {
  position: relative;
  list-style: none;
  padding: 0.7em 0 0.7em 2.2em;
  line-height: 1.8;
  font-size: 18px;
}

.hero-list li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffd900;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
}

.hero-image {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
}

.hero-image img {
  width: 300px;
  height: auto;
}


/* =========================================================
   23. 比較表・料金表

   横幅が狭い画面では、表だけ横スクロールできます。

   主な要素・クラス：
   .compare
   table
   th
   td
========================================================= */
.compare {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
}

th,
td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: var(--beige);
  color: var(--navy);
}


/* =========================================================
   24. 「よくある質問」ページ

   質問をクリックすると回答が開く形式です。

   主なクラス・要素：
   .faq-group
   details
   summary
========================================================= */
.faq-group {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

summary {
  cursor: pointer;
  padding: 18px 22px;
  color: var(--navy);
  font-weight: 800;
}

details p {
  margin: 0;
  padding: 0 22px 20px;
  color: #3f4650;
}


/* =========================================================
   25. お問い合わせフォーム

   名前、メールアドレス、選択欄、本文、エラー表示、
   送信後メッセージなどの見た目を設定しています。

   主なクラス：
   .contact-form
   .form-grid
   .field
   .honeypot
   .error
   .form-message
========================================================= */
.contact-form {
  display: grid;
  gap: 18px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.field {
  display: grid;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

input,
select,
textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid #cfd6dc;
  border-radius: 6px;
  padding: 10px 12px;
  font: inherit;
  background: var(--white);
}

textarea {
  min-height: 150px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(255, 217, 0, 0.65);
  outline-offset: 2px;
}

.error {
  color: #b42318;
  font-size: 0.9rem;
}

.form-message {
  display: none;
  padding: 16px;
  border-radius: var(--radius);
  background: #ecfdf3;
  color: #074d2b;
  font-weight: 700;
}

.form-message.show {
  display: block;
}


/* =========================================================
   26. ページ下部の「無料で相談する」CTA

   「まずは、作りたいサイトについてお聞かせください。」
   と表示される黄色いお問い合わせ誘導部分です。

   主なクラス：
   .cta
   .cta-inner
   .cta-actions
========================================================= */
/* ページ下部の黄色い無料相談エリア全体です。 */
.cta {
  background: var(--yellow);
}

/* CTA内の説明文と「無料で相談する」ボタンを横並びにします。 */
.cta-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
  padding: 42px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}

.cta h2 {
  margin: 0 0 8px;
  font-size: clamp(1.45rem, 3vw, 2rem);
}


/* =========================================================
   27. フッター

   ページ最下部の黄色いエリアです。

   内容：
   ・HAJIMETEの説明
   ・サービスへのリンク
   ・サポートへのリンク
   ・運営者情報
   ・コピーライト

   主なクラス：
   .site-footer
   .footer-inner
   .footer-bottom
========================================================= */
/* ページ最下部の黄色いフッター全体です。 */
.site-footer {
  background: var(--yellow);
  color: var(--navy);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 34px;
  padding: 44px 0 30px;
}

.footer-inner a {
  display: block;
  text-decoration: none;
  margin: 6px 0;
  font-weight: 700;
}

/* 最下部の紺色のコピーライト部分です。 */
.footer-bottom {
  background: var(--navy);
  color: var(--white);
  text-align: center;
  padding: 8px 16px;
  font-size: 0.82rem;
}


/* =========================================================
   28. タブレット・小さいパソコン表示（900px以下）

   画面幅が900px以下になったときに適用されます。

   主な変化：
   ・ナビをMENUボタン形式に変更
   ・2列、3列、6列の配置を1列に変更
   ・料金とCTAを縦並びに変更
   ・Heroのサイズを調整
========================================================= */
/* ここからは画面幅900px以下にだけ適用されます。
   タブレットや小さめのノートパソコン向けです。 */
@media (max-width: 900px) {
  .menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav {
    position: fixed;
    inset: 76px 0 auto 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    background: var(--yellow);
    border-bottom: 1px solid rgba(11, 36, 71, 0.12);
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    padding: 14px 8px;
  }

  .nav .button {
    margin-top: 10px;
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    color: var(--white);
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid var(--navy);
  }

  .hero-inner,
  .price-layout,
  .cta-inner {
    grid-template-columns: 1fr;
  }

  .hero-inner {
    padding-top: 44px;
  }

  .hero-visual {
    min-height: 720px;
  }

  .hero-overlay-copy {
    width: min(520px, calc(100% - 32px));
    margin-left: 16px;
    margin-top: 34px;
    padding: 22px;
  }

  .hero-overlay-copy h1 {
    font-size: clamp(1.85rem, 5vw, 2.65rem);
  }

  .hero-overlay-copy .lead {
    font-size: 0.98rem;
    line-height: 1.8;
  }

  .trust-list,
  .grid-3,
  .grid-2,
  .flow,
  .excluded,
  .footer-inner,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .cta-actions {
    margin-top: 0;
  }
}


/* =========================================================
   29. スマートフォン表示（560px以下）

   画面幅が560px以下になったときに適用されます。

   主な変化：
   ・左右余白をスマホ向けに調整
   ・Heroの文字サイズを縮小
   ・ボタンを横幅いっぱいにする
   ・お悩みカードを縦並びにする
   ・セクション上下の余白を縮小
========================================================= */
/* ここからは画面幅560px以下にだけ適用されます。
   主にスマートフォン向けです。 */
@media (max-width: 560px) {
  .header-inner,
  .section,
  .footer-inner,
  .hero-inner,
  .page-hero-inner,
  .cta-inner {
    width: min(100% - 32px, var(--max));
  }

  .hero-visual {
    min-height: 690px;
  }

  .hero-bg-image {
    object-position: center bottom;
  }

  .hero-overlay-copy {
    width: min(100% - 32px, var(--max));
    margin: 28px auto 0;
    padding: 18px;
    background: rgba(255, 255, 255, 0.9);
  }

  .hero-overlay-copy h1 {
    font-size: clamp(1.72rem, 8vw, 2.45rem);
    line-height: 1.36;
  }

  .hero-overlay-copy .lead {
    font-size: 0.95rem;
    line-height: 1.75;
    max-width: 100%;
  }

  .brand strong {
    font-size: 1.2rem;
  }

  .hero-actions,
  .cta-actions {
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .site-header .button {
    width: 100%;
    min-width: 0;
  }

  .price {
    font-size: 2.55rem;
  }

  .worry-card {
    grid-template-columns: 1fr;
  }

  .section,
  .section.beige {
    padding-top: 52px;
    padding-bottom: 52px;
  }
}


/* =========================================================
   30. 動きを減らす設定

   OSやブラウザで「視差効果を減らす」が有効な人向けに、
   アニメーションや滑らかなスクロールを停止します。

   アクセシビリティ対応のための設定です。
   基本的には変更しなくて大丈夫です。
========================================================= */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* =========================================================
   31. サービスページ専用
   service.htmlの3つの制作プランと商品詳細
========================================================= */

/* サービスページの基本横幅 */
.service-plan-overview,
.service-plan-inner {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

/* 3つの制作プラン一覧 */
.service-plan-overview {
  padding-top: 84px;
  padding-bottom: 96px;
}

.service-plan-overview .section-head {
  margin: 0 auto 54px;
}

.service-plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.service-plan-summary {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 36px 34px 40px;
}



.service-plan-summary .eyebrow {
  margin: 0 0 18px;
}

.service-plan-summary h3 {
  min-height: 3.2em;
  margin: 0 0 16px;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.service-plan-summary > p:not(.eyebrow):not(.price) {
  margin: 0;
  color: var(--muted);
}

.service-plan-summary .price {
  margin: 26px 0 24px;
  font-size: clamp(2rem, 3vw, 2.8rem);
}

.service-plan-summary .check-list {
  margin-bottom: 28px;
}

.service-plan-summary .button {
  align-self: flex-start;
  margin-top: auto;
}

/* 各プランの詳細セクション */
.service-plan-detail {
  padding: 112px 0;
  scroll-margin-top: 96px;
  background: var(--cream);
}

.service-plan-detail-alt {
  background: var(--white);
}

/* 商品名・説明・料金・画像 */
.service-plan-header {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  gap: 72px;
  align-items: center;
  padding-bottom: 72px;
  border-bottom: 1px solid var(--line);
}

.service-plan-copy .eyebrow {
  margin: 0 0 18px;
}

.service-plan-copy h2 {
  max-width: 680px;
  margin: 0 0 24px;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.35;
}

.service-plan-copy > p:not(.eyebrow):not(.service-plan-price) {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 2;
}

.service-plan-price {
  margin: 34px 0 0;
  color: var(--navy);
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 900;
  line-height: 1.1;
}

.service-plan-price span {
  font-size: 1rem;
  font-weight: 700;
}

.service-plan-image {
  min-height: 420px;
  overflow: hidden;
}

.service-plan-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center;
}

/* 含まれる内容・おすすめ・準備物 */
.service-information {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
  padding-top: 20px;
}

.service-information-item {
  padding: 54px 0;
  border-bottom: 1px solid var(--line);
}

.service-information-item h3 {
  position: relative;
  margin: 0 0 26px;
  padding-left: 22px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.service-information-item h3::before {
  content: "";
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0;
  width: 5px;
  background: var(--yellow);
}

.service-information-item > p {
  margin: 22px 0 0;
  color: var(--muted);
}

.service-information-wide {
  grid-column: 1 / -1;
}

.service-preparation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 48px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-preparation-list li {
  position: relative;
  padding-left: 22px;
}

.service-preparation-list li::before {
  content: "";
  position: absolute;
  top: 0.82em;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}

/* サーバー・ドメインの注意事項 */
.service-note {
  margin-top: 64px;
  padding: 10px 0 10px 28px;
  border-left: 6px solid var(--yellow);
}

.service-note h3 {
  margin: 0 0 16px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.service-note p {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
}

.service-note p + p {
  margin-top: 12px;
}

/* WordPressテーマ・ASP・SEO記事 */
.service-guidance {
  margin-top: 76px;
  border-top: 1px solid var(--line);
}

.service-guidance-item {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 30px;
  padding: 42px 0;
  border-bottom: 1px solid var(--line);
}

.service-guidance-number {
  margin: 0;
  color: #e6b600;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

.service-guidance-item h3 {
  margin: 0 0 16px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.service-guidance-item p {
  max-width: 880px;
  margin: 0;
  color: var(--muted);
}

.service-guidance-item p + p {
  margin-top: 12px;
}

.service-guidance-note {
  padding-left: 16px;
  border-left: 3px solid var(--yellow);
  font-size: 0.93rem;
}

.service-guidance-price {
  color: var(--navy) !important;
  font-size: 1.18rem;
  font-weight: 900;
}

/* サービスページ：900px以下 */
@media (max-width: 900px) {
  .service-plan-list {
    grid-template-columns: 1fr;
  }

  .service-plan-summary + .service-plan-summary {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .service-plan-summary h3 {
    min-height: auto;
  }

  .service-plan-header {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .service-plan-image,
  .service-plan-image img {
    min-height: 340px;
  }

  .service-information {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .service-information-wide {
    grid-column: auto;
  }
}

/* サービスページ：560px以下 */
@media (max-width: 560px) {
  .service-plan-overview {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .service-plan-summary {
    padding: 30px 4px 34px;
  }

  .service-plan-detail {
    padding: 78px 0;
  }

  .service-plan-header {
    padding-bottom: 50px;
  }

  .service-plan-image,
  .service-plan-image img {
    min-height: 250px;
  }

  .service-information-item {
    padding: 40px 0;
  }

  .service-preparation-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .service-note {
    margin-top: 48px;
    padding-left: 20px;
  }

  .service-guidance {
    margin-top: 56px;
  }

  .service-guidance-item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 34px 0;
  }

  .service-guidance-number {
    font-size: 1.7rem;
  }
}

.plan-image{
  display:block;
  width:100%;
  height:180px;
  margin: 20 30;
  margin-bottom:20px;
  object-fit:contain;
}
/* =========================================================
   3つの制作プラン一覧
========================================================= */
.service-plan-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 50px;
  border: none;
}


/* =========================================================
   3つの制作プランカード
========================================================= */
.service-plan-summary {
  display: flex;
  flex-direction: column;
  min-width: 0;

  padding: 36px 32px 40px;

  border: 1px solid var(--line);
  border-radius: 10px;

  box-shadow: 0 8px 24px rgba(11, 36, 71, 0.06);
}


/* =========================================================
   PLANごとの背景色
========================================================= */

/* PLAN01 */
.service-plan-summary:nth-child(1) {
  background: #ffffff;
}

/* PLAN02 */
.service-plan-summary:nth-child(2) {
  background: #FFF9EC;
}

/* PLAN03 */
.service-plan-summary:nth-child(3) {
  background: #F5F6F8;
}

/* =========================================================
   32. 料金ページ専用デザイン
   price.htmlだけに使用するCSS

   この章のクラス名は、既存CSSとかぶらないように
   すべて「price2-」から始めています。

   HTMLの該当部分：
   <main class="price2-page"> ... </main>

   注意：
   既存の .price、.price-card、.price-layout、.section、.card などは
   この章では使用していません。
========================================================= */

/* =========================================================
   料金ページ全体
   price.htmlのmain全体の色・専用変数・はみ出し防止
========================================================= */
.price2-page {
  --price2-navy: #0b2447;
  --price2-blue: #1f5f78;
  --price2-teal: #2d8c8c;
  --price2-yellow: #ffd900;
  --price2-orange: #ef7658;
  --price2-green: #79a968;
  --price2-cream: #fffdf8;
  --price2-soft-blue: #eef8f8;
  --price2-soft-yellow: #fff7dc;
  --price2-white: #ffffff;
  --price2-text: #222222;
  --price2-muted: #5d6570;
  --price2-line: #e3ebe9;
  --price2-shadow: 0 18px 50px rgba(11, 36, 71, 0.10);

  overflow: hidden;
  color: var(--price2-text);
  background: var(--price2-white);
}

/* 料金ページ内だけでbox-sizingを統一します。 */
.price2-page *,
.price2-page *::before,
.price2-page *::after {
  box-sizing: border-box;
}

/* 料金ページ内の画像だけに適用します。 */
.price2-page img {
  display: block;
  max-width: 100%;
}

/* 料金ページ内のリンクだけに適用します。 */
.price2-page a {
  text-decoration: none;
}

/* =========================================================
   料金ページ共通の横幅
   Hero・料金内容・オプション・CTAの左右幅をそろえる
========================================================= */
.price2-container {
  width: min(var(--max), calc(100% - 32px));
  margin: 0 auto;
}

/* =========================================================
   料金ページ共通セクション
   各ブロックの上下余白と背景色
========================================================= */
.price2-section {
  position: relative;
  padding: 96px 0;
}

/* 基本料金に含まれない内容の薄い黄色背景です。 */
.price2-section.price2-soft-yellow {
  background: linear-gradient(180deg, #fffdf7 0%, var(--price2-soft-yellow) 100%);
}

/* オプション一覧の薄い水色背景です。 */
.price2-section.price2-soft-blue {
  background: linear-gradient(180deg, #f7fcfc 0%, var(--price2-soft-blue) 100%);
}

/* =========================================================
   料金ページ各セクションの見出し
   「基本料金に含まれる内容」などの中央見出し
========================================================= */
.price2-section-head {
  max-width: 760px;
  margin: 0 auto 54px;
  text-align: center;
}

.price2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  color: var(--price2-teal);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.price2-eyebrow::before,
.price2-eyebrow::after {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--price2-yellow);
}

.price2-section-title {
  margin: 0;
  color: var(--price2-navy);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.35;
}

.price2-section-lead {
  margin: 18px auto 0;
  color: var(--price2-muted);
  line-height: 2;
}

/* =========================================================
   料金ページの3つの安心項目
   「事前確認」「追加料金なし」「架空割引なし」
========================================================= */
.price2-promises {
  position: relative;
  z-index: 3;
  margin-top: 0;
}

.price2-promise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--price2-line);
  border-radius: 22px;
  background: var(--price2-white);
  box-shadow: 0 16px 44px rgba(11, 36, 71, 0.09);
  overflow: hidden;
}

.price2-promise-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  min-height: 130px;
  padding: 28px;
}

.price2-promise-item + .price2-promise-item {
  border-left: 1px solid var(--price2-line);
}

.price2-promise-number {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: var(--price2-soft-yellow);
  color: var(--price2-navy);
  font-size: 1rem;
  font-weight: 900;
}

.price2-promise-item:nth-child(2) .price2-promise-number {
  background: #e3f4f3;
}

.price2-promise-item:nth-child(3) .price2-promise-number {
  background: #ffe8e1;
}

.price2-promise-item h2 {
  margin: 0;
  color: var(--price2-navy);
  font-size: 1rem;
}

.price2-promise-item p {
  margin: 7px 0 0;
  color: var(--price2-muted);
  font-size: 0.82rem;
  line-height: 1.7;
}

/* =========================================================
   基本料金に含まれる内容
   左に人物画像、右に6つの内容カードを表示する部分
========================================================= */
.price2-included-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
  gap: 70px;
  align-items: center;
}

/* 人物画像の後ろに表示する淡い背景の形です。 */
.price2-included-visual {
  position: relative;
}

.price2-included-visual::before {
  content: "";
  position: absolute;
  inset: 8% 2% -7% 8%;
  border-radius: 42% 58% 55% 45% / 47% 40% 60% 53%;
  background: linear-gradient(135deg, #def3f1, #fff0cc);
  transform: rotate(-4deg);
}

/* 基本料金に含まれる内容の人物画像です。 */
.price2-included-visual img {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  margin: 0 auto;
  object-fit: contain;
}

/* 6つの内容カードを2列で並べます。 */
.price2-included-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.price2-included-card {
  min-height: 190px;
  padding: 28px;
  border: 1px solid var(--price2-line);
  border-radius: 20px;
  background: var(--price2-white);
}

.price2-included-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 18px;
  border-radius: 15px;
  background: var(--price2-teal);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 900;
}

.price2-included-card h3 {
  margin: 0;
  color: var(--price2-navy);
  font-size: 1.08rem;
}

.price2-included-card p {
  margin: 11px 0 0;
  color: var(--price2-muted);
  font-size: 0.88rem;
  line-height: 1.8;
}

/* =========================================================
   基本料金に含まれない内容
   ドメイン・有料素材・追加機能などの4カード
========================================================= */
.price2-not-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.price2-not-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 28px;
  border: 1px solid #eadfc3;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
}

.price2-not-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #fff0e9;
  color: var(--price2-orange);
  font-size: 1.15rem;
  font-weight: 900;
}

.price2-not-card h3 {
  margin: 0;
  color: var(--price2-navy);
  font-size: 1rem;
}

.price2-not-card p {
  margin: 8px 0 0;
  color: var(--price2-muted);
  font-size: 0.86rem;
  line-height: 1.8;
}

/* 含まれない内容の下に表示する注意書きです。 */
.price2-not-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  max-width: 880px;
  margin: 38px auto 0;
  padding: 22px 26px;
  border: 1px solid rgba(45, 140, 140, 0.18);
  border-radius: 18px;
  background: var(--price2-white);
}

.price2-not-notice strong {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--price2-teal);
  color: #ffffff;
}

.price2-not-notice p {
  margin: 0;
  line-height: 1.8;
}

/* =========================================================
   料金ページのオプション一覧
   ページ追加・文章作成・予約・決済などの8項目
========================================================= */
.price2-option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.price2-option-card {
  min-height: 162px;
  padding: 27px 22px;
  border: 1px solid var(--price2-line);
  border-radius: 20px;
  background: var(--price2-white);
  text-align: center;
}

.price2-option-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 17px;
  border-radius: 16px;
  background: #e9f7f6;
  color: var(--price2-navy);
  font-weight: 900;
}

.price2-option-card:nth-child(2n) .price2-option-icon {
  background: var(--price2-soft-yellow);
}

.price2-option-card:nth-child(3n) .price2-option-icon {
  background: #ffe9e2;
}

.price2-option-card h3 {
  margin: 0;
  color: var(--price2-navy);
  font-size: 0.96rem;
}

.price2-option-card p {
  margin: 9px 0 0;
  color: var(--price2-muted);
  font-size: 0.78rem;
  line-height: 1.7;
}

/* =========================================================
   料金ページの支払い説明・FAQ誘導
   ページ下部の2枚の横並びカード
========================================================= */
.price2-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.price2-info-card {
  padding: 38px;
  border-radius: 24px;
}

/* 左側の濃紺カードです。 */
.price2-info-card.price2-info-dark {
  color: #ffffff;
  background: linear-gradient(135deg, var(--price2-navy), var(--price2-blue));
}

.price2-info-dark .price2-info-label {
  color: rgba(255, 255, 255, 0.72);
}

.price2-info-dark h2 {
  color: #ffffff;
}

/* 右側の白いFAQカードです。 */
.price2-info-card.price2-info-light {
  border: 1px solid var(--price2-line);
  background: var(--price2-white);
}

.price2-info-label {
  display: block;
  margin-bottom: 24px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  opacity: 0.72;
}

.price2-info-card h2 {
  margin: 0;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  line-height: 1.5;
}

.price2-info-light h2 {
  color: var(--price2-navy);
}

.price2-info-card p {
  margin: 18px 0 0;
  line-height: 1.9;
}

.price2-info-dark p {
  color: rgba(255, 255, 255, 0.82);
}

.price2-info-light p {
  color: var(--price2-muted);
}

.price2-info-card .button {
  margin-top: 24px;
}

/* =========================================================
   料金ページ下部の無料相談CTA
   濃紺背景の「まずは作りたいサイトについて」部分
========================================================= */
.price2-cta {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  color: #ffffff;
  background: linear-gradient(135deg, #102c45 0%, #174c61 100%);
}

.price2-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 50px;
  align-items: center;
}

.price2-cta h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1.45;
}

.price2-cta p {
  max-width: 690px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.9;
}

.price2-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-width: 240px;
}

.price2-cta-actions .button {
  min-height: 56px;
  border-radius: 999px;
}

.price2-cta-link {
  color: rgba(255, 255, 255, 0.80);
  font-size: 0.83rem;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* =========================================================
   料金ページ専用：タブレット表示（900px以下）
   安心項目・含まれる内容・CTAを縦並びにする
========================================================= */
@media (max-width: 900px) {
  .price2-included-layout,
  .price2-cta-inner {
    grid-template-columns: 1fr;
  }

  .price2-promise-grid {
    grid-template-columns: 1fr;
  }

  .price2-promise-item + .price2-promise-item {
    border-top: 1px solid var(--price2-line);
    border-left: 0;
  }

  .price2-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .price2-cta-actions {
    width: min(100%, 360px);
  }
}

/* =========================================================
   料金ページ専用：スマートフォン表示（560px以下）
   カード・オプション・料金一覧を1列にする
========================================================= */
@media (max-width: 560px) {
  .price2-section {
    padding: 72px 0;
  }

  .price2-included-grid,
  .price2-not-grid,
  .price2-option-grid,
  .price2-info-grid {
    grid-template-columns: 1fr;
  }

  .price2-not-card,
  .price2-not-notice {
    grid-template-columns: 1fr;
  }

  .price2-cta {
    padding: 72px 0;
  }
}


/* =========================================================
   料金ページ：3つの料金プラン全体
   下層ページ共通タイトルの下に表示する
   PLAN01・PLAN02・PLAN03のカードセクション
========================================================= */
.price2-page .price2-plans-section {
  position: relative;
  padding: 100px 0;
  background: #ffffff;
}

.price2-page .price2-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}


/* =========================================================
   料金ページ：料金プランカード1枚分
   各プランの番号・画像・名称・料金・内容・ボタン
========================================================= */
.price2-page .price2-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 34px 30px 32px;
  border: 1px solid var(--price2-line);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 14px 36px rgba(11, 36, 71, 0.08);
}

.price2-page .price2-plan-card-simple {
  background: linear-gradient(180deg, #ffffff 0%, #fffdf3 100%);
}

.price2-page .price2-plan-card-recommended {
  border: 3px solid var(--price2-yellow);
  background: linear-gradient(180deg, #fffdf1 0%, #ffffff 100%);
  box-shadow: 0 20px 48px rgba(11, 36, 71, 0.14);
  transform: translateY(-12px);
}

.price2-page .price2-plan-card-wordpress {
  background: linear-gradient(180deg, #f5fbfc 0%, #ffffff 100%);
}


/* =========================================================
   料金ページ：おすすめラベル
   PLAN01「簡単1ページホームページ」のカード上部
========================================================= */
.price2-page .price2-plan-badge {
  position: absolute;
  top: -17px;
  left: 50%;
  min-width: 118px;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--price2-yellow);
  color: var(--price2-navy);
  font-size: 0.84rem;
  font-weight: 900;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 8px 20px rgba(255, 217, 0, 0.28);
}


/* =========================================================
   料金ページ：PLAN01・PLAN02・PLAN03の番号
   各料金カードの一番上に表示する英数字
========================================================= */
.price2-page .price2-plan-number {
  margin: 0 0 20px;
  color: var(--price2-teal);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-align: center;
}


/* =========================================================
   料金ページ：各プランの画像枠
   画像をカード内の横幅いっぱいに見せる
========================================================= */
.price2-page .price2-plan-image {
  height: 190px;
  margin-bottom: 24px;
  overflow: hidden;
  border-radius: 18px;
  background: #f8fafb;
}

.price2-page .price2-plan-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}


/* =========================================================
   料金ページ：各プラン名
   「簡単1ページホームページ」などの見出し
========================================================= */
.price2-page .price2-plan-card h3 {
  min-height: 3.2em;
  margin: 0;
  color: var(--price2-navy);
  font-size: clamp(1.28rem, 2vw, 1.62rem);
  line-height: 1.5;
  text-align: center;
}


/* =========================================================
   料金ページ：各プランの短い説明文
   プラン名の下に表示する対象・用途の説明
========================================================= */
.price2-page .price2-plan-description {
  min-height: 5.4em;
  margin: 16px 0 0;
  color: var(--price2-muted);
  font-size: 0.9rem;
  line-height: 1.8;
  text-align: center;
}


/* =========================================================
   料金ページ：各プランの金額
   79,800円・159,800円を大きく表示する
========================================================= */
.price2-page .price2-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  margin: 24px 0 22px;
  color: var(--price2-navy);
  line-height: 1;
}

.price2-page .price2-plan-price strong {
  font-size: clamp(2.4rem, 4vw, 3.35rem);
  font-weight: 900;
  letter-spacing: -0.05em;
}

.price2-page .price2-plan-price span {
  padding-bottom: 5px;
  font-size: 0.88rem;
  font-weight: 800;
}


/* =========================================================
   料金ページ：各プランに含まれる内容
   料金の下に表示する箇条書き
========================================================= */
.price2-page .price2-plan-list {
  display: grid;
  gap: 10px;
  margin: 0 0 28px;
  padding: 22px 0 0;
  border-top: 1px dashed var(--price2-line);
  list-style: none;
}

.price2-page .price2-plan-list li {
  position: relative;
  padding-left: 25px;
  color: var(--price2-text);
  font-size: 0.88rem;
  line-height: 1.65;
}

.price2-page .price2-plan-list li::before {
  position: absolute;
  top: 0.48em;
  left: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--price2-teal);
  content: "";
}

.price2-page .price2-plan-list li::after {
  position: absolute;
  top: 0.72em;
  left: 5px;
  width: 5px;
  height: 3px;
  border-bottom: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  content: "";
  transform: rotate(-45deg);
}


/* =========================================================
   料金ページ：各プランの相談ボタン
   カード最下部にそろえて表示する
========================================================= */
.price2-page .price2-plan-card .button {
  width: 100%;
  margin-top: auto;
}


/* =========================================================
   料金ページ：3プラン下の料金注意書き
   内容により料金が変わることを説明する
========================================================= */
.price2-page .price2-plan-note {
  max-width: 900px;
  margin: 34px auto 0;
  color: var(--price2-muted);
  font-size: 0.86rem;
  line-height: 1.8;
  text-align: center;
}


/* =========================================================
   料金ページ：3つの料金プラン
   タブレット表示（900px以下）
========================================================= */
@media (max-width: 900px) {
  .price2-page .price2-plan-grid {
    grid-template-columns: 1fr;
    max-width: 680px;
    margin: 0 auto;
  }

  .price2-page .price2-plan-card-recommended {
    transform: none;
  }

  .price2-page .price2-plan-card h3,
  .price2-page .price2-plan-description {
    min-height: auto;
  }
}


/* =========================================================
   料金ページ：3つの料金プラン
   スマートフォン表示（560px以下）
========================================================= */
@media (max-width: 560px) {
  .price2-page .price2-plans-section {
    padding: 72px 0;
  }

  .price2-page .price2-plan-card {
    padding: 32px 22px 26px;
    border-radius: 20px;
  }

  .price2-page .price2-plan-image {
    height: 160px;
  }
}