@charset "utf-8";

/* レイアウトのためのCSS */
body{
    overflow-x: hidden;
    background:#ffec04;
    font-family: 'Kosugi Maru', sans-serif;
	color: #333;
	font-size:1rem;
	line-height:1.85;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; 
	word-wrap: break-word;
    letter-spacing: 0.2em;
    padding-top: 0px;               /* ★ ヘッダー高さに合わせて調整 */
    padding-bottom: 100px;  /* フッターの高さに合わせて調整 */
}

body.nav-open{ overflow: hidden; }


body.appear{
    background:#f0f0f0;
}


ul{
	margin:0;
	padding: 0;
	list-style: none;
}

a{
	color: #333;
	text-decoration: none;
    outline: none;
}

img{
    width:100%;
    height: auto;
}

*{
    box-sizing: border-box
}

/* font-family */
.school-info li dl,
.header-area dl,
#page-top span,
h2 span{
    font-family: 'Lato', sans-serif;
}

/* area */

.inner{
    width:100%;
    margin:0 auto;
    padding:70px;
}

/* heading */
/* ヘッダーロゴ（img, canvas）を1ブロックに集約：表示は不変 */
#header h1 img,
#header h1 canvas{ width:100px; position:relative; left:1.8em; }

h2{
    text-align: center;
    margin: 0 0 50px 0;
    font-size: 1.1vw;
    line-height: 1.5;
}

h2 span{
    font-size: 3.5vw;
    text-transform: uppercase;
    display: block;   
}

  /* =============================================================================================
    TOP画面
  ===============================================================================================*/
#header{
    height: 100vh;
    position: relative;
    background-color: white;
}


.header-area{
    position: relative;
    z-index:2;
    top:30px;
    left:50px;
    animation-delay: .5s;
}


.header-area .lead{
    position: relative;
    font-size: 2vw;
    margin: 0 0 50px 0;
    font-weight: bold;
}

.header-area .lead::after{
    content:'';
    position: absolute;
    top:0;
    left:-50px;
    width:10px;
    height: 100%;
    background:#2e98e5;
}

.header-area .bg-white{
    background:#f0f0f0;
    padding: 5px;
}

.header-area .border-yellow {
    background: linear-gradient(transparent 60%, #ffff66 60%);
}

.header-area .address{
    font-size: 1.2vw;
    margin: 0 0 20px 0;
}

.header-area dt,
.header-area dd{
    display: inline-block;
    font-size: 1.1vw;
}



  /* =============================================================================================
    グローバルナビ
  ===============================================================================================*/
/* ▼ ハンバーガー展開中のフルスクリーン土台（黄色） */
#g-nav{
  position: fixed;
  inset: 0;                 /* top/right/bottom/left:0 */
  background: #ffec04;      /* ← 背景を黄色で不透明に */
  z-index: 20000;           /* スライダーより前面に */
  display: none;            /* 初期は非表示 */
}
#g-nav.panelactive{ display:block; }

/* 中身の並び（任意） */
#g-nav ul{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:90px 24px;        /* ヘッダー高さぶん余白など */
}

#g-nav.panelactive ul li{
    position: relative;
    width:30%;
    text-align: left;
    white-space: nowrap;
}

#g-nav li a{
    padding: 15px 20px;
}

#g-nav.panelactive ul li::before{
    content:'';
    width:5px;
    height: 5px;
    background:#2e98e5;
    position: absolute;
    left:-10px;
    top:43%;
}

.palette-logo {
  font-family: "M PLUS Rounded 1c", "Hiragino Sans", "Noto Sans JP", sans-serif;
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
  margin: 0;
}

