/* ============================================================
   汎用ユーティリティクラス集
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Shippori+Mincho&display=swap');

.font-serif { font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif; }

.font-sans { font-family: "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "YuGothic", "Meiryo", sans-serif; }

.font-shippori { font-family: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif; }


:root {
  --orig-body-color: #2B2B2B;
  --orig-body-bg: #ffffff;
  --orig-primary: #D1C2AB;
  --orig-secondary: #D1D1D1;
  --orig-primary-bg: #FAF9F6;
  --orig-accent: #3F3937;
  --orig-marker: #D1C2AB;
  --orig-cta: #E8A752;
  --orig-marker-yellow: #E8E29A;

  --orig-orange: #E8A752;
}

body {
  color: var(--orig-body-color) !important;
  background-color: var(--orig-body-bg) !important;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif !important;
}


/* ------------------------------------------------------------
   文字色
   ------------------------------------------------------------ */
.text-red {
  color: var(--orig-cta) !important;
}

.text-A8443A {
  color: #A8443A;
}

.text-2E4A6B {
 color: #2E4A6B;
}

.text-orange {
  color: var(--orig-orange);
}

.text-beige {
  color: #B89D73 !important;
}


/* ------------------------------------------------------------
   背景色
   ------------------------------------------------------------ */
.bg-red {
  background-color: var(--orig-cta) !important;
}

.bg-beige {
  background-color: var(--orig-primary) !important;
}

.bg-lightgray {
  background-color: #F3EFEB !important;
}

.bg-gray {
  background-color: var(--orig-secondary) !important;
}

.bg-light-beige {
  background-color: #FAF9F6;
}

/* ------------------------------------------------------------
   ボーダー
   ------------------------------------------------------------ */

.border-orange {
  border-color: var(--orig-cta) !important;
}

.border-dotted {
  border-style: dotted !important;
}

.border-beige {
  border-color: var(--orig-primary) !important;
}

/* ------------------------------------------------------------
   フォントサイズ (可変フォントサイズ / clamp)
   ------------------------------------------------------------ */
.fs-110per {
  font-size: 110%;
}

.fs-120per {
  font-size: 120%;
}

.fs-66 {
  font-size: clamp(20.00px, calc(4.55vw + 5.45px), 60.00px);
}

.fs-60 {
  font-size: clamp(20.00px, calc(4.55vw + 5.45px), 60.00px);
}

.fs-50 {
  font-size: clamp(20.00px, calc(3.41vw + 9.09px), 50.00px);
}

.fs-40 {
  font-size: clamp(20.00px, calc(2.27vw + 12.73px), 40.00px);
}

.fs-36 {
  font-size: clamp(20.00px, calc(1.82vw + 14.18px), 36.00px);
}

.fs-30 {
  font-size: clamp(20.00px, calc(1.14vw + 16.36px), 30.00px);
}

.fs-26 {
  font-size: clamp(16.00px, calc(1.14vw + 12.36px), 26.00px);
}

.fs-24 {
  font-size: clamp(16.00px, calc(0.91vw + 13.09px), 24.00px) !important;
}

.fs-20 {
  font-size: clamp(16.00px, calc(0.45vw + 14.55px), 20.00px);
}

.fs-18 {
  font-size: clamp(14.00px, calc(0.45vw + 12.55px), 18.00px);
}

.fs-16 {
  font-size: clamp(14.00px, calc(0.23vw + 13.27px), 16.00px);
}

.fs-14 {
  font-size: 14px;
}

.fs-100 {
  font-size: clamp(1.8750rem, 0.8131rem + 4.5307vw, 6.2500rem);
}


/* ------------------------------------------------------------
   行間 (line-height)
   ------------------------------------------------------------ */
.lh-120 {
  line-height: 120% !important;
}

.lh-140 {
  line-height: 140% !important;
}

.lh-160 {
  line-height: 160% !important;
}


/* ------------------------------------------------------------
   余白 (padding)
   ------------------------------------------------------------ */
.pt-6 {
  padding-top: clamp(1.50rem, calc(4.50vw + 0.60rem), 6.00rem) !important;
}

