@charset "UTF-8";

/* --------------------------------------------
MAIN
--------------------------------------------- */
#main{
	@media screen and ( width <= 768px ){
		padding-bottom : calc( 80 * var( --remBase ) );
	}
	@media print , screen and ( width > 768px ){
		padding-bottom : calc( 80 * var( --remBase ) );
	}
}

/* --------------------------------------------
VOICE TALK MESSAGE
--------------------------------------------- */
#voiceMessages{
	header{
		h2{
			font-weight : 400;
		}
		p{
			text-align : right;
		}
	}
	header + p{
		margin-top : 1lh;
	}
	> p{
		+ p{
			margin-top : 1lh;
		}
		text-indent : 1em;
	}
	@media screen and ( width <= 768px ){
		header{
			h2{
				font-size : calc( 14 * var( --remBase ) );
				line-height : 1.5;
			}
			p{
				margin-top : 1lh;
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		> p{
			font-size : calc( 12 * var( --remBase ) );
			line-height : 1.5;
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 24 * var( --remBase ) );
		header{
			h2{
				font-size : calc( 20 * var( --remBase ) );
				line-height : 1.55;
			}
			p{
				font-size : calc( 17 * var( --remBase ) );
				line-height : calc( 26 / 17 );
			}
		}
		> p{
			font-size : calc( 17 * var( --remBase ) );
			line-height : calc( 26 / 17 );
		}
	}
}

/* --------------------------------------------
POST
--------------------------------------------- */
#post{
	color : #2f2e2e;
	.postHeaderBox{
		display : grid;
	}
	.postBoxHeader{
		h1{
			font-weight : 400;
		}
	}
	@media screen and ( width <= 768px ){
		padding-block : calc( 32 * var( --remBase ) );
		.postHeaderBox{
			grid-template-rows : auto 1fr;
			grid-template-columns : auto auto auto;
			column-gap : calc( 12 * var( --contentBase ) );
			justify-content : start;
			.author{
				display : contents;
				img{
					grid-row : 1/-1;
					grid-column : 1;
					align-self : center;
					height : calc( 32 * var( --remBase ) );
				}
				span{
					grid-row : 1;
					grid-column : 2/-1;
					justify-self : start;
					font-size : calc( 12 * var( --remBase ) );
					line-height : 1.5;
				}
			}
			time{
				grid-row : 2;
				grid-column : 2;
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
			.readingTime{
				grid-row : 2;
				grid-column : 3;
				font-size : calc( 12 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		.postBoxHeader{
			h1{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 26 * var( --remBase ) );
				line-height : 1.4;
			}
			.update{
				margin-top : calc( 8 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : 1.5;
			}
		}
	}
	@media print , screen and ( width > 768px ){
		padding-top : calc( 20 * var( --remBase ) );
		padding-bottom : calc( 30 * var( --remBase ) );
		.postBox{
			padding-block : calc( 60 * var( --remBase ) );
			padding-inline : calc( 100 * var( --contentBase ) );
			outline : solid 1px #ccccccbf;
			outline-offset : -1px;
		}
		.postHeaderBox{
			display : flex;
			flex-wrap : wrap;
			column-gap : calc( 16 * 100% / 780 );
			align-items : center;
			justify-content : start;
			.author{
				display : grid;
				grid-auto-flow : column;
				column-gap : calc( 12 * var( --remBase ) );
				align-items : center;
				justify-content : start;
				img{
					height : calc( 32 * var( --remBase ) );
				}
				span{
					font-size : calc( 14 * var( --remBase ) );
					line-height : 1.5;
				}
			}
			time{
				font-size : calc( 14 * var( --remBase ) );
				line-height : 1.5;
			}
			.readingTime{
				font-size : calc( 14 * var( --remBase ) );
				line-height : 1.5;
			}
		}
		.postBoxHeader{
			h1{
				margin-top : calc( 18 * var( --remBase ) );
				font-size : calc( 40 * var( --remBase ) );
				line-height : 1.4;
			}
			.update{
				margin-top : calc( 18 * var( --remBase ) );
				font-size : calc( 14 * var( --remBase ) );
				line-height : 1.5;
			}
		}
	}
}
#postContent{
	p{
		a{
			color : #009df0;
		}
	}
	.size-full{
		img{
			width : 100%;
			height : auto;
		}
	}
	> p + p{
		margin-top : 1lh;
	}
	> figure + p{
		margin-top : calc( 6 * var( --remBase ) );
	}
	iframe{
		height : auto;
		&.aspect-ratio-350-550{
			aspect-ratio : 350/550;
		}
	}
	ol.wp-block-list > li + li{
		margin-top : 1lh;
	}
	> p + ol.wp-block-list{
		margin-top : 1lh;
	}
	ol.wp-block-list + p{
		margin-top : calc( 6 * var( --remBase ) );
	}
	ol.wp-block-list{
		padding-left : 1em;
		list-style : decimal;
		list-style-position : outside;
	}
	ul.wp-block-list{
		> li{
			position : relative;
			padding-left : 1em;
			&::before{
				position : absolute;
				top : 0;
				left : 0;
				width : 1em;
				text-align : center;
				content : "・";
			}
		}
	}
	h3{
		font-weight : 700;
	}
	video{
		width : 100%;
		max-width : 100%;
		height : auto;
		margin-inline : auto;
	}
	.tableWrapper{
		padding-block : 1lh;
	}
	.table-capacity01{
		th , td{
			font-weight : 400;
			vertical-align : top;
		}
		thead{
			th{
				text-align : center;
			}
		}
		tbody{
			th{
				text-align : left;
			}
			td{
				text-align : right;
			}
		}
	}
	.wp-block-table{
		padding-block : 1lh;
		.has-fixed-layout{
			width : 100%;
			table-layout : fixed;
			th , td{
				padding-block : .5em;
				padding-inline : .5em;
				border : solid 1px #ccc;
			}
		}
	}
	.mt0{
		margin-top : 0 ! important;
	}
	@media screen and ( width <= 768px ){
		margin-top : calc( 8 * var( --remBase ) );
		p , .wp-block-list , .tableWrapper , .wp-block-table{
			font-size : calc( 16 * var( --remBase ) );
			line-height : 1.5;
		}
		> p + figure{
			margin-top : calc( 24 * var( --remBase ) );
		}
		> iframe{
			margin-top : calc( 24 * var( --remBase ) );
		}
		iframe{
			width : 100%;
		}
		.mt1lh{
			margin-top : calc( 24 * var( --remBase ) );
		}
		.mt2lh{
			margin-top : calc( 48 * var( --remBase ) );
		}
		h3{
			padding-block : calc( 8 * var( --remBase ) );
			font-size : calc( 20 * var( --remBase ) );
			line-height : 1.3;
		}
		.tableWrapper{
			overflow-x : auto;
		}
		.table-capacity01{
			th , td{
				padding-left : .5em;
				white-space : nowrap;
			}
		}
		.wp-block-table{
			overflow-x : auto;
			.has-fixed-layout{
				width : 100%;
				th , td{
					white-space : nowrap;
				}
			}
		}
	}
	@media print , screen and ( width > 768px ){
		margin-top : calc( 18 * var( --remBase ) );
		p , .wp-block-list , .tableWrapper , .wp-block-table{
			font-size : calc( 18 * var( --remBase ) );
			line-height : 1.5;
		}
		> p + figure{
			margin-top : calc( 27 * var( --remBase ) );
		}
		> iframe{
			margin-top : calc( 27 * var( --remBase ) );
		}
		.aspect-ratio-350-550{
			width : calc( 350 * var( --contentBase ) );
			margin-inline : auto;
		}
		.mt1lh{
			margin-top : calc( 27 * var( --remBase ) );
		}
		.mt2lh{
			margin-top : calc( 54 * var( --remBase ) );
		}
		h3{
			padding-block : calc( 9 * var( --remBase ) );
			font-size : calc( 22 * var( --remBase ) );
			line-height : 1.3;
		}
		.table-capacity01{
			width : 100%;
		}
	}
}