@charset "utf-8";

/*************************************************************************
#473737 #89716d #aa8b89 #5b4b4b #ebe9e9 #f6f0ea #930930
#e6d43e #bc0d3e #c0b9b9
**************************************************************************/

*{margin: 0px;padding: 0px;box-sizing:border-box;}
ol,ul{list-style: none;}
fieldset,img{border: none;}
q::before,q:after{content: "";}
br{letter-spacing: 0;}
header,footer,nav,main,section,article,aside{display: block;}

/*********************テキスト寄せ*********************/

.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}
.float_l{float: left;}
.float_r{float: right;}

/*********************フォント、フォーム、画像*********************/

em{
	font-weight: normal;
	font-style: normal;
	text-shadow: #c0b9b9 1px 1px 0, #c0b9b9 -1px -1px 0, #c0b9b9 -1px 1px 0, #c0b9b9 1px -1px 0,
			 #c0b9b9 0 1px 0, #c0b9b9 0 -1px 0, #c0b9b9 -1px 0 0, #c0b9b9 1px 0 0;
}

small{
	display: inline-block;
	font-size: 80%;
	line-height: 1.4em;}

.middle{
	font-size: 90%;
	line-height: 1.5em;
	letter-spacing: 0px;}

.red{color: #bc0d3e;}

address{
	font-style: normal;}

input, textarea, select{
	border: 1px solid #999999;
	color: #333333;
	margin: 5px 5px 10px 5px;
	padding: 4px;
	font-size: 100%;
	resize: none;
	background: #fcfcfc;
	vertical-align: bottom;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

img{
	vertical-align: middle;}

summary:hover{
	cursor : pointer;
	color: #cc3366;}

/*********************ボディ、リンク*********************/
	
body{
	color: #333333;
	font-size: 100%;
	line-height: 1.7em;
	background: url(img/footer.png) #333333;
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}

a:link, a:visited{
	color: #333333;
	text-decoration: underline;
}

a:hover, a:active{
	color: #c0b9b9;
	text-decoration: none;
}

a:hover img{
	position : relative;
	top : 1pt;
	left : 1pt;
}

.visited a:visited{
	color: #cccccc;
}

.visited a:hover{
	color: #c0b9b9;
	text-decoration: none;
}

/*********************本体レイアウト*********************/

#container{
	margin: 0px auto;
	padding: 150px 0px 0px 0px;
	background: url(img/body.jpg?0203) repeat-x top #ffffff;
}

#table{
	margin: 0px auto;
	padding: 20px 0px 80px 0px;
}

#index main, #rep main, #prof main{
	max-width: 700px;
}

/*********************ヘッダー*********************/

