@charset "UTF-8";

/*
 * Site Name: connetta WEB Smart5
 * File Name page.css
 * Description: Common Page Style
 * Version: 1.0
 * Author: DIS_ART_WORKS
 */


.recruit #page_header_img {
	background-size: cover;
	background-color: #eee;
	height: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-top: 50px;
}


/* --- recruit_top --- */
#recruit_top #page_menu {
	display: none;
}

#recruit_top #content_wrapper {
	padding-bottom: 0px;
}

#recruit_top #main_visual #catch_pic {
    flex-direction: column;
    gap: 5%;
	color: #fff;
	text-align: center;
}

#recruit_top #main_visual #catch_pic .lead {
    text-shadow: 1px 1px #383838;
}

#recruit_top #main_visual .button {
	display: inline-block;
    padding: 0.5rem 1.5rem;
    box-sizing: border-box;
    font-size: 1.125rem;
    text-align: center;
    color: #fff;
    background-color: #115fad;
    border: solid 2px #115fad;
    border-radius: 30px;
}

#recruit_top #main_visual .button:hover {
	text-decoration: none;
	transition: all 150ms;
    background-color: #fff;
	color: #115fad;
}

#recruit_top .banner_list {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

#recruit_top .item {
	position: relative;
}

#recruit_top .cont_box {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	gap: 1rem;
    text-align: center;
	width: 35%;
	position: absolute;
	top: 0;
	bottom: 0;
	box-sizing: border-box;
}

#recruit_top .layout01 .cont_box {
	right: 0;
	padding-left: 5%;
}

#recruit_top .layout02 .cont_box {
	left: 0;
	padding-right: 5%;
}

#recruit_top .color01.layout01 .cont_box {
	color: #fff;
	background: linear-gradient(263deg, #115FAE 90%, transparent 90.2%, transparent 0);
}

#recruit_top .color01.layout02 .cont_box {
	color: #fff;
	background: linear-gradient(83deg, #115FAE 90%, transparent 90.2%, transparent 0);
}

#recruit_top .color02.layout01 .cont_box {
	color: #fff;
	background: linear-gradient(263deg, #7FB60B 90%, transparent 90.2%, transparent 0);
}

#recruit_top .color02.layout02 .cont_box {
	color: #fff;
	background: linear-gradient(83deg, #7FB60B 90%, transparent 90.2%, transparent 0);
}

#recruit_top .color03.layout01 .cont_box {
	color: #000;
	background: linear-gradient(263deg, #DDCF14 90%, transparent 90.2%, transparent 0);
}

#recruit_top .color03.layout02 .cont_box {
	color: #000;
	background: linear-gradient(83deg, #DDCF14 90%, transparent 90.2%, transparent 0);
}

#recruit_top .cont_box .ttl {
	margin: 0;
	font-size: 2rem;
	font-weight: 500;
}

#recruit_top .cont_box .ttl span {
	display: block;
	font-size: 1.25rem;
	font-weight: 500;
}

#recruit_top .cont_box .button {
	color: #fff;
	padding: 0.25rem 2.5rem;
	border-radius: 30px;
	border: solid #fff 2px;
}

#recruit_top .color03 .cont_box .button {
	color: #000;
	border-color: #000;
}

#recruit_top .cont_box .button:hover {
	text-decoration: none;
	background-color: #fff;
	transition: all 150ms;
}

#recruit_top .color01 .cont_box .button:hover {
	color: #115FAE;
}

#recruit_top .color02 .cont_box .button:hover {
	color: #7FB60B;
}

#recruit_top .color03 .cont_box .button:hover {
	background-color: #000;
	color: #fff;
}




#recruit_bottom .button_link {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin: 50px auto;
}

#recruit_bottom .button_link .item {
	width: calc(50% - 15px);
}

