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

:root{
	--color_bg:#faf5f0;
	--color_text:#111;
	--color_link:#15e;
	--color_navi:#567;
	--color_main:#789;
	--color_guide:#eed;
	--color_button:#f77;
	--base:16px;
}
@media (width >= 720px){
	:root{
		--base:14px;
	}
}

/* html */
*{
	margin:0;
	padding:0;
	line-height:1;
	box-sizing:border-box;
	word-break:break-all;
	overflow-wrap:anywhere;
	line-break:anywhere;
}
html{
	background-color:var(--color_bg);
	font-family:'Noto Sans JP','Tahoma','helvetica','メイリオ';
	color:var(--color_text);
}
body,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.5;
}
@media (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{
	width:100%;
	border:0;
	vertical-align:bottom;
}
ul{
	list-style-type:none;
}
fieldset{
	border:none;
}
code{
	font-family:'Tahoma';
	color:purple;
	font-weight:bold;
}
.material{
	font-family:'Material Icons Outlined';
	font-size:var(--base);
	display:inline-flex;
	vertical-align:middle;
	padding-right:5px;
}

/* layout */
body{
	& > main{
		margin:80px 2% 20px;
		&:has(section.about){
			flex-direction:column-reverse;
			justify-content:flex-end;
		}
	}
	& > aside{
		margin:20px 2% 0;
	}
	& > main,
	& > aside{
		display:flex;
		flex-direction:column;
		gap:1em;
	}
}
@media (width >= 720px){
	header{
		grid-row:1;
		grid-column:1/5;
	}
	body{
		& > main{
			margin:0;
			grid-row:2;
			grid-column:2;
		}
		& > 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;
	}
	& > h1,
	& > h2{
		font-size:110%;
		padding:var(--base);
		border-bottom:1px solid rgba(0,0,0,0.05);
	}
	& > 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;
	&.cancel{
		background-color:#999;
	}
	&.delete{
		background-color:#000;
		color:#ff0;
	}
	&.upload{
		animation:textblink 0.5s infinite linear alternate;
	}
}
@keyframes textblink{
	from{color:rgba(255,255,255,1);}to{color:rgba(255,255,255,0.1);}
}
.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%;
}
.lh15{
	line-height:1.5;
}

/* 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;
	#sitename{
		display:flex;
		background:url('/img/logomark.png') no-repeat 10px 50% / 40px;
		padding:0 0 0 60px;
	}
	ul{
		position:relative;
		top:60px;
		display:flex;
		flex-direction:column;
		gap:0;
		background-color:var(--color_navi);
		transform:translateX(100%);
		transition:0.3s;
		a{
			padding:0 1em;
		}
	}
	a{
		display:flex;
		align-items:center;
		height:60px;
		color:#fff;
		top:0;
		font-weight:bold;
		transition:.3s;
		position:relative;
		&:hover{
			color:#fc0;
			top:-2px;
		}
	}
}
nav{
	input{
		display:none;
	}
	label{
		position:absolute;
		right:0;
		display:flex;
		align-items:center;
		justify-content:center;
		width:60px;
		height:60px;
		cursor:pointer;
	}
	label div,
	label:before,
	label:after{
		display:block;
		content:'';
		width:30px;
		height:2px;
		background-color:#fff;
		position:absolute;
		transition:all .3s;
	}
	label:before{
		transform:translateY(9px);
	}
	label:after{
		transform:translateY(-9px);
	}
}
#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);
}
@media (width >= 720px){
	header{
		position:relative;
		justify-content:center;
		#sitename{
			padding:0 1em 0 60px;
		}
		ul{
			flex-direction:row;
			gap:2em;
			position:static;
			transform:unset;
			a{
				padding:0;
			}
		}
	}
	nav label{
		display:none;
	}
}

/* index.php -> guide & change_font */
#guide{
	display:flex;
	flex-direction:column;
	gap:0.5em;
	justify-content:center;
	align-items:center;
	background-color:var(--color_guide);
	padding:1em;
	border-radius:5px;
	h1{
		font-size:120%;
	}
}
#change_font{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:1em;
}
#change_mincho{
	position:relative;
	width:2em;
	height:1em;
	background-color:rgba(0,0,0,.25);
	border-radius:1em;
	cursor:pointer;
	transition:.3s;
	input{
		width:0;
		height:0;
	}
	&: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;
	}
	&:has(:checked){
		background-color:rgba(0,0,90,0.5);
		&:after{
			left:1em;
		}
	}
}
@media (width >= 720px){
	#guide{
		flex-direction:row;
		justify-content:space-between;
	}
}

