/* 外部スタイルシート */
@charset "UTF-8";
/*@import url("index.css");*/

/*//////////////////////////////////////////

	common.css
	サイト共通・基本設定

//////////////////////////////////////////*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --main_bleu: #036eb8;
  --main_morebleu: #036eb8;
  --main_green: #4b9401;
  --main_orang: #e99411;
  --main_moreorang: #f7790b;
  --main_red: #e6153e;
  --price_red: #e53935;
  --main_light_gray: #f5f5f5;
  --main_gray: #d7dfe8;
  --aside_gray: #858585;
  --just_green: #008000;
  --just_light_green: #e6ffe6;
  --bg_green: #d8f3bd;
  --bg_gray_green: #f4f7f0;
  --bg_gray_green2: #f9faf8;
  --bg_yellow: #fdfde1;
  --bg_bleu: #edf8ff;
  --border_gray: #bebebe;
  --tel_price_font: "Oswald", sans-serif;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  --radius: 10px;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  --section-gap-y: clamp(24px, 4vw + 8px, 64px);
  --section-gap-y-loose: clamp(40px, 6vw + 8px, 96px);
  --maker: rgba(255, 250, 125, 0.86);
}

body {
  font-family: "Lato", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", "MS PGothic", sans-serif;
  width: 0 auto;
  margin: 0;
  -webkit-text-size-adjust: 100%;
  color: #444;
}
body p,
body dl dd,
body li {
  line-height: 1.5;
  font-size: clamp(16px, 1.8vw, 18px);
}
body aside {
  color: var(--aside_gray);
  font-size: 14px;
}

/* ////////////////////////////

グーグルフォント

/////////////////////////////*/

/* 電気工事直依頼サイトNo.1 */
.be-vietnam-pro-black-italic {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 900;
}

/* 埋込電話番号に使用、グーグルフォント */
.bebas-neue-regular {
  font-family: "Bebas Neue", serif;
  font-weight: 400;
  font-style: normal;
}
/* 金額とか用に使用 */
.oswald {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
/* イメージを変えたい時の日本語フォント */
.m-plus-1p-regular {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.m-plus-1p-extrabold {
  font-family: "M PLUS 1p", sans-serif;
  font-weight: 800;
  font-style: normal;
}

/* ///////////////////////////////////////////

三角矢印

/////////////////////////////////////////// */
.triangle_right {
  width: 0;
  height: 0;
  margin: 1em auto;
  border-style: solid;
  border-top: 55px solid transparent;
  border-bottom: 55px solid transparent;
  border-left: 50px solid #ffb500;
  border-right: 0;
}

/*//////////////////////////////////////////

  △△△△△△△△△△△△△△
	コンテンツ共通・基本設定 END

//////////////////////////////////////////*/

/* /////////////////////////////////

iframe中央寄せ
・フォームズ、グーグルマップ、updatetime

///////////////////////////////// */
.iframe-center {
  text-align: center;
}

/*//////////////////////////////////////////

	メイン共通・基本設定

//////////////////////////////////////////*/
/*------------------------------------------
	 パンくずリスト
------------------------------------------*/
.breadcrumb {
  font-size: 1em;
  text-align: left;
  max-width: 100%;
  padding: 0.5em;
}
.breadcrumb a {
  color: #444;
}
.breadcrumb ul {
  padding-left: 1.5em;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: auto;
  font-size: 14px;
}
.breadcrumb li {
  display: inline-block;
  position: relative;
  padding-right: calc(16px + 8px);
  margin-right: 8px;
  font-size: clamp(10px, 1.8vw, 15px);
}
.breadcrumb li::before {
  content: ">";
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2;
  text-align: center;
  font-size: 1.2em;
  color: inherit;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.breadcrumb li:last-child {
  color: #969696;
}
.breadcrumb li:last-child::before {
  content: normal;
}

/* 標準工事の部分 */
.default_block {
  padding: 1em 0;
}

.default_block h3 {
  text-align: center;
  font-size: clamp(16px, 1.8vw, 18px);
  font-weight: unset;
}

.default_block .default_item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 1.5em auto 0;
}
.default_block .default_item p {
  background-color: #ecf7e3;
  padding: 1em;
  font-size: clamp(14px, 1.8vw, 16px);
}
@media (max-width: 768px) {
  .default_item {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/*

施工店一覧（section#member-wap）
=======================================*/
#member-wap {
  padding-top: 2em;
}
#member-wap .over {
  padding: 1em 0;
}

#member-wap ul {
  padding-left: unset;
  margin-top: unset;
}
#member-wap ul li {
  max-width: 100%;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2em 1em;
  border-bottom: 1px solid #d7dfe8;
}
/* 1つ目だけ上余白変更 */
#member-wap ul li:nth-of-type(1) {
  padding: 0.5em 1em 2em 1em;
}

