/*
Theme Name: QooQ
Description: シンプルなブログ用テーマ（パンくずリスト、SEO、関連記事、ページネーション対応済み）
Theme URI: https://qooq.dododori.com
Author: くうく堂
Author URI: https://qooq.dododori.com
Version: 1.23.1
Tags: blog, two-columns, right-sidebar, custom-colors, custom-header, custom-menu
License: カスタマイズは自由です。ただし、再配布、販売は禁止されています。
*/

/****************************************

          global

*****************************************/
/*------ for wp setting ------*/
strong{
	font-weight: bold;
}
ul,
ol{
	margin-left: 1em;
}

input,
textarea{
	font-weight: bold;
	border: solid 1px #eee;
	border-radius: 2px;
	background: white;
}
input{
	height: 2.5em;
	padding: 0 1em;
}
textarea{
	padding: 1em;
}
input[type="submit"],
input[type="button"]{
	padding: 0 .8em;
	border: none;
}
/*------ for wp setting ------*/


*,
:after,
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}
body {
    text-align: left;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-size: 17px;
	font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.05em;
    min-width: 60pc
}
.container {
    margin: auto;
    width: 86%;
    min-width: 60pc
}
a {
    text-decoration: none;
    color: inherit
}
img {
    max-width: 100%;
    height: auto;
	vertical-align: bottom;
}
iframe{
	max-width: 100%;
}

@media ( max-width : 768px ) {
    body {
        font-size: 16px;
        min-width: 0
    }
    .container {
        width: 96%;
        min-width: 0
    }
}
@media ( max-width : 480px ) {
	#main.width-100 .container{
		width:100%;
	}
	.width-100 #sub-content,
	.width-100 .breadcrumbs{
		width: 96%;
		margin-right: auto;
		margin-left: auto;
	}
}

/****************************************
          全体設定
*****************************************/
/*------ for wp setting ------*/
/*
body
	background: #f6f5f5;
	color: #333333;
-------- for wp setting ------*/

body{
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: #f6f5f5;
	color: #333333;
}

/* 2カラム設定 */
#main-inner{
	display: flex;
}
#main-content{
	margin-right: 30px;
	width: calc(100% - 346px);
	flex-shrink: 0;
}
#sub-content{
	margin-top: 30px;
	width: 316px;
	flex-shrink: 0;
}

@media ( max-width : 768px ) {
	#main-inner{
		display: block;
	}
	#main-content{
		margin-right: 0;
		width: 100%;
	}
	#sub-content{
		width: 100%;
	}
}

/****************************************
         ナビゲーション
*****************************************/
/*------ for wp setting ------*/
#navigation-content ul{
	margin-left: 0;
}

/*
navigation
	background: #ff9d76;
	color: #ffffff;
-------- for wp setting ------*/


#navigation{
	padding: .2em 0 .2em 0;
	background: #ff9d76;
	color: #ffffff;
}
#navigation a{
	color: inherit;
}
#navigation-button,
#navigation-label{
	display: none;
}
#navigation-content ul{
	display: flex;
	flex-wrap: wrap;
}
#navigation-content li{
	margin-right: 1em;
	list-style: none;
}
#navigation-content li a{
	font-weight: bold;
}
@media ( max-width : 768px ) {
	#navigation-label{
		display: block;
		text-align: center;
	}
	#navigation-content{
		display:none;
	}
	#navigation-button:checked ~ #navigation-content{
		display: flex;
	}
}

/****************************************
         ヘッダー
*****************************************/
/*------ for wp setting ------*/
/*
header
	background: #aeddcd;
	color: #ffffff;
-------- for wp setting ------*/


#header{
	background: #aeddcd;
	color: #ffffff;
}
#header a{
	color: inherit;
}
#header-inner{
	padding: 1em 0 1em 0;
}
#header-img-wrapper{
	text-align: center;
}
#header-img{
}
#header-title{
	font-size: 110%;
	font-weight: bold;
}
#header-text{
	font-size: 80%;
	font-weight: bold;
}

/****************************************
        パンくずリスト
*****************************************/
/*------ for wp setting ------*/
/*
breadcrumbs
	color: #999999;

-------- for wp setting ------*/


.breadcrumbs{
	line-height: 1;
	font-size: 14px;
	margin-top: 8px;
	background: inherit;
	color: #999999;
}

/****************************************
        記事一覧
*****************************************/
/*------ for wp setting ------*/
/* update */
#list .list-item-category a{
	display: block;
	margin-top: .1em;
	margin-left: .1em;
	padding: .3em 1em;
	border-radius: 2px;
	background: #aeddcd;
	color: #ffffff;
}

/*
list-item
	background: #ffffff;

list-item-date
	color: #999999;

list-item-category-item
	all : update -> delete
------ for wp setting ------*/

#list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
#list a{
	color: inherit;
}
.list-item{
	flex-basis: 49.5%;
	margin-top: 8px;
	border-radius: 3px;
	background: #ffffff;
}
.list-item-inner{
	padding: .5em;
	border-top: none;
}
.list-item-date{
	color: #999999;
	font-size: 80%;
}
.list-item-category{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-top: .5em;
	font-size: 80%;
	font-weight: bold;
}
.list-item-img{
	display: block;
	width: 100%;
}
.list-item-title{
	margin-top: .5em;
	font-weight: bold;
}
@media ( max-width : 480px ) {
	#list{
		display: block;
	}
}

