@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #046380;
	--accent-color: #046380;
	--dark-main-color: #002F2F;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
}


/* 基本設定： フォントサイズ */
@media (max-width: 599px) {
	:root {
		font-size: 14px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 16px;
	}
}

@media (min-width: 800px) {
	:root {
		font-size: 18px;
	}
}

body {
	font-size: 16px;
}



/* 基本設定： ページ全体 */
body {
	margin: 0;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro',
		sans-serif;
}


/* コンテンツA： ヒーローイメージ */
.conA {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	min-height: 450px;
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/ricruit.JPG);
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
	text-align: center;
}

.conA.compact {
	height: 450px;
	min-height: 0;
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/ricruit.JPG);
}

.conA h1 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 15vw;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
}

.conA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 18px;
}

.conA img {
	width: 20%;
}

.conA a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #A7A37E;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}

.conA a:hover {
	background-image: linear-gradient(rgba(255, 255, 255, 0.2),
			rgba(255, 255, 255, 0.2));
}


@media (min-width: 768px) {
	.conA h1 {
		font-size: 115px;
	}

	.conA p {
		font-size: 24px;
	}
}

/* コンテンツB： ヒーローイメージ */
.conB {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50vh;
	min-height: 450px;
	background-image: #ffffff;
	background-position: center;
	background-size: cover;
	color: #000000;
	color: var(--text-bright-color);
	text-align: center;
}

.conB.compact {
	height: 450px;
	min-height: 0;
	background-image: #f1f3f1;
}

.conB h1 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 15vw;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
}

.conB p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 18px;
	color: #000000;
}

.conB img {
	width: 20%;
}

.conB a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #A7A37E;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}

.conB a:hover {
	background-image: linear-gradient(rgba(255, 255, 255, 0.2),
			rgba(255, 255, 255, 0.2));
}


@media (min-width: 768px) {
	.conB h1 {
		font-size: 115px;
	}

	.conB p {
		font-size: 24px;
	}
}






/* コンテンツC： 概要（画像＋テキスト） */
.conC {
	background-color: #046380;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
}

.conC .text {
	padding: 20px;
}

.conC h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}

.conC p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}

.conC a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #A7A37E;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}

.conC a:hover {
	background-image: linear-gradient(rgba(255, 255, 255, 0.2),
			rgba(255, 255, 255, 0.2));
}

.conC .photo {
	min-height: 200px;
	background-image: url(img/note.jpg);
	background-position: center;
	background-size: cover;
}

@media (min-width: 768px) {
	.conC .container {
		display: flex;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.conC .photo {
		flex: 3;
	}

	.conC .text {
		flex: 2;
		padding: 50px;
	}
}

/* コンテンツD： ヒーローイメージ */
.conD {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50vh;
	min-height: 450px;
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/recruit_conD.jpg);
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
	text-align: center;
}

.conD.compact {
	height: 450px;
	min-height: 0;
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/recruit_conD.jpg);
}

.conD h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro',
		sans-serif;
	font-size: 2vw;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
	color: #000000;
}

.conD p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 18px;
	color: #000000;
}

.conD img {
	width: 20%;
}

.conD a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #A7A37E;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}

.conD a:hover {
	background-image: linear-gradient(rgba(255, 255, 255, 0.2),
			rgba(255, 255, 255, 0.2));
}


@media (min-width: 768px) {
	.conD h1 {
		font-size: 115px;
	}

	.conD p {
		font-size: 24px;
	}
}



/* コンテンツE： 概要（画像＋テキスト：逆配置） */
.conE .container {
	padding-top: 2px;
	height: 800px;
}

.conE .text {
	padding: 20px;
}

.conE h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 20px;
}

.conE p {
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.8;
}

.conE a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	box-shadow: 0 0 0 1px #888;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #fc9802;
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}

.conE a:hover {
	background-image: linear-gradient(rgba(255, 255, 255, 0.2),
			rgba(255, 255, 255, 0.2));
}

.conE .photo {
	min-height: 100%;
	background-image: url(../img/recruit_ceo.jpg);
	background-position: center;
	background-size: cover;
}