/* 指定順序（上から）：ピンク → 黄緑 → 黄色 → オレンジ → 水色 → ピンク → 黄色 → 黄緑 */
.palette-logo .c1 { color: #e89db4; } /* ゆ：ピンク */
.palette-logo .c2 { color: #9fd5a5; } /* め：黄緑 */
.palette-logo .c3 { color: #f2cc6b; } /* い：黄色 */
.palette-logo .c4 { color: #e58e6d; } /* ろ：オレンジ */
.palette-logo .c5 { color: #79c5f4; } /* ぱ：水色 */
.palette-logo .c6 { color: #e89db4; } /* れ：ピンク */
.palette-logo .c7 { color: #f2cc6b; } /* っ：黄色 */
.palette-logo .c8 { color: #9fd5a5; } /* と：黄緑 */

.palette-logo span {
  display: inline-block;
  margin: 0 0.05em;
}



  /* =============================================================================================
    ゆめいろぱれっとについて
  ===============================================================================================*/
#concept{
    background: url("../img/flag_01.png") no-repeat left top,url("../img/flag_02.png") no-repeat right top;
    background-size:250px auto;
}

/* タイトル　ゆめいろぱれっとについて */
#concept h2 span{
    position: relative;
    display: inline-block;
    padding: 0.7em 2.5em;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    font-size:30px;
    color: #6ab04c;
}

#concept h2{
  font-size:2rem;
  position:relative;
}

#concept .concept-area{
    position: relative;
    padding: 80px 0;
}

#concept .concept-img{
    width:30%;
    margin: 0 auto;
    animation-delay: .4s;
}

#concept .concept-area img{
    border-radius: 50%; 
}

#concept .concept-area ul{
    animation-delay: .5s;
}

#concept .concept-area ul li{
     position: absolute;
    font-size: 1.7vw;
}

#concept .concept-area ul li::after{
    content:'';
    position: absolute;
    width:40px;
    height: 2px;
    bottom: -10px;
    right:10px;
    background: #2e98e5;
}

#concept .concept-area ul li:nth-child(n+4)::after{
    left:10px;
}
    
#concept .concept-area ul li:nth-child(1){
    top: 12%;
    left: 17%;
    transform: rotate(15deg);
    animation-delay: .1s;
}

#concept .concept-area ul li:nth-child(2){
    top: 37%;
    left: 10%;
    transform: rotate(10deg);
    animation-delay: .3s;
}

#concept .concept-area ul li:nth-child(3){
    top: 65%;
    left: 12%;
    transform: rotate(-15deg);
    animation-delay: .5s;
}

#concept .concept-area ul li:nth-child(4){
    top: 12%;
    right: 17%;
    transform: rotate(-15deg);
    animation-delay: .7s;
}

#concept .concept-area ul li:nth-child(5){
    top: 34%;
    right: 10%;
    transform: rotate(-10deg);
    animation-delay: 1.1s;
}

#concept .concept-area ul li:nth-child(6){
    top: 61%;
    right: 12%;
    transform: rotate(15deg);
    animation-delay: 1.3s;
}
    

#concept .concept-area ul li:after{
    display: none!important;
}


.concept-btn{
    text-align:center;
    padding: 50px 0 0 0;
}



/* footer */

#footer{
    background: #2e98e5;
    color: #fff;
    margin-top:50px;
    z-index: 3000;          /* 他の要素（例：headerやメニュー）より上に */
}

#footer a{
    color: #fff;
}

.footer-area{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.school-info{
    width:30%;
}

.school-info span{
    display: block;
    font-size:1.7rem;
    font-weight: bold;
    line-height: 1.5;
}

.school-info dt.footer-title,
.school-info li:first-of-type{
    margin: 0 0 10px 0;
}

.school-info li dt{
    margin:0 10px 0 0;
}

.school-info li dt,
.school-info li dd{
    display: inline-block;
}

.footer-sitemap{
    width:65%;
}

.footer-sitemap ul{
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 50px 0;
    font-size: 0.9rem;
}

.footer-sitemap li{
    padding: 10px 20px;
}

.footer-sitemap li a{
	position: relative;
    padding: 0 10px;
}

.footer-sitemap li a:before{
    position: absolute;
    top:40%;
    left:-10px;
    content: '';
    width: 7px;
    height:7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
}

small{
    display: block;
    text-align: right;
}

/* メニュー START**************************************************************************/
.sticky-header {
    position: fixed;
    left: 0; right: 0; top: -96px;           /* 初期は上に隠す */
    z-index: 1100;                            /* 既存z-indexより上 */
    height: 72px;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 6px 18px rgba(0,0,0,.06);
    display: flex; align-items: center;
    padding: 0 16px;
    transition: top .35s ease, transform .35s ease, opacity .35s ease;
    opacity: .98;
    top: 0;                          /* ★ もともと -96px を 0 に */
}
.sticky-header.is-visible { top: 0; }

.sticky-header .sh-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    width: 100%;
}
.sh-brand {
    display: flex; align-items: center; gap: 12px; text-decoration: none;
}

