/********************

	ミニウェブ用　CSS

********************/

@charset "utf-8";

html {
	scroll-behavior: smooth;
}

/*====================
 * 全体レイアウト
 */
 .miniweb header {
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
}

/* 横幅 640px 未満 */
body.miniweb {
	background: white;
}

footer {
	padding-bottom: 120px;
}

.miniweb .content_area {
	display: block;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
	overflow: auto;
	z-index: 1;
}

.miniweb .content_area main {
	background: white;
}

.miniweb .content_area .company_nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: auto;
	z-index: 100;
	transform: translate3d(0, 0, 1px);
	background: white;
}

.btn_top {
	display: block;
	position: fixed;
	box-sizing: border-box;
	width: 4em;
	height: 4em;
	right: 1em;
	bottom: 8em;
	z-index: 100;
	transform: translate3d(0, 0, 1px);
}

/* 横幅 640px 以上 */
@media screen and (min-width: 640px) {

	footer {
		padding-bottom: 0;
	}

	body.miniweb {
		background: #eee;
	}

	.miniweb .content_area {
		position: relative;
		margin: 8px auto;
		padding: 0 8px;
		overflow: clip;
	}

	.miniweb .content_area main {
		display: inline-block;
		vertical-align: top;
		box-sizing: border-box;
		width: 66%;
		border: 1px solid #ddd;
		border-radius: 8px;
	}

	.miniweb .content_area .company_nav {
		float: right;
		position: -webkit-sticky;
		position: sticky;
		top: 70px;
		box-sizing: border-box;
		width: 32%;
		border: 1px solid #ddd;
		border-radius: 8px;
		max-height: 95vh;
    overflow-y: auto;
	}

	.btn_top {
		bottom: 2em;
	}
}

/* 横幅 1500px 以上 */
@media screen and (min-width: 1500px) {
	.miniweb .content_area .company_nav {
		top: 8px;
	}
}

/*====================
 * ヘッダー
 */
 .miniweb header .title_area {
	display: block;
	margin: 0;
	padding: 0;
}

.miniweb header .title_text {
	display: block;
	margin: 0;
	padding: 0 8px;
	font-weight: bold;
}

.miniweb header .company_name {
	float: left;
	display: block;
	margin: 4px;
	width: 50%;
	line-height: 1;
	font-size: 16px;
	text-align: center;
	font-weight: bold;
}

.miniweb header .company_name .logo {
	width: 100%;
	margin: 0;
	padding: 0;
}

.miniweb .btn_return {
	float: right;
	display: block;
	margin: 8px 4px;
	border: 1px solid #aaa;
	padding: 4px;
	width: 120px;
	font-size: 12px;
	text-align: center;
	line-height: 1;
	text-decoration: none;
}

.miniweb .btn_return:hover {
	transition: background-color 0.5s;
	background-color: #dae1f1;
}

.miniweb .btn_return .logo {
	width: 100%;
	margin: 0;
	padding: 0;
}

.miniweb header .company_nav {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	text-align: center;
}

.miniweb .company_nav .selected a {
	font-weight: bold;
}

.miniweb header .company_nav li {
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding: 4px 0;
	width: 105px;
	text-align: center;
	font-size: 14px;
}

.miniweb header .company_nav li a {
	display: block;
	width: 100%;
	height: 100%;
}

.miniweb header .company_nav li a:hover {
	transition: background-color 0.5s;
	background-color: #dae1f1;
}

@media all and (min-width: 360px) {
	.miniweb header .company_nav li {
		width: 120px;
		font-size: 16px;
	}

	.miniweb header .company_name {
		margin: 8px;
	}
	
	.miniweb .btn_return {
		margin: 8px;
	}
}

@media all and (min-width: 640px) {
	.miniweb header .company_name {
		width: 320px;
		margin: 8px;
	}

	.miniweb .btn_return {
		width: 160px;
		font-size: 16px;
		margin: 8px;
	}
}

@supports (display: flex) {
	.miniweb header .title_area {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
	}

	.miniweb header .title_area .company_name {
		margin-right: auto;
	}

	.miniweb header .company_nav {
		display: flex;
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: space-around;
		width: auto;
		flex: 1 0 auto;
	}
	
	.miniweb .btn_return {
		margin: 8px;
	}

}

/*====================
 * メイン部のレイアウト
 */
