﻿body {
    background-color: #ffec47
}

#wrapper {
	font-family: Verdana, "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
/*    position: relative; */
    display: -webkit-box; /* 未対応ブラウザ向け記述 */
    display: -ms-flexbox; /* 未対応ブラウザ向け記述 */
    display: flex;
    flex-flow: row wrap; /* 左→右かつ上→下の順に並べる */
    -ms-flex-wrap: wrap; /* 未対応ブラウザ向け記述 */
    justify-content: space-around; /* 均等に余白を設定 */
    -ms-flex-pack: justify; /* 未対応ブラウザ向け記述 */
    -webkit-box-pack: justify; /* 未対応ブラウザ向け記述 */
    align-items: flex-start; /* 左端から並べ始める */
    align-content: flex-start; /* 各要素の上端を揃える */
/*    margin: 0.5em auto; */
    width: 96%; /* ディスプレイ幅に対する相対指定 */
}

a:link { 
	color: #0033cc;
	text-decoration: underline;
}
a:visited {
	color: #6A4A3C;
	text-decoration: none;
}

a:hover {
	color: #d7003a;
	text-decoration: none;
}

a:active {
	color: #6A4A3C;
	text-decoration: none;
}

#header {
	color: #FF0000;
	font-size: 32pt;
	font-weight: bold;
	padding: 10px 0 0 10px;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#header a:link { 
	color: #FF0000;
	text-decoration: none;
}

#navi {
/*    width: 800px;*/
    padding: 0;
    margin: 0;
    list-style-type: none;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#navi li {
	width: 16%;
	float: left;
	padding: 0;
	margin: 0;
	text-align: center;
}

#navi li a {
    width: auto;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
     
    padding: 10px 0;
    text-decoration: none;
    display: block;
    background: #007bbb;
    }

#navi li a:hover {
    background: #87ceeb;
}

#pagetitle {
	margin: 30px 50px 10px 50px;
	color: #330000;
	font-size: 18pt;
	font-weight: bold;
	align-self: stretch;
}

#contop {
	background: #f8f4e6; /* 背景色 */
	margin: 10px 0 20px 20px;
	padding: 20px;
	color: #330000;
	border-radius: 10px; /* 角丸加工 */
	font-size: 14pt;
	overflow-wrap: break-word;
    flex-basis: 40%;
    float: left; 
	align-self: stretch;
}

#poster {
	margin: 10px 0 20px 20px;
	color: #330000;
	font-size: 14pt;
	float: right; 
    flex-basis: 30%;
	align-self: stretch;
}

img.poster{
	margin: 10px 0 20px 20px;
    max-width: 200px;
    height: auto;
}


#content {
	background: #f8f4e6; /* 背景色 */
	margin: 10px 50px 20px 50px;
	padding: 20px;
	color: #330000;
	border-radius: 10px; /* 角丸加工 */
    flex-basis: 70%;
    float: left; 
	align-self: stretch;
}


#sponsor {
	margin: 10px 0 20px 20px;
	color: #330000;
    float: left;  
    flex-basis: 30%; 
	align-self: stretch;
}

#twitter {
	margin: 10px 0 20px 20px;
    float: right;
    flex-basis: 30%; 
	align-self: stretch;
}



/* ここから企業協賛バナーの設定 2020skmt */
.spnsor_banner {
	display: flex;
	flex-wrap:wrap;
}

.spnsor_banner li {
	display:  inline-block;     /* インラインブロック要素にする */
	width: 234px;	/*←指定ハーフバナーサイズを指定*/
	height: 62px;	/*←指定ハーフバナーサイズ+2pxを指定*/
	padding:0 5px;	/*←画像の左右に5pxの余白を入れる*/
	box-sizing:border-box;
	}
			
.spnsor_banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border:solid 0px transparent; /*←背景透過*/
}

/* ここから下が企業協賛募集中ボタンのCSS */
.btn-border {
  display: flex;
  flex-wrap:wrap;
  max-width: 234px;
  text-align: left;
  border: 1px solid #87ceeb;
  font-size: 16px;
  color: #69821b;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 8px;
  border-radius: 4px;
  transition: .4s;
}

.btn-border:hover {
  background-color: #87ceeb;
  border-color: #87ceeb;
  color: #FFF;
}

/* ここまで企業協賛バナーの設定 2020skmt */

/* これがfloatの解除 */
.clear {
    clear: both;
}


#footer {
	background: #007bbb;
	padding: 5px;
	text-align: center;
	font-size: 10pt;	
	width: 96%;
}

#footer a:link { 
	color: #FFFFFF;
}
#footer a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

#footer a:hover {
	color: #d7003a;
	text-decoration: none;
}

#footer a:active {
	color: #FFFFFF;
	text-decoration: none;
}

/* boxのfloat用設定 */
/* もっとうまい書き方があるはず… */
.boxContainer { 
	overflow: hidden;
}

.floatText{
	float: left;
	width: 70%;
}

.floatImg{
	float:left;
	padding-right: 10px;
}

 
.boxContainer:after {
    clear: both;
}