@charset "utf-8";

html {
    scroll-padding-top: 100px; /* ここの数字を大きくするほど、より上で止まります */
    scroll-behavior: smooth;   /* ついでに動きを滑らかにするとオシャレです */
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* 横揺れを強制カット */
}


:root {
  --main: #1d9cb4;      /* ロゴカラー：メイン */
  --sub: #e8f5f7;       /* ロゴの薄塗り：背景用 */
  --accent: #f39800;    /* 補色のオレンジ：重要ボタン用 */
  --text: #33444c;      /* 濃いグレー：文字用 */
}

body {
  font-family: "Kosugi Maru", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.9;
  color: var(--text);
  background-color: #b4f0fc;
  margin: 0; /* bodyの余白をリセット */
  padding-top: 20px; 
    width: 100%;
    overflow-x: hidden; /* 横揺れを強制カット */
}

/* --- ヘッダー --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%; 
    
    align-items: center;/* 垂直方向の中央揃え */
    height: 70px;
    background-color: #b4f0fc; /* ヘッダーの背景色 */
    z-index: 1000;
    
    display: flex;
    justify-content: space-between; 
    align-items: center;
    
    /* 重要：内側の余白を計算に含め、はみ出しを防ぐ */
    padding: 0 15px; 
    box-sizing: border-box; 

    /* 横揺れ・はみ出しを確実に防ぐ */
    max-width: 100%;
}

header .logo img {
    display: block;
    height: 40px;       /* ロゴの大きさを適切に固定 */
    width: auto;
    margin: auto 0;     /* 上下中央に配置 */
}
/* ヘッダー内のh1（塾名・ロゴ部分）のズレを修正 */
header h1 {
    margin: 0; /* 余計なマージンをリセット */
    display: flex;
    align-items: center;
    line-height: 1; /* 行高を1にして上下中央を安定させる */
    height: 100%;   /* ヘッダーの高さに合わせる */
    font-size: clamp(16px, 4vw, 22px); /* 画面幅に合わせて文字サイズを自動調整 */
    font-weight: 900;
    color: #2c2c2c;
}

/* ヘッダー内の画像（ロゴなど）の垂直位置を固定 */
header h1 img {
    margin-right: 8px;
    height: 50px; /* ロゴサイズを固定 */
    width: auto;
    vertical-align: middle;
}
header h1 {
    color: #2c2c2c;
    font-size: 24px; /* スマホ向けに少し小さく調整 */
    font-weight: 900;
    display: flex;
    align-items: center;
}

header h1 span {
    font-size: 14px;
    margin-right: 5px;
}

header h1 img {
    margin-right: 10px;
}

/* --- ハンバーガーボタンのデザイン --- */
.hamburger {
    display: block;
    position: relative;
    width: 30px;
    height: 24px;
    z-index: 100;
    background: none;
    border: none;
    cursor: pointer;
}

.hamburger span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #1d9cb4; /* educoカラー */
    transition: all 0.3s;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { top: 22px; }

/* クリック時(activeクラス付与時)の動き */
.hamburger.active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* --- ナビゲーションメニュー (スマホ) --- */
@media (max-width: 767px) {
    .gnav {
        position: fixed;
        top: 0;
        right: -100%; /* 隠す */
        width: 80%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        transition: all 0.3s;
        z-index: 90;
        padding-top: 80px;
    }

    .gnav.active {
        right: 0; /* 表示 */
    }

    .gnav-navi-1 {
        display: flex;
        flex-direction: column;
    }

    .gnav-navi-1 li a {
        display: block;
        padding: 20px;
        text-align: center;
        color: #1d9cb4;
        font-weight: bold;
        border-bottom: 1px solid #eee;
    }
}

