/* ----共通---- */
@charset "utf-8";

* {
    margin: 0;
    padding: 0;
}

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

/* -------------------------------
        フォントの設定 
---------------------------------*/
body {
    color: var(--font);
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 20px;
    letter-spacing: 1.6px;
    /*文字間*/
    line-height: 1.5;
    /*行間*/
}

h2 {
    /* clamp(最小値, 推奨値, 最大値) */
    /* 2rem = 32px, 2.75rem = 44px (フォントサイズ16pxの場合) */
    font-size: clamp(2rem, 1.736rem + 1.127vw, 2.75rem);
    font-weight: bold;
    margin-bottom: 40px;
}

h3 {
    /* 画面幅に応じて26px〜38pxの間で滑らかに変化 */
    /* clamp(最小値, 推奨値, 最大値) */
    /* 1.625rem = 26px, 2.375rem = 38px (フォントサイズ16pxの場合) */
    font-size: clamp(1.625rem, 1.192rem + 1.846vw, 2.375rem);
}

/* -------------------------------
        サイト全体のインナーを揃える
--------------------------------- */
/* メインインナー */
.main_inner {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 20px;
}

/* コンテンツインナー */
.content_inner {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 20px;
}

/* -------------------------------
        カラー設定
--------------------------------- */
:root {
    --base: #D7E69F;
    --main: #A0CD6F;
    --accent-yellow: #F7EE88;
    --accent-brown: #C8B7A5;
    --gray: #E7EAEE;
    --footer: #736450;
    --font: #1C1C1C;
    --marker-green: #C3FF88;
    --marker-yellow: #FCFFAE;
    --marker-blue: #86EDFF;
    --box-shadow: #00000040;
}

/* ----------------------------
        スクロールバー
------------------------------ */
/* Firefox用　つまみ:緑、トラック:黄緑 */
html {
    scrollbar-color: var(--main) var(--accent-yellow);
}

/* 背景 */
html::-webkit-scrollbar-thumb {
    background: var(--accent-yellow);
    border-radius: 5px;
}

/*つまみ */
html::-webkit-scrollbar-track {
    background: var(--main);
}


/* --------------------------------
        セクションの上下の余白
    ------------------------------- */
section {
    padding: 60px 0px;
}

@media(min-width:1025px) {
    section {
        padding: 120px 0px;
    }
}

/* ----------------------------------------
    ハンバーガーメニューとフッターの公式SNSのアイコン 
-------------------------------------------*/
.mobile-menu-sns img,
.company img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    object-position: center;
    transition: all 0.3s ease-in-out;
}

.mobile-menu-sns img:hover,
.company img:hover {
    transform: scale(1.1);
}



/* ---------------------------------
            ハンバーガーメニュー
    ------------------------------- */
/* メニューオープン時に背景をスクロールさせない */
body.no-scroll {
    overflow: hidden;
    touch-action: none;
    /* スマホでのタッチ操作も無効化 */
}

