@charset "utf-8";
/*
Theme Name: Blog Single Column ver 4.1
Theme URI:
Description:
Version: blog
Author: Nomeu
*/


/****	Custom Propaties	*************************************************/
:root {
	--main-color: #ffcb36;
	--main-color_strong: #ffab00e6;
	--main-color_strong_2: #c9671e;
	--main-color_strong_3: #c34c00;
	--main-color_weak: #fff5cc;
	--link-color: #318bec;
}


/****	Initialize	*************************************************/
* {
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	word-break: break-all;
	box-sizing: border-box;
	user-select: none;
	border: 0 none;
}

.mobile {
	display: none;
}

.pc {
	display: block;
}

@media (max-width: 900px) {
	.mobile {
		display: block;
	}

	.pc {
		display: none;
	}
}


/****	Format	*************************************************/

.clearfix {
	clear: both;

	&::after {
		clear: both;
		content: "";
		display: block;
	}
}

.no-select {
	user-select: none;
}

hr {
	border: 0;
}

table {
	border-collapse: collapse;
	border: 0 none;
	border-spacing: 0;
	font-size: inherit;
}

pre, code, kbd, samp, tt {
	font-family: "Noto Sans JP", sans-serif;
	user-select: text;
}

cite {
	font-style: normal;
}


/****	Layout	*************************************************/

body {
	max-width: 1050px;
	margin: 0 auto;
}

header {}

.flex {
	display: flex;
}

#two-column {
	padding: 20px 0 40px;
}

footer {
}

/* サイドバー固定js用 */
#sidebar_wrapper {
	position: sticky;
	bottom: 0;
	align-self: flex-end;
}
.sidebar-fix-top {
	position: fixed;
	top: 0;
}
.sidebar-fix-bottom {
	position: fixed;
	bottom: 0;
}
.sidebar-bottom {
	position: absolute;
	bottom: 0;
}

@media (max-width: 900px) {
	body.home #two-column {
		padding-top: 0;
	}
}
@media (min-width: 901px) {
	#two-column {
		display: grid;
		grid-template-columns: calc(100% - 350px) 300px;
		/*align-items: flex-end;*/
		padding: 20px 0 40px;
	}

	#sidebar {
		width: 300px;
		margin-left: 50px;
		/*bottom: 0;*/
	}
}



/****	Text	*************************************************/

body {
	font-size: 16px;
	font-weight: 300;
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	text-align: left;
	margin: auto;
	color: #000;
	background-color: #fff;
	user-select: none;

	@media (max-width: 900px) {
		font-size: 15px;
	}
}

h1 {
	font-size: 150%;
	line-height: 1em;
	font-weight: 400;
}

h2 {
	font-size: 140%;
	line-height: 1.2em;
	font-weight: bold;

	&.headline {
		text-align: center;
		color: #000;
		border-bottom: 1px solid #999;
		font-size: 18px;
		margin: 80px 10% 20px;
		padding-bottom: 10px;

		@media (max-width: 900px) {
			font-size: 24px;
			margin: 60px 10px 20px;
		}
	}
}

h3 {
	font-size: 130%;
	line-height: 1em;
	font-weight: bold;

	&.headline {
		margin: 100px auto 60px;
		text-align: center;
		font-size: 160%;
		border-bottom: 1px solid #000;
		padding-bottom: 10px;
		width: calc(50%);

		@media (max-width: 900px) {
			margin: 50px auto 30px;
		}
	}
}

h4 {
	font-size: 116%;
	line-height: 1em;
	font-weight: normal;
}

p {
	margin: 1.8em 0;
	line-height: 1.8em;

	@media (max-width: 900px) {
		line-height: 1.7em;
	}
}

em {
	font-style: italic;
}

strong {
	font-weight: 700;
	font-style: normal;
}

/* SVG や画像の色をCSSで変える */
/* https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element */
/* https://codepen.io/sosuke/pen/Pjoqqp */
/* https://angel-rs.github.io/css-color-filter-generator/ */
.filter {
	filter: brightness(0) saturate(100%) invert(80%) sepia(79%) saturate(698%) hue-rotate(326deg) brightness(103%) contrast(108%);
}



/****	Link	*************************************************/

a {
	text-decoration: none;

	&:link,
	&:visited {
		color: #000;
		/*color: #834415;*/
	}

	&:active,
	&:focus {
		outline-style: none;
	}

	@media (hover:hover) {
		&:hover {
			opacity: 0.8;
		}
	}

	img {
		border: 0 none;
	}

	&.hover {
		display: inline-block;
		will-change: transform;
 		transition-timing-function: ease;
		transition-duration: 0.2s;

		&:hover {
			@media (hover:hover) {
				transform: translateY(-6px);
			}
		}
	}
}



/****	Image	*************************************************/

img {
	vertical-align: bottom;
}



