/*
  おうちフリ活（/ouchi-furikatsu・T-351）。お手本はサウナイキタイの「泊まってサウナ」（/tomatte）。
  2026-10-19 に PC 1280px・スマホ 390px で測った。

  PC   ページ全体が青。中央に幅 570 の柱、左右の余白は「左：ロゴ（幅180）」「右：ページ内の目次」が付いてくる
       柱の上 100。キービジュアル：上の写真 570×375・下の写真 570×375、まん中にロゴ 150（上下の写真の境目に重ねる）
       とは：青地・上下 80。小見出し 16px 太字・白・中央、ロゴ、本文 18px/43.2 太字・白・中央・段落の下 36
       できること：白地・上下 80。見出し 40px/56 太字・青・中央、添え 20px/36 太字 #333・上 10
                   項目（絵の見出し 450 幅）内側 左右 60・下 70、説明 18px/32.4 太字
       はじめよう：白地・上 20 下 60・左右 40。見出し 32px/52.8 太字・青、添え 18px/32.4 #333・上 20
                   手順の箱：#F1FAFF・角丸 40・内側 50・上 80。番号 60px 太字・青・右上に重ねる（上へ -30）
                   題 26px/39 太字・青・中央・下 10、本文 16px/28.8、絵 上 40
                   ボタン：幅 400・上下 26・角丸 16・18px 太字
       使い方：#F1FAFF・上 80 左右 50 下 50。白い箱 角丸 40・内側 50・下 40。STEP 12px 太字・青、題 26px/39 太字
       よくある質問：白地・上 80 左右 50 下 70。問 20px/33 太字・下 5、答 16px/26.4・下 30
       先生へ：#F9F9FA・上 90 左右 50 下 80。白い箱 角丸 40・内側 50・下 60。題 20px/33 太字
       シェア：白地・内側 50
       左右の目次：18px 太字・白・内側 10 0 10 20
  スマホ 柱は全幅。写真 390×257。とは の本文 14px。できること 見出し 26px。はじめよう 見出し 24px・内側 10 30 60
       手順の箱 角丸 30・内側 30、番号 36px、題 24px。使い方・先生への箱 角丸 20・内側 30／25
       左右のロゴと目次は出さない。下に固定のボタン（内側 10 20・ボタン 上下 14・角丸 8）
  色は原本の青 #104ABB・ボタン #0051E0 をつなぎばの青 #469BFF に置き換える（T-71）。
  写真・絵・画面の写しは素材待ち。いまは灰色の枠（.oh-ph）で場所だけ取っている。
*/

/* ───────── ヘッダー（このページは青・トップの T-162 と同じしくみ。@section('header_blue')） ─────────
   泊まってサウナもヘッダーの後ろまで青が続く（ヘッダーは透明・白い文字）。規則は top-page.css の tp-header--blue と同じ */