/* 1行ずつ背景色変更 */
#member-wap ul li:nth-child(even) {
  background-color: #f5f5f5;
}
/* li左側 */
#member-wap ul li .left-wap {
  flex-basis: 550px;
}
/* 会社名（h3） */
#member-wap ul li .left-wap h3 {
  width: 100%;
  font-size: 23px;
  border-bottom: unset;
  box-shadow: unset;
  padding: 0 0 0.5em 0;
  margin: unset;
}
/* commonのh3のcss無効 */
#member-wap ul li .left-wap h3::after {
  display: none;
}
/* 会社住所 */
#member-wap .kids-wap p {
  margin: 0;
}
/* 画像 と 会社名・会社住所横並び */
#member-wap ul li .left-kids {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.7em;
}
#member-wap ul li .left-kids img {
  display: block;
  max-width: 150px;
}
/* 画像・会社名・会社住所 と 赤青ボタン横並び */
#member-wap ul li .left-kids2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
  gap: 0.5em;
  margin-bottom: 1em;
}
#member-wap ul li .left-kids2 img {
  display: block;
  max-width: 50px;
}
/* アイコン */
#member-wap ul li .left-kids2 p {
  max-width: 300px;
  font-weight: 700;
  background-color: #2196f3;
  color: #fff;
  padding: 0.2em 1em;
  font-size: 14px;
  border-radius: 5px;
}
/* エネルギー関連工事は背景変更 */
#akita .left-kids2 p,
#ibaraki2 .left-kids2 p,
#kanagawa .left-kids2 p,
#kumamoto .left-kids2 p {
  background-color: #669933;
}

/* 対応エリア */
.left-wap dl {
  font-size: 14px;
  padding-top: 0.3em;
  margin-bottom: unset;
}
.left-wap dl dt {
  padding: 0.5em 0;
}

.left-wap dl dd {
  margin-left: unset;
}

/*

右側（赤青ボタン）
==================================*/
/* liの右側 */
#member-wap ul li .right-wap {
  flex-basis: 250px;
  display: block;
  margin-top: 1em;
}
/*

赤ボタン
===================================*/
#member-wap ul li .right-wap p:nth-of-type(1) {
  max-width: 250px;
  background-color: #e6153e;
  margin-bottom: 0.5em;
}
#member-wap ul li .right-wap p:nth-of-type(1) a {
  display: block;
  position: relative;
  padding: 1em 1em 1em 0.7em;
  font-weight: bold;
  color: #fff;
  box-shadow: 0px 4px 10px 0px rgba(31, 114, 208, 0.2);
}
#member-wap ul li .right-wap p:nth-of-type(1) a::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  position: absolute;
  top: 50%;
  left: 86%;
  transform: translate(0, -50%);
  color: #fff;
  padding-right: 0.2em;
}
/* 赤ボタンホバー */
#member-wap ul li .right-wap p:nth-of-type(1):hover {
  background-color: #fff;
  transition: 0.3s;
}
#member-wap ul li .right-wap p:nth-of-type(1) a:hover {
  opacity: unset;
  background-color: #fff;
  outline: 1px solid #e6153e;
  outline-offset: -0px;
  color: #e6153e;
  transition: 0.3s;
}
#member-wap ul li .right-wap p:nth-of-type(1) a:hover::after {
  color: #e6153e;
}

