@charset "UTF-8";
/*
Theme Name: 採用ページCSS
Description: 採用ページ専用のCSSを記述
*/
/* 共通設定 */
/* cocoon設定無効*/
.main,.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before{background-color: transparent;}
div#header-contain > .word-keyarea{color:#fff;margin-block-start: .2rem;}
#content.content.cf{background-image: var(--_asai_gradient3);}
.breadcrumb,.breadcrumb a, breadcrumb-item a{color:#fff;}


/* page topボタン */
#goto-topBtn {
  button {
    a{
      color:var(--_asai_color1);
    }
    a::before{
      background-color: var(--_asai_color1);
      box-shadow: 0 0 1rem rgba(0, 157, 229, 0.7);
    }
    .goto-circle:hover{fill:var(--_asai_color1)}
  }
}
/* ヘッダー　#header-contain */
div#header-contain-in {margin-inline-start: 6svw;}
div#header-contain {
  position: fixed;
  width: 100%;
  top: 0;
}

/* ナビヘッダーロゴ */
div#header-logo.header-logo.wrap.cf {
  a {color: #fff;
    display:block;
    width: fit-content;
    transition: .5s ease-in-out;
  svg {width: 100%;}
  }
  #asai-hedearLogo {
    width: 100px;
    height: 100px;
  }
  svg.site-logo-image{
    height: 100px;
  }
  svg.site-logo-name{
    height: 16px;
  }
  svg + p{text-align: center;font-size:clamp(0.75rem, 0.642rem + 0.46vw, 1rem);}
  a:hover{
    svg{
      color:rgba(255, 255, 255, 0.8);
      stroke: #fff;
      stroke-width: .25px;
      border-radius: 50%;
    }
  }
}
.lineSide-menu {
  .menu__btn {
    color:#fff;
    text-shadow: 1px 1px 2px #00000075;
  }
  .menu__btn > span[aria-hidden="true"], .menu__btn > span[aria-hidden="true"]::after {
    background-color: #fff;
    box-shadow: 1px 1px 2px #00000075;
  }
}
div.hedaer-navigations {
  margin-block-start: -2rem;;
  nav.navi {
    li:hover{
      color:var(--_asai_color1);
    }
    #menu-recruit_menu {

      li.togo {
        color:var(--_asai_color1);
        width: fit-content;
        height: fit-content;
        white-space: nowrap;
		  padding: 1rem 1.8rem;

        border:1px solid #fff;

      a {
        display: flex;
        transition: unset;
        transition: .3s ease;
        color:var(--_asai_color1);
        &::before {
          content:"";
          background-image: url(./image/arrow-linkR.svg);
          background-size: contain;
          display: block;
          aspect-ratio: 1;
          height: 28px;
          transition:unset;
        }
      }
      a:hover {
        color:var(--_asai_color1);
        background-color: unset;
      }
      }
      li.togo:hover{background-color:#fff;border:1px solid var(--_asai_color1);color:var(--_asai_color1);}
    }
  }
}

/* linkボタン用 */
.togo{
  --_asai_headeBtn:27px;
  align-items: center;
  line-height: var(--_asai_headeBtn);
  width: fit-content;
  background-color: #fff;
  padding:.75rem 3rem;
  border:1px solid #fff;
  border-radius: 3rem;
  transition: 0.5s ease .1S;
  span,svg{display: block;}
  .LinkArrowR2 .circle {
    fill: var(--_asai_color1);
    stroke: none; 
  }
  a{
    color:var(--_asai_color1);
    font-size: 18px;
    gap:.5rem;
    transition: 0.3s easet;
  }
&:hover {
  background-color: var(--_asai_color1);
  border-color: var(--_asai_color1);
  }
}


/* リンクボタン */
.entry-content,body.home>#container>footer#footer {
  p:has(svg.LinkArrowR), p:has(svg.LinkArrowR2) {  
    a {
      border: 1px solid var(--_asai_color9);
      padding: 1rem 2.5rem 1rem 1.8rem;
    }
  }
  p:has(svg.LinkArrowR) {
    a {
      color: var(--_asai_color4);
      background: linear-gradient(60deg, var(--_asai_color4) 50%, #fff 50%);
      background-size: 400% 100%;
      background-position: right center;
    }
    svg{border-radius: 50%;
      border: 1px solid var(--_asai_color4);
      padding:6px;width:27px;
      transition: .5s ease-in;
    }
    a:hover {
      color: #fff;
      background-position: left center;
      border-color: var(--_asai_color4);
      svg{border-color: #fff;background-color: #fff;}

    }
  }
  p:has(svg.LinkArrowR2) {
    a {
      color: #fff;
      background: linear-gradient(90deg, #fff 50%, var(--_asai_color4) 50%);
      background-size: 400% 100%;
      background-position: right center;
    }
    a:hover {
      color: var(--_asai_color4);
      background-position: left center;
      border: 1px solid var(--_asai_color4);
    }
  }
}
.entry-content.cf,footer #entory_footer>.grid{
  p.goto-other-page a{
/*   padding: 1rem 1.75rem 1rem 1.5rem; */
padding: 1rem 2.5rem 1rem 1.8rem;
  }
}
/* footer フッター */
footer#footer{
#footerMain {
  background: url(./image/mb_recruit.svg), var(--_asai_gradient3);
  background-repeat:no-repeat , no-repeat;
  background-origin: content-box, border-box;
  background-position: 88% top, center top;
	address{
    >span{color:#fff}
  }
  ul#menu-recruit_footerbutton{
    display: grid;
    gap:.5rem 2rem;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
    li{
      text-align: left;
      width:auto;
      a{line-height: 2;padding: 0.5rem 0.5rem 0;}
    }
  }
  ul.navi-link {
    & li:nth-of-type(1) {
        a {
          background-color: #fff;
          border: 1px solid #fff;
          color: var(--_asai_color1);
			font-weight:700;
			padding:1rem 3.5rem;
          transition: .5s ease .1s, color .3s ease;
		}
        a:hover {
          background: linear-gradient(360deg, rgba(30, 181, 216, 1) 0%, rgba(0, 155, 112, 1) 100%);
          background-size: 200% 200%;
          background-position: left top;
          color: #fff;
          border: 1px solid #ffffff97;
        }
    }
  }
.f_logo a p{font-size:clamp(0.625rem, 0.519rem + 0.47vw, 14px);text-align: center;margin-block-start: clamp(0rem, -0.106rem + 0.47vw, 0.25rem);}
.f_logo a:hover{
    svg.site-logo-image {
      color:#fff;
      stroke: #fff;
      stroke-width: .25px;
      border-radius: 50%;
      mix-blend-mode:soft-light;
    }
  }
}
}