.sh-brand img {
    height: 12vw;        /* 画面幅の10%（PCなら大きく、スマホならやや小さく） */
    max-height: 200px;   /* 上限を100pxに設定 */
    width: auto;
    display: block;
    object-fit: contain;
}


.sh-brand .site-title {
    font-family: "Lato","Kosugi Maru",system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
    font-weight: 700; font-size: 18px; letter-spacing: .03em; color: #222;
}
.sh-nav {
    display: flex; gap: 20px; justify-content: center;
}
.sh-nav a {
    color: #222; text-decoration: none; font-size: 14px;
    padding: 8px 6px; border-radius: 6px;
    white-space: nowrap;  /* 文字列を折り返さない */
}
.sh-nav a:hover { background: rgba(0,0,0,.06); }
.sh-cta a {
    display: inline-block; background: #24c089; color: #fff; text-decoration: none;
    padding: 10px 14px; border-radius: 999px; font-size: 13px; box-shadow: 0 6px 14px rgba(36,192,137,.25);
}

/* ハンバーガーの見た目（共通） */
.openbtn{
    display:none;
    width:50px;
    height:50px;
    /* ⬇ 背景の指定を1行で確実に（パスは ../img/…） */
    background: center / 28px 28px no-repeat url("../img/menu.png");
    border:none;
    outline: none;
    cursor:pointer;
    z-index:1201;
    background-color: transparent; /* 念のため */
}

/* openbtn 内の線は使わないので触らなくてOK（消してもOK） */
.openbtn .openbtn-area,
.openbtn .openbtn-area span{
    display:none;
}

/* スムーススクロール用: コンパクトヘッダーの高さ分だけアンカー位置を下げる */
:target { scroll-margin-top: -84px; }

/* メニュー END**************************************************************************/



/* 画面高ジャスト（スマホUI考慮） *********************************************************/
#header{
  position: relative;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;                 /* はみ出しでできる隙間を潰す */
}

/* スライダーをヘッダー全面に固定 */
#header .slider{
  position: absolute;
  inset: 0;                         /* top/right/bottom/left:0 */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 各スライドを高さ100%にして全面カバー */
#header .slider > li{
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* もし <img> を使っているならこちらも併用 */
#header .slider > li img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*  タイトルの背景 */
.main-catch{
  position: absolute;
  z-index: 5;
  background-color: rgba(173, 216, 230, 0.6); /* lightblue + 半透明 */
  border-radius: 10%;         /* ← 円形にする */
}

