@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==================================================== */
/* 【UI】文字の太さ */

.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-900 { font-weight: 900 !important; }

/* ==================================================== */
/* 【UI】スクロールアニメーション                         */
/* JS が cani-ready を付与してから初期状態を隠す           */
/* → エディタ内では非表示にならない                       */

.cani-fade-up.cani-ready,
.cani-fade-up-slow.cani-ready,
.cani-fade-up-fast.cani-ready {
  opacity: 0;
  transform: translateY(30px);
}

.cani-fade-up.cani-ready {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.cani-fade-up-slow.cani-ready {
  transition: opacity 1.0s ease, transform 1.0s ease;
}
.cani-fade-up-fast.cani-ready {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* 遅延 */
.cani-d1.cani-ready { transition-delay: 0.2s; }
.cani-d2.cani-ready { transition-delay: 0.4s; }
.cani-d3.cani-ready { transition-delay: 0.6s; }
.cani-d4.cani-ready { transition-delay: 0.8s; }
.cani-d5.cani-ready { transition-delay: 1.0s; }

/* アニメーション発火後 */
.cani-fade-up.cani-ready.is-animated,
.cani-fade-up-slow.cani-ready.is-animated,
.cani-fade-up-fast.cani-ready.is-animated {
  opacity: 1;
  transform: translateY(0);
}

/* ==================================================== */
/* 【UI】テキスト背景グラデーション                        */

.text-bg-grad {
  padding: 0.2em 0.5em;
}

/* ==================================================== */
/* 【UI】下線                                              */

.custom-underline {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}


/* ===================================
   KABUKI防災 LP styles
   =================================== */

/* ===== 追従CTA ===== */
#kb-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  width: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#kb-sticky-cta.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(30px);
}
.kb-sticky-cta__link {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff !important;
  text-decoration: none !important;
  padding: 14px 8px;
  font-size: 16px;
  font-weight: bold;
  line-height: 1.2;
  transition: opacity 0.2s;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
}
.kb-sticky-cta__link:hover {
  opacity: 0.9;
  color: #fff !important;
}
.kb-sticky-cta__link--line {
  background: #06C755;
}
.kb-sticky-cta__link--tel {
  background: #EF603D;
}
.kb-sticky-cta__icon {
  fill: currentColor;
  flex-shrink: 0;
}

/* フロントページの「上に戻る」ボタンを非表示（追従CTAと干渉するため） */
.home #pagetop {
  display: none !important;
}

/* フッターメニューの縦線を削除 */
.l-footer__nav a,
.l-footer__nav li:first-child a {
  border: none !important;
}

/* ===== SPハンバーガーメニュー（KABUKI防災カスタム） ===== */
/* メニューパネル背景 → 黄色 */
.p-spMenu__inner {
  background: #f8eb77 !important;
}
.p-spMenu__inner::before {
  background: #f8eb77 !important;
  opacity: 1 !important;
}
/* オーバーレイ（メニュー外の暗幕） */
.p-spMenu__overlay {
  background: rgba(0,0,0,0.5) !important;
}
/* メニュー項目 */
.p-spMenu .menu-item a {
  color: #1a1a1a !important;
  font-weight: bold;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: color 0.2s, background 0.2s;
}
.p-spMenu .menu-item a:hover,
.p-spMenu .menu-item.-current > a {
  color: #EF603D !important;
  background: rgba(255,255,255,0.4);
}
/* 閉じるボタンの色 */
.p-spMenu__closeBtn .c-iconBtn {
  color: #1a1a1a !important;
}
/* メニューパネルのSWELLウィジェットエリア余白調整 */
.p-spMenu__nav {
  padding-top: 8px;
}

