/* ＆rich 下層ページ
   ワイヤーフレームの構造と原稿をそのまま使い、ここで新デザインを当てている。
   トークンは tokens.css、共通部品は base.css。 */

/* ---------- ページ見出しの帯 ---------- */
.pgh{background:url(../assets/grad-airy.jpg) center/cover no-repeat;
  padding-block:clamp(120px,14vw,180px) clamp(40px,5vw,64px);
  border-bottom:1px solid var(--c-line)}
.pgh h1{margin-top:10px}
.pgh p{margin-top:12px;color:var(--c-text-sub);font-size:var(--fs-body-small);
  letter-spacing:var(--ls-body-small)}

.crumb{border-bottom:1px solid var(--c-line);background:var(--c-bg)}
.crumb .wrap{display:flex;gap:10px;align-items:center;padding-block:14px;
  font-size:var(--fs-caption);letter-spacing:var(--ls-caption);color:var(--c-text-sub)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--c-primary-text)}

/* ---------- 本文の基本 ---------- */
main .sec{padding-block:var(--sec-base)}
main .sec .wrap>.kicker{display:block;margin-bottom:10px}
main h2{margin-bottom:var(--sp-lg)}
main h3{margin-top:var(--sp-xl);margin-bottom:var(--sp-md)}
main h4{margin-top:var(--sp-lg);margin-bottom:var(--sp-xs)}
main h5{margin-top:var(--sp-md);font-size:var(--fs-h4);font-weight:700}
main p{margin-top:1em}
main p:first-child{margin-top:0}
main ul:not(.acc):not(.concern):not(.step):not(.free-chips):not(.news-list):not(.fee-programs__list):not(.notfound-links){
  margin-top:var(--sp-md)}
main ul:not(.acc):not(.concern):not(.step):not(.free-chips):not(.news-list):not(.fee-programs__list):not(.notfound-links)>li{
  position:relative;padding-left:20px;margin-top:10px;font-size:var(--fs-body-small);
  line-height:var(--lh-body-small);letter-spacing:var(--ls-body-small)}
main ul:not(.acc):not(.concern):not(.step):not(.free-chips):not(.news-list):not(.fee-programs__list):not(.notfound-links)>li::before{
  content:"";position:absolute;left:2px;top:.9em;width:8px;height:1px;
  background:var(--c-primary)}
main .sec-note,main .note,main .free-note,main .form-note,main .updated{
  color:var(--c-text-sub);font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  line-height:var(--lh-caption)}
.sec-title-center,.sec-sub-center{text-align:center}
.sec-sub-center{color:var(--c-text-sub);font-size:var(--fs-body-small);
  letter-spacing:var(--ls-body-small);margin-bottom:var(--sp-xxl)}
/* ワイヤーフレームはキッカーを常に中央に置いていた。インラインstyleを剥がすので
   ここで同じ見え方にする */
main .sec>.wrap>.kicker{display:block;text-align:center}
main .sec>.wrap>.kicker+h2{text-align:center}

/* ---------- 写真のプレースホルダー ---------- */
/* 本番写真が届くまでの仮。ワイヤーフレームの灰色ボックスと文字は出さない */
.ph{position:relative;background:var(--c-bg-alt);border-radius:var(--r-base);
  overflow:hidden;font-size:0;color:transparent;display:block;
  border:1px solid var(--c-line)}
.ph::after{content:"";position:absolute;inset:0;
  background:url(../assets/logo-symbol.png) center/auto 34% no-repeat;
  opacity:.13;filter:brightness(0)}
.ph.img,.ph.map,.ph.article-image{aspect-ratio:4/3}
.ph.img-portrait{aspect-ratio:3/4}
.ph.icon{width:34px;height:34px;border-radius:var(--r-full)}
.ph.icon::after{background-size:auto 52%}
.ph.logo{width:74px;height:22px;border:0;background:none}
.ph.logo::after{background:url(../assets/logo-type.png) left center/contain no-repeat;
  opacity:1;filter:brightness(0)}

/* ---------- 汎用のグリッド ---------- */
.detail-grid-2,.trainer-grid,.access-grid,.chart-wrap{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,4vw,64px);align-items:start}
.detail-grid-2.reverse>*:first-child{order:2}
.point-grid,.photo-grid,.flow-photo-grid,.gr-grid,.related-list,.program-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-lg)}
.facilities-grid,.free-grid,.opt-grid,.contact-card{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-lg)}

