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

:root {
    --color-blue: #00aed4;
    --color-pink: #dd6987;
    --drop-shadow: 5px 5px 0;
}

/* ========================================
   ベース
   ======================================== */
/* 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;
}

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

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

/* container */
.container {
    margin: 0 9.37%;
}

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

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

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

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

#fixedButton ul li a {
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    color: #ffffff;
    display: block;
    font-size: min(3.12vw, 40px);
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.75em 0 0.45em;
    position: relative;
    text-align: center;
    transition: padding-bottom 0.2s;
    width: 100%;
}

#fixedButton ul li a:hover {
    padding-bottom: 0.7em;
}

#fixedButton ul li a::after {
    border: 2px solid #ffffff;
    border-bottom: none;
    border-top-left-radius: 0.3em;
    border-top-right-radius: 0.3em;
    content: "";
    display: block;
    height: calc(100% - 6px);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 12px);
}

#fixedButton ul li.btnSearch a {
    background-color: #34a174;
}

#fixedButton ul li.btnTrial a {
    background-color: #f39800;
}

#fixedButton ul li.btnEntry a {
    background-color: #0081cc;
}

#fixedButton p.notes {
    background-color: #e3697f;
    color: #ffffff;
    font-size: min(1.25vw, 16px);
    letter-spacing: 0.06em;
    padding: 1.12em 0 1em;
    text-align: center;
}

#fixedButton p.notes b {
    display: inline-block;
    letter-spacing: 0.2em;
}

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

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

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

.mainvisual-heading {
    position: absolute;
    top: 3.67%;
    left: 5.15%;
    width: 46.09%;
}

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

.onecoin {
    background-color: #fffbc8;
    padding: 5.85% 0;
}

.onecoin-box {
    filter: drop-shadow(var(--drop-shadow) var(--color-pink));
    position: relative;
    transform: translateZ(0);
}

.onecoin-button {
    display: block;
    margin: -11.73% auto 7.5%;
    transition: scale 0.3s;
    width: 42.78%;
}

.onecoin-button:hover {
    scale: 1.05;
}

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

.campaign {
    background: url(../images/bg_campaign.png) repeat center;
    background-size: 100%;
    padding: 5.85% 0 7.81%;
}

.campaign-header {
    align-items: flex-end;
    display: flex;
    justify-content: flex-end;
    margin: 0 0 2.5%;
    padding: 0 5.48%;
}

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

.campaign-period {
    filter: drop-shadow(var(--drop-shadow) var(--color-blue));
    width: 18.35%;
}

.campaign-content {
    padding: 0 5.48%;
}

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

