*{

	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 100%;;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;

}


html {

	background-color: #25a;
	width: 100%;

}


body {

	background-color: rgba(40,40,60,0.4);
	color: #eee;
	border-radius: 10px;

}


p,ul,ol,dl,h2,h3 {

	line-height: 135%;
	margin: 7px 20px 10px 20px;

}

ul li, ol li {

	margin-top: 8px;

}

ul li:first-of-type, ol li:first-of-type {

	margin-top: 0px;

}


h1, h2, h3, dt {

	font-weight: bold;

}

p,ul,ol,dl {

	margin-left: 30px;

}

p {

	text-indent: 1em;
	padding: 4px 0px 4px 0px;

}


li {

	margin-left: 30px

}

dt {

	margin-top: 10px;

}

dd {

	margin-left: 20px;

}

li > ul > li, li > ol > li, li > dl > dd,
dd > ul > li, dd > ol > li, dd > dl > dd {

	margin-left: 0px;


}



h2 {

	font-size: 180%;
	margin-top: 40px;
	margin-bottom: 30px;
	background-color: rgba(0,100,255,0.4);
	border-color: #bbb;
	border-style: solid;
	border-width: 1px;
	color: white;
	padding: 9px 9px 9px 17px;
	text-shadow: 3px 3px 3px black;
	box-shadow:  3px 3px 3px black;
	font-weight: bold;
	text-align: center;

}

h3 {

	font-size: 140%;
	margin: 25px 50px 10px 50px;
	padding: 5px;
	border-color: white;
	border-width: 0px 0px 3px 0px;
	border-style: solid;
	text-align: center;

}


dfn {

	font-weight: bold;
	font-style: normal;

}


em {

	font-weight: bold;
	font-style: normal;
	color: yellow;

}


strong {

	font-weight: bold;
	font-size: 150%;
	font-style: normal;
	color: yellow;


}


var {

	font-style: italic;
	font-family: "Times New Roman", "Times", serif;
	font-size: 120%;

}



a {

	color: #5cf;
	text-decoration: underline;

}

h2 a {

	color: #ff4;
	display: block;

}

a:hover {

	background-color: rgba(160,250,255,0.8);
	color: #005;

}


ul.mobile {

	display: none;

}

ul.note, ol.note {

	margin-top: 20px;
	margin-bottom: 20px;
	padding: 10px;
	background-color: rgba(0,0,0,0.5);
	box-shadow:  3px 3px 3px #777777;
	border-radius: 11px;
	border-color: #aaa;
	border-style: solid;
	border-width: 1px;

}


dl.note {

	margin-top: 20px;
	margin-top: 20px;
	padding: 0px;

}

dl.note dt, dl.note dd {

	padding-right: 0px;
	margin-right: 0px;

}

dl.note dd {

	margin-left: 0px;

}


dl.note p {

	text-indent: 0px;
	margin: 3px 0px 3px 0px;

}


dl.note > dt, dl.note > dd {

	padding: 8px;
	border-color: #aaa;
	border-style: solid;
	border-width: 1px;
	box-shadow:  3px 3px 3px #777777;

}

dl.note > dt {

	background-color: rgba(0,100,255,0.4);
	border-radius: 4px 4px 0px 0px;
	margin-bottom: 0px;


}

dl.note > dd {

	border-radius: 0px 0px 4px 4px;
	margin-bottom: 10px;
	margin-top: 0px;
	background-color: rgba(0,0,0,0.5);

}

h2.sitemap {

	display: none;

}

