@charset "UTF-8";

body{
	font-family:
		Meiryo, /* Windows用 */
		"ヒラギノ角ゴシック",	/* Mac用 */
		serif;
	margin: 0;
	padding: 0;
	background-repeatX: no-repeat;
	background-size: 90% 200%;
	background-attachment: fixed;
}

p{
	font-size: 18px;
	line-height: 1.4;
}

h1, h2{
	font-weight: bold;
}

h1{
	margin: 0 0 10px;
}

h2{
	font-size: 24px;
	margin-bottom: 16px;
}

h3{
	font-size: 18px;
	margin: 0 0 10px;
}

hr {
	height: 8px;
	border: 0;
	background-size: 8px 8px;
}

textarea {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	height: 100px;
	letter-spacing: 1px;
	padding: 2px;
}



.messe_area{
	font-size: 15px;
	font-weight: bold;
	box-sizing: border-box;
	height: 100px;
	letter-spacing: 1px;
}


input[type="text"] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 300px;
	letter-spacing: 1px;
}

input[type="number"] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 300px;
	letter-spacing: 1px;
}

input[type="password"] {
	font: 15px/24px sans-serif;
	box-sizing: border-box;
	width: 300px;
	letter-spacing: 1px;
}

input[type="radio"] {
	display: none;
}

label {
	cursor: pointer;
	padding: 10px;
	display: inline-block;
	margin-right: 10px;
}


span[name="get_abl_name"] {
	width: 150px;
	display:inline-block;
}

div[name="battle_log"] {
	position: fixed;
	transition: transform 2s ease-in, opacity 2s ease-in;
	user-select: none;       /* 標準 */
	-webkit-user-select: none; /* Safari対応 */
	-moz-user-select: none;    /* Firefox対応 */
	-ms-user-select: none;     /* IE対応 */
	cursor: url('../PIC/sozai/hit_cur.png'), auto;
}

#id_battle_ani {
	user-select: none;       /* 標準 */
	-webkit-user-select: none; /* Safari対応 */
	-moz-user-select: none;    /* Firefox対応 */
	-ms-user-select: none;     /* IE対応 */
}

.over_ani {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-size: 148px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

select {
	font-size: 20px;
	line-height: 1.8;
	padding: 3px 5px;
}

a {text-decoration: none;}

table .gr_table{
	border-collapse:collapse;
	border-spacing:0;
	empty-cells:show;
	font-size: 12px;
}
.gr_table th{
	background-position:left top;
	padding:0.3em 1em;
	text-align:center;
}
.gr_table td{
	padding:0.3em 1em;
}

.header {
	font-family: Arial, sans-serif;
	height: 50px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 5;
}

.header img{
	width: 500px;
	height: 50px;
}
.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	margin: 0 auto;
	max-width: 960px;
	padding: 0 20px;
}

.nav ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav ul li {
	margin-left: 20px;
}

.nav ul li a {
	text-decoration: none;
	padding: 14px 6px;
}

.main {
	padding-top: 60px;
}

.footer {
	bottom: 0;
	height: 16px;
	position: fixed;
}

.footer p {
	font-size: 14px;
	line-height: 16px;
	margin: 0;
	text-align: center;
}


.button_flat{
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	padding: 2px 4px;
	margin: 0px 5px;
	transition: background-color 0.3s ease;
}

.equip_button{
	float: left;
}

.PT_BK{
	cursor: pointer;
	padding: 6px 2px;
}

.PT_BK:hover{
	font-weight: bold;
}

.PT_GR{
	cursor: pointer;
}

.box_flat{
	cursor: pointer;
	position: relative;
	font-size: 16px;
	margin: 10px;
	padding: 10px 15px 10px 15px;
	transition: background-color 0.3s ease;
	width: 222px;
	min-height:250px;
	line-height: 1.8;
}

.box_flat > img{
	margin-left: 10px;
}

.box_flat:hover{
	padding: 9px 14px 9px 14px;
}

.box_flat::before {
	content: "";
	position: absolute;
	top: -5px;
	right: -14px;
	width: 40px;
	height: 20px;
	transform: rotate(225deg);
}

.box_del{
	font-size: 16px;
	margin: 5px;
	padding: 0px 10px 10px 21px;
	transition: background-color 0.3s ease;
	width: 222px;
	min-height:250px;
	line-height: 1.8;
}

.mission_link{
	cursor: pointer;
	font-size: 16px;
	margin: 5px;
	padding: 0px 0px 0px 10px;
	transition: background-color 0.3s ease;
	width: 250px;
	height:100px;
	line-height: 1.8;
}

.mission_window{
	position: relative;
	margin: 5px;
	padding: 25px;
	background-repeat: no-repeat;
	background-size:100% 100%;
	width: 90%;
}

.mission_str{
	position: relative;
}

.over_mission {
	position: absolute;
	top: 0;
	object-fit: cover;
	transform: rotate(30deg);
	z-index: 10;
	pointer-events: none;
}

.box_flat:hover .over_mission{
	opacity: 0.1;
}

