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

/****************************************************************************
tabボタン
****************************************************************************/
.tab-wrapper > .inner {
    width: 77.34vw;
    max-width: none;
}

/*tabの形状*/
.tab {
	/* display: flex;
	flex-wrap: wrap; */
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 24px;
    position: relative;
}

.tab:after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #009844;
    z-index: 1;
}

.tab.active:after {
    border-bottom: none;
}

.tab li {
    margin: 0;
    padding: 39px 119.5px 28px 63px;
    background: transparent;
    display: inline-block;
    position: relative;
    z-index: 0;
    line-height: 1;
}

.tab li a {
    font-size: 18px;
    position: relative;
    display: block;
    line-height: 1.1;
}

.tab li a::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/clinic/btn-tab-open.svg);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: -44px;
    transform: translateY(-50%);
    -webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}

.tab li a:hover::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/clinic/btn-tab-open-hover.svg);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: -44px;
    transform: translateY(-50%);
    opacity: 1;
}

.tab li.active a::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url(../images/clinic/btn-tab-close.svg);
    background-size: contain;
    vertical-align: middle;
    position: absolute;
    top: 50%;
    right: -44px;
    transform: translateY(-50%);
    opacity: 1;
}

.tab li:before,
.tab li:after {
    position: absolute;
    bottom: -1px;
    width: 6px;
    height: 6px;
    content: '';
}


.tab li.active {
    border: 1px solid #009844;
    background: #FFF;
    z-index: 2;
    border-bottom-color: #FFF;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    line-height: 1;
}

.tab li.active a {
    background: -webkit-linear-gradient(left, #009844, rgba(0,158,184,0.95));
    background: linear-gradient(to right, #009844, rgba(0,158,184,0.95));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.tab li:nth-child(1) {
    margin-left: 0;
    padding-left: 0;
}

.tab li:nth-child(1).active {
    border-left: none;
    margin-left: 0;
    border-top-left-radius: 0;
}

.tab li:nth-child(1).active:before {
    content: none;
}

.tab li.active:before {
    left: -7px;
    border-bottom-right-radius: 6px;
    border-width: 0 1px 1px 0;
    box-shadow: 2px 2px 0 #FFF;
    border: 1px solid #009844;
    border-top: none;
    border-left: none;
}

.tab li.active:after {
    right: -7px;
    border-bottom-left-radius: 6px;
    border-width: 0 0 1px 1px;
    box-shadow: -2px 2px 0 #FFF;
    border: 1px solid #009844;
    /* border-bottom: 1px solid #FFF; */
    border-top: none;
    border-right: none;
}


/*エリアの表示非表示と形状*/
.tab-content__wrap {
	display: none;/*はじめは非表示*/
	opacity: 0;/*透過0*/
	background: #fff;
	padding:0;
}

/*tab-content__wrapにis-activeというクラスがついた時の形状*/
.tab-content__wrap.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}







/*tabの形状*/
.tab-head {
	/* display: flex;
	flex-wrap: wrap; */
    text-align: left;
    list-style: none;
    margin: 0;
    padding: 0;
    line-height: 24px;
    position: relative;
}

.tab-head:after {
    content: none;
}

.tab-head.active:after {
    border-bottom: none;
}

.tab-head li {
    margin: 0;
    padding: 0;
    background: transparent;
    display: inline-block;
    position: relative;
    z-index: 0;
    line-height: 1;
}

.tab-head li a {
    font-size: 18px;
    position: relative;
    display: block;
    line-height: 1.1;
}

.tab-head li a::after {
    content: none;
}

.tab-head li a:hover::after {
    content: none;
}

.tab-head li.active a::after {
    content: none;
}

.tab-head li:before,
.tab-head li:after {
    content: none;
}


.tab-head li.active {
    content: none;
}

.tab-head li.active a {
    background: transparent

}

.tab-head li:nth-child(1) {
    margin-left: 0;
    padding-left: 0;
}

.tab-head li:nth-child(1).active {
    content: none;
}

.tab-head li:nth-child(1).active:before {
    content: none;
}

.tab-head li.active:before {
    content: none;
}

.tab-head li.active:after {
    content: none;
}








/****************************************************************************
tab-content共通項目
****************************************************************************/
.tab-content__wrap section {
    width: 100%;
    margin-left: 0;
}

.tab-content__wrap .inner--right,
.tab-content__wrap .inner {
    margin-left: 0;
    left: 0;
}

.loop_wrap {
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    margin-left: -22.76vw;/* インナーのずれの分を解消 */
}


/****************************************************************************
tab-content01
****************************************************************************/
#tab-content01 .loop_wrap {
    height: 58.8rem;
}

