/* ================ 要素共通 ================ */
* {
	margin:0px;
}

body {
	margin:0px;
	font-family:Arial, sans-serif;
	text-align: left; 
	line-height:1.4;
}

.overflow-hidden{
	overflow: hidden;
}

.include{
	margin:0px;
	padding:0px;
	display:inline-block;
}


/* LINK要素（未訪問） */
a {
	text-decoration: none;
	color: #f60;
}
a:link {/*未訪問のリンク*/
	font-style:normal;
	line-height:1.2;
	color :#f60;
}
a:visited {/*訪問後のリンク*/
	text-decoration:none;
	color: #f90;
}
a:hover {/*マウスをのせたとき*/
	color: #f90;
}
a:active {/*クリック中*/
	color: #fc0;
}

h2 {
	font-size:20px;
	color: #f60;
}
b {
	color: #f60;
}
p {
	color: #fff;
}

input {
	border:1px #f60 solid;
}
/* ================ 機能共通 ================ */
#CONTENTS {
	width:900px;
	margin:0px auto 80px;
	padding:20px 0px 0px;
} 
/* ツリーの初期表示 */
.tree{
	display:none; 
}
.back_on{
	background-image: url("../image/backgraund.jpg");
}

/* フッター */
#FOOTER {
	width: 100%;
	height:40px;
	position: fixed;
	bottom: 0;
} 

.inline_div{
	display:inline-block;
	vertical-align:top;
}

.in_h2{
	display:inline-block;
	font-weight:normal;
}

/* ================ メニューmenu ================ */
#MENU_AREA {
	height:40px;
}

#MENU {
	display:block;
	float:inline-start;
	position: fixed;
	z-index: 50;
	width:100%;
	padding:8px 30px;
	text-align:center;
}

#MENU a{
	text-decoration: underline;
	margin:0px 10px;
	font-size:20px;
	font-weight: bold;
}

#MENU p{
	display:inline-block;
	margin:0px 15px;
	font-size:20px;
}

#MENU_BTN {
	display:none;
	z-index: 100;
}

/* ================ 大メニューMajorMenu ================ */

#MAJOR_MENU h2 {
	font-size:28px;
}
#MAJOR_MENU ul{
	margin-bottom:20px;
	font-size:20px;
}

#MAJOR_MENU li{
	padding: 0px 0pc 10px;
}

#MAJOR_MENU a{
	display:block;
	text-decoration: underline;
}

#MAJOR_MENU p{
	margin: 0px 30px;
	font-size:15px;
}


/* ================ イラストメニューIllustMenu ================ */
#ILUST_MENU {
	display:inline-block;
	margin-right:20px;
	vertical-align:top;
	overflow-y:auto;
	width:200px;
	height:480px;
}

#ILUST_MENU ul{
	padding:0px 5px 15px 35px;
	font-size:16px;
}

#ILUST_MENU a{
	text-decoration: underline;
}


/* ================ イラストページ系IllustPage ================ */
#FIRST_IMAGE_AREA{
	display:inline-block;
}


#ILUST_IMG {
	width:650px;
	display:inline-block;
	text-align:center;
}

#ILUST_IMG img{
	max-height:500px;
	max-width:600px;
	text-align:center;
}

#ILUST_IMG p{
	padding:10px;
}

/* ================ コンテンツメニューContentsMenu ================ */
#CONTENTS_MENU {
	display:inline-block;
	margin-right:20px;
	vertical-align:top;
	overflow-y:auto;
	width:200px;
	height:480px;
}

#CONTENTS_MENU ul{
	padding:0px 5px 10px 35px;
	font-size:16px;
}

#CONTENTS_MENU li{
	padding:0px 0px 5px 0px;
}

#CONTENTS_MENU a{
	text-decoration: underline;
}
#CONTENTS_MENU .small {
	margin-left:10px;
	font-size:13px;
}


