/* =========================
   Front page (共通設定)
   ========================= */

/* スマホ幅（900px 以下）のとき */
@media (max-width: 900px) {

  /* サービスのオプション3つを非表示 */
  .svc .svc-card--option {
    display: none;
  }
}

@media (max-width: 900px) {

  /* ヒーロー右側の画像をスマホでは消す */
  .hero__media {
    display: none;
  }
}

@media (max-width: 900px) {

  /* 会社情報の画像（右側カード）をスマホでは非表示 */
  .about-company-card {
    display: none;
  }
}

/* =========================
   Top page responsive layout
   ========================= */
@media (max-width: 900px) {

  /* 全体グリッド */
  .section .grid.grid-2,
  .section .grid.grid-3 {
    grid-template-columns: 1fr;
  }

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

  /* セクションの上下余白を少し詰める場合（お好みで） */
  .section {
    padding: 40px 0;
  }
}

/* =========================
   Hero（スマホ用調整）
   ========================= */
@media (max-width: 900px) {

  /* 背景はスマホも真っ白に固定 */
  .hero {
    background: #fff;
  }

  /* ヒーロー内だけ左右の余白を少し広めにする */
  .hero .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* ヒーロー全体の上下余白を少しコンパクトに */
  .hero__wrap {
    padding: 40px 0;
  }

  /* 見出しとリード文をスマホ用サイズに */
  .hero h1 {
    font-size: 24px;
    line-height: 1.5;
  }

  .hero p.lead {
    font-size: 14px;
    line-height: 1.7;
  }

  /* ピル（chip）を並べている行の挙動をスマホ用に変更 */
  .hero .center {
    justify-content: flex-start; /* 右寄せにならないように左寄せ */
    align-items: flex-start;
    flex-wrap: wrap;            /* 幅が足りなければ折り返す */
    gap: 6px 8px;               /* すき間を少し狭めてコンパクトに */
    margin-top: 12px;
  }

  /* ヒーロー内だけピルを小さめにする */
  .hero .chip {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* 画像はスマホでは非表示 */
  .hero__media {
    display: none;
  }
}

/* =========================
   Services（スマホ版レイアウト調整）
   ========================= */
@media (max-width: 900px) {

  /* オプション3つは引き続きスマホでは非表示 */
  .svc .svc-card--option {
    display: none;
  }

  /* 通常メニューだけを flex レイアウトにする */
  .svc .svc-card:not(.svc-card--option) {
    display: flex;
    flex-direction: column;
  }

  /* メニュー名を一番上に＆文字大きめ＆下に線 */
  .svc .svc-card:not(.svc-card--option) h3 {
    order: 0;                    /* 一番上 */
    margin-top: 0;               /* .mt-16 を打ち消し */
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-size: 20px;             /* 文字を少し大きく */
    line-height: 1.5;
  }

  /* 画像をタイトルの次に */
  .svc .svc-card:not(.svc-card--option) .thumb {
    order: 1;
    margin-top: 12px;
  }

  /* 説明文を画像の下に＆文字サイズアップ */
  .svc .svc-card:not(.svc-card--option) p.muted {
    order: 2;
    font-size: 15px;             /* 13px → 15px にアップ */
    line-height: 1.8;
  }

  /* 「詳細を見る」は一番下に */
  .svc .svc-card:not(.svc-card--option) .svc-card__footer {
    order: 3;
    margin-top: 12px;
  }
}

/* =========================
   Services（スマホ用カードのシャドー強化）
   ========================= */
@media (max-width: 900px) {

  /* 通常メニューのカードだけ、おしゃれめシャドーに */
  .svc .svc-card:not(.svc-card--option) {
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
    border-color: rgba(15, 23, 42, 0.04);
    background: #ffffff; /* 影をはっきり見せるため白で固定 */
  }
}

/* =========================
   完全分解クリーニング解説記事セクション
   ========================= */

.deep-article-card{
  padding:22px 20px;
  margin-top:12px;
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(191,219,254,.45), transparent 60%),
    radial-gradient(900px 400px at 100% 100%, rgba(129,140,248,.35), transparent 60%),
    #ffffff;
}

