/*
Theme Name: yu-kensetu
Author: cachiport
Version: 1.0
Description: yu-kensetu theme
*/

@charset "UTF-8";
/* ===================================================================
// 基本スタイル
// ===================================================================*/

html {
  font-size: 62.5%;
  font-family: noto-sans-cjk-jp, noto-sans, sans-serif;
  -webkit-font-feature-settings: "pkna" 1;
          font-feature-settings: "pkna" 1;
  height: 100%;
  background-color: #000;
}
@media screen and (min-width: 768px) {
	html {
    font-size: calc(100vw / 136.6);
	}
}



body {
	/*ヘッダーフッター等*/
	--thema-color: #29859F;/*メインカラー*/
  --thema-color2: #806200;/*メインカラー2*/
	--themafont-color: #000;/*メイン文字カラー*/
  --themafont-color2: #fff;/*サブ文字カラー*/
	--copyright-color:#fff;/*コピーライト背景色*/
	--copyrightback-color:#000;
	/*グロナビ文字カラー*/
	--gnav-color:#000;
	/*ボタン１*/
	--btn1font-color:#fff;/*通常時文字色*/
	--btn1border-color:#fff;/*枠色＆ホバー背景色*/
	--btn1hover-color:#000;/*ホバー文字色*/
	/*ボタン２*/
	--btn2font-color:#000;/*通常時文字色*/
	--btn2border-color:#000;/*枠色＆ホバー背景色*/
	--btn2hover-color:#fff;/*ホバー文字色*/
	/*スクロール*/
	--scroll-color: #fff;
	/*フォント*/
	--font-noto: noto-sans, sans-serif;
	--font-cjk: noto-sans-cjk-jp, noto-sans, sans-serif;
	--font-engei: ta-engeifude, sans-serif;
	--font-en: josefin-sans, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--bodyback-color);
  font-size: 16px;
  line-height: 1;
  color: var(--themafont-color);
  font-weight: 400;
  height: 100%;
  max-width: 100%;
}
#luxy{
  z-index: 2;  
}
/*フォントファミリー*/

.jp_noto p, .jp_noto h1,.jp_noto h2,.jp_noto h3,.jp_noto h4,.jp_noto a,.jp_noto li,.jp_noto span,.jp_noto dt,.jp_noto dd,.jp_noto {
	font-family: var(--font-noto);
}
.jp_cjk p, .jp_cjk h1,.jp_cjk h2,.jp_cjk h3,.jp_cjk h4,.jp_cjk a,.jp_jp_cjk li,.jp_cjk span,.jp_cjk dt,.jp_cjk dd,.jp_cjk {
  font-family: var(--font-cjk);
}
.jp_engei p, .jp_engei h1,.jp_engei h2,.jp_engei h3,.jp_engei h4,.jp_engei a,.jp_engei li,.jp_engei span,.jp_engei dt,.jp_engei dd,.jp_engei {
	font-family: var(--font-engei);
}
.en p, .en h1,.en h2,.en h3,.en h4,.en a,.en li,.en span,.en dt,.en dd,.en {
	font-family: var(--font-en);
}


/*フォントカラー*/
.white p, .white h1,.white h2,.white h3,.white h4,.white h5,.white a,.white li,.white span,.white dt,.white dd,.white {
  color: var(--themafont-color2);
}
.black p, .black h1,.black h2,.black h3,.black h4,.black a,.black li,.black span,.black dt,.black dd,.black {
  color: #000;
}



/* ボックスサイズ */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

/* 行間 */
p, li, dt, dd{
  letter-spacing: .096rem;
	font-family: var(--font-cjk);
  font-weight: 700;
  color: #000;
  list-style: none;
  font-size: max(1.6rem, 16px);
}
p{
  line-height: 1.875;
  letter-spacing: .096rem;
}
span{
  font-size: max(1.6rem, 16px);
  font-family: var(--font-cjk);
}

div, h1, h2, h3, h4, h5 {
  line-height: 1.2;
  font-weight: 700;
  font-family: var(--font-noto);
  color: #000;
  font-size: max(1.6rem, 16px);
}

/* リンク */
a {
  text-decoration: none;
  -webkit-transition: .3s;
  transition: .3s;

  font-family: var(--font-cjk);
  font-weight: 700;
  color: #000;

}


  a:hover {
    opacity: .7;
  }






/* img */
img,picture {
  max-width: 100%;
  height: auto;
  display: block;
}

.object_fit_img {
  -o-object-fit: cover;
     object-fit: cover;
 font-family: 'Noto Sans JP', sans-serif;
}
/* flex */
.flex_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media screen and (max-width: 1020px) {
  .flex_wrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
}

/* pc & sp */
.pc {
  display: block;
}

.sp {
  display: none;
}
.pc_br{
  display: block;
}
.sp_br{
  display: none;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }
  .sp_br{
    display: block;
  }
  .pc_br{
    display: none;
  }
}

.btn_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: flex-start;
  padding: 4rem 0 0;
}


.btn_area p {
  text-align: center;
}