/* ================ トップindex ================ */
/* 下地 */
#INDEX {
	height:100%;
	color: #fff;
}
#INDEX_LEFT {
	margin-left:15px;
	padding:5px 15px;
	display:inline-block;
	background-color: #030;
}
#INDEX_RIGHT {
	margin-left:15px;
	display:inline-block;
} 
#INDEX_TITLE {
	margin-bottom:10px;
	font-size:30px;
	color :#f60;
} 
#INDEX_MENU {
	margin-left:15px;
	margin-bottom:20px;
	font-size:22px;
	color:#f60;
	display:inline-block;
} 
#INDEX_MENU .menu{
	margin-top:10px;
	font-size:24px;
	font-weight: bold;
	vertical-align:bottom;
	color :#f60;
}
#INDEX_MENU .works{
	margin-left:15px;
	margin-bottom:5px;
	font-size:20px;
}
#INDEX_MENU .setting{
	margin-top:10px;
	font-size:18px;
}
#INDEX_MENU a {
	text-decoration: underline;
}
#INDEX_MENU p {
	color: #f90;
}
#INDEX_TALK {
	width:450px;
	height:100px;
	background-image: url("../image/talk.png");
	padding:auto;
	color: #000;
	text-align:center;
	vertical-align:middle;
}
#INDEX_TALK p {
	padding:30px 0px;
	font-weight: bold;
	font-size:20px;
	background-image: url("../../image/talk.png");
	color: #000;
}
#INDEX_IMAGE img {
	width:450px;
}




/* ================ アバウトabout ================ */
#ABOUT_SITES {
	display:inline-block;
	vertical-align:top;
}
#ABOUT h2 {
	display:inline-block;
	font-size:28px;
}
#ABOUT p {
	margin: 0px 20px;
}
#ABOUT em {
	font-size:20px;
	font-style:normal;
	font-weight: bold; 
}

#SITES_MAP {
	margin: 0px 40px;
	display:inline-block;
	vertical-align:top;
}
#SITES_MAP ul {
	padding: 0px 20px;
	list-style-type: none;
}
#SITES_MAP li a {
	text-decoration: underline;
	font-weight: bold; 
}

/* ================ ニュースnews ================ */

#NEWS ul {
	margin:5px 10px;
	display:block;
	vertical-align:top;
}

#NEWS_TIMELINE {
	margin-right:30px;
}

/* ================ グッズGOODS ================ */
#GOODS_MENU {
	width:430px;
	margin-right:30px;
	padding:0px 3px;
	overflow-y:auto;
}

#GOODS_MENU ul{
	list-style-type: none;
	margin:0px 0px 30px 0px;
	padding:1px;
	border:1px solid rgba(255,255,255,0.3);
}

#GOODS_MENU li{
	margin:1px;
	display:block;
	border:1px solid rgba(255,255,255,0.3);
}

.link_image{
	width:100px;
	margin:3px;
	display:inline-block;
}

.link_image img{
	max-height:130px;
	max-width:100px;
	border:1px solid;
}

#GOODS .goods_contents{
	margin:2px;
	display:inline-block;
	vertical-align :top;
}

#GOODS .goods_contents h2{
	margin:10px 0px 5px 0px;
}

.goods_contents p{
	margin:0px 10px;
}

.goods_contents em{
	font-size:16pt;
}

#GOODS_MENU input{
	margin:5px;
	height:30px;
	width:30px;
	vertical-align :top;
}

#GOODS .inline_div{
	vertical-align :top;
	height:550px;
}

.goods_sample_div{
	width:400px;
	display:inline-block;
}

.goods_sample_div h2{
	display:inline-block;
}

.goods_sample_div #IMAGE_LINK{
	margin:0px 50px;
}

#GOODS_SAMPLE{
	max-height:350px;
	max-width:390px;
	display:block;
}

#TOTAL{
	font-size:16pt;
}

#GOODS .textbox{
	margin:5px;
	height:60px;
	width:250px;
}

/* ================ リンクlink ================ */
/* 下地 */
#LINK h2 {
	display:inline-block;
	font-size:28px;
}
#LINK p {
	margin: 0px 10px;
	display:inline-block;
}

#LINK ul {
	padding:5px 0px;
	list-style-type: none;
}
#LINK li {
	margin:0px 10px 5px 10px;
	display:inline-block;
	text-align:right;
	font-size:15px;
}
#LINK li a{
	display:block;
	target:blank;
}
#LINK li a p {
	margin:0px;
	width:190px;
	height:30px;
	padding:5px;
	border:1px solid;
	font-size:25px;
	text-align:center;
	vertical-align:middle;
}

#LINK_ABOUT h2 {
	display:block;
	margin: 50px 0px 5px;
}
#LINK_ABOUT p {
	margin: 0px 30px 0px 0px;
	vertical-align:top;
}
#LINK_ABOUT img {
	text-align:right;
}

