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

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

 .contents img {
      width: 100%;
 }


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

.contents .intro {
     width: 100%;
     margin: 5% auto 0;
     font-size: 2.0em;
     line-height: 1.8em;
     color: #696969;
     position: relative;
     overflow: hidden;
}

.contents .intro img {
     width: 100%;
     margin: 0 auto;
     padding: 0 5%;
     z-index:0;
}

.contents .intro_title {
     width: 100%;
     position: absolute;
     top: 63%;
     padding: 3% 0;
     z-index:100;
     background-color:rgba(0,0,0,0.5);
     font-size: 1.6em;
     color: #fff;
     text-align: center;
     z-index:100;
}

.contents .detail {
     width: 100%;
     margin: 10% auto 0;
     background: #fafafa;
}

.contents .detail_title {
     font-size: 3.8em;
     line-height: 1.2em;
     width: 100%;
     color: #696969;
     text-align: center;
     padding-top: 5%;
}

.contents .detail img {
     width: 100%;
     margin: 3% auto 0;
     padding: 0 10%;
}

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


.headline01 {
     font-size: 4.8em;
     line-height: 1.2em;
     width: 100%;
     margin: 15% auto 3%;
     color: #d2b48c;
     font-family: Times, "Times New Roman", Georgia, serif !important;
     font-style: italic;
     border-bottom: solid 1px;
     border-image: linear-gradient(to right, #999999 0%, #ffffff 100%) 1;
}

.headline02 {
     font-size: 4.8em;
     line-height: 1.2em;
     width: 100%;
     margin: 15% auto 3%;
     color: #a9a9a9;
     font-family: Times, "Times New Roman", Georgia, serif !important;
     font-style: italic;
     border-bottom: solid 1px;
     border-image: linear-gradient(to right, #999999 0%, #ffffff 100%) 1;
}


.headline03 {
     font-size: 4.8em;
     line-height: 1.2em;
     width: 100%;
     margin: 15% auto 3%;
     color: #bdb76b;
     font-family: Times, "Times New Roman", Georgia, serif !important;
     font-style: italic;
     border-bottom: solid 1px;
     border-image: linear-gradient(to right, #999999 0%, #ffffff 100%) 1;
}

.headline04 {
     font-size: 4.8em;
     line-height: 1.2em;
     width: 100%;
     margin: 15% auto 3%;
     color: #00fa9a;
     font-family: Times, "Times New Roman", Georgia, serif !important;
     font-style: italic;
     border-bottom: solid 1px;
     border-image: linear-gradient(to right, #999999 0%, #ffffff 100%) 1;
}

 .contents .text {
     font-size: 1.8em;
     line-height: 1.8em;
     color: #696969;
     margin: 10% auto 0;
     padding: 0;
     width: 80%;
 }

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

      flex-wrap: wrap;
      flex-direction: row;
      align-items: flex-end;
      margin: 0 auto;
      clear: both;
 }


.contents .flexbox .box1 {
      width: 100%;
      margin: 0 auto;
      position: relative;
 }

.flexbox .box1 .left-top {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 10px 10px 5px #8b4513;
 }
.flexbox .box1 .left-top2 {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 10px 10px 5px #bdb76b;
 }
.flexbox .box1 .right-bottom {
      width: 60%;
      margin: -5% 0 0 45%;
      z-index: 0;
      box-shadow: 10px 10px 5px #dcdcdc;
 }

.flexbox .box1 .right-top {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      z-index: 100;
      box-shadow: 0px 10px 5px 10px #dcdcdc;
 }

.flexbox .box1 .left-bottom {
      width: 60%;
      margin: -5% 0 0 0;
      z-index: 0;
      box-shadow: 10px 10px 5px #dcdcdc;
 }


 .flexbox .box1 .horizontal {
      width: 80%;
      position: absolute;
      top: 60%;
      bottom: 0;
      left: 0;
      right: 0;
      z-index:100;
 }


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


.contents .flexbox2 .box2 {
      width: 100%;
      height: 1400px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
 }

.flexbox2 .box2 .square {
      width: 60%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      right: ;
      z-index:0;
 }
.flexbox2 .box2 .square .box1 {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      position: absolute;
      bottom: 0;
 }

.flexbox2 .box2 .vertical {
      width: 60%;
      position: absolute;
      top: 30%;
      bottom: 0;
      left: 0;
      right: 0;
      z-index:100;
 }

.flexbox2 .box2 .wavy {
      width: 60%;
      position: absolute;
      top: 0%;
      bottom: 0;
      left: 0;
      right: 0;
      z-index:100;
 }

 .flexbox2 .box2 .horizontal {
      width: 60%;
      position: absolute;
      top: 50%;
      bottom: 0;
      left: 40%;
      right: 0;
      z-index:100;
 }

.contents .flexbox3 {
      width:80%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content:  center;
      align-items: flex-start;
      margin: 5% auto 0;
 }

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

.contents .flexbox4 {
      width:50%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content:  center;
      align-items: flex-start;
      margin: 10% auto 0;
 }

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

.partition {
     display: block;
     width: 11%;
     height: 1px;
     margin: 17% auto;
     color: #696969;
 }

.contents .color  {
      color: #696969;
      font-size: 2.8em;
      padding-left: 10%;
      margin-bottom: 2%;
}


.contents .itemname  {
      color: #696969;
      font-size: 1.4em;
      position: relative;
      justify-content: flex-start;
      margin-top: 3%;
}

.contents .itemprice  {
      color: #696969;
      font-size: 1.2em;
      text-align: center;
      margin: 2% auto 0;
}

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

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

    .scroll-fade {
        opacity: 0;
    }

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

 .contents {
     width: 100%;
     margin: 0 auto 10%;
     padding: 0 5% 5% 5%;
 }


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

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

.contents .intro img {
     width: 100%;
     margin: 0 auto;
     padding: 0;
}

.contents .intro_title {
     width: 100%;
     position: absolute;
     top: 72%;
     padding: 3% 0;
     z-index:100;
     background-color:rgba(0,0,0,0.5);
     font-size: 1.0em;
     color: #fff;
     text-align: center;
     z-index:100;
}

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

.contents .detail_title {
     font-size: 2.2em;
     line-height: 1.2em;
     width: 100%;
     color: #696969;
     text-align: center;
     padding-top: 10%;
}

.contents .detail img {
     width: 100%;
     margin: 5% auto 0;
     padding: 0 15%;
}

.contents .detail_text {
     font-size: 1.3em;
     line-height: 1.5em;
     color: #696969;
     margin: 7% auto 0;
     padding: 0 15% 15%;
     width: 100%;
 }

.headline01 {
     font-size: 3.2em;
     line-height: 1.4em;
     width: 100%;
     margin: 15% auto 5%;
     color: #d2b48c;
     font-family: Times, "Times New Roman", Georgia, serif;
     font-style: italic;
     border-bottom: solid 1px;
     border-image: linear-gradient(to right, #999999 0%, #ffffff 90%) 1;
}

.headline02 {
     font-size: 3.2em;
     line-height: 1.2em;
     width: 100%;
     margin: 15% auto 5%;
     color: #a9a9a9;
     font-family: Times, "Times New Roman", Georgia, serif;
     font-style: italic;
     border-bottom: solid 1px;
     border-image: linear-gradient(to right, #999999 0%, #ffffff 90%) 1;
}

.headline03 {
     font-size: 3.2em;
     line-height: 1.2em;
     width: 100%;
     margin: 15% auto 5%;
     color: #bdb76b;
     font-family: Times, "Times New Roman", Georgia, serif;
     font-style: italic;
     border-bottom: solid 1px;
     border-image: linear-gradient(to right, #999999 0%, #ffffff 90%) 1;
}

.headline04 {
     font-size: 3.2em;
     line-height: 1.2em;
     width: 100%;
     margin: 15% auto 5%;
     color: #00fa9a;
     font-family: Times, "Times New Roman", Georgia, serif;
     font-style: italic;
     border-bottom: solid 1px;
     border-image: linear-gradient(to right, #999999 0%, #ffffff 90%) 1;
}

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

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


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

.flexbox .box1 .left-top {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 10px 10px 5px #8b4513;
 }


.flexbox .box1 .left-top2 {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      box-shadow: 10px 10px 5px #bdb76b;
 }

.flexbox .box1 .right-bottom {
      width: 60%;
      margin: -5% 0 5% 37%;
      z-index: 0;
      box-shadow: 10px 10px 5px #dcdcdc;
 }

.flexbox .box1 .right-top {
      width: 70%;
      margin-left: auto;
      margin-right: auto;
      z-index: 100;
      box-shadow: 10px 10px 5px #dcdcdc;
 }

.flexbox .box1 .left-bottom {
      width: 60%;
      margin: -5% 0 5% 0;
      z-index: 0;
      box-shadow: 10px 10px 5px #dcdcdc;
 }


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


.contents .flexbox2 .box2 {
      width: 100%;
      height: 550px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
 }

.flexbox2 .box2 .square {
      width: 55%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 35%;
      right: ;
      z-index:0;
 }

.flexbox2 .box2 .vertical {
      width: 45%;
      position: absolute;
      top: 27%;
      bottom: 0;
      left: 0;
      right: 48;
      z-index:100;
 }

 .flexbox2 .box2 .horizontal {
      width: 80%;
      position: absolute;
      top: 55%;
      bottom: 0;
      left: 20%;
      right: 0;
      z-index:100;
 }

.contents .flexbox3 {
      width:60%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content:  center;
      align-items: flex-start;
      margin: 5% auto 0;
 }

.contents .flexbox3 .box3 {
      width:44%;
      margin: 5% auto;
}

.contents .flexbox4 {
      width:60%;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content:  center;
      align-items: flex-start;
      margin: 0 auto;
 }

.contents .flexbox4 .box4 {
      width: 47%;
      margin: 0 auto;
}

.partition {
     display: block;
     width: 11%;
     height: 1px;
     margin: 17% auto;
     color: #696969;
 }

.contents .color  {
      color: #696969;
      font-size: 1.8em;
      padding-left: 5%;
      margin-bottom: 2%;
}


.contents .itemname  {
      color: #696969;
      font-size: 1.2em;
      margin-top: 5%;
}

.contents .itemprice  {
      color: #696969;
      font-size: 0.9em;
      margin: 3% auto 0;
}

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

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

}