@media screen and (max-width: 980px) {
  .btn_area {
	  padding: 0;
	  margin-top: 3rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
	 .btn_area a{
	margin: 0;
	padding: 1rem 0;
}
}




/*wrapper*/
body{
  --wrapper: 10rem;
  --header-blank: 14.2rem;
}
.wrapper{
  padding: 0 var(--wrapper);
}
.header_blank{
  padding-left: var(--header-blank);
}
@media screen and (max-width: 767px) {
  body{
    --wrapper: 4rem;
    --header-blank: 0rem;
  }
}
/*center*/
.center, .center div, .center h1,.center h2,.center h3, .center h4, .center p , .center a, .center li, .center span{
  text-align: center;
}
/*inner*/
.inner, .inner div, .inner h1,.inner h2,.inner h3, .inner.inner h4, .inner p , .inner a, .inner li, .inner span{
  width: 51.2rem;
  max-width: 100%;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .inner, .inner div, .inner h1,.inner h2,.inner h3, .inner.inner h4, .inner p , .inner a, .inner li, .inner span{
    width: 100%;
    margin: 0 auto;
    text-align: left;
  }
}

/* ===================================================================
// メインビジュアル、タイトル
// ===================================================================*/
.mainimg {
  position: relative;
	display: block;
  height: 100vh;
  overflow: hidden;
}
.mainimg .fv{
	padding-left: var(--header-blank);
	height: 100%;
  width: 100%;
  height: 100%;
  position: absolute; /* 画面内で拡大しても影響を抑える */
  top: 0;
  left: 0;
  transition: transform 0.3s ease-out; /* ズームの動きを滑らかにする */
}
.mainimg .fv::after{
  content: "";
  background-color: rgba(0, 0, 0, 0.15);
  display: block;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}
.mainimg .fv picture{
	width: 100%;
	object-fit: cover;
	height: 100%;
}
.mainimg .fv img{
	width: 100%;
	object-fit: cover;
	height: 100%;
}

.mainimg .fv_txt{
	position: absolute;
    top: 13.4%;
    right: 18.6%;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.mainimg .fv_txt.anim-box.popup.is-animated{
  animation: popup 2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.mainimg .fv_txt h1{
	font-size: 6.4rem;
	text-shadow: 0rem 0rem .6rem #000000B2;
	letter-spacing: .384rem;
	line-height: 1;
	transform: matrix(1, -0.09, 0.09, 1, 0, 0);
}
.mainimg .fv_txt h2{
	font-size: 5.2rem;
	text-shadow: 0px 0px .6rem #000000B3;
	letter-spacing: .312rem;
	line-height: .5;
	transform: matrix(1, -0.09, 0.09, 1, 0, 0);
  font-display: swap;
}
.mainimg .fv_txt img{
	width: 56vw;
	transform: matrix(1, -0.09, 0.09, 1, 0, 0);
}

@media screen and (max-width: 767px) {
.mainimg {
    height: 80vh;
}
  .mainimg .fv{
    padding-top: 6.6rem;
  }
  .mainimg .fv picture {
    object-position: 43%;/*仮設定*/
  }
.mainimg .fv_txt {
  position: absolute;
  top: 13.5%;
  margin: 0 1.7rem;
  right: initial;
  align-items: start;
}
.mainimg .fv_txt h1 {
  font-size: 5rem ;
	text-align: center;
  letter-spacing: .312rem;
	margin-bottom:1rem;
}
	.mainimg .fv_txt.rec_fv h1{
  font-size: 3.2rem ;
	}
.mainimg .fv_txt h2 {
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: .192rem;
	text-align: center;
	margin-top:1rem;
}
	.mainimg .fv_txt.rec_fv h2{
  font-size: 2.8rem;
	}
.mainimg .fv_txt img {
  width: 100%;
}
}

/*ドンっと出るアニメーション*/
.anim-box{
  opacity: 0;
  transform: translateY(4rem) scale(0.1); /* 初期位置 */
  transition: none; /* 初期状態でアニメーションが適用されないように */
}
.anim-box.popup.is-animated {
  animation: popup .5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes popup {
  0% {
      transform: translateY(4rem) scale(0.1);
      opacity: 0;
  }
  100% {
      transform: translateY(0) scale(1.0);
  }
  80%, 100% {
      opacity: 1;
  }
}

/*スクロールダウン全体の場所*/
.scrolldown2{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:.3rem;
  right:4%;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
    /*描画位置*/
  position: absolute;
  left:1rem;
  bottom:5rem;
    /*テキストの形状*/
  color: var(--scroll-color);
  font-size: max(1.9rem, 16px);
  letter-spacing: 0.05rem;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
@media screen and (max-width: 450px) {
	.scrolldown2 span{
  font-size: 1.3rem;
}
}

/* 丸の描写 */
.scrolldown2:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom:0;
    left:-.4rem;
    /*丸の形状*/
  width:1rem;
  height:1rem;
  border-radius: 50%;
  background: var(--scroll-color);
    /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
    circlemove 1.6s ease-in-out infinite,
    cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
      0%{bottom:10rem;}
     100%{bottom:-.5rem;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
      0%{opacity:0}
     50%{opacity:1;}
    80%{opacity:0.9;}
  100%{opacity:0;}
 }

/* 線の描写 */
.scrolldown2:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  left:0;
    /*線の形状*/
  width:.1rem;
  height: 10rem;
  background: var(--scroll-color);
}



/* ===================================================================
// ヘッダー,
// ===================================================================*/
.header {
  height: 100%;
  width: 14.2rem;
	background: #fff;
	position: fixed;
	z-index: 999;
	padding: 3.1rem 0rem 0rem;
	display: flex;
	flex-direction: column;
	align-items: center;

}
.header .logo{

}
.header .logo a{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7rem;
}
.header .logo img {
	height:5.7rem;
  }
  .header .logo h1{

    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
  }
  .header .logo h1 span{
	font-size: 2.9rem;
	writing-mode: vertical-rl;
  font-weight: 500;
  }
  .header .logo h1 p{
	writing-mode: vertical-rl;
  font-size: 5.9rem;
  font-weight: 500;
  }
.header .header_nav{
	flex-direction: column;
	width: 100%;
}

.header .header_nav{
    margin: auto 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.header .header_nav li{
	padding: 1.5rem 1rem 1.2rem;
	width: 100%;
	
}
.header .header_nav li a{
    width: 100%;
    height: 100%;
    text-align: center;
    display: block;
	color: #fff;
	font-family: var(--font-noto);
	font-size: max(1.8rem, 16px);
}
.header .header_nav li:nth-last-child(2) {
	background-color: #29859F;
}
.header .header_nav li:nth-last-child(1) {
	background-color: #000;
}

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

.header {
  height: 6.6rem;
  width: 100%;
  background: #fff;
  position: fixed;
  z-index: 999;
  padding: .8rem 1.45rem .7rem .9rem;
  display: flex;
  flex-direction: initial;
  justify-content: space-between;
}

.header .logo h1 {
  font-size: 2.8rem;
  display: flex;
  flex-direction: column;
  text-align: initial;
  align-items: initial;
  gap: 0;
}

.header .logo a {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-direction: initial;
}

.header .logo img {
  height: 5.4rem;
}
.header .logo h1 {

  display: flex;
  flex-direction: column;
}
.header .logo h1 span {
  font-size: 1.4rem;
  writing-mode: initial;
}
.header .logo h1 p {
  line-height: 1;
  writing-mode: initial;
  font-size: 2.8rem;
}


}



/* ハンバーガーメニュー　*/
.nav_ham_flex{
  margin: 4.55rem 0 .65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.nav-ham {
	display: block;
	width: 5.287rem;
	height: 3.8rem;
	cursor: pointer;
	position: relative;
	z-index: 999;
  }

.nav-ham span {
	display: block;
	width: 100%;
	height: .2rem;
	background-color: #333;
	position: absolute;
	transition: transform 0.5s, opacity 0.5s, width 0.3s;
  }
  .menu_txt span{
	 font-size: max(2.2rem, 16px);
  }
  .menu_txt span:nth-child(1){
    display: block;
  }
 .open .menu_txt span:nth-child(1){
  display: none;
 }
  .menu_txt span:nth-child(2){
  display: none;
}
  .open .menu_txt span:nth-child(2){
    display: block;
  }
  .nav-ham span:nth-child(1) {
	top: 0;
  }
  
  .nav-ham span:nth-child(2) {
	top: 0;
	bottom: 0;
	margin: auto;
  }
  
  .nav-ham span:nth-child(3) {
	bottom: 0;
  }
  
  .sp-nav-layout {
	position: fixed;
	background: rgba(0, 0, 0, 1);
	top: 0;
	left: 0;
	width: 44.8%;
	height: 100%;
	color: #ffffff;
	display: block;
	visibility: hidden;
	opacity: 0;
	transform: translateX(-100%);
	transition: 0.5s ease-in-out;
	z-index: 99;
  margin-left:var(--header-blank);
  padding: 10rem 2rem 8.75rem 6.8rem;
  }
  .sp-nav-layout nav{
    display: flex;
    gap: 5.7rem;
  }
  .sp-nav-layout nav ul {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    width: 37.2%;
  }
  .sp-nav-layout nav ul li{
    display: flex;
    flex-direction: column;
    gap: .3rem;
  }
  .sp-nav-layout nav ul li h2{
    font-family: var(--font-en);
    font-size: max(2.3rem, 16px);
    font-style: italic;
    color: #fff;
  }
  .sp-nav-layout nav ul li h3{
    font-size: max(1.2rem, 12px);
    font-style: italic;
    color: var(--thema-color);
  }
  .sp-nav-layout ul.nav_boxes{
    width: 100%;
    display: flex;
    margin-top: 3.6rem;
    gap: 5.7rem;
  }
  .sp-nav-layout ul.nav_boxes li{
    font-size: max(1.8rem, 16px);
    display: block;
    text-align: center;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    width: 37.2%;
  }
  .sp-nav-layout ul.nav_boxes li:nth-child(1) a{
    background-color: #806200;
    padding: 1.6rem 1.9rem 1.4rem;
    display: block;
    width: 100%;
    height: 100%;
  }
  .sp-nav-layout ul.nav_boxes li:nth-child(2) a{
    background-color: #29859F;
    padding: 1.6rem 1.2rem 1.4rem;
    display: block;
    width: 100%;
    height: 100%;
  }

  .sp-nav-layout ul li {
	position: relative;
	transform: translateX(-20rem);
	transition: transform 1.3s ease;
  }
  
  .sp-nav-layout ul.sns{
    justify-content: left;
    gap: 3rem;
    margin-top: 3.6rem;
  }
  .sp-nav-layout ul li:nth-child(2) {
	transition-delay: 0.07s;
  }
  
  .sp-nav-layout ul li:nth-child(3) {
	transition-delay: 0.14s;
  }
  
  .sp-nav-layout ul li:nth-child(4) {
	transition-delay: 0.21s;
  }
  .sp-nav-layout ul li:nth-child(5) {
	transition-delay: 0.28s;
  }
  .sp-nav-layout ul li a {
	font-size: max(2.4rem, 16px);
	  font-family: josefin-sans, sans-serif;
	color: #fff;
  }
  @media screen and (max-width: 767px) {
    .nav_ham_flex{
      margin: 0;
      height: 100%;
      justify-content: flex-end;
      gap: .5rem;
    }
    .nav-ham {
      display: block;
      width: 3rem;
      height: 2.1rem;
      cursor: pointer;
      position: relative;
      z-index: 999;

    }
    .menu_txt span{
      font-size: 1rem;
    }
    .header .header_nav {
      position: fixed;
      bottom: 0;
      display: flex;
      flex-direction: row;
      width: 100%;
      left: 0;
      transition: all .3s;
    }
    .header .header_nav li {
      padding: 1.4rem 1rem 1.3rem;
      width: 50%;
  }
  .header .header_nav li a{
    line-height: 1;
}
    .sp-nav-layout {
      position: fixed;
      background: rgba(0, 0, 0, 1);
      top: 0;
      right: 0;
      left: initial;
      min-width: 26.6rem;
      margin-left: initial;
      margin-top: 6.6rem;
      padding: 3.9rem 3.7rem 2rem 4.45rem;
      transform: translateX(68%);
      width: 68%;
      transition: .5s ease-in-out;
  }

  .sp-nav-layout nav {
    flex-direction: column;
  }
.sp-nav-layout nav ul {
  gap: 2.4rem;
  width: 100%;
}

.sp-nav-layout nav {
  display: flex;
  gap: 2.6rem;
  flex-direction: column;
}
.sp-nav-layout ul.nav_boxes {
    margin-top: 2.6rem;
    flex-direction: column;
}
.sp-nav-layout ul.nav_boxes li{
  width: 100%;
}
.sp-nav-layout ul.nav_boxes li a{
  font-size: 1.8rem;
  }

.sp-nav-layout ul.sns {
  justify-content: left;
  gap: 2.5rem;
  margin-top: 1.6rem;
}
.sp-nav-layout ul li:nth-child(1) {
	transition-delay: 0.01s;
}
.sp-nav-layout ul li:nth-child(2) {
	transition-delay: 0.07s;
  }
  
  .sp-nav-layout ul li:nth-child(3) {
	transition-delay: 0.14s;
  }
  
  .sp-nav-layout ul li:nth-child(4) {
	transition-delay: 0.21s;
  }
  .sp-nav-layout ul:nth-child(2) li:nth-child(1) {
    transition-delay: 0.28s;
  }
  .sp-nav-layout ul:nth-child(2) li:nth-child(2) {
    transition-delay: 0.35s;
    }
    
    .sp-nav-layout ul:nth-child(2) li:nth-child(3) {
    transition-delay: 0.42s;
    }
    
    .sp-nav-layout ul:nth-child(2) li:nth-child(4) {
    transition-delay: 0.49s;
    }

  .scrolldown2 {
    position: absolute;
    bottom: .3rem;
    right: 9%;
  }
    .scrolldown2 span {
      font-size: 1.9rem;
      font-weight: 500;
  }
  .sp-nav-layout nav ul li h2 {
    font-size: max(1.8rem, 16px);
  }
  .sp-nav-layout nav ul {
    gap: 1rem;
  }
  .sp-nav-layout nav {
    gap: 1rem;
  }
  .sp-nav-layout ul.nav_boxes {
    gap: 1rem;
}
}
@media screen and (max-width: 428px) {
  .sp-nav-layout nav ul li h2 {
    font-size: max(2.6vh, 16px);
  }

  .sp-nav-layout nav ul {
    gap: 2.5vh;
  }
  .sp-nav-layout nav {
    gap: 2.5vh;
  }
  .sp-nav-layout ul.nav_boxes {
    gap: 1.55rem;
}
}
	/*sp nav*/

	.open .nav-ham span {
	  background-color: #000;
	}
	.open .nav-ham span:nth-child(1) {
	  transform: translateY(1.8rem) rotate(45deg);
	}
	.open .nav-ham span:nth-child(2) {
	  top: 0;
	  bottom: 0;
	  margin: auto;
	  width: 0px;
	  opacity: 0;
	}
	.open .nav-ham span:nth-child(3) {
	  transform: translateY(-1.8rem) rotate(-45deg);
	}
	.open .sp-nav-layout {
	  visibility: visible;
	  opacity: 1;
	  transform: translateX(0);
	}
	.open .sp-nav-layout ul li {
	  transform: translateX(0);
	}
  .overlay {
    opacity: 0;
    transition: opacity 0.5s;
	}
	.open .overlay {
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, 0.43);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    opacity: 1;
    transition: opacity 0.5s;
    width: 100%;
    height: 100%;
	}
	.photo-sec {
	  margin-top: 3rem;
	  margin-bottom: 3rem;
	}
  

.gnav_btn {
  display: none;
}

@media screen and (max-width: 767px) {
  .open .nav-ham span:nth-child(1) {
    transform: translateY(.9rem) rotate(45deg);
}

.open .nav-ham span:nth-child(3) {
  transform: translateY(-1rem) rotate(-45deg);
}
.open .sp-nav-layout {
  overflow: scroll;
  padding-top: 4.3vh;
}
.open .header_nav{
  opacity: 0;
  visibility: hidden;
}
}




/* ===================================================================
// フッター
// ===================================================================*/

.footer{
	background-color: #000;
  width : calc( 100% - var(--header-blank));
  margin: 0 0 0 auto;
  padding: 7rem 17.7rem 0 12.7rem;
  clip-path: polygon(0% 0%, 100% 22%, 100% 100%, 0 100%);
  margin-left: var(--header-blank);
}
.footer .footer_main{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-bottom: 1.75rem;
}
.footer .footer_main .logo{
  width: 100%;
  margin-bottom: 2.33rem;
}
.footer .footer_main .logo a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
}
.footer .footer_main .logo img{
  height: 6.7rem
}
.footer .footer_main .logo div p{
  font-size: max(1.1rem, 11px);
  letter-spacing: .225rem;
}
.footer .footer_main .logo div h1{
  font-size:max(2.7rem, 16px) ;
}
.footer .footer_main .logo div h1 span{
  font-size: max(1.6rem, 16px);
  letter-spacing: .352rem;
  margin-right: 1rem;
}
.footer .footer_main .footer_company{
  display: flex;
  flex-direction: column;
}
.footer .footer_main .footer_company .footer_info{
	width: initial;
	text-align: left;
  display: flex;
  gap: 6.2rem;

}
.footer .footer_main .footer_company .footer_info li h3{
  font-size: max(1.5rem, 15px);
  font-weight: 400;
  margin-bottom: .67rem;
}
.footer .footer_main .footer_company .footer_info li p{
  font-size: max(1.4rem, 14px);
  font-weight: 500;
  line-height: 1.357;
}
.footer .footer_main .footer_company .sns{
  justify-content: flex-start;
  margin-top: 3rem;
  gap: 3rem;
}
.footer .footer_main .footer_company .sns img{
  width: 4.2rem;
}
.footer_menu{
  display: flex;
  gap: 4.1rem;
}
.footer_menu ul{
	list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.footer_menu ul li{

}
.footer_menu ul li a{
  font-size: max(1.4rem, 14px);
  font-weight: 500;
}

.footer_menu ul li:nth-last-of-type(1){
  margin-top: .75rem;
  min-width: 14.2rem;
}
.footer_menu ul li:nth-last-of-type(1) a{
  font-size: max(1.6rem, 16px);
  display: block;
  text-align: center;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
.footer_menu ul:nth-of-type(1) li:nth-last-of-type(1) a{
  background-color: #806200;
  padding: 1.6rem 1rem 1.4rem;
}
.footer_menu ul:nth-of-type(2) li:nth-last-of-type(1) a{
  background-color: #29859F;
  padding: 1.6rem 1rem 1.4rem;
}
.footer .copyright{
  font-size: max(1rem, 10px);
	color: #fff;
	width: 100%;
	padding-bottom: 1.1rem;
  font-weight: 500;
}
.footer{
  position: relative;
  z-index: 50;
}
@media screen and (max-width: 1240px) {
  .footer {
    padding: 7rem var(--wrapper) 0;
  }
}
@media screen and (max-width: 1021px) {
  .footer{
    clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0 100%);
  }

.footer_menu {
  width: 100%;
  gap: 13.5rem;
  margin-top: 3rem;
}
}
@media screen and (max-width: 767px) {
  .footer{
    clip-path: polygon(0% 0%, 100% 4.5%, 100% 100%, 0 100%);
    padding: 6.2rem var(--wrapper);
    margin: 0;
  }
  .footer .footer_main{
    padding-bottom: 4.45rem;
  }
.footer .footer_main .logo a {

  gap: .471rem;
}
.footer .footer_main .logo img {
  height: 5.9rem;
}
.footer .footer_main .logo div p {
  font-size: .9rem;
  letter-spacing: .184rem;
}
.footer .footer_main .logo div h1 {
  font-size: 2.3rem;
  margin-top: .5rem;
}
.footer .footer_main .logo div h1 span {
  font-size: 1.4rem;
  letter-spacing: .308rem;
}
.footer .footer_main .footer_company .footer_info {
  gap: 1.7rem;
  flex-direction: column;
  margin-bottom: 4rem;
}
.footer .footer_main .footer_company .sns{
  display: none;
}
.footer_menu {
    gap: 3.1rem;
    margin-top: 0rem;
}

.footer .copyright {
  padding-bottom: 0;
}
.footer_menu ul li:nth-last-of-type(1){
  min-width: 13.8rem;
}
.footer_menu ul li:nth-last-of-type(1) a {
  padding: 1.6rem 1rem 1.4rem;
}
}

/* ===================================================================
// メイン
// ===================================================================*/
main{
  background: transparent linear-gradient(180deg, #000000 0%, #0A0A0A 0%, #000000 10%, #717171 22%, #000000 55%, #AFAFAF 78%, #000000 100%) 0% 0% no-repeat padding-box;
  padding-left: var(--header-blank);
}
@media screen and (max-width: 767px) {
  main{
    background: transparent linear-gradient(180deg, #0A0A0A 0%, #000000 12%, #717171 22%, #000000 61%, #AFAFAF 81%, #000000 100%) 0% 0% no-repeat padding-box;
  }
}
/*バックテキスト*/
.back_txt{
  position: absolute;
  z-index: 0;
  width: 100%;
}
.back_txt ul{
  animation: flowing 10s linear infinite;
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  gap: 10%;
  position: absolute;
  top: 0;
  left: 0;
}
.back_txt li{
  font-size: 19rem;
  letter-spacing: 1.14rem;
  color: transparent;
  -webkit-text-stroke: .2rem #fff;
  font-weight: 900;
  font-family: var(--font-cjk);
  white-space: nowrap;
}
@keyframes flowing {
  0% { transform:translate(0 , -50%); }
  100% { transform:translate(-100% , -50%); }
}
.back_txt_still{
  font-size: 16.3rem;
  letter-spacing: .978rem;
  color: transparent;
  -webkit-text-stroke: .2rem #393939;
  font-weight: 900;
	will-change: transform;
}
@media screen and (max-width: 767px) {
  .back_txt li{
    font-size:9rem ;
    letter-spacing: .54rem;
    -webkit-text-stroke-width: .1rem;
  }
  .back_txt_still{
    font-size: 9rem;
    letter-spacing: .54rem;
    -webkit-text-stroke-width: .1rem;
  }
}
/*サブタイトル*/
.subttl{
  display: flex;
  flex-direction: column;
}
.subttl h2{
  font-size: max(1.6rem, 16px);
  color: #fff;
  font-family: var(--font-noto);
  letter-spacing: .096rem;
}
.subttl h3{
  font-size: 4rem;
  font-family: var(--font-en);
  color: var(--thema-color);
  font-style: italic;
  letter-spacing: .24rem;
}
.subttl2 h2{
  color: var(--thema-color);
  font-family: var(--font-en);
  font-style: italic;
  font-size: max(2rem, 16px);
  letter-spacing: .1rem;
}
.subttl2 h3{
  font-family: var(--font-noto);
  color: #fff;
  font-style: normal;
  font-size: 3rem;
}
.subttl3 h2{
  color: var(--thema-color);
  font-family: var(--font-en);
  font-style: italic;
  font-size: 4rem;
  letter-spacing: .24rem;
}
.subttl3 h3.catch_txt{
  font-family: var(--font-noto);
  color: #fff;
  font-style: normal;
  font-size: 5rem;
  margin-top: 1.4rem;
}
@media screen and (max-width: 767px) {
.subttl h3 {
    font-size: 3rem;
}
.subttl3 h2{

  font-size: 3rem;
  letter-spacing: .18rem;
}
.subttl3 h3.catch_txt{

  font-size: 2.8rem;
  letter-spacing: .168rem;
}
}
/*リンク*/
.link_flex{
  display: inline-flex;
  gap: 1rem;
  align-items: end;

}
.link_flex p{
  color: #fff;
  border-bottom: .1rem solid #fff;
  margin-bottom: 1.2rem;
  padding-right: 1.5rem;
  font-family: var(--font-noto);
  transition: all .5s;
}
.link_flex img{
  width: 7rem;
  transition: all .5s;
}
.link_flex:hover{
  opacity: 1;
}
.link_flex:hover p{
  opacity: .7;
}
.link_flex:hover img{
  transform: translate( 10%, -10%);
}
@media screen and (max-width: 767px) {

.link_flex p {
  margin-bottom: 0;
  padding-right: 0rem;
  padding-bottom: 1rem;
  font-size: max(1.6rem, 16px);
  line-height: 1;
}

.link_flex img {
  width: 4.8rem;
  transition: all .5s;
}
}
/*各ブロックのキャッチコピー*/
.catch_txt{
  font-size: 5rem;
  letter-spacing: .3rem;
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .catch_txt{
    font-size: 2.8rem;
  letter-spacing: .168rem;
  }
}
/*flexブロック*/
.flex_block{
  display: flex;
  justify-content: space-between;
  position: relative;
}
.flex_block .flex_block_img{
  width: 45.55%;
}
.flex_block .flex_block_txt{
  width: 45.55%;
}
@media screen and (max-width: 767px) {
  .flex_block{
    flex-wrap: wrap;
  }
  .flex_block .flex_block_img{
    width: 100%;
  }
  .flex_block .flex_block_txt{
    width: 100%;
  }
}
/* -----------top_recruit---------------- */
.top_recruit{
  padding: 6.53rem var(--wrapper);
  position: relative;
  overflow: hidden;
}
.top_recruit .top_recruit_box{
  display: block;
  position: relative;
  border: 1rem;
  width: 100%;
  height: 23.5rem;
  z-index: 1;
}
.top_recruit .top_recruit_box .top_recruit_img{
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1rem solid #fff;
  overflow: hidden;
}
.top_recruit .top_recruit_box .top_recruit_img picture{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;


}
.top_recruit .top_recruit_box .top_recruit_img img{
  width: 100%;
  height: 100%;
    object-fit: cover;
    transition: all 1s;
}
.top_recruit .top_recruit_box .top_recruit_img::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  background-color: rgba(0, 0, 0, .78);
  display: block;
}

.top_recruit .top_recruit_box .top_recruit_txt{
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 4.13rem 1rem;
}
.top_recruit .top_recruit_box .top_recruit_txt p{
  font-size: max(2.5rem, 16px);
}
.top_recruit .top_recruit_box .top_recruit_txt h2{
  font-size: 6rem;
  margin-bottom: .7rem;
}
.top_recruit .top_recruit_box .top_recruit_txt span{
  font-size: max(2.5rem, 16px);
  transition: all 1s;
  display: block;
}
.top_recruit .top_recruit_box:hover{
  opacity: 1;
}
.top_recruit .top_recruit_box:hover img{
  transform:scale(1.2,1.2);
}
.top_recruit .top_recruit_box:hover .top_recruit_txt span{
  transform: translate(1rem, 0);
  opacity: 1;
}
.top_recruit .back_txt{
  top: 53%;                        
  transform: translateY( -50%);
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .top_recruit {
    padding: 4.1rem var(--wrapper) 3.3rem;
  }
  .top_recruit .top_recruit_box .top_recruit_txt p {
    font-size: 1.2rem;
}
.top_recruit .top_recruit_box .top_recruit_txt h2 {
  font-size: 3.5rem;
  margin-bottom: .566rem;
  margin-top: 1rem;
}
.top_recruit .top_recruit_box .top_recruit_txt span{
  font-size: 1.2rem;
}
.top_recruit .top_recruit_box {
  height: 13.85rem;

}

.top_recruit .top_recruit_box .top_recruit_img {
  border: .5rem solid #fff;
}
.top_recruit .top_recruit_box .top_recruit_txt {
  padding: 1.72rem 2rem 2.5rem;
}
}
/* -----------top_news---------------- */
.top_news{
  padding: 1.5rem 0 6rem var(--wrapper);
}
.top_news .top_news_l{
  margin-top: 1.8rem;
}


.top_news .top_news_r{
  background-color: #fff;
  padding: 4.4rem 3rem 4.3rem 13%;
  width: 67.35%;
  clip-path: polygon(7% 0%, 100% 0%, 100% 100%, 0 100%);
}
.top_news .top_news_r a{
  display: flex;
  gap: 3.3rem;
  margin-bottom: 1.2rem;
}
.top_news dd{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .top_news{
    padding-top: 0;
    padding-bottom: 14.4rem;
    gap: 1.85rem;
    position: relative;
  }

.top_news .top_news_r {
  width: 100%;
  padding: 2.3rem 4rem 2.6rem 4.7rem;
}
.top_news .top_news_r a {
  display: flex;
  gap: 0;
  margin-bottom: 1.4rem;
  flex-direction: column;
}
.top_news .link_flex {
  position: absolute;
  bottom: 5.2rem;
  left: 50%;
  transform: translateX(-50%);
}
.top_news .link_flex p{
  padding-right: 1.2rem;
}
}
/* -----------top_message---------------- */
.top_message{
  position: relative;
  overflow: hidden;
  padding-bottom: 11.56rem;

}

.top_message .top_message_box{
  display: block;
  position: relative;
  overflow: hidden;
  clip-path: polygon(0% 15%, 100% 0%, 100% 85%, 0% 100%);
  margin: 0 auto;
  z-index: 1;
}

.top_message .top_message_txt{
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13.8rem 5rem;
}
.top_message .top_message_txt .subttl{
  text-align: center;
  margin-bottom: 2.45rem;
}
.top_message .top_message_txt .catch_txt{
  margin-bottom: 3rem;
}
.top_message .top_message_txt>p{
  text-align: center;
  max-width: 100%;
  margin-bottom: 3.4rem;
}
.top_message .top_message_back{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.top_message .top_message_back picture{
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: cover;
}
.top_message .top_message_back picture img{
  object-fit: cover;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.top_message .top_message_back::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .79);
  z-index: 2;
}
.top_message .back_txt_still{
  bottom: 3.7%;
  right: -1.5%;
  transform: rotate(-6deg);
  margin-top: -7%;
}
@media screen and (max-width: 767px) {
  .top_message {
    padding-bottom: 6.6rem;
}
.top_message .top_message_box {
  clip-path: polygon(0% 10%, 100% 0%, 100% 90%, 0% 100%);
}
  .top_message .top_message_txt {
    padding: 13.8rem var(--wrapper) 11.7rem;
}

.top_message .top_message_txt .catch_txt {
  margin-bottom: 3.3rem;
  text-align: center;
}

.top_message .top_message_txt>p {
    text-align: left;
}
.top_message .back_txt_still {
display: none;
}
}
/* -----------top_feature---------------- */
.top_feature{
  padding-right: var(--wrapper);
  gap: 1rem;
  margin-bottom: 15.9rem;
}
.top_feature .flex_block_img{
  width: 51.78%;
  position: relative;
}

.top_feature .flex_block_img picture:nth-child(1){
  visibility: visible;
  opacity: 1;
  transition: all .5s;
  position: relative;
  width: 100%;
  height: 100%;  
  object-fit: cover;
}
.top_feature .flex_block_img picture:nth-child(2){
  visibility: hidden;
  opacity: 0;
  transition: all .5s;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;  
  object-fit: cover;
}

.top_feature:hover .flex_block_img picture:nth-child(1){
  visibility: hidden;
  opacity: 0;
}
.top_feature:hover .flex_block_img picture:nth-child(2){
  visibility: visible;
  opacity: 1;
}

.top_feature .flex_block_txt{
  width: 45.55%;
}
.top_feature .flex_block_txt .catch_txt{
  margin-top: 3.55rem;
  margin-bottom: 3.25rem;
}
.top_feature .flex_block_txt>p{
  margin-bottom: 2.1rem;
}
@media screen and (max-width: 767px) {
.top_feature {
  padding: 13.7rem var(--wrapper) 7.2rem;
  margin: 0;
  gap: 2.9rem;
}

.top_feature .flex_block_txt {
  width: 100%;
}
.top_feature .flex_block_img {
  width: 100%;
}
.top_feature .flex_block_txt .subttl{
  position: absolute;
    top: 0;
}
.top_feature .flex_block_txt .catch_txt {
  margin-top: 0;
  margin-bottom: 0;
  position: absolute;
  top: 7rem;
}
.top_feature .link_flex{
  display: flex;
  justify-content: end;
}
.top_feature.active .flex_block_img picture:nth-child(1){
  visibility: hidden;
  opacity: 0;
}
.top_feature.active .flex_block_img picture:nth-child(2){
  visibility: visible;
  opacity: 1;
}

}
/* -----------top_service---------------- */
.top_service{
  padding-bottom: 20rem;
  overflow: hidden;
}
.top_service .flex_block_txt{
  z-index: 1;
  width: 50%;
}
.top_service .flex_block_txt .catch_txt{
  margin: 2.05rem 0 2.85rem;
}
.top_service .flex_block_txt>p{
  margin-bottom: 2.2rem;
}
.top_service .flex_block_img{
  width: 50%;
  margin-top: 2.5rem;
}
.top_service .back_txt{
  bottom: 27%;
  transform: rotate(-5deg);
}
.top_service .back_txt li{
  -webkit-text-stroke: .2rem #484848;
}
@media screen and (max-width: 767px) {
  .top_service{
    padding-bottom: 15.5rem;
  }
  .top_service .flex_block_txt{
    z-index: 1;
    width: 100%;
  }
  .top_service .flex_block_img{
    width: 100%;
  }
.top_service .flex_block_txt .catch_txt {
  margin: 1.85rem 0 3.6rem;
}
  .top_service .flex_block_txt>p{
    position: absolute;
    margin: 0;
    bottom: 1.2rem;
    padding-right: var(--wrapper);
    }
    .top_service .back_txt{
      display: none;
    }
    .top_service .flex_block_img{
      width: 100%;
      margin-top: 0;
      margin-bottom: 2.9rem;
    }
    .top_service .link_flex{
      display: none;
    }
}
/* -----------top_kensetsu---------------- */
.top_kensetsu{
  margin-top: -1rem;
  padding-bottom: 20rem;
  position: relative;
  overflow: hidden;
}
.top_kensetsu .flex_block_img{
  position: relative;
  object-fit: cover;
  width: 78%;
  display: none;
}
.top_kensetsu .top_kensetsu_txt{
  position: absolute;
  z-index: 1;
  bottom: 4.4rem;
}
.top_kensetsu .flex_block_img.is-active{
  display: block;
}
.top_kensetsu .top_kensetsu_txt .subttl h3{
  text-shadow: 0px 0px .6rem #000000B3;
}
.top_kensetsu .top_kensetsu_txt .catch_txt{
  margin-top: .8rem;
  margin-bottom: 2.5rem;
  text-shadow: 0px 0px .6rem #000000B3;
  letter-spacing: .1rem;
	font-size: 3.8rem;
}
.top_kensetsu .top_kensetsu_img{
position: relative;
  z-index: 0;
  width: 100%;
  margin-bottom: 4rem;
}
.top_kensetsu .flex_block_txt{
  display: flex;
  flex-direction: column;
  width: fit-content;
  gap: 4.24rem;
  margin-top: 3rem;
  align-items: flex-end;
  z-index: 1;
  position: absolute;
  right: var(--wrapper);
  z-index: 2;
}
.top_kensetsu .flex_block_txt button{
  background: none;
  border: none;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 1.5rem;

}
.top_kensetsu .flex_block_txt button p{
  border-bottom: #fff .1rem solid;
  color: #fff;
  padding-bottom: .4rem;
  font-size: max(2.4rem, 16px);
  font-family: var(--font-noto);
}
.top_kensetsu .flex_block_txt button::before{
  content: "";
  background-color: var(--thema-color);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 100%;
  display: block;
}
.top_kensetsu .flex_block_txt button.is-active p{
  font-size: max(3.4rem, 16px);
  letter-spacing: .204rem;
  border-bottom: 1rem solid #fff;
}
.top_kensetsu .flex_block_txt button.is-active::before{
  width: 1.54rem;
  height: 1.54rem;
}
.top_kensetsu .back_txt{
  bottom: 25.7%;
  transform: rotate(-5.9deg);
}
.top_kensetsu .back_txt li{
  -webkit-text-stroke-color: #2F2F2F;

}
@media screen and (max-width: 767px) {
  .top_kensetsu{
    padding-top: 3.8rem;
    padding-bottom: 7.6rem;
  }
.top_kensetsu .flex_block_img {
  width: 100%;
}
.top_kensetsu .top_kensetsu_img {
  width: 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 73%, 0 83%);
  margin-bottom: -5rem;
}
.top_kensetsu .flex_block_img.is-active {
  display: flex;
  flex-direction: column-reverse;
}
.top_kensetsu .top_kensetsu_txt {
  position: relative;
  bottom: initial;
  width: 100%;
  margin-top: 0;
}
.top_kensetsu .subttl2 h3{
  margin-bottom: .7rem;
}
.top_kensetsu .top_kensetsu_txt .catch_txt{
  font-size: 2.6rem;
  margin-top: 2.2rem;
    margin-bottom: 1.25rem;
}
.top_kensetsu .link_flex{
  margin: 0 auto;
  justify-content: center;
  display: flex;
}
.top_kensetsu .back_txt{
  display: none;
}
.top_kensetsu .flex_block_txt {
  display: flex;
  gap: 1.2rem 0;
  margin-top: 3rem;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  position: relative;
  right: initial;
}

.top_kensetsu .flex_block_txt button {
  background: none;
  display: flex;
  align-items: center;
  gap:  0;
  width: 47%;
  justify-content: center;
  border: .1rem solid #fff;
  padding: 1rem;
  background-color: #1D1D1D;
  height: 3.9rem;
}

.top_kensetsu .flex_block_txt button p {
  border-bottom: none; 
  color: #fff;
  padding-bottom: 0rem;
  font-size: 1.8rem;
  letter-spacing: .108rem; 
  font-weight: 500;
}
.top_kensetsu .flex_block_txt button::before{
  content: none;
}
.top_kensetsu .flex_block_txt button.is-active p{
    font-size: 1.8rem; 
    letter-spacing: .108rem; 
     border-bottom: none;
     font-weight: 700;
}
.top_kensetsu .flex_block_txt button.is-active{
  border: .3rem solid #fff;
}
}
/* -----------top_numbers---------------- */
.top_numbers{
  gap: 1rem;
  margin-top: -10rem;
}
.top_numbers .flex_block_img{
  width: 45%;
}
.numbers_block ul.numbers_ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 93%;
  gap: 1.33rem 1rem;
}
.numbers_block .numbers_ul li{
  width: 46%;
  background-color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.numbers_block .numbers_ul li::after{
  content: "";
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 118.7%;
  height: 100%;
  z-index: 0;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.numbers_block .numbers_ul li div{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.89rem 1rem 1.5rem;
  justify-content: space-between;
}
 .numbers_block .numbers_ul li h3{
  font-size: max(2.7rem, 16px);
  color: #831C22;
}
.numbers_block .numbers_ul li h3 span{
  font-size: 5.5rem;
  font-family: var(--font-en);
  font-style: italic;
  letter-spacing: .3rem;
  color: #831C22;
}
 .numbers_block .numbers_ul li p{
  font-size: max(2rem, 16px);
}
.top_numbers .flex_block_txt{
  margin-top: .7rem;
  width: 50%;
}
.top_numbers .flex_block_txt .catch_txt{
  margin: 1.76rem 0 3.11rem;
}
.top_numbers .flex_block_txt>p{
  margin-bottom: 3.46rem;
}
@media screen and (max-width: 767px) {
  .top_numbers {
    gap: 2.7rem;
    margin-top: 0;
    flex-wrap: wrap;
    padding-top: 13.2rem;
    padding-bottom: 7.65rem;
}
.top_numbers .flex_block_img {
  width: 100%;
}
.top_numbers .flex_block_txt {
  margin-top: 0;
  width: 100%;
}
#content .numbers_block .numbers_ul li h3 {
  font-size: 1.8rem;
}
#content .numbers_block .numbers_ul li h3 span {
  font-size: 3.7rem;
}
#content .numbers_block .numbers_ul li img{
  height: 5.5rem;
}

#content .numbers_block .numbers_ul li p {
  font-size: 1.3rem;
  line-height: 1;
  margin-top: .9rem;
}
.top_numbers .subttl{
  position: absolute;
  top: 0;
}
.top_numbers .catch_txt{
  position: absolute;
  top: 5.52rem;
  margin: 1.85rem 0 0;
}
.top_numbers .link_flex {
  margin: 0 auto;
  justify-content: center;
  display: flex
;
}
}
/* -----------top_works---------------- */
.top_works{
  padding-top: 7rem;
  padding-left: var(--wrapper);
  position: relative;
  overflow: hidden;
}
.top_works .flex_block_txt{
  width: 37.64%;
  padding-top: 14.8rem;
}

.top_works .flex_block_txt .catch_txt{
  margin: .3rem 0 2.8rem;
}
.top_works .flex_block_txt>p{
  margin-bottom: 1.46rem;
}
.top_works .flex_block_img{
  width: 57.8%;
  z-index: 2;
}
.top_works .flex_block_img  li.top_works_li{
  background-color: #fff;
  width: 30.6rem;

  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  margin-left: 20%;
}
.top_works .flex_block_img  li.top_works_li a{
  width: 100%;
  height: 100%;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  display: block;
  padding: 1.6rem 1.66rem 2rem 2.88rem;
}
.top_works .flex_block_img li.top_works_li picture{
  width: 100%;
  margin-bottom: 1.35rem;

}
.top_works .flex_block_img li.top_works_li picture img{
  object-fit: cover;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  width: 100%;
}
.top_works .flex_block_img li.top_works_li h3{
  font-size: max(2.2rem, 16px);
  width: 90%;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.top_works .slide-dots{
	text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 1.8rem;
  padding-right: var(--wrapper);
  width: 100%;
  height: .4rem;
}
.top_works .slide-dots li {
	display: inline-block;
	margin: 0;
  width: 20%;
  height: 100%;
  }
  .top_works .slide-dots li button {
	position: relative;
	text-indent: -999.9rem;
  width: 100%;
  height: 100%;
  }
  .top_works .slide-dots li button::before {
	content: "";
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
  }
  .top_works .slide-dots li.slick-active button::before {
	background-color: #646464;
	
  }
  .top_works .slide-dots li button {
	background: none;
	border: none;
	outline: none;
	padding: 0 0.7rem;
  }

  
  .top_works .arrow_box{
    display: flex;
    gap: 1.8rem;
    justify-content: end;
    margin-right: var(--wrapper);
  }
  .top_works .slick-arrow span {
    font-family: var(--font-cjk);
    font-size: 2.8rem;
    font-weight: 500;
  }
  .top_works .back_txt_still{
    top: 0;
    right: -80%;
    z-index: 0;
    -webkit-text-stroke-color: #fff;
  }
  .arrow_box .slick-prev,  .arrow_box .slick-next{
    display: inline-block;
    background-color: #fff;
    width: 6.6rem;
    height: 6.6rem;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    cursor: pointer;
  }
  @media screen and (max-width: 767px) {
    .top_works{
      padding: 0 0 14.4rem;
    }
.top_works .flex_block_txt {
  width: 100%;
  padding: 0 var(--wrapper);
}

.top_works .flex_block_img {
  padding-top: 6.9rem;
  width: 100%;
  z-index: 2;
}
.top_works .link_flex{
  position: absolute;
  bottom: 6.9rem;
  left: 50%;
  transform: translateX(-50%);
}
.top_works .flex_block_img li.top_works_li {
  margin-left: 0;
}
.top_works .slide-dots{
  padding: 0 var(--wrapper);
}
.top_works .arrow_box {
  margin-right: 0;
  padding: 0 var(--wrapper);
}
.slick-initialized .slick-slide {
  margin: 0 var(--wrapper);
}
 .arrow_box .slick-prev, .arrow_box .slick-next {
  width: 5.5rem;
  height: 5.5rem;
  }

.top_works .back_txt_still {
  top: 25%;
  right: -111rem;
  z-index: 0;
  -webkit-text-stroke-color: #fff;
}
}

@media screen and (max-width: 550px) {
  .top_works .back_txt_still {
    top: 32%;
  }
}
/* -----------top_recruit---------------- */
.top_recruit2{
  position: relative;
  overflow: hidden;
  margin-top: 19rem;
  padding-bottom: 10.8rem;
}
.top_recruit2 .subttl{
  text-align: center;
  padding-bottom: 23.55rem;
  z-index: 2;
  position: relative;
}
.top_recruit2 .top_recruit_txt{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
}
.top_recruit2 .top_recruit_txt .catch_txt{
  width: 85.2rem;
  max-width: 100%;
  white-space: nowrap;
}
.top_recruit2 .top_recruit_txt>p{
  width: 67.8rem;
  max-width: 100%;
  margin: 2.15rem 0 2.7rem;
}
.top_recruit2 .top_recruit2_img{
  height: 100%;
  position: absolute;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--wrapper);
  top: 0;
  left: 0;
  padding-right: 11%;
}
.top_recruit2 .top_recruit2_img picture{
  z-index: 1;
  width: 61.93%;
  transition: transform 0.3s ease-out; /* ズームの動きを滑らかにする */
  margin-bottom: 8rem;
}
.top_recruit2 .back_txt {
  z-index: 0;
  top: 29%;
}
@media screen and (max-width: 767px) {
  .top_recruit2{
    margin-top: 0;
    padding-bottom: 6.93rem;
  }
.top_recruit2 .subttl {
  padding-bottom: 14rem;
}

.top_recruit2 .top_recruit2_img {
  height: 45%;
}
.top_recruit2 .top_recruit2_img picture {
  width: 74.2%;
  margin: 0;
}
.top_recruit2 .top_recruit_txt>p {
    width: 67.8rem;
    max-width: 100%;
    margin: 1.9rem 0 2.2rem;
    text-align: left;
}
.top_recruit2 .top_recruit2_img {
  top: 16%;
}
.top_recruit2 .back_txt {
  z-index: 0;
  top: 14%;
}
}
@media screen and (max-width: 520px) {

  .top_recruit2 .top_recruit2_img {
    top: 0%;
  }
  .top_recruit2 .top_recruit2_img picture {
    width: 74.2%;
    margin: 2rem 0 0;
}
}
/* -----------top_interview---------------- */
.top_interview{

}
.top_interview .subttl{
  text-align: center;
}
.top_interview li.top_interview_li{
  margin-left: 57%;
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  padding-top: 5rem;
}
.top_interview li.top_interview_li a{
  display: block;
  clip-path: polygon(0% 6%, 100% 0%, 100% 94%, 0 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc( 100% - 5rem);
  z-index: 5;
}
.top_interview li.top_interview_li::after{
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #000;
  clip-path: polygon(0% 6%, 100% 0%, 100% 94%, 0 100%);
  width: 100%;
  height: calc( 100% - 5rem);
  z-index: 0;
}

.top_interview li.top_interview_li picture{
  object-fit: cover;
  width: 100%;
  transition: all .3s;
  position: relative;
  z-index: 1;
  top: 4.7rem;
  display: block;
}
.top_interview li.top_interview_li a:hover{
  opacity: 1;
}
.top_interview li.top_interview_li a:hover + picture{
  transform: scale(1.18);
  transform-origin: bottom;
}
.top_interview li.top_interview_li div{
  background-color: var(--thema-color);
  padding: 1rem 1rem .5rem 3.8rem;
  transform: rotate(-6deg);
  width: 107%;
  left: -3%;
  position: relative;
  position: relative;
  z-index: 1;
}
.top_interview li.top_interview_li div span{
  font-size: 1.6rem;
  margin-right: 1em;
  position: relative;
  z-index: 1;
}
.top_interview li.top_interview_li div h3{
  font-size: 3.9rem;
  margin-top: .5rem;
  position: relative;
  z-index: 1;
}
.top_interview li.top_interview_li p{
  font-size: max(2.5rem, 16px);
  padding: 1.7rem 1.9rem 4rem 2.9rem;
  transform: rotate(-6deg);
  position: relative;
  z-index: 1;
  line-height: 1.4;
}
.top_interview .slick-slide{
  margin: 0 .55%;
}


.top_interview .slide-dots{
	text-align: center;
  margin-top: 5rem;
  margin-bottom: 2rem;
  height: 1.7rem;
  display: flex;
  justify-content: center;
  gap: 1.3rem;
  padding-right: 1.7%;
}
.top_interview .slide-dots li {
	display: inline-block;
	margin: 0;
  width: 1.7rem;
  height: 1.7rem;
  }
  .top_interview .slide-dots li button {
	position: relative;
	text-indent: -999.9rem;
  width: 100%;
  height: 100%;
  background: none;
	border: none;
	outline: none;
  }
  .top_interview .slide-dots li button::before {
	content: "";
    cursor: pointer;
    margin: auto;
    position: absolute;
    right: 0;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-radius: 100%;
    background-color: #D8D8D8;
  }
  .top_interview .slide-dots li.slick-active button::before {
	background-color: var(--thema-color);
  }
  .top_interview .link_flex{
    justify-content: center;
    display: flex;
  }
  @media screen and (max-width: 767px) {
    .top_interview li.top_interview_li {
      margin-left: 0;
    }
    .top_interview li.top_interview_li {
      padding-top: 1.4rem;
    }
    .top_interview .slide-dots {
      margin-top: 1.4rem;
      margin-bottom: 2.2rem;
    }
    .top_interview .slide-dots li {
      width: 1.1rem;
      height: 1.1rem;
  }
  .top_interview .slide-dots li button::before {
      height: 1.1rem;
      width: 1.1rem;
  }
  .top_interview li.top_interview_li a:hover + picture {
    transform: scale(1.1);
  }
  
  }
  @media screen and (max-width: 520px) {
    .top_interview li.top_interview_li a:hover + picture {
      transform: scale(1.18);
    }
  }
/* -----------top_sns------------- */
.top_sns{
  padding-top: 10.9rem;
  padding-bottom: 13.3rem;
  position: relative;
  overflow: hidden;
}
.top_sns .catch_txt{
  text-align: center;
  margin-bottom: 4rem;
  text-shadow: 0px 0px .6rem #000000B3;
}
.top_sns .top_sns_flex{
  display: flex;
  justify-content: center;
  gap: 3.8rem;
}
.top_sns .top_sns_flex li{
  width: 35rem;
  position: relative;
  z-index: 2;
  max-width: 50%;
}
.top_sns .top_sns_flex li a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  height: 100%;
  background-color: #fff;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  padding: 3.3rem 2rem 3.2rem;
  position: relative;
  transition: all .3s;
}

.top_sns .top_sns_flex li img{
  width: 6rem;
}
.top_sns .top_sns_flex li p{
  font-family: var(--font-en);
  font-style: italic;
  font-size: 4rem;
  letter-spacing: .24rem;
  line-height: 1;
  transition: all .3s;
}
.top_sns .top_sns_flex li a:hover{
  background-color: var(--thema-color);
  opacity: 1;
}
.top_sns .top_sns_flex li a:hover p{
  color: #fff;
}
.top_sns .back_txt{
  top: 55%;
  transform: translateY(-50%);
}
.top_sns .back_txt li{
  -webkit-text-stroke: .1rem #fff;
}
@media screen and (max-width: 767px) {
  .top_sns{
    padding: 6.9rem var(--wrapper) ;
  }
  .top_sns .top_sns_flex{
    gap: 1.5rem;
  }
  .top_sns .top_sns_flex li{
    width: 14.7rem;
  }
  .top_sns .top_sns_flex li a {
    gap: 1rem;
    background-color: #fff;
    clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
    padding: 1.5rem 2.5rem 1.2rem;
}
.top_sns .top_sns_flex li p {
  font-size: 1.8rem;
  letter-spacing: .108rem;
}
.top_sns .catch_txt {
  margin-bottom: 5.2rem;
}
.top_sns .back_txt {
  top: 63%;
}
}
/* -----------foot_contact------------- */
.foot_contact{
  background-color: var(--thema-color);
  padding-top: 13.9rem;
  padding-bottom: 22rem;
  margin-bottom: -20rem;
  clip-path: polygon(0% 0%, 100% 22%, 100% 100%, 0 100%);
}

.foot_contact div{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.2rem;
}
.foot_contact div h3.en{
  font-size: 3.5rem;
  font-style: italic;
  margin-bottom: 1.9rem;
}
.foot_contact div h2.jp_noto{
  font-size: 5rem;
}
.foot_contact  .link_flex p{
  padding-right: 0;
}
@media screen and (max-width: 767px) {
  .foot_contact {
    clip-path: polygon(0% 0%, 100% 14%, 100% 100%, 0 100%);
}
}
@media screen and (max-width: 767px) {
  .foot_contact {
    clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0 100%);
    padding-top: 7.5rem;
    padding-bottom: 23rem;
  }
  .foot_contact div{
    margin-bottom: 0;
  }
  .foot_contact div h3.en {
    font-size: 1.6rem;
    margin-bottom: 0.8rem;
}
  .foot_contact div h2.jp_noto {
    font-size: 2.8rem;
    margin-bottom: 1.7rem;
}
.foot_contact .link_flex{
  margin-left: 3rem;
}
}
/* ------------------　ボックス背景ブロック ------------ */

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


