/*######################################################################
共通設定
######################################################################*/

:root {
    --width__main-content: min(100%, 1000px);
    --color__accent: #FF7BAC;
}

/* コンテンツ全体の調整 */
body {
    width: min(100%, 1440px);
    margin-inline: auto;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-optical-sizing: auto;
    color: #322e23;
    background-color: #fff;

    &.page { /* bodyが .page というクラス名を持っているときだけ */
        margin: 0 auto;
    }
}

h1 {
    margin: 0;
}

p, a, ul, ol, table {
    /* 400-768 */
    font-size: clamp(0.875rem, 0.739rem + 0.543vw, 1rem);
}

/* imgタグの調整 */
img {
    vertical-align: top;
    width: 100%;
}

.sp {
    display: none;
}

@media (max-width: 767px) {
    .pc {
        display: none;

    }
 }


.pc-only {
    display: block; /* PCでは表示 */
}

@media (max-width: 767px) {
    .pc-only {
        display: none; /* SPでは非表示 */
    }
}
/* SP版でのみ表示 */
.sp-only {
    display: none; /* PCでは非表示 */
}

@media (max-width: 767px) {
    .sp-only {
        display: block; /* SPでは表示 */
    }
}



/* 折り返し */
/* PC版でのみ表示 */
.pc {
    display: inline; /* PCでは表示 */
}

@media (max-width: 767px) {
    .pc {
        display: none; /* SPでは非表示 */
    }
}
/* SP版でのみ表示 */
.sp {
    display: none; /* PCでは非表示 */
}

@media (max-width: 767px) {
    .sp {
        display: inline; /* SPでは表示 */
    }
}

span.strong {
    font-weight: bold; /* 太字にする */
    font-size: 1em;  /* 強調のためにサイズを若干大きく（任意） */
}

/*------------------------------------------------------------
スクロールアニメーション
------------------------------------------------------------*/

