@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;
}
/*-----------------------*/
/* サービス */
.service-mainImg__wrapper{
    background-image: url(../../images/service/service-hero.jpg);
    background-position: center;
}
/*-----------------------*/
/* 会社情報 */
.company-mainImg__wrapper{
	background-image: url(../../images/company/company-hero.jpg);
    background-position: center;
}
/*-----------------------*/
/* 採用情報 */
.recruit-mainImg__wrapper{
	background-image: url(../../images/recruit/recruit-hero.jpg);
    background-position: top 100% center;
}
/*-----------------------*/
/* 採用情報 */
.support-mainImg__wrapper{
	background-image: url(../../images/support/support-hero.jpg);
    background-position: center;
}
/*-----------------------*/
/* お問い合わせ */
.contact-mainImg__wrapper{
	background-image: url(../../images/contact/contact-hero.jpg);
    background-position: center;
}
/*-----------------------*/
/* プライバシーポリシー */
.terms-mainImg__wrapper{
	background-image: url(../../images/terms/terms-hero.jpg);
    background-position: top 50% 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--ie);
	width: var(--txt-md);
}
/*-----------------------*/
/* 画像
/*-----------------------*/
/* photo 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{
	font-family: "Montserrat";
	font-size: var(--txt-2xl);
	font-weight: 400;
	color: var(--c-main);
	line-height: 1.2;
	text-align: center;

	position: relative;
	isolation: isolate;
}
.headline__inner{
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;

	position: relative;
	z-index: 1;
}
.headline__english{
	color: var(--c-gray);
	display: inline-block;
	white-space: nowrap;

	position: relative;
	z-index: 1;
}
.headline__english .txt-sm-adjust{
	font-size: var(--txt-lg);
	padding-left: 0.2em;
	padding-right: 0.2em;
}
.headline__japanese{
	display: inline-block;
	text-align: left;
	width: fit-content;
	line-height: 1.2;

	font-size: var(--txt-reg);
	font-family: var(--baseFonts);
	font-weight: 400;
	color: var(--c-main-strong);
	background-color: var(--c-white);
	padding-left: 0.5em;

	position: relative;
	z-index: 1;
}
.headline__japanese.-gray_bg{
	background-color: var(--c-gray-pale);
}
/* ひし形 */
.headline-diamond{
	fill: rgba(71, 144, 189, 0.2);
	width: 76px;
	height: 76px;

	position: absolute;
	top: calc(50% - 38px);
	left: -24px;
	transform: scale(1);

	z-index: -1;
}
/* 線 */
.headline-border{
	position: absolute;
	bottom: -0.3em;
	left: 0;

	content: "";
	display: block;
	width: calc(100% - 1em);
	height: 1px;
	background-color: var(--c-gray-light);
}
/*flow-headline*/
.flow-headline{
	font-size: var(--txt-lg);
	font-weight: 700;
	margin-left: calc(56px + 0.5em);

	position: relative;
}
.flow-headline span{
	position: absolute;
	top: 50%;
	left: calc(-56px - 0.5em);
	transform: translateY(-50%);
	margin-right: 0.5em;

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

	background-color: var(--c-main-light);
	width: 56px;
	height: 56px;
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

	font-family: var(--baseFonts);
	color: var(--c-white);
}
/*下層ページ　headline*/
.headline.-lower-heading .headline__japanese{
	background-color: transparent;
}
.headline.-lower-heading .headline__inner .headline-border{
	width: calc(100% - calc(4*var(--txt-reg)) - 0.2em);

	background-color: var(--c-gray-light);
}
/*----------------------------*/
/* ヒーローイメージタイトルの線
/*----------------------------*/
/* お問い合わせ */
.headline.-lower-heading .headline__inner .headline-border.-contact-border{
	width: calc(100% - calc(6*var(--txt-reg)) - 0.2em);
}
/* プライバシーポリシー */
.headline.-lower-heading .headline__inner .headline-border.-terms-border{
	width: calc(100% - calc(10*var(--txt-reg)) - 0.2em);
}
/*----------------------------*/
/* ▲ヒーローイメージタイトルの線▲
/*----------------------------*/
/* テキストリンク */
.txtLink{
	color: var(--c-link);
	text-decoration: underline;
	transition:
		color .2s var(--easeInSine),
		text-decoration .2s var(--easeInSine)
	;
}
.txtLink.txtLink-hover{
	color: var(--c-link--hover);
}
/* お問い合わせボタンインナー */
.tel-contact__inner{
    margin-top: calc(40rem/16);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
}
.tel-contact__inner .button{
    margin-top: 0;
}
.tel-contact{
    font-weight: 700;
}
.tel-contact__inner div address a{
	text-decoration: none;
	font-weight: 700;
	font-style: normal;
	font-family: var(--baseFonts);
	color: var(--c-main);
}
.tel-contact__number{
    font-size: var(--txt-xl);
    line-height: 1;
}
/* 料金について */
.attention.-price{
    margin-top: 1em;
    padding: 0.5em;
    text-align: center;
	font-size: var(--txt-sm);
    width: calc(300rem/16);
    max-width: var(--fx-width);
    margin-left: auto;
    margin-right: auto;
    border: solid 1px var(--c-gray-pale);
}
.attention.-price > span{
    font-weight: 700;
    color: var(--c-main-strong);
}
.txt strong{
	font-weight: 700;
    color: var(--c-main-strong);
}
/*------------------*/
/* button */
a.button{
	margin-top: var(--mp-tb-reg);
	width: calc(240rem/16);
	max-width: 100%;
	height: calc(48rem/16);
	background-color: var(--c-main);
	border-radius: 4px;

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

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

	position: relative;

	transition:
	color .2s var(--easeInSine),
	background-color .2s  var(--easeInSine)
	;
}
/* arrow */
a.button svg{
	width: 16px;
	height: auto;
	fill: var(--c-white);

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

	transition: right .2s var(--easeInSine);
}
/*hover設定*/
a.button.button-hover{
	color: var(--c-white);
	background-color: var(--c-main-light);
}
a.button.button-hover svg{
	right: 14px;
}


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

/* Tablet 959px */

/*------------------------------*/
@media(max-width: 959px){
	/*---------*/
	/* button */
	a.button{
		margin-top: calc(40rem/16);
		margin-left: auto;
		margin-right: auto;
	}
	/* お問い合わせボタンインナー */
	.tel-contact__inner{
		gap: calc(20rem/16);
	}
	.tel-contact__inner a.button{
		width: 240px;
		margin: 0;
	}
}/*Tablet END*/



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

/* Smartphone 559px */

/*------------------------------*/
@media(max-width:559px){
	/* ======▼ヒーロー画像▼====== */
	/*-----------------------*/
	/* 会社情報 */
	.company-mainImg__wrapper{
		background-image: url(../../images/company/company-h__sm.jpg);
	}
	/*headline*/
	/* ひし形 */
	.headline-diamond{
		top: calc(50% - 30px);
		left: -18px;

		width: 60px;
		height: 60px;
	}
	.home-flow-txt__inner{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.flow-headline{
		display: inline-block;
		margin-top: calc(24rem/16);
		margin-left: auto;
		margin-right: auto;
	}
	.flow-headline span{
		left: calc(-32px - 0.5em);

		width: 32px;
		height: 32px;
	}
	/* お問い合わせボタンインナー */
	.tel-contact__inner{
		margin-top: calc(24rem/16);
		gap: calc(20rem/16);
		display: flex;
		flex-direction: column;
	}
	.tel-contact__inner a.button{
		margin: 0;
		min-width: 240px;
		max-width: 100%;
	}
}/*Smartphone END*/