@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after {
  content: '';
  content: none; }

q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  color: #434343;
  font-size: 13px;
  line-height: 1.61538462;
  font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;}

* {
  box-sizing: border-box; }

* a {
  color: #434343;
  text-decoration: none;
  -webkit-transition: all .3s;
  transition: all .3s; }
  * a:hover {
    color: #999999; }

.clr:after {
  content: "";
  clear: both;
  display: block; }

.container {
  position: relative;
  width: 960px;
  margin-left: auto;
  margin-right: auto; }

/*.topBorder*/

.topBorder{
	float: left;
	width: 25%;
	height: 5px;
}

.topBorder1{
	background-color: #ef804f;
}

.topBorder2{
	background-color: #facc6b;
}

.topBorder3{
	background-color: #4bae6f;
}

.topBorder4{
	background-color: #5d9ecf;
}

/* #header */
#header{
	padding: 5px 0;
}

	#logo{
		float: left;
		margin-right: 28px;
	}

		#logo a{
			display: block;
			text-indent: -9999px;
			background: url(../images/logo.jpg) 0 0 no-repeat;
			width: 232px;
			height: 100px;
		}

	#globalMenu{
		float: left;
		width: 700px;
	}

		#globalMenu ul{
			margin-top: 18px;
		}

			#globalMenu ul li{
				float: left;
				width: 25%;
				text-align: center;
				border-left: 1px solid #d5d5d5;
			}

			#globalMenu ul li:last-child{
				border-right: 1px solid #d5d5d5;
			}

				#globalMenu ul li a{
					display: block;
					font-size: 1.154em;
					line-height: 1;
					padding: 25px 0;
				}

				#globalMenu ul li.active a{
					font-weight: bold;
				}

/* #mv */
#mv{
	background: #f5f5f5;
	overflow: hidden;
}
	
	#mv h2{
		position: absolute;
		top: 90px;
		display: block;
		text-indent: -9999px;
		background: url(../images/mv-text.png) 0 0 no-repeat;
		width: 400px;
		height: 175px;
		z-index: 999;
	}

	#mv ul li img{
		float: right;
	}

/* #pageTitle */
#pageTitle{
	background: #f5f5f5;
	overflow: hidden;
}

	#pageTitle h2{
		position: absolute;
		top: 55px;
		display: block;
		text-indent: -9999px;
		width: 400px;
		height: 88px;
		z-index: 999;
	}

	.pageTitleAbout h2{
		background: url(../images/page-title-about.png) 0 0 no-repeat;
	}

	.pageTitleSchedule h2{
		background: url(../images/page-title-schedule.png) 0 0 no-repeat;
	}

	.pageTitleCommittee h2{
		background: url(../images/page-title-committee.png) 0 0 no-repeat;
	}

	#pageTitle img{
		float: right;
	}

/* #breadcrumb */
#breadcrumb{
	padding: 15px 0;
	margin-bottom: 60px;
	background: #faedd2;
}

	#breadcrumb ul li{
		float: left;
	}

	#breadcrumb ul li:after{
		display: inline-block;
		content: "/";
		padding: 0 15px;
	}

	#breadcrumb ul li:last-child:after{
		content: none;
	}

		#breadcrumb ul li a{
			color: #0274c9;
		}

		#breadcrumb ul li a:hover{
			color: #3babff;
		}

/* #serviceMenu */
#serviceMenu{
	padding: 30px 0;
	margin-bottom: 50px;
	background: #faedd2;
}

	#serviceMenu ul li{
		position: relative;
		float: left;
		width: 225px;
		text-align: center;
		margin-right: 20px;
		background: #fff;
		border-bottom: 5px solid transparent;
	}

		#serviceMenu ul li a{
			display: block;
		}

	#serviceMenu ul li a:after{
		position: absolute;
		bottom: 0;
		right: 0;
		content: "";
		display: block;
		background: url(../images/service-menu-arrow.png) 50% 50% no-repeat;
		width: 25px;
		height: 22px;
	}

	#serviceMenu ul li:nth-child(1){
		border-color: #5d9ecf;
	}

	#serviceMenu ul li:nth-child(1) a:after{
		background-color: #5d9ecf;
	}

	#serviceMenu ul li:nth-child(2){
		border-color: #4bae6f;
	}

	#serviceMenu ul li:nth-child(2) a:after{
		background-color: #4bae6f;
	}

	#serviceMenu ul li:nth-child(3){
		border-color: #facc6b;
	}

	#serviceMenu ul li:nth-child(3) a:after{
		background-color: #facc6b;
	}

	#serviceMenu ul li:nth-child(4){
		border-color: #ef804f;
	}

	#serviceMenu ul li:nth-child(4) a:after{
		background-color: #ef804f;
	}

	#serviceMenu ul li:last-child{
		margin-right: 0;
	}

		#serviceMenu ul li h3{
			font-size: 1.154em;
			font-weight: bold;
			line-height: 1;
			padding: 30px 0;
		}

