/*
Theme Name: komoringo
Description: komoringo
Theme URI: https://goodsan.jp/
Author: good3
Author URI: https://goodsan.jp/
Version: 1.0
License: good3
License URI: https://goodsan.jp/
*/

@charset "utf-8";

/* =================================
   リセット
================================= */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
html, body, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td, button {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-size: 100%;
	vertical-align: baseline;
}
pre, form, fieldset, input, textarea, blockquote, article, header, footer, aside, figure, figcaption, nav, section { 
	margin: 0;
	padding: 0;
}
article, header, footer, aside, figure, figcaption, nav, section {
	display: block;
}
body {
	line-height: 1;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
address, caption, cite, code, dfn, em, strong, th, var {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
	list-style-type: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
th, caption {
	text-align: left;
}
input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}

/* ---------追加リセット--------- */
html {
	font-size: 16px;
}
a {
	text-decoration: none;
	color: #444;
}
input[type="button"], input[type="submit"], input[type="text"], input[type="email"], textarea {
  border-radius: 0;
  -webkit-appearance: none;
}

/* ---------フェードイン--------- */
body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* ---------スクロールフェードイン--------- */
.fade-in {
  transition: opacity 1.8s;
  -moz-transition: opacity 1.8s;
  -webkit-transition: opacity 1.8s;
  -o-transition: opacity 1.8s;
}

/* --- 下スクロール出現ボタン --- */
#page-top {
  display: block;
  position: fixed;
  z-index: 9999;
  bottom: 30px;
  right: 50px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  text-align: center;
  text-decoration: none;
}
#page-top::after {
	content: " \f062";
	font-family: FontAwesome;
	position: absolute;
	top: 0px;
	left: 15px;
  color: #fff;
	font-size: 2em;
  line-height: 60px;
}
#page-top:hover{
    background: rgba(0,0,0,.8);
}

/* =================================
   共通設定
================================= */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
body {
	overflow-x: hidden;
	font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "游ゴシック", 'Yu Gothic', "メイリオ", Meiryo, YuGothic, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Verdana, sans-serif;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.03rem;
	color: #444;
}
a:hover {
	transition: .4s;
}
.main-post a:hover, .top-post a:hover {
	color: #1f9ad6;
}

/* =================================
   ヘッダー
================================= */
header {
	margin: 30px 0 40px;
}
header h1 {
	max-width: 595px;
	margin: 0 auto 30px;
}
header h1 img {
	width: 100%;
	height: auto;
}
/* --- ナビ --- */
header nav {
	text-align: center;
}
header .menu{
	position: relative;
}
header .menu > ul,
header ul.menu {
/*	overflow-x: auto;*/
	white-space: nowrap;
}
header .menu > ul > li,
header ul.menu > li{
	display: inline-block;
}
header .menu li{
	position: relative;
}
header .menu > li > a{
	display: block;
	margin-left: 5px;
	padding: 1rem 2rem;
	border-radius: 10px;
	border: 1px solid #bbb;
	background: url(images/back_dot.png);
	font-weight: bold;
}
header .menu > li > a:hover {
	background: #ccc url(images/back_dot.png);
/*	transition: .4s;*/
}
header ul.sub-menu,
header ul.children {
	position: absolute;
/*	margin-top: 1px;*/
	left: 5px;
	display: none;
	width: auto;
	background: rgba(31, 154, 214, .5);
}
header .sub-menu li,
header .children li {
	text-align: left;
}
header .sub-menu li a,
header .children li a {
	display: block;
	padding: 1rem;
	text-align: left;
}
header .sub-menu li a:hover,
header .children li a:hover{
	background: rgba(255, 0, 0, .8);
	color: #fff;
}
header .menu li:hover > ul {
	display: block;
}

/*--- タグクラウド ---*/
.tagcloud-wrap {
	max-width: 760px;
	margin: 40px auto;
}
.tagcloud-wrap a {
	margin-right: 20px;
	line-height: 1.4;
	white-space: nowrap;
}
.tagcloud-wrap a:hover {
	color: #1f9ad6 !important;
}
.tagcloud-wrap a:before {
	content: "\f02b";
	font-family: FontAwesome;
	margin-right: 5px;
	position: relative;
	top: 2px;
	font-size: 1.3rem;
	color: #2176bc;
}


