/*
Theme Name: IWATUTI
Author: Ycreer
Version: 1.0
Description: IWATUTI theme
*/

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
/* ===================================================================
// 基本スタイル
// ===================================================================*/

html {
  font-size: 62.5%;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-feature-settings: "pkna" 1;
          font-feature-settings: "pkna" 1;
	scroll-behavior: auto !important;
}
/* これがあると慣性スクロールが死にます！ */
html, body {
    overflow-x: clip; /* hidden から clip に変更 */
}

body {
 margin: 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #fff;
  font-weight: 300;
  overflow-x: clip;
  max-width: 100%;
  background-color: #171717;
}

@media screen and (max-width: 767px) {
  body {
    font-size: 1.5rem;
  }
	#index .header .btn{
	display: none;
}
	#index .mh .header .btn{
	display: inline;
}
}


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

/* 行間 */
p{
  line-height: 1.6;
	font-family: 'Noto Sans JP', sans-serif;
}

div, h1, h2, h3, h4, h5 {
  line-height: 1.2;
}

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


  a:hover {
    opacity: .7;
  }



/*  パンくずリスト　*/
.bread {
	margin: 1rem 1rem;
	padding: 0;
}

.bread ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 1.5rem;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.bread ul li {
  margin-right: 1rem;
  font-size: 1.5rem;
}
.bread ul li a{
	color: #fff;
	font-size: 1.5rem;
}
.bread ul li:after {
	font-size: 1.5rem;
  content: "\f105";
  font-family: "Font Awesome 5 free";
  font-weight: 700;
  margin-left: 1rem;
}

.bread ul li:last-child:after {
  display: none;
}

@media screen and (max-width: 450px) {
  .bread {
    padding: 1.2rem 0;
  }
  .bread ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .bread ul li {
    margin-right: .4rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .bread ul li:after {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .bread ul li:last-child:after {
    display: none;
  }
}



/* img */
img {
  max-width: 100%;
  height: auto;
}

.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;
  }
}

/* width */
.inner {
  width: 1000px;
  margin: 0 auto;
}

@media screen and (max-width: 1020px) {
  .inner {
    width: calc(100% - 4rem);
	text-align: center;
	gap: 30px;
  }
}
@media screen and (max-width: 767px) {
  .inner {
    width: 80%;
	margin: auto 10%;
  }
}
/* pc & sp */
.pc {
  display: block;
}

.sp {
  display: none;
}

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

.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;
}
}


.btn {
	border: 1px solid #fff;
	font-family: "Antonio", sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
  padding: 0.2rem auto;
  font-size: 2.4rem;
  display: inline-block;
  position: relative;
  min-width: 200px;
  text-align: center;
	vertical-align:  middle;
	margin-bottom: 4rem;
	color: #fff;
	text-align: center!important;
	justify-content: center!important;
	transition: 0.5s;
}

.btn p{
	display: flex;
	align-items: center;
	font-family: "Antonio", sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	font-size: 2rem!important;
	text-align: center!important;
	justify-content: center!important;
	transition: 0.5s;
	font-weight: 400;
}
.btn p::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: #fff;
}
.btn p::after {
  margin-left: 0.5em;
}
.btn:hover{
	background-color: #fff;
	color: #171717;
	opacity: 1;
	transition: 0.5s;
}
.btn:hover p::after {
	width: 50px;
	transition: 0.5s;
	background: #171717;
  }


@media screen and (max-width: 767px) {
	.btn p{
	  line-height: 2rem;
	}
}


/* CSS Document */

 .ttl_b{
	color: #fff;
}
 .ttl_b span {
	color: #C9813D;
}
 .ttl_b h2{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 4.8rem;
	margin-bottom: 4rem;
	font-weight: 500;
	 position: relative;
	 z-index: 2;
}

.ttl_b_n{
	color: #fff;
}
.ttl_b_n h2{
   font-family: 'Noto Sans JP', sans-serif;
   font-size: 2rem;
   font-weight: 400;
   margin-bottom: 3rem;
}
.ttl_b_n p{
	font-family: "Antonio", sans-serif;
	font-weight: 700;
   font-size: 8rem;
   line-height: 8rem;
   margin-bottom: 2rem;
   font-weight: 500;
}

@media screen and (max-width: 767px) {
	.ttl_b span {
}
 .ttl_b h2{
	font-size: 2.8rem;
  margin-bottom: 2rem;
}
.ttl_b_n h2{
   font-size: 2rem;
 margin-bottom: 0;
}
.ttl_b_n p {
	font-size: 6.4rem;
	line-height: 6.4rem;
	margin-bottom: 1.5rem;
}
}

/* ===================================================================
// メインビジュアル、タイトル
// ===================================================================*/
#mainimg {
  position: relative;
	display: block;
	padding-top: 7.5rem;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
#mainimg .mainimg_contents {
	width: 100%;
  height: 100%;
}
/* ★ここが最重要：動画の縦横比を維持して画面いっぱいに広げる */
#mainimg video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* 中央を基準に配置 */
	width: 100%;
	height: 100%;
	object-fit: cover; /* ★動画を歪ませず、枠を完全に覆うようにトリミングする */
	z-index: 1; /* テキストより後ろに配置 */
  }
@media screen and (max-width: 767px) {
	#mainimg {
		height: 95vh;
	}
	#mainimg .mainimg_contents{
		padding-top: 0;
		height: 95vh;
	}
	#mainimg .mainimg_contents,
	#mainimg .mainimg_contents img{
		height: 95vh;
		object-fit: cover;
	}
	#mainimg .mainimg_contents img{}
}
#mainimg .mainimg_contents .information {
  position: absolute;
	color: #FFFFFF;
	font-weight: bold;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-start;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	width: 90%;
	text-align: left;
	justify-content: flex-start;
}

#mainimg .mainimg_contents .information h2 {
	font-size: 11rem;
	font-weight: 700;
		font-family: "Antonio", sans-serif;
		font-optical-sizing: auto;
		font-style: normal;
}
#mainimg .mainimg_contents .information p{
	font-size: 3.5rem;
	font-weight: 400;
}
@media screen and (max-width: 767px) {
	#mainimg .mainimg_contents .information h2 {
		font-size: 4.8rem;
	}
	#mainimg .mainimg_contents .information p{
		font-size: 1.9rem;
		margin-top: 1rem;
	}
}

.banner_recruit{
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 25rem;
	height: auto;
	object-fit: contain;
	z-index: 999;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 767px) {
	.banner_recruit{
		width: 15rem;
		height: auto;
	}
}

/* =========================================
   PC用 / スマホ用 動画の切り替え
========================================= */
/* PC表示時：スマホ用動画を消す */
#mainimg video.sp {
	display: none;
  }
  
  /* スマホ表示時（例: 768px以下）：PC用動画を消してスマホ用を出す */
  @media (max-width: 768px) {
	#mainimg video.pc {
	  display: none;
	}
	#mainimg video.sp {
	  display: block;
	}
  }



@media screen and (max-width: 767px) {
  h2 {
    font-size: 2rem;
    letter-spacing: .2rem;
	  font-weight: 700;
  }
}

.marquee {
	overflow: hidden!important;
	position: absolute;
	left: 0;         /* ★追加：左端をピッタリ合わせる */
  width: 100%;     /* ★重要：幅を親要素（画面幅）の100%に制限する */
  /* ★追加：自分自身の高さの50%分だけ、下にスライドさせる */
  transform: translateY(-55%); 
  
  z-index: 10; /* 被っている下のセクションより手前に出すため */
  }
  
  .marquee__wrapper {
	display: flex;
	width: max-content; /* ★追加：自分の幅を「中身のテキストの合計の長さ」にする */
  animation: marquee-scroll 150s linear infinite;
  }
  
  .marquee__text {
	flex-shrink: 0;
	white-space: nowrap;
	padding-right: 2rem; /* テキスト間の余白 */
	font-size: 12.8rem;
	font-family: "Antonio", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	color: transparent;
	-webkit-text-stroke: 2px #fff;
	letter-spacing: 1rem;
  }
  
  @keyframes marquee-scroll {
	0% {
	  transform: translateX(0);
	}
	100% {
	  transform: translateX(-50%);
	}
  }

@media screen and (max-width: 767px) {
	.marquee__text {
	  font-size: 6.4rem;
	  -webkit-text-stroke: 1px #fff;
	}
}

/* ===================================================================
// main
// ===================================================================*/
main {
  margin: 12rem 0;
}

main#index {
  margin-top: 0;
}

main > section {
  padding: 1rem 0;
}

main > section:first-child {
  padding-top: 0;
}

@media screen and (max-width: 960px) {
  main {
    margin: 4rem auto 0;
  }
}

@media screen and (max-width: 767px) {
  main {
    margin: 2rem 0 0;
	  overflow: hidden;
  }
  main > section {
    padding: 4rem 0;
  }
}


/* ===================================================================
// ヘッダー,
// ===================================================================*/
header {
  width: 100%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
	background: #171717;
	position: fixed;
	z-index: 99;
	padding: 0.5rem 3rem 0.5rem;
}
header .logo{
	font-size: 2.2rem;
}
header .logo h1 a{
	color: #68a94a;
}
header .logo img {
    height: 3rem;
  }
@media screen and (max-width: 767px) {
  header {
    position: fixed;
    top: 0;
    left: 0;
	padding-top: 1.7rem;
	  padding-bottom: 1.7rem;
  }
}

.gnav_btn {
  display: none;
}

@media screen and (max-width: 900px) {
  .gnav_btn {
    display: block;
    font-size: 2rem;
    line-height: 1;
	  color:  #290603;
  }
  .gnav_btn:after {
    content: "\f0c9";
    font-family: "Font Awesome 5 free";
    font-weight: 900;
	  font-size: 2rem;
	  color:  #290603;
  }
  .gnav_btn.close:after {
    content: "\f00d";
  }
	header{
		padding-right: 2rem; 
	}
}

.gnav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
	margin-right: 3rem;
}

.gnav li {
  margin-left: 3rem;
  font-size: 16px;
	padding-top: 1rem;
	color: #260603;
}
.gnav li.herder_sns{
	padding-top: .2rem;
}
.gnav li.herder_sns:last-child{
	 margin-left: 1.5rem;
}
.gnav li a {
  font-weight: 500;
	 color: #260603;
}

  .gnav li a:hover {
    opacity: 0.5;
}
.gnav li a img{
	width: 35px;
	height: auto;
}

@media screen and (max-width: 1040px) {
  .gnav li {
    margin-left: 1.6rem;
  }
}

@media screen and (max-width: 900px) {
	.gnav .gnav_contact{
	margin-right: 0;
}
  .gnav {
    display: none;
    -webkit-transition: 1s;
    transition: 1s;
  }
	.gnav li {
	padding-top: 3rem;
}
	.gnav li.herder_sns{
	padding-top: 3rem;
		border-bottom: 0px;
		color: #260603;
	}
	.gnav li.herder_sns:last-child{
	 margin-left: 0rem;
}
  .gnav.open {
    display: block;
    position: fixed;
    width: 100%;
    z-index: 102;
    left: 0;
    top: 60px;
  }
  .gnav.open li {
    width: 100%;
    margin-left: 0;
	  font-weight: 700;
  }
  .gnav.open li a, .gnav.open li span {
    color: #333;
    display: block;
    text-align: center;
    font-weight: normal;
    font-size: 1.2rem;
    border-bottom: 1px solid #ccc;
	  padding-bottom: 2rem;
	  padding-top: -5rem;
	  margin-top: -1rem;
	  color: #260603;
  }
  .gnav.open li:first-child a {
 margin-top: 2rem;
  }
	.gnav.open li.gnav_contact a{
		padding-top: 2rem;
		font-weight: 700;
		padding-bottom: 2rem;
	}
}

.fixed {
  position: fixed;
  width: 100%;
}

.overrayer {
  position: fixed;
  width: 100%;
  height: calc(100% - 60px);
  z-index: 101;
  background-color: var(--thema-color);;
  top: 60px;
  left: 0;
  display: none;
}