#recruit_bottom .button_link .item a {
	display: block;
	padding: 1rem 0;
	text-align: center;
	font-size: 1.125rem;
	font-weight: 500;
	color: #fff;
	background-color: #115FAD;
	border-radius: 40px;
	position: relative;
}

#recruit_bottom .button_link .item a::after {
	content: "";
	content: '';
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 28px;
    right: 30px;
}

#recruit_bottom .button_link .item a:hover {
	text-decoration: none;
	background-color: #1780EA;
	transition: all 100ms;
}

.recruit .entry_link {
	height: 180px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-color: #115fae;
}

.recruit .entry_link .ttl {
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.5;
    font-weight: 500;
	position: relative;
}

.recruit .entry_link .ttl::after {
	content:"";
	width: 42px;
	height: 34px;
	background: url(../common/arrow_recruit.png);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	right: -60px;
	top: calc(50% - 17px);
}

.recruit .entry_link:hover {
	text-decoration: none;
	background-color: #1885F4;
	transition: all 300ms;
}

.recruit .entry_link:hover .ttl::after {
	animation: blink 800ms ease-in-out infinite alternate;
}



/* --- message --- */
.message #content_wrapper {
	padding-bottom: 0;
}

.message #eye_catch {
	padding-top: 50px;
	height: 650px;
	box-sizing: border-box;
	position: relative;
	text-align: right;
}

.message #eye_catch .cover {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 47%;
    background-image: url(../images/page/staff_interview/cover.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3% 1% 3% 5%;
    flex-direction: column;
    box-sizing: border-box;
}

.message #eye_catch .sub {
	font-size: 2.75rem;
	line-height: 1.5;
	font-weight: 700;
}

.message #eye_catch .midashi {
	font-size: 1.75rem;
	line-height: 1.5;
	font-weight: 700;
}

.message #eye_catch .pic {
	width: 58%;
    height: 100%;
    object-fit: cover;
}


.message #main_column .section {
	display: flex;
	flex-wrap: wrap;
    align-items: flex-start;
	gap: 60px;
	margin-bottom: 100px;
	position: relative;
}

.message #main_column .section.layout2 {
	flex-direction: row-reverse;
}

.message #main_column .section.divide .pic_box,
.message #main_column .section.divide .txt_box {
	width: calc((100% - 60px) / 2);
	position: relative;
}

.message #main_column .section .pic_box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.message #main_column .section::before {
	content: "";
	display: block;
	width: 54px;
	height: 54px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images/page/circle.png);
	position: absolute;
}

.message #main_column .section.lead::before  {
    top: -20%;
    right: 10vw;
}

.message #main_column .section.layout1::before {
    bottom: 0;
    right: -60px;
}

.message #main_column .section.layout2::before {
    bottom: -20px;
    left: -60px;
}

.message #main_column .section.full::before {
    bottom: -80px;
    right: calc(50% - 27px);
}

.message #main_column .section .txt_box {
	z-index: 1;
}

.message #main_column .section.layout1 .txt_box::before {
	bottom: -60px;
	right: -60px;
}

.message #main_column .section.layout2 .txt_box::before {
	bottom: -60px;
	right: -60px;
}

.message #main_column .section.full .txt_box::before {
	bottom: -60px;
	right: calc(50% - 27px);
}

.message #main_column .section .pic_box::after {
	content: "";
	display: block;
	width: 304px;
	height: 304px;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
}

.message #main_column .section.layout1 .pic_box::after {
	background-image: url(../images/page/triangle1.png);
    bottom: -50px;
    right: -100px;
}

.message #main_column .section.layout2 .pic_box::after {
	background-image: url(../images/page/triangle2.png);
	bottom: -40px;
	left: -40px;
}

.message #main_column .section.full::after {
	content: "";
	display: block;
	width: 304px;
	height: 304px;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
}

.message #main_column .section.full::after {
	background-image: url(../images/page/triangle2.png);
	bottom: -40px;
	left: -40px;
}




