@charset "UTF-8";


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


/******************************************************
header
******************************************************/

.header{
	width: 100%;
	z-index: 500;
}
@media screen and (min-width: 768px) {
	.header{
		position: fixed;
		top: 0;
		left: 0;
	}
}
@media screen and (max-width: 767px) {
	.header{
		position: relative;
	}
}

.header .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: rgba(var(--COL-White-rgb), 0);
}
.logo_site{
}
.logo_site .label{
	display: block;
	font-size: 0%;
	line-height: 0%;
	text-indent: 100%;
	letter-spacing: 0;
	white-space: nowrap;
	overflow: hidden;
	background: url("../../img/common/logo_cielserein.svg") 50% 50% no-repeat;
	background-size: contain;
}

/* home */
#b-cielserein .header .inner .logo_site{
	opacity: 0;
	transition: opacity 0.4s ease-out;
}

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

	.header .inner{
		gap: 64rem;
		height: 80rem;
		padding: 0 2.5%;
		/*box-shadow: 0px 8px 16px 0px rgba(var(--Black-rgb), 0);*/
		transition: 0.3s ease-out;
		transition-property: background-color, box-shadow;
	}
	.logo_site{
        padding-top: 8rem;
	}
	.logo_site .label{
		width: 184rem;
		height: 39rem;
		background-size: auto 39rem;
		/*transition: 0.3s ease-out;
		transition-property: height, background-size, opacity;*/
	}

    /* header_fix */
	.header.header_fix .inner{
		/*height: 80rem;
		box-shadow: 0px 4px 12px 0px rgba(var(--COL-Black-rgb), 0.1);*/
    	background-color: rgba(var(--COL-White-rgb), 0.25);
        backdrop-filter: blur(4px);
	}
	#b-cielserein .header.header_fix .inner .logo_site{
		opacity: 1;
	}
	.header.header_fix .inner .logo_site .label{ 
	}

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

	.header .inner{
		height: 60rem;
		padding: 0 180rem 0 4%;
	}

	.logo_site{
        padding-top: 8rem;
	}
	.logo_site .label{
		width: 120rem;
		height: 25rem;
		background-size: contain;
	}

}

/* header_nav */

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

	.header .inner .nav{
		flex-grow: 1;
		display: flex;
		justify-content: flex-end;
	}
	.header .inner .nav .global_nav{
		display: flex;
		align-items: center;
		gap: 64rem;
	}

	.nav .global_nav .gnav_list{
		display: flex;
		gap: 64rem;
	}
	.nav .global_nav .gnav_list li > a{
		display: flex;
		align-items: center;
		height: 56rem;
	}
	.nav .global_nav .gnav_list li > a .label{
		position: relative;
		display: block;
		padding: 0;
        font-family: var(--FNT-serif);
		font-size: 17rem;
		z-index: 10;
	}
	.nav .global_nav .gnav_list li > a .label::before{
		position: absolute;
		top: 150%;
		left: 0;
		display: block;
		width: 100%;
		height: 1rem;
		content: "";
		background: var(--COL-DarkGray);
		transform: scale(0, 1);
		transform-origin: right top;
		transition-property: transform;
		transition-duration: .3s;
		z-index: -1;
	}
	.nav .global_nav .gnav_list li > a:hover .label::before{
		transform: scale(1, 1);
		transform-origin: left top;
	}
	.nav .global_nav .gnav_list li > a.current .label::before{
		transform: scale(1, 1);
		transform-origin: left top;
	}
	.header .inner .nav .global_nav .gnav_list li.gnav_item_home{
		display: none;
	}

	.header .inner .btns{
        display: flex;
    }
    .header .inner .btns .btn_icn{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2rem;
        background: rgba(var(--COL-White-rgb), 0);
        width: 56rem;
        height: 56rem;
    }
    .header .inner .btns .btn_icn > svg{
        width: 20rem;
        height: 20rem;
        fill: var(--COL-Text);
    }
    @media screen and (min-width: 768px) {
        .header .inner .btns .btn_icn{
            transition: background-color 0.4s ease-out;
        }
        .header .inner .btns .btn_icn > svg{
            transition: fill 0.4s ease-out;
        }
        .header .inner .btns .btn_icn:hover,
        .header .inner .btns a:hover .btn_icn{
            background: rgba(var(--COL-White-rgb), 1);
        }
        /*.btn_icn:hover > svg,
        a:hover .btn_icn > svg{
            fill: var(--COL-DarkGray);
        }*/
    }
}
@media screen and (max-width: 767px) {

	.header .inner .nav{
		position:fixed;
		top: 0;
		right: -100vw;
		width: 100vw;
		/*height: auto;*/
        height: 100vh;
		background: var(--COL-White);
		overflow: hidden;
		z-index:400;
		transition: all 0.3s;

		.global_nav{
			position: relative;
			overflow-y: auto;
			width: 100%;
			height: 100%;
/*			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 24rem;*/
			padding: 64rem 40rem;
			.gnav_list{
				> li {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					gap: 0;
					padding: 8rem 0;
					border-bottom: 1px solid var(--COL-Gray);
					> a{
						display: flex;
						justify-content: flex-start;
						align-items: center;
						gap: 8rem;
						min-width: 12em;
						padding: 8rem 16rem;
						&::after{
							display: flex;
							justify-content: center;
							align-items: center;
							width: 28rem;
							height: 28rem;
							content: "";
							border-radius: 999rem;
							/*border: solid 1rem var(--COL-Black);*/
							background: var(--COL-White) url("../../img/common/arrow.svg") 50% 50% no-repeat;
							background-size: 70% auto;
						}
						.label{
							font-size: 16rem;
							font-family: var(--FNT-serif);
							text-transform: uppercase;
						}
					}
				}
			}
		}

	}
	.header .inner .nav.active{
		right: 0;
	}
	.header .inner .btns{
		position: fixed;
		top: 0;
		/*right: 56rem;*/
        right: 0;
        padding-left: 4rem;
        padding-right: 4rem;
        display: flex;
    	background-color: rgba(var(--COL-White-rgb), 0);
        transition: background-color 0.4s ease-out;
		z-index: 600;
		> .btn_icn{
			display: flex;
			justify-content: center;
			align-items: center;
            /*width: 48rem;*/
            width: 56rem;
            height: 60rem;
            > svg{
                width: 20rem;
                height: 20rem;
                fill: var(--COL-Text);
            }
        }
    }
	.header.header_fix .inner .btns{
    	background-color: rgba(var(--COL-White-rgb), 0.9);
        backdrop-filter: blur(2px);
    }

}