/* ===================================================================
//                              下層ページ
// ===================================================================*/
/*mainttl*/
.mainttl{
  padding: 5.6rem 9.9rem 2rem;
}
.mainttl h1{
  font-size: max(2rem, 16px);
  color: #fff;
  font-family: var(--font-noto);
  letter-spacing: .12rem;
}
.mainttl h2{
  margin-bottom: 2.16rem;
}
.mainttl h2 svg {
  height: 6.223vw;
  width: min-content;
}
 @-webkit-keyframes animate-svg-stroke-1{0%{stroke-dashoffset:150.098681640625rem;stroke-dasharray:150.098681640625rem}100%{stroke-dashoffset:0;stroke-dasharray:150.098681640625rem}}@keyframes animate-svg-stroke-1{0%{stroke-dashoffset:150.098681640625rem;stroke-dasharray:150.098681640625rem}100%{stroke-dashoffset:0;stroke-dasharray:150.098681640625rem}}.svg-elem-1{-webkit-animation:animate-svg-stroke-1 2s cubic-bezier(0.47,0,0.745,0.715) 0s both;animation:animate-svg-stroke-1 2s cubic-bezier(0.47,0,0.745,0.715) 0s both}
@media screen and (max-width: 767px) {
  .mainttl{
    padding: 8.8rem var(--wrapper) 2.7rem;
  }
  .news_page .mainttl,.single_works_page .mainttl, .interview_page .mainttl, .favorite_page .mainttl{
    padding-bottom: 1.1rem;
  }
  .contact_page .mainttl{
    padding-bottom: 1.5rem;
  }

  .mainttl h2 {
    margin-bottom: 1rem;
}

.mainttl h2 svg{
  height: min-content;
}
.about_top .mainttl h2 svg{
  width: 16.5rem;
}
.works_page .mainttl h2 {
  margin-bottom: 0.5rem;
}
.company_page .mainttl h2{
  margin-bottom: 0;
}
.service_page .mainttl h2 svg{
  width: 23.3rem;
}
.company_page .mainttl h2 svg{
  width: 25.8rem;
}
.favorite_page .mainttl h2 svg{
  width: 26rem;
}
.interview_page .mainttl h2 svg{
  width: 26.9rem;
}
.news_page .mainttl h2 svg{
  width: 14.7rem;
}
.works_page .mainttl h2 svg{
  width: 17.1rem;
}
.contact_page .mainttl h2 svg{
  width: 21.6rem;
}
.mainttl h2 {
  font-size: 1.8rem;
  letter-spacing: .108rem;
}
}
/*breadcrumb*/
.breadcrumbs{
  display: flex;
  gap: .5rem;
  color: #626262;
  justify-content: end;
  padding-right: 1.4rem;
  margin-bottom: 1.2rem;
  align-items: baseline;
}
.breadcrumbs span{
  color: #626262;
  max-width: 13em;
  display: inline-block;
}
.breadcrumbs.pc{
  display: flex;
  align-items: flex-start;
}
.breadcrumbs.sp{
  display: none;
}
@media screen and (max-width: 767px) {
  .breadcrumbs.pc{
    display: none;
  }
  .breadcrumbs.sp{
    display: flex;
    margin-top: 1.3rem;
    margin-bottom: 1.3rem;
    padding-right: .6rem;
    align-items: flex-start;
  }
  .breadcrumbs.sp span{
    font-size: 1.2rem;
  }
}
/*anchor_list*/
.anchor_list{
  display: flex;
  width: 100%;
  border-top: .1rem solid #fff;
  border-bottom: .1rem solid #fff;
}
.anchor_list li{
  position: relative;
}
.anchor_list li p{
  padding: 3.95rem 4.9rem 3.9rem;
  font-size: max(1.8rem, 16px);
  display: block;
  width: 100%;
  text-align: center;
  letter-spacing: .108rem;
  line-height: 1;
}
.anchor_list li a{
  display: block;
  border-left: .1rem solid #fff;
  transform: skewX(-15deg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.anchor_list li:nth-last-of-type(1) a{
  border-right: .1rem solid #fff;
}
@media screen and (max-width: 993px) {
  .anchor_list li p {
    padding: 3.95rem 2.9rem 3.9rem;
  }
}
@media screen and (max-width: 767px) {
  .anchor_list{
    flex-wrap: wrap;
    border-bottom: none;
  }
  .anchor_list li{
    width: 49%;
    position: relative;
  }
  .anchor_list li p{
    padding: 1.65rem 1rem 1.6rem;
    font-size: 1.6rem;
  }
  .anchor_list li a{
    transform: skewX(-18deg);
  }
  .anchor_list li::after{
    content: "";
    display: block;
    height: .1rem;
    width: 105%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }
  .anchor_list li:nth-last-child(1)::after{
    display: none;
  }
  .anchor_list li:nth-last-child(1) a{
    border-bottom: .1rem solid #fff;
  }
  .anchor_list li:nth-child(even) a{
    border-right: .1rem solid #fff;
  }
}
/* ===================================================================
// aboutページ
// ===================================================================*/
.about_page{

}

.about_top , .recruit_top{
  margin-left: var(--header-blank);
  background: transparent linear-gradient(180deg, #000000 0%, #0A0A0A 0%, #000000 10%, #717171 22%, #000000 55%, #AFAFAF 78%, #000000 100%) 0% 0% no-repeat padding-box;
  z-index: 1;
  position: relative;
}

.test{
  position: relative;
}
@media screen and (max-width: 767px) {
  .about_top{
    z-index: 3;
  }
}
/*about_culture*/
.about_culture {
  position: relative;
  width: 85%;
  margin: 7.3rem auto 0;
  height: auto;
  z-index: 1;

}

.about_culture .about_culture_txt {
  position: relative;
  overflow: hidden;
}
.about_culture .about_culture_txt picture{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;

}
.about_culture .about_culture_txt picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.about_culture .about_culture_txt::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .78);
}
.about_culture .txt_wrap{
  z-index: 4;
  position: sticky;
  top: 0;
}
.about_culture .txt_wrap::after{
  content: "";
  display: block;
  height: calc(100vh - 35.7rem);
  background: transparent;
}
.about_culture .subttl {
  padding: 9.8rem 0rem 0 0rem;
  max-width: 102.04rem;
  margin: 0 auto 2rem;
  z-index: 2;
  position: relative;
}
.about_culture .catch_txt{
  padding: 0 0 5rem 0;
  max-width: 102.04rem;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}
.about_culture p {
  position: relative;
  font-size: max(2.5rem, 16px);
  padding: 0 0 0 0rem;
  line-height: 2.4;
  letter-spacing: .15rem;
  z-index: 3;
  padding-bottom: 5.6rem;
  max-width: 102.04rem;
  margin: calc( -100vh + 38.7rem) auto 0;

}

.about_culture .about_culture_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.about_culture .about_culture_img picture {
  width: 100%;
  height: 100vh;
  position: sticky;
  z-index: -1;
  top: 0
}
.about_culture .about_culture_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.about_culture .about_culture_img::after{
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .78);
}
@media screen and (max-width: 767px) {
  .about_culture {
    padding: 0  ;
    margin: 1.3rem auto 0;
}


.about_culture .about_culture_txt .subttl{
  padding-top: 6.3rem;
  max-width: 85vw;
}
.about_culture .about_culture_txt .catch_txt{
  padding-bottom: 4.37rem;
  max-width: 85vw;
}

.about_culture .txt_wrap::after {
  content: "";
  display: block;
  height: calc(100vh - 32.3rem);
}

.about_culture .subttl {
  margin-bottom: 1.85rem;
}
.about_culture p {
  font-size: 1.8rem;
  line-height: 2;
  letter-spacing: .12rem;
  overflow-y: scroll;
  margin-top: calc( -100vh + 32.3rem);
  max-width: 85vw;
  padding: 0 0 5.9rem 0;
}

}
/*about_numbers*/
.about_numbers{
  padding-top: 15.6rem;
  padding-bottom: 12.3rem;
  position: relative;
  overflow: hidden;
}
.about_numbers .subttl{
  text-align: center;
}
.about_numbers .subttl h2{
  margin-bottom: 1rem;
}
.about_numbers .catch_txt{
  margin: 2.45rem auto 3.8rem;
  text-align: center;
}
.about_numbers ul.about_numbers_ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 93%;
  gap: 3.8rem 0;
  position: relative;
    z-index: 1;
}
.about_numbers ul.about_numbers_ul li{
  width: 20.68%;
  height: min-content;
  background-color: #fff;
  position: relative;
  min-height: 21.9rem;
}
.about_numbers ul.about_numbers_ul li::after{
  content: "";
  position: absolute;
  background-color: #fff;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 118.7%;
  height: 100%;
  z-index: 0;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.about_numbers ul.about_numbers_ul li div{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.89rem 1rem 1.5rem;
  justify-content: space-between;
}
.about_numbers ul.about_numbers_ul li h3{
  font-size: max(2.7rem, 16px);
  color: #831C22;
  white-space: nowrap;
}
.about_numbers ul.about_numbers_ul li h3 span{
  font-size: 5.5rem;
  font-family: var(--font-en);
  font-style: italic;
  letter-spacing: .3rem;
  color: #831C22;
}
.about_numbers ul.about_numbers_ul li p{
  font-size: max(2rem, 16px);
  text-align: center;
}
.about_numbers .back_txt{
  transform: translateY(50%);
  bottom: 18.5%;
}
.about_numbers .back_txt li{
  -webkit-text-stroke-color: #fff;
}
@media screen and (max-width: 767px) {
  .about_numbers {
    padding-top: 10rem;
    padding-bottom: 10rem;
}
.about_numbers .catch_txt {
  margin: 0.6rem auto 3.1rem;
}
.about_numbers ul.about_numbers_ul li {
  width: 45.7%;
}
.about_numbers .back_txt {
  transform: translateY(50%);
  bottom: 9.2%;
}
.about_numbers ul.about_numbers_ul{
  gap: .9rem 0;
}
.about_numbers ul.about_numbers_ul li div{
  padding: 1.89rem .5rem 1.5rem;
}
}
/*about_mission*/
.about_mission{
  padding-bottom: 0;
  overflow: hidden;
}
.about_mission .subttl{
  text-align: center;
}
.about_mission .catch_txt{
  text-align: center;
  margin-bottom: 4.36rem;
}
.about_mission .about_mission_txt{
  width: 71.8rem;
  margin: 0 auto;
  background-color: #8E8E8E;
  max-width: 100%;
}
.about_mission .about_mission_txt h3{
  font-size: 5.5rem;
  background-color: #000;
  padding: 1.5rem 1rem ;
  text-align: center;
  transform: rotate(-2.5deg);
}
.about_mission p{
  margin: 3.5rem auto 0;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .about_mission .about_mission_txt h3 {
    font-size: 3.5rem;
    transform: rotate(-4deg);
  }
  .about_mission p {
    margin: 2.4rem auto 0;
}
  .about_mission {
    padding-bottom: 7rem;
}
.about_mission .catch_txt {
  margin-bottom: 2.4rem;
}


}

/*about_vision*/

.about_vision{
  position: relative;
  overflow: hidden;
  
}
.swiper-slide {
  -ms-touch-action: auto;
  touch-action: auto;
  justify-content: end;

}
.mySwiper .flex_wrap {
  justify-content: end;
  gap: 1rem;
  height: 100%;
  align-items: center;
}
.about_vision .about_vision_txt {
  position: absolute;
  left: 3%;
  top: 39%;
  transform: translateY(-50%);
}
.about_vision .about_vision_txt h4{
  font-size: 12.1rem;
  color: #fff;
  letter-spacing: .726rem;
  font-family: var(--font-cjk);
  line-height: .7;
}
.about_vision .about_vision_txt .about_vision_pagenation{
  display: flex;
  gap: 2.1rem;
  margin-top: 2.1rem;
}
.about_vision .swiper-wrapper{
  height: 100vh;
}
.about_vision .about_vision_box {
  width: 78.3%;
  padding: 7.68rem var(--wrapper) 8.6rem 12.4rem;
  background: #fff;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
  height: min-content;
}
.about_vision .about_vision_box .catch_txt{
  line-height: 1;
}
.about_vision .about_vision_box  p{
  margin-top: 2.5rem;
}
.about_vision .about_vision_box p.en{
  margin-top: 0;
}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {
  padding: 1.7rem 1.4rem;
  background-color: #fff;
  border-radius: 99rem;
  width: 4.4rem;
  position: relative;
  right: initial;
  top: initial;
  transform: initial;
}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
  width: 1.6rem;
  height: 1.6rem;
  background-color: rgba(41, 133, 159, 1);
}
.swiper-pagination-bullet-active {
  background-color: rgba(41, 133, 159, .47);
}
.reasons__sticky .back_txt{
  bottom: 25%;
  z-index: -1;
}
.about_vision .back_txt li{
  font-size: 16.2rem;
}
@media screen and (max-width: 767px){
  .about_vision{
    padding-left: var(--wrapper);
  }
  .about_vision .about_vision_txt {
    position: relative;
    left: initial;
    top: initial;
    transform: initial;
}
.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical>.swiper-pagination-bullets {
  display: none;
}
.about_vision .about_vision_box {
  width: 100%;
  padding: 3.68rem var(--wrapper) 4.85rem;
  background: #fff;
  clip-path: polygon(5.5% 0, 100% 0, 100% 100%, 0 100%);
  margin-bottom: 2rem;
}
.about_vision .back_txt {
  bottom: initial;
  top: 3rem;
  right: -2.5%;
}
.about_vision .about_vision_txt h4 {
  font-size: 9rem;
  line-height: .85;
}
.about_vision .about_vision_txt .about_vision_pagenation {
  margin-top: 1rem;
}

.about_vision .back_txt ul {
  animation: none;
  left: initial;
  position: relative;
  text-align: right;
  display: block;
}

.about_vision .back_txt li {
  font-size: 6rem;
}

}
@media screen and (max-width: 450px) {
  .about_vision .about_vision_box {
    clip-path: polygon(7.5% 0, 100% 0, 100% 100%, 0 100%);
  }
}
/*about_value*/
.about_value{
  position: relative;
}
.about_value .catch_txt{
  margin: 2.45rem auto 5.5rem;
  width: 85.2rem;
  max-width: 100%;
}
.about_value .back_txt_still{
  top: 0%;
  right: -345rem;
  margin-top: 5%;
  -webkit-text-stroke-color: #fff;
}
@media screen and (max-width: 767px) {
  .about_value{
    padding-top: 8.8rem;
  }
.about_value .catch_txt {
  margin: 1.61rem auto 2rem;
  font-size: 2.2rem;
  line-height: 1.727;
}
.about_value p{
  text-align: left;
}
.about_value .back_txt_still{
  right: -3155px;
  margin-top: 10%;
}

}
@media screen and (max-width: 500px) {
  .about_value .back_txt_still{
    right: -3777.3px;
  }
}
@media screen and (max-width: 450px) {
  .about_value .back_txt_still {
    right: -3977.3px;
}
}
/*about_sustain*/
.about_sustain{
  padding-bottom: 13.2rem;
  position: relative;
  overflow-x: hidden;
}
.about_sustain .catch_txt{
  margin: 2.45rem auto 4rem;
}
.about_sustain ul.flex_wrap{
  margin-top: 4rem;
}
.about_sustain ul.flex_wrap li{
  width: 29.49%;
}
.about_sustain ul.flex_wrap li picture{
  width: 100%;
  aspect-ratio: 5 / 3;
}
.about_sustain ul.flex_wrap li img{
  width: 100%;
  height: 100%;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  object-fit: cover;
}
.about_sustain ul.flex_wrap li h4{
  font-size: max(2.5rem, 16px);
  margin: 2.45rem 0 1.7rem;
  font-family: var(--font-noto);
}
.about_sustain .back_txt_still{
  top: 0%;
  left: -0rem;
  white-space: nowrap;
  -webkit-text-stroke-color: #fff;
  margin-bottom: 5%;
}
@media screen and (max-width: 767px) {
  .about_sustain .back_txt_still{
    left: -4050px;
    margin-bottom: 10%;
  }
  .about_sustain {
    padding-bottom: 8.6rem;
  }
  .about_sustain .catch_txt {
    margin: 1.6rem auto 2.5rem;
    font-size: 2.2rem;
}
.about_sustain ul.flex_wrap {
  margin-top: 4.6rem;
  gap: 4.6rem;
}
.about_sustain ul.flex_wrap li {
  width: 100%;
}
.about_sustain ul.flex_wrap li h4 {
  font-size: 2.2rem;
  margin: 2.2rem 0 1.8rem;
}
.about_sustain ul.flex_wrap li picture {
  aspect-ratio: 313 / 185;
}
.about_sustain ul.flex_wrap li picture img{
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}
.about_sustain .inner{
  text-align: left;
}
}
@media screen and (max-width: 500px) {
  .about_sustain .back_txt_still {
    left: -4670px;
}
}
@media screen and (max-width: 450px) {
  .about_sustain .back_txt_still {
    left: -4870px;
}
}
/*foot_nav*/
.foot_nav{
  padding-bottom: 14.1rem;
  overflow-x: hidden;
}
.foot_nav ul{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-top: .1rem solid #fff;
  border-bottom: .1rem solid #fff;
  justify-content: center;
  position: relative;
}
.foot_nav ul li{
  position: relative;
  width: 28%;
  display: flex;
  align-items: center;
  aspect-ratio: 165 / 104;
}