/* listbox */
#listbox{
	display:flex;
	flex-direction:column;
	gap:3em;
	article{
		padding:5%;
		word-break:break-all;
	}
	&.mincho article{
		font-family:'Zen Old Mincho';
	}
	h2 a{
		display:flex;
		justify-content:center;
		padding:1em 0 2em;
		color:var(--color_text);
		font-size:130%;
		line-height:1.4;
		transition:.3s;
		&:hover{
			color:var(--color_link);
		}
	}
	.upday{
		font-size:90%;
		padding:0.5em 1em;
		background-color:var(--color_main);
		color:#ff0;
		display:flex;
		gap:1em;
	}
	ul.info{
		font-size:90%;
		padding:1em;
		display:flex;
		justify-content:right;
		gap:1em;
		border-bottom:1px dotted #ccc;
	}
	.is_image{
		color:#852;
	}
	.text{
		line-height:2;
	}
	.more{
		margin:1em 0;
		text-align:right;
	}
	#like{
		border-top:1px solid #eee;
		text-align:center;
		padding:1.5em;
	}
	ul.tags{
		padding:1em;
		display:flex;
		justify-content:right;
		gap:1em;
	}
	ul.tags li{
		font-size:90%;
		li a::before{
			content:'#';
		}
	}
	span.image{
		display:block;
		text-align:center;
		img{
			width:inherit;
			max-width:100%;
		}
	}
	span.deleted{
		color:#f66;
		background:#fcc;
	}
}

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

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

/* side -> latest */
.latest{
	ul{
		padding:0 1em 1em;
	}
	li{
		&:not(:first-child){
			border-top:1px solid rgba(0,50,100,0.1);
		}
		a{
			display:flex;
			gap:0.5em;
			align-items:center;
			b{
				white-space:nowrap;
				overflow-x:hidden;
				text-overflow:ellipsis;
				width:var(--base);
				flex:1 0 auto;
				line-height:3;
			}
			span{
				color:rgba(40,30,20,0.5);
			}
			&: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 (width >= 720px){
	.latest li a{
		font-size:90%;
	}
}

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

/* comment */
#comment{
	#replyForm{
		display:none;
	}
	#bbsForm{
		background-color:rgba(0,0,0,0.05);
		border-radius:5px;
		fieldset{
			display:flex;
			flex-direction:column;
			padding:2%;
			dt{
				font-weight:bold;
				small{
					font-weight:normal;
				}
			}
			dd{
				margin:0.25em 0 1.5em;
			}
			textarea{
				width:100%;
				height:6em;
				resize:vertical;
			}
			p{
				line-height:1.5;
			}
			/* bbs trip switch */
			span.switch label{
				display:inline-block;
				background-color:#f33;
				color:#fff;
				padding:0.4em 1em;
				font-size:80%;
				border-radius:2em;
				cursor:pointer;
			}
			dd.trip{
				font-size:90%;
				margin-bottom:0;
				display:grid;
				grid-template-rows:0fr;
				transition:.3s;
				& > div{
					overflow:hidden;
				}
			}
			&:has(#trip_switch:checked) dd.trip{
				grid-template-rows:1fr;
				padding:0.25em 0;
			}
			#tripkeyList{
				margin-top:0.5em;
				padding:1em;
				background-color:rgba(250,240,210,1);
				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;
				li{
					margin-left:1em;
					line-height:1.5;
					list-style-type:disc;
				}
			}
		}
	}
	/* bbs nav */
	nav{
		padding:1em 0;
		ul{
			display:flex;
			justify-content:space-between;
		}
	}
	/* bbs main */
	& > article > ul > li{
		display:flex;
		flex-direction:column;
		border-top:1px solid #ccc;
		padding:1em 0 2em;
		&:last-child{
			border-bottom:1px solid #ccc;
		}
		.comment_title{
			font-weight:bold;
			line-height:1.5;
		}
		.comment_text{
			line-height:1.5;
			.arrow{
				color:#33c;
				display:inline-block;
				font-size:90%;
				padding:0.1em 0.4em;
				font-style:italic;
			}
		}
		.info{
			display:flex;
			gap:1em;
			font-size:90%;
			margin-bottom:2em;
			.number{
				color:#666;
			}
			.name{
				color:#696;
			}
			.day{
				color:#999;
			}
		}
		aside{
			margin:2em 0 1em;
			font-size:90%;
			color:var(--color_link);
			.btn{
				padding:0 1em;
			}
			.btn.cancel{
				display:none;
			}
		}
	}
}

