/*======================================
  店舗一覧・店舗詳細ページ リニューアル分の追加スタイル
  Viteのビルド環境がリポジトリに無いため、既存クラスで賄えない新規デザイン要素のみ
  このファイルに追記する（本体スタイルは assets/styles/main-*.css を優先して流用すること）
======================================*/

/*
  デザインカンプがSP(750px)幅基準のみのため、PC等の広い画面でもSPと同じ見え方になるよう
  コンテンツ幅を750pxにキャップする。
  vw単位はブラウザの実際の幅を基準に計算されコンテナ幅の影響を受けないため、
  l-containerを container-type: inline-size にした上で、このファイル内の可変サイズ指定は
  vw ではなく cqw（コンテナ幅基準）を使う。これによりコンテナ幅(=750px上限)を超えるブラウザ幅で見ても、
  750px時点と同じ見た目のまま止まる。
  ※ main-*.css（Viteビルド済み本体）側は vw のままのため、このファイルで未対応のクラスは
    引き続きブラウザ幅に応じて拡大する点に注意（発生したら都度cqw化する）
*/
.l-container {
  max-width: 750px;
  container-type: inline-size;
}

/* l-header は position:fixed で独自に max-width:1000px を持っており、
   l-container の変更が継承されないため個別に上書きする。
   また高さ・ロゴ・ハンバーガーも本体CSS側でvw基準のため、広い画面で肥大化していた。cqw基準に上書きする */
/* 実測(デザインカンプ750px幅時点でヘッダー高さ約76-80px)に基づき再計算。
   旧CSSの clamp() 係数は旧デザイン(1000px基準)向けの数値をvw→cqwへ機械的に置換しただけで、
   最大値(8.75rem=140px)自体が新デザインの想定(約78px)と合っていなかった */
