@charset "UTF-8"; /* 文字エンコードの設定（削除不可） */

/* ********************************************** */

:root {
	--al-color-red:#c33;
	--al-color-blue:#4682b4;
	/* --al-color-green: */
	--al-color-textblack:#333;
	--al-color-middleblack:#555;
}


/* ***** common ***** */
 /* { border:1px dashed red;} */

/* body */
body {
	font-family:  "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	font-size:11pt;
	color:#333;
	margin:0;
	padding:0;
	background-color:#efefef;

	@media screen and (max-width: 576px) {
		font-size:10pt;
	}
}

img	{
	max-width:100%;
	height:auto;
}

a {
	color:var(--al-color-red);
	text-decoration: none;
	border-bottom:1px dotted var(--al-color-red);

	&:not(:has(img)):hover {
		opacity:0.5;
		transition: 0.5s ease all;
	}

	img { border: none; }

	&:has(img) { border-bottom:none; }
}

p { line-height:1.75;
	@media screen and (max-width:576px) {
		line-height:1.65;
	}

	&:has(input),
	&:has(label),
	&:has(select),
	&:has(textarea)
	{
		margin-bottom:0;
	}

}
li { line-height:1.65; }

code {
	display: inline-block;
	color:black;
	background-color:#f0f0f0;
	border:1px silver solid;
	padding:0 0.5em;
}

input[type="text"],
input[type="email"]
{
	width:100%;
	box-sizing: border-box;
}

::placeholder {
	color:#b0b0b0 !important;
}



/* * * * * * * * * * * * * * * * * * * */

/* ***** ヘッダーエリア ***** */
/* PC */
.overlay { display:none; }
#masthead {
	background:white;
	width:100%;
	border-bottom:silver 1px solid;

	h1 {
		margin:0;
		font-size:250%;
		font-family:'Times New Roman';
		font-weight: bold;
		line-height: normal;

		a {
			border-bottom:none;
		}
	}

	#al-navigation {
		display:flex;
		justify-content: space-between;
		align-items: baseline;
		box-sizing: border-box;
		width:100%;
		max-width:1200px;
		margin:auto;
		padding:0.9375rem 0.5em;

		.site-branding {
			flex:0 0 auto;
		}
		
		#site-navigation {
			flex:1 0 auto;

			nav {
				h2, #menutoggle { display:none; }

				ul#MENULIST {
					display:flex;
					flex-flow:row wrap;
					justify-content: flex-end;
					margin:0;
					padding:0;

					li {
						list-style-type:none;
						margin:0 1em 0 0;

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

					a {
						font-family:'Times New Roman';
						font-weight:bold;
						text-decoration:none;
						font-size:120%;
						border-bottom:none;

						&:link, &:active, &:visited {
							color:#3f312b;
						}
						
						&:hover {
							color:var(--al-color-red);
							background:transparent;
							transition: 0.5s ease all;
						}
					}
				}

			}
		}
	}
}
.home #masthead {
	border-bottom:0;
}

/* ipad 縦 */
@media screen and (max-width:992px) {
.overlay {
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	max-width: 100vw;
	height: 100%;
	background: rgba(0,0,0,0);
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 3;

	&::after {
		visibility: hidden;
		position: fixed;
		top: 40%;
		left: 0;
		display: block;
		width: 100%;
		height: 50px;
		color: rgba(255,255,255,0);
		font-size: 40px;
		font-weight: bold;
		text-align: center;
		transition: all .5s ease;
	}
}

.open .overlay {
	visibility: visible;
	cursor: pointer;
	background: rgba(0,0,0,.7);

	&::after {
		visibility: visible;
		color: rgba(255,255,255,.8);
	}
}

#masthead {
	#al-navigation {
		padding:0.3em;


		#site-navigation {
			align-self: center;

			nav{

				h2, #menutoggle {
					display:block;
					z-index:100;
					box-sizing: border-box;
					color:#222222;
					font-weight:bold;
					text-align: center;
					width:40px;
					height:40px;
					line-height: 40px;
					font-size:120%;
					border:1px solid #222222;
					border-radius:5px;
					margin:0px;
					padding:0px;
					position:absolute;
					right:1em;
					transform: translateY(-1em);
				}
				#menutoggle:before,
				#menutoggle:after { margin:0; }

				ul#MENULIST {
					box-sizing: border-box;
					z-index:5;
					flex-flow: column nowrap;
					justify-content: space-around;
					width:35vw;
					height:100vh;
					padding:12vh 0 10vh 5vh;
					position:fixed;
					right:0;
					top:0;
					background-color:white;
					border-left:1px solid silver;
					transform: translateX(35vw);

					li {
						flex:1 1 auto;
						margin:0;
						text-align:left;
					}

					a { 
						display:block;
						width:100%;
						height:100%;
					}
				}
			}
		}
	}
}

.open ul#MENULIST {
	transform: translateX(0) !important;
	transition: all .5s ease !important;
}

}

@media screen and (max-width:576px) {
#masthead {
	#al-navigation {
		#site-navigation {
			nav {
				ul#MENULIST {
					width:50vw;
					padding:20vh 0 0 5vh;
					transform: translateX(50vw);

					a {
						font-size:100%;
					}
				}
			}
		}
	}
}
}
#headerpic { width:100%; }


/* parts: breadcrumbs */
.breadcrumbs {
	padding-left:0;
	padding:0 1em;
	max-width: 1200px;
	margin:0.5em auto 1em;
	font-size:0.75rem;

	li {
		display: inline-block;
		list-style-type:none;
		+ li:before {
			content: ' / ';
			color:gray;
		}
	}

	a,
	a:link, a:active, a:visited, a:focus {
		color:var(--al-color-red);
	}
}


