@charset "utf-8";
/* ==========================
  施工事例 アーカイブ
========================== */
.faq {
 background: #F0EEE7;
}
.faq .wrapper {
 overflow: inherit;
 overflow-x: clip;
}
.faq .l_second_main {
 position: relative;
 width: 100%;
 height: 160px;
 overflow: hidden;
 margin-bottom: 90px;
}
.ttl_outer {
 bottom: 0;
 top: inherit;
 transform: none;
}
.ttl {
 color: #172E59;
 line-height: 1;
}
.faq #g-nav-main li a {
 color: #172E59;
}
.faq .gnavi__list:last-child a::after {
 background: url("../images/common/link_n.svg") no-repeat center / contain;
}
.faq .openbtn {
 color: #172E59;
}
.faq .openbtn span {
 background-color: #172E59;
}
@media screen and (max-width: 767px) {
 .l_faq {
  background: #F0EEE7;
  padding: 0 5.3vw 15vw 5.3vw;
 }
 .faq .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;
 }
 .faq .openbtn {
  color: #172E59;
 }
 .faq .openbtn span {
  background-color: #172E59;
 }
}
/* ================================
   絞り込みエリア（filter-area）
================================ */
.faq-archive {
 display: flex;
 justify-content: space-between;
 width: 1100px;
 margin: 0 auto 50px auto;
 align-items: flex-start;
}
.filter-area {
 width: 250px;
 margin-bottom: 30px;
 text-align: left;
 position: -webkit-sticky;
 position: sticky;
 top: 106px;
 height: fit-content;
 z-index: 10;
}
.sttl_outer {
 width: 250px;
 margin-bottom: 30px;
}
.sttl_outer .sttl {
 font-size: 13px;
 color: #172E59;
 line-height: 1.5;
 letter-spacing: 2px;
 display: block;
}
.sttl_outer .sttl::before {
 content: attr(data-title);
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-weight: 700;
 font-style: bold;
 font-variation-settings: "wdth"100;
 font-size: 25px;
 letter-spacing: 5px;
 margin-right: 20px;
}
.faq_index li {
 margin-bottom: 30px;
}
.faq_index li a {
 color: #172E59;
}
.ttl_faq {
 font-size: 21px;
 border-bottom: #172E59 1px solid;
 padding-bottom: 20px;
 line-height: 1;
}
.faq-list {
 width: 711px;
 text-align: left;
}
.faq-items {}
.faq-item {
 width: 100%;
 margin-bottom: 80px;
}
.faq_list {
 list-style: none;
}
.faq_list li {
 border-bottom: 1px solid #d1d1d1; /* 項目ごとの区切り線 */
}
.faq_list li a {
 display: flex;
 align-items: center;
 padding: 15px 0 15px 5px; /* 上下左右の余白調整 */
 text-decoration: none;
 color: #172E59;
 font-weight: 500;
 transition: background-color 0.3s;
}
/* ホバー時の背景色（お好みで） */
.faq_list li a:hover {
 background-color: #e9e6df;
}
/* 「Q」のデザイン */
.faq_list li a::before {
 content: "Q";
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
 font-style: normal;
 font-variation-settings:
  "wdth"100;
 font-size: 14px;
 color: #001a43; /* 濃紺 */
 margin-right: 20px;
}
/* 縦ラインのデザイン */
.faq_list li a::after {
 content: "";
 order: -1; /* Qの直後に置くため調整（擬似要素の並び順） */
}
/* Qのすぐ後ろに縦線を入れるための擬似要素の工夫 */
.faq_list li a {
 position: relative;
 padding-left: 60px; /* Qと線のスペース分を確保 */
}
.faq_list li a::before {
 position: absolute;
 left: 5px;
}
/* 縦ラインの実装 */
.faq_list li a::after {
 content: "";
 position: absolute;
 left: 37px; /* Qとテキストの間 */
 width: 1px; /* 線の太さ */
 height: 24px; /* 線の長さ */
 background-color: #001a43; /* 線の色 */
}
@media screen and (max-width: 767px) {
 .faq-archive {
  display: block;
  width: auto;
  margin: 0 0 50px 0;
 }
 .filter-area {
  width: auto;
  margin-bottom: 16vw;
  text-align: left;
  position: inherit;
  top: auto;
  height: auto;
  z-index: auto;
 }
 .sttl_outer {
  width: auto;
  margin-bottom: 9vw;
 }
 .sttl_outer .sttl {
  font-size: 3.2vw;
  color: #172E59;
  line-height: 1.5;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
 }
 .sttl_outer .sttl::before {
  content: attr(data-title);
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: bold;
  font-variation-settings: "wdth"100;
  font-size: 4.8vw;
  letter-spacing: 5px;
  margin-right: 20px;
 }
 .faq_index {
  border-top: #D9D9D9 1px solid;
 }
 .faq_index li {
  margin-bottom: 0;
  border-bottom: #D9D9D9 1px solid;
 }
 .faq_index li a {
  color: #172E59;
  padding: 5.3vw 0;
  display: block;
  line-height: 1;
  text-align: center;
  position: relative;
  font-size: 3.2vw;
 }
 .faq_index li a::after {
  content: "";
  position: absolute;
  right: 3vw;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(90deg);
  background: url("../images/common/ic_more_b.svg") no-repeat center / contain;
  transition: transform 0.3s ease;
 }
 .ttl_faq {
  font-size: 3.73vw;
  border-bottom: #172E59 1px solid;
  padding-left: 2vw;
  padding-bottom: 2vw;
  line-height: 1;
 }
 .faq-list {
  width: auto;
  text-align: left;
 }
 .faq-items {}
 .faq-item {
  width: 100%;
  margin-bottom: 80px;
 }
 .faq_list {
  list-style: none;
  padding-top: 3vw;
 }
 .faq_list li {
  border-bottom: none;
 }
 .faq_list li a {
  display: flex;
  align-items: center;
  padding: 3vw 0 3vw 5vw; /* 上下左右の余白調整 */
  text-decoration: none;
  color: #172E59;
  font-weight: 500;
  transition: background-color 0.3s;
  font-size: 3.2vw;
 }
 /* ホバー時の背景色（お好みで） */
 .faq_list li a:hover {
  background-color: inherit;
 }
 /* 「Q」のデザイン */
 .faq_list li a::before {
  content: "Q";
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
   "wdth"100;
  font-size: 3.2vw;
  color: #001a43; /* 濃紺 */
  margin-right: 5vw;
 }
 /* 縦ラインのデザイン */
 .faq_list li a::after {
  content: "";
  order: -1; /* Qの直後に置くため調整（擬似要素の並び順） */
 }
 /* Qのすぐ後ろに縦線を入れるための擬似要素の工夫 */
 .faq_list li a {
  position: relative;
  padding-left: 13vw; /* Qと線のスペース分を確保 */
 }
 .faq_list li a::before {
  position: absolute;
  left: 2vw;
 }
 /* 縦ラインの実装 */
 .faq_list li a::after {
  content: "";
  position: absolute;
  left: 8vw; /* Qとテキストの間 */
  width: 1px; /* 線の太さ */
  height: 24px; /* 線の長さ */
  background-color: #001a43; /* 線の色 */
 }
}
/* ページナビ全体 */
.ajax-pagination {
 margin: 60px auto;
 display: flex;
 justify-content: center;
 align-items: center; /* 中央揃え */
 gap: 25px; /* 数字同士の間隔（デザインに合わせて広めに設定） */
}
/* 各要素共通スタイル */
.page-numbers {
 text-decoration: none;
 color: #1a2e4d; /* デザインに合わせた濃紺色（適宜調整してください） */
 font-size: 13px;
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 transition: opacity 0.3s;
 border: none; /* 枠線を削除 */
 background: none; /* 背景を削除 */
 width: 17px;
 height: auto;
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-weight: 500;
 font-style: normal;
 font-variation-settings:
  "wdth"100;
}
.page-numbers:hover {
 opacity: 0.7;
}
/* カレント（現在地）のスタイル */
.page-numbers.current {
 font-weight: 500;
 background: none;
 border: none;
}
/* カレントの下線 */
.page-numbers.current::after {
 content: "";
 position: absolute;
 bottom: -5px; /* 数字からの距離 */
 left: 0;
 right: 0;
 height: 1px;
 background-color: #1a2e4d; /* 下線の色 */
}
/* 矢印共通設定（svg背景） */
.page-numbers.prev, .page-numbers.next {
 width: 7.5px;
 height: 8.5px;
 text-indent: -9999px; /* 元の「>」テキストを隠す */
 background-image: url("../images/common/ic_nav.svg");
 background-repeat: no-repeat;
 background-position: center;
 background-size: contain;
}
/* 左矢印の反転 */
.page-numbers.prev {
 transform: scaleX(-1);
}
/* ドット（...）の調整 */
.page-numbers.dots {
 border: none;
}
/* --- レスポンシブ (SP) --- */
@media screen and (max-width: 767px) {
 .ajax-pagination {
  margin: 13vw auto;
  gap: 20px;
 }
 .page-numbers {
  font-size: 3.46vw;
 }
 .page-numbers.prev, .page-numbers.next {
  width: 13px;
  height: 13px;
 }
}
/* ==========================
  faq 詳細
========================== */
.faq_detail {
 width: 1100px;
 margin: 0 auto;
 text-align: left;
 padding-bottom: 90px;
}
/* ベースのコンテナ設定（任意） */
.faq_q, .faq_a {
 position: relative;
 padding-left: 73px;
 margin: 0;
 color: #172E59;
}
/* Q（質問）の部分 */
.faq_q {
 padding-bottom: 20px;
 font-size: 21px;
 border-bottom: 1px solid #172E59;
 margin-bottom: 45px;
}
.faq_q::before {
 content: "Q";
 position: absolute;
 left: 20px;
 top: 3px;
 font-size: 18px;
 font-weight: 500;
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 font-variation-settings:
  "wdth"100;
}
/* A（回答）の部分 */
.faq_a {
 padding-top: 3px;
 padding-bottom: 40px;
 font-size: 14px;
 font-weight: 500;
}
.faq_a::before {
 content: "A";
 position: absolute;
 left: 20px;
 top: 0;
 font-size: 18px;
 font-weight: 500;
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 font-variation-settings:
  "wdth"100;
}
.faq_detail .more_link {
 text-align: right;
 margin-bottom: 50px;
}
.faq_detail .more_link .btn_r {
 padding: 0 50px 8px 20px;
}
.faq_detail .more_link .btn_r::after {
  top: 40%;
}
.related_list {
 background: #E7E3DA;
 padding: 28px;
 margin-bottom: 90px;
}
.ttl_related_list {
 display: flex;
 align-items: center;
 margin-bottom: 10px;
 letter-spacing: 1px;
}
.ttl_related_list strong {
 font-size: 15px;
 font-weight: 700;
 font-family: "Roboto", sans-serif;
 font-optical-sizing: auto;
 font-style: normal;
 font-variation-settings:
  "wdth"100;
 margin-right: 20px;
}
.ttl_related_list {
 font-size: 13px;
 font-weight: 500;
}
.related_list .faq_list {
 padding-left: 10px;
}
.related_list .faq_list li {
 border-bottom: none;
}
.related_list .faq_list li a {
 padding: 13px 0 13px 60px;
}