/****	List	*************************************************/

ul {
	margin: 14px 10px 24px 30px;
	list-style-position: outside;

	li {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}

		ul {
			list-style: none;
		}
	}
}

ol {
	margin: 14px 10px 24px 30px;
	list-style-type: none;
	counter-reset: item;

	li {
		margin-bottom: 20px;
	}

	> li {
		display: table;
		counter-increment: item;
		margin-bottom: 6px;
	}
}



/****	Star-rating	*************************************************/

.star-rating {
	--star-size: 14px;
	position: relative;
	display: inline-block;
	white-space: nowrap;
	width: calc(var(--star-size) * 5); /*星5個の幅*/
	height: var(--star-size); /*星1個の幅*/
	font-size: var(--star-size);

	&::before,
	&::after {
		position: absolute;
		display: inline-block;
		height: var(--star-size);
		content: '★★★★★';
		line-height: var(--star-size);
	}

	&::before {
		color: #888; /*背景の星*/
	}

	&::after {
		overflow: hidden;
		width: calc(var(--score) * var(--star-size)); /* 要素の変数(score)を読み取る*/
		color: #ffb906; /*評価の星*/
	}
}



/****	Header	*************************************************/

header {
	width: 100%;
	z-index: 9999;
	position: relative;
	margin-bottom: 60px;

	.logo {
		padding: 30px 0;
		text-align: center;
	}

	.logo a {
		display: inline-flex;
	}

	img.avatar {
		background-color: #fff;
		border-radius: 5px;
		padding: 2px;
		height: 60px;
		width: auto;
	}

	img.siteName {
		height: 40px;
		width: auto;
		align-self: end;
    	margin-left: 9px;
		filter: brightness(0) saturate(100%) invert(15%) sepia(0%) saturate(4181%) hue-rotate(206deg) brightness(91%) contrast(81%);
	}

	#search {
		display: flex;
		justify-content: center;

		fieldset {
			display: flex;
			border: 0 none;

			input.searchKeyword {
				font-size: 15px;
				color: #666;
				width: 300px;
				height: 30px;
				border: 1px solid #ccc;
				padding: 0 6px;
				border-radius: 5px;

				&:focus-visible {
					outline: 1px solid #333;
				}
			}

			button.search-submit {
				background: transparent;
				cursor: pointer;
				height: 30px;
				margin-left: -40px;
				width: 40px;
				border-radius: 0 5px 5px 0;

				img {
					width: 26px;
					padding: 3px;
					opacity: 0.5;
				}

				&:hover {
					@media (hover:hover) {
						background: #666;
					}
				}
			}
		}
	}

	@media(max-width: 900px) {

		margin-bottom: 20px;

		.logo {
			padding: 20px 0;
		}

		img.avatar {
			height: 46px;
		}

		img.siteName {
			height: 27px;
			margin-bottom: 6px;
		}

		input.searchKeyword {
			width: 260px !important;
		}
	}
}


/****	Image Popup	Windows *************************************************/

#modal-popup {
	display: none;
	position: fixed;
	background: rgba(0, 0, 0, .76);
	backdrop-filter: blur(3px) grayscale(50%);
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: calc(infinity);

	& > div {
		display: flex;
		height: 100vh;
		justify-content: center;
		align-items: center;

		& > img {
			max-width: calc(100vw - 30px);
			max-height: calc(100vh - 30px);
		}
	}
}


/****	Arrow	*************************************************/

#go-top {
	position: fixed;
	right: 0;
	bottom: 0;
	color: #000;
	opacity: 0.2;
	z-index: 10;
	cursor: pointer;

	img {
		width: 100px;
	}


	@media(max-width: 900px) {

		img {
			width: 70px;
		}
	}
}



/****	Toppage	/ Archives *************************************************/

.header {
	margin-bottom: 50px;
	align-items: center;
	display: grid;
	grid-template-columns: auto min-content auto;

	.line-before, .line-after {
		align-content: center;
		border-top: 1px solid #ccc;
	}

	.line-before {
		margin-left: 6px;
	}

	.line-after {
		margin-right: 6px;
	}

	.line-middle {
		margin: 0 20px;
		font-size: 20px;
		text-align: center;

		img {
			--default-size: 60px;
			width: var(--default-size);

			&.review {
				width: calc(var(--default-size) + 10px);
			}

			&.article {
				width: calc(var(--default-size) - 10px);
			}

			&.category {
				width: calc(var(--default-size) - 6px);
			}

			&.tag {
				width: calc(var(--default-size) - 10px);
				margin-bottom: 4px;
			}

			&.avatar {
				width: calc(var(--default-size));
			}

			&.search {
				width: calc(var(--default-size) - 10px);
			}

			&.popular {
				width: calc(var(--default-size) - 6px);
			}

			@media (max-width: 900px) {
				--default-size: 40px;
			}
		}
	}

	h1, h2 {
		font-size: 16px;
		font-weight: 500;
		line-height: 1.2em;
		grid-column: 1/4;
		justify-self: center;
	}


}

