@charset "utf-8";


.logo-b{
	margin-bottom: 35px;
}
.sns-b{
	margin-top: 20px;
}

/*====================================================================================================
  タイトル文字
====================================================================================================*/

/* 縦書き */
h1.vertical {
  margin: 30px auto 50px ;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 180%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-align: left;
  padding: 10px;
}

h1.vertical p{
  margin-top:-15px;
}

h1.yoko {
  margin: 80px auto 20px;
  font-size: 25px;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 150%;
  text-align: center;
  padding: 10px;
}

h1.mid {
  margin: 0 auto 10px;
  font-size: 25px;
  font-weight: 300;
  letter-spacing: 0.5em;
  line-height: 190%;
  text-align: center;
}

h2.mid {
  font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
  color: #000;
  margin: 0 auto 20px;
  padding-right: 10px;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0.2em;
  line-height: 150%;
  text-align: center;
}



.h-box{
      width:100%;
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 100px;}

.img-box {
      position: relative;
	  float:left;
      display: flex;
      width:50%;
      height:450px;
	  overflow: hidden;
}
.img1, .img2 , .img01, .img02 {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
    background: center center no-repeat;
    animation: anime 8s 0s infinite;
    opacity: 0;
}
.img1 {
    background-image: url("../image/dummy.jpg");
    background-size: cover;
}
.img2 {
    background-image: url("../image/umi.jpg");
    background-size: cover;
    animation-delay: 4s;
}
.img01 {
    background-image: url("../image/umi.jpg");
    background-size: cover;
}
.img02 {
    background-image: url("../image/dummy.jpg");
    background-size: cover;
    animation-delay: 4s;
}

@keyframes anime {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
        transform: scale(1.2);
}
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

.clear_box {
    clear:  both;               /* 回り込みを解除する */
}



 .k-box{
	 margin: 0 auto;
	 width: 800px;
	 padding-top: 80px;
	 padding-bottom: 100px;
	 background: url("../image/kochi.jpg") no-repeat;
	 background-position: top 30% right 50%;
	 background-size: 800px;
	 position: relative;
	 }

    .text{
	 margin: 0 auto 30px;
	 width: 85%;
	 max-width: 450px;
	 font-size: 14px;
	 line-height: 190%;
	 text-align: left;
	 }


@media (max-width: 767px) {

h1.vertical {
  float:none;
	}
	

h1.mid {
  letter-spacing: 0.35em;
}

h2.mid {
  padding-right: 8px;
}	
	
	
	
.h-box{
      padding-bottom: 0;}
	
.img-box {
      width:50%;
      height:250px;
}
.img1, .img2 , .img01, .img02 {
    height: 250px;
}
	
	 .k-box{
     width: 350px;
	 background-size: 480px;
	 background-position: top 30% right 50%;
	 overflow-x: hidden;
	 }
	
    .text{
	 max-width: 320px;
	 }

}

/*====================================================================================================
  トップ揺れ動くアニメーション
====================================================================================================*/


	 .ilchi{
	 padding-top: 50px;
	 width:500px;
	 animation: shake 4.5s infinite;
	 transform: rotate(6deg);}

	 @keyframes shake {
	 50% {
        transform: rotate(-6deg);
	 }
	 100% {
        transform: rotate(6deg);
	 }
	 }

	 .ebi{ position: absolute; width: 100px; height: 124px; top:0px; right: 240px; animation: fluffy 2s infinite;}
	 .tai{ position: absolute; width: 120px; height: 66px; top:180px; left: 150px; animation: fluffy 1.8s infinite;}
	 .katsu{ position: absolute; width: 140px; height: 63px; top:320px; right: 130px; animation: fluffy 2.2s infinite;}
     .kabu{ position: absolute; width: 100px; height: 105px; top:780px; left: 100px; animation: fluffy 1.8s infinite;}
     .buri{ position: absolute; width: 130px; height: 63px; top:900px; right: 10px; animation: fluffy 2s infinite;}

     .yatoya-gm{ position: absolute; width: 70px; height: 128px; top:825px; right:46%; mix-blend-mode: multiply;}
     .yatoya-e{ margin: 80px auto; width: 350px; height: 105px; top:1100px; right: 10px; }

	 @keyframes fluffy {
	 0%, 100% {
	 transform: translateY(0)  rotate( 20deg );
	 }
	 50% {
	 transform: translateY(-20px) rotate( 30deg );
	 }
	 }
	