/* フェードイン */
.fadein {
    opacity: 0;
    animation: fadein 1s ease-in forwards;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadein-scrollin {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1.5s;


    &.scrollin-left {
        transform: translate(-30px, 0);
    }

    &.scrollin-right {
        transform: translate(30px, 0);
    }

    &.scrollin-bottom {
        transform: translate(0, 30px);
    }

    &.scrollin {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/*######################################################################
コンテンツ
######################################################################*/
/*------------------------------------------------------------
fv
------------------------------------------------------------*/
.fv {
    position: relative;
    margin-inline: auto;
}

.fv__before-price {
    position: absolute;
    color: #fff;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    /* 51-27px */
    font-size: clamp(1.688rem, -0.027rem + 3.571vw, 3.188rem);
    letter-spacing: -0.08em;
    top: 71%;
    left: 31.6%;
}
@media (max-width: 767px) {
    .fv__before-price {
        /* 25-50px */
        font-size: clamp(1.563rem, 0.068rem + 6.378vw, 3.125rem);
        top: 80%;
        left: 13%;
    }
}
.fv__after-price {
    position: absolute;
    background: linear-gradient(
        to bottom,
        #e0110d 0%,
        #e0110d 35%,
        #940704 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
    /* 100-53px */
    font-size: clamp(3.313rem, -0.045rem + 6.994vw, 6.25rem);
    letter-spacing: -0.05em;
    top: 67%;
    left: 48%;
}
@media (max-width: 767px) {
    .fv__after-price {
        font-weight: 600;
        /* 45-90px */
        font-size: clamp(2.813rem, 0.122rem + 11.48vw, 5.625rem);
        top: 78%;
        left: 45%;
    }
}

.fv__before-price span,
.fv__after-price span {
    font-size: 0.7em;
}

/*------------------------------------------------------------
cta
------------------------------------------------------------*/
/* fv */
.cta-btn {
    position: absolute;
    width: min(46.6%, 672px);
    top: 78%;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .cta-btn {
        width: 89.6%;
        top: 85.7%;
    }
}
/* fv_end */

.cta01, .cta02, .cta03, .cta04 {
    position: relative;
    margin-inline: auto;
}
.cta01-btn, .cta02-btn {
    position: absolute;
    width: min(46.6%, 672px);
    top: 52%;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .cta01-btn, .cta02-btn {
        width: 89.6%;
        top: 51%;
    }
}
.cta03-btn {
    position: absolute;
    width: min(46.6%, 672px);
    top: 49%;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .cta03-btn {
        width: 94%;
        top: 53%;
    }
}
.cta04-btn {
    position: absolute;
    width: min(52.4%, 755px);
    top: 66%;
    left: 51%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .cta04-btn {
        width: 89.6%;
        top: 74%;
    }
}



.cta01__before-price {
    position: absolute;
    color: #fff;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    /* 51-27px */
    font-size: clamp(1.688rem, -0.027rem + 3.571vw, 3.188rem);
    letter-spacing: -0.08em;
    top: 36%;
    left: 31.5%;
}
@media (max-width: 767px) {
    .cta01__before-price {
        /* 25-50px */
        font-size: clamp(1.563rem, 0.068rem + 6.378vw, 3.125rem);
        top: 38%;
        left: 13%;
    }
}
.cta01__after-price {
    position: absolute;
    background: linear-gradient(
        to bottom,
        #e0110d 0%,
        #e0110d 35%,
        #940704 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
    /* 100-53px */
    font-size: clamp(3.313rem, -0.045rem + 6.994vw, 6.25rem);
    letter-spacing: -0.05em;
    top: 28.5%;
    left: 48%;
}
@media (max-width: 767px) {
    .cta01__after-price {
        font-weight: 600;
        /* 45-90px */
        font-size: clamp(2.813rem, 0.122rem + 11.48vw, 5.625rem);
        top: 33%;
        left: 45%;
    }
}


.cta02__before-price {
    position: absolute;
    color: #fff;
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
    /* 51-27px */
    font-size: clamp(1.688rem, -0.027rem + 3.571vw, 3.188rem);
    letter-spacing: -0.08em;
    top: 37.5%;
    left: 31.5%;
}
@media (max-width: 767px) {
    .cta02__before-price {
        /* 25-50px */
        font-size: clamp(1.563rem, 0.068rem + 6.378vw, 3.125rem);
        top: 37.5%;
        left: 13%;
    }
}
.cta02__after-price {
    position: absolute;
    background: linear-gradient(
        to bottom,
        #e0110d 0%,
        #e0110d 35%,
        #940704 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
    /* 100-53px */
    font-size: clamp(3.313rem, -0.045rem + 6.994vw, 6.25rem);
    letter-spacing: -0.05em;
    top: 29.5%;
    left: 48%;
}
@media (max-width: 767px) {
    .cta02__after-price {
        font-weight: 600;
        /* 45-90px */
        font-size: clamp(2.813rem, 0.122rem + 11.48vw, 5.625rem);
        top: 32%;
        left: 45%;
    }
}


.cta03__after-price {
    position: absolute;
    background: linear-gradient(
        to bottom,
        #e0110d 0%,
        #e0110d 35%,
        #940704 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
    /* 36-19.5px */
    font-size: clamp(1.219rem, 0.04rem + 2.455vw, 2.25rem);
    letter-spacing: -0.03em;
    top: 37.7%;
    left: 54.2%;
}
@media (max-width: 767px) {
    .cta03__after-price {
        /* 26-52px */
        font-size: clamp(1.625rem, 0.07rem + 6.633vw, 3.25rem);
        letter-spacing: -0.03em;
        top: 39.5%;
        left: 60%;
    }
}


.cta04__after-price {
    position: absolute;
    background: linear-gradient(
        to bottom,
        #e0110d 0%,
        #e0110d 35%,
        #940704 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
    /* 100-53px */
    font-size: clamp(3.313rem, -0.045rem + 6.994vw, 6.25rem);
    letter-spacing: -0.05em;
    top: 49%;
    left: 48%;
}
@media (max-width: 767px) {
    .cta04__after-price {
        font-weight: 600;
        /* 45-90px */
        font-size: clamp(2.813rem, 0.122rem + 11.48vw, 5.625rem);
        top: 63%;
        left: 45%;
    }
}

.cta01__before-price span,
.cta01__after-price span,
.cta02__before-price span,
.cta02__after-price span,
.cta03__after-price span,
.cta04__after-price span {
    font-size: 0.7em;
}
/*------------------------------------------------------------
course
------------------------------------------------------------*/
.course01,
.course02,
.course03 {
    position: relative;
}
.course01__price,
.course02__price,
.course03__price {
    position: absolute;
    font-family: "Shippori Mincho", serif;
    font-weight: 500;
    font-style: normal;
    /* 29-15.5px */
    font-size: clamp(0.969rem, 0.004rem + 2.009vw, 1.813rem);
    letter-spacing: -0.03em;
}
@media (max-width: 767px) {
    .course01__price,
    .course02__price,
    .course03__price {
        /* 17-34px */
        font-size: clamp(1.063rem, 0.046rem + 4.337vw, 2.125rem);
    }
}
.course01__price {
    top: 30.6%;
    left: 74.3%;
}
@media (max-width: 767px) {
    .course01__price {
        top: 41.1%;
    }
}
.course02__price {
    top: 30.6%;
    left: 24.5%;
}
@media (max-width: 767px) {
    .course02__price {
        top: 51.6%;
        left: 22%;
    }
}
.course03__price {
    top: 21.8%;
    left: 74.3%;
}
@media (max-width: 767px) {
.course03__price {
    top: 32.3%;
    left: 74.3%;
}
}
.course01__price span,
.course02__price span,
.course03__price span {
    font-size: 0.7em;
}


/*------------------------------------------------------------
access
------------------------------------------------------------*/
.access {
    position: relative;
}
.access__inner {
    position: absolute;
    width: min(40%, 570px);
    top: 19.5%;
    left: 50%;
    /* 20-11px */
    font-size: clamp(0.688rem, 0.045rem + 1.339vw, 1.25rem);
}
@media (max-width: 767px) {
    .access__inner {
        width: 85%;
        top: 39.5%;
        left: 51%;
        transform: translateX(-50%);
        /* 11-22px */
        font-size: clamp(0.688rem, 0.03rem + 2.806vw, 1.375rem);
    }
}
.access__grid {
    display: flex;
    gap: 9%;
    justify-content: space-between;
}
@media (max-width: 767px) {
    .access__grid {
        display: block;
    }
}
.access__block {
    flex: 1;
}
.access__item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 3%;
}
.access__term {
    width: 15%;
    padding-bottom: 2%;
    text-align: justify;           /* 両端揃え */
    text-align-last: justify;      /* 最終行にも適用 */
    text-justify: inter-ideograph; /* 日本語の均等配置 */
}
@media (max-width: 767px) {
    .access__term {
        width: 15%;
    }
}

.access__desc {
    flex: 1;
    padding-bottom: 3%;
    line-height: 1.6;
    padding-left: 4em;
}
@media (max-width: 767px) {
    .access__desc {
        padding-bottom: 1.5%;
    }
}
.access__desc-under {
    padding-bottom: 7%;
}

span.line-top {
    display: inline-block;
    margin-top: 6%;
}

.map__area {
    position: absolute;
    width: min(61%, 880px);
    height: auto;
    top: 60.5%;
    left: 50%;
    transform: translateX(-50%);
}
@media (max-width: 767px) {
    .map__area {
        width: 92%;
        height: auto;
        top: 70%;
    }
}
.map {
    position: absolute;
    width: min(99%, 871px);
    height: 98%;
    top: 1%;
    left: 0.5%;

}
@media (max-width: 767px) {
    .map {
        height: 98.5%;
        top: 0.5%;
    }
 }


/*------------------------------------------------------------
footer
------------------------------------------------------------*/
.footer {
    padding: 3em 0;
    background-color: #50aea7;
    color: #ffffff;
}
@media (max-width: 767px) {
    .footer {
        padding: 1em 0;
    }
 }

.footer__nav {
    font-size: clamp(0.875rem, 0.765rem + 0.49vw, 1rem);
    letter-spacing: 0.8px;
    
    ul {
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;

        li:not(:last-child)::after {
            content: "　　　　　　　　";
        }
    }

    a {
        text-decoration: none;
        transition: 0.2s;
        /* 16-10px */
        font-size: clamp(0.625rem, 0.196rem + 0.893vw, 1rem);

        &:hover {
            color: lightgray;
        }
    }
}
@media (max-width: 767px) {
    .footer__nav ul {
        li:not(:last-child)::after {
            content: "　　　";
        }
    }
    .footer__nav a {
        font-size: 10px !important;
    }
 }

.copyright__p {
    text-align: center;
    font-weight: 400;
    letter-spacing: 0.6px;
    margin-top: 3em !important;
    /* 16-10px */
    font-size: clamp(0.625rem, 0.196rem + 0.893vw, 1rem);
}
@media (max-width: 767px) {
    .copyright__p {
        margin-top: 1em !important;
        font-weight: 400;
        letter-spacing: 0;
        font-size: clamp(0.625rem, 0.027rem + 2.551vw, 1.25rem) !important;
    }
 }