@charset "utf-8";
/************初期設定************/

*  { 
	padding : 0px ; 
	margin : 0px ; 
	}

body{
  line-height: 1.5;
  text-align: center;
  margin: 0;
  background:#DCDCDC;
  background-image: url("../../img/etc/background_img.jpg");
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }

.clearLeft { clear: left; }
.cleaRight { clear: right; }
.clearBoth { clear: both; }
.clearNone { clear: none; }

/************************共通ボックス************************/

#site_box
{
	width : 98%; min-width:320px; max-width:960px;
	background: #F0F0F0;
	border : 1px solid #00AAAA;
	margin : 0px auto;
    -webkit-box-shadow: 0px 0px 5px #999;
    -moz-box-shadow: 0px 0px 5px #999;
    box-shadow: 0px 0px 5px #999;
	}

#case {
	margin : 5% 0px 0px 0px ;
	}

div.container {
	display: -wbkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	}

.page_flex {
	background-color:#DCDCDC;
	display: -wbkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-flow: wrap;
	justify-content:space-around;
}

/************************共通ボックストップ************************/

#illust_box, #practice_box, #comic_box, #movie_box, #novel_box, #profile_box ,#link_box ,#sitemap_box ,#nothing_box,#game_box
{
	background-position: top;
	background-size:auto;
	background-repeat: no-repeat;
	}

/************************文字設定************************/

h1{ font-size : 4em;}
h2{ font-size : 2em; }
h3{ font-size : 1.5em; }

p.left { text-align: left; }
p.center { text-align: center; }
p.right { text-align: right; }

p.donate_nem{ 
	font-size : 1em;
	color: #610B0B;	}

p.donate_nem:before { 
	color: #DF7401;
	content: "[NEMaddress]"; }

a { text-decoration:none;}
a:link {color:#045FB4;}
a:visited {color:#0B0B61;} 

.bord{font-weight: bold;}

.color{
	font-weight: bold;
	font-size : 1em; 
	color: #000;
	background-color: rgba(255,255,255,0.6);
	}

div.font_back {
	font-size : 1.5em;
	font-weight: bold;
	background-color: #B0C4DE;
	}

a:hover {
	text-decoration:underline;
	color:#FFA;
	}

/************************ボタン設定************************/

.square_btn{
    display: inline-block;
    padding: 0.5em 1em;
    margin: 5px;
    text-decoration: none;
    background: #f7f7f7;
    border-left: solid 6px #045FB4;
    color: #ff7c5c;/*文字色*/
    font-weight: bold;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
}
.square_btn:active {
    box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1);
    transform: translateY(2px);
}

.square_btn:hover {
  background: #507ea4;
}

/************************画像設定************************/

a:hover img {
	opacity: 0.6;
	filter: alpha(opacity=60);
	}

/************************メニュータブ************************/

.menu- {
	display: -wbkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	color: #045FB4;
	font-weight: bold;
	position: static;
}

.menu-, .menu-list {
	list-style: none;
}

.menu-case {
	flex: 1;
	border: 1px solid #00AAAA;
	border-style: outset;
	background: #f7f7f7;
	-webkit-box-shadow: 0 2px 4px #999;
	-moz-box-shadow: 0 2px 4px #999;
	box-shadow: 0 2px 4px #999;
}

.menu-name {
	cursor: pointer;
}

.menu-list {
	width: 25%; max-width:240px;
	opacity: 0;
	z-index: -1;
	position: absolute;
	border-top: 1px solid #666;
	background: #c5ddff;
	-webkit-box-shadow: 0 5px 4px #999;
	-moz-box-shadow: 0 5px 4px #999;
	box-shadow: 0 5px 4px #999;
}
.menu-one {
	cursor: pointer;
	border-bottom: 1px solid #00AAAA;
	background: #f7f7f7;
	border-left: solid 6px #045FB4;
}

.menu-case div {
	padding: 0.3em 0;
	border-left: solid 6px #045FB4;
	}

.menu-one a {
	display: block;
	padding: 0.3em 0;
	color:#045FB4;
	text-decoration: none;
	}

.menu-one a:hover {
	color:#FFA;
	}

.menu-list, .menu-one, .menu-case, .menu-name {
  -webkit-transition: 0.10s ease-in;
  -moz-transition: 0.10s ease-in;
  -ms-transition: 0.10s ease-in;
  -o-transition: 0.10s ease-in;
  transition: 0.10s ease-in;
}

.menu-name:hover + .menu-list, .menu-list:hover {
  opacity: 1;
  z-index: 1;
}

.menu-case:hover .menu-name {
  background: #507ea4;
}

.menu-one:hover {
  background: #507ea4;
}

/************************ページタブ************************/

.pagebox {
    background: #DCDCDC;
    padding: 20px;
}

.page {
    display: inline-block;
    padding: 20px;
    margin-right: 5px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.page:hover {
    background: #fefefe;
}

.page.active {
    border: none;
    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
}

/************************index設定************************/

#title_box{
	line-height: 1.1;
	background-image: url('../../img/etc/header.png');
	background-position: top;
	background-size:auto;
	background-repeat: no-repeat;
	height : 630px;
	position:relative;
	padding-top: 20px;
	}

#title_box a{
	text-decoration:none;
	}

#share_box{
	position:absolute;
	right:0%;
	bottom: 0%;
	padding: 5px;
	}