/* ===================================================================
// フッター
// ===================================================================*/
footer .copyright{
  font-size: 1.2rem;
  text-align: center;
	width: 100%;
	background: #5E5E5E;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-top: 0;
}
footer{
	background: #5E5E5E;
	padding-top: 3%;
	margin-top: 0;
}
footer .company{
	margin: 2% auto;
}
footer .company .flex_wrap{
	gap: 10%;
	margin-bottom: 3%;
	align-items: flex-start;
	align-content: flex-start;
}
footer .company .flex_wrap .logo p{
	font-size: 1.6rem;
	font-weight: 400;
	margin-top: 2rem;
}
footer .company .flex_wrap .footer_info{
	width: 50%;
	text-align: left;
}
footer .company .flex_wrap .logo{
	width: 40%;
	font-size: 3rem;
	font-weight: 700;
}
footer .company .flex_wrap .logo a{
	color: #68a94a;
}
footer .company .flex_wrap .logo img{
	width: 80%;
}
#footer-menu{
}
#footer-menu ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 5%;
	list-style: none;
	font-weight: bold;
}
#footer-menu li{
	width: 30%;
	margin-bottom: 10%;
}
#footer-menu li a{
	color: #fff;
	font-family: "Antonio", sans-serif;
	font-size: 2.4rem;
	line-height: 2rem;
	margin-bottom: 0rem;
	font-weight: 700;
}
#footer-menu li a span{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.5rem;
}
#footer-menu li a:hover{
	opacity: 0.4;
}
@media screen and (max-width: 980px) {
	#footer-menu li{
		width: 46%;
		justify-content: flex-start;
		text-align: left;
	}
}
@media screen and (max-width: 767px) {
	footer .company .flex_wrap .footer_info{
		width: 100%;
	}
	footer .company .flex_wrap .logo{
		width: 100%;
		text-align: left;
		margin-bottom: 5rem;
		margin-top: 3rem;
	}
	footer .company.inner{
		padding: 2% 5%!important;
	}
  .footer {
  }
  footer .footer_info {
  flex-direction: column;
	  padding-bottom: 5%;
  }
	footer .footer_info div{
		width: 100%;
		margin-top: 5%;
	}
	footer .company .logo img{
	width: 100%;
	margin: 5% 0% 0;
}
}


/* ===================================================================
// メイン
// ===================================================================*/
.m_txt p{
	line-height: 2.5;
	margin-bottom: 2rem;
}
/* -------------------ABOUT ------------ */
#mission{
	position: relative;
	background: url(images/top/aboutback.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-size: cover;
	padding-bottom: 10rem;
	text-align: center;
	background-position: center;
	 overflow-x: hidden;
	padding-top: 18rem;
}

#mission .ttl_b2{
	margin-bottom: 5rem;
}
#mission .btn_area{
	justify-content: center;
}
#mission .inner p{
	font-size: 1.8rem;
	line-height: 4.5rem;
	font-weight: 400;
}
@media screen and (max-width: 767px) {
	#mission .ttl,
	#mission .m_txt{
		margin: auto 10%;
	}
	#mission .ttl_b2{
	margin-bottom: 3rem;
}
#mission .inner p{
	font-size: 1.8rem;
	text-align: left;
}
#mission .btn p{
  line-height: 2rem;
}
}

/* ------------------　事業内容 ------------ */
/* セクションのコンテナ */
.business-section {
	padding: 10%;
	display: flex;
	justify-content: center;
	position: relative;
  }
  .backlogo{
	position: absolute;
	right: 0;
	top: 25%;
	width: 80%;
	height: auto;
	object-fit: contain;
	z-index: -1;
  }
  
  .business-section .container {
	display: flex;
	gap: 7%; /* 画像とテキストの隙間 */
	max-width: 1000px;
	width: 100%;
  }
  
  /* 左側の画像エリア */
  .image-area {
	flex: 1;
	max-width: 500px;
  }
  
  .image-area img {
	width: 100%;
	height: 100%;
	min-height: 500px;
	object-fit: cover;
	display: block;
  }
  
  /* 右側のテキストエリア */
  .text-area {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
  }
  
  /* 説明文 */
  .description {
	line-height: 1.8;
	border-bottom: 1px solid #fff;
	padding-bottom: 30px;
  }
  
  /* リスト部分 */
  .business-list {
	list-style: none;
	padding: 0;
	margin: 0 0 0 0;
  }
  
  .business-list li {
	border-bottom: 1px solid #fff;
  }
  
  .business-list a {
	display: flex;
	align-items: center;
	padding: 20px;
	text-decoration: none;
	color: #ffffff;
	transition: background-color 0.6s ease;
  }
  
  .business-list a:hover {
	background-color: #fff;
	color: #000;
	opacity: 1;
  }
  
  .number {
	font-family: "Antonio", sans-serif;
	font-size: 3.2rem;
	color: #C9813D; /* オレンジ色のアクセントカラー */
	margin-right: 20px;
	font-weight: bold;
  }
  
  .text {
	font-size: 2.4rem;
	letter-spacing: 0.1em;
  }
  
  
  /* レスポンシブ対応（スマホ表示） */
  @media (max-width: 768px) {
	.business-section {
		padding: 15% 7%;
		display: flex;
		justify-content: center;
		position: relative;
	  }
	.business-section .container {
		flex-direction: column;
		gap: 3%;
	}
	.backlogo{
		position: absolute;
		right: 0;
		top: 65%;
		width: 80%;
		height: auto;
		object-fit: contain;
		z-index: -1;
	  }
	  
	.image-area {
	  max-width: 100%;
	}
	.image-area img {
	  min-height: 300px;
	}
	.business-list {
		border-top: 1px solid #fff;
	}
	.business-list a {
	  padding: 10px;
	}
	.number {
	  font-size: 2.5rem;
	  margin-right: 20px;
	}
	.text {
	  font-size: 1.8rem;
	}
	/* 説明文 */
	.description {
	  border-bottom: 0px solid #fff;
	  padding-bottom: 0;
	}
	
  }


/* ------------------ トップ実績 ------------ */
/* ベース設定 */
/* =========================================
   施工実績（PROJECTS）セクション 全体
========================================= */
.projects-section {
	color: hsl(0, 0%, 100%);
	padding: 80px 0; 
	overflow: hidden; /* 画面の横揺れ防止 */
	position: relative;
  }
  
  .projects-container {
	margin: 0 auto;
	padding: 0 0px;
  }
  
  /* 上部レイアウト（タイトル + スライダー） */
  .projects-top {
	display: flex;
	align-items: stretch;
	margin-bottom: 40px;
	position: relative;
  }
  
  /* 左側タイトルエリア（PROJECTS） */
  .projects-title-area {
	flex: 0 0 180px;
	background-color: transparent; /* 裏の暗い画像を見せるために透明にする */
	position: relative;
	z-index: 50; /* 文字を手前に */
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 0px 20px 40px;
	box-sizing: border-box;
	/* ↓タイトルエリアの下にある「左矢印」をクリックできるようにする魔法のコード */
	pointer-events: none; 
	background-color: #171717;
  }
  

  .projects-title-en,
  .projects-title-ja {
	pointer-events: auto; /* 文字自体は通常通り */
  }
  
  .projects-title-en {
	writing-mode: vertical-rl;
	font-family: "Antonio", sans-serif;
	font-weight: 500;
   font-size: 6rem;
	letter-spacing: 0.1em;
	margin: 0 0 20px 0;
  }
  
  .projects-title-ja {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6rem;
	letter-spacing: 0.2em;
	font-weight: 400;
  }
  @media screen and (max-width: 767px) {
	.projects-section{
		margin-top: 5%;
	}
	.projects-top {
		display: column;
  }
  /* 左側タイトルエリア（PROJECTS） */
  .projects-title-area {
	display: none;
  }
  .projects-section .ttl_b_n{
	margin: auto 7% 5%;
  }
  .projects_sptxt{
	margin: auto 7% 5%;
  }
  .projects_sptxt .btn_area{
	justify-content: flex-start;
	margin-bottom: 4rem;
  }
}
  
  /* 右側スライダーエリア */
  .projects-slider-wrapper {
	width: 100%; /* タイトル幅を引いたサイズ */
	min-width: 0;
	position: relative;
	z-index: 10;
	margin: auto 90px;
  }
  
  /* Slickのスタイル調整 */
  .projects-slider {
	margin: 0;
  }
  
  .projects-slider .slick-list {
	overflow: visible; /* ★左右にはみ出した画像を見せる */
	margin: 0 0;
  }
  
  /* スライド単体のデザイン */
  .project-slide {
	display: block;
	position: relative;
	padding: 0 10px; 
	text-decoration: none;
	color: #fff;
	outline: none;
  }
  
  .slide-img-wrapper {
	position: relative;
	width: 100%;
	height: 420px; 
	overflow: hidden;
	background-color: #333;
  }
  
  .slide-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  /* テキスト用の下部グラデーション */
  .slide-overlay {
	position: absolute;
	bottom: 0; left: 0; width: 100%; height: 50%;
	background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
	pointer-events: none;
	z-index: 5; 
  }
  
  .slide-info {
	position: absolute;
	bottom: 20px; left: 20px; right: 20px;
	z-index: 10; 
  }
  
  .slide-title {
	font-size: 1.6rem;
	margin: 0;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
  }
  @media screen and (max-width: 767px) {
	/* 右側スライダーエリア */
	.projects-slider-wrapper {
	  margin: auto 60px;
	}
	.slide-img-wrapper {
	  height: 300px; 
	}
  }
  
  /* =========================================
	 ★ 両サイドのはみ出しを暗くする設定 ★
  ========================================= */
  .project-slide .slide-img-wrapper::after {
	content: "";
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 0.7); /* ★はみ出した画像の暗さ（0.7） */
	transition: background-color 0.4s ease;
	pointer-events: none;
	z-index: 8; 
  }
  
  /* 中央の2枚（active）は明るくする */
  .slick-active .slide-img-wrapper::after {
	background-color: rgba(0, 0, 0, 0);
  }
  
  /* =========================================
	 ★ スライダーの矢印（ボタン）の設定 ★
  ========================================= */
  .projects-slider .slick-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100;
	
	background: transparent; 
	border: none;
	color: #ffffff;
	font-size: 3rem; /* 矢印の大きさ */
	cursor: pointer;
	padding: 0;
	outline: none;
	text-shadow: 0 2px 5px rgba(0,0,0,0.8); /* 背景が暗い画像でも見えやすいように影をつける */
  }
  
  /* 矢印の位置（両端の暗い画像の上に配置） */
  .projects-slider .slick-prev {
	left: -80px; /* ★左側の暗い画像の上に配置 */
  }
  .projects-slider .slick-next {
	right: -80px; /* ★右側の暗い画像の上に配置 */
  }
  
  /* 下部レイアウト（テキスト + ボタン） */
  .projects-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-top: 0px;
	margin-left: 180px;
	gap: 5%;
	margin-right: 10%;
	align-items: flex-start;
	align-content: flex-start;
  }
  
  .projects-desc {
	font-size: 1.6rem;
	line-height: 1.8;
	margin: 0;
  }
  
  .btn {
	margin-bottom: 0;
  }
  @media screen and (max-width: 767px) {
	/* 矢印の位置（両端の暗い画像の上に配置） */
	.projects-slider .slick-prev {
	  left: -60px; /* ★左側の暗い画像の上に配置 */
	}
	.projects-slider .slick-next {
	  right: -60px; /* ★右側の暗い画像の上に配置 */
	}
	.projects-bottom.pc{
		display: none;
	}
  }
  

  /* =========================================
   ★ はみ出した画像のクリックを無効化 ★
========================================= */
/* アクティブ（中央）ではないスライドのクリック操作を完全に無効にする */
.projects-slider .slick-slide:not(.slick-active) {
	pointer-events: none;
	cursor: default;
  }
  
/* =========================================
   ★ はみ出した画像を「スライダーのボタン」にする ★
========================================= */
.projects-slider .slick-slide:not(.slick-active) {
  cursor: pointer; /* マウスを指マークに */
  pointer-events: auto !important; /* ★追加：確実にクリックできるようにする */
}



