@charset "UTF-8";

header {
  background-image: linear-gradient(360deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 57%);
}

header .head_top a#menu_btn span {
  background-color: #fff;
}
header.fixed .head_top a#menu_btn span {
  background-color: #013268;
}


/* -------------------------------------
mainimg
------------------------------------- */
#mainimg {
  text-align: center;
  position: relative;
  margin-bottom: 0;
  overflow-x:clip;
  z-index:1;
}
#mainimg .mvblk img {
  min-height:300px;
}
#mainimg .mvtxt {
  width:min(399px,27.7vw);
  min-width:210px;
  position:absolute;
  left:6.25vw;
  bottom:4.86vw;
  z-index:1;
}


/* -------------------------------------
共通
------------------------------------- */

.morebtn {
  font-size:17px;
  line-height:1;
  width:100%;
  max-width:290px;
  padding:20px 30px;
  border-radius:30px;
  background-image: linear-gradient(0deg, rgba(232, 222, 185, 1) 57%, rgba(209, 189, 116, 1));
}
.morebtn span {
  text-align:center;
  display:block;
  padding-left:1em;
  position:relative;
}
.morebtn span::before {
  content:"";
  display:block;
  width:4.2px;
  height:4.2px;
  border-radius:50%;
  background-color:#040000;
  position:absolute;
  top:50%;
  left:0;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);  
}


/* -------------------------------------
content_info
------------------------------------- */
#content_info {
  padding:max(74px,5.13vw) 0 max(130px,9vw) 0;
  background-color:#fff;
  position:relative;
  z-index:0;
}
#content_info:before {
  content:"";
  display:block;
  width:100vw;
  height:70vw;
  background:url(../imgs/index/content_info-bg.png) center top no-repeat;
  background-size:cover;
  position:absolute;
  top:-3vw;
  left:50%;
  transform:translateX(-50%);
  z-index:-1;
}
.content_info_wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:max(65px,4.5vw);
}
#content_info .secttl {
  width:38%;
  max-width:452px;
  min-width:180px;
}
#content_info nav {
  width:100%;
}
.content_list {
  font-size:23px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: initial;
  display:flex;
  flex-direction:column;
  justify-content: center;
  gap:3.6vw;
  width:100%;
  margin:0 auto;
}


/* -------------------------------------
about
------------------------------------- */
#about {
  padding:max(200px,13.88vw) 0;
}
.about_wrap {
  display:flex;
  justify-content:space-between;
  gap:30px;
  position:relative;
  z-index:1;
}
.about_wrap .txtbk {
  max-width:400px;
}
.about_ttl {
  font-size:26px;
  font-weight:700;
  margin-bottom:37px;
}
.about_txt_wrap {
  margin-bottom:30px;
}
.about_txt {
  line-height:2.92;
  margin-bottom:35px;
}
.about_wrap .imgbk {
  width:49.5%;
  max-width:594px;
  position:relative;
  z-index:1;
}
.about_icon {
  position:absolute;
  z-index:-1;
}
.about_icon.icon1 {
  width:74.3%;
  max-width:441px;
  bottom: 97%;
  right: 59%;
}
.about_icon.icon2 {
  width:125%;
  max-width:728px;
  top:98%;
  left:5%;
}


/* -------------------------------------
interview
------------------------------------- */
#interview {
  padding: max(140px, 9.72vw) 0;
}
.sec_ttlbk {
  display:flex;
  align-items:flex-end;
  gap:30px;
  margin-bottom:18px;
}
.interview_ttl {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-feature-settings: initial;
  line-height:1;
  letter-spacing:0.32em;
  padding:15px;
  border:1px solid  #cbcccc;
}
.ttl_right {
  max-width:560px;
}
.interview_ttl_en {
  font-size:48px;
  line-height:1;
  margin-bottom:20px;
}
.readt_txt {
  font-size:13px;
  line-height:2.34;
}
.interview_list {
  display:flex;
}
.interview_item {
  width:calc(100% / 3);
}
.interview_item a {
  position:relative;
  z-index:1;
}
.interview_item a:after {
  content:"";
  display:block;
  width:100%;
  height:100%;
  background-color:rgba(4,0,0,0.4);
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  transition:all 0.3s;
}
.interview_item:hover a:after {
  opacity:0;
}
.interview_name {
  color:#fff;
  font-size:18px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}


/* -------------------------------------
recruitment
------------------------------------- */
#recruitment {

}
.recruitment_wrap {
  display:flex;
}
.recruitment_wrap >* {
  width:calc(100% / 3);
}
.recruitment_wrap .imgbk {
}
.recruitment_wrap .imgbk.img_lf {
  order: 1;
}
.recruitment_wrap .imgbk.img_rg {
  order: 3;
}
.recruitment_wrap .rec_ttlbk {
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:30px;
  background-color:#555c61;
  padding:20px;
  order: 2;
}
.recruitment_ttl {
  text-align:center;
  line-height:1.2;
}
.recruitment_ttl .ja {
  font-size:26px;
  display:block;
  margin-bottom:15px;
}
.recruitment_ttl .en {
}
.rec_ttlbk .readt_txt {
  font-size:13px;
  line-height:2.24;
  max-width:280px;
}
.rec_ttlbk .morebtn {
  max-width:245px;
}



/* -------------------------------------
meigiren
------------------------------------- */
#meigiren {
  padding-bottom: max(162px, 11.25vw);
}
.meigire_wrap {
  display:flex;
  justify-content:space-between;
}
.meigire_wrap .txtbk {
  width:50%;
  max-width:293px;
  display:flex;
  flex-direction:column;
  gap:min(70px,4.86vw);
}
.meigiren_ttl {

}
.meigiren_ttl .ja {
  font-size:22px;
  display:block;
}
.meigiren_ttl .en {

}
.meigire_wrap .txtbk .mid_txt {
  font-size:28px;
}
.meigire_wrap .txtbk .meigiren_txt {
  font-size:13px;
  line-height:3.58;
}
.meigire_wrap .imgbk {
  width:calc(100% - 293px);
  max-width:740px;
  position:relative;
  z-index:1;
}
.meigire_wrap .imgbk .meigiren_icon {
  position:absolute;
  width:89.4%;
  max-width:662px;
  top: 67%;
  left: 16%;
  z-index:1;
}



@media screen and (max-width: 1440px) {
/* -------------------------------------

------------------------------------- */


}


@media screen and (max-width: 1260px) {


}

@media screen and (max-width: 1050px) {


}

@media screen and (max-width: 980px) {
/* -------------------------------------
about
------------------------------------- */
#about {
  padding:min(200px,20.4vw) 0;
}
.about_txt {
  line-height:2.4;

}

/* -------------------------------------
interview
------------------------------------- */
#interview {
    padding: min(140px, 18.2vw) 0;
}


/* -------------------------------------
meigiren
------------------------------------- */
#meigiren {
  padding-bottom: min(162px,16.53vw);
}
.meigire_wrap .txtbk .mid_txt {
  font-size:clamp(22px,2.85vw,28px);
}

}

@media screen and (max-width: 920px) {
}

@media screen and (max-width: 880px) {




}

@media screen and (max-width: 820px) {




}

@media screen and (max-width: 768px) {
.content_list {
    font-size: clamp(18px,3vw,23px);
}

/* -------------------------------------
about
------------------------------------- */
.about_ttl {
    font-size: clamp(20px,3.38vw,26px);
}

/* -------------------------------------
interview
------------------------------------- */
.interview_ttl_en {
    font-size: clamp(30px,6.25vw,48px);
}


.recruitment_wrap .imgbk {
  width:calc((100% - 250px)/2);
}
.recruitment_wrap .rec_ttlbk {
    width: 250px;
}



}

@media screen and (max-width: 700px) {
}

@media screen and (max-width: 640px) {
/* -------------------------------------
about
------------------------------------- */
.about_wrap {
  flex-direction:column-reverse;
}
.about_wrap .txtbk {
  width:100%;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.about_wrap .imgbk {
  margin:0 auto;
  width:70%;
  max-width:300px;
}
.about_wrap .morebtn {
  margin:0 auto;
}


/* -------------------------------------
interview
------------------------------------- */
.recruitment_wrap {
  flex-wrap:wrap;
}
.recruitment_wrap .imgbk {
  width:50%;
  order:initial;
}
.recruitment_wrap .rec_ttlbk {
    width: 100%;
  order:initial;
  padding-top:35px;
}

/* -------------------------------------
meigiren
------------------------------------- */
.meigire_wrap {
  flex-direction:column-reverse;
  gap:30px;
}
.meigire_wrap .imgbk {
    width: 100%;
}
.meigire_wrap .txtbk {
  text-align:center;
    width: 100%;
    margin:0 auto;
    position:relative;
    z-index:2;
}


}

@media screen and (max-width: 600px) {


}

@media screen and (max-width: 500px) {
/* -------------------------------------
interview
------------------------------------- */
.interview_list {
    display: block;
}
.interview_item {
    width: 100%;
}


}

@media screen and (max-width: 400px) {



}
@media screen and (max-width: 360px) {


}

@media screen and (max-width: 320px) {

}

@media screen and (min-width: 769px) {
 
}