/* ================ プロフィールprofile ================ */
#PROFILE h2 {
	font-size:28px;
}
#PROFILE p {
	margin: 0px 30px;
}

#PROFILE_LEFT {
	vertical-align:top;
	margin-left:10px;
	padding:5px 10px;
	display:inline-block;
}

#PROFILE_RIGHT {
	vertical-align:top;
	display:inline-block;
} 
#PROFILE_RIGHT li{
	margin-bottom:5px;
} 
#PROFILE_RIGHT p{
	margin:0px;
} 


#SKEB_SITUATION dl{
    display:flex;
    flex-wrap: wrap;
    border: 1px solid #fff;
    border-top: none;
    text-align: center;
}
#SKEB_SITUATION dt{
    width: 30%;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #fff; 
}
#SKEB_SITUATION dd{
    padding: 5px;
    margin: 0;
    border: 1px solid #ccc;
    width: 70%;
    box-sizing: border-box;
}

/* ================ キャラクターcharacter ================ */

	.chara_list{
		list-style-type: none;
		text-align:left;
		padding: 5px;
	}

	.chara_list h1{
		margin:20px 0px;
		height:50px;
		background-image: url("../image/backgraund.jpg");
	}
	.chara_list h2{
		margin-top:5px;
		padding-left:10px;
		border-top: double 4px;
	}
	.chara_list h5{
		margin-top:15px;
		margin-left:0px;
		border-top: dashed 1px;
		color :#f60;
	}

	.chara_list ul{
		margin-left:0px;
		padding-inline-start:20px;
	}
	.chara_list li{
		display: inline;
		white-space:nowrap;
	}
	
	.chara_list div {
		display:inline-block;
	}
	
	.chara_list img{
		margin-bottom:3px;
		width:80px;
		height:80px;
	}
	
	.chara_div{
		margin-bottom:5px;
		padding:5px;
		width:100px;
		height:100px;
		vertical-align:top;
		text-align:center;
		border: 1px solid rgba(255,200,150,0.2);
		background-color: rgba(255,255,255,0.2);
	}

	/*マウスをのせたとき*/
	.chara_div:hover{
		font-weight: bold; 
		border: 1px solid rgba(255,200,150,0.5);
		background-color: rgba(255,255,255,0.1);
	}

	/*未作成*/
	.chara_list .off{
		border-color:rgba(255,200,150,0.2);
		background-color: rgba(255,255,255,0.05);
	}
	.chara_list .off:hover{
		font-weight: normal; 
		border-color: rgba(255,200,150,0.2);
	}
	.chara_list .off a:hover{
		color: #f60;
	}

	.chara_div div{
		display:block;
	}
	

	.chara_temp_div{
		width:100%;
		margin-top:50px;
		text-align:right;
	}
	.chara_temp_div h2{
		margin-bottom:10px;
	}
	.chara_temp_div a{
		font-size:30px;
		font-weight: bold; 
	}


	#CHARA_MENU{
		margin-bottom:20px;
	}

	#CHARACTER_TOP {
		display:block;
		height:30px;
		text-align:center;
	}

	#CHARACTER_TOP a{
		margin:0px 40px;
		display:inline-block;
		width:150px;
	}

	#CHARACTER_LEFT {
		display:inline-block;
		width:410px;
		margin-bottom:50px;
	}

	#CHARACTER_LEFT #IMAGE_DIV{
		height:410px;
		text-align:center;
	}

	#CHARACTER_LEFT ul{
		padding : 5px;
		margin:20px 0px 0px 0px;
		border: solid 1px #f90;
	}

	#CHARACTER_LEFT li{
		display: inline;
		margin-right:20px;
		list-style: none;
		white-space:nowrap;
	}

	#CHARACTER_LEFT img{
		max-height:400px;
		max-width:400px;
		text-align:center;
	}

	#CHARACTER_RIGHT {
		margin-left:15px;
		margin-bottom:50px;
		display:inline-block;
		width:450px;
		vertical-align:top;
	} 

	#CHARACTER_RIGHT dl{
		margin-bottom:20px;
	}

	#CHARACTER_RIGHT dt{
		color: #f90;
		float: left;
	}

	#CHARACTER_RIGHT dd{
		margin-left: 80px;
	}

	#CHARACTER_RIGHT .chara_list{
		margin:20px 0px 0px 0px;
		border: solid 1px #f90;
	}
	
	#CHARACTER_RIGHT .chara_list li{
		display:block;
	}

	#CHARA_VER{
		margin:5px 10px;
		padding:0px;
		border: solid 0px #f90;
	}

	#CHARA_VER li{
		display:inline;
		margin-right:15px;
	}
	
	#CHARA_VER li:before {
		content: "＞";
	}

	.world_link .right{
		display:block;
		padding-right:10px;
		font-size:15px;
		text-align:right;
	}
	#CHARACTER_WORLD h2{
		margin-top:30px;
		border-top: double 4px;
	}
	#CHARACTER_WORLD h4{
		margin-top:10px;
	}
	#CHARACTER_WORLD ul{
		width:100%;
	}
	#CHARACTER_WORLD .full li{
		display:list-item;
		width:100%;
		align-items: stretch;
		margin-bottom:10px;
		border-bottom: 2px dashed #f90;
	}

	#CHARACTER_WORLD .full .left{
		vertical-align:top;
		width:230px;
	}
	#CHARACTER_WORLD .full img{
		width:220px;
		height:auto;
	}
	#CHARACTER_WORLD .full .center{
		width:520px;
		padding:10px 0px;
		text-align:left;
		vertical-align:top;
	}
	#CHARACTER_WORLD .right{
		width:100%;
	}
	#CHARACTER_WORLD .right img{
		width:80px;
	}
	#CHARACTER_WORLD .right p{
		margin-bottom:20px;
	}

	.chara_div_right{
		width:auto;
		display:block;
		height:auto;
		margin:0px;
		margin-right:10px;
		padding:0px;
		border:solid 1px;
		border-right:double 10px #f60;
	}
	.chara_div_right img{
		margin:0px;
	}
	.chara_div_right:hover{
		border-color:#f90;
	}	
	.chara_div_right .off{
		border-color:#f90;
	}

