@charset "UTF-8";


/* ========================================================
  
  Layout

======================================================== */

/*---------------------------------------------------------
 Info
---------------------------------------------------------*/
.info {
    &:nth-of-type(even) {
        > .c-bg-color {
            background-color: #FFF;
        }
    }

    .c-bg-img {
        opacity: 0.4;
    }
}

.info_inner {
	position: relative;
}

.info {
    .c-txt--clinic {
        position: relative;
        text-align: center;
        font-size: min(3vw,205%);
        > span {
            font-size: 165%;
            >small {
                font-size: 68%;
                letter-spacing: .1em;
            }
        }
    }
    .c-address {
        text-align: center;
        font-size: 100%;
        margin: 1em 0 5%;
    }
    .map-wrap {
        position: relative;
        & iframe {
            display: block;
        }
    }
}

.info-exterior {
    position: relative;
    max-width: max-content;
    margin: 6% auto 6.5%;
}

.info-badge {
	position: absolute;
    width: 15em;
    text-align: center;
    font: var(--font-min);
	font-size: min(1.8vw,135%);
    line-height: 1.4;
    letter-spacing: .15em;
    right: -4.1%;
    bottom: -3%;

    & p {
        position: relative;
        z-index: 1;
    }
    .route {
        display: inline-block;
        color: var(--color-base);
        font-size: 91%;
        background-color: rgb(255 255 255 / 0.8);
        padding: .2em 1.2em;
        border-radius: 2em;
    }
    .station {
        font-size: 147%;
        letter-spacing: .2em;
    }
    .minutes {
        font-size: 173%;
        line-height: 1.1;
        vertical-align: -0.05em;
    }
    &::before {
        position: absolute;
        display: block;
        font-family: 'fontello';
        content: '\e800';
        color: var(--accent-color);
        font-size: 1500%;
        line-height: 0.5;
        left: 50%;
        top: 45%;
        translate: -50% -50%;
}
}
.u-accent-secondary {
    .info-badge {
        color: #FFF;
    }
}

.info .c-cta-wrap {
	margin-top: 8%;
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.info-col2 {
	display: flex;
    justify-content: center;
    align-content: center;
	column-gap: 3%;
	margin-inline: auto;

    > *:nth-of-type(1) {
        width: 43%;
    }
    > *:nth-of-type(2) {
        width: 54%;
    }
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.info {
    .c-txt--clinic {
        font-size: 130%;
    }
    .c-address {
        font-size: 90%;
        margin-bottom: 6%;
    }
    .map-wrap iframe {
        height: 70vw;
    }
    .c-cta-wrap {
        margin-top: 8%;
    }
}

.info-exterior {
	margin-top: 10%;
}
.info-badge {
	font-size: 70%;
    right: -4.1%;
    bottom: -3%;
}

.info-col2 {
	display: grid;
    row-gap: 8vw;
}
}

/* Info - clinic-slide__nav
-----------------------------------------------*/
.slide-wrap {
	position: relative;
	padding: 7% 0;
    margin-top: 8.5%;

    &::before {
        position: absolute;
        content: "";
        background: #e2d0ad url(../images/clinic/slide-bg@2x.png) no-repeat right bottom;
        background-size: 50% auto;
        width: 96vw;
        max-width: 1420px;
        height: 100%;
        inset: 0 auto auto 50%;
        translate: -50% 0;
        z-index: -1;
    }
}

.clinic-slide {
	max-width: 1200px;
	margin-inline: auto;

    .splide__track {
        overflow: visible;
    }
    .splide__slide {
        height: auto;

        &.is-active {
            .clinic-slide__inner {
                scale: 1;
            }
        }
    }
    .clinic-slide__inner {
        height: 100%;
        background-color: #fff;
        padding: 3.4%;
        transition: scale .5s;
        scale: 0.9;
    }

    /* arrow */
    .splide__arrows {
        position: absolute;
        display: flex;
        justify-content: space-between;
        width: 100%;
        left: 0;
        top: 50%;
        translate: 0 -50%;

        .splide__arrow {
            position: relative;
            font-size: min(6vw, 5.8em);
            color: var(--color-brw-300);
            background-color: #fff78c;
            box-shadow: 0 5px 10px rgb(0 0 0 / 0.1);

            &.splide__arrow--prev {
                translate: -60% 0;
            }
            &.splide__arrow--next {
                translate: 60% 0;
            }
            &::before {
                background-image: url(../images/clinic/icon-arrow.svg);
                background-size: 100% auto;
            }
            &:hover {
                background-color: rgb(255 247 140 / 0.8);
            }
        }
    }
}
.clinic-slide__img {
	position: relative;
	max-width: max-content;
}
.clinic-slide__txt {
    .c-hdg--en {
        color: #4ca8c8;
        font-size: min(2vw,123%);
    }
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.clinic-slide {
	width: 80vw;
    max-width: 1180px;
}
.clinic-slide__inner {
	display: grid;
    align-items: center;
    column-gap: 6%;
	grid-template-columns: 46% 46%;
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.slide-wrap {
	padding: 10% 0;
    margin-top: 10%;
}
.clinic-slide {
    .clinic-slide__inner {
        padding: 8%;
    }

    /* arrow */
    .splide__arrows {
        .splide__arrow {
            font-size: 10vw;

            &.splide__arrow--prev {
                translate: -40% 0;
            }
            &.splide__arrow--next {
                translate: 40% 0;
            }
        }
    }
}
.clinic-slide__img {
	margin: 0 auto 8%;
}
.clinic-slide__txt {
    .c-hdg--en {
        font-size: 90%;
    }
}
}

/* Info - clinic-slide__nav
-----------------------------------------------*/
.clinic-slide__nav {
	max-width: 1100px;
	display: grid;
	justify-content: space-between;
	row-gap: 1em;
    font: var(--font-min);
	font-size: min(1.6vw,1.11rem);
	letter-spacing: .15em;
	line-height: 1.2;
    margin: 5% auto 0;
	
	& button {
		position: relative;
		height: 4.2em;
		display: flex;
		flex-direction: column;
		justify-content: center;
        text-align: left;
		color: #FFF;
        letter-spacing: .1em;
		background-color: #ccaf81;
		padding: .2em 1.6em;
		border-radius: 100vmax;
        transition: background-color .5s;

        &.is-active,
		&:hover {
			background-color: var(--color-brw-300);
		}

		&::before {
			position: absolute;
			display: block;
			font-family: 'fontello';
			content: '\e801';
			text-align: center;
			letter-spacing: normal;
			color: var(--color-base);
            text-align: center;
			font-size: 100%;
			line-height: 1.5;
			background-color: #FFF;
			border-radius: 50%;
			width: 1.5em;
			right: 1em;
			top: 50%;
			translate: 0 -50%;
		}
	}
}
/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

.clinic-slide__nav {
	grid-template-columns: repeat(3,31.8%);
}
}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {

.clinic-slide__nav {
	grid-template-columns: repeat(2,49%);
    gap: .8em 2%;
	font-size: 85%;
    margin-top: 8%;
	
	& button {
		height: 4.2em;
        letter-spacing: .08em;
		padding: .2em 2.5em .2em 1.2em;
	}
}
}



/*---------------------------------------------------------

---------------------------------------------------------*/

/* PC,Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) {

}
/* Tablet (Portrait)
------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}
/* Mobile (Portrait)
------------------------------------------*/
@media only screen and (max-width: 767px) {


}