@charset "utf-8";
/* ---------------------------------------------------

	entrance.css
  sp_first
  イメージファイルの読み込みする場合は「ルートパス」にて
  /src/images/sec/product-category/exterior/ファイル名
  でご指定をお願いします。　
  
--------------------------------------------------- */
.secCmnTtlTxt{
  font-size: 1.125rem;
}
/* ============ pdCtSldrArea ============ */
.pdCtSldrArea{}
.pdCtSldrGrp{ position:relative;}
.secCmnTtlBlk {
  padding: 2rem 0 0;
  position: relative;
}
.secCmnTtlBlk:after {
  content: "☜ スワイプしてご覧ください ☞";
  color: rgba(143, 195, 31, 1);
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  left: 0;
  position: absolute;
  top: 0;
  text-align: center;
  width: 100%;
}
.pdCtSldrBlk{}
.pdCtSldrInr{}

/* ============================

  extorArea

============================ */
.extorArea{}
.extorOtr{}
.extorInr{}

.extorDtlBlk{
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 10px;
  box-shadow: 4px 4px 8px rgb(99 90 82 / 30%) inset;
  margin: 0 auto;
}
/* ここよりSP表示CSSを記述ください */

.mbMd{margin-bottom: 10px;}

.extorDtlBlk{
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 15px;
  }
  .extorDtl{
    display: flex;
    flex-direction: column;
    }
  .extorDtlMainBlk{margin-bottom: 2rem;}
    .extorDtlTitBlk{
      display: flex;
      align-items: center;
      margin-bottom: 1rem;
      }
      .extorDtlTitIco{
        width: 2.1875rem;
        margin-right: 10px;
        }
      .extorDtlTitBlk{}
        .extorDtlTit{
          margin: 0;
          font-weight: 600;
          color: rgba(143,195,31,1);
          line-height: 1.2;
          }
    .extorDtlsldBlk{
      overflow: hidden;
      margin-bottom: 15px;
      border-radius: 9px;
      }
      .extorDtlsld{
        margin: 0;
        padding: 0;        
        }
        .extorDtlsldItm img{width: 100%;}
    .extorDtlNteBlk{
      display: flex;
      flex-direction: column;
      align-items: center;
      }
      .extorDtlNteCom{order: 1;}
      .extorDtlNtePrcBlk{
        order: 0;
        flex-shrink: 0;
        width: 90px;
        margin-bottom: 15px;
        }
        .extorDtlNteThm{
          margin: 0;
          margin-bottom: 5px;
          font-size: 1.5625rem;
          font-weight: 600;
          color: rgba(143,195,31,1);
          line-height: 1.2;
          }
        .extorDtlNtePrcRgeMain{
          margin: 0;
          font-size: 1.25rem;
          font-weight: 600;
          color: rgba(122,93,70,1);
          line-height: 1.2;
          }
          .extorDtlNtePrcRgeMainUnit{font-size: 1rem;}

  .extorDtlSubBlk{width: 100%;}
    .extorDtlSubTitBlk{}
      .extorDtlSubTit{
        margin: 0;
        margin-bottom: 10px;
        font-size: 16px;
        font-weight: 600;
        color: rgba(143,195,31,1);
        line-height: 1.2;
        }

.extorDtlFlx{
  display: flex;
  flex-direction: column;  
  align-items: center;
  }
  .extorDtlFlxItm:not(:last-of-type){margin-bottom: 20px;}
  .extorDtlFlxFig:not(:last-of-type){margin-bottom: 10px;}

  .extorDtlTit{font-size: 1.5625rem;}
    .extorDtlLst{
      display: flex;
      flex-direction: column;
      }
      .extorDtlItmTitBlk{
        width: 100%;
        margin: 0;
        margin-bottom: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 5px;
        background-color: rgba(143,195,31,1);
        }
        .extorDtlItmTit{
          margin: 0;
          font-size: 1rem;
          font-weight: 600;
          color: rgba(255,255,255,1);
          text-align: center;
          }
        .extorDtlItmFigBlk{
          margin-bottom: 10px;
          text-align: center;
          }
        .extorDtlItmSmrBlk{
          margin: 0;
          font-size: 0.875rem;
          font-weight: 600;
          color: rgba(122,93,70,1);
          line-height: 1.2;
          }

  .extorDtlSmrBlk.extorDtlSmrMlt .extorDtlSmr:first-of-type{margin-bottom: 15px;}
    .extorDtlSmr{
      width: 100%;
      margin: 0;
      font-size: 0.875rem;
      font-weight: 600;
      color: rgba(122,93,70,1);
      line-height: 1.2;
      text-align: left;
      }

.extorDtlFigBlk{
  display: flex;
  flex-direction: column;
  align-items: center;
  }
    .extorDtlFigItm:not(:last-of-type){margin-bottom: 15px;}
    .extorDtlFig{}
    .extorDtlFigCap{
      font-size: 0.75rem;
      font-weight: 600;
      color: rgba(122,93,70,1);
      line-height: 1.2;
      }

.extorDtlLst.col{flex-direction: column;}
  .col .extorDtlItm{width: 100%;}
  .col .extorDtlItm:not(:last-of-type){margin-bottom: 20px;}

/* ここまででSP表示CSSを記述ください */


