@charset "utf-8";

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ● ラインアップ 専用CSS                                 */
/*    ・ページ固有の処理を記述                             */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body#lineup{}


/* PageTitleArea
--------------------------------------------------- */
.PageTitleArea{}
    #ContentsDivision .PageTitleArea .PageTitle .Text:before{
      content: url(../img/lineup/text/title-en.png);
    }




/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    一覧ページ                                           */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.page-parent {}
.page-parent .MainContentsArea{}
.page-parent .MainContentsArea .PageButtonBox{
  display: none;
}
/* bp2より幅が 狭い 時 */
.rsbp-under-bp2.page-parent #ContentsDivision .MainContentsArea{
  font-size: 100%;
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*    詳細ページ                                           */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.page-child {}


/* MainContentsArea
--------------------------------------------------- */
.page-child .MainContentsArea{}
    .page-child .MainContentsArea .Logo{
      margin-bottom: 30px;
    }
    /* bp2より幅が 狭い 時 */
    .rsbp-under-bp2.page-child .MainContentsArea .Logo{
      text-align: center;
    }
        .page-child .MainContentsArea .Logo img{
          height: 110px;
          width: auto;
        }
        .page-child .MainContentsArea #post-468 .Logo img,
        .page-child .MainContentsArea #post-468 .Logo img{
          height: 95px;
        }
        /* bp2より幅が 狭い 時 */
        .rsbp-under-bp2.page-child .MainContentsArea .Logo img{
          height: 70px;
        }
        .rsbp-under-bp2.page-child .MainContentsArea #post-468 .Logo img,
        .rsbp-under-bp2.page-child .MainContentsArea #post-468 .Logo img{
          height: 60px;
        }
    .page-child .MainContentsArea .SknTplImageParagraph{
      margin-bottom: 100px!important;
    }
    /* bp2より幅が 狭い 時 */
    .rsbp-under-bp2.page-child .MainContentsArea .SknTplImageParagraph{
      margin-bottom: 75px!important;
    }
    .page-child .MainContentsArea .SknTplImageParagraph.Info{}
        .page-child .MainContentsArea .SknTplImageParagraph.Info .TextItem{
        }
        .page-child .MainContentsArea .SknTplImageParagraph.Info .ImageItem{
          position: relative;
        }
            .page-child .MainContentsArea .SknTplImageParagraph.Info .TsuboPrice{
              position: absolute;
              top : -1em;
              left: -2em;
              z-index: 1;
              color: #fff;
              width: 4em;
              height: 4em;
              border-radius: 100%;
              font-size: 250%;
              font-weight: bold;
              line-height: 1.1;
              padding-top: 0.7em;
              text-align: center;
              display:none;/*202204非表示対応*/
            }
            /* bp2より幅が 狭い 時 */
            .rsbp-under-bp2.page-child .MainContentsArea .SknTplImageParagraph.Info .TsuboPrice{
              position: relative;
              left: 0;
              top: 0;
              margin: 0 auto -30px;
            }
            .page-child .MainContentsArea #post-8   .SknTplImageParagraph.Info .TsuboPrice{   /* Meguru */
              background-color: #4CA3F2;
            }
            .page-child .MainContentsArea #post-443 .SknTplImageParagraph.Info .TsuboPrice{   /* Haruno */
              background-color: #2BAFB7;
            }
            .page-child .MainContentsArea #post-453 .SknTplImageParagraph.Info .TsuboPrice{   /* 檜 */
              background-color: #9D5801;
            }
            .page-child .MainContentsArea .post-468 .SknTplImageParagraph.Info .TsuboPrice{   /* Leafzero */
              background-color: #69C;
            }
                .page-child .MainContentsArea .SknTplImageParagraph.Info .TsuboPrice .Title{
                  font-size: 40%;
                }
                .page-child .MainContentsArea .SknTplImageParagraph.Info .TsuboPrice .fontNumber{
                  vertical-align: bottom;
                }
                .page-child .MainContentsArea .SknTplImageParagraph.Info .TsuboPrice .Unit{
                  font-size: 30%;
                  margin-left: .5em;
                }

        /*--------------------------------------------------- */
        /* Leafzero   .post-468
        /*--------------------------------------------------- */
        .page-child .MainContentsArea .post-468 .SknTplImageParagraph:not(.Info) .TextItem{
          width: 45%;
        }
        .page-child .MainContentsArea .post-468 .SknTplImageParagraph:not(.Info) .ImageItem{
          width: 55%;
        }
        .page-child .MainContentsArea .post-468 .ColumnGroup{}
            .page-child .MainContentsArea .post-468 .ColumnGroup .Column{
              text-align: center;
            }
        .page-child .MainContentsArea .post-468 .HisashiImage1{
          width: 60%;
          margin: 0 auto;
        }
        /* bp2より幅が 狭い時 */
        .rsbp-under-bp2.page-child .MainContentsArea .post-468 .HisashiImage1{
          width: 100%;
        }
        .page-child .MainContentsArea .post-468 .MierukaImage{
          margin: 0 -20px;
        }
        /* bp2より幅が 狭い時 */
        .rsbp-under-bp2.page-child .MainContentsArea .post-468 .MierukaImage{
          margin: 0;
        }
            .page-child .MainContentsArea .post-468 .MierukaImage li{
              padding: 20px;
            }
            /* bp2より幅が 狭い時 */
            .rsbp-under-bp2.page-child .MainContentsArea .post-468 .MierukaImage li{
              width: 100%;
              padding: 0 0 15px;
            }
                .page-child .MainContentsArea .post-468 .MierukaImage li img{
                  width: auto;
                }
            .page-child .MainContentsArea .post-468 #Floor1{}
            /* bp2より幅が 狭い時 */
            .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor1,
            .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor2{
              width: 100%;
              overflow: hidden;
              transition: 0.3s ease 0s;
              margin: 0 auto;
              position: relative;
            }
            .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor1.Zoom,
            .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor2.Zoom{
              overflow: scroll;
              height: 85vw;
              border-radius: 5px;
              padding: 5px;
              border: 1px solid #bdbdbd;
              box-shadow: 0 0 5px 1px rgba(0,0,0,0.15) inset;
            }
                .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor1.Zoom img,
                .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor2.Zoom img{
                  width: 900px;
                  max-width: initial;
                }
            .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor1ZoomButton,
            .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor2ZoomButton{
              text-align: center;
              margin-top: 1em;
            }
                .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor1ZoomButton span,
                .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor2ZoomButton span{
                  display: inline-block;
                  background: #555;
                  color: #fff;
                  font-size: 75%;
                  padding: 0.15em 1em;
                  border-radius: 1em;
                }
                .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor1ZoomButton span:before,
                .rsbp-under-bp2.page-child .MainContentsArea .post-468 #Floor2ZoomButton span:before{
                  content: "\e815";
                  font-family: "fontello";
                  margin-right: 0.5em;
                }
                .rsbp-under-bp2.page-child .MainContentsArea .post-468 .Zoom + #Floor1ZoomButton span:before,
                .rsbp-under-bp2.page-child .MainContentsArea .post-468 .Zoom + #Floor2ZoomButton span:before{
                  content: "\e838";
                }
                
                