@media (max-width: 767px) {
	
	 .ilchi{ width:320px;}
	
	
	 .ebi{ width: 75px; height: 93px; top:50px; right: 20px;}
	 .tai{ width: 90px; height: 50px; top:200px; left: 10px;}
	 .katsu{ width: 110px; height: 50px; top:320px; right: 0px;}
     .kabu{ width: 80px; height: 84px; top:800px; left: 10px; }
     .buri{ width: 110px; height: 53px; top:1080px; right: 10px; }
	 
	 .yatoya-gm{ width: 50px; height: 92px; right:43%; top:780px;}
     .yatoya-e{ margin: 80px auto; width: 300px; height: 90px; top:1000px; right: 10px; }
	 
}	

/*====================================================================================================
  画像ループ用
====================================================================================================*/

	 @keyframes infinity-scroll-left {
	 from {
	 transform: translateX(0);
	 }
	 to {
	 transform: translateX(-100%);
	 }
	 }
	 .scroll-infinity {
	 padding-top: 50px;
	 }
	 .scroll-infinity__wrap {
	 display: flex;
	 overflow: hidden;
	 }
	 .scroll-infinity__list {
	 display: flex;
	 list-style: none;
	 padding: 0;
	 }
	 .scroll-infinity__list--left {
	 animation: infinity-scroll-left 30s infinite linear 0.5s both;
	 }
	 .scroll-infinity__item {
	 width: calc(100vw / 6);
	 }
	 .scroll-infinity__item>img {
	 width: 100%;
	 }


@media (max-width: 767px) {
    
	 .scroll-infinity {
	 padding-top: 0px;
	 }
	 .scroll-infinity__item {
	 width: calc(100vw / 3);
	 }
	
}

/*====================================================================================================
  フェードイン
====================================================================================================*/

.fadeIn {
  opacity: 0;
  transition: 2s;
}
.fadeIn.is-show {
  opacity: 1;
}

.fadeIn_l {
  opacity: 0;
  transform: translate(-50%, 0);
  transition: 2s;
}
.fadeIn_l.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_r {
  opacity: 0;
  transform: translate(50%, 0);
  transition: 2s;
}
.fadeIn_r.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.fadeIn_s {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_s.is-show {
  transform: translate(0, 0);
  opacity: 1;
}


.fadeIn_u {
  opacity: 0;
  transform: translate(0, -50%);
  transition: 2s;
}
.fadeIn_u.is-show {
  transform: translate(0, 0);
  opacity: 1;
}

.char {
    opacity: 0;
    display: inline-block;
    animation: fadeIn 0.1s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


/*====================================================================================================
  トップページ　box
====================================================================================================*/

 #gazo{ margin: 0 auto; width: 1000px; position: relative;}
 #gazo2{ margin: 0 auto; width: 1000px; position: relative;}
 #gazo3{ margin: 0 auto; width: 1000px; position: relative;}
 #box02{
     padding-bottom: 100px;
    }
 .mame{ position: absolute; width: 80px; height: 73px; top:0px; left: 20%;}
 #box03{
	 margin-top: 100px;
	 background: url("../image/menu-bp.jpg") no-repeat center center;
     background-size: cover;
	 position: relative;
    }
    .photo-m{
      width:100%;
      height:350px;
	  margin-bottom: 50px;
    }
    .u-box{
      background: url("../image/umi.jpg") no-repeat left top;
	  background-position: 50%  20%;
      background-size: cover;
    }
    .umino-m{ position: absolute; width: 450px; height: 128px; top:-100px; left: 15%;}
 .katsu2{ position: absolute; width: 125px; height: 83px; top:0px; left: 15%;}

 #box04{
	 margin-top: 50px;
     padding-bottom: 100px;
	 background: url("../image/menu-bp.jpg") no-repeat center center;
     background-size: cover;
	 position: relative;
    }
    .photo-m{
      width:100%;
      height:350px;
	  margin-bottom: 50px;
    }
    .u-photo{
      background: url("../image/umi.jpg") no-repeat left top;
	  background-position: 50%  20%;
      background-size: cover;
    }
    .k-photo{
      background: url("../image/kome.jpg") no-repeat left top;
	  background-position: 0%  80%;
      background-size: cover;
    }
    .kome-m{ position: absolute; width: 146px; height: 140px; top:-100px; right: 15%;}
    .kome{ margin-top: 100px; }
 .komeil{ position: absolute; width: 80px; height: 104px; top:-20px; right: 25%;}

