body {
	max-width: 1000px;
	font-family: hiragino, ms-gothic, arial;
    margin: 0 auto;
    padding: 0;
	color: #1E1E1E;
}
a{
	text-decoration: none;
}
a:link {
	color: #fff;
}
a:hover {
	color: #f66;
}
a:visited {
	color: #fff;
}

h1 {
	padding: 0 0 0 2rem;
	font-weight: bold;
	font-size: 2rem;
	text-align: left;
	margin: 0 0 2rem 0;
}
@media screen and (max-width: 767px) {
	h1 {
	font-size: 1.8rem;
	text-align: left;
	margin-top: 0.1em;
	}
}
h1.sub_title {
	margin-bottom: 2rem;
	font-size: 1.5rem;
}

.ribbon {
  display: inline-block;
  position: relative;
  height: 2.6rem;/*リボンの高さ*/
  line-height: 2.6rem;/*リボンの高さ*/
  text-align: center;
  margin-left: 1rem;
  padding: 0 2rem;/*横の大きさ*/
  font-size: 1.3rem;/*文字の大きさ*/
  background: #da3c41;/*塗りつぶし色*/
  color: #FFF;/*文字色*/
  box-sizing: border-box;
  }
.ribbon:after,
.ribbon:before{
	display: block;
	content: '';
	position: absolute;
	top:0;
	border-top: 1.3rem solid #da3c41;
	border-bottom: 1.3rem solid #da3c41;
	border-right: 1.3rem solid transparent;
	border-left: 1.3rem solid transparent;
  }
.ribbon:after{ left: -1.3rem; }
.ribbon:before{ right: -1.3rem; }

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

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

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

p.con {
	margin: 5px auto;
}

p.notice {
	font-size: 0.8em;
}

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

header {
	margin: 0 auto;
	padding: 0 1rem;
    overflow: auto;
}


.site-header{
	color: rgb(26, 18, 51);
	display: flex;
	padding: 0.2em 1.2em;
	justify-content: space-between;
}
.site-logo {
    float: left;
}
.site-logo img{
	height: 60px;
	width: auto;
}
.gnav {
	float: right;
}
.gnav__menu__item a {
	color: #1E1E1E;
	font-weight: bold;
	text-decoration: none;
}
.gnav__menu__item a:link {
	color: rgb(51, 51, 51);
}
.gnav__menu__item a:hover {
	color: #99CCFF;
}
.gnav__menu__item a:visited {
	color: #99CCFF;
}

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

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

/*メニュー部分*/
#ham-menu {
    background-color: rgba(255, 255, 255, 0.7); /*メニュー背景色*/
    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: #1E1E1E; /*アイコン（フォント）色*/
    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: #fff; /*黒背景部分背景色*/
    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;/*区切り線用設定*/
}

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


.container {
	margin: 0 auto;
	padding: 0;
	justify-content: center;
}

#title {
	padding: 10px 0;
	background: url("../img/spiforum.jpg");
	background-color: #F6F6F6;
	background-position: right;
	background-size: cover;
	background-repeat: no-repeat;
	color: #00002D;
}
@media screen and (max-width: 440px) {
	#title {
	background: url("../img/spiforums.jpg");
	background-color: #F6F6F6;
	background-position: right;
	background-repeat: no-repeat;
	}
}
.FtF::after {
	content: "";
	background-image: url("../img/e1136_1.svg");
	display: inline-block;
	height: 4rem;
	width: 20rem;
	vertical-align: middle;
}

#about {
	margin: 0;
	padding: 1.8em 10px;
}
#about p {
	max-width: 80%;
	float: center;
	margin: 0 auto 1em auto;
	line-height: 1.7em;
}

#reg {
	background-color: #f0f0f0;
	margin: 0;
	padding: 20px 5px;
}

/* 
申し込みボタンここから
================================================ */
.flexbox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.flexbox table {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
}
.flexbox th {
	margin: 100px;
    padding: 15px;
	text-align: center;
    vertical-align: top;
    border: none;
    color: #fff;
}
.flexbox td {
    padding: 15px;
	text-align: center;
    vertical-align: top;
    border: none;
}
.price {
    font-size: 1.2rem;
}

/* Background color */
.plan-spimember table{
	background-color: #f0afb2;
}
.plan-spimember th {
	background-color: #da3c41;
}
.plan-nonmember table {
	background-color: #87b2e4;
}
.plan-nonmember th {
	background-color: #023ead;
}
/* 
BUTTON
================================================ */
.btn {
    color: #fff;
    font-size: 1.1rem;
	font-weight: 600;
    text-decoration: none;
    background: linear-gradient(rgb(240, 122, 151), rgb(240, 71, 113));
    border-radius: 15px;
    box-shadow: 1px 2px rgb(173, 27, 108);
    position: relative;
    display: inline-block;
    top: -2px;
    padding: 15px;
    width: 80%;
    text-align: center;
    margin: 5px 0;
}
.btn:link {
    color: #fff;
}
.btn:hover,
.btn:active {
    box-shadow: 0 1px #cc0000;
    top: 1px;
	color: #fff;
	font-weight: bold;
}
.btn:visited {
	color: #fff;
}
/* 
LARGE DISPLAY
================================================ */
@media (min-width: 767px){
  .flexbox {
	-webkit-flex-direction: row;
	flex-direction: row;
	justify-content: center;
	align-items: center;}
  .flexbox table {
	width: 400px;
    margin-left: 3%;
  }
  .flexbox table:first-of-type {
    margin-left: 0;
  }
}
/* 
申し込みボタンここまで
================================================ */
#sponsor img{
	display: block;
	margin: 1rem auto 0 auto;
	width: 70%;
	max-width: 500px;
}

.sponsor_info {
	display: block;
	margin: 0 auto;
	width: 70%;
	max-width: 500px;
	text-align: center;
}
.sponsor_info a{
	text-decoration: none;
	color: #06f;
}
.sponsor_info a:link {
	color: #06f;
}
.sponsor_info a:hover {
	color: #f66;
}
.sponsor_info a:visited {
	color: #06f;
}

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

@media screen and (max-width: 767px) {
	.timetable td {
		display:block;
	}
}

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

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

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

#contact {
	margin: 0;
	background-color: #023ead;
	color: rgb(255, 255, 255);
}