.l-header {
  max-width: 750px;
  height: 4.875rem;
  /* 本体CSSの left:50%+translate:-50% によるセンタリングはスクロールバー分のズレでハンバーガーが
     右端で見切れることがあるため、l-containerと同じ left/right+margin-inline:auto 方式に変える */
  left: 0;
  right: 0;
  translate: none;
  margin-inline: auto;
  /* デザインカンプでは非表示時から不透明なダーク背景＋下部に赤いグローラインがあるため追加する
     （本体CSSは .ham-active 時のみ背景が付く設計で、常時は透過のままだった） */
  background-color: #1a1a1a;
  border-bottom: 3px solid transparent;
  /* 実測: 赤いラインはほぼ端から端まで一色（大きな透明マージンは無い） */
  border-image: linear-gradient(90deg, #df3927, #df3927) 1;
}

.l-header .l-inner {
  padding-inline-start: clamp(1.25rem, .606rem + 3.03cqw, 2.5rem);
}

.l-header__logo {
  width: clamp(9rem, 5.5rem + 18cqw, 15rem);
}

/* 本体CSSの実際のセレクタは .c-ham と .c-ham .c-ham__bar（2クラス）で、
   前回の .c-ham__bar（1クラス）では詳細度不足で負けて上書きされていなかった */
.c-ham,
.c-ham .c-ham__bar {
  width: 4.875rem;
  height: 4.875rem;
}

/* l-header は position:fixed でヘッダー分の高さが本文側で確保されていなかったため、
   ヘッダーを不透明にしたことで本文の先頭がヘッダーの下に隠れて重なって見えていた。
   本文側にヘッダー高さ分のpadding-topを確保する */
.l-main {
  padding-top: 4.875rem;
}

/* バーの太さ(34px)はデザインカンプ実測(約40px)に近く、前回の26px指定は
   詳細度不足でそもそも反映されていなかったため、この上書きは撤回し本体CSSの値をそのまま使う */

/* ハンバーガー展開メニュー: max-width・出現位置(top)・文字サイズが本体CSS側でvw基準/1000px基準のまま
   だったため、ヘッダーと同様にcqw基準・750px基準に揃える */
.c-nav {
  max-width: 750px;
  top: 4.875rem;
}

.c-nav ul {
  margin-block-start: clamp(2.5rem, 1.591rem + 4.55cqw, 4rem);
}

.c-nav ul a span {
  font-size: clamp(1.1rem, .85rem + 1.6cqw, 1.7rem);
}

.c-nav ul a img {
  width: clamp(.7rem, .55rem + .8cqw, 1rem);
}

/* LINE登録ボタン: .c-button.--primary と同様に本体CSSのmax-width:70%・vw基準サイズのままだったため揃える */
.c-nav .c-button.--line {
  width: 100%;
  max-width: 100%;
  height: clamp(3.5rem, 2.8rem + 3.5cqw, 4.5rem);
  font-size: clamp(1.1rem, .9rem + 1.2cqw, 1.5rem);
  margin-block: clamp(1.5rem, .955rem + 2.73cqw, 3rem);
}

/* 店舗詳細: セクション共通の背景（旧テーマの p-shop__photo 等が持つ配色と衝突するため独自定義する） */
.c-shop-section {
  background-color: #1a1a1a;
  padding-block: clamp(2.5rem, 1.591rem + 4.55cqw, 5rem);
}

/* 店舗詳細: 「AUN'S GYM ○○店」の店名見出し */
.c-shop-name {
  font-weight: 700;
  font-size: clamp(1.2rem, .955rem + 1.21cqw, 1.8rem);
  margin-block-start: clamp(2rem, 1.318rem + 3.41cqw, 4rem);
}

/* 店舗詳細: 住所ブロック（ラベル＋値＋Instagramアイコン） */
.c-shop-address {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1em;
  margin-block-start: clamp(1rem, .682rem + 1.59cqw, 2rem);
}

.c-shop-address dt {
  color: #999;
  font-weight: 700;
  flex: 0 0 auto;
}

.c-shop-address dd {
  flex: 1;
  font-weight: 700;
  line-height: 1.5;
}

.c-shop-address__instagram {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(2rem, 1.7rem + 1.5cqw, 2.75rem);
  aspect-ratio: 1;
  border: 1px solid #fff;
  border-radius: 8px;
}

.c-shop-address__instagram img {
  width: 60%;
}

.c-shop-access {
  margin-block-start: clamp(1.5rem, .955rem + 2.73cqw, 3rem);
  font-weight: 700;
}

/* 店舗詳細: セクション間の薄いグレーの区切り線（店舗画像セクションの直前のみ使用） */
.c-shop-divider {
  border: none;
  border-top: 1px solid #4d4d4d;
  width: min(100%, 700px);
  margin: 0 auto;
}

/* 店舗詳細: 店舗画像・GoogleMap・住所ブロックの間隔。
   本体CSSの本来のスタイルは .p-page.p-shop__photo .subphotos のように旧セクションクラスに
   限定されており、独自クラス(c-shop-section等)に切り替えたことで一切適用されていなかった。
   グリッド化・白枠・アスペクト比をここで再定義する */
.infoarea {
  margin-block-start: clamp(3.75rem, 2.386rem + 6.82cqw, 7.5rem);
}

.googlemap {
  aspect-ratio: 880 / 588;
  border: clamp(.625rem, .307rem + 1.59cqw, 1.5rem) solid #fff;
  width: 100%;
  margin-block-start: clamp(2.5rem, 1.591rem + 4.55cqw, 5rem);
  overflow: hidden;
}

/* iframeにはHTML属性で width="800" height="600" が付いており、CSSで明示的に上書きしないと
   親のaspect-ratioを無視して固定サイズのまま描画され、縦が半分程度しか見えない状態になる */
.googlemap iframe {
  display: block;
  width: 100%;
  height: 100%;
}

.mainphoto {
  border: 1px solid #fff;
  margin-block-start: clamp(1.25rem, .795rem + 2.27cqw, 2.5rem);
}

.subphotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.75rem, .477rem + 1.36cqw, 1.5rem);
  margin-block-start: clamp(.75rem, .477rem + 1.36cqw, 1.5rem);
}

/* デザインカンプ実測: タグは左詰めで流れるflex-wrapではなく、3列の均等グリッドで並んでいる */
.c-tag-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, .318rem + .91cqw, 1rem);
  margin-block-start: clamp(1.5rem, .955rem + 2.73cqw, 3rem);
}

.c-tag-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6em .8em;
  border-radius: 4px;
  font-weight: 700;
  font-size: clamp(.8rem, .682rem + .61cqw, 1.1rem);
  line-height: 1.4;
  text-align: center;
}

.c-tag-list--facility .c-tag-list__item {
  background-color: #d9333f;
  color: #fff;
}

.c-tag-list--machine .c-tag-list__item {
  background-color: #4d4d4d;
  color: #fff;
}

