/*
 * base css 
 * pc
 */

/* ---------------------------------------- common */
body {
	min-width: 1132px;
}

#wrapper {
	overflow: hidden;
}
.inner {
	width: 1100px;
	margin: 0 auto;
}

.entry-cta {
	background: var(--color-yellow);
	padding: 36px 0 44px;
	text-align: center;
}

.entry-catch img {
	width: 857px;
	margin: 0 auto;
}
.entry-button {
	display: block;
	width: 806px;
	margin: 28px auto 0;
	transition: opacity 0.2s ease;
}
.entry-button:hover {
	opacity: 0.5;
}

.grad-text {
	color: var(--color-blue);
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	background: linear-gradient(to right, #5e9ec0, #204e9a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
}

/* ---------------------------------------- header */

header {
	background: #ffffff;
	padding: 20px 30px;
}
header .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: auto;
	max-width: 1940px;
}
header .logo {
	width: 19%;
	max-width: 367px;
}

header .catch {
	width: 59%;
	max-width: 1140px;
}

/* ---------------------------------------- visual */

#visual .mainimg img {
	width: 100%;
	max-width: none;
	vertical-align: text-top;
}

/* ---------------------------------------- section-title */

.section-title {
	text-align: center;
}
.section-title-en {
	font-family: var(--font-en);
	font-size: 61px;
	font-weight: 500;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 2px #c8d2dd;
	text-stroke: 2px #c8d2dd;
}
.section-title h2 {
	margin-top: 8px;
	color: var(--color-blue);
	font-size: 42px;
	font-weight: 800;
	line-height: 1;
}
.section-title-white .section-title-en {
	-webkit-text-stroke-color: rgba(255, 255, 255, 0.26);
	text-stroke-color: rgba(255, 255, 255, 0.26);
}
.section-title-white h2 {
	color: #ffffff;
}

/* ---------------------------------------- reason */

#reason {
	background: #f7f8fa;
	padding: 130px 0 150px;
}

#reason .reason-grid {
	display: grid;
	grid-template-columns: repeat(2, 526px);
	gap: 78px 46px;
	justify-content: center;
	width: 100%;
	margin: 85px auto 0;
}

#reason .reason-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 573px;
	padding: 30px 28px 28px;
	background: #ffffff;
	border-radius: 22px;
	box-shadow: var(--shadow-card);
	text-align: center;
}

#reason .reason-number {
	position: absolute;
	top: -28px;
	left: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 75px;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-blue);
	color: #dfe8f0;
	font-family: var(--font-en);
	font-size: 31px;
	font-weight: 700;
	line-height: 1;
}

.reason-card h3 {
	color: var(--color-blue);
	font-size: 35px;
	font-weight: 700;
	line-height: 1.36;
	text-align: center;
	background: linear-gradient(to right, #5e9ec0, #204e9a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	margin: 0 0 .5em;
}

.reason-card p {
	font-size: 22px;
	line-height: 1.5;
}

.reason-card img {
	width: 471px;
	margin-top: auto;
	border-radius: 11px;
}

/* ---------------------------------------- job */

#job {
	padding: 120px 0 100px;
	background: #ffffff;
}

#job .job-list {
	margin-top: 60px;
}

#job .job-card {
	display: grid;
	grid-template-columns: 510px 1fr;
	overflow: hidden;
	border: 2px solid var(--color-blue);
	border-radius: 25px;
	background: #ffffff;
}

#job .job-card + .job-card {
	margin-top: 60px;
	height: 313px;
}

#job .job-photo {
	position: relative;
}

#job .job-photo img {
	width: 510px;
	height: 100%;
	object-fit: cover;
}

#job .job-photo span {
	position: absolute;
	top: 31px;
	left: 34px;
	color: #ffffff;
	font-family: var(--font-en);
	font-size: 31px;
	line-height: 1;
}

#job .job-text {
	/* padding: 68px 72px 45px; */
	display: flex;
	justify-content: center;
	flex-direction:column;
	padding: 0 40px;
}

#job .job-text h3 {
	color: var(--color-blue);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	background: linear-gradient(to right, #5e9ec0, #204e9a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	color: transparent;
	margin: 0 0 .4em;
}
#job .job-text h3 span {
	font-size: 39px;
}

#job .job-text p {
	font-size: 22px;
	line-height: 1.5;
}

#job .schedule-block {
	margin-top: 70px;
}

#job .schedule-block img {
	margin: 0 auto;
}

#job .schedule-block img + img {
	margin-top: 40px;
}

/* ---------------------------------------- salary */

#salary {
	background: var(--color-blue);
	padding: 106px 0 118px;
}

#salary .salary-image {
	width: 100%;
	margin: 50px auto 0;
}

/* ---------------------------------------- flow */

#flow {
	padding: 120px 0;
	background: #ffffff;
}
#flow h2 span {
	font-size: 52px;
}

#flow .flow-list {
	width: 100%;
	margin: 90px auto 0;
}

#flow .flow-card {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 202px;
	padding: 24px;
	border-radius: 20px;
	background: #ffffff;
	box-shadow: 0px 0px 10px 5px rgba(204, 213, 223, .75);
}

#flow .flow-card + .flow-card {
	margin-top: 40px;
}

#flow .flow-card img {
	flex: 0 0 auto;
	width: 144px;
}

#flow .flow-card h3 {
	font-size: 31px;
	font-weight: 700;
	line-height: 1.25;
	margin: 0 0 .5em;
}

