@charset "utf-8";
/*
Theme Name: side-first
Description: フロントなし。固定ページなし。2カラム左サイド。ヘッダーがサイドバーを兼ねていてハンバーガーメニューからにょろっと出るよ
Author: kanako
Version: 20201013
*/

/*==========　リセット　==========*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*==========　レイアウト　==========*/
body {
	color: #333;
	font-family: "メイリオ","Hiragino Kaku Gothic ProN", sans-serif;
	line-height: 1.6;
	background: #fdeeed;　/*M5Y10*/
		-webkit-text-size-adjust: 100%;
}
article {	/* 記事単項 */
	clear: both;
	overflow: hidden;
	background: #fff;
	border-radius: 10px;
	margin-bottom: 20px;
	padding: 30px;
}
section {	/* 記事一覧 */
	clear: both;
	overflow: hidden;
	background: #fff;
	border-radius: 5px;
	margin-bottom: 10px;
	padding: 20px;
}
/* レスポンシブ */
@media screen and (max-width:960px){
	article {
		padding: 20px;
	}
	section {
		padding: 15px;
	}
}

/*==========　一般・共通　==========*/
p {
	margin: 0 0 20px 0;
}
img {
	border: none;
	width: 100%;
	height: auto;
}
a {
	overflow: hidden;
	outline: none;
	text-decoration: none;
	color: #cc0000;
}
a:hover {
	color: #ff0000;
}
/*----- 見出し -----*/
h1 {	/* サイトタイトル */
	font-size: 20pt;
	font-weight: bold;
	padding: 18px 0 0 30px;
}
h2 {	/* indexページタイトル・single記事タイトル */
	font-size: 150%;
	color :#333;
	font-weight: bold;
	line-height: 120%;
	padding: 5px 0;
	border-bottom: dotted #333 1px;
	margin: 0 0 35px 0;
}
h3 {	/* indexリストタイトル・singleサブタイトル */
	font-size: 120%;
	color :#990000;
	font-weight: bold;
	line-height: 120%;
	border-bottom: dotted #ccc 1px;
	margin: 2em 0 1em 0;
}
h3.list-title { /* indexリストタイトル */
	margin: 0 0 10px 0;	
}
h4 {	/* ウィジェットタイトル */
	font-weight: bold;
	margin: 30px 0 10px 0;
	background: #333;
	color: #fff;
	padding: 3px 0 0px 8px;
}
/*----- 汎用 ID・クラス -----*/
.a-nocolor {
	color: #333;
}
.smalltext {
	font-size: 80%;
}
strong {
	font-weight: bold;
}
/* レスポンシブ */
@media screen and (min-width:960px){
	.out_pc {
		display: none;
	}
}
@media screen and (max-width:960px){
	.out_sp {
		display: none;
	}
}

/*==========　テンプレート【footer】　==========*/
#pagetop {
    position: fixed;
    bottom: 0;
    right: 0;
	width: 70px;
	height: 70px;
	text-align: center;
	line-height: 110%;
    font-size: 11pt;
	background: #333;
}
#pagetop a {
    text-decoration: none;
	color: #fff;
	display:inline-block;
	vertical-align: middle;
    padding: 10px 0 0 0;
}

/*==========　テンプレート【header】　==========*/
header {
	width: 290px;
}
/* レスポンシブ */
@media screen and (max-width:960px){
	header {
		height: 70px;
	}
}
.description {
	font-size: 80%;
	margin: 20px 0 20px 30px;
}
.sideinner {
	background-color: rgba(255,255,255,0.5);
	position: absolute;
	top: 0;
	left: 0;
}
.breadcrumbs {
	font-size: 80%;
	margin-bottom: 40px;
}
/* レスポンシブ */
@media screen and (max-width:960px){
	.sideinner {
		position: static;
	}
}
#contents {
	padding: 20px 80px 70px 420px;
}
/* レスポンシブ */
@media screen and (max-width:960px){
	#contents {
		padding: 20px 30px 70px 30px;
	}
}
/*---------- ヘッダーメニュー ----------*/
/* レスポンシブ */
@media screen and (max-width:960px){
	nav{
		display: none;
	}
}
/*----- 開閉ボタン -----*/
#nav_toggle{
	display: none;
	position: absolute;
	z-index: 20;
}
/* レスポンシブ */
@media screen and (max-width:960px){
	#nav_toggle{
		position: absolute;
		top: 0;
		right: 0;
		width: 70px;
		height: 70px;
		display: block;
		text-align: center;
		font-size: 10pt;
		background: #333;
		color: #fff;
	}
	#nav_toggle div {
		position: relative;
		padding: 10px;
	}
	#nav_toggle span{
		display: block;
		height: 3px;
		background: #fff;
		position:absolute;
		width: 40%;
		left: 30%;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top: 32px;
	}
	#nav_toggle span:nth-child(2){
		top: 42px;
	}
	#nav_toggle span:nth-child(3){
		top: 52px;
	}
	/* OPENな時 */
	.open #nav_toggle span:nth-child(1) {
		top: 42px;
	   -webkit-transform: rotate(135deg);
		-moz-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.open #nav_toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav_toggle span:nth-child(3) {
		top: 42px;
		-webkit-transform: rotate(-135deg);
		-moz-transform: rotate(-135deg);
		transform: rotate(-135deg);
	}
}

