/* ===== Reset / Base ===== */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: "Noto Sans JP", sans-serif;}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
p { margin:0; }
.l-container { max-width:1600px; margin:0 auto; padding:0 20px; }

/* --- ユーティリティ：PC/SP 切替 --- */
.u-pc-only { display:block !important; }
.u-sp-only { display:none !important; }
@media (max-width:768px){
  .u-pc-only { display:none !important; }
  .u-sp-only { display:block !important; }
}

/* ===== Header ===== */
.header { background:#fff; padding:20px 0; }
.header__inner {
  max-width:1600px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px; padding:0 20px;
}
.header__logo img { display:block; height:auto; }
.header__info { flex:1; text-align:right; font-size:14px; line-height:1.6; }
.header__info-title { font-weight:700; color:#0a6b57; font-size:20px; }
.header__info-shops { color:#000; font-size:13px; }

/* --- 既存 header を活かしつつSP用レイアウトを追加 --- */
.header { background:#fff; padding:20px 0; box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.6);}
.header__inner{
  max-width:1600px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.header__logo img{ display:block; height:auto; }
/* ===== SPレイアウト（<=768px） ===== */
@media (max-width:768px){
  .header{ padding:14px 0; box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.6);}
  .header__inner{
    /* 2カラム：左=ロゴブロック、右=店舗名ブロック */
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    column-gap:12px;
    row-gap:6px;
    padding:0 16px; /* SPの左右余白をやや詰める */
  }

  /* 左カラム：ロゴ＋タグライン */
  .header__logo img{ width:220px; max-width:60vw; }
  .header__tagline{
    margin-top:6px;
    font-size:11px; line-height:1.5; color:#333;
  }

  /* 右カラム：店舗名＋補足 */
  .header__sp-info{ text-align:right; }
  .header__sp-shop{
        font-weight: 700;
        font-size: 18px;
        line-height: 1;
        margin-top: 6px;
        letter-spacing: .04em;
        color: #000;
        white-space: nowrap;
  }
  .header__sp-note{
        margin-top: 4px;
        font-size: 16px;
        color: #0a6b57;
        font-weight: 600;
        line-height: 1.2;
  }
}

/* ===== FV base ===== */
.fv { position: relative; }
.fv__inner { position: relative; width: 100%; overflow: hidden; }
.fv__img { width: 100%; height: auto; display: block; }

/* --- PC（2000×840基準）--- */
/* 左余白200px → 10%　下余白100px → 12%　タイトル幅660px → 33vw
   ※あなたが 845px 基準にしたい場合は 33vw を 42.25vw（=845/2000*100）に変更 */
.fv__stack{
  position: absolute;
  left: 9.4%;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  width: 33vw;           /* = 660/2000。上限を設けたいなら max-width を追加してOK */
  gap: 2.5vw;            /* タイトルとバナーの間隔 50/2000 */
  z-index: 2;
}
.fv__title,
.fv__cta{ display:block; width:100%; }
.fv__title img,
.fv__cta img{ width:100%; height:auto; display:block; }
.fv__cta{
  filter:;
  transition: transform .2s ease;
}
.fv__cta:hover{ }

/* --- SP（≤768px）：画像を差し替え、配置ルールも切替 --- */
@media (max-width:768px){
  /* stack をFV全面のレイヤーにして、中の要素を個別に絶対配置 */
  .fv__stack{
    position:absolute;
    inset:0;           /* top:0; right:0; bottom:0; left:0; */
    width:auto;
    display:block;     /* 子要素を自由に配置するため一旦フレックス解除 */
  }

  /* タイトル：上部中央寄せ。幅は端まで。必要に応じて数値微調整OK */
  .fv__title{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:6%;            /* 画像上端からの距離（%はSP画像の高さ比） */
    width: min(94vw, 754px);  /* spタイトル画像の実幅が 754px なら上限に */
  }

  /* CTA：下部中央。背景人物に被せる感じ */
  .fv__cta{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:0%;         /* 画像下端からの距離 */
    width: min(90vw, 660px);
    filter:;
  }
}


.fv__title,
.fv__cta { width: 100%; display: block; }
.fv__title,
.fv__cta img { width: 100%; height: auto; display: block; }

.fv__cta {
  filter:;
  transition: transform .2s ease;
}
.fv__cta:hover { }

/* スマホ（<=768px） */
@media (max-width: 768px) {
  .fv__stack {
    left: 5%;           /* 画面に合わせて調整 */
    bottom: 6%;
    width: 90%;         /* 画面幅いっぱいに近づける */
    gap: 20px;          /* 間隔をpxで固定 */
  }
}
.slick-dots li button:before {
    font-size: 12px !important;
  }
/* ===== Responsive (<=768px) ===== */
@media (max-width:768px) {
  .header__inner { flex-direction:column; align-items:flex-start; }
  .header__info { text-align:left; font-size:13px; }
  .header__info-title { font-size:16px; }
}


/* ===== Banner Section ===== */
.bnrs { padding:50px 0 50px; }
.bnrs__list { list-style: none; margin: 0; padding: 0; }

/* PC（>=769px）：4カラム、間隔20px、max-widthは .l-container で制御(1600px) */
@media (min-width: 769px) {
  .bnrs__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;                       /* ← 指定の間隔 */
  }
}

/* 共通：バナーの見た目 */
.bnrs__link { display:block; border-radius: 0px; overflow: hidden; }
.bnrs__link img { width: 100%; height: auto; display: block; }

/* SP（<=768px）：Slickが幅を制御。余白とドットの調整 */
@media (max-width: 768px) {
  .bnrs { padding: 30px 0 0; }
  .bnrs .slick-slide { padding: 0 10px; }        /* スライドの左右余白（好みで0〜12px） */
  .bnrs .slick-dots { margin-top: 10px; }
}


/* 1200pxコンテナ */
.l-container--1200 { max-width: 1200px; }

/* お問い合わせバナー */
.cta-bnrs { padding: 50px 0 25px; background: #fafafa;}
.cta-bnrs__list { list-style: none; margin: 0; padding: 0; }

/* SP（<=768px）：1カラム */
@media (max-width: 768px){
  .cta-bnrs__list { display: grid; grid-template-columns: 1fr; row-gap: 25px; }
}

/* PC（>=769px）：2カラム、間隔60px */
@media (min-width: 769px){
  .cta-bnrs__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px;       /* 指定の間隔 */
    align-items: start;
  }
}

.cta-bnrs__link { display: block; border-radius: 0px; overflow: hidden; }
.cta-bnrs__link img { width: 100%; height: auto; display: block; }

/* ちょい演出（任意） */
.cta-bnrs__link { transition: transform .2s ease, box-shadow .2s ease; }
.cta-bnrs__link:hover { transform: translateY(-2px); }

.slick-initialized .slick-slide {
    padding: 0px !important;
}

/* ===== Campaign Banner ===== */
.cpn { padding: 28px 0; background: #fafafa;}                 /* 上下余白はお好みで */
.cpn__link {
  display: block;
  border-radius: 0px;                    /* 角丸はデザインに合わせて */
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08); /* ほんのり */
  transition: transform .2s ease, box-shadow .2s ease;
}
.cpn__link:hover {
  transform: translateY(-2px);
  box-shadow: ;
}
.cpn__link img { width: 100%; height: auto; display: block; }

/* SP微調整 */
@media (max-width: 768px) {
  .cpn { padding: 22px 0; }
  .cpn__link { border-radius: 0px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
}

/* ===== 金相場：セクション全体 ===== */
.gold { padding: 25px 0 100px; background: #fafafa;}

/* ベージュのパネル：全行を内包 */
.gold__panel{
  background:#f6edd8;
  border-radius:0px;
  padding:18px 18px 50px 18px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}

/* 1行目：背景画像＋テキスト重ね（PC基準：1140×600） */
.gold__card{
  position:relative;
  width:100%;
  aspect-ratio: 1140 / 600;                 /* 高さを比率で固定 */
  border-radius:0px;
  overflow:hidden;
  background:center/cover no-repeat url("../../assets/img/gold-and-precious-metals-banner-L.png");

  /* ▼ PC座標（%）= (px / 1140 or 600) * 100 に置換可（初期値） */
  --pc-price-left: 75.5%;
  --pc-price-top:   8%;
  --pc-price-w:    21%;
  --pc-price-h:    12%;

  --pc-date-right:  3%;
  --pc-date-top:   26%;
  --pc-date-w:     22%;
  --pc-date-h:      8%;
}

.gold__price{
  position:absolute;
  left:var(--pc-price-left); top:var(--pc-price-top);
  width:var(--pc-price-w); height:var(--pc-price-h);
  display:flex; align-items:center; justify-content:center;
  padding:2% 0%; color:#111; text-align:center; letter-spacing:.02em;
}
.gold__price-num{ font-weight:800; font-size:clamp(16px,2.4vw,43px); color: #e80014;}
.gold__price-unit{ margin-top:.5em; margin-left:.25em; font-weight:900; font-size:clamp(10px,1.3vw,21px); }

.gold__date{
  position:absolute;
  right: var(--pc-date-right);
  top:   var(--pc-date-top);
  width:  var(--pc-date-w);
  height: var(--pc-date-h);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; letter-spacing:.02em; text-align:center;
  font-size:clamp(14px,1.5vw,23px);
}

/* 2・3行目の行間 */
.gold__row{ margin-top:50px; }
@media (max-width:768px){
	.gold__row{ margin-top:25px; }
}
/* 2行目：2カラム（PC）／1カラム（SP） */
.gold__row--two{ display:grid; grid-template-columns:1fr; row-gap:20px; }
@media (min-width:769px){
  .gold__row--two{
    grid-template-columns:1fr 1fr;
    column-gap:20px; row-gap:0;             /* 指定：間20px */
  }
}
/* 2行目コンテンツの横幅制限：max-width 830px 中央寄せ */
.gold__row--narrow{ max-width:830px; margin-inline:auto; }

/* 左：ミニ相場ボックス */
.gold__ticker{
  background:#fff; border-radius:0px; overflow:hidden;
  box-shadow:;
  border: 1px solid #c19335;
}
.gold__ticker-head{
  background:#c19335; color:#fff; font-weight:700;
  text-align:center; padding:12px; font-size:18px;
}
.gold__ticker-body{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;     /* ← 左右50% */
  padding: 0;                         /* 内側余白は各セルで付与 */
  background: #fff;
  overflow: hidden;                   /* 角丸とボーダーを綺麗に見せる */
  border-radius: 0 0 12px 12px;
}
/* 中央の仕切り線（1px） */
.gold__ticker-body::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  background: #c19335;
}

.gold__ticker-label,
.gold__ticker-price{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  text-align: center;
}

/* 左：背景#fafafa */
.gold__ticker-label{
  background: #fafafa;                /* ← ご指定色 */
  font-weight: 700;
  font-size: 18px;
}

/* 右：価格表示（数字を太く） */
.gold__ticker-price{
  font-weight: 800;
  font-size: 20px;
}
.gold__ticker-num{
  font-size: 28px;                    /* 数字を大きく */
  font-variant-numeric: tabular-nums; /* 桁揃え */
  margin-right: .15em;
}
.gold__ticker-num{ font-size:28px; font-variant-numeric:tabular-nums; }

/* 右：説明 */
.gold__note-date{ color:#c6403c; font-weight:700; margin-bottom:6px; margin-top: 12px;font-size: 18px;}
.gold__note-text{ color:#333; line-height:1.8; font-size: 18px;}
@media (max-width:768px){
	.gold__note-text{ line-height:1.5; font-size: 15px;}
}
/* 3行目：画像リンク max-width:570px 中央寄せ */
.gold__cta{
  display:block;
  max-width:570px;
  margin:14px auto 0;
  border-radius:0px; overflow:hidden;
  box-shadow:;
  transition:transform .2s ease, box-shadow .2s ease;
}
.gold__cta:hover{ transform:translateY(-2px); }
.gold__cta img{ width:100%; height:auto; display:block; }

/* --- SP（<=768px）：背景差替＆座標をSP用に上書き（例：648×543） --- */
@media (max-width:768px){
.gold__ticker-num{ font-size:18px;}
.gold__ticker-head {
    font-size: 16px;
}
  .gold__panel{ padding:14px; border-radius:14px; }
  .gold__card{
    aspect-ratio: 648 / 543;
    background-image:url("../../assets/img/gold-and-precious-metals-banner-L-SP.png");

    /* ▼ 初期値（必要に応じて数%ずつ調整してください） */
    --sp-price-left: 64%;
    --sp-price-top:   20.5%;
    --sp-price-w:    34%;
    --sp-price-h:    10%;

    --sp-date-right:  2.7%;
    --sp-date-top:   35.2%;
    --sp-date-w:     34%;
    --sp-date-h:      8%;
  }
  .gold__price{
    left: var(--sp-price-left);
    top:   var(--sp-price-top);
    width:  var(--sp-price-w);
    height: var(--sp-price-h);
  }
  .gold__date{
    right: var(--sp-date-right);
    top:   var(--sp-date-top);
    width:  var(--sp-date-w);
    height: var(--sp-date-h);
    font-size:clamp(10px,1.9vw,18px);
  }
}

/* ===== 高額買取実績 ===== */
.results { margin: 70px 0; }
.results__row + .results__row { margin-top: 20px; margin-bottom: 50px; }
@media (max-width: 768px){
.results__row + .results__row { margin-top: 20px; margin-bottom: 20px; }
}
/* 1行目：タイトル（下に点線） */
.results__title{
  font-size: 28px; font-weight: 700; letter-spacing:.02em; text-align:center; position:relative; display:inline-block;
}
/* タイトル行は中央寄せのまま */
.results__row--title{ text-align:center; }

/* 見出し＋丸ドット装飾（見切れ防止版） */
.results__title{
  position: relative;
  display: inline-block;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .02em;

  /* 調整用の変数 */
  --dot-color: #0a6b57;           /* ドット色 */
  --dot-size: 2px;                /* ドット半径 */
  --dot-gap:  14px;               /* ドット間隔 */
  --dot-width: clamp(160px, 24vw, 260px);  /* ドット列の幅 */
}

/* 丸ドット（横端で切れない：space、上下で潰れない：高さ+余白） */
.results__title::after{
  content: "";
  display: block;
  width: var(--dot-width);
  /* ドット直径＋上下に1pxずつ余裕を持たせる */
  height: calc(var(--dot-size) * 2 + 2px);
  margin: 10px auto 0;

  /* 1タイル＝丸1個。中央基準で配置し、spaceで端の切れを防止 */
  background-image: radial-gradient(circle,
    var(--dot-color) var(--dot-size),
    transparent calc(var(--dot-size) + 0.6px)
  );
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: center center;
  background-repeat: space no-repeat; /* ← 端で半分に切れない */
}

/* SP微調整：少し小さめ・短めに */
@media (max-width: 768px){
  .results__title{
    font-size: 22px;
    --dot-size: 3px;
    --dot-gap:  12px;
    --dot-width: clamp(120px, 48vw, 200px);
  }
}
/* 2行目：カテゴリタブ（タブ風） */
.results__tabs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.results__tab{
  appearance:none; border:1px solid #d8d8d8; background:#f9f9f9; color:#222;
  padding:8px 14px; border-radius:6px; cursor:pointer; font-weight:700; font-size:14px;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.results__tab:hover{ transform: translateY(-1px); }
.results__tab.is-active{ background:#d7b46a; border-color:#d7b46a; color:#fff; }

/* 3行目：中央罫線付きリード */
.results__row--lead{ text-align:center; }
.results__lead{
  display:inline-block; padding:6px 0px; font-weight:700; color:#222; font-size:16px; line-height:1.6;
  position:relative;
}
.results__lead::before,
.results__lead::after{
  content:""; position:absolute; top:50%; width:120px; height:1px; background:#cfcfcf;
}
.results__lead::before{ right:100%; margin-right:16px; }
.results__lead::after { left:100%;  margin-left:16px;  }

/* 4行目：カードグリッド（PC4 / タブ2 / SP1） */
.results__grid{ list-style:none; margin:0; padding:0; display:grid; gap:20px; grid-template-columns:1fr; }
@media (min-width:641px){ .results__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .results__grid{ grid-template-columns:repeat(4,1fr); } }
/* ===== 高額買取実績：SPは2カラム・間20px ===== */
@media (max-width: 768px){
.results__lead{
  font-size:15px;
  letter-spacing: -0.8px;
}
  .results__grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 2カラム */
    column-gap: 20px;                                  /* ← 間20px */
    row-gap: 20px;
  }
  /* カード幅の制約は外しておく（幅不足で折り返さないように） */
  .results__card{ max-width: none; }
}

/* グリッド内で各カードを同じ高さに */
.results__item{ height:100%; }
.results__card{
  display:flex;
  flex-direction:column;
  height:100%;
  background:#efefef;     /* 背景 */
  border:none;
  border-radius:0;        /* 角丸なし */
  padding:10px;           /* 縁10px */
  box-shadow:none;
  transition: transform .2s ease;
}
.results__card:hover{ transform: translateY(-2px); }

/* サムネ：固定アスペクト比 */
.results__thumb{ aspect-ratio: 4 / 3; background:#fff; }
.results__thumb img{ width:100%; height:100%; object-fit:contain; }

/* 本文：下にボーダー、残りの高さを受け持つ */
.results__body{
  padding:10px 12px 8px;
  border-bottom:1px solid #e0e0e0;   /* ← 商品名の下ボーダー */
  flex:1 1 auto;                     /* ← ここが伸び縮みして高さをそろえる */
}
@media (max-width: 768px){
.results__body {
    padding: 10px 0px 8px;
}
}
/* 商品名は2行で固定（3行目以降は省略） */
.results__name{
  font-weight:700; font-size:13px; color:#222;
  line-height:1.6;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;             /* 2行で省略 */
  overflow:hidden;
  min-height: calc(1.6em * 2);       /* 2行分の高さを確保＝横並びで高さが一致 */
}
.results__note{ font-size:12px; color:#666; line-height:1.5; }

/* フッターは下に揃える */
.results__footer{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px 12px;
  margin-top:auto;                   /* ← 常に下端へ */
}
@media (max-width: 768px){
.results__footer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0px 0px;
    margin-top: auto;
}
}
.results__badge{
  display:inline-block; background:#15976a; color:#fff; font-weight:700;
  font-size:11px; padding:4px 8px; border-radius:4px; text-align: center;
}
@media (max-width: 768px){
.results__badge{
  font-size:8px;
  padding: 4px 4px;
  line-height: 1.2em;
}
}
.results__amount{ margin-left:auto; font-size:13px; color:#222; }
.results__amount .num{ font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; margin-right:.2em; }
@media (max-width: 768px){
	.results__amount .num{font-size:15px;}
}
/* 5行目：ベージュのパネル内に画像2段 */
.results__row--cta { margin-top:30px; }
.results__cta{ max-width:830px; margin:0 auto; padding-bottom: 50px;}           /* セクションの器（PC 830px） */
.results__cta-panel{
  background:#f6edd8; border-radius:12px; padding:15px 30px 30px 30px;    /* ベージュ背景 */
  text-align:center; box-shadow:;
}
.results__cta-img{ width:100%; height:auto; border-radius:0px; }
@media (max-width:768px){
.results__cta-img_SP{ width:100%; height:auto; border-radius:0px; }
}
/* 下段：リンク付き画像（ボタン）。最大570pxで中央寄せ */
.results__cta-link{ display:block; max-width:570px; margin:30px auto 0; }
.results__cta-link img{ width:100%; height:auto; display:block; }

/* SP微調整 */
@media (max-width:768px){
  .results__cta-panel{ padding:12px; border-radius:10px; margin-top:50px;}
  .results__cta-link{ max-width:92vw; }
}

.results__cta-img{ width:100%; display:block; border-radius:0px; }
.results__cta-caption{ margin:10px 0 0; font-size:13px; color:#555; }
.results__cta-btn{
  display:block; max-width:570px; margin:14px auto 0; padding:14px 16px; border-radius:999px;
  background:#e9536b; color:#fff; font-weight:800; letter-spacing:.02em; text-decoration:none;
  box-shadow:0 10px 26px rgba(233,83,107,.28); transition: transform .2s ease, box-shadow .2s ease;
}
.results__cta-btn:hover{ transform:translateY(-2px); }

/* SP微調整 */
@media (max-width:768px){
  .results__title{ font-size:28px; }
  .results__lead::before, .results__lead::after{ width:60px; }
}

/* ===== Voices ===== */
.voices{ background:#e3eee8; }
.voices__inner{ max-width:1200px; margin:0 auto; padding:70px 24px 100px; position:relative; }

.voices__title{
  position:relative; display:inline-block; font-size:28px; font-weight:800; letter-spacing:.02em;
  --dot-color:#0a6b57; --dot-size:4px; --dot-gap:14px; --dot-width:clamp(160px,24vw,260px);
}
.voices__row--title, .voices__inner{text-align:center;}
.voices__title::after{
  content:""; display:block; width:var(--dot-width);
  height:calc(var(--dot-size)*2 + 2px); margin:10px auto 0;
  background-image:radial-gradient(circle,var(--dot-color) var(--dot-size),transparent calc(var(--dot-size)+.6px));
  background-size:var(--dot-gap) var(--dot-gap); background-position:center center; background-repeat:space no-repeat;
}
.voices__lead{ margin:25px 0 50px; font-weight:700; color:#222; }
.voices__sub{ margin:50px 0 0; text-align:center; font-weight:700; color:#222; }
.voices__sub span{font-size:24px; font-weight:900;}

/* --- フォールバック（JS無効時）：グリッド --- */
.voices__viewport{ overflow:hidden; }
.voices__track{ display:grid; gap:24px; grid-template-columns:1fr; }
@media (min-width:1024px){ .voices__track{ grid-template-columns:repeat(3, 1fr); } }

/* --- スライダー化（JSで .is-slider を付与） --- */
.voices.is-slider .voices__track{ display:flex; gap:0; will-change:transform; }
.voices.is-slider .voices__slide{ flex:0 0 auto; }

/* カード */
.voice-card{ background:#fff; border-radius:12px;
  padding:18px; text-align:left; height:100%; display:flex; flex-direction:column; }
.voice-card__shop{ font-weight:800; color:#108d70; margin-bottom:10px; }
.voice-card__shop span{ display:inline-block; background:#108d70; color:#fff; padding:4px 8px; border-radius:4px; margin-right:8px; font-size:12px;}
.voice-card__head{ display:flex; gap:14px; align-items:center; margin-bottom: 16px;}
.voice-card__head img{ width:96px; height:96px; border-radius:6px; background:#f7f7f7; object-fit:cover; }
.voice-card__meta p{ margin:2px 0; }
.voice-card__name{ font-weight:800; }
.voice-card__score{ color:#108d70; font-weight:700; }
.voice-card__stars{ color:#f2b01e; letter-spacing:2px; }

.voice-card__sep{ border:0; border-top:1px solid #238b74; margin:16px 0; }
.voice-card__title{ font-size:16px; font-weight:800; margin-bottom:6px; margin-top: 10px; }
.voice-card__text{ color:#333; line-height:1.8; margin-bottom:16px;  }
.voice-card__cite{ margin-top:auto; font-size:12px; color:#666; text-align:right; }

/* ナビ（PCはコンテンツ外に張り出す） */
.voices__nav{
  position:absolute; top:calc(55% + 8px); transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:#fff; color:#108d70; box-shadow:0 6px 16px rgba(0,0,0,.12);
  display:flex; align-items:center; justify-content:center;
}
.voices__nav--prev{ left:-28px; }   /* ← max-width1200pxの外側へ */
.voices__nav--next{ right:-28px; }
.voices__nav:focus{ outline:3px solid #0a6b57; outline-offset:2px; }

@media (max-width:1023px){
  .voices__nav--prev{ left:8px; }   /* SPは内側へ */
  .voices__nav--next{ right:8px; }
}

/* ドット */
.voices__dots{ margin-top:14px; text-align:center; }
.voices__dots button{
  width:10px; height:10px; border-radius:50%; border:none; margin:0 5px;
  background:#b7cbc2; cursor:pointer;
}
.voices__dots button[aria-current="true"]{ background:#108d70; }
@media (max-width:768px){
  .voices__title{ font-size:22px; --dot-size:3px; --dot-gap:12px; --dot-width:clamp(120px,48vw,200px); }
.voices__nav{
  top:calc(49.4% + 8px);
}
}
/* voices のリスト系は余白と行頭記号をリセット */
.voices__track,
.voices__track > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 念のため：スライダー時のトラックはフレックス＆gapで等間隔 */
.voices.is-slider .voices__track{
  display:flex;
  column-gap: var(--gap, 30px);
  row-gap: 0;
  align-items: stretch;
}

/* 見出しを中央寄せ（必要な親） */
.results__row--title,
.voices__inner { text-align: center; }

/* 共通タイトル装飾 */
.c-title-dot{
  position: relative;
  display: inline-block;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: .02em;

  /* 可変パラメータ（必要なら色だけ上書き可）*/
  --dot-color: #0a6b57;
  --dot-size: 2px;
  --dot-gap: 14px;
  --dot-width: clamp(160px, 24vw, 260px);
}

.c-title-dot::after{
  content: "";
  display: block;
  width: var(--dot-width);
  height: calc(var(--dot-size) * 2 + 2px);
  margin: 10px auto 0;
  background-image: radial-gradient(circle,
                    var(--dot-color) var(--dot-size),
                    transparent calc(var(--dot-size) + .6px));
  background-size: var(--dot-gap) var(--dot-gap);
  background-position: center center;
  background-repeat: space no-repeat; /* 端で半分に切れない */
}

@media (max-width:768px){
  .c-title-dot{ font-size:28px; --dot-size:3px; --dot-gap:12px; --dot-width: clamp(120px,48vw,200px); }
}

/* ページネーション（確実に丸く出す版） */
.voices__dots{
  margin-top:16px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  font-size:0; /* 余計な行間を消す保険 */
}

.voices__dots button{
  --dot-size: 10px;
  inline-size: var(--dot-size);
  block-size: var(--dot-size);
  /* 端末のネイティブ装飾を排除 */
  appearance:none;
  -webkit-appearance:none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  /* 拡大縮小の基準を中心に */
  transform-origin: center;
}

/* 丸は疑似要素で描くので、ボタン本体の影響を受けない */
.voices__dots button::before{
  content: "";
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 50%;
  background: #b7cbc2;
  display: block;
  transition: transform .15s ease, background-color .15s ease;
}

.voices__dots button:hover::before{ transform: scale(1.1); }

.voices__dots button[aria-current="true"]::before{
  background:#108d70;
  transform: scale(1.15);
}

/* SPで少し小さくしたい場合 */
@media (max-width:768px){
  .voices__dots button{ --dot-size: 9px; }
}


/* ===== Flow (初めての方) ===== */
.flow { padding: 70px 0 100px; }

.flow__title {
    text-align: center;
    margin: 20px auto;
    display: block;
}

.flow__panel{
  max-width: 1200px; margin: 50px auto 0;
  background: #1a7f6e;              /* パネルの緑 */
  border-radius: 14px;
  padding: clamp(20px, 4vw, 50px);
  color: #fff;
}

.flow__list{
  max-width: 910px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

/* 1行（白いボックス）：4カラム */
.flow-item{
  display: grid;
  grid-template-columns: 56px 110px 92px 1fr;  /* icon / step / image / text */
  align-items: center;
  gap: 16px;
  background: #fff;
  color: #222;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: ;
}
.flow-item + .flow__arrow{ margin: 12px 0; text-align:center; color: #e6f4f0; }
.flow__arrow svg {
    display: inline-block;
    width: auto;
    height: 40px !important;
}

.flow-item__col--icon{
  color: #0f806b; display:flex; align-items:center; justify-content:center;
}
.flow-item__col--step{ font-weight: 800; color: #157d68; font-size: 23px; }
.flow-item__step{color:#157d68; padding:6px 14px; border-radius: 999px; }
.flow-item__col--img img{
  width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display:block;
  background:#f6f6f6;
}
.flow-item__col--text{
  font-weight: 700; color:#0e0e0e; line-height: 1.7; font-size: 1.1em;
}

/* CTA */
.flow__cta{ max-width: 910px; margin: 50px auto 0; text-align: center; }
.flow__cta-caption{
  display:inline-block; background:#fff; color:#111; font-weight:800;
  border-radius: 999px; padding:10px 16px; margin-bottom:10px;
  box-shadow: 0 6px 12px rgba(0,0,0,.08);
}
.flow__btn{
  display:inline-flex; align-items:center; gap:10px;
  background:#e9536b; color:#fff; text-decoration:none; font-weight:800;
  padding:14px 22px; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(233,83,107,.28);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.flow__btn:hover{ transform: translateY(-1px); }
.flow__btn-ic{ flex:0 0 auto; }

/* SP 調整 */
@media (max-width: 768px){
  .flow__panel{ border-radius: 12px; }
  .flow-item{
    grid-template-columns: 44px 88px 72px 1fr;
    padding: 12px 14px;
  }
  .flow-item__col--img img{ width: 56px; height: 56px; }
  .flow-item__col--step{ font-size: 16px; }
  .flow__cta-caption{ padding:8px 14px; }
}

/* 既存の .flow__cta, .flow__cta-caption はそのまま利用 */
.flow__cta-link{
  display:block;
  max-width:570px;          /* ご指定サイズにフィット */
  margin:10px auto 0;       /* 中央寄せ */
}
.flow__cta-link img{
  width:100%;
  height:auto;
  display:block;
}

/* もう使わない場合は削除OK（残っていても影響なし） */
/* .flow__btn, .flow__btn-ic { ... } は不要 */

/* スマホ時：テキスト列だけ下段で全幅に */
@media (max-width: 768px){
  /* アイコン・Step・画像の3カラムに縮約 */
  .flow-item{
    grid-template-columns: 44px 88px 72px; /* 3列 */
    align-items: start;                    /* 複数行テキストでも崩れにくく */
    row-gap: 8px;                          /* 上下の間隔を少し確保（好みで調整） */
  }

  /* テキスト列を次の行へ落として全幅にする */
  .flow-item__col--text{
    grid-column: 1 / -1;   /* 3カラムすべてを跨ぐ */
    margin-top: 0px;       /* ちょい間隔（任意） */
  }
}

/* ── SP専用（≤768px）：行ごとに“間”を分けて調整 ── */
@media (max-width: 768px){
.flow-item__step {
    padding: 0px 6px;
}
  .flow-item{
    display:grid;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0;           /* ← まず全カラム間のギャップをゼロに */
    row-gap: 10px;
    padding: 12px 14px;

    /* 調整しやすいよう変数化（お好みで変更可能） */
    --gap-row1: 4px;         /* 1行目：アイコン⇔Stepの間 */
    --gap-row2: 2px;         /* 2行目：テキスト⇔画像の間（もっと狭い） */
  }

  /* 1行目：中央寄せ（アイコン=列2、Step=列3） */
  .flow-item__col--icon{
    grid-column: 2; grid-row: 1;
    justify-self: end; align-self: center;
    margin-right: var(--gap-row1);   /* ← ここで1行目の“間”を作る */
  }
  .flow-item__col--step{
    grid-column: 3; grid-row: 1;
    justify-self: start; align-self: center;
    font-size:23px;
    /* 余白はアイコン側で作っているので margin-left は不要 */
  }

  /* アイコンはStep文字高さくらいの小さめ */
  .flow-item__icon{ height:1.3em; width:auto; display:block; }

  /* 2行目：テキスト（左3列）＋画像（右1列） */
  .flow-item__col--text{
    grid-column: 1 / span 3; grid-row: 2;
    align-self: center; text-align: left;
    line-height: 1.7; font-weight: 700;
    font-size:15px;
  }
  .flow-item__col--text span{
    font-size:13px;
  }
  .flow-item__col--img{
    grid-column: 4; grid-row: 2;
    justify-self: end; align-self: center;
    margin-left: var(--gap-row2);    /* ← 2行目の“間”はさらに狭く */
  }
  .flow-item__col--img img{
    width:90%; height:auto; border-radius:50%; object-fit:cover; display:block;
    background:#f6f6f6;float: right;
  }
.flow-item + .flow__arrow {
    margin: 0px 0;
}
}


/* 769px以上のとき */
@media screen and (min-width: 769px) {
  .sp-only {
    display: none;
  }
}

/* 768px以下のとき */
@media screen and (max-width: 768px) {
  .pc-only {
    display: none;
  }
}

/* ===== FAQ ===== */
.faq{ background:#fafafa; padding:70px 0 100px; }
.faq__title{ text-align:center; display: block; } /* 丸ドット装飾は共通 .c-title-dot を利用 */

.faq__list{ max-width:910px; margin:24px auto 0; padding:0; list-style:none; }
.faq__item{ border-bottom:1px dashed #ccc; padding: 10px 0;}

/* 質問行：Qアイコン / テキスト / 矢印 */
.faq__q{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:16px 8px;
  background:transparent;
  border:0;
  text-align:left;
  cursor:pointer;
  color:#0f0f0f;
  font-weight:800;
  font-size:1.2em;
}

/* 768px以下のとき */
@media screen and (max-width: 768px) {
	.faq__q{
	  font-size:1em;
	}
}
/* 既存の .faq__q:focus の指定を置き換え */
.faq__q:focus { outline: none; }                 /* クリック/タッチでは枠を出さない */
.faq__q:focus-visible{                           /* キーボード操作時のみ表示 */
  outline: 3px solid #108d70;
  outline-offset: 2px;
}

/* もし Firefox の内側枠が出る場合の保険 */
.faq__q::-moz-focus-inner{ border:0; }


.faq__badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; border-radius:6px; font-weight:800; font-size:32px;
}
.faq__badge--q{ color:#fff; background:#108d70; }
.faq__badge--a{ color:#108d70; background:#e2ede6; border:2px solid #108d70; }

.faq__chev{
  width:20px; height:20px; position:relative;
}
.faq__chev::before{
  content:""; position:absolute; inset:0;
  margin:auto; width:8px; height:8px;
  border-right:2px solid #7aaaa0; border-bottom:2px solid #7aaaa0;
  transform:rotate(-45deg); transition:transform .2s ease;
}
.faq__q[aria-expanded="true"] .faq__chev::before{ transform:rotate(45deg); }

/* 回答行：Aアイコン / テキスト */
.faq__a{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  padding:0 8px 16px;
}
.faq__a[hidden]{ display:none; }
.faq__a-text{ color:#333; line-height:1.9; font-weight:600; font-size:1.2em;}
/* 768px以下のとき */
@media screen and (max-width: 768px) {
	.faq__a-text{line-height:1.6; font-size:1em;}
}
.u-accent{ color:#e9536b; font-weight:800; }

/* SP 微調整 */
@media (max-width:768px){
  .faq{ padding:50px 0 100px; }
  .faq__q{ padding:14px 4px; gap:10px; }
  .faq__a{ padding:0 4px 14px; gap:10px; }
}


/* ===== 店舗情報 ===== */
.store{ padding:0px 0 100px; }
.store__title{ text-align:center; display:block;}
.store__lead{
  text-align:center;
  margin: 25px 0 50px;
  font-weight:800;
  color:#0f0f0f;
}
/* === stores セクション専用：外側(左右)の余白を消す === */
.stores .l-container--1200{
  max-width: 1200px;
  margin: 0 auto;
}

/* === グリッド：外側なし／カード間のみ gap === */
/* SP 基本：2カラム（カード間のみ gap）、1件なら1カラム */
.stores__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 左右端は外側余白なし */
  gap: 16px; /* ← カード間のスペースのみ */
}
/* 行内でカードを同じ高さに伸ばす（グリッド項目を伸長） */
.stores__list{
  align-items: stretch; /* これで各 li(= .store-card) が行の高さまで伸びます */
}

/* SP：店舗数が 1 件のみなら 1 カラム */
@supports(selector(:has(*))){
  .stores__list:has(> :only-child){
    grid-template-columns: 1fr;
  }
}

/* PC：4カラム固定（左右端は外側余白なし、間だけ gap） */
@media (min-width: 1024px){
  .stores__list{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px; /* デザインの間隔に合わせて */
  }
}

/* ---（参考）カード周りの調整は以前の修正のままでOK --- */
/* 画像の余白リセットとボタン色などはそのまま流用可 */


/* カード */
/* カード本体：高さ揃え + フッターを常に下に */
.store-card{
  display: grid;
  grid-template-rows: auto 1fr auto; /* 画像 / 本文 / フッター */
  background: #fff;
  border-radius: 0px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  height: 100%;                     /* 行の最大高まで伸びる */
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .store-card:hover{ 
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }
}
.store-card__link{
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  border-radius: 0px; overflow: hidden;
  box-shadow: var(--card-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.store-card__link:hover{ transform: translateY(-2px); }

/* 画像 */
/* stores セクション内の figure 余白を必ず消す */
.stores .store-card__media,
.stores figure.store-card__media,
.stores .store-card__media figure,
.stores figure {
  margin: 0 !important;         /* ← 最後に読み込ませる/!importantで確実に勝つ */
  padding: 0;
  border: 0;
}

/* 念のため：画像はブロック化＆カバー */
.stores .store-card__media{ 
  aspect-ratio: 4 / 3;
  background:#f3f3f3;
  overflow:hidden;
}
.stores .store-card__media img{
  display:block;                 /* インライン隙間消し */
  width:100%;
  height:100%;
  object-fit:cover;
}


/* テキスト */
.store-card__body{
  padding: 10px;
  text-align: center;
  background: #f8f7f6;
min-height: 0; /* Safari対策：overflowがある要素で必要になることがある */
}
.store-card__name{
  font-size: clamp(12px, 1.7vw, 20px);
  font-weight: 700; line-height: 1.4; margin: 0 0 8px;
}
.store-card__addr{
      font-size: clamp(10px, 1.7vw, 12px);
    line-height: 1.5; color:#333; margin: 0;
}
.store-card__addr .zip{ letter-spacing: .02em; }

/* フッター（ボタンを下に寄せる） */
.store-card__foot {
    margin-top: auto;
    padding: 0px 0px 0px;
    background: #19816e;
    color: #fff;
}
.store-card__btn{
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--brand); color:#fff; border-radius: 0px;
  padding: 5px; font-weight: 700; font-size: 12px;
  transition: background .18s ease, transform .18s ease;
}
.store-card__btn svg{ flex: 0 0 auto; COLOR: #19816e; margin-left: 1px;}
.store-card__link:hover .store-card__btn{ background: var(--brand-dk); }

.store-card__ico{
  width:15px; height:15px;
  border-radius:50%;
  background:#fff;             /* 白丸 */
  color: var(--brand);         /* 矢印の色（ブランド色） */
  display:inline-grid; place-items:center;
}


/* ===== お問い合わせフォーム ===== */
.contact{ padding:70px 0 100px; }
.contact__title{ text-align:center; display:block;}
.contact__lead{
  text-align:center;
  margin: 25px 0 50px;
  font-weight:800;
  color:#0f0f0f;
}
/* === stores セクション専用：外側(左右)の余白を消す === */
.contact .l-container--1200{
  max-width: 1200px;
  margin: 0 auto;
}

form {
    padding: 0px 0px 0px;
    background: #fff;
    border-radius: 5px;
}

.inner-form {
    display: flex;
    gap: 0 2%;
    background: #fff;
    width: 100%;
    border-radius: 10px;
}

.confirm .inner-form {
    flex-wrap: wrap;
    justify-content: center;
}

.confirm .fix-cta {
    display: none;
}


.confirm-text {
    font-size: 24px;
    text-align: center;
    margin: 60px auto 0px;
}

.form-label {
    font-weight: 600;
    display: flex;
    align-items: center;
    width: 35%;
}

.form-split {
    width: 49%;
}

.label-attention {
    font-size: 14px;
    margin-top: 8px;
    color: #286cd2;
}

.item {
    margin-bottom: 30px;
    display: flex;
}

.inputs {
    height: 48px;
    border-radius: 5px;
    border: solid 1px #a9cbb7;
    width: 100%;
    padding: 0 10px;
}

.wpcf7-form-control {
    gap: 15px 3%;
    display: flex;
    flex-wrap: wrap;
}

.wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
    display: block;
    justify-content: center;
}

.form-inner {
    width: 71%;
}

.form-label {
    font-weight: 600;
    display: flex;
    align-items: center;
    width: 34%;
}

.form-inner .wpcf7-list-item {
    border: solid 1px #ccc;
    border-radius: 5px;
    width: 45%;
    height: 48px;
    display: flex;
    align-items: center;
    padding-left: 10px;
    margin: 0;
}

.wpcf7-list-item > label {
    display: flex;
    align-items: center;
}

.form-inner textarea {
    min-height: 120px;
}

.wpcf7-list-item-label {
    color: #777;
    padding-left: 5px;
}

.require .form-label::after {
    content: "必須";
    font-size: 12px;
    background: #ed5471;
    padding: 5px 8px;
    border-radius: 5px;
    margin-left: 10px;
    color: #fff;
}

.wpcf7-date {
    width: 87%;
}

.wpcf7-radio.inputs {
    border: none;
    padding: 0;
}

.privacy {
    height: 120px;
    overflow-y: scroll;
    border: solid 1px #ccc;
    border-radius: 10px;
    padding: 15px;
    font-size: 13px;
}

.privacy::-webkit-scrollbar-thumb {
    background-color: #fff;
}

.accept-text-box {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 0;
}

.accept-text-box .form-label {
    display: flex;
    justify-content: center;
}

.accept-text-box .wpcf7-form-control-wrap {
    display: flex;
    justify-content: center;
}

.accept-text-box .wpcf7-list-item-label {
    color: #111;
    font-size: 13px;
    font-weight: 600;
}

.accept-text-box .wpcf7-list-item {
    width: 100%;
    border: none;
    margin: 0;
}

.wpcf7-submit {
    margin: 30px auto;
    padding: 20px 100px;
    font-size: 21px;
    border-radius: 100px;
    border: none;
}

.wpcf7 input[type="submit"] {
background:#ed5471;
-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
    cursor: pointer;
    color: #fff;
}

.wpcf7 input[type="submit" i]:disabled {
background:#ddd;
}

.wpcf7 input[type="submit"]:hover {
    opacity: 0.7;
}

.wpcf7 input[type="submit" i]:disabled:hover {
    opacity: 1;
}

input[type="text"] {
    font-size: 16px;
}

input[type="date"] {
    font-size: 16px;
    width: 87%;
}

select {
    font-size: 16px;
}

.form-attention {
    margin-top: 10px;
    font-size: 14px;
    background: #ddd;
    padding: 10px 15px;
    line-height: 1.5;
    border-radius: 5px;
    background-color: #e2eee7;
}

.form-biko {
    padding-bottom: 80px;
}

/* 768px以下のとき */
@media screen and (max-width: 768px) {
	form {
	    padding: 0px 0px 0px;
	}
	
	.item {
	    margin-bottom: 30px;
	    display: block;
	}
	
	.form-label {
	    width: 100%;
	}
	
	.form-biko {
	    padding-bottom: 0;
	}
    .form-inner {
        margin-top: 15px;
        width: 100%;
    }
}

/* ==== Floating Banner base ==== */
.float__wrap{
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, var(--lift, 0px));
  width: min(835px, 92vw);
  z-index: 9999;
  opacity: 0;                /* is-visible で 1 にする */
  pointer-events: none;      /* is-visible で操作可に */
  transition: opacity .2s ease, transform .1s linear;
}
.float__wrap.is-visible{
  opacity: 1;
  pointer-events: auto;
}
.float__link img{ display:block; width:100%; height:auto; }

/* ← 仕様変更：×は常に非表示（要素が残っていても見えません） */
.float__close{ display:none !important; }

/* 停止用セクション（背景 #e3eee8） */
.float-stop{
  background:#e3eee8;
  padding: 32px 0;
  min-height: var(--float-stop-min, 180px); /* JSで上書き */
}

/* ==== スナップ停止（ピタッと固定） ==== */
.float__wrap.is-stuck{
  position: static;                 /* fixed解除で揺れゼロ */
  transform: none !important;
  left: auto; bottom: auto;
  width: min(835px, 100%);
  margin: 0 auto;
  opacity: 1 !important;            /* 可視を強制（消えないように） */
  pointer-events: auto !important;
}


/* Footer */
.footer{
  --footer-bg: #247f70;        /* 添付の深緑 */
  background: var(--footer-bg);
  color:#fff;
  text-align:center;
}
.footer__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 50px) 16px; /* 上下にゆったりスペース */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(12px, 2vw, 50px);
}
.footer__logo{
  display:block;
}
.footer__logo img{
  display:block;
  width: min(340px, 80vw);     /* ★ ロゴは最大340px */
  height:auto;
  margin-inline:auto;          /* ★ 中央 */
}
.footer__copy{
  font-size: clamp(12px, 1.2vw, 14px);
  line-height: 1.9;
  letter-spacing: .03em;
  opacity:.95;
}