@charset "UTF-8";
/* =========================
   Reset
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
	min-height: 100dvh;
    color:#333;
    font-family: "Marcellus", serif;
	font-optical-sizing: auto;
	font-style: normal;
}

/* =========================
   Setting
========================= */

a{
	color: #299d93;
	text-decoration: none;
}

a:hover{
	opacity: .7;
	text-decoration: none;
}

h2{
	letter-spacing: 0.5rem;
	font-size: 3.5rem;
}

h3{
	letter-spacing: 0.25rem;
	font-size: 3rem;
}

h4{
	letter-spacing: 0.25rem;
	font-size: 2.3rem;	
}

h5{
	font-size: 1rem;	
	letter-spacing: 0.1rem;
}

p{
	font-size: 90%;
	line-height: 2rem;
}

.content{
    padding:150px 0;
}

#service{
	padding-top: 150px;
}

/* Tablet */
@media(max-width:1024px){
    .content{
	    padding:100px 0;
    }
	#service{
		padding-top: 100px;
	}
    .container-lg{
	    padding: 0 20px;
    }
}

/* SP */
@media(max-width:767px){
    .content{
	    padding:50px 0;
    }
	#service{
		padding-top: 50px;
	}
}

#gallery,#contact,#about{
	background-color: #299d93;
	color: #fff;
}

.features{
	background-color: #cae1de;
}

footer p{
	font-size: 12px;
}

.fade{
    opacity:0;
}

.parallax-wrap{
    position:relative;
    overflow:hidden;
}

.parallax{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.1);
    will-change:transform;
}

/* =========================
   Opening
========================= */

#opening{
    position:fixed;
    inset:0;
    background:#fff;
    z-index:99999;
    display:flex;
    align-items:center;
    justify-content:center;
}

.opening-logo{
    opacity:0;
}

.opening-logo img{
    width:400px;
    height:auto;
    display:block;
}

/* Tablet */
@media(max-width:1024px){

    .opening-logo img{
        width:300px;
    }

}

/* SP */
@media(max-width:767px){

    .opening-logo img{
        width:200px;
    }

}

/* コンテンツは最初見せない */
main{
    opacity:0;
	visibility:hidden;
}	

/* ==========================
   Header
========================== */

.header{
    position:fixed;
    inset:0 0 auto;
    z-index:100;
    padding: 30px;
}

/* Logo */

.logo{
    width:300px;
}

.logo img{
    transition:filter .3s ease;
}

.header.white .logo img{
    filter:brightness(0) invert(1);
}

/* PC Navigation */

.header .gnav-pc ul{
    display:flex;
    gap:40px;
}

.gnav-pc a{
    color:#222;
    text-decoration:none;
    transition:color .3s ease;
}

.header.white .gnav-pc a{
    color:#fff;
}

/* SP Navigation */

.gnav-sp{
    display:none;
}


/* Responsive */
@media(max-width:992px){
	.header .gnav-pc ul{
	    display:flex;
	    gap:20px;
	}
}