/* #contents */
#contents{
	margin-bottom: 130px;
}
	
	#mainContents{
		float: left;
		width: 630px;
		margin-right: 30px;
	}

		#mainContents .pageTitle{
			margin-bottom: 20px;
			border-bottom: 3px solid #e5e5e5;
		}

		#mainContents .contentTitle{
			margin-bottom: 30px;
		}

			#mainContents .pageTitle h3{
				font-size: 1.385em;
				line-height: 1;
				background: url(../images/section-title.png) 0 50% no-repeat;
				padding: 5px 0 0 30px;
				margin-bottom: 10px;
			}

		#mainContents dl{
			padding-bottom: 20px;
			margin-bottom: 20px;
			background: url(../images/dot.jpg) 0 bottom repeat-x;
		}

			#mainContents dt{
				line-height: 1;
				margin-bottom: 20px;
			}

				#mainContents dt span{
					color: #fff;
					padding: 1px 12px;
					margin-left: 10px;
					background: #ef4f4f;
				}

			#mainContents dd p{
				margin-bottom: 10px;
			}

			#mainContents dd p:last-child{
				margin-bottom: 0;
			}

				#mainContents dd p a{
					color: #5d9ecf;
				}

		.pageContent{
			margin-bottom: 50px;
		}

			.pageContent p{
				margin-bottom: 15px;
			}

			.pageContent p:last-child{
				margin-bottom: 0;
			}

			.pageContent .aboutFeature{
				margin: 30px 0;
			}

				.pageContent .aboutFeature img{
					display: block;
					margin-left: auto;
					margin-right: auto;
				}

			.pageContent .aboutThumbs{
				margin-top: 30px;
			}

				.pageContent .aboutThumbs li{
					position: relative;
					float: left;
					width: 300px;
					height: 185px;
					margin: 0 20px 20px 0;
				}

				.pageContent .aboutThumbs li:nth-child(even){
					margin-right: 0;
				}

					.pageContent .aboutThumbs li a{
						display: block;
					}

					.pageContent .aboutThumbs li a:before{
						content: "";
						position: absolute;
						bottom: 5px;
						right: 5px;
						width: 30px;
						height: 30px;
						background: url(../images/view-icon.png) 50% 50% no-repeat;
						z-index: 999;
					}

					.pageContent .aboutThumbs li.orange a:before{
						background-color: rgba(239,128,79,.8);
					}

					.pageContent .aboutThumbs li.yellow a:before{
						background-color: rgba(250,204,107,.8);
					}

					.pageContent .aboutThumbs li.green a:before{
						background-color: rgba(75,174,111,.8);
					}

					.pageContent .aboutThumbs li.blue a:before{
						background-color: rgba(93,158,207,.8);
					}

						.pageContent .aboutThumbs li a img{
							vertical-align: middle;
						}

						.pageContent .aboutThumbs li span{
							position: absolute;
							top: 0;
							left: 0;
							width: 300px;
							height: 185px;
						}

						.pageContent .aboutThumbs li span:before,
						.pageContent .aboutThumbs li span:after{
							display: block;
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
						}

						.pageContent .aboutThumbs li span:before{
						    border-top: 5px solid transparent;
							border-bottom: 5px solid transparent;
						}

						.pageContent .aboutThumbs li span:after{
						    border-left: 5px solid transparent;
							border-right: 5px solid transparent;
						}

						.pageContent .aboutThumbs li.orange span:before,
						.pageContent .aboutThumbs li.orange span:after{
						    border-color: rgba(239,128,79,.8);
						}

						.pageContent .aboutThumbs li.yellow span:before,
						.pageContent .aboutThumbs li.yellow span:after{
						    border-color: rgba(250,204,107,.8);
						}

						.pageContent .aboutThumbs li.green span:before,
						.pageContent .aboutThumbs li.green span:after{
						    border-color: rgba(75,174,111,.8);
						}

						.pageContent .aboutThumbs li.blue span:before,
						.pageContent .aboutThumbs li.blue span:after{
						    border-color: rgba(93,158,207,.8);
						}

			.pageContent table{
				width: 100%;
				table-layout: fixed;
				margin-bottom: 30px;
				border: 1px solid #d5d5d5;
			}

				.pageContent table thead{
					font-weight: bold;
					text-align: center;
					background: #f5f5f5;
				}

				.pageContent table th,
				.pageContent table td{
					vertical-align: middle;
					padding: 20px 15px;
					border: 1px solid #d5d5d5;
				}

				.pageContent table td:first-child,
				.pageContent table th:first-child{
					text-align: center;
					padding: 20px 0;
					background: #f5f5f5;
				}

	#sidebar{
		float: left;
		width: 300px;
	}

		#sidebar .banner{
			margin-bottom: 25px;
		}

			#sidebar .banner a{
				display: block;
			}

				#sidebar .banner a img{
					vertical-align: top;
				}

