@charset "utf-8";

/* -----------------------------YouTubeモーダル-----動画ポップアップ-------------------------- */
/* モーダル全体 */

.modal{
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
}
/* コンテンツ枠 */

.modal-content{
	position: relative;
	margin: auto;
	top: 50%;
	transform: translateY(-50%);
	width: 90%;
	max-width: 900px;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}
/* YouTube iframe（16:9でレスポンシブ表示） */

.modal iframe{
	width: 100%;
	aspect-ratio: 16/9;
	height: auto;
	display: block;
}
/* 閉じるボタン */

.close{
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 32px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	z-index: 1100;
}
/* スマホ向け調整 */
@media (max-width: 768px) {
  .modal-content{
    width: 98%;
    border-radius: 0;   /* スマホではフチをなくして全画面感に */
  }
  .close{
    font-size: 40px;   /* 閉じるボタン大きめ */
  }
}

/*----------------ここからタブレット用（481px～800px）環境の設定-----------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (min-width:481px) and (max-width:800px){
     /*コンテナー（HPを囲むブロック）*/
#container{
     width: auto;
     margin: 10px;
}
/*コンテンツ（main,subを囲むブロック）*/
#contents{
     width: auto;
}
/*main,subコンテンツ*/
#main, #sub{
     float: none;
     width: auto;
}
}
/*-------------------------ここからスマートフォン用（480px以下）環境の設定---------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media (max-width : 480px){
     /*全体の設定*/
body{
     background : url(none) 0% 0% / auto auto repeat scroll padding-box border-box transparent;
}
/*コンテナー（HPを囲むブロック）*/
#container{
     width: auto;
     padding: 5px;
     /*ボックス内の余白*/
	border-radius: 0px;
     /*角丸のサイズ*/
	-webkit-box-shadow: none;
     box-shadow: none;
}
/*コンテンツ（main,subを囲むブロック）*/
#contents{
     width: auto;
}
/*main,subコンテンツ*/
#main, #sub{
     float: none;
     width: auto;
}
/*mainコンテンツ*/
/*mainコンテンツの段落タグ設定*/
#main p{
     padding: 0.5em 5px 1em;
}
/*山車紹介メニューページのブロック*/
/*各ボックスの設定*/
#main section.list article{
     width: 96%;
     /*ボックスの幅*/
	height: auto;
     /*ボックスの高さ*/
	/* float: none;
     */ /* Flexbox を使用するため float を削除 */
	margin: 0 auto 15px;
     /* 中央揃えと下マージン */
	box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
}
#main section.list article img{
     width: 100%;
     /*ボックスの幅*/
	height: auto;
/*ボックスの高さ*/
}
/*menu.html内のメニューブロック*/
/*各ボックスの設定*/
#main section.list article{
     /* float: none;
     */ /* Flexbox を使用するため float を削除 */
	margin: 0px auto 1em;
}
.intro{
     margin-top: 5px;
     margin-left: 10px;
     margin-right:10px;
     margin-bottom : 10px;
     line-height: 150%;
     color : #9a690e;
     text-align: left;
}
}