/*
Theme Name: 1010uzu4
Theme URI: http://1010uzu.com/
Description: トイレのうず用テーマ4
Version: 0.2
Author: asacone
Author URI: http://1010uzu.com/
*/

/*icon font*/
@font-face {
  font-family: 'fontello';
  src: url('/wp/wp-content/themes/1010uzu4/fontello-icon/font/fontello.eot?64727391');
  src: url('/wp/wp-content/themes/1010uzu4/fontello-icon/font/fontello.eot?64727391#iefix') format('embedded-opentype'),
       url('/wp/wp-content/themes/1010uzu4/fontello-icon/font/fontello.woff2?64727391') format('woff2'),
       url('/wp/wp-content/themes/1010uzu4/fontello-icon/font/fontello.woff?64727391') format('woff'),
       url('/wp/wp-content/themes/1010uzu4/fontello-icon/font/fontello.ttf?64727391') format('truetype'),
       url('/wp/wp-content/themes/1010uzu4/fontello-icon/font/fontello.svg?64727391#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*end icon font*/

/* post content */
.post-content, .widget, .footer > p{
	grid-column: main;
}
.post-content{
	position: relative;
	grid-column: full;
	display: grid;
	grid-template-columns:
		[full-start]
		var(--full-margin)
		[wide-main-start]
		var(--wide-margin)
		[main-start]
		minmax(0, max-content)
		[center]
		minmax(0, max-content)
		[main-end]
		var(--wide-margin)
		[wide-main-end]
		var(--full-margin)
		[full-end];
	/* grid-row: minmax(0, max-content); */
	grid-auto-flow: dense;
	width: 100cqw;
	background-color: #fff;
}
.post-content > p, .post-content > div, .post-content > aside, .post-content > h2, .post-content > h3, .post-content > h4, .post-content > h5, .post-content > blockquote, .post-content > ul, .post-content > ol, .post-content > dl{
	grid-column: main;
	/* background-color: #fff; */
}
.post-content > p{
	width: var(--main-width);
}
/* 背景の白画像 */
/* .post-content::before, .index-content::before, .front-page-content::before{
	content: '';
	display: block; */
	/* width: 100vw; */
	/* width: 100cqw;
	height: 100%;
	position: absolute;
	top: 0;
	left: calc(50% - 50cqw);
	background-color: #fff;
	z-index: -1;
} */

.post-content > .google-ads{
	display: block !important;
    /* width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important; */
	position: relative;
	background-color: #f8f8f8;
}
.google-ads > div{
	margin: 0 auto;
	max-width: 1024px;
	min-height: 268px;
}
.post-content > .google-ads > p{
	padding-bottom: 0;
	margin: 0.3rem;
	font-size: 1.4rem;
	color: #666666;
	text-align: center;
}
/* .post-content > .google-ads > ins{
	display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
} */
.wp-singular .post-content > .google-ads > h2::before{
	display: none;
}
@media screen and (max-width:500px) {
	.google-ads > div{
		min-height: 100cqw;
	}
}
/* @media screen and (min-width:744px) { */
@media screen and (min-width:501px) {
	.google-ads > div{
		min-height: 280px;
	}
}

/*共通マージン*/
.post-content h3, .post-content p, .post-content header, .post-content > ul, .post-content > ol, .post-content > dl, .post-content table, .post-content pre, .post-content blockquote, #ez-toc-container, .post-content > .photo-container, .comment-list ul, #comment-list p, #footer p, .kaereba, .cstmreba, .blogcard, .google-ads, .ins-block, .youtube-container, .scroll-box, .wp-embedded-content, .code-toolbar{
	margin-bottom: 3rem;
}
.post-content > p:first-child{
	padding-top: 3rem;
}

.wp-singular .post-content h2, .respond-area h2, .wp-singular .front-page-content h2{
	position: relative;
	z-index: 0;
	padding: 6rem 0;
	text-align: center;
	font-size: 2rem;
	line-height: 160%;
	counter-increment: h2;
	counter-reset : h3;
	clear: both;
}
.wp-singular .post-content h2::before, .respond-area h2::before, .wp-singular .front-page-content h2::before{
	content: counter(h2);
	display: block;
	width: 6.2rem;
	height: 6.2rem;
	position: absolute;
	top: 6rem;
	left: 50%;
	z-index: -1;
	transform: translate(-50%, -50%);
	border: 0.1rem solid #b2d2f3;
	border-radius: 50%;
	margin: 0 auto;
	font-size: 4rem;
	line-height: 6.2rem;
	color: #e9e9e9;
	box-sizing: border-box;
}

.post-content h3{
	counter-increment: h3;
	position: relative;
	z-index: 0;
	padding: 2rem 3rem 1rem 3rem;
	font-size: 1.8rem;
	counter-reset : h4;
	clear: both;
}
.post-content h3::before{
	content: counter(h2) '-' counter(h3);
	display: block;
	width: 4rem;
	height: 4rem;
	position: absolute;
	top: 0.2rem;
	left: 0;
	z-index: -1;
	border: 0.1rem solid #b2d2f3;
	border-radius: 50%;
	font-size: 1.2rem;
	color: #cccccc;
	line-height: 3.8rem;
	text-align: center;
	box-sizing: border-box;
}

.post-content h4{
	counter-increment: h4;
	position: relative;
	z-index: 0;
	padding: 1rem 4.5rem;
	font-size: 1.6rem;
	clear: both;
}
.post-content h4::before{
	content: counter(h2) '-' counter(h3) '-' counter(h4);
	display: block;
	width: 3.2rem;
	height: 3.2rem;
	position: absolute;
	top: 0.7rem;
	left: 1rem;
	z-index: -1;
	border: 0.1rem solid #b2d2f3;
	border-radius: 50%;
	font-size: 0.8rem;
	color: #cccccc;
	line-height: 3rem;
	text-align: center;
	box-sizing: border-box;
}

/*画像と動画の上下の線と左右の飛び出し*/
.post-content > .photo-container, .post-content > .youtube-container, .post-content > .code-toolbar, .post-content > .google-ads, .post-content > .new-posts{
	/* position: relative; */
	/* margin-left: calc(50% - 50cqw); */
	/* margin-right: calc(50% - 50cqw); */
	grid-column: full;
	padding: 0;
	border-top: 0.1rem solid #cccccc;
	border-bottom: 0.1rem solid #cccccc;
	/* object-fit: cover; */
}

blockquote.wp-embedded-content + p{
	position: relative;
}

/*画像*/
/* .lazy-container {
	display: block;
	position: relative;
	height: 0;
	width: 100%;
	background-color: #666666;
} */
.wp-caption, .no-caption, .youtube, .post-content pre{
	margin-left: auto;
	margin-right: auto;
}
.aligncenter, .alignleft, .alignright, .alignnone{
	display: block;
	height: auto;
}
.wp-post-image, .peg-photo{
	display: block;
	width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}
.alignnone{
/*	max-width: 100%;	*/
}
.post-content .wp-caption-text{
	margin-bottom: 0;
	padding: 1rem 3rem;
	/*background-color: #ffffff;*/
	border-top: 0.1rem solid #cccccc;
	text-align: left;
}
.photo-container, .youtube-container, .post-content > .code-toolbar{
	display: grid;
	/* grid-template-columns: 1fr; */
	/* justify-self: center; */
	background-color: #f8f8f8;
	font-size: 1.4rem;
	color: #666666;
}
/* .wp-caption{
	margin-left: 0;
} */
.no-caption{
	height: auto;
	max-width: 480px;
}
/* .lazyload,
.lazyloading {
	opacity: 0;
}
.lazyloaded {
	opacity: 1;
	transition: opacity 300ms;
} */

/* YouTube */
/*.youtube{
	margin-left: 0;
	padding: 0;
}*/
.youtube-inner{
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.code-toolbar{
	width: 100cqw;
	/* place-content: center; */
	/* justify-content: center; */
}

/* prism の影消す */
.post-content pre[class*="language-"]::after, .post-content pre[class*="language-"]::before{
	box-shadow: none;
}

.post-content code[class*="language-"], .post-content pre[class*="language-"]{
	width: 100cqw;
	margin-top: 0;
	margin-bottom: 0;
	color: #111;
}

.post-content code.line-wrap, .post-content pre.line-wrap {
  white-space: pre-wrap;
}
.line-highlight {
    z-index: 10;
}

@media screen and (max-width:743px) {
	img.alignleft, img.alignright{
		width: 100%;
	}
	.no-caption, .wp-caption {
		width: 100cqw !important;
	}
	.post-content .wp-caption-text{
		width: 100cqw;
		margin-left: calc(50% - 50cqw);
	}
}
@media screen and (min-width:744px) {
/*　画面サイズが744pxから1023pxまではここを読み込む　*/
	.photo-container.alignright, .photo-container.alignleft{
		grid-column: center/main-end;
		justify-self: end;
		/* grid-row: span 2; */
		/* order: 2; */
		/* display: inline-block; */
		/* float: right; */
		/*width: 240px;*/		/*幅を決め打ち*/
		/* margin-right: 0;
		margin-left: 3%; */
		padding: 1rem;
		border: 0.1rem solid #cccccc;
	}
	.photo-container.alignleft{
		grid-column: main-start/center;
		justify-self: start;
		/* float: left; */
		/* margin-right: 3%;
		margin-left: 0; */
	}
	.photo-container.alignright + p{
		grid-column: main-start/center;
		padding-right: 3cqw;
		width: auto;
		/* grid-row: span 2; */
		/* order: 1; */
	}
	.photo-container.alignleft + p{
		grid-column: center/main-end;
		padding-left: 3cqw;
		width: auto;
		/* grid-row: span 2; */
		/* order: 1; */
	}
	.photo-container.alignright.tb-aligncenter + p, .photo-container.alignleft.tb-aligncenter + p{
		grid-column: main;
	}

	/* .photo-container.alignright + p::after, .photo-container.alignleft + p::after, .photo-container.alignright + .photo-container.alignleft + p::before, .photo-container.alignleft + .photo-container.alignright + p::before{
		content: "";
		display: block;
		clear: both;
	} */
	.post-content .wp-caption-text{
		margin: 0 calc(50% - 50cqw);
		padding: 1rem calc(50cqw - 50% + 5%);
		/*padding: 1rem calc(5% + 3rem);*/
		/*border-top: none;*/
	}
	.post-content .alignright > .wp-caption-text, .post-content .alignleft > .wp-caption-text {
		padding: 1rem calc(50cqw - 50% + 1rem);
		border-top: none;
	}

	/* コード表示 prism */
	/* .code-toolbar{
		grid-template-columns:
		[full-start]
		var(--full-margin)
		[wide-main-start]
		var(--wide-margin)
		[main-start]
		minmax(0, 1fr)
		[main-end]
		var(--wide-margin)
		[wide-main-end]
		var(--full-margin)
		[full-end];	
	} */
	.post-content pre[class*="language-"]{
		grid-column: main;
	}
	.post-content code[class*="language-"], .post-content pre[class*="language-"]{
		width: var(--main-width);
		/* width: auto; */
	}
}

@media screen and (min-width:1025px) {
	.photo-container.alignright{
		grid-column: center/main-end;
	}
	.photo-container.alignleft{
		grid-column: main-start/center;
	}
	.post-content .wp-caption-text{
		padding: 1rem calc(50cqw - 50% + 5%);
	}
	.post-content .alignright > .wp-caption-text, .post-content .alignleft > .wp-caption-text{
		margin-left: auto;
		margin-right: auto;
		padding: 1rem 0;
	}
	.code-toolbar{
		/* place-content: center; */
	}
	.youtube{
		width: 640px;
	}
	
}
@media screen and (min-width:744px) and (max-width:1024px) {
	.photo-container.tb-aligncenter{
		grid-column: full;
		justify-self: center;
		width: 100%;
		padding: 0;
	}
	.tb-aligncenter .alignright > .wp-caption-text, .tb-aligncenter .alignleft > .wp-caption-text{
		border-top: 0.1rem solid #ccc;
	}
}
.post-content ul, .post-content ol{
	margin-left: 3rem;
}
.post-content ul li::before{
	content: '•';
	color: #666666;
}
.post-content ol{
	list-style-type: decimal;
}
.post-content cite{
	border-bottom: dotted 1px #333333;
}
.post-content abbr{
	border-bottom: dotted 1px #333333;
}
.post-content pre{
	/* max-width: 922px; */
	max-width: var(--main-width);
/*	margin-left: 2rem;*/
	margin: 0 auto;
	font-family: 'Courier', 'Osaka-Mono','ＭＳ ゴシック', monospace;
}

/*引用、追記、表の共通*/
.post-content blockquote, .post-content .ins-block, #ez-toc-container, #comment-list ul, .post-content .blogcard, .post-content .scroll-box, .post-content .cstmreba, .post-content .wp-embedded-content{
	grid-column: wide-main;
	position: relative;
	/* margin-left: calc(var(--wide-margin)* -1); */
	/* margin-right: calc(var(--wide-margin)* -1); */
	padding: 3.5rem calc(var(--wide-margin) + 1.2rem);
	border-top: 0.1rem solid #cccccc;
	border-bottom: 0.1rem solid #cccccc;
}
.post-content blockquote, .ins-block,{
	background-color: #f8f8f8;
}
/* 続きの時に線をまとめる */
.ins-block + .ins-block, .ins-block + #ez-toc-container, .ins-block + .blogcard, .ins-block + .cstmreba, .cstmreba + .ins-block, .blogcard + #ez-toc-container, .blogcard + .blogcard, .blogcard + .kaereba, .blogcard + .cstmreba, .kaereba + .kaereba, .cstmreba + .cstmreba{
	margin-top: -3rem;
	border-top: none;
}