/* パンくず */
#breadcrumb{
  padding-inline:0;
  text-align: right;
  line-height: clamp(1, 0.291rem + 3.02vw, 3);
  width:calc(var(--_asai_contentW) - 5svw);
  margin-inline: auto;
  ul,li{margin: 0;padding: 0;}
}


/* splide 共通設定 */
.splide {
  ul.splide__list,li.splide__slide{margin:0;padding:0;}
}
.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 文字表示アニメーション */
#keyMessage .grid h1,
h2.parallax-item::after,
#Rpage-n p.page-slug{
/*  animation */
white-space: nowrap; /* テキストが改行されないように */
overflow-x: clip; 
clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
transition: clip-path 1s ease-out .5s; /* アニメーションの設定 */
}
#keyMessage .grid.show h1,
h2.parallax-item.show::after,
#Rpage-n.show p.page-slug{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* 採用_ページトップ */
#recruitF,#recruitIn{
  overflow-x: clip;
  position: relative;
  margin-inline: 5svw 0;
  padding-block-end: 5svw;
  top:0;
  >div{
    top:0;
  }
/* ページナビゲーション */
  ul.Rfront-pagination{
    width: fit-content;
    position: absolute;
    padding-block-end: 5lvh;
    padding-inline-start: 5svw;
  }
  .splide__pagination__page {opacity: 1;margin:.25rem}
  /* メッセージ表示 */
  section#Rfront::before{
    position:absolute;
    content:"";
    display: block;
    right: 42px;
    bottom:clamp(2.313rem, -1.473rem + 5.92vw, 5.625rem);
    width: 48%;
    aspect-ratio: 1 / 0.538;
    text-align: right;
    background-image: url(./image/r_msg.svg); 
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1;
  }
}



#keyMessage,
#interview,#qa,#outline,#jobdescription{
  padding-block:clamp(4.5rem, 2.374rem + 7.29vw, 140px);
  .grid{
    width:var(--_asai_contentRFW);
    margin-inline: auto;
    padding-inline: 1rem;
    grid-template-columns: .7fr .3fr;
    column-gap: clamp(1rem, -0.797rem + 6.05vw, 100px);
  }
}

#keyMessage,
#interview,#qa,#outline,#jobdescription{
  position: relative;
  background-color: #fff;
  img{display: block;}
  h2{
    color:var(--_asai_color3);
    font-size:clamp(16px, 0.829rem + 0.77vw, 24px);
    margin-block-end: 1.5rem;}
  h2::after{
    display: block;
    font-family: archivo, sans-serif;
    font-weight: 900;
    color:var(--_asai_color7);
    font-size: clamp(2.5rem, 1.088rem + 6.33vw, 106px);
    line-height: 1;
    margin-block-start: clamp(0.9rem, 0.523rem + 1.69vw, 2rem);
  }
}


#keyMessage{
  display: grid;
  place-content: center;
  z-index: 0;
  background-image: url(./image/re_messageBg.webp);
  background-position: center 68%;
  background-repeat: no-repeat;
  background-size: contain;

  div{
    justify-self:start ;
    margin-block-start: 2rem;
  }
  div.grid{
    width: var(--_asai_contentRFW);
    grid-template-columns: .64fr .35fr;
  }
  h1{font-size:clamp(34px, 1rem + 1.76vw, 52px);
  color:var(--_asai_color6);
  margin-block:1rem .5em;
  }
  h1 + div.parallax-item{
    line-height: 1.8;
    margin-block-end: 3rem;
    opacity: 0;
    transform: translateY(-5px);
    transition: 0.5s cubic-bezier(0.5, 0, 0, 1) 1s;
  }

  img {
    display: block;
    opacity: 0.2;
    transition: 1s cubic-bezier(.43, .16, .45, 1.05) 1.5s;
    clip-path: circle(10% at 0 0);
  }
}
#keyMessage .grid.show{
  img{
  opacity: 1;
  clip-path: circle(100% at center);
  }
  h1 + div.parallax-item.show{
    opacity: 1;
    transform: translateY(0);
  }
}
/* INTER VIEW */
#interview{
  background-image: url(./image/re_interviewBg.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  h2{
    grid-column: 1/2;
    grid-row: 1/2;
    color:#fff;
  }
  h2::after{content:"INTERVIEW";color:#fff}
  .grid {
    padding-bottom:3rem;
    color:#fff;
    >div {
      grid-column: 1/2;
      grid-row: 2/3;
    }
  }
  p.goto-other-page{
    grid-column: 2/3;
    grid-row: 1/2;
    align-self: center;
  }

  .as-pickup-child-pages-list{
    width:calc(var(--_asai_contentFW) - 2rem);
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    padding-inline: clamp(2rem, 0.181rem + 6vw, 5rem);
    padding-block-start: 5rem;
    background-color: #fff;
    gap:.5rem clamp(2rem, 0.181rem + 6vw, 5rem);
  }
  .as-pickup-child-page-item{
    display: grid;
    a{
      display: grid;
      gap:1rem;
    }
  .as-pickup-child-page-content{
    display: grid;
    grid-template-rows: subgrid;
    grid-row:span 2;
    gap:1rem;
    padding-block-start: .5rem;
  }
  .as-pickup-child-page-title{
    color:var(--_asai_color4);
    font-size:18px;
    font-weight: 700;
  }
  .fx{gap:2rem;}

  }
  img{display: block;width: 100%;aspect-ratio: 1;object-fit: cover;object-position: center top;}
}

/* QA */
section#qa{
  background-color: #e5f5f1;

  h2 {
      color: var(--_asai_color4);
      text-align: center;
      background-clip: text;
      margin-block-end: 0;
    }
    h2::after {
      content: "FAQ";
      background: linear-gradient(320deg, rgba(30, 145, 176, 1) 30%, rgba(0, 155, 112, 1) 65%);
      text-align: center;
      background-clip: text;
		color:var(--_asai_color4);
      color: transparent;
      -webkit-text-fill-color: transparent;
    }

  .grid{
    /* grid-template-columns: minmax(300px, 1fr); */
    grid-template-columns:var(--_asai_contentW);
    justify-content: center;
    gap:3rem
  }
  /* --------レイアウト用のスタイル-------- */
.qawrapper.qa {
  width: 100%;
  height: auto;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  span.en {
  display: inline;
  text-transform: uppercase;
  font-size: clamp(1.625rem, 1.396rem + 0.98vw, 2.25rem);
  font-weight: bold;
  color: var(--_asai_color4);
  margin-block-end: -8px;
  }
  summary {
   /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */
   display: block;
  }
  summary::-webkit-details-marker {
   /* Safariで表示されるデフォルトの三角形アイコンを消す */
   display: none;
  }
  .qasummary_inner {
   cursor: pointer;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   background-color: #fff;
   gap:2rem;
  }
  .qasummary_inner,.qacontent_inner{
    padding:1.2rem 1.8rem;
    line-height: 2;
  }
  .qasummary_inner>div,.qacontent_inner{
    display: flex;
    flex-direction: row;
    gap:2rem;
    align-items: center;
  }
  .qasummary_inner>div{
    align-items: center;
    font-size: 18px;
  }
/* is-openedクラスが付与されたときのスタイル */
details.is-opened {
  span.en{display: inline;}
  .icon {
    transform: rotate(-90deg);
  }
}
details[open] {
  .qaicon {
    transform: rotate(-90deg);
  }
}
  .qaicon {
   display: block;
   position: relative;
   width: clamp(1.75rem, 1.43rem + 1.37vw, 42px);
   aspect-ratio: 1;
   /* margin-inline-end: .5rem; */
   flex-shrink: 0;
   transform: rotate(90deg);
   transform-origin: center;
   transition: transform 0.3s ease;
   svg{
    width:100%;
    aspect-ratio: 1;
    display: block;
    color: var(--_asai_color4);
   }
  }
  /* --------アコーディオンの中身のスタイル-------- */
  .qacontent {
   overflow-x: hidden;
   /* details直下のタグにpaddingを設定すると挙動がおかしくなるので、ここには指定しない */
  }
  .qacontent_inner {
    line-height: 2;
  }
  details {
   margin-bottom: 1rem;
  }
  details:last-child {
   margin-bottom: 0;
  }
 }
 p.goto-other-page{
justify-self: center;
 }
 @media (max-width: 760px) {
  .qa {
   width: 100%;
  }
 }
}

