/**********************************************************************/
/* 冒頭文
/**********************************************************************/

section.outline .wrapper{
  padding: 4vw 4vw 6vw 4vw;
  max-width: 770px;
  margin-inline: auto;
}
section.outline .wrapper .bodying p + p{
  margin-top: 1.5em;
}
section.outline .wrapper .bodying .annotation{
  margin-top: 2em;
}
@media screen and (max-width: 1500px){
  section.outline .wrapper{
    max-width: 45vw;
  }
}
@media screen and (max-width: 960px){
  section.outline .inner{
    padding-left: 15em;
    padding-right: 4vw;
    min-height: 25em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  section.outline .wrapper{
      max-width: none;
  }
}
@media screen and (max-width: 520px){
  section.outline .inner{
    padding-left: 4vw;
    padding-right: 4vw;
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
  }
  section.outline .wrapper .heading .title{
    font-size: 8vw;
    margin-bottom: .5em;
  }
  section.outline .wrapper .bodying{
    padding-block: 1em 2em;
  }
}

/**********************************************************************/
/* インタビューナビ
/**********************************************************************/

section.interview .heading{
  background-color: #fff;
  box-shadow: 0 0 5em rgba(0,0,0,.04);
}
section.interview .heading .title{
  margin-bottom: 2em;
}
section.interview .heading nav{
  padding-bottom: 2em;
}
section.interview .heading nav ul{
  gap: 3vw;
}
section.interview .heading nav .item{
  gap: 1em;
}
section.interview .heading nav .item .label{
  gap: 1em;
  padding-block: 1em;
  border-bottom: 1px solid var(--c_border);
  min-width: 12em;
}
@media screen and (max-width: 960px){
  section.interview .heading nav .item .icon{
    width: 6em;
  }
}
@media screen and (max-width: 690px){
  section.interview .heading nav .item .icon{
    width: 5em;
  }
}
@media screen and (max-width: 520px){
  section.interview .heading{
    padding-bottom: 3em;
  }
  section.interview .heading .title{
    margin-bottom: 1.5em;
  }
  section.interview .heading nav ul{
    gap: 3vw 2%;
    align-items: stretch;
  }
  section.interview .heading nav ul li{
    box-sizing: border-box;
    width: 31.333%;
  }
  section.interview .heading nav ul li a{
    display: block;
    height: 100%;
    box-sizing: border-box;
  }
  section.interview .heading nav .item{
    flex-direction: column;
    padding: 3vw 2vw;
    height: 100%;
    box-sizing: border-box;
    gap: 0;
    border-bottom: 1px solid var(--c_border);
    padding-bottom: 1em;
  }
  section.interview .heading nav .item .icon{
    order: 2;
  }
  section.interview .heading nav .item .label{
    display: contents;
  }
  section.interview .heading nav .item .number{
    order: 1;
  }
  section.interview .heading nav .item .who{
    order: 3;
    text-align: center;
    margin-top: .75m;
  }
}

/**********************************************************************/
/* インタビュー部分
/**********************************************************************/

section.interview .bodying{
  padding-block: 1.5vw;
}
section.interview .bodying article{
  padding: 1.5vw 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto auto;
  grid-template-areas: 
  "numbering schedule"
  "info schedule"
  "image schedule"
  "questionnaire questionnaire";
}
section.interview .bodying article .numbering{
  grid-area: numbering;
}
section.interview .bodying article .info{
  grid-area: info;
}
section.interview .bodying article .image{
  grid-area: image;
}
section.interview .bodying article .schedule{
  grid-area: schedule;
  align-content: end;
}
section.interview .bodying article .questionnaire{
  grid-area: questionnaire;
}
@media screen and (max-width: 960px){
  section.interview .bodying article{
    padding: 1.5vw 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: 
    "numbering"
    "info"
    "image"
    "schedule"
    "questionnaire";
  }
}
@media screen and (max-width: 520px){
  section.interview .bodying{
    padding-block: 3em;
  }
}

/**********************************************************************/
/* インタビュー部分　ナンバリング
/**********************************************************************/

@media screen and (max-width: 520px){
  section.interview .bodying article .numbering{
    text-align: center;
    font-size: 10vw;
    line-height: 1.5;
  }
}

/**********************************************************************/
/* インタビュー部分　情報
/**********************************************************************/

section.interview .bodying article .info{
  gap: 1em;
  padding: 1em 0 2em 0;
}
section.interview .bodying article .info .tag{
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
}
section.interview .bodying article .info .tag .key{
  background-color: #E9E9E0;
  border-radius: 10em;
  padding: 0 .5em;
  min-width: 110px;
  font-size: 90%;
}
section.interview .bodying article .info .tag .value{
  padding-block: .35em;
}
@media screen and (max-width: 520px){
  section.interview .bodying article .info{
    gap: .5em;
    justify-content: center;
    padding-bottom: 1em;
  }
  section.interview .bodying article .info .tag .key{
    font-size: 3.5vw;
    min-width: 6em;
  }
  section.interview .bodying article .info .tag .value{
    font-size: 3.5vw;
  }
}

/**********************************************************************/
/* インタビュー部分　写真
/**********************************************************************/

section.interview .bodying article .image{
  
}
@media screen and (max-width: 960px){
  section.interview .bodying article .image img{
    width: 100%;
  }
}

/**********************************************************************/
/* インタビュー部分　スケジュール
/**********************************************************************/

section.interview .bodying article .schedule{
  padding-inline: 5.75em 0;
}
section.interview .bodying article .schedule .index{
  margin-bottom: 1em;
}
section.interview .bodying article .schedule .index .label{
  display: inline-block;
  border-radius: 10em;
  background-color: #262A19;
  color: #fff;
  padding: 0 1em .1em 1em;
  min-width: 8em;
  text-align: center;
}
section.interview .bodying article .schedule .list{
  --l_scline: -2em;

  position: relative;
}
section.interview .bodying article .schedule .list::before{
  content: "";
  display: block;

  position: absolute;
  left: var(--l_scline);
  top: 50%;
  transform: translate(0, -50%);
  width: 0;
  height: calc(100% - 4em);
  border-right: 1px dotted #D6D6D6;
}
section.interview .bodying article .schedule .list li{
  align-items: start;
  padding: .8em 0;
  gap: 1.25em;
  position: relative;
}
section.interview .bodying article .schedule .list li:last-of-type{
  padding-bottom: 0;
}
section.interview .bodying article .schedule .list li::before{
  content: "";
  display: flex;
  align-self: center;
  width: 5px;
  height: 5px;
  background-color: #979797;
  border-radius: 50%;
  position: absolute;
  left: calc(var(--l_scline, -1em) - 2px);
}
section.interview .bodying article .schedule .list .time{
  display: inline-block;
  border-radius: 10em;
  background-color: #F3F3F3;
  color: #518CA2;
  padding: 0 .5em .1em .5em;
  min-width: 3.2em;
  text-align: center;
  font-weight: bolder;
}
section.interview .bodying article .schedule .list .do{
  line-height: 1.25;
}
section.interview .bodying article .schedule .list .time.t1{
  color: #518CA2;
}
section.interview .bodying article .schedule .list .time.t2{
  color: #A28551;
}
section.interview .bodying article .schedule .list .time.t3{
  color: #736AA5;
}
@media screen and (max-width: 960px){
  section.interview .bodying article .schedule{
    padding-inline: 0 0;
    padding-block: 2.5em 1.5em;
  }
}
@media screen and (max-width: 520px){
  section.interview .bodying article .schedule .index{
    padding-bottom: 1em;
    border-bottom: 1px solid var(--c_border);
  }
  section.interview .bodying article .schedule .list li{
    border-bottom: 1px dotted var(--c_border);
    gap: 1em;
    padding: 1em 0;
  }
  section.interview .bodying article .schedule .list li:last-of-type{
    padding-bottom: 1em;
  }
}

/**********************************************************************/
/* インタビュー部分　本文
/**********************************************************************/

section.interview .bodying article .questionnaire{
  padding: 2vw 0 0 0;
}
section.interview .bodying article .questionnaire .block{
  --p_gap: 3vw;

  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
  "serial title"
  "blank answear";
  margin-bottom: 2em;
}
section.interview .bodying article .questionnaire .block .serial{
  grid-area: serial;
  padding: .5em 0;
  border-bottom: 1px solid var(--c_border);
}
section.interview .bodying article .questionnaire .block .title{
  grid-area: title;
  align-content: center;
  padding: .5em 0;
  padding-left: var(--p_gap);
  border-bottom: 1px solid var(--c_border);
}
section.interview .bodying article .questionnaire .block .answear{
  grid-area: answear;
  padding: 1em 0;
  padding-left: var(--p_gap);
}
section.interview .bodying article .questionnaire .block .answear strong{
  font-weight: inherit;
  color: #73781D;
  font-weight: 500;
}
@media screen and (max-width: 520px){
  section.interview .bodying article .questionnaire .block{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
    "serial"
    "title"
    "answear";
    margin-bottom: 1.5em;
  }
  section.interview .bodying article .questionnaire .block:nth-last-of-type(1){
    margin-bottom: 0;
  }
  section.interview .bodying article .questionnaire .block .serial{
    display: flex;
    gap: .5em;
    align-items: center;
    border-bottom: 0;
    padding-bottom: 0;
  }
  section.interview .bodying article .questionnaire .block .title{
    padding-left: 0;
  }
  section.interview .bodying article .questionnaire .block .answear{
    padding: .75em 0;
  }
}

/**********************************************************************/
/* ギャラリー
/**********************************************************************/

section.gallery{
  padding: 4vw 0;
}
section.gallery .bg{
  position: relative;
}
section.gallery .bg .logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-height: 47%;
  aspect-ratio: 320 / 289;
}
section.gallery .bg .cover{
  width: 100%;
  aspect-ratio: 1920 / 640;
}
section.gallery .heading{
  padding: 4em 0 2em 0;
}
section.gallery .bodying{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.75em;
  padding: 0 2em;
}
section.gallery .bodying .item .info{
  margin-top: 1em;
}
section.gallery .bodying .item .info .name{
  font-size: 112.5%;
  padding: .5em;
  min-width: 8em;
  border-right: 1px solid var(--c_border);
}
section.gallery .bodying .item .info .text{
  padding: .5em 1.5em;
  line-height: 1.25;
}
@media screen and (max-width: 1120px){
  section.gallery .bg .cover{
    width: 100%;
    aspect-ratio: 20 / 10;
  }
}
@media screen and (max-width: 960px){
  section.gallery .bodying{
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.75em;
    padding: 0 2em;
  }
  section.gallery .bodying .item .image img{
    width: 100%;
  }
}
@media screen and (max-width: 520px){
  section.gallery .bg .logo{
    max-width: 30vw;
    aspect-ratio: auto;
    max-height: none;
    width: 30vw !important;
  }
  section.gallery .bg .logo img{
    max-width: 100%;
    width: 35vw !important;
  }
  section.gallery .heading{
    padding: 2em 0 1em 0;
  }
  section.gallery .bodying{
    padding: 0 4vw;
    gap: 1.5em;
  }
  section.gallery .bodying .item .info{
    flex-direction: column;
    align-items: stretch;
    margin-top: .5em;
  }
  section.gallery .bodying .item .info .name{
    text-align: left;
    padding: 0;
    border-right: 0;
  }
  section.gallery .bodying .item .info .text{
    padding-left: 0;
    padding-top: 0;
  }
}

