/* ---- Layout ---- */
.container {
    width: 100%;
}
.pane-topic-path,
.block-recent-item,
#goodsdetail_eventlist,
.block-category-list--event,
.block-category-list--goods,
.block-category-list--topic {
    display: none;
}
@media screen and (min-width: 768px) {
    .container {
        padding: 0;
    }
}

/* ---- Main Visual ---- */
.medical-mv {
    position: relative;
    background-color: var(--medical-gray1);
    overflow: hidden;
}
.medical-mv--slider:not(.swiper-initialized) .medical-mv--slide + .medical-mv--slide {
    display: none;
}
.medical-mv--slider-wrapper {}
.medical-mv--slide {
    background-color: var(--medical-gray1);
}
.medical-mv--slide-inner {
    height: 66.6rem;
    position: relative;
    overflow: hidden;
}
@media screen and (min-width: 768px) {
    .medical-mv--slide-inner {
        /* height: min(690px, var(--fullWindowSize) * 0.8 * 690 / 800); */
        height: min(796px, var(--fullWindowSize) * 0.8 * 796 / 800);
    }
}
/* slide navigation */
.medical-mv--nav {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 50;
	background: rgba(255, 0, 0, 0);
	width: 0.2rem;
	color: var(--color-red);
}
#medical-top .medical-mv--slider-pager {
	position: absolute;
	left: -2.4rem;
	top: 1.5rem;
	bottom: initial;
	display: flex;
	flex-flow: column;
	gap: 0.8rem;
	width: 0.8rem;
}
#medical-top .medical-mv--slider-pager .swiper-pagination-bullet {
	margin: 0;
	font-size: 0;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 100%;
	background: #ffffff;
	border: solid 1px var(--color-red);
	opacity: 1;
}
#medical-top .medical-mv--slider-pager .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: var(--color-red);
}
.medical-mv--nav > p {
	position: absolute;
	left: -7.5rem;
	bottom: 2.5rem;
	transform: rotate(90deg);
	width: 10.5rem;
	font-size: 1.1rem;
	letter-spacing: 1px;
}
.medical-mv--nav > p::before,.medical-mv--nav > p::after {
	display: block;
	content: "";
	width: 5rem;
	height: 1px;
	background: var(--color-red);
	position: absolute;
	bottom: 0.8rem;
	left: calc(100% - 5rem);
}
.medical-mv--nav > p::after {
	height: 3px;
	bottom: calc(0.8rem - 1px);
	animation: scroll 1.8s infinite;
}
@media screen and (min-width: 768px) {
	#medical-top .medical-mv--slider-pager {
		left: -3.8rem;
		top: 50%;
		transform: translateY(-50%);
		gap: 1.4rem;
	}
	#medical-top .medical-mv--slider-pager .swiper-pagination-bullet {
		width: 1rem;
		height: 1rem;
	}
	.medical-mv--nav > p {
		left: -9.5rem;
		left: -8.5rem;
		bottom: 2.5rem;
		width: 12.5rem;
		font-size: 1.2rem;
		letter-spacing: 2px;
		font-weight: normal;
	}
	.medical-mv--nav > p::before,
    .medical-mv--nav > p::after {
		width: 6rem;
		left: calc(100% - 6rem);
	}
}
/* slide animation */
.fadeFromBottom {
    opacity: 0;
    transform: translateY(50px);
}
.is-active .fadeFromBottom {
    opacity: 1;
    transform: translateY(0);
    transition: var(--animation);
}