.btn_top {
	display: block;
	position: fixed;
	box-sizing: border-box;
	width: 4em;
	height: 4em;
	right: 1em;
	bottom: 8em;
	border: 1px solid #888;
	border-radius: 50%;
	padding: 0.3em 0;
	z-index: 100;
	transform: translate3d(0, 0, 1px);
	box-shadow: 3px 3px 3px #888;
	text-align: center;
	font-weight: 900;
	line-height: 1;
	background-color: white;
}

.btn_top:link {
	text-decoration: none;
	color: black;
}

.btn_top:visited {
	color: black;
}

/* 印刷スタイルシート */
@media print {
	.miniweb .content_area main {
		display: block;
		margin: 0 auto;
		max-width: 800px;
	}

	.miniweb .content_area .company_nav {
		display: none;
	}

	.miniweb .btn_top {
		display: none;
	}
}

/*==============
 * ナビ
 */
.miniweb .company_nav {
	border-top: 1px solid #ddd;
}

.miniweb .company_nav .selected a {
	font-weight: bold;
}

.miniweb .company_nav a:link {
	text-decoration: none;
}

.miniweb .company_nav .company_logo {
	margin: 8px auto auto 8px;
	width: 180px;
}

.miniweb .company_nav ul {
	margin: 8px;
	padding: 0;
	text-align: center;
}

.miniweb .company_nav li {
	display: inline-block;
	font-size: 12px;
}

.miniweb .company_nav li a:link {
	color: black;
}

.miniweb .company_nav img.icon {
	display: block;
	height: 36px;
	margin: 0 auto;
}

.miniweb .company_nav .btn_entry {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 30%;
	padding: 4px;
	background-color: orange;
	border: 1px solid orange;
	color: white;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
}

.miniweb .company_nav .btn_entry:hover {
	transition: background-color 0.5s, color 0.5s;
	background-color: white;
	color: orange;
}

.miniweb .company_nav ul.submenu {
	display: block;
	position: absolute;
	right: 6em;
	bottom: 2em;
	border: 1px solid #ddd;
	padding: 0.5em;
	opacity: 0;
	visibility: hidden;
	background: white;
	transition: opacity 0.5s, visibility 0.5s;
	text-align: left;
}

.miniweb .company_nav ul.submenu[open] {
	opacity: 1;
	visibility: visible;
}

.miniweb .company_nav ul.submenu li {
	display: block;
	font-size: 16px;
	line-height: 44px;
}

@supports (display: flex) {

	.miniweb .company_nav {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	.miniweb .company_nav .company_logo {
		order: 1;
	}

	.miniweb .company_nav .btn_entry {
		position: static;
		order: 2;
		display: flex;
		margin: 8px 8px 0;
		align-items: center;
		align-self: center;
		justify-content: center;
	}

	.miniweb .company_nav ul {
		flex-basis: 100%;
		order: 3;
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-around;
	}

}

@media all and (min-width: 640px) {
	.miniweb .company_nav .company_logo {
		display: block;
		width: 80%;
		height: auto;
		margin: 8px auto;
	}
	
	.miniweb .company_nav ul {
		display: block;
		margin: 8px;
		padding: 0;
		list-style: none;
	}
	
	.miniweb .company_nav ul li {
		display: block;
		padding: 8px 0 8px 10%;
		border-bottom: 2px dashed #ddd;
		text-align: left;
		font-size: medium;
	}
	
	.miniweb .company_nav img.icon {
		display: inline;
		height: 36px;
		margin: 0 8px 0 0;
		vertical-align: middle;
	}

	.miniweb .company_nav .btn_entry {
		display: block;
		order: 4;
		width: 70%;
		margin: 8px auto;
		padding: 8px;
		font-weight: bold;
	}

	.miniweb .company_nav ul.submenu {
		display: inherit;
		position: inherit;
		bottom: inherit;
		margin: 0;
		border: 0;
		padding: 0;
		opacity: inherit;
		visibility: visible;
		background: inherit;
	}

	.miniweb .company_nav ul.submenu li {
		display: inherit;
		font-size: inherit;
		line-height: inherit;
	}
	
	.miniweb .company_nav ul.submenu li:last-child {
		border-bottom: 0;
	}
	
}

/* ==============
 * 本文
 */
/* ファーストビュー */
.miniweb main .fv_area {
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	display: flex;
	box-shadow: 0px 0px 2px black;
}

.miniweb main .fv_area .fv_image {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	z-index: 0;
	object-fit: cover;
}

@supports (object-fit: cover) {
	.miniweb main .fv_area .fv_image {
		max-height: 480px;
	}
}

.miniweb main .fv_area h1 {
	position: absolute;
	margin: 0;
	padding: 0;
	bottom: 5%;
	left: 16px;
	font-size: x-large;
	color: white;
	font-weight: bold;
	text-shadow: 0px 0px 3px black;
}

.miniweb main .fv_area .catch {
	position: absolute;
	top: 5%;
	right: 8px;
	bottom: auto;
	left: auto;
	text-align: right;
	font-size: large;
	color: white;
	font-weight: bold;
	line-height: 1.2em;
	text-shadow: 0px 0px 3px black;
}

@media (min-width: 640px) {
	.miniweb main .fv_area h1 {
		font-size: xx-large;
	}
	.miniweb main .fv_area .catch {
		font-size: x-large;
	}
}

/* 目次 */
.miniweb section.toc {
	margin: 8px 8px;
	padding: 0;
	background: #eee;
	overflow: auto;
}

.miniweb section.toc h2 {
	margin: 8px;
	border-left: 8px solid #3C5DA8;
	padding-left: 8px;
	line-height: 1;
}

.miniweb section.toc ol {
	margin: 8px;
	padding: 0;
	list-style-position: inside;
}

.miniweb section.toc ol > li {
	padding: 0 8px;
	line-height: 2.0;
	border-bottom: 1px solid #CCF;
}

.miniweb section.toc ol > li a:link {
	text-decoration: none;
}

/* 一般セクション */
.miniweb section.g {
	margin: 8px;
	overflow: hidden;
}

.miniweb section.g h2 {
	background: #3C5DA8;
	margin: 1em 0 0;
	padding: 8px 8px;
	line-height: 1;
	color: white;
}

.miniweb section.g h2::before {
	content: "";
	border-left: 8px solid white;
	border-right: 8px solid transparent;
	height: 100%;
}

.miniweb .mini-heading {
	color: darkcyan;
	font-weight: bold;
}

/* 傾向グラフ */
#tendency dl dt {
	text-align: center;
}