.post-content blockquote::before, .post-content blockquote::after, .ins-block::before, .ins-block::after{
	display: block;
	position: absolute;
	font-family: 'Arial',sans-serif;
	font-size: 8rem;
	line-height: 100%;
	color: #cccccc;	
}
.post-content blockquote::before {
	content: "“";
	top: 0;
	left: 0.6rem;
}
.post-content blockquote::after {
	content: "”";
	right: 0.6rem;
	bottom: -4rem;
}
.post-content blockquote p{
	margin-bottom: 0;
}
.post-content ins{
	text-decoration: underline;
}
.ins-block{
	display: block;
	text-decoration: none;
	padding-top: 4rem;
	padding-bottom: 0;
}
.ins-block::before {
	content: "追記";
	font-size: 1.6rem;
	top: 1.6rem;
	left: 4rem;
}
.ins-block::after {
	content: "\f040";
	top: 0.4rem;
	left: 1.2rem;
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	font-family: fontello;
	font-size: 3rem;
	font-display: swap;
	speak: none;
}

.post-content cite{
	font-style: oblique;
}
.post-content abbr{
	border-bottom: dotted 1px #333333;
}
.post-content pre{
	font-size: 0.875em;
}

/*テーブル*/
.post-content table{
	margin: 0 auto;
}
.post-content th, .post-content td{
	border: solid 1px #cccccc;
	padding: 0.8rem 1.2rem;
}
.post-content th:first-child, .post-content td:first-child{
	border-left: none;
}
.post-content th:last-child, .post-content td:last-child{
	border-right: none;
}
.post-content th{
	text-align: center;
}
caption{
	padding: 0.5rem 1.2rem;
	border-top: solid 1px #cccccc;
}
.scroll-box {
	overflow: auto;
	border-top: none;
	border-bottom: none;
	white-space: nowrap;
	padding: 0;  
}
.scroll-box::-webkit-scrollbar {
	height: 0.5rem;
}
.scroll-box::-webkit-scrollbar-track {
	border-radius: 0.5rem;
	background: #f3f3f3;
}
.scroll-box::-webkit-scrollbar-thumb {
	border-radius: 0.5rem;
	background: #cccccc;
}

