/***********************************************
common parts
***********************************************/
.font_en{
  font-family:"Ubuntu Sans"!important;
}
.h2_title,
.h2_title_white{
  margin-bottom: 8rem;
}
.h2_title .title_en{
  font-family: var(--font-secondary);
  color: var(--color-navy);
  display:block;
  font-size:6.4rem;
  font-weight: 500;
  line-height: 1;
}
.h2_title .title_ja{
  display:block;
  font-size:2rem;
  font-weight: normal;
  color: var(--color-title-gray);
}
.h2_title_white .title_en{
  font-family: var(--font-secondary);
  color: #fff;
  display:block;
  font-size:6.4rem;
  font-weight: 500;
  line-height: 1;
}
.h2_title_white .title_ja{
  display:block;
  font-size:2rem;
  font-weight: normal;
  color: #fff;
  text-align: center;
}
.h2_udertitle{
  font-family: var(--font-secondary);
  font-size: clamp(3rem, 4vw, 4.8rem);
  font-weight: 500;
  color: var(--color-navy);
  line-height: 1.2;
  text-align: center;
  margin: 0 auto 10rem auto;
}
a.btn{
  font-size: 2rem;
  background: var(--color-navy);
  color: #fff;
  padding: 1.6rem 8.3rem;
  border-radius: 5cqb;
  box-shadow: -2px 4px 0px var(--color-green-light);
  display: inline-block;
  text-decoration: none;
  transition: 0.6s;
  position: relative;
  z-index: 1;
}
a.btn:hover{
  color: var(--color-green-light);
}
a.btn span{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -2.5rem;
  width: 6.5rem;
  height: 0.3rem;
  border-radius: 5cqb;
  background: var(--color-green-light);
  transition: 0.6s;
  z-index: 2;
}
a.btn:hover  span{
    right: -5rem;
}
@media screen and (max-width: 820px){
.h2_title,
.h2_title_white{
  margin-bottom: 4rem;
}
.h2_title .title_en{
  font-size:4.4rem;
}
.h2_title .title_ja{
  font-size:1.4rem;
}
.h2_title_white .title_en{
  font-size:4.4rem;
}
a.btn{
  font-size: 1.6rem;
  padding: 1.2rem 6.8rem;
}
a.btn span{
  right: -2.5rem;
  width: 5rem;
}
.h2_udertitle{
  margin: 0 auto 8rem auto;
}
}

