/* ----------------------------------------------- 共通 */
html,
body {
  overflow-x: hidden;
}

body {
  color: #000000;
  font-family: 'Yomogi', cursive;
/*  font-family: 'Noto Sans JP', sans-serif;*/
  padding-bottom: 0;
  background: linear-gradient(90deg, rgb(239, 254, 255), rgb(213, 234, 255));
}

p {
  line-height: 2.0em;
  font-weight: 100;
  font-style: normal;
  font-size: 14px;

}
.section_title {
	/* フォントサイズ36px */
	font-size:36px;
	
	/* フォントの太さ600　標準は400です */
	font-weight:600;
}

/* section_titleに疑似要素を追加 */
.section_title::after {
	
	/* 疑似要素はデフォルトでインライン要素のためブロック要素に変更 */
	display:block;
	
	/* サブタイトル文字の大きさや余白を設定 */
	font-size:14px;
	font-weight:400;
	padding:16px 0 16px;
	
	/* 下線の幅を100pに設定 */
	width:100px;
	
	/* 下線を直線・1px・黒色に設定 */
	border-bottom:solid 1px #000;
}

/* ----------------------------------------------- ナビゲーションバー */
.navbar_brand_logo {
	/* サイズを32pxの正方形へ変更 */
	width:32px;
	height:32px;
	
	/* imgはインライン要素なのでインラインブロックに設定 */
	display:inline-block;
	
	/* "SAMURAI KITTCHEN" 文字との空白を15pxに設定 */
	margin-right:15px;
	
}

 /* カンマで区切ると複数のクラスに適用可能 */
.my_navbar_brand,
.my_nav_link {
	 /* フォントサイズを16pxに設定 */
	font-size:16px;
	
	/* フォントをserif体に設定 */
	font-family:'Lora',serif;
	
	/* フォント色を黒色に設定 */
	color:#000000 !important;
}	

/* Bootstrapのボタンに初期設定されている周囲のborder（枠線）を消す */
.navbar-toggler {
		padding:0 !important;
		border:none;
}

/* ハンバーガーボタンが✓状態である（押されている）とき、閉じるボタン(×)を表示する */
#hamburger_btn_check:checked~.hamburger_btn .btn_close {
	display:block;
}

/* ハンバーガーボタンが✓状態である（押されている）とき、ハンバーガーボタンを表示しない */
#hamburger_btn_check:checked~.hamburger_btn .btn_open {
	display:none;
}

/* 最初に表示したときは、閉じるボタン（×）は表示しない */
.btn_close {
	display:none;
}

/* 八バーガーボタンが押されているかを判断するためにチェックボックスは隠す */
#hamburger_btn_check {
	display:none;
}


/* ----------------------------------------------メイン画像 */
.mainpic {
	width:100%;
	/*height:400px;*/
}

.carouselImg {
	margin:0 auto;
	text-align:center;
	max-width:100%;
	box-shadow: inset 0 0 15px 15px rgb(255, 255, 255);

}


/* ----------------------------------------------- カルーセル */
.my_carousel_caption {
  /* フォントサイズ52px */
  font-size: 52px;
  
  /* 上下に余白追加 */
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  
   /* フォント色は白色 */
  color: #fff;
  
  /* テキスト中央揃え */
  text-align: center;
  font-family: 'Lora', serif;
  line-height: 1.5em;
}
 /* 疑似要素でアイコンを配置。前に配置しています */
.my_carousel_caption::before {
  content: url(../img/logoSymbol_White.png);
  display: block;
}

 /* スマートフォン画面幅（画面幅が最大375pxまで）の場合、以下のスタイルを適用。 */
@media screen and (max-width:375px) {
  .my_carousel_caption {
  
  	/* フォントサイズを27pxにする */
    font-size: 27px;
  }
}

/* carousel-itemの高さを32remに指定 */
.carousel-item {
  height: 32rem;
}



/*carousel-item直下の子要素imgタグに設定 */
.carousel-item>img {

 /* 絶対位置を指定 */
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  
  /* 高さはcarousel-itemに揃える */
  height: 32rem;


}



/* ----------------------------------------------- ギャラリー */
.gallery::after {
	content:"そのほかのもの";
	margin:0 auto 0;
}




