@charset "utf-8";
/* CSS Document */
.only_sp {
  display: none;
}
.eq_sec02 {
  background-color: rgba(249, 231, 223, 0.4);
  padding: 10vh 0;
  margin-bottom: 10vh;
}
.sec2_lead1 {
  text-align: center;
  font-size: var(--27px);
  line-height: 1.8em;
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  margin-bottom: 2.0em;
}
.sec2_lead2 {
  text-align: center;
  font-size: var(--27px);
  line-height: 1.8em;
  display: flex;
  flex-direction: column;
  margin-bottom: 2.0em;
  gap: 0;
}
.sec2_lead2 .sec2_h2 {
  font-size: var(--35px);
  text-align: center;
  margin-bottom: 1.0em;
}
.sec2_lead2 .font_75 {
  font-size: clamp(55px, 3.9vw, 75px);
}
.sec2_lead2 p {
  font-size: var(--23px);
}
.sec2_ph1 {
  display: grid;
  grid-template-columns: 15vw 1fr 1fr 15vw;
  grid-template-rows: 1fr;
  gap: 0.5rem;
  margin-bottom: 5vh;
}
.item01 {
  grid-column: 2/3;
  grid-row: 1/2;
}
.item02 {
  grid-column: 3/4;
  grid-row: 1/2;
}
.sec_A, .sec_B {
  font-family: "Zen Kaku Gothic New", sans-serif;
  background: linear-gradient(90deg, rgba(209, 188, 158, 1) 0%, rgba(149, 114, 63, 1) 100%);
  padding: 0 1.0em 0 1.0em;
  margin-bottom: 10vh;
}
/*.sec_B{
	display: grid;
	grid-template-columns: 1fr 2fr 1fr 2fr;
	gap:0.5em;
}*/
.sec2_ul_flex {
  display: flex;
  flex-direction: column;
  column-gap: 2.0em;
  padding-bottom: 1.5em;
}
/*.b_c_d {
  display: grid;
grid-template-columns: repeat( 3, minmax(300px,1fr) ) ; 
  column-gap: 0.8em;
}*/
.eq_grid01 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 3px;
}
/*ABCプレゼント*/
.eq_flex1, .eq_flex1_2, .itemB {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
}
.text_box1 {
  flex-grow: 1;
}
.P_image {
  max-width: 85%;
  height: auto;
  text-align: center;
}
.eq_flex1 {
  margin-bottom: 1.5em;
}
.containnerB {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2em;
}
.eq_flex2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 0.6fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 3px;
  align-items: center;
  padding: 0 2.0em;
}
.kanta {
  grid-row: 1/2;
  grid-column: 1/4;
}
.sanko {
  grid-row: 2/3;
  grid-column: 1/4;
}
.OR {
  grid-row: 1/2;
  grid-column: 4/5;
}
.ultra {
  grid-row: 1/2;
  grid-column: 5/8;
}
.fineB {
  grid-row: 2/3;
  grid-column: 5/8;
}
.eq_flex3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 2%;
  background: linear-gradient(90deg, rgba(209, 188, 158, 1) 0%, rgba(149, 114, 63, 1) 100%);
  border-radius: 5px;
  padding: 0.4em;
  margin: 0 auto 5.0rem;
}
.sec_A h3 span, .sec_B h3 span {
  font-size: clamp(50px, 3.6vw, 70px);
}
.sec2_h2 .vert_high {
  vertical-align: 1.0em;
}
.eq_name {
  font-size: var(--27px);
  text-transform: capitalize;
}
.eq_sec02 .p_03 {
  font-size: var(--20px);
}
.sec2_lead2 {
  justify-content: center;
  gap: 0;
}
.sec_A h3, .sec_B h3 {
  font-family: 'Shippori Mincho', serif;
  color: #ffffff;
  font-size: var(--27px);
}
.sec2_ul_flex {
  display: flex;
  flex-direction: column;
  column-gap: 2.0em;
  padding-bottom: 1.5em;
}
/*.sec_A li img, .sec_B li img {
  margin-bottom: 1.0em;
}*/
.sec_A li, .sec_B li {
  font-size: var(--16pxL);
}
.sec_A .li_bold, .sec_B .li_bold {
  font-size: var(--20px);
  font-weight: bold;
}
.sec_A .OR, .sec_B .OR {
  font-size: var(--35px);
  position: relative;
  z-index: 0;
}
.sec_B .OR {
  padding-bottom: 1.0em;
}
.sec_A .OR::before, .sec_B .OR::before {
  content: "";
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  border: solid 0.5px #333333;
  border-radius: 50%;
  z-index: -1;
}
.sec_B .OR::before {
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
}
.p_04 {
  font-size: var(--23px);
  color: #ffffff;
  letter-spacing: -0.01em;
}
.p_04 span {
  font-size: var(--30px);
}
.eq_floor .eq_flex4 p {
  flex-basis: 49%;
}
.floor_innner h2 {
  font-size: var(--16px);
  text-align: start;
  border-bottom: solid 0.4px #333333;
  margin-bottom: 1.5em;
}
.floor_innner h2 span {
  font-size: var(--40px);
}
.p_05, .eq_grid06 dd {
  font-size: var(--18px);
  margin-bottom: 0.4em;
  white-space: normal;
}
.p_06 {
  position: relative;
  display: inline-block;
  font-size: var(--18px);
  font-weight: bold;
  margin-bottom: 2.0em;
}
.p_06::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10%;
  width: 100%;
  height: 0.4em;
  background-color: rgba(118, 77, 51, 0.4);
}
.p_07 {
  font-size: var(--18px);
  margin-bottom: 3.5em;
}
.others_list, {
  font-size: var(--20px);
}
.others_list dl {
  background-color: #ffffff;
  border: solid 0.5px #333333;
  flex-basis: 33%;
  padding: 0.8em;
}
.floor_innner {
  margin-bottom: 8vh;
}
/*=========いぬとねことくらす===============*/
.sec03_container {
  max-width: 1450px;
  width: 80%;
  margin: 5vh auto 15vh;
  border: solid 1px #333333;
}
.DtoC {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 1.0em;
}
.jeco_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: var(--18px);
  white-space: nowrap;
  padding-left: 8vw;
  line-height: 1.8em;
}
dt {
  text-align: center;
  font-size: var(--23px);
  margin-bottom: 0.5em;
}
dd {
  font-size: var(--16pxL);
}
.long_text {
  font-size: clamp(14px, 0.9vw, 22px);
}
dd img {
  margin-bottom: 1.5em;
}
.logo_box {
  width: 25%;
  height: auto;
  margin-bottom: 0.5vh;
}
.logo_flex {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: end;
  margin-bottom: 0.5vh;
}
.logo_flex2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: end;
  margin-bottom: 0.5vh;
}
.logo_flex3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  margin-bottom: 0.5vh;
}
.logo_flex4 {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: end;
  margin-bottom: 0.3em;
}
.DtoC_box {
  padding-left: 5vw;
}
}
.logo_flex2 {
  display: grid;
  grid-template-columns: 0.25fr 0.25fr;
  align-items: end;
  margin-bottom: 0.5vh;
}
.title_1 {
  font-size: var(--27px);
  margin-bottom: 1.0em;
  text-align: start;
}
.title_2 {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: var(--16px);
  letter-spacing: 0.2em;
  text-align: start;
  position: relative;
  text-indent: -3.0em;
}
.title_2 span {
  font-size: 10px;
  vertical-align: 0.05em;
}
.title_2::before {
  content: url(../images/svg/logo_jeco.svg);
  display: inline-block;
  position: absolute;
  width: clamp(40px, 3.4vw, 50px);
  height: auto;
  bottom: 0;
  left: -4.0em;
}
.eq_sec03 {
  border: solid 1px #333333;
}
.pet_sec {
  width: 90%;
  padding: 5vh 0;
  margin: 0 auto;
}
.eq_sec04 dd {
  font-size: var(--16pxL);
}
.eq_sec04 dd span {
  position: relative;
}
.eq_sec04 dd span::before {
  position: absolute;
  left: 0;
  bottom: 10%;
  content: "";
  width: 100%;
  height: 0.4em;
  background-color: #f2a4be;
  z-index: -1;
}
.text_box {
  flex-grow: 1;
  padding: 0 0.6em;
}
.Entry {
  text-indent: 0.5em;
  text-transform: capitalize;
  font-weight: bold;
  font-size: var(--23px);
  color: #818181;
  position: relative;
  transition: all 0.3s ease-out;
}
.Entry span {
  color: #e6265f;
}
.Entry::before {
  position: absolute;
  left: 0;
  bottom: -12%;
  content: "";
  width: 75%;
  height: 0.1em;
  background-image: linear-gradient(90deg, rgba(129, 129, 129, 1) 0%, rgba(129, 129, 129, 1) 75%, rgba(230, 38, 95, 1) 75%, rgba(230, 38, 95, 1) 100%);
  background-repeat: no-repeat;
}
.Entry:hover {
  transform: translateX(1.2em);
  opacity: 0.6;
}
/*===========グリッド・フレックス==============*/
.eq_grid02 {
  gap: 2%;
  margin-bottom: 6.0em;
}
.eq_grid03 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2%;
  align-items: center;
  margin-bottom: 10vh;
}
.eq_grid03 dl {
  order: 2;
}
.eq_grid03 p {
  order: 1;
}
.eq_grid04 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2%;
  align-items: center;
}
.eq_grid05 {
  display: grid;
  grid-template-columns: 3fr 1fr;
  justify-content: start;
  column-gap: 1.5em;
  align-items: flex-end;
}
.eq_grid06 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2fr 1fr 1fr;
  border: solid 1px #333333;
}
.eq_flex4, .eq_flex5 {
  display: flex;
  gap: 0.8em;
  align-items: flex-end;
}
.eq_flex6 {
  display: flex;
  justify-content: flex-start;
}
.eq_flex7, .eq_flex8, .eq_flex7_2 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.eq_flex9 {
  display: flex;
  justify-content: space-between;
}
.item1 {
  display: flex;
  flex-direction: column;
}
.eq_flex7 .item1, .eq_flex7_2s .item1, .eq_flex8 .item1, .eq_flex9 .item1 {
  flex-basis: 49%;
  padding-bottom: 0.5em;
  height: clamp(200px, 38vh, 550px);
}
.eq_flex4_2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2%;
  /*display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 4%;
	grid-row-gap: 8%;
	grid-row-gap: 8%;*/
}
.pc_no1 {
  order: 2;
}
.pc_no2 {
  order: 1;
}
.eq_sec04 {
  padding: 5vh 0;
  margin-bottom: 10vh;
  border-top: solid 1px #d4d4d5;
  border-bottom: solid 1px #d4d4d5;
}
/*ロゴサイズ*/
.WOODTEC {
  width: clamp(68px, 9.1vw, 133px);
  height: auto;
}
.EIDAI, .LIXIL {
  width: clamp(42px, 5.8vw, 84px);
  height: auto;
}
.DAIKEN {
  width: clamp(55px, 7.6vw, 110px);
  height: auto;
}
.YKK, .KLARK {
  width: clamp(20px, 2.7vw, 39px);
  height: auto;
}
.only_one {
  width: clamp(34px, 4.5vw, 68px);
  height: auto;
}
.TOYO {
  width: clamp(68px, 9.4vw, 136px);
  height: auto;
}
.my_zoo {
  width: clamp(30px, 3.6vw, 52px);
  height: auto;
}
.ekrea {
  width: clamp(81px, 11.2vw, 162px);
  height: auto;
}
.panasonic {
  width: clamp(74px, 9.9vw, 147px);
  height: auto;
}
.jeco {
  width: clamp(55px, 7.6vw, 110px);
  height: auto;
}
/*==========吹き出し==========*/
.hukidashi {
  position: relative;
  padding: 0.2em 1.0em;
  font-size: 16px;
  background: #ffffff;
  border-radius: 0.2em;
  font-weight: bold;
  font-size: var(--23px);
}
.hukidashi:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 99%;
  margin-top: -0.4em;
  border: 0.4em solid transparent;
  border-left: 0.8em solid #ffffff;
  border-radius: 0.2em;
}
/*フェードインアニメーション--------------*/
/* 基本フェードイン */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s ease, transform 1.2s ease;
  will-change: opacity, transform;
}
/* 表示されたら付くクラス */
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* オプション：複数要素を順番に遅らせる（必要なら） */
.fade-in.delay-1 {
  transition-delay: 0.20s;
}
.fade-in.delay-2 {
  transition-delay: 0.40s;
}
.fade-in.delay-3 {
  transition-delay: 0.60s;
}
/* 表示されたら付くクラス */
.fade-in.in-view {
  opacity: 1;
  transform: translateY(0);
}
/*=========レスポンシブ=====================

=======SP対応・ブレイクポイント768px=========*/
@media (max-width: 1500px) {
  .item1 {
    flex-basis: 49%;
    padding-bottom: 0.5em;
    height: clamp(200px, 34vh, 550px);
  }
}
@media (max-width: 768px) {
  .only_sp {
    display: inline;
  }
  .container80, .container80_nm, .container65_nm {
    width: 90vw;
    margin: 5vh auto;
  }
	.mv_container h2 {
        position: absolute;
        bottom: 42%;
        right: 2%;
        color: #333333;
        font-size: var(--23px);
    }
  .sec_A h3 span {
    font-size: font-size: clamp(50px, 3.8vw, 75px);
  }
  .sec_A li, .sec_B li {
    font-size: var(--16px);
    margin-bottom: 0.5em;
  }
  .sec_A h3 {
    font-size: var(--23px);
    text-indent: 2.0em;
  }
  .sec_B h3 {
    font-size: var(--23px);
  }
  .sec2_ph1 {
    grid-template-columns: 0 1fr 1fr 0;
  }
  .sec2_lead1 {
    text-align: center;
    font-size: var(--23px);
  }
  .sec2_lead2 .sec2_h2 {
    font-size: var(--23px);
  }
  .sec2_lead2 .font_75 {
    font-size: clamp(50px, 3.8vw, 75px);
  }
  .eq_flex2 {
    display: block;
  }
  .sec_A .OR {
    text-align: center;
    margin-bottom: 1.5em;
  }
  .pb_2em {
    padding-bottom: 2.0em;
  }
  .eq_grid02 {
    display: block;
    gap: 2%;
    margin-bottom: 6.0em;
  }
  .eq_flex1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 1.5em;
  }
  .containnerB {
    display: block;
  }
  .itemB {
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: 0.2em;
  }
  .P_image {
    max-width: 100%;
    height: auto;
    text-align: center;
  }
  .sec_B .li_bold {
    font-size: var(--16px);
  }
  .sec_B .OR::before {
    top: 30%;
  }
  .sec_B .OR {
    padding-top: 2em;
  }
  .p_04 span {
    font-size: 24px;
  }
  .eq_flex3 {
    padding: 0.7em 0.5em 0.7em 1.2em;
  }
  .eq_flex4 {
    flex-direction: column;
    row-gap: 1.5em;
  }
  .eq_flex4_2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.4em;
    row-gap: 1.6em;
  }
  .eq_grid03 {
    display: flex;
    flex-direction: column;
    flex-direction: column-reverse;
  }
  .hukidashi, .p_04 {
    font-size: 15px;
  }
  .jeco_box {
    display: flex;
    flex-direction: row;
    gap: 2.0em;
    font-size: var(--16px);
    margin-bottom: 2.0em;
  }
  .DtoC li {
    font-size: var(--23px);
  }
  .eq_flex7_2 {
    display: block;
  }
  .eq_flex7 {
    margin-bottom: 2.0em;
  }
  .eq_flex1_2 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .eq_grid04 {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 6%;
    column-gap: 2%;
    align-items: center;
  }
  dt {
    text-align: center;
    font-size: var(--23px);
  }
  .jeco_box {
    padding-left: 0;
  }
  .DtoC_box {
    padding-left: 0;
  }
  .item1 {
    margin-bottom: 90px;
  }
  .eq_grid05 {
    display: flex;
    column-gap: 1.5em;
    flex-direction: column;
    width: 63%;
    margin: 0 auto;
  }
  .Entry {
    margin-right: -30%;
  }
  .Entry::before {
    width: 110%;
  }
}
@media (max-width: 568px) {
.mv_container h2 {
        position: absolute;
        bottom: 42%;
        right: 0;
        color: #333333;
        font-size: 15px;
    }
  .sec_A .li_bold, .sec_B .li_bold {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2em;
  }
  dd {
    font-size: 12px;
  }
  .long_text {
    font-size: 13px;
  }
  dd img {
    margin-bottom: 0.5em;
  }
  .eq_flex4_2 {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 1.6em;
  }
  .jeco_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.0em;
    margin-bottom: 1.0em;
  }
  .title_2 {
    text-indent: 4em;
  }
  .p_04 span {
    font-size: 18px;
  }
  .hukidashi, .p_04 {
    font-size: 10px;
  }
  .item1 {
    margin-bottom: 65px;
  }
}