@charset "UTF-8";
/* スタイルシート */

:root{
	--color_bg:#faf5f0;
	--color_text:#111;
	--color_link:#06f;
	--color_navi:#567;
	--color_main:#789;
	--color_guide:#eee;
	--color_button:#f77;
	--base:16px;
}
@media screen and (min-width:720px){
	:root{
		--base:14px;
	}
}

/* html */
body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,li,section,article,aside,fieldset,figure,textarea,input{
	margin:0;
	padding:0;
	line-height:1;
	box-sizing:border-box;
}
html{
	background-color:var(--color_bg);
}
body{
	font-family:'Noto Sans JP','Tahoma','helvetica','メイリオ';
	color:var(--color_text);
	font-size:var(--base);
}
h1,h2,h3,h4,h5,h6{
	font-size:var(--base);
}
textarea,input[type='text']{
	appearance:none;
	font-family:inherit;
	font-size:100%;
	border:1px solid #ccc;
	border-radius:3px;
	outline:none;
	padding:0.2em;
}
textarea{
	line-height:1.3;
}
@media screen and (min-width:720px){
	body{
		font-size:var(--base);
		display:grid;
		gap:20px;
		min-height:100vh;
		grid-template-columns:1fr 720px 300px 1fr;
		grid-template-rows:60px 1fr 60px;
	}
	h1,h2,h3,h4,h5,h6{
		font-size:var(--base);
	}
}
a{
	color:var(--color_link);
	text-decoration:none;
}
img{
	border:0;
	vertical-align:bottom;
}
ul{
	list-style-type:none;
}
fieldset{
	border:none;
}
code{
	font-family:'Tahoma';
	color:purple;
	font-weight:bold;
}

/* layout */
body > main{
	margin:80px 2% 20px;
}
body > aside{
	margin:20px 2% 0;
}
body > main,
body > aside{
	display:flex;
	flex-direction:column;
	gap:1em;
}
@media screen and (min-width:720px){
	header{
		grid-row:1;
		grid-column:1/5;
	}
	body > main{
		margin:0;
		grid-row:2;
		grid-column:2;
	}
	body > aside{
		margin:0;
		grid-row:2;
		grid-column:3;
	}
	footer{
		grid-row:3;
		grid-column:1/5;
	}
}

/* common */
.font_mincho{
	font-family:'Zen Old Mincho';
}
.box,
#listbox > li{
	background-color:#fff;
	border-radius:5px;
	box-shadow:0 0 5px rgba(0,0,0,0.02);
}
.box p.error{
	line-height:1.5;
	color:red;
	font-weight:bold;
}
.box > h1,
.box > h2{
	font-size:110%;
	padding:var(--base);
	border-bottom:1px solid rgba(0,0,0,0.05);
}
.box > article{
	display:flex;
	flex-direction:column;
	gap:1em;
	padding:var(--base);
}
#pagetitle{
	font-weight:bold;
	margin:10px 0;
}
.notice{
	color:#f11;
}
.submit{
	display:inline-block;
	border-radius:3px;
	line-height:1;
	padding:1em 2em;
	background-color:var(--color_button);
	color:#fff;
}
.submit.cancel{
	background-color:#999;
}
.submit.delete{
	background-color:#000;
	color:#ff0;
}
.mouseover,
aside a,
#tag_title a{
	transition:.3s;
}
.mouseover:hover,
aside a:hover,
#tag_title a:hover{
	opacity:.7;
}
.pointer{
	cursor:pointer;
}
.fs90{
	font-size:90%;
}
.fs80{
	font-size:80%;
}
.fs70{
	font-size:70%;
}