.tendency_bar {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 0.5em 0 2em;
	padding: 0;
}

.tendency_bar .p1 {
	float: left;
	width: 8em;
	text-align: left;
}

.tendency_bar .graph {
	display: block;
	width: 100%;
	height: 24px;
}

.tendency_bar .p2 {
	float: right;
	width: 8em;
	text-align: right;
}

@supports (display: flex) {
	@media all and (min-width: 480px) {

		.tendency_bar {
			display: flex;
			align-items: center;
		}

		.tendency_bar .p1 {
			text-align: right;
			order: 1;
			flex: 1 0 8em;
		}

		.tendency_bar .graph {
			margin: 0 16px;
			order: 2;
		}

		.tendency_bar .p2 {
			text-align: left;
			order: 3;
			flex: 1 0 8em;
		}
	}
}

/* 数値で見る当社 */
.g .remark {
	text-align: right;
}

dl.numeric_list {
	display: block;
	text-align: center;
}

dl.numeric_list > div {
	display: inline-block;
	width: 150px;
	text-align: center;
	margin: 0 4px 1em 4px;
}

dl.numeric_list > div dt {
	background-color: #dae1f1;
	font-weight: bold;
}

dl.numeric_list > div dd {
	margin: 0;
	padding: 4px;
}

dl.numeric_list > div dd .num {
	font-size: 200%;
}

@supports (display: flex) {
	dl.numeric_list {
		display: flex;
		flex-flow: row wrap;
		align-items: stretch;
		justify-content: center;
		margin: 1em -4px;
	}
	dl.numeric_list > div {
		flex: 1 0 150px;
	}
}

#numeric_data > h3 {
	background-color: #dae1f1;
	font-weight: bold;
	font-size: medium;
	text-align: center;
}

/* 横棒グラフ */
.horz_block_graph {
	border: 2px solid black;
	border-width: 0 0 2px 2px;
	padding: 0;
	overflow: auto;
}

.horz_block_graph li {
	margin: 0.5em 0;
	padding: 0 0 0 0.2em;
}

/* 採用データページ */
.jobinfo {
	box-sizing: border-box;
	margin: 0.5em 0;
	border: 1px solid black;
	padding: 8px; 
	overflow: auto;
}

.jobinfo > summary {
	display: block;
}

/* Safari 用 */
.jobinfo > summary::-webkit-details-marker {
  display: none;
}

.jobinfo > summary > .title {
	margin: 0;
	padding: 0;
	font-size: x-large;
	font-weight: bold;
}

.jobinfo > summary > .title::before {
	content: "＋";
	float: right;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: 36px;
	cursor: pointer;
}

