@charset "utf-8";

/* -----コンテンツの背景色--------*/
.content-wrapper {
    background-color: var(--base);
}

/* ボタン（フリースクールとは、１日の活動の流れ） */
.door-btn {
    display: block;
    width: 150px;
    padding: 10px 20px;
    margin: 0 auto;
    text-align: center;
    background-color: #fff;
    border: 2px solid var(--main);
    position: relative;
    cursor: pointer;
    z-index: 1;
    /* テキストが手前に来るように */
    perspective: 400px;
    /* 3Dアニメーションの遠近感を追加 */
}

/* 扉の役割をする擬似要素 */
.door-btn::before,
.door-btn::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    /* ボタンの半分の幅 */
    height: 100%;
    background-color: var(--main);
    /* 扉の色を緑に */
    transition: transform 0.5s ease;
    z-index: -1;
    /* テキストの背後に配置 */
}

/* 左の扉 */
.door-btn::before {
    left: 0;
    transform-origin: left;
    /* 回転の軸を左端に設定 */
}

/* 右の扉 */
.door-btn::after {
    right: 0;
    transform-origin: right;
    /* 回転の軸を右端に設定 */
}

/* ホバー時に扉が開くアニメーション */
.door-btn:hover::before {
    transform: rotateY(-100deg);
    /* 左の扉が手前に開く */
}

.door-btn:hover::after {
    transform: rotateY(100deg);
    /* 右の扉が手前に開く */
}

/* ---------各セクションの設定------------ */
/* -------------------------------------------------
                ファーストビュー
    ------------------------------------------------ */
/* ----ファーストビューのビデオ---- */
.fv-title {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    top: 0;
}

.fv-title video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    object-position: top center;
    z-index: -1;
}

/*--------「フリースクール無限大」の設定---------*/
.fv-title h1 {
    width: 300px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    animation: zoom-in-from-front 3s ease-out forwards;
}

/* スマホやタブレット版の「無限大」のアニメーション */
@keyframes zoom-in-from-front {
    0% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
        filter: blur(4px);
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
        filter: blur(0);
    }
}

@media screen and (min-width:768px) {
    .fv-title h1 {
        width: 50%;
    }
}

@media screen and (min-width:1025px) {
    .fv-title h1 {
        width: 30%;
        animation: top-h1-pc-animation 4s ease-out forwards;
    }

    /* PC版の「無限大」のアニメーション */
    @keyframes top-h1-pc-animation {
        0% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 0;
            filter: blur(4px);
        }

        40% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            filter: blur(0);
        }

        80% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 1;
            filter: blur(0);
        }

        100% {
            transform: translate(-55vw, -55vh) scale(0.7);
            opacity: 1;
            filter: blur(0);
        }
    }
}


/* -----------------------------------
        セクションの区切り画像
    -------------------------------- */