/* --- work --- */
.work #page_header_img {
	background: #f4f4f4 url(../images/page/page_header_image_work.jpg) no-repeat center center;
	background-size: cover;
	height: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-top: 50px;
}

.work #page_header_img p {
	text-align: center;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1.5;
	font-weight: 700;
}

.work #content_wrapper {
	max-width: 100%;
	padding: 0;
}

.work #tab_wrap {
	padding: 60px 0 0;
	background-color: #eeeeee;
	min-height: 500px;
}

.work #tab_buttons {
	display: flex;
	gap: 5px;
	border-bottom: solid 2px #115FAD;
	margin-bottom: 10px;
}

.work #tab_buttons input[name="work_tab"] {
	display: none;
}

.work .tab_label {
	display: block;
	flex-grow: 1;
    font-size: 1.125rem;
    text-align: center;
	color: #000;
	background-color: #d2e8ff;
    padding: 0.5em;
	box-sizing: border-box;
	cursor: pointer;
}

.work .tab_label:hover {
	color: #fff;
	background-color: #115FAD;
	transition: all 150ms;
}

.work input:checked + .tab_label {
	color: #fff;
	background-color: #115FAD;
}


.work #main_column #tab_list .tab {
	display: none;
	z-index: 0;
	opacity: 0;
}

.work #main_column #tab_list .tab.is-show {
    display: block;
    z-index: 1;
	opacity: 1;
	transition: all 150ms;
}

.work #main_column .section {
	padding: 0 0 60px;
	display: flex;
    flex-direction: column;
    gap: 30px;
}

.work #main_column .section > h2 {
	width: 100%;
	font-size: 2rem;
	font-weight: 700;
	border-bottom: solid 2px #115fad;
}

.work #main_column .text_banner {
	width: 100%;
	position: relative;
}

.work #main_column .text_banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work #main_column .text_banner .txt {
	padding: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.work #main_column .text_banner .ttl {
	margin: 0;
	font-size:2.5rem;
	font-weight: 700;
	line-height: 1.5;
	color: #115fad;
}

.work #main_column .text_banner .subttl {
	font-size: 1.25rem;
	font-weight: 700;
	color: #115fad;
}

.work #main_column .text_banner .link {
	margin-top: 20px;
	width: 100%;
    max-width: 360px;
}

.work #main_column .text_banner .link a {
	display: block;
    padding: 0.5rem 0;
    box-sizing: border-box;
    text-align: center;
    border: solid 2px #115fad;
}

.work #main_column .text_banner .link a:hover {
	text-decoration: none;
    color: #115fad;
    background-color: rgba(255,255,255,0.75);
	transition: all 150ms;
}

.work #main_column .text_banner .link a span {
    color: #115fad;
    font-size: 0.95rem;
    font-weight: 700;
	position: relative;
}

.work #main_column .text_banner .link a span::before {
	content: "";
	display: block;
	width: 25px;
	height: 2px;
	background-color: #115FAD;
	position: absolute;
    top: 14px;
    right: -40px;
}

.work #main_column .text_banner .link a span::after {
	content: "";
	display: block;
	width: 12px;
	height: 2px;
	background-color: #115FAD;
	transform: rotate(45deg);
	position: absolute;
    top: 10px;
    right: -41px;
}


.work #main_column .text_banner .link a:hover span::before {
	right: -80px;
	transition: all 150ms;
}

.work #main_column .text_banner .link a:hover span::after {
	right: -81px;
	transition: all 150ms;
}


.work #main_column .pic_wrap {
	text-align: center;
}

.work #main_column .pic_wrap a:hover img {
	filter: brightness(1.05);
	transition: all 150ms;
}

.work #main_column .item_list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.work #main_column .item_list dt,
.work #main_column .item_list dd {
	margin-bottom: 10px;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.work #main_column .item_list .midashi {
	width: 240px;
	background-color: #d3dfeb;
}

