@import url(common.css);

#content .first_block {
  background-image: url(../parts/saigai/saigai_top.jpg);
  background-position: center;
}

section .iframe-center {
  margin: 3em auto 3em;
}
.slide-indicator {
  width: calc(50% - 4px);
}

/* #tab-1＝感震ブレーカー */

/* #tab-2＝避雷器 */

.earthquake_section,
.thunder_section {
  width: calc(100% - 40px);
  max-width: 820px;
  margin: 2em auto 0;
  box-sizing: border-box;
}
.earthquake_section .ban_article_block .purpose_h2,
.thunder_section .ban_article_block .purpose_h2 {
  max-width: 500px;
  text-align: center;
  margin-bottom: 1em;
}

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

感震ブレーカ

//////////////////////////////// */
.earthquake_section .purpose_h2 {
  background-color: #fff7ed;
  color: #b45309;
  max-width: 200px;
  text-align: center;
  border-radius: 999px;
  padding: 0.5em;
}

/*--------------------------------
簡単な説明とイラストブロック
-------------------------------- */
.intro_text_block {
  width: calc(100% - 0px);
  max-width: 820px;
  margin: 0 auto;
  padding: 2em 0 1.5em;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 1em;
}
/* テキスト（左側）
-------------------------------- */
.intro_text {
  flex: 2;
}
.intro_text h3 {
  padding-bottom: 1em;
}
.intro_text p span {
  font-size: clamp(22px, 3.52vw, 25px);
  font-weight: 700;
  padding: 0 0.2em;
  background: linear-gradient(transparent 60%, #fff6a2 50%);
}
/* イラスト（右側）
-------------------------------- */
.intro_text_block img {
  display: block;
  width: clamp(150px, 35.6vw, 200px);
  height: auto;
}

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

工事価格ブロック

-------------------------------- */
.item_block {
  width: calc(100% - 0px);
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5em 2em 1.5em;
  box-sizing: border-box;
  /* box-shadow: 0 0 5px #ebcda9;
  background-color: #fff7ed; */
  border: 2px solid #ebcda9;
}

.item_block h2 {
  font-size: clamp(18px, 3.52vw, 22px);
}

.item_block h2 span {
  max-width: 220px;
  background-color: #a2dcff;
  border: 1px solid #57a9db;
  color: #004f8f;
  padding: 0.1em 0.5em;
  margin-left: 1em;
  font-size: clamp(13px, 3.52vw, 15px);
}
.item_block .u-flex {
  justify-content: left;
  gap: 2em;
}
/* ブレーカー製品画像（左側）
-------------------------------- */
.item_block .u-flex img {
  display: block;
  width: clamp(200px, 35.6vw, 250px);
  height: auto;
}

/* 価格ブロック（右側）
-------------------------------- */
.price-block {
  display: flex;
  flex-direction: column;
  gap: 2em;
}
.item_block .price-wap {
  border: 1px solid #d5b284;
  padding: 1em 1.5em;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  gap: 1em;
  background-color: #fff;
}
.price-block .u-grid-2col {
  align-items: center;
}
.price-block .u-grid-2col h3 {
  font-size: clamp(16px, 3.52vw, 18px);
}
.item_block .notice_list {
  background-color: #ffe7d2;
  padding: 0.5em 1em;
  margin-top: 1.5em;
}
.item_block .notice_list li {
  color: #b45309;
}

/* --------------------------------
よくある追加費用
-------------------------------- */
.option_block {
  padding: 1.5em 0;
}
.option_block h2 {
  font-size: clamp(16px, 3.52vw, 18px);
}
/*アコーディオンの中身
-------------------------------- */
.option_block .u-grid-2col {
  padding: 1em;
  margin: 0.5em auto;
}
.ban_aco_card {
  display: flex;
  flex-direction: column;
  gap: 1em;
  background-color: #fff;
  padding: 1em;
}
.ban_aco_card .price-wap {
  flex-grow: 1;
}
.ban_aco_card h3 {
  font-size: clamp(16px, 3.52vw, 18px);
}
.ban_aco_card p {
  font-size: clamp(14px, 3.52vw, 16px);
}

/* 分電盤交換工事　同時工事　価格目安
-------------------------------- */
.ban_article_block {
  padding: 3em 0;
}

.thunder_section .ban_article_block .purpose_h2 {
  max-width: 500px;
  text-align: center;
  margin-bottom: 1em;
}
.ban_article_block article {
  padding: 1em 1em 2em;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.ban_article_block article img {
  display: block;
  width: clamp(200px, 35.6vw, 320px);
  height: auto;
  margin: 0 auto 0.5em;
}
.article_intro_block h3 {
  font-size: clamp(16px, 3.52vw, 18px);
  padding-bottom: 0.5em;
}
.article_intro_block p {
  font-size: clamp(15px, 3.52vw, 16px);
}
.item_block .large,
.ban_article_block .large {
  font-weight: 600;
}

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


かみなり・避雷器セクション
（.thunder_section）

-------------------------------- */
.thunder_section .item_block {
  border: 2px solid #f0e595;
}

.thunder_section .purpose_h2 {
  background-color: #faf3bb;
  color: #c5a039;
  max-width: 200px;
  text-align: center;
  border-radius: 999px;
  padding: 0.5em;
}
.thunder_section .item_block .price-wap {
  border: 1px solid #ddd178;
}
.thunder_section .item_block .notice_list {
  background-color: #faf3bb;
}
.thunder_section .item_block .notice_list li {
  color: #c5a039;
}

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

どっちも付けられますセクション
（.double_breaker_section）

-------------------------------- */
.double_breaker_section {
  margin: 8em auto 3em;
  padding: 4em 2em;
  background-color: #004f8f;
}
.double_breaker_section h2 {
  color: #fff;
  text-align: center;
  padding-bottom: 1em;
}
.double_breaker_section h2 span {
  background-color: #fff;
  color: #004f8f;
  padding: 0.4em 0.7em;
  margin: 0 0.2em;
}
.double_block img {
  display: block;
  width: clamp(300px, 35.6vw, 700px);
  height: auto;
  margin: auto;
}