.falling {
	transition: transform 7s ease;
	transform: translateY(100px);
	opacity: 0;
}

.sliding {
	transform: translateX(500px);
	opacity: 0;
}


.m_pic{
	width: 200px;
	height: 80px;
}

.retry{
	float: left;
	border-radius: 4px;
	cursor: pointer;
	font-size: 20px;
	margin: 5px;
	padding: 0;
	transition: background-color 0.3s ease;
	width: 266px;
	height:35px;
	line-height: 1.8;
}

.m_menu{
	float: left;
	font-size: 20px;
	margin: 5px;
	padding: 0;
	line-height: 1.8;
}

.slot_option_menu {
	padding: 5px;
	margin-right: 5px;
}

.slot_option_back {
	margin-top: 20px;
	padding: 5px;
}

.asen_parts{
	float: left;
	margin: 5px;
	padding: 5px 10px 19px 5px;
}

.sort_w{
	float: left;
	margin-top: 5px;
	margin-left: 3px;
	padding: 1px 15px 1px 15px;
}

.logintable{
	width: 300px;
	height: 200px;
}

.login_width{
	font-size: 16px;
	padding: 0;
	width: 70px;
	height: 20px;
}

.cy_title{
	font-size: 24px;
	font-weight: bold;
	line-height: 2.3;
	padding: 3px 7px;
	border-radius: 4px;
}

.spec_palam {
	font-size: 16px;
	padding: 5px;
	margin: 5px;
	width: 165px;
	height: 20px;
}

.spec_box {
	font-size: 12px;
	padding: 9px;
	margin-top: 2px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 9px;
}

.st_num_area {
	width: 70px;
	display:inline-block;
	text-align:right;
}

.spec_mater {
	display:inline-block;
}

.spec_mater_min {
	display:inline-block;
}

.grey_flat{
	padding: 3px 7px;
	border-radius: 4px;
	margin: 9px;
}

.abl_button{
	padding: 3px 7px;
	border-radius: 4px;
	margin: 9px;
}

.word_set_width {
	float: left;
	font-size: 24px;
	padding: 0;
	width: 450px;
	height: 35px;
}

.word_set_show {
	float: left;
	margin: 15px;
}

.word_set_show h3 {
	float: left;
	font-size: 24px;
	padding: 0;
	width: 570px;
	height: 30px;
}

.word_set_show h3 .AL_TOP {
	margin-left: 8px;
}

.time_money{
	padding: 5px;
	margin: 5px;
}

.money_show{
	padding-top: 15px;
	padding-left: 38px;
	padding-bottom: 1px;
	padding-right: 30px;
	margin-bottom: 60px;
	position: relative;
}

.clock{
	width: 120px;
	height: 240px;
	border-top-right-radius: 120px;
	border-bottom-right-radius: 120px;
	position: absolute;
	left: 5px;
}

.clock_lv{
	position: absolute;
	top: 80px;
	left: 0;
	display:inline-block;
}

.clock_less{
	position: absolute;
	top: 150px;
	left: 25px;
	display:inline-block;
}



.stick_now {
	width: 4px;
	height: 60px;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0px 120px;
	transform: rotate(0deg);
	opacity: 0.6;
}

.stick {
	width: 2px;
	height: 25px;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0px 120px;
	opacity: 0.6;
}

.stick:nth-child(1) { transform: rotate(0deg); }
.stick:nth-child(2) { transform: rotate(30deg); }
.stick:nth-child(3) { transform: rotate(60deg); }
.stick:nth-child(4) { transform: rotate(90deg); }
.stick:nth-child(5) { transform: rotate(120deg); }
.stick:nth-child(6) { transform: rotate(150deg); }
.stick:nth-child(7) { transform: rotate(180deg); }

.stick_min {
	width: 1px;
	height: 10px;
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0px 120px;
	opacity: 0.4;
}

.stick_min:nth-child(8) { transform: rotate(5deg); }
.stick_min:nth-child(9) { transform: rotate(10deg); }
.stick_min:nth-child(10) { transform: rotate(15deg); }
.stick_min:nth-child(11) { transform: rotate(20deg); }
.stick_min:nth-child(12) { transform: rotate(25deg); }

.stick_min:nth-child(13) { transform: rotate(35deg); }
.stick_min:nth-child(14) { transform: rotate(40deg); }
.stick_min:nth-child(15) { transform: rotate(45deg); }
.stick_min:nth-child(16) { transform: rotate(50deg); }
.stick_min:nth-child(17) { transform: rotate(55deg); }

.stick_min:nth-child(18) { transform: rotate(65deg); }
.stick_min:nth-child(19) { transform: rotate(70deg); }
.stick_min:nth-child(20) { transform: rotate(75deg); }
.stick_min:nth-child(21) { transform: rotate(80deg); }
.stick_min:nth-child(22) { transform: rotate(85deg); }

.stick_min:nth-child(23) { transform: rotate(95deg); }
.stick_min:nth-child(24) { transform: rotate(100deg); }
.stick_min:nth-child(25) { transform: rotate(105deg); }
.stick_min:nth-child(26) { transform: rotate(110deg); }
.stick_min:nth-child(27) { transform: rotate(115deg); }

