@charset "utf-8";
@import url('../../css/common_pad.css');
body {
	padding-top: 60px;
}
/*########################################################################################
|
|全体レイアウト
|
########################################################################################*/
.wrapper_header {
	background:rgba(255,255,255,0.8);
	box-shadow:0 0 8px rgba(0,0,0,0.3);
	display: block;
	position: fixed;
		top: 0;
	z-index: 10000;
}
/*########################################################################################
|
|スマホ対応用パーツ
|
########################################################################################*/
#gray_panel {
	background: #000;
	display: none;
	opacity: 0.6;
	position: fixed;
		top: 0;
		left: 0;
	width: 100%;
	height: 99999px;
	z-index: 9999; /* .fixedは10000 */
}
.panel_nest {
	display: none;
}
/*########################################################################################
|
|ヘッダー
|
########################################################################################*/
header {
		align-items: center;
}
/*-----------------------------------------------------------------------------
｜
｜■┓ヘッダー左側レイアウト用（VHRロゴ　タイトル部分）
｜┗┛
-----------------------------------------------------------------------------*/
header > h1 {
	padding: 4px 0 0 16px;
}
header > h1:before {
	display: none;
}
header > h1 a.header_brand {
	display: flex;
		align-items: center;
		gap: 12px;
}
header > h1 img {
	width: auto;
	height: 32px;
}
.header_site_title_en {
	font-size: 12px;
	font-size: 1.2rem;
}
.header_site_title_ja {
	font-size: 11px;
	font-size: 1.1rem;
}
/*-----------------------------------------------------------------------------
｜
｜■┓ヘッダー右側レイアウト用
｜┗┛
-----------------------------------------------------------------------------*/
header > div {
	display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 16px;
	height: auto;
	padding: 8px 0;
}
header > div > nav {
	display: none;
}
/*-----------------------------------------------------------------------------
｜
｜■┓グローバルナビゲーション
｜┗┛
-----------------------------------------------------------------------------*/
header > nav {
	display: none;
}
/*-----------------------------------------------------------------------------
|
|■┓ハンバーガーメニュー部分
|┗┛
-----------------------------------------------------------------------------*/
#ham_menu_icon {
	display: block;
	position: absolute;
		top: 16px;
		left: 6px;
	width: 22px;
	height: 3px;
	background: #8b2c2d;
	transition: .2s;
}
#ham_menu_icon:before ,
#ham_menu_icon:after {
	display: block;
	content: "";
	position: absolute;
		top: 0;
		left: 0;
	width: 22px;
	height: 3px;
	background: #8b2c2d;
	transition: .3s;
}
#ham_menu_icon:before {
	margin-top: -7px;
}
#ham_menu_icon:after {
	margin-top: 7px;
}
a.ham_menu_fh {
	border: 1px solid #8b2c2d;
	cursor: pointer; /* iOSにクリック領域を認識させる */
	display: inline-block;
	margin-left: 16px;
	position: relative;
	text-decoration: none;
	width: 36px;
	height: 36px;
}
a.ham_menu_fh .close {
	background: transparent !important;
}
a.ham_menu_fh .close:before,
a.ham_menu_fh .close:after {
	margin-top: 0 !important;
}
a.ham_menu_fh .close:before {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
}
a.ham_menu_fh .close:after {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}
#panel_contents {
	background: #fff;
	background: -webkit-linear-gradient(
			top
		, #fff 0%
		, #efefef 99.8%
		, #999);
	background: -moz-linear-gradient(
			top
		, #fff 0%
		, #efefef 100%
		, #999);
	background: -ms-linear-gradient(
			top
		, #fff 0%
		, #efefef 99.8%
		, #999);
	background: linear-gradient(
			to bottom
		, #fff 0%
		, #efefef 100%
		, #999);
	display: none;
	font-family: 'Noto Sans Japanese', "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", Osaka, "ＭＳ Ｐゴシック", sans-serif;
	width: 100%;
	height: auto;
	position: fixed;
		top: 51px;
	z-index: 10000;
}
#panel_contents nav.gnavi_hm > ul {
	background: #fff;
	display: flex;
		align-items: center;
		flex-flow: wrap;
		justify-content: center;
	padding: 0 40px;
}
#panel_contents nav.gnavi_hm ul li a:hover {
	opacity: .6;
}
#panel_contents nav.gnavi_hm > ul > li {
	position: relative;
	width: 100%;
}
#panel_contents nav.gnavi_hm > ul > li:not(:last-child) {
	border-bottom: 1px solid #efefef;
}
#panel_contents nav.gnavi_hm > ul > li > a {
	color: #545454;
	display: block;
	padding: 32px 0;
	position: relative;
	text-decoration: none;
	text-align: center;
}
#panel_contents nav.gnavi_hm > ul > li > a::after {
	font-family: FontAwesome;
	font-size: 14px;
	position: absolute;
		top: calc(50% - 9px);
		right: 7px;
}
/* ネストメニューがある場合、aタグにclass名「parent」を付け、下向き矢印に変更 */
#panel_contents nav.gnavi_hm ul li a.parent::after {
	content: "\f067";
}
/* ネストメニューがある場合、aタグにclass名「parent_open」を付け、上向き矢印に変更 */
#panel_contents nav.gnavi_hm ul li a.parent_open::after {
	content: "\f068";
}
/* 入れ子ul li */
#panel_contents nav.gnavi_hm > ul > li > ul {
	background: #fff;
	display: flex;
		align-items: center;
		flex-flow: wrap;
		justify-content: center;
}
#panel_contents nav.gnavi_hm > ul > li > ul > li {
	margin: 0 8px;
	width: calc(50% - 16px);
}
#panel_contents nav.gnavi_hm > ul > li > ul > li:not(:nth-last-child(-n+2)) {
	border-bottom: 1px solid #efefef;
}
#panel_contents nav.gnavi_hm > ul > li > ul > li a {
	color: #545454;
	display: block;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 16px 8px ;
	text-decoration: none;
	text-align: center;
}
/*########################################################################################
|
|トップページ
|
########################################################################################*/
/*-----------------------------------------------------------------------------
|
|■┓メインビジュアル
|┗┛
-----------------------------------------------------------------------------*/
.hrmv {
	padding: clamp(24px, 4vh, 40px) 0 clamp(32px, 6vh, 56px);
}
.hrmv_container {
	display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
	order: 0;
	text-align: center;
}
.hrmv_copy {
	font-size: clamp(26px, 8.2vw, 44px);
	letter-spacing: 0.05em;
	line-height: 1.25;
	white-space: normal;
}
.hrmv_copy br {
	display: inline;
}
.hrmv_copy-large {
	font-size: clamp(42px, 14vw, 72px);
}
.hrmv_dots {
	display: none;
}
.hrmv_photo-area {
	order: 1;
}
.hrmv_photo-circle {
	max-width: 320px;
}
.hrmv_scroll {
	margin: 0 auto;
}
.hrmv_text {
	margin: 0 auto;
	order: 2;
	padding-right: 0;
	text-align: left;
	width: 100%;
}
/*-----------------------------------------------------------------------------
|
|■┓トップページレイアウト
|┗┛
-----------------------------------------------------------------------------*/
main > .one_column > section {
	padding: 48px 16px;
}
div.top_layout > ul {
		gap: 16px;
	margin: 0;
}
div.top_layout > ul > li {
	margin-bottom: 16px;
}
div.top_layout > ul > li div {
	padding: 16px;
}
div.top_layout > ul > li div > h3 {
	font-size: 20px;
	font-size: 2.0rem;
	padding: 16px 0;
}
div.top_layout > ul > li div > h3 > span {
	font-size: 11px;
	font-size: 1.1rem;
}
div.top_layout > ul > li .btn_primary + .btn_primary {
	margin-top: 12px;
}
/*########################################################################################
|
|セカンダリ
|
########################################################################################*/
main {
	margin-top: 0;
}
main > h1 {
	font-size: 30px;
	font-size: 3.0rem;
	padding: 24px;
}
main > h1:before {
	font-size: 12px;
	font-size: 1.2rem;
	letter-spacing: 0.1em;
}
main > .desc {
	padding: 40px;
	padding-bottom: 0;
}
/*----------------------------
パンクズリスト
----------------------------------------------------------*/
.breadcrumbs{
	margin-top: -52px;
}
.breadcrumbs nav ol {
	font-size: 11px;
	font-size: 1.1rem;
}
/*-----------------------------------------------------------------------------
|
|■┓2カラムスタイル
|┗┛
-----------------------------------------------------------------------------*/
main > .two_column {
	display: flex;
		flex-direction: column;
}
main > .two_column > div {
	width: 100%;
	order: 2;
}
main > .two_column > nav {
	padding: 0 40px;
	width: 100%;
	order: 1;
}
/*------------------------------------------------------------------------------
|
| ■┓社員紹介モーダルウィンド設定
| ┗┛
------------------------------------------------------------------------------*/
#member_modal .member_modal_scroll {
	padding: 28px 22px;
}
#member_modal .modal_grid {
	display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
}
#member_modal .modal_nav_prev {
	left: 8px;
}
#member_modal .modal_nav_next {
	right: 8px;
}
#member_modal .modal_photo_wrap {
	width: 256px;
}
/*------------------------------------------------------------------------------
|
| ■┓募集要項（職種詳細）モーダルウィンド設定
| ┗┛
------------------------------------------------------------------------------*/
.job_flow_grid {
	grid-template-columns: 1fr;
	gap: 16px;
}
.job_flow_item {
	padding: 16px;
	text-align: center;
}
.job_flow_item:not(:last-child)::after {
	height: 14px;
	position: absolute;
		top: calc(100% - 1px);
		left: 50%;
	transform: translateX(-50%);
	width: 28px;
	clip-path: polygon(
		0 0,
		100% 0,
		50% 100%
	);
}
/*########################################################################################
|
|Footer
|
########################################################################################*/
footer {
	display: flex;
		flex-direction: column;
}
/*-----------------------------------------------------------------------------
｜
｜■┓フッター左側レイアウト用（VHR会社情報）
｜┗┛
-----------------------------------------------------------------------------*/
footer > section {
	border-bottom: 1px dotted #8b2c2d;
	display: flex;
		align-items: flex-start;
		flex-flow: wrap;
		justify-content: flex-start;
	margin-right: 0;
	margin-bottom: 40px;
	padding-bottom: 40px;
	width: 100%;
}
/*----------------------------
VHRロゴ
----------------------------------------------------------*/
footer > section > h1 {
	width: 50%;
}
/*----------------------------
VHRロゴキャプション
----------------------------------------------------------*/
footer > section > p {
	padding-left: 40px;
	width: 50%;
}
/*----------------------------
お問い合わせリンクボタン
----------------------------------------------------------*/
footer > section > div {
	width: 50%;
}
/*----------------------------
その他、取得マークなど
----------------------------------------------------------*/
footer > section > ul {
	margin-top: 0;
	padding-left: 40px;
	width: 50%;
}
/*-----------------------------------------------------------------------------
｜
｜■┓フッター右側レイアウト用（フッターメニュー）
｜┗┛
-----------------------------------------------------------------------------*/
footer > nav {
	width: 100%;
}
footer > nav > ul > li {
	margin-right: 80px;
	margin-bottom: 40px;
}
/*----------------------------
多階層用 li
----------------------------------------------------------*/
footer > nav > ul > li.multi_level > ul > li {
	width: 50%;
	min-width: auto;
}