@charset "UTF-8";
/* =====================================================================
   コーポレートサイト 画面の骨組み(/common/css/site-layout.css)
   全体の骨組み・左部メニュー・スマートフォン用上部バー・言語切替・パンくず・メインビジュアル・
   同じカテゴリのページへのリンク・IS Holdings Group Site・フッター・ページトップへ。
   site.css(変数・要素の既定)の後に読み込む(layout :: headAssets)。
   ===================================================================== */

/* ---------------------------------------------------------------------
   全体の骨組み(左部メニュー + 右カラム。横並びは Bootstrap の d-md-flex。テンプレートで指定)
   --------------------------------------------------------------------- */
@media (min-width: 768px) {
	.container-wrap {
		position: relative;
		min-height: 100vh;
	}

	.main-top {
		flex: 1 1 0;
		min-width: 0;
	}
}

/* ---------------------------------------------------------------------
   左部メニュー
   --------------------------------------------------------------------- */
.sidenavi {
	color: #fff;
}

@media (min-width: 768px) {
	.sidenavi {
		flex: 0 0 15vw;
		width: 15vw;
		min-width: 150px;
		background: var(--site-navy);
		position: relative;
	}

	.sidenavi .global-navi {
		position: fixed !important;
		top: 0;
		left: 0;
		width: 15vw;
		min-width: 150px;
		height: 100vh;
		/* 縦スクロールバーは出さない(項目の間隔は画面の高さに合わせて vh で縮む。極端に低い画面ではスクロールはできる) */
		overflow-y: auto;
		scrollbar-width: none;
	}

	.sidenavi .global-navi::-webkit-scrollbar {
		display: none;
	}
}

.sidenavi__offcanvas {
	--bs-offcanvas-width: 260px;
	--bs-offcanvas-bg: var(--site-navy);
	--bs-offcanvas-color: #fff;
	--bs-offcanvas-padding-x: 0;
	--bs-offcanvas-padding-y: 0;
}

.sidenavi .offcanvas-body {
	display: block;
}

.sidenavi-logo {
	margin: 0 0 10px;
	padding: 3vh .5vw;
	background: #fff;
	text-align: center;
}

.sidenavi-logo img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 767.98px) {
	.sidenavi-logo {
		padding: 12px 16px;
	}
}

/* 項目の間隔は 5項目が画面の高さに収まるよう 7vh(4項目の頃は 10vh) */
.global-navi__list {
	width: 85%;
	margin: 7vh auto 0;
	padding: 0;
	list-style: none;
}

.global-navi__list li {
	margin-bottom: 7vh;
	text-align: center;
}

.global-navi__list a {
	position: relative;
	display: block;
	color: var(--site-nav-sub);
	font-size: .875rem;
	line-height: 1.43;
	text-decoration: none;
	transition: color .3s;
}

.global-navi__list a span {
	display: block;
	color: #fff;
	font-family: var(--site-font-en);
	font-size: 1.5vw;
	font-weight: 400;
	line-height: 1.43;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .8);
}

.global-navi__list a::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 50%;
	width: 0;
	height: 1px;
	background-color: rgba(255, 255, 255, .8);
	transform: translateX(-50%);
	transition: width .3s;
}

.global-navi__list a:hover,
.global-navi__list a:focus {
	color: var(--site-nav-sub);
}

.global-navi__list a:hover::after,
.global-navi__list a:focus-visible::after {
	width: 100%;
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.global-navi__list a span {
		font-size: 1.8vw;
	}
}

@media (max-width: 767.98px) {
	.global-navi__list {
		margin-top: 48px;
	}

	.global-navi__list li {
		margin-bottom: 48px;
	}

	.global-navi__list a span {
		font-size: 19px;
	}
}

.offcanvas-backdrop {
	background-color: #fff;
}

.offcanvas-backdrop.show {
	opacity: .8;
}

