@charset "UTF-8";


/*  quality.css  */
/*---------------------------
共通
---------------------------*/
.imagephoto .cap {
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  margin-top: 0.2em;
}

.imagephoto .cap.cap_r {
  text-align: right;
}

.imagephoto .cap.cap_l {
  text-align: left;
}

#top_mainimg img {
  border-radius: 1.5vw;
}

/*共通*/
.main_ttl {
  line-height: 1.0;
  letter-spacing: 0.1em;
  font-family: "adobe-garamond-pro", serif;
  font-weight: 400;
  font-style: italic;
}

.main_ttl p {
  opacity: 0;
  animation: mainCopy 1s ease 0.3s forwards;
}

@keyframes mainCopy {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#quality li {
  list-style: none;
}

#quality .imageCap .cap_n.fo10 {
  font-size: 10px;
}

.font01 {
  font-family: "adobe-garamond-pro", serif;
  font-weight: lighter;
  font-style: normal;
  letter-spacing: 0.3em;
}

#quality {
  position: relative;
}

#gua01,
#gua02,
#gua03 {
  background: url(../images/quality/bg01.png);
  background-repeat: no-repeat;
  background-size: 100%;
}
#gua01 {
  background-position: center 42%;
}
#gua02 {
  background-position: center 50%;
}
#gua03 {
  background-position: center 60%;
}

/* sp */
@media only screen and (max-width: 768px) {
  .imagephoto .cap {
    font-size: 10px;
  }
  #gua01 {
      background-position: center 41.5%;
    }
  #gua02 {
      background-position: center 57.5%;
    }
  #gua03 {
      background-position: center 46%;
    }
  #quality .spfo {
    font-size: 9px;
  }
}

/*---------------------------
.tabLink トップのタブ
---------------------------*/
.tabLink {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  box-sizing: border-box;
  padding: 0;
  margin: 4rem auto 3rem;
}

.tabLink li {
  position: relative;
  width: calc((100% - 2.4rem) / 3);
  margin: 0;
  display: inline-table;
}

.tabLink li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1.1em 0;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: 0.05em;
  border-radius: 0.5em;
  color: #333;
  background: #B2D4D8;
  transition: all .6s;
  z-index: 99;
}

.tabLink li.current a,
.tabLink li a:hover {
  background: #78B2B5;
  color: #FFF;
  outline: 1px solid #FFF;
  outline-offset: -5px;
  transition: all .6s;
}

/* Tab */
@media screen and (max-width: 1170px) {
  .tabLink li a {
    /*font-size: 21px;*/
    font-size: 1.794vw;
  }
}

/* sp */
@media only screen and (max-width: 768px) {
  .tabLink {
    gap: 0.6rem;
    margin: 2.5rem auto 1rem;
  }

  .tabLink li {
    width: calc((100% - 0.6rem) / 2);
  }

  .tabLink li a {
    /*font-size: 21px;*/
    font-size: 3.776vw;
  }
}


/* #gua01 キッチン・水まわり */
/*---------------------------
.conTtl タイトル
---------------------------*/
#quality .conTtl {
  margin: 0 auto 0.7em;
  text-align: left;
  font-size: 22px;
  color: #595858;
  letter-spacing: 0.06em;
}

#quality .conTtl b {
  font-size: 35px;
  color: #074584;
  margin-right: 1em;
}

/* Tab */
@media screen and (max-width: 1170px) {
  #quality .conTtl {
    /*font-size: 22px;*/
    font-size: 1.880vw;
  }

  #quality .conTtl b {
    /*font-size: 35px;*/
    font-size: 2.991vw;
  }
}

/* sp */
@media only screen and (max-width: 768px) {
  #quality .conTtl {
    margin: 0 auto 1em;
    /*font-size: 22px;*/
    font-size: 3.906vw;
    text-align: center;
  }

  #quality .conTtl b {
    /*font-size: 35px;*/
    font-size: 5.598vw;
    display: block;
    margin: 0 auto 0.5em;
  }
}

/*---------------------------
.con_pointArea ポイントエリア
---------------------------*/
.con_pointArea {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto 4em;
  letter-spacing: 0.1em;
}

.con_pointArea.last {
  margin: 0 auto 2.5em;
}

.con_pointArea .left {
  width: 46%;
}

.con_pointArea .right {
  width: 54%;
  background: #FCF9EF;
}

.con_pointArea .right .top_ttl {
  font-size: 18px;
  margin-bottom: 1em;
  color: #507E83;
}

