@charset "utf-8";
/* =========================================================
   スマートフォン用（767px以下）
   basetop.css の後に読み込み、767px以下のときだけ上書きする。
   PC表示には一切影響しない。
   ========================================================= */

/* スマホのメニューにだけ出す項目（PCでは左のバナーがあるので不要） */
.sp_only {
  display: none;
}

/* 改行用の span（.sp_block）が、見出しの「span に余白・背景を付ける」指定
   （h4.sora span など）を受けないようにする。PCの見た目を変えないため */
h3 span.sp_block,
h4 span.sp_block {
  position: static;
  padding: 0;
  background: none;
}

/* ハンバーガーボタンはPCでは非表示（スマホ時は下で表示） */
.sp_menu_btn {
  display: none;
}

@media (max-width: 767px) {

  /* iOSで明朝体にフォールバックするのを防ぐ（消さないこと） */
  html,
  body {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
    -webkit-text-size-adjust: 100%;
  }

  img {
    height: auto;
  }

  /* ---------- 全体の幅 ---------- */
  #wrapper01 {
    width: auto;
    padding: 0 16px;
  }

  #main {
    width: auto;
    float: none;
  }

  .box_800_center,
  .box_800,
  .box_600,
  .txt_black_line {
    width: auto;
  }

  .pb_20 {
    padding-bottom: 30px;
  }

  /* ---------- index：理念・支援方針 ---------- */
  .linen {
    display: inline-block;
    padding: 0.4em 1.2em;
  }

  /* ---------- index：児童発達／放課後デイのバナー（縦に並べる） ---------- */
  .box_800_center > a > img {
    display: block;
    margin: 20px auto;
  }

  /* ---------- index：TOPICS ---------- */
  .topic_box5-5 {
    margin: 2em 8px;
    padding: 2.5em 1em 0.2em;
  }

  .topititle {
    font-size: 1.2em;
  }

  .topicopy {
    margin-left: 0;
  }

  /* PC用の手動改行はスマホでは無視して自然に折り返す */
  .topicopy br {
    display: none;
  }

  /* 写真はスマホでは1列（縦並び） */
  .goods {
    padding-left: 0;
  }

  .goods li {
    width: 100%;
    margin: 0 0 12px;
  }

  /* ---------- privacy ---------- */
  #box_800 {
    width: auto;
    float: none;
  }

  #box_700 {
    width: auto;
  }

  /* 見出しの後ろの PC 用の空行を詰める */
  #box_800 + br,
  #box_800 + br + br {
    display: none;
  }

  #box_700 .txt_black_s {
    font-size: 14px;
  }

  /* 見出し：スマホだけ HTML 見出し（PCは画像） */
  .heading.sp_only {
    display: block;
    width: auto;
    margin: 20px 0;
    border-left-width: 16px;
    font-size: 1.1rem;
  }

  /* ---------- index：キャッチコピー帯 ---------- */
  .top_catch {
    width: auto;
    margin: 24px 0;
    padding: 10px 8px;
    font-size: 15px;
    line-height: 1.6;
  }

  /* ---------- index：下部リンク（縦に並べる） ---------- */
  .txt_black_right {
    text-align: left;
    font-size: 13px;
  }

  .txt_black_right .sep {
    display: none;
  }

  .txt_black_right a {
    display: block;
    padding: 0.5em 0;
  }

  /* =====================================================
     jidou.html / hokago.html（サイドバーありの旧レイアウト）
     ===================================================== */
  #wrapper {
    width: auto;
    padding: 0 12px;
  }

  /* 縦長バナー（stickyMojoで追従）はスマホでは出さない。
     上部メニューと下部リンクで代用 */
  #sidebar {
    display: none;
  }

  #main_jidou,
  #main_hokago,
  #box_800_center,
  #link,
  #footer,
  #footer_01 {
    width: auto;
    float: none;
  }

  /* ---------- ヘッダー（施設名・住所） ---------- */
  #box_800_center_01,
  #box_800_center_02 {
    width: auto;
    height: auto;
    padding-bottom: 12px;
  }

  .txt_title {
    font-size: 16px;
    padding-left: 12px;
    padding-right: 72px; /* 右上の MENU ボタンと重ならないように */
  }

  .txt_address01,
  .txt_address {
    width: auto;
    margin: 4px 0 0;
    padding: 0 12px;
    text-align: left;
  }

  /* ---------- 上部メニュー → ハンバーガーメニュー（js/sp-menu.js） ---------- */
  .sp_menu_btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1000;
    width: 56px;
    height: 56px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 10px;
    background-color: #566e23;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font: bold 10px/1 sans-serif;
    letter-spacing: 0.05em;
    cursor: pointer;
  }

  .sp_menu_btn.is-hokago {
    background-color: #1296cd;
  }

  /* 三本線（開いているときは×） */
  .sp_menu_icon,
  .sp_menu_icon::before,
  .sp_menu_icon::after {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #fff;
  }

  .sp_menu_icon {
    position: relative;
    margin: 4px 0 10px;
  }

  .sp_menu_icon::before,
  .sp_menu_icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: transform 0.2s;
  }

  .sp_menu_icon::before {
    top: -7px;
  }

  .sp_menu_icon::after {
    top: 7px;
  }

  .sp_menu_btn.is-open .sp_menu_icon {
    background-color: transparent;
  }

  .sp_menu_btn.is-open .sp_menu_icon::before {
    top: 0;
    transform: rotate(45deg);
  }

  .sp_menu_btn.is-open .sp_menu_icon::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* メニュー本体：閉じているときは非表示、開くとボタンの下に重ねて表示 */
  .menu_yokonarabe,
  .menu_yokonarabe_houkago {
    display: none;
    position: fixed;
    top: 76px;
    left: 12px;
    right: 12px;
    z-index: 999;
    width: auto;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding: 12px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .menu_yokonarabe.is-open,
  .menu_yokonarabe_houkago.is-open {
    display: block;
  }

  /* メニュー内は2列。jidou は最初の3つ（サービスの内容／タイムスケジュール／支援プログラム）を全幅 */
  .menu_yokonarabe nav ul,
  .menu_yokonarabe_houkago nav ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .menu_yokonarabe nav li,
  .menu_yokonarabe_houkago nav li {
    float: none;
    margin: 0;
  }

  .menu_yokonarabe nav li:nth-child(-n+3) {
    grid-column: 1 / -1;
  }

  /* hokago：発達支援室そらま芽／さくらん房は全幅、残りは2列 */
  .menu_yokonarabe_houkago nav li:nth-child(-n+2) {
    grid-column: 1 / -1;
  }

  .menu_yokonarabe nav li.sp_only,
  .menu_yokonarabe_houkago nav li.sp_only {
    display: block;
  }

  .menu_yokonarabe nav a,
  .menu_yokonarabe_houkago nav a {
    float: none;
    display: block;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    font-size: 14px;
  }

  .menu_yokonarabe nav span,
  .menu_yokonarabe_houkago nav span {
    display: block;
    height: 100%;
    box-sizing: border-box;
    padding: 12px 4px;
    text-align: center;
  }

  /* PCの左バナーの代わり（バナーと同じ色）。外枠は濃い色、内側の点線は白 */
  nav a.sp_link_top {
    background-color: #f39800;
    border-color: #c07800;
  }

  nav a.sp_link_hokago {
    background-color: #00a0de;
    border-color: #0079a8;
  }

  nav a.sp_link_jidou {
    background-color: #94c036;
    border-color: #566e23;
  }

  nav a.sp_link_top span,
  nav a.sp_link_hokago span,
  nav a.sp_link_jidou span {
    background-color: transparent;
    border-color: #fff;
  }

  /* 長い項目（放課後等デイサービスへ）は文字を少し小さく・字間を詰めて1行に収める。
     画面幅に応じて縮む（390px→13px / 320px→約11px） */
  nav a.sp_link_hokago span {
    white-space: nowrap;
    font-size: min(13px, 3.4vw);
    letter-spacing: -0.08em;
  }

  /* ---------- 本文 ---------- */
  #box_800_center > img,
  .box_800_center > img {
    display: block;
    margin: 16px auto;
  }

  /* jidou のロゴ画像は下半分（約80px）が白い余白なので、スマホでは詰める */
  #box_800_center > img[src$="logo_jidou01.gif"] {
    margin-bottom: -80px;
  }

  /* hokago のロゴ画像は上下に約55pxずつ白い余白があるので詰める */
  .box_800_center > img[src$="logo_hokago_1.gif"] {
    margin-top: -16px;
    margin-bottom: -40px;
  }

  /* 住所・地図のブロック（PCでは右寄せ） */
  .box_400 {
    width: auto;
    float: none;
    margin: 12px 0;
  }

  .box_400 > br {
    display: none;
  }

  /* 大見出し（hokago「同学年グループワーク」「個性に合わせたワーク」）：
     PCの字間 0.4em のままだと最後の1文字が2行目に落ちるので、字間を詰め、
     狭い画面では文字も小さくして1行に収める。
     14 = 10文字（先頭は1.5倍）＋字間0.2em×10（計12.5文字分）＋ 余裕。100vw - 40px = 見出しの幅 */
  h2,
  h2.sora,
  h2.saku {
    letter-spacing: 0.2em;
    font-size: min(24px, calc((100vw - 40px) / 14));
  }

  /* お知らせ枠：一番長い行（23文字）が枠の幅にぴったり収まるよう文字サイズを決める。
     枠（.oshirase）の内側の幅を基準にする（cqw = 枠の内側の幅の1%）。
     cqw 非対応の古いブラウザは、画面幅から計算した値（1行目の指定）を使う。
       100vw - 66px = 画面幅 - body余白(8px×2) - 左右余白(12px×2) - 枠線(5px×2) - 内側余白(8px×2)
     ※文言を変えて一番長い行の文字数が変わったら「23.5」を（文字数+0.5）に直す */
  .oshirase {
    width: auto;
    padding: 0.5em 8px;
    container-type: inline-size;
  }

  .oshirase p {
    font-size: min(18px, calc((100vw - 66px) / 23.5));
    font-size: min(18px, calc(100cqw / 23.5));
    letter-spacing: 0;
    white-space: nowrap;
  }

  .box_800.honbun {
    width: auto;
  }

  .heading.tag01,
  .heading.tag02,
  .heading.tag03,
  .heading.tag04 {
    width: auto;
    margin-top: 40px;
    margin-bottom: 30px;
    border-left-width: 16px;
    font-size: 1.15rem;
  }

  .pl_20 {
    padding-left: 1em;
  }

  /* 地図：枠の幅いっぱいに広げる（左右の余白が揃う） */
  iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 280px;
  }

  /* ---------- hokago：線つきの見出し（タイムスケジュール／…における支援プログラム など） ----------
     PCの左右の余白（65px／55px）を外し、文字を少し小さくして変な位置で折り返さないようにする */
  h3.sora,
  h3.saku,
  h4.sora,
  h4.saku {
    padding: 0;
  }

  /* inline-block：2行になっても白い背景で飾りの線を隠す */
  h3.sora > span,
  h3.saku > span,
  h4.sora > span,
  h4.saku > span {
    display: inline-block;
    padding: 0 0.6em;
    font-size: 1.05rem;
  }

  /* ---------- hokago：タイムスケジュール（.tt） ----------
     HTML側で行の種類ごとに span で囲み、字下げの全角スペースは .pc_only にしてある。
     時刻を左の列に置き、折り返した行も正しい位置から始める。 */
  .tt {
    display: block;
  }

  .tt + br {
    display: none;
  }

  .tt_time_row {
    padding-left: 3.6em;
    text-indent: -3.6em;
  }

  .tt_time {
    display: inline-block;
    width: 3em;
    margin-right: 0.6em;
    text-align: right;
    text-indent: 0;
  }

  .tt_act {
    padding-left: 3.6em;
  }

  .tt_item {
    padding-left: 4.6em;
    text-indent: -1em;
  }

  /* ---------- 本人支援5領域の表（見出しと本文を縦に積む） ---------- */
  table,
  table tbody,
  table tr,
  table th,
  table td {
    display: block;
    width: auto;
  }

  table,
  .table_mame,
  .table_saku {
    margin-top: 12px;
    font-size: 14px;
  }

  table th,
  .table_mame th,
  .table_saku th {
    width: auto;
    padding: 8px 10px;
  }

  table td {
    padding: 10px;
  }

  /* ---------- 自己評価結果などのPDFリンク（.pdf_list） ----------
     スマホでは書類名を小見出し（.pdf_group）に1回だけ出し、リンクは「令和N年」の
     ボタンを3列に並べる。リンク内の長い書類名は .pc_only なので非表示。 */
  .pdf_list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .pdf_list br {
    display: none;
  }

  .pdf_list .pdf_group {
    display: block;
    flex-basis: 100%;
    margin-top: 10px;
    padding-left: 1em;
    text-indent: -1em;
    font-weight: bold;
  }

  .pdf_list a {
    flex: 0 0 calc((100% - 16px) / 3);
    box-sizing: border-box;
    padding: 8px 0;
    border: 1px solid #90b83b;
    border-radius: 6px;
    background-color: #f4f9ea;
    color: #566e23;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
  }

  /* hokago：そらま芽は緑、さくらん房はピンク */
  .pdf_list.pdf_sora a {
    border-color: #14924a;
    background-color: #eef7f1;
    color: #0a4925;
  }

  .pdf_list.pdf_saku a {
    border-color: #e46392;
    background-color: #fdf0f5;
    color: #9f4566;
  }

  /* ---------- 箇条書きのぶら下げインデント ----------
     「・」「★」で始まる項目を <span class="li"> で囲んである（HTML側）。
     スマホでは1項目＝1ブロックにして、折り返した2行目以降を1文字下げる。
     PC用の手動改行（<br>）と、その後の字下げ用全角スペース（.pc_only）は消す。 */
  .li {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
  }

  .li br,
  .li + br,
  .li + .pc_only + br {
    display: none;
  }

  .pc_only {
    display: none;
  }

  /* hokago のピンク枠「家庭以外で安心して過ごせる場として／（居場所としての役割）」：
     語の途中で改行しないよう、<wbr /> の位置でだけ折り返す */
  .kakomibox18 center {
    word-break: keep-all;
  }

  /* スマホのときだけ改行させたい語句（例：見出しの「…における／支援プログラム」） */
  .sp_block {
    display: block;
  }

  /* 領域（健康・生活／運動・感覚…）ごとのブロックの間をあける */
  table tr + tr {
    margin-top: 16px;
  }

  /* （支援内容例）の小さい文字。0.8em だと 11px 程度になり読みにくい */
  table .fs_08 {
    font-size: 12px;
  }

  /* ---------- 下部リンク ---------- */
  /* 「++ おすすめサイトをご紹介します ++」：PC用の空行（<br>）を消して余白を詰める */
  #link + .pc_only + p {
    margin: 0 0 16px;
    padding-left: 0;
    font-size: min(16px, 4.4vw);
    text-align: center;
    white-space: nowrap;
  }

  #link + .pc_only + p br {
    display: none;
  }

  /* hokago：「リンク」見出しの中に「++ おすすめ… ++」が入っている */
  #link > br,
  #link > .box_600 br {
    display: none;
  }

  #link > .box_600 {
    display: block;
    margin: 0 0 16px;
    font-size: min(16px, 4.4vw);
    text-align: center;
    white-space: nowrap;
  }

  .box_600_aL {
    width: auto;
    padding-left: 0;
    margin-bottom: 24px;
    text-align: center;
  }

  /* 診療科名・施設名は単語の途中で改行しない（HTML側の「・」の後の <wbr> と <br> でだけ改行）。
     幅の狭い端末（320px程度）でも収まるよう文字を少し縮める */
  .box_600_aL strong {
    word-break: keep-all;
    font-size: min(14px, 4vw);
  }

  /* 四角の中身を上下左右中央に。PC用の位置合わせの <br> はスマホでは消す */
  .link_box01,
  .link_box03,
  .link_box04,
  .link_box05,
  .link_box06 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(50% - 16px);
    height: auto;
    min-height: 100px;
    box-sizing: border-box;
    padding: 8px 4px;
    vertical-align: top;
    font-size: 14px;
  }

  .link_box01 > br,
  .link_box03 > br,
  .link_box04 > br,
  .link_box05 > br,
  .link_box06 > br,
  .link_box01 > a > br:first-child,
  .link_box03 > a > br:first-child,
  .link_box04 > a > br:first-child,
  .link_box05 > a > br:first-child,
  .link_box06 > a > br:first-child {
    display: none;
  }

  .link_box01 > a,
  .link_box03 > a,
  .link_box04 > a,
  .link_box05 > a,
  .link_box06 > a {
    display: block;
    width: 100%;
  }

  #pageTop {
    right: 12px;
  }
}