@charset "utf-8";
body {
	background-color: #b0c4de;
	font-family: HGPｺﾞｼｯｸE;
	text-align: center;
}
*{
    -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -o-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
}
#main {
	border-style: double;
	opacity: 0.75;
	border-radius: 25px;
	background-color: #666699;
	text-align: center;
	line-height: 2em;
	font-size: large;
	font-family: sans-serif;
	margin-top: 0px;
	padding: 0;
	list-style-type: none;
	position: fixed;
	right: 10px;
    bottom: 5px;
	width: 2.4em;
	position: fixed;
}
#main a{
    display: block;
    border-radius: 25px;
    text-decoration: none;
    color: #FFFFFF;
}
#main a:hover {
	background-color: #0099FF;
}
#main a:active {
    background-color: aqua;
}

.box1{
    box-shadow: 2.5px 2.5px 15px #000000;
    width: 100%;
	font-size: xx-large;
	text-align: center;
	padding: 0;
	height: auto;
	border: 9px double #C0C0C0;
	background-color: #FFFFFF;
	line-height: 1.6em;
}
.box{
	width: 100%;
	vertical-align: top;
}
.list{
	width: 100%;
	font-size: 0;
	text-align: center;
	border: 9px double #C0C0C0;
	background-color: white;
	height: auto;
}
.list a{
	width: auto;
	min-width: 95px;
	margin-left: auto;
	margin-right: auto;
	font-size: large;
	font-family: HGｺﾞｼｯｸE;
	line-height: 30px;
	border-style: double;
	text-decoration: none;
	color: black;
	box-shadow: 5px 5px 20px #000000,5px 5px 20px #FFFFFF inset;
	display: inline-block;
	background-color: #CCCCFF;
}
.list a:hover{
   background-color: #0099FF;
}
.list a:active{
	background-color: #0066CC;
	border-style: solid;
	box-shadow: 5px 5px 20px #000000 inset;
	min-width: 95px;
	line-height: 30px;
	border-color: black;
    color: beige;
}
.list2{
	width: 100%;
	font-size: 0;
}
.list2 a{
	width: 135px;
	box-shadow: 5px 5px 20px #000000,5px 5px 20px #FFFFFF inset;
	background-color:  #CCCCFF;
	margin-left: auto;
	margin-right: auto;
	font-size: 11.5px;
	font-family: HGPｺﾞｼｯｸM;
	line-height: 27px;
	border-style: double;
	text-decoration: none;
	color: black;
	display: inline-block;
	background-color: #D1D9E6;
}
.list2 a:hover{
   background-color: #0099FF;
}
.list2 a:active{
	background-color: #0066CC;
	border-style: solid;
	box-shadow: 5px 5px 20px #000000 inset;
	line-height: 27px;
	border-color: black;
	color: beige;
}
.list2 p{
    width: 135px;
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    font-family: HGPｺﾞｼｯｸM;
    background-color: #0066CC;
	border-style: solid;
	font-size: 14px;
	box-shadow: 5px 5px 20px #000000 inset;
	line-height: 27px;
	border-color: black;
	display:inline-block;
	color: beige;
}
#sub,#data{
 box-shadow: 5px 5px 20px #000000;
 height: auto;
 border: 9px double #C0C0C0;	
 background-color: white; 
}
#syuki{
    box-shadow: 5px 5px 20px #000000;
	border: 9px double #C0C0C0;
	background-color: white;
	height: auto;
}
#syuki li{
	text-align: left;
}
h1{ 
    font-size: 45px;
    text-shadow: 3px 3px 2px rgba(0,0,0,0.5);
    background:linear-gradient(#191970,white);
    background:-moz-linear-gradient(#191970,white);
    background:-webkit-gradient(linear,left top,left bottom,from(#191970),to(white));
    color: beige;
    margin: 0;
	padding: 0;
}
h2{
	border-style: double;
	text-align : center;
	font-family: "ＭＳ Ｐゴシック";
	background-color: #b0c4de;
    padding: 5px;
    color: black;
    box-shadow: 3px 3px 0 #000080;
}
h3{
    padding: 0.3em;
	font-family: AR丸ゴシック体M;
}
h4{
	font-family: メイリオ;
}
p{
 padding-left: 0.5em;
 padding-right:0.5em;
 font-size: 17px;
 font-family: HGPｺﾞｼｯｸM;
 text-align:left;
 line-height: 1.7em;
}
table{
	line-height: 1.6;
    margin-left: auto;
    margin-right: auto; 
}
table th{
	background-color: #000066;
	color: beige;
}

.home{
	margin-top: 1em;
}
.copyright {
    box-shadow: 5px 5px 20px #000000;
	border: 9px double #C0C0C0;
	background-color: white;
	margin-top: 5px;
}
.hosoku{
    position: relative;
      }
.hosoku span{
    display: block; 
    border: solid 2px #999; 
    background-color: #eee; 
    color: #666;  
    text-decoration: none;
    text-align: left;  
    position: absolute; 
    top: 25px; 
    left: 20px;
    padding: 5px;
    visibility: hidden;
    width: 210px;
    }
a.hosoku:hover,a.hosoku:hover span{
    visibility: visible;
    z-index: 1;
}
#koukoku{
    width: 100%;
    bottom: 0;
    right: 0;
	position: fixed;
}
#kategori{
    font-family: "AR P丸ゴシック体M";
	font-size: large;
	line-height: 1.5em;
	letter-spacing: 0.1em;
	text-align: center;
	text-indent: 0.5em;
    margin-top: 1em;
    margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
	width: 96%;
	background-color: #C7CCD5;
	border-top-style: ridge;
	border-bottom-style: ridge;
	border-top-color: #6B788D;
	border-bottom-color: #6B788D;
	font-weight: bold;
}
li{
    font-size: 15px;
    margin-bottom: 1em;
	line-height: 1.7;
	font-family:Arial, Helvetica, sans-serif;
}
.mokuji ul a{
	color: black;
	font-weight: bold;
}
caption:target{
 color: black;
 background-color: aliceblue;
}
.kyouka td{
    text-align: right;
}
.kyouka tr:nth-child(even){
	background-color: lavender;
}
.kyouka td:nth-child(1){
	background-color: gainsboro;
	text-align: left;
}
.kinryoku{
	box-shadow:1px 1px 20px #080A08 inset;
	background-color: #04B4AE;
	font-weight: normal;
    text-align: left;
	color: beige;
	font-family: メイリオ;
}
.ether{
	box-shadow:1px 1px 20px #080A08 inset;
	background-color: #8000FF;
	font-weight: normal;
    text-align: left;
	color: beige;
	font-family: メイリオ;
}
.buff{
	box-shadow:1px 1px 20px #080A08 inset;
	background-color: #DF7401;
	font-weight: normal;
    text-align: left;
	color: beige;
	font-family: メイリオ;
}
.guard{
	box-shadow:1px 1px 20px #080A08 inset;
	background-color: #FFBF00;
	font-weight: normal;
    text-align: left;
	color: beige;
	font-family: メイリオ;
}
.heal{
	box-shadow:1px 1px 20px #080A08 inset;
	background-color: #01DF74;
	font-weight: normal;
    text-align: left;
	color: beige;
	font-family: メイリオ;
}
.boxcont{
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #6B788D;
    border-radius: 8px;
}
.boxcont .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 16px;
    background: #FFF;
    color: #6B788D;
    font-weight: bold;
}
.boxcont p {
    margin: 0; 
    padding: 0;
}
.markar{
    background: linear-gradient(transparent 70%, pink 70%);
}
.box-blue{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-top: double 7px #4ec4d3;/*上線*/
    border-bottom: double 7px #4ec4d3;/*下線*/
}
.box-red{
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #474747;
    background: #FFD5EC;/*背景色*/
    border-top: double 7px #FF6666;/*上線*/
    border-bottom: double 7px #FF6666;/*下線*/
}
.slot{
	color: blue;
}
.unique{
	color: fuchsia;
}
@media (max-width: 319px){
body{
	margin: 0;
}
h1{
    padding-top: 3px;
	font-size: 20px;
	line-height: 1.1;
}
h2{
	font-size: 19px;
}
.list a{
     width: 50%;
     font-size: 14px;
	 min-width: 7em;
}
.list a:active{
	font-size: 14px;
}
#sub ul{	
	font-size:medium;
	text-indent: 1em;
}
#data ul{
	font-size: medium;
	text-indent: 1em;
}
.pankuzu{
	display: none;
}
.copyright{
    margin: 0;
}
p{
	font-size: 15px;
}
table{
    width: 100%;
	font-size: 13px;
}
}
@media(min-width: 320px) and (max-width: 414px){
body{
	margin: 0;
}
.list a{
     font-size: 15.8px;
	 min-width: 6em;
}

.box{
	width: 100%;
}
.list2{
	width: 100%;
}
.list2 a{
	width: 50%;
	font-size: 13.5px;
	display: inline-block;
}
.list2 p{
	width: 50%;
	font-size: 13.5px;
	display: inline-block;
}
h1{
    padding-top: 3px;
    font-size: 29px;
	line-height:1.1em;
}
h2{
	font-size: 19px;
}
.list2 a:active{
	font-size: 13.5px;
}
#sub ul{	
	font-size:medium;
	text-indent: 1em;
}
#data ul{
	font-size: medium;
	text-indent: 1em;
}
.pankuzu{
	display: none;
}
.copyright {
	margin: 0;
}
p{
	font-size: 16px;
}
table{
	font-size: 14px;
}
}
@media (min-width: 415px) and (max-width: 809px) {
.boxA:after{content:"";
            display: block;
            clear: both;	
}
#syuki{
    margin-top: 0.6%;
}
.list{
	display: none;
}
.kaigyou{
	display: none;
}
#sub{
    margin-top: 0.6%;
	float: left;
	width: 49.5%;
}
#sub ul{	
	font-size:medium;
	text-indent: 1em;
}
#data{
    margin-top: 0.6%;
	float: right;
	width: 49.5%;
}	
#data ul{
	font-size: medium;
	text-indent: 1em;
}
.pankuzu{
	display: none;
}
h1 {
    font-size: 31px;
    line-height:1.1em;
}
}
@media (min-width: 810px){
.boxA:after{content:"";
            display: block;
            clear: both;	
}
.box1{
	position: relative;
}
#syuki{
    margin-top: 6px;
	float: left;
	width: 74%;
}
#sub{
    margin-top: 6px;
	float: right;
	width: 25.5%;
}
#data{
    margin-top: 6px;
	float: right;
	width: 25.5%;
}
.list{
	display: none;
}
.kaigyou{
	display: none;
}
.home{
	display: none;
}
}
@media (min-width: 1023px){
.kensaku{
    position: absolute;
    z-index: 1;
    top: 30px;
	right: 0;
	width: 240px;
}
.danraku{
	display: none;
}
#main {
	z-index: 2;
}
}