/**************************************
featureListSection
**************************************/
#featureListSection{
  display: block;
  padding: 0 0;
}

#featureListSection .sectionTTL{
  display: block;
  margin-bottom: 4rem;
  font-family: var(--font-title);
  font-size: 3.6rem;
  letter-spacing: 0.05em;
  font-weight: 500;
  line-height: 1.444444444444444;
  color: #2B100F;
  text-align: center;
}

#featureListSection .sectionTTL > span{
  display: block;
  text-align: center;
  margin: 0 auto;
  opacity: 1;
  transition: opacity .4s ease 0.4s;
}

#featureListSection .sectionTTL.view > span{
}

#featureListSection .sectionTTL::before{
  content: '';
  display: block;
  width: 10.928rem;
  height: 2.767rem;
  margin: 0 auto 1.53rem;
  background: url("../img/common/icon_secttl.svg") center top no-repeat;
  background-size: 100% auto;
  /*
  -webkit-clip-path: inset(0 0 100% 0);
  clip-path: inset(0 0 100% 0);
  transition: clip-path .6s ease,opacity .4s ease;
  */
}

#featureListSection > .featureList > ul{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 2rem 2rem;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
}

#featureListSection > .featureList > ul > li{
  display: block;
  width: calc((100% - 2rem * 2) / 3 );
}

#featureListSection > .featureList > ul > li > a{
  display: block;
  width: 100%;
  text-decoration: none;
  transition: opacity .3s ease;
}
#featureListSection > .featureList > ul > li > a:hover{
  opacity: .6;
}

#featureListSection > .featureList > ul > li > a > figure{
  display: block;
  width: 100%;
  margin-bottom: 1.2rem;
  aspect-ratio: 420 / 280;
  border-radius: 10px;
  overflow: hidden;
}

#featureListSection > .featureList > ul > li > a > figure > img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#featureListSection > .featureList > ul > li > a > time{
  display: block;
  margin-bottom: 0.4rem;
  font-size: 1.5rem;
  letter-spacing: 0.025em;
  line-height: 1;
  color: #43AC33;
  font-weight: 400;
}

#featureListSection > .featureList > ul > li > a > .ttl{
  display: block;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  font-size: 1.7rem;
  text-align: left;
  line-height: 2;
  font-weight: 400;
  letter-spacing: 0;
  overflow: hidden;
}


#featureListSection > .featureList .pagerBox{margin-top: 6rem;}




/**************************************
featureDetailSection
**************************************/
#featureDetailSection{
  display: block;
  max-width: 1000px;
  margin: 0 auto;
  padding-bottom: 0;
  line-height: 2;
}


p{
  text-align: left;
  letter-spacing: 0.025em;
}

:where(p,div,dl,dt,dd,ul,ol,li,a) {
  font-size: 1.8rem;
}




#featureDetailSection a{
  transition: opacity .3s ease;
  text-decoration: underline;
  color: #7C7C7C;
}

#featureDetailSection a:hover{opacity: .6;}

/*
#featureDetailSection a[target="_blank"]{
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.9rem 0.9rem;
}
*/

#featureDetailSection a[target="_blank"]::after{
  content: '';
  display: inline-block;
  width: 1.8rem;
  height: 1.8rem;
  background: url("../img/common/icon_blank.svg") center center no-repeat;
  background-size: 100% auto;
  vertical-align: text-top;
  margin-top: 0.2rem;
  margin-left: 0.9rem;
}


#featureDetailSection p:not(:first-child){
  margin-top: 2rem;
}


#featureDetailSection strong{
  font-weight: 700;
  color: #FA9900;
}

#featureDetailSection .marker{
  background: #F7EDD2;
  color: #000000;
  font-weight: 700;
}

#featureDetailSection .fcRed{ color: #B92E2E;}
#featureDetailSection .fcGray{ color: #707070;}

#featureDetailSection .caution{
  font-size: 1.4rem;
  line-height: 1.785714285714286;
  letter-spacing: 0.05em;
}

/* btn  *******************/
#featureDetailSection .ledeBox{
  display: block;
}
#featureDetailSection .ledeBox:not(:first-child){margin-top: 2rem;}




/* btn  *******************/
#featureDetailSection .btnBorder{
  width: 80%;
  max-width: 36rem;
  min-width: min(23.5rem,100%);
  margin: 0 auto;
}