.tp-header--blue { background: transparent; margin-bottom: 0 !important; z-index: 20; }
.tp-header--blue nav a,
.tp-header--blue label,
.tp-header--blue button { color: #fff !important; }
.tp-header--blue [data-hd="login"], .tp-header--blue [data-hd="mypage"] { border-color: #fff !important; color: #fff !important; background: transparent !important; }
.tp-header--blue [data-hd="register"], .tp-header--blue [data-hd="logout"] { background: #fff !important; color: #469BFF !important; }

.oh { --oh-blue: #469BFF; --oh-shade: #3D87DE; --oh-pale: #F1FAFF; --oh-gray: #F9F9FA; --oh-ink: #111; --oh-sub: #333;
      position: relative; z-index: 1;
      margin-top: -80px;   /* ヘッダー（PC 80px）の後ろへ潜らせる */
      background: var(--oh-blue); color: var(--oh-ink); margin-bottom: -4rem; /* main の pb-16 を打ち消し、青を下まで続ける */ }

.oh-grid { display: grid; grid-template-columns: 1fr 570px 1fr; }
.oh-col { padding-top: 100px; min-width: 0; }   /* 泊まってサウナと同じ：ページの上端からキービジュアルまで 100 */

/* 左右の余白に付いてくるロゴと目次（PC だけ） */
.oh-side { position: relative; }
.oh-side__in { position: sticky; top: calc(50vh - 112px); display: flex; justify-content: center; padding-top: 100px; }
.oh-side__logo { width: 180px; height: auto; }
.oh-nav { list-style: none; margin: 0; padding: 0 0 0 60px; width: 100%; }
.oh-nav a { display: block; padding: 10px 0 10px 20px; color: #fff; font-size: 18px; line-height: 1.65; font-weight: 700; text-decoration: none; position: relative; }
.oh-nav a::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; }
.oh-nav a:hover { text-decoration: underline; }

/* 素材待ちの枠 */
.oh-ph { display: flex; align-items: center; justify-content: center; background: #D9D9D9; color: #777; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.6; }

/* キービジュアル */
.oh-kv { position: relative; }
.oh-kv__photo { height: 375px; overflow: hidden; background: #D9D9D9; }
.oh-kv__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }   /* 顔が上の3分の1にあるので、少し上を残す */
.oh-kv__logo { position: absolute; left: 50%; top: 375px; width: 150px; height: 150px; transform: translate(-50%, -50%); }
.oh-kv__logo img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .45)); }   /* 白いロゴが写真の白（机・ノート）と重なって読みにくいので、ロゴにだけ薄い影。写真には手を入れない */
.oh-kv h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* とは */
.oh-about { padding: 80px 0; color: #fff; text-align: center;
             box-shadow: inset 0 4px 144px 60px var(--oh-shade); }   /* 左右の青と同化しないように、内側の縁を濃くする（原本 rgb(14,64,162) を地の 0.87 倍で） */
.oh-about__head { margin: 0 0 20px; font-size: 16px; font-weight: 700; line-height: 1.65; }
.oh-about__head img { display: block; width: 160px; height: auto; margin: 16px auto 0; }
.oh-about p { margin: 0 0 36px; font-size: 18px; line-height: 2.4; font-weight: 700; }
.oh-about p:last-child { margin-bottom: 0; }

/* できること（原本「楽しみ方」）。見出しの1行目は横長のロゴ＋「で」、2行目「できること」。
   項目は絵（幅 450・カトウさん支給。絵の中に縦書きの見出しがある）。説明は絵の下に、絵の見出しの側に寄せて置く
   （原本は絵の下端に重ねるが、支給の絵は縦書きの見出しが下端まであるので、重ねずに下へ）。1・3 は左、2 は右 */
.oh-can { background: #fff; padding: 80px 0; text-align: center; }
.oh-can__h { margin: 0; color: var(--oh-blue); font-size: 40px; line-height: 1.4; font-weight: 700; }
.oh-can__h img { display: inline-block; height: 40px; width: auto; vertical-align: -6px; margin-right: 4px; }
.oh-can__sub { margin: 10px 0 0; color: var(--oh-sub); font-size: 20px; line-height: 1.8; font-weight: 700; }
.oh-can__list { margin: 40px 0 0; }
.oh-can__item { padding: 0 60px; margin: 0 0 70px; }
.oh-can__item:last-child { margin-bottom: 0; }
.oh-can__item h3 { margin: 0; line-height: 0; }
.oh-can__item h3 img { width: 450px; max-width: 100%; height: auto; display: inline-block; }
.oh-can__item p { width: 280px; margin: 16px 0 0; font-size: 18px; line-height: 1.8; font-weight: 700; text-align: left; }
.oh-can__item--r p { margin-left: auto; }

/* 共通の見出し（はじめよう・使い方・よくある質問・先生へ） */
.oh-head { text-align: center; }
.oh-head h2 { margin: 0; color: var(--oh-blue); font-size: 32px; line-height: 1.65; font-weight: 700; }
.oh-head p { margin: 20px 0 0; color: var(--oh-sub); font-size: 18px; line-height: 1.8; }

/* はじめよう（手順 01〜03） */
.oh-start { background: #fff; padding: 20px 40px 60px; }
.oh-step { position: relative; margin: 80px 0 0; padding: 50px; background: var(--oh-pale); border-radius: 40px; }
.oh-step__num { position: absolute; right: 50px; top: -30px; color: var(--oh-blue); font-size: 60px; line-height: 1; font-weight: 700; }
.oh-step h3 { margin: 0 0 10px; color: var(--oh-blue); font-size: 26px; line-height: 1.5; font-weight: 700; text-align: center; }
.oh-step p { margin: 0; font-size: 16px; line-height: 1.8; }
.oh-step .oh-ph { height: 310px; margin: 40px 0 0; border-radius: 12px; }
/* 画面の写し（スマホ幅 390 で撮ったもの・2倍の解像度） */
.oh-shot { display: block; width: 100%; height: auto; margin: 40px 0 0; border-radius: 12px; border: 1px solid #DCE6F2; background: #fff; }

.oh-btn { display: block; width: 400px; max-width: 100%; margin: 60px auto 0; padding: 26px 0; border-radius: 16px; background: var(--oh-blue); color: #fff; font-size: 18px; line-height: 1.65; font-weight: 700; text-align: center; text-decoration: none; }
.oh-btn:hover { opacity: .85; }

/* 使い方（保護者と子ども） */
.oh-howto { background: var(--oh-pale); padding: 80px 50px 50px; }
.oh-howto__list { margin: 50px 0 0; }
.oh-howto__item { margin: 0 0 40px; padding: 50px; background: #fff; border-radius: 40px; }
.oh-howto__item h3 { margin: 0 0 10px; font-size: 26px; line-height: 1.5; font-weight: 700; }
.oh-howto__item h3 span { display: block; margin: 0 0 5px; color: var(--oh-blue); font-size: 12px; line-height: 1.5; }
.oh-howto__item p { margin: 0; font-size: 16px; line-height: 1.8; }
.oh-howto__item .oh-ph { height: 260px; margin: 30px 0 0; border-radius: 12px; }
.oh-howto__item .oh-shot { margin-top: 30px; }

/* よくある質問 */
.oh-faq { background: #fff; padding: 80px 50px 70px; }
.oh-faq dl { margin: 50px 0 0; }
.oh-faq dt { margin: 0 0 5px; font-size: 20px; line-height: 1.65; font-weight: 700; }
.oh-faq dd { margin: 0 0 30px; font-size: 16px; line-height: 1.8; }
.oh-faq dd a { color: var(--oh-blue); }

/* 学校の先生へ */
.oh-teacher { background: var(--oh-gray); padding: 90px 50px 80px; }
.oh-teacher__list { margin: 50px 0 0; }
.oh-teacher__item { margin: 0 0 60px; padding: 50px; background: #fff; border-radius: 40px; }
.oh-teacher__item:last-child { margin-bottom: 0; }
.oh-teacher__item h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.65; font-weight: 700; }
.oh-teacher__item p { margin: 0; font-size: 16px; line-height: 1.8; }

/* シェア（つなぎばとは？ と同じボタン・ab-share の形） */
.oh-share { background: #fff; padding: 50px; text-align: center; }
.oh-share__h { margin: 0 0 20px; font-size: 14px; font-weight: 700; color: var(--oh-sub); }
.oh-share__list { display: flex; justify-content: center; gap: 8px; }
.oh-share__list a { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 1 140px; padding: 9px 0; border-radius: 4px; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.oh-share__list svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.oh-share__x { background: #000; }
.oh-share__fb { background: #1877F2; }
.oh-share__line { background: #06C755; }

/* スマホの下に固定のボタン */
.oh-fixed { display: none; }

@media (max-width: 1023px) {
    .oh-grid { grid-template-columns: 1fr; }
    .oh-side { display: none; }
    .oh { margin-top: -50px; }   /* スマホのヘッダーは 50px */
    .oh-col { padding-top: 60px; padding-bottom: 71px; }

    .oh-kv__photo { height: 257px; }
    .oh-kv__logo { top: 257px; width: 110px; height: 110px; }

    .oh-about { padding: 60px 30px; }
    .oh-about p { font-size: 14px; line-height: 2.2; margin-bottom: 26px; }

    .oh-about { box-shadow: inset 0 4px 60px 24px var(--oh-shade); }
    .oh-can { padding: 60px 0; }
    .oh-can__h { font-size: 26px; }
    .oh-can__h img { height: 26px; vertical-align: -4px; }
    .oh-can__sub { font-size: 16px; }
    .oh-can__list { margin-top: 30px; }
    .oh-can__item { padding: 0 30px; margin-bottom: 50px; }
    .oh-can__item p { width: auto; max-width: 280px; font-size: 15px; }
    .oh-step .oh-shot { margin-top: 24px; }
    .oh-howto__item .oh-shot { margin-top: 20px; }

    .oh-head h2 { font-size: 24px; }
    .oh-head p { font-size: 14px; margin-top: 12px; }

    .oh-start { padding: 10px 30px 60px; }
    .oh-step { margin-top: 50px; padding: 30px; border-radius: 30px; }
    .oh-step__num { right: 30px; top: -18px; font-size: 36px; }
    .oh-step h3 { font-size: 24px; }
    .oh-step p { font-size: 14px; }
    .oh-step .oh-ph { height: 220px; margin-top: 24px; }
    .oh-btn { margin-top: 40px; padding: 20px 0; font-size: 16px; }

    .oh-howto { padding: 60px 30px 30px; }
    .oh-howto__list { margin-top: 30px; }
    .oh-howto__item { padding: 30px; border-radius: 20px; margin-bottom: 30px; }
    .oh-howto__item h3 { font-size: 20px; }
    .oh-howto__item p { font-size: 14px; }
    .oh-howto__item .oh-ph { height: 180px; margin-top: 20px; }

    .oh-faq { padding: 60px 30px 40px; }
    .oh-faq dl { margin-top: 30px; }
    .oh-faq dt { font-size: 16px; }
    .oh-faq dd { font-size: 14px; margin-bottom: 24px; }

    .oh-teacher { padding: 60px 30px; }
    .oh-teacher__list { margin-top: 30px; }
    .oh-teacher__item { padding: 25px; border-radius: 20px; margin-bottom: 30px; }
    .oh-teacher__item h3 { font-size: 16px; }
    .oh-teacher__item p { font-size: 14px; }

    .oh-share { padding: 40px 30px; }

    .oh-fixed { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 20px; background: rgba(255,255,255,.95); box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
    .oh-fixed a { display: block; padding: 14px 0; border-radius: 8px; background: var(--oh-blue); color: #fff; font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; }
}