/*
Theme Name: Seiun Gakusha
Theme URI: https://seiungakusha.jp/
Description: 青雲学舎のWebサイトテーマです。
Version: 1.0.0
Author: Kodai Yoshida
License: 白谷塾
*/

/* リセットCSS -by Eric Meyer */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {  
    margin: 0;  
    padding: 0;  
    border: 0;  
    font-size: 100%;  
    font: inherit;  
    vertical-align: baseline; 
    text-decoration: none;
}


html {
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
    font-size: 0.9rem;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}


.seiungakusha_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    letter-spacing: -3px;
}

.seiungakusha__icon--blue {
    color: #2269b1;
}

.seiungakusha__icon--green {
    color: #2aa480;
}




/* headerパソコンサイズ */
header {
    position: fixed;  /* 固定位置に設定 */
    top: 0;          /* 上端に配置 */
    left: 0;         /* 左端に配置 */
    width: 100%;     /* 幅を100%に */
    z-index: 1000;   /* 他の要素の上に表示 */
    background-color: #fff;  /* 背景色を設定 */
    font-family: 'Noto Sans JP', sans-serif;
}

header a {
    text-decoration: none;
    display: block;
}

.header-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 0;    /* 下マージンを0に */
    padding-bottom: 0;   /* 下パディングを0に */
    aspect-ratio: 20/1;
    width: 100%;
    height: auto;
}

.header-icon-flex {
    width: 30%;
    display: flex;
    flex-direction: row;
    align-items: left;
    justify-content: left;
}

.header-container-icon {
    aspect-ratio: 1/1;
    width: 30%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header_company-name {
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 700;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-contact {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-top: 15px;
    width: 80%;
    height: auto;
    padding: 0 10px;
    gap: 10px;
}

.header-contact_document {
    font-size: clamp(10px, 1.5vw, 40px);
    font-weight: 700;
    color: #fff;
    background-color: #2269b1;
    padding: 10px 20px;
    aspect-ratio: 5/2;
    width: 15%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.header-contact_document:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.header-contact-tel {
    width: 20%;
    height: auto;
    display: flex;
    flex-direction: column;
}

.header-contact-tel-title {
    font-size: clamp(8px, 0.7vw, 24px);
    font-weight: 700;
    color: #2269b1;
}

.header-contact-tel-tel {
    font-size: clamp(8px, 1.5vw, 32px);
    font-weight: 700;
    color: #2269b1;
}

.header-contact-tel-time {
    font-size: clamp(8px, 1vw, 24px);
    font-weight: 700;
    color: #2269b1;
}

.header-contact-free {

    aspect-ratio: 5/2;
    width: 15%;
    height: auto;
    background-color: #ff734f;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.header-contact-free:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.header-contact-free_title {
    font-size: clamp(8px, 1vw, 40px);
    font-weight: 700;
    color: #fff;
}

.header-contact-line1 {
    aspect-ratio: 5/2;
    width: 15%;
    height: auto;
    background-color: #2aa480;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: clamp(0px, 0.7%, 10px) 20px;
    transition: all 0.3s ease;
}

.header-contact-line1:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}


.header-contact-line1_lead {
    font-size: clamp(10px, 1vw, 40px);
    font-weight: 700;
    color: #2AA480;
    background-color: #ffef3e;
    border-radius: 3px;
}

.header-contact-line1_title {
    font-size: clamp(10px, 1vw, 40px);
    font-weight: 700;
    color: #fff;
}

.header-contact-line2 {
    aspect-ratio: 5/2;
    width: 15%;
    height: auto;
    background-color: #2aa480;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    padding: clamp(0px, 0.7%, 10px) 20px;
    transition: all 0.3s ease;
}

.header-contact-line2:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

.header-contact-line2_lead {
    font-size: clamp(10px, 1vw, 40px);
    font-weight: 700;
    color: #2AA480;
    background-color: #ffef3e;
    border-radius: 3px;
}

.header-contact-line2_title {
    font-size: clamp(10px, 1vw, 40px);
    font-weight: 700;
    color: #fff;
}

.header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 20/1;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.header-nav li {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(12px, 2vw, 16px);
    font-weight: 700;
    border-right: 1px solid #d9d9d9;
    width: 16.66%;
    height: 100%;
    text-align: center;
    position: relative;
    margin: 0;
    padding: 0;
}

.header-nav li:last-child {
    border-right: none;
}

.header-nav li a {
    color: #333333;
    transition: all 0.3s ease;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.header-nav li a:hover {
    color: #2269b1;
    opacity: 0.8;
    background-color: rgba(34, 105, 177, 0.1);
}

/* headerモバイルサイズ */
@media (max-width: 768px) {
    header {
        background-color: transparent;  /* 背景色を設定 */
    }
    
    .header-icon-flex {
        width: 100%;
    }
    
    .header-container-icon {
        width:15%;
    }
    
    .header_company-name {
        font-size: clamp(24px, 2vw, 32px);
    }

    /* モバイルサイズ用に要素を非表示*/
    .header-contact {
        display: none;
    }
    .header-nav {
        display: none;
    }

}




/* ヒーローセクション */
#hero {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
}

.hero-img {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    object-fit: cover;
    font-family: 'Noto Sans JP', sans-serif;
    position: absolute;
    top: 20%;
    left: 0;
}

/* 文字の大きさなど以下で調整する */
.hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 5%;
    position: absolute;
    top: 10%;
    left: 0%;
}

.hero-text_main {
    font-size: clamp(18px, 2vw, 32px);
    font-weight: 500;
    color: #2269b1;
    border-bottom: 2px solid #2269b1;
    margin-bottom: 5%;
}

.hero-text h2 {
    font-size: clamp(30px, 6vw, 80px);
    font-weight: 700;
    color: #2269b1;
}

.hero-text h2 span {
    font-weight: 700;
    background-color: #2269b1;
    color: #fff;
    padding: 0px 15px;
    margin: 6px 3px;
    display: inline-block;
    gap: 6px 3px;
}

.hero-text_sub1 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    color: #2269b1;
    margin-top: 20px;
}

.hero-text_sub2 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    color: #2269b1;
    margin-top: 20px;
}   

.hero-text_sub3 {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 500;
    color: #2269b1;
    margin-top: 20px;
    margin-bottom: 60px;
}   

.hero-text_sub {
    display: none;  /* PCでは非表示 */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}


@media (max-width: 768px) {
    #hero {
        font-family: 'Noto Sans JP', sans-serif;
        width: 100%;
        height: auto;
        position: relative;
        margin-top: 5%;
    }
    
    .hero-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    /* 文字の大きさなど以下で調整する */
    .hero-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: -20%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        width: 100%;
        padding: 0 0;
        margin: 0 0;
    }
    
    .hero-text_main {
        text-align: center;
        margin-bottom: 20px;
        font-size: clamp(18px, 2vw, 32px);
        background-color: #2aa480;
        color: #fff;
        padding: 1% 3%;
        border: none;
    }
    
    .hero-text h2 {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .hero-text_sub1,
    .hero-text_sub2,
    .hero-text_sub3 {
        text-align: center;
        margin: 10px 0;
    }
}




/* page-course.php */
.content {
    display: flex;
    width: 100%;
    margin: 0;
}

.content .left {
    width: 35%;
    position: relative;
    z-index: 10;
}

.content .left .text-area {
    position: absolute;
    top: 60%;
    left: 60%;
}

.content .left .title {
    line-height: 1;
    margin-bottom: 56px;
}

.content .left .title .en {
    display: block;
    font-size: 4.375rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.content .left .title .ja {
    display: block;
    font-size: 0.875rem;
}

.content .left .copy {
    font-size: 0.875rem;
}


.content .right {
    width: 65%;
    clip-path: polygon(160px 0, 100% 0, 100% 100%, 0 100%);
}

.content .right img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    object-fit: cover;
}


.news {
    margin-bottom: 20px;
    font-family: 'Noto Sans JP', sans-serif;
}

.news-flex {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    text-decoration: none; 
}

.news-title {
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 500;
    padding: 10px;
    margin: 5px 20px 5px 5px;
}

.news-title h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 500;
    color: #333;
}


.news-navi_content {
    font-size: clamp(12px, 2vw, 16px);
    padding: 5px 20px;
    border: 2px solid #2269b1;
    color: #1b66a4; /* 通常のリンクの色 */
    margin-top: 40px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.news-navi_content:hover {
    background-color: #2269b1;
    color: #fff;
    transform: translateY(-2px);
}

.news-list_item-container {
    display: flex;
    font-size: clamp(16px, 1.5vw, 18px);
    border-bottom: 1px solid #79787848;
}

.news-list_item_date {
    font-size: clamp(12px, 1.5vw, 14px);
    margin: 15px 0 15px 20px;
}

.news-list_item_type {
    font-size: clamp(12px, 1.5vw, 14px);
    margin: 15px 0 18px 20px;
    padding: 5px 30px;
    background-color: #2269b1;
    color: #fff;
    width: 100px;         /* 固定幅を追加 */
    text-align: center;   /* 中央揃え */
}

.news-list_item_title {
    font-size: clamp(12px, 1.5vw, 14px);
    margin: 15px 0 15px 20px;
}

.news-list_item_date-type{
    display: flex;
    align-items: center;
    justify-content: center;
}

.news .seiungakusha_icon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 20px;
    letter-spacing: -3px;
    font-size: 13px;
}

.news .seiungakusha__icon--blue {
    color: #2269b1;
}

.seiungakusha__icon--green {
    color: #2aa480;
}


/* 768px以下のデバイスでは非表示 */
@media (max-width: 768px) {

    .news-list_item-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .news-list_item_date {
        margin: 15px 0 15px 15px;
    }

    .news-list_item_type {
        margin: 15px 0 18px 20px;
        padding: 5px 30px;

        width: 90px;         /* 固定幅を追加 */
    }

    .news-list_item_title {
        font-size: clamp(12px, 1.5vw, 14px);
        margin: -3% 0 15px 20px;
    }
}



#banner-section {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    max-width: 1800px;
    margin: 0 auto;
    margin-top: 20px;
}

.banner-section_left {
    width: 32%;
}

.banner-section_center {
    width: 32%;
}

.banner-section_right {
    width: 32%;
}

@media screen and (max-width: 480px) {
    #banner-section {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: space-between;
        max-width: 1800px;
        margin: 0 auto;
        margin-top: 20px;
    }
    
    .banner-section_left {
        width: 100%;
        margin: 0 auto;
    }
    
    .banner-section_center {
        width: 100%;
        margin: 0 auto;
    }
    
    .banner-section_right {
        width: 100%;
        margin: 0 auto;
    }
}






/* アイデンティティセクション */

.identity_mobile-img {
    display:none;
}

.identity {
    font-family: 'Noto Sans JP', sans-serif;
    width: 100%;
}

.identity_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}

.identity_content_title {
    position: absolute;
    top: 0%;
    left: 3%;
    font-size: clamp(50px, 18vw, 1000px);
    text-align: center;
    color: #2269b1;
    font-weight: 700;
    opacity: 0.2;
}

.identity_content_text {
    position: absolute;
    top: 22%;
    left: 10%;
}

.identity_content_text_1 {
    font-size: clamp(12px, 3.8vw, 100px);
    color: #333;
    font-weight: 500;
    text-align: left;
    margin-bottom: 2%;
}

