/* reset */
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;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}
a{text-decoration:none;}
br{clear:both;}
input:not([type='checkbox']):not([type='radio']){
	padding:0.5rem;
}
input[type='text'],
input[type='password'],
input[type='tel'],
textarea{
	border:0.1rem solid #999;
	font-size:18px;
	padding:0 0.2rem;

}
input[type="submit"],
input[type="button"],
button {
	font-size:1.6rem;
	border-radius: 0;
	-webkit-box-sizing: content-box;
	-webkit-appearance: button;
	appearance: button;
	border: solid 0.1rem #999;
	box-sizing: border-box;
	cursor: pointer;
	background-color:#eee;
}

html{
/*デフォルトの16pxの代わりに、1emが10pxになるように調整する (16px * 0.625 = 10px)*/
	font-size:62.5%;
	font-family: "MS PGothic", "Osaka", Arial, sans-serif;
	line-height:1.5;
}
body{
	font-size:1.6em;/*16pxになる*/
}
	.title{
		width:64%;
		margin:2rem;
		left:0;right:0;top:0;bottom:0;
	/*	background:#ccc;*/
		display:inline-block;
		vertical-align:middle;
		color:#fff;
	}
	#btn_menu{
		vertical-align:middle;
		background:rgba(0,0,0,0.2);
		display: inline-block;
		position: relative;
		width: 4rem;
		height: 4rem;
		margin: 1rem;
	}
	#icon_menu{
		display: block;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    width: 1.8rem;
	    height: 0.2rem;
	    margin: -0.1rem 0 0 -0.8rem;
	    background: #fff;
	    transition: .2s;
	}
	#icon_menu:before,
	#icon_menu:after {
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 1.8rem;
		height: 0.2rem;
		background: #fff;
		transition: .3s;
	}
	#icon_menu:before {margin-top: -0.7rem;}
	#icon_menu:after {margin-top: 0.5rem;}

	.close #icon_menu {
	    background: transparent;
	}
	.close #icon_menu:before {
	    transform: rotate(-45deg);
	    -webkit-transform: rotate(-45deg);
	}
	.close #icon_menu:before,
	.close #icon_menu:after {
	    margin-top: 0;
	}
	.close #icon_menu:after {
		transform: rotate(-135deg);
		-webkit-transform: rotate(-135deg);
	}
	.close #menu_panel {
		display:block !important;
		-webkit-animation: 'view_panel' .3s ease 0s 1 normal forwards;
	}
	.pre #menu_panel {
		display:block !important;
		-webkit-animation: 'hide_panel' .3s ease 0s 1 normal forwards;
	}
	@-webkit-keyframes 'view_panel' {
		0%	{height: 0px;}
		/* li:height=5rem * 3link + ((border:0.1 * 3) + 0.1) = 15.4*/
		/* li:height=5rem * 4link + ((border:0.1 * 4) + 0.1) = 20.5*/
		/* li:height=5rem * 5link + ((border:0.1 * 5) + 0.1) = 25.6*/
		100%{height: 25.6rem;}
	}
	@-webkit-keyframes 'hide_panel' {
		0%	{height: 25.6rem;}
		100%{height: 0px;}
	}
	#menu_panel{
		width: 100%;
		display: none;
		overflow: hidden;
	}
	#menu_panel ul{
/*		background: #bbb;*/
		text-align: left;
	}
	#menu_panel li{
		height: 5rem;
		border-top: 0.1rem solid #000;
		line-height: 3;
	}
	#menu_panel li:last-child{
		border-bottom: 0.1rem solid #000;
	}
	#menu_panel li a{
		position: relative;
		display: block;
		margin-left: 3rem;
		color: #fff;
	}
	#menu_panel li a:before{
		display: inline-block;
		content: "";
		position: relative;
		top: 50%;
		left: -1rem;
		width: 0.6rem;
		height: 0.6rem;
		border-top: solid 0.2rem #fff;
		border-right: solid 0.2rem #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	#menu_panel li.page-now{
		background:rgba(255,255,255,0.3);
	}
	.inner {
		margin:2rem;
	}
	.inline {
		display:inline-block;
	}
	.block {
		display:block;
		width: -webkit-fill-available;
	}
	.nowrap {
		white-space:nowrap;
	}
	.login{
		width:260px;
		height:100px;
		margin:auto;
		margin-top: 2rem;
		/*
		top:-20rem;bottom:0;left:0;right:0;
		position:absolute;
		*/
	}
	table {
		border:solid 1px #aaa;
	}
	.login td{padding:1rem;text-align:center;}

	.loading {
		color:#fff;
		-webkit-animation: anim_loading 1.5s linear 0s infinite;
	}
		@-webkit-keyframes 'anim_loading' {
			0%	{background:rgb(255,0,0);}
			33%	{background:rgb(0,255,0);}
			66% {background:rgb(0,0,255);}
			100%{background:rgb(255,0,0);}
		}
	
	.block_button{
		border: 0.1rem solid #999;
		border-radius: 0.5rem;
		padding: 2rem;
		display: block;
		text-align: center;
		background-color: #5b5;
		color: #fff;
	}
	button.block_button {
		width:100%;
	}
	.inner .head {
		background-color: #aaa;
		color:#fff;
		padding:1rem;
	}
	.inner .body {
		background-color: #ddd;
		padding:1rem;
	}
	/*-------------------------------------------*/
	.inputlist .label {
		vertical-align: top;
		padding:1rem;
		position: relative;
	}
	.inputlist .label button{
		right:1rem;
		position: absolute;
		top: 50%;
    -webkit-transform: translateY(-50%);
	}
	.inputlist .input {
		padding:1rem;
		background-color:#fff;
		color:#000;
	}
	.inputlist .input input{
		width: 100%;
	}
	.maincolor {
    background-color: #55a;
    color: #fff;
	}
	.inputlist .input{
		border:0.1rem solid #55a;
	}
/*---------------------------------------------------------------------------*/
/* 幅広系 */
@media screen and (min-aspect-ratio:321/480){
	#content{
		width:80%;
		max-width:800px;
		margin:1rem auto;
	}
	.title{
		display:block;
		padding: 2rem;
		margin: 0;
	}
	#btn_menu{display:none;}
	#menu_panel {
	    display: block !important;
	}
	#menu_panel ul{
		background: transparent;
		text-align:center;
	}
	#menu_panel li{
		display:inline-block;
		width:18%;
		max-width:20rem;
		border:none !important;
		/*background:#999;*/
	    border-top-left-radius: 1.0rem;
		border-top-right-radius: 1.0rem;
	}
	#menu_panel li a{
		margin:0;
	}
	#menu_panel li a:before{
		border:none !important;
	}
	/*-------------------------------------------*/

}