@media (min-width: 768px) {
	.conE .container {
		display: flex;
		flex-direction: row-reverse;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
		padding-top: 40px;
		padding-bottom: 40px;
	}

	.conE .photo {
		flex: 0 0 400px;
	}

	.conE .text {
		flex: 1;
		padding: 50px;
	}
}

/* コンテンツF： ヒーローイメージ */
.conF {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30vh;
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/recruit_conD.jpg);
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
	text-align: center;
}

.conF.compact {
	height: 300px;
	min-height: 0;
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/recruit_conD.jpg);
}

.conF h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro',
		sans-serif;
	font-size: 2vw;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
	color: #000000;
}

.conF p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 18px;
	color: #000000;
}

.conF img {
	width: 20%;
}

.conF a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #A7A37E;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}

.conF a:hover {
	background-image: linear-gradient(rgba(255, 255, 255, 0.2),
			rgba(255, 255, 255, 0.2));
}


@media (min-width: 768px) {
	.conF h1 {
		font-size: 115px;
	}

	.conF p {
		font-size: 24px;
	}
}

/* コンテンツG： ヒーローイメージ */
.conG {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30vh;
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/konpousizai-photo.jpg);
	background-position: center;
	background-size: cover;
	color: #fff;
	color: var(--text-bright-color);
	text-align: center;
}

.conG.compact {
	height: 300px;
	min-height: 0;
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../img/konpousizai-photo.jpg);
}

.conG h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro',
		sans-serif;
	font-size: 2vw;
	letter-spacing: 0.2em;
	margin-left: 0.2em;
	color: #ffffff;
}

.conG p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 18px;
	color: #ffffff;
}

.conG img {
	width: 20%;
}

.conG a {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 30px;
	border: solid 3px currentColor;
	border-radius: 6px;
	background-color: #A7A37E;
	background-color: var(--accent-color);
	color: #fff;
	color: var(--text-bright-color);
	font-size: 14px;
	text-decoration: none;
}

.conG a:hover {
	background-image: linear-gradient(rgba(255, 255, 255, 0.2),
			rgba(255, 255, 255, 0.2));
}


@media (min-width: 768px) {
	.conG h1 {
		font-size: 115px;
	}

	.conG {
		font-size: 24px;
	}
}



/* フッター */
footer {
	color: #fff;
	color: var(--text-bright-color);
	background-color: #002F2F;
	background-color: var(--dark-main-color);
}

footer .container {
	padding: 40px 20px;
}


@media (min-width: 768px) {
	footer .container {
		display: flex;
		flex-wrap: wrap;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.footA {
		flex: 0 0 40%;
	}

	.footB {
		flex: 0 0 60%;
	}

	.footC {
		flex: 0 0 100%;
	}
}


/* フッターA： サイト情報 */
.footA {
	margin-bottom: 30px;
}

.footA h2 {
	margin-top: 0;
	margin-bottom: 10px;
	font-family: 'Montserrat', sans-serif;
	font-size: 30px;
	letter-spacing: 0.2em;
}

.footA p {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 14px;
}

.footA a {
	color: inherit;
	text-decoration: none;
}


/* フッターB： フッターメニュー */
.footB div {
	margin-bottom: 20px;
}

.footB h3 {
	margin-top: 0;
	margin-bottom: 10px;
	border-bottom: solid 1px currentColor;
	font-size: 14px;
}

.footB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footB a {
	display: block;
	padding: 5px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}

.footB a:hover {
	background-color: rgba(0, 0, 0, 0.3);
}


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

	.footB div {
		flex: 1;
	}

	.footB div:not(:first-child) {
		margin-left: 40px;
	}
}


/* フッターC： コピーライト */
.footC {
	font-size: 12px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
}


/* フッターD： SNSメニュー */
.footD {
	margin-top: 20px;
}

.footD ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footD a {
	display: block;
	margin-right: 8px;
	padding: 0;
	color: inherit;
	font-size: 16px;
	text-decoration: none;
	border: solid 1px currentColor;
	width: 2em;
	line-height: 2em;
	border-radius: 50%;
	text-align: center;
}