.p-shop__machine-category + .p-shop__machine-category {
  margin-block-start: clamp(2rem, 1.318rem + 3.41cqw, 4rem);
}

.p-shop__machine-category h3 {
  font-weight: 700;
  font-size: clamp(1.2rem, .955rem + 1.21cqw, 1.8rem);
}

/* 店舗一覧: 地域 > 都道府県 > 店舗カード */
.c-shop-card-list {
  display: grid;
  gap: clamp(1rem, .682rem + 1.59cqw, 2rem);
  margin-block-start: clamp(1rem, .682rem + 1.59cqw, 2rem);
}

.c-shop-card {
  display: flex;
  gap: clamp(.75rem, .511rem + 1.21cqw, 1.5rem);
  align-items: flex-start;
  background-color: #fff;
  color: #1a1a1a;
  padding: clamp(.75rem, .511rem + 1.21cqw, 1.5rem);
  text-decoration: none;
}

.c-shop-card__thumb {
  flex: 0 0 clamp(6rem, 4.545rem + 6.06cqw, 9rem);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.c-shop-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.c-shop-card__body {
  flex: 1;
}

.c-shop-card__name {
  font-weight: 700;
  font-size: clamp(1rem, .864rem + .61cqw, 1.3rem);
}

.c-shop-card__address {
  margin-block-start: .4em;
  font-size: clamp(.8rem, .682rem + .61cqw, 1.1rem);
}

.c-shop-card__tel {
  margin-block-start: .4em;
  font-size: clamp(.8rem, .682rem + .61cqw, 1.1rem);
  color: #d9333f;
  text-decoration: underline;
}

.c-region-summary {
  display: flex;
  flex-direction: column;
  gap: clamp(.5rem, .318rem + .91cqw, 1rem);
  margin-block-start: clamp(1.5rem, .955rem + 2.73cqw, 3rem);
}

.c-region-summary__item {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, .682rem + 1.59cqw, 2rem);
}

.c-region-summary__item .region-name {
  flex: 0 0 clamp(4rem, 3.3rem + 3.5cqw, 6rem);
  color: #999;
  font-weight: 700;
}

.c-region-summary__item .prefectures {
  font-weight: 700;
  color: #fff;
}

.c-region-summary__item.--comingsoon .prefectures {
  color: #fff;
}

/* 地域見出し（関東 等）: 左寄せ＋赤ラインを直下に */
.c-region-heading {
  font-weight: 700;
  font-size: clamp(1.5rem, 1.227rem + 1.36cqw, 2.25rem);
  text-align: left;
}

.c-prefecture-heading {
  color: #999;
  font-weight: 700;
  font-size: clamp(1rem, .864rem + .61cqw, 1.3rem);
  margin-block-start: clamp(1.5rem, .955rem + 2.73cqw, 3rem);
}

/* TOPページ: ヒーロー写真の下の赤いライン */
.c-hero-photo {
  display: block;
  width: 100%;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, transparent, #df3927, transparent) 1;
}

/* 店舗詳細: FV画像（1枚固定、スライダーなし） */
.c-shop-hero-photo {
  display: block;
  width: 100%;
}

/* TOPページ: LOCATION 2列グリッド */
.c-location-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 1.045rem + 2.27cqw, 3rem) clamp(1rem, .682rem + 1.59cqw, 2rem);
  margin-block-start: clamp(2rem, 1.318rem + 3.41cqw, 4rem);
}

.c-location-grid__region {
  font-weight: 700;
  font-size: clamp(1.1rem, .955rem + .73cqw, 1.5rem);
  padding-block-end: .5em;
  border-bottom: 1px solid #fff;
}

.c-location-grid__prefectures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5em 1em;
  margin-block-start: 1em;
}

.c-location-grid__prefectures a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.c-location-grid__comingsoon {
  margin-block-start: 1em;
  color: #999;
  font-weight: 700;
}

/* TOPページ: MACHINE セクション（背景画像は750x1010pxのため、同じアスペクト比で表示する） */
.c-machine-section {
  position: relative;
  display: flex;
  aspect-ratio: 750 / 1010;
  background-image: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.6)), url(../images/renewal/machine-bg2.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-block-start: clamp(2.5rem, 1.591rem + 4.55cqw, 5rem);
  padding-block-end: clamp(2rem, 1.318rem + 3.41cqw, 4rem);
  border-top: 2px solid #df3927;
  overflow: visible;
}

