@charset "UTF-8";

/*----- Setting -----*/

body{
	font-family: "Noto Sans", sans-serif;
	font-size:1.0rem;
	line-height:1.75em;
	
	font-optical-sizing: auto;
	font-weight:400;
	font-style: normal;
	
	background-color:#fff;
	color:#000;
}

a{
	color:#f80;
	text-decoration: none;
}

a:hover{
	color:#f80;
	text-decoration: underline;
}

img{
	max-width: 100%;
	max-height: 100%;
}

address{
	font-size:0.6rem;
	line-height:80px;
	
	text-align: center;
}

/*----- GoogleFont -----*/

.gf-sans{
	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight:400;
	font-style: normal;
}

.gf-serif{
	font-family: "Noto Serif", serif;
	font-optical-sizing: auto;
	font-weight:400;
	font-style: normal;
}

/*----- Wrapper -----*/

#wrapper{
	width:100%;
	margin:0 auto;
	max-width: 960px;
	
	box-sizing: border-box;
	padding:10px;
	
	background-color:#f0f0f0;
	color:#000;
}

@media only screen and (min-width: 768px){
	
	#wrapper{
		padding:20px;
	}
	
}

/*----- Blog -----*/

#blog{
	width:100%;
	
	box-sizing: border-box;
	padding:10px;
	
	background-color:#fff;
	color:#000;
}

@media only screen and (min-width: 768px){
	
	#blog{
		padding:20px;
	}
	
}

#blog div.single{
	margin-bottom:40px;
}

#blog h1{
	font-size:2.0rem;
	line-height:1.5em;
	font-weight:700;
	
	margin-bottom:20px;
}

#blog div.postdata{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-end;
	
	width:100%;
	margin-bottom:10px;
}

#blog div.postdata p{
	font-size:0.8rem;
	line-height:30px;
	
	box-sizing: border-box;
	padding-left:20px;
}

#blog div.postdata p.update::before{
	display:inline-block;
	content:"更新日";
	
	box-sizing: border-box;
	padding-right:5px;
}

#blog div.postdata p.upload::before{
	display:inline-block;
	content:"投稿日";
	
	box-sizing: border-box;
	padding-right:5px;
}

#blog p.eyecatch{
	width:100%;
	margin-bottom:20px;
}

#blog p.eyecatch img{
	width:100%;
	vertical-align: bottom;
}

/*----- Blog-Summary -----*/

#blog div.summary{
	width:100%;
	margin-bottom:20px;
}

#blog div.summary p.readtime{
	font-size:0.8rem;
	line-height:20px;
	
	text-align: right;
	
	margin-bottom:10px;
}

#blog div.summary p.readtime span.note{
	display:inline-block;
	width:180px;
	
	background-color:#f0f0f0;
	color:#000;
	
	text-align: center;
}

#blog div.summary p.readtime em{
	display:inline-block;
	
	font-weight:700;
	
	box-sizing: border-box;
	padding:0 2.5px;
}

#blog div.summary p.caption{
	width:100%;
	
	font-size:1.0rem;
	line-height:1.75em;
}

/*----- Blog-Outline -----*/

#blog div.outline{
	width:100%;
	margin-bottom:20px;
	
	box-sizing: border-box;
	padding:10px;
	
	background-color:#f0f0f0;
	color:#000;
}

#blog div.outline input[type=checkbox]{
	display:none;
}

#blog div.outline h6{
	width:100%;
}

#blog div.outline h6 label{
	display:block;
	
	width:100%;
	
	font-size:1.0rem;
	line-height:1.75em;
	font-weight:700;
	
	position: relative;
}

#blog div.outline h6 label:hover{
	cursor: pointer;
}

#blog div.outline h6 label::before{
	display:block;
	content:"";
	
	width:25px;
	height:25px;
	
	background-color:#aaa;
	
	position: absolute;
	top:2.5px;
	right:2.5px;
}

#blog div.outline h6 label::after{
	display:block;
	content:"";
	
	width:25px;
	height:25px;
	
	background-image: url("../images/icon-arrow-left-white.webp");
	background-repeat: no-repeat;
	background-size:15px;
	background-position: center;
	
	position: absolute;
	top:2.5px;
	right:2.5px;
	
	transform: rotate(-90deg);
	
	transition: 0.25s;
}

#blog div.outline input[type=checkbox]:checked ~ h6 label::after{
	transform: rotate(90deg);
}