.identity_content_text_2 {
    font-size: clamp(12px, 3.8vw, 100px);
    color: #333;
    font-weight: 500;
    text-align: left;
    margin-bottom: 2%;
}

.identity_content_text_3 {
    font-size: clamp(12px, 3.8vw, 100px);
    color: #333;
    font-weight: 500;
    text-align: left;
    margin-bottom: 2%;
}

.identity_span {
    color: white;
    background-color: #2269b1;
}

.identity_content_text_4 {
    position: absolute;
    top: 57%;
    left: 10%;
    font-size: clamp(12px, 1.2vw, 60px);
    width: 40%;
    line-height: 2;
}

.identity_img_1 {
    aspect-ratio: 1/1;
    width: 25%;
    object-fit: cover;
    height: auto;
    position: absolute;
    top: 13%;
    right: 10%;
    z-index: 10;
}

.identity_img_2 {
    aspect-ratio: 5/4;
    width: 32%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 40%;
    right: 16%;
    z-index: 20;
}

.identity_img_3 {
    aspect-ratio: 4/3;
    width: 15%;
    height: auto;
    object-fit: cover;
    position: absolute;
    top: 70%;
    right: 8%;
    z-index: 30;
}

.identity_content_mobile-text {
    display: none;
}

/* 768px以下のデバイスでは非表示 */
@media (max-width: 768px) {

    .identity_mobile-img {
        display:block;
        margin: 0 3%;
        width: 94%;
        height: auto;
    }
    
    .identity_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        aspect-ratio: 16/9;
        width: 100%;
        height: auto;
    }
    
    .identity_content_title {
        position: absolute;
        top: -10%;
        left: 50%;
        transform: translateX(-50%);
        font-size: clamp(50px, 30vw, 1000px);
        font-weight: 650;
        opacity: 0.1;
    }
    
    .identity_content_text {
        position: absolute;
        top: 22%;
        left: 8%;
    }
    
    .identity_content_text_1 {
        font-size: clamp(12px, 10vw, 1000px);
        color: #333;
        font-weight: 700;
        text-align: left;
        margin-bottom: 2%;
    }
    
    .identity_content_text_2 {
        font-size: clamp(12px, 10vw, 1000px);
        color: #333;
        font-weight: 700;
        text-align: left;
        margin-bottom: 2%;
    }
    
    .identity_content_text_3 {
        font-size: clamp(12px, 10vw, 1000px);
        color: #333;
        font-weight: 700;
        text-align: left;
        margin-bottom: 2%;
    }
    
    
    .identity_content_text_4 {
        display: none;
    }

    .identity_content_mobile-text {
        display: block;
        font-size: clamp(12px, 4vw, 100px);
        line-height: 2;
        margin: 0 5%;
        margin-top: 10%;
        margin-bottom: 5%;
    }
    
    .identity_img_1 {
        display: none;
    }
    
    .identity_img_2 {
        display: none;
    }
    
    .identity_img_3 {
        display: none;
    }
}
    




.strength {
    margin-bottom: 20px;
    background-color: #e8f1f6;
    padding: 0 5%;
    font-family: 'Noto Sans JP', sans-serif;
}

.strength h2 {
    font-size: clamp(25px, 3vw, 32px);
    text-align: center;
    padding: 20px;
    margin: 0 20px 20px 20px;
    color: #2269b1;
    font-weight: 700;
}

.strength_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;  /* レスポンシブ対応 */
}

.strength_point {
    position: relative;
    padding-top: 30px;
    /* width: calc(30% - 14px); */
    width: 320px;
    margin-bottom: 10%;
    background-color: #fff;
    padding: 10px;
    aspect-ratio: 3/7;
}

.strength_point p {
    line-height: 1.8;
    font-size: clamp(14px, 2vw, 16px);
}

.strength_point-point {
    top: -3%;
    left: 43%;
    transform: translateX(-50%, -50%);
    position: absolute;
}

.strength_point_number {
    width: 50px;
    height: 50px;
    background-color: #2269b1;
    border-radius: 50%;
    position: relative;
    top: 0;
    left: 0;
}

.strength_point_text {
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    padding: 0;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.strength_point_number1 {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 50px;
    padding: 0;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
}

.strength h3    {
    font-size: clamp(18px, 2vw, 32px);
    color: #333;
    font-weight: 500;
    padding: 10px;
    text-align: center;
}

.strength h3 span {
    background-color: #ffef3e;
    padding: 1px 5px;
}

.strength-point p {
    font-size: clamp(10px, 2vw, 14px);
    padding: 10px;
    gap: 20px 5px;
}

.strength_point img {
    width: 60%;
    height: 15%;
    object-fit: contain;
    margin: 10% 25%;
}

@media (max-width: 768px) {
    
    .strength h2 {
        font-size: clamp(25px, 3vw, 32px);
        padding: 20px;
        margin: 0 20px 40px 20px;
    }
    
    .strength_point {
        position: relative;  
        width: 90%;
        margin-bottom: 10%;
        padding: 3% 7%;
    }

    .strength_point p {
        line-height: 1.8;
    }
    
    .strength_point-point {
        top: -4%;
        left: 43%;
        transform: translateX(-50%, -50%);
        position: absolute;
    }
    
    .strength_point_number {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        position: relative;
        top: 0;
        left: 0;
    }
    
    .strength_point_text {
        font-size: clamp(10px, 3.5vw, 24px);
        text-align: center;
        line-height: 0px;
        padding: 0;
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    .strength_point_number1 {
        font-size: clamp(10px, 6vw, 24px);
        line-height: 0px;
        position: absolute;
        top: 35%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .strength h3    {
        font-size: clamp(18px, 8vw, 240px);
    }
    
    .strength h3 span {
        background-color: #ffef3e;
        padding: 1px 5px;
    }
    
    .strength_point p {
        font-size: clamp(10px, 4vw, 240px);
        padding: 10px;
        gap: 10px 5px;
    }

    .strength_point img {
        width: 50%;
        height: auto;
        margin: 13% 25%;
    }
}











.elementary {
    background-color: #2269b1;
    color: #fff;
    opacity: 0.8;
}

.junior {
    background-color: #ff734f;
    color: #fff;
    opacity: 0.8;
}

.high {
    background-color: #2aa480;
    color: #fff;
    opacity: 0.8;
}

.voice {
    background-color: #f8f6eb;
    font-family: 'Noto Sans JP', sans-serif;
}

.achievement {
    background-color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
}

.achievement_flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    background-color: #eaf2f7;
    padding: 40px 80px;
}

.achievement_flex h2 {
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.university_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #2aa480;
    color: #fff;
    padding: 5px 20px;
}

.highschool_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #ff734f;
    color: #fff;
    padding: 5px 20px;
}   

.junior_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #ff9b4f;
    color: #fff;
    padding: 5px 20px;
}

.middleschool_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #2269b1;
    color: #fff;
    padding: 5px 20px;
}

.achievement_university_main1 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 400; 
    margin-bottom: 30px;
}

.achievement_university_main2 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 400;
    margin-bottom: 30px;
}       

.achievement_university_item1 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(14px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 30px;
}

.achievement_university_item2 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 30px;
}

.achievement_university_item3 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
}

.achievement_university_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_highschool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_highschool_item1 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
}

.achievement_highschool_item2 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
}

.achievement_highschool_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_juniorhighschool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_juniorhighschool_item1 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
}

.achievement_juniorhighschool_item2 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
}

.achievement_juniorhighschool_item3 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
}

.achievement_juniorhighschool_item4 {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
}

.achievement_juniorhighschool_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_middleschool {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_middleschool_item {
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
}

.achievement_middleschool_other {
    font-size: clamp(12px, 1.5vw, 20px);
    font-weight: 200;
    margin-bottom: 60px;
}   

@media (max-width: 768px) {
    .elementary {
        background-color: #2269b1;
        color: #fff;
        opacity: 0.8;
    }
    
    .junior {
        background-color: #ff734f;
        color: #fff;
        opacity: 0.8;
    }
    
    .high {
        background-color: #2aa480;
        color: #fff;
        opacity: 0.8;
    }
    
    .voice {
        background-color: #f8f6eb;
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    .achievement {
        background-color: #fff;
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    .achievement_flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        background-color: #eaf2f7;
        padding: 40px 80px;
    }
    
    .achievement_flex h2 {
        font-size: clamp(28px, 3vw, 48px);
        font-weight: 700;
        color: #2269b1;
        text-align: center;
        padding: 20px;
        margin: 20px;
    }
    
    .university_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #2aa480;
        color: #fff;
        padding: 5px 20px;
    }
    
    .highschool_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #ff734f;
        color: #fff;
        padding: 5px 20px;
    }   
    
    .junior_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #ff9b4f;
        color: #fff;
        padding: 5px 20px;
    }
    
    .middleschool_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #2269b1;
        color: #fff;
        padding: 5px 20px;
    }
    
    .achievement_university_main1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 40px;
        font-size: clamp(20px, 2vw, 32px);
        font-weight: 400; 
        margin-bottom: 30px;
    }
    
    .achievement_university_main2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 40px;
        font-size: clamp(20px, 2vw, 32px);
        font-weight: 400;
        margin-bottom: 30px;
    }       
    
    .achievement_university_item1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(14px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 30px;
    }
    
    .achievement_university_item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 30px;
    }
    
    .achievement_university_item3 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    
    .achievement_university_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }
    
    .achievement_highschool {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .achievement_highschool_item1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_highschool_item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    
    .achievement_highschool_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }
    
    .achievement_juniorhighschool {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .achievement_juniorhighschool_item1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item3 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item4 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    
    .achievement_juniorhighschool_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }
    
    .achievement_middleschool {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .achievement_middleschool_item {
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_middleschool_other {
        font-size: clamp(12px, 1.5vw, 20px);
        font-weight: 200;
        margin-bottom: 10px;
    }
}



.course {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 5%;
    font-family: 'Noto Sans JP', sans-serif;
}

.course h2 {
    font-size: clamp(25px, 3vw, 32px);
    text-align: center;
    padding: 20px;
    margin: 20px;
    color: #333;
    font-weight: 700;
}
.course_flex {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 20px;  /* 要素間の間隔 */
    flex-wrap: wrap;  /* レスポンシブ対応 */
}
.course_item {
    width: calc(28% - 14px);
    min-width: 280px;
    margin-bottom: 50px;
}

.course_item p {
    line-height: 1.8;
}

.course_item_image {
    width: 100%;  /* 修正：親要素いっぱいに */
    position: relative;
    overflow: hidden;  /* 追加：はみ出し防止 */
    margin-bottom: 20px;
}

.course_item_image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;  /* 追加：画像の縦横比を固定 */
    object-fit: cover;
    vertical-align: bottom;
}

.course_item_image h3 {
    position: absolute;
    bottom: 0;  /* 修正：下端にぴったり */
    left: 0;    /* 修正：左端から */
    right: 0;   /* 追加：右端まで */
    transform: none;  /* 削除：transformを使用しない */
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 500;
    padding: 10px 0;  /* 修正：上下のパディングを追加 */
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    width: 100%;
    text-align: center;
    margin: 0;  /* 追加：マージンをリセット */
}


