@charset "utf-8";

body {
	-webkit-text-size-adjust: 100%;   /* for mobile Safari */

	min-width: 100%;  /* fix foundation.css */
	margin: 0px;
	padding: 0px;
	color: #333333;
	background-color: #004477;
	/*background: #ffffff url(/image/dra/2019/bgImg.jpg) no-repeat center top;*/
	font-family: "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , sans-serif;
	font-size: 12px;
	line-height: 1.5em;
	text-align:left;
}
input::-webkit-input-placeholder { color: #aaa; }   /*Google Chrome, Safari, Opera 15+, Android, iOS*/
input:-moz-placeholder { color: #aaa; opacity: 1; }   /*Firefox 18-*/
input::-moz-placeholder { color: #aaa; opacity: 1; }   /*Firefox 19+*/
input:-ms-input-placeholder { color: #aaa; }   /*IE 10+*/

a, a:link, a:visited { color: #3366cc; text-decoration: underline;
}
a:hover, a:active    { color: #3366cc; text-decoration: none;
}

.clearfix:after { /*floatの解除*/
	content:" ";
	display:block;
	clear:both;
	height:0px;
	visibility:hidden;
}

/* -------------------------------------- */

.wrapper{
	margin: 0;
	padding: 0;
	width: 100%;
	min-width: 10%;
	/* background-color: #ffffff; */
}

/* -------------------------------------- */

#header{
	margin: 0px auto;
	padding: 0px;
	width: 92%;
	height: 130px;
	padding-bottom: 0px;
}

#header .head-top {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 75px;
}
.header-logo {
	margin: 13px 10px 0 0;
	padding: 0;
	float: left;
}

.head-sublogo-sp {
	float: left;
	margin: 13px 4px 0 3px;
	padding: 0;
	top: 0;
	left: 0;
	float: left;
}

.head-logo-special {
	float: left;
	margin: 10px 0 0 0;
	padding: 0;
	top: 0;
	left: 0;
	float: left;
}


div.header_grand-navi {
	box-sizing: border-box;
	margin: 6px;
	padding: 0px;
	width: 100%;
	height: 454px;
	color: #fff;
	/*font-size:180%;*/
	font-size:clamp(1rem,150%,2rem);
	line-height:100%;
	font-weight: bold;
}

div.header_progress {
	margin: 15px auto;
	padding: 0px;
	width: 90%;
	height: 3em;
	font-size: 12px;
	line-height: 22px;
}

ul.header_progress_ul {
	display: block;
	margin: 0px auto;
	padding: 0px;
	width: 100%;
	height: 3em;
	list-style: none;
	text-align: center;
/*	border: 1px solid #0f3; */
}

ul.header_progress_ul li {
	box-sizing: border-box;

	display: inline-block;
	margin: 0px;
	padding: 0.5em 0.4em 0.6em 0.4em;
/*	border: 1px solid #6699cc; */
	border: 4px solid #e2e2e2;
	background-color: #fff;
	text-align:center;
	width: 26%;
	/*height: 3em;*/
	color: #333;
	font-size: 120%;
	font-weight: bold;
}

ul.header_progress_ul li.current {
	background-color: #bdf;
}

ul.header_progress_ul li.arrow {
	background: url(./icon-arrow_blue.png) center 15px no-repeat;
	border: 0px;	/* border: 1px solid #f03;  */
	background-color: #fff;
	margin: 2px;
	width: 5%;
	/* height: 3em; */
}


/* -------------------------------------- */

#main {
	margin: 0 auto;
	padding: 25px 0 30px 0;
	width: 100%;
	background-color: #fff;
}
#header_image {
	margin: 0 auto;
	width: 100%;
}

.subtitle {
	font-size:100%;
	background-color:#eef;
}

.playername {
	text-align:center;
	font-size:120%;
	padding:6px 0px 2px;
}

.player_selector {
	margin-bottom:8px;
}

/* -------------------------------------- */

#footer {
}

.footer {
  width: 90%;
  margin: 0 auto;
  padding: 0;
  height: 80px;
  background-color: #004477; /*#003579;*/
  background-image: none;
}

.footer .foot-menu-area {
  width: 100%;
  margin: 0px auto;
  padding: 15px 0;
}

div.foot-menu {
  width: 100%;
  margin: 16px 0px 0px 13px;
  padding: 0;
  font-size: 12px;
  line-height: 22px; }

