@charset "utf-8";
/* style.css
 * **************************************************
 * 9/10月CP
 * **************************************************
 */

/* ========================================
   ベース
   ======================================== */
/* Font：基本サイズ（16 * 0.625 = 10px） */
html {
    font-size: 62.5%;
}

body {
    color: #231815;
    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic,
        "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
        "メイリオ", sans-serif;
    font-feature-settings: "palt";
    font-optical-sizing: auto;
    font-size: min(1.32vw, 14px);
    overflow-x: hidden;
}

/* img */
img {
    max-width: 100%;
}

/* heading */
h2,
h3,
h4 {
    margin: 0 auto;
}

/* link */
a {
    transition: opacity 0.3s;
}

a:hover img {
    opacity: 0.8;
}

main {
    background-color: #ffffff;
    display: block;
}

/* content */
#content {
    background-color: #ffffff;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: min(100%, 1280px);
}

/* fixedButton */
#fixedButton {
    padding: min(1.87%, 25px) 0;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    transition: 0.5s;
    width: min(100vw, 1280px);
    z-index: 99;
}

#fixedButton.fixedButtonBg {
    background-color: #006cff;
    box-shadow: 0 -4px 6px 0 rgba(0, 0, 0, 0.1);
}

#fixedButton.show {
    transform: translate(-50%, 0);
}

#fixedButton ul {
    align-items: flex-end;
    display: flex;
    gap: 0 11.03%;
    justify-content: center;
    margin: 0 auto;
    width: 56.64%;
}

#fixedButton ul li {
    flex: 1;
    max-width: 320px;
}

#fixedButton ul li.btnSearch {
    max-width: 442px;
}

#fixedButton ul li a {
    display: block;
    width: 100%;
}

#fixedButton.fixedButtonBg ul li a {
    background-color: #ffffff;
    border-radius: 0.83em;
    color: #006cff;
    font-size: min(3.25vw, 42px);
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.28em 0 0.23em;
    position: relative;
    text-align: center;
}

#fixedButton.fixedButtonBg ul li a::after {
    border-right: 3px solid #006cff;
    border-bottom: 3px solid #006cff;
    content: "";
    display: inline-block;
    height: 0.47em;
    margin-top: -0.21em;
    position: absolute;
    top: 50%;
    right: 10.93%;
    transform: rotate(-45deg);
    width: 0.47em;
}

#fixedButton p.notes {
    color: #ffffff;
    font-size: min(1.56vw, 20px);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 1em 0 0 0;
    text-align: center;
}

/* ========================================
   コンテンツ
   ======================================== */

/* ---------------------------------------- */
/*  メインビジュアル */
/* ---------------------------------------- */

.mainvisual {
    background: url(../images/main.jpg) no-repeat right top;
    background-size: auto 100%;
    height: min(61.56vw, 788px);
    position: relative;
}

.mainvisual-heading {
    position: absolute;
    top: 9.89%;
    left: 4.29%;
    width: 40%;
}

.mainvisual-text {
    position: absolute;
    top: 53.55%;
    left: 11.87%;
    width: 17.34%;
}

/* ---------------------------------------- */
/*  イントロダクション */
/* ---------------------------------------- */

.introduction {
    padding: min(28.12vw, 360px) 0 min(6.64vw, 85px);
    position: relative;
}

.introduction-text {
    margin: 0 0 min(28.75vw, 368px) 27.03%;
    position: relative;
    width: 48.12%;
    z-index: 7;
}

.introduction-text-bottom {
    margin: 0 auto;
    width: 78.28%;
}

.introduction-img {
    position: absolute;
}

.introduction-img-01 {
    top: max(-3.28vw, -42px);
    left: -1px;
    width: 36.87%;
}

.introduction-img-02 {
    top: min(5.46vw, 70px);
    left: 45%;
    width: 27.03%;
}

.introduction-img-03 {
    top: min(9.06vw, 116px);
    right: 0;
    width: 31.79%;
}

.introduction-img-04 {
    top: min(45.31vw, 580px);
    left: 6.71%;
    width: 27.1%;
}

.introduction-img-05 {
    top: min(56.25vw, 720px);
    left: 20.46%;
    width: 34.76%;
}