/* --- ナビゲーションメニュー (PC: 768px以上) --- */
@media (min-width: 768px) {
    .hamburger {
        display: none !important;
    }

    .gnav {
        position: static;
        background: none;
        padding: 0;
        box-shadow: none;
        visibility: visible;
        opacity: 1;

        /* 【ここが重要】 */
        display: block !important;
        width: fit-content !important; /* 中身のサイズに強制的に合わせる */
        flex: none !important;          /* 親のflexの中で勝手に広がるのを防ぐ */
        margin-left: auto !important;   /* 左側に余白を作って右へ押し出す */
    }

    .gnav-navi-1 {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        background: #1d9cb4;
        border-radius: 5px;
    }

    .gnav-navi-1 li a {
        display: block;
        padding: 10px 20px;
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        white-space: nowrap; /* 改行を防ぐ */
        list-style-type: none !important; /* 念のためliタグにも指定 */
    }
}


/* --- コンテンツエリア --- */
li {
    list-style: none;
}

main {
    margin-top: 70px; /* header固定分を下げる */
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 30px;
}
/* --- スマホではマージンをリセット --- */
@media (max-width: 768px) {
    /* mainのマージンをリセット */
    main {
        margin-left: 35px !important;
        margin-right: 35px !important;
        margin-top: 70px;    /* ヘッダーの高さ分だけ維持（必要に応じて調整） */
        margin-bottom: 20px;
    }
}
/* TOPセクション全体 */
#top {
    position: relative;
    width: 100%;
    margin-top: 110px; /* ヘッダー分の余白 */
    padding: 20px 0; /* 上下の余白を少し追加 */
}

.top-container {
    position: relative;
    width: 70%;       /* 左右の余白を調整（ここを小さくすると余白が広がる） */
    max-width: 1000px; /* 広がりすぎ防止 */
    height: 28vh;     /* 高さを指定（80vhより少し抑えるとバランスが良いです） */
     /* ---------------- */
    margin: 0 auto;   /* 中央寄せ */
    border-radius: 20px; /* 画像の角を丸く */
    overflow: hidden;    /* 角丸からはみ出る画像をカット */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* ふんわりした影 */
}

/* 背景画像の設定 */
.top-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 画像を少し暗くして文字を読みやすくする（オーバーレイ） */
.top-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(29,156,180,0.4); /* 20%だけ暗くする */
    z-index: 1;
}

/* 文字グループを画像の上に重ねる */
.text-group {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    z-index: 2; /* オーバーレイより上に */
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 10px rgba(29,156,180,0.4);
}

/* タイトル部分 */
.overlay_title {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.5;
}

/* 説明文部分 */
.overlay_description {
    font-size: 1.2rem;
    line-height: 1.8;
}

/* スマホ用改行の制御 */
.sp-br {
    display: none;
}

/* --- ここまではPC用の設定 --- */

/* 画面幅が768px以下の時に適用される設定（スマホ・タブレット用） */
@media (max-width: 768px) {
    body {
        padding-left: 0px;
        padding-right: 0px;
        box-sizing: border-box;
    }
    #top {
        margin-top: 70px; /* ヘッダーが低くなる場合はここも調整 */
        height: auto; /* 高さを中身（画像）に合わせる */
        padding-bottom: 20px;
    }

    .top-container {
        width: 100%;    /* 左右の余白を狭くして画像を大きく見せる */
        height: 15vh;  /* 高さをさらに低くする */
        border-radius: 20px; /* 角丸 */
        box-shadow: 0 10px 30px rgba(0,0,0,0.2); /* ふんわりした影 */
        padding-top: 0;
        padding-bottom: 0;
    }
 /* 背景画像の設定 */
    .top-container img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       margin-top: 0px;
}
    .overlay_title {
        font-size: 1.6rem; /* 文字を小さく */
    }

    .overlay_description {
        font-size: 0.85rem; /* 文字を小さく */
        line-height: 1.6;   /* 行間を少し詰める */
    }
   .sp-br {
        display: block; /* スマホの時だけ改行を有効にする */
    }
}
 
