@charset "utf-8";


/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');


/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("slide.css");
@import url("inview.css");


/*CSSカスタムプロパティ（サイト全体を一括管理する為の設定）
---------------------------------------------------------------------------*/
:root {
	--primary-color: #333;		/*テンプレートのメインまたはアクセントカラー*/
	--primary-inverse-color: #fff;	/*上のprimary-colorの対となる色*/
	
	--space-large: 8vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/
	--space-small: 2vw;			/*主に余白の一括管理用。画面幅100%＝100vwです。*/
}


/*opa1のキーフレーム設定（汎用的）
---------------------------------------------------------------------------*/
@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}

html,body {
	font-size: 16px;	/*基準となるフォントサイズ*/
	height: 100%;
}


body {
	margin: 0;padding:0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類*/
	-webkit-text-size-adjust: none;
	background: #F9F8F4;	/*背景色*/
	color: var(--primary-color);		/*文字色。冒頭で指定しているprimary-colorを読み込みます。*/
	line-height: 2;		/*行間*/
}


/*リセット他*/
figure {margin: 0;text-align: center;}
dd {margin: 0;}
nav ul {list-style: none;}
nav,ul,li,ol {margin: 0;padding: 0;}
section li {margin-left: 1rem;}


/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*input*/
input {font-size: 1rem;}

/*section*/
section {
	overflow-x: hidden;
	padding: var(--space-large);	
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: inherit;
	transition: 0.3s;	/*hoverまでにかける時間*/
}

/*マウスオン時*/
a:not(.ddmenu):hover {
	text-decoration: none;
	opacity: 0.9;
}


/*container（サイト全体を囲むボックス）
---------------------------------------------------------------------------*/
#container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	flex-shrink: 0;
	display: flex;					/*flexボックスを使う指定*/
	align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	justify-content: space-between;
	height: 59px;					/*ヘッダーの高さ*/
	position: fixed;
	z-index: 1;
	background-color: white;
	width: 100%;
	box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.8);
}
/*印刷設定
------------------------------------------------------------------------*/
@media print{
	header {
		position: static;
	}
}
/*
-------------------------------------------------------------------------
印刷設定ここまで*/

body:not(.home) header {
	margin-bottom: var(--space-large);
}

/*矢印アイコン（使用：ヘッダーメニュー）
---------------------------------------------------------------------------*/
.arrow_icon {
	width: 20px;
	margin-bottom: 0.2em;
	margin-right: 0.5em;	/*アイコンとテキストとの間の距離*/
	transition: 0.25s;
}

.arrow_hover {
	transform: rotate(90deg);
}
	/*画面幅600px以下の追加指定
	---------------------------------------------------------------------------*/
	@media screen and (max-width:600px) {
		#arrow_icon {
			width: 3.5vw;
		}
	}
	/*
	---------------------------------------------------------------------------
	画面幅600px以下の追加設定ここまで*/


/*ロゴ画像*/
#logo img {display: block;}
#logo {
	margin: 0;padding: 0;
	width: 380px;
	position: relative;z-index: 1;
	left: 2vw;
	top: 0vw;
}

	/*画面幅500px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:500px) {
		#logo {
			width: 76vw;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅500px以下の追加設定ここまで*/

	/*縦向き印刷設定
	------------------------------------------------------------------------*/
	@media print and (orientation: portrait) {
		#logo {
			width: 35vw;
		}
	}
	/*
	-------------------------------------------------------------------------
	縦向き印刷設定ここまで*/

/*マイナビ画像
---------------------------------------------------------------------------*/
.mynavi {
	display: flex;
	margin: 0 auto;
	padding: 0;
	width: 380px;
	border:solid;
	border-color: #FFF;
	border-radius: 10px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	background: rgba(0,0,0,0);
    opacity: 1.0;
    color: #FFF;
    transition: .5s;
}

