@charset "UTF-8";
/* CSS Document */


.lay-nav {
    display: none;
}

.header .header-left {
    padding-left: 2%;
    padding-top: 25px;
    transition: .5s;
}

.header .header-left img {
    height: 90px;
    width: auto;
    transition: .5s;
}

.hidden .header .header-left {
    padding-top: 50px;
}

.hidden .header .header-left img {
    height: 9.5vw;
}

/* contents-top */

.contents-top {
    width: 100%;
    padding-top: 50px;
}

.contents-top img {
    width: 100%;
    height: auto;
}

.contents-top-wrap {
    position: relative;
}

.contents-top-wrap::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url("top/images/back01.png");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 100%;
    height: 100%;
    margin-top: -100px;
    z-index: -1;
}

.contents-top-wrap section:not(:last-child) {
    margin-bottom: 120px;
}


/* main-img-top */

.main-img-top {
    position: relative;
    margin-left: 5%;
    width: 95%;
}

.main-img-top::before {
    content: "";
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-image: url("common/images/text-copy.svg");
    background-position: left bottom;
    background-repeat: no-repeat;
    background-size: auto 100%;
    width: 30px;
    height: 400px;
    margin-left: -3.5%;
}

.main-img-top .main-slider {
    clip-path: url(#clip-frame);
}

.main-img-top .box-text-top {
    position: absolute;
    left: 0px;
    bottom: 60px;
    width: 100%;
    padding-left: 5%;
}

.main-img-top .box-text-top h2 img {
    width: 38%;
    height: auto;
}

.main-img-top .box-text-top h3 {
    padding-top: 40px;
}

.main-img-top .box-text-top h3 img {
    width: 45%;
    height: auto;
}

.main-img-top .box-text-top p {
    font-size: 1.7vw;
    padding-top: 2vw;
    font-family: var(--title-font);
    line-height: 2;
}

@media screen and (max-width: 1280px) {
    .main-img-top .box-text-top p {
        font-size: 22px;
    }
}


.layout02 h4,
.layout02 h6,
.layout03 .box-title h3,
.layout03 .box-detail h6,
.layout04 h5,
.layout04 h6,
.layout04 p::before,
.layout05 h6 {
    font-family: var(--title-font);
    font-weight: var(--base-weight);
}

.layout01 h4,
.layout03 .box-detail h5,
.layout01 p,
.layout03 p {
    font-family: var(--title-font2);
    font-weight: var(--base-weight);
}

.layout03 .box-title h4 {
    font-family: var(--subtitle-font);
    font-weight: var(--base-weight);
}


.contents02 .box-img {
    position: relative;
    overflow: hidden;
}

.contents02 .box-img img {
    width: 100%;
    height: auto;
    transition: .5s all;
    z-index: -1;
}

.contents02 .box:hover .box-img img {
    transform: scale(1.2, 1.2);
    transition: .5s all;
    z-index: -1;
}



/* contents-tour */

.contents-tour {
    padding-top: 120px;
    text-align: center;
}

.contents-tour .box-detail {
    background-color: #FFF;
    border-radius: 25px;
    border-style: solid;
    border-color: var(--color-sub2);
    border-width: 2px;
    overflow: hidden;
}

.contents-tour .box-detail .lay01 {
    padding: 60px 10% 50px;
}

.contents-tour .box-detail h5 {
    font-family: var(--title-font2);
    font-weight: var(--base-weight);
    font-size: 28px;
    color: #FFF;
    line-height: 1.2;
    letter-spacing: 0.2em;
    display: inline-block;
    min-width: 450px;
    border-radius: 0px 0px 10px 10px;
    padding: 18px 0px;
    background-color: var(--color-sub2);
}

.contents-tour .box-detail h6 a {
    font-family: var(--title-font2);
    font-weight: var(--base-weight);
    color: #FFF;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 0.25em;
    background-color: var(--color-sub2);
    padding: 15px 80px;
    border-radius: 60px;
    display: inline-block;
}

.contents-tour .box-detail p {
    font-family: var(--title-font2);
    font-weight: 200;
    color: #000;
    font-size: 26px;
    line-height: 1.6;
    letter-spacing: 0.1em;
    padding: 50px 0px 40px;
}



/* contents01 */

.contents01 {
    width: 100%;
    /*    padding-top: 150px;*/
}

/* contents02 */

.contents02 {
    width: 100%;
    text-align: center;
}

.contents02 .midashi-box,
.contents03 .midashi-box {
    margin-bottom: 30px;
}


/* layout01 */

.layout01 {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    gap: 0px 8%;
}

.layout01 .box-img {
    width: 50%;
}

.layout01 .box-img .box {
    border-radius: 0px 45px 45px 0px;
    overflow: hidden;
}

.layout01 .box-img .box:not(:last-child) {
    margin-bottom: 30px;
}

.layout01 .box-detail {
    padding-top: 40px;
}

.layout01 h4 {
    color: var(--color-main);
    font-size: 30px;
    line-height: 1.8;
    letter-spacing: 0.2em;
    padding-top: 60px;
    margin-bottom: 40px;
    position: relative;
}

.layout01 h4::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    background-image: url("top/images/text02.svg");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 100%;
    width: 100%;
    height: 28px;
}