/* btn_menu */

@media screen and (min-width: 768px) {
	.btn_menu,
	.bg_menu{
		display: none;
	}
}
@media screen and (max-width: 767px) {
	/*.btn_menu{
		position: fixed;
		top: 0;
		right: 0;
		width: 56rem;
		height: 60rem;
    	background-color: rgba(var(--COL-White-rgb), 0);
        transition: background-color 0.4s ease-out;
		z-index: 600;
		> a{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 4rem;
			width: 100%;
			height: 100%;
			padding-right: 8rem;
			position: relative;
			transition: .35s ease-out;
			&::before,
			&::after{
				display: block;
				content: "";
				width: 18rem;
				height: 2rem;
				background-color: var(--COL-Text);
				transition: .35s ease-in-out;
			}
			> span{
				display: block;
				width: 18rem;
				height: 2rem;
				font-size: 0%;
				line-height: 0%;
				text-indent: 100%;
				letter-spacing: 0;
				white-space: nowrap;
				overflow: hidden;
				background-color: var(--COL-Text);
				transition: .35s ease-in-out;
			}
		}
	}
	.btn_menu.active{
			gap: 0;
		> a{
			&::before{
				transform: translateY(6rem) rotate(135deg);
			}
			&::after{
				transform: translateY(-6rem) rotate(-135deg);
			}
			> span{
				opacity: 0;
			}
		}
	}
	.header.header_fix .btn_menu{
    	background-color: rgba(var(--COL-White-rgb), 0.9);
        backdrop-filter: blur(2px);
    }*/
    .btn_menu{
        display: none;
    }
    
}


/* ハンバーガーメニュー開いているとき背景固定、グレー表示 */

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

	body.fixed{
		position: fixed;
		width: 100%;
		height: 100%;
	}
	.bg_menu{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
      	background-color: rgba(var(--COL-Black-rgb), 0.5);
        backdrop-filter: blur(4px);
		opacity: 0;
		visibility: hidden;
		z-index: -1;
		transition: all 0.5s;
		cursor: pointer;
	}
	.btn_menu.active + .bg_menu{
		opacity: 1;
		visibility: visible;
	}

}



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


/******************************************************
.contents
******************************************************/

.contents.contents_home{
	padding-top: 0;
	gap: 0;
}


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


/******************************************************
section
******************************************************/