.work #main_column .item_list .naiyou {
	width: calc(100% - 240px);
	background-color: #fff;
	flex-direction: column;
	gap: 1em;
	justify-content: center;
	align-items: flex-start;
}
.work #slider {
	margin: 50px auto 80px;
}

.work .slide-arrow {
	position: absolute;
	top: calc(50% - 30px);
	z-index:2!important;
	cursor: pointer;
}

.work .slide-arrow.prev-arrow {
	left: 5%;
}

.work .slide-arrow.next-arrow {
	right: 5%;
}

.work .slide-arrow:hover {
	filter: brightness(1.15);
}

.work .slick-slide {
	margin: 0 15px;
}

.work .slick-slide img {
	border-radius: 30px;
	opacity: 0.3;
	transition: opacity ease-out 600ms;
}

.work .slick-center .slick-slide img {
	opacity: 1;
}

.work .slick-dots {
	bottom: -30px;
}

.work .slick-dots li.slick-active button:before {
	color: #115FAD;
}



/* --- figures --- */
.figures #page_header_img p {
	text-align: center;
	color: #000;
	font-size: 2.5rem;
	line-height: 1.5;
	font-weight: 700;
}






/* --- interview --- */
.interview #page_header_img {
	background: #f4f4f4 url(../images/page/page_header_image_job.jpg) no-repeat center center;
	background-size: cover;
	height: 220px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding-top: 50px;
}

.interview #page_header_img p {
	text-align: center;
	color: #115FAD;
	font-size: 2.5rem;
	line-height: 1.5;
	font-weight: 700;
}

.interview #page_header_img p span {
	display: block;
	font-size: 1.25rem;
	font-weight: 500;
}

.interview .catch_img {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	height: 380px;
}

.interview .catch_img:hover {
	filter: brightness(1.15);
}

.interview .catch_img a {
	display: flex;
	justify-content: left;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 30px 30px;
	box-sizing: border-box;
}

.interview .catch_img a:hover {
	text-decoration: none;
}

.interview .catch_img p {
	color: #ffffff;
	font-size: 2rem;
	font-weight: 500;
	padding-left: 8%;
}

.interview #main_column > h2.ttl {
	width: 100%;
	max-width: 1200px;
	font-size: 1.75rem;
	font-weight: 700;
	border-bottom: solid 2px #115fad;
	margin-top: 50px;
}

.interview .hide {
	display: none;
}

.interview #close_area {
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.25);
    z-index: 9;
	display: none;
	opacity: 0;
	transform: all 150ms;
}

.interview #close_area.show {
	display: block;
	opacity: 1;
}

.interview .panel_list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 25px;
	margin-top: 20px;
	color: #fff;
}

.interview .panel_list .box {
	width: calc((100% - 100px) / 5);
	text-align: center;
	display: flex;
    flex-direction: column;
    gap: 25px;
	position: relative;
}

.interview .panel_list .box {
	background-color: #bbb;
}

.interview .panel_list.job_type .box {
	background-color: #115fad;
	border-radius: 5px;
}

.interview .job_type .title {
	display: block;
	font-size: 1.375rem;
	font-weight: 500;
}

.interview .job_type .button {
	position: relative;
}

.interview .job_type input[name="job_button"] {
	display: none;
}

.interview .job_type .job_label {
    display: block;
    position: relative;
	padding: 30px 1rem;
    box-sizing: border-box;
    cursor: pointer;
	border-bottom: #a8d6ff 5px solid;
    border-radius: 5px;
}

.interview .job_type .sub_title {
    font-size: 1rem;
    font-weight: 500;
	color: #fff;
	position: relative;
}

.interview .job_label:hover,
.interview input:checked + .job_label {
	transition: all 200ms;
    background-color: #1780EA;
}

.interview .job_label::before {
	content: '';
    width: 18px;
    height: 18px;
    border-radius: 16px;
    background-color: #fff;
    transform: rotate(135deg);
    position: absolute;
    top: calc(50% - 9px);
    right: 20px;
    transition: all 150ms;
}

