/*
Theme Name: setosaisekiwp
Description: 瀬戸砕石株式会社WP
Author:
Version: 1.00
License:
License URI:
Text Domain:
Tested up to: 6.8
Requires PHP: 8.1
*/
/* Josh's Custom CSS Reset --- more customized */
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}body{line-height:1.0;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:inline-block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;font-size:100%}#root,#__next{isolation:isolate}

/* Basic settings */
br {letter-spacing:0;}
ul, li {list-style:none;}
img, a img {border:0; text-decoration:none;}
mark {background:#ff0; color:#000;}
b, strong {font-weight:bold;}
table {border-collapse:collapse; border-spacing:0;}

/* Base Set */
html {
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%;
font-size: 62.5%;
}
body {
color:#222;
font-family: -apple-system, BlinkMacSystemFont, Roboto, Arial, 'Noto Sans JP', sans-serif;
font-size: 1.6rem;
line-height:1.0;
}
a {
background-color:transparent;
outline:0;
text-decoration:none;
transition: all .5s;
}
a:link    {color: var(--col_base)}
a:visited {color: var(--col_base)}
a:hover   {color:#ccc;}
a:active  {color:#99ccff;}

:root{
  --col_white: #fff;
  --col_gray: #ddd;
  --col_red: #c00000;
  --col_black: #101010;
  --col_black2: #222;
  --col_base: #0f100f;
  --col_hover: #ff8c00;
  --col_hover2: #20b5ae;
  --btn_base: #005d82;
  --bdr_base: #e5e5e5;
}

/* -------------------------------------------------------
---------------------------------------------------------- */
html,
body {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.container{
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.cp {
  padding: 1em 0;
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: .1rem;
  text-align: center;
}

h1, h2, h3, h4 {
  font-weight: normal;
}
.list_disc li {
  list-style: disc;
}
ol.decimal {
  padding-left: 2em;
}
ol.decimal li {
  list-style: decimal;
}
.img_box img {
  width: auto;
  max-width: 100%;
  height: auto;
}

/* button */
a.btn{
  position: relative;
  display: inline-block;
  padding: 1.5rem 5rem;
  background-color: var(--btn_base);
  border: 1px solid var(--btn_base);
  color: #fff;
  font-size: 90%;
  letter-spacing: .1em;
  vertical-align: middle;
}
a.btn2{
  position: relative;
  display: inline-block;
  padding: 1.5rem 5rem;
  background-color: #fff;
  border: 1px solid var(--btn_base);
  color: var(--btn_base);
  font-size: 90%;
  letter-spacing: .1em;
  vertical-align: middle;
}
a.btn::before,
a.btn::after,
a.btn2::before,
a.btn2::after{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
a.btn:hover{
  background-color: #fff;
  color: var(--btn_base);
}
a.btn2:hover{
  background-color: var(--btn_base);
  color: #fff;
}
.arrow::before{
  right: 24px;
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
a.btn2.arrow::before{
  border-top: 1px solid var(--btn_base);
  border-right: 1px solid var(--btn_base);
}



/* -------------------------------------------------------
Layout
---------------------------------------------------------- */
/* header -------------------------- */
.header{
  width: 100%;
  background-color: #fff;
  z-index: 999;
}
  @media screen and (min-width:1024px){
    body.home .header{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(255,255,255,.3);
      transition: background-color 0.3s ease;
    }
    body.home .header.scroll-active {
      background-color: rgba(255, 255, 255, 1); /* スクロール中は100%不透明 */
      box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
    }
  }



.header_inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100px;
  /*padding-right: 2rem;*/
  padding-left: 4rem;
}
.header_inner .logo img{
  width: auto;
  height: 48px;
}
  @media screen and (max-width:1023px){
    .header{
      position: fixed;
      top: 0;
      left: 0;
    }
    .header_inner{
      padding-right: 1rem;
      padding-left: 1rem;
    }
    .header_inner .logo img{
      width: auto;
      height: 32px;
    }
  }
.header_inner ul{
  margin-top: 6rem;
}
.header ul li + li{
  margin-top: 2em;
}
  @media screen and (min-width:1024px){
    .header_inner ul{
      display: flex;
      margin-top: 0;
    }
    .header ul li + li{
      margin-top: 0;
    }
    .header ul li{
      font-size: 1.4rem;
      font-weight: 400;
    }
    .header ul li::after{
      content: "／";
      margin-right: 1rem;
      padding-left: 1rem;
    }
    .header ul li:last-child:after{
      content: "";
      margin-right: 0;
      padding-left: 0;
    }
  }

.header a{
  color: var(--col_base);
}
.header a:hover{
  color: var(--col_hover2);
}
  @media screen and (min-width:1024px){
    .navbar{
      display: none;
    }
  }
  @media screen and (max-width:1023px){
    .nav_menu{
      font-weight: 700;
    }
  }

  @media screen and (min-width:1024px){
    .nav_inner{
      display: flex;
      align-items: center;
    }
  }

.head_mail{
  width: 100px;
  height: 100px;
  margin-top: 0;
  margin-left: 3rem;
}
.head_mail a{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--btn_base);
  color: #fff;
}
.head_mail img{
  display: inline-block;
  width: 3rem;
  height: auto;
}
.head_mail p{
  margin-top: .5rem;
  font-size: 1.2rem;
}
.head_mail a:hover{
  background-color: #0f100f;
  color: #fff;
}
  @media screen and (max-width:1023px){
    .head_mail{
      display: none;
    }
    .head_contact_mob{
      margin-top: 5rem;
      text-align: center;
    }
    .head_contact_mob p{
      margin-bottom: 1.5rem;
    }
    .head_contact_mob .mob_contact_btn + .mob_contact_btn{
      margin-top: 1rem;
    }
    .head_contact_mob .mob_contact_btn a{
      display: flex;
      align-items: center;
      justify-content: center;
      width: clamp(200px, 80%, 400px);
      height: 48px;
      margin: 0 auto;
      background-color: var(--btn_base);
      color: var(--col_white);
    }
    .mob_contact_btn a .icon{
      display: inline-block;
      margin-right: 1rem;
    }
    .mob_contact_btn a .icon img{
      width: auto;
      height: 18px;
    }
  }

.sns_area{
  display: flex;
  align-items: center;
  margin-top: 8rem;
}
  @media screen and (min-width:1024px){
    .sns_area{
      margin-top: 0;
      margin-left: 4rem;
    }
  }
.sns_area .sns_icon{
  width: 4rem;
}
.sns_area .sns_icon + .sns_icon{
  margin-left: 1rem;
}
.sns_area .sns_icon a{
  display: block;
  width: 100%;
  height: 4rem;
  padding: 1rem;
  background-color: #111;
  border-radius: .3rem;
}
.sns_area .sns_icon a img{
  width: 100%;
  height: auto;
}
  @media screen and (max-width:834px){
    .sns_area{
      justify-content: center;
    }
    .sns_area .sns_icon + .sns_icon{
      margin-left: 2rem;
    }
  }
  @media screen and (max-width:960px) and (orientation: landscape){
    .sns_area{
      justify-content: center;
    }
    .sns_area .sns_icon + .sns_icon{
      margin-left: 2rem;
    }
  }

/* -------------------------------
FV
------------------------------- */
.fv_section{
  position: relative;
  margin-top: 40px;
  padding: 80px 0;
}

.fv_bg_base{
  width: calc(100%-4vw);
  height: 580px;
  margin: 40px 2vw 0;
  overflow: hidden;
}
.fv_bg{
  transform: scale(1.1);
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fv_bg.animate{
  animation: zoomOutBg 5s ease-out forwards;
}

@keyframes zoomOutBg {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.fv_img_wrap{
  position: absolute;
  top: 120px;
  right: 0;
  width: 80%;
  max-width: 1200px;
  display: flex;
  /*justify-content: space-between;*/
  column-gap: 20px;
  /*flex-wrap: wrap;*/
}

.fv_img_box{
  width: 32%;
  height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

.fv1{transform: translateY(-40px);}
.fv2{transform: translateY(50px);}
.fv3{transform: translateY(-160px);}

.fv_img_box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv_img_box {
  opacity: 0;
  transition: none;
}

/* アニメーション用クラス */
.fv1.animate {animation: fvFadeUp1 3s ease-out forwards;}
.fv2.animate {animation: fvFadeDown 3s ease-out forwards;}
.fv3.animate {animation: fvFadeUp2 3s ease-out forwards;}

@keyframes fvFadeUp1 {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-40px);
  }
}

@keyframes fvFadeDown {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(50px);
  }
}

@keyframes fvFadeUp2 {
  0% {
    opacity: 0;
    transform: translateY(-120px);
  }
  100% {
    opacity: 1;
    transform: translateY(-140px);
  }
}

.fv_catch{
  position: absolute;
  top: 45%;
  left: 8rem;
  z-index: 99;
}

.catch_txt {
  font-size: 3.4vw;
  color: #000;
  font-weight: 700;
  font-family: "Zen Old Mincho", serif;
  text-shadow: 0 0 10px #fff;
  text-shadow: 1px 1px 6px rgba(255, 255, 255, 0.7),
               -1px -1px 6px rgba(255, 255, 255, 0.7),
               1px -1px 6px rgba(255, 255, 255, 0.7),
               -1px 1px 6px rgba(255, 255, 255, 0.7);
  visibility: hidden;
}

/* 各文字の初期状態 */
.catch_txt .char {
  display: inline-block;
  opacity: 0;
  visibility: hidden;
}

.fv_catch .deco{
  position: absolute;
  bottom: -5vw;
  left: 2rem;
  z-index: 100;
}
.fv_catch .deco p{
  display: inline-block;
  transform: rotate(-5deg);
  white-space: nowrap;
  color: #08c2b5;
  font-size: 4vw;
  font-family: 'Ms Madi', serif;
  text-shadow: 0 0 10px #fff;
  text-shadow: 1px 1px 6px rgba(255, 255, 255, 0.7),
               -1px -1px 6px rgba(255, 255, 255, 0.7),
               1px -1px 6px rgba(255, 255, 255, 0.7),
               -1px 1px 6px rgba(255, 255, 255, 0.7);
}

  @media screen and (min-width:600px) and (max-width:1023px){
    .catch_txt{
      font-size: 4rem;
    }
    .fv_catch .deco p{
      font-size: 4rem;
    }
  }

/* 一文字ずつフェードイン */
@keyframes fadeInText {
  0% {
    opacity: 0;
    visibility: hidden;
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    visibility: visible;
    filter: blur(0);
  }
}

/* deco (Crashed Stone) フェード+ブラー */
.deco p {
  filter: blur(10px);
  opacity: 0;
  transition: all 1s ease-in-out;
}

.deco.visible p {
  filter: blur(0);
  opacity: 1;
}


  @media screen and (max-width:599px){
    .fv_wrap-mob{
      position: relative;
      width: 100%;
      height: 80vh;
      max-height: 680px;
    }
    .fv_wrap_bg{
      position: absolute;
      bottom: 0;
      left: 0;
      width: calc(100%-4rem);
      height: 65vh;
      margin-right: 2rem;
      margin-left: 2rem;
      overflow: hidden;
    }
    .fv_wrap_bg_img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .fv_catch-mob{
      position: absolute;
      top: 320px;
      width: 100%;
      text-align: center;
      z-index: 10;
    }
    .fv_catch-mob .catch_txt-mob{
      color: #000;
      font-size: 3.6rem;
      font-weight: 700;
      font-family: "Zen Old Mincho", serif;
      text-shadow: 0 0 10px #fff;
      text-shadow: 1px 1px 6px rgba(255, 255, 255, 0.7),
                  -1px -1px 6px rgba(255, 255, 255, 0.7),
                  1px -1px 6px rgba(255, 255, 255, 0.7),
                  -1px 1px 6px rgba(255, 255, 255, 0.7);
    }
    .fv_catch-mob .deco-mob{
      margin-top: 1rem;
    }
    .fv_catch-mob .deco-mob p{
      display: inline-block;
      transform: rotate(-5deg);
      white-space: nowrap;
      color: #08c2b5;
      font-size: 4rem;
      font-family: 'Ms Madi', serif;
      text-shadow: 0 0 10px #fff;
      text-shadow: 1px 1px 6px rgba(255, 255, 255, 0.7),
                  -1px -1px 6px rgba(255, 255, 255, 0.7),
                  1px -1px 6px rgba(255, 255, 255, 0.7),
                  -1px 1px 6px rgba(255, 255, 255, 0.7);
    }

    .fv_img_wrap-mob1{
      position: absolute;
      top: 80px;
      left: 25%;
      width: 75%;
      height: 180px;
      overflow: hidden;
    }
    .fv_img_wrap-mob2{
      position: absolute;
      bottom: 5%;
      right: 20%;
      width: 80%;
      height: 180px;
      overflow: hidden;
    }
    .fv_img_wrap-mob3{
      position: absolute;
      bottom: -4rem;
      left: 15%;
      width: 85%;
      height: 180px;
      overflow: hidden;
    }
  }






.fv_greeting{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-top: 8rem;
  padding-bottom: 10rem;
}
.fv_greeting .greeting_img{
  width: 36%;
}
.greeting_img_wrap{
  position: relative;
  width: 100%;
}
.fv_greeting .greeting_img_wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  --tri-size2: clamp(30px, 4vw, 50px);
  width: 0;
  height: 0;
  border-right: var(--tri-size2) solid #fff;
  border-top: var(--tri-size2) solid transparent;
  z-index: 2;
}
.fv_greeting .greeting_img .img_box{
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.fv_greeting .greeting_inner{
  position: relative;
  width: 60%;
  padding-top: 4rem;
  padding-right: 8rem;
}
.fv_greeting .greeting_inner p{
  line-height: 2;
}
  @media screen and (max-width:599px){
    .fv_greeting{
      display: block;
      margin-left: 0;
      padding-bottom: 8rem;
      background: none;
    }
    .fv_greeting::after{
      background-color: inherit;
    }
    .fv_greeting .greeting_inner,
    .fv_greeting .greeting_img{
      width: 100%;
    }
    .fv_greeting .greeting_inner{
      padding: 0 2rem;
    }
    .fv_greeting .greeting_inner p{
      font-size: 1.4rem;
    }
    .fv_greeting .greeting_img{
      margin-top: 4rem;
      padding-right: 4rem;
    }
  }
  @media screen and (min-width:600px) and (max-width:1023px){
    .fv_greeting{
      margin-top: 0;
      padding-bottom: 8rem;
    }
    .fv_greeting .greeting_inner{
      padding-right: 3rem;
    }
    .fv_greeting .greeting_inner p{
      font-size: 1.4rem;
    }
  }


.fv_btn{
  margin-top: 3rem;
  padding-right: 4rem;
  text-align: center;
}
  @media screen and (max-width:599px){
    .fv_btn{
      padding-right: 0;
      text-align: center;
    }
  }
.fv_btn a{
  position: relative;
  display: inline-block;
  padding: 2rem 5rem;
  border: 1px solid var(--btn_base);
  color: var(--btn_base);
  font-size: 1.4rem;
  letter-spacing: .1em;
  text-decoration: none;
}
.fv_btn a::before,
.fv_btn a::after{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.fv_btn a.arrow::before{
  border-color: var(--btn_base);
}
.fv_btn a:hover{
  background-color: var(--btn_base);
  border-color: var(--btn_base);
  color: #fff;
}

  @media screen and (max-width:599px){
    .fv_btn{
      text-align: center;
    }
  }

/* -------------------------------
TOP main
------------------------------- */
.top_section{
  padding-top: 12rem;
  padding-bottom: 12rem;
}
.top_section.gr{
  background-color: #faf9f7;
}
.top_section .biz_inner_flx,
.top_section .news_inner_flx{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-right: 4rem;
  padding-left: 4rem;
}
.biz_inner_flx .top_section_title,
.news_inner_flx .top_section_title{
  width: 30%;
  max-width: 40rem;
}
.biz_inner_flx .top_content_area,
.news_inner_flx .top_content_area{
  flex: 1;
  padding-left: 4rem;
  line-height: 1.8;
}
  @media screen and (max-width:599px){
    .top_section{
      padding-top: 8rem;
      padding-bottom: 8rem;
    }
    .top_section .biz_inner_flx,
    .top_section .news_inner_flx{
      display: block;
      padding-right: 1.5rem;
      padding-left: 1.5rem;
    }
    .biz_inner_flx .top_section_title,
    .news_inner_flx .top_section_title{
      width: 100%;
    }
    .biz_inner_flx .top_content_area,
    .news_inner_flx .top_content_area{
      width: 100%;
      padding-left: 0;
    }
  }
  @media screen and (min-width:600px) and (max-width:1023px){
    .biz_inner_flx a.btn,
    .biz_inner_flx a.btn2{
      padding-right: 4rem;
      padding-left: 4rem;
    }
  }

.top_section_title .title_block{
  position: relative;
}
.top_section_title .title_block h2{
  color: #111;
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.sdgs_inner_flx .top_section_title .title_block h2{
  letter-spacing: normal;
}

.top_section_title .title_block .en{
  margin-top: 2rem;
  padding-left: 1rem;
  transform: rotate(-10deg);
  transform-origin: left bottom;
  color: #08c2b5;
  font-size: 4rem;
  font-family: 'Ms Madi', serif;
}

  @media screen and (max-width:599px){
    .top_section_title .title_block{
      text-align: center;
    }
    .top_section_title .title_block h2{
      font-size: 3rem;
    }
    .top_section_title .title_block .en{
      margin-top: 3rem;
      padding-left: 0;
      font-size: 3rem;
    }
  }


/* top business */
.top_section.biz_container{
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding-top: 20rem;
  padding-bottom: 20rem;
  background-image: url(images/bg_tri_1.png), url(images/bg_tri_2.png), url(images/bg1.jpg);
  background-repeat: no-repeat;
  background-position: left top, left bottom, center;
  background-size: auto, auto, cover;
}

.biz_inner_flx .top_content_area h3{
  margin-bottom: 1em;
  font-size: 3rem;
  font-weight: 700;
}
  @media screen and (max-width:599px){
    .biz_inner_flx .top_content_area h3{
      font-size: 2.4rem;
    }
  }

.top_content_area .btn_block{
  display: flex;
  justify-content: flex-end;
  margin-top: 4rem;
}
.top_content_area .btn_block > .btn_box + .btn_box{
  margin-left: 1rem;
}
  @media screen and (min-width:600px) and (max-width:1080px){
    .top_content_area .btn_block{
      flex-wrap: wrap;
    }
    .top_content_area .btn_block .btn_box{
      margin-bottom: 1rem;
    }
  }

  @media screen and (max-width:599px){
    .top_section.biz_container{
      padding-top: 10rem;
      padding-bottom: 15rem;
    }
    .top_content_area .btn_block{
      flex-wrap: wrap;
      justify-content: center;
    }
    .top_content_area .btn_block > .btn_box + .btn_box{
      margin-top: 1rem;
      margin-left: 0;
    }
    .top_section.biz_container .btn_block .btn_box a{
      width: 280px;
      text-align: center;
    }
  }

body.modal-open {
  overflow: hidden;
}
.modal{
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
}
.modal_wrap{
  width: 90%;
  height: 80%;
  margin: 10% auto;
}
.modal-content{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.close{
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}


/* top entry */
.top_content_area .entry_list{
  border-top: 1px solid var(--bdr_base);
}
.top_content_area .entry_list li{
  padding: 3rem 0;
  border-bottom: 1px solid var(--bdr_base);
}
.top_content_area .entry_list li a{
  color: #111;
}
.top_content_area .entry_list li a:hover{
  color: var(--col_hover);
}
.top_content_area .entry_list li .post_title{
  font-size: 1.8rem;
}

.top_news_btn_area{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-top: 4rem;
}
.related_link img{
  width: auto;
  height: 58px;
  border: 1px solid #ccc;
}
  @media screen and (max-width:599px){
    .top_news_btn_area{
      display: block;
    }
    .news_btn,
    .related_link{
      text-align: center;
    }
    .related_link{
      margin-top: 2rem;
    }
    .related_link img{
      width: auto;
      height: 48px;
    }
  }
  @media screen and (min-width:600px) and (max-width:1080px){
    .news_btn a.btn{
      padding-right: 4rem;
      padding-left: 2rem;
    }
    .related_link img{
      width: auto;
      height: 40px;
    }
  }

/* top job */
.top_section.job{
  margin-right: 1.5vw;
  margin-left: 1.5vw;
  background: url(images/img03.jpg) no-repeat center/cover;
}
.top_section .job_inner_flx{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-right: 4rem;
  padding-left: 4rem;
}
.job_inner_flx .top_section_title{
  width: 30%;
  max-width: 40rem;
}
.job_inner_flx .top_section_title h2,
.job_inner_flx .top_section_title .en{
  color: #fff;
}
.job_inner_flx .top_content_area{
  flex: 1;
  padding-left: 8rem;
  color: #fff;
  line-height: 1.8;
}

.btn_block.top_recruit{
  margin-top: 4rem;
  line-height: 1.8;
}
.top_recruit a.btn{
  position: relative;
  display: inline-block;
  padding: 2rem 5rem;
  background-color: inherit;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
}
.top_recruit a.btn:before,
.top_recruit a.btn::after{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}
.top_recruit a.btn:hover{
  background-color: var(--btn_base);
  border-color: var(--btn_base);
}
  @media screen and (max-width:599px){
    .top_section .job_inner_flx{
      display: block;
      padding-right: 1.5rem;
      padding-left: 1.5rem;
    }
    .job_inner_flx .top_section_title,
    .job_inner_flx .top_content_area{
      width: 100%;
      padding: 0;
    }
    .job_inner_flx .top_content_area{
      margin-top: 4rem;
      text-align: center;
    }
    .job_inner_flx .top_content_area .img_block{
      margin-top: 4rem;
    }
    .btn_block.top_recruit{
      margin-top: 0;
      text-align: center;
    }
  }

.top_content_area .img_block{
  display: flex;
  justify-content: flex-end;
  margin-top: 4rem;
  padding-right: 4rem;
}
.job_inner_flx .top_content_area .img_block .job_img{
  width: 400px;
  height: auto;
}
  @media screen and (max-width:599px){
    .top_content_area .btn_block{
      justify-content: center;
    }
    .top_content_area .img_block{
      padding-right: 0;
    }
  }

/* top SDGs */
.top_section.sdgs{
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
}
.top_section .sdgs_inner_flx{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-right: 4rem;
  padding-left: 4rem;
}
.sdgs_inner_flx .top_section_title{
  width: 44%;
}
.sdgs_inner_flx .top_content_area{
  flex: 1;
  padding-left: 8rem;
  line-height: 1.8;
}
.sdgs_inner_flx .top_section_title .top_sdgs_desc{
  margin-top: 5rem;
  line-height: 1.8;
}
.sdgs_inner_flx .top_section_title .top_sdgs_desc .btn_block{
  margin-top: 4rem;
}
.img_waku_ds{
  border: 6px solid white;
  /*transform: rotate(-2deg);*/
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
  display: inline-block;
}
  @media screen and (max-width:599px){
    .top_section.sdgs{
      padding-top: 0;
    }
    .top_section .sdgs_inner_flx{
      display: block;
      padding-right: 1.5rem;
      padding-left: 1.5rem;
    }
    .sdgs_inner_flx .top_section_title,
    .sdgs_inner_flx .top_content_area{
      width: 100%;
      padding: 0;
    }
    .sdgs_inner_flx .top_content_area{
      margin-top: 4rem;
    }
    .sdgs_inner_flx .top_section_title .top_sdgs_desc{
      margin-top: 0;
    }
    .sdgs_inner_flx .top_section_title .top_sdgs_desc .btn_block{
      text-align: center;
    }
  }

/* -------------------------------
PAGE
------------------------------- */
.page_header{
  background-color: #fff;
}
.pagepath_wrap{
  width: 100%;
  padding: 0 clamp(2rem, 5vw, 8rem);
  border-top: 1px solid var(--bdr_base);
}
  @media screen and (max-width:1023px){
    .pagepath_wrap{
      margin-top: 6rem;
    }
  }
.page_path{
  display: flex;
  justify-content: flex-end;
  padding-top: 2rem;
}
.page_path li{
  flex-shrink: 0;
  color: #999;
  font-size: 1.4rem;
}
.page_path li::after{
  content: ">";
  margin-right: 1em;
  padding-left: 1em;
  color: #999;
}
.page_path li:last-child:after{
  content: "";
  margin-right: 0;
  padding-left: 0;
}
.page_path li a{
  color: var(--col_base);
  border-bottom: 1px solid var(--col_base);
}

.pagetitle_wrap{
  width: 100%;
  padding: 6rem clamp(2rem, 5vw, 8rem) 4rem;
  border-bottom: 1px solid var(--bdr_base);
}
.page_title h1{
  color: #111;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 700;
}
.page_title h1.ls1{
  letter-spacing: .1em;
}
.page_title .en{
  display: inline-block;
  margin-top: 2rem;
  padding-left: 1rem;
  transform: rotate(-10deg);
  transform-origin: left bottom;
  color: var(--col_hover);
  font-size: clamp(3rem, 5vw, 5rem);
  font-family: 'Ms Madi', serif;
}

/* 汎用body */
.main{
  flex: 1 0 auto;
  background-color: #faf9f7;
}
.section_body_m{
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 6rem);
}
.section_body_s{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 6rem);
}
  @media screen and (max-width:599px){
    .section_body_m,
    .section_body_s{
      padding-right: 1.5rem;
      padding-left: 1.5rem;
    }
  }

.page_contents_body{
  padding-bottom: 10rem;
}
.page_contents_body.aboutus{
  padding-bottom: 0;
}
.page_contents_body section{
  margin-top: clamp(6rem, 8vw, 14rem);
}

/* PAGE business -------------------------- */
.biz_photo_wrap{
  margin-bottom: 4rem;
}
.biz_table table{
  width: 100%;
  border: 1px solid #ccc;
}
.biz_table th{
  width: 25%;
  background-color: #eee;
  border-right: 1px solid #ccc;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}
.biz_table td{
  width: 75%;
  padding: 3em;
  background-color: #fff;
  font-weight: 700;
  line-height: 2;
}
.biz_table td span{
  display: inline-block;
}
.biz_table td span::after{
  content: "／";
  margin-right: 1rem;
  padding-left: 1rem;
  font-weight: 400;
}
.biz_table td span:last-child:after{
  content: "";
  margin-right: 0;
  padding-left: 0;
}
.biz_img_wrap{
  margin-top: 4rem;
  margin-bottom: 4rem;
}
.biz_img_wrap ul{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1rem;
}
.biz_img_wrap ul li{
  aspect-ratio: 4/3;
  overflow: hidden;
}
.biz_img_wrap ul li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  @media screen and (max-width:599px){
    .biz_table tr,
    .biz_table th,
    .biz_table td{
      display: block;
    }
    .biz_table th{
      padding: 1.5rem 0;
      border-right: 0;
    }
    .biz_table td{
      padding: 1.5em;
    }
    .biz_table th,
    .biz_table td{
      width: 100%;
    }
    .biz_img_wrap ul{
      grid-template-columns: repeat(2, 1fr);
      row-gap: 1rem;
    }
  }

.for_individuals_container{
  background-color: #fff;
  /*border: 3px solid #ddd;*/
}
.individuals_wrap{
  display: flex;
}
.individuals_wrap .desc{
  flex: 1;
  padding-top: 4rem;
  padding-bottom: 3rem;
  padding-left: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.individuals_wrap .img_block{
  width: 280px;
  overflow: hidden;
}
.individuals_wrap .img_block img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.individuals_wrap .desc .txt{
  padding-left: 2rem;
}
.individuals_wrap .desc h2{
  color: #db2929;
  font-size: 3.2rem;
  font-weight: 700;
}
.individuals_wrap .desc p{
  margin-top: 2rem;
  font-size: 1.8rem;
  line-height: 2;
}
.individuals_wrap .desc .telnum{
  margin-top: 2rem;
}
.individuals_wrap .desc .telnum a{
  display: flex;
  align-items: center;
  font-size: 3.2rem;
  font-weight: 700;
}
.individuals_wrap .desc .telnum img{
  display: inline-block;
  width: auto;
  height: 3.2rem;
  margin-right: 1rem;
}
.individuals_img{
  display: flex;
  margin-top: 4rem;
}
.individuals_img li{
  width: auto;
  height: 160px;
  overflow: hidden;
}
.individuals_img li + li{
  margin-left: .5rem;
}
.individuals_img li img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  @media screen and (max-width:599px){
    .individuals_wrap{
      display: block;
    }
    .individuals_wrap .desc{
      padding: 4rem 2rem 2rem;
    }
    .individuals_wrap .desc .txt{
      padding-left: 0;
    }
    .individuals_wrap .desc h2{
      font-size: 2.4rem;
    }
    .individuals_wrap .desc p{
      font-size: 1.6rem;
    }
    .individuals_wrap .desc .telnum a{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2rem;
      background-color: #eee;
      font-size: 2.4rem;
    }
    .individuals_wrap .desc .telnum img{
      width: auto;
      height: 2.4rem;
    }
    .individuals_img{
      display: block;
    }
    .individuals_img li{
      height: auto;
    }
    .individuals_img li + li{
      margin-top: 1rem;
      margin-left: 0;
    }
    .individuals_wrap .img_block{
      width: 100%;
      padding-right: 2rem;
      padding-bottom: 2rem;
      padding-left: 2rem;
    }
  }

/* PAGE aboutus -------------------------- */
.greeting .greeting_flx{
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding-bottom: 4rem;
}
.greeting .greeting_flx .desc{
  width: 60%;
  line-height: 2;
  z-index: 1;
}
.greeting .greeting_flx .desc h2{
  margin-bottom: 2rem;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.greeting .greeting_flx .desc .sign{
  display: flex;
  align-items: first baseline;
  justify-content: flex-end;
  margin-top: 3rem;
  font-size: 2rem;
}
.greeting .greeting_flx .desc .sign p{
  margin-right: 1em;
  font-size: 1.4rem;
}
.greeting .greeting_flx .img_block{
  position: absolute;
  left: 0;
  top: 0;
  width: 36%;
  z-index: 0;
}
.greeting .greeting_flx .img_block img{
  width: 100%;
  height: auto;
  object-fit: cover;
}
  @media screen and (max-width:599px){
    .greeting .greeting_flx{
      display: block;
      padding-top: 0;
      padding-bottom: 0;
    }
    .greeting .greeting_flx .desc,
    .greeting .greeting_flx .img_block{
      position: relative;
      width: 100%;
    }
    .greeting .greeting_flx .img_block{
      margin-top: 3rem;
    }
    .greeting .greeting_flx .desc h2{
      font-size: 2.4rem;
    }
    .greeting .greeting_flx .desc{
      font-size: 1.4rem;
    }
  }
  @media screen and (min-width:600px) and (max-width:1023px){
    .greeting .greeting_flx .img_block{
      left: 0;
      top: auto;
      bottom: 8rem;
    }
  }

.rinen_wrap{
  position: relative;
  display: flex;
  justify-content: space-between;
}
.rinen_wrap .desc{
  width: 60%;
  line-height: 2;
  z-index: 1;
}
.rinen_wrap .desc h2{
  margin-bottom: 2rem;
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
}
.rinen_wrap .desc ul{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.rinen_wrap .desc li{
  color: #005d82;
  font-size: clamp(3.6rem, 3.2vw, 6rem);
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
}
.rinen_wrap .desc li:nth-child(1){
  margin-left: -2em;
}
.rinen_wrap .desc li:nth-child(2){
  margin-left: 0;
}
.rinen_wrap .desc li:nth-child(3){
  margin-left: 2em;
}
.rinen_wrap .img_block{
  width: 36%;
}
.rinen_lead{
  display: flex;
  align-items: center;
  margin-top: 2rem;
}
.rinen_lead .chara_img{
  width: 110px;
}
.rinen_lead .chara_img2{
  width: 100px;
}
.rinen_lead p{
  flex: 1;
  padding-right: 2em;
  padding-left: 2em;
}

  @media screen and (max-width:599px){
    .rinen_wrap{
      display: block;
    }
    .rinen_wrap .desc,
    .rinen_wrap .img_block{
      width: 100%;
    }
    .rinen_wrap .img_block{
      margin-top: 3rem;
    }
    .rinen_wrap .desc h2{
      font-size: 2.4rem;
      text-align: center;
    }
    .rinen_wrap .desc ul{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 2rem;
      padding-bottom: 2rem;
      padding-left: 0;
      background-color: #fff;
    }
    .rinen_wrap .desc li:nth-child(1){
      margin-left: -1em;
    }
    .rinen_wrap .desc li:nth-child(2){
      margin-left: 0;
    }
    .rinen_wrap .desc li:nth-child(3){
      margin-left: 1em;
    }
    .rinen_lead{
      display: block;
    }
    .rinen_lead p{
      padding-left: 0;
    }
    .rinen_lead .chara_img2{
      width: 100%;
      text-align: right;
    }
    .rinen_lead .chara_img2 img{
      width: 100px;
      height: auto;
    }
  }


.company_overview,
.fukurikosei,
.syakaikoken,
.access_section{
  display: flex;
  justify-content: space-between;
}
.company_overview .overview_title,
.fukurikosei .fukurikosei_title,
.syakaikoken .koken_title,
.access_section .access_title{
  width: 30%;
  max-width: 36rem;
}
.company_overview .overview_title h2,
.fukurikosei .fukurikosei_title h2,
.syakaikoken .koken_title h2,
.access_section .access_title h2{
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.company_overview .overview_wrap,
.fukurikosei .fukurikosei_wrap,
.syakaikoken .koken_wrap,
.access_section .access_wrap{
  flex: 1;
}
.fukurikosei_wrap,
.koken_wrap{
  line-height: 2;
}

.fukurikosei_cantainer_bg,
.page_contents_body.aboutus .access_container_bg{
  padding-top: 10rem;
  padding-bottom: 10rem;
  background-color: #fff;
}

  @media screen and (max-width:599px){
    .company_overview,
    .fukurikosei,
    .syakaikoken,
    .access_section{
      display: block;
    }
    .company_overview .overview_title,
    .fukurikosei .fukurikosei_title,
    .syakaikoken .koken_title,
    .access_section .access_title{
      width: 100%;
    }
    .company_overview .overview_title h2,
    .fukurikosei .fukurikosei_title h2,
    .syakaikoken .koken_title h2,
    .access_section .access_title h2{
      margin-bottom: 2rem;
      font-size: 2.4rem;
    }
    .fukurikosei_cantainer_bg,
    .page_contents_body.aboutus .access_container_bg{
      padding-top: 6rem;
      padding-bottom: 6rem;
    }
  }

.overview_wrap table{
  width: 100%;
  border-top: 1px solid var(--bdr_base);
}
.overview_wrap th,
.overview_wrap td{
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--bdr_base);
  line-height: 1.8;
  letter-spacing: .1rem;
}
.overview_wrap th{
  width: 20%;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

  @media screen and (max-width:599px){
    .overview_wrap th{
      width: 30%;
    }
  }

.syakaikoken{
  margin-top: 4rem;
}
.syakaikoken h3{
  margin-bottom: 1em;
  font-size: 2rem;
  font-weight: 700;
}
.fukurikosei ul,
.syakaikoken ul{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.fukurikosei ul{
  margin-top: 2rem;
}

.syakaikoken ul li p{
  margin-top: 1rem;
  font-size: 1.2rem;
}
.syakaikoken > p{
  padding-left: 1em;
}
.syakaikoken > p + p{
  margin-top: 1em;
}
  @media screen and (max-width:599px){
    .fukurikosei ul,
    .syakaikoken ul{
      grid-template-columns: repeat(2, 1fr);
    }
  }


.access_wrap iframe{
  width: 100%;
  height: 400px;
}
  @media screen and (max-width:599px){
    .access_wrap iframe{
      height: 300px;
    }
  }

.aboutus .interlude{
  margin-top: 10rem;
}
.aboutus .interlude{
  position: relative;
  aspect-ratio: 40/10;
  margin-right: 15vw;
  overflow: hidden;
}
.aboutus .interlude > .bg{
  width: 100%;
  height: 100%;
  background: url(images/fv2.jpg) no-repeat center/cover;
}
  @media screen and (max-width:599px){
    .aboutus .interlude{
      margin-top: 6rem;
      aspect-ratio: 24/10;
    }
  }

/* PAGE crash-stone -------------------------- */
.main.cs{
  background: url(images/fv_bg1.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.flow_main_title{
  margin-bottom: 8rem;
  text-align: center;
}
.flow_main_title h2{
  position: relative;
  display: inline-block;
  font-size: 3rem;
  font-weight: 700;
}
.flow_main_title h2::before{
  content: '';
  position: absolute;
  bottom: -20px;
  display: inline-block;
  width: 60px;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #005d82;
  border-radius: 2px;
}
  @media screen and (max-width:1023px){
    .flow_main_title{
      margin-bottom: 6rem;
    }
    .flow_main_title h2{
      font-size: 2.4rem;
    }
  }
.crash_flow_wrap{
  margin-top: 6rem;
}
.crash_flow_wrap li{
  display: flex;
  justify-content: flex-start;
}
.crash_flow_wrap li:nth-child(even){
  justify-content: flex-end;
}
.crash_flow_wrap li + li{
  margin-top: 4rem;
}
.flow_box{
  display: flex;
  justify-content: space-between;
  width: 70%;
  padding: 3rem;
  background-color: #fff;
  border: 4px solid #20b5ae;
}
.flow_box.rr{
  flex-direction: row-reverse;
}
.flow_box .desc{
  width: 50%;
}
.flow_box .f_img{
  width: 46%;
  aspect-ratio: 3/2;
  overflow: hidden;
}
.flow_box .f_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow_box .desc .flow_title{
  display: flex;
  align-items: baseline;
}
.flow_title .num{
  color: #20b5ae;
  font-size: 6rem;
  font-weight: 700;
}
.flow_title h3{
  padding-left: 1rem;
  font-size: 2.4rem;
  font-weight: 700;
}
.flow_box .desc p{
  margin-top: 2rem;
  line-height: 2;
}
  @media screen and (max-width:1023px){
    .crash_flow_wrap li{
      display: block;
    }
    .flow_box{
      width: 100%;
    }
  }

  @media screen and (max-width:599px){
    .flow_box{
      display: block;
    }
    .flow_box .desc,
    .flow_box .f_img{
      width: 100%;
    }
    .flow_box .f_img{
      margin-top: 2rem;
    }
  }


/* PAGE SGDs -------------------------- */
.sdgs_wrap.attempt{
  padding-top: 10rem;
  padding-bottom: 10rem;
  background-color: #fff;
}

.sdgs_intro_title{
  margin-bottom: 8rem;
  text-align: center;
}
.sdgs_intro_title h2,
.sdgs_attempt_title h2{
  position: relative;
  display: inline-block;
  font-size: 3rem;
  font-weight: 700;
}
.sdgs_intro_title h2::before,
.sdgs_attempt_title h2::before{
  content: '';
  position: absolute;
  bottom: -20px;
  display: inline-block;
  width: 60px;
  height: 3px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #005d82;
  border-radius: 2px;
}
.sdgs_intro_desc{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.sdgs_intro_desc > .desc{
  flex: 1;
  padding-left: 8rem;
  line-height: 2;
}
.sdgs_intro_desc .sdgs_img{
  width: 400px;
}
.sdgs_sign{
  margin-top: 1em;
  text-align: right;
}
  @media screen and (max-width:599px){
    .sdgs_intro_title h2,
    .sdgs_attempt_title h2{
      font-size: 2.4rem;
    }
    .sdgs_intro_desc{
      display: block;
    }
    .sdgs_intro_desc > .desc{
      padding-left: 0;
    }
    .sdgs_intro_desc .sdgs_img{
      width: 100%;
      margin-top: 4rem;
      text-align: center;
    }
    .sdgs_intro_desc .sdgs_img img{
      width: 90%;
      max-width: 280px;
      height: auto;
    }
  }

.sdgs_attempt_title{
  margin-bottom: 8rem;
  text-align: center;
}

.sdgs_attempt li{
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.sdgs_attempt li + li{
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 1px solid #ddd;
}
.sdgs_attempt li:first-child{
  padding-top: 4rem;
  border-top: 1px solid #ddd;
}
.sdgs_attempt li:last-child{
  padding-bottom: 4rem;
  border-bottom: 1px solid #ddd;
}

.sdgs_attempt .desc{
  flex: 1;
  padding-right: 4rem;
}
.sdgs_attempt .desc h3{
  margin-bottom: 2rem;
  font-size: 120%;
  font-weight: 700;
}
.sdgs_attempt .desc p{
  line-height: 2;
}
.sdgs_icon_wrap{
  width: 450px;
  display: flex;
  flex-wrap: wrap;
}
.sdgs_icon_wrap .sdgs_icon + .sdgs_icon{
  margin-left: 1rem;
}
.sdgs_icon_wrap img{
  width: 100px;
  height: auto;
}

.mokuhyo_wrap{
  margin-top: 6rem;
  text-align: center;
}
.sdgs_tri_wrap{
  position: relative;
  width: 100%;
  height: 120px;
  text-align: center;
}
.sdgs_tri_wrap .sdgs_tri{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 100px;
  background: linear-gradient(to bottom right, #c9f29b, #20b5ae);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  z-index: 0;
}

.sdgs_tri_wrap .ad{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #005d82;
  font-size: 4rem;
  font-weight: 700;
  z-index: 5;
}

.sdgs_mokuhyo{
  display: inline-block;
  padding: 1em;
  background-color: #20b5ae;
  color: #fff;
  font-size: 2.4rem;
  font-weight: 700;
}

  @media screen and (max-width:599px){
    .sdgs_attempt li{
      display: block;
    }
    .sdgs_attempt .desc{
      padding-right: 0;
    }
    .sdgs_icon_wrap{
      width: 100%;
      margin-top: 2rem;
    }
    .sdgs_icon_wrap img{
      width: 60px;
      height: auto;
    }
    .sdgs_mokuhyo{
      margin-right: 2rem;
      margin-left: 2rem;
      font-size: 1em;
      line-height: 1.4;
    }
  }
  @media screen and (min-width:600px) and (max-width:1023px){
    .sdgs_icon_wrap{
      width: 30%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
    }
    .sdgs_icon_wrap .sdgs_icon + .sdgs_icon{
      margin-left: 0;
    }
    .sdgs_icon_wrap .sdgs_icon > img{
      width: 100%;
      height: auto;
    }
  }

.sdgs_info{
  display: flex;
  justify-content: space-between;
}
.sdgs_info .desc{
  flex: 1;
  padding-right: 8rem;
  line-height: 2;
}
.sdgs_info .desc h3{
  font-size: 2.4rem;
  font-weight: 700;
}
.sdgs_info .sdgs_img{
  width: 400px;
}
  @media screen and (max-width:599px){
    .sdgs_info{
      display: block;
    }
    .sdgs_info .desc{
      padding-right: 0;
    }
    .sdgs_info .sdgs_img{
      width: 100%;
      margin-top: 3rem;
    }
  }

/* PAGE recruit -------------------------- */
.recruit_detail{
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
}
.recruit_detail .recruit_detail_title{
  width: 24%;
  max-width: 30rem;
}
.recruit_detail .recruit_detail_title h2{
  position: sticky;
  top: 3rem;
}
.recruit_detail .recruit_detail_body{
  flex: 1;
}
.recruit_detail .recruit_detail_title h2{
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.recruit_block + .recruit_block{
  margin-top: 6rem;
}
.recruit_block .job_name{
  padding: 1.5rem 2rem;
  background-color: var(--col_base);
  color: #fff;
  font-size: 2rem;
}
.recruit_table{
  margin-top: 3rem;
}
.recruit_table table{
  width: 100%;
  background-color: #fff;
  border-top: 1px solid var(--bdr_base);
  border-left: 1px solid var(--bdr_base);
}
.recruit_table th,
.recruit_table td{
  padding: 1em;
  border-right: 1px solid var(--bdr_base);
  border-bottom: 1px solid var(--bdr_base);
  line-height: 1.8;
}
.recruit_table th{
  width: 20rem;
  background-color: #f0f0f0;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}
.recruit_table td a{
  color: var(--btn_base);
  text-decoration: underline;
}
  @media screen and (max-width:599px){
    .recruit_detail{
      display: block;
    }
    .recruit_detail .recruit_detail_title,
    .recruit_detail .recruit_detail_body{
      width: 100%;
      max-width: 100%;
    }
    .recruit_detail .recruit_detail_title h2{
      margin-bottom: 3rem;
      font-size: 2.4rem;
    }
    .recruit_table tr,
    .recruit_table th,
    .recruit_table td{
      display: block;
    }
    .recruit_table th{
      width: 100%;
      border-bottom: 0;
    }
  }

/* PAGE news -------------------------- */
.news_container .news_inner_flx{
  display: flex;
  flex-wrap: wrap;
}
.news_inner_flx .section_title{
  width: 30%;
  max-width: 40rem;
}
.news_inner_flx .section_title h2{
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.news_inner_flx .content_area{
  flex: 1;
  line-height: 1.8;
}
  @media screen and (max-width:599px){
    .top_section .news_inner_flx{
      display: block;
      padding-right: 1.5rem;
      padding-left: 1.5rem;
    }
    .news_inner_flx .section_title{
      width: 100%;
    }
    .news_inner_flx .section_title h2{
      margin-bottom: 2rem;
      font-size: 2.4rem;
    }
    .news_inner_flx .content_area{
      width: 100%;
      padding-left: 0;
    }
  }
.content_area .entry_list{
  border-top: 1px solid var(--bdr_base);
}
.content_area .entry_list li{
  padding: 3rem 0;
  border-bottom: 1px solid var(--bdr_base);
}
.content_area .entry_list li a{
  color: #111;
}
.content_area .entry_list li a:hover{
  color: var(--col_hover);
}
.content_area .entry_list li .post_title{
  font-size: 1.8rem;
}

  @media screen and (max-width:1023px){
    .content_area .entry_list li .date{
      margin-bottom: 1em;
      font-size: 1.4rem;
    }
    .content_area .entry_list li .post_title{
      font-size: 100%;
    }
  }

.post_header{
  padding-bottom: 2rem;
  border-bottom: 1px solid #e5e5e5;
}
.post_header .date{
  margin-bottom: 2rem;
}
.post_header h1{
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.6;
}
.post_body{
  margin-top: 5rem;
}
.post_body p{
  line-height: 2;
}
.post_body p + p,
.post_body p + figure,
.post_body figure + p{
  margin-top: 2em;
}
.post_body a{
  text-decoration: underline;
}

/* PAGE contact -------------------------- */
.contact_header{
  margin-bottom: 4rem;
}
.contact_header p{
  line-height: 1.8;
}

.form_list dt{
  font-size: 1.8rem;
  font-weight: 700;
}
.form_list dd{
  margin-top: 1rem;
}
.form_list dd.syubetu_radio{
  padding: 2rem;
  background-color: #fff;
}
.form_list dd + dt{
  margin-top: 4rem;
}

.form_list dt .required{
  display: inline-block;
  margin-left: 1rem;
  padding: .5rem;
  background-color: #000;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
}

.form_list dd input[type=text],
.form_list dd input[type=email],
.form_list dd input[type=tel],
.form_list dd textarea{
  width: 100%;
  padding: .8em 1em;
  border: 1px solid #ddd;
  border-radius: .3rem;
  font-size: 1em;
  line-height: 1.4;
}
.form_list dd textarea{
  height: 20rem;
}
.form_list dd input::placeholder{
  color: #ccc;
}

.form_list dd .att{
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1.4;
}

.form_list .cat{
  display: inline-block;
  padding-top: 1rem;
}
.form_list .cat + .cat{
  margin-left: 2rem;
}
  @media screen and (max-width:599px){
    .form_list .cat{
      display: block;
    }
    .form_list .cat + .cat{
      margin-top: 1em;
      margin-left: 0;
    }
  }

.confirm_pp{
  margin-top: 3rem;
  padding: 2rem 0;
  background-color: #fff;
  border: 1px solid var(--bdr_base);
  text-align: center;
}
.confirm_pp input{
  margin-right: .5rem;
}

.submit_wrap{
  margin-top: 4rem;
  text-align: center;
}
.submit_wrap input[type=submit]{
  width: 100%;
  max-width: 400px;
  padding: 1.5em 0;
  background-color: var(--btn_base);
  border: 0;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
}

.policy{
  margin-top: 6rem;
}
.policly_title{
  margin: 1em;
  font-size: 2rem;
  font-weight: 700;
}
.policy_body{
  width: 100%;
  height: 40rem;
  padding: 2rem;
  background-color: #fff;
  border: 1px solid var(--bdr_base);
  font-size: 1.4rem;
  line-height: 1.8;
  overflow-y: scroll;
}
.policy_body dl{
  margin-top: 1.5em;
}
.policy_body dt{
  font-size: 1.6rem;
  font-weight: bold;
}
.policy_body dd + dt{
  margin-top: 1.5em;
}
.policy_body dd ul{
  padding-left: 1em;
}
.policy_body dd li{
  list-style: disc;
}


/* PAGE contact -------------------------- */
.container404{
  padding-bottom: 8rem;
}
.header404{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 10rem;
}
.header404 h1{
  font-size: 120%;
  font-weight: 700;
}
.main404{
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.error404_body {
  margin-top: 4rem;
  line-height: 2;
  text-align: center;
}
@media screen and (max-width:1080px){
  .header404{
    margin-top: 6rem;
  }
}

/* footer -------------------------- */
.footer{
  width: 100%;
  background-color: #3b3d3b;
}
.footer_inner{
  padding: 8rem 5vw 6rem;
  color: #fff;
}
.footer_inner_flx{
  display: flex;
  justify-content: space-between;
}
  @media screen and (max-width:1023px){
    .footer_inner{
      padding: 6rem 1rem 4rem;
    }
    .footer_inner_flx{
      display: block;
      text-align: center;
    }
  }
.company_title .job_item{
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  letter-spacing: .1em;
}
.company_title h3{
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: .1em;
}
.company_title p{
  margin-top: 2rem;
  font-size: 1.4rem;
  letter-spacing: .1em;
}
.footer_link ul{
  display: flex;
  align-items: center;
}
.footer_link li + li{
  margin-left: 2em;
}
.footer_link li a{
  color: #fff;
}
.footer_link .footer_contact_wrap{
  display: flex;
  justify-content: flex-end;
  margin-top: 4rem;
}
.footer_link .footer_contact_wrap a{
  color: #fff;
}
.footer_link .footer_contact_wrap img{
  width: 1.8rem;
  height: auto;
}
.footer_link .footer_contact_wrap .tel_box,
.footer_link .footer_contact_wrap .mail_box{
  display: flex;
  align-items: center;
  height: 3rem;
}
.footer_link .footer_contact_wrap .tel_box span,
.footer_link .footer_contact_wrap .mail_box span{
  display: block;
  margin-right: .5rem;
}
.footer_link .footer_contact_wrap .tel_box{
  font-size: 2rem;
}
.footer_link .footer_contact_wrap .mail_box{
  margin-left: 2rem;
  font-size: 1.8rem;
}

  @media screen and (max-width:599px){
    .footer{
      padding-bottom: 8rem;
    }
    .footer_link_sp_wrap{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 6rem;
      background-color: var(--btn_base);
      z-index: 100;
    }
    .footer_link_sp{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .footer_link_sp .f_l_item a{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 6rem;
      padding-right: 2rem;
      padding-left: 2rem;
      color: #fff;
      font-size: 1.4rem;
    }
    .footer_link_sp .f_l_item a img{
      display: inline-block;
      width: 1.8rem;
      height: auto;
      margin-right: .5rem;
    }
    .company_title{
      text-align: center;
    }
    .footer_link .footer_contact_wrap{
      display: none;
    }
    .footer_link ul{
      margin-top: 4rem;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 1rem;
      row-gap: 1rem;
    }
    .footer_link li + li{
      margin-left: 0;
    }
    .footer_link li a{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 4rem;
      background-color: var(--col_black2);
      font-size: 1.4rem;
    }
  }
  @media screen and (min-width:600px) and (max-width:1023px){
    .footer_link ul{
      justify-content: center;
      margin-top: 4rem;
    }
    .footer_link li a{
      border-bottom: 1px solid #444;
    }
    .footer_link .footer_contact_wrap{
      justify-content: center;
    }
  }


/* -------------------------------------------------------
for WP
---------------------------------------------------------- */
/* post-navigation for article */
.single_pagenav{
  margin-top: 10rem;
  padding-top: 4rem;
  border-top: 1px solid #e5e5e5;
}
.post-navigation .screen-reader-text {
  display: none;
}
.nav-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row-reverse;
  width: 100%;
}
.post-navigation .nav-links .nav-previous,
.post-navigation .nav-links .nav-next {
  width: 33%;
  box-sizing: border-box;
  color: #ccc;
  line-height: 1.4;
}
.post-navigation .nav-links .nav-home {
  width: 34%;
  text-align: center;
  vertical-align: middle;
}

.post-navigation .nav-links .nav-previous {
  text-align: right;
}


/* post-navigation for archive */
.archive_page_navi {
  margin-top: 8rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.archive_page_navi .nav-links {
  flex-direction: row;
}
.archive_page_navi .page-numbers {
  display: block;
  width: 3em;
  height: 3em;
  background-color: var(--btn_base);
  color: #fff;
  text-decoration: none;
  line-height: 3em;
  text-align: center;
}
.archive_page_navi .page-numbers + .page-numbers {
  margin-left: 1rem;
}
.archive_page_navi .page-numbers.current {
  background-color: #ccc;
}


/* WP comment */
.comments_block {
  margin-top: 8rem;
  padding: 3rem;
  border: 1px solid #ddd;
}
.comments_block .comments_title_block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}
.comments_title h3 {
  display: inline-block;
  padding-bottom: 1rem;
  border-bottom: 1px solid #36c;
  font-weight: bold;
}
.comments_num {
  font-size: 1.4rem;
}
ol.comments-list .comment + .comment {
  margin-top: 1em;
  padding-top: 1em;
  border-top: 1px dotted #cccc;
}
.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.comment-author img {
  vertical-align: middle;
}
.comment-metadata {
  font-size: 1.4rem;
}
.comment-metadata a {
  color: #999;
}
.comment-reply-title {
  margin-bottom: 1em;
  font-weight: bold;
}

.comment-respond {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #eee;
}
.comment-form-comment label,
.comment-form-author label,
.comment-form-email label,
.comment-form-url label {
  display: block;
}
.form-submit input {
  padding: 1em 2em;
  font-size: 1.4rem;
}
.comment-meta .comment-awaiting-moderation {
  display: inline-block;
  margin-top: 1rem;
  color: #999;
  font-size: 1.4rem;
  line-height: 1.4;
}
.comment-form-comment textarea{
  width: 100%;
}

/* WP Custom field */
.custon_field_view {
  margin-bottom: 2rem;
  padding: 1em;
  border: 1px solid #f5cd71;
  font-weight: bold;
  line-height: 1.6;
}

/* CF7 */
.wpcf7-not-valid-tip{
  margin-top: 1rem;
}
.wpcf7-list-item.first{
  margin-left: 0;
}
.wpcf7 form .wpcf7-response-output{
  padding: 1em;
  background-color: #ffe83f;
  color: #000;
}

/* -------------------------------------------------------
for Mobile Menu
---------------------------------------------------------- */
@media screen and (max-width:1023px){
  .header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
  }

  /* nav ------------------------- */
  .drawer_btn{
    position: relative;
    width: 3rem;
    height: 3rem;
    background-color: transparent;
    border: none;
    cursor: pointer;
    z-index: 999;
  }
  .drawer_btn > span{
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2px;
    background-color: var(--btn_base);
    transform: translateX(-50%);
  }
  .drawer_btn > span:first-child{
    transform: translate(-50%, calc(-50% - 0.5rem));
    transition: transform 0.3s ease;
  }
  .drawer_btn > span:nth-child(2){
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
  }
  .drawer_btn > span:last-child{
    transform: translate(-50%, calc(-50% + 0.5rem));
    transition: transform 0.3s ease;
  }

  .drawer_btn.active > span:first-child{
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .drawer_btn.active > span:nth-child(2){
    opacity: 0;
  }
  .drawer_btn.active > span:last-child{
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
  }
  .nav.active{
    opacity: 1;
    visibility: visible;
  }
  .nav_inner{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 4rem 0;
    background-color: #fff;
    overflow: scroll;
  }
  .nav_menu li{
    font-size: 120%;
    text-align: center;
  }
  .nav_menu li + li{
    margin-top: 2em!important;
  }
  /* ハンバーガーメニュー展開時、背景を固定 */
  body.menu-open {
    position: fixed;
    width: 100%;
    /* top は JS で動的にセット */
    overflow: hidden;
  }

}/* Mobile Menu */




/* effects -------------------------- */
.bgextend {
  animation: bgextendAnimeBase .8s forwards;
  animation-name: bgextendAnimeBase;
  animation-duration: .8s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
}
@keyframes bgextendAnimeBase {
  from {opacity: 0;}
  to {opacity: 1;}
}

.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: .8s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes bgextendAnimeSecond {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.bgLRextendTrigger {
  display: inline-block;
  position: relative;
}
.bgLRextend::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #111;
  animation-name: bgLRextendAnime;
  animation-duration: .8s;
  animation-fill-mode: forwards;
  top: 0;
  left: 0;
  z-index: 1;
}

@keyframes bgLRextendAnime {
  0% {
    transform-origin: left;
    transform: scaleX(0);
  }
  50% {
    transform-origin: left;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: right;
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}

.bgappearTrigger,
.bgLRextendTrigger {
  opacity: 0;
}

/* fade */
.fadeIn {
  animation-name: fadeInAnime;
  animation-duration: .6s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeInAnime {
  from {opacity: 0;}
  to {opacity: 1;}
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: .8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeDown {
  animation-name: fadeDownAnime;
  animation-duration: .5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
  opacity: 0;
}
@keyframes fadeDownAnime {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeLeft {
  animation-name: fadeLeftAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
  opacity: 0;
}
@keyframes fadeLeftAnime {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeUpTrigger,
.fadeLeftTrigger {
  opacity: 0;
}

/* delay */
.delay {animation-delay: 1s;}
.delay:nth-child(n+1) {animation-delay: 0.2s;}




/* -------------------------------------------------------
for SmartPhone only
---------------------------------------------------------- */
@media screen and (max-width:599px){
  .pc, .tab, .tabpc{display: none;}

}/* end smartphone only */
/* -------------------------------------------------------
for smartphone landscape
---------------------------------------------------------- */
@media (orientation: landscape) {

}/* end smartphone landscape */
/* -------------------------------------------------------
for TAB & PC
---------------------------------------------------------- */
@media screen and (min-width:600px){
  .sp {display: none;}

  a[href^="tel:"] {
    pointer-events: none;
  }
  .footer_link_sp_wrap{
    display: none;
  }

}/* end TAB & PC */
/* -------------------------------------------------------
for TAB only
---------------------------------------------------------- */
@media screen and (min-width:600px) and (max-width:1023px){
  .pc{
    display: none;
  }
}/* end TAB only */
/* -------------------------------------------------------
for PC
---------------------------------------------------------- */
@media only screen and (min-width:1024px){
  .tab {display: none;}
  .fv_wrap-mob{display: none;}
  .head_contact_mob{display: none;}
}/* end PC */