/**
 * home.php用のCSS
 * 
 * 
 */




body > main{
	padding             : 0 44px;
}
@media screen and (max-width: 768px){
	body > main{
		padding         : 0;
	}
}

body > main > article{
	position            : relative;
	z-index             : 1;
	margin              : 0 auto;
	padding-top         : 72px;
	max-width           : 750px;
	box-sizing          : content-box;
	overflow            : hidden;
}
body > main > article.gallery-list-wrapper{
	max-width           : none;
}
@media screen and (max-width: 768px){
	body > main > article{
		padding-top     : 40px;
	}
}


/* typography */
#main_wrapper{
	position            : relative;
	overflow            : hidden;
}
#main_wrapper::before{
	content             : attr(data-typography);
	position            : absolute;
	top                 : 0;
	left                : 50%;
	z-index             : 0;
	display             : block;
	width               : 100%;
	max-width           : 1080px;
	font-size           : 150px;
	font-family         : 'Josefin Slab', 'Noto Serif JP', serif;
	font-weight         : 700;
	line-height         : 1em;
	color               : #F5F5F5;
	white-space         : nowrap;
	pointer-events      : none;
	transform           : translateX(-50%);
}

@media screen and (max-width: 768px){
	#main_wrapper::before{
		top             : 32px;
		font-size       : 56px;
	}
}




/* Post Header */
.single-post-header{
	text-align          : center;
}
.single-post-header .post-title{
	margin              : 8px 0;
	font-size           : 24px;
	line-height         : 1.5em;
}
.single-post-header .post-title .taxonomy-label{
	display             : inline-block;
	font-size           : 0.8em;
	line-height         : inherit;
	vertical-align      : bottom;
}
.single-post-header .post-title .taxonomy-label::after{
	content             : ':';
	padding             : 0 0.5em 0 0.2em;
}
@media screen and (max-width: 768px){
	.single-post-header .post-title{
		margin          : 24px 10px;
		font-size       : 20px;
		text-align      : left;
	}
}
.single-post-header .post-title.paged{
	font-size           : 20px;
}



.info-container{
	margin              : 64px auto 32px;
	max-width           : 96vw;
}
.info-article{
	position            : relative;
	margin              : 24px 0;
	padding-left        : 64px;
	font-size           : 14px;
	line-height         : 1.7em;
}
.info-article.search{
	padding-left        : 144px;
}
.info-article .mark-post-type,
.info-article time,
.info-article .sticky-post{
	position            : absolute;
	top                 : 0;
	left                : 0;
	display             : block;
	width               : 64px;
	font-size           : 12px;
	font-family         : 'Josefin Slab', 'Noto Serif JP', serif;
	font-weight         : 400;
	line-height         : 26px;  /* フォントに合わせて微調整 */
	white-space         : nowrap;
}
.info-article .mark-post-type{
	width               : 72px;
	font-weight         : 600;
	color               : #525252;
	text-align          : center;
	box-shadow          : 0 0 0 1px inset;
	transition          : 0.35s;
}
.info-article .mark-post-type.page{
	color               : #0C007A; /* #1000A3 */
}
.info-article .mark-post-type.post{
	color               : #630070; /* #9100A3 */
}
.info-article .mark-post-type.gallery{
	color               : #70000F; /* #A30017 */
}
.info-article:hover .mark-post-type.page{
	color               : #FFFFFF;
	background          : #0C007A;
}
.info-article:hover .mark-post-type.post{
	color               : #FFFFFF;
	background          : #630070;
}
.info-article:hover .mark-post-type.gallery{
	color               : #FFFFFF;
	background          : #70000F;
}
.info-article.search time,
.info-article.search .sticky-post{
	left                : 80px;
}
.info-article .sticky-post{
	font-weight         : 600;
}
.info-article h3{
	display             : inline-block;
	font-size           : 14px;
	line-height         : 1.7em;
	vertical-align      : top;
}
.info-article .post-description{
	display             : inline-block;
	margin              : 0;
	max-width           : 100%;
	font-size           : 12px;
	color               : #AAAAAA;
	line-height         : 23.8px;
	line-height         : calc(14px * 1.7);
	vertical-align      : top;
	white-space         : nowrap;
	text-overflow       : ellipsis;
	overflow            : hidden;
}
.info-article .post-description::before{
	content             : '--';
	padding             : 0 0.5em 0 0.8em;
}

@media screen and (max-width: 768px){
	.info-article.search{
		padding-left    : 80px;
		min-height      : 51px;
	}
	.info-article.search time,
	.info-article.search .sticky-post{
		top             : 28px;
		left            : 0;
		width           : 72px;
		text-align      : center;
	}
}


.pagination .screen-reader-text{
	display              : none;
}

.nav-links{
	margin               : 32px 0;
}



.search-field-wrapper{
	display             : flex;
	justify-content     : center;
	align-items         : center;
	flex-wrap           : wrap;
	margin              : 8px 0 24px;
}
.post-serach-form .search-field-wrapper,
.gallery-serach-form .search-field-wrapper{
	margin              : 64px auto;
	width               : 96%;
	max-width           : 480px;
}
.post-serach-form .search-field,
.gallery-serach-form .search-field{
	margin              : 0;
	padding             : 0.6em 0.9em;
	width               : 50%;
	border-color        : #333333;
	border-radius       : 0;
}
.post-serach-form input[type=submit].search-submit,
.gallery-serach-form input[type=submit].search-submit{
	margin              : 0;
	padding             : 0.6em 1.6em;
	width               : auto;
	min-width           : auto;
	font-size           : inherit;
	line-height         : inherit;
	color               : white;
	background          : #333333;
	border-color        : #333333
	cursor              : pointer;
}