.foot_nav li p{
  padding: 1rem 1rem;
  font-size: 3rem;
  display: block;
  width: 100%;
  text-align: center;
  letter-spacing: .18rem;
  position: relative;
  z-index: 1;
}
.foot_nav li a{
  display: block;
  border-left: .1rem solid #fff;
  transform: skewX(-8deg);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.foot_nav li:nth-of-type(3n) a{
  border-right: .1rem solid #fff;
}
.foot_nav li a:hover{
  opacity: 1;
}
.foot_nav li div{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  transform: skewX(-8deg);

  transition: all .3s;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.foot_nav li a:hover + div{
  content: "";
  background-color: #000;
}
.foot_nav ul::after{
  content: "";
  display: block;
  position: absolute;
  height: .1rem;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
}@media screen and (max-width: 767px) {
  .foot_nav{
    padding-bottom: 4.5rem;
  }
  .foot_nav ul {
    border-bottom: none;
  }
  .foot_nav ul li {
    width: 46.5%;
    aspect-ratio: 222 / 134;
  }
  .foot_nav ul li p{
    font-size: 1.8rem;

  }
  .foot_nav ul li a{
  border-bottom: .1rem solid #fff;
  transform: skewX(-18deg);
  }
  .foot_nav ul li:nth-child(even) a{
    border-right: .1rem solid #fff;
  }
  .foot_nav ul::after{
    display: none;
  }
  .foot_nav ul li:nth-child(even)::after{
    content: "";
    display: block;
    height: .1rem;
    width: 20%;
    position: absolute;
    right: -10%;
    bottom: 0;
    background-color: #fff;
  }
  .foot_nav li:nth-of-type(3n) a {
    border-right: none;
}
.foot_nav li div {
  transform: skewX(-18deg);
}

}
/* ===================================================================
// serviceページ
// ===================================================================*/
.service_page .anchor_list li p {
  padding: 3.95rem 3.4vw 3.9rem;
}
@media screen and (max-width: 767px) {
  .service_page .anchor_list li p {
    padding: 1.65rem 1rem 1.6rem;  }
}
/*service_message*/
.service_message{
  padding-top: 10rem;
}
.service_message .catch_txt{
  margin-top: 2.45rem;
  margin-bottom: 6.5rem;
}
.service_message .flex_block{
  align-items: center;
}
.service_message .flex_block_img{
  width: 50%;
}
.service_message .flex_block_txt{
  width: 46.5%;
}
@media screen and (max-width: 767px) {
  .service_message{
    padding-top: 2.91rem ;
  }
  .service_message .catch_txt {
    margin-top: 1.6rem;
    margin-bottom: 2.6rem;
    padding: 0 (--wrapper) ;
  }
  .service_message .flex_block{
    gap: 2.65rem;
  }
  .service_message .flex_block_img{
    width: 100%;
  }
  .service_message .flex_block_txt{
    width: 100%;
  }
}
/*service_block*/
.service_block{
  padding-top: 5rem;
  position: relative;
	overflow-x:hidden;
}
.service_block .flex_block{
  align-items: center;
  position: relative;
  z-index: 2;
}
.service_block:nth-of-type(odd) .flex_block{
  flex-direction: row-reverse;
}
.service_block .flex_block_img{
  width: 47.8%;
}
.service_block .flex_block_img picture{
  width: 100%;
  aspect-ratio: 1	/ 0.858;

}
.service_block .flex_block_img picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
}
.service_block .flex_block_txt{
  width: 50%;
}
.service_block .flex_block_txt p{
  margin: 3.9rem 0 1.8rem;
}
.service_block .flex_block_txt ul{
  display: flex;
  justify-content: left;
  gap: 1.3rem;
}
.service_block .flex_block_txt ul li{
  width: 24.1rem;
  background-color: var(--thema-color);
  border-radius: 99rem;text-align: center;
  padding: 2.1rem 1rem;
  font-size: max(1.8rem, 16px);
  font-family: var(--font-noto);
  position: relative;
}
.service_block .flex_block_txt ul li.ojika::after{
  content: "※小値賀本部は土木・建設のみ";
  font-size: max(1.3rem, 13px);
  color: #fff;
  font-family: var(--font-noto);
  position: absolute;
  bottom: -2em;
  left: 0;
  font-weight: 500;
  white-space: nowrap;
}
.service_block .service_examples{
  margin-top: 6rem;
  position: relative;
  z-index: 2;
}
.service_block .service_examples h4{
  font-size: max(2.5rem, 16px);
  margin-bottom: 1.3rem;
}
.service_block .service_examples ul{
  background-color: #fff;
  padding: 2rem 5.45rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 8.6em;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  margin-bottom: 1.94rem;
}
.service_block .service_examples ul li{
  line-height: 1.875;
  font-weight: var(--font-noto);
}
.service_block .back_txt{
  bottom: 35%;
  z-index: 0;
}
.service_block .back_txt li{
  -webkit-text-stroke-color: #909090;
}
.service_construct{
  margin: 8rem 0 4rem;
	overflow-x: hidden;
}
.service_manufacture{
  margin: 11rem 0 5rem;
}
@media screen and (max-width: 767px) {
  .service_block {
    padding-top: 6rem;
  }
  .service_block .flex_block {
    flex-direction: column;
    padding-top: 5rem;
}
  .service_construct {
    margin: 4rem 0 0rem;
}
.service_block .flex_block_img {
  width: 100%;
}
.service_block .flex_block_img picture {
  aspect-ratio: 313 / 222;
}
.service_block .flex_block_txt {
  width: 100%;
}
.service_block .catch_txt{
  position: absolute;
  top: 0;
}
.service_block .flex_block_txt p {
  margin: 5.2rem 0 2rem;
}
.service_block .flex_block_txt ul li {
  width: 15rem;
  padding: 1.5rem 1rem;
  font-size: 1.6rem;
  max-width: 50%;
  line-height: 1;
}
.service_block .flex_block_txt ul li.ojika::after{
  font-size: 1rem;
  bottom: -1.5em;
}
.service_block .service_examples {
  margin-top: 4.3rem;
}
.service_block .service_examples h4 {
  font-size: 2rem;
  margin-bottom: 1.2rem;
}
.service_block .service_examples ul {
  background-color: #fff;
  padding: 2.3rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 13.2em;
  clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  margin-bottom: 1.3rem;
  gap: 1.3rem;
}
.service_block .service_examples ul li{
  line-height: 1;
}
.service_block  .link_flex {
  display: flex;
  justify-content: center;
}
.service_manufacture {
  margin: 0;
}
.service_block .back_txt {
  top: 32.1%;
  bottom: initial;
  z-index: 0;
}
}
/*service_vehicle / service_heavy*/
.service_vehicle{
  background-color: #000;
  padding: 16.8rem var(--wrapper) 21.6rem;
  clip-path: polygon(0% 10%, 100% 0, 100% 90%, 0 100%);
}
.service_heavy{
  padding-top: 6.815rem ;
  padding-bottom: 14rem;
}


.table_wrapper{
  display: flex;
	background-image: url("images/service_unnsou.jpg");
  background-size: cover;
  margin-top: 4.6rem;
}
.table_wrapper table{
  background-color: rgba(255, 255, 255, .85);
  width: 100%;
}
#heavy .table_wrapper{
	background-image: url("images/recwork4.jpg");
}
.service_vehicle table tbody{
}
.table_wrapper table tbody td,.table_wrapper table tbody th {
	border: 1px solid #29859F;
	border-collapse: collapse;
  padding: 2.15rem 1rem 1.55rem;
}
.table_wrapper table tbody tr:nth-of-type(1) th{
	border-right: 1px solid #fff;
  padding: 2rem 2rem 2.65rem;
  border-top: none;
  background-color: #29859F;
  color: #fff;
}
.table_wrapper table tbody tr:nth-of-type(1) th:nth-of-type(4){
  border-right: #29859F;
}
.table_wrapper table tbody tr :nth-child(1){
  width: 23.7%;
  border-left: none;
}
.table_wrapper table tbody tr :nth-child(2){
  width: 24%;
}
.table_wrapper table tbody tr :nth-child(3){
  width: 21.6%;
}
.table_wrapper table tbody tr :nth-child(4){
  width: 22.5%;
  border-right: none;
}
.table_wrapper table tbody tr:nth-last-child(1) th,.table_wrapper table tbody tr:nth-last-child(1) td{
  border-bottom: none;
}
@media screen and (max-width: 767px) {
  .service_vehicle {
    padding: 13.9rem var(--wrapper) 17.1rem ;
    clip-path: polygon(0% 5%, 100% 0, 100% 95%, 0 100%);
    margin-top: 3.67rem;
}
.service_vehicle .delayScroll,   .service_heavy .delayScroll{
  overflow: scroll;
}
.service_vehicle .subttl3,   .service_heavy .subttl3{
  padding-right: var(--wrapper);
}
.table_wrapper {
  margin-bottom: 1.3rem;
}

.table_wrapper table{

  display: block;
  width: max-content;
  margin: 3.6rem auto 0;
}
.table_wrapper table{
	background-image: url("images/service_unnsou.jpg");
  background-size: cover;
}
#heavy .table_wrapper table{
	background-image: url("images/recwork4.jpg");
}
.table_wrapper table tbody{
  background-color: rgba(255, 255, 255, .85);
}
.service_heavy{
  padding: 6.8rem 0 6.8rem var(--wrapper);
}
.table_wrapper{
  display: initial;
}
}
@media screen and (max-width: 700px) {
 
  .service_vehicle {
    padding-right: initial;
}
.table_wrapper table {
}
}
/* ===================================================================
// 会社概要ページ
// ===================================================================*/