/*定義済みリスト*/
.post-content dl{
	display: grid;
	grid-template-columns: max-content max-content;
	/* display: flex;
	flex-wrap: wrap;
	margin-top: 1px; */
}
.post-content dt{
	grid-column: 1/2;
	/* flex-basis: 28%;
	box-sizing: border-box; */
	/* margin-top: -1px; */
	padding: 0.8rem 1.2rem;
	border-bottom: solid 1px #cccccc;
	border-right: solid 1px #cccccc;
}
.post-content dd{
	grid-column: 2/3;
	/* flex-basis: 72%;
	box-sizing: border-box; */
	/* margin-top: -1px; */
	/* margin-left: -1px; */
	padding: 0.8rem 1.2rem;
	word-break: break-all;
	border-bottom: solid 1px #cccccc;
}
.post-content dt:first-of-type, .post-content dd:first-of-type{
	border-top: solid 1px #cccccc;
}

/* オーダーつきリスト */
.post-content ol {
  list-style: none;
}
.post-content ol li::before {
  content: counter(list-item) ") "; 
}

.nowrap {
	white-space: nowrap;
}

/* 長い単語の強制改行 */
.pre-wrap{
	white-space: pre-wrap;
}

/* 表の縦書き回転文字 */
.tate-kaiten{
	display: inline-block;
	transform: rotate(90deg) scale(-1, 1);
}

/*カエレバ*/
.cstmreba{
	padding-top: 1.6rem;
	padding-bottom: 1.6rem;
}

.kaerebalink-box{
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	position: relative;
	padding: 0 0 2.4rem 0;
}

.kaereba td:first-child, .kaerebalink-image{
	text-align: center;
	min-height: 17rem;
	margin: 1.6rem 0;
}
.kaerebalink-image img{
	max-height: 17rem;
	width: auto;
	height: auto;
}
.kaerebalink-info{
	/* display: flex;
	flex-direction: column;
	margin-bottom: 2.8rem; */
}
.kaerebalink-detail{
	margin: 0 0 1.6rem 0;
	text-align: right;
	font-size: 1.4rem;
}
.kaerebalink-powered-date{
	text-align: right;
	font-size: 1.4rem;
}
.kaerebalink-name{
	/* margin-top: -0.8rem; */
}
.kaerebalink-powered-date{
	position: absolute;
	right: 0;
	bottom: 0;
}
.kaerebalink-link1 > div > a{
	display: block;
	width: inherit;
	margin: 1rem 0;
	padding: 1.2rem;
	border-radius: 1rem;
	background-color: #ffffff;
	border: 0.2rem solid #666666;
	text-align: center;
	color: #333333;
	text-decoration: none;
	/* font-weight: bold; */
}
.post-content div.shoplinkamazon>a{
	border-color: #eb8c11;
	color: #aa650c;
}
.post-content div.shoplinkrakuten>a{
	border-color: #bf0000;
	color: #bf0000;
}
.post-content div.shoplinkyahoo>a{
	border-color: #4c88ff;
	color: #4072d5;
}
.post-content div.shoplinkiherb>a{
	border-color: #458500;
	color: #458500;
}
@media screen and (min-width: 744px) {
	.kaerebalink-link1{
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
		gap: 0.5%;
		/* display: flex;
		justify-content: space-between; */
	}
}
@media screen and (min-width:1025px) {
	.kaerebalink-box{
		grid-template-columns: 1fr 3fr;
	}
}

/*G-tools*/
/*.g-tools_table td{
	 border: none; 
}*/

/* 目次 */
/*#ez-toc-container{
	padding: 1rem;
	margin-bottom: 2rem;
}*/

#ez-toc-container .ez-toc-title {
	margin: 0 0 0.5rem 0;
	padding: 0;
	font-size: 1.8rem;
	line-height: 150%;
}
#ez-toc-container ul{
	counter-reset: section;
	margin: 0 0 0 0;
	padding-left: 2.5rem;
	list-style: none;
	text-indent: -2.5rem;
}
#ez-toc-container li li{
	margin-left: -1.2rem;
}
#ez-toc-container ul > li::before {
	content : counters(section, '-');
	counter-increment : section;
	display: inline-block;
	margin-right: 0.5rem;
	font-size: 0.75em;
	font-weight: lighter;
	color: #999999;
	text-indent: 0;
}
#ez-toc-container > nav > ul > li::before{
	width: 2.8rem;
	height: 2.8rem;
	border: 0.1rem solid #b2d2f3;
	border-radius: 50%;
	font-size: 0.75em;
	line-height: 2.5rem;
	text-align: center;
	vertical-align: 4%;
	box-sizing: border-box;
}
@media all and (-ms-high-contrast:none){ /*IE*/
	#ez-toc-container > nav > ul > li::before{
		line-height: 1.5;
		padding-top: 0.4rem;
		font-size: 1.33em;
		vertical-align: middle;
	}
}
#ez-toc-container a{
	color: #333333;
	text-decoration: none;
}
#ez-toc-container a:hover{
	color: #9b190b;
}

