/* ===============================================
  ### Foundation ###
=============================================== */
/* 
 main {
  background: url(../imgs/SP.jpg) center 0/100% no-repeat;
}
.main-area {
  opacity: .6;
}
@media only screen and (min-width: 560px) {
  main {
    background: url(../imgs/PC.jpg) center 0/137% no-repeat;
  } 
}  */
 
/* base style */
.main-area,
.main_inner {
  -webkit-font-feature-settings: normal;
  color: #4d4d4d;
  font-family: "NotoSansCJKjp", "Noto Sans JP", sans-serif;
  font-feature-settings: normal;
  font-style: normal;
  font-weight: normal;
  letter-spacing: .04em;
  margin: auto;
  text-align: left;
  width: 100%;
}
.main-area .title_txt,
.main_inner .title_txt{
  font-weight: 500;
}
.section-container .title_txt,
.section-container .lead-txt{
  color: #3e3e3e;
}
.main-area *,
.main_inner * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.main-area *::before, .main-area *::after,
.main_inner *::before, .main_inner *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.main-area img, .main-area svg,
.main_inner img,
.main_inner svg {
  height: auto;
  width: 100%;
}
.main-area a,
.main_inner a {
  overflow: visible;
  display: block;
}
.main-area {
  overflow-x: hidden;
}

/* toggle visibility for responsive object */
.sp-component {
  display: block;
}
.pc-component {
  display: none;
}
#main-container picture{
  display: block;
}
#main-container #breadcrumb a{
  display: inline;
}
.picture-box{
  background-color: #fff;
}

/* ====================================================================
### animation ###
==================================================================== */
.effect-fade{
  -webkit-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  opacity: 0;
}
.effect-fadein{
  opacity: 1;
}

/* ===============================================
### Object ###
=============================================== */
/* breadcrumb__list */
.cateList {
  width: 89%;
  margin: calc(5 * (100vw / 375)) auto;
  margin-top: calc(63 * (100vw / 375));
  padding: calc(16 * (100vw / 375)) 0;
  color: #0A1F05;
  font-size: calc(10 * (100vw / 375));
  letter-spacing: 0.01em;
  line-height: calc(20 * (100vw / 375));
}

/* buy__btn */
.buy__btn {
  display: block;
  vertical-align: top;
  margin: auto;
  margin-top: calc(10 * (100vw / 375));
  height: calc(16 * (100vw / 375));
  width: calc(40 * (100vw / 375));
}

/* viewall__btn */
.viewall__btn {
  display: block;
  height: calc(50 * (100vw / 375));
  width: calc(300 * (100vw / 375));
}
/* ===============================================
  ### fonts ###
=============================================== */


/* ===============================================
  ### Layout ###
=============================================== */
/* ===========================
* Style of SP-view *
=========================== */


/* heading */
.heading{
  position: relative;
}
.heading .mainvisual-container{
  position: relative;
  width: 100%;
  height: calc(500 * (100vw / 375));
}
.heading .mainvisual-container li{
  position: absolute;
}
.heading .mainvisual-container .mainvisual-wapper--1{
  top: calc(0 * (100vw / 375));
  left: calc(0 * (100vw / 375));
  width: calc(280 * (100vw / 375));
}
.heading::before{
  position: absolute;
  display: block;
  content: "";
  top: calc(250 * (100vw / 375));
  left: calc(-40 * (100vw / 375));
  width: 100vw;
  height: calc(200 * (100vw / 375));
  z-index: -10;
  background-color: #4B4435;
}
.heading .mainvisual-container .mainvisual-wapper--2{
  bottom: calc(0 * (100vw / 375));
  right: calc(0 * (100vw / 375));
  width: calc(279.5 * (100vw / 375));
}
.heading::after{
  position: absolute;
  display: block;
  content: "";
  top: calc(50 * (100vw / 375));
  right: calc(-40 * (100vw / 375));
  width: 100vw;
  height: calc(200 * (100vw / 375));
  z-index: -10;
  background-color: #EDEADE;
}
.heading .mainvisual-container .logo-wrapper{
  top: 49.3%;
  left: 50%;
  width: calc(410.62 * (100vw / 375));
  transform: translateX(-50%) translateY(-50%);
  background-size: calc(350.62 * (100vw / 375)) calc(91.48 * (100vw / 375));
  background-repeat: no-repeat;
}
.heading .lead-txt{
  margin: calc(36.2 * (100vw / 375)) calc(22 * (100vw / 375)) 0 calc(20 * (100vw / 375));
  font-size: calc(14 * (100vw / 375));
  line-height: 2;
  letter-spacing: normal;
  color: #4d4d4d;
}