/***********************************************
header
***********************************************/
header{
  width: 100%;
  height: 8rem;
  z-index: 1000;
  position: relative;
  /*display: none;*/
}
.header_logo{
  padding-top: 1rem;
}
.header_nav{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  width: 71.8rem;
  height: 8rem;
  border-bottom-left-radius: 5rem;
  border-bottom-right-radius: 5rem;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
}
.header_nav nav{
  display: flex;
  justify-content: center;
  align-items: center;
}
.header_nav nav ul{
  display: flex;
  list-style: none;
  font-size: 1.6rem;
   gap: 2rem;
   padding-left: 2rem;
}
.header_nav nav ul li a{
  color: #2D2C2B;
  text-decoration: none;
  transition: 0.6s ease;
}
.header_nav nav ul li a:hover{
  color: var(--color-navy);
}
.header_wrapper{
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: fixed;
}
.header_nav nav{
  display: flex;
  align-items: center;
  gap: 38px;
}
.header_nav_list{
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.header_nav_list a{
  text-decoration: none;
  color: #222;
}
.header_nav_list .nav_active{
  color: #5a59f0;
}
/* ======================================
   右上ボタン（PC/SP共通）
====================================== */
.header_menu_btn{
  position: absolute;
  top: 1.6rem;
  right: 4rem;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  z-index: 100;
}
.header_menu_ring{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-32deg);
  transition: transform 0.4s ease;
}
.ring{
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 110 18 110 18;
  stroke-dashoffset: 8;
  transition: stroke 0.4s ease;
}
.header_menu_btn:hover .header_menu_ring{
  transform: rotate(68deg);
}
.header_menu_btn:hover .ring{
  stroke: url(#ringGrad_menu);
}
.header_menu_lines{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translate(-50%, -50%);
}
.header_menu_btn:hover > .header_menu_lines span:nth-child(3){
  width: 100%;
}
.header_menu_lines span{
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: #fff;
}
.header_menu_lines span:nth-child(3){
  width: 73%;
  transition: 0.4s ease;
}
.header_menu_btn.undermenu_color_adj .header_menu_lines span {
    background: linear-gradient(#9DECFF 0%, #00B2D5 100%);
}                                                                                                                                                                                                                                                                                           
.header_menu_btn.undermenu_color_adj .ring {
     stroke: url(#ringGrad_menu);
}
/* ======================================
   PC menu overlay
====================================== */
.pc_menu_overlay{
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.pc_menu_overlay.is_open{
  pointer-events: auto;
}

/* ======================================
   PC menu panel
====================================== */
.pc_menu_panel{
  position: fixed;
  top: 0;
  right: 0;
  width: 32.6rem;
  height: 100vh;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  z-index: 80;
  pointer-events: none;
}
.pc_menu_panel.is_open{
  transform: translateX(0);
  pointer-events: auto;
    right: 3rem;
}
.pc_menu_panel_inner{
  width: 100%;
  height: auto;
  background: rgba(26, 90, 156, 1);
  border-bottom-left-radius: 1.6rem;
  border-bottom-right-radius: 1.6rem;
  padding: 2.8rem 3.8rem 4rem;
  backdrop-filter: blur(4px);
}
/* ======================================
PC menu head
====================================== */
.pc_menu_head{
  margin-bottom: 3.2rem;
  padding-right: 7rem; /* 右上トグル分の逃げ */
}
.pc_menu_title_wrap{
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
}
.pc_menu_title{
  margin: 0;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  font-weight: 500;
}
.pc_menu_sub{
  margin: 0;
  color: var(--color-blu-light);
  font-size: 1.2rem;
  line-height: 1.2;
}

/* ======================================
PC menu body
====================================== */
.pc_menu_heading{
  position: relative;
  margin: 0 0 2.8rem;
  padding-bottom: 1.4rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 700;
  border-bottom: 1px solid rgba(142, 235, 255, 0.55);
}
.pc_menu_heading::after{
  content: "";
  position: absolute;
  left: 7rem;
  top: 1.2rem;
  width: 3.8rem;
  height: 2px;
  background: var(--color-blu-light);
}
.pc_menu_heading::before{
  content: "";
  position: absolute;
  left: 10.4rem;
  top: 0.72rem;
  width: 0.2rem;
  height: 7px;
  background: var(--color-blu-light);
  transform: rotate(-40deg);
}
.pc_menu_heading a{
  color: #fff;
  text-decoration: none;
}
.pc_menu_links{
  list-style: none;
  margin: 0;
  padding: 0;
}
.pc_menu_links li + li{
  margin-top: 2.6rem;
}
.pc_menu_links a{
  position: relative;
  display: block;
  padding-right: 2.2rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1.5;
}
.pc_menu_links a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0.3rem;
  width: 1rem;
  height: 1rem;
  border-top: 2px solid var(--color-blu-light);
  border-right: 2px solid var(--color-blu-light);
  transform: translateY(-50%) rotate(45deg);
}
.pc_menu_contact{
  margin-top: 5.2rem;
  display: flex;
  justify-content: center;
}
.pc_menu_contact_btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4rem;
  margin: 0 auto;
  width: 17rem;
  border: 2px solid #fff;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 700;
}

/* ======================================
トグル open時
====================================== */
.header_menu_btn.is_open .header_menu_ring{
  transform: rotate(68deg);
}
.header_menu_btn.is_open .ring{
  stroke: #fff;
}
/* 3本線 → × */
.header_menu_lines span{
  transition:
    transform 0.4s ease,
    opacity 0.3s ease,
    width 0.4s ease,
    background 0.4s ease;
  transform-origin: center;
}
.header_menu_btn.is_open .header_menu_lines{
  width: 2.2rem;
}
.header_menu_btn.is_open .header_menu_lines span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.header_menu_btn.is_open .header_menu_lines span:nth-child(2){
  opacity: 0;
}
.header_menu_btn.is_open .header_menu_lines span:nth-child(3){
  width: 100%;
  transform: translateY(-8px) rotate(-45deg);
}
@media screen and (max-width: 1060px){
.header_menu_btn,
.pc_menu_panel_inner{
  display: none;
}
}
/* ======================================
SP menu base
====================================== */
.sp_menu_panel{
  display: none;
}
@media screen and (max-width: 820px){
html.is_menu_open,
body.is_menu_open{
  overflow: hidden;
}
.pc_menu_overlay,
.pc_menu_panel{
  display: none !important;
}
.header_nav nav ul{
  display: none;
}
.header_nav{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  height: 7.8rem;
  padding: 0 2.4rem;
  border-bottom-left-radius: 4rem;
  border-bottom-right-radius: 4rem;
}
.header_logo{
  width: 13rem;
  padding-top: 0;
}
.header_logo img{
  width: 100%;
  height: auto;
  display: block;
}
.header_menu_btn{
  top: 1rem;
  right: 2.4rem;
  display: block;
}
.header_menu_ring{
  transform: rotate(-32deg);
}
.header_menu_lines{
  width: 2.2rem;
  gap: 0.6rem;
}
.header_menu_lines span{
  height: 2px;
  background: #42C4E6;
}
.header_menu_btn:hover .header_menu_ring{
  transform: rotate(-32deg);
}
.header_menu_btn:hover .ring{
  stroke: #42C4E6;
}
.header_menu_btn:hover > .header_menu_lines span:nth-child(3){
  width: 73%;
}
.header_menu_btn .ring{
  stroke: #42C4E6;

}
.header_menu_btn.is_open .ring{
  stroke: #42C4E6;
}
.header_menu_btn.is_open .header_menu_lines span{
  background: #42C4E6;
}
.header_menu_btn.is_open .header_menu_lines span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.header_menu_btn.is_open .header_menu_lines span:nth-child(2){
  opacity: 0;
}
.header_menu_btn.is_open .header_menu_lines span:nth-child(3){
  width: 100%;
  transform: translateY(-8px) rotate(-45deg);
}
/* SP panel */
.sp_menu_panel{
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 90;
}
.sp_menu_panel.is_open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.sp_menu_inner{
  width: 100%;
  height: auto;
  background: #f6f6f6;
  border-bottom-left-radius: 3rem;
  border-bottom-right-radius: 3rem;
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.36);
  padding-top: 7.8rem;
  position: relative;
}
.sp_menu_head{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 7.8rem;
  background: #fff;
  border-bottom-left-radius: 4rem;
  border-bottom-right-radius: 4rem;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.12);
  padding: 0 2.4rem;
  display: flex;
  align-items: center;
}
.sp_menu_logo{
  width: 13rem;
}
.sp_menu_logo img{
  width: 100%;
  height: auto;
  display: block;
}
.sp_menu_body{
  padding: 1rem 2rem 6rem 2rem;
}
.sp_menu_list{
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp_menu_item{
  border-bottom: 1px solid var(--color-navy);
}
li.sp_menu_item.has_sub.is_open button {
 border-bottom: 1px solid var(--color-navy);
 margin-bottom: 1rem;
}
li.sp_menu_item.has_sub.is_open{
  border: none;
}
.sp_menu_item > a,
.sp_menu_toggle{
  width: 100%;
  padding: 1.6rem 0 1rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #2D2C2B;
  text-decoration: none;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: left;
}
.sp_menu_toggle{
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  padding: 1.8rem 0 1rem 0;
}
.sp_menu_mark{
  position: relative;
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
}
.sp_menu_mark::before,
.sp_menu_mark::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 2px;
  background: #0E4B87;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.sp_menu_mark::after{
  transform: translate(-50%, -50%) rotate(90deg);
}
.sp_menu_item.is_open .sp_menu_mark::after{
  opacity: 0;
}
.sp_menu_submenu{
  display: none;
  list-style: none;
  margin: 0;
}
.sp_menu_item.is_open .sp_menu_submenu{
  display: block;
}
.sp_menu_submenu li + li{
  margin-top: 1.6rem;
}
.sp_menu_submenu a{
  position: relative;
  display: block;
  padding-right: 2rem;
  color: var(--color-navy);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1.6;
  padding: 0.4rem 0;
  font-weight: 500;
}
.sp_menu_submenu a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0.2rem;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 2px solid #0E4B87;
  border-right: 2px solid #0E4B87;
  transform: translateY(-50%) rotate(45deg);
}
.sp_menu_contact{
  margin-top: 4.4rem;
  display: flex;
  justify-content: center;
}
.sp_menu_contact_btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem;
  max-width: 41rem;
  background: #0E4B87;
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 700;
}
ul.sp_menu_submenu li:last-child{
  margin-bottom: 1rem;
}
}
/***********************************************
index main
***********************************************/

