@charset "UTF-8";

body { margin:0; font-family: 'verdana', sans-serif; color: grey; background-color: black; }

a { color: #c6b39f; text-decoration: none; }
a:visited { color: #c6b39f; }
a:hover { color: white; }
a:active { color: white; }


.wrapper{
    min-height: 100vh;
    position: relative;/*←相対位置*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

header{
width: 100%;
background-color: #222;
color: white;
text-align: center;
padding: 15px 0;
border-bottom: 1px solid lightgrey; }

.headBK{
width: 100%;
background-color: #000;
color: white;
text-align: center;
padding: 15px 0;
border-bottom: 1px solid lightgrey; }

.headBK1{
width: 100%;
background-color: #111;
color: white;
text-align: center;
padding: 15px 0;
border-bottom: 1px solid lightgrey; }

.headX{
width: 100%;
background-color: #566777;
color: white;
text-align: center;
padding: 15px 0; }



.Nav { padding: 5px; } /* MySet */
/* ドロップダウンメニュー */
ul.navBK {
   margin: 0px;		/* メニューバー外側余白 */
   padding: 0px 0px 0px 10px; /* メニューバー内側余白 */
   background-color: black; /* バーの背景色 */
text-align: right; /*MySet */
}
ul.navBK li {
   width: 120px;		 /* メニュー項目の横幅 */
   display: inline-block;	/* 横並び配置 */
   list-style-type: none;
   position: relative;	/* 重要 */
}
ul.navBK a {
   background-color: #222; 
   color: #c6b39f;
   line-height: 40px;
   text-align: center;
   text-decoration: none;
   display: block;
border: 1px solid lightgrey; /* MySet */
margin-bottom: 2px; /* MySet */
}
ul.navBK a:hover {
   background-color: black;
   color: white;
}
   /* サブメニュー */
ul.navBK li:hover ul {
   display: block;
}
ul.navBK ul {
   margin: 0px;
   padding: 0px; 
   display: none;		/* 重要（非表示にしておく） */
   position: absolute;	/* 重要 */
}
ul.navBK ul li {
   width: 120px;		/* サブメニュー1項目の横幅 */
}
ul.navBK ul li a {
   line-height: 35px;	/* サブメニュー1項目の高さ */
   text-align: center;
   padding-left: 5px;
font-size: 90%;
}
ul.navBK ul li a:hover {
background-color: black;
color: whote;
opacity:1;
}


/* ドロップダウンメニュー別色 */
ul.navBK1 {
   margin: 0px;		/* メニューバー外側余白 */
   padding: 0px 0px 0px 10px; /* メニューバー内側余白 */
   background-color: black; /* バーの背景色 */
text-align: right; /*MySet */
}
ul.navBK1 li {
   width: 120px;		 /* メニュー項目の横幅 */
   display: inline-block;	/* 横並び配置 */
   list-style-type: none;
   position: relative;	/* 重要 */
}
ul.navBK1 a {
   background-color: black; 
   color: #c6b39f;
   line-height: 40px;
   text-align: center;
   text-decoration: none;
   display: block;
border: 1px solid lightgrey; /* MySet */
margin-bottom: 2px; /* MySet */
}
ul.navBK1 a:hover {
   background-color: #222;
   color: rosybrown;
}
   /* サブメニュー */
ul.navBK1 li:hover ul {
   display: block;
}
ul.navBK1 ul {
   margin: 0px;
   padding: 0px; 
   display: none;		/* 重要（非表示にしておく） */
   position: absolute;	/* 重要 */
}
ul.navBK1 ul li {
   width: 120px;		/* サブメニュー1項目の横幅 */
}
ul.navBK1 ul li a {
   line-height: 35px;	/* サブメニュー1項目の高さ */
   text-align: center;
   padding-left: 5px;
font-size: 90%;
}
ul.navBK1 ul li a:hover {
background-color: #222;
color: rosybrown;
opacity:1;
}



.container { padding: 20px; text-align: center; font-size: 90%; }
.content img { padding: 0.5em; }



.flexwrap{
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align: left;
}

.Box1 { padding: 0.5em; text-align: left; }



.inlineblock {
    display:  inline-block;     /* インラインブロック要素 */
    width: auto;               /* 幅指定 */
    padding:  10px;             /* 余白指定 */
    vertical-align:  top;    /* 要素を上揃え */
}

.inlineblockM {
    display:  inline-block;     /* インラインブロック要素 */
    width: auto;               /* 幅指定 */
   padding: 10px;             /* 余白指定 */
    vertical-align:  middle;    /* 要素を上下中央揃え */
}



.Comtop img { width: 280px; height: auto; }
.Com { font-size: 80%; padding: 4px; color: #666; }
.ThumbA img {
height: 10px; width: auto; filter: contrast(5%);}
.ThumbA img:hover { filter: contrast(75%);}
.ThumbB img {
width: 10px; height: auto; filter: contrast(5%);}
.ThumbB img:hover { filter: contrast(75%);}

.MojiX { font-size: 85%; }
.MojiY { font-size: 80%; }
.MiniMoji { font-size: 75%; padding: 4px; color: #666; }
.Col1 { color: silver; }
.Col2 {color: #555; }

hr { height: 0; margin: 0; padding: 0; border: 0; }
hr { height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#999), to(transparent));
background-image: linear-gradient(to right, transparent, #999, transparent);
 margin: 2em 1em;}



.Btn1 {
  display: inline-block;
  text-align: center;
  min-width: 100px;
  background-color: slategrey;
  font-size: 15px;
  color: #ddd;
  text-decoration: none;
  padding: 10px 20px ;
  border: 1px solid slategrey;
}


.BtnZ {
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: lightsteelblue;
  border: solid 2px lightsteelblue;
  border-radius: 3px;
  transition: .4s;
}
.BtnZ:hover,active {
  background: lightsteelblue;
  color: white;
}



#topbutton {
	/* ▽表示位置を画面の右下に固定 */
	position: fixed;
	bottom: 18px;
	right: 18px;
	/* ▽最初は非表示にしておく */
	display: none;
	}

	#topbutton a {
	display: block;
	text-decoration: none;
	opacity: 0.3;
	}

	#topbutton a:hover {
	opacity: 0.9 ;
	}



@media (max-width: 1000px) {
     .wrapper, .content {
          float: none;
          margin: 0;
          width: auto;
     }
}


/* MySet - manga-navi-link */
.mnav1{ font-size: 14px; }
.mnav1 a{ color: lightslategrey; text-decoration: none; font-weight: bold; }
.mnav1 a:visited { color: lightslategrey; }
.mnav1 a:hover { color: rosybrown; }
.mnav1 a:active { color: rosybrown; }