/* secton01 */
.sec01{
  width: calc(375 * (100vw / 375));
  margin: auto;
  margin-top: calc(56 * (100vw / 375));
  padding-bottom: calc(59 * (100vw / 375));
  /* background-color: #ddd; */
}
.section-container .item-container{
  padding-top: calc(60 * (100vw / 375));
}
.section-container .item-container .item-wapper--1{
  width: calc(330 * (100vw / 375));
  margin: 0 0 0 auto;
  background-color: #fff;
}
.section-container .item-container .item-wapper--2{
  width: calc(240 * (100vw / 375));
  margin: calc(-40 * (100vw / 375)) 0 0;
  background-color: #fff;
  position: relative;
}
.sec01 .item-container .item-wapper--1{
  position: relative;
}
.sec01 .item-container .item-wapper--1::before{
  position: absolute;
  display: block;
  content: "";
  top: calc(23 * (100vw / 375));
  left: calc(13 * (100vw / 375));
  width: calc(40.8 * (100vw / 375));
  height: calc(257.8 * (100vw / 375));
  background-image: url(../imgs/mornig.svg);
  background-size: calc(40.8 * (100vw / 375)) calc(257.8 * (100vw / 375));
  background-repeat: no-repeat;
}
.section-container .product-container{
  margin: calc(20 * (100vw / 375)) calc(20 * (100vw / 375)) 0;
}
.section-container .product-container .title-txt{
  font-size: calc(16 * (100vw / 375));
  font-weight: 500;
  line-height: 1.56;
  letter-spacing: 0.04em;
}
.section-container .product-container .lead-txt{
  font-size: calc(13 * (100vw / 375));
  line-height: 1.81;
  letter-spacing: normal;
}
.section-container .product-container .lead-txt{
  margin-top: calc(20 * (100vw / 375));
}
.section-container .product-container .credit__container{
  display: flex;
  justify-content: space-evenly;
  position: relative;
  width: 100%;
  margin: calc(56 * (100vw / 375)) auto 0;
  padding-top: calc(30 * (100vw / 375));
  padding-bottom: calc(40 * (100vw / 375));
  border: solid 1px #707070;
}
.section-container .product-container .credit__container::before{
  display: block;
  content: "";
  position: absolute;
  top: calc(-12 * (100vw / 375));
  left: calc(-10 * (100vw / 375));
  width: calc(249.13 * (100vw / 375));
  height: calc(41 * (100vw / 375));
  background-image: url(../imgs/other-color.svg);
  background-size: calc(223.13 * (100vw / 375)) calc(19.55 * (100vw / 375));
  background-repeat: no-repeat;
  background-position-x: calc(10 * (100vw / 375));
  z-index: 10;
}
.section-container .product-container .credit__container .credit__wrapper{
  width: calc(150 * (100vw / 375));
  text-align: center;
}
.section-container .credit__wrapper .credit-prod{
  font-family: Poppins;
  font-size: calc(12 * (100vw / 375));
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-align: center;
  color: #3e3e3e;
  margin-top: calc(-1 * (100vw / 375));
}


/* section02 */
.sec02{
  padding-bottom: calc(60 * (100vw / 375));
  /* background-color: #4b4435; */
}
.sec02 .title-txt, .sec02 .lead-txt, .sec02 .credit-prod{
  color: #fff;
}
.section-container .credit__wrapper .credit--2 .credit-prod{
  letter-spacing: 0.02em;
}
.sec02 .item-container .item-wapper--1{
  margin: 0;
}
.sec02 .item-container .item-wapper--1{
  position: relative;
}
.sec02 .item-container .item-wapper--1::before{
  position: absolute;
  display: block;
  content: "";
  top: calc(0 * (100vw / 375));
  right: calc(22 * (100vw / 375));
  width: calc(40.8 * (100vw / 375));
  height: calc(257.8 * (100vw / 375));
  background-image: url(../imgs/night.svg);
  background-size: calc(40.8 * (100vw / 375)) calc(257.8 * (100vw / 375));
  background-repeat: no-repeat;
}
.sec02 .item-container .item-wapper--2{
  margin: calc(-40 * (100vw / 375)) 0 0 auto;
  position: relative;
}
.sec02 .product-container .credit__container{
  border: solid 1px #FFF;
}
.sec02 .product-container .credit__container::before{
  background-image: url(../imgs/other-color-w.svg);
  left: calc(-30 * (100vw / 375));
  width: calc(223.13 * (100vw / 375));
}