/**********************************************************************/
/* お問い合わせ
/**********************************************************************/

section.inquiry .banner{
	color: #fff;
  background-color: #6C8031;
  background-image: url("../img/recruit/contact_bg.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
section.inquiry .banner .leading{
	padding: 2vw 2vw 3vw 2vw;
	box-sizing: content-box;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  grid-template-areas: 
  "title description"
  "title link";
}
section.inquiry .banner .leading .title{
  grid-area: title;
  padding-right: 3em;
  margin-right: 4em;
  border-right: 1px solid rgba(255,255,255,.2);
  align-content: center;
}
section.inquiry .banner .leading .description{
  grid-area: description;
	margin-top: 1em;
  max-width: 24em;
}
section.inquiry .banner .leading .link{
  grid-area: link;
	margin-top: 1em;
}
section.inquiry .banner .leading .link a{
	display: block;
}
section.inquiry .banner .leading .link .button{
	background-color: rgba(255,255,255,.14);
	border-radius: 10em;
	padding: .75em 2em;
	padding-right: 1.5em;
}
section.inquiry .banner .leading .link .button .label{
	padding-block: .25em;
	padding-left: 3em;
	background-image: url("../img/icons/email.svg");
	background-repeat: no-repeat;
	background-position: left .7em;
	background-size: auto;
}
section.inquiry .banner .leading .link .button .icon{
	width: 2.32em;
	height: 1.375em;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='13.444'%20height='6.402'%20viewBox='0%200%2013.444%206.402'%3E%3Cpath%20d='M681.291,1592.708h11.634l-5.122-5.122'%20transform='translate(-681.291%20-1587.055)'%20fill='none'%20stroke='%23000'%20stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: .75em auto;
	background-color: #fff;
	border-radius: 10em;
	margin-left: 2em;
	transform: translate(0, 5%);
}
@media screen and (max-width: 960px){
  section.inquiry .banner .leading{
    padding: 3em 2vw;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
    "title"
    "description"
    "link";
    text-align: center;
  }
  section.inquiry .banner .leading .title{
    grid-area: title;
    padding-right: 0;
    margin-right: 0;
    border-right: 0;
  }
}
@media screen and (max-width: 520px){
  section.inquiry .inner{
    padding-inline: 4vw;
  }
  section.inquiry .banner{
    border-radius: .5em;
    overflow: hidden;
  }
  section.inquiry .banner .leading{
    padding: 3em 7vw;
  }
  section.inquiry .banner .leading .description{
    max-width: none;
  }
  section.inquiry .banner .leading .description br{
    display: none;
  }
  section.inquiry .banner .leading .link .button .label{
    padding-left: 2.25em;
    white-space: nowrap;
  }
  section.inquiry .banner .leading .link .button .icon{
    margin-left: .75em;
  }
}