@media (max-width: 768px) {
.course {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 5%;
    font-family: 'Noto Sans JP', sans-serif;
}

.course h2 {
    font-size: clamp(25px, 3vw, 32px);
    text-align: center;
    padding: 20px;
    margin: 20px;
    color: #333;
    font-weight: 700;
}
.course_flex {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 20px;  /* 要素間の間隔 */
    flex-wrap: wrap;  /* レスポンシブ対応 */
}
.course_item {
    width: 95%;
    min-width: 280px;
    margin-bottom: 10%;
}

.course_item p {
    font-size: clamp(12px, 4vw, 240px);
    line-height: 1.8;
}

.course_item_image {
    width: 100%;  /* 修正：親要素いっぱいに */
    position: relative;
    overflow: hidden;  /* 追加：はみ出し防止 */
    margin-bottom: 20px;
}

.course_item_image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;  /* 追加：画像の縦横比を固定 */
    object-fit: cover;
    vertical-align: bottom;
}


.course_item_image .elementary {
    background-color: #2269b1;
    color: #fff;
    opacity: 0.9;
}

.course_item_image junior {
    background-color: #ff734f;
    color: #fff;
    opacity: 0.9;
}

.course_item_image .high {
    background-color: #2aa480;
    color: #fff;
    opacity: 0.9;
}

.course_item_image h3 {
    position: absolute;
    bottom: 0;  /* 修正：下端にぴったり */
    left: 0;    /* 修正：左端から */
    right: 0;   /* 追加：右端まで */
    transform: none;  /* 削除：transformを使用しない */
    font-size: clamp(12px, 6vw, 40px);
    font-weight: 700;
    padding: 2% 0;  /* 修正：上下のパディングを追加 */
    color: #fff;
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.5); */
    width: 100%;
    text-align: center;
    margin: 0;  /* 追加：マージンをリセット */
}


#fullPanel1 {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明パネル */
    z-index: 9999;
}

#fullPanel2 {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明パネル */
    z-index: 9999;
}

#fullPanel3 {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明パネル */
    z-index: 9999;
}

.hidden {
    display: none;
}
}








.voice {
    background-color: #f8f6eb;
    font-family: 'Noto Sans JP', sans-serif;
}


.voice {
    position: relative;
}

.voice_student1_img {
    position: absolute;
    top: -2%;
    left: 10%;
    width: 5%;
}

.voice_student2_img {
    position: absolute;
    top: 1%;
    left: 5%;
    width: 5%;
}

.voice_student3_img {
    position: absolute;
    top: -2%;
    right: 10%;
    width: 5%;
}

.voice_student4_img {
    position: absolute;
    top: 1%;
    right: 5%;
    width: 5%;
}

.voice h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.voice_flex {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0 auto;  /* 追加：中央揃え */
    padding: 0 5%;  /* 追加：左右の余白 */
}

.voice_item {
    display: flex;
    flex-direction: row;  /* 修正：横並びに */
    gap: 20px;  /* 追加：要素間の間隔 */
    width: calc(45% - 15px);
    min-width: 280px;
    max-width: 560px;
    height: auto;  /* 修正：高さを自動に */
    margin: 20px 0;
    padding: 15px;
    background: #ffffff;
    border-radius: 3px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

.voice_item p {
    line-height: 1.8;
}

.voice_item_image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* 修正：左揃えに */
    width: 80px;  /* 追加：画像エリアの幅を固定 */
    margin: 10px 0 0 20px;
    padding: 20px 0 40px 0;
}

.voice_item img {
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    object-fit: cover;
}

.voice_item_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 0 0;
    padding: 20px 20px 40px 0;
}

.voice_item_image span {
    display: block;
    font-size: clamp(12px, 1.2vw, 14px);
    text-align: center;
}

.voice_item_text h5 {
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
    color: #2269b1;
}

.voice_item_text p {
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.6;
    text-align: left;
}


@media (max-width: 768px) {
    
.voice {
    background-color: #f8f6eb;
    font-family: 'Noto Sans JP', sans-serif;
}


.voice {
    position: relative;
}

.voice_student1_img {
    position: absolute;
    top: 0;
    left: 10%;
    width: 5%;
}

.voice_student2_img {
    position: absolute;
    top: 1%;
    left: 5%;
    width: 5%;
}

.voice_student3_img {
    position: absolute;
    top: 0%;
    right: 10%;
    width: 5%;
}

.voice_student4_img {
    position: absolute;
    top: 1%;
    right: 5%;
    width: 5%;
}

.voice h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.voice_flex {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0 auto;  /* 追加：中央揃え */
    padding: 0 5%;  /* 追加：左右の余白 */
}

.voice_item {
    display: flex;
    flex-direction: column;  /* 修正：横並びに */
    align-items: center;
    justify-content: center;
    width: 90%;
    min-width: 280px;
    height: auto;  /* 修正：高さを自動に */
    margin: 1% 0;
    padding: 15px;
    background: #ffffff;
    border-radius: 3px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

.voice_item_image {
    display: flex;
    flex-direction: column;
    width: 50%;  /* 追加：画像エリアの幅を固定 */
    justify-content: center;
    align-items: center;
    margin: 0 3%;
    padding: 20px 0 0 0;
}

.voice_item img {
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    object-fit: cover;
}

.voice_item_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0 3%;
}

.voice_item_image span {
    display: block;
    font-size: clamp(12px, 3.5vw, 120px);
    text-align: center;
    color: #a7a7a7;
}

.voice_item_text h5 {
    font-size: clamp(16px, 6vw, 240px);
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
    color: #2269b1;
}

.voice_item_text p {
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    font-size: clamp(12px, 4vw, 240px);
    line-height: 1.6;
    text-align: left;
}
}







.achievement {
    background-color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
}

.achievement_flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    background-color: #eaf2f7;
    padding: 40px 80px;
}

.achievement_flex h2 {
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.university_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #2aa480;
    color: #fff;
    padding: 5px 20px;
}

.highschool_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #ff734f;
    color: #fff;
    padding: 5px 20px;
}   

.junior_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #ff9b4f;
    color: #fff;
    padding: 5px 20px;
}

.middleschool_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #2269b1;
    color: #fff;
    padding: 5px 20px;
}

.achievement_university_main1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 400; 
    margin-bottom: 30px;
    padding: 0 5%;
}

.achievement_university_main2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 5%;
}       

.achievement_university_item1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(14px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 5%;
}

.achievement_university_item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 5%;
}

.achievement_university_item3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
    padding: 0 5%;
}

.achievement_university_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_highschool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_highschool_item1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_highschool_item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
    padding: 0 5%;
}

.achievement_highschool_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_juniorhighschool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_juniorhighschool_item1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_juniorhighschool_item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_juniorhighschool_item3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_juniorhighschool_item4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
    padding: 0 5%;
}



.achievement_juniorhighschool_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_middleschool {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_middleschool_item {
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
}

.achievement_middleschool_other {
    font-size: clamp(12px, 1.5vw, 20px);
    font-weight: 200;
    margin-bottom: 60px;
}   

@media (max-width: 768px) {
    .elementary {
        background-color: #2269b1;
        color: #fff;
        opacity: 0.8;
    }
    
    .junior {
        background-color: #ff734f;
        color: #fff;
        opacity: 0.8;
    }
    
    .high {
        background-color: #2aa480;
        color: #fff;
        opacity: 0.8;
    }
    
    .voice {
        background-color: #f8f6eb;
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    .achievement {
        background-color: #fff;
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    .achievement_flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        background-color: #eaf2f7;
        padding: 40px 80px;
    }
    
    .achievement_flex h2 {
        font-size: clamp(28px, 3vw, 48px);
        font-weight: 700;
        color: #2269b1;
        text-align: center;
        padding: 20px;
        margin: 20px;
    }
    
    .university_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #2aa480;
        color: #fff;
        padding: 5px 20px;
    }
    
    .highschool_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #ff734f;
        color: #fff;
        padding: 5px 20px;
    }   
    
    .junior_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #ff9b4f;
        color: #fff;
        padding: 5px 20px;
    }
    
    .middleschool_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #2269b1;
        color: #fff;
        padding: 5px 20px;
    }
    
    .achievement_university_main1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 40px;
        font-size: clamp(20px, 2vw, 32px);
        font-weight: 400; 
        margin-bottom: 30px;
    }
    
    .achievement_university_main2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 40px;
        font-size: clamp(20px, 2vw, 32px);
        font-weight: 400;
        margin-bottom: 30px;
    }       
    
    .achievement_university_item1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(14px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 30px;
    }
    
    .achievement_university_item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 30px;
    }
    
    .achievement_university_item3 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    
    .achievement_university_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }
    
    .achievement_highschool {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .achievement_highschool_item1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_highschool_item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    
    .achievement_highschool_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }
    
    .achievement_juniorhighschool {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .achievement_juniorhighschool_item1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item3 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item4 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    
    .achievement_juniorhighschool_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }
    
    .achievement_middleschool {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .achievement_middleschool_item {
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_middleschool_other {
        font-size: clamp(12px, 1.5vw, 20px);
        font-weight: 200;
        margin-bottom: 10px;
    }
}



.course {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 5%;
    font-family: 'Noto Sans JP', sans-serif;
}

.course h2 {
    font-size: clamp(25px, 3vw, 32px);
    text-align: center;
    padding: 20px;
    margin: 20px;
    color: #333;
    font-weight: 700;
}
.course_flex {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 20px;  /* 要素間の間隔 */
    flex-wrap: wrap;  /* レスポンシブ対応 */
}
.course_item {
    width: calc(28% - 14px);
    min-width: 280px;
    margin-bottom: 50px;
}

.course_item p {
    line-height: 1.8;
}

.course_item_image {
    width: 100%;  /* 修正：親要素いっぱいに */
    position: relative;
    overflow: hidden;  /* 追加：はみ出し防止 */
    margin-bottom: 20px;
}

.course_item_image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;  /* 追加：画像の縦横比を固定 */
    object-fit: cover;
    vertical-align: bottom;
}

.course_item_image h3 {
    position: absolute;
    bottom: 0;  /* 修正：下端にぴったり */
    left: 0;    /* 修正：左端から */
    right: 0;   /* 追加：右端まで */
    transform: none;  /* 削除：transformを使用しない */
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 500;
    padding: 10px 0;  /* 修正：上下のパディングを追加 */
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    width: 100%;
    text-align: center;
    margin: 0;  /* 追加：マージンをリセット */
}


@media (max-width: 768px) {
.course {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 5%;
    font-family: 'Noto Sans JP', sans-serif;
}

.course h2 {
    font-size: clamp(25px, 3vw, 32px);
    text-align: center;
    padding: 20px;
    margin: 20px;
    color: #333;
    font-weight: 700;
}
.course_flex {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 20px;  /* 要素間の間隔 */
    flex-wrap: wrap;  /* レスポンシブ対応 */
}
.course_item {
    width: 95%;
    min-width: 280px;
    margin-bottom: 10%;
}

.course_item p {
    font-size: clamp(12px, 4vw, 240px);
    line-height: 1.8;
}

.course_item_image {
    width: 100%;  /* 修正：親要素いっぱいに */
    position: relative;
    overflow: hidden;  /* 追加：はみ出し防止 */
    margin-bottom: 20px;
}

.course_item_image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;  /* 追加：画像の縦横比を固定 */
    object-fit: cover;
    vertical-align: bottom;
}


