.pc { display: block !important; }
.sp { display: none !important; }

body {
    animation: fadeIn 1.5s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {
    opacity: 1;
    transform: translate(0,0);
    }
}


/* 共通 */

.wrapper {
    width: 1040px;
    margin: 0 auto;
    padding: 0 20px;
}

.section_title {
    padding: 0 20px;
}

.center {
    text-align: center;
}

.main_btn {
    max-width: 300px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
}

.main_btn a {
    display: block;
    background: #6593DB;
    color: #fff;
    border-radius: 100px;
    text-align: center;
    position: relative;
    transition: all 0.2s ease-in-out;
}

.main_btn a::after {
    content: "";
    width: 6px;
    height: 6px;
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    position: absolute;
    top: 50%;
    right: 35px;
    margin-top: -4px;
    transform: rotate(45deg);
}

.main_btn a:hover {
    background: #F8F2E2;
    color: #555555;
}

.main_btn a:hover::after {
    border-top: solid 2px #555555;
    border-right: solid 2px #555555;
}

.section_bg_blue {
    background: #AFC6EB;
    padding: 100px 0;
    margin-bottom: -5px;
}

.wave_top {
    margin-top: 100px;
    margin-bottom: -5px;
}

.wave_bottom {
    margin-top: -5px;
    transform: scale(-1, -1);
}


/* header */

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

.tel_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 518px;
    height: 73px;
    line-height: 73px;
    padding: 0 20px;
    background: #6593DB;
}

.tel_box_text {
    width: 200px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    color: #6593DB;
    border-radius: 100px;
    text-align: center;
}

.tel_box_tel {
    font-size: 30px;
    font-weight: 600;
    color: #fff;
}

.fa-phone-alt {
    margin-right: 0.2em;
}

.is-animation {
    background: #fff;
    box-shadow: 0 0 15px rgba(68,95,123,0.1);
}


/* gnav */

