#wrapper {
    width: 100%;  /* 幅を100%に設定し、画面全体に広がるように */
    max-width: 1000px;  /* 最大幅は1000pxまでに制限 */
    text-align: left;
    margin: 0 auto;  /* 自動で中央揃え */
    padding: 0;
}

body {
	margin: 0px;
	padding: 0px;
}


h1 {
	font-size: 14px;
	color: #666666;
	padding: 0px;
	margin: 0px;
	font-weight: normal;
}

#header {
	height: 50px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
.toplogo {
	height: 80px;
	width: 420px;
	margin-top: 15px;
	float: left;
}


/* slide show */
#topimg_container {
	text-align: center;
	margin-top: 30px;
	margin-left:20px;
	margin-bottom: 5px;
	height: 640px;
}

.slideShow {
	padding: 0px;
	width: 969px;
	position: relative;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.slideShow ul.slides {
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 16px;
}
.slideShow ul.slides li.slide {
}
.slideShow ul.navigation {
	position: absolute;
	top: 600px;
	right: 5px;
}
.slideShow ul.navigation li {
	float: left;
	list-style-type: none;
}
.slideShow ul.navigation li a {
	background-color: #FFFFFF;
	color: #777777;
	text-decoration: none;
	font-size: 0.7em;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 2px;
	padding-top: 1px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-left: 5px;
}
.slideShow .navigation a:hover, .slideShow .navigation a.selected {
	background-color: #777777;
	color: #FFF;
}

.slideShow ul.navigation02 {
	position: absolute;
	top: 395px;
	right: 5px;
}
.slideShow ul.navigation02 li {
	float: left;
	list-style-type: none;
}
.slideShow ul.navigation02 li a {
	background-color: #FFFFFF;
	color: #777777;
	text-decoration: none;
	font-size: 0.7em;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 2px;
	padding-top: 1px;
	padding-right: 5px;
	padding-bottom: 1px;
	padding-left: 5px;
}
.slideShow .navigation02 a:hover, .slideShow .navigation a.selected {
	background-color: #777777;
	color: #FFF;
}

		
/** slides with more than an image in it **/
.slide img {
}
.slide h1 {
	position: absolute;
	background-color: #ffffff;
	left: 0px;
	top: 0px;
}



#mainBox {
    width: 100%;  /* 100%幅に設定 */
    max-width: 969px;  /* 最大幅969px */
    padding-bottom: 10px;
}


h2 {
	padding-bottom: 0.5em;
	text-align: left;
	border-bottom: 1px solid #ccc;
	font-size: 18px;
	font-style: normal;
	letter-spacing:2pt;
	font-family: 'Open Sans', sans-serif;
	color: #b5b5b6;
}

h4 {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    font-size: 16px; 
	text-align: left;
    font-weight: 300; /* 細めのフォント */
    line-height: 1.8;
    color: #58535e; 
	background-color: white; /* 背景を白に */
    margin: 0;
    padding: 0;
}


/* Information */
#informationbox {
	float: left;
	text-align: left;
	width: 969px;
	height: auto;
	padding-top: 40px;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 80px;
}


/* Image */
.image-container {
    display: flex;
    justify-content: space-between; /* 画像間にスペースを確保 */
    max-width: 969px; /* 全体の最大幅 */
    margin: 0 auto; /* コンテナを中央寄せ */
	padding-left: 30px;
	padding-bottom: 50px;
}

.image-container img {
    width: 230px; /* 各画像を4つ並べるので幅を25%に */
    height: auto; /* 画像の縦横比を保持 */
}

#topimg_text {
	text-align: left;
	font-size: 15px;
	line-height: 1.8;
	margin-top: 5px;
	margin-left: 30px;
	margin-right: 10px;
	margin-bottom: 15px;
	padding-left: 20px;
	color: #262626;
	 }
	



#footer {
	background-repeat: repeat;
	height: 80px;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #666666;
	width: 1000px;
	margin-right: auto;
	margin-left: auto;
}
#footmenu {
	width: 969px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	text-align: right;
	padding-right: 10px;
}
.footcont {
	font-size: 12px;
	font-weight: bold;
	color: #000000;
}
.footcont a:link{
	color:#666666;
}
.footcont a:visited{
	color:#666666;
}
#footer address {
	font-size: 12px;
	color: #000000;
	text-align: right;
	margin-top: 40px;
}


@media only screen and (max-width: 600px) {
    #wrapper {
        width: 100%;  /* スマホの画面幅に合わせる */
        padding: 10px;
        margin: 0;
    }

    #mainBox {
        width: 100%;  /* スマホでは100%幅に */
        padding: 10px;  /* 少し内側に余白を入れる */
    }

    h1, h2, h4, p {
        font-size: 16px !important;  /* スマホでも読みやすいフォントサイズに */
    }
}