@charset "utf-8";
/* CSS Document */
body{
	overflow-x: hidden;
}
body,
html {
	color: #221815;
	height: 100%;
	margin: 0 auto;
	letter-spacing: 2px;
	font-size: 20px;
	font-family: "A1 Mincho", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	background-image: url('images/bkimg.jpg');
}
section{
  height: 100%;
  margin: 0 auto;	
}
#spOnly{
	position: relative;
}
#fixLogo{
	position: fixed;
	top: 5px;
	left: 5px;
	display: none;
}
#fixLogo img{
	width: 70px;
}

.video_wrapper {
  background-image: url('images/bkimg.jpg');
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.video_wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    min-width: 100%;
    min-height: 100%;
}

/*固定する背景*/
.parallax-bg, .scrollbox {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15% 5%;
}
.parallax-bg {
  /*Appleでバグが出現のためコメントアウト*/
  /*background-attachment: fixed; */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100%;
  padding: 5%;
}
/*各背景の画像*/
.img-bg-01 {
  background-image: url('images/image1.jpg');
}
.img-bg-02 {
  background-image: url('images/image2.jpg');
}
.img-bg-03 {
  background-image: url('images/image3.jpg');
}
.img-bg-04 {
  background-image: url('images/image4.jpg');
}
.img-bg-05 {
  background-image: url('images/image5.jpg');
}
.img-bg-06 {
  background-image: url('images/image6.jpg');
}

/*スクロールするコンテンツ*/
.scrollbox {
  background-image: url('images/bkimg.jpg');
}
.contents1{
	width: 100%;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-orientation: upright;
	line-height: 48px;
}
.mochi1,.mochi2{
	margin: 30px 0 0;
}
.mochi1 img{
	width: 300px;
}
.mochi2 img{
	width: 80vw;
}
.contents2{
	width: 100%;
	display: block;
	line-height: 30px;
	padding: 15% 0 0;
	text-align: center;
	letter-spacing: -0.02rem;
}
.map{
	margin: 10px 5%;
	width: 90%;
}
.map img{
	width: 100%;
}
.tel,.address{
	margin: 0 0 30px;
}
#timeInfo{
	font-size: 16px;
	margin: 0 auto 10px;
	width: 335px;
}
#timeInfo td{
	text-align: left;
}
#timeInfo .tdRight{
	text-align: right;
}
.timeText{
	font-size: 16px;
	margin: 0 0 0 16px;
}
.logo{
	margin: 30px 0;
}
.logo img{
	width: 100px;
}
.spLink{
	color: #fff;
	background-color: #231815;
	padding: 15px 0;
}
#pcOnly,.link{
	display: none;
}
/*@media screen and ( max-width:400px) and ( max-height:800px) {*/
@media screen and ( max-width:400px) and ( max-height:700px) {
	body{
		font-size: 18px;
	}
	.contents1{
		font-size: 16px;
		line-height: 30px;
	}
}
@media screen and ( max-width:400px) and ( max-height:600px) {
	body{
		font-size: 16px;
	}
	.contents1{
		font-size: 14px;
		line-height: 40px;
	}
	.mini{
		padding: 5%;
	}
}

@media screen and (min-width:1000px) {
	/* 1000px以上に適用されるCSS */
	body{
		font-size: 18px;
	}
	#spOnly{
		display: none;
	}
	#pcOnly{
		display: block;
		margin: 0;
		width: 100%;	
		height: auto;		
	}
	.video_wrapper {
		width: 100%;
	}
	.contentsPC{
		display: flex;
	}
	.contentsPC div{
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 33.33%;
	}
	/*.contentsPC div img{
		width: 100%;
		object-fit:cover;
	}*/
	.wideImage{
		width: 100%;
		object-fit:cover;		
	}
	.mochi2 img{
		width: 330px;
	}
	.contents1{
		/*background-image: url('images/bkimg.jpg');*/
	}
	.contentsPC2 div{
		width: 100%;
		margin: 80px 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.lastText1{
		padding: 0 0 0 200px;
	}
	.lastText2{
		padding: 0 150px 0 0;
	}
	#footer{
		padding: 100px 0 0;
	}
	#info{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#info div{
		width: 40%;
		margin: 10px 20px;
	}
	#timeInfo{
		font-size: 16px;
		margin: 0 0 10px;
		width: auto;
	}	
	.logo,.link{
		padding: 20px 0;
		text-align: center;
	}
	.link{
		color: #fff;
		background-color: #231815;
		display: block;
	}
}
@media screen and (min-width:1000px) and ( max-width:1100px) {
	.contents1 {
	  line-height: 43px;
	}	
}
@media screen and (min-width:1280px) {
	#pcOnly{
		display: block;
		margin: 0 auto;
		width: 1280px;
	}
}
@media screen and (max-width:335px) {
	#timeInfo{
		font-size: 14px;
		width: auto;
	}
	.timeText{
		font-size: 14px;
	}
}
/*******************/
/* アニメーション設定 */
/*******************/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:3s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* スクロールされたらfadeUp */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}