#tab-content01 .text-wrap {
    align-items: flex-start;
}

#tab-content01 .text-box {
    width: 30.83vw;
    max-width: 592px;
}

#tab-content01 .text-title {
    line-height: 2;
}

#tab-content01 .img-box {
    width: 38.44vw;
    max-width: 738px;
}

#tab-content01 .concept > .inner {
    width: 77.34vw;
    max-width: none;
}

#tab-content01 .concept .illustration {
    width: 15.78vw;
    max-width: 303px;
    position: absolute;
    top: -12.29vw;
    left: 20.78vw;
}

#tab-content01 .concept .text-wrap {
    width: 100%;
}

#tab-content01 .concept .img-box img:nth-child(1) {
    display: block;
}

#tab-content01 .concept .img-box img:nth-child(2) {
    display: none;
}

.logo-section .logo-box {
    width: auto;
    background-color: #e5f4ec;
    padding-left: 10.42vw;
    align-items: center;
}

.logo-section .logo-box .logo__img-box {
    width: 9.48vw;
    max-width: 180px;
}

.logo-section .logo-box .logo__text-box {
    width: 32.29vw;
    max-width: 600px;
    margin-left: 7.24vw;
}


/****************************************************************************
tab-content02
****************************************************************************/
.treatment-list {
    width: 100%;
    border-top: solid 1px #b3b3b4;
    border-left: solid 1px #b3b3b4;
    box-sizing: border-box;
}

.treatment-list .treatment-list__item {
    width: calc( 100% / 3 );
    border-right: solid 1px #b3b3b4;
    border-bottom: solid 1px #b3b3b4;
    box-sizing: border-box;
    padding: 0 0 2.08vw 0;
    margin: 0;
}

.treatment-list .treatment-list__item.item--large {
    width: calc( ( 100% / 3) * 2 );
}

.treatment-list .treatment-list__item .treatment-list__img {
    width: 100%;
}

.treatment-list .treatment-list__item .treatment-list__content-box{
    padding: 0 2.08vw;
}

.hospital .swiper-container {
    width: 100%;
    box-sizing: content-box;
    margin-right: 0;
    height: auto;
    overflow: hidden;
    padding: 0 0 8.33vw 0;
    position: relative;
}

.hospital .swiper-slide {
    width: 100%;
    height: auto;
    max-width: none;
    text-align: left;
    border: none;
}

.hospital .layer-large .layer-large__text .layer-large__title {
    line-height: 1;
    margin-top: 0;
    margin-bottom: 0;
}

.hospital .circle__item:nth-child(1) {
    width: 9.01vw;
    max-width: 173px;
    position: absolute;
    top: -9.17vw;
    right: -10.1vw;
    z-index: 1;
}

.hospital .circle__item:nth-child(2) {
    width: 13.07vw;
    max-width: 251px;
    position: absolute;
    top: -2.55vw;
    right: -8.65vw;
    z-index: 2;
}

.hospital .circle__item:nth-child(3) {
    width: 6.3vw;
    max-width: 121px;
    position: absolute;
    top: 7.86vw;
    right: -15.16vw;
}


.treatment .circle__item:nth-child(1) {
    width: 7.24vw;
    max-width: 139px;
    position: absolute;
    top: 3.33vw;
    right: 23.91vw;
}

