@charset "utf-8";
/* top専用css */

/*==================================
	common
==================================*/
#contents .secTit { color: #cb1818;}
#contents .secTit .jp { font-size: 5rem; font-weight: 700;}
#contents .secTit .en { font-weight: 400; letter-spacing: 0.05em;}
@media screen and (min-width: 750px) {
}
@media screen and (max-width: 899px) {
#contents .secTit { padding-top: 30px; position: relative;}
#contents .secTit .jp { font-size: 2.8rem;}
#contents .secTit .en { font-size: 1.3rem; position: absolute; top: 0; left: 0;}
}


@keyframes loop-slide {
  from { transform: translateX(0);} to { transform: translateX(-100%);}
}


/*==================================
	fv
==================================*/
#fv { height: 100vh; max-height: 1070px; background: url("/lib/img/top/fv_bg.jpg") top center no-repeat; background-size: auto 100vh; position: relative; text-align: center; overflow: hidden;}
#fv .pc { display: block;}
#fv .sp { display: none;}
#fv .copy { max-width: 971px; top: 200px; position: absolute; right: 0; left: 0; margin: auto; z-index: 12;}
#fv .balloonArea p { max-width: 90px; position: absolute; z-index: 9; display: none;}
#fv .balloonArea p.show { display: block;}
#fv .balloonArea .item01 { right: calc( 50% - 300px); bottom: 350px;}
#fv .balloonArea .item02 { left: calc(50% - 400px); bottom: 240px;}
#fv .balloonArea .item03 { left: calc(50% - 600px); bottom: 310px;}
#fv .balloonArea .item04 { right: calc(50% - 500px); bottom: 160px;}
#fv .balloonArea .item05 { right: calc(50% - 680px); bottom: 260px;}
#fv .txtArea {}
#fv .txtArea p { left: calc(50% - 320px); top: 180px; position: absolute; z-index: 10; display: none;}
#fv .txtArea .item01 { max-width: 179px;}
#fv .txtArea .item02 { max-width: 214px;left: calc(50% - 330px); top: 185px;}
#fv .txtArea .item03 { max-width: 183px;}
#fv .txtArea .item04 { max-width: 201px;left: calc(50% - 330px); top: 195px;}
#fv .txtArea .item05 { max-width: 171px;}
#fv .txtArea p.show { display: block;}
#fv .put01 { max-width: 1103px; z-index: 2; position: absolute; left: 0; right: 0; margin: auto; bottom: 160px;}
#fv .put02 { max-width: 584px; z-index: 5; position: absolute; left: calc( 50% - 260px); bottom: 0;}
#fv .put03 { max-width: 530px; bottom: 260px; z-index: 8; position: absolute; right: -10vw;}
#fv .put03on { max-width: 530px; bottom: 260px; z-index: 10; position: absolute; right: -10vw;}
#fv .blind { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; z-index: 1;}
#fv img { width: 100%; vertical-align: bottom;}

@media screen and (min-width: 1700px) {
#fv .balloonArea .item01 { right: 550px;}
#fv .balloonArea .item02 { left: 450px;}
#fv .balloonArea .item03 { left: 240px;}
#fv .balloonArea .item04 { right: 340px;}
#fv .balloonArea .item05 { right: 160px;}
}
@media screen and (min-width: 1400px) {
#fv:before { padding-top: 265px;}
#fv .put03 { right: 0;}
#fv .put03on { right: 0;}
/*#fv .balloonArea .item01 { right: 500px;}*/
}
@media screen and (max-width: 1399px) {
#fv .balloonArea .item02 { left: calc(50% - 28vw);}
#fv .balloonArea .item03 { left: calc(50% - 42vw);}
#fv .balloonArea .item04 { right: calc(50% - 35vw);}
#fv .balloonArea .item05 { right: calc(50% - 48vw);}
}
@media screen and (max-width: 1040px) {
#fv .pc { display: none;}
#fv .sp { display: block;}
#fv .copy { max-width: 544px; width: 72vw; top: 200px;}
#fv .balloonArea p { width: 14.4vw; max-width: 80px;}
#fv .balloonArea .item01 { right: 230px; bottom: 300px;}
#fv .balloonArea .item02 { left: 160px; bottom: 140px;}
#fv .balloonArea .item03 { left: 50px; bottom: 210px;}
#fv .balloonArea .item04 { right: 180px; bottom: 60px;}
#fv .balloonArea .item05 { right: 60px; bottom: 160px;}
#fv .txtArea p { left: calc(50% - 70px); top: 185px;}
#fv .txtArea .item02 { left: calc(50% - 80px);}
#fv .txtArea .item04 { left: calc(50% - 80px);}
#fv .put01 { max-width: 100%; width: 100%; z-index: 7;}
#fv .put01 .pc { display: block;}
#fv .put01 .sp { display: none;}
#fv .put02 { max-width: 544px; width: 100%; left: 0; right: 0; margin: auto; bottom: 0;}
#fv .put03 { max-width: 533px; width: 100%; right: 0; bottom: 0;}
#fv .put03on { max-width: 533px; width: 100%; right: 0; bottom: 0;}
}

