/* Scss Document */

$color: #a08f1a; //サイトで良く使う色
$text: #000; //基本的なテキストの色

//hoverアニメーションを使いたい場合に使用
//呼び出し方法(cssに指定)　→　@include ani;
@mixin ani {
    transition: 0.3s ease-in-out;
}

//display:flex;を使用した場合等に使用（widthが30%から70%まで）画面幅が740pxで100%に変わる
//呼び出し方法(htmlに指定)　→　.flex_30　～　.flex_70
@for $i from 30 through 70 {
    .flex_#{$i} {
        width: 1% * $i;
    }
}

//padding-topとpadding-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.padding100　～　.padding300
$p: 100;

@while $p < 310 {
    .padding#{$p} {
        padding-top: $p + px;
        padding-bottom: $p + px;
    }

    $p: $p + 10;
}

//margin-topとmargin-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.margin100　～　.margin300
$m: 100;

@while $m < 310 {
    .margin#{$m} {
        margin-top: $m + px;
        margin-bottom: $m + px;
    }

    $m: $m + 10;
}

//padding-top（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.pt-120　～　.pt-300
$pt: 110;

@while $pt < 310 {
    .pt-#{$pt} {
        padding-top: $pt + px;
    }

    $pt: $pt + 10;
}

//padding-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.pb-120　～　.pb-300
$pb: 110;

@while $pb < 310 {
    .pb-#{$pb} {
        padding-bottom: $pb + px;
    }

    $pb: $pb + 10;
}

//margin-top（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.mt-120　～　.mt-300
$mt: 110;

@while $mt < 310 {
    .mt-#{$mt} {
        margin-top: $mt + px;
    }

    $mt: $mt + 10;
}

//margin-bottom（タブレットで全て80px、スマホで全て60px）←変更可能
//呼び出し方法(htmlに指定)　→　.mb-120　～　.mb-300
$mb: 110;

@while $mb < 310 {
    .mb-#{$mb} {
        margin-bottom: $mb + px;
    }

    $mb: $mb + 10;
}

* {
    text-decoration: none !important;
}

.top_fadein {
    animation: fadeIn_ani 2s;
}

