@charset "utf-8";
/* ==========================
  施工事例 アーカイブ
========================== */
.staff {
 background: #F0EEE7;
}
.l_staff_cat {
 width: 1100px;
 margin: 0 auto 35px auto;
 display: flex;
 text-align: left;
}
.l_staff_cat:last-child {
 margin: 0 auto 40px auto;
}
.staff .l_second_main {
 position: relative;
 width: 100%;
 height: 160px;
 overflow: hidden;
 margin-bottom: 90px;
}
.l_staff {
 width: 876px;
}
.sttl_outer {
 width: 225px;
}
.ttl_outer {
 bottom: 0;
 top: inherit;
 transform: none;
}
.ttl {
 color: #172E59;
 line-height: 1;
}
.sttl_outer .sttl::before {
 line-height: 1.2;
 margin-bottom: 6px;
}
.staff #g-nav-main li a {
 color: #172E59;
}
.staff .gnavi__list:last-child a::after {
 background: url("../images/common/link_n.svg") no-repeat center / contain;
}
.staff .openbtn {
 color: #172E59;
}
.staff .openbtn span {
 background-color: #172E59;
}
@media screen and (max-width: 767px) {
 .l_staff_cat {
  width: auto;
  margin: 0 5.3vw 0vw 5.3vw;
  display: block;
 }
 .l_staff_cat:last-child {
  margin: 0 5.3vw 6vw 5.3vw;
 }
 .staff .l_second_main {
  position: relative;
  width: 100%;
  height: 30vw;
  overflow: hidden;
  margin-bottom: 12vw;
 }
 .ttl_outer {
  bottom: 0;
  top: inherit;
  transform: none;
 }
 .ttl {
  color: #172E59;
  line-height: 1;
 }
 .sttl_outer {
  width: auto;
 }
 .sttl_outer .sttl {
  font-size: 3.2vw;
 }
 .sttl_outer .sttl::before {
  font-size: 4.8vw;
  margin-bottom: 6px;
 }
 .staff .openbtn {
  color: #172E59;
 }
 .staff .openbtn span {
  background-color: #172E59;
 }
}
/* ================================
  
================================ */
.l_staff_tbox {
 position: relative;
}
.l_staff_tbox .ttl {
 font-size: 24px;
 padding-bottom: 15px;
 margin-bottom: 40px;
 position: relative;
 letter-spacing: 2px;
}
.l_staff_tbox .ttl::after {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 bottom: 0;
 width: 10px;
 height: 1px;
 background-color: #E28B3C;
}
.l_staff {
 background: #F0EEE7;
 padding: 0 0 84px 0;
}
.l_staff_list {
 margin-bottom: 60px;
 margin: 0 auto;
 box-sizing: border-box;
}
.l_staff_list_box {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}
.l_staff_list_box + .l_staff_list_box {
 margin-top: 125px;
}
.l_staff_list_box_nav {
 width: 308px;
 text-align: left;
 padding-top: 40px;
}
.l_staff_list_box_list {
 width: 876px;
 max-width: 100%;
 margin: 0 auto;
}
.tit_jop_en {
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
 font-variation-settings:
  "wdth"100;
 font-size: 22px;
 margin-bottom: 10px;
 padding: 0;
 line-height: 1;
 letter-spacing: 1px;
 display: block;
}
.tit_jop_jp {
 font-size: 14px;
 margin-bottom: 65px;
 letter-spacing: 1px;
 display: block;
}
.l_staff_splink {
 display: none;
}
.staff-list {
 display: flex;
 gap: var(--gap);
 align-items: flex-start;
 padding: 18px 6px;
 margin: 0;
}
.staff-list {
 display: flex;
 gap: 60px 32px;
 padding: 0px 0;
 width: 876px;
 flex-wrap: wrap;
}
.staff-card {
 width: 195px;
 flex: 0 0 auto; /* shrink を無効にする（縮小させない） */
 text-align: left;
 box-sizing: border-box;
}
/* 画像エリア */
.staff-img {
 width: 100%;
 aspect-ratio: 1/1; /* 正方形にしたい場合。原画像の比に合わせるなら 3/4 等に */
 overflow: hidden;
 border-radius: 2px;
 background: #f4f4f4;
 margin-bottom: 14px;
}
.staff-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
/* テキスト */
.staff-name {
 margin: 0 0 0 0;
 font-size: 16px;
 color: #0b2a5a; /* 濃い青 */
 font-weight: 500;
 letter-spacing: .2px;
 line-height: 1.2;
}
.staff-name-en {
 margin: 0 0 8px;
 font-size: 12px;
 color: #666;
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
 font-style: normal;
 font-variation-settings:
  "wdth"100;
}
.staff-line {
 display: block;
 width: 15px;
 height: 1px;
 background: #E28B3C;
 margin: 12px 0;
 border-radius: 1px;
}
.staff-role {
 margin: 0;
 font-size: 13px;
 color: #636363;
}
@media screen and (max-width: 767px) {
 .l_staff {
  padding: 0 0 11vw 0;
  width: auto;
 }
 .l_staff_list {
  margin-bottom: 4.167vw;
  padding: 0;
 }
 .l_staff_list_box + .l_staff_list_box {
  margin-top: 8.681vw;
 }
 .l_staff_list_box_nav {
  width: 21.389vw;
  padding-top: 2.778vw;
 }
 .l_staff_list_box_list {
  width: auto;
 }
 .staff-list {
  width: auto;
  display: flex;
  gap: 10vw 4vw;
  padding: 0px 0;
 }
 .tit_jop_en {
  font-size: 1.528vw;
  margin-bottom: 0.694vw;
  letter-spacing: 0.069vw;
 }
 .tit_jop_jp {
  font-size: 0.972vw;
  margin-bottom: 4.514vw;
  letter-spacing: 0.069vw;
 }
 .staff-card {
  width: 42.6vw;
  height: auto;
 }
 .cat_support .staff-card {
  width: 27vw;
  height: auto;
 }
	
	.staff-name-en {
 margin: 5px 0 8px 0;
 font-size: 12px;
 color: #666;
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
 font-style: normal;
 font-variation-settings:
  "wdth"100;
		letter-spacing: 0.5px;
}
	
	
	 .cat_support .staff-name-en {
			line-height: 1.2;
  margin: 8px 0 8px 0;
}
}
/* ================================
  下層ページ
================================ */
/* 親要素：背景と中身を重ねるための土台 */
.l_staff_main {
 position: relative;
 width: 100%;
 height: 33.33vw;
 overflow: hidden; /* 背景のぼかしのはみ出しをカット */
 display: flex;
 align-items: center; /* 中身を上下中央に */
}
/* 背景画像：一番下に配置 */
.bg_staff_img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 margin: 0;
 z-index: 0; /* 背面に配置 */
}
.bg_staff_img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 filter: blur(10px);
 transform: scale(1.1); /* ぼかしの縁を消す */
}
/* コンテンツ部分：背景の上に表示 */
.l_staff_main_inner {
 position: relative;
 z-index: 1; /* 背景(z-index:0)より上にくるように設定 */
 display: flex;
 align-items: center;
 padding: 0 auto; /* 左右の余白は適宜調整してください */
 width: 100%;
 width: 76.4vw;
 margin: 0 auto;
}
.staff_img {
 width: 33.33vw;
 height: 33.33vw;
 overflow: hidden; /* 枠からはみ出るのを防ぐ */
}
.staff_img img {
 width: 100%; /* 親要素（staff_img）の幅に合わせる */
 height: 100%; /* 親要素の高さに合わせる */
 object-fit: cover; /* 比率を保ったまま正方形にトリミング */
}
/* テキスト部分（読みやすくするために白文字や影を検討） */
.ttl_name {
 width: 35vw;
 color: #fff;
 margin-left: 15vw;
 display: flex;
 align-items: center;
 justify-content: center;
}
.ttl_jp {
 font-size: 2.29vw;
 letter-spacing: 3px;
 line-height: 1;
 margin-bottom: 20px;
}
.ttl_en {
 font-size: 0.9vw;
 letter-spacing: 1px;
 line-height: 1;
 position: relative;
 text-align: center;
 margin-bottom: 20px;
}
.ttl_en::after {
 content: "";
 position: absolute;
 bottom: -1.389vw;
 left: 50%;
 transform: translateX(-50%);
 width: 1.667vw;
 height: 0.069vw;
 background-color: #fff;
}
.staff_job {
 font-size: 0.97vw;
 padding-top: 1.389vw;
 margin-bottom: 2.778vw;
}
.qualification {
 display: flex;
 gap: 0.694vw 1.042vw;
 flex-wrap: wrap;
 width: 22vw;
}
.qualification li {
 font-size: 0.97vw;
 border: #fff 1px solid;
 padding: 0.556vw 1.042vw;
 border-radius: 2.778vw;
 line-height: 1;
 background-color: rgba(0, 0, 0, 0.2);
}
.l_staff_detail {
 width: 1100px;
 margin: 0 auto;
 padding-top: 100px;
 text-align: left;
}
.staff_ttl {
 font-size: 13px;
 letter-spacing: 0.05em;
 display: flex;
 align-items: center;
 margin-bottom: 20px;
}
.staff_ttl::after {
 content: "";
 flex-grow: 1;
 height: 1px;
 background-color: #172E59;
 margin-left: 15px;
}
.m_staff_sbox {
 margin-bottom: 100px;
}
.m_staff_txt {
 color: #000000;
 font-size: 14px;
 letter-spacing: 1px;
}
.m_staff_q {
 display: flex;
 justify-content: space-between;
}
.m_staff_q_img {
 display: flex;
 justify-content: space-between;
 gap: 48px;
 margin-bottom: 10px;
}
.m_staff_q_img li {
	width: 526px;
}

