@charset "utf-8";
body{
	font-size:16px;
	line-height: 1.7;
	font-weight: 500;
	color:#404040;
	font-family: "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

a{
	color:#404040;
}

.font__mPlus{
	font-family: "M PLUS 1p", sans-serif;
	font-weight: 800;
	font-style: normal;
}

@media (min-width: 751px) {
	.pchidden{ display: none!important; }
}
@media (max-width: 750px) {
	body{
		overflow-x:hidden;
		font-size:11px;
	}
	img{
		width:100%;
		height: auto;
	}
	.sphidden{ display: none!important; }
}

/*********************************************
	header
*********************************************/
:root{
	--head-heihgt:65px;
}
header{
	width: 100%;
	height: var(--head-heihgt);
	background: #FFF;
	position: relative;
	z-index: 10;
}
#headerInner{
	width: 100%;
	height: var(--head-heihgt);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#headerInner h1{
	margin-left: 5%;
}
#headerInner h1 a{
	display: block;
	font-size: 0;
}

#headerInner #headMenu{
	padding-right:3%;
}
#headerInner #headMenu ul{
	display: flex;
}
#headerInner #headMenu li{
	margin:0 20px;
}
#headerInner #headMenu li a{
	font-size:16px;
	line-height: 1;
	color: #6f6c6c;
}
@media (min-width: 751px) {
	#spMEnu{ display: none; }
	#headerInner{
		background: rgba(255,255,255,.8);
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 99;
	}
	#headerInner #headMenu li a:hover{
		background-image: linear-gradient(to right in oklab, rgb(253, 30, 186), rgb(255, 235, 0));
		background-clip: text;
		-webkit-text-fill-color: #0000;
	}
	#headerInner #headMenu li:nth-child(2) a:hover{
		background-image:linear-gradient(to right in oklab, rgb(137, 232, 43), rgb(167, 37, 252));
	}
	#headerInner #headMenu li:nth-child(3) a:hover{
		background-image: linear-gradient(to right in oklab, rgb(137, 232, 43), rgb(41, 235, 254));
	}
	#headerInner #headMenu li:nth-child(4) a:hover{
		background-image: linear-gradient(to right in oklab, rgb(13, 68, 251), rgb(255, 235, 0));
	}
	#headerInner #headMenu li:nth-child(5) a:hover{
		background-image: linear-gradient(to right in oklab, rgb(255, 35, 0), rgb(167, 37, 252));
	}
}
@media (max-width: 750px) {
	:root{
		--head-heihgt:45px;
	}
	header{
		height: 45px;
		background: #FFF;
		position: relative;
	}
	header #headerInner{
		width: 100%;
		height: 45px;
		position: fixed;
		top:0;
		left:0;
		z-index: 99;
		background: #FFF;
	}
	header h1 a{
		width:118px;
		height: 10px;
		top:18px;
		left:7%;
	}
	header #spMenu{
		position: fixed;
		top:0;
		right:0;
		width:45px;
		height: 45px;
		cursor: pointer;
	}
	header #spMenu span{
		position: absolute;
		top:21px;
		left:11px;
		width:24px;
		height: 2.5px;
		background:#000000;
		transition: all 0.5s cubic-bezier(0.78, 0.07, 0, 1);
	}
	header #spMenu span:before,
	header #spMenu span:after{
		content:"";
		display:block;
		position: absolute;
		left:0;
		width:24px;
		height: 2.5px;
		background:#000000;
		transform: rotate(0deg);
		transition: all 0.5s cubic-bezier(0.78, 0.07, 0, 1);
	}
	header #spMenu span:before{
		top:-8px;
	}
	header #spMenu span:after{
		bottom:-8px;
	}
	header .active #spMenu span{
		height:0;
	}
	header .active #spMenu span:before{
		left: -2px;
		top: 2px;
		transform: rotate(45deg);
		width: 32px;
		height: 2px;
	}
	header .active #spMenu span:after{
		left: -2px;
		bottom: -4px;
		transform: rotate(-45deg);
		width: 32px;
		height: 2px;
	}
	
	
	header #headMenu nav{
		position: fixed;
		top:45px;
		left:100%;
		z-index: 99;
		width:100%;
		height:calc( 100vh - 45px );
		background-color:rgba(255,255,255,0.95);
		transition: all 0.5s cubic-bezier(0.78, 0.07, 0, 1);
	}
	
	header #headerInner.active #headMenu nav{
		left:0;
	}
	#headerInner #headMenu ul{
		display: block;
		text-align: center;
		padding:0 10px;
	}
	header #headMenu li{
		display: block;
		margin:0;
		border-bottom:1px #6f6c6c solid;
	}
	header #headMenu li:first-child{
		border-top:1px #6f6c6c solid;
	}
	header #headMenu li a{
		display: block;
		width:100%;
		padding:20px 0;
		font-size:20px;
	}
}