/* 中身の2カラムレイアウト */
.deep-article-card__inner{
  display:grid;
  gap:20px;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  align-items:center;
}

/* 小さな見出し（説明テキスト上のラベル） */
.deep-article-card__eyebrow{
  font-size:12px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 4px;
}

/* 記事タイトル */
.deep-article-card__title{
  margin:0 0 10px;
  font-size:20px;
  line-height:1.5;
}

/* リード文（質問投げかけ部分） */
.deep-article-card__lead{
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
  margin:0 0 10px;
}

/* 本文説明 */
.deep-article-card__body{
  font-size:14px;
  line-height:1.8;
  margin:0 0 8px;
}

/* ブログ更新についての一文を少し抑えめに */
.deep-article-card__note{
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  margin:0 0 14px;
}

/* ボタン配置 */
.deep-article-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* 右側の画像 */
.deep-article-card__media{
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
}

.deep-article-thumb{
  aspect-ratio:4/3;
}

/* スマホ用レイアウト調整 */
@media (max-width: 900px){

  .deep-article-card{
    padding:18px 16px;
  }

  .deep-article-card__inner{
    grid-template-columns:1fr;  /* 1カラム */
  }

  .deep-article-card__title{
    font-size:18px;
  }

  .deep-article-card__lead,
  .deep-article-card__body{
    font-size:13px;
  }

  .deep-article-card__note{
    font-size:12px;
  }

  .deep-article-card__media{
    margin-top:8px;
  }

  .deep-article-thumb{
    max-width:320px;
    margin:0 auto;
  }
}

/* =========================
   #deep セクション見出し（スマホ専用）
   ========================= */
@media (max-width: 900px) {
  #deep > .container > h2 {
    font-size: 26px;  /* 既存より一段階大きく */
    line-height: 1.5;
  }
}

/* =========================
   料金テーブル（スマホ調整・改）
   ========================= */
@media (max-width: 900px) {

  /* メニュー側を広く／料金側を細くして右に寄せる */
  .table.table--price-2col .row {
    grid-template-columns: 1.9fr 0.6fr; /* メニュー / 料金（料金列を少し細く） */
    padding: 12px 14px;
  }

  /* ヘッダー行も同じ比率に */
  .table.table--price-2col .row.head {
    grid-template-columns: 1.9fr 0.6fr;
  }

  /* メニュー名のフォントサイズを少し小さく */
  .table.table--price-2col .row:not(.head) > :first-child {
    font-size: 13px;
    line-height: 1.5;
  }

  /* 料金を右寄せにして端に寄せる */
  .table.table--price-2col .row .price {
    text-align: right;
  }
}

/* =========================
   対応エリア（スマホ調整）
   ========================= */
@media (max-width: 900px) {

  /* 念のためスマホでは2列固定にしておく */
  .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; /* カード同士の間も少しだけ詰める */
  }

  /* カード内の余白を少しコンパクトに */
  .area-item {
    padding: 8px 10px;
  }

  /* 都道府県名の下の余白をさらに狭く */
  .area-pref {
    margin-bottom: 2px;
  }

  /* 「○○市など」テキストを小さく＆詰める */
  .area-cities {
    font-size: 11px;     /* もともと 13px → 小さめに */
    line-height: 1.4;
    margin-bottom: 0;    /* 下の余白をなくす */
  }
}

/* =========================
   Reviews セクション非表示（PC・スマホ共通）
   ========================= */
section#reviews {
  display: none;
}

/* =========================
   会社情報見出し（トップページ）
   ========================= */

.company-heading {
  position: relative;
  text-align: center;
  font-size: clamp(22px, 2.4vw, 26px);
  margin: 0 0 24px;
  font-weight: 800;
}