/* =================================
   メイン
================================= */
.home article, .category article, .tag article, .archive article, .search article {
	display: flex;
	flex-direction: column-reverse;
	max-width: 760px;
	margin: 0 auto 150px;
}
.home .post-title, .category .post-title {
	padding-bottom: 10px;
	border-bottom: 1px dotted #666;
}
.home .post-title a, .category .post-title a {
/*	padding-bottom: 10px;*/
/*	border-bottom: 1px dotted #666;*/
	font-size: 2rem;
	font-weight: bold;
	color: #666;
	line-height: 1.2;
}
.home .post-title a:hover, .category .post-title a:hover {
	color: #1f9ad6;
}
.top-thumbnail {
	overflow: hidden;
	max-width: 740px;
/*	height: 550px;*/
	margin: 0 auto 20px;
/*	margin-bottom: 20px;*/
	text-align: center;
}
.top-thumbnail:hover {
	box-shadow: 0 0 20px #ddd;
	transition: .4s;
}
.top-thumbnail a img:hover {
	margin-bottom: 10px;
	transform: scale(1.3);
	transition: .4s;
	opacity: .7;
}
.top-thumbnail a {
	overflow: hidden;
}

/*--- ページャー ---*/
.pager-nav {
	overflow: hidden;
	max-width: 760px;
	margin: 0 auto 40px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background: url(images/gray.gif) repeat-y 50% 0;
}
.single-pager-nav {
	max-width: 960px;
}
.pager-nav > div{
	width: 50%;
}
.pager-nav .alignright{
	text-align: right;
}
.pager-nav a{
	display: block;
	padding: 1rem;
	border: none;
	line-height: 1.3;
}
.pager-nav a:hover{
	background: #dcf3ff;
/*	color: #000;*/
}
.pager-nav .alignright a:hover{
	border-left: 1px solid #ddd;
}

/* =================================
   シングルページ
================================= */
.main-post, .top-post {
	max-width: 960px;
	margin: 0 auto 150px;
	padding-top: 80px;
}
.main-post .post-title, .top-post .post-title {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #666;
}
.main-post .post-title a, .top-post .post-title a, .main-post .post-title {
	font-size: 2rem;
	font-weight: bold;
	color: #666;
	line-height: 1.3;
}
.main-post a:hover, .top-post a:hover {
	color: #1f9ad6;
}
.main-post .post-meta {
	margin-bottom: 40px;
	text-align: right;
}
.post-meta span {
	white-space: nowrap;
}
.post-date:before {
	content: "\f073";
	font-family: FontAwesome;
	margin-right: 5px;
}

/*
.post-date {
	margin-right: 10px;
}
*/
/*
.post-meta, .footer-post-meta {
	overflow-x: auto;
	line-height: 45px;
}
*/
.main-post .meta-category a {
	display: inline-block;
	margin-left: 10px;
	padding: 8px 10px;
	border-radius: 5px;
	border: 1px solid #bbb;
  background: url(images/back_dot.png);
	white-space: nowrap;
}
.main-post .meta-category a:hover {
	background: #ccc url(images/back_dot.png);
	color: #444;
}