/*company_message*/
.company_message{
  padding-top: 10rem;
  gap: 2rem;
}
.company_message .flex_block_img{
  width: 35.92%;
}
.company_message .flex_block_img picture{
  width: 100%;
  aspect-ratio: 352	/	565;
}
.company_message .flex_block_img picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(0% 6%, 100% 0, 100% 94%, 0 100%);
}
.company_message .flex_block_txt{
  width: 58.88%;
  margin-top: 1.8rem;
}
.company_message .flex_block_txt .catch_txt{
  margin: 1.68rem 0 3.9rem;
}
.company_message .flex_block_txt h4{
  text-align: right;
  margin-top: 4rem;
}
@media screen and (max-width: 767px) {
  .company_message {
    padding-top: 20.4rem;
    gap: 2.6rem;
}
.company_message .flex_block_img {
  width: 100%;
}
.company_message .flex_block_txt{
  width: 100%;
  margin-top: 0;
}
.company_message .subttl {
  position: absolute;
  top: 3.6rem;
}
.company_message .flex_block_txt .catch_txt {
  margin: 0;
  position: absolute;
  top: 11rem;
}
}
/*company_company*/
.company_company{
  overflow-x: hidden;
  padding-top: 10rem;
  position: relative;

}
.company_company dl{
  width: 100%;
  margin-top: 6.78rem;
  margin-bottom: 5.1rem;
}
.company_company dl div{
  display: flex;

}
.company_company dl div dt{
  width: 22.75%;
  padding: 3rem 1rem 2.88rem 2.56rem;
  background-color: var(--thema-color);
  border-bottom: .1rem solid #97C8D6;
}
.company_company dl div dd{
  width: 77.25%;
  padding: 3rem 6rem 2.88rem 5.7rem;
  border-bottom: .1rem solid #fff;
}
.company_company dl div:nth-of-type(1) dt{
  border-top: .1rem solid #97C8D6;
}
.company_company dl div:nth-of-type(1) dd{
  border-top: .1rem solid #fff;
}
.company_company ul li{
  width: 47.5%;
}
.company_company ul li h3{
  margin-bottom: 1.6rem;
  font-size: max(2rem, 16px);
  font-family: var(--font-cjk);
}
.company_company ul li iframe{
  width: 100%;
  aspect-ratio: 480	/	307;
}
.company_company .back_txt_still{
  bottom: 0;
  -webkit-text-stroke-color: #fff;
  right: -260.5rem;
  line-height: 1;
  color: transparent;
  margin-top: 10%;
}
@media screen and (max-width: 767px) {
  .company_company {
    padding-top: 7.5rem;
  }
  .company_company .subttl3 h2.catch_txt {
    margin-top: 1.4rem;
  }
    .company_company dl {
      margin-top: 4rem;
      margin-bottom: 2.6rem;
    }
    .company_company dl div {
      flex-direction: column;
  }
  .company_company dl div dt {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.7rem;
    border-bottom: none;
  }
  .company_company dl div dd {
    width: 100%;
    padding: 1rem 2rem;
    font-size: 1.7rem;
    font-weight: 400;
    border: none;
  }
  .company_company dl div:nth-of-type(1) dt {
    border-top: none;
}
.company_company dl div:nth-of-type(1) dd {
  border-top: none;
}
.company_company ul{
  gap: 1.9rem;
}
.company_company ul li {
  width: 100%;
}
.company_company ul li h3 {
  margin-bottom: 1.1rem;
  font-size: 2rem;
}
.company_company .back_txt_still {
  bottom: 0;
  right: 10rem;
  margin-top: 20%;
}
}

/*company_history*/
.company_history{
  padding-bottom: 13.4rem;
  position: relative;
  overflow-x: hidden;
}
.company_history dl{
  margin-top: 8.4rem;
}
.company_history dl .company_history_flex{
  display: flex;
  gap: 4.5%;

}
.company_history dl .company_history_flex .company_history_img{
  width: 25.59%;
  position: relative;
  padding-bottom: 1.2rem;
}

.company_history dl .company_history_flex .company_history_img picture{
  width: 100%;
  aspect-ratio: 262 /155;
  z-index: 1;
  position: relative;
}
.company_history dl .company_history_flex .company_history_img picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}
.company_history dl .company_history_flex .company_history_img::after{
  content: "";
  display: block;
  width: .8rem;
  height: 100%;
  background-color: #707070;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.company_history dl .company_history_flex:nth-last-child(1) .company_history_img::after{
  content: "";
  display: block;
  width: .8rem;
  height: 63%;
  background-color: #707070;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.company_history dl .company_history_flex:nth-last-child(1) .company_history_img::before{
  content: "";
  display: block;
  width: .8rem;
  height: 100%;
  background-color: initial;
  background-image: linear-gradient(to bottom, rgba(112, 112, 112, 1), rgba(112, 112, 112, 1) .8rem, transparent .5rem);
    background-size: .8rem 1.6rem;
  background-position: center;
  background-repeat: repeat-y;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.company_history dl .company_history_flex .company_history_txt{
  width: 69.1%;
}
.company_history dl .company_history_flex .company_history_txt div{
  display: flex;
  gap: 1%;
  margin-bottom: 3.2rem;
}
.company_history dl .company_history_flex dt{
  font-size: max(2rem, 16px);
  width: 27.27%;
  
}
.company_history dl .company_history_flex dd{
  font-size: max(2rem, 16px);
  width: 71.73%;
}
.company_history .company_history_txt div:nth-child(1){
  margin-bottom: 3.4rem;
}
.company_history .company_history_txt div:nth-child(1) dt, .company_history .company_history_txt div:nth-child(1) dd{
  font-size: max(2.5rem, 16px);
	color: #806200;
  -webkit-text-stroke-color: #fff;
}
.company_history dl .company_history_flex:nth-last-child(1) .company_history_img{
  padding-bottom: 0;
}
.company_history dl .company_history_flex:nth-last-child(1) .company_history_txt div:nth-last-child(1){
  margin-bottom: 0;
}
.company_history .back_txt_still{
  left: -212.2rem;
  top: 0;
  -webkit-text-stroke-color: #fff;
  line-height: 1;
  color: transparent;
  margin-top: 5%;
  margin-bottom: 10%;
}

@media screen and (max-width: 767px) {
  .company_history{
    padding-bottom: 5.5rem;
  }
  .company_history dl {
    margin-top: 3.4rem;
}
.company_history dl .company_history_flex{
  flex-wrap: wrap;
  position: relative;
}
.company_history dl .company_history_flex .company_history_img {
  width: 100%;
  padding-bottom: 0;
}
.company_history dl .company_history_flex .company_history_img picture {
  width: 83.7%;
}
.company_history dl .company_history_flex .company_history_txt {
  width: 100%;
  padding-top: 2.7rem;
  padding-left: 3.1rem;
  padding-bottom: 3.6rem;
  position: relative;
}
  .company_history .back_txt_still {
    left: 10rem;
    margin-bottom: 20%;
  }

  .company_history dl .company_history_flex .company_history_txt div {
    gap: 1%;
    margin-bottom: 1.9rem;
    flex-direction: column;
}
.company_history .company_history_flex  .company_history_txt div:nth-child(1){
  margin-bottom: 2.1rem;
}
.company_history .company_history_flex  .company_history_txt div:nth-child(1) dt, .company_history .company_history_flex  .company_history_txt div:nth-child(1) dd {
  font-size: 2rem;
}
.company_history .company_history_txt div dt, .company_history .company_history_txt div dd {
  width: 100%;
  font-size: 1.6rem;
}
.company_history dl .company_history_flex .company_history_txt::after {
  content: "";
  display: block;
  width: .4rem;
  height: 100%;
  background-color: #707070;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.company_history dl .company_history_flex:nth-last-child(1) .company_history_txt{
  padding-bottom: 0;
}
.company_history dl .company_history_flex:nth-last-child(1) .company_history_txt::after{
  content: "";
  display: block;
  width: .4rem;
  height: 75%;
  background-color: #707070;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  z-index: 0;
}
.company_history dl .company_history_flex:nth-last-child(1) .company_history_txt::before{
  content: "";
  display: block;
  width: .4rem;
  height: 100%;
  background-color: initial;
  background-image: linear-gradient(to bottom, rgba(112, 112, 112, 1), rgba(112, 112, 112, 1) .8rem, transparent .5rem);
    background-size: .8rem 1.6rem;
  background-position: center;
  background-repeat: repeat-y;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(-50%);
  z-index: 0;
}
.company_history dl .company_history_flex .company_history_img::after,.company_history dl .company_history_flex:nth-last-child(1) .company_history_img::before,.company_history dl .company_history_flex:nth-last-child(1) .company_history_img::after{
  display: none;
}
}
/*company_awards*/
.company_awards{
  padding-bottom: 13.1rem;
}
.company_awards ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.9rem 1rem;
}
.company_awards ul:nth-child(1){
  flex-wrap: nowrap;
  margin-bottom: 1.9rem;
}
.company_awards ul .awards_ttl{
  background-color: var(--thema-color);
  width: 49%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: initial;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}
.company_awards ul .awards_ttl h2{
  font-size: 4rem;
  letter-spacing: .24rem;
  margin-bottom: 2rem;
}
.company_awards ul .awards_ttl h3{
  font-size: 5rem;
  letter-spacing: .3rem;
}
.company_awards ul li{
  width: 23.5%;
  background-color: #fff;
  text-align: center;
  height: min-content;
  padding: 1.2rem;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
}
.company_awards ul li span{
  font-size: 1.4rem;
}
.company_awards ul li h4{
  font-size: 2.8rem;
  margin: .6rem 0 1.4rem;
}
.company_awards ul li h4.small{
  font-size: 2.3rem;
  margin: .95rem 0 1.75rem;
}
.company_awards ul li p{
  font-size: 1.3rem;
}
.company_awards ul div{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 49%;
  gap: 1.9rem 1rem;
}
.company_awards ul div li{
  width: 48%;
}
@media screen and (max-width: 767px) {
  .company_awards {
    padding-bottom: 7.7rem;
}
  .company_awards ul .awards_ttl{
    padding: 4rem 1rem;
  }
  .company_awards ul .awards_ttl h2 {
    font-size: 3rem;
    letter-spacing: .18rem;
    margin-bottom: 1.6rem;
}
  .company_awards ul .awards_ttl h3 {
    font-size: 2.8rem;
    letter-spacing: .168rem;
}
.company_awards ul, .company_awards ul div  {
  gap: 1.3rem 1rem;
}

.company_awards ul:nth-child(1) {
  flex-wrap: wrap;
  margin-bottom: 1.3rem;
  gap: 2.3rem;
}
.company_awards ul .awards_ttl {
  background-color: var(--thema-color);
  width: 100%;
}
.company_awards ul div {
  width: 100%;
}
.company_awards ul li {
  width: 48%;
  padding: .7rem .6rem .8rem;
}
.company_awards ul li span {
  font-size: 1.2rem;
}
.company_awards ul li h4 ,.company_awards ul li h4.small{
  font-size: 1.8rem;
  margin: .3rem 0 .6rem;
}
.company_awards ul li p {
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.222;
  letter-spacing: 0.054rem;
}
}
/* ===================================================================
// Interviewページ
// ===================================================================*/

.accordion_block{
  position: relative;
}
.accordion_block .readmore{
  background-color: var(--thema-color);
  color: #fff;

  width: 100%;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.35rem;
  height: 4.5rem;
}
.accordion_block .readmore span{
  font-family: var(--font-en);
  font-size: max(2.5rem, 16px);
  font-style: italic;
  font-weight: 700;
}
.accordion_block .readmore .open{
  display: block;
  transition: all .3s;
  opacity: 1;
}
.accordion_block .readmore.active .open{
  display: none;
  opacity: 0;
}
 .accordion_block .readmore .close{
  display: none;
  opacity: 0;
}
.accordion_block .readmore.active .close{
  display: block;
  opacity: 1;
}
.accordion_block .readmore::after{
  content: "";
  display: block;
  border: 1.2rem solid transparent;
  border-top: 1.3rem solid #fff;
  margin-top: .8em;
  transition: all .3s;
}
.accordion_block .readmore.active::after{
  transform: rotate(180deg);
  margin-bottom: .8rem;
  margin-top: initial;
}

 .accordion_block .accordion-header{
  display: flex;
  justify-content: space-between;
  padding: 4.87rem 4.5rem 7.5rem 4.19rem;
  gap: 3.3rem;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
  background-color: #fff;
  position: relative;
}
 .accordion_block .accordion-header::after{
  content: "";
  display: block;
  position: absolute;
  bottom: -0.15rem;
  left: 0;
  width: 100%;
  height: .3rem;
  background: #fff;
}
.accordion_block .accordion-header picture{
  width: 43.3%;
  aspect-ratio: 406 / 223;
}
.accordion_block .accordion-header picture img{
  width: 100%;
  height: 100%;
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
	object-fit: cover;
}
.accordion_block .accordion-header div{
  width: 53%;
}
.accordion_block .accordion-header h3{
  font-size: 3.5rem;
}