/* 見出しの下に少し短めのライン */
.company-heading::after {
  content: "";
  display: block;
  width: 120px;
  max-width: 60%;
  height: 2px;
  background: #0f172a;
  margin: 10px auto 0;
  opacity: 0.18;
}

/* スマホでは少しだけ大きめに見せたい */
@media (max-width: 900px) {
  .company-heading--front {
    font-size: 26px;
  }
}

/* =========================
   会社情報テーブル（トップ＆会社概要で共通イメージ）
   ========================= */

.kv {
  padding: 20px;
}

/* テーブル枠全体 */
.info-table {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

/* 行：左が項目、右が内容の2カラム */
.info-row {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  align-items: stretch;
  font-size: 14px;
}

/* 各セル共通 */
.info-row > div {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

/* 左：項目名 */
.info-row .head {
  background: #f3f6fb;
  font-weight: 700;
  white-space: nowrap;
}

/* 右：内容（PCではできるだけ 1 行で） */
.info-row .body {
  white-space: nowrap;
}

/* 最後の行はボーダー消す */
.info-row:last-child > div {
  border-bottom: none;
}

/* メールなどのリンクの色を抑えめに */
.info-row .body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* =========================
   会社情報テーブル（スマホ調整）
   ========================= */

@media (max-width: 640px) {

  .kv.kv--front {
    padding: 16px;
  }

  .info-row {
    grid-template-columns: 100px minmax(0, 1fr);
    font-size: 12px;
  }

  .info-row > div {
    padding: 10px 12px;
  }

  /* スマホでは右側は折り返しOKにして読みやすく */
  .info-row .body {
    white-space: normal;
    word-break: break-all;
  }
}

/* =========================
   会社情報テーブル 調整（枠ナシ＆項目列を細く）
   ========================= */



/* 項目名の列を少し細くして、値側を広く */
.info-row {
  grid-template-columns: minmax(80px, 120px) minmax(0, 1fr); /* 項目 / 値 */
}

/* スマホでも同じ考え方で項目は細めに */
@media (max-width: 640px) {
  .info-row {
    grid-template-columns: 90px minmax(0, 1fr);
  }
}

/* =========================
   会社情報テーブル（トップ）外側カードを消す
   ========================= */

/* トップページの会社情報だけ、カード感をなくす */
.kv.kv--front {
  padding: 0;              /* 内側余白はいったんゼロに */
  border: none;
  box-shadow: none;
  background: transparent; /* 白い箱感を消す */
}

/* テーブル本体はそのまま行ごとのボーダーだけで見せる */
.kv.kv--front .info-table {
  margin-top: 0;
}

/* =========================
   会社情報テーブル（トップ）立体カード化
   ========================= */

/* トップページの会社情報テーブルだけカードっぽく */
.kv.kv--front .info-table {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* 行の区切り線はしっかり残す */
.kv.kv--front .info-row > div {
  border-bottom: 1px solid var(--line);
}

/* 最後の行だけ下線を消す */
.kv.kv--front .info-row:last-child > div {
  border-bottom: none;
}

/* =========================
   LINE block（お問い合わせページと共通デザイン）
   ========================= */

.line-card{
  padding:0;
  overflow:hidden;
}

/* 上部：LINEカラーのヘッダー（中央寄せ） */
.line-head{
  background:#06C755;
  color:#fff;
  padding:12px 16px 14px;
  text-align:center;
}
.line-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:#fff;
  color:#16a34a;
  font-weight:800;
  font-size:11px;
}
.line-head-title{
  margin:6px 0 0;
  font-size:20px;
  font-weight:900;
}

/* 下部：白背景エリア */
.line-body{
  padding:16px;
  background:#fff;
}

/* スマホ：縦積み、QR→テキスト→ボタン */
.line-body-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

/* QR部分 */
.line-qr a{
  display:inline-block;
}
.line-qr img{
  display:block;
  width:150px;      /* スマホでのサイズ */
  max-width:45vw;
  height:auto;
  border-radius:12px;
}

/* テキスト部分 */
.line-text{
  width:100%;
}
.line-text h2{
  font-size:18px;
  margin:0 0 8px;
}
.line-desc-box{
  background:#f9fafb;
  border-radius:12px;
  border:1px solid var(--line);
  padding:10px 12px;
}
.line-desc-box .lead{
  margin:0;
  padding-left:18px;
  font-size:14px;
}

/* ボタン：常に下中央 */
.line-btn-wrap{
  margin-top:14px;
  text-align:center;
}

/* すでに .btn--line はサイト全体で使っていると思うが、
   念のため同じ指定を入れてもOK（値は同じ） */
.btn--line{
  background:#06C755;
  border-color:#06C755;
  color:#fff;
}
.btn--line:hover{
  opacity:.9;
}
.btn--line-wide{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:320px;
  border-radius:999px;
  font-size:16px;
  padding:12px 16px;
  font-weight:800;
}

/* PC：左テキスト / 右QR をそれぞれ中央寄せ＋文字を少し大きく */
@media (min-width:769px){
  .line-body{
    padding:24px 32px;
  }

  .line-body-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:"text qr";
    align-items:center;
    gap:32px;
  }

  .line-text{
    grid-area:text;
    max-width:480px;
    justify-self:center;
  }
  .line-text h2{
    font-size:22px;
  }
  .line-desc-box{
    padding:14px 18px;
  }
  .line-desc-box .lead{
    font-size:15px;
  }

  .line-qr{
    grid-area:qr;
    justify-self:center;
  }
  .line-qr img{
    width:260px;
    max-width:260px;
  }

  .line-btn-wrap{
    margin-top:20px;
    text-align:center;
  }
}

/* =========================
   予約サイト CTA（青カード・LINE風）
   ========================= */

.home-reserve-cta{
  padding:0;
  overflow:hidden;
  background:#2563eb;            /* 全体を青背景に */
  border-color:#1d4ed8;
  color:#fff;
}

/* 上部：ピル＋タイトル（LINEヘッダーに寄せた感じ） */
.reserve-head{
  text-align:center;
  padding:12px 16px 8px;
}
.reserve-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:#fff;
  color:#1d4ed8;
  font-weight:800;
  font-size:11px;
}
.reserve-head-title{
  margin:6px 0 0;
  font-size:20px;
  font-weight:900;
}