#featureDetailSection .btnBorder:not(:first-child){margin-top: 2rem;}

#featureDetailSection .btnBorder > a,
#featureDetailSection .btnBorder > span{
  height: 4.2rem;
  font-size: 1.6rem;
  padding: 0 1rem;
  text-decoration: none;
  color: #000000;
}
#featureDetailSection .btnBorder > a::after,
#featureDetailSection .btnBorder > span::after{display: none;}

#featureDetailSection .btnNext{
  max-width: 36rem;
  margin: 0 auto;
}
#featureDetailSection .btnNext:not(:first-child){margin-top: 3rem;}

#featureDetailSection .btnNext > a{text-decoration: none; color: #FFFFFF;}


/* sectionBox ******************/
#featureDetailSection .sectionBox{
  display: block;
  width: 100%;
}
#featureDetailSection .sectionBox:not(:first-child){
  margin-top: 10rem;
}


/* borderBox ******************/
#featureDetailSection .borderBox{
  display: block;
  width: 100%;
  padding: 3rem;
  border: 5px solid #EBEBEB;
  border-radius: 30px;
}

#featureDetailSection .borderBox:not(:first-child){
  margin-top: 5rem;
}

#featureDetailSection .borderBox:not(:last-child){
  margin-bottom: 5rem;
}

/* bgBox ******************/
#featureDetailSection .bgBox{
  display: block;
  width: 100%;
  padding: 3rem;
  border-radius: 30px;
  background: #F8F8F8;
}

#featureDetailSection .bgBox:not(:first-child){
  margin-top: 5rem;
}

#featureDetailSection .bgBox:not(:last-child){
  margin-bottom: 5rem;
}


/* mainTTL ******************/
#featureDetailSection .mainTTL{
  display: block;
  padding-top: 2rem;
  padding-bottom: 3rem;
  margin-bottom: 5rem;
  font-family: var(--font-title);
  font-size: 3rem;
  letter-spacing: 0.025em;
  font-weight: 700;
  line-height: 1.5;
  color: #2B100F;
  text-align: left;
  
  background-size: 6px 2px;
  background-image: linear-gradient(to left, #2B100F 1px, transparent 5px);
  background-repeat: repeat-x;
  background-position: left bottom;
}


/* mainVisual ******************/
#featureDetailSection .mainVisual{
  display: block;
  width: 100%;
  margin-bottom: 5rem;
}

#featureDetailSection .mainVisual picture,
#featureDetailSection .mainVisual img{display: block; width: 100%; height: auto;}


/* indexList ******************/
#featureDetailSection .indexList{
  display: block;
  width: 100%;
  margin: 0 auto;
}
#featureDetailSection .indexList.border{
  max-width: 800px;
  padding: 3rem 4rem;
  border: 5px solid #EBEBEB;
  border-radius: 30px;
}

#featureDetailSection .indexList:not(:first-child){
  margin-top: 5rem;
}

#featureDetailSection .indexTTL{
  display: block;
  margin-bottom: 2.1rem;
  font-family: var(--font-title);
  font-size: 2.2rem;
  letter-spacing: 0.05em;
  font-weight: 500;
  line-height: 1.636363636363636;
  text-align: center;
}


/* indexCircleList **/
#featureDetailSection ul.indexCircleList{
  display: block;
}

#featureDetailSection ul.indexCircleList > li{
  display: block;
  padding: 2rem 0 0 2.5rem;
  
  background-size: 4px 1px;
  background-image: linear-gradient(to left, #D6D6D6 2px, transparent 2px);
  background-repeat: repeat-x;
  background-position: left top;
  
  font-family: var(--font-title);
  font-size: 1.8rem;
  letter-spacing: 0.025em;
  font-weight: 500;
  line-height: 1.5;
  
  position: relative;
}

#featureDetailSection ul.indexCircleList > li::before{
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #43AC33;
  position: absolute;
  left: 0;
  top: calc(2rem + 0.6rem);
}

#featureDetailSection ul.indexCircleList > li + li{margin-top: 1.8rem;}

#featureDetailSection ul.indexCircleList > li > a{
  text-decoration: none;
  transition: opacity .3s ease;
  color: #000000;
}
#featureDetailSection ul.indexCircleList > li > a:hover{opacity: .6;}