/* スマートフォン用上部バー(md未満。横並び・右の余白は Bootstrap の d-flex・pe-3。テンプレートで指定) */
.sp-header {
	height: 60px;
	background: var(--site-navy);
}

.sp-header__toggle {
	width: 72px;
	height: 60px;
	padding: 0 12px;
	border: 0;
	background: transparent;
}

.sp-header__icon,
.sp-header__icon::before,
.sp-header__icon::after {
	display: block;
	width: 48px;
	height: 2px;
	background: #fff;
}

.sp-header__icon {
	position: relative;
}

.sp-header__icon::before,
.sp-header__icon::after {
	content: "";
	position: absolute;
	left: 0;
	top: -10px;
}

.sp-header__icon::after {
	top: 10px;
}

/* ---------------------------------------------------------------------
   言語切替(グローバル人材採用の当初のデザイン)
   md以上: メインビジュアル直下の右寄せ(.utility) / md未満: スマートフォン用上部バー内(.lang-switch--dark)
   --------------------------------------------------------------------- */
/* md未満は言語切替を上部バーに出すため、ここは余白だけ(メインビジュアルと本文の間)。
   横並び・表示の切替は Bootstrap の d-flex・d-none d-md-flex(テンプレートで指定) */
.utility {
	margin: 4vw auto 0;
}

@media (min-width: 768px) {
	.utility {
		margin: 1vw auto;
	}
}

.lang-switch__label {
	color: var(--site-text);
	white-space: nowrap;
}

.lang-switch__list {
	border: 1px solid var(--site-navy);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}

.lang-switch__item {
	display: block;
	min-width: 5.25rem;
	padding: .1875rem .875rem;
	color: var(--site-navy);
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}

.lang-switch__list li + li .lang-switch__item {
	border-left: 1px solid var(--site-navy);
}

.lang-switch__item:hover,
.lang-switch__item:focus {
	background: #e6ebf5;
	color: var(--site-navy);
}

.lang-switch__item.is-active {
	background: var(--site-navy);
	color: #fff;
	pointer-events: none;
}

/* スマートフォン用上部バー(紺の背景)内 */
.lang-switch--dark .lang-switch__label {
	display: none;
}

.lang-switch--dark .lang-switch__list {
	border-color: #fff;
	background: transparent;
}

.lang-switch--dark .lang-switch__item {
	min-width: 3.75rem;
	padding: .25rem .625rem;
	color: #fff;
}

.lang-switch--dark .lang-switch__list li + li .lang-switch__item {
	border-left-color: #fff;
}

.lang-switch--dark .lang-switch__item:hover,
.lang-switch--dark .lang-switch__item:focus {
	background: rgba(255, 255, 255, .15);
	color: #fff;
}

.lang-switch--dark .lang-switch__item.is-active {
	background: #fff;
	color: var(--site-navy);
}

/* ---------------------------------------------------------------------
   パンくず(md以上で表示)
   --------------------------------------------------------------------- */
.breadcrumb-wrap .breadcrumb {
	--bs-breadcrumb-divider: "＞";
	--bs-breadcrumb-divider-color: var(--site-link-gray);
	--bs-breadcrumb-item-active-color: var(--site-navy);
	--bs-breadcrumb-item-padding-x: .3125rem;
	display: none;
	margin: 0;
	padding: 0 0 1vw;
	background: none;
	font-size: .875rem;
}

.breadcrumb-wrap .breadcrumb-item.active {
	font-weight: 700;
}

.breadcrumb-wrap a {
	color: var(--site-link-gray);
	text-decoration: none;
}

.breadcrumb-wrap a:hover,
.breadcrumb-wrap a:focus {
	color: var(--site-link-gray);
	text-decoration: underline;
}

@media (min-width: 768px) {
	.breadcrumb-wrap .breadcrumb {
		display: flex;
	}
}

