/* まなクロ1on1 のページは、1on1 ロゴのオレンジ（#FF914D）を元にする（2026-10-22 西山さん）
   強調の文字は読みやすいよう少し濃いオレンジ、帯は白い文字が読める焼けたオレンジにする（NET-BASE の「どぎつい」の反省から） */
:root { --teal: #E2691C; }
.sec--teal { background: #B95B1F; }
.oo-who__note a { color: #B95B1F !important; } /* 小さい文字のリンクは読みやすい濃さに */

/* まなクロ1on1（/1on1/）だけの部品。クラス名は .oo- で始める。色・角丸・余白は DESIGN_RULES.md の約束から */

.oo-lead { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.oo-gap { margin-top: 96px; }

/* 1. ヒーロー：左にロゴ、右に短い説明 */
.oo-hero { padding: 56px 0 72px; }
.oo-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 56px; align-items: center; }
.oo-hero__logo { margin: 0; }
.oo-hero__logo img { width: 100%; max-width: 540px; }
.oo-hero__org { font-family: var(--head); font-weight: 800; color: var(--ink); font-size: 15px; letter-spacing: .04em; }
.oo-hero__facts { display: grid; gap: 2px; margin-top: 12px; font-family: var(--head); font-weight: 800; color: var(--ink); font-size: 17px; letter-spacing: .02em; }
.oo-hero__facts b { color: var(--teal); font-size: 24px; }
.oo-hero__sub { margin-top: 14px; font-size: 16px; }
.oo-hero .btns { margin-top: 24px; }

/* 2. とは？（青緑の帯。箱は使わない） */
.oo-three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 40px; margin-top: 44px; }
.oo-three h3 { margin-bottom: 8px; }

/* 3. 料金：大きな数字を2つ並べる */
.oo-prices { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 32px 96px; margin-top: 40px; }
.oo-prices__len { font-family: var(--head); font-weight: 800; color: var(--ink); font-size: 20px; line-height: 1; letter-spacing: .02em; }
.oo-prices__len b { font-family: "Quicksand", var(--head); font-weight: 700; font-size: 40px; margin-right: 2px; }
.oo-prices__yen { font-family: var(--head); font-weight: 800; color: var(--ink); font-size: 20px; line-height: 1; margin: 14px 0 12px; }
.oo-prices__yen small { font-size: 15px; margin-right: 8px; }
.oo-prices__yen b { font-family: "Quicksand", var(--head); font-weight: 700; color: var(--teal); font-size: 84px; letter-spacing: -.02em; margin-right: 2px; }
.oo-tax { text-align: center; font-size: 12px; margin-top: 20px; }
.oo-notes { display: grid; gap: 4px; justify-content: center; margin-top: 18px; font-weight: 500; color: var(--ink); }
.oo-notes li { position: relative; padding-left: 18px; }
.oo-notes li::before, .oo-who li::before { content: ""; position: absolute; left: 0; top: .78em; width: 8px; height: 8px; background: var(--teal); }

/* 対象となる方 */
.oo-who { display: grid; gap: 14px; max-width: 420px; margin: 32px auto 0; }
.oo-who li { position: relative; padding-left: 18px; font-weight: 500; color: var(--ink); font-size: 16px; }
.oo-who__note { max-width: 640px; margin: 24px auto 0; font-size: 14px; }
.oo-who__note a { color: var(--teal); font-weight: 700; }

/* 4. 担当：絵の下端を帯の下のふちに合わせる（帯の下の余白をなくす） */
.oo-staff { padding-bottom: 0; }
.oo-staff__grid { display: grid; grid-template-columns: 400px 1fr; gap: 24px 56px; align-items: end; }
.oo-staff__img { width: 400px; display: block; }
.oo-staff__txt { padding-bottom: 64px; align-self: center; }
.oo-staff__role { font-family: var(--head); font-weight: 800; font-size: 14px; letter-spacing: .06em; }
.oo-staff h2 { margin: 2px 0 12px; }

/* 5. 流れ */
.oo-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px 40px; margin-top: 36px; }
.oo-steps__n { display: block; font-family: "Quicksand", var(--head); font-weight: 700; color: var(--teal); font-size: 64px; line-height: 1; margin-bottom: 8px; }
.oo-steps h3 { margin-bottom: 6px; }

/* 6. 申込 */
.oo-join { text-align: center; }
.oo-join > p { margin: 16px auto 24px; }
.oo-join__note { font-size: 13px; margin-top: 16px !important; }

@media (max-width: 860px) {
  .oo-gap { margin-top: 72px; }
  .oo-hero { padding: 32px 0 56px; }
  .oo-hero__grid { grid-template-columns: 1fr; }
  .oo-hero__logo img { max-width: 420px; margin: 0 auto; }
  .oo-hero__sub { font-size: 15px; }
  .oo-lead { text-align: left; }
  .oo-three, .oo-steps { grid-template-columns: 1fr; }
  .oo-prices { grid-template-columns: 1fr 1fr; gap: 24px; }
  .oo-prices__len b { font-size: 32px; }
  .oo-prices__yen { font-size: 16px; }
  .oo-prices__yen small { display: block; margin-bottom: 6px; }
  .oo-prices__yen b { font-size: min(56px, 12vw); }
  .oo-prices p:last-child { font-size: 14px; }
  .oo-notes { justify-content: start; }
  .oo-staff__grid { grid-template-columns: 1fr; }
  .oo-staff__txt { padding-bottom: 0; order: -1; }
  .oo-staff__img { width: min(300px, 80%); margin: 0 auto; }
  .oo-steps__n { font-size: 52px; }
}

/* 担当のにっしーは、パソコンの絵をやめて、本人のイラストを丸く切り抜く（2026-10-22 西山さん） */
.oo-staff { padding-bottom: 64px; }
.oo-staff__grid { grid-template-columns: 280px 1fr; align-items: center; }
.oo-staff__img { width: 280px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #fff; }
.oo-staff__txt { padding-bottom: 0; }
@media (max-width: 860px) {
  .oo-staff__grid { grid-template-columns: 1fr; }
  .oo-staff__img { width: 200px; }
}