/* ============================================================
   MACHIKA WEB  style.css  初心者向け編集版
   ============================================================
   このファイルは、元のデザインや動きを変えずに、
   エディターで読みやすいよう整形し、説明コメントを追加したものです。

   【まず覚える場所】
   1. サイト全体の色を変える → すぐ下の :root を変更
   2. コンテンツの最大幅を変える → --max を変更
   3. スマホ表示を調整する → @media(max-width:～) の中を変更
   4. ボタンの見た目 → .button / .button.secondary / .button.accent

   【注意】
   ・「.○○」はHTML側の class 名です。名前自体は変えないでください。
   ・「#○○○○○○」は色コードです。
   ・「px」は大きさ、「gap」は間隔、「padding」は内側余白、
     「margin」は外側余白です。
   ・@media はスマホ・タブレット用の設定です。
   ============================================================ */

/* ============================================================
   01. サイト全体で使う共通カラー・サイズ
   ここを変えると、複数ページの色や幅をまとめて変更できます。
   ============================================================ */
:root {
  --navy: #102a43; /* メインの濃い紺色（見出し・主要ボタンなど） */
  --navy2: #071a2d; /* さらに濃い紺色（フッター・濃色背景） */
  --blue: #1e5f8d; /* リンクや補助アクセントの青 */
  --sky: #eaf3f8; /* 薄い水色の背景 */
  --accent: #c98755; /* アクセント色（茶・オレンジ系） */
  --accent2: #f2e2d4; /* 薄いアクセント背景色 */
  --ink: #25313b; /* 本文の基本文字色 */
  --muted: #66747f; /* 説明文などの薄めの文字色 */
  --line: #dfe5e8; /* 罫線・カード枠線の色 */
  --paper: #f7f8f8; /* 薄いグレー系の背景色 */
  --white: #fff; /* 白色 */
  --max: 1180px; /* 通常コンテンツの最大横幅 */
  --shadow: 0 18px 50px rgba(16,42,67,.10); /* カード・画像などの共通の影 */
}

/* ============================================================
   02. 基本設定・リセット
   全ページ共通の文字、画像、フォームなどの初期設定です。
   通常は触らなくて大丈夫です。
   ============================================================ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}

body {
  margin: 0;
  color: var(--ink);
  background: #fff;
  font-family: "Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height: 1.8;
}

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

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

button,input,textarea,select {
  font: inherit;
}

.skip-link {
  position: fixed;
  left: -9999px;
  top: 0;
  z-index: 999;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
  background: #fff;
  padding: 10px 14px;
}

/* ============================================================
   03. ページ最上部の細い帯（prehead）
   背景色・文字色・高さなどを調整します。
   ============================================================ */
.prehead {
  min-height: 30px;
  padding: 6px 4vw;
  background: var(--navy2);
  color: #d9e7ef;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 9px;
  letter-spacing: .1em;
}

/* ============================================================
   04. ヘッダー・ロゴ・メニュー
   sticky = スクロールしても上部に残る設定です。
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: min(var(--max),calc(100% - 40px));
  min-height: 78px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 11px;
}

.logo-mark {
  width: 52px;
  height: auto;
  aspect-ratio: 192/181;
  object-fit: contain;
  flex: 0 0 auto;
}

.logo b {
  display: block;
  color: var(--navy);
  font: 700 19px/1.1 Georgia,serif;
  letter-spacing: .08em;
}

.logo small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .1em;
}

.global-nav {
  display: flex;
  align-items: center;
  gap: 3px;
}

.global-nav a {
  padding: 11px 9px;
  font-size: 11px;
  font-weight: 700;
  position: relative;
}

.global-nav a[aria-current="page"] {
  color: var(--blue);
}

.global-nav a:not(.header-cta)::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 4px;
  height: 1px;
  background: var(--accent);
  transition: .2s;
}

.global-nav a:hover::after,.global-nav a[aria-current="page"]::after {
  left: 9px;
  right: 9px;
}

.header-cta {
  margin-left: 6px!important;
  background: var(--navy)!important;
  color: #fff!important;
  border-radius: 999px;
  padding: 11px 17px!important;
}

.menu-toggle {
  display: none;
  border: 0;
  background: none;
}

/* ============================================================
   05. トップページのメインビジュアル（HERO）
   見出し・説明文・ボタン・画像エリアの設定です。
   ============================================================ */
/* トップページ：HEROセクション全体の上下余白は20pxに統一 */
.hero {
  overflow: hidden;
  padding: 20px 0;
  background: linear-gradient(135deg,#f8fbfc 0%,#edf4f7 55%,#f7eee8 100%);
}

.hero-inner {
  width: min(1280px,calc(100% - 40px));
  min-height: 690px;
  margin: auto;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 45px;
  align-items: center;
}

.hero-copy {
  padding: 0;
}

.eyebrow,.kicker {
  display: block;
  color: var(--accent);
  font: 700 10px/1.3 Georgia,serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 18px 0 25px;
  color: var(--navy);
  font-family: Georgia,"Yu Mincho",serif;
  font-weight: 500;
  font-size: clamp(38px,5vw,68px);
  line-height: 1.32;
  letter-spacing: .02em;
}

.hero h1 em {
  font-style: normal;
  color: var(--blue);
}

.hero-lead {
  max-width: 590px;
  color: #556671;
  font-size: 14px;
}

/* --- ボタンを複数並べる共通エリア --- */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* --- 共通ボタン ---
   background = ボタン色 / color = 文字色 / padding = ボタン内余白
   border-radius を追加すると角を丸くできます。 */
.button {
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
  transition: .2s;
}

.button:hover {
  transform: translateY(-2px);
}

.button.secondary {
  background: #fff;
  color: var(--navy);
}

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

.hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 25px;
}

.hero-note span {
  padding: 6px 9px;
  border: 1px solid #dce4e8;
  background: rgba(255,255,255,.72);
  color: #64737d;
  font-size: 10px;
}

/* トップページ：文章の高さに対して画像が小さく見えないよう、PCでは画像エリアを広げる */
.hero-gallery {
  position: relative;
  min-height: 700px;
}

.mock {
  position: absolute;
  border: 8px solid #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  background: #ddd;
}

.mock img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mock.main {
  width: 68%;
  height: 58%;
  right: 1%;
  top: 4%;
}

.mock.left {
  width: 45%;
  height: 37%;
  left: 0;
  bottom: 10%;
}

.mock.small {
  width: 34%;
  height: 27%;
  right: 7%;
  bottom: 1%;
}

.mock-label {
  position: absolute;
  left: 12px;
  bottom: 10px;
  background: rgba(7,26,45,.88);
  color: #fff;
  padding: 6px 9px;
  font-size: 9px;
}

/* ============================================================
   06. HERO下の実績・特徴などの帯（trustbar）
   ============================================================ */
.trustbar {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.trustbar-inner {
  width: min(var(--max),calc(100% - 40px));
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5,1fr);
}

.trustbar div {
  padding: 26px 17px;
  text-align: center;
  border-right: 1px solid var(--line);
}

.trustbar div:last-child {
  border-right: 0;
}

.trustbar b {
  display: block;
  color: var(--navy);
  font-size: 12px;
}

.trustbar span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

/* ============================================================
   07. 共通セクション
   --max と padding が、各ページの横幅・上下余白の基本です。
   ============================================================ */
.section {
  width: min(var(--max),calc(100% - 40px));
  margin: auto;
  padding: 38px 0;
}

.section.wide {
  width: min(1280px,calc(100% - 40px));
}

.section-head {
  max-width: 760px;
  margin: 0 auto 45px;
  text-align: center;
}

.section-head h2,.page-title h1,.cta-band h2 {
  margin: 12px 0 16px;
  color: var(--navy);
  font: 500 clamp(30px,3.7vw,48px)/1.4 Georgia,"Yu Mincho",serif;
}

.section-head p,.page-title p {
  margin: 0;
  color: var(--muted);
}

/* ============================================================
   08. サービスカード
   grid-template-columns の数で、PC時の横並び枚数を変更できます。
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.service-card {
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 30px rgba(16,42,67,.04);
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--sky);
  display: grid;
  place-items: center;
  color: var(--blue);
  font-size: 21px;
}

.service-card h3 {
  margin: 18px 0 10px;
  color: var(--navy);
  font-size: 17px;
}

.service-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.service-card ul,.check-list {
  padding: 0;
  margin: 18px 0 0;
  list-style: none;
}

.service-card li,.check-list li {
  position: relative;
  padding-left: 21px;
  margin: 7px 0;
  font-size: 11px;
  color: #56636c;
}

.service-card li::before,.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
}

.bg-soft {
  background: var(--paper);
}

/* ============================================================
   09. 料金プランカード
   recommend が「おすすめ」プランの強調表示です。
   ============================================================ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

.plan {
  position: relative;
  padding: 33px 28px;
  border: 1px solid var(--line);
  background: #fff;
}

.plan.recommend {
  border: 2px solid var(--navy);
  box-shadow: var(--shadow);
}

.plan-badge {
  position: absolute;
  right: 15px;
  top: 15px;
  padding: 5px 8px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
}

.plan small {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .14em;
}

.plan h3 {
  margin: 8px 0 18px;
  color: var(--navy);
  font: 500 24px/1.3 Georgia,"Yu Mincho",serif;
}

.plan-price {
  margin: 0;
  color: var(--navy);
  font: 500 35px/1 Georgia,serif;
}

.plan-price span {
  font: 700 12px/1 sans-serif;
}

.plan>p {
  color: var(--muted);
  font-size: 12px;
}

.plan .button {
  width: 100%;
  margin-top: 22px;
}

/* ============================================================
   10. 比較表（旧共通テーブル）
   表が横に大きい場合は、後半の比較カード版も使用されています。
   ============================================================ */
.compare {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 12px;
}

.compare th,.compare td {
  padding: 15px 13px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.compare th {
  background: #eef4f7;
  color: var(--navy);
}

.compare td:not(:first-child),.compare th:not(:first-child) {
  text-align: center;
}

/* ============================================================
   11. 制作サンプル・デモカード
   sample-image = 画像 / sample-body = 説明 / sample-links = ボタン
   ============================================================ */
.sample-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 22px;
}

.sample-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  transition: .25s;
}

.sample-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.sample-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: #d8dde0;
}

.sample-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s;
}

.sample-card:hover img {
  transform: scale(1.035);
}

.sample-body {
  padding: 21px;
}

.sample-body small {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .12em;
}

.sample-body h3 {
  margin: 7px 0;
  color: var(--navy);
  font-size: 17px;
}

.sample-body p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.sample-links {
  display: flex;
  gap: 8px;
  margin-top: 17px;
}

.sample-links a {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid var(--navy);
  text-align: center;
  font-size: 10px;
  font-weight: 800;
}

.sample-links .primary {
  background: var(--navy);
  color: #fff;
}

/* ============================================================
   12. 2種類の違いを説明するカード
   ============================================================ */
.difference {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px;
}

.difference article {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
}

.difference h3 {
  margin: 0 0 9px;
  color: var(--navy);
  font-size: 20px;
}

.difference p {
  color: var(--muted);
  font-size: 12px;
}

/* ============================================================
   13. ご相談から公開までの流れ
   ============================================================ */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.flow-steps article {
  padding: 28px;
  background: #fff;
}

/* 制作の流れ：見出し＋画像＋説明文カード */
.flow-steps .flow-image-card {
  padding: 18px;
}

.flow-image-heading {
  margin-bottom: 12px;
  text-align: center;
}

.flow-steps .flow-image-heading b {
  display: block;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.5;
}

.flow-steps .flow-image-heading span {
  display: block;
  margin: 3px 0 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.flow-steps .flow-image-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.flow-steps .flow-image-card p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px; /* 画像下の説明文：PCでも読みやすく少し大きめ */
  line-height: 1.8;
}

.flow-steps b {
  display: block;
  color: var(--navy);
  font-size: 15px;
}

.flow-steps span {
  display: block;
  margin-bottom: 9px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.flow-steps p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
}

/* ============================================================
   14. ページ途中・下部の大きなお問い合わせ導線（CTA）
   ============================================================ */