/* CAMPANY */
#outline{
  .in_RcompanyBlk{
  padding-block: clamp(5.25rem, 0.672rem + 6.3vw, 140px) clamp(8rem, -2.756rem + 14vw, 13rem);
  background-image: url(./image/re_companyBg.webp);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  }
  h2,h2::after{color:#fff;}
  h2::after{content:"CAMPANY";}
  .grid{
    grid-template-columns: .51fr .47fr;
    div{color:#fff;}
  }
  
  h2 + div{
    grid-column: 1/2;
    grid-row: 2/3;
    line-height: 3;
  }
  p.goto-other-page{
    grid-column: 2/3;
    grid-row: 1/2;
    align-self: center;
  }
  div#Rcompany {
    position: absolute;
    bottom: 0;
  }
  ul#Rcompany-list{
    li:nth-child(odd){
      margin-block-start: 2.5rem;
    }
    li:nth-child(even){
      margin-block-end: 2.5rem;
    }
  }
}

/* 募集要項 */
#jobdescription{
  color:#fff;
  padding-block-end:0;
  overflow-x: clip;
/*   --_asai_jobdiscriptGbg:linear-gradient(300deg, rgba(30, 145, 176, 1) 20%, rgba(0, 155, 112, 1) 100%); */

  .grid{
    display: block;
    width: 70%;
    padding-inline: 0;
    margin-inline-start: 0;

    >div{
      position: relative;
      padding-inline-start: clamp(1rem, -37.992rem + 55vw, 16vw);
    }
    >div:nth-of-type(1){
      z-index: 1;
      h2,h2::after{text-align: left;}

        h2 {
          color: var(--_asai_color4);
          background-clip: text;
          margin-block-end: 0;
        }
        h2::after {
          content: "JOB \A DESCRIPTION";
          overflow-wrap: normal;
          background: linear-gradient(300deg, rgba(30, 145, 176, 1) 20%, rgba(0, 155, 112, 1) 100%);
          background-clip: text;
          color: transparent;
          margin-block-end: 0;
          line-height: 1;
          vertical-align: bottom;
          -webkit-text-fill-color: transparent;
          white-space: pre;
          margin-bottom: -28px; 
        }

      h2::after{
        opacity: 0.2;
        transform: translateX(-100svw);
        transition: .6s cubic-bezier(.25,.12,.83,1.2) .5s;
      }
    }

    >div:nth-of-type(2){
      background-image:linear-gradient(300deg, rgba(30, 145, 176, 1) 20%, rgba(0, 155, 112, 1) 100%);
      z-index: 0;
      line-height: 2;
      padding-block: 2.5rem 6.5rem;
      display: grid;
      gap:5.25rem;
      clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
      transition: clip-path .75s ease-in-out 1.6s;

      div,p{
        transform: translateX(-100svw);
        transition: .75s cubic-bezier(.25,.12,.83,1.2) 2s;
      }
    }
  }
  div.imagePhoto {
    position: relative;
    height: clamp(19.688rem, 16.016rem + 16.32vw, 31.313rem);
    width: clamp(18.75rem, -0.612rem + 86.05vw, 80.063rem);
    left: 100svw;
    margin-top:calc(clamp(18.75rem, -0.612rem + 86.05vw, 80.063rem)*(-1 / 7));
    transition: .6s ease-in-out 1s;
  }
  .grid.show{
    >div:nth-of-type(1){
      h2::after{
        opacity: 1;
        transform: translateX(0);
      }
    }
    >div:nth-of-type(2){
      clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
      div,p{transform: translateX(0);}
    }
  }
  .grid.show + div.imagePhoto{
    left:clamp(18.75rem, -44.174rem + 98.32vw, 48rem);
  }

}


div#header-contain {
  position: fixed;
  width: 100%;
  top: 0;
}

/* フッター */
footer#footer{padding-block-start: clamp(2rem, 4vw, 5rem);}
section#entory_footer {
  h2{
    /* font-size:clamp(28px, 1.43rem + 1.37vw, 42px); */
    font-size:42px;
  }
  position: relative;
  background-color: #029c73;
  .entory_blk{
    width: 95svw;
    aspect-ratio: 1/ .378;
    /* background-color: #fff; */
    background-image: url(./image/re_footerImage.webp);
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    z-index: 0;
    /* padding-inline-end: 160px; */
    padding-inline-end:7.5svw;
    /* padding-block-start: 115px; */
    padding-block-start:6.6svw;
    transition: 1s ease;
  }
