/************
 * ファーストビュー以外のCSS
 * CSS other than First View
 * 
 ************/


/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;700&display=swap');
*/


/***********************/
/* Font Awesome 5 Free */
/***********************/

/* class="far" 用 */
@font-face{
	font-family  : 'Font Awesome 5 Free';
	font-style   : normal;
	font-weight  : 400;
	src          : url('./font-awesome-5-free/fa-regular-400.eot');
	src          : url('./font-awesome-5-free/fa-regular-400.eot?#iefix')      format('embedded-opentype'),
	               url('./font-awesome-5-free/fa-regular-400.woff2')           format('woff2'),
	               url('./font-awesome-5-free/fa-regular-400.woff')            format('woff'),
	               url('./font-awesome-5-free/fa-regular-400.ttf')             format('truetype'),
	               url('./font-awesome-5-free/fa-regular-400.svg#fontawesome') format('svg');
	font-display : swap;
}
/* class="fas" 用 */
@font-face{
	font-family  : 'Font Awesome 5 Free';
	font-style   : normal;
	font-weight  : 900;
	src          : url('./font-awesome-5-free/fa-solid-900.eot');
	src          : url('./font-awesome-5-free/fa-solid-900.eot?#iefix')        format('embedded-opentype'),
	               url('./font-awesome-5-free/fa-solid-900.woff2')             format('woff2'),
	               url('./font-awesome-5-free/fa-solid-900.woff')              format('woff'),
	               url('./font-awesome-5-free/fa-solid-900.ttf')               format('truetype'),
	               url('./font-awesome-5-free/fa-solid-900.svg#fontawesome')   format('svg');
	font-display : swap;
}
/* class="fab" 用 */
@font-face{
	font-family  : 'Font Awesome 5 Brands';
	font-style   : normal;
	font-weight  : normal;
	src          : url('./font-awesome-5-free/fa-brands-400.eot');
	src          : url('./font-awesome-5-free/fa-brands-400.eot?#iefix')       format('embedded-opentype'),
	               url('./font-awesome-5-free/fa-brands-400.woff2')            format('woff2'),
	               url('./font-awesome-5-free/fa-brands-400.woff')             format('woff'),
	               url('./font-awesome-5-free/fa-brands-400.ttf')              format('truetype'),
	               url('./font-awesome-5-free/fa-brands-400.svg#fontawesome')  format('svg');
	font-display : swap;
}

/******************************/
/* END of Font Awesome 5 Free */
/******************************/



/* Google Fonts Josefin Slab */
@font-face{
	font-family  : 'Josefin Slab';
	font-weight  : 700;
	src          : local('Josefin Slab'), local('JosefinSlab');
	src          : url('./google-fonts/JosefinSlab-Bold.eot');
	src          : url('./google-fonts/JosefinSlab-Bold.eot?#iefix')     format('embedded-opentype'),
	               url('./google-fonts/JosefinSlab-Bold.woff2')          format('woff2'),
	               url('./google-fonts/JosefinSlab-Bold.woff')           format('woff'),
	               url('./google-fonts/JosefinSlab-Bold.ttf')            format('truetype');
	font-display : swap;
}
@font-face{
	font-family  : 'Josefin Slab';
	font-weight  : 600;
	src          : local('Josefin Slab'), local('JosefinSlab');
	src          : url('./google-fonts/JosefinSlab-SemiBold.eot');
	src          : url('./google-fonts/JosefinSlab-SemiBold.eot?#iefix') format('embedded-opentype'),
	               url('./google-fonts/JosefinSlab-SemiBold.woff2')      format('woff2'),
	               url('./google-fonts/JosefinSlab-SemiBold.woff')       format('woff'),
	               url('./google-fonts/JosefinSlab-SemiBold.ttf')        format('truetype');
	font-display : swap;
}
@font-face{
	font-family  : 'Josefin Slab';
	font-weight  : 400;
	src          : local('Josefin Slab'), local('JosefinSlab');
	src          : url('./google-fonts/JosefinSlab-Regular.eot');
	src          : url('./google-fonts/JosefinSlab-Regular.eot?#iefix')  format('embedded-opentype'),
	               url('./google-fonts/JosefinSlab-Regular.woff2')       format('woff2'),
	               url('./google-fonts/JosefinSlab-Regular.woff')        format('woff'),
	               url('./google-fonts/JosefinSlab-Regular.ttf')         format('truetype');
	font-display : swap;
}
@font-face{
	font-family  : 'Josefin Slab';
	font-weight  : 200;
	src          : local('Josefin Slab'), local('JosefinSlab');
	src          : url('./google-fonts/JosefinSlab-Light.eot');
	src          : url('./google-fonts/JosefinSlab-Light.eot?#iefix')    format('embedded-opentype'),
	               url('./google-fonts/JosefinSlab-Light.woff2')         format('woff2'),
	               url('./google-fonts/JosefinSlab-Light.woff')          format('woff'),
	               url('./google-fonts/JosefinSlab-Light.ttf')           format('truetype');
	font-display : swap;
}