#featureDetailSection ul.indexCircleList > li > ul{
  display: block;
}
#featureDetailSection ul.indexCircleList > li > ul:not(:first-child){margin-top: 1.4rem;}

#featureDetailSection ul.indexCircleList > li > ul > li{
  display: block;
  padding-left: 2rem;
  font-family: var(--font-main);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
}
#featureDetailSection ul.indexCircleList > li > ul > li::before{
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #EBEBEB;
  position: absolute;
  left: 0;
  top: 0.5rem;
}

#featureDetailSection ul.indexCircleList > li > ul > li + li{
  margin-top: 1.4rem;
}

#featureDetailSection ul.indexCircleList > li > ul > li > a{
  font-family: var(--font-main);
  font-size: 1.6rem;
  font-weight: 400;
  text-decoration: none;
  color: #000000;
}


/* indexCircleList **/
#featureDetailSection ul.indexPanelList{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 1rem 1rem;
  width: 100%;
}

#featureDetailSection ul.indexPanelList > li{display: block;}


#featureDetailSection ul.indexPanelList > li > span,
#featureDetailSection ul.indexPanelList > li > a{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.7rem;
  padding: 0.6rem 2rem;
  border: 1px solid #EBEBEB;
  border-radius: 2.9rem;
  background: #F8F8F8;
  font-family: var(--font-main);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  color: #000000;
}


/* TTL ******************/
/*h2*/
#featureDetailSection .h2TTL{
  display: block;
  width: 100%;
  margin-bottom: 5rem;
  padding: 1.5rem 2rem;
  background: #E9F5DC;
  border-radius: 10px;
  font-family: var(--font-title);
  font-size: 2.8rem;
  letter-spacing: 0.025em;
  font-weight: 500;
  line-height: 1.285714285714286;
}

#featureDetailSection .h2TTL:not(:first-child){margin-top: 10rem;}


/*h3*/
#featureDetailSection .h3TTL{
  display: block;
  width: 100%;
  margin-bottom: 4rem;
  padding: 0 0 1.5rem;
  border-bottom: 4px solid rgba(0,0,0,.1);
  font-family: var(--font-title);
  font-size: 2.8rem;
  letter-spacing: 0.025em;
  font-weight: 500;
  line-height: 1.285714285714286;
  position: relative;
}
#featureDetailSection .h3TTL::after{
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  max-width: 100px;
  background: #43AC33;
  position: absolute;
  left: 0;
  bottom: -4px;
}

#featureDetailSection .h3TTL:not(:first-child){margin-top: 5rem;}
    


/*h4*/
#featureDetailSection .h4TTL{
  display: block;
  width: 100%;
  margin-bottom: 3rem;
  padding-left: 6.95rem;
  font-family: var(--font-title);
  font-size: 2.4rem;
  letter-spacing: 0.025em;
  font-weight: 500;
  line-height: 1.25;
  position: relative;
}
#featureDetailSection .h4TTL::after{
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  max-width: 5rem;
  background: #2B0F0F;
  position: absolute;
  left: 0;
  top: 1.2rem;
}

#featureDetailSection .h4TTL:not(:first-child){margin-top: 4rem;}
    

/*h5*/
#featureDetailSection .h5TTL{
  display: block;
  width: 100%;
  margin-bottom: 2rem;
  font-family: var(--font-title);
  font-size: 2.4rem;
  letter-spacing: 0.025em;
  font-weight: 500;
  line-height: 1.375;
  position: relative;
}

#featureDetailSection .h5TTL:not(:first-child){margin-top: 3rem;}



/* circleList ******************/
#featureDetailSection ul.circleList{
  display: block;
  width: 100%;
}

#featureDetailSection ul.circleList:not(:first-child){margin-top: 5rem;}


#featureDetailSection ul.circleList > li{
  display: block;
  padding: 0 0 0 1.8rem;
  font-size: 1.8rem;
  letter-spacing: 0.025em;
  font-weight: 400;
  line-height: 1.722222222222222;
  position: relative;
}

#featureDetailSection ul.circleList > li::before{
  content: '';
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #43AC33;
  position: absolute;
  left: 0;
  top: 0.9rem;
}

#featureDetailSection ul.circleList > li + li{margin-top: 2rem;}