/* ---------- カード類 ---------- */
.point-card,.facility-card,.free-card,.gr-card,.related-card,.opt-card,
.flow-photo-card,.note-box,.approach-callout,.price-card{
  background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-base);padding:var(--sp-lg)}
.point-card .num,.approach-num,.plan-panel-num,.plan-tab-num{
  font-family:var(--ff-label);font-size:34px;line-height:1;letter-spacing:.04em;
  color:var(--c-primary);display:block;margin-bottom:10px}
/* 小さく出るものは primary ではコントラストが足りない。濃い側を使う */
.plan-tab-num{color:var(--c-primary-text)}
.point-card h4,.facility-card h4,.free-card h4{margin-top:0}
/* 写真付きのカード（道順のSTEPなど）では、番号ではなくラベルなので小さく出す */
.point-card .ph+.num{font-size:var(--fs-label);color:var(--c-primary-text);
  margin-top:var(--sp-md);margin-bottom:4px}
.point-card p,.facility-card p,.free-card p,.gr-card p,.related-card p{
  font-size:var(--fs-body-small);color:var(--c-text-sub);
  line-height:var(--lh-body-small);letter-spacing:var(--ls-body-small)}
.note-box,.approach-callout{background:var(--c-bg-alt);border-color:transparent}

/* ---------- 見出しの装飾 ---------- */
.pb-en,.en,.desc{font-family:var(--ff-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);color:var(--c-primary-text);display:block}
.approach-block{padding-block:var(--sp-xl);border-bottom:1px solid var(--c-line)}

/* ---------- 表 ---------- */
main table{width:100%;border-collapse:collapse;font-size:var(--fs-body-small);
  margin-top:var(--sp-md)}
main th,main td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--c-line);
  letter-spacing:var(--ls-body-small);vertical-align:top}
/* 見出し行は地が濃いので、文字は墨。textSub では読みにくい */
main thead th{font-size:var(--fs-body-small);color:var(--c-text);font-weight:500;
  letter-spacing:var(--ls-body-small);background:var(--c-bg-alt)}
main tbody th{width:132px;font-weight:500;color:var(--c-text);
  font-size:var(--fs-body-small)}
.info-dl,.info-table{margin-top:var(--sp-md)}
.info-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--sp-md);
  padding:14px 0;border-bottom:1px solid var(--c-line);font-size:var(--fs-body-small)}
.info-k{color:var(--c-text-sub);font-size:var(--fs-caption);letter-spacing:var(--ls-caption)}

/* ---------- 料金 ---------- */
.pricing-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-lg);margin-top:var(--sp-lg)}
.price-card{text-align:center}
.price-card .label{font-size:var(--fs-caption);color:var(--c-text-sub);
  letter-spacing:var(--ls-caption);display:block}
.price-card .price,.opt-price{font-size:34px;font-weight:600;line-height:1;
  letter-spacing:.03em;margin:10px 0 8px}
.price-card.highlight{background:var(--c-brand);border-color:transparent}
.price-card.highlight .label,.price-card.highlight .note{color:var(--c-text)}
.price-block{border:1px solid var(--c-line);border-radius:var(--r-base);
  background:var(--c-surface);margin-top:var(--sp-lg);overflow:hidden}
.price-block-head{background:var(--c-bg-alt);padding:var(--sp-md) var(--sp-lg)}
.price-block-head h3,.price-block-head h4{margin:0}
.price-block-body{padding:0 var(--sp-lg) var(--sp-md)}
.price-popular{display:inline-block;background:var(--c-brand);border-radius:var(--r-base);
  padding:3px 10px;font-size:var(--fs-caption);letter-spacing:var(--ls-caption)}
.free-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-md)}
.free-chips li{border:1px solid var(--c-line);border-radius:var(--r-base);
  background:var(--c-surface);padding:9px 16px;font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption)}

/* 料金のコース選択（ラジオで切り替わる作り） */
.pg-radio{position:absolute;opacity:0;pointer-events:none}
.plan-selector{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(24px,3vw,40px);margin-top:var(--sp-lg);align-items:start}
.plan-tabs{display:flex;flex-direction:column;gap:8px}
.plan-tab{display:block;cursor:pointer;border:1px solid var(--c-line);
  border-radius:var(--r-base);background:var(--c-surface);padding:14px 16px;
  transition:border-color var(--dur-micro) var(--ease-inout),
             background-color var(--dur-micro) var(--ease-inout)}