.course_item_image .elementary {
    background-color: #2269b1;
    color: #fff;
    opacity: 0.9;
}

.course_item_image junior {
    background-color: #ff734f;
    color: #fff;
    opacity: 0.9;
}

.course_item_image .high {
    background-color: #2aa480;
    color: #fff;
    opacity: 0.9;
}

.course_item_image h3 {
    position: absolute;
    bottom: 0;  /* 修正：下端にぴったり */
    left: 0;    /* 修正：左端から */
    right: 0;   /* 追加：右端まで */
    transform: none;  /* 削除：transformを使用しない */
    font-size: clamp(12px, 6vw, 40px);
    font-weight: 700;
    padding: 2% 0;  /* 修正：上下のパディングを追加 */
    color: #fff;
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.5); */
    width: 100%;
    text-align: center;
    margin: 0;  /* 追加：マージンをリセット */
}


#fullPanel1 {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明パネル */
    z-index: 9999;
}

#fullPanel2 {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明パネル */
    z-index: 9999;
}

#fullPanel3 {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明パネル */
    z-index: 9999;
}

.hidden {
    display: none;
}
}








.voice {
    background-color: #f8f6eb;
    font-family: 'Noto Sans JP', sans-serif;
}


.voice {
    position: relative;
}

.voice_student1_img {
    position: absolute;
    top: -2%;
    left: 10%;
    width: 5%;
}

.voice_student2_img {
    position: absolute;
    top: 1%;
    left: 5%;
    width: 5%;
}

.voice_student3_img {
    position: absolute;
    top: -2%;
    right: 10%;
    width: 5%;
}

.voice_student4_img {
    position: absolute;
    top: 1%;
    right: 5%;
    width: 5%;
}

.voice h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.voice_flex {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0 auto;  /* 追加：中央揃え */
    padding: 0 5%;  /* 追加：左右の余白 */
}

.voice_item {
    display: flex;
    flex-direction: row;  /* 修正：横並びに */
    gap: 20px;  /* 追加：要素間の間隔 */
    width: calc(45% - 15px);
    min-width: 280px;
    max-width: 560px;
    height: auto;  /* 修正：高さを自動に */
    margin: 20px 0;
    padding: 15px;
    background: #ffffff;
    border-radius: 3px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

.voice_item p {
    line-height: 1.8;
}

.voice_item_image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* 修正：左揃えに */
    width: 80px;  /* 追加：画像エリアの幅を固定 */
    margin: 10px 0 0 20px;
    padding: 20px 0 40px 0;
}

.voice_item img {
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    object-fit: cover;
}

.voice_item_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 0 0;
    padding: 20px 20px 40px 0;
}

.voice_item_image span {
    display: block;
    font-size: clamp(12px, 1.2vw, 14px);
    text-align: center;
}

.voice_item_text h5 {
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
    color: #2269b1;
}

.voice_item_text p {
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.6;
    text-align: left;
}


@media (max-width: 768px) {
    
.voice {
    background-color: #f8f6eb;
    font-family: 'Noto Sans JP', sans-serif;
}


.voice {
    position: relative;
}

.voice_student1_img {
    position: absolute;
    top: 0;
    left: 10%;
    width: 5%;
}

.voice_student2_img {
    position: absolute;
    top: 1%;
    left: 5%;
    width: 5%;
}

.voice_student3_img {
    position: absolute;
    top: 0%;
    right: 10%;
    width: 5%;
}

.voice_student4_img {
    position: absolute;
    top: 1%;
    right: 5%;
    width: 5%;
}

.voice h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.voice_flex {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0 auto;  /* 追加：中央揃え */
    padding: 0 5%;  /* 追加：左右の余白 */
}

.voice_item {
    display: flex;
    flex-direction: column;  /* 修正：横並びに */
    align-items: center;
    justify-content: center;
    width: 90%;
    min-width: 280px;
    height: auto;  /* 修正：高さを自動に */
    margin: 1% 0;
    padding: 15px;
    background: #ffffff;
    border-radius: 3px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

.voice_item_image {
    display: flex;
    flex-direction: column;
    width: 50%;  /* 追加：画像エリアの幅を固定 */
    justify-content: center;
    align-items: center;
    margin: 0 3%;
    padding: 20px 0 0 0;
}

.voice_item img {
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    object-fit: cover;
}

.voice_item_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0 3%;
}

.voice_item_image span {
    display: block;
    font-size: clamp(12px, 3.5vw, 120px);
    text-align: center;
    color: #a7a7a7;
}

.voice_item_text h5 {
    font-size: clamp(16px, 6vw, 240px);
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
    color: #2269b1;
}

.voice_item_text p {
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    font-size: clamp(12px, 4vw, 240px);
    line-height: 1.6;
    text-align: left;
}
}







.achievement {
    background-color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
}

.achievement_flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    background-color: #eaf2f7;
    padding: 40px 80px;
}

.achievement_flex h2 {
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.university_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #2aa480;
    color: #fff;
    padding: 5px 20px;
}

.highschool_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #ff734f;
    color: #fff;
    padding: 5px 20px;
}   

.junior_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #ff9b4f;
    color: #fff;
    padding: 5px 20px;
}

.middleschool_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #2269b1;
    color: #fff;
    padding: 5px 20px;
}

.achievement_university_main1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 400; 
    margin-bottom: 30px;
    padding: 0 5%;
}

.achievement_university_main2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 5%;
}       

.achievement_university_item1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(14px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 5%;
}

.achievement_university_item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 5%;
}

.achievement_university_item3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
    padding: 0 5%;
}

.achievement_university_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_highschool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_highschool_item1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_highschool_item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
    padding: 0 5%;
}

.achievement_highschool_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_juniorhighschool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_juniorhighschool_item1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_juniorhighschool_item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_juniorhighschool_item3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_juniorhighschool_item4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
    padding: 0 5%;
}



.achievement_juniorhighschool_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_middleschool {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_middleschool_item {
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
}

.achievement_middleschool_other {
    font-size: clamp(12px, 1.5vw, 20px);
    font-weight: 200;
    margin-bottom: 60px;
}   

@media (max-width: 768px) {
    .elementary {
        background-color: #2269b1;
        color: #fff;
        opacity: 0.8;
    }
    
    .junior {
        background-color: #ff734f;
        color: #fff;
        opacity: 0.8;
    }
    
    .high {
        background-color: #2aa480;
        color: #fff;
        opacity: 0.8;
    }
    
    .voice {
        background-color: #f8f6eb;
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    .achievement {
        background-color: #fff;
        font-family: 'Noto Sans JP', sans-serif;
    }
    
    .achievement_flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        background-color: #eaf2f7;
        padding: 40px 80px;
    }
    
    .achievement_flex h2 {
        font-size: clamp(28px, 3vw, 48px);
        font-weight: 700;
        color: #2269b1;
        text-align: center;
        padding: 20px;
        margin: 20px;
    }
    
    .university_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #2aa480;
        color: #fff;
        padding: 5px 20px;
    }
    
    .highschool_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #ff734f;
        color: #fff;
        padding: 5px 20px;
    }   
    
    .junior_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #ff9b4f;
        color: #fff;
        padding: 5px 20px;
    }
    
    .middleschool_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #2269b1;
        color: #fff;
        padding: 5px 20px;
    }
    
    .achievement_university_main1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 40px;
        font-size: clamp(20px, 2vw, 32px);
        font-weight: 400; 
        margin-bottom: 30px;
    }
    
    .achievement_university_main2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 40px;
        font-size: clamp(20px, 2vw, 32px);
        font-weight: 400;
        margin-bottom: 30px;
    }       
    
    .achievement_university_item1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(14px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 30px;
    }
    
    .achievement_university_item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 30px;
    }
    
    .achievement_university_item3 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    
    .achievement_university_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }
    
    .achievement_highschool {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .achievement_highschool_item1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_highschool_item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    
    .achievement_highschool_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }
    
    .achievement_juniorhighschool {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .achievement_juniorhighschool_item1 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item2 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item3 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item4 {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    
    .achievement_juniorhighschool_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }
    
    .achievement_middleschool {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .achievement_middleschool_item {
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_middleschool_other {
        font-size: clamp(12px, 1.5vw, 20px);
        font-weight: 200;
        margin-bottom: 10px;
    }
}



.course {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 5%;
    font-family: 'Noto Sans JP', sans-serif;
}

.course h2 {
    font-size: clamp(25px, 3vw, 32px);
    text-align: center;
    padding: 20px;
    margin: 20px;
    color: #333;
    font-weight: 700;
}
.course_flex {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 20px;  /* 要素間の間隔 */
    flex-wrap: wrap;  /* レスポンシブ対応 */
}
.course_item {
    width: calc(28% - 14px);
    min-width: 280px;
    margin-bottom: 50px;
}

.course_item p {
    line-height: 1.8;
}

.course_item_image {
    width: 100%;  /* 修正：親要素いっぱいに */
    position: relative;
    overflow: hidden;  /* 追加：はみ出し防止 */
    margin-bottom: 20px;
}

.course_item_image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;  /* 追加：画像の縦横比を固定 */
    object-fit: cover;
    vertical-align: bottom;
}

.course_item_image h3 {
    position: absolute;
    bottom: 0;  /* 修正：下端にぴったり */
    left: 0;    /* 修正：左端から */
    right: 0;   /* 追加：右端まで */
    transform: none;  /* 削除：transformを使用しない */
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 500;
    padding: 10px 0;  /* 修正：上下のパディングを追加 */
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    width: 100%;
    text-align: center;
    margin: 0;  /* 追加：マージンをリセット */
}


@media (max-width: 768px) {
.course {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 0 5%;
    font-family: 'Noto Sans JP', sans-serif;
}

.course h2 {
    font-size: clamp(25px, 3vw, 32px);
    text-align: center;
    padding: 20px;
    margin: 20px;
    color: #333;
    font-weight: 700;
}
.course_flex {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 20px;  /* 要素間の間隔 */
    flex-wrap: wrap;  /* レスポンシブ対応 */
}
.course_item {
    width: 95%;
    min-width: 280px;
    margin-bottom: 10%;
}

.course_item p {
    font-size: clamp(12px, 4vw, 240px);
    line-height: 1.8;
}

.course_item_image {
    width: 100%;  /* 修正：親要素いっぱいに */
    position: relative;
    overflow: hidden;  /* 追加：はみ出し防止 */
    margin-bottom: 20px;
}

.course_item_image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;  /* 追加：画像の縦横比を固定 */
    object-fit: cover;
    vertical-align: bottom;
}


.course_item_image .elementary {
    background-color: #2269b1;
    color: #fff;
    opacity: 0.9;
}

.course_item_image junior {
    background-color: #ff734f;
    color: #fff;
    opacity: 0.9;
}

.course_item_image .high {
    background-color: #2aa480;
    color: #fff;
    opacity: 0.9;
}

.course_item_image h3 {
    position: absolute;
    bottom: 0;  /* 修正：下端にぴったり */
    left: 0;    /* 修正：左端から */
    right: 0;   /* 追加：右端まで */
    transform: none;  /* 削除：transformを使用しない */
    font-size: clamp(12px, 6vw, 40px);
    font-weight: 700;
    padding: 2% 0;  /* 修正：上下のパディングを追加 */
    color: #fff;
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.5); */
    width: 100%;
    text-align: center;
    margin: 0;  /* 追加：マージンをリセット */
}