.con_pointArea .right .bg {
  padding: 6%;
}

.con_pointArea ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
}

.con_pointArea li {
  width: calc((100% - 1.5rem) / 2);
}

.con_pointArea li .imageCap .icon {
  position: absolute;
  left: -8.5%;
  bottom: -12%;
  width: 80px;
}

.con_pointArea li .txtArea,
.conMain li .txtArea {
  margin-top: 1em;
}

.con_pointArea li .ttl,
.kit_syoki .left .ttl,
.kit_syoki .con_bot .ttl,
.kit_stove .ttl,
.conMain li .ttl {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.1em;
  margin-bottom: 0.5em;
  color: #074584;
}

.con_pointArea li .txt,
.kit_syoki .left .txt,
.kit_syoki .con_bot .txt,
.kit_stove .txt,
.conMain li .txt {
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.con_pointArea li .txt span,
.kit_syoki .left .txt span,
.kit_syoki .con_bot .txt span,
.kit_stove .txt span,
.conMain li .txt span {
  display: block;
  font-size: 11px;
  margin-top: 5px;
  padding-left: 1em;
  text-indent: -1em;
}
.conMain li .txt span.txbr {
  padding-left: 0;
  text-indent: 0;
}

/* Tab */
@media screen and (max-width: 1170px) {
  .con_pointArea .right .top_ttl {
    /*font-size: 18px;*/
    font-size: 1.538vw;
  }

  .con_pointArea li .imageCap .icon {
    position: absolute;
    left: -8.5%;
    bottom: -12%;
    /*width: 80px;*/
    width: 6.837vw;
  }

  .con_pointArea li .ttl,
  .kit_syoki .left .ttl,
  .kit_syoki .con_bot .ttl,
  .kit_stove .ttl,
  .conMain li .ttl {
    /*font-size: 15px;*/
    font-size: 1.282vw;
  }

  .con_pointArea li .txt,
  .kit_syoki .left .txt,
  .kit_syoki .con_bot .txt,
  .kit_stove .txt,
  .conMain li .txt {
    /*font-size: 12.5px;*/
    font-size: 1.068vw;
  }

  .con_pointArea li .txt span,
  .kit_syoki .left .txt span,
  .kit_syoki .con_bot .txt span,
  .kit_stove .txt span,
  .conMain li .txt span {
    /*font-size: 11px;*/
    font-size: 0.940vw;
  }
}

/* sp */
@media only screen and (max-width: 768px) {
  .con_pointArea {
    margin: 0 auto 3.5em;
  }

  .con_pointArea.last {
    margin: 0 auto 1.5em;
  }

  .con_pointArea .left {
    width: 100%;
  }

  .con_pointArea .right {
    width: 100%;
  }

  .con_pointArea .right .top_ttl {
    font-size: 3.906vw;
  }

  .con_pointArea .right .bg {
    padding: 8% 6%;
  }

  .con_pointArea ul {
    gap: 0;
  }

  .con_pointArea li {
    width: 100%;
    margin-bottom: 2rem;
  }

  .con_pointArea li:last-child {
    margin-bottom: 0;
  }

  .con_pointArea li .imageCap .icon {
    position: absolute;
    left: -8%;
    bottom: -11%;
    width: 80px;
  }

  .con_pointArea li .txtArea {
    margin-top: 1.2em;
  }

  .conMain li .txtArea {
    margin-top: 0.6em;
  }

  .con_pointArea li .ttl,
  .kit_syoki .left .ttl,
  .kit_syoki .con_bot .ttl,
  .kit_stove .ttl,
  .conMain li .ttl {
    font-size: 3.645vw;
  }

  .conMain li .ttl,
  .conMain .wid03 .bouhan .li .txtArea .ttl {
    /*height: 38px;*/
    height: 14.32vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .conMain li .ttl.ttl_heNon {
    height: auto;
  }

  .con_pointArea li .txt,
  .kit_syoki .left .txt,
  .kit_syoki .con_bot .txt,
  .kit_stove .txt,
  .conMain li .txt {
    font-size: 3.125vw;
  }

  .con_pointArea li .txt span,
  .kit_syoki .left .txt span,
  .kit_syoki .con_bot .txt span,
  .kit_stove .txt span,
  .conMain li .txt span {
    font-size: 2.734vw;
  }
}

/*---------------------------
.conMain コンテンツ4つ横並び
---------------------------*/
.conMain {
  margin: 0 auto 7em;
}

.conMain.last {
  margin: 0 auto 3.5em;
}

.conMain ul {
  display: flex;
  flex-wrap: wrap;
  /*justify-content: space-between;*/
  gap: 2.3rem;
}

.conMain li {
  width: calc((100% - 6.9rem) / 4);
}
/*横2つの場合*/
.conMain li.wid {
  width: calc((100% - 2.3rem) / 2);
}
.conMain li .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.conMain li .flex .imageCap:nth-child(1) {
  width: 46.5%;
}
.conMain li .flex .imageCap:nth-child(2) {
  width: 53.5%;
}

.conMain li .bor {
  border: 0.5px solid #595858;
}
.conMain li.wid .icon {
  position: absolute;
  left: -3.5%;
  bottom: -10%;
  width: 70px;
}
.conMain li .flex_con {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
}
.conMain li .flex_con .imageCap {
  width: calc((100% - 0.8rem) / 2);
}

/* Tab */
@media screen and (max-width: 1170px) {}

/* sp */
@media only screen and (max-width: 768px) {
  .conMain {
    margin: 0 auto 5em;
  }

  .conMain.last {
    margin: 0 auto 2.5em;
  }

  .conMain ul {
    gap: 1.5rem;
  }

  .conMain li {
    width: calc((100% - 1.5rem) / 2);
  }
  /*横2つの場合*/
  .conMain li.wid {
    width: 100%;
  }
  .conMain li.wid .icon {
    position: absolute;
    left: -2%;
    bottom: -15%;
    width: 70px;
  }

  .conMain li .flex_con {
    gap: 0.4rem;
  }
  .conMain li .flex_con .imageCap {
    width: calc((100% - 0.4rem) / 2);
  }
}


/*---------------------------
kit_syoki 食器洗い乾燥機とコンロ
---------------------------*/
.kit_syoki {
  margin: 0 auto 2.5em;
  background: #F0F0F0;
}

.kit_syoki .bg,
.kit_stove .bg {
  padding: 2em;
}

.kit_syoki .con {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 1.5em;
}

.kit_syoki .left {
  width: 52%;
}

.kit_syoki .right {
  width: 46%;
}

.kit_syoki .left .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
}

.kit_syoki .left .flex div {
  width: calc((100% - 0.6rem) / 2);
}

.kit_syoki .left .txtArea {
  margin-bottom: 1em;
}

/**/
.kit_syoki .con_bot .ttl {
  color: #877A36;
}

.kit_syoki .con_bot ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.kit_syoki .con_bot li {
  width: calc((100% - 3rem) / 4);
}

.kit_syoki .con_bot .obi {
  font-size: 16px;
  margin-bottom: 0.6em;
  padding: 0.5em;
  background: #8F866D;
  text-align: center;
  color: #FFF;
}

.kit_syoki .con_bot .flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
}