.cta-band {
  background: linear-gradient(135deg,var(--navy),#1b5073);
  color: #fff;
  padding: 80px 7vw;
  text-align: center;
}

.cta-band .kicker {
  color: #ebc9ae;
}

.cta-band h2 {
  color: #fff;
}

.cta-band p {
  max-width: 700px;
  margin: 0 auto;
  color: rgba(255,255,255,.72);
}

.cta-band .actions {
  justify-content: center;
}

.cta-band .button {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

.cta-band .button.secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}

/* ============================================================
   15. 下層ページのページタイトル
   ============================================================ */
.page-title {
  padding: 75px 20px 65px;
  background: linear-gradient(135deg,#f4f8fa,#f7eee8);
  text-align: center;
}

.page-title h1 {
  margin-top: 13px;
}

.content-two {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 70px;
  align-items: start;
}

.content-two h2 {
  margin-top: 0;
  color: var(--navy);
  font: 500 32px/1.45 Georgia,"Yu Mincho",serif;
}

.content-two p {
  color: var(--muted);
}

.note-box {
  padding: 22px;
  border-left: 3px solid var(--accent);
  background: #fbf7f4;
  color: #5f676e;
  font-size: 12px;
}

.option-list {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}

.option {
  padding: 19px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.option b {
  color: var(--navy);
  font-size: 12px;
}

.option span {
  color: var(--accent);
  font-weight: 800;
  font-size: 12px;
}

/* ============================================================
   16. よくある質問（FAQ）
   ============================================================ */
.faq-list {
  max-width: 900px;
  margin: auto;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item button {
  width: 100%;
  padding: 20px 4px;
  border: 0;
  background: none;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  text-align: left;
  font-weight: 800;
}

.faq-item button span:last-child {
  font-size: 20px;
}

.faq-answer {
  padding: 0 4px 20px;
  color: var(--muted);
  font-size: 12px;
}

/* ============================================================
   17. お問い合わせページ
   左：案内 / 右：フォーム のレイアウトです。
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 50px;
}

.contact-info {
  padding: 30px;
  background: var(--navy);
  color: #fff;
}

.contact-info h2 {
  font-family: Georgia,"Yu Mincho",serif;
  font-weight: 500;
}

.contact-info p {
  color: rgba(255,255,255,.72);
  font-size: 12px;
}

.contact-info ul {
  padding: 0;
  list-style: none;
}

.contact-info li {
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: 11px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 17px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.field label {
  font-size: 11px;
  font-weight: 800;
  color: var(--navy);
}

.field input,.field textarea,.field select {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--line);
  background: #fff;
}

.field textarea {
  min-height: 170px;
  resize: vertical;
}

.form-note {
  grid-column: 1/-1;
  padding: 12px;
  background: #fff6ed;
  color: #795d49;
  font-size: 10px;
}

.contact-form .button {
  grid-column: 1/-1;
}

.privacy h2 {
  margin-top: 35px;
  color: var(--navy);
  font-size: 19px;
}

.privacy p,.privacy li {
  color: var(--muted);
  font-size: 12px;
}

/* ============================================================
   18. フッター
   ============================================================ */
.site-footer {
  background: var(--navy2);
  color: #fff;
  padding: 55px 0 20px;
}

.footer-main {
  width: min(var(--max),calc(100% - 40px));
  margin: auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(3,1fr);
  gap: 45px;
}

.logo.inverse b {
  color: #fff;
}

.logo.inverse small {
  color: rgba(255,255,255,.5);
}

.footer-brand p {
  max-width: 390px;
  color: rgba(255,255,255,.6);
  font-size: 11px;
}

.footer-main h3 {
  margin: 0 0 13px;
  color: #fff;
  font-size: 12px;
}

.footer-main>div:not(.footer-brand) a {
  display: block;
  padding: 5px 0;
  color: rgba(255,255,255,.65);
  font-size: 10px;
}

.footer-bottom {
  width: min(var(--max),calc(100% - 40px));
  margin: 35px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255,255,255,.4);
  font-size: 9px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 25px;
  z-index: 150;
  transform: translateX(-50%);
  padding: 13px 18px;
  background: var(--navy2);
  color: #fff;
  box-shadow: var(--shadow);
  font-size: 11px;
}

/* ============================================================
   19. タブレット用レスポンシブ設定（画面幅 980px 以下）
   PCの横並びを2列や1列に変更する設定です。
   ============================================================ */
@media(max-width:980px) {
  .global-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 78px;
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    grid-template-columns: repeat(2,1fr);
    gap: 6px;
  }

  .global-nav.open {
    display: grid;
  }

  .global-nav a {
    border: 1px solid var(--line);
    text-align: center;
  }

  .header-cta {
    margin: 0!important;
  }

  .menu-toggle {
    display: block;
    width: 48px;
    height: 48px;
  }

  .menu-toggle span {
    display: block;
    margin: 5px auto;
    width: 24px;
    height: 1px;
    background: var(--navy);
  }

  .menu-toggle span:last-child {
    height: auto;
    background: none;
    font-size: 7px;
    letter-spacing: .12em;
  }

  .hero-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero-copy {
    padding: 0 3vw;
  }

  .hero-gallery {
    min-height: 500px;
  }

  /* タブレット以下は従来の画像の重なりを維持 */
  .mock.main {
    top: 10%;
    height: 69%;
  }

  .mock.left {
    height: 43%;
    bottom: 7%;
  }

  .mock.small {
    height: 31%;
    bottom: 0;
  }

  .trustbar-inner {
    grid-template-columns: repeat(3,1fr);
  }

  .trustbar div:nth-child(3) {
    border-right: 0;
  }

  .service-grid,.plan-grid,.sample-grid {
    grid-template-columns: 1fr 1fr;
  }

  .flow-steps {
    grid-template-columns: 1fr 1fr;
  }

  .footer-main {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  .footer-main>div:last-child {
    grid-column: 2/4;
  }

  .content-two,.contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-info {
    order: 2;
  }

}

/* ============================================================
   20. スマートフォン用レスポンシブ設定（画面幅 640px 以下）
   スマホで文字・カード・ボタンが見やすくなるよう調整します。
   ============================================================ */
@media(max-width:640px) {
  .prehead {
    justify-content: center;
    text-align: center;
  }

  .prehead div:last-child {
    display: none;
  }

  .header-inner {
    width: calc(100% - 24px);
  }

  .logo-mark {
    width: 44px;
    height: auto;
  }

  .logo b {
    font-size: 16px;
  }

  .global-nav {
    top: 78px;
  }

  .hero-inner,.section,.section.wide,.footer-main,.footer-bottom {
    width: calc(100% - 24px);
  }

  .hero-inner {
    min-height: auto;
  }

  .hero h1 {
    font-size: 10.5vw;
  }

  .hero-gallery {
    min-height: 380px;
  }

  .mock.main {
    width: 76%;
    height: 60%;
  }

  .mock.left {
    width: 48%;
    height: 38%;
  }

  .mock.small {
    width: 39%;
    height: 31%;
  }

  .trustbar-inner {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .trustbar div {
    border-bottom: 1px solid var(--line);
  }

  .trustbar div:nth-child(odd) {
    border-right: 1px solid var(--line);
  }

  .service-grid,.plan-grid,.sample-grid,.difference,.flow-steps,.option-list {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 65px 0;
  }

  .compare {
    font-size: 10px;
  }

  .compare th,.compare td {
    padding: 10px 6px;
  }

  .flow-steps article {
    border-bottom: 1px solid var(--line);
  }

  /* 制作の流れ：スマホでは画像下の説明文をさらに読みやすく */
  .flow-steps .flow-image-card p {
    font-size: 16px;
    line-height: 1.9;
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .footer-brand {
    grid-column: 1/-1;
  }

  .footer-main>div:last-child {
    grid-column: auto;
  }

  .footer-bottom {
    display: block;
    text-align: center;
  }

  .footer-bottom span {
    display: block;
    margin: 5px;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }

  .field.full,.contact-form .button,.form-note {
    grid-column: auto;
  }

  .sample-links {
    flex-direction: column;
  }

}

/* 特定商取引法に基づく表記 */
.legal-page {
  max-width: 1000px;
}

.legal-warning {
  margin-bottom: 30px;
}

.legal-table {
  margin: 0;
  border-top: 1px solid var(--line);
}

.legal-table>div {
  display: grid;
  grid-template-columns: 230px 1fr;
  border-bottom: 1px solid var(--line);
}

.legal-table dt {
  padding: 20px 22px;
  background: #f3f7f9;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
}

.legal-table dd {
  margin: 0;
  padding: 20px 24px;
  color: var(--muted);
  font-size: 12px;
}

.legal-table dd a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-table small {
  color: #7b858d;
}

.placeholder {
  color: #a2553e;
  font-weight: 800;
}

@media(max-width:640px) {
  .legal-table>div {
    grid-template-columns: 1fr;
  }

  .legal-table dt {
    padding: 13px 15px;
    border-bottom: 1px dashed var(--line);
  }

  .legal-table dd {
    padding: 15px;
  }

}

/* 制作者紹介・お役立ち記事 */
.text-link {
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.proof-panel {
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.proof-panel>b {
  color: var(--navy);
  font-size: 16px;
}

.guide-card {
  max-width: 920px;
  margin: auto;
  padding: 30px 34px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 35px;
  box-shadow: 0 8px 30px rgba(16,42,67,.05);
}

.guide-card span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.guide-card h3 {
  margin: 7px 0;
  color: var(--navy);
  font-size: 21px;
}

.guide-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.guide-card .button {
  flex: 0 0 auto;
}

.price-summary {
  margin: 0 0 28px;
  padding: 15px 18px;
  border: 1px solid #ead7c7;
  background: #fff9f4;
  color: #6b5749;
  text-align: center;
  font-size: 12px;
}

.about-profile {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 65px;
  align-items: start;
}

.about-message h2 {
  margin: 12px 0 22px;
  color: var(--navy);
  font: 500 36px/1.45 Georgia,"Yu Mincho",serif;
}

.about-message p {
  color: var(--muted);
  font-size: 13px;
}

.profile-table {
  margin: 0;
  border-top: 1px solid var(--line);
}

.profile-table>div {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 1px solid var(--line);
}

.profile-table dt,.profile-table dd {
  margin: 0;
  padding: 16px 14px;
  font-size: 12px;
}

.profile-table dt {
  background: #f3f7f9;
  color: var(--navy);
  font-weight: 800;
}

.profile-table dd {
  color: var(--muted);
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.value-grid article {
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff;
}

.value-grid b {
  color: var(--accent);
  font: 500 25px/1 Georgia,serif;
}

.value-grid h3 {
  margin: 18px 0 8px;
  color: var(--navy);
}

.value-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.owned-site-card {
  padding: 32px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.owned-site-card small {
  color: var(--accent);
  font-weight: 800;
  letter-spacing: .12em;
}

.owned-site-card h3 {
  margin: 10px 0;
  color: var(--navy);
  font: 500 27px/1.4 Georgia,"Yu Mincho",serif;
}

.owned-site-card p {
  font-size: 12px;
}

.owned-site-card>span {
  display: block;
  margin-top: 20px;
  color: #818b92;
  font-size: 10px;
}

.guide-hero {
  padding: 80px 20px 65px;
  background: linear-gradient(135deg,#f4f8fa,#f7eee8);
  text-align: center;
}

.guide-hero h1 {
  margin: 15px auto 20px;
  max-width: 900px;
  color: var(--navy);
  font: 500 clamp(32px,4.5vw,55px)/1.45 Georgia,"Yu Mincho",serif;
}

.guide-hero>p {
  max-width: 760px;
  margin: auto;
  color: var(--muted);
}

.article-meta {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 22px;
  color: #7b858d;
  font-size: 10px;
}

.guide-body {
  width: min(860px,calc(100% - 40px));
  margin: auto;
  padding: 70px 0 90px;
}

.guide-body>p,.guide-body section>p {
  color: var(--muted);
  font-size: 14px;
}

.guide-toc {
  margin-bottom: 55px;
  padding: 28px 32px;
  border: 1px solid var(--line);
  background: var(--paper);
}

.guide-toc>b {
  color: var(--navy);
}

.guide-toc ol {
  margin: 15px 0 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 45px;
}

.guide-toc li {
  margin: 7px 0;
  color: var(--blue);
  font-size: 12px;
}

.guide-body>section {
  position: relative;
  margin-top: 65px;
  padding-top: 8px;
}

.guide-body>section:not(.guide-choice) {
  padding-left: 60px;
}

.guide-body h2 {
  margin: 0 0 18px;
  color: var(--navy);
  font: 500 28px/1.5 Georgia,"Yu Mincho",serif;
}

.guide-number {
  position: absolute;
  left: 0;
  top: 7px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font: 500 17px/1 Georgia,serif;
}

.guide-choice {
  padding: 35px!important;
  background: var(--paper);
}

.guide-choice .difference {
  margin: 25px 0;
}

.guide-choice .difference article {
  padding: 25px;
}

.contact-response {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
}

.contact-response b,.contact-response span {
  display: block;
}

.contact-response b {
  font-size: 12px;
}

.contact-response span {
  margin-top: 4px;
  color: rgba(255,255,255,.65);
  font-size: 9px;
}

@media(max-width:780px) {
  .guide-card,.about-profile {
    grid-template-columns: 1fr;
  }

  .guide-card {
    display: block;
  }

  .guide-card .button {
    margin-top: 22px;
  }

  .about-profile {
    gap: 35px;
  }

  .value-grid {
    grid-template-columns: 1fr;
  }

  .guide-toc ol {
    columns: 1;
  }

  .article-meta {
    display: block;
  }

  .article-meta span {
    display: block;
    margin: 5px;
  }

  .guide-body>section:not(.guide-choice) {
    padding-left: 0;
    padding-top: 60px;
  }

  .guide-number {
    top: 0;
  }

  .profile-table>div {
    grid-template-columns: 105px 1fr;
  }

}

/* 2026-08-29: アクセント文字・CTAボタンを見やすい濃いブラウンに調整 */
.eyebrow, .kicker {
  color: #9f5f35;
}

/* 濃色背景上の英字見出しは可読性を保つ */
.cta-band .kicker {
  color: #ebc9ae;
}

/* ONE PAGE / STANDARD / CUSTOM など料金プランの小見出し */
.plan small {
  color: #9f5f35;
}

/* トップの「無料で相談する」アクセントボタン */
.button.accent {
  background: #9f5f35;
  border-color: #9f5f35;
}

/* 料金表示：数字を読み取りやすいゴシック体に */
.plan-price {
  font-family: Arial, "Helvetica Neue", "Yu Gothic", Meiryo, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}

.plan-price span {
  font-family: Arial, "Helvetica Neue", "Yu Gothic", Meiryo, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
}

/* ============================================================
   無料CGI紹介ページ
   カード一覧・説明・ボタンなどの設定です。
   ============================================================ */
.free-cgi-intro {
  position: relative;
}

.free-cgi-mini-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  margin: 0 0 30px;
}

.free-cgi-mini-grid article {
  padding: 26px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 30px rgba(16,42,67,.04);
}

.free-cgi-mini-grid article>span {
  color: #9f5f35;
  font: 700 20px/1 Georgia,serif;
}

.free-cgi-mini-grid h3 {
  margin: 13px 0 8px;
  color: var(--navy);
  font-size: 16px;
}

.free-cgi-mini-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.free-cgi-about-card {
  margin-top: 18px;
}

.page-hero {
  padding: 82px 20px 68px;
  background: linear-gradient(135deg,#f4f8fa 0%,#eef4f7 55%,#f7eee8 100%);
  text-align: center;
}

.page-title {
  width: min(900px,100%);
  margin: auto;
}

.page-title p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--muted);
}

.free-cgi-hero .page-title h1 {
  font-size: clamp(34px,4.5vw,56px);
}

.free-cgi-lead {
  padding-bottom: 65px;
}

.free-cgi-notice {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 24px;
  border: 1px solid #ead7c7;
  background: #fff9f4;
}

.free-cgi-notice b {
  display: block;
  margin-bottom: 5px;
  color: #6b5749;
  font-size: 12px;
}

.free-cgi-notice p {
  margin: 0;
  color: #79685b;
  font-size: 11px;
}

.free-cgi-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 22px;
  align-items: stretch;
}

.free-cgi-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 35px rgba(16,42,67,.05);
}

.free-cgi-card.featured {
  border-top: 4px solid var(--accent);
}

.free-cgi-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.free-cgi-no {
  color: var(--navy);
  font: 500 25px/1 Georgia,serif;
}

.free-cgi-badge {
  padding: 5px 9px;
  background: #f4e6da;
  color: #8a512e;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

.free-cgi-badge.muted {
  background: var(--sky);
  color: var(--blue);
}

.free-cgi-card h2 {
  margin: 8px 0 10px;
  color: var(--navy);
  font: 500 24px/1.45 Georgia,"Yu Mincho",serif;
}

.free-cgi-summary {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.free-cgi-card .check-list {
  margin-bottom: 25px;
}

.free-cgi-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}

.free-cgi-actions .button {
  width: 100%;
}

.free-cgi-actions .text-link {
  text-align: center;
  font-size: 10px;
}

.free-cgi-support h2 {
  margin: 12px 0 18px;
  color: var(--navy);
  font: 500 34px/1.45 Georgia,"Yu Mincho",serif;
}

.free-cgi-support p {
  color: var(--muted);
  font-size: 13px;
}

@media(max-width:980px) {
  .free-cgi-grid {
    grid-template-columns: 1fr 1fr;
  }

  .free-cgi-mini-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media(max-width:640px) {
  .free-cgi-grid,.free-cgi-mini-grid {
    grid-template-columns: 1fr;
  }

  .page-hero {
    padding: 62px 16px 52px;
  }

  .free-cgi-card {
    padding: 24px;
  }

  .free-cgi-support h2 {
    font-size: 28px;
  }

}

/* ============================================================
   お役立ちガイド：記事一覧・記事カード
   ============================================================ */
.guide-list {
  display: grid;
  gap: 18px;
  margin-top: 28px;
}

.guide-list .guide-card {
  height: 100%;
}

.guide-list-home {
  grid-template-columns: repeat(2,minmax(0,1fr));
}

.guide-more {
  justify-content: center;
  margin-top: 26px;
}

.guide-card h2 {
  margin: 8px 0 10px;
  font-size: clamp(1.2rem,2vw,1.55rem);
  line-height: 1.45;
}

.guide-body a:not(.button) {
  color: #1b5073;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width:760px) {
  .guide-list-home {
    grid-template-columns: 1fr;
  }

  .guide-list {
    gap: 14px;
  }

}

/* お役立ちガイド一覧だけ、カード幅をそろえる設定 */
.guide-list:not(.guide-list-home) {
  max-width: 920px;
  margin: 28px auto 0;
}

.guide-list:not(.guide-list-home) .guide-card {
  width: 100%;
  max-width: none;
  margin: 0;
}

/* ============================================================
   店舗向けCMS：紹介セクション
   飲食店CMSなどの大きな紹介画像・特徴カード・デモ欄です。
   ============================================================ */
.cms-home-feature {
  background: linear-gradient(135deg,#102a43 0%,#173f5c 58%,#604331 100%);
  color: #fff;
}

.cms-home-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 58px;
  align-items: center;
}

.cms-home-copy .kicker,.cms-static-band .kicker {
  color: #ebc9ae;
}

.cms-home-copy h2,.cms-static-band h2 {
  margin: 12px 0 18px;
  color: #fff;
  font: 500 clamp(30px,3.5vw,46px)/1.42 Georgia,"Yu Mincho",serif;
}

.cms-home-copy>p,.cms-static-band p {
  color: rgba(255,255,255,.76);
  font-size: 13px;
}

.cms-home-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.cms-home-points span {
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.07);
  font-size: 10px;
}

.cms-home-feature .button {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}

.cms-home-feature .button.secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}

.cms-home-preview,.cms-product-photo,.cms-service-photo {
  position: relative;
  display: block;
  overflow: hidden;
  background: #d7d8d3;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

.cms-home-preview {
  border: 8px solid rgba(255,255,255,.92);
  border-radius: 12px;
  aspect-ratio: 16/10;
}

.cms-home-preview img,.cms-product-photo img,.cms-service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cms-home-preview strong {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  padding: 13px 15px;
  background: rgba(7,26,45,.88);
  color: #fff;
  font-size: 12px;
}

.cms-preview-label {
  position: absolute;
  right: 14px;
  top: 14px;
  padding: 6px 9px;
  background: #fff;
  color: var(--navy);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.cms-service-band {
  background: #fff;
}

.cms-service-grid {
  display: grid;
  grid-template-columns: 1fr .82fr;
  gap: 60px;
  align-items: center;
}

.cms-service-grid h2,.cms-product-intro h2,.cms-demo-box h2 {
  margin: 12px 0 18px;
  color: var(--navy);
  font: 500 clamp(29px,3.2vw,43px)/1.45 Georgia,"Yu Mincho",serif;
}

.cms-service-grid p {
  color: var(--muted);
  font-size: 13px;
}

.cms-service-photo {
  aspect-ratio: 4/3;
  border-radius: 4px;
}

.cms-service-photo span,.cms-product-photo span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 10px;
  background: rgba(7,26,45,.88);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}

.cms-product-title .actions {
  margin-top: 28px;
}

.cms-product-intro-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 64px;
  align-items: center;
}

.cms-product-intro p {
  color: var(--muted);
  font-size: 13px;
}

.cms-product-photo {
  aspect-ratio: 16/10;
  border: 8px solid #fff;
  box-shadow: var(--shadow);
}

.cms-callout {
  margin-top: 24px;
  padding: 20px 22px;
  border-left: 4px solid #9f5f35;
  background: #fbf7f4;
}

.cms-callout b,.cms-callout span {
  display: block;
}

.cms-callout b {
  color: var(--navy);
  font-size: 12px;
}

.cms-callout span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.cms-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
}

.cms-feature-grid article {
  padding: 28px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 28px rgba(16,42,67,.04);
}

.cms-feature-grid article>b {
  color: #9f5f35;
  font: 700 19px/1 Georgia,serif;
}

.cms-feature-grid h3 {
  margin: 14px 0 8px;
  color: var(--navy);
  font-size: 16px;
}

.cms-feature-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.cms-step-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.cms-step-grid article {
  padding: 30px;
  background: #fff;
}

.cms-step-grid span {
  color: #9f5f35;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.cms-step-grid h3 {
  margin: 12px 0 8px;
  color: var(--navy);
  font-size: 17px;
}

.cms-step-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.cms-static-band {
  background: linear-gradient(135deg,#102a43,#1b5073);
  color: #fff;
}

.cms-static-grid {
  display: grid;
  grid-template-columns: 1fr .72fr;
  gap: 65px;
  align-items: center;
}

.cms-tech-card {
  padding: 30px;
  background: #fff;
  color: var(--ink);
}

.cms-tech-card>b {
  color: var(--navy);
  font-size: 15px;
}

.cms-demo-box {
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 48px;
  align-items: center;
  padding: 42px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.cms-demo-box>div>p {
  color: var(--muted);
  font-size: 12px;
}

.cms-demo-note {
  margin-top: 20px;
  padding: 16px 18px;
  border: 1px solid #ead7c7;
  background: #fff9f4;
}

.cms-demo-note b,.cms-demo-note span {
  display: block;
}

.cms-demo-note b {
  color: #6b5749;
  font-size: 12px;
}

.cms-demo-note span {
  margin-top: 4px;
  color: #79685b;
  font-size: 11px;
}

.cms-demo-password {
  margin-top: 15px!important;
}

.cms-demo-password code {
  padding: 4px 8px;
  background: var(--navy);
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
}

.cms-demo-menu-preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cms-demo-menu-preview img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

@media(max-width:900px) {
  .cms-home-grid,.cms-service-grid,.cms-product-intro-grid,.cms-static-grid,.cms-demo-box {
    grid-template-columns: 1fr;
  }

  .cms-home-preview {
    max-width: 720px;
  }

  .cms-feature-grid {
    grid-template-columns: 1fr 1fr;
  }

  .cms-demo-menu-preview {
    max-width: 650px;
  }

  .cms-service-photo {
    max-height: 470px;
  }

}

@media(max-width:640px) {
  .cms-feature-grid,.cms-step-grid {
    grid-template-columns: 1fr;
  }

  .cms-demo-box {
    padding: 25px;
  }

  .cms-home-grid {
    gap: 35px;
  }

  .cms-home-preview {
    border-width: 5px;
  }

  .cms-home-preview strong {
    position: static;
    display: block;
    background: var(--navy);
  }

  .cms-product-photo {
    border-width: 5px;
  }

}

/* 店舗向けCMS：料金表示 */
.cms-price-feature {
  margin-top: 28px;
  padding: 30px;
  border: 2px solid var(--navy);
  background: #fff;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 28px;
  align-items: center;
  box-shadow: 0 16px 40px rgba(16,42,67,.08);
}

.cms-price-copy h3 {
  margin: 7px 0 12px;
  color: var(--navy);
  font: 500 27px/1.35 Georgia,"Yu Mincho",serif;
}

.cms-price-copy>p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.cms-price-points {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.cms-price-points span {
  padding: 5px 8px;
  background: var(--sky);
  color: var(--navy);
  font-size: 9px;
  font-weight: 800;
}

.cms-price-side {
  padding: 23px;
  background: #f7f2ed;
  text-align: center;
}

.campaign-label {
  display: inline-block;
  padding: 5px 9px;
  background: #9f5f35;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.cms-campaign-price {
  margin: 12px 0 5px;
  color: var(--navy);
  font: 800 38px/1.05 Arial,"Helvetica Neue","Yu Gothic",Meiryo,sans-serif;
}

.cms-campaign-price span {
  font-size: 12px;
}

.cms-regular-price {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 11px;
}

.cms-regular-price strong {
  color: var(--navy);
}

.cms-price-side .button {
  width: 100%;
  margin-top: 4px;
}

.cms-price-note {
  grid-column: 1/-1;
  margin: 0!important;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: #736960!important;
  font-size: 10px!important;
}

@media(max-width:760px) {
  .cms-price-feature {
    grid-template-columns: 1fr;
    padding: 23px;
  }

  .cms-price-side {
    padding: 20px;
  }

  .cms-campaign-price {
    font-size: 34px;
  }

}

/* 無料CGI → 店舗CMS 導線 */
.free-cgi-to-cms {
  padding-top: 80px;
  padding-bottom: 80px;
}

.free-cgi-cms-compare {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1040px;
  margin: 0 auto;
}

.free-cgi-cms-card {
  padding: 32px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 35px rgba(16,42,67,.05);
}

.free-cgi-cms-card.cms-side {
  border: 2px solid var(--navy);
  background: linear-gradient(180deg,#fff 0%,#f4f8fa 100%);
}

.free-cgi-cms-label {
  display: inline-block;
  padding: 6px 10px;
  background: var(--sky);
  color: var(--navy);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.free-cgi-cms-card.cms-side .free-cgi-cms-label {
  background: var(--navy);
  color: #fff;
}

.free-cgi-cms-card h3 {
  margin: 15px 0 16px;
  color: var(--navy);
  font: 500 25px/1.45 Georgia,"Yu Mincho",serif;
}

.free-cgi-cms-card .check-list {
  margin: 0 0 20px;
}

.free-cgi-cms-note {
  min-height: 58px;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 11px;
}

.free-cgi-cms-note strong {
  color: var(--accent);
}

.free-cgi-cms-card>.button {
  width: 100%;
}

.free-cgi-cms-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.free-cgi-cms-actions .button {
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
}

.free-cgi-cms-arrow {
  display: grid;
  place-items: center;
  color: var(--accent);
  font: 500 34px/1 Georgia,serif;
}

.free-cgi-cms-bridge {
  margin-top: 34px;
  padding: 26px 30px;
  border: 1px solid #d6e0e5;
  background: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  box-shadow: 0 10px 35px rgba(16,42,67,.04);
}

.free-cgi-cms-bridge h3 {
  margin: 8px 0 7px;
  color: var(--navy);
  font: 500 22px/1.45 Georgia,"Yu Mincho",serif;
}

.free-cgi-cms-bridge p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.free-cgi-cms-bridge .button {
  white-space: nowrap;
}

@media(max-width:780px) {
  .free-cgi-cms-compare {
    grid-template-columns: 1fr;
  }

  .free-cgi-cms-arrow {
    height: 55px;
    transform: rotate(90deg);
  }

  .free-cgi-cms-actions {
    grid-template-columns: 1fr;
  }

  .free-cgi-cms-note {
    min-height: 0;
  }

  .free-cgi-cms-bridge {
    grid-template-columns: 1fr;
  }

  .free-cgi-cms-bridge .button {
    width: 100%;
  }

}

/* HTML制作 vs CMS付き制作 比較
   旧 html-cms-compare-20260909.css の内容はこの style.css に統合済み。 */
.html-cms-compare {
  margin-top: 42px;
  padding: 36px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 38px rgba(16,42,67,.06);
}

.html-cms-compare-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 26px;
}

.html-cms-compare-head h3 {
  margin: 9px 0 10px;
  color: var(--navy);
  font: 500 clamp(25px,3vw,34px)/1.45 Georgia,"Yu Mincho",serif;
}

.html-cms-compare-head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.html-cms-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 4px;
}

.html-cms-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  background: #fff;
}

.html-cms-table th,.html-cms-table td {
  padding: 15px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  font-size: 11px;
  line-height: 1.75;
}

.html-cms-table thead th {
  background: var(--navy);
  color: #fff;
  text-align: center;
  font-size: 12px;
}

.html-cms-table thead th:first-child {
  width: 18%;
  background: #eaf1f5;
  color: var(--navy);
}

.html-cms-table thead th span {
  display: block;
  margin-bottom: 4px;
  color: #ebc9ae;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.html-cms-table tbody th {
  width: 18%;
  background: #f4f7f9;
  color: var(--navy);
  text-align: left;
  font-weight: 800;
}

.html-cms-table tbody td {
  width: 41%;
  color: var(--muted);
}

.html-cms-table tbody td strong {
  color: var(--navy);
  font-size: 12px;
}

.html-cms-table tbody td small {
  color: #7d726a;
}

.html-cms-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.html-cms-choice>div {
  padding: 16px 18px;
  background: #f4f8fa;
  border-left: 3px solid var(--blue);
}

.html-cms-choice>div:last-child {
  background: #fbf5f0;
  border-left-color: #9f5f35;
}

.html-cms-choice b,.html-cms-choice span {
  display: block;
}

.html-cms-choice b {
  color: var(--navy);
  font-size: 11px;
}

.html-cms-choice span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.html-cms-actions {
  justify-content: center;
  margin-top: 24px;
}

@media(max-width:700px) {
  .html-cms-compare {
    padding: 24px 16px;
  }

  .html-cms-choice {
    grid-template-columns: 1fr;
  }

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

}

/* 新サービス公開キャンペーンの注意書き */
.campaign-note, .campaign-explanation {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(159,95,53,.22);
  border-radius: 14px;
  background: #fffaf6;
  color: #4f4037;
  font-size: .92rem;
  line-height: 1.8;
}

.campaign-note strong, .campaign-explanation strong {
  color: #8a4c28;
}

.campaign-explanation p {
  margin: .45em 0 .25em;
}

.campaign-explanation small {
  display: block;
  color: #75675f;
  font-size: .82rem;
}

/* index: 飲食店・不動産CMSのビジュアル紹介 */
/* トップページ：CMS紹介画像2枚の間隔（PC 25px／スマホ 18px） */
.cms-home-showcases {
  display: grid;
  gap: 25px;
  align-self: center;
}

.cms-showcase-image {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(7,26,45,.14);
  transition: transform .28s ease,box-shadow .28s ease;
}

.cms-showcase-image img {
  display: block;
  width: 100%;
  height: auto;
}

.cms-showcase-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(7,26,45,.2);
}

.cms-showcase-image:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

@media(max-width:640px) {
  .cms-home-showcases {
    gap: 18px;
  }

  .cms-showcase-image {
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(7,26,45,.14);
  }

}

/* 2026-09-11 index information architecture refresh */
.home-service-grid {
  grid-template-columns: repeat(4,1fr);
}

.service-card {
  position: relative;
  transition: transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #cbd7dd;
}

.service-card-cms {
  background: linear-gradient(180deg,#fff 0%,#f7fbfd 100%);
  border-color: #c9dce7;
}

.service-card-cms .service-icon {
  background: var(--navy);
  color: #fff;
}

.service-card-link {
  display: inline-block;
  margin-top: 17px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.static-home-feature {
  background: linear-gradient(135deg,#f5f8fa 0%,#fff 50%,#f7eee8 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.static-home-grid {
  display: grid;
  grid-template-columns: 1fr .92fr;
  gap: 64px;
  align-items: center;
}

.static-home-copy h2 {
  margin: 12px 0 18px;
  color: var(--navy);
  font: 500 clamp(30px,3.5vw,46px)/1.42 Georgia,"Yu Mincho",serif;
}

.static-home-copy>p {
  color: var(--muted);
  font-size: 13px;
}

.static-home-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.static-home-points span {
  padding: 7px 10px;
  border: 1px solid #d4dfe5;
  background: rgba(255,255,255,.82);
  color: #53646f;
  font-size: 10px;
}

.static-home-visual {
  padding: 34px;
  border: 1px solid #d8e1e6;
  background: rgba(255,255,255,.9);
  box-shadow: 0 20px 55px rgba(16,42,67,.08);
}

.static-code-label {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  font: 600 clamp(34px,4vw,54px)/1 Georgia,serif;
  letter-spacing: .04em;
}

.static-code-label span {
  color: var(--accent);
  font-weight: 400;
}

.static-feature-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.static-feature-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.static-feature-row>b {
  color: var(--accent);
  font: 700 11px/1 Georgia,serif;
  letter-spacing: .1em;
}

.static-feature-row strong,.static-feature-row span {
  display: block;
}

.static-feature-row strong {
  color: var(--navy);
  font-size: 13px;
}

.static-feature-row span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

/* ワンページデモ：料金より先に見せるための表示調整 */
.home .section.wide .sample-card {
  border-radius: 2px;
}

.home .section.wide .sample-image {
  background: #edf1f3;
}

.compare-home-section {
  background: #f7f8f8;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* トップページ：Price と HTML or CMS? の間隔を詰める */
.home .compare-home-section > .section {
  padding-top: 0;
}

/* 比較ボックス上部の余白を少し縮小 */
.compare-cards-version {
  margin-top: 0;
  padding: 26px 42px 42px;
}

/* 直前のPriceセクション下余白も、この組み合わせの時だけ縮小 */
@supports selector(section:has(+ section)) {
  .home main > section.bg-soft:has(+ .compare-home-section) > .section {
    padding-bottom: 26px;
  }
}

.compare-cards-version .html-cms-compare-head h2 {
  margin: 10px 0 12px;
  color: var(--navy);
  font: 500 clamp(28px,3.4vw,42px)/1.42 Georgia,"Yu Mincho",serif;
}

.comparison-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 30px;
}

.comparison-card {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  background: #fff;
}

.comparison-card.cms-card {
  border-color: #bfcfda;
  box-shadow: 0 14px 38px rgba(16,42,67,.08);
}

.comparison-card-head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.comparison-card-head>span {
  display: inline-block;
  padding: 5px 9px;
  background: #eaf3f8;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.cms-card .comparison-card-head>span {
  background: var(--navy);
  color: #fff;
}

.comparison-card-head h3 {
  margin: 11px 0 7px;
  color: var(--navy);
  font: 500 23px/1.35 Georgia,"Yu Mincho",serif;
}

.comparison-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.comparison-card dl {
  margin: 16px 0 0;
}

.comparison-card dl>div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 15px;
  padding: 13px 0;
  border-bottom: 1px solid #edf0f2;
}

.comparison-card dt {
  color: var(--navy);
  font-size: 10px;
  font-weight: 800;
}

.comparison-card dd {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.comparison-card dd strong {
  color: var(--navy);
  font-size: 12px;
}

.comparison-card dd small {
  display: block;
  margin-top: 3px;
  color: #7d726a;
}

.comparison-recommend {
  margin: 18px 0 0;
  padding: 15px 16px;
  background: #f4f8fa;
  color: var(--muted);
  font-size: 10px;
}

.cms-card .comparison-recommend {
  background: #fbf5f0;
}

.comparison-recommend b {
  display: block;
  margin-bottom: 4px;
  color: var(--navy);
  font-size: 10px;
}

.comparison-card>.button {
  margin-top: auto;
  transform: translateY(18px);
}

.comparison-card>.button:hover {
  transform: translateY(16px);
}

@media(max-width:1100px) {
  .home-service-grid {
    grid-template-columns: repeat(2,1fr);
  }

}

@media(max-width:900px) {
  .static-home-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .static-home-visual {
    max-width: 720px;
    width: 100%;
    margin: auto;
  }

  .comparison-cards {
    grid-template-columns: 1fr;
  }

}

@media(max-width:640px) {
  .home-service-grid {
    grid-template-columns: 1fr;
  }

  .static-home-visual {
    padding: 23px 20px;
  }

  .static-code-label {
    font-size: 36px;
  }

  .compare-cards-version {
    padding: 20px 16px 25px;
  }

  @supports selector(section:has(+ section)) {
    .home main > section.bg-soft:has(+ .compare-home-section) > .section {
      padding-bottom: 22px;
    }
  }

  .comparison-card {
    padding: 22px 18px;
  }

  .comparison-card dl>div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .comparison-card>.button {
    transform: none;
    margin-top: 20px;
  }

  .comparison-card>.button:hover {
    transform: translateY(-2px);
  }

}

/* ========================================================== 2026-09-11 service / price / samples information refresh ========================================================== */
.center-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
}

/* service.html：HTML+CSS制作 / CMS制作 の2つの制作方法 */
.service-choice-section {
  padding-bottom: 78px;
}

/* service.html：見出し内の目立つ数字だけ読みやすいArial系に */
.service-choice-section .section-head .num {
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.service-route-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.service-route-card {
  position: relative;
  overflow: hidden;
  padding: 38px 36px 32px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 14px 42px rgba(16,42,67,.06);
}

.service-route-card.cms-route {
  background: linear-gradient(145deg,#fff 0%,#f2f8fb 100%);
  border-color: #c6d8e2;
  box-shadow: 0 18px 48px rgba(16,42,67,.09);
}

.service-route-no {
  position: absolute;
  right: 22px;
  top: 10px;
  color: #edf2f4;
  font-family: Arial, "Helvetica Neue", sans-serif;
  font-size: 76px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.cms-route .service-route-no {
  color: #dfeaf0;
}

.service-route-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 6px 10px;
  background: #eaf3f8;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.cms-route .service-route-label {
  background: var(--navy);
  color: #fff;
}

.service-route-card h3 {
  position: relative;
  z-index: 1;
  margin: 15px 0 12px;
  color: var(--navy);
  font: 500 clamp(24px,3vw,32px)/1.35 Georgia,"Yu Mincho",serif;
}

.service-route-card>p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.service-route-card .check-list {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.service-route-bottom {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding-top: 19px;
  border-top: 1px solid var(--line);
}

.service-route-bottom strong {
  color: var(--navy);
  font-family: Arial, "Helvetica Neue", "Yu Gothic", Meiryo, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}

.service-route-bottom strong small {
  font: 800 9px/1 sans-serif;
  color: var(--accent);
}

.service-route-bottom a {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
  text-align: right;
}

.service-choice-note {
  margin-top: 20px;
  padding: 17px 20px;
  border: 1px solid #d7e1e6;
  background: #f8fbfc;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.service-choice-note a {
  margin-left: 8px;
  color: var(--blue);
  font-weight: 800;
}

.service-detail-grid .service-card {
  min-height: 215px;
}

/* service.html / samples.html：CMS商品の大きな紹介カード */
.cms-product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.cms-product-card {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 18px 52px rgba(16,42,67,.08);
}

.cms-product-image {
  display: block;
  overflow: hidden;
  background: #e9eef1;
}

.cms-product-image img {
  width: 100%;
  height: auto;
  transition: transform .45s ease;
}

.cms-product-card:hover .cms-product-image img {
  transform: scale(1.015);
}

.cms-product-body {
  padding: 27px 28px 29px;
}

.cms-product-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.cms-product-meta span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.cms-product-meta span:last-child {
  padding: 4px 7px;
  background: #eef4f7;
  color: var(--blue);
  letter-spacing: 0;
}

.cms-product-body h3 {
  margin: 10px 0 9px;
  color: var(--navy);
  font: 500 25px/1.4 Georgia,"Yu Mincho",serif;
}

.cms-product-body>p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.cms-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 20px;
  align-items: center;
}

.cms-product-actions .button {
  min-height: 43px;
  padding: 9px 15px;
  font-size: 10px;
}

.cms-demo-note {
  margin-top: 16px!important;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  background: #fbf7f3;
  color: #75675f!important;
  font-size: 9px!important;
}

.included-grid .service-card {
  min-height: 210px;
}

/* price.html：HTML+CSS制作 / CMS制作 の料金案内 */
.price-intro-section {
  padding-bottom: 68px;
}

.price-guide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.price-guide-card {
  position: relative;
  padding: 34px 34px 30px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 12px 38px rgba(16,42,67,.06);
}

.price-guide-card.cms {
  border: 2px solid var(--navy);
  background: linear-gradient(145deg,#fff,#f3f8fb);
}

.price-guide-card>span {
  display: inline-block;
  padding: 5px 9px;
  background: #eaf3f8;
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.price-guide-card.cms>span {
  background: var(--navy);
  color: #fff;
}

.price-guide-card h2 {
  margin: 13px 0 8px;
  color: var(--navy);
  font: 500 25px/1.4 Georgia,"Yu Mincho",serif;
}

.price-guide-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.price-guide-card strong {
  display: block;
  margin-top: 20px;
  color: var(--navy);
  font: 500 31px/1.2 Georgia,serif;
}

.price-guide-card strong small {
  font: 800 9px/1 sans-serif;
  color: var(--accent);
}

.price-guide-card a {
  display: inline-block;
  margin-top: 14px;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.price-summary {
  margin: 20px 0 0;
  padding: 14px 17px;
  background: #f4f8fa;
  border-left: 3px solid var(--blue);
  color: var(--muted);
  font-size: 10px;
}

.cms-price-redesign {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: start;
  padding: 34px;
  border: 1px solid #cfdce3;
  background: linear-gradient(135deg,#fff 0%,#f7fbfd 100%);
  box-shadow: 0 18px 50px rgba(16,42,67,.08);
}

.cms-price-main {
  padding: 6px 6px 0;
}

.cms-price-tag {
  display: inline-block;
  padding: 7px 11px;
  background: var(--accent);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.cms-price-big {
  margin: 17px 0 7px;
  color: var(--navy);
  font: 500 clamp(42px,5vw,60px)/1 Georgia,serif;
}

.cms-price-big span {
  font: 800 12px/1 sans-serif;
}

.cms-price-normal {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 11px;
}

.cms-price-normal strong {
  color: var(--navy);
}

.cms-price-main>p:last-of-type {
  color: var(--muted);
  font-size: 11px;
}

.cms-price-redesign .cms-price-points {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.cms-price-redesign .cms-price-points span {
  padding: 6px 8px;
  background: #edf4f7;
  color: #53646f;
  font-size: 9px;
  border: 1px solid #d8e3e8;
}

.cms-price-examples {
  display: grid;
  gap: 14px;
}

.cms-price-examples article {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
}

.cms-price-examples img {
  width: 100%;
  height: 112px;
  object-fit: cover;
  border-radius: 7px;
}

.cms-price-examples b,.cms-price-examples span,.cms-price-examples a {
  display: block;
}

.cms-price-examples b {
  color: var(--navy);
  font-size: 13px;
}

.cms-price-examples span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.7;
}

.cms-price-examples a {
  margin-top: 9px;
  color: var(--blue);
  font-size: 9px;
  font-weight: 800;
}

.cms-price-wide-note {
  grid-column: 1/-1;
  padding: 17px 19px;
  border-left: 3px solid var(--accent);
  background: #fff9f5;
}

.cms-price-wide-note strong {
  color: #8a4c28;
  font-size: 11px;
}

.cms-price-wide-note p {
  margin: 4px 0 0;
  color: #75675f;
  font-size: 10px;
}

.price-compare-cards {
  margin-top: 0;
}

.price-option-list {
  margin-top: 0;
}

.price-final-note {
  margin-top: 30px;
}

/* samples.html：HTML+CSS制作とCMS制作を分けて表示 */
.sample-page-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 34px;
}

.sample-page-type>div {
  padding: 26px 28px;
  border: 1px solid var(--line);
  background: #f8fafb;
}

.sample-page-type span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.sample-page-type h3 {
  margin: 7px 0 8px;
  color: var(--navy);
  font: 500 22px/1.4 Georgia,"Yu Mincho",serif;
}

.sample-page-type p {
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 10px;
}

.cms-samples-section {
  background: linear-gradient(180deg,#f5f8fa 0%,#fff 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cms-portfolio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.cms-portfolio-card {
  overflow: hidden;
  border: 1px solid #d5dfe4;
  background: #fff;
  box-shadow: 0 20px 55px rgba(16,42,67,.09);
}

.cms-portfolio-visual {
  position: relative;
  display: block;
  overflow: hidden;
  background: #e9eef1;
}

.cms-portfolio-visual img {
  width: 100%;
  height: auto;
  transition: transform .45s ease;
}

.cms-portfolio-card:hover .cms-portfolio-visual img {
  transform: scale(1.015);
}

.cms-portfolio-visual>span {
  position: absolute;
  left: 16px;
  bottom: 15px;
  padding: 7px 10px;
  background: rgba(7,26,45,.9);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.cms-portfolio-copy {
  padding: 29px;
}

.cms-portfolio-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cms-portfolio-badges span {
  padding: 5px 8px;
  background: #eaf3f8;
  color: var(--blue);
  font-size: 8px;
  font-weight: 900;
}

.cms-portfolio-badges span.muted {
  background: #f0f1f2;
  color: #7b858c;
}

.cms-portfolio-copy h3 {
  margin: 12px 0 9px;
  color: var(--navy);
  font: 500 27px/1.4 Georgia,"Yu Mincho",serif;
}

.cms-portfolio-copy>p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.cms-portfolio-copy .check-list {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.cms-portfolio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-top: 21px;
}

.cms-portfolio-actions .button {
  min-height: 43px;
  padding: 9px 15px;
  font-size: 10px;
}

@media(max-width:900px) {
  .service-route-grid,.cms-product-grid,.price-guide-grid,.cms-portfolio-grid {
    grid-template-columns: 1fr;
  }

  .cms-price-redesign {
    grid-template-columns: 1fr;
  }

  .cms-price-wide-note {
    grid-column: auto;
  }

}

@media(max-width:700px) {
  .service-route-card {
    padding: 29px 22px 24px;
  }

  .service-route-no {
    font-size: 58px;
  }

  .service-route-bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .service-route-bottom a {
    text-align: left;
  }

  .cms-product-body,.cms-portfolio-copy {
    padding: 23px 20px;
  }

  .cms-product-actions,.cms-portfolio-actions {
    display: grid;
  }

  .cms-product-actions .button,.cms-portfolio-actions .button {
    width: 100%;
  }

  .cms-price-redesign {
    padding: 23px 18px;
  }

  .cms-price-examples article {
    grid-template-columns: 1fr;
  }

  .cms-price-examples img {
    height: auto;
    aspect-ratio: 16/9;
  }

  .sample-page-type {
    grid-template-columns: 1fr;
  }

  .price-guide-card {
    padding: 28px 22px;
  }

}

/* ============================================================
   CSS設定 かんたん早見表
   ============================================================
   color: #xxxxxx;             → 文字色;
   background: #xxxxxx;        → 背景色;
   font-size: 16px;            → 文字サイズ;
   font-weight: 700;           → 文字の太さ（400=普通、700=太字）;
   width / max-width           → 横幅 / 最大横幅
   height / min-height         → 高さ / 最小の高さ
   margin                     → 要素の外側の余白
   padding                    → 要素の内側の余白
   gap                        → カードやボタン同士の間隔
   border                     → 枠線
   border-radius              → 角丸（例：12px / 999pxで丸ボタン）
   box-shadow                 → 影
   display: grid              → カードなどの整列に使う;
   grid-template-columns      → 横に何列並べるか
   object-fit: cover          → 画像を枠いっぱいにトリミング表示;
   @media(max-width: 640px)   → スマホ時だけ適用する設定
   ============================================================ */

/* ============================================================
   文字サイズを少し大きくして読みやすくする調整
   2026-09-12
   ------------------------------------------------------------
   【この部分の目的】
   MACHIKA WEBでは、デザインをすっきり見せるために
   10px～11pxの小さな説明文字を多く使っていました。
   PC・スマホともに読みやすくするため、説明文を中心に
   12px～13pxへ少し大きくしています。

   ★ バッジ・英字ラベルなど「飾り」の小さい文字は、
      デザインを崩さないよう基本的にそのままです。

   ★ もっと大きくしたい場合は、下記の
      font-size: 12px; や 13px; の数字だけ変更してください。
   ============================================================ */


/* ---------- ヘッダー・トップページ ---------- */

/* 上部メニュー */
.global-nav a {
  font-size: 12px;
}

/* HERO下の小さな補足ラベル */
.hero-note span {
  font-size: 11px;
}

/* 特徴・実績の帯の説明 */
.trustbar span {
  font-size: 11px;
}

/* サービスカード内のチェック項目 */
.service-card li,
.check-list li {
  font-size: 12px;
}


/* ---------- 制作サンプル・比較・流れ ---------- */

/* サンプルカードの説明文 */
.sample-body p {
  font-size: 12px;
  line-height: 1.8;
}

/* サンプルカードのリンクボタン */
.sample-links a {
  font-size: 11px;
}

/* ご相談から公開までの説明 */
.flow-steps p {
  font-size: 12px;
  line-height: 1.8;
}

/* 比較カード・比較表の説明文字 */
.html-cms-table th,
.html-cms-table td {
  font-size: 12px;
}

.html-cms-choice b {
  font-size: 12px;
}

.html-cms-choice span {
  font-size: 12px;
}

.comparison-card-head p,
.comparison-card dd,
.comparison-recommend,
.comparison-recommend b {
  font-size: 12px;
  line-height: 1.8;
}

.comparison-card dt {
  font-size: 11px;
}


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

/* お問い合わせ案内・フォーム項目 */
.contact-info li,
.field label {
  font-size: 12px;
}

/* フォーム下の注意書き */
.form-note {
  font-size: 12px;
  line-height: 1.8;
}

/* お問い合わせ返信についての補足 */
.contact-response span {
  font-size: 11px;
}


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

/* フッターの説明文 */
.footer-brand p {
  font-size: 12px;
}

/* フッター内リンク */
.footer-main > div:not(.footer-brand) a {
  font-size: 11px;
}

/* 一番下の著作権・補足 */
.footer-bottom {
  font-size: 10px;
}


/* ---------- About・ガイド ---------- */

.guide-card span,
.owned-site-card > span,
.article-meta {
  font-size: 11px;
}

.guide-card p {
  font-size: 13px;
}


/* ---------- 無料CGI ---------- */

/* 無料CGIカードの説明 */
.free-cgi-mini-grid p,
.free-cgi-notice p {
  font-size: 12px;
  line-height: 1.8;
}

/* 無料CGIの小さなテキストリンク */
.free-cgi-actions .text-link {
  font-size: 11px;
}

/* 無料CGIとCMSの比較説明 */
.free-cgi-cms-note,
.free-cgi-cms-bridge p {
  font-size: 12px;
  line-height: 1.8;
}


/* ---------- CMS紹介 ---------- */

/* CMSの特徴ラベル */
.cms-home-points span {
  font-size: 11px;
}

/* CMS説明カード本文 */
.cms-callout span,
.cms-feature-grid p,
.cms-step-grid p,
.cms-demo-note span {
  font-size: 12px;
  line-height: 1.8;
}

/* サービスページのCMS紹介 */
.service-route-bottom a {
  font-size: 11px;
}

.service-choice-note {
  font-size: 12px;
  line-height: 1.8;
}

.cms-product-body > p {
  font-size: 12px;
  line-height: 1.8;
}

.cms-product-actions .button {
  font-size: 11px;
}

/* デモについての注意書き */
.cms-demo-note {
  font-size: 11px !important;
  line-height: 1.8;
}


/* ---------- 料金ページ ---------- */

/* HTML制作 / CMS制作の料金案内カード */
.price-guide-card p {
  font-size: 12px;
  line-height: 1.8;
}

.price-guide-card a {
  font-size: 11px;
}

/* 料金ページ冒頭の補足 */
.price-summary {
  font-size: 12px;
  line-height: 1.8;
}

/* CMS料金の通常価格・補足 */
.cms-regular-price,
.cms-price-normal {
  font-size: 12px;
}

.cms-price-main > p:last-of-type {
  font-size: 12px;
  line-height: 1.8;
}

/* 料金例カードの説明とリンク */
.cms-price-examples span {
  font-size: 11px;
  line-height: 1.8;
}

.cms-price-examples a {
  font-size: 11px;
}

/*
   ★ ご質問の「料金について」はここです。
   見出し 14px / 説明文 13px にしています。
*/
.cms-price-wide-note strong {
  font-size: 14px;
}

.cms-price-wide-note p {
  font-size: 13px;
  line-height: 1.9;
}


/* ---------- サンプルページ ---------- */

/* HTML+CSS / CMS の説明 */
.sample-page-type p {
  font-size: 12px;
  line-height: 1.8;
}

/* CMS制作サンプルの本文 */
.cms-portfolio-copy > p {
  font-size: 12px;
  line-height: 1.8;
}

.cms-portfolio-actions .button {
  font-size: 11px;
}


/* ============================================================
   スマホでは小さい文字をさらに縮めない
   ============================================================ */
@media(max-width:640px) {

  .service-card li,
  .check-list li,
  .sample-body p,
  .flow-steps p,
  .free-cgi-mini-grid p,
  .free-cgi-notice p,
  .cms-product-body > p,
  .price-guide-card p,
  .sample-page-type p,
  .cms-portfolio-copy > p {
    font-size: 12px;
  }

  .cms-price-wide-note p {
    font-size: 13px;
  }

}


/* ============================================================
   40. 無料CGI 詳細ページ
   reservation-cgi.html / mailform-cgi.html / estimate-cgi.html /
   calendar-cgi.html で共通して使うデザインです。

   【初心者向け変更ポイント】
   ・ヒーロー背景色 → .cgi-detail-hero の background
   ・デモ枠の高さ → .cgi-preview-shell iframe の height
   ・機能カードの列数 → .cgi-detail-feature-grid の grid-template-columns
   ・カードの角丸 → border-radius の数字
   ============================================================ */

.cgi-breadcrumb {
  width: min(var(--max),calc(100% - 40px));
  margin: 18px auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
}

.cgi-breadcrumb a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cgi-detail-hero {
  margin-top: 18px;
  /* 紹介画像の下側だけ余白を小さくして、Featuresとの間隔を調整 */
  padding: 72px 20px 28px;
  background: linear-gradient(135deg,#f6fafc 0%,#edf4f7 58%,#f8eee6 100%);
  border-top: 1px solid #edf1f3;
  border-bottom: 1px solid var(--line);
}

/* 無料CGI詳細ページ：紹介画像の直後にあるFeatures上部の余白だけ調整 */
.free-cgi-detail-page .cgi-detail-hero + .bg-soft > .section {
  padding-top: 28px;
}

.cgi-detail-hero-inner {
  width: min(1100px,100%);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr);
  gap: 56px;
  align-items: center;
}

.cgi-detail-badge {
  display: inline-block;
  margin-bottom: 17px;
  padding: 7px 11px;
  background: var(--navy);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
}

.cgi-detail-copy h1 {
  max-width: 800px;
  margin: 0 0 18px;
  color: var(--navy);
  font: 500 clamp(34px,5vw,58px)/1.35 Georgia,"Yu Mincho",serif;
}

.cgi-detail-copy>p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.cgi-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px;
}

.cgi-detail-small {
  margin-top: 15px!important;
  font-size: 10px!important;
  letter-spacing: .03em;
}

.cgi-detail-facts {
  display: grid;
  gap: 10px;
}

.cgi-detail-facts div {
  padding: 20px 22px;
  border: 1px solid rgba(16,42,67,.11);
  background: rgba(255,255,255,.82);
  box-shadow: 0 12px 32px rgba(16,42,67,.06);
}

.cgi-detail-facts b {
  display: block;
  color: var(--navy);
  font: 700 20px/1.2 Georgia,"Yu Mincho",serif;
}

.cgi-detail-facts span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

/* 公開デモをページ内に表示するブラウザ風の枠 */
.cgi-preview-section {
  padding-top: 72px;
  padding-bottom: 82px;
}

.cgi-preview-shell {
  max-width: 1050px;
  margin: 34px auto 0;
  overflow: hidden;
  border: 1px solid #cfd9df;
  background: #fff;
  box-shadow: 0 22px 55px rgba(16,42,67,.13);
}

.cgi-preview-bar {
  min-height: 48px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #eef3f5;
  border-bottom: 1px solid #d8e0e4;
}

.cgi-preview-bar>span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bdc9cf;
}

.cgi-preview-bar b {
  margin-left: 7px;
  color: #596a75;
  font-size: 9px;
  letter-spacing: .04em;
}

.cgi-preview-bar a {
  margin-left: auto;
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.cgi-preview-shell iframe {
  display: block;
  width: 100%;
  height: 680px; /* デモ画面をもっと長く見せたい場合は数字を大きくします */
  border: 0;
  background: #fff;
}

/* 「このCGIでできること」の機能カード */
.cgi-detail-feature-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  margin-top: 34px;
}

.cgi-detail-feature {
  padding: 27px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 32px rgba(16,42,67,.045);
}

.cgi-detail-feature>span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--accent2);
  color: #86512f;
  font-weight: 900;
}

.cgi-detail-feature h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 15px;
}

.cgi-detail-feature p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.cgi-use-section {
  padding-top: 78px;
  padding-bottom: 78px;
}

.cgi-use-section .content-two {
  align-items: stretch;
}

.cgi-use-section h2,
.cgi-environment-section h2 {
  margin: 10px 0 20px;
  color: var(--navy);
  font: 500 clamp(28px,3.5vw,40px)/1.45 Georgia,"Yu Mincho",serif;
}

.cgi-download-box {
  padding: 34px;
  border: 2px solid var(--navy);
  background: linear-gradient(180deg,#fff 0%,#f4f8fa 100%);
}

.cgi-download-box>span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .13em;
}

.cgi-download-box h3 {
  margin: 10px 0 12px;
  color: var(--navy);
  font: 500 25px/1.45 Georgia,"Yu Mincho",serif;
}

.cgi-download-box h3 small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font: 700 10px/1.4 "Yu Gothic",Meiryo,sans-serif;
}

.cgi-download-box p {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 11px;
}

.cgi-download-box .button {
  width: 100%;
}

.cgi-text-link {
  display: block;
  margin-top: 14px;
  color: var(--blue);
  text-align: center;
  font-size: 10px;
  font-weight: 800;
}

/* 設置手順 */
.cgi-install-list {
  max-width: 920px;
  margin: 34px auto 0;
  display: grid;
  gap: 12px;
}

.cgi-install-step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 24px;
  border: 1px solid var(--line);
  background: #fff;
}

.cgi-install-step>span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font: 700 15px/1 Georgia,serif;
}

.cgi-install-step h3 {
  margin: 0 0 5px;
  color: var(--navy);
  font-size: 14px;
}

.cgi-install-step p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.cgi-environment-section {
  padding-top: 78px;
  padding-bottom: 78px;
}

.cgi-environment-grid {
  max-width: 1000px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: start;
}

.cgi-security-note {
  padding: 28px;
  border: 1px solid #e4cbb8;
  background: #fff8f2;
}

.cgi-security-note b {
  display: block;
  margin-bottom: 10px;
  color: #6f4428;
  font-size: 13px;
}

.cgi-security-note p {
  margin: 0 0 10px;
  color: #745b4b;
  font-size: 11px;
}

.cgi-security-note p:last-child {
  margin-bottom: 0;
}

/* よくある質問 */
.cgi-faq-list {
  max-width: 900px;
  margin: 28px auto 0;
  display: grid;
  gap: 10px;
}

.cgi-faq {
  border: 1px solid var(--line);
  background: #fff;
}

.cgi-faq summary {
  padding: 19px 22px;
  cursor: pointer;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
}

.cgi-faq p {
  margin: 0;
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 11px;
}

/* 関連する無料CGI */
.cgi-related-section {
  padding-top: 78px;
  padding-bottom: 80px;
}

.cgi-related-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 18px;
  margin-top: 32px;
}

.cgi-related-card {
  padding: 26px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 30px rgba(16,42,67,.04);
}

.cgi-related-card>span {
  color: var(--accent);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.cgi-related-card h3 {
  margin: 9px 0 9px;
  color: var(--navy);
  font: 500 20px/1.45 Georgia,"Yu Mincho",serif;
}

.cgi-related-card p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 10px;
}

.cgi-related-card a {
  color: var(--blue);
  font-size: 10px;
  font-weight: 800;
}

.cgi-back-actions {
  justify-content: center;
  margin-top: 30px;
}

@media(max-width:900px) {
  .cgi-detail-hero-inner,
  .cgi-environment-grid {
    grid-template-columns: 1fr;
  }

  .cgi-detail-facts {
    grid-template-columns: repeat(3,1fr);
  }

  .cgi-detail-feature-grid,
  .cgi-related-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px) {
  .cgi-breadcrumb {
    width: min(100% - 28px,var(--max));
    font-size: 10px;
  }

  .cgi-detail-hero {
    /* スマホでも紹介画像とFeaturesの間が空きすぎないよう下余白を縮小 */
    padding: 54px 15px 24px;
  }

  .free-cgi-detail-page .cgi-detail-hero + .bg-soft > .section {
    padding-top: 24px;
  }

  .cgi-detail-copy h1 {
    font-size: 34px;
  }

  .cgi-detail-actions {
    display: grid;
  }

  .cgi-detail-actions .button {
    width: 100%;
  }

  .cgi-detail-facts,
  .cgi-detail-feature-grid,
  .cgi-related-grid {
    grid-template-columns: 1fr;
  }

  .cgi-preview-bar b {
    display: none;
  }

  .cgi-preview-shell iframe {
    height: 620px;
  }

  .cgi-install-step {
    grid-template-columns: 38px 1fr;
    padding: 18px;
  }

  .cgi-install-step>span {
    width: 34px;
    height: 34px;
  }

  .cgi-download-box {
    padding: 26px;
  }
}

/* ============================================================
   41. サイト全体の文字を読みやすくする調整
   2026-09-14
   ------------------------------------------------------------
   【目的】
   レイアウトや配色の雰囲気は変えず、本文・説明文・リンクなどの
   「小さくて薄い文字」だけを読みやすくしています。

   【調整の目安】
   ・通常本文      : 16px
   ・カード説明文  : 15px
   ・補足・リンク  : 13～14px
   ・装飾用の英字ラベルやバッジは小ささを残しています。

   【あとで調整したい場合】
   下の --readable-* の数字を変えると、まとめて調整できます。
   ============================================================ */
:root {
  --muted: #4f5e69;             /* 薄すぎた説明文を少し濃く */
  --readable-body: 16px;        /* 通常本文 */
  --readable-card: 15px;        /* カード・説明文 */
  --readable-small: 14px;       /* 補足・表・フォーム */
  --readable-mini: 13px;        /* 小さめリンク・メタ情報 */
}

/* ---------- 全ページ共通 ---------- */
body {
  font-size: var(--readable-body);
  line-height: 1.85;
}

.prehead {
  font-size: 11px;
}

.logo small {
  font-size: 11px;
}

.global-nav a {
  font-size: 13px;
}

.button {
  font-size: var(--readable-small);
}

.hero-lead {
  color: #465864;
  font-size: var(--readable-body);
}

.hero-note span {
  color: #52636e;
  font-size: 12px;
}

.section-head p,
.page-title p,
.content-two p {
  font-size: var(--readable-body);
}

.trustbar b {
  font-size: var(--readable-small);
}

.trustbar span {
  font-size: var(--readable-mini);
}

/* ---------- サービス・料金・制作サンプル ---------- */
.service-card p,
.plan > p,
.sample-body p,
.difference p {
  font-size: var(--readable-card);
  line-height: 1.85;
}

.service-card li,
.check-list li {
  color: #4b5a64;
  font-size: var(--readable-small);
  line-height: 1.75;
}

.sample-links a,
.text-link {
  font-size: var(--readable-mini);
}

.note-box {
  color: #4f5b63;
  font-size: var(--readable-card);
  line-height: 1.85;
}

.option b,
.option span {
  font-size: var(--readable-small);
}

/* ---------- 制作の流れ ---------- */
.flow-steps p,
.flow-steps .flow-image-card p {
  font-size: var(--readable-body);
  line-height: 1.85;
}

.flow-steps .flow-image-heading span {
  font-size: var(--readable-small);
}

/* ---------- FAQ・お問い合わせ ---------- */
.faq-answer {
  font-size: var(--readable-card);
  line-height: 1.85;
}

.contact-info p {
  color: rgba(255,255,255,.88);
  font-size: var(--readable-card);
}

.contact-info li {
  font-size: var(--readable-small);
}

.field label {
  font-size: var(--readable-small);
}

.form-note {
  color: #694f3d;
  font-size: var(--readable-small);
  line-height: 1.8;
}

.contact-response b {
  font-size: var(--readable-small);
}

.contact-response span {
  color: rgba(255,255,255,.85);
  font-size: var(--readable-mini);
}

/* ---------- プライバシー・特商法など ---------- */
.privacy p,
.privacy li {
  font-size: var(--readable-card);
  line-height: 1.85;
}

.legal-table dt,
.legal-table dd {
  font-size: var(--readable-small);
  line-height: 1.8;
}

.legal-table small {
  color: #596873;
  font-size: var(--readable-mini);
}

/* ---------- About・お役立ちガイド ---------- */
.guide-card p,
.value-grid p,
.owned-site-card p {
  font-size: var(--readable-card);
  line-height: 1.85;
}

.about-message p {
  font-size: var(--readable-body);
  line-height: 1.9;
}

.profile-table dt,
.profile-table dd {
  font-size: var(--readable-small);
}

.owned-site-card > span,
.article-meta {
  color: #586873;
  font-size: 12px;
}

.guide-hero > p {
  font-size: var(--readable-body);
}

.guide-body > p,
.guide-body section > p {
  font-size: var(--readable-body);
  line-height: 1.95;
}

.guide-toc li {
  font-size: var(--readable-small);
}

/* ---------- 無料CGI 一覧 ---------- */
.free-cgi-mini-grid p,
.free-cgi-summary,
.free-cgi-support p {
  font-size: var(--readable-card);
  line-height: 1.85;
}

.free-cgi-notice b {
  font-size: var(--readable-small);
}

.free-cgi-notice p {
  color: #665548;
  font-size: var(--readable-small);
  line-height: 1.8;
}

.free-cgi-actions .text-link {
  font-size: var(--readable-mini);
}

/* ---------- CMS紹介・比較 ---------- */
.cms-home-copy > p,
.cms-static-band p {
  color: rgba(255,255,255,.9);
  font-size: var(--readable-card);
  line-height: 1.85;
}

.cms-home-points span,
.static-home-points span {
  font-size: var(--readable-mini);
}

.cms-service-grid p,
.cms-product-intro p,
.cms-price-copy > p,
.static-home-copy > p,
.service-route-card > p,
.service-choice-note,
.cms-product-body > p,
.sample-page-type p,
.cms-portfolio-copy > p {
  font-size: var(--readable-card);
  line-height: 1.85;
}

.cms-callout b {
  font-size: var(--readable-small);
}

.cms-callout span,
.cms-feature-grid p,
.cms-step-grid p,
.cms-demo-box > div > p,
.free-cgi-cms-note,
.free-cgi-cms-bridge p,
.static-feature-row span,
.comparison-card-head p,
.comparison-card dd,
.comparison-recommend {
  font-size: var(--readable-small);
  line-height: 1.8;
}

.cms-demo-note,
.cms-demo-note span {
  color: #66584f !important;
  font-size: var(--readable-small) !important;
  line-height: 1.8;
}

.cms-regular-price,
.cms-price-normal,
.cms-price-main > p:last-of-type,
.price-summary,
.price-guide-card p {
  font-size: var(--readable-card);
  line-height: 1.85;
}

.cms-price-note {
  color: #61584f !important;
  font-size: var(--readable-mini) !important;
}

.price-guide-card a,
.service-route-bottom a,
.cms-price-examples a {
  font-size: var(--readable-mini);
}

.cms-price-examples span {
  font-size: var(--readable-small);
  line-height: 1.8;
}

.cms-price-wide-note strong {
  font-size: 16px;
}

.cms-price-wide-note p {
  color: #66584f;
  font-size: var(--readable-card);
  line-height: 1.9;
}

.cms-product-actions .button,
.cms-portfolio-actions .button {
  font-size: var(--readable-small);
}

/* HTML制作とCMS制作の比較表 */
.html-cms-compare-head p,
.html-cms-table th,
.html-cms-table td,
.html-cms-choice b,
.html-cms-choice span {
  font-size: var(--readable-small);
  line-height: 1.75;
}

.comparison-card dt,
.comparison-recommend b {
  font-size: var(--readable-mini);
}

/* ---------- 無料CGI 詳細ページ ---------- */
.cgi-breadcrumb {
  font-size: 12px;
}

.cgi-detail-copy > p {
  font-size: var(--readable-body);
  line-height: 1.9;
}

.cgi-detail-facts span,
.cgi-preview-bar b,
.cgi-preview-bar a,
.cgi-text-link {
  font-size: var(--readable-mini);
}

.cgi-detail-feature p,
.cgi-download-box p,
.cgi-install-step p,
.cgi-faq p,
.cgi-related-card p {
  font-size: var(--readable-card);
  line-height: 1.85;
}

.cgi-security-note p {
  color: #664f40;
  font-size: var(--readable-small);
  line-height: 1.85;
}

.cgi-faq summary {
  font-size: var(--readable-card);
}

.cgi-related-card a {
  font-size: var(--readable-mini);
}

/* ---------- フッター ---------- */
.logo.inverse small {
  color: rgba(255,255,255,.72);
}

.footer-brand p {
  color: rgba(255,255,255,.82);
  font-size: var(--readable-small);
  line-height: 1.8;
}

.footer-main h3 {
  font-size: var(--readable-small);
}

.footer-main > div:not(.footer-brand) a {
  color: rgba(255,255,255,.82);
  font-size: var(--readable-mini);
}

.footer-bottom {
  color: rgba(255,255,255,.7);
  font-size: 12px;
}

/* ---------- スマホ ---------- */
@media(max-width:640px) {
  body {
    font-size: 16px;
  }

  .global-nav a {
    font-size: 14px;
  }

  .button {
    font-size: 15px;
  }

  .service-card p,
  .plan > p,
  .sample-body p,
  .difference p,
  .faq-answer,
  .privacy p,
  .privacy li,
  .guide-card p,
  .value-grid p,
  .owned-site-card p,
  .free-cgi-mini-grid p,
  .free-cgi-summary,
  .free-cgi-support p,
  .cms-service-grid p,
  .cms-product-intro p,
  .cms-price-copy > p,
  .service-route-card > p,
  .service-choice-note,
  .cms-product-body > p,
  .price-guide-card p,
  .sample-page-type p,
  .cms-portfolio-copy > p,
  .cgi-detail-feature p,
  .cgi-download-box p,
  .cgi-install-step p,
  .cgi-faq p,
  .cgi-related-card p {
    font-size: 15px;
  }

  .flow-steps p,
  .flow-steps .flow-image-card p,
  .guide-body > p,
  .guide-body section > p {
    font-size: 16px;
  }

  .footer-brand p {
    font-size: 14px;
  }

  .footer-main > div:not(.footer-brand) a {
    font-size: 13px;
  }
}

/* ============================================================
   42. 制作の流れ：スマホ画像の縦横比・表示サイズ調整
   ------------------------------------------------------------
   4:5の縦長画像をスマホで横幅いっぱいにすると大きく見えすぎるため、
   縦横比はそのまま保ち、少し小さめに中央配置します。
   ============================================================ */
@media (max-width: 640px) {
  .flow-steps .flow-image-card img {
    width: min(100%, 300px);
    max-width: 100%;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
  }
}


/* ============================================================
   43. 制作の流れ：ご用意いただくもの・公開前のご案内
   ------------------------------------------------------------
   flow.html 専用の調整です。
   PCでは「6項目」と「安心案内」を左30%・右70%で配置し、
   スマホでは上から自然に読める1列表示へ切り替えます。
   ============================================================ */
.prepare-layout {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: 24px;
  align-items: start;
}

.prepare-items h2 {
  margin-bottom: 20px;
}

.prepare-list {
  margin-top: 0;
}

.prepare-list li {
  margin: 10px 0;
  padding-left: 27px;
  color: #2f3b43;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.75;
}

.prepare-list li::before {
  font-size: 17px;
}

.prepare-copy {
  padding-top: 34px;
}

.prepare-copy p {
  margin: 0;
  color: #3f4e58;
  font-size: 16px;
  line-height: 1.9;
}

.prepare-copy p + p {
  margin-top: 16px;
}

.prepare-copy .prepare-lead {
  color: #2f3b43;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.8;
}

.prepare-publish-note {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid #d7e6ec;
  border-left: 4px solid var(--blue);
  border-radius: 12px;
  background: #f5fafc;
}

.prepare-publish-note h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 19px;
  line-height: 1.5;
}

.prepare-publish-note p {
  margin: 7px 0 0;
  color: #3f4e58;
  font-size: 16px;
  line-height: 1.85;
}

.prepare-publish-note strong {
  color: var(--navy);
  font-weight: 800;
}

@media (max-width: 760px) {
  .prepare-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .prepare-list li {
    font-size: 17px;
    line-height: 1.7;
  }

  .prepare-copy {
    padding-top: 0;
  }

  .prepare-copy p {
    font-size: 16px;
    line-height: 1.85;
  }

  .prepare-copy .prepare-lead {
    font-size: 17px;
  }

  .prepare-publish-note {
    margin-top: 20px;
    padding: 20px;
  }

  .prepare-publish-note h3 {
    font-size: 18px;
  }

  .prepare-publish-note p {
    font-size: 15px;
  }
}

/* ============================================================
   ABOUT PAGE / Site operation・制作実績
   使用ページ：about.html
   「兵どもが夢の跡」画像：assets/images/portfolio/tsuwamono.webp
   レイアウトや画像の表示調整はここを編集してください。
   ============================================================ */
.operation-image-card {
  margin: 0;
  overflow: hidden;
  border-radius: 24px;
  background: #f3f0e8;
}
.operation-image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.operation-site-card {
  margin-top: 26px;
  padding: 22px 24px;
  border: 1px solid rgba(16, 42, 67, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(16, 42, 67, .06);
}
.operation-site-card small {
  display: inline-block;
  margin-bottom: 8px;
  color: #58773c;
  font-weight: 700;
  letter-spacing: .08em;
}
.operation-site-card h3 {
  margin: 0 0 10px;
  font-size: 1.22rem;
  line-height: 1.45;
}
.operation-site-card p {
  margin: 0 0 16px;
}
.operation-site-card a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: none;
}
.operation-site-card a:hover {
  text-decoration: underline;
}
@media (max-width: 720px) {
  .operation-image-card {
    border-radius: 18px;
  }
  .operation-site-card {
    margin-top: 20px;
    padding: 18px;
    border-radius: 16px;
  }
}

/* ============================================================
   about.html / 制作実績カード
   PCは4列、タブレットは2列、スマートフォンは1列。
   画像は横長で表示し、サイト名・紹介文・リンクを下部に配置。
   ============================================================ */
.portfolio-section {
  background: linear-gradient(180deg, #fff 0%, #f4f7f8 26%, #f4f7f8 100%);
}
.portfolio-section .section {
  padding-top: 30px;
  padding-bottom: 30px;
}
.portfolio-heading {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 24px;
}
.portfolio-heading h2 {
  margin: 9px 0;
  font: 500 clamp(27px, 3.2vw, 40px)/1.4 Georgia, "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: var(--navy);
}
.portfolio-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.portfolio-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4e8eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 9px 24px rgba(16, 42, 67, .065);
  transition: transform .25s ease, box-shadow .25s ease;
}
.portfolio-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 13px 32px rgba(16, 42, 67, .11);
}
.portfolio-card-visual {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #e9edf1;
  isolation: isolate;
}
.portfolio-card-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .35s ease;
}
.portfolio-card:hover .portfolio-card-visual img {
  transform: scale(1.025);
}
.portfolio-card-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 16, 24, .12), transparent 33%);
  pointer-events: none;
}
.portfolio-visual-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  background: rgba(14, 27, 34, .57);
  color: #fff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
}
.portfolio-visual-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d7ad58;
}
.portfolio-card-visual:focus-visible,
.portfolio-site-link:focus-visible {
  outline: 3px solid #d59e53;
  outline-offset: -3px;
}
.portfolio-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  padding: 15px 15px 17px;
}
.portfolio-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.portfolio-meta .pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e9f0ec;
  color: #46684e;
  font-size: 9px;
  font-weight: 700;
}
.portfolio-meta .cat {
  color: #71808b;
  font-size: 9px;
  letter-spacing: .04em;
}
.portfolio-card-body h3 {
  margin: 0 0 7px;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.45;
}
.portfolio-card-body p {
  margin: 0;
  color: #576773;
  font-size: 12px;
  line-height: 1.7;
}
.portfolio-site-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  width: fit-content;
  margin-top: auto;
  padding-top: 12px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}