.top-post .post-meta {
/*	margin-bottom: 40px;*/
	text-align: right;
}
.top-post .meta-category a {
	display: inline-block;
	margin-left: 10px;
	padding: 8px 10px;
	border-radius: 5px;
	border: 1px solid #bbb;
  background: #999 url(images/back_dot_2.png);
	white-space: nowrap;
	transform: rotate(-30deg) translate(-10px, 10px);
	float: left;
	color: #fff;
  font-weight: bold;
}
.top-post .meta-category a[href*="line"] {
  background: #03a200 url(images/back_dot_2.png);
	border: 1px solid #026f00;
}
.top-post .meta-category a[href*="web"] {
  background: #1c8ac0 url(images/back_dot_2.png);
	border: 1px solid #125a7d;
}
.top-post .meta-category a[href*="monologue"] {
  background: #e88b14 url(images/back_dot_2.png);
	border: 1px solid #c67c1d;
}
.top-post .meta-category a:hover {
	background: #ccc url(images/back_dot.png);
	color: #444;
}
.main-image {
	margin-bottom: 50px;
	text-align: center;
}
.main-text {
	margin-bottom: 50px;
}
.main-text p a {
	color: #5287b2 !important;
}
.main-text p a:hover {
	color: red !important;
	text-decoration: underline;
}
.main-text p {
	margin-bottom: 25px;
	font-size: 20px;
	line-height: 2.2;
}
.footer-post-meta {
	margin: 70px 0 100px;
	text-align: right;
}
/*
.tags a {
	margin-left: 10px;
	padding: 8px 10px;
	border-radius: 5px;
	border: 1px solid #bbb;
  background: #888 url(images/back_dot.png);
	color: #fff;
	white-space: nowrap;
}
.tags a:hover {
	background: #efefef url(images/back_dot.png);
	color: #444;
}
*/
.tags a {
	margin-left: 20px;
}
.tags a:before {
	content: "\f02b";
	font-family: FontAwesome;
	margin-right: 5px;
	position: relative;
	top: 2px;
	font-size: 1.3rem;
	color: #2176bc;
}


/* --- ページャー --- */
ul.pager {
	max-width: 960px;
	margin: 0 auto;
}
.post-content ul.pager {
	margin-left: 0;
	list-style: none;
}
ul.pager li a {
	display: block;
	width: 49%;
	padding: 30px 15px;
	border: 1px solid #e5e5e5;
	color: #444;
	font-weight: bold;
	line-height: 1.5;
	text-decoration: none;
	background: url(images/back_dot.png);
}
ul.pager li a:hover {
	text-decoration: none;
	background: #ccc url(images/back_dot.png);
	color: #444;
}
li#pager-pre a {
	float: left;
}
ul.pager li {
	position: relative;
}
li#pager-pre:before {
	content: "\f0a5";
	font-family: FontAwesome;
	position: absolute;
	top: 0;
	left: -20px;
	color: #2074b8;
}
li#pager-next a {
	float: right;
	text-align: right;
}
li#pager-next:after {
	content: "\f0a4";
	font-family: FontAwesome;
	position: absolute;
	top: 0;
	right: -20px;
	color: #2074b8;
}
@media all and (max-width: 768px) {
	ul.pager li a {
		width: 95%;
	}
	li#pager-pre a {
		float: none;
		margin-bottom: 10px;
	}
	li#pager-next a {
		float: none;
		text-align: left;
	}
	li#pager-next:after {
		right: 5px;
	}
}
@media all and (max-width: 480px) {
	li#pager-next:after {
		right: -10px;
	}
}



/* =================================
   フッター
================================= */
#copyright {
	background: #fff;
	text-align: center;
	font-size: .8rem;
	line-height: 70px;
}

/* --- google ad --- */
.g-ad {
/*	width: 960px;*/
  margin: 100px auto 100px;
	text-align: center;
}

/* --- サーチフォオーム --- */
.search-box {
	max-width: 760px;
	margin: 0 auto 50px;
	padding: 20px 0;
/*	background: #f3f3f3;*/
}
.search-box form {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}
.search-box form input {
	display: block;
	width: 100%;
	height: 55px;
	padding-left: 20px;
	border: 1px solid #aaa;
	font-size: 20px;
	line-height: 55px;
}
.search-box form button {
	display: block;
	position: absolute;
	top: 7px;
	right: 20px;
	background: #fff;
}
.search-box form button:before {
	content: "\f002";
	font-size: 38px;
	font-family: FontAwesome;
	cursor: pointer;
}
.search-box button:hover:before {
/*	cursor: pointer;*/
/*	opacity: .5;*/
	color: red;
	transition: .4s;
}
.search-box input::-webkit-input-placeholder {
    color: #ccc;
}
.search-box input::-moz-placeholder {
    color: #ccc;
}
.search-box input:-ms-input-placeholder {
    color: #ccc;
}

/* --- SNS --- */
.sns-wrap {
	text-align: center;
}
.sns-wrap a {
	margin-right: 10px;
}
.sns-wrap a img {
	width: 80px;
	height: auto;
}
.sns-wrap a:hover {
	opacity: .5;
}

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

          WordPress Misc

