@charset "UTF-8";


/* コンテンツ */
.nb_main_container{
	padding:30px 0;
}

.inner_contents {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px 90px;
}

.inner_contents2 {
    width: min(90vw, 1200px);
    margin: 0 auto;
    padding: 0 0 50px;
}


.block2_container {
    margin: 0 auto;
    display: flex;
	padding-bottom:30px;
}

.block2_container_txt {
    width: min(62.85vw, 880px);
    margin: 0 60px 0 0 ;
}
.block2_container_left {
    width: min(72.85vw, 600px);
    margin: 0 10px;
}

.block2_container_img {
    width: min(37.14vw, 520px);
}

.block2_container_right {
    width: min(37.14vw, 520px);
}

/*　給湯器背景　*/
.kinds_1#kyutoki .kinds_st
{
	background: url(/wp/wp-content/uploads/2025/12/kyuutouki.webp) no-repeat center top;
    background-size: cover;
}

.kinds_1#ecocute .kinds_st
{
	background: url(/wp/wp-content/uploads/2025/12/ecocute.webp) no-repeat center top;
    background-size: cover;
	padding:0 0 40px;
}

/*コンテンツ調整 */
.contents_c{
	display:flex;
	flex-direction:column;
    align-items: center;
}

/* ボックスの装飾 */
.gold_solid_box {
    margin-top: 40px;
    border: 3px solid #b09453;
    background-color: #fff;
    align-items: center;
    padding: 17px 15px 17px 25px;
    gap: min(1.83vw, 22px);
}

.white_solid_box {
  background-color: #fff;
  border: min(0.08vw, 1px) solid #d7ceb9;
  padding: min(2.83vw, 34px);
  margin: 50px 0 0;
  flex-direction: column;
}

/* リスト */

.list2 {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;    
}
.list2 li {
    display: block;
    width: min(38.25vw, 670px);
}


/* 横並び3つ */
.list3 {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;    
}
.list3 li {
    display: block;
    width: min(30.25vw, 363px);
}


/* 横並び4つ */
.list4 {
    display: flex;
    flex-wrap: wrap; 
    gap: 47px;      
    justify-content: space-between;
}
.list4 li {
    display: block;
    width: min(20vw, 240px);
}

/* 横並び5つ */
.list5 {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between; /* 上段3つはこれで左右に振られる */
}

.list5 li {
    width: min(23vw, 400px);
}

.list5 li:nth-last-child(-n+2) {
    width: calc(50% - 47px / 2); 
}

.list5 li:nth-last-child(2) {
    margin-left: auto;
}

.list5 li:last-child {
    margin-right: auto;
}

/* リスト3つ並びになるclassなんだけど、２つしか要素がないときに中央寄せにする　*/
.kinds_photos2 ul.jc_se, ol.jc_se {
    justify-content: space-evenly!important;
}

/* before・afterを横並びで　*/
.ba_list{
  display: flex;
  align-items: flex-start;
  gap: 50px;
}

.ba_list li {
  list-style: none;
  width: 50%; 
  position: relative;
}