.stick_min:nth-child(28) { transform: rotate(125deg); }
.stick_min:nth-child(29) { transform: rotate(130deg); }
.stick_min:nth-child(30) { transform: rotate(135deg); }
.stick_min:nth-child(31) { transform: rotate(140deg); }
.stick_min:nth-child(32) { transform: rotate(145deg); }

.stick_min:nth-child(33) { transform: rotate(155deg); }
.stick_min:nth-child(34) { transform: rotate(160deg); }
.stick_min:nth-child(35) { transform: rotate(165deg); }
.stick_min:nth-child(36) { transform: rotate(170deg); }
.stick_min:nth-child(37) { transform: rotate(175deg); }

.shop_menu{ 
	display:inline-block;
	font-weight:bold;
	line-height: 16px;
}

.shop_menu > img{ 
	margin-right: 5px;
}

.shop_str{
	width: 50%; 
	display:inline-block;
}
.shop_money{font-weight:bold;}


.messe{
	font-weight:bold;
	background-repeat: no-repeat;
	background-size:100% 100%;
	vertical-align: top;
	padding: 6px;
	padding-left:18px;
	padding-right:18px;
	padding-bottom:12px;
	margin-top: 3px;
	margin-bottom: 3px;
	float: left;
	text-align: left;
}


.noimgicon{
	content: " ";
	background-repeat: no-repeat;
	background-size:100% 100%;
}

.noimgparts{
	content: " ";
	background-repeat: no-repeat;
	background-size:100% 100%;
}

.void_slot{
	content: " ";
	background-repeat: no-repeat;
	background-size:100% 100%;
}

.st_icon_spec{
	float: left;
	content: " ";
	background-repeat: no-repeat;
	background-size:100% 100%;
	width: 18px;
	height: 18px;
	margin-right: 3px;
	vertical-align:bottom;
}

.st_icon{
	float: left;
	content: " ";
	background-repeat: no-repeat;
	background-size:100% 100%;
	width: 18px;
	height: 18px;
	margin-top: 5px;
	vertical-align:bottom;
}

.st_icon_min{
	float: left;
	content: " ";
	background-repeat: no-repeat;
	background-size:100% 100%;
	width: 12px;
	height: 12px;
	margin-top: 2px;
}

.st_menu{
	float: left;
	width: 60px;
	text-align:left;
}

.ene_spec_info{
	float: left;
	width: 100px;
	height: 118px;
	text-align:left;
}

.machine_lv{
	margin: 5px;
	padding: 10px;
	height: 130px;
}

.ene_palam{
	float: left;
	width: 70px;
	height: 102px;
	padding: 8px;
	line-height: 17px;
	margin-bottom:5px;
}

.ene_add_info{
	float: left;
	width: 170px;
}

.order_menu{
	float: left;
	width: 80px;
	text-align:left;
}

.order_set{
	float: left;
	width: 130px;
	text-align:left;
}

.setting_menu{
	float: left;
	width: 150px;
	text-align:left;
}

.scene_menu{
	float: left;
	width: 300px;
	text-align:left;
}

.icon{
	float: left;
	margin-right:5px;
	margin-top: 3px;
	vertical-align:middle;
}

.icon_info{
	float: left;
	margin-right:5px;
	margin-top: 3px;
	vertical-align:middle;
}

.w_icon{
	width: 40px;
	height: 40px;
}

.menu_icon{
	width: 24px;
	height: 24px;
	vertical-align: middle;
}

.keep{
	width: 24px;
	height: 24px;
	float: left;
}
.pic_show{
	width: 600px;
	height: 200px;
}

.pic_chat{
	width: 250px;
	height: auto;
}

.pic {
	height: auto;
}

.slot_name{
	font-size: 14px;
	font-weight:bold;
	line-height: 1;
	margin-left: 2px;
}

.slot_log{
	float: left;
	cursor: pointer;
}
.slot_option{
	width: 280px;
	margin-right: 200px;
	text-align: right;
}

.parts_name{
	font-size: 18px;
	font-weight:bold;
	float: left;
}

.asen_spec{
	margin-bottom: 8px;
}

.asen_spec p{
	margin: 3px 5px;
}

.get_skill{
	width: 180px;
	height: 60px;
	margin-right: 10px;
}

.show_type{ font-size: 12px; display:inline-block; float: left;}
.show_st{ font-size: 12px; display:inline-block; float: left;}
.show_atk{ font-size: 12px; display:inline-block; float: left;}
.show_skill{ font-size: 12px; display:inline-block; float: left;}
.show_abl{ font-size: 12px; display:inline-block; float: left;}
.show_maker{ font-size: 12px; display:inline-block; float: left;}
.show_new{ font-size: 12px; display:inline-block; float: left;}

.mail_view {
	min-height: 800px;
	margin-left: 10px;
}

.prof {
	float: left;
	width: 250px;
	min-height: 400px;
	max-height: 2800px;
	margin: 5px;
}