.campaign-benefit-item {
    background-color: #ffffff;
    border-radius: min(1.56vw, 20px);
    filter: drop-shadow(var(--drop-shadow) var(--color-blue));
    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: var(--color-pink);
    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 {
    color: #ffffff;
    font-size: min(1.09vw, 14px);
    letter-spacing: 0.03em;
    line-height: 2.1;
}

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

.program-header {
    background: url(../images/bg_program_header.jpg) no-repeat center top;
    background-size: 100%;
    padding: 18.75% 0 0;
}

.program-header-heading {
    margin-bottom: 5.62%;
    width: 36.32%;
}

.program-content {
    background: url(../images/bg_program_content_02.png) no-repeat center top,
        url(../images/bg_program_content_01.jpg) repeat-y center bottom;
    background-size: 100%;
    padding: 11.71% 0 10.54%;
}

.program-text {
    font-size: min(2.1vw, 27px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.55;
    text-align: center;
}

.program-block {
    background-color: #ffffff;
    border: 2px solid var(--program-color);
    filter: drop-shadow(4px 4px 0 var(--program-color));
    padding: 20% 5.28% 7.5%;
    position: relative;
    z-index: 1;
}

.program-block:not(:last-of-type) {
    margin-bottom: 11.05%;
}

.block-bodymake-01 {
    --program-color: #00a0e9;
}

.block-bodymake-02 {
    --program-color: #ed4c93;
}

.block-bodymake-03 {
    --program-color: #f39800;
}

.block-bodymake-04 {
    --program-color: #009944;
}

.program-block-news-bar {
    margin: 0 0 5.76%;
    position: relative;
    z-index: 1;
}

.program-block-news-bar::before,
.program-block-news-bar::after {
    background-color: #e3697f;
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.program-block-news-bar::before {
    height: min(10.93vw, 140px);
    top: 0;
    width: min(100vw, 1280px);
    z-index: -1;
}

.program-block-news-bar::after {
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    height: min(2.34vw, 30px);
    bottom: max(-1.56vw, -20px);
    width: min(4.68vw, 60px);
}

.program-block-news-bar-text {
    margin: 0 auto;
    position: relative;
    top: max(-3.9vw, -50px);
    width: 96.15%;
}

.program-block-heading {
    position: absolute;
    top: max(-1.87vw, -24px);
    left: 50%;
    transform: translateX(-50%);
    width: 93.07%;
}

.program-block-img {
    margin: 0 0 4.31%;
}

.program-block-img .video {
    border-radius: min(2.34vw, 30px);
    margin: 0 auto;
    overflow: hidden;
    width: 86.39%;
}

.program-block-img .videoWrap {
    aspect-ratio: 16 / 9;
    position: relative;
}

.program-block-img .videoWrap iframe {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.aquaexercise {
    margin: 4.96% auto 0;
    transition: scale 0.3s;
    width: 79.37%;
}

.aquaexercise:hover {
    scale: 1.02;
}

/* ---------------------------------------- */
/*  魅力 */
/* ---------------------------------------- */

.attraction {
    background: #ffffff
        repeating-linear-gradient(
            -47deg,
            rgba(0, 158, 182, 0.2) 0 6px,
            transparent 6px 20px
        );
    padding: 7.81% 0;
}

.attraction .container {
    background-color: #ffffff;
}

.attraction-block {
    padding: 7.69% 11.15%;
}

.block-support {
    background: url(../images/border_attraction.svg) no-repeat center top;
    background-size: 89.03%;
    margin-top: 8.65%;
}

.attraction-heading {
    position: relative;
    text-align: center;
}

.block-support .attraction-heading {
    margin-bottom: 5.56%;
}

.block-unlimited .attraction-heading-sub {
    margin-bottom: 4.33%;
}

.block-support .attraction-heading-sub {
    margin-bottom: 1.98%;
}

.block-unlimited .attraction-heading-main {
    margin-left: 17.69%;
    width: 77.22%;
}

.block-support .attraction-heading-main {
    width: 75.74%;
}

.block-unlimited .attraction-heading-img {
    position: absolute;
    top: min(7.81vw, 100px);
    left: -4.95%;
    width: 38.11%;
}

.attraction-text {
    font-size: min(2.1vw, 27px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.55;
    text-align: center;
}

.block-unlimited .attraction-text {
    margin: 2.22% 0 0 18.56%;
}

.attraction-img {
    border-radius: min(2.34vw, 30px);
    overflow: hidden;
}

.attraction-button {
    display: block;
    margin: 3.71% auto 0;
    transition: scale 0.3s;
    width: 47.77%;
}

.attraction-button:hover {
    scale: 1.05;
}

.attraction-loop-slider {
    overflow: hidden;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100vw, 1280px);
}

.attraction-loop-slider + .attraction-loop-slider {
    margin-top: 3.12%;
}

.attraction-loop-slider .swiper-wrapper {
    transition-timing-function: linear !important;
}

.attraction-loop-slider .swiper-slide img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.slide-shape {
    display: block;
    height: auto;
    width: 100%;
}

/* ---------------------------------------- */
/*  パーソナル */
/* ---------------------------------------- */

.personal {
    background: #4cc6e1
        repeating-linear-gradient(
            -47deg,
            rgba(255, 255, 255, 0.1) 0 6px,
            transparent 6px 20px
        );
    padding: 3.9% 0 7.81%;
}

.personal-header {
    padding: 0 0 11.53% 6.25%;
    position: relative;
}

.personal-header::before {
    background: url(../images/deco_personal.png) no-repeat center bottom;
    background-size: 100%;
    content: "";
    display: block;
    height: min(7.81vw, 100px);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(1280px, 100vw);
}

.personal-heading {
    margin: 0 0 1.23%;
    width: 74.35%;
}

.personal-text {
    color: #ffffff;
    font-size: min(1.95vw, 25px);
    font-weight: 700;
    line-height: 2.1;
    margin: 0 0 0 1.84%;
}

.personal-text b {
    color: #fff000;
    display: inline-block;
    position: relative;
}

.personal-text b::after {
    background: url(../images/border_personal_bold.svg) no-repeat center top;
    background-size: 100%;
    content: "";
    display: inline-block;
    height: 0.24em;
    position: absolute;
    top: 0.08em;
    left: 0.36em;
    width: 4.9em;
}

.personal-img {
    position: absolute;
    bottom: 0;
    right: 4.8%;
    width: 17.3%;
}

.personal-link {
    display: flex;
    gap: 0 1.44%;
    justify-content: space-between;
    margin: 0 0 3.84%;
}

.personal-link a {
    filter: drop-shadow(var(--drop-shadow) #009eb6);
    transition: opacity 0.3s;
}

.personal-link a:hover {
    opacity: 0.8;
}

.personal-campaign {
    margin: 0 auto;
    width: 89.42%;
}

.personal-campaign-wrap {
    align-items: center;
    display: flex;
    gap: 0 3.22%;
    justify-content: center;
}

.personal-campaign-title {
    width: 24.73%;
}

.personal-campaign-detail {
    width: 71.82%;
}

/* ---------------------------------------- */
/*  最終オファー */
/* ---------------------------------------- */

.last {
    background: url(../images/bg_last_02.png) no-repeat center bottom,
        url(../images/bg_last_01.jpg) repeat-y center top;
    background-size: 100%;
    padding: 8.98% 0 12.5%;
}

.offer-box {
    margin: 0 0 9.61%;
}

.offer-heading {
    width: 95.28%;
}

.offer-button {
    display: block;
    margin: 4.32% auto 0;
    transition: scale 0.3s;
    width: 35.38%;
}

.offer-button:hover {
    scale: 1.05;
}

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

.footer {
    background-color: #ffffff;
}

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

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

.footer-logo-item {
    transition: opacity 0.3s;
    width: 17.96%;
}

.footer-logo-item:hover {
    opacity: 0.8;
}

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

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

    /* container */
    .container {
        margin: 0 3%;
    }

    /* fixedButton */
    #fixedButton {
        width: 100%;
    }

    #fixedButton ul {
        gap: 0 2%;
        width: 94%;
    }

    #fixedButton ul li a {
        font-size: 3.73vw;
        padding-top: 1em;
        padding-bottom: 0.71em;
    }

    #fixedButton ul li a::after {
        border-width: 1px;
        height: calc(100% - 4px);
        width: calc(100% - 8px);
    }

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

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

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

    .mainvisual {
        background-size: cover;
        height: 42vh;
    }

    .mainvisual-heading {
        top: 6%;
        left: 2%;
        width: 55%;
    }

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

    .onecoin {
        padding-block: 8%;
    }

    .onecoin-button {
        margin-top: -12.42%;
        margin-bottom: 5.62%;
        width: 70%;
    }

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

    .campaign {
        padding-block: 7%;
    }

    .campaign-header {
        margin-bottom: 4%;
        padding-inline: 0;
    }

    .campaign-heading {
        width: 81.65%;
    }

    .campaign-content {
        padding-inline: 0;
    }

    .campaign-benefit {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 15px;
        margin-bottom: 4%;
    }

    .campaign-benefit-item {
        border-radius: 2.66vw;
        width: 100%;
    }

    .campaign-benefit-main {
        flex-direction: column;
        gap: 0;
        grid-row: span 3 / span 3;
    }

    .campaign-benefit-sub:nth-child(2) {
        grid-column-start: 2;
    }

    .campaign-benefit-sub:nth-child(3) {
        grid-column-start: 2;
        grid-row-start: 3;
    }

    .campaign-benefit-sub-2col:last-child {
        grid-row-start: 2;
    }

    .campaign-benefit-main-img {
        width: 100%;
    }

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

    .campaign-notes {
        font-size: 2.93vw;
        line-height: 1.6;
    }

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

    .program-header {
        padding-top: 20%;
    }

    .program-header-heading {
        width: 42%;
    }

    .program-content {
        padding-block: 8%;
    }

    .program-text {
        font-size: 3.46vw;
        letter-spacing: 0.05em;
        overflow-wrap: anywhere;
        word-break: keep-all;
    }

    .program-block {
        filter: drop-shadow(2px 2px 0 var(--program-color));
        padding: 22% 5% 5%;
    }

    .program-block:not(:last-of-type) {
        margin-bottom: 8%;
    }

    .program-block-news-bar {
        margin-bottom: 4%;
    }

    .program-block-news-bar::before {
        height: 13.33vw;
    }

    .program-block-news-bar::after {
        height: 2.66vw;
        bottom: -1.33vw;
        width: 8vw;
    }

    .program-block-news-bar-text {
        width: 100%;
    }

    .program-block-heading {
        top: -2.4vw;
        width: calc(100% + 4px);
    }

    .program-block-img .video {
        width: 100%;
    }

    .aquaexercise {
        margin-top: 6%;
        width: 100%;
    }

    /* ---------------------------------------- */
    /*  魅力 */
    /* ---------------------------------------- */

    .attraction {
        background: #ffffff
            repeating-linear-gradient(
                -47deg,
                rgba(0, 158, 182, 0.2) 0 2px,
                transparent 2px 8px
            );
    }

    .attraction-block {
        padding: 8% 5%;
    }

    .block-support {
        margin-top: 8%;
    }

    .block-support .attraction-heading {
        margin-bottom: 4%;
    }

    .block-unlimited .attraction-heading-main {
        margin-left: auto;
        width: 85%;
    }

    .block-unlimited .attraction-heading-img {
        top: 21%;
        left: -10%;
        width: 37%;
    }

    .attraction-text {
        font-size: 3.46vw;
        letter-spacing: 0.05em;
        overflow-wrap: anywhere;
        word-break: keep-all;
    }

    .block-unlimited .attraction-text {
        margin: 4% 0 0;
    }

    .attraction-button {
        margin-top: 4%;
        width: 78%;
    }

    /* ---------------------------------------- */
    /*  パーソナル */
    /* ---------------------------------------- */

    .personal {
        background: #4cc6e1
            repeating-linear-gradient(
                -47deg,
                rgba(255, 255, 255, 0.1) 0 2px,
                transparent 2px 8px
            );
        padding-top: 5%;
        padding-bottom: 8%;
    }

    .personal-header {
        padding: 0 0 10%;
    }

    .personal-header::before {
        background-size: cover;
        height: 9.6vw;
    }

    .personal-heading {
        margin-bottom: 2%;
        width: 85%;
    }

    .personal-text {
        font-size: 3.46vw;
        margin-left: 1%;
    }

    .personal-img {
        right: 0;
        width: 16%;
    }

    .personal-link {
        flex-direction: column;
        gap: 4vw 0;
        margin-bottom: 8%;
    }

    .personal-campaign {
        width: 100%;
    }

    /* ---------------------------------------- */
    /*  最終オファー */
    /* ---------------------------------------- */

    .last {
        padding-top: 8%;
        padding-bottom: 15%;
    }

    .offer-box {
        margin-bottom: 10%;
    }

    .offer-heading {
        width: 100%;
    }

    .offer-button {
        margin-top: 5%;
        width: 70%;
    }
}