/* =======================================================================
	リセットCSS
======================================================================= */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
	margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 { font-weight:normal }

img, object, embed, video {
	max-width: 100%;
	height:auto;
	vertical-align: middle; /* これ指定しないと下に変な隙間ができる件*/
}
/* HTML5の要素をブロック化 */
header, footer, article, section, nav, aside, hgroup { display: block }

/* リンクカラー */
a:link, a:visited, a:hover, a:active {
	color: #1d4294;
}
/* 長いURLのはみだし防ぐ */
a{ word-break: break-all; }

html {
	color: #222222;
	margin: 0;
	padding: 0;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
body {
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1.5em;
	background-color: #1d4294 ;  /* 背景色 */
}
.both {
	clear: both;
}
.both1px {
	font-size: 1px;
	line-height: 1px;
	clear: both;
}

/* =======================================================================
	基本CSS
======================================================================= */

/* デフォルト幅 */
header, footer, .main  {
	width: 1000px;
	margin: 0 auto;
	-webkit-transition: width .5s;
}
header {
	text-align: center;
}
header h1 {
	font-weight: bold;
	color: #FFFFFF;
	padding: 10px;
	margin: 0;
}
#header-bg {
	background-color: #1d4294;
}
footer {
	clear: both;
	padding-top: 20px;
	padding-bottom: 40px;
	text-align: center;
	font-size: 13px;
	color: #FFFFFF;
}
/* 幅が980px以下の時に次のスタイルが適用される */
@media screen and (max-width: 980px) {
header, footer, .main  {
  width: 100%;
  float: none;
}
}

/* メインコンテンツ */
.main p {
	margin-bottom: 20px;
}

.main-in {
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 30px;
	padding-left: 10px;
}

/* タイトル */
.main h1 {
	background-color: #1d4294;
	font-weight: bold;
	color: #FFFFFF;
	padding: 10px;
	text-align: center;
	margin-bottom: 20px;
	/*全体角丸*/
	border-radius: 8px; /* CSS3草案 */
	-webkit-border-radius: 8px; /* Safari,Google Chrome用 */
	-moz-border-radius: 8px; /* Firefox用 */
}

.main h2 {
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	display: flex;
	align-items: center;
	font-weight: bold;
}
.main h2:before, .main h2:after {
	content: "";
	flex-grow: 1;
	height: 3px;
	background: #222;
	display: block;
}
.main h2:before {
	margin-right: .4em;
}
.main h2:after {
	margin-left: .4em;
}

.text-bold-l {
	font-size: 120%;
	font-weight: bold;
}
/* youtubeをレスポンシブに対応 */
.youtube {
	height: 0;
	overflow: hidden;
	padding-bottom: 70.25%; /* 高さを調整 初期56.25% */
	position: relative;
}
@media screen and (max-width: 599px) {
.youtube {
	padding-bottom: 80.5%; /* 高さを調整 初期56.25% */
}
}
.youtube {
	margin-bottom: 30px;
}
.youtube iframe {
	position: absolute;
	left: 1px;
	top: 0;
	height: 100%;
	width: 100%;
	border: none;
}

/* ボックス 3等分 横並び */
.b3-box {
	letter-spacing: -0.4em;
}
.b3 {
	width: calc(100% / 3);
	display: inline-table;
	letter-spacing: normal; /* 文字間を通常に戻す */
}
@media screen and (max-width: 980px) {
.b3 {
	float: left;
	width: 100%;
}
}
/* ボックス 2等分 横並び */
.b2 {
	width: calc(100% / 2);
	display: inline-table;
	letter-spacing: normal; /* 文字間を通常に戻す */
}
@media screen and (max-width: 980px) {
.b2 {
	width: 100%;
}
}
/* ボックス 等分内 余白 */
.box-in {
	padding: 5px;
}