.fv-title::after {
    content: "";
    background: url(../img/decoration/section-yellowgreen.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    bottom: -1%;
    width: 100%;
    aspect-ratio: 288 / 37;
    /*元画像の比率で全体を表示*/
}

@media(min-width: 1025px) {

    /* セクションの区切り画像 */
    .fv-title::after {
        bottom: -5%;
    }
}

@media(min-width: 1440px) {

    /* セクションの区切り画像 */
    .fv-title::after {
        bottom: -10%;
    }
}

/* ---------------------------------------------------
        「2026年1月4日開校予定　随時生徒募集中」の設定
    --------------------------------------------------- */
/* 背景 */
.announcement {
    text-align: center;
    background-color: var(--accent-yellow);
    padding: 20px;
}

/* 文字*/
.announcement p {
    display: inline-block;
    position: relative;
    /*左右の装飾の基準に*/
}

/* 「2026」「1」「4」を大きく太字 */
.announcement span {
    font-size: 25px;
    font-weight: bold;
}

@media(min-width: 768px) {

    /* 文字*/
    .announcement p {
        font-size: 30px;
    }

    /* 「2026」「1」「4」を大きく太字 */
    .announcement span {
        font-size: 45px;
    }
}

/* 装飾共通設定 */
.announcement p::before,
.announcement p::after {
    content: "";
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 17px;
    aspect-ratio: 27/64;
    position: absolute;
    bottom: 0;
}

/* 装飾左 */
.announcement p::before {
    background-image: url(../img/decoration/announcement-left.png);
    left: -10%;
}

/* 装飾右 */
.announcement p::after {
    background-image: url(../img/decoration/announcement-right.png);
    right: -10%;
}

@media(min-width: 768px) {

    /* 装飾左 */
    .announcement p::before {
        width: 28px;
    }

    /* 装飾右 */
    .announcement p::after {
        width: 28px;
    }
}

/* -------------------------------------------------
                フリースクールとは 
    ------------------------------------------------ */
/* --------茶色の丸、緑色の丸の装飾の設定------- */
.freeschool {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

/* 装飾用の丸を擬似要素で作成（HTMLを汚さない） */
.freeschool::before,
.freeschool::after {
    content: "";
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    opacity: 0.7;
}

/* 茶色の丸 */
.freeschool::before {
    background-color: var(--accent-brown);
    top: 15%;
    left: -50px;
}

/* 緑色の丸 */
.freeschool::after {
    background-color: var(--main);
    bottom: 0;
    right: -50px;
}

/* -------イラストの設定------- */
/* （SP版、タブレット版のみ）ムゲン、ダイくん、ランちゃん表示 */
.characters-group {
    width: 320px;
    margin: 0 auto;
}

.characters-group img {
    width: 300px;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
}

/* （PC版のみ）ムゲン、ダイくん、ランちゃん非表示 */
.character-dai,
.character-ran,
.character-mugen {
    display: none;
}

/* PC版のみ表示 */
@media screen and (min-width:1025px) {

    /* ムゲン、ダイくん、ランちゃんの配置基準 */
    .freeschool-text-wrapper {
        position: relative;
    }

    /* （SP版、タブレット版のみ）ムゲン、ダイくん、らいちゃんの集合は非表示 */
    .characters-group {
        display: none;
    }

    /* （PC版のみ）ムゲン、ダイくん、ランちゃんの絶対配置 */
    .character-dai,
    .character-ran,
    .character-mugen {
        display: block;
        position: absolute;
    }

    .character-dai {
        top: 365px;
        left: -175px;
        transform: rotate(-5deg);
    }

    .character-ran {
        top: 110px;
        right: -170px;
        transform: rotate(5deg);
    }

    .character-mugen {
        top: 50px;
        left: -150px;
        transform: rotate(-5deg);
    }

    /* ムゲン、ダイくん、ランちゃんの写真の大きさ */
    .character-dai img,
    .character-ran img,
    .character-mugen img {
        width: 150px;
        aspect-ratio: 1;
        object-fit: contain;
        object-position: center;
    }

    /* ムゲン、ダイくん、ランちゃんの説明文字の中央揃え */
    .freeschool-text-wrapper figcaption {
        text-align: center;
    }
}

/* ---------「可能性は無限大」の習字-------- */
.infinite-possibility {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}

/* アニメーションの初期状態 */
.infinite-possibility img {
    opacity: 0;
}

/* is-visibleクラスが付いたらアニメーションを開始 */
.infinite-possibility.is-visible img {
    animation-name: draw-in;
    animation-duration: 1.2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    /* アニメーション後の状態を維持 */
}

/* 2つ目の画像は少し遅れてアニメーションを開始 */
.infinite-possibility.is-visible img:last-child {
    animation-delay: 1.1s;
}

/* 筆で描かれるようなアニメーションの定義 */
@keyframes draw-in {
    0% {
        opacity: 0;
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

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

    /*タブレット版から横並び*/
    .infinite-possibility {
        flex-direction: row;
    }

    .infinite-possibility img {
        width: 50%;
    }
}

/* ------「フリースクール無限大とは」のテキスト------- */
/* テキストの文字を太字で強調*/
.freeschool-text-bold {
    font-weight: bold;
}

/* 「好きなことに熱中する時・・・挑戦する体験こそが、」の段落を消す */
.freeschool-text-wrapper p:nth-of-type(2) br {
    display: none;
}

/* テキスト間と「くわしく見る」のボタンの余白 */
.freeschool p {
    margin-bottom: 20px;
}

@media(min-width: 768px) {

    .freeschool {
        text-align: center;
    }

    /* テキストが中央揃えの時は読点をなしにする */
    .freeschool-text-touten {
        display: none;
    }

    /* 「好きなことに熱中する時・・・挑戦する体験こそが、」の段落を消す */
    .freeschool-text-wrapper p:nth-of-type(2) br {
        display: inline;
    }
}

/* -----------「フリースクール無限大とは」のスライドショー-----------*/
.slider-fadein {
    width: 100%;
    max-width: 700px;
    aspect-ratio: 4/3;
    margin: 40px auto 20px;
    position: relative;
}

.slider-fadein li {
    left: 20px;
    right: 20px;
    aspect-ratio: 4/3;
    object-fit: cover;
    position: absolute;
    visibility: hidden;
    animation: fadein-fadeout-animation 15s infinite;
}

.slider-fadein img {
    width: 100%;
    border-radius: 20px;
}

.slider-fadein li:first-child {
    animation-delay: 0s;
}

.slider-fadein li:nth-child(2) {
    animation-delay: 3s;
}

.slider-fadein li:nth-child(3) {
    animation-delay: 6s;
}

.slider-fadein li:nth-child(4) {
    animation-delay: 9s;
}

.slider-fadein li:nth-child(5) {
    animation-delay: 12s;
}


/* スライドのアニメーション定義 */
@keyframes fadein-fadeout-animation {
    0% {
        visibility: visible;
        /* アニメーション開始時に表示状態にする */
        opacity: 0;
    }

    /* 0.75秒 (5%) かけてフェードイン */
    5% {
        opacity: 1;
    }

    /* 1.5秒 (10%) 表示を維持 */
    15% {
        opacity: 1;
    }

    /* 0.75秒 (5%) かけてフェードアウト */
    90% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* -----------------------------------------
            １日の活動の流れ
    --------------------------------------- */
/* １日の活動の流れのまとめ */
.activity {
    background-color: var(--accent-yellow);
    position: relative;
}

/* -----------三角屋根-------------- */
.activity::before {
    content: "";
    width: 100%;
    height: 200px;
    background-color: var(--accent-yellow);
    clip-path: polygon(50% 78%, 0% 100%, 100% 100%);
    position: absolute;
    top: -200px;
    left: 0;
}

@media screen and (min-width:768px) {
    .activity {
        margin-top: 50px;
    }

    .activity::before {
        clip-path: polygon(50% 45%, 0% 100%, 100% 100%);
    }
}

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

    /* 上のスライドショーと被らないように余白を */
    .activity {
        margin-top: 60px;
    }

    .activity::before {
        clip-path: polygon(50% 25%, 0% 100%, 100% 100%);
    }
}

/* ---------写真と「１日の活動の流れ」と「詳しく見る」のグリッド------------- */
.activity-grid {
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "activity2 activity1"
        "activity2 activity-text";
    column-gap: 20px;
    row-gap: 40px;
    position: relative;
    /*足跡の装飾の基準*/
    margin-bottom: 70px;
}

.activity1 {
    grid-area: activity1;
}

.activity2 {
    grid-area: activity2;
    align-self: center;
}

.activity-text {
    grid-area: activity-text;
}

@media screen and (min-width:1025px) {
    .activity-grid {
        grid-template-columns: 1fr 20% 40%;
        grid-template-rows: auto;
        grid-template-areas:
            "activity-text activity2 activity1";
        column-gap: 20px;
        row-gap: 40px;
        margin-bottom: 300px;
    }

    .activity1 {
        transform: translateY(-50px);
    }

    .activity2 {
        grid-area: activity2;
        align-self: flex-end;
        transform: translateY(50px);
    }

    .activity-text {
        align-self: flex-end;
    }
}

/* -------足跡の装飾---------- */
@media screen and (min-width:1025px) {
    .activity-grid::after {
        content: "";
        background: url(../img/decoration/footprints.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 200px;
        aspect-ratio: 91/250;
        /*元画像の比率*/
        position: absolute;
        bottom: -100%;
        left: 60%;
        transform: rotate(-100deg);
    }
}


/* ----------写真の設定----------- */
.activity-grid img {
    aspect-ratio: 3 / 3;
    object-fit: cover;
    border-radius: 50% 50% 0 0;
}

/* -----「１日の活動の流れ」のタイトル -----*/
.activity-title {
    text-align: center;
}

/* ----------SNSの設定------------ */
/* YouTubeとInstagramのgrid */
.activity-sns-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "youtube "
        "instagram"
    ;
    row-gap: 40px;
    justify-content: center;
    align-items: center;
}

/* youtubeの設定 */
.youtube {
    grid-area: youtube;
}

.youtube iframe {
    width: 100%;
    aspect-ratio: 16/9;
}

/* -----Instagramの設定 -----*/
/* Instagramの枠 */
.instagram {
    grid-area: instagram;
    width: 100%;
    position: relative;
    transition: all 0.7s ease-in-out;
}

/* Instagramの画像 */
.instagram img {
    border: 1px solid var(--gray);
    position: relative;
}

/* 「Instagramで他の投稿を見る」のポジション等 */
.instagram p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    white-space: nowrap;
    text-align: center;
    color: var(--font);
    background-color: var(--main);
    padding: 10px 20px;
}

/* ひょっこりするムゲンの初期設定 */
.instagram::after {
    content: "";
    background: url(../img/character/mugen.PNG) no-repeat;
    background-size: contain;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 50%;
    left: 53%;
    /*微妙に写真の中心がずれているので調整*/
    transform: translate(-50%, -50%);
    /* 初期状態でキャラクターの8割を隠す */
    transition: transform 0.4s ease-out;
    /* なめらかなアニメーション */
    z-index: 1;
    /* 画像の背後に配置 */
    opacity: 0;
}

/* Instagramのホバー時にキャラクターをひょっこり */
.instagram:hover::after {
    transform: translate(-50%, -100%);
    /* キャラクターを上にスライド */
    opacity: 1;
}

.instagram:hover img {
    cursor: pointer;
    filter: blur(1px);
}

@media screen and (min-width:768px) {
    .activity-sns-wrapper {
        grid-template-columns: calc(57% - 20px) calc(43% - 20px);
        /*main_innerのpadding分を引いておく*/
        grid-template-rows: 300px;
        grid-template-areas:
            "youtube instagram";
        row-gap: 0px;
        column-gap: 20px;
    }

    .youtube {
        width: 100%;
    }

    .instagram a {
        display: block;
        /* 高さを指定するためにブロック要素にする */
        height: 100%;
    }
}

/* -------「1日の活動の流れ」と「ご里曜日・料金について」の間のイラスト------- */
@media screen and (min-width:768px) {
    .activity::after {
        content: "";
        background: url(../img/character/happy-mugen.PNG);
        background-repeat: no-repeat;
        background-size: contain;
        width: 150px;
        height: 130px;
        position: absolute;
        bottom: -85px;
        left: 15%;
        z-index: 1;
    }
}

@media screen and (min-width:1025px) {
    .activity::after {
        width: 250px;
        height: 160px;
    }
}

/* ----------------------------------------------
            ご利用日・料金について
    ------------------------------------------- */
/* -----茶色の丸、緑色の丸の装飾の設定----- */
/* 茶色の丸と緑色の丸の基準 */
.fees {
    position: relative;
    overflow: hidden;
    z-index: 0;
}

/* 装飾用の丸を擬似要素で作成 */
.fees::before,
.fees::after {
    content: "";
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    opacity: 0.7;
}

/* 茶色の丸 */
.fees::before {
    background-color: var(--accent-brown);
    top: 285px;
    right: -50px;
}

/* 緑色の丸 */
.fees::after {
    background-color: var(--main);
    bottom: 10%;
    left: -50px;
}

/* 「ご利用日・料金について」の文字をタブレット版から中央揃え */
@media (min-width: 768px) {
    .fees h2 {
        text-align: center;
    }
}

/* グリッドの設定 */
.fees-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "age-card"
        "day-card"
        "target-area-card"
        "transfer-area-card"
        "price-card"
        "graduate-card";
    row-gap: 40px;
}

.age-card {
    grid-area: age-card;
}

.day-card {
    grid-area: day-card;
}

.price-card {
    grid-area: price-card;
}

.target-area-card {
    grid-area: target-area-card;
}

.transfer-area-card {
    grid-area: transfer-area-card;
}

.graduate-card {
    grid-area: graduate-card;
}


@media (min-width: 1025px) {
    .fees-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto auto;
        grid-template-areas:
            "age-card day-card"
            /* 1行目 */
            "target-area-card transfer-area-card"
            /* 2行目 */
            "price-card price-card"
            /* 3行目 */
            "graduate-card graduate-card";
        /* 4行目 */
        column-gap: 40px;
    }

    .transfer-area-card h3 br,
    .transfer-area-card p:nth-of-type(2) br {
        display: none;
    }
}