*****************************************/
.aligncenter {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}
.wp-caption {
	margin: 10px;
	padding-top: 4px;
	border: 1px solid #ddd;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #f3f3f3;
	text-align: center;
}
.wp-caption-text,
.gallery-caption{
	font-size: 80%;
}
.wp-caption img {
	margin: 0;
	padding: 0;
	border: 0 none;
}
.wp-caption-dd {
	margin: 0;
	padding: 0 4px 5px;
	font-size: 11px;
	line-height: 17px;
}
img.alignright {
    display: inline-block;
    margin: 0 0 1em 1.5em;
}
img.alignleft {
    display: inline-block;
    margin: 0 1.5em 1em 0;
}

/* =====================
見出し等デザイン装飾設定 
===================== */
/* --- 見出し --- */
.midashi-pagetop {
	position: relative;
  margin: 50px 0 30px;
/*	margin-bottom: 30px;*/
	padding: 1em;
/*	background: repeating-linear-gradient(-45deg, #efefef, #efefef 4px,#fafafa 3px, #fafafa 8px);*/
	background: #aaa url(images/back_dot_2.png);
	border-radius: 7px;
  color: #fff;
  font-size: 1.7rem;
	font-weight: bold;
  line-height: 1.3;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, .5);
}
.midashi-pagetop:after {
	position: absolute;
	content: '';
	top: -35px;
	left: 50%;
	border: 15px solid transparent;
	border-bottom: 20px solid #aaa;
	width: 0;
	height: 0;
}

.midashi1 {
  margin: 70px 0 30px;
  padding: 1.4rem .75rem;
  border-top: 1px solid #406d91;
  border-bottom: 1px solid #406d91;
	background: url(images/back_dot.png);
  color: #406d91;
  font-size: 1.7rem;
	font-weight: bold;
  line-height: 1.3;
}
.midashi1 span, .midashi2 span, .midashi3 span, .midashi4 span {
	font-weight: bold;
}
.midashi2 {
  margin: 60px 0 30px;
  padding: 1.2rem .75rem;
	background: url(images/back_dot.png);
  border-left: 6px solid #406d91;
  color: #406d91;
  font-size: 1.6rem;
	font-weight: bold;
  line-height: 1.3;
}
.midashi3 {
  margin: 60px 0 30px;
  padding: .8rem 0 .8rem .8rem;
  border-left: .4rem solid #406d91;
  border-bottom: 1px solid #406d91;
	background: url(images/back_dot.png);
  color: #406d91;
  font-size: 1.5rem;
	font-weight: bold;
  line-height: 1.3;
}
.midashi4 {
  margin: 60px 0 30px;
  padding: 1.3rem .75rem;
	background: url(images/border_bottom.png) repeat-x bottom left;
  color: #406d91;
  font-size: 1.4rem;
	font-weight: bold;
  line-height: 1.3;
}

