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

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

 .contents img {
      width: 100%;
 }

.pc { 
       display: block !important;
 }

.sp { 
       display: none !important; 
}

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

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

.headline {
     width: 100%;
     margin: 20% auto 3%;
     padding-left: 2%;
     font-size: 3.6em;
     line-height: 1.2em;
     color: #696969;
     border-bottom: thin solid #c9c9c9;
}

 .contents .text {
      font-size: 1.6em;
      line-height: 1.8em;
     color: #696969;
     margin: 3% auto 0;
     width: 100%;
     padding: 1%;
 }

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

.contents .flexbox .main {
      width: 70%;
      margin: 0;
      position: relative;
      z-index:0;
      box-shadow: -50px 50px #fff;
 }

.contents .flexbox .lead {
      background-color: rgba(245,245,245,0.6);
      width: 80%;
      margin: -18% 30% 5% 0;
      position: relative;
      z-index:0;
      font-size: 1.8em;
      line-height: 1.8em;
      color: #696969;
      padding: 5%;
 }


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

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

.contents .flexbox2 .box1 {
      width: 38%;
      margin: 0;
      vertical-align: bottom;
      font-size: 1.6em;
      line-height: 1.8em;
      color: #696969;
      padding: 3%;
 }

.contents .flexbox2 .box2 {
      width: 60%;
      margin: 0;
      z-index:0;
 }

.contents .btn a {
     display: inline-block;
     border: 1px solid #222222;
     border-radius: 0;
     background: #f8fbf8;
     width: 100%;
     padding: 3% 0 2% 38% ;
     margin: 0;
     color: #222222;
}

.contents .btn a:hover{
  background: #222222;
  color: #fff;
}

.contents a:visited{
  color: inherit;
}



.contents .flexbox3 {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: flex-end;
      margin: 5% auto 0;
      clear: both;
      font-size: 1.6em;
      line-height: 1.6em;
      color: #696969;
 }

.contents .flexbox3 .box3 {
      width: 32%;
      margin: 0;
 }

.contents .flexbox3 .box4 {
      width: 32%;
      margin: 0;
 }

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

.contents .flexbox4 .box5 {
      width:45%;
      margin-right: 5%;
      position: relative;
      z-index:100;
 }

.contents .flexbox4 .box6 {
      width: 65%;
      margin:  -15% 30% 5% 0;
      position: relative;
      z-index:0;
 }


.contents .itemname  {
      color: #696969;
      font-size: 1.8em;
      text-align: center;
      margin-top: 5%;
}

.contents .itemprice  {
      color: #696969;
      font-size: 1.5em;
      text-align: center;
      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: 60%;
  background: #555555;
  color: #fff !important;
  font-size: 1.6em;
  padding: 4%;
  margin: 0 auto 10%;
  text-align: center;
}

    .scroll-fade {
        opacity: 0;
    }

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

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

 .contents img {
      width: 100%;
 }

.pc { 
       display: none !important;
 }

.sp { 
       display: block !important;
}

.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: #696969;
}

.headline {
     width: 100%;
     margin: 25% auto 5%;
     padding-left: 2%;
     font-size: 2.0em;
     line-height: 1.2em;
     color: #696969;
     border-bottom: thin solid #c9c9c9;
}

 .contents .text {
     font-size: 1.2em;
     line-height: 1.4em;
     color: #696969;
     margin: 3% auto 0;
     width: 100%;
     padding: 1%;
 }

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

.contents .flexbox .main {
      width: 75%;
      margin: 0;
      position: relative;
      z-index:0;
      box-shadow: -25px 25px #fff;
 }

.contents .flexbox .lead {
      background-color: rgba(245,245,245,0.6);
      width: 80%;
      margin: -31% 20% 0 0;
      position: relative;
      z-index:0;
      font-size: 1.2em;
      line-height: 1.6em;
      color: #595959;
      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;
      clear: both;
 }

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

.contents .flexbox2 .box1 {
      width: 40%;
      margin: 0;
      vertical-align: bottom;
      font-size: 1.0em;
      line-height: 1.4em;
      color: #696969;
      padding: 0 1%;
 }

.contents .flexbox2 .box2 {
      width: 57%;
      margin: 0;
      z-index:0;
 }

.contents .btn a {
     display: inline-block;
     border: 1px solid #222222;
     border-radius: 0;
     background: #f8fbf8;
     width: 100%;
     padding: 3% 0 1% 34% ;
     margin: 0;
     color: #222222;
}

.contents .btn a:hover{
  background: #222222;
  color: #fff;
}

.contents a:visited{
  color: inherit;
}

.contents .flexbox3 {
      width: 90%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: flex-end;
      margin: 5% auto 0;
      clear: both;
      font-size: 1.0em;
      line-height: 1.4em;
      color: #696969;
 }

.contents .flexbox3 .box3 {
      width: 40%;
      margin: 0;
 }

.contents .flexbox3 .box4 {
      width: 48%;
      margin: 0;
 }

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

.contents .flexbox4 .box5 {
      width:45%;
      margin-right: 5%;
      position: relative;
      z-index:100;
 }

.contents .flexbox4 .box6 {
      width: 65%;
      margin:  -15% 30% 3% 0;
      position: relative;
      z-index:0;
 }



    .scroll-fade {
        opacity: 0;
    }




.contents .itemname  {
      font-size: 1.2em;
      text-align: center;
      margin-top: 8%;
}

.contents .itemprice  {
     font-size: 1.0em;
     text-align: center;
     margin-top: 2%;
}

.itemlink a{
     display: block;
     width: 60%;
     background: #555555;
     color: #fff;
     font-size: 1.2em;
     padding: 5% 3% 4%;
     margin: 0 auto 10%;
     text-align: center;
}

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

}