@charset "UTF-8";

.f_left {
	float: left;
}

.f_right {
	float: right;
}

.mm_btm10 {
	margin-bottom: 7px;
}
.mm_btm20 {
	margin-bottom: 20px;
}
.mm_top10 {
	margin-top: 10px;
}
.mm_top20 {
	margin-top: 20px;
}
.mm_left10 {
	margin-left: 10px;
}
.mm_left20 {
	margin-left: 20px;
}

.mm_left30 {
	margin-left: 30px;
}

.waku_gry01 {
    border:1px solid #ddd;
	padding: 7px;
	margin-bottom: 10px;
}

.waku_pnk01 {
	padding: 15px 20px 13px;
	background: #FCEFEF;
	border-radius: 5px;
}

.waku_blue01 {
	padding: 25px;
	background: #E4EAF4;
}

.waku_10px {
	padding: 5px 10px 10px;
}

a.btn01 {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	border-radius: 5px;
	color: #fff;
	margin-bottom: 10px;
	background: #F60;
	padding: 1em 2em;
	font-size: 2.0rem;
	-webkit-transition: all .3s;
	transition: all .3s;
}
a.btn01:hover {
	background: #F30;
}

a.btn02,
a.btn03,
a.btn04,
a.btn05 {
	display: inline-block;
	text-align: center;
	text-decoration: none;
	outline: none;
	border-radius: 5px;
	padding: 0.6em 1em;
	font-size: 1.8rem;
	-webkit-transition: all .3s;
	transition: all .3s;
	font-weight: bold;
}
a.btn02 {
	background: #4872BD;
	border: 2px solid #064086;
	color: #fff;
}
a.btn03 {
	background: #85B000;
	border: 2px solid #698C00;
	color: #fff;
}
a.btn04 {
	background: #FCFF9D;
	border: 2px solid #9CA100;
	color: #9CA100;
}
a.btn05 {
	background: #FF6D6D;
	border: 2px solid #FF4D4D;
	color: #FFF;
}
a.btn02:hover {
	background: #064086;
}
a.btn03:hover {
	background: #698C00;
}
a.btn04:hover {
	background: #FDFFD2;
}
a.btn05:hover {
	background: #FF8A8A;
}

/* 画像の回り込み */
div.imagebox_left {
	float: left;
	padding: 0 10px 10px 0;
}

.imagebox_left span {
	display: block;
	font-size: 110%;
	text-align: center;
	padding-top: 10px;
}

div.imagebox_right,
div.membox_right,
div.topbox_right {
	float: right;
	padding: 0 0 10px 10px;
}

.imagebox_right span {
	display: block;
	font-size: x-small;
	line-height: 140%;
	padding-top: 5px;
	text-align: center;
}


div.clear {
	clear: both;
}

.box01 {
	border: 7px solid #FFF;
	margin-bottom: 10px;
    width: 95%;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.per100 {
    width: 100%;
    height: auto;
}

.flex01 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 0.5em;
}

.flex02 {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 0.5em;
}
.flex02 div {
	margin: 0.5em 1em;
}
.flex03 {
	display: flex;
	flex-wrap: wrap;
}
.flex03 div.m01 {
	width: 200px;
	text-align: center;
}
.flex03 div.m02_3clm {
	width: calc(100% - 410px);
}
.flex03 div.m02 {
	width: calc(120% - 200px); /* トップページメイン 2カラムの場合 */
}

.flex03 div.m03 {
	width: 210px;
}

.flex04 { /* 開催情報とポスター部分 */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.flex04 div.m01 {
	width: 200px;
}

.flex04 div.m02 {
	width: calc(100% - 220px);
}
.flex04 div.m03 {
	width: calc(100% - 320px);
}

.flex04 div.m04 {
	width: 300px;
}


.facebook-wrapper {
    max-width: 400px; /* Facebook Page Plugin の最大幅 */
    margin: 0 auto;
}
 
.facebook-wrapper > .fb-page {
    width: 100%;
}
 
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}

/*================================================
 *  タブレット向けデザイン
 ================================================*/
@media screen and (max-width:991.98px) {
	.flex03 {
		flex-direction: column;
	}
	/*.flex03 div.m01 {
		order: 3;
		width: 100%;
		margin: 10px 0;
	}*/
	.flex03 div.m02 {
		order: 1;
		width: 100%;
	}
	.flex03 div.m02_3clm {
		order: 1;
		width: 100%;
	}
	.flex03 div.m03 {
		order: 2;
		width: 100%;
	}
	
	/*.flex04 div.m01 {
		width: 100%;
		text-align: center;
		order: 2;
	}*/
	.flex04 div.m02 {
		width: 100%;
		margin: 10px 0;
		order: 1;
	}
	.flex04 div.m03 {
		width: 100%;
		margin: 10px 0;
	}
	.flex04 div.m04 {
		width: 100%;
		margin: 10px 0;
		text-align: center;
	}
}

/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {
	a.btn01,
	a.btn02,
	a.btn03 {
		font-size: 1.6rem;
	}
}