.py-6 {
  padding-top: clamp(1.50rem, calc(4.50vw + 0.60rem), 6.00rem);
  padding-bottom: clamp(1.50rem, calc(4.50vw + 0.60rem), 6.00rem);
}

.py-7 {
  padding-top: clamp(1.50rem, calc(5.50vw + 0.40rem), 7.00rem) !important;
  padding-bottom: clamp(1.50rem, calc(5.50vw + 0.40rem), 7.00rem) !important;
}

.pt-7 {
    padding-top: clamp(1.50rem, calc(5.50vw + 0.40rem), 7.00rem) !important;
}

.pb-7 {
    padding-bottom: clamp(1.50rem, calc(5.50vw + 0.40rem), 7.00rem) !important;
}

@media screen and (min-width: 576px) {
  .py-sm-7 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }

  .pt-sm-7 {
    padding-top: 7rem !important;
  }

  .pb-sm-7 {
    padding-bottom: 7rem !important;
  }
}

@media screen and (min-width: 992px) {
  .py-lg-7 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
  }

  .py-lg-6 {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
  }

  .pt-lg-5 {
    padding-top: 5rem !important;
  }

  .pt-lg-6 {
    padding-top: 6rem !important;
  }

  .pb-lg-6 {
    padding-bottom: 6rem !important;
  }

  .p-lg-5rem {
    padding: 5rem !important;
  }

  .p-lg-6 {
    padding: 6rem !important;
  }

  .p-lg-7 {
    padding: 7rem !important;
  }

  .pt-lg-7 {
    padding-top: 7rem !important;
  }
}


/* ------------------------------------------------------------
   背景 / ホバー / マーカー装飾
   ------------------------------------------------------------ */

/* 白半透明の背景 (80%) */
.bg-white-alpha80 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.bg-white-alpha90 {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* ホバー時に明るくする */
.hover-80:hover {
  filter: brightness(1.5);
  filter: saturate(150%);
  transition: all 0.3s ease-in-out;
}

/* 蛍光マーカー風の下線 (黄色) */
.marker-yellow {
  background: linear-gradient(transparent 80%, var(--orig-marker-yellow) 20%);
  word-break: break-all;
  overflow-wrap: break-word;
}

/* 蛍光マーカー風の下線 (beige) */
.marker-beige {
  background: linear-gradient(transparent 70%, #F8E5CC 30%);
  word-break: break-all;
  overflow-wrap: break-word;
}

/* 蛍光マーカー風の下線 (beige) */
.marker-beige-dark {
  background: linear-gradient(transparent 70%, #E8E0D5 30%);
  word-break: break-all;
  overflow-wrap: break-word;
}






/* ------------------------------------------------------------
   矢印 / 吹き出し
   ------------------------------------------------------------ */

/* 右向き矢印 (山型) */
.arrow-right {
  position: relative;
}

.arrow-right::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  transform: translateY(-50%) rotate(45deg);
}

/* 吹き出しの下向き三角(しっぽ) */
.fukidashi_under {
  position: relative;
}

.fukidashi_under::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  height: 10px;
  width: 10px;
  background-color: var(--orig-accent);
}

/* ------------------------------------------------------------
   ボタン
   ------------------------------------------------------------ */
.btn-common {
  transition: all 0.3s ease-in-out;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 0.9rem 1rem 0.9rem 0.5rem;
  border-radius: 100px;
  font-weight: bold;
  line-height: 1.4;
  position: relative;
  color: #fff;
  font-size: clamp(14.00px, calc(0.23vw + 13.27px), 16.00px);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif;
}

.btn-common:hover {
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
}

.btn-common:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  display: block;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(-45deg);
}

.btn-common:hover:after {
  right:0.9rem;
  transition: all 0.3s ease-in-out;
}

.btn-primary {
  background-color: var(--orig-cta);
}