/*

青ボタン
=====================================*/
#member-wap ul li .right-wap p:nth-of-type(2) {
  max-width: 250px;
  background-color: #fff;
}
#member-wap ul li .right-wap p:nth-of-type(2) a {
  display: block;
  position: relative;
  padding: 1em 1em 1em 0.7em;
  font-weight: bold;
  color: #005bac;
  border: #005bac 1px solid;
  box-shadow: 0px 4px 10px 0px rgba(31, 114, 208, 0.2);
}
#member-wap ul li .right-wap p:nth-of-type(2) a::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  position: absolute;
  top: 50%;
  left: 86%;
  transform: translate(0, -50%);
  color: #005bac;
  padding-right: 0.2em;
}
/* 青ボタンホバー */
#member-wap ul li .right-wap p:nth-of-type(2):hover {
  background-color: #005bac;
  transition: 0.3s;
}
#member-wap ul li .right-wap p:nth-of-type(2) a:hover {
  opacity: unset;
  color: #fff;
  transition: 0.3s;
}
#member-wap ul li .right-wap p:nth-of-type(2) a:hover::after {
  color: #fff;
}
@media screen and (max-width: 768px) {
  #member-wap {
    padding-top: 0;
  }
  #member-wap ul li,
  #member-wap ul li .left-kids {
    display: block;
  }
  #member-wap ul li .left-wap h3 {
    padding: 0.5em 0 0.3em 0;
  }
}

/* /////////////////////////////////


工事ページsection1 共通
h1
↓
メイン画像
↓
メインテキスト
↓
ページ内ジャンプリンク
↓
こんなお悩みありませんか？
↓
〇〇が解決！
↓
対応エリアアコーディオン


/////////////////////////////////*/

/* 各ページトップ画像の下の導入文 */
.lead_wap {
  padding-top: 1em;
  max-width: 820px;
  margin: 0 auto 2em;
  box-sizing: border-box;
}
.lead_wap p {
  color: #575757;
}