/* --------------------------------------------------- */
/* BasicArea                                    　　   */
/* --------------------------------------------------- */
.BasicArea{}


.BasicArea.SubColorArea{
  background:#f9f7f1;
}


     /* bp2より幅が 広い 時 */
    .rsbp-over-bp2 .BasicArea{
       min-width:1000px;
    }



.BasicArea .BasicBlock{
  
}

.BasicBlock .BlockHeader{
  text-align:center;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.BasicBlock .BlockHeader .FloatTitle{
   margin-top:-120px;
}
.BasicBlock .BlockHeader .EngHeading{
  margin:0;
  font-size:1.3em;
  font-weight:600;
  line-height:1.3;
  color:#306e44;
}
.BasicBlock .BlockHeader .Heading{
  margin:10px auto;
  line-height:1.3;
  font-weight:700;
  font-size:2em;
  letter-spacing: 0;
}

#ContentsDivision  .NarrowArea .BasicBlock .BlockHeader{
  max-width:1060px;
}




/*トップ*/
#ContentsDivision .MainContentsArea > .PageWidthSetter {
  width:100%!important;
  max-width:3000px!important;
}
.rsbp-over-bp2 #ContentsDivision  .MainContentsArea > .PageWidthSetter {
  max-width:3000px!important;
}

.rsbp-over-bp2 .BasicArea {
  min-width: 1000px;
}
.BasicBlock .BlockHeader {
  position:relative;
  z-index:10;
}



