/* CSS変数でボタンの背景色を設定可能にする */
:root {
    --button-bg-color: #4a90e2;
    --button-hover-color: #357abd;
}

body {
	color: #666666;
	margin: 0px;
	padding: 0px;
	text-align: center;
	font: 12px "メイリオ", "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
 	font-family: 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	overflow-x: hidden;
	max-width: 100%;
	box-sizing: border-box;
}

.container {
	 margin-left:auto;
	 margin-right:auto;
	 text-align: center;
 	background-color: #eeeeee;
 	max-width: 1200px;
 	padding: 10px;
 	box-sizing: border-box;
}

.wrap {
	 display: grid;
	 grid-template-columns: 120px 1fr 1fr;
	 grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto;
	 gap: 0px 0px;
	 margin-left:auto;
	 margin-right:auto;
	 text-align: center;
	 width: 100%;
}

.mura_logo {
	 grid-column: 1;
	 grid-row: 1;
	 background-color: #ffffe0;
	 padding: 4px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 120px;
}

.header {
	 grid-column: 2;
	 grid-row: 1;
	 background-color: #ffffe0;
	 font-size: 30px;
	 font-weight: bold;
	 padding: 0;
	 margin: 0;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}

.navi {
	 grid-column: 3;
	 grid-row: 1;
	 background-color: #ffffe0;
	 padding: 4px;
	 display: flex;
	 flex-wrap: wrap;
	 align-items: center;
	 justify-content: center;
	 gap: 2px;
}

/* ボタンスタイル */
.nav-button {
	background-color: var(--button-bg-color);
	color: white;
	border: none;
	padding: 4px 8px;
	margin: 1px;
	font-size: 11px;
	cursor: pointer;
	text-decoration: none;
	border-radius: 3px;
	transition: background-color 0.3s;
	min-width: 30px;
	text-align: center;
}

.nav-button:hover {
	background-color: var(--button-hover-color);
	color: white;
	text-decoration: none;
}

.nav-button.current {
	background-color: #6A4690;
}

/* 個別ボタンの色設定 */
.nav-button[href*="no1"] {
	background-color: #CC0000;
}

.nav-button[href*="no2"] {
	background-color: #FD6600;
}

.nav-button[href*="no3"] {
	background-color: #E2427E;
}

.nav-button[href*="no4"] {
	background-color: #F5EB00;
	color: #000000; /* 黄色の背景なので文字色を黒に */
}

.nav-button[href*="no5"] {
	background-color: #016C3E;
}

.nav-button[href*="no6"] {
	background-color: #0083CE;
}

.nav-button[href*="no7"] {
	background-color: #6F2850;
}

.nav-button[href*="no8"] {
	background-color: #E13D46;
}

.nav-button[href*="no9"] {
	background-color: #024073;
}

.nav-button[href*="no10"] {
	background-color: #F18000;
}

.nav-button[href*="no11"] {
	background-color: #6A4690;
}

.nav-button[href*="no12"] {
	background-color: #E94709;
}

.nav-button[href*="no13"] {
	background-color: #00AAC1;
}

.nav-button[href*="no14"] {
	background-color: #C6D23E;
	color: #000000; /* 薄い緑の背景なので文字色を黒に */
}

.nav-button[href*="no15"] {
	background-color: #18385F;
}

.nav-button[href="index.html"] {
	background-color: #4a90e2;
}

/* ホバー時の色調整 */
.nav-button[href*="no1"]:hover {
	background-color: #AA0000;
}

.nav-button[href*="no2"]:hover {
	background-color: #DD5500;
}

.nav-button[href*="no3"]:hover {
	background-color: #C2356A;
}

.nav-button[href*="no4"]:hover {
	background-color: #E6D400;
	color: #000000;
}

.nav-button[href*="no5"]:hover {
	background-color: #015A33;
}

.nav-button[href*="no6"]:hover {
	background-color: #006BA5;
}

.nav-button[href*="no7"]:hover {
	background-color: #5A1F42;
}

.nav-button[href*="no8"]:hover {
	background-color: #C8323A;
}

.nav-button[href*="no9"]:hover {
	background-color: #01355F;
}

.nav-button[href*="no10"]:hover {
	background-color: #D97000;
}

.nav-button[href*="no11"]:hover {
	background-color: #5A3A7A;
}

.nav-button[href*="no12"]:hover {
	background-color: #D13D07;
}

.nav-button[href*="no13"]:hover {
	background-color: #0095A5;
}

.nav-button[href*="no14"]:hover {
	background-color: #B0C235;
	color: #000000;
}

