@charset "utf-8";



/*商品一覧
-----------------------------------*/
/*
category header4
*/

.catH{
  position: absolute;
  left: 0;
  top: 60px;
  width: 100%;
  text-align: center;
  z-index: -1;
}
.catH::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.2);
}


/* for PC*/
@media print, screen and (min-width:768px) {
	.catH{
    top: 0;
  }
}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (orientation:portrait) {
/*縦向きのみ*/
  
}


/*
category main text
*/
.catMainTxt{
  /*padding: 32px 0;*/
  padding: 32px 0 0 0;
  text-align: left;
}
.catMainTxt p{
  padding: 16px 0;
  text-align: left;
  font-size: 1.3rem;
  line-height: 2.0;
}
.catMainTxt p:last-of-type{
  padding-bottom: 0;
}
.catMainTxt p + .btn02{
  margin-top: 32px;
}

/* for PC*/
@media print, screen and (min-width:768px) {
	.catMainTxt{
    /*padding: 64px 0;*/
    padding: 64px 0 0 0;
  }
  .catMainTxt p{}
  .catMainTxt p:last-of-type{
    padding-bottom: 0;
  }
  .catMainTxt p + .btn02{}
}



/*
category detail
*/
.catDtl{
  padding: 32px 0 0 0;
}
.catDtl section{}
.catDtl section figure{}
.catDtl section div{
  padding: 32px 0;
  text-align: left;
}
.catDtl .catDtlTtl{
  margin-bottom: 8px;
  font-size: 2.0rem;
}
.catDtl .catDtlTxt{
  padding: 16px 0;
  font-size: 1.3rem;
  line-height: 2.0;
}
.catDtl section:last-of-type div,
.catDtl section:last-of-type .catDtlTxt{
  padding-bottom: 0;
}


/* for PC*/
@media print, screen and (min-width:768px) {
	.catDtl{
    padding: 64px 0 0 0;
  }
  .catDtl section{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: center;
    align-items: center;
  }
  .catDtl section:nth-of-type(2n+1){
    -webkit-flex-direction:row;
    flex-direction: row;
  }
  .catDtl section:nth-of-type(2n){
    -webkit-flex-direction:row-reverse;
    flex-direction: row-reverse;
  }
  .catDtl section figure{
    width: 50%;
  }
  .catDtl section div{
    width: 50%;
    padding: 0;
  }
  .catDtl section div > *{
    width: calc((380/580)*100%);
    margin: 0 auto;
  }
  .catDtl .catDtlTtl{
    margin-bottom: 16px;
    font-size: 2.4rem;
  }
  .catDtl .catDtlTxt{}  
}


/*
sub categories list
*/
.subCatList{}
/* for PC*/
@media print, screen and (min-width:768px) {
  .subCatList{}
}






/*商品詳細
-----------------------------------*/
.productDtlWrap{}

/*
product detail body
*/
.productDtlBody{}


/*スライド下の詳細*/
.dtlInfo{}
.dtlInfo section{
  margin: 0 0 48px 0;
  text-align: left;
}
.dtlInfo section h2{
  margin: 0 0 16px 0;
  font-size: 2.0rem;
  font-weight: 700;
}
.dtlInfo section p{
  margin: 0 0 24px 0;
  font-size: 1.3rem;
  line-height: 2.0;
}
.dtlInfo section figure{
  display: block;
}
.dtlInfo section figure img{
  display: block;
  width: 100%;
}




/*
product detail data
*/
.productDtlDataWrap{
  margin: 0 0 48px 0;
}
/*.productDtlDataWrap */.productDtlData{
  margin: 0 0 48px 0;
}

/*スペックリンク*/
.btnSpec{
  margin: 0 0 32px 0;
  padding: 8px 0 0 0;
  font-size: 1.3rem;
  text-align: left;
}

/*ガイドリンク*/
.dtlGuideLink{
  max-width: 300px;
  margin: 0 auto;
  padding: 16px 0 0 0;
  text-align: center;
}
.dtlGuideLink li{
  display: inline-block;
  vertical-align: top;
  font-size: 1.3rem;
  line-height: 2.0;
}
.dtlGuideLink li + li::before{
  content: "／";
  display: inline-block;
  vertical-align: top;
  padding: 0 4px;
}
.dtlGuideLink li:nth-of-type(4)::before{
  content: none;
}

/*バナーエリア01*/
.dtlBnrArea01{
  margin: 16px 0 0 0;
}
.dtlBnrArea01 li{
  margin-bottom: 8px;
}



/*
product detail popup
*/
/*.productDtlPopWrap{
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}*/