/* ブログカード */
.blogcard{
	/* position: relative; */
/*	padding: 0;*/
	font-size: 1.6rem;
	line-height: 1.6;
}
.blogcard a{
	color: #333;
	text-decoration: none;
}
.blogcard-thumbnail-link{
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 2rem;

	/* display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: space-between; */
/*	padding: 2rem 1.2rem;*/
}
.post-content .blogcard-title{
	grid-column: 1/-1;
	/* grid-row: 1/2; */
	/* flex-basis: 100%;
	width: 100%; */
	margin: 0;
	/* padding-bottom: 2rem; */
	font-size: 1em;
	font-weight: bold;
}
.post-content .blogcard-excerpt{
	grid-column: -2/-1;
	/* grid-row: 2/3; */
	/* order: 1; */
	/* flex-basis: calc(100% - 2rem - 100px);
	height: 10rem;
	margin-bottom: 2rem; */
	margin: 0;
	overflow: hidden;
	font-size: 0.875em;
	line-height: 1.45;
}
.blogcard-thumbnail{
	grid-template-columns: 1/2;
	grid-row: 2/3;
	align-self: center;
	width: 100px;
	height: 100px;
	/* margin-bottom: 2rem; */
}
.blogcard-thumb-image{

	/* width: 100%;
	height: auto;
	max-width: 120px; */
	color: #ccc;
	background-color: transparent;
}
.blogcard-footer{
	grid-column: 1/-1;
	align-self: end;
	/* grid-row: 3/4; */
	/* order: 1; */
	/* flex-basis: 100%; */
	font-size: 0.875em;
	line-height: 1;
	/* vertical-align: bottom; */
}
.blogcard-siteicon{
	/* position: relative;
	top: 0.2rem; */
	vertical-align: bottom;
	background-color: transparent;
}
.blogcard-sitename{
	margin-left: 0.5rem;
	vertical-align: center;
}
@media screen and (min-width: 744px) {
	/*.blogcard-thumbnail-link{
		padding-left: 5%;
		padding-right: 5%;
	}*/
	/* .post-content .blogcard-excerpt{
		flex-basis: calc(100% - 5.5% - 100px);
		margin-bottom: 0;
	} */
	.blogcard-thumbnail{
		grid-row: 2/4;
		width: 120px;
		height: 120px;
		/* margin-bottom: 0; */
		background-color: #ccc;
	}
	.blogcard-footer{
		grid-column: -2/-1;
		/* grid-row: 3/4; */
		/* flex-basis: calc(100% - 5.5% - 100px);
		position: absolute;
		left: calc(5.5% + 100px + 4.5%);
		bottom: 3.5rem; */
	}
}

/* twitter embed */
.twitter-tweet {
	margin-left: auto;
	margin-right: auto;
}

/* WP SyntaxHighlighter iPhoneの表示崩れ防止*/
.syntaxhighlighter {
  -webkit-text-size-adjust: 100%;
}

/*関連記事 人気記事 最近の投稿*/
.post-content h2.similar-posts-headline::before{
	content: '';
	top: 50%;
	left: calc(50% + 6rem);
}
.post-content h2.similar-posts-headline::after{
	content: '';
	display: block;
	width: 1.5rem;
	height: 1.5rem;
	position: absolute;
	top: 50%;
	left: calc(50% + 6rem);
	border-right: 0.3rem solid #ccc;
	border-top: 0.3rem solid #ccc;
	transform: rotate(45deg) translate(-85%, 15%);
}
.post-content dl.similar-posts, .post-footer .sga-ranking, .post-footer .recent-posts{
	display: flex;
	flex-flow: row nowrap;
	margin-top: 0;
	overflow-x: scroll;
	background-color: #ffffff;
}
.post-footer .sga-ranking, .post-footer .recent-posts{
	background-color: rgba(0,0,0,0.5);
}
.post-list{
	flex-shrink: 0;
	flex-basis: 28rem;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(3, minmax(3.7rem, max-content));
	border-right: 0.1rem solid #cccccc;
	box-sizing: content-box;
	pointer-events: none;
}
.post-list > dt, .post-list > dd{
	grid-column: 1/-1;
}
.post-list:first-child{
	border-left: 0.1rem solid #cccccc;
}
.post-content .post-list > .posts-title, .post-footer .post-list > posts-title{
	order: 1;
	height: 7.5rem;
	margin: 0.8rem;
	padding: 0;
	border: none;
	overflow: hidden;
	line-height: 1.5;
}
.post-list > .posts-title > a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 0 0.7rem;
	pointer-events: auto;
}
.post-list > .posts-title > a:link{
	text-decoration: none;
}
.post-content .post-list > dd, .post-footer .post-list > dd{
	margin: 0;
	padding: 0;
	border: none;
}
.post-content .post-list > .posts-category, .post-footer .post-list > .posts-category{
	justify-self: end;
	align-self: center;
	font-size: 0.75em;
	line-height: 1;
}
.post-list > .posts-category > a{
	display: inline-block;
	padding: .8rem 0.7rem .4rem 0;
	margin-right: 0.8rem;
	color: #333;
	text-decoration: none;
	pointer-events: auto;
}
.post-list > .posts-category > a::before {
	content: "\f07b";
	font-family: fontello;
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	padding-right: 0.4rem;
	font-display: swap;
	speak: none;
}
.post-content .post-list > .posts-thumbnail, .post-footer .post-list > .posts-thumbnail{
	order: -1;
	position: relative;
	width: 100%;
	background-color: #666;
	line-height: 0;
	overflow: hidden;
}
.post-list > .posts-thumbnail > a{
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	pointer-events: auto;
	color: #fff;
}
.post-list > .posts-thumbnail img{
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	max-width: 280px;
	max-height: 374px;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	/* color: #fff; */
}
.post-list:hover > .posts-thumbnail img{
	transform: translate(-50%, -50%) scale(1.1, 1.1);
	transition: all 0.5s ease-out;
}

@media screen and (min-width: 744px) {
	.post-content h2.similar-posts-headline::after{
		transform: rotate(135deg) translate(-15%, 85%);
	}
	.post-content dl.similar-posts, .post-footer dl.sga-ranking, .post-footer dl.recent-posts{
		flex-wrap: wrap;
		justify-content: space-between;
		overflow-x: visible;
	}
	.post-list{
		flex-basis: 33%;
		flex-grow: 1;
	}
	.post-list:nth-child(3n+1){
		border-left: 0.1rem solid #cccccc;
	}
}

/* 記事フッダー */
.post-content-footer{
	padding-bottom: 8vh;
}
.post-content-footer > aside, .post-content-footer > ul, .post-content-footer > section{
	grid-column: main;
}
/* ソーシャルボタン */
.social {
	clear: both;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin: 4rem 0;
}
.social > li{
	display: grid;
	place-items: center;
}
.social a{
	display: block;
	width: 6rem;
	height: 6rem;
	background: #cccccc;
	border-radius: 50%;
	font-size: 2rem;
	color: #ffffff;
	line-height: 6rem;
	text-decoration: none;
	text-align: center;
}