.portfolio-site-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.portfolio-site-link span {
  font-size: 14px;
  line-height: 1;
}
@media (max-width: 1099px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (max-width: 699px) {
  .portfolio-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .portfolio-section .section {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .portfolio-heading {
    margin-bottom: 18px;
  }
  .portfolio-heading p {
    font-size: 12px;
  }
  .portfolio-card-body {
    padding: 16px 18px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card,
  .portfolio-card-visual img {
    transition: none;
  }
  .portfolio-card:hover {
    transform: none;
  }
  .portfolio-card:hover .portfolio-card-visual img {
    transform: none;
  }
}

/* ============================================================
   SEO改善 2026-10-20：地域案内・料金補足・解説記事の比較表
   既存レイアウトを維持し、追加ブロックのみに適用
   ============================================================ */
.home-local-note { margin: 0 0 18px; font-size: .9rem; line-height: 1.8; }
.home-local-note a { text-decoration: underline; text-underline-offset: 3px; }
.seo-guide-links { max-width: 860px; margin: 22px auto 0; line-height: 1.9; text-align: center; }
.seo-guide-links a, .seo-info-footnote a, .seo-internal-link a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.seo-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.seo-info-grid article { padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.seo-info-grid h3 { font-size: 1.1rem; line-height: 1.55; margin: 0 0 12px; color: var(--navy); }
.seo-info-grid p { margin: 0; line-height: 1.9; }
.seo-info-grid a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.seo-info-footnote { margin: 20px 0 0; line-height: 1.85; }
.seo-pricing-faq { padding-top: 45px; padding-bottom: 50px; }
.seo-article-special { padding-top: 16px; }
.seo-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; border: 1px solid var(--line); border-radius: 12px; }
.seo-comparison-table { width: 100%; min-width: 580px; border-collapse: collapse; font-size: .94rem; }
.seo-comparison-table th, .seo-comparison-table td { padding: 13px 15px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.8; text-align: left; }
.seo-comparison-table thead th { background: var(--sky); font-weight: 700; color: var(--navy); }
.seo-comparison-table tbody th { background: #f8fafb; color: var(--navy); width: 25%; }
.seo-comparison-table tr:last-child th, .seo-comparison-table tr:last-child td { border-bottom: 0; }
.seo-prep-checklist { list-style: none; margin: 18px 0; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }
.seo-prep-checklist li { padding: 8px 0; line-height: 1.7; }
.seo-prep-checklist li + li { border-top: 1px solid var(--line); }
@media (max-width: 720px) {
  .seo-info-grid { grid-template-columns: 1fr; gap: 14px; }
  .seo-info-grid article { padding: 20px; }
  .seo-guide-links { text-align: left; }
  .seo-pricing-faq { padding-top: 35px; padding-bottom: 38px; }
  .seo-comparison-table { font-size: .88rem; }
}

/* ============================================================
   44. スマートフォン：サイト全体の縦方向の余白を整理（2026-10-20）
   ------------------------------------------------------------
   スマホだけ余白を控えめにし、タイトル・本文・カードが
   間延びしないように調整します。PCの配置・余白は変更しません。
   セクションの基本は上下30px、見出しと本文の間は24pxです。
   HEROの上下20px、CMS画像2枚の間18pxは従来のまま維持。
   ============================================================ */
@media (max-width: 640px) {
  /* 共通セクション：書き出しと末尾の余白 */
  .section,
  .section.wide {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .section-head {
    margin-bottom: 24px;
  }

  /* 下層ページ先頭の英字タイトル・日本語見出し */
  .page-title {
    padding: 36px 16px 30px;
  }

  /* 各ページの締めくくりにあるお問い合わせ案内 */
  .cta-band {
    padding: 38px 16px;
  }

  .cta-band h2 {
    margin-top: 10px;
    margin-bottom: 14px;
  }

  .site-footer {
    padding-top: 34px;
    padding-bottom: 18px;
  }

  .footer-main {
    gap: 22px;
  }

  .footer-bottom {
    margin-top: 22px;
    padding-top: 14px;
  }

  /* HERO内も見出し・補足の間隔を少し整理（セクション上下20pxは維持） */
  .hero h1 {
    margin-top: 12px;
    margin-bottom: 18px;
  }

  .hero-note {
    margin-top: 18px;
  }

  /* 文章・画像の2段組が縦並びになる箇所の間隔 */
  .content-two,
  .contact-layout,
  .about-profile,
  .cms-home-grid,
  .cms-service-grid,
  .cms-product-intro-grid,
  .cms-static-grid,
  .cms-demo-box,
  .static-home-grid {
    gap: 24px;
  }

  /* カード・プラン・サンプルが1列になる箇所 */
  .service-grid,
  .plan-grid,
  .sample-grid,
  .sample-page-type,
  .service-route-grid,
  .price-guide-grid,
  .cms-product-grid,
  .cms-portfolio-grid,
  .cms-feature-grid,
  .value-grid,
  .comparison-cards,
  .free-cgi-grid,
  .free-cgi-mini-grid,
  .cgi-detail-feature-grid,
  .cgi-related-grid {
    gap: 16px;
  }

  .service-card,
  .free-cgi-mini-grid article,
  .value-grid article {
    padding: 22px;
  }

  .plan,
  .service-route-card,
  .price-guide-card,
  .owned-site-card {
    padding: 24px 22px;
  }

  .sample-body,
  .cms-product-body {
    padding: 20px;
  }

  .guide-card,
  .cms-feature-grid article {
    padding: 22px 20px;
  }

  .cms-price-redesign {
    padding: 22px;
    gap: 20px;
  }

  .actions,
  .center-actions,
  .cms-product-title .actions {
    margin-top: 20px;
  }

  .cms-home-points,
  .static-home-points {
    margin-top: 16px;
  }

  .sample-page-type,
  .cms-price-feature {
    margin-top: 20px;
  }

  .free-cgi-mini-grid {
    margin-bottom: 20px;
  }

  .comparison-cards {
    margin-top: 20px;
  }

  .html-cms-compare-head {
    margin-bottom: 20px;
  }

  /* トップ：料金ブロックと「HTML or CMS?」の間隔 */
  .home main > section.bg-soft:has(+ .compare-home-section) > .section {
    padding-bottom: 20px;
  }

  /* 比較ブロックは前セクションのすぐ下から始める */
  .home .compare-home-section > .section {
    padding-top: 0;
  }

  .compare-cards-version {
    padding-top: 20px;
    padding-bottom: 24px;
  }

  /* セクション見出しの後に続くガイド一覧は二重の余白をなくす */
  .section-head + .guide-list,
  .section-head + .guide-list:not(.guide-list-home) {
    margin-top: 0;
  }

  .guide-more {
    margin-top: 20px;
  }

  .seo-guide-links {
    margin-top: 16px;
  }

  /* サービス・料金ページでの個別の大きい下余白 */
  .service-choice-section,
  .price-intro-section,
  .seo-pricing-faq {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .price-final-note {
    margin-top: 20px;
  }

  /* お役立ち記事：冒頭と見出し間隔 */
  .guide-hero {
    padding: 36px 16px 30px;
  }

  .guide-hero h1 {
    margin-top: 12px;
    margin-bottom: 14px;
  }

  .article-meta {
    margin-top: 14px;
  }

  .guide-body {
    width: calc(100% - 24px);
    padding-top: 30px;
    padding-bottom: 38px;
  }

  .guide-toc {
    padding: 20px;
    margin-bottom: 28px;
  }

  .guide-body > section {
    margin-top: 36px;
  }

  .guide-body > section:not(.guide-choice) {
    padding-top: 50px; /* 番号バッジと見出しが重ならない高さ */
  }

  .guide-choice {
    padding: 22px !important;
  }

  /* 無料CGI：一覧、個別紹介、ダウンロード案内 */
  .page-hero {
    padding: 36px 16px 30px;
  }

  .free-cgi-lead,
  .free-cgi-to-cms,
  .cgi-preview-section,
  .cgi-use-section,
  .cgi-environment-section,
  .cgi-related-section {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .cgi-detail-hero {
    padding-top: 36px;
    padding-bottom: 24px;
  }

  .cgi-preview-shell,
  .cgi-install-list {
    margin-top: 22px;
  }

  .cgi-detail-feature-grid,
  .cgi-related-grid,
  .cgi-faq-list {
    margin-top: 20px;
  }

  /* 無料CGIのFeaturesだけは既存の短めの余白を維持 */
  .free-cgi-detail-page .cgi-detail-hero + .bg-soft > .section {
    padding-top: 24px;
  }

  /* 注意：CMS画像間は18px、トップHERO上下は20pxのまま */
}

/* ============================================================
   45. 全ページ共通：右下の「ページ先頭へ」ボタン（2026-10-20）
   少し下にスクロールすると表示。スマホでも押しやすいサイズです。
   ============================================================ */
.page-top-button {
  position: fixed;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 90; /* ヘッダーや開いたメニューより手前に出さない */
  width: 52px;
  height: 52px;
  padding: 6px 4px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  box-shadow: 0 5px 20px rgba(16,42,67,.24);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(9px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .2s ease;
}
.page-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.page-top-button:hover { background: var(--blue); }
.page-top-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.page-top-arrow {
  display: block;
  font-family: Arial,sans-serif;
  font-size: 23px;
  font-weight: 600;
  line-height: 1;
}
.page-top-caption {
  display: block;
  margin-top: 2px;
  font: 700 8px/1 Arial,sans-serif;
  letter-spacing: .1em;
}
@media (max-width: 640px) {
  .page-top-button {
    right: 15px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
  }
  .page-top-arrow { font-size: 21px; }
  .page-top-caption { font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-top-button { transition: none; }
  html { scroll-behavior: auto; }
}