@charset "UTF-8";

/*
　202605-
　2e特集ページ用CSS：feature.css
 ・共通ヘッダー／フッターでは 1000px以上以下で切り替えなので注意
 ・特集記事単体では768px以上以下も指定
 ・特殊記事の汎用的な指定をここに記述
 ・root指定でコーポレートカラーなど用意しているが運用は別途検討
*/

@media screen and (max-width: 999px) {}
@media screen and (min-width: 1000px) {}
@media screen and (max-width: 768px) {
  .is_sp-only{
    display: inline-block;
    visibility: visible;
  }
}
@media screen and (min-width: 768.1px) {
  .is_sp-only{
    display: none;
    visibility: hidden;
  }
}

:root{
  /* color */
  --text-base: #000;
  /* corporate-color */
  --corporate-key-color: #006EBC;
  --corporate-sub-color: #5BB8FF;
  --corporate-light-color: #DBEAFE;
  --corporate-dark-color: #2D5884;
  --corporate-middle-color: #C1E0FE;
  --corporate-accent-color: #D96623;

}

/*__ main __*/
.feature_main{
  margin-top: 60px;
}
@media screen and (max-width: 768px) {
  .feature_main{
    margin-top: 50px;
  }
}

/*__ common __*/
.feature_section{
  margin: 0 auto;
  padding: 0;
}
.feature_container{
  padding: 90px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .feature_container{
    padding: 40px 20px;
  }
}

/* 英字表記 shoulder title */
.article_subtitle{
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.article_subtitle::before{
  content: "";
  width: 24px;
  height: 4px;
  background-color: var(--corporate-accent-color);
}

/* セクションタイトル */
.article_title{
  font-size: 48px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -2px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .article_title{
    font-size: 32px;
  }
}

/* CTA button */
.feature_button_link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  min-width: 320px;
  background: var(--corporate-key-color);
  border: solid 1px var(--corporate-key-color);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: all .5s;
  position: relative;
  z-index: 1;
}
.feature_button_link::after{
  content:"";
  position: absolute;
  right: 10px;
  width: 20px;
  height: 20px;
  border: solid 1px #fff;
}
.feature_button_link::before{
  content:"";
  position: absolute;
  width: 22.08px;
  height: 20px;
  right: 8px;
  mask-image: url(../img/arrow-right-line.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: 0 0;
  background: #fff;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .feature_button_link{
    font-size: 14px;
  }
}

.feature_button_link:hover{
  background-color: var(--corporate-light-color);
  color: var(--corporate-key-color);
}
.feature_button_link:hover::before{
  background-color: var(--corporate-key-color);
}

.feature_button_link.is_skeleton_button{
  border-color: #fff;
  background-color: rgba( 255,255,255, 0.2);
}
.feature_button_link.is_skeleton_button:hover{
  color: #fff;
  background-color: rgba( 255,255,255, 0.5);
}
.feature_button_link.is_skeleton_button::after{
  display: none;
}
.feature_button_link.is_skeleton_button::before{
  transform: rotate(90deg);
  width: 26.08px;
  height: 24px;
}
.feature_button_link.is_skeleton_button:hover::before{
  background-color: #fff;
}

.feature_button_link.is_right_button{
  background: var(--corporate-sub-color);
  border-color: var(--corporate-sub-color);
}
.feature_button_link.is_right_button:hover{
  background: #fff;
}

.feature_button_block.is_center{
  display: block;
  text-align: center;
}

/*
============================================================*/
/* Effect */
section[data-bg-type]{
  position: relative;
  z-index: 1;
}
section[data-bg-type]::before{
  content: "";
  position: absolute;
  z-index: -1;
  width: min( 600px,40vw );
  height: min( 600px,40vw );
  background: var(--corporate-middle-color);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: 0 0;
}

section[data-bg-type="left"]::before{
  mask-image: url(../img/rctangle_left.svg);
  top: 0;
  left: 0;
  background: #F1F7FF;
}
section[data-bg-type="right"]::before{
  mask-image: url(../img/rectangle_right.svg);
  right: 0;
  bottom: 0;
}

/*
============================================================*/
/*__ header __*/



/*
============================================================*/
/*__ Hero __*/
.feature_hero{
  position: relative;
  padding: 20px 0;
  min-height: 700px;
}
.hero_container{
  width: 88vw;
  display: flex;
  align-items: center;
}
.hero_figure{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--corporate-key-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  z-index: -1;
}
.hero_figure img{
  object-fit: cover;
  object-position: 50% 5%;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .feature_hero{
    min-height: 400px;
    gap: 0;
  }
  .hero_container{
    width: 100%;
    padding: 20px;
  }
  .hero_figure img{
    object-position: 0 0;
  }
}