@media(834px > width),(834px > width) and (orientation: portrait) {
  .entory_blk{
    background-image: url(./image/re_footerImage_small.webp);
    aspect-ratio: 1 / 1.322;
    background-size: cover;
  }
}
  .entory_blk::before{
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    inset:0;
    background-color: #009b6f;
    mix-blend-mode: multiply;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);

    transition: .5s ease;
  }
  /* .entory_blk:hover{background-color: #009b6f;} */
  .entory_blk:hover::before{
    background-color: #009b6f00;
    /* mix-blend-mode: normal; */
    clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0 100%);
  }
  .grid{
    position: relative;
    z-index: 2;
    color:#fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    column-gap:clamp(1rem, -2rem + 10vw, 10rem);
    p.goto-other-page {
      a {color:var(--_asai_color4) !important;transition: .5s;}
      a:hover{color:#fff !important;}
    }
      
  }
p.goto-other-page a{
/*   padding: 1rem 1.75rem 1rem 1.5rem; */
padding: 1rem 2.5rem 1rem 1.8rem;
}
        
}

@media(1024px > width){
 .grid{flex-direction:column;gap:1rem}
}

.as-pickup-child-page-item {
  a{img{opacity:1;transition: .2s ease;}
  }
  a:hover{img{opacity: .7;} }
} 

/* 採用ページTOP以外 */
body:not(.page-id-27){
  #recruitIn{
    padding-block-end:1svw;
  }
  #Rpage-n {
    position: relative;
    color:#fff;
    padding-block-start: 3rem;
    margin-inline-start: -4.5svw;
    aspect-ratio: 1 / 0.323;
    text-align: center;
    line-height: 1;
    display: grid;
    place-content: center;
    h1 {
      font-size: clamp(16px, 0.829rem + 0.77vw, 24px);
      font-weight: 600;
      margin-block-end: .5em;
    }
    p.page-slug.uppercase{
      font-size:clamp(40px, 1.088rem + 6.33vw, 106px);
      font-weight: 900;
      letter-spacing: -0.5px;
    }
  }

  #header-image{
    margin-inline: 5svw 0;
    position: absolute;
    top:0;
    right:0;
    z-index:-1;
  }
  /* フッター */
  footer#footer{padding-block-start: 0;}


  .entry-content.cf:has(#rEnvironment){background-color: transparent;}
  .entry-content.cf {
    background-color: #fff;

    #qa,.job-description,#job .flow, .modelcase,.interview-header{
      padding-block-start: clamp(3rem, 0.672rem + 6.3vw, 120px);
    }
	.evMessage{padding-block-start:clamp(5rem, 3.941rem + 4.74vw, 7.5rem);}
    .table,#job .flow, .modelcase,.interview-header{
      margin-block-end: clamp(3rem, 0.672rem + 6.3vw, 100px);
    }
    #job .flow, .entryForm, .privacyPolicy,.inview-list{
    padding-block-end: clamp(3rem, 0.672rem + 6.3vw, 100px);
    }


    .job-description, .modelcase, .flow, .entryForm, .privacyPolicy {
      h2 {
        font-size: clamp(1rem, 0.833rem + 0.71vw, 24px);
        color: var(--_asai_color3);
        text-align: center;
      }
      h2::after {
        display: block;
        font-size: clamp(40px, 1.667rem + 3.56vw, 80px);
        font-family: archivo, sans-serif;
        color: var(--_asai_color7);
        margin-block:1.25rem .65em;
        font-weight: 900;
        text-align: center;
        line-height: 1;
      }
    }
  }


  #qa{
    background-color: #e8f4f6;
    h2{
      font-size:clamp(24px, 1.243rem + 1.15vw, 36px);
      color:var(--_asai_color3);padding-block-end: 1rem;
      margin-block-end: 0;
    }
    h2::before{
      display: block;
      font-size: clamp(1rem, 0.914rem + 0.38vw, 20px);
      color:#b3dee2;
      margin-block-end: .5rem;
      font-weight: 700;
    }
    h2::after{content: unset;}
    #qa1{
      h2::before{content:"WORKS";}
    }
    #qa2{
      h2::before{content:"WELFARE BENEFTS";}
    }
    #qa3{
      h2::before{content:"RECRUITMENT";}
    }
    .grid{
      gap:4rem;
      margin-block-end:4rem;
    }
    .qawrapper.qa {
      .qasummary_inner{
        font-size: clamp(17px, 1.041rem + 0.1vw, 18px);
        span.en{font-size:  clamp(1.625rem, 1.454rem + 0.77vw, 2.125rem)}
      }
      .qacontent_inner{font-size:clamp(0.938rem, 0.916rem + 0.1vw, 1rem);}
      .qasummary_inner, .qacontent_inner {
          padding: .7rem 1.8rem;
          line-height: 2;
      }
    }
  }