#fullPanel1 {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明パネル */
    z-index: 9999;
}

#fullPanel2 {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明パネル */
    z-index: 9999;
}

#fullPanel3 {

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8); /* 黒の半透明パネル */
    z-index: 9999;
}

.hidden {
    display: none;
}
}








.voice {
    background-color: #f8f6eb;
    font-family: 'Noto Sans JP', sans-serif;
}


.voice {
    position: relative;
}

.voice_student1_img {
    position: absolute;
    top: -2%;
    left: 10%;
    width: 5%;
}

.voice_student2_img {
    position: absolute;
    top: 1%;
    left: 5%;
    width: 5%;
}

.voice_student3_img {
    position: absolute;
    top: -2%;
    right: 10%;
    width: 5%;
}

.voice_student4_img {
    position: absolute;
    top: 1%;
    right: 5%;
    width: 5%;
}

.voice h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.voice_flex {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0 auto;  /* 追加：中央揃え */
    padding: 0 5%;  /* 追加：左右の余白 */
}

.voice_item {
    display: flex;
    flex-direction: row;  /* 修正：横並びに */
    gap: 20px;  /* 追加：要素間の間隔 */
    width: calc(45% - 15px);
    min-width: 280px;
    max-width: 560px;
    height: auto;  /* 修正：高さを自動に */
    margin: 20px 0;
    padding: 15px;
    background: #ffffff;
    border-radius: 3px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

.voice_item p {
    line-height: 1.8;
}

.voice_item_image {
    display: flex;
    flex-direction: column;
    align-items: flex-start;  /* 修正：左揃えに */
    width: 80px;  /* 追加：画像エリアの幅を固定 */
    margin: 10px 0 0 20px;
    padding: 20px 0 40px 0;
}

.voice_item img {
    width: 50px;
    height: 50px;
    border-radius: 50%; 
    object-fit: cover;
}

.voice_item_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 0 0;
    padding: 20px 20px 40px 0;
}

.voice_item_image span {
    display: block;
    font-size: clamp(12px, 1.2vw, 14px);
    text-align: center;
}

.voice_item_text h5 {
    font-size: clamp(16px, 1.6vw, 24px);
    font-weight: bold;
    margin-bottom: 5px;
    text-align: left;
    color: #2269b1;
}

.voice_item_text p {
    font-size: clamp(14px, 1.4vw, 16px);
    line-height: 1.6;
    text-align: left;
}


@media (max-width: 768px) {
    
.voice {
    background-color: #f8f6eb;
    font-family: 'Noto Sans JP', sans-serif;
}


.voice {
    position: relative;
}

.voice_student1_img {
    position: absolute;
    top: 0;
    left: 10%;
    width: 5%;
}

.voice_student2_img {
    position: absolute;
    top: 1%;
    left: 5%;
    width: 5%;
}

.voice_student3_img {
    position: absolute;
    top: 0%;
    right: 10%;
    width: 5%;
}

.voice_student4_img {
    position: absolute;
    top: 1%;
    right: 5%;
    width: 5%;
}

.voice h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.voice_flex {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin: 0 auto;  /* 追加：中央揃え */
    padding: 0 5%;  /* 追加：左右の余白 */
}

.voice_item {
    display: flex;
    flex-direction: column;  /* 修正：横並びに */
    align-items: center;
    justify-content: center;
    width: 90%;
    min-width: 280px;
    height: auto;  /* 修正：高さを自動に */
    margin: 1% 0;
    padding: 15px;
    background: #ffffff;
    border-radius: 3px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
}

.voice_item_image {
    display: flex;
    flex-direction: column;
    width: 50%;  /* 追加：画像エリアの幅を固定 */
    justify-content: center;
    align-items: center;
    margin: 0 3%;
    padding: 20px 0 0 0;
}

.voice_item img {
    width: 100px;
    height: 100px;
    border-radius: 50%; 
    object-fit: cover;
}

.voice_item_text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
    padding: 0 3%;
}

.voice_item_image span {
    display: block;
    font-size: clamp(12px, 3.5vw, 120px);
    text-align: center;
    color: #a7a7a7;
}

.voice_item_text h5 {
    font-size: clamp(16px, 6vw, 240px);
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
    color: #2269b1;
}

.voice_item_text p {
    text-align: center;
    justify-content: center;
    margin: 0 auto;
    font-size: clamp(12px, 4vw, 240px);
    line-height: 1.6;
    text-align: left;
}
}







.achievement {
    background-color: #fff;
    font-family: 'Noto Sans JP', sans-serif;
}

.achievement_flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    background-color: #eaf2f7;
    padding: 40px 80px;
}

.achievement_flex h2 {
    font-size: clamp(28px, 3vw, 48px);
    font-weight: 700;
    color: #2269b1;
    text-align: center;
    padding: 20px;
    margin: 20px;
}

.university_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #2aa480;
    color: #fff;
    padding: 5px 20px;
}

.highschool_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #ff734f;
    color: #fff;
    padding: 5px 20px;
}   

.junior_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #ff9b4f;
    color: #fff;
    padding: 5px 20px;
}

.middleschool_title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    background-color: #2269b1;
    color: #fff;
    padding: 5px 20px;
}

.achievement_university_main1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 400; 
    margin-bottom: 30px;
    padding: 0 5%;
}

.achievement_university_main2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
    font-size: clamp(20px, 2vw, 32px);
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 5%;
}       

.achievement_university_item1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(14px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 5%;
}

.achievement_university_item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 30px;
    padding: 0 5%;
}

.achievement_university_item3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
    padding: 0 5%;
}

.achievement_university_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_highschool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_highschool_item1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_highschool_item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
    padding: 0 5%;
}

.achievement_highschool_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_juniorhighschool {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_juniorhighschool_item1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_juniorhighschool_item2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_juniorhighschool_item3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 10px;
    padding: 0 5%;
}

.achievement_juniorhighschool_item4 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 50px;
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
    padding: 0 5%;
}



.achievement_juniorhighschool_other {
    font-size: clamp(12px, 1.2vw, 20px);
    font-weight: 200;
}

.achievement_middleschool {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.achievement_middleschool_item {
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: 400;
    margin-bottom: 60px;
}

.achievement_middleschool_other {
    font-size: clamp(12px, 1.5vw, 20px);
    font-weight: 200;
    margin-bottom: 60px;
}   



@media (max-width: 768px) {
    
    .achievement {
    width: 100%;
    }
    
    .achievement_flex {
    width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 20px;
        flex-wrap: wrap;
        background-color: #eaf2f7;
    padding: 0;
    }
    
    .achievement_flex h2 {
        text-align: center;
    padding: 0;
    margin: 0 auto;
    }
    
    .university_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #2aa480;
        color: #fff;
    padding: 5px 0;
    }
    
    .highschool_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #ff734f;
        color: #fff;
    padding: 5px 0;
    }   
    
    .junior_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
        background-color: #ff9b4f;
        color: #fff;
    padding: 5px 0;
    }
    
    .middleschool_title {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(18px, 1.5vw, 24px);
        font-weight: 400;
    margin-bottom: 10%;
        background-color: #2269b1;
        color: #fff;
    padding: 5px 0;
    }
    
    .achievement_university_main1 {
        display: flex;
    flex-direction: column;
    flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    column-gap: 3%;
    font-size: clamp(16px, 4vw, 240px);
        font-weight: 400; 
        margin-bottom: 30px;
    }
    
    .achievement_university_main2 {
        display: flex;
    flex-direction: column;
    flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 40px;
    font-size: clamp(16px, 4vw, 240px);
        font-weight: 400;
        margin-bottom: 30px;
    }       


    
    .achievement_university_item1 {
        display: flex;
    flex-direction: column;
    flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    font-size: clamp(16px, 4vw, 240px);
        font-weight: 400;
        margin-bottom: 30px;
    padding: 0 5%;
    }
    
    .achievement_university_item2 {
        display: flex;
    flex-direction: column;
    flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
    margin: 0 5%
    }
    
    .achievement_university_item3 {
        display: flex;
    flex-direction: column;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    }
    


.achievement_university_main {
    font-size: clamp(18px, 4vw, 240px);
}

.achievement_university_item {
    font-size: clamp(18px, 4vw, 240px);
}

    
    .achievement_highschool {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .achievement_highschool_item1 {
        display: flex;
    flex-direction: column;
    flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    padding: 0 5%;
    }
    
    .achievement_highschool_item2 {
        display: flex;
    flex-direction: column;
    flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 60px;
    padding: 0 5%;
    }
    
    .achievement_highschool_other {
        font-size: clamp(12px, 1.2vw, 20px);
        font-weight: 200;
    }


.achievement_highschool_item {
    font-size: clamp(20px, 4vw, 240px);
}


    
    .achievement_juniorhighschool {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    .achievement_juniorhighschool_item1 {
        display: flex;
    flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    }
    
    .achievement_juniorhighschool_item2 {
        display: flex;
    flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    padding: 0 5%;
    }
    
    .achievement_juniorhighschool_item3 {
        display: flex;
    flex-direction: column;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
        margin-bottom: 10px;
    padding: 0 5%;
    }
    
    .achievement_juniorhighschool_item4 {
        display: flex;
    flex-direction: column;
        align-items: center;
        justify-content: center;
        column-gap: 50px;
        font-size: clamp(16px, 1.5vw, 24px);
        font-weight: 400;
    padding: 0 5%;
    }
    
    .achievement_juniorhighschool_other {
    font-size: clamp(16px, 4vw, 240px);
        font-weight: 200;
    }



.achievement_juniorhighschool_item {
    font-size: clamp(16px, 4vw, 240px);
}




    
    .achievement_middleschool {
        display: flex;
    flex-direction: column;
        align-items: center;
        justify-content: center;
    gap: 2%;
    }
    
    .achievement_middleschool_item {
    font-size: clamp(20px, 4vw, 240px);
        font-weight: 400;
    margin-bottom: 2%;
    }

    
    .achievement_middleschool_other {
    font-size: clamp(20px, 4vw, 240px);
        font-weight: 200;
    margin-bottom: 10%;
}   
}












.guide {
    width: 100%;
    padding: 50px 0;
    overflow-x: hidden;    /* 横方向のはみ出しを隠す */
    box-sizing: border-box; /* パディングを幅に含める */
    font-family: 'Noto Sans JP', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.guide_flex {
    width: 100%;
    max-width: 1200px;     /* 最大幅を設定 */
    margin: 0 auto;        /* 中央揃え */
    padding: 0 20px;       /* 左右の余白 */
}


.guide a {
    text-decoration: none;
    display: block;
}

.guide h2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: #000;
    text-align: center;
    margin-bottom: 3%;
}

.guide-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
}

.guide-container_map {
    aspect-ratio: 4/3;
    width: 60%;      
    height: auto;          
    margin-right: 3%;
    padding-left: 3%;
    max-width: 600px;
}

