@charset "utf-8";

/* 202507設定追加分
--------------------------------------------------------------------------*/
body {position: relative;}
header ul {gap: 30px;}
header ul li {margin-left: 0;}
#topPage #sec1.inner {padding-bottom: 90px;}
#topPage #ytArea {display: block; width: 100%; max-width: 728px; height: auto; margin: 0 auto 90px; text-align: center;}
#topPage #ytArea img {width: 100% !important;}
#about #sec4 {background-color: #1837B5;}
#about #sec4 .h2_title span {color: #FFF;}
#about #sec4 .inner {justify-content: space-between;}
#about #sec4 .inner div {display: flex; align-items: center; padding: 0 60px;}
#about #sec4 .inner div p {color: #FFF;}
#about #sec4 .inner figure img {width: 100%;}
#recruit .background_fixed {position: relative; display: block; width: 100%; max-width: 1920px; height: 1080px; margin: 0 auto; padding: 0; clip-path: inset(0);}
#recruit .background_fixed::before {position: absolute; height: inherit; background-image: url('images/2025/IMG_1540_kai3.jpg');}
#recruit .background_fixed div {position: absolute; bottom: 60px; left: 5%; display: block; width: 600px; height: auto; padding: 0 45px 30px; background-color: rgba(255,255,255,0.75); text-align: center;}
#recruit .background_fixed > h2 {position: relative;}
#recruit .background_fixed > h2 span {position: absolute; top: 100px; right: 10%; font-size: 50px; font-family: "Noto Serif JP"; font-weight: 700; text-shadow: 0 0 0.5em #FFF;}
#recruit .background_fixed div p {margin-bottom: 0; padding-top: 30px; text-align: left;}
#recruit #sec1 div.inner {padding-bottom: 0 !important;}
#recruit #sec1 .environment_wrap div h3 {height: auto; padding: 10px 15px; line-height: 1.2;}
#recruit #sec1 .environment_wrap div p span {position: relative; display: inline-block; padding: 5px 15px 0 18px; line-height: 1.2;}
#recruit #sec1 .environment_wrap div p span::before {content: '●'; position: absolute; left: 0; padding-right: 3px;}
#recruit #sec1 .environment_wrap figure {padding: 0 60px;}
#recruit #sec2 ul li p {padding: 0 15px;}
#recruit #sec11 {background-color: #FFF;}
#recruit #sec11 .inner {padding: 0 10px;}
#recruit #sec11 .environment_wrap {display: flex; flex-direction: row-reverse; justify-content: space-between;}
#recruit #sec11 .environment_wrap:last-of-type {margin-top: 80px;}
#recruit #sec11 .environment_wrap div h3 {background-color: #1837B5; font-size: 20px; font-weight: 500; color: #FFF; height: auto; padding: 10px 15px; line-height: 1.2;}
#recruit #sec11 .environment_wrap div p {font-size: 16px; font-weight: 500; line-height: 2.5; padding-top: 30px;}
#recruit #sec11 .environment_wrap div, #recruit #sec11 .environment_wrap figure {width: 580px;}
#recruit #sec11 .environment_wrap figure img {width: 100%; height: auto;}
#recruit #sec12 .inner {max-width: 1920px; padding: 90px 0;}
#recruit #sec12 #slideBox ul.swiper-wrapper {transition-timing-function: linear;}
#recruit #sec12 #slideBox ul.swiper-wrapper li {position: relative; width: 280px; height: 240px; border-radius: 50%;}
#recruit #sec12 #slideBox ul.swiper-wrapper li dl {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column-reverse; width: 100%; text-align: center;}
#recruit #sec12 #slideBox ul.swiper-wrapper li dl dt {color: #1837B5; font-size: 26px; font-weight: 500;}
#recruit #sec12 #slideBox ul.swiper-wrapper li dl dd {color: #1837B5; font-size: 80px; font-weight: 700;}
#recruit #sec12 #slideBox ul.swiper-wrapper li dl dd span {color: #1837B5; font-size: 40px; font-weight: 700;}
#recruit #sec12 #slideBox ul.swiper-wrapper li dl dd span.tate {font-size: 14px; font-weight: 500; writing-mode: vertical-rl;}
#recruit #sec12 #slideBox ul.swiper-wrapper li dl dd span small {font-size: 50%;}
#recruit #sec2 ul li div img {width: 75%; height: auto; border-radius: 0; border: none; object-fit: contain; margin-top: 15px;}
#recruit #sec31 dl {margin-top: 60px; padding: 15px; background-color: #fedb62;}
#recruit #sec31 dl dt {position: relative; width: 100%; height: auto; min-height: 40px; margin-bottom: 15px; padding: 7px 15px 7px 70px; color: #1837B5; font-weight: 500;}
#recruit #sec31 dl dt::before {content: 'Ｑ'; position: absolute; top: 0; left: 15px; display: block; width: 40px; height: 40px; padding-top: 7px; background-color: #FFF; border-radius: 50%; color: #1837B5; font-weight: 700; text-align: center;}
#recruit #sec31 dl dd {position: relative; width: 100%; height: auto; padding: 20px 15px 20px 70px; background-color: #FFF; color: #1837B5; font-weight: 500;}
#recruit #sec31 dl dd::before {content: 'Ａ'; position: absolute; top: 13px; left: 15px; display: block; width: 40px; height: 40px; padding-top: 6px; background-color: #1837B5; border-radius: 50%; color: #FFF; font-weight: 700; text-align: center;}
#recruit #sec31 dl dd a {display: block; margin-top: 15px;}
#recruit #sec31 dl dd a img {width: 100%; max-width: 640px; height: auto;}
#contactForm .secForm dd.cf7Image input {border: none;}
#snsArea {position: fixed; top: 50%; right: 10px; transform: translateY(-50%); z-index: 2; display: flex; flex-direction: column; gap: 30px; align-items: center; width: 60px; height: auto; padding: 30px 0; background-color: rgba(225,225,225,0.9); border-radius: 30px;}
#snsArea li > img {width: 40px; height: auto;}
#snsArea li a img {width: 45px; height: auto;}
@media (min-width: 1921px) {}
@media (min-width: 1401px) {}
@media (max-width: 1400px) {}
@media (min-width: 1200px) {
  #topPage #ytArea:hover {opacity: 0.8;}
  #top #sec0.inner {padding: 0 10px 150px;}
  #about #sec4 {padding: 80px 0; background-color: #1837B5;}
  #about #sec4 .inner {margin-top: 60px;}
  #about #sec4 .inner div {width: 600px;}
  #recruit .background_fixed div p br.tbView {display: none;}
}
@media (max-width: 1199px) {
  #topPage #ytArea {width: 100%; margin-bottom: 40px;}
  #topPage #ytArea img {width: 80%; height: auto;}
  #about #sec4 {padding-top: 70px;}
  #recruit .background_fixed {height: 800px;}
  #recruit .background_fixed > h2 span {top: 50px; right: 5%; font-size: 40px;}
  #recruit #sec11 .environment_wrap div, #recruit #sec11 .environment_wrap figure {width: 48%;}
  #recruit #sec11 .environment_wrap div p {line-height: 2.4;}
}
@media (max-width: 1199px) and (min-width: 992px) {
  #top #sec0.inner {padding-top: 30px !important;}
  #recruit #sec2 ul li p {height: 310px;}
  #about #sec4 .inner div, #about #sec4 .inner figure {width: calc(50% - 10px);}
}
@media (min-width: 992px) {
  header ul li:last-of-type a {margin-left: 0;}
  #snsBox {display: none;}
}
@media (max-width: 991px) {
  #about #sec4 .inner {flex-direction: column;}
  #about #sec4 .inner div, #about #sec4 .inner figure {width: 100%;}
  #about #sec4 .inner div {padding: 0 35px 35px;}
  #recruit #sec11 .environment_wrap {flex-direction: column;}
  #recruit #sec11 .environment_wrap div, #recruit #sec11 .environment_wrap figure {width: 100%;}
  #recruit #sec11 .environment_wrap div p {padding: 30px 0;}
  #recruit #sec11 .environment_wrap div h3 {text-align: center;}
  #snsArea {display: none;}
  #snsBox {display: flex; flex-direction: row; justify-content:center; align-items: flex-end; gap: 30px; height: auto; padding-bottom: 60px;}
  #snsBox li a::after {content: none;}
  #snsBox li a img {width: 50px; height: auto;}
}
@media (max-width: 991px) and (min-width: 768px) {
  #top #sec0.inner {padding-top: 30px !important;}
  #recruit .background_fixed div {bottom: 30px;}
}
@media (min-width: 768px) {
  #top #sec0.inner h2 {margin-bottom: 40px;}
  #recruit .background_fixed::before {opacity: 0.8;}
  #recruit .background_fixed div h2 {display: none;}
}
@media (max-width: 767px) {
  #topPage #ytArea {margin-bottom: 0; padding: 0 15px;}
  #topPage #ytArea img {width: 100%; max-width: 420px;}
  #top #sec0.inner h2 {margin-bottom: 15px;}
  #about #sec4 {padding-top: 40px;}
  #about #sec4 .inner div {padding: 0 25px 25px;}
  #recruit .background_fixed {height: 750px; padding: 0;}
  #recruit .background_fixed::before {background-position-y: 0; background-size: contain;}
  #recruit .background_fixed div {position: relative; top: 25%; left: 0; width: 90%; max-width: 420px; margin: 0 auto 60px; padding: 30px 15px;}
  #recruit .background_fixed > h2 {display: none;}
  #recruit .background_fixed div h2 {font-size: 22px; font-family: "Noto Serif JP";}
  #recruit .background_fixed div p {padding-top: 30px; text-align: left;}
  #recruit .background_fixed div p br {display: none;}
  #recruit #sec11 .inner {padding-top: 10px !important;}
  #recruit #sec11 .environment_wrap:last-of-type {margin-top: 50px;}
  #recruit #sec11 .environment_wrap div h3 {font-size: 18px;}
  #recruit #sec11 .environment_wrap div p {line-height: 1.6; padding: 20px 0;}
  #recruit #sec12 .inner {padding: 40px 0 !important;}
  #recruit #sec31 dl {margin-top: 20px;}
  #recruit #sec31 dl:first-of-type {margin-top: 40px;}
  #snsBox {margin-top: 30px;}
}
@media (max-width: 360px) {
  #recruit .background_fixed {height: 800px;}
  #recruit .background_fixed div h2 {font-size: 20px;}
}