.interview .job_label::after {
	content: '';
    width: 4px;
    height: 4px;
    border: 0px;
    border-top: solid 2px #115fad;
    border-right: solid 2px #115fad;
    transform: rotate(135deg);
    position: absolute;
    top: calc(50% - 4px);
    right: 26px;
    transition: all 150ms;
}

.interview input:checked + .job_label::after {
    transform: rotate(-45deg);
    top: calc(50% - 2px);
	transition: all 150ms;
}

.interview .job_type .job_cont {
    width: 100%;
	padding: 1em 1em;
	box-sizing: border-box;
	font-size: 0.9rem;
	font-weight: 500;
    text-align: left;
	line-height: 1.5;
	background-color: #fff;
    color: #115fad;
	border: solid 1px #115fad;
	position: absolute;
	top: -30px;
	opacity: 0;
	z-index: -1;
	transition: all 100ms;
}

.interview .job_type input:checked ~ .job_cont {
    z-index: 10;
	opacity: 1;
	transition: all 150ms;
}

.interview .job_type .job_cont .close_btn {
	width: 27px;
    height: 27px;
    background-color: #115fad;
    display: block;
    position: absolute;
    right: -10px;
    top: -10px;
    border-radius: 20px;
	cursor: pointer;
}

.interview .job_type .job_cont .close_btn::before,
.interview .job_type .job_cont .close_btn::after {
	content: "";
    display: block;
    position: absolute;
    width: 3px;
    height: 14px;
    background-color: #fff;
    top: 7px;
    left: 12px;
}

.interview .job_type .job_cont .close_btn::before {
	transform: rotate(45deg);
}

.interview .job_type .job_cont .close_btn::after {
	transform: rotate(-45deg);
}

.interview .personal .box {
    padding: 1px;
	box-sizing: border-box;
}

.interview .personal .link {
	position: relative;
	display: block;
}

.interview .personal .info {
    width: 100%;
    min-height: 33%;
    position: absolute;
    bottom: 0;
	background-color: rgba(17 115 174 / 65%);
	color: #fff;
	padding: 1rem;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	font-size: 0.85rem;
}

.interview .personal .color02 .info {
    background-color: rgb(0 160 233 / 65%);
}

.interview .personal .color03 .info {
    background-color: rgb(0 158 150 / 65%);
}

.interview .personal .color04 .info {
    background-color: rgb(0 153 68 / 65%);
}

.interview .personal .color05 .info {
    background-color: rgb(129 180 20 / 65%);
}

.interview .personal .info::after {
	content: '';
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: rotate(45deg);
    position: absolute;
    top: calc(50% - 5px);
    right: 14px;
}

.interview .personal .link:hover img {
	filter: brightness(1.1);
	transition: all 150ms;
}



/* --- staff_interview --- */
.staff_interview #content_wrapper {
	padding-bottom: 0;
}

.staff_interview #eye_catch {
	padding-top: 50px;
	height: 650px;
	box-sizing: border-box;
	position: relative;
	text-align: right;
}

.staff_interview #eye_catch .cover {
	position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 47%;
    background-image: url(../images/page/staff_interview/cover.png);
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 3% 1% 3% 5%;
    flex-direction: column;
    box-sizing: border-box;
}

.staff_interview #eye_catch .sub {
	font-size: 2.75rem;
	line-height: 1.5;
	font-weight: 700;
}

.staff_interview #eye_catch .midashi {
	font-size: 1.75rem;
	line-height: 1.5;
	font-weight: 700;
}

.staff_interview #eye_catch .pic {
	width: 58%;
    height: 100%;
    object-fit: cover;
}


.staff_interview #main_column .section {
	display: flex;
	flex-wrap: wrap;
    align-items: flex-start;
	gap: 60px;
	margin-bottom: 100px;
	position: relative;
}