.faq_a h2{
	font-size: 21px;
  color: #172E59;
  font-weight: 700;
	margin: 2em 0 0.5em 0;
}

.faq_a h3 {
 font-size: 18px;
 font-weight: 700;
margin: 2em 0 0.5em 0;
}

.faq_a .seotext {
  background: linear-gradient(transparent 70%, #ffcd7d 70%);
}

.faq_a .btn_ar {
  padding: 15px 80px;
  color: #fff;
  background: #172E59;
  border-radius: 2px;
  margin: 1em auto 2em auto;
  letter-spacing: 2px;
  display: inline-block;
}

.faq_a .btn_ar a {
  color: #fff;
}
.faq_a .btn_ar {
  text-decoration: none !important;
}

@media screen and (max-width: 767px) {
 .faq_detail {
  width: auto;
  display: block;
  padding-bottom: 5vw;
 }
 .faq_q, .faq_a {
  padding-left: 6.6vw;
 }
 /* Q（質問）の部分 */
 .faq_q {
  padding-bottom: 0;
  font-size: 3.73vw;
  border-bottom: none;
  margin-bottom: 8vw;
 }
 .faq_q::before {
  left: 0;
  top: 0;
  font-size: 3.73vw;
 }
 /* A（回答）の部分 */
 .faq_a {
  padding-top: 3px;
  padding-bottom: 40px;
  font-size: 3.2vw;
  font-weight: 500;
 }
 .faq_a::before {
  left: 0;
  top: 0;
  font-size: 3.73vw;
 }
 .faq_detail .more_link {
  text-align: right;
  margin-bottom: 20vw;
 }
 .faq_detail .more_link .btn_r {
  padding: 0 6vw 1vw 4vw;
 }
 .related_list {
  background: #E7E3DA;
  padding: 4.5vw;
  margin-bottom: 14vw;
 }
 .ttl_related_list {
  display: flex;
  align-items: center;
  margin-bottom: 0;
  letter-spacing: 1px;
 }
 .ttl_related_list strong {
  display: none;
 }
 .ttl_related_list span {
  font-size: 3.46vw;
 }
 .ttl_related_list {
  font-size: 3.46vw;
 }
 .related_list .faq_list {
  padding-left: 0;
 }
 .related_list .faq_list li {
  border-bottom: none;
 }
 .related_list .faq_list li a {
  padding: 3vw 0 3vw 10vw;
 }
 .related_list .faq_list li a::before {
  left: 0vw;
 }
 .related_list .faq_list li a::after {
  left: 6vw;
  width: 1px;
 }
	
	.faq_a h2{
	font-size: 3.73vw;
	margin: 2em 0 0.5em 0;
  padding-bottom: 15px;
	font-weight: 700;
}

.faq_a h3 {
 font-size: 3vw;
	font-weight: 700;
margin: 2em 0 0.5em 0;
}

.faq_a .seotext {
  background: linear-gradient(transparent 70%, #ffcd7d 70%);
}

.faq_a .btn_ar {
  padding: 4vw auto;
    color: #fff;
    background: #172E59;
    border-radius: 2px;
    margin: 1em auto 3em auto;
    letter-spacing: 2px;
    display: block;
    width: auto;
    text-align: center;
}

.faq_a .btn_ar a {
  color: #fff;font-size: 3vw;
	line-height: 1.3;
}

	
}
/*ページナビ*/
/* 外側の枠：最大1100pxで画面の中央に配置 */
.post-navigation {
 max-width: 1100px;
 width: 100%;
 margin: 0 auto; /* 1100pxの枠自体を中央寄せ */
 display: flex;
 justify-content: flex-end; /* 中の要素を右側に寄せる */
}
/* 内側の枠：右側の775pxエリア */
.post-navigation-inner {
 width: 1100px;
 display: flex;
 justify-content: center; /* 775pxの範囲内でコンテンツを中央寄せ */
 /* 念のため：画面幅が775px以下の時も崩れないように */
 max-width: 100%;
}
.post-navigation__inner {
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 10px; /* 要素同士の隙間 */
}
/* タップエリアの設定 */
.nav-item {
 display: flex;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 color: #333;
 /* タップエリアを確保：最小44px */
 min-width: 44px;
 min-height: 44px;
 /* どこを触っているか分かりやすくするための設定（任意） */
 transition: opacity 0.3s;
}
.nav-item:hover {
 opacity: 0.6;
}
/* アイコン自体のサイズ（固定） */
.nav-icon img {
 width: 7.5px;
 height: 8.5px;
 display: block;
}
/* 左矢印：180度回転 */
.nav-item.prev .nav-icon {
 transform: rotate(180deg);
}
/* 中央のARCHIVES */
.nav-item.center {
 font-size: 14px;
 font-weight: 400;
 color: #172E59;
 letter-spacing: 0.1em;
 padding: 0 25px; /* 文字の周りにも少し余裕を持たせる */
 min-width: auto; /* 文字幅に合わせる */
}
/* 記事がない時のスペース維持用 */
.nav-placeholder {
 width: 44px;
}
@media screen and (max-width: 767px) {
 .post-navigation {
  max-width: 100%;
  width: 100%;
  margin: 0 auto; /* 1100pxの枠自体を中央寄せ */
  display: flex;
  justify-content: flex-end; /* 中の要素を右側に寄せる */
 }
 /* 内側の枠：右側の775pxエリア */
 .post-navigation-inner {
  width: 100%;
  display: flex;
  justify-content: center; /* 775pxの範囲内でコンテンツを中央寄せ */
  /* 念のため：画面幅が775px以下の時も崩れないように */
  max-width: 100%;
 }
 /* 中央のARCHIVES */
 .nav-item.center {
  font-size: 2.666vw;
  font-weight: 400;
  color: #172E59;
  letter-spacing: 0.1em;
  padding: 0 6vw; /* 文字の周りにも少し余裕を持たせる */
  min-width: auto; /* 文字幅に合わせる */
 }
 /* 記事がない時のスペース維持用 */
 .nav-placeholder {
  width: 11vw;
 }
}