/*マイナビ画像マウスオーバー（使用：採用情報）*/
.mynavi:hover {
	background: rgba(255,255,255,0.5);
    opacity: 0.5;
}

	/*画面幅600px以下の追加指定
	---------------------------------------------------------------------------*/
	@media screen and (max-width:600px) {
		.mynavi {
			width: 63.3vw; /*600px時、幅379.8px*/
		}
	}
	/*
	---------------------------------------------------------------------------
	画面幅600px以下の追加設定ここまで*/

	/*印刷設定
	------------------------------------------------------------------------*/
	@media print {
		.mynavi {
			width: 30vw;
		}
	}
	/*
	-------------------------------------------------------------------------
	印刷設定ここまで*/
/*マイナビQRコード
---------------------------------------------------------------------------*/
.mynavi_QR {
	width: 200px;
	margin: 0 auto;
}

	/*画面幅600px以下の追加指定
	---------------------------------------------------------------------------*/
	@media screen and (max-width:600px) {
		.mynavi_QR {
			width: 33vw;
		}
	}
	/*
	---------------------------------------------------------------------------
	画面幅600px以下の追加設定ここまで*/


#googlemap_icon {width: 16px;}


/*ISMS画像用調整レイヤー*/
.isms {width: 15%;}


/*ヘッダー内メニュー
---------------------------------------------------------------------------*/
header nav ul {display: flex;}

/*メニューブロック全体の設定*/
header > nav > ul {
	margin-right: 2vw;	/*ハンバーガーアイコンに重ならないように余白*/
	display: flex;		/*横並びにする*/
}

/*メニュー１個あたりの設定*/
header nav li a {
	display: block;
	background-image: linear-gradient(0deg, #116ea8, #116ea8);
	background-repeat: no-repeat;
	background-size: 0% 10%;
	background-position: 0 100%;
	transition: all 0.25s ease-out;
	text-decoration: none;
	font-size: 14px;
	padding: 0.5rem 0.8rem;
}

/*ドロップダウンメニューのホバー設定*/
header nav li > a:hover{
	background-size: 100% 10%;
}

/*ドロップダウンメニュー冒頭の矢印アイコン*/
header nav i {
	padding-right: 0.5rem;
}

/*ヘッダー内メニュー、開閉メニュー、共通のドロップダウン設定
---------------------------------------------------------------------------*/
header nav ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.25s both;	/*0.25秒待機後、0.5秒かけてフェードイン表示*/
}

/*ヘッダー内メニューのドロップダウン
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
header nav ul ul {
	position: absolute;z-index: 100;
	/*background-color: #297db1;*/
	background-color: #fff;
	box-shadow: 0px 16px 16px 1px rgba(0,0,0,0.8);
}

/*メニュー１個あたりの設定*/
header nav ul ul a {
	background: rgba(255,255,255,1.0);
	padding: 0.3em 1em;
	margin: 10px;
	width: 270px;
	border-radius: 5px;
	border: 1px solid var(--primary-color);	
}

	/*画面幅920px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:920px) {
		/*メニューブロック全体の設定*/
		header > nav > ul {
			margin-right: 0;	/*ハンバーガーアイコンに重ならないように余白*/
			display: none;
		}

		/*メニュー１個あたりの設定*/
		header nav li a {
			display: none;
			font-size: medium;
			padding: 0;
		}

		/*ドロップダウンメニュー冒頭の矢印アイコン*/
		header nav i {
			padding-right: 0;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅920px以下の追加設定ここまで*/

	/*縦向き印刷設定
	------------------------------------------------------------------------*/
	@media print and (orientation: portrait) {
	header nav li a {
		font-size: 11px;
	}
	/*
	-------------------------------------------------------------------------
	縦向き印刷設定ここまで*/
	
}

/*メニューブロック初期設定
---------------------------------------------------------------------------*/
/*メニューをデフォルトで非表示*/
#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;font-size: 2.5vw;}

/*上で非表示にしたメニューを表示させる為の設定*/
.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}

/*3本バーをデフォルトで非表示*/
#menubar_hdr.display-none {display: none;}