/*写真切り欠き*/
.RTriming{
  overflow:hidden;
}
.RTriming.TypeTL{
  border-radius:70px 0 0 0;
}
.RTriming.TypeUL{
  border-radius: 0 0 0 70px;
}
.RTriming.TypeUR{
  border-radius:0 70px 0 0;
}

.TopPostLineUpArea  .SknTplImageParagraph{
  /*
  padding-top:30px
*/
}

/*左づめ*/
.LeftBasicBlock{
  position:relative;
}
.LeftBasicBlock::before{
  position: absolute;
  content: "";
  background: #f9f7f1;
  top: -40px;
  right: 0;
  z-index: 0;
  width:calc(76% + 00px);
  height:calc(100% + 120px);
  border-radius:125px 0 0 125px;
}

.LeftBasicBlock .BlockHeader{ 
  margin:40px auto 30px;
  width: 100%;
  align-items:start;
  text-align: left;
  z-index: 1;
}
.LeftBasicBlock .BlockHeader .EngHeading{
  z-index: 1;
}
.LeftBasicBlock .BlockHeader .Heading{
  margin: 0 auto 0 0;
  align-items: start;
  text-align: left;
  display:inline-block;
  z-index: 1;
  letter-spacing:0;
}
.LeftBasicBlock .BlockContents .CircleArrowButtonItem{
   margin-top:60px;
   max-width:1060px;
}

/*右づめ*/
.RightBasicBlock{
  position:relative;
}
.RightBasicBlock::before{
  position: absolute;
  content: "";
  background: #f9f7f1;
  /*top: -50px;*/
  top: -20px;
  left: 0;
  z-index: 0;
  width:calc(76% + 00px);
  height:calc(100% + 120px);
  border-radius:0 125px 125px 0;
}

.RightBasicBlock .BlockHeader{ 
  margin:40px auto 30px;
  width: 100%;
  align-items:start;
  text-align: left;
  z-index: 1;
}
.RightBasicBlock .BlockHeader .EngHeading{
  z-index: 1;
}
.RightBasicBlock .BlockHeader .Heading{
  margin: 0 auto 0 0;
  align-items: start;
  text-align: left;
  display:inline-block;
  z-index: 1;
  letter-spacing:0;
}
.RightBasicBlock .BlockHeader .BlockCopy{
  z-index: 1;
  width:100%;
  max-width:560px;
  margin-right:auto;
}
.RightBasicBlock .BlockContents .CircleArrowButtonItem{
   margin-top:60px;
   max-width:1060px;
}

/*ラインナップ*/
.TopPostLineUpArea{}
.TopPostLineUpArea .BasicBlock{

}

#ContentsDivision .TopPostLineUpArea .PageWidthSetter {
  width: 100%;
  max-width: 1080px;
}

.TopPostLineUpArea .SknTplImageParagraph{
  z-index: 1;
  position:relative;
  padding-bottom:40px;
}


.TopPostLineUpArea .SknTplImageParagraph .ImageItem {
  width: 100%;
  max-width:565px;
  position: relative;
  padding:0;
}
.TopPostLineUpArea .SknTplImageParagraph .TextItem {
  width: 100%;
  max-width:452px;
  position: relative;
   font-weight:600;
}
.TopPostLineUpArea .ProductsNo{
   font-size:100%;
   margin-top:-20px;
   margin-bottom:10px;
   padding-bottom:8px;
   border-bottom:1px solid #222;
   display:inline-block;
}
.MainContentsArea  .TopPostLineUpArea .ProductName{
  margin: 0;
  padding: 0;
  font-size:300%;
  color:#306e44;
  display:block;
  letter-spacing:0;
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
}
.TopPostLineUpArea .Copy{
  line-height:2.2;
  font-size:120%;
}
.TopPostLineUpArea .FevalitList{
  list-style:none;
  color:#306e44;
  margin:10px auto;
}
.TopPostLineUpArea .SubCopy{

}


.LongArrowButton{
  text-align:left;
  height:40px;
}
.LongArrowButton a{
  padding: 1.25em;
  min-width:0;
}
.LongArrowButton a:after{
  display:none;
}
.LongArrowButton .Icon{
  display:inline-block;
  -webkit-transition: all .4s;
  transition: all .4s;
  position:relative;
}
.LongArrowButton a:hover .Icon{
  margin-left: 20px;
  -webkit-transition: all .4s;
  transition: all .4s;
}