/* 全体の基本設定 */
#introduce {
    padding-top: 70px;
    padding-bottom: 70px;
    line-height: 1.8;
    color: #444;
}
#introduce h2 {
font-size: 30px;
font-weight: 900;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
}

#introduce p {
    margin-bottom: 1.5em;
}

/* educoの願い（強調ボックス） */
.vision-box {
    background-color: #fff;
    border: 2px dashed #1d9cb4;
    border-radius: 20px;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 10px;
    margin: 30px 0;
    position: relative;
}

.vision-box p {
    font-weight: bold;
    color: #5d4a3e;
    margin-bottom: 0;
}

/* 代表挨拶の枠線デザイン */
.representative-greeting {
    border: 2px dashed #1d9cb4; /* ピンクの点線 */
    border-radius: 20px;        /* 角を丸くする */
    padding: 30px;              /* 内側の余白 */
    margin: 40px 0;             /* 外側の余白 */
    background-color: #fff;     /* 中の色は白（点線を際立たせるため） */
}

/* 似顔絵と名前の部分を横並びにする（スマホでは縦に） */
.rep-profile {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.rep-image {
    width: 100px;  /* 似顔絵のサイズ */
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.rep-name {
    font-weight: bold;
    font-size: 1.1rem;
    color: #333;
}




/* 次のステップセクション */
/* 文字のすぐ下に引くシンプルな赤色下線 */
.red-line {
    text-decoration: underline;
    text-decoration-color: #5d4a3e;
    text-underline-offset: 4px;      /* 文字と線の間隔 */
    text-decoration-thickness: 2px; /* 線の太さ */
}

.next-step {
    background-color: rgba(29,156,180,0.4); 
    padding: 40px;
    border-radius: 20px;
    margin-top: 50px;
}

.next-step h3 {
    color: #1d9cb4;
    font-size: 25px;
    margin-bottom: 20px;
    border-bottom: 2px solid #fff;
    display: inline-block;
}

.support-menu {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.support-menu li {
    background: #fff;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 10px;
}

/* お問い合わせボタン */
.contact-button {
    text-align: center;
}

.btn {
    display: inline-block;
    background-color: #fcd21a; /* 温かみのあるオレンジ */
    color: #fff !important;
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: 0.3s;
    box-shadow: 0 4px 0 #d39400;
}

.btn:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #d39400;
    opacity: 0.9;
}

/* セパレータ */
.separator {
    width: 100%;
    text-align: center;      /* 中央に寄せる */
    overflow: hidden;        /* はみ出た分を隠す */
    white-space: nowrap;     /* 改行させずに横一列に強制する */
    margin: 0;
    line-height: 0;          /* 画像の下の余計な隙間を消す */
}

.separator img {
    display: inline-block !important; /* 確実に表示させる */
    width: 35px;             /* アイコン1つのサイズ（小さくする） */
    height: auto;
    margin: 0 9px;           /* アイコン同士の左右のスキマ */
    opacity: 0.5;            /* 少し薄くして「しきり」らしくする */
}

/* お知らせセクション */
#news {
    padding-top: 70px;
    padding-bottom: 70px;
/* marginではなく、内側の幅を制限して中央に寄せるのが一番綺麗に揃います */
    width: 100%;       /* TOPの画像と同じ幅に設定 */
    max-width: 800px; /* 広がりすぎ防止 */
    margin: 0 auto;   /* 左右中央寄せ（これで左右の余白が均等になります） */
}

#news h2{
       font-size: 30px;
    font-weight: 900;
}

.box_new {
    max-width: 800px;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 30px;
    border: 2px solid #1d9cb4;
    background-color: #fff;
    border-radius: 20px;
    box-sizing: border-box; /* パディングを含めて幅を計算 */
}