/* header */
header{
	position:fixed;
	top:0;
	z-index:4096;
	width:100%;
	height:60px;
	box-shadow:0 0 20px rgba(0,0,0,0.5);
	background-color:var(--color_navi);
	display:flex;
	justify-content:space-between;
}
header #sitename{
	display:flex;
	background:url('/img/logomark.png') no-repeat 10px 50% / 40px;
	padding:0 0 0 60px;
}
header nav input{
	display:none;
}
header nav label{
	position:absolute;
	right:0;
	display:flex;
	align-items:center;
	justify-content:center;
	width:60px;
	height:60px;
	cursor:pointer;
}
header nav label div,
header nav label:before,
header nav label:after{
	display:block;
	content:'';
	width:30px;
	height:2px;
	background-color:#fff;
	position:absolute;
	transition:all .3s;
}
header nav label:before{
	transform:translateY(9px);
}
header nav label:after{
	transform:translateY(-9px);
}
header ul{
	position:relative;
	top:60px;
	display:flex;
	flex-direction:column;
	gap:0;
	background-color:var(--color_navi);
	transform:translateX(100%);
	transition:0.3s;
}
#menu_switch:checked ~ ul{
	transform:translateX(0);
}
#menu_switch:checked ~ label div{
	transform:rotate(180deg);
	opacity:0;
}
#menu_switch:checked ~ label:before{
	transform:translateY(0px) rotate(225deg);
}
#menu_switch:checked ~ label:after{
	transform:translateY(0px) rotate(135deg);
}
header a{
	display:flex;
	align-items:center;
	height:60px;
	color:#fff;
	top:0;
	font-weight:bold;
	transition:.3s;
	position:relative;
}
header a:hover{
	color:#fc0;
	top:-2px;
}
header ul a{
	padding:0 1em;
}
@media screen and (min-width:720px){
	header{
		position:relative;
		justify-content:center;
	}
	header #sitename{
		padding:0 1em 0 60px;
	}
	header nav label{
		display:none;
	}
	header ul{
		flex-direction:row;
		gap:2em;
		position:static;
		transform:unset;
	}
	header ul a{
		padding:0;
	}
}

/* index.php -> guide & change_font */
#guide{
	display:flex;
	flex-direction:column;
	gap:1.2em;
	justify-content:center;
	align-items:center;
	background-color:var(--color_guide);
	padding:0.5em 1em;
	border-radius:5px;
}
#guide h1{
	font-size:120%;
	padding:var(--base) 0;
}
#change_font{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:1em;
}
#change_font span{

}
#change_font span:hover{

}
#change_mincho{
	position:relative;
	width:2em;
	height:1em;
	background-color:rgba(0,0,0,.25);
	border-radius:1em;
	cursor:pointer;
	transition:.3s;
}
#change_mincho input{
	width:0;
	height:0;
}
#change_mincho:has(:checked){
	background-color:rgba(0,0,90,0.5);
}
#change_mincho:after{
	position:absolute;
	left:0;
	content:'';
	width:1em;
	height:1em;
	background-color:#fff;
	border-radius:50%;
	box-shadow:0 0 2px rgba(0,0,0,.25);
	transition:.3s;
}
#change_mincho:has(:checked):after{
	left:1em;
}

@media screen and (min-width:720px){
	#guide{
		flex-direction:row;
		justify-content:space-between;
	}
	#change_font{

	}
	#change_font span{

	}
}

/* listbox */
#listbox{
	display:flex;
	flex-direction:column;
	gap:3em;
}
#listbox article{
	padding:5%;
	word-break:break-all;
}
#listbox.mincho article{
	font-family:'Zen Old Mincho';
}
#listbox h2 a{
	display:flex;
	justify-content:center;
	padding:1em 0 2em;
	color:var(--color_text);
	font-size:130%;
	line-height:1.4;
	transition:.3s;
}
#listbox h2 a:hover{
	color:var(--color_link);
}
#listbox .upday{
	font-size:80%;
	padding:0.5em 1em;
	background-color:var(--color_main);
	color:#ff0;
	display:flex;
	gap:1em;
}
#listbox .info{
	font-size:90%;
	padding:1em;
	display:flex;
	justify-content:right;
	gap:1em;
	border-bottom:1px dotted #ccc;
}