/****************/
/* Common Parts */
/****************/

/* Pagination */
.pagination-pc,
.pagination-sp{
	display             : none;
	margin              : 8px 0;
}
@media print, screen and (min-width: 769px){
	.pagination-pc{
		display         : block;
	}
}
@media screen and (max-width: 768px){
	.pagination-sp{
		display         : block;
	}
}
.pagination-pc .screen-reader-text,
.pagination-sp .screen-reader-text{
	display             : none;
}
ul.page-numbers{
	list-style-type     : none;
	margin              : 0;
	padding             : 0;
	font-size           : 0;
	text-align          : center;
}
ul.page-numbers > li{
	display             : inline-block;
	margin              : 0;
	padding             : 0;
}
ul.page-numbers > li > *{
	display             : block;
	margin              : 8px 0;
	padding             : 0;
	width               : 40px;
	height              : 40px;
	font-size           : 20px;
	font-family         : 'Josefin Slab', serif;
	font-weight         : 700;
	color               : #333333;
	color               : var(--var -maincolor, #333333);
	line-height         : 40px;
	text-align          : center;
	box-sizing          : content-box;
}
ul.page-numbers > li > .prev,
ul.page-numbers > li > .next{
	font-size           : 0;
}
ul.page-numbers > li > .prev::after,
ul.page-numbers > li > .next::after{
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 900;
	font-size           : 20px;
}
ul.page-numbers > li > .prev::after{
	content             : '\f104';
}
ul.page-numbers > li > .next::after{
	content             : '\f105';
}
ul.page-numbers .current{
	border              : 2px solid;
}
ul.page-numbers .dots{
	margin              : 8px 0;
	width               : auto;
	font-weight         : normal;
}
@media screen and (max-width: 374px){
	ul.page-numbers > li > *,
	ul.page-numbers .dots{
		margin          : 8px 0;
	}
}
@media screen and (max-width: 359px){
	ul.page-numbers .prev,
	ul.page-numbers .next{
		width           : 32px;
	}
}

/* object-fit:cover;風にする */
/* 任意の要素以下に figure > img を配置する */
/* 親要素にはサイズを必ず指定する */
.object-fit-cover{
	position            : relative;
	overflow            : hidden;
}
.object-fit-cover > figure{
	position            : absolute;
	top                 : -950%;
	bottom              : -950%;
	left                : -950%;
	right               : -950%;
	max-width           : none;
	max-height          : none;
	transform           : scale(0.05);
}
.object-fit-cover > figure > img{
	position            : absolute;
	top                 : 50%;
	left                : 50%;
	width               : auto;
	height              : auto;
	min-width           : 100%;
	min-height          : 100%;
	max-width           : none;
	max-height          : none;
	transform           : translate(-50%, -50%);
}

/* object-fit: cover 風に画像表示         */
/* Show a image like as object-fit: cover */
.object-fit-portrait,
.object-fit-landscape{
	position            : relative;
	z-index             : 1;
	overflow            : hidden;
}
.object-fit-portrait > img,
.object-fit-landscape > img{
	position            : absolute;
	top                 : 50%;
	left                : 50%;
	transform           : translate(-50%, -50%);
}
.object-fit-portrait > img{
	width               : 100%;
	height              : auto;
	max-height          : none;
}
.object-fit-landscape > img{
	width               : auto;
	max-width           : none;
	height              : 100%;
}

/* ボタン風リンク */
.anchor-button{
	display             : block;
	margin              : 64px auto 128px;
	padding             : 0.8em;
	width               : 640px;
	width               : calc(var(--var-maxwidth) / 2);
	max-width           : 80%;
	min-width           : 300px;
	font-size           : 24px;
	font-weight         : bolder;
	color               : white;
	line-height         : 1.6em;
	text-align          : center;
	background          : #313550;
	background          : var(--var-maincolor);
	box-shadow          : 4px 4px 12px rgba(32,32,32,0.0);
}
.anchor-button + .anchor-button{
	margin-top          : -64px;
}
.anchor-button:hover{
	color               : white;
	box-shadow          : 4px 4px 12px rgba(32,32,32,0.2);
}


/* Form Parts style */
input,
select,
textarea{
	margin              : 8px 0;
	padding             : 0.3em 0.9em;
	width               : 100%;
	border              : 1px solid #DDDDDD;
	-moz-box-sizing     : border-box;
	-webkit-box-sizing  : border-box;
	-webkit-appearance  : none;
	appearance          : none;
	transition          : 0.2s;
}
input[type=radio],
input[type=checkbox]{
	margin              : 0;
	padding             : 0;
	width               : auto;
	border              : none;
	-webkit-appearance  : auto;
	appearance          : auto;
	all                 : revert;
}
textarea{
	line-height         : 1.4em;
}
input:placeholder-shown,
textarea:placeholder-shown{
	background          : #F5F5F5;
}
input:invalid:not(:placeholder-shown){
	color               : #A22626;
	border-color        : #DC6A6A;
}
input[type=submit],
button{
	display             : block;
	margin              : 48px auto;
	padding             : 16px 24px;
	width               : auto;
	min-width           : 240px;
	font-size           : 16px;
	line-height         : 1.4em;
	text-align          : center;
	background          : #FFFFFF;
	border              : 1px solid #333333;
	cursor              : pointer;
	transition          : 0.8s;
}
input[type=submit]:hover,
button:hover{
	color               : #FFFFFF;
	background          : #333333;
}
input[type=submit]:disabled,
button:disabled{
	color               : inherit;
	background          : #FFFFFF;
}
/* <label> or <sapn> is required immediately after <checkbox> */
input[type=checkbox].custom-checkbox{
	position            : absolute;
	opacity             : 0;
	-webkit-appearance  : none;
	        appearance  : none;
}
input[type=checkbox].custom-checkbox + label,
input[type=checkbox].custom-checkbox + span{
	position            : relative;
	padding-left        : 40px;
	line-height         : 32px;
}
input[type=checkbox].custom-checkbox + label::before,
input[type=checkbox].custom-checkbox + span::before{
	position            : absolute;
	display             : block;
	content             : '';
	top                 : 5px;
	left                : 10px;
	width               : 20px;
	height              : 20px;
	border              : 1px solid;
	border-radius       : 2px;
	opacity             : 0.3;
	transition          : 0.3s;
}
input[type=checkbox].custom-checkbox + label::after,
input[type=checkbox].custom-checkbox + span::after{
	position            : absolute;
	display             : block;
	content             : '';
	top                 : 0;
	left                : 5px;
	width               : 30px;
	height              : 30px;
	background          : transparent;
	        mask-image  : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4KICA8cGF0aCBmaWxsPSJibGFjayIgZD0iTTEzLDI2YzQuNy04LjEsOS40LTE0LjgsMTYtMTktNy45LDEuNy0xNC4yMzQsOS43NjgtMTYuNTM0LDEyLjIxOEEyNC4zNDksMjQuMzQ5LDAsMCwwLDIsMTUsNTMuMzMyLDUzLjMzMiwwLDAsMSwxMywyNloiLz4KPC9zdmc+Cg==');
	-webkit-mask-image  : url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4KICA8cGF0aCBmaWxsPSJibGFjayIgZD0iTTEzLDI2YzQuNy04LjEsOS40LTE0LjgsMTYtMTktNy45LDEuNy0xNC4yMzQsOS43NjgtMTYuNTM0LDEyLjIxOEEyNC4zNDksMjQuMzQ5LDAsMCwwLDIsMTUsNTMuMzMyLDUzLjMzMiwwLDAsMSwxMywyNloiLz4KPC9zdmc+Cg==');
	opacity             : 0.8;
	transition          : 0.3s;
}
input[type=checkbox].custom-checkbox:checked + label::before,
input[type=checkbox].custom-checkbox:checked + span::before,
input[type=checkbox].custom-checkbox + label:hover::before,
input[type=checkbox].custom-checkbox + span:hover::before{
	box-shadow          : 0 0 4px var(--main-color);
}
input[type=checkbox].custom-checkbox:checked + label::after,
input[type=checkbox].custom-checkbox:checked + span::after{
	background          : #1B1B98;
	background          : var(--main-color);
}

.side-by-side{
	display             : flex;
	flex-wrap           : wrap;
	justify-content     : space-between;
	margin-left         : auto;
	margin-right        : auto;
	width               : 96%;
	max-width           : 1280px;
}
.side-by-side > *{
	flex                : 0 1 48%;
	display             : inline-block;
	width               : 48%;
	vertical-align      : top;
}

/* Add display:none; */
.display-none{
	display             : none !important;
}

/* Add display:inline-block; */
.inline-block{
	display             : inline-block !important;
}

.password-label{
	display             : block;
}




/************/
/* Contents */
/************/

/* 均等割付 */
/* Justification */
.post-content p{
	text-align          : justify;
}
.post-content .has-text-align-right{
	text-align          : right;
}
.post-content .has-text-align-left{
	text-align          : left;
}
.post-content .has-text-align-center{
	text-align          : center;
}

/* Other tags style */
.wp-block-image{
	margin              : 2.5em 0 1.7em;
}
.wp-block-image img{
	display             : block;
	margin              : 0 auto;
}
.wp-block-image figcaption{
	margin              : 0.3em 0 0;
	padding             : 4px 8px;
	font-size           : 14px;
	font-style          : italic;
	background          : repeat center / 5px 5px
	                      linear-gradient(45deg, var(--var-hatch-color, #F5F5F5) 20%, transparent 20%, transparent 50%,
	                      var(--var-hatch-color, #F5F5F5) 50%, var(--var-hatch-color, #F5F5F5) 70%, transparent 70%, transparent);
}
.post-content ul{
	list-style-type     : disc;
	margin              : 16px 0;
	padding-left        : 32px;
}
.post-content blockquote{
	position            : relative;
	z-index             : 1;
	margin              : 32px 8px;
	padding             : 16px 24px;
	background          : white;
	background          : hsla(240, 70%, 35%, 0.08);
	background          : var(--main-color-hatch);
	border-left         : 8px solid #1B1B98;
	border-left-color   : var(--main-color);
	box-shadow          : 2px 2px 8px rgba(0,0,0,0.2);
	box-shadow          : 2px 2px 8px var(--main-shadow-color);
}
.post-content blockquote::before,
.post-content blockquote::after{
	position            : absolute;
	z-index             : -1;
	font-size           : 56px;
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 900;
	line-height         : 1;
	color               : #1B1B98;
	opacity             : 0.08;
}
.post-content blockquote::before{
	content             : '\f10d';
	top                 : 12px;
	left                : 12px;
}
.post-content blockquote::after{
	content             : '\f10e';
	bottom              : 12px;
	right               : 12px;
}
.post-content blockquote h1,
.post-content blockquote h2,
.post-content blockquote h3,
.post-content blockquote h4,
.post-content blockquote h5,
.post-content blockquote h6{
	position            : static;
	margin              : 1.0em 0 0.5em;
	padding             : 0;
	font-size           : 1.1em;
	font-weight         : bolder;
	color               : inherit;
	background          : none;
}
.post-content blockquote h1::before,
.post-content blockquote h2::before,
.post-content blockquote h3::before,
.post-content blockquote h4::before,
.post-content blockquote h5::before,
.post-content blockquote h6::before,
.post-content blockquote h1::after,
.post-content blockquote h2::after,
.post-content blockquote h3::after,
.post-content blockquote h4::after,
.post-content blockquote h5::after,
.post-content blockquote h6::after{
	content             : none;
}
.post-content blockquote p{
	margin              : 0.5em 0;
	padding-left        : 0.5em;
}
.post-content blockquote cite{
	display             : block;
	margin              : 24px 10px 16px;
	font-size           : 0.9em;
	font-style          : italic;
	opacity             : 0.8;
}
.post-content blockquote cite::before{
	content             : '\f0a4';
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 400;
	font-size           : 1.1em;
	font-style          : normal;
	display             : inline-block;
	padding-right       : 0.4em;
	transform           : rotate(-25deg);
}
.post-content blockquote cite::after{
	content             : '- Source';
	padding-left        : 0.5em;
	opacity             : 0.8;
}

/*******************/
/* END of Contents */
/*******************/





/*************************/
/* Gallery Page Contents */
/*************************/

.gallery-wrapper{
	padding             : 0 44px;
}
@media screen and (max-width: 768px){
	.gallery-wrapper{
		padding         : 0;
	}
}
.list-gallery{
	display             : block;
	margin              : 32px auto;
	max-width           : 960px;
	font-size           : 0;
	line-height         : 0;
	text-align          : center;
}
.list-gallery > li{
	position            : relative;
	display             : inline-block;
	margin              : 8px;
	padding             : 0;
	line-height         : 0;
	width               : 300px;
	height              : 200px;
}
.list-gallery-case,
.list-gallery-case::after{
	position            : absolute;
	top                 : 0;
	bottom              : 0;
	left                : 0;
	right               : 0;
	width               : 100%;
	height              : 100%;
}
.list-gallery-case::after{
	content             : '';
	z-index             : 2;
	background          : black;
	opacity             : 0;
	transition          : opacity 1.2s;
	transition          : opacity var(--var-transition);
}
.list-gallery-case:hover::after{
	opacity             : 0.6;
}
.list-gallery .featured-image{
	position            : absolute;
	z-index             : 1;
	width               : 100%;
	height              : 100%;
}
.list-gallery .featured-image > img{
	transition          : transform 1.2s;
	transition          : transform var(--var-transition);
}
.list-gallery-case:hover .featured-image > img{
	transform           : translate(-50%, -50%) scale(1.05);
}
.list-gallery .gallery-text{
	position            : relative;
	top                 : 50%;
	z-index             : 3;
	padding             : 32px;
	max-height          : 100%;
	color               : #FFFFFF;
	overflow-y          : auto;
	transform           : translateY(-50%);
	opacity             : 0;
	transition          : opacity 1.2s;
	transition          : opacity var(--var-transition);
}
.list-gallery-case:hover .gallery-text{
	opacity             : 1.0;
}
.list-gallery .gallery-title{
	font-size           : 16px;
	line-height         : 1.4em;
	text-align          : center;
}
.list-gallery .gallery-excerpt{
	font-size           : 16px;
}

/********************************/
/* END of Gallery Page Contents */
/********************************/



/************************/
/* Gallery Slider Parts */
/************************/

.pc-swipe-button{
	position            : absolute;
	top                 : 0;
	bottom              : 0;
	z-index             : 5;
	width               : 64px;
	pointer-events      : auto;
}
.pc-swipe-button.right{
	right               : 0;
}
.pc-swipe-button.left{
	left                : 0;
}
.pc-swipe-button .swipe-arrow{
	top                 : 50%;
}
.pc-swipe-button:hover .swipe-arrow.next{
	right               : -32px;
}
.pc-swipe-button:hover .swipe-arrow.prev{
	left                : -32px;
}

.swipe-arrow{
	position            : absolute;
	z-index             : 2;
	width               : 64px;
	height              : 64px;
	background          : black;
	border-radius       : 50%;
	box-shadow          : 0 0 16px rgba(222,222,222,0.6);
	cursor              : pointer;
	opacity             : 0.6;
	transform           : translateY(-50%);
	transition          : left 0.2s, right 0.2s;
}
.swipe-arrow.next{
	right               : -82px;
	text-align          : left;
}
.swipe-arrow.prev{
	left                : -82px;
	text-align          : right;
}
.swipe-arrow.next.enable{
	right               : -32px;
}
.swipe-arrow.prev.enable{
	left                : -32px;
}
.swipe-arrow::after{
	display             : block;
	padding             : 0 16px;
	font-size           : 32px;
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 900;
	color               : white;
	line-height         : 64px;
}
.next::after{
	content             : '\f0da';
}
.prev::after{
	content             : '\f0d9';
}

.selectors-wrapper{
	position            : relative;
	padding             : 0 46px;
	overflow            : hidden:
}
.selectors-wrapper .selector{
	display             : block;
	cursor              : pointer;
	box-shadow          : 0 0 0 2px transparent;
	transition          : box-shadow 0.6s;
}
.selectors-wrapper .selector.is_active{
	box-shadow          : 0 0 0 2px #313550;
	box-shadow          : 0 0 0 2px var(--var-maincolor);
}
.selectors-wrapper .selector> img{
	transition          : opacity 0.6s, filter 0.6s;
}
.selectors-wrapper .selector.is_active > img{
	opacity             : 0.5;
	filter              : brightness(125%);
}
.selectors-wrapper .nav-button{
	position            : absolute;
	top                 : 2px;
	bottom              : 2px;
	display             : block;
	width               : 44px;
	background          : #313550;
	background          : var(--var-maincolor);
	cursor              : pointer;
}
.selectors-wrapper .next{
	right               : 0;
}
.selectors-wrapper .prev{
	left                : 0;
}
.selectors-wrapper .nav-button::after{
	position            : absolute;
	top                 : 50%;
	left                : 50%;
	display             : inline-block;
	width               : 0.52em;   /* 矢印がズレて見える錯覚の補正用 */
	font-size           : 32px;
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 900;
	color               : white;
	transform           : translate(-50%, -50%);
}
.selectors-wrapper .nav-button.next{
	text-align          : right;
}
.selectors-wrapper .nav-button.prev{
	text-align          : left;
}

/*******************************/
/* END of Gallery Slider Parts */
/*******************************/




/* 検索結果のヘッダ        */
/* Header of Search Result */
.search-header-title{
	padding             : 48px 5% 32px;
	font-size           : 26px;
	line-height         : 1.25em;
	font-family         : 'Cinzel', serif;
	font-weight         : bolder;
	text-align          : center;
}
.search-header-title::after{
	content             : '';
	display             : block;
	margin              : 8px auto -8px;
	width               : 120px;
	height              : 5px;
	background          : radial-gradient(ellipse farthest-side, #0D0D4A 50%, transparent);
	background          : radial-gradient(ellipse farthest-side, var(--main-deep-color) 50%, transparent);
	opacity             : 0.9;
}
/* ページ番号  */
/* Page number */
.search-page{
	display             : inline-block;
	font-size           : 0.9em;
	font-weight         : normal;
	opacity             : 0.9;
}
.search-page::before{
	content             : '(';
	padding             : 0 0.4em;
}
.search-page::after{
	content             : ')';
	padding             : 0 0.4em;
}


/* 記事一覧のリスト表示   */
/* Show the posts as list */
.list-posts *,
.list-posts *:hover{
	line-height         : 1.7em;
	color               : inherit;
}
.list-posts .list-posts-section-title{
	margin              : 0.5em 0 0.8em;
	font-size           : 1.25em;
	line-height         : 1.25em;
	font-weight         : bolder;
	text-align          : center;
}
.list-posts .list-posts-section-title::after{
	content             : '';
	display             : block;
	margin              : 8px auto;
	width               : 100px;
	height              : 4px;
	background          : radial-gradient(ellipse farthest-side, #0D0D4A 50%, transparent);
	opacity             : 0.9;
}
.list-posts > *:first-child .list-posts-post{
	margin-top          : 16px;
}
.list-posts-post{
	position            : relative;
	display             : flex;
	align-items         : center;
	margin              : 36px 0;
	padding             : 5px 8px;
	font-size           : 0;
	white-space         : nowrap;
	border              : 1px solid #DDDDDD;
	transition          : 0.8s;
}
.list-posts-post .featured-image{
	display             : inline-block;
	width               : 25%;
	padding-top         : 16.5%;
	vertical-align      : top;
}
.list-posts-post .featured-image img{
	transition          : 0.8s;
}
.list-posts-post:hover .featured-image img{
	transform           : translate(-50%, -50%) scale(1.08);
}
.list-posts-post .list-posts-text{
	display             : inline-block;
	margin-bottom       : auto;
	padding-left        : 16px;
	width               : 75%;
	font-size           : 14px;
	white-space         : normal;
	vertical-align      : top;
}
.list-posts-post .list-posts-text h1{
	margin              : 0.5em 0 0.2em;
	font-size           : 20px;
}
.list-posts-post .post-date li{
	display             : inline-block;
	margin              : 5px;
	opacity             : 0.8;
}
.list-posts-post .post-date li::before{
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 900;
	padding-right       : 0.25em;
}
.list-posts-post .post-date li:nth-child(1)::before{
	content             : '\f017';
}
.list-posts-post .post-date li:nth-child(2)::before{
	content             : '\f2f1';
}
.list-posts-post main{
	border-top          : 1px dotted #DDDDDD;
}
.list-posts-post main h2{
	display             : none;
}
@media screen and (max-width: 768px){
	.list-posts-post{
		display         : block;
		padding         : 8px;
	}
	.list-posts-post .featured-image{
		display         : block;
		margin-bottom   : 10px;
		padding-top     : 66%;
		width           : auto;
	}
	.list-posts-post .list-posts-text{
		display         : block;
		width           : auto;
		padding-left    : 10px;
		padding-right   : 10px;
		text-align      : center;
	}
	.list-posts-post main{
		text-align      : justify;
		text-align-last : left;
	}
}






/**************************/
/* Created Elements by JS */
/**************************/


/* 画像の拡大表示 */
/* Zoom image     */
div#draw_area{
	position            : fixed;
	top                 : 0;
	left                : 0;
	z-index             : 999;
	width               : 100%;
	height              : 100%;
	background-color    : rgba(0,0,0,0.9);
	transition          : opacity 0.6s;
}
div#draw_area div.back-close{
	position            : absolute;
	top                 : 0;
	bottom              : 0;
	left                : 0;
	right               : 0;
	z-index             : 0;
}
div#draw_area div#draw_area_header{
	position            : absolute;
	top                 : 0;
	height              : 44px;
	left                : 0;
	right               : 0;
}
div#draw_area div#draw_area_header > div#close{
	position            : absolute;
	top                 : 0;
	bottom              : 0;
	right               : 5px;
	width               : 44px;
	display             : inline-block;
	font-size           : 40px;
	font-weight         : bold;
	line-height         : 44px;
	color               : white;
	text-align          : center;
	cursor              : pointer;
}
div#draw_area div#draw_area_main,
div#draw_area div#draw_area_main_super{
	position            : absolute;
	top                 : 44px;
	bottom              : 72px;
	left                : 0;
	right               : 0;
	overflow            : hidden;
}
div#draw_area div#draw_area_main_super{
	overflow            : hidden;
}
div#draw_area div#draw_area_main::before,
div#draw_area div#draw_area_main_super::before{
	position            : absolute;
	top                 : 50%;
	left                : 50%;
	z-index             : 1;
	display             : inline-block;
	content             : '\f110';
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 900;
	font-size           : 44px;
	color               : white;
	animation           : spin 1.5s linear infinite;
}
div#draw_area div#draw_area_main > img{
	position            : absolute;
	top                 : 50%;
	left                : 50%;
	z-index             : 1;
	transform           : translateX(-50%) translateY(-50%);
	width               : auto;
	max-width           : 95%;
	height              : auto;
	max-height          : 95%;
	opacity             : 0;
	transition          : top 0.32s, left 0.44s, opacity 0.6s;
}
div#draw_area div#draw_area_main_super > img{
	position            : absolute;
	top                 : 0;
	left                : 0;
	z-index             : 1;
	width               : auto;
	max-width           : initial;
	height              : auto;
	max-height          : initial;
	cursor              : crosshair;
	opacity             : 0;
	transform-origin    : top left;
	transition          : all 0.32s, transform 0s;
}
@media screen and (max-width: 640px){
	div#draw_area div#draw_area_main > img{
		max-width       : 100%;
		max-height      : 100%;
	}
}
div#draw_area div#draw_area_footer{
	position            : absolute;
	bottom              : 0;
	height              : 64px;
	left                : 0;
	right               : 0;
	padding             : 0 10px;
	font-size           : 24px;
	line-height         : 44px;
	text-align          : center;
	overflow-x          : auto;
	overflow-y          : hidden;
}
div#draw_area div#draw_area_footer > div:nth-child(2){
	position            : relative;
	z-index             : 1;
	font-size           : 16px;
	line-height         : 20px;
	color               : white;
	text-align          : center;
	white-space         : nowrap;
	overflow-x          : auto;
	-ms-overflow-style  : none;
	scrollbar-width     : none;
	opacity             : 0.8;
}
div#draw_area div#draw_area_footer > div:nth-child(2)::-webkit-scrollbar{
	display             : none;
}
div#draw_area div#draw_area_footer > ul{
	position            : relative;
	z-index             : 1;
	display             : inline-block;
	list-style-type     : none;
	margin              : 0 auto;
	padding             : 0;
	white-space         : nowrap;
}
div#draw_area div#draw_area_footer > ul > li{
	display             : inline-block;
	margin              : 0 4px;
	padding             : 0;
	font-size           : 16px;
	line-height         : 44px;
	transition          : 0.4s;
}
div#draw_area div#draw_area_footer > ul > li:hover{
	text-shadow         : 0 0 5px white;
}
div#draw_area div#draw_area_main > div#zoom_before{
	position            : absolute;
	top                 : 50%;
	left                : 0;
	z-index             : 2;
	transform           : translateY(-50%);
	width               : 100px;
	max-width           : 50%;
	height              : 200px;
	max-height          : 50%;
	opacity             : 0.2;
	transition          : 0.5s;
	cursor              : pointer;
}
div#draw_area div#draw_area_main > div#zoom_before::after{
	display             : block;
	content             : '\f137';
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 900;
	font-size           : 44px;
	text-shadow         : 0 0 25px white;
	position            : absolute;
	top                 : 50%;
	left                : 20px;
	transform           : translateY(-50%);
}
div#draw_area div#draw_area_main > div#zoom_before:hover{
	opacity             : 0.9;
}
div#draw_area div#draw_area_main > div#zoom_before:hover::after{
	text-shadow         : 0 0 25px white, 0 0 35px white;
}
div#draw_area div#draw_area_main > div#zoom_after{
	position            : absolute;
	top                 : 50%;
	right               : 0;
	z-index             : 2;
	transform           : translateY(-50%);
	width               : 100px;
	max-width           : 50%;
	height              : 200px;
	max-height          : 50%;
	opacity             : 0.2;
	transition          : 0.5s;
	cursor              : pointer;
}
div#draw_area div#draw_area_main > div#zoom_after::before{
	display             : block;
	content             : '\f138';
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 900;
	font-size           : 44px;
	text-shadow         : 0 0 25px white;
	position            : absolute;
	top                 : 50%;
	right               : 20px;
	transform           : translateY(-50%);
}
div#draw_area div#draw_area_main > div#zoom_after:hover{
	opacity             : 0.9;
}
div#draw_area div#draw_area_main > div#zoom_after:hover::before{
	text-shadow         : 0 0 25px white, 0 0 35px white;
}




