@charset "UTF-8";

body,h1,h2,p,ul{margin: 0;
     padding: 0;}

body{background-image: url(../image/背景画像blue.jpg);
	font-family: sans-serif;}


/*↓ wrapper 部分*/
#wrapper{
	margin: 0 auto;
	padding: 20px 10px 0px;
	width: 980px;  /* 元の幅widthは780px */
	background-color: #fff; /*白を入れないと背景のしましまが入ってしまう*/
	border-right: 3px solid #06f;
	border-left: 3px solid #06f;
	border-bottom:3px solid #06f;}


/*ハンバーガーメニュー！！！！*/
header {
  padding:10px;
  background: skyblue;
}

#nav-drawer {
  position: relative;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 4px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #555;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 200px;/*最大幅（調整してください）*/
  height: 100%;
  background: #A9E2F3;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}

 #nav-content li {
	font-family: 'Amatic SC', cursive;
	font-size: 30px;
	}


/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/*ハンバーガーメニュー終わり！！！*/




header {overflow: hidden;
	margin-bottom: 20px;
		background-color: #AFEEEE;}

header h1 {font-size: 50px;
			/*margin-top: 30px;*/
			padding-top: 20px;
			text-align: center;
			/*2023.8.3 TOPのフォントを変える為、右のフォントを消した。font-family: 'Amatic SC', cursive;*/
			}

header img{	float: left;}




/*SlideShow*/
#slideshow {
	margin: 20px 0 10px 0;
	position:relative;
	width:780px;
	height:500px;
	overflow:hidden;
}

#slideshow img { position:absolute; top:0; left:0; z-index:8; }
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }



	/*↓ nav の部分*/
nav ul{list-style-type: none;
		overflow: hidden;
		font-weight: bold;
}

nav li {width: 190px;  /*155でも収まるが左端の余りが目立つ。→190へ変更2023.9.2。*/
	float: left;
	border-right: 1px solid #339;
	

	font-family: 'Amatic SC', cursive;
	font-size: 25px;  /*28px ～25pxに変更 2023,9.3 */
	}

nav li:last-child{border-right:none;
			width: 153px; /*カラム落ちを防ぐ為！！*/
}

nav li a {padding: 8px 0;
		text-align: center;
		text-decoration: none;
		color: #333;
		width: 149px;
		display: block;
		background-color: #fff;
		transition: 0.5s ease;  /*0.5秒で最初と終わりゆっくり動く */
}

nav a:hover{color: #08088A;
			background-color: #00FA9A;
			box-shadow: 0 0 15px #00BFFF;
			}

#container{
	overflow: hidden;
}



main h2{/*2023.8.3 右のフォントを消す → font-family: 'Amatic SC', cursive;*/
	padding:10px 0 10px 10px;
	margin: 20px 0 0 0;}

main h4 {font-size: 16px;
		text-align: center;
}


main p{font-size:14px;
	line-height:1.5em;/*行間を1.5文字分に設定*/
	padding: 10px;
}



/*ここから！！！！*/
.menu li {
    max-height: 0;
    overflow-y: hidden;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
    max-height: 46px;
    opacity: 1;
}

.menu {
    max-width: 230px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #000;
    line-height: 1;
}

label {
    display: block;
    margin: 0 0 2px 0;
    padding :12px;
    line-height: 1;
    color :#2E2E2E;
    background :#A9E2F3;
    cursor :pointer;
    border-radius: 15px;
}

input {
    display: none;
}

.menu ul {
    margin: 0;
    padding: 0;
    background :#f4f4f4;
    list-style: none;
}

.menu li {
    max-height: 0;
    overflow-y: hidden;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

#menu_bar01:checked ~ #links01 li,
#menu_bar02:checked ~ #links02 li {
    max-height: 46px;
    opacity: 1;
}
/*ここまで！！！*/


#contents{border-bottom: 1px solid #2E64FE;
		border-left: 8px solid #2E64FE;
		margin-bottom: 20px;
		padding-bottom: 10px;
		/*margin-left: 20px;*/
		padding-left: 10px;
		}

section {overflow: hidden;
	margin: 10px;}

section img {margin: 5px;
		/*padding: 5px;*/}

section ul{list-style-type: none;}

section li a {margin: 5px 0;
				text-align: center;
				text-decoration: none;
				color: #333;
				display: block;
				background-color: #fff;

}

section a:hover{color: #3ADF00;
			background-color: #fff;
			text-shadow:0 0 20px #424242;
			transition:.5s ease;}

			


/*section p{line-height: 1.5em;
			margin-bottom: 20px;}*/

.topPage{font-size:12px;
	text-align:right;
	padding:10px 0 0 0 ;}

.topPage a {color:#333;
	text-decoration:underline;}

.topPage a:hover {color:#930;
	font-weight:bold;}



footer {font-size: 12px;
		margin: 20px,0 0 0;
		padding: 10px,0;
		text-align: center;
		color:#999;
		border-top:1px solid #99ccff;}


.radius{border-radius:15px;}


.line{border-bottom:1px dotted #69c9d7;/*下線に線を入れる*/
    padding-bottom: 20px;}


.float-right{float: right;
			font-size: 23px;
}
.float-left{float: left;}
.float-clear{clear: both;}
.red {color: #FF0040;}
.size{font-size: 24px;}
.line {border-bottom: 2px dotted #69c9d7;/*下線に線を入れる*/
    padding-bottom: 10px;}
.shadow {text-shadow:1px 10px 5px #808080;}


.spot h3{color:#39F;
	font-size:30px;
	text-align: center;
	border-bottom:1px solid #009;/*下に1pxの線を入れる*/
	padding:10px 0 0 10px;/*上と左に10pxの余白を入れる*/
	margin:0 0 10px 0;
	font-family: 'Amatic SC', cursive;}/*下に余白を入れる*/    


.spot{border:1px solid #009;
	margin:20px 0;/*上下20px、左右0pxの余白を入れる*/
	border-radius:20px;}/*ボックスの角を丸くする*/


.spot img{margin:0 10px 10px 20px;/*.spotの中に画像がある場合、下10px、左20oxの余白を入れる*/
	float:right;}/*.spotの中に画像がある場合、右に回り込ませる*/

.spot p{margin:0px 10px;}/*左右に10pxの余白を入れる*/




.topPage {font-size:12px;
	text-align:right;
	padding:10px 0 0 0 ;}

.topPage a {color:#333;
	text-decoration:underline;}

.topPage a:hover {color:#00f;/*青*/
	font-weight:bold;}


/*font サンプル！！！


    font-family: 'Pacifico', cursive;

    font-family: 'Cookie', cursive;

    font-family: 'Lobster Two', cursive;

    font-family: 'Handlee', cursive;

    font-family: 'Cabin Sketch', cursive;

    font-family: 'Leckerli One', cursive;

    font-family: 'Denk One', sans-serif;

    font-family: 'Mouse Memoirs', sans-serif;

    font-family: 'Slackey', cursive;

    font-family: 'Delius Unicase', cursive;

    font-family: 'Paprika', cursive;

    font-family: 'Monofett', cursive;

    font-family: 'Eater', cursive;

    font-family: 'Macondo Swash Caps', cursive;

    font-family: 'Mina', sans-serif;

    font-family: 'Coiny', cursive;

    font-family: 'Amatic SC', cursive;

    */