/* circleList ******************/
#featureDetailSection ol.numList{
  width: 100%;
  list-style-type: none;
  counter-reset: numlist 0; 
}

#featureDetailSection ol.numList:not(:first-child){margin-top: 5rem;}


#featureDetailSection ol.numList > li{
  display: block;
  padding-left: 2.3rem;
  font-size: 1.8rem;
  letter-spacing: 0.05em;
  font-weight: 400;
  line-height: 1.722222222222222;
  position: relative;
}

#featureDetailSection ol.numList > li::before{
  counter-increment: numlist 1;
  content: counter(numlist) ".";
  width: 1.4rem;
  height: 2.2rem;
  line-height: 1;
  font-size: 1.6rem;
  position: absolute;
  left: 0;
  top: 0.7rem;
}

#featureDetailSection ol.numList > li + li{margin-top: 2rem;}


/* ttlBorderBox ******************/
#featureDetailSection dl.ttlBorderBox{
  display: block;
  width: 100%;
  border: 2px solid #EBEBEB;
  border-radius: 30px;
  overflow: hidden;
}

#featureDetailSection dl.ttlBorderBox:not(:first-child){margin-top: 5rem;}

#featureDetailSection dl.ttlBorderBox > dt{
  display: block;
  padding: 1.5rem 3rem;
  background: #E9F5DC;
  font-family: var(--font-title);
  font-size: 2.2rem;
  letter-spacing: 0.05em;
  font-weight: 500;
  line-height: 1.227272727272727;
}

#featureDetailSection dl.ttlBorderBox > dd{
  display: block;
  padding: 3rem;
}


/* ttlBorderBox ******************/
#featureDetailSection .tableBox{
  display: block;
  width: 100%;
  border: 2px solid #EBEBEB;
  border-radius: 30px;
  overflow: hidden;
}

#featureDetailSection .tableBox:not(:first-child){margin-top: 5rem;}

#featureDetailSection .tableBox > dl{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
}
#featureDetailSection .tableBox > dl:not(:nth-last-of-type(1)){
  border-bottom: 1px solid #D6D6D6;
}


#featureDetailSection .tableBox > dl > dt{
  display: block;
  width: 18rem;
  padding: 2.5rem 3rem 2.5rem 3rem;
  background: #F8F8F8;
  font-family: var(--font-title);
  font-size: 1.8rem;
  letter-spacing: 0.025em;
  font-weight: 500;
  line-height: 1.666666666666667;
}

#featureDetailSection .tableBox > dl > dd{
  display: block;
  width: calc(100% - 18rem);
  padding: 2.3rem 3rem 2.7rem 3rem;
  border-left: 1px solid #D6D6D6;
}



/* figTextBoxList ******************/
#featureDetailSection .figTextBoxList{
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 2rem 2rem;
}
#featureDetailSection .figTextBoxList:not(:first-child){
  margin-top: 4rem;
}

#featureDetailSection .figTextBoxList + .figTextBoxList{margin-top: 5rem;}


#featureDetailSection .figTextBoxList > *{
  flex-shrink: 1;
  width: 100%;
}

/* figTextBox ******************/
#featureDetailSection .figTextBox{
  display: block;
  width: 100%;
}
#featureDetailSection .figTextBox:not(:first-child){
  margin-top: 3rem;
}
#featureDetailSection .figTextBoxList .figTextBox:not(:first-child){margin-top: 0;}


#featureDetailSection .figTextBox > .fig{
  display: block;
}

#featureDetailSection .figTextBox > .fig picture{
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 10px;
}
#featureDetailSection .figTextBox > .fig picture img{display: block; width: 100%; height: auto;}

#featureDetailSection .figTextBox > .fig > p{
  display: block;
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 1.75;
}

#featureDetailSection .figTextBox > .text{
  display: block;
  width: 100%;
  margin-top: 2rem;
}


/*horizontal **/
#featureDetailSection .figTextBox.horizontal{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#featureDetailSection .figTextBox.horizontal > .fig{
  width: 48%;
}

#featureDetailSection .figTextBox.horizontal > .text{
  width: 48%;
  margin-top: 0;
}



/* checkList ******************/
#featureDetailSection  ul.checkList{
  display: block;
}
#featureDetailSection  ul.checkList:not(:first-child){
  margin-top: 2rem;
}