/* section03 */
.sec03{
  margin-top: calc(59 * (100vw / 375));
}
.sec03 .sec03item-wapper{
  width: calc(270 * (100vw / 375));
  margin: auto;
}
.sec03 .product-container{
  margin-top: calc(41 * (100vw / 375));
}
.sec03 .product-container .lead-txt{
  margin-top: calc(19 * (100vw / 375));
}
.sec03 .product-container .credit__container::before {
  top: calc(-12 * (100vw / 375));
  left: calc(-30 * (100vw / 375));
  width: calc(223.13 * (100vw / 375));
  height: calc(41 * (100vw / 375));
  background-image: url(../imgs/other-color-p.svg);
  background-color: #fff;
}
.sec03 .product-container .credit__container{
  margin-top: calc(58 * (100vw / 375));
}

/* section04 */
.sec04{
  margin-top: calc(119 * (100vw / 375));
}
.sec04 .product-container {
  margin: calc(25 * (100vw / 375)) calc(20 * (100vw / 375)) 0;
}
.sec04 .product-container .lead-container .title-txt{
  font-family: Poppins;
  font-size: calc(24 * (100vw / 375));
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.06em;
  color: #4d4d4d;
}
.sec04 .product-container .lead-txt {
  margin-top: calc(12 * (100vw / 375));
}

/* viewall__btn */



/* viewall__btn */
.view_all{
  position: relative;
}
.view_all{
  display: block;
  width: calc(300 * (100vw / 375));
  height: calc(50 * (100vw / 375));
  margin: auto;
  margin-top: calc(104 * (100vw / 375));
}




@media only screen and (min-width: 560px) {
  /* ===========================
  * Style of Tablet-view *
  =========================== */
  #main-container{
    padding: 0;
  }
  #main-container .item-content{
    margin: auto;
  }
  .main-area, .main_inner{
    padding: 0;
  }
  .sp-component {
    display: none !important;
  }
  .pc-component {
    display: block;
  }
  .sec01 .buy__btn, .sec02 .buy__btn, .sec03 .buy__btn {
    height: calc(24 * (100vw / 1400));
    max-width: 60px;
    max-height: 24px;
    width: calc(60 * (100vw / 1400));
    margin-top: calc(11 * (100vw / 1400));
    margin-left: auto;
  }
  .item-content .buy__btn {
    height: calc(24 * (100vw / 1400));
    max-height: 24px;
    max-width: 60px;
    width: calc(60 * (100vw / 1400));
  }
  .view_all {
    display: block;
    width: calc(370 * (100vw / 1400));
    height: calc(50 * (100vw / 1400));
    margin: auto;
    margin-top: calc(121 * (100vw / 1400));
}
  .viewall__btn {
    height: calc(60 * (100vw / 1400));
    max-height: 60px;
    max-width: 370px;
    width: calc(370 * (100vw / 1400));
    margin: auto;
  }


  /* heading */
  #main-container{
    /* width: 1200px; */
    margin: auto;
  }
  .heading{
    width: calc(1200 * (100vw / 1400));
    margin: auto;
    position: relative;
  }
  .heading::before{
    position: absolute;
    display: block;
    content: "";
    top: calc(160 * (100vw / 1400));
    left: calc(580 * (100vw / 1400));
    width: 100vw;
    height: calc(400 * (100vw / 1400));
    z-index: -1;
    background-color: #4B4435;
  }
  .heading::after{
    position: absolute;
    display: block;
    content: "";
    top: calc(60 * (100vw / 1400));
    right: calc(580 * (100vw / 1400));
    width: 100vw;
    height: calc(400 * (100vw / 1400));
    background-color: #EDEADE;
    z-index: -1;
  }
  .heading .mainvisual{
    position: relative;
  }
  .heading .mainvisual-container{
    position: static;
    display: flex;
    justify-content: center;
    max-width: 1200px;
    width: calc(1200 * (100vw / 1400));
    margin: auto;
    margin-top: calc(40 * (100vw / 1400));
    height: auto;
  }
  .heading .mainvisual-container li{
    position: relative;
  }
  .heading .mainvisual-container .mainvisual-wapper--1{
    top: calc(0 * (100vw / 1400));
    left: calc(0 * (100vw / 1400));
    width: calc(440 * (100vw / 1400));
  }
  .heading .mainvisual-container .mainvisual-wapper--1::before,
  .heading .mainvisual-container .mainvisual-wapper--2::before{
    display: none;
  }
  .heading .mainvisual-container .mainvisual-wapper--2{
    bottom: calc(0 * (100vw / 1400));
    right: calc(0 * (100vw / 1400));
    width: calc(440 * (100vw / 1400));
    margin-top: calc(40 * (100vw / 1400));
  }
  .heading .logo-wrapper{
    position: absolute;
    top: calc(324.62 * (100vw / 1400));
    left: 50%;
    transform: translateX(-50%);
    width: calc(695.62 * (100vw / 1400));
    background-size: calc(310.62 * (100vw / 1400)) calc(91.48 * (100vw / 1400));
    background-repeat: no-repeat;
  }
  .heading .lead-txt{
    margin: calc(66.2 * (100vw / 1400)) auto auto;
    font-size: calc(16 * (100vw / 1400));
    letter-spacing: 0.04em;
  text-align: center;
  }



  /* secton01 */