.accordion_block p{
  font-weight: 500;
}
 .accordion_block .accordion-content{
  background-color: #fff;
  clip-path: polygon(0% 0, 97% 0, 97% 100%, 0 100%);
  padding-bottom: 8rem;
}
.interview_accordion .accordion_block .accordion-content .content_block:nth-child(even){
  flex-direction: row-reverse;
}
.accordion_block .accordion-content .content_block{
  display: flex;
  padding: 4.4rem 8rem 3rem 5rem;
  gap: 4.3rem;
}

.accordion-header{
  cursor: pointer;
}
.accordion-content {
  display: none;

}
.interview_message{
  padding-top: 8.7rem;
  padding-bottom: 9.6rem;
}
.interview_message .catch_txt{
  margin: 2.45rem 0 4rem;
}

.interview_accordion{
  padding-bottom: 9rem;
}
.interview_accordion .accordion_block{
  margin-bottom: 3.97rem;
}
.interview_accordion .accordion_block .accordion-header span{
  font-size: max(1.6rem, 16px);
  margin: 1.6rem 0 1.46rem;
  display: block;
}
.interview_accordion .accordion_block .accordion-content .content_block .content_flex{
  width: 56.15%;
}
.interview_accordion .accordion_block .accordion-content .content_block picture{
  width: 38.8%;
  aspect-ratio: 347 / 201;
  height: fit-content;
}
.interview_accordion .accordion_block .accordion-content .content_block picture img{
  width: 100%;
  height: 100%;
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
  object-fit: cover;
}
.interview_accordion .accordion_block .accordion-content .content_block h4{
  font-size: max(2.5rem, 16px);
  margin-bottom: 2.6rem;
  line-height: 1.6;
}
/* ヘッダー全体をクリック可能に見せる */
.accordion-header {
  cursor: pointer;
  user-select: none; /* テキスト選択を防止 */
}
/* read more もボタンに見せる */
.readmore,
.readmore * {
  cursor: pointer !important;
  user-select: none !important; 
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;  /* テキスト選択も抑制 */
}
.readmore,
  .readmore *,
  .readmore::before,
  .readmore::after,
  .readmore *::before,
  .readmore *::after {
    cursor: pointer !important;
    /* テキスト選択カーソルを無効化 */
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    /* 念のためポインタイベントも制御 */
    pointer-events: auto !important;
  }