#listbox .is_image{
	color:#852;
}
#listbox .text{
	line-height:2;
}
#listbox .more{
	margin:1em 0;
	text-align:right;
}
#listbox #like{
	border-top:1px solid #eee;
	text-align:center;
	padding:1.5em;
}
#listbox  ul.tags{
	padding:1em;
	display:flex;
	justify-content:right;
	gap:1em;
}
#listbox ul.tags li{
	font-size:90%;
}
#listbox ul.tags li a::before{
	content:'#';
}
#listbox span.image{
	display:flex;
	justify-content:center;
}
#listbox span.image img{
	max-width:100%;
}
#listbox span.deleted{
	color:#f66;
	background:#fcc;
}

/* to_list */
#to_list{
	text-align:center;
	margin-bottom:1em;
}
#to_list a{
	display:block;
	background-color:#777;
	border-radius:5px;
	font-weight:bold;
	padding:15px;
	color:#fff;
}

/* tag_list tag_title */
ul#tag_list{
	display:flex;
	flex-direction:column;
	gap:0.4em;
}
#tag_list > li{
	flex:1 1 auto;
}
#tag_list > li a{
	display:flex;
	justify-content:space-between;
	align-items:center;
	border:1px solid #eee;
	padding:1em 0.5em;
	line-height:1.2;
	transition:.3s;
}
#tag_list > li a:hover{
	background-color:#eee;
}
#tag_list > li a small{
	display:inline-block;
	color:rgba(0,0,0,0.25);
}
@media screen and (min-width:720px){
	ul#tag_list{
		flex-direction:row;
		flex-wrap:wrap;
	}
	#tag_list > li{
		font-size:90%;
	}
	#tag_list > li a{
		flex-direction:column;
		gap:0.2em;
		justify-content:left;
		align-items:stretch;
		padding:0.5em;
	}
}

ul#tag_title{
	display:flex;
	flex-direction:column;
}
#tag_title > li{
	border-bottom:1px solid #eee;
}
#tag_title > li a{
	display:flex;
	flex-direction:column;
	gap:0.25em;
	padding:1em 0;
	color:var(--color_text);
}
#tag_title .info{
	font-size:80%;
	display:flex;
	gap:1em;
}
#tag_title > li h2{
	line-height:1.5;
	color:var(--color_link);
}

/* side -> latest */
.latest ul{
	padding:0 1em 1em;
}
.latest li:not(:first-child){
	border-top:1px solid rgba(0,50,100,0.1);
}
.latest li a{
	display:flex;
	gap:0.5em;
	align-items:center;
}
.latest li a b{
	white-space:nowrap;
	overflow-x:hidden;
	text-overflow:ellipsis;
	width:var(--base);
	flex:1 0 auto;
	line-height:3;
}
.latest li a span{
	color:rgba(40,30,20,0.5);
}
.latest li a:before{
	content:'';
	display:inline-block;
	background-color:var(--color_bg);
	width:1em;
	height:1em;
	border-radius:100%;
	box-shadow:inset 0 2px 2px #ccc;
}
@media screen and (min-width:720px){
	.latest li a{
		font-size:90%;
	}
}

/* side -> latest_comment */
.latest_comment ul{
	padding:0 1em 1em;
}
.latest_comment li:not(:first-child){
	border-top:1px solid rgba(0,50,100,0.1);
}
.latest_comment li a{
	display:block;
	padding:1em 0;
	line-height:1.3;
}
.latest_comment li a b{
	font-weight:normal;	
	font-size:90%;
}
.latest_comment li a span{
	font-size:80%;	
	color:rgba(40,30,20,0.5);
	font-style:italic;
}


}