.section-container{
  width: calc(1200 * (100vw / 1400));
  margin: auto;
  display: flex;
}
.sec01{
  width: calc(1200 * (100vw / 1400));
  margin: auto;
  margin-top: calc(75 * (100vw / 1400));
  padding-bottom: calc(98 * (100vw / 1400));
}
.section-container .item-container{
  width: calc(680 * (100vw / 1400));
}
.section-container .item-container{
  padding-top: calc(80 * (100vw / 1400));
}
.sec01 .item-container .item-wapper--1::before{
  position: absolute;
  display: block;
  content: "";
  top: calc(22 * (100vw / 1400));
  left: calc(13 * (100vw / 1400));
  width: calc(40.8 * (100vw / 1400));
  height: calc(257.8 * (100vw / 1400));
  background-image: url(../imgs/mornig.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 10;
}
.section-container .item-container .item-wapper--1{
  width: calc(480 * (100vw / 1400));
  margin: 0 0 0 auto;
  background-color: #fff;
}
.section-container .item-container .item-wapper--2{
  width: calc(280 * (100vw / 1400));
  margin: calc(-230 * (100vw / 1400)) 0 0;
  background-color: #fff;
}
.section-container .product-container{
  width: calc(410 * (100vw / 1200));
  margin: calc(158 * (100vw / 1400)) 0 0;
}
.sec01 .product-container .lead-container{
  margin-left: calc(60 * (100vw / 1400));
}
.sec03 .product-container .lead-container{
  margin-left: calc(59 * (100vw / 1400));
}
.section-container .product-container .title-txt{
  font-size: calc(20 * (100vw / 1400));
  font-weight: 500;
  line-height: 1.56;
  letter-spacing: 0.04em;
}
.section-container .product-container .lead-txt{
  width: calc(360 * (100vw / 1400));
  font-size: calc(14 * (100vw / 1400));
  line-height: 2;
  letter-spacing: 0.04em;
}
.section-container .product-container .lead-txt{
  margin-top: calc(15 * (100vw / 1400));
}
.section-container .product-container .credit__container{
  display: flex;
  justify-content: flex-start;
  position: relative;
  width: calc(390 * (100vw / 1400));
  margin: calc(93 * (100vw / 1400)) auto 0 calc(100 * (100vw / 1400));
  padding-top: calc(30 * (100vw / 1400));
  padding-bottom: calc(40 * (100vw / 1400));
  border: solid 1px #707070;
}
.section-container .product-container .credit__container::before{
  display: block;
  content: "";
  position: absolute;
  top: calc(-12 * (100vw / 1400));
  left: calc(-10 * (100vw / 1400));
  width: calc(252.13 * (100vw / 1400));
  height: calc(44 * (100vw / 1400));
  background-image: url(
  ../imgs/other-color.svg);
  background-size: calc(223.13 * (100vw / 1400)) calc(19.55 * (100vw / 1400));
  background-repeat: no-repeat;
  background-position-x: calc(10 * (100vw / 1400));
  z-index: 10;
}
_:-ms-lang(x)::-ms-backdrop, .section-container .product-container .credit__container::before{
  background-size: calc(220 * (100vw / 1400)) calc(20 * (100vw / 1400));
}
.section-container .product-container .credit__container .credit__wrapper{
  width: calc(160 * (100vw / 1400));
  margin-left: 0;
  text-align: center;
}
.section-container .product-container .credit__container .credit__wrapper .credit--1{
  width: calc(160 * (100vw / 1400));
  margin-left: calc(29 * (100vw / 1400));
  margin-right: calc(5 * (100vw / 1400));
}
.section-container .product-container .credit__container .credit__wrapper .credit--2{
  width: calc(160 * (100vw / 1400));
  margin-left: calc(40 * (100vw / 1400));
}
.section-container .credit__wrapper .credit-prod{
  font-family: Poppins;
  font-size: calc(12 * (100vw / 1400));
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: center;
  color: #3e3e3e;
  margin-top: calc(7 * (100vw / 1400));
}



/* section02 */
.sec02{
  padding-bottom: calc(72 * (100vw / 1400));
  flex-direction: row-reverse;
  margin: auto;
}
.sec02 .item-container {
    padding-top: calc(100 * (100vw / 1400));
}
.sec02 .item-container .item-wapper--1{
  margin: 0 0 0 calc(20 * (100vw / 1400));
}
.sec02 .item-container .item-wapper--1::before {
    position: absolute;
    display: block;
    content: "";
    top: calc(23 * (100vw / 1400));
    right: calc(22 * (100vw / 1400));
    width: calc(40.8 * (100vw / 1400));
    height: calc(257.8 * (100vw / 1400));
    background-image: url(../imgs/night.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 100;
}
.sec02 .item-container .item-wapper--2{
  margin: calc(-210 * (100vw / 1400)) 0 0 auto;
}
.sec02 .product-container {
    width: calc(478 * (100vw / 1200));
    margin: calc(178 * (100vw / 1400)) 0 0;
}
.sec02 .product-container .credit__container{
  border: solid 1px #FFF;
  margin: calc(93 * (100vw / 1400)) auto 0 calc(9 * (100vw / 1400));
}
.sec02 .product-container .credit__container::before{
  background-image: url(../imgs/other-color-p-w.svg);
  width: calc(220 * (100vw / 1400));
  left: calc(-42 * (100vw / 1400));
}

/* section03 */
.sec03{
  margin-top: calc(59 * (100vw / 1400));
}
.sec03 .sec03item-wapper{
  width: calc(480 * (100vw / 1400));
  margin: calc(68 * (100vw / 1400)) 0 0 calc(136 * (100vw / 1400));
}
.sec03 .product-container{
  margin-top: calc(125 * (100vw / 1400));
}
.sec02 .product-container .lead-container {
    margin-left: calc(78 * (100vw / 1400));
}
.sec03 .product-container .lead-txt{
  margin-top: calc(14 * (100vw / 1400));
}
.sec03 .product-container .credit__container {
    display: flex;
    justify-content: flex-start;
    position: relative;
    width: calc(390 * (100vw / 1400));
    margin: calc(73 * (100vw / 1400)) auto 0 calc(59 * (100vw / 1400));
    padding-top: calc(31 * (100vw / 1400));
    padding-bottom: calc(40 * (100vw / 1400));
    border: solid 1px #707070;
}
.sec03 .product-container .credit__container::before {
  top: calc(-11 * (100vw / 1400));
  left: calc(-42 * (100vw / 1400));
  width: calc(224 * (100vw / 1400));
  height: calc(44 * (100vw / 1400));
  background-image: url(../imgs/other-color-p.svg);
  background-color: #fff;
}


/* section04 */
.sec04{
  display: flex;
  width: calc(940 * (100vw / 1400));
  margin: auto;
  margin-top: calc(197 * (100vw / 1400));
}
.sec04 .sec04item-wapper{
   width: calc(480 * (100vw / 1400));
}

.sec04 .product-container .lead-container{
  margin-left: calc(61 * (100vw / 1400));
}
.sec04 .product-container {
  margin: calc(79 * (100vw / 1400)) calc(0 * (100vw / 1400)) 0;
  width: calc(460 * (100vw / 1400));
}
.sec04 .product-container .lead-container .title-txt{
  font-family: Poppins;
  font-size: calc(28 * (100vw / 1400));
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #4d4d4d;
}
.sec04 .product-container .lead-txt {
  margin-top: calc(17 * (100vw / 1400));
  width: calc(399 * (100vw / 1400));
  letter-spacing: 0.02em;
}





.cateList {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: calc(1280 * (100vw / 1400));
  max-width: 1280px;
  height: calc(50 * (100vw / 1400));
  max-height: 50px;
  margin: calc(116 * (100vw / 1400)) auto calc(40 * (100vw / 1400));
  padding: 0 calc(40 * (100vw / 1400)) 0 0;
  font-size: calc(13 * (100vw / 1400));
  letter-spacing: 0.03em;
  line-height: normal;
}
.cateList a {
  -webkit-transition: 0s;
  text-decoration: none;
  transition: 0s;
}
.cateList span {
  padding: 0 calc(5 * (100vw / 1400));
}
/* viewall__btn */



_:-ms-lang(x)::-ms-backdrop, .sec02 .product-container .credit__container::before,
_:-ms-lang(x)::-ms-backdrop, .sec03 .product-container .credit__container::before{
  background-size: calc(174 * (100vw / 1400)) calc(20 * (100vw / 1400));
  left: calc(-16 * (100vw / 1400));
}

}




@media only screen and (min-width: 1400px) {
  /* ===========================
    * Style of Tablet-view *
  =========================== */
  #main-container{
    padding: 0;
  }
  #main-container .item-content{
    margin: auto;
  }
  .main-area, .main_inner{
    padding: 0;
  }
  .sp-component {
    display: none !important;
  }
  .pc-component {
    display: block;
  }
  .sec01 .buy__btn, .sec02 .buy__btn, .sec03 .buy__btn {
    height: 24px;
    max-width: 60px;
    max-height: 24px;
    width: 60px;
    margin-top: 11px;
    margin-left: auto;
  }
  .item-content .buy__btn {
    height: 24px;
    max-height: 24px;
    max-width: 60px;
    width: 60px;
  }
  .view_all a {
    display: block;
    width: 370px;
    height: 50px;
    margin: auto;
    margin-top: 121px;
}
  .viewall__btn {
    height: 60px;
    max-height: 60px;
    max-width: 370px;
    width: 370px;
    margin: auto;
  }


  /* heading */
  #main-container{
    /* width: 1200px; */
    margin: auto;
  }
  .heading{
    width: 1200px;
    margin: auto;
    position: relative;
  }
  .heading::before{
    position: absolute;
    display: block;
    content: "";
    top: 160px;
    left: 580px;
    width: 100vw;
    height: 400px;
    z-index: -1;
    background-color: #4B4435;
  }
  .heading::after{
    position: absolute;
    display: block;
    content: "";
    top: 60px;
    right: 580px;
    width: 100vw;
    height: 400px;
    background-color: #EDEADE;
    z-index: -1;
  }
  .heading .mainvisual{
    position: relative;
  }
  .heading .mainvisual-container{
    position: static;
    display: flex;
    justify-content: center;
    max-width: 1200px;
    width: 1200px;
    margin: auto;
    margin-top: 40px;
    height: auto;
  }
  .heading .mainvisual-container li{
    position: relative;
  }
  .heading .mainvisual-container .mainvisual-wapper--1{
    top: 0px;
    left: 0px;
    width: 440px;
  }
  .heading .mainvisual-container .mainvisual-wapper--1::before,
  .heading .mainvisual-container .mainvisual-wapper--2::before{
    display: none;
  }
  .heading .mainvisual-container .mainvisual-wapper--2{
    bottom: 0px;
    right: 0px;
    width: 440px;
    margin-top: 40px;
  }
  .heading .logo-wrapper{
    position: absolute;
    top: 324.62px;
    left: 50%;
    transform: translateX(-50%);
    width: 695.62px;
    background-size: 310.62px 91.48px;
    background-repeat: no-repeat;
  }
  .heading .lead-txt{
    margin: 66.2px auto auto;
    font-size: 16px;
    letter-spacing: 0.04em;
  text-align: center;
  }



  /* secton01 */
  .section-container{
    width: 1200px;
    margin: auto;
    display: flex;
  }
  .sec01{
    width: 1200px;
    margin: auto;
    margin-top: 75px;
    padding-bottom: 98px;
  }
  .section-container .item-container{
    width: 680px;
  }
  .section-container .item-container{
    padding-top: 80px;
  }
  .sec01 .item-container .item-wapper--1::before{
    position: absolute;
    display: block;
    content: "";
    top: 22px;
    left: 13px;
    width: 40.8px;
    height: 257.8px;
    background-image: url(../imgs/mornig.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 10;
  }
  .section-container .item-container .item-wapper--1{
    width: 480px;
    margin: 0 0 0 auto;
    background-color: #fff;
  }
  .section-container .item-container .item-wapper--2{
    width: 280px;
    margin: -230px 0 0;
    background-color: #fff;
  }
  .section-container .product-container{
    width: 410px;
    margin: 158px 0 0;
  }
  .sec01 .product-container .lead-container{
    margin-left: 60px;
  }
  .sec03 .product-container .lead-container{
    margin-left: 59px;
  }
  .section-container .product-container .title-txt{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.56;
    letter-spacing: 0.04em;
  }
  .section-container .product-container .lead-txt{
    width: 360px;
    font-size: 14px;
    line-height: 2;
    letter-spacing: 0.04em;
  }
  .section-container .product-container .lead-txt{
    margin-top: 15px;
  }
  .section-container .product-container .credit__container{
    display: flex;
    justify-content: flex-start;
    position: relative;
    width: 390px;
    margin: 93px auto 0 100px;
    padding-top: 30px;
    padding-bottom: 40px;
    border: solid 1px #707070;
  }
  .section-container .product-container .credit__container::before{
    display: block;
    content: "";
    position: absolute;
    top: -12px;
    left: -10px;
    width: 252.13px;
    height: 44px;
    background-image: url(
    ../imgs/other-color.svg);
    background-size: 223.13px 19.55px;
    background-repeat: no-repeat;
    background-position-x: 10px;
    z-index: 10;
  }
  _:-ms-lang(x)::-ms-backdrop, .section-container .product-container .credit__container::before{
    background-size: 220px 20px;
  }
  .section-container .product-container .credit__container .credit__wrapper{
    width: 160px;
    margin-left: 0;
    text-align: center;
  }
  .section-container .product-container .credit__container .credit__wrapper .credit--1{
    width: 160px;
    margin-left: 29px;
    margin-right: 5px;
  }
  .section-container .product-container .credit__container .credit__wrapper .credit--2{
    width: 160px;
    margin-left: 40px;
  }
  .section-container .credit__wrapper .credit-prod{
    font-family: Poppins;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.02em;
    text-align: center;
    color: #3e3e3e;
    margin-top: 7px;
  }



  /* section02 */
  .sec02{
    padding-bottom: 72px;
    flex-direction: row-reverse;
    margin: auto;
  }
  .sec02 .item-container {
      padding-top: 100px;
  }
  .sec02 .item-container .item-wapper--1{
    margin: 0 0 0 20px;
  }
  .sec02 .item-container .item-wapper--1::before {
      position: absolute;
      display: block;
      content: "";
      top: 23px;
      right: 22px;
      width: 40.8px;
      height: 257.8px;
      background-image: url(../imgs/night.svg);
      background-size: 100%;
      background-repeat: no-repeat;
      z-index: 100;
  }
  .sec02 .item-container .item-wapper--2{
    margin: -210px 0 0 auto;
    position: relative;
  }
  .sec02 .product-container {
      width: 478px;
      margin: 178px 0 0;
  }
  .sec02 .product-container .credit__container{
    border: solid 1px #FFF;
    margin: 93px auto 0 9px;
  }
  .sec02 .product-container .credit__container::before{
    background-image: url(../imgs/other-color-p-w.svg);
    background-size: 224px 20px;
    width: 220px;
    left: -42px;
  }


  /* section03 */
  .sec03{
    margin-top: 59px;
  }
  .sec03 .sec03item-wapper{
    width: 480px;
    margin: 68px 0 0 136px;
  }
  .sec03 .product-container{
    margin-top: 125px;
  }
  .sec02 .product-container .lead-container {
      margin-left: 78px;
  }
  .sec03 .product-container .lead-txt{
    margin-top: 14px;
  }
  .sec03 .product-container .credit__container {
      display: flex;
      justify-content: flex-start;
      position: relative;
      width: 390px;
      margin: 73px auto 0 59px;
      padding-top: 31px;
      padding-bottom: 40px;
      border: solid 1px #707070;
  }
  .sec03 .product-container .credit__container::before {
    top: -11px;
    left: -42px;
    width: 224px;
    height: 44px;
    background-image: url(../imgs/other-color-p.svg);
    background-color: #fff;
  }


  /* section04 */
  .sec04{
    display: flex;
    width: 940px;
    margin: auto;
    margin-top: 197px;
  }
  .sec04 .sec04item-wapper{
    width: 480px;
  }

  .sec04 .product-container .lead-container{
    margin-left: 61px;
  }
  .sec04 .product-container {
    margin: 79px 0px 0;
    width: 460px;
  }
  .sec04 .product-container .lead-container .title-txt{
    font-family: Poppins;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.02em;
    color: #4d4d4d;
  }
  .sec04 .product-container .lead-txt {
    margin-top: 17px;
    width: 399px;
    letter-spacing: 0.02em;
  }





  .cateList {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 1280px;
    max-width: 1280px;
    height: 50px;
    max-height: 50px;
    margin: 116px auto 40px;
    padding: 0 40px 0 0;
    font-size: 13px;
    letter-spacing: 0.03em;
    line-height: normal;
  }
  .cateList a {
    -webkit-transition: 0s;
    text-decoration: none;
    transition: 0s;
  }
  .cateList span {
    padding: 0 5px;
  }
  .view_all {
    display: block;
    width: 370px;
    height: 50px;
    margin: auto;
    margin-top: 121px;
  }
  _:-ms-lang(x)::-ms-backdrop, .sec02 .product-container .credit__container::before,
  _:-ms-lang(x)::-ms-backdrop, .sec03 .product-container .credit__container::before{
    background-size: 174px 20px;
    left: -16px;
  }
}