@media screen and (max-width: 750px) {
#fv { height: 740px; background: url("/lib/img/top/fv_bg_sp.jpg") top center no-repeat; background-size: cover; position: relative;}
#fv .copy { top: 150px; max-width: 400px; width: 70%;}
#fv .balloonArea p { max-width: 70px !important;}
#fv .balloonArea .item01 { right: auto; left: calc(50% + 40px);  top: 320px; bottom: auto;}
#fv .balloonArea .item02 { left: auto; right: calc(50% + 60px); top: 345px; bottom: auto;}
#fv .balloonArea .item03 { right: auto; left: calc(50% + 120px);  top: 470px; bottom: auto;}
#fv .balloonArea .item04 { left: auto; right: calc(50% + 120px); top: 530px; bottom: auto;}
#fv .balloonArea .item05 { left: 0; right: 0; bottom: auto; margin: auto; top: 590px}
#fv .txtArea p { top: 135px;}
#fv .txtArea .item01 { width: 20.73vw; min-width: 95px; left: calc(50% - 8.3vw);}
#fv .txtArea .item02 { width: 24.86vw; min-width: 108px; left: calc(50% - 8.8vw); top: 140px;}
#fv .txtArea .item03 { width: 19.4vw; min-width: 95px; left: calc(50% - 7.8vw);}
#fv .txtArea .item04 { width: 21.8vw; min-width: 105px; left: calc(50% - 8.8vw); top: 140px;}
#fv .txtArea .item05 { width: 17.8vw; min-width: 95px; left: calc(50% - 6.8vw);}
#fv .put01 { bottom: 0;}
#fv .put01 .pc { display: none;}
#fv .put01 .sp { display: block;}
#fv .put02 { max-width: 450px; width: 100%; bottom: auto; top: 250px;}
#fv .put03 { width: 100%; max-width: inherit; right: 0; bottom: -2vw; display: none;}
#fv .put03on { width: 100%; max-width: inherit; right: 0; bottom: -2vw; display: none;}
}

/*==================================
	fv animation
==================================*/
#fv .balloonArea { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none;}
#fv .balloonArea p { display: block; max-width: 90px; position: absolute; z-index: 9; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(30px) scale(1.5); transform-origin: center center; transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s; will-change: transform, opacity;}
/* 表示開始・表示中 */
#fv .balloonArea p.is-show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0s;}
/* 消える時 */
#fv .balloonArea p.is-leave { opacity: 0; visibility: visible; transform: translateY(-30px) scale(1.5); transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s;}
/* ふわふわは img 側にかける */
#fv .balloonArea p.is-show img { animation-name: fvBalloonFloat; animation-duration: var(--float-duration, 3s); animation-delay: var(--float-delay, 0s); animation-timing-function: ease-in-out; animation-iteration-count: infinite;}
#fv .balloonArea p.is-leave img { animation: none;}

@keyframes fvBalloonFloat {
  0% { transform: translateY(0);}
  50% { transform: translateY(-8px);}
  100% { transform: translateY(0);}
}