/*プログラム START ********************************************************************/
  .schedule-card{
    border:0;
    border-radius:18px;
    box-shadow:0 10px 20px rgba(0,0,0,.06);
    overflow:hidden;
  }
  .schedule-head{
    color:#fff;
    padding:1rem 1.25rem;
    font-weight:700;
    font-size:1.4rem;
    letter-spacing:.02em;
  }
  .schedule-sub{
    margin:0;
    padding:.25rem 1.25rem .75rem;
    font-size:1rem;
    color:#ffffffcc;
  }
  .schedule-body{ background:#fff; padding:1.5rem 1rem 1.25rem; }

  /* タイムライン */
  .timeline{ position:relative; padding-left:7.5rem; }
  .timeline::before{
    content:"";
    position:absolute; top:.4rem; bottom:.4rem;
    left:5.2rem; width:4px; border-radius:2px;
    background:var(--line);
  }
  .timeline-item{
    display:flex; align-items:center; gap:1rem;
    margin-bottom:1rem;
  }
  .time-pill{
    display:inline-block; min-width:6.5rem;
    text-align:center; padding:.35rem .75rem;
    border-radius:999px; font-weight:700;
    background:var(--pill-bg); color:var(--pill-text);
  }
  .timeline-item p{ margin:0; font-size:1.05rem; }

  /* ボタン */
  .btn-theme{
    border:0; color:#fff; font-weight:700;
    border-radius:999px;
  }

  /* 平日（オレンジ系） */
  .schedule--weekday{ --head:#ff8a3d; --line:#ff8a3d66; --pill-bg:#ff8a3d22; --pill-text:#cc5c10; }
  .schedule--weekday .schedule-head{ background:var(--head); }
  .schedule--weekday .btn-theme{ background:var(--head); }
  .schedule--weekday .btn-theme:hover{ filter:brightness(0.95); }

  /* 休日（水色系） */
  .schedule--holiday{ --head:#27b4ff; --line:#27b4ff66; --pill-bg:#27b4ff22; --pill-text:#0a6da0; }
  .schedule--holiday .schedule-head{ background:var(--head); }
  .schedule--holiday .btn-theme{ background:var(--head); }
  .schedule--holiday .btn-theme:hover{ filter:brightness(0.95); }

    /* タイトルとボタンを中央揃えに */
  .schedule-head, .schedule-sub, .text-end {
    text-align: center !important;
  }

  /* ボタンの位置調整 */
  .schedule-body .btn-theme {
    display: inline-block;
    margin: 1.5rem auto 0;
  }
    /*プログラム END ********************************************************************/



    

  /* ===== TOP画面 START============================================= */
  #header{
    position: relative;
    height: calc(var(--vh, 1vh) * 100);
  }


.main-catch{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:10;
  width:min(96vw, 1200px);      /* 画面からはみ出さない最大幅 */
  padding:0 2vw;                /* 端の安全マージン */
  text-align:center;
  box-sizing:border-box;
}

/* body の letter-spacing: 0.2em を打ち消して横幅超過を防ぐ */
.main-catch, .main-catch *{
  letter-spacing: normal !important;
}

/* タイトル：1行キープ（nowrap）＆幅に応じて自動縮小 */
#header .main-catch h1{
  margin:0;
  white-space:nowrap;                          /* 折り返さない */
  font-family:"M PLUS Rounded 1c","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  font-weight:900;
  line-height:1.06;
  color:#fff;
  text-shadow:0 3px 8px rgba(0,0,0,.45);
  font-size:clamp(48px, 18vw, 220px);          /* 画面幅連動でオーバーさせない */
}

/* サブコピー：読みやすく可変 */
#header .main-catch p{
  margin:.6em 0 0;
  font-family:"M PLUS Rounded 1c","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  line-height:1.4;
  color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  font-size:clamp(14px, 4.5vw, 28px);
}
/* ===== TOP画面 END============================================= */



/* 地図　START *****************************************************************************************/
  :root{
    --brand:#7dc5ff;          /* メインのアクセント色（やさしい水色） */
    --brand-2:#ffd8e1;        /* 差し色（淡いピンク） */
  }
  body{ background:#fff; }

  .page-wrap{ max-width: 1100px; }

  /* タイトル */

/* カード共通 */
.soft-card {
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 12px 28px rgba(0,0,0,.08);

    /* ▼ 中央揃えのための指定 ▼ */
    margin: 0 auto;          /* 左右中央寄せ */
    display: block;          /* ブロック要素として扱う */
    text-align: center;      /* 内部要素を中央揃え（テキストなど） */
    max-width: 900px;        /* （任意）幅を制限してバランス良く */
    padding: 2rem;           /* 内側の余白 */
}


  /* 地図　******************************************** START */
  .map-wrap{
    border-radius: 1rem;
    overflow:hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
  }
  /* 地図　******************************************** END */


  /* =============================================================================================
    ご利用までの流れデザイン
  ===============================================================================================*/
  .ribbon-title {
    position: relative;
    display: inline-block;
    background: #e5f3db;
    border: 2px solid #95c36b;
    padding: 0.7em 2.5em;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: 800;
    color: #6ab04c;
    border-radius: 3px;
  }
  .ribbon-title::before,
  .ribbon-title::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 20px solid transparent;
  }
  .ribbon-title::before {
    left: -40px;
    border-right-color: #e5f3db;
  }
  .ribbon-title::after {
    right: -40px;
    border-left-color: #e5f3db;
  }

  /* 各ステップボックス */
  .flow-box {
    background: #fff;
    border: 3px solid #95c36b;
    border-radius: 4px;
    padding: 1.5em;
    position: relative;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .05);
  }
  .flow-box::after {
    content: none !important;
    display: none !important;
  }


  /* Stepラベル */
  .flow-box h3 {
    font-size: 1.6rem;
    color: #4c2c13;
    font-weight: 700;
    border-bottom: 2px solid #95c36b;
    padding-bottom: .4em;
    margin-bottom: 1em;
  }

  
  .flow-box .step {
    font-weight: 800;
    color: #4c2c13;
  }