/*==========　【sidebar】　==========*/
#sidebar {
	width: 290px;
	padding: 40px 30px 20px 30px;
}
#copyright {
	font-size: 80%;
	margin: 70px 0 0 0;
}
.widget {
	margin-bottom: 30px;
}
.widget ul {
	padding: 0 0 0 10px;
}
.children li {
	padding-left: 6px;
}
/*----- ダグクラウド -----*/
.tagcloud a {
    font-size: 14px !important;
	background: #fff;
	display: inline-block;
    padding: 2px 5px;
	border-radius: 6px;
}
/*----- 月別アーカイブ -----*/
.screen-reader-text {
	display: none; /*なぜかタイトルが被るので消します*/
}
select {
		-webkit-appearance: none;
	background: #fff;
	padding: 5px 0 5px 20px;
	width: 100%;
	height: 40px;
	border-radius: 25px; 
	outline: none;
	border: 0;
}
/*----- 検索フォーム -----*/
#searchform {
	position: relative;
}
#searchform label {
	display: block;
	overflow: hidden;
	font-size: 0;
	text-indent: -9999px;
}
#searchform #s {
	padding: 0 0 0 20px;
	width: 100%;
	height: 40px;
	border-radius: 25px;
	outline: none;
	border: 0;
	box-sizing: border-box; /*これがないとパディングの分だけ枠がはみ出します*/
}
#sbtn2{
	height: 30px;
	position: absolute;
	right: 12px;
	top: 6px;
	background: none;
	color: #666;
	border: none;
	font-size: 18px;
}
#sbtn5:hover{
	color: #7fbfff;
}
/*----- ウィジェットタイトルにWebアイコンフォント -----*/
#categories-2 h4:before {
	font-family:"Font Awesome 5 Free";
	font-weight: 900;
	padding-right : 5px;/*文字との隙間*/
	color:#ccc;
	content:"\f07c";
}
#tag_cloud-2 h4:before {
	font-family:"Font Awesome 5 Free";
	font-weight: 900;
	padding-right : 5px;/*文字との隙間*/
	color:#ccc;
	content:"\f02b";
}
#archives-2 h4:before {
	font-family:"Font Awesome 5 Free";
	font-weight: 900;
	padding-right : 5px;/*文字との隙間*/
	color:#ccc;
	content:"\f303";
}

/*==========　【index】　==========*/
.list-box a:hover {
	background: #efefef;
}
.list-text {
	color: #333;
}
.list-thumb img {
	float: left;
	width: 110px;
	height: 110px;
	margin:0 10px 0 0;
	object-fit: cover;
}
.post-date {
	font-size: 80%;	
	text-align: right;
	margin-top: 5px;
}
.fas {
	color: #666;
	padding-right: 3px;
}
/*----- ページナビ -----*/
.pagination {
	clear: both;
	padding: 20px 0;
	position: relative;
	font-size: 14px;
	line-height: 1em;
	text-align: center;
}
.pagination-box {
	display: inline-block;
}
.pagination span, .pagination a {
	display: block;
	float: left;
	margin: 2px 2px 2px 0;
	padding: 10px 14px 10px 14px;
	text-decoration: none;
	width: auto;
	color: #fff; /* 通常の文字色 */
	background: #333; /* 通常の背景色 */
	border-radius: 50%; /* 角を丸くして円形に */
}
.pagination span.page-of {
	background: none;
	color: #333;
}
.pagination a:hover{
	color: #fff; /* マウスホバー時の文字色 */
	background: #666; /* マウスホバー時の背景色 */
}
	.pagination .current{
	padding: 10px 14px 10px 14px;
	color: #333; /* 現在のページの文字色 */
	background: #fff; /* 現在のページの背景色 */
}
/* レスポンシブ */
@media only screen and (max-width: 413px) {
	.pagination {
	  font-size: 12px;
	  line-height: 12px;
	}
	.pagination span, .pagination a {
	  padding: 7px 10px 7px 10px;
	}
	.pagination .current{
	  padding: 7px 10px 7px 10px;
	}
}

/*==========　【single】　==========*/
.single-thumb img {
	float: right;
	margin: 0 0 20px 10px;
	width: 50%;
	height: auto;
}
/* レスポンシブ */
@media screen and (max-width:560px){
.single-thumb img {
	width: 100%;
	}
}
.single-text {
	border-bottom: dotted #333 1px;
	padding-bottom: 10px;
	margin-bottom: 10px;
}
/*----- ペ－ジャー -----*/
.pager {
	clear: both;
	overflow: hidden;
	padding: 10px 0;
}
.pager a {
	display: block;
}
.pager img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	margin-top: 10px;
}
.pagerleft {
	float: left;
}
.pagerright {
	float: right;
	text-align: right;
}