.kit_syoki .con_bot .flex .txtArea,
.kit_syoki .con_bot .flex .imagephoto {
  width: calc((100% - 0.6rem) / 2);
}

.kit_syoki .con_bot .flex.first {
  gap: initial;
}

.kit_syoki .con_bot .flex.first .txtArea {
  width: 63%;
}

.kit_syoki .con_bot .flex.first .imagephoto {
  width: 35%;
}

/**/
.kit_stove {
  margin: 0 auto 5em;
  background: #F0F0F0;
}

.kit_stove ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.kit_stove li:nth-child(1) {
  width: 54%;
}

.kit_stove li:nth-child(2) {
  width: 44%;
}

.kit_stove li.flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.kit_stove li.flex .imagephoto {
  width: 57%;
}

.kit_stove li.flex .txtArea {
  width: 40%;
}

/* Tab */
@media screen and (max-width: 1170px) {
  .kit_syoki .con_bot .obi {
    /*font-size: 16px;*/
    font-size: 1.367vw;
  }
}

/* sp */
@media only screen and (max-width: 768px) {
  .kit_syoki {
    margin: 0 auto 1.5em;
  }

  .kit_syoki .bg,
  .kit_stove .bg {
    padding: 8% 6%;
  }

  .kit_syoki .con {
    display: block;
    margin-bottom: 2em;
  }

  .kit_syoki .left {
    width: 100%;
    margin-bottom: 1.2em;
  }

  .kit_syoki .right {
    width: 100%;
  }

  /**/
  .kit_syoki .con_bot ul {
    gap: 0;
  }

  .kit_syoki .con_bot li {
    width: 100%;
    margin-bottom: 2em;
  }

  .kit_syoki .con_bot li:last-child {
    margin-bottom: 0;
  }

  .kit_syoki .con_bot .obi {
    font-size: 3.255vw;
  }

  /**/
  .kit_stove {
    margin: 0 auto 2.5em;
  }

  .kit_stove ul {
    display: block;
  }

  .kit_stove li:nth-child(1) {
    width: 100%;
  }

  .kit_stove li:nth-child(2) {
    width: 100%;
  }

  .kit_stove li.flex {
    display: block;
  }

  .kit_stove li.flex .imagephoto {
    width: 100%;
  }

  .kit_stove li.flex .txtArea {
    width: 100%;
    margin: 1em auto 1.5em;
  }
}