.section_label{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.section_label > .label_en{
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform:capitalize;
}
.section_label > .label{
	line-height: 1.4;
	font-family: var(--FNT-serif);
}

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

	.section_label{
		gap: 8rem;
	}
	.section_label > .label_en{
		font-size: 34rem;
	}
	.section_label > .label{
		font-size: 18rem;
		letter-spacing: 0.05em;
	}
	.section_label.small > .label_en{
		font-size: 34rem;
	}
	.section_label.small > .label{
		font-size: 15rem;
		letter-spacing: 0.05em;
	}
	.section_label.large{
		gap: 12rem;
	}
	.section_label.large > .label_en{
		font-size: 28rem;
	}
	.section_label.large > .label{
		font-size: 36rem;
		letter-spacing: 0.05em;
	}

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

	.section_label{
		gap: 4rem;
	}
	.section_label > .label_en{
		font-size: 24rem;
	}
	.section_label > .label{
		font-size: 12rem;
		letter-spacing: 0.1em;
	}
	.section_label.large{
		gap: 8rem;
	}
	.section_label.large > .label_en{
		font-size: 18rem;
	}
	.section_label.large > .label{
		font-size: 24rem;
		letter-spacing: 0.05em;
	}

}

/******************************************************
home
******************************************************/

/* header_home */

.contents_header_home{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.contents_header_home::before{
	display: block;
	content: "";
	background: url(../../img/common/logo_cielserein.svg) 50% 50% no-repeat;
	background-size: contain;
}

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

	.contents_header_home{
		gap: 24rem;
		padding: 54rem 0 80rem;
	}
	.contents_header_home::before{
		width: 240rem;
		height: 50rem;
	}
	.contents_header_home .main_imgs{
		width: 100%;
		max-width: 1200rem;
	}

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

	.contents_header_home{
		gap: 24rem;
		padding: 16rem 8rem 8rem;
	}
	.contents_header_home::before{
		width: 160rem;
		height: 34rem;
	}
	.contents_header_home .main_imgs{
		width: 100%;
	}

}

/* Concept */

.section_home_concept{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.section_home_concept::before{
	position: absolute;
	display: block;
	content: "";
	background-color: rgba(var(--COL-White-rgb), 0.25);
	box-shadow: 1px 1px 50px 0 rgba(var(--COL-Black-rgb), 0.05);
	backdrop-filter: blur(4px);
	z-index: 2;
}
.section_home_concept > *{
	position: relative;
	z-index: 10;
}
.section_home_concept > .section_label{
	align-items: flex-start;
}
.section_home_concept > .img{
	position: absolute;
	z-index: 1;
}
.section_home_concept > .section_body > .copy{
	font-family: var(--FNT-serif);
	line-height: 1.75;
	letter-spacing: 0.05em;
}

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

	.section_home_concept{
		gap: 32rem;
		width: 100%;
		max-width: 1000rem;
		margin: 0 auto;
		padding: 200rem 420rem 208rem 120rem;
	}
	.section_home_concept::before{
		top: 120rem;
		left: 0;
		width: 700rem;
		height: calc(100% - 264rem);
	}
	.section_home_concept > .img.img01{
		top: 43rem;
		left: -220rem;
		width: 308rem;
	}
	.section_home_concept > .img.img02{
		top: 200rem;
		right: -220rem;
		width: 472rem;
	}
	.section_home_concept > .img.img03{
		top: 686rem;
		right: -240rem;
		width: 266rem;
	}
	.section_home_concept > .section_body > .copy{
		padding-bottom: 1.25em;
		font-size: 36rem;
	}

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

	.section_home_concept{
		gap: 16rem;
		padding: 184rem 40rem 384rem;
	}
	.section_home_concept::before{
		top: 120rem;
		left: 8rem;
		width: calc(100% - 16rem);
		height: calc(100% - 440rem);
	}
	.section_home_concept > .img.img01{
		top: 33rem;
		left: 0;
		width: 164rem;
	}
	.section_home_concept > .img.img02{
		bottom: 98rem;
		right: 0rem;
		width: 252rem;
	}
	.section_home_concept > .img.img03{
		bottom: 19rem;
		left: 48rem;
		width: 136rem;
	}
	.section_home_concept > .section_body > .copy{
		font-size: 24rem;
	}

}

/* Info */