@media (max-width: 767px) {
#gazo{ margin: 0 auto; width:100%; max-width: 400px;}
#gazo2{ margin: 0 auto; width:100%; max-width: 400px;}
#gazo3{ margin: 0 auto; width:100%; max-width: 400px;}
.mame{ width: 70px; height: 64px; top:-40px; left: 20px;}
#box03{
	 background: url("../image/menu-bs.jpg") no-repeat center center;
     background-size: cover;
    }
    .photo-m{
      height:300px;
    }
	 .u-photo{
     width:100%;
     background-size: cover;
	 background-position: center top;
	 overflow-x: hidden;
	 }
    .umino-m{ position: absolute; width: 300px; height: 86px; top:-70px; left: 5%;}
    .kome-m{ position: absolute; width: 104px; height: 100px; top:-70px; right: 5%;}
.katsu2{ width: 105px; height: 70px; top:-65px; left: 10px; }

#box04{
	 background: url("../image/menu-bs.jpg") no-repeat center center;
     background-size: cover;
    }
    .photo-m{
      height:300px;
    }
	 .u-box{
     width:100%;
     background-size: cover;
	 background-position: center top;
	 overflow-x: hidden;
	 }
 .komeil{ width: 60px; height: 78px; top:-95px; right: 30px; }
}




/*====================================================================================================
  トップページ　商品紹介
====================================================================================================*/

 #box05{
	 margin: 0 auto;
	 max-width: 1280px;
	 margin-bottom: 100px;
	 margin-top: 150px;
    }

	.yatoya-io{
	max-width:180px;
	margin: 0 auto;
	padding: 0 0 50px;	
	}
	.menu-in{
	 margin: 50px auto;
	 max-width: 700px;
	 display: flex;
	 flex-wrap: wrap;
	 gap: 10px;
	 }
	.menu-in li{
	 flex: auto;
	 width: 15%;
	 }
	.menu-box{
	 display: flex;
	 float:left;
	 }
	.menu-c{
      clear: both;
	}
	.menu{
      width: 380px;
	  height: 550px;
	  margin: 0 auto;
	  padding-bottom: 15px;
      padding-right: 15px;
      padding-left: 15px;
	  position: relative;
    }
    .menu-img{
	  border-radius: 20px;
      width: 350px;
	  height: 230px;
	  overflow: hidden;
    }
    .menu-img2{
      width:120px;
	  height: 141px;
	  top:108px;
	  left: -30px;
	  position: absolute;
	  z-index: 99;
    }
    .menu-t{
      margin: 20px auto 10px;
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0.2em;
      line-height: 180%;
      text-align: center;
    }
    .menu-t p{
      margin: 40px auto 25px;
    }
    .menu-m{
	  color: #fff;
	  margin: 0 auto;
      font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
      padding: 5px 10px;
	  font-size: 16px;
	  background-color: #c9a063;
	  border-radius: 10px;
    }
    .menu-k{
	  color: #000;
	  margin: 0 auto;
      font-family: "Sawarabi Gothic", sans-serif,"Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
      padding: 5px 0;
	  font-size: 20px;
    }
    .menu-k span{
	  color: #9b957e;
	  margin: 0 auto;
	  font-size: 15px;
    }
    .menu-b{
	  text-align: left;
      padding: 5px 0 10px;
	  font-size: 14px;
    }
    .menu-p{
	  margin: 0 auto;
      font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
      padding: 10px 15px;
	  font-size: 12px;
      line-height: 160%;
	  background: url("../image/dot.png") no-repeat center center;
	  background-size: 100%;
	  background-color: #fff;
    }
    .menu-p p{
	  max-width: 310px;
	  margin: 0 auto;
      font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
      padding: 6px 10px;
	  font-size: 12px;
      line-height: 160%;
	  background-color: #fff;
	  border-radius: 5px;
    }