/* =========================================
   JOIN US (採用情報) セクション
========================================= */
.recruit-section {
	position: relative;
	/* ↓ 実際の背景画像のパスに書き換えてください */
	background: url(images/top/topjoinus.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 120px 0;
	margin-top: 10%;
	margin-bottom: 10%;
  }
  
  .recruit-section .marquee{
	transform: translateY(-5%); 
}
  /* 背景画像の上に薄い黒のフィルターをかけて文字を読みやすくする */
  .recruit-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
  }
  
  .recruit-container {
	position: relative;
	z-index: 2; /* フィルターより手前に文字を出す */
	margin: 0 auto;
	padding: 0 5%;
  }
  
  /* タイトル部分 */
  .recruit-header {
	text-align: center;
	margin-bottom: 120px;
	position: absolute;
	top: -8rem;
	width: 100%;
  }
  
  .recruit-title-en {
	font-family: "Antonio", sans-serif;
	font-size: 12rem; /* かなり大きめに設定 */
	letter-spacing: 0.05em;
	margin: 0 0 30px 0;
	line-height: 1;
  }
  
  .recruit-title-ja {
	font-size: 2.5rem;
	font-weight: 400;
	letter-spacing: 0.1em;
	margin: 0;
  }
  
  @media screen and (max-width: 767px) {
	.recruit-section {
		background: none;
		margin-bottom: 25%;
	}
	.recruit-container {
	  padding: 0 0;
	}
  }


  /* コンテンツ部分（フレックスボックスで右寄せ） */
  .recruit-content {
	display: flex;
	justify-content: flex-end; /* テキストエリアを右端に寄せる */
  }
  
  /* テキストエリア */
  .recruit-text-area {
	margin-top: 3rem;
  }
  
  .recruit-text-area p {
	font-size: 1.6rem;
	line-height: 2;
	letter-spacing: 0.05em;
	margin: 3rem 0 0 0;
  }
  
  .recruit-text-area p:last-of-type {
	margin-bottom: 40px; /* ボタンとの余白 */
  }
  .recruit-text-area .btn_area{
	margin: 0;
	padding: 0;
  }
  .recruit-text-area .btn_area p{
	margin: 0;
  }
  @media screen and (max-width: 767px) {
	/* コンテンツ部分（フレックスボックスで右寄せ） */
	.recruit-content {
		background-color: #03090B;
	}
	.recruit-header h2{
		margin-bottom: 0;
		line-height: 4rem;
	}
	.recruit-text-area{
		margin: auto 7% 20%;
	}
  }
  
  /* ボタン */
  .btn-recruit {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ffffff;
	padding: 12px 30px;
	text-decoration: none;
	color: #ffffff;
	font-family: 'Impact', 'Arial Black', sans-serif;
	letter-spacing: 0.05em;
	font-size: 1.1rem;
	transition: all 0.3s ease;
  }
  
  .btn-recruit::after {
	content: "";
	display: inline-block;
	width: 30px; /* 横線の長さ */
	height: 1px;
	background-color: #ffffff;
	margin-left: 20px;
	transition: all 0.3s ease;
  }
  
  .btn-recruit:hover {
	background-color: #ffffff;
	color: #1a1a1a;
  }
  
  .btn-recruit:hover::after {
	background-color: #1a1a1a;
  }
  
  /* レスポンシブ対応 (スマホ) */
  @media (max-width: 768px) {
	.recruit-section {
	  padding: 0 0 ;
	}
	.recruit-header{
		top: -2rem;
		margin-bottom: 0;
	}
	.recruit-title-en {
	  font-size: 6.4rem;
	}
	.recruit-title-ja.sp{
		font-size: 2.6rem;
		margin-top: 2rem;
		margin-bottom: 0;
		text-align: center;
	}
	.recruit-content {
	  justify-content: center; /* スマホでは中央寄せ */
	}
	.recruit-text-area {
	  width: 100%;
	}
  }

  .recruit-section .marquee{
	bottom: -8rem;
  }
  @media (max-width: 768px) {
	.recruit-section .marquee{
	  bottom: -4rem;
	}
  }


/* -----------お問い合わせ---------------- */
 .top_contact{
	text-align: left;
	background-color: #515151;
	margin: 15% 10% 10%;
	padding: 5% 7% 3%;
	gap: 10%;
}
.top_contact .ttl_b_n{
	margin-bottom: 0;
}
 .top_contact p{
	text-align: left;
}
 .top_contact .btn_area{
	justify-content: flex-start;
	padding-top: 2.5rem;
	margin-bottom: 0;
	padding-bottom: 0;
}
@media screen and (max-width: 1200px) {
	 .top_contact{
	}
}
@media screen and (max-width: 960px) {
	 .top_contact{
		margin-bottom: 20%;
	}
	.top_contact_txt{
		margin-top: 2.5rem;
	}
	.top_contact .btn_area{
	   padding-top: 0;
	   margin-bottom: 3rem;
	}
}
@media screen and (max-width: 767px) {
	 .btn_area{
	justify-content: center;
}
}

/* ===================================================================
// 下層ページ
// ===================================================================*/
#content{
	margin-top: 0;
	padding-top: 6rem;
}
#mainttl{
	padding: 5% 10% 5%;
}
#mainttl h1{
	font-size: 2.2rem;
	color: #fff;
	font-weight: 400;
}
#mainttl p{
	font-size: 8rem;
	color: #fff;
	font-family: "Antonio", sans-serif;
	line-height: 8rem;
	margin-bottom: 1.5rem;
}
@media screen and (max-width: 767px) {
	#mainttl{
		padding: 10% 7% 10%;
	}
	#mainttl h1{
	font-size: 2rem;
}
#mainttl p{
	font-size: 6rem;
	margin-bottom: .5rem;
}
}

/* 
===================================================================
// 会社概要ページ
// ===================================================================*/
.company_page #mainttl{
	background: url(images/company/head.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
 .com_1{
	margin: 7% 0 10% 0;
	gap: 8%;
	position: relative;
	padding-bottom: 10%;
}
.company_page .ttl_b,
.company_page .ttl_b2,
.recruit_page .ttl_b,
.recruit_page .ttl_b2{
	text-align: center;
}
.com_1 img{
	width: 42%;
}
 .com_1_t{
	width: 50%;
	text-align: left;
	padding-right: 10%;
}
 .com_1_t p.greeting_name{
	text-align: right;
	margin-top: 5%;
	font-weight: 500;
}
.com_1 .greeting_back{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 40%;
}

@media screen and (max-width: 767px) {
	.company_page #mainttl{
		background: url(images/company/headsp.png);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
	}
	.com_1 img{
		width: 93%;
		margin-right: 7%;
		margin-bottom: 2rem;
		height: 27rem;
	}
	 .com_1_t{
		width: 100%;
		text-align: left;
		margin: 0;
		padding: 0 7%;
	}
	.com_1_t .ttl_b_n{
		margin-bottom: 3rem;
	}
	.com_1 .greeting_back{
		position: absolute;
		bottom: 1rem;
		right: 0;
		width: 80%;
		margin-right: 0;
	}
	.com_1_t p.greeting_name{
	   margin-top: 10%;
   }
}

.company_page .enkaku{
	margin: 5% 0 5% 10%;
}
.company_page .enkaku .ttl_b_n{
	text-align: left;
	margin-bottom: 5%;
}
.enkaku .flex_wrap dl{
	display: flex;
	flex-wrap: wrap;
	width: 52%;
	text-align: left;
	margin: 0 0 auto;
	gap: 0;
	border-top: 1px solid #8C8C8C;
}
.enkaku dl dt{
	width: 30%;
	padding: 2rem 2rem 2rem 3rem;
	background-color: #515151;
	border-bottom: 1px solid #8C8C8C;
	align-items: flex-start;
	align-content: flex-start;
}
 .enkaku dl dd{
	width: 70%;
	padding: 2rem 2rem 2rem 3rem;
	border-bottom: 1px solid #8C8C8C;
	align-items: center;
	align-content: center;
}
.enkaku .flex_wrap .cominfo_img{
	width: 40%;
}
.enkaku .flex_wrap .cominfo_img img:first-child{
	margin-bottom: 4rem;
}



@media screen and (max-width: 767px) {
	 .com_1_t{
	margin: 5% 0;
}
.company_page .enkaku{
	margin: 5% 0 5% 7%;
}
.company_page .enkaku .enkakuflex.flex_wrap{
	flex-wrap: wrap;
	width: 100%;
}
.company_page .enkaku .enkakuflex.flex_wrap dl{
	width: 100%;
	margin: 5% 7% auto 0;
	gap: 0;
	border-top: 0px solid #8C8C8C;
}
	.enkaku dl dt{
	width: 100%;
	padding: 1.5rem 1rem 1.5rem 1rem;
	border-bottom: 0px solid #8C8C8C;
}
 .enkaku dl dd{
	padding: 1.5rem 1rem 2rem;
	width: 100%;
	border-bottom: 0px solid #8C8C8C;
}
	.company_page .enkaku.en_company iframe{
	width: 80%;
	margin: 5% 10%;
	height: 40vh;
}
.enkaku .flex_wrap .cominfo_img{
	width: 93%;
	display: flex;
	gap: 5%;
	margin-right: 7%;
	margin-top: 2rem;
}
.enkaku .flex_wrap .cominfo_img img{
	width: 47.5%;
	object-fit: contain;
	margin: 0;
}
.enkaku .flex_wrap .cominfo_img img:first-child{
	margin-bottom: 0;
}
}

.company_map{
	margin: 10% 10% 0;
	gap: 5%;
}
.company_map iframe{
	width: 60%;
}
.company_map .company_map01{
	width: 35%;
}
@media screen and (max-width: 767px) {
	.company_map{
		margin: 0% 7% 0;
		gap: 5%;
		padding-top: 1rem;
	}
	.company_map iframe{
		width: 100%;
		order: 2;
		height: 30vh;
	}
	.company_map .company_map01{
		width: 100%;
		order: 1;
		margin-bottom: 3rem;
	}
}