.btn-primary::after {
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.btn-secondary {
  background: #fff;
  border: 1px solid var(--orig-cta);
  color: var(--orig-cta);
}

.btn-secondary::after {
  border-right: 2px solid var(--orig-cta);
  border-bottom: 2px solid var(--orig-cta);
}

.ls-5 {
  letter-spacing: -2px;
  margin-left: -2px;
}

.ls-10 {
  letter-spacing: -5px;
  margin-left: -5px;
}

/* ------------------------------------------------------------
   ナカグロ用letter spacing
   ------------------------------------------------------------ */

@media screen and (min-width: 591px) {
  .ls-5 {
    letter-spacing: -5px;
    margin-left: -5px;
  }

  .ls-10 {
    letter-spacing: -10px;
    margin-left: -10px;
  }
}


/* ------------------------------------------------------------
   横スクロール / 幅指定 (レスポンシブ)
   ------------------------------------------------------------ */
@media screen and (max-width: 1100px) {
  .overflow-x-1100-scroll {
    overflow-x: auto;
  }

  .width-min-920 {
    width: 920px !important;
  }

  .width-min-1100 {
    width: 1100px !important;
  }

  .width-800-1100 {
    width: 1100px;
  }
}

@media screen and (min-width: 591px) and (max-width: 768px) {
  .width-600-768-1100 {
    width: 768px !important;
  }
}

@media screen and (max-width: 590px) {
  .width-600-768-1100 {
    width: 550px !important;
  }

  .width-800-1100 {
    width: 800px !important;
  }
}



/* =====================================================
   ファーストビュー (FV)
===================================================== */

/* テキストが収まるよう可変の高さに変更 (base.css/style.cssの固定heightを上書き) */
.bg-fv {
  background: none !important;
  height: auto !important;
}

/* @media screen and (min-width: 992px) {
  .bg-fv {
    background-size: auto;
    background-position: center right;
  }  
} */

:root {
  --fv-text-width: clamp(500.00px, calc(14.01vw + 361.03px), 630.00px);
}

@media screen and (min-width: 992px) {
  .fv-text-box {
    width: var( --fv-text-width) !important;
  }

  .fv-image-box {
    width: calc(100% - var( --fv-text-width));
  }
  .fv-img {
    width: 100%;
    height: 600px;
    overflow: hidden;
  }

  .fv-img-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fv-text-wrap {
    width: 500px;
  }
}

@media screen and (max-width: 991px) {
  .fv-img-img {
    width: 100%;
    height: auto;
  }
}



.fv-lead,
.fv-title {
  letter-spacing: 0.05em;
  /* text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); */
}

/* キャッチコピー下の区切り線 */
.fv-divider {
  width: 90%;
  max-width: 700px;
  border: none;
  border-top: solid 1px rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.text-shadow_black {
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
}

.fv-box {
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25) ;
}

/* CTAボタン(赤系の帯ボタン) */
.fv-cta-btn {
  background-color: var(--orig-cta);
  padding: 1.5rem 1rem;
  transition: opacity 0.3s ease-in-out;
}

.fv-cta-btn:hover {
  opacity: 0.85;
  transition: opacity 0.3s ease-in-out;
}

/* CTAボタン内の「3」を強調表示 */
.fv-cta-btn-num {
  font-size: 1.6em;
  padding: 0 0.05em;
  line-height: 1;
  vertical-align: bottom;
}



/* =====================================================
   header
===================================================== */


@media screen and (min-width: 992px) {

  #navbarNavDropdown {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .header-nav {
    background: #D1C2AB !important;
    font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif;
    
  }
  .header-nav .nav-link {
    /* color: #fff !important; */
    text-shadow: none !important;
    font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem) !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .header-nav.change-color {
    background: #D1C2AB !important;
  }


  /* .navbar-nav .nav-item:last-child  {
    background: var(--orig-cta) !important;
    color: #fff !important;
  } */

}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }
}

.navbar-collapse.show {
  background: none !important;
}


.btn-hamburger {
  background: var(--orig-cta) !important;
}


/* =====================================================
   footer
===================================================== */

#faq {
  background: var(--orig-secondary);
}


#articles {
  background: var(--orig-primary-bg);
}

#articles h2 {
  text-align: center;
  font-size: clamp(30.00px, calc(1.14vw + 26.36px), 50.00px) !important;
  color: var(--orig-body-color) !important;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif;
}

#articles a.btn{
  box-shadow: none !important;
  border: var(--orig-primary) 1px solid !important;
  color: var(--orig-primary) !important;
}

