@charset "utf-8";



.col_w{
	color: #fff;
}




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

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

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

:root {
	--bg01: #F2F1F0;
	--bg02: #242424;
}

.tac{
	text-align: center;
}


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

.mv{
	position: relative;
}

.mvPrize{
	width: 25.7%;
	position: absolute;
	right: 2rem;
	bottom: 6rem;
}

.mvPrize-list{
	column-gap: 1rem;
}

.mvPrize-listItem{
	width: calc((100% - (1rem * 3)) / 4);
}

.mvImg{
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(../img/top/mv.webp);
}

.mvImg::after{
	content: "";
	display: block;
	padding-top: 56.75%;
}

.mvTxt{
	position: absolute;
	left: 8rem;
	bottom: 6rem;
}

.mvTtl p:first-of-type{
	padding-bottom: 2rem;
	font-size: clamp(16px,2.4rem,24px);
	line-height: 160%;
	letter-spacing: normal;
	font-weight: 300;
}

.mvTtl h2{
	width: 41%;
}

.mvTtl p:last-of-type{
	padding-top: 2rem;
	font-size: clamp(12px,1.8rem,18px);
	line-height: 160%;
	letter-spacing: normal;
	font-weight: 300;
}

.sec01{
	padding-right: 2rem;
}

.sec01Wrap{
	align-items: flex-end;
	position: relative;
}

.sec01Img{
	width: 54.7%;
}

.sec01Img02{
	width: 16.4%;
	position: absolute;
	right: 0;
	top: -18rem;
}

.sec01Txt{
	width: 41%;
	padding-bottom: 2rem;
}

.sec01Para p{
	font-size: clamp(10px,1.4rem,14px);
}

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

.sec02Detail{
	position: relative;
	height: 100vh;
	overflow: hidden;
	overscroll-behavior: contain;
}

.sec02Detail .sec02Cont{
	position: absolute;
	inset: 0;
	display: flex;
	backface-visibility: hidden;
	will-change: transform;
}

.sec02Img,
.sec02Img img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sec02Cont{
	background-color: #F0EFEB;
}

.sec02Cont:not(:last-of-type){
	border-bottom: solid 1px rgba(0,0,0,.1);
}

.sec02Cont:first-of-type{
	border-top: solid 1px rgba(0,0,0,.1);
}

.sec02Img,.sec02Txt{
	width: 50%;
}

.sec02Txt{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 8rem 5rem 10rem 8rem;
}

.sec02Txt>p{
	color: #A0A0A0;
	font-size: clamp(10px,1.4rem,16px);
	line-height: 160%;
	letter-spacing: normal;
}

.sec02Para p{
	padding-top: 3rem;
	font-size: clamp(10px,1.4rem,16px);
}

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

.sec02Num span{
	display: block;
	line-height: 160%;
	letter-spacing: normal;
	font-size: clamp(10px,1.4rem,14px);
}

.sec02Num span:last-of-type{
	position: relative;
	color: #A0A0A0;
	padding-left: 0.7rem;
	margin-left: 0.7rem;
}

.sec02Num span:last-of-type::before{
	content: "/";
	display: block;
	position: absolute;
	left: -.1rem;
	top: 0;
}

.sec02Other h4{
	text-align: right;
	font-size: clamp(18px,2.4rem,24px);
	line-height: 1.1;
	letter-spacing: normal;
	width: 100%;
}

.sec03{
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/top/featurebg.webp);
}

.story-listItem:not(:last-of-type){
	margin-bottom: 8rem;
}

.story-listImg{
	width: 45.8%;
}

.story-listTxt{
	width: 45.8%;
}

.story-listTxt>p span{
	font-size: clamp(10px,1.2rem,12px);
	display: block;
}

.sec04{
	background-color: #EDEBE6;
}

.cvbanner a{
	display: block;
	padding: 16rem 8rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(../img/top/bannernew.webp);
}

.onineBtn{
	width: fit-content;
	margin-top: 3rem;
	padding: 1.2rem 3rem;
	border: solid 1px #fff;
	color: #fff;
	transition: all .3s;
}

.cvbanner a:hover .onineBtn,.blogcv-listItem a:hover .onineBtn{
	background-color: #fff;;
	color: #1b1b1b;
}

.onineBtn span{
	display: block;
}

.onineBtn span:first-of-type{
	width: 14px;
	height: 14px;
	margin-right: 0.6rem;
	position: relative;
}