/* カードの設定 */
.age-card,
.day-card,
.price-card,
.target-area-card,
.transfer-area-card,
.graduate-card {
    background-color: #fff;
    padding: 60px 20px;
    border-radius: 60px;
}

/* 「対象年齢」「利用日」「スクールの利用料金」と「クラブ活動料金」のインナー */
.fees-inner {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

/* 各カードのタイトルの設定 */
.fees-wrapper h3 {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 60px;
}

/* 対象年齢のカードの設定 */
/* 「６歳～２２歳」を中央揃え */
.age-card .fees-inner p:first-of-type {
    text-align: center;
}

/* 「６歳～２２歳」の「６」「２２」を大きく太く */
.age-card span {
    font-size: 40px;
    font-weight: bold;
}

/* 「６歳～２２歳」とテキストの余白 */
.age-card p:last-child {
    margin-top: 60px
}

/* ご利用日のカードの設定 */
/* 「月火水木金」を中央揃え */
.day-card .fees-inner p:first-of-type {
    text-align: center;
}

/* 「月火水木金」の黄色の枠 */
.day-card span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: var(--accent-yellow);
    border-radius: 50%;
}

/* 「月火水木金」とテキストの余白 */
.day-card p:last-child {
    margin-top: 60px;
}

@media (min-width: 768px) {

    /* 「月火水木金」をタブレット版から少し文字大きく */
    .day-card .fees-inner p:first-of-type {
        font-size: 25px;
    }

    /* 「月火水木金」の黄色の枠 */
    .day-card span {
        width: 60px;
        height: 60px;
    }
}

