body {
	width: 100%;
	margin: 0;
	font-family: hiragino, ms-gothic, arial;
	color: #333;
}

header {
	padding: 0px;
}


.site-header{
	background: #fff;
	color: rgb(51, 51, 51);
	display: flex;
	margin: 0;
	padding: 0.2em 1.2em;
	position: fixed;
	justify-content: space-between;
	width: 100%;
}
.site-logo img{
	height: 50px;
	width: auto;
}
.gnav__menu__item a {
	color: #333;
	font-weight: bold;
	text-decoration: none;
}
.gnav__menu__item a:link {
	color: rgb(51, 51, 51);
}
.gnav__menu__item a:hover {
	color: rgb(51, 51, 51);
}
.gnav__menu__item a:visited {
	color: rgb(51, 51, 51);
}

.gnav__menu{
	display: flex;
	margin-right: 5em;
}
.gnav__menu__item{
	margin-left: 20px;
	list-style-type: none;
}
.gnav__menu__item a{
	color: #333;
	text-decoration: none;
}

@media screen and (max-width:480px) {
	.gnav ul {
	display:none;
	}
}

/*メニュー部分*/
#ham-menu {
    background-color: #fff; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 10px 40px; /*メニュー内部上下左右余白*/
    position: fixed;
    right: -200px; /*メニュー横幅�@と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 200px; /*メニュー横幅�@*/
    z-index: 1000;
}

/*メニューアイコン部分は疑似要素で*/
#ham-menu::before {
    background-color: #fff; /*ボタン部分背景色*/
    border-radius: 0 0 0 10px; /*左下角丸*/
    color: #333; /*アイコン（フォント）色*/
    content: "menu"; /*メニューアイコン*/
    display: block;
    font-size: 1.2em; /*アイコン（フォント）サイズ*/
    height: 50px;
    line-height: 50px; /*縦位置中央化*/
    position: absolute;
    right: 100%;
    text-align: center;
    top: 0;
    width: 50px;
}

/*透過背景部分*/
#menu-background {
    background-color: #333; /*黒背景部分背景色*/
    display: block;
    height: 100%;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.3s linear 0s; /*0.3s は変化するのにかかる時間*/
    width: 100%;
    z-index: -1;
}

/*hover 時の処理*/
#ham-menu:hover {
    transform: translate(-200px); /*メニュー横幅�@と合わせる*/
}

#ham-menu:hover + #menu-background {
    opacity: 0.5; /*黒背景部分透過度*/
    z-index: 999;
}

#ham-menu ul {
	margin: 1em 0;
	padding: 0;
	_zoom:1;  /*区切り線用設定*/
	overflow:hidden; /*区切り線用設定*/
}

#ham-menu li {
	list-style-type: none;
	padding: 0.3rem;
	margin-top:-1px; /*区切り線用設定*/
	border-top:1px dotted #666666;/*区切り線用設定*/
}

@media screen and (min-width:481px) {
	#ham-menu {
	display:none;
	}
}


.container {
	margin: 0 auto;
	padding: 2.4em 0 0 0;
	justify-content: center;
	max-width: 90%;
}

.flex-container {
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width: 767px) {
	.flex-container {
	flex-wrap: wrap;
	}
}

#title {
	padding: 2em 0;
}

#eyecatch {
	flex-grow: <0>;
	background-color: #edf;
}
@media screen and (max-width: 767px) {
	#eyecatch {
	flex-basis: auto;
	margin: auto;
	}
}
@media screen and (max-width: 767px) {
	#eyecatch img {
	max-width: 300px;
	flex-shrink: auto;
	}
}

#about {
	margin: 0;
	padding: 1.8em 10px;
	background-color: #f2f4f4;
	flex-grow: <1>;
}
#about p {
	max-width: 80%;
	float: center;
	margin: 0 auto 1em auto;
	font-size: 1.1rem;
	line-height: 1.5em;
}

#reg {
	margin: 0;
	padding: 20px 5px;
	background-color:  rgb(204, 234, 233);
}

#timetable {
	margin: 0;
	padding: 5px;
	background-color: #f2f4f4;
}
#timetable table{
	float: center;
	margin: 0 auto 1.5em auto;
	table-layout: fixed;
	word-wrap: break-word;
	border-collapse: collapse;
	max-width: 90%;
}
tr, td{
	border: solid 1px #666;
}
td {
	vertical-align: top;
	padding: 1.2em;
}

@media screen and (max-width: 767px) {
	.timetable table {
	max-width: 75%;
	}
}

@media screen and (max-width: 767px) {
	.table-responsive > .table {
		table-layout: auto;
	}
}

#venue {
	display: flex;
}
@media screen and (max-width: 767px) {
	#venue {
	flex-direction: column;
	}
}
.access {
	margin: 0;
	padding: 5px;
	width: 40%;
}
.access a:link {
	color: rgb(22, 47, 160);
}

.access a:hover {
	color: #f66;
}

@media screen and (max-width: 767px) {
	.access {
	width: auto;
	}
}
.map {
	margin: 0;
	padding: 5px;
	min-height: 300px;
	width: 60%;
}
@media screen and (max-width: 767px) {
	.map {
	width: auto;
	}
}

#contact {
	margin: 0;
	padding: 2px;
	background-color: #bbcff9;
	color: #333;
}

a{
	text-decoration: none;
}
a:link {
	color: #333;
}
a:hover {
	color: #f66;
}
a:visited {
	color: #333;
}

h1 {
	font-weight: bold;
	font-size: 2.5rem;
	text-align: center;
	padding-top: 1.3em;
}
@media screen and (max-width: 767px) {
	h1 {
	font-size: 1.8rem;
	text-align: left;
	padding-top: 0.1em;
	}
}

h2 {
	font-weight: bold;
	font-size: 1.5em;
	text-align: left;
	padding-left: 20px;
}

p {
	max-width: 90%;
	float: center;
	margin: 0 auto 1em auto;
}
p.iframe {
	float: center;
	margin: 1em auto;
}
p.info {
	float: center;
	margin: 0 auto 1em auto;
	font-size: 1.2rem;
	text-align: center;
}
@media screen and (max-width: 767px) {
	p.info {
	max-width: 90%;
	font-size: 1.2rem;
	}
}

p.con{
	margin: 5px auto;
}

img {
	float: center;
	vertical-align: middle;
}

#reg ul {
	display: flex;
	justify-content: space-around;
}

#reg li {
	color: #fff;
	padding: 0.7rem 1rem;
	border-radius: 8px;
	border: solid 2px rgba(255, 255, 255, 1);
	list-style-type: none;
	background-color: rgb(14, 150, 148);
	transition: .2s;
	width: calc(70% / 3);
}
#reg li:hover {
	background: rgb(203, 74, 131);
	border: solid 2px rgb(203, 74, 131);
} 
.reg1 {
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
}
.reg2 {
	color: #fff;
	font-size: 1.2rem;
	text-align: center;
}

@media screen and (max-width: 767px) {
	#reg ul {
	flex-flow: row wrap;
	}
}
@media screen and (max-width: 767px) {
	#reg li {
	width: 90%;
	margin: 0.2rem 2em;
	}
}
@media screen and (max-width: 767px) {
	#reg li reg1 {
	letter-spacing: 1rem;
	}
}