main{
  width: 100%;
  min-height: 100vh;
  background:  linear-gradient(180deg, rgba(9,134,188,0.8), rgba(128,215,255,1)),
  url("../images/main_bg.jpg") no-repeat;
background-size: cover;
  margin-top: -8rem;
  position: relative;
  overflow: hidden;
}
.main_inner{
  display: flex;
  width: 100%;
  min-height: 100vh;
  padding: 0 2vw;
}
.main_left{
  display: flex;
  align-items: center;
  width: 60%;
  min-height: 100vh;
  position: relative;
  z-index: 2;
  background: url("../images/main_title_bg.svg") no-repeat;
  background-size: 38%;
  background-position: 0% 50%;
}
.main_right{
  width: 60%;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  margin-left: -20%;
}
h1.main_title{
  font-size: clamp(2.8rem, 4vw, 5rem);
  line-height: 1.4;
  color: var(--color-navy);
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 600;
  padding-top:12vh;
}
h1.main_title > div{
  font-family: "Noto Sans JP", sans-serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1.6;
  color: #fff;
  font-weight: 400;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
/*
.mix_blend{
  mix-blend-mode: difference;
}
  */
.ring_wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}
#three-wrap{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#three-wrap canvas{
  display: block;
  width: 100% !important;
  height: 100% !important;
}
@media screen and (max-width: 1000px){
.main_inner{
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main_left{
  width: 100%;
  align-items: flex-end;
  justify-content: end;
  padding-bottom: 18vh;
  background-size: 38%;
  background-position: 48% 80%;
}
.main_right{
  width: 100%;
  margin-top:-100vh;
  margin-left: 0;
}
}
@media screen and (max-width: 600px){
.main_inner{
  padding: 0 1.6rem;
}
h1.main_title{
  font-size: 2.6rem;
}
h1.main_title > div{
  font-size: 1.4rem;
}
.main_left{
  width: 100%;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 18vh;
  background-size: 38%;
  background-position: 0% 80%;
}
.ring_wrapper{
  min-height: 120vh;
  margin-top: -20vh;
}
}
/***********************************************
index main news
***********************************************/
.news_wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 79rem;
  height: 8.4rem;
  padding: 0 3rem 0 4rem;
  background: var(--color-navy);
  color: #fff;
  overflow: visible;
  z-index: 2;
}
.news_wrapper::before{
  content: "";
  position: absolute;
  width: 9.1rem;
  height: 8.4rem;
  background: url("../images/news_bg.png")no-repeat;
  background-size: cover;
  left: -9rem;
}
.news_wrapper .news_header{
  display: flex;
  gap: 1rem;
}
.news_wrapper .date{
  font-size: 1.4rem;
}
.news_wrapper .news_icon{
  font-size: 1.3rem;
  border: 1px  solid #D9D9D9;
  border-radius: 12px;
  display: inline-block;
  padding: 0 1.2rem;
}
p.news_text{
  width: 68%;
}
@media screen and (max-width: 820px){
.news_wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-evenly;
  left: 5.4rem;
  width: 100%;
  max-width: unset;
  height: 10.5rem;
}
.news_wrapper::before{
  content: "";
  position: absolute;
  width: 9.1rem;
  height: 10.5rem;
}
.news_wrapper .date{
  font-size: 1.2rem;
}
.news_wrapper .news_icon{
  font-size: 1.1rem;
}
p.news_text{
  font-size: 1.4rem;
  margin-left: -3rem;
  width: 90%;
}
.news_wrapper .news_header{
  margin-left: -3rem;
}
}
/***********************************************
index about
***********************************************/
.about_area{
  padding: 15rem 0 30rem 0;
  background: url("../images/about_bg.svg") no-repeat;
  background-size: contain;
  background-position: right 25vh;
}
p.about_text{
  font-size: 2.4rem;
  margin-bottom: 6rem;
}
.about_area .img_box{
  width: 100%;
  text-align: right;
  padding: 0 4.6rem;
  margin-top: 3rem;
}
.about_area .img_box img{
  max-width: 97rem;
}
.display_aboutmd{
  display: none;
}
@media screen and (max-width: 767px){
.about_area{
  padding: 10rem 0 10rem 0;
  background-size: 160%;
  background-position: -10vw 5vh;
  background-size: 260%;
}
p.about_text{
  font-size: 1.6rem;
  margin-bottom: 6rem;
  line-height: 3;
}
.about_area .img_box{
  padding: 0;
}
.display_aboutpc{
  display: none;
}
.display_aboutmd{
  display: block;
}
}
/***********************************************
index service
***********************************************/
.service_area{
  width: 100%;
  margin-top: -5rem;
  padding: 15rem 0;
  border-radius: 5rem;
  background:
    linear-gradient(180deg,#46487C 0%,rgba(37,174,236,0.75) 100%),
    url("../images/service_bg.webp");

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
p.service_text{
  font-size: 2.4rem;
  color: #fff;
  text-align: center;
  margin-bottom: 10rem;
}
.service_spec{
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  padding: 0 2rem;
}
.service_spec a{
  text-decoration: none;
}
.service_spec article{
  width: 46%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 40px;
  margin-bottom: 7rem;
  gap: 3rem;
}
.service_spec h3{
  font-size: 2.4rem;
  color: var(--color-navy);
  text-align: center;
}
.service_spec article a{
  display: block;
  color: var(--color-black-second);
  padding: 3rem 4rem;
  border-radius: 40px;
  transition: 0.8s ease;
}
.service_spec .question_ring{
  transition: 0.6s ease;
}
.service_spec article a:hover {
  background: var(--color-navy);
  border-radius: 40px;
}
.service_spec article a:hover h3,
.service_spec article a:hover p{
  color: #fff;
}
.service_spec article a:hover .question_ring{
  transform: rotate(90deg);
}
.service_spec article a:hover img.service_icon_img{
  filter: brightness(0) invert(1);
}
.ring_inner{
  fill: none;
  stroke: url(#ringGrad); /* ← これがポイント */
  stroke-width: 2;
  stroke-linecap: none;
  stroke-dasharray: 125 3 125 3;
  stroke-dashoffset: 8;
  transition: stroke 0.4s ease;
}
.service_icon{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
}
.service_icon img{
  position: absolute;
  width: 10rem;
  height: auto;
  object-fit: contain;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.service_icon .question_ring{
  width: 100%;
  height: 100%;
  max-width: 22.7rem;
  aspect-ratio: 50 / 50;
}
p.service_desc{
  font-size: 2rem;
  text-align: center;
}
@media screen and (max-width: 820px){
.service_area{
  padding: 10rem 0;
}
p.service_text{
  font-size: 1.8rem;
  margin-bottom: 4rem;
}
.service_spec h3{
  font-size: 2rem;
}
p.service_desc{
  font-size: 1.6rem;
}
}
/***********************************************
index recruit
***********************************************/
.recruit_area{
  width: 100%;
  padding: 20rem 0 20rem 0;
  background: url("../images/recruit_bg.svg") no-repeat;
  background-size: 80%;
  background-position: 20vw 20vh;
}
.recruit_photo_wrapper{
  width: 100%;
  padding: 20rem 0 30rem 0;
  margin-top: -10rem;
}
.recruit_photo_wrapper ul{
  width: 100%;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  gap: 3rem;
}
.recruit_photo_wrapper ul li{
  height: 40rem;
  border-radius: 2rem;
  border: 6px solid #fff;
  overflow:hidden
}
.recruit_photo_wrapper ul li img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.recruit_photo_wrapper ul li:first-child{
  width: 37.8%;
  margin-left: -2%;
}
.recruit_photo_wrapper ul li:nth-child(2){
  width: 30.3%;
  margin-top: 6%;
}
.recruit_photo_wrapper ul li:nth-child(3){
  width: 34.8%;
  margin-right: -2%;
}
@media screen and (max-width: 1100px){
.recruit_area{
  padding: 10rem 0 20rem 0;
  background-size: 90%;
  background-position: 20vw 10vh;
}
}
@media screen and (max-width: 820px){
.recruit_area{
  padding: 10rem 0 20rem 0;
  background-size: 90%;
  background-position: 20vw 20vh;
}
}
@media screen and (max-width: 767px){
.recruit_photo_wrapper ul li:first-child{
  width: 100%;
  border-radius: 0;
  border-left: none;
  border-right: none;
  margin-left: unset;
  margin: 0 auto;
}
.recruit_photo_wrapper ul li:nth-child(2),
.recruit_photo_wrapper ul li:nth-child(3){
  display: none;
}
}
@media screen and (max-width: 430px){
.recruit_area{
  background-size: 200%;
  background-position: 20vw 20vh;
  }
}
/***********************************************
index news
***********************************************/
.news_area{
  margin-top: -50rem;
  background: url("../images/news_bg.svg") no-repeat;
  background-position: 55vw 52vh;
  padding: 30rem 0 15rem 0;
}
.news_grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem 4rem;
  padding-bottom: 9rem;
}
.news_card{
  min-width: 0;
}
.news_card > a{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: 0.6s;
}
.news_card > a:hover{
  opacity: 0.78;
}
.news_thumb{
  aspect-ratio: 458 / 258;
  margin-bottom: 2rem;
}
.news_thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 1rem;
}
.news_title{
  font-size: 1.8rem;
  line-height: 1.5;
  font-weight: 700;
  flex-grow: 1;
  margin: 0 0 1.2rem;
}
p.news_date{
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
}
p.news_date span.news_category{
  font-size: 1.2rem;
  color: #000;
  font-weight: 500;
  padding: 0.1rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 1.2rem;
  margin-left: 0;
  background:
  linear-gradient(#fff,#fff) padding-box,
  linear-gradient(90deg,#5FC6FF,#3543FF) border-box;
}
p.news_date span.icon_new{
  font-size: 1.2rem;
  color: #fff;
  font-weight: 500;
  padding: 0.1rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 01.2rem;
  margin-left: 0;
  background:#ef9713;
}
@media screen and (max-width: 1100px){
.news_area{
  background-position: 40vw 30vh;
  padding: 20rem 0;
}
}
@media screen and (max-width: 1000px){
  .news_grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 2.4rem;
  }
}
@media screen and (max-width: 820px){
.news_area{
    background-size: 130%;
    background-position: -10vw 30vh;
    padding: 15rem 0 12rem 0;
}
.news_title{
  font-size: 1.6rem;
}
p.news_date{
  font-size: 1rem;
}
p.news_date span{
  font-size: 1.1rem;
}
}
@media screen and (max-width: 430px){
.news_area{
  background-size: 180%;
  background-position: -50vw 34vh;
   padding: 15rem 0 15rem 0;
}
.news_grid {
  grid-template-columns: repeat(1, 1fr);
}
}
/***********************************************
index contact
***********************************************/
.contact_area{
  width: 100%;
  padding: 12rem 0 28rem 0;
  background:
    linear-gradient(180deg,#46487C 0%,rgba(37,174,236,0.75) 100%),
    url("../images/contact_bg.webp")no-repeat;
  background-size: contain;
  background-position: right;
}
.contact_margin_adj{
  margin-bottom: 5rem!important;
}
.contact_area .inner{
 
}
p.contact_lead{
  font-size: 2.4rem;
  color: #fff;
  margin-bottom: 3rem;
}
@media screen and (max-width: 820px){
.contact_area{
  padding: 12rem 0 12rem 0;
 }
p.contact_lead{
  font-size: 2rem;
}
.contact_box{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
}
/***********************************************
footer
***********************************************/
footer{
  padding: 6.8rem 4rem 1rem 4rem;
}
.footer_logo{
  width: 17.8rem;
}
ul.footer_menu{
  font-size: 1.8rem;
  display: flex;
  gap: 6rem;
  margin: 3.4rem 0;
}
ul.footer_menu li{
  position: relative;
  transition: 0.6s ease;
}
ul.footer_links li {
    transition: 0.6s ease;
}
ul.footer_menu li a,
ul.footer_links li a{
  text-decoration: none;
  color: #000;
}
ul.footer_menu li:hover,
ul.footer_links li:hover {
  opacity: 0.6;
}
ul.footer_menu li::after{
  position: absolute;
  content: "";
  right: -3rem;
  font-size: 35.6rem;
  background: #E3E3E3;
  rotate: 24deg;
  top: 0rem;
  width: 0.1rem;
  height: 3.8rem;
}
ul.footer_links{
  font-size: 1.6rem;
  width: 64rem;
  margin-bottom: 6.8rem;
}
ul.footer_links li{
  margin-right: 1.6rem;
  display: inline;
}
p.footer_cpoy{
  font-size: 1.2rem;
}
@media screen and (max-width: 767px){
footer{
   padding: 4.8rem 1.5rem 1.5rem;
}
ul.footer_menu{
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: unset;
  margin: 2.4rem 0;
}
ul.footer_menu li{
  padding: 1rem 0;
  border-bottom: 1px solid #D9D9D9;
}
ul.footer_menu li::after{
    display: none;
}
ul.footer_links{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 3rem;
}
ul.footer_links li{
  margin-right: 0;
  display: inline;
}
p.footer_cpoy{
  font-size: 1rem;
}
}