#flow .flow-card p {
	font-size: 20px;
	line-height: 1.66;
}

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

.voice-section {
	background: #f7f8fa;
	padding: 60px 0 90px;
}

.voice-grid {
	width: 1100px;
	margin: 94px auto 0;
}

.voice-card {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 24px;
	box-shadow: var(--shadow-card);
}
.voice-card + .voice-card { margin: 34px 0 0; }

.voice-card figure {
	width: 18%;
	text-align: center;
}
.voice-card figure img {
	display: inline;
	width: 95px;
	height: 106px;
}

.voice-body {
	position: relative;
	width: 82%;
	min-height: 195px;
	padding: 30px 140px 34px 0;
}

.voice-body span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 126px;
	height: 36px;
	padding: 0 23px;
	border: 1px solid var(--color-blue);
	border-radius: 18px;
	color: var(--color-blue);
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
}

.voice-body h3 {
	display: block;
	margin: 16px 0 auto;
	color: var(--color-muted-blue);
	font-size: 25px;
	font-weight: 700;
	line-height: 1.4;
	margin: .75em 0 .5em;
}

.voice-body p {
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}

.voice-body em {
	position: absolute;
	top: .25em;
	right: .75em;
	color: #e8eef7;
	font-family: var(--font-en);
	font-size: 61px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}

/* ---------------------------------------- faq */

#faq {
	padding: 70px 0 95px;
	background: #ffffff;
}

#faq .faq-list {
	margin: 70px auto 0;
}

#faq .faq-item {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 152px;
	padding: 32px 40px;
	border-radius: 20px;
	background: #eef4f8;
}

#faq .faq-item + .faq-item {
	margin-top: 36px;
}

#faq .faq-item span {
	flex: 0 0 auto;
	color: var(--color-blue);
	font-family: var(--font-en);
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	align-self: start;
	padding: 3px 0;
}

#faq .faq-item h3 {
	color: var(--color-deep-blue);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.35;
}

#faq .faq-item p {
	margin-top: 12px;
	font-size: 20px;
	line-height: 1.55;
}

/* ---------------------------------------- company */

#company {
	padding: 60px 0 80px;
	background: url("../images/pc/company_back.jpg") center center / cover no-repeat;
	background-size: cover;
	text-align: center;
}

#company .section-title h2 {
	margin: 0 0 1.25em;
}

#company .company-text {
	font-weight: 600;
}

#company .company-text h3 {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 .5em;
}

#company .company-text p {
	font-size: 18px;
	line-height: 1.75;
}
#company .company-text p + p { margin: 1em 0 0; }

/* ---------------------------------------- recruitment */

#recruitment {
	padding: 60px 0 130px;
	background: #ffffff;
}
#recruitment .inner {
	width: 1050px;
}
#recruitment .inner h2 {
	margin: 0 0 1em;
}
.recruit-table {
	width: 100%;
	border: 1px solid #bfc3c6;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
}

.recruit-table th,
.recruit-table td {
	border: 1px solid #bfc3c6;
	vertical-align: middle;
}

.recruit-table th {
	width: 20%;
	background: #f3f3f3;
	text-align: center;
}

.recruit-table td {
	padding: 1.5em;
}

/* ---------------------------------------- entry */

#entry {
	padding: 180px 0;
	background: var(--color-form-bg);
}
#entry .inner {
	width: 1050px;
}
#entry h2 { margin: 0 0 1em; }
#entry h2 + p { margin: 0 0 3em; }

#entry table { width: 100%; }
#entry table th, #entry table td {
	border: 1px #ccc solid;
	vertical-align: middle;
	line-height: 1.8;
	padding: 1em;
}
#entry table th { 
	width: 25%; 
	background: #f3f3f3;
	position: relative;
}
#entry table td { background: #fff; }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
	width: 100%;
	border: 1px #ccc solid;
	font-size: clamp(0.798rem, 1.7vw, 1.063rem);;
	font-weight: 500;
	line-height: 1.6;
	padding: .5em .75em;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input[type="text"].middle, input[type="password"].middle, input[type="email"].middle, input[type="tel"].middle {
	width: 40%;
}
input[type="text"].short, input[type="password"].short, input[type="email"].short, input[type="tel"].short {
	width: 20%;
}
input[type="radio"] {
	-webkit-appearance: radio;
	-moz-appearance: radio;
	appearance: radio;
}

input[type="checkbox"] {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	appearance: checkbox;
}

select {
	border: 1px #ccc solid;
	line-height: 1.6;
	text-align: left;
	font-weight: 400;
	padding: .25em 1em;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
select optgroup option::before {
    content: "";
}

#entry table th .required {
	display: inline-block;
	color: #fff;
	background: #cf121b;
	font-size: clamp(0.625rem, 0.059rem + 1.2vw, 0.813rem);
	padding: .25em 1em;
	border-radius: 4px;
	position: absolute;
	right: 1em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#user_birth_year,
#user_birth_month,
#user_birth_day {
	display: inline-block;
	width: auto;
	min-width: 4em;
}

.submits {
	text-align: center;
	margin: 2.5em 0 0;
}
input[type="submit"] {
	display: inline-block;
	color: #fff;
	width: 35.1%;
	max-width: 351px;
	aspect-ratio: 1 / 0.251;
	background: url( ../images/pc/mail-submit.png ) no-repeat center center;
	background-size: contain;
	line-height: 1;
	text-indent: -9999px;
	padding: 1em 3em;
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
input[type="submit"]:hover {
	opacity: .5;
}