/* 下部：説明＋ボタン */
.reserve-body{
  padding:16px;
  text-align:center;
}
.reserve-text{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.8;
}

/* ボタンを白枠＆中央に */
.reserve-btn-wrap{
  margin-top:4px;
  text-align:center;
}
.btn--reserve{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:320px;
  background:#fff;
  color:#2563eb;
  border-radius:999px;
  border:1px solid #bfdbfe;
  font-size:16px;
  padding:12px 16px;
  font-weight:800;
}
.btn--reserve:hover{
  opacity:.95;
}

/* LINE ブロックとの間に少し余白を追加 */
.line-card{
  margin-top:16px;
}

/* スマホでは文字少しだけ小さめに */
@media (max-width: 640px){
  .reserve-head-title{
    font-size:18px;
  }
  .reserve-text{
    font-size:13px;
  }
}
/* =========================
   予約サイト CTA（青カード・単一カラムレイアウト）
   ========================= */

#contact .home-reserve-cta{
  /* 古い display:flex レイアウトを上書き */
  display:block;
  margin-top:12px;
  padding:20px 16px;
  background:#2563eb;
  border:1px solid #1d4ed8;
  border-radius:18px;
  box-shadow:var(--shadow);
  color:#fff;
}

/* 上部：ピル＋タイトルを中央揃えで縦並び */
#contact .reserve-head{
  text-align:center;
  padding:4px 8px 10px;
}