.prof_waku {
	float: left;
	width: 250px;
	min-height: 400px;
	max-height: 2800px;
	margin: 5px;
}

.prof_log {
	float: left;
	padding: 10px;
}

.prof_log > p{
	text-decoration: underline;
	text-decoration-color: #666666;
	text-underline-offset: 3px;
}


.mail_menu{
	width: 200px;
	height: 800px;
	overflow-y: auto;
	overflow-x: hidden;
}

.max_vit{
	font-weight:bold;
	font-size: 11px;
	margin-right: 2px;
	margin-left: 2px;
}

.max_spd{
	font-weight:bold;
	font-size: 11px;
	margin-right: 2px;
	margin-left: 2px;
}

.max_hit{
	font-weight:bold;
	font-size: 11px;
	margin-right: 2px;
	margin-left: 2px;
}

.max_en{
	font-weight:bold;
	font-size: 11px;
	margin-right: 2px;
	margin-left: 2px;
}

.hp_all{
	font-weight:bold;
	font-size: 11px;
	margin-right: 2px;
	margin-left: 2px;
}

.max_skill{
	font-weight:bold;
	font-size: 10px;
	margin-right: 2px;
	margin-left: 5px;
}

.battle_head{
}

.battle_foot{
	margin-top: 80px;
	margin-left: 60px;
}

.apgage{
	position: relative;
	float: right;
	margin-left: -5px;
	margin-top: 3px;
	margin-bottom: 30px;
	width: 200px;
	height 60px;
}

.apgage_bk{
	position:absolute;
	widht: 200px;
	height: 60px;
	right: 0;
	top: 0;
}

.apgage_main{
	position: absolute;
	right: 0;
	top: 0;
}

.apgage_dmg{
	position: absolute;
	right: 0;
	top: 0;
}

.apgage_on{
	position: absolute;
	width: 200px;
	height: 60px;
	right: 0;
	top: 0;
}

.time_box{
	float: left;
	width: 120px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	text-align:right;
}