@media (max-width:767px){

	.header{
	    padding: 20px;
	}
    /* Logo */
    .logo{
        width:200px;
    }

    /* Hamburger */
    .gnav-sp-toggle{
        position:fixed;
        top:17px;
        right:20px;
        display:block;
        width:60px;
        height:20px;
        z-index:3000;
        cursor:pointer;
    }

    .gnav-sp-toggle-bar{
        position:absolute;
        width:100%;
        height:1px;
        background:#222;
        transition:
            background .4s ease,
            transform .35s ease;
    }

	/* メニューOPEN時 */
	.header.white .gnav-sp-toggle-bar.active{
	    background:#333;
	}

    .gnav-sp-toggle-bar-first{
        top:9px;
    }

    .gnav-sp-toggle-bar-second{
        bottom:0;
    }

    .gnav-sp-toggle-bar-first.active{
        top:8px;
        transform:rotate(25deg);
    }

    .gnav-sp-toggle-bar-second.active{
        bottom:10px;
        transform:rotate(155deg);
    }
    .header.white .gnav-sp-toggle-bar{
        background:#fff;
    }


    /* SP Menu */

    .gnav-sp{
        position:fixed;
        inset:0;
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:100dvh;
        background:rgba(255,255,255,.9);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:.4s;
        z-index:2000;
    }

    .gnav-sp.active{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .gnav-sp-wrap{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:100%;
    }

    .gnav-sp-menu li{
        margin:20px 0;
    }

    .gnav-sp-menu li a{
        color:#333;
        font-size:1.5rem;
        font-weight:700;
        text-decoration:none;
        padding:40px;
        transition:color .3s ease;
    }
    
}


/* ==========================
	FV
========================== */

.fv{
    position:relative;
    width:100%;
    height:100dvh;
    overflow:hidden;
}

/* Video */

.fv-video{
    position:absolute;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;
    
    background: #299d93;
}

.fv-video video{
    max-width:60%;
    max-height:60%;
    width:auto;
    height:auto;
    display:block;
}

/* Overlay */

.fv-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
}

/* Sound Button */

.video-toggle{
    position:absolute;
    right:30px;
    bottom:30px;
    width:45px;
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.7);
    border-radius:50%;
    background:rgba(0,0,0,.25);
    color:#fff;
    cursor:pointer;
    z-index:10;
    transition:
        background .3s ease,
        transform .3s ease;
}

.video-toggle:hover{
    background:rgba(0,0,0,.5);
    transform:scale(1.1);
}

.video-toggle i{
    font-size:16px;
}

/* Scroll */

.scroll{
    position:absolute;
    bottom:50px;
    left:50%;
    transform:translateX(-50%);
    letter-spacing:.3em;
    font-size:12px;
    z-index:20;
}

.scroll::after{
    content:"";
    display:block;
    width:1px;
    height:60px;
    background:#fff;
    margin:15px auto 0;
    animation:scroll 2s infinite;
}

@keyframes scroll{

    0%{
        transform:scaleY(0);
        transform-origin:top;
    }

    50%{
        transform:scaleY(1);
        transform-origin:top;
    }

    51%{
        transform-origin:bottom;
    }

    100%{
        transform:scaleY(0);
    }
}

/*==============================
    Page Top
==============================*/

.page-top{

    position:fixed;

    right:30px;
    bottom:30px;

    width:56px;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.4);
    border-radius:50%;

    background:rgba(0,0,0,.35);
    backdrop-filter:blur(10px);

    color:#fff;
    text-decoration:none;

    z-index:999;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .4s ease,
        bottom .3s ease;

}

.page-top.show{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

}

.page-top:hover{

    background:rgba(41,157,147,.9);

    transform:translateY(-3px);

}

.page-top i{

    font-size:16px;

}

/*==============================
    SP
==============================*/

@media (max-width:767px){

    .page-top{

        right:20px;
        bottom:20px;

        width:48px;
        height:48px;

    }

}


/* ==========================
	Concept
========================== */

/*Swiper*/

.concept-slider{
    width:100%;
    overflow:hidden;
}

/* Swiperの速度を一定にする */
.concept-slider .swiper-wrapper{
    transition-timing-function:linear;
}

/* スライド幅を画像サイズに合わせる */
.concept-slider .swiper-slide{
    width:auto;
    flex-shrink:0;
    overflow:hidden;
}

/* 画像 */
.concept-slider .swiper-slide img{
    display:block;
    height:400px;
    width:auto;
    max-width:none;
    object-fit:contain;
    transition:transform .8s cubic-bezier(.19,1,.22,1);
}

/* Tablet */
@media(max-width:1024px){
    .concept-slider .swiper-slide img{
        height:220px;
    }
}

/* SP */
@media(max-width:767px){
    .concept-slider .swiper-slide img{
        height:160px;
    }
}