/* ページ内ジャンプ */
.nayami .top_link {
  margin: auto;
  padding: 2em 1em;
  display: flex;
  flex-wrap: wrap;
  display: flex;
  justify-content: left;
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.nayami .top_link a {
  border-right: 1px solid var(--main_bleu);
  text-decoration: underline;
  box-sizing: border-box;
  padding: 0.3em 0.8em;
  font-size: clamp(15px, 1.8vw, 16px);
  font-weight: 400;
}
.nayami .top_link a:last-of-type {
  border-right: unset;
}

/* //////////////////////////////////////////

こんなお悩みありませんか？
（.triangle_section）

////////////////////////////////////////// */
.triangle_section {
  padding: 0 0 8em;
}

/* 背景ネイビーブロック */
.trouble_block {
  background-color: #002d66;
  text-align: center;
  padding: 3em 1em;
}
.trouble_h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.trouble_h2 img {
  display: block;
  width: min(100%, 80px);
  height: auto;
  transform: rotate(320deg);
}
.trouble_block h2 {
  font-size: clamp(30px, 1.8vw, 32px);
  color: #fff;
}
.trouble_block h2 span {
  position: relative;
  padding: 0 0.2em;
}
.trouble_block h2 span::before {
  position: absolute;
  content: "・・・";
  color: #fff;
  top: -65%;
  transform: translate(0%, 0%);
}

/* 横並び悩み事3つ */
.trouble_gray {
  margin: 2em auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 1em;
}
.gray_box {
  flex: 1;
  background-color: #eeeeee;
  padding: 1.5em 1em;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.gray_box img {
  display: block;
  width: min(100%, 40px);
  height: auto;
  margin: 0 auto 1em;
}
.gray_box p {
  color: #000;
  font-size: clamp(20px, 1.8vw, 22px);
  font-weight: bold;
  text-align: center;
  margin: auto;
}
img.trouble_family {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: auto;
}

/* //////////////////////////////////////////

トライアングルより下
（.triangle_block）

////////////////////////////////////////// */
.triangle_bottom {
  width: 0;
  height: 0;
  border-style: solid;
  border-right: 60px solid transparent;
  border-left: 60px solid transparent;
  border-top: 50px solid #002d66;
  border-bottom: 0;
  margin: 0 auto 2em;
}

.triangle_block {
  padding: 0 0 2em;
  background-image: radial-gradient(circle, rgb(255, 168, 55) 9%, rgba(255, 255, 255, 0) 13%),
    repeating-conic-gradient(from 5deg, rgba(255, 168, 55) 50deg, rgb(253, 188, 103) 50deg 52deg, rgba(255, 168, 55) 52deg 58deg, rgb(255, 184, 92) 58deg 61deg, rgba(255, 168, 55) 61deg 68deg, rgb(255, 168, 55) 68deg 72deg, rgb(250, 174, 76) 72deg 83deg, rgba(250, 174, 76) 83deg);
}

.large_bold_block {
  transform: rotate(357deg);
  padding-top: 1.5em;
}

.triangle_block .large_bold_text {
  font-size: clamp(32px, 1.8vw, 35px);
  line-height: 1.3;
  font-weight: bold;
  text-align: center;
  color: #ffffff; /* 文字の色 */
  text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.76), -5px 5px 3px rgba(0, 0, 0, 0.76), 5px -5px 3px rgba(0, 0, 0, 0.76), -5px -5px 3px rgba(0, 0, 0, 0.76), 5px 0px 3px rgba(0, 0, 0, 0.76), 0px 5px 3px rgba(0, 0, 0, 0.76), -5px 0px 3px rgba(0, 0, 0, 0.76), 0px -5px 3px rgba(0, 0, 0, 0.76); /* 文字の影 */
}
.triangle_block .large_bold_text span.big_span {
  font-size: clamp(62px, 1.8vw, 65px);
  padding: 0 0.2em;
}
.middle_span {
  font-size: clamp(45px, 1.8vw, 48px);
}
.large_bold_block p:nth-of-type(2) {
  text-align: center;
  background-color: #c40606;
  color: #fff;
  padding: 0.3em;
  max-width: 550px;
  margin: 1em auto 0;
}

.triangle_column ul {
  width: calc(100% - 40px);
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
  background-color: rgb(255, 225, 169);
  padding: 1em;
}

.triangle_column ul li {
  color: rgb(124, 82, 47);
  font-size: clamp(13px, 1.8vw, 15px);
  list-style-type: disc;
  list-style-position: inside;
}
.triangle_column ul li a {
  text-decoration: underline;
}

.triangle_column img {
  display: block;
  width: min(100%, 240px);
  height: auto;
  margin: auto;
}

.circle {
  background-color: #381b1b;
  max-width: 250px;
  height: 180px;
  margin: 0.5em auto 1em;
  border-radius: 50%; /* 円形にする */
  position: relative; /* 基準値とする */
  overflow: hidden; /* はみ出た部分を非表示 */
}

.circle img {
  position: absolute; /* 相対位置に指定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の表示サイズを調整 ※IE非対応 */
}
/*
 /////////////////////////////////////////// */

/* 画像の位置の調整が必要ならクラス名コード付けて下記へ */

/* ///////////////////////////////////////////
*/
/* 福田電子 */
.m001 {
  background-color: #1e50a2;
}
.m001 img {
  top: 0;
  left: -5;
}
/* 増渕電気 */
.m002 img {
  top: 10;
}
/* シスコム */
.m003 img {
  top: 2;
  left: 3;
}
/* 中村電設 */
.m005 img {
  top: 0;
  left: 5;
}
/* アースコム */
.m008 img {
  top: 0;
  left: 1;
}
/* 松下電建 */
.m010 {
  background-color: #adadad;
}
.m010 img {
  top: 10;
  left: 1;
}
/* KOTOBUKI外装 */
.m015 {
  background-color: #3eb4fb;
}
.m015 img {
  top: 15;
  left: 0;
}
/* コトブキ光熱 */
.m016 {
  background-color: #e3e1e1;
}
.m016 img {
  top: 7;
  left: 4;
}
/* --------------------- */

@media only screen and (max-width: 768px) {
  section:nth-of-type(1) .top_link {
    justify-content: left;
    gap: 0.3em;
  }
  section:nth-of-type(1) .top_link a {
    padding: 0.3em;
  }

  /* こんなお悩みありませんか？セクション */
  .trouble_gray {
    flex-direction: column;
  }
  .trouble_h2 {
    justify-content: left;
  }

  .trouble_block h2 {
    font-size: clamp(23px, 1.8vw, 32px);
    line-height: 1.6;
  }
  img.trouble_family {
    width: min(100%, 200px);
    margin-top: 2em;
  }
  .triangle_block .large_bold_text span.big_span {
    font-size: clamp(42px, 1.8vw, 48px);
  }
  .middle_span {
    font-size: clamp(38px, 1.8vw, 48px);
  }
  .triangle_column {
    display: block;
    padding-top: 4em;
  }
}

/* /////////////////////////////////// */

/* エリアアコーディオン */
/* div id="area" class="area-wap" */

/* /////////////////////////////////// */
.area-wap {
  width: calc(100% - 20px);
  max-width: 820px;
  box-sizing: border-box;
  margin: 1.5em auto;
}

.area-wap h2 {
  font-size: clamp(17px, 1.8vw, 20px);
  color: #fff;
}
/* クリックするところ */
.area_accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1.5em 2em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--main_bleu);
}
.area_accordion summary h2 {
  padding-left: unset;
}