/* #toTop */
#toTop{
	display: block;
	text-indent: -9999px;
	position: fixed;
	bottom: 40px;
	right: 40px;
	width: 50px;
	height: 50px;
	background: url(../images/totop.png) 50% 50% #ef804f no-repeat;
	border-radius: 50%;
}

/* #footer */
#footer{
	width: 100%;
	margin-top: auto;
	padding: 45px 0 40px;
	background: #f5f5f5;
}

	#footer p{
		text-align: center;
		line-height: 1;
	}

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

	.container{
		width: 100%;
	}

	#header{
		padding-bottom: 0;
	}

	#logo{
		float: none;
		width: 100%;
	}

		#logo a{
			margin: 10px auto 0;
		}

	#globalMenu{
		float: none;
		width: 100%;
	}

		#globalMenu ul{
			background: #f5f5f5;
		}

	#globalMenu ul li{
		width: 50%;
		border: none;
	}

		#globalMenu ul li a{
			border-bottom: 3px solid transparent;
		}

		#globalMenu ul li:nth-child(1) a{
			border-color: #ef804f;
		}

		#globalMenu ul li:nth-child(2) a{
			border-color: #facc6b;
		}

		#globalMenu ul li:nth-child(3) a{
			border-color: #4bae6f;
		}

		#globalMenu ul li:nth-child(4) a{
			border-color: #5d9ecf;
		}

		#serviceMenu ul li{
			width: 50%;
			margin: 0;
		}

			#serviceMenu ul li img{
				display: block;
				min-width: 100%;
				height: auto;
			}

	#breadcrumb{
		padding-left: 20px;
		padding-right: 20px;
	}

	#contents{
		padding-left: 20px;
		padding-right: 20px;
	}

	#mainContents, #sidebar{
		float: none;
		width: 100%;
		margin: 0;
	}

	#mainContents .aboutThumbs li{
		overflow: hidden;
		width: 47%;
		min-height: 100%;
		margin-left: 1.5%;
		padding-right: 1.5%;
		margin-bottom: 3%;
	}

		#mainContents .aboutThumbs li span{
			width: 100%;
			height: 100%;
		}

			#mainContents .aboutThumbs li img{
				min-width: 100%;
				min-height: 100%;
			}

	.pageContent .pageContentTable{
		overflow-x: scroll;
	}

		.pageContent .pageContentTable table{
			width: 980px;
		}

	#sidebar{
		overflow: hidden;
	}

		#sidebar .banner{
			float: left;
			width: 30%;
			margin-left: 1.5%;
			margin-right: 1.5%;
		}

			#sidebar .banner img{
				display: block;
				max-width: 100%;
				height: auto;
			}

		#sidebar .facebook{
			float: left;
			width: 30%;
			margin-left: 1.5%;
			margin-right: 1.5%;
		}

			#sidebar .facebook iframe{
				width: 100% !important;
			}

}

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

	#mv h2{
		width: 100%;
		height: auto;
		position: absolute;
		top: inherit;
		bottom: 0;
		color: #fff;
		font-size: 1.385em;
		font-weight: bold;
		text-indent: 0;
		text-align: center;
		padding: 15px 10px 10px;
		background: rgba(239,128,79,.8);
	}

	#pageTitle{
		display: none;
	}

	* img{
		max-width: 100%;
	}

	#mainContents .aboutThumbs li{
		width: 100%;
	}

	#toTop{
		display: none;
	}

	#sidebar .banner{
		float: none;
		width: 100%;
	}

		#sidebar .banner img{
			display: block;
			max-width: 100%;
			height: auto;
		}

	#sidebar .facebook{
		float: none;
		width: 100%;
	}

}