/*==============================
	Gallery
==============================*/

/* Swiper */

.gallery-slider-wrap{
    overflow: hidden;
    margin-left: calc(
        max((100vw - min(1320px, 100vw)) / 2, 0px)
        + var(--bs-gutter-x, 1.5rem) / 2
    );
}

.gallery-slider{
    overflow:hidden;
    margin-top:60px;
    padding-right: 0;
    margin-right: calc(50% - 50vw);
}

.gallery-slider .swiper-wrapper{
    align-items:center;
}

.gallery-slider .swiper-slide{
    overflow:hidden;
    transform-origin:center center;
    will-change:transform,opacity;
    cursor: pointer;
}

.gallery-slider img{
    display:block;
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    transition:.6s;
}

.gallery-slider .swiper-slide:hover img{
    transform:scale(1.08);
}

/* Category Menu */

.gallery-category li{
    cursor:pointer;
    font-size:14px;
    letter-spacing:.15em;
    text-transform:uppercase;
    transition:.3s;
    opacity:.45;
}

.gallery-category li:hover{
    opacity:1;
}

.gallery-category li.is-active{
    opacity:1;
    font-weight:700;
}

/* Responsive */

@media (max-width:767px){
	.gallery-category{
	    gap:14px;
	    font-size:13px;	
	}
}

/* Gallery Modal */

.gallery-modal{

    position:fixed;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(41,157,147,.8);
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:9999;
}

.gallery-modal.is-open{
    opacity:1;
    visibility:visible;
}

.gallery-modal img{
    height:50vh;
    width:auto;
    max-width:90vw;
    object-fit:contain;
    transform:scale(.95);
    transition:.35s;
}

.gallery-modal.is-open img{
    transform:scale(1);
}

.gallery-modal-close{
    position:fixed;
    top:30px;
    right:40px;
    display: block;
    z-index: 3000;
    border:0;
    background:none;
    cursor:pointer;
    padding:0;
	width: 60px;
	height: 20px;
}

.gallery-modal-close-bar{
	background:#FFF;
	position: absolute;
	width: 100%;
	height: 1px;
	left: 0;
}

.gallery-modal-close-bar-first{
	top: 8px;
	transform: rotate(25deg);	
}

.gallery-modal-close-bar-second{
	bottom: 10px;
	transform: rotate(155deg);	
}

.gallery-modal-close:hover{
    opacity:.7;
}

@media (max-width:767px){
	.gallery-modal img{
	    height:40vh;
	    max-width:92vw;
	}
	.gallery-modal-close{	
	    top:20px;
	    right:20px;
	    font-size:36px;
	}
}

/*==============================
	Service
==============================*/

/* Marker Animation */

mark{
    position:relative;
    display:inline-block;
    background:none;
}

mark::after{
    content:"";
    position:absolute;
    left:0;
    bottom:.15em;
    width:100%;
    height:.45em;
    background:rgba(41,157,147,.3);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .8s ease;
    z-index:-1;
}

.mark-active mark::after{
    transform:scaleX(1);
}

/* layout */

.maternity-item{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
        "title image"
        "text  image";
    column-gap:60px;
}

.maternity-item h4{
    grid-area:title;
    align-self:end;   /* セルの下に配置 */
    margin-bottom:0;
}

.maternity-text{
    grid-area:text;
    align-self:start; /* セルの上に配置 */
}

.maternity-image{
    grid-area:image;
    align-self:center; /* 画像だけ中央 */
}

#newbone .newbone-title {
	width: 40%;
}

#newbone .newbone-image{
	width: 60%;
}

.family-inner{
    position:relative;
    width:80%;
    margin-left:auto;
}

.family-item h4{
    position:absolute;
    top:40px;
    left:40px;
    z-index:2;
}

.family-text{
    position:absolute;
    left:40px;
    bottom:40px;
    z-index:2;
    margin-right: 40px;
}