/* 
===================================================================
// 事業内容ページ
// ===================================================================*/
.service_page #mainttl{
	background: url(images/service/head.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media screen and (max-width: 767px) {
	.service_page #mainttl{
		background: url(images/service/headsp.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}
.service_page .service_ankerlink{
	margin: 2% 10% 8%;
}
.service_page .service_ankerlink .flex_wrap{
	justify-content: flex-start;
	gap: 5%;
}
.service_page .service_ankerlink a{
	padding: 0.5rem 2rem;
	border: 1px solid #fff;
	color: #fff;
	display: inline-block;
	position: relative;
	vertical-align: middle;
}

.service_page .service_ankerlink a p{
	display: flex;
	align-items: center;
	font-family: "Antonio", sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	font-style: normal;
	font-size: 1.8rem!important;
	text-align: center!important;
	justify-content: center!important;
	transition: 0.5s;
	font-weight: 400;
}
.service_page .service_ankerlink a p::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: #fff;
}
.service_page .service_ankerlink a p::after {
  margin-left: 2rem;
}
.service_page .service_ankerlinki a:hover{
	background-color: #fff;
	color: #171717;
	opacity: 1;
	transition: 0.5s;
}
.service_page .service_ankerlink a:hover p::after {
	width: 50px;
	transition: 0.5s;
	background: #fff;
  }


@media screen and (max-width: 767px) {
	.service_page .service_ankerlink{
		margin: 0% 10% 4%;
	}
	.service_page .service_ankerlink a{
		margin-bottom: 1.5rem;
		width: 100%;
		text-align: left;
		justify-content: flex-start;
	}
	.service_page .service_ankerlink a p{
		text-align: left!important;
		justify-content: flex-start!important;
	}
}


.service_sec{
	gap: 5%;
	margin-right: 10%;
	margin-bottom: 10%;
	padding-top: 10%;
	margin-top: -10%;
}
.service_sec .service_img{
	width: 47.5%;
}
.service_sec .service_img img{
	height: 100%;
	object-fit: cover;
}
.service_sec .service_txt{
	width: 47.5%;
	border: 1px solid #fff;
	padding: 5rem;
}

.service_sec.service_sec_l{
	gap: 5%;
	margin-right: 0%;
	margin-left: 10%;
}
.service_sec.service_sec_l .service_img{
	order: 2;
}
.service_sec.service_sec_l .service_txt{
	order: 1;
}
@media screen and (max-width: 767px) {
	.service_sec{
		gap: 5%;
		margin-right: 7%;
		padding-top: 23%;
		margin-top: -23%;
	}
	.service_sec .service_img{
		width: 100%;
		margin-bottom: 4rem;
	}
	.service_sec .service_txt{
		width: 93%;
		margin-left: 7%;
		padding: 2.5rem;
	}
	.service_sec .service_txt .ttl_b_n{
		margin-bottom: 2.5rem;
	}
	.service_sec .service_txt .ttl_b_n h2{
		font-size: 2rem;
		line-height: 2rem;
	}
	.service_sec .service_txt .ttl_b_n p{
		font-size: 4rem;
		line-height: 4rem;
	}
	.service_sec.service_sec_l{
		gap: 5%;
		margin-right: 0%;
		margin-left: 7%;
	}
	.service_sec.service_sec_l .service_img{
		order: 1;
	}
	.service_sec.service_sec_l .service_txt{
		order: 2;
	}
	.service_sec.service_sec_l .service_txt{
		width: 93%;
		margin-left: 0%;
		margin-right: 7%;
		padding: 2.5rem;
	}
}


.service_last{
	background-color: #03090B;
	padding: 5rem 0;
}
.service_last .service_last_b{
	background: url(images/service/service_back.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-align: center;
	padding: 7% 10%;
}
.service_last .service_last_b p{
	font-size: 2rem;
	font-weight: 700;
	line-height: 5rem;
}
@media screen and (max-width: 767px) {
	.service_last{
		margin-bottom: 20%;
	}
	.service_last .service_last_b{
		padding: 12% 7%;
	}
	.service_last .service_last_b p{
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 4rem;
	}
}


/* 
===================================================================
// 採用ページ
// ===================================================================*/
.recruit_page #mainttl{
}
.recruit_mv{
	position: relative;
}
.recruit_mv .fvtxt{
	position: absolute;
	top: 13%;
	left: 3%;
	width: 55%;
}
.recruitslider{
	position: absolute;
	bottom: 0;
	margin: 0;
	transform: translateY(0);
}
.recruitslider .marquee__text {
  flex-shrink: 0;
  white-space: nowrap;
  padding-right: 2rem; /* テキスト間の余白 */
  font-size: 12.8rem;
  font-family: "Antonio", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  color: transparent;
  letter-spacing: 1rem;
  color: #fff;
  opacity: 0.4;
  margin: 0;
}
/* -------------------------------------------
   「バンっ！」とスタンプを押すようなアニメーション
------------------------------------------- */
/* 初期状態（見えない＆少し大きい） */
.bam_anime {
    opacity: 0;
    transform: scale(1.3); /* ★ ここを 1 より大きい数値にする（例：1.3倍） */
    /* 0.5秒かけて、バネのように跳ね返って着地させる */
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 画面に入って「is_active」クラスが付いた時の状態（元のサイズ＆くっきり） */
.bam_anime.is_active {
    opacity: 1;
    transform: scale(1); /* 1倍（元のサイズ）に着地 */
}
@media screen and (max-width: 767px) {
	.recruit_mv{
		padding: 0;
	}
	.recruitslider img.sp{
		display: block;
	}
	.recruit_mv .fvtxt{
		position: absolute;
		top: 50%;
		left: 3%;
		width: 90%;
	}
	.recruitslider .marquee__text {
	  font-size: 7rem;
	  line-height: 7rem;
	}
	.recruitslider{
		position: absolute;
		top: -1rem;
		margin: 0;
		transform: translateY(0);
	}
}

.ttl_b_r p{
	font-size: 2rem;
	font-family: "Antonio", sans-serif;
}
.ttl_b_r h2{
	font-size: 4rem;
	font-weight: 500;
	margin-bottom: 3rem;
	line-height: 6rem;
}
.recruit_message{
	text-align: center;
	position: relative;
	padding: 0 10%;
	margin-top: 7%;
	margin-bottom: 10%;
}
.recruit_message p.recmessagep{
	line-height: 3.5rem;
	font-size: 1.8rem;
}
.backlogo{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* 中央を基準に配置 */
	width: 70%;
}

@media screen and (max-width: 767px) {
	.recruit_message{
		text-align: left;
	}
	.ttl_b_r p{
		font-size: 1.6rem;
		margin-bottom: .5rem;
	}
	.ttl_b_r h2{
		font-size: 2.2rem;
		font-weight: 500;
		margin-bottom: 1.5rem;
		line-height: 3rem;
	}
	.recruit_message{
		padding: 0 7%;
		margin-top: 7%;
		margin-bottom: 10%;
	}
	.recruit_message .ttl_b_r{
		border-bottom: 1px solid #fff;
		margin-bottom: 2rem;
	}
	.recruit_message p.recmessagep{
		line-height: 3rem;
		font-size: 1.6rem;
	}
	.recruit_message .backlogo{
		position: absolute;
		top: 5%;
		right: 0!important;
		width: 93%;
		transform: translate(-43%, 0%); /* 中央を基準に配置 */
	}
}
.recruit_strength{
	position: relative;
	padding:5% 10% 0;
}
.shaped-element0 {
    width: 100%;        /* 親要素に合わせる（任意の幅に調整可能） */
    height: 100%;       /* 任意の高さ */
    background-color: #C9813D; /* 画像から抽出した茶色 */
    clip-path: polygon(0% 0, 100% 0, 100% 100%, 25% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* テキスト色 */
    font-size: 1.2rem;
    font-weight: bold;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	right: 0;
}

.strength_cnt{
	gap: 0;
}
.strength_cnt .strength_cnt01{
	width: calc(100% / 3);
	position: relative;
}
.strength_cnt .strength_cnt01 p{
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	right: 2rem;
	font-size: 1.8rem;
	line-height: 2.5rem;
	z-index: 1;
}
.strength_cnt .strength_cnt01 img{
	height: 300px;
	object-fit: cover;
}
/* 半透明マスク (★追加) */
.concept-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の黒 (0.5は透明度50%) */
    z-index: 1; /* 画像の上に重ねる */
}

@media screen and (max-width: 767px) {
	.recruit_strength{
		position: relative;
		padding: 20% 0% 0;
	}
	.strength_cnt .strength_cnt01{
		width: 100%;
		position: relative;
	}
	.recruit_strength .ttl_b_r{
		margin: auto 7%;
	}
	.shaped-element0 {
		width: 100%;        /* 親要素に合わせる（任意の幅に調整可能） */
		height: 30rem;  
	}
	
}

.recruit_strength_2{
	padding: 10% 10%;
	position: relative;
}
.shaped-element {
    width: 100%;        /* 親要素に合わせる（任意の幅に調整可能） */
    height: 100%;       /* 任意の高さ */
    background-color: #C9813D; /* 画像から抽出した茶色 */
    clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff; /* テキスト色 */
    font-size: 1.2rem;
    font-weight: bold;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
}
.recruit_strength_2 .ttl_b_r{
	text-align: center;
}
.recruit_strength_2 .numbers01{
	gap: 5%;
}
.recruit_strength_2 .numbers01 .numbers02{
	width: 47.5%;
	border: 1px solid #fff;
	background-color: #515151;
	padding: 2rem 4rem;
	gap: 3rem;
	position: relative;
}
.recruit_strength_2 .numbers01 .numbers02 img{
	width: 8rem;
	height: auto;
	object-fit: contain;
}
.recruit_strength_2 .numbers01 .numbers02 .numbers03{
	text-align: left;
	width: calc(100% - 11rem);
}
.recruit_strength_2 .numbers01 .numbers02 .numbers03 p{
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
}
.recruit_strength_2 .numbers01 .numbers02 .numbers03 p span{
	font-size: 4.4rem;
	font-weight: 600;
	line-height: 4.4rem;
}
.recruit_strength_2 .numbers01 .numbers02 .numbers03 .numbers04{
	gap: 5%;
	justify-content: flex-start;
}
.recruit_strength_2 .numbers01 .numbers02 .numbers03 .numbers04 .numbers05{
	width: 100%;
	font-size: 1.6rem;
	margin-top: 1rem;
	align-items: center;
	align-content: center;
	justify-content: flex-start;
	gap: 1rem;
}
.recruit_strength_2 .numbers01 .numbers02 .numbers03 .numbers04 .numbers05 p{
	font-size: 1.6rem;
	text-align: left;
	font-weight: 400;
}
.recruit_strength_2 .numbers01 .numbers02 .numbers03 .numbers04 .numbers05 p:first-child{
	background-color: #fff;
	color: #000000;
	padding: 0rem 1.5rem;
	border-radius: 30px;
}
.number00{
	position: absolute;
	bottom: -3rem;
	left: 0;
}

@media screen and (max-width: 767px) {
	.recruit_strength_2{
		padding: 15% 7% 25%;
		position: relative;
	}
	.recruit_strength_2 .numbers01 .numbers02{
		width: 100%;
		margin-top: 2rem;
		padding: 1rem 2rem;
		gap: 2rem;
	}
	.recruit_strength_2 .numbers01 .numbers02 img{
		width: 7rem;
	}
	.recruit_strength_2 .numbers01 .numbers02 .numbers03 p span{
		font-size: 3.6rem;
		line-height: 3.6rem;
	}
	.recruit_strength_2 .numbers01 .numbers02 .numbers03 .numbers04 .numbers05{
		width: 100%;
		margin-top: 0.3rem;
	}
	.recruit_strength_2 .numbers01 .numbers02 .numbers03{
		text-align: left;
		width: calc(100% - 9rem);
	}
	.number00{
		font-size: 1.4rem;
	}
}


.recruit_interview{
	background: url(images/recruit/20260319-333.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 8% 10%;
}
.recruit_interview .concept-mask{
	z-index: 0;
}
.recruit_interview .ttl_b_r{
	z-index: 1;
	text-align: center;
	position: relative;
}

.recruit_interview .recruit_interview01{
	gap: 5%;
	position: relative;
	z-index: 1;
	margin-top: 5rem;
	flex-wrap: wrap;
	justify-content: center;
}
.recruit_interview .recruit_interview01 .recruit_interview02{
	border: 1px solid #fff;
	background-color: #515151;
	width: 47.5%;
	position: relative;
	color: #fff;
	align-items: center;
	align-content: center;
	margin-bottom: 4rem;
}
.recruit_interview .recruit_interview01 .recruit_interview03{
	align-items: center;
	align-content: center;
}
.recruit_interview .recruit_interview01 .recruit_interview03 img{
	width: 50%;
	height: 130px;
	object-fit: cover;
}
.recruit_interview .recruit_interview01 .recruit_interview03 div{
	width: 50%;
	padding: 2rem;
}
.recruit_interview .recruit_interview01 .recruit_interview03 div p span{
	font-size: 2.4rem;
	font-weight: 500;
	margin-right: 1rem;
}
.recruit_interview .recruit_interview04{
	background-color: #C9813D;
	text-align: center;
	color: #fff;
	padding: 0.2rem;
}
.recruit_interview .recruit_interview04 p{
	font-family: "Antonio", sans-serif;
}


@media screen and (max-width: 767px) {
	.recruit_interview{
		padding: 15% 7%;
	}
	.recruit_interview .recruit_interview01 .recruit_interview02{
		width: 100%;
		margin-bottom: 3rem;
	}
	.recruit_interview .recruit_interview01 .recruit_interview03 img{
		width: 100%;
		height: 160px;
	}
	.recruit_interview .recruit_interview01 .recruit_interview03 div{
		width: 100%;
		padding: 1rem 2rem;
	}
	.recruit_interview .recruit_interview04{
		background-color: #C9813D;
		text-align: center;
		color: #fff;
		padding: 1rem 0.2rem;
	}
}

.recruit_oubo{
	background: url(images/recruit/aboutback.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 10%;
}
.recruit_oubo .ttl_b_r{
	text-align: center;
}/* -------------------------------------------
   共通スタイル（PC・スマホ両方で適用されるデザイン）
------------------------------------------- */
/* ラッパー */
.recruit-table-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* テーブル本体 */
.recruit-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 1.6;
    text-align: center;
}

/* セル共通のスタイルと枠線 */
.recruit-table th,
.recruit-table td {
    border: 1px solid #8C8C8C;
    padding: 1.5rem 15px;
    vertical-align: middle;
}

/* --- 背景色の設定 --- */
.recruit-table th {
    background-color: #150E08;
    font-weight: normal;
}
.recruit-table tbody tr th {
    background-color: #281D13;
}
.recruit-table td {
    background-color: #272727;
}

/* --- セル内の文字装飾 --- */
.recruit-table span.small-text {
    display: block;
    font-size: 1.6rem;
    color: #fff;
    margin-top: 5px;
    line-height: 1.4;
}
.recruit-table th span {
    font-size: 0.85em;
}

/* --- 枠線の調整（外側の線を消す等） --- */
.recruit-table tbody tr th { border-left: 0; }
.recruit-table thead tr th { border-top: 0; }
.recruit-table thead tr th:first-child { border-left: 0; }
.recruit-table thead tr th:last-child { border-right: 0; }
.recruit-table tbody tr td:last-child { border-right: 0; }
.recruit-table tbody tr:last-child th,
.recruit-table tbody tr:last-child td { border-bottom: 0; }

/* その他 */
p.oubo_last {
    margin-top: 2rem;
    text-align: center;
}


/* -------------------------------------------
   スマホ専用スタイル (767px以下)
   ※PCと同じ色や設定は省き、レイアウトの「動き・幅」だけを記述
------------------------------------------- */
@media screen and (max-width: 767px) {
    
    .recruit_oubo {
        padding: 20% 7%;
    }
    .recruit_oubo .ttl_b_r{
		margin-bottom: 3.5rem;
	}
    .recruit-table-wrapper {
        display: block !important;
    }

    /* テーブルを1000pxでガッチリ固定し、縦積みを解除 */
    .recruit-table {
        width: 1000px !important;
        max-width: none !important;
        table-layout: fixed !important;
        display: table !important;
    }

    /* テーマのブロック化（縦並び）を強制解除 */
    .recruit-table thead { display: table-header-group !important; }
    .recruit-table tbody { display: table-row-group !important; }
    .recruit-table tr    { display: table-row !important; }

    /* セルの幅と改行ルールを固定 */
    .recruit-table th,
    .recruit-table td {
        display: table-cell !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        width: 40px !important;
		padding: .8rem 10px;
    }
    /* 1列目（項目名）だけ幅を狭く上書き */
    .recruit-table th:first-child,
    .recruit-table td:first-child {
        width: 40px !important;
    }

    /* スマホの時だけ補足文字を少し暗くする場合は残す（不要なら削除OK） */
    .recruit-table span.small-text {
        color: #cccccc;
    }
	/* その他 */
	p.oubo_last {
		margin-top: 1rem;
		font-size: 1.4rem;
		text-align: left;
	}
	
}


.recruit_page .enkaku{
	margin: 5% 0 10% 10%;
}
.recruit_page .enkaku .ttl_b_r{
	text-align: center;
	margin-bottom: 7rem;
	margin-right: 10%;
}
.recruit_page .enkaku dl{
}
.recruit_page .enkaku dl dt{
	width: 30%;
	padding: 2rem 2rem 2rem 3rem;
	background-color: #C9813D;
	border-bottom: 1px solid #8C8C8C;
	align-items: flex-start;
	align-content: flex-start;
}
.recruit_page .enkaku .flex_wrap dl{
	width: 55%;
}
.recruit_page .enkaku .flex_wrap .cominfo_img{
	width: 37%;
}
@media screen and (max-width: 767px) {
	.recruit_page{
	}
	.recruit_page .enkaku{
		margin: 5% 7% 10%;
	}
	.recruit_page .enkaku .ttl_b_r{
		text-align: center;
		margin-bottom: 4rem;
		margin-right: 0%;
		margin-top: 10%;
	}
	.recruit_page .enkaku dl dt{
		width: 100%;
		padding: 1rem 2rem 1rem 1rem;
		border-bottom: 0px solid #8C8C8C;
	}
	.recruit_page .enkaku .flex_wrap dl{
		width: 100%;
	}
	.recruit_page .enkaku .flex_wrap .cominfo_img{
		width: 100%;
	}
	.recruit_page .enkaku .flex_wrap dl{
		border-top: 0px;
	}
	.recruit_page .enkaku .flex_wrap .cominfo_img{
		width: 100%;
		gap: 5%;
		margin-right: 0;
	}
.enkaku .flex_wrap .cominfo_img img{
	width: 47.5%;
	object-fit: contain;
	margin: 0;
}
}

.recruit_lastmes{
	background: url(images/recruit/RI_07932.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
	padding: 5% 10% 5% 35%;
	margin-top: 17%;
}
.recruit_lastmes .concept-mask{
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 0;
}
.recruit_lastmes .ttl_b_r,
.recruit_lastmes p{
	position: relative;
	z-index: 1;
}
.recruit_lastmes .lastmesimg{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 30%;
	height: auto;
	object-fit: contain;
	z-index: 1;
}
.lastmes_orange{
	width: 100%;
	height: 1.5rem;
	background-color: #C9813D;
}
.recruit_lastmes .lastmesimg2{
	position: absolute;
	right: 10px;
	bottom: 0;
	width: 27rem;
	z-index: 1;
}
@media screen and (max-width: 767px) {
	.recruit_lastmes{
		padding: 10% 7% 20% 7%;
		margin-top: 30%;
	}
	.recruit_lastmes .ttl_b_r {
		margin-left: 35%;
	}
	.recruit_lastmes .ttl_b_r h2{
		margin-bottom: 3rem;
		font-size: 2.5rem;
		line-height: 4rem;
	}
	.recruit_lastmes .lastmesimg{
		left: -5%;
		top: -20%;
		width: 42%;
	}
	.recruit_lastmes .lastmesimg2{
		width: 20rem;
	}
	.lastmes_orange{
		height: 1rem;
	}
}



.recruit_entry{
	margin: 10% 10% 0;
}
.recruit_entry .ttl_b_r{
	text-align: center;
}
.recruit_entry .entrytext{
	text-align: center;
	margin: 6rem auto 4rem;
}
.recruit_entry .ttl_b_r h2{
	font-family: "Antonio", sans-serif;
	color: #C9813D;
	font-size: 8rem;
}
/* Contact Form 7 のファイルアップロードボタンのスタイル変更 */

/* 1. すべてのブラウザ（Chrome, Safari, Firefox）用の共通スタイル */
.wpcf7-form-control-wrap input[type="file"]::file-selector-button {
    background-color: #A0522D; /* 背景色：シエナブラウン（image_2.pngを参考） */
    color: #ffffff; /* 文字色：白 */
    border: none; /* ボーダーなし */
    padding: 10px 20px; /* パディング（上下 左右） */
    font-size: 1rem; /* フォントサイズ */
    border-radius: 0; /* 角を丸くしない（ソリッドなデザインに合わせる） */
    cursor: pointer; /* マウスオーバー時に指マークにする */
    transition: background-color 0.3s; /* ホバー時のアニメーション */
}

/* 2. Webkit系（Chrome, Safari）用の古い擬似要素（互換性のため） */
.wpcf7-form-control-wrap input[type="file"]::-webkit-file-upload-button {
    background-color: #515151;
    color: #ffffff;
    border: none;
    padding: 10px 30px;
    font-size: 1.4rem;
	margin-right: 3rem;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s;
}
/* 3. ホバー時のスタイル */
.wpcf7-form-control-wrap input[type="file"]::file-selector-button:hover {
    background-color: #C9813D; /* ホバー時は少し明るい茶色 */
}

.wpcf7-form-control-wrap input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #C9813D;
}
@media screen and (max-width: 767px) {
	.recruit_entry{
		margin: 20% 7% 0;
	}
	.recruit_entry .ttl_b_r h2{
		font-size: 4rem;
	}
	.recruit_entry .entrytext{
		text-align: left;
		margin: 4rem auto 4rem;
	}
	.wpcf7-form-control-wrap input[type="file"]::-webkit-file-upload-button {
		margin-right: 1rem;
	}
}

/* 
===================================================================
// 施工実績
// ===================================================================*/
.interview_page #mainttl{
	background: url(images/interview/head.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media screen and (max-width: 767px) {
	.interview_page #mainttl{
		background: url(images/interview/headsp.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}


/* 
===================================================================
// インタビュー
// ===================================================================*/
/* -------------------------------------------
   全体のレイアウト
------------------------------------------- */
.interview_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* stickyを効かせるために必須 */
    margin: 10% 3%  1%;
    color: #fff;
}

/* -------------------------------------------
   左側：サイドバーナビゲーション
------------------------------------------- */
.interview_sidebar {
    width: 15%; /* 左側の幅 */
    position: sticky; /* スクロールしても追従させる */
    top: 100px; /* 画面上部から100pxの位置で止まる（ヘッダーの高さに合わせて調整してください） */
	border-right: 1px solid #fff;
	height: 100rem;
}

.interview_nav_list {
    list-style: none;
    padding: 3rem 0 0;
    margin: 0;
}

.interview_nav_list li {
    margin-bottom: 30px;
}

/* リンクの基本スタイル */
.interview_nav_link {
    display: block;
    color: #fff; /* 非アクティブ時はグレー */
    text-decoration: none;
    font-size: 1.6rem;
    font-weight: bold;
    position: relative;
    padding-left: 3rem; /* 矢印のスペースを空ける */
    transition: color 0.3s ease;
	font-weight: 300;
}
.interview_nav_link span.nav_name {
    font-size: 2.4rem;
	font-weight: 600;
}

/* --- 現在地（アクティブ）の時のスタイル --- */
.interview_nav_link.active {
}

/* アクティブな時に左側に画像アイコンを表示する */
.interview_nav_link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4rem;
    
    /* ↓ここから下が画像アイコン用の指定に変更されています */
    width: 20px; /* アイコン画像の横幅（適宜変更してください） */
    height: 20px; /* アイコン画像の縦幅（適宜変更してください） */
    background-image: url('images/interview/yajirushi.png'); /* 画像のURL */
    background-size: contain; /* 画像がはみ出さないように収める */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-position: center; /* 画像を中央に配置 */
}

/* -------------------------------------------
   右側：メインコンテンツ
------------------------------------------- */
.interview_main_content {
    width: 80%; /* 右側の幅 */
	margin-right: 1%;
}

/* 各セクション */
.interview_section {
	/* PCヘッダーの高さ(約126px) + 余裕(30px) = 156px */
    scroll-margin-top: 256px; 
    margin-bottom: 100px;
    
    /* 【重要】ズレの最大の原因なので、以下の2行を必ず削除またはコメントアウトしてください */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* スマホ対応 */
@media screen and (max-width: 767px) {
	.interview_section {
        /* スマホヘッダーの高さ(55px) + 余裕(20px) = 75px */
        scroll-margin-top: 75px;
        
        /* スマホでも余計な余白をリセット */
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
	.interview_sidebar {
		border-right: 0px;
	}
    .interview_wrapper {
        flex-direction: column;
		margin: 10% 0  1%;
    }
    .interview_sidebar {
        width: 100%;
        position: static; /* スマホでは追従させない */
        margin-bottom: 60px;
		height: auto;
		flex-wrap: nowrap;
    }
    .interview_main_content {
        width: 100%;
    }
	.interview_nav_list{
		display: flex;
		gap: 5%;
		padding: 0 0;
		margin: auto 7%;
		flex-wrap: wrap;
	}
	.interview_nav_list li {
		width: 47.5%;
		border: 1px solid #fff;
	}
	.interview_nav_link{
		position: relative;
	}
	.interview_nav_link.active::before {
		display: none;
	}
	.interview_nav_link {
		padding: 1.5rem 2rem;
	}
	.interview_nav_link img{
		width: 2rem;
		position: absolute;
		bottom: 2rem;
		right: 1rem;
	}
}

.interview_section .person_felx{
	gap: 0;
}
.interview_section .person_felx .person_txt{
	width: 50%;
}
.interview_section .person_felx .person_img{
	width: 50%;
}
.interview_section .person_felx .person_img img{
	height: 100%;
	object-fit: cover;
}
.interview_section .person_felx .person_txt .person_n{
	font-size: 1.8rem;
	margin-left: 4rem;
}
.interview_section .person_felx .person_txt h2{
	font-size: 6rem;
	font-family: "Antonio", sans-serif;
	margin-bottom: 2rem;
	margin-left: 4rem;
}
.interview_section .person_felx .person_txt h2 span{
	font-size: 2rem;
	font-weight: 400;
	margin-left: 2rem;
}
.person_txt2{
	background-color: #515151;
	padding: 2rem 4rem;
	margin-bottom: 8rem;
}
.interview_section .person_felx .person_txt2 .flex_wrap{
	justify-content: flex-start;
	gap: 1rem;
}
.interview_section .person_felx .person_txt2 .flex_wrap h3{
	width: 20%;
	font-weight: 400;
}
.interview_section .person_felx .person_txt2 .flex_wrap img{
	width: 2rem;
	object-fit: contain;
	height: auto;
}
.interview_section .person_felx .person_txt2 .flex_wrap p{
	width: 75%;
}
@media screen and (max-width: 767px) {
	.interview_section .person_felx .person_txt{
		width: 100%;
		order: 2;
	}
	.interview_section .person_felx .person_img{
		width: 100%;
		order: 1;
	}
	.person_txt2{
		padding: 2rem 2rem;
		margin-bottom: 0;
		margin-left: 7%;
	}
	.interview_section .person_felx .person_txt2 .flex_wrap{
		font-size: 1.3rem;
		gap: 0.6rem;
	}
	.interview_section .person_felx .person_txt2 .flex_wrap h3{
		width: 18%;
		font-weight: 400;
	}
	.interview_section .person_felx .person_txt2 .flex_wrap img{
		width: 1.5rem;
		object-fit: contain;
		height: auto;
	}
	.interview_section .person_felx .person_txt2 .flex_wrap p{
		width: auto;
	}
	.person_n.pc.fadein{
		display: none!important;
	}
	.person_nsp{
		font-size: 1.6rem;
		width: 100%;
		margin: auto 7%;
	}
	.person_h2sp{
		font-size: 4rem;
		margin: 0.5rem 7% 2rem;
		font-family: "Antonio", sans-serif;
	}
	.person_h2sp span{
		font-size: 1.6rem;
		margin-left: 1rem;
	}
}

.person_012{
	margin: 7% auto;
}
.personh2{
	justify-content: flex-start;
	align-self: center;
	align-items: center;
	align-content: center;
}
.personh2 h2{
	font-size: 2.6rem;
	font-weight: 500;
	margin-bottom: 2rem;
	margin-top: 2.5rem;
}
.personh2 p{
	font-size: 4rem;
	color: #C9813D;
	font-family: "Antonio", sans-serif;
	margin-right: 1.5rem;
}
@media screen and (max-width: 767px) {
	.person_012{
		margin: 7% 7%;
	}
	.personh2 h2{
		font-size: 2.2rem;
	}
	.personh2{
		flex-wrap: nowrap;
	}
}

.person_013{
	gap: 5%;
	margin-top: 10%;
}
.person_013 .person_013_img{
	width: 50%;
}
.person_013 .person_013_txt{
	width: 45%;
}
.person_013_txt h2{
	font-size: 2.6rem;
	font-weight: 500;
	align-self: center;
	align-items: center;
	align-content: center;
	margin-bottom: 2rem;
}
.person_013_txt h2 span{
	font-size: 4rem;
	color: #C9813D;
	font-family: "Antonio", sans-serif;
	margin-right: 2rem;
	line-height: 4rem;
}
@media screen and (max-width: 767px) {
	.person_013{
		margin: 15% 7%;
	}
	.person_013 .person_013_img{
		width: 100%;
	}
	.person_013 .person_013_txt{
		width: 100%;
		margin-top: 7%;
	}
	.person_013_txt h2{
		font-size: 2.2rem;
	}
}

.person_014{
	gap: 0;
	margin-top: 10%;
}
.person_014_txt{
	width: 55%;
}
.person_014_img{
	width: 45%;
}
.person_014_img img{
	height: 100%;
	object-fit: cover;
}
.person_014_txt .personh2{
	margin-top: 8rem;
	gap: 3rem;
	margin-left: 3rem;
	margin-bottom: 0.5rem;
	display: flex;
}
.person_014_txt .personh2 p{
	font-size: 6.4rem;
	color: #fff;
	margin-bottom: -2.5rem;
	line-height: 4rem;
	display: block;
}
.person_014_txt .personh2 h2{
	font-size: 2rem;
	margin-bottom: 0;
	line-height: 4rem;
	margin-top: 0;
	display: block;
}
.person_014_txt .personh2.sp{
	display: none;
}
.person_014_txt .person_orange{
	background-color: #C9813D;
	padding: 4rem 3rem;
	color: #fff;
	margin-bottom: 6rem;
}
@media screen and (max-width: 767px) {
	.person_014_txt{
		width: 100%;
		order: 1;
	}
	.person_014_img{
		width:86%;
		margin: -35% 7% 0;
		order: 2;
	}
	.person_014_img img{
		height: 40rem;
		object-fit: cover;
	}
	.person_014_txt .personh2{
		margin-top: -10rem;
		margin-left: 0;
		margin-bottom: 2rem;
		flex-wrap: wrap;
	}
	.person_014_txt .personh2.pc{
		display: none;
	}
	.person_014_txt .personh2 p{
		width: 100%;
		font-size: 4.8rem;
		line-height: 5rem;
		display: block;
		margin-bottom: 1rem;
	}
	.person_014_txt .personh2 h2{
		width: 100%;
		font-size: 2rem;
		margin-bottom: 0;
		line-height: 2rem;
		margin-top: 0;
	}
	.person_014_txt .person_orange{
		padding: 20% 3rem 30%;
		margin-bottom: 6rem;
	}
	.person_014_txt .personh2.sp{
		display: block;
	}
}

/* 
===================================================================
// 施工実績
// ===================================================================*/
.news_page #mainttl{
	background: url(images/works/head.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media screen and (max-width: 767px) {
	.news_page #mainttl{
		background: url(images/works/headsp.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}
.news_page .workstoptxt{
	margin: 3% 10% 5%;
}
@media screen and (max-width: 767px) {
	.news_page .workstoptxt{
		margin: 10% 7% 15%;
	}
}

/* 全体の2カラムレイアウト */
.portfolio-container {
    display: flex;
	align-items: flex-start; /* ←これを追加（高さをコンテンツ分だけにして、上揃えにする）
    gap: 10%; /* 左右の余白 */
    margin: 7% 10%;
	gap: 10%;
}

.portfolio-slider-area {
    width: 30%; /* 左側の幅 */
}

.portfolio-detail-area {
    width: 60%; /* 右側の幅 */
	border: 1px solid #fff;
	display: inline-block;
	padding: 5rem;
}

/* スライダー画像の調整 */
.slider-main {
    margin-bottom: 10px;
}
.slider-main img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    aspect-ratio: 4 / 3; /* 画像の比率を揃える場合 */
}

.slider-thumb{
	position: relative;
}
.slider-thumb .slick-prev,
.slider-thumb .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 30px;
    height: 100%; /* 高さをスライダーに合わせる */
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0; /* 「Previous」「Next」の文字を見えなくする */
    color: transparent;
    outline: none;
}

/* ボタンの配置場所 */
.slider-thumb .slick-prev {
    left: 0;
	top: -35vh;
}
.slider-thumb .slick-next {
    right: 0;
	top: -35vh;
}
@media screen and (max-width: 768px) {
	/* 全体の2カラムレイアウト */
	.portfolio-container {
		margin: 7% 7%;
	}	
	.slider-main img {
		height: 50vh;
	}
	/* ボタンの配置場所 */
	.slider-thumb .slick-prev {
		left: 0;
		top: -25vh;
	}
	.slider-thumb .slick-next {
		right: 0;
		top: -25vh;
	}
}

/* CSSで「く」の字の矢印を作る */
.slider-thumb .slick-prev::before,
.slider-thumb .slick-next::before {
    content: "";
    display: block;
    width: 12px;  /* 矢印の大きさ */
    height: 12px; /* 矢印の大きさ */
    border-top: 2px solid #fff;   /* 矢印の線の太さと色 */
    border-right: 2px solid #fff; /* 矢印の線の太さと色 */
    position: absolute;
    top: 50%;
    left: 50%;
}

/* 左矢印（向きを回転） */
.slider-thumb .slick-prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

/* 右矢印（向きを回転） */
.slider-thumb .slick-next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

/* ホバーした時に少し色を変える */
.slider-thumb .slick-prev:hover::before,
.slider-thumb .slick-next:hover::before {
    border-color: #999;
}
.slider-thumb li {
    cursor: pointer; /* クリックできることを示す */
    margin: 0 5px; /* サムネイル間の隙間 */
}
.slider-thumb img {
    width: 100%;
    height: auto;
    opacity: 0.5; /* 非アクティブなものは少し薄くする */
    transition: opacity 0.3s;
	padding-right: 1rem;
}

/* 選択されているサムネイルをくっきりさせる */
.slider-thumb .slick-current img {
    opacity: 1;
}

/* 右側のテキスト装飾 */
.portfolio-date {
    font-size: 1.6rem;
    margin-bottom: 10px;
}
.portfolio-title {
    font-size: 2.6rem;
	padding-bottom: 1.5rem;
	margin-bottom: 2rem;
	border-bottom: 1px solid #fff;
    font-weight: 600;
}
.portfolio-desc {
    line-height: 1.8;
}

/* スマホ対応 (768px以下の場合は1カラムにする) */
@media screen and (max-width: 768px) {
    .portfolio-container {
        flex-direction: column;
        gap: 20px;
    }
    .portfolio-slider-area{
        width: 86%;
		margin: 7% 7% auto;
    }
    .portfolio-detail-area {
        width: 100%;
		margin-top: 2rem;
		padding: 3rem 2rem;
    }
	.portfolio-title {
		font-size: 2.2rem;
	}
}
/* -------------------------------------------
   前後の記事ナビゲーション
------------------------------------------- */
.portfolio-post-nav {
    display: flex;
    justify-content: space-between; /* 左右に振り分ける */
    max-width: 1000px;
    margin: 60px auto 40px; /* スライダーとの間（上）に60pxの余白 */
    padding-top: 30px;
}

/* ボタンの基本デザイン */
.portfolio-post-nav a {
    display: inline-block;
	padding: 1.5rem 3rem;
    color: #fff; /* 文字色（サイトに合わせて調整してください） */
    font-size: 0.9em;
    text-decoration: none;
    background-color: #515151;
    transition: all 0.3s ease;
}

/* マウスオーバー時の動き */
.portfolio-post-nav a:hover {
	opacity: 0.8;
}

/* 「前の記事」がない（一番古い記事）時のための調整 */
.nav-next {
    margin-left: auto; /* 次の記事だけでも右寄せをキープする */
}

.btn_area.arc{
	justify-content: center!important;
	width: 100%;
	text-align: center;
}
.btn_area.arc a{
	font-size: ;
}
@media screen and (max-width: 768px) {
	.portfolio-post-nav{
		margin: auto 7% 4rem;
	}
	.btn_area.arc{
		margin-bottom: 10rem;
	}
}



/* ===================================================================
// アーカイブ
// ===================================================================*/
#content .archive_list.news_archive{
 margin: auto 10%;
}
#content .archive_list .flex_wrap{
	gap: 3%;
	padding: 0;
	margin: 0;
}
#content .archive_list .flex_wrap a{
	position: relative;
	width: calc(85% / 4);
}
#content .archive_list h3{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(20, 20, 20, 0.75);
	padding: 2rem 2rem 2rem 3rem;
	color: #fff;
	font-weight: 700;
}
#content .archive_list.news_archive h3{
	position: relative;
	color: #fff;
	padding: 0;
	font-size: 1.6rem;
	font-weight: 500;
	background: #515151;
	padding-top: 0.7rem;
	line-height: 2.2rem;
}
#content .archive_list.news_archive p.date{
	color: #fff;
	font-size: 1.6rem;
	border-bottom: 1px solid #fff;
	padding-bottom: 0.5rem;
}
#content .archive_list.news_archive a{
	height: auto;
	padding: 0;
	margin: 0;
	margin-bottom: 5rem;
	z-index: 0;
}
#content .archive_list.news_archive a img{width: 100%;           /* 親要素の幅いっぱいに広げる */
  height: auto;          /* 高さを自動調整（これだけでも比率は維持されます） */
  aspect-ratio: 5 / 7;  /* 任意の比率を指定（例：16:9） */
  object-fit: cover;     /* 比率が合わない場合に画像を切り抜いてフィットさせる */
}
#content .archive_list.news_archive a .information_blog{
	background: #515151;
	padding: 0.7rem 1.5rem 1rem;
}
#content .archive_list .flex_wrap{
	flex-wrap: wrap;
}
#content .archive_list.news_archive a.previouspostslink{
	margin-right: 1.5rem;
}