.time_atk{
	float: left;
	min-height: 120px;
	margin-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

.atk_log {
	padding-left: 15px;
	padding-right: 15px;
}

.atk_log > .pic {
	height: auto;
}

.buff_log {
	margin: 5px;
	padding-left: 21px;
	padding-top: 5px;
	min-height: 32px;
	line-height: 27px;
	font-size: 14px;
	vertical-align:middle;
}

.def_log {
	margin: 5px;
	padding-left: 21px;
	padding-top: 5px;
	padding-bottom: 5px;
	min-height: 32px;
	line-height: 18px;
	font-size: 14px;
	vertical-align:middle;
}

.pin_log {
	margin: 5px;
	min-height: 32px;
	line-height: 15px;
	font-size: 14px;
}

.shop_info {
	background-repeat: no-repeat;
	background-position: right bottom;
	font-size: 32px;
	margin: 5px;
	height: 150px;
	padding-left: 15px;
	vertical-align:middle;
}

.shop_log {
	margin: 5px;
	padding: 5px;
	width: 300px;
	display: inline-block;
	float: left;
}

.big_shop {
	height: 100px;
}

.mid_shop {
	height: 50px;
}

.cy_box {
	margin: 5px;
	padding: 15px;
}

.cy_over{
	position: absolute;
	background-repeat: no-repeat;
	background-size:100% 100%;
	width: 100%;
	height: 100%;
	right: 0;
	top: 0;
	opacity: 0.6;
}

.w_name{
	margin: 5px;
	padding: 5px;
	font-weight: bold;
}

.gr_base {
	padding: 5px;
}

.red_color_bar {
	padding-left: 5px;
}

.blue_color_bar {
	padding-left: 5px;
}

.prof_box{
	float: left;
	width: 260px;
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: center;
}

.prof_main{
	float: left;
	width: 600px;
	min-height: 400px;
	margin-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

.item_void{
	float: left;
	margin: 5px;
	padding: 5px 10px 19px 5px;
	position: relative;
}

.item_void > icon{
	width: 25px;
	height: 25px;
}

.item_overlay{
	position: absolute;
	bottom: 1px;
	right: 1px;
	font-size: 14px;
	line-height: 14px;
	font-weight:bold;
}

.item_overlay_2{
	position: absolute;
	top: 1px;
	right: 1px;
	font-size: 21px;
	line-height: 21px;
	font-weight:bold;
}

.del_mark{
	font-family:
		"游明朝", /* Windows用 */
		"ヒラギノ明朝",	/* Mac用 */
		serif;
	position: absolute;
	top: 3px;
	left: 3px;
	font-size: 32px;
	line-height: 32px;
	font-weight:bold;
}

.eq_tag {
	font-size: 8px;
	line-height: 9px;
	font-weight:bold;
}

.atktxt {
	font-size: 24px;
	line-height: 25px;
	font-weight:bold;
	margin-top: 5px;
}

.scene {
	opacity: 0; 
	transform: scaleX(0); 
	transform-origin: right;
	transition: opacity 0.5s ease-out,  transform 0.5s ease-out;
	padding: 8px;
	margin-bottom: 5px;
}

.scene.visible {
	opacity: 1; 
	transform: scaleX(1); 
}

.scene.no_morph {
	opacity: 1; 
	transform: none; 
	transform-origin: right;
	transition: none;
}

.ap_sup { 
	display: inline-block; 
	position: relative; 
	padding-bottom: 15px;
	margin-top: 30px;
	margin-bottom: 10px;
} 

.ap_sup::after { 
	content: ''; 
	position: absolute; 
	left: 50%; 
	bottom: 0; 
	width: 0; 
	height: 13px; 
	transition: width 0.3s, left 0.3s; 
} 

.ap_sup.animate::after { 
	width: 100%; 
	left: 0; 
}

.ap_sup.no_morph::after { 
	display: none; 
}

.ap_sup_overlay { 
	position: absolute; 
	left: 0; 
	bottom: -12px; 
	display: none; 
	font-size: 42px;
	font-weight:bold; 
	z-index: 1;
}

.ap_sup_overlay.no_morph { 
	display: none; 
}

.shoot{
	position: absolute; 
	left: 40%; 
	bottom: -50px; 
	display: none; 
	z-index: 2;
	opacity: 0; 
	transform: scale(0); 
}

.shoot.morph{
	display: block; 
	width: 400px; 
	height: 400px;
	opacity: 0.6; 
	transform: scale(0.2); 
	transition: opacity 0.4s ease-out,  transform 0.4s ease-out;
}

.shoot.morph_1{
	display: block; 
	width: 400px; 
	height: 400px;
	opacity: 0.8; 
	transform: scale(0.4); 
	transition: opacity 0.6s ease-out,  transform 0.6s ease-out;
}

.shoot.morph_2{
	display: block; 
	width: 400px; 
	height: 400px;
	opacity: 1; 
	transform: scale(0.6); 
	transition: opacity 0.8s ease-out,  transform 0.8s ease-out;
}

.slash{
	position: absolute; 
	left: 40%; 
	bottom: -50px; 
	display: none; 
	z-index: 2;
	opacity: 0; 
	transform: scale(0); 
}

.slash.morph{
	display: block; 
	width: 400px; 
	height: 400px;
	opacity: 0.6; 
	transform: scale(0.4); 
	transition: opacity 0.4s ease-out,  transform 0.4s ease-out;
}

.slash.morph_1{
	display: block; 
	width: 400px; 
	height: 400px;
	opacity: 0.8; 
	transform: scale(0.6); 
	transition: opacity 0.6s ease-out,  transform 0.6s ease-out;
}

.slash.morph_2{
	display: block; 
	width: 400px; 
	height: 400px;
	opacity: 1; 
	transform: scale(0.8); 
	transition: opacity 0.8s ease-out,  transform 0.8s ease-out;
}

.shifteffect {
	font-size: 12px;
	line-height: 13px;
	letter-spacing: -1px;
}

.shifteffect {
	font-size: 12px;
	line-height: 13px;
	letter-spacing: -1px;
}


.CNT{ text-align:center;}
.R{ text-align:right;}
.L{ text-align:left;}
.AL_TOP{ vertical-align:top;}
.AL_MID{ vertical-align:middle;}
.AL_BOT{ vertical-align:bottom;}
.B{ font-weight:bold;}
.BIG2{ font-size: 38px;line-height: 40px;}
.BIG{ font-size: 24px;}
.SLOG{ font-size: 17px;line-height: 17px;}
.MINLOG{ font-size: 14px;line-height: 15px;}
div .MINLOG{ line-height: 16px;}
.chibi{ font-size: 11px;}
.MICRO{ font-size: 11px;line-height: 13px;letter-spacing: -1px;}
.MICRO_HALF{ font-size: 5px;line-height: 6px;letter-spacing: -1px;}
.PT{ cursor: pointer;}
.FL_L{ float: left;}
.FL_R{ float: right;}
.CL_L{ clear: left;}
.CL_R{ clear: right;}
.z_2{ z-index: 2;}
.z_5{ z-index: 5;}
.z_10{ z-index: 10;}
.IND{margin-left: 30px;}
.width_max{width: 100%;}
.width_90per{width: 90%;}
.width_80per{width: 80%;}
.width_70per{width: 70%;}
.width_50per{width: 50%;}
.width_40per{width: 40%;}
.width_30per{width: 30%;}
.width_4 {
	display:inline-block;
}
.width_min {
	width: 200px;
	display:inline-block;
}
.width_mid {
	width: 300px;
	display:inline-block;
}
.width_abl {display:inline-block;}

.width_big {
	display:inline-block;
}
.height_90per {
	height: 90%;
}
.height_min {
	height: 150px;
	display:inline-block;
}

.height_mid {
	height: 300px;
	display:inline-block;
}

.width_150 {
	width: 150px;
	display:inline-block;
}
.IN_BRK{display:inline-block;}
.rela {position: relative;}
.BOX{ 
	width: 100%; 
	max-width: 700px; 
	min-height: 120px; 
	margin-bottom: 12px;
}
.mint{
	font-family:
		"游明朝", /* Windows用 */
		"ヒラギノ明朝",	/* Mac用 */
		serif;
}

.num_font{
	font-family:
		Arial,
		serif;
}

.long_space {letter-spacing: 4px;}
.min_space {letter-spacing: 2px;}
.less_space {letter-spacing: -1px;}
.less2_space {letter-spacing: -2px;}
.pad_big {
	padding-top: 60px;
	padding-bottom: 60px;
}
.pad {padding: 12px 6px;}
.pad_min {padding: 6px 2px;}
.pad_l {padding-left: 30px;}
.pad_l_min {padding-left: 15px;}
.pad_r {padding-right: 30px;}
.mar_t {margin-top: 30px;}
.mar_l {margin-left: 30px;}
.mar_r {margin-right: 30px;}
.mar_l_min {margin-left: 15px;}
.mar_t_2 {margin-top: 10px;}
.mar_b {margin-bottom: 30px;}
.mar_b_2 {margin-bottom: 10px;}
.hide{ display:none;}
.hidden{ display:none;z-index: -1;}

#id_top_login {
	height: 600px;
	background-size:300px 300px;
	margin-top: 120px;
	margin-bottom: 120px;
}

#id_bigin_1 {background-size:300px 300px;}
#id_bigin_2 {background-size:300px 300px;}
#id_bigin_3 {background-size:300px 300px;}
#id_bigin_4 {background-size:300px 300px;}
#id_bigin_5 {background-size:300px 300px;}
#id_bigin_time {background-size:300px 300px;}
#id_bigin_st {background-size:300px 300px;}

.rule_bigin_link {
	height: 300px;
	max-width:700px;
	position: relative;
	margin-top: 120px;
	cursor: pointer;
}

.rule_bigin_link > p {
	margin: 12px;
	padding-left: 20px;
	max-width: 500px;
}

.rule_bigin_link > h1 {
	margin: 12px;
	padding-top: 12px;
	padding-left: 20px;
	max-width: 400px;
}

.rule_bigin_link::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: background 0.3s ease;
}


