@charset "UTF-8";
/* ======================================
   section
====================================== */
#pageBody > #blog {
	max-width : 100%;
	margin : 0;
	padding : 60px 0 160px;
	background-color : #f0f0f0;
}

#pageBody > #blogDetail {
	max-width : 100%;
	margin : 0;
	padding : 40px 0 160px;
	background-color : #f0f0f0;
}

/* ======================================
   blog
====================================== */
#contentHeader .pageTitle {
	display : flex;
	align-items : center;
}
#contentHeader .pageTitle span {
	font-size : 1rem;
	margin-left : 1em;
	padding-left : 1em;
	border-left : 2px solid #ffffff;
}
#blog > h3 {
	font-family : "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho",
	"MS PMincho", serif;
	font-size : 1.875rem;
	margin-bottom : 70px;
	text-align : center;
	letter-spacing : 0.1em;
	color : #333333;
}

#blog > h3 span {
	display : block;
	font-family : Futura, "Century Gothic", "Questrial", sans-serif;
	font-size : 1rem;
	font-weight : 300;
	margin-top : 15px;
	color : #d81417;
}

#blog > ul {
	max-width : 1200px;
	margin : 0 auto;
}

#blog > ul > li {
	display : flex;
	align-items : flex-start;
	margin : 0 auto;
	padding : 30px 0;
	border-bottom : #cccccc solid 1px;
}

#blog > ul > li:first-of-type {
	border-top : #cccccc solid 1px;
}

#blog > ul > li span {
	display : inline-block;
	font-family : Futura, "Century Gothic", "Questrial", sans-serif;
	font-size : 1.125rem;
	line-height : 1.75;
	margin : 0 6vw 0 3.6vw;
	letter-spacing : 0.1em;
}

#blog > ul > li a {
	font-size : 1.125rem;
	line-height : 1.75;
	flex-basis : 70%;
	flex-grow : 1;
	text-decoration : none;
}

#blog > ul > li a:hover {
	text-decoration : underline;
}

#blog .pagenation {
	display : flex;
	justify-content : center;
	align-items : center;
	margin-top : 50px;
}

#blog .pagenation a {
	position : relative;
	transition : 0.2s ease-in-out;
}

#blog .pagenation a,
#blog .pagenation span {
	display : flex;
	justify-content : center;
	align-items : center;
	height : 45px;
	margin : 0 5px;
	padding : 15px;
	text-decoration : none;
	border : #cccccc 1px solid;
}
#blog .pagenation .current a,
#blog .pagenation .current span {
	border : none;
	background-color : #1684b2;
}
#blog .pagenation a.prev {
	padding-left : 30px;
}

#blog .pagenation a.prev,
#blog .pagenation a.next {
	position : relative;
	width : auto;
}

#blog .pagenation a.prev::before,
#blog .pagenation a.next::before {
	position : absolute;
	top : 50%;
	left : 0.2em;
	font-family : "Material Icons";
	content : "\e314";
	transform : translateY(-50%);
}

#blog .pagenation a.prev::after {
	display : inline-block;
	content : "前へ";
}

#blog .pagenation a.next {
	padding-right : 30px;
}

#blog .pagenation a.next::before {
	right : 0.2em;
	left : auto;
	content : "\e315";
}

#blog .pagenation a.next::after {
	display : inline-block;
	content : "次へ";
}

#blog .pagenation span.is-current,
#blog .pagenation a:hover {
	font-weight : 700;
	color : #ffffff;
	border-color : #535353;
	background-color : #535353;
}

#blog .pagenation span.notNumbering {
	border : none;
}

/* ======================================
   blogDetail
====================================== */
#blogDetail > .inner {
	display : grid;
	grid-template-columns : 1fr 290px;
	grid-template-rows : auto 1fr;
	grid-gap : 40px;
	font-size : 1rem;
	max-width : 1200px;
	margin : 0 auto;
	padding : 0 24px;
}

#blogDetail .blogHeading {
	grid-column : 1 / 2;
	grid-row : 1 / 2;
	padding-bottom : 2em;
	border-bottom : #333333 solid 1px;
}

#blogDetail .blogHeading h1 {
	font-family : "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho",
	"MS PMincho", serif;
	font-size : 1.875rem;
	line-height : 1.45;
	margin-bottom : 0.5em;
}

#blogDetail .blogHeading .date {
	font-family : Futura, "Century Gothic", "Questrial", sans-serif;
	letter-spacing : 0.1em;
	color : #1684b2;
}

#blogDetail .blogArticle > h2 {
	font-size : 1.5em;
	line-height : 1.45;
	margin-bottom : 30px;
	padding : 0.25em 1em;
	color : #1684b2;
	border-left : 3px solid #1684b2;
}

#blogDetail .blogArticle > h3 {
	font-size : 1.3em;
	line-height : 1.45;
	margin-bottom : 20px;
	padding : 0;
	color : #1684b2;
}

#blogDetail .blogArticle > h4 {
	font-size : 1.1em;
	font-weight : bold;
	line-height : 1.45;
	margin-bottom : 15px;
	padding : 0;
	color : #333333;
}
#blogDetail .blogArticle {
	grid-column : 1 / 2;
	grid-row : 2 / 3;
}
#blogDetail .blogArticle > div,
#blogDetail .blogArticle > p,
#blogDetail .blogArticle > figure {
	margin-bottom : 30px;
}
#blogDetail .blogArticle > p > a {
	font-weight : bold;
	color : #1684b2;
}
#blogDetail .blogArticle > p > strong {
	font-family : "Meiryo", "Helvetica Neue", "Helvetica", "Hiragino Sans",
	"Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", sans-serif;
	font-weight : bold;
	line-height : 1.75;
}