/* ---------------------------------------------------------------------
   メインビジュアル(背景画像はカテゴリごと。md未満は縮小版の画像)
   --------------------------------------------------------------------- */
/* 画像はカテゴリごとのクラス(main_visual--*。SitePage.MainVisual)で --mv-image(md未満)・--mv-image-md(md以上)に指定する */
.main_visual {
	position: relative;
	width: 100%;
	height: 50vh;
	background-color: #c4daf0;
	background-image: var(--mv-image);
	background-position: center center;
	background-size: cover;
}

.main_visual_detail {
	height: 30vh;
}

.main_visual--top {
	--mv-image: url("/index/img/main_visual@0,75x.webp");
	--mv-image-md: url("/index/img/main_visual.webp");
	height: 70vh;
}

.main_visual--corporate {
	--mv-image: url("/corporate/img/main_visual@0,75x.webp");
	--mv-image-md: url("/corporate/img/main_visual.webp");
}

.main_visual--group {
	--mv-image: url("/group/img/main_visual@0,75x.webp");
	--mv-image-md: url("/group/img/main_visual.webp");
}

.main_visual--ir {
	--mv-image: url("/ir/img/main_visual@0,75x.webp");
	--mv-image-md: url("/ir/img/main_visual.webp");
}

.main_visual--recruit {
	--mv-image: url("/recruit/img/main_visual@0,75x.webp");
	--mv-image-md: url("/recruit/img/main_visual.webp");
}

.main_visual--basic {
	--mv-image: url("/img/main_visual@0,75x.webp");
	--mv-image-md: url("/img/main_visual.webp");
}

.big-headline {
	position: absolute;
	top: 30%;
	right: 0;
	width: 80vw;
	padding: 4vw 4vw 4vw 0;
	background: rgba(var(--site-navy-rgb), .5);
	color: #fff;
	text-align: right;
}

.main_visual_detail .big-headline {
	top: 10%;
}

.big-headline .hero-ttl {
	margin: 0;
	color: #fff;
	font-family: var(--site-font);
	font-size: 6.6vmin;
	font-weight: 400;
	letter-spacing: 5px;
	line-height: 1.1;
	text-shadow: 0 4px 0 rgba(0, 0, 0, .2);
}

html:lang(en) .big-headline .hero-ttl {
	font-family: var(--site-font-en);
	letter-spacing: .1em;
}

.big-headline .hero-sub {
	margin: 0;
	font-family: var(--site-font-en);
	font-size: 5.5vmin;
	font-weight: 200;
	line-height: 1.43;
	white-space: nowrap;
	text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}

/* トップのロゴ(IS Holdings) */
.big-headline .hero-logo {
	margin: 0;
	color: #fff;
	font-family: var(--site-font-en);
	font-size: 15vmin;
	font-weight: 300;
	line-height: 1.1;
	text-shadow: 0 4px 0 rgba(0, 0, 0, .2);
}

@media (min-width: 768px) {
	.main_visual,
	.main_visual--top {
		height: 35vw;
	}

	.main_visual_detail {
		height: 15vw;
	}

	.main_visual {
		background-image: var(--mv-image-md);
	}

	.big-headline {
		top: 10vw;
		width: 55vw;
		padding: 2vw 3vw 2vw 0;
		white-space: nowrap;
	}

	.main_visual_detail .big-headline {
		top: 1.5vw;
	}

	.big-headline .hero-ttl {
		font-size: 4vw;
	}

	.main_visual_detail .big-headline .hero-ttl {
		font-size: 3.5vw;
	}

	.big-headline .hero-sub {
		font-size: 3vw;
	}

	.main_visual_detail .big-headline .hero-sub {
		font-size: 2vw;
	}

	.big-headline .hero-logo {
		font-size: 8vw;
	}
}