.productDtlPop{
  position: fixed;
  top: 50%;
  /*left: 150%;*/
  left: -100%;
  width: calc(100% - 16px*2);
  height: calc(100% - 16px*2);
  padding: 0 32px 64px 32px;
  background: #fff;
  -webkit-transform: translate(-50%-50%);
  transform: translate(-50%,-50%);
  overflow-y: scroll;
  z-index: 100001;
}
.btnPopClose{
  display: none;
  position: fixed;
  top: 40px;
  right: 40px;
  width: 16px;
  height: 16px;
  z-index: 100001;
}
.btnPopClose::before,
.btnPopClose::after{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: #333;
  transform-origin: center center;
  transition: .3s;
}
.btnPopClose::before{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.btnPopClose::after{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.btnPopClose:hover{
  cursor: pointer;
  opacity: 0.7;
}

.productDtlPop h2{
  margin: 64px 0 32px 0;
  text-align: left;
  font-size: 1.8rem;
  font-weight: 400;
}

/*開いた時*/
.productDtlPop.openPop{
  animation-name: popMoveSP;
  animation-fill-mode: forwards;
  animation-duration: 0.5s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-delay: 0;
  animation-direction: normal;
}

/*animation*/
@keyframes popMoveSP {
0%{
  /*left: 100%;*/
  left: -100%;
  }
100%{
  left: 50%;
  }
}
@keyframes popMovePC {
0%{
  /*left: 100%;*/
  left: -400px;
  }
100%{
  left: 0;
  }
}




/*スペック*/
.productDtlSpec{}
.productDtlSpec dl{
  border-top: 1px solid #707070;
}
.productDtlSpec dl:not(.catSpec){
  border-top: none;
}
.productDtlSpec dt{
  margin: 0 0 4px 0;
  padding: 16px 0 0 0;
  text-align: left;
  font-size: 1.4rem;
  font-weight: 700;
}
.productDtlSpec dd{
  padding: 0 0 16px 0;
  border-bottom: 1px solid #707070;
  text-align: left;
  font-size: 1.3rem;
}


/*ガイド*/
.productDtlGuide{}
.productDtlGuide > section > section:not(:last-child){
  margin: 0 0 8px 0;
}
.productDtlGuide > section > section h3{
  margin: 0 0 8px 0;
  text-align: left;
  font-size: 1.4rem;
  font-weight: 700;
}
.productDtlGuide > section > section p{
  margin: 0 0 24px 0;
  text-align: left;
  font-size: 1.3rem;
}
.productDtlGuide > * > * p:last-child{
  margin-bottom: 0;
}

.productDtlGuide .guideFree{
  margin-top: 8px;
  font-size: 1.3rem;
  font-weight: 700;
}
.productDtlGuide .guideFree span{
  font-size: 1.0rem;
}
.productDtlGuide .guideFree strong{
  color: #a00;
}
.productDtlGuide .guideCap{
  margin-top: 8px;
  font-size: 1.1rem;
}
.productDtlGuide .guideCap span{
  font-size: 1.0rem;
}








/* for PC*/
@media print, screen and (min-width:768px) {
  .productDtlWrap{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  
  /*
  product detail body
  */
  .productDtlBody{
    width: calc(((1160 - 400)/1160)*100%);
    /*min-width: 760px;*/
    min-width: 580px;
    padding: 96px 0 0 0;
  }
  
  /*スライド下の詳細*/
  .dtlInfo{}
  .dtlInfo section{
    margin: 0 0 80px 0;
  }
  .dtlInfo section h2{
    font-size: 2.0rem;
    font-weight: 700;
  }
  .dtlInfo section p{
    margin: 0 0 32px 0;
  }
  .dtlInfo section figure{
    /*position: relative;*/
    display: block;
    /*padding: 66.67% 0 0 0;*/
    text-align: center;
    overflow: hidden;
  }
  .dtlInfo section figure img{
    aspect-ratio: 3/2;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    /*position: absolute;
    left: 50%;
    top: 50%;
    display: inline;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);*/
  }
  
  
  
  /*
  product detail data
  */
  .productDtlDataWrap{
    width: calc((400/1160)*100%);
    min-width: 400px;
  }
  .productDtlData{
    position: sticky;
    left: 0;
    top: 0;
    margin-bottom: 0;
    padding: 96px calc((60/400)*100%) 0 calc((60/400)*100%);
  }
  
  
  
  
  /*
  product detail popup
  */
  /*.productDtlPopWrap{}*/

  .productDtlPop{
    position: fixed;
    top: 0;
    /*left: 100%;*/
    left: -400px;
    width: 400px;
    height: 100vh;
    padding: 0 60px 80px 60px;
    -webkit-transform: none;
    transform: none;
  }
  .btnPopClose{
    top: 24px;
    right: auto;
    left: 360px;
  }
  .btnPopClose::before,
  .btnPopClose::after{}
  .btnPopClose::before{}
  .btnPopClose::after{}

  .btnPopClose:hover{}

  .productDtlPop h2{
    margin: 80px 0 32px 0;
    text-align: left;
    font-size: 1.8rem;
    font-weight: 400;
  }
  
  /*開いた時*/
  .productDtlPop.openPop{
    animation-name: popMovePC;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-timing-function: linear;
    animation-delay: 0;
    animation-direction: normal;
  }



  /*スペック*/
  .productDtlSpec{}
  .productDtlSpec dl{
    border-top: 1px solid #707070;
  }
  .productDtlSpec dt{
    margin: 0 0 4px 0;
    padding: 16px 0 0 0;
    text-align: left;
    font-size: 1.4rem;
    font-weight: 700;
  }
  .productDtlSpec dd{
    padding: 0 0 16px 0;
    border-bottom: 1px solid #707070;
    text-align: left;
    font-size: 1.3rem;
  }

  /*ガイド*/
  .productDtlGuide{}
  .productDtlGuide > *{}
  .productDtlGuide h3{
    margin: 0 0 16px 0;
  }
  .productDtlGuide p{}

}

/* for tablet*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/*iPadが縦向きのみの記述*/
  .productDtlBody{
    min-width: initial;
  }
}
/* for tablet*/
@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (orientation:landscape) {
  .productDtlBody{
    min-width: initial;
  }
}