/* 丸数字の見た目センター補正（強制上書き） */
.flow-box .step span{
  display: inline-flex !important;     /* flexで厳密中央 */
  align-items: center !important;      /* 縦中央 */
  justify-content: center !important;  /* 横中央 */
  width: 2.4rem !important;
  height: 2.4rem !important;
  line-height: 1 !important;           /* 下ぶれの主因をリセット */
  padding: 0 !important;               /* 内側余白なし */
  box-sizing: border-box;

  color: #fff;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0;
  text-indent: 0 !important;
  text-align: center !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "pnum" 0;

  /* 見た目の光学調整（0〜1pxで微調整）*/
  transform: translateY(-0.5px);
}

/* Safari等でベースラインの干渉が出る場合の保険 */
.flow-box .step{
  line-height: 1;                /* 親の行高もリセット */
  align-items: flex-end;
}

  /* =============================================================================================
    gallery
  ===============================================================================================*/
.img-gallery img{
    border-radius: 10px;
    margin-bottom: 100px;
}

.img-gallery, .slider2{ position: relative; z-index: 0; }


/* ============================================================
   施設概要
   ============================================================ */
#facility h2{
  font-size:2rem;
  position:relative;
}


.facility-table {
  border-collapse: collapse;          /* 線の重なり防止 */
  margin: 0 auto;                     /* テーブル全体を中央に */
  width: 100%;
  max-width: 800px;                   /* 横幅制限でバランスよく */
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
  border-radius: 12px;
  overflow: hidden;
}

.facility-table th,
.facility-table td {
  text-align: left;                   /* 左寄せ */
  padding: 10px 14px;
  border-bottom: 1px solid #decfbf;   /* 区切り線 */
  color: #5a3f2e;
  vertical-align: top;                /* 複数行でも上揃え */
  line-height: 1.8;
  font-size: 1rem;
}

/* 左側（見出しセル） */
.facility-table th {
  width: 8em;
  font-weight: 700;
  color: #6c5240;
  background: #faf6f2;
  white-space: nowrap;
}

/* 最後の行の下線削除 */
.facility-table tr:last-child th,
.facility-table tr:last-child td {
  border-bottom: none;
}
/* ============================================================
   ここまで：施設概要CSS
   ============================================================ */





/* ============================================================
   ＃＃＃ お問い合わせ用 CSS（contact section & form 一式）＃＃＃
   ============================================================ */
/* セクション本体 */
#contact{
  background:url("../img/bg_footer.jpg") no-repeat center;
  background-size: cover;
  color:#fff;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* タイトル　お問い合わせ */
#contact .container h2{
  font-size:2rem;
  position:relative;
}


/* テキスト・リスト */
#contact p{ text-align:center; margin:0 0 50px 0; }
#contact ul{ display:flex; justify-content:center; flex-wrap:wrap; }
#contact ul li{ padding:0 20px 20px 0; }

/* 改行の既定（PCでは非表示） */
#contact .contact-detail br{ display:none; }

/* --------------------------------
   お問い合わせフォーム（.tc-***）
   -------------------------------- */