/*==================================
	message
==================================*/
#message { padding-bottom: 20px; color: #fff; background: url("/lib/img/top/message_bg.gif"); overflow: hidden; position: relative;}
#message:before { width: 687px; height: 1105px; right: calc(50% + 117px); content: ""; background: url("/lib/img/top/message_ph.png") no-repeat; position: absolute; top: 0;}
#message .txtArea { width: 50%; margin-left: 50%; margin-bottom: 200px; padding-top: 100px;}
#message .txtArea p { font-size: 1.8rem; margin-bottom: 30px; font-weight: 700; line-height: 1.8;}
#message .txtArea .tit { font-size: 5.6rem; margin-bottom: 60px;}
#message .txtArea .tit span.line { border-bottom: solid 1px #fff; padding-bottom: 2px;}
#message .txtArea .big { font-size: 2.6rem;}
@media screen and (max-width: 1180px) {
#message:before { width: 693px; height: 894px; right:auto; left: 0; top: auto; bottom: 150px; content: ""; background: url("/lib/img/top/message_ph_sp.png") no-repeat;}
#message .txtArea { width: 100%; margin-left: 0; margin-bottom: 1000px;}
#message .txtArea .tit { text-align: center;}
}
@media screen and (max-width: 899px) {
#message { padding-bottom: 2.5vw;}
#message .txtArea { padding-top: 0;}
#message .txtArea p { font-size: 1.5rem; margin-bottom: 20px;}
#message .txtArea .pc { display: none;}
#message .txtArea .tit { font-size: 3.3rem; margin-bottom: 40px;}
#message .txtArea .big { font-size: 1.8rem;}
}
@media screen and (max-width: 750px) {
#message:before { width: 92.4vw; height: 119.2vw; bottom: 15vw;  background-size: cover;}
#message .txtArea { margin-bottom: 130vw;}
}

/* slide css */
.messageSlider { display: flex;  align-items: center; overflow: hidden; height: 10vw;}
.messageSlider .slideshow { display: flex; animation: loop-slide 40s infinite linear 1s both;}
.messageSlider li { width: 90vw; height: 10vw;}
.messageSlider li img { width: 100%;}
@media screen and (min-width: 900px) {
.messageSlider { height: 79px;}
.messageSlider li { width: 765px; height: 79px;}
}


/*==================================
	job
==================================*/
#job { padding: 170px 0 150px 0; background: url("/lib/img/recruitinfo/flow_bg.gif");}
#job .inner { display: flex; justify-content: space-between;}
#job .titArea .txt { margin-top: 50px; line-height: 2;}
#job .list {}
#job .list li { width: 620px; max-width: 100%; box-shadow: 0px 0px 9px 1px rgba(153, 153, 153, 0.06);}
#job .list li a { padding-top: 300px; border-radius: 15px;}
#job .list li:nth-child(1) a { background: url("/lib/img/top/job_ph01.jpg") no-repeat; background-size: 100% auto;}
#job .list li:nth-child(2) a { background: url("/lib/img/top/job_ph02.jpg") no-repeat; background-size: 100% auto; margin-top: 60px;}
#job .list li a .txtArea { padding: 30px 80px 30px 30px; font-size: 3rem; font-weight: 700; background: #fff; line-height: 1; border-radius: 0 0 15px 15px; position: relative;}
#job .list li a .txtArea:before { width: 12px; height: 12px; right: 38px; bottom: 38px; background: url("/lib/img/icon_arrR_wh.svg") no-repeat; background-size: 12px 12px; display: inline-block; content: ""; position: absolute; margin: auto; z-index: 1;}
#job .list li a .txtArea:after { width: 48px; height: 48px; border-radius: 48px; display: inline-block; background: #cb1818; content: ""; position: absolute; right: 20px; bottom: 20px; margin: auto;}
#job .list li a .txtArea .min { margin-right: 10px; font-size: 1.8rem; font-weight: 500;}


@media screen and (max-width: 1099px) {
#job .list li { width: 52vw;}
#job .list li a { padding-top: 25vw;}
#job .list li a .txtArea .min { display: block; margin-right: 0; margin-bottom: 5px;}
#job .list li a .txtArea { padding: 20px 80px 20px 20px;}
}
@media screen and (max-width: 899px) {
#job { padding: 85px 0 75px 0;}
#job .inner { display: block;}
#job .titArea .txt { margin-top: 25px;}
#job .list { margin-top: 40px;}
#job .list li { width: 100%;}
#job .list li a { padding-top: 48vw; border-radius: 10px;}
#job .list li:nth-child(1) a { background: url("/lib/img/top/job_ph01_sp.jpg") no-repeat; background-size: 100% auto;}
#job .list li:nth-child(2) a { background: url("/lib/img/top/job_ph02_sp.jpg") no-repeat; background-size: 100% auto; margin-top: 30px;}
#job .list li a .txtArea { font-size: 2.2rem; padding: 15px 40px 15px 15px; border-radius: 0 0 10px 10px;}
#job .list li a .txtArea:before { width: 8px; height: 8px; right: 20px; bottom: 20px; background-size: 8px 8px;}
#job .list li a .txtArea:after { width: 27px; height: 27px; right: 10px; bottom: 10px; border-radius: 27px;}
#job .list li a .txtArea .min { font-size: 1.3rem;}
}