/* #gua02 快適・エコ */
/*---------------------------
#gua02 快適・エコ
---------------------------*/
.conMain .wid03 {
  gap: 0;
  justify-content: space-between;
  margin-top: 2.3rem;
}
.conMain .wid03 li:nth-child(1) {
  width: 22.5%;
}
.conMain .wid03 li:nth-child(2) {
  width: 74.2%;
  background: #EEEEEE;
}
/**/
.conMain .wid03 .cap,
.conMain li.width100 .cap {
  padding: 0 2.5% 2.5%;
}
.conMain li .txtArea .cap {
  font-size: 10%;
  margin-top: 5px;
}
.conMain li.width100 {
  width: 100%;
  background: #F0F0E9;
}
.conMain li.width100.bg_non {
  background: none;
}
.conMain li.width100 .imageCap .cap_n.cap_r {
  right: 3%;
}

/* Tab */
@media screen and (max-width: 1170px) {}

/* sp */
@media only screen and (max-width: 768px) {
.conMain .wid03 {
  margin-top: 1.5rem;
}
.conMain .wid03 li:nth-child(1) {
  /*width: 46.5%;*/
  width: 100%;
  margin-bottom: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}
.conMain .wid03 li:nth-child(1) .imageCap,
.conMain .wid03 li:nth-child(1) .txtArea {
  width: calc((100% - 1.5rem) / 2);
}
.conMain .wid03 li:nth-child(1) .txtArea {
  margin: 0 auto;
}
.conMain .wid03 li:nth-child(1) .txtArea .ttl {
  height: auto;
}

.conMain .wid03 li:nth-child(2) {
  width: 100%;
  padding: 0 0 4%;
}
/**/
.conMain .wid03 .cap,
.conMain li.width100 .cap {
  padding: 0;
}
.conMain .wid03 .cap.cap_pad {
  padding: 0 3% 0;
}
.conMain li.width100 {
  padding: 4%;
}
.conMain li.width100.width100_sp {
  padding: 0 0 4%;
}
.conMain li.width100.bg_non {
  padding: 0;
}

}


/* #gua03 セキュリティ・構造 */
/*---------------------------
#gua03 セキュリティ・構造
---------------------------*/
.conMain li.width100.sec_width100 .bg {
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  padding: 3% 0;
}
.conMain li.width100.sec_width100 .cap {
  padding: 0;
}
.conMain .wid03 .li:nth-child(1) {
  margin-bottom: 2.3rem;
}
.conMain .col_bg,
.conMain .col_bg02 {
  background: #EDEDED;
}
/**/
.conMain .wid.str_wid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
}
.conMain .wid.str_wid .imageCap {
  width: 46%;
}
.conMain .wid.str_wid .tx_con {
  width: 50.5%;
}


/* Tab */
@media screen and (max-width: 1170px) {}

/* sp */
@media only screen and (max-width: 768px) {
.conMain .wid03 .li {
  width: calc((100% - 1.5rem) / 2);
}
.conMain .wid03 .li:nth-child(1) {
  margin-bottom: 0;
}
.conMain .wid03 li.bouhan {
  align-items: flex-start;
}
.conMain .wid03 .li:nth-child(1) .imageCap,
.conMain .wid03 .li:nth-child(2) .imageCap,
.conMain .wid03 .li:nth-child(1) .txtArea,
.conMain .wid03 .li:nth-child(2) .txtArea {
  width: 100%;
}

.conMain li.col_bg:nth-child(2) {
  padding: 4%;
}
/**/
.conMain .wid.str_wid {
  display: block;
}
.conMain .wid.str_wid .imageCap {
  width: 80%;
  margin: 0 auto;
}
.conMain .wid.str_wid .tx_con {
  width: 100%;
}

}


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

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

/* Tab */
@media screen and (max-width: 1170px) {}

/* sp */
@media only screen and (max-width: 768px) {}