@charset "UTF-8";
/*-----------------------*/

/* PARTS */

/*-----------------------*/
/* コンテナ */
/* ======▼ヒーロー画像▼====== */
#lower-hero{
	padding: 0 15vw;
	width: 100%;
	height: 25vw;	
	min-height: calc(240rem/16);
	max-height: calc(400rem/16);
	background-repeat: no-repeat;
	background-size: cover;

	margin-top: var(--header-height);

	display: flex;
	align-items: center;
	justify-content: center;
}
/*------------------------*/
/* 下層ページのヒーロー画像 */
.terms-mainImg__wrapper{
    background-image: url(../../images/terms/factory_terms-hero.jpg);
    background-position: center;
	background-size: cover;

	position: relative;
}
.terms-mainImg__wrapper::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 78, 161, 0.8);
	position: absolute;
	top: 0;
	left: 0;
}
/* burger */
.burger-icon{
	fill: var(--c-white);
	stroke: var(--c-white);
	stroke-width:2;
	stroke-linecap:round;
	stroke-miterlimit:10;
}
.burger-close-icon{
	fill: var(--c-white);
	stroke: var(--c-white);
	stroke-width:2;
	stroke-linecap:round;
	stroke-miterlimit:10;
}
/* arrow */
.arrow--style{
	display: block;
	fill: currentColor;
	width: var(--txt-md);
}
/*-----------------------*/
/* 画像
/*-----------------------*/
/* aspect設定 */
.ph-asp{
	width: 100%;
	position: relative;
}
.ph-asp::before{
	content: "";
	display: block;
}
.ph-asp16-9::before{
	padding-top: 56.25%;
}
.ph-asp3-2::before{
	padding-top: 66.666%;
}
.ph-asp4-3::before{
	padding-top: 75%;
}
.ph-asp img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}
/*-----------------------*/
/* パーツ
/*-----------------------*/
/*---------------*/
/* テキスト設定 */
.txt{
	font-size: var(--txt-reg);
	line-height: var(--lh-md);
	text-align: justify;
}
/*headline*/
.headline__wrapper{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
	
	margin-bottom: var(--mp-tb-lg);
}
.headline{
	font-size: var(--txt-xl);
	font-weight: var(--bold);
	line-height: var(--lh-sm);
	color: var(--c-main);
	text-align: center;
}
.headline-en{
	font-size: var(--txt-sm);
	line-height: var(--lh-sm);
	color: var(--c-sub);

    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;

	position: relative;
}
.headline.-white{
	color: var(--c-white);
}
.headline-en.-white{
	color: var(--c-white);
}
.headline-line {
	width: 80px;
	height: 6px;
	background-color: var(--c-main-red);
	margin-top: -11px;
	margin-bottom: -13px;
}
.headline-line.-white {
	background-color: var(--c-white);
}
/* 左揃えヘディング */
.headline__wrapper.-horizontal{
	gap: 0;

	justify-content: flex-start;
	align-items: flex-start;

	padding-left: 1em;
	position: relative;
}
.headline__wrapper.-horizontal::before {
	content: "";
	display: block;
	width: 6px;
	height: 100%;
	background-color: var(--c-main-red);
	position: absolute;
	top: 0;
	left: 0;
}
.headline__wrapper.-horizontal .headline{
	margin-top: 0.3em;
	line-height: 1;
}
.headline__wrapper.-horizontal .headline-en{
	line-height: 1;
}
/*subhead*/
.subhead{
	font-size: var(--txt-md);
	font-weight: var(--bold);
	line-height: var(--lh-sm);
	color: var(--c-main);
}
/* テキストリンク */
.txtLink{
	color: var(--c-link);
	text-decoration: underline;
	transition:
		color .3s var(--easeOutCubic),
		text-decoration .3s var(--easeOutCubic)
	;
}
.txtLink.txtLink-hover{
	color: var(--c-link--hover);
}
/*---------*/
/* button */
a.button{
	width: 100%;
	max-width: calc(280rem/16);
	height: calc(48rem/16);
	background-color: var(--c-main);
	border: 2px solid var(--c-main);
	border-radius: 40px;

	color: white;
	font-size: var(--txt-reg);

	display: flex;
	align-items: center;
	justify-content: center;

	transition:
	color .3s var(--easeOutCubic),
	background-color .3s  var(--easeOutCubic)
	;

	position: relative;
}
/* arrow */
a.button svg{
	width: 16px;
	height: auto;
	fill: var(--c-white);
	z-index: 2;
	will-change: transform;

	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) translateX(0);

	transition: fill .3s var(--easeOutCubic);
}
a.button svg.file-icon{
	width: 20px;
}
/* hover */
@media(any-hover:hover){
	a.button:hover,					
	a.button:focus{
		color: var(--c-main);
		background-color: var(--c-main-pale);
	}
	a.button:hover svg,
	a.button:focus svg{
		fill: var(--c-main);
	}
}

/*-------------------------------*/

/* Tablet 1023px */

/*------------------------------*/
@media (max-width: 1023px) {
	.terms-mainImg__wrapper{
		background-position: top 100% center;
	}
}/*Tablet END*/



/*-------------------------------*/

/* Smartphone 767px */

/*------------------------------*/
@media (max-width: 767px) {
	.terms-mainImg__wrapper{
		background-position: top 100% left 38%;
	}
}/*Smartphone END*/