.treatment .circle__item:nth-child(2) {
    width: 9.84vw;
    max-width: 189px;
    position: absolute;
    top: -4.9vw;
    right: 13.54vw;
}

.treatment .circle__item:nth-child(3) {
    width: 6.2vw;
    max-width: 119px;
    position: absolute;
    top: 1.04vw;
    right: 3.54vw;
}


/****************************************************************************
tab-content03
****************************************************************************/
#tab-content03 .index-list {
    width: 48.39vw;
    column-gap: 12.08vw;
}

#tab-content03 .index-list .index-list__item {
    min-width: 7.81vw;
    width: auto;
}

#tab-content03 .doctor-list__content-box {
    padding-left: 5.73vw;
    position: relative;
}

#tab-content03 .doctor-list__content-box::before {
    content: '';
    display: inline-block;
    background-image: url(../images/clinic/doctor-border-green.png);
    background-size: contain;
    vertical-align: middle;
    font-size: 1rem;
    width: 0.625em;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#tab-content03 .doctor-list__item:nth-child(even) .doctor-list__content-box::before {
    background-image: url(../images/clinic/doctor-border-blue.png);
}

.doctor .circle__item:nth-child(1) {
    width: 12.66vw;
    max-width: 243px;
    position: absolute;
    top: -5.73vw;
    right: -10.68vw;
}

.doctor .circle__item:nth-child(2) {
    width: 10.47vw;
    max-width: 201px;
    position: absolute;
    top: 8.39vw;
    right: -19.74vw;
}

.doctor .circle__item:nth-child(3) {
    width: 6.2vw;
    max-width: 119px;
    position: absolute;
    bottom: 10vw;
    left: -18.33vw;
}

.doctor .circle__item:nth-child(4) {
    width: 7.24vw;
    max-width: 139px;
    position: absolute;
    bottom: 0.68vw;
    left: -13.96vw;
}











.subtitle-box {
    position: relative;
}

.subtitle-box::before {
    content: '';
    font-size: 1rem;
    width: 2em;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    background: #766bbe;
}

.subtitle-box .subtitle--eng {
    letter-spacing: normal;
}

.service-wrap {
    position: relative;
}

.recommend-list {
    width: 59.01vw;
    max-width: 1133px;
}

.recommend-list__item {
    width: 18.8vw;
    max-width: 361px;
}

.recommend-list__item {
    width: 18.8vw;
    max-width: 361px;
}

.recommend-list__item:first-child {
    margin-top: 1.46vw;
    margin-right: 1.41vw;
}

.recommend-list__item:nth-child(2) {
    margin-top: 4.43vw;
}

.recommend-list__item:last-child {
    margin-left: auto;
    margin-right: 0;
}


.info-list .info-list__item {
    border-bottom: solid 1px #bfbdf7;
}

.info-list__item-label,
.info-list__item-detail {
    margin: 0;
}

.info-list__item-label {
    width: 16.67vw;
    max-width: 320px;
    position: relative;
}

.info-list__item-label::before {
    content: '';
    width: 1.67vw;
    max-width: 32px;
    height: 1px;
    background: #766bbe;
    position: absolute;
    bottom: -1px;
}


.layer-small__wrap .layer-small .layer-small__title {
    line-height: 1.5;
}

.layer-small .layer-small__text .layer-small__title {
    padding-top: 11.41%;
}

.symptoms-list {
    width: 59.01vw;
    row-gap: 1.25vw;
}

.symptoms-list .symptoms-list__item {
    width: 13.75vw;
}



/****************************************************************************
page-top
****************************************************************************/
.page-top .btn-box {
    width: 100%;
    /* background: -moz-linear-gradient(left, #FFF, #FFC778 30%, #F89174 60%, #748af8);
    background: -webkit-linear-gradient(left, #FFF, #FFC778 30%, #F89174 60%, #748af8); */
    background: linear-gradient(-37deg, rgba(0,152,68,0.7), rgba(0,152,68,0.7) 35%, rgba(0,152,175,0.6) 65%, rgba(0,152,177,0.7));
    padding-left: 2.5vw;
}