/* --- 本文 --- */
.marker-line {
	background: linear-gradient(transparent 60%, #ffeb4d 60%);
}
.code-line {
	font-size: 90%;
	margin: 0 2px;
	padding: 0 5px;
	border: 1px solid rgba(0,0,0,.08);
	background-color: rgba(0,0,0,.03);
	border-radius: 3px;
	font-family: Monaco,Consolas,Courier New,Courier,monospace,sans-serif;
}
.post-list {
	display: inline-block;
	padding: 2rem;
	border: 1px solid #ddd;
	border-radius: 10px;
	background: #f9f9f9;
	font-size: 18px;
	line-height: 2;
}

/* --- リンクテキスト --- */
.link-blank:before {
	content: "\f2d2";
	font-family: FontAwesome;
	margin-right: 10px;
}
.link-self:before {
	content: "\f0c1";
	font-family: FontAwesome;
	margin-right: 10px;
}
.link-next:after {
	content: "\f0a9";
	font-family: FontAwesome;
	margin-left: 10px;
}

/* --- box --- */
.box-wrap-title {
  margin-bottom: 0 !important;
  padding: .6rem 0 .6rem 1.5rem;
  border: 1px solid #aaa;
  border-bottom: none;
  background: #eee;
	line-height: 1.3;
}
.box-wrap {
  margin-bottom: 30px !important;
  padding: 1.5rem;
  border: 1px solid #aaa;
  font-size: 20px;
  line-height: 2.1;
}
.box-wrap a, .box-wrap2 a {
	color: #5287b2 !important;
	font-size: 18px;
  line-height: 2;
	word-wrap: break-word;
}
.box-wrap a:hover, .box-wrap2 a:hover {
  color: red !important;
  text-decoration: underline;
}
.box-wrap-title2 {
  margin-bottom: 0 !important;
  padding: .6rem 0 .6rem 1.5rem;
  background: #888;
	color: #fff;
	line-height: 1.3;
}
.box-wrap2 {
  margin-bottom: 30px !important;
  padding: 1.5rem;
  border: 1px solid #aaa;
  background: #efefef;
  font-size: 20px;
  line-height: 2.1;
}
.box-wrap-code {
  display: block;
	overflow-x: auto;
	margin-bottom: 30px;
  padding: 1.5rem;
  border: 1px solid #aaa;
  background: #fff;
  font-size: 1rem;
	font-family: 'Courier', monospace;
  line-height: 1.6;
}


/* --- 引用 --- */
.bq-01 {
	position: relative;
	margin-bottom: 30px;
	padding: 30px 25px;
	border-radius: 10px;
	border: 1px dashed #bbb;
	background: url(images/back_dot.png);
}
.bq-01:before{
    display: inline-block;
    position: absolute;
    top: 7px;
    left: 10px;
    vertical-align: middle;
    content: "\f10d";
    font-family: FontAwesome;
    color: #eee;
    font-size: 58px;
    line-height: 1;
}
blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: 5px;
    right: 15px;
    vertical-align: middle;
    text-align: center;
    content: "\f10e";
    font-family: FontAwesome;
    color: #eee;
    font-size: 58px;
    line-height: 1;
}
.bq-01 p {
    position: relative;
    padding: 0;
    z-index: 3;
}

.code-box {
  display: block;
	overflow-x: auto;
	margin-bottom: 30px;
  padding: 1.5rem;
  border-radius: 10px;
  border: 1px solid #aaa;
  background: #fff;
  font-size: 1rem;
	font-family: 'Courier', monospace;
  line-height: 1.6;
}
.cd-02 {
  border: 1px solid #ddd;
  background: #f9f9f9;
}

/* --- ボタン設定 --- */
.link-btn a {
	display: inline-block;
	padding: 15px 40px;
	border: solid 1px #777;
	border-radius: 8px;
	background: #777 url(images/back_dot_2.png);
	color: #fff !important;
	font-size: 16px;
	font-weight: bold;
	box-shadow: 0px 6px  #bbb;
}
.link-btn.line a {
	background: #2cce6d url(images/back_dot_2.png);
}
.main-text .link-btn a {
	color: #fff !important;
}
.main-text .link-btn a:hover {
	position: relative;
	top: 3px;
	box-shadow: 0px 3px  #bbb;
	opacity: 0.8;
	transition: 0.3s;
	color: #fff !important;
	text-decoration: none !important;
}
.main-text .link-btn a:active {
	position: relative;
	top: 6px;
	box-shadow: 0px 1px #222 inset;
}

/* --- Amazon --- */
.i-block {
	display: inline-block !important;
}
.i-block-set {
	margin-right: 10px !important;
}

/* --- 目次設定 --- */
.mokuji-list {
	list-style-type: disc;
/*	list-style-position: inside;*/
  margin-bottom: 30px !important;
  padding: 1.5rem;
  border: 1px solid #ddd;
	background: #fafafa;
  font-size: 20px;
  line-height: 1.4;
}
.mokuji-list li {
	margin-left: 1rem;
}
.mokuji-list li + li{
	margin-top: 10px;
}
.mokuji-list a {
	font-weight: bold;
}

/* --- 分割ページナビ --- */
.page-link {
	margin-bottom: 100px;
	text-align: center;
}
.page-link span {
	text-decoration: none !important;
	border: 1px solid #BFBFBF;
	padding: 15px 20px !important;
	margin: 2px !important;
}
.page-link a span {
/*	border: 1px solid #2176bc !important;*/
	background: #eee url(images/back_dot.png); !important;
/*  color: #333 !important;*/
	font-weight: bold;
}
.page-link a span:hover {
    color: #fff;
    background: #aaa url(images/back_dot_2.png);
	transition: .3s;
}