#contact .reserve-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  background:#fff;
  color:#1d4ed8;
  font-weight:800;
  font-size:11px;
}

#contact .reserve-head-title{
  margin:6px 0 0;
  font-size:20px;
  font-weight:900;
}

/* 本文＋ボタンもすべて中央・縦方向に1カラム */
#contact .reserve-body{
  padding:8px 4px 4px;
  text-align:center;
}

#contact .reserve-text{
  margin:0 0 12px;
  font-size:14px;
  line-height:1.8;
}

/* ボタンは中央揃え＆丸ボタン */
#contact .reserve-btn-wrap{
  margin-top:4px;
  text-align:center;
}

#contact .btn--reserve{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:320px;
  background:#fff;
  color:#2563eb;
  border-radius:999px;
  border:1px solid #bfdbfe;
  font-size:16px;
  padding:12px 16px;
  font-weight:800;
  text-decoration:none;
}

#contact .btn--reserve:hover{
  opacity:.95;
}

/* LINE ブロックとの間に余白を入れる */
#contact .line-card{
  margin-top:16px;
}

/* スマホ用 微調整 */
@media (max-width: 640px){
  #contact .reserve-head-title{
    font-size:18px;
  }
  #contact .reserve-text{
    font-size:13px;
  }
}

/* =========================
   Hero 見出し：スマホで少し大きく
   ========================= */
@media (max-width: 767px){
  .hero h1{
    font-size: 26px;   /* 好みに合わせて 24〜30px くらいで調整 */
    line-height: 1.5;
  }
}
/* =========================
   SNS Reels（Instagram）スライダー
   ========================= */

.shorts-scroller{
  margin-top: 24px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;   /* スクロール位置を中央で止まりやすく */
}

.shorts-track{
  display: flex;
  gap: 16px;
  min-width: 100%;
  padding: 4px 0 12px;
}

/* 各リールカードの基本状態（＝少し小さめ＆薄め） */
.shorts-item{
  flex: 0 0 240px;                 /* 1枚あたりの幅 */
  scroll-snap-align: center;
  transform: scale(.8);
  opacity: .45;
  transition:
    transform .3s ease,
    opacity .3s ease,
    box-shadow .3s ease;
}

/* PC で少しだけ大きめに */
@media (min-width: 768px){
  .shorts-item{
    flex-basis: 260px;
  }
}

/* 正面（センター）に来たカード */
.shorts-item--center{
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 16px 40px rgba(15,23,42,.25);
  z-index: 1;
}

/* それ以外のカード（念のため明示） */
.shorts-item--dim{
  transform: scale(.8);
  opacity: .45;
}

/* 中の iframe の比率など */
.shorts-frame{
  border-radius: 16px;
  overflow: hidden;
  background: #000;
}

.shorts-frame iframe{
  width: 100%;
  height: 100%;
  aspect-ratio: 9 / 16;            /* リールっぽい縦長比率 */
  border: 0;
  display: block;
}
/* =========================
   サービス（トップページ）
   ========================= */

/* メニュー名を少し大きく */
#services .svc-card h3{
  font-size: 18px;
  line-height: 1.6;
}

/* フッターの上の線はいらない */
#services .svc-card .svc-card__footer{
  margin-top: 12px;
  padding-top: 0;
  border-top: none;
}

/* 「詳細を見る」をグラデ + ちょい飛び出しボタンに */
#services .svc-card .svc-card__more{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 10px 22px rgba(37,99,235,.35);
  position: relative;
  margin-left: auto;   /* 右寄せ */
  margin-right: -4px;  /* カードの右からちょっと飛び出す感じ */
  text-decoration: none;
  white-space: nowrap;
}

#services .svc-card .svc-card__more::after{
  content: "›";
  margin-left: 6px;
  font-size: 14px;
  line-height: 1;
}

/* =========================
   記事カード「記事を読む」ボタン
   ========================= */