#blogDetail .blogArticle > .wp-block-gallery {
	justify-content : center;
	width : 100%;
}
#blogDetail .blogArticle > .wp-block-gallery ul li {
	max-height : 140px;
}
#blogDetail .blogArticle > .wp-block-gallery img {
	border : 4px solid #ffffff;
	box-shadow : 0 0 4px rgba(0, 0, 0, 0.1);
}
#blogDetail .blogArticle img {
	max-width : 100%;
}
#blogDetail .blogArticle table {
	font-size : 1em;
	line-height : 1.3;
	margin : 0;
	padding : 10px;
	border-top : 1px solid #cccccc;
	border-left : 1px solid #cccccc;
	background : #ffffff;
}
#blogDetail .blogArticle table td {
	font-size : 1em;
	line-height : 1.3;
	margin : 0;
	padding : 10px;
	text-align : left;
	border-right : 1px solid #cccccc;
	border-bottom : 1px solid #cccccc;
	background : #ffffff;
	vertical-align : middle ;
}
#blogDetail .blogArticle > p > a {
	font-weight : normal;
}
#blogDetail .btnContainer {
	grid-column : 1 / 2;
	grid-row : 3 / 4;
}
#blogDetail .btnContainer .linkBtn {
	margin : 0 auto;
}
#blogDetail #archive {
	grid-column : 2 / 3;
	grid-row : 1 / 4;
}

#blogDetail #archive > h3 {
	font-family : "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho",
	"MS PMincho", serif;
	font-size : 1.125rem;
	line-height : 1.7;
	padding : 20px;
	letter-spacing : 0.05em;
	color : #ffffff;
	background : url(/wp/wp-content/themes/tenshokusekkei/top/img/img_recommend.png)
	no-repeat center right,
	#5a9f96;
}

#blogDetail #archive > ul {
	padding : 20px;
	background-color : #ffffff;
}
#blogDetail #archive > ul > li {
	padding : 20px 0;
}
#blogDetail #archive > ul > li:not(:last-child) {
	border-bottom : #000000 dotted 1px;
}
#blogDetail #archive > ul > li a {
	display : block;
	line-height : 1.7;
	transition : 0.2s ease-in-out;
	text-decoration : none;
}
#blogDetail #archive > ul > li a:hover {
	text-decoration : underline;
	opacity : 0.8;
}
#blogDetail #archive > ul > li .title {
	display : block;
	font-weight : bold;
	margin-bottom : 8px;
	color : #1684b2;
}
#blogDetail #archive > ul > li .date {
	display : block;
	font-size : 0.8em;
	margin-top : 8px;
	text-align : right;
	color : #777777;
}
#blogDetail #archive > .button a {
	display : block;
	position : relative;
	padding : 10px 40px 10px 0;
	transition : 0.2s ease-in-out;
	text-align : right;
	text-decoration : none;
	color : #ffffff;
	background-color : #a79970;
}
#blogDetail #archive > .button a:hover {
	background-color : #7f6e3d;
}
#blogDetail #archive > .button a::after {
	position : absolute;
	top : 50%;
	right : 5px;
	font-family : "Material Icons";
	font-size : 1.25rem;
	content : "\e5cc";
	transform : translateY(-50%);
}

@media screen and (max-width: 767px) {
	#contentHeader .pageTitle {
		display : block;
	}
	#contentHeader .pageTitle span {
		display : block;
		font-size : 1rem;
		margin-top : 0.5em;
		margin-left : 0;
		padding-left : 0;
		border : none;
	}
	#pageBody > #blog {
		padding : 80px 0;
	}
	#blogDetail .blogHeading {
		margin-bottom : 32px;
	}
	#pageBody > #blogDetail {
		padding : 40px 0;
	}
	#blogDetail > .inner {
		display : block;
		margin : 0;
		padding : 0 20px;
	}
	#blogDetail #archive {
		grid-column : 1 / 2;
		grid-row : 4 / 5;
	}

	#blogDetail .btnContainer {
		margin-bottom : 32px;
	}
	#blog > ul {
		margin : 0;
		padding : 0 20px;
	}
	#blog > ul > li {
		display : block;
		width : 100%;
	}
	#blog > ul > li span {
		margin : 0;
	}
	#blog > ul > li a {
		display : block;
		margin-top : 15px;
	}
	#blog .pagenation a.prev::before,
	#blog .pagenation a.next::before {
		left : 50%;
		transform : translate(-50%, -50%);
	}
	#blog .pagenation a.prev::after {
		display : none;
	}
	#blog .pagenation a.prev {
		width : 45px;
		padding : 15px;
	}
	#blog .pagenation a.next {
		width : 45px;
		padding : 15px;
	}
	#blog .pagenation a.next::before {
		right : auto;
		left : 50%;
	}
	#blog .pagenation a.next::after {
		display : none;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	#blog > ul {
		margin : 0;
		padding : 0 20px;
	}
	#blog > ul > li {
		width : 100%;
	}
	#blog > ul > li a {
		flex-basis : 60%;
	}
	#blogDetail > .inner {
		margin : 0;
		padding : 0 20px;
	}
}