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

/* Component */

/*========================*/
/*========================
SVG */
/* arrow */
.arrow {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

/*========================
hoerスタイル */
/* タッチデバイスでタップ時にhover.jsによりis-hoverクラスを付与するオブジェクトから、タップ時のハイライトを非表示にする */
@media (any-hover: none) {
	.is-hover,
	.tap-highlight-white.is-hover {
		cursor: pointer;

		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}
}

/* ====================
/* ------------------
テキスト */
.txt {
	font-size: var(--txt-reg);
	font-weight: normal;
	letter-spacing: .06em;
	line-height: 1.88;
	text-align: justify;
}
/* ------------------
リード */
/* .lead {
	font-size: var(--txt-reg);
	font-weight: normal;
	letter-spacing: .06em;
	line-height: 1.75;
	text-align: justify;
}
.lead--center {
	text-align: center;
} */
/* ------------------
見出し */
.headline__container {
	width: var(--flexible-width);
	margin-right: auto;
	margin-left: auto;
}
.headline__alphabet {
	font-family: var(--alphabet);
	font-size: var(--txt-7xl);
	font-weight: 900;
	letter-spacing: normal;
	line-height: 1.25;
	color: var(--color-main);
}
.headline__jp {
	font-size: var(--txt-lg);
	font-weight: 700;
	line-height: 1.1;
	color: var(--color-bk-strong);

	margin-top: -0.3em;
}
.headline--color-reverse * {
	color: var(--color-white);
}
.headline--center {
	text-align: center;
}
@media (max-width: 959px) {
	.headline__jp {
		margin-top: -0.1em;
	}
}
@media (max-width: 559px) {
	.headline__jp {
		font-size: var(--txt-md);
		margin-top: 0.025em;
	}
}
/* ------------------
小見出し */
.subhead {
	font-size: var(--txt-md);
	font-weight: 700;
	line-height: 1.5;
	color: var(--color-main);
}
.subhead::after {
	content: "";
	display: block;
	width: 3em;
	height: 2px;
	background-color: var(--color-main);
	margin-top: 1em;
}
/* ------------------
テキストリンク */
.txt--link {
	color: var(--color-link);
	text-decoration: underline;
}
@media (any-hover: hover) {
	.txt--link {
		-webkit-transition: color .2s ease-in-out;
		transition: color .2s ease-in-out;
	}
	.txt--link:hover,
	.txt--link:focus {
		color: var(--color-link--hover);
	}
}


/* ====================
ボタン */
.button__container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
}
.button {
	font-size: var(--txt-md);
	line-height: 1;
	color: var(--color-white);
	text-align: center;

	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 0 var(--button-gup);

	width: min(
		100%,
		calc(330rem / 16)
	);
	max-width: 100%;

	padding-top: calc(var(--txt-md) - 2px);
	padding-right: var(--button-gup);
	padding-bottom: calc(var(--txt-md) - 2px);
	padding-left: calc(var(--button-gup) + var(--button-gup) + var(--button-arrow-size));

	border: 2px solid var(--color-main);
	border-radius: calc( calc( var(--txt-md) + calc(var(--txt-md) * 2) ) / 2 );
	background-color: var(--color-main);

	--button-arrow-size: calc(var(--txt-md) / 1.5);
	--button-gup: min(2.5vw, 1em);
}
.button svg {
	width: var(--button-arrow-size);
	height: auto;
	stroke-width: 2;
}
@media(any-hover: hover) {
	.button {
		-webkit-transition: color .2s var(--easeInSine),
		background-color .2s  var(--easeInSine),
		border-color .2s  var(--easeInOutCirc);
		transition: color .2s var(--easeInSine),
		background-color .2s  var(--easeInSine),
		border-color .2s  var(--easeInOutCirc);
	}
	.button svg {
		-webkit-transition: stroke .2s var(--easeInOutCirc),
		-webkit-transform .2s var(--easeInOutCirc);
		transition: stroke .2s var(--easeInOutCirc),
		-webkit-transform .2s var(--easeInOutCirc);
		transition: stroke .2s var(--easeInOutCirc),
		transform .2s var(--easeInOutCirc);
		transition: stroke .2s var(--easeInOutCirc),
		transform .2s var(--easeInOutCirc),
		-webkit-transform .2s var(--easeInOutCirc);
	}
	.button:hover,
	.button:focus {
		color: var(--color-main);
		background-color: transparent;
	}
	.button:hover svg,
	.button:focus svg {
		-webkit-transform: translateX(4px);
		        transform: translateX(4px);
	}
}

/* ====================
メインイメージ
css->option->slider->slider-hero.css参照 */


/* ====================
下層イメージ */
#lower-hero {
	display: grid;

	height: min(
		540px,
		50vw
	);
	min-height: calc(330rem / 16);

	background-color: var(--color-sub-soft);
	background-repeat: no-repeat;
	background-size: cover;

	place-items: center;
}
#works #lower-hero {
	background-image: url(../../images/works/works_main.jpg);
	background-position: center top;
}
#recruit #lower-hero {
	background-image: url(../../images/recruit/recruit_main.jpg);
	background-position: 70% bottom;
}
#company #lower-hero {
	background-image: url(../../images/company/company_main.jpg);
	background-position: 75% bottom;
}
#privacy #lower-hero {
	background-color: var(--color-main);
}
.page-name {
	color: var(--color-white);
	text-shadow: 0px 0px 20px rgba(52, 172, 216, 0.7);
	text-align: center;

	padding: 2em var(--gutter-var-2xl);
	border: 2px solid var(--color-sub-soft);

	margin-top: var(--header-height);
	margin-right: var(--gutter-var-xl);
	margin-left: var(--gutter-var-xl);
}
.page-name__alphabet {
	font-family: var(--alphabet);
	font-size: var(--txt-5xl);
	font-weight: 900;
	line-height: 1.25;
}
.page-name__jp {
	font-size: var(--txt-lg);
	font-weight: 700;
	line-height: 1.25;
}
@media (max-width: 959px) {
	.page-name {
		margin-top: calc(var(--header-height) + 20px);
	}
}