@charset "utf-8";

#top {
   height: 0%;
   /*background-image: url("image/title.jpg");*/
   background-size: cover;
   text-align: right;
}

body {
   margin: 0px;
   font-family: 'ダーツフォント','刻明朝','小塚ゴシック Pr6N R','ヒラギノ角ゴ Pro';
}

#mainContent {
   background-color: rgb(255, 255, 255);
   position: absolute;
	width: 100%;
	height: 100%;
   top: 10%;
   /*padding-top: 30px;*/
}

/*
.setumei {
   margin: 30px;
}
*/
/*
.shouhinImage {
   width: 50%;
}
*/
.menuImage1{
   position: absolute;
   top: -9.5%;
   left: 95%;
   z-index: 10;
}

.shouhinImage img {
   width: 100%;
   position: absolute;
   top: -6%
}

.setumeiFrame img{
width: 38%;
position: absolute;
top:36%;
left: 62%;
animation: fadein 2s ease-out forwards;
}

.setumeiFrame2 img{
   width: 38%;
   position: absolute;
   top:36%;
   right: 30%;
   animation: fadein 2s ease-out forwards;
   }

.setumeiFrame3 img{
      width: 38%;
      position: absolute;
      top:36%;
      right: 60%;
      animation: fadein 2s ease-out forwards;
    }

    @keyframes fadein {
      0% {
         opacity: 0
      }
      100% {
         opacity: 1
      }
    }
.shouhinText {
   width: 50%;
}

.setumeiBlock {
   display: flex;
}

.square_box {
   width: 90%;
   height: 18%;
   background: #d2ecf4;
   position: absolute;
   top: 52%;
   right: 5%;
   border-radius: 20px;
 }

 .square_box2 {
   width: 90%;
   height: 18%;
   background: #d2ecf4;
   position: absolute;
   top: 73%;
   right: 5%;
   border-radius: 20px;
 }

 .square_box3 {
   width: 90%;
   height: 18%;
   background: #d2ecf4;
   position: absolute;
   top: 94%;
   right: 5%;
   border-radius: 20px;
 }

 .Button1 {
   width: 90%;
   height: 4%;
   background: #a18f79;
   position: absolute;
   top: 114%;
   right: 5%;
   border-radius: 20px;
   cursor: pointer;
   display: inline-block;
  /*padding: .6em 2.5em .6em 2em;*/
 }
 .Button1::after {
   position: absolute;
   content: '\f105';
   font-family: 'Font Awesome 5 Free';
   /*font-weight: 900;*/
   /*top: 50%;*/
   /*right: .4em;*/
   /*left: auto;*/
   /*bottom: auto;*/
   transform: translateY(-50%);
 }
 .Button1:hover {
    background: #d6cec0;
    color: #fff;
 }
 

 .buttonText1{
   position: absolute;
   left: 40%;
   font-size:  17px;
   color: rgb(255, 255, 255);	
   top: -46%;
   left: 22%;
 }

.background-brown {
	position: absolute;
	width: 100%;
	height: 4%;
	background: #99928c;
   top: 0%;
}

.setumeiImage1{
   position: absolute;
   top: 08%;
   left: 2%;
   /*width: 150px;*/
}

.setumeiImage2{
   position: absolute;
   top: 8%;
   left: 2%;
   /*width: 150px;*/
}

.setumeiImage3{
   position: absolute;
   top: 3%;
   left: 2%;
   /*width: 150px;*/
}

.sceneImage1{
   position: absolute;
   top: 130%;
   left: 5%;
}
.sceneImage2{
   position: absolute;
   top: 129.2%;
   left: 50%;
}
.sceneImage3{
   position: absolute;
   top: 147%;
   left: 5%;
}
.sceneImage4{
   position: absolute;
   top: 147%;
   left: 50%;
}

.bookImage1{
   position: absolute;
   top: 170%;
   left: 5%
}
.bookImage2{
   position: absolute;
   top: 163%;
   left: 27%
}
.bookImage3{
   position: absolute;
   top: 173%;
   left: 56%;
}