@media (min-width: 1200px) {
	.big-headline {
		width: 45vw;
	}

	.big-headline .hero-ttl {
		font-size: 3.4vw;
	}

	.big-headline .hero-sub {
		font-size: 2vw;
	}

	.big-headline .hero-logo {
		font-size: 5.2vw;
	}
}
/* 同じカテゴリのページへのリンク(下層ページの本文下) */
.hierarchy-link {
	clear: both;
	padding: 2em 0;
}

.hierarchy-link-list {
	padding-left: 0;
	border-top: 1px dotted var(--site-border-light);
	list-style: none;
}

.hierarchy-link-list li {
	border-bottom: 1px dotted var(--site-border-light);
}

.hierarchy-link-list a {
	display: block;
	padding: .5em 1em;
	text-decoration: none;
}

@media (min-width: 768px) {
	.hierarchy-link {
		text-align: center;
	}

	.hierarchy-link-list {
		border-top: 0;
	}

	.hierarchy-link-list li {
		display: inline-block;
		border-bottom: 0;
	}

	.hierarchy-link-list a {
		display: inline-block;
	}

	.hierarchy-link-list li::after {
		content: "|";
	}

	.hierarchy-link-list li:last-child::after {
		content: none;
	}
}

/* ---------------------------------------------------------------------
   IS Holdings Group Site(各ページ下部のグループ会社バナー)
   --------------------------------------------------------------------- */
/* 列は Bootstrap の row row-cols-3 row-cols-md-4(テンプレートで指定) */
.fbset img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--site-border);
}
/* ---------------------------------------------------------------------
   フッター
   --------------------------------------------------------------------- */
.wrap-foot-link {
	margin-bottom: 2vw;
}

.foot-link {
	margin: 0 0 10px;
	padding: 0;
	border-top: 1px solid var(--site-border);
	list-style: none;
}

.foot-link li {
	border-bottom: 1px solid var(--site-border);
}

.foot-link a {
	display: block;
	padding: 2vw 3vw;
}

.foot-link a,
.foot-link-group a {
	color: var(--site-text-dark);
	text-decoration: none;
}

.foot-link a:hover,
.foot-link a:focus,
.foot-link-group a:hover,
.foot-link-group a:focus {
	color: var(--site-navy);
	text-decoration: underline;
}

.foot-link-group {
	width: 90vw;
	margin: 0 auto 2vw;
}

.foot-link-group dt {
	font-weight: 400;
}

.foot-link-group dt::after {
	content: " : ";
}

.copyright {
	height: 50px;
	background: var(--site-navy);
	color: #fff;
	line-height: 50px;
	text-align: center;
}

@media (min-width: 768px) {
	.wrap-foot-link {
		margin-bottom: 50px;
	}

	/* 横並びは Bootstrap の d-md-flex 等(テンプレートで指定) */
	.foot-link {
		border: 0;
	}

	.foot-link li {
		margin-right: .5em;
		border: 0;
	}

	.foot-link li::after {
		content: " │ ";
	}

	.foot-link li:last-child::after {
		content: none;
	}

	.foot-link a {
		display: inline;
		padding: 0;
	}

	.foot-link-group {
		width: auto;
	}

	.foot-link-group dt {
		margin-right: 10px;
	}

	.foot-link-group dd {
		padding-left: .625rem;
	}
}

@media (max-width: 767.98px) {
	.copyright {
		height: auto;
		padding: 14px 12px 70px;
		line-height: 1.5;
	}
}

/* ページトップへ(右下固定・半透明。スクロールすると表示) */
.pagetop {
	margin: 0;
}

.btn-pagetop {
	position: fixed;
	right: 2vw;
	bottom: 10px;
	z-index: 200;
	width: 40px;
	height: 40px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s, visibility .3s;
}

.btn-pagetop img {
	display: block;
	width: 100%;
	height: auto;
}

.btn-pagetop.is-show {
	opacity: .5;
	visibility: visible;
}

.btn-pagetop:hover,
.btn-pagetop:focus {
	opacity: .8;
}