.gift_box {
	background-color:#DCDCDC;
	display: -wbkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-flow: wrap;
	justify-content:center;
	-webkit-box-shadow: 0 5px 4px #999;
	-moz-box-shadow: 0 5px 4px #999;
	box-shadow: 0 5px 4px #999;
	margin: 2%;
	padding: 10px 0 10px 0;
}

.gift_thum{
	padding: 1%;
	}

.gift_column{
	text-align: left;
	padding: 1%;
	font-size: 0.9em;
	}

.gift_column input {
	background-color: #eee;
	border: 1px #aaa double;
	}

/************************更新履歴ページ************************/


#news_box{
	background-color:#D3D3D3;
	margin-left: 2%;
	padding: 0px 20px;
	font-size: 0.9em;
	line-height: 1.5;
	border : 1px solid #BBB;
	}

#thanks_box{
	background-color:#F0F8FF;
	clear:both;
	width :100%;
	font-size: 0.9em;
	line-height: 1.7;
	}
	
#copyright_box{
	background-color:#F0F8FF;
	border-top : 1px solid #00AAAA;
	width :96%;
	padding: 2%;
	}

/************ホバー説明文************/

.floattext a{
	display: block;
	position: absolute;
	width: 200px;
	height: 2em;
	margin : 15px 10px 10px 20px ; 
	background: #EEE;
	border-bottom: 1px solid #BBB;
	border-radius: 10px;
	-webkit-box-shadow: 0 2px 4px #999;
	-moz-box-shadow: 0 2px 4px #999;
	box-shadow: 0 2px 4px #999;
	font-family: Yu Gothic,serif;
	text-decoration: none;
}

.floattext a:hover{
  background: #A9A9A9;
}

.floattext a span{
  position: absolute;
  opacity: 0;
  top: 100%;
  left: -10%;
  width: 110%;
  padding: 10px;
  background: #4682B4;
  color: #fff;
  line-height: 1.5;
  transition: .3s;
  z-index: -1;
}

.floattext a:hover span{
  opacity: 1;
  top: 100%;
  z-index: 1;
}

.floattext2 a{
	display: block;
	position: absolute;
	width: 30px;
	margin : 15px 10px 10px 190px ; 
	background: #7FA9E3;
	border-bottom: 1px solid #BBB;
	border-radius: 0 10px 10px 0;
	color: #fff;
	font-size: 1.35em;
	font-weight: bold;
	font-family: 'Impact',sans-serif;
	font-family: Yu Gothic,serif;
	text-decoration: none;
}

.floattext2 a:hover{
  background: #0F3C7B;
}

/************************絵ページ************************/


#illust_box
{
	background-image: url('../../img/etc/profiletop.png');
	}
	
#practice_box
{
	background-image: url('../../img/etc/profiletop.png');
	}

#portfolio_box
{
	background-image: url('../../img/etc/profiletop.png');
	}

.picture_thum{
	padding: 10px 0px;
	float: left;
	width : 238px;
	height: 330px;
	}

.picture_column{
	margin: auto;
	width : 210px;
	height: 45px;
	display: -webkit-flex;
	display: flex;
	align-items: center; /* 縦方向中央揃え */
		-webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
	justify-content: center; /* 横方向中央揃え */
		-webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
	background: #EDEDED;
	border: solid 1px #214565;
	border-top:8px solid #214565;
	border-radius: 10px;
	margin-bottom: 12px;
	-webkit-box-shadow: 0 2px 4px #999;
	-moz-box-shadow: 0 2px 4px #999;
	box-shadow: 0 2px 4px #999;
	color: #214565;
	}

