@charset "UTF-8";


/*遠征トップページ************************************************/
#expedition {
	background:#fff;
	position:relative;
}
#expedition_area .ex_title {
	width:100%;
	height:auto;
}

.map_goal_rem {
	position:absolute;
	z-index:50;
	right:0;
	top:123px;
}
.map_goal_rem dd {
	float:right;
	width:65px;
	height:20px;
	line-height:20px;
	height:20px;
	color:#ff4382;
	font-size:10px;
	text-align:center;
	background: rgba(255,255,255,0.8);
	text-shadow:1px 1px 1px #fff,0px 1px 1px #fff,1px 0px 1px #fff,-1px -1px 1px #fff,0px -1px 1px #fff,-1px 0px 1px #fff,-1px 1px 1px #fff,1px -1px 1px #fff !important;
}
.map_goal_rem dt {
	float:right;
	width:65px;
	height:20px;
	line-height:20px;
	height:20px;
	color:#fff;
	font-size:10px;
	text-align:center;
	background: rgba(0,0,0,0.8);
}
.map_played {
	position:absolute;
	z-index:49;
	left:0;
	top:107px;
	width:320px;
	height:57px;
	padding:98px 0 0 0;
	background:url(../img/expedition/map_played.png) no-repeat left top;
	background-size:100% auto;
}
.map_played strong {
	display:block;
	width:155px;
	height:20px;
	line-height:20px;
	text-align:center;
	color:#ff4382;
	font-size:11px;
	padding:0px;
	margin:0 auto;
	background:#fff;
	border-radius:99px;
}

#expedition_area #map {
	background:url(../img/expedition/map_sample.jpg) no-repeat left top;
	background-size:320px auto;
	overflow-x: scroll;
	overflow-y: hidden;
	overflow-scrolling: touch;
	height:155px;
	position:relative;
}
#expedition_area #map #grid tr th {
	width:80px !important;
	height:155px;
	background:url(../img/expedition/field_start.png) no-repeat center 110px;
	background-size:55px auto;
	border:none;
	color:#fff;
	text-align:center;
}
#expedition_area #map #grid tr td {
	width:80px !important;
	height:155px;
	background:url(../img/expedition/field_base.png) no-repeat center 110px;
	background-size:55px auto;
	border:none;
	color:#fff;
	text-align:center;
}
#expedition_area #map #grid tr td:last-child {
	background:url(../img/expedition/field_goal.png) no-repeat center 110px;
	background-size:55px auto;
}

#expedition_area #map #grid th .icon_chara,
#expedition_area #map #grid td .icon_chara { width:80px; height:auto; padding:15px 0 0 0 }
#expedition_area #map #grid td .icon_reward { width:57px; padding:58px 12px 0 11px}
#expedition_area #map #grid td .icon_reward img { width:100%; height:auto}

