@charset "utf-8";


/*PC・タブレット・スマホ共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	margin-bottom: 3em;
	color: #fff;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 100% !important;	/*文字サイズ*/
	line-height: 1.5;		/*行間*/
	-webkit-text-size-adjust: none;
	text-align: center;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
/*table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}*/
iframe {width: 100%;}

/*リンクテキスト設定
---------------------------------------------------------------------------*/
a {
	color: #FFF;	/*リンクテキストの色*/
	-webkit-transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
	transition: 0.5s;			/*同上*/
}
a:hover {
	color: #FE2E64;	/*マウスオン時の文字色*/
}

/*h2見出しタグの設定
---------------------------------------------------------------------------*/
h2 {
	clear: both;
	margin-bottom: 20px;
	color: #fff;			/*文字色*/
	padding: 10px 30px;		/*上下、左右への余白*/
	background: #3e6680;	/*背景色*/
	border-radius: 30px;		/*角丸のサイズ*/
}

/*h3見出しタグの設定
---------------------------------------------------------------------------*/
h3 {
	clear: both;
	margin-bottom: 20px;
	padding: 8px 30px;			/*上下、左右への余白*/
	border-radius: 30px;		/*角丸のサイズ*/
	border: 2px solid #3e6680;	/*枠線の幅、線種、色*/
}

/*段落タグ設定
---------------------------------------------------------------------------*/
p {
	padding: 0px 30px 20px;	/*上、左右、下への余白*/
}

/*ヘッダー（ロゴ、メニュー、お知らせ欄が入った最初の画面）
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	text-align: center;	/*ヘッダーブロックの内容をセンタリングする設定*/
	height: 100%;		/*ヘッダーブロックの高さ。画面の高さに合わせる為に100%で指定。*/
}
/*ロゴ画像設定*/
div#logo {
	text-align: center;
	margin: 2em auto;
}
#logo img {
	/*width: 100%;	/*幅*/*/
	opacity: 0.6;	/*透明度60%の事*/
}

/*メニュー
---------------------------------------------------------------------------*/
/*メニュー全体を囲むブロック*/
#main, #menubar {
	width: 95%;
	margin:50px auto 0;
}
#menubar {
	text-align: center;	/*メニューブロックの内容をセンタリングする設定*/
}
/*メニュー１個あたりの設定*/
#menubar li {
	display: inline;	/*横並びにする設定*/
}
#menubar li a {
	display: inline-block;
	text-decoration: none;
	color: #fff;					/*文字色*/
	font-size: 20px;				/*文字サイズを少し大きくする設定。お好みで変更して下さい。*/
	letter-spacing: 0.1em;			/*文字感覚を少し広くする設定。広くしないでいいなら、この１行を削除。*/
	width: 200px;		/*幅。下のline-heightと数字を合わせる。*/
	line-height: 200px;	/*高さ。上のwidthと数字を合わせる。*/
	border-radius: 50%;	/*角丸のサイズ。この行を削除すると四角形になる。10pxなど直接的な数字にすると角が少し丸まった形になる。*/
	border: 4px solid #fff;	/*枠線の幅、線種、色*/
	margin: 0px 20px 10px;	/*メニュー間のスペース。上に、左右に、下に、の順番。*/
	text-shadow: 0px 0px 3px rgba(0,0,0,0.6);	/*テキストの影。右に、下に、広げる幅、rgbaは色指定で0,0,0は黒で0.6は透明度60%の事。*/
}
/*マウスオン時の設定*/
#menubar li a:hover {
	background: #3e6680;	/*背景色*/
	color: #fff;			/*文字色*/
}


/*ページトップへの設定
---------------------------------------------------------------------------*/
#page_top{
  z-index: 9999;
  width: 48px;
  height: 48px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 50;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}


/*フッター(ページ最下部のcopyrightのパーツ)設定
---------------------------------------------------------------------------*/
footer {
	position:fixed;
	bottom:0px;
	width:100%;
	text-align: center;	/*文字をセンタリング*/
	color: #fff;		/*文字色*/
	background: #000;
	opacity: 0.8;
	text-shadow: 1px 1px rgba(0,0,0,0.8);	/*テキストの影。右へ、下へ、色(rgba)の設定。rgba値は左３つが色指定(この場合は黒)で最後の小数点が透明度。*/
}
footer a {
	text-decoration: none;
	border: none;
	color: #fff;	/*文字色*/
}
footer .pr {
	display: block;
}