.nav-button[href*="no15"]:hover {
	background-color: #142B4A;
}

.nav-button[href="index.html"]:hover {
	background-color: #357abd;
}

.board1 {
	 grid-column: 1 / span 2;
	 grid-row: 2;
	 background-color: #ccffcc;
	 margin: 10px;
	 padding: 10px;
}

.board2 {
	 grid-column: 1 / span 2;
	 grid-row: 3;
	 background-color: #ddffff;
	 margin: 10px;
	 padding: 10px;
}

.poster {
	 grid-column: 3;
	 grid-row: 2 / span 2;
	 text-align:center;
	 margin: 10px;
}

.board3 {
	 grid-column: 1 / span 3;
	 grid-row: 4;
	 background-color: #f0f8ff;
	 margin: 10px;
	 padding: 10px;
}

.cinema1 {
	 grid-column: 1 / span 2;
	 grid-row: 5;
	 font-size: 16px;
	 padding: 10px;
}

.cinema1_img {
	 grid-column: 3;
	 grid-row: 5;
	 text-align: center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}

.cinema2 {
	 grid-column: 1 / span 2;
	 grid-row: 6;
	 font-size: 16px;
	 padding: 10px;
}

.cinema2_img {
	 grid-column: 3;
	 grid-row: 6;
	 text-align: center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}

.cinema3 {
	 grid-column: 1 / span 2;
	 grid-row: 7;
	 font-size: 16px;
	 padding: 10px;
}

.cinema3_img {
	 grid-column: 3;
	 grid-row: 7;
}

.cinema4 {
	 grid-column: 1 / span 2;
	 grid-row: 8;
	 font-size: 16px;
	 padding: 10px;
}

.cinema4_img {
	 grid-column: 3;
	 grid-row: 8;
	 text-align: center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}

.cinema5 {
	 grid-column: 1 / span 2;
	 grid-row: 9;
	 font-size: 16px;
	 padding: 10px;
}

.cinema5_img {
	 grid-column: 3;
	 grid-row: 9;
	 text-align: center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}

.cinema6 {
	 grid-column: 1 / span 2;
	 grid-row: 10;
	 font-size: 16px;
	 padding: 10px;
}

.cinema6_img {
	 grid-column: 3;
	 grid-row: 10;
	 text-align: center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}

.cinema7 {
	 grid-column: 1 / span 2;
	 grid-row: 11;
	 font-size: 16px;
	 padding: 10px;
}

.cinema7_img {
	 grid-column: 3;
	 grid-row: 11;
}

.cinema8 {
	 grid-column: 1 / span 2;
	 grid-row: 12;
	 font-size: 16px;
	 padding: 10px;
}

.cinema8_img {
	 grid-column: 3;
	 grid-row: 12;
}

.footer {
	 grid-column: 1 / span 3;
	 grid-row: 13;
	 font-size: 16px;
	 padding: 10px;
	 display: flex;
	 flex-wrap: wrap;
	 justify-content: center;
	 gap: 5px;
}

.topbutton {
 	text-align: right;
}

p.centering {
 	 padding: 0;
	 margin-top: 20;
	 margin-bottom: 0;
}

table.cdoc {
 	table-layout: fixed;
 	background-color: #222222;
 	color: #ffffff;
 	margin: 0;
 	padding: 0;
 	width: 100%;
}

td.cdoc {
 	border: 1px solid #666666;
 	text-align: left;
 	padding-left: 10px;
 	padding-right: 10px;
}

td.titletop {
 	font-weight: bold;
 	font-size: 20px;
 	color: yellow
}

td.title {
 	font-weight: bold;
}

td.gazou {
 	border: 1px solid #666666;
}

div.cinema1,div.cinema2,div.cinema3,div.cinema4,div.cinema5,div.cinema6,div.cinema7,div.cinema8 {
 	background-color:#222222;
 	margin: 0;
 	padding: 0;
}

div.cinema1_img,div.cinema2_img,div.cinema3_img,div.cinema4_img,div.cinema5_img,div.cinema6_img,div.cinema7_img,div.cinema8_img {
 	background-color:#222222;
}

.cinema_img {
 	width: 100%;
 	max-width: 500px;
 	height: auto;
}

.poster_img {
 	width: 100%;
 	max-width: 600px;
 	height: auto;
}

/*-- デスクトップ表示（1081px以上） 
@media screen and (min-width: 1081px) {
 body {
 	background: #e5e5e5 url(images/floral.jpg) repeat top;
 }

 .cinema_img {
 	width: 100%;
 	max-width: 500px;
 }
 
 .poster_img {
 	width: 100%;
 	max-width: 600px;
 }
}--*/