.page-top .btn-box .btn-list {
    width: 69.58vw;
    max-width: 1336px;
}

.page-top .btn-box .btn-list a {
    width: 32.11%;
}


.page-top .btn-box .btn-list a .btn-list__text-box {
    width: 100%;
    height: 10vw;
    margin-top: -1px;
    background-color: #FFF;
    padding-left: 1.04vw;
    display:flex;
    flex-flow: column;
    justify-content:space-between;
    box-sizing: border-box;
}

.btn-list__text--sub {
    display: block;
    font-size: 1rem;
}

.page-top .btn-box .btn-list a .btn-list__text-box .arrow {
    width: 2.14vw;
}

.page-top .btn-box .btn-list a .btn-list__text-box .arrow-text {
    font-size: 1rem;
    line-height: 1;
}

.btn--child {
    position: relative;
	margin: 0;
    bottom: auto;
    left: auto;
    transform: translateX(0);
}


/****************************************************************************
rehabili
****************************************************************************/
.layer-small__box {
    position: relative;
    margin-top: -5.31%;
}

.rehabili .illustration {
    width: 12.71vw;
    max-width: 244px;
    position: absolute;
    bottom: 1.3vw;
    left: 7.6vw;
}

.rehabili .layer-small:nth-child(2) {
    margin-top: -16.41vw;
}

.rehabili .layer-small:nth-child(3) {
    margin-top: -7.76vw;
}

.rehabili .circle__item:nth-child(1) {
    width: 17.66vw;
    max-width: 339px;
    position: absolute;
    top: -21.04vw;
    left: -27.03vw;
}

.rehabili .circle__item:nth-child(2) {
    width: 7.34vw;
    max-width: 141px;
    position: absolute;
    top: -3.33vw;
    left: -14.95vw;
}


/****************************************************************************
workshop
****************************************************************************/
.workshop .subtitle-box::before {
    background: #dc5c7f;
}

.workshop .reccomend-wrap {
    margin-top: -1.15vw;
}

.workshop .symptoms-wrap .subtitle-box::before {
    content: none;
}

.workshop .info-list .info-list__item {
    border-bottom: solid 1px #ffd7e8;
}

.workshop .info-list__item-label::before {
    background: #dc5c7f;
}

.workshop .illustration {
    width: 17.55vw;
    max-width: 337px;
    position: absolute;
    bottom: 2.6vw;
    left: 4.27vw;
}


.workshop .layer-small:nth-child(2) {
    margin-top: -19.32vw;
}

.workshop .layer-small:nth-child(3) {
    margin-top: -6.09vw;
}

.workshop .circle__item:nth-child(1) {
    width: 18.7vw;
    max-width: 359px;
    position: absolute;
    top: -14.43vw;
    left: -26.56vw;
}

.workshop .circle__item:nth-child(2) {
    width: 7.34vw;
    max-width: 141px;
    position: absolute;
    top: 36.25vw;
    left: -10.73vw;
}


/****************************************************************************
stretch
****************************************************************************/
.stretch .recommend-list__item:nth-child(1) {
    margin: 0 0 0 13.33vw;
}

.stretch .recommend-list__item:nth-child(2) {
    margin: 1.3vw 0 0 auto;
}

.stretch .recommend-list__item:nth-child(3) {
    margin: -3.33vw auto 0 0;
}

.stretch .recommend-list__item:nth-child(4) {
    margin: -3.33vw 13.59vw 0 0;
}

.stretch .layer-small__box {
    position: relative;
    margin-top: -9.31%;
}

.stretch .reccomend-wrap {
    margin-top: -1.3vw;
}

.stretch .symptoms-list::before{
    content:"";
    display: block;
    width:13.75vw;
    order:1;
}

.stretch .symptoms-list::after{
    content:"";
    display: block;
    width:13.75vw;
}

.stretch .subtitle-box::before {
    background: #ffa63b;
}