#category-description {
	margin: 0 20% 80px;
	display: flex;

	.avatar {
		width: 36px;
		align-self: center;
	}

	.text {
		position: relative;
		width: 100%;
		padding: 10px 10px 10px 14px;
		background-color: #efefef;
		font-weight: 400;
		border-radius: 10px;
		font-size: 0.9em;
		margin-left: 15px;

		&::before {
			content: "";
			position: absolute;
			top: 50%;
			left: -25px;
			margin-top: -15px;
			border: 15px solid transparent;
			border-right: 16px solid #efefef;
		}
	}

	@media (max-width: 900px) {
		margin: 0px 10% 60px;
	}
}

.posts-list {

	margin-bottom: 100px;

	@media(max-width: 900px) {
		margin: 80px 0;
	}

	.list {
		display: grid;
  		grid-template-columns: 1fr 1fr;

		@media (max-width: 900px) {
			grid-template-columns: auto;
		}

		.post {

			margin: 0 10px 20px;

			@media (max-width: 900px) {
				margin: 0 10px 30px;
			}

			a {
				display: grid;
				grid-template-columns: 130px auto;
				grid-template-rows: 130px;
				overflow: hidden;
				border-radius: 5px;
				box-shadow: 1px 1px 10px #e6e6e6;

				.left {
					background-size: cover;
					background-position-x: center;
					background-position-y: top;
				}

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 13px;
					margin: 10px;

					.title {
					}

					.bottom {
						display: flex;
						justify-content: space-between;

						.category {
							display: inline-block;
							border: 1px solid #ccc;
							padding: 0px 10px;
							color: #666;
							border-radius: 10px;
						}

						.date {
							color: #a4a4a4;
						}
					}

				}

				@media (max-width: 900px) {
					grid-template-columns: 100px auto;
					grid-template-rows: 110px;

					.right {
						font-size: 12px;
					}
				}
			}
		}

		&.single {
			grid-template-columns: auto;

			.post a .right {
				margin: 15px;

				@media (max-width: 900px) {
					margin: 6px 6px 6px 10px;
				}
			}
		}
	}

	.more {
		text-align: center;
		margin-top: 20px;
	}

	.more a {
		display: inline-block;
		border: 1px solid #ccc;
		padding: 5px 10px;
		border-radius: 10px;
	}
}

.posts-list:last-child {
	margin-bottom: 0;
}

#recommend.posts-list, #recent-posts.posts-list {

	.list {
		grid-template-columns: 1fr 1fr 1fr;

		.post {

			display: flex;
			/* flex-flow: column; */

			a {
				grid-template-columns: 1fr;
      			grid-template-rows: 150px auto;

				.right {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin: 10px;

					.bottom {
						margin-top: 10px;
					}
				}
			}
		}
	}

	@media(max-width: 900px) {
		.list {
			grid-template-columns: auto !important;
		}
	}
}

.google-auto-placed + #recommend.posts-list {
	margin-top: 0;
}

#recommend.posts-list {
	margin-top: 20px;

	@media(max-width: 900px) {
		margin-top: 40px;
	}
}

#categories {

	margin-bottom: 100px;

	.list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;

		.icon {
			text-align: center;
			margin-right: 20px;
		}

		.icon:last-child {
			margin-right: 0;
		}

		img {
			width: 140px;
			padding: 34px;
			box-shadow: 1px 1px 8px #D7D7D7;
			background-color: #f0f0f0;
		}

		span {
			display: block;
			margin-top: 6px;
		}
	}

	@media(max-width: 900px) {
		.list {
			font-size: 13px;
			justify-content: space-evenly;

			.icon {
				margin-right: 0;
				margin-bottom: 10px;
			}

			img {
				width: 100px;
				padding: 20px;
			}
		}
	}
}

#about, #author {
	font-size: 13px;

	.header {
		margin-bottom: 10px;
	}

	.grid {
		display: grid;
		grid-template-columns: 80px auto;
		margin: 0 40px;

		.avatar {
			grid-column: 1;

			img {
				width: 80px;
			}
		}

		.name {
			grid-column: 2;
			align-self: center;
			margin-left: 20px;

			.a {
				font-size: 16px;
				font-weight: 500;
			}

			.b {
				color: #888;
				margin: 5px 0 0 20px;
			}

		}

		.sns {
			grid-column: 2;
			margin: 0 20px;

			a {
				display: inline-block;
				text-align: center;
				margin-right: 20px;
				color: #888;

				img {
					width: 40px;
				}
			}
		}

		.text {
			grid-column: 2;
			margin-top: 20px;
			margin-left: 20px;

			p {
				margin: 0 0 10px;
			}
		}
	}

	@media(max-width: 900px) {

		.header {
			margin-bottom: 20px;
		}

		.grid {
			grid-template-columns: 80px auto;
			margin: 0 10px;

			.avatar {
				margin-left: 30px;

				img {
					width: 50px;
				}
			}

			.name {
				.b {
					margin: 0 0 0 20px;
				}
			}

			.sns {
				margin: 10px 10px 20px;

				a {
					img {
						width: 30px;
					}
				}
			}

			.text {
				grid-column: 1/3;
				margin: 0 10px;
			}
		}
	}
}

