@charset "UTF-8";

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

	body {
		margin: 0px;
		padding: 150px 0px 0px 20%;
		background-color: #cccccc;
		background-image: url("/index-goods/bak-stickgra1.gif");
	}
	header {
		top: 0px;
		left: 0px;
		width: 100%;
		height: 150px;
		text-align: center;
		background-color: #cccccc;
		background-image: url("/index-goods/bak-stickgra1.gif");
	}

	header .logo_area {
		float:left;
		width:20%;
		color: #0065FF;
		text-align: center;
		font-size:12px;
	}

	header .header_area {
		float:right;
		width:80%;
		display: flex;
		justify-content: center;
		lign-items: center;
	}

	#sidebar {
		left: 0px;
		padding-top: 0px;
		width: 20%;
		height: 100%;
	}
	#content {
		overflow: auto;
		padding-top: 0px;
	}
	@media screen {
		header {
			position: fixed;
			z-index: 99;
		}
		#sidebar {
			position: fixed;
		}
	}

	header .logo_area a {
		text-decoration: none;
		color: #0065FF;
	}
	header .logo_area a:hover {
		text-decoration: underline;
	}

	#header_area_shortcut {
		margin-top: 30px;
	}

	#header_area_shortcut table {
		width: 143px;
		border: solid 1px #000000;
		border-collapse: collapse;
	}

	#header_area_shortcut table td {
		border: solid 1px #000000;
		color: #0000FF;
		font-size:13px;
	}

	#header_area_main {
		color:#0064FF;
	}

	#header_area_main .prefix {
		font-weight: bold;
	}

	#header_area_main .prefix .main {
		font-size:24px;
		letter-spacing:24px;
	}

	#header_area_main .titlemain {
		font-family: HGS創英角ﾎﾟｯﾌﾟ体;
	}

	#header_area_main .titlemain .title1 {
		font-size:32px;
	}

	#header_area_main .titlemain .title2 {
		font-size: 24px;
	}

	#header_area_main .english {
		font-weight: bold;
		font-size: 18px;
	}

	#header_area_main .note {
		font-size: 16px;
	}


	#header_area_logo {
		margin-top: 30px;
	}

	#header_area_logo img {
		width: 101px;
		height: 77px;
	}

	.sidebar_menulist {
		width: 100%;
		padding-left: 0;
		list-style-position: inside;
		list-style-image: url(/shared/images/botan_maru_bgr.gif);
	}
	.sidebar_menulist li {
		background: #ffff66;
		margin:2px;
		font-size: 13px;
		padding-top: 3px;
		padding-bottom: 3px;
	}

	li.bgblue {
		background: #99ccff;
	}

	.sidebar_menulist .rank2 {
		padding-left: 30px;
	}
	.sidebar_menulist .rank3 {
		padding-left: 60px;
	}

	.textblue {
		color: #0000FF;
	}
	.textred {
		color: #FF0000;
	}

	.textmemo {
		font-size: 10px;
	}

	/* 簡易レスポンシブ対応 */
	.nav-unshown {
		display:none;
	}

	#nav-open {
		display: inline-block;
		width: 30px;
		height: 22px;
		vertical-align: middle;
		margin: 10px;
		position: fixed;
		top: 30px;
		right: 0px;
		z-index: 100;
	}

	/*ハンバーガーアイコンをCSSだけで表現*/
	#nav-open span, #nav-open span:before, #nav-open span:after {
		position: absolute;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background: #555;
		display: block;
		content: '';
		cursor: pointer;
	}
	#nav-open span:before {
		bottom: -8px;
	}
	#nav-open span:after {
		bottom: -16px;
	}

	#nav-close {
		display: none;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	}

	#nav-input:checked ~ #nav-close {
		display: block;
		opacity: .5;
	}

	#nav-input:checked ~ #sidebar {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
/*------------------------------------------*/
@media screen and (max-width:893px) {
	body {
		padding: 150px 0px 0px 0px ;
	}

	header .header_area {
		width:100%;
	}

	.logo_area {
		display:none;
	}

	#header_area_shortcut {
		display:none;
	}

	#sidebar {
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 90%;
		max-width: 330px;
		height: 100%;
		background: #fff;
		transition: .3s ease-in-out;
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);
	}
}

@media screen and (max-width:480px) {
	.sphide {
		display:none;
	}

	header {
		height: 130px;
	}
	body {
		padding: 130px 0px 0px 0px ;
	}

	#header_area_main .english {
		display:none;
	}
	#header_area_main .oldname::before {
		content: "\A" ;
		white-space: pre ;
	}
}

@media screen and (min-width:894px) {
	#nav-open {
		display:none;
	}
}


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