#featureDetailSection  ul.checkList > li{
  display: block;
  padding-left: 5rem;
  position: relative;
}
#featureDetailSection  ul.checkList > li::before{
  content: '';
  display: block;
  width: 3rem;
  height: 2.604rem;
  background: url("../img/feature/icon_check_point.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 0.6rem;
}

#featureDetailSection  ul.checkList > li + li{margin-top: 2.7rem;}


/* pointList ******************/
#featureDetailSection  ol.pointList{
  display: block;
  counter-reset: pointlist 0;
}

#featureDetailSection  ol.pointList:not(:first-child){
  margin-top: 2rem;
}

#featureDetailSection  ol.pointList > li{
  display: block;
  padding-top: 0.2rem;
  padding-left: 12.5rem;
  position: relative;
}
#featureDetailSection  ol.pointList > li::before{
  counter-increment: pointlist 1;
  content: "POINT." counter(pointlist);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10rem;
  height: 4rem;
  background: #43AC33;
  border-radius: 5px;
  line-height: 1;
  font-size: 1.6rem;
  font-weight: 600;
  color: #FFFFFF;
  position: absolute;
  left: 0;
  top: 0;
}

#featureDetailSection  ol.pointList.orange > li::before{
  background-color: inherit;
  color: #FA9900;
  border: 1px solid #FA9900;
}


#featureDetailSection  ol.pointList > li + li{
  margin-top: 2rem;
}




/* column2LineBox ******************/
#featureDetailSection .column2LineBox{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0 4rem;
}

#featureDetailSection .column2LineBox:not(:first-child){margin-top: 4rem;}


#featureDetailSection .column2LineBox > *{
  width: 100%;
  flex-shrink: 1;
}


/* column2LineBox ******************/
#featureDetailSection .recipeImgBox{
  display: block;
  width: 100%;
}

#featureDetailSection .recipeImgBox .fig{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
}
#featureDetailSection .recipeImgBox .fig picture,
#featureDetailSection .recipeImgBox .fig img{display: block; width: 100%; height: auto;}

#featureDetailSection .recipeImgBox .text:not(:first-child){margin-top: 2rem;}


/* cookingTime ******************/
#featureDetailSection .cookingTime{
  display: block;
  width: 100%;
  padding-left: 4rem;
  font-family: var(--font-title);
  font-size: 2.4rem;
  letter-spacing: 0.025em;
  font-weight: 500;
  line-height: 1.375;
  position: relative;
}

#featureDetailSection .cookingTime:not(:first-child){margin-top: 4rem;}

#featureDetailSection .cookingTime::before{
  content: '';
  display: block;
  width: 3rem;
  height: 3rem;
  background: url("../img/feature/icon_time.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 0;
}

/* materialTTL ******************/
#featureDetailSection .materialTTL{
  display: block;
  width: 100%;
  padding-left: 4rem;
  font-family: var(--font-title);
  font-size: 2.4rem;
  letter-spacing: 0.025em;
  font-weight: 500;
  line-height: 1.375;
  position: relative;
}

#featureDetailSection .materialTTL:not(:first-child){margin-top: 4rem;}

#featureDetailSection .materialTTL::before{
  content: '';
  display: block;
  width: 3rem;
  height: 3rem;
  background: url("../img/feature/icon_cooking.svg") center center no-repeat;
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 0;
}


/* recipeMaterialBox ******************/
#featureDetailSection .recipeMaterialBox{
  display: block;
  width: 100%;
  padding: 4rem 3rem;
  background: #FFFCF0;
  border-radius: 30px;
}


/* materialList ******************/
#featureDetailSection dl.materialList{
  display: block;
  
  background-size: 4px 1px;
  background-image: linear-gradient(to left, #D6D6D6 2px, transparent 2px);
  background-repeat: repeat-x;
  background-position: left bottom;
}

#featureDetailSection dl.materialList:not(:first-child){margin-top: 2rem;}

#featureDetailSection dl.materialList > dt{
  display: block;
  margin-bottom: 1.3rem;
  font-family: var(--font-title);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: left;
  line-height: 1.666666666666667;
}