.layout01 p {
    line-height: 2.2;
}


/* layout02 */

.layout02 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 120px;
}

.layout02 a:hover {
    opacity: 1;
}

.layout02 .box {
    width: 47%;
}

.layout02 .box-img {
    border-radius: 50%;
}

.layout02 .box-text {
    padding-top: 30px;
}

.layout02 h4,
.layout02 h6 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 0.2em;
}

.layout02 h4 {
    margin-bottom: 18px;
}

.layout02 h6 {
    font-size: 24px;
    line-height: 1.2;
    display: inline-block;
    width: 220px;
    border-style: solid;
    border-color: #000000;
    border-width: 1px;
    padding: 6px 0px;
    padding-right: 20px;
    border-radius: 8px;
    position: relative;
    transition: .5s;
}

.layout02 a:hover h6 {
    background-color: #f2f2f2;
}

.layout02 h6::before {
    content: "";
    position: absolute;
    right: 30px;
    top: 0px;
    background-image: url("common/images/link-arrow01.svg");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: auto 14px;
    width: 33px;
    height: 100%;
}


/* layout03 */

.layout03 {
    width: 100%;
    position: relative;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

#treatment01 {
    margin-bottom: 150px;
    background-image: url("top/images/back02.jpg");
}

#treatment02 {
    background-image: url("top/images/back03.jpg");
}

.layout03 .box-title {
    margin-bottom: 50px;
}

.layout03 .box-text {
    margin-bottom: 70px;
}

.layout03 .box-detail {
    background-color: #FFF;
    border-radius: 25px;
    border-style: solid;
    border-width: 2px;
    overflow: hidden;
}

#treatment01 .box-detail {
    border-color: var(--color-main);
}

#treatment02 .box-detail {
    border-color: var(--color-sub5);
}

.layout03 .box-detail .lay01 {
    padding: 40px 10% 50px;
}

.layout03 .box-detail .lay02,
.layout03 .box-detail .lay03 {
    padding: 40px 10%;
}

#treatment01 .box-detail .lay02 {
    background-color: var(--color-back1);
}

#treatment01 .box-detail .lay03 {
    background-color: var(--color-back2);
}

#treatment02 .box-detail .lay02 {
    background-color: var(--color-back3);
}

#treatment02 .box-detail .lay03 {
    background-color: var(--color-back4);
}

.layout03 .box-title h3 {
    font-size: 40px;
    line-height: 1.4;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}

.layout03 .box-title h4 {
    color: #FFF;
    font-size: 18px;
    line-height: 0.9;
    letter-spacing: 0.2em;
    display: inline-block;
    padding: 12px 50px 6px;
    border-radius: 60px;
}

