@charset "utf-8";

/*======================================
  全体レイアウト
======================================*/
body {
	box-sizing: content-box;
}

.content_area {
	max-width: 1180px;
	margin: 0 auto;
	position: relative;
}

main {
	display: block;
}

.side_nav {
	display: none;
}

@media (min-width: 640px) {
	header {
		box-shadow: -1px 0 10px 1px rgb(0 0 0 / 20%);
	}
	.content_area {
		display: block;
		position: relative;
		width: 100%;
	}
	main {
		display: inline-block;
		width: 67%;
		vertical-align: top;
		margin: 1rem 0;
	}
	.side_nav {
		display: block;
		float: right;
		width: 32%;
		padding: 1rem 0;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
}

@media (min-width: 900px) {
	body {
		background-color: #f0f0f0;
	}
	header {
		box-shadow: none;
	}
}

/*======================================
  色テーマ
======================================*/
.fulltime {
	--main-color: #3c5da8;
}
.parttime {
	--main-color: #f34444;
}
.newgrads {
	--main-color: #059900;
}

/*======================================
  サイドナビ
======================================*/
.side_nav > div {
	margin: 0.5rem 0.5rem 0.5rem 0;
	border: 1px solid #383838;
	border-radius: 8px;
	box-shadow: 2px 2px 5px #eee;
}

.side_nav .nav_list {
	margin: 16px 20px;
	padding: 0;
	list-style: none;
}

@media (min-width: 900px) {
	.side_nav > div {
		background-color: white;
		border: 2px solid #ddd;
	}
}

.side_nav .nav_list a {
	display: block;
	border-bottom: 1px solid #383838;
	margin: 4px;
	padding: 4px 4px 8px;
	text-align: center;
}

.side_nav .nav_list img {
	width: 36px;
	height: 36px;
	margin: 0 1em 0 0;
	display: inline-block;
	vertical-align: middle;
}

.side_nav .nav_list span {
	margin: 0 auto;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
}

.side_nav .button_area a {
	display: block;
	text-align: center;
	margin: 8px auto;
	border-radius: 8px;
	height: 36px;
	line-height: 36px;
}

.side_nav .button_area .entry {
	margin: 1em 24px;
	border: 1px solid #1d439a;
	border-color: var(--main-color);
	background-color: #1d439a;
	background-color: var(--main-color);
	color: white;
	font-weight: bold;
	transition: background-color .2s, border-color .2s, color .2s;
}

.side_nav .button_area .entry:hover {
	background-color: white;
	color: #1d439a;
	color: var(--main-color);
}

.side_nav .button_area .re-search {
	margin: 1em;
	text-align: center;
}

.side_nav .button_area .re-search img {
	height: 20px;
	vertical-align: middle;
}

.side_nav .button_area .re-search span {
	vertical-align: middle;
}

.side_nav .button_area .search {
	display: inline-block;
	padding: 0 0.4em;
	margin: 0.2em auto;
	border: 0;
	width: 10em;
	height: auto;
	background-color: #1d439a;
	background-color: var(--main-color);
	border-radius: 1.5em 1.5em;
	color: white;
	font-size: smaller;
	font-weight: bold;
	transition: background-color .2s, border-color .2s, color .2s;
}

/*======================================
  文書内のスタイル
======================================*/
a { 
	text-decoration: none;
	color: #383838;
}

h1, h2, h3, dt {
	font-weight: bold;
	color: #1d439a;
	color: var(--main-color);
}

section.g h2 {
	padding-left: 6px;
	background-color: #1d439a;
	background-color: var(--main-color);
	font-size: x-large;
	color: white;
	text-align: left;
}

section.g h2:before {
	content: "";
	border-left: 4px solid white;
	padding-left: 6px;
}

@media print {
	section.g h2 {
		padding-left: 0;
	}
	section.g h2:before {
		content: "";
		border-left: 4px solid black;
		padding-left: 6px;
	}
}

/*=================
    説明文の装飾
=================*/
.rich_desc {
	margin: 1em 0;
}

.rich_desc p {
	margin: 0.5em 0;
}

.rich_desc h3 {
	margin: 1em 0 0;
	font-weight: bold;
	border-bottom: solid 1px #1d439a;
	border-bottom-color: var(--main-color);
}

.rich_desc h4 {
	margin: 1em 0 0;
	font-weight: bold;
}

.rich_desc mark {
	font-style: normal;
	background: linear-gradient(to bottom, transparent 50%, rgba(255, 255, 0, .2) 50%, rgba(255, 255, 0, .6) 100%);
}

.rich_desc strong {
	font-style: normal;
	font-weight: bold;
}

.rich_desc a.glossary {
	color: blue;
	border-bottom: 2px dashed blue;
}

.img_section {
	text-align: center;
}

.img_section > figure {
	display: inline-block;
	width: 240px;
	margin: 0.5em;
	vertical-align: top;
}

.img_section > figure > img {
	width: 100%;
	height: auto;
}
/*======================================
  文書内の枠
======================================*/
section.g {
	margin: 0.5rem 0;
	padding: 0.5rem;
}

@media (min-width: 900px) {

	section.g {
		margin: 0.5rem 0.5rem 2rem;
		background-color: white;
		border: 2px solid #ddd;
		border-radius: 8px;
	}

	.division {
		background-color: white;
		padding: 0 1.5em;
		margin: 4em 0;
		border: 2px solid #ddd;
		border-radius: 8px;
	}
}

section.g .i_container {
	margin: 0 -0.5rem;
}

.tc {
	margin: 0 auto;
	max-width: 40em;
}

/*======================================
  内部の部品
======================================*/

/* 上部のコンテキストナビ */
.context_nav {
	display: block;
	margin: 0.5rem 0;
	padding: 0em;
}

.context_nav li {
	display: inline-block;
	background: #f0efef;
	border: 0;
	margin: 0.2em 0.2em;
	padding: 0 0.4em;
	border-radius: 4px;
}

.fulltime .context_nav li {
	box-shadow: #C8D8FC 0 2px 0;
}

.parttime .context_nav li {
	box-shadow: #FE7474 0 2px 0;
}

.context_nav li a::after {
	content: " >";
}

@media (min-width: 500px) {
	.context_nav li a::after {
		content: "の求人 >";
	}
}

.context_nav li.search_again a::after {
	content: ">";
	color: black;
	color: var(--main-color);
	margin-left: 0.5em;
}

.context_nav li:hover {
	box-shadow: 1px 1px 2px #696969;
	border: none;
	background-color: #1d439a;
	background-color: var(--main-color);
}

.context_nav li:hover a {
	color: white;
}

.context_nav li:hover a::after {
	color: white;
}

/* キャッチフレーズ */
.firstview .catch_phrase {
	margin: 1em 0;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.2em;
	text-shadow: 2px 2px 3px #DDD;
}

@media (min-width: 500px) {
	.firstview .catch_phrase {
		font-size: x-large;
	}
}

main section.g h1 {
	margin: 1em 0;
	font-size: medium;
	color: black;
}

h1 .company_name, h1 .title {
	display: inline-block;
}

h1.span {
	margin-right: 0.5em;
}

h1 .emp_type {
	display: inline-block;
	color: white;
	padding: 0 0.2em;
	background-color: #1d439a;
	background-color: var(--main-color);
}

/* 新卒特集へのリンクボタン */
a.newgrads {
	display: block;
	padding: 0.2em 0.5em;
	margin: 0 0 0 auto;
	width: fit-content;
	background-color: #059900;
	border-radius: 1em 1em;
	color: white;
	font-weight: bold;
}

/* 仕事の特徴 */
.job_feature {
	border: 0;
	margin: 1rem 0;
	padding: 0.2rem;
	border: 0;
	border-radius: 4px;
	position: relative;
	transition: all 0.2s;
}

.job_feature .title {
	position: static;
	top: -1.2rem;
	left: 0.5rem;
	background: transparent;
	font-size: 1.44rem;
	font-weight: bold;
	color: #1d439a;
	color: var(--main-color);
}

.job_feature .title::after {
	position: absolute;
	right: 1rem;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	content: url(expand.svg);
}

.job_feature.open {
	margin-top: 1.5rem;
	padding-top: 0.6rem;
}

.job_feature.open .title {
	top: -1.2rem;
	position: absolute;
}

.job_feature.open .title::after {
	display: none;
}

@media (min-width: 500px) {
	.job_feature {
		margin-top: 1.5rem;
		padding-top: 0.6rem;
	}
	
	.job_feature .title {
		top: -1.2rem;
		position: absolute;
	}

	.job_feature .title::after {
		display: none;
	}
}

.fulltime .job_feature {
	background-color: #F7FAFF;
	box-shadow: #C8D8FC 0 2px 0;
}

.parttime .job_feature {
	background-color: #ffe6e6;
	box-shadow: #FE7474 0 2px 0;
}

.job_feature .content {
	margin: 0;
	padding: 0.2rem;
}

.job_feature .content li {
	display: inline-block;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: white;
	margin: 0.2rem 0;
	padding: 0 0.4rem;
	box-shadow: #ccc 0 2px 0;
}

.job_feature .content li::before {
	content: "● ";
	color: #ddd;
	font-size: 0.5rem;
	vertical-align: middle;
}

.openable .content {
	display: none;
}

.openable.open .content {
	display: block;
}

@media (min-width: 500px) {
	.openable .content {
		display: block;
	}
}

/* 仕事の概要 */
dl.job_summary {
	display: table;
}

dl.job_summary > div {
	display: table-row;
}

dl.job_summary > div > dt {
	display: table-cell;
	word-break: keep-all;
	padding-right: 0.5em;
}

dl.job_summary > div > dd {
	display: table-cell;
}


/* シフト時間 */
.shift_time {
	margin: 24px 0 0;
	font-weight: bold;
}

.shift_list {
	display: inline-block;
	width: 30px;
	text-align: center;
	margin: 0;
	vertical-align: text-bottom;
}

.shift_list .timezone {
	display: inline-block;
	font-size: 14px;
}

.shift_list .box {
	height: 20px;
}

.shift_list .box.none {
	background-color: rgb(196, 174, 167);
}

.shift_list .box.optional {
	background-color: #ff8877;
}

.shift_list .box.required {
	background-color: #ff0000;
}

.caption_list {
	margin: 8px 0;
	text-align: right;
	display: inline-block;
}
.caption_list .box_caption {
	display: inline-block;
	vertical-align: middle;
	margin-left: 8px;
	width: 30px;
	height: 20px;
}
.caption_list .box_caption.none {
	background-color: #c4aea7;
}
.caption_list .box_caption.optional {
	background-color: #ff8877;
}
.caption_list .box_caption.required {
	background-color: #ff0000;
}
.caption_list p {
	display: inline-block;
}

/* 業務内容 */
.job_promotion {
	display: block;
	margin: 1em 0;
	border: none;
	padding: 0;
	position: relative;
	background-color: #fffff1;
	transition: all 0.2s;
}

.job_promotion .title {
	display: block;
	position: static;
	width: 100%;
	border: 1px solid #fc2121;
	background-color: #fc2121;
}

.job_promotion .title > div {
	display: block;
	border-top: 1px dashed white;
	border-bottom: 1px dashed white;
	padding: 0 1em;
	color: white;
	font-size: 1.2rem;
	font-weight: bold;
}

.job_promotion .title > div::after {
	position: absolute;
	right: 1rem;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	content: url(expand-white.svg);
}

.job_promotion.open {
	margin-top: 1.5rem;
	border: 1px solid #fc2121;
	border-radius: 4px;
	padding: 1.5rem 0.5rem 0.5rem;
}

.job_promotion.open .title {
	display: inline-block;
	width: fit-content;
	position: absolute;
	top: -1rem;
}

.job_promotion.open .title > div::after {
	content: "";
}

@media (min-width: 500px) {
	.job_promotion {
		margin-top: 1.5rem;
		border: 1px solid #fc2121;
		border-radius: 4px;
		padding: 1.5rem 0.5rem 0.5rem;
	}

	.job_promotion .title {
		display: inline-block;
		width: fit-content;
		position: absolute;
		top: -1rem;
	}

	.job_promotion .title > div::after {
		content: "";
	}
}

/* 動画 */
.desc_video {
	display: block;
	margin: 1em auto;
}

.work_feature .rich_desc {
	padding: 0 0.25em;
}

/* この求人のポイント */
.work_feature {
	margin: 4em 0 0;
	position: relative;
	z-index: 0;
	border: 1px solid #1d439a;
	border-color: var(--main-color);
}

.work_feature .title_area {
	margin: -24px 0 0 0;
	text-align: center;
}
.work_feature .title {
	z-index: 1;
	display: inline-block;
	margin: 0 auto;
	padding: 0 4px;
	background-color: white;
	vertical-align: middle;
}

.work_feature .title_img {
    width: 44px;
    vertical-align: middle;
}

/* 仕事スペック表 */
.job_tables {
	margin: 1em auto;
}

.job_tables > div {
	border-bottom: 1px solid #1d439a;
	border-bottom-color: var(--main-color);
	padding: 8px 0;
}

.job_tables > div > dt {
	margin: 0;
	padding: 0;
}

.job_tables > div > dd {
	margin-left: 0;
	padding-left: 0;
}

@media (min-width: 500px) {
	.job_tables > div > dd {
		padding-left: 2em;
	}
}

.job_tables ul.tag_list {
	margin: 0;
	padding: 0;
}

.job_tables ul.tag_list li {
	display: inline-block;
	margin: 0 4px;
}

.job_tables ul.tag_list li:before {
	content: "◆";
	font-size: 6px;
	vertical-align: middle;
	padding-right: 4px;
}

/* 勤務地 */
.address {
	margin: 16px 0;
}

.address p {
	margin: 1.5em 0;
}

.gmap {
	width: auto;
	height: 400px;
}

.gmap iframe {
	width: 100%;
	height: 100%;
}

/* 会社情報 */
p.company_name {
	font-size: x-large;
	font-weight: bold;
	text-align: center;
}

.company_image {
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
}

/* エントリーボタン */
.entry_buttons {
	margin: 3em 0;
}

.entry_buttons a {
	display: block;
	margin: 16px auto;
	width: 240px;
	height: 40px;
	border: 1px solid #1d439a;
	border-color: var(--main-color);
	background-color: white;
	text-align: center;
	line-height: 40px;
	font-weight: bold;
	color: #1d439a;
	color: var(--main-color);
	transition: color .2s, background-color .2s, border-color .2s;
}

.entry_buttons a:hover {
	background-color: #1d439a;
	background-color: var(--main-color);
	color: white;
}

.entry_buttons a.entry {
	background-color: #1d439a;
	background-color: var(--main-color);
	color: white;
}

.entry_buttons a.entry:hover {
	background-color: white;
	color: #1d439a;
	color: var(--main-color);
}

/* お問い合わせ先リンク */
.content .toform {
	margin: 3em 0;
}

.content .toform a:hover {
	text-decoration: underline;
}

/* おすすめ求人 */
aside.recommend_jobs {
	max-width: 1180px;
	margin: 0 auto;
}

/*======================================
  ボトムナビ
======================================*/
/* ボトムナビ */
body {
	padding-bottom: 75px;
}

.bottom_nav {
	display: block;
	height: 75px;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
	z-index: 10;
	box-shadow: 0px 0px 8px #BBB;
	background-color: white;
	font-size: 12px;
	text-align: center;
	line-height: 75px;
	color: black;
}

@supports (display: flex) {
	.bottom_nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
}

@media (min-width: 640px) {
	body {
		padding-bottom: 0;
	}
	.bottom_nav {
		display: none;
	}
}

.bottom_nav a {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	margin: 0 0.3em;
}

.bottom_nav a p {
	margin: 0;
	padding: 0;
	color: black;
}

.bottom_nav a.entry {
	width: 64px;
	height: 64px;
	line-height: 64px;
	border-radius: 50% 50%;
	background: #1d439a;
	background-color: var(--main-color);
}

.bottom_nav a.entry p {
	color: white;
	font-weight: bold;
	font-size: 20px;
	vertical-align: middle;
}

@media print {
	.bottom_nav {
		display: none;
	}
}

/*----------------------------------------*
 * NRギャラリー
 *----------------------------------------*/
/* ギャラリーの外枠 */
.NRGallery {
	width: 100%;
	height: auto;
	min-height: 320px;
	margin: 2em auto 4em;
	overflow: hidden;
}

/* 表示エリア */
.NRGallery .image_area {
	width: 100%;
	aspect-ratio: 640 / 480;
	background: #EEEEEE;
	position: relative;
	max-width: 640px;
	max-height: 480px;
	margin: 0 auto;
}

.NRGallery ul.slides {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* スライド */
.NRGallery ul.slides li {
	position: absolute;
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	list-style-type: none;
	z-index: 0;
}

.NRGallery ul.slides li.show {
	z-index: 1;
}

/* スライド内の画像 */
.NRGallery ul.slides li img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* スライド内の字幕 */
.NRGallery ul.slides li .caption {
	position: absolute;
	width: 100%;
	bottom: 0;
	text-shadow: 0px 0px 2px black;
	background: linear-gradient(to bottom, transparent, black);
	color: white;
	font-size: 20px;
	text-align: center;
}

/* サムネイルエリア */
.NRGallery ul.thumbnails {
	margin: 1em auto 0;
    max-width: 640px;
	display: block;
	padding: 0;
}
.NRGallery ul.thumbnails li {
	display: inline-block;
	box-sizing: border-box;
	border: transparent 2px solid;
	width: 64px;
	height: 64px;
}
.NRGallery ul.thumbnails li img {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
    cursor: pointer;
}

.NRGallery ul.thumbnails li.selected {
	border-color: blue;
}

.NRGallery .image_area .button {
	position: absolute;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	line-height: 50px;
	vertical-align: middle;
	text-align: center;
	top: calc((100% - 50px) / 2);
	z-index: 10;
	font-family: monospace;
	font-size: 32px;
	cursor: pointer;
}

.NRGallery .image_area .left_btn {
	left: 0;
}

.NRGallery .image_area .right_btn {
	right: 0;
}

.NRGallery .image_area .button img {
    display: block;
    margin: auto;
    width: 75%;
    height: 75%;
}