/* about history hello */
#hello li{
	line-height:1.5;
	padding:0.5em 0;
	&:not(:first-child){
		border-top:1px dotted #ccc;
	}
}
#history ul{
	display:flex;
	flex-direction:column;
	gap:0.5em;
	font-size:90%;
	height:6em;
	overflow:auto;
	li{
		display:flex;
		gap:1em;
		p{
			line-height:1.5;
			margin-top:-0.25em;
		}
	}
}

/* toukouGuide */
#toukouGuide{
	background-color:#eee;
	ol{
		margin-bottom:1em;
	}
	ul{
		margin-bottom:1em;
		list-style-type:'※';
	}
	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;
	h2{
		flex:0 1 auto;
	}
	 form{
		display:flex;
		align-items:center;
		gap:0.5em;
		 input[type='text']{
			height:20px;
			width:8em;
		}
		 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{
	& > li{
		display:grid;
		grid-template-columns:1fr 1fr;
		border-top:1px solid #ccc;
		padding:var(--base);
		gap:0.5em;
	}
	div.title{
		grid-column:1/3;
		grid-row:auto;
		display:flex;
		flex-direction:column;
		gap:0.5em;
		h3{
			line-height:1.5;
		}
	}
	p.author{
		font-size:90%;
	}
	ul.day{
		font-size:80%;
		display:flex;
		flex-direction:column;
		gap:0.5em;
		color:#666;
	}
	dl.info{
		display:flex;
		flex-direction:row;
		justify-content:left;
		align-items:center;
		gap:0.5em;
		font-size:80%;
	}
	dl.words{
		grid-column:1/3;
		grid-row:2/3;
	}
	dl.access{
		grid-column:1/3;
		grid-row:3/4;
	}
	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;
		input[type='text']{
			height:20px;
			width:5em;
		}
		span{
			display:inline-flex;
			font-size:80%;
			align-items:center;
			height:20px;
			padding:0 0.5em;
			border-radius:3px;
			background-color:var(--color_button);
			color:#fff;
		}
	}
	.remark{
		color:#f00;
		font-weight:bold;
	}
}
@media (width >= 720px){
	#toukou_list{
		& > li{
			grid-template-columns:1fr 5em 5em;
			grid-template-rows:1fr 1fr;
		}
		div.title{
			grid-column:1/2;
			grid-row:1/3;
		}
		ul.day{
			font-size:90%;
			flex-direction:row;
			gap:1.5em;
		}
		dl.info{
			flex-direction:column;
			justify-content:center;
			align-items:center;
		}
		dl.words{
			grid-column:2/3;
			grid-row:1/2;
		}
		dl.access{
			grid-column:3/4;
			grid-row:1/2;
		}
		form{
			grid-column:2/4;
			grid-row:2/3;
		}
	}
}


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