#author {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
	margin-top: 40px;
	position: relative;

	.corner {
		position: absolute;
		right: 60px;
		top: 30px;
		font-size: 24px;
		color: #d1d1d1;
		font-weight: 900;
	}

	.grid {
		grid-template-columns: 60px auto;
		background-color: rgb(245, 245, 245);
    	padding: 20px;
		border-radius: 10px;

		.avatar {
			img {
				width: 60px;
			}
		}

		.sns {
			margin: 10px 20px;

			a {
				margin-right: 10px;

				img {
					width: 26px;
				}
			}
		}

		.text {
			margin-top: 10px;

			p {
				margin: 0;
			}

			a {
				text-decoration: underline;
			}
		}
	}

	@media(max-width: 900px) {

		.corner {
			right: 30px;
			font-size: 18px;
		}

		.grid {
			.avatar {
				margin-left: 0;
			}

			.sns {
				margin: 6px 20px;
			}

			.text {
				margin: 10px 0;
			}
		}
	}
}

#tag_cloud .tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	a {
		display: block;
		color: #fff;
		font-size: 90%;
		font-weight: 500;
		padding: 4px 10px;
		margin: 0 8px 4px;
		background-color: var(--main-color_strong_3);
	}
}


#navi {
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
	padding: 10px;
	overflow: hidden;

	a {
		font-weight: 400;
		border: 1px solid #888;
		display: block;
		padding: 10px 20px;
		border-radius: 10px;
	}

	@media (max-width: 900px) {
		font-size: 14px;
	}
}





/****	Sidebar	*************************************************/

#sidebar {
	.google {
		margin-bottom: 30px;
	}

	a {
		text-decoration: none;

		&:hover {
			@media (hover:hover) {
				text-decoration: underline;
			}
		}
	}

	> div {
		box-sizing: border-box;
	}

	.box {
		border-radius: 5px;
		margin-bottom: 80px;

		ul {
			margin: 0 4px 10px 14px;
			padding-bottom: 10px;
			list-style-type: none;
			display: inline-block;
			font-size: 90%;

			li {
				margin-bottom: 10px;

				a {
					margin-bottom: 6px;
					color: #666;
					font-weight: 400;
				}
			}
		}
	}

	.index {
		font-size: 120%;
		font-weight: 700;
		display: block;
		padding: 8px 8px 8px 30px;
		border-bottom: 1px solid #ccc;
   		margin-bottom: 10px;

		img {
			width: 40px;
			margin-left: 10px;

			&.recommend {
				margin-bottom: -2px;
			}

			&.popular {
				margin-bottom: -4px;
			}
		}
	}

	.profile {
		margin-bottom: 40px;
		position: relative;
		overflow: hidden;
		padding: 0 5px;
		font-size: 90%;

		a {
			color: var(--link-color);
			text-decoration: underline;
		}

		.avatar {
			text-align: center;

			img {
				width: 140px;
				height: auto;
				margin: 10px 0;
				border-radius: 30px;
				background-color: var(--main-color_weak);
			}
		}

		.text {
			margin-bottom: 10px;
		}

		@media (max-width: 900px) {
			.pc {
				display: none;
			}
		}
	}

	#recommends_side {
		.index {
			margin-bottom: 16px;
		}

		a {
			display: block;
			box-shadow: 1px 1px 10px #ccc;
			border-radius: 10px;
			overflow: hidden;
			margin-bottom: 22px;

			.thumbnail img {
				width: 100%;
			}

			&:hover {
				@media (hover:hover) {
					text-decoration: none;
				}
			}

			.title {
				padding: 5px 10px;
				font-size: 80%;
				word-break: break-all;

			}
		}

		@media (max-width: 900px) {
			margin-top: 40px;

			.title {
				font-size: 11px;
			}
		}
	}

	> div:last-child {
		margin-bottom: 0;
	}
}

#recent_posts table, #ga_ranking table {
	margin-top: -6px;

	tr {
		display: block;
		margin-top: 15px;

		td {
			vertical-align: top;

			&:first-of-type img {
				border-left: 4px solid #ccc;
			}
		}
	}

	a {
		font-size: 12px;
		line-height: 1.5;
		font-weight: 340;
		display: block;
		color: #555;


		@media (max-width: 900px) {
			font-size: 11px;
		}
	}

	img {
		width: 60px;
		height: auto;
		margin-right: 8px;
		padding-left: 2px;
	}
}