.guide-container-item { 
    width: 50%;
    padding: 20px;
    text-align: left;      /* 親要素も左寄せに */
    color: #fff;
}

.guide-container-item_title { 
    display: flex;
    align-items: left;
    justify-content: left;
}

.guide-container-item_title img {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    object-fit:fill;     /* 画像のアスペクト比を保持 */
}

.guide-container-item_title h4 {
    font-size: clamp(18px, 1.5vw, 24px);
    color: #2269b1;
    font-weight: 700;
}

.guide-container-item_address {
    text-align: left;
    width: 400px;
    border-bottom: 2px dotted #c2c2c2;
    padding-bottom: 15px;
    margin: 10px 0;
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
    gap: 10px;
    color: #000;
}

.guide-container-item-contact,
.guide-container-item-line {
    background: #2269b1;
    text-align: center;
    width: fit-content;
    margin-left: 0;
    margin-top: 15px;
    font-weight: 700;
    aspect-ratio: 5/1;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.guide-container-item-line_link {
    text-decoration: none;
    display: inline-block;
    width: 100%;
}

.guide-container-item-line {
    background: #2aa480;
    margin-top: 10px;
}

.guide-container-item-contact_title,
.guide-container-item-line_title {
    font-size: clamp(12px, 1.5vw, 14px);
}

.guide-container-item-contact_tel,
.guide-container-item-line_school {
    font-size: clamp(18px, 1.5vw, 24px);
}

.guide-container-item-contact_time {
    font-size: clamp(10px, 1.5vw, 12px);
}

.guide-container-item a {
    display: block;
    color: inherit;
    text-decoration: none;
    width: 100%;
}



@media screen and (max-width: 768px) {
    .guide {
        width: 100%;
        padding: 50px 0;
        overflow-x: hidden;
        box-sizing: border-box;
        font-family: 'Noto Sans JP', sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .guide_flex {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .guide h2 {
        font-size: clamp(24px, 3vw, 120px);
        font-weight: 700;
        color: #000;
        text-align: center;
        width: 100%;
        padding: 0 20px;
        margin-bottom: 3%;
    }
    
    .guide-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 0 auto;
        padding: 0;
        margin-bottom: 3%;
    }
    
    .guide-container_map {
        aspect-ratio: 4/3;
        width: 90%;
    height: auto;
        margin: 0;
        padding: 0;
        max-width: 600px;
        margin-bottom: 3%;
    }
    
    .guide-container-item { 
        width: 90%;
        padding: 0;
        text-align: center;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .guide-container-item_title { 
        display: flex;
        flex-direction: column;
        align-items: left;
        justify-content: left;
        margin-bottom: 2%;
    }
    
    .guide-container-item_title img {
        border-radius: 50%;
        width: 60px;
        height: 60px;
    object-fit: cover;
        margin-bottom: 10px;
    }
    
    .guide-container-item_title h4 {
        font-size: clamp(18px, 1.5vw, 24px);
        color: #2269b1;
        font-weight: 700;
        text-align: left;
    }
    
    .guide-container-item_address {
        text-align: left;
        width: 90%;
        border-bottom: 2px dotted #c2c2c2;
        padding-bottom: 15px;
        margin: 10px 0;
        font-size: clamp(14px, 1.5vw, 16px);
        font-weight: 400;
        color: #000;
    }
    
    .guide-container-item-contact {
        background: #2269b1;
        text-align: center;
        width: 100%;
        margin: 15px 0;
        font-weight: 700;
        aspect-ratio: 5/1;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .guide-container-item-contact_title {
        font-size: clamp(12px, 1.5vw, 14px);
        text-align: center;
    }
    
    .guide-container-item-contact_tel {
        font-size: clamp(18px, 1.5vw, 24px);
        text-align: center;
    }
    
    .guide-container-item-contact_time {
        font-size: clamp(10px, 1.5vw, 12px);
        text-align: center;
    }
    
    .guide-container-item-line {
        background: #2aa480;
        text-align: center;
        width: 100%;
        margin: 10px 0;
        font-weight: 700;
        color: #fff;
        aspect-ratio: 5/1;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .guide-container-item-line_title {
        font-size: clamp(12px, 1.5vw, 14px);
        text-align: center;
    }
    
    .guide-container-item-line_school {
        font-size: clamp(18px, 1.5vw, 24px);
        text-align: center;
    }
}


/* お問い合わせセクション */
.contact {
    font-family: 'Noto Sans JP', sans-serif;
    padding: 50px 5%;
}

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

.contact_item_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.contact_item_flex_left {
    margin: 3%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    width: 45%;
    position: relative;
}

.contact_item_flex_right {
    width: 50%;
    display: flex;  /* 追加：flexコンテナに */
    flex-direction: column;  /* 追加：縦方向に配置 */
}

.contact_item_flex_left h3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #2269b1;
    color: white;
    text-align: center;
    padding: 4% 5%;
    font-size: clamp(14px, 1.5vw, 32px);
    font-weight: bold;
    width: 100%;
    box-sizing: border-box;  /* 追加：paddingを幅に含める */
    margin: 0;  /* 追加：マージンをリセット */
    position: absolute;
    top: 0;
    left: 0; 
    right: 0; 
    transform: none;
}

.contact_item_flex_left_time {
    margin: 2%;
    font-size: clamp(12px, 1.2vw, 40px);
}

.contact_item_flex_left h3::after {
    content: "";
    position: absolute;
    bottom: -10px; /* 位置調整 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #2269b1; /* 青色の三角形 */
}

.contact_item_flex_left_top {
    margin-top: 20%;  /* 修正：上部マージンを調整 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact_item_flex_left_bottom {
    display: flex;
    align-items: center;
    margin: 5%;
    justify-content: center;
}

.contact_item_flex_left_top_left {
    background-color: #2269b1;
    border-radius: 100px;
    padding: 5px 20px;
    margin-right: 20px;
    color: #fff;
}

.contact_item_flex_left_bottom_left {
    background-color: #2269b1;
    border-color: #2269b1;
    border-radius: 100px;
    padding: 5px 20px;
    margin-right: 20px;
    color: #fff;
}

.contact_item_flex_left_top_right {
    color: #2269b1;
    font-weight: bold;
    font-size: clamp(16px, 1.5vw, 32px);
}

.contact_item_flex_left_bottom_right {
    color: #2269b1;
    font-weight: bold;
    font-size: clamp(16px, 1.5vw, 32px);
}

.contact_item_flex_left_time {
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: normal;
    text-align: center;
    margin-top: 15px;
}

.contact_item_flex_right {
    display: flex;  /* 追加：flexコンテナに */
    flex-direction: column;  /* 追加：縦方向に配置 */

}

.contact_item_flex_right_title {
    font-size: clamp(14px, 2vw, 40px);
    font-weight: 500;
    color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 4% 5%;
    background: #ff734f;
    margin: 5% 5%;
    margin-bottom: 0;
    text-align: center;
    transition: all 0.3s ease;
}

.contact_item_flex_right_title:hover {
    opacity: 0.8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.contact_item_flex_right_flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact_item_flex_right_flex_left {
    width: 48%;
}

.contact_item_flex_right_flex_right {
    width: 48%;
}

.contact_item_flex_right_flex div {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 4% 5%;
    background: #2aa480;
    color: #fff;
    font-size: clamp(14px, 1vw, 40px);
    margin: 5%;
    transition: all 0.3s ease;
}

.contact_item_flex_right_flex div:hover {
    opacity: 0.8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.contact_item_flex_right_flex_title {
    font-size: clamp(14px, 1.5vw, 32px);
    border-radius: 100px;
    padding: 2% 2%;
    margin-bottom: 1%;
    background-color: #ffef3e;
    color: #2aa480;
    text-align: center;
    transition: all 0.3s ease;
}

.contact_item_flex_right_flex_title:hover {
    opacity: 0.8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}


@media (max-width: 768px) {
    .contact {
        background-image: url('../img/gray.jpeg');
        background-position: center;
        background-size: cover;
        font-family: 'Noto Sans JP', sans-serif;
        padding: 50px 5%;
    }
    
    .contact_item img{
    width: 100%;
        height: auto;
    }
    
    .contact_item_flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fff;
    }
    
    .contact_item_flex_left {
        margin: 3%;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 90%;
        position: relative;
    }
    
    .contact_item_flex_right {
        width: 90%;
        display: flex;  /* 追加：flexコンテナに */
        flex-direction: column;  /* 追加：縦方向に配置 */
        margin-bottom: 5%;
    }
    
    .contact_item_flex_left h3 {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #2269b1;
        color: white;
    text-align: center;
        padding: 4% 5%;
        font-size: clamp(14px, 1.5vw, 32px);
        font-weight: bold;
        width: 100%;
        box-sizing: border-box;  /* 追加：paddingを幅に含める */
    margin: 0;  /* 追加：マージンをリセット */
        position: absolute;
        top: 0;
        left: 0; 
        right: 0; 
        transform: none;
    }
    
    .contact_item_flex_left_time {
        margin: 2%;
        font-size: clamp(12px, 1.2vw, 40px);
    }
    
    .contact_item_flex_left h3::after {
        content: "";
        position: absolute;
        bottom: -10px; /* 位置調整 */
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #2269b1; /* 青色の三角形 */
    }
    
    .contact_item_flex_left_top {
        margin-top: 20%;  /* 修正：上部マージンを調整 */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .contact_item_flex_left_bottom {
        display: flex;
        align-items: center;
        margin: 5%;
        justify-content: center;
    }
    
    .contact_item_flex_left_top_left {
        background-color: #2269b1;
        border-radius: 100px;
        padding: 5px 20px;
        margin-right: 20px;
        color: #fff;
    }
    
    .contact_item_flex_left_bottom_left {
        background-color: #2269b1;
        border-color: #2269b1;
        border-radius: 100px;
        padding: 5px 20px;
        margin-right: 20px;
        color: #fff;
    }
    
    .contact_item_flex_left_top_right {
        color: #2269b1;
        font-weight: bold;
        font-size: clamp(16px, 1.5vw, 32px);
    }
    
    .contact_item_flex_left_bottom_right {
        color: #2269b1;
        font-weight: bold;
        font-size: clamp(16px, 1.5vw, 32px);
    }
    
    .contact_item_flex_left_time {
        font-size: clamp(14px, 1.5vw, 16px);
        font-weight: normal;
        text-align: center;
        margin-top: 15px;
    }
    
    .contact_item_flex_right {
        display: flex;  /* 追加：flexコンテナに */
        flex-direction: column;  /* 追加：縦方向に配置 */
        align-items: center;
        justify-content: center;
        margin-bottom: 0 auto;
    }
    
    .contact_item_flex_right_title {
        font-size: clamp(14px, 2vw, 40px);
        font-weight: 500;
        color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        width: 90%;
        padding: 8% 5%;
        background: #ff734f;
        margin-bottom: 1%;
        text-align: center; 
    }
    
    .contact_item_flex_right_flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .contact_item_flex_right_flex div {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        padding: 4% 5%;
        background: #2aa480;
        color: #fff;
        font-size: clamp(14px, 1vw, 40px);
        margin: 1%;
    }
    
    .contact_item_flex_right_flex_left {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 0 auto;
    }
    
    .contact_item_flex_right_flex_right {
        width: 90%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 5%;
    }
    
    
    .contact_item_flex_right_flex_title {
        font-size: clamp(14px, 1.5vw, 32px);
        border-radius: 100px;
        padding: 2% 2%;
        margin-bottom: 1%;
        background-color: #ffef3e;
        color: #2aa480;
        text-align: center;
    }
}


/* 料金スケジュールセクション */
#openPanel1 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(14px, 1.5vw, 240px);
    font-weight: 700;
    background-color: #fff;
    padding: 4% 10%;
    margin: 3% auto;
    width: 70vw;
    border: 1px solid #2269b1;
    color: #2269b1;
    transition: all 0.3s ease;
}

#openPanel1:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

#openPanel2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(14px, 1.5vw, 240px);
    font-weight: 700;
    background-color: #fff;
    padding: 4% 10%;
    margin: 3% auto;
    width: 70vw;
    border: 1px solid #FF734F;
    color: #FF734F;
    transition: all 0.3s ease;
}

#openPanel2:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

#openPanel3 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(14px, 1.5vw, 240px);
    font-weight: 700;
    background-color: #fff;
    padding: 4% 10%;
    margin: 3% auto;
    width: 70vw;
    border: 1px solid #2AA480;
    color: #2AA480;
    transition: all 0.3s ease;
}

#openPanel3:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

#fullPanel1,#fullPanel2,#fullPanel3 {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #fff;
}


.schedule {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    display: flex;
    justify-content: center;
}

.fee-schedule-container {
    margin-top: 8%;
}

.schedule table {
    width: 90vw;            /* ビューポート幅の90% */
    margin: 0 auto;
}

.schedule:nth-of-type(2) {
    margin-top: 30px;  /* 最初のテーブルの下に余白を追加 */
}

.fee-schedule-container {
    background-color: #ffffff;
    border-radius: 3px;
}

.fee-schedule_class1, .fee-schedule_class2 {
    margin-bottom: 20px;
    background-color: #ffffff;
}

.fee-schedule_class1 h5 {
    text-align: center;
    font-size: clamp(16px, 3.5vw, 18px);
    margin-bottom: 15px;
    font-weight: 700;
}

.fee-schedule_class1_h5 {
    color: #2269b1;
}

.fee-schedule_class2_h5 {
    color: #f99379;
}

.fee-schedule_class3_h5 {
    color: #2aa480;
}

#fullPanel1 h6,#fullPanel2 h6,#fullPanel3 h6 {
    text-align: center;
    font-size: clamp(14px, 3vw, 14px);
    font-weight: 400;
}

.fee-schedule_class1_h6 {
    color: #2269b1;
}

.fee-schedule_class2_h6 {
    color: #f99379;
}

.fee-schedule_class3_h6 {
    color: #2aa480;
}

#fullPanel1 .fee-schedule-container p,#fullPanel2 .fee-schedule-container p,#fullPanel3 .fee-schedule-container p {
    font-size: clamp(14px, 2vw, 14px);
    margin-bottom: 10px;
    text-align: center;
}