.area_accordion summary::-webkit-details-marker {
  display: none;
}

.area_accordion summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #c2c2c2;
  border-right: 3px solid #c2c2c2;
  content: "";
  transition: transform 0.3s;
}

.area_accordion[open] summary::after {
  transform: rotate(225deg);
}

.area_accordion p {
  transform: translateY(-10px);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
  word-break: keep-all;
  text-align: left;
}
.area_accordion p a {
  font-weight: 400;
  color: #003366;
  display: inline-block;
  margin: 0.2em 0.4em;
}
.area-card a:hover {
  text-decoration: underline;
}

.area_accordion[open] p {
  transform: none;
  opacity: 1;
}

/* アコーディオンの中身 */
.area_card_wap {
  background: #f9f9f9;
  padding: 2em;
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1em;
}

.area-card {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1em;
}

.area-card h3 {
  padding: 0.3em 0 0.4em;
}

.area_card_wap aside {
  margin-top: 2em;
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .area_accordion summary {
    padding: 1.5em 1.5em;
  }
}

/* ***********************************

標準工事
<section class="price_list">

*********************************** */
.price_list {
  padding-top: 5em;
}
.price_list h2 {
  max-width: 300px;
  background-color: #c9dfb2;
  color: #669933;
  padding: 0.6em 0.8em;
  border-radius: 50px;
  text-align: center;
}

/* /////////////////////////////////

標準工事内容・よくある追加費用
（アコーディオンタイプ）

class="aco_section"

///////////////////////////////// */
.aco_section .price_block {
  padding: 1em 0 0;
}

.option_accordion {
  margin: 1em auto;
  border-radius: 5px;
  background-color: #cfe5d1;
}

.option_accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1.2em 2em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.option_accordion summary::-webkit-details-marker {
  display: none;
}

.option_accordion summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: "";
  transition: transform 0.3s;
}

.option_accordion[open] summary::after {
  transform: rotate(225deg);
}

.option_accordion[open] p {
  transform: none;
  opacity: 1;
  padding-top: 1em;
}
/* アコーディオンの中身 */
.option_price {
  padding: 1em;
  background-color: #fff;
  border-top: 2px solid #d6d6d6;
  border-right: 2px solid #d6d6d6;
  border-left: 2px solid #d6d6d6;
}
.option_price:last-of-type {
  border-bottom: 2px solid #d6d6d6;
}
.option_price h4 {
  background-color: unset;
  border: unset;
  padding: 0 0 0.3em 0;
  margin: unset;
  font-size: 20px;
  border-bottom: 1px solid var(--main_gray);
}
.option_price p span {
  font-size: 25px;
  font-weight: bold;
  padding-right: 0.2em;
}

@media only screen and (max-width: 600px) {
  .option_accordion {
    border-radius: unset;
  }
}
/* /////////////////////////////////// */

/* よくある追加費用（カードタイプ） */
/* .op_container */

/* /////////////////////////////////// */
.op_container {
  padding: 5em 0;
}
.aco_item_container {
  background-color: #edf5e4;
  padding: 1.5em;
}
.aco_item_container ul {
  padding-top: 1em;
}

.aco_item_container li {
  list-style-type: disc;
  list-style-position: inside;
  font-size: 15px;
  color: var(--aside_gray);
}
.op_container h2 {
  max-width: 300px;
  background-color: #c9dfb2;
  color: #669933;
  padding: 0.6em 0.8em;
  border-radius: 50px;
  text-align: center;
}

.op_container .card h3 {
  padding-bottom: 0.5em;
}

.op_container .card .price_block .large,
.option_accordion .card .price_block .large {
  font-size: 30px;
  font-weight: bold;
  margin-top: 10px;
  text-decoration: unset;
}

