@charset "utf-8";
/*-------------------------------------------------

	Main Visual

--------------------------------------------------*/
#mv .splide {position: relative;}
#mv .splide .splide__slide {width: 90% !important;margin: 0 auto 0 0;}
#mv .splide .splide__slide h1 {
	position: absolute;
	bottom: 7%;
	left: 5%;
	line-height: 1.4;
	font-weight: bold;
	font-size: 3.1vw;
}
#mv .splide .splide__pagination {
	position: absolute;
	top: 50%;
	right: 5%;
	transform: translateY(-50%);
}
#mv .splide .splide__pagination {display: grid;gap: 3vw;}
#mv .splide .splide__pagination li {line-height: 1;}
#mv .splide .splide__pagination li button {width: 1vw;height: 1vw;border: none;border-radius: 50%;background: #BEBEBE;}
#mv .splide .splide__pagination li button.is-active {background: #14518E;}
@media only screen and ( max-width : 1024px ) {
	#mv {margin-top: 70px;}
}
@media only screen and ( max-width : 767px ) {
	#mv .splide .splide__slide figure {margin-bottom: 5%;}
	#mv .splide .splide__slide h1 {position: initial;margin-left: 5%;font-size: 6vw;}
	#mv .splide .splide__pagination li button {width: 2vw;height: 2vw;}
}
/*--------------------------------------------------

	募集ポジション │ Requirement

--------------------------------------------------*/
#requirement ul {display: grid;grid-template-columns: repeat(2, 1fr);gap: 25px;}
#requirement ul li a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 60px;
	padding: 10px;
	border: 1px solid #707070;
	border-radius: 40px;
	background: #fff;
	font-weight: 900;
	font-size: clamp(16px, calc(16px + 4 * ((100vw - 375px) / 1545)), 20px);
	text-align: center;
}
#requirement ul li a span {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	border: 1px solid #14518E;
	border-radius: 50%;
	transition: .3s;
}
#requirement ul li a:hover span {background: #14518E;}
#requirement ul li a span::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	height: 100%;
	background: url(../img/front/requirement/Icon_search-navy.svg) no-repeat center / 100%;
	transition: .3s;
}
#requirement ul li a:hover span::before {background-image: url(../img/front/requirement/Icon_search-wht.svg);}
@media only screen and ( max-width : 767px ) {
	#requirement ul {grid-template-columns: repeat(1, 1fr);gap: 10px;}
	#requirement ul li a {font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);}
	#requirement ul li a.smalltxt{font-size: 12px;}
}
/*--------------------------------------------------

	充実の制度・福利厚生 │ Work Style

--------------------------------------------------*/
#work_style .inner {max-width: 1536px;}
#work_style ul {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;}
#work_style ul li {
	padding: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	padding-bottom: clamp(40px, calc(40px + 20 * ((100vw - 375px) / 1545)), 60px);
	border: 1px solid #707070;
	background: #fff;
}
#work_style ul li figure {width: 70%;max-width: 180px;margin: 0 auto clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#work_style ul li h3 {
	margin-bottom: 20px;
	font-weight: bold;
	font-size: clamp(18px, calc(18px + 6 * ((100vw - 375px) / 1545)), 24px);
	text-align: center;
}
#work_style ul li p {font-weight: 400;}
@media only screen and ( max-width : 1024px ) {
	#work_style ul {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#work_style ul {grid-template-columns: repeat(1, 1fr);}
}
/*--------------------------------------------------

	メッセージ │ Message

--------------------------------------------------*/
#message {padding-top: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px);overflow: hidden;}
#message .block {position: relative;background: #E5F0F9;}
#message .block .title_common {position: absolute;top: 3%;left: 50%;transform: translate(-50%, -50%);width: 100%;}
#message .block .container {flex-direction: row-reverse;align-items: center;}
#message .block .container figure {width: 50vw;margin: 0 calc(50% - 50vw);}
#message .block .container .wrap {width: 50%;}
#message .block .container .wrap h3 {
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	font-weight: bold;
	font-size: clamp(22px, calc(22px + 8 * ((100vw - 375px) / 1545)), 30px);
}
#message .block .container .wrap .content p {
	margin-bottom: clamp(15px, calc(15px + 10 * ((100vw - 375px) / 1545)), 25px);
	font-weight: 400;
}
#message .block .container .wrap .content p:last-child {margin-bottom: 0;}
@media only screen and ( max-width : 1024px ) {
	#message .block .container figure {width: 100vw;margin-bottom: 30px;}
	#message .block .container .wrap {width: 100%;}
}
/*--------------------------------------------------

	インタビュー │ Interview

--------------------------------------------------*/
#interview ul.list {display: grid;grid-template-columns: repeat(3, 1fr);gap: 40px;}
#interview ul.list li {position: relative;}
#interview ul.list li figure {width: 85%;margin: 0 0 -50px auto;}
#interview ul.list li .wrap {
	width: 85%;
	height: 220px;
	padding: clamp(20px, calc(20px + 30 * ((100vw - 375px) / 1545)), 50px);
	padding-top: 70px;
	padding-bottom: clamp(70px, calc(70px + 20 * ((100vw - 375px) / 1545)), 90px);
	border-bottom-right-radius: 6em;
	background: #fff;
}
#interview ul.list li .wrap .content h3 {font-weight: bold;font-size: clamp(24px, calc(24px + 6 * ((100vw - 375px) / 1545)), 30px);}
#interview ul.list li .wrap .content p {font-weight: bold;font-size: clamp(13px, calc(13px + 2 * ((100vw - 375px) / 1545)), 15px);}
#interview ul.list li .wrap .arrow {
	position: absolute;
	right: 25px;
	bottom: 25px;
	width: 50px;
	height: 50px;
	border: 1px solid #222;
	border-radius: 50%;
}
#interview ul.list li .wrap .arrow span {
	position: absolute;
	top: 60%;
	left: -20%;
	transform: translate(-50%, -50%);
	width: 50px;
    height: 1px;
    border-bottom: 1px solid #222;
    transition: .3s;
}
#interview ul.list li:hover .wrap .arrow span {left: 0;}
#interview ul.list li .wrap .arrow span::after {
    content: '';
	position: absolute;
    right: 5px;
    bottom: -3px;
    transform: rotate(-45deg);
	width: 1px;
    height: 15px;
    border-right: 1px solid #222;
}
@media only screen and ( max-width : 767px ) {
	#interview ul.list {grid-template-columns: repeat(2, 1fr);}
}
@media only screen and ( max-width : 500px ) {
	#interview ul.list {grid-template-columns: repeat(1, 1fr);width: 80%;margin: 0 auto;}
	#interview ul.list li .wrap {height: auto;}
}
/*--------------------------------------------------

	会社概要・事業紹介 │ Company overview

--------------------------------------------------*/
#company_overview {padding-top: clamp(70px, calc(70px + 80 * ((100vw - 375px) / 1545)), 150px);}
#company_overview .title_wrap {margin-bottom: clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);}
#company_overview .title_wrap h3 {
	margin-bottom: 30px;
	font-weight: 500;
	font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 1545)), 24px);
	line-height: 1.4;
	text-align: center;
}
#company_overview .title_wrap p {
	font-weight: 500;
	font-size: clamp(14px, calc(14px + 4 * ((100vw - 375px) / 1545)), 18px);
	text-align: center;
}
#company_overview .container {
	padding-top: clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);
	padding-bottom: clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);
	overflow: hidden;
	background: #E5F0F9;
}
#company_overview .container ul.list {
	display: grid;
	gap: clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	margin-bottom: clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);
}
#company_overview .container ul.list li.item {align-items: center;width: 95%;background: #fff;}
#company_overview .container ul.list li.item:nth-child(odd) {
	padding-right: clamp(30px, calc(30px + 40 * ((100vw - 375px) / 1545)), 70px);
	border-radius: 0 5em 5em 0;
}
#company_overview .container ul.list li.item:nth-child(even) {
	flex-direction: row-reverse;
	margin-left: auto;
	padding-left: clamp(30px, calc(30px + 40 * ((100vw - 375px) / 1545)), 70px);
	border-radius: 5em 0 0 5em;
}
#company_overview .container ul.list li.item figure {width: 50%;}
#company_overview .container ul.list li.item .wrap {width: 45%;padding: 10px 0;}
#company_overview .container ul.list li.item .wrap .ttl_content {
	display: flex;
	align-items: flex-end;
	gap: clamp(15px, calc(15px + 5 * ((100vw - 375px) / 1545)), 20px);
	margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);
	padding-bottom: clamp(10px, calc(10px + 10 * ((100vw - 375px) / 1545)), 20px);
	border-bottom: 1px solid #707070;
}
#company_overview .container ul.list li.item .wrap .ttl_content p {
	color: #EFEFEF;
	font-size: clamp(60px, calc(60px + 40 * ((100vw - 375px) / 1545)), 100px);
	line-height: .8;
}
#company_overview .container ul.list li.item .wrap .ttl_content h3 {flex: 1;font-size: clamp(21px, calc(21px + 13 * ((100vw - 375px) / 1545)), 34px);}
#company_overview .container ul.list li.item .wrap .ttl_content h3 span {color: #14518E;}
#company_overview .container ul.list li.item .wrap .txt_content p {margin-bottom: clamp(20px, calc(20px + 10 * ((100vw - 375px) / 1545)), 30px);}
#company_overview .container ul.list li.item .wrap .txt_content strong {font-size: clamp(18px, calc(18px + 6 * ((100vw - 375px) / 1545)), 24px);}
#company_overview .container ul.list li.item .wrap .txt_content strong span {margin: 0 5px;color: #14518E;font-weight: bold;font-size: 2em;}
@media only screen and ( max-width : 767px ) {
	#company_overview .title_wrap p {text-align: left;}
	#company_overview .container ul.list li.item:nth-child(odd) {padding-right: 0;border-radius: 0 7em 7em 0;}
	#company_overview .container ul.list li.item:nth-child(even) {padding-left: 0;border-radius: 7em 0 0 7em;}
	#company_overview .container ul.list li.item figure {width: 100%;}
	#company_overview .container ul.list li.item .wrap {width: 100%;padding: 30px 40px 50px;}
}
@media only screen and ( max-width : 500px ) {
	#company_overview .container ul.list li.item:nth-child(odd) {border-radius: 0 4em 4em 0;}
	#company_overview .container ul.list li.item:nth-child(even) {border-radius: 4em 0 0 4em;}
	#company_overview .container ul.list li.item .wrap {padding: 20px 25px 40px;}
	#company_overview .container ul.list li.item .wrap ul {grid-template-columns: repeat(2, 1fr);}
}
/*--------------------------------------------------

	エントリー │ Entry

--------------------------------------------------*/
#entry {
	padding-top: clamp(70px, calc(70px + 110 * ((100vw - 375px) / 1545)), 180px);
	padding-bottom: clamp(50px, calc(50px + 100 * ((100vw - 375px) / 1545)), 150px);
	border: solid #87BEF5 clamp(30px, calc(30px + 20 * ((100vw - 375px) / 1545)), 50px);
	background: #fff;
}
#entry .wrap p {margin-bottom: clamp(50px, calc(50px + 30 * ((100vw - 375px) / 1545)), 80px);text-align: center;}
#entry .wrap a {
	display: block;
	max-width: 300px;
	margin: 0 auto;
	padding-top: clamp(20px, calc(20px + 8 * ((100vw - 375px) / 1545)), 28px);
	padding-bottom: clamp(20px, calc(20px + 8 * ((100vw - 375px) / 1545)), 28px);
	border: 1px solid #14518E;
	border-radius: 100px;
	background: #14518E;
	color: #fff;
	font-weight: 900;
	letter-spacing: .2em;
	text-align: center;
}
#entry .wrap a:hover {background: #fff;color: #14518E;}


/* PDF.js用のスタイル */
        .pdfjs-container {
            position: relative;
            width: 100%;
            height: 600px;
        }

        @media screen and (max-width: 768px) {
            .pdfjs-container {
                height: 400px;
            }
        }

        .loading-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #666;
        }

        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #007bff;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }