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

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

/* 全体 */
@media screen,print {
/* 全称 */
 /* { 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:#F3F3F2;
}

/* 画像 */
img	{ max-width:100%; height:auto; }
a img	{ border: none; }
}

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

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

/* ***** ヘッダーエリア ***** */
@media screen,print {
	#masthead { background:#302833; width:100%; }
	#al-navigation {
		display:flex;
		padding:0.9375rem;
		margin:auto;
		justify-content: space-between;
		align-items: baseline;
		max-width:75rem;	/* Foundation6のgrid-containerのサイズ */
	}
	.site-branding { flex:0 0 auto; }
	#masthead h1 {
		margin:0;
		font-size:250%;
		font-family:'Times New Roman';
		/* text-shadow:2px 2px 3px rgba(255,255,255,0.45); */
		font-weight: bold;
		line-height: normal;
	}
	#masthead h1 a { text-decoration:none; }
	#masthead h1:first-letter {
		font-size:150%;
		color:#c33;
	}
	#masthead h1 a:link,
	#masthead h1 a:visited,
	#masthead h1 a:active,
	#masthead h1 a:hover,
	#masthead h1 a:focus {
		color:white;
	}

	#site-navigation { flex:1 0 auto;}
	nav h2, #menutoggle  { display:none; }

	#MENULIST {
		display:flex;
		flex-flow:row wrap;
		justify-content: flex-end;
		margin:0;
		padding:0;
	 }
	#MENULIST li {
		list-style-type:none;
		margin:0 1em 0 0;
	}
		#MENULIST li:last-child {
			margin:0;
		}
	nav ul a {
		font-family:'Times New Roman';
		font-weight:bold;
		text-decoration:none;
		font-size:120%;
 	}
	nav ul a:link, nav ul a:hover, nav ul a:active, nav ul a:visited {
		color:whitesmoke;
	}
	nav ul a:hover { color:#F0908D; }
	#headerpic { width:100%; }
	.overlay { display:none;}
}


@media screen and (max-width:1023px) {
	#masthead {}
	#al-navigation {
		padding:0.3em;
	}
	#site-navigation {
		box-sizing: border-box;
		align-self: center;
	}

	nav h2, #menutoggle {
		display:block;
		z-index:100;
		box-sizing: border-box;
		color:white;
		font-weight:bold;
		text-align: center;
		width:40px;
		height:40px;
		line-height: 40px;
		font-size:120%;
		border:1px solid white;
		border-radius:5px;
		margin:0px;
		padding:0px;
		position:absolute;
		right:1em;
		transform: translateY(-1em);
	}
	#menutoggle:before, #menutoggle:after { margin:0; }
	#MENULIST {
		box-sizing: border-box;
		z-index:5;
		flex-flow: column nowrap;
		justify-content: space-around;
		width:35vw;
		height:100vh;
		padding:15vh 0 10vh 5vh;
		position:fixed;
		right:0;
		top:0;
		background-color:rgba(0,0,0,0.9);
		transform: translateX(35vw);
	}
	.open #MENULIST { transform: translateX(0); transition: all .5s ease; }
		#MENULIST li {
			flex:1 1 auto;
			margin:0;
			text-align:left;
		}
		nav ul a { font-size:100%; }

	.overlay {
		content: '';
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0);
		-webkit-transition: all .5s ease;
		transition: all .5s ease;
		z-index: 3;
	}
	.overlay::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);
	}
	.open .overlay::after {
		visibility: visible;
		color: rgba(255,255,255,.8);
	}

}
@media screen and (max-width:480px) {
	#MENULIST {
		width:50vw;
		transform: translateX(50vw);
	}
}

/* breadcrumbs */
.breadcrumbs a, .breadcrumbs a:link, .breadcrumbs a:active, .breadcrumbs a:visited, .breadcrumbs a:focus {
	color:#c33;
}