/* ================ キャラクター（06）character ================ */
	.chara_06{
		width:100%;
		background-image: url("../works/character/image/06_world_back.jpg");
		color: #555;
	}
	.chara_06 h2{
		color: #ff1493;
	}
	.chara_06 h4{
		color: #ff1493;
	}
	.chara_06 b{
		color: #ff1493;
	}
	.chara_06 p{
		color: #555;
	}
	.chara_06 a{
		color: #ff1493;
	}
	.chara_06 a:link{
		color: #ff1493;
	}
	.chara_06 a:hover{
		color: #ffb6c1;
	}
	.chara_06 a:visited{
		color: #ff69b4;
	}

	.chara_06 .chara_div{
		background-color: #fff0f5;
		border-color: #ff1493;
	}
	.chara_06 .chara_div:hover{
		background-color: rgba(255,255,255,0.1);
		border-color: #ffb6c1;
	}

	.chara_06 .off{
		background-color: rgba(255,255,255,0.1);
		border-color:#ffb6c1;
	}
	.chara_06 .off:hover{
		border-color: #ffb6c1;
		background-color: rgba(255,255,255,0.1);
	}
	.chara_06 .off a:hover{
		color: #ff1493;
	}

	.chara_06 #CHARACTER_LEFT ul{
		border-color: #ff1493;
	}
	
	.chara_06 #CHARACTER_RIGHT dt{
		color: #ff1493;
	}
	.chara_06 #CHARACTER_RIGHT ul{
		border-color: #ff1493;
	}
	.chara_06 #CHARACTER_WORLD .full li{
		border-color:#ff1493;
	}
	.chara_06 .chara_div_right{
		border-color:#ff1493;
	}
	.chara_06 .chara_div_right:hover{
		border-color:#ffb6c1;
	}	
	.chara_06 .off{
		border-color:#ffb6c1;
	}

