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

/* loading

/*-----------------------*/
/* Loading背景画面設定　*/
/* #splash {
	position: fixed;
	z-index: 999;
	width: 100%;
	height: calc(var(--vh, 1vh) * 100);
	height: 100vh;
	height: var(--height-100vh);

	background-image: url(../../images/home/splide/pc/home-main-visual.jpg);
	background-position: center;
	background-size: cover;

	display: flex;
	justify-content: center;
	align-items: center;
} */
/* 背景画像の紺色フィルター */
/* #splash::after {
	content: '';
	background: rgba(26, 13, 124, 0.7);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
} */
/* Loadingバー・％数値 */
/* #splash_text {
	z-index: 999;
	max-width: 40%;
	width: 400px;
	color: #fff;

	font-family: 'Rationale';
	font-weight: 400;
	font-style: normal;
} */

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

/* ヘッダー_particles

/*-----------------------*/
#particles-js {
	position: absolute;
	z-index: 1; /*描画を一番下に*/
	width: 100%;
	height: 100%;
	background-color: transparent; /*背景色*/
}
#lower-hero #particles-js {
	z-index: 0; /*描画を一番下に*/

	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); */
}

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

/* ヘッダー

/*-----------------------*/
:root {
	--header-height: calc(80rem / 16);
	--header-height-is-change: calc(60rem / 16);
}
@media (max-width: 959px) {
	:root {
		--header-height: calc(64rem / 16);
		--header-height-is-change: calc(64rem / 16);
	}
}
@media (max-width: 559px) {
	:root {
		--header-height: calc(56rem / 16);
		--header-height-is-change: calc(56rem / 16);
	}
}
#header {
	width: 100%;
	height: var(--header-height);
	background-color: var(--c-white);

	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;

	transition: height 0.5s linear, background-color 0.3s linear;
}
#header__inner {
	width: 100%;
	height: 100%;
	padding-left: var(--mp-lr-reg);

	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