#expedition_area .ex_marquee {
	overflow:hidden;
	height:18px;
	line-height:18px;
	color:#fff;
	background:#2d2d2d;
}
.info_btn_area {
	padding:10px 20px 20px 20px;
	overflow:hidden;
}
.info_btn_area .reward_info01 {
	border-top: solid 1px #c2c2c2;
	border-bottom: solid 1px #c2c2c2;
	padding:6px 0 6px 37px;
	overflow:hidden;
	background:url(../img/expedition/info_reward_title.jpg) no-repeat left 7px;
	background-size:32px auto;
}
.info_btn_area .reward_info01 img {
	width:32px;
	height:auto;
	border: solid 1px #3b3b3b;
	margin:0px;
	float:left;
}
.info_btn_area .reward_info01 figure {
	float:right;
	width:200px;
	color:#490078;
	font-size:9px;
	line-height:11px;
	padding:2px 0 0 0;
}
.info_btn_area .main_btns {
	clear:both;
	padding:9px 0 13px 0;
	overflow:hidden;
}
.info_btn_area .main_btns dt {
	float:left;
	width:84px;
}
.info_btn_area .main_btns dt div {
	display:block;
	background:#fff;
	color:#333;
	text-align:center;
	font-weight:bold;
	line-height:12px;
	font-size:12px;
	height:34px;
	padding:11px 0 0 0;
	border: solid 2px #e6e6e6;
	border-radius:5px;
	text-shadow:0 1px 1px rgba(0,0,0,0.3);
}
.info_btn_area .main_btns dt a {
	display:block;
	background:url(../img/expedition/btn_pt01.png) repeat left top;
	background-size:14px auto;
	color:#fff;
	text-align:center;
	font-weight:bold;
	line-height:12px;
	font-size:12px;
	height:34px;
	padding:11px 0 0 0;
	border: solid 2px #bcbcbc;
	border-radius:5px;
	text-shadow:0 1px 1px rgba(0,0,0,0.3);
	box-shadow:0 -2px 0 #320053 inset;
}
.info_btn_area .main_btns dd {
	float:right;
	width:189px;
}
.info_btn_area .main_btns dd a {
	display:block;
	background:url(../img/expedition/btn_pt02.png) repeat left top;
	background-size:14px auto;
	color:#fff;
	height:32px;
	padding:13px 0 0 0;
	border: solid 2px #bcbcbc;
	border-radius:5px;
	text-shadow:0 1px 1px rgba(0,0,0,0.3);
	box-shadow:0 -2px 0 #000000 inset;
	overflow:hidden;
}
.info_btn_area .main_btns dd a strong {
	float:left;
	width:103px;
	font-size:20px;
	line-height:20px;
	font-weight:bold;
	text-align:right;
}
.info_btn_area .main_btns dd a div {
	float:right;
	width:80px;
	text-align:center;
	font-size:9px;
	line-height:10px;
	padding:1px 0 0 0;
	animation: main_btn_param 2.0s ease-in-out infinite;
}
.info_btn_area .main_btns dd a div span {color:#ff0}

@keyframes main_btn_param {
	0%, 40% { opacity:1}
	50% { opacity:0.3}
	60%, 100% { opacity:1}
}

.info_btn_area .player_status01 {
	float:left;
	color:#fff;
	background:#292929;
	line-height:20px;
	height:20px;
	width:140px;
	text-align:center;
}
.info_btn_area .player_status01 span { color:#ff0}

.info_btn_area .player_status02 {
	float:right;
	line-height:20px;
	height:20px;
	text-align:right;
	color:#272727;
}
.info_btn_area .recovery {
	margin:10px 0;
	clear:both;
}
.info_btn_area .played_status {
	margin:10px 0;
	clear:both;
	text-align:center;
	color:#fff;
	font-size:12px;
	font-weight:bold;
	line-height:30px;
	height:30px;
	overflow:hidden;
	position:relative;
	background: url(../img/bg/11441.jpg) no-repeat left top;
	background-size:100% auto;
}
.info_btn_area .played_status img {
	position: absolute;
	width:100px;
	height:auto;
	top:-10px;
	right:-100px;
	animation: played_character 5.0s linear infinite;
}
@keyframes played_character {
	0%{ transform:translate(0,0)}
	100%{ transform:translate(-400px,0)}
}

.reward_info02 {
	width:300px;
	margin:0 auto;
	padding:0 0 10px 0;
}
.reward_info02 img { width:100%; height:auto;}

.multi_btns {
	display:flex;
	justify-content: space-between;
	width:290px;
	margin:0 auto 15px auto;
}
.multi_btns dd { width:138px;}

.info_howto {
	clear:both;
	padding:0 0 10px 0;
}
.info_howto img {
	width:100%;
	height:auto;
}



/*準備ページ************************************************************/
#expedition_confirm .item_select .common_btn02 {
	width:200px;
	margin:13px auto 17px auto;
}
.confirm_anim {
	margin:0px;
	clear:both;
	text-align:center;
	color:#fff;
	font-size:30px;
	font-weight:bold;
	line-height:100px;
	height:100px;
	overflow:hidden;
	position:relative;
	background: url(../img/bg/11441.jpg) no-repeat left -30px;
	background-size:100% auto;
}
.confirm_anim .chara {
	position: absolute;
	z-index:1;
	width:204px;
	height:auto;
	top:-5px;
	left:-150px;
	animation: cofirm_character 5.0s linear infinite;
	transform-origin:left top;
}
@keyframes cofirm_character {
	0%,45%{ transform:translate(0,0)}
	50%,90%{ transform:translate(60px,0)}
	100%{ transform:translate(0,0)}
}
.confirm_anim .chara2 {
	position: absolute;
	z-index:3;
	width:25px;
	height:auto;
	top:80px;
	right:-20px;
	animation: cofirm_character2 30.0s linear infinite;
	transform-origin:left top;
}
@keyframes cofirm_character2 {
	0%,80%{ transform:translate(0px,0)}
	82%,90%{ transform:translate(-40px,0)}
	92%,100%{ transform:translate(0px,0)}
}
.confirm_anim .star {
	position: absolute;
	z-index:2;
	width:15px;
	height:auto;
	top:32px;
	left:23px;
	animation: star 5.0s linear infinite;
}
@keyframes star {
	0%,60%{ transform: scale(0)}
	65%{ transform: scale(1)}
	70%,100%{ transform: scale(0)}
}

.confirm_text {
	padding:7px 0;
	text-align: center;
	line-height:16px;
	color:#fff;
	background:#2d2d2d;
}
.confirm_text strong {
	display:block;
	text-align:center;
}
.confirm_text span {
	color:#ff0;
	font-size:14px;
}


/*結果ページ************************************************************/
.result_anim {
	margin:0px;
	clear:both;
	text-align:center;
	color:#fff;
	font-size:30px;
	font-weight:bold;
	line-height:100px;
	height:100px;
	overflow:hidden;
	position:relative;
	background: url(../img/bg/11443.jpg) no-repeat left -30px;
	background-size:100% auto;
}
.result_anim img {
	position: absolute;
	width:560px;
	height:auto;
	top:100px;
	left:-127px;
	animation: result_character 3.0s linear infinite;
	transform-origin:center top;
	transform:scale(0.2)
}
@keyframes result_character {
	0%{ transform:translate(0,0) scale(0.2)}
	90%{ transform:translate(0,-220px) scale(1)}
	100%{ transform:translate(-400px,-220px) scale(1)}
}
#expedition_result .common_title03 {
	margin:0px;
}