/*==================================
	interview
==================================*/
#interview { padding: 170px 0; margin: -30px 0; border-radius: 24px; position: relative; z-index: 10; background: #fff;}
#interview .more { margin-top: 50px; text-align: center;}
#interview .more .btn { padding: 30px 45px; min-width: 353px; border-radius: 100px; display: inline-block; background: #cb1818; text-align: left; position: relative;}
#interview .more .btn .arr { font-size: 1.8rem; font-weight: 700; color: #fff;}
#interview .more .btn .arr:before { width: 15px; height: 15px; right: 40px; top: 0; bottom: 0; margin: auto; background: url("/lib/img/icon_arrR_red.svg") no-repeat; background-size: 15px 15px; content: ""; position: absolute; z-index: 1;}
#interview .more .btn .arr:after { width: 54px; height: 54px; border-radius: 54px; right: 20px; top: 0; bottom: 0; margin: auto; background: #fff; content: ""; position: absolute;}
@media screen and (max-width: 899px) {
#interview { padding: 70px 0 150px 0; margin: -4vw 0; border-radius: 3.2vw;}
#interview .more { margin-top: 30px;}
#interview .more .btn { width: 90%; max-width: 300px;}
#interview .more .btn .arr { font-size: 1.5rem;}
#interview .more .btn .arr:before { width: 12px; height: 12px; right: 38px; background-size: 12px 12px;}
#interview .more .btn .arr:after { width: 48px; height: 48px; border-radius: 48px;}
}

/* interviewSlider */
#interview .txtArea {}
#interview .txtArea .secTit {}
#interview .txtArea .txt { line-height: 1.8;}
#interview .slick-slide { width: 360px; padding-top: 52px; transition: transform .4s ease, padding-top .4s ease; transform: scale(.83); will-change: transform;}
#interview .slick-center { padding-top: 0; transform: scale(1);}
#interview .interviewSliderArea { max-width: 1100px; width: 87.73%; margin: 0 auto;}
#interview .interviewSliderArea { overflow: hidden; position: relative; z-index: 10;}
#interview .interviewSliderArea .slick-list { margin: 0 -30px;}
#interview .interviewSliderArea .slick-slide { margin: 0 15px;}
#interview .interviewSliderArea .interviewSlider img { width: 100%;}
#interview .interviewSliderArea .interviewSlider .slick-arrow { width: 54px; height: 54px; border-radius: 54px; bottom: -55px; border: solid 1px #cb1818; top: auto; z-index: 10;}
#interview .interviewSliderArea .interviewSlider .slick-arrow:before { content: "";}
#interview .interviewSliderArea .interviewSlider .slick-prev { right: 64px; left: auto; background: url("/lib/img/icon_arrL_red.svg") center center no-repeat; background-size: 12px auto;}
#interview .interviewSliderArea .interviewSlider .slick-next { right: 0; background: url("/lib/img/icon_arrR_red.svg") center center no-repeat; background-size: 12px auto;}
#interview .interviewSliderArea .interviewSlider .slick-dots { bottom: -15px; padding-right: 150px; text-align: right;}
#interview .interviewSliderArea .interviewSlider .slick-dots li { margin: 0;}
#interview .interviewSliderArea .interviewSlider .slick-dots li.slick-active button::before { color: #cb1818;}
/*#interview .interviewSliderArea .interviewSlider .slide { width: 360px;}*/
#interview .interviewSliderArea .interviewSlider .slide a { position: relative; cursor: pointer;}
/*#interview .interviewSliderArea .interviewSlider .slide a:before,
#interview .interviewSliderArea .interviewSlider .slide a:after { width: 76px; height: 76px; content: ""; position: absolute; right: 20px; bottom: 20px;}
#interview .interviewSliderArea .interviewSlider .slide a:before { border-radius: 76px; border: solid 1px #fff;}
#interview .interviewSliderArea .interviewSlider .slide a:after { background-size: 15px 15px; background: url("/lib/img/icon_arr_mov.svg") center center no-repeat;}*/
#interview .interviewSliderArea .interviewSlider .slide a .name { left: 50px; top: calc( 50% + 40px); position: absolute;}
#interview .interviewSliderArea .interviewSlider .slide a .name .post { font-size: 1.8rem; padding: 5px 10px; background: #fff; display: inline-block;}
#interview .interviewSliderArea .interviewSlider .slide a .name .en { font-size: 3.2rem; padding: 2px 10px; color: #fff; background: #cb1818; display: inline-block;}