/* トップページのコンテンツ上余白を削除 */
.home #content,
.page-id-22 #content {
  padding-top: 0 !important;
}
.home .l-mainContent,
.page-id-22 .l-mainContent {
  padding-top: 0;
}
.home .post_content,
.page-id-22 .post_content {
  margin-top: 0 !important;
}
.home .post_content > *:first-child,
.page-id-22 .post_content > *:first-child {
  margin-top: 0 !important;
}
/* フッター直前の余白を削除 */
.home .l-content,
.page-id-22 .l-content {
  margin-bottom: 0 !important;
}

:root {
  --kb-yellow: #f8eb77;
  --kb-yellow-light: #fffdea;
  --kb-yellow-card: #fff8b8;
  --kb-yellow-border: #e1cb00;
  --kb-orange: #ef603d;
  --kb-orange-grad-from: #ff633c;
  --kb-orange-grad-to: #d72b00;
  --kb-text: #1a1a1a;
  --kb-red: #dd2f04;
}

/* セクション h2 タイトル統一 */
.kb-fv h2,
.kb-worry h2,
.kb-menu h2,
.kb-reason h2,
.kb-flow h2,
.kb-faq h2,
.kb-column h2,
.kb-contact h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 1.5em;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .kb-fv h2,
  .kb-worry h2,
  .kb-menu h2,
  .kb-reason h2,
  .kb-flow h2,
  .kb-faq h2,
  .kb-column h2,
  .kb-contact h2 { font-size: 32px; }
}

/* ===== FV ===== */
.kb-fv .wp-block-image:first-of-type {
  margin-top: 0 !important;
}
.kb-fv__area {
  background: #2e2e2e;
  color: #fff !important;
  font-size: 16px;
  padding: 6px 24px;
  border-radius: 5px;
  width: fit-content;
  margin-left: auto !important;
  margin-right: auto !important;
}
.kb-fv__catch {
  font-size: 28px !important;
}
.kb-fv__lead {
  font-size: 16px;
}
.kb-fv__note {
  font-size: 14px;
}
@media (min-width: 768px) {
  .kb-fv__catch { font-size: 36px !important; }
}

/* ===== お悩み ===== */
.kb-worry__list {
  max-width: 480px;
  margin: 1.5em auto !important;
}
.kb-worry__list li {
  background: #fff;
  border: 1px solid var(--kb-text);
  border-radius: 5px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 16px;
}
.kb-worry__arrow {
  margin: 24px 0 !important;
  font-size: 0;
  text-align: center;
  line-height: 0;
}
.kb-worry__arrow::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 36px solid transparent;
  border-right: 36px solid transparent;
  border-top: 33px solid #FF8E72;
}
.kb-worry__catch {
  font-size: 22px !important;
  font-weight: bold;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .kb-worry__catch { font-size: 28px !important; }
}