/*ドロップダウンをデフォルトで非表示*/
.ddmenu_parent ul {display: none;}

	/*マウス操作のときだけホバースタイル追加指定
	------------------------------------------------------------------------*/
	@media (hover: hover) {
		/*ヘッダーメニューをホバーしたときに下線をつける設定*/
		.ddmenu_hover{
			background-size: 100% 10%;
		}
	}
	
	/*
	-------------------------------------------------------------------------
	マウス操作のときだけホバースタイル追加指定ここまで*/

	/*画面幅920px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:920px) {
		/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
		a.ddmenu::before {
			display:inline-block;
			font-family: "Font Awesome 6 Free";	/*Font Awesomeを使う指示*/
			content: "\f054";		/*使いたいアイコン名（Font Awesome）をここで指定*/
			font-weight: bold;		/*この設定がないとアイコンが出ない*/
			margin-right: 0.5em;	/*アイコンとテキストとの間の距離*/
			color: #116ea8;
		}
		
		#menubar a {
			font-size: 3.0vw;
		}
	}
	
	/*
	-------------------------------------------------------------------------
	画面幅920px以下の追加設定ここまで*/

/*開閉メニュー
---------------------------------------------------------------------------*/
/*animation1のキーフレーム設定*/
@keyframes animation1 {
	0% {left: 100vw;}
	100% {left: 0px;}
}

/*メニューブロック設定*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	right: 0px;top: 0px;
	height: 100%;
	padding: 90px 10vw 50px;
	/*background: var(--primary-color);*/
	background: #DFDFDF;
	/*color: var(--primary-inverse-color);*/
	color: var(--primary-color);
	animation: animation1 0.2s both;
}

/*子メニューの設定*/
.small-screen #menubar ul ul {
	margin: auto;
	width: 70vw;
}

/*メニュー１個あたりの設定*/
.small-screen #menubar nav ul li {
	/*border: 1px solid var(--primary-inverse-color);*/
	border: 1px solid #000;
	margin: 1rem auto;
	border-radius: 5px;
	background-color: #fff;
}

.small-screen #menubar a {
	color: var(--primary-color);
	padding: 1rem 2rem;
}


/*２本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*２本バーを囲むブロック*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 2.5px;
	right: calc(var(--space-small) + 5px);
	width: 40px;
	height: 60px;
	padding: 20px 0;	/*2本のバーの上下間のバランス調整*/
	display: none;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	/*mix-blend-mode: exclusion;*/
}

/*マウスオン時だけmix-blend-modeを無効に*/
#menubar_hdr.ham {
	mix-blend-mode: normal;
}

/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 1.5px;
	/*本来は線の色なのですが、mix-blend-modeを使っているので背後の色に合わせて変動します。
	変動したくないなら#menubar_hdrのmix-blend-modeの行を削除して下さい。*/
	background-color: var(--primary-color);
	transition: all 0.5s ease-in-out;
	position: absolute;
}

#menubar_hdr div {
	position: relative;width: 100%;height: 100%;
	display: flex;flex-direction: column;justify-content: space-between;
}
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {top: 50%;transform: translateY(-50%) rotate(-45deg);}

	/*画面幅920px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:920px) {
		#menubar_hdr {
			display: flex; /*920px以下で3本バー表示*/
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅920px以下の追加設定ここまで*/
	
	/*画面幅400px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:400px) {
		#menubar_hdr {
			top: 5px;
			width: 30px;
			height: 55px;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅400px以下の追加設定ここまで*/


