
:root{
	--contents-max-width : 1280px;
	--main-width: calc(61.8% + 320px +64px);
	--article-width :61.8%;
}
@media screen and (max-width: 782px) {
	:root{
		--article-width :100%;
	}
}	
.main{
	flex-wrap: nowrap;
}

.article{
	position: relative;
	box-sizing:border-box;
	margin-top:0.25%;
	margin-bottom:0.25%;
	padding: 16px;
	font-size: 1.6rem;
	line-height: 2;
	width: var(--article-width);
}
.aside{
	width: 200px
}

.thumbnail{
	overflow: hidden;
	width: 100%;
	height: 33.3%;
}
.thumbnail img{
	width: inherit;
	object-fit: cover;
	transition-duration: 0.35s;
}
.thumbnail img:hover{
	transform: scale(1.05);
	transition-duration: 0.35s;
}

.title{
	font-size: 3.25rem;
	font-weight: 500;
	color: #3f3f3f;
	text-align: left;
	line-height: 1.5;
}
.overview{
	width: 100%;
	font-size: 1.6rem;
	font-weight: 400;
	word-break: break-all;
	text-align: left;
	color: #2b2b2b;
	line-height: 1.75;
}

.overview p{
	margin-top: 0.9em;
	margin-bottom: 0.9em;
}

.date{
	display: block;
	font-size: 1.4rem;
	text-align: right;
	margin-bottom: 0px;
	bottom: 0px;
	color:#6c6c6c;
}

.article ul{
	list-style: none;
	padding: 0px;
}

/*.article ul li{
	position: relative;
	padding: 0.2rem 0.5rem;
}*/


.article .merit li::before
{
	content: "";
  	vertical-align: middle;
	width: 1em;
	height: 1em;
	display: inline-block;
	background-image: url("img/circle.svg");
	margin-right: 8px;
}

.article .demerit li::before
{
	content: "";
  	vertical-align: middle;
	width: 1em;
	height: 1em;
	display: inline-block;
	background-image: url("img/cross.svg");
	margin-right: 8px;
}

.article ol{
	counter-reset: section;
	padding:0px;
}

.article ol li{
	list-style: none;
	padding-left: 42px;
}

.article li a{
	padding: 5px 0px;
	display: block;
	border-top: solid 1px var(--border-color);
}

.article li:first-child a{
	border-top: solid 0px var(--border-color);
}

.article ol>li>a::before{
    content : counters(section, '.')'.';
    counter-increment : section;
	margin-right: 0.5rem;
}




.article h2{
	background: #11161A;
	color: #EEE;
	position: relative;
	margin-top: 32px;
	padding: 12px 0px 12px 24px;
	
}
.article h3::after{
	content: "";
	display:block;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg,#847167,transparent 80%);
}
.article figure
{
	padding: 0px;
	margin: 0px;
}
.article img.wp-post-image{
	
	width: 100%;
}

.article figure.wp-block-image img
{
	margin: 0px;
	width: 100%;
	min-width: 300px;
	height: auto;
}
.article .box{
	margin-top: 30px;
	background-color: var(--border-color);
}
.article .box > div{
	padding: 10px 10px;
}
.article .box ul,
.article .box ol{
	margin: 0px 0px 5px;
}
.article .box p{
	margin: 10px 0px 0px;
}



.table-of-contents{
	padding: 10px 2px;
	background-color: #fdfdfd;
	border: solid 1px #111;
}

.table-of-contents a{
	text-decoration: none;
	color: inherit;
}

.table-of-contents a:hover{
	color: #6E95ED;
}

.table-of-contents:before{
	content: "Contents";
	display: block;
	font-size: 1.8rem;
	line-height: 2em;
	padding:12px 24px;
}

.tags{
	margin: 8px 0px;
}

.tags .tag{
	border-radius: 2px;
	border: 1px solid #aaa;
	margin: 4px;
	padding: 0px 8px;
	color: #444499;
	background-color: #ccc;
	text-decoration: none;
	display: inline-block
}
.tags .tag:first-of-type{
	margin-left: 0px;
}
.tags .tag::before{
	content: '#';
	display: inline;
}

blockquote {
    position: relative;
    padding: 10px 55px 10px 55px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
	border-left: solid 4px #777;
	margin: 0px 0px;
	& p {
		margin-top: 0.5em;
		margin-bottom: 0.5em;
	}
}
blockquote > cite{
	display: block;
	text-align: right;
	color: aqua;
}
blockquote > cite >a{
	color: #0067bf;
}
blockquote::before{
    display: inline-block;
    position: absolute;
    top: 12px;
    left: 15px;
	width: 1em;
    height:1em;
    content: "";
	background-image: url("img/brockquote.svg");
    color: #cfcfcf;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}
blockquote::after{
    display: inline-block;
    position: absolute;
    bottom: 12px;
    right: 15px;
	width: 1em;
    height:1em;
    content: "";
	background-image: url("img/brockquote.svg");
    color: #cfcfcf;
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
}
.goods-link:link,
.goods-link{
	display: flex;
	font-size: 1.7rem;
	border: solid 2px var(--border-color);
	padding: 10px;
	margin: 4px 0px;
}

.goods-link img{
	width: 200px;
	margin: auto 10px;
}
.goods-link p{
	margin-left: 5px;
}

.goods-link .amazon{
	margin: 0px 5px;
	padding: 0px 20px;
	border-radius: 5px;
	width: 80px;
	display: inline-block;
	color: #ffffff;
	text-decoration:none;
	background-color: #febd69;
	text-align: center;
}

.goods-link .rakuten{
	margin: 0px 5px;
	padding: 0px 20px;
	border-radius: 5px;
	width: 80px;
	display: inline-block;
	color: #ffffff;
	text-decoration:none;
	background-color: #bf0000;
	text-align: center;
}
.goods-link .yahoo{
	margin: 0px 5px;
	padding: 0px 20px;
	border-radius: 5px;
	width: 80px;
	display: inline-block;
	color: #ffffff;
	text-decoration:none;
	background-color: #ff0033;
	text-align: center;
}

figure.wp-block-table.min-width-600{
	overflow-x: auto;
}
figure.wp-block-table.min-width-600 table,td,th {
	min-width: 600px;
	border-collapse: collapse;
	font-size: 1.6rem;
	border: 1px solid black;
}
figure.wp-block-table.min-width-600 td,th {
	padding: 10px
}

iframe.wp-embedded-content  {
    width:100%;
}

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

aside.ads{
	position: relative;
	width: 160px;
	top:540px;
}
aside.ads .ad{

	width: 100%;
	height: 600px;
	top:60px;
	position: sticky;
}