.plan-tab:hover{border-color:var(--c-primary)}
.plan-tab-num{font-size:var(--fs-label);margin-bottom:4px}
.plan-tab-title{font-size:var(--fs-body-small);font-weight:500;
  letter-spacing:var(--ls-body-small)}
.plan-panels{position:relative}
.plan-panel{border:1px solid var(--c-line);border-radius:var(--r-base);
  background:var(--c-surface);padding:var(--sp-lg)}
.plan-panel+.plan-panel{margin-top:var(--sp-md)}
.plan-panel-tag{display:inline-block;background:var(--c-bg-alt);border-radius:var(--r-base);
  padding:3px 10px;font-size:var(--fs-caption);letter-spacing:var(--ls-caption)}
.plan-panel-rec{margin-top:var(--sp-md);padding-top:var(--sp-md);
  border-top:1px solid var(--c-line);font-size:var(--fs-body-small)}

/* ---------- お知らせ ---------- */
.news-list{border-top:1px solid var(--c-line);margin-top:var(--sp-lg)}
.news-list>li{border-bottom:1px solid var(--c-line);padding:0}
.news-list>li::before{display:none}
.news-list a{display:grid;grid-template-columns:110px 130px minmax(0,1fr) 20px;
  gap:var(--sp-md);align-items:baseline;padding:var(--sp-lg) 0;text-decoration:none;
  transition:color var(--dur-micro) var(--ease-inout)}
.news-list a:hover{color:var(--c-primary-text)}
.news-date{font-family:var(--ff-label);font-size:var(--fs-label);letter-spacing:.12em;
  color:var(--c-text-sub)}
.news-cat{font-size:var(--fs-caption);letter-spacing:var(--ls-caption);
  color:var(--c-primary-text);border:1px solid var(--c-line);border-radius:var(--r-base);
  padding:3px 10px;justify-self:start;white-space:nowrap}
.news-title{font-size:var(--fs-body-small);letter-spacing:var(--ls-body-small)}
.news-arrow{color:var(--c-primary-text)}
.news-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--sp-lg)}
.news-filter a{text-decoration:none;border:1px solid var(--c-line);
  border-radius:var(--r-base);padding:8px 16px;font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption)}
.news-filter a.active{background:var(--c-brand);border-color:transparent}
.news-pagination{display:flex;gap:8px;justify-content:center;margin-top:var(--sp-xl)}
.news-pagination a,.news-pagination span{border:1px solid var(--c-line);
  border-radius:var(--r-base);min-width:36px;height:36px;display:inline-flex;
  align-items:center;justify-content:center;text-decoration:none;
  font-size:var(--fs-caption)}
.news-pagination .current{background:var(--c-brand);border-color:transparent}

/* 記事 */
.article-meta{display:flex;gap:14px;align-items:center;margin-bottom:var(--sp-md);
  font-size:var(--fs-caption);color:var(--c-text-sub);letter-spacing:var(--ls-caption)}
.article-cat{border:1px solid var(--c-line);border-radius:var(--r-base);padding:3px 10px;
  color:var(--c-primary-text)}
.article-body h3{margin-top:var(--sp-xl)}
.article-share,.article-nav{margin-top:var(--sp-xxl);padding-top:var(--sp-lg);
  border-top:1px solid var(--c-line);display:flex;justify-content:space-between;
  gap:var(--sp-md);flex-wrap:wrap;font-size:var(--fs-body-small)}
.share-row{display:flex;gap:10px}

/* ---------- お客様の声（Google） ---------- */
.gr-summary{display:flex;align-items:center;gap:16px;justify-content:center;
  margin-bottom:var(--sp-xl);flex-wrap:wrap}
.gr-summary-stars{display:flex;align-items:center;gap:8px}
.gr-google{width:28px;height:28px;border-radius:var(--r-full);background:var(--c-bg-alt);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--ff-label);font-size:13px}
.gr-rating{color:var(--c-primary-text);letter-spacing:.14em}
.gr-rating-num{font-size:20px;font-weight:600}
.gr-summary-count{font-size:var(--fs-caption);color:var(--c-text-sub);
  letter-spacing:var(--ls-caption)}
.gr-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.gr-meta{font-size:var(--fs-caption);color:var(--c-text-sub);letter-spacing:var(--ls-caption)}
.gr-attribution{margin-top:var(--sp-md);text-align:right;font-size:var(--fs-caption);
  color:var(--c-text-sub);letter-spacing:var(--ls-caption)}

/* ---------- 体験の流れ ---------- */
.step-num{font-family:var(--ff-label);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);color:var(--c-primary-text);display:block;
  margin-bottom:6px}