/* 送迎エリア（自主通学以外の方）変な改行が入らないようにbrタグを削除する */
@media screen and (max-width:768px) {
    .transfer-area-card p:last-child br {
        display: none;
    }
}


/* 　-----料金のカードの設定----- */
/* 「入会金（初月のみ）」の設定 */
.admission-fee {
    text-align: center;
    background-color: var(--marker-green);
    padding: 20px;
    border-radius: 20px;
}

@media (min-width: 768px) {
    .admission-fee {
        padding: 40px;
    }
}

.admission-fee p:last-child {
    font-size: 24px;
}

/* 「１カ月の利用料金」 */
.monthly-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

/* 「１カ月の利用料金」の上の余白 */
.monthly-fee {
    margin-top: 40px;
}

/* 「スクール利用料金」と「クラブ料金」共通の表 */
.fee-table caption {
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}

.fee-table table {
    width: 100%;
    font-size: 16px;
    border: 1px solid var(--font);
    /* テーブル全体を黒い線で囲む */
    margin-bottom: 20px;
    /* テーブルと下のテキストとの間に余白を追加 */
    background-color: #fff;
}

.fee-table thead th {
    font-weight: normal;
    /*初期が太字なので、打ち消す*/
}

.fee-table th,
.fee-table td {
    border: 1px solid var(--font);
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

/*「スクールの利用料金」の背景*/
.school-fee {
    background-color: var(--marker-yellow);
    padding: 20px 10px;
    border-radius: 20px;
}

/* 「＋」の位置と余白 */
.plus {
    font-size: 40px;
    text-align: center;
    margin: 20px 0px;
}

/*「クラブ活動利用料金：の背景*/
.club-fee {
    background-color: var(--marker-blue);
    padding: 20px 10px;
    border-radius: 20px;
}

@media (min-width: 1025px) {

    /* 「１カ月の利用料金」を横並びにする */
    .monthly-fee {
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas:
            " monthly-title monthly-title monthly-title"
            "school-fee plus club-fee";
        column-gap: 10px;
    }

    .monthly-title {
        grid-area: monthly-title;
    }

    .school-fee {
        grid-area: school-fee;
    }

    .plus {
        grid-area: plus;
    }

    .club-fee {
        grid-area: club-fee;
    }

    /* カードの設定 */
    .age-card,
    .day-card,
    .price-card,
    .target-area-card,
    .transfer-area-card {
        padding: 60px 40px;
    }

    /* 「＋」の位置と余白 */
    .plus {
        align-self: center;
        margin: 0px;
    }

    /* 「スクールの利用料金」の背景 */
    .school-fee {
        padding: 40px;
    }

    /* 「クラブ活動利用料金」の背景 */
    .club-fee {
        padding: 40px;
    }
}
/* -----「昼食について」----- */
/* 「１カ月利用料金」との余白 */
.lunch-fee{
    margin-top: 40px;
}
/* 「昼食について」の文字の大きさ */
.lunch-fee p{
    font-size: 24px;
}
/* 内容(li)の前に「・」を付ける設定 */
.lunch-fee li{
    list-style-type: disc;
    margin-left: 30px;
}


/* -----利用料金の例----- */
.fee-exsample {
    margin-top: 40px;
    /*例の上の余白*/
}

.fee-exsample div {
    margin-bottom: 20px;
    /*例題との間の余白*/
}

.fee-exsample p:first-child {
    font-size: 24px;
    /*例題のタイトルの大きさ*/
}

.fee-exsample p:last-child {
    margin-left: 20px;
}

/* マーカー */
.highlight-accent {
    background: linear-gradient(transparent 60%, var(--marker-green) 60%);
}

.highlight-main {
    background: linear-gradient(transparent 60%, var(--marker-yellow) 60%);
}

.highlight-sub {
    background: linear-gradient(transparent 60%, var(--marker-blue) 60%);
}

/* -----卒業生コース----- */
/* 「月額２００００円」の中央揃え */
.graduate-card p {
    text-align: center;
}

/* 「※年間契約も可能」と記述リストの間の余白 */
.fees-info-list {
    margin-top: 40px;
}

/* 記述リストの太字を打ち消す */
.fees-info-list dt {
    font-weight: normal;
    margin-top: 20px;
}
/* 「月額20,000円」の文字を大きく */
.graduate-price{
    font-size: 24px;
}
/* 「こちら」のリンクの装飾 */
.fees-info-list a{
    color: red;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 90%; /* 0 100%が一番下。数値を小さくすると上に移動 */
    background-size: 100% 2px;
    background-repeat: no-repeat;
    transition: all 0.3s ease-in-out;
}
.fees-info-list a:hover{
    color: var(--main);
    opacity: 0.7;
}

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

    /* 「対象」「内容」のレイアウト変更 */
    .fees-info-list {
        display: grid;
        grid-template-columns: auto 1fr ;
    }

    .fees-info-list dt{
        grid-column: 1;
        margin-top:0px;/*スマホ版の打ち消し*/
    }

    .fees-info-list dd{
        grid-column: 2;
    }
    /* タブレット版のみ「;」を追加 */
    .fees-info-list dt::after{
        content: "：";
    }
}