.family-inner h4,
.family-text p{
	color: #FFF;
}

#package h4{
	letter-spacing: 0.25rem;
	font-size: 1.75rem;	
}

#package h5{
	letter-spacing: normal;
}

#package > div > div > p{
	line-height: 1.5rem;
}

/* Tablet */

@media (max-width:1024px){
    .family-inner{
        width:100%;
    }
}

/* SP */
@media (max-width:767px){

	#service h3{
		font-size: 2rem;
	}

    .maternity-item{
        display:block;
    }
    
    .maternity-image{
        margin:30px 0;
    }

    .family-inner{
        position:static;
        width:100%;
        margin-left:0;
    }

    .family-item h4{
        position:static;
        top:auto;
        left:auto;
        margin-bottom:2rem;
        z-index:auto;
        text-align:center;
    }

    .family-text{
        position:static;
        left:auto;
        bottom:auto;
        margin-top:2rem;
        z-index:auto;
		margin-right: 0;
    }

	.family-inner h4,
	.family-text p{
		color: #333;
	}

	#newbone > div > div:first-child{
		width: 100%;
	}

	#newbone > div > div:last-child{
		width: 100%;
	}
}

/*==============================
	About
==============================*/

/* About */

.about-visual{
    position:relative;
}

.about-image{
    position:relative;
    overflow:hidden;
    height:90vh;

}

.about-image img{
    width:100%;
    height:100%;
    object-fit:cover;

    will-change:transform;
}

/* =========================
Language Switch
========================= */

.lang-box [data-lang="en"]{
    display:none;
}

.lang-switch{
    display:inline-block;
    width:max-content;
    margin-bottom:30px;
    padding:8px 20px;
    background:transparent;
    border:1px solid rgba(255,255,255,.6);
    color:#fff;
    cursor:pointer;
    font-size:12px;
    letter-spacing:.15em;
    transition:.3s;
}

.lang-box .dark{
    border:1px solid rgba(51,51,51,.6);
    color:#333;	
} 

/*==============================
	Voice
==============================*/

/* Slider */

.voice-slider-wrap{
    width:100%;
    overflow:hidden;
}

.voice-slider{
    width:100%;
    overflow:visible;
}

.voice-slider .swiper-wrapper{
    align-items:center;
}

.voice-slider .swiper-slide{
    width:min(820px,70vw);
    flex-shrink:0;
    opacity:.35;
    transition:opacity .45s ease;
}

.voice-slider .swiper-slide p{
    margin:0;
    padding:100px;
    background:#fff;
    line-height:2;
    transform:scale(.9);
    transform-origin:center center;
    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

/* アクティブ */
.voice-slider .swiper-slide-active{
    opacity:1;
}

.voice-slider .swiper-slide-active p{
    transform:scale(1);
}

/* Navigation */

.voice-prev,
.voice-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    background:#299d93;
    z-index:10;
    cursor:pointer;
}

.voice-prev{
    left:20px;
}

.voice-next{
    right:20px;
}

.voice-prev::after,
.voice-next::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:10px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
}

.voice-next::after{
    transform:
    translate(-60%,-50%)
    rotate(45deg);
}

.voice-prev::after{
    transform:
    translate(-40%,-50%)
    rotate(-135deg);
}

/* Responsive */

/* Tablet */

@media(max-width:1024px){
    .voice-slider .swiper-slide{
        width:80vw;
    }
    .voice-slider .swiper-slide p{
        padding:70px;
    }
}

/* SP */

@media(max-width:767px){
    .voice-slider .swiper-slide{
        width:80vw;
    }
    .voice-slider .swiper-slide p{
        padding:40px;
        line-height:1.9;
    }
	.voice-prev{
	    left:10px;
	}
	
	.voice-next{
	    right:10px;
	}

}

/*==============================
	Contact
==============================*/

#contact a.button{
    margin-bottom: 30px;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    letter-spacing: .15em;
    text-decoration: none;
}