.c-machine-section > .l-inner {
  display: flex;
  flex-direction: column;
  /* width は .l-inner.--sec-width-primary 側の計算済み値（左右の余白確保）を上書きしないため指定しない */
}

.c-machine-section__heading {
  position: relative;
}

/* AGロゴ: 見出しとは独立して絶対配置し、前セクション側へはみ出させる */
.c-machine-section__logo {
  position: absolute;
  top: clamp(-4.5rem, -3.2rem - 4cqw, -3.5rem);
  left: 0;
  width: clamp(3.5rem, 2.3rem + 6cqw, 5.5rem);
  z-index: 1;
}

.c-machine-section__title {
  color: #fff;
  font-weight: 700;
  font-size: clamp(2rem, 1.591rem + 2.05cqw, 3rem);
  letter-spacing: .06em;
  line-height: 1;
  text-align: right;
}

/* デザインカンプ実測: 見出し下からコピー1文目まで背景写真の余白が大きく空いているため、
   最初の段落だけ大きめのマージンを取り、テキストブロック全体を下寄りに配置する */
.c-machine-section__copy:first-of-type {
  margin-block-start: clamp(5rem, 3.2rem + 9cqw, 9.5rem);
}

.c-machine-section__copy {
  color: #fff;
  font-weight: 700;
  /* 実機のスマホ幅だと従来サイズでは<br>で区切った行が収まりきらず、余計な折り返しが発生していたため縮小。
     ただしcqwは750px幅時点の見た目で頭打ちになるため、PC等の広い画面ではこのままだと逆に小さく見える。
     750pxを超える画面幅ではメディアクエリで別途大きめの固定サイズを当てる */
  font-size: clamp(.85rem, .78rem + .45cqw, 1.15rem);
  margin-block-start: clamp(1.5rem, .955rem + 2.73cqw, 3rem);
  line-height: 1.7;
}

@media (min-width: 751px) {
  .c-machine-section__copy {
    font-size: 1.5rem;
  }
}

.c-machine-section__copy + .c-machine-section__copy {
  margin-block-start: 2em;
}

/* ボタンをセクション下部に固定（.c-machine-section > .l-inner が flex-column のため） */
.c-machine-section .c-button.--primary.c-machine-section__button {
  margin-block-start: auto;
}

/* 導入マシン画像（MACHINEの次のセクション、横幅いっぱい） */
.c-machine-photos img {
  display: block;
  width: 100%;
}

/* ボタン: 半透明の赤(#df3927cc)ではなく不透明な赤+下部シャドウに統一
   基本ルール(.c-button)がmax-width:70%のため、旧テーマ側では文脈ごとにmax-width:100%上書きが
   あったが、独自セクションクラスに切り替えたことでその上書きを失い2行折り返しの原因になっていた */
.c-button.--primary {
  background-color: #df3927;
  box-shadow: 0 6px 0 #7a1f16;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  /* ボタン前後の共通マージン（旧テーマは文脈ごとに個別指定していたため、独自クラスでは統一する） */
  margin-block: clamp(2rem, 1.318rem + 3.41cqw, 4rem);
  /* 基本CSS(main-*.css)由来のfont-size(最大2.4rem)がやや大きいため縮小する */
  font-size: clamp(1.3rem, 1.1rem + 1cqw, 2rem);
}

/* 店舗詳細: 「Webで完結！入会はこちらから」ボタンは文言が長く、スマホ幅で収まりきらないため
   他のボタンより一段小さくする */
.c-button.--primary.c-shop-reservation-button {
  font-size: clamp(.95rem, .8rem + .8cqw, 1.4rem);
}

/* よくある質問: 本体CSS(main-*.css)側がvw基準のままで750px上限に追従しないうえ、
   セレクタが .p-top__faq .contents .summary_inner(...) のように .contents を含み詳細度が高いため、
   同じ詳細度になるよう .contents を含めて上書きする（あわせて文字サイズを縮小） */
.p-top__faq .contents .summary_inner {
  padding: clamp(.938rem, .455rem + 2.27cqw, 1.875rem);
  font-size: clamp(.85rem, .55rem + 1.4cqw, 1.4rem);
}

.p-top__faq .contents .summary_inner span:first-of-type {
  font-size: clamp(1rem, .5rem + 2.2cqw, 1.8rem);
}

