@charset "utf-8";



.col_w{
	color: #fff;
}




/* ---------------------------------------
* common
------------------------------------------ */

.btn.sp,.sp{
	display: none;
}

svg{
	width: 100%;
	height: 100%;
}

:root {
	--bg01: #F5F7FA;
	--bg02: #0C212C;
	--border: #EDEFF2;
}

.tac{
	text-align: center;
}


/* ---------------------------------------
* TOP
------------------------------------------ */

.mvCont{
	position: relative;
}

/* .mvbg{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}

.mvbg-list,.mvbg-listImg{
width: 100%;
height: 100%;
}

.mvbg-listImg .img{ 
position: relative;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url(../img/top/mv.png);
}

.mvbg-listImg .img::before{
content: "";
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .6);
backdrop-filter: blur(20px);
position: absolute;
left: 0;
top: 0;
} */

.mvTtl{
	width: 23.5%;
	position: absolute;
	left: 4rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
}

.video{
	width: 100%;
	padding-top: 56.65%;
	position: relative;
}


.video video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	object-position:center;
	pointer-events:none; 
}

.artswiper .swiper-wrapper,.exswiper .swiper-wrapper,.projectswiper .swiper-wrapper{
	display: flex;
	flex-wrap: wrap;
}

.swiperbtnWrap02{
	display: none!important;
}


.sec01,.sec02{
	background-color: var(--bg01);
}

.sec02{
	padding: 8rem 0;
}

.sec02Wrap{
	align-items: flex-end;
}

.sec02Ttl{
	width: 49.2%;
}

.sec02Img{
	width: 65.6%;
}

.sec02Txt{
	width: 41.17%;
}

.sec02Txt>p{
	line-height: 180%;
	font-size: clamp(12px,1.4rem,14px);
	padding-bottom: 3rem;
	font-weight: 300;
}

.sec02Txt .btn{
	margin-left: auto;
}


/* .sec03{
background-color: var(--bg01);
} */