.picture_frame{
	border: 3px solid #BBB;
	border-style: outset;
	}


/************************コミックページ************************/

img.fit{
	width: 99%;
	}

#comic_box
{
	background-image: url('../../img/etc/profiletop.png');
	}

/***メニュー大枠***/
.comic_left{
	min-width: 321px;
	text-align: left;
	background-color:#DCDCDC;
	}

/***メニューバー***/
.comic_menu{
	font-size: 1.7em;
	}

/***メニュー１個***/
.comic_menu a{
	display: block;
	background-color:#EDEDED;
	border: 2px solid #BBB;
	border-style: outset;
	border-radius: 10px;
	padding: 4px 0px 4px 10px;
	margin: 5px;
	-webkit-box-shadow: 0px 0px 5px #999;
    -moz-box-shadow: 0px 0px 5px #999;
    box-shadow: 0px 0px 5px #999;
	}

/***カテゴリ大枠***/
.comic_right{
	flex: 1;
	min-width: 320px;
	}

div#news,
div#tanpen,
div#tyouhen,
div#turaishoujo
	{
	border: 1px solid #555; 
	border-radius: 10px;
	margin: 5px;
	padding: 0px 5px;
	}

/***カテゴリ１個***/
.comic_content{
	min-width: 320px;
	}

/***マンガ１個***/
.comic_content2{
	min-height: 220px;
	background-color:#EDEDED;
	border: 2px solid #BBB;
	border-style: outset;
	margin-bottom: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 5px #999;
    -moz-box-shadow: 0px 0px 5px #999;
    box-shadow: 0px 0px 5px #999;
	}

/***サムネ***/
.comic_content3{
	float: left;
	min-width: 160px;
	margin: 10px 0;
	}

/***説明文***/
.comic_content4{
	text-align: left;
	margin: 10px;
	}

/***読書ページ***/

#comic_page_box
{
	width : 98%; min-width:320px; max-width:1400px;
	background: #F0F0F0;
	border : 1px solid #00AAAA;
	margin : 0px auto;
    -webkit-box-shadow: 0px 0px 5px #999;
    -moz-box-shadow: 0px 0px 5px #999;
    box-shadow: 0px 0px 5px #999;
	}
	
.comic_page{
	background-color:#DCDCDC;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: center;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
	padding: 1%;
	}

.comic_page_R{
	background-color:#DCDCDC;
	float: left;
	max-width: 50%;
	}

.comic_page_L{
	background-color:#DCDCDC;
	float: right;
	max-width: 50%;
	}

/************************壁紙プレゼントページ************************/

#kb_box
{
	background-position: top;
	background-size:auto;
	background-repeat: no-repeat;
	}

.kb_content{
	background-color:#DCDCDC;
	border:1px solid #555;
	margin: 10px;
	padding: 10px;
	}

.kb_content2{
	margin: 10px 0;
	}

/************************動画ページ************************/


#movie_box
{
	background-image: url('../../img/etc/profiletop.png');
	}

.movie_right{
	flex: 1;
	min-width: 320px;
	}

div#movie
	{
	border: 1px solid #555; 
	border-radius: 10px;
	margin: 5px;
	padding: 0px 5px;
	}

.movie_content{
	min-width: 320px;
	}

.movie_content2{
	background-color:#EDEDED;
	border: 2px solid #BBB;
	border-style: outset;
	margin-bottom: 10px;
	min-height: 320px;
	padding: 2% 5% 2% 5%;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 5px #999;
    -moz-box-shadow: 0px 0px 5px #999;
    box-shadow: 0px 0px 5px #999;
	}


/************************ノベルページ************************/


#novel_box
{
	background-image: url('../../img/etc/profiletop.png');
	}

.novel_left{
	min-width: 321px;
	text-align: left;
	background-color:#DCDCDC;
	}

.novel_menu{
	font-size: 1.7em;
	}