/****************************************
        個別記事
*****************************************/

/* HEADER */
/*------ for wp setting ------*/
/* original */
#single-header-img-box{
	text-align: center;
	margin-top: 1em;
}
#single-header-img{
	width: 100%;
	max-width: 400px;
	max-height: 200px;
	object-fit: cover;
}

/* update */
#single-header-category a{
	display: block;
	margin-top: .1em;
	margin-left: .1em;
	padding: .3em 1em;
	border-radius: 2px;
	background: #aeddcd;
	color: #ffffff;
}

/*
single
	background: #ffffff;

single-header-date
	color: #999999;

single-header-category-item
	all : update -> delete
------- for wp setting ------*/

#single{
	padding: 2em;
	margin-top: 8px;
	background: #ffffff;
}

/* 個別記事見出し */
#singler-header{
}
#single-header-date{
	font-size: 80%;
	margin-top: 1.25em;
	color: #999999;
}
#single-header-title{
	font-size: 130%;
	font-weight: bold;
}
#single-header .single-share{
	margin-top: 1em;
}
#single-header-category{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-top: .5em;
	font-size: 80%;
	font-weight: bold;
}


/* CONTENT */
/*------ for wp setting ------*/
#single-content p{
	margin: 1.8em 0;
}
#single-content ul,
#single-content ol{
	margin: 2em 0 2em 1em;
}
#single-content table{
	margin: 2em 0;
	max-width: 100%;
	border-collapse: collapse;
}
#single-content th,
#single-content td{
	padding: .5em;
	border: solid 1px #eeeeee;
}
/*
single-content a
	color: #779cff;

single-content h2
	background: #aeddcd;
	color: #ffffff;
	margin-top: 4em;

single-content h3
	border-bottom: solid 2px #aeddcd;
	margin-top: 4em;

single-content h4
	background: #aeddcd;
	color: #ffffff;
	margin-top: 2em;
-------- for wp setting ------*/

/* 個別記事本文 */
#single-content{
	margin-top: 1em;
	line-height: 1.8;
}
#single-content a{
	color: #779cff;
}
#single-content h2{
	font-size: 110%;
	font-weight: bold;
	padding: .5em;
	margin-bottom: .8em;
	margin-top: 4em;
	border-radius: 2px;
	background: #aeddcd;
	color: #ffffff;
}
#single-content h3{
	font-weight: bold;
	margin-bottom: .5em;
	margin-top: 4em;
	border-bottom: solid 2px #aeddcd;
}
#single-content h4{
	display: table;
	margin-top: 2em;
	padding: .2em 1em .2em 1em;
	border-radius: 2px;
	background: #aeddcd;
	color: #ffffff;
}
#single-content blockquote{
	margin: 1em;
	display: flex;
}
#single-content blockquote:before{
	content:'\201D';
	font-size: 400%;
	margin-top: -.25em;
	line-height: 1;
}


/* FOOTER */
/*------ for wp setting ------*/
/*
コピー
	個別記事下部
	SNSボタン
	関連記事

コピーせずそのまま
	前後の記事
	フッターカテゴリ
	コメント

mrp-post
	border: solid 1px #eeeeee;
	background: #ffffff;
-------- for wp setting ------*/

/* 個別記事下部 */
#single-footer{
}

/* SNSボタン */
#single-footer .single-share{
	margin-top: 4em;
	margin-bottom: 4em;
}

.single-share{
	display: flex;
	justify-content: center;
}
.single-share-facebook,
.single-share-twitter,
.single-share-hatena,
.single-share-pocket,
.single-share-line{
	text-align: center;
	font-weight: bold;
	margin: 0 .3em;
	border-radius: 3px;
	display: block;
	padding: .2em 1em;
	color: white;
}
.single-share-facebook{
	background: #3B5998;
}
.single-share-twitter{
	background: #55acee;
}
.single-share-hatena{
	background: #008fde;
}
.single-share-pocket{
	background: #ef3f56;
}
.single-share-line{
	background: #00B900;
}


/* 前後の記事 */
#blog-pager{
	margin-top: 2em;
	display: flex;
}
#blog-pager-newer-link,
#blog-pager-older-link{
	flex: 1;
	font-weight: bold;
	padding: 1em 1em 1em 0;
}
#blog-pager-newer-link{
	text-align: right;
	padding: 1em 0 1em 1em;
}
#blog-pager-older-link ~ #blog-pager-newer-link{
	border-left: 1px solid #dcdcdc;
}
#blog-pager-newer-link:before,
#blog-pager-older-link:before{
	content: "\524D\306E\6295\7A3F";
	display: table;
	padding: .5em 1em;
	margin-bottom: .5em;
	border-radius: 2px;
	background: #ff9d76;
	color: #ffffff;
}
#blog-pager-newer-link:before{
	content: "\6B21\306E\6295\7A3F";
	margin-left: auto;
}