/* --------------------------------------
            アクセス
    ------------------------------------- */
/* 黄色の丸の基準 */
.access {
    position: relative;
    overflow: hidden;
    z-index: 0;
}


/* 「ご利用日・料金について」との間に足跡の装飾を入れるからその隙間 */
@media screen and (min-width:768px) {
    .access {
        padding-top: 150px;
    }
}

/* --------セクション間の足跡の装飾(タブレット版、PC版)---------- */
@media screen and (min-width:768px) {
    .access::before {
        content: "";
        background: url(../img/decoration/footprints.png);
        background-repeat: no-repeat;
        background-size: contain;
        width: 13%;
        aspect-ratio: 91 / 250;
        transform: rotate(120deg);
        position: absolute;
        top: -120px;
        left: 20%;
    }
}

@media screen and (min-width:1025px) {
    .access::before {
        width: 10%;
        top: -130px;
    }
}

/* ------黄色の丸の装飾（擬似要素）------ */
.access::after {
    content: "";
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    opacity: 0.7;
    background-color: var(--accent-yellow);
    top: 800px;
    right: -50px;
}

@media screen and (min-width:1025px) {
    .access::after {
        top: 1000px;
        right: -100px;
    }
}

/*---------- google mapの設定---------- */
.access iframe {
    width: 100%;
    aspect-ratio: 4/3;
    margin-bottom: 20px;
}

@media screen and (min-width:768px) {
    .access iframe {
        aspect-ratio: 16/9;
    }
}

/* ----------フリースクールの道のり--------- */
/* グリッドの設定 */
.way-to-school {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "way1"
        "way2"
        "way-text";
    row-gap: 20px;
    margin-top: 60px;
}

.way1 {
    grid-area: way1;
    justify-self: flex-start;
}

.way2 {
    grid-area: way2;
    justify-self: flex-end;
}

.way-text {
    grid-area: way-text;
}

/* 写真の大きさ */
.way1,
.way2 {
    width: 80%;
    border-radius: 10px;
}

@media screen and (min-width:768px) {
    .google-map-inner {
        width: 100%;
        max-width: 1160px;
        margin: 0 auto;
    }

    /* タブレット版とPC版からグリッド変更 */
    .way-to-school {
        grid-template-columns: 55% 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "way1 way-text"
            "way2 way2";
        column-gap: 20px;
        margin-top: 80px;
    }

    .way1 {
        width: 100%;
    }

    .way2 {
        width: 55%;
    }

    .way-text {
        align-self: center;
    }
}

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

    /* タブレット版とPC版からグリッド変更 */
    .way-to-school {
        column-gap: 40px;
        margin-top: 120px;
    }
}