/*main
---------------------------------------------------------------------------*/
main {
	flex: 1 0 auto;
	overflow-x: hidden;
	padding: 70px 0 0;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.index {
			padding: 10vw 0 0;
			margin: 0 auto;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/

/*h1見出し（共通）
---------------------------------------------------------------------------*/
main h1 {
	margin: 0;padding: 0;
	font-size: 48px;
	font-weight: normal;
	margin-bottom: 5vw;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	line-height: 1.5;
}

main h1.c {
	align-items: center;
}

 .protect_title {
	font-size: 44px;
}
	
	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		main h1 {
			font-size: 10vw;
			line-height: 12vw;
		}
		
		/*個人情報関連ページの見出し*/
		.protect_title {
			font-size: 8vw;
			line-height: 10vw;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*h2サブタイトル（共通）
---------------------------------------------------------------------------*/
main h2 {
	margin: 10px 0 0 0;
	padding: 0;
	margin-bottom: 5vw;
	flex-direction: column-reverse;
	align-items: flex-start;
	line-height: 1;
	display: flex;
	border-top: 1px solid var(--primary-color);
	font-size: 13px;
	opacity: 0.6;
	letter-spacing: 0.1rem;
}

main h2.c {
	align-items: center;
}

/*見出し上のラインを消すスタイル*/
main h2.no-line {
	border: none;
	padding-top: 0.1vw;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		main h2 {
			font-size: 2.7vw;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*h3見出し（使用：採用情報、アクセス）
---------------------------------------------------------------------------*/
main h3 {
	font-weight: 600;
	font-size: 24px;
	color: #116ea8;
	-webkit-print-color-adjust: exact;
}

	.transpo {margin-top: 5vw;}

	
	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		main h3{
			font-size: 4.1vw;	/*900pxの時、サイズ27px*/
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*h4見出し（使用：採用情報）
---------------------------------------------------------------------------*/
main h4 {
	font-weight: bold;
	padding: 10px 5px;
	margin: 10px auto;
	background: #78C47B;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,0.5);
	font-size: 36px;
	-webkit-print-color-adjust: exact;
}

	/*画面幅900px以下の追加指定
	---------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		main h4 {
			font-size: 4.4vw;
			padding: 1.1vw 0.55vw;
		}
	}
	/*
	---------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*h5見出し（使用：会社情報）
---------------------------------------------------------------------------*/
main h5 {
	margin: 24px 0 12px 0;
	font-size: 24px;
	line-height: 24px;
	color: #000;
	border-left: 24px solid #78C47B;
	border-bottom: 2px solid #78C47B;
	
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		main h5{
			font-size: 4.1vw;	/*900pxの時、サイズ27px*/
			line-height: 4.1vw;
			border-left: 4.1vw solid #78C47B;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*h6見出し（使用：会社情報）
---------------------------------------------------------------------------*/
main h6 {
	font-weight: 600;
	font-size: 24px;
	background-image: linear-gradient(90deg, #78C47B, #b9ffbc);
	color: #fff;
	padding-left: 0.5em;
	margin-bottom: 10px;
	vertical-align: middle;
	text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
	-webkit-print-color-adjust: exact;
}

	
	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		main h6{
			font-size: 4.1vw;	/*900pxの時、サイズ27px*/
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*Google Map　（使用：アクセス）
---------------------------------------------------------------------------*/
.iframe-box {
	width: 100%;
	padding-top: 60%;
	position: relative;
	overflow: hidden;
}
.iframe-box iframe {
	margin : 0 auto;
 	position:absolute;
 	left: 0px;
	right:0px;
	top: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.iframe-box {
			margin-top: 6vw;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/

/*フッター設定（共通）
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}
footer {
	font-size: 12px;
	text-align: center;
	margin-top: 50px;
	padding: 10px;
	color: #fff;
	background-color:rgba(184,184,184,1.00);
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		#copyright{
			font-size: 2.0vw;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*list-grid2（2カラムボックス）（使用：採用情報）
---------------------------------------------------------------------------*/
.list-grid2 .list * {margin: 0;padding: 0;}

.list-grid2 {
	display: grid;
	height: auto;
	grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	gap: 0vw;
	padding-bottom: 5vw;
}

/*ボックス１個あたり*/
.list-grid2 .list {
	display: grid;
	margin-bottom: 1;
}

.grid2-img{
	width: 90%;
}
	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.list-grid2 {
			display: grid;
			grid-template-columns: none;
			gap: 0;
			padding-bottom: 0;
		}
		.list-grid2 .list {
			margin-bottom: 5vw;
		}
		
		.grid2-img{
			width: 100%;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*list-grid3（３カラムボックス）（使用：TOP）
---------------------------------------------------------------------------*/
.list-grid3 .list * {margin: 0;padding: 0;}

.list-grid3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);	/*3列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	gap: 3vw;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.list-grid3 {
			grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


.link-img {
	margin: 1.5vw;
	flex-basis: 29%;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.link-img {
			flex-basis: 46%;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*list-grid4（4カラムボックス）（使用：採用情報）
---------------------------------------------------------------------------*/
.list-grid4 .list * {margin: 0;padding: 0;}

.list-grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);	/*4列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	gap: 3vw;
	margin-top: 8vw;
	padding-bottom: 20px;
}

/*ボックス１個あたり*/
.list-grid4 .list {
	display: grid;
	margin-bottom: 1;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.list-grid4 {
			grid-template-columns: repeat(2, 1fr);
		}
		
		.office {
			width: 90%;
			margin: 0 auto 1;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*list-grid5（2カラムボックス）（使用：アクセス）
---------------------------------------------------------------------------*/
.list-grid5 .list * {margin: 0;padding: 0;}

.list-grid5 {
	display: grid;
	height: auto;
	grid-template-columns: repeat(2, 1fr);	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
	gap: 0vw;
	padding-bottom: 5vw;
}

/*ボックス１個あたり*/
.list-grid5 .list {
	display: grid;
	margin-bottom: 1;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.list-grid5 {
			grid-template-columns: none;	/*2列にする指定。4列にしたければrepeat(4, 1fr)とする。*/
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*リンク画像（ReadMoreあり）
---------------------------------------------------------------------------*/
.readmore {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0,0,0,0);
    opacity: 0;
    left: 0;
    top: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    transition: .5s;
	font-size: 3vw;
	font-weight: bold;
	text-shadow: 5px 5px 0 rgba(0,0,0,1.0);
}

.readmore:hover {
    background: rgba(0,0,0,0.3);
    opacity: 1;
	
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.readmore {
			background: rgba(0,0,0,0.2);
			font-size: 6.0vw;
			text-shadow: 1vw 1vw 0 rgba(0,0,0,1.0);
			opacity: 1;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*リンク画像（ReadMoreなし）
---------------------------------------------------------------------------*/
.readnone {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    transition: .5s;
}

.readnone:hover {
    background: rgba(255,255,255,0.5);
    opacity: 1;
}


/*btn1（使用：採用情報）
---------------------------------------------------------------------------*/
.btn1 {
	text-align: center;
	}

.btn1 a,.btn1 input {
	position: fixed;z-index: 100;
	right: 0px;
	top: 190px;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	display: inline-block;text-decoration: none;border: none;
	color: #fff;
	border-radius: 3px;
	padding: 15px 10px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	font-size: 14px;
	background: linear-gradient(#366ead, #184271);
	letter-spacing: 0.1em;
	-webkit-print-color-adjust: exact;
}

.btn1 a:hover,
.btn1 input:hover {
	cursor: pointer;
	filter: brightness(1.1);
	color: #fff;
}

/*矢印アイコン（Font Awesome）*/
.btn1.arrow a::after {
	font-family: "Font Awesome 5 Free";	/*Font Awesomeを使う指定*/
	content: "\f0a9";		/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくはtemplate-partyのマニュアルを参照。*/
	color: #fff;			/*アイコンの色*/
	font-weight: bold;
	display: inline-block;
	padding: 12px 0px;
	transform: scale(1.4);
	transition: 0.3s;
}

/*矢印アイコン（Font Awesome）のマウスオン時*/
.btn1.arrow a:hover::after {
	transform: scale(1.6);
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.btn1 a,.btn1 input {
			font-size: 2.6vw;
			padding: 2.7vw 1.2vw;
		}
		
		.btn1.arrow a::after {
			padding: 2.2vw 0px;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/
	
	/*印刷設定
	------------------------------------------------------------------------*/
	@media print {
		.btn1 a,.btn1 input {
			display: none;
		}
	}
	/*
	-------------------------------------------------------------------------
	印刷設定ここまで*/

/*時刻表ボタン（使用：アクセス）
---------------------------------------------------------------------------*/
.timetable-btn {
	position: relative;
	display:inline-block;
	padding: 5px 40px;
	text-decoration: none;
	color: #FFF;
	background: #116EA8;
	border: none;
	border-radius: 5px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
	text-shadow: 0 1px 0 rgba(0,0,0,0.2);
	font-size: 18px;
	width: auto;
	text-align: center;
	margin: 10px;
	font-weight: bold;
}

.timetable-btn:hover {
	cursor: pointer;
	filter: brightness(1.2);
	color: #fff;
}

.timetable-btn:active {
  border: solid 1px #116EA8;
  box-shadow: none;
  text-shadow: none;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.timetable-btn {
			padding: 1.0vw 7.7vw;
			border-radius: 1.4vw;
			font-size: 3.5vw; /*31.5*/
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*PAGE TOP（↑）設定（共通）
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;
	bottom: 20px;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(0,0,0,0.2);
	width: 60px;
	line-height: 60px;
	border-radius: 50%;
}

	/*画面幅500px以下の追加指定
	---------------------------------------------------------------------------*/
	@media screen and (max-width:500px) {
		.pagetop a {
			right: 10px;
			width: 50px;
			line-height: 50px;
		}
	}
	/*
	---------------------------------------------------------------------------
	画面幅500px以下の追加設定ここまで*/
	
	/*印刷設定
	------------------------------------------------------------------------*/
	@media print {
		.pagetop-show,.pagetop a {
			display: none;
		}
	}
	/*
	-------------------------------------------------------------------------
	印刷設定ここまで*/

/*ta1（使用：会社情報）
---------------------------------------------------------------------------*/
.ta1 {
	table-layout: fixed;
	width: 80%;
	margin: auto;
	font-size: 16px;
	background: rgba(255,255,255,0.5);
}

.ta1 th, .ta1 td {
	padding: 1vw;
	word-break: break-all;
	border-top: 1px dotted #D6D6D6;
	border-bottom: 1px dotted #D6D6D6;
}

.ta1 th {
	width: 25%;
	background-color: rgba(123,255,129,0.30);
	text-align: left;
	-webkit-print-color-adjust: exact;
}

	/*画面幅900px以下の追加指定
	---------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.ta1 {
			width: 100%;
			font-size: 1.4vw;
		}
		
		.ta1 th,.ta1 td {
			display: block;
		}
		
		.ta1 th {
			width: 100%;
			padding-left: 2.2vw;
			font-size: 4.0vw;
		}
		
		.ta1 td {
			font-size: 3.5vw;
		}
	}
	/*
	---------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*テーブル2（使用：会社情報）
---------------------------------------------------------------------------*/
.ta2 {
	table-layout: fixed;
	width: 100%;
}

.ta2 th, .ta2 td {
	padding: auto 0;
	word-break: break-all;
}

.ta2 th {
	text-align: right;
	vertical-align: top;
	background:transparent;
	width: 20%;
}

	/*画面幅900px以下の追加指定
	---------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.ta2 th, .ta2 td {
			font-size: 3.5vw;
		}
		
		.ta2 th {
			width: 25%;
		}
	}
	/*
	---------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*テーブル3（使用：アクセス）
---------------------------------------------------------------------------*/
.ta3 {
	width: 370px;
	margin-bottom: 1vw;
	background: rgba(255,255,255,0.5);
}

.ta3 th, .ta3 td {
	border-top: 1px dotted #D6D6D6;
	border-bottom: 1px dotted #D6D6D6;
}
.ta3 th {
	font-weight:normal;
	vertical-align: middle;
	text-align: left;
	background: #eee;
	padding: 0vw 2vw;
	word-break: break-all;
	-webkit-print-color-adjust: exact;
}

.ta3 td {
	text-align: left;
	padding: 0.4vw 1vw ;
	word-break: break-all;
}


	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.ta3 {
			font-size: 3vw;
			width:80%;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/

/*テーブル4（使用：採用情報）
---------------------------------------------------------------------------*/
.ta4 {
	border-top: 1px solid #ccc;
	table-layout: fixed;
	width: 100%;
	margin: 0 auto;
	background: rgba(255,255,255,0.5);
}



.ta4 th, .ta4 td {
	padding: 10px 5px;
	word-break: break-all;
	border-top: 1px dotted #D6D6D6;
	border-bottom: 1px dotted #D6D6D6;
}

.ta4 th {
	background: #eee;
	width: 20%;
	text-align: left;
	padding-left: 20px;
	font-size: 16px;
	vertical-align: top;
	-webkit-print-color-adjust: exact;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.ta4 th, .ta4 td {
			display: block;
			padding: 1.1vw 0.55vw;
		}
		
		.ta4 th {
			width: 100%;
			padding-left: 2.2vw;
			font-size: 3.5vw;
		}
		
		.ta4 td {
			font-size: 3.0vw;
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*タイムライン（使用：会社情報 沿革）
---------------------------------------------------------------------------*/
.wrapper{
	width: 80%;
	margin: auto 30%;
	box-sizing: border-box;
	
}

.time_schedule{
  position: relative;
}

.time_line {
	width: 4px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 150px;
	transform: translateX(-50%);
	padding-top: 20px;
}

.time_line span {
    display: block;
    width: 100%;
    height: 100%;
    background: #333333;
	-webkit-print-color-adjust: exact;
}

.time_ball{
	position: absolute;
	background: #11a85c; /*#78C47B;*/
	width: 20px;
	height: 20px;
	border-radius: 50%;
	top: 16px;
	transform: translate(-50%,-50%);
	left: 150px;
	-webkit-print-color-adjust: exact;
}

dl{
	padding: 1px 0 0 0;
	font-size: 14px;
}

dl dt{
	width: 100%;
	position: absolute;
	font-size: 16px;
}

dl dd{
	width: 100%;
	margin-left: 200px;
	font-size: 16px;
}


	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.wrapper{
			width: 100%;
			margin: auto;
			box-sizing: border-box;
		}
		
		.time_line {
			width: 0.4vw;
			left: 18.5vw;
			padding-top: 5.8vw;
		}

		.time_ball{
			width: 3vw;
			height: 3vw;
			top: 3.2vw;
			transform: translate(-50%,-50%);
			left: 18.5vw;
		}

		dl{
			margin: 0 auto;
		}

		dl dt{
			position: absolute;
			font-size: 3.1vw; /*1.9*/
		}

		dl dd{
			margin-left: 22.4vw;
			font-size: 3.1vw;
		}
		
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/
	
	/*印刷設定
	------------------------------------------------------------------------*/
	@media print {
		.wrapper{
			width: 100%;
			margin: auto;
			box-sizing: border-box;
		}
		
		.time_line {
			width: 0.4vw;
			left: 18.5vw;
			padding-top: 1.8vw;
		}

		.time_ball{
			width: 2vw;
			height: 2vw;
			top: 2.2vw;
			transform: translate(-50%,-50%);
			left: 18.5vw;
		}

		dl{
			margin: 0 auto;
		}

		dl dt{
			position: absolute;
			font-size: 2.1vw; /*1.9*/
		}

		dl dd{
			margin-left: 22.4vw;
			font-size: 2.1vw;
		}
		
	}
	/*
	-------------------------------------------------------------------------
	印刷設定ここまで*/

/*accordion1（使用：採用情報）
---------------------------------------------------------------------------*/
.accordion1 {
    border: 2px solid #d0d0d0;
    border-radius: 10px;
	margin: 0 8%;
	margin-top: 10px
}

.accordion1 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 2vw 2em;
    color: #333333;
	background: rgba(255,255,255,0.5);
	font-size: 24px;
    font-weight: 600;
    cursor: pointer;
	border-radius: 10px;
}

.accordion1 summary::-webkit-details-marker {
    display: none;
}

.accordion1 summary::after {
    transform: translateY(-25%) rotate(-45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .3s;
}

.accordion1[open] summary::after {
    transform: rotate(45deg);
}

.accordion1 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.accordion1[open] p {
    transform: none;
    opacity: 1;
}

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.accordion1 summary{
			font-size: 4.1vw;	/*900pxの時、サイズ27px*/
		}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/


/*調整用スタイル
---------------------------------------------------------------------------*/
.l {text-align: left !important;}
.b {font-weight: bold;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.fs10 {font-size: 10px;}
.df {display: flex;flex-wrap: wrap;justify-content: center;}
.top0 {padding-top: 0;margin-top: 0;}
.bottom0 {padding-bottom: 0;margin-bottom: 0;}
.pl1e {padding-left: 1em;}
.pl2e {padding-left: 2em;}
.m0 {margin: 0;}
.mt60 {margin-top: 60px;}
.mb0 {margin-bottom: 0px !important;}
.small {font-size: 0.75em;}
.fscomments {font-size: 10px;}
.ba20 {border:solid; border-radius: 20px; border-color: #FFF;}
.boxshadow {box-shadow: 10px 10px 10px rgba(0,0,0,0.3);}
.fwn {font-weight: normal;}
.op1 {opacity: 1.0;}
.pcinline { display: inline;}
.spinline { display: none;}
.org {width: 80%;display: block; margin: auto;}
/*---------------------------------------------------------------------------
調整用スタイル*/


/*インデント関連
---------------------------------------------------------------------------------------------------*/

/*pannding-leftで全体を1字下げ、text-indexで1文字下げる*/
.indent11 {margin: 0; padding: 0 0 0 1em; text-indent: 1em; word-break:break-all;}

/*頭に記号（■や※等）のある見出しのインデント用*/
.indent1-1 {margin: 0; padding: 0 0 0 1em; text-indent: -1em; word-break:break-all;}

/*pannding-leftで全体を2字下げ、text-indexで1文字下げる*/
.indent21 {margin: 0; padding: 0 0 0 2em; text-indent: 1em; word-break:break-all;}

/*pannding-leftで全体を2字下げ、text-indexで1文字上げる*/
.indent2-1 {margin: 0; padding: 0 0 0 2em; text-indent: -1em; word-break:break-all;}

/*pannding-leftで全体を2字下げ、text-indexで2文字上げる*/
.indent2-2 {margin: 0; padding: 0 0 0 2em; text-indent: -2em; word-break:break-all;}

/*pannding-leftで全体を3字下げる*/
.indent30 {margin: 0; padding: 0 0 0 3em; text-indent: 0em; word-break:break-all;}

/*pannding-leftで全体を3字下げ、text-indexで1文字下げる*/
.indent31 {margin: 0; padding: 0 0 0 3em; text-indent: 1em; word-break:break-all;}

/*pannding-leftで全体を3字下げ、text-indexで2文字上げる*/
.indent3-2 {margin: 0; padding: 0 0 0 3em; text-indent: -2em; word-break:break-all;}

/*pannding-leftで全体を3字下げ、text-indexで3文字上げる*/
.indent3-3 {margin: 0; padding: 0 0 0 3em; text-indent: -3em; word-break:break-all;}

/*pannding-leftで全体を4字下げ、text-indexで1文字下げる*/
.indent41 {margin: 0; padding: 0 0 0 4em; text-indent: 1em; word-break:break-all;}

/*pannding-leftで全体を4字下げ、text-indexで1文字上げる*/
.indent4-1 {margin: 0; padding: 0 0 0 4em; text-indent: -1em; word-break:break-all;}

/*pannding-leftで全体を4字下げ、text-indexで3文字上げる*/
.indent4-3 {margin: 0; padding: 0 0 0 4em; text-indent: -3em; word-break:break-all;}

/*-----------------------------------------------------------------------------------------------------
インデント関連*/

	/*画面幅900px以下の追加指定
	------------------------------------------------------------------------*/
	@media screen and (max-width:900px) {
		.f3-5vw {font-size: 3.5vw;}
		#googlemap,#transpo1 {font-size: 3.5vw;}
		.info {font-size: 3.5vw;}
		#googlemap_icon {width: 4.1vw;}
		.pcinline{ display: none; }
  		.spinline{ display: inline; }
		.org {width: 100%}
		.fscomments {font-size: 2.5vw;}
	}
	/*
	-------------------------------------------------------------------------
	画面幅900px以下の追加設定ここまで*/