/* 枠 */
.waku {
	border: 5px solid #1d4294;
	border-radius: 8px;        /* 角丸CSS3草案 */
	-webkit-border-radius: 8px;    /* 角丸Safari,Google Chrome用 */
	-moz-border-radius: 8px;   /* 角丸Firefox用 */
	padding: 20px;
	background-color: #FFF;
}
.waku2 {
	border: 5px solid #cc0000;
	border-radius: 8px;        /* 角丸CSS3草案 */
	-webkit-border-radius: 8px;    /* 角丸Safari,Google Chrome用 */
	-moz-border-radius: 8px;   /* 角丸Firefox用 */
	padding: 12px;
	background-color: #FFD8D6;
}

@media screen and (max-width: 980px) {
.waku {
	padding: 15px;
}
}
/* バナー広告 */
.banner {
	text-align: center;
	margin-bottom: 30px;
}
.banner img {
	padding-top: 1px;
	padding-right: 2px;
	padding-bottom: 1px;
	padding-left: 2px;
}
@media screen and (max-width: 599px) {
.banner img {
	height: auto;
	width: 92px;
}
}
.caption {
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	background-color: #FFF;
}

/*下からふわっと アニメーション要素のスタイル*/
.animation{
	opacity : 0;
	visibility: hidden;
	transition: 2s;
	transform: translateY(30px);
}
/*下からふわっと アニメーション要素までスクロールした時のスタイル*/
.active{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/*ノートpcだと大きすぎて動画の高さがはみ出る件 全体縮小して高さを短く*/
.full-movie-in {
	width: 75%;
	margin-right: auto;
	margin-left: auto;
}
@media screen and (max-width: 980px) {
.full-movie-in {
	width: 100%;
}
}
.eng {
	text-align: right !important;
	margin-bottom: 10px;
	font-size: 12px;
}
@media screen and (max-width: 980px) {
.eng img {
	text-align: right !important;
	height: 36px;
	width: 120px;
}
}
.fint-size120 {
	font-size: 120%;
}
.fint-size140 {
	font-size: 140%;
}
.font-red {
	color: #cc0000;
	font-weight: bold;
}
.box4 {
	float: left;
	width: 25%;
}
.box3 {
	float: left;
	width: 33.3%;
}

/* 幅が980px以下の時に次のスタイルが適用される */
@media screen and (max-width: 980px) {
.box4 {
	width: 50%;
}
.box3 {
	width: 100%;
}
}
/* 幅が599px以下の時に次のスタイルが適用される */
@media screen and (max-width: 599px) {
.box4 {
	width: 100%;
}
}
.box4-in {
	padding: 6px;
}
.title01 {
	font-size: 120%;
	font-weight: bold;
	color: #1d4294;
	border-left-width: 10px;
	border-left-style: solid;
	border-left-color: #1d4294;
	padding-left: 10px;
}
#qr img{
	max-width: 300px;
	max-height: 300px;
}

/* 幅が768px以上の時に次のスタイルが適用される */
@media (min-width: 768px) { 
.sp-pc {
	display: none;
}
}
@media screen and (max-width: 980px) {
.waku .fint-size140 {
	display: block;
}
}

/* 参加ボタン */
.akwawaku-link {
	margin-bottom: 20px;
}
.akwawaku-link img {
}
.akwawaku-link a {
	background-color: #FFFFFF;
	display: block;
	max-width: 720px;
	height: auto;
	margin-right: auto;
	margin-left: auto;
	border-radius: 24px;        /* 角丸CSS3草案 */
	-webkit-border-radius: 24px;    /* 角丸Safari,Google Chrome用 */
	-moz-border-radius: 24px;   /* 角丸Firefox用 */
	border: 6px solid #1d4294;
	display: block;
	box-shadow: 5px 5px 5px #aaaaaa;
}
.akwawaku-link a:hover {
	border: 6px solid #1d4294;
	background-color: #FFD8D6;
	-webkit-transition: all 0.3s ease; /* マウスオーバー切替速度 */
	-moz-transition: all 0.3s ease; /* マウスオーバー切替速度 */
	transform: scale(1.04,1.04); /*画像の拡大*/
	cursor: pointer; /*カーソルをポインターにする*/
	box-shadow: 5px 5px 5px #aaaaaa;
}