@media screen and (min-width: 1150px) {
}
@media screen and (min-width: 1050px) {
#interview .txtArea { margin-bottom: 80px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: last baseline;}
}
@media screen and (max-width: 1259px) {	
#interview .slick-slide {  width: 29vw; padding-top: 3.8vw;}
#interview .slick-center { padding-top: 0; transform: scale(1);}
#interview .interviewSliderArea .slick-list { margin: 0 -2vw;}
#interview .interviewSliderArea .slick-slide { margin: 0 1vw;}
}
@media screen and (max-width: 1049px) {
#interview .txtArea .txt { margin: 20px 0 50px 0;}
}
@media screen and (max-width: 899px) {
#interview .txtArea .txt { margin: 20px 0 30px 0;}
#interview .slick-slide {  width: 72vw; padding-top: 10vw;}
#interview .slick-center { padding-top: 0; transform: scale(1);}
#interview .interviewSliderArea { max-width: 100%; width: 100%;}
#interview .interviewSliderArea .slick-list { margin: 0 -0.4vw;}
#interview .interviewSliderArea .slick-slide { margin: 0 0.2vw;}
#interview .interviewSliderArea .interviewSlider .slick-arrow { width: 42px; height: 42px; border-radius: 42px; bottom: -40px;}
#interview .interviewSliderArea .interviewSlider .slick-prev { right: calc( 5% + 52px);}
#interview .interviewSliderArea .interviewSlider .slick-next { right: 5%;}
#interview .interviewSliderArea .interviewSlider .slick-dots { bottom: -10px;   padding-right: calc(5% + 110px);}
#interview .interviewSliderArea .interviewSlider .slick-dots li button:before { font-size: 1rem;}
/*#interview .interviewSliderArea .interviewSlider .slide a:before,
#interview .interviewSliderArea .interviewSlider .slide a:after { width: 50px; height: 50px;}
#interview .interviewSliderArea .interviewSlider .slide a:before { border-radius: 50px;}
#interview .interviewSliderArea .interviewSlider .slide a:after { background-size: 10px 10px;}*/
#interview .interviewSliderArea .interviewSlider .slide a .name { left: 25px; top: 60%;}
#interview .interviewSliderArea .interviewSlider .slide a .name .post { font-size: 1.3rem; padding: 5px 10px;}
#interview .interviewSliderArea .interviewSlider .slide a .name .en { font-size: 2.1rem; padding: 2px 10px;}
}

/* slick-disabled */
#interview .interviewSliderArea .interviewSlider .slick-arrow.slick-disabled { border: solid 1px #d2d2d2; cursor: auto;}
#interview .interviewSliderArea .interviewSlider .slick-prev.slick-disabled { background: url("/lib/img/icon_arrL_gry.svg") center center no-repeat; background-size: 12px auto; }
#interview .interviewSliderArea .interviewSlider .slick-next.slick-disabled { background: url("/lib/img/icon_arrR_gry.svg") center center no-repeat; background-size: 12px auto;}

/* modal */
.modal-video-body {max-width: 420px; width: 90%; margin: 0 auto;}
.modal-video-movie-wrap { padding-bottom: 177.77% !important; /* 9:16 */}
.modal-video-movie-wrap iframe { object-fit: cover;}