/*********************************************
	under page
*********************************************/
#page__content{
	padding:150px 0 0;
}
#page__content .page__title{
	text-align: center;
	font-size: 72px;
	line-height: 1.3;
	margin-bottom: 60px;
}
#page__content .title__bottom{
	text-align: center;
	font-size: 18px;
}
@media (min-width: 751px) {
	/*#page__content .title__bottom{
		line-height: 1.3;
	}*/
}
@media (max-width: 750px) {
	#page__content{
		padding:18.66vw 0 0;
	}
	#page__content .page__title{
		font-size: 9.6vw;
		text-align: left;
		display: table;
		margin: 0 auto 13.33vw;
	}
	#page__content .title__bottom{
		font-size: 4.266vw;
		padding: 0 9.2vw;
	}
}

/*********************************************
	animation
*********************************************/
.fadeIn{
    opacity : 0;
    transform : translate(0, 100px);
    transition : all 800ms;
}
.fadeIn.scrollIn {
    opacity : 1;
    transform : translate(0, 0);
}

.fadeIn.fade_right{
    transform : translate(100px, 0);
}
.fadeIn.fade_left{
    transform : translate(-100px, 0);
}
.fadeIn.fade_right.scrollIn,
.fadeIn.fade_left.scrollIn{
    transform : translate(0, 0);
}


.fadeIn.fade_block{
	overflow: hidden;
    opacity : 0;
    transform : translate(0, 0);
	display: inline-block;
	color: transparent;
	transition: all 0.5s cubic-bezier(0.35, -0.38, 0.39, 1);
}
.grid-item.fadeIn.fade_block{
	display: block;
}
.fadeIn.fade_block::after{
	content: "";
	display: inline-block;
	width: 0%;
	height: 100%;
	position: absolute;
	top: 0;
	right: 100%;
    opacity : 1;
	background: #232323;
}
.fadeIn.fade_block.scrollIn{
	color: #404040;
    opacity : 1;
}
.fadeIn.fade_block.scrollIn::after{
    opacity : 1;
	right: 0%;
	animation: fadeBLOCK 0.6s cubic-bezier(0.35, -0.38, 0.39, 1) forwards;
}
@keyframes fadeBLOCK {
  0% {
    width: 0%;
	right: 100%;
  }
  30% {
    width: 100%;
	right: 0%;
  }
  100% {
    width: 0%;
  }
}
@media (max-width: 750px) {

}

/*********************************************
	footer
*********************************************/
footer{
	background: #e7e2e2;
	text-align: center;
	padding: 140px 0;
}
footer h3{
	font-size: 24px;
	margin: 50px 0;
}
footer .btn{
	margin-bottom: 40px;
}
footer .btn a{
	max-width: 280px;
	background: #404040;
	text-align: center;
	color: #FFF;
	font-size: 18px;
	line-height: 1;
	padding: 10px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}
footer .btn span::after{
	content: "";
	display: inline-block;
	width: 12px;
	height: 10px;
	background: url(../images/arrow.png) no-repeat;
	margin-left: 15px;
}

#foot_bottom{
	padding-top: 170px;
}
#foot_bottom dd{
	margin-top: 10px;
	font-size: 12px;
	color: #999898;
}
@media (min-width: 751px) {
	footer .btn span::after{
		transition: all 0.6s ease;
	}
	footer .btn a:hover span::after{
        transform: translateX(10px);
	}
}
@media (max-width: 750px) {
	footer{
		padding: 18.66vw 0 20vw;
	}
	footer h3{
		font-size: 4.8vw;
		margin: 0 0 6.4vw;
	}
	footer .foot__text{
		font-size: 3.2vw;
		line-height: 2;
		margin: 0 0 7.33vw;
	}
	footer .btn{
		margin-bottom: 5.33vw
	}
	footer .btn a{
		width: 65%;
		font-size: 4.8vw;
		padding: 12px 0 10px;
	}
	footer .btn span::after{
        width: 9px;
        height: 7px;
        margin-left: 8px;
        margin-top: 0;
        background-size: cover;
		transform: translateY(-3px);
	}

	#foot_bottom{
		padding-top: 16vw;
	}
	#foot_bottom dt{
		padding: 0 30%;
	}
	#foot_bottom dd{
		margin-top: 3.33vw;
		font-size: 2.66vw;
	}
}

/*********************************************
	movieModal
*********************************************/
#movieModal{
    position:fixed;
    inset:0;
    display:none;
    z-index:9999;
}

#movieModal.active{
    display:block;
}

.modal_bg{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.8);
}

.modal_content{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:90%;
    max-width:900px;
    aspect-ratio:16 / 9;
}
.vertical .modal_content{
	width: min(90vw, 420px);
    aspect-ratio: 9 / 16;
}

.modal_content iframe{
    width:100%;
    height:100%;
    border:none;
}

.modal_close{
    position:absolute;
    right:-15px;
    top:-40px;
    color:#fff;
    font-size:40px;
    cursor:pointer;
}