/* ===== 施工メニュー ===== */
.kb-menu__item {
  background: #fff !important;
  border-radius: 15px !important;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.25) !important;
  overflow: hidden;
  margin-bottom: 24px !important;
}
.kb-menu__item-head {
  background: var(--kb-yellow-card) !important;
  padding: 16px !important;
  text-align: center;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kb-menu__item-head .wp-block-image {
  margin: 0 !important;
}
.kb-menu__item-head img {
  max-width: 240px;
  max-height: 220px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}
.kb-menu__item-body {
  padding: 24px !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* PCで2カラム時に高さを揃える */
.kb-menu .wp-block-column {
  display: flex;
  flex-direction: column;
}
.kb-menu__item {
  flex: 1;
  display: flex;
  flex-direction: column;
}
/* 価格をカード下端に揃える */
.kb-menu__item-price {
  margin-top: auto !important;
}
.kb-menu__item-title {
  font-size: 20px !important;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px !important;
}
.kb-menu__item-price {
  color: var(--kb-red) !important;
  font-size: 20px !important;
  font-weight: bold;
}
.kb-menu__note {
  margin-top: 32px !important;
  font-size: 16px;
  line-height: 1.7;
}
@media (max-width: 767px) {
  .kb-menu__note.has-text-align-center {
    text-align: left !important;
  }
}

/* ===== 3つの理由 ===== */
.kb-reason__item {
  background: #fff !important;
  border-radius: 15px !important;
  padding: 32px 24px !important;
  margin-bottom: 24px !important;
  display: flex;
  flex-direction: column;
}
.kb-reason__item-title {
  font-size: 20px !important;
  font-weight: bold;
  margin-bottom: 16px !important;
  text-align: center;
  line-height: 1.5;
}
.kb-reason__item-img {
  margin: 0 auto 16px !important;
}
.kb-reason__item-img img {
  max-width: 260px;
  max-height: 220px;
  height: auto;
  width: auto;
  object-fit: contain;
}
/* 円マークアイコンだけ小さく */
.kb-reason__item-img img.wp-image-21 {
  max-width: 140px;
  max-height: 140px;
}
/* PC時：高さを揃える */
@media (min-width: 768px) {
  .kb-reason__item-title {
    min-height: 3em;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .kb-reason__item-img {
    min-height: 240px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}
.kb-reason__item-desc {
  font-size: 16px;
  line-height: 1.7;
  margin: 0 !important;
}
/* PCで3カラム時に高さを揃える */
.kb-reason .wp-block-column {
  display: flex;
  flex-direction: column;
}
.kb-reason__item {
  flex: 1;
}

/* ===== FAQ ===== */
.kb-faq .swell-block-faq__item {
  background: #fff !important;
  border: 1px solid #dadada !important;
  border-radius: 15px !important;
  padding: 8px 16px !important;
  margin-bottom: 16px !important;
}
.kb-faq .swell-block-faq__item + .swell-block-faq__item {
  border-top: 1px solid #dadada !important;
  padding-top: 8px !important;
}
.kb-faq .swell-block-faq .faq_q {
  background-color: transparent !important;
  border-bottom: none !important;
  font-weight: bold;
  color: var(--kb-text);
  padding: 16px 8px 16px 56px !important;
}
.kb-faq .swell-block-faq .faq_q::before {
  background-color: #f8eb77 !important;
  color: var(--kb-text) !important;
  box-shadow: none !important;
  font-weight: bold;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  top: 14px !important;
  left: 8px !important;
}
.kb-faq .swell-block-faq .faq_a {
  padding: 0 8px 16px 56px !important;
  line-height: 1.7;
}
.kb-faq .swell-block-faq .faq_a::before {
  background-color: #fff8b8 !important;
  color: var(--kb-text) !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  top: 0 !important;
  left: 8px !important;
}

/* ===== ボタン ===== */
.kb-fv__cta {
  max-width: 343px;
  margin-left: auto !important;
  margin-right: auto !important;
  --the-btn-color: #EF603D;
  --the-btn-color2: #EF603D;
}
.kb-fv__cta .swell-block-button__link {
  background: #EF603D !important;
  background-color: #EF603D !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* お問い合わせCTAは幅を広く */
.kb-contact .kb-fv__cta {
  max-width: 600px;
}
.kb-contact .kb-fv__cta .swell-block-button__link {
  width: 100%;
}

/* ===== LINE CTA ===== */
.kb-line-cta {
  max-width: 343px;
  margin-left: auto !important;
  margin-right: auto !important;
  --the-btn-color: #06C755;
  --the-btn-color2: #06C755;
}
.kb-line-cta .swell-block-button__link {
  background: #06C755 !important;
  background-color: #06C755 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
/* お問い合わせのLINE CTAは幅を広く（電話CTAと統一） */
.kb-contact .kb-line-cta {
  max-width: 600px;
}
.kb-contact .kb-line-cta .swell-block-button__link {
  width: 100%;
}
.kb-contact__copyright {
  margin-top: 32px !important;
  color: var(--kb-text);
}

/* SP/PCで列レイアウト */
@media (max-width: 767px) {
  .kb-menu .wp-block-columns,
  .kb-reason .wp-block-columns {
    flex-direction: column;
  }
  .kb-menu .wp-block-column,
  .kb-reason .wp-block-column {
    flex-basis: 100% !important;
  }
}