.flow-photo-card{padding:0;overflow:hidden}
.flow-photo-card .ph{border:0;border-radius:0}
.flow-photo-card h5,.flow-photo-card p,.flow-photo-card .step-num{
  padding-inline:var(--sp-lg)}
.flow-photo-card .step-num{margin-top:var(--sp-md)}
.flow-photo-card p{padding-bottom:var(--sp-lg);font-size:var(--fs-body-small);
  color:var(--c-text-sub)}

/* ---------- フォーム ---------- */
.form-row{margin-bottom:var(--sp-lg)}
.form-row>label,.form-row .label{display:block;font-size:var(--fs-body-small);
  font-weight:500;margin-bottom:var(--sp-xxs);letter-spacing:var(--ls-body-small)}
.req{color:var(--c-primary-text);font-size:var(--fs-caption);margin-left:6px}
main input[type=text],main input[type=email],main input[type=tel],
main input[type=date],main select,main textarea{
  width:100%;min-height:48px;padding:12px 14px;background:var(--c-surface);
  border:1px solid var(--c-line-strong);border-radius:var(--r-base);
  font-size:var(--fs-body);letter-spacing:var(--ls-body);color:var(--c-text)}
main textarea{min-height:150px;line-height:var(--lh-body);resize:vertical}
main input:focus,main select:focus,main textarea:focus{outline:none;
  border-color:var(--c-primary)}
.radio-group,.check-group{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:8px}
.radio-group label,.check-group label{font-size:var(--fs-body-small);
  display:inline-flex;align-items:center;gap:8px}
.form-submit{margin-top:var(--sp-xl);text-align:center}

/* ---------- 利用者データのグラフ ---------- */
.chart{background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-base);padding:var(--sp-lg);text-align:center}
.chart-item-d{font-size:var(--fs-caption);color:var(--c-text-sub);
  letter-spacing:var(--ls-caption)}

/* ---------- 法務ページ ---------- */
.legal-body{max-width:var(--w-text)}
.legal-body h2{font-size:var(--fs-h3);margin-top:var(--sp-xxl)}
.legal-body h2:first-child{margin-top:0}
.kv-table th{width:180px}

/* ---------- CTA帯 ---------- */
.cta-band{background:var(--c-bg-alt);border-radius:var(--r-base);
  padding:var(--sp-xxl);text-align:center;margin-top:var(--sp-xxl)}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  margin-top:var(--sp-lg)}

/* ---------- トレーナー ---------- */
.trainer-sns{margin-top:var(--sp-md);font-size:var(--fs-body-small)}
.trainer-meta .role{color:var(--c-text-sub);font-size:var(--fs-caption);
  letter-spacing:var(--ls-caption)}
.trainer-cred{margin-top:var(--sp-lg);border-top:1px solid var(--c-line)}
.trainer-cred summary{list-style:none;cursor:pointer;padding:14px 28px 14px 0;
  font-size:var(--fs-body-small);font-weight:500;position:relative}
.trainer-cred summary::-webkit-details-marker{display:none}
.trainer-cred summary::after{content:"＋";position:absolute;right:0;top:14px;
  color:var(--c-primary-text)}
.trainer-cred[open] summary::after{content:"−"}

/* ---------- 画面幅ごとの調整 ---------- */
@media(max-width:1023px){
  .point-grid,.photo-grid,.flow-photo-grid,.gr-grid,
  .related-list,.program-list,.pricing-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan-selector{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:767px){
  .detail-grid-2,.trainer-grid,.access-grid,.contact-card,.chart-wrap,
  .point-grid,.facilities-grid,.free-grid,.photo-grid,
  .flow-photo-grid,.gr-grid,.related-list,.opt-grid,.program-list,
  .pricing-summary{grid-template-columns:minmax(0,1fr)}
  .detail-grid-2.reverse>*:first-child{order:0}
  .news-list a{grid-template-columns:minmax(0,1fr);gap:6px}
  .info-row{grid-template-columns:minmax(0,1fr);gap:4px}
  /* 表は幅が足りないので1行1ブロックに組み替える。横スクロールを出さない */
  main table,main tbody,main tr,main td,main th{display:block;width:100%}
  main thead{display:none}
  main tr{border-bottom:1px solid var(--c-line);padding:12px 0}
  main td,main th{border:0;padding:2px 0}
  main tbody th{width:auto;color:var(--c-text-sub);font-size:var(--fs-caption)}
  .cta-band{padding:var(--sp-lg)}
}