/* #common_sec4設定
--------------------------------------------------------------------------*/
#common_sec4 .container #youtubeArea {justify-content: center; align-items: flex-start; gap: 30px;}
#common_sec4 .container #youtubeArea .iframeArea {position: relative; display: block; max-width: 100%; margin: 50px 0 0; padding-top: 27.5%;}
#common_sec4 .container #youtubeArea .iframeArea span {position: relative; display: block; max-width: 100%; margin: 0; padding-top: 56.25%;}
#common_sec4 .container #youtubeArea .iframeArea iframe {position: absolute; top: 0; right: 0; width: 100%; height: 100%;}
@media (min-width: 1200px) {
  #common_sec4 .container {padding: 0 10px;}
}
@media (max-width: 1199px) {
  #common_sec4 .container {padding: 0 !important;}
  #common_sec4 .container #youtubeArea .iframeArea {margin: 70px 0 0;}
}
@media (max-width: 767px) {
  #common_sec4 {padding-bottom: 45px;}
  #common_sec4 .container {padding: 0 15px !important;}
  #common_sec4 .container #youtubeArea {flex-direction: column;}
  #common_sec4 .container #youtubeArea .iframeArea {padding-top: 56.25%;}
  #common_sec4 .container #youtubeArea .iframeArea:first-of-type {margin-top: 40px;}
  #common_sec4 .container #youtubeArea .iframeArea:last-of-type {margin: 0px;}
}