/* slide1 */
.medical-mv--slide1 {
    background-color: #fff;
}
.medical-mv--slide1-text1 picture {
    display: block;
    width: 29.4rem;
    margin: 2.7rem auto 0;
}
.medical-mv--slide1-text2 picture {
    display: block;
    width: 29.2rem;
    margin: 1.1rem auto 0;
}
.medical-mv--slide1-text3 picture {
    display: block;
    width: 21.3rem;
    margin: .8rem auto 0;
}
.medical-mv--slide1-text4 picture {
    display: block;
    width: 28.9rem;
    margin: .8rem auto 0;
}
.medical-mv--slide1-text5 {
    position: absolute;
    bottom: 0;
    left: calc(50% - (33.5rem / 2));
}
.medical-mv--slide1-text5 picture {
    display: block;
    width: 33.5rem;
}
.medical-mv--slide1-img {
    width: 100%;
    position: absolute;
    bottom: 3rem;
    z-index: -1;
}
.is-active .medical-mv--slide1-text1 {
    transition-delay: .4s;
}
.is-active .medical-mv--slide1-text2 {
    transition-delay: .5s;
}
.is-active .medical-mv--slide1-text3 {
    transition-delay: .6s;
}
.is-active .medical-mv--slide1-text4 {
    transition-delay: .7s;
}
.is-active .medical-mv--slide1-text5 {
    transition-delay: .2s;
}
.is-active .medical-mv--slide1-img1 {
    transition-delay: .2s;
}

@media screen and (min-width: 768px) {
    .medical-mv--slide1 .medical-mv--slide-inner {
        padding-bottom: 0;
    }
    .medical-mv--slide1 .medical-mv--slide1-content {
        width: min(50.5rem, (505 / 1420 * 100vw));
        position: absolute;
        left: 25%;
        top: 50%;
        translate: -50% -50%;
    }
    .medical-mv--slide1-text1 picture {
        width: min(50.3rem, (503 / 1420 * 100vw));
        margin: 0 auto;
    }
    .medical-mv--slide1-text2 picture {
        width: min(50.1rem, (501 / 1420 * 100vw));
        margin: min(1.9rem, (19 / 1420 * 100vw)) auto 0;
    }
    .medical-mv--slide1-text3 picture {
        width: min(36.4rem, (364 / 1420 * 100vw));
        margin: min(1.4rem, (14 / 1420 * 100vw)) auto 0;
    }
    .medical-mv--slide1-text4 picture {
        width: min(49.5rem, (495 / 1420 * 100vw));
        margin: min(1.5rem, (15 / 1420 * 100vw)) auto 0;
    }
    .medical-mv--slide1-text5 {
        position: static;
        width: 100%;
        margin: 0 auto;
    }
    .medical-mv--slide1-text5 picture {
        width: min(50.1rem, (501 / 1420 * 100vw));
        margin: 0 auto;
    }
    .medical-mv--slide1-text5 picture img {
        width: min(19.1rem, (191 / 1420 * 100vw));
        margin: min(6.3rem, (63 / 1420 * 100vw)) 0 0;
    }
    .medical-mv--slide1-img {
        width: 100%;
        height: 100%;
        margin-top: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    .medical-mv--slide1-img img {
        max-width: 1920px;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        margin: 0 auto;
    }
    .is-active .medical-mv--slide1-text5 {
        transition-delay: .8s;
    }
}
@media screen and (min-width: 1000px) {
    .medical-mv--slide1 .medical-mv--slide1-content {
        width: 55rem;
        top: 16.9rem;
        left: 31%;
        translate: -50%;
    }
    .medical-mv--slide1-text1 {
        width: 100%;
    }
    .medical-mv--slide1-text2 {
        width: 100%;
        margin: 1.9rem auto 0;
    }
    .medical-mv--slide1-text3 {
        width: 36.4rem;
        margin: 1.4rem auto 0;
    }
    .medical-mv--slide1-text4 {
        width: 100%;
        margin: 1.5rem 0 0;
    }
    .medical-mv--slide1-text5 picture img {
        width: 19.1rem;
    }
}
/* slide2, 3, 4 */
.medical-mv--slide2-content,
.medical-mv--slide3-content,
.medical-mv--slide4-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 29.2rem;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 1;
}
.medical-mv--slide2-text1,
.medical-mv--slide3-text1,
.medical-mv--slide4-text1 {
    width: 100%;
}
.medical-mv--slide2-text2 picture,
.medical-mv--slide3-text2 picture,
.medical-mv--slide4-text2 picture {
    width: 21.3rem;
    margin-top: .8rem;
}
.medical-mv--slide2-img,
.medical-mv--slide3-img,
.medical-mv--slide4-img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.is-active .medical-mv--slide2-text1,
.is-active .medical-mv--slide3-text1,
.is-active .medical-mv--slide4-text1 {
    transition-delay: .4s;
}
.is-active .medical-mv--slide2-text2,
.is-active .medical-mv--slide3-text2,
.is-active .medical-mv--slide4-text2 {
    transition-delay: .5s;
}
.is-active .medical-mv--slide2-img,
.is-active .medical-mv--slide3-img,
.is-active .medical-mv--slide4-img {
    transition-delay: .2s;
}
@media screen and (min-width: 768px) {
    .medical-mv--slide2-content,
    .medical-mv--slide3-content,
    .medical-mv--slide4-content {
        width: min(59.5rem, 60vw);
    }
    .medical-mv--slide2-text2,
    .medical-mv--slide3-text2,
    .medical-mv--slide4-text2 {
        width: 72.1%;
        margin-top: 1.7rem;
    }
    .medical-mv--slide2-img img,
    .medical-mv--slide3-img img,
    .medical-mv--slide4-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
    }
}

