@charset "utf-8";
/* CSS Document */

/* CSSファイル内でのスタイルシートの記述 */
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

body {
    font-family: 'Kosugi Maru', sans-serif;
}

img {
	width: 100%;
	height: auto;
}
.clearfix {
	content: "";
	display: table;
	clear: both;
}
#navigation, #header, #contents, #footer {
	width: 100%;
}

#navigation .container, #header .container, #contents .container, #footer .container {
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 1em;
}

/*navigation*/

#navigation, #header {
	background-color: #000;
}
#navigation .container {
	overflow: auto;
}
#navigation .container .left {
	float: left;
	width: 20%;
}
#navigation .container .right {
	float: left;
	width: 80%;
}
#navigation .container .right ul li {
	line-height:3em;
	font-size:22px;
	float: left;
	width: 18%;
	padding: 1%;
}
#navigation .container .right ul li a {
	display: block;
	color: #FFF;
	text-align: center;
	transition-property: all;
	transition-duration: 0.5s;
}
#navigation .container .right ul li a:hover {
	background-color: #999;
	border-radius: 6px;
	text-decoration: none;
}

/*header*/

#header .container {
	display: block;
	color: #FFF;
	text-align: center;
}
#header .container .title {
	width: 100%;
	top: 50%;
	left: 0;
	font-size: 30px;
	font-weight: bold;
}
#header .container .title span {
	display: block;
}

/*contents*/

#contents .container h2 {
	font-size: 30px;
	line-height: 60px;
	text-align: center;
	font-weight: bold;
	margin-top: 1em;
	margin-bottom: 1em;
}
#contents .container h3 {
	font-size: 20px;
	line-height: 40px;
	font-weight: bold;
}
#contents .container h3:before {
	content: "■";
	margin-right: 0.5em;
}
#contents .container p {
	font-size: 16px;
	line-height: 1.2em;
	margin-bottom: 1em;
}

#contents .container ol, #contents .container ul{
	list-style-position: outside;
	margin-left: 1em;
	padding-left: 1em;
}

#contents .container ol.list{
	list-style-type: decimal;
}

#contents .container ul.list{
	list-style-type: disc;
}


#contents .container .list li{
	font-size: 16px;
	line-height: 1.2em;
	margin-bottom:1em;
}

#contents .container table {
	width: 100%;
}
#contents .container table th, #contents .container table td {
	border: 1px dotted #999;
	padding: 12px;
}
#contents .container table th {
	background-color:#203149;
	color: #FFF;
	width: 30%;
}
#contents .container .gallery:after {
	content: "";
	display: block;
	clear: both;
}
#contents .container .gallery li {
	float: left;
	width: 30%;
	padding: 1.5%;
}
#contents .container .gallery li p {
	font-size: 16px;
	line-height: 1.2em;
}
#contents .container form {
    width: 90%; /* モバイルに最適化 */
    max-width: 600px; /* デスクトップの最大幅 */
    margin-left: auto;
    margin-right: auto;
}

#contents .container form p {
    margin-bottom: 0.5em;
}

#contents .container form input[type=text],
#contents .container form input[type=email],
#contents .container form textarea {
    width: 100%;
    padding: 0.5em; /* パディングを追加して触りやすく */
    box-sizing: border-box; /* パディングを含めた幅計算 */
}

#contents .container form textarea {
    height: 10em; /* 高さはそのまま */
}

#contents .container form input[type=submit] {
	display: block;
	font-size: 1.5em; /* フォントサイズを少し小さく */
	height: 2.5em; /* 高さを調整 */
	width: 100%;
	padding: 0.5em; /* パディングを追加 */
	background-color: #317134; /* ボタンの背景色を追加 */
	color: white; /* テキストの色を白に */
	border: none; /* ボーダーを削除 */
	border-radius: 5px; /* 角を丸くする */
	cursor: pointer; /* カーソルをポインターに */
}

#contents .container form input[type=submit]:hover {
    background-color: #45a049; /* ホバー時の背景色変更 */
}


/*footer*/

#footer .container{
	background-color:#203149;
	color:#FFF;
	font-size:16px;
	overflow: auto;
}

#footer .container a{
	color:#FFF;
}

#footer .container .box {
	width: 45%;
	padding: 2.5%;
	float: left;
}

#footer .container .right{
	text-align:right;
}

/*横幅769～1279pxまでのメディア*/
@media screen and (max-width:1279px){
	
	#navigation .container, #header .container, #contents .container, #footer .container {
		width:97%;
		padding-left:1.5%;
		padding-right:1.5%;
		padding-bottom: 1em;
	}
	
	#navigation .container {
		text-align:center;
	}

	#navigation .container .left {
		float: none;
		width: 100%;
		max-width:200px;
		margin-left:auto;
		margin-right:auto;
	}
	#navigation .container .right {
		float: none;
		width: 100%;
	}
	#navigation .container .right ul li {

		float: left;
		width: 45%;
		padding-left:2.5%;
		padding-right:2.5%;
	}
	
	#header .container .title {
		font-size: 20px;
	}

	#contents .container h2 {
		font-size: 25px;
		line-height: 50px;
	}
	#contents .container h3 {
		font-size: 16px;
		line-height: 32px;
	}
	#contents .container h3:before {
		content: "■";
		margin-right: 0.5em;
	}
	#contents .container p, #contents .container ul.list li{
		font-size: 16px;
		line-height: 1.2em;
	}
	
	#contents .container .gallery li {
		float: left;
		width: 45%;
		padding: 2.5%;
	}
	#contents .container .gallery li p {
		font-size: 16px;
		line-height: 1.2em;
	}
	#contents .container form {
		width: 80%;
	}
	
}

/*横幅768px以下のメディア*/
@media screen and (max-width:768px){
	#navigation .container .right ul li {

		float: left;
		width: 95%;
		padding-left:2.5%;
		padding-right:2.5%;
	}
	
	#header .container .title {
		font-size: 18px;
	}
	
	#contents .container .gallery li {
		float: left;
		width: 95%;
		padding: 2.5%;
	}
	
	#footer .container .box {
		text-align:center;
		width: 95%;
		padding: 2.5%;
		float: left;
	}

	#footer .container .right{
		text-align:center;;
	}

}