.tc-contact-section{ background:#fbf6ee; } /* 生成り */
.tc-contact-title{
  font-family:"M PLUS Rounded 1c","Kosugi Maru","Hiragino Sans",system-ui,sans-serif;
  font-weight:900; text-align:center; color:#72c050;
  letter-spacing:.08em; font-size:clamp(24px, 4.6vw, 42px); margin:0 0 18px;
}
.tc-contact-panel{
  position:relative; max-width:960px; margin:0 auto; background:#fff;
  border:3px solid #e48a34; border-radius:22px; box-shadow:0 12px 28px rgba(0,0,0,.06);
  padding:clamp(18px, 3.6vw, 38px) clamp(16px, 3.2vw, 40px);
}
.tc-contact-panel::before{
  content:""; position:absolute; inset:9px; border-radius:18px;
  border:2px solid rgba(228,138,52,.35); pointer-events:none;
}
.tc-form-label{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:700; color:#4b3727; margin-bottom:.35rem;
}
.tc-badge-required{
  display:inline-block; font-size:.8rem; line-height:1; color:#fff; background:#d9534f;
  padding:.25rem .45rem; border-radius:.35rem;
}

/* 入力欄（下線のみ） */
.tc-underline .form-control,
.tc-underline .form-select,
.tc-underline textarea{
  border:0; border-bottom:2px dashed #d9d9d9; border-radius:0;
  padding-left:0; padding-right:0; box-shadow:none !important; background:transparent; color:#4b3727;
}
.tc-underline .form-control:focus,
.tc-underline .form-select:focus,
.tc-underline textarea:focus{
  border-bottom:2px solid #e48a34; outline:0;
}
.tc-help{ color:#9aa0a6; font-size:.92rem; }
.tc-sep{
  height:1px;
  background:repeating-linear-gradient(90deg,#e9e9e9, #e9e9e9 6px, transparent 6px, transparent 12px);
  opacity:.9; margin:1.1rem 0 1.2rem;
}

/* 送信ボタン */
.tc-submit{
  background:#72c050; border:0; color:#fff; border-radius:999px; font-weight:700;
  padding:.75rem 2.2rem; box-shadow:0 10px 18px rgba(114,192,80,.25);
}
.tc-submit:hover{ filter:brightness(.96); }

/* エラーメッセージ（Bootstrap互換） */
.invalid-feedback{ color:#b9372b; }


/* ============================================================
   プログラム
   ============================================================ */

#news {
  background: #faf7f2;
  position: relative;
  padding: 60px 0;
  overflow: hidden;
}

/* タイトル　ご利用までの流れ */
#news h2{
  font-size:2rem;
  position:relative;
}

#news header p.lead {
  color: #5a3f2e;
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

/* 各ステップボックス */
#news .flow-box {
  background: #fff;
  border-radius: 16px;
  padding: 2rem 2.5rem;
  margin: 0 auto 3rem;
  max-width: 800px;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}


/* ステップ見出し */
#news .flow-box h3 {
  font-size: 1.3rem;
  color: #5a3f2e;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}


#news .flow-box .step span {
  font-size: 1.1rem;
}

/* 本文 */
#news .flow-box .flow-content p {
  margin: 0;
  color: #5a3f2e;
  line-height: 1.9;
  font-size: 1rem;
}


/* ============================================================
   ＃＃＃ ご利用までの流れ
   ============================================================ */

#course {
  background: #faf7f2;
  position: relative;
  padding: 60px 0;
  overflow: hidden;
}

/* タイトル　ご利用までの流れ */
#course h2{
  font-size:2rem;
  position:relative;
}

#course header p.lead {
  color: #5a3f2e;
  font-size: 1rem;
  line-height: 1.8;
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}

/* 各ステップボックス */
#course .flow-box {
  background: #fff;
  border-radius: 16px;
  padding: 2rem 2.5rem;
  margin: 0 auto 3rem;
  max-width: 800px;
  text-align: left;
  transition: transform .3s ease, box-shadow .3s ease;
}


/* ステップ見出し */
#course .flow-box h3 {
  font-size: 1.3rem;
  color: #5a3f2e;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}