#site-contents h2 span.green {
  /* color: var(--orig-body-color) !important; */
  color: var(--orig-body-color) !important;
  line-height: 1.3;
  font-size: clamp(30.00px, calc(1.14vw + 26.36px), 50.00px) !important;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif;
}

#site-contents h3.border-green {
  border-bottom: 1px solid var(--orig-body-color) !important;
  text-align: center;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif;
}



/* ------------------------------------------------------------
   ファーストビュー内インデックス (t-fv-index)
   区切り線付きのナビゲーション (PC表示時のみ縦線を表示)
   ------------------------------------------------------------ */
@media screen and (min-width: 992px) {
  .t-fv-index {
    position: relative;
  }

  .t-fv-index li {
    flex: 1;
  }

  .t-fv-index::before,
  .t-fv-index::after,
  .t-fv-index-border::after {
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    background-color: var(--orig-primary);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .t-fv-index::before {
    left: 0;
  }

  .t-fv-index::after {
    right: 0;
  }

  .border-lg-0 {
    border: none !important;
  }

  .t-fv-index-border::after {
    right: 0;
  }
  .mt-m1 {
    margin-top: -1rem !important;
  }
}


/* =====================================================
   会社選び (こだわり別おすすめ住宅会社3選)
   ※section01用に作成。section04にコピーして使い回すため
   　クラス名にsection01を含めない汎用名にしている
===================================================== */

/* 見出し下の短い区切り線 */
.company-select-divider {
  width: clamp(100.00px, calc(16.56vw + 47.00px), 365.00px);
  border: none;
  border-top: solid 1px var(--orig-body-color);
  opacity: 1;
}

/* カード全体 */
.company-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #3F3937;
  overflow: hidden;
  background: #fff;
}

/* こだわりタグ(吹き出し風の帯) */
.company-card-tag {
  position: relative;
  border: 1px solid var(--orig-orange);
  padding: 1.5rem 0.5rem;
  text-align: center;
  color: var(--orig-orange);
  margin-bottom: 1rem;
  background: #fff;
}

/* タグ下の三角(下の会社名バーへつながる吹き出しの先) */
.company-card-tag::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: #fff;
  transform: translateX(-50%) rotate(45deg);
  border-right: 1px solid var(--orig-orange);
  border-bottom: 1px solid var(--orig-orange);
}

/* 会社名バー */
.company-card-name {
  background-color: var(--orig-accent);
  text-align: center;
  padding: 1.5rem 0.5rem;
  letter-spacing: 0.25rem;
}

/* サイトキャプチャ画像まわり */
.company-card-img {
  padding: 1.2rem 1.2rem 0;
}

.company-card-credit-link {
  color: var(--orig-body-color);
  text-decoration: underline;
}

/* カード本文(特徴・強み) */
.company-card-body {
  flex: 1;
  padding: 1rem 1.2rem 1.5rem;
}

/* 「特徴・強み」の帯(カード幅いっぱいに広げる) */
.company-card-features-ttl {
  background-color: #D1C2AB;
  margin: 0 -1.2rem 1rem;
  padding: 0.6rem 1rem;
  color: #fff;
}

.company-card-feature-text {
  color: #848181;
}

/* ボタンエリア */
.company-card-btns {
  padding: 0 1.2rem 1.5rem;
}

/* =====================================================
   02-01: 甲府市周辺の気候と住宅性能 (climate-*)
===================================================== */

.section02_01 {
  background: url(../img/section02_bg03.jpg) center center no-repeat;
  background-size: cover;
}

@supports (background-image: url(../img/section02_bg03.webp)) {
  .section02_01 {
    background-image: url(../img/section02_bg03.webp);
  }
}








/* =====================================================
   02-02: PICK UP! 断熱工法の違い (pickup-* / insulation-*)
===================================================== */
.pickup-card {
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
}


.pickup-card-badge {
  position: absolute;
  top: -1rem;
  left: 0;
  transform: translateY(-50%);
  background-color: #fff;
  color: var(--orig-cta);
  font-weight: bold;
  padding: 0.4rem 1.2rem;
  border-radius: 4px;
  font-size: clamp(14.00px, calc(0.45vw + 12.55px), 18.00px);
  box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.08);
}

.pickup_text {
  position: relative;

}

