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



* { 
margin: 0;
 padding: 0;
  border: 0;
   list-style: none; 
   }

p {
	padding-top: 2px;
	padding-bottom: 4px;
	margin: 0px;
}

a {
	color: #0090EC;
	text-decoration: none;
} 
a:visited {
	color: #F46A00;
	text-decoration: none;
} 
a:hover {
	color: #E1001C;
} 
a:active {
　　color: #CC0066; 
} 

.green {
	color: #7EAC5D;
}


.photo {
	border: 10px solid #FFF;
	border-radius:8px;
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	box-shadow:1px 1px 4px #ccc;
	-moz-box-shadow:1px 1px 4px #ccc;
	-webkit-box-shadow:1px 1px 4px #ccc;
}

/*---------------------------------------------------------
  						clearfix
---------------------------------------------------------*/
.clearfix:after {
    content: "."; 
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}
.clearfix {
    min-height: 1px;
}
.clea{
	clear:both;	
	}
* html .clearfix {
    height: 1px;
    /*¥*//*/
    height: auto;
    overflow: hidden;
    /**/
}

.wf-roundedmplus1c { font-family: "M PLUS Rounded 1c"; }

#headerbox {
	width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
h1 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    float: left;
}
h1 img {
	width: 100%;
}
#slogan {
    float: left;
    width: 490px;
    padding-top: 10px;
    padding-left: 10px;
}
#slogan img {
	width: 100%;
}
h2 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #0C3F98;
    background-image: url(images/bg_h2.png);
    background-repeat: no-repeat;
    background-position: center center;
    margin-bottom: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    font-family: "M PLUS Rounded 1c";
}


h3 {
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    padding-bottom: 4px;
    padding-left: 4px;
    position: relative;
    background-color: #42BAFC;
    box-shadow: 0px 0px 0px 5px #42BAFC;
    border: dashed 2px white;
    padding: 0.3em 0.5em;
    color: #FFFFFF;
    border-radius: 10px;
}


h4 {
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    color: #F84C67;
    margin-top: 10px;
    margin-bottom: 10px;
}

img {
	vertical-align: bottom;
	border: 0px;

}



main a:hover img {
	opacity: 0.7;
	-moz-opacity:0.7; 
	filter: alpha(opacity=70);
	zoom: 1;
}




/*ページ構成*/
html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    width: 100%;
    text-align: center;
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    color: #494543;
    background-color: #FFFFFF;
}


#system_main {
    width: 100%;
    text-align: center;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    background-image: url(images/bg_footer.png);
    background-repeat: repeat-x;
    background-position: center bottom;
}


header {
    width: 100%;
    /*
  position: fixed;
  top: 0;
  z-index: 10;

  display: flex; /*直下の子要素を横並びにする*/
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #FFFFFF;
    background-image: url(images/bg_header.png);
    background-repeat: repeat-x;
    background-position: center top;
}

#hmenu {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	position: relative;
	z-index: 100;
}

#mainnav {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
}
#mainnav ul {
    margin-right: auto;
    margin-left: auto;
}
#mainnav ul li{
    width: 14.2%;
    list-style-type: none;
    float: left;
    margin: 0px;
    text-align: center;
}

#mainnav ul li img{
	width: 100%;
}



main {
	font-size: 15px;
	text-align: center;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	display: block;
	clear: both;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 2em;
	background-color: #FFFFFF;
}


footer {
    width: 100%;
    text-align: center;
    padding-bottom: 60px;
    padding-top: 20px;
    height: 350px;

}

footer .copy {
    text-align: center;

    color: #28883A;
    margin-right: auto;
    margin-left: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}
footer .copy img {
	height: 30px;
	}

footer td img {
    padding: 5px;
    vertical-align: middle;
}
footer td a {
    color: #FFFFFF;
}


#page_top{
  width: 150px;
  height: 100px;
  position: fixed;
  right: 20px;
  bottom: -100px;
}

#page_top img {
    width: 100%;
}

/* トップ */


#topslide {
    position: relative;
    margin-right: auto;
    margin-left: auto;
}

#topimg1 {
    position: absolute;
    top: -40px;
}

#topimg1 img {
	width: 100%;
	height: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

#topimg3 {
	position:absolute;
	bottom:0px;
	z-index: 9;
}
#topimg3 img {
	width: 100%;
}



.box {
    width: 1020px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;
}


#news {
	margin-bottom: 50px;
	}
#news iframe {
    width: 100%;
    height: 550px;
    overflow: scroll;
    background-color: #FFFFFF;
}

#map {

	}
	
#map iframe {
	width: 96%;
	height: 300px;
	border: 4px solid #FFFFFF;
	}


#map table {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-spacing: 3px;
    margin-bottom: 30px;
}
#map th {
    padding: 0.5em;
    text-align: left;
    width: 20%;
    background-color: #FFFDB7;
    white-space: nowrap;
    vertical-align: top;
    font-weight: normal;
}
#map td {
    padding: 0.5em;
    text-align: left;
    background-color: #EDFAFF;
}



#gaiyou {

	}
