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

.border-bottom {
     display: block;
     width: 10%;
     height: 1px;
     margin: 20% auto 15%;
     color: #696969;
 }

.headline {
　  opacity:0;
     animation-name:color;
     animation-duration:5s; 
     animation-iteration-count: infinite;
     animation-fill-mode: forwards;
     width: 100%;
     margin: 5% auto;
     font-size: 3.6em;
     line-height: 2.0em;
     color: #696969;
}

@keyframes color {
0% {
 opacity: 0;
 transform: translateX(-50px);
}
  50%{
    opacity: 1;
    transform: translateX(0);
  }
 100% {
 opacity:0;
 transform: translateX(50px);
 } 
}

.headline.is-animated {
  clip-path: inset(0);
}

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

.insertpic {
     width: 45%;
     margin: 0 auto 5%;
}

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

.contents {
     width: 50%;
     margin:  10% auto;
 }
 .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%;
 }


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

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

 .box1 {
     width: 50%;
}


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


 .box2 {
     width: 40%;
     margin-right:6%;
}


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


.box2 .bag {
  width:60%;
  margin: 10% 45% 0 10%;
  position: relative;
  z-index:100;
}

.box2 .double {
  width:60%;
  margin: -15% 10% 10% 45%;
  position: relative;
  z-index:0;
}

.contents .flexbox2 {
      width:90%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content:  space-between;
      align-items: flex-start;
      margin: 5% auto 15%;
 }

.contents .flexbox2 .box3 {
      width: 30%;
      margin: 0 auto;
}




.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;
}

.itemlink a{
  display: block;
  width: 25%;
  background: #444444;
  color: #fff;
  font-size: 1.6em;
  padding: 2% 4%;
  margin: 0 auto 10%;
  text-align: center;
}

    .scroll-fade {
        opacity: 0;
    }

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

.border-bottom {
     display: block;
     width: 10%;
     height: 1px;
     margin: 25% auto 20%;
     color: #696969;
 }

.headline {
     width: 90%;
     margin: 15% 0 0 0;
      font-size: 2.4em;
      line-height: 1.6em;
      color: #696969;
}

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

.insertpic {
     width: 80%;
     margin: 5% auto 10%;
}

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

.contents {
     width: 90%;
     margin: 20% 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: 80%;
         margin: 10% 0 20% auto;
     }

     .box2 {
         width: 70%;
         margin: 0 auto 0 0;
     }

     .box1:nth-child(even) {
         width: 80%;
         margin: 0 auto 0 0;
  }


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

.box2 .bag {
  width:65%;
  margin: 10% 60% 0 0;
  position: relative;
  z-index:100;
}

.box2 .double {
  width:65%;
  margin: -20% 0 0 40%;
  position: relative;
  z-index:0;
}

.contents .flexbox2 {
      width:100%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content:  space-between;
      align-items: flex-start;
      margin: 20% auto;
 }


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

 }