/* number */
#interview .number { margin-top: 130px;}
#interview .number img { max-width: 100%;}
#interview .number a { position: relative; color: #fff;}
#interview .number a .arr { font-size: 1.7rem; padding-bottom: 15px; width: 195px; height: 195px; border-radius: 195px; right: 60px; bottom: -70px; background: #cb1818; text-align: center; display: inline-block; position: absolute; display: flex; align-items: center; justify-content: center; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; letter-spacing: 0.08em;}
#interview .number a .arr:before { width: 15px; height: 15px; bottom: 60px; background: url("/lib/img/icon_arrR_wh.svg") no-repeat; background-size: 12px 12px; content: ""; position: absolute; z-index: 1; display: inline-block; left: 0; right: 0; margin: auto;}
@media screen and (max-width: 1099px) {
#interview .number a .arr { width: 160px; height: 160px; border-radius: 160px; right: 60px; bottom: -50px;}
#interview .number a .arr:before { bottom: 50px;}
}
@media screen and (max-width: 899px) {
#interview .number a .arr { width: 140px; height: 140px; border-radius: 140px;}
#interview .number a .arr:before { bottom: 40px;}
}
@media screen and (max-width: 749px) {
#interview .number { margin-top: 70px;}
#interview .number a .arr { left: 0; right: 0; margin: auto;}
#interview .number a .arr { font-size: 1.4rem; font-weight: 500; bottom: -100px;}
#interview .number a .arr:before { bottom: 40px;}
}


/*==================================
	environment
==================================*/
#environment { padding: 120px 0 120px 0; background: url("/lib/img/top/environment_bg.jpg") no-repeat; background-size: cover;}
#environment .outer { padding: 80px 110px; background: #fff; border-radius: 24px;}
#environment .secTit { display: flex; align-items: baseline;}
#environment .secTit .jp { margin-right: 10px;}
#environment .txt { margin-top: 30px;}
#environment .list { margin-top: 50px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 15px; grid-row-gap: 15px;}
#environment .list li {}
#environment .list li a { padding: 39px 30px 30px 30px; height: 300px; border-radius: 8px; position: relative; color: #fff;}
#environment .list li a .balloon { font-size: 1.4rem; padding: 11px 20px; border-radius: 0 30px 30px 30px; border: solid 1px #fff;}
#environment .list li a .txt { font-size: 3.6rem; position: absolute; bottom: 30px; left: 30px; font-weight: 700;}
#environment .list li a .txt .arr { padding-right: 60px; position: relative; display: block;}
#environment .list li a .txt .arr:before { width: 12px; height: 12px; right: 18px; bottom: 18px; background: url("/lib/img/icon_arrR_wh.svg") no-repeat; background-size: 12px 12px; display: inline-block; content: ""; position: absolute; margin: auto; z-index: 1;}
#environment .list li a .txt .arr:after { width: 48px; height: 48px; border-radius: 48px; display: inline-block; background: #cb1818; content: ""; position: absolute; right: 0; bottom: 0; margin: auto;}
#environment .list li a .txt .arr .switching { display: none;}
#environment .list li:nth-child(1) { grid-area: 1 / 1 / 2 / 2;}
#environment .list li:nth-child(1) a { background: url("/lib/img/top/environment_item01.jpg") center center no-repeat; background-size: cover;}
#environment .list li:nth-child(2) { grid-area: 2 / 1 / 3 / 2;}
#environment .list li:nth-child(2) a { background: url("/lib/img/top/environment_item02.jpg") center center no-repeat; background-size: cover;}
#environment .list li:nth-child(3) { grid-area: 1 / 2 / 3 / 3;}
#environment .list li:nth-child(3) a { height: 615px; background: url("/lib/img/top/environment_item03.jpg") center center no-repeat; background-size: cover;}
#environment .list li.comingsoon a:before { font-size: 4.9rem; content: "coming soon"; color: #fff; position: absolute; width: 100%; top: 50%; left: 0; transform: translate(0, -50%); z-index: 5; text-align: center; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;}
#environment .list li.comingsoon a:after { width: 100%; height: 100%; background: #222; opacity: 0.8; content: ""; position: absolute; z-index: 4; left: 0; top: 0; display: inline-block; border-radius: 8px;}
#environment .list li.comingsoon a:hover { opacity: 1;}
#environment .list li.comingsoon a .txt .arr:before,
#environment .list li.comingsoon a .txt .arr:after { display: none;}
@media screen and (max-width: 1400px) {
#environment .outer { padding: 40px 5% 60px 5%;}
}
@media screen and (max-width: 1250px) {
#environment .list li a .txt .arr .switching { display: block;}
#environment .list li:nth-child(2) a .txt .arr { padding-right: 0;}
}
@media screen and (max-width: 899px) {
#environment { padding: 90px 0;}
#environment .outer { padding: 40px 7% 40px 7%; border-radius: 3.2vw;}
#environment .secTit .jp { margin-right: 0;}
#environment .txt { margin-top: 15px;}
#environment .list { margin-top: 30px; display: block;}
#environment .list li { margin-top: 20px;}
#environment .list li a { height: 200px; padding: 25px 20px 20px 20px;}
#environment .list li a .balloon { font-size: 1.2rem; padding: 8px 15px; border-radius: 0 30px 30px 30px;}
#environment .list li a .txt { font-size: 2rem; bottom: 20px; left: auto; right: 20px;}
#environment .list li a .txt .arr .pcOnly { display: none;}
#environment .list li a .txt .arr .switching  { display: none;}
#environment .list li:nth-child(3) a { height: 200px;}
#environment .list li a .txt .arr { padding-right: 35px;}
#environment .list li a .txt .arr:before { width: 8px; height: 8px; right: 10px; bottom: 10px; background-size: 8px 8px;}
#environment .list li a .txt .arr:after { width: 27px; height: 27px; border-radius: 27px;}
#environment .list li:nth-child(2) a .txt .arr { padding-right: 35px;}
#environment .list li:nth-child(3) a { background: url("/lib/img/top/environment_item03_sp.jpg") top center no-repeat; background-size: cover;}
#environment .list li.comingsoon a:before { font-size: 3rem;}
#environment .list li.comingsoon a .txt .arr { padding-right: 0;}
}

