@cyarset :"utf-8";

body {/* ぜんたいの設定背景色、余白0 */
	background-color: #ffe;
	magin: 0;
	}

/* コンテナの幅は1000px固定、空きは左右均等 */
.container {
	max-width: 1000px;
	margin: 0 auto;
	}
	
/* 見出し */
h1, h2, h3, h4, h5, h6 {
	font-family: メイリオ,sans-serif;
	font-weight: normal;
	color: #222;
	line-height: 1.1;/* 行間高さ1.1倍 */
	}
	
h1 {/* タイトル文字化粧 */
	font-size: 34px;
	text-shadow: 1px 1px 2px #666b70;
	letter-specing:3px;/* 文字間隔横 */
	margin-top:40px;/* 上余白 */
	margin-bottom:20px;/* 下余白 */
	}
	
p {/* 本文 */
	line-height: 1.7;/* 行間高さ1.7倍 */
	magin: 0;
	}

h2 {/* ページタイトル文字サイズ */
	font-size: 26px;	
	}
	
h3 {/* ページタイトル文字サイズ */
	font-size: 18px;
	margin-top:20px;/* 上余白 */
	margin-bottom:10px;/* 下余白 */
	}
	
.lead {/* リード文字色サイズ */
	color: grey;
	font-size: 20px;
	line-height: 1.5;/* 行間高さ１.5倍 */
	margin; 0 0 20px;/* 上/左右/下余白 */
	}
	

a {/* リンクの文字部分下線なし */
	text-decoration: none;
	}
	
.photo {/* 写真を浮かせる */
	overflow: auto;
	}
	
.large-image {/* 写真を左に追いやる */
	float: left;
	margin-right: 20px;/* 写真右余白 */
	margin-bottom: 20px;/* 写真下余白 */
	}
	
.caption {/* キャプション文字サイズ* /
	font-size: 12px;
	}
	
.border {/* 表の棚線太さ */
	border: 1px solid #ccc;	
		}
	
th, td {/* セルの棚線太さ */
	border: 1px solid #ccc;	
	padding: 10px;/* 内側の余白 */	
	}
	
th {/* thセル表見出しの背景色NG */
	background-color: #fd700;
	}


.style {/* 枠の二重線をひとつにするNG */
	border-collapse: collapse;
	}	
		
.spec {/* セル中の文字を中央そろえ */
	text-align: center;
	width: 170px;/* セル幅 */
	}
	

	
#contents01, #contents02 {/* 端から端まで見切り線 */
	border-top:6px dotted #ccc;
	}
	
.hyouhaba {/* 表幅めいっぱい */
	width: 100%;
	}	

/* グローバルメニュー */
.grobal-nav {
	font-size: 22px;
	width: 1000px;
	margin-top: 10px;
	background-color: #000;
	}
	
.nav-list {/* ナビ項目 */
	margin: 0;
	padding: 0;
	text-align: center;
	}
	
.nav-item {/* ナビの細かいメニュー */
	display: inline-block;
	padding: 20px 15px;
	color: #fff;
	}		
	
footer {/* フッター */
	text-align: center;
	margin: 40px 0 20px;
	}

.active {
	background-color:#777777;
	}
	
.logo-image {/* ロゴ画像 */
	vertical-algin: bottom;
	}	
	
.red-text {/* 特定の文字だけ赤 */
	color: red;
	}
	
.water-menu {
	display:flex;
	justify-content: space-between; /* 左右均等分布 */
	align-items: center; /* 上下中央揃え */
	flex-wrap: wrap; /* 横幅が足りなくなった場合に画像を下に回り込ませる */
	gap: 10px; /* 画像と画像の間の隙間（余白) */
	
	}
	
.water-menu img {
	width: auto; /* 画像の横幅を指定 */
	height: 170px; /* 画像の縦幅を指定 */
	}
	
.outside-menu {
	display:flex;
	justify-content: space-between; /* 左右均等分布 */
	align-items: center; /* 上下中央揃え */
	flex-wrap: wrap; /* 横幅が足りなくなった場合に画像を下に回り込ませる */
	gap: 10px; /* 画像と画像の間の隙間（余白) */
	}
	
.outside-menu img {
	width: auto; /* 画像の横幅を指定 */
	height: 140px; /* 画像の縦幅を指定 */
	}	
	
.indoor-menu {
	display:flex;
	justify-content: space-between; /* 左右均等分布 */
	align-items: center; /* 上下中央揃え */
	flex-wrap: wrap; /* 横幅が足りなくなった場合に画像を下に回り込ませる */
	gap: 10px; /* 画像と画像の間の隙間（余白) */
	}
	
.indoor-menu img {
	width: auto; /* 画像の横幅を指定 */
	height: 120px; /* 画像の縦幅を指定 */
	}		
	
.iroiro-menu {
	display:flex;
	justify-content: space-between; /* 左右均等分布 */
	align-items: center; /* 上下中央揃え */
	flex-wrap: wrap; /* 横幅が足りなくなった場合に画像を下に回り込ませる */
	gap: 10px; /* 画像と画像の間の隙間（余白) */
	}
	
.iroiro-menu img {
	width: auto; /* 画像の横幅を指定 */
	height: 110px; /* 画像の縦幅を指定 */
	}			

/* ------------------------------------------------ */
/* ここからがレスポンシブ対応のメディアクエリ */
/* ------------------------------------------------ */
	
/* 2. 【PC向け】画面幅が768px以上になったときに切り替わるCSS */
@media screen and (min-width: 768px) {
  .container {
    width: 1000px /* 横幅を固定して中央寄せ */
    margin: 0 auto;
  }
}

/* スマートフォン用のスタイル（画面幅が480px以下の場合に適用） */
@media (max-width: 480px) {
    .container {
        width: 100%;
        margin: 0 auto;
    }
}