.ba_list li:first-child::after {
  content: "";
  position: absolute;
  right: -40px;              /* 位置は調整 */
  top: 50%;
  transform: translateY(-50%);
  width: 32px;               /* 画像サイズ */
  height: 32px;
  background: url(/wp/wp-content/themes/hori-pen//images/gaiheki/flow_ar.webp) no-repeat left top;
  background-size: contain;  /* 画像全体を表示 */
}

/* リスト黒丸 */
.question_contents_box1 ul {
    line-height: 1.9;
    list-style: disc outside;
    margin: 0 0 0 25px;
}


/* 文字色 */
.white_txt {
	color:white!important;
}

/* 文字配置 */

.txt_align_c {
	text-align:center!important;
}
.txt_align_l {
	text-align:left!important;
}


/* 文字サイズ */
.txt_bold{
	font-weight:bold!important;
}

.txt20_bold {
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.6;
    font-weight: 600;
    margin: min(0.93vw, 15px) 0;
}


.txt24_bold {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 20px;
}


.txt24_bold_gold {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: #a2843d;
    display: inline-block;
    border-bottom: 4px solid #a2843d;
    padding: 0 0 4px;
    margin: 0 0 20px;
}


.txt28_bold {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 20px;
}


.txt30_bold_gold {
    font-size: 30px;
    font-weight: 600;
    line-height: 1.4;
    color: #a2843d;
    display: inline-block;
    border-bottom: 4px solid #a2843d;
    padding: 0 0 4px;
    margin: 0 0 20px;
}

.txt36_bold {
    font-size: clamp(20px, 7vw, 36px);
    font-weight: 600;
    line-height: 1.4;
    padding: 0 0 4px;
    margin: 0 0 20px;
}


/* 間の調整 */
.mb10{
	margin-bottom:10px!important;
}
.mb20{
	margin-bottom:20px!important;
}

.mb30{
	margin-bottom:30px!important;
}

.mb50{
	margin-bottom:50px!important;
}

.m0{
	margin:0px!important;
}

.mt0{
    margin-top: 0!important;
}


/* 画像を中央寄せ */
.center_img {
  display: block;
  margin: 0 auto;
}

/* 表デザイン */
.gold_table_type1 {
    width: 100%;
    border-top: 1px solid #b7b09f;
    border-left: 1px solid #b7b09f;
    border-collapse: collapse;
    margin: 30px 0 50px;
}

.gold_table_type1 th {
    background-color: #b09453;
    width: 25%;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    padding: 12px;
	border-bottom: solid 1px #fff;
}

.gold_table_type1 tr:last-of-type th {
	border-bottom:none;
}

.gold_table_type1 th:not(:last-child) {
	border-right:solid 1px white;
}

.gold_table_type1 td {
    background-color: #fff;
    padding: 12px 50px;
	border-right: 1px solid #b7b09f;
    border-bottom: 1px solid #b7b09f;
}

/* スマホの時横スライドにしたいときの表　*/
.gold_table_type2 {
    width: 100%;
    border-top: 1px solid #b7b09f;
    border-left: 1px solid #b7b09f;
    border-collapse: collapse;
    margin: 30px 0 50px;
}

.gold_table_type2 th {
    background-color: #b09453;
    width: 25%;
    font-size: clamp(14px, 3vw, 18px);
    font-weight: 600;
    color: #fff;
    letter-spacing: 1px;
    padding: 12px;
	
}
.gold_table_type2 th:not(:last-child) {
	border-right:solid 1px white;
}

.gold_table_type2 td {
    background-color: #fff;
    padding: 12px 50px;
	border-right: 1px solid #b7b09f;
    border-bottom: 1px solid #b7b09f;
}

.gold_table_type2 .td1{
	background-color:#eee;
}

/* ボタンデザイン */
.black_btn {
    display: block;
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    width: 351px;
    height: 54px;
    box-sizing: border-box;
    border: 3px solid #c8ad4e;
    line-height: 46px;
    font-size: 18px;
    font-weight: 600;
	color:white;
}

.black_btn::before {
    display: inline-block;
    content: "";
    background: url(/wp/wp-content/themes/hori-pen/images/common/ar4.webp) no-repeat left top;
	transform: rotate(-90deg);
    background-size: contain;
    width: 14px;
    height: 12px;
    vertical-align: middle;
    margin: -4px 8px 0 0;
}

.black_btn:hover {
  color: #FFF;
}

.arw_btm.black_btn::before,.arw_btm.black_btn2::before{
	transform: rotate(0deg)!important;
}

/* テキストに合わせて可変するボタン */
.black_btn2 {
    display: inline-block;     
    background-color: #000;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    line-height: 1.4;           
    padding: 15px 42px;             
    border: 3px solid #c8ad4e;
    font-size: 18px;
    font-weight: 600;
    box-sizing: border-box;
}

.black_btn2::before {
    display: inline-block;
    content: "";
    background: url(https://hori-pen.rectus.org/wp/wp-content/themes/hori-pen/images/common/ar4.webp) no-repeat left top;
	transform: rotate(-90deg);
    background-size: contain;
    width: 14px;
    height: 12px;
    vertical-align: middle;
    margin: -4px 8px 0 0;
}

.black_btn2:hover {
  color: #FFF;
}

/* 可変ボタンを中央寄せにする　*/
.btn_center {
   margin: 0 auto;
}



.kinds_photos ul li p {
  font-weight: 500;
  line-height: 1;
  margin-top: 13px;
}

.kinds_photos3 {
  background-color: #fff;
  border: min(0.08vw, 1px) solid #d7ceb9;
  padding: 34px min(2.83vw, 34px) 24px;
  margin: 40px 0 0;
}

.kinds_photos3 {
  background-color: #fff;
  border: min(0.08vw, 1px) solid #d7ceb9;
  padding: 34px min(2.83vw, 34px) 24px;
  margin: 40px 0 0;
}
.kinds_photos3 ul {
  display: flex;
  justify-content: space-between;
}
.kinds_photos3 ul li {
  width: 50%;
  text-align: center;
}
.kinds_photos3 ul li p {
  font-weight: 500;
  line-height: 1;
  margin-top: 13px;
}

.question_case_inner .question_case_faq {
  background-color: #fff;
  margin-top: 40px;
  padding: 50px 60px;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}
.question_case_inner .question_case_faq h3 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
  color: #a2843d;
  display: inline-block;
  border-bottom: 4px solid #a2843d;
  padding: 0 0 4px;
  margin: 0 0 25px;
}
.question_case_inner .question_case_faq h3 + p {
  line-height: 1.9;
}
.question_case_inner .question_case_faq dl {
  border-bottom: 1px solid #d3d3d3;
  padding: 20px 0;
}
.question_case_inner .question_case_faq dl dt {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  position: relative;
  padding: 0 0 0 45px;
}
.question_case_inner .question_case_faq dl dt::before {
  content: "";
  display: block;
  background: url(../../images/question/selfcheck_case_q.webp) no-repeat left top;
  background-size: contain;
  width: 35px;
  height: 35px;
  position: absolute;
  left: 0px;
  top: -3px;
}
.question_case_inner .question_case_faq dl dd {
  padding: 0 0 0 45px;
  line-height: 1.9;
  margin-top: 12px;
}

/* 外構の各背景 */
.kinds_1#monpi .kinds_st {
    background: url(/wp/wp-content/uploads/2025/12/monpi.webp) no-repeat center top;
    background-size: cover;
}