h2.sitemap2 {

	display: block !important;
	height: 100%;
	width: 100%;
	background-image: url("back.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	position: fixed;
	left: 0px;
	top: 0px;
	z-index: -1;
	margin: 0px;
	visibility: visible !important;

}

h2.sitemap2 span {

	display: none;

}

ul.notes_mobile{

	display: none;

}


/*   ============== For PC ================ */


@media (min-width: 681px) {

body {

	margin: 270px 240px 0px 200px;
	padding: 1px 0px 20px 0px;

}

h1 {

	position: absolute;
	top: 50px;
	left: 0px;
	margin: auto;
	text-align: center;
	padding: 5px;
	color: white;
	z-index: 1;
	width: 100%;
	text-shadow: 3px 3px 3px black;

}

h1 dfn {

	display: block;
	font-size: 200%;
	font-weight: bold;
	color: white;

}

h1 span {

	display: block;
	font-weight: normal;
	font-style: normal;
	font-size: 80%;
	margin-top: 1em;


}


h1 + ul {

	position: absolute;
	top: 150px;
	left: 0px;
	z-index: 1;
	width: 100%;
	margin: auto;
	padding: 0px;
	box-sizing: border-box;

}

h1+ul li {

	text-align: center;
	display: block;
	margin: 0px 240px 0px 200px;
	padding: 0px;

}


h2.updates, dl.updates {

	width: 200px;
	position: fixed;
	right: 0px;
	background-color: rgba(20,20,155,0.4);
	margin: 0px;
	font-size: 90%;
	z-index: 10;

}


h2.updates {

	margin: 0px;
	padding: 0px;
	height: 40px;
	line-height: 40px;
	top: 0px;
	font-size: 120%;
	text-shadow: unset;
	box-shadow: unset;
	font-weight: normal;
	border-color: #aaa;
	border-style:solid;
	border-width: 0px 0px 2px 0px;
	text-align: center;
	font-weight: bold;

}

dl.updates {

	top: 0px;
	margin-top: 40px;
	height: 100%;
	padding: 15px 5px 45px 10px;
	overflow-y: scroll;

}

dl.updates dd {

	margin-bottom: 1em;

}


div.nav {           /* div.nav */

	position: fixed;
	width: 180px;
	height: 100%;

	top: 0px;
	left: 0px;
	margin: 0px;
	overflow-x: hidden;
	overflow-y: hidden;
	transition-property: background-color;
	transition-duration: 0.5s;
	z-index: 5;

}


div.nav * {

	display: block;
	margin: 0px;
	padding: 0px;
	

}

div.nav > ul {

	background-color: rgba(0,0,155,0.4);
	width: 180px;
	height: 100%;
	overflow: hidden;

}


div.nav > ul > li, address{

	padding: 0.2em;
	position: absolute;
	left:0px;
	width: 180px;

}


div.nav > ul > li {

	width: 360px;

}

div.nav > ul > li > dl > dt {

	width: 180px;

}

div.nav > ul > li > dl > dt:after {

	content: "⇒";
	display: block;
	padding-right: 10px;
	float: right;

}

div.nav > ul > li:first-of-type > dl > dt:after {

	content: "";

}

div.nav > ul > li > dl > dd {

	position: absolute;
	top: 0px;
	left: 0px;
	width 180px;
	height: auto;
	z-index: -1;

}


div.nav > ul > li > dl > dd > ul {

	position: absolute;
	top: 0px;
	left: 0px;
	width: 180px;

}


div.nav > ul > li:nth-child(1) {

	top: 0px;

}

div.nav > ul > li:nth-child(2) {

	top: 3em;

}

div.nav > ul > li:nth-child(3) {

	top: 6em;

}

div.nav > ul > li:nth-child(4) {

	top: 9em;

}


div.nav > ul > li:nth-child(5) {

	top: 12em;

}


div.nav > ul > li > dl {

	width: 180px;

}


address {

	top: 20em;
	font-weight: bold;
	text-align: center;

}

div.nav > ul > li > dl > dd a, div.nav > ul > li > dl > dd em, div.nav dt {

	padding: 0.5em;

}


div.nav > ul > li > dl > dd a, div.nav > ul > li > dl > dd em {

	color: rgba(0,0,0,0);
	font-weight: bold;
	text-decoration: none;

}

div.nav > ul > li > dl > dd em {

	font-weight: normal;

}




div.nav:hover {

	width: 360px;
	z-index: 10;

}


div.nav > ul > li > dl dt:hover {

	cursor: pointer;
	background-color: rgba(0,0,155,0.7);

}

div.nav > ul > li > dl:hover {

	width: 360px;

}



div.nav > ul > li > dl:hover a, div.nav > ul > li > dl:hover em {

	color: white;
	border-color: #aaa;
	border-style: solid;
	border-width: 1px;
	background-color: rgba(0,0,155,0.8);

}




div.nav > ul > li > dl:hover > dd{

	left: 180px;
	z-index: 5;
	transition-property: left;
	transition-duration: 0.5s;

}

div.nav > ul > li > dl > dd a:hover  {

	color: #22f;
	background-color: rgba(200,200,255,0.9);

}


}


/*   ============== For Smartphone ================ */


@media only screen and (max-width: 680px) {


body {

	margin: 250px 5px 200px 5px;
	padding-top: 1px;

}


h1 {

	position: absolute;
	top: 50px;
	left: 0px;
	margin: auto;
	padding: 5px 5px 5px 20px;
	color: white;
	z-index: 1;
	width: 100%;
	text-shadow: 3px 3px 3px black;

}

h1 dfn {

	display: block;
	font-size: 150%;
	font-weight: bold;
	color: white;

}

h1 span {

	display: block;
	font-weight: normal;
	font-style: normal;
	font-size: 80%;
	margin-top: 1em;


}


h1 + ul {

	position: absolute;
	top: 150px;
	left: 0px;
	z-index: 1;
	width: 100%;
	margin: auto;
	padding: 0px;
	box-sizing: border-box;

}

h1+ul li {

	text-align: center;
	display: block;
	margin: 0px 10px 0px 10px;
	padding: 0px;

}


h2 {

	font-size: 140%;

}


input[type="text"] {

	display: block;

}

input[name*="mail"] {

	display: inline;

}


div.nav {

	padding: 50px 3px 3px 3px;
	background-color: transparent;
	background-image: none;
	display: block;
	position: absolute;
	width: 50px;
	height: 50px;
	top: 50px;
	right: 8px;
	overflow: hidden;
	margin: 0px !important;
	z-index: 30;
	visibility: visible !important;
	background-image: url(menu-old.svg);
	background-repeat: no-repeat;
	background-size: 50px;
	font-size: 90%;

}


div.nav > ul {

	margin: 0px;
	padding: 0px;

}


div.nav:after,
div.nav > ul > li {

	display: block;
	width: 240px;
	text-align: center;

}

div.nav:after {

	content: "メニュー外タップで戻れます。";
	font-weight: normal;
	margin-top: 20px;
	color: yellow;

}


div.nav > ul > li {

	margin: 0px;

}


div.nav > ul dl {

	padding: 0px;
	margin: 0px;

}

div.nav > ul dd {

	padding: 0px;
	margin: 0px;

}


div.nav > ul dt {

	background-color: rgba(100,100,255,0.4);
	padding: 5px;

}

div.nav > ul dt a {

	font-weight: bold;

}


div.nav > ul li ul {

	margin: 0px;
	padding: 0px;

}

div.nav > ul li li {

	margin: 0px;
	padding: 2px 2px 2px 5px;

}

div.nav > ul > li:first-of-type:before {

	width: 50px;
	height: 50px;
	margin: 0px;
	padding: 0px;
	content: "";
	position: absolute;

	top: 0px;
	left: 0px;
	display: block;

}



div.nav > ul:hover > li:first-of-type:before,
div.nav > ul:active > li:first-of-type:before {

	background-image: none;


}


div.nav:hover + h2,
div.nav:active + h2{

	z-index: 10;

}


div.nav:hover,
div.nav:active {

	padding-top: 0px;
	width: 250px;
	height: auto;
	right: 0px;
	top: 5px;
	border-color: #888;
	border-style: solid;
	border-width: 1px;
	box-shadow:  2px 2px 2px #555;
	background-color: rgba(0,0,0,0.5);
	background-image: none;
	transition-property: width;
	transition-duration: 0.5s;

}


ul.mobile {

	display: flex !important;
	position: fixed;
	bottom: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: auto;
	z-index: 99;
	visibility: visible !important;

}

ul.mobile li{

	display: block;
	margin: 0px;
	padding: 0px;
	width: 50%;
	border-width: 3px 0px 0px 0px;
	border-color: white;
	border-style: solid;

}

ul.mobile li a {

	display: block;
	padding: 15px 10px 15px 10px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	color: white;
	border-width: 2px;
	border-style: solid;

}

ul.mobile li:nth-child(1) a {

	background-color: #292;
	border-color: #292;

}

ul.mobile li:nth-child(1) a:active {

	background-color: white;
	color: #292;

}


ul.mobile li:nth-child(2) a {

	background-color: blue;
	border-color: blue;

}

ul.mobile li:nth-child(2) a:active {

	background-color: white;
	color: blue;

}

ul.mobile li:nth-child(3) a {

	background-color: #90d;
	border-color: #90d;

}

ul.mobile li:nth-child(3) a:active {

	background-color: white;
	color: #30d;

}

*.updates, address {

	display: none;

}

ul.notes_mobile{

	width: 100%;
	display: block;
	font-weight: bold;
	text-align: center;
	margin-top: 5px;
	font-size: 120%;

}


} /* スマホ向け設定 終わり  */