/* 記事前後ナビ */
footer{
	grid-column: main;
}
.next-prev-nav {
	border-top: 0.1rem solid #cccccc;
	border-bottom: 0.1rem solid #cccccc;
}
.next > a, .prev > a {
	display: flex;
	align-items: center;
	min-height: 8rem;
	padding: 0.5rem 1rem;
	text-decoration: none;
	line-height: 1.4;
}
.prev > a {
	justify-content: flex-end;
}
.prev:not( :first-child ) {
	border-top: 0.1rem solid #cccccc;
}
.next > a::before, .prev > a::after {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 3rem;
	height: 3rem;
	border-top: 0.3rem solid #e9e9e9;
	border-left: 0.3rem solid #e9e9e9;
}
.next > a::before {
	transform: rotate(-45deg);
	margin-right: 0.5rem;
}
.prev > a::after {
	transform: rotate(135deg);
	margin-left: 0.5rem;
}
@media screen and (min-width: 744px) {
	.next-prev-nav{
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.prev{
		grid-column: 2/3;
		/* width: 50%; */
	}
	.next {
		grid-column: 1/2;
		border-right: 0.1rem solid #ccc;
		/* width: 50%; */
	}
	.prev:not( :first-child ) {
		border-top: none;
	}
	.next-prev-nav>li:first-child.prev {
		border-left: 0.1rem solid #ccc;
	}
	.next {
		/* float: right; */
	}
	.next > a, .prev > a {
		height: 100%;
	}
	.next > a {
		padding-right: 1.6rem;
	}
	.prev > a {
		padding-left: 1.6rem;
	}
}

/*コメント*/
#comment-list h2::before{
	content: '→';
	top: 50%;
	left: calc(50% - 7.5rem);
}
#comment-list ul{
	padding-top: 0;
	padding-bottom: 0;
}
.comment{
	padding: 0;
}
.comment:not(:last-child){
	border-bottom: none;
}
.comment header{
	position: relative;
	padding: 1rem 0 0.5rem;
	border-top: 0.1rem solid #ccc;
	border-bottom: 0.1rem solid #ccc;
}
.comment:first-child header{
	border-top: none;
}
.comment header::after{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1rem;
	height: 1rem;
	background-color: #ffffff;
	border-bottom: 0.1rem solid #ccc;
	transform: translate(5rem, 50%) rotate(-45deg);
}
.comment-author-sleepily header{
	text-align: right;
}
.comment-author-sleepily header::after{
	left: auto;
	right: 0;
	transform: translate(-5rem, 50%) rotate(-45deg);
}
.commentauthor{
	display: inline;
}
.commentmetadata{
	display: inline;
	font-size: 1.2rem;
}
.comment div{
	padding: 2rem 0;
}
#comment-list .comment p:last-child{
	margin-bottom: 0;
}
/*@media screen and (min-width:1025px) {
	.comment header, .comment div{
		padding-left: calc((100% - 922px) / 2);
	}
}*/

.respond-area h2::before{
	content: '→';
  top: 50%;
  left: calc(50% + 8.5rem);
}
#respond{
}
input, textarea{
  -webkit-appearance: none;
  border-radius: 0;
}
#comment{
	width: 100%;
	margin-bottom: 0;
	border: 0.1rem solid #adadad;
	line-height: 160%;
	box-sizing: border-box;
}
.comment-form{
	color: #333;
}
.comment-form-comment{
	text-align: right;
}
#author, #email, #url{
	width: 50%;
	margin-right: 1rem;
	margin-bottom: 1rem;
	border: 0.1rem solid #adadad;
	font-size: 1.6rem;
	line-height: 160%;
}
#wp-comment-cookies-consent{
	border: 0.1rem solid #adadad;
}
#respond p{
	font-size: 1.4rem;
	background-color: #fff;
}
#respond label{
	background-color: #fff;
}
.comment-form-author{
	margin-top: -1.5rem;
}
.comment-form-cookies-consent input{
	-webkit-appearance: auto;
}
#submit{
	display: inline-block;
	/* -webkit-appearance: none; */
    /* appearance: none; */
	width: 100%;
	height: auto;
	margin-bottom: 2rem;
	padding: 1.5rem;
	font-size: 1.6rem;
	text-align: center;
	vertical-align: middle;
	background-color: #eee;
	color: #333;
	/* border: none; */
	/* box-shadow: none; */
}


/* フロントページ*/
.front-page-content{
	grid-column: full;
	position: relative;
	padding-bottom: 4vh;
	background-color: #fff;
}

.wp-singular .front-page-content h2::before{
	content: '';
}
/* 最新記事 */
.new-posts{
	grid-column: full;
	display: grid;
	grid-template-columns: repeat(2, 50cqw);
	grid-template-rows: repeat(4, 50cqw);
	gap: 0.1rem;
	background-color: #ccc;
}
.new-post-list{
	display: grid;
	overflow: hidden;
	/* border: 0.1rem solid #ccc; */
	box-sizing: border-box;
	pointer-events: none;
}
.new-post-list:first-child {
	grid-column: 1/3;
	grid-row: 1/3;
}
/* .new-post-list:nth-last-child(2n) {
	border-left: none;
} */
/* .new-post-list:nth-last-child(2n+1) {
	border-right: none;
} */
/* .new-post-list:nth-last-child(2) {
	border-bottom: none;
} */
/* .new-post-list:last-child {
	border-bottom: none;
} */
.new-post-list > .posts-title{
	grid-column: 1/-1;
	grid-row: 1/-1;
	width: 100%;
	height: 100%;
	z-index: 2;
}
.new-post-list > .posts-title > a{
	display: grid;
	align-items: end;
	width: 100%;
	height: 100%;
	padding: 1.5rem;
	font-size: 0.875em;
	font-weight: 700;
	pointer-events: auto;
}
.new-post-list:first-child > .posts-title > a{
	padding: 3rem;
	font-size: 1.142em;
}
.new-post-list a:link, .new-post-list a:visited{
	color: #fff;
	text-decoration: none;
}
.new-post-list > .posts-date{
	grid-column: 1/-1;
	grid-row: 1/-1;
	justify-self: end;
	padding: 1.5rem;
	font-size: 0.75em;
	color: #fff;
	z-index: 1;
}
.new-post-list > .posts-category{
	grid-column: 1/-1;
	grid-row: 1/-1;
	padding: 1.5rem;
	font-size: 0.75em;
	color: #fff;
	z-index: 1;
}
.new-post-list > .posts-category > a{
	pointer-events: auto;
}

.new-post-list > .posts-thumbnail{
	grid-column: 1/-1;
	grid-row: 1/-1;
	display: grid;
	background-color: #666666;
	line-height: 0;
	z-index: 0;
	overflow: hidden;
}
.new-post-list > .posts-thumbnail::before{
	grid-column: 1/-1;
	grid-row: 1/-1;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	z-index: 1;
	box-shadow: 0 -12rem 8rem -2rem rgba(0,0,0,0.6) inset;
}
.new-post-list:first-child > .posts-thumbnail::before{
	box-shadow: 0 -20rem 8rem -2rem rgba(0,0,0,0.6) inset;
}
.new-post-list > .posts-thumbnail > a{
	grid-column: 1/-1;
	grid-row: 1/-1;
	z-index: 0;
	pointer-events: none;
}
.new-post-list:hover > .posts-thumbnail img {
	transform: scale(1.1, 1.1);
	transition: all 0.5s ease-out;
}

@media screen and (min-width: 744px) {
	.new-posts{
		grid-template-columns: repeat(4, 25cqw);
		grid-template-rows: repeat(2, 25cqw);
		margin-bottom: 5rem;
	}
	.new-post-list{
		/* border: 0.1rem solid #ccc; */
		font-size: 1.125em;
	}

	/* .new-post-list:first-child {
		border-left: none;
		border-right: 0.1rem solid #ccc;
		border-top: none;
		border-bottom: none;
	} */
	/* .new-post-list:nth-child(2n){
		border-left: 0.1rem solid #ccc;
	}
	.new-post-list:nth-child(2), .new-post-list:nth-child(3){
		border-top: none;
	}
	.new-post-list:nth-child(4), .new-post-list:nth-child(5){
		border-bottom: none;
	} */
	.new-post-list:first-child > .posts-title > a{
		padding-left: 3rem;
		padding-right: 3rem;
	}
	.new-post-list > .posts-thumbnail::after{
		box-shadow: 0 -20rem 8rem -2rem rgba(0,0,0,0.6) inset;
	}
}