/* 先頭に戻るボタン   */
/* Move to TOP button */
div#move_top{
	position            : fixed;
	bottom              : 20px;
	right               : 20px;
	z-index             : 10;
	display             : inline-block;
	opacity             : 0.2;
	transition          : 0.8s;
}
@media screen and (max-width: 640px){
	div#move_top{
		opacity         : 0.5;
	}
}
div#move_top:hover{
	transform           : scale(1.2);
	opacity             : 0.8;
}
div#move_top::before{
	position            : absolute;
	z-index             : 0;
	content             : '';
	top                 : 2px;
	left                : 2px;
	width               : 40px;
	height              : 40px;
	background-color    : white;
	border-radius       : 20px;
}
div#move_top::after{
	position            : relative;
	z-index             : 1;
	content             : '\f139';
	font-family         : 'Font Awesome 5 Free';
	font-weight         : 900;
	font-size           : 44px;
	line-height         : 44px;
	color               : black;
	cursor              : pointer;
}



@keyframes spin{
	0%{
		transform       : translateX(-50%) translateY(-50%) rotate(0deg);
	}
	100%{
		transform       : translateX(-50%) translateY(-50%) rotate(359deg);
	}
}




/* GDPR用のトラッキング同意通知用CSS */
.check-accept-google-analytics{
	position        : fixed;
	bottom          : 0;
	left            : 0;
	right           : 0;
	z-index         : 9999;
	padding         : 10px 5px;
	background      : #F0F0F0;
	background      : linear-gradient(to top, #E9E9E9, #F9F9F9);
	background      : linear-gradient(to top, var(--main-gray-color), var(--main-bg-color));
	box-shadow      : 0 0 4px rgba(0,0,0,0.2);
	box-shadow      : 0 0 4px var(--main-shadow-color);
	text-align      : center;
	opacity         : 0; /* 0.95; */
	transition      : 0.8s;
}
.check-accept-google-analytics > div{
	display         : inline-block;
}
.check-accept-google-analytics p{
	position        : relative;
	margin          : 5px 10px;
	font-size       : 14px;
	line-height     : 22px;
	text-align      : justify;
}
.check-accept-google-analytics a{
	color           : #A22626;
}
.check-accept-google-analytics button{
	all             : unset;
	display         : inline-block;
	margin          : 5px;
	padding         : 8px 16px;
	font-size       : 14px;
	line-height     : 24px;
	color           : #252525;
	border          : 1px solid;
	border-radius   : 26px;
	box-shadow      : 2px 2px 6px transparent;
	cursor          : pointer;
	transition      : 0.4s;
}
.check-accept-google-analytics button:hover{
	box-shadow      : 2px 2px 6px var(--main-shadow-color);
}
.check-accept-google-analytics button::before{
	font-family     : 'Font Awesome 5 Free';
	font-weight     : 900;
	padding-right   : 0.5em;
}
.check-accept-google-analytics button.ga-accept-button{
	color           : var(--main-dark-color);
	background      : var(--main-color-hatch);
	border-color    : #1B1B98;
	border-color    : var(--main-color);
}
.check-accept-google-analytics button.ga-deny-button{
	border-color    : rgba(192,192,192,0.45);
	border-color    : var(--main-border-color);
}
.check-accept-google-analytics button.ga-accept-button::before{
	content         : '\f00c';
}
.check-accept-google-analytics button.ga-deny-button::before{
	content         : '\f00d';
}
@media screen and (max-width: 640px){
	.check-accept-google-analytics p{
		font-size   : 12px;
		line-height : 20px;
		overflow    : hidden;
	}
	.check-accept-google-analytics button{
		padding     : 8px 12px;
		font-size   : 12px;
	}
}