#menu01{margin-right: 70px;}
#menu02{margin-right: 70px;}
#menu04{margin-right: 70px;}
#menu05{margin-right: 70px;}
#menu07{margin-right: 70px;}
#menu08{margin-right: 70px;}
#menu10{margin-right: 70px;}
#menu11{margin-right: 70px;}






@media (max-width: 767px) {

 #box05{
	 margin: 0 auto;
	 width: 100%;
	 margin-bottom: 80px;
	 margin-top: 100px;
    }
	
	.yatoya-io{
	max-width:180px;
	margin: 0 auto;
	padding: 0 0 50px;	
	}
	
	.menu-in{
	 margin: 60px auto;
	 max-width: 310px;
	 }
	
	.menu-in li{
	 flex: auto;
	 width: calc((100% - 35px) / 3);
	 }
	
	.menu-in::after{
	 content: "";
	 width: calc((100%  - 35px) / 3);
	}
	
	.menu-box{
	 display:block;
	 float:none;
	 margin-bottom: -45px;
	 }
　　 .menu-c{
      clear: both;
    }
    .menu{
      width: 100%;
	  height: 480px;
	  margin: 0 auto;
      padding-right: 0px;
      padding-left: 0px;
	  padding-bottom: 15px;
    }
    .menu-img{
      width: 100%;
	  height: 192px;
	  overflow: hidden;
    }
    .menu-img2{
      width:100px;
	  height: 100px;
	  top:90px;
	  left: -30px;
	  position: absolute;
	  z-index: 99;
    }
    .menu-t{
      margin: 20px auto 10px;
      font-size: 20px;
      font-weight: 300;
      letter-spacing: 0.2em;
      line-height: 165%;
    }
    .menu-t p{
      margin: 0 auto;
    }
	.menu-s{
		max-width: 310px;
		margin: 0 auto;
		position: relative;
	}
    .menu-m{
	  color: #fff;
	  margin: 0 auto;
      font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
      padding: 5px 10px;
	  font-size: 16px;
	  background-color: #c9a063;
	  border-radius: 10px;
    }
    .menu-k{
	  color: #000;
	  margin: 0 auto;
      font-family: "Sawarabi Gothic", sans-serif,"Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
      padding: 5px 0;
	  font-size: 20px;
    }
    .menu-k span{
	  color: #9b957e;
	  margin: 0 auto;
	  font-size: 15px;
    }
    .menu-b{
	  text-align: left;
      padding: 5px 0 10px;
	  font-size: 13px;
      line-height: 185%;
    }
    .menu-p{
	  width: 100%;
	  margin: 0 auto;
      font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
      padding: 10px 15px;
	  font-size: 12px;
      line-height: 160%;
	  background: url("../image/dot.png") no-repeat center center;
	  background-size: 100%;
	  background-color: #fff;
    }
    .menu-p p{
	  max-width: 310px;
	  margin: 0 auto;
      font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; 
      padding: 6px 10px;
	  font-size: 12px;
      line-height: 160%;
	  background-color: #fff;
	  border-radius: 5px;
    }
	
	#menu01{margin-right: 0; margin-bottom: 30px;}
	#menu02{margin-right: 0;}
	#menu04{margin-right: 0;}
	#menu05{margin-right: 0;}
	#menu07{margin-right: 0;}
	#menu08{margin-right: 0;}
	#menu10{margin-right: 0;}
	#menu11{margin-right: 0;}
	
}