/* ボタンを右寄せにして、グラデボタンに変更 */
.deep-article-card__actions{
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.deep-article-card__actions .btn.btn--brand{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #38bdf8);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  border: none;
  box-shadow: 0 12px 25px rgba(37,99,235,.40);
  text-decoration: none;
  position: relative;
  right: -4px; /* カードの右から少しはみ出させる */
  white-space: nowrap;
}

.deep-article-card__actions .btn.btn--brand::after{
  content: "›";
  margin-left: 8px;
  font-size: 15px;
  line-height: 1;
}

/* ==== ヒーロー内ピル：黄色＋白文字 ==== */
.hero .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 12px;
  border-radius:999px;

  /* ふつうの黄色寄り（白文字でも読みやすいよう少しだけ濃いめ） */
  background:#f0d050;          /* 黄色 */
  border:1px solid #e4c055;    /* ほんの少し濃い黄色 */

  color:#ffffff;               /* ← テキストを白に */
  font-weight:700;
  font-size:12px;
  letter-spacing:0.03em;
  white-space:nowrap;

  box-shadow:0 1px 2px rgba(15,23,42,0.06);

  margin-top:4px;
}

/* 横並び時の余白（PC） */
.hero .chip + .chip{
  margin-left:8px;
}
/* ==== ヒーロー内ピル：スマホでは少し小さく＆間隔詰め ==== */
@media (max-width: 768px){
  .hero .chip{
    padding:3px 8px;
    font-size:11px;
    margin-top:2px;
  }

  .hero .chip + .chip{
    margin-left:2px;
  }
}
/* ==== ヒーロー内ピル（PCベース）==== */
.hero .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;          /* ← 4px 12px より少し大きく */
  border-radius:999px;

  background:#f0d050;
  border:1px solid #e4c055;
  color:#ffffff;
  font-weight:700;
  font-size:13px;            /* ← 12px → 13px に */
  letter-spacing:0.03em;
  white-space:nowrap;

  box-shadow:0 1px 2px rgba(15,23,42,0.06);
  margin-top:4px;
}

/* 横並び時の余白（PC） */
.hero .chip + .chip{
  margin-left:8px;
}

/* ==== スマホでは少しだけ小さめ（PCよりは控えめだけど今より大きい）==== */
@media (max-width: 768px){
  .hero .chip{
    padding:5px 10px;        /* ← 3px 8px より大きく */
    font-size:12px;          /* ← 11px → 12px に */
    margin-top:2px;
  }

  .hero .chip + .chip{
    margin-left:2px;
  }
}
/* Instagram Reels slider */
.ig-reels{
  position: relative;
  margin-top: 14px;
}

/* 横スクロール + スナップ */
.ig-reels__track{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 6px 6px 14px;
  border-radius: 20px;
}
.ig-reels__slide{
  flex: 0 0 90%;
  scroll-snap-align: center;
}
.ig-reels__frame{
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  border-radius: 18px;
  padding: 10px;
}
.ig-reels__frame .instagram-media{
  margin: 0 auto !important;
}

/* 左右ナビ（PCのみ表示） */
.ig-reels__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  z-index: 2;
}
@media (min-width: 900px){
  .ig-reels__nav{ display: inline-flex; }
}
.ig-reels__nav--prev{ left: -10px; }
.ig-reels__nav--next{ right: -10px; }