/* image */
#imageList{
	display:flex;
	flex-direction:column;
	gap:1em;
	li{
		display:grid;
		grid-template-columns:25% 1fr;
		gap:5px;
	}
	dl{
		font-size:80%;
		display:flex;
		flex-direction:column;
		gap:0.25em;
	}
	dd{
		line-height:1.3;
		&:nth-of-type(1){
			color:#666;
		}
	}
	figure{
		aspect-ratio:1/1;
		display:flex;
		justify-content:center;
		align-items:center;
		overflow:hidden;
	}
}
/* image -> prev or next button */
#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;
	ul{
		display:flex;
		flex-direction:column;
		gap:5px;
	}
	input[type='text']{
		margin-right:5px;
	}
	input[name='uploader_name']{
		width:70%;
	}
	input[name='uploader_post']{
		width:70%;
	}
	#uploaderFile{
		appearance:none;
		background-color:#eee;
		border-radius:3px;
		width:100%;
		overflow:hidden;
	}
	&.active{
		background-image:repeating-linear-gradient(-45deg, #fff, #fff 5px, #ddd 5px, #ddd 10px );
		background-size:14px;
		animation:drg 0.5s infinite linear;
	}
	#uploader_progress{
		font-size:80%;
		color:#f00;
		display:inline-block;
		padding:0 0.5em;
	}
	.notice{
		font-size:80%;
		line-height:1.3;
	}
}
@keyframes drg{
	from{background-position:0 0;}to{background-position:14px 0px;}
}

/* image -> modal */
body:has(#modalBox.active){
	overflow:hidden;
	padding-inline-end:var(--scrollbar-width,0);
}
#modalBox{
	figure{
		pointer-events:none;
		opacity:0;
		transition:0.3s;
		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;
		img{
			max-width:50%;
			max-height:80%;
			width:auto;
			height:auto;
		}
		#modalBox.active & {
			opacity:1;
			pointer-events:auto;
		}
	}
}

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

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

/* toukou comment */
#toukou_comment{
	padding:5%;
	background-color:#fff;
	border-radius:5px;
	ol{
		list-style:none;
		display:flex;
		flex-direction:column;
		gap:20px;
		margin-bottom:40px;
		li{
			margin:0;
			padding:0;
			&[data-res]{
				margin:0 0 0 1em;
				padding:0 0 0 1em;
				border-left:1px solid rgba(0,0,0,0.1);
			}
			.head{
				font-size:90%;
				color:#777;
				span{
					display:inline-block;
					margin:0 0.5em;
					&.name{
						color:Peru;
					}
					&.res{
						color:CornflowerBlue;
						cursor:pointer;
					}
				}
			}
			.body{
				font-size:100%;
				line-height:1.5;
				padding:1em 1em 2em;
				span{
					color:#eee;
				}
			}
		}
	}
	fieldset{
		background-color:rgba(255,200,100,0.1);
		border-radius:5px;
		padding:var(--base);
		display:flex;
		flex-direction:column;
		gap:10px;
	}
	.title{
		display:flex;
		gap:20px;
	}
	#comment_cancel{
		font-size:90%;
		color:CornflowerBlue ;
		cursor:pointer;
		display:none;
	}
	#comment_title{
		font-weight:bold;
	}
	input{
		width:100%;
		max-width:16em;
	}
	textarea{
		width:100%;
		height:8em;
		resize:vertical;
	}
	#commentGuide{
		padding:1em 0;
		font-size:80%;
		line-height:1.5;
		color:#777;
	}
}

/* dlsite */
section.dlsite{
	max-width:234px;
}
div.dlsite{
	 ul{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:20px 12px;
		margin:20px 0;
	}
	a{
		display:block;
	}
	img{
		aspect-ratio:4/3;
		object-fit:cover;
	}
	span{
		font-size:80%;
		display:-webkit-box;
		-webkit-line-clamp:3;
		-webkit-box-orient:vertical;
		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;
}