@media screen and (max-width: 1100px) {
	#content .archive_list .flex_wrap a{
}
}
@media screen and (max-width: 767px) {
	#content .archive_list.news_archive{
		margin: auto 15%;
	   }
	#content .archive_list.news_archive a {
		margin-left: 1.5rem;
	}
	#content .archive_list .flex_wrap a{
	position: relative;
	width: 100%;
		height: auto;
}
	#content .archive_list .flex_wrap a img{
	width: 100%;
		height: 60vh;
}
	.archive_list .arc_btn{
		margin-top: 5%;
	}
	#content .archive_list.news_archive .flex_wrap a img{
	height: 50vh;
	width: 100%;
	object-fit: cover;
}
	#content .archive_list.news_archive .flex_wrap a{
		text-align: left;
	}
	#content .archive_list .flex_wrap a h3{
		font-size: 2rem;
	}
#content .archive_list.news_archive a.previouspostslink{
	margin-right: 0;
}
}

@media screen and (max-width: 450px) {
	#content .archive_list .flex_wrap a{
	position: relative;
	width: 100%;
		height: auto;
	margin-bottom: 15%;
}
	#content .archive_list .flex_wrap a img{
	height: 40vh!important;
	width: auto;
}
}
/* ページネーション　*/
.pagenavi{
	margin-top: 3%;
}
.pagenavi .wp-pagenavi {
  text-align: center;
  padding: 1rem 1.8rem;
  font-size: 1.6rem;
}
.pagenavi .wp-pagenavi a, .pagenavi .wp-pagenavi span {
  border: none;
  border: 1px solid #515151;
  color: #fff;
  padding: 1rem 1.8rem!important;
  background-color: #515151;
  margin: auto 1.5rem;
}
.pagenavi .wp-pagenavi a.nextpostslink{
	margin-left: 1.5rem!important;
}
.pagenavi .wp-pagenavi .pages {
  border: 0px solid #515151;
  background-color: #171717;
  margin: 0;
}
.pagenavi .wp-pagenavi span.current {
  border: 1px solid #fff;
  color: #515151;
  background-color: #fff;
}