/*カテゴリー別新着記事*/
.category-new-posts{
	grid-column: main;
	padding-bottom: 4rem;
}
.categoris-post-list{
	display: grid;
	grid-template-columns: 10rem 1fr;
    grid-template-rows: 74% 26%;
	width: 100%;
	height: calc((100cqw - var(--wide-margin) * 2) * 0.29);
	max-height: 100px;
	border-bottom: 0.1rem solid #cccccc;
	box-sizing: content-box;
	pointer-events: none;
}
.categoris-post-list a:link, .categoris-post-list a:visited{
	color: #333;
	text-decoration: none;
}

.categoris-post-list:first-child{
	border-top: 0.1rem solid #cccccc;
}
.categoris-post-list > .posts-title{
	grid-column: -2/-1;
	line-height: 1.4;
	box-sizing: content-box;
}
.categoris-post-list > .posts-title > a{
	display: block;
	height: calc(1em * 1.4 * 3);
	padding: 0.8rem 5% 0;
	overflow: hidden;
	box-sizing: content-box;
	pointer-events: auto;
}
.categoris-post-list > .posts-date{
	grid-column: 1/2;
    grid-row: 1/-1;
	align-self: end;
	padding: 0 0 0.8rem 0.8rem;
	font-size: 0.75em;
	line-height: 1;
	color: #ddd;
	text-shadow: 1px 1px 4px #000000, -1px 1px 4px #000000, 1px -1px 4px #000000, -1px -1px 4px #000000;
	z-index: 1;
}
.categoris-post-list > .posts-date::before {
    content: "\f073";
    font-family: fontello;
	width: 1.4rem;
	height: 1.4rem;
    padding-right: 0.3rem;
	font-display: swap;
    speak: none;
}
.categoris-post-list > .posts-category{
	grid-column: -2/-1;
    grid-row: -2/-1;
    justify-self: left;
	align-self: center;
	width: 100%;
	font-size: 0.75em;
	line-height: 1;
	box-sizing: content-box;
}
.categoris-post-list > .posts-category > a{
	display: inline-block;
  	padding: 0.6rem 0.7rem .4rem 0;
	margin-right: 0.8rem;
	pointer-events: auto;
}
.categoris-post-list > .posts-category > a:first-child{
	padding-left: 5%;
}
.categoris-post-list > .posts-category > a::before {
	content: "\f07b";
	font-family: fontello;
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	padding-right: 0.4rem;
	font-display: swap;
	speak: none;
}
.categoris-post-list > .posts-thumbnail{
    grid-column: 1/2;
    grid-row: 1/-1;
	background-color: #666666;
	line-height: 0;
	overflow: hidden;
}
.categoris-post-list > .posts-thumbnail > a{
	pointer-events: auto;
}

.categoris-post-list:hover > .posts-thumbnail img {
	transition: all 0.5s ease-out;
}


/* カテゴリー別記事一覧へボタン */
.to-category-index{
	display: block;
	position: relative;
	width: 100%;
	padding: 1.5rem;
	margin-top: 3rem;
	background-color: #fff;
	border: 0.1rem solid #ccc;
	font-size: 1.4rem;
	text-align: center;
}
a.to-category-index:link, a.to-category-index:visited{
	color: #333;
	text-decoration: none;
}
.to-category-index::before{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 2rem;
	width: 0.8rem;
	height: 0.8rem;
	border-right: 0.2rem solid #333;
	border-top: 0.2rem solid #333;
	transform: rotate(45deg) translateX(-60%);
}
@media screen and ( max-width:350px) {
	.categoris-post-list > .posts-date {
		left: 0.3rem;
		letter-spacing: -0.04em;
	}
	.categoris-post-list > .posts-date::before{
		padding-right: 0.2rem;
	}
}
@media screen and (min-width: 744px) {
	.category-new-posts{
		width: 96%;
	}
	.category-new-posts:nth-of-type(odd){
		grid-column: main-start/center;
	}
	.category-new-posts:nth-of-type(even){
		grid-column: center/main-end;
		justify-self: end;
	}

}

/* インデックスページ*/
.index-content{
	grid-column: full;
	/* position: relative; */
	display: grid;
	grid-template-columns:
		[full-start]
		var(--full-margin)
		[wide-main-start]
		repeat(auto-fit, minmax(32rem, 1fr))
		[wide-main-end]
		var(--full-margin)
		[full-end];
	background-color: #fff;
}
.index-post-list{
	grid-column: wide-main;
	margin-bottom: 7rem;
	pointer-events: none;
	display: grid;
	grid-template-columns: 
		var(--wide-margin)
		minmax(30%, 1fr)
		minmax(64%, 2fr)
		var(--wide-margin);
	grid-template-rows: repeat(3, minmax(3.7rem, max-content));
}
.index-post-list > .posts-title{
	grid-column: 1/-1;
	grid-row: 1/1;
	align-self: end;
	width: 100%;
	height: 100%;
	font-size: 1.1125em;
	overflow-wrap: break-word;
	z-index: 5; 
}
.index-post-list > .posts-title a{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: end;
	width: 100%;
	height: 100%;
	padding: 0 var(--wide-margin) 1.5rem;
	pointer-events: auto;
}
.index-post-list > .posts-title a:link, .index-post-list > .posts-title a:visited{
	color: #fff;
	text-decoration: none;
}
.index-post-list > .posts-date{
	grid-column: 2/3;
	grid-row: 2/3;
	align-self: center;
	font-size: 0.75em;
}
.index-post-list > .posts-date::before {
	content: "\f073";
	font-family: fontello;
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	padding-right: 0.4rem;
	font-display: swap;
	speak: none;
}
.index-post-list > .posts-category{
	grid-column: 3/4;
	grid-row: 2/3;
	align-self: center;
	font-size: 0.75em;
}
.index-post-list > .posts-category > a:link, .index-post-list > .posts-category > a:visited{
	color: #333;
	text-decoration: none;
}
.index-post-list > .posts-category > a::before {
	content: "\f07b";
	font-family: fontello;
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	padding-right: 0.4rem;
	font-display: swap;
	speak: none;
}
.index-post-list > .posts-excerpt{
	grid-column: 2/-2;
}
.index-post-list > .posts-thumbnail{
	grid-column: 1/-1;
	grid-row: 1/2;
	order: -1;
	display: grid;
	/* grid-template-columns: 1fr; */
	/* grid-template-rows: 1fr; */
	/* width: 100cqw;
	height: 56.25cqw; */
	width: 100%;
	/* height: inherit; */
	aspect-ratio: 16 / 9;
	background-color: #666666;
	line-height: 0;
	z-index: 0;
	overflow: hidden;
}
.index-post-list > .posts-thumbnail::after{
	grid-column: 1/-1;
	grid-row: 1/-1;
	content: '';
	display: block;
	width: 100%;
	height: 100%;
	box-shadow: 0 -16rem 8rem -4rem rgba(0,0,0,0.6) inset;
	z-index: 1;
}
.index-post-list > .posts-thumbnail a{
	grid-column: 1/-1;
	grid-row: 1/-1;
}
.index-post-list > .posts-thumbnail img{
	object-fit: cover;
}
.index-post-list:hover > .posts-thumbnail img{
	transform: scale(1.1, 1.1);
	transition: all 0.5s ease-out;
}