.LongArrowButton .Icon::after {
  content: "";
  width: 30px;
  height: 1.0px;
  background: #222;
  display: inline-block;
  margin: 0 auto;
  position: absolute;
  right: 5px;
  top: 50%;
  top: 47%;
}

.LongArrowButton .LongArrow{
  position:relative;
}
.LongArrowButton .icon-angle-right::before {
  content: '\f105';
  width:60px;
  text-align:right;
}

.MainContentsArea > div[class*="post"] table th {
  border-bottom: 1px solid rgb(221, 214, 185);
  padding: 0.75em 0.5em;
  vertical-align: middle;
  font-size:100%;
  font-weight: 600;
}
.MainContentsArea > div[class*="post"] table td {
  border: 1px solid rgba(150,150,150,0.25);
  padding: 0.75em 0.5em;
  vertical-align: middle;
  font-size:100%;
  font-weight: 600;
}

.MainContentsArea .SpBr{
  display:none;
}


.Button.LongArrowButton a{

}

#ContentsDivision a[target]::after{
  display:none;
}


#FooterDivision {
  /*padding-top: 100px;*/
}

/*レスポンシブ*/

@media screen and (max-width: 1200px) {

.LeftBasicBlock{
  position:relative;
}
  .LeftBasicBlock::before{
    position: absolute;
    content: "";
    background: #f9f7f1;
    top: -40px;
    right: -15px;
    z-index: 0;
    width:calc(76% + 00px);
    height:calc(100% + 120px);
    border-radius:125px 0 0 125px;
  }

  .RightBasicBlock::before{
    position: absolute;
    content: "";
    background: #f9f7f1;
    /*top: -50px;*/
    top: -20px;
    left: -15px;
    z-index: 0;
    width:calc(76% + 00px);
    height:calc(100% + 120px);
    border-radius:0 125px 125px 0;
  }
  
  
  
}


@media screen and (max-width:767px){

.MainContentsArea .SpBr{
  display:block;
}
.MainContentsArea .PcBr{
  display:none;
}

  .BasicBlock .BlockHeader .EngHeading {
      margin: 0;
      font-size: 1.1em;
      font-weight: 600;
      line-height: 1.3;
      color: #306e44;
  }
  .BasicBlock .BlockHeader .Heading {
      margin: 10px auto;
      line-height: 1.3;
      font-weight: 700;
      font-size: 2em;
      letter-spacing: 0;
  }


  .TopPostLineUpArea .SknTplImageParagraph{
    z-index: 1;
    position:relative;
    padding-bottom:0;
    padding-bottom:30px;
  }


}
@media screen and (max-width:500px){
  .RightBasicBlock::before{
    position: absolute;
    content: "";
    background: #f9f7f1;
    /*top: -60px;*/
    top: -10px;
    left: -15px;
    z-index: 0;
    width:calc(85% + 00px);
    /*height:calc(100% + 120px);*/
    height:calc(100% + 70px);
    border-radius:0 70px 70px 0;
  }
  .LeftBasicBlock::before{
    position: absolute;
    content: "";
    background: #f9f7f1;
    top: -60px;
    right: -15px;
    z-index: 0;
    width:calc(85% + 00px);
    height:calc(100% + 120px);
    border-radius:70px 0 0 70px;
  }


  /*文字サイズ調整*/
  .BasicBlock .BlockHeader .FloatTitle {
      margin-top: -100px;
      margin-left:auto;
      margin-right:auto;
  }

  .BasicBlock .BlockHeader .EngHeading {
      margin: 0;
      font-size: 1.1em;
      font-weight: 600;
      line-height: 1.3;
      color: #306e44;
      text-align:center;
      width:100%;
  }
  .BasicBlock .BlockHeader .Heading {
      margin: 10px auto;
      line-height: 1.3;
      font-weight: 700;
      font-size: 125%;
      letter-spacing: 0;
      text-align:center;
      width:100%;
  }



  .MainContentsArea  .TopPostLineUpArea .ProductName{
    margin: 0;
    padding: 0;
    font-size:200%;
    color:#306e44;
  }

  .TopPostLineUpArea .Copy{
    line-height:2.2;
    font-size:95%;
  }










}