.novel_menu a{
	display: block;
	background-color:#EDEDED;
	border: 2px solid #BBB;
	border-style: outset;
	border-radius: 10px;
	padding: 4px 0px 4px 10px;
	margin: 5px;
	-webkit-box-shadow: 0px 0px 5px #999;
    -moz-box-shadow: 0px 0px 5px #999;
    box-shadow: 0px 0px 5px #999;
	}

.novel_right{
	flex: 1;
	min-width: 320px;
	}

div#tanpen,
div#news
	{
	border: 1px solid #555; 
	border-radius: 10px;
	margin: 5px;
	padding: 0px 5px;
	}

.novel_content{
	min-width: 320px;
	}

.novel_content2{
	background-color:#EDEDED;
	border: 2px solid #BBB;
	border-style: outset;
	margin-bottom: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 0px 5px #999;
    -moz-box-shadow: 0px 0px 5px #999;
    box-shadow: 0px 0px 5px #999;
	}

.novel_content3{
	text-align: left;
	margin: 10px;
	}

.novel_page{
	text-align: left;
	background-color:#DCDCDC;
	padding: 3%;
	line-height: 1.9;
	}


/************************ゲームページ************************/

#game_box
{
	background-image: url('../../img/etc/profiletop.png');
	}

.game_content{
	min-width: 320px;
	}

.game_content2{
	background-color:#EDEDED;
	border: 2px solid #BBB;
	border-style: outset;
	margin-bottom: 10px;
	border-radius: 10px;
	padding: 10px;

	}

.game_thum{
	background-color:#ccc;
	border : 1px solid #888;
	border-radius: 10px;
	padding: 10px;
	-webkit-box-shadow: 0px 0px 5px #999;
	-moz-box-shadow: 0px 0px 5px #999;
	box-shadow: 0px 0px 5px #999;
	flex: 1;
	}

.game_column{
	background-color:#ddd;
	border : 1px solid #888;
	border-radius: 10px;
	text-align: left;
	line-height: 1.7;
	padding: 20px 20px 20px 30px;
	min-width:300px;
	-webkit-box-shadow: 0px 0px 5px #999;
	-moz-box-shadow: 0px 0px 5px #999;
	box-shadow: 0px 0px 5px #999;
	flex: 3;
	}

.game_column2{
	margin: 20px 0 20px 0;
	}


/************************プロフィールページ************************/

#profile_box
{
	background-image: url('../../img/etc/profiletop.png');
	}

.profile_thum1{
	background-color:#DCDCDC;
	border:1px solid #888;
	float: left;
	flex: 1;
	padding: 20px;
	margin: 10px;
	-webkit-box-shadow: 0px 0px 5px #999;
	-moz-box-shadow: 0px 0px 5px #999;
	box-shadow: 0px 0px 5px #999;
	}

.profile_thum2{
	background-color:#DCDCDC;
	border:1px solid #888;
	padding: 20px;
	margin: 10px;
	-webkit-box-shadow: 0px 0px 5px #999;
	-moz-box-shadow: 0px 0px 5px #999;
	box-shadow: 0px 0px 5px #999;
	text-align: left;
	line-height: 150%;	
	}

/************************リンクページ************************/


#link_box
{
	background-image: url('../../img/etc/profiletop.png');
	}

.link_thum{
	background-color:#A9A9A9;
	border-bottom:1px solid #000000;
	padding: 10px;
	flex: 1;
	}

.link_column{
	background-color:#DCDCDC;
	text-align: left;
	border-bottom:1px solid #000000;
	padding: 20px;

	}


/************************サイトマップ************************/


#sitemap_box
{
	background-image: url('../../img/etc/profiletop.png');
	}
	
.sitemap_thum{
	background-color:#A0B4CE;
	border-bottom:1px solid #000000;
	padding: 5px 0px;
	width : 100%;
	}

.sitemap_column{
	text-align: left;
	border-bottom:1px solid #000000;
	width : 100%;
	}

.map_table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.map_table th {
    background-color: #DCDCDC;
    border: 1px solid #CCC;
    padding: 5px 10px;
    text-align: left;
    font-size: 1.3em;
}

.map_table td {
    background-color: #EEE;
    border: 1px solid #CCC;
    padding: 5px 10px;
    text-align: left;
}

/************************エンドボックス************************/

#endbox{
	background-color:#DCDCDC;
	width : 100%;
	padding: 10px 0px;
	}

/************************工事中ページ************************/


#nothing_box
{
	background-image: url('../../img/etc/profiletop.png');
	}

