/* 2026-10-08 approved layout, shared with the production LP. */
.sp-break { display: none; }
.review-check .pain-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 950px; margin: auto; }
.review-check .pain-list li { padding: 12px 16px; font-size: 14px; }
.review-check { background: #eef3ef; }
.review-concept { background-color: #f8faf8; background-image: linear-gradient(rgba(27, 87, 68, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 87, 68, .045) 1px, transparent 1px); background-size: 24px 24px; }

.review-concept .sec-head { max-width: 840px; margin: 0 auto 38px; }
.review-concept .concept-cycle { max-width: 800px; margin: 0 auto; }
.review-concept .concept-cycle img { width: 100%; height: auto; }
.review-concept .concept-followup { max-width: 42em; margin: 28px auto 0; color: var(--ink-soft); font-size: 15px; line-height: 1.95; text-wrap: pretty; }
.review-concept .concept-followup p + p { margin-top: 1em; }
.review-concept .concept-underline { background: linear-gradient(transparent 76%, rgba(240, 180, 70, .38) 76%); }

.reason-card .food-photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.trainer-instagram { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--brand-deep); font-size: 13px; font-weight: 700; }
.trainer-instagram img { width: 26px; height: 26px; object-fit: contain; }
.trainer-instagram:hover { text-decoration: underline; }
.trainer-instagram:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.training-selector { max-width: 1020px; margin: auto; }
.training-main { display: grid; grid-template-columns: 1.2fr .8fr; min-height: 310px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: var(--shadow); }
.training-main > img { width: 100%; height: 100%; min-height: 310px; max-height: 390px; object-fit: cover; }
.training-main-copy { align-self: center; padding: 30px; }
.training-main-copy > span { color: var(--brand); font-size: 12px; font-weight: 700; letter-spacing: .2em; }
.training-main-copy h3 { font-family: var(--font-head); font-size: clamp(20px, 2.3vw, 28px); margin: 13px 0; }
.training-main-copy p { color: var(--ink-soft); font-size: 14px; line-height: 1.8; }
.training-main-desc p + p { margin-top: .7em; }
.training-controls { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 9px; }
.training-controls p { color: var(--brand-deep); font-size: 13px; font-weight: 700; }
.training-controls > div { display: flex; gap: 8px; }
.training-arrow { width: 37px; height: 37px; border: 1px solid var(--brand); border-radius: 50%; background: #fff; color: var(--brand-deep); font-size: 19px; cursor: pointer; }
.training-arrow:hover, .training-arrow:focus-visible { background: var(--brand); color: #fff; }
.training-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.training-thumb { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; overflow: hidden; padding: 0 0 10px; border: 2px solid transparent; border-radius: 9px; background: #f1f5f1; color: var(--ink); cursor: pointer; font-family: var(--font-head); font-weight: 700; }
.training-thumb.is-active { border-color: var(--accent); background: #e5f3ec; }
.training-thumb:focus-visible { outline: 3px solid #d2a265; outline-offset: 2px; }
.training-thumb img { display: block; flex: none; width: 100%; height: clamp(88px, 10vw, 130px); object-fit: cover; object-position: center; margin-bottom: 7px; }
.training-thumb span { font-size: 12px; }

.review-verification-note { max-width: 780px; margin: -8px auto 30px; color: var(--ink-soft); font-size: 12px; text-align: center; }
.review-pending-grid { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 26px; padding: 12px 26px 22px; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.review-pending-card { display: flex; flex: 0 0 calc((100% - 40px) / 3); min-width: 0; height: 255px; flex-direction: column; gap: 8px; padding: 24px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; scroll-snap-align: start; }
.review-pending-card > span { color: var(--ink-soft); font-size: 13px; line-height: 1.7; }
.review-pending-card p { margin-top: auto; color: var(--brand-deep); font-size: 13px; font-weight: 700; }
.review-pending-card .review-stars { color: #af8243; letter-spacing: .1em; }
.review-pending-card.has-original { border-style: solid; }
.review-original { display: -webkit-box; flex: 0 0 auto; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; max-height: calc(1.7em * 3 + 1px); margin: 0; white-space: normal; color: var(--ink); font-size: 13px; line-height: 1.7; }
.review-read-more { align-self: flex-start; padding: 7px 0; border: 0; background: none; color: var(--brand-deep); font-weight: 700; text-decoration: underline; cursor: pointer; }
.review-dialog { position: fixed; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(700px, calc(100vw - 32px)); max-height: min(80vh, 760px); margin: 0; padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 22px 70px rgba(0, 0, 0, .26); }
.review-dialog::backdrop { background: rgba(7, 30, 24, .7); }
.review-dialog-inner { position: relative; max-height: min(80vh, 760px); overflow-y: auto; padding: 34px clamp(20px, 5vw, 42px); }
.review-dialog-close { position: sticky; top: 0; display: block; width: 40px; height: 40px; margin: -16px -15px 0 auto; border: 0; border-radius: 50%; background: #edf3ef; color: var(--brand-deep); font-size: 25px; cursor: pointer; }
.review-dialog-stars { color: #af8243; letter-spacing: .1em; }
.review-dialog-name { margin: 10px 0 20px; font-weight: 700; }
.review-dialog-body { margin: 0; white-space: pre-wrap; line-height: 1.8; overflow-wrap: anywhere; }
.review-pending-grid:focus-visible, .review-read-more:focus-visible, .review-dialog-close:focus-visible { outline: 3px solid #d2a265; outline-offset: 2px; }

.review-price { background: #e6ede7; }
.review-price .price-card.featured { background: #285545; border: 2px solid #285545; color: #fff; box-shadow: 0 15px 32px rgba(22, 65, 49, .24); transform: translateY(-7px); }
.review-price .price-card.featured .price, .review-price .price-card.featured .unit, .review-price .price-card.featured .detail { color: #fff; }
.review-price .price-card.featured .tag { background: #e6bc73; color: #203e32; }

.review-flow .flow-list { max-width: 760px; }
.review-flow .flow-list li { padding-left: 0; gap: 18px; align-items: flex-start; }
.review-flow .flow-list li::before { width: 42px; text-align: center; }
.review-flow .flow-list li:not(:last-child)::after { left: 20px; top: 54px; bottom: 8px; width: 2px; background: #9fc2ab; }
.flow-icon { flex: none; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 12px; background: #e3f0e7; color: #286f51; font-size: 23px; line-height: 1; overflow: hidden; }
.review-flow .flow-list li > div { padding-top: 4px; }

.line-consult { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.line-consult > span:first-child { color: var(--brand-deep); font-size: 13px; font-weight: 700; }
.reserve-panel .line-consult p { margin: 5px auto 14px; font-size: 14px; }
.line-consult-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: min(260px, 100%); padding: 13px 20px; border: 1px solid #2e9f72; border-radius: 100px; background: #f0faf3; color: #227754; font-size: 14px; font-weight: 700; }
.line-consult-link:hover { background: #e1f2e8; }
.line-consult-link:focus-visible { outline: 3px solid #2e9f72; outline-offset: 3px; }
.reserve-panel .line-consult small { margin-top: 9px; }

@media (max-width: 860px) {
  .review-price .price-card.featured { transform: none; }
  .review-pending-card { flex-basis: calc((100% - 30px) / 2); }
}
@media (max-width: 560px) {
  .sp-break { display: block; }
  .review-check .sec-head { margin-bottom: 26px; }
  .review-check .pain-list { grid-template-columns: 1fr 1fr; gap: 7px; }
  .review-check .pain-list li { padding: 10px; font-size: 11.5px; line-height: 1.5; gap: 5px; }
  .review-concept .sec-title { font-size: 23px; line-height: 1.55; }
  .review-concept .sec-head { margin-bottom: 24px; }
  .review-concept .concept-cycle { width: calc(100% + 40px); max-width: none; margin-left: -20px; overflow: hidden; }
  .review-concept .concept-cycle img { width: 115%; max-width: none; margin-left: -7.5%; }
  .review-concept .concept-followup { margin-top: 22px; }
  .review-concept .sec-lead { font-size: 13px; }
  .concept-cycle figcaption { font-size: 11px; }
  .training-main { display: block; min-height: 0; }
  .training-main > img { min-height: 0; max-height: none; height: auto; aspect-ratio: 16 / 9; }
  .training-main-copy { padding: 17px 19px 20px; }
  .training-main-copy h3 { font-size: 18px; margin: 7px 0; }
  .training-main-copy p { font-size: 12px; line-height: 1.6; }
  .training-controls { margin: 9px 0 7px; }
  .training-arrow { width: 32px; height: 32px; font-size: 17px; }
  .training-thumbs { gap: 5px; }
  .training-thumb { padding-bottom: 5px; border-radius: 6px; }
  .training-thumb img { height: clamp(56px, 17vw, 72px); margin-bottom: 4px; }
  .training-thumb span { display: block; padding-inline: 2px; font-size: clamp(8px, 2.2vw, 10px); line-height: 1.3; overflow-wrap: anywhere; }
  .review-flow .flow-list li { gap: 9px; padding-bottom: 26px; }
  .review-flow .flow-list li::before { width: 30px; font-size: 18px; }
  .review-flow .flow-list li:not(:last-child)::after { left: 14px; top: 46px; }
  .flow-icon { width: 37px; height: 37px; font-size: 18px; }
  .review-flow .flow-list h3 { font-size: 15px; }
  .review-flow .flow-list p { font-size: 12px; }
  .review-pending-grid { gap: 8px; scroll-padding-inline: 24px; padding-inline: 24px; }
  .review-pending-card { flex-basis: calc(100% - 16px); height: 232px; padding: 15px 12px; }
}
@media (max-width: 430px) {
  .site-header { flex-wrap: nowrap; gap: clamp(3px, 1vw, 5px); justify-content: space-between; padding: 8px clamp(5px, 2vw, 9px); }
  .site-header .brand { flex: 0 1 auto; width: clamp(75px, 24vw, 101px); min-width: 0; }
  .site-header .header-nav { flex: 0 0 auto; width: auto; margin: 0; gap: clamp(4px, 1.2vw, 7px); }
  .site-header .header-nav a { font-size: clamp(9.4px, 2.95vw, 12px); white-space: nowrap; }
  .site-header .header-cta { flex: 0 0 auto; padding: 8px clamp(5px, 1.5vw, 7px); font-size: clamp(9.2px, 2.8vw, 11.5px); white-space: nowrap; }
}
@media (max-width: 360px) {
  .trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trust-item { min-width: 0; padding-inline: 0; }
  .trust-seal { width: 78px; height: 78px; }
  .trust-value { font-size: 23px; }
  .trust-value-text { font-size: 12px; }
  .trust-item p { font-size: 9px; }
}