/* フッターカテゴリ */
#single-footer-category{
	margin-top: 2em;
}
#single-footer-category a{
	display: table;
	margin: 1em auto 0 auto;
	padding: 1em;
	font-weight: bold;
	border-radius: 3px;
	background: #aeddcd;
	color: #ffffff;
}

/* 関連記事 */
#mrp-wrapper{
	margin-top: 2em;
}
#mrp-title{
	font-weight: bold;
}
#mrp-content{
	display: flex;
	flex-wrap: wrap;
}
.mrp-post{
	position: relative;
	flex-basis: 150px;
	padding: .5em 1em;
	margin: .1em;
	border: solid 1px #eeeeee;
	background: #ffffff;
}
.mrp-post-img{
	display: block;
	border-radius: 50%;
	width: 72px;
	height: 72px;
	object-fit: cover;
	margin: 0 auto 0 auto;
}
.mrp-post-title{
	margin-top: .5em;
	font-size: 80%;
	font-weight: bold;
}
.mrp-post-link{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media ( max-width : 480px ) {
	#single{
		padding: 1.5em 1em 1em 1em;
	}
}

/****************************************
        サイドバー
*****************************************/
/*------ for wp setting ------*/
/* original */
.widget{
	margin-top: 30px;
	font-weight: bold;
}
.widget:first-child{
	margin-top: 0;
}
.widget ul{
	list-style: none;
}

/* update */
#sub-content .widget-title{
	padding: .4em;
	background: #aeddcd;
	color: #ffffff;
}
#sub-content .widget-title + *{
	padding: .5em;
}

/*
sub-content a
	color: #779cff;

sub-content .widget
	background: #ffffff;

sub-content .widget h2
sub-content .widget-content
	all : update -> delete
-------- for wp setting ------*/


#sub-content a{
	color: #779cff;
}
#sub-content .widget{
	background: #ffffff;
	border-radius: 2px;
}

/****************************************
        フッター
*****************************************/
/*------ for wp setting ------*/
/*
footer
	background-color: #ffffff;

footer a
	color: #779cff;

copyright
	color: #999999;

designed-by
	color: #999999;
-------- for wp setting ------*/


#footer{
	margin-top: 30px;
	background-color: #ffffff;
}
#footer a{
	color: $(font.link);
}
#footer-inner{
	display: flex;
}
#footer-item1,
#footer-item2,
#footer-item3{
	flex-basis: 29.3333%;
	margin-left: 2%;
	margin-right: 2%;
}
#footer .widget{
	padding-top: 30px;
}
#footer .widget:last-child{
	padding-bottom: 30px;
}

#copyright{
	text-align: center;
	font-size: 70%;
	margin-top: 1em;
	color: #999999;
	letter-spacing: 0;
}
#copyright:before{
	content:"Copyright \0a9 ";
}
#copyright:after{
	content:" All Rights Reserved.";
}
#designed-by{
	text-align: center;
	font-size: 70%;
	margin-bottom: 1em;
	color: #999999;
	letter-spacing: 0;
}
#designed-by:before{
	content:"designed by ";
}
@media ( max-width : 768px ) {
	#footer-inner{
		display: block;
	}
}


/****************************************
        個別アイテム
*****************************************/
/*------ for wp setting ------*/
/*
ぜんぶオリジナル。コピー不要
-------- for wp setting ------*/
/* サーチ */
.search-form{
	display: flex;
	max-width: 16em;
	background: white;
	border-radius: 18px;
	border: solid 1px #eeeeee;
}
.search-field{
	border-radius: 18px;
	font-size: 14px;
	border: none;
	width: 100%; /* input属性はwidth100がないとflexをはみ出す.flex-basisでもダメ */
}
.search-submit{
	flex-grow: 2;
	border-radius: 18px;
	font-size: 14px;
	font-weight: bold;
	background: #ff9d76;
	color: #ffffff;
}

/* コメントフォーム */
#comments-wrapper{
	margin-top: 2em;
}
#comments-title{
	font-size: 130%;
	font-weight: bold;
}
#respond input,
#respond textarea{
	width: 100%;
	resize:vertical;
}
#respond .comment-form-comment{
	margin-top: 1em;
}
#respond #submit{
	margin-top: 1em;
	background: #ff9d76;
	color: #ffffff;
	width: auto;
	padding: 1em;
	height: auto;
	border-radius: 4px;
}
#comments-board{
	margin-top: 2em;
}
.comment-item{
	margin-top: 1em;
	padding-top: 1em;
	border-top: solid 1px #eeeeee;
}

/* ページネーション */
.pagination a{
	color: #779cff;
}
.pagination>*{
	display: inline-block;
	font-size: 150%;
	margin: .5em .1em;
}
.pagination .current{
	border-bottom: solid 1px #555555;
}

/* タグクラウド */
.tagcloud>a{
	display: inline-block;
	font-size: 80% !important;
	padding: .5em;
	border-radius: 3px;
	margin: .25em 0;
	color: #ffffff !important;
	background: #ff9d76;
}