/* ドット */
.ig-reels__dots{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.ig-reels__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(15,23,42,.20);
  cursor: pointer;
}
.ig-reels__dot.is-active{
  background: rgba(15,23,42,.60);
}
/* PC：3枚が横に入るサイズ（スライドは維持） */
@media (min-width: 900px){
  .ig-reels__track{
    padding: 6px 44px 14px; /* 矢印が被らないように左右に余白 */
  }

  .ig-reels__slide{
    flex: 0 0 calc((100% - 28px) / 3); /* gap14px×2 */
    max-width: 360px;                 /* 広すぎるPCでも巨大化しない */
    scroll-snap-align: start;
  }

  .ig-reels__frame{
    padding: 8px;
  }

  .ig-reels__frame .instagram-media{
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .ig-reels__nav--prev{ left: 6px; }
  .ig-reels__nav--next{ right: 6px; }
}
/* サービス：メニュー名をスマホで料金ページと同じサイズに */
@media (max-width: 900px){
  #services .svc-card h3{
    font-size: 20px;
    line-height: 1.5;
  }
}
/* サービス：人気ピル（完全分解コースだけ） */
#services .svc-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:3px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  vertical-align:middle;
  white-space:nowrap;
}

/* 目立つ色（好みで調整OK） */
#services .svc-pill--hot{
  background:#ffedd5;      /* 薄いオレンジ */
  border:1px solid #fdba74; /* オレンジ枠 */
  color:#9a3412;           /* 濃いオレンジ文字 */
}

/* スマホは少しだけ詰める */
@media (max-width: 900px){
  #services .svc-pill{
    margin-left:6px;
    padding:3px 8px;
    font-size:11px;
  }
}
/* h3内で綺麗に並ぶように（改行崩れ予防） */
#services .svc-card h3{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

/* 人気ピル：プレミアム感（HTML変更なし） */
#services .svc-pill--hot{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:6px 12px 6px 30px; /* 左に冠分の余白 */
  border-radius:999px;

  /* “赤×金”でNo.1感 */
  background: linear-gradient(135deg, #f59e0b, #fde68a 45%, #f59e0b);
  border:1px solid rgba(180, 83, 9, .35);

  color:#5b2b00;
  font-weight:900;
  font-size:12px;
  line-height:1;
  letter-spacing:.02em;

  box-shadow: 0 10px 22px rgba(245, 158, 11, .25);
  transform: translateY(-1px); /* ちょい浮かせる */
}

/* 冠アイコン（SVGをデータURIで埋め込み） */
#services .svc-pill--hot::before{
  content:"";
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  background-size:contain;
  background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235b2b00' d='M3 7l4 4 4-7 5 8 5-5 2 2-3 10H4L3 7z'/%3E%3Cpath fill='%235b2b00' d='M5 19h14v2H5z'/%3E%3C/svg%3E");
  opacity:.9;
}

/* キラッと光る（主張しすぎない） */
#services .svc-pill--hot::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,.45) 20%,
    transparent 40%
  );
  transform: translateX(-120%);
  animation: pillShine 2.6s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: overlay;
}

@keyframes pillShine{
  0%, 60% { transform: translateX(-120%); opacity:0; }
  70%     { opacity:1; }
  100%    { transform: translateX(120%); opacity:0; }
}

/* スマホ微調整 */
@media (max-width: 900px){
  #services .svc-pill--hot{
    padding:6px 10px 6px 28px;
    font-size:11px;
  }
}
#services .svc-card{ position:relative; overflow:hidden; }

#services .svc-badge{
  position:absolute;
  top:14px;
  right:-58px;
  transform: rotate(35deg);
  padding:8px 70px;

  background: linear-gradient(135deg, #dc2626, #f59e0b);
  color:#fff;
  font-weight:900;
  font-size:12px;
  letter-spacing:.06em;

  box-shadow: 0 12px 28px rgba(15,23,42,.20);
  border:1px solid rgba(255,255,255,.35);
}
/* === ピルのキラキラを「ピルの中だけ」に閉じ込める === */
#services .svc-pill--hot{
  overflow: hidden;     /* 念のため外に出さない */
  isolation: isolate;   /* 合成の影響を外へ出さない（効きます） */
}

/* 既存の ::after を上書き */
#services .svc-pill--hot::after{
  mix-blend-mode: normal;  /* overlay をやめる */
  opacity: .65;            /* 光り方はここで調整 */
}