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

.headline {
     border-bottom: thin solid #a9a9a9;
     width: 57%;
     margin: 3% auto 2%;
     font-size: 3.2em;
     line-height: 2.0em;
     color: #696969;
}

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

.intro {
     width: 60%;
     margin: 0 auto 5%;
     padding-left: 1.5%;
     font-size: 2.0em;
     line-height: 2.2em;
     color: #696969;
}

.contents {
     width: 60%;
     margin: 0 auto 10%;
 }
 .contents img {
     width: 100%;
 }

.title {
     font-size: 2.3em;
      line-height: 2.6em;
      color: #696969;
 }

 .text {
     font-size: 1.6em;
      line-height: 1.8em;
      color: #696969;
     margin: 0  0 0 15%;
 }

.saletext {
   color: red;
   margin-left:3%;
}

 .flexbox {
     width:100%;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     margin-bottom: 15%;
     align-items: flex-end;
 }

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

 .box1 {
     width: 60%;
 }

  .box1:nth-child(even) {
     width: 60%;
  }
}

 .box2 {
     width: 40%;
 }

  .box2:nth-child(even) {
     width: 40%;
     margin: 0 5% 0 0 ;
  }

.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 .box2 .btn a {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 0;
  background: #fff;
  width: 100%;
  padding: 3% 0 2% 38% ;
  margin: 3% 0 10% 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;
}

.salelink1 a{
  display: block;
  width: 30%;
  background: #444444;
  color: #fff;
  font-size: 1.6em;
  padding: 1.5% 3%;
  margin: 5% auto 0;
  text-align: center;
}
.salelink2 a{
  display: block;
  width: 30%;
  background: #444444;
  color: #fff;
  font-size: 1.6em;
  padding: 1.5% 3%;
  margin: 1% auto 10%;
  text-align: center;
}

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

.headline {
     border-bottom: thin solid #a9a9a9;
     width: 90%;
     margin: 10% auto 3%;
      font-size: 2.0em;
      line-height: 1.6em;
      color: #696969;
}

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

.intro {
     width: 80%;
     margin: auto;
     padding-left: 0;
      font-size: 1.6em;
      line-height: 2.0em;
      color: #696969;
     margin-bottom: 15%;
}

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

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

.title {
     font-size: 1.8em;
      line-height: 2.0em;
      color: #696969;
 }

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

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

.contents .flexbox .box2 .btn a {
  padding: 3% 0 2% 40% ;
}

.salelink1 a{
  display: block;
  width: 80%;
  background: #444444;
  color: #fff;
  font-size: 1.2em;
  padding: 5% 3%;
  margin: 3% auto 0;
  text-align: center;
}
.salelink2 a{
  display: block;
  width: 80%;
  background: #444444;
  color: #fff;
  font-size: 1.2em;
  padding: 5% 3%;
  margin: 3% auto 20%;
  text-align: center;
}