/* ----------------------------------------------- ライブラリー */

.library::after {
	content:"ものがたり";
	margin:0 auto 0;
}

.library_title {
	font-size:18px;
	font-weight:600;
	font-style:normal;
}

.library_price {
	font-size:20px;
	font-weight:400;
	font-family:'Lora',serif;
}

.story_link {
	text-decoration: none;
	color:darkslategrey;
}

.story_link a:hover {
	color:rgb(31, 126, 150);
}





/* ----------------------------------------------- アクセス */
.access::after {
	content:"みちあんない";
	margin:0 auto 0;
}




/* ----------------------------------------------- フッター */
/* 背景色を画像の背景と同じ色に設定 */
#footer {
	background-color:#fff;
}

/* position: absoluteで下からの距離で固定 */
.copy_right {
	font-size:14px;
	
	/* 先祖要素のdivタグの左下の角を基準に絶対配置します */
	position:absolute;
	
	/* 下から1rem　左から12px */
	bottom:1rem;
	left:12px;
	display:flex;
}

/* copy_rightのクラスを適用したdivタグの子要素のpタグに適用される */
.copy_right > p {
	margin-right:5rem;
	margin-bottom:0;
}

/* copy_rightのクラスを適用したdivタグの子要素で、sns_imgクラスを適用しているimgタグに適用される */
.copy_right > img.sns_img {

	/* SNSアイコンのサイズ24px */
	height:24px;
	width:24px;
	
	/* 右方向へ余白10px */
	margin-right:10px;
	margin-top:0;
}

/* restaurant_infoの直下の子要素pタグすべてに適用される */
.restaurant_info p{
	font-weight:400;
	line-height:1.5;
	font-size:16px;
}

/* restaurant_info直下の子要素imgタグすべてに適用される */
.restaurant_info img {
	width:20px;
	height:20px;
	margin-right:10px;
	line-height:1.5;
	margin-top:auto;
}

/* サイトアイコンを64pxに設定 */
.footer_brand_logo {
	width:64px;
	height:64px;
	display:inline-block;
	/* 右側余白15px */
	margin-right:15px;
}

/* サイトタイトルのフォントをserif体（明朝体）に設定 */
.footer_text {
	font-size:24px;
	font-family:'Lora',serif;
}

/* 画像・作品のフェードイン */
.fadein {
  opacity : 0;
  transition : all 1s;
}
  
.fadein.active{
  opacity : 1;
}

/* スクロールして可視範囲になったら表示（scrollfadeinクラスとactiveクラスを設定） */
.scrollfadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}
 
.scrollfadein.active{
  opacity : 1;
  transform : translate(0, 0);
}

/* スマートフォン画面幅（最大991pxまで）でスタイルを適用 */
@media screen and (max-width:991px) {
	.footer_text,
	.copy_right {
		margin-top:2rem;
		text-align:center;
		position:relative;
	}
	
	.copy_right > p,img {
		margin-right:1rem;
		font-size:14px;
		margin:0;
		line-height:35px;
	}
}

/* 雪を降らせる */
.snow {
	/*雪の色*/
	color: snow;
	/*雪の大きさ*/
	font-size: 10px;
	/*初期位置*/
	position: fixed;
	top: -5%;
	/*雪を適当な幅で降らせる*/
	text-shadow:
	5vw   -100px 2px,
	10vw  -400px 3px,
	20vw  -500px 4px,
	30vw  -580px 1px,
	39vw  -250px 2px,
	42vw  -340px 5px,
	56vw  -150px 2px,
	63vw  -180px 0,
	78vw  -220px 4px,
	86vw  -320px 9px,
	94vw  -170px 7px;
	/*雪アニメーション1*/
	animation: roll 5s linear infinite;
  }
	/*2つめの雪アニメーション*/
  .snow2nd{animation: anim 8s linear infinite;}
  
  @keyframes roll {
	  0% {transform:rotate(0deg);}
	 90% {opacity:1;}
	 100% {transform:rotate(20deg);top:100%;opacity:0;}
  }
  @keyframes anim {
	100% {color:transparent;top:150%;}
  }

/* 雪を降らせる ここまで*/