/**************************************************
 responsive
**************************************************/
@media screen and (max-width: 767px){
	html{
		font-size: 62.5%;
		font-size: 10px;
		overflow-x: hidden;
	}

body{}

body::before{
	width: 243%;
        top: 85rem;
        height: 4%;
		left: -28rem;
}
/**************************************************
 common
**************************************************/
	p,ol,table,ol,dl{
		padding: 1.6rem 0 0 0;
		font-size: 1.6rem;
		font-weight: normal;
	}
	
	.pc{display: none;}
	.smp{display: block;}

	.mainInner,
	.infoInner,
	.contentInner{width: 100%;}

	h1{
		font-size: 1.2rem;}
	
	h1 img{
		width: 17rem;
		margin-inline-end: 0.8rem;
	}

	.re{flex-direction: column-reverse;}


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


header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: transparent;
	display: flex;
	justify-content: flex-end;
	z-index: 1000;
	
}

	header a{
		width: 17.5rem;
		font-size: 1.2rem;
		margin-inline-end: 0rem;
		margin-block-start: 2.4rem;
		padding-inline: 0rem;
		padding-block: 0.8rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	header a span{
		font-size: 3.2rem;
		padding-inline-end: 0rem;
		display: block;
		width: 100%;
		text-align: center;
	}

	header a:hover{
		color: #fff;
		background-color: var(--main-color);
	}




/**************************************************
 mainVisual
**************************************************/
	.mainVisual h2{
		width: calc(100% - 8rem);
		bottom:auto;
		top: 18rem;
		left: 2.4rem;
	}

	.mainVisual h2 a{
		border: 0.1rem solid var(--main-color);
		font-size: 1.4rem;
		width: 24rem;
		padding-block: 1.4rem;
		margin-block-start:3.2rem;
	}

	.mainVisual h2 a:hover{
		background-color: var(--main-color);
		color: #fff;
	}

	.main_day{
		bottom: 4.8rem;
		right: auto;
		left: 2.4rem;
		width: calc(100% - 2.4rem);
	}

/* .mainVisual .main_img{
	width: 100%;
	height: 100%;
	background: url(../img/main/mv.jpg)no-repeat center center;
	background-size: cover;
} */

/**************************************************
 aboutHanger
**************************************************/

	.aboutHanger{padding-block: 7rem 6.4rem;}

	.aboutHanger .contentInner{padding-inline: 2.4rem;}

	.aboutHanger::before{
		width: 50%;
		height: 102rem;
		left: auto;
		right: 0;
		bottom: 0;
	}


	.aboutHanger h2{
		font-size: 3.2rem;
		line-height: 1.4;
	}

	.about_cont{flex-direction:column-reverse;}

	.about_txt{width: 100%;margin-block-start: 2.4rem;}

	.about_txt > p{padding-block-start: 1.6rem;font-size: 1.4rem;}

	.about_txt p span{
		padding-block: 1.6rem;
		padding-inline: 1.6rem;
		margin-block-start: 1.6rem;
	}

	.about_cont > img{
		width: 100%;
	}


	.aboutHanger ul li{
		width: 100%;
		margin-block-start: 3.2rem;
	}

	.aboutHanger ul li:first-of-type{margin-block-start: 0;}


/**************************************************
 ctaHanger
**************************************************/
.ctaHanger{position: relative;z-index: 4;}

	.ctaHanger .contentInner{
		padding-block: 0rem;
		padding-inline: 2.4rem;
		flex-direction: column-reverse;
	}

	.ctaHanger::before{
		width: 100%;
		height: 46.8rem;
		top: 27.8rem;
	}

	.ctaHanger::after{
		width: 100%;
		height: 27.8rem;
	}

	.ctaHanger h2{
		font-size: 8rem;
		width: 100%;
		position: absolute;
		bottom: auto;
		top: 21.5rem;
		left: -1rem;
	}


	.cta_txt{
		width: 100%;
		padding-inline-end: 0rem;
		padding-block-start: 30rem;
	}

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

	.cta_txt p span strong{font-size: 1.6rem;}

	.cta_txt a{
		margin-block-start: 3.2rem;
		padding-block: 0.8rem;
		font-size: 1.8rem;
	}

	.cta_txt a span{
		font-size: 3.2rem;
		padding-inline-end: 0.8rem;
	}

	.cta_txt a:hover{
		background-color: #fff;
		color:var(--main-color);
	}

/**************************************************
 companyHanger
**************************************************/
.companyHanger{
	padding-block: 16rem 8rem;
}

	.companyHanger h2{
		font-size: 3.2rem;
		overflow-x: clip;
	}

	.companyHanger h2::before{
		font-size: 8rem;
		transform: translate(-50%,-90%);
	}

	.area_content{
		margin-block-start: 4rem;
		margin-inline: 2.4rem;
	}

	.companyHanger .contentInner > .area_content:not(:first-of-type){
		padding-block-start: 4rem;
		border-top: 0.1rem solid #Fff;
	}


.area_title{
	width: 50%;
	position: relative;
	font-size: 2.4rem;
	color: #fff;
	justify-content: flex-start;
	align-items: flex-end;
	font-weight: bold;
}

	.area_title::before{content: none;}

.area_title span{
	font-size: 6.4rem;
	padding-inline-start: 0.8rem;
}


	.area_block a{
		width:17rem;
		font-size: 1.4rem;
		padding-block: 1.7rem;
	}

	.area_block a:hover{
		background-color: var(--main-color);
		color: #fff;
	}

	.area_content ul{
		margin-block-start: 4rem;
		justify-content: flex-start;
	}

	.area_content ul li{
		width: 100%;
		margin-inline-end: 0rem;
		margin-block-start: 3.2rem;
	}

	.area_content ul li img{
		width: calc(100% - 9.6rem);
		margin-inline: auto;
	}

	.area_content ul li:first-of-type{margin-block-start: 0;}

	.area_content ul li:nth-of-type(3){margin-inline-end: 0;}

	.area_content ul li:nth-of-type(4),
	.area_content ul li:nth-of-type(5){margin-block-start: 3.2rem;}

	.area_content ul li h3{
		font-size: 1.6rem;
		margin-block: 0.8rem;
	}

	.area_content ul li span{
		font-size: 1.0rem;
		padding-inline: 1.8rem;
	}


/**************************************************
 infoHanger
**************************************************/
	.infoHanger{
		padding-block: 24rem 8rem;
	}

.infoHanger::before{
	content: '';
	width: 100%;
	height: 72%;
	background-color: #000;
	position: absolute;
	left: 0;
	bottom: 0;
	opacity: 0.4;
	z-index: -1;
}

	.infoHanger h2{
		font-size: 3.2rem;
	}

	.infoHanger h2::before{
		content: 'INFOR-\AMATION';
		white-space: pre;
		font-size: 8rem;
		transform: translate(-50%,-94%);
	}

	.infoHanger dl{
		width: calc(100% - 4.8rem);
		margin-inline: auto;
	}

	.infoHanger dl:first-of-type{margin-block-start: 3.2rem;}

	.infoHanger dl dt{
		width: 100%;
		text-align: left;
	}

	.infoHanger dl dd{
		width: 100%;
		margin-block-start: 0.8rem;
	}


	.infoHanger dl dd a:hover{opacity: 1;}

/**************************************************
 footer
**************************************************/
	footer{padding-block: 4.8rem 3.2rem;}

	.fot_cont_left{
		width: 100%;
		text-align: center;
	}

	.fot_cont_left a{
		font-size: 1.6rem;
		text-align: center;
	}

	.fot_cont_left a:hover{
		opacity: 1;
	}

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

	.fot_cont_right{
		width: 100%;
		text-align: center;
		margin-block-start: 3.2rem;
	}

	.fot_cont_right img{
	width:7rem;
	display: block;
	margin-inline: auto;
	margin-block-end: 1.6rem;
}

/**************************************************
 fade
**************************************************/

.about_cont,.aboutHanger ul li,.ctaHanger,.area_content ul li,.companyHanger h2,.infoHanger h2{
	opacity: 0;
	visibility: hidden;
	transition: 0.8s;
	position: relative;
	top: 6rem;
}



.about_cont.appear,.aboutHanger ul li.appear,.ctaHanger.appear,
.area_content ul li.appear,.companyHanger h2.appear,.infoHanger h2.appear{
	opacity: 1;
	visibility: visible;
	top: 0;
}

.aboutHanger ul li:nth-of-type(2).appear,
.area_content ul li:nth-of-type(2).appear,
.area_content ul li:nth-of-type(5).appear
{transition-delay: .0s;}

.aboutHanger ul li:nth-of-type(3).appear,
.area_content ul li:nth-of-type(3).appear{transition-delay: .0s;}


}