.stretch .info-list .info-list__item {
    border-bottom: solid 1px #ffc66f;
}

.stretch .info-list__item-label::before {
    background: #ffa63b;
}

.stretch .btn-reversal {
    width: 30.16vw;
    max-width: 579px;
}

.stretch .btn-reversal a::before {
    content: "";
    display: block;
    padding-top: 26.42%;
}

.stretch .illustration {
    width: 12.6vw;
    max-width: 242px;
    position: absolute;
    bottom: 4.64vw;
    left: 8.18vw;
}

.stretch .layer-small:nth-child(2) {
    margin-top: -17.92vw;
}

.stretch .layer-small:nth-child(3) {
    margin-top: -6.88vw;
}

.stretch .circle__item:nth-child(1) {
    width: 18.18vw;
    max-width: 349px;
    position: absolute;
    top: -27.5vw;
    left: -24.17vw;
}

.stretch .circle__item:nth-child(2) {
    width: 7.34vw;
    max-width: 141px;
    position: absolute;
    top: 52.6vw;
    left: -6.51vw;
}



@media screen and (min-width: 1921px) {

}


/****************************************************************************
PC中
****************************************************************************/
@media screen and (max-width: 1600px) {

}



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

}


/****************************************************************************
PC中
****************************************************************************/
@media screen and (max-width: 1350px) {

}


/****************************************************************************
タブレット
****************************************************************************/
@media screen and (max-width: 1024px) {
    .tab-wrapper > .inner {
        width: auto;
        max-width: none;
        padding: 0 0 0 50px;
    }

    .tab li a {
        font-size: 14px;
    }

    .tab li {
        margin: 0;
        margin-left: 0px;
        padding: 28px 70px 19px 40px;
    }

    .tab li.active a::after ,
    .tab li a::after,
    .tab li a:hover::after {
        right: -36px;
    }

    .tab-wrapper .page-top > .inner {
        padding: 0;
    }

    .tab-content__wrap .inner--right,
    .tab-content__wrap .inner {
        padding-left: 0;
        padding-right: 50px;
    }

    #tab-content01 .text-box {
        width: 70%;
        max-width: 592px;
    }

    #tab-content01 .img-box {
        width: 47%;
        max-width: 738px;
        position: absolute;
        top: -29%;
        right: 0;
    }

    #tab-content01 .text-box {
        width: 100%;
        max-width: none;
    }

    #tab-content01 .concept > .inner {
        width: auto;
    }

    .treatment-list .treatment-list__item.item--large {
        width: 100%;
    }

    .treatment-list .treatment-list__item {
        width: calc( 100% / 2 );
    }

    .treatment-list .treatment-list__item:last-child {
        width: 100%;
    }

    .loop_wrap {
        margin-left: 0;
    }

    .logo-section .logo-box {
        padding: 50px;
    }

    .logo-section .logo-box .logo__text-box {
        width: calc( (100% - 9.48vw ) - 50px);
        margin-left: 50px;
    }

    #tab-content01 .loop_wrap {
        height: 28.8rem;
        margin-left: -50px;
    }

    /* tab-content01 */
    #tab-content01 .outline .img-box {
        top: -17%;
        right: 0;
    }

    #tab-content01 .concept .illustration {
        top: -19%;
        left: 34%;
    }
    
    #tab-content01 .concept .img-box img:nth-child(1) {
        display: none;
    }
    
    #tab-content01 .concept .img-box img:nth-child(2) {
        display: block;
    }

    #tab-content01 .concept .img-box {
        top: 3%;
        right: -50px;
    }

    /* #info .schedule__list .list__item {
        line-height: 3em;
    } */


    /* tab-content02 */
    .hospital .layer-large {
        margin-bottom: 100px;
    }


    /* tab-content03 */
    #tab-content03 .index-list {
        width: auto;
    }
    
    #tab-content03 .doctor-list__content-box::before {
        background-size: auto;
    }

    #tab-content03 .loop_wrap {
        margin-left: -50px;
    }
}