.op_container .price_block .large::after,
.option_accordion .price_block .large::after {
  display: none;
}
.op_container ul {
  max-width: 820px;
  margin: 0 auto;
  box-sizing: border-box;
}
.op_container li {
  color: var(--aside_gray);
  font-size: 15px;
}
@media only screen and (max-width: 768px) {
  #main_right .op_container .fff_box {
    box-shadow: unset;
    padding: unset;
    background-color: unset;
  }
}
/* ///////////////////////////////////

よくある追加費用セクション
（.extra-fee）

※カード数が多い場合には3枚以上は
ボタン押したら表示

////////////////////////////////// */
.extra-fee {
  margin: 5em auto 10em;
}
/* extra-feeヘッダー
------------------------------ */
.extra-fee-header {
  padding: 0 0 1.5em;
}
.extra-fee-header h2 {
  font-size: 1.4rem;
  text-align: center;
  margin-bottom: 1em;
  background-color: var(--main_light_gray);
  border-top: 2px solid #d3d3d3;
  border-bottom: 2px solid #d3d3d3;
  padding: 0.6em;
}
.extra-fee-header p {
  font-size: 0.95rem;
  text-align: center;
  color: #666;
  margin-bottom: 24px;
}
/* 追加費用項目カード
------------------------------ */
.extra-fee-card {
  border-radius: var(--radius);
  border: 1px solid #d3d3d3;
  padding: 16px;
  background: #fff;
}
.extra-fee-card h3 {
  font-size: 1rem;
  margin-bottom: 4px;
}
/* 簡易説明テキスト（あれば） */
.extra-fee-note {
  font-size: 0.85rem;
  color: #555;
}
/* もっと見るボタン（jsで付与） */
.extra-fee-more {
  display: block;
  margin: 20px auto 0;
  padding: 8px 20px;
  font-size: 0.9rem;
  border-radius: 999px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
.extra-fee-card.is-hidden {
  display: none;
}

/* SP */
@media (max-width: 768px) {
  .extra-fee-grid {
    grid-template-columns: 1fr;
  }
}

/*
////////////////////////////////////////


その他にも関連工事対応セクション
（.subsection）

////////////////////////////////////////
*/
.subsection {
  background-color: #ddf1dd;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  box-shadow: var(--shadow);
}
/* めくれた紙風 */
.cstm-box-paper {
  padding: 2em;
  position: relative;
}
.cstm-box-paper::after {
  position: absolute; /* 絶対位置指定 */
  content: ""; /* 擬似要素にコンテンツを表示しない */
  right: 0px; /* 右端に配置 */
  top: 0px; /* 上端に配置 */
  border-width: 0 45px 45px 0; /* 形状 */
  border-style: solid; /* 線の種類 */
  border-color: #b1af9d #fff #8abc8a; /* 線の色 */
  box-shadow: -1px 1px 1px rgb(0 0 0 / 0.15); /* 影*/
}

/* 見出しブロック */
.subsection-header {
  text-align: center;
  margin: 0 auto;
  max-width: 900px;
}

/* 小さなラベル（細い帯） */
.subsection-label {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 10px;
  background: #3f7d3a;
  color: #e7f5ea;
  margin-bottom: 10px;
}

/* 見出し本体 */
.subsection-header h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1em;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #3f7d3a;
}
/* アイコン */
.subsection-header h2 img {
  display: block;
  width: min(100%, 60px);
  height: auto;
}

.subsection-body a {
  color: #444;
}
.subsection-body a:hover {
  opacity: unset;
}

.thumb-card {
  display: block;
  text-decoration: none;
  color: inherit;
}

.thumb-card-inner {
  position: relative;
  overflow: hidden;
  margin: 0;
}

.thumb-card-inner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 文字オーバーレイ */
.thumb-card-inner figcaption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.685);
  background-color: #00000079;
}

/* hover */
.thumb-card-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.404), rgba(0, 0, 0, 0.616));
  opacity: 0;
  transition: opacity 0.2s ease;
}

.thumb-card:hover .thumb-card-inner::before {
  opacity: 1;
}

/* CTA赤ボタン
------------------------------ */
.red-fomz {
  padding-bottom: unset;
}
.red-fomz a {
  margin: 0 auto;
}

/* スマホ向け微調整 */
@media (max-width: 640px) {
  .subsection {
    padding: 40px 0 32px;
  }
  .subsection-title {
    font-size: 1.25rem;
  }
}

/*
==========================================

詳細情報の送ってくださいセクション

==========================================
*/
.wave-section {
  margin: 3em auto 0;
  position: relative;
  background: #76b963;
  padding: 6em 0 3em;
  overflow: hidden;
  z-index: 1;
  padding-bottom: unset;
}
/* 上の波になっているところ */
.wave-top {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 100px;
  z-index: 0;
}