/* 質問文本体（「Q.」の次のspan）。ここが1行に収まらず折り返していたため縮小する */
.p-top__faq .contents .summary_inner span:nth-of-type(2) {
  font-size: clamp(.75rem, .55rem + 1cqw, 1.2rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-top__faq .contents .content_inner > div {
  font-size: clamp(1rem, .5rem + 2.2cqw, 1.8rem);
}

.p-top__faq .contents .content_inner > p {
  font-size: clamp(.8rem, .4rem + 1.6cqw, 1.35rem);
}

/* 質問間の間隔: 実際のセレクタは .p-top__faq .contents details+details（隣接兄弟結合子）で、
   前回の .p-top__faq .contents details（結合子なし）は詳細度不足で負けて反映されていなかった */
.p-top__faq .contents details + details {
  margin-block-start: 2rem;
}

/* セクション見出し下の赤いライン（新デザイン共通パーツ） */
.c-section-divider {
  display: block;
  width: min(100%, 700px);
  margin-inline: auto;
  margin-block-start: .75em;
}

/* 入会方法: 縦積み+矢印でつなぐレイアウト */
.p-top__flow__step.--vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-template-columns: none;
}

.p-top__flow__step.--vertical > li {
  width: 100%;
}

.p-top__flow__step.--vertical > li.c-flow-arrow {
  width: clamp(2rem, 1.5rem + 2cqw, 3rem);
  margin-block: .5em;
}

/* プラン一覧（料金カード） */
.c-plan-list {
  display: grid;
  gap: clamp(1rem, .682rem + 1.59cqw, 2rem);
  margin-block-start: clamp(1.5rem, .955rem + 2.73cqw, 3rem);
}

.c-plan-card {
  position: relative;
  background-color: #fff;
  color: #1a1a1a;
  text-align: center;
  padding-block-end: clamp(1.5rem, 1.136rem + 1.82cqw, 2.5rem);
  overflow: hidden;
}

.c-plan-card__badge {
  position: absolute;
  top: 0;
  left: clamp(.75rem, .511rem + 1.21cqw, 1.5rem);
  background-color: #b3242c;
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 8px;
  padding: .5em .8em;
  font-size: clamp(.75rem, .625rem + .61cqw, 1rem);
}

.c-plan-card__head {
  font-weight: 700;
  font-size: clamp(1.1rem, .909rem + .91cqw, 1.6rem);
  padding-block: .8em;
  color: #fff;
}

.c-plan-card--master .c-plan-card__head { background-color: #d9333f; }
.c-plan-card--premium .c-plan-card__head { background-color: #c96a67; }
.c-plan-card--regular .c-plan-card__head { background-color: #d19a97; }
.c-plan-card--visitor .c-plan-card__head { background-color: #9c8686; }

.c-plan-card__price {
  margin-block-start: clamp(1rem, .705rem + 1.36cqw, 1.75rem);
  font-weight: 700;
  line-height: 1;
}

.c-plan-card__price .num {
  font-size: clamp(2.4rem, 1.7rem + 3.2cqw, 4.5rem);
  color: #d9333f;
}

.c-plan-card__price .unit {
  font-size: clamp(1.2rem, .95rem + 1.1cqw, 1.9rem);
  color: #d9333f;
}

.c-plan-card__tax {
  margin-block-start: .5em;
  font-size: clamp(.85rem, .739rem + .51cqw, 1.1rem);
}

.c-plan-campaign {
  margin-block-start: clamp(1.5rem, .955rem + 2.73cqw, 3rem);
}

.c-plan-campaign img {
  display: block;
  width: 100%;
}

.c-option-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, .682rem + 1.59cqw, 2rem);
  background-color: #fff;
  color: #1a1a1a;
  margin-block-start: clamp(1.5rem, .955rem + 2.73cqw, 3rem);
  padding: clamp(1rem, .682rem + 1.59cqw, 2rem);
}

.c-option-list__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, .682rem + 1.59cqw, 2rem);
  text-align: center;
}

.c-option-list__item + .c-option-list__item {
  border-block-start: 1px dotted #999;
  padding-block-start: clamp(1rem, .682rem + 1.59cqw, 2rem);
}

.c-option-list__item img {
  width: clamp(3rem, 2.5rem + 2cqw, 4rem);
}

.c-option-list__item .price {
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.2cqw, 2rem);
}