/* ***** コンテンツエリア ***** */
/* mainとsidebarが入る場所 */
#content-body { 
	box-sizing: border-box;
	width:100%;
	max-width: 1200px;
	min-height:65vh;
	margin:auto;
	border-radius: 10px;
	background-color:white;
	
	@media screen and (max-width: 992px) {
		border-radius:0;
	}

	&.with-sidebar {
		display:grid;
		gap: 1em;
		grid-template-columns: 3fr 1fr;
		@media screen and (max-width: 1200px) {
			padding:0 0.75em;
		}
		@media screen and (max-width: 992px) {
			display:block;
		}
		
		@media screen and (max-width: 576px) {
			display:block;
			margin:0;
			padding:0;
		}
	}
}

#primary {
	box-sizing: border-box;
	padding:1.5em 1.5em 3rem;
	width:100%;
	max-width:100vw;

	@media screen and (max-width: 576px) {
		padding:1.5em 1em;
	}

	h2.entry-title {
		font-size:1.75rem;
	}

	h3 {
		font-size:1.3rem;
		font-weight:bold;
		margin-top:1.5em;
		margin-bottom:0.75em;
		padding:0.5rem 0 0.5rem 0.75rem;
		background:#eeeaec;
		border-left:10px solid var(--al-color-red);

		@media screen and (max-width: 576px) {
			border-left:5px solid var(--al-color-red);
			font-size:1.15rem;
			padding:0.35rem 0 0.35rem 0.5rem;
			margin-top:1em;
		}
	}

	h4 {
		font-size:1.2rem;
		font-weight:bold;
		border-bottom: solid 3px silver;
		position: relative;
		margin-top:1.5em;
		/* margin-bottom:1em; */

		@media screen and (max-width: 576px) {
			font-size:1.1rem;
		}
	}
	h4:after {
		position: absolute;
		content: " ";
		display: block;
		border-bottom: solid 3px var(--al-color-red);
		bottom: -3px;
		width:30%;
	}

	h3 + h4 {
		margin-top:1em;
	}

	h5 {
		font-size:inherit;
		font-weight:bold;

		&:not(.card-title) {
			border-bottom:2px dotted rgb(204, 51, 51, 0.5);
			margin-top:1.5em;
			max-width:75%;

			&:before {
				border-left:10px solid var(--al-color-red);
				content:'';
				margin-right:0.5em;
			}
		}
		&:is(.card-title) {
			font-size:1.2rem;
			&:has(a) {
				font-size:1rem;
				margin-bottom:0;

				@media screen and (max-width:576px) {
					font-size:0.8rem;
				}
			}
			a {	border-bottom:0;}
		}

	}
	h6:is(.card-subtitle) {
		font-size:0.8em;
	}
}

.home #primary {
	border-radius: 0;
}

.post-thumbnail {
	border-bottom:1px solid #d0d0d0;
}


/* ***** 記事のリスト content ***** */
.contentlist-3column {
	display: grid;
	gap:1em;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom:1.5rem;

	.card-title {
		overflow: hidden;
		text-overflow: ellipsis;
		text-wrap: nowrap;
	}

	/* スマホは２カラムにする */
	@media screen and (max-width:576px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap:0.5em;

		.card-body {
			padding:0.75rem 0.25rem;
		}
	}

}

.contentlist-2column {
	display: grid;
	gap:1.5em;
	grid-template-columns: repeat(2, minmax(0, 1fr));

	.card-title {
		overflow: hidden;
		text-overflow: ellipsis;
		text-wrap: nowrap;
	}

	/* スマホは１カラムにする */
	@media screen and (max-width:576px) {
		display:block;

		article {
			margin-bottom:1em;
		}
		.card-title {
			overflow: unset;
			text-overflow: unset;
			text-wrap: unset;
		}
		.card-body {
			padding:0.75rem 0.25rem;
		}
	}

}

/* ***** next,previous ***** */
.prev-post-link { text-align:left; }
.prev-post-link a:before { content:'\f104'; font-family: 'Font Awesome 5 Free'; font-weight: bold; margin-right: 1em;}
.next-post-link { text-align:right; }
.next-post-link a:after{ content:'\f054'; font-family: 'Font Awesome 5 Free'; font-weight: bold; margin-left: 1em;}

div:has(> .next-post-link, > .prev-post-link) {
	margin-top:1.5em;
	@media screen and (min-width:576px) {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap:1.5em;
	}
}


/* ***** ウィジェットエリア ***** */
#secondary {
	box-sizing: border-box;
	padding:1.5em;

	@media screen and (max-width: 992px) {
		margin-top:1em;
	}
	@media screen and (max-width: 576px) {
		padding:1.5em 1em;
	}

	.widget-title {
		font-size:1rem;
		font-weight:bold;
	}
	.widget {
		font-size:85%;
	}

}

.widget-area a, .widget-area a:link, .widget-area a:active, .widget-area a:visited, .widget-area a:focus {
	color:var(--al-color-red);
}

/* ***** フッターエリア ***** */


#colophon {
	padding:3rem 0 1rem;
	font-size:85%;
	background-color:#302833;
	color:white;
	margin-top:3em;

	a, a:link, a:visited, a:active, a:focus {
		color:#F0908D;
		border:0;
	}
	a:hover {
		color:white;
		transition: 0.5s ease;
	}

	.widget-title {
		font-size:1.8rem;
	}
	#footer-link {
		width:fit-content;
		display: flex;
		text-align: center;
		list-style-type:none;
		margin:auto;
		padding:0;

		li {
			display: inline-block;
			padding:0;
			margin:0;

			& + li:before {
				content: '|';
				margin:0 5px;
			}
		}
	}
}
.home #colophon { margin-top:0; }


/* wordpress */
.grecaptcha-badge { bottom: 120px !important; }