@media screen and (min-width:744px) and (max-width:1024px) {
	.index-post-list{
		--wide-width-center: calc(var(--wide-margin) - 1rem);
		--wide-width-left: var(--wide-width-center);
		--wide-width-right: var(--wide-width-center);
		grid-template-columns: 
			var(--wide-width-left)
			minmax(20%, 1fr)
			minmax(56%, 2fr)
			var(--wide-width-right);
	}
	.index-post-list:nth-child(odd){
		grid-column: 2/3;
		--wide-width-left: var(--wide-margin);
	}
	.index-post-list:nth-child(even){
		grid-column: 3/4;
		--wide-width-right: var(--wide-margin);
	}
	.index-post-list:nth-child(odd) > .posts-title a{
		padding-left: var(--wide-margin);
		padding-right: var(--wide-width-center);
	}
	.index-post-list:nth-child(even) > .posts-title a{
		padding-left: var(--wide-width-center);
		padding-right: var(--wide-margin);
	}
	/* .index-post-list > .posts-thumbnail{ */
		/* width: 50cqw;
		height: 28.125cqw; */
	/* } */
}
@media screen and (min-width:1025px) {
	.index-post-list{
		/* flex-basis: 28%; */
		grid-column: 3/4;
		--wide-width-center: calc(var(--wide-margin) - 1.4rem);
		--wide-width-left: var(--wide-width-center);
		--wide-width-right: var(--wide-width-center);
		grid-template-columns: 
			var(--wide-width-left)
			minmax(27%, 1fr)
			minmax(45%, 2fr)
			var(--wide-width-right);
	}
	.index-post-list:nth-child(3n+1){
		grid-column: 2/3;
		--wide-width-left: var(--wide-margin);
	}
	.index-post-list:nth-child(3n){
		grid-column: 4/5;
		--wide-width-right: var(--wide-margin);
	}

	.index-post-list:nth-child(3n+1) > .posts-title a{
		padding-left: var(--wide-margin);
		padding-right: var(--wide-width-center);

	}
	.index-post-list:nth-child(3n) > .posts-title a{
		padding-left: var(--wide-width-center);
		padding-right: var(--wide-margin);

	}
	/* .index-post-list > .posts-thumbnail{ */
		/* width: 33.8rem; */
		/* width: calc((100cqw - var(--full-margin))/3); */
		/* height: 19.2rem; */
	/* } */
}

/* ページングともっと見るボタン */
.page-load-status{
	display: none;
}
.tablenav{
	display: none;
}
.view-more-button{
	grid-column: wide-main;
	position: relative;
	width: calc(100% - var(--wide-margin)*2);
	padding: 1.5rem;
	margin: 0 var(--wide-margin) 3.5rem;
	background-color: #fff;
	border: 0.1rem solid #ccc;
	font-size: 1.4rem;
}
.view-more-button:active {
	background-color: #ccc;
}
.view-more-button::before{
	content: '';
	display: block;
	position: absolute;
	top: 36%;
	left: 2rem;
	width: 0.8rem;
	height: 0.8rem;
	border-left: 0.2rem solid #333;
	border-bottom: 0.2rem solid #333;
	transform: rotate(-45deg);
}
.page-load-status > p{
	margin-top: 1.6rem;
	color: #999;
	text-align: center;
}
.infinite-scroll-request {
	white-space: nowrap;
}
.infinite-scroll-request span {
	display: inline-block;
	vertical-align: middle;
}
.infinite-scroll-request span:nth-of-type(1) {
	-webkit-animation: animation 2s ease 0s infinite;
	animation: animation 2s ease 0s infinite;
}
.infinite-scroll-request span:nth-of-type(2) {
	-webkit-animation: animation 2s ease 0.1s infinite;
	animation: animation 2s ease 0.1s infinite;
}
.infinite-scroll-request span:nth-of-type(3) {
	-webkit-animation: animation 2s ease 0.2s infinite;
	animation: animation 2s ease 0.2s infinite;
}
.infinite-scroll-request span:nth-of-type(4) {
	-webkit-animation: animation 2s ease 0.3s infinite;
	animation: animation 2s ease 0.3s infinite;
}
.infinite-scroll-request span:nth-of-type(5) {
	-webkit-animation: animation 2s ease 0.4s infinite;
	animation: animation 2s ease 0.4s infinite;
}
.infinite-scroll-request span:nth-of-type(6) {
	-webkit-animation: animation 2s ease 0.5s infinite;
	animation: animation 2s ease 0.5s infinite;
}
.infinite-scroll-request span:nth-of-type(7) {
	-webkit-animation: animation 2s ease 0.6s infinite;
	animation: animation 2s ease 0.6s infinite;
}

@-webkit-keyframes animation {
	0% {
		margin-top: 0;
	}
	5% {
		margin-top: -1em;
	}
	10% {
		margin-top: 0;
	}
	13% {
		margin-top: -0.5em;
	}
	16% {
		margin-top: 0;
	}
	18% {
		margin-top: -0.2em;
	}
	20% {
		margin-top: 0;
	}
}

@keyframes animation {
	0% {
		margin-top: 0;
	}
	5% {
		margin-top: -1em;
	}
	10% {
		margin-top: 0;
	}
	13% {
		margin-top: -0.5em;
	}
	16% {
		margin-top: 0;
	}
	18% {
		margin-top: -0.2em;
	}
	20% {
		margin-top: 0;
	}
}


@media screen and (min-width: 744px) {
	.tablenav{
		grid-column: 1 / -1;
		display: block;
		margin-bottom: 9rem;
		text-align: center;
		font-size: 0;
	}
	.view-more-button{
		display: none;
	}
	.page-numbers{
		display: inline-block;
		width: 4rem;
		height: 4rem;
		border: 0.1rem solid #b2d2f3;
		border-radius: 2rem;
		font-size: 1.4rem;
		line-height: 3.8rem;
		text-decoration: none;
		text-align: center;
	}
	.page-numbers.current{
		background-color: #b2d2f3;
	}
	.page-numbers.dots{
		width: 2rem;
		border: none;
	}
	a.page-numbers:hover {
		background-color: #b2d2f3;
	}
}

/* フッター */

.post-footer{
	grid-column: full;
	color: #fff;
}
.widget_simple_ga_ranking, .recent-posts-extended, .list_categories, .widget_text{
	grid-column: main;
}