/*背景用画像の設定（※実際にはcss背景画像でなく、画像としてhtml側の一番下に配置しています）
---------------------------------------------------------------------------*/
#bg img {
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: -1;
	width: 100%;
	height: 100%;
}

.bg-img {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0px;
	left:0px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.blur {
	-webkit-filter: blur(3px);
	-moz-filter: blur(3px);
	-o-filter: blur(3px);
	-ms-filter: blur(3px);
	filter: blur(3px);
}

/*その他
---------------------------------------------------------------------------*/
.l {text-align: left;}
.c {text-align: center;}
.r {text-align: right;}

.look {background: #333; color: #fff;padding: 5px 10px;border-radius: 4px;}
.mb15,.mb1em {margin-bottom: 15px;}
.color1 {color:#d50f26;}
.pr {font-size: 10px;}
label.label_design {
	display: inline-block;
	max-width: 100%;
	margin: 1em 0;
	font-weight: 700;
	padding:8px;
	border: 1px solid #ddd;
	border-radius:5px;
	cursor: pointer;user-select: none;
}


/*ソーシャルログインボタンなど
---------------------------------------------------------------------------*/
.btn_login, .btn_login:hover{
	display: inline-block;
	padding: 0.8em 1em;
	text-decoration: none;
	background: #F5F5F5;
	border-left: solid 6px #2ecc71;/*左線*/
	color: #2ecc71;/*文字色*/
	font-weight: bold;
	font-size: 60%;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
	margin: 0.7em;
}
.btn_login:hover{
	background: #FFF;
}
.btn_login:active {
	box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
	transform: translateY(2px);
}

.btn_login_twitter, .btn_login_twitter:hover{
	border-left: solid 6px #03A9F4;/*左線*/
	color: #03A9F4;/*文字色*/
}
.btn_login_google, .btn_login_google:hover{
	border-left: solid 6px #FF5722;/*左線*/
	color: #FF5722;/*文字色*/
}


/*画面幅800px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:800px){
	div#logo {
		margin: 2em auto;
	}
}


/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:600px){

	/*段落タグ設定
	---------------------------------------------------------------------------*/
	p {
		padding: 0px 10px 20px;	/*上、左右、下への余白*/
	}

	/*メニュー
	---------------------------------------------------------------------------*/
	/*メニュー１個あたりの設定*/
	#menubar {
		text-align: center;	/*メニューブロックの内容をセンタリングする設定*/
		width: 95%;
		margin:50px auto 0;
	}
	#menubar li a {
		font-size: 16px;				/*文字サイズ。*/
		letter-spacing: normal;
		width: 150px;		/*幅。下のline-heightと数字を合わせる。*/
		line-height: 150px;	/*高さ。上のwidthと数字を合わせる。*/
	}

}



/*画面幅450px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:450px){

	/*メニュー
	---------------------------------------------------------------------------*/
	/*メニュー１個あたりの設定*/
	#menubar {
		text-align: center;	/*メニューブロックの内容をセンタリングする設定*/
		width: 95%;
		margin:50px auto 0;
	}
	#menubar li a {
		font-size: 14px;	/*文字サイズ。*/
		width: 100px;		/*幅。下のline-heightと数字を合わせる。*/
		line-height: 100px;	/*高さ。上のwidthと数字を合わせる。*/
	}

	}



	/*画面の高さ420px以下、かつ、端末を横向きにした場合の設定
	------------------------------------------------------------------------------------------------------------------------------------------------------*/
	@media screen and (max-height:420px) and (orientation: landscape){

	/*メニュー
	---------------------------------------------------------------------------*/
	/*メニュー全体を囲むブロック*/
	#menubar {
		top: 38%;		/*ヘッダーブロックに対して上から40%の場所に配置*/
	}

}


/*端末を縦向きにした場合の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: portrait){ .portrait {display: block;} .landscape {display: none;} }

/*端末を横向きにした場合の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (orientation: landscape){ .portrait {display: none;} .landscape {display: block;} }