@charset "UTF-8";

/* =======================================================================================
	PC
======================================================================================= */

/* 初期設定 */

html { overflow-x: visible;}

body {
	font-size: 1.8rem;
	line-height: 1.8;
}

img {
	width: auto;
	transition: 0.2s;
}

svg { vertical-align: bottom; }

ul, ol { list-style: none; }

a {
	color: #3687bc;
	transition: 0.3s;
	text-decoration: none;
}
a:focus-visible {
	outline: -webkit-focus-ring-color auto 1px;
}

/* レイアウト */

.site-main { margin: 0; }

.mainArea {
	background: #ffee4b;
	padding-bottom: 80px;
}

/* ファーストビュー */

.fv {
	width: 100%;
	background-image: url("../img/fv-bg-left.png"), url("../img/fv-bg-right.png");
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
}
.fv-inner {
	width: 1200px;
	height: 600px;
	background-image: url("../img/fv-illust-left.png"), url("../img/fv-illust-right.png");
	background-position: 20px center, calc(100% - 20px) center;
	background-repeat: no-repeat, no-repeat;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}
.fv-inner h1 {
	font-size: 20px;
	margin: 0;
	text-align: center ;
}

.truths {
	width: 100%;
	margin-bottom: 100px;
}
.truths-inner {
	width: 1200px;
	margin: 0 auto;
	text-align: center;
}

/* 共通 */

.section {
	width: 100%;
	margin-bottom: 80px;
}

.section-inner {
	width: 1200px;
	background: #fff;
	border-radius: 20px;
	margin: 0 auto;
	padding: 50px;
	position: relative;
}
.section.num5 { margin-bottom: 200px; }

.section.num1 .section-inner {
	border-top-left-radius: 1000px;
	border-top-right-radius: 1000px;
	border-bottom-left-radius: 40px;
	border-bottom-right-radius: 40px;
	padding: 100px 0 0 0;
}
.section.num5 .section-inner {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom-left-radius: 1000px;
	border-bottom-right-radius: 1000px;
}

.section-inner::after {
	content: "";
	width: 132px;
	height: 132px;
	background: url("../img/num1.png") no-repeat;
	position: absolute;
	top: -40px;
	left: 40px;
}
.section.num1 .section-inner::after {
	background: url("../img/num1.png") no-repeat;
	top: -66px;
	left: 50%;
	transform: translateX(-50%);
}
.section.num2 .section-inner::after { background: url("../img/num2.png") no-repeat; }
.section.num3 .section-inner::after { background: url("../img/num3.png") no-repeat; }
.section.num4 .section-inner::after { background: url("../img/num4.png") no-repeat; }
.section.num5 .section-inner::after { background: url("../img/num5.png") no-repeat; }

.section.num1 .section-inner::before {
	content: "";
	width: 100%;
	height: 300px;
	background-image: url("../img/num1-illust-left.png"), url("../img/num1-illust-right.png");
	background-position: left center, right center;
	background-repeat: no-repeat, no-repeat;
	position: absolute;
	top: 120px;
	left: 0;
}