header{
	padding: 0px 0px 0px 0px;
	margin: 0px auto 40px auto;
	color: #000000;
	text-align: center;
	font-family: Arial;
	text-shadow: #ffffff 2px 0px,  #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px , #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px,
			#ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px,  #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}

h1{
	font-size: 250%;
	padding: 0px 0px;
}

h1 a:link, h1 a:visited{
	text-decoration: none;
	color: #000000;
}

h1 a:hover, h1 a:active{
	text-decoration: none;
	text-shadow: #c0b9b9 2px 0px,  #c0b9b9 -2px 0px, #c0b9b9 0px -2px, #c0b9b9 0px 2px, #c0b9b9 2px 2px , #c0b9b9 -2px 2px, #c0b9b9 2px -2px, #c0b9b9 -2px -2px,
			#c0b9b9 1px 2px, #c0b9b9 -1px 2px, #c0b9b9 1px -2px, #c0b9b9 -1px -2px, #c0b9b9 2px 1px,  #c0b9b9 -2px 1px, #c0b9b9 2px -1px, #c0b9b9 -2px -1px;
}

header ul.about{
	padding: 20px 0px;
	font-size: 90%;
	line-height: 1.6em;
}


/*********************メイン*********************/

main{
	padding: 0px 0px 0px 0px;
	margin: 0px auto 0px auto;
	text-align: left;
}

/*↓これはh3要素を含めたブロック*/
section{
	padding: 0px 0px 40px 0px;
	margin: 0px auto;
	clear: both;
	overflow: hidden;
}	

/*↓これはh3要素を含めないブロック*/
div.section_text{
	margin: 0px 0px 0px 120px;
	padding: 0px 0px 0px 0px;
}

section h3{
	margin: 0px auto 0px auto;
	padding: 0px 0px 0px 6px;
	font-size: 150%;
	color: #000000;
	font-family: 'Times New Roman',Georgia,serif;
	letter-spacing: 1px;
	text-shadow: #c0b9b9 1px 1px 0, #c0b9b9 -1px -1px 0, #c0b9b9 -1px 1px 0, #c0b9b9 1px -1px 0,
			 #c0b9b9 0 1px 0, #c0b9b9 0 -1px 0, #c0b9b9 -1px 0 0, #c0b9b9 1px 0 0;
	border-left: 6px solid #c0b9b9;
	width: 100px;
	float: left;
}

section h3 a:hover{
	color: #ffffff;
}

div.section_text h4{
	font-weight: normal;
	font-size: 110%;
	padding: 0px 5px;
	margin: 10px 0px 5px 0px;
	text-shadow: #c0b9b9 1px 1px 0, #c0b9b9 -1px -1px 0, #c0b9b9 -1px 1px 0, #c0b9b9 1px -1px 0,
			 #c0b9b9 0 1px 0, #c0b9b9 0 -1px 0, #c0b9b9 -1px 0 0, #c0b9b9 1px 0 0;
}

/*********************インデックス・作品リスト*********************/

#index section.works ul li{
	display: inline-block;
	padding-right: 15px;
}

/*------------既読リンクの色変え-----------
#index section.works ul.art li a:visited, #index section.works ul.tex li a:visited{
	color: #cccccc;
}

#index section.works ul.art li a:hover, #index section.works ul.tex li a:hover,{
	color: #c0b9b9;
}
-------------------------------------------*/

#index section.works span.new{
	vertical-align: top;
	display: none;
}
#index section.works span.new.is-show{
    display: inline-block;
}


/*********************インデックスのフッター*********************/

#index footer{
	margin: 0px auto 0px auto;
	font-weight: normal;
	color: #aaaaaa;
	max-width: 750px;
	text-align: left;
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
}

#index footer a:link, #index footer a:visited{
	color: #aaaaaa;
	text-decoration: underline;
}

#index footer a:hover, #index footer a:active{
	color: #bc0d3e;
	text-decoration: none;
}

#index footer #footer_flex2{
	flex-shrink: 0;
}
#index footer div.forbidden{
	color: #bc0d3e;
	padding: 10px;
	border: 1px solid #bc0d3e;
	border-radius: 6px;
}

#index footer details{
	margin-top: 5px;
	box-sizing: border-box;
}

#index footer form{
	margin-top: 10px;
}

#index footer form textarea,#index footer form input{
	background: #666666;
	color: #ffffff;
}

::placeholder {
  color: #aaaaaa;
}


/*********************返信*********************/


#rep div.section_text details{
	margin: 15px auto 0px auto;
	border-top: 1px dotted #c0b9b9;
	padding: 15px 0px 5px 0px;
	color: #555555;
}

#rep div.section_text details summary{
	cursor: pointer;
	padding: 8px 0px 4px 16px;
	text-shadow: #ffffff 1px 1px 0, #ffffff -1px -1px 0, #ffffff -1px 1px 0, #ffffff 1px -1px 0,
			 #ffffff 0 1px 0, #ffffff 0 -1px 0, #ffffff -1px 0 0, #ffffff 1px 0 0;
	list-style: none;
	color: #000000;
}
#rep div.section_text details summary::-webkit-details-marker {
  display: none;
}

#rep div.section_text details summary::after{
	content: " ▽";
	font-size: 90%;
	white-space: pre ;
}

#rep div.section_text details summary:hover{
	color: #c0b9b9;
}

#rep div.section_text details summary.rep00{background: url(img/rep00.png) no-repeat left;}
#rep div.section_text details summary.rep01{background: url(img/rep01.png) no-repeat left;}
#rep div.section_text details summary.rep02{background: url(img/rep02.png) no-repeat left;}
#rep div.section_text details summary.rep03{background: url(img/rep03.png) no-repeat left;}
#rep div.section_text details summary.rep04{background: url(img/rep04.png) no-repeat left;}
#rep div.section_text details summary.rep05{background: url(img/rep05.png) no-repeat left;}
#rep div.section_text details summary.rep06{background: url(img/rep06.png) no-repeat left;}
#rep div.section_text details summary.rep07{background: url(img/rep07.png) no-repeat left;}
#rep div.section_text details summary.rep08{background: url(img/rep08.png) no-repeat left;}
#rep div.section_text details summary.rep09{background: url(img/rep09.png) no-repeat left;}

#rep div.section_text ul li div.hide{
	margin: 3px 10px 5px 15px;
	color: #555555;
	
}


/*********************フッター*********************/

footer{
	padding: 40px 0px;
	text-align: center;
	line-height: 1.6em;
	color: #ffffff;
	font-weight: bold;
}

footer a:link, footer a:visited{
	color: #ffffff;
	text-decoration: none;
}

footer a:hover, footer a:active{
	color: #c0b9b9;
	text-decoration: none;
}

/*********************ギャラリー（作品ページ）*********************/

#gallery main#main_art{
	max-width: 1000px;
}

#gallery main#main_tex{
	max-width: 800px;
}

#gallery main#main_art p.caption{
	padding: 0px 0px 20px 0px;
}

#gallery main#main_art ul li{
	display: inline-block;
	padding: 10px;

}

#gallery main#main_art ul li img{
	width: auto;
	max-height: 100px;
	border: 1px solid #999999;
	box-sizing: content-box;
}

#gallery main#main_art ul li img.new{
	border: 2px solid #cc3366;
}

#gallery main#main_art ul li.page1:after{content:url(img/page1.png); margin-left:-28px; vertical-align: bottom;}
#gallery main#main_art ul li.page2:after{content:url(img/page2.png); margin-left:-28px; vertical-align: bottom;}
#gallery main#main_art ul li.page3:after{content:url(img/page3.png); margin-left:-28px; vertical-align: bottom;}
#gallery main#main_art ul li.page4:after{content:url(img/page4.png); margin-left:-28px; vertical-align: bottom;}
#gallery main#main_art ul li.page5:after{content:url(img/page5.png); margin-left:-28px; vertical-align: bottom;}
#gallery main#main_art ul li.page6:after{content:url(img/page6.png); margin-left:-28px; vertical-align: bottom;}
#gallery main#main_art ul li.page7:after{content:url(img/page7.png); margin-left:-28px; vertical-align: bottom;}
#gallery main#main_art ul li.page8:after{content:url(img/page8.png); margin-left:-28px; vertical-align: bottom;}
#gallery main#main_art ul li.page9:after{content:url(img/page9.png); margin-left:-28px; vertical-align: bottom;}
#gallery main#main_art ul li.page10:after{content:url(img/page10.png); margin-left:-28px; vertical-align: bottom;}


#gallery main#main_tex h3{
	text-align: center;
	padding: 0px 0px 30px 0px;
	margin: 0px;
	font-weight: normal;
	font-size: 130%;
	color: #000000;
	letter-spacing: 1px;
	text-shadow: #c0b9b9 1px 1px 0, #c0b9b9 -1px -1px 0, #c0b9b9 -1px 1px 0, #c0b9b9 1px -1px 0,
			 #c0b9b9 0 1px 0, #c0b9b9 0 -1px 0, #c0b9b9 -1px 0 0, #c0b9b9 1px 0 0;
}