.ttlNews{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

.news-list{
	width: 74.6%;
}

/* ---------------------------------------
* About
------------------------------------------ */

.section-about{
	padding-top: 18rem;
}

.aboutInner{
	padding-left: 11.5rem;
}

.headTtl-about h2,.aboutImg .img{
	position: sticky;
	left: 0;
	top: 6rem;
}

.aboutWrap{
	padding-top: 1.2rem;
	width: 81.5%;
}

.aboutCont{
	width: 65%;
}

.abouttab-list{
	column-gap: .8rem;
}

.abouttab-listItem{
	display: inline-block;
	width: fit-content;
	padding: .3rem 2rem;
	background-color: #fff;
	border: solid 1px var(--border);
	font-size: clamp(10px,1.2rem,14px);
	cursor: pointer;
	transition: all .3s;
}

.abouttab-listItem:hover,.abouttab-listItem.active{
	background-color: var(--bg02);
	color: #fff;
}

.aboutDetail{
	padding-top: 6rem;
	display: none;
}

.aboutDetail.show{
	display: block;
}

.aboutTtl{
	font-family: "neue-haas-grotesk-display",sans-serif;
	font-size: clamp(10px,1.4rem,16px);
	letter-spacing: normal;
	padding-left: 1.6rem;
	position: relative;
	margin-bottom: 1rem;
}

.aboutTtl::before{
	content: "";
	display: block;
	width: 0.8rem;
	height: 0.8rem;
	background-color: var(--bg02);
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.aboutPara p{
	font-size: clamp(10px,1.4rem,14px);
	line-height: 200%;
}

.cvWrap .aboutPara p{
	font-size: clamp(10px,1.2rem,14px);
}

.aboutPara p:not(:last-of-type){
	padding-bottom: 3rem;
}

.cvWrap:not(:last-of-type){
	padding-bottom: 4rem;
}

.aboutImg{
	width: 32%;
}

/* ---------------------------------------
* Art
------------------------------------------ */

.artWrap{
	position: relative;
}

.artCont{
	padding-left: 6rem;
	background-color: #fff;
	overflow: hidden;
	position: relative;
}

.artCont::before{
	content: "";
	display: block;
	width: 8rem;
	height: 100%;
	background-color: #fff;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}

.artTtl{
	background-color: #fff;
	flex: 0 0 24.6%;
	width: 24.6%;
	padding-right: 3rem;
	position: relative;
	z-index: 2;
}

.artTtl h3{
	font-size: clamp(14px,1.8rem, 18px);
}

.artDetail{
	flex: 1 1 auto;
	position: relative;
}

.work-list02{
	column-gap: unset;
	row-gap: unset;
}

.work-listItem02{
	width: 40rem;      
	flex-shrink: 0;   
}

.artDetail{
	overflow: hidden;
}

.artDetail .swiper-wrapper {
	display: flex;
}

.artDetail .swiper-slide {
	flex-shrink: 0;
}


.swiperbtnWrap{
	position: absolute;
	display: flex;
	justify-content: space-between;
}

.swiperbtnWrap03{
	width: 8rem;
	left: 5.5rem;
	bottom: 0rem;
}

.swiper-button-prev,
.swiper-button-next {
	height: 3.2rem;
	width: 3.2rem;
}

.swiper-button-prev svg ,
.swiper-button-next svg{
	display: none;
}

/* 矢印を消して画像に変更する */
.swiper-button-prev::after,
.swiper-button-next::after {
	content: "";
	background-repeat: no-repeat;
	background-size: contain;
	height: 100%;
	width: 100%;
	margin: auto;
}
/* 前に戻る矢印の画像パス */
.swiper-button-prev::after {
	background-image: url(../img/common/prev.svg);
}
/* 次に進む矢印の画像パス */
.swiper-button-next::after {
	background-image: url(../img/common/next.svg);
}

body.is-modal-open {
	overflow: hidden;
}

.artModal{
	width: 100vw;
	height: 100vh;
	min-height: 100svh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #fff;
	z-index: 100000;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: all .3s;
	/* overflow: hidden; */
}

.artModal.is-active {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.closebtn{
	z-index: 1000000;
	position: fixed;
	right: 4rem;
	top: 3rem;
	font-size: clamp(12px,1.4rem, 14px);
	letter-spacing: normal;
	padding: .4rem 2rem;
	border: solid 1px #CED3D5;
	border-radius: 100px;
	cursor: pointer;
}

.artModalWrap{
	padding: 12rem 2rem 0;
	position: relative;
	height: 100vh;
	min-height: 100svh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* iOS慣性 */
}

.artDetail-list{
	justify-content: center;
	align-items: center;
	column-gap: 2rem;
	row-gap: 2rem;
}

.artDetail-listItem{
	width: 28%;
}

.artDetailTxt{
	padding-top: 4rem;
}

.artDetailTxt h3{
	text-align: center;
	font-family: "neue-haas-grotesk-display",sans-serif;
	font-size: clamp(16px,2rem,2.4rem);
	font-weight: 300;
}


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

	/* ---------------------------------------
	* common
	------------------------------------------ */

	.btn.sp{
		display: block;
	}

	.sp{
		display: block;
	}

	.pc{
		display: none;
	}

	.bg-b{
		background-repeat: repeat-y;
		background-size: 100% auto;
	}

	/* ---------------------------------------
	* TOP
	------------------------------------------ */

	.mv{
		position: relative;
		padding: 0;
	}

	.mvbg{
		display: none;
	}

	.video{
		width: 100%;
		padding-top: 140%;
	}

	.mvTtl{
		width: 40%;
		left: 2rem;
	}


	.sec01Wrap,.sec03Wrap,.sec05Wrap{
		position: relative;
		overflow: hidden;
	}

	.artswiper .swiper-wrapper,.exswiper .swiper-wrapper,.projectswiper .swiper-wrapper{
		display: flex;
		flex-wrap: unset;
	}

	.swiperbtnWrap02{
		display: flex!important;
		left: 0;
		bottom: 1rem;
	}

	.sec02{
		padding: 6rem 0 4rem;
	}

	.sec02Wrap{
		align-items: flex-end;
	}

	.sec02Ttl{
		width: 100%;
	}

	.sec02Img{
		padding-top: 3rem;
		width: 100%;
	}

	.sec02Txt{
		width: 100%;
		padding-top: 2rem;
	}

	.sec02Txt>p{
		line-height: 180%;
		font-size: clamp(12px,1.4rem,14px);
		padding-bottom: 3rem;
	}

	.sec02Txt .btn{
		margin-left: auto;
	}


	.ttlNews{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}

	.news-list{
		width: 100%;
		padding-top: 3rem;
	}

	/* ---------------------------------------
	* About
	------------------------------------------ */

	.section-about{
		padding-top: 8rem;
	}

	.aboutInner{
		padding-left: 0;
		width: 100%;
	}

	.headTtl-about h2,.aboutImg .img{
		position: unset;
	}

	.aboutWrap{
		padding-top: 3rem;
		width: 100%;
	}

	.aboutWrap{
		display: flex;
		flex-direction: column-reverse;
	}

	.aboutCont{
		width: 100%;
	}

	.abouttab-list{
		column-gap: .8rem;
	}

	.abouttab-listItem{
		font-size: 1.2rem;
	}

	.aboutDetail{
		padding-top: 4rem;
	}

	.aboutTtl{
		font-size: 1.4rem;
	}

	.aboutPara p{
		font-size: 1.4rem;
	}

	.cvWrap .aboutPara p{
		font-size: 1.2rem;
	}

	.aboutPara p:not(:last-of-type){
		padding-bottom: 2rem;
	}

	.cvWrap:not(:last-of-type){
		padding-bottom: 3rem;
	}

	.aboutImg{
		width: 100%;
		margin-bottom: 6rem;
	}

	/* ---------------------------------------
	* Art
	------------------------------------------ */

	.section-art{
		padding-top: 6rem;
	}

	.artWrap{
		width: calc(100% - 4rem);
		margin: 0 auto;
	}

	.artCont{
		padding-left: 0;
	}

	.artCont::before{	
		display: none;
	}

	.artTtl{
		width: 100%;
		padding-right: 0;
	}

	.artTtl h3{
		font-size: 1.8rem;
	}

	.work-list02{
		padding-top: 3rem;
		column-gap: unset;
		row-gap: unset;
	}

	.work-listItem02{
		width: 100%!important;
	}

	.artDetail{
		padding-bottom: 6rem;
	}

	.swiperbtnWrap{
		width: 7.6rem;
	}

	.swiperbtnWrap03{
		left: 0rem;
		bottom: 1rem;
	}

	.swiper-button-prev,
	.swiper-button-next {
		height: 2.8rem!important;
		width: 2.8rem!important;
	}

	.artModal{
		padding: 0 0 4rem;
	}

	.closebtn{
		right: 2rem;
		top: 3rem;
		font-size: 1.2rem;
		padding: .4rem 2rem;
	}

	.artModalWrap{
		padding: 12rem 2rem 6;
	}


	.artDetail-list{
		column-gap: 2rem;
		row-gap: 2rem;
	}

	.artDetail-listItem{
		width: 100%;
	}

	.artDetailTxt{
		padding-top: 3rem;
		padding-bottom: 4rem;
	}

	.artDetailTxt h3{
		font-size: 1.6rem;
	}

}