@keyframes fadeIn_ani {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.logo {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 191px;
    z-index: 1000;

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

.cy_header_btn {
    max-width: 230px;
    width: 100%;
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 1000;

}

.cy_header_btn a {
    background: linear-gradient(270deg, #0683d3 0%, #5c1fab 100%);
    color: #fff;
    display: block;
    width: 100%;
    font-size: 16px;
    padding: 14px 10px;
    text-align: center;
    border-radius: 30px;
}

/* ファーストビュー */

#mv {
    position: relative;
    background: url(../images/mv_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.mv_copy {
    position: absolute;
    left: 8vw;
    top: 17vw;
    z-index: 10;
    max-width: 938px;
    width: 80%;

    img {
        width: 100%;
    }

}

.eng_style {
    color: rgba(255, 255, 255, 0);
    -webkit-text-stroke: 2px #ffffff;
    text-stroke: 2px #ffffff;
}


/* 流れる文字 */
/* ---------------------------- */
.loop_wrapper {
    position: absolute;
    bottom: 0;
    font-size: 250px;
    display: flex;
    overflow: hidden;
    text-align: center;
    width: 100%;
}

.loop_wrapper_text {
    display: inline-block;
    white-space: nowrap;
    animation: scrollTxt 40s linear infinite;
    margin-right: 40px;
    line-height: 1.1;
}

@keyframes scrollTxt {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}


/* フェード画像 */

.flexslider {
    width: 100% !important;
    overflow: hidden;
    // height: 100vh;
    height: clamp(600px, 50vw, 970px) !important;
}

/************************/

.line-height12 {
    line-height: 1.2;
}

.line-height16 {
    line-height: 1.6;
}

.title_30 {
    font-size: 30px;
    letter-spacing: 0.1em;
}

.title_35 {
    font-size: 35px;
}

.title_40 {
    font-size: 40px;
}

.title_45 {
    font-size: 45px;
    letter-spacing: 0.1em;
}

.title_50 {
    font-size: 50px;
}

.title_110 {
    font-size: 110px;
}

.en_title_120 {
    font-size: 120px;
}

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}

.indent_p {
    text-indent: -1.1em;
    padding-left: 1.1em
}

.title_bb {
    position: relative;
    border-bottom: 1px solid #707070;

    &::before {
        content: "";
        display: block;
        border-bottom: 1px solid #2f7dd4;
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 130px;
        z-index: 10;
    }
}

.top_bg {
    background: url(../images/top_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.sp_none {
    display: none;
}

.sec01 {
    .pc_title {
        max-width: 1212px;
        margin: 0 auto 100px;

        img {
            width: 100%;
        }
    }

    .pc_subtitle {
        max-width: 1110px;
        margin: 0 auto 100px;

        img {
            width: 100%;
        }
    }
}

.sec02 {
    border-bottom: 1px solid #fff;

    li {
        display: flex;
        justify-content: space-between;
        padding: 80px 0;
        border-top: 1px solid #fff;
    }
}

.sec02_left {
    width: 60%;
}

.sec02_right {
    width: 33%;
    max-width: 480px;
}

.sec03 {
    display: flex;

    li {
        width: 50%;
        border: 1px solid #fff;
        padding: 80px 30px;
        text-align: center;
    }
}

.clinic_table {
    width: 100%;
    font-size: 20px;

    tr {
        &:first-of-type {
            border-top: 1px solid #fff;
        }

        th {
            width: 20%;
            min-width: 8em;
            padding: 32px 10px 32px 25px;
            border-bottom: 1px solid #fff;
            vertical-align: baseline;
        }

        td {
            padding: 32px 10px 32px 25px;
            border-bottom: 1px solid #fff;

            .map {
                max-width: 700px;
                height: 400px;
                margin-bottom: 10px;

                iframe {
                    width: 100%;
                    height: inherit;
                }
            }
        }
    }
}

.sec05_bg {
    background: url(../images/top8.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 170px 0;
}

.sec05_flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact_btn {
    width: 400px;

    a {
        position: relative;
        width: 100%;
        display: block;
        text-align: center;
        padding: 33px 20px;
        border: 1px solid #fff;
        border-radius: 50px;
        color: #fff;
        font-size: 20px;
        transition: 0.3s ease;

        &::before {
            content: "";
            background: url(../images/arrow_w.svg) left 0 / 100% 100% no-repeat;
            width: 10px;
            height: 16px;
            position: absolute;
            right: 8%;
            top: 50%;
            transform: translateY(-50%);
            transition: 0.3s ease;
        }

        &:hover {
            background-color: #fff;
            color: #000;

            &::before {
                background: url(../images/arrow_b.svg) left 0 / 100% 100% no-repeat;
            }
        }
    }
}

.footer_link {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 1.5vw;
    row-gap: 1.5vw;
    padding: 120px 0;

    img {
        width: 100%;
    }

}

.copy {
    background-color: #000;
    text-align: center;
    font-size: 15px;
    letter-spacing: 0.12em;
    padding: 30px 0;
}


/*************************************************************

    contact

*************************************************************/

.h_padding {
    padding-top: 200px;
}

.contact_bg {
    background-color: #1f2020;
}

.bg_item {
    position: absolute;
    bottom: 0;
    right: 0;
    overflow: hidden;

    // img {
    //     width: 100%;
    //     height: auto;
    // }
}

.bg_000 {
    background-color: #000;
}

.h_main {
    p {
        font-size: 165px;
        letter-spacing: 0.04em;
        font-family: "Anton-Regular";
        line-height: 1.15;
    }

    h2 {
        font-size: 36px;
        font-weight: bold;
        letter-spacing: 0.1em;
    }
}

.tel_num {
    font-size: 60px;
    font-family: "Anton-Regular";

    span {
        font-size: 45px;
    }
}

.tel_txt {
    font-size: 30px;
}

.contact_flex {
    display: flex;
    border: 1px solid #fff;

    li {
        width: 50%;
        padding: 4vw 5vw;
        white-space: nowrap;

        &:first-of-type {
            border-right: 1px solid #fff;
        }

        .line_banner {
            width: 100%;

            a {
                position: relative;
                width: 100%;
                display: block;
                background-color: #22ac38;
                color: #fff;
                font-size: 20px;
                padding: 34px 45px;
                text-align: center;

                &::before {
                    content: "";
                    background: url(../images/line_icon.png) left 0 / 100% 100% no-repeat;
                    width: 50px;
                    height: 50px;
                    position: absolute;
                    left: 45px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                &::after {
                    content: "";
                    background: url(../images/line_arrow.svg) left 0 / 100% 100% no-repeat;
                    width: 24px;
                    height: 17px;
                    position: absolute;
                    right: 30px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
    }
}

// フォーム

.contact_table {
    position: relative;
    z-index: 10;

    >div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #707070;
        padding: 50px 0 50px 45px;

        &:first-of-type {
            border-top: 1px solid #707070;
        }
    }
}


.e_cell1 {
    width: 300px;
    display: flex;
    align-items: center;
    font-size: 18px;
    letter-spacing: 0.08em;
    line-height: 1.9;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.e_cell2 {
    width: calc(100% - 300px);
}

.hissu {
    background-color: #2f7dd4;
    width: 45px;
    color: #FFF;
    text-align: center;
    font-size: 14px;
    margin-right: 30px;
}

.size input {
    height: 70px;
}


.size input,
.area textarea {
    width: 100%;
    max-width: 870px;
    background-color: #111111;
    border: 1px solid #111111;
    padding: 10px 20px;
}

.area textarea {
    height: 200px;
}

/* 個人情報保護方針 */

.check_box {
    display: flex;
    justify-content: center;
    font-family: "noto-sans-cjk-jp", sans-serif;
    font-weight: 500;
    font-style: normal;

    input[type="checkbox"] {
        display: none;
        position: relative;
        z-index: 10;
    }

    .wpcf7-list-item {
        display: inline-block;
        margin: 0 !important;
    }

    .wpcf7-list-item-label::after {
        content: "";
        position: absolute;
        top: 60%;
        left: -20px;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 3px;
        border: 1px solid #d2d2d2;
    }

    .wpcf7-list-item-label::before {
        content: "";
        position: absolute;
        top: 2px;
        left: -7px;
        width: 13px;
        height: 20px;
        border-right: 2px solid #2f7dd4;
        border-bottom: 2px solid #2f7dd4;
        transform: rotate(45deg);
        opacity: 0;
        z-index: 10;
        display: block;
    }

    a {
        color: #fff;
        border-bottom: 1px solid #fff;
        padding-bottom: 5px;
        margin-left: 20px;
    }

    p {
        display: flex;


        span {
            font-size: 18px;

        }
    }
}

.wpcf7-form-control-wrap {
    position: relative;
}

#checkbox {
    position: relative;
}

input[type=checkbox]:checked+.wpcf7-list-item-label::before {
    opacity: 1;
}

/************************/

.wpcf7-not-valid-tip {
    margin-top: 15px;
}

.wpcf7-spinner {
    display: none !important;
}

/************************/

.submit {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;

    input {
        position: relative;
        background: linear-gradient(270deg, #0683d3 0%, #5c1fab 100%);
        border: 1px solid#1f2020;
        color: #fff;
        font-size: 22px;
        letter-spacing: 0.12em;
        width: 100%;
        padding: 44px 10px;
        border-radius: 60px;
    }

    .shape {
        position: absolute;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);

        img {
            width: 22px;
            height: auto;
            transition: 0.5s ease;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0;
        }
    }
}







/************************/

/* PC用
------------------------------------------------------------*/
@media only screen and (max-width: 1699px) {

    .mv_copy {
        max-width: 800px;
    }
}

@media only screen and (max-width: 1400px) {
    .title_50 {
        font-size: 40px;
    }

    .title_110 {
        font-size: 90px;
    }

    .mv_copy {
        max-width: 700px;
    }

    .contact_btn {
        width: 320px;

        a {
            position: relative;
            width: 100%;
            display: block;
            text-align: center;
            padding: 26px 20px;
            border: 1px solid #fff;
            border-radius: 50px;
            color: #fff;
            font-size: 20px;
            transition: 0.3s ease;
        }
    }

    /* 流れる文字 */
    /* ---------------------------- */
    .loop_wrapper {
        font-size: 180px;
    }


    /*************************************************************

    contact

*************************************************************/

    .tel_num {
        font-size: 55px;
        font-family: "Anton-Regular";

        span {
            font-size: 40px;
        }
    }
}

@media only screen and (max-width: 1200px) {

    .title_110 {
        font-size: 80px;
    }

    .en_title_120 {
        font-size: 100px;
    }

    .mv_copy {
        max-width: 560px;
        top: 35%;
    }

    .sec05_flex {
        display: block;
    }

    .contact_btn {
        margin-top: 60px;
    }

    .eng_style {
        color: rgba(255, 255, 255, 0);
        -webkit-text-stroke: 1px #ffffff;
        text-stroke: 1px #ffffff;
    }

    /* 流れる文字 */
    /* ---------------------------- */
    .loop_wrapper {
        font-size: 140px;
    }

    /*************************************************************

    contact

*************************************************************/


    .h_main {
        p {
            font-size: 130px;
        }
    }

    .tel_num {
        font-size: 50px;
        font-family: "Anton-Regular";

        span {
            font-size: 35px;
        }
    }

    .contact_flex {
        li {
            width: 50%;
            padding: 3vw 4vw;

            .line_banner {
                width: 100%;

                a {
                    font-size: 18px;
                    padding: 25px 10px;

                    &::before {
                        content: "";
                        width: 40px;
                        height: 40px;
                        left: 30px;
                    }
                }
            }
        }
    }

}

@media only screen and (max-width: 1024px) {
    $p: 100;
    $pixel: 120;

    @while $p < 310 {
        .padding#{$p} {
            padding-top: $pixel + px;
            padding-bottom: $pixel + px;
        }

        $p: $p + 10;
    }

    $m: 100;

    @while $m < 310 {
        .margin#{$m} {
            margin-top: $pixel + px;
            margin-bottom: $pixel + px;
        }

        $m: $m + 10;
    }

    $pt: 120;

    @while $pt < 310 {
        .pt-#{$pt} {
            padding-top: $pixel + px;
        }

        $pt: $pt + 10;
    }

    $pb: 120;

    @while $pb < 310 {
        .pb-#{$pb} {
            padding-bottom: $pixel + px;
        }

        $pb: $pb + 10;
    }

    $mt: 120;

    @while $mt < 310 {
        .mt-#{$mt} {
            margin-top: $pixel + px;
        }

        $mt: $mt + 10;
    }

    $mb: 120;

    @while $mb < 310 {
        .mb-#{$mb} {
            margin-bottom: $pixel + px;
        }

        $mb: $mb + 10;
    }


    /******************/

    .title_30 {
        font-size: 24px;
    }

    .title_35 {
        font-size: 22px;
    }

    .title_40 {
        font-size: 30px;
    }

    .title_45 {
        font-size: 30px;
    }

    .title_50 {
        font-size: 32px;
    }

    .title_110 {
        font-size: 58px;
    }

    .cy_header_btn {
        top: 30px;
        right: 40px;
        z-index: 1000;

    }

    .logo {
        width: 160px;
    }

    .mv_copy {
        max-width: 500px;
    }


    .sec01 {
        .pc_title {
            margin: 0 auto 80px;
        }

        .pc_subtitle {
            margin: 0 auto 80px;
        }
    }

    .sec02 {
        li {
            padding: 40px 0 50px;
        }
    }

    .footer_link {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1.5vw;
        row-gap: 1.5vw;
        padding: 120px 0;
    }


    /*************************************************************

    contact

*************************************************************/

    .h_main {
        p {
            font-size: 120px;
            letter-spacing: 0.04em;
            font-family: "Anton-Regular";
            line-height: 1.15;
        }

        h2 {
            font-size: 28px;
        }
    }

    .contact_flex {
        li {
            width: 50%;
            padding: 3vw 4vw;
            text-align: center;

            .line_banner {
                width: 100%;

                a {
                    font-size: 16px;
                    padding: 25px 10px;
                    letter-spacing: 0.05em;

                    &::before {
                        width: 30px;
                        height: 30px;
                        left: 20px;
                    }

                    &::after {
                        width: 18px;
                        height: 18px;
                        right: 15px;
                    }
                }
            }
        }
    }

    .tel_num {
        font-size: 36px;
        font-family: "Anton-Regular";

        span {
            font-size: 22px;
        }
    }

    .tel_txt {
        font-size: 22px;
    }

    // フォーム


    .contact_table {
        >div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #707070;
            padding: 40px 0 40px 30px;

            &:first-of-type {
                border-top: 1px solid #707070;
            }
        }
    }


    .e_cell1 {
        width: 260px;
    }

    .e_cell2 {
        width: calc(100% - 260px);
    }




}

@media only screen and (max-width: 740px) {
    @for $i from 30 through 70 {
        .flex_#{$i} {
            width: 100%;
        }
    }

    $p: 100;
    $pixel: 100;

    @while $p < 310 {
        .padding#{$p} {
            padding-top: $pixel + px;
            padding-bottom: $pixel + px;
        }

        $p: $p + 10;
    }

    $m: 100;

    @while $m < 310 {
        .margin#{$m} {
            margin-top: $pixel + px;
            margin-bottom: $pixel + px;
        }

        $m: $m + 10;
    }

    $pt: 110;

    @while $pt < 310 {
        .pt-#{$pt} {
            padding-top: $pixel + px;
        }

        $pt: $pt + 10;
    }

    $pb: 110;

    @while $pb < 300 {
        .pb-#{$pb} {
            padding-bottom: $pixel + px;
        }

        $pb: $pb + 10;
    }

    $mt: 110;

    @while $mt < 310 {
        .mt-#{$mt} {
            margin-top: $pixel + px;
        }

        $mt: $mt + 10;
    }

    $mb: 110;

    @while $mb < 310 {
        .mb-#{$mb} {
            margin-bottom: $pixel + px;
        }

        $mb: $mb + 10;
    }

    /*****************/

    .title_110 {
        font-size: 54px;
    }

    .en_title_120 {
        font-size: 56px;
    }

    .pc_none {
        display: none;
    }

    .sp_none {
        display: block;
    }

    .mv_copy {
        top: 52%;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }

    .logo {
        top: 30px;
        left: 6vw;
    }

    .cy_header_btn {
        display: none;
    }


    /* 流れる文字 */
    /* ---------------------------- */
    .loop_wrapper {
        font-size: 110px;
    }

    .sec01 {
        .pc_title {
            max-width: 400px;
            margin: 0 auto 60px;

            img {
                width: 100%;
            }
        }

        .pc_subtitle {
            max-width: 460px;
            margin: 0 auto 60px;

            img {
                width: 100%;
            }
        }
    }

    .sec02 {
        li {
            display: block;
        }
    }

    .sec02_left {
        width: 100%;
    }

    .sec02_right {
        width: 100%;
        max-width: 100%;
        margin-top: 40px;
    }

    .sec03 {
        display: block;

        li {
            width: 100%;
            border: 1px solid #fff;
            padding: 60px 20px;
            text-align: center;
        }
    }

    .clinic_table {
        width: 100%;
        font-size: 18px;

        tr {
            &:first-of-type {
                border-top: 1px solid #fff;
            }

            th {
                display: block;
                width: 100%;
                min-width: 8em;
                padding: 20px 10px 10px 10px;
                border: none;
                vertical-align: baseline;
            }

            td {
                display: block;
                width: 100%;
                padding: 0 10px 20px 10px;
                border-bottom: 1px solid #fff;

                .map {
                    height: 300px;

                    iframe {
                        width: 100%;
                        height: inherit;
                    }
                }
            }
        }
    }


    .sec05_bg {
        padding: 100px 0;
    }

    .footer_link {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        row-gap: 3vw;
        padding: 100px 0;
    }

    /*************************************************************

    contact

*************************************************************/

    .h_main {
        p {
            font-size: 70px;
        }

        h2 {
            font-size: 24px;
        }
    }

    .h_padding {
        padding-top: 180px;
    }

    .bg_item {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 400px;
    }

    .contact_flex {
        display: block;
        border: 1px solid #fff;

        li {
            width: 100%;
            padding: 60px 20px;
            white-space: nowrap;

            &:first-of-type {
                border-right: none;
                border-bottom: 1px solid #fff;
            }

            .line_banner {
                max-width: 450px;
                margin: 0 auto;

                a {
                    font-size: 18px;

                    &::before {
                        width: 40px;
                        height: 40px;
                        left: 30px;
                    }

                    &::after {
                        width: 24px;
                        height: 17px;
                        right: 30px;
                    }
                }
            }
        }
    }

    // フォーム

    .contact_table {
        >div {
            display: block;
            padding: 20px 0 20px 0;

            &:first-of-type {
                border-top: 1px solid #707070;
            }
        }
    }


    .e_cell1 {
        font-size: 17px;
    }

    .e_cell2 {
        width: 100%;
        margin-top: 10px;
    }

    .hissu {
        font-size: 15px;
        width: 40px;
        margin-right: 20px;
    }

    .size input {
        height: 70px;
    }


    .size input,
    .area textarea {
        width: 100%;
        max-width: 870px;
        background-color: #111111;
        border: 1px solid #111111;
    }

    .area textarea {
        height: 200px;
    }

    .submit {
        input {
            font-size: 17px;
            padding: 30px 10px;
            border-radius: 60px;
        }

        .shape {
            position: absolute;
            right: 50px;
            top: 50%;
            transform: translateY(-50%);

            img {
                width: 22px;
                height: auto;
                transition: 0.5s ease;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
            }
        }
    }


    .tel_num {
        font-size: 38px;
        font-family: "Anton-Regular";

        span {
            font-size: 30px;
        }
    }



}

/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width: 480px) {}