#blog div.outline p{
	width:100%;
	height:0;
	
	font-size:1.0rem;
	line-height:0;
	
	box-sizing: border-box;
	padding-left:15px;
	
	position: relative;
	
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	
	transition: 0.25s;
	
	visibility: hidden;
	opacity: 0;
}

#blog div.outline input[type=checkbox]:checked ~ p{
	height:30px;
	line-height: 30px;
	
	visibility: visible;
	opacity: 1.0;
}

#blog div.outline p a{
	color:#000;
}

#blog div.outline p::before{
	display:block;
	content:"";
	
	width:10px;
	height:1px;
	
	background-color:#000;
	
	position: absolute;
	top:15px;
	left:0;
	
	transition: 0.25s;
	
	visibility: hidden;
	opacity: 0;
}

#blog div.outline input[type=checkbox]:checked ~ p::before{
	visibility: visible;
	opacity: 1.0;
}

#blog div.outline ul{	
	box-sizing: border-box;
	padding:0;
	
	transition: 0.25s;
}

#blog div.outline input[type=checkbox]:checked ~ ul{
	padding:5px 0;
}

#blog div.outline ul li{
	width:100%;
	height:0;
	
	font-size:0.8rem;
	line-height:0;
	
	box-sizing: border-box;
	padding-left:35px;
	
	position: relative;
	
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	
	transition: 0.25s;
	
	visibility: hidden;
	opacity: 0;
}

#blog div.outline input[type=checkbox]:checked ~ ul li{
	height:30px;
	line-height: 30px;
	
	visibility: visible;
	opacity: 1.0;
}

#blog div.outline ul li::before{
	display:block;
	content:"";
	
	width:10px;
	height:1px;
	
	background-color:#000;
	
	position: absolute;
	top:15px;
	left:20px;
	
	transition: 0.25s;
	
	visibility: hidden;
	opacity: 0;
}

#blog div.outline input[type=checkbox]:checked ~ ul li::before{
	visibility: visible;
	opacity: 1.0;
}

#blog div.outline ul li a{
	color:#222;
}

#blog div.outline ul li a:hover{
	color:#444;
	text-decoration: underline;
}

#blog div.outline ul li:last-child{
	margin-bottom:0;
}

/*----- Blog-Post-Content -----*/

#blog div.post-content{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
	margin-bottom:40px;
}

#blog div.post-content article{
	width:100%;
	margin-bottom:20px;
}

#blog div.post-content article:last-child{
	margin-bottom:0;
}

#blog div.post-content h2{
	font-size:1.25rem;
	line-height:1.5em;
	font-weight:700;
	
	box-sizing: border-box;
	padding:10px;
	padding-left:30px;
	
	position: relative;
}

#blog div.post-content h2::before{
	display:block;
	content:"";
	
	width:20px;
	height:1px;
	
	background-color:#000;
	
	position: absolute;
	top:25px;
	left:0;
}

#blog div.post-content p.caption{
	margin-bottom:20px;
}

.archiverow h3{
	font-size:1.15rem;
	line-height:1.5em;
	font-weight:700;
	
	box-sizing: border-box;
	padding:10px;
	padding-left:10px;
	
	position: relative;
}

.archiverow h3::before{
	display:block;
	content:"";
	
	width:2.5px;
	height:17.5px;
	
	background-color:#000;
	
	position: absolute;
	top:15px;
	left:0;
}

.archiverow div.post{
	width:100%;
	
	font-size:1.0rem;
	line-height:1.75em;
}

/*----- Blog-Recommend -----*/

.recommend{
	width:100%;
	margin-bottom:40px;
}

.recommend h2{
	font-size:1.5rem;
	line-height:1.0em;
	font-weight:700;
	
	box-sizing: border-box;
	padding:10px 20px;
	
	background-color:#000;
	color:#fff;
	
	position: relative;
	margin-bottom:20px;
}

.recommend h2::before{
	display:block;
	content:"";
	
	width:5px;
	height:20px;
	
	background-color:#fff;
	
	position: absolute;
	top:0;
	bottom:0;
	left:7.5px;
	
	margin:auto 0;
}

.recommend div.row{
	width:100%;
}

.recommend div.row a{
	display:block;
	
	color:#000;
	transition: 0.25s;
}

.recommend div.row a:hover{
	opacity: 0.8;
	text-decoration: none;
}