#gaiyou table {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-spacing: 3px;
    margin-bottom: 30px;
}
#gaiyou th {
    padding: 0.5em;
    text-align: left;
    background-color: #D4F2FF;
    white-space: nowrap;
    vertical-align: top;
    font-weight: normal;
    color: rgba(14,42,107,1.00);
}
#gaiyou td {
    padding: 0.5em;
    text-align: left;
    background-color: #F7FFE2;
}

#class {

	}
#class table {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-spacing: 3px;
    margin-bottom: 30px;
}
#class th {
    padding: 0.5em;
    text-align: center;
    background-color: #D4F2FF;
    white-space: nowrap;
    vertical-align: top;
    font-weight: normal;
    color: rgba(14,42,107,1.00);
}
#class td {
    padding: 0.5em;
    text-align: center;
    background-color: #F7FFE2;
}
#class td div img {
    width: 80px;
}
.houshinbox {
    padding: 30px;
    text-align: left;
    background-color: #FFEE99;
    border-radius: 20px;
    margin-bottom: 30px;
    color: rgba(112,63,0,1.00);
    font-weight: bold;
    line-height: 2em;
    font-size: 1.1em;
}
.mokuhyoutxt {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.5em;
    color: #0B6CB3;
    font-weight: bold;
}
.tokushokutxt {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.2em;
    color: #5B2A00;
}
.featurebox {
    margin-bottom: 30px;
}
.featurebox dl {}
.featurebox dt {
    text-align: left;
    margin-bottom: 10px;
}
.featurebox dd {
    margin-bottom: 10px;
}
.featurebox dd table {
	width: 100%;
}
.featurebox dd td{
	width: calc(100% / 4);
}
.featurebox dd td img{
    width: 96%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
}


#daily {
}
#day1 {
	width: calc(100% / 3);
	float: left;
}
#day2 {
	width: calc(100% / 3);
	float: left;
}
#day3 {
	width: calc(100% / 3);
	float: left;
}

#day1 table {
	width: 100%;
	border-spacing: 7px;
	margin-bottom: 10px;
}
#day1 th {
	width: 20%;
	vertical-align: top;
	padding: 10px;
}
#day1 td {
	padding: 10px;
}

#day3 tr:nth-child(odd) {
	vertical-align: middle;
	padding: 10px;
	text-align: left;
	background-color: #FFE1EA;
}
#day3 tr:nth-child(even) {
	vertical-align: middle;
	padding: 10px;
	text-align: left;
	background-color: #FFEEF3;
}
#day2 table {
	width: 100%;
	border-spacing: 7px;
	margin-bottom: 10px;
}
#day2 th {
	width: 20%;
	vertical-align: top;
	padding: 10px;
}
#day2 td {
	padding: 10px;
}

#day3 table {
	width: 100%;
	border-spacing: 7px;
	margin-bottom: 10px;
}
#day3 th {
	width: 20%;
	vertical-align: top;
	padding: 10px;
}
#day3 td {
	padding: 10px;
}


#day1 tr:nth-child(odd) {
	vertical-align: middle;
	padding: 10px;
	text-align: left;
	background-color: #FFF0BD;
}
#day1 tr:nth-child(even) {
	vertical-align: middle;
	padding: 10px;
	text-align: left;
	background-color: #FFF8E0;
}

#day2 tr:nth-child(odd) {
    vertical-align: middle;
    padding: 10px;
    text-align: left;
    background-color: #D7F5BF;

}
#day2 tr:nth-child(even) {
    vertical-align: middle;
    padding: 10px;
    text-align: left;
    background-color: #EEFFE1;
}


#event {
}
.harutxt {
	background-color: #FFEDED;
	padding: 5px;
	text-align: left;
	margin-bottom: 10px;
}
.natsutxt {
	background-color: #D6FFF5;
	padding: 5px;
	text-align: left;
	margin-bottom: 10px;
}
.akitxt {
	background-color: #FFF6CA;
	padding: 5px;
	text-align: left;
	margin-bottom: 10px;
}
.fuyutxt {
	background-color: #E5F1FF;
	padding: 5px;
	text-align: left;
	margin-bottom: 10px;
}


#event dl {
    text-align: left;

}
#event dt {
    font-weight: bold;
    font-size: 1.3em;
    border-bottom: 2px dotted #C5B1B1;
    margin-bottom: 5px;
    padding-bottom: 5px;
    color: #BDB8B8;
}
#event dd {
    margin-bottom: 10px;
    background-color: #FFF9E9;
    padding: 20px;
    border-radius: 20px;
}



#event table {
	width: calc(100% - 20px);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 15px;
	border-spacing: 10px;
}
#event th {
    width: 12%;
    vertical-align: top;
    border-radius: 20px;
}
#event th img {
	width: 100%;
}
#event td {
	vertical-align: top;
}
.eventbg {
    background-color: #FFF9E9;
    padding: 40px;
    border-radius: 20px;
    text-align: left;
}
.eventphoto {
	width: 25%;
}
.eventphoto li {
	margin-bottom: 10px;
}
.eventphoto img {
    width: 100%;
    border-radius: 20px;
}