@media screen and (max-width: 767px) {
  .interview_message {
    padding: 2rem var(--wrapper) 4.8rem;
}
.interview_message .catch_txt{
  margin: 1.6rem 0 3.2rem;
  text-align: center;
}
.interview_message p{
  text-align: left;
}
  .accordion_block .accordion-header {
    padding: 1.3rem 1.16rem 5.8rem 1.5rem;
    flex-direction: column;
    gap: 1.15rem;
  }

  .accordion_block .accordion-header picture {
    width: 100%;
  }
  .accordion_block .accordion-header div {
    width: 100%;
}
.accordion_block .accordion-header h3 {
    font-size: 2.2rem;
    margin-bottom: .85rem;
    line-height: 1.455;
}
.accordion_block .readmore span{
  font-size: 2rem;
}
.accordion_block .readmore::after {
  border: 1rem solid transparent;
  border-top: 1rem solid #fff;
  margin-top: .8em;
}

.accordion_block .accordion-content {
  background-color: #fff;
  clip-path: polygon(0% 0, 97% 0, 97% 100%, 0 100%);
  padding-bottom: 3.6rem;
}
#content .accordion_block .accordion-content .content_block {
  padding: 0rem 2.46rem 3.3rem 1.6rem;
  flex-direction: column-reverse;
  gap: 1.7rem;
}
.interview_accordion {
  padding-bottom: 4rem;
}
.interview_accordion .accordion_block .accordion-content .content_block .content_flex {
  width: 100%;
}
.interview_accordion .accordion_block .accordion-content .content_block picture {
  width: 100%;
}
.interview_accordion .accordion_block .accordion-content .content_block h4 {
  margin-bottom: .5rem;
  font-size: 2rem;
  line-height: 1.4;
}
.interview_accordion .accordion_block .accordion-header span{
  margin-top: 0;
  margin-bottom: 1rem;
}
}
/*interview_recruit*/
.interview_recruit{
  position: relative;
  padding: 12.5rem var(--wrapper) 19rem;
  z-index: 48;
}
.interview_recruit .interview_recruit_txt{
  position: relative;
  z-index: 3;
}
.interview_recruit .catch_txt{
  margin: 2.4rem auto 2.2rem;
  width: 85.2rem;
  max-width: 100%;
}
.interview_recruit .interview_recruit_img{
  content: "";
  display: block;
  background-color: rgba(0, 0, 0, .79);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.interview_recruit .interview_recruit_img picture{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.interview_recruit .interview_recruit_img picture img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.interview_recruit .interview_recruit_img::after{
  content: "";
  display: block;
  background-color: rgba(0, 0, 0, .79);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.interview_page .foot_contact{
  margin-top: -11rem;
  z-index: 49;
  position: relative;
}
@media screen and (max-width: 767px) {
  .interview_page .interview_recruit{
    padding-top:7.3rem ;
    padding-bottom: 16rem;
  }
  .interview_page .interview_recruit .catch_txt{
    font-size: 2.2rem;
    margin: 1.6rem 0 2.6rem;
  }
}
/* ===================================================================
// 採用ページ
// ===================================================================*/
.recruit_top .mainimg .fv_recruit{
  padding: 0;
  width: 79.8%;
  height: initial;
  position: relative;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: loading 3s;
}
.recruit_top .mainimg .fv_txt{
  top: 5%;
}

@keyframes loading {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@media screen and (max-width: 767px) {
  .recruit_top .mainimg .fv_recruit {
    width: 150%;
    top: 70%;
}
  .recruit_top .mainimg .fv_txt {
    top: 23.5%;
}
}
/*recruit_message*/
.recruit_message .catch_txt{
  /*
  width: 85.2rem;
  max-width: 100%;
  */
    padding: 0 0 0 0;
}
.recruit_message .subttl{
  padding: 11.1rem 0rem 0 0rem;
}

.recruit_message.about_culture .txt_wrap::after{

  height: calc(100vh - 40.3rem);
}
.recruit_message.about_culture p{
  margin-top: calc( -100vh + 40.3rem);
  padding-bottom: 13.4rem;
	padding-top: 8rem;
}
@media screen and (max-width: 767px) {
  .recruit_message.about_culture .about_culture_txt .subttl {
    padding-top: 6.9rem;
  }
  .recruit_message.about_culture .about_culture_txt .catch_txt {
    padding-bottom: 3rem;
	  font-size: 2.6rem;
  }
  .recruit_message.about_culture .txt_wrap::after{
    height: calc(100vh - 29.8rem);
  }
  .recruit_message.about_culture p{
    margin-top: calc( -100vh + 29.8rem);
	  font-size:1.8rem;
  }
  .recruit_message.about_culture .about_culture_txt {
    padding: 0;
}
  .recruit_message.about_culture p {
    padding: 0 0 8.1rem;
  }
  .recruit_message.about_culture {
    padding: 0;
    margin: 4.6rem auto 0;
}
}
/*recruit_numbers*/
.recruit_numbers{
  padding-top: 10.8rem;
  position: relative;
  overflow: hidden;
}
.recruit_numbers .numbers_block{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.recruit_numbers .recruit_numbers_txt{
  width: 47.46%;
  margin-top: 2.2rem;
}
.recruit_numbers .recruit_numbers_txt .catch_txt{
  margin: 2.45rem 0 ;
}
.recruit_numbers ul:nth-child(2){
  width: 46%;
  gap: 2.45rem 1rem;
}
.recruit_numbers ul:nth-child(3){
  width: 100%;
  flex-wrap: wrap;
  margin-top: 2.45rem ;
}
.recruit_numbers ul:nth-child(2) li{
  width: 41.867%;
}
.recruit_numbers ul:nth-child(3) li{
  width: 19.309%;
}
.recruit_numbers .back_txt_still{
  bottom: 0;
  -webkit-text-stroke-color: #fff;
  right: -10.5rem;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .recruit_numbers {
    padding-top: 7.8rem;
  }

  .recruit_numbers .recruit_numbers_txt {
    width: 100%;
  }
  .recruit_numbers .recruit_numbers_txt .catch_txt {
    margin: 1.85rem 0 2.2rem;
}
  .recruit_numbers ul:nth-child(2) {
    width: 100%;
    justify-content: center;
    gap: 1rem 2.3rem;
    margin-top: 2.15rem;
}
.recruit_numbers ul:nth-child(3) {
  margin-top: 1rem;
  gap: 1rem 2.3rem;
  justify-content: center;
}

.recruit_numbers ul:nth-child(2) li {
  width: 19.5%;
}
.recruit_numbers ul:nth-child(3) li {
width: 19.5%;
}
.recruit_numbers ul.numbers_ul li div{
  padding: 1.89rem 0rem 1.5rem;
}
    .recruit_numbers .back_txt_still {
        bottom: 0;
        right: -2199px;
    }
}
@media screen and (max-width: 675px) {
  .recruit_numbers ul.numbers_ul{
    justify-content: space-between;
  }
  .recruit_numbers ul:nth-child(2) li {
    width: 42.5%;
  }
  .recruit_numbers ul:nth-child(3) li {
    width: 42.5%;
  }
  }
  @media screen and (max-width: 450px) {
    .recruit_numbers ul.numbers_ul{
      justify-content: center;
    }
        .recruit_numbers .back_txt_still {
        bottom: 0;
        right: -3000px;
    }
  }
/*recruit_job*/
.recruit_job{
  padding-top: 10.2rem;
  position: relative;
  overflow-x: hidden;
}
.recruit_job_box{
  padding-top: 20rem;
  padding-bottom: 14.5rem;
  background-color: var(--thema-color);
  clip-path: polygon(0% 10%, 100% 0%, 100% 90%, 0 100%);
}
.recruit_job_flex{
  display: flex;
  justify-content: space-between;
}
.recruit_job_box .subttl2 h2{
  color: #fff;
}
.recruit_job_box .subttl2 h3{
  font-size: 5rem;
}
.recruit_job_box h3.catch_txt{
  font-size: max(2.5rem, 16px);
  margin: 2.454rem 0;
}
.recruit_job_box .recruit_job_txt p{
  margin-bottom: 2.454rem;
}
.recruit_job_txt{
  width: 47.43%;
  margin-top: 1.8rem;
}
ul.imgList{
  width: 49.87%;
}
ul.imgList picture{
  width: 100%;
  aspect-ratio: 73 / 51;

}
ul.imgList img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recruit_job .back_txt_still{
  left: -259.2rem;
  top: 0;
  -webkit-text-stroke-color: #fff;
  line-height: 1;
}
.per {
  .txtList {
      position: relative;

      li {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 0;
    opacity: 0;
    transition: all .3s ease;
      }
  }
  &.customClass-1 {
  .txtList {
    .txt01 {
      opacity: 1;
    }
  }
}
&.customClass-2 {
  .txtList {
    .txt02 {
      opacity: 1;
    }
  }
}
&.customClass-3 {
  .txtList {
    .txt03 {
      opacity: 1;
    }
  }
}
&.customClass-4 {
  .txtList {
    .txt04 {
      opacity: 1;
    }
  }
}
}
.recruit_job .slick-num{
  display: none;
}

.recruit_job .slide-dots{
	text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 2.7rem;
  width: 100%;
  height: .4rem;
}
.recruit_job .slide-dots li {
	display: inline-block;
	margin: 0;
  width: calc( 100% / 4);
  height: 100%;
  }
  .recruit_job .slide-dots li button {
	position: relative;
	text-indent: -999.9rem;
  width: 100%;
  height: 100%;
  }
  .recruit_job .slide-dots li button::before {
	content: "";
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
  }
  .recruit_job .slide-dots li.slick-active button::before {
	background-color: #646464;

  }
  .recruit_job .slide-dots li button {
	background: none;
	border: none;
	outline: none;
	padding: 0 0.7rem;
  }

  
  .recruit_job .arrow_box{
    display: flex;
    gap: 1.8rem;
    justify-content: end;
    margin-right: var(--wrapper);
  }

  .recruit_job .slick-arrow span {
    font-family: var(--font-cjk);
    font-size: 2.8rem;
    font-weight: 500;
  }
  .recruit_job_sp{

  }
@media screen and (max-width: 1021px) {
  .recruit_job_box {
    clip-path: polygon(0% 7%, 100% 0%, 100% 93%, 0 100%);
}
}
@media screen and (max-width: 767px) {
  .recruit_job {
    padding-top: 5.37rem;
}
  .recruit_job .back_txt_still {
        left: -1913px;
    top: 1rem;
  }
  .recruit_job_box {
    clip-path: polygon(0% 3%, 100% 0%, 100% 97%, 0 100%);
    padding: 15.7rem var(--wrapper) 5.9rem;
}
  .recruit_job_flex{
    display: none;
  }
  .recruit_job .arrow_box{
    display: none;
  }
  .recruit_job_sp{
    margin-bottom: 5.6rem;
  }
  .recruit_job_box .subttl2 h3 {
    font-size: 2.5rem;
}
.recruit_job_box .subttl2 h2 {
  font-size: 3rem;
  margin: 1.15rem 0 1.7rem;
}
.recruit_job_sp>picture{
  aspect-ratio: 313 / 218;
}
.recruit_job_sp>picture img{
  object-fit: cover;
}
.recruit_job_box h3.catch_txt {
  font-size: 2rem;
  margin: 1.6rem 0 1.3rem;
}
.recruit_job_box .link_flex{
  margin-top: 2rem;
  justify-content: center;
  display: flex;
}
}
 @media screen and (max-width: 450px) {
     .recruit_job .back_txt_still {
        left: -2717px;
        top: 1rem;
    }
    } 
  /*recruit_environment*/
  .recruit_environment{
    padding-top: 10.5rem;
    padding-bottom: 9.18rem;
    position: relative;
  }
  .recruit_environment .popup_txt{
    width: 71.9rem;
    max-width: 100%;
  }
  .recruit_environment .subttl3{
    margin-bottom: 4.3rem;
  }
  .recruit_environment .link_flex{
    margin-top: 4.65rem;
  }
button#open-modal, .open-modal{
    background: none;
    border: none;
  }
  .modal_popup {
    display: none;
    position: fixed;
    z-index: 99;
    left: 0;
    top: 0;
    width:calc(100% - var(--header-blank));
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    margin-left: var(--header-blank);
  }

  .popup-content {
    padding: 8rem var(--wrapper);
    border: .5rem solid #fff;
    width: 75%;
    height: 78.8%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.78);
    top: 50%;
    left: 50%;
    position: relative;
    transform: translate(-50%, -50%);
    overflow: scroll;
  }
  .popup-content .popup_txt{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .popup-content #close-modal,  .popup-content .close-modal{
    position: absolute;
    top: 2.55rem;
    right: 2.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
  }
  .popup-content #close-modal span, .popup-content .close-modal span{
    display: block;
    position: relative;
    width: 3rem;
    height: 3rem;
  }
  .popup-content #close-modal span::before, .popup-content #close-modal span::after ,  .popup-content .close-modal span::before, .popup-content .close-modal span::after { /* 共通設定 */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .2rem; /* 棒の幅（太さ） */
    height: 3rem; /* 棒の高さ */
    background: #fff;
  }
   
  .popup-content #close-modal span::before,  .popup-content .close-modal span::before{
    transform: translate(-50%,-50%) rotate(45deg);
  }
   
  .popup-content #close-modal span::after ,  .popup-content .close-modal span::after{
    transform: translate(-50%,-50%) rotate(-45deg);
  }
  .popup-content #close-modal p   .popup-content .close-modal p{
    font-size: max(1.2rem, 12px);
    font-weight: 500;
  }
  .popup-content .popup_txt h2{
    margin-bottom: 5.7rem;
  }
  @media screen and (max-width: 767px) {
    .recruit_environment {
      padding-top: 6.7rem;
      padding-bottom: 7.26rem;
    }
    .popup-content #close-modal , .popup-content .close-modal {
      top: 1.5rem;
      right: 1.45rem;
    }
    .popup-content .popup_txt h2 {
      margin-bottom: 2.45rem;
      text-align: left;
  }
  .popup-content .popup_txt p{
    text-align: left;
    line-height: 1.875;
  }
  .popup-content {
    padding: 6rem 2rem 2rem;
    border: .5rem solid #fff;
    width: calc( 100% - 8rem);
    height: 72.3%;
    overflow: scroll;
  }
  .popup-content #close-modal p,  .popup-content .close-modal p  {
    font-size: .8rem;
    margin-top: .2rem;
  }
  .popup-content #close-modal span,   .popup-content .close-modal span {
    width: 2.2rem;
    height: 2rem;
}

  }
  /*recruit_interview*/
  .recruit_interview .link_flex{
    margin-top: 2.4rem;
  }
  @media screen and (max-width: 767px) {
    .recruit_interview{
      padding-bottom: 3.9rem;
    }
    .recruit_interview .subttl3 h2.catch_txt {
      margin-top: 0.85rem;
  }
  .top_interview li.top_interview_li {
    padding-top: 3.4rem;
  }
  .top_interview li.top_interview_li div h3{
    font-size: 3.2rem;
  }
  .top_interview li.top_interview_li div span {
    font-size: 1.3rem;
  }
  .top_interview li.top_interview_li p {
    font-size: 2rem;
    line-height: 1.25;
  }

  }
  /*recruit_figure*/
  .recruit_figure{
    position: relative;
    clip-path: polygon(0% 10%, 100% 0%, 100% 90%, 0 100%);
    padding-top: 11.4rem;
    height: 81.3rem;
  }
  .recruit_figure  .back_img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .recruit_figure  .back_img picture{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
  }
  .recruit_figure  .back_img picture img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .recruit_figure  .back_img::after{
    content: "";
    display: block;
    background-color: rgba(0, 0, 0, .79);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  .recruit_figure  .recruit_figure_txt{
    position: relative;
    z-index: 4;
  }
  .recruit_figure  .recruit_figure_txt p.inner{
    width: 59.4rem;
    margin-top: 2.55rem;
  }
  .recruit_figure  .recruit_figure_img{
    position: absolute;
    z-index: 3;
    bottom: -2%;
    left: 50%;
    transform: translateX(-50%);
    width: 94%;
  }
  .recruit_figure  .recruit_figure_img img{
    object-fit: cover;
  }
  @media screen and (max-width: 767px) {
    .recruit_figure {
      clip-path: polygon(0% 12%, 100% 0%, 100% 88%, 0 100%);
      padding-top: 10rem;
      height: 77.6rem;
  }
  .recruit_figure .recruit_figure_txt p.inner {
    width: 59.4rem;
    margin-top: 2rem;
    text-align: center;
}
.recruit_figure .recruit_figure_img {
  bottom: 0%;
  width: 99.24%;
}
  }
  /*recruit_application*/
.recruit_application{
  padding-top: 6.5rem;
  padding-bottom: 12.1rem;
}
.recruit_application .accordion_block{
  margin-top: 5.8rem;
}
.recruit_application dl{
  padding: 0 7rem 0 5rem;
}
.recruit_application dl div{
  display: flex;
}
.recruit_application dl div dt{
  width: 22.75%;
  padding: 3rem 1rem 2.88rem 2.56rem;
  background-color: var(--thema-color);
  border-bottom: .1rem solid #fff;
  color: #fff;
  font-size: max(1.7rem, 16px);
}
.recruit_application dl div dd{
  width: 77.25%;
  padding: 3rem 6rem 2.88rem 3.9rem;
  border-bottom: .1rem solid var(--thema-color);
  font-weight: 500;
  font-size: max(1.7rem, 16px);

}
.recruit_application dl div:nth-of-type(1) dt{
  border-top: .1rem solid #fff;
}
.recruit_application dl div:nth-of-type(1) dd{
  border-top: .1rem solid var(--thema-color);
}
@media screen and (max-width: 767px) {
  .recruit_application {
    padding-top: 5.5rem;
    padding-bottom: 7.2rem;
}
.recruit_application .subttl3 h2.catch_txt {
  margin-top: 0.85rem;
}
.recruit_application .accordion_block {
  margin-top: 3.9rem;
}
.recruit_application .accordion_block .accordion-header picture img{
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}
.recruit_application dl {
  padding: 0 2.3rem 0 1.5rem;
  margin-bottom: 4.8rem;
}
.recruit_application dl div{
  flex-direction: column;
}
.recruit_application dl div dt, .recruit_application dl div dd{
  width: 100%;
  padding: 1rem 0 1rem 2rem;
  font-weight: 400;
}

}
/*recruit_flow*/
.recruit_flow{
  padding-bottom: 9.8rem;
}
.recruit_flow ul{
  margin-top: 4.815rem;
  display: flex;
  flex-direction: column;
}
.recruit_flow ul li{
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 1.65rem;
  width: 100%;
  padding-bottom: 3.3rem;
}
.recruit_flow ul li .recruit_flow_img{
  background-color: var(--thema-color);
  width: 16.1rem;
  height: 16.1rem;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.recruit_flow ul li .recruit_flow_img img{
  width: 54%;
  object-fit: contain;
  z-index: 2;
}
.recruit_flow ul li:nth-child(1) .recruit_flow_img img{
  margin-left: 4%;
}
.recruit_flow ul li .recruit_flow_img::before{
  content: "";
  display: block;
  background-color: var(--thema-color);
  border-radius: 100%;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.recruit_flow ul li .recruit_flow_img::after{
  content: "";
  position: absolute;
  display: block;
  width: .2rem;
  height: 100%;
  background-color: #fff;
  left: 50%;
  bottom: -50%;
  transform: translateX(-50%);
  z-index: 0;
}
.recruit_flow ul li:nth-last-of-type(1) .recruit_flow_img::after{
  display: none;
}
.recruit_flow ul li .recruit_flow_txt{
  width: 76.8rem;
}
.recruit_flow ul li .recruit_flow_txt h3{
  font-size: max(2.5rem, 16px);
  margin-left: 1.8rem;
  margin-bottom: 2.6rem;
}
.recruit_flow ul li .recruit_flow_txt p{
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .recruit_flow {
    padding-bottom: 7.4rem;
}
 .recruit_flow .subttl3 h2.catch_txt {
    margin-top: .85rem;
}
.recruit_flow ul {
  margin-top: 3.2rem;
}
.recruit_flow ul li .recruit_flow_txt h3 {
  font-size: 2rem;
  margin-left: 0;
  margin-bottom: 1rem;
}
.recruit_flow ul li {
  align-items: start;
  gap: 1.7rem;
  padding-bottom: 4.4rem;
}
.recruit_flow ul li .recruit_flow_img img {
  width: 55%;
}
.recruit_flow ul li:nth-child(1) .recruit_flow_img img {
  width: 61.5%;
}
.recruit_flow ul li .recruit_flow_img {
  width: 8rem;
  height: 8rem;
}
.recruit_flow ul li .recruit_flow_txt {
  width: 68.7%;
}
.recruit_flow ul li .recruit_flow_img::after {
  content: "";
  position: absolute;
  display: block;
  width: .2rem;
  height: 400%;
  background-color: #fff;
  left: 50%;
  top: 0;
  transform: initial;
  z-index: 0;
}
}
/*recruit_entry*/
.recruit_entry{
  background-color: #806200;
  display: flex;
  flex-direction: column;
  align-items: center;
  clip-path: polygon(0% 0%, 100% 19%, 100% 100%, 0 100%);
}
.recruit_entry .subttl h3{
  color: #fff;
}
.recruit_entry .catch_txt{
  width: 85.2rem;
  max-width: 100%;
  margin-bottom: 1rem;
}
.recruit_entry .link_flex{
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .recruit_entry.foot_contact {
    clip-path: polygon(0% 0%, 100% 9%, 100% 100%, 0 100%);
    padding-top: 7.9rem;
    padding-bottom: 24.1rem;
}
.recruit_entry .catch_txt {
  font-size: 3rem;
  margin-top: 2.1rem;
  margin-bottom: 2.3rem;
}
}

@media screen and (max-width: 767px) {
  .header .header_nav li.recruit_fixed_btn{
    background-color: #806200;
    width: 100%;
  }
  .header .header_nav li.recruit_fixed_btn a {
    width: 100%;
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}
}
/* ===================================================================
// 友建設の推しページ
// ===================================================================*/
.favorite_block{
  padding-top: 5.7rem;
  padding-bottom: 22.3rem;

}
.favorite_content{
  height: 103.6rem;
  position: relative;
}
.favorite_block h2{
  font-family: var(--font-noto);
  color: #fff;
  position: absolute;
  letter-spacing: .2rem;
  text-align: left;

}
.favorite_block h2.yellow ,.modal_popup .yellow{
  color: #AD9D68;
  -webkit-text-stroke: #846A15 .1rem;
}
.favorite_block h2.red ,.modal_popup .red{
  color: #B16669;
  -webkit-text-stroke: #89373B .1rem;
}
.favorite_block h2.blue ,.modal_popup .blue{
  color: #97C2E0;
  -webkit-text-stroke: #1D6CA2 .1rem;
}
.favorite_block h2.gray ,.modal_popup .gray{
  color: #D9D9D9;
}
.favorite_block h2.column, .modal_popup .column{
  writing-mode: vertical-rl;
  line-height: 1.419;
  letter-spacing: 1.5rem;
}
h2.fav_common.fav_1{
  font-size: 4.5rem;
  -webkit-text-stroke-width: .2rem;
}
.favorite_block .fav_1{
  left: 0;
  top: 0;
  width: 35.2rem;
}
h2.fav_common.fav_2{
  font-size: 5rem;
  -webkit-text-stroke-width: .2rem;
}
.favorite_block .fav_2{
  top: 0;
  left: 35.2rem;
  width: 42.7rem;
}
h2.fav_common.fav_3{
  font-size: 4.3rem;
  -webkit-text-stroke-width: .2rem;
}
.favorite_block .fav_3{
  top: 0;
  right: 0;
  width: 16.8rem;
}
h2.fav_common.fav_4{
  font-size: 6.3rem;
  letter-spacing: 2rem;
  -webkit-text-stroke-width: .2rem;
}
.favorite_block .fav_4{
  top: 15.4rem;
  left: 0;
  width: 14.1rem;
  font-size: 6.3rem;

}
h2.fav_common.fav_5{
  font-size: 4rem;
}
.favorite_block .fav_5{
  top: 15.4rem;
  left: 16.7rem;
  width: 35.1rem;

}
h2.fav_common.fav_6{
  font-size: 2.8rem;
}
.favorite_block .fav_6{
  top: 15.4rem;
  left: 53.8rem;
  width: 42.7rem;
}
h2.fav_common.fav_7{
  font-size: 3.5rem;
}
.favorite_block .fav_7{
  top: 31.1rem;
  left: 16.7rem;
  width: 34rem;

}
h2.fav_common.fav_8{
  font-size: 6.5rem;
}
.favorite_block .fav_8{
  top: 29.7rem;
  left: 52.8rem;
  width: 35.1rem;

}
h2.fav_common.fav_9{
  font-size: 3.5rem;
  line-height: 1.714;
}
.favorite_block .fav_9{
  top: 50.1rem;
  left: 16.7rem;
  width: 37.8rem;

}
h2.fav_common.fav_10{
  font-size: 5.7rem;
}
.favorite_block .fav_10{
  top: 48rem;
  left: 53.8rem;
  width: 52.6rem;

}
h2.fav_common.fav_11{
  font-size: 7rem;
  letter-spacing: .42rem;
}
.favorite_block .fav_11{
  top: 64.3rem;
  left: 16.7rem;
  width: 43.1rem;

}
h2.fav_common.fav_12{
  font-size: 4.4rem;
}
.favorite_block .fav_12{
  top: 65.1rem;
  left: 53.8rem;
  width: 51.8rem;

}
h2.fav_common.fav_13{
  font-size: 3rem;
}
.favorite_block .fav_13{
  top: 77rem;
  left: 53.8rem;
  width: 52.9rem;

}
h2.fav_common.fav_14{
  font-size: 4.5rem;
}
.favorite_block .fav_14{
  top: 84.1rem;
  left: 0;
  width: 47.2rem;

}
h2.fav_common.fav_15{
  font-size: 3.5rem;
}
.favorite_block .fav_15{
  top: 96.9rem;
  left: 0;
  width: 43rem;

}
h2.fav_common.fav_16{
  font-size: 7rem;
}
.favorite_block .fav_16{
  top: 84.1rem;
  left: 45.7rem;
  width: 56.7rem;

}
.fav_modal .popup_txt{
  align-items: flex-start;
}
 .fav_modal h2.fav_common{
  text-align: left;
  margin-bottom: 2rem;
}
.fav_modal p{
  text-align: left;
}
.fav_modal .txt_column{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 3.6rem;
}
.fav_modal .fav4.txt_column{
  font-size: 5rem;
}
.fav_modal .txt_column p{
  margin-top: 1.4rem;
}

@media screen and (max-width: 767px) {
.favorite_page{

}
.favorite_block {
  padding-top: 2.9rem;
  padding-bottom: 13.4rem;
  padding-right: 3rem;
  font-size: calc(100vw / 136.6);
}
.favorite_content{
  height: initial;
}
.favorite_block h2.fav_common{
  position: relative;
  width: initial;
  top: initial;
  left: initial;
}
.favorite_block button{
  padding: 0;
}
.favorite_block h2.column, .modal_popup .column {
  writing-mode: vertical-rl;
  line-height: 1.2;
  letter-spacing: 1.2rem;
}
.favorite_block .fav_flex{
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  overflow: visible;
}
.favorite_block .fav_flex1 .fav_flex_l{
  width: 70%;
  display: flex;
  flex-direction: column;
  gap: 2.85rem;
}
.favorite_block .fav_flex1 .fav_flex_r{
  width: 28%;
}
.favorite_block .fav_flex2{
  gap: 5vw;
}
.favorite_block .fav_flex2 .fav_flex_l{

}
.favorite_block .fav_flex2 .fav_flex_r{
  width: 72%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.favorite_block .fav_flex2 h2.fav_common{
  white-space: nowrap;
}

h2.fav_common.fav_1{
  font-size: 10.26vw;
  -webkit-text-stroke-width: .2rem;
  margin-bottom: 1.1rem;
  white-space: nowrap;
}
h2.fav_common.fav_2{
  font-size: 6.4vw;
  -webkit-text-stroke-width: .2rem;
}

h2.fav_common.fav_3{
  font-size: 7.18vw;
  -webkit-text-stroke-width: .2rem;
}

h2.fav_common.fav_4{

  font-size: 9.2vw;
  letter-spacing: 2rem;
  -webkit-text-stroke-width: .2rem;
}

h2.fav_common.fav_5{
  font-size: 5.9vw;
}

h2.fav_common.fav_6{
  font-size: 6.4vw;
}

h2.fav_common.fav_7{
  font-size: 5.9vw;
}

h2.fav_common.fav_8{
  font-size: 11.8vw;
}

h2.fav_common.fav_9{
  font-size: 7.45vw;
  line-height: 1.714;
  letter-spacing: .1rem;
}

h2.fav_common.fav_10{
  font-size: 9.7vw;
  white-space: nowrap;
  margin-bottom: 1.1rem;
}

h2.fav_common.fav_11{
  font-size: 17.1vw;
  letter-spacing: .42rem;
  white-space: nowrap;
  margin-bottom: 2.4rem;
}

h2.fav_common.fav_12{
  font-size: 7.15vw;
  margin-bottom: 2.4rem;
  white-space: nowrap;
}

h2.fav_common.fav_13{
  font-size: 5.6vw;
  margin-bottom: 2rem;
}

h2.fav_common.fav_14{
  font-size: 9.8vw;
  margin-bottom: 2rem;
}

h2.fav_common.fav_15{
  font-size: 6.9vw;
  margin-bottom: 2.3rem;
}

h2.fav_common.fav_16{
  font-size: 9.7vw;
}
.fav_modal .fav_10{
  font-size: 8.5vw;
}
.fav_modal h2.fav_1{
  font-size: 9vw;
}

.fav_modal h2.fav_10 {
  font-size: 8vw;
}
.fav_modal h2.fav_11{
  font-size: 12vw;
}
.fav_modal h2.fav_13 {
  font-size: 5vw;
}
.fav_modal h2.fav_14 {
  font-size: 8vw;
}
.fav_modal h2.fav_15 {
  font-size: 6vw;
}
.fav_modal h2.fav_16 {
  font-size: 8.1vw;
}
.fav_modal h2.fav_common{
  white-space: wrap;
}
.fav_modal h2.fav_common.column{
  white-space: nowrap;
}
}
/* ===================================================================
// お知らせページ
// ===================================================================*/

/*ページナビ*/

.wp-pagenavi{
  text-align: center;
  margin-top: 8rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.wp-pagenavi .pages{
  color: #fff;
  width: max-content;
  border: none;
  font-size: max(2rem, 16px);
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
}


.wp-pagenavi .page, .wp-pagenavi .current, .wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink{
  font-size: max(2rem, 16px);

  border: none !important;
  border-radius: 100%;
  line-height: 1;
  width: 6.1rem;
  height: 6.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  font-family: var(--font-noto);
  color: #000;
}
.wp-pagenavi span.current {
  font-weight: bold;
background-color: var(--thema-color);
color: #fff;
}


.news_archive{
  padding-top: 7.9rem;
  padding-bottom: 15.7rem;
}
.archive_list .flex_wrap{
  flex-wrap: wrap;
  gap: 3.28rem 4.5rem;
}
.archive_list .flex_wrap li{
  clip-path: polygon(0% 8%, 100% 0%, 100% 92%, 0 100%);
  overflow: hidden;
  border-right: .3rem solid #fff;
  border-left: .3rem solid #fff;
  position: relative;
  width: 30.27%;
}
.archive_list .flex_wrap li::after{
  content: "";
  display: block;
  width: 120%;
  height: .3rem;
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translateX(-50%) rotate(-4.5deg);
  z-index: 1;
  background-color: #fff;
}
.archive_list .flex_wrap li::before{
  content: "";
  display: block;
  width: 120%;
  height: .3rem;
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%) rotate(-4.5deg);
  z-index: 1;
  background-color: #fff;
}

.archive_list .flex_wrap li img{
  width: 100%;
  aspect-ratio: 305	/	232  ;
}

.news_archive .flex_wrap li{
  background-color: #000;
  aspect-ratio: 310 / 311;
}

.news_archive .flex_wrap li .archive_txt{
  position: absolute;
  bottom: 6%;
  left: -2%;
  width: 120%;
  transform: rotate(-6deg);
}
.news_archive .flex_wrap li .archive_txt h3{
  background-color: var(--thema-color);
  font-size: max(2.2rem, 16px);
  padding: 1.2rem 6rem 0.45rem 2.3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-height: 1.364;
}
.news_archive .flex_wrap li .archive_txt p{
  font-family: var(--font-noto);
  padding: .5rem 1rem;
  font-weight: 500;
}

@media screen and (max-width: 1020px) {
  .news_archive .flex_wrap li .archive_txt p {
    padding: 0rem 1rem .5rem;
  }

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

  .news_archive {
    padding-top: 3rem;
    padding-bottom: 6.4rem;
}
  .archive_list .flex_wrap {
    flex-wrap: wrap;
    flex-direction: column;
    gap: .753rem;
}
.archive_list .flex_wrap li{
  width: 100%;
}
.wp-pagenavi {
  margin-top: 5rem;
  gap: 1rem;
}
.wp-pagenavi .page, .wp-pagenavi .current, .wp-pagenavi .nextpostslink, .wp-pagenavi .previouspostslink {
  font-size: 1.6rem;
  width: 4rem;
  height: 4rem;
}
.news_archive .flex_wrap li img {
  height: calc(100% - 11rem);
  object-fit: cover;
}
.works_archive .flex_wrap li img {
  height: calc(100% - 8rem);
  object-fit: cover;
}
.archive_list .flex_wrap li .archive_txt h3 {
  height: 3.5em;
}
.news_archive .flex_wrap li .archive_txt p {
  padding: .5rem 1rem;
}

}
@media screen and (max-width: 400px) {
  .news_archive .flex_wrap li img {
    height: initial;
    }
  .works_archive .flex_wrap li img {
    height: initial;

  }
  .archive_list .flex_wrap li .archive_txt h3 {
    height: auto;
  }
}

/*news_single*/
.single_page h1.title{
  font-size: 3rem;
  margin-bottom: 5.4rem;
}
.single_page figure{
  width: 100%;
  clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0 100%);
}
.single_page figure img{
  width: 100%;
  object-fit: cover;
}

.news_single{
  margin-top: 2.3rem;
  padding-right: 17rem;
  padding-left: 15rem;
  padding-bottom: 10rem;

}
.news_single .date{

}

.news_single h1.title{
  margin-top: .8rem;
}

.news_single figure img{
  aspect-ratio: 895 /	503  ;
  object-fit: cover;
}
.news_single .news_content{
  margin-top: 5.44rem;
  margin-bottom: 8rem;
}
.news_single .news_content p{
  font-weight: 500;
  margin: 1rem 0 1.1rem;
}
.news_single .news_content h2{
  font-size: max(2.5rem, 16px);
  margin: 2.3rem 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 2.1rem;
}
.news_single .news_content h2::before{
  content: "";
  display: block;
  background-color: #fff;
  height: 1.92em;
  width: 1.1rem;
}
.news_single .news_content h3{
  font-size: max(2rem, 16px);
  margin: 3.5rem 0 1.35rem;
  padding-bottom: .85rem;
  border-bottom: .1rem solid #fff;
  display: block;
  padding-right: 10.13em;
  max-width: 100%;
}
.news_single .news_content h4{
  font-size: max(1.8rem, 16px);
  margin: 1.8rem 0 1.35rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  align-items: baseline;

}
.news_single .news_content h4::before{
  content: "";
  display: block;
  background-color: #fff;
  height: 1rem;
  width: 1rem;
  border-radius: 100%;
  min-width: 1rem;
}
.news_single .news_content h5{
  font-size: max(1.8rem, 16px);
  margin: 1.8rem 0 1.35rem;
}
.single_btn_flex{
  display: flex;
  justify-content: space-between;
}
.single_btn_flex span.blank{
  content: "";
  display: block;
  width: 20.5rem;
  height: 0;
}
.single_btn_flex a{
  background-color: var(--thema-color);
  border-radius: 99rem;
  width: 20.5rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  font-size: max(1.8rem, 16px);

}
.arc_btn{
  display: flex;
  justify-content: center;
  margin-top: 1.85rem;
}
.arc_btn a{
  background-color: #fff;
  color: var(--thema-color);
  border-radius: 99rem;
  width: 20.5rem;
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  font-size: max(1.8rem, 16px);
}
@media screen and (max-width: 767px) {
  .news_single{
    padding: 3.2rem var(--wrapper) 7.2rem;
  }
  .single_page h1.title {
    font-size: 2.2rem;
    margin-bottom: 1.2rem;
}
.news_single .news_content {
  margin-top: 3.1rem;
  margin-bottom: 4.1rem;
}
.news_single .news_content p {
  margin: 1.5rem 0 3rem;
}
.news_single .news_content h2{
  margin: 3rem 0 1.7rem;
  font-size: 2.2rem;
  gap: .9rem;
}

.news_single .news_content h3 {
  font-size: 1.8rem;
  margin: 3.5rem 0 2.2rem;
  padding-bottom: .95rem;
  display: block;
  padding-right: 0;
}

.news_single .news_content h4 {
  font-size: 1.6rem;
}
.news_single .news_content h5 {
  font-size: 1.6rem;
}
.single_btn_flex a {
  width: 11.9rem;
  height: 4.1rem;
  font-size: 1.6rem;
}

.arc_btn {
  margin-top: 2.4rem;
}

.arc_btn a {
  width: 17.2rem;
  height: 5.1rem;
  font-size: 1.6rem;
}

}
/* ===================================================================
// 施工事例ページ
// ===================================================================*/
.works_archive{
  padding-top: 10rem;
  padding-bottom: 16.2rem;
}
.works_page .anchor_list li.active p{
  color: #000;
  z-index: 1;
  position: relative;
}
.works_page .anchor_list li.active a{
  background: rgba(255, 255, 255, .9);
  z-index: 0;
}
.works_archive .flex_wrap li{
  aspect-ratio: 62 / 59;
  background-color: #000;
}
.works_archive .flex_wrap li .archive_txt{
  position: absolute;
  bottom: 6%;
  left: -2%;
  width: 120%;
  transform: rotate(-6deg);
  padding-bottom: 1rem;

}
.works_archive .flex_wrap li .archive_txt h3{
  background-color:#000;
  font-size: max(2.2rem, 16px);
  padding: 1.2rem 7.3rem 0.4rem 2.3rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-height: 1.364;
}
@media screen and (max-width: 767px) {
  .works_archive {
    padding-top: 2.6rem;
    padding-bottom: 7.6rem;
}
}
/*works_single*/
.works_single{
  padding-top: 2.15rem;
  padding-bottom: 15.5rem;
}
.works_single .works_top{
  padding-right: 24rem;
  padding-left: 24rem;
}
.works_single figure img{
  aspect-ratio: 727 / 409;
}
.works_single .works_field{
  position: relative;
  margin: 5.4rem var(--wrapper) 7.5rem;

}
.works_single .works_field h2{
  background-color: var(--thema-color);
  color: #fff;
  font-size: max(2.5rem, 16px);
  padding: 2rem 8.2rem;
  clip-path: polygon(3% 0%, 100% 0%, 97% 100%, 0 100%);
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;

}
.works_single .field_block{
  background-color: #fff;
  clip-path: polygon(3% 0%, 100% 0%, 97% 100%, 0 100%);
  padding: 9.3rem 7.9rem 3.3rem 5rem;
  position: relative;
  z-index: 1;
}
.works_single .field_block dl{
  border: .1rem solid #000;
  padding: 2.1rem 2rem 2.4rem;
  margin-bottom: 2.3rem;
  width: 61.8%;
}
.works_single .field_block dl div{
  display: flex;
  margin-bottom: 1.6rem;
}
.works_single .field_block dl div:nth-last-child(1){
margin-bottom: 0;
}
.works_single .field_block dl div dt{
  width: 30%;
}
.works_single .field_block dl div dd{
  width: 70%;
}
.works_single .field_block p{
  font-weight: 500;
  margin-top: 1.4rem;
}
.works_single .single_btn_flex{
  margin: 0 5rem;
}
@media screen and (max-width: 767px) {
.works_single{
  padding-top: .8rem;
  padding-bottom: 9.2rem;
}
.works_single .works_top {
  padding: 0 var(--wrapper);
}
.works_single .works_field {
  position: relative;
  margin: 4.6rem var(--wrapper) 3.9rem;
}

.works_single .works_field h2 {
  font-size: 2rem;
  padding: 1.2rem 1.9rem;
}

.works_single .field_block {
  padding: 6.59rem 1.9rem 1.7rem ;
}

.works_single .field_block dl {
  padding: 1.5rem 1.1rem 1.1rem 1.3rem;
  margin-bottom: 2.2rem;
  width: 100%;
}
.works_single .field_block p {
  margin-top: 1rem;
  font-weight: 400;
}

.works_single .single_btn_flex {
  margin: 0;
}
.works_single .field_block dl div {
    margin-bottom: .7rem;
}
}

/* ===================================================================
// お問い合わせページ
// ===================================================================*/

/*contact_phone*/
.contact_phone{
  padding-top: 5.6rem;
}
.contact_phone .subttl3{
  margin-bottom: 6.4rem;
}
.contact_phone ul{
  display: flex;
  justify-content: space-between;
}
.contact_phone ul li {
  width: 47.8%;
}
.contact_phone ul li a{
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.16rem 4rem 3.6rem;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  width: 100%;
}
.contact_phone ul li h3{
  font-size: max(2.5rem, 16px);
}
.contact_phone ul li p{
  font-size: 4.2rem;
}
.contact_phone ul li span{
  font-size: max(1.5rem, 15px);
}

.contact_form{
  padding-top: 10.8rem;
  padding-left: 15rem;
  padding-right: 17.9rem;
  padding-bottom: 12.2rem;
}
.contact_form .contact_form_txt p{
  margin-top: 3.7rem;
  margin-bottom: 4.2rem;
  font-weight: 500;
  font-family: var(--font-noto);
}
.contact_form dt,.contact_form dd{
	font-size: max(1.8rem, 16px);
	font-weight: 700;
}

.contact_form p{
	font-size: max(1.8rem, 16px);
	font-weight: 700;
}

.contact_form .require{
  font-size: max(1.6rem, 16px);
  padding: 0rem 1rem;
  display: inline-block;
  line-height: 1.5;
  font-weight: 500;
  color: red;
}
.contact_form .non_require{
	width: 5rem;
  padding: 0rem 1rem 0 0;
  margin: 0 1rem;
  display: inline-block;
	line-height: 1.5;
}
.contact_form .input{
	display: flex;
	align-items: baseline;
  margin-bottom: 3rem;
  justify-content: flex-start;

}
.contact_form dl{
	margin-bottom: 5rem;
}
.contact_form .input dt{
  width: 21%;
  min-width: 11em;
	display: flex;

}
.contact_form .input dd{
  width: 79%;
}
.contact_form .kind .wpcf7-radio{
  display: flex;
  gap: 2.2rem;
}
.contact_form .kind .wpcf7-radio .wpcf7-list-item input{
  width: 12px;
  height: 12px;
  margin-right: 1rem;
}
.contact_form ul li{
	display: flex;
}
.contact_form input,.contact_form textarea{
	border: none;
	background-color: transparent;
  border: .1rem solid #fff;
	padding: 0 0.5rem;
	resize: vertical;
  width: 100%;
  color: #fff;
}
.contact_form input{
  height: 4.5rem;
}

.contact_form .input:nth-of-type(4){
	align-items: center;
}

.contact_form .bar{
	margin-right: 1rem;
}
.contact_form textarea{
	width: 100%;
	height: 19rem;
	padding: 1rem;
}

.contact_form .ctc_submit{
	text-align: center;
}
.contact_form .ctc_submit .ctc_caution{
	margin: 0;
}
.contact_form .ctc_submit .btn_area{
	justify-content: center;
	padding: 5rem 0 0 0;
}

.wpcf7-spinner{
	display: none;
}
.contact_form .ctc_submit p{
	line-height: 1;
}
.wpcf7-acceptance input {
    width: 2.5rem;
    height: 2.5rem;
	left: 53%;
	top: -4%;
    position: absolute;
	
}
.wpcf7-acceptance .wpcf7-list-item-label{
	font-size: max(2rem, 16px);
}
.wpcf7-acceptance .wpcf7-list-item label{
	position: relative;
}
.wpcf7-list-item {
    display: inline-block;

}

.contact_form .privacy_policy {
  margin: 1rem 0 2.5rem;
  padding: 1rem 4rem;
  overflow: scroll;
  height: 7.6em;
  border-radius: .5rem;
  background-color: #fff;
  color: #000;
}
.contact_form .privacy_policy p{
  font-weight: 500;
  font-size: max(1.4rem, 14px);
  font-family: var(--font-noto);
}
.contact_form .privacy_policy h1,.contact_form .privacy_policy h2,.contact_form .privacy_policy h3,.contact_form .privacy_policy h4,.contact_form .privacy_policy h5{
  font-size: max(1.4rem, 14px);
  margin-top: 1em;
  font-weight: 700;
  font-family: var(--font-cjk);
}
.btn_wrap{
	position: relative;
	border-radius: 8rem;
}
.btn_wrap p{
	margin: 0;
}


.contact_form .ctc_btn{
	font-style: normal;
	color: #fff;
	background-color: var(--thema-color);
  border-radius: 8rem;
  padding: 0 1rem;
  font-size: max(1.8rem, 16px);
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18rem;
  margin: 0;
  -webkit-transition: .3s;
  transition: .3s;
  border: none;
  width:23.7rem ;
  max-width: 100%;
  height: 6rem;
}


.contact_form .ctc_btn:hover{
	background-color: var(--thema-color);
	color: #fff;
	border: .1rem solid var(--thema-color);
}
.contact_form .btn_wrap:hover::after{
	background-color: #fff;
  }
.contact_form ul li div{
	display: flex;
	align-items: center;
}
.contact_form .ctc_submit p {
  line-height: 1.5;
  font-size: max(1.6rem, 16px);
  letter-spacing: 0.48rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
}
.contact_page .footer{
  margin-left: 0;
}



.wpcf7 .wpcf7-response-output {
  border-color: var(--thema-color);
  color: #fff;
}



@media screen and (max-width: 767px) {
  .contact_phone {
    padding: 4.5rem var(--wrapper) 0;
}
.contact_phone .subttl3 {
  margin-bottom: 2.6rem;
}

.contact_phone ul {
  flex-wrap: wrap;
  gap: 2rem;
}

.contact_phone ul li {
  width: 100%;
}


.contact_phone ul li a {
  padding: 2.3rem 2.45rem ;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  width: 100%;
}
.contact_phone ul li h3 {
  font-size: 1.8rem;
}
.contact_phone ul li p{
  font-size: 2.3rem;
}
.contact_phone ul li span {
  font-size: 1.2rem;
  letter-spacing: 0;
}
.contact_form {
  padding: 6.3rem var(--wrapper) 8.6rem;
}

.contact_form .contact_form_txt p {
  margin-top: 3.7rem;
  margin-bottom: 4.2rem;
  font-size: max(1.6rem , 16px);
}


.contact_form .input {
  margin-bottom: 1.6rem;
  flex-direction: column;
  gap: .6rem;
}
.contact_form .input dt {
  width: 100%;
}

.contact_form .input dd {
  width: 100%;
}
.contact_form .input.kind{
  margin-bottom: 2.3rem;
  gap: 1.15rem;
}

.wpcf7-list-item {
  margin: 0;
}

.contact_form .require {
  font-size: 1.6rem;
  padding: 0rem .5rem;
}
.contact_form .input:last-of-type {
  margin-bottom: 3.2rem;
}

.contact_form .privacy_policy {
  margin: .6rem 0 1.68rem;
  padding: 1.6rem 1.2rem;
  height: 10em;
  border-radius: 0;
}
.contact_form .ctc_submit .btn_area {
  justify-content: center;
  padding: 0;
  margin-top: 1.5rem;
}
.contact_form .ctc_submit p {
    line-height: 1.3;
    font-size: max(1.6rem, 16px);
    letter-spacing: 0;
    font-weight: 400;
    }
}




/*==================================================
スタート時は要素自体を透過0にするためのopacity:0;を指定する
===================================*/

.box{
  opacity: 0;
}

/*==================================================
ふわっ
===================================*/

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(10rem);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/*---------- webfontのちらつき対策 ------------ 
html {
  visibility: hidden;
}
html.wf-active, html.wfno-load {
  visibility: visible;
}
*/

/*==================================================
どんっ
===================================*/

.don{
  animation-name:anima_scale_10;
  animation-duration:1s;
  animation-fill-mode:forwards;
}


@keyframes anima_scale_10 {
  0% {
    transform: scale(2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.donTrigger{
  transform: scale(2);
  opacity: 0;
}

/*下からふわっと(delayScrollと非連動)*/
.fadeup{
  animation-name: fadeup_anime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes fadeup_anime{
  from {
    opacity: 0;
  transform: translateY(10rem);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

.fadeup_Trigger{
  transform: translateY(10rem);
  opacity: 0;
}





/***************************************************
/* ------ 縦スクロール / トップ.事業内容
**************************************************/
.reasons {
  position: relative;
}

/* 固定エリア */
.reasons__sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  padding: 0;
}

/* コンテンツ */
.reasons__content {
  position: relative;
  width: 100%;
  height: 100%;
}

.reasons__content .reason {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

/* 表示中の項目 */
.reasons__content .reason.active {
  opacity: 1;
}

/* ドットナビゲーション */
.reasons__dots {
  position: absolute;
  top: 35%;
  left: 1%;
  transform: translate(50%, 50%);
  width: 100%;
  text-align: center;
  background-color: #BCB099;
  padding: 3rem 2rem 1.8rem;
  border-radius: 30px;
  width: auto;
}

.reasons__dots .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background: #EFEBE4;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-bottom: 1.2rem;
}
.reasons__dots .dot:last-child{
}

.reasons__dots .dot.active {
  background: #FFFFFF;
}
@media screen and (max-width: 767px) {
/*
  .reasons {
    margin-top: -10%;
}
*/
  .reasons__dots {
    position: absolute;
    top: 42%;
    left: 85%;
    width: 3rem;
    padding: 1rem 0rem 1.2rem;
  }
  .reasons__dots .dot {
    width: 10px;
    height: 10px;
    margin: 0 1px;
  }
  .top_line1{
    padding-bottom: 5rem;
  }
}

/* スクロール用スペーサー（例：全体で3画面分のスクロール） */
.reasons__spacer {
  height: 300vh;
}

.reason{
  align-items: flex-start;
  align-content: flex-start;
  gap: 0;
}
.reason .about_vision_txt{
  width: 23%;
  padding-left: 5%;
}
.reason .about_vision_box{
  width: 77%;
  padding: 7.68rem var(--wrapper) 8.6rem 12.4rem;
  background: #fff;
  clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
  height: min-content;
}
.reason .about_vision_box div p.en{
  font-size: 1.6rem;
  font-weight: 300;
}
.reason .about_vision_box div .catch_txt{
  font-size: 2.8rem;
  font-weight: 300;
  line-height: 5rem;
  margin-bottom: 1.5rem;
}
.reason .about_vision_box .goldline{
  margin-bottom: 3rem;
}
.reason .about_vision_box .linkbtn{
  margin-top: 3rem;
}
.reason .about_vision_box div h3.catch_txt{
  font-size: 4.6rem;
  line-height: 3.5rem;
  font-weight: 900;
}
.recruit_page .reason:nth-child(4) .about_vision_box div .catch_txt{
  font-size: 2rem;
  line-height: 3rem;
}
.dynamic-number{
  font-size: 13rem;
  color: #fff;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  .reason{
    flex-wrap: wrap;
    padding-top: 10%;
  }
  .reason .about_vision_box .goldline{
    margin-bottom: 0;
    padding-top: 0;
    margin-top: 1rem;
  }
  .reason .about_vision_txt{
    width: 90%;
    margin-bottom: 1rem;
    margin-top: 1rem;
  }
  .reason .about_vision_txt img{
    width: 100%;
  }
  .reason .about_vision_box{
    width: 100%;
  }
  .reason .about_vision_box div .catch_txt{
    font-size: 1.8rem;
    line-height: 2.7rem;
    margin-bottom: 0rem;
  }
  .reason .about_vision_box .linkbtn{
    margin-top: 2rem;
  }
  .reason{
    flex-wrap: wrap;
    gap: 5%;
  }
  .reason .about_vision_txt{
    width: 100%;
  }
  .reason .about_vision_box{
    width: 100%;
  }
  .reason .about_vision_box p{
    font-size: 1.4rem;
    line-height: 2.2rem;
    margin-bottom: 0.5rem;
  }
  .recruit_page .reason .about_vision_box div .catch_txt{
    font-size: 2rem;
    line-height: 3rem;
  }
  .recruit_page .reason .about_vision_box .goldline{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
.recruit_page .reasons.rec_mvv .reasons__content .reason{
  top: 47.5%;
}
.recruit_page .reasons.rec_mvv .reason:nth-child(3) .about_vision_txt img{
  width: 100%;
  height: 19vh;
  object-fit: cover;
}
.recruit_page .reasons.rec_mvv .reason:nth-child(4) .about_vision_txt img{
  width: 100%;
  height: 12vh;
  object-fit: cover;
}
.recruit_page .reasons.rec_mvv .reason:nth-child(3) .about_vision_txt{
  margin-top: 30%;
}
.recruit_page .reasons.rec_mvv .reason .about_vision_box p{
  font-size: 1.4rem;
}
.recruit_page .reasons.rec_mvv .reasons__content .reason:nth-child(4){
  top: 49%;
}
.recruit_page .reason:nth-child(4) .about_vision_box div .catch_txt{
  font-size: 1.8rem;
  line-height: 2.2rem;
}
}


/* ===================================================================
// 404
// ===================================================================*/



.errpage{
	padding-top:20%;
	margin-bottom:10%;
	text-align:center;
}
.errpage h2{
	text-align:center;
	font-size:5rem;
	color: #fff;
}
.errpage h3{
  margin-top: 2%;
	color: #fff;
}
.clearfix{
	text-align: center;
}
.clearfix .btn_area{
	justify-content: center;
	margin-bottom: 5%;
}
.clearfix li{
	margin-top:5%;
	color: #fff;
}
.errpage .btn_area{
  justify-content: center;
  margin-bottom: 5%;
	color: #fff;
}
.errpage .btn_area a{
	color: #fff;
}
@media screen and (max-width: 767px) {
	.errpage{
	padding-top:30%;
	margin-bottom:20%;
	text-align:center;
}
	.errpage h2{
	text-align:center;
	font-size:3rem;
}
}