.kinds_1#fence .kinds_st {
    background: url(/wp/wp-content/uploads/2025/12/fence.webp) no-repeat center top;
    background-size: cover;
}

.kinds_1#carport .kinds_st {
    background: url(/wp/wp-content/uploads/2025/12/carport.webp) no-repeat center top;
    background-size: cover;
}

.kinds_1#wooddeck .kinds_st {
    background: url(/wp/wp-content/uploads/2025/12/wooddeck.webp) no-repeat center top;
    background-size: cover;
}

.kinds_1#doma .kinds_st {
    background: url(/wp/wp-content/uploads/2025/12/doma.webp) no-repeat center top;
    background-size: cover;
}

.kinds_1#shiba .kinds_st {
    background: url(/wp/wp-content/uploads/2025/12/shiba.webp) no-repeat center top;
    background-size: cover;
}

.kinds_1#genkan .kinds_st {
    background: url(/wp/wp-content/uploads/2025/12/genkan.webp) no-repeat center top;
    background-size: cover;
}



/*　オークリッジスーパー　*/

.oakridgesuper_item {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;     /* li 同士の横・縦間隔 */
}

/* --- liは2列 --- */
.oakridgesuper_item li {
  width: calc(50% - 20px); /* gap分を引いた2列 */
  box-sizing: border-box;
}