.bg_haru {
    background-color: #FFE4EB;
    vertical-align: middle;
}
.bg_natsu {
    background-color: #D7F5BE;
    vertical-align: middle;
}
.bg_aki {
    background-color: #FFE7AC;
    vertical-align: middle;
}
.bg_fuyu {
    background-color: #E4E7FF;
    vertical-align: middle;
}


#club {}
.kosodateleft {
    width: 70%;
    float: left;
    margin-bottom: 20px;
}
.kosodateleft table {
	width: 100%;
	border-spacing: 5px;
}
.kosodateleft th {
    width: 20%;
    background-color: #D1DEFF;
}
.kosodateleft td {
    padding: 10px;
    text-align: left;
    border: 1px solid #D1DEFF;
}
.kosodateleft dl {
    margin-bottom: 20px;
    background-color: #FFD6E6;
    border-radius: 20px;
}
.kosodateleft dt {
    padding: 12px;
    text-align: left;


}
.kosodateleft dd {
    padding: 20px;
    text-align: left;
    background-color: #FFF0F6;
}
.kosodateright {
    width: 26%;
    float: right;
    margin-bottom: 20px;
}
.kosodateright table {
	width: 100%;
	
}
.kosodateright td {
    margin-bottom: 10px;
	display: block;
}

.kosodateright table img {
    width: 100%;
    border-radius: 20px;
}
.clubtxt {
    margin-bottom: 15px;
    text-align: left;
}


@media screen and (max-width:768px){

html,body {
}


#system_main {

}

#headerbox {
	width: auto;
    margin-left: auto;
    margin-right: auto;
}
h1 {
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    float: left;
}
h1 img {
	width: 100%;
}
#slogan {
    float: left;
    width: 55%;
    padding-top: 10px;
    padding-left: 10px;
}
#slogan img {
	width: 100%;
}

footer .copy img {
	width: 60%;
	height:auto;
	}

h2 {

	font-size: 22px;
}
	

.box {
	width: auto;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
	
#topimg1 {
    position: absolute;
    top: -20px;
}

#hmenu {

	margin-right: auto;
	margin-left: auto;
}

#mainnav  {
    margin-right: auto;
    margin-left: auto;
    padding-top: 0px;
	width: 100%;
	}

	
#mainnav ul {

	}
.img100 img {
		width: 100%;
	}	
	
#day1 {
	width: auto;
	float: none;
}
#day2 {
	width: auto;
	float: none;
}
#day3 {
	width: auto;
	float: none;
}	
	
#event1 {
    width: auto;
    float: none;
}
#event2 {
    width: auto;
    float: none;
}
	
.kosodateleft {
    width: auto;
    float: none;
}	
.kosodateright {
    width: auto;
    float: none;
}	
	
	
}

@media screen and (max-width:480px){

	#system_main {
    background-image: url(images/bg_footer_sp.png);
    background-repeat: no-repeat;
    background-position: center bottom;
	}
h1 {
	width: 65%;
	margin-right: auto;
	margin-left: 10px;
	float: none;
}

#slogan {
    float: none;
    width: 90%;
    padding-top: 0px;
    padding-left: 0px;
    padding-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
}


h2 {
    font-size: 1.5rem;
    background-size: 80% auto;
}

h3 {
	font-size: 17px;
}

footer {
    width: 100%;
    text-align: center;
    padding-bottom: 60px;
    padding-top: 20px;
    height: 120px;

}

header {
    width: 100%;
    /*
  position: fixed;
  top: 0;
  z-index: 10;

  display: flex; /*直下の子要素を横並びにする*/
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #FFFFFF;
    background-image: url(images/bg_header_sp.png);
    background-repeat: repeat-x;
    background-position: center top;
    background-size: 100% auto;
}	

#page_top{
  width: 100px;
  height: 70px;
  position: fixed;
  right: 10px;
  bottom: -70px;
}	
#hmenu {
	width: 100%;
}	
#mainnav  {
	width: 100%;
	}
#mainnav ul li {
    width: 25%;
	}

.x-scroll {
overflow: auto;
}
.x-scroll table{
width:100%;
}
.x-scroll::-webkit-scrollbar{
height: 5px; /* スクロールバーの高さ */
}
.x-scroll::-webkit-scrollbar-track{
background: #F1F1F1; /* スクロールバーの背景色 */
}
.x-scroll::-webkit-scrollbar-thumb {
background: #d6d6d6; /* スクロールバーの色 */
}
.x-scroll td, .x-scroll th{
white-space: nowrap;　/* 文字の折返しを禁止 */
}

.scrolltxt {
	display: block;
}

.featurebox dd td{
	width: auto;
	display: block;
    margin-bottom: 10px;
}
.featurebox dd td img{
    width: 96%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;

}
	
#event td {
		display: block;
	}		
	.eventphoto {
		width: 80%;
	}	
#event th {
		width: 22%;
	}		
	#event table {
    border-bottom: 2px dashed #9F9085;
}
.eventbg {
    padding: 10px;
    margin-bottom: 10px;
}	
.houshinbox {
    padding: 15px;
    line-height: 1.7em;
    font-size: 1em;
}
.mokuhyoutxt {
    font-size: 1.1em;
}	
	
	
	
	}