#course .flow-box .step span {
  font-size: 1.1rem;
}

/* 本文 */
#course .flow-box .flow-content p {
  margin: 0;
  color: #5a3f2e;
  line-height: 1.9;
  font-size: 1rem;
}

.flow-content p {
  color: #402a1c;
  line-height: 1.8;
  margin: 2px;
  font-size: 1.05rem;
}


/* =================================================================================
   固定下部エリア（メール・電話）
   ================================================================================= */

    /* 下固定バーの高さ（必要なら調整：64〜72pxあたり） */
    :root { --cta-h: 64px; }

    /* フッターは前面に出さない（重なり防止） */
    #footer{
        position: relative;
        z-index: 1;              /* 以前の z-index を上書き */
    }



    /* 画面下にバーの分だけ“逃げ”を作る（iOS安全域も考慮） */
    body{
        padding-bottom: calc(var(--cta-h) + env(safe-area-inset-bottom) + 16px) !important;
    }


    /* フッターはバーの下に回す */
    #footer {
        position: relative;
        z-index: 0 !important;
    }

    .header-utility {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        gap: 16px;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 70px;                  /* 少し高めで安定感 */
        background: #ffec04;
        z-index: 9999;
        padding: 0 10px;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    /* hoverでエリア全体を浮かせる */
    .header-utility:hover {
        transform: translateY(-4px);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.25);
    }

    .header-utility li {
        list-style: none;
    }

    .header-utility a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;                      /* アイコンと文字の間 */
        text-decoration: none;
        color: black;                   /* 白文字 */
        background: transparent;       /* 背景は透明（全体色に溶け込む） */
        border-radius: 999px;
        padding: 10px 20px;
        white-space: nowrap;
        font-weight: 800;
        font-size: clamp(16px, 2.8vw, 20px); /* 大きめの文字 */
        letter-spacing: -0.03em;
        transition: opacity 0.3s ease;
    }

    /* hover時は少し明るく */
    .header-utility:hover a {
        opacity: 0.95;
    }

    /* アイコンの統一サイズ */
    .header-utility .icon {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

    .header-utility li:first-child a{
        background:url("../img/ico_book.svg") no-repeat 20px center;
        background-size:20px 20px;
    }

    .header-utility li:last-child a{
        background:url("../img/ico_tel.svg") no-repeat 20px center;
        background-size:20px 20px;
    }

    /* =========================
    ≤1080px：PC→タブレット帯
    ========================= */
    @media (max-width:1080px){

    /* 旧 1300/1200 あたり */
    #concept{ background-size:200px auto; }
    .header-area .address{ font-size:1.2em; }
    .header-area dt, .header-area dd{ font-size:1em; }
    #header h1 img, #header h1 canvas{ width:80px; }

    /* 旧 1130 */
    h2{ font-size:.9rem; }
    h2 span{ font-size:3.5vw; }
    .header-area .lead{ font-size:1.5em; }
    .slider{ width:100%; }

    /* 旧 1090 */
    #contact h2{ font-size:1.5rem; }
    .footer-area{ align-items:flex-start; }
    .school-info{ width:40%; }
    .footer-sitemap{ width:56%; }

    /* 旧 960 */
    #g-nav.panelactive ul li{ width:48%; }

    /* 旧 940 */
    .inner{ padding:70px 30px; }
    #header{ height:90vh; }
    .header-area{ top:0; left:0; }
    .header-area .lead{ font-size:1.3em; padding:28vh 0 0 7vw; }
    .header-area .lead::after{ display:none; }
    #header h1 img, #header h1 canvas{ width:60px; left:initial; }
    .slider{ width:100%; }
    small{ text-align:center; }
    #page-top{
        position:relative; text-align:center; right:auto; bottom:auto;
        margin:50px auto 30px; width:80px; animation:none!important; transform:none!important; opacity:1;
    }

    /* 旧 880：固定ヘッダー縮約＆ハンバーガー */
    .sticky-header{ height:64px; }
    .sh-brand .site-title{ display:none; }
    .sh-nav{ display:none; }
    .openbtn{ display:block; position:fixed; top:12px; right:12px; }
}

    /* =========================
    ≤768px：タブレット→スマホ帯
    ========================= */
    @media (max-width:768px){

        /* 見出し・ヒーロー */
        h2{ font-size:.8rem; }
        h2 span{ font-size:3.5vw; }
        .main-catch{ width:96vw; padding:0 3vw; }
        #header .main-catch h1{ font-size:clamp(36px,22vw,120px); }

        /* concept（旧 768 / 700 統合） */
        #concept{ background-size:150px auto; }
        #concept .concept-area{ padding:0; }
        #concept .concept-img{ width:50%; margin:0 auto 30px; }
        #concept .concept-area ul li{
            position:relative; font-size:1rem;
            top:auto!important; left:auto!important; right:auto!important;
            transform:none!important; text-align:center; margin:0 0 10px;
        }
        #concept .concept-area ul li:after{ display:none!important; }

        /* facility table（旧 768） */
        .facility-table{ max-width:95%; }
        .facility-table th, .facility-table td{ padding:8px 10px; font-size:.95rem; }
        .facility-table th{ width:7em; }

        /* course（旧 768） */
        #course{ padding:40px 0; }
        #course header p.lead{ font-size:.95rem; line-height:1.7; }
        #course .flow-box{ padding:1.5rem; max-width:90%; }
        #course .flow-box h3{ font-size:1.15rem; }
        #course .flow-box .flow-content p{ font-size:.95rem; }

        /* news（旧 700） */
        #news{ padding:40px 0; }
        #news header p.lead{ font-size:.95rem; line-height:1.7; }
        #news .flow-box{ padding:1.5rem; max-width:90%; }
        #news .flow-box h3{ font-size:1.15rem; }
        #news .flow-box .flow-content p{ font-size:.95rem; }

        /* その他（旧 768） */
        .school-info, .footer-sitemap{ width:100%; }
        .school-info{
            text-align:center; margin:0 0 70px; padding:0 0 70px;
            border-bottom:1px solid rgba(255,255,255,.8);
        }
        .school-info span{ font-size:1.3rem; }

        /* 旧 600：見出しの任意改行 */
        #contact .contact-detail h2 br{ display:block; }

        /* 旧 580：開閉メニュー時の幅 */
        #g-nav.panelactive ul li{ width:100%; }

        /* 旧 576：フォーム・タイムライン微調整 */
        .tc-contact-panel{ padding:18px 16px; }
        .timeline{ padding-left:6.6rem; }
        .timeline::before{ left:4.6rem; }
        .time-pill{ min-width:5.6rem; }
    }

    /* =========================
    ≤480px：小型スマホ帯
    ========================= */
    @media (max-width:480px){

        #news h2.tc-contact-title {font-size: 1.3rem;}
        #news .flow-box, #course .flow-box{ padding:1.2rem; }
        #news .flow-box h3, #course .flow-box h3{
            flex-direction:column; align-items:flex-start;
        }
        #news .flow-box .step, #course .flow-box .step{ margin-bottom:.3em; }

        /* facility table（旧 480） */
        .facility-table{ max-width:100%; }
        .facility-table th, .facility-table td{ padding:6px 8px; font-size:.88rem; }
        .facility-table th{ width:6.5em; }


        /* ヘッダーユーティリティ（旧 480） */
        .header-utility{ gap:10px; height:64px; }
        .header-utility a{ padding:8px 12px; font-size:1rem; letter-spacing:-.04em; }
        .header-utility .icon{ width:20px; height:20px; }

        /* 旧 450：ロゴ/リード/バッジ縮小 */
        #header h1 img{ width:46px; }
        .header-area .lead{ font-size:1.1em; padding:32vh 0 0 7vw; }
        .badge, .badge-inner{
            width:118px; height:118px; font-size:.7rem; bottom:85px; right:0;
        }
        .badge-inner:hover{ bottom:90px; }

        /* 旧 400：背景サイズ・見出し */
        #concept{ background-size:130px auto; }
        #contact .contact-detail h2{ font-size:1.3rem; }
        #contact .contact-detail p br{ display:block; }
    }