/* トップページコンテンツ追加分設定
--------------------------------------------------------------------------*/
#topPage #sec1A.inner {padding: 90px 10px 120px;}
#topPage #sec1A h2 span br {display: none;}
#topPage #sec1A ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
#topPage #sec1A ul li img {width: 100%;}
@media (max-width: 991px) {
  #topPage #sec1A h2 span br {display: block;}
  #topPage #sec1A ul {gap: 20px;}
}
@media (max-width: 767px) {
  #topPage #sec1A ul {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 580px) {
  #topPage #sec1A ul {grid-template-columns: repeat(2, 1fr); gap: 5px;}
}
@media (max-width: 389px) {
  #topPage #sec1A .h2_title {font-size: max(5.66vw, 18px);}
}
#topPage #sec2A .h2_title span br {display: none;}
#topPage #sec2A ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
#topPage #sec2A ul li img {width: 100%;}
@media (max-width: 991px) {
  #topPage #sec2A ul {gap: 20px;}
}
@media (max-width: 767px) {
  #topPage #sec2A .h2_title span br {display: block;}
  #topPage #sec2A ul {grid-template-columns: auto;}
}
@media (max-width: 580px) {
  #topPage #sec2A ul {gap: 5px;}
  #topPage .appeal_h2_title {font-size: 20px;}
}

/* 設定
--------------------------------------------------------------------------*/
@media (min-width: 1921px) {}
@media (min-width: 1200px) {}
@media (max-width: 1199px) {}
@media (max-width: 1199px) and (min-width: 992px) {}
@media (min-width: 992px) {}
@media (max-width: 991px) {}
@media (max-width: 991px) and (min-width: 768px) {}
@media (min-width: 768px) {}
@media (max-width: 767px) {}
@media (max-width: 360px) {}