.jobinfo[open] > summary > .title::before {
	content: "－";
	float: right;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: 36px;
	cursor: pointer;
}

.jobinfo h4 {
	color: #3C5DA8;
	font-size: large;
	margin: 1em 0 0 0;
}

dl.speclist {
	margin: 0.5em 0;
}

dl.speclist > div > dt {
	font-weight: bold;
}

dl.speclist > div > dd {
	margin: 0;
	padding: 0 0 0 1em;
}

dl.speclist > div {
	border-bottom: 1px solid black;
}

/* キャプション付きの図 */
figure.portrait {
	float: right;
	box-sizing: border-box;
	width: 25%;
	min-width: 120px;
	margin: 1em 0.5em;
}

figure.center {
	width: 50%;
	min-width: 300px;
	margin: 1em auto;
}

figure > img {
	width: 100%;
}

figure figcaption {
	text-align: center;
}

.word {
	display: inline-block;
}

/* 最下部のボタンナビ */
.miniweb .btn_navi {
	text-align: center;
	margin: 1em 8px;
}

.miniweb .btn_navi .btn {
	display: inline-block;
	margin: 0.5em;
	padding: 8px;
	background-color: #3C5DA8;
	border: 1px solid #3C5DA8;
	color: white;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
}

.miniweb .btn_navi .btn:hover {
	transition: background-color 0.5s, color 0.5s;
	background-color: white;
	color: #3C5DA8;
}

/*====================
 * エントリーページ
 */
.entry_info h1 {
	margin: 0;
	padding: 0.5em 0;
	background-color: #dae1f1;
	text-align: center;
}

/*====================
 * 共通部品
 */
/* 画像付きナビ */
.image_navi {
	padding: 0;
	margin: 1em 0;
	text-align: center;
}

.image_navi > li {
	display: inline-block;
	margin: 0.5em;
	padding: 0;
	width: 45%;
	min-width: 180px;
	max-width: 280px;
}

.image_navi figure {
	position: relative;
	margin: 0;
}

.image_navi figure:hover {
	filter: brightness(1.2);
}

.image_navi figure img {
	filter: brightness(0.8);
}

.image_navi figure figcaption {
	position: absolute;
	font-size: x-large;
	vertical-align: middle;
	bottom: 8px;
	left: 0;
	right: 0;
	width: 100%;
	color: white;
	font-weight: bold;
	text-shadow: 0px 0px 3px black;
}

.image_navi figure figcaption::after {
	display: inline-block;
	margin-left: 0.5em;
	padding: 0px;
	width: 1.0em;
	height: 1.0em;
	vertical-align: middle;
	background-image: url(link.svg);
	background-size: cover;
	content: "";
}

/* 一般写真 */
img.scene {
	display: block;
	width: 100%;
	max-width: 480px;
	margin: 1em auto;
}

/* 人の紹介 */
ul.people {
	text-align: center;
	margin: 1em 0;
	padding: 0;
}

ul.people li {
	display: inline-block;
	margin: 0.5em;
	padding: 0;
}

figure.person {
	display: inline-block;
	margin: 0 1em;
	text-align: left;
	overflow: hidden;
}

figure.person:link {
	text-decoration: none;
	color: black;
}

figure.person > img {
	display: inline-block;
	vertical-align: middle;
	height: 10em;
	width: auto;
	margin: 0;
	border-radius: 50%;
}

figure.person figcaption {
	display: inline-block;
	vertical-align: middle;
	font-size: medium;
	text-align: left;
	line-height: 1.2;
}

/* 応募要件 */
dl.requirements {
	display: table;
	box-sizing: border-box;
	margin: 0px;
	border: 2px solid #3C5DA8;
	width: 100%;
	background-color: #3C5DA8;
}
dl.requirements > div {
	display: table-row;
}
dl.requirements > div > dt {
	display: table-cell;
	background-color: #3C5DA8;
	word-break: keep-all;
	vertical-align: middle;
	padding: 0.2em;
	text-align: center;
	color: white;
	font-size: large;
	font-weight: bold;
}
dl.requirements > div > dd {
	display: table-cell;
	vertical-align: middle;
	background-color: white;
	padding: 0.2em;
}

/* YouTube チャンネル */
.youtube_channel.button {
	display: block;
	margin: 1em auto;
	padding: 0.5em 1em;
	width: fit-content;
	background-color: red;
	color: white;
	text-align: center;
	font-size: 20px;
	text-decoration: none;
}

.youtube_channel.button .wrap {
	display: inline-block;
}