/* =====================
プラグイン設定 
===================== */
.fix-page .addtoany_share_save_container {
    display: none;
}
.addtoany_share_save_container {
    margin: 120px 0 80px !important;
    text-align: center;
}

/* ------- ページナビ ---------- */
a.page.smaller:hover, a.page.larger:hover {
    color: #fff;
    background: #aaa url(images/back_dot_2.png);
}
/* ページナビ */
.wp-pagenavi {
	clear: both !important;
	text-align: center !important;
	margin: 50px 0 100px !important;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none !important;
	border: none;
	padding: 15px 20px !important;
	margin: 2px !important;
}
.current {
	border: 1px solid #2176bc !important;
	background: #eee url(images/back_dot.png); !important;
  color: #333 !important;
}
.larger, .smaller {
	border: 1px solid #999 !important;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #555 !important;
}
.wp-pagenavi span.current {
	font-weight: bold !important;
}

@media all and (max-width: 600px) {
	.wp-pagenavi span.pages {
		display: none;
	}
	.wp-pagenavi {
		clear: both !important;
		text-align: center !important;
		margin: 40px 0 30px !important;
	}
	.wp-pagenavi a, .wp-pagenavi span {
		text-decoration: none !important;
		border: none;
		padding: 7px 10px !important;
		margin: 2px !important;
	}
/*
.current {
	border: 1px solid #2176bc !important;
	background: #eee url(images/back_dot.png); !important;
  color: #333 !important;
}
*/
/*
	.larger, .smaller {
		border: 1px solid #6fafe3 !important;
	}
	.wp-pagenavi a:hover, .wp-pagenavi span.current {
		border-color: #2176bc !important;
	}
*/
	.wp-pagenavi span.current {
		font-weight: bold !important;
	}
}

/* --- 目次 --- */
#toc_container {
	padding: 15px !important;
  padding-left: 30px !important;
}
#toc_container p.toc_title {
	text-align: left !important;
	font-size: 1rem;
	font-weight: 700 !important;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px dashed #aaa;
}
#toc_container p.toc_title+ul.toc_list {
	margin-top: 0.5em;
	line-height: 2;
}

/* --- インスタ --- */
footer .ri-grid {
    margin: 10px auto 0;
}

/* --- crayon --- */
.crayon-syntax {
	width: auto !important;
}
.crayon-syntax .crayon-pre, .crayon-syntax pre, .crayon-syntax .crayon-plain {
	padding: 20px !important;
}
.crayon-syntax, .crayon-syntax .crayon-main, .crayon-syntax .crayon-plain, .crayon-syntax .crayon-table {
  border-radius: 10px !important;
}


/* ################## MediaQueries ################## */
/* =================================
   breakpoint 960px以下に適用
================================= */
@media all and (max-width: 960px) {
	.main-post .post-title, .top-post .post-title {
		margin-bottom: 15px;
		padding: 0 10px 10px;
/*		border-bottom: 1px dotted #666;*/
	}
	.post-meta, .footer-post-meta {
		padding-right: 10px;
	}
	.tagcloud-wrap {
/*		margin-top: 30px;*/
		padding: 0 10px;
	}
	.main-text > div > p {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 18px;
		line-height: 1.9;
	}
	ul.pager {
    margin: 0 20px;
	}
	.midashi-pagetop {
		margin: 50px 10px 20px;
		font-size: 1.6rem;
	}
	.midashi1 {
		margin: 70px 10px 20px;
		font-size: 1.6rem;
	}
	.midashi2 {
		margin: 60px 10px 20px;
		font-size: 1.5rem;
	}
	.midashi3 {
		margin: 60px 10px 20px;
		font-size: 1.4rem;
	}
	.midashi4 {
		margin: 60px 10px 20px;
		font-size: 1.3rem;
	}
	
	.box-wrap-title, .box-wrap-title2, .box-wrap-code {
		margin-right: 10px;
		margin-left: 10px;
	}
	.box-wrap, .box-wrap2 {
		margin-right: 10px;
		margin-left: 10px;
		padding: 15px 10px;
	}
	.bq-01, .code-box, .post-list {
		margin-right: 10px;
		margin-left: 10px;
	}
	.main-text .crayon-syntax {
		margin-right: 10px !important;
		margin-left: 10px !important;
	}
	
	.addtoany_share_save_container {
		margin: 80px 0 !important;
		text-align: center;
	}

	
}