/*----------------*/
/* main-visual */
#mainImg {
	writing-mode: horizontal-tb; /* 横書きにする */
	width: 100%;
	height: calc(var(--vh, 1vh) * 100);
	height: 100vh;
	height: var(--height-100vh);
	min-height: 640px;

	position: relative;
}
.home-main-visual picture {
	width: 100%;
	height: 100%;
}
.home-main-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0% 20%;
	pointer-events: none;
}
/*----------------*/
/* キャッチコピー */
.catch-copy {
	white-space: nowrap;
	writing-mode: vertical-lr;

	font-size: var(--txt-2xl);
	font-weight: 700;
	color: var(--c-main);

	z-index: 2;

	text-shadow: 0 0 4px var(--c-white),
	0 0 8px var(--c-white),
	0 0 8px var(--c-white),
	0 0 8px var(--c-white);
}
.splide__slide:first-of-type .catch-copy{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}
.splide__slide:nth-of-type(2) .catch-copy{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}
.splide__slide:nth-of-type(3) .catch-copy{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}
.splide__slide:last-of-type .catch-copy {
	position: absolute;
	left: calc(100% - 19em + min(4vw, calc(40rem/16)));
	top: 30%;
	transform: none;
}
/* サブキャッチ */
.catch-sub__wrapper{
	position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    max-width: 100%;
    height: 100%;

	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
.catch-sub{
	text-align: justify;
	font-size: var(--txt-reg);
	width: calc(730rem/16);
	max-width: 100%;
	padding: 2em;
	background-color: rgba(255, 255, 255, 0.75);
	box-sizing: border-box;
	z-index: 1;
}
.catch-sub__heading{
	font-weight: 700;
	color: var(--c-main-dull);

	display: flex;
	align-items: center;
	gap: 0.6em;
	padding-bottom: 0.5em;
}
/* サブキャッチ線 */
.catch-sub__heading::after{
	content: "";

	flex: 1;
	background-color: var(--c-gray-light);
	height: 1px;
}
/* タイピング表示 */
.TextTyping {
	writing-mode: horizontal-tb;
	visibility: hidden;
}
.TextTyping span {
	display: inline-block;
	visibility: hidden;
	opacity: 0;
}
.TextTyping span:last-of-type::after {
	content: '｜';
	animation: typinganime 0.8s ease-in-out infinite;
}
@keyframes typinganime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
/*----------------*/
/* air reserve */
.air-rsv__wrapper{
	position: absolute;
	top: 0;
	left: 0;

	width: calc(600rem/16);
	max-width: 100%;
}
.air-rsv__wrapper > iframe{
	width: 100%;
}

/*----------------*/
/* ロゴ */
#headerLogo {
	width: 100%;
	max-width: calc(240rem/16);
}
#headerLogo a {
	width: 100%;

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

	transition: opacity 0.2s ease-in-out;
}
#headerLogo a img {
	width: 100%;
}
/* hover */
#headerLogo a.link-hover {
	opacity: 0.7;
}
/*----------------*/
/* ナビゲーション */
#nav__wrapper {
	width: calc(100% - calc(180rem/16));
	height: 100%;
}
#nav__inner {
	width: 100%;
	max-width: calc(900rem / 16);
	height: 100%;
	margin-left: auto;

	display: flex;
	align-items: center;

	position: relative;
}
#nav__inner > li {
	width: calc(100% / 5);
	height: 100%;

	position: relative;
}
/* メニュー仕切りの縦線 */
#nav__inner > li:first-of-type::before
{
	content: "";

	background-color: var(--c-gray-light);
	width: 1px;
	height: 60%;
	
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#nav__inner > li:nth-of-type(2)::before,
#nav__inner > li:nth-of-type(3)::before,
#nav__inner > li:nth-of-type(4)::before,
#nav__inner > li:nth-of-type(5)::before
{
	content: "";

	background-color: var(--c-gray-light);
	width: 1px;
	height: 60%;
	
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
#nav__inner > li > a {
	width: 100%;
	height: 100%;

	font-size: var(--txt-reg);
	color: var(--c-bk);

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

	position: relative;

	transition: color 0.2s ease-in-out;
}
/* コンタクトボタン */
#nav__inner > .contact-square {
	position: absolute;
	top: var(--header-height);
	right: 0;

	width: 100%;

	display: flex;
	justify-content: end;
}
#nav__inner > .contact-square > a {
	width: calc(100% / 5);
	height: 100%;

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

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

	transition:
	color 0.2s ease-in-out,
	background-color 0.2s ease-in-out;
}
/* 受付時間 */
#nav__inner > .contact-square .header-tel {
	color: var(--c-bk);
	margin-right: 1em;

	display: flex;
	flex-direction: column;
	justify-content: center;
}
#nav__inner > .contact-square .header-tel p {
	letter-spacing: 0.03em;
	font-size: var(--txt-reg);
	line-height: 1;
}
/* 電話番号 */
#nav__inner > .contact-square > .header-tel > address a.header-tel_number {
	text-decoration: none;
	font-size: var(--txt-xl);
	font-weight: 700;
	font-style: normal;
	font-family: var(--baseFonts);
	color: var(--c-main);
}
#nav__inner > .contact-square > .header-tel > address a.header-tel_number > span {
	font-size: var(--txt-md);
}
/* カレントのスタイル */
#nav__inner > li > a::before {
	content: '';
	display: block;
	width: 100%;
	height: 4px;
	background-color: var(--c-main-light);
	position: absolute;
	bottom: 0;
	left: 0;

	transform: scaleX(0);
	transform-origin: bottom right;
	transition: transform 0.2s ease-in-out;
}
/* hover */
@media(any-hover:hover){
	#nav__inner > li > a:hover,
	#nav__inner > li > a:focus{
		color: var(--c-main-light);
	}
	#nav__inner > li > a.link-hover::before, 
	#nav__inner > li > a:focus::before{
		transform: scaleX(1);
		transform-origin: bottom left;
	}
	#nav__inner > .contact-square > a.link-hover::before,
	#nav__inner > .contact-square > a:focus::before {
		display: none;
	}
	#nav__inner > .contact-square > a.link-hover,
	#nav__inner > .contact-square > a:focus {
		background-color: var(--c-main-light);
		color: var(--c-white);
	}
}
/* カレント */
body#index #nav__inner li.js-current-target--index > a,
body.js-current-index #nav__inner li.js-current-target--index > a,
body.js-current-service #nav__inner li.js-current-target--service > a,
body.js-current-company #nav__inner li.js-current-target--company > a,
body.js-current-recruit #nav__inner li.js-current-target--recruit > a,
body.js-current-support #nav__inner li.js-current-target--support > a {
	color: var(--c-main-light);
}
body#index #nav__inner li.js-current-target--index > a::before,
body.js-current-index #nav__inner li.js-current-target--index > a::before,
body.js-current-service #nav__inner li.js-current-target--service > a::before,
body.js-current-company #nav__inner li.js-current-target--company > a::before,
body.js-current-recruit #nav__inner li.js-current-target--recruit > a::before,
body.js-current-support #nav__inner li.js-current-target--support > a::before {
	transform: scaleX(1);
	transition: none;
}
body.js-current-contact #nav__inner li.js-current-target--contact > a {
	background-color: var(--c-main-light);
	color: var(--c-white);
}
/*----------------*/
/* バーガーボタン */
#nav-open-button,
#nav-close-button {
	display: none;
}
/*------------------------------*/
/* ナビアニメーション */
/*-----------------------------*/
#header.is-change {
	height: var(--header-height-is-change);
	background-color: rgba(255, 255, 255, 0.95);

	animation-duration: 0.6s;
	animation-timing-function: var(--easeInOutSine);
	animation-fill-mode: forwards;
	z-index: 10;
}
#header.is-change[data-is-change='true'] {
	animation-name: header-shrink;
}
#header.is-change[data-is-change='false'] {
	animation-name: header-expand;
}
@keyframes header-shrink {
	from {
		height: var(--header-height);
	}
	to {
		height: var(--header-height-is-change);
	}
}
@keyframes header-expand {
	from {
		height: var(--header-height-is-change);
	}
	to {
		height: var(--header-height);
	}
}
/* 受付時間＆お問い合わせ */
/* PC専用（960px以上）に限定 */
@media (min-width: 960px) {
#header.is-change #nav__inner > .contact-square{
	position: absolute;
	right: 0;
	top: var(--header-height-is-change);

	animation-duration: 0.6s;
	animation-timing-function: var(--easeInOutSine);
	animation-fill-mode: forwards;
	z-index: 10;
}
#header.is-change[data-is-change="true"] #nav__inner > .contact-square{
	animation-name: header-tel-shrink;
}
#header.is-change[data-is-change="false"] #nav__inner > .contact-square{
	animation-name: header-tel-expand;
}
@keyframes header-tel-shrink{
	from{
		height: var(--header-height);
		top: var(--header-height);
	}
	to{
		height: var(--header-height-is-change);
		top: var(--header-height-is-change);
	}
}
@keyframes header-tel-expand{
	from{
		height: var(--header-height-is-change);
		top: var(--header-height-is-change);
	}
	to{
		height: var(--header-height);
		top: var(--header-height);
	}
}
}



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