.introduction-img-06 {
    top: min(39vw, 500px);
    right: 0;
    width: 38.75%;
}

.introduction-img {
    opacity: 0;
}

.introduction-img.visible {
    animation: zoom-in 0.5s linear 0s 1 normal both;
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---------------------------------------- */
/*  ワンコイン体験 */
/* ---------------------------------------- */

.onecoin {
    background-color: #48bce6;
    padding: 2.73% 0 4.68%;
}

.onecoin-heading {
    margin-inline: 0;
    width: 96.71%;
}

.onecoin-content {
    margin: 0 auto 2.34%;
    width: 76.87%;
}

.onecoin-notes {
    color: #ffffff;
    font-size: min(1.56vw, 20px);
    font-weight: 700;
    margin: 2.03% 0 0 0;
    text-align: center;
}

.onecoin-notes span:first-child {
    margin-right: 1em;
}

.onecoin-button {
    display: block;
    margin: 0 auto;
    width: 34.76%;
}

/* ---------------------------------------- */
/*  キャンペーン */
/* ---------------------------------------- */

.campaign {
    background: url(../images/bg_campaign.jpg) no-repeat center;
    background-size: cover;
    padding: 1.56% 13.9% 5%;
}

.campaign-header {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 3.24%;
}

.campaign-heading {
    margin-inline: 0;
    width: 77.74%;
}

.campaign-period {
    margin: 0 -8px 2.01% 0;
    width: 19.01%;
}

.campaign-benefit {
    display: flex;
    flex-wrap: wrap;
    gap: min(1.79vw, 23px) 17px;
    justify-content: space-between;
    margin: 0 0 3.89%;
}

.campaign-benefit-item {
    --drop-shadow: 5px 5px 0;
    background-color: #ffffff;
    border-radius: min(1.56vw, 20px);
    filter: drop-shadow(var(--drop-shadow) rgba(35, 24, 21, 0.5));
    flex: 1;
    overflow: hidden;
    transform: translateZ(0);
}

.campaign-benefit-main {
    align-items: center;
    display: flex;
    flex: auto;
    justify-content: space-between;
    position: relative;
    width: 100%;
    z-index: 2;
}

.campaign-benefit-main::before {
    background-color: #dd960d;
    content: "";
    display: block;
    height: 44.5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.campaign-benefit-main-img {
    position: relative;
    width: 298px;
}

.campaign-benefit-main-img:not(:last-child)::before,
.campaign-benefit-main-img:not(:last-child)::after {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    content: "";
    display: block;
    position: absolute;
    right: -10px;
    z-index: 1;
}

.campaign-benefit-main-img:not(:last-child)::before {
    background-image: url(../images/border_campaign.svg);
    height: 13.44%;
    top: 2.94%;
    width: 3px;
}

.campaign-benefit-main-img:not(:last-child)::after {
    background-image: url(../images/border_campaign_plus.svg);
    height: 73.1%;
    bottom: 4.2%;
    margin-right: -13px;
    width: 29px;
}

.campaign-notes li {
    color: #ffffff;
    font-size: min(1.09vw, 14px);
    letter-spacing: 0.03em;
    line-height: 1.9;
    margin-left: 1em;
    text-indent: -1em;
}

/* ---------------------------------------- */
/*  特徴 */
/* ---------------------------------------- */

.feature {
    background-color: #006cff;
    padding: 0 0 9.37%;
}

.feature-heading {
    margin-bottom: 3.9%;
    width: 75.7%;
}

.feature-heading:has(+ p) {
    margin-bottom: 2.1%;
}

.feature-text {
    color: #ffffff;
    font-size: min(1.82vw, 25px);
    font-weight: 700;
    line-height: 1.8;
    margin: 0 0 2.81%;
    text-align: center;
}

.feature .swiper {
    padding: 0 0 5.78%;
}

.feature .swiper-pagination-bullet {
    --swiper-pagination-bullet-horizontal-gap: 6px;
    background: #ffffff;
    height: 12px;
    opacity: 0.5;
    width: 12px;
}

.feature .swiper-pagination-bullet-active {
    opacity: 1;
}

.feature .swiper-button-prev::after,
.feature .swiper-button-next::after {
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.feature .swiper-button-prev::after {
    background-image: url(../images/slide_arrow_prev.svg);
}

.feature .swiper-button-next::after {
    background-image: url(../images/slide_arrow_next.svg);
}

/* fee */
.feature-fee {
    background: url(../images/bg_feature_fee_01.jpg) no-repeat center;
    background-size: cover;
    margin: 0 0 7.03%;
    padding: min(15.62vw, 200px) 18.04%;
}

/* facility */
.feature-facility {
    margin: 0 0 5.46%;
}

.feature-facility .swiper-slide {
    --drop-shadow: 10px 10px 10px;
    border-radius: 10px;
    filter: drop-shadow(var(--drop-shadow) rgba(35, 24, 21, 0.3));
    overflow: hidden;
}

.feature-facility-prev,
.feature-facility-next {
    height: 33px;
    margin-top: -33px;
    width: 16px;
}

.feature-facility-prev {
    left: calc(50% - (100% / 2.8 / 2) - 40px + 24px);
}

.feature-facility-next {
    right: calc(50% - (100% / 2.8 / 2) - 40px + 24px);
}

/* lesson */
.feature-lesson {
    margin: 0 0 5.46%;
}

.feature-lesson .swiper-slide {
    --drop-shadow: 10px 10px 10px;
    border-radius: 25px;
    filter: drop-shadow(var(--drop-shadow) rgba(35, 24, 21, 0.3));
    overflow: hidden;
}

.feature-lesson-prev,
.feature-lesson-next {
    height: 40px;
    margin-top: -40px;
    width: 20px;
}

.feature-lesson-prev {
    left: calc(50% - (100% / 2.6 / 2) - 60px + 40px);
}

.feature-lesson-next {
    right: calc(50% - (100% / 2.6 / 2) - 60px + 40px);
}

/* event */
.feature-event {
    margin: 0 0 5.46%;
}

.feature-event-img {
    margin: 0 auto 2.34%;
    width: 80.23%;
}

.feature-event-img p {
    color: #ffffff;
    margin: 0.98% 0 0 0;
}

.feature-event-button {
    display: block;
    margin: 0 auto;
    width: 34.76%;
}

/* support */
.feature-support-header {
    background: url(../images/img_feature_support_header_01.jpg) no-repeat right
        bottom min(6.56vw, 84px);
    background-size: 39.61%;
    margin: 0 9.37% 3.12%;
    padding: 2.34% 0 0;
}

.feature-support .feature-heading {
    margin-inline: 0;
    width: 59.71%;
}

.feature-support .feature-text {
    margin: 0 4.32% 3.65%;
    text-align: left;
    width: 51.44%;
}

.feature-support-block {
    margin: 0 0 6.25%;
    padding: 0 0 0 8.59%;
    position: relative;
}

.feature-support-block:nth-of-type(3) {
    padding-left: 21.48%;
}

.feature-support-block-main {
    position: relative;
    width: min(70.41vw, 900px);
}

.feature-support-button {
    position: absolute;
    bottom: min(7.03vw, 90px);
    left: 8.88%;
    width: 29.11%;
}

.feature-support-block:nth-of-type(3) .feature-support-button {
    bottom: min(7.42vw, 95px);
    left: 61.66%;
}

.feature-support-block-img {
    position: absolute;
    right: 0;
    bottom: max(-7.26vw, -93px);
    width: 55.15%;
}

.feature-support-block:nth-of-type(3) .feature-support-block-img {
    right: auto;
    left: 0;
}

/* webonly */
.webonly {
    margin: 9.53% auto 0;
    width: 81.25%;
}

.webonly-block {
    align-items: center;
    background-color: #ffffff;
    display: flex;
    margin: 0 0 3.65%;
}

.webonly-block p {
    font-size: min(1.04vw, 14px);
    line-height: 1.4;
    margin: 0.92em 0 0 0;
}

.webonly-left {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 2.59% 0 1.73%;
    position: relative;
    width: 59.23%;
}

.webonly-left::after {
    background-color: #f9321b;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 107.14%;
}

.webonly-left img {
    position: relative;
    width: 85.38%;
    z-index: 1;
}

.webonly-left p {
    color: #ffffff;
    margin-left: 1em;
    position: relative;
    text-indent: -1em;
    z-index: 1;
}

.webonly-right {
    align-items: center;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 2.59% 1.15% 1.73% 0;
}

.webonly-right img {
    width: 71.6%;
}

.webonly-notes {
    color: #ffffff;
    line-height: 1.9;
    margin: 0 0 6.73%;
}

.webonly-button {
    display: block;
    margin: 0 auto;
    width: 47.59%;
}

/* ---------------------------------------- */
/*  プログラム */
/* ---------------------------------------- */

.program {
    background: url(../images/bg_program_01.jpg) no-repeat center;
    background-size: cover;
    padding: 8.59% 9.37%;
}

.program-block {
    --box-shadow: 10px 10px 10px 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: var(--box-shadow) rgba(35, 24, 21, 0.1);
    padding: 10px;
    position: relative;
}

.sb01 {
    background-image: url(../images/bg_program_block_01.png);
}

.sb02 {
    background-image: url(../images/bg_program_block_02.png);
}

.sb03 {
    background-image: url(../images/bg_program_block_03.png);
}

.sb04 {
    background-image: url(../images/bg_program_block_04.png);
}

.program-block + .program-block {
    margin-top: 12.5%;
}

.program-block-heading {
    position: absolute;
    top: max(-3.51vw, -45px);
    left: -2.88%;
    width: 71.73%;
}

.program-block-content {
    background-color: #ffffff;
}

.program-video {
    margin: 0 auto;
    width: 76.92%;
}

.program-video-wrap {
    aspect-ratio: 16 / 9;
    position: relative;
}

.program-video-wrap iframe {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.program-button-trial {
    position: absolute;
    top: 51.76%;
    right: 13.46%;
    width: 22.5%;
}

.personal-link {
    display: flex;
    gap: 0 15px;
    margin: max(-11.71vw, -150px) 5.76% 0;
    justify-content: space-between;
}

.personal-link a {
    filter: drop-shadow(5px 5px 5px #9fa0a0);
}

/* trainer */
.program-trainer {
    align-items: center;
    display: flex;
    margin: 3.65% 12px 0;
}

.program-trainer-img {
    margin: 0 2.95% 0 0;
    width: 23.23%;
}

.program-trainer-text {
    background: url(../images/border_program_trainer.png) repeat left bottom;
    background-size: auto 2em;
    font-size: min(1.69vw, 26px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 2;
    width: 67.91%;
    white-space: nowrap;
}

.program-trainer-text span {
    font-size: 0.8em;
    letter-spacing: 0.08em;
}

/* story */
.program-story {
    background: url(../images/bg_program_story_01.jpg) repeat-y;
    padding: 3.51% 0;
}

.program-story-heading {
    margin-bottom: 2.34%;
    width: 72.26%;
}

.program-story-items {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 81.25%;
}

.program-story-item {
    border-radius: min(1.56vw, 20px);
    overflow: hidden;
    position: relative;
    width: 46.63%;
}

.program-story-item a {
    display: block;
}

.program-story-text {
    color: #ffffff;
    font-size: min(2.08vw, 27px);
    font-weight: 700;
    padding: 0.51em 0;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    width: 100%;
}

.program-story-text::before {
    background-color: rgba(23, 18, 15, 0.8);
    content: "";
    display: block;
    height: 100%;
    mix-blend-mode: multiply;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.program-story-text span {
    position: relative;
    z-index: 1;
}

.program-story-button {
    display: block;
    margin: 0 auto;
    width: 25.78%;
}

/* ---------------------------------------- */
/*  フッター */
/* ---------------------------------------- */

.footer {
    background-color: #ffffff;
}

.footer-inner {
    background-color: #ffffff;
    margin: 0 auto;
    padding: min(3.9vw, 50px) 0 min(6.25vw, 80px);
    width: min(100%, 1280px);
}

.footer-logo {
    display: flex;
    gap: 0 50px;
    justify-content: center;
}

.footer-logo-item {
    width: 17.96%;
}

@media only screen and (max-width: 767px) {
    :root {
        --drop-shadow: 3px 3px 0;
    }

    /* ========================================
   ベース
   ======================================== */

    /* fixedButton */
    #fixedButton {
        padding: 2.5% 5%;
        width: 100%;
    }

    #fixedButton ul {
        width: 70%;
    }

    #fixedButton.fixedButtonBg ul {
        gap: 0 4%;
        width: 94%;
    }

    #fixedButton ul li.btnSearch {
        width: 47.86%;
    }

    #fixedButton.fixedButtonBg ul li a {
        border-radius: 1.42em;
        font-size: 3.73vw;
        padding: 0.85em 0;
    }

    #fixedButton.fixedButtonBg ul li a::after {
        border-right-width: 2px;
        border-bottom-width: 2px;
    }

    #fixedButton p.notes {
        font-size: 2.66vw;
        line-height: 1.4;
        word-break: keep-all;
    }

    /* ========================================
   コンテンツ
   ======================================== */

    /* ---------------------------------------- */
    /*  メインビジュアル */
    /* ---------------------------------------- */

    .mainvisual-heading {
        top: 8%;
        left: 2.5%;
        width: 50%;
    }

    .mainvisual-text {
        top: 58%;
        left: 11%;
        width: 18%;
    }

    /* ---------------------------------------- */
    /*  イントロダクション */
    /* ---------------------------------------- */

    .introduction {
        padding: 17% 0 8%;
    }

    .introduction-text {
        margin-left: 17%;
        margin-bottom: 30%;
        width: 70%;
    }

    .introduction-text-bottom {
        width: 90%;
    }

    /* ---------------------------------------- */
    /*  ワンコイン体験 */
    /* ---------------------------------------- */

    .onecoin {
        padding: 9% 0 10%;
    }

    .onecoin-heading {
        margin: 0 0 0 -6%;
        overflow: hidden;
        width: 105%;
    }

    .onecoin-content {
        margin-bottom: 4%;
        width: 92%;
    }

    .onecoin-notes {
        font-size: 2.66vw;
        line-height: 1.5;
        margin-top: 3%;
    }

    .onecoin-notes span {
        display: block;
    }

    .onecoin-notes span:first-child {
        margin-right: 0;
    }

    .onecoin-button {
        width: 75%;
    }

    /* ---------------------------------------- */
    /*  キャンペーン */
    /* ---------------------------------------- */

    .campaign {
        background: #004ea2;
        padding: 2.66% 2.66% 10%;
    }

    .campaign-header {
        padding-left: 0;
    }

    .campaign-period {
        margin-right: 0;
        width: 21%;
    }

    .campaign-benefit {
        flex-direction: column;
        gap: 5vw 0;
        margin-bottom: 5%;
    }

    .campaign-benefit-item {
        --drop-shadow: 3px 3px 0;
        border-radius: 2.66vw;
    }

    .campaign-benefit-main {
        flex-direction: column;
        padding: 0 18%;
    }

    .campaign-benefit-main::before {
        content: none;
    }

    .campaign-benefit-main-img {
        margin-bottom: -1px;
        width: 100%;
    }

    .campaign-benefit-main-img:not(:last-child)::after {
        content: none;
    }

    .campaign-benefit-sub {
        padding: 0 18%;
    }

    .campaign-benefit-item::before,
    .campaign-benefit-main-img::before,
    .campaign-benefit-main-img:not(:last-child)::before {
        background-color: #dd960d;
        content: "";
        display: block;
        height: 9.17vw;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        z-index: -1;
    }

    .campaign-notes li {
        font-size: 2.66vw;
        line-height: 1.5;
    }

    /* ---------------------------------------- */
    /*  特徴 */
    /* ---------------------------------------- */

    .feature {
        padding-bottom: 10%;
    }

    .feature-heading {
        margin-bottom: 6%;
        width: 95%;
    }

    .feature-heading:has(+ p) {
        margin-bottom: 4%;
    }

    .feature-text {
        font-size: 3.2vw;
        line-break: strict;
        line-height: 2;
        margin-bottom: 4%;
        padding: 0 5%;
        word-break: keep-all;
    }

    .feature .swiper {
        padding-bottom: 8%;
    }

    /* fee */
    .feature-fee {
        margin: 0 0 10%;
        padding: 10% 2%;
    }

    .feature .swiper-pagination-bullet {
        height: 6px;
        width: 6px;
    }

    /* facility */
    .feature-facility {
        margin-bottom: 8%;
    }

    .feature-facility .swiper-slide {
        --drop-shadow: 5px 5px 5px;
        border-radius: 2.66vw;
    }

    .feature-facility-prev {
        left: calc(50% - (100% / 1.5 / 2) - 40px + 20px);
    }

    .feature-facility-next {
        right: calc(50% - (100% / 1.5 / 2) - 40px + 20px);
    }

    /* lesson */
    .feature-lesson {
        margin-bottom: 8%;
    }

    .feature-lesson .swiper-slide {
        --drop-shadow: 5px 5px 5px;
        border-radius: 12px;
    }

    .feature-lesson-prev {
        left: calc(50% - (100% / 1.5 / 2) - 60px + 32px);
    }

    .feature-lesson-next {
        right: calc(50% - (100% / 1.5 / 2) - 60px + 32px);
    }

    /* event */
    .feature-event {
        margin-bottom: 9%;
    }

    .feature-event-img {
        margin-bottom: 5%;
        width: 90%;
    }

    .feature-event-img p {
        font-size: 2.66vw;
        line-height: 1.4;
        margin: 2% 2% 0;
    }

    .feature-event-button {
        width: 70%;
    }

    /* support */
    .feature-support-header {
        margin: 0 2.5% 5%;
    }

    .feature-support .feature-heading {
        width: 67%;
    }

    .feature-support .feature-text {
        margin: 0 2% 4%;
        padding-inline: 0;
        word-break: normal;
        width: 60%;
    }

    .feature-support-block {
        margin-bottom: 6%;
        padding-left: 2vw;
    }

    .feature-support-block:nth-of-type(3) {
        margin-left: -1vw;
        padding-left: 0;
    }

    .feature-support-block-main {
        overflow: hidden;
        width: 100vw;
    }

    .feature-support-button {
        bottom: 8.53vw;
        width: 35%;
    }

    .feature-support-block:nth-of-type(3) .feature-support-button {
        bottom: 9.86vw;
        left: 56%;
    }

    .feature-support-block-img {
        bottom: -4.26vw;
        width: 46%;
    }

    /* webonly */
    .webonly {
        margin-top: 10%;
        width: 90%;
    }

    .webonly-block {
        flex-direction: column;
        margin-bottom: 5%;
    }

    .webonly-block p {
        font-size: 2.66vw;
    }

    .webonly-left {
        padding: 8% 0 6%;
        width: 100%;
    }

    .webonly-left::after {
        clip-path: none;
        width: 100%;
    }

    .webonly-left img {
        width: 80%;
    }

    .webonly-left p {
        margin-top: 4%;
    }

    .webonly-right {
        padding: 4% 0 3%;
    }

    .webonly-right img {
        width: 46%;
    }

    .webonly-right p {
        margin-top: 1%;
        padding: 0 1em;
    }

    .webonly-notes {
        font-size: 2.66vw;
        line-height: 1.4;
        margin-bottom: 8%;
    }

    .webonly-button {
        width: 78%;
    }

    /* ---------------------------------------- */
    /*  プログラム */
    /* ---------------------------------------- */

    .program {
        padding: 10% 2.66%;
    }

    .program-block {
        --box-shadow: 5px 5px 5px 0;
        padding: 5px;
    }

    .program-block + .program-block {
        margin-top: 12%;
    }

    .personal-link {
        gap: 5px;
        margin-inline: 4%;
    }

    /* trainer */
    .program-trainer {
        flex-direction: column;
        margin: 8% 0 0;
    }

    .program-trainer-text {
        background-size: 100% 2.4em;
        font-size: 3.2vw;
        letter-spacing: 0.05em;
        line-height: 2.4;
        text-align: center;
        white-space: nowrap;
        width: auto;
    }

    .program-trainer-img {
        margin: 0 0 2%;
        width: 24%;
    }

    /* story */
    .program-story {
        padding: 8% 0;
    }

    .program-story-heading {
        margin-bottom: 4%;
        width: 90%;
    }

    .program-story-items {
        width: 94.68%;
    }

    .program-story-item {
        width: 48.66%;
    }

    .program-story-text {
        font-size: 3.2vw;
    }

    .program-story-button {
        width: 50%;
    }
}