/* 募集要項 */
    /* テーブル */
    .table{
      background-color: #fff;
      padding:clamp(1rem, 0.333rem + 2.84vw, 3rem) clamp(1rem, -0.333rem + 5.69vw, 5rem) clamp(2rem, 1rem + 4.27vw, 5rem);
      th,td{padding:clamp(1.4rem, 1.2rem + 0.85vw, 2rem);border-top:none;}

      th{color:var(--_asai_color3);
        white-space: nowrap;
        border-bottom: 1px solid var(--_asai_color3);
      }
      td{color:var(--_asai_color8);
        border-bottom: 1px solid #ccc;
        span{color:var(--_asai_color3)}
      }
    }

  #job {
    .job-description {
      background-color: var(--_asai_color3);
      h2, h2::after {
        color: #fff;
      }
      h2::after {
        content: "JOB DESCRIPTION";
      }
      div:nth-last-of-type(1){
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(119px  , 1fr));
        gap:0;
        img{display: block;margin: 0;padding: 0;width:100%;object-fit: cover;height: auto;}
        img:nth-last-of-type(1){display: none;}
      }
    }
    .modelcase {
      h2::after {
        content: "MODEL CASE";
      }
      h3,h4{margin-block-end:1rem;line-height: 1;color:var(--_asai_color1);font-size: 24px;}
      h4{font-size: 18px;}
      .model{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;;
        margin-inline: auto;
        background-color: #e5f5f0;
        border-radius: 22px;
        padding-block: 3rem 2rem;
        justify-content: center;
        justify-items: center;
        gap:2rem;
        >div:nth-of-type(1){
          display: grid;justify-items: center;gap:1rem;
          >div:nth-last-of-type(1){border-bottom: 1px solid var(--_asai_color1);}
        }
        >div:nth-of-type(2){width: 92%;}
      }
      em{font-style: normal;font-size: clamp(20px, 1.188rem + 0.27vw, 23px); color:var(--_asai_color1);padding-inline-end: .25em;}
      p{
        font-weight: 600;
        background-color: #fff;width: 100%;
          display: grid;
          grid-template-columns: 1fr 1.3fr;
          padding:1rem 1.5rem;
          justify-content: center;
          justify-items: center;
          align-items: center;
          margin-block-end: .5rem;
          border-radius: 8px;
          font-size: clamp(1rem, 0.917rem + 0.36vw, 20px);

        span:nth-of-type(1){
          display: block;}
        span:nth-of-type(2){
          display: block;
          justify-self: left;
          span{font-size:12px;display: block;font-weight: normal;}
        }
      }
      p:nth-last-of-type(1){margin-block-end: 2rem;}
      img{width: 160px;height:auto;}
      ul,li{margin: 0;padding: 0;list-style: none;line-height: 2;font-weight: 600;}
      li::before{content: "■";margin-inline-end: .5em;}
      ul{margin-block-end: 1.5rem;}

      th>span {
        background-color: var(--_asai_color1);
        color: #fff;
        font-weight: normal;

        white-space: nowrap;
        width:5em;
        display: inline-block;
        text-align: center;
      }
      td,tbody th{border:none; padding: .2rem;}
      th{vertical-align: top;}

      table:nth-of-type(1) {
        margin-block-end: 2rem;
        tr:nth-last-of-type(1) td, tr:nth-last-of-type(1) th {
          border-top: 1px solid #ccc;
          padding-block-start: .75rem;
        }
        tr:nth-last-of-type(2) td {
          padding-block-end: .75rem;
        }
      }
      td {
        width: 30%;
      }
      .column-2::before {
        content: "■";
        margin-inline-end: .25em;
      }
    }


    .flow {
      h2::after {content: "FLOW";}
      h3 {text-align: center;}
      color: #fff;
      background:linear-gradient(80deg,#59b1c9 0%,#ffffff93 60%, #ffffff00 80%),url(./image/re-job-flow_img1.webp);
      background-repeat: no-repeat;
      background-position: right top;
      position: relative;
      .flow-entry {
        position: relative;
        display: grid;
        padding: 0;
        background-image: url(./image/re-job-flowh.webp);
        background-repeat: no-repeat;
        background-position: center;
        @media(820px <= width){background-size: contain;}
        @media(1240px <= width){background-size: cover;}
        height: 100%;
        grid-template-columns: repeat(4, 1fr);
        div {
          transform: scale(.8);
          padding-block: 2.5rem 2rem;
          display: grid;
          place-content: center;
          position: relative;
          h3{opacity: .2;
            transform: scale(.9);
          }
        }   
      }
      .flow-entry.show{
        div:nth-of-type(1) h3{
          opacity: 1;
          transform: scale(1);
          transition:1s cubic-bezier(0.25, 0, 0, 1) .2s;
        }
        div:nth-of-type(2) h3{
          opacity: 1;
          transform: scale(1);
          transition:1s cubic-bezier(0.25, 0, 0, 1) .5s;
        }
        div:nth-of-type(3) h3{
          opacity: 1;
          transform: scale(1);
          transition:1s cubic-bezier(0.25, 0, 0, 1) .7s;
        }
        div:nth-of-type(4) h3{
          opacity: 1;
          transform: scale(1);
          transition:1s cubic-bezier(0.25, 0, 0, 1) .9s;
        }
      }
    }

    .entryForm {
      h2::after {
        content: "ENTRY FORM";
      }
      .formContact {
        span[data-name="distinction"]{display: block;}
        input[type=text], input[type=email], input[type=tel], textarea, select,input[type=date] {
          width: 100%;
          padding: 1rem;
          background-color: #f1f1f1;
          border: 1px solid #ccc;
        }
        input:not([type=submit]):focus, select:focus, textarea:focus{
          background-color: #fff;
        }
        input[type=submit] {border-radius: 8px;color:var(--_asai_color9)}

        input.distinction{
          height: 3rem;
          width: 3rem;
          display: inline-block;
          border:1px solid var(--_asai_color8);
        }
        input[type="radio"] {
          border: 1px solid #ccc;
          background-color: #f1f1f1;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          vertical-align: -2px;
          outline: none;
         }
         input[type="radio"]::before {
          display: block;
          content: "";
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background-color: var(--_asai_color3);
          font-size: 1.2em;
          transform: scale(0);
          transform-origin: center;
          transition: all 0.3s ease-in;
         }
         input[type="radio"]:checked::before {
          visibility: visible;
          transform: scale(.9);
          transition: all 0.3s cubic-bezier(0.25, 0.25, 0.56, 2);
         }
      p:has(textarea){
        display: grid;
        grid-template-columns: 1fr;
        grid-row: auto auto;
        gap: .5rem;
      }
    }
    }
    .privacyPolicy {
      h2::after {
        content: "PRIVACY POLICY";
      }
    }
    }

  /* 働く環境を知る */
  .rEnvironment{
    h3{
      font-size:clamp(1.5rem, -0.113rem + 2.52vw, 36px);
      color:var(--_asai_color3);
      margin-block-end: 1em;
    }
    h3::before{
      content: "FEATURES";
      font-size: clamp(1rem, 0.462rem + 0.84vw, 20px);
      color: #b3dee2;
      display: block;
      margin-block-end: clamp(0.5rem, -0.576rem + 1.68vw, 1rem);
      font-weight: 700;
    }
    p{line-height: 2.3;margin-block-end: 1rem;}
  }

  .evMessage {
    position: relative;
    background-color: #fff;
    background-image: url(./image/re-envitom_img1.webp);
    background-position: left top;
    background-repeat: no-repeat;
    color: #fff;
    z-index: 0;
    h2 {
      font-size: clamp(2rem, 1.583rem + 1.78vw, 52px);
      color: #fff;
      line-height: 1.5;
      margin-block-end: 1rem;
      align-self: center;
    }
    p {
      font-size: 18px;
      line-height: 2.7;
      margin-block-end: 2rem;
      font-weight: 700;
    }
    .ec_in {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(2rem, 2rem + 0vw, 2rem);
      margin-block-end: 3rem;
      position: relative;
      >div{padding-inline-start: 2.4rem;}
    }
  }
  .en_movie{position: relative;z-index: 1;}
  .evMessage::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    width: 100%;
    height: 300px;
    background-color: #fff;
    z-index: 0;
  }
  .features{
    background-color: #fff;
    padding-block: var(--_asai_InHeight);
    h3::before{
      content: "FEATURES";
    }
  }
  .knowhow,.focus,.safty{
    h2{font-size:clamp(1.125rem, -0.488rem + 2.52vw, 30px);position: relative;line-height: 5;margin-block-end: 0;color:#fff;padding-inline-start: clamp(3.5rem, -0.803rem + 6.72vw, 5.5rem);
    background-image: url(./image/01.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: clamp(5rem, -0.378rem + 8.4vw, 7.5rem);}

    h3{font-size:24px;line-height: 1.4;}
    h3::before{content: unset;}
    >div{
      background-color: #fff;
      padding-block: 3.5rem;
    }
    .fx{
      align-items: center;
      justify-content: space-between;
      gap:3rem;
      margin-block-end: 4rem;
      img{object-fit: cover;}
      >div,figure{flex:1 1 49%;}
      >div{padding-inline:1rem;p{max-width: 630px;}}
    }
    .fx:nth-child(odd){
      flex-direction: row-reverse;
    }
  }

  .focus{h2{background-image: url(./image/02.svg);}}
  .safty{h2{background-image: url(./image/03.svg);}}

  /* INTER VIEW */
  .inview-list{
    background-color: #e8f4f6;
    padding-block:var(--_asai_InHeight);
  }
  .personList{
    background-color: #fff;
    padding-block:85px;
    margin-inline: auto;
  }
  .as-pickup-child-pages-list{
    max-width: 1274px;
    margin-inline: 4rem;
    display: grid;
    justify-content: center;
    gap:clamp(2rem, 1.187rem + 3.64vw, 70px) clamp(3.5rem, 2.901rem + 2.68vw, 84px);
    grid-template-columns: repeat(3, minmax(200px, 1fr));
  }
  .as-pickup-child-page-item {
    a{
      display: grid;gap: 1.5rem;
      img{opacity:1;transition: .2s ease;}
    }
    a:hover{img{opacity: .7;} }
  } 
  .as-pickup-child-page-content{
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap:1.5rem;

    .fx{
      gap:4rem;
      font-size:clamp(0.875rem, 0.832rem + 0.19vw, 1rem)
    }
  }
  .as-pickup-child-page-thumbnail{
    img{width: 100%;height: 100%;object-fit: cover;}
  }

  .as-pickup-child-page-title{
    font-size:clamp(1.063rem, 1.041rem + 0.1vw, 18px);
    color:var(--_asai_color3);
    font-weight: 600;
  }

  /* INTERVIEW 01 - 05 */
  .interview-header.fx{
    position: relative;
    justify-content: flex-end;
    width: 100%;
    /* gap:clamp(0rem, -204rem + 226.67vw, 136px); */
    h2 {
        font-size: clamp(1.125rem, 0.805rem + 1.37vw, 32px);
        color: var(--_asai_color3);
        line-height: 2;
        font-feature-settings: normal;
        white-space: nowrap;
      }
    >div {
      position: relative;
      align-self: center;
      padding-inline-start: 1rem;
    }
    div.fx {
      font-weight: bold;
      color: #999;
      gap: 1em;
      font-size: 24px;
    }
    
    figure{display: block;max-width: 100%;padding-inline-start: 1rem;}
  }
  .inteviewContent{
    counter-reset: num_h3;
    h3{
      counter-increment: num_h3;
      vertical-align: baseline;
    }
    h3::before {
      content: counter(num_h3, decimal-leading-zero);
      font-family: archivo, sans-serif;
      font-size:clamp(2.25rem, 2.113rem + 0.59vw, 42px);
      font-weight: 900;
      color:var(--_asai_color3);
      vertical-align: middle;
      margin-inline-end: 1rem;
    }
    h3,h4{
      line-height: 1;
      margin-block-end: 1em;
    }
    h3{
      font-size: clamp(1.063rem, 1.04rem + 0.1vw, 1.125rem);
      color: var(--_asai_color3);
    }
    h3:not(:nth-of-type(1)),
    figure{
      margin-block-start: 3.5rem;
    }
    h4{
      font-size: clamp(1.125rem, 0.988rem + 0.59vw, 24px);
      color: var(--_asai_color6);
      font-weight: 700;
      font-feature-settings: normal;
      margin-block:1.5rem 2rem;
    }
    p{font-size: 15px;line-height: 1.8;margin-block-end: 1rem;}
    figure{img{width: 100%;height:100%;object-fit: cover;}}

    h3,h4,p{
      padding-inline: clamp(1rem, -0.445rem + 6.16vw, 3.5rem);
    }

  }
  .inteviewContent + div{
    margin-block-start:var(--_asai_InHeight);
    padding-block:var(--_asai_InHeight) calc(var(--_asai_InHeight) * 1.25);
    background-color: #e8f4f6;
    text-align: center;
    margin-inline: auto;
    h4{
      font-size: clamp(1.125rem, 0.988rem + 0.59vw, 24px);
      color: var(--_asai_color6);
      font-weight: 700;
    }
    h4::before{
      content: "";
      display: inline-block;
      width:2.5rem;
      aspect-ratio: 1;
      clip-path: inset(0 46%);
      background-color: var(--_asai_color6);
      margin-inline-end: clamp(0.5rem, -0.576rem + 1.68vw, 1rem);
      transform: rotate(-35deg) translateY(2rem);  
      transform-origin: bottom left;
    }
    h4::after{
      content: "";
      display: inline-block;
      width:2.5rem;
      aspect-ratio: 1;
      clip-path: inset(0 46%);
      background-color: var(--_asai_color6);
      transform: rotate(42deg) translateY(1.125rem);  
      transform-origin: bottom;
    }
    iframe{
      margin-block-start: 1rem;
      display: block;
      margin-inline: auto;
    } 

  }
  section.interviewIndivisual{
    padding-block-end: var(--_asai_InHeight);
    p.goto-other-page{
    margin-inline: auto;
	margin-block-start:var(--_asai_InHeight);
  }
  }
}