/* bbs form */
#comment form{

}
#comment form#replyForm{
	display:none;
}
#comment form fieldset{
	display:flex;
	flex-direction:column;
	background-color:rgba(0,0,0,0.05);
	border-radius:5px;
	padding:2%;
}
#comment form dt,
#comment form dd,
#comment form label,
#comment form p{
	line-height:1.5;
}
#comment form dt{
	font-weight:bold;
}
#comment form dt small{
	font-weight:normal;
}
#comment form dd{
	margin:0.25em 0 1.5em;
}
#comment form textarea{
	width:100%;
	height:6em;
	resize:vertical;
}
/*
#comment form span.submit{
	display:inline-block;
	border-radius:3px;
	padding:0.5em 2em;
	background-color:var(--color_button);
	color:#fff;
}
*/
/* bbs trip switch */
#comment form span.switch label{
	display:inline-block;
	background-color:#f33;
	color:#fff;
	padding:0.2em 1em;
	font-size:80%;
	border-radius:2em;
	cursor:pointer;
}
#comment form dd.trip{
	font-size:90%;
	margin-bottom:0;
	display:grid;
	grid-template-rows:0fr;
	transition:.3s;
}
#comment form:has(#trip_switch:checked) dd.trip{
	grid-template-rows:1fr;
	padding:0.25em 0;
}
#comment form dd.trip > div{
	overflow:hidden;
}
#comment form #tripkeyList{
	margin-top:0.5em;
	padding:1em;
	background-color:rgba(250,240,210,1);
}
#comment form #tripkeyList ul{
	display:flex;
	gap:0.5em 1em;
	flex-wrap:wrap;
	margin-top:0.5em;
}
#trip_switch{
	display:none;
}
/* bbs error */
.bbsError ul{
	font-size:80%;
	color:#f00;
	display:flex;
	flex-direction:column;
	gap:0.5em;
}
.bbsError ul li{
	margin-left:1em;
	line-height:1.5;
	list-style-type:disc;
}
/* bbs side tripkey corner リニューアル後は不要 */
.tripkey{
	background-color:rgba(250,240,210,1);
	box-shadow:0 0 5px #eee;
}
.tripkey ul{
	padding:0 1em 1em;
	display:flex;
	flex-wrap:wrap;
	gap:0.5em 1em;
	font-size:80%;
}
/* bbs nav */
#comment nav{

}
#comment nav ul{
	display:flex;
	justify-content:space-between;
}
/* bbs main */
#comment .note{
	line-height:1.5;
	font-size:80%;
}
#comment > article > ul{
	display:flex;
	flex-direction:column;
}
#comment > article > ul > li{
	display:flex;
	flex-direction:column;
	border-top:1px solid #ccc;
	padding:1em 0 2em;
}
#comment > article > ul > li p{
	line-height:1.5;
}
#comment .comment_title{
	font-weight:bold;
}
#comment .comment_text{
	font-size:90%;
}
#comment .comment_text .arrow{
	color:#33c;
	background-color:#fff;
	display:inline-block;
	font-size:90%;
	padding:0.1em 0.4em;
	border-radius:3px;
}
#comment dl.info{
	display:flex;
	gap:1em;
	font-size:80%;
	margin-bottom:2em;
}
#comment dl.info .number{
	color:#666;
}
#comment dl.info .name{
	color:#696;
}
#comment dl.info .day{
	color:#999;
}

#comment aside{
	margin:2em 0 1em;
	font-size:90%;
	color:var(--color_link);
}
#comment aside .btn{
	padding:0 1em;
}
#comment aside .btn.cancel{
	display:none;
}
@media screen and (min-width:720px){
	#comment dl.info{
		font-size:90%;
	}
	#comment .comment_text{
		font-size:100%;
	}
}

/* about history hello */
#hello ul{

}
#hello li{
	line-height:1.5;
	border-bottom:1px dotted #ccc;
	padding:0.5em 0;
}
#hello li:last-child{
	border:none;
}