/* Tablet iPad Pro */

/*------------------------------*/
@media (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: portrait),
       (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation: landscape) {
		.home-main-visual img{
			object-position: 50% 0%;
		}
		#nav__inner{
			justify-content: flex-end;
		}
		#nav__inner li {
			width: calc(100% / 6);
		}
	}



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

/* Tablet 959px */

/*------------------------------*/
@media (max-width: 959px) {
	/* メイン画像ポジション */
	.home-main-visual img {
		object-position: 0% 100%;
	}
	#splash {
		/* background */
		background-image: url(../../images/home/splide/tab/home-main-visual__tab.jpg);
	}

	/* main-visual & キャッチコピー */
	.catch-copy {
		text-align: justify;
		font-size: var(--txt-xl);

		top: 50%;
		transform: translateY(-50%);
	}
	/* main-visual & キャッチコピー */
	.catch-copy {
		top: calc(50% - 7em);
		left: 50%;
		transform: translateY(-50%);
		transform: translateX(-50%);
	}
	/* タイピング表示 */
	.TextTyping {
		writing-mode: vertical-rl;
	}
	/* サブキャッチ */
	.catch-sub__wrapper{
		justify-content: center;
		align-items: flex-end;
	}
	.splide__slide:first-of-type .catch-copy{
		line-height: var(--lh-lg);
		writing-mode: horizontal-tb;

		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.splide__slide:nth-of-type(2) .catch-copy{
		line-height: var(--lh-lg);
		writing-mode: horizontal-tb;

		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.splide__slide:nth-of-type(3) .catch-copy{
		line-height: var(--lh-lg);
		writing-mode: horizontal-tb;

		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}
	.splide__slide:last-of-type .catch-copy {
		line-height: var(--lh-md);

		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

	/*----------------*/
	/* バーガーボタン */
	#nav-open-button {
		width: calc(64rem/16);
		height: 100%;
		background-color: var(--c-main);
		color: var(--c-white);

		opacity: 1;
		transform: none;

		transition: opacity 0.6s var(--easeInOutCirc), transform 0.4s var(--easeInOutCirc);

		display: flex;
		align-items: center;
		justify-content: center;
	}
	#nav-close-button {
		width: calc(80rem/16);
		height: calc(80rem/16);
		background-color: var(--c-gray-light);
		clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

		margin-left: auto;
		margin-right: calc(10rem / 16);
		margin-top: calc(10rem / 16);

		color: white;
		text-align: center;

		display: flex;
		align-items: center;
		justify-content: center;
	}
	#nav-close-button .burger-close-line-top {
		opacity: 0;
		transform: rotate(45deg);
	}
	#nav-close-button .burger-close-line-bottom {
		opacity: 0;
		transform: rotate(-45deg);
	}
	#nav-close-button .burger-close-line-top,
	#nav-close-button .burger-close-line-bottom {
		transform-origin: center center;
		transition: transform 0.2s var(--easeInSine), opacity 0.2s var(--easeInSine);
		transition-delay: 0.3s;
	}
	/*----------------*/
	/* ナビゲーション */
	#nav__wrapper,
	#nav__inner {
		width: calc(100% - 14vw);
		max-width: calc(480rem / 16);
		height: 100vh;
		min-height: 100vh;
		min-height: var(--height-100vh);
		background-color: var(--c-gray-pale);

		position: fixed;
		top: 0;
		right: -100%;
	}
	#nav__wrapper {
		overflow: hidden;
		transition: right 0.4s var(--easeInOutCirc);
	}
	#nav__inner {
		padding: calc(100rem/16) 0;

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

		z-index: -1;
		overflow-y: auto;
		transition: right 0.4s var(--easeInOutCirc);
	}
	#nav__inner li {
		flex-shrink: 0;
		width: 100%;
		height: calc(120rem/16);
	}
	#nav__inner li:last-of-type {
		margin-top: 0;
		padding: 0 min(4vw, calc(40rem/16));
	}
	/* メニュー仕切りの縦線解除 */
	#nav__inner > li:first-of-type::before
	{
		content: "";

		background-color: var(--c-gray-light);
		width: 80%;
		height: 1px;
		
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	#nav__inner > li:nth-of-type(2)::before,
	#nav__inner > li:nth-of-type(3)::before,
	#nav__inner > li:nth-of-type(4)::before,
	#nav__inner > li:nth-of-type(5)::before
	{
		content: "";

		background-color: var(--c-gray-light);
		width: 80%;
		height: 1px;
		
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	/* カレント */
	#nav__inner > li > a::before {
		width: 4px;
		height: 100%;
		transform: scaleY(0);
		transform-origin: left bottom;
	}
	/* コンタクトボタン */
	#nav__inner > .contact-square {
		height: auto;
		position: static;
		width: 100%;

		display: flex;
		flex-direction: column-reverse;
		align-items: center;
	}
	#nav__inner > .contact-square > a {
		display: inline-block;
		padding: 3em 0;
		width: 100%;
		max-width: 100%;

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

		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* 受付時間 */
	#nav__inner > .contact-square .header-tel {
		color: var(--c-bk);
		margin-right: 0;
		margin-top: calc(24rem / 16);
	}
	#nav__inner > .contact-square .header-tel p {
		letter-spacing: 0.13em;
	}
	/* 電話番号 */
	#nav__inner > .contact-square > .header-tel > address a.header-tel_number {
		font-size: var(--txt-2xl);
	}
	/* hover */
	@media(any-hover:hover){
		#nav__inner > li > a.link-hover::before,
		#nav__inner > li > a.focus::before {
			transform: scaleY(1);
			transform-origin: left top;
		}
	}
	/* カレント */
	body#index #nav__inner li.js-current-target--index > a,
	body.js-current-index #nav__inner li.js-current-target--index > a,
	body.js-current-service #nav__inner li.js-current-target--service > a,
	body.js-current-company #nav__inner li.js-current-target--company > a,
	body.js-current-recruit #nav__inner li.js-current-target--recruit > a,
	body.js-current-support #nav__inner li.js-current-target--support > a
	{
		color: var(--c-main-light);
	}
	body#index #nav__inner li.js-current-target--index > a::before,
	body.js-current-index #nav__inner li.js-current-target--index > a::before,
	body.js-current-service #nav__inner li.js-current-target--service > a::before,
	body.js-current-company #nav__inner li.js-current-target--company > a::before,
	body.js-current-recruit #nav__inner li.js-current-target--recruit > a::before,
	body.js-current-support #nav__inner li.js-current-target--support > a::before
	{
		transform: scaleY(1);
		transition: none;
	}
	/* カバー */
	#nav__cover {
		width: 100%;
		height: 100vh;
		min-height: 100vh;
		min-height: var(--height-100vh);
		background-color: rgba(25, 25, 25, 0.5);

		position: fixed;
		top: 0;
		left: 0;
		z-index: -9;
		opacity: 0;
		cursor: pointer;
		display: none;
	}
	/*------------------*/
	/* オープン */
	/*------------------*/
	/* オープン/クローズアニメーション */
	/* オープン */
	body.open #nav-open-button {
		opacity: 0;
		transform: translateX(calc(64rem/16));
	}
	#nav__wrapper.is-open,
	#nav__wrapper.is-open #nav__inner {
		right: 0;
	}
	#nav__wrapper.is-open #nav__cover {
		display: block;
		opacity: 1;
	}
	#nav__wrapper.is-open #nav-close-button .burger-close-line-top,
	#nav__wrapper.is-open #nav-close-button .burger-close-line-bottom {
		opacity: 1;
		transform: none;
	}
} /*Tablet END*/



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