.section_home_items{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.section_home_items .section_item{
	position: relative;
	display: flex;
	flex-direction: column;
}
.section_home_items .section_item > .txt{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	background-color: rgba(var(--COL-White-rgb), 0.25);
	box-shadow: 1px 1px 50px 0 rgba(var(--COL-Black-rgb), 0.05);
	backdrop-filter: blur(4px);
	z-index: 10;
}
.section_home_items .section_item > .txt .section_label{
	align-items: flex-start;
}
.section_home_items .section_item > .txt .section_label > .label_en{
	padding-left: 0.2em;
}
.section_home_items .section_item > .img{
	position: absolute;
	z-index: 1;
}
.section_home_items .section_item > .items{
	width: 100%;
}
.section_home_items .section_item > .items > ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}
.section_home_items .section_item > .items > ul > li{
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.section_home_items .section_item > .items > ul > li > .label{
	padding: 0 4rem;
	font-family: var(--FNT-serif);
	text-align: left;
}

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

	.section_home_items{
		gap: 144rem;
		padding: 120rem 0;
	}
	.section_home_items .section_item{
		align-items: flex-start;
		gap: 64rem;
		width: 100%;
		max-width: 1200rem;
	}
	.section_home_items .section_item:nth-of-type(2n){
		align-items: flex-end;
	}
	.section_home_items .section_item > .txt{
		width: 720rem;
		min-height: 480rem;
		padding: 80rem 120rem;
		gap: 40rem;
	}
	.section_home_items .section_item > .txt .section_label .label_en{
		font-size: 24rem;
	}
	.section_home_items .section_item > .img{
		top: -24rem;
		right: -120rem;
		width: 640rem;
	}
	.section_home_items .section_item:nth-of-type(2n) > .img{
		right: auto;
		left: -120rem;
	}
	.section_home_items .section_item > .items > ul{
		gap: 40rem 20rem;
	}
	.section_home_items .section_item > .items > ul > li{
		gap: 12rem;
		width: 224rem;
	}
	.section_home_items .section_item > .items > ul > li > .label{
		font-size: 15rem;
		line-height: 1.5;
	}

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

	.section_home_items{
		gap: 40rem;
		padding: 64rem 0;
	}
	.section_home_items .section_item{
		align-items: flex-start;
		gap: 32rem;
		width: 100%;
		padding-top: 220rem;
		padding-bottom: 40rem;
	}
	.section_home_items .section_item:nth-of-type(2n){
		align-items: flex-end;
	}
	.section_home_items .section_item > .txt{
		width: calc(100% - 16rem);
		padding: 64rem 32rem 40rem;
		gap: 24rem;
	}
	.section_home_items .section_item > .txt .section_label .label_en{
		font-size: 16rem;
	}
	.section_home_items .section_item > .txt .section_label .label{
		font-size: 22rem;
		letter-spacing: 0.05em;
	}
	.section_home_items .section_item > .img{
		top: 0;
		right: 0;
		width: 320rem;
	}
	.section_home_items .section_item:nth-of-type(2n) > .img{
		right: auto;
		left: 0;
	}
	.section_home_items .section_item > .items > ul{
		gap: 16rem 12rem;
	}
	.section_home_items .section_item > .items > ul > li{
		gap: 8rem;
		width: 160rem;
	}
	.section_home_items .section_item > .items > ul > li > .label{
		font-size: 12rem;
		list-style: 1.3;
	}

}

/* Items */


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



/* Company */

.section_home_company{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: 50% 50% no-repeat;
	background-size: cover;
}
.section_home_company::before{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: block;
	content: "";
	background-color: rgba(var(--COL-White-rgb), 0.5);
	box-shadow: 1px 1px 50px 0 rgba(var(--COL-Black-rgb), 0.05);
	backdrop-filter: blur(6px);
	z-index: 1;
}
.section_home_company > *{
	position: relative;
	z-index: 10;
}
@media screen and (min-width: 768px) {

	.section_home_company{
		gap: 40rem;
		padding: 144rem 0 136rem;
		background-image: url(../../img/cielserein/bg_section_company_pc.jpg);
	}
	.section_home_company::before{
		width: 800rem;
		height: calc(100% - 160rem);
	}

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

	.section_home_company{
		gap: 32rem;
		padding: 128rem 48rem;
		background-image: url(../../img/cielserein/bg_section_company_sp.jpg);
	}
	.section_home_company::before{
		width: 343rem;
		height: calc(100% - 128rem);
	}

}



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


/******************************************************
仮アップ用
******************************************************/

.pre > section,
.pre > .section_label,
.pre > .section_body
{
	height: 0px;
	font-size: 0%;
	line-height: 0%;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	padding: 0;
	margin: 0;
}

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

	.section_home_news2{
		width: 100%;
		height: 410rem;
		background: var(--COL-White) url(../../img/cielserein/section_news_pc.jpg) 50% 0 no-repeat;
		background-size: auto 100%;
	}

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

	.section_home_news2{
		width: 100%;
		height: 511rem;
		background: url(../../img/cielserein/section_news_sp.jpg) 50% 0 no-repeat;
		background-size: auto 100%;
	}

}




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