/* 2026-10-08 Claude: 無料登録を主役にした1枚目と、間延びの解消。演出(回るロゴ・流れる帯・語りかけ・背景の英字・色の面)は残す。 */

/* ---- 1枚目: 主ボタン1つ+文字リンク ---- */
.hero66__cta { gap: .5rem; }
.hero66__note, .hero66__trial-note { margin: 0; font-size: .8125rem; line-height: 1.6; color: var(--sc-muted, var(--md-on-surface-variant)); }
.hero66__trial {
  display: inline-flex; align-items: center; gap: .4rem; width: fit-content; min-height: 44px; margin-top: .35rem;
  font-weight: 800; font-size: .9375rem; color: var(--sc-on, var(--md-on-surface));
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em;
}
.hero66__trial svg { flex: none; transition: transform 240ms var(--ease-spring, ease); }
.hero66__trial:hover svg, .hero66__trial:focus-visible svg { transform: translateX(4px); }
.hero66__cta .store66 { margin-top: .4rem; }

@media (max-width: 48em) {
  /* ロゴは残し、ボタンが最初の画面に入る大きさに */
  .hero66 .visual { width: min(100%, 15rem, 29svh); max-width: min(100%, 15rem, 29svh); margin-inline: auto; }
  .hero66__inner { row-gap: .6rem; }
  .hero66__copy { gap: 1rem; }
  .hero66__lead { font-size: 1rem; line-height: 1.7; }
  .hero66__cta .btn-cta { min-height: 56px; }
}

/* ---- 語りかけ(橋渡し): 演出は残し、行間の空白を詰める ---- */
.yomu--bridge .yomu__screen { min-block-size: clamp(6.5rem, 17svh, 10rem); }
.yomu--bridge .yomu__in { padding-block: clamp(2rem, 1.5rem + 2vw, 3rem); row-gap: .5rem; }
.yomu--bridge .yomu__screen--key { margin-top: .5rem; }

/* ---- できることの直後の申し込み ---- */
.cta66 { padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.cta66__inner { gap: .6rem; }
.cta66__ripi { width: clamp(4rem, 3.5rem + 2vw, 5.5rem); }
.cta66__trial { font-weight: 800; font-size: .9375rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; min-height: 44px; display: inline-flex; align-items: center; }


/* ---- クチリピとは: 基本情報を細い線の一覧に、開発者の写真を小さく ---- */
@media (max-width: 48em) {
  .lo-facts { gap: 0; }
  .lo-facts > div { padding: .8rem 0; border-radius: 0; background: none; border-bottom: 1px solid var(--md-outline-variant); grid-template-columns: 6.5em minmax(0, 1fr); align-items: baseline; column-gap: .75rem; }
  .lo-facts > div:first-child { border-top: 1px solid var(--md-outline-variant); }
  .lo-founder__photo { width: min(62%, 15rem); }
}

/* ---- フッター: 縦の間隔を詰める ---- */
@media (max-width: 48em) {
  .site-footer { padding-block: 2.5rem 6rem; }
  .site-footer li a { min-height: 2.5rem; }
  .site-footer ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}

/* ---- 発音: 丸く切り抜いた画面を外したので、デモを1列で置く ---- */
.l66__demo--sound { grid-template-columns: minmax(0, 1fr); justify-items: center; }

/* ---- 続けたくなる仕組み: 実機の画面を丸ごと並べ、機能は文字で ---- */
.kr-phones { display: flex; gap: clamp(.75rem, .5rem + 1.5vw, 1.5rem); margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: .5rem; margin-inline: calc(var(--gutter, 1rem) * -1); padding-inline: var(--gutter, 1rem); }
.kr-phones::-webkit-scrollbar { display: none; }
.kr-phones img { flex: none; width: min(46%, 15rem); height: auto; border-radius: 22px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.45); scroll-snap-align: start; background: var(--md-surface); }
@media (min-width: 48em) { .kr-phones { justify-content: center; overflow: visible; } .kr-phones img { width: min(30%, 16rem); } .kr-phones img:nth-child(2) { transform: translateY(1.5rem); } }
.kr-more__grid { margin-top: clamp(1.75rem, 1.25rem + 2vw, 3rem); }
@media (max-width: 35.9375em) { .kr-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .kr-more__card { padding: .7rem; } .kr-more__visual { height: 8.5rem; margin-bottom: .35rem; } }

/* ---- 料金: スマホは「アプリ＋コーチ」を主役に、他の2プランは折りたたむ。カードは中身と条件を見た目で分ける ---- */
.lo-plans__more { display: none; }
.lo-plan--set { position: relative; isolation: isolate; overflow: hidden; }
.lo-plan--set::after {
  content: ""; position: absolute; z-index: -1; right: -2.5rem; bottom: -2.5rem; width: 12rem; height: 12rem; opacity: .14; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23FFD09A' stroke-width='14' stroke-linecap='round'%3E%3Cpath d='M26 92V70A26 26 0 0 1 52 44H148A26 26 0 0 1 174 70V92'/%3E%3Cpath d='M174 108V130A26 26 0 0 1 148 156H52A26 26 0 0 1 26 130V108'/%3E%3Crect x='62' y='80' width='76' height='40' rx='14' fill='%23FFD09A' stroke='none'/%3E%3C/svg%3E");
}
.lo-plan--set .plan-price .amount { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.lo-plan--set .lo-plan__sum { display: inline-block; width: fit-content; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); font-size: .8125rem; font-weight: 800; }
.lo-plan--set .plan-terms li:first-child { font-size: 1rem; font-weight: 800; line-height: 1.6; }
.lo-plan--set .plan-terms li:nth-child(n+2) { font-size: .78rem; font-weight: 500; line-height: 1.65; opacity: .82; list-style: none; padding-left: 0; }
.lo-plan--set .plan-terms li:nth-child(2) { margin-top: .5rem; padding-top: .75rem; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.lo-plan--set .plan-terms li:nth-child(n+2)::before { display: none; }

@media (max-width: 48em) {
  .lo-plans { display: flex; flex-direction: column; }
  .lo-plans .lo-plan--set { order: 1; }
  .lo-plans .lo-plans__more { order: 2; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 48px; margin-top: .25rem; border: 2px solid currentColor; border-radius: 999px; background: none; color: var(--md-on-surface); font: inherit; font-weight: 800; cursor: pointer; }
  .lo-plans__more svg { transition: transform 240ms var(--ease-spring, ease); }
  .lo-plans.is-open .lo-plans__more svg { transform: rotate(180deg); }
  .lo-plans .lo-plan--app { order: 3; } .lo-plans .lo-plan--coach { order: 4; } .lo-plans .referral-entry { order: 5; }
  .lo-plans:not(.is-open) .lo-plan--app, .lo-plans:not(.is-open) .lo-plan--coach { display: none; }
}

/* 2026-10-18 アプリ＋コーチの申込みボタンのすぐ下に置く条件 */
.lo-plan__cond { margin: 10px 0 0; font-size: .8125rem; line-height: 1.6; font-weight: 700; color: inherit; }