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

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

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

.contents {
     width: 60%;
     margin: auto;
 }
 .contents img {
     width: 100%;
 }
 .text {
     font-size: 1.6em;
      line-height: 1.8em;
      color: #696969;
 }


.contents .flexbox {
     width:100%;
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     justify-content: space-between;
     margin: 0 0 2% 0 ;
     align-items: flex-end;
 }

.contents .flexbox:last-child {
      margin: 6% 0 10% 0;
 }

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

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

.contents .flexbox .box1:nth-child(even) {
     width: 48%;
     margin: 0 0 5% 0;
  }
}

.contents .flexbox .box2 {
     width: 100%;
 }

.contents .flexbox .box2:nth-child(even) {
     width: 100%;
  }

.contents .flexbox .box1 .link {
     style="color: #ffffff; 
     background-color:#c0c0c0; 
     padding: 2%; margin:0 5%; 
     border-radius: 10px; display: 
     block; box-shadow:3px 3px 3px #555; 
     text-decoration: none;
     text-align: center;
  }

.contents .flexbox .box2 .link {
     style="color: #ffffff; 
     background-color:#c0c0c0; 
     padding: 2%; margin:0 5%; 
     border-radius: 10px; display: 
     block; box-shadow:3px 3px 3px #555; 
     text-decoration: none;
     text-align: center;
  }

.contents .flexbox .box1 .btn a {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  padding: 7px 10px 5px 10px;
  margin: 10px 0 30px 0;
}

.contents .flexbox .box2 .btn a {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  padding: 7px 10px 5px 10px;
  margin: 10px 0 30px 0;
}

.contents .flexbox .box1 .btn a:hover{
  background: #000;
  color: #fff;
}

.contents .flexbox .box2 .btn a:hover{
  background: #000;
  color: #fff;
}

.contents .flexbox .box1 a:visited{
  color: inherit;
}

.contents .flexbox .box2 a:visited{
  color: inherit;
}

.contents .sale {
 color: #ff0000;
 font-weight: bold;
 margin-left: 3%;
}


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

 .top {
     width: 90%;
     margin: 5% auto 10%;
     text-align: center;
 }

 .intro {
     width: 80%;
     margin: auto;
      font-size: 1.4em;
      line-height: 1.8em;
      color: #696969;
     margin-bottom: 15%;
 }

 .contents {
     width: 90%;
     margin: 0 auto;
 }

 .text {
     font-size: 1.4em;
      line-height: 1.6em;
      color: #696969;
     margin: 0 auto;
 }

.contents .flexbox {
     display: flex;
     width: 100%;
 }

.contents .flexbox:last-child {
      margin: 15% 0 10% 0;
 }

.contents .flexbox .box1 {
     flex-direction: column;
     width: 100%;
     margin: 0 auto;
 }

.contents .flexbox .box1:nth-child(even) {
      width: 100%;
      margin: 5% 0 5%  0;
 }

.contents .flexbox .box2 {
     width: 100%;
 }

.contents .flexbox .box2:nth-child(even) {
      width: 90%;
      margin: 5% auto 10%;
 }
}