.recommend div.row div.inner{
	box-sizing: border-box;
	padding:10px;
	
	background-color:#f0f0f0;
	color:#000;
	
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.recommend div.row div.inner p.thumbnail{
	width:120px;
}

.recommend div.row div.inner p.thumbnail span.note{
	display:block;
	
	width:100%;
	height:120px;
	
	position: relative;
}

.recommend div.row div.inner p.thumbnail span.note img{
	width:100%;
	height:100%;
	
	position: absolute;
	top:0;
	left:0;
	
	object-fit: cover;
	object-position: center;
}

.recommend div.row div.inner div.text{
	width:calc(100% - 120px);
	
	box-sizing: border-box;
	padding-left:10px;
}

.recommend div.row div.inner div.text h4{
	font-size:1.0rem;
	line-height:30px;
	font-weight:700;
	
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.recommend div.row div.inner div.text p.excerpt{
	width:100%;
	
	font-size:0.8rem;
	line-height:1.75em;
	
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 4;
}

/*----- Blog-Related -----*/

.related{
	width:100%;
}

.related h2{
	font-size:1.5rem;
	line-height:1.0em;
	font-weight:700;
	
	box-sizing: border-box;
	padding:10px 20px;
	
	background-color:#000;
	color:#fff;
	
	position: relative;
	margin-bottom:20px;
}

@media only screen and (min-width: 768px){
	
	.related h2{
		margin-bottom:15px;
	}
	
}

@media only screen and (min-width: 960px){
	
	.related h2{
		margin-bottom:10px;
	}
	
}

.related h2::before{
	display:block;
	content:"";
	
	width:5px;
	height:20px;
	
	background-color:#fff;
	
	position: absolute;
	top:0;
	bottom:0;
	left:7.5px;
	
	margin:auto 0;
}

.related div.archives{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
}

.related div.row{
	width:100%;
	margin-bottom:20px;
}

.related div.row a{
	display:block;
	height:100%;
	
	color:#000;
	transition:0.25s;
}

.related div.row a:hover{
	opacity: 0.8;
	text-decoration: none;
}

.related div.row div.inner{
	width:100%;
	height:100%;
	
	box-sizing: border-box;
	padding:10px;
	
	background-color:#f0f0f0;
	color:#000;
}

.related div.row div.inner p.thumbnail{
	width:100%;
	margin-bottom:10px;
	
	position: relative;
}

.related div.row div.inner p.thumbnail::before{
	display:block;
	content:"";
	
	width:100%;
	
	box-sizing: border-box;
	padding-top:75%;
}

.related div.row div.inner p.thumbnail img{
	width:100%;
	height:100%;
	
	position: absolute;
	top:0;
	left:0;
	
	object-fit: cover;
	object-position: center;
}

.related div.row div.inner div.text h4{
	font-size:1.0rem;
	line-height:30px;
	font-weight:700;
	
	text-align: center;
	
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.related div.row div.inner div.text p.excerpt{
	width:100%;
	
	font-size:0.8rem;
	line-height:1.75em;
	
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
}

@media only screen and (min-width: 768px){
	
	.related div.row{
		width:50%;
		margin-bottom:0;
		
		box-sizing: border-box;
		padding:5px;
	}
	
}

@media only screen and (min-width: 960px){
	
	.related div.row{
		width:calc(100%/3);
		
		box-sizing: border-box;
		padding:10px;
	}
	
	.related div.row:nth-child(odd){
		margin-right:0;
	}
	
	.related div.row:nth-child(even){
		margin-left:0;
	}
	
}

/*----- PAGER-SINGLE -----*/

.pager{
	box-sizing: border-box;
	padding:20px 0;
}

.pager ul.single{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	
	width:100%;
}

.pager ul.single li{
	width:100px;
	
	box-sizing: border-box;
	padding:0 5px;
}

.pager ul.single li span.note{
	display:block;
	
	background-color:#fff;
	color:#000;
	
	font-size:0.8rem;
	line-height:40px;
	font-weight:bold;
	
	text-align: center;
}

.pager ul.single li a{
	display:block;
	color:#000;
	
	transition: 0.25s;
}

.pager ul.single li.btn-index a{
	background-color:#000;
	color:#fff;
	
	border-radius:2.5px;
	
	transition:0.25s;
}

.pager ul.single li.btn-prev a{
	background-image: url("../images/icon-arrow-left-black.webp");
	background-repeat: no-repeat;
	background-size:15px;
	background-position: left center;
}

.pager ul.single li.btn-next a{
	background-image: url("../images/icon-arrow-right-black.webp");
	background-repeat: no-repeat;
	background-size:15px;
	background-position: right center;
}

.pager ul.single li a:hover{
	text-decoration: none;
	opacity: 0.8;
}

/*----- PAGER-ARCHIVE -----*/

.pager{
	width:100%;
	
	box-sizing: border-box;
	padding:20px 0;
}

.pager ul.archive{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	
	width:100%;
}

.pager ul.archive li{
	width:50px;
	
	box-sizing: border-box;
	padding:0 5px;
}

.pager ul.archive li span.note{
	display:block;
	
	background-color:#f0f0f0;
	color:#000;
	
	font-size:0.8rem;
	line-height:40px;
	font-weight:400;
	
	text-align: center;
	
	border-radius:2.5px;
}

.pager ul.archive li a{
	display:block;
	
	background-color:#000;
	color:#fff;
	
	box-sizing: border-box;
	border:solid 1px #000;
	
	border-radius:2.5px;
	
	transition:0.25s;
}

.pager ul.archive li a:hover{
	text-decoration: none;
	
	background-color:#fff;
	color:#000;
}

/*----- PAGER-ARCHIVE-WP-PAGENAVI -----*/

.wp-pagenavi{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: center;
	
	width:100%;
}

.wp-pagenavi span.pages{
	display:none;
}

.wp-pagenavi span.current{
	display:block;
	
	width:40px;
	height:40px;
	
	font-size:1.0rem;
	line-height:40px;
	
	background-color:#f0f0f0;
	color:#000;
	
	text-align: center;
	
	margin:0 5px;
	
	border-radius:2.5px;
}

.wp-pagenavi a.previouspostslink{
	display:none;
}

.wp-pagenavi a.nextpostslink{
	display:none;
}

.wp-pagenavi a.page{
	display:block;
	
	width:40px;
	height:40px;
	
	font-size:1.0rem;
	line-height:40px;
	
	background-color:#000;
	color:#fff;
	
	text-align: center;
	
	margin:0 5px;
	
	border-radius:2.5px;
	
	transition:0.25s;
}

.wp-pagenavi a.page:hover{
	opacity: 0.8;
	text-decoration: none;
}


/*----- 2025年9月17日更新 -----*/

body{
	background-image: url("../images/body_bg.jpeg");
	background-repeat: repeat-y;
	background-size:auto;
	background-position: center top;
}
	
.container{
	width:100%;
	margin:0 auto;
	max-width: 1000px;
	
	box-sizing: border-box;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
	
#header{
	width:100%;
	margin:0 auto;
	max-width: 1000px;
}
	
#header h1{
	width:100%;
}
	
#header h1 a{
	display:block;
}
	
#header h1 img{
	width:100%;
	vertical-align: bottom;
}
	