#history{

}
#history ul{
	display:flex;
	flex-direction:column;
	gap:0.5em;
	font-size:90%;
	height:6em;
	overflow:auto;
}
#history li{
	display:flex;
	gap:1em;
}
#history li p{
	line-height:1.5;
	margin-top:-0.25em;
}

/* toukouGuide */
#toukouGuide{
	background-color:#eee;
}
#toukouGuide ol{
	margin-bottom:1em;
}
#toukouGuide ul{
	margin-bottom:1em;
	list-style-type:'※';
}
#toukouGuide li{
	margin-left:1em;
	font-size:90%;
	line-height:1.5;
}

/* toukou_table */
#toukou_search{
	display:flex;
	gap:0.5em;
	padding:var(--base);
	justify-content:space-between;
}
#toukou_search h2{
	flex:0 1 auto;
}
#toukou_search form{
	display:flex;
	align-items:center;
	gap:0.5em;
}
#toukou_search form input[type='text']{
	height:20px;
	width:8em;
}
#toukou_search form span{
	display:inline-flex;
	font-size:80%;
	align-items:center;
	height:20px;
	padding:0 0.5em;
	border-radius:3px;
	line-height:1;
	background-color:var(--color_button);
	color:#fff;
}
#toukou_manual{
	font-size:80%;
	color:#666;
	padding:var(--base);
}

#toukou_list{
	display:flex;
	flex-direction:column;
}
#toukou_list > li{
	display:grid;
	grid-template-columns:1fr 1fr;
	border-top:1px solid #ccc;
	padding:var(--base);
	gap:0.5em;
}
#toukou_list div.title{
	grid-column:1/3;
	grid-row:auto;
	display:flex;
	flex-direction:column;
	gap:0.5em;
}
#toukou_list div.title h3{
	line-height:1.5;
}
#toukou_list p.author{
	font-size:90%;
}
#toukou_list ul.day{
	font-size:80%;
	display:flex;
	flex-direction:column;
	gap:0.5em;
	color:#666;
}
#toukou_list dl.info{
	display:flex;
	flex-direction:row;
	justify-content:left;
	align-items:center;
	gap:0.5em;
	font-size:80%;
}
#toukou_list dl.words{
	grid-column:1/3;
	grid-row:2/3;
}
#toukou_list dl.access{
	grid-column:1/3;
	grid-row:3/4;
}
#toukou_list form{
	grid-column:2/3;
	grid-row:2/4;
	display:flex;
	justify-content:center;
	align-items:center;
	gap:0.5em;
	background-color:#eee;
	border-radius:5px;
}
#toukou_list form input[type='text']{
	height:20px;
	width:5em;
}
#toukou_list form span{
	display:inline-flex;
	font-size:80%;
	align-items:center;
	height:20px;
	padding:0 0.5em;
	border-radius:3px;
	line-height:1;
	background-color:var(--color_button);
	color:#fff;
}
@media screen and (min-width:720px){
	#toukou_list > li{
		grid-template-columns:1fr 5em 5em;
		grid-template-rows:1fr 1fr;
	}
	#toukou_list div.title{
		grid-column:1/2;
		grid-row:1/3;
	}
	#toukou_list ul.day{
		font-size:90%;
		flex-direction:row;
		gap:1.5em;
	}
	#toukou_list dl.info{
		flex-direction:column;
		justify-content:center;
		align-items:center;
	}
	#toukou_list dl.words{
		grid-column:2/3;
		grid-row:1/2;
	}
	#toukou_list dl.access{
		grid-column:3/4;
		grid-row:1/2;
	}
	#toukou_list form{
		grid-column:2/4;
		grid-row:2/3;
	}
}

#toukou_list .remark{
	color:#f00;
	font-weight:bold;
}