#id_left{
	height: 100vh;
	text-align: right;
	position: fixed;
	top: 0;
	right: 75%;
	bottom: 0;
	padding-right: 20px;
	padding-top: 100px;
	margin-right: 20px;
	box-sizing: border-box;
	background-size: 70px 420px;
	width: 200px
}

#id_left .menu {
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	display:inline-block;
	padding: 8px 0px 8px 4px;
	margin-bottom: 12px;
	width: 120px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

#id_left .menu:hover {
	font-weight: bold;
}

#id_left .menu_top {
	font-size: 24px;
	line-height: 24px;
	font-weight: bold;
	text-align: left;
	display:inline-block;
	padding: 12px 4px;
	height: 80px;
	width: 120px;
	margin-bottom: 20px;
	transition: background-color 0.3s ease;
}

#id_right{
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 35px 350px;
	padding-top: 110px;
	padding-left: 40px;
	padding-right: 40px;
	position: fixed;
	top: 0;
	right: 0px;
	bottom: 0;
	text-align: right;
}

#id_set_window_1{
	padding-bottom: 200px;
}

#id_set_window_2{
	padding-bottom: 200px;
}

#id_set_window_10 {
	padding-bottom: 200px;
}

#id_set_window_30{
	min-height: 1000px;
}

#id_garage_inside{
	display: flex; 
	justify-content: flex-end; 
	align-items: flex-end; 
	position: relative;
	width: 100%;
	margin-bottom: 60px;
}

#id_set_window_10 .menu {
	font-size: 24px;
	line-height: 24px;
	text-align: left;
	display:inline-block;
	padding: 8px 0px 8px 4px;
	margin-bottom: 12px;
	width: 120px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

#id_set_window_10 .menu:hover {
	font-weight: bold;
}

#id_asen_show{
	padding-right: 3px;
	padding-left: 5px;
	padding-bottom: 10px;
	position: absolute; 
	top: 0; 
	left: 0;
}

#id_item_garage{
	margin-right: auto;
}

#id_item_container{
	margin-right: auto;
}

#id_asen_spec_show{
	margin-right: auto;
}

#id_spec_view{
	padding: 15px;
	margin-right: auto;
}

#id_w_spec_view{
	padding: 15px;
}

#id_shop_spec_view{
	padding: 15px;
}

#id_parts_spec_show{
	margin-right: 10px;
	max-height: 900px;
	overflow-y: auto;
	overflow-x: hidden;
}

#id_item_show{
	overflow-y: auto;
	overflow-x: hidden;
	margin-right: auto;
}

#id_asen_parts_now{
	width: 90%;
	padding: 10px;
}

#id_asen_parts_next{
	width: 90%;
	padding: 10px;
}

#id_spec_shift{
	height: 60px;
}

#id_dashedCircle {
	opacity: 0.6;
	z-index: 3;
}