/* ====================================================================
### animation ###
==================================================================== */
.heading a:hover{
  opacity: 1;
}

.fade-in,
.fade{
  -webkit-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  opacity: 0;
}
.fade{
  transition-delay: 0.8s;
}
.fade-in.onView_in,
.fade.onView{
  opacity: 1;
}
.mainvisual-wapper--1.fade-in{
  -webkit-transition-duration: 3.5s;
  -o-transition-duration: 3.5s;
  transition-duration: 3.5s;
  transform: translateY(-20%);
}
.mainvisual-wapper--2.fade-in{
  -webkit-transition-duration: 3.5s;
  -o-transition-duration: 3.5s;
  transition-duration: 3.5s;
  transform: translateY(20%);
}
.fade-in.onView_in{
  transform: translateY(0%);
}


.background-color{
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-color: #fff;
}
.background-color.onView_sec01{
  background-color: #EDEADE;
}
.background-color.onView_sec02{
  background-color: #4b4435;
}

.sec01 .product-container .credit__container::before,
.sec02 .product-container .credit__container::before{
    -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-color: #fff;
}
.onView_sec01 .sec01 .product-container .credit__container::before,
.onView_sec01 .sec02 .product-container .credit__container::before{
    -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-color: #EDEADE;
}
.onView_sec02 .sec01 .product-container .credit__container::before,
.onView_sec02 .sec02 .product-container .credit__container::before{
    -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-color: #4b4435;
}

