@charset "utf-8";

.page .card-yoko {
	background-color: #fff;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	flex-direction: row-reverse;
	box-shadow: 2px 5px 3px rgb(223 223 223 / 82%);
}

.page .card-yoko .img-box {
	width: 45%;
}

.page .card-yoko .img-box img {
	object-fit: cover;
	aspect-ratio: 11 / 9;
}

.page .card-yoko .text-area {
	width: 55%;
	padding: 20px;
}

@media screen and (max-width:767px) {
	.page .card-yoko {
		display: block;
	}

	.page .card-yoko .img-box,
	.page .card-yoko .text-area {
		width: 100%;
		line-height: 1.8;
	}

	.page .card-yoko .text-area h3 {
		margin-top: 0;
	}
}

.page .card-tate {
	background-color: #fff;
	padding: 30px;
	max-width: 800px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
}

.page .card-tate img {
	max-height: 300px;
	width: 100%;
	object-fit: cover;
}

/*ヒーロー　#hero
---------------------------------------------------------------------------*/
.page #hero {
	padding-top: 200px;
	margin-bottom: 40px;
}

.page #hero .text-slide span {
	color: #0450ff;
	line-height: 1.7;
	padding: 0 20px;
}

.page #hero h1.text-slide-bg {
	margin-top: -150px;
	margin-bottom: 80px;
}

.page #hero h1 {
	text-align: center;
	color: #0e3980;
	font-size: 2rem;
}

.page #hero .hero-recruit {
	background: url(../images/hero-recruit.jpg) no-repeat center;
	background-size: cover;
	margin-top: -30px !important;
	padding: 200px 0 50px;
}

.page #hero .hero-company {
	background: url(../images/hero-company.jpg) no-repeat center;
	background-size: cover;
	margin-top: -30px !important;
	padding: 200px 0 50px;
}

.page #hero .hero-voice {
	background: url(../images/hero-voice.jpg) no-repeat center;
	background-size: cover;
	margin-top: -30px !important;
	padding: 200px 0 50px;
}

.page #hero .hero-job {
	background: url(../images/hero-job.jpg) no-repeat center;
	background-size: cover;
	margin-top: -30px !important;
	padding: 200px 0 50px;
}

.page #hero .hero-box p {
	text-align: left;
	letter-spacing: 1px;
	font-weight: 500;
	line-height: 1.5;
	font-size: 3vw;
	color: #ffffff;
	text-shadow: 2px 3px 3px rgba(80, 144, 226, 0.82);
}

@media screen and (min-width:1200px) {
	.page #hero .hero-box p {
		font-size: 40px;
	}
}

@media screen and (max-width:767px) {
	.page #hero {
		padding-top: 170px;
	}

	.page #hero .text-slide {
		font-size: 100px !important;
	}

	.page #hero h1.text-slide-bg {
		margin-top: -115px;
		margin-bottom: 60px;
	}
}

@media screen and (max-width:600px) {
	.page #hero {
		padding-top: 150px;
	}

	.page #hero .text-slide {
		font-size: 100px !important;
	}

	.page #hero h1.text-slide-bg {
		font-size: 1.5rem;
		margin-top: -104px;
		margin-bottom: 60px;
	}

	.page #hero .hero-box {
		margin-top: -30px !important;
		padding: 170px 0 20px;
	}

	.page #hero .hero-box p {
		line-height: 1.8;
		font-size: 4.5vw;
	}

	.page #hero .hero-recruit {
		background-position: right top;
	}

	.page #hero .hero-recruit p br,
	.page #hero .hero-company p br {
		display: none;
	}
}

/*company-area
---------------------------------------------------------------------------*/
.company-area h2 {
	color: #144494;
}

/* tab_box
---------------------------------------------------------------------------*/

.tab_box .btn_area {
	display: flex;
	gap: 10px;
	justify-content: center;
	width: 98%;
	margin-left: auto;
	margin-right: auto;
}

.tab_box h2 {
	font-size: 1.5rem;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 40px;
}

.page .tab_box .card-tate h3 {
	padding-top: 60px;
	text-align: center;
	font-size: 1.2rem;
	background: url(../images/card-tate-fukidashi.png) no-repeat left 50px top;
	background-size: 240px;
	position: relative;
}

.page .tab_box .card-yoko {
	margin-bottom: 60px;
}

.page .tab_box .card-tate h3::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	background: url(../images/yubi.png) no-repeat;
	background-size: contain;
	margin-right: 8px;
}

.tab_box .tab_btn {
	width: 33%;
	padding: 8px 0;
	color: #06539f;
	border-top: 1px solid #1b56ba;
	border-left: 1px solid #1b56ba;
	border-right: 1px solid #1b56ba;
	background: #ffffff;
	text-align: center;
	cursor: pointer;
	border-radius: 6px 6px 0 0;
	transition: all 0.2s ease 0s;
}

