@charset "utf-8";
/** ヒーローエリア
---------------------------------------------------------*/
section#hero {}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}



/** 概要見出し
---------------------------------------------------------*/
section#overview {}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {}




/** アウトライン
---------------------------------------------------------*/
section#outline {
    padding-block: 0 var(--m10);
    color: white;
}
section#outline .block {
    margin-top: var(--m8);
    display: flex;
    align-items: center;
    gap: var(--m4);
}
section#outline .block:nth-of-type(even) {
    flex-direction: row-reverse
}
section#outline .text {
    flex: 0 0 50%;
    position: relative;
}
section#outline .headline {
    font-size: calc(var(--headline-size) * 1.5);
    padding-bottom: 0.75lh;
    border-bottom: 1px solid currentColor;
    margin-bottom: 0.75lh;
}
section#outline #outline-thumbnails {
    margin-top: var(--m4);
}
section#outline #outline-thumbnails .swiper-slide {
    cursor: pointer;
    padding: calc(var(--m) * 0.5);
    position: relative;
    transition: 0.5s 0s ease;
}
section#outline #outline-thumbnails .swiper-slide::after {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: content-box;
	box-shadow: inset 0 0 0 1px white;
	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	z-index: -1;
	pointer-events: none;
	opacity: 0;
	transition: var(--transition);
}

section#outline #outline-thumbnails .swiper-slide:not(.swiper-slide-thumb-active) {
    opacity: 0.5;
}
section#outline #outline-thumbnails .swiper-slide-thumb-active::after {
    opacity: 1;
}
@media (any-hover: hover) {
    section#outline #outline-thumbnails .swiper-slide:hover {
        opacity: 1;
    }
}


section#outline #outline-gallery {
    flex-shrink: 0;
    width: 61.66%;
}

@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#outline .block {
        display: block;
    }
    section#outline #outline-gallery {
        width: 100%;
    }
}







/** 導入事例
---------------------------------------------------------*/
section#case-study {
    color: white;
    text-align: center;
    padding-bottom: var(--m10);
}
section#case-study .container {
    margin-block: var(--m6); 
    overflow: visible;
    overflow-x: clip;
}
section#case-study :is(.image, .movie) {
    margin-inline: auto;
}
section#case-study .swiper-slide {
    position: relative;
    transition: 1.3s 0s ease;
}
section#case-study .swiper-slide:not(.swiper-slide-active) {
    transform-origin: bottom center;
    scale: 0.66;
}
section#case-study .swiper-slide-active {
    scale: 1;
}
section#case-study .swiper-slide .text {
    width: 100%;
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0;
    transition: var(--transition);
}
section#case-study .swiper-slide .text p {
    width: fit-content;
    margin-inline: auto;
}
section#case-study .swiper-slide-active .text {
    opacity: 1;
}
section#case-study .headline {
    padding-block: 0.75lh 0.5lh;
}

#case07 .movie {
    width: 500px;
    height: 500px;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
}
#case07 :is(video, img) {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}
#case07 img {
    height: auto;
}


@media screen and (min-width: 768px) {}
@media screen and (max-width: 767px) {
    section#case-study {
        padding-bottom: var(--m4);
    }
    section#case-study .container {
        margin-bottom: 0;
    }
    section#case-study .swiper-slide {
        padding-inline: var(--m);
    }
    section#case-study .swiper-slide .text {
        position: static;
    }
    #case07 .movie {
        width: 100%;
        height: 250px;
    }
}




/** アクセス
---------------------------------------------------------*/
section#access {
    padding-block: var(--m10) var(--m8);
    background: radial-gradient(circle at center top, var(--pale) 0%, var(--pale) 21%, var(--light) 100%);
}
section#access .wrap {
    max-width: 1080px;
}
section#access .map {
    margin-top: var(--m4);
    box-shadow: 30px 30px 20px 0 rgb( from var(--slate) r g b / 0.15);
}
section#access .map iframe {
    max-width: 100%;
    aspect-ratio: 3 / 2;
}
section#access .container {
    margin-top: var(--m4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--m4);
}
section#access .text {
    flex: 1 1 auto;
}
section#access .headline {
    margin-bottom: 0.5lh;
}
section#access .text ul {
    margin-top: var(--m4);
}
section#access .text li {
    list-style: none;
    padding-left: 0;
}
section#access .text li::before {
    display: none;
}

section#access .cta {
    flex-shrink: 0;
    width: fit-content;
}
section#access .cta .headline {
    text-align: center;
    padding-bottom: 0.5lh;
    border-bottom: 1px solid currentColor;
    margin-bottom: 0.5lh;
}
section#access .cta nav {
    --button-hover-color: var(--black);
}
section#access .cta .nav-tel {
    display: block;
    width: 100%;
    font-size: calc(var(--headline-size) * 2);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--m);
}

@media screen and (min-width: 768px) {
    section#access .cta .nav-tel {
        pointer-events: none;
    }
}
@media screen and (max-width: 767px) {
    section#access {
        padding-block: var(--m4);
    }
    section#access .cta {
        width: 100%;
    }
}