.box_new h2 {
    font-size: 1.2em;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

.box_new h3 {
    color: black;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.box_new h3 span {
    display: inline-block; /* 背景色をつけるためにブロック要素化 */
    background-color: #888;
    color: #fff;
    padding: 2px 12px; /* 上下左右の余白 */
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: bold;
    margin-right: 10px;
    vertical-align: middle;    /* テキストとの高さを合わせる */
}
/* --- スマホ用の調整（ここが重要！） --- */
@media (max-width: 768px) {
    #news {
        width: 100%;    /* 画面幅いっぱいにする */
        padding-top: 50px;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 40px;
        box-sizing: border-box;
    }
    
    .box_new {
        padding: 20px; /* スマホでは内側の余白を少し狭く */
    }

    .box_new h3 {
    color: black;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

    .box_new h3 span {
    display: inline-block; /* 背景色をつけるためにブロック要素化 */
    background-color: #888;
    color: #fff;
    padding: 2px 12px; /* 上下左右の余白 */
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: bold;
    margin-right: 10px;
    vertical-align: middle;    /* テキストとの高さを合わせる */
}
}

/*過去のお知らせセクション*/
/* 全体のコンテナ */
.news-page-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}

h2 {
    text-align: left;
    border-left: 5px solid #f0ad4e; /* educo様のアクセントカラーを想定 */
    padding-left: 15px;
    margin-bottom: 30px;
    font-size: 1.5rem;
}

/* 各ニュース項目 */
.news-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
    gap: 15px;
}

/* スマホでは日付と文章を縦に並べる */
@media screen and (max-width: 600px) {
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

time {
    color: #888;
    font-size: 0.9rem;
    min-width: 100px;
}

/* NEWラベル */
.label {
    background: #e74c3c;
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
}

/* 過去のお知らせ（アコーディオン） */
.news-page-past-news {
    margin-top: 20px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
}

summary {
    background: #f9f9f9;
    padding: 15px;
    cursor: pointer;
    list-style: none; /* デフォルトの三角を消す */
    font-weight: bold;
    color: #666;
    transition: background 0.3s;
}

summary:hover {
    background: #f0f0f0;
}

/* 三角アイコンを自作する場合（任意） */
summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 10px;
    font-size: 0.8rem;
    transition: transform 0.3s;
}

details[open] summary::before {
    transform: rotate(90deg); /* 開いた時に下を向く */
}

/* アコーディオンの中身 */
.past-news-content {
    padding: 10px 20px;
    background: #fff;
}

.month-title {
    font-size: 1rem;
    color: #f0ad4e;
    margin: 20px 0 10px;
    border-bottom: 1px dashed #f0ad4e;
}

/*過去のお知らせセクション終わり*/






/* レスポンシブ */
@media (max-width: 768px) {
    .next-step {
        padding: 20px;
    }
    .btn {
        width: 100%;
        box-sizing: border-box;
    }
}

#terms {
    max-width: 900px;
    margin: 60px auto;
    padding: 0 20px;
}

#terms h2 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.terms-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap; /* スマホで縦に並ぶように */
}

.terms-card {
    flex: 1;
    min-width: 250px;
    background: #fff;
    border: 2px solid #f0f0f0;
    padding: 20px;
    border-radius: 12px;
}

.terms-card h3 {
    font-size: 1.1rem;
    color: #4A90E2;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.terms-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

.full-terms-link {
    text-align: center;
    margin-top: 30px;
}

.full-terms-link a {
    color: #4A90E2;
    text-decoration: none;
    font-weight: bold;
}

/* スマホ版調整 */
@media (max-width: 768px) {
    .terms-card {
        text-align: left;
    }
}


/* ーーー料金セクション全体ーーー */
#fee {
    padding: 70px 0;
    background-color: #b4f0fc; 
}
#fee h2 {
font-size: 30px;
font-weight: 900;
}

/* 助成金案内エリア */
.support-info {
    width: 100%;           /* 他のコンテナと幅を揃える */
    max-width: 800px;
    margin: 0 auto 40px;  /* 下に余白を作る */
    padding: 25px;
    background-color: #b4f0fc; /* 非常に薄いピンク背景 */
    border: 2px solid: #1d9cb4;
    border-radius: 20px;
    text-align: center;
}