.tab_box .tab_btn:hover {
	background-color: #dce1e4;
}

.tab_box .tab_btn.active {
	background: #1b56ba;
	color: #fff;
}

.tab_box br {
	display: none;
}

.page .tab_box .appeal01,
.page .tab_box .appeal02,
.page .tab_box .appeal03,
.page .tab_box .appeal04,
.page .tab_box .appeal05 {
	position: relative;
}

.page .tab_box .appeal01 .text-area,
.page .tab_box .appeal02 .text-area,
.page .tab_box .appeal03 .text-area,
.page .tab_box .appeal04 .text-area,
.page .tab_box .appeal05 .text-area {
	position: relative;
	padding: 30px 20px 20px 30px !important;
}

.page .tab_box .appeal01::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -10px;
	left: -30px;
	width: 240px;
	height: 72px;
	background: url(../images/appealpoint01.svg) no-repeat;
	background-size: contain;
}

.page .tab_box .appeal02::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -10px;
	left: -30px;
	width: 240px;
	height: 72px;
	background: url(../images/appealpoint02.svg) no-repeat;
	background-size: contain;
}

.page .tab_box .appeal03::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -10px;
	left: -30px;
	width: 240px;
	height: 72px;
	background: url(../images/appealpoint03.svg) no-repeat;
	background-size: contain;
}

.page .tab_box .appeal04::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -10px;
	left: -30px;
	width: 240px;
	height: 72px;
	background: url(../images/appealpoint04.svg) no-repeat;
	background-size: contain;
}

.page .tab_box .appeal05::before {
	content: "";
	display: inline-block;
	position: absolute;
	top: -10px;
	left: -30px;
	width: 240px;
	height: 72px;
	background: url(../images/appealpoint05.svg) no-repeat;
	background-size: contain;
}

.tab_box #tab_panel-3 .flex {
	justify-content: space-between;
}

.tab_box #tab_panel-3 .flex div.card {
	margin-bottom: 0px;
}

@media screen and (max-width:767px) {
	.tab_box .tab_btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_box {
		line-height: 1.5;
	}

	.tab_box span {
		display: none;
	}

	.tab_box br {
		display: block;
	}

	.page .tab_box .last .inner-900 {
		display: block;
	}

	.page .tab_box .last .flex div.card {
		width: 100%;
		margin: 0 auto 50px !important;
	}

	.page .card-tate {
		padding: 20px;
		width: 100%;
	}

	.page .tab_box .card-tate h3 {
		text-align: left;
		font-size: 4vw;
	}
}

.tab_box .panel_area {
	border: solid 1px #e3ebf3;
	padding: 20px;
	background-color: #f2f7ff;
	padding-bottom: 40px;
}

.tab_box .tab_panel {
	display: none;
}

.tab_box .tab_panel.active {
	display: block;
}

.page .tab_box .button-1 {
	margin-top: 60px;
	margin-bottom: 20px;
}

/* voice-area
---------------------------------------------------------------------------*/

.voice-area .voice:nth-child(2n) {
	flex-direction: row-reverse;
}

.voice-area .img-area img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	overflow: hidden;
	position: relative;
	border-radius: 15px;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}


.voice {
	width: 100%;
	justify-content: space-between;
	margin-top: 80px;
}

.voice .img-area {
	width: 33%;
}

.voice .tex-area {
	width: 63%;
}

.voice p {
	margin: 0px;
}

.voice p.small {
	font-size: 0.85em;
	color: #0e3980;
}

.voice h2.name {
	margin-top: 0px;
	margin-bottom: 0px;
}

.voice-area .box {
	position: relative;
	margin: 2em 0;
	padding: 1em 1em;
	border: solid 1px #1b56ba;
	border-radius: 8px;
}

.voice-area .box .box-title {
	position: absolute;
	display: inline-block;
	top: -9px;
	left: 10px;
	padding: 0 9px;
	line-height: 1;
	font-size: 15px;
	background: #FFF;
	color: #1b56ba;
}

.voice-area .box p {
	margin: 0;
	padding: 0;
}

.voice-area .button-1 {
	margin-top: 50px;
}

@media screen and (max-width:767px) {
	.voice-area {
		padding-bottom: 40px;
	}

	.voice {
		flex-wrap: wrap;
		justify-content: center;
		margin-top: 40px;
	}

	.voice .img-area {
		width: 70%;
		margin-bottom: 30px;
	}

	.voice .tex-area {
		width: 96%;
	}

	.voice-area .button-1 {
		margin-top: 0px;
	}
}

/* recruit-area
---------------------------------------------------------------------------*/
.recruit-area h2 {
	background-color: #1b56ba;
	color: #FFF;
	text-align: center;
	border-radius: 10px 10px 0px 0px;
	padding: 0.5em;
	font-weight: 500;
	letter-spacing: 2px;
}