/* ここよりメディアクエリ表示CSSを記述ください */
/* ---------------------------------------------------

	MediaQuery

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

	Tablet-Mode

------------------------------------ */
@media screen and (min-width: 600px) {
.secCmnTtlTxt{
  font-size: 2rem;
}
/* ============ pdCtSldrArea ============ */
.pdCtSldrArea{}
.pdCtSldrGrp{}
.secCmnTtlBlk {
  padding: 0;
  }
.secCmnTtlBlk:after {
  display: none;
  }
.pdCtSldrBlk{}
.pdCtSldrInr{}

/* ============================

  extorArea

============================ */
.extorArea{}
.extorOtr{}
.extorInr{}

.extorDtlBlk{}

/* ここよりTAB表示CSSを記述ください */

.extorDtlBlk{
  padding-top: 25px;
  padding-right: 35px;
  padding-bottom: 25px;
  padding-left: 35px;
  }
  .extorDtl{flex-direction: row;}

.extorDtlMainBlk{
    width: 37%;
    margin-right: 3.125rem;
    margin-bottom: 0;
    }
  .extorDtlTitSml{font-size: 1.3rem;}  
  .extorDtlNteThm{font-size: 1.5625rem;}
  .extorDtlNtePrcRgeMain{font-size: 1.25rem;}

.extorDtlSubBlk{width: calc(100% - 37% - 3.125rem);}
  .extorDtlSubTit{font-size: 1.125rem;}
  .extorDtlLst{position: relative;}
    .extorDtlLst::after{
      content: "";
      width: 4px;
      height: 100%;
      border-left: 4px rgba(143,195,31,1) dotted;
      position: absolute;
      left: calc((3.125rem / 2 + 2px) * -1);
      top: 0;
      }
      
.extorDtlSmrBlk.extorDtlSmrMlt .extorDtlItmSmrBlk{width: calc((100% - 2.5rem) / 2);}
  .extorDtlSmrBlk.extorDtlSmrMlt .extorDtlItmSmrBlk:first-of-type{margin-right: 2.5rem;}
  .extorDtlSmrBlk.extorDtlSmrMlt .extorDtlItmSmrBlk:first-of-type::after{right: calc((2.5rem / 2 + 2px) * -1);}
  .extorDtlSmrBlk.extorDtlSmrMlt{display: flex;}
  .extorDtlSmrBlk.extorDtlSmrMlt .extorDtlSmr{
    width: calc((100% - 1.5rem) / 2);
    position: relative;
    }
  .extorDtlSmrBlk.extorDtlSmrMlt .extorDtlSmr:first-of-type{
    margin-right: 1.5rem;
    margin-bottom: 0;
    }
  .extorDtlSmrBlk.extorDtlSmrMlt .extorDtlSmr:first-of-type::after{
    content: "";
    width: 4px;
    height: 100%;
    border-left: 4px rgba(143,195,31,1) dotted;
    position: absolute;
    right: calc((1.5rem / 2 + 2px) * -1);
    top: 0;
    }

.extorDtlFigBlk{flex-direction: row;}
  .extorDtlFigItm{width: calc((100% - 2rem) / 3);}
    .extorDtlFigItm:not(:last-of-type){
      margin-right: 1rem;
      margin-bottom: 0;
      }


/* ここまででTAB表示CSSを記述ください */

}/* /min-width: 600px */

@media screen and (min-width: 1025px) {
.secCmnTtlTxt{
  font-size: 2.1875rem;
}
/* ============ pdCtSldrArea ============ */
.pdCtSldrArea{}
.pdCtSldrGrp{}
.secCmnTtlBlk {}
.pdCtSldrBlk{}
.pdCtSldrInr{}

/* ============================

  extorArea

============================ */
.extorArea{}
.extorOtr{
  max-width: 1180px;
  }
.extorInr{
  padding: 30px 0 0 0;
  }

.extorDtlBlk{
  height: 505px;
  border-radius: 10px;
  box-shadow: 4px 4px 8px rgb(99 90 82 / 30%) inset;
  max-width: 1040px;
  }
/* ここよりPC表示CSSを記述ください */

.extorDtl{}

.extorDtlMainBlk{width: 31%;}
  .extorDtlTitIco{width: 2.8125rem;}
  .extorDtlTit{font-size: 1.875rem;}
  .extorDtlTitSml{font-size: 1.5rem;}
  .extorDtlsldBlk{margin-bottom: 0;}
  .extorDtlNteBlk{
    flex-direction: row;
    justify-content: space-between;
    }
  .extorDtlNteCom{
    order: 0;
    margin-right: 15px;
    }
    .extorDtlNtePrcBlk{
      order: 1;
      margin-bottom: 0;
      }
    .extorDtlNteThm{font-size: 1.5625rem;}
    .extorDtlNtePrcRgeMain{font-size: 1.25rem;}

.extorDtlSubBlk{width: calc(100% - 31% - 3.125rem);}
  /* .extorDtlItm{width: calc((100% - 20px) / 2);}
  .extorDtlItm:not(:last-of-type){margin-bottom: 0;}
  .extorDtlItm:not(:nth-of-type(2n+2)){margin-right: 20px;}
  .extorDtlItm:nth-of-type(-n+2){margin-bottom: 10px;} */

.extorDtlFlx{
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  }
  .extorDtlFlxItm{width: calc((100% - 1.25rem) / 2);}
    .extorDtlFlxItm:not(:nth-of-type(2n+2)){margin-right: 20px;}
    .extorDtlFlxItm:not(:last-of-type){margin-bottom: 0;}
    .extorDtlFlxItm:not(:nth-last-of-type(-n+2)){margin-bottom: 10px;}

/* ここまででPC表示CSSを記述ください */

}/* /min-width: 1025px */