@charset"utf-8";

/* ページ全体のはみ出しを防止 */
html, body {
   overflow-x: hidden;
   width: 100%;
   margin: 0;
   padding: 0;
}

html {
  scroll-behavior: smooth;
}

/*
===========================================================================================================
  Reset CSS
===========================================================================================================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
   margin:0;
   padding:0;
}

html{
   -webkit-text-size-adjust: 100%;
}

ul,ol {
   list-style-type: none;
}

img, input, select, textarea { 
   vertical-align: middle;
}

/*
===========================================================================================================
  共通スタイルの指定
===========================================================================================================
*/

/*要素のwidthとheightにpadding/borderを含める*/
*,
*::before,
*::after {
   box-sizing: border-box;
}

body {
   font-size: 16px;
   font-family:'Noto Sans JP',sans-serif;
   font-weight: normal;
   line-height:2;
   color: #3A2A20;
   letter-spacing: 0.05em;
   background-size: 100% auto;
   background-color: #FFFEF5;
}

img {
   max-width:100%;
   height:auto;
   vertical-align: bottom;
}

a {
   color: #3A2A20;/*リンクの文字色を青から文字色へ変更*/
   transition: 0.5s;/*0.5秒かけて色がふわっと変わる*/
}

a:hover {
   color: #EE8319;/*ホバーした際の文字色をオレンジへ変更*/
}

a:hover img {
   opacity: 0.7;
}

.inner {
   max-width: 1100px; /* コンテンツの最大幅 */
   margin: 0 auto;    /* 中央寄せ */
   padding: 0 32px;   /* スマホ時の左右の余白 */
   width: 100%;       /* 幅を100%にしておく */
}

/* --- 共通パーツ：黄色いボタン --- */
.btn-yellow {
   display: inline-block;
   background-color: #FCD41A; 
   color: #3A2A20;            /* 文字色はbodyと同じ濃い茶色 */
   font-size: 15px;
   padding: 5px 30px;        /* 上下の余白8px、左右30px */
   border-radius: 15px;       /* 完全に丸い角 */
   text-align: center;
   text-decoration: none;
/* 枠線をあらかじめ見えない設定にしておく */
   border: 1px solid transparent; /* 枠線を1px分確保しておくことで、ホバーした時に文字がズレない */
/* ホバー時の変化をなめらかにする魔法の1行 */
   transition: all 0.3s;
   cursor: pointer;
}

/* マウスを乗せた時（ホバー）の動き */
.btn-yellow:hover {
   background-color: transparent; /* 背景を透明に */
   color: #EE8319;               /* 文字色をオレンジ */
   border-color: #EE8319;       /* 枠線の色をオレンジ */
}

/* 各セクションタイトルの上の余白設定 */
.service,
.daily-schedule,
.top-flow,
.rhythm-training,
.program,
.daily-schedule-2,
.values, 
.reason,
.fun,
.closing,
.ceo-intro,
.staff-intro,
.price-section,      
.access-section {
   padding-top: 180px; /* 上の余白 */
}

/* 最後のセクションのフッター前の余白設定 */
.top-flow,
.staff-intro,
.daily-schedule-2,
.closing,
.price-section,      
.access-section,
#privacy.company-section,
#public-info.company-section {
   padding-bottom: 180px; /* フッター前の余白 */
}