.foot-menu-area ul {
  display: flex;
  margin: 0px;
  padding: 0;
  height: 28px;
  list-style: none; }

.foot-menu-area ul li {
  margin: 0px 10px;
  padding: 0;
  font-size: 12px;
  line-height: 22px; }

div.copyright {
  margin: 8px 12px;
  padding: 0;
  width: 90%;
  font-size: 70%;
  color:#fff;
  line-height: 12px;
}



/* -----/common--------------------------------- */

.read-area0 {
	margin: 20px auto 20px;
	width: 80%;
	padding: 10px 13px;
	border: 6px dotted #999;
	background-color: #fff;
}
.read-area1 {
	margin: 10px auto 30px;
	width: 92%;
	padding: 10px 13px;
	/*border: 6px dotted #aaa;*/
	background-color: #fff;
}
.read-area2 {
	margin: 50px auto 20px;
	width: 80%;
	padding: 10px 13px;
	border: 6px dotted #999;
	background-color: #fff;
}
.read-area3 {
	margin: 30px auto 50px;
	width: 80%;
	padding: 10px 13px;
	border: 6px dotted #99c;
	background-color: #f8f8ff;
}
.read-area4 {
	margin: 30px auto 50px;
	width: 80%;
	padding: 10px 13px;
	border: 6px dotted #c99;
	background-color: #fff8f8;
}

h2 {
	width: 100%;
	border: none;
	/*background: url(image1909fanfesta_ent/titleBg.jpg) no-repeat;*/
	margin: 20px 0 25px 0;
	padding: 22px 0 24px 0;
	font-size: 38px;
	color: #53C1F0;
	text-align: center;
}

/* -----contents--------------------------------- */

.contents {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
}

.contents-inner {
	margin: 0px auto;
	padding: 0px;
	width: 98%;
	font-size: 120%;
}

.contents-inner h2 {
	margin: 20px auto;
	margin-top: 30px;
	/*border-left: 4px solid #0000aa;*/
	padding: 10px 0px;
	width: 100%;
	font-size: 150%;
	font-weight: bold;
	line-height: 1.2em;
	color: #fff;
	/*background: url(./icon_h2_quest.png) left top repeat-x;*/
	background-color: #004477;
	min-height: 1.2em;
}

/* -----quest--------------------------------- */

.contents-inner .quest {
	background-color: #eef2ff;
	font-size: 115%;
	margin-bottom: 12px;
	padding: 3px 0px 3px 5px;
	width: 100%;
}
.contents-inner .quest span {
	font-weight: bold;
	margin-right: 7px;
	color: #66AAFF;
}
.contents-inner .quest span.require {
	font-size: 80%;
	margin-left: 7px;
	color: #FF6600;
}
.contents-inner .quest span.multi {
	font-size: 80%;
	margin-left: 7px;
	color: #CC6666;
}

.contents-inner .quest-sub {
	background-color: #eee;
	margin: 10px 0px 0px 5%;
	padding: 6px 3px 6px 6px;
	width: 95%;
	font-size: 100%;
}


.contents-inner .answer {
	margin-bottom: 30px;
	width: 100%;
	line-height: 1.5em;
}
.contents-inner .answer-sub {
	margin: 0px 0px 0px 5%;
	width: 95%;
	margin-bottom: 30px;
	line-height: 1.5em;
}
.contents-inner .answer-sub span {
	font-weight: bold;
	margin-right: 7px;
}


.contents-inner .answer-sub span {
	font-weight: bold;
	margin-right: 7px;
}

.contents-inner .attention {
	background-color: #eee;
	font-size: 80%;
	margin: 20px 0px;
	padding: 0px 0px 0px 5px;
	width: 100%;
}

.img_wallpaper {
	margin: 10px auto;
	max-width: 80%;
}

/* -----table1--------------------------------- */

#form-table1 {
	margin: 0px auto;
	padding: 0px;
	width: 95%;
	font-size: 100%;
	background-color: #fff;
	/* border: 1px solid #666666; */
}
#form-table1 th{
	/*white-space: nowrap;*/
	font-weight: normal;
	background-color: #d7ebff;
	padding: 8px;
}
#form-table1 td{
	background-color: #eee;
	text-align: left;
	padding: 8px;
}