@media(600px > width){


div#header-logo.header-logo.wrap.cf {
    #asai-hedearLogo,svg.site-logo-image{height: 60px;width: 60px;}
    svg + p {font-size:9px}
  }
#interview{
    .as-pickup-child-pages-list {
      display: block;
      width:90%;
  }
}
body.page-id-27{
section#recruit {
  .splide__slide img {
    width: 100%;height: 100%;
    object-fit: cover;
    object-position: left bottom;
  }
}
#recruitF{
  right: 0;
  section#Rfront::before{
    content: unset;
  }
  ul.splide__list,li.splide__slide{
    width: 100%;
  }
}

#qa h2:after{
  margin-block-end: 2rem;
}

}

body:not(.page-id-27) {
  article.post-32 {
    div#header-image {
      img {
        object-position: 60% bottom;
      }
    }
  }
  article.post-38 {
    div#header-image {
      img {
        object-position: 52% center;
      }
    }
  }
  article.post-105 {
    div#header-image {
      img {
        object-position: 40% bottom;
      }
    }
  }
  article.post-111 {
    div#header-image {
      img {
        object-position: 52% bottom;
      }
    }
  }
  article.post-121 {
    div#header-image {
      img {
        object-position: 13% bottom;
      }
    }
  }
  article.post-123 {
    div#header-image {
      img {
        object-position: 30% bottom;
      }
    }
  }

    #Rpage-n.parallax-item {
      aspect-ratio: 1 / .9;

      p.page-slug.uppercase {
        font-size: 32px;
        letter-spacing: unset;
      }
    }
    div#header-image{
      img{aspect-ratio: 1 / .975;object-fit: cover;}
    }

    
    
  #qa{
    .grid{
      gap:4rem;
      margin-block-end:4rem;
    }
    .qawrapper.qa {
      .qasummary_inner>div{
        flex-direction: row;
        line-height: 1.5;
      }
    }
  }

    .evMessage{
      background-size: cover;
    }
    .evMessage::after {
      height: 50px;
    }
    .knowhow,.focus,.safty{
      >figure img{
        height: 305px;
        width: auto;
        object-fit:cover;
      }
      h2{
        line-height: 1.4;
        padding-block: 2rem 1rem;
        background-position: left 1rem;
        background-size: 200px;
      }
      .fx{
        h3,p{padding-inline: 1rem;}
      }

    }
    #focus.focus,#safety.safty{
      .fx {h3{br{display: none;}}      
    }
  }
  }