.pickup_text::after {
  content: "";
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background-color: var(--orig-cta);

}

.pickup-note {
  color: var(--orig-cta);
}

/* CTAボタンを中央寄せの固定幅に */
.pickup-cta {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

.insulation-card {
  border: 1px solid var(--orig-primary);
}


.insulation-card-ttl {
  background-color: var(--orig-primary);
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: clamp(18.00px, calc(1.14vw + 14.36px), 24.00px);
  padding: 0.8rem;
}

.insulation-card-img {
  padding: 1.5rem 1rem;
}

.insulation-card-sub {
  color: var(--orig-primary);
  font-weight: bold;
   font-size: clamp(16.00px, calc(0.91vw + 13.09px), 24.00px);
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif;
}

.insulation-card-sub::before {
  content: "●";
  margin-right: 0.5rem;
  margin-left: 1rem;
}


.insulation-card-list {
  list-style: none;
  padding: 0.8rem 1rem 1.2rem;
  margin: 0;
  font-size: clamp(12.00px, calc(0.23vw + 11.27px), 14.00px);
  line-height: 1.6;
}

@media screen and (min-width:992px) {
  .insulation-card-list {
    height: 140px;
  }  
}


.insulation-card-list li {
  position: relative;
  padding-left: 1em;
  margin-bottom: 0.4em;
}

.insulation-card-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}


/* =====================================================
   02-03: エヌハウス バナー (nhouse-banner-*)
===================================================== */

.pr_banner::before {
  width: 200px;
  height: 20px;
  clip-path: polygon(50% 20px, 0% 0%, 200px 0%);
  content:"";
  display: block;
  background: #D1C2AB !important;
  /* background: linear-gradient(0deg, #ff7e5f, #feb47b); */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5rem;
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  top: -40px;
}

@media screen and (min-width: 577px) {
  .pr_banner::before {
    top:-50px;
  }
}

@media screen and (min-width: 992px) {
  .pr_banner::before {
    clip-path: polygon(50% 40px, 0% 0%, 350px 0%);
    width: 350px;
    height: 40px;
    top:-80px;
  }
}

.pr_banner {
  border: 5px solid #003C89;
  background-image: url(../img/pr-img02.jpg);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: left top;
  position: relative;
  background-size: contain;
  padding-top: 5rem;
}

@supports (background-image: url(../img/pr-img02.webp)) {
  .pr_banner {
    background-image: url(../img/pr-img02.webp);
  }
}

@media screen and (min-width: 992px) {
  .pr_banner {
    background-size: 59% auto;
    padding-top: 0;
    
  }
  
}

.pr-text {
  background: #003C89;
  color: #fff;
  font-weight: bold;
  position: absolute;
  top:0;
  left:0;
  padding: 5px 20px;
}


@media screen and (max-width: 991px) {
  .pr-logo {
    background: rgba(255, 255, 255, 0.9);
    padding-top: clamp(0.50rem, calc(2.38vw + 0.02rem), 1.50rem);
    padding-bottom: clamp(0.50rem, calc(2.38vw + 0.02rem), 1.50rem);
    height: auto;
  }
}


.bg-blue {
  background: #003C89;
}

 .pr-img03 {
  margin-bottom: 1.5rem !important;
 }