@media screen and (max-width: 749px) {
#environment .list li a { height: 145px;}
#environment .list li:nth-child(3) a { height: 145px;}
}



/*==================================
	about
==================================*/
#about { padding: 170px 0 150px 0; background: url("/lib/img/recruitinfo/flow_bg.gif");}
#about .titArea { text-align: center;}
#about .titArea .txt { margin-top: 40px; line-height: 2;}
#about .list { margin-top: 70px;}
#about .list { display: flex; justify-content: space-between;}
#about .list li { width: 31.81%;}
#about .list li a { padding: 25px; background: #fff; box-shadow: 0px 0px 9px 1px rgba(153, 153, 153, 0.06); border-radius: 6px; border: solid 1px #d6d6d6; position: relative;}
#about .list li a:after { width: 17px; height: 17px; right: 20px; bottom: 30px; content: ""; background: url("/lib/img/icon_arrR_red.svg") no-repeat; background-size: cover; position: absolute;}
#about .list li a img { width: 100%;}
#about .list li a .txtArea { font-size: 3rem; margin-top: 15px;}
@media screen and (max-width: 1099px) {
#about .list li a .txtArea { font-size: 2.5rem;}
}
@media screen and (max-width: 899px) {
#about { padding: 85px 0 75px 0;}
#about .titArea { text-align: left;}
#about .titArea .txt { margin-top: 20px;}
#about .list { margin-top: 35px; display: block;}
#about .list li { width: 100%; max-width: 600px; margin: 0 auto 20px auto;}
#about .list li a .spOnly { display: block;}
#about .list li a .pcOnly { display: none;}
#about .list li a .txtArea { font-size: 2.2rem;}
}



/*==================================
	news
==================================*/
#news { margin: -30px 0 0 0; border-radius: 24px; position: relative; z-index: 10; background: #fff;}
#news .inner { padding: 170px 0 150px; display: flex; flex-wrap: wrap; justify-content: space-between;}
#news .list { width: calc(100% - 300px); border-top: solid 1px #e6e6e6;}
#news .list li { padding: 40px; border-bottom: solid 1px #e6e6e6;}
#news .list li .date { margin-bottom: 20px; color: #cb1818; font-family: "Jost", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal;}
#news .list li .txt {}
@media screen and (max-width: 899px) {
#news { margin: -4vw 0 0 0; border-radius: 3.2vw;}
#news .inner { padding: 70px 0 50px;}
#news .list { margin-top: 30px; width: 100%;}
#news .list li { padding: 20px 0;}
#news .list li .date { margin-bottom: 10px;}
}