/* テーブル_下LINE
---------------------------------------------------------------------------*/
.table_bb {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 40px;
}

.table_bb th {
	padding: 15px 15px;
	border-bottom: 1px solid #1A56BA;
}

.table_bb td {
	padding: 10px 15px;
	border-bottom: 1px solid #D8D8D8;
}

.table_bb th {
	width: 15%;
	text-align: left;
}

@media only screen and (max-width:600px) {
	.table_bb th {
		border: 1px solid #D8D8D8;
		background: #F2F7FF;
		width: 15%;
		text-align: left;
	}

	.table_bb td {
		border-left: 1px solid #D8D8D8;
		border-right: 1px solid #D8D8D8;
	}

	.table_bb th,
	td {
		width: auto;
		display: block;
		border-top: none;
	}

	.table_bb tr:first-child {
		border-top: 1px solid #d5d5d5;
	}
}


/* 問い合わせフォーム
---------------------------------------------------------------------------*/
.contact-tel {
	max-width: 500px;
	width: 96%;
	margin: 0 auto 50px;
}

.contact_form h2 {
	text-align: center;
	margin-bottom: 40px;
	color: #144494;
}

.contact_form .privacy h2 {
	text-align: center;
	margin-bottom: 20px;
	color: #050505;
}

/* ------------------------------------ */
/* フォーム共通書式 */
/* ------------------------------------ */
.contact_form {
	padding: 40px 40px 60px;
	background-color: #F2F7FF;
	margin-bottom: 50px;
}

.form_block {
	display: grid;
	grid-template-columns: 14em 1fr;
	border-top: 1px solid #dadada;
	padding: 1em;
	align-items: center;
	height: 5em;
}

.form_block.colm1 {
	display: flex;
	justify-content: center;
}

/* 必須アイコン */
.form-required {
	margin-left: 1.5em;
	color: #fff;
	background-color: #f67a7a;
	padding: 2px 8px;
	font-size: 0.8rem;
	border-radius: 3px;
}

/* 入力欄 */
.form_field {
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 0.8em 1em;
}

.contact_form input::placeholder,
.contact_form textarea::placeholder {
	opacity: 0.5;
	color: rgb(165, 165, 165);
}

/* ------------------------------------ */
/* ラジオボタン専用 */
/* ------------------------------------ */
.label_radio+.label_radio {
	margin-left: 2em;
}

.radio_span {
	margin-left: 0.5em;
}

/* ------------------------------------ */
/* checkbox専用 */
/* ------------------------------------ */
.label_checkbox+.checkbox {
	margin-left: 2em;
}

.checkbox_span {
	margin-left: 0.5em;
}

/* ------------------------------------ */
/* セレクト：プルダウン専用 */
/* ------------------------------------ */
.select_block {
	padding-left: 1em;
}

/* ------------------------------------ */
/* 段落入力 */
/* ------------------------------------ */
.form_block.--textfield {
	align-items: start;
	height: auto;
}

.form_field.--textfield {
	height: 20em;
	resize: none;
}

/* ------------------------------------ */
/* 個人情報 */
/* ------------------------------------ */
.contact_form .privacy {
	width: 100%;
	margin: 0 auto 50px;
	background-color: #fff;
	border: 1px solid #727272;
	padding: 0 1.5em 1.5em;
	max-height: 14em;
	overflow-y: scroll;
}

.colm1 br {
	display: none;
}

.colm1 .form-required {
	margin-left: 0em;
}

/* ------------------------------------ */
/* 送信ボタン */
/* ------------------------------------ */
.contact_form .button-1 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50%;
	border: none;
	margin: 0 auto;
	padding: 1.5em 2em;
	background: url(../images/arrow.svg) no-repeat center right 10% / 12%;
	background-color: #1b56ba;
	color: #ffffff;
	font-size: 1em;
	transition: 0.6s;
	cursor: pointer;
}

@media only screen and (max-width:600px) {
	.page.entry #hero {
		margin-bottom: 0px;
	}

	.contact-tel {
		margin: 0 auto 30px;
	}

	.contact_form {
		padding: 20px 20px 50px;
	}

	.form_block {
		display: block;
		height: auto;
		padding: 1em 0;
	}

	.form_field {
		width: 100%;
	}

	.colm1 br {
		display: block;
	}

	.contact_form .button-1 {
		width: 100%;
	}

	.form_radio-wrapper label {
		display: block;
	}

	.label_radio+.label_radio {
		margin-left: 0em;
	}

	.form_label {
		margin-bottom: 10px;
	}
}

/* voice-area
---------------------------------------------------------------------------*/
.thanks-area {
	text-align: center;
	padding-bottom: 100px;
}

.thanks-area h2,
.thanks-area p {
	color: #0e3980;
}

.thanks-area br {
	display: block;
}

@media only screen and (max-width:600px) {
	.thanks-area br {
		display: none;
	}
}