/*====================================================================================================
  トップページ　会社概要
====================================================================================================*/

	
#box06{
	 margin: 0 auto;
	 width: 100%;
	 padding: 0 0 100px;
}

	.yatoya-l{
	 position: relative;
	 border-bottom: 5px solid #f48b00;/*右：オレンジ*/
	 margin-bottom: 100px
	}
	.yatoya-l::before{
	 content: '';
	 position: absolute;
	 bottom: -5px;
	 right: -5px;
	 width: 50%;
	 height: 5px;
 	 background: #cea96e;/*左：ベージュ*/
	}
	.yatoya-ly{
	 margin: 0 auto;
	 max-width: 450px;
	 width: 80%;
	}
	
	.yayoya-box{
	 margin: 0 auto ;
	}

	.yatoya{
      margin: 20px auto 0 ;
	  background-color: #f1ede5;
	  padding: 20px;
	  width: 700px;
	  height: 250px;
	  border-radius: 10px;
	}
	
	.yatoya-img{
	 width: 50%;
	 height: 210px;
	 float:left;
	 overflow: hidden;
	 background: url("../../pic/access-y.jpg") no-repeat center center;
     background-size: 100%; 
	}
	
	.yatoya-a{
	 margin: 0 auto 30px;
	 width: 50%;
	 height: 100px;
	 font-size: 13px;
	 float:right;
	 padding: 20px;
	 text-align: left;
	}

	.yatoya-a p.name{
	 margin: 0 auto 15px;
	 font-size: 16px;
	 line-height: 180%;
	}
	.yatoya-a p.tel{
	 margin: 15px auto 0;
	 font-size: 14px;
	}	


@media (max-width: 767px) {

#box06{
	 margin: 0 auto;
	 width: 100%;
}

	.yatoya-ly{
	 margin: 0 auto;
	 max-width: 350px;
	 width: 80%;
	}
	
	.yayoya-box{
	 margin: 0 auto ;
	}

	.yatoya{
      margin: 20px auto 0 ;
	  background-color: #f1ede5;
	  padding: 20px;
	  width: 360px;
	  height: 250px;
	  border-radius: 10px;
	}
	
	.yatoya-img{
	 width: 45%;
	 height: 210px;
	 float:left;
	 overflow: hidden;
	 background: url("../../pic/access.jpg") no-repeat center center;
     background-size:cover; 
	}
	
	.yatoya-a{
	 margin: auto;
	 width: 55%;
	 height: 100px;
	 float:right;
	 padding: 30px 0 20px 20px;
	 font-size: 12px;
	 line-height: 150%;
	 text-align: left;
	}

	.yatoya-a p.name{
	 margin: 0 auto 15px;
	 font-size: 14px;
	 line-height: 180%;
	}
	.yatoya-a p.tel{
	 margin: 15px auto 0;
	 font-size: 13px;
	}	
}
	
/*====================================================================================================
  トップページ　写真左右
====================================================================================================*/

 .p-box{
      display: flex;
      flex-wrap: wrap;
      padding-top: 50px;
	  margin: 0 auto;
	  width: 500px;
	  overflow: hidden;
}
    .p-item{
      height:550px;
	  margin-bottom: 300px;
    }
    .p-box1{
      width:230px;
      height:450px;
	  margin-right: 30px;
	  margin-top:60px;
      background: url("../image/umi-01.jpg") no-repeat center center;
      background-size: cover;
    }
    .p-box2{
	  right: 0;
      width:230px;
      height:450px;
      background: url("../image/umi-02.jpg") no-repeat center center;
      background-size: cover;
	  background-position: 30% 0%;
    }
    .p-box01{
      width:230px;
      height:450px;
	  margin-right: 30px;
	  margin-top:60px;
      background: url("../image/kome-01.jpg") no-repeat center center;
      background-size: cover;
    }
    .p-box02{
	  right: 0;
      width:230px;
      height:450px;
      background: url("../image/kome-02.jpg") no-repeat center center;
      background-size: cover;
	  background-position: 45% 0%;
    }


@media (max-width: 767px) {

	
 .p-box{
      display: flex;
      flex-wrap: wrap;
      padding-top: 20px;
	  margin: 0 auto;
	  width: 380px;
	  overflow: hidden;
}
    .p-item{
      height:550px;
    }
    .p-box1{
      width:180px;
      height:400px;
	  margin-right: 20px;
	  margin-top:60px;
    }
    .p-box2{
      width:180px;
      height:400px;
    }
    .p-box01{
      width:180px;
      height:400px;
	  margin-right: 20px;
	  margin-top:60px;
    }
    .p-box02{
      width:180px;
      height:400px;
    }

}