.btn_area.space{
	justify-content: center;
	column-gap: 5%;
	margin: 5% 10%;
}
.btn_area.space a{
	border: 1px solid #a9fc03;
	background: #a9fc03;
	color:var(--bodyback-color);
	padding: 1rem 4rem;
	border-radius: 30px;
}
.btn_area.space a:hover{
	background: #fff;
	color: #290603;
	opacity: 1;
}
.arc_btn {
	text-align: center;
	margin-bottom: 10%;
	justify-content: center;
}
.arc_btn .back_single{
	border: 1px solid  #a9fc03;
	padding: 2rem 6rem;
	border-radius: 30px;
	color: #290603;
}
.arc_btn .back_single:hover{
	background: #a9fc03;
	color: var(--bodyback-color);
	opacity: 1;
}
@media screen and (max-width: 767px) {
	.pagenavi .wp-pagenavi {
	  text-align: center;
	  padding: 1rem 0rem;
	  font-size: 1.6rem;
	}
	.pagenavi .wp-pagenavi .pages{
		padding: 0!important;
	}
	.btn_area.space{
	margin-bottom: 10%;
}
.pagenavi{
	margin-bottom: 10rem;
	margin-top: 5%;
}
.pagenavi .wp-pagenavi a, .pagenavi .wp-pagenavi span {
	border: none;
	border: 1px solid #515151;
	color: #fff;
	padding: 0.7rem 1.5rem!important;
	display: inline-block;
  margin: auto 0 0 1.5rem;
  }
  .pagenavi .wp-pagenavi a{
	margin-bottom: 2rem!important;
  }
}