.sec02 .title-txt,
 .sec02 .lead-txt,
 .sec02 .credit-prod{
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  color: #3e3e3e !important;
}
.onView_sec02 .sec02 .title-txt,
.onView_sec02 .sec02 .lead-txt,
.onView_sec02 .sec02 .credit-prod{
  color: #fff !important;
}

.sec02 .product-container .credit__container{
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  border: solid 1px #707070 !important;
}
.onView_sec02 .sec02 .product-container .credit__container{
  border: solid 1px #fff !important;
}


.sec02 .product-container .credit__container::before{
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background-image: url(../imgs/other-color-p.svg);
}
.onView_sec02 .sec02 .product-container .credit__container::before{
  background-image: url(../imgs/other-color-p-w.svg);
}
@media only screen and (min-width: 560px) {
  .sec02 .product-container .credit__container::before{
    -webkit-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
    background-image: url(../imgs/other-color-p.svg);
  }
  .onView_sec02 .sec02 .product-container .credit__container::before{
    background-image: url(../imgs/other-color-p-w.svg);
  }
  .mainvisual-wapper--1.fade-in{
    -webkit-transition-duration: 4.2s;
    -o-transition-duration: 4.2s;
    transition-duration: 4.2s;
    transform: translateY(-20%);
  }
  .mainvisual-wapper--2.fade-in{
    -webkit-transition-duration: 4.2s;
    -o-transition-duration: 4.2s;
    transition-duration: 4.2s;
    transform: translateY(20%);
  }
  .fade-in.onView_in{
    transform: translateY(0%);
  }
}