#ga_ranking table {
	tr:first-child td:first-of-type img,
	tr:nth-child(2) td:first-of-type img,
	tr:nth-child(3) td:first-of-type img {
		border-color: #e3614ce6;
	}

	tr:nth-child(4) td:first-of-type img,
	tr:nth-child(5) td:first-of-type img {
		border-color: #efb170;
	}

	tr:nth-child(6) td:first-of-type img,
	tr:nth-child(7) td:first-of-type img {
		border-color: #dec5af;
	}
}




/****	Post / Single	*************************************************/

article {
	user-select: nonet;

	div.h1 {
		position: relative;
		padding: 60px 20px;

		.blur {
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: -5px;
			bottom: -5px;
			left: -5px;
			right: -5px;
			z-index: -1;
			filter: blur(3px) grayscale(30%);
		}


		@media (max-width: 900px) {
			padding: 50px 10px;
		}
	}

	h1 {
		font-size: 24px;
		line-height: 1.3;
		padding: 20px 20px;
		background-color: #ffffffe0;
		border-radius: 10px;

		a {
			color: #000 !important;
		}
	}

	.categories {
		margin: 30px 0 6px;

		> a,
		.tag_separation,
		.tags a {
			margin-right: 14px;
			display: inline-flex;
		}

		.tags a {
			&:last-of-type {
				margin-right: 0;
			}

			&::before {
				content: "#";
			}
		}

		a {
			background-color: #f3f3f3;
			text-decoration: none;
			font-size: 13px;
			padding: 1px 15px;
			border-radius: 10px;
			align-items: baseline;
		}

		svg {
			fill: #000;
			width: 16px;
			padding-top: 4px;
			margin: 0px 0px 0 -5px;
		}

	}

	.date_and_share {
		color: #999;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 26px;

		a {
			color: #999;
			font-weight: 500;
		}
	}

	.date {
		font-size: 14px;
		align-content: center;

		.modified-date {
		}
	}

	.share {
		> .wrap {
			display: inline-flex;
			flex-direction: row;
			/*background-color: var(--main-color_weak);*/
			border-radius: 5px;
		}

		a {
			margin-right: 5px;

			img {
				width: 30px;
			}
		}

		> div > div:last-child a {
			margin-right: 0;
		}
	}

	.stars {
		margin-left: 20px;

		.star-rating {
			--star-size: 20px;
			text-shadow: 0 0 0px #fff;
		}
	}

	.admin {
		display: inline;
		margin-left: 30px;
	}

	#excerpt {
		margin: 0px 0px 40px;
		display: grid;
		grid-template-columns: min-content auto;

		.avatar {
			width: 60px;
			height: auto;
			margin-top: 2px;
		}

		.text {
			position: relative;
			background-color: #efefef;
			padding: 10px 10px 10px 18px;
      		margin-left: 14px;
			border-radius: 10px;
			font-size: 90%;
			line-height: 1.6em;
			color: #333;
			align-content: space-evenly;

			&::before {
				content: "";
				position: absolute;
				top: 0;
				margin-top: 20px;
				left: -25px;
				border: 15px solid transparent;
				border-right: 16px solid #efefef;
			}
		}

		@media (max-width: 900px) {
			.avatar {
				width: 40px;
			}
		}
	}

	.textBody {
		margin: 0 auto;
		color: #555;
		font-weight: 340;

		* {
			word-wrap: normal;
			word-break: normal;
		}

		p img {
			border: 0 none;
			max-width: 100%;
			height: auto;
		}

		/* 一番最初のimg */
		> p:first-of-type img {
			width: 100%;
		}

		img[border="0"] {
			border: 0 none !important;
		}

		a {
			color: var(--link-color);
			text-decoration: underline;

			img {
				border-color: var(--link-color);
				border: 0 none;
			}
		}

		h2 {
			color: #fff;
			padding: 14px;
			margin: 100px 0 50px;
			border: 10px solid #ff725b;
			border-radius: 5px;
			background: linear-gradient(to right, #ff725b 35%, #fc9207 100%);
			position: relative;

			a {
				color: #1f78d8;
			}
		}

		h3 {
			color: #fff;
			font-weight: bold;
			line-height: 1.5em;
			padding: 10px 20px;
			margin: 80px 0 40px 0;
			border: 6px solid #cacaca;
			border-radius: 5px;
			background: linear-gradient(to right, #1d59b6 35%, #0f3c81 100%);
			position: relative;

			a {
				color: #FBB;
			}
		}

		h2 + h3 {
			margin-top: 0px;
		}

		strong {
			background: linear-gradient(transparent 85%, #ffea9f 85%);
			color: #333;
		}

		blockquote,
		.notice,
		ul, ol {
			margin: 40px 10px 40px 20px;
			border: 1px solid #CCC;
			background-color: #fcfcfc;
		}

		blockquote,
		.notice {
			padding: 20px;

			h3 {
				margin: 0;
			}

			ul, ol {
				border: 0 none;
				padding: 0 0 0 30px;
				margin: 0;
			}

			ol {
				padding: 0;
			}

			> *:first-child  {
				margin-top: 0;
			}

			> *:last-child {
				margin-bottom: 0;
			}
		}

		ul, ol {
			padding: 20px 20px 20px 50px;
			list-style-type: none;

			li {
				&:last-child {
					margin-bottom: 0;
				}

				ul, ol {
					border: 0 none;
					margin: 0;
					padding: 20px 0 20px 30px;
				}
			}
		}

		ul li {
			&::before {
				content: "●";
				color: var(--main-color);
				font-size: 80%;
				vertical-align: baseline;
				margin-left: -20px;
				width: 20px;
				display: inline-block;
			}

			ul li::before {
				color: #cacaca;
			}
		}

		ol > li {
			&:before {
				content: counters(item, "-") ". ";
				display: table-cell;
				padding-right: 6px;
			}

			ol li:before {
				content: counters(item, "-") ". ";
			}
		}

		a.link-button {
			font-size: 140%;
			color: #fff;
			font-weight: 700;
			padding: 20px 10px;
			display: block;
			text-align: center;
			background: linear-gradient(150deg, #da6767, #658ed7);
			text-shadow: 1px 1px 4px #543b3b;
			text-decoration: none;
			border-radius: 2px;
			margin: 50px 0;
			box-shadow: 1px 1px 5px #939393;
			transition: all .5s;

			&::after {
				content: "";
				display: inline-block;
				width: 19px;
     			height: 19px;
				margin-left: 10px;
				mask-image: url(./images/link.svg);
        		mask-size: contain;
				mask-repeat: no-repeat;
        		background-color: #fff;
			}

			&:hover {
				@media (hover:hover) {
					background: linear-gradient(30deg, #dc8b36, #658ed7);
				}
			}
		}

		.stars {
			display: flex;
			justify-content: center;
			margin: 40px 10px;
			padding: 20px;
			color: #fff;
			font-weight: 600;
			background: linear-gradient(150deg, #e8b547, #da4242);

			.text {
				margin-right: 20px;
			}
		}
	}

	iframe.youtube {
		width: 100%;
		height: calc(80vw*9/16);
		min-width: 200px;
		min-height: 150px;
		max-height: 325px;
	}
}

#table_of_contents, #table_of_contents_sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 30px;
	background-color: var(--main-color_weak);
	padding: 20px 0 10px 0;

	.title {
		margin: 0 0 20px;
		font-size: 120%;
		color: var(--main-color_strong_3);
		font-weight: bold;
		text-align: center;
	}

	ul {
		list-style: outside;
		list-style-type: decimal;
		margin: 0 10px 20px 20px;
		padding: 0;
		border: 0 none;
		background-color: transparent;

		li {
			margin-bottom: 8px;
		}

		ul {
			margin: 10px 0 20px 10px;
			list-style-type: disclosure-closed;

			li::before {
				content: none;
			}
		}
	}

	> ul {
		counter-reset: list_counter;

		> li {
			list-style: none;
			margin-bottom: 8px;
			line-height: 1.2;
			position: relative;
			margin-left: 47px;

			&::before {
				content: counter(list_counter);
				counter-increment: list_counter;
				background-color: var(--main-color_strong);
				border-radius: 5px;
				color: #fff;
				font-weight: bold;
				padding: 4px 10px;
				position: absolute;
				bottom: 0;
				top: 0;
				height: 16px;
				display: flex;
				width: 20px;
				justify-content: center;
				align-items: center;
				margin: 0 8px 0 -47px;
			}
		}
	}

	a {
		color: inherit;
		text-decoration: none;

		&:visited {
			color: #b7884b;
		}

		&:hover {
			@media (hover:hover) {
				text-decoration: underline;
			}
		}
	}
}

#table_of_contents_sidebar {
	font-size: 13px;
	margin: 0 0 40px 0;

	> ul {
		margin-left: 10px;

		>li {
			&::before {
				height: 11px;
			}

			> ul {
				margin-left: -16px;
			}
		}
	}

}

cite.blogcard {
	font-style: normal;
	display: block;
	position: relative;
	border: 2px solid #fff;
	margin: 60px 0px 50px 10px;
	border-radius: 5px;
	box-shadow: 2px 3px 10px 2px #ccc;
	background-color: var(--main-color_weak);

	a {
		text-decoration: none;
		display: flex;
		align-items: center;
		color: var(--main-color_strong_2);

		&:hover {
			@media (hover:hover) {
				img {
					opacity: inherit;
				}
			}
		}

		.blogcard-info {
			color: #999;

			.blogcard-favicon img {
				margin-right: 10px;
				vertical-align: baseline;
			}
		}
	}

	.blogcard-headline {
		position: absolute;
		border-radius: 5px 5px 0 0;
		font-size: 14px;
		padding: 2px 10px;
		top: -26px;
		left: 50px;

		.blogcard-favicon img {
			vertical-align: middle;
			width: 20px;
			height: auto;
			position: absolute;
			left: -26px;
		}

		span::after {
			/* content: "こちらもどうぞ"; */
		}
	}

	.blogcard-thumbnail {
		width: 140px;
		min-width: 140px;
		height: auto;

		img {
			width: 100%;
		}
	}

	.blogcard-title {
		padding: 12px 20px;
		font-weight: bold;
	}

	.blogcard-date {
		margin-top: 20px;
	}
}

cite.itemlinks {
	display: grid;
	grid-template-columns: 120px 1fr;
	align-items: center;
	padding: 10px;
	margin: 1.5em 0 1.5em 10px;
    border: solid 8px #e3e3e3;
    background-color: #fff;
	border-radius: 5px;
	/* box-shadow: 2px 3px 8px 1px rgb(227, 227, 227); */
	overflow: hidden;

	.image {
		display: flex;
		align-self: flex-start;
		justify-self: center;

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

	.info {
		margin-left: 10px;
		font-size: 10px;

		a {
			border: 0 none;
		}

		.title {
			font-size: 12px;
			font-weight: 500;
			color: #333;
			line-height: 1.33;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			display: -webkit-box;
		}

		.release, .author, .producer {
			color: #666;
			margin: 7px 0 7px 12px;
		}

		.price {
			font-size: 130%;
			margin: 10px 0;

			.regular {
				color: #777;
				text-decoration: line-through;
				font-style: italic;
			}

			.now {
				color: #333;
				font-weight: 700;
			}

			.saving_rate {
				margin-left: 5px;
				color: #333;
			}

			.high {
				color: #c50000;
				font-weight: bold;
			}

			.point {
				margin-left: 5px;
				color: #333;
			}

			.coupon {
				margin-left: 5px;
				color: #c50000;
			}
		}

		.star {
			display: flex;
			align-items: center;
			margin: 10px 0 18px;
			font-size: 12px;
			color: #444;

			.star-rating {
				--star-size: 14px;
			}

			.amount {
				margin-left: 4px;
			}
		}

		.as_of_writing {
			display: flex;
			justify-content: space-between;
			margin: 7px 0 7px 12px;

			.review_amount {
				span {
					color: #000;
					font-size: 120%;
					font-weight: 400;
					margin-left: 4px;
				}
			}

			.notion {
				color: #666;
				font-style: italic;
			}
		}
	}

	&.video {
		border: solid 8px #0f5690;
		background-color: #000;
		color: #fff;

		.info {
			.title a {
				color: #fff;
			}

			.release, .author, .producer {
				color: #ddd;
			}

			.star {
				color: #fff;
			}

			.as_of_writing {
				color: #ddd;

				.review_amount {
					span {
						color: #ddd;
					}
				}
				.notion {
					color: #ddd;
				}
			}
		}
	}

	.links {
		display: flex;
		margin-top: 10px;

		&.one,
		&.multiple {
			font-size: 12px;
		}

		&.one div {
			width: 100%;
		}

		&.multiple {
			justify-content: space-between;
			grid-column: 1/3;

			div {
				flex-basis: 32%;
			}
		}

		a {
			display: block;
			width: 100%;
			padding: 10px 0;
			text-decoration: none;
			color: #fff;
			font-weight: bold;
			box-shadow: 0 1px 8px #ccccccb3;
			border: none;
			border-radius: 5px;
			text-align: center;
		}

		a:hover {
			@media (hover:hover) {
				opacity: 0.8;
			}
		}

		.amazon a {
			background-color: #f6a306;
		}

		.rakuten a {
			background-color: #cf4944;
		}

		.yahoo a {
			background-color: #51a7e8;
		}
	}

	&.video .links {
		a {
			box-shadow: none;
		}

		.amazon a {
			background-color: #1a98ff;
		}
	}

	@media (max-width: 900px) {

		grid-template-columns: 80px 1fr;

		.info {
			.release, .author, .producer {
				margin: 4px 0 4px 12px;
			}

			.price, .star {
				margin: 6px 0;
			}
		}

		.links a {
			padding: 6px 0;
		}
	}
}

blockquote cite.itemlinks,
.notice cite.itemlinks {
	margin-left: 0;
}


@media (max-width: 900px) {

	article {
		padding: 0 10px;
	}

	article h1 {
		font-size: 18px;
		line-height: 1.2em;
	}

	article > .info {
		margin: 16px 0px 10px;
	}

	article #toc_container ul {
		margin-left: 40px;
	}

	article #toc_container ul li ul {
		margin-left: 0px;
	}

	article .textBody h2 {
		font-size: 17px;
		margin: 80px 0 30px;
		padding: 10px 10px 10px 10px;
	}

	article .textBody h3 {
		font-size: 17px;
		margin: 70px 0 30px;
		padding: 10px 0 10px 13px;
	}

	article .textBody {
		padding: 10px 0 0 0;
	}

	article .textBody p {
		margin-left: 0;
	}

	article .textBody > p:first-of-type {
		margin-top: 0;
	}

	article .textBody > p:first-of-type img {
		width: auto;
		min-width: calc(100% + 20px);
		margin-left: -10px;
		margin-top: -10px;
	}

	article .textBody ul, article .textBody ol {
		padding: 20px 10px 20px 30px;
		margin: 10px;
	}

	article .textBody blockquote,
	article .textBody .notice {
		margin: 20px 10px;
		padding: 20px 10px;
	}

	article .textBody blockquote ul,
	article .textBody blockquote ol,
	article .textBody .notice ul,
	article .textBody .notice ol {
		padding-left: 14px;
	}

	article .textBody blockquote ul li,
	article .textBody blockquote ol li,
	article .textBody .notice ul li,
	article .textBody .notice ol li {
		margin-bottom: 10px;
	}

	article .textBody blockquote ul li ul,
	article .textBody blockquote ol li ol
	article .textBody .notice ul li ul,
	article .textBody .notice ol li ol {
		padding-top: 10px;
	}

	article .textBody a.link-button {
		margin-left: 0;
		font-size: 4vw;
	}

	cite.blogcard {
		margin: 60px 10px;
	}

	cite.blogcard .blogcard-thumbnail {
		width: 100px;
		min-width: 100px;
	}

	cite.blogcard .blogcard-title {
		padding: 2px 10px;
		font-size: 12px;
	}
}



/****	below single / swiper / post-list	*************************************************/

#recommend-swiper, #popular-swiper-wrap {
	margin: 100px 0;

	@media(max-width: 900px) {
		margin: 80px 0;
	}
}


#recommend-swiper, #popular-swiper {
	position: relative;
	display: block;

	.swiper-button-next, .swiper-button-prev {
		color: #a2a2a2;
	}

	.swiper-button-prev {
		margin-left: -10px;
	}

	.swiper-button-next {
		margin-right: -10px;
	}

	.swiper-pagination-bullet-active {
		background-color: var(--main-color);
	}

	.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
		bottom: 0;
	}

	.swiper.single {
		.label {
			position: absolute;
			font-size: 28px;
			font-weight: 500;
			padding: 10px;
			color: #fff;
			background-color: #0009;
			user-select: none;
			z-index: 10;
		}

		a.post {
			.thumbnail {
				position: relative;
				height: calc(400 * 1vw/10);
				max-height: 418px;
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				background-color: var(--main-color_strong);
			}

			.title {
				position: absolute;
				bottom: 0;
				background-color: #fffc;
				font-size: 16px;
				font-weight: 400;
				text-shadow: 0 0 10px #fff;
				padding: 10px;
			}
		}

		@media(max-width: 900px) {
			a.post {
				.thumbnail {
					height: 280px;
				}

				.title {
					font-size: 12px;
					line-height: 1.1;
				}
			}

			.label {
				font-size: 1.4em;
			}
		}
	}

	.swiper.multi {

		.swiper-slide {
			display: flex;
			height: unset;
		}

		a.post {
			display: block;
			padding: 0 2px;
			font-size: 12px;
			line-height: 1.6;
			word-break: break-all;

			img {
				width: 100%;
				border-radius: 5px;
				overflow: hidden;
			}

			@media(max-width: 900px) {
				width: calc(100vw/3 - 0px);

				.title {
					font-size: 10px;
				}
			}
		}

		+ div[role=button],
		+ div[role=button] + div[role=button] {
			top: auto;
			bottom: 20px;
		}
	}


}



/****	footer	*************************************************/

footer {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid #ccc;
	font-size: 80%;
	text-align: center;
	padding: 20px 10px;
	margin-top: 80px;

	a {
		text-decoration: underline;
	}
}

body.single footer {
	@media(max-width: 900px) {
		margin-top: 0px;
	}
}



/****	Google	*************************************************/

header .google-auto-placed,
#recommend-swiper .google-auto-placed,
#popular-swiper .google-auto-placed,
/*.post-list .post .google-auto-placed,*/
#categories .wrap > div .google-auto-placed,
article cite.itemlinks .google-auto-placed,
#about .google-auto-placed,
#index .info .google-auto-placed {
	display: none;
}