.fee-schedule_class1_p {
    color: #2269b1;
}

.fee-schedule_class2_p {
    color: #f99379;
}

.fee-schedule_class3_p {
    color: #2aa480;
}

#fullPanel1 .schedule,#fullPanel2 .schedule,#fullPanel3 .schedule {
    border-collapse: collapse;  /* これを確認 */
    font-size: 14px;
    margin-bottom: 20px;
}

#fullPanel1 .schedule td[rowspan],#fullPanel2 .schedule td[rowspan],#fullPanel3 .schedule td[rowspan] {
    vertical-align: middle;  /* 縦方向の配置を中央に */
    height: 100%;           /* 高さを確保 */
}

#fullPanel1 .schedule th,#fullPanel2 .schedule th,#fullPanel3 .schedule th,
#fullPanel1 .schedule td,#fullPanel2 .schedule td,#fullPanel3 .schedule td {
    border: 1px solid #999;  /* ボーダーの設定を確認 */
    padding: 10px;
}

#fullPanel1 .schedule th,#fullPanel2 .schedule th,#fullPanel3 .schedule th {
    font-size: clamp(14px, 2.3vw, 14px);
    color: #fff;
    border: 1px solid #fff;
    padding: 5px 10px 5px 10px;
    white-space: nowrap;
}

.fee-schedule_class1_th {
    background-color: #2269b1;
}

.fee-schedule_class2_th {
    background-color: #f99379;
}

.fee-schedule_class3_th {
    background-color: #2aa480;
}

#fullPanel1 .schedule td {
    font-size: clamp(14px, 2.3vw, 14px);
    background-color: #e9eff9;
    border: 1px solid #fff;
    padding: 5px 10px;
    white-space: nowrap;  /* テキストの改行を防ぐ */
    vertical-align: middle;  /* 縦方向の中央揃え */
    text-align: center;
}

#fullPanel2 .schedule td {
    font-size: clamp(14px, 2.3vw, 14px);
    background-color: #fff5f2;
    border: 1px solid #fff;
    padding: 5px 10px;
    white-space: nowrap;  /* テキストの改行を防ぐ */
    vertical-align: middle;  /* 縦方向の中央揃え */
    text-align: center;
}

#fullPanel3 .schedule td {
    font-size: clamp(14px, 2.3vw, 14px);
    background-color: #eefbf5;
    border: 1px solid #fff;
    padding: 5px 10px;
    white-space: nowrap;  /* テキストの改行を防ぐ */
    vertical-align: middle;  /* 縦方向の中央揃え */
    text-align: center;
}

.fee-schedule_class1_td {
    color: #2269b1;
}

.fee-schedule_class2_td {
    color: #f99379;
}

.fee-schedule_class3_td {
    color: #2aa480;
}








/* フッター */

#footer {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #eaf2f7;
    margin: 0;
    padding: 0;
}

footer a {
    text-decoration: none;
    color: #000;
}

.footer-inner-top {
    display: flex;
    justify-content: center;
    align-items: center;
}


.footer-inner-top-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.footer-inner-top-logo img {
    width: 15%;
    height: 15%;
}


.footer-inner-top-logo p {
    display: inline-block;
    font-size: clamp(14px, 2vw, 120px);
    font-weight: 700;
    color: #333333;
}

/* ここの修正を入れる */
.footer-inner-top-nav {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.footer-inner-top-nav li {
    font-size: clamp(12px, 1.5vw, 14px);
    font-weight: 500;

}

.footer-inner-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.footer-inner-bottom-left {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-right: 100px;
    gap: 5px;
}

.footer-inner-bottom-right {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-left: 0px;
    gap: 5px;
}

.footer-inner-room_name {
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 700;
}

.footer-inner-p {
    font-size: clamp(14px, 1.5vw, 16px);
    font-weight: 400;
}

.copyright {
    font-size: clamp(10px, 1.5vw, 12px);
    text-align: center;
    margin: 0;
    padding: 20px 0;
}

@media screen and (max-width: 768px) {
    #footer {
        font-family: 'Noto Sans JP', sans-serif;
        background-color: #eaf2f7;
        margin: 0;
        padding: 0;
    }
    
    footer a {
        text-decoration: none;
        color: #000;
    }
    
    .footer-inner-top {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
    .footer-inner-top-logo {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    
    .footer-inner-top-logo img {
        width: 15%;
        height: 15%;
    }
    
    
    .footer-inner-top-logo p {
        display: inline-block;
        font-size: clamp(14px, 2vw, 120px);
        font-weight: 700;
        color: #333333;
    }
    
    /* ここの修正を入れる */
    .footer-inner-top-nav {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }
    
    .footer-inner-top-nav li {
        font-size: clamp(10px, 1.5vw, 14px);
        font-weight: 500;
    
    }
    
    .footer-inner-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        padding: 0 5%;
    }
    
    .footer-inner-bottom-left {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-right: 10%;
        gap: 5px;
        width: 50%;
    }
    
    .footer-inner-bottom-right {
        display: flex;
        flex-direction: column;
        text-align: left;
        margin-left: 0px;
        gap: 5px;
        width: 50%;
    }
    
    .footer-inner-room_name {
        font-size: clamp(14px, 1.5vw, 16px);
        font-weight: 700;
    }
    
    .footer-inner-p {
        font-size: clamp(10px, 1.5vw, 16px);
        font-weight: 400;
    }
    
    .copyright {
        font-size: clamp(10px, 1.5vw, 12px);
        text-align: center;
        margin: 0;
        padding: 20px 0;
    }
    
}



/* @media screen and (max-width: 1200px) {
    .header-container-icon {
        margin-left: 20px;
    }

    .header-contact {
        margin-right: 40px;
    }

    .header-contact-free {
        padding: 10px 15px;
    }

    .header-contact-line {
        padding: 10px 15px;
    }

    .header-nav {
        gap: 5px;
        margin-top: 25px;
    }

    .header-nav li {
        font-size: 14px;
        margin-right: 10px;
        margin-left: 10px;
        padding: 5px 20px 5px 5px;
    }
} */





@media (max-width: 768px) {
    /* ヒーロー */
    /* #hero {
        margin-top: 60px;
    }

    .hero-text {
        margin-top: 80px;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
    }

    .hero-text_main {
        margin-top:500px;
        padding: 0 20px;
        background-color: #2aa480; 
        color: #fff;
        border-bottom: none;
    }

    .hero-text h2 {
        font-size: clamp(26px, 6vw, 40px);
    }

    .hero-text h2 span {
        padding: 5px 10px;
    } 

    .hero-text h2 br {
        display: none; 
    }

    .hero-text_sub1 {
        margin-top: 10px;
    }

    .hero-text_sub2 {
        margin-top: 10px;
    }   

    .hero-text_sub3 {
        margin-top: 10px;
    } 

    .hero-text_main2 {
        text-align: left;
    }

    .hero-text_sub {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .hero-text_sub div {
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        padding: 10px 55px;
        background: #2aa480;
        color: #fff;
    }
    
    .hero-text_sub_left {
        margin-right: 5px;
    }
    
    .hero-text_sub_right {
        margin-left: 5px;
    }
    
    .hero-text_sub_title {
        font-size: clamp(14px, 1.5vw, 16px);
        border-radius: 100px;
        padding: 5px 10px;
        background-color: #ffef3e;
        color: #2aa480;
        text-align: center;
    }
    
    .hero-text_sub_text {
        font-size: clamp(12px, 1.5vw, 16px);
    } */

    .slider-track {
        animation: slide 90s linear infinite; /* モバイル表示時は90秒かけて1周 */
    }
    
    .slider-track img {
        height: 200px;
    }
}



.blog_margin {
    margin-top: 100px;
}

.blog_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}





/* body * {
    border: 10px solid red;
} */


/* 画像スライダーのスタイル */
.image-slider {
    width: 100%;
    overflow: hidden;
    margin: 40px 0;
}

.slider-container {
    width: 100%;
    overflow: hidden;
}

.slider-track {
    display: flex;
    animation: slide 60s linear infinite;
    width: 200%;
}

.slider-track img {
    aspect-ratio: 16/9;
    width: 10%;
    height: auto;
    object-fit: cover;
    flex-shrink: 0;
}



@keyframes slide {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}



