@charset "UTF-8";
/* Default CSS is SmartPhone */
/** If Media CSS */
/*** ↓Display Width >= 1025px @ PC向けの位置調整↓ ***/
	@media (min-width:1024px){
		#Header #Menu_Box
			{
				flex-shrink:2;
				position:relative;
				text-align:right;

			}
		#Header #Menu
			{
				top:-10px;
				height:40px;	
			}
		#Header #Menu li
			{
				margin:0;
				padding:0;
				border:none;
				background-color:transparent;
				height:40px;
			}
		#Contents #Blog_Box
			{
					max-width:320px;
					position:absolute;
					right:100px;
			}
		
		#Contents #Pixiv_FanBox
			{
				position:absolute;
				bottom:0;
				right:80px;
			}
		#Copyright
		{
				font-size:16px;
				line-height:25px;
		}			
	}
/*** ↓Display Width <=1024px @ Contents Position Change↓  ***/
	@media (max-width:1023px){
		#Header #SiteName_Image
			{
				height:160px;
				min-height:160px;
			}
		#Header #Menu_Box
			{
				position:relative;
				left:0px;
				right:0px;
			}
		#Copyright
		{
				font-size:12px;
		}
	}
	
/*** ↓Display Height >= 768px @ Header & Footer is Sticky↓ ***/
	@media (min-height:768px){
		#Header
			{
				position:sticky;
				top:0;
			}
		#Footer
			{
				position:sticky;
				bottom:0;
			}
		
	}
	
/*#######################*/
/* ↓Default CSS↓ */
/*   *Default is SmartPhone */
/*#######################*/
body
	{
		display:block;
		margin:auto;
		box-sizing:border-box;
		width:100%;
		color:black;
		font-size:16px;
	}

h1 a:link,h2 a:link,h3 a:link
	{
		color:black;
	}
a:hover
	{
		background-color:pink;	
	}
.Red_Text
	{
		color:red;
		font-weight:bold;
	}
/*########## Header部  ##########*/
	#Header
		{
			border-radius:20px 20px 0 0;
			width:100%;
			max-width:100%;
			display:flex;
			flex-direction:column;

			align-items:stretch;
			flex-wrap:nowrap;
			background-image:url('./img/menu_bg.png');/*ヘッダー部 背景画像*/
			min-height:115px;
			max-height:115px;
			height:115px;
			padding-bottom:40px;
			z-index:999;
		}
	#Header #Title_Box
		{
			flex-grow:1;
			flex-shrink:1;
			max-width:400px;
		}
	#Header #Title_Box #SiteName_Image
		{
			cursor:pointer;
			background-color:transparent;
			border:none;
			background-image:url('img/site_name.png');
			background-repeat:no-repeat;
			background-size:contain;
			width:90%;
			height:75px;
			max-height:75px;
			min-width:100px;
			max-width:295px;
			margin-top:5px;
			margin-left:20px;
		}
	
/*########## Menu部  ##########*/
	#Menu
		{
			text-align:right;
			display:flex;
			justify-content:flex-end;
			align-items:flex-end;
			position:relative;
			top:-80px;
			right:0px;
			height:30px;
			margin:0 20px;

		}
	#Menu li
		{
			margin:0;
			padding:0;
			padding-top:5px;
			border:1px solid black;
			list-style:none;
			flex-basis:140px;
			width:140px;
			height:30px;
			background-color:white;
		}

	/** Menu Button **/
	#Menu .Menu_Button
		{
			cursor:pointer;
			width:100%;
			height:100%;
			background-repeat:no-repeat;
			background-color:transparent;
			background-position:center;
			background-size:contain;
			
			border:none;
		}
	/** Menu Button Image **/
	#Menu #Blog_Button
		{
			background-image:url('img/menu_blog.png');
		}
	#Menu #Blog_Button:hover
		{
			background-image:url('img/menu_blog_on.png');
		}
	#Menu #Pixiv_Button
		{
			background-image:url('img/menu_pixiv.png');
		}
	#Menu #Pixiv_Button:hover
		{
			background-image:url('img/menu_pixiv_on.png');
		}
	#Menu #Gallery_Button
		{
			background-image:url('img/menu_gallery.png');
		}
	#Menu #Gallery_Button:hover
		{
			background-image:url('img/menu_gallery_on.png');
		}			
	#Menu #Twitter_Button
		{
			background-image:url('img/menu_twitter.png');
		}
	#Menu #Twitter_Button:hover
		{
			background-image:url('img/menu_twitter_on.png');
		}
	#Menu #Contact_Button
		{
			background-image:url('img/menu_contact.png');
		}
	#Menu #Contact_Button:hover
		{
			background-image:url('img/menu_contact_on.png');
		}