#id_dashedCircle_inside {
	opacity: 0.4;
	z-index: 3;
}

#id_dashedCircle_inside_2 {
	opacity: 0.2;
	z-index: 3;
}

#id_dashedLine {
	opacity: 0.5;
	z-index: 3;
}

#id_dashedCircle_base {
	position: fixed;
	top: 0px; 
	left: 0px;
	z-index: 2;
	opacity: 0.5;
}


#id_item_del_box {
	position: absolute;
	margin-top: 5px;
	padding-top: 10px;
	padding-bottom: 5px;
}

#id_item_del_box > .icon {
	opacity: 0.2;
	right: 0px;
	bottom: 0px;
	position: absolute;
}

#id_item_del_box > span {
	right: 2px;
	bottom: 2px;
	position: absolute;
}

#id_mail_menu{
	width: 80px;
	height: 600px;
}

#id_prof_lv {
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-weight:bold;
	opacity: 0.2;
}

#id_machine_atk_now{
	height: 118px;
}

#id_battle_ani {
	top: 0px;
	left: 0px;
	height: 90%;
	position: fixed;
	width: 100vm;
}

#id_shop{
	background-repeat: no-repeat;
	background-position: bottom right;
}

#id_foot_menu {
	bottom: 16px;
	height: 60px;
	position: fixed;
	justify-content: space-between;
}

#id_foot_menu .menu .icon {
	float: none;
}

@keyframes shake {
	0%, 100% {
		transform: translateX(0);
	}
	20%, 60% {
		transform: translateX(-20px);
	}
	40%, 80% {
		transform: translateX(20px);
	}
}

.shake {
	animation: shake 0.3s ease;
}

.expand {
	transform-origin: right center;
	transition: transform 1s ease-out;
}

@media (max-width: 600px) {
	h1 {font-size: 24px;}
	textarea {width: 300px;}
	span[name='get_abl_name'] {display: block;}
	div[name="battle_log"] {left: 10px;}
	
	.time_money {
		display: block;
		margin-left: 120px;
		border: 1px solid cyan;
	}
	
	.clock {top: 15px;}
	.block_shift {display: block;}
	.width_shift {width: 300px;}
	.slot_log {width: 250px;}
	.machine_lv {width: 300px;}
	.shop_info {
		background-size: 100% 50%;
		width: 300px;
	}
	.time_atk {width: 90%;}
	.width_4 {width: 76px;}
	.width_big {width: 300px;}
	
	.width_abl {width: 120px;}
	
	.mail_view {width: 323px;}
	.footer {width: 300px;}
	.time_box {height: 30px;}
	.prof_log {
		width: 360px;
		margin-left: 2px;
	}
	.prof_log > textarea {font-size: 10px;}
	.prof_log > p {
		padding: 20px;
		font-size: 10px;
	}
	
	.main {
		max-width: 90vw;
		left: 0;
		right: 0;
	}
	
	.icon {
		width: 40px;
		height: 40px;
	}
	
	.icon_info > .w_icon {
		width: 60px;
		height: 60px;
	}
	
	.min_icon {
		width: 15px;
		height: 15px;
	}
	
	.item_void {
		width: 40px;
		height: 40px;
	}
	
	.asen_parts {
		width: 40px;
		height: 40px;
	}
	
	.messe {
		width: 200px;
		font-size: 12px;
		line-height: 13px;
	}
	
	.spec_mater {
		font-size: 8px;
		letter-spacing: -2px;
	}
	
	.spec_mater_min {
		font-size: 3px;
		letter-spacing: -1px;
	}
	
	.eq_tag {
		font-size: 9px;
		line-height: 10px;
	}
	
	.MID {
		font-size: 14px;
		line-height: 15px;
	}
	
	.BARLOG {
		font-size: 7px;
		line-height: 8px;
	}
	
	.MEGA {
		font-size: 36px;
		line-height: 36px;
	}
	
	.SMEGA {
		font-size: 72px;
		line-height: 72px;
	}
	
	.MINBAR {
		font-size: 10px;
		line-height: 10px;
	}
	
	.over_mission {
		width: 100px;
		height: 40px;
		left: 0;
	}
	
	.retry_pic {
		width: 300px;
		height: 75px;
	}
	.pic {width: 300px;}
	.atk_log > .pic {
		width: 250px;
	}
	.co_result > .pic {
		width: 250px;
	}
	.nikki_img > .prof {display: none;}
	
	.shop_log {width: 250px;}
	.shop_menu{
		font-size: 12px;
		width: 150px;
	}
	.shop_log > .messe {width: 200px;}
	
	#id_left {display: none;}
	#id_battle_ani {left: 2px;width: 90%;}
	#id_foot_menu {display: flex;}
	#id_item_show {
		width: 335px;
		height: 400px;
	}
	#id_parts_spec_show {width: 300px;}
	#id_garage_inside {min-height: 800px;}
	#id_asen_show {
		width: 340px;
		height: 190px;
	}
	#id_item_garage {width: 340px;margin-top: 200px;}
	#id_item_container {width: 340px;}
	#id_item_del_box {left: 340px;bottom: -50px;}
	#id_w_spec_view {width: 300px;}
	#id_shop_spec_view {width: 300px;}
	#id_shop{
		background-attachment: fixed;
		background-position: 190px bottom;
	}
	#id_asen_spec_show {
		font-size: 12px;
		margin-top: 160px;
	}
	#id_machine_atk_now {width: 100px;}
	#id_machine_atk_now > .BIG {font-size: 12px;}
	#id_machine_atk_now > .MEGA {font-size: 18px;line-height: 20px;}
	#id_nikki_in_log {
		width: 360px;
		height: 800px;
	}
}