/****************************************************************************
SP
****************************************************************************/
@media screen and (max-width: 599px) {
    .tab-wrapper > .inner {
        padding: 0 0 0 20px;
    }

    .tab-content__wrap .inner--right,
    .tab-content__wrap .inner {
        padding-left: 0;
        padding-right: 20px;
    }

    .tab li {
        padding: 10px 20px 8px 10px;
    }

    .tab li a {
        font-size: 11px;
        letter-spacing: 0.2em;
    }

    .tab li.active a::after,
    .tab li a::after {
        width: 13px;
        height: 13px;
        right: -14px;
    }

    .tab-content__wrap section {
        margin-top: 9.87vw!important;
        margin-bottom: 19.2vw!important;
    }

    #tab-content01 .outline .img-box {
        position: relative;
        top: auto;
        right: auto;
        width: 80%;
        margin-left: auto;
        margin-right: 0;
    }

    #tab-content01 .concept .img-box {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        margin-left: auto;
        margin-right: 0;
        margin-top: 12.8vw;
    }

    .logo-section .logo-box {
        padding: 30px 20px;
        display: block;
    }

    .logo-section .logo-box .logo__text-box {
        width: auto;
        margin-left: 0;
    }

    .logo-section .logo-box .logo__img-box {
        width: 9.48vw;
        max-width: 180px;
        position: absolute;
        left: 40%;
        top: auto;
        transform: translateY(-40%);
    }

    .logo-section .logo-box .logo-__text-title {
        padding-bottom: 6.4vw;
    }

    #tab-content01 .loop_wrap {
        margin-left: -20px;
        height: 19.8rem;
    }

    #tab-content01 .concept .illustration {
        top: -5%;
        left: auto;
        right: 20px;
        width: 30%;
    }

    .treatment-list { 
        display: block;
    }

    .treatment-list .treatment-list__item {
        width: auto;
    }

    .hospital .layer-large {
        margin-bottom: 48vw;
    }

    .hospital .layer-large .layer-large__title {
        padding-bottom: 20px!important;
    }

    .treatment-list .treatment-list__item .treatment-list__content-box {
        padding: 0 20px;
    }

    .treatment-list .treatment-list__item {
        padding-bottom: 20px;
    }

    #tab-content03 .doctor-list__content-box::before {
        background-size: cover;
        width: 6px;
    }

    #tab-content03 .loop_wrap {
        margin-left: -20px;
    }

    .hospital .circle__item:nth-child(2) {
        width: 13.07vw;
        top: -2.55vw;
        right: 11.35vw;
        z-index: 2;
    }

    .hospital .circle__item:nth-child(3) {
        width: 7.3vw;
        max-width: 121px;
        position: absolute;
        top: 7.86vw;
        right: 2.84vw;
    }

    .treatment .circle__item:nth-child(1) {
        width: 7.24vw;
        max-width: 139px;
        position: absolute;
        top: 3.33vw;
        right: 16.91vw;
    }

    .doctor .circle__item:nth-child(1) {
        width: 12.66vw;
        max-width: 243px;
        position: absolute;
        top: -5.73vw;
        right: 13.32vw;
      }
      
      .doctor .circle__item:nth-child(2) {
        width: 10.47vw;
        max-width: 201px;
        position: absolute;
        top: 8.39vw;
        right: -2.74vw;
      }

      .info .map-btn {
        position: relative;
        transform: translateY(0);
      }

      .info .map-btn {
        margin-bottom: 3.73vw;
      }

      .info .map-btn .map-btn__text {
        display: inline-block;
        position: relative;
        padding-right: 13.6vw;
      }

      .info .map-btn .map-btn__text a {
        font-size: 0.85rem;
      }

      .info .map-btn__text::after {
        width: 3.583em;
        height: 0.3em;
        right: 0;
        top: 32%;
      }

      .info .location__wrap .explanation__list {
        margin-bottom: 7.2vw;
      }

      .info .map {
        margin: 0 calc(50% - 50vw);
        width: 100vw;
        z-index: 2;
      }
}