#treatment01 .box-title h3 {
    color: var(--color-sub);
}

#treatment01 .box-title h4 {
    background-color: var(--color-sub2);
}

#treatment02 .box-title h3 {
    color: var(--color-sub3);
}

#treatment02 .box-title h4 {
    background-color: var(--color-sub4);
}

.layout03 .box-text p {
    line-height: 2.4;
    letter-spacing: 0.15em;
}

.layout03 .box-detail h5 {
    font-size: 28px;
    color: #FFF;
    line-height: 1.2;
    letter-spacing: 0.2em;
    display: inline-block;
    min-width: 450px;
    border-radius: 0px 0px 10px 10px;
    padding: 18px 0px;
}

#treatment01 .box-detail h5 {
    background-color: var(--color-main);
}

#treatment02 .box-detail h5 {
    background-color: var(--color-sub5);
}

.layout03 .box-detail p {
    text-align: left;
    letter-spacing: 0.1em;
}

.layout03 .box-detail .lay02 p,
.layout03 .box-detail .lay03 p {
    font-size: 19px;
}

.layout03 .box-detail .lay01 h6 {
    font-size: 29px;
    line-height: 1.8;
    letter-spacing: 0.3em;
    margin-bottom: 30px;
}

.layout03 .box-detail .lay02 h6,
.layout03 .box-detail .lay03 h6 {
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: 0.3em;
    background-color: #FFF;
    border-radius: 60px;
    min-width: 400px;
    display: inline-block;
    margin-bottom: 20px;
    padding: 7px 0px;
}

/* 確実版：項目の途中改行を禁止 */
.layout03 .box-detail .terms span {
    white-space: nowrap;
}

.layout03 .box-detail .terms i {
    font-style: normal;
}


#treatment01 .box-detail .lay02 h6 {
    color: var(--color-main);
}

#treatment01 .box-detail .lay03 h6 {
    color: #999999;
}


/* layout04 */

.layout04 {
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 60px;
}

.layout04 .box-img {
    width: 52%;
}

.layout04 .box-img img {
    border-radius: 50%;
}

.layout04 .box-detail {
    width: 40%;
    text-align: center;
}

.layout04 h5 {
    font-size: 75px;
    color: var(--color-sub6);
    line-height: 1.1;
    letter-spacing: 0.2em;
    font-weight: 300;
}

.layout04 h6 {
    font-size: 35px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    margin: 25px 0px 40px;
}

.layout04 h6::before {
    content: "院長";
    font-size: 26px;
    display: inline-block;
    margin-right: 20px;
}

.layout04 p {
    line-height: 2.2;
    text-align: left;
    display: inline-block;
    position: relative;
    padding-top: 70px;
}

.layout04 p::before {
    content: "経 歴";
    position: absolute;
    left: 0px;
    top: 0px;
    display: inline-block;
    border-radius: 60px;
    width: 110%;
    margin-left: -5%;
    background-color: var(--color-sub6);
    text-align: center;
    font-size: 26px;
    color: #FFF;
    line-height: 1.2;
    letter-spacing: 0.2em;
    padding: 8px 0px;
}


/* layout05 */

.layout05 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    border-style: solid;
    border-color: var(--color-sub6);
    border-width: 2px;
    border-radius: 25px;
    padding: 20px 0px;
    text-align: center;
}

.layout05 .box {
    width: 50%;
    padding: 15px 0px;
}

.layout05 .box:not(:last-child) {
    border-right-style: solid;
    border-color: rgba(0, 0, 0, 0.5);
    border-width: 1px;
}

.layout05 h6 {
    color: var(--color-sub6);
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
}

.layout05 p {
    display: inline-block;
    text-align: left;
}


/* layout06 */

.layout06 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0px 5%;
}

.contents-top .layout06 .box {
    width: 30%;
}


.sp-view {
    display: none;
}