#gallery main#main_tex h4{
	text-align: right;
	padding: 30px 0px;
	margin: 0px;
	font-weight: normal;
	font-size: 120%;
	color: #999999;
	text-shadow: #ffffff 2px 0px,  #ffffff -2px 0px, #ffffff 0px -2px, #ffffff 0px 2px, #ffffff 2px 2px , #ffffff -2px 2px, #ffffff 2px -2px, #ffffff -2px -2px,
			#ffffff 1px 2px, #ffffff -1px 2px, #ffffff 1px -2px, #ffffff -1px -2px, #ffffff 2px 1px,  #ffffff -2px 1px, #ffffff 2px -1px, #ffffff -2px -1px;
}

#gallery main#main_tex div#tex_text{
	width: 98%;
	margin: 0px auto;
	padding: 50px 0px 0px 0px;
}

#gallery main#main_tex div#tex_text p{
	padding: 10px 0px 20px 0px;
	margin: 0px auto;
	line-height: 2em;
}

#gallery p.date{
	text-align: right;
	font-size: 90%;
	color: #999999;
}

#gallery footer ul li{
	display: inline-block;
	padding: 0px 10px;
}


/*********************プロフ*********************/

#prof main{
	margin-top: 20px;
	width:95%;
}

#prof section.prof{
	text-align: center;
}

#prof section.prof img{
	margin-bottom: 10px;
}

#prof div.prof_art{
	display: flex;
	align-items: center;
}

#prof div.prof_art img{
	display: block;
	margin: 15px 15px 15px 0px;
}

#prof dl{
	border-top: 2px dotted #dddddd;
	margin-top: 10px;
	padding-top: 30px;
}

#prof dl dt{
	margin-top: 10px;
}

#prof dl dt::before{
	content: "・";
}

#prof dl dd{
	margin-left: 18px;
}


/*********************スマホ調整*********************/

@media screen and ( max-width:768px )
{
	img{
		max-width: 100%;
		height: auto;
		width : auto;}
	#container{
		width: 100%;
		display: block;
		padding: 120px 0px 0px 0px;}
	#table{
		width: 100%;
		padding: 0px 0px 50px 0px;}
	header{
		margin: 0px auto 0px auto;
		text-align: center;
		width: 100%;
		display: block;}
	header div{
		padding-right: 0px;}
	header div ul.about{
		margin: 0px auto;
		padding: 15px 0px;
		border-top: 3px dotted #c0b9b9;
		border-bottom: 3px dotted #c0b9b9;
		width: 85%;}
	header h1{
		width: 200px;
		height: 80px;
		margin: 30px auto 30px auto;}
	main{
		width: 100%;}
	section{
		width: 98%;
		padding: 20px 0px 0px 0px;}
	section h3{
		margin: 0px  auto 0px auto;
		float: none;
		text-align: left;
		width: 95%;}
	div.section_text{
		width: 90%;
		padding: 0px 0px 0px 0px;
		margin: 20px auto 20px auto;}
	.pconly{
		display: none;}
	#index #table{
		padding-top: 30px;}
	#index section.works ul.tex li{
		background: url(img/list.png) no-repeat left 0.5em;
		padding: 0px 0px 0px 15px;}
	textarea{
		width: 90%;}
	#index footer{
		display: block;
		width: 90%;
		margin: 0px auto;
		text-align: center;
		font-size: 90%;}
	#index footer #footer_flex1{
		margin-bottom: 15px;}
	#gallery main#main_art, #gallery main#main_tex{
		width: 95%;}
	#gallery main#main_art ul li{
		padding: 10px 15px 10px 5px;}
	#gallery main#main_art ul li img{
		max-height: 80px;}
	#prof div.prof_art{
		display: block;}
	#prof div.prof_art img{
		margin: 30px 0px 10px 0px;}
}

/*********************その他*********************/

#counter{position:absolute;visibility:hidden;}