.ttl {
	font-size: 40px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 40px;
}
.ttl span {
	display: inline;
	background:linear-gradient(transparent 40%, #ffee4b 40%);
}

.txt {
	font-size: 22px;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	margin-bottom: 60px;
}

/* 1 */

.slider {
	border-radius: 20px;
	overflow: hidden;
}

.interviewArea {
	width: 100%;
	margin-bottom: 80px;
}
.interviewArea-inner {
	width: 1200px;
	margin: 0 auto;
}
.interviewBtn { text-align: center; }

/* 2 */

.graph { text-align: center; }

/* 3 */

.freeArea {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.freeBox {
	border: 4px solid #333;
	border-radius: 20px;
	box-shadow: -8px 8px #ffee4b;
	position: relative;
}

.freeBox .freeTtl {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	background: #296dbe url("../img/check.png") no-repeat 20px center;
	border: 4px solid #333;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	margin: 20px 0 0 -20px;
	padding: 20px 0px 20px 100px;
}
.freeBox .freeTxt { padding: 40px; }

.freeBox.dress {
	width: 1200px;
	margin-bottom: 40px;
}
.freeBox.flex { width: 680px; }
.freeBox.location { width: 380px; }

.freeBox.dress .freeTtl,
.freeBox.flex .freeTtl { width: 650px; }
.freeBox.location .freeTtl { width: 350px; }

.freeBox.dress .freeTxt { width: 680px; }
.freeBox.flex .freeTxt { width: 340px; margin-left: auto; }

.freeBox.dress .freePt {
	position: absolute;
	top: -30px;
	right: -30px;
}
.freeBox.flex .freePt {
	position: absolute;
	bottom: -40px;
	left: 20px;
}

/* 4 */

.career {
	text-align: center;
	margin-bottom: 40px;
}

.careerTxt {
	font-size: 22px;
	border-bottom: 2px solid #333;
	padding: 0 40px 40px;
	margin-bottom: 40px;
}

.growth {
	background: linear-gradient(90deg, #296dbe 0%, #296dbe 50%, #fff 50%, #fff 100%);
	border: 4px solid #333;
	border-radius: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.growthTtl,
.growthTxt {
	width: 50%;
	padding: 40px;
}

.growthTtl {
	font-size: 24px;
	color: #fff;
	text-align: center;
}
.growthTtl p:first-child {
	font-size: 32px;
	border-bottom: 2px solid #ffee4b;
	margin-bottom: 5px;
}

.growthTxt { font-size: 20px; }

/* 5 */

.modalArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: -200px;
}
.modalArea li { margin: 0 40px 20px; }

/* チャレンジ */

.challengeArea {
	background-color: #fff;
	background-image: url("../img/wave-top.png"), url("../img/wave-btm.png");
	background-position: center top, center bottom;
	background-repeat: repeat-x, repeat-x;
}

.challengeArea-inner {
	width: 1200px;
	margin: 0 auto;
	padding: 120px 0;
	text-align: center;
}

.challengeTtl {
	font-size: 32px;
	margin-bottom: 40px;
}
.challengeBtn {
	text-align: center;
	margin-bottom: 20px;
}
.challengeTxt { font-size: 16px; }

/* footer */

.site-footer-02 { margin: 0; }

/* modal */

.modal__area { display: none; }

.modal__lead {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}
.modal__title {
	display: inline-block;
	font-size: 32px;
	font-weight: bold;
	background: #ffee4b;
	border-top-right-radius: 60px;
	border-bottom-right-radius: 60px;
	padding: 20px 140px 20px 40px;
	margin: 0 0 10px -40px;
}
.modal__text {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
}
.modal__img { margin-bottom: 20px; }
.modal__link {
	font-size: 18px;
	font-weight: bold;
	text-align: right;
}
.modal__link a {
	color: #333;
	background: url("../img/arrow.png") no-repeat;
	background-position: right center;
	padding: 10px 65px 10px 0;
}

.modal__close {
	position: absolute;
	top: 40px;
	right: 40px;
	width: 44px;
	height: 44px;
	background: rgba(50, 50, 50, 1);
	cursor: pointer;
	transition: opacity .6s;
	z-index: 1000;
}
.modal__close:before,
.modal__close:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 1px;
	background: #fff;
	content: '';
}
.modal__close:before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__close:after { transform: translate(-50%, -50%) rotate(-45deg); }

/* =======================================================================================
	hover
======================================================================================= */

@media (hover: hover) {
	a:hover img { opacity: 0.8; }
	a:hover {
		color: #163c69;
		transition: 0.3s;
	}

	.modal__trigger:hover { opacity: 0.8; }

	.modal__close:hover { opacity: .6; }

	.modal__link a:hover { text-decoration: underline; }
}

/* =======================================================================================
	SP/TB
======================================================================================= */

@media screen and (max-width: 1199px) {

/* 初期設定 */

body { font-size: 1.6rem; }

img {
	width: 100%;
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

img.new-window {
	width: auto;
	max-width: none;
}

/* レイアウト */

.mainArea { padding-bottom: 40px; }

/* ファーストビュー */

.fv { background-size: auto 100%; }

.fv-inner {
	width: 600px;
	height: 400px;
	background-size: auto 80%, auto 80%;
}

.fv-inner img { width: 60%; }

.truths { margin-bottom: 50px; }
.truths-inner { width: 94%; }
.truths-inner img { max-width: 500px; }

/* 共通 */

.section { margin-bottom: 40px; }
.section.num5 { margin-bottom: 40px; }

.section-inner {
	width: 94%;
	padding: 40px 20px 20px;
	border-radius: 20px;
}
.section.num1 .section-inner,
.section.num5 .section-inner { border-radius: 20px; }
.section.num1 .section-inner { padding: 40px 20px 20px; }

.section-inner::after {
	width: 60px;
	height: 60px;
}
.section.num1 .section-inner::after,
.section.num2 .section-inner::after,
.section.num3 .section-inner::after,
.section.num4 .section-inner::after,
.section.num5 .section-inner::after {
	background-size: 60px;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
}
.section.num1 .section-inner::before {
	content: "";
	width: auto;
	height: auto;
	background: none;
	position: static;
}

.ttl {
	font-size: 20px;
	margin-bottom: 20px;
}
.txt {
	font-size: 16px;
	line-height: 30px;
	margin-bottom: 20px;
}

/* 1 */

.slider { border-radius: 10px; }
.interviewArea { margin-bottom: 60px; }
.interviewArea-inner { width: 94%; }
.interviewBtn img { max-width: 400px; }

/* 2 */

.graph img { max-width: 800px; }

/* 3 */

.freeBox {
	border: 2px solid #333;
	border-radius: 10px;
	box-shadow: -4px 4px #ffee4b;
}

.freeBox .freeTtl {
	font-size: 16px;
	background-size: 30px;
	border: 2px solid #333;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	margin: 10px 0 0 -10px;
	padding: 10px 0px 10px 60px;
}
.freeBox .freeTxt { padding: 20px; }

.freeBox.dress,
.freeBox.flex,
.freeBox.location { width: 100%; }

.freeBox.dress,
.freeBox.flex { margin-bottom: 20px; }

.freeBox.dress .freeTtl,
.freeBox.flex .freeTtl,
.freeBox.location .freeTtl { width: 100%; }

.freeBox.dress .freeTxt,
.freeBox.flex .freeTxt,
.freeBox.location .freeTxt { width: 100%; margin-left: auto; }

.freeBox .freePt { display: none; }

/* 4 */

.career { margin-bottom: 20px; }
.career img { max-width: 500px; }

.careerTxt {
	font-size: 14px;
	border-bottom: 1px solid #333;
	padding: 0 0 20px;
	margin-bottom: 20px;
}

.growth {
	background: none;
	border: 1px solid #333;
	border-radius: 0;
	display: block;
}

.growthTtl,
.growthTxt {
	width: 100%;
	padding: 20px;
}

.growthTtl {
	background: #296dbe ;
	font-size: 14px;
}
.growthTtl p:first-child {
	font-size: 22px;
	border-bottom: 1px solid #ffee4b;
}

.growthTxt { font-size: 14px; }

/* 5 */

.modalArea { margin-bottom: -20px; }
.modalArea li { margin: 0 10px 20px;}
.modalArea li img { max-width: 260px; }

/* チャレンジ */

.challengeArea { background: #fff; }

.challengeArea-inner {
	width: 94%;
	padding: 20px 0;
}

.challengeTtl {
	font-size: 20px;
	margin-bottom: 20px;
}
.challengeBtn { margin-bottom: 10px; }
.challengeBtn img { max-width: 400px; }
.challengeTxt { font-size: 14px; }

/* footer */

/* modal */

.modal-trigger img { max-width: 400px; }

.modal__lead { font-size: 14px; }
.modal__title {
	font-size: 18px;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	padding: 10px 20px;
	margin: 0 0 10px -20px;
}
.modal__text {
	font-size: 14px;
	margin-bottom: 10px;
}
.modal__img { margin-bottom: 10px; }

.modal__link {
	font-size: 14px;
	font-weight: bold;
	text-align: right;
}
.modal__link a {
	background-size: 20px;
	padding: 10px 30px 10px 0;
}

.modal__close {
	width: 20px;
	height: 20px;
	top: 20px;
	right: 20px;
}

.modal__close:before,
.modal__close:after { width: 10px; }

}

/* =======================================================================================
	SP
======================================================================================= */

@media screen and (max-width: 639px) {

/* 初期設定 */

body { font-size: 1.4rem; }

/* レイアウト */

/* ファーストビュー */

.fv {
	background-image: none;
	margin-bottom: 20px;
}
.fv-inner {
	width: 100%;
	height: auto;
	background-image: url("../img/fv-illust-left.png"), url("../img/fv-illust-right.png");
	background-position: left center, right center;
	background-size: auto 100%, auto 100%;
	padding: 40px 0;
}
.fv-inner img {
	width: 50%;
	max-width: 400px;
}

.truths-inner img { max-width: 400px; }

/* 共通 */

/* 1 */

/* 2 */

/* 3 */

/* 4 */

.career img { max-width: 400px; }

/* 5 */

.modalArea li { margin: 0 0 20px;}
.modalArea li img { max-width: 400px; }

/* チャレンジ */

/* footer */

/* modal */

}