/* タブレット表示 */
/*@media screen and (max-width: 1024px) {*/
/* スマートフォン表示 */
@media screen and (max-width: 768px) {
	* {
		max-width: 100%;
		box-sizing: border-box;
	}
	
	html, body {
		width: 100%;
		overflow-x: hidden;
		max-width: 100%;
	}
	
	.container {
		padding: 5px;
		max-width: 100%;
		width: 100%;
		box-sizing: border-box;
	}
	
	.wrap {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
		width: 100%;
		box-sizing: border-box;
	}
	
	.mura_logo {
		grid-column: 1;
		grid-row: 1;
		background-color: #ffffe0;
		width: auto;
	}
	
	.header {
		grid-column: 1;
		grid-row: 2;
		font-size: 24px;
		background-color: #ffffe0;
	}
	
	.navi {
		grid-column: 1;
		grid-row: 3;
		flex-wrap: wrap;
		justify-content: center;
		background-color: #ffffe0;
	}
	
	.board1 {
		grid-column: 1;
		grid-row: 4;
	}
	
	.board2 {
		grid-column: 1;
		grid-row: 5;
	}
	
	.poster {
		grid-column: 1;
		grid-row: 6;
	}
	
	.board3 {
		grid-column: 1;
		grid-row: 7;
	}
	
	.cinema1 {
		grid-column: 1;
		grid-row: 8;
	}
	
	.cinema1_img {
		grid-column: 1;
		grid-row: 9;
	}
	
	.cinema2 {
		grid-column: 1;
		grid-row: 10;
	}
	
	.cinema2_img {
		grid-column: 1;
		grid-row: 11;
	}
	
	.cinema3 {
		grid-column: 1;
		grid-row: 12;
	}
	
	.cinema3_img {
		grid-column: 1;
		grid-row: 13;
	}
	
	.cinema4 {
		grid-column: 1;
		grid-row: 14;
	}
	
	.cinema4_img {
		grid-column: 1;
		grid-row: 15;
	}
	
	.cinema5 {
		grid-column: 1;
		grid-row: 16;
	}
	
	.cinema5_img {
		grid-column: 1;
		grid-row: 17;
	}
	
	.cinema6 {
		grid-column: 1;
		grid-row: 18;
	}
	
	.cinema6_img {
		grid-column: 1;
		grid-row: 19;
	}
	
	.cinema7 {
		grid-column: 1;
		grid-row: 20;
	}
	
	.cinema7_img {
		grid-column: 1;
		grid-row: 21;
	}
	
	.cinema8 {
		grid-column: 1;
		grid-row: 22;
	}
	
	.cinema8_img {
		grid-column: 1;
		grid-row: 23;
	}
	
	.footer {
		grid-column: 1;
		grid-row: 24;
	}
	
	.cinema_img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}
	
	.poster_img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}
	
	/* 固定幅の画像をレスポンシブに */
	img[width="384"],
	img[width="389"],
	img[width="140"],
	img[width="160"] {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}
	
	/* 小さい画像（130pxなど）は元のサイズを維持 */
	img[width="130"] {
		width: 105px !important;
		max-width: 105px !important;
		height: auto !important;
	}
	
	img[width="113"] {
		width: 113px !important;
		max-width: 113px !important;
		height: auto !important;
	}
	
	img[width="100"] {
		width: 100px !important;
		max-width: 100px !important;
		height: auto !important;
	}
	
	img[width="80"] {
		width: 80px !important;
		max-width: 80px !important;
		height: auto !important;
	}
	
	/* c_kin.jpgは実サイズで表示 */
	img[src*="c_kin.jpg"] {
		width: 105px !important;
		max-width: 105px !important;
		height: 17px !important;
	}
	
	/* slideshow内の画像もレスポンシブに */
	div.slideshow {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	div.slideshow ol {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	
	div.slideshow ol li {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
		overflow: hidden;
	}
	
	div.slideshow ol li img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		display: block;
	}
	
	.cinema1_img,
	.cinema2_img,
	.cinema3_img,
	.cinema4_img,
	.cinema5_img,
	.cinema6_img,
	.cinema7_img,
	.cinema8_img {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	
	.cinema1_img img,
	.cinema2_img img,
	.cinema3_img img,
	.cinema4_img img,
	.cinema5_img img,
	.cinema6_img img,
	.cinema7_img img,
	.cinema8_img img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
}