.onineBtn span:first-of-type svg{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.cvbanner a path{
	transition: all .3s;
}

.cvbanner a:hover path,.blogcv-listItem a:hover path{
	fill: #1b1b1b;
}

.onineBtn span:last-of-type{
	line-height: 160%;
	letter-spacing: normal;
	font-weight: 300;
	font-family: 'Montserrat','Noto Sans JP',sans-serif;
	font-size: clamp(10px,1.4rem,14px);
}

.sec04Inner{
	padding-left: 8rem;
}

.sec04Cont{
	position: relative;
	padding-bottom: 6rem;
}

/* .voice-list{
column-gap: 2rem;
} */

.voice-listItem{
	display: flex;
	padding: 2rem;
	width: 65rem;
	background-color: #F5F4F0;
}

.voice-listImg{
	width: 39.3%;
	flex: 0 0 39.3%;
}

.voice-listImg .img{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.voice-listImg .img::after{
	content: "";
	display: block;
	padding-top: 67%;
}

.voice-listTxt{
	flex: 1 1 auto;
	padding-left: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.voice-listTxt p:first-of-type{
	font-size: clamp(10px,1.2rem,12px);
	color: #AAAAAA;
}

.voice-listTxt p:last-of-type{
	font-size: clamp(10px,1.2rem,14px);
}

.swiperbtnWrap{
	width: 8rem;
	position: absolute;
	right: 2rem;
	bottom: 2rem;
	display: flex;
	justify-content: space-between;
}

.swiper-button-prev,
.swiper-button-next {
	height: 2.8rem;
	width: 2.8rem;
}
/* 矢印を消して画像に変更する */
.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/top/prev.png);
}
/* 次に進む矢印の画像パス */
.swiper-button-next::after {
	background-image: url(../img/top/next.png);
}

.sec06-listItem{
	width: calc(100% / 4);
}

.sec07ImgWrap{
	padding: 0 2rem;
	align-items: flex-end;
}

.sec07Img01{
	width: 53.7%;
}

.sec07Img02{
	width: 26.2%;
}

.sec07subTtl{
	width: 54.17%;
}

.sec07Txt{
	width: 45.83%;
}

.sec07Para p{
	font-size: clamp(10px,1.4rem,14px);
}

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

.prizeWrap{
	width: 75%;
}

.prize-listItem{
	column-gap: 3rem;
	padding-bottom: 2rem;
	margin-bottom: 2rem;
	border-bottom: solid 1px rgba(0,0,0,.1);
}

.prize-listItem:last-of-type{
	margin-bottom: 0;
}

.prize-listImg{
	width: 8.8%;
	flex: 0 0 8.8%;
}

.prize-listItem p{
	font-size: clamp(10px, 1.4rem, 14px);
	line-height: 160%;
	letter-spacing: normal;
	flex: 1 1 auto;
}

/* ---------------------------------------
* about
------------------------------------------ */

.aboutMv{
	position: relative;
}

.aboutMv .img{
	width: 100%;
	height: 100%;
}

.aboutMv .img::after{
	content: "";
	display: block;
	padding-top: 55.8%;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/about/mv.png);
}

.aboutMvTxt{
	position: absolute;
	right: 8rem;
	bottom: 12rem;
	text-align: right;
}

.aboutMvTxt p{
	font-size: clamp(12px,2rem,20px);
	line-height: 160%;
	letter-spacing: normal;
	padding-bottom: 1rem;
}

.aboutMvTxt h2{
	font-size: clamp(12px,3.6rem,40px);
	line-height: 160%;
	letter-spacing: normal;
	font-weight: 300;
}

.messWrap{
	position: relative;
	padding-bottom: 24rem;
}

.messImg01{
	position: absolute;
	right: 0;
	top: -18rem;
	width: 45.8%;
}

.messPara{
	padding-top: 1rem;
}

.messPara p{
	font-size: clamp(10px,1.4rem,14px);
	letter-spacing: normal;
}

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

.messname{
	padding-top: 2rem;
	font-size: clamp(10px,1.2rem,12px);
	line-height: 160%;
	letter-spacing: normal;
}

.messImg02{
	position: absolute;
	left: 0;
	bottom: -7rem;
	width: 16.666%;
}

.missionWrap{
	padding: 0 2rem;
}

.missionCont{
	padding: 18rem 6rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(../img/about/mission.png);
}