@media screen and (min-width: 992px) {
  .pr-img03 {
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin-bottom: 0 !important;
  }
  .pr-img03 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.pr-guide {
  background: #D51719;
  color: #fff;
  padding: 0.5rem;
  position: relative;
  text-align: center;
}

@media screen and (min-width: 992px) {
  .pr-guide {
    padding-left: 25%;
  }
}


@media screen and (min-width: 992px) {
  .pr-img01 {
    position: absolute;
    bottom: 15px;
    left:15px;
    width: 400px;
  }
}



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

.nhouse-banner-arrow {
  width: 100%;
  max-width: 320px;
}

.nhouse-banner {
  border: 5px solid #44C0E8;
  overflow: hidden;
  background-image: url(../img/section02_bg02.png);
  background-size: cover;
  background-position: center;
}

@supports (background-image: url(../img/section02_bg02.webp)) {
  .nhouse-banner {
    background-image: url(../img/section02_bg02.webp);
  }
}

.nhouse-banner-pr {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #44C0E8;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 0.2rem 0.6rem;
}


.nhouse-banner-catch {
  font-size: clamp(20.00px, calc(3.41vw + 9.09px), 50.00px);
  text-align: center;
}

.nhouse-banner-catch-tag {
  background-color: var(--orig-cta);
  color: #fff;
  padding: 0em 0.2em;
}

.nhouse-banner-name-box {
  background-color: rgba(255, 255, 255, 0.85);
  border: 1px solid #BFE3F2;
  text-align: center;
  padding: 5px;
}

.nhouse-banner-name-box p {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  color: var(--orig-cta);
}

.nhouse-banner-checklist {
  list-style: none;
  background-color: rgba(255, 255, 255, 0.9);
  margin-bottom: 2rem;
  padding: 0.5rem;
}

@media screen and (min-width:591px) {
  .nhouse-banner-checklist {
    padding: 1rem 1.5rem;
  }
}

@media screen and (min-width:992px) {
  .nhouse-banner-checklist {
    padding: 1rem 0rem;
    margin-left: auto;
    margin-right: auto;
    display: inline-block;
  }
}

.nhouse-banner-checklist li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.5em;
  font-weight: bold;
  font-size: clamp(14.00px, calc(0.23vw + 13.27px), 16.00px);
}

.nhouse-banner-checklist li:last-child {
  margin-bottom: 0;
}

.nhouse-banner-checklist li::before {
  content: url(../img/icon_check.png);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 1.2em;
  height: 1.2em;
}

@supports (background-image: url(../img/icon_check.webp)) {
  .nhouse-banner-checklist li::before {
    content: url(../img/icon_check.webp);
  }
}

.nhouse-banner-checklist-note {
  font-weight: normal;
  color: #666;
  padding-left: 0;
  margin-top: 0.2em;
}

/* =====================================================
   03: ハウスメーカー・工務店選びで確認したい4つのポイント (point-card-*)
===================================================== */

/* #section03 {
  background-image: url(../img/bg_wave_top.png);
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}

@supports (background-image: url(../img/bg_wave_top.webp)) {
  #section03 {
    background-image: url(../img/bg_wave_top.webp);
  }
} */

.bg-beige-order {
  background: #F3EFEB !important;
}

.fill-beige {
  fill: #F3EFEB;
}

.fill-white {
  fill: #fff;
}

.point-card {
  border: 1px solid #ddd;
  padding-left: clamp(0.50rem, calc(1.00vw + 0.30rem), 1.50rem);
  padding-right: clamp(0.50rem, calc(1.00vw + 0.30rem), 1.50rem);
  padding-top: clamp(1.00rem, calc(1.00vw + 0.80rem), 2.00rem);
  padding-bottom: clamp(1.00rem, calc(1.00vw + 0.80rem), 2.00rem);
}


.point-card-num {
  font-size: clamp(20.00px, calc(3.75vw + 8.00px), 80.00px);
  color: var(--orig-primary);
  line-height: 1;
   font-family: "Times New Roman", "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "YuMincho", "MS PMincho", serif;
}

.point-card-ttl {
   font-size: clamp(14.00px, calc(0.75vw + 11.60px), 26.00px);
  line-height: 1.5;
  font-weight: bold;
}

.point-card-line {
  border: none;
  border-top: 1px solid #ccc;
  opacity: 1;
  margin: 0 0 1rem;
}

.point-card-img {
  margin-bottom: 2rem;
}

@media screen and (min-width: 992px) {
  .point-card-img {
    margin-bottom: 0;
  }
}

#section04 {
  background-color: #F3EFEB;
  /* background-image: url(../img/bg_wave.png);
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat; */
}

/* @supports (background-image: url(../img/bg_wave.webp)) {
  #section04 {
    background-image: url(../img/bg_wave.webp);
  }
} */

.height-40 {
  height: 40px;
}

/* =====================================================
   05: おすすめ3社詳細 (section05_* / company-*)
===================================================== */

/* section05_title: 見出しバナー */
.section05_title {
  padding: 3rem 1rem;
  background-image: url(../img/section05_ttl_bg.png);
  background-size: cover;
  background-position: top center;
  height: clamp(300.00px, calc(28.88vw + 13.52px), 568.00px);
  position: relative;
}