.features {padding-block: calc(var(--_asai_InHeight) + .5rem) var(--_asai_InHeight);}

}

/* @media(834px > width){
  #keyMessage{
    background-position: center 25%;
    background-repeat: no-repeat;
    background-size: 120%;
  }
} */

@media(834px > width), (834px > width) and (orientation: portrait) {
  /* section#recruit {
    .splide__slide img {
      width: 100%;height: 100%;
      object-fit: cover;
      object-position: left bottom;
    }
  } */
  #keyMessage,
  #interview, #qa, #outline, #jobdescription {
    .grid {
      display: block;
    }
  }
  #footer {
    section#entory_footer {
      display: grid;
      .entory_blk {margin-inline-end: 0;padding-block-start: unset;
      position: relative;}
      div.grid {
        position: absolute;
        bottom:24svw;
        left: 0;
        width: 100%;
        margin-inline: auto;
        align-items: center;
        margin-inline: auto;row-gap:2rem;
        h2+p:has(svg[class*=LinkArrow]) {
            width: 85%;
            margin-inline: 5svw;
          }
      }
    }
  }
}
@media(834px > width){
  #keyMessage{
    background-position: center 25%;
    background-repeat: no-repeat;
    background-size: 120%;
  }

  #interview,#outline{
    .grid{
      h2{margin-block-end: 1.5rem;}
      h2 + div{
        margin-block-end: 3rem;
      }
    }
  }
  #qa{
	 h2{
      margin-block-end: 2rem;
    }
  .qawrapper.qa {
      margin-block-end: 2rem;
      div.qasummary_inner {
        gap: 1rem;
      }
      div.qasummary_inner div,div.qacontent_inner {
      flex-direction: column;
      align-items: flex-start;
      gap: .74rem;
    }
    span.en {
      line-height: 1.5;
    }
    }
  }
#recruit_Front #qa.front_section .grid p.goto-other-page{width:100%;}
  #outline{
    #Rcompany{
    .splide__slide{width:250px !important;}
    }
  }
  /* 募集要項 */
  #jobdescription{
    padding-block-end:0;
  .grid{
    width: 90%;
    >div:nth-of-type(1){
      z-index: 1;
      h2,h2::after{text-align: left;}
        h2::after {
          margin-bottom: -14px; 
      }
    }
    >div:nth-of-type(2){
      padding-inline-end: 2rem;
      padding-block: 2.5rem 10rem;
      gap:2rem;
    }
  }
  .grid + div.imagePhoto {
    img{height:clamp(16.25rem, 10.077rem + 28.63vw, 25rem);}
    margin-top:-110px;
  }
  .grid.show{
    >div:nth-of-type(2){
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
  }
  .grid.show + div.imagePhoto{
    left:clamp(4rem, -4.466rem + 39.26vw, 16rem);
  }
}
body:not(.page-id-27){
  #job {
    .job-description {
      >div:nth-last-of-type(1){
        display: grid;
        grid-template-columns: repeat(3, minmax(119px  , 1fr));
      }
    }
    }
}

}

@media(600px <= width){
  #recruitF{
    /* スライド */
    .splide__slide{width:95svw;}
    .splide__slide img{
      width:95svw;
      display: block;
      width:95svw;
      object-fit: contain;
      object-position: right top;
    }
  }
} 