.support-info h3 {
    color: #1d9cb4;
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: bold;
}

.support-info p {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 15px;
    color: #444;
}

/* 外部リンクボタン */
.btn-link {
    display: inline-block;
    color: #1d9cb4;
    font-weight: bold;
    text-decoration: none;
    border-bottom: 1px solid #1d9cb4;
    transition: 0.3s;
}

.btn-link:hover {
    opacity: 0.7;
    border-bottom: 2px solid #1d9cb4;
}

/* 料金表画像エリア */
.fee-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.fee-container .image {
    text-align: center;
}

.fee-container img {
    width: 100%;       /* コンテナ幅いっぱいに広げる */
    height: auto;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 軽い影で浮かせる */
}

/* --- スマホ用調整 --- */
@media (max-width: 768px) {
    #fee {
        background-color: #b4f0fc;
    }
    .support-info,
    .fee-container {
        width: 100%!important; /* bodyのpadding(10px)に合わせる */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0;
        box-sizing: border-box;
    }
     /* 2. 画像エリア自体の余白をゼロにする */
    .fee-container .image {
        padding: 0 !important; /* ここに余白があると画像が小さくなります */
        margin: 0 !important;
        width: 100%;
        text-align: center;
    }
        /* 3. 画像を横幅いっぱいにする */
    .fee-container img {
        width: 100% !important; /* 親の幅に対して100% */
        max-width: none;        /* 制限を解除 */
        height: auto;
        display: block;         /* 下の隙間を消す */
        border-radius: 10px;    /* 助成金枠の角丸と合わせる */
        box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 軽い影で浮かせる */
    }
    .support-info h3 {
        font-size: 1rem;
    }

    .support-info p {
        font-size: 0.85rem;
        text-align: left; /* スマホでは左寄せが見やすい */
    }
}
/* ーー料金セクション終わりーー */

/* 営業時間エリア */
#open {
    padding: 70px 0;
    background-color: #b4f0fc; 
}

#open h2 {
font-size: 30px;
font-weight: 900;
}

.class-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.class-container h2 {
    text-align: left;
    /* もし余白が気になる場合は以下も調整 */
    margin-left: 0; 
    padding-left: 0;
}

.class-container .image {
    text-align: center;
}

.class-container img {
    width: 100%;       /* コンテナ幅いっぱいに広げる */
    height: auto;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 軽い影で浮かせる */
}

/* --- スマホ用調整 --- */
@media (max-width: 768px) {
    #class {
        background-color: #b4f0fc;
    }
    .support-info,
    .class-container {
        width: 100%!important; /* bodyのpadding(10px)に合わせる */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0;
        box-sizing: border-box;
    }
     /* 2. 画像エリア自体の余白をゼロにする */
    .class-container .image {
        padding: 0 !important; /* ここに余白があると画像が小さくなります */
        margin: 0 !important;
        width: 100%;
        text-align: center;
    }
        /* 3. 画像を横幅いっぱいにする */
    .class-container img {
        width: 100% !important; /* 親の幅に対して100% */
        max-width: none;        /* 制限を解除 */
        height: auto;
        display: block;         /* 下の隙間を消す */
        border-radius: 10px;    /* 助成金枠の角丸と合わせる */
        box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 軽い影で浮かせる */
    }
    .support-info h3 {
        font-size: 1rem;
    }

    .support-info p {
        font-size: 0.85rem;
        text-align: left; /* スマホでは左寄せが見やすい */
    }
}
/* ーー営業時間セクション終わりーー */

/* 比較エリア */
#hikaku {
    padding: 70px 0;
    background-color: #b4f0fc; 
}

#hikaku h2 {
font-size: 30px;
font-weight: 900;
}

.class-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.class-container h2 {
    text-align: left;
    /* もし余白が気になる場合は以下も調整 */
    margin-left: 0; 
    padding-left: 0;
}

