/*Common*/
:root{
	color-scheme: light dark;
	
	--color-primary : #0D6D73;
	--color-background: light-dark(#f8f9fa,#1d1d1e);
	--color-font: light-dark(#111,#eee);
	--color-font-link: light-dark(#00f,#36e);
	--color-gray: light-dark(#8d8e95,#5d6065);
	--color-gray-light: light-dark(#eaeaea,#7c7c7e);
	--color-gray-dark: light-dark(#8a8a8a,#3e3e3e);

	--contents-max-width : 1280px;
	--header-height: 2.4rem;

	--font-size-s: 0.9rem;
	--font-size-m: 1rem;
	--font-size-l: 1.5rem;
	--font-size-xl: 1.8rem;
}


body{
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-font);
	font-family: 'Lato','Noto Sans JP','arial';
  	interpolate-size: allow-keywords;
}
h1,h2,h3,h4,h5,h6,p,a,span{
	margin: 0px;
}
.container{
	max-width: 1280px;
	margin: 0 auto;
}
/* header */
.header{
	background-color: var(--color-background);
	border-bottom: 2px solid var(--color-primary);
	height: var(--header-height);
	display: block;
	padding: 1.2rem 1.4rem;
	backdrop-filter: blur(10px);

	.container{
		height: var(--header-height);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.logo {
			color: #FFFFFF; 
			line-height: 1px;
			a{
				height: 100%;
				display: block;
				img{
					width: auto;
					height: 100%;
					object-fit: cover;
				}
			}
		}
		#theme-selector{
			display: flex;
			align-items: stretch;
			div{
				display: flex;
				align-items: center;
				cursor: pointer;
				font-size: var(--font-size-m);
				text-align: center;
				justify-content: center;
				
				color: #fff;
				background-color: var(--color-gray);
				input[type=radio]{
					display: none;
				}
				&:has(input:checked){
					background-color: var(--color-primary);
				}
				label{
					display: flex;
					height: 100%;
					padding: calc(var(--font-size-m)* 0) var(--font-size-m);
					cursor: pointer;
					user-select: none;
					justify-content: stretch;
					align-items: center;
					span{
						transition-duration: 0.2s;
						width: 0;
						overflow: hidden;
					}
					&:hover{
						span{
							width: auto;
						}
					}
				}
				&:first-of-type{
					border-radius: calc(var(--font-size-m) * 0.67) 0 0 calc(var(--font-size-m) * 0.67);
				}
				&:last-of-type{
					border-radius: 0 calc(var(--font-size-m) * 0.67)  calc(var(--font-size-m) * 0.67) 0;
				}
			}
			
		}
	}
}

.contents {
	display: flex;
	flex-wrap: nowrap;
	max-width: var(--contents-max-width);
	padding: 1rem 1.4rem;
	margin: 0 auto;
	gap: 8px;
	.main{
		grid-template-columns: repeat(2,minmax(0,1fr));
		gap: 8px;
		flex-wrap: wrap;
		flex-direction: row;
		&.front{
			display: grid;
            .article{ 
                width: 100%;
                border-radius: 12px;
                position: relative;
                &:before{
                transition-duration: 0.175s;
                transition-timing-function: ease-in;
                    position: absolute;
                    display: block;
                    content: "";
                    top:10px;
                    bottom: 10px;
                    left: 10px;
                    right: 10px;
                    background-color: #a3a4aa22;
                    border-radius: 12px;
                    opacity: 0;
                }
                &:hover{
                    cursor: pointer;
                    &:before{
                        top:0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        opacity: 1;
                    }
                }
                a{
                    display: flex;
                    position: relative;
                    gap: 0.1rem;
                    margin:0px;
                    padding:1rem;
                    color: var(--color-font);
                    text-decoration: none;
                    flex-direction: column;
                    font-size: var(--font-size-m);
                    .thumbnail{
                        display: block;
                        overflow: hidden;
                        width: 100%;
                        img{
                            position: relative;
                            object-fit: cover;
                            transition-duration: 0.35s;
                            width: 100%;
                            /*transform: translate(-50%, -50%);
                            top: 50%;
                            left: 50%;*/
                        }
                    }
                    .title{
                        font-weight: 700;
                        word-break: break-all;
                    }
                    .category{
						margin-bottom: calc(var(--font-size-s) * 0.5);
                        display: block;
                        font-size: var(--font-size-s);
                        color: var(--color-font);
                        background-color: var(--color-background);
                        border-radius: var(--font-size-s);
                        line-height: calc(var(--font-size-s) * 2);
                        padding: 0 calc(var(--font-size-s));
                        width: fit-content;
                    }
                    
                    .date{
                        display: block;
                        font-size: var(--font-size-s);
                        text-align: right;
                        margin-bottom: 0px;
                        bottom: 0px;
                        color:#999;
                        margin-top: calc(var(--font-size-s) * 0.5);
                    }
                }
            }
			.page-numbers{
				grid-column: 2 span;
				display: flex;
				gap: calc(var(--font-size-m) * 0.5);
				justify-content: center;
				font-size: var(--font-size-m);
				li{
					padding: calc(var(--font-size-m) * 0.5) calc(var(--font-size-m) * 0.75);
					list-style: none;
					
					background: var(--color-primary);
					a{
						text-decoration: none;
						color: #fff
					}
					span{

					}
					&:has(span){
						background: var(--color-gray);
					}
				}
			}
		}
		&.single{
			display: block;
			flex: 1;
			min-width: 0;
			.article{
				width: 100%;
				font-size: var(--font-size-m);
				.sponsored{
					font-style: italic;
					color: var(--color-gray);
				}
				.ads{
					margin: 1rem 0;
				}
				.title{
					font-size: var(--font-size-xl);
					line-height: calc(var(--font-size-xl) * 1.75);
					font-weight: 500;
					text-align: left;
				}
				.date{
					display: block;
					font-size: var(--font-size-s);
					line-height: calc(var(--font-size-s) * 2);
					text-align: right;
					margin-bottom: 0;
					color:var(--color-font);
				}
				img{
					width: 100%;
				}
				.overview{
					font-size: var(--fontsize-m);
					font-weight: 400;
					word-break: break-all;
					text-align: left;
					line-height: 1.75;
					.table-of-contents{
						padding: 10px 2px;
						background-color: #fdfdfd;
						border: solid 1px #111;
						a{
							text-decoration: none;
							color: inherit;
						}
						a:hover{
							color: #6E95ED;
						}
						:before{
							content: "Contents";
							display: block;
							font-size: 1.8rem;
							line-height: 2em;
							padding:12px 24px;
						}
					}
					h2{
						border-bottom: 4px solid var(--color-primary);
						border-left: 8px solid var(--color-primary);
						margin-top: 1rem;
						margin-bottom: 0.5rem;
						padding: 0.25rem;
						font-size: var(--font-size-l);
					}
					h3{
						border-bottom: 2px solid var(--color-primary);
						margin-top: 0.75rem;
						margin-bottom: 0.5rem;
						font-size: calc(var(--font-size-l) * 0.75);
					}
					
					blockquote {
						padding: calc(var(--font-size-m) * 1) calc(var(--font-size-m) * 1);
						box-sizing: border-box;
						font-style: italic;
						background: var(--color-gray-light);
						color: var(--color-font);
						border-left: solid 6px var(--color-gray-dark);
						margin: 0;
						& p {
							margin-top: 0.5em;
							margin-bottom: 0.5em;
						}
						cite{
							display: block;
							text-align: right;
							a{
								color: #0067bf;
							}
						}
					}
					figure{
						padding: 0;
						margin: var(--font-size-m) 0;
						table{
							font-size:var(--font-size-m);
							width: 100%;
							table-layout: auto;
						}
						&.wp-block-table.min-width-600{
							overflow-x: auto;
						}
						&.wp-block-table.min-width-600 table,thead, td,th {
							border-collapse: collapse;
							border: 0px solid black;
						}
						thead{
							border-bottom: 2px solid #fff;
						}
						th{
							background-color: var(--color-primary);
							color: #fff;
						}
						tr{
							background-color: var(--color-gray-dark);
						}
						tr:nth-of-type(even){
							background-color: var(--color-gray-light);
						}
						
						td,th {
							padding-right: 0;
							padding-left: calc(var(--font-size-m) * 0.5);
							padding-top: calc(var(--font-size-m)*0.5);
							padding-bottom: calc(var(--font-size-m)*0.5);
						}
						iframe.wp-embedded-content {
							width:100%;
						}
					}

					.goods-link{
						margin: var(--font-size-m) 0;
						display: flex;
						font-size: var(--font-size-m);
						border: solid 2px var(--color-gray);
						padding: 10px;
						gap: 10px;
						align-items: center;
						img{
							flex: 1;
							object-fit: contain;
							height: 100px;
						}
						div{
							flex: 3;
						}
						p{
							margin: calc(var(--font-size-m) * 0.5);
							margin-top: 0;
							text-indent: 0;
							font-weight: bold;
						}
						
						a{
							margin: calc(var(--font-size-m) * 0.5);
							margin-bottom: 0;
							padding:  calc(var(--font-size-m) * 0.2) calc(var(--font-size-m) * 0.75) ;
							border-radius: 5px;
							width: 80px;
							display: inline-block;
							text-align: center;
						}
						.amazon{
							color: #ffffff;
							text-decoration:none;
							background-color: #eeb960;
						}

						.rakuten{
							color: #ffffff;
							text-decoration:none;
							background-color: #bf0000;
						}
						.yahoo{
							color: #ffffff;
							text-decoration:none;
							background-color: #ff0033;
						}
					}

				}
				
				.tags{
					display: flex;
					gap: var(--font-size-m);
					margin: 8px 0px;
					align-items: center;
					.tag{
						line-height: calc(var(--font-size-m) * 2);
						border-radius: var(--font-size-m);
						border: 1px solid var(--color-gray);
						padding: 0px var(--font-size-m);
						color: var(--color-font-link);
						background-color: var(--color-background);
						text-decoration: none;
					}
					.tag::before{
						content: '#';
						display: inline;
					}
				}
			}
		}
	}
	.sidebar{
		width: 300px;
		min-width: 300px;
		max-width: 300px;
		.popular{
			h3{
				background-color: var(--color-primary);
				line-height: calc( var(--font-size-m) * 2);
				padding: calc( var(--font-size-m) * 0.25) 0;
				font-size: calc( var(--font-size-m) * 0.5) 0;
				color: #fff;
			}
		}
		.toc{
			position: sticky;
			top: 450px;
			span{
				display: block;
				background-color: var(--color-primary);
				color: #fff;
				padding: calc(var(--font-size-m) * 0.5) calc(var(--font-size-m) * 0.25);
				font-weight: bold;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			li{
				font-size: var(--font-size-m);
				list-style: none;
				
				&.toc-h3{
					text-indent: var(--font-size-m);
					a{
						
						padding: calc( var(--font-size-m) * 0.25);
					}
				}
				a{
					padding: calc( var(--font-size-m) * 0.25);
					display: block;
					text-decoration: none;
					color: var(--color-font);
					&:hover{
						color: var(--color-font-link);
						background-color: var(--color-gray-light);
					}
				}
			}
		}
	}

}

.footer{
	border-top: solid 1px var(--color-gray);
	font-size: var(--font-size-s);
	padding: 2rem 1.6rem 3rem;
	flex-direction: row;
	align-items: center;
	.container{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		img{
			width: auto;
			height: var(--header-height);
			object-fit: cover;
		}
		p{
			flex-grow: 1;
			font-size: var(--font-size-s);
			text-align: right;
		}
	}
}
.footer form{
	display: inline-flex;
	margin: 0 auto;
	width: auto;
	color: #FFFFFF;
	font-size: 5rem; 
	font-weight: 900;
	letter-spacing: 5px;
}
/*Common*/

/*Navi*/
.navi{
	padding: 0 1.6rem;
	display: flex;
	flex-wrap: wrap;
	
	align-items: flex-end;
	a{
		font-size: var(--font-size-m);
		display: block;
		color: #555555;
		text-decoration: none;
		transition-duration: 0.3;
	}
}
.menu{
	flex: 1;
	justify-content: flex-start;
	align-content: center;
	gap: var(--font-size-s);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--font-size-s);
	a:hover{
		color:#999999; 
	}
}

.search{
	display: flex;
	align-items: center;
}
.searchbox{
	color: #111;
	padding: 0px;
	text-align: left;
	height: 23px;
	font-size: 2rem;
	background-color: transparent;
	border-width: 0px;
	border-top: solid 2px #00000000;
	border-bottom: solid 2px var(--color-gray);
}

.searchbox::placeholder{
	padding: 0px;
	color: #999;
}

.searchbox:focus{
	outline: 0;
}

.searchbtn{
	font-size: 2rem;
	box-sizing: border-box;
	width: 27px;
	height: 27px;
	background: url("img/search.svg") no-repeat;
	border: solid 0px #000000;
	border-radius: 7%;
}

.searchbtn:hover{
	box-shadow:2px 2px 5px 2px #dfdfdf;
}
.searchbtn:focus{
	outline: 0;
}

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



.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;
	li{
		list-style: none;
		padding-left: 42px;
	}
}

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

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

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


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



@media screen and (max-width:782px){
	
	:root{
		--contents-max-width : 1280px;
		--header-height: 1.8rem;

		--font-size-s: 0.75rem;
		--font-size-m: 0.9rem;
		--font-size-xl: 1.5rem;
	}
	.header{
		padding: .8rem 0.7rem;
		.container{
			#theme-selector{
				div{

					label{

						padding: 0 calc(var(--font-size-m) * 0.75);
					}
					img{
						height: calc(var(--font-size-m) * 1.55);
						margin: 2px;
					}
				}
			}
		}

	}
	.main{
		display: block !important;
	}
	.sidebar{
		display: none;
	}

	h1{
		margin: 0px 0px;
		width: 100%;
		font-size: 2.4rem;
		
	}
	.contents{
		gap: 0; 
		padding: 0.7rem;
		& .main{
			&.front{
				& .article{
					flex-basis: 100%;
					border-left: solid 0px #000000;
					border-right: solid 0px #000000;
					flex-basis: 80%;
					margin: 0px;
					a{
						padding: var(--font-size-s);
						.date{
							margin-top: calc(var(--font-size-s) * 0.5);
						}
					}
				}
			}
		}
	}
	.thumbnail{
    	width: 100%;
    	height: inherit;

	}
	
    .footer{
		margin: 0;
		padding: 1.5rem 0.8rem;
        .container{
            flex-direction: column;
			align-items: stretch;
			.navi{
				padding: var(--font-size-s) 0;
			}
			p{
				text-align: center;
			}
        }
    }
}