@media(1024px > width){

  /* 採用 TOP */
  #keyMessage{
    div.grid{
      width: display;

      >div:nth-of-type(1){
        justify-self: center;
        margin-block-start: 2rem;
      }
    }
    img{display: block;max-width: clamp(18.75rem, 10.733rem + 34.21vw, 522px);margin-inline: auto;}
  }
  #interview{
    background-size: auto;
    .grid {
	padding-bottom: 4rem;
      >div {
        margin-block-end: 2rem;
      }}
      .as-pickup-child-page-item{
        margin-block-end: 2.5rem;
      }
    .as-pickup-child-pages-list {
      grid-template-columns: repeat(auto-fit, minmax(200px,auto));
      width:90%;
      padding-block-start: 2rem;
  }
}
#outline.front_section {
  padding-block: 0 150px;
  .grid{
    grid-template-columns: auto auto;
  }
}
footer#footer {
    section#entory_footer {
      /* .entory_blk {

      } */
      .grid {
       h2{font-size:clamp(1.75rem, 1.352rem + 1.7vw, 2.625rem);}
      }
    }
    #footerMain {
      background-position: 2rem top, center top;
    }
  }

  body:not(.page-id-27){
    #Rpage-n{aspect-ratio: 1 / 0.6 ;}

    #header-image{
      height: 100%;
      padding-block-end: 5svw;
      img{
        width:95svw;
        aspect-ratio: 1 / 0.635;
        object-fit:cover;
        object-position: left bottom;
      }

    }
    #job {
      .job-description {
        div:nth-last-of-type(1){
          img:nth-last-of-type(1){display: block;}
        }
      }
      .flow {
        background:url(./image/re-job-flow_img2.webp),linear-gradient(0deg, #59b1c9 0%,  #59b1c9 30%,#ffffff93 90%, #ffffff00 80%);
        background-position: center bottom;
        background-size: contain;
        background-repeat: no-repeat;
        mix-blend-mode: multiply;
        .flow-entry {
          position: relative;
          display: block;
          padding: 0;
          background-image: url(./image/re-job-flowv.webp);
          background-size: contain;
          margin-block-end: 10rem;

        }
      } 
    }
    .evMessage {
      .ec_in {
        h2{text-align: center;margin-block-end: 1em;}
        display: block;
        grid-template-columns: 1fr 1fr;
        gap: clamp(2rem, 2rem + 0vw, 2rem);
        margin-block-end: 3rem;
        position: relative;
        >div{padding-inline: 2rem;}
      }
    }

    .knowhow,.focus,.safty{
      h2{
      background-size: 60px;
      padding-inline-start:3rem;
    }
  
      h3{font-size:24px;line-height: 1.4;}
      h3::before{content: unset;}
      >div{
        background-color: #fff;
        padding-block: 3rem 1.5rem;
      }
      .fx{
        flex-direction: column;
      }
      .fx:nth-child(odd){
        flex-direction: column;
      }
    }

      /* INTER VIEW */
  .inview-list{
    padding-block:calc(var(--_asai_InHeight) / 2);
  }
  .personList{
    padding-block:3rem;
    margin-inline: 1rem;
  }
  .as-pickup-child-pages-list{
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

    /* INTERVIEW 01 - 05 */
    .interview-header.fx{
      justify-content: center;
      flex-direction: column;
      >div {
        position: relative;
        align-self: flex-start;
        padding-inline-start: 2.4em;
      }
      .fx{
        margin-block-end: 2rem;
      }
      h2{
        line-height: 1.8;
        margin-block-end: 1em;
      }      
      figure{padding-inline-start: 0;}
    }
    .inteviewContent{
      h4{
        line-height: 1.7;
      }
    }

  }
}

@media(1024px <= width) {
  #outline.front_section {
    padding-block: 0 clamp(7.5rem, -3.256rem + 16.81vw, 200px);
  }
  #header-image{
    >img{width: 100%;aspect-ratio: 1 / .34;}
  }
  /* 採用ページTOP以外 */
  body:not(.page-id-27) {
    #job {
      .job-description {
        background-color: var(--_asai_color3);
        h2, h2::after {
          color: #fff;
        }
        h2::after {
          content: "JOB DESCRIPTION";
        }
        div:nth-last-of-type(1){
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(119px  , 1fr));
          gap:0;
          img{display: block;margin: 0;padding: 0;width:100%;object-fit: cover;height: auto;}
          img:nth-last-of-type(1){display: none;}
        }
      }

      .modelcase {
        div.model {
          padding: 3rem;
          >div:nth-of-type(1) {
            display: flex;
            padding-inline: clamp(1rem, -7.605rem + 13.45vw, 5rem);
            width: 100%;
            column-gap:clamp(2rem, 1rem + 4.27vw, 5rem);
            padding-block-end: 2rem;
            border-bottom: 1px solid var(--_asai_color1);

            >div:nth-of-type(1) {
              h3{margin-block-end: 1em;;}
            }
            >div:nth-of-type(2) {
              border: none;
              display: grid;
              column-gap:5rem;
              grid-template-columns: repeat(2, auto);
              grid-template-rows: repeat(2, auto);
              align-items: start;
              align-content: center;
              p{height: 90px;}
              p:nth-of-type(1) {
                grid-column: 1/2;
                grid-row: 1/2;
                align-self: center;
              }
              p:nth-of-type(2) {
                grid-column: 1/2;
                grid-row: 2/3;
                align-self: start;
              }
              div{
                grid-column: 2/3;
                grid-row: 1/3;
              }
            }          
          }
          >div:nth-last-of-type(1) {
            padding-inline: clamp(0rem, -10.756rem + 16.81vw, 5rem);
            font-weight: 600;
            width: 92%;
            display: flex;
            justify-content: space-between;
            gap: 5rem;
            align-items: flex-start;
          }
        }
      }
    }
  }
}



@media(1440px <= width){
  #keyMessage{
    div.grid{
      width: clamp(87.5rem, 74.038rem + 15.38vw, 1480px);
      /* grid-template-columns: .7fr .3fr; */

      >div:nth-of-type(1){
        justify-self: center;
        margin-block-start: 6rem;
      }
    }
    h1{
    margin-block-end:1em;
    }
    h1 + div{
      margin-block-end: 3rem;
    }
  }

  body:not(.page-id-27){
    /* INTERVIEW 01 - 05 */
    .interview-header.fx{
      position: relative;
      justify-content: flex-end;
      width: 100%;
      gap:clamp(0rem, -204rem + 226.67vw, 136px);
    }
  }

}

@media(1500px <= width){
  #interview {
    .as-pickup-child-pages-list,.grid {
        width: calc(var(--_asai_contentRFW) + 4rem);
    }
    .as-pickup-child-pages-list{
      padding-inline:7rem;
      gap:6.5rem;
    }
  }
  #outline{
    .grid{
      width: calc(var(--_asai_contentRFW) + 6rem);
    }
  }

}

@media(2000px <= width){
  body:not(.page-id-27) {
    #recruitIn {
        /* padding-block-end: 19.2px; */
        overflow-x: unset;
    position: relative;
    margin-inline: 5svw 0;
    top: 0;
    }

    #header-image {
      width: 100%;
      img{margin-inline-start: 5svw;
        width:calc(100% - 5svw);
        object-fit: cover;
        object-position: left bottom;
      }
    }
}
}