/* post */
/*
#postRule > div{
	padding:var(--base);
}
#postRule dl{
	display:flex;
	flex-direction:column;
	padding:2%;
}
#postRule dt{
	line-height:1.5;
	font-weight:bold;
}
#postRule dd{
	font-size:90%;
	line-height:1.5;
	margin:0.25em 0 1.5em;
}
#postRule dd code{

}
*/
#postForm form{
	padding:var(--base);
}
#postForm form dt,
#postForm form dd,
#postForm form label,
#postForm form p,
#postForm form pre{
	line-height:1.5;
}
#postForm form dt{
	font-weight:bold;
}
#postForm form dt small{
	font-weight:normal;
}
#postForm form dd{
	margin:0.25em 0 1.5em;
}
#postForm form dd .tag{
	display:flex;
	flex-direction:column;
	gap:0.5em;
}
#postForm form dd.check_text{
	border:1px solid #ccc;
	padding:5px;
}
#postForm form dd .image{
	display:block;
	width:100%;
	max-width:320px;
}
#postForm form dd .image img{
	width:100%;
}
#postForm form dd span[id^='error']{
	font-size:80%;
	display:block;
	min-height:1.5em;
	padding-top:0.25em
}
#postForm form input[name='name']{
	width:100%;
}
#postForm form input[name='title']{
	width:100%;
}
#postForm form input[name='pass']{
	width:50%
}
#postForm form input[name^='tag']{
	width:auto;
}
#postForm textarea{
	width:100%;
	height:25em;
	resize:vertical;
}
#postForm form ul.formBtn{
	display:flex;
	gap:1em;
	align-items:center;
}
#postForm p.info{
	padding-bottom:var(--base);
	font-size:90%;
	color:#666;
}
@media screen and (min-width:720px){
	#postForm form dd .tag{
		flex-direction:row;
	}
	#postForm form input[name='name']{
		width:12em;
	}
	#postForm form input[name='pass']{
		width:16em;
	}
	#postForm form input[name='title']{
		width:25em;
	}
	#postForm form input[name^='tag']{
		width:10em;
	}
}

/* image */
#imageList{
	display:flex;
	flex-direction:column;
	gap:1em;
}
#imageList li{
	display:grid;
	grid-template-columns:25% 1fr;
	gap:5px;
}
#imageList dl{
	font-size:80%;
	display:flex;
	flex-direction:column;
	gap:0.25em;
}
#imageList dd:nth-of-type(1){
	color:#666;
}
#imageList dd{
	line-height:1.3;
}
#imageList figure{
	aspect-ratio:1/1;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}
#imageList img{
	width:100%;
	height:100%;
	object-fit:contain;
}
/* image - prev next */
#uploaderPage{
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-size:90%;
}
#uploaderPageDirect{
	display:none;
}
/* image - uploaderer */
#uploaderBox{
	padding:5px;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:3px;
	display:flex;
	flex-direction:column;
	gap:10px;
}
#uploaderBox ul{
	display:flex;
	flex-direction:column;
	gap:5px;
}
#uploaderBox input[type='text']{
	margin-right:5px;
}
#uploaderBox input[name='uploader_name']{
	width:70%;
}
#uploaderBox input[name='uploader_post']{
	width:70%;
}
#uploaderBox #uploaderFile{
	appearance:none;
	background-color:#eee;
	border-radius:3px;
	width:100%;
	overflow:hidden;
}
#uploaderBox.active{
	background-image:repeating-linear-gradient(-45deg, #fff, #fff 5px, #ddd 5px, #ddd 10px );
	background-size:14px;
	animation:dad 0.5s infinite linear;
}
@keyframes dad{
	from{background-position:0 0;}to{background-position:14px 0px;}
}
#uploaderBox #uploader_progress{
	font-size:80%;
	color:#f00;
	display:inline-block;
	padding:0 0.5em;
}
#uploaderBox .notice{
	font-size:80%;
	line-height:1.3;
}
/* image - modal */
body:has(#modalBox.active){
	overflow:hidden;
}
#modalBox{
	opacity:0;
	transition:0.3s;
	pointer-events:none;
}
#modalBox.active{
	opacity:1;
	pointer-events:auto;
}
#modalBox figure{
	position:fixed;
	background-color:rgba(0,0,0,.7);
	display:flex;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	justify-content:center;
	align-items:center;
	overflow: auto;
	scrollbar-gutter: stable;
}
#modalBox figure img{
	max-width:50%;
	max-height:80%;
}

