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

/* PARTS */

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

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

	display: flex;
	align-items: center;
	justify-content: center;
}
/*------------------------*/
/* 下層ページのヒーロー画像 */
.contact-mainImg__wrapper{
	background-image: url(../../images/contact/hero-contact.webp);
    background-position: center;
}
.terms-mainImg__wrapper{
    background-image: url(../../images/term/hero-terms.webp);
    background-position: center;
}
/*-----------------------*/
/* SVG
/*-----------------------*/
/* ロゴ */
.logo{
	fill: currentColor;
	/* 親要素のcolorを継承する//safariでfillのtransitionが効かない対策 */
}
/* burger */
.burger-icon{
	fill:none;
	stroke: currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-miterlimit:10;
}
.burger-close-icon{
	fill:none;
	stroke: currentColor;
	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: inline-block;
}
.headline-jp{
	font-size: var(--txt-2xl);
	font-weight: 800;
	line-height: var(--lh-sm);
	color: var(--c-main);
}
.headline__wrapper.-white .headline-jp{
	color: var(--c-white);
}
.headline__wrapper.-white .headline-en:after{
	background-color: var(--c-white);
}
.headline-en{
	font-size: var(--txt-lg);
	font-family: "Oswald", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	color: var(--c-gold-light);

	display: flex;
	align-items: center;
	gap: 0.3em;
}
.headline-en::after{
	content: "";
	display: block;
	
	margin-top: 0.3em;
	background-color: var(--c-gray-light);
	height: 1px;
	width: 100%;
}
.start-up-font{
	font-size: var(--txt-3xl);
	width: 5em;
	height: auto;
	max-width: 100%;
	vertical-align: baseline;
	color: var(--c-main);
	fill: currentColor;
}
/* 中央見出し */
.headline__wrapper.-vertical{
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 0.3em;
}
.headline__wrapper.-vertical .headline-en{
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 0;
}
.headline__wrapper.-vertical .headline-jp{
	text-align: center;
}
.headline__wrapper.-vertical .headline-en:after{
	width: 80px;
}
/*-----------------------*/
/*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 .2s ease-in-out,
		text-decoration .2s ease-in-out
	;
}
.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: 1px solid var(--c-main);
	border-radius: 6px;

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

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

	transition:
	color .2s var(--easeInSine),
	background-color .2s  var(--easeInSine)
	;

	position: relative;
}
a.button.-contact{
	background-color: var(--c-white);
	border: solid 1px var(--c-gray-light);
	color: var(--c-bk);
}
a.button.-contact svg{
	fill: var(--c-bk);
}
/* 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(--easeOutSine),
	transform .3s var(--easeOutSine);
}
/* hover */
@media(any-hover:hover){
	/*hover設定*/
	a.button:hover,					
	a.button:focus{
		color: var(--c-main);
		background-color: var(--c-white);
	}
	a.button.-contact:hover,					
	a.button.-contact:focus{
		color: var(--c-white);
		background-color: var(--c-gray-light);
	}
	a.button:hover svg,
	a.button:focus svg{
		fill: var(--c-main);
	}
	a.button.-contact:hover svg,					
	a.button.-contact:focus svg{
		fill: var(--c-white);
	}
}

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

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
	/* ヘディング */
	.headline::before{
		bottom: 0.12em;
		left: 0.08em;
	}
}/*Tablet END*/



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

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
	/* ヘディング */
	.headline-jp{
		font-size: var(--txt-xl);
	}
	.headline::before{
		bottom: 0.22em;
		left: 0.13em;
	}
}/*Smartphone END*/