/* ---- News ---- */
.medical-news {
    width: calc(100% - 4rem);
    margin: 2.4rem auto 0;
    background-color: var(--medical-gray1);
}
.medical-news--content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 1.5rem;
}
.medical-news--title {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    margin: 0;
}
.medical-news--list {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
    row-gap: 1rem;
    font-size: 1.4rem;
    text-align: center;
}
.medical-news--list-i a {
    text-decoration: underline;
}
@media screen and (min-width: 768px) {
    .medical-news {
        width: 100.7rem;
        max-width: calc(100% - 4rem);
        margin: 6rem auto 0;
    }
    .medical-news--title {
        font-size: 1.6rem;
    }
}

/* ---- About ---- */
.medical-about {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 375 / 160;
    background-image: url(../img/top/about_bg_sp.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 2.2rem 1.8rem;
    margin-top: 2rem;
}
.medical-about--title {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
    margin: 0;
}
.medical-about--title-en {
    font-size: 1.8rem;
    font-weight: bold;
    letter-spacing: .16em;
}
.medical-about--title-jp {
    font-size: 1.4rem;
    font-weight: 500;
    letter-spacing: .2em;
}
.medical-about--btn {
    margin: 1.9rem auto 0;
}
@media screen and (min-width: 768px) {
    .medical-about {
        aspect-ratio: 1920 / 356.8;
        background-image: url(../img/top/about_bg.jpg);
        padding: 8rem 2rem;
        margin-top: 6.3rem;
    }
    .medical-about--title-en {
        font-size: 3.2rem;
    }
    .medical-about--title-jp {
        font-size: 1.6rem;
        margin-top: 1rem;
    }
    .medical-about--btn {
        margin: 5rem auto 0;
    }
}

/* ---- Catalog ---- */
.medical-catalog {
    padding: 4.8rem 0;
}
.medical-catalog--inner {
    display: flex;
    flex-direction: column;
}
.medical-catalog--content {
    display: contents;
}
.medical-catalog--title {
    order: 1;
    width: 31.4rem;
    margin: 0 auto;
}
.medical-catalog--text {
    order: 3;
    width: 35.8rem;
    margin: 1.3rem auto 0;
}
.medical-catalog--btn {
    order: 4;
    width: 33.7rem;
    margin: 3rem auto 0;
}
.medical-catalog--img {
    order: 2;
    margin-top: 1.2rem;
}
@media screen and (min-width: 768px) {
    .medical-catalog {
        padding: 0;
    }
    .medical-catalog--inner {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        /* column-gap: min(7rem, (70 / 1160 * 100vw)); */
        max-width: min(1160px, (100% - 4rem));
        margin: 0 auto;
        padding: 0;
    }
    .medical-catalog--content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .medical-catalog--title {
        width: min(50.1rem, (501 / 1160 * 100vw));
        margin: 4rem 0 0;
    }
    .medical-catalog--text {
        width: min(49.5rem, (495 / 1160 * 100vw));
        margin: min(6.1rem, (61 / 1160 * 100vw)) auto 0;
    }
    .medical-catalog--btn {
        width: min(49.5rem, (495 / 1160 * 100vw));
        margin: min(9.9rem, (99 / 1160 * 100vw)) auto 0;
    }
    .medical-catalog--img {
        width: min(59rem, (590 / 1160 * 100vw));
        margin-top: 0;
        translate: 6rem 0;
    }
}

/* Lineup */
.medical-lineup {
    padding: 4.6rem 2rem;
}
.medical-lineup--title {
    width: fit-content;
    font-size: 2rem;
    color: var(--color-red);
    font-weight: bold;
    line-height: 1;
    padding: .8rem .7rem;
    margin: 0 auto;
    border-top: 1px solid var(--color-red);
    border-bottom: 1px solid var(--color-red);
}
.medical-lineup--lead {
    font-size: 1.4rem;
    font-weight: bold;
    text-align: center;
    margin: 3rem 0 2rem;
}
.medical-lineup--list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: 1.2rem;
    row-gap: 1.2rem;
    margin-top: 3rem;
}
.medical-lineup--list-i {
    width: calc((100% - 1.2rem) / 2);
}
.medical-lineup--list-i a {
    display: block;
}
.medical-lineup--list-i--img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 172 / 230;
}
.medical-lineup--list-i--img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
}
.medical-lineup--list-i--icons {
    display: flex;
    flex-wrap: wrap;
    column-gap: .3rem;
    row-gap: .3rem;
    margin-top: .8rem;
}
.medical-lineup--list-i--icons-i {
    display: block;
    width: fit-content;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1;
    color: var(--color-red);
    border-radius: .3rem;
    border: 1px solid var(--color-red);
    padding: .4rem .8rem;
}
.medical-lineup--list-i--colors {
    display: flex;
    flex-wrap: wrap;
    row-gap: .3rem;
    column-gap: .3rem;
    margin-top: .8rem;
}
.medical-lineup--list-i--colors-i {
    width: 1.7rem;
    aspect-ratio: 1/1;
}
.medical-lineup--list-i--colors-i img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
.medical-lineup--list-i--title {
    font-size: 1.23rem;
    font-weight: bold;
    letter-spacing: .1em;
    margin-top: 1rem;
}
.medical-lineup--list-i--price {
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: .04em;
}
.medical-lineup--list-i--btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 5rem;
    font-size: 1.3rem;
    color: #fff;
    background-color: var(--medical-gray2);
    margin-top: 1rem;
}
@media screen and (min-width: 768px) {
    .medical-lineup {
        padding: 6.7rem 2rem 2rem;
    }
    .medical-lineup--title {
        font-size: 3.2rem;
        padding: 1.5rem 1.6rem .9rem;
        border-top: 2px solid var(--color-red);
        border-bottom: 2px solid var(--color-red);
    }
    .medical-lineup--lead {
        font-size: 2.2rem;
        margin: 4rem 0 5rem;
    }
    .medical-lineup--list {
        column-gap: 10rem;
        row-gap: 10rem;
        margin-top: 6rem;
    }
    .medical-lineup--list-i {
        width: 32.9rem;
    }
    .medical-lineup--list-i--icons {
        column-gap: .8rem;
        row-gap: .8rem;
        margin-top: 1.6rem;
    }
    .medical-lineup--list-i--icons-i {
        font-size: 1.2rem;
        padding: .4rem .5rem .7rem;
    }
    .medical-lineup--list-i--colors {
        margin-top: 1rem;
    }
    .medical-lineup--list-i--colors-i {
        width: 1.8rem;
    }
    .medical-lineup--list-i--title {
        font-size: 1.6rem;
        margin-top: 1.8rem;
    }
    .medical-lineup--list-i--price {
        font-size: 2rem;
        letter-spacing: .04em;
        margin-top: .8rem;
    }
    .medical-lineup--list-i--btn {
        height: 6.5rem;
        font-size: 1.6rem;
        margin-top: 3rem;
    }
}