/* ハンバーガーメニューのボタンの設定 */
.openbtn {
    width: 80px;
    height: 80px;
    background-color: var(--main);
    border-radius: 50%;
    cursor: pointer;
    /* ↓画面右上に固定するためのスタイルを追加 */
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;
    /* 他の要素より手前に表示 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ３本線の設定 */
.openbtn span {
    display: inline-block;
    transition: all 0.4s ease-in-out;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    border-radius: 5px;
    background: #fff;
    width: 45%;
}

.openbtn span:nth-child(1) {
    top: 20px;
}

.openbtn span:nth-child(2) {
    top: 34px;
    transform: translate(-50%, -50%);
}

.openbtn span:nth-child(3) {
    top: 44px;
}

/* 「メニュー」「閉じる」テキストの共通スタイル */
.openbtn::after {
    content: "メニュー";
    position: absolute;
    bottom: 13px;
    /* ボタンの下からの位置 */
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

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

    /* ハンバーガーメニューを大きく */
    .openbtn {
        width: 100px;
        height: 100px;
    }

    /* ３本線の位置調整 */
    .openbtn span {
        height: 5px;
    }

    .openbtn span:nth-child(1) {
        top: 25px;
    }

    .openbtn span:nth-child(2) {
        top: 42px;
    }

    .openbtn span:nth-child(3) {
        top: 55px;
    }

    /* 「メニュー」「閉じる」テキストの共通スタイル */
    .openbtn::after {
        bottom: 19px;
        font-size: 13px;
    }
}

/* activeクラスが付与されると線が回転して×になる */
.openbtn.active span:nth-of-type(1) {
    top: 35%;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 30%;
}

.openbtn.active span:nth-of-type(2) {
    opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
    top: 35%;
    bottom: auto;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 30%;
}

/* active時にテキストを「閉じる」に切り替え */
.openbtn.active::after {
    content: "閉じる";
}

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

    /* activeクラスが付与されると線が回転して×になる */
    .openbtn.active span:nth-of-type(1) {
        transform: translate(-50%, -50%) rotate(-45deg);
        width: 50%;
    }

    .openbtn.active span:nth-of-type(3) {
        transform: translate(-50%, -50%) rotate(45deg);
        width: 50%;
    }
}

/* ハンバーガーメニューの中 */
.mobile-menu {
    width: 100%;
    max-width: 440px;
    /* スマホの最大幅（iphone16 pro max） */
    height: 100vh;
    height: -webkit-fill-available; /* 古いiOS向け */
    background-color: var(--main);
    transition: .3s;
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%); /* 画面外へ移動 */
    z-index: 99;
    /* ボタン100よりは後ろに配置 */
}

/* activeクラスが付いたら表示する */
.mobile-menu.active {
    transform: translateX(0);
}

.menu {
    margin-top: 110px;
    /* 上に余白を追加 */
    font-weight: bold;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

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

    /* ボタンに当たるから少し下げる */
    .menu {
        margin-top: 130px;
    }
}

/* ハンバーガーメニューのリスト*/
.menu li {
    width: 100%;
    padding: 14px 40px;
    transition: all 0.5s ease-in-out;
}

.menu li:hover {
    color: var(--font);
    background-color: var(--accent-yellow);
}

/* 反応範囲を広く */
.menu a {
    display: inline-block;
    width: 100%;
}

/* SNS */
.mobile-menu-sns {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    padding: 0px 40px;
    margin-top: 20px;
}



/* ------お問い合わせボタン------- */
.common-contact-btn {
    width: 80px;
    height: 80px;
    background-color: #ff84c0;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: fixed;
    top: 20px;
    right: 120px;
    z-index: 100;
    transition: all 0.5s ease-in-out;
}

.common-contact-btn img {
    width: 35px;
    aspect-ratio: 1;
    transition: all 0.3s ease-in-out;
}

.common-contact-btn p {
    font-size: 9px;
    color: #fff;
}

.common-contact-btn:hover img {
    transform: scale(1.1);
}

@media screen and (min-width:768px) {
    .common-contact-btn {
        width: 100px;
        height: 100px;
        right: 140px;
    }

    .common-contact-btn img {
        width: 40px;
    }

    .common-contact-btn p {
        font-size: 12px;
    }
}


/* --------------------------------------
        緑色、茶色、黄色の丸の装飾の大きさ                  
    ------------------------------------- */
/* Block:共通の大きさと形と配置基準 */
.deco-circle{
    width: 40%;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    opacity: 0.7;
}
/* Mondifier:色のバリエーション */
.deco-circle--yellow{
    background-color: var(--accent-yellow);
}
.deco-circle--green {
    background-color: var(--main);
}
.deco-circle--brown {
    background-color: var(--accent-brown);
}

/* --------------------------------------
                フッター                  
    ------------------------------------- */