/* slide css */
.phSlider { display: flex;  align-items: center; overflow: hidden; height: 48vw;}
.phSlider .slideshow { display: flex; animation: loop-slide 40s infinite linear 1s both;}
.phSlider li { width: 43.46vw; height: 48vw;}
.phSlider li img { width: 100%;}
@media screen and (min-width: 900px) {
.phSlider { height: 420px;}
.phSlider li { width: 380px; height: 420px;}
}


/*==================================
	top_entry
==================================*/
#top_entry { margin-top: 150px; padding-bottom: 550px; background: url("/lib/img/top/entryTop_bg.png") center top no-repeat; background-size: 1861px 1366px; position: relative;}
#top_entry .outer { padding: 200px 0 30px 0;}
#top_entry .secTit { font-size: 6.6rem; font-weight: 700; text-align: center; letter-spacing: 0.1em;}
#top_entry .txt { margin-top: 60px; text-align: center;}
#top_entry .txt img { max-width: 100%; margin: auto;}
#top_entry .bubble { position: absolute; overflow: visible; top: 0;}
#top_entry .bubble img { margin-top: 20%; opacity: 0; max-width: 100%;}
#top_entry .bubble01 { max-width: 119px; right: calc(50% + 490px); top: 524px;}
#top_entry .bubble02 { max-width: 106px; left: calc(50% + 470px); top: 540px;}
#top_entry .bubble03 { max-width: 52px; right: calc(50% + 106px); top: 603px;}
#top_entry .bubble04 { max-width: 63px; left: calc(50% + 138px); top: 545px;}
#top_entry .bubble05 { max-width: 78px; right: calc(50% + 130px); top: 497px;}
@media screen and (max-width: 1199px) {
#top_entry .bubble01 { width: 9.91vw; right: calc(50% + 40.83vw);}
#top_entry .bubble02 { width: 8.83vw; left: calc(50% + 39.16vw);}
#top_entry .bubble03 { width: 4.3vw; right: calc(50% + 8.83vw);}
#top_entry .bubble04 { width: 5.25vw; left: calc(50% + 11.5vw);}
#top_entry .bubble05 { width: 6.5vw; right: calc(50% + 10.83vw);}
}
@media screen and (max-width: 899px) {
#top_entry { margin-top: 100px; padding-bottom: 48vw; background-size: 930.5px 683px;}
#top_entry .pcOnly { display: none;}
#top_entry .spOnly { display: block;}
#top_entry .outer { padding: 100px 0 20px 0;}
#top_entry .secTit { font-size: clamp(1.688rem, 0.755rem + 4.66vw, 3.375rem);}
#top_entry .txt { margin-top: 20px;}
#top_entry .txt img { max-width: 398px; width: 53%; min-width: 250px;}
#top_entry .bubble01 { top: calc( 30vw + 120px);}
#top_entry .bubble02 { top: calc( 30vw + 120px);}
#top_entry .bubble03 { top: calc( 36vw + 120px);}
#top_entry .bubble04 { top: calc( 36vw + 120px);}
#top_entry .bubble05 { top: calc( 27vw + 120px);}
}
@media screen and (max-width: 629px) {
#top_entry .bubble01 { top: calc( 32vw + 120px);}
#top_entry .bubble02 { top: calc( 32vw + 120px);}
#top_entry .bubble03 { top: calc( 38vw + 120px);}
#top_entry .bubble04 { top: calc( 38vw + 120px);}
#top_entry .bubble05 { top: calc( 29vw + 120px);}
}
@media screen and (max-width: 499px) {
#top_entry .bubble01 { top: calc( 35vw + 120px);}
#top_entry .bubble02 { top: calc( 35vw + 120px);}
#top_entry .bubble03 { top: calc( 40vw + 120px);}
#top_entry .bubble04 { top: calc( 40vw + 120px);}
#top_entry .bubble05 { top: calc( 32vw + 120px);}
}

/* top_entry_ph */
.top_entry_ph { left: 0; right: 0; bottom: -10px; margin: auto; position: absolute; z-index: 10; text-align: center;}
.top_entry_ph img { max-width: 98%;}
@media screen and (max-width: 999px) {
.top_entry_ph { bottom: -5px;}
}
@media screen and (max-width: 899px) {
.top_entry_ph { bottom: 0;}
}
@media screen and (max-width: 499px) {
.top_entry_ph { bottom: -2px;}
}