/* ================ キャラクター（01）character ================ */
	.chara_01{
		width:100%;
		background: linear-gradient(-20deg, #4b0082 0%, #000033 100%);
		color: #99ffff;
	}
	.chara_01 h2{
		color: #9933ff;
	}
	.chara_01 h4{
		color: #9933ff;
	}
	.chara_01 b{
		color: #9933ff;
	}
	.chara_01 p{
		color: #99ffff;
	}
	.chara_01 a{
		color: #9933ff;
	}
	.chara_01 a:link{
		color: #9933ff;
	}
	.chara_01 a:hover{
		color: #cc66ff;
	}
	.chara_01 a:visited{
		color: #6600cc;
	}
	.chara_01 .chara_div{
		background-color: #330066;
		border-color: #9933ff;
	}
	.chara_01 .chara_div:hover{
		background-color: rgba(200,150,255,0.2);
		border-color: #9933ff;
	}
	.chara_01 .off{
		background-color: rgba(255,255,255,0.1);
		border-color:#ffb6c1;
	}
	.chara_01 .off:hover{
		border-color: #ffb6c1;
		background-color: rgba(255,255,255,0.1);
	}
	.chara_01 .off a:hover{
		color: #9933ff;
	}
	.chara_01 #CHARACTER_LEFT ul{
		border-color: #9933ff;
	}
	.chara_01 #CHARACTER_RIGHT dt{
		color: #9933ff;
	}
	.chara_01 #CHARACTER_RIGHT ul{
		border-color: #9933ff;
	}
	.chara_01 #CHARACTER_WORLD .full li{
		border-color:#9933ff;
	}
	.chara_01 .chara_div_right{
		border-color:#9933ff;
	}
	.chara_01 .chara_div_right:hover{
		border-color:#9933ff;
	}	
	.chara_01 .off{
		border-color:#ffb6c1;
	}
/* ================ 漫画comic ================ */
#COMIC{
	text-align:center;
}

#COMIC #CONTENTS_MENU{
	text-align:left;
}
.back_link{
	width:900px;
	position: fixed;
	bottom: 40px;
	padding:5px 0px;
	background:#f90;
	color: #030;
}

#COMIC_MENU ul{
	margin-bottom:20px;
}

#COMIC_MENU li{
	display: inline;
	margin-right:20px;
	margin-bottom:20px;
	width: 300px;
	text-align:left;
}

.comic_cover{
	width: 250px;
	height: 250px;
	padding:5px;
	background:#060;
	border: solid 1px #f90;
	display: inline-block;
	text-align:center;
}

.comic_cover span{
	display: block;
	margin:5px;
	font-weight:bold;
}

.comic_cover img{
	max-width:250px;
	max-height:220px;
	display: ininline-block;
}



#COMIC_VIEW{
	text-align:center;
	background:#333;
}

.float_right{
	position: fixed;
	right:0;
	top:0;
	height: 95vh;
	width:40vh;
}

.float_left{
	position: fixed;
	left:0;
	top:0;
	height: 90vh;
	width:40vh;
}

#COMIC_VIEW .comic_view_page{
	width:100%;
	display:flex;
	padding-bottom:40px;
	flex-flow: row-reverse;
}


#COMIC_VIEW .switch{
	width:100%;
	height:100%;
}

#COMIC_VIEW .right{
	width:50%;
	display: inline;
	margin:0px 1px;
	text-align:left;
}
#COMIC_VIEW .left{
	width:50%;
	display: inline;
	margin:0px 1px;
	text-align:right;
}

#COMIC_VIEW .comic_view_page img{
	height: 95vh;
}


#COMIC_VIEW .back_link{
	text-align:center;
	width:100%;
	background:#fff;
	bottom: 0px;
	border: solid 1px #5ce;
}
/* ================ 設定setting ================ */
#SETTING_LEFT {
	width:280px;
	padding:5px 15px;
	display:inline-block;
	vertical-align:top;
}
#SETTING_RIGHT {
	width:450px;
	padding:10px;
	display:inline-block;
	text-align:center;
}
#SETTING_MENU h2{
	font-size:20px;
}
#SETTING_MENU .navi{
	margin:8px;
	font-size:18px;
	text-decoration: underline;
}
#SETTING_TALK {
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
	text-align:center;
	vertical-align:middle;
	background-image: url("../../image/talk.png");
	color: #000;
}
#SETTING_TALK p {
	padding:25px 0px;
	font-size:20px;
}
#SAMPLE img {
	width:400px;
}
#CLOSE{
	width:500px;
	margin:10px 0px;
	text-align:center;
} 

/* ================ 誕生日birthday ================ */
#BIRTHDAY_LIST{
	margin-bottom:50px;
}

#BIRTHDAY_LIST table {
	margin:10px;
	display:inline-block;
	vertical-align:top;
	border: solid 2px #f60;
	border-collapse: collapse;
}
#BIRTHDAY_LIST th {
	padding:2px 5px;
	width:50px;
	border: dashed 1px #f60;
	color:#f60;
}

#BIRTHDAY_LIST td {
	width:200px;
	border: dashed 1px #f60;
	padding:2px 5px;
}