/* ----------フッターの設定----------- */
/* フッター内のセクションは、共通で設定しているpaddingを一度打ち消す */
footer>section {
    padding: 0px;
}

/* フッターのセクションの画像 */
footer {
    position: relative
}

/* フッター上の装飾（セクションの区切り画像） */
.footer-decoration {
    width: 100%;
    aspect-ratio: 77 / 20;
    background-image: url(../img/decoration/section-green.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: bottom;
    transform: translateY(30%);
}

@media(min-width: 1025px) {
    footer::after {
        bottom: 105%;
        width: 10%;
    }
}


/* -------------お問い合わせの設定---------------- */
/* お問い合わせの背景 */
.contact {
    background-color: var(--main);
    padding: 60px 0px;
}

/* お問い合わせ全体のフレックス */
.contact-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* SP版では、「お気軽にどうぞ」の写真を非表示 */
.contact-img {
    display: none;
}

@media screen and (min-width:1025px) {

    /* お問い合わせ全体のフレックス、PC版から横並び */
    .contact-wrapper {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 80px;
    }

    /* 「お気軽にどうぞ」の写真をPC版から表示 */
    .contact-img {
        display: block;
        width: 25%;
    }

    /* ------「お気軽にどうぞ」の写真----- */
    .contact-img-slide {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        object-position: center;
        border-radius: 50% 50% 0 0;
        overflow: hidden;
    }

    .contact-img-slide-inner {
        display: flex;
        width: 300%;
        /* 画像3枚分の幅 */
        animation: contact-slide 12s infinite;
    }

    .contact-img-slide-inner img {
        width: 33.333%;
        /* 1枚あたりの幅 */
        aspect-ratio: 1;
        object-fit: cover;
        object-position: center;
    }

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

        25% {
            transform: translateX(0);
            /* 3秒停止 */
        }

        33.3% {
            transform: translateX(-33.333%);
            /* 1秒でスライド */
        }

        58.3% {
            transform: translateX(-33.333%);
            /* 3秒停止 */
        }

        66.6% {
            transform: translateX(-66.666%);
            /* 1秒でスライド */
        }

        91.6% {
            transform: translateX(-66.666%);
            /* 3秒停止 */
        }

        100% {
            transform: translateX(0);
            /* 1秒で先頭に戻る */
        }
    }

        /* 「お気軽にどうぞ」の文字を斜めに */
        .contact-img p {
            color: #fff;
            display: inline-block;
            transform: rotate(-30deg) translateX(-50px);
            position: relative;
        }

        /* 「お気軽にどうぞ」の装飾左 */
        .contact-img p::before {
            content: "";
            background: url(../img/decoration/announcement-left.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 15px;
            aspect-ratio: 27/64;
            /*元画像の比率*/
            position: absolute;
            left: -15%;
            bottom: 0;
        }

        /* 「お気軽にどうぞ」の装飾右 */
        .contact-img p::after {
            content: "";
            background: url(../img/decoration/announcement-right.png);
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            width: 15px;
            aspect-ratio: 27/64;
            /*元画像の比率*/
            position: absolute;
            right: -15%;
            bottom: 0;
        }
    }

    /* お問い合わせボタンが縦並びに */
    .contact-btn-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin-top: 40px;
        /*テキストとボタンたちの余白*/
    }

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

        /* お問い合わせボタンをタブレット版から横並びに */
        .contact-btn-wrapper {
            flex-direction: row;
            gap: 30px;
        }
    }

    /* お問い合わせボタンの設定 */
    .contact-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        ;
        gap: 15px;
        border-radius: 20px;
        padding: 10px;
        font-size: 16px;
        box-shadow: 4px 4px 4px var(--box-shadow);
        transition: all 0.3s ease-in;
    }

    @media screen and (min-width:1025px) {
        .contact-btn {
            flex-direction: column;
            padding: 20px;
        }
    }

    /* 電話の背景カラーとホバー */
    .contact-tell-icon {
        background-color: var(--accent-yellow);
        transition: all 0.3s ease-in-out;
    }

    .contact-tell-icon:hover {
        background-color: #DBD378;
        box-shadow: none;
    }

    /* メールの背景カラーとホバー */
    .contact-mail-icon {
        background-color: var(--gray);
        transition: all 0.3s ease-in-out;
    }

    .contact-mail-icon:hover {
        background-color: #D4D6D9;
        box-shadow: none;
    }

    /* お問い合わせボタンのアイコンの大きさ */
    .contact-btn img {
        width: 40px;
        aspect-ratio: 1;
        object-fit: contain;
        object-position: center;
    }

    /* -------会社の概要---------- */
    /* 会社概要の背景 */
    .company {
        background-color: var(--footer);
        padding: 20px 0px;
        color: #fff;
    }

    /* 「会社概要」の文字がh2なので、フォントサイズを変更 */
    .company h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    /* 「株式会社教育サポートセンター」 */
    .company-name {
        margin-bottom: 20px;
    }

    /* 会社住所とSNSの余白 */
    .footer-sns {
        margin-top: 20px;
    }

    /* 公式SNS */
    .footer-sns ul {
        display: flex;
        gap: 40px;
        margin-top: 5px;
    }

    @media screen and (min-width:678px) {

        /* addressタグをFlexコンテナにする */
        .company-wrapper address {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 5%;
        }

        .footer-sns {
            margin-top: 0px;
        }
    }

    /* --------------コピーライト---------------- */
    .copyright {
        text-align: right;
        padding-top: 20px;
        margin-top: 30px;
    }

    @media(min-width:768px) {
        .copyright {
            margin-top: 0px;
        }
    }


    /*----------JQueryのcss---------- */
    /* スクロールでフェードイン */
    .fade-in {
        opacity: 0;
        transform: translateY(30px);
        /* 少し下から表示 */
        transition: opacity 1s, transform 1s;
    }

    .fade-in.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* ------ローディング------ */
    .loading {
        /*ローディング画面の縦横幅を画面いっぱいになるように指定*/
        width: 100%;
        height: 100vh;
        height: 100dvh;
        /*ローディング画面の表示位置を固定*/
        position: fixed;
        top: 0;
        left: 0;
        background: var(--base);
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        /*ローディング画面を0.5秒かけて非表示にする*/
        transition: all 0.5s linear;
    }

    /*ローディング画面を非表示にする*/
    .loading.loaded {
        /*0.5秒かけてopacityを0にする*/
        opacity: 0;
        visibility: hidden;
    }

    .loading-text {
        color: #fff;
        font-size: 40px;
        font-weight: 700;
        text-align: center;
    }

    .spinner {
        width: 40%;
        max-width: 200px;
        /* スピナーが大きくなりすぎないように最大幅を指定 */
        aspect-ratio: 1;
        /* 画像の比率に合わせて高さを確保 */
        position: relative;
        /* 子要素のimgを絶対配置するための基準 */
        /* アニメーションを1秒かけて実行 */
        animation: loarding-spinner 0.5s ease-in-out infinite;
        transform-origin: bottom center;
        /* 下部中央を軸に回転 */
    }

    .spinner img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .spinner img:first-child {
        animation: spinner-img1-fade 0.5s steps(1, end) infinite;
    }

    .spinner img:last-child {
        animation: spinner-img2-fade 0.5s steps(1, end) infinite;
    }

    /* アニメーションの設定 */
    @keyframes loarding-spinner {
        0% {
            transform: rotate(-15deg);
        }

        50% {
            transform: rotate(15deg);
        }

        100% {
            transform: rotate(-15deg);
        }
    }

    @keyframes spinner-img1-fade {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0;
        }
    }

    @keyframes spinner-img2-fade {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }
    }