@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;
	}

	.mvPrize{
		width: 20%;
		right: 2rem;
		bottom: 4rem;
	}

	.mvPrize-list{
		column-gap: 0;
	}

	.mvPrize-listItem{
		width: 50%;
	}

	.mvImg{
		background-image: url(../img/top/mvsp.png);
	}

	.mvImg::after{
		padding-top: 149%;
	}

	.mvTxt{
		left: 2rem;
		bottom: 4rem;
	}

	.mvTtl p:first-of-type{
		padding-bottom: 1rem;
		font-size: 1.1rem;
	}

	.mvTtl h2{
		width: 55%;
	}

	.mvTtl p:last-of-type{
		padding-top: 1rem;
		font-size: 1rem;
	}

	.sec01{
		padding: 8rem 2rem 0;
	}

	.sec01Wrap{
		align-items: flex-end;
		position: relative;
	}

	.sec01Img{
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.sec01Img01{
		width: 65.6%;
	}

	.sec01Img02{
		width: 26.8%;
		position: static;
	}

	.sec01Txt{
		width: 100%;
		padding-top: 4rem;
		padding-bottom: 0rem;
	}

	.sec01Para p{
		font-size: 1.2rem;
	}

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

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

	.sec02Detail{
		height: auto;
		overflow: visible;
	}

	.sec02Detail .sec02Cont {
		position: static;   /* 通常の文書フロー */
		inset: auto;
		transform: none !important; /* GSAPのyPercent等を打ち消し */
		will-change: auto;
	}

	.sec02Img,.sec02Txt{
		width: 100%;
	}

	.sec02Txt{
		display: block;
		padding: 3rem 2rem 6rem;
	}

	.sec02Txt>p{
		padding-bottom: 1rem;
		font-size: 1.2rem;
	}

	.sec02Para p{
		padding-top: 2rem;
		font-size: 1.4rem;
	}

	.sec02Other{
		padding-bottom: 4rem;
	}

	.sec02Num span{
		font-size: 1.2rem;
	}

	.sec02Other h4{
		font-size: 1.8rem;
	}


	.story-listItem:not(:last-of-type){
		margin-bottom: 6rem;
	}

	.story-listImg{
		width: 100%;
	}

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

	.story-listTxt>p span{
		font-size: 1.2rem;
	}

	.cvbanner a{
		padding: 3rem 2rem 2rem;
		background-image: url(../img/top/bsp.png);
	}

	.cvbanner a .ttlWrap{
		padding-bottom: 22rem;
	}

	.onineBtn{
		width: fit-content;
		margin-top: 0;
		margin-left: auto;
	}

	.onineBtn span:last-of-type{
		font-size: 1.4rem;
	}

	.sec04Inner{
		padding: 3rem 2rem 0;
	}

	.voice-listItem{
		display: block !important;
		width: 100% !important;
	}

	.voice-listImg{
		width: 100%;
	}

	.voice-listTxt{
		padding-left: 0;
		padding-top: 2rem;
	}

	.voice-listTxt p:first-of-type{
		font-size: 1rem;
	}

	.voice-listTxt p:last-of-type{
		font-size: 1.1rem;
		padding-top: 2rem;
	}

	.voice-listTxt p:last-of-type br{
		display: none;
	}

	.swiperbtnWrap{
		width: 9rem;
		position: absolute;
		right: 0;
		left: 0;
		margin: 0 auto;
	}

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


	.sec06-listItem{
		width: calc(100% / 2);
	}

	.sec07ImgWrap{
		padding: 0 2rem;
	}

	.sec07Img01{
		width: 65.6%;
	}

	.sec07Img02{
		width: 25.6%;
	}

	.sec07subTtl{
		width: 100%;
	}

	.sec07Txt{
		width: 100%;
	}

	.sec07Para p{
		font-size: clamp(10px,1.4rem,14px);
	}

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

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

	.prize-listItem{
		column-gap: 2rem;
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}

	.prize-listItem:last-of-type{
		margin-bottom: 0;
	}

	.prize-listImg{
		width: 15%;
		flex: 0 0 15%;
	}

	.prize-listItem p{
		font-size: 1.1rem;
	}


	/* ---------------------------------------
	* about
	------------------------------------------ */


	.aboutMv .img::after{
		padding-top: 149%;
	}

	.aboutMvTxt{
		right: 2rem;
		bottom: 6rem;
	}

	.aboutMvTxt p{
		font-size: 1.2rem;
	}

	.aboutMvTxt h2{
		font-size: 2.4rem;
	}

	.section-mess{
		padding-top: 24rem;
	}

	.messWrap{
		padding-bottom: 18rem;
	}

	.messImg01{
		top: -28rem;
		width: 59.7%;
	}

	.messPara{
		padding-top: 1rem;
	}

	.messPara p{
		font-size: 1.2rem;
	}

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

	.messImg02{
		bottom: -4rem;
		width: 41.7%;
	}

	.missionWrap{
		padding: 0;
	}

	.missionCont{
		padding: 18rem 2rem 4rem;
	}

	.messname{
		padding-top: 2rem;
		font-size: 1rem;
	}

}