/* レスポンシブ対応 */
@media (max-width: 768px) {
    .slider-track {
        animation: slide 90s linear infinite; /* モバイル表示時は90秒かけて1周 */
    }
    
    /* .slider-track img {
        height: 200px;
    } */
    .image-slider {
        display: none;
    }
}

.news-list_item-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: opacity 0.3s ease;
}

.news-list_item-link:hover {
    opacity: 0.7;
    transform: translateX(5px);
}













@media (min-width: 769px) {
    #openPanel1,
    #openPanel2,
    #openPanel3,
    #fullPanel1,
    #fullPanel2,
    #fullPanel3 {
        display: none !important;
    }
}






/* ブログ一覧 */
#blog-list {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px;
    background-color: #f0f6fb;
}

.blog-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}

.blog-date {
    min-width: 100px;
    color: #555;
    font-size: 0.9rem;
}

.blog-category {
    display: inline-block;
    background-color: #235aa6;
    color: white;
    padding: 4px 10px;
    font-size: 0.8rem;
    border-radius: 3px;
}

.blog-title {
    color: #333;
    text-decoration: none;
    flex-grow: 1;
    transition: color 0.3s;
}

.blog-title:hover {
    color: #235aa6;
    opacity: 0.8;
}

  /* ページネーション */
.pagination {
    text-align: center;
    margin-top: 32px;
}

.pagination .page-numbers {
    display: inline-block;
    margin: 0 6px;
    padding: 8px 12px;
    border: 1px solid #235aa6;
    color: #235aa6;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.pagination .current {
    background-color: #235aa6;
    color: #fff;
}

.pagination .page-numbers:hover {
    background-color: #235aa6;
    color: #fff;
    transform: translateY(-2px);
}



/* ブログ個別ページ */
#single-container {
    background: #f0f6fb;
}

.inner {
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    padding: 40px;
    border-radius: 8px;
}

.meta {
    display: flex;
    gap: 12px;
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 12px;
}

.post-category {
    background-color: #235aa6;
    color: #fff;
    padding: 2px 10px;
    font-size: 0.8rem;
    border-radius: 3px;
}

.post-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 24px;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    margin-bottom: 32px;
}

.post-content {
    line-height: 1.8;
    font-size: 1rem;
    color: #333;
    margin-bottom: 40px;
}

.back-button {
    text-align: center;
}

.btn {
    display: inline-block;
    background: none;
    border: 1px solid #235aa6;
    color: #235aa6;
    padding: 10px 24px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn:hover {
    background: #235aa6;
    color: #fff;
    transform: translateY(-2px);
}





/* フォーム全体 */
.wpcf7 {
    max-width: 600px;
    margin: 0 auto;
    font-family: 'Helvetica', sans-serif;
    font-size: 16px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 各フィールドのラベルと入力の間に余白 */
.wpcf7 p {
    margin-bottom: 20px;
}

/* 必須ラベル */
.wpcf7 .required {
    color: red;
    font-size: 14px;
    margin-left: 5px;
}

/* テキスト・メール・電話・郵便番号フィールド共通 */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

/* ラジオボタンとチェックボックス */
.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
    margin-right: 8px;
}

/* スクロールボックス（個人情報取り扱い） */
.wpcf7 div[style*="overflow: auto"] {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
    background-color: #0073aa;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #005a87;
    transform: translateY(-2px);
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
    color: red;
    font-size: 14px;
}

/* 送信成功メッセージ */
.wpcf7-mail-sent-ok {
    color: green;
    font-weight: bold;
    margin-top: 20px;
}

/* モバイル用Contact Form 7の余白調整 */
@media (max-width: 768px) {
    .wpcf7 {
        padding: 0 10px;
        max-width: 100%;
    }
}



/* モバイル用電話アイコン */
.mobile-phone-icon {
    display: none;
}

/* 電話選択モーダル */
.phone-modal {
    display: none;
}

/* ハンバーガーメニュー */
.hamburger-menu {
    display: none;
    cursor: pointer;
    width: 30px;
    height: 20px;
    position: relative;
    z-index: 1003;
}

.hamburger-menu span {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #2269b1;
    transition: all 0.3s;
}

.hamburger-menu span:nth-child(1) {
    top: 0;
}

.hamburger-menu span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-menu span:nth-child(3) {
    bottom: 0;
}

/* ハンバーガーメニューがアクティブ時のスタイル */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* モバイルナビゲーション */
.mobile-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 1002;
    padding-top: 60px;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}

.mobile-nav.active {
    transform: translateX(0);
}

.mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-list li {
    text-align: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.mobile-nav-list li:last-child {
    border-bottom: none;
}

.mobile-nav-list a {
    color: #2269b1;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    display: block;
    padding: 6px 0;
    transition: all 0.3s ease;
}

.mobile-nav-list a:hover {
    opacity: 0.8;
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .mobile-phone-icon {
        display: block;
        position: absolute;
        right: 80px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1003;
    }

    .mobile-phone-icon img {
        width: 28px;
        height: 28px;
        transition: all 0.3s ease;
    }

    .mobile-phone-icon:hover img {
        transform: scale(1.1);
    }

    /* 電話アイコンのクリック可能スタイル */
    .phone-icon-trigger {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .phone-icon-trigger:active {
        transform: scale(0.95);
    }

    /* 電話選択モーダル */
    .phone-modal {
        display: none;
        position: fixed;
        z-index: 1004;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
    }

    .phone-modal-content {
        background-color: #fff;
        margin: 10% auto;
        padding: 0;
        border-radius: 10px;
        width: 90%;
        max-width: 350px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        animation: modalSlideIn 0.3s ease-out;
    }

    @keyframes modalSlideIn {
        from {
            opacity: 0;
            transform: translateY(-50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .phone-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 15px 10px 15px;
        border-bottom: 1px solid #eee;
    }

    .phone-modal-header h3 {
        margin: 0;
        color: #2269b1;
        font-size: 16px;
        font-weight: 600;
    }

    .phone-modal-close {
        color: #aaa;
        font-size: 28px;
        font-weight: bold;
        cursor: pointer;
        line-height: 1;
    }

    .phone-modal-close:hover {
        color: #2269b1;
    }

    .phone-modal-body {
        padding: 15px;
    }

    .phone-option {
        margin-bottom: 15px;
        padding: 12px;
        border: 2px solid #f0f0f0;
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    .phone-option:last-child {
        margin-bottom: 0;
    }

    .phone-option:hover {
        border-color: #2269b1;
        background-color: #f8f9ff;
    }

    .phone-option h4 {
        margin: 0 0 8px 0;
        color: #2269b1;
        font-size: 15px;
        font-weight: 600;
    }

    .phone-number {
        margin: 4px 0;
        font-size: 16px;
        font-weight: 600;
        color: #333;
    }

    .phone-time {
        margin: 4px 0 12px 0;
        font-size: 13px;
        color: #666;
    }

    .phone-call-btn {
        display: inline-block;
        background-color: #2269b1;
        color: white;
        padding: 8px 16px;
        text-decoration: none;
        border-radius: 5px;
        font-weight: 500;
        transition: all 0.3s ease;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        font-size: 14px;
    }

    .phone-call-btn:hover {
        background-color: #1a5a8f;
        transform: translateY(-1px);
    }

    .phone-call-btn:active {
        transform: translateY(0);
    }

    /* PCサイズではモーダルと電話アイコンを非表示 */
    @media (min-width: 769px) {
        .phone-modal {
            display: none !important;
        }
        .mobile-phone-icon {
            display: none !important;
        }
    }

    /* iPhone SEなどの小さい画面用 */
    @media (max-width: 375px) {
        .phone-modal-content {
            margin: 5% auto;
            width: 95%;
            max-width: 320px;
        }

        .phone-modal-header {
            padding: 12px 12px 8px 12px;
        }

        .phone-modal-header h3 {
            font-size: 15px;
        }

        .phone-modal-body {
            padding: 12px;
        }

        .phone-option {
            margin-bottom: 12px;
            padding: 10px;
        }

        .phone-option h4 {
            font-size: 14px;
            margin: 0 0 6px 0;
        }

        .phone-number {
            font-size: 15px;
            margin: 3px 0;
        }

        .phone-time {
            font-size: 12px;
            margin: 3px 0 10px 0;
        }

        .phone-call-btn {
            padding: 7px 14px;
            font-size: 13px;
        }
    }

    .hamburger-menu {
        display: block;
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }

    .mobile-nav {
        display: block;
    }

    .header-nav {
    display: none;
}
}



@media (max-width: 768px) {
    /* タッチエフェクトの基本スタイル */
    .header-contact_document,
    .header-contact-free,
    .header-contact-line1,
    .header-contact-line2,
    .contact_item_flex_right_title,
    .contact_item_flex_right_flex div,
    .contact_item_flex_right_flex_title,
    .guide-container-item-contact,
    .guide-container-item-line,
    .news-navi_content,
    .pagination .page-numbers,
    .btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    /* タッチ時のエフェクト */
    .header-contact_document:active,
    .header-contact-free:active,
    .header-contact-line1:active,
    .header-contact-line2:active,
    .contact_item_flex_right_title:active,
    .contact_item_flex_right_flex div:active,
    .contact_item_flex_right_flex_title:active,
    .guide-container-item-contact:active,
    .guide-container-item-line:active,
    .news-navi_content:active,
    .pagination .page-numbers:active,
    .btn:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    /* タッチフィードバック */
    .header-contact_document:focus,
    .header-contact-free:focus,
    .header-contact-line1:focus,
    .header-contact-line2:focus,
    .contact_item_flex_right_title:focus,
    .contact_item_flex_right_flex div:focus,
    .contact_item_flex_right_flex_title:focus,
    .guide-container-item-contact:focus,
    .guide-container-item-line:focus,
    .news-navi_content:focus,
    .pagination .page-numbers:focus,
    .btn:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(34, 105, 177, 0.3);
    }
}

.contact_item_flex_right_flex_left a,
.contact_item_flex_right_flex_right a {
    color: #fff;
    text-decoration: none;
}

.contact_item_flex_right_flex_left a:hover,
.contact_item_flex_right_flex_right a:hover {
    opacity: 0.8;
}


.button_sticky {
    display: none;
}

@media screen and (max-width: 768px) {

.button_sticky {
    display: some;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 999;
    display: flex;
    width: 100%;
}

.button_sticky_button1 {
    font-family: 'Noto Sans JP', sans-serif;
    aspect-ratio: 5/2;
    width: 50%;
    height: auto;
    background-color: #29A480;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-right: 1px solid #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.button_sticky_button2 {
    font-family: 'Noto Sans JP', sans-serif;
    aspect-ratio: 5/2;
    width: 50%;
    height: auto;
    background-color: #29A480;
    color: #fff;
    border: none;
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.button_sticky_button1 a:hover,
.button_sticky_button2 a:hover {
    opacity: 0.8;
}

.button_sticky_button_text {
    font-size: clamp(14px, 3vw, 16px);
    font-weight: 500;
}

.school_name {
    display: inline-block;
    font-size: clamp(16px, 3vw, 24px);
    font-weight: 700;
    background-color: #ffff00;
    color: #29A480;
    border-radius: 5px;
    padding: 5px 30px;
}

/* あとpaddingとリンクの色と文字の大きさを変える */
}