/* -----table common--------------------------------- */

span.require {
	font-size: 80%;
	margin-left: 7px;
	color: #FF6600;
}

input.app-txt{
	width: 70%;
	padding: 5px;
	margin:0px 10px 0px 5px;
	font-size: 130%;
	border: 1px solid #aac;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
input.app-pref{
	width: 120px;
	padding: 5px;
	margin:0px 10px 0px 5px;
	font-size: 130%;
	border: 1px solid #aac;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

input.app-zip{
	width: 140px;
	padding: 5px;
	margin:0px 10px 0px 5px;
	font-size: 130%;
	border: 1px solid #aac;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
input.app-radio{
	/* width: 55%; */
	padding: 5px;
	margin:0px 10px 0px 15px;
	border: 1px solid #aac;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

input.app-tel{
	width: 70%;
	padding: 5px;
	margin:0px 10px 0px 5px;
	font-size: 130%;
	border: 1px solid #aac;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
input.app-age{
	/* width: 55%; */
	margin:0px 10px 0px 5px;
	padding: 5px;
	font-size: 130%;
	border: 1px solid #aac;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

textarea{
	margin:0px 10px 0px 5px;
	padding: 5px;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}


/* -------------------------------------- */

#form_btn {
	display: block;
	margin: 35px auto;
	padding: 0.5em 1em;
	font-size: 150%;
}
#form_btn2 {
	display: block;
	margin: 35px auto 15px;
	padding: 0.5em 1em;
	font-size: 150%;
}
#form_btn_small {
	display: block;
	margin: 0px auto 35px;
	padding: 0.3em 1em;
	font-size: 80%;
}

.attention {
	background-color: #eee;
	margin: 20px 0px;
	padding: 12px 16px;
	width: 100%;
	font-size: 80%;
}

/* -------------------------------------- */


@media only screen and (max-width:480px) {
	body { font-size: 12px; background-image: none; }
/*	#header { width: 320px; }
	#main { width: 320px; }
	.footer { width: 320px; } */

	.contents-inner { font-size: 100%; }
	input.app-txt{ width:90%; }
	.head-sublogo-sp { display: none; }
	.head-logo-special { display: none; }
	div.header_progress { width: 96%; }
	.read-area1 { width: 90%; padding: 10px 4px;}
	#form-table1 { width: 100%; padding-left: 0px; }
	#form-table1 th{ width: 40% }
	.img_wallpaper   { max-width: 92%; }
	.img_wallpaper_h { max-width: 55%; }
}

@media only screen and (min-width:480px) and (max-width:640px) {
	body { font-size: 12px; background-image: none; }
/*	#header { width: 480px; }
	#main { width: 480px; }
	.footer { width: 480px; } */

	.contents-inner { font-size: 110%; }
	input.app-txt{ width:90%; }
	.head-logo-special { display: none; }
	.img_wallpaper   { max-width: 92%; }
	.img_wallpaper_h { max-width: 55%; }
}

@media only screen and (min-width:640px) and (max-width:768px) {
	body { font-size: 14px; background-image: none; }
/*	#header { width: 640px; }
	#main { width: 640px; }
	.footer { width: 640px; } */

	.contents-inner { font-size: 115%; }
	input.app-txt{ width:90%; }
	.img_wallpaper   { max-width: 86%; }
	.img_wallpaper_h { max-width: 50%; }
}


@media only screen and (min-width:768px) and (max-width:920px) {
	body { font-size: 14px; }
/*	#header { width: 768px; }
	#main { width: 768px; }
	.footer { width: 768px; } */

	input.app-txt{ width:80%; }
}


@media only screen and (min-width:920px) {
	body { font-size: 14px; }
/*	#header { width: 920px; }
	#main { width: 920px; }
	.footer { width: 920px; } */

	input.app-txt{ width:80%; }
}



/*=================================================================================*/

/*--------------------------------------------------
　入力フォーム
--------------------------------------------------*/
div.input input[type="text"],
div.input input[type="password"],
div.input textarea,
div.input select
{
/*	border:1px solid #999999;*/
/*	background-color:#ffffff;*/
	margin:0px 10px 0px 5px;
}

td input[type="text"]:focus,
td input[type="password"]:focus,
td textarea:focus,
td select:focus
{
	background-color:#ffffdd;
}



/*=================================================================================*/