/*テキストシナリオページ************************************************/
#sc_text_area { padding:10px; color:#fff;}
#sc_text_area .size8 { font-size:8px}
#sc_text_area .size9 { font-size:9px}
#sc_text_area .size10 { font-size:10px}
#sc_text_area .size11 { font-size:11px}
#sc_text_area .size12 { font-size:12px}
#sc_text_area .size13 { font-size:13px}
#sc_text_area .size14 { font-size:14px}
#sc_text_area .size15 { font-size:15px}
#sc_text_area .size16 { font-size:16px}
#sc_text_area .size17 { font-size:17px}
#sc_text_area .size18 { font-size:18px}
#sc_text_area .size19 { font-size:19px}
#sc_text_area .size20 { font-size:20px}

#sc_text_area .size21 { font-size:21px}
#sc_text_area .size22 { font-size:22px}
#sc_text_area .size23 { font-size:23px}
#sc_text_area .size24 { font-size:24px}
#sc_text_area .size25 { font-size:25px}
#sc_text_area .size26 { font-size:26px}
#sc_text_area .size27 { font-size:27px}
#sc_text_area .size28 { font-size:28px}
#sc_text_area .size29 { font-size:29px}
#sc_text_area .size30 { font-size:30px}
#sc_text_area .red { color:#ff0000}
#sc_text_area .yellow { color:#ffff00}
#sc_text_area .blue { color:#0000ff}
#sc_text_area hr { text-shadow:none; border: solid 1px #fff; margin:30px 0 35px 0}

#sc_text_area .center { text-align:center}
#sc_text_area .left { text-align:left}
#sc_text_area .right { text-align:right}
#sc_text_area .bold { font-weight:bold}
#sc_text_area #img01 { width:100%; height:auto; margin:25px 0;}


#sc_text_area{
	background:url(../img/expedition/sc_pt01.png) repeat left top;
	background-size:28px auto;
	font-weight:normal;
}
#sc_text_area h1{
	text-align:center;
	padding:10px 0 20px 0;
}

#sc_text_area .under_btn {
	width:200px;
	margin:0 auto;
	padding:25px 0;
}
#sc_text_area .under_btn a {
	display:block;
	border: solid 2px #fff;
	border-radius:3px;
	color:#fff;
	font-weight:bold;
	text-align:center;
	line-height:36px;
}