@charset "utf-8";body {
     width: 100%;
}

.contents {
     width: 55%;
     margin: 0 auto 5%;
     padding: 5%;
     color: #000000;
     background: #d2b48c;
 }

 .contents img {
      width: 100%;
 }

.top {
     width: 100%;
     margin: 0 auto;
     text-align: center;
}

.intro {
     width: 100%;
     margin: 5% auto 0;
     font-size: 2.0em;
     line-height: 1.8em;
     color: #000000;
}

.wrapper {
     width: 100%;
     margin: 10% auto 0;
     padding: 5%;
     background:  #f7f7f7;
}

.brandEng {
     width: 100%;
     margin: 0 auto 2%;
     padding-left: 2%;
     font-size: 4.4em;
     line-height: 1.2em;
     font-weight: bold;
     color: #000000;
}

.brandJpn {
     width: 100%;
     margin: 0 auto;
     font-size: 0.3em;
     font-weight: normal;
     line-height: 1.2em;
     color: #000000;
}


 .contents .text {
     font-size: 1.8em;
     line-height: 1.6em;
     color: #000000;
     width: 100%;
     margin: 5% auto;
     padding-left: 2%;
 }

.contents .flexbox {
      width:100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
      margin: 0 auto;
      clear: both;
 }

  .flexbox :nth-child(odd) {
    flex-direction: row-reverse;
  }

.contents .flexbox .box1 {
      width: 50%;
      margin: 0;
      padding: 5%;
 }

.contents .flexbox .box2 {
      width: 50%;
      margin: 0;
      z-index:0;
      vertical-align: bottom;
      font-size: 1.6em;
      line-height: 1.6em;
     color: #000000;
      padding: 5%;
 }

.contents .flexbox2 {
      width:100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      margin: 15% auto 0;
      line-height: 1.2em;
      clear: both;
 }

  .flexbox2 :nth-child(even) {
    flex-direction: row-reverse !important;
  }

.contents .flexbox2 .box3 {
      width: 80%;
      margin: 0 auto;
      text-align: center;
 }

.contents .flexbox2 .box3 img {
      margin-bottom: 7%;
 }



.contents .btn a {
     display: inline-block;
     border: 1px solid #000;
     border-radius: 0;
     background: #000;
     width: 100%;
     padding: 5% 0 5% 10% ;
     margin: 7% auto;
     color: #fff  !important;
}

.contents .btn a:hover{
      background: #f7f7f7;
      color: #000  !important;
}

.contents a:visited{
  color: inherit;
}


.contents .itemname  {
     color: #000000;
      font-size: 1.0em;
      line-height: 0.8em;
      margin-top: 0;
}

.contents .itemprice  {
     color: #000000;
      font-size: 1.0em;
      line-height: 2.0em;
      margin-top: 0;
}

.outro {
     width: 100%;
      font-size: 2.0em;
      line-height: 2.0em;
      color: #696969;
      margin: 15% auto 10%;
}

.itemlink a{
     display: block;
     width: 35%;
     background: #ffffff;
     color: #000000;
     font-size: 3.8em;
     padding: 1% 1% 1%;
     margin: 10% auto 0;
     text-align: center;
     border: 2px solid #000000;
}

    .scroll-fade {
        opacity: 0;
    }

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

.contents {
     width: 100%;
     background: #d2b48c;
     margin: 0 auto 7%;
     padding: 5% 5% 10% 5%;
 }

 .contents img {
      width: 100%;
 }



.top {
     width: 100%;
     margin: 0 auto;
     text-align: center;
}

.intro {
     width: 100%;
     margin: 7% auto 0;
     font-size: 1.4em;
     line-height: 1.6em;
     color: #000000;
}

.wrapper {
     width: 100%;
     margin: 15% auto 0;
     padding: 7% 3%;
     background:  #f7f7f7;
}

.brandEng {
     width: 100%;
     margin: 0 auto 2%;
     padding-left: 2%;
     font-size: 2.8em;
     line-height: 1.0em;
     font-weight: bold;
     color: #000000;
}

.brandJpn {
     width: 100%;
     margin: 0 auto;
     font-size: 0.4em;
     font-weight: normal;
     line-height: 1.6em;
     color: #000000;
}

 .contents .text {
      font-size: 1.3em;
      line-height: 1.5em;
      color: #000000;
      width: 100%;
    margin: 6% auto 0;
      padding-left: 2%;
 }

.contents .flexbox {
      width:100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: flex-end;
      margin: 0 auto;
      clear: both;
 }

  .flexbox :nth-child(odd) {
    flex-direction: row-reverse;
  }

.contents .flexbox .box1 {
      width: 57%;
      margin: 0;
      padding: 15% 2% 3%;
 }

.contents .flexbox .box2 {
      width: 43%;
      margin: 0;
      z-index:0;
      vertical-align: bottom;
      font-size: 1.0em;
      line-height: 1.6em;
     color: #000000;
      padding: 10% 3% 3% 3%;
 }

.contents .flexbox2 {
      width:80%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      margin: 15% auto 0;
      clear: both;
 }

  .flexbox2 :nth-child(even) {
    flex-direction: row-reverse !important;
  }

.contents .flexbox2 .box3 {
      width: 100%;
      margin: 0 auto;
      text-align: center;
 }

.contents .flexbox2 .box3 img {
      margin-bottom: 7%;
 }



.contents .btn a {
     display: inline-block;
     border: 1px solid #000;
     border-radius: 0;
     background: #000;
     width: 100%;
     padding: 6% 0 5% 10% ;
     margin: 7% auto 0;
     color: #fff !important;
}

.contents .btn a:hover{
      background: #fff;
      color: #000 !important;
}

.contents a:visited{
  color: inherit;
}


.contents .itemname  {
     color: #000;
      font-size: 0.8em;
      line-height: 1.0em;
      margin-top: 0;
}

.contents .itemprice  {
     color: #000;
      font-size: 0.8em;
      line-height: 2.4em;
      margin-top: 0;
}



    .scroll-fade {
        opacity: 0;
    }


.itemlink a{
     display: block;
     width: 60%;
     background: #ffffff;;
     color: #000000;
     font-size: 1.2em;
     padding: 5% 3% 4%;
     margin: 10% auto 0;
     text-align: center;
     border: 2px solid #000000;
}

.outro {
     width: 100%;
     font-size: 1.4em;
     line-height: 1.6em;
     color: #696969;
     margin: 20% auto 15%;
}

}