@cyarset :"utf-8";



	

body {/* ぜんたいの設定背景色、余白0 */
	background-color: #ffe;
	magin: 0;
	font-size: 120%; /* ページ全体の基準サイズ */
	}

/* コンテナの幅は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 {/* 本文 */	
	magin: 0;
	margin-bottom: 15px;
	line-height: 1.6em;	
	}

figure {
  float: left;
  margin: 0 15px 15px 0;
  width: 30%;
}
figure img {
  max-width: 100%;
}

p {
  margin-bottom: 15px;
  line-height: 1.6em;
}
.float_none {
  clear: both;
}

figure {
  float: right;
  margin: 0 0 15px 15px;
  width: 30%;
}
figure img {
  max-width: 100%;
}


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;
	}
	

	

	
#contents01, #contents02 {/* 端から端まで見切り線 */
	border-top:6px dotted #ccc;
	}
	

	

	
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: 190px; /* 画像の横幅を指定 */
	height: 170px; /* 画像の縦幅を指定 */
	}
	
.outside-menu {
	display:flex;
	justify-content: space-between; /* 左右均等分布 */
	align-items: center; /* 上下中央揃え */
	flex-wrap: wrap; /* 横幅が足りなくなった場合に画像を下に回り込ませる */
	gap: 10px; /* 画像と画像の間の隙間（余白) */
	}
	
.outside-menu img {
	width: 240px; /* 画像の横幅を指定 */
	height: 130px; /* 画像の縦幅を指定 */
	}	
	
.indoor-menu {
	display:flex;
	justify-content: space-between; /* 左右均等分布 */
	align-items: center; /* 上下中央揃え */
	flex-wrap: wrap; /* 横幅が足りなくなった場合に画像を下に回り込ませる */
	gap: 10px; /* 画像と画像の間の隙間（余白) */
	}
	
.indoor-menu img {
	width: 240px; /* 画像の横幅を指定 */
	height: 90px; /* 画像の縦幅を指定 */
	}		
	
.iroiro-menu {
	display:flex;
	justify-content: space-between; /* 左右均等分布 */
	align-items: center; /* 上下中央揃え */
	flex-wrap: wrap; /* 横幅が足りなくなった場合に画像を下に回り込ませる */
	gap: 10px; /* 画像と画像の間の隙間（余白) */
	}
	
.iroiro-menu img {
	width: 320px; /* 画像の横幅を指定 */
	height: 120px; /* 画像の縦幅を指定 */
	}			
	


ul li, ol li {
  font-size: 24px; /* 文字サイズを指定 */
  line-height: 1.5; /* 行間を指定 */
  padding: 0.5em 0; /* 内側余白 */
  list-style-type: square;
}

/* ------------------------------------------------ */
/* ここからがレスポンシブ対応のメディアクエリ */
/* ------------------------------------------------ */

/* 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;
    }
}