#header div.header-inner{
	width:100%;
	
	box-sizing: border-box;
	padding:15px 0;
	
	background-image: url("../images/header_inner_bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top right;
}

#header div.header-inner p{
	font-family: "Yu Mincho", "Taviraj", "Noto Serif JP", serif;
	font-size:1.5rem;
	line-height:35px;
	font-weight:bold;
	
	text-align: center;
}
	
#header div.header-inner p a{
	color:#000;
}
	
#header div.header-inner p a:hover{
	text-decoration: none;
}

#breadcrumb{
	width:100%;
	
	background-color:#f8f8f8;
	color:#000;
}

#breadcrumb ul{
	display:flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: flex-start;
	
	width:100%;
	margin:0 auto;
	max-width: 1000px;
	
	box-sizing: border-box;
	padding:0 10px;
}
	
#breadcrumb ul li{
	display:block;
	
	font-size:0.6rem;
	line-height:30px;
	
	box-sizing: border-box;
	padding-right:20px;
	
	position: relative;
}
	
#breadcrumb ul li::after{
	display:block;
	content:"";
	
	width:10px;
	height:10px;
	
	background-image: url("../images/icon_breadcrumb_after.png");
	background-repeat: no-repeat;
	background-size:15px;
	background-position: center;
	
	position: absolute;
	top:0;
	bottom:0;
	right:5px;
	
	margin:auto 0;
		
}
	
#breadcrumb ul li:nth-child(1){
	width:50px;
}
	
#breadcrumb ul li:nth-child(2){
	width:140px;
}
	
#breadcrumb ul li:last-child{
	width:calc(100% - 190px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap; 
}
	
#breadcrumb ul li:last-child::after{
	display:none;
}

.archive-header{
	width:100%;
	margin-bottom:20px;
	
	box-sizing: border-box;
	padding:10px;
}
	
.archive-header img{
	width:100%;
	vertical-align: bottom;
}

/*----- 2025年9月26日更新 -----*/

.backtohome{
	font-size:1.0rem;
	line-height:1.75em;
	
	text-align:center;
}

.backtohome a{
	display:inline-block;
}