.wave-section .content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  padding: 1em 0 3em;
  margin: auto;
  text-align: center;
}

/* 詳細な情報が判明するとスムーズです～ */
.wave-section .content .detail_text {
  padding: 1em 1.5em;
  font-weight: bold;
  font-size: clamp(18px, 1.8vw, 20px);
}
/* 白枠内 */
/* //////////////////////////////////////// */
.wave_wap {
  width: 100%;
  overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 2em;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 10px;
}
.wave_wap img {
  display: block;
  max-width: 250px;
  flex: 1.5;
  margin: auto;
}
/* 詳細情報の項目と記入例 */
/* //////////////////////////////////////// */
.wave_wap .info-table {
  width: 90%;
  margin: auto;
  border-collapse: collapse;
}
.wave_wap .info-table th,
.wave_wap .info-table td {
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--border_gray, #d9d9d9);
  text-align: left;
  white-space: normal; /* ← 折返しを許可 */
  word-break: break-word; /* ← 長語対策 */
  overflow-wrap: anywhere; /* ← さらに保険 */
  box-sizing: border-box;
}

/* wave内の対応エリアアコーディオン */
/* //////////////////////////////////////// */
#wave_area_aco {
  padding: 3em 0 0;
  background: #76b963;
}
.area_wave {
  padding-bottom: 3em;
}

#wave_area_aco h2 {
  position: relative;
  overflow: hidden;
  background-color: var(--main_orang);
  width: calc(100% - 40px);
  max-width: 650px;
  margin: 0 auto 2em;
  box-sizing: border-box;
  font-size: clamp(16px, 1.8vw, 18px);
  text-align: center;
  padding: 1.5rem 2rem 1.5rem 70px;
  border-radius: 100vh;
  box-shadow: 4px 6px 0px 0px rgb(185, 90, 0);
}

#wave_area_aco h2 i {
  font-size: 25px;
  font-size: 2.5rem;
  line-height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  left: 25px;
  display: block;
  width: 50px;
  color: red;
}

.wave_aco {
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
}

.wave_aco:not([open]) {
  margin-bottom: 7px;
}

.wave_aco summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  background-color: #157f00;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.wave_aco summary::-webkit-details-marker {
  display: none;
}

.wave_aco summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  content: "";
  transition: transform 0.3s;
}

.wave_aco[open] summary::after {
  transform: rotate(225deg);
}

/* アコーディオン中身 */
/* //////////////////////////////////////// */
.area_link {
  background-color: #fff;
  padding: 2em;
  margin-bottom: 0.5em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: left;
}
.area_link a {
  display: block;
  text-align: left;
  padding-right: 1em;
  line-height: 2;
}
.area_link a:hover {
  text-decoration: underline;
}
.area_text {
  text-align: left;
  background-color: #fff;
  padding: 2em;
}
.area_text a {
  display: block;
  padding: 1em 0 2em;
}