@supports (background-image: url(../img/section05_ttl_bg.webp)) {
  .section05_title {
    background-image: url(../img/section05_ttl_bg.webp);
  }
}

.section05_title svg {
  position: absolute;
  top:0;
  left:0;

}

@media screen and (min-width: 992px) {
  .section05_title {
    padding: 4.5rem 1rem;
  }
}

.section05_title-line {
  background: linear-gradient(transparent 55%, var(--orig-primary) 55%);
}

/* 各社共通の見出し(白線が両端に伸びるスタイル) */
.company-section-ttl {
  position: relative;
}

/* company_ttl: こだわりタグ + 会社名 + 対応エリア */
/* .section05_company_ttl {
  background-color: var(--orig-primary);
} */

/* .company-profile-area {
  border-radius: 4px;
} */



/* 5point: 選ばれる理由カード */
.reason-card {
  border: 1px solid #ddd;
  padding: 1.2rem;
}

.reason-card img {
  margin-bottom: 0.5rem;
}

.reason-card-ttl {
  font-size: clamp(1.00rem, calc(0.45vw + 0.85rem), 1.15rem);
  line-height: 1.5;
  color: var(--orig-cta);
}

/* case: 施工事例 */

.section05_company_case {
  background-color: #F3EFEB;
}

.case-card {
  border: 1px solid #ddd;
  background: #fff;
}

.case-card-ttl {
  background-color: var(--orig-primary);
  color: #fff;
  font-weight: bold;
  padding: 0.8rem 1.2rem;
  font-size: clamp(16.00px, calc(0.45vw + 14.55px), 20.00px);
}

.case-card-body {
  padding: 1.2rem;
}

.case-gallery {
  display: flex;
  gap: 0.6rem;
  height: 260px;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  .case-gallery {
    height: 380px;
  }
}

.case-gallery-main {
  flex: 1 1 60%;
  min-width: 0;
  min-height: 0;
}

.case-gallery-main picture,
.case-gallery-sub picture {
  display: block;
  height: 100%;
  min-height: 0;
}

.case-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-gallery-sub {
  flex: 1 1 40%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.case-gallery-sub picture {
  flex: 1 1 0;
  min-height: 0;
}

.case-gallery-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 2枚横並びの事例用 */
.case-gallery-half {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
}

.case-gallery-half picture {
  display: block;
  height: 100%;
  min-height: 0;
}

.case-gallery-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.case-card-btn {
  max-width: 480px;
  margin: 0 auto;
}

/* voice: お客様の声 */
.voice-card {
  border: 1px solid #ddd;
  padding: 1.5rem;
  position: relative;
}

.voice-card-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #F3EFEB;
  border: 1px solid #ddd;
  /* margin-top: -110px; */
  margin-bottom: 1rem;
}

@media screen and (min-width: 992px) {
  .voice-card{
    padding-top: 3.5rem;
  }
  .voice-card-avatar {
    margin-top: -110px;
  }
}

.voice-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voice-card-ttl {
  color: var(--orig-cta);
  font-size: clamp(1.05rem, calc(0.6vw + 0.9rem), 1.3rem);
  line-height: 1.5;
}

/* company: 会社概要(ダーク背景) */
.section05_company {
  background-color: #2B2B2B;
  color: #fff;
}

.company-info-table {
  border-collapse: collapse;
}

.company-info-table th {
  text-align: left;
  font-weight: bold;
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  white-space: nowrap;
  width: 30%;
  vertical-align: top;
  background: none !important;
  border-right: none !important;
  border-left:none !important;
}

.company-info-table td {
  padding: 1rem 1.5rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
  vertical-align: top;
  border-right: none !important;
  border-left:none !important;
}

.company-info-table a {
  color: #fff;
}

.company-info-map {
  background-color: #b0b0b0;
  color: #fff;
  font-weight: bold;
  min-height: 220px;
  border-radius: 4px;
}

/* company01〜03共通: 横並びCTAボタン */
.company-cta-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.company-cta-btns .btn-common {
  flex: 1 1 320px;
  max-width: 360px;
}

/*# sourceMappingURL=add.css.map */