.m_staff_q_tit {
 font-size: 14px;
 color: #172E59;
 padding-top: 15px;
 margin-bottom: 10px;
 letter-spacing: 1px;
}
.m_staff_a_txt {
 font-size: 14px;
 color: #000000;
 letter-spacing: 1px;
}
.m_staff_sbox {}
.works-list {
 max-width: 1200px; /* 例：サイトのコンテンツ幅に合わせて調整 */
 margin: 0 auto;
 overflow: hidden;
}
.works-items {
 display: flex !important;
 flex-wrap: nowrap !important; /* スライドさせるため解除 */
 gap: 0 !important;
 width: 100%;
}
.works-item {
 width: 100%; /* これを auto または 100% に変更 */
 position: relative;
}
.works-item a {}
.ic_status {
 position: absolute;
 top: 0;
 left: 0;
 width: 58px;
 height: 58px;
}
.works-item figure {
 width: 100%;
 height: auto;
 aspect-ratio: 340 / 227;
}
.works-item img {
 width: 100%;
 height: 100%;
 object-fit: cover; /* 中央トリミング */
 display: block;
}
.item-txt {
 display: flex;
 align-items: center;
 justify-content: flex-start;
 text-align: left;
}
.item-txt h3 {
 width: 290px;
 font-size: 13px;
 font-weight: 400;
 line-height: 1;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 padding-bottom: 1px;
}
.w-num {
 width: 46px;
 font-size: 12px;
 color: #ACACAC;
 margin-right: 10px;
 padding-top: 0.25em;
 padding-bottom: 1px;
}
.works-item.swiper-slide {
 height: auto;
}
.swiper-pagination {
 position: relative;
 margin-top: 30px;
}
.swiper-pagination-bullet {
 width: 8px !important;
 height: 8px !important;
 border: #172E59 1px solid !important;
 background: none !important;
 opacity: 1;
}
.swiper-pagination-bullet-active {
 background: #172E59 !important;
}
.back_link {
 padding-top: 80px;
 text-align: center;
}
@media screen and (max-width: 767px) {
 .l_staff_main {
  position: relative;
  width: auto;
  padding-left: 5.3vw;
  height: 61.3vw;
  overflow: hidden; /* 背景のぼかしのはみ出しをカット */
  display: flex;
  align-items: center; /* 中身を上下中央に */
 }
 /* 背景画像：一番下に配置 */
 .bg_staff_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 0; /* 背面に配置 */
 }
 .bg_staff_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px);
  transform: scale(1.1); /* ぼかしの縁を消す */
 }
 /* コンテンツ部分：背景の上に表示 */
 .l_staff_main_inner {
  position: relative;
  z-index: 1; /* 背景(z-index:0)より上にくるように設定 */
  display: flex;
  align-items: center;
  padding: 0 auto; /* 左右の余白は適宜調整してください */
  width: 94.66vw;
  margin: 0;
 }
 .staff_img {
  width: 61.3vw;
  height: 61.3vw;
  overflow: hidden; /* 枠からはみ出るのを防ぐ */
 }
 .staff_img img {
  width: 100%; /* 親要素（staff_img）の幅に合わせる */
  height: 100%; /* 親要素の高さに合わせる */
  object-fit: cover; /* 比率を保ったまま正方形にトリミング */
 }
 /* テキスト部分（読みやすくするために白文字や影を検討） */
 .ttl_name {
  width: 33vw;
  color: #fff;
  margin-left: 4vw;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
 }
 .ttl_jp {
  font-size: 3.7vw;
  letter-spacing: 3px;
  line-height: 1;
  margin-bottom: 2vw;
 }
 .ttl_en {
  font-size: 2.66vw;
  letter-spacing: 1px;
  line-height: 1;
  position: relative;
  text-align: left;
  margin-bottom: 4vw;
 }
 .ttl_en::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  background-color: none;
 }
 .staff_job {
  font-size: 2.66vw;
  padding-top: 0;
  margin-bottom: 0;
 }
 .qualification {
  display: flex;
  gap: 4vw 4vw;
  flex-wrap: wrap;
  width: 100%;
 }
 .qualification li {
  font-size: 3.2vw;
  border: none;
  padding: 0;
  border-radius: 0;
  line-height: 1;
  background-color: inherit;
  letter-spacing: 1px;
  color: #000;
 }
 .l_staff_detail {
  width: auto;
  margin: 0 5.3vw;
  padding-top: 13vw;
  text-align: left;
 }
 .staff_ttl {
  font-size: 3.46vw;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  margin-bottom: 5vw;
 }
 .staff_ttl::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #172E59;
  margin-left: 2.6vw;
 }
 .m_staff_sbox {
  margin-bottom: 13vw;
 }
 .m_staff_txt {
  color: #000000;
  font-size: 3.2vw;
  letter-spacing: 1px;
  line-height: 2.2;
 }
 .m_staff_q {
  display: block;
 }
 .m_staff_q_img {
  display: block;
  margin-bottom: 0;
 }
	.m_staff_q_img li {
	width: auto;
}
 .m_staff_q_img img {
  margin-bottom: 5.3vw;
 }
 .m_staff_q_img li + li {
  margin-top: 11vw;
 }
 .m_staff_q_tit {
  font-size: 3.2vw;
  color: #172E59;
  padding-top: 0;
  margin-bottom: 5vw;
  position: relative;
  padding-left: 4vw;
 }
 .m_staff_q_tit::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.3vw;
  width: 10px;
  height: 10px;
  border: 1px solid #172E59;
  border-radius: 50%;
  background: transparent;
 }
 .m_staff_a_txt {
  font-size: 3.2vw;
  color: #000000;
  line-height: 2;
 }
 .works-list {
  max-width: 1200px; /* 例：サイトのコンテンツ幅に合わせて調整 */
  margin: 0 auto;
  overflow: hidden;
 }
 .works-items {
  display: flex !important;
  flex-wrap: nowrap !important; /* スライドさせるため解除 */
  gap: 0 !important;
  width: 100%;
 }
 .works-item {
  width: 100%; /* これを auto または 100% に変更 */
  position: relative;
 }
 .works-item figure {
  width: 100%;
  height: auto;
  aspect-ratio: 340 / 227;
 }
 .works-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 中央トリミング */
  display: block;
 }
 .item-txt {
  display: block;
 }
 .item-txt h3 {
  width: 100%;
  font-size: 3.46vw;
  font-weight: 400;
  line-height: 1;
 }
 .w-num {
  font-size: 3.2vw;
  color: #ACACAC;
  margin-right: 10px;
  padding-top: 0.25em;
 }
 .ic_status {
  width: 15.4vw;
  height: 15.4vw;
 }
 .works-item.swiper-slide {
  height: auto;
 }
 .swiper-pagination {
  position: relative;
  margin-top: 8vw;
 }
 .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  border: #172E59 1px solid !important;
  background: none !important;
  opacity: 1;
 }
 .swiper-pagination-bullet-active {
  background: #172E59 !important;
 }
 .back_link {
  padding-top: 8vw;
 }
 .works-item.swiper-slide {
  /* 左右40pxずつ（計80px）とスライド間の余白(20px)を考慮して幅を決定 */
  /* 左右40px見せる＝スライド自体の幅は「100% - 80px」 */
  width: calc(100% - 80px) !important;
 }
 .works-item figure {
  width: 100%;
  aspect-ratio: 1 / 1; /* 正方形 */
  margin-bottom: 1vw;
 }
 /* スライドが端まで見えるようにする */
 .swiper {
  clip-path: inset(0 -100%); /* 画面外までスライドを表示 */
 }
}