/* =================================
   breakpoint 768px以下に適用
================================= */
@media all and (max-width: 767px) {
	#page-top {
		bottom: 20px;
		right: 10px;
	}
	
	.main-post, .top-post {
		margin: 0 auto 80px;
		padding-top: 30px;
	}
	.main-post .post-meta {
		margin-bottom: 20px;
	}

}
/* =================================
   breakpoint 740px以下に適用
================================= */
@media all and (max-width: 740px) {
	/* --- ナビ --- */
/*
	header .menu > ul > li,
	header ul.menu > li{
		display: block;
	}
	header .menu > li > a{
		display: block;
		margin-left: 0;
		padding: 0.8rem 0;
		border-radius: 0;
	}
		header .menu > li:not(:last-child) > a{
			border-bottom: none;
	}
	header .menu li:hover > ul {
		display: none;
	}
*/
	header ul.menu {
		overflow-x: auto;
	}
	
	.home article, .category article, .tag article, .archive article, .search article {
    margin: 0 auto 80px;
	}
	.top-thumbnail img, .category article p img, .main-image img, .main-post img, .top-post img {
		width: 100%;
		height: auto;
	}
	.home .post-title, .category .post-title {
		padding: 0 10px 10px 10px;
	}
	.top-thumbnail {
    margin-bottom: 10px;
	}
	
	
	.search-box form {
		width: 95%;
	}
}
/* =================================
   breakpoint 600px以下に適用
================================= */
@media all and (max-width: 600px) {
	header h1 {
		width: 90%;
	}
	
	.sns-wrap a img {
		width: 50px;
	}
	.sns-wrap a {
    margin-right: 5px;
	}
	
	.main-image {
		margin-bottom: 20px;
		text-align: center;
	}
	.link-btn {
		text-align: center;
	}
	
	.top-post .meta-category a:not(:first-of-type), .top-post .tags a:not(:first-of-type) {
		display: none;
	}
	.main-post .meta-category a, .main-post .post-date {
		display: inline-block;
		margin-bottom: 10px;
	}
}

/* =================================
   breakpoint 480px以下に適用
================================= */
@media all and (max-width: 480px) {
/*
	.tags {
    display: inline-block;
    margin-top: 20px;
	}
*/
/*
	.main-post .post-meta {
		margin-top: -10px;
    margin-bottom: 15px;
    line-height: 2;
	}
*/
	.main-text p {
		margin-bottom: 15px;
		font-size: 16px;
		line-height: 1.8;
		word-wrap: break-word !important;
	}
	.main-text p a {
		line-height: 1.5 !important;
		word-wrap: break-word !important;
	}
	.box-wrap a, .box-wrap2 a {
		color: #5287b2 !important;
		font-size: 18px;
		line-height: 1.5 !important;
		word-wrap: break-word;
	}
	.box-wrap, .box-wrap2 {
		line-height: 1.5 !important;
	}
}
	
/* =================================
   breakpoint 400px以下に適用
================================= */
@media all and (max-width: 400px) {
	.home article, .category article, .tag article, .archive article, .search article {
    margin: 0 auto 40px;
	}
	.top-post .post-title a, .main-post .post-title a, .top-post .post-title a {
		font-size: 1.3rem;
	}
	.top-thumbnail a img:hover {
		margin-bottom: 0;
		transform: scale(1);
	}
	.top-thumbnail:hover {
		box-shadow: none;
	}
	
	.box-wrap {
		padding: 10px;
	}
	
	.midashi1 {
		margin: 40px 10px 15px;
	}
	.midashi2 {
		margin: 40px 10px 15px;
	}
	.midashi3 {
		margin: 40px 10px 15px;
	}
	.midashi4 {
		margin: 40px 10px 15px;
	}

}


/* =================================
   breakpoint 360px以下に適用
================================= */
@media all and (max-width: 360px) {
	.sns-wrap a img {
		width: 40px;
	}
	.sns-wrap a {
    margin-right: 3px;
	}
}