.news_single h2{
	font-size: 3rem;
	margin: 1% auto 2%;
}
.news_single figure{
	margin-bottom: 5%;
}
.news_single .news_content p{
	margin-bottom: 2%;
}
.news_single .news_content h2{
	background: var(--thema-color);
	color:  var(--bodyback-color);
	padding: 1% 2%;
}
.news_single .news_content h3{
	border-bottom: 4px solid var(--thema-color);
	border-top: 4px solid var(--thema-color);
	padding: 1% 2%;
	margin-top: 3%;
	font-size: 2.5rem;
	margin-bottom: 2%;
}
.news_single .news_content h4{
	border-left: 8px solid var(--thema-color);
	padding: 1% 2%;
	margin-top: 3%;
	font-size: 1.8rem;
	margin-bottom: 2%;
}
.news_single .news_content img{
	width: 80%;
	margin: auto 10%;
}


/* ===================================================================
// お問い合わせページ
// ===================================================================*/
.contact_page #mainttl{
	background: url(images/contact/head.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media screen and (max-width: 767px) {
	.contact_page #mainttl{
		background: url(images/contact/headsp.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}
.contact_page.entry_page #mainttl{
	margin-bottom: 10%;
}


/* ------------------- 電話 ------------ */
.contact_bar{
	height: 8vh;
	margin-bottom: 0%;
}
#content.contact_page .form{
	margin-top: 0;
}
#content.contact_page .form .contact_form{
	margin: 5% 10% 0;
}
#content.contact_page .form .form_message{
	margin: 5% 10% 0;
	width: 80%;
	text-align: center;
}
.contact_form table {
  width: 100%;
  margin: 80px auto;
	font-weight: 200;
}
.contact_form .form_txt{
	color: #fff;
	font-size: 1.46em;
	text-align: left;
	margin-bottom: 1%;
	margin-left: 10%;
	margin-right: 10%;
}
.contact_form .c{
	margin-bottom: 3%;
	color: var(--bodyback-color);
}
.contact_form .form_txt a{
	font-weight: 700;
}
.contact_form table tr {
}

.contact_form table tr:first-child {
}
.contact_form table{
}
.contact_form table th {
  font-weight: bold;
  text-align: left;
  width: 30%;
	padding:2.5rem 2rem;
	align-items: flex-start;
	align-content: flex-start;
}
@media screen and (max-width: 767px) {
	#content.contact_page .form .form_message{
		margin: 0% 7% 0;
		width: 80%;
		text-align: left;
	}
	.contact_form table th {
	  width: 100%;
		padding:1rem 0;
	}
}

.contact_form table th span {
  text-align: center;
  padding: .1em .4em;
  margin-left: 1em;
  font-weight: normal;
  border-radius: 4px;
  font-size: 1.2rem;
}
.contact_form table th span.red {
  color: #fff;
}
.contact_form table th span.block {
  display: block;
  margin-left: 0;
  padding: 0;
  font-size: 1.1rem;
  text-align: left;
}

.contact_form table.contact_tbl {
  margin: 0 auto 2rem;
}
.contact_form table td {
  text-align: left;
	width: 70%;
}
.contact_form table td input{
	width: 97%;
	height: 8vh;
	background: none;
	border: 0px;
	background-color: #515151;
	align-items: center;
	align-content: center;
	color: #fff;
	padding-left: 1.5rem!important;
	padding-right: 1.5rem!important;
}
.contact_form table td textarea{
	width: 97%;
	height: 20vh;
	background: none;
	border: 0px;
	background-color: #515151;
	margin-top: 1.5rem;
	color: #fff;
	padding-left: 1.5rem!important;
	padding-right: 1.5rem!important;
	padding-top: 1.5rem!important;
}
.contact_form table td input.wpcf7-form-control.wpcf7-file.wpcf7-validates-as-required{
	background-color: #171717;
}
.contact_form .sub-btn{
	padding: 1.5rem 4rem;
	text-align: center;
	width: 20%;
	margin: auto 40%;
	border: 1px solid #fff;
	color: #fff;
	background-color: #171717;
}
.contact_form .sub-btn:hover{
	 background-color: #fff;
  color: #290603;
	border: 1px solid #fff;
}
.recruit_entry .sub-btn{
	background-color: #C9813D;
	border: 1px solid #C9813D;
}
.wpcf7-form-control.wpcf7-checkbox input{
	height: 2vh;
	width: 2vh;
	margin-right: 1rem;
}
.wpcf7-form-control.wpcf7-checkbox label{
	display: flex;
	align-items: center;
	align-content: center;
	align-self: center;
	line-height: 2rem;
}
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item{
	width: 20%;
	align-items: center;
	align-content: center;
	align-self: center;
}
.wpcf7-form-control.wpcf7-checkbox label .wpcf7-list-item-label{
	width: 100%;
	display: block;
}
.accept{
	text-align: center;
	margin-top: 3rem;
	margin-bottom: 2rem;
}
.accept a{
	color: #fff;
	border-bottom: 1px solid #fff;
}
@media screen and (max-width: 767px) {
	#content.contact_page .form .contact_form{
		margin: 5% 7% 0;
	}
	#content.contact_page .call_sec .flex_wrap div h3{
	font-size: 2rem;
	margin-bottom: 6%;
		margin-top: 6%;
}
	#content.contact_page .call_sec .flex_wrap div p span{
	font-size: 1.6rem;
}
	#content.contact_page .call_sec .flex_wrap{
	flex-direction: column;
		margin-bottom: 0%;
}
#content.contact_page .call_sec .flex_wrap div:first-child{
	margin-bottom: 10%;
}
	#content.contact_page .call_sec .flex_wrap div{
	width: 100%;
	margin-bottom: 10%;
}
#content.contact_page .call_sec .ttl_b h2{
	margin-bottom: -2rem;
}
	.contact_form table {
    width: 100%;
    margin: 40px auto;
  }
  .contact_form table th, table td {
    display: block;
    width: 100%;
	  margin: 0;
  }
	.contact_form table td {
  text-align: left;
	width: 100%;
	}
  .contact_form table th {
    width: 100%;
  }
  .contact_form table th span {
	padding: 0;
  }
	.contact_form table td input{
		width: 100%;
		margin: 0 0 2rem 0;
		height: 5vh;
	}
	.contact_form table td textarea{
	width: 100%;
	margin-left: 0%;
}
	.contact_form .sub-btn{
	padding: 1.5rem 4rem;
	text-align: center;
	width: 70%;
	margin: 0 15% 10%;
}
	.contact_form .form_txt{
	margin-bottom: 3%;
	margin-left: 0%;
	margin-right: 0%;
		font-size: 1.2rem;
}
.wpcf7-form-control.wpcf7-checkbox .wpcf7-list-item{
	width: 45%;
}
.wpcf7-form-control.wpcf7-checkbox label{
	line-height: 1.8rem;
	margin: 1rem auto;
}
}