/* toukou_delete */
#toukou_delete{
	margin-top:20px;
	padding:20px;
	border:1px solid #ccc;
}
#toukou_delete p{
	font-size:80%;
	margin:10px 0;
	line-height:1.5;
}


/* pagelink */
.pagelink{
	font-size:80%;
}
.pagelink > div{
	display:flex;
	justify-content:center;
	gap:1px;
}
.pagelink a,
.pagelink span{
	flex:auto;
	padding:9px 0;
	text-align:center;
}
.pagelink span{
	color:#999;
	background-color:#ccc;
}
.pagelink a{
	color:var(--color_link);
	background-color:#fff;
	transition:.3s;
}
.pagelink a:hover{
	background-color:#eee;
}
.pagelink_prev{
	border-radius:5px 0 0 5px;
}
.pagelink_next{
	border-radius:0 5px 5px 0;
}
@media screen and (max-width:480px){
	.pagelink{
		font-size:70%;
	}
}

/* toukou comment */
#toukou_comment{
	padding:5%;
	background-color:#fff;
	border-radius:5px;
}
#comment_count{

}
#toukou_comment ol{
	list-style:none;
	display:flex;
	flex-direction:column;
	gap:20px;
	margin-bottom:40px;
}
#toukou_comment ol li{
	margin:0;
	padding:0;
}
#toukou_comment ol li[data-res]{
	margin:0 0 0 1em;
	padding:0 0 0 1em;
	border-left:1px solid rgba(0,0,0,0.1);
}
#toukou_comment ol li .head{
	font-size:90%;
	color:#777;
}
#toukou_comment ol li .head span{
	display:inline-block;
	margin:0 0.5em;
}
#toukou_comment ol li .head span.name{
	color:Peru;
}
#toukou_comment ol li .head span.res{
	color:CornflowerBlue;
	cursor:pointer;
}
#toukou_comment ol li .body{
	font-size:100%;
	line-height:1.5;
	padding:1em 1em 2em;
}
#toukou_comment ol li .body span{
	color:#eee;
}

#toukou_comment form{

}
#toukou_comment fieldset{
	background-color:rgba(255,200,100,0.1);
	border-radius:5px;
	padding:var(--base);
	display:flex;
	flex-direction:column;
	gap:10px;
}
#toukou_comment .title{
	display:flex;
	gap:20px;
}
#toukou_comment #comment_cancel{
	font-size:90%;
	color:CornflowerBlue ;
	cursor:pointer;
	display:none;
}
#toukou_comment #comment_title{
	font-weight:bold;
}
#toukou_comment input{
	width:100%;
	max-width:16em;
}
#toukou_comment textarea{
	width:100%;
	height:8em;
	resize:vertical;
}
#toukou_comment #commentGuide{
	padding:1em 0;
	font-size:80%;
	line-height:1.5;
	color:#777;
}

/* side links */
#links p{
	font-size:80%;
	line-height:1.5;
}
#links dl{
}
#links dt{
	font-weight:bold;
	margin-top:1em;
}
#links dd{
	margin:5px 0;
	line-height:1.5;
}

/* dlsite */
.dlsite{
}
.dlsite ul{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:20px 12px;
	margin:20px 0;
}
.dlsite a{
	display:block;
}
.dlsite ul img{
	width:100%;
}
.dlsite span{
	font-size:80%;
	display:block;
	max-height:4.5em;
	overflow:hidden;
	line-height:1.5;
	margin-top:0.25em;
}

footer{
	height:60px;
	background-color:var(--color_navi);
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:80%;
}

#admin{
	padding:5px;
	font-size:70%;
	background:#ffc;
}