.post-footer a, .footer a{/*リンクされた文字*/
    color: #fff;
}
.post-footer a:link, .footer a:link{/*未訪問のリンク*/
    color: #fff;
}
.post-footer a:visited, .footer a:visited{/*訪問後のリンク*/
    color: #fff;
}
.post-footer a:hover, .footer a:hover{/*マウスをのせたとき*/
    color: #fff;
}
.post-footer a:active, .footer a:active{/*クリック中*/
}
.post-footer h2{
	display: inline-block;
	position: relative;
	margin: 2rem 0;
	padding: 1.2rem 0 1rem 1.5rem;
	font-size: 1.8rem;
	vertical-align: middle;
}
.post-footer h2::before{
	display: block;
	content: '';
	position: absolute;
	top: 0;
	right: -3.8rem;
	width: 5rem;
	height: 5rem;
	border: 0.1rem solid #b2d2f3;
	border-radius: 50%;
/*	z-index: -1;*/
}
.post-footer .widget_text h2::before {
	left: -0.4em;
}
.post-footer h2::after {
	content: '';
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	position: absolute;
	top: 50%;
	right: -2.7rem;
	border-right: 0.3rem solid #ccc;
	border-top: 0.3rem solid #ccc;
	transform: rotate(45deg) translate(-85%, 15%);
}
.list_categories > h2::after {
	transform: rotate(135deg) translate(-10%, 85%);
}

.list_categories ul {
	margin-left: 3rem;
}
.list-categories-in-parent a:before{
	content: "\f07b";
	font-family: fontello;
	display: inline-block;
	width: 2rem;
	height: 2rem;
	padding-right: 0.5rem;
	text-decoration: none;
	font-display: swap;
	speak: none;
}
.post-footer .widget_text h2::after {
	display: none;
}


@media screen and (min-width:744px) {
	.post-footer .widget{
		 width: 96%;
	}
	.post-footer .widget:nth-child(odd){
		grid-column: main-start/center;
	}
	.post-footer .widget:nth-child(even){
		grid-column: center/main-end;
		justify-self: end;
	}
	.widget_simple_ga_ranking, .list_categories{
	
	}
	.recent-posts-extended, .widget_text{
	}
	/*人気記事・最近の投稿*/
	.post-footer h2::before, .post-footer #rpwe_widget-2 h2::before{
		left: -0.4rem;
	}
	.post-footer h2::after{
		display: none;
	}
	.post-footer .sga-ranking, .post-footer .recent-posts{
		display: block;
		margin-bottom: 4rem;
	}
	.post-footer .post-list{
		grid-template-columns: 10rem 1fr;
		grid-template-rows: 74% 26%;
		width: 100%;
		height: calc((100cqw - var(--wide-margin) * 2) * 0.29);
		max-height: 100px;
		border-right: none;
		border-bottom: 0.1rem solid #cccccc;
		box-sizing: content-box;
		pointer-events: none;
	}
	.post-footer dl > .post-list:nth-child(3n+1) {
		border-left: none;
	}
	.post-footer dl > .post-list a:link, .post-footer dl > .post-list a:visited{
		color: #fff;
	}
	
	.post-footer dl > .post-list:first-child{
		border-top: 0.1rem solid #cccccc;
	}

	
	/* .post-footer .post-list > dt.posts-title{
	}
	.post-footer .post-list > .posts-category{

	}
	.post-footer .post-list > .posts-thumbnail{
	} */



	.post-footer .post-list > .posts-title{
		order: 0;
		grid-column: 2/3;
		margin: 0;
		line-height: 1.4;
		box-sizing: content-box;
	}
	.post-footer .post-list > .posts-title > a{
		height: calc(1em * 1.4 * 3);
		padding: 0.8rem 5% 0;
		overflow: hidden;
		line-height: 1.3;
		pointer-events: auto;
	}
	.post-footer .post-list > .posts-category{
		grid-column: 2/3;
		grid-row: -2/-1;
		justify-self: left;
		padding-left: 5%;
		font-size: 0.75em;
		box-sizing: content-box;
	}
	.post-footer dl > .post-list > .posts-category > a{
		padding: 0.4rem 0.7rem 0.4rem 0;
		margin-right: 0.8rem;
		line-height: 1.7;
		white-space: nowrap;
		pointer-events: auto;
	}
	/* .post-footer dl > .post-list > .posts-category > a:first-child{
		padding-left: 5%;
	} */
	.post-footer .post-list > .posts-thumbnail{
		order: 1;
		grid-column: 1/2;
		grid-row: 1/-1;
		background-color: #666;
		line-height: 0;
		overflow: hidden;
	}
	.post-footer .post-list > .posts-thumbnail > a{
		display: block;
		position: relative;
		width: 100%;
		padding-bottom: 100%;
		pointer-events: auto;
	}
	.post-footer dl > .post-list > .posts-thumbnail img {
		position: absolute;
		top: 50%;
		left: 50%;
		height: 100%;
		transform: translate(-50%,-50%);
		/* background-color: #666; */
	}
	
	.post-footer dl > .post-list:hover > .posts-thumbnail img {
		transform: translate(-50%,-50%) scale(1.1, 1.1);
		transition: all 0.5s ease-out;
	}
}

.footer{
	grid-column: main;
	color: #ffffff;
}

.footer p{
	margin-top: 2.5rem;
	text-align: center;
}
@media screen and (max-width:400px) {
	.wrap-400px::before{
		content: '\A';
		display: inline;
		white-space: pre;
	}
}

/* PhotoSwipe */
.pswp__custom-caption{
	display: flex;
	flex-direction: row;
	align-items: center;
    width: 100%;
	min-height: 4.4rem;
    position: absolute;
    bottom: 0;
	background-color: rgba(0,0,0,.6);
	padding: 1rem;	
	font-size: 1.3rem;
	color: #ccc;
}

@media screen and (min-width: 1025px) {
	.pswp__custom-caption{
		padding: 1rem 26cqw;	
		font-size: 1.4rem;
	}
}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?64727391#fontello') format('svg');
  }
}
*/

/*icon font*/

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
 
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
 
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
 
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
 
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
 
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
 
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-line:before { content: '\e800'; } /* '' */
.icon-hatenabookmark:before { content: '\e801'; } /* '' */
.icon-right-bold:before { content: '\e802'; } /* '' */
.icon-arrows-cw:before { content: '\e803'; } /* '' */
.icon-search:before { content: '\f002'; } /* '' */
.icon-user:before { content: '\f007'; } /* '' */
.icon-tags:before { content: '\f02c'; } /* '' */
.icon-pencil:before { content: '\f040'; } /* '' */
.icon-calendar:before { content: '\f073'; } /* '' */
.icon-comment:before { content: '\f075'; } /* '' */
.icon-folder:before { content: '\f07b'; } /* '' */
.icon-chat:before { content: '\f086'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-twitter:before { content: '\f099'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-rss:before { content: '\f09e'; } /* '' */
.icon-docs:before { content: '\f0c5'; } /* '' */
.icon-gplus:before { content: '\f0d5'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */
.icon-suitcase:before { content: '\f0f2'; } /* '' */
.icon-doc-inv:before { content: '\f15b'; } /* '' */
.icon-wordpress:before { content: '\f19a'; } /* '' */
.icon-file-pdf:before { content: '\f1c1'; } /* '' */
.icon-file-archive:before { content: '\f1c6'; } /* '' */
.icon-wikipedia-w:before { content: '\f266'; } /* '' */

/*end icon font*/