.class-container .image {
    text-align: center;
}

.class-container img {
    width: 100%;       /* コンテナ幅いっぱいに広げる */
    height: auto;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 軽い影で浮かせる */
}

/* --- スマホ用調整 --- */
@media (max-width: 768px) {
    #class {
        background-color: #b4f0fc;
    }
    .support-info,
    .class-container {
        width: 100%!important; /* bodyのpadding(10px)に合わせる */
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0;
        box-sizing: border-box;
    }
     /* 2. 画像エリア自体の余白をゼロにする */
    .class-container .image {
        padding: 0 !important; /* ここに余白があると画像が小さくなります */
        margin: 0 !important;
        width: 100%;
        text-align: center;
    }
        /* 3. 画像を横幅いっぱいにする */
    .class-container img {
        width: 100% !important; /* 親の幅に対して100% */
        max-width: none;        /* 制限を解除 */
        height: auto;
        display: block;         /* 下の隙間を消す */
        border-radius: 10px;    /* 助成金枠の角丸と合わせる */
        box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 軽い影で浮かせる */
    }
    .support-info h3 {
        font-size: 1rem;
    }

    .support-info p {
        font-size: 0.85rem;
        text-align: left; /* スマホでは左寄せが見やすい */
    }
}
/* ーー比較セクション終わりーー */


/* ーーdayセクション全体ーーー */
#day {
    padding: 70px 0;
    background-color: #b4f0fc; 
}

#day h2 {
font-size: 30px;
font-weight: 900;
}

/* 2. 画像エリア自体の余白をゼロにする */
    .image {
        padding: 0 !important; /* ここに余白があると画像が小さくなります */
        margin: 0 !important;
        width: 100%;
        text-align: center;
        border-radius: 20px;    /* 助成金枠の角丸と合わせる */
    }
        /* 3. 画像を横幅いっぱいにする */
    .image img {
        width: 100% !important; /* 親の幅に対して100% */
        max-width: none;        /* 制限を解除 */
        height: auto;
        display: block;         /* 下の隙間を消す */
        border-radius: 20px;    /* 助成金枠の角丸と合わせる */
        box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* 軽い影で浮かせる */
    }
/* 全体のレイアウト */
#day {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.8;
}

/* 画像の調整 */
.image {
    text-align: center;
    margin-bottom: 30px;
}

.image img {
    max-width: 100%;
    height: auto;
    border-radius: 20px; /* 角を少し丸く */
    margin-bottom: 30px;
}

/* 各スケジュールのブロック */
.schedule-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc; /* 項目ごとの区切り線 */
}

.schedule-item:last-child {
    border-bottom: none; /* 最後の線は消す */
}

/* 見出しの装飾 */
.schedule-item h3 {
    color: #4A90E2; /* educoのイメージカラーに合わせて調整してください */
    font-size: 1.25rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

/* 見出しの左側にワンポイントのアクセント */
.schedule-item h3::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 24px;
    background-color: #4A90E2;
    margin-right: 12px;
    border-radius: 4px;
}

/* 文章の調整 */
.text p {
    margin: 0;
    font-size: 1rem;
    color: #555;
}

/* スマホ表示での調整 */
@media (max-width: 600px) {
    #day {
        padding: 20px;
    }
    .schedule-item h3 {
        font-size: 1.1rem;
    }
}
#day {
    max-width: 800px;
    padding: 0!important;
    margin: 0!important;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.8;
}
/* ーーdayセクション終わりーーー */


/* アクセスセクション全体 */
#access {
    max-width: 800px;
    margin: 70px auto 0;
    text-align: center; /* 基本は中央寄せ */
}
#access h2 {
font-size: 30px;
font-weight: 900;
}

#access h1 {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 30px;
    position: relative;
    display: inline-block;
}

/* 見出しの下に線を引く場合（お好みで） */
#access h1::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: #4A90E2;
    margin: 8px auto 0;
}