/* ===================================================================
// プライバシーポリシー
// ===================================================================*/
.policy_page #mainttl{
	background: url(images/policy/head.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
@media screen and (max-width: 767px) {
	.policy_page #mainttl{
		background: url(images/policy/headsp.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
}
.policy_page .policysec{
	margin: 5% 10%;
}
.policy_page .policysec h2{
	font-size: 2.6rem;
	font-weight: 500;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid #fff;
}
@media screen and (max-width: 767px) {
	.policy_page .policysec h2{
		font-size: 2rem;
		margin-bottom: 1.5rem;
		padding-bottom: 1.5rem;
	}
	.policy_page .policysec{
		margin: 0 7%;
	}
}


/* --- エラー調査中の強制表示CSS --- */
.fadein {
    opacity: 0;
    transform: scale(1.05);
    display: block;
    transition: opacity 1s ease-out, transform 1s ease-out;
    will-change: opacity, transform;
}
.fadein.scrollin {
    opacity: 1;
    transform: scale(1);
}


/*==================================================
じわっ
===================================*/

.blur{
  animation-name:blurAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
  filter: blur(10px);
  transform: scale(1.02);
  opacity: 0;
  }

  to {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}


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

.box{
  opacity: 0;
}

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

/* -------------------------------------------
   下からふわっとフェードアップ
------------------------------------------- */
/* 1. 待機状態（最初は透明にしておく） */
/* --- 1. 待機状態 --- */
/* --- 差し替え用（style.cssの一番下） --- */
.fade_up_target {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: transform, opacity;
}
.fade_up_target.is_active {
    opacity: 1;
    transform: translateY(0);
}

/* 3. アニメーションの動き（キーフレーム） */
@keyframes fade_up_anime {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}







.header-sec {
  height: 126px;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo {
  width: 107px;
  height: auto;
}

.header-ul {
  list-style: none;
  position: relative;
  display: flex;
  align-items: center;
  align-content: center;
}

.header-ul li {
  font-size: 1.6rem;
  margin-right: 2.5vw;
font-weight: 700;
font-style: normal;
	margin-top: 0.7rem;
	margin-bottom: 0.5rem;
}

.header-ul li a {
  display: block;
  color: #fff;
  font-weight: 400;
  padding-bottom: 3px;
}

.header-ul li a:hover {
	opacity: 0.7;
  transition: 0s;
}

.header-ul li:last-child {
  margin-right: 0px;
}
.header-ul li .headcontact{
	background-color: #C9813D;
	padding: 1.2rem 2rem;
}



/*==================================================
ハンバーガー
===================================*/
.c-hamburger{
	display: none;
}
/*　ハンバーガーボタン　*/
@media screen and (max-width: 1100px) {
.hamburger {
	display : block;
	position: fixed;
	z-index : 3;
	right : 20px;
	top   : 25px;
	width : 42px;
	height: 42px;
	cursor: pointer;
	text-align: center;
	-webkit-transition: 0.5s all;
	-moz-transition   : 0.5s all;
	transition        : 0.5s all;
  }
}
@media screen and (max-width: 767px) {
  .hamburger span {
	display : block;
	position: absolute;
	width   : 30px;
	height  : 2px ;
	left    : 6px;
	background : #555;
  }
  .hamburger span:nth-child(1) {
	top: 10px;
  }
  .hamburger span:nth-child(2) {
	top: 20px;
  }
  .hamburger span:nth-child(3) {
	top: 30px;
  }
  
  /* ナビ開いてる時のボタン */
  .hamburger.active{
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
  }
  .hamburger.active span:nth-child(1) {
	top : 16px;
	left: 6px;
	-webkit-transform: rotate(-45deg);
	-moz-transform   : rotate(-45deg);
	transform        : rotate(-45deg);
  }
  .hamburger.active span:nth-child(2) {
	top: 16px;
	-webkit-transform: rotate(45deg);
	-moz-transform   : rotate(45deg);
	transform        : rotate(45deg);
  }
  .hamburger.active span:nth-child(3) {
	opacity: 0;
  }
  
  nav.globalMenuSp {
	position: fixed;
	z-index : 2;
	top  : 0;
	left : 0;
	color: #fff;
	text-align: left;
	background: #F0486C;
	transform: translateX(100%);
	transition: all 0.6s;
	width: 30%;
	margin-left: 70%;
	height: 100%;
  }
	nav.globalMenuSp {
		position: fixed;
		z-index : 2;
		top  : 0;
		left : 0;
		color: #000;
		text-align: left;
		transform: translateX(100%);
		transition: all 0.6s;
		width: 70%;
		margin-left: 30%;
		height: 100%;
	  }
  }
  @media screen and (max-width: 767px) {
  nav.globalMenuSp ul {
	margin: 0 auto;
	padding: 0;
	width: 100%;
	padding: 2rem auto;
  }
  
  nav.globalMenuSp ul li {
	list-style-type: none;
	padding-left: 2rem;
	width: 94%;
	border-bottom: 1px solid #fff;
	color: #fff;
	margin: auto 3%;
  }
  nav.globalMenuSp ul li.hum_logoli{
	background-color: #fff;
	width: 100%;
	padding: 0;
	margin: 0;
  }
  nav.globalMenuSp ul li:last-child {
	padding-bottom: 0;
	border-bottom: none;
  }
  nav.globalMenuSp ul li:hover{
	background :#fff;
	color: #F0486C;
  }
  
  nav.globalMenuSp ul li a {
	display: block;
	padding: 1rem 0;
	text-decoration :none;
	color: #fff;
	font-family: fot-udmarugo-large-pr6n, sans-serif;
	font-weight: 700;
  }
  nav.globalMenuSp ul li a span{
	font-size: 1.5rem;
	font-family: josefin-sans, sans-serif;
	font-weight: 300;
  }
  nav.globalMenuSp ul li a:hover{
	color: #F0486C;
	opacity: 1;
  }
  nav.globalMenuSp ul li.hum_res{
	background-color: #fff;
	border-radius: 30px;
	color: #F0486C;
	text-align: center;
	margin-top: 5%;
	padding: 0;
  }
  nav.globalMenuSp ul li.hum_res a{
	color: #F0486C;
	font-size: 1.5rem;
  }
  nav.globalMenuSp ul li.hum_res:hover{
	background-color: #F0486C;
	border: 1px solid #fff;
  }
  nav.globalMenuSp ul li.hum_res a:hover{
	color: #fff;
  }
  nav.globalMenuSp ul li.head_tel {
	border-bottom: 0px;
  }
  nav.globalMenuSp ul li.head_tel a{
	color: #fff;
	font-size: 2.6rem;
	font-family: josefin-sans, sans-serif;
	font-weight: 600;
  }
  nav.globalMenuSp ul li.head_tel a img{
	width: 30px;
	height: 30px;
	margin-right: 7px;
  }
  nav.globalMenuSp ul li.head_tel a:hover{
	color: #F0486C;
  }
	nav.globalMenuSp ul li a{
		font-size: 1.7rem;
	}
	nav.globalMenuSp ul li a img.hum_logo{
	  width: 80%;
	  margin: auto 10%;
	}
  }
  .c-drawer{
	display: none;
  }
@media screen and (max-width: 767px) {
  /* このクラスを、jQueryで付与・削除する */
  nav.globalMenuSp.active {
	transform: translateX(0%);
  }
  /* body
--------------------------------*/
  .inner {
    position: relative;
    width: calc(100% - 40px);
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
  }
  .header-sec {
    height: 55px;
    padding: 0 20px;
  }
  .header-logo {
    width: 54px;
    height: auto;
  }
  .header-ul {
    display: none;
  }
  .hamburger {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 100;
	width: 48px;
	height: 48px;
	border: none;
	background: transparent;
	cursor: pointer;
  }
  
  .hamburger__line {
	position: absolute;
	left: 11px;
	width: 26px;
	height: 2px;
	background-color: #333;
	transition: all .4s;
  }
  
  .hamburger__line:nth-of-type(1) {
	top: 14px;
  }
  .hamburger__line:nth-of-type(2) {
	top: 23px;
  }
  .hamburger__line:nth-of-type(3) {
	top: 32px;
  }
  
  /* メニューオープン時 */
  .hamburger.active .hamburger__line:nth-of-type(1) {
	transform: translateY(9px) rotate(-45deg);
  }
  .hamburger.active .hamburger__line:nth-of-type(2) {
	opacity: 0;
  }
  .hamburger.active .hamburger__line:nth-of-type(3) {
	transform: translateY(-9px) rotate(45deg);
  }
  
  .nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	height: 100vh;
	background-color: #fff;
	box-shadow: 2px 0 4px rgba(0,0,0,.1);
	transform: translateX(-100%);
	transition: transform .4s;
	z-index: 90;
  }
  
  .nav.active {
	transform: translateX(0);
  }
  
  .nav__list {
	margin: 0;
	padding: 100px 0 0;
	list-style: none;
  }
  
  .nav__item {
	padding: 0 20px;
  }
  
  .nav__link {
	display: block;
	padding: 15px 0;
	color: #333;
	text-decoration: none;
	border-bottom: 1px solid #eee;
  }
  /* ==================================================
   絶対に干渉しない最強ハンバーガーメニュー
================================================== */
/* ボタン */
.c-hamburger {
    display: none;
    position: fixed;
    z-index: 10001 !important; /* 絶対に一番手前！ */
    right: 20px;
    top: 15px;
    width: 42px;
    height: 42px;
    cursor: pointer;
}
    .c-hamburger { display: block; }
.c-hamburger span {
    position: absolute;
    left: 6px;
    width: 30px;
    height: 2px;
    background-color: #ffffff !important; /* 絶対に見える白 */
    transition: all 0.3s ease-in-out;
}
.c-hamburger span:nth-child(1) { top: 10px; }
.c-hamburger span:nth-child(2) { top: 20px; }
.c-hamburger span:nth-child(3) { top: 30px; }

/* ボタンのアニメーション */
.c-hamburger.is-active span:nth-child(1) { top: 20px; transform: rotate(-45deg); }
.c-hamburger.is-active span:nth-child(2) { opacity: 0; }
.c-hamburger.is-active span:nth-child(3) { top: 20px; transform: rotate(45deg); }

/* ドロワーメニュー本体 */
.c-drawer {
	display: block;
    position: fixed;
    z-index: 10000 !important;
    top: 0;
    right: -120% !important; /* transformを使わず物理的に右へ隠す（干渉対策） */
    width: 80% !important;
    max-width: 320px !important;
    height: 100vh !important;
    background-color: #171717 !important;
    border-left: 1px solid #C9813D !important;
    transition: right 0.4s ease-out !important;
    padding-top: 80px !important;
    overflow-y: auto !important;
    margin: 0 !important;
}
/* クラスがついたら右から出てくる */
.c-drawer.is-active {
    right: 0 !important;
}

/* メニューの中身のデザイン */
.c-drawer ul {
    list-style: none !important;
    padding: 0 10% !important;
    margin: 0 !important;
}
.c-drawer ul li {
    border-bottom: 1px solid #515151 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
.c-drawer ul li a {
    display: block !important;
    padding: 20px 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 1.6rem !important;
    font-weight: normal !important;
    text-align: left !important;
}
.c-drawer ul li a span {
    display: block !important;
    color: #C9813D !important;
    font-size: 1.2rem !important;
    margin-bottom: 5px !important;
}

/* 背景の暗やみ（オーバーレイ） */
.c-overlay {
    position: fixed;
    z-index: 9999 !important;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0,0,0,0.7) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.4s ease-out !important;
}
.c-overlay.is-active {
    opacity: 1 !important;
    visibility: visible !important;
}

}

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



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

.grecaptcha-badge { visibility: hidden; }

/* ファイルアップロード欄の表示崩れ修正 */
.contact_form table td input[type="file"] {
    width: 100% !important;      /* 幅をいっぱいまで広げてテキストを出す */
    height: auto !important;     /* 8vhの固定を解除 */
    background: none !important; /* グレーの背景色を消す */
    padding: 10px 0 !important;  /* 上下に少しだけ余白を持たせる */
    border: none !important;     /* 枠線を消す */
    box-shadow: none !important; /* 影を消す */
}

/* Chrome/Safariなどのブラウザ特有の余白調整 */
.contact_form table td input[type="file"]::-webkit-file-upload-button {
    margin-right: 2rem !important; /* ボタンとテキストの間の距離を確保 */
}