@media only screen and (max-width: 768px) {
  .wave-section {
    padding: 4em 0 0;
  }
  .wave-section .content {
    padding: 1em 1em 2em 1em;
  }
  .wave_wap {
    padding: 0 1em 0.5em;
  }

  .wave_wap img {
    max-width: 35%;
  }

  /* 詳細情報の項目と記入例 */
  .wave_wap .info-table {
    /* ← テーブルは100%でOK */
    width: 100%;
    border-collapse: separate; /* collapseをやめる */
    border-spacing: 0;
    padding: 0; /* ここは0でOK */
    table-layout: fixed; /* ← 幅計算を安定化 */
  }
  .wave_wap .info-table thead {
    display: none;
  }

  /* ↓↓↓ 重複・競合していた .info-table tr を一本化（左右マージンを外す） */
  .wave_wap .info-table tr {
    display: block;
    width: 100%; /* ← 100%で収める */
    margin: 0 0 1.2em; /* ← 左右マージンなし（はみ出し防止） */
    padding: 12px;
    border: 1px solid var(--border_gray, #d9d9d9);
    border-radius: 12px;
    box-sizing: border-box;
    background: #fff;
  }

  .wave_wap .info-table td {
    display: block;
    border: none;
    padding: 0; /* いったんリセット */
  }

  /* 小ラベル（項目 / 記入例） */
  .wave_wap .info-table td::before {
    content: attr(data-label);
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2c3e50;
    background: #eef4ea; /* うっすら色を変えると塊が分離 */
    border: 1px solid #d7e3d1;
    padding: 0.2em 0.6em;
    margin: 0 1em 0.35em 0;
    border-radius: 999px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
  }

  /* 内容テキスト（読みやすく大きめ & 余白） */
  .wave_wap .info-table td:nth-of-type(1) {
    margin-bottom: 10px;
  }
  .wave_wap .info-table td + td {
    padding-top: 10px;
    border-top: 1px dashed var(--border_gray, #d9d9d9); /* 項目と記入例を上下で分割 */
  }
  .wave_wap .info-table td {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
  }
}

/* ////////////////////////////////

フローチャート

//////////////////////////////// */
/*------------------------------------------

	 フローチャート(工事の流れページ)

------------------------------------------*/
ul.stepflow {
  border: none;
  margin: 2em 0.5em 3em;
  padding: 0;
  list-style: none;
}
ul.stepflow > li:before,
ol.stepflow > li:before {
  background-color: #4dd0e1 !important; /*#6283c2;/*cccccc*/
}
.stepflow li {
  position: relative;
  padding: 0 0 1.5em 1.8em;
}
.stepflow > li:before {
  content: "";
  width: 3px;
  background: #4dd0e1; /*#6283c2;/*cccccc;*/
  display: block;
  position: absolute;
  top: 28px;
  bottom: 0;
  left: 5px;
}
.stepflow-white {
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 3px #4dd0e1; /*#0168b3;/*#232F3E;*/
}
.stepflow-black {
  content: "";
  display: inline-block;
  position: absolute;
  top: 5px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: solid 3px #4dd0e1; /*#0168b3;/*232F3E;*/
  background-color: #4dd0e1; /*#0168b3;/*232F3E;*/
}
.stepflow_label {
  padding: 3px 0px 8px 0px;
  margin-bottom: 8px;
  color: #999999;
  font-weight: bold;
}
.stepflow_title {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.5;
  margin-bottom: 15px;
}
.stepflow_content {
  line-height: 1.5;
  margin-top: 0.5em;
  padding: 0 0 1.5em;
  border-bottom: dashed 1px #cccccc;
}

@media only screen and (max-width: 768x) {
  #content .breadcrumb {
    font-size: 11px;
    padding: 0.5em 0.5em 0.3em 0;
  }

  #content .breadcrumb ul {
    padding-left: unset;
  }
  #content .breadcrumb li {
    padding-right: calc(10px + 8px);
    margin-right: unset;
  }
}

#main_right .fff_box {
  background-color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2em;
}

/* *********************************** */

/* よく使うシンプルアコーディオン */
/* グレーのボーダーボトム */

/* *********************************** */

.aco_border_bottom {
  margin-bottom: 7px;
  border-bottom: 1px solid #d0d0d0;
}

.aco_border_bottom summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}

.aco_border_bottom summary::-webkit-details-marker {
  display: none;
}

.aco_border_bottom summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #333333b3;
  border-right: 3px solid #333333b3;
  content: "";
  transition: transform 0.3s;
}

.aco_border_bottom[open] summary::after {
  transform: rotate(225deg);
}

.aco_border_bottom[open] p {
  transform: none;
  opacity: 1;
}

/* ///////////////////////////////////

施工事例セクション
（各工事ページ共通）

-----構成-----
section id="sekourei"
↓
div class="fff_container"
↓
h2
↓
div class="fff_box list"
↓
div class="sekou_title_h3"
↓
h3（工事名）
↓
div class="list-img"
↓
img
↓
div class="tag_wap"
↓
p
---------------

/////////////////////////////////// */

/* ------------------------------
------------------------------

レイアウト用css

※頭が「l-」から始まるで統一する

------------------------------
------------------------------ */
.l-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1em;
}

.l-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1em;
}
.l-grid-4col {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1em;
}

.l-grid-2col .card,
.l-grid-3col .card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border_gray);
  padding: 1em;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  height: 100%;
}

.card h3 {
  font-size: 18px;
}
.card p {
  font-size: 17px;
}
@media screen and (max-width: 768px) {
  .l-grid-2col,
  .l-grid-3col {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .l-grid-4col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}