/* Smartphone 559px */

/*------------------------------*/
@media (max-width: 559px) {
	/* メイン画像ポジション */
	.home-main-visual img {
		object-position: center;
	}
	#splash {
		/* background */
		background-image: url(../../images/home/splide/sm/home-main-visual__sm.jpg);
	}
	/* main-visual & キャッチコピー */
	.catch-copy {
		top: calc(50% - 9em);
		left: 50%;
		transform: translateY(-50%);
		transform: translateX(-50%);
	}
	/* サブキャッチ */
	.catch-sub__wrapper{
		position: static;
		top: unset;
		left: unset;

		display: block;
	}
	.catch-sub{
		padding-top: 2em;
		padding-bottom: 2em;
		padding-left: 1em;
		padding-right: 1em;
	}
	/* タイピング表示 */
	.TextTyping {
		writing-mode: vertical-rl;
		font-size: var(--txt-lg);
	}
	/*----------------*/
	/* ロゴ */
	#headerLogo {
		max-width: calc(180rem/16);
	}
	/*----------------*/
	/* ナビゲーション */
	#nav__inner {
		padding: calc(80rem/16) 0;
	}
	#nav__inner li {
		height: calc(80rem/16);
	}
	/* オープンボタン */
	#nav-close-button {
		width: calc(64rem/16);
		height: calc(64rem/16);

		margin-right: calc(10rem / 16);
		margin-top: calc(10rem / 16);
	}
	/* コンタクトボタン */
	#nav__inner > .contact-square > a {
		padding: 2.5em 0;
	}
	/* 受付時間 */
	#nav__inner > .contact-square .header-tel {
		margin-top: calc(16rem / 16);
	}
	#nav__inner > .contact-square .header-tel p {
		letter-spacing: 0.08em;
		line-height: 0.5;
	}
} /*Smartphone END*/

/* Smartphone 縦向きだけ縦書き */
@media (max-width: 1023px) and (orientation: portrait) {
  .TextTyping {
    writing-mode: vertical-rl;
  }
}
/* Smartphone 横向きは横書き */
@media (max-width: 1023px) and (orientation: landscape) {
	.catch-copy {
        top: calc(50% - 5em);
    }
	.TextTyping { 
		writing-mode: horizontal-tb;
		white-space: nowrap;
	}
}