#featureDetailSection dl.materialList > dd > dl{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0 1.3rem;
  font-size: 1.8rem;
  font-weight: 400;
  text-align: left;
  line-height: 1.75;
  letter-spacing: 0.025em;
  
  background-size: 4px 1px;
  background-image: linear-gradient(to left, #D6D6D6 2px, transparent 2px);
  background-repeat: repeat-x;
  background-position: left top;
}


#featureDetailSection dl.materialList > dd.amendment,
#featureDetailSection dl.materialList > dd > dl > dd.amendment{
  width: 100%;
  padding-top: 1.6rem;
  font-size: 1.6rem;
  line-height: 1.75;
}

#featureDetailSection dl.materialList > dd.amendment{
  padding-top: 0.3rem;
  padding-bottom: 1.3rem;
}



/* howtoStepList ******************/
#featureDetailSection ol.howtoStepList{
  display: block;
  width: 100%;
  counter-reset: howtoStep 0;
}

#featureDetailSection ol.howtoStepList:not(:first-child){margin-top: 3rem;}


#featureDetailSection ol.howtoStepList > li{
  display: block;
  padding-top: 0.5rem;
  padding-left: 6.5rem;
  padding-bottom: 3rem;
  
  background-size: 4px 1px;
  background-image: linear-gradient(to left, #D6D6D6 2px, transparent 2px);
  background-repeat: repeat-x;
  background-position: left bottom;
  
  position: relative;
}

#featureDetailSection ol.howtoStepList > li::before{
  counter-increment: howtoStep 1;
  content: "" counter(howtoStep);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.5rem;
  height: 4.5rem;
  background: #EAC564;
  border-radius: 5px;
  line-height: 1;
  font-size: 2.4rem;
  font-weight: 600;
  color: #FFFFFF;
  position: absolute;
  left: 0;
  top: 0;
}

#featureDetailSection ol.howtoStepList > li + li{
  margin-top: 2.5rem;
}


#featureDetailSection ol.howtoStepList > li > .h5TTL:first-child{padding-top: 0.2rem;}


/* movieWrap ******************/
#featureDetailSection .movieWrap{
  width: 100%;
  aspect-ratio: 16 / 9;
}

#featureDetailSection .movieWrap:not(:first-child){margin-top: 2.5rem;}

#featureDetailSection .movieWrap iframe {
  width: 100%;
  height: 100%;
}


/* featureShareBtns ******************/
#featureDetailSection .featureShareBtns{
  display: block;
  margin-top: 6rem;
  padding: 1.5rem;
  background: #F8F8F8;
  border-radius: 5px;
}

#featureDetailSection .featureShareBtns > dl{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1.5rem;
}

#featureDetailSection .featureShareBtns > dl > dt{
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}

#featureDetailSection .featureShareBtns > dl > dd{}


#featureDetailSection ul.shareBtn{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 1.5rem;
}

#featureDetailSection ul.shareBtn > li{
  width: 3rem;
}

#featureDetailSection ul.shareBtn > li > a,
#featureDetailSection ul.shareBtn > li img{
  display: block;
  width: 100%;
  height: auto;
  color: #000000;
}

/* imgLpBox ******************/
#featureDetailSection .imgLpBox{
  display: block;
  margin: 0 auto;
}

#featureDetailSection .imgLpBox:not(:first-child){margin-top: 5rem;}

#featureDetailSection .imgLpBox img,
#featureDetailSection .imgLpBox picture,
#featureDetailSection .imgLpBox figure{
  display: block;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}



/* itemList ******************/
#featureDetailSection .itemList > ul{
  justify-content: center;
}

#featureDetailSection .itemList > ul > li{
  width: 23.5%;
  margin-right: 2%;
  position: relative;
}

#featureDetailSection .itemList > ul > li:nth-of-type(3n){margin-right: 2%;}
#featureDetailSection .itemList > ul > li:nth-of-type(4n),
#featureDetailSection .itemList > ul > li:nth-last-of-type(1){margin-right: 0;}
#featureDetailSection .itemList > ul > li:nth-of-type(n + 4){margin-top: 0;}
#featureDetailSection .itemList > ul > li:nth-of-type(n + 5){margin-top: 3rem;}


#featureDetailSection .itemList > ul > li a{
  text-decoration: none;
  transition: opacity .3s ease;
  color: #000000;
}