.bookText1{
   position: absolute;
   top: 181%;
   left: 8%;
   font-size:  10px;
   color: #6f624b;	
}
.bookText2{
   position: absolute;
   top: 182.9%;
   left: 32.5%;
   font-size:  10px;
   color: #6f624b;	
}
.bookText3{
   position: absolute;
   top: 182.9%;
   left: 62%;
   font-size:  10px;
   color: #6f624b;	
}
.bookText4{
   position: absolute;
   top: 167%;
   right: 5%;
   font-size:  30px;
   color: #6f624b;	
}
.setumeiText1{
   position: absolute;
   top: -15%;
   left: 33%;
   z-index: 10;
}
.setumeiText2{
   position: absolute;
   top:-15%;
   left: 33%;
   z-index: 10;
}
.setumeiText3{
   position: absolute;
   top: -13%;
   left: 34%;
   z-index: 10;
}
.sizeText1{
   position: absolute;
   top: 160%;
   color: #6f624b;	
   left: 5%;
}
.exampleText1{
   position: absolute;
   left: 40%;
   font-size:  20px;
   color: #6f624b;	
   top: 121%;
   left: 3%;
}
.appealText1{
   position: absolute;
   left: 00%;
   font-size:  20px;
   color: #6f624b;	
   top: 33%;
}

.flameText1{
   position: absolute;
   left: 17%;
   font-size:  18px;
   color: #6f624b;	
   top: 38%;
   animation: fadein 2s ease-out forwards;
}

.flameText2{
   position: absolute;
   left: 46%;
   font-size:  18px;
   color: #6f624b;	
   top: 35.5%;
   animation: fadein 2s ease-out forwards;
}
.flameText3{
   position: absolute;
   left: 74%;
   font-size:  18px;
   color: #6f624b;	
   top: 35.5%;
   animation: fadein 2s ease-out forwards;
}

.usingText1{
   position: absolute;
   left: 25.5%;
   font-size:  13px;
   color: #6f624b;	
   top: 133.5%
}
.usingText2{
   position: absolute;
   left: 70.5%;
   font-size:  13px;
   color: #6f624b;	
   top: 133.5%
}
.usingText3{
   position: absolute;
   left: 25.5%;
   font-size:  13px;
   color: #6f624b;	
   top: 150.5%
}
.usingText4{
   position: absolute;
   left: 70.5%;
   font-size:  13px;
   color: #6f624b;	
   top: 150.5%
}
.searchText1{
   position: absolute;
   left: 5%;
   font-size:  13px;
   color: #6f624b;	
   top: 189%;
   border: 1px solid;
}
.searchText2{
   position: absolute;
   left: 38%;
   font-size:  13px;
   color: #6f624b;	
   top: 189%;
   border: 1px solid;
}
.searchText3{
   position: absolute;
   left: 71%;
   font-size:  13px;
   color: #6f624b;	
   top: 189%;
   border: 1px solid;
}

.homeImage1{
   position: absolute;
   top: 0.4%;
   left: 0.5%;
   z-index: 10;
}

.searchImage1{
   position: absolute;
   top: 0.3%;
   left: 9%;
   z-index: 10;
}

.shouhinImage img {
   height: auto;
   transition: transform .2s ease; /* ゆっくり変化させる */
 }
 .shouhinImage:hover img {
   transform: scale(1.1); /* 拡大 */
 }

 .sceneImage1 img{
   height: auto;
   transition: transform .2s ease; /* ゆっくり変化させる */
 }
 .sceneImage1:hover img {
   transform: scale(1.1); /* 拡大 */
 }

 .sceneImage2 img{
   height: auto;
   transition: transform .2s ease; /* ゆっくり変化させる */
 }
 .sceneImage2:hover img {
   transform: scale(1.1); /* 拡大 */
 }

 .sceneImage3 img{
   height: auto;
   transition: transform .2s ease; /* ゆっくり変化させる */
 }
 .sceneImage3:hover img {
   transform: scale(1.1); /* 拡大 */
 }

 .sceneImage4 img{
   height: auto;
   transition: transform .2s ease; /* ゆっくり変化させる */
 }
 .sceneImage4:hover img {
   transform: scale(1.1); /* 拡大 */
 }