/* --- dt + dd を横並び --- */
.oakridgesuper_item dl {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

/* dt（タイトル） */
.oakridgesuper_item dt {
  white-space: nowrap;   /* 改行しない */
  font-weight: 700;
  width: 200px;           /* タイトルの固定幅（調整OK） */
}

/* dd（説明） */
.oakridgesuper_item dd {
  margin: 0;
  flex: 1;               /* 余った幅を全部使う */
}

/*　着工　*/
.chakou_container {
    margin: 0 auto;
    display: flex;
    padding-bottom: 30px;
}

.chakou_container_txt {
    width: min(55vw, 780px);
    margin: 0 30px 0 0;
}

.chakou_container_img {
  width: 100%;
  max-width: 600px;
}

@media screen and (max-width: 750px) {
  .oakridgesuper_item {
    gap: 20px;
  }

  .oakridgesuper_item li {
    width: 100%; 
	margin-bottom:30px;
  }

  .oakridgesuper_item dl {
    flex-direction: column;  /* dt → dd を縦並び */
  }

  .oakridgesuper_item dt {
    width: auto;             /* 横固定解除 */
  }
  
  .oakridgesuper_item li img {
   width: 100%!important;
 }
}


/* スマホ  */

@media screen and (max-width: 750px) {

  .block2_container,.chakou_container{
    display: block;
  }
.block2_container:has(:not(.gaiheki_lead_txt)) div:has(img) {
    text-align: center;
    margin: 20px 0;
  }
 .block2_container_img,.chakou_container_img {
    width: auto;
    text-align: center;
  }

  .block2_container_img img,.chakou_container_img img {
    width: 85vw;
    height: auto;
  }
.block2_container_txt,.block2_container_left,.block2_container_right,.chakou_container_txt {
    width: auto;
	margin:0;
  }
.block2_container_navi {
    display: block;
    margin-top: 5.33vw;
  }
.block2_container_navi li {
    width: auto;
    margin-top: 3vw;
  }
.block2_container_navi li a {
    display: block;
    height: auto;
    border: 0.8vw solid #c8ad4e;
    border-radius: 13.33vw;
    font-size: 4.26vw;
    line-height: 1;
    padding: 2.8vw 0;
  }
.block2_container_navi li a::before {
    width: 3vw;
    height: 3vw;
    margin: -0.6vw 1.8vw 0 0;
  }
  
 .gold_table_type1 {
    margin: 8vw 0;
  }
 .gold_table_type1 th,
 .gold_table_type1 td {
    display: block;
  }
 .gold_table_type1 th {
    width: auto;
    font-size: 4.26vw;
    padding: 2.66vw;
  }
 .gold_table_type1 th br {
    display: none;
  }
.gold_table_type1 td {
    padding: 2.66vw;
    text-align: center;
  }
 .gold_table_type1 td.td1 {
    width: auto;
}

.gold_table_type1 th:not(:last-child) {
    border-right:none;
}

.gold_table_type2 td {
    padding: 12px 10px;
}

 .kinds_photos3 {
    border: 1px solid #d7ceb9;
    padding: 5.33vw;
    margin: 8vw 0 0;
  }
  .kinds_photos3 ul {
    display: block;
  }
  .kinds_photos3 ul li {
    width: auto;
  }
  .kinds_photos3 ul li + li {
    margin-top: 5vw;
  }
  .kinds_photos3 ul li img {
    width: 100%;
    height: auto;
  }
  .kinds_photos2 ul li p {
    margin-top: 1.33vw;
    font-size: 3.73vw;
  }
  
  .black_btn {
        border: 0.8vw solid #c8ad4e;
        border-radius: 13.33vw;
        width: auto;
        height: auto;
        line-height: 1;
        font-size: 4.1vw;
        padding: 2.8vw 0 3.3vw;
    }
	
	.list2 li, .list3 li,.list4 li {
        width: auto;
        margin-top: 5.33vw;
    }
	
	.list5 {
    gap: 26px;
	}
	
	.list5 li {
    width: min(25vw, 240px);
}
	
	    .question_case_inner .question_case_faq {
        margin-top: 8vw;
        padding: 5.33vw;
    }

    .kinds_flow_inner ol li img.center_img {
        width:50%!important; 
        height: auto;
    }
	
	.table_wrap {
    overflow-x: auto;      /* 横スクロールを許可 */
    -webkit-overflow-scrolling: touch; /* iPhoneで慣性スクロール */
}

.gold_table_type2 {
    width: 100%;
    min-width: 600px;      /* ← tableの最小幅を設定するとスクロールしやすい */
    border-collapse: collapse;
}

/* before・after　*/
.ba_list{
   flex-direction: column;
}

.ba_list li {
 width: 100%;
}

.ba_list li:first-child::after {
display: none;
}

}

/* question_head
---------------------------------------------------- */
.question_head {
  background-image: linear-gradient(90deg, rgb(180, 132, 62) 0%, rgb(205, 171, 81) 12%, rgb(230, 209, 99) 23%, rgb(180, 132, 62) 61%, rgb(230, 209, 99) 100%);
  padding-top: 6px;
}
.question_head_inner {
  background: url(../../images/common/page_title_back.avif) no-repeat center top;
  background-size: cover;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 23px;
}
.question_head_inner p {
  width: 119px;
  padding: 6px 0 8px;
  line-height: 1;
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  background-color: #af8e41;
}
.question_head_inner h2 {
  font-size: 36px;
  color: #fff;
  font-family: "Noto Serif JP", serif;
  font-weight: 600;
  line-height: 1;
}

@media screen and (max-width: 750px) {
  .question_head {
    padding-top: 1.33vw;
  }
  .question_head_inner {
    height: auto;
    display: block;
    padding: 5.33vw 0;
  }
  .question_head_inner p {
    width: 25vw;
    padding: 1.3vw 0 1.4vw;
    font-size: 4.2vw;
    margin: 0 auto 2.5vw;
  }
  .question_head_inner h2 {
    font-size: 5.2vw;
    line-height: 1.3;
    text-align: center;
  }
  
  .txt30_bold_gold {
        font-size: 6vw;

    }
}