/* ヘッダー直下の余白指定 */
.lower-page .our-mission,
.lower-page .support,
.lower-page .training,
.lower-page .flow-section,
.lower-page .company-section {
   padding-top: 240px; 
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) ------------------------------------------------------------------------------------------------------------------------------------------------- */

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ---------------------------------------------------------------------------------------------------------------------------------------- */
@media (max-width: 1024px) {
   /* 全体の共通設定：左右余白 */
   .inner {
      width: 100% !important;
      padding-left: 7% !important;
      padding-right: 7% !important;
      box-sizing: border-box;
   }
   
   /* ----  ご利用の流れ改行非表示 ---- */
   .pc-only {
      display: none;
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------------------------------------------------------------------------------------------------------- */
@media(max-width: 600px) {
   /* 本文全体のサイズを少し下げる */
   body {
      font-size: 15px; /* 16px → 15px */
      line-height: 1.8; /* 全体は1.8、大事なところは2.0に使い分け */
   }

   /* すべてのpタグに共通の余白を設定 */
    p {
      margin-bottom: 1.5em !important;
   }


   /* 各セクションのタイトル（日本語） */
   .section-title {
      font-size: 20px !important; /* 26px → 20px */
   }

   /* 英語の小見出し */
   .en-title {
      font-size: 10px !important;
      letter-spacing: 0.1em;
      margin-bottom: -1px !important; /* PC版の-6pxから-1pxへ変更 */
   }

   /* タイトルと中身の間の距離（全セクション共通） */
   .section-header {
      margin-bottom: 30px !important;
   }

   /* ボタン全体のサイズと文字サイズを調整 */
   .btn-yellow {
      font-size: 14px; /* 15px → 14px */
      padding: 8px 25px; /* 上下の余白を少し増やして「押しやすさ」をアップ */
   }

   /* 共通のセクション余白（上をギュッと詰める） */
   .service,
   .daily-schedule,
   .top-flow,
   .rhythm-training,
   .program,
   .daily-schedule-2,
   .values, 
   .reason,
   .fun,
   .closing,
   .ceo-intro,
   .staff-intro,
   .price-section,      
   .access-section {
      padding-top: 100px !important;
      padding-bottom: 0 !important;
   }

   /* 一番最初のセクションだけ、ヘッダーとの距離を調整 */
   .lower-page .our-mission,
   .lower-page .support,
   .lower-page .training,
   .lower-page .flow-section,
   .lower-page .company-section {
      padding-top: 130px !important;  /* 固定ヘッダー(70px) + 余白60px */
   }

   /* 一番最後のセクションだけ、フッターとの距離を作る */
   .top-flow,
   .staff-intro,  
   .daily-schedule-2,
   .closing,
   .price-section,      
   .access-section,
   #privacy.company-section,
   #public-info.company-section {
      padding-bottom: 100px !important; /* フッター前の余白 */
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
  ヘッダー
===========================================================================================
*/
header {
   width: 100%;
   position: fixed;   /* ★画面に固定 */
   top: 0;            /* 一番上に配置 */
   left: 0;
   z-index: 1000;     /* 他の要素より上にくるように */
   background-color: #FFFEF5; /* ★固定時は後ろが透けないよう背景色を指定 */
   box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 境目を少し分かりやすく（お好みで） */
}

.header-inner {
   max-width: 1100px;   /* コンテンツ幅 */
   margin: 0 auto;       /* 中央揃え */
   display: flex;
   justify-content: space-between; /* 左右に分ける */
   align-items: center;
   padding: 20px 32px;   /* 上下に 20px、左右に 32px の余白を作る */
}

/*h1 リセットコード*/
.header-logo h1 {
   margin: 0;
   padding: 0;
   font-size: 100%; /* 文字サイズの影響を受けないように */
   line-height: 1;
   display: flex;   /* 中の a タグと高さを合わせる */
   align-items: center;
}

.header-logo a {
   display: block;
   line-height: 0;  /* 画像の下に謎の隙間ができるのを防ぐ */
}

.header-logo {
   max-width: min(12em, 200px);　/*12emを目指すけど200pxは超えないでという命令 */
}

.header-right {
   display: flex;
   flex-direction: column; /* 電話番号・お問い合わせとナビを縦並び */
   align-items: flex-end;  /* 右端揃え */
   gap: 7px;
   width: max-content;      /* 横幅は中身に合わせる */
}

.tel-block {
   display: flex;  /* 電話番号とお問い合わせを横並び */
   gap: 20px;
   align-items: center;
}

.tel-link,
.contact-link {
   display: inline-block;
   padding: 0.6em 2em;
   border-radius: 30em;
   background-color: #FCD41A;
   text-decoration: none; /* 下線を消す */
   line-height: 1;
   font-size: 14px;
   font-weight: bold;
   white-space: nowrap;
   border: 1px solid transparent;
   transition: all 0.3s;
}

/* ホバーしたとき：文字と枠をオレンジ、背景を透明に */
.tel-link:hover,
.contact-link:hover {
   background-color: transparent; /* 背景を消す */
   border-color: #EE8319;         /* 枠線をオレンジに */
   color: #EE8319;                /* 文字をオレンジに */
}

/* aタグの中にある pタグの余計な余白をリセット */
.tel-link p,
.contact-link p {
   margin: 0;
   padding: 0;
}

.global-nav {
   display: flex;
   gap: 40px;
   margin-right: 0; /* 右端をリセット */
   padding-right: 0;
}

.global-nav li a {
   text-decoration: none;
   color: #3A2A20;
   font-weight: 500;
   font-size: 15px;
}

/* --- PC版も含めた共通の調整 --- */
.global-nav li a i.fa-instagram {
   font-size: 24px;          /* PCでのサイズ（お好みで20px〜28px） */
   color: #EE8319;           /* ロゴに合わせたオレンジ */
   vertical-align: middle;   /* 周りの文字と高さを合わせる */
   position: relative;
   top: -3px; /* マイナスを入れると上に位置が上がる */
   transition: transform 0.3s; /* ホバー時に動かすための準備 */
}

/* ホバーした時に少し大きくして「押せる感」を出す（PC用） */
.global-nav li a:hover i.fa-instagram {
   transform: scale(1.2);   /* 1.2倍にふわっと大きくなる */
}

.global-nav li:last-child {
   margin-right: 0; /* 最後のリスト項目の余計な余白を消す */
}

.global-nav li a:hover {
   color: #EE8319;
}

/* hbボタンの領域が余計な幅を取らないように設定 */
.button_wrap {
   width: 0;
   height: 0;
   overflow: hidden; /* 中身がはみ出さないように */
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------------------------------------------------------------------------------------------------------- */

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------------------------------------------------------------------------------------------------------- */
@media(max-width: 1024px) {
   .header-inner {
   /* 上下余白を 20px に増やして、高さを約 90px に */
      padding: 20px 32px !important; 
      max-height: 90px; 
   }

   .header-logo {
   /* ロゴも PC(12em) に近い 9em まで大きくして存在感を出す */
      max-width: 9em !important; 
   }

   .main-visual {
   /* ヘッダーが 90px になったので、ここも合わせる */
      padding-top: 90px !important; 
   }

   /* 以下、メニュー等の共通設定（変更なし） */
   .button_wrap { width: auto; height: auto; display: block; overflow: visible; position: relative; z-index: 100; }
   .hb-btn { display: flex; justify-content: center; align-items: center; width: 55px; height: 55px; background-color: #FCD41A !important; border-radius: 12px; border: none; cursor: pointer; }
   .hb-btn i { color: #ffffff !important; font-size: 24px; }
   .hb-btn .fa-times { display: none !important; }
   .header-inner.open .hb-btn { background-color: #ffffff !important; }
   .header-inner.open .hb-btn .fa-bars { display: none !important; }
   .header-inner.open .hb-btn .fa-times { display: inline-block !important; color: #FCD41A !important; }

   .header-right {
      display: flex; position: fixed; top: 0; right: -100%; width: 40% !important; height: 100vh;
      background-color: rgba(252, 212, 26, 0.9) !important; flex-direction: column; justify-content: flex-start;
      align-items: stretch !important; padding: 100px 20px 20px; transition: 0.4s; z-index: 50; backdrop-filter: blur(5px);
   }

   .header-inner.open .header-right { right: 0; }
   .global-nav { flex-direction: column; align-items: flex-start; gap: 0; width: 100% !important; order: 1; }
   .global-nav li { width: 100% !important; border-bottom: 1px solid rgba(255, 255, 255, 0.8); }
   .global-nav li a { color: #fff; font-size: 15px; font-weight: bold; display: block; padding: 15px 30px; }
   .tel-block { display: flex; flex-direction: column; align-items: stretch; gap: 15px; margin-top: 30px; margin-bottom: 30px; width: 100%; order: 2; }
   .tel-link, .contact-link { display: block; background-color: #EE8319; color: #fff !important; text-align: center; padding: 12px 0; border-radius: 30px; font-size: 13px; }
   .tel-link:hover, .contact-link:hover { background-color: transparent !important; border: 1px solid #ffffff !important; color: #ffffff !important; opacity: 1; }
   }
}


/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用) ----------------------------------------------------------------------------------------------------------------------------------------------------- */
@media(max-width: 600px) {
   /* 1. ハンバーガーボタン関係（ここは変更なし） */
   .button_wrap { width: auto; height: auto; display: block; overflow: visible; position: relative; z-index: 100; }
   .hb-btn { display: flex; justify-content: center; align-items: center; width: 50px !important; height: 50px !important; background-color: #FCD41A !important; border-radius: 12px; border: none; }
   .hb-btn i { color: #ffffff !important; font-size: 22px; }
   .hb-btn .fa-times { display: none !important; }
   .header-inner.open .hb-btn { background-color: #ffffff !important; }
   .header-inner.open .hb-btn .fa-bars { display: none !important; }
   .header-inner.open .hb-btn .fa-times { display: inline-block !important; color: #FCD41A !important; }

   /* 2. ヘッダー全体の高さ調整 */
   .header-inner { padding: 10px 20px !important; max-height: 70px !important; }
   .header-logo { max-width: 8.5em !important; }
   .header-logo img { max-height: 50px; width: auto; }

   /* 3. 右から出るメニューエリア */
   .header-right {
      position: fixed;
      top: 0;
      right: -100%;
      width: 65% !important; 
      height: 100vh;
      background-color: rgba(252, 212, 26, 0.95) !important;
      /* ↓ stretch にすることで、リストと下線が右端まで届きます */
      display: flex;
      flex-direction: column;
      align-items: stretch !important; 
      padding: 80px 20px 20px; /* 左右のpaddingを20pxに*/
      transition: 0.4s;
      z-index: 50;
      backdrop-filter: blur(5px);
      /* ↓ 中身が溢れた時にスクロールできるようにしておく */
      overflow-y: auto;
   }

   .header-inner.open .header-right { right: 0; }

   /* 4. メニュー文字と下線（左揃え・端まで線） */
   .global-nav {
      flex-direction: column;
      width: 100% !important;
      order: 1;
   }

   .global-nav li {
      width: 100% !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.8);
   }

   .global-nav li a {
      color: #fff !important;
      display: block !important;
      text-align: left !important;
      /* ★ここで「左だけ30px」を確定させます */
      padding: 15px 10px 15px 30px !important; 
   }

   .header-right .global-nav li a i.fa-instagram {
      font-size: 30px !important;
      vertical-align: middle;
   }

   /* 5. 電話・お問い合わせボタン（ここだけ中央に寄せる） */
   .tel-block {
      display: flex;
      flex-direction: column;
      width: 100%;
      order: 2;
      margin-top: 30px;
      gap: 15px;
      align-items: center; /* これでボタンが中央に来ます */
   }

   .header-right .tel-link, 
   .header-right .contact-link {
      width: 100%; /* ボタンの幅を少し調整 */
      max-width: 300px;
      background-color: #EE8319;
      color: #fff !important;
      padding: 15px 10px;
      border-radius: 30px;
      text-align: center;
      font-size: 13px;
      border: 1px solid transparent; 
   }

   .header-right .tel-link:active, 
   .header-right .contact-link:active {
      background-color: transparent !important;
      border-color: #ffffff !important;
      color: #ffffff !important;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
  フッター
===========================================================================================
*/
/* --- フッター全体設定 --- */
.footer {
   background-color: #F4EBD0;
   padding: 60px 0 15px;
   font-size: 15px;
}

.footer-inner {
   max-width: 960px;
   margin: 0 auto;
   padding: 0 20px;
}

/* ロゴのサイズ制限（独立したブロックにする） */
.footer-logo {
   margin-bottom: 25px; /* ロゴと会社名の間の距離 */
}

.footer-logo img {
   width: 100%;
   max-width: 160px; /* 最大160px */
   height: auto;
   display: block;
}

/* ★ 横並びのメインエリア（会社名〜カード） ★ */
.footer-main-content {
   display: flex;
   justify-content: space-between;
   align-items: flex-start; /* 会社名とカードの天面を揃える */
   gap: 30px;
   flex-wrap: wrap;
   margin-left: 10px;
}

/* --- 左側：会社情報エリア --- */
.footer-left-info {
   flex: 1;
   min-width: 300px;
}

.company-name {
   margin-bottom: 0px;
   font-size: 15px;
}

.service-name {
   font-size: 14px;
   line-height: 1.6;
   margin-bottom: 25px;
}

/* 営業時間・リンクのリスト */
.detail-list p {
   display: flex;
   align-items: center;
   margin-bottom: 0px;
   font-size: 14px;
}

/* 最後の行（自己評価の行）の下マージンは不要なので 0 にしておく */
.detail-list p:last-child {
   margin-bottom: 0;
}

.detail-list span:not(.separator) {
   display: inline-block;
   width: 80px; /* 「営業時間」「自己評価」の幅を固定 */
   flex-shrink: 0;
   margin-right: 15px;　/* 自己評価とポリシーの間のスキマ */
}

/* リンクホバー（色変化のみ） */
.detail-list a {
   color: inherit;
   text-decoration: none;
　　transition: opacity 0.3s
}

.detail-list a:hover {
   color: #EE8319;
   text-decoration: none;
}


/* --- 右側：白いカードエリア --- */
.contact-card {
   background-color: #fffef9;
   border: 1px solid #d1c8a8;
   border-radius: 30px;
   padding: 25px 35px; /* 上下25px 左右35pxでバランス調整 */
   display: flex;
   align-items: center;
   gap: 30px;
}

.contact-text {
   line-height: 1.8;
   font-size: 14px;
}

.tel-email {
   margin-top: 10px;
}

/* Google Mapボタン（沈み込む演出） */
.map-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background-color: #FCD41A;
   color: #3A2A20;
   text-decoration: none;
   font-weight: bold;
   padding: 8px 35px;   
   border-radius: 30px;
   box-shadow: 0 3px 0 #d4b886;
   transition: all 0.3s;
   cursor: pointer;
   font-size: 14px;
   white-space: nowrap;
}

.map-button:hover {
   background-color: #fdd835;
   transform: translateY(2px);
   box-shadow: 0 1px 0 #d9a000;
}

/* --- コピーライト --- */
.copyright {
   display: block;
   text-align: center;
   margin-top: 50px;
   font-size: 12px;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .footer-inner {
      padding: 0 30px; /* 左右に少し余裕を持たせる */
   }

  /* ロゴを中央に */
   .footer-logo {
      text-align: center;
      margin-bottom: 25px;
   }
  
   .footer-logo img {
      margin: 0 auto; /* 画像を中央寄せにするおまじない */
      max-width: 150px; /* ロゴを少し小ぶりに */
   }

  /* メインコンテンツを縦並び＆中央揃え */
   .footer-main-content {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 30px;
   }

  /* 左側情報エリアの調整 */
   .footer-left-info {
      display: flex;
      flex-direction: column;
      align-items: center; /* 子要素（会社名やリスト）を中央に集める */
      text-align: center;
   }
  
   .detail-list {
      display: inline-block; /* 幅を中身（文字）に合わせる */
      text-align: left;      /* ★ここが重要！中身の文字は左揃えに戻す */
      margin: 0 auto;        /* 中央に配置 */
   }

   .detail-list p {
      justify-content: flex-start; /* flexの並びも左詰めに固定 */
      width: 100%;
      white-space: nowrap; /* 折り返してズレるのを防ぐ（必要に応じて） */
   }

   /* ラベル幅（80px）を維持してピタッと揃わせる */
   .detail-list span:not(.separator) {
      display: inline-block;
      width: 80px;
      flex-shrink: 0;
   }

   /* 右側カードの調整 */
   .footer-right-card {
      width: 100%;
      max-width: 450px; /* 広がりすぎないように制限 */
   }

   .contact-card {
      flex-direction: column; /* カード内も縦に並べる */
      gap: 20px;
      padding: 30px 20px;
      text-align: center;
   }

   .contact-text {
      line-height: 1.9; /* telとemailの間隔 */
      font-size: 14px;
   }

   .map-button {
      width: 100%; /* スマホではボタンを大きくして押しやすくする */
      max-width: 240px;
   }
}


/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用) --------------------------------------------------- */
@media(max-width: 600px) {
   .footer {
      padding: 40px 0 20px; /* 上下の余白をコンパクトに */
   }

   /* ロゴをひと回り小さく */
   .footer-logo img {
      max-width: 120px; 
   }

   /* 文字サイズを全体的に調整 */
   .company-name {
      font-size: 13px; 
      margin-bottom: 3px;  
   }

   .service-name {
      font-size: 12px; 
      margin-bottom: 15px;
   }

   /* 営業時間などのリスト */
   .detail-list p {
      font-size: 12px; 
   }

   .detail-list span:not(.separator) {
      width: 70px; /* ラベル幅も少し狭める */
      margin-right: 10px;
   }

   /* 白いカードの中身（1024の設定を引き継ぎつつ微調整） */
   .contact-card {
      padding: 20px 10px; 
      gap: 15px;
    
   }

   .contact-text {
      font-size: 12px; 
      line-height: 1.7;
   }

   /* Google Mapボタンをスリムに */
   .map-button {
      padding: 6px 20px;
      font-size: 13px;
      max-width: 200px;
   }

   .copyright {
      margin-top: 40px;
      font-size: 10px; 
   }
/* --- 右側の余白（はみ出し）を解決する追加分 --- */
   .footer {
      overflow: hidden; /* 万が一のはみ出しをカット */
   }

   .footer-left-info {
      min-width: 0 !important; /* 1024pxで指定した300pxをリセット */
      width: 100% !important;
   }

   .detail-list p {
      /* ★ここが最重要：改行を許可して画面内に収める */
      white-space: normal !important; 
      flex-wrap: wrap; /* ラベルと中身が重なる場合は改行させる */
   }

   .contact-card {
      width: 100% !important; /* 1024pxの固定幅があれば解除 */
      box-sizing: border-box; /* paddingが幅を突き破らないようにする */
   }

}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */



/*
==========================================================================================
  ファーストビュー
==========================================================================================
*/
/* --- メインビジュアルの基本 --- */
.main-visual {
   width: 100%;
   /* ★固定ヘッダーの高さ分、上に余白を作る（PC版は約124px） */
   padding-top: 124px; 
}

.mv-inner {
   width: 100%;
   position: relative;
   overflow: hidden;
}

.mv-inner img {
   width: 100%;
   height: auto;
   display: block;
}

/* --- 画像エリアの中にある1100pxの器 --- */
.mv-container {
   max-width: 1100px;
   margin: 0 auto;
   padding: 0 32px; /* ヘッダーの余白と合わせる */
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   /* この中身（mv-copy）を自由な場所に配置できるようにする */
   pointer-events: none; /* 下の画像へのクリックを邪魔しないおまじない */
}

/* --- キャッチコピーの配置 --- */
.mv-copy {
   position: absolute;
   /* 画像の高さのどのあたりに置くか（画像に合わせて調整） */
   top: 75%;
   /* 左端（32pxの内側）にピッタリ合わせる */
   left: 32px; 
   transform: translateY(-50%);
}

.mv-copy h2 span {
   display: inline-block;
   background-color: rgba(252, 212, 26, 0.8); /* 背景の黄色半透明に */
   padding: 0.2em 0.3em 0.2em 1em; /* ★（上→右→下→左）の余白調整 */
   /* ★ clamp( 最小サイズ, 推奨サイズ, 最大サイズ ) */
   /* 画面幅（vw）に合わせて18pxから32pxの間で変化します */
   font-size: clamp(18px, 4vw, 32px); 
   line-height: 1.4;
   margin-bottom: 0.5em; /* 行間 */
   font-family: "Zen Maru Gothic", sans-serif;
}

/* 2行目だけ少し右にずらす */
.copy-line-2 {
   margin-left: 20px;
   /* 1行目との間隔をさらに詰めたい場合は、ここで調整 */
   margin-top: -2px; 
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .main-visual {
   /* ヘッダーが 90px になったので、ここも合わせる */
      padding-top: 90px; 
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用) --------------------------------------------------- */
@media(max-width: 600px) {
   .main-visual {
      padding-top: 70px !important;
   }

   .mv-copy h2 br {
      display: none !important;
   }

   .mv-copy {
      top: 80%; /* PC版の 75% を上書き */
      left: 20px;
   }

   .mv-copy h2 span {
      display: block;
      width: max-content;
      font-size: 18px;
      line-height: 1.0;
      padding: 0.3em 0.1em 0.3em 0.7em;
      margin-bottom: 10px; 
      background-color: rgba(252, 212, 26, 0.9);
   }

   .mv-copy h2 span.copy-line-2 {
      margin-left: 1em;
      margin-bottom: 0;
   }
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
  私たちの想い
===========================================================================================
*/
.our-mission {
   padding-top: 150px; 
   padding-bottom: 90px;
   text-align: center;
   /* --- ここからドット背景の設定 --- */
   background-color: #FFFEF5;
   background-image: radial-gradient(#F1E6C8 1.5px, transparent 1.5px); /* 点の色とサイズ */
   background-size: 30px 30px; /* 点の間隔 */
   background-position: center center;
}

/* セクションの見出しエリア */
.section-header {
   margin-bottom: 40px;
}

.en-title {
   display: block;
   color: #EE8319; /* オレンジ色のアクセント */
   font-size: 12px;
   font-family: "Quicksand", sans-serif; /* 英字フォントを指定 */
   font-weight: 600; 
   letter-spacing: 0.1em;
   margin-bottom: -6px; /* マイナスにすると、下の文字を引き寄せます */
}

.section-title {
   font-size: 26px;
   font-weight: 500;
}

/* ベージュの背景があるコンテンツエリア */
.mission-content {
   background-color: #ffffff;
   border-radius: 40px; 
   border: 1px solid #F4EBD0; 
   /* ★横幅を絞る（文章量に合わせて600px〜700pxで調整） */
   max-width: 600px; 
   margin: 0 auto;
   /* ★上下の余白を少し増やして、ゆったり感を持たせる */
   padding: 80px 40px; 
   box-shadow: 0 4px 15px rgba(0,0,0,0.02);
   /* 滲み装飾に必要 */
   position: relative;
}

/* 左上の歪な黄色の滲み */
.mission-content::before {
   content: "";
   position: absolute;
   top: -100px; /* 形が歪になる分、少し大きめにはみ出させる */
   left: -160px;
   width: 300px; /* サイズも少し大きくして、存在感を出す */
   height: 200px; /* 縦横比を変えて、さらに歪に */
   background-color: #FCD41A;
    
   /* ★ここが魔法：4つの角の丸みをバラバラにして、いびつな形を作る */
   border-radius: 80% 40% 70% 30% / 50% 70% 30% 50%;
    
   /* ぼかしと淡さはそのままキープ */
   filter: blur(100px); /* ぼかしを少し強めて、さらに滲ませる */
   opacity: 0.2; /* 少し淡くして、ドット背景に馴染ませる */
   z-index: 1;
   /* 少し傾けて動きを出す */
   transform: rotate(-25deg);
}

/* 右下の歪なオレンジの滲み */
.mission-content::after {
   content: "";
   position: absolute;
   bottom: -80px;
   right: -150px;
   width: 250px;
   height: 200px;
   background-color: #FCD41A;
    
   /* ★左上とは異なるバラバラな丸みにして、自然な渗透を表現 */
   border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%;
    
   filter: blur(80px); /* 右下はさらにぼかす */
   opacity: 0.2; /* さらに淡くして、奥行きを出す */
   z-index: 1;
   transform: rotate(15deg);
}

.mission-text p {
   margin-bottom: 35px !important;
   line-height: 2.2 !important;
   font-size: 17px;
}

/* 黄色のマーカー */
.marker-yellow {
   background: linear-gradient(transparent 40%, rgba(252, 212, 26, 0.4) 50%);
   border-radius: 5px;
   padding: 0 5px;
   margin: 0 2px;
}

/* ボタンの配置調整 */
.btn-wrap {
   margin-top: 20px;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
  }

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .our-mission {
      padding-top: 120px;
   }

   .our-mission .section-header {
      text-align: center;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
   }

   /* ボタンの中央揃え */
   .our-mission .btn-wrap {
      text-align: center;
      margin-top: 0; /* テキスト側の余白だけで調整するので0に */
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用) --------------------------------------------------- */
@media(max-width: 600px) {
   .our-mission {
      padding: 100px 0 50px;!important;
   }

   /* 白背景エリアの余白 */
   .mission-content {
      /* 角丸をPC版に合わせる（30pxくらいがスマホでは綺麗） */
      border-radius: 30px !important; 
      /* スマホ用の内側の余白を調整 */
      padding: 40px 25px !important;
   }

   .mission-text p {
   margin-bottom: 35px !important;
   font-size: 15px;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */



/*
===========================================================================================
  にこの支援について+ご利用の流れ
===========================================================================================
*/
/* 上との余白を特別調整 */
.service {
   padding-top: 90px;
}

/* 親要素：画像とテキストエリアの高さを強制的に揃える */
.service-inner,
.top-flow-inner {
   display: flex;
   align-items: stretch; 
   justify-content: center; 
   gap: 80px; /* 画像とテキストの間隔 */
   margin: 0 auto;
}

/* ★ご利用の流れだけ、左右を入れ替える */
.top-flow-inner {
   flex-direction: row-reverse;
}

/* 左側：画像の幅を固定する */
.service-img,
.top-flow-img {
   flex: 0 0 45%; /* 全体の45%の幅を持たせる */
   max-width: 500px;
}

.service-img img,
.top-flow-img img {
   border-radius: 20px; 
   border: 1px solid #3A2A20;
/* 3. 重厚感と透明感を両立したダブルシャドウ */
/* 枠線がある場合、影は少しだけ薄め（0.04）にすると、線が引き立ちます */
   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.06),0 15px 30px rgba(0, 0, 0, 0.06);
   display: block;
   width: 100%;
   height: auto;
/* 枠線の分、画像が少しだけ大きくならないように計算に含める */
   box-sizing: border-box;
}

/* 右側：テキストエリア（縦に並べて上下端を揃える） */
.service-content, 
.top-flow-content {
   flex: 1;
   max-width: 500px;
   display: flex;
   flex-direction: column; /* 上から下に並べる */
   justify-content: space-between; /* 最初（タイトル）と最後（ボタン）を上下端に飛ばす */
}

/* テキストエリア内の見出しの間隔を調整 */
.service-content .section-header,
.top-flow-content .section-header {
   text-align: left; /* タイトルも左寄せに */
}

/* テキスト部分：これ以上ボタンを下に押し下げないよう、余白を調整 */
.service-text,
.top-flow-text {
   flex-grow: 1; /* 真ん中の文章エリアが伸びることで、ボタンを一番下まで押し下げます */
   margin-bottom: 30px; /* 文章とボタンの間の最低限の余白 */
}

/* ボタン：勝手に中央寄せにならないよう左寄せを維持（必要あれば） */
.service-content .btn-wrap,
.top-flow-content .btn-wrap {
   margin-top: auto; /* 念のため、自力でも下に張り付くように設定 */
   text-align: right;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .service-inner,
   .top-flow-inner {
      flex-direction: column; /* 「にこの支援」と「ご利用の流れ」縦並び設定 */
      align-items: flex-start;
      gap: 0;
      padding: 0;
   }

   .service-img,
   .top-flow-img,
   .service-content,
   .top-flow-content {
      flex: 0 0 100%;
      max-width: 100%;
      width: 100%;
   }

   .service-img,
   .top-flow-img {
      order: 0;
      margin-bottom: 25px;
   }

   .service-text,
   .top-flow-text {
      margin-bottom: 20px;
      text-align: left;
   }

   .btn-wrap {
      text-align: right;
      width: 100%;
   }

   /* 4. 画像のデザイン（角丸20px・枠線・上品な影） */
   .service-img img,
   .top-flow-img img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 20px;
      border: 1px solid #3A2A20;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.06),0 10px 20px rgba(0, 0, 0, 0.06);
      box-sizing: border-box;
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用) --------------------------------------------------- */
@media(max-width: 600px) {
   /* 上との余白を特別調整 */
   .service {
      padding-top: 50px !important;
   }

   /* 画像の下に少し隙間を作る */
   .service-img,
   .top-flow-img {
      margin-bottom: 30px;
   }
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */




/*
===========================================================================================
  1日の流れ
===========================================================================================
*/
/* タイトルを中央に（innerの中にあるので個別設定） */
.daily-schedule .section-header {
   text-align: center;
   margin-bottom: 65px;
}

/* カードを横並びにする親要素 */
.schedule-card-box {
   display: flex;
   justify-content: center;
   gap: 90px; /* カード同士の間隔 */
   margin: 0 auto;
}

/* 前面の白いカード */
.schedule-card {
   position: relative;
   background-color: #ffffff; /* 前面を白 */
   border: 1px solid #3A2A20;
   border-radius: 40px;
   padding: 40px 50px 80px;
   width: 100%;
   max-width: 450px;
   flex: 1;
   transform-style: preserve-3d;
}

/* 背面の黄色い板 */
.schedule-card::before {
   content: "";
   position: absolute;
   top: -20px;    
   left: 20px;   
   width: 100%;
   height: 100%;
   background-color: #FCD41A; /* 背面を黄色 */
   border: 1px solid #3A2A20;
   border-radius: 40px;
   transform: translateZ(-1px); 
   z-index: -1;
}

/* a.m. / p.m. タイトル（h3） */
.schedule-card h3 {
   text-align: center;
   font-family: "Quicksand", sans-serif;
   font-size: 26px;
   font-weight: 600;
   color: #EE8319;
   margin-bottom: 40px;
}

/* --- タイムラインの中身 --- */
.timeline {
   display: flex;
   flex-direction: column;
   gap: 30px;
}

.item {
   display: flex;
   align-items: flex-start; /* 丸とテキストの上端を揃える */
   gap: 20px;
   position: relative;
}

/* 点線のライン（修正版） */
.item:not(:last-child)::after {
   content: "";
   position: absolute;
/* 1. 開始位置：丸の真ん中（32.5px）からスタートさせる */
   top: 32.5px; 
   left: 32.5px;
 transform: translateX(-50%);
/* 2. 長さ：項目の高さ100%分を丸ごと線にする */
   height: 100%; 
   width: 0;
   border-left: 2px dashed #F1E6C8;
   z-index: 1;/* 丸（z-index: 2）の下に潜り込むので重なりも綺麗 */
}

.time-circle {
   background-color: #FCD41A;
   border: 1px solid #3A2A20;
   width: 65px;
   height: 65px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: "Quicksand", sans-serif;
   font-weight: 600;
   font-size: 16px;
   flex-shrink: 0;
   z-index: 2;
}

.content h4 {
   font-size: 16px;
   font-weight: 600;
   margin: 10px 0 0 0; /* 丸の高さに合わせる調整 */
}

.content p {
   font-size: 14px;
   margin: 0;
   line-height: 1.6;
}

/* PC版：改行を隠して横並びにする */
.timeline .content h4 .sp-only {
   display: none; /* 改行を消す */
}

.timeline .content h4 span {
   display: inline; /* 横に並べる */
   font-size: 0.9em; /* 少しだけ小さくして馴染ませる */
   margin-left: 5px; /* 「順次送迎」との間に少し隙間を作る */
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .daily-schedule .section-header {
      text-align: center !important;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
   }

   /* スケジュールカードの調整 */
   .schedule-card-box {
      flex-direction: column;
      align-items: center;
      gap: 80px;
      margin-top: 40px !important;
   }

   .schedule-card {
      margin-left: auto;
      margin-right: auto;
      transform: translateX(-8px); /* 視覚的センター調整 */
      max-width: 90%;
   }

   /* スケジュール内の（）部分（span）の調整 */
   .timeline .content h4 {
      font-size: 14px !important; /* ベースの文字サイズ */
      line-height: 1.4;
   }

   .timeline .content h4 span {
      display: block;      /* 強制的に改行 */
      font-size: 0.85em;   /* 14pxより一回り小さく */
      font-weight: normal; /* 補足なので細くしてメリハリを出す */
      color: #5D4B3E;      /* メインより少しだけ薄い茶色 */
      margin-top: 4px;     /* 上の文字との隙間 */
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用) --------------------------------------------------- */
@media(max-width: 600px) {
   /*  1日の流れの中身 改行用  */
   .timeline .content h4 .sp-only {
      display: block;/* 600px以下で改行を出現させる */
   }

   .timeline .content h4 span {
      display: block;      /* 2行目として独立させる */
      margin-left: 0;      /* 横の余白を消す */
      margin-top: 4px;     /* 上下の隙間を作る */
      font-size: 0.85em;
      font-weight: normal;
      color: #5D4B3E;
   }

   /* 2. サークルを小さくする設定 */
   .schedule-card h3 {
      font-size: 20px !important;/* カード内の文字 */
      margin-bottom: 30px !important;
   }

   .time-circle {
      width: 55px !important;  /* 65px → 55px */
      height: 55px !important;
      font-size: 13px !important;
   }

   /* 3. サークルが小さくなった分、点線の位置も微調整 */
   .item:not(:last-child)::after {
      left: 27.5px !important; /* 55pxの半分 */
      top: 27.5px !important;
      height: calc(100% + 15px) !important; /* 次の丸にしっかり届かせる */
   }

   .content h4 {
      font-size: 14px !important;
   }

   .content p {
      font-size: 13px !important;
   }

   /* 黄色い板の飛び出し分（20px）を、箱の上マージンで相殺する */
   .schedule-card-box {
      margin-top: 50px !important; 
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */



/*
===========================================================================================
　①下層ページ (our.html)  
   私たちの想い
===========================================================================================
*/
/* bodyに.lower-pageがある時の白い枠だけを広くする */
.lower-page .mission-content {
/* 600px から 900pxに広げる */
   max-width: 900px; 
   padding: 120px 60px 90px; /* 上下の余白を増やし左右の余白も広げる */
   box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

/* --- 右上と左下の滲み装飾追加 --- */
.blur-top-right,
.blur-bottom-left {
   position: absolute;
   width: 280px;  /* 既存の::beforeなどとサイズを合わせます */
   height: 180px;
   background-color: #FCD41A;
   filter: blur(90px);
   opacity: 0.15; /* 4つ角全部にあるので、少しだけ薄めに設定 */
   z-index: 1;    /* テキストより後ろ、白背景より前 */
   pointer-events: none; /* テキスト選択を邪魔しない */
}

/* 3. 右上 */
.blur-top-right {
   top: -80px;
   right: -120px;
   border-radius: 50% 80% 40% 70% / 70% 50% 80% 40%;
   transform: rotate(20deg);
}

/* 4. 左下 */
.blur-bottom-left {
   bottom: -90px;
   left: -140px;
   border-radius: 70% 40% 80% 50% / 40% 80% 50% 70%;
   transform: rotate(-15deg);
}


/* ★左右の滲みがはみ出て予告スクロールが出ないよう追加！*/
.our-mission {
   overflow: hidden;
}

.mission-sub-title {
   font-size: 24px !important;
   font-weight: bold;
   margin-bottom: 40px;
}

.lower-page .mission-text p {
   margin-bottom: 40px !important;
   line-height: 1.8 !important;
   font-size: 16px;
}

/* 文字をオレンジに */
.text-highlight {
   color: #EE8319; /* 画像に近いオレンジ色 */
   font-weight: bold;
}

/* 下層ページの bold-text クラスを確実に太く・大きくする */
.lower-page .bold-text {
   display: inline-block; /* 文字の幅に合わせて線を引くために必要 */
   font-size: 20px !important; /* お好みのサイズに調整 */
   font-weight: bold;
   line-height: 1.5;
   margin: 40px 0; /* 上下の余白を作って目立たせる */
   /* トップページと同じマーカー（下線） */
   background: linear-gradient(transparent 55%, rgba(252, 212, 26, 0.4) 50%);
   border-radius: 5px;
   padding: 0 5px;
   margin: 0 2px;
}

/* 特定の段落の余白を狭くする */
.lower-page .mission-text p.mb-sm {
   margin-bottom: 10px !important; /* 35pxから10pxにギュッと縮める */
}

/* --- 下の段落全体の設定 --- */
.lower-page .mission-footer {
   font-weight: normal; /* ★全体は普通の太さに戻す */
   font-size: 17px;    /* 標準的なサイズに */
   line-height: 2.2;
   text-align: center;
   color: #333;        /* 文字色を少し落ち着かせる */
}

/* ★ここだけ太字にする */
.lower-page .footer-bold {
   font-weight: bold;
   font-size: 20px;    /* 強調したいので少し大きく */
   display: inline-block;
   margin-top: 10px;   /* 上の行との間隔を少し調整 */
}

/* じぶん色の装飾（オレンジ色） */
.lower-page .kenten {
   position: relative;
   display: inline-block;
   color: #EE8319; 
   padding: 0 4px;
}

/* じぶん色の上に太いドットをつける */
.kenten {
   position: relative;
   display: inline-block; /* ドットを文字の上に正しく配置するために必須 */
   text-emphasis: none;    /* 標準のドットが出ていれば消す */
   -webkit-text-emphasis: none;
}

/* 擬似要素を使って太いドットを作る */
.kenten::before {
   content: "● ● ● ●"; /* 文字数分の丸（●）を入れる */
   position: absolute;
   top: -1.3em;        /* 文字の上の位置（好みで-1.0em〜-1.5emで調整） */
   left: 52%;
   transform: translateX(-50%); /* 常に中央に配置 */
   width: 100%;
   text-align: center;
   color: #FCD41A;
   font-size: 8px;     /* ここを大きくするとドットが太くなる */
   letter-spacing: 0.75em; /* 文字の間隔に合うように調整 */
   white-space: nowrap;
}



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}
/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   /* 文字の設定（inlineにしてマーカーを文字に合わせる） */
    .lower-page .bold-text {
      display: inline !important;
      background: linear-gradient(transparent 55%, rgba(252, 212, 26, 0.4) 0%);
      padding: 0 5px;
      box-decoration-break: clone;
      -webkit-box-decoration-break: clone;
    }

   /* ★段落自体の余白を設定（これで解決！） */
   .lower-page p.mb-bold {
      margin-bottom: 40px !important; /* 下の行との距離をここで強制的に作ります */
   }

   /* 滲みの調整（1024pxでも4つ角を維持する場合のサイズ微調整） */
   .blur-top-right,
   .blur-bottom-left,
   .lower-page .mission-content::before,
   .lower-page .mission-content::after {
      width: 220px !important;
      height: 150px !important;
      filter: blur(70px) !important;
   }

   /* 白い枠自体の横幅を調整 */
   .lower-page .mission-content {
      max-width: 90% !important; /* 画面端に寄りすぎないよう調整 */
      padding: 120px 60px 50px !important; /* 内側の余白は維持 */
   }

   .mission-sub-title {
      font-size: 22px !important;
      margin-top: -50px;
   }

   .lower-page .bold-text,
   .lower-page .footer-bold {
      font-size: 19px !important;
   }

}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用) --------------------------------------------------- */
@media(max-width: 600px) {
   /* 白い枠自体の横幅を調整 */
   .lower-page .mission-content {
      max-width: 90% !important; /* 画面端に寄りすぎないよう調整 */
      padding: 110px 40px 30px !important; /* 内側の余白は維持 */
   }

   /* --- にこが大切にしていること 文字サイズ設定 --- */
   .mission-sub-title {
      font-size: 18px !important;
      margin-top: -60px;
      margin-bottom: 40px;
   }

   .lower-page .mission-text p {
      margin-bottom: 40px !important;
      line-height: 1.8 !important;
      font-size: 15px;
   }

   .lower-page .bold-text,
   .lower-page .footer-bold {
      font-size: 17px !important;
   }

   /* 特定の段落の余白を狭くする */
   .lower-page .mission-text p.mb-sm {
      margin-bottom: 25px !important; /* 35pxから10pxにギュッと縮める */
   }

   /* 文章の中にある強制改行（br）を無効化する */
   .lower-page .mission-text br {
      display: none;
   }

   /* ＼ と ／ を非表示にする */
   .mission-sub-title .slashes {
      display: none !important;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */



/*
===========================================================================================
ceo紹介
===========================================================================================
*/
/* 1. セクション全体のヘッダー調整 */
.ceo-intro .section-header {
   text-align: center;    /* タイトルを中央寄せ */
   margin-bottom: 65px;   /* カードとの間の余白 */
}

.ceo-intro {
   padding-top: 90px;
   overflow: visible;     /* 黄色い板のハミ出しを許可 */
}

/* 2. カード本体 */
.ceo-card {
   position: relative;
   background-color: #ffffff !important;
   border: 1px solid #3A2A20;
   border-radius: 80px;
   padding: 80px 10%;
   max-width: 950px;
   margin: 0 auto;
   /* 重なりの3D設定 */
   transform-style: preserve-3d;
   z-index: 1;
   transform: translateX(-9px); /*視覚的な中心を補正する*/
}

/* 3. 背面の黄色い板（右上にハミ出す設定） */
.ceo-card::before {
   content: "";
   position: absolute;
   top: -25px;   /* 上にハミ出す（マイナス） */
   left: 25px;   /* 右にハミ出す（プラス） */
   width: 100%;
   height: 100%;
   background-color: #FCD41A !important;
   border: 1px solid #3A2A20;
   border-radius: 80px;
   transform: translateZ(-1px);
   z-index: -1;
}

/* 4. レイアウト（画像が左、テキストが右の順） */
.ceo-flex {
   display: flex;
   justify-content: space-between;
   align-items: center; 
   gap: 30px;               /* marginの代わりにgapを使うと左右の入れ替えに強いです */
}

/* 5. 右側：テキストエリア（旧：左側） */
.ceo-info {
   flex: 1;
   margin-left: 0;          /* 左マージンをリセット */
}

/* 肩書き */
.ceo-title {
   font-size: 14px;
   line-height: 1.5; /*行間をあえて狭く*/
   font-weight: 500;
   text-align: left;
}

/* 名前とルビ */
.ceo-name {
   font-size: 28px;
   font-weight: bold;
   color: #EE8319; /* にこのオレンジ */
   margin-bottom: 25px;
   display: flex;
   flex-direction: row;    /* 縦並び（column）になっていたら row に戻す */
   align-items: baseline;  /* 名前とルビの下のラインを揃える（これ重要！） */
   gap: 15px;              /* 名前とルビの間の隙間 */
   flex-wrap: nowrap;      /* 勝手に改行させない */
}

.ceo-name .ruby {
   font-size: 15px;
   white-space: nowrap;     /* ふりがな自体の改行も防ぐ */
}

/* 6.左側：画像エリア（旧：右側） */
.ceo-profile-side {         /* クラス名をHTMLに合わせる */
   flex: 0 0 200px;
   width: auto;
   min-width: 280px; /* ★ここを「名前とルビが1行で収まる最低幅」に設定します */
   text-align: center;        /* 画像の幅をしっかり固定 */
}

.ceo-image {
   width: 100%;
   max-width: 180px;   /* 画像が大きすぎないよう制限 */
   margin-bottom: 15px;
}

.ceo-image img {
   width: 100%;
   height: auto;
   border-radius: 20px;
}

/* メッセージ文 */
.ceo-message {
   font-size: 18px;
   font-weight: bold;
   line-height: 1.7; /* ひと塊りに見えるようにあえて行間を詰める */
   margin-bottom: 35px;
}

/* 7. 経歴リスト（横並び・余白リセット・崩れ修正） */
.ceo-history {
   display: flex;
   flex-direction: column;
   gap: 15px;
   margin: 0;
   padding: 0;     /* 不要なパディングを完全に消す */
}

.history-item {
   display: flex;
   align-items: flex-start; /* 上端で揃える */
   margin: 0;      /* ★不要なマージンを完全に消す */
   padding: 0;     /* ★不要なパディングを完全に消す */
}

.history-item dt {
   width: 110px;      /* 年度の幅を固定 */
   flex-shrink: 0;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.6;  /* ddと高さを合わせる */
   display: flex;
   flex-direction: column;
   align-items: flex-start;
/* ブラウザが勝手につける余白を0にする */
   margin: 0;
   padding: 0;
}

/* 「〜」の縦回転・位置微調整 */
.history-item dt span {
   display: inline-block;
   transform: rotate(90deg);
   margin-left: 30px;   /* 文字の真下に来るよう調整 */
   margin-top: 8px;   /* 行間の隙間を詰める */
   line-height: 1;
   width: auto;       /* 自動幅 */
   height: auto;      /* 自動高さ */
}

.history-item dd {
   flex: 1;
   margin: 0;
   font-size: 15px;
   line-height: 1.6;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   /* 1. 横並び(flex)を縦並びに切り替え */
   .ceo-flex {
      flex-direction: column; 
      align-items: center;
      gap: 5px; /* 画像とテキストの間の隙間 */
   }

   /* 2. プロフィールエリア全体の調整 */
   .ceo-profile-side {
      width: 100% !important; /* 幅をいっぱいまで使い、中身を中央に寄せる */
      display: flex;          /* ★中身（画像や役職）もまとめて中央に寄せる準備 */
      flex-direction: column; /* 役職などを縦並びにする */
      align-items: center;    /* ★中身をまとめて水平中央に寄せる */
      margin-bottom: 20px;    /* 画像と役職の間隔 */
   }

   /* 3. ★ここが最重要：画像を包む要素を中央に配置する設定 ★ */
   .ceo-image {
      width: 100%;            /* 親（.ceo-profile-side）の幅に合わせる */
      display: flex;          /* ★中の画像を中央に配置する準備 */
      justify-content: center; /* ★画像を水平中央に配置 */
      margin-left: auto;      /* ★マージンを自動調整して完全に中央に置く */
      margin-right: auto;     /* ★マージンを自動調整して完全に中央に置く */
      margin-bottom: 20px;    /* 画像と役職の間隔 */
   }

   /* 画像自体の見た目のサイズ（ max-width はPC版の指定を維持、不要なら削除OK） */
   .ceo-image img {
      width: 100%;
      max-width: 150px;   /* 画像を180px→150pxへ小さく */
      height: auto;
   }

   /* 4. 左側・右側のエリアそれぞれの幅をリセット */
   .ceo-profile-side,
   .ceo-info {
      width: 100% !important;
      margin: 0 !important;
      /* ★追加：中身を中央に並べるための設定 */
      display: flex;
      flex-direction: column;
      align-items: center;    /* これで画像やメッセージが中央に来ます */
      text-align: center;     /* テキスト自体のセンター寄せ */
   }

   /* 5. 肩書き・名前・メッセージの中央寄せ*/
   .ceo-title,
   .ceo-name,
   .ceo-message {
      text-align: center;     /* テキスト自体を中央寄せ */
      width: 100%;            /* 横幅を広げて中央を保つ */
   }
   
   .ceo-message {
      font-size: 16px;
      margin-bottom: 45px;　 /* メッセージと経歴の間隔*/
   }

   .ceo-title,
   .ceo-name .ruby {
      font-size: 12px;
   }

   .ceo-name {
      justify-content: center; /* 名前の横並びを中央に寄せる */
      margin: 10px auto;
      font-size: 22px;
   }

   /* 6. 経歴リスト（左揃えを維持しつつ、リスト全体を中央に寄せる） */
   .ceo-history {
      width: fit-content;     /* ★中身の幅にギュッと縮める */
      margin: 0 auto;         /* 念のための中央寄せ */
      text-align: left;       /* ★ここだけ左揃えに戻す（重要！） */
      display: block;         /* 横並びを解除 */
   }

   /* リストの各項目 */
   .history-item {
      display: flex;
      margin-bottom: 10px;
   }

   /* CEO紹介カードの微調整 --- */
   .ceo-card {
      padding: 40px 5%;
      border-radius: 60px; /* 角丸をスマホ用に少し緩く */
   }

   /* 背面の黄色い板（ハミ出し具合をスマホ用に微調整） */
   .ceo-card::before {
      top: -15px;  /* ハミ出しを少し控えめに */
      left: 15px;
      border-radius: 60px; /* カード本体の丸みに合わせる */
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用) --------------------------------------------------- */
@media(max-width: 600px) {
   /* 1. カード自体の上・左右の余白を少し広げる */
   .ceo-intro {
      padding: 50px 10px 0 !important;
   }

   /* 2. 経歴リスト全体の調整 */
   .ceo-history {
      width: 100%;       /* 幅を広げて、文字が詰まるのを防ぐ */
      max-width: 320px;  /* 広がりすぎないようストッパーをかける */
      margin: 0 auto;
      gap: 12px;         /* 項目同士の縦の距離を少し詰める（全体をコンパクトに） */
   }

   /* 3. 各項目の行間と文字の調整 */
   .history-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;        /* 日付と内容の間の距離 */
      line-height: 1.5; /* ★行間を少し詰めると、情報の塊として見やすくなります */
      margin-bottom: 8px; 
   }

   /* 日付部分 */
   .history-item dt {
      flex-shrink: 0;
      width: 5.5em;     /* 日付の幅を固定して、右側の文字がガタつかないようにする */
      font-weight: bold;
      font-size: 13px;  /* 日付だけ少し小さくしてメリハリをつける */
   }

   /* 内容部分 */
   .history-item dd {
      font-size: 14px;  /* 内容は14px程度にするとスッキリします */
      margin: 0;
   }

   /* 黄色い板の飛び出し分（20px）を、箱の上マージンで相殺する */
   .ceo-card {
      margin-top: 50px !important;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */



/*
===========================================================================================
スタッフ紹介
===========================================================================================
*/
/* --- 改行コントロール --- */
/* PC版では改行を「非表示」にする */
.sp-only {
   display: none;
}

/* スタッフ紹介のヘッダー（タイトル）を中央寄せ */
.staff-intro .section-header {
   text-align: center;
   margin-bottom: 50px; /* タイトルとリード文の間の余白 */
}



.staff-lead {
   text-align: center;
   margin-top: -20px;
   margin-bottom: 60px;
   padding: 0 5%;
}

/* --- 親要素（グリッド設定） --- */
.staff-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr); /* PC時は2列 */
   gap: 40px 30px;
   max-width: 1000px;
   margin: 0 auto;
}

/* --- カード本体 --- */
.staff-card {
   display: flex;
   background: #fff;
   border: 1px solid #3A2A20;
   border-radius: 40px;
   padding: 35px 30px; /* 上下　左右の余白 */
   gap: 20px;
/* ★画像とテキストの基本位置は「中央」に戻す */
   align-items: center; 
   box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}

/* スタッフ画像 */
.staff-image {
   width: 140px; /* 横並び時の画像サイズ */
   flex-shrink: 0;
}

.staff-image img {
   width: 100%;
   height: auto;
   border-radius: 20px; 
}

/* スタッフ情報 */
.staff-info {
   flex: 1;
   margin-top: 15px;
}

.staff-role {
   font-size: 14px;
   font-weight: bold;
   color: #EE8319;
   margin-bottom: 6px;
}

.staff-history {
   font-size: 12px;
   color: #666;
   margin-bottom: 12px;
}

.staff-message {
   font-size: 14px;
   line-height: 1.7; /* ひと塊りに見えるように行間少し詰める */
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   /* 改行を「表示」にする */
   .sp-only {
      display: inline;
   }
   /* グリッドを1列に変更 */
   .staff-list {
      grid-template-columns: 1fr; /* ここで1列に強制！ */
      gap: 50px; /* カード同士の縦の隙間を少し広げる */
      max-width: 700px; /* 1列の時に横に広がりすぎないよう制限（お好みで） */
      margin: 0 auto;
   }

   .staff-card {
   /* ここではまだ flex-direction: row (横並び) のまま */
      align-items: center; /* 上揃えにすると綺麗です */
      justify-content: center; /* カード内の要素を中央に寄せる */
      padding: 40px;
      gap: 40px; /* 画像とテキストの間の距離を少し広げる */
   }

   .staff-info {
      margin-top: 0;
      text-align: left; /* テキスト自体は左寄せのままが読みやすいです */
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用) --------------------------------------------------- */
@media(max-width: 600px) {
   /* 改行を「非表示」にする */
   .sp-only {
      display: none;
   }

   .staff-list {
      max-width: 100%;           /* スマホ画面いっぱいに使う */
      padding: 0 15px;           /* 左右に少し余白を作る（画面にピタッとくっつかないように） */
      gap: 30px;                 /* カード同士の縦の隙間を少し詰める */
   }

   /* 子要素（カード本体）：中身を縦並びに切り替え！ */
   .staff-card {
      flex-direction: column;    /* ★横並びから縦並びに変更 */
      align-items: center;       /* ★中身を中央寄せにする */
      text-align: center;        /* ★テキストも中央寄せ */
      padding: 30px 35px;
      gap:20px; /* 画像とテキストの間隔 */
   }

   /* 画像の調整 */
   .staff-image {
      width: 120px;
   }

   /* テキストの調整 */
   .staff-info {
      margin-top: 0;
      text-align: center;
   }

   .staff-lead {
      margin-top: 30px;
      margin-bottom: 40px !important;
   }

}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */



/*
=====================================================================================================
②下層ページ (support.html)  
にこの支援について
=====================================================================================================
*/
/* タイトルとメインビジュアルの間の距離 */
.support .section-header {
   margin-bottom: 40px;
   text-align: center;
}

/* メインビジュアル（黄色い板の重なり） */
.support-visual-wrap {
   position: relative;
   max-width: 972px; /* 写真のサイズに合わせて調整 */
   margin: 0 auto 100px; /* 100pxはリード文（テキスト）との距離 */
   /* ★魔法の1行：右側に、板のはみ出し分と同じ25pxの余白を作る */
   padding-left: 25px !important; 
   padding-right: 0 !important;
   box-sizing: content-box !important; /* paddingを外側に持たせる */
   display: block;
}

/* 前面の画像エリア */
.support-visual {
   position: relative;
   border: 1px solid #3A2A20;
   border-radius: 30px;
   overflow: hidden; /* 画像を角丸に収める */
   z-index: 2;
   width: 100%;
}

.support-visual img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* 箱いっぱいに広げる */
}

/* 背面の黄色い板 */
.support-visual-wrap::before {
   content: "";
   position: absolute;
   top: 25px;
   left: 0px; /* 下に飛び出させる */
   /* ★ ここが重要！幅を100%から「飛び出させたい分(25px)」引きます */
   /* これで、右端が画像より25px内側に引っ込みます */
   width: calc(100% - 25px) !important; 
   height: 100%;
   background-color: #FCD41A;
   border: 1px solid #3A2A20;
   border-radius: 30px;
   z-index: -1;
}

/* --- リード文エリア --- */
.support-lead-container {
   position: relative;
   max-width: 750px;
   margin: 0 auto; /* 120pxは下のセクションとの距離 */
   padding: 0 50px; /* イラストが入るスペースを作る */
}

.support-lead-text {
   text-align: center;
   line-height: 2.2; /* リード文はゆったりと読むために広めに */
}

.support-lead-text p {
   margin-bottom: 0.8em; /* 行間調整 */
}

/* オレンジ色の強調テキスト */
.support-lead-text .highlight-orange {
   color: #EE8319;
   font-weight: bold;
   font-size: 22px; /* 少しだけ大きく */
}

/* イラストの配置（共通設定） */
.support-lead-container .illust-left,
.support-lead-container .illust-right {
   position: absolute;   /* 親要素を基準に浮かせる */
   width: 120px;          /* イラストのサイズ */
   height: auto;
   z-index: 1;           /* 0より大きくして画像を表示させる */
   pointer-events: none; /* テキスト選択の邪魔をしない */
}

/* 文房具（左側）の位置：中央より少し左にはみ出させる */
.support-lead-container .illust-left {
   top: 50%;             /* 縦の中央に */
   left: -80px;          /* コンテナの左枠から外へ80px出す */
   transform: translateY(-50%); /* ぴったり中央揃え */
}

/* ピアノ（右側）の位置：上の方で右にはみ出させる */
.support-lead-container .illust-right {
   top: 0;               /* 上端に合わせる */
   right: -70px;         /* コンテナの右枠から外へ70px出す */
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   /* スマホ用の微調整（重なりすぎ防止） */
   .support-lead-container .illust-left,
   .support-lead-container .illust-right {
      width: 60px;      /* 少し小さく */
   }
   
   .support-lead-container .illust-left {
      left: -10px;      /* スマホでははみ出しを抑える */
   }
   
   .support-lead-container .illust-right {
      right: -10px;
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .support-visual,
   .support-visual-wrap::before {
      border-radius: 20px;
   }

   /* メインビジュアル全体のコンテナ */
   .support-visual-wrap {
   /* ★25pxから10px〜15pxくらいに狭めます */
      padding-left: 15px !important; 
      margin-bottom: 50px; /* 下のテキストとの距離も少し詰める */
   }

   /* 背面の黄色い板 */
   .support-visual-wrap::before {
   /* ★ズレる位置を15px（paddingと同じ数値）に合わせる */
      top: 15px;
      left: 0px;
        
   /* ★幅も15px分だけ引く設定に変更 */
      width: calc(100% - 15px) !important;  
   }

   /* ピアノと文具のイラストを非表示に */
   .support-lead-container .illust-left,
   .support-lead-container .illust-right {
      display: none;
   }

   /* オレンジ色の強調テキスト */
   .support-lead-text .highlight-orange {
      font-size: 20px; /* 少しだけ小さく */
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
=====================================================================================================
リズムトレーニング+支援プログラム＋1日の流れ
=====================================================================================================
*/
/* 支援プログラムだけ、板の重なりを避けるために上の余白を増やす */
.program {
   padding-top: 205px;  /* 180px + 板のズレ25px = 205px */
}

.program .inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 80px;
}

/* リズムトレーニング：画像を右、テキストを左に入れ替え */
.rhythm-training .inner {
   display: flex;
   align-items: stretch;        /* center から stretch に変更：高さを揃える */
   justify-content: space-between;
   gap: 80px;
   flex-direction: row-reverse;
}

.rhythm-content {
   flex: 1;
   display: flex;              /* 追記 */
   flex-direction: column;     /* 追記：中身を縦に並べる */
   justify-content: space-between; /* 追記：タイトルとボタンを上下端に飛ばす */
   padding: 0;            /* 追記：画像との微調整（お好みで） */
}

/* テキスト・画像エリアの幅調整 */
.program-content,
.rhythm-img, .program-img {
   flex: 1;
}

/* リズムトレーニング＋支援プログラム画像配置 */
.rhythm-img, .program-img {
   position: relative;
   z-index: 1;
}

.rhythm-img img {
   width: 100%;
   max-width: 400px;
   border-radius: 30px;
   border: 1px solid #3A2A20;
   background-color: #fff;
   display: block;
}

/* リズムトレーニング 背面の板 */
.rhythm-img::before {
   content: "";
   position: absolute;
   top: 20px;
   left: 20px;
   width: 100%;
   max-width: 400px;
   height: 100%;
   border-radius: 30px;
   border: 1px solid #3A2A20;
   background-color: #EE8319;
   z-index: -1;
}

.program-img img {
   width: 100%;
   max-width: 530px;
}

/* 1日の流れ（Daily Schedule）*/
.daily-schedule-2 .daily-flex-container {
   display: flex;
   justify-content: space-between;
   align-items: flex-end; /* 下揃えにするとボタンが綺麗に並びます */
   margin-top: 30px;
}

.daily-text-box p {
   line-height: 1.8; /* ※文との並びなので行間少し詰める */
}

.daily-text-box span {
   font-size: 14px;
   display: block;
   margin-top: 5px;
}

/* --- ボタンの配置調整（リズム・プログラム共通） --- */
.program .btn-wrap {
   display: flex;          /* フレックスボックスを起動 */
   justify-content: flex-end; /* 中身（ボタン）を右に寄せる */
   margin-top: 50px;       /* 上のテキストとの余白（お好みで調整） */
}

.rhythm-training .btn-wrap {
   display: flex;
   justify-content: flex-end;
   margin-top: auto;
}

/* --- 1日の流れのボタン余白も微調整する場合 --- */
.daily-schedule-2 .btn-wrap {
   margin-top: 20px;       /* テキストとの距離を適宜調整 */
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}
/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   /* --- 縦並びへの切り替え --- */
   .program .inner,
   .rhythm-training .inner {
      flex-direction: column !important;
      gap: 40px;
      padding: 0 7% !important; /* 全体の余白に合わせる */
   }

   /* --- 画像とテキストの幅を調整 --- */
   .rhythm-img, .program-img, .rhythm-content, .program-content {
      width: 100% !important;
      max-width: none !important;
      flex: 0 0 100% !important;
   }

   /* --- リズムトレーニング：画像エリアの調整 --- */
   .rhythm-training .rhythm-img {
      position: relative;
      width: 100% !important;
      padding-right: 20px !important; /* 板の通り道を確保 */
      box-sizing: border-box !important;
      margin-bottom: 25px; 
   }

   .rhythm-training .rhythm-img img {
   /* 画像そのものを親（paddingを除いた全幅）に広げる */
      width: 100% !important; 
      max-width: none !important;
      height: auto;
      display: block;
      border-radius: 30px;
      position: relative;
      z-index: 2;
      border: 1px solid #3A2A20;
   }

   /* --- 背面の板の調整（絶対広がる最終手段） --- */
   .rhythm-training .rhythm-img::before {
      content: "";
      position: absolute;
        
      /* 1. 位置を固定（画像から20pxズラす） */
      top: 20px !important;
      left: 20px !important;
        
      /* 2. サイズを「自動計算」にする（ここが重要！） */
      /* 右端と下端を親要素の端にピッタリくっつけることで、
       画像が大きくなれば板も強制的に引っ張られて大きくなります */
      right: 0 !important;
      bottom: -20px !important;
        
      /* 3. 固定の幅や高さを「解除」する */
      width: auto !important;
      height: auto !important;
      max-width: none !important;
        
      background-color: #EE8319 !important;
      border: 1px solid #3A2A20 !important;
      border-radius: 30px;
      z-index: 1 !important;
   }

    /* --- 支援プログラムの画像（にこの支援） --- */
   .program-img img {
      width: 80% !important;
      max-width: none !important;
      margin: 0 auto;
      display: block;
   }

   /* --- 1日の流れ セクションの調整 --- */
   .daily-schedule-2 .daily-flex-container {
      display: flex !important;
      flex-direction: column !important; 
      gap: 20px !important;                /* テキストとボタンの間の隙間を空ける */
      padding: 0 !important;            /* 左右の余白を消して横幅を広く使う */
      width: 100% !important;
      align-items: flex-start !important; /* 中身を左側に揃える */
   }
    
   .daily-schedule-2 .daily-content {
      width: 100% !important;
      max-width: none !important;
      text-align: left !important;      /* テキストを左寄せ */
   }

   .daily-schedule-2 .daily-content p {
      margin-bottom: 0 !important;      /* 下の余白を消す */
      line-height: 1.6;
      text-align: left !important;      /* 念のためここでも左寄せ */
   }

   /* 1日の流れ：スマホでの不要な改行を解除 */
   .daily-schedule-2 .daily-content p br {
      display: none !important;
   }

   /* ボタンだけを右寄せにする */
   .daily-schedule-2 .btn-wrap {
      width: 100% !important;           /* 幅いっぱいにしてから */
      display: flex !important;
      justify-content: flex-end !important; /* 右側に寄せる */
      margin-top: 10px !important;      /* テキストとの最低限の距離 */
   }

    /* --- テキストとボタンの配置調整 --- */
   .rhythm-content, .program-content {
      display: block;
   }
   
   .rhythm-content p, .program-content p {
      line-height: 2;
      margin-bottom: 30px;
   }

   .program .btn-wrap,
   .rhythm-training .btn-wrap {
      display: flex;
      justify-content: flex-end;
      margin-top: 30px;
   }
}


/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .rhythm-img img,
   .rhythm-img::before {
      border-radius: 20px !important;
   }

/* リズムトレーニング画像エリア */
   .rhythm-training .rhythm-img {
      position: relative;
      width: 100% !important;

   /* ★重要：右に板が出る分、左にも15pxの余白を作って「画像本体」を中央に寄せる */
      padding-left: 0px !important;
      padding-right: 15px !important;
      margin-bottom: 20px !important;
      display: flex;
      justify-content: center;
      box-sizing: border-box !important;
   }

   .rhythm-training .rhythm-img img {
   /* 板が右にはみ出す分、画像自体を少しだけ左に寄せるか、幅をわずかに絞る */
      width: 100% !important;
      height: auto;
      position: relative;
      z-index: 2;
   }

   /* 背面のオレンジの板 */
   .rhythm-training .rhythm-img::before {
      content: "";
      position: absolute;
      top: 15px !important;
        
   /* ★起点を左端(0)にして、幅を画像より少し短くする */
      left: 0 !important;
      width: calc(100% - 15px) !important; 
        
/* ★ここで右に15pxだけズラす */
      transform: translateX(15px) !important;
      height: 100% !important;
      background-color: #EE8319;
      z-index: -1;
   }  
}
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
③下層ページ (training.html)  
リズムトレーニング
===========================================================================================
*/
/* ★タイトルを中央に寄せる設定を追加 */
.training .section-header {
   margin-bottom: 40px; /* タイトルと下のコンテンツの間隔 */
   text-align: center;
}
    
/* --- リズムトレーニング メイン --- */
.training-main-content {
   position: relative;
   max-width: 972px; /* 全体のコンテナ幅を画像の最大幅に合わせる */
   margin: 0px auto; /* 左右中央寄せ*/
   /* padding-rightを少し足して、テキストの板がはみ出す余白を作る */
   padding-right: 20px;
}

/* 画像エリア */
.training-visual-wrap {
   width: 100%;
   position: relative;
   z-index: 5;
   padding-left: 25px;
}

.training-visual {
   position: relative;
   border-radius: 30px;
   /* overflow: hidden; は今回外してみましょう（はみ出しを確実に許可するため） */
   border: 1px solid #3A2A20;
   background-color: #fff; /* 画像読み込み前でも枠が見えるように */
   width: 100%;
}

/* 画像の角丸はimgタグに直接かけます */
.training-visual img {
   width: 100%;
   display: block;
   border-radius: 30px;
}

/* 画像の後ろの黄色い板 */
.training-visual::before {
   content: "";
   position: absolute;
   top: 25px;      /* 下に25pxズラす */
   left: -25px;    /* 左に25pxズラす */
   width: 100%;
   height: 100%;
   background-color: #FCD41A;
   border: 1px solid #3A2A20;
   border-radius: 30px;
   z-index: -1;    /* 画像のすぐ後ろ */
}

/* テキストエリア */
.training-lead-container {
   position: absolute;
   right: 0;
   bottom: -240px; /* 位置はお好みで調整してください */
   /* 固定幅ではなくmax-widthで指定するとレスポンシブで崩れません */
   width: 100%;
   max-width: 726px; 
   z-index: 10;
}

.training-lead-text {
   background-color: #fff;
   padding: 50px 100px;
   border-radius: 30px;
   border: 1px solid #3A2A20;
   position: relative;
}

/* テキストの後ろのオレンジの板 */
.training-lead-text::before {
   content: "";
   position: absolute;
   top: 25px;
   left: -25px;
   width: 100%;
   height: 100%;
   background-color: #EE8319;
   border: 1px solid #3A2A20;
   border-radius: 30px;
   z-index: -1;
}

/* テキストの行間などの微調整 */
.training-lead-text p {
   margin-bottom: 10px;
   color: #3A2A20;
}

.training-lead-text p:last-child {
   margin-bottom: 0;
}

/* オレンジの強調線 */
.highlight-orange {
   color: #EE8319;
   font-weight: bold;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .training-main-content {
      padding-right: 0; /* 右側の余白をリセット */
   }

   .training-lead-container {
      /* タブレットでは少し重なりを浅くするか、幅を調整 */
      max-width: 80%;
      bottom: -260px;
    }

   .training-lead-text {
      padding: 40px 60px; /* 内側の余白を少し詰める */
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .training-main-content {
   /* スマホでは重なりを解除するため、高さを確保する必要がなくなる */
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   /* 画像エリアの調整 */
   .training-visual-wrap {
      padding-left: 15px; /* ズレを少し小さく */
      margin-bottom: 40px; /* 下のテキストとの間隔 */
   }

   .training-visual::before {
      top: 15px;
      left: -15px;
      border-radius: 20px;
   }

   .training-visual, .training-visual img {
      border-radius: 20px;
   }

   /* テキストエリア（絶対配置を解除して縦に並べる） */
   .training-lead-container {
      position: static; /* 浮かせず、画像の下に配置 */
      max-width: 100%;
      padding-left: 15px; /* オレンジの板のズレ分を確保 */
      margin-top: 20px;
   }

   .training-lead-text {
      padding: 35px 40px 20px; /* スマホ用に内側の余白をスリムに */
      border-radius: 20px;
   }

   /* テキストの後ろのオレンジの板 */
   .training-lead-text::before {
      top: 15px;
      left: -15px;
      border-radius: 20px;
   }

   .training-lead-text p {
      line-height: 1.5 !important;
      margin-bottom: 15px !important;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
吹き出しコンテンツ共通設定（5セクション）
===========================================================================================
*/
/* 吹き出しの見出しの見た目をリセットする */
.recommend-balloon-title,
.values-balloon-title,
.reason-balloon-title,
.fun-balloon-title,
.closing-balloon-title {
   font-size: 22px;    /* 元のpタグのサイズに合わせる */
   font-weight: medium; /* 太字にしたくない場合 */
   margin: 0;          /* 勝手につく余白を消す */
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   /* 吹き出しの見出しの文字サイズを調整 */
   .recommend-balloon-title,
   .values-balloon-title,
   .reason-balloon-title,
   .fun-balloon-title,
   .closing-balloon-title {
      font-size: 20px;  
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   /* 吹き出しの見出しの文字サイズを調整 */
   .recommend-balloon-title,
   .values-balloon-title,
   .reason-balloon-title,
   .fun-balloon-title,
   .closing-balloon-title {
      font-size: 16px;    /* 元のpタグのサイズに合わせる */
   }

  /* ★ここから追加：すべてのカードの横幅と左右の余白を強制的に統一する */
  .recommend-card,
  .values-card,
  .reason-card,
  .fun-card,
  .closing-card {
      width: 92% !important;        /* 画面の92%幅に統一 */
      max-width: none !important;    
      margin: 0 auto !important;     /* 左右を auto にして中央へ */
      padding-left: 20px !important; /* 左右の余白を20pxに固定 */
      padding-right: 20px !important;
      box-sizing: border-box !important;
  }



}

/*
===========================================================================================
こんなお子さんにおすすめです
===========================================================================================
*/
/* リズムトレーニングの浮きをリセットして潜り込みを抑制 */
.recommend {
  clear: both;      /* 前のセクションの「浮き」をリセットして下に押し出す */
  position: relative; 
  z-index: 10;      /* 重なりの優先順位を上げる */
  /* 上に500px、左右に0、下に0 の余白を設定 */
  padding: 500px 0 0 0;
}

/* 吹き出しとカードを包む親要素 */
.recommend .inner {
   position: relative;
   max-width: 974px; /* 全体の幅を調整 */
   margin: 0 auto;
   padding-top: 30px; /* 吹き出しがはみ出すスペース */
}

/* 黄色の吹き出し */
.recommend-balloon {
   position: absolute;
   top: 0;
   left: 40px;
   z-index: 10;
   background-color: #FCD41A; /* NICOカラーの黄色 */
   padding: 10px 60px;
   border-radius: 50px;
   border: 1.5px solid #3A2A20;
}

/* 1. 外側の枠線になる三角（指定の色） */
.recommend-balloon::before {
   content: "";
   position: absolute;
   top: 100%;
   left: 30px;
   /* borderの幅を13pxから11pxに少し小さくします */
   border: 11px solid transparent; 
   border-top-color: #3A2A20; 
   z-index: 1;
}

/* 2. 内側の塗りつぶしになる三角（黄色） */
.recommend-balloon::after {
   content: "";
   position: absolute;
   /* topを100%に近づけつつ、枠線の太さ分だけ上に食い込ませます */
   top: 98%; 
   left: 31px; 
   /* borderの幅を11pxから10pxに調整 */
   border: 10px solid transparent; 
   border-top-color: #FCD41A; 
   z-index: 2;
}

/* 白い角丸カード */
.recommend-card {
   background-color: #fff;
   border: 1px solid #3A2A20;
   border-radius: 80px; /* 大きめの角丸で柔らかい印象に */
   padding: 100px 150px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
   max-width: 974px;
}

/* イラストとリストの横並び */
.recommend-flex {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 90px; /* イラストとリストの間の距離 */
   margin-bottom: 40px;
}

.recommend-img img {
   width: 200px; /* イラストのサイズはお好みで調整してください */
   height: auto;
}

/* チェックリスト */
.recommend-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.recommend-list li {
   position: relative;
   padding-left: 40px;
   margin-bottom: 20px;
   font-size: 20px;
   font-weight: bold;
   line-height: 1.5;
}

/* 黄色のチェックアイコン */
.recommend-list li::before {
   content: "✔️";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 28px;
   height: 28px;
   background-color: #FCD41A;
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 16px;
}

/* 下部のテキストエリア */
.recommend-footer-text {
   text-align: center;
   border-top: 1px dashed #ccc; /* 区切り線を入れると読みやすくなります */
   padding-top: 40px;
}

.recommend-footer-text p {
   line-height: 1.8;
   margin-bottom: 10px;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .recommend {
   /* 前のセクションの重なりが減るのに合わせて、上の余白を調整 */
      padding: 500px 0 0 0; 
   }

  .recommend-balloon {
   /* 最大幅を決めておく */
      max-width: 90%; 
   /* 左右の余白（padding）を増やすことで、
   文字の周りにゆとりができて結果的に幅が広がる */
      padding: 10px 80px; 
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap; /* 改行させたくない場合 */
   }

   /* しっぽも中央へ */
   .recommend-balloon::before,
   .recommend-balloon::after {
      left: 50%;
      transform: translateX(-50%);
   }

   .recommend-card {
   /* 左右のパディングを減らして、スマホ・タブレットでも窮屈にしない */
      padding: 80px 40px;
      margin: 0 20px;
      border-radius: 60px;
   }

   /* ここで縦並びに切り替え！ */
   .recommend-flex {
      flex-direction: column; 
      gap: 40px; /* イラストとリストの上下の間隔 */
      margin-bottom: 30px;
   }

   .recommend-img img {
      width: 180px; /* イラストを少しだけ小ぶりに */
   }

   .recommend-list {
   /* リストを中央寄せにしたい場合は width 指定して margin: auto */
      max-width: 500px;
      margin: 0 auto;
   }

   .recommend-list li {
      font-size: 18px; /* 文字サイズを少し調整 */
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .recommend {
   /* 重なりが完全に消えるので、通常のセクション余白に */
      padding: 150px 0 0 0;
   }

   .recommend-balloon {
   /* スマホでは padding を狭めて、文字スペースを確保する */
      padding: 10px 20px; 
   /* 文字が入り切らない場合は改行を許可する */
      white-space: normal; 
      text-align: center;
   /* 幅を画面に合わせる */
      width: 80%;
   }
    
   .recommend-card {
      padding: 60px 40px 40px !important;
      border-radius: 40px;
   }

   .recommend-img img {
      width: 130px; /* イラストを少しだけ小ぶりに */
   }

   .recommend-list li {
      font-size: 16px;
      padding-left: 35px;
   }

   .recommend-list li::before {
      width: 24px;
      height: 24px;
      font-size: 14px;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
大切にしていること
===========================================================================================
*/
/* 吹き出しとカードを包む親要素 */
.values .inner {
   position: relative;
   max-width: 974px;
   margin: 0 auto;
   padding-top: 30px;
}

/* 黄色の吹き出し（右側に配置） */
.values-balloon {
   position: absolute;
   top: 0;
   right: 40px; /* 右寄せ */
   z-index: 10;
   background-color: #FCD41A;
   padding: 10px 90px;
   border-radius: 50px;
   border: 1.5px solid #3A2A20;
}

/* 吹き出しのしっぽ（右側・枠線付き） */
.values-balloon::before {
   content: "";
   position: absolute;
   top: 100%;
   right: 30px;
   border: 11px solid transparent;
   border-top-color: #3A2A20;
   z-index: 1;
}

.values-balloon::after {
   content: "";
   position: absolute;
   top: 98%;
   right: 31px;
   border: 10px solid transparent;
   border-top-color: #FCD41A;
   z-index: 2;
}

/* 白い角丸カード */
.values-card {
   background-color: #fff;
   border: 1px solid #3A2A20;
   border-radius: 80px;
   padding: 100px 150px 80px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
   max-width: 974px;
   margin: 0 auto;
}

/* 中央のサブタイトル */
.values-title {
   text-align: center;
   font-size: 22px;
   font-weight: bold;
   margin-bottom: 50px;
}

/* 横並びの設定 */
.values-flex {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 90px;
   margin-bottom: 40px;
}

/* 丸い星のチェックリスト */
.values-list {
   list-style: none;
   padding: 0;
   margin: 0;
}

.values-list li {
   position: relative;
   padding-left: 50px; /* 星のサイズに合わせて少し広めに */
   margin-bottom: 20px;
   font-size: 20px;
   font-weight: bold;
   line-height: 1.5;
}

/* 準備した星の画像をアイコンにする */
.values-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 50%;
   transform: translateY(-50%);
   width: 32px;  /* 星のサイズを調整 */
   height: 32px;
   background-image: url("img/star.png"); 
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
}

.values-img img {
   width: 200px;
   height: auto;
}

/* 下部のテキストエリア */
.values-footer-text {
   text-align: center;
   border-top: 1px dashed #ccc;
   padding-top: 40px;
}

.values-footer-text p {
   line-height: 1.8;
   margin-bottom: 10px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .values-card {
      padding: 80px 40px;
      margin: 0 20px;
      border-radius: 60px;
   }

   /* 吹き出しを中央寄せに切り替え（昨日の調整と同様） */
   .values-balloon {
      right: auto; /* PC版の右寄せを解除 */
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 80px;
      white-space: nowrap;
      max-width: 90%;
   }

   /* 吹き出しのしっぽを中央へ */
   .values-balloon::before,
   .values-balloon::after {
      right: auto;
      left: 50%;
      transform: translateX(-50%);
   }

   /* サブタイトルも少し小さく */
   .values-title {
      font-size: 18px;
   }

   /* 縦並びに切り替え */
   .values-flex {
      flex-direction: column;
      gap: 40px;
   }

   .values-img img {
      width: 180px; /* イラストを少しスリムに */
   }

   .values-list {
      max-width: 500px;
      margin: 0 auto;
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .values-card {
      padding: 60px 40px 40px !important;
      border-radius: 40px;
   }

   /* 吹き出し内の文字を中央寄せ＆改行許可 */
   .values-balloon {
      white-space: normal;
      text-align: center;
      width: 80%;
      padding: 10px 20px;
   /* 吹き出しをカードの中央に置くためのおまじない */
      left: 50% !important;
      transform: translateX(-50%) !important;
   }

   /* サブタイトルもスマホサイズに */
   .values-title {
      font-size: 16px;
      margin-bottom: 30px;
   }

   /* 星のチェックリストの調整 */
   .values-list li {
      font-size: 16px;
      padding-left: 45px;
   }

   .values-list li::before {
      width: 26px;
      height: 26px;
   }

   /* 箇条書き星リストとイラストの間隔調整 */
   .values-flex {
      gap: 20px;
   }

   .values-img img {
      width: 140px;
      height: auto;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
なぜリズム運動を取り入れてるの？
===========================================================================================
*/
.reason .inner {
   position: relative;
   max-width: 1164px;
   margin: 0 auto;
   padding-top: 30px;
}

/* 吹き出し（中央配置） */
.reason-balloon {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   z-index: 10;
   background-color: #FCD41A;
   padding: 10px 60px;
   border-radius: 50px;
   border: 1.5px solid #3A2A20;
   white-space: nowrap;
}

/* 吹き出しのしっぽ（中央） */
.reason-balloon::before {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border: 11px solid transparent;
   border-top-color: #3A2A20;
   z-index: 1;
}

.reason-balloon::after {
   content: "";
   position: absolute;
   top: 98%;
   left: 50%;
   transform: translateX(-50%);
   border: 10px solid transparent;
   border-top-color: #FCD41A;
   z-index: 2;
}

/* 白枠カード */
.reason-card {
   background-color: #fff;
   border: 1px solid #3A2A20;
   border-radius: 80px;
   padding: 100px 60px 80px;
   max-width: 1164px;
   margin: 0 auto;
   text-align: center;
}

/* 上部テキスト */
.reason-top-text p {
   font-weight: bold;
}

.reason-top-text .sub-text {
   margin-top: 40px;
   margin-bottom: 40px;
}

/* カード全体を基準位置にする */
.reason-card {
   position: relative; /* イラストの基準になります */
   background-color: #fff;
   border: 1px solid #3A2A20;
   border-radius: 80px;
   padding: 100px 60px;
   max-width: 1164px;
   margin: 0 auto;
   text-align: center;
}

/* コンテナのFlexを解除して、中身を自由に動かせるようにする */
.reason-points-container {
   display: block; 
   margin-bottom: 40px;
   position: relative;
   min-height: 80px; /* オレンジのラベルがある程度の高さを保つように */
}

/* 左上のイラスト */
.reason-char-left {
   position: absolute;
   top: -240px;  /* 上への飛び出し具合を調整 */
   left: -20px;  /* 左からの位置を調整 */
   z-index: 1;  /* テキストより後ろにしたければ数値を下げる */
}

/* 右下のイラスト */
.reason-char-right {
   position: absolute;
   bottom: -210px; /* 下への飛び出し具合を調整 */
   right: -15px;   /* 右からの位置を調整 */
   z-index: 1;
}

/* イラストのサイズ共通設定 */
.reason-char-left img {
   width: 200px; 
   height: auto;
}

.reason-char-right img {
   width: 165px; 
   height: auto;
}

/* オレンジのラベル3つの並び（ここだけはFlexを維持して中央に） */
.reason-labels {
   display: flex;
   justify-content: center;
   gap: 30px;
   position: relative;
   z-index: 2; /* イラストより上に表示させる */
}

.reason-label {
   background-color: #EE8319; /* オレンジ */
   color: #fff;
   padding: 15px 35px;
   border-radius: 40px;
   font-weight: bold;
   font-size: 20px;
   box-shadow: 4px 4px 0px #3A2A20; /* ぼかさない影で立体感を出す */
   white-space: nowrap;
}

/* 下部テキスト */
.reason-bottom-text p {
   margin-bottom: 40px;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下 (タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .reason-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 40px 80px;
      border-radius: 60px;
   }

   /* 2. イラスト1（考える子：上のイラスト） */
   .reason-char-left {
      order: 2 !important;
      position: static;
      margin: 30px auto;
   }

   /* 3. 上部テキスト */
   .reason-top-text {
      order: 3 !important;
      text-align: center;
      width: 100%;
      margin-top: 10px;
   }

    /* 【重要！】オレンジのラベルを包む箱の存在を「透明化」する */
   .reason-points-container {
      display: contents; /* これを入れると中身のラベルが直下のorderに従います */
   }

   /* 4. オレンジのラベル（これを文章の後に持ってくる） */
   .reason-labels {
      order: 4 !important; /* 3（上の文章）より大きい数字にする */
      flex-direction: column;
      align-items: center;
      gap: 25px;
      margin: 0px 0 40px 0;
      width: 100%;
   }

   .reason-label {
      font-size: 18px;
   }

    /* 5. 下部テキスト（文章） */
   .reason-bottom-text {
      order: 5 !important;
      text-align: center;
      width: 100%;
   }

   /* 6. イラスト2（ひらめく子：下のイラスト） */
   .reason-char-right {
      order: 6 !important;
      position: static;
      margin: 0px auto;
   }

   /* イラストサイズ */
   .reason-char-left img {
      width: 180px;
      height: auto;
   }

   .reason-char-right img {
      width: 150px;
      height: auto;
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .reason-card {
      padding: 30px 40px 40px !important;
      border-radius: 40px;
   }

   .reason-balloon {
   /* スマホでは padding を狭めて、文字スペースを確保する */
      padding: 10px 20px; 
   /* 文字が入り切らない場合は改行を許可する */
      white-space: normal; 
      text-align: center;
   /* 幅を画面に合わせる */
      width: 80%;
   /* 吹き出しを確実に中央へ */
      left: 50% !important;
      transform: translateX(-50%) !important;
   }

   .reason-label {
      padding: 12px 35px;
      border-radius: 30px;
      font-size: 16px;
   }

   /* イラストサイズ共通 */
   .reason-char-left img {
      width: 145px;
      height: auto;
      margin: 40px auto 30px;
   }

   .reason-char-right img {
      width: 125px;
      height: auto;
   }

   .reason-top-text .sub-text {
      margin-bottom: 40px !important;
   }

   .reason-top-text p,
   .reason-bottom-text p {
      line-height: 2.0 !important; /* !important をつけると確実に上書きできます */
      margin-bottom: 30px;
   }

   /* ついでに、文章が横に広がりすぎないよう少し左右に余白を */
   .reason-top-text,
   .reason-bottom-text {
      padding: 0;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
楽しいから続けられる！
===========================================================================================
*/
.fun .inner {
  position: relative;
  max-width: 1164px;
  margin: 0 auto;
  padding-top: 30px;
}

/* 吹き出し（中央配置） */
.fun-balloon {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background-color: #FCD41A;
  padding: 10px 90px;
  border-radius: 50px;
  border: 1.5px solid #3A2A20;
  white-space: nowrap;
}

/* 吹き出しのしっぽ（中央） */
.fun-balloon::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 11px solid transparent;
  border-top-color: #3A2A20;
  z-index: 1;
}

.fun-balloon::after {
  content: "";
  position: absolute;
  top: 98%;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #FCD41A;
  z-index: 2;
}

/* 白枠カード */
.fun-card {
  background-color: #fff;
  border: 1px solid #3A2A20;
  border-radius: 60px;
  padding: 120px 80px;
  max-width: 1164px;
  margin: 0 auto;
}

/* 横並び設定 */
.fun-flex {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

/* 写真の背面あしらいを含むラップ */
.fun-img-wrap {
  position: relative;
  z-index: 1;
}

/* 背面のオレンジ色の四角（修正版） */
.fun-img-wrap::before {
  content: "";
  position: absolute;
  /* ↓ 左右中央に配置してから、少し左にズラす */
  top: 20px;     /* 上のズレ（お好みで） */
  left: 50%;
  transform: translateX(-50%) translateX(-10px); /* 中央から10pxだけ左にズラす */
  width: 100%;   /* 写真と同じ幅 */
  height: 100%;  /* 写真と同じ高さ */
  background-color: #E67A16;
  border-radius: 30px;
  border: 1.5px solid #3A2A20;
  z-index: -1;
}

/* 写真本体 */
.fun-img img {
  width: 400px; /* デザインに合わせて調整 */
  height: auto;
  left: 10px;
  border-radius: 30px;
  border: 1.5px solid #3A2A20;
  display: block;
  position: relative; /* z-indexを効かせるため */
}

/* テキストエリア */
.fun-text {
  text-align: left;
}

.fun-text p {
  line-height: 1.8;
  font-weight: bold;
  margin-bottom: 30px;
}

/* オレンジの強調文字 */
.highlight-orange {
  color: #E67A16;
  font-weight: bold;
}

.fun-text p:last-child {
  margin-bottom: 0;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   /* 1. 横並びを解除して縦並び、中央寄せにする */
  .fun-flex {
      flex-direction: column;
      gap: 75px; /* 画像とテキストの間の距離 */
   }

   /* 2. カードの横幅を画面に合わせつつ、余白を調整 */
   .fun-card {
      padding: 80px 40px 80px; /* PC版より左右のパディングを少し狭める */
   }

   /* 3. 画像のサイズをタブレット向けに調整 */
   .fun-img img {
      width: 100%;
      max-width: 450px; /* 大きくなりすぎないように制限 */
      border-radius: 20px;/* 角丸を小さく調整 */
      margin: 0 auto;
   }

   .fun-img-wrap::before {
      border-radius: 20px;  /* 角丸を小さく調整 */
   }

  /* 4. テキストを中央寄せにする（縦並びの時はこの方が綺麗です） */
   .fun-text {
      text-align: center;
      max-width: 600px; /* 文章が横に広がりすぎないように */
      margin: 0 auto;
   }

  /* 5. 吹き出しのサイズ調整 */
   .fun-balloon {
      padding: 10px 60px; /* PCの90pxから少しコンパクトに */
      width: auto;
  }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .fun-card {
      padding: 60px 40px 40px !important;
      border-radius: 40px;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
最後に....
===========================================================================================
*/
.closing .inner {
   position: relative;
   max-width: 974px;
   margin: 0 auto;
   padding-top: 30px;
}

/* 吹き出し（左寄せ・しっぽ付き） */
.closing-balloon {
   position: absolute;
   top: 0;
   left: 40px; /* 少し左に寄せる */
   z-index: 10;
   background-color: #FCD41A;
   padding: 10px 80px;
   border-radius: 50px;
   border: 1.5px solid #3A2A20;
}

/* 吹き出しのしっぽ */
.closing-balloon::before {
   content: "";
   position: absolute;
   top: 100%;
   left: 30px;
   border: 11px solid transparent;
   border-top-color: #3A2A20;
   z-index: 1;
}

.closing-balloon::after {
   content: "";
   position: absolute;
   top: 98%;
   left: 31px;
   border: 10px solid transparent;
   border-top-color: #FCD41A;
   z-index: 2;
}

/* 白い角丸カード */
.closing-card {
   background-color: #fff;
   border: 1px solid #3A2A20;
   border-radius: 80px;
   padding: 80px 90px;
   max-width: 974px;
   margin: 0 auto;
}

/* テキストとイラストの横並び */
.closing-flex {
   display: flex;
   align-items: center;
   justify-content: center; /* 両端に広げず、中央にギュッと寄せる */
   gap: 40px; /* 「文字とイラストの距離」 */
}

.closing-text {
   flex: none;
   max-width: 500px; /* 文字が横に広がりすぎないよう最大幅を指定 */
   text-align: left;
}

.closing-text p {
   line-height: 2.2;
   font-weight: bold;
   margin-bottom: 5px;
}

.closing-text p:last-child {
   margin-bottom: 0;
}

/* 女の子のイラスト */
.closing-img {
   /* イラスト側も勝手に広がらないように固定 */
   flex: none; 
}

.closing-img img {
   width: 200px; /* デザインに合わせて調整 */
   height: auto;
   display: block;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   /* 1. 縦並びにして中央寄せ */
   .closing-flex {
      flex-direction: column-reverse; /* イラストを上、テキストを下にする場合はこれ（逆ならcolumn） */
      gap: 30px;
   }

   /* 2. カードの余白調整 */
   .closing-card {
      padding: 100px 40px 60px;
      border-radius: 60px;
   }

   /* 3. 吹き出しを中央配置に変更 */
   .closing-balloon {
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 100px;
      white-space: nowrap;
   }

   /* 吹き出しのしっぽを中央へ */
   .closing-balloon::before,
   .closing-balloon::after {
      left: 50%;
      transform: translateX(-50%);
   }

   /* 4. イラストを中央に */
   .closing-img img {
      width: 180px; /* PCより少し控えめに */
      margin: 0 auto;
   }

   /* 5. テキストを中央寄せ */
   .closing-text {
      max-width: 550px;    /* 文章が広がりすぎない適切な幅 */
      margin: 0 auto;      /* 中央寄せ */
      line-height: 1.8;    /* 少し行間を広げるとさらに読みやすくなります */
      text-align: center;  /* 中央揃え（デザインに合わせて） */
      width: 100%;         /* 画面が狭いときは100%に */
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   /* 吹き出しの調整：左右100pxを活かしつつ、画面からはみ出さない設定 */
   .closing-balloon {
      width: auto;             /* 文字幅に合わせる */
      max-width: 90%;          /* ★これだけ入れておけば、画面が極端に狭いスマホでも安心です */
      white-space: nowrap;     /* 文字数が少ないので、改行させず一行で。 */
   /* 中央配置を維持 */
      left: 50% !important;
      transform: translateX(-50%) !important;
   }

   /* カードの角丸とパディング */
   .closing-card {
      padding: 50px 40px 40px !important;
      border-radius: 40px;
   }

   /* 行間の調整（2.2はスマホだと広すぎる可能性があるので微調整） */
   .closing-text p {
      line-height: 1.8;
      margin-bottom: 0.8em !important;
   }

   /* イラストのサイズ */
   .closing-img img {
      width: 140px;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */




/*
===========================================================================================
④下層ページ (flow.html)  
ご利用の流れ
===========================================================================================
*/
/* ★タイトルを中央に寄せる設定を追加 */
.flow-section .section-header {
   margin-bottom: 40px; /* タイトルと下のコンテンツの間隔 */
   text-align: center;
}

/* --- リストアイテム --- */
.flow-item {
   position: relative;
   margin-bottom: 0px; /* 80pxから0に変更して、矢印のmarginだけで制御する */
   list-style: none;
}

/* --- 黄色い丸数字 (120px) --- */
.flow-num {
   position: absolute;
   top: -50px;                /* 大きくなった分、少し上に配置 */
   left: 50px;
   width: 110px;              /* 指定のサイズ */
   height: 110px;
   background-color: #FCD41A; /* 指定の黄色 */
   color: #3A2A20;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32px;           /* 数字も大きく */
   font-weight: 500;
   z-index: 10;
   border: 1px solid #3A2A20; /* 指定の茶色 */
}

/* --- 白いカード部分 (Max 910px) --- */
.flow-card {
   background: #fff;
   border: 1px solid #3A2A20;
   border-radius: 40px;
   padding: 60px 20px;   
   box-shadow: 0 4px 10px rgba(0,0,0,0.05);
   max-width: 910px;           /* 指定の最大幅 */
   margin: 0 auto;             /* 中央寄せ */
   display: flex;
   align-items: center;
   justify-content: center;    /* 中身を中央に寄せる */
 }

/* --- 画像エリア (165px) --- */
.flow-img {
   flex: 0 0 165px;            /* 幅を固定 */
   border: none !important;
   background: none !important;
   box-shadow: none !important;
   padding: 0 !important;
   margin: 0 50px 0 0 !important; /* 右側に50pxの余白 */
}

.flow-img img {
   width: 100%;
   height: auto;
   max-width: 165px;
   border: none !important;
}

/* --- テキストエリア (Max 535px) --- */
/* 画像165px + 余白50px + テキスト535px = 合計750px */
.flow-content {
   flex: 0 1 535px;
   max-width: 535px;
}

.flow-content h3 {
   display: inline-block !important;
   width: max-content !important;
    
   /* 文字の左右の「はみ出し」具合をここで調整 */
   padding: 0 5px 2px 5px; 

   font-size: 22px;
   margin-bottom: 20px;
    
   /* 元の線を消す */
   border-bottom: none; 
    
   /* --- 半透明マーカーの設定 --- */
   /* linear-gradient(透明な部分 割合, 線の色 割合) */
   /* 60%を透明に、残り40%を黄色にすることで「下半分」に線を引きます */
   background: linear-gradient(transparent 60%, rgba(252, 212, 26, 0.5) 40%);
}

.flow-content p {
   line-height: 1.8;
}

.tel-info {
   margin-top: 15px;
   font-weight: bold;
}

/* --- 下向きの矢印（枠線付き・完全版） --- */
.flow-arrow {
   position: relative;
   width: 0;
   height: 0;
    
/* 1. 外側の枠線（茶色）を先に作る */
   /* 左右32px、高さ37px */
   border-left: 32px solid transparent;
   border-right: 32px solid transparent;
   border-top: 37px solid #3A2A20;  
   margin: 60px auto 50px;
   display: block;
}

/* 2. 内側の塗りつぶし（黄色）を ::after で重ねる */
.flow-arrow::after {
   content: "";
   position: absolute;

   /* 茶色の三角形の「内側」にぴったり重なるよう配置 */
   /* borderの太さ分（2px）だけ内側にずらす */
   top: -36px;   /* 茶色のborder-topと同じ数値にする */
   left: -30px;  /* 32px(茶色) - 2px = 30px */
   width: 0;
   height: 0;
    
   /* 茶色より一回り小さいサイズ */
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   border-top: 35px solid #FCD41A; /* 中身の黄色 */
}

.flow-item:last-child .flow-arrow {
   display: none;
}

/* 以前の設定（枠線・影・角丸）をすべて解除します */
.flow-list .flow-img img {
   box-shadow: none !important;
   border: none !important;
   border-radius: 0 !important;
   display: block;
   width: 100%;
   height: auto;
   max-width: 165px; /* ここでサイズを固定 */
}

/* 画像の周りの余白もリセット */
.flow-list .flow-img {
   flex: 0 0 165px;
   margin-right: 50px !important; /* 画像とテキストの間の距離 */
   margin-bottom: 0 !important;
   padding: 0 !important;
}

/* 電話番号を押せるように */
.tel-info a {
   color: #3A2A20; /* 共通の茶色にする */
   text-decoration: none; /* 下線を消す */
   font-weight: normal;
   border-bottom: 4px dotted #FCD41A; /* 「ここ押せるよ」とわかるように点線を引く */
   transition: all 0.3s;
}

/* 指を乗せた時に色を変える（親切！） */
.tel-info a:hover {
   color: #FCD41A;
   border-bottom-color: #FCD41A;
}

.tel-info {
   font-weight: normal;
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
/* --- 下層ページ：ご利用の流れ（1024px以下 徹底リセット） --- */
   /* 1. 全体の並びを「縦」に強制 */
   .flow-item {
      display: block !important; /* flexを解除して単純なブロックに */
      width: 100% !important;
      margin-bottom: 150px !important;
      position: relative !important;
   }

   /* 一番下のカードの余白を0に設定 */
   .flow-item:last-child {
      margin-bottom: 0px !important;
   }

   /* 2. カード：幅と余白を再設定 */
   .flow-card {
      display: block !important; /* ここもblockにして中身を縦に並べる */
      width: 90% !important;
      max-width: 550px !important;
      margin: 0 auto !important; /* カード自体を中央寄せ */
      padding: 60px 50px 80px !important; /* 下の余白を適切に */
      background: #fff !important;
      border: 1px solid #3A2A20 !important;
      height: auto !important;
      min-height: 0 !important;
      text-align: center !important; /* ★これで中のテキストも画像も中央へ */
   }

   /* 3. イラストエリア：PC版の「.flow-list .flow-img」の干渉を完全に断ち切る */
   .flow-list .flow-img, 
   .flow-img {
      /* 1. PC版の横並び設定をすべて解除 */
      flex: none !important;
      display: block !important;
      float: none !important;
       
      /* 2. 右側の50px余白を「0」にして、左右 auto で中央寄せにする */
      margin-left: auto !important;
      margin-right: auto !important; 
      margin-top: 0 !important;
      margin-bottom: 20px !important;
       
      /* 3. サイズを固定（ここがズレると中央になりません） */
      width: 120px !important;
      max-width: 120px !important;

      /* 4. 微調整していた位置指定をリセット */
      position: static !important;
      left: 0 !important;
      transform: none !important;
   }

   /* 画像そのものの設定 */
   .flow-list .flow-img img,
   .flow-img img {
      display: block !important;
      margin: 0 auto !important;
      width: 100% !important;
      height: auto !important;
   }

   /* 4. テキスト部分：PC版の幅設定を解除 */
   .flow-content {
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      flex: none !important;
   }

   /* 5. 矢印：1024px以下では非表示にしてスッキリさせる */
   .flow-arrow {
      display: none !important;
   }

   /* 数字の位置 */
   .flow-num {
      position: absolute !important;
      top: -55px !important;
      left: calc(50% - 275px) !important; 
      z-index: 10 !important;
      }
   }

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .flow-num {
   /* 丸のサイズを 120px → 100px にサイズダウン */
      width: 100px !important;
      height: 100px !important;

   /* サイズが小さくなった分、上に飛び出しすぎないよう位置を調整 */
      top: -25px !important;
   /* 配置をカードの左端に合わせる（もし中央なら calc(50% - 40px) ） */
      left: 0px !important; 
   /* 中の数字も少し小さくしてバランスを整える */
      font-size: 26px !important;
   }

   /* ついでにカードの横幅を画面いっぱいに広げると、よりスマホらしくなります */
   .flow-card {
      width: 95% !important;
      padding: 50px 30px 40px !important; /* 内側の余白も少しスリムに */
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
ご利用料金について
===========================================================================================
*/
/* タイトル下の余白 */
.price-section .section-header {
   margin-bottom: 40px;
   text-align: center;
}

/* アイコンとリード文の横並び設定 */
.price-lead {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 20px auto 40px;
   font-weight: bold;
}

/* チェックマークの丸 */
.check-icon {
   position: relative;
   display: inline-block;
   width: 24px;
   height: 24px;
   background-color: #FCD41A;
   border-radius: 50%;
   margin-right: 12px;
   flex-shrink: 0;
}

/* 丸の中の白いチェック線 */
.check-icon::after {
   content: "";
   position: absolute;
   top: 6px;
   left: 9px;
   width: 5px;
   height: 10px;
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
   transform: rotate(45deg);
}

/* --- 料金表の外枠 --- */
.price-table-wrapper {
   max-width: 700px;
   margin: 0 auto 20px;
   border: 1px solid #3A2A20; 
   border-radius: 30px;       
   overflow: hidden;          
   background-color: #fff;
}

.price-table {
   width: 100%;
   border-collapse: separate; 
   border-spacing: 0;
}

/* 表のヘッダー（黄色） */
.price-table th {
   background-color: #FCD41A !important;
   padding: 20px;
   font-weight: bold;
   border-bottom: 1px solid #3A2A20;
   font-size: 18px;
}

/* 表のセル（白） */
.price-table td {
   background-color: #fff !important;
   padding: 20px;
   border-bottom: 1px solid #3A2A20;
   text-align: center;
}

/* 縦線を引く（1番目の列の右側に線を出す） */
.price-table th:first-child,
.price-table td:first-child {
   border-right: 1px solid #3A2A20;
}

/* 一番下の行の線だけ消す */
.price-table tr:last-child td {
   border-bottom: none;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   /* 1. 外箱（wrapper）の装飾を完全に消して、二重枠を防止 */
   .price-table-wrapper {
      border: none !important;
      background: none !important;
      background-color: transparent !important;
      box-shadow: none !important;
      padding: 0 !important;
      border-radius: 0 !important;
      margin: 0 !important;
   }

   /* 2. テーブル本体のリセット */
   .price-table {
      display: block !important;
      width: 100% !important;
      border: none !important;
      background: none !important;
   }

   /* 3. 見出し行を消して、各セルを縦一列に並べる */
   .price-table thead {
      display: none !important;
   }

   .price-table tbody,
   .price-table tr,
   .price-table td {
      display: block !important;
      width: 100% !important;
   }

   /* 4. 各行（tr）を独立した「カード」にする設定 */
   .price-table tbody tr {
      margin-bottom: 25px !important;    /* カード同士の隙間 */
      border: 1px solid #3A2A20 !important; /* フチの太さを2pxで統一 */
      border-radius: 25px !important;
      background-color: #fff !important;
      position: relative !important;
      z-index: 1 !important;
      overflow: hidden !important;       /* 中身の背景色を角丸の中に閉じ込める */
   }

   /* 一番下のカードの余白を0に設定 */
   .price-table tbody tr:last-child {
      margin-bottom: 0px !important;
   }

   /* 5. 上側（所得の区分）：黄色いエリア */
   .price-table td:first-child {
      background-color: #FCD41A !important;
      background-clip: padding-box !important; /* 背景が枠線を侵食しないように */
      color: #3A2A20 !important;
      padding: 12px !important;
      font-weight: bold;
      text-align: center !important;
      border-bottom: 1px solid #3A2A20 !important; /* 金額エリアとの仕切り線 */
      border-top: none !important;
      border-left: none !important;
      border-right: none !important;
   }

   /* 6. 下側（金額エリア）：白いエリア */
   .price-table td.price-amount {
      padding: 25px 15px !important;
      text-align: center !important;
      background-color: #fff !important;
      background-clip: padding-box !important;
      display: block !important; /* 金額とラベルを分ける */
      border: none !important;   /* 余計な線を消してカードの枠線のみにする */
   }

   /* ラベル：「月額のお支払い上限額」を金額の上に配置 */
   .price-table td.price-amount::before {
      content: "月額のお支払い上限額" !important;
      display: block !important;
      font-size: 13px !important;
      font-weight: normal !important;
      margin-bottom: 8px !important;
   }

   /* 金額本体の数字 */
   .price-table td.price-amount {
      font-size: 20px !important; /* 数字を大きく強調 */
      font-weight: bold !important;
   }

    /* 金額の横の「円」 */
   .price-table td.price-amount span {
      display: inline-block !important;
      font-size: 13px !important;
      margin-left: 4px !important;
      font-weight: bold !important;
    }
}
/*
===========================================================================================
⑤下層ページ (info.html)  
施設概要
===========================================================================================
*/
/* ★タイトルを中央に寄せる設定 */
.company-section .section-header {
   margin-bottom: 65px; 
   text-align: center;
}

/* --- 施設概要カードの重なりデザイン --- */
.company-card-wrapper {
   position: relative;
   max-width: 960px;
   margin: 0 auto;
   padding: 0; /* paddingを一旦リセット */

   /* ★ここを追加！ */
   /* 右に30pxずらしている分、左側に30pxの「見えないマージン」を作ることで中央に寄せます */
   transform: translateX(-12px);
}

/* 後ろの黄色い影（ズレた枠） */
.company-card-wrapper::before {
   content: "";
   position: absolute;
   /* ★ topとleftを「0」にして、右下へは「等倍」で広げる設定に変えます */
   top: -25px;
   left: 25px;
   width: 100%;
   height: 100%;
   background-color: #FCD41A;
   border: 1px solid #3A2A20;
   border-radius: 80px;
   z-index: 1; /* 白いカードの下に潜り込ませる */
}

/* 前の白いカード本体 */
.company-card {
   position: relative; /* これを基準にbeforeが動くように */
   background-color: #fff;
   border: 1px solid #3A2A20;
   border-radius: 80px;
   padding: 70px 90px;
   z-index: 2; /* 黄色より上に持ってくる */
}

/* --- リストの点線設定 --- */
.company-list {
   width: 100%;
}

/* --- リストの点線設定（太め・間隔広め・#F4EBD0） --- */
.company-row {
   display: flex;
   align-items: center; /* dtとddの縦中央を揃える */
   padding: 25px 0;    /* 上下の余白を広げてゆったり */
   position: relative;
   border-bottom: none !important; /* ブラウザ標準の点線を強制解除 */
}

/* ★疑似要素で「あの太い点線」を再現 */
.company-row::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px; /* 点線の太さ */
   /* linear-gradientで色(#F4EBD0)と隙間を交互に作る */
   background-image: linear-gradient(to right, #F4EBD0 40%, rgba(255, 255, 255, 0) 40%);
   background-size: 20px 4px; /* ★ここで25pxの間隔をキープ！ */
   background-repeat: repeat-x;
}

.company-row:last-child::after {
   display: none; /* 最後の行の線は消す */
}

/* 項目名（左側）：オレンジ文字 */
.company-row dt {
   flex: 0 0 150px; 
   font-weight: bold;
   color: #EE8319; 
   text-align: left; /* 左寄せ */
   padding-left: 60px;
   padding-right: 20px;
}

/* 内容（右側）：黒文字 */
.company-row dd {
   flex: 1;
   line-height: 1.8;
   padding-left: 60px;
}

/*  pcの時だけスペースを表示させる */
/* 初期状態：隠しておく */
.pc-space::before {
    content: "";
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1024px以上の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media (min-width: 1024px) {
   .pc-space::before {
      content: "\2003"; /* 全角スペースのUnicode( ) */
   }
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   /* 前の白いカード本体 */
   .company-card {
      border-radius: 60px;
      padding: 70px 50px;
   }
      /* 項目名（左側）：オレンジ文字 */
   .company-row dt {
      padding-left: 40px;
      padding-right: 0px !important;
   }

   /* 内容（右側）：黒文字 */
   .company-row dd {
      flex: 1;
      line-height: 1.8;
      padding-left: 20px;
      padding-right: 20px;
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   /* 1. カード全体のズレを小さくする（画面はみ出し防止） */
   .company-card-wrapper {
      max-width: 100%;
      transform: translateX(-7.5px); /* ズレ15pxの半分戻す */
   }

   .company-card-wrapper::before {
      top: -15px;
      left: 15px;
      border-radius: 40px; /* 角丸も少し小さめに */
      width: 100%;
      height: 100%;
   }

   /* 2. カード内の余白をスマホ用にスリム化 */
   .company-card {
      padding: 40px 20px; /* 左右の余白をギュッと絞る */
      border-radius: 40px;
   }

   /* 3. 項目と内容を縦並びにする */
   .company-row {
      flex-direction: column; /* 縦並びの魔法 */
      align-items: center;    /* 中央寄せを維持 */
      padding: 20px 0;
   }

   /* 項目名（上側） */
   .company-row dt {
      flex: 0 0 auto;
      width: 100%;
      margin-bottom: 10px; /* 内容との隙間 */
      padding-right: 0;
      font-size: 15px;
   }

   /* .sp-only 自体の表示を強制する */
   .sp-only {
      display: block !important;
   }

   /* 住所や時間の dd 要素をブロック化して改行を許可する */
   .company-row dd {
      display: block !important; 
      width: 100% !important;
      text-align: center; 
   }
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */


/*
===========================================================================================
アクセス
===========================================================================================
*/
/* ★タイトルを中央に寄せる設定を追加 */
.access-section .section-header {
   margin-bottom: 40px; /* タイトルと下のコンテンツの間隔 */
   text-align: center;
}

/* --- アクセス・Googleマップ --- */
.map-wrapper {
   position: relative;
   width: 100%;
   max-width: 900px;
   margin: 0 auto 50px;
   line-height: 0;

   /* ★ここを追加：枠なし・角丸・影の設定 */
   border: none; 
   border-radius: 20px; 
   overflow: hidden; /* 角丸からはみ出すマップをカット */
   box-shadow: 0 8px 24px rgba(58, 42, 32, 0.1); /* スマホより少し広がる影にするとPCで綺麗に見えます */
}

.map-wrapper iframe {
   width: 100% !important; /* 横幅を親要素に合わせる */
   height: 450px;
   border: 0px;
}

.access-note {
   text-align: center;
   font-weight: bold;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .map-wrapper {
      width: 100%;
      height: 250px; 
      border: none; /* ★枠線を消す */
      border-radius: 20px;
      overflow: hidden;
      /* ↓ 枠の代わりに、ほんの少しだけ影を落とす*/
      box-shadow: 0 4px 12px rgba(58, 42, 32, 0.08); 
      margin: 0 auto 30px;
   }

   .map-wrapper iframe {
      width: 100% !important;
      height: 100% !important;
      border: 0; /* iframe自体の境界線も一応消しておく */
   }

   /* 駐車場情報のテキスト */
   .access-note {
      font-size: 14px;
      margin-top: 15px;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */




/*
===========================================================================================
⑥ 下層ページ(.html)  
公表情報
===========================================================================================
*/
/* 公表情報ページのみ、見出し下の余白を調整 */
#public-info .section-header {
    margin-bottom: 25px; /* 70pxから30pxにギュッと短縮 */
}

/* 公表情報セクション全体の調整 */
#public-info .lead-text {
   text-align: center;
   line-height: 1.8;
   max-width: 800px;  /* 文字が横に広がりすぎないように制限 */
   width: 90%;        /* 画面幅が狭い時に左右に「あそび」を作る */
   margin-left: auto;  /* 上下は0、左右は真ん中 */
   margin-right: auto; 
   padding: 0 15px;    /* 念のため内側にも少し余白を入れる */
}

/* 白枠リストの調整 */
.public-list {
   max-width: 960px; /* PCでの最大幅 */
   width: 88%;       /* 960px以下の時に左右余白を作る */
   margin: 45px auto 0; /* リード文との間隔を空ける */
   background-color: #fff;
   padding: 40px 60px;
   border-radius: 30px;
   box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

/* 各項目のスタイル */
.public-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 30px 0;
   border-bottom: 1px solid #f0f0f0; /* 優しい色の区切り線 */
}

.public-item:last-child {
   border-bottom: none; /* 最後だけ線なし */
}

/* 左側のテキストエリア */
.public-details {
   flex: 1;
   padding-right: 40px;
}

.public-details h3 {
   font-size: 20px;
   margin-bottom: 10px;
   font-weight: bold;
}

.public-details p {
   color: #666;
   margin-bottom: 10px;
   line-height: 1.6;
}

.update-date {
   display: block;
   font-size: 0.85rem;
   color: #666;
}

/* PDFリンクボタンのデザイン */
.pdf-link {
   display: inline-block;
   background-color: #ee8319; /* nicoさんのオレンジ */
   color: #fff;
   padding: 8px 35px;
   border-radius: 50px; /* ぷっくり丸い形 */
   text-decoration: none;
   font-weight: bold;
   font-size: 0.9rem;
   transition: background-color 0.3s ease;
   min-width: 80px;
   text-align: center;
}

.pdf-link:hover {
   background-color: #d67414; /* ホバー時に少し暗く */
}



/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .public-list {
      padding: 30px 40px;
   }

}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   .public-item {
      flex-direction: column; /* 縦並びに変更 */
      align-items: flex-start;
   }

   .public-details {
      padding-right: 0;
      margin-bottom: 20px;
   }

   .public-link {
      width: 100%; /* スマホではボタンを横いっぱいに */
      padding: 12px 0;
   }

   .public-details h3 {
      font-size: 18px;
   }

   .public-list {
      border-radius: 20px;
      padding: 15px 30px;
   }

}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */




/*
===========================================================================================
⑦下層ページ (.html)  
プライバシーポリシー
===========================================================================================
*/
.policy-lead {
   margin-bottom: 80px;
}

.policy-item {
   margin-bottom: 60px;
}

.policy-item h3 {
   font-size: 20px;
   margin-bottom: 20px;
   padding-bottom: 20px;
   position: relative;
}

/* ★昨日の点線をここでも使い回す */
.policy-item h3::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background-image: linear-gradient(to right, #EE8319 40%, rgba(255, 255, 255, 0) 40%);
   background-size: 20px 4px;
   background-repeat: repeat-x;
}

.policy-list {
   margin: 15px 0 15px 1.5em;
   list-style-type: disc; /* 黒丸をつける */
}

.policy-list li {
   margin-bottom: 10px;
}

.policy-contact-box {
   margin-top: 20px;
   padding: 20px;
   background-color: #fefcf0; /* ほんのり色をつけて目立たせる */
   border-radius: 5px;
}

/* プライバシーポリシー専用の余白（数値はプレビューを見ながら調整してください） */
.privacy-card {
   padding: 120px 100px 60px; /* 上120px 左右120px 下60px */
}

.sp-only {
    display: none !important; /* 基本は出さない */
}


/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */

/* --- ① 1200px以下の場合のレイアウト調整用(PC微調整) -------------------------------------------------- */
@media(max-width: 1200px) {
}

/* --- ② 1024px以下の場合のレイアウト調整用(タブレット・中画面用) ----------------------------------------- */
@media(max-width: 1024px) {
   .privacy-card {
      padding: 90px 60px 30px;
   }

   .policy-item h3 {
   font-size: 20px;
   }
}

/* --- ③ 600px以下の場合のレイアウト調整用(スマホ用)　--------------------------------------------------- */
@media(max-width: 600px) {
   /* 改行を有効にする */
   .sp-only {
      display: block !important;
   }

   .policy-lead {
      margin-bottom: 60px !important;
   }

   .policy-contact-box {
      background-color: #FFFEF5; /* 背景を少し明るく */
      border: 1px dashed #D1C8A8; /* 点線で囲む */
      padding: 20px;
      margin-top: 15px;
      border-radius: 10px;
      font-size: 14px;
   }

   .privacy-card {
      padding: 60px 35px 0; /* スマホではスッキリさせる */
   }

   .policy-item h3 {
      font-size: 16px;
   }

   /* 2. 黄色い枠がはみ出す分、施設概要やプライバシーポリシーの下の余白を確保 */
   .company-card-wrapper {
      margin-top: 45px !important;  /* 次の要素との距離 */
   }
   /* --- プライバシーポリシーの点線をスマホ向けに細かくする --- */
   .policy-item h3::after {
      /* 横幅を 14px に縮めて点の間隔を狭く、高さを 2px にして少し細く */
      background-size: 14px 2px !important;
      /* 点の長さ（40%）がスマホで長く感じる場合は、ここを 30% などに下げるとより繊細になります */
      background-image: linear-gradient(to right, #EE8319 35%, rgba(255, 255, 255, 0) 35%) !important;
   }
}

/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */



/*
===========================================================================================
★★★★　ハンバーガーメニュー：スマホ表示で崩れないよう最終修正　★★★★
===========================================================================================
*/
@media (max-width: 600px) {
   .header-right {
      width: 85% !important; 
      align-items: st!important; 
   /* 1. ここで左右に「15px」の余白を作ることで、下線が端に刺さるのを防ぎます */
      padding-left: 30px !important;
      padding-right: 30px !important;
      padding-top: 80px !important;
   }

   .global-nav {
      width: 100% !important;
      margin-bottom: 20px !important;
   }

   .global-nav li {
      width: 100% !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5) !important;
   }

   .global-nav li a {
   /* 2. メニュー項目の上下幅を少し広げて、タップしやすく中央寄せに */
      text-align: center !important; 
      padding: 20px 10px !important; 
      display: block !important;
      font-size: 16px !important;
   }

   /* 3. 電話・お問い合わせボタン：スリムに調整 */
   .tel-block {
      width: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important; 
      gap: 12px !important; /* ボタン同士の隙間を少し詰める */
      margin-top: 10px !important;
   }

   .header-right .tel-link, 
   .header-right .contact-link {
      width: 100% !important;
      max-width: 220px !important; /* 260pxから220pxに変更してスリムに */
      height: 50px !important; /* ボタンの高さを固定 */
      line-height: 50px !important; /* 文字を垂直中央に */
      padding: 0 !important; /* paddingではなくline-heightで調整 */
      margin: 0 auto !important;
      border-radius: 25px !important; /* 角丸を半分にして綺麗なカプセル型に */
      font-size: 14px !important;
      text-align: center !important;
   }
}