.footD a:hover {
	background-color: rgba(0, 0, 0, 0.3);
}


/* ヘッダー */
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	background-color: #fff;
}

.nohero header {
	position: static;
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px var(--gray-color);
}

/* ヘッダーA: サイト名 */
.headA {
	display: inline-block;
	line-height: 70px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: #046380;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	text-decoration: none;
}


/* ヘッダーB： ナビゲーションメニュー */
.headB ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.headB a {
	display: block;
	padding: 15px;
	color: inherit;
	font-size: 12px;
	text-decoration: none;
}

.headB a:hover {
	background-color: rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
	header .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: 1000px;
		max-width: var(--large-width);
		margin-left: auto;
		margin-right: auto;
	}

	.headB ul {
		display: flex;
	}
}


/* ヘッダーC： トグルボタン */

@media (max-width: 767px) {

	/* 小さい画面用の設定 */
	header .container-small {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.headC {
		margin-right: 10px;
		padding: 0;
		border: none;
		outline: none;
		background: none;
		font-size: 28px;
		opacity: 0.5;
		cursor: pointer;
	}

	.headC:hover {
		opacity: 0.3;
	}

	.headB {
		display: none;
	}
}

@media (min-width: 768px) {

	/* 大きい画面用の設定 */
	.headC {
		display: none;
	}

	.headB {
		display: block !important;
	}
}




/* アレンジ: ヘッダーの色 */
.head-color {
	background-color: #046380;
	background-color: var(--main-color);
	color: #fff;
	color: var(--text-bright-color);
}

.head-color .headA {
	background-color: transparent;
	color: inherit;
}

.head-color .headC {
	color: inherit;
}


/* アレンジ: ヘッダーとヒーローイメージを一体化 */
.head-hero {
	background-color: transparent;
	color: #fff;
	color: var(--text-bright-color);
}

.head-hero .headA {
	background-color: transparent;
	color: inherit;
}

.head-hero .headC {
	color: inherit;
	opacity: 1;
}

@media (max-width: 767px) {
	.head-hero .headB {
		background-color: rgba(0, 0, 0, 0.6);
	}
}


/* アレンジ: ヘッダーを画面上部に固定 */
.head-fixed,
.nohero .head-fixed {
	position: fixed;
}

.nohero .head-fixed+* {
	margin-top: 70px;
}


/* アレンジ: 関連記事メニュー */
.related {
	background-color: #046380;
	background-color: var(--main-color);
	padding: 30px 0;
}

.related ul {
	display: flex;
	flex-wrap: wrap;
	max-width: 1000px;
	max-width: var(--large-width);
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

.related li {
	flex: 1 1 100%;
	display: flex;
}

.related a {
	flex: 1;
	margin: 10px;
	display: block;
	border: solid 1px #ddd;
	border: solid 1px var(--gray-color);
	background-color: rgba(255, 255, 255, 0.5);
	color: inherit;
	text-decoration: none;
}

.related a:hover {
	opacity: 0.8;
}

.related .photo {
	min-height: 100px;
	background-position: center;
	background-size: cover;
}

.related .text {
	margin: 10px;
}

.related h2 {
	font-size: 18px;
}

.related p {
	font-size: 14px;
	opacity: 0.8;
}

@media (min-width: 600px) and (max-width: 899px) {
	.related li {
		flex: 1 1 50%;
	}
}

@media (min-width: 900px) {
	.related li {
		flex: 1 1 25%;
	}
}


.cont_wrap {
	width: 55%;
	margin-right: auto;
	margin-left: auto;
}

.content table.table_02 {
	width: 96%;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 30px;
	margin-left: auto;
	max-width: 600px;
}

.content table.table_02 th,
.content table.table_02 td {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	padding: 20px;
}

.content table.table_02 th {
	font-size: 18px;
	white-space: nowrap;
	font-weight: normal;
	letter-spacing: 1px;
	width: 33%;
	background-color: #F6F6F6;
}

.content table.table_02 td {
	font-size: 16px;
	line-height: 30px;
	background-color: #FFF;
}

.content table.table_02 td .price {
	font-size: 15px;
	text-align: center;
	white-space: nowrap;
	color: #000000;
	padding-right: 5px;
	padding-left: 5px;
}

header {
	position: sticky;
	top: 0;
	z-index: 999;
}

.content h2 {
	font-size: 28px;
	line-height: 30px;
	margin-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #DDD;
	font-weight: normal;
	letter-spacing: 1px;
	color: #111;
	text-align: center;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;
	/*	font-family: "メイリオ", "Meiryo", arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;*/
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 10px;
	clear: both;
}

.content h3 {
	text-align: center;
	font-size: 22px;
	line-height: 30px;
	margin-bottom: 30px;
	background-color: #F6F6F6;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	position: relative;
	margin-top: 30px;
	padding-top: 15px;
	padding-right: 10px;
	padding-bottom: 15px;
	padding-left: 44px;
	font-weight: normal;
	color: #111;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Osaka, "ＭＳ ゴシック", "MS Gothic", sans-serif;
	/*	font-family: "メイリオ", "Meiryo", arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;*/
	clear: both;
}

@media (max-width: 900px) {

	/* PC用の改行を消して、代わりにわずかな隙間を作る */
	br {
		display: none;
	}
}

/* 基本は隠しておく */
.sp-only {
	display: none;
}

@media (max-width: 900px) {

	/* スマホの時だけ有効にする */
	.sp-only {
		display: block;
	}
}

/* --- 重なりと隠れを完全に解消する設定 --- */

/* 1. 全デバイス共通：高さを固定せず、中身の文章量に合わせる */
.conE .container {
    height: auto !important;     /* 800px固定を強制解除 */
    min-height: 0 !important;
    display: block !important;   /* スマホでは縦並びを確定 */
    overflow: visible !important; /* 文章が隠れるのを防ぐ */
}

/* 2. PC・タブレット（768px以上）の横並び設定を上書き */
@media (min-width: 768px) {
    .conE .container {
        display: flex !important; /* PCでは横並び */
        flex-direction: row-reverse !important;
        padding: 60px 0 !important;
    }
}

/* 3. スマホ版（767px以下）の表示調整 */
@media (max-width: 767px) {
    .conE {
        height: auto !important;
        padding-bottom: 40px !important;
        background-color: #fff !important;
    }

    /* 代表画像の設定（1人で顔が見える状態を維持） */
    .conE .photo {
        width: 100% !important;
        height: 350px !important; 
        background-repeat: no-repeat !important;
        background-size: contain !important;
        background-position: center top !important;
        margin-bottom: 10px !important;
    }

    /* 隠れていた文章を強制的に表示し、左寄せにする */
    .conE .text {
        width: 100% !important;
        height: auto !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
        display: block !important;
        position: relative !important; /* 重なりを防ぐ */
    }

    .conE .text h2,
    .conE .text p {
        text-align: left !important; /* 左寄せ */
        color: #111 !important;     /* 文字色を確実に出す */
        display: block !important;
        margin-bottom: 15px !important;
    }

    /* 重なっていたENTRYセクションを文章の「後」へ押し下げる */
    .conF {
        position: relative !important;
        top: 0 !important;           /* 変な位置固定を解除 */
        clear: both !important;      /* 前の要素との重なりを禁止 */
        margin-top: 20px !important;
        display: block !important;
    }
.conF {
        padding: 60px 20px !important; /* 上下にしっかり余白を作る */
        background-size: cover !important; /* 背景画像を隙間なく表示 */
        text-align: center !important;
    }

    .conF p {
        font-size: 20px !important; /* キャッチコピーを少し大きく */
        font-weight: bold !important;
        margin-bottom: 30px !important; /* ボタンとの間隔を空ける */
        color: #111 !important;
        line-height: 1.5 !important;
    }

    .conF a {
        display: inline-block !important;
        width: 200px !important; /* ボタンの横幅を固定 */
        padding: 15px 0 !important;
        font-size: 18px !important;
        letter-spacing: 2px !important;
        border-radius: 4px !important; /* 少し角を丸く */
        text-decoration: none !important;
    }
}