.gnav {
    margin-top: 15px;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.gnav_list {
    display: flex;
    justify-content: space-around;
}

.gnav_list li {
    position: relative;
    font-size: 16px;
    font-family: dnp-shuei-mgothic-std, sans-serif;
    font-weight: 600;
}

.gnav_list li::before {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    background: #AFC6EB;
    position: absolute;
    top: 10px;
    left: -45px;
}

.gnav_list li:last-child::after {
    content: "";
    display: block;
    width: 2px;
    height: 50px;
    background: #AFC6EB;
    position: absolute;
    top: 10px;
    right: -45px;
}

.gnav_list a:hover .gnav_icon {
    transform: scale(1.2,1.2);
}

.gnav_icon {
    margin: 0 auto;
    transition: all 0.1s ease-in-out;
    display: block;
}

.gnav_letter {
    margin: 10px auto 0;
    display: block;
}

.gnav_letter path {
    transition: all 0.1s ease-in-out;
}

.gnav_list a:hover .gnav_letter path {
    fill: #6593DB;
}


/* mv */

.mv_wrap {
    min-width: 1040px;
    margin: 5px 0 80px;
    position: relative;
}

.mv_visual {
    position: relative;
    padding-top: 50%;
}

.mv_schedule {
    position: absolute;
    bottom: 18%;
    right: 5%;
    z-index: 2;
}

.slider_fade {
    position: absolute;
    top: 1px;
    width: 100%;
}

.slider_fade li {
    position: absolute;
    list-style: none;
    visibility: hidden;
    animation: anime_slider_fade 12s 0s infinite;
}

.slider_fade li:nth-of-type(2) {
    animation-delay: 4s;
}

.slider_fade li:nth-of-type(3) {
    animation-delay: 8s;
}

@keyframes anime_slider_fade {
    0% {
        visibility: visible;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
    }
    48.3% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.mv_wave_top {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

.mv_wave_bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}


/* modal */

.corona_banner img {
    transition: all 0.15s ease-in-out;
    cursor: pointer;
}

.corona_banner:hover img {
    transform: scale(1.05,1.05);
}

.modal_bg {
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    width: 100%;
    height: 100%;
    background:rgba(175,198,235,0.8);
    z-index: 100;
    display: none;
}

.modal_window {
    position: fixed;
    width: 1000px;
    height: 85%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    display: none;
}

.close_btn {
    position: absolute;
    top: -20px;
    right: 0px;
    display: block;
    width: 80px;
    height: 80px;
    background-color: #6593DB;
    color: #eaeaea;
    border-radius: 50%;
    cursor: pointer;
    z-index: 102;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.close_btn span {
    display: block;
    width: 40px;
    height: 4px;
    background: #fff;
    border-radius: 2px;
}

.close_btn span:nth-last-of-type(1) {
    transform: translateY(-2px) rotate(-45deg);
}

.close_btn span:nth-last-of-type(2) {
    transform: translateY(2px) rotate(45deg);
}

.modal_inner {
    background-color: #fff;
    height: 100%;
    border-radius: 57px;
    overflow-y: scroll;
    padding: 60px 80px 80px;
    font-size: 16px;
    letter-spacing: 0.05em;
}

.modal_title {
    font-size: 32px;
    color: #6593DB;
    text-align: center;
    margin-bottom: 30px;
}

.modal_section {
    margin-top: 50px;
}

.modal_section_title {
    font-size: 28px;
    color: #6593DB;
    width: 100%;
    background:rgba(175,198,235,0.5);
    text-align: center;
    margin-bottom: 20px;
}

.modal_icon_area {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.modal_icon_text {
    max-width: 120px;
    background: #6593DB;
    color: #fff;
    text-align: center;
    border-radius: 100px;
    margin: 10px auto 0;
}

.modal_list {
    margin: 20px 0 30px;
}

.modal_list li {
    margin-bottom: 20px;
    padding-left: 2em;
    text-indent: -2em;
}

.modal_list li::before {
    content: "●";
    color: #6593DB;
    margin-right: 10px;
}

.modal_list span {
    display: block;
    font-size: 14px;
    text-indent: -0.5em;
}

.please_title {
    font-size: 20px;
    background:rgba(248,242,226,0.5);
    text-align: center;
    margin: 30px 0;
}

.width_680 {
    width: 680px;
    margin: 0 auto;
}

.please_attention {
    font-size: 14px;
}

.modal_last_text {
    margin-top: 30px;
}


/* message */

.message_section {
    display: flex;
    justify-content: space-between;
    margin-top: 150px;
    position: relative;
}

.message_teeth {
    position: absolute;
    top: -80px;
    left: 0;
    z-index: -1;
}

.message_text {
    width: 400px;
}

.message_text p {
    margin-bottom: 30px;
}

.message_img {
    width: 421px;
}


/* promise */

.promise_wrap {
    margin-bottom: 80px;
}

.promise_list {
    display: flex;
    justify-content: space-between;
}

.promise_list:last-child {
    margin-top: 50px;
}

.promise_section_title {
    width: 30%;
    order: 2;
}

.promise_box {
    width: 30%;
    background: #fff;
    border-radius: 30px;
    padding: 30px 0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

.promise_icon {
    text-align: center;
}

.promise_text {
    text-align: center;
    line-height: 30px;
}

.promise_text span {
    font-size: 24px;
    font-weight: 600;
    color: #6593DB;
}


/* news */

.news_section {
    margin: 100px auto;
}

.news_wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 100px;
    position: relative;
}

.news_teeth {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.news_list {
    height: 12em;
    overflow-y: scroll;
}

.news_item {
    display: flex;
    margin-bottom: 50px;
}

.news_item:last-child {
    margin-bottom: 0;
}

.news_item dt {
    color: #6593DB;
    padding-right: 30px;
    margin-right: 30px;
    border-right: 1px solid #707070;
}

.news_item dd {
    width: 680px;
}

.link_wrap {
    display: flex;
    justify-content: space-between;
}

.link_list {
    width: 48%;
}

.link_img:last-child {
    margin-top: 40px;
}

.link_img a {
    transition: all 0.2s ease-in-out;
}

.link_img a:hover {
    opacity: 0.6;
}


/* cta */

.cta_section {
    background: #F8F2E2;
    position: relative;
    padding: 30px 0 40px;
}

.cta_tel {
    width: 500px;
    margin: 40px auto 50px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    border-radius: 100px;
    background: #fff;
}

.cta_tel a {
    padding-left: 80px;
    font-size: 40px;
    font-weight: 600;
    display: block;
    text-align: center;
    color: #6593DB;
    position: relative;
}

.cta_tel a::before {
    content: "";
    display: block;
    width: 110px;
    height: 110px;
    background: #6593DB;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 45px;
    transform: translate(-50%,-50%);
    transition: all 0.1s ease-in-out;
}

.cta_tel a::after {
    content: "当日予約\AもOK";
    white-space: pre;
    font-size: 16px;
    line-height: 28px;
    display: block;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 45px;
    transform: translate(-50%,-50%);
}

.cta_tel a:hover::before {
    width: 120px;
    height: 120px;
}

.cta_text {
    text-align: center;
}


/* footer */

.footer {
    margin-top: 100px;
}

.footer_info {
    display: flex;
    justify-content: space-between;
}

.footer_address {
    margin-top: 30px;
}

.footer_access_btn {
    margin: 30px auto 0 0;
}

.footer_standard_link { margin-top: 30px;}

.footer_standard_link a::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-top: solid 2px #6593DB;
    border-right: solid 2px #6593DB;
    transform: rotate(45deg);
    margin-right: 1em;
    margin-bottom: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .footer_standard_link a:hover {
        text-decoration: underline;
    }
}

.footer_tel_box {
    background: transparent;
}

.footer_tel_box_text {
    background: #6593DB;
    color: #fff;
}

.footer_tel_box_tel {
    color: #6593DB;
}

.footer_instagram a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px 0 0 auto;
    border: 2px solid #6593DB;
    padding: 20px;
    border-radius: 20px;
    width: 500px;
    transition: all 0.2s ease-in-out;
}

.footer_instagram a:hover {
    background: #6593DB;
    color: #fff;
}

.instagram_text {
    font-size: 24px;
    font-weight: 600;
    position: relative;
    padding-left: 50px;
}

.instagram_text::before {
    content: "";
    display: inline;
    background-image: url(../img/Instagram_logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0,-50%);
}

.instagram_account {
    text-align: center;
}

.instagram_qr {
    margin-left: 30px;
}

.footer_bottom {
    background: #4D3E35;
    padding: 60px 0 70px;
    color: #fff;
    font-size: 16px;
    margin-top: 80px;
}

.footer_link {
    display: flex;
    justify-content: center;
    margin-bottom: 65px;
}

.footer_link_img a {
    transition: all 0.2s ease-in-out;
}

.footer_link_img a:hover {
    opacity: 0.7;
}

.footer_link_text {
    margin-right: 30px;
    line-height: 25px;
}

.copylight {
    text-align: center;
}



/* スマホ*/

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

    .pc { display: none !important; }
    .sp { display: block !important; }

    body {
        font-size: 14px;
        line-height: 25px;
      
        /* 下がって表示される対策 */
        padding-top: 1px;
    }

    .wrapper {
        width: 90%;
        padding: 0;
    }

    .section_title {
        margin: 0 auto;
        transform: scale(0.75);
    }

    .section_bg_blue {
        padding: 50px 5%;
    }

    .wave_top {
        margin-top: 50px;
    }

    .sp-is-animation {
        box-shadow: 0 0 15px rgba(68,95,123,0.1);
    }


    /* .header */

    .header {
        background: #fff;
        position: fixed;
        top: 0;
        z-index: 15;
        padding: 15px;
        width: 100%;
    }

    .header_right {
        display: flex;
    }

    .header_logo {
        width: 198px;
        margin-right: 20px;
    }

    .sp_tel {
        width: 45px;
        height: 45px;
        line-height: 45px;
        padding: 0;
        background: #6593DB;
    }

    .sp_tel a {
        display: block;
        text-align: center;
        color: #fff;
        font-size: 20px;
    }


    /* gnavbtn */
    
    .gnavbtn  {
        width: 45px;
        height: 45px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        margin-left: 10px;
        padding: 10px 0;
    }

    .gnavbtn span {
        display: block;
        width: 30px;
        height: 3px;
        background: #707070;
        border-radius: 2px;
        transition: all 0.2s ease-in-out;
    }

    .on .gnavbtn span:nth-of-type(1) {
        transform: translateY(11px) rotate(-45deg);
    }

    .on .gnavbtn span:nth-of-type(2) {
        opacity: 0;
    }

    .on .gnavbtn span:nth-of-type(3) {
        transform: translateY(-11px) rotate(45deg);
    }


    /* sp_nav */

    .gnav {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: rgba(255, 255, 255, 0.9);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-in-out;
    }

    .on .gnav {
        opacity: 1;
        visibility: visible;
    }

    .gnav_list {
        flex-direction: column;
        margin-top: 40px;
    }

    .gnav_list li {
        width: 80%;
        margin: 0 auto;
        border-bottom: 2px solid #AFC6EB;
    }

    .gnav_list li::before {
        display: none
    }

    .gnav_list li:last-child::after {
        display: none
    }

    .gnav_list a {
        display: flex;
        align-items: center;
        padding: 20px 0;
    }

    .gnav_icon {
        margin: 0 20px 0 5px;
    }

    .gnav_letter {
        margin: 0;
    }


    /* mv */

    .mv_wrap {
        margin: 80px 0 30px;
        min-width: auto;
    }

    .mv_visual {
        padding-top: 102%;
    }

    .sp_schedule_box {
        margin: 20px auto 0;
    }

    .tel_box {
        width: 100%;
        height: auto;
        padding: 0 10px;
        flex-wrap: wrap;
        line-height: 40px;
    }

    .tel_box_text {
        font-size: 12px;
        width: 140px;
        height: 30px;
        line-height: 30px;
        letter-spacing: 0;
    }

    .tel_box_tel {
        font-size: 20px;
    }


    /* modal */

    .modal_window {
        width: 92%;
        height: 90%;
    }

    .close_btn {
        width: 45px;
        height: 45px;
    }

    .close_btn span {
        width: 30px;
        height: 3px;
    }

    .modal_inner {
        padding: 10%;
        border-radius: 30px;
        font-size: 14px;
    }

    .modal_title {
        font-size: 24px;
        line-height: 38px;
    }

    .modal_section_title {
        font-size: 18px;
        padding: 10px 0;
    }

    .modal_icon_area {
        width: 100%;
        flex-wrap: wrap;
    }

    .modal_icon_box {
        width: 40%;
        margin-bottom: 10px;
    }

    .modal_icon_text {
        margin-top: 0;
    }

    .width_680 {
        width: 100%;
    }

    .modal_list span {
        font-size: 12px;
    }

    .please_title  {
        font-size: 16px;
        line-height: 25px;
        padding: 5px 0;
    }

    .please_title span {
        display: block;
        text-align: center;
    }


    /* message */

    .message_section {
        flex-direction: column;
        margin-top: 50px;
    }

    .message_teeth {
        width: 25%;
        top: 0;
        left: 25%;
    }

    .message_img {
        width: 100%;
        margin-top: 30px;
    }

    .message_text {
        width: 100%;
        order: 2;
        margin-top: 30px;
    }


    /* promise */

    .promise_wrap {
        margin-bottom: 50px;
    }

    .promise_list {
        flex-direction: column;
        align-items: center;
    }

    .promise_list:last-child {
    margin-top: 0;
    }

    .promise_section_title {
        order: 0;
        width: 100%;
        margin: -30px 0 -30px;
    }

    .promise_box {
        width: 100%;
        margin-top: 30px;
        padding: 20px 0;
    }

    .promise_text span {
        font-size: 22px;
    }


    /* news */

    .news_section {
        margin: 50px auto;
    }

    .news_teeth {
        width: 30%;
        top: 30px;
        right: 20%;
    }

    .news_wrap {
        flex-direction: column;
        margin-bottom: 50px;
    }

    .news_list {
        width: 100%;
        margin-top: 30px
    }

    .news_item {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .news_item dt {
        border-right: none;
    }

    .news_item dd {
        width: 100%;
    }

    .link_wrap {
        flex-direction: column;
        margin-bottom: 0;
    }

    .link_list {
        width: 100%;
        margin-bottom: 30px;
    }

    .link_list:last-child {
        margin-bottom: 0;
    }

    .link_img {
        margin-bottom: 30px;
    }

    .link_img:last-child {
        margin-top: 30px;
        margin-bottom: 0;
    }


    /* cta */

    .cta_tel {
        width: 90%;
        margin: 30px auto;
    }

    .cta_tel a {
        font-size: 24px;
        padding: 15px;
    }

    .cta_tel a::before {
        width: 70px;
        height: 70px;
        left: 35px;
        top: -23px;
    }

    .cta_tel a::after {
        font-size: 11px;
        line-height: 16px;
        left: 35px;
        top: -23px;
    }

    .cta_text span {
        display: block;
        text-align: center;
    }


    /* footer */

    .footer {
        margin-top: 50px;
    }

    .footer_info {
        flex-direction: column;
    }

    .footer_logo {
        width: 198px;
        margin: 0 auto;
    }

    .footer_address {
        text-align: center;
    }

    .footer_address_text {
        text-align: center;
    }

    .footer_access_btn {
        margin: 30px auto 0;
    }

    .footer_schedule {
        margin-top: 50px;
    }

    .footer_instagram a {
        width: 100%;
        margin-top: 30px;
        justify-content: center;
    }

    .instagram_text {
        font-size: 16px;
        padding-left: 60px;
    }

    .instagram_text::before {
        width: 40px;
        height: 40px;
        margin-top: 12px;
    }

    .instagram_account {
        font-size: 12px;
        padding-left: 60px;
    }

    .footer_bottom {
        font-size: 12px;
        padding: 30px 0;
        margin-top: 50px;
    }

    .footer_link {
        flex-direction: column;
        margin-bottom: 30px;
    }

    .footer_link_text {
        text-align: center;
        margin-right: 0;
        line-height: 20px;
    }

    .footer_link_img {
        margin: 20px auto 0;
    }

}