@media (min-width: 601px) {
	h1 {font-size: 36px;}
	textarea {width: 500px;}
	span[name='get_abl_name'] {display: inline-block;}
	div[name="battle_log"] {left: 25%;}
	
	.time_money {
		display: inline-block;
		margin-left: 15px;
		border: none;
	}
	
	.clock {top: -60px;}
	.block_shift {display: inline;}
	.width_shift {width: 90%;}
	.slot_log {width: 400px;}
	.machine_lv {width: 400px;}
	.time_atk {width: 600px;}
	.width_4 {width: 60px;}
	.width_big {width: 400px;}
	.width_abl {width: 300px;}
	
	.mail_view {width: 600px;}
	.shop_info {
		background-size: 100% 100%;
		width: 600px;
	}
	.footer {width: 100%;}
	.time_box {height: 120px;}
	.prof_log {
		width: 550px;
		margin-left: 20px;
	}
	.prof_log > textarea {font-size: 15px;}
	.prof_log > p {
		font-size: 15px;
		padding: 25px;
	}
	.main {
		width: 830px;
		margin-left: 25%;
	}
	
	.icon {
		width: 60px;
		height: 60px;
	}
	
	.icon_info > .w_icon {
		width: 80px;
		height: 80px;
	}
	
	.min_icon {
		width: 20px;
		height: 20px;
	}
	
	.item_void {
		width: 50px;
		height: 50px;
	}
	
	.asen_parts {
		width: 50px;
		height: 50px;
	}
	
	.messe {
		width: 280px;
		font-size: 14px;
		line-height: 18px;
	}
	
	.spec_mater {
		font-size: 18px;
		letter-spacing: -5px;
	}
	
	.spec_mater_min {
		font-size: 8px;
		letter-spacing: -3px;
	}
	
	.eq_tag {
		font-size: 12px;
		line-height: 14px;
	}
	
	.MID {
		font-size: 19px;
		line-height: 19px;
	}
	
	.BARLOG {
		font-size: 14px;
		line-height: 15px;
	}
	
	.MEGA {
		font-size: 60px;
		line-height: 60px;
	}
	
	.SMEGA {
		font-size: 120px;
		line-height: 120px;
	}
	
	.MINBAR {
		font-size: 13px;
		line-height: 14px;
	}
	
	.over_mission {
		width: 200px;
		height: 80px;
		right: 0;
	}
	
	.retry_pic {
		width: 800px;
		height: 200px;
	}
	.pic {width: 600px;}
	.atk_log > .pic {
		width: 500px;
	}
	.co_result > .pic {
		width: 300px;
	}
	.nikki_img > .prof {display: block;}
	
	.shop_log {width: 300px;}
	.shop_menu{
		font-size: 16px;
		width: 210px;
	}
	.shop_log > .messe{ 
		display: none;
		width: 250px;
	}
	
	.shop_log:hover > .messe{ 
		display: block;
		position: absolute;
		margin-top: 20px;
		pointer-events: none;
		z-index: 4;
	}
	
	#id_left {display: block;}
	#id_battle_ani {left: 20%;width: 60%;}
	#id_foot_menu {display: none;}
	#id_item_show {
		width: 60%;
		height: 100%;
	}
	#id_parts_spec_show {width: 30%;}
	#id_garage_inside {min-height: 550px;}
	#id_asen_show {
		width: 800px;
		height: 100px;
	}
	#id_item_garage {width: 800px;margin-top: 160px;}
	#id_item_container {width: 800px;}
	#id_item_del_box {left: 860px;bottom: 3px;}
	#id_w_spec_view {width: 400px;}
	#id_shop_spec_view {width: 400px;}
	#id_shop{
		min-height: 800px;
	}
	#id_asen_spec_show {
		font-size: 16px;
		margin-top: 120px;
	}
	#id_nikki_in_log {
		width: 540px;
		height: 800px;
	}
}

@media (min-width: 1505px) {
	#id_right {
		width: 300px;
		height: 100vh;
	}
	#id_right > .right_info_button {display: none;}
	#id_right > .right_info {
		display: block;
		z-index: 2;
	}
}

@media (max-width: 1506px) {
	#id_right {
		width: auto;
		height: auto;
		pointer-events: none;
	}
	#id_right > .right_info_button {
		display: inline;
		z-index: 2;
		pointer-events: auto;
	}
	#id_right > .right_info {
		display: none;
		pointer-events: auto;
	}
}