#featureDetailSection .itemList > ul > li a:hover{opacity: .6;}


#featureDetailSection .itemList > ul > li p.name{
  margin-top: 2rem;
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.5;
}

#featureDetailSection .itemList > ul > li .price{
  padding-top: 1rem;
}

#featureDetailSection .itemList > ul > li .priceInner p{
  margin-top: 0;
}

#featureDetailSection .itemList > ul > li .btnfavorit{
  display: block;
  width: 100%;
  padding-top: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
}
#featureDetailSection .itemList > ul > li .btnfavorit > a{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid #6E6E6E;
  border-radius: 50%;
  background: url("../img/common/icon_list_favorit.svg") center center no-repeat #FFFFFF;
  background-size: 2rem auto;
  cursor: pointer;
  pointer-events: all;
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
}
#featureDetailSection .itemList > ul > li .btnfavorit.active > a{
  background: url("../img/common/icon_list_favorit_active.svg") center center no-repeat #FFFFFF;
  background-size: 2rem auto;
}


#featureDetailSection .itemList > ul > li .outline{display: none;}


/*単品の場合*****/

#featureDetailSection .itemList > ul > li:nth-of-type(1):nth-last-of-type(1){
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 42rem;
  max-width: 800px;
  border: 5px solid #EBEBEB;
  border-radius: 30px;
  padding: 3rem 3rem 3rem 43rem;
  position: relative;
}

#featureDetailSection .itemList > ul > li:nth-of-type(1):nth-last-of-type(1) .outer{
  display: block;
  width: 100%;
  position: static;
}

#featureDetailSection .itemList > ul > li:nth-of-type(1):nth-last-of-type(1) .fig{
  width: 36rem;
  height: 36rem;
  position: absolute;
  left: 3rem;
  top: calc(50% - 18rem);
}

#featureDetailSection .itemList > ul > li:nth-of-type(1):nth-last-of-type(1) .outline{
  display: block;
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 2;
}


#featureDetailSection .itemList > ul > li:nth-of-type(1):nth-last-of-type(1) .btnfavorit{
  width: 36rem;
  height: 36rem;
  padding: 0;
  top: 3rem;
  left: 3rem;
}
#featureDetailSection .itemList > ul > li:nth-of-type(1):nth-last-of-type(1) .btnfavorit > a{
  right: 1rem;
  bottom: 1rem;
}




/**************************************
toolTip
**************************************/
#productDetailSection .invisible {display: block;}
#addFavoriteTip {
  display: none;
  margin: 0;
  padding: 2rem;
  width: 40rem;
  border-radius: 10px;
  background-color: rgba(0,0,0,.6);
  overflow: hidden;
  font-size: 1.8rem;
  text-align: center;
  z-index: 2000;
  color:#FFFFFF;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
#addFavoriteTip a{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 24rem;
  height: 3rem;
  padding: 0 1rem 0 1rem;
  margin: 2rem auto 0;
  background: #FFFFFF;
  border-radius: 1.5rem;
  border: 1px solid #000000;
  font-weight: 500;
  font-size: 1.2rem;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: #000000;
  position: relative;
}

/* 768px以上 (タブレット等も含むデフォルトのスタイル) */
.line-buttons-wrapper {
    display: flex;
    /* 768px～999pxの間はスマホと同じ縦並びにする場合 */
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px 0;
    /* もし768pxから横並びにしたい場合は、最初から flex-direction: row; を指定 */
}

/* PC用画像はスマホと共通のスタイルで良いため、
   feature_sp.css にあればこちらには必須ではない。
   もしPCでのみ変えたいスタイルがあればここに記述。 */
.line-buttons-wrapper picture img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 1000px以上の画面幅でスタイルを上書き（PC表示） */
@media (min-width: 1000px) {
    .line-buttons-wrapper {
        flex-direction: row; /* 横並び */
        justify-content: center; /* PC表示時に画像を中央揃え */
        gap: 30px;           /* 画像間の隙間をPC用に調整 */
        /* align-items: center; は継承されるのでそのままで良いことが多い */
        /* padding: 20px 0; も共通ならそのままで良い */
    }
}

#featureDetailSection a[target="_blank"].no-external-icon::after {
  display: none !important; /* アイコンを非表示にする */
  /* content: none !important; もしくは background: none !important; でも可 */
}