/*########## Contents部  ##########*/
	#Contents
		{
			margin:20px 0;
			padding:0 20px;
			display:flex;
			flex-direction:column;
			min-height:768px;
		}
/** Contents_Item **/
	#Contents .Contents_Box
		{
			margin-bottom:20px;
		}
	#Contents .Contents_Box h2
		{
			margin:0;
			margin-bottom:5px;
			padding:5px 20px;
			border-bottom:2px solid gray;
			border-left:20px solid gray;
			border-right:0px;
			border-top:0px;
			border-radius:10px 0 0 10px;
		}
	#Contents .Contents_Box .Contents_Item
		{
			padding-left:10px;
			line-height:20px;
		}
	#Contents .Contents_Item
		{
			margin:0 25px;
		}
		
/** Top_Box **/
	#Contents #Top_Box
		{
			position:relative;
		}
	#Contents #Top_Box #Top_Image
		{
			width:100%;
		}
	
	#Contents #Top_Box #Top_Image img
		{
			width:100%;
		}
	
/*** PixivFanBox ***/
	#Contents #Top_Box #Pixiv_FanBox_Button
		{
				display:inline-block;
				background-color:gray;
				padding:5px;
		}		
	#Contents #Top_Box #Pixiv_FanBox_Button:hover
		{
				background-color:red;
		}

/** Blog Rss **/
	#Blog_Rss a
		{
			text-decoration:none;
		}
	#Blog_Rss
		{
			background-color:silver;
			position:relative;
			box-sizing:border-box;
			margin:0;
			padding:0;
			font-size:14px;
			width:100%;
			border:1px solid black;
			list-style-type:none;
		}
	#Blog_Rss li
		{
			position:relative;
			border-bottom:1px dotted black;
			box-sizing:border-box;
			width:100%;
			margin:5px 0;
			padding:5px;
		}
	#Blog_Rss li:hover
		{
			background-color:white;
		}
	#Blog_Rss .Blog_Date
		{
			color:black;
		}
	#Blog_Rss .Blog_Link
		{
			margin-left:5px;
			font-size:12px;
			text-decoration:underline;
		}

/** Work List **/
	#Work_List
		{
			margin:0;
			padding:0;
			list-style-type:box;
			max-height:200px;
			overflow-y:scroll;
		}
	#Work_List li
		{
			margin:0;
			padding:0;
		}
	
/** Dojin List **/
	#Dojin_List
		{
			list-style:none;
			margin:0;
			padding:0;
			display:flex;
			flex-direction:row;
			flex-wrap:wrap;
		}
	#Dojin_List a
		{
			text-decoration:none;
		}
	#Dojin_List .Dojin_Item
		{
			margin:0;
			padding:0;
			min-width:266px;
			min-height:180px;
		}
	#Dojin_List .Dojin_Item a:hover .Dojin_Image
		{
			background-color:red;
		}
	#Dojin_List .Dojin_Item a:hover .Dojin_Caption
		{
			color:red;
			z-index:2;
		}
		#Dojin_List .Dojin_Item .Dojin_Image
		{
			border:none;
			background-color:transparent;
			padding:2px;
			z-index:1;
		}
	#Dojin_List .Dojin_Item .Dojin_Caption
		{
			position:relative;
			top:-40px;
			margin:0 8px;
			padding:2px;
			text-align:center;
			opacity:0.8;
			color:white;
			font-weight:bold;
			background-color:black;
			font-weight:bold;
			font-size:20px;
			text-decoration:none;
		}
/** Link **/
	#Link h3
		{
			margin-bottom:5px;
		}
	#Link #Search_Link
		{
			display:flex;
			flex-wrap:wrap;
			list-style-type:none;
		}
		
	#Link #Search_Link li
		{
			margin-right:5px;
		}
/*########## Footer部  ##########*/
	#Footer
		{
			display:flex;
			flex-direction:column;
			align-items:center;
			justify-content:center;
			background-color:#bcbcbc;			
			box-sizing:border-box;
			width:100%;
			min-height:80px;
			height:100px;
			border-radius:0 0 20px 20px;
			z-index:999;
		}
	#Footer #Copyright
		{
			font-family:'cursive';
			color:white;
			font-weight:bold;
			text-align:center;
			vertical-align:middle;
		}