/* マップをレスポンシブ対応にする */
.map-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9の比率 */
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

/* 住所・電話番号のテキスト */
#access p {
    margin: 10px 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
}

/* TELラベルの装飾 */
#access p span {
    background: #4A90E2;
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 0.9rem;
    font-weight: bold;
}

/* スマホ版の調整 */
@media (max-width: 600px) {
    #access {
        text-align: left; /* ご希望に合わせてスマホ時は左寄せ */
    }
    #access h1::after {
        margin: 8px 0 0; /* 見出しの線も左寄せに */
    }
}
/* ーーアクセスセクション終わりーーー */




/* ーー問い合わせーーー */
.contact-intro{
    padding-top: 40px;
}
/* フォーム全体の装飾 */
.contact-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
}

.form-item {
    margin-bottom: 20px;
}

/* ラベルのデザイン */
.form-item label, .label-text {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

/* 入力欄（テキスト、セレクト、テキストエリア）の幅を揃える */
.form-item input[type="text"],
.form-item input[type="tel"],
.form-item input[type="email"],
.form-item select,
.form-item textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    box-sizing: border-box; /* 幅にパディングを含める */
}

/* ラジオボタンの並び */
.radio-group {
    display: flex;
    gap: 15px;
    padding: 5px 0;
}

.radio-group label {
    font-weight: normal;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* 送信ボタンの親要素（位置と上下の余白） */
.form-submit {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 60px; /* ボタン下の余白 */
}

/* 送信ボタン（reCAPTCHAボタン）本体のデザイン */
.form-submit .g-recaptcha {
    background-color: #1d9cb4 !important; /* educoブルー */
    color: #fff !important;
    padding: 15px 40px;
    border: none;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    display: inline-block;
    transition: background-color 0.3s, opacity 0.3s;
}

/* マウスを乗せた時の動き */
.form-submit .g-recaptcha:hover {
    background-color: #f83e22 !important;
    opacity: 0.9;
}

/* お問い合わせの導入文（テキスト） */
.contact-intro {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 30px;
}
/* お知らせ一覧全体の枠 */
.news-list {
    margin: 40px auto;
    max-width: 800px; /* 読みやすい幅に制限 */
    padding: 0 20px;
}
/* スマホ版の調整 */
@media (max-width: 600px) {
.contact-intro {
    font-size: 0.9rem;
}
}

/* ーー問い合わせ終わりーーー */



/* 利用規約ページ専用スタイル */
.terms-page {
    background-color: #b4f0fc;
    padding: 70px 0px;
}

#terms-content {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

#terms-content h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.lead-text {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 0.95rem;
}

.rules-group h2 {
    font-size: 1.2rem;
    color: #4A90E2;
    border-left: 4px solid #4A90E2;
    padding-left: 15px;
    margin-top: 30px;
    margin-bottom: 15px;
}

.rules-group p, .rules-group li {
    font-size: 1rem;
    color: #444;
    line-height: 1.8;
    margin-bottom: 10px;
}

.rules-group ul {
    padding-left: 20px;
}

.back-home {
    margin-top: 50px;
    text-align: center;
}

.back-home a {
    display: inline-block;
    padding: 10px 30px;
    background: #4A90E2;
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    transition: 0.3s;
}

.back-home a:hover {
    opacity: 0.8;
}

/* スマホ対応 */
@media (max-width: 768px) {

    #terms-content {
        padding: 20px;
        margin-top: 0px;
    }
    
    /* タイトルとリード文を左寄せに */
    #terms-content h1,
    .lead-text {
        text-align: left;
    }

    /* リード文の中の <br> を無効化して改行させない */
    .lead-text br {
        display: none;
    }
    .rules-group h2 {
        font-size: 1.1rem;
    }
}
/* 利用規約ページ専用スタイル終わり */

/* --- フッター --- */
footer {
    color: white;
    background-color: #1d9cb4;
    width: 100%;
    height: 50px;
    padding: 0px;
    text-align: right;
}