/* content */
@media screen,print {
	.home #content { padding-top:2rem; padding-bottom:2rem; }
	#content { background-color:white; padding-bottom:3rem; }
	.site-main a, .site-main a:link, .site-main a:active, .site-main a:visited, .site-main a:focus {
		color:#c33;
	}
	.site-main a:hover { color:#F3BF88; }


	.frontpage-header {
		font-size:1.2rem;
		font-weight:bold;
		background:linear-gradient(transparent 60%, #f9aea5 60%);
		display: inline-block;
		padding:0 7px 0 3px;
	}

	#frontpage-shortcut {
		display: grid;
		grid-template-columns:repeat(4, 1fr);
		gap:10px;
		margin-bottom:2em;
	}
	[id^="fr-nav"] {
		padding: 0.5em 0;
		text-align: center;
	}


	#memolist, #oshiraselist {
		box-sizing: border-box;
		padding:0;
	}
	#memolist .entry-title,
	#oshiraselist .entry-title {
		font-size:1rem;
	}
	#memolist .entry-title a,
	#oshiraselist .entry-title a {
		color:#222222 !important;
	}

	#memolist .card,
	#oshiraselist .card {
		border:0;
		display: block;
	}

	#memolist {
		display: grid;

		grid-template-columns: repeat(2, 1fr);
		gap:15px;
	}
	#memolist .attachment-post-thumbnail {
		margin:0 0 0.75em 0;
	}

	#oshiraselist .oshirase {
		padding:7px 0;
		border-top:1px solid silver;
	}
	#oshiraselist .oshirase:last-child {
		border-bottom:1px solid silver;
	}
		.frontpage-postdate {
			font-size:0.65rem;
		}

	#frontpage-content {
		max-width:840px;
		margin:auto;
		display:flex;
		margin-top:1em;
	}
		#frontpage-content #myicon {
			flex:0 0 auto;
			width:250px;
			padding:25px;
		}

	#primary {
		min-height:40vh;
	}

	main h2 a:link, main h2 a:visited, main h2 a:active, main h2 a:hover, main h2 a:focus {
		color:#333;
		text-decoration:none;
	}
	main h2 a:hover {
		color:#c33;
	}

	.entry-title {
		font-size:1.75rem;
		font-weight:bold;
		margin-bottom:0;
	}
		#memoblog .entry-title {
			font-size:1.2rem;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow-x: hidden;
		}


	.entry-title a, .entry-title a:link, .entry-title a:active,
	.entry-title a:visited, .entry-title a:focus {
		color:#333;
	}
	.entry-title a:hover {
		color:#c33;
	}

	.attachment-post-thumbnail {
		margin:0 0 1em 0;
	}

	.post {
		margin-bottom:2rem;
	}

	.content-area h3 { margin:0.8em 0; font-size:1.5rem; font-weight:bold; background:#E7E7EB; padding:0.2em 0 0.2em 0.5em; border-radius:10px; }
	.content-area h4 { border-bottom:3px solid #A73836; font-size:1.3rem; font-weight:bold; margin: 1em 0 0.5em 0; }
	.content-area h5 { border-bottom:1px dashed #A73836; font-size:1.1rem; font-weight:bold;}

	.home .content-area h3 { margin:0; font-size:1.9375rem; font-weight:inherit; background:inherit; padding:inherit; border-radius:0; }

	/* ***** graffiti, portfolio用 ***** */
	/* *****
	.post-type-archive .graffiti, .post-type-archive .portfolio {
		border:1px solid #302833;
		border-radius: 5px 5px 0 0;
		margin-bottom:1.5rem;
	}
	*/
	.post-type-archive .graffiti h2, .post-type-archive .portfolio h2,
	.tax-graffititag .graffiti h2 , .tax-portfoliotag .portfolio h2 {
		border-top:0;
		overflow:hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		margin-bottom:0;
	}

	.post-type-archive .graffiti h2 a, .post-type-archive .portfolio h2 a,
	.tax-graffititag .graffiti h2 a , .tax-portfoliotag .portfolio h2 a {
		overflow-x: hidden;
	}

	.post-type-archive-graffiti .entry-title, .post-type-archive-portfolio .entry-title,
	.tax-graffititag .entry-title , .tax-portfoliotag .portfolio .entry-title {
	font-size:1rem;
	font-weight:bold;
	}

	.post-type-archive-graffiti .post, .post-type-archive-portfolio .post,
	.tax-graffititag .post , .tax-portfoliotag .post {
		margin-bottom:0;
	}


	/* ***** template用 ***** */
	.post-type-archive-template .entry-title {
		border:0;
		padding:0.5rem 0;
		font-size:1.5rem;
	}
	.thumbnailsection {
		padding-right:1.5em;
	}


/* タグクラウドの指定 */
.tag-cloud-link{
	padding: 0.1em 0.6em;
	margin: 0 0.2em 0.75em 0;
	display: inline-block;
	font-size: 12px !important;
	border-radius: 3px;
	color: inherit;
	-webkit-box-shadow: 0 0 1px;
	box-shadow: 0 0 1px;
	opacity: 0.8;
}}

 /* タグ数をタグクラウドに合わせる */
.tag-link-count{
	color: inherit!important;
	font-size:inherit!important;
}

/* マウスホバー時の挙動 */
.tag-cloud-link:hover{
	transition : all 0.5s ease 0s;
	background-color:rgba(241, 203, 152, 0.5);
}
.tag-cloud-link::before{
	font-family: 'Font Awesome 5 Free';
	content:"\f02b";
	font-weight:900;
	padding-right:4px;
}


@media screen and (max-width:1024px) {
	#frontpage-content #myicon{
		width:225px;
		padding:25px 25px 25px 0;
	}
}

@media screen and (max-width:640px) {
	#frontpage-shortcut {
		gap:7px;
	}
	[id^="fr-nav"] {
		font-size:10px;
	}
	

	#frontpage-content {
		flex-direction:column;
	}

		#frontpage-content #myicon {
			width:100%;
			padding:15px 0;
			text-align: center;
		}
	#memolist {
		display: block;
	}


.post-type-archive-template .entry-title {
	font-size:1.3rem;
}
.thumbnailsection {
	padding:0;
}

.entry-title {
	font-size:1.5rem;
}
}

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



/* ***** ウィジェットエリア ***** */
#secondary .widget-title {
	font-size:1rem;
	font-weight:bold;
}
#secondary .widget {
	font-size:85%;
}
.widget-area a, .widget-area a:link, .widget-area a:active, .widget-area a:visited, .widget-area a:focus {
	color:#c33;
}

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

#footer-link {
	width:fit-content;
	display: flex;
	text-align: center;
	list-style-type:none;
	margin:auto;
}
	#footer-link li {
		display: inline-block;
		padding:0;
		margin:0;
	}
		#footer-link li + li:before {
			content: '|';
			margin:0 5px;
		}


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

#colophon a, #colophon a:link, #colophon a:visited, #colophon a:active, #colophon a:focus {
	color:#F0908D;
}
#colophon a:hover {
	color:white;
}

#colophon .widget-title {
	font-size:1.8rem;
}

}