.staff_interview #main_column .section.layout2 {
	flex-direction: row-reverse;
}

.staff_interview #main_column .section.divide .pic_box,
.staff_interview #main_column .section.divide .txt_box {
	width: calc((100% - 60px) / 2);
	position: relative;
}

.staff_interview #main_column .section .pic_box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.staff_interview #main_column .section::before {
	content: "";
	display: block;
	width: 54px;
	height: 54px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images/page/circle.png);
	position: absolute;
}

.staff_interview #main_column .section.lead::before  {
    top: -20%;
    right: 10vw;
}

.staff_interview #main_column .section.layout1::before {
    bottom: 0;
    right: -60px;
}

.staff_interview #main_column .section.layout2::before {
    bottom: -20px;
    left: -60px;
}

.staff_interview #main_column .section.full::before {
    bottom: -80px;
    right: calc(50% - 27px);
}

.staff_interview #main_column .section .txt_box {
	z-index: 1;
}

.staff_interview #main_column .section.layout1 .txt_box::before {
	bottom: -60px;
	right: -60px;
}

.staff_interview #main_column .section.layout2 .txt_box::before {
	bottom: -60px;
	right: -60px;
}

.staff_interview #main_column .section.full .txt_box::before {
	bottom: -60px;
	right: calc(50% - 27px);
}

.staff_interview #main_column .section .pic_box::after {
	content: "";
	display: block;
	width: 304px;
	height: 304px;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
}

.staff_interview #main_column .section.layout1 .pic_box::after {
	background-image: url(../images/page/triangle1.png);
    bottom: -50px;
    right: -100px;
}

.staff_interview #main_column .section.layout2 .pic_box::after {
	background-image: url(../images/page/triangle2.png);
	bottom: -40px;
	left: -40px;
}

.staff_interview #main_column .section.full::after {
	content: "";
	display: block;
	width: 304px;
	height: 304px;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
}

.staff_interview #main_column .section.full::after {
	background-image: url(../images/page/triangle2.png);
	bottom: -40px;
	left: -40px;
}




/* --- job_interview --- */
.job_interview #content_wrapper {
	padding-bottom: 0;
}

.job_interview #eye_catch {
	position: relative;
	/* height: 500px; */
	height: 360px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	margin-bottom: 100px;
}

.job_interview #eye_catch > .inner {
	position: relative;
    padding: 80px 0 0;
    box-sizing: border-box;
	height: 100%;
}

.job_interview #eye_catch .title {
	font-size: 2.5rem;
    font-weight: 700;
    color: #115fad;
}

.job_interview #eye_catch .personal_name {
	font-size: 1.375rem;
    font-weight: 700;
    color: #115fad;
}

.job_interview #eye_catch .personal_name .department {
    font-size: 1.75rem;
    font-weight: 500;
}

/* .job_interview #eye_catch .personal_name .name {
    font-size: 1.5rem;
    font-weight: 700;
	margin-right: 10px;
}

.job_interview #eye_catch .personal_name .romaji_name {
    font-size: 1.125rem;
    font-weight: 500;
} */

.job_interview .profile {
    width: 560px;
    height: 200px;
    box-sizing: border-box;
    padding: 0 40px;
    position: absolute;
    left: 0;
    bottom: -60px;
    color: #fff;
    background-color: #115fad;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.job_interview .profile h3 {
	font-size: 1.5rem;
    font-weight: 500;
    border-bottom: 1px solid #fff;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.job_interview .profile p {
	font-size: 0.875rem;
    font-weight: 300;
    line-height: 2;
}

.job_interview .profile .department {
	font-size: 1.125rem;
    font-weight: 500;
}

.job_interview .id_pic {
	position: absolute;
    bottom: -80px;
    right: 80px;
}

.job_interview #main_column .section {
	display: flex;
	flex-wrap: wrap;
    align-items: flex-start;
	gap: 60px;
	margin-bottom: 100px;
	position: relative;
}

.job_interview #main_column .section.layout2 {
	flex-direction: row-reverse;
}

.job_interview #main_column .section.divide .pic_box,
.job_interview #main_column .section.divide .txt_box {
	width: calc((100% - 60px) / 2);
	position: relative;
}

.job_interview #main_column .section .pic_box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.job_interview #main_column .section::before {
	content: "";
	display: block;
	width: 54px;
	height: 54px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images/page/circle.png);
	position: absolute;
}

.job_interview #main_column .section.lead::before  {
    top: -20%;
    right: 10vw;
}

.job_interview #main_column .section.layout1::before {
    bottom: 0;
    right: -60px;
}

.job_interview #main_column .section.layout2::before {
    bottom: -20px;
    left: -60px;
}

.job_interview #main_column .section.full::before {
    bottom: -80px;
    right: calc(50% - 27px);
}

.job_interview #main_column .section.lead::after {
	content: "";
	display: block;
	width: 304px;
	height: 304px;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../images/page/triangle1.png);
	position: absolute;
	top: -40%;
    right: -3vw;
}

.job_interview #main_column .section .txt_box {
	z-index: 1;
}

.job_interview #main_column .section.layout1 .txt_box::before {
	bottom: -60px;
	right: -60px;
}

.job_interview #main_column .section.layout2 .txt_box::before {
	bottom: -60px;
	right: -60px;
}

.job_interview #main_column .section.full .txt_box::before {
	bottom: -60px;
	right: calc(50% - 27px);
}

.job_interview #main_column .section .pic_box::after {
	content: "";
	display: block;
	width: 304px;
	height: 304px;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
}

.job_interview #main_column .section.layout1 .pic_box::after {
	background-image: url(../images/page/triangle1.png);
    bottom: -50px;
    right: -100px;
}

.job_interview #main_column .section.layout2 .pic_box::after {
	background-image: url(../images/page/triangle2.png);
	bottom: -40px;
	left: -40px;
}

.job_interview #main_column .section.full::after {
	content: "";
	display: block;
	width: 304px;
	height: 304px;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
}

.job_interview #main_column .section.full::after {
	background-image: url(../images/page/triangle2.png);
	bottom: -40px;
	left: -40px;
}

.page #main_column h2 {
	border-color: #115FAD;
}

.job_interview .section h2::before,
.job_interview .section h2::after {
	content: ""!important;
	display: none!important;
}

.job_interview .article {
	padding: 60px;
	box-sizing: border-box;
	position: relative;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.job_interview .article::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 100%);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.job_interview #main_column .article .ttl {
	font-size: 2.5rem;
    color: #115FAD;
    line-height: 1.5;
	border: none;
	margin-bottom: 10px;
}

.job_interview #main_column .article .ttl::before,
.job_interview #main_column .article .ttl::after {
	content: none;
}

.job_interview #main_column .article .ttl span {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.job_interview #main_column .article .sub_ttl {
	position: relative;
	margin-bottom: 20px;
    width: 50%;
    color: #fff;
    background-color: #1762ab;
    padding: 8px 18px;
    box-sizing: border-box;
	/* box-shadow: 1px 1px 1px #fff; */
}

.job_interview .article .list {
	display: flex;
    flex-direction: column;
	gap: 1px;
	position: relative;
	color: #115FAD;
	width: 50%;
}

.job_interview .article .list .item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}

.job_interview .article .list .time,
.job_interview .article .list .txt {
	font-weight: 700;
	line-height: 1.5;
}

.job_interview .article .list .time {
	display: block;
	width: 70px;
	text-align: center;
}

.job_interview .article .list .txt {
	width: calc(100% - 70px - 10px);
	padding: 10px 0px 10px 10px;
	padding-left: 20px;
	border-left: solid 14px rgba(23,98,171,0.3);
	box-sizing: border-box;
}

/* --- recruit --- */
#recruit #content_wrapper {
	padding-top: 50px;
}