@charset "UTF-8";



.sp {
    display: none;
}

@media (max-width: 750px) {
    .sp {
        display: block;
    }

    .mb22 {
        margin-bottom: 22px;
    }

    .mb33 {
        margin-bottom: 33px;
    }
}

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

.btn {
    display: none;
}

a,
h1 {
    display: inline-block;
}

a img,
h1 img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1 {
    max-width: 207px;
    width: 16%;
}

h1 a {
    max-width: 207px;
    width: 100%;
}

@media (max-width: 1024px) {
    h1 {
        width: 31%;
    }
}



a.box:hover {
    filter: invert(0.5);
    transition: 0.2s;
}



@media (max-width: 1024px) {
    a.box:hover::active {
        filter: invert(0.5);
        transition: 0.2s;
    }

    a.box img {
        width: 100%;
        height: auto;
        margin: auto;
    }
}

/*a.box::after {
    content: "";
    background-image: url(../images/arrow.png);
    width: 10px;
    height: 17px;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto auto auto 5px; }*/

.flex {
    display: flex;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background-color: #FFF;
}

header .header__inner {
    margin: 38px auto;
    max-width: 1270px;
    width: 98%;
}

@media (max-width: 1024px) {
    header .header__inner {
        width: 90%;
        margin: 15px auto;
        position: relative;
    }
}

header .header__inner nav {
    float: right;
}

header .header__inner nav .nav__list {
    display: flex;
    align-items: center;
}

@media (max-width: 1024px) {
    header .header__inner nav .nav__list {
        padding: 66px 0 24px;
        overflow: auto;
    }
}

@media (max-width: 1024px) {

    header .header__inner nav .nav__list a.box:hover {
        filter: invert(0.5);
        transition: 0.2s;
        transition: .2s;
    }
}


header .header__inner nav .nav__list .list__item {
    margin-right: 45px;
    position: relative;
}

@media (max-width: 1024px) {
    header .header__inner nav .nav__list .list__item {
        margin-right: 0;
        margin-bottom: 48px;
        height: auto;
        max-width: 656px;
        width: 80%;
    }



    header .header__inner nav .nav__list .list__item:not(:nth-child(6)):hover {
        cursor: pointer;
        transition: .3s;
    }
}

@media (max-width: 1024px) {
    header .header__inner nav .nav__list .list__item:nth-child(5) {
        margin-bottom: 91px;
    }

    header .header__inner nav .nav__list .list__item:nth-child(5)::after {
        border-bottom: 1px solid #FFF;
        content: "";
        width: 100%;
        display: inline-block;
        position: absolute;
        bottom: -67px;
    }

    header .header__inner nav .nav__list .list__item:nth-child(6) {
        margin-top: 0;
        margin-bottom: 30px;
    }

    header .header__inner nav .nav__list .list__item img.pc {
        display: none;
    }


    header .header__inner nav .nav__list .list__item img.sp {
        display: block;
    }
}

@media (max-width: 750px) {
    header .header__inner nav .nav__list .tel {
        width: 80%;
        margin: auto;
    }
}

.swiper {
    margin-bottom: 116px;
    border-radius: 30px;
}

@media (max-width: 750px) {
    .swiper {
        max-width: 668px;
        width: 90%;
        margin: auto auto 65px;
        border-radius: 14.6965px;
    }
}

.swiper-slide img {
    width: 100%;
    height: auto;
}


article img {
    max-width: 100%;
    height: auto;
}

.w1366 {
    max-width: 1366px;
    width: 98%;
    margin: auto;
    text-align: center;
}

/* concept */
.concept {
    position: relative;
    text-align: center;
    margin-bottom: 310px;
}

@media (max-width: 750px) {
    .concept {
        margin-bottom: 154px;
    }
}

.concept a.box {
    margin-bottom: 20px;
}

.concept::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/leaf01.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 211px;
    height: 366px;
    z-index: -1;
}

@media (max-width: 750px) {
    .concept::before {
        background-image: url(../images/leaf01_sp.png);
        height: 103px;
        width: 106px;
    }
}

.concept .w1366>img {
    margin-bottom: 75px;
}

@media (max-width: 750px) {
    .concept .w1366>img {
        margin-bottom: 35px;
    }
}

@media (max-width: 750px) {
    .concept .tel {
        width: 80%;
        margin: auto;
    }
}

/* 特徴 */
.concept__wrap,
.features,
.quality,
.about,
footer {
    text-align: center;
}

.features {
    position: relative;
    margin-bottom: 50px;
}

.features::before {
    content: "";
    position: absolute;
    top: -310px;
    right: 0;
    background-image: url(../images/leaf02.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 277px;
    height: 410px;
    z-index: -1;
}

@media (max-width: 750px) {
    .features::before {
        background-image: url(../images/leaf02_sp.png);
        width: 145px;
        height: 219px;
        top: -154px;
    }
}

.features h2 {
    margin-bottom: 35px;
}

/* 特徴 */
/* 質 */
.quality {
    background-color: #f2f2f3;
    padding: 103px 0 172px;
    margin-bottom: 260px;
}

.quality h2 {
    margin-bottom: 48px;
}

@media (max-width: 750px) {
    .quality {
        padding: 54px 0 80px;
        margin-bottom: 65px;
    }
}

/* 質 */
/* 医師紹介 */
.doctor {
    padding-bottom: 296px;
}

.doctor h2 {
    margin-bottom: 72px;
}

@media (max-width: 750px) {
    .doctor .w1366 {
        width: 100%;
    }

    .doctor {
        padding-bottom: 112px;
    }

    .doctor h2 {
        width: 90%;
        margin: 0 auto 30px;
    }
}

/* 医師紹介 */

/* 情報 */
.about {
    background-color: #7cb9df;
    padding: 172px 0 140px;
    margin-bottom: 108px;
}

@media (max-width: 750px) {
    .about {
        padding: 54px 0 80px;
        margin-bottom: 32px;
    }
}

/* 情報 */
/* footer */
footer a.box {
    margin-bottom: 20px;
}

footer .tel {
    margin-bottom: 340px;
}

.banner {
    margin-bottom: 257px;
}

footer small {
    max-width: 180px;
    margin: auto auto 20px;
    width: 100%;
    display: block;
}

@media (max-width: 750px) {
    .banner {
        margin-bottom: 62px;
    }
}

/* footer */
@media (max-width: 1024px) {

    .btn,
    .closebtn,
    .tel {
        display: block;
    }

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

    /* ハンバーガーメニュー */
    button {
        margin: 0;
        padding: 0;
        outline: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        vertical-align: middle;
        text-align: inherit;
        font: inherit;
        -webkit-appearance: none;
        appearance: none;
    }

    .btn {
        /* ボタンの配置位置  */
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 10;
        width: 30px;
        height: 27px;
    }

    /***** 真ん中のバーガー線 *****/
    .btn-line {
        display: block;
        /* バーガー線の位置基準として設定 */
        position: relative;
        /* 線の長さと高さ */
        width: 100%;
        height: 3px;
        /* バーガー線の色 */
        background-color: #231815;
        transition: .2s;
    }

    /***** 上下のバーガー線 *****/
    .btn-line::before,
    .btn-line::after {
        content: "";
        /* 基準線と同じ大きさと色 */
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #231815;
        transition: .5s;
    }

    .btn-line::before {
        /* 上の線の位置 */
        transform: translateY(-10px);
    }

    .btn-line::after {
        /* 下の線の位置 */
        transform: translateY(10px);
    }

    /***** メニューオープン時 *****/
    .closebtn {
        position: absolute;
        right: 15px;
        top: 15px;
        cursor: pointer;
        width: 49px;
        height: auto;
        /*mix-blend-mode: multiply;*/
        z-index: 4;
    }

    .multiply {
        position: absolute;
        right: 0;
        top: 0;
        mix-blend-mode: multiply;
        cursor: pointer;
        width: 49px;
        height: 49px;
        z-index: 5;
        background: #7cb9df;
        /* 追記 */
    }


    /* .btn-line.open {
         真ん中の線を透明に 
        background-color: transparent;
    }

    .btn-line.open::before,
    .btn-line.open::after {
        content: "";
        background-color: #333;
        transition: .2s;
    }*/
    /* .btn-line.open::before {
       上の線を傾ける 
      transform: rotate(45deg);
  }*/
    /* .btn-line.open::after {
       上の線を傾ける 
      transform: rotate(-45deg);
  }*/
    /**************** 以下、メニューのスタイリング ****************/
    .nav__list {
        display: flex;
        flex-direction: column;
        position: fixed;
        right: -100%;
        bottom: 0;
        width: 100%;
        background-color: #7cb9df;
        color: #efefef;
        transition: .3s;
        z-index: 99;
    }

    .list__item {
        /* メニューテキスト位置をリスト内中心に */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    /***** メニューオープン時位置0にして画面内に *****/
    .nav__list.open {
        /*position: absolute;*/
        right: 0;
        bottom: 0;
    }

    footer .tel {
        margin-bottom: 114px;
    }


}

/* ハンバーガーメニュー */
@media (max-width: 750px) {
    .w1366 {
        max-width: 668px;
        width: 90%;
    }

    footer .tel {
        margin-bottom: 95px;
    }
}