/* テキスト */
.article_hero{
  display: flex;
  flex-direction: column;
  gap: 20px;
  /*padding-top: min( 80px, 2.5vw );*/
}
.hero_title{
  font-size: 96px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -3px;
  color: #fff;
}
.hero_title b{
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.hero_title b span{
  color: var(--corporate-sub-color);
}
.hero_title img{
  max-height: 71px;
  display: block;
  margin-bottom: 20px;
}
.article_lead_text{
  font-size: 20px;
  line-height: 1.45;
  font-weight: 600;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .article_hero{
    padding-top: 0;
    position: relative;
    width: 100%;
  }
  .hero_title{
    font-size: 48px;
  }
  .hero_title img{
    max-height: 40px;
    position: absolute;
    right: 20px;
  }
  .article_lead_text{
    font-size: 16px;
  }
}

/*
============================================================*/
/*__ About __*/
.feature_about{
  background-color: #fff;
}
.about_container{
  display: flex;
  gap: 40px;
}
.about_figure{
  max-width: 40vw;
}
@media screen and (max-width: 768px) {
  .about_container{
    flex-direction: column;
    gap: 20px;
  }
  .about_figure{
    max-width: 100%;
  }
}

.about_lists{
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  border: solid 1px #ccc;
}
.about_item{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  width: calc( 100% - 2px / 3 );
}
.about_item+.about_item{
  border-left: solid 1px #ccc;
}
@media screen and (max-width: 768px) {
  .about_lists{
    flex-direction: column;
  }
  .about_item{
    width: 100%;
    padding: 12px 10px;
  }
  .about_item+.about_item{
    border-top: solid 1px #ccc;
    border-left: none;
  }
}

.about_item h3{
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
}
.about_item p{
  font-size: 14px;
  line-height: 1.3;
}

/*
============================================================*/
/*__ Why Join Us __*/
.feature_reason{
  background-color: var(--corporate-light-color);
}
/**/
.article_title .is_emphasis{
  font-size: 60px;
  color: var(--corporate-dark-color);
}
@media screen and (max-width: 768px) {
  .article_title .is_emphasis{
    font-size: 40px;
  }
}

.reason_item_list{
  display: flex;
  justify-content: space-around;
  gap: 1px;
}
.reason_item{
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--corporate-dark-color);
  color: #fff;
  padding: 40px;
  position: relative;
  z-index: 1;
}
.reason_item{
  width: calc( 100% / 3 );
}
@media screen and (max-width: 768px) {
  .reason_item_list{
    flex-direction: column;
  }
  .reason_item{
    padding: 24px;
    gap: 4px;
  }
  .reason_item{
    width: 100%;
  }
}
.reason_item::before{
  content: "";
  position: absolute;
  z-index: -1;
  width: 142px;
  height: 142px;
  background: #000;
  mask-image: url(../img/rctangle_left.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: 0 0;
  left: 0;
  top: 0;
}

/* テキスト */
.reason_title{
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reson_numb{
  display: block;
  font-size: 72px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -3px;
}
.reason_title strong{
  font-size: 20px;
  font-weight: 700;
}
.reson_text{
  font-size: 14px;
  line-height: 1.65;
  font-weight: 400;
  flex-grow: 2;
}
.reason_tag{
  display: flex;
  justify-content: center;
  padding: 10px 2px;
  background-color: var(--corporate-sub-color);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}

@media screen and (max-width: 768px) {
  .reason_title{
    flex-direction: row;
  }
  .reson_numb{
    font-size: 48px;
  }
  .reason_title strong{
    font-size: 18px;
  }
  .reson_text br{
    display: none;
    visibility: hidden;
  }
  .reason_tag{
    font-size: 16px;
  }
}

/*
============================================================*/
/*__ Jobs __*/
.feature_jobs{
  background-color: #fff;
}

@media screen and (min-width: 768.1px) {
  .article_header.has-summary-text{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .article_summary{
    align-items: flex-end;
    align-self: flex-end;
    padding-bottom: 20px;
    text-align: right;
  }
}

.feature_job_list{
  display: flex;
  gap: 20px;
  margin-bottom: 30px ;
}
@media screen and (max-width: 768px) {
  .feature_job_list{
    flex-direction: column;
    margin-top: 30px ;
  }
}


.feature_job_item{
  border: 1px solid #CCC;
  background: #F4F7FB;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
.feature_job_link{
  margin: 0;
}
.job_item_photo{
  position: relative;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 2 / 1
}
@media screen and (max-width: 768px) {
  .job_item_photo{
    height: auto;
  }
}
.catch_tag{
  position: absolute;
  top: 20px;
  left: 0;
  background: var(--corporate-accent-color);
  color: #fff;
  padding: 5px 12px;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
}
.job_item_photo img{
  object-fit: contain;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
}
.job_item_inner{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  gap: 8px;
}
.job_tags{
  display: flex;
  flex-direction: column;
  padding-top: 10px;
  border-top: solid 2px var(--corporate-light-color);
}
.job_tags .is_income{
  font-size: 16px;
  font-weight: 700;
}
.job_tags .is_address{
  font-size: 14px;
  font-weight: 400;
  display: flex;
  align-self: baseline;
  gap: 4px;

}
.job_tags .is_address::before{
  content: url(../img/mappin.svg);
}
.job_item_title{
  font-size: 14px;
  font-weight: 400;
}
.job_item_subtitle{
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  flex-grow: 2;
}
.feature_job_link:hover{
  opacity: 0.8;
}

/*
============================================================*/
/*__ Voice __*/
.feature_voice{
  background-color: var(--corporate-light-color);
}
.voice_item{
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
.voice_figure{
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  align-items: stretch;
  width: 40%;
}
.voice_figure img{
  object-fit: contain;
  object-position: 50% 50%;
  width: 100%;
  height: 100%;
}
.voice_detail{
  justify-content: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  background: #F4F7FB;
  padding: 20px 48px;
  width: 60%;
}

@media screen and (max-width: 768px) {
  .voice_item{
    flex-direction: column;
  }
  .voice_figure{
    width: 100%;
  }
  .voice_detail{
    width: 100%;
    padding: 20px;
  }
}

.voice_comments{
  position: relative;
  background: url(../img/quote.svg) no-repeat;
  padding-top: 60px;

  font-size: 28px;
  line-height: 1.6;
  font-weight: 600;
}
.voice_interviewee{
  font-size: 14px;
  line-height: 1.2;
  font-weight: 400;
  display: block;
  padding-left: 20px;
  border-left: solid 4px var(--corporate-sub-color);
}
@media screen and (max-width: 768px) {
  .voice_comments{
    padding-top: 30px;
    background-size: 30px auto;
    font-size: 18px;
    margin-bottom: 20px;

  }
  .voice_interviewee{
    padding-left: 10px;
  }
}


/*
============================================================*/
/*__ Company __*/
.feature_company{
  background-color: #fff;
}
.company_header{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}
.company_logo img{
  max-height: 150px;
}
.company_logo + p{
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .company_header{
    flex-direction: column;
    gap: 10px;
  }
  .company_logo img{
    max-height: 90px;
  }
  .company_logo + p{
    font-size: 16px;
  }
  .company_logo + p br{
    display: none;
    visibility: hidden;
  }
}

.article_body.has_iframe{
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.has_iframe iframe{
  aspect-ratio: 16/9;
}

/*
============================================================*/
/*__ Entry __*/
.feature_entry{
  color: #fff;
  position: relative;
  border-top: solid 10px var(--corporate-sub-color);
  padding-bottom: 60px;
}
.feature_entry::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--corporate-key-color);
  opacity: 0.6;
  z-index: -1;
}
.entry_figure{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -2;
}
.entry_figure img{
  object-fit: cover;
  object-position: 5% 0;
  width: 100%;
  height: 100%;
  filter: grayscale(90%) brightness(50%);
}

.feature_entry .feature_article{
  display: flex;
  justify-content: space-between;
}
.feature_entry .article_title{
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.feature_entry .article_title .is_emphasis{
  color: var(--corporate-sub-color);
  font-size: 48px;
}
.feature_entry .feature_article .feature_button_block{
  align-self: flex-end;
}
.article_entry_h3{
  font-size: 28px;
  line-height: 1.1;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 768px) {
  .feature_entry .feature_article{
    flex-direction: column;
    gap: 30px;
  }
  .feature_entry .article_title{
    font-size: 48px;
  }
  .feature_entry .article_title .is_emphasis{
    display: block;
  }
  .article_entry_h3{
    font-size: 18px;
  }
  .feature_entry .feature_article .feature_button_block{
    align-self: start;
  }
}