/* --------- Base --------- */

:root{
  --bg: #edf5fb;            /* サイト全体の淡いブルー背景 */
  --ink: #0f172a;           /* 見出しなどの濃い文字色（slate-900） */
  --muted: #64748b;         /* 補助テキスト（slate-500） */
  --card: #ffffff;
  --line: #e6eef6;          /* 罫線も青み寄りに */
  --brand: #2563eb;         /* メインブルー（blue-600） */
  --accent: #60a5fa;        /* アクセント（blue-400） */
  --pill: #1d4ed8;          /* ラベル等の濃いブルー */
  --hero-from: #eff6ff;     /* ヒーローの青系グラデその1 */
  --hero-to: #e0f2fe;       /* ヒーローの青系グラデその2 */
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
  --radius: 16px;
}
html,body{min-height:100%;}
html{font-feature-settings: "palt";}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height:1.6;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:0 16px;}
.btn{display:inline-block; padding:10px 16px; border-radius:12px; font-weight:600; border:1px solid transparent;}
.btn--brand{background:var(--brand); color:#fff;}
.btn--line{border-color: var(--brand); color:var(--brand); background:#fff;}
.btn--ghost{border-color:#d1d5db; background:#fff;}
.chip{display:inline-block; padding:6px 12px; border-radius:999px; border:1px solid var(--line); background:#f8fbff; font-size:14px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);}
.grid{display:grid; gap:20px;}
.grid-2{grid-template-columns: repeat(2, minmax(0,1fr));}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr));}
.grid-4{grid-template-columns: repeat(4, minmax(0,1fr));}
.section{padding:56px 0; background:#fff; border-top:1px solid var(--line);}
.section.alt{background:#fafafa;}
h1,h2,h3{line-height:1.25; margin:0 0 8px;}
h1{font-size: clamp(28px, 3vw + 8px, 40px);}
h2{font-size: 24px; margin-bottom: 16px;}
h3{font-size: 18px;}
p.lead{color:var(--muted); margin:0}
small, .muted{color:var(--muted);}
.space-y > * + *{margin-top:12px}



/* --------- Hero --------- */
.hero{
  background: radial-gradient(1200px 500px at 20% -50%, var(--hero-from), transparent 70%),
              radial-gradient(1200px 500px at 100% 0%, var(--hero-to), transparent 60%),
              #fff;
  border-top:1px solid var(--line);
}
.hero__wrap{display:grid; grid-template-columns:1fr; gap:24px; padding:64px 0;}
.hero__media{border-radius:20px; background:#e5e7eb; aspect-ratio:16/9; border:1px solid var(--line);}
@media (min-width: 900px){ .hero__wrap{grid-template-columns: 1.1fr .9fr;} }

/* --------- Availability --------- */
.avail{transform: translateY(-24px); position:relative; z-index:5;}
.avail__box{padding:20px; border-radius:20px;}
.week{display:grid; grid-template-columns: repeat(7,1fr); gap:10px; margin-top:10px;}
.week__day{display:flex; flex-direction:column; gap:8px; align-items:stretch; text-align:center; font-size:14px;}
.week__cell{border:1px solid var(--line); border-radius:12px; padding:10px 0; background:#fff; box-shadow:var(--shadow); font-weight:700;}
.legend{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); margin-top:10px;}
.legend .btn{opacity:.6; pointer-events:none}

/* --------- Stats --------- */
.stats .card{padding:18px; text-align:center;}
.stats .label{font-size:12px; color:var(--muted)}
.stats .val{margin-top:6px; font-size:20px; font-weight:800}

/* --------- Services --------- */
.svc .card{padding:16px;}
.thumb{aspect-ratio:16/9; background:#e5e7eb; border-radius:12px; border:1px solid var(--line);}
.card .actions{display:flex; gap:10px; margin-top:12px;}
.pill{display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; color:#fff; background:var(--pill);}

/* --------- Price table --------- */
.table{border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff;}
.table .row{display:grid; grid-template-columns:1.2fr .8fr .8fr; padding:14px 16px;}
.table .row.head{background:#f3f4f6; font-weight:700; font-size:14px;}
.table .row:nth-child(even){background:#fafafa;}
.table .row .price{font-weight:800}

/* --------- Area chips --------- */
.chips{display:flex; flex-wrap:wrap; gap:8px;}

/* --------- Reviews --------- */
.review.card{padding:16px;}
.ske{height:14px; width:140px; background:#e5e7eb; border-radius:6px; margin-bottom:10px;}
.ske.small{width:100px}
.review p{font-size:14px; color:var(--muted); margin:0}

/* --------- Contact --------- */
.form{display:grid; grid-template-columns:1fr; gap:12px;}
.field{display:block; font-size:14px;}
.field label{display:block; margin-bottom:6px; color:var(--muted)}
.input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff;}
.textarea{min-height:120px;}



/* --------- Sticky CTA --------- */
.floating{position:fixed; right:16px; bottom:16px; display:flex; gap:10px; z-index:30}
.floating .btn{border-radius:16px; box-shadow:var(--shadow);}

/* --------- Utilities --------- */
.mb-0{margin-bottom:0}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.center{display:flex; align-items:center; gap:12px}
.between{display:flex; align-items:center; justify-content:space-between}


/* custom-logo（WPが出力）を既存デザインに馴染ませる */
.brand .custom-logo {
  width: 32px;       /* 既存 .brand__logo と同じ見た目に */
  height: 32px;
  border-radius: 8px;
  object-fit: cover; /* 正方形にトリミング */
}
.brand .custom-logo-link { /* the_custom_logo は <a> で出ることが多い */
  display: inline-flex;
  align-items: center;
}
.brand__name { font-weight: 800; } /* 念のため */

/* 画像入りサムネイル用（サービス／完全分解セクション） */
.thumb {
  position: relative;
  overflow: hidden;
}
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* 料金テーブル（トップページ専用 2列版） */
.table.table--price-2col .row {
  grid-template-columns: 1.5fr 0.7fr; /* メニュー／料金の2列 */
}

/* メイン/オプションのグループ行 */
.table.table--price-2col .row.group {
  background: #f8fafc;       /* ヘッダー(#f3f4f6)より少し薄いグレー */
  font-weight: 700;
  font-size: 13px;
}

/* 偶数行の縞々を少し弱めにしたければここで調整も可（任意） */
/* .table.table--price-2col .row:nth-child(even) { background:#fbfdff; } */

/* --------- Area (front page) --------- */
.area-frame{
  padding:24px;
  margin-top:16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#f8fbff; /* うすい青背景で枠全体を目立たせる */
}

.area-region-title{
  font-size:16px;
  font-weight:700;
  margin:0 0 8px;
}

.area-grid{
  margin-top:12px;
}

.area-item{
  padding:12px;
  border-radius:12px;
  border:1px solid #dbeafe;  /* 少し青みのあるボーダー */
  background:#ffffff;         /* 中は白でカード感 */
}

.area-pref{
  font-weight:700;      /* 都道府県名を太く大きく */
  font-size:14px;
  margin-bottom:4px;
}

.area-cities{
  font-size:13px;
  color:var(--muted);   /* 市区町村は少し小さく＆薄め */
}

/* --------- Area (front page) --------- */
.area-frame{
  padding:24px;
  margin-top:16px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#f8fbff;          /* うすい青背景 */
  box-shadow: var(--shadow);   /* セクション全体をカードっぽく */
}

/* 地方名（関東地方 / 中部地方 / 近畿地方） */
.area-region-title{
  font-size:19px;              /* さらに大きく */
  font-weight:700;
  margin:0 0 10px;
}

/* グリッド全体：カード間の余白を詰める */
.area-grid{
  margin-top:10px;
  gap:8px;                     /* さらに少しタイトに */
}

/* 各都道府県カード */
.area-item{
  padding:12px;
  border-radius:12px;
  border:1px solid #dbeafe;    /* 青みボーダー */
  background:#ffffff;
  box-shadow: var(--shadow);   /* ← 県の枠にもシャドウ追加 */
}

/* 都道府県名（ここをしっかり大きく） */
.area-pref{
  font-weight:700;
  font-size:17px;              /* 市区町村より明確に大きく */
  margin-bottom:4px;
}

/* 市区町村（説明テキスト） */
.area-cities{
  font-size:13px;
  color:var(--muted);
}

/* LINEボタン */
.btn.btn--line {
  background-color: #06C755; /* LINEグリーン */
  color: #fff;
  border: none;
}

.btn.btn--line:hover {
  opacity: 0.9;
}

/* ヘッダーを上部に固定 */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #fff; /* 下のコンテンツが透けないように */
}

.hero__media{
  border-radius:20px;
  aspect-ratio:16/9;
  border:1px solid var(--line);
  overflow:hidden;          /* 角丸に沿って画像を切り抜く */
  background:#fff;          /* 読み込み前の背景だけ白に */
}

/* 中の画像をきれいにフィットさせる */
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;         /* 16:9 の枠いっぱいにトリミング表示 */
  display:block;
}

/* ==== Front page enhancements ==== */

/* サービスカード：クリック全体をリンクに・ホバーで強調 */
.svc .svc-card{
  text-decoration:none;
  color:inherit;
  padding:16px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
}
.svc .svc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(15,23,42,.12);
  border-color:rgba(37,99,235,.35);
}
.svc .svc-card .muted{
  font-size:13px;
  line-height:1.5;
}

/* 完全分解の説明カード少し余白調整 */
.deep-card{
  padding:20px;
  margin-top:12px;
}

/* 記事 CTA（通常分解 vs 完全分解） */
.course-article-cta{
  margin-top:18px;
  padding:18px;
}
.course-article-cta__inner{
  display:grid;
  gap:18px;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  align-items:center;
}
.course-article-cta__text h3{
  margin:0 0 6px;
  font-size:18px;
}
.course-article-cta__media .thumb{
  aspect-ratio:4/3;
}
@media(max-width:900px){
  .course-article-cta__inner{
    grid-template-columns:1fr;
  }
}

/* 会社情報 右側の画像カードを少し小さめに */
.about-company-card{
  padding:0;
  overflow:hidden;
  max-width:380px;
  margin-left:auto;
}
.about-company-thumb{
  aspect-ratio:4/3;
  border:none;
}

/* ご予約 CTA（予約サイト） */
.home-reserve-cta{
  margin-top:12px;
  padding:22px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(96,165,250,.25), transparent 60%),
    radial-gradient(900px 400px at 100% 100%, rgba(59,130,246,.3), transparent 60%),
    linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
}
.home-reserve-cta__text h3{
  margin:0 0 6px;
  font-size:20px;
}
.home-reserve-cta__text p{
  margin:0;
  font-size:14px;
  opacity:.95;
}
.home-reserve-cta__actions .btn{
  min-width:200px;
  text-align:center;
}
.home-reserve-cta__actions .btn--brand{
  background:#fff;
  color:var(--brand);
}
@media(max-width:900px){
  .home-reserve-cta{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* LINE CTA（front 用） */
.home-line-cta{
  margin-top:18px;
  padding:18px;
}
.home-line-cta .line-grid{
  display:grid;
  gap:16px;
  grid-template-columns:1.4fr 260px;
  align-items:center;
}
@media(max-width:900px){
  .home-line-cta .line-grid{
    grid-template-columns:1fr;
  }
}

/* Shorts スライダー */
.shorts-scroller{
  margin-top:16px;
  overflow-x:auto;
  padding:10px 4px 6px;
  scroll-snap-type:x mandatory;
}
.shorts-track{
  display:flex;
  gap:16px;
}
.shorts-item{
  flex:0 0 28%;
  max-width:280px;
  min-width:220px;
  scroll-snap-align:center;
  transition:transform .25s ease, opacity .25s ease;
}
.shorts-item--dim{
  transform:scale(.9);
  opacity:.6;
}
@media(max-width:900px){
  .shorts-item{
    flex:0 0 70%;
  }
}
.shorts-frame{
  position:relative;
  border-radius:18px;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
  background:#000;
  padding-top:177.78%; /* 9:16 縦動画 */
}
.shorts-frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* === Services カード：下部の View More + 仕切り線 === */
.svc .svc-card{
  text-decoration:none;
  color:inherit;
  padding:16px;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer;
}
.svc .svc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 25px rgba(15,23,42,.12);
  border-color:rgba(37,99,235,.35);
}
.svc .svc-card .muted{
  font-size:13px;
  line-height:1.5;
}

/* カード下部のフッター */
.svc-card__footer{
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
}
.svc-card__more{
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}

/* クリック可能な都道府県カードのリンク化 */
.area-item--link{
  display:block;
  text-decoration:none;
  color:inherit;
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background-color .15s ease;
  cursor:pointer;
}

/* ホバー時にふわっと持ち上げて強調 */
.area-item--link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(15,23,42,.15);
  border-color:#60a5fa;
  background:#eff6ff;
}