/*
Theme Name: ha Original
Theme URI: https://taiyo-ai-medicalblue.jp/
Author: Misuzu Wada
Author URI: https://taiyo-ai-medicalblue.jp/
Description: オリジナルデザイン実装用のシンプルで拡張しやすいWordPressテーマのスターターです。
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: taiyo
*/
/* ===========================
   Global layout width system
   =========================== */
:root{
  /* サイト全体の基準幅と左右余白（必要に応じて数値だけ変える） */
  --container-max: 1120px;                 /* ここを 1080〜1280 で調整 */
  --container-pad: clamp(16px, 2vw, 32px); /* 画面に応じた左右パディング */
  --read-max: 68ch;                        /* 読み物用の最大行長（約68文字） */
    --color-bg:#fff;
  --color-text:#111;
  --color-accent:#111;
}

:root{ --header-h: 68px; }
@media (max-width: 860px){ :root{ --header-h: 60px; } }

.header-inner{ height: var(--header-h); }

@media (max-width: 960px){
  .nav{ top: var(--header-h); } /* ← 常にヘッダー下から開始 */
}

@media (max-width: 767px){
  .fullbleed{ margin-inline: calc(50% - 50vw); } /* はみ出し保険 */
}



/* すべてのページで使っている .container を“間延びしない幅”に統一 */
.container{
  width: min(var(--container-max), 100%);
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

/* 読み物（本文）の行長を抑える。必要なら対象クラスを足してOK */
.prose, .content-narrow, .entry-content{
  max-width: var(--read-max);
  margin-inline: auto;
}

/* 見出しと本文の横並びパーツが広がり過ぎるのを抑える（任意で足す） */
.subhero__inner.container,
.cta-wide__inner,
.area-band .container{
  /* ヒーローや横長CTAは少しだけ狭めに */
  --container-max: 1040px;
}

/* “フル幅で見せたい”所だけに付けるユーティリティ */
.fullbleed{
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

/* とても広いモニタで、更に左右に息を持たせる微調整 */
@media (min-width: 1440px){
  :root{ --container-pad: 40px; } /* 余白を少し増やす */
}




:root {
  /* 個人向けテーマカラー */
  --color-ind-bg: #FAF7F0;
  --color-ind-main: #C8A978;
  --color-ind-text: #3C3C3C;

  /* 法人向けテーマカラー */
  --color-corp-bg: #ffffff;
  --color-corp-main: #4B6A84;
  --color-corp-text: #2E3A47;

  /* 共通 */
  --color-card-bg: #fff;
  --shadow-card: 0 4px 16px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.8;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.header{position:sticky; top:0; background:#fff; border-bottom:1px solid #eee; z-index:20}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:68px}
.site-title{font-weight:700; letter-spacing:.02em}
.nav ul{display:flex; gap:20px; list-style:none; padding:0; margin:0}
.footer{margin-top:0px; padding:40px 0; background:#fff; border-top:1px solid #eee; font-size:.9rem}
.hero{padding:72px 0; background:#fff}
.hero h1{font-size:2rem; margin:.2em 0}
.grid{display:grid; gap:24px}
.card{background:#fff; border:1px solid #eee; border-radius:12px; padding:20px; box-shadow:0 2px 10px rgba(0,0,0,.03)}
.btn{display:inline-block; padding:10px 16px; border-radius:999px; border:1px solid var(--color-accent)}
.btn.primary{background:var(--color-accent); color:#fff; border-color:var(--color-accent)}
@media (max-width: 860px){
  .header-inner{height:60px}
}

/* --- hamburger --- */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  position: absolute;
  right: 20px; /* ← 少し左に寄せたいときに追加 or 値を小さく */
}

.nav-toggle .bar{display:block; width:22px; height:2px; background:#333}
.nav-toggle .bar + .bar{margin-top:4px}

/* PCのナビ */
.nav{margin-left:auto}
.nav .menu{display:flex; gap:20px; list-style:none; padding:0; margin:0}
.nav .menu > li > a{display:block; padding:10px 6px}

/* スマホ: 初期は閉じる */
@media (max-width: 960px){
  .nav-toggle{display:flex}
  .nav{position:absolute; top:68px; right:0; left:0; background:#fff; border-bottom:1px solid #eee;
       transform:translateY(-10px); opacity:0; pointer-events:none; transition:.2s}
  .nav.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .nav .menu{flex-direction:column; padding:10px 16px}
  .nav .menu > li > a{padding:14px 6px}
  .header-inner{position:relative}
}

/* 開いているとき */
.nav-toggle[aria-expanded="true"]{border-color:#ccc; box-shadow:0 0 0 2px rgba(0,0,0,.03) inset}

/* Home */
/* ===== Hero (KV) ===== */
.hero--kv{position:relative; min-height:56vh; display:grid; place-items:center; overflow:hidden}
.hero__bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02)}
.hero__overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25))}
.hero__inner{position:relative; color:#fff; text-align:center}
.eyebrow{letter-spacing:.15em; font-size:.85rem; opacity:.9}
.hero__title{font-size:clamp(28px, 4.6vw, 48px); line-height:1.3; margin:.3em 0 .8em}
.hero__title span{display:block}
.hero__cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* ===== Features (3 cards) ===== */
.home-features .feature{align-items:center; text-align:left}
.feature__ttl{margin:.4em 0 .2em}

/* featureサムネを写真に最適化 */
.feature__thumb{
  width:100%;
  aspect-ratio: 4 / 3;          /* 好みで 16/9 や 1/1 に変更可 */
  border-radius: 14px;
  overflow:hidden;
  background:#f5f5f5;
}
.feature__thumb img{
  width:100%; height:100%;
  object-fit:cover;              /* はみ出しをきれいにトリミング */
  display:block;
}
.feature__ttl{ margin-top:12px; }
.home-features .feature{ /* 画像と本文の間隔など微調整 */
  padding:16px;
}

.feature__thumb img{ transition: transform .3s ease; }
.feature:hover .feature__thumb img{ transform: scale(1.04); }


/* ===== Steps (3) ===== */
.steps{counter-reset: step}
.step{position:relative}
.step__no{position:absolute; top:16px; right:16px; font-weight:700; opacity:.15; font-size:40px}
.step__ttl{margin:.4em 0 .2em}

/* ===== Support (2 boxes) ===== */
.support a{display:grid; grid-template-columns: 1.2fr 1fr; gap:16px; align-items:center}
.support__media{aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#f6f6f6}
.support__media img{width:100%; height:100%; object-fit:cover}
.support__more{display:inline-block; font-size:.9rem; opacity:.8; margin-top:6px}

/* ===== FAQ ===== */
.faq__item{background:#fff; border:1px solid #eee; border-radius:12px; padding:14px 16px; margin:10px 0}
.faq__q{cursor:pointer; font-weight:600}
.faq__item[open] .faq__q{opacity:.95}
.faq__a{margin-top:8px}

/* Helpers */
.section-hd.center{text-align:center}
.center{text-align:center}

@media (max-width: 1024px){
  .support a{grid-template-columns: 1fr}
}

.subhero{background-size:cover; background-position:center; padding:80px 0; color:#fff; position:relative}
.subhero::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.35)}
.subhero__inner{position:relative; text-align:center}
.subhero__title{font-size:clamp(28px, 4vw, 42px); margin:0}

.price-cards .price-card{text-align:center}
.price{font-size:1.8rem; font-weight:700; margin:.4em 0}

.feature-split{display:grid; grid-template-columns:1fr 1fr; gap:32px; margin:40px 0}
.feature-split.reverse{grid-template-columns:1fr 1fr; direction:rtl}
.feature-split.reverse .feature-split__body{direction:ltr}
.feature-split__img img{border-radius:12px; width:100%; object-fit:cover}

.faq-box{background:#faf7f0; padding:24px; border-radius:12px}

/* 中央レイアウト */
.hero--kv.is-center .hero__inner{
  text-align:center;
  display:grid;
  justify-items:center;
  gap:10px;
  max-width: 920px; /* テキスト幅の上限 */
}

/* タイトルを大きく＆読みやすく */
.hero__title--xl{
  font-size: clamp(36px, 6.2vw, 64px);
  line-height:1.2;
  font-weight:800;
  letter-spacing:.02em;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}

/* リードは少し淡く＆影で読みやすさアップ */
.hero__lead{
  color: rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.30);
  max-width: 56ch;
}

/* 白縁ボタン（個人／法人） */
.btn.ghost-white{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.95);
  border-radius:8px;            /* もっと丸くしたい→999px */
  padding:11px 20px;
  font-weight:700;
}
.btn.ghost-white:hover{
  background:rgba(255,255,255,.96);
  color:#111;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.hero__cta{ gap:14px; }

/* オーバーレイを空の雰囲気に寄せる（上部を少し明るく） */
.hero__overlay--sky{
  background:
    linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.26) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
}

/* スマホは中央のまま文字サイズだけ少し控えめに */
@media (max-width: 860px){
  .hero--kv.is-center .hero__inner{ max-width:none; }
  .hero__lead{ max-width:none; }
}


/* 個人向けページ */
body.page-template-page-individual {
  background: var(--color-ind-bg);
  color: var(--color-ind-text);
}

body.page-template-page-individual .card {
  background: var(--color-card-bg);
  box-shadow: var(--shadow-card);
}

body.page-template-page-individual .price-card {
  border: 1px solid #E6E0D3;
}

body.page-template-page-individual .section-ttl {
  color: var(--color-ind-text);
}

body.page-template-page-individual .btn.primary {
  background: var(--color-ind-main);
  border-color: var(--color-ind-main);
}

/* Stepsの1.2.3を消す */
ol.steps,
.steps{
  list-style: none;         /* デフォの番号を無効化 */
  padding-left: 0;
  margin-left: 0;
}
ol.steps > li::marker,
.steps > li::marker{
  content: "" !important;   /* Safari等でも確実に非表示 */
}

/* 写真サムネ */
.feature__thumb{
  width:100%;
  aspect-ratio: 4 / 3;          /* 1/1 や 16/9 に変更可 */
  border-radius:12px;
  overflow:hidden;
  background:#f5f5f5;
  margin-bottom:12px;
}
.feature__thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .28s ease;
}
.card.feature:hover .feature__thumb img{ transform:scale(1.03); }

/* 以前の絵文字アイコンを隠したい場合（HTMLに残っていてもOK） */
.feature__icon{ display:none !important; }


/* 法人向けページ */
body.page-template-page-corporate {
  background: var(--color-corp-bg);
  color: var(--color-corp-text);
}

body.page-template-page-corporate .feature-split__body h2 {
  color: var(--color-corp-text);
}

body.page-template-page-corporate .btn.primary {
  background: var(--color-corp-main);
  border-color: var(--color-corp-main);
}

/* ====== 法人ページ：交互背景（白 ↔︎ 淡グレー） ====== */
body.page-template-page-corporate .alt-wrap > .alt { background:#fff; }
body.page-template-page-corporate .alt-wrap > .alt:nth-child(odd) { background:#f6f8fa; }
.alt-wrap > .alt .page-section { padding:40px 0; }

/* ====== 画像＋テキストの交互レイアウト ====== */
.media-row{display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center}
.media-row.reverse{grid-template-columns:1fr 1.1fr; direction:rtl}
.media-row.reverse .media-row__body{direction:ltr}
.media-row__img img{width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06)}
.media-row__body h2{margin:.2em 0 .4em; font-size:clamp(20px,2.2vw,28px)}
.meta-list{display:flex; flex-wrap:wrap; gap:10px 16px; padding:0; margin:10px 0 0; list-style:none; opacity:.9}

/* ====== はじめての方へ（4カード） ====== */
.mini-cards .mini{padding:12px}
.mini-cards .mini img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:10px; margin-bottom:8px}
.mini-cards .mini h3{margin:.2em 0}
.mini-cards .mini p{opacity:.85; margin:0}

/* ====== 料金プラン（3カード） ====== */
.plan-cards{align-items:stretch}
.plan{position:relative; text-align:center; padding-top:18px}
.plan.featured{border:2px solid var(--color-corp-main)}
.plan__name{font-weight:700; margin:0 0 .3em}
.plan__price{font-size:1.8rem; font-weight:800; margin:.2em 0 .6em}
.plan__price .yen{font-size:1.1rem; opacity:.8; margin-right:2px}
.plan__feat{list-style:none; padding:0; margin:0 0 1em; display:grid; gap:6px; opacity:.95}

/* ====== FAQ ====== */
body.page-template-page-corporate .faq__item{background:#fff; border:1px solid #eee; border-radius:12px; padding:14px 16px; margin:10px 0}
.faq__q{font-weight:600; cursor:pointer}
.faq__a{margin-top:8px}

/* ====== レスポンシブ ====== */
@media (max-width: 860px){
  .media-row, .media-row.reverse{grid-template-columns:1fr}
}


/* サブヒーロー全体の上下余白もレスポンシブに */
.subhero{
  padding: clamp(48px, 9vw, 100px) 0;   /* 48〜100pxで自動 */
}

/* タイトルはそのままでOK。サブタイトルを可変に */
.subhero__lead{
  font-size: clamp(14px, 1.8vw, 18px);  /* 14〜18pxで自動 */
  line-height: 1.9;
  margin: .6em auto 0;
  max-width: 60ch;                      /* PCで行長を制御（読みやすさ） */
  padding-inline: clamp(12px, 3vw, 24px); /* 端にくっつかないよう内側余白 */
  color: #fff;                           /* 念のため */
  text-shadow: 0 1px 10px rgba(0,0,0,.35);
  overflow-wrap: anywhere;               /* 万一の長い語も折り返す */
}

/* モバイル時は中央寄せ＆幅制限を外す */
@media (max-width: 860px){
  .subhero__inner{ text-align:center; padding-inline: clamp(12px, 4vw, 28px); }
  .subhero__lead{ max-width: none; line-height: 1.8; }
}

/* かなり小さい端末向けの最終調整（任意） */
@media (max-width: 380px){
  .subhero__lead{ font-size: 13.5px; }
}


/* ============ Bands ============ */
.band{width:100%}
.band--beige{background:var(--color-ind-bg)}

/* ============ Section headings ============ */
.section-hd{margin-bottom:14px}
.section-hd .section-ttl{margin:0; font-size:1.4rem}
.section-sub{opacity:.8; margin-top:6px}
.center{text-align:center}

/* ============ Features ============ */
.feature-3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 2列固定 */
  gap: clamp(16px, 2vw, 24px); /* 余白はお好みで */
}

/* スマホは1列に */
@media (max-width: 768px) {
  .feature-3 {
    grid-template-columns: 1fr;
  }
}

/* ============ Steps ============ */
.step-3 .step{position:relative}
.step__no{position:absolute; top:14px; right:14px; font-weight:700; opacity:.15; font-size:36px}

/* ============ Prices ============ */
.price-cards{align-items:stretch}
.price-card{position:relative; text-align:center; padding-top:26px}
.price-card .badge{
  position:absolute; top:12px; left:12px; font-size:.8rem; padding:4px 8px; border-radius:999px;
  background:#eee;
}
.price-card.featured{border:2px solid var(--color-ind-main)}
.price-card.featured .badge{background:var(--color-ind-main); color:#fff}
.price-card .price{font-size:2rem; font-weight:800; letter-spacing:.02em; margin:.2em 0}
.price-card .price .yen{font-size:1.2rem; margin-right:2px; opacity:.8}
.price-card .desc{opacity:.9; margin:.2em 0 1em}
.btn.block{display:block; width:100%; text-align:center}

/* ============ Voices ============ */
.voice{display:flex; flex-direction:column; gap:8px}
.voice__txt{margin:0}
.voice__by{font-style:normal; opacity:.7}

/* ============ FAQ ============ */
.faq--boxed .faq__item{background:#fff; border:1px solid #eee; border-radius:12px; padding:14px 16px; margin:10px 0}
.faq__q{font-weight:600; cursor:pointer}
.faq__a{margin-top:8px}

/* ============ Subhero ============ */
.subhero.subhero--blend::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0))}
.subhero__inner{position:relative; text-align:left}
.subhero__lead{margin:.5em 0 0}

/* 交互背景（個人向けはベージュ→白→ベージュ…） */
.alt-wrap > .alt { background:#fff; }
.alt-wrap > .alt:nth-child(odd) { background: var(--color-ind-bg); } /* 1,3,5…がベージュに */
.alt-wrap > .alt .page-section { padding: 40px 0; }  /* セクションの上下余白を確保 */


/* 事業概要の交互背景（白 ↔︎ 薄ベージュ） */
body.page-template-page-about .alt-wrap > .alt { background:#fff; }
body.page-template-page-about .alt-wrap > .alt:nth-child(odd) { background:#FAF7F0; }
body.page-template-page-about .alt-wrap > .alt .page-section { padding:40px 0; }

/* ミニカード（MISSION / VISION） */
.mini-media__item{display:grid; grid-template-columns:140px 1fr; gap:16px; align-items:center}
.mini-media__img img{width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px}
.mini-media__body h3{margin:.2em 0}

/* 取り扱い領域（チェックリスト） */
.area-columns{align-items:stretch}
.check-list{list-style:none; margin:0; padding:16px; display:grid; gap:10px}
.check-list li{position:relative; padding-left:26px}
.check-list li::before{
  content:""; position:absolute; left:0; top:.45em; width:16px; height:16px;
  border:1.5px solid #6b7280; border-radius:4px; box-shadow:inset 0 0 0 2px #fff;
}
.check-list li::after{
  content:""; position:absolute; left:4px; top:.55em; width:8px; height:8px; background:#6b7280; border-radius:2px;
}

/* 会社情報テーブル（2カラム） */
.table{display:grid; gap:0; overflow:hidden}
.table .tr{display:grid; grid-template-columns:180px 1fr; border-top:1px solid #eee; padding:14px 16px}
.table .tr:first-child{border-top:none}
.table .tr > div:first-child{font-weight:600; opacity:.9}
.table .tr > div:last-child{opacity:.95}

/* 代表メッセージのメディア行（流用） */
.media-row{display:grid; grid-template-columns:1.1fr 1fr; gap:28px; align-items:center}
.media-row.reverse{grid-template-columns:1fr 1.1fr; direction:rtl}
.media-row.reverse .media-row__body{direction:ltr}
.media-row__img img{width:100%; height:100%; object-fit:cover; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.06)}

@media (max-width: 900px){
  .mini-media__item{grid-template-columns:1fr}
  .table .tr{grid-template-columns:1fr}
}

/* ========== Logo grid (統一版) ========== */
.logo-grid{
  --logo-gap: 20px;
  --logo-card-h: 110px;
  --logo-img-h: 56px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--logo-gap);
  align-items:center;
  justify-items:center;
}
.logo-grid.cols-4{ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.logo-grid.cols-5{ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

.logo-grid .logo{
  width:100%; height:var(--logo-card-h);
  background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:var(--shadow-card); display:grid; place-items:center; padding:16px;
}

/* 基本はカラー表示 */
.logo-grid .logo img{
  max-height:var(--logo-img-h); width:auto; height:auto; object-fit:contain;
  filter:none; -webkit-filter:none; opacity:1;
  transition: filter .2s, opacity .2s, transform .2s;
}

.logo-grid .logo img:hover{ transform:translateY(-1px); }

@media (max-width: 1100px){
  .logo-grid{ grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); }
}
@media (max-width: 700px){
  .logo-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px){
  .logo-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* 対応エリア */
.area-band{background:#FAF7F0} /* 白帯にしたい場合はこの行を削除 */
.area-card{padding:24px; text-align:center}
.area-icon{font-size:22px; margin-bottom:6px}
.area-name{margin:0 0 6px; font-weight:700}
.area-cities{margin:0; line-height:1.9; font-size:.95rem; white-space:pre-wrap; opacity:.95}
@media (max-width:860px){.areas{grid-template-columns:1fr}}

/* ==== Services list ==== */
.service-list{display:grid; gap:18px}
.service-row{display:grid; grid-template-columns:260px 1fr; gap:16px; align-items:start; padding:12px}
.service-row__img{display:block; border-radius:10px; overflow:hidden; background:#f6f6f6}
.service-row__img img{width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9}
.service-row__img .ph{width:100%; aspect-ratio:16/9; background:linear-gradient(135deg,#f5f5f5,#eee)}
.service-row__title{margin:.1em 0 .2em; font-size:1.1rem}
.service-row__title a{text-decoration:none}
.service-row__excerpt{margin:.3em 0 .6em; opacity:.95}
.service-meta{display:flex; gap:10px 16px; list-style:none; padding:0; margin:0 0 .6em; flex-wrap:wrap; opacity:.95}
.badge{display:inline-block; font-size:.75rem; padding:2px 6px; border-radius:999px; background:#eef1f4; margin-right:6px}
.service-row__cta{margin-top:auto}

.pager{display:flex; gap:8px; justify-content:center; margin-top:18px}
.pager .page-numbers{display:inline-block; padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px}
.pager .current{background:#111; color:#fff; border-color:#111}

/* “相談できること”の3カード */
.tips .tip{padding:16px; text-align:center}
.tips .tip h3{margin:.2em 0 .3em}

@media (max-width: 980px){
  .service-row{grid-template-columns:1fr}
}

/* ===== Services page spacing (page-services.php だけ) ===== */
body.page-template-page-services-php .page-section{
  padding: 64px 0;              /* セクション上下の余白（既存: 40px → 64px） */
}

body.page-template-page-services-php .section-hd{
  margin-bottom: 28px;          /* 見出しの下の余白（既存より広め） */
}

body.page-template-page-services-php .service-list{
  gap: 26px;                    /* 各サービス行の間隔 */
}

body.page-template-page-services-php .service-row{
  gap: 20px;                    /* サムネと本文の間隔 */
  padding: 18px;                /* 行カード内の余白 */
}

body.page-template-page-services-php .service-row__body > * + *{
  margin-top: 12px;             /* タイトル→本文→メタ→ボタンの縦間隔 */
}

body.page-template-page-services-php .service-row__excerpt{
  margin: .3em 0 .8em;          /* 本文の下をやや広めに */
}

body.page-template-page-services-php .service-meta{
  margin-bottom: .6em;          /* メタの下に少し余白 */
}

body.page-template-page-services-php .tips{ 
  gap: 22px;                    /* 下部の3カードの間隔 */
}
body.page-template-page-services-php .tips .tip{
  padding: 20px;                /* 3カード内の余白 */
}

/* スマホ時は少しだけタイトに戻す */
@media (max-width: 980px){
  body.page-template-page-services-php .page-section{ padding: 44px 0; }
  body.page-template-page-services-php .service-row{ padding: 16px; }
}

/* ===== CTA Wide ===== */
.cta-wide{padding:56px 0; border-top:1px solid #eee; background:#fff}
.cta-wide--band{background:#FAF7F0} /* 帯にしたいときは B の band=true に */

.cta-wide__inner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.cta-wide__title{margin:0; font-size:clamp(20px, 2.6vw, 28px)}
.cta-wide__lead{margin:.35em 0 0; opacity:.85}
.cta-wide__actions{display:flex; gap:12px; flex-wrap:wrap}

@media (max-width: 860px){
  .cta-wide__inner{flex-direction:column; align-items:flex-start}
}

.btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
/* 横並びのまま、右側を内側に寄せる */
.cta-wide__inner{justify-content:flex-start; gap:28px}

/* CTAセクションのボタン装飾 */
.cta-wide .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 22px; border-radius:999px; font-weight:700;
  text-decoration:none; border:1px solid #e5e7eb; background:#fff; color:#111;
  transition:.18s ease; position:relative; isolation:isolate;
}
.cta-wide .btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.1) }

.cta-wide .btn.primary{
  background:linear-gradient(180deg,#111 0%, #1f1f1f 100%); color:#fff; border-color:#111;
  box-shadow:inset 0 -2px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.12);
}
.cta-wide .btn.primary.btn--shine::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.22), transparent 42%);
  opacity:0; transition:opacity .18s ease; mix-blend-mode:screen;
}
.cta-wide .btn.primary.btn--shine:hover::after{ opacity:.8; }

.cta-wide .btn.ghost{ background:#fff; color:#111; border-color:#e5e7eb; }
.cta-wide .btn.ghost:hover{ background:#f7f7f7; border-color:#dfe3e8; }

.cta-wide .btn--arrow::after{ content:"\2192"; transform:translateX(2px); opacity:.9; transition:.18s ease; }
.cta-wide .btn--arrow:hover::after{ transform:translateX(6px); }

.cta-wide .btn--lg{ font-size:1.05rem; padding:14px 24px }

/* ===== Contact ===== */
.contact-card{ padding:20px }
.notice{ padding:12px 14px; border-radius:10px; margin-bottom:12px }
.notice.success{ background:#ecfdf5; border:1px solid #10b98133 }
.notice.error{ background:#fef2f2; border:1px solid #ef444433 }

.contact-form .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
.contact-form .form-field--full{ grid-column:1/-1 }
.contact-form label{ font-weight:600; display:block; margin-bottom:6px }
.contact-form .req{ font-size:.75rem; margin-left:.5em; padding:.1em .4em; background:#111; color:#fff; border-radius:999px }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:10px;
  background:#fff; transition:border-color .15s, box-shadow .15s;
}
.contact-form textarea{ resize:vertical }
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:#111; box-shadow:0 0 0 3px rgba(17,17,17,.08);
}
.contact-form .check{ display:flex; gap:8px; align-items:flex-start; font-size:.95rem }
.contact-form .form-actions{ margin-top:6px }

/* LINE 帯 */
.line-band{ background:#DFF2DF }               /* 淡いグリーン */
.line-band__grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:22px; align-items:center }
.line-band__qr{ padding:16px; background:#fff }
.line-band__qr img{ width:100%; height:auto; display:block }
.btn.line{
  background:linear-gradient(180deg,#16a34a 0%, #0f9a43 100%); color:#fff; border-color:#0f9a43;
}
.btn.line:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(16,163,74,.25) }

/* ボタン拡張（共通再利用） */
.btn--lg{ padding:14px 22px; font-size:1.05rem; border-radius:999px; font-weight:700 }
.btn--arrow::after{ content:"\2192"; margin-left:8px; transition:transform .18s; }
.btn--arrow:hover::after{ transform:translateX(4px) }

@media (max-width: 860px){
  .contact-form .form-grid{ grid-template-columns:1fr }
  .line-band__grid{ grid-template-columns:1fr; }
}
/* ===== Contact (スクショ寄せ) ===== */

/* フォーム箱を細く中央に */
.contact-card{
  max-width: 720px;           /* ← 640～760で微調整 */
  margin-inline: auto;
  padding: 28px;
}

/* ラベル・入力の素朴な見た目 */
.contact-form .form-grid{ display:grid; grid-template-columns: 1fr; gap: 14px; }
.contact-form label{ font-weight:700; font-size:.95rem; margin-bottom:6px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%; padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px;
  background:#fff; transition:border-color .15s, box-shadow .15s;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:#111; box-shadow:0 0 0 3px rgba(17,17,17,.08);
}

/* 同意チェックの行間とサイズ */
.contact-form .check{ display:flex; gap:8px; align-items:flex-start; font-size:.92rem }

/* 送信ボタン：黒・小さめ・角丸控えめ */
.btn--black{
  background:#111; color:#fff; border:1px solid #111; border-radius:6px;
  padding:10px 16px; font-weight:700; letter-spacing:.03em;
}
.btn--black:hover{ background:#1a1a1a; transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.btn--sm{ font-size:.95rem; padding:9px 14px; }
.form-actions{ margin-top: 10px; }

/* 見出しの間隔（中央寄せの軽さ） */
.section-hd.center .section-ttl{ margin-bottom: 6px; }
.section-hd.center .section-sub{ opacity:.85; }

/* =========================
   line-band レスポンシブ対応
   ========================= */

/* デフォルト（PC想定）— 2カラム、右のQR箱は固定幅 */
.line-band__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 380px; /* 左可変 + 右固定 */
  gap: 28px;
  align-items: center;
}

/* 文字サイズ・行間の微調整（任意） */
.line-band__text .section-ttl{ margin: 0 0 6px; }
.line-band__text p{ line-height: 1.75; }

/* タブレット（～1024px）：QR固定は維持しつつ左幅を少し広げる */
@media (max-width: 1024px) {
  .line-band__grid{
    grid-template-columns: minmax(0, 1fr) 340px; /* 右を少し小さく */
    gap: 24px;
  }
  .line-band__qr{ padding: 14px; }
}

/* 小さめタブレット/大型スマホ（～840px）：QRの固定をやめて両方可変に */
@media (max-width: 840px) {
  .line-band__grid{
    grid-template-columns: 1fr 1fr;  /* 2カラムは維持、比率だけ変更 */
    gap: 20px;
  }
  .line-band__qr{ padding: 14px; }
}

/* スマホ（～768px）：1カラム縦積み、QRは下に */
@media (max-width: 768px) {
  .line-band__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  /* QRを横幅に合わせて見やすい最大幅に（中央寄せ） */
  .line-band__qr{
    max-width: 420px;
    margin-inline: auto;
    padding: 12px;
  }
  .line-band__text .section-ttl{
    margin-bottom: 8px;
  }
  .line-band__text p{
    font-size: 0.95rem;
  }
}

/* 極小端末（～480px）：余白とフォントをさらに最適化 */
@media (max-width: 480px) {
  .line-band{ padding: 16px 0; }
  .line-band__grid{ gap: 14px; }

  .line-band__qr{
    max-width: 360px;
    padding: 10px;
    border-radius: 10px;
  }

  .btn.line{
    padding: 11px 18px;
    font-size: 0.95rem;
  }
}

/* ボタン：キーボード/タッチ対応のフォーカスリング */
.btn.line{
  background: #2DBE60;
  border: 1px solid #28aa56;
  color: #fff;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 700;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.btn.line:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(45,190,96,.25);
}
.btn.line:focus-visible{
  outline: 2px solid #1f8f47;
  outline-offset: 2px;
}

/* 動きが苦手なユーザー配慮 */
@media (prefers-reduced-motion: reduce) {
  .btn.line{ transition: none; }
  .btn.line:hover{ transform: none; box-shadow: none; }
}

/* 画像は親幅にフィット */
.line-band__qr img{
  width: 100%;
  height: auto;
  display: block;
}


/* ヒーローの下と帯の上下を少し広めに */
.page-template-page-contact-php .page-section{ padding: 56px 0; }

/* Contact Form 7 を使うときも同じ見た目に（最低限の上書き） */
.wpcf7 form .wpcf7-form-control{ width:100%; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea{
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:8px; background:#fff;
}
.wpcf7 label{ font-weight:700; display:block; margin-bottom:6px; }
.wpcf7 .wpcf7-submit{ background:#111; color:#fff; border:1px solid #111; border-radius:6px; padding:10px 16px; font-weight:700; }
.wpcf7 .wpcf7-submit:hover{ background:#1a1a1a; }



/* ===== Footer – 見やすさ改善（全テーマ共通の軽量パッチ） ===== */
.site-footer{
  background:#fafafa;
  color:#111;
  border-top:1px solid #eee;
  font-size:.95rem;
}
.site-footer a{ color:#111; text-decoration:none }
.site-footer a:hover{ text-decoration:underline }

/* 横幅と左右余白（containerが無くても効く） */
.site-footer .wrap,
.site-footer .container{
  width:min(1120px, 100%);
  margin-inline:auto;
  padding:24px clamp(16px, 2vw, 32px);
  box-sizing:content-box;
}

/* メニュー：箇条書きの点を消し、横並び→折り返し */
.site-footer ul,
.site-footer .menu{               /* wp_nav_menu の .menu にも効かせる */
  list-style:none;
  margin:0 0 10px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
}
.site-footer .menu li{ margin:0; }
.site-footer .menu a{ padding:6px 0; }

/* コピーライトの見た目を安定させる */
.site-footer .copyright{
  display:block;
  margin-top:6px;
  opacity:.75;
  font-size:.9rem;
}

/* 画面が狭くなったら行間を少し広げる */
@media (max-width: 640px){
  .site-footer ul,
  .site-footer .menu{ gap:6px 14px }
}

/* ===== Footer – 読みやすさ改善（このHTMLに合わせた最小パッチ） ===== */
.footer{
  background:#fafafa;
  border-top:1px solid #eee;
  color:#111;
  font-size:.95rem;
}
.footer a{ color:#111; text-decoration:none }
.footer a:hover{ text-decoration:underline }

/* 横幅と左右余白（containerがある前提） */
.footer .container{
  width:min(1120px, 100%); /* もっと狭くしたい時は 1040px などに */
  margin-inline:auto;
  padding:24px clamp(16px, 2vw, 32px);
  box-sizing:content-box;
}

/* メニュー：箇条書きの点を消し、横並び→折り返し、行間も確保 */
.footer .menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 22px;           /* 行間 / 横間隔 */
}
.footer .menu li{ margin:0 }
.footer .menu a{ display:inline-block; padding:6px 0 }

/* 現在ページの視認性 */
.footer .menu .current-menu-item > a,
.footer .menu .current_page_item > a{
  font-weight:700;
  border-bottom:2px solid #111;
}

/* コピーライトを安定表示 */
.footer .container > p{
  margin-top:10px !important; /* 既存の inline-style 代わりに */
  opacity:.75;
  font-size:.9rem;
}

/* スマホ時は少しタイトに */
@media (max-width: 640px){
  .footer .menu{ gap:6px 14px }
}

/* ===== Header logo ===== */
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand{ display:flex; align-items:center; }

/* 画像ロゴのサイズ（SVG/PNGどちらでもOK） */
.custom-logo{ height: 48px; width:auto; }     /* PCでの高さ */
.custom-logo-link{ display:inline-flex; align-items:center; line-height:1; }

/* テキストfallback用 */
.site-logo{ font-weight:800; font-size:1.05rem; text-decoration:none; color:#111; }

@media (max-width: 960px){
  .custom-logo{ height:28px; }
}

/* ===========================
   Section spacing (全ページ)
   =========================== */

/* ベース余白を増やす（見出しブロックを包む .page-section に適用） */
:root{
  --section-pad-y: clamp(56px, 7vw, 104px);  /* セクション上下の基本余白 */
  --section-gap:   clamp(28px, 4vw, 56px);   /* セクション間の間隔 */
}
.page-section{ padding: var(--section-pad-y) 0; }


/* セクションが連続する時の上側だけを増やす（見出しが天井にくっつかない） */
section + section .page-section{ padding-top: calc(var(--section-pad-y) + 12px); }

/* 交互背景(.alt-wrap 内)での連続時にも効かせる */
.alt-wrap .alt + .alt .page-section{ padding-top: calc(var(--section-pad-y) + 16px); }

/* モバイルでは少しタイトに戻す */
@media (max-width: 860px){
  :root{ --section-pad-y: clamp(40px, 7vw, 72px); --section-gap: clamp(20px, 5vw, 40px); }
}

/* ===== Front page: 最初のセクションだけ余白を増やす ===== */

/* ヒーローの直下にしっかり間を作る（ヒーローのクラスがあればどれでも拾う） */
.home main > .subhero,
.home main > .hero,
.home main > .mv,
.home main > .kv{
  margin-bottom: clamp(28px, 4vw, 56px);
}

/* ヒーローが無い／最初がいきなり section の場合に上側のパディングを追加 */
.home main > section:first-of-type .page-section,
.home .alt-wrap > .alt:first-of-type .page-section{
  padding-top: calc(clamp(56px, 7vw, 104px) + 16px);
}

/* 念のため：sectionが .page-section を持っていない場合の保険 */
.home main > section:first-of-type{
  padding-top: clamp(56px, 7vw, 104px);
}
/* ===========================
   Front page – section spacing
   =========================== */
.home{
  --home-pad: clamp(64px, 7vw, 120px);   /* セクション上下の基本余白 */
  --home-gap: clamp(36px, 5vw, 72px);    /* セクション間の間隔 */
}

/* 1) すべての“セクションっぽい”ブロックに上下余白を付与 */
.home main > section .page-section,
.home .alt-wrap > .alt .page-section,
.home main > .cta-wide,
.home main > .area-band{
  padding-top: var(--home-pad);
  padding-bottom: var(--home-pad);
}

/* 2) 2個目以降のブロックは、上側を少し多め＋間隔も確保 */
.home main > section:not(:first-of-type) .page-section,
.home .alt-wrap > .alt:not(:first-of-type) .page-section,
.home main > .cta-wide:not(:first-of-type),
.home main > .area-band:not(:first-of-type){
  padding-top: calc(var(--home-pad) + 16px);
  margin-top: var(--home-gap);
}

/* 3) ヒーローがある場合は、その下にもしっかり間を作る */
.home main > .subhero,
.home main > .hero,
.home main > .mv,
.home main > .kv{
  margin-bottom: var(--home-gap);
}

/* 4) .page-section を持たない素の <section> への保険 */
.home main > section:not(:first-of-type):not(:has(.page-section)){
  padding-top: var(--home-pad);
  margin-top: var(--home-gap);
}

/* モバイルはややタイトに */
@media (max-width: 860px){
  .home{ --home-pad: clamp(48px, 7vw, 88px); --home-gap: clamp(24px, 5vw, 44px); }
}

/* 例：末尾に一本化 */
.grid.cols-4{ grid-template-columns:repeat(4,1fr) }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-2{ grid-template-columns:repeat(2,1fr) }

@media (max-width:1100px){ .grid.cols-4{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:1024px){ .grid.cols-2{ grid-template-columns:1fr } }
@media (max-width:860px){  .grid.cols-3{ grid-template-columns:1fr } }

/* 画像は自動調整して表示 */
img, video, iframe{ max-width:100%; height:auto; display:block; }

pre, code, .code-block, .table-wrap{ overflow-x:auto; }

p, li, .text, .article{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================
   全ページ：スマホで左右にゆとりを作る
   ========================= */

/* モバイルのガター幅を明示（16→20〜24pxにしたいなら数値を上げる） */
@media (max-width: 767px){
  :root{ --container-pad: 20px; } /* 例: 20px。もっと余白欲しければ 24px に */
}

/* container系は余白込みで中央＆はみ出しなし */
.container{
  max-width: min(var(--container-max), 100% - calc(2 * var(--container-pad)));
  margin-inline: auto;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
}

/* containerを使っていない“フル幅背景セクション”にも内側余白を付与 */
@media (max-width: 767px){
  /* ヒーロー/サブヒーローの中身、帯系、CTAなど */
  .hero__inner,
  .subhero__inner,
  .alt .page-section,
  .cta-wide__inner,
  .area-band,
  .line-band,
  .site-footer .wrap{
    padding-inline: var(--container-pad);
  }

  /* 交互レイアウトなど grid直下にテキストが来るものの保険 */
  .media-row,
  .feature-split,
  .service-row,
  .logo-grid{
    padding-inline: var(--container-pad);
  }

  /* ナビのドロワーも端にくっつかないように */
  .nav .menu{
    padding-inline: var(--container-pad);
  }
}

/* フルブリードの横はみ出し保険（既に入れていれば不要） */
@media (max-width: 767px){
  .fullbleed{ margin-inline: calc(50% - 50vw); }
}

.home main {
  padding-bottom: clamp(60px, 10vw, 120px);
}