/*!
Theme Name: noct_base
Description: Description
Version: 1.0.0
Text Doarticle: noct_base
*/

/*
ノクト基本設定
*/

div.grecaptcha-badge{
	bottom: 10px !important;
	z-index: 2147200000;
}

form.post-password-form{
	& p{
		text-align: left;
	}
}


/************************************
** article設定）
************************************/
article{
	overflow-wrap: break-word;
	
	& section{
		padding: var(--padding-base9) 0;
	}

	& p{
		font-size: 16px;
		text-align: justify;
		text-justify: inter-ideograph;
		margin: 0 0 1.6em 0;
	}
	& hr{
		margin: 4em 0;
	}
	
	& dl {
		margin: 0 0 1.6em 0;
		list-style: none;
	}
	& dd {
		margin-left: 2.4em;
	}
	& ul,
	& ol {
		margin: 0 0 1.6em 0;
		padding-left: 1.6em;
		list-style: none;
	}
	& ul li,
	& ol li{
		margin-bottom: 1.6em;
	}
	
	& ul li {
		list-style-type: disc;
		list-style-position: outside;
	}
	& ol li{
		list-style: decimal;
		list-style-position: outside;
	}
	& table ul li,
	& table ol li{
		margin-left: 0;
	}
	& ul li:last-child,
	& ol li:last-child {
		margin-bottom: 0;
	}
	& ul ul,
	& ul ol,
	& ol ul,
	& ol ol{
		padding-left: 1.5em;
	}
	
	& div.sns__container + blockquote,
	& p + ul.flex-list,
	& div + img,
	& div + picture,
	& div + p,
	& p + div,
	& p + h2,
	& ul + h2,
	& ol + h2,
	& table + h2,
	& div + h2,
	& pre + h2,
	& blockquote + h2,
	& img + h2,
	& picture + h2,
	& noscript + h2,
	& iframe + h2,
	& script + h2,
	& ul + ins,
	& ol + ins,
	& p + ins,
	& table + ins,
	& div + ins,
	& pre + ins,
	& blockquote + ins,
	& img + ins,
	& picture + ins,
	& iframe + ins {
		margin-top: 4em;
	}
	& div.ez-toc-container + h2{
		margin-top: 6em;
	}
	
	& blockquote + img,
	& blockquote + picture,
	& script + ul,
	& script + ol,
	& script + table,
	& script + h3,
	& script + h4,
	& script + h5,
	& script + div,
	& p + ul,
	& p + ol,
	& p + table,
	& p + h3,
	& pre + ul,
	& pre + ol,
	& ul + h3,
	& ol + h3,
	& table + h3,
	& div + h3,
	& pre + h3,
	& blockquote + h3,
	& img + h3,
	& picture + h3,
	& noscript + h3,
	& p + h4,
	& ul + h4,
	& ol + h4,
	& table + h4,
	& div + h4,
	& pre + h4,
	& blockquote + h4,
	& img + h4,
	& picture + h4,
	& noscript + h4,
	& p + h5,
	& ul + h5,
	& ol + h5,
	& table + h5,
	& div + h5,
	& pre + h5,
	& blockquote + h5,
	& img + h5,
	& picture + h5,
	& noscript + h5 {
		margin-top: 2.4em;
	}
	& code + p,
	& pre + p,
	& p + img,
	& p + picture {
		margin-top: 1.6em;
	}
	& img {
		display: block;
		max-width: 100%;
		height: auto;
		margin: 0 auto 1.6em auto;
	}

	& figure{
		margin: 0;
	}

	& section.post-content{
		& img{
			display: block;
			max-width: 100%;
			max-height: 500px;
			width: auto;
			height: auto;
			margin: 0 0 1.6em 0;
		}
	}
	
	& iframe{
		margin: 0 0 1.6em 0;
	}

	div.contact-form{
		& table{
			& th{
				padding-right: 40px;
				text-align: left;
			}
		}
	}
}


article p:last-child,
article div:last-child,
article ul:last-child,
article ol:last-child,
article dl:last-child,
article ul li:last-child,
article ol li:last-child,
article dl li:last-child,
article table:last-child {
	margin-bottom: 0;
}

.margin-top-0{
	margin-top: 0;
}

/************************************
** sns
************************************/
p.sns__title{
	margin: 6em 0 1em 0;
	text-align: center;
	font-weight: bold;
}
.sns__container {
    display: flex;
	margin: 0;
	justify-content: center;
}
.sns__container:first-child {
	margin-bottom: 4em;
}

.sns__container a {
    width: 100%;
    margin: 0 5px;
    text-align: center;
    color: #fff;
    padding: 0.5rem 0;
	border-radius: 5px;
	text-decoration: none;

	&::before{
		font-family: FontAwesome;
		font-size: 21px;
		color: #fff;
	}
	
	&:hover {
	    opacity: 0.6;
	}
}

.sns__twitter {
    background: #000;
	
	&::before{
		content: "\e61b";
	}
}

.sns__facebook {
    background: #3b5998;

	&::before{
		content: "\f09a";
	}
}

.sns__line {
    background: #1dcd00;

	&::before{
		content: "\f3c0";
	}
}

.sns__hatena {
    background: #00a5de;

	&::before{
		content: "B!";
		font-weight: bold;
	}
}
  
/************************************
** サイドメニュー設定）
************************************/
#overlay {
    opacity: 0;
    transition: opacity 0.3s;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.3);
	z-index: 2147300000;
    pointer-events: none;
    display: none;
}

body.overlay #overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
}
#secondary-menu-bt{
	position: fixed;
    display: none;
    top: 0;
    right: 0;
    width: var(--body-top-padding);
    height: var(--body-top-padding);
    z-index: 2147400000;
    line-height: var(--body-top-padding);
    text-align: center;
    font-family: FontAwesome;
    transition: all 0.3s ease-in;
    overflow: hidden;
    background-color: var(--color-menubt-bg);
    color: var(--color-menubt-font);
}
#secondary-menu-bt:before {
	content: "\f0c9";
}
#secondary-menu-bt.close {
	right: 307px;
	width: 40px;
	height: 40px;
	margin-top: 20px;
	border-radius: 50%;
	background: var(--color-menubt-bg);
	color: var(--color-menubt-font);
	line-height: 40px;
}
#secondary-menu-bt.close:before {
	content: "\f00d";
}

#secondary-menu{
	display: block;
	position: fixed;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    box-sizing: border-box;
	background-color: #fff;
	z-index: 2147400000;
	transition: width 0.3s;
	overflow: hidden;

	& div.secondary-menu{
		width: 302px;
		height: 100%;
		padding: 1em;
		overflow: auto;
		box-sizing: border-box;
		transition: transform 0.3s;
		transform: translateX(100%);

		& ul{
			
			padding: 0 0 1em 1em;

			& li{

				& a{
					display: block;
					margin: 0 0 0.5em 0;
					font-family: var(--fontfamily-head);
					font-weight: var(--fontweight-head);
					color: #222;
					text-decoration: none;
					transition: transform 0.3s;
				}
				& a:hover{
					transform: translateX(1em);
				}
				& a:before {
					content: "\f138";
					margin-right: 0.25em;
					font-size: 12px;
					font-family: FontAwesome;
				}
			}
		}

		& a.bana{
            position: static;
            display: block;
            width: 90%;
            height: 0;
            padding: 45% 0 0 0;
            margin: 5%;
            background-color: #fff;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            box-sizing: border-box;
            opacity: 1;
            border-bottom: 1px solid #eee;
			user-select: none;
        }
	}
}
#secondary-menu.open{
	width: 302px;
	
	& div.secondary-menu{
		transform: translateX(0);
	}
}
@media only screen and (max-width: 1000px) {
	#secondary-menu-bt{
		display: block;
	}
}


/************************************
** イレギュラーclass設定）
************************************/
span.supplement{
	font-size: 12px;
	color: #333;
}

/************************************
** テーブル設定）
************************************/
.scrollable-table{
	overflow-x: auto;
	margin: 0 0 2.4em 0;
	padding: 0 0 10px 0;
	overflow: auto;

	& table{
		width: 100%;
		min-width: 100%;
		margin: 0;
		table-layout: initial;
	}
}
div.scrollhint{
	position: relative;
}
div.scrollhint > span{
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.15) 80%, rgba(0, 0, 0, 0.4) 100%);
    z-index: 1000;
}
div.scrollhint > span::before{
	position: absolute;
	top: 1em;
	right: 50px;
	content: "\f0a6";
	display: block;
	width: 100px;
	height: 100px;
	margin: auto;
	line-height: 100px;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	font-family: FontAwesome;
	text-align: center;
	font-size: 42px;
	animation: flick 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	overflow: hidden;
}
div.scrollhint > span::after{
	content: "ドラッグで\Aスクロール\Aできます";	
    position: absolute;
	top: 34px;
	right: 50px;
	display: block;
	width: 100px;
    padding: 26px 0 0 0;
    margin: 0 auto;
	font-size: 13px;
	color: #fff;
    text-align: center;
    white-space: pre;
    font-family: a-otf-ud-shin-go-pr6n, sans-serif;
    font-weight: 300;
    font-style: normal;
}
@keyframes flick {
	0%{
		text-indent: 4em;
	}
	40%{
		text-indent: 0;
	}
	60%{
		text-indent: 0;
	}
	100%{
		text-indent: -4em;
	}
}

table {
	width: 100%;
	margin: 0 0 2.4em 0;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	text-overflow: ellipsis;
	word-break: normal;
	border: 1px solid #ddd;
}
table.graph-table{
	& td,th{
		font-size: 80%;
	}
}
table th,
table td {
	position: relative;
	padding: 1em;
	border: none;
	border-right: 1px solid #ddd;
	font-style: normal;
	box-sizing: border-box;
}
table th.text-center,
table td.text-center{
	text-align: center;
	border-right: none;
}

table tr {
	border-bottom: 1px solid #ddd;
}
table th {
	background-color: var(--color-table);
	color: var(--color-table-font);
	font-weight: 600;
	line-height: 1.3;
}
table th span.required{
	position: absolute;
    top: 0;
    right: 1em;
    bottom: 0;
    height: 1em;
    margin: auto;
    background: #b54030;
    display: block;
    color: #fff;
    font-weight: 500;
	font-size: 14px;
    line-height: 1;
    padding: 0.3em 1em 0.5em;
    border-radius: 2em 2em 0 2em;
}
table th span.any{
	position: absolute;
    top: 0;
    right: 1em;
    bottom: 0;
    height: 1em;
    margin: auto;
    background: #696969;
    display: block;
    color: #fff;
    font-weight: 500;
	font-size: 14px;
    line-height: 1;
    padding: 0.3em 1em 0.5em;
    border-radius: 2em 2em 0 2em;
}
table td {
	font-weight: 500;
	background-color: #fff;
}
table tr:last-child,
table td:last-child {
	border: none;
}
article table td ul li,
article table td ol li {
	margin-bottom: 1em;
}

section.post-content table:not(.graph-table) thead{
	display: none;
}
section.post-content :not(.scrollable-table) table tr td:first-child{	
	width: 30%;
	background-color: var(--color-table);
	color: var(--color-table-font);
	font-weight: 600;
	line-height: 1.3;
}

div.scrollhint{
	position: relative;
}
div.scrollhint > span{
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 60%, rgba(0, 0, 0, 0.2) 100%);
}
div.scrollhint > span::before{
	position: absolute;
	top: 1em;
	left: 0;
	right: 0;
	content: "\f0a6";
	display: block;
	width: 100px;
	height: 100px;
	margin: auto;
	line-height: 100px;
	border-radius: 10px;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	font-family: FontAwesome;
	text-align: center;
	font-size: 42px;
	animation: flick 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	overflow: hidden;
}
div.scrollhint > span::after{
	content: "スクロール\Aできます";	
    position: absolute;
	top: 42px;
	left: 0;
	right: 0;
	
	display: block;
	width: 100px;
    padding: 26px 0 0 0;
    margin: 0 auto;
	font-size: 13px;
	color: #fff;
    text-align: center;
    white-space: pre;
    font-style: normal;
}
@keyframes flick {
	0%{
		text-indent: 4em;
	}
	40%{
		text-indent: 0;
	}
	60%{
		text-indent: 0;
	}
	100%{
		text-indent: -4em;
	}
}
@media screen and (max-width: 800px) {
	table:not(.scrollable-table table){
		& tr{
			border: none;
		}
		& th{
			display: block;
			width: 100%;
			text-align: left;
			box-sizing: border-box;
			border: none;
		}
		& td{
			display: block;
			width: 100%;
			font-size: 15px;
			box-sizing: border-box;
			border: none;
		
			& input[type="text"],
			input[type="password"],
			input[type="date"],
			input[type="datetime"],
			input[type="email"],
			input[type="number"],
			input[type="search"],
			input[type="tel"],
			input[type="time"],
			input[type="url"],
			textarea,
			select{
				box-sizing: border-box;
				color: #000;
			}
		}
	}
}
@media screen and (max-width: 800px) {
	.scrollable-table{
		& table{
			& th,
			td{
				min-width: 20ch;
			}
		}
	}
}

/************************************
** ボタン設定）
************************************/
span.h-captcha{
	margin: 0 auto 1.6em auto !important;
}
div.button-area{
	margin: 1em 0;
	text-align: center;
}
div + div.button-wrap,
div + p.form-submit{
	margin-top: 2.4em;
}
div.button-wrap,
p.form-submit{
	position: relative;
	display: block;
	width: 100%;
	max-width: 250px;
	height: 50px;
	padding: 0;
	margin: 0 auto 2.4em auto;
	text-align: center;
	border: 2px solid #222;
	z-index: 0;
	overflow: hidden;
}
p.form-submit input,
div.button-wrap input,
div.button-wrap a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	color: #222;
	text-align: center;
	line-height: 50px;
	font-size: 14px;
	font-style: normal;
	transition: all 0.5s;
	text-decoration: none;
	cursor: pointer;
}
p.form-submit::before,
p.form-submit::after,
div.button-wrap::before,
div.button-wrap::after{
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transition: all 0.5s;
	z-index: -1;
}
p.form-submit::before,
div.button-wrap::before{
	right: -50px;
	border-right: 30px solid transparent;
	border-bottom: 50px solid #000;
	transform: translateX(-100%);
}
p.form-submit::after,
div.button-wrap::after{
	left: -50px;
	border-left: 30px solid transparent;
	border-top: 50px solid #000;
	transform: translateX(100%);
}
p.form-submit:hover,
p.form-submit:hover input,
div.button-wrap:hover,
div.button-wrap:hover a,
div.button-wrap:hover input{
	color: #fff;
}
p.form-submit:hover::before,
div.button-wrap:hover::before{
	transform: translateX(-49%);
}
p.form-submit:hover::after,
div.button-wrap:hover::after{
	transform: translateX(49%);
}

/************************************
** ICON設定）
************************************/
.fa-tag::before {
	font-family: FontAwesome;
	content: "\f02b";
	padding-right: 3px;
}
.fa-home::before{
	font-family: FontAwesome;
	content: "\f015";
	padding-right: 3px;
}
.fa-folder::before {
	font-family: FontAwesome;
	content: "\f07b";
	padding-right: 3px;
}
.fa-angle-right::before {
	font-family: FontAwesome;
	content: "\f105";
	padding-right: 3px;
}
.fa-file::before {
	font-family: FontAwesome;
	content: "\f15b";
	padding-right: 3px;
}
a.cat-link,
.cat-link {
	color: #fff;
	text-decoration: none;
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 2px 6px;
	font-size: 12px;
	background-color: #333;
	border-radius: 2px;
	word-break: break-all;
	font-style: normal;
}
a.tag-link,
.tag-link{
	color: #333;
	text-decoration: none;
	display: inline-block;
	margin: 0 5px 5px 0;
	padding: 1px 5px;
	font-size: 12px;
	border: 1px solid #999;
	border-radius: 2px;
	word-break: break-all;
	font-style: normal;
}
div.search-box{
	position: relative;
}
div.search-box input::placeholder{
	color: #ccc;
}
div.search-box button.search-submit {
	position: absolute;
	right: 0;
	top: 0;
	font-size: 20px;
	cursor: pointer;
	line-height: 49px;
	border: none;
	color: #ccc;
	padding: 0 8px;
	background-color: rgba(255, 255, 255, 0);
}
div.search-box button.search-submit::before{
	content: "\f002";
	font-family: FontAwesome;
}



/************************************
** アニメーション）
************************************/
.show{
	opacity: 0;
}
.tt010ms{
	transition: transform 1s, opacity 1s;
}
.tt015ms{
	transition: transform 1.5s, opacity 1.5s;
}
.tt020ms{
	transition: transform 2s, opacity 2s;
}

.slide{
	opacity: 0;
	transform: translateY(50%);
	transition: all 1s;
}
.slide.on{
	opacity: 1;
	transform: translateY(0);
}
.slide2{
	opacity: 0;
	transform: translateX(50%);
	transition: all 1s;
}
.slide2.on{
	opacity: 1;
	transform: translateX(0);
}


/************************************
** ユーザーページ
************************************/
#author-profile{
	display: flex;
	max-width: var(--page-max-width);
	padding: var(--padding-base3);
	margin: var(--margin-base6) auto 50px auto;
	justify-content: space-between;

	& div.description{
		width: 35%;
		padding: 1em 4em 1em 1em;
		box-sizing: border-box;
		
		& h2{
			font-size: 24px;
			padding: 0;
			margin: 0 0 0.75em 0;
			line-height: 1;
		}
		
		& p{
			text-align: justify;
			text-justify: inter-ideograph;
			word-break: break-all;
		}
	}
	
	& div.photo{
		position: relative;
		width: 65%;
		height: 0;
		padding: 27.625% 0 0 0;
		flex-shrink: 0;
		overflow: hidden;
		box-shadow: 3px 5px 20px rgba(0,0,0,0.15);
	
		& img{
			position: absolute;
			top: -50%;
			left: -50%;
			right: -50%;
			bottom: -50%;
			max-width: 100%;
    		height: auto;
			margin: auto;
		}
	}
	& div.photo.top img{
		top: 0;
		bottom: initial;
	}
}
  
@media screen and (max-width: 1650px) {
	#author-profile{

		& div.description{
			width: 50%;
			padding: 1em 4em 1em 0;
		}
		& div.photo{
			width: 50%;
			padding: 28% 0 0 0;
		}
	}
}
@media screen and (max-width: 1365px) {
	#author-profile{
		align-items: center;
		
		& div.photo{
			padding: 33% 0 0 0;
		}
	}
}
@media screen and (max-width: 1200px) {
	#author-profile{
		flex-wrap: wrap;
		align-items: flex-start;

		& div.description{
			width: 100%;
			padding: 2.4em 0 0 0;
			order: 2;
		}
		& div.photo{
			width: 100%;
			padding: 42.5% 0 0 0;
			order: 1;
		}
	}
}
@media screen and (max-width: 550px) {
	#author-profile{
	
		& div.description{
			& h2{
				font-size: 24px;
			}
			& h3{
				font-size: 16px;
			}
		}
	}
}


/************************************
** iframe
************************************/
div.iframe-wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

div.iframe-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

div.iframe-wrapper a.modal-panel{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/************************************
** モーダルコンテンツ
************************************/
/*モーダルコンテンツ用*/
#modal-content{
	position: fixed;
	width:80%;
	margin:auto;
	padding:0;
	background:#fff;
	position:fixed;
	display:none ;
	z-index: 2147400000;
}
	
#modal-content .inner{
	position:relative;
	width:100%;
	padding-top:56.25%;
	overflow:hidden;
}

#modal-content .inner #player{
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	background-color: #000;
}

#modal-overlay{
	z-index: 2147300000;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba( 0,0,0, 0.75 );
}


/************************************
** ページネーション
************************************/
h2.screen-reader-text{
	display: none;
}
#main-area ul.pagenav{
	display: flex;
	padding: 16px;
	margin: var(--margin-base4);
	background: #eee;
	justify-content: space-between;

	& li{
		padding: 16px;
		background: #fff;
		width: 45%;
		flex-shrink: 0;
		transition: all 0.5s;
		box-sizing: border-box;
		line-height: 1.3;

		& a{
			display: flex;
			color: #444;
			font-style: normal;
			color: #444;
			text-decoration: none;
			align-items: center;

			& div.photo{
				position: relative;
				width: 160px;
				height: 90px;
				margin: -16px;
				border: 1px solid #fff;
				background: #f9f9f9;
				box-sizing: border-box;
				overflow: hidden;

				& img{
					position: absolute;
					top: 0;
					left: -200%;
					right: -200%;
					margin: auto;
					width: auto;
					height: 100%;
				}
			}
		}
	}

	& li.next{
		& a{
			justify-content: flex-end;

			& div.photo{
				margin-left: 16px;
			}

			& div.text{
				text-align: right;
			}

			& div.text::after{
				font-family: FontAwesome;
				content: "\f138";
				padding-right: 3px;
				margin-left: 5px;
				padding-right: 0;
			}
		}
	}

	& li.prev{
		& a{
			& div.photo{
				margin-right: 16px;
			}

			& div.text::before{
				font-family: FontAwesome;
				content: "\f137";
				padding-right: 3px;
				margin-right: 5px;
				padding-right: 0;
			}
		}

	}

	& li.prev:hover{
		transform: translateX(-16px);
		box-shadow: 0 0 25px rgba(0,0,0,0.05);
	}
	& li.next:hover{
		transform: translateX(16px);
		box-shadow: 0 0 25px rgba(0,0,0,0.05);
	}
	
	& li.blank{
		background: transparent;
	}
}

p.archive-link{
	margin: 0 0 0 0;
	text-align: right;

	& a{
		display: block;
		color: #000;
		transition: transform 1s;
	}
	& a:hover{
		transform: translateX(1em);
	}
}

@media only screen and (max-width: 1000px) {
	#main-area ul.pagenav{
		display: block;

		& li{
			width: 100%;
		}

		& li.prev{
			border-bottom: 1px dotted #999;
		}
	}
}
@media only screen and (max-width: 800px) {
	#main-area ul.pagenav{
		& li{
			& a{
				flex-wrap: wrap;

				& div.text{
					width: 100%;
					order: 2;
				}
			}
		}

		& li.prev a div.photo,
		li.next a div.photo{
			width: 100%;
			height: 0;
			margin: 0;
			padding: 44.895% 0 0 0;
			order: 1;
		}
	}
}


/************************************
** サイドバー
************************************/
#sidebar{

	& .sticky {
        position: sticky;
        top: 0;
	}
	
    > section{
        padding: 0 0 1.6em 0;
        margin: 0 0 1.6em 0;
        border-bottom: 1px dotted #999;
        flex-shrink: 0;
        box-sizing: border-box;
        font-size: 14px;
        font-style: normal;

        & h2,h3,h4,h5,h6{
            padding: 0.25em 0;
            background-color: var(--bgcolor-side-head);
            color: var(--color-side-head);
        }

		& h2{
			position: relative;
			margin: 0 0 1em 0;
			background-color: var(--bgcolor-side-head);
			color: var(--color-side-head);
		}

		& h2::before {
			position: absolute;
			content: "";
			bottom: 0;
			left: 0;
			width: 40%;
			height: 2px;
			z-index: 1;
			background: #000;
		}

		& h2::after {
			position: absolute;
			content: "";
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background: #999;
		}
    }

	> div.sticky{
        padding: 0 0 1.6em 0;
        margin: 0 0 1.6em 0;
	}

	& section.widget_categories{

		& ul{
			padding: 0.5em;
			background-color: #f9f9f9;

			& li{
				padding: 0.5em;

				& a{
					display: block;
					border-bottom: 1px dotted #eee;
					color: #000;
					text-decoration: none;
					transition: transform 1s;
				}

				& a:hover{
					transform: translateX(1em);
				}

				& a::before {
					content: "\f07b";
					margin: 0 0.25em 0 0;
					font-size: 12px;
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
				}			
			}
			& li.cat-item-53{
				display: none;
			}
		}
	}

    & section {
		> ul{
			margin-left: 0;

			& ul{
				margin-left: 1em;
			}
		}
    }
}





/************************************
** タグ
************************************/
div.tag-wrapper{
	& h3{
		border: none;
		font-size: 16px;
	}
	& ul.tag-list{
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		margin: 0 0 2.4em 0;
		border-radius: 5px;
		background-color: #ddd;
		
		& li{
			list-style: none;
			padding: 0;
			margin: 0.25em;

			& a{
				display: block;
				padding: 0.25em 1.5em;
				background-color: #fff;
				border-radius: 1.5em;
				font-size: 14px;
				color: #000;
				text-decoration: none;
				transition: transform 0.5s;
			}
			& a:hover{
				transform: translateY(2px);
			}
		}
	}
}
.tagcloud {
	display: flex;
	flex-wrap: wrap;
}
.tagcloud a {
	display: inline-block;
	padding: 3px 8px;
	margin: 2px;
	border-radius: 2px;
	background-color: #f9f9f9;
	color: #777;
	text-decoration: none;
	font-size: 12px;
	border-radius: 5px;
}
#side-area section .tagcloud a:hover {
	background-color: #333;
	transition: all 0.5s ease;
	color: #eee;
}
.tagcloud a::before{
	content: "\f02b";
	margin-right: 0.25em;
	font-family: FontAwesome;
}


/************************************
** 目次
************************************/
#toc_container{
    margin-bottom: -2.4em;
    padding: 1.6em;
	font-size: 14px;
}

#toc_container + h1,
#toc_container + h2{
	margin-top: 4em;
}


/************************************
** 新着記事
************************************/
div.sly-slider-container{
	&.maxbox-right{
		& div.sly-loop-frame{
			& ul.category-sly-list{
				& li{
					&:first-child{
						padding: 0;
					}
				}
			}
		}
	}

	&.maxbox{
		& div.sly-loop-frame{
			& ul.category-sly-list{
				padding: 0 calc(var(--font-size-p) * 4) 0 calc(var(--sly-offset));

				& li{
					padding: 0 0 0 calc(var(--font-size-p) * 4);
				}
			}
		}
	}

	&{
		& div.sly-loop-frame{
			position: relative;

			& ul.category-sly-list{
				display: flex;
				flex-wrap: nowrap;
				font-size: 12px;
				padding: 0;
				box-sizing: border-box;

				& li{
					position: relative;
					width: 35vw;
					max-width: 550px;
					padding: 0 0 0 calc(var(--font-size-p) * 4);
					margin: 0;
					list-style: none;
					flex-shrink: 0;
					
					&:first-child{
						padding: 0;
					}
					
					&.v a div.photo img{
						width: auto;
						height: 100%;
					}
					&.h a div.photo img{
						width: 100%;
						height: auto;
					}
			
					& a{
						position: relative;
						display: block;
						height: 100%;
						color: #000;
						text-decoration: none;
						background-color: #fff;
						border-radius: 10px;
						box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
						transition: box-shadow 0.5s;
			
						& div.photo{
							position: relative;
							width: 100%;
							height: 0;
							padding: 44.895% 0 0 0;
							margin: 0;
							background: #f9f9f9;
							overflow: hidden;
							border-radius: 10px 10px 0 0;
			
							& img{
								position: absolute;
								top: 0;
								left: -200%;
								right: -200%;
								bottom: 0;
								width: 100%;
								height: auto;
								margin: auto;
								transition: transform 0.5s;
							}
						}
			
						& div.text{
							position: relative;
							width: 100%;
							padding: 1.6em 1.6em 1.6em 120px;
							box-sizing: border-box;
							text-align: justify;
							text-justify: inter-ideograph;
			
							&.no_vol{
								padding-left: 1.6em;
							}
			
							& h3{
								padding: 0;
								border: none;
								font-size: 18px;
							}
							
							& h3::before{
								display: none;
							}
			
							& time{
								position: absolute;
								display: block;
								top: -30px;
								left: 10px;
								font-family: var(--fontfamily-alphabet);
								font-weight: var(--fontweight-alphabet);
								font-size: 50px;
								text-align: left;
								line-height: 1;
								font-style: italic;
								transform: rotate(-10deg);
			
								& span{
									display: block;
									margin-bottom: -0.15em;
									font-size: 60px;
									letter-spacing: 0;
								}
							}
			
							& div.vol{
								position: absolute;
								display: block;
								top: 1em;
								left: 1.6em;
								font-family: var(--fontfamily-alphabet);
								font-weight: var(--fontweight-alphabet);
								font-size: 12px;
			
								& span{
									display: block;
									font-size: 50px;
									line-height: 30px;
									font-style: italic;
									letter-spacing: -0.05em;
								}
							}
			
							& div.cat{
								display: flex;
								flex-wrap: wrap;
								font-size: 11px;
								margin: 0 0 0.5em 0;
			
								> span{
									display: block;
									padding: 0.25em 0.5em;
									margin: 0 0 2px 2px;
									border: 1px solid #333;
									background-color: #333;
									border-radius: 3px;
									color: #fff;
								}
							}
			
							& div.tag{
								display: flex;
								flex-wrap: wrap;
								font-size: 11px;
								margin: 0 0 0.5em 0;
			
								> span{
									display: block;
									padding: 0.25em 0.5em;
									margin: 0 0 2px 2px;
									border: 1px solid #999;
									border-radius: 3px;
								}
							}
			
							& div.author{
								display: block;
								position: absolute;
								top: 90px;
								left: 25px;
								width: 40px;
								height: 40px;
								border-radius: 50%;
								overflow: hidden;
				
								& img{
									width: 100%;
									height: 100%;
								}
							}
						}
			
					}
			
					& a:hover{
						box-shadow: 0 0 30px rgba(0,0,0,0.1);
					}
			
					& a:hover div.photo img{
						transform: scale(1.1);
					}
				}
			}

			& .controls {
				position: absolute;
				top: 50%;
				left: 0;
				right: 0;
				padding: 0;
				display: flex;
				justify-content: space-between;
				transform: translateY(-50%);
				pointer-events: none;

				& button {
					background: none;
					border: none;
					font-size: 24px;
					color: #eee;
					cursor: pointer;
					outline: none;
					pointer-events: all;
					transition: color 0.3s ease;
					width: 40px;
					height: 80px;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(0,0,0,0.8);
					transition: transform 0.5s;
				}

				& button.prev{
					border-radius: 0 10px 10px 0;

					&:hover{
						transform: translateX(-10px);
					}
				}

				& button.next{
					border-radius: 10px 0 0 10px;

					&:hover{
						transform: translateX(10px);
					}
				}

				& button.disabled{
					visibility: hidden;
				}
			}
		}
	}

	+ .scrollbar {
		display: block;
		width: 100%;
		height: 8px;
		margin: 2.4em auto 0 auto;
		line-height: 0;
		border-radius: 5px;
		background: #ddd;
		overflow: hidden;
		user-select: none; /* Standard syntax */
		-webkit-user-select: none; /* Safari */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		cursor: pointer;
		box-sizing: border-box;

		& .handle .mousearea {
			position: absolute;
			top: -9px;
			left: 0;
			width: 100%;
			height: 20px;
			background: none !important;
		}

		& .active {
			display: block;
		}
		& .handle {
			width: 100px;
			height: 8px;
			background: #888;
			cursor: pointer;
			border-radius: 5px;
		}
	}
}
@media only screen and (max-width: 600px) {
	div.sly-slider-container{
		&{
			& div.sly-loop-frame{	
				& ul.category-sly-list{
					flex-wrap: wrap;
					padding: 0;
			
					& li{
						width: 100%;
						padding: 0 0 2.4em 0;
						margin: 0 0 2.4em 0;
						max-width: none;
					
						&:first-child{
							padding: 0 0 2.4em 0;
						}
						
						&::after{
							position: absolute;
							bottom: -1px;
							left: 2.4em;
							width: calc(100% - 4.8em);
							height: 2px;
							background-image: linear-gradient(90deg,#999 25%,transparent 25%);
							background-position: 0 0;
							background-repeat: repeat-x;
							background-size: 8px 2px;
							content: "";
						}

						&:last-child::after{
							display: none;
						}
					}
				}

				& .controls{
					display: none;
				}
			}

			+ .scrollbar{
				display: none;
			}
		}
	}
}


/************************************
** 新着記事
************************************/
#latest-posts{
	position: relative;

	& ul.latest-posts{
		display: flex;
		flex-wrap: nowrap;
		font-size: 12px;
		justify-content: flex-start;

		& li{
			display: block;
			width: 250px;
			height: initial;
			padding: 0;
			margin: 0 1.6em;
			border-radius: 10px;
			background-color: rgba(255,255,255,0.8);
			overflow: hidden;

			& a{
				display: block;
				width: 100%;
				height: 100%;
	
				& span.post-type{
					position: relative;
					width: 100%;
					padding: 66.666% 0 0 0;
					margin: 0 0 1em 0;
					border-radius: 0;

					& span{
						position: absolute;
						top: 5px;
						right: 5px;
						bottom: auto;
						border-radius: 5px;
						writing-mode: initial;
						text-orientation: initial;
						transform: translateX(0);
					}
				}

				& span.post-date{
					padding: 0 1em;
				}
	
				& span.title{
					padding: 0 1em 1em 1em;
				}
			}

		}
	}

	& .scrollbar {
		display: block;
		width: 100%;
		height: 8px;
		padding: 0;
		margin: 2.4em auto 0 auto;
		line-height: 0;
		border-radius: 5px;
		background: #ddd;
		overflow: hidden;
		user-select: none; /* Standard syntax */
		-webkit-user-select: none; /* Safari */
		-moz-user-select: none; /* Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
		cursor: pointer;

		& .handle .mousearea {
			position: absolute;
			top: -9px;
			left: 0;
			width: 100%;
			height: 20px;
			background: none !important;
		}
	}
	& .scrollbar.active {
		display: block;
	}
	& .scrollbar .handle {
		width: 100px;
		height: 8px;
		background: #888;
		cursor: pointer;
		border-radius: 5px;
	}

	& .pages {
		width:100%;
		height:30px;
		list-style: none;
		margin: 1.6em auto 0 auto;
		padding: 0;
		text-align: center;
		z-index:5000;
		-webkit-tap-highlight-color:rgba(0,0,0,0);

		& li {
			display: inline-block;
			width: 15px;
			height: 15px;
			margin: 0 9px;
			text-indent: -999px;
			border-radius: 50%;
			cursor: pointer;
			overflow: hidden;
			background: #ddd;
		}
		& li.active {
			background: #999;
		}
	}
}


/************************************
** 新着情報
************************************/
#latest_box{
	width: 100%;
	max-width: var(--page-max-width);
    margin: 0 auto 4em auto;

	& h2{
		position: relative;
		padding: 0.5em 0.75em;
		margin: 0 0 1em 0;
		color: var(--color-side-head);
	}

	& h2::before{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 6px;
		height: 70%;
		margin: auto 0;
		border-radius: 3px;
		background-color: #222;
	}
}

ul.latest-posts{
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	font-size: 14px;
	justify-content: space-between;

	& li{
		position: relative;
		width: 49%;
		height: 6em;
		padding: 0.5em 1em 0.5em 11.5em;
		margin: 0 0 1.6em 0;
		background-color: rgba(255,255,255,0.5);
		box-sizing: border-box;
		border-radius: 3em;
		list-style: none;
		line-height: 1.35;
		flex-shrink: 0;
		justify-content: center;
		cursor: pointer;
		transition: transform 0.5s;

		& a{
			display: flex;
			width: 100%;
			height: 100%;
			align-items: flex-start;
			flex-direction: column;
			justify-content: center;
			color: var(--color-black);
			text-decoration: none;

			& span.post-type{
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				width: 9em;
				height: 6em;
				padding: 0.5em 1em 0.5em 1em;
				box-sizing: border-box;
				text-align: center;
				background-color: #f9f9f9;
				border-radius: 3em 0 0 3em;
				align-items: center;
				justify-content: center;
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;

				& span{
					position: absolute;
					top: 0;
					right: 1px;
					bottom: 0;
					display: block;
					padding: 0.25em 0.5em;
					background-color: rgba(0,0,0,5);
					border-radius: 0 5px 5px 0;
					font-size: 10px;
					font-weight: bold;
					color: #fff;
					writing-mode: vertical-rl;
					text-orientation: upright;
					transform: translateX(100%);
					z-index: 1;
				}
			}

			& span.date{
				font-size: 10px;
			}

			& span.title{
				display: block;
				font-weight: bold;
				color: var(--color-black);
				white-space: normal;
			}
		}
	}
	& li.post{
		& span.post-type{
			background-color: #bba582;

			& span{
				background-color: #9f7533;
			}
		}
	}
	& li.event{
		& span.post-type{
			background-color: #cfadb5;

			& span{
				background-color: #c14e68;
			}
		}
	}
	& li.service{
		& span.post-type{
			background-color: #8ec2c5;
			
			& span{
				background-color: #33999f;
			}
		}
	}
	& li.spot{
		& span.post-type{
			background-color: #a1bd9a;

			& span{
				background-color: #489f33;
			}
		}
	}
	& li.pressrelease{
		& span.post-type{
			background-color: #b6adcf;

			& span{
				background-color: #6b4ec1;
			}
		}
	}
}

@media only screen and (max-width: 1000px) {
	ul.latest-posts{
		font-size: 12px;
		
		& li{
			width: 100%;
		}
	}
}
@media only screen and (max-width: 600px) {
	ul.latest-posts{
		font-size: 10px;
	}
}


/************************************
** 関連記事
************************************/
#content-side{
	width: 100%;
	max-width: var(--page-max-width);
    margin: 0 auto 4em auto;
	padding: 0;

	& h2{
		position: relative;
        padding: 0.5em 0.75em;
        margin: 0 0 1em 0;
        color: var(--color-side-head);
	}

	& h2::before{
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 6px;
		height: 70%;
		margin: auto 0;
		border-radius: 3px;
		background-color: #222;
	}

    & ul.related-list{
        display: flex;
		flex-wrap: wrap;
        width: 100%;
		justify-content: space-between;

        & li{
            position: relative;
            width: 15%;
            padding: 0 0 1em 0;

			& a{
				color: #000;
				text-decoration: none;
			}

            & div.photo{
                position: relative;
                width: 100%;
                padding: 44.895% 0 0 0;
                margin: 0;
                background: #f9f9f9;
				border: 2px solid var(--color-black);
                border-radius: 10px;
                overflow: hidden;
    
                & img{
                    position: absolute;
                    top: 0;
                    left: -200%;
                    right: -200%;
                    bottom: 0;
                    width: 100%;
                    height: auto;
                    margin: auto;
                    transition: all 0.5s;
                }
            }

			& div.text{
				padding: 0.5em;
				
				& h3{
					font-size: 13px;
					line-height: 1.3;
					margin: 0 0 0.5em 0;
				}

				& time{
					font-family: var(--fontfamily-sub);
					font-weight: var(--fontweight-sub);
					font-size: 10px;
					display: block;
				}

				& time::before {
					font-family: FontAwesome;
					content: "";
					padding-right: 3px;
				}
			}

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

            & a:hover img{
                transform: scale(1.1);
            }
        }
        & li:last-child {
            margin: 0;
        }
    }

}
@media only screen and (max-width: 1300px) {
	#content-side{
	
		& ul.related-list{
	
			& li{
				width: 32%;
			}

			& li:nth-child(3n+3) {
				margin: 0;
			}
		}
	}
}
@media only screen and (max-width: 900px) {
	#content-side{
	
		& ul.related-list{
	
			& li{
				width: 49%;
			}

			& li:nth-child(3n+3) {
				margin: 0 2% 0 0;
			}

			& li:nth-child(even) {
				margin: 0;
			}
		}
	}
}

/************************************
** AdSense
************************************/
ins.adsbygoogle,
.google-auto-placed {
    margin: 0 0 2.4em 0;
}
#ad-foot{
    max-width: 1450px;
    margin: 0 auto;
	padding: var(--padding-base5);
	text-align: center;
	box-sizing: border-box;
}
#ad-contents-foot{
	margin: 1.6em 0 4em 0;
}
div.ad-wrapper{
	margin: 4em 0;
}
/************************************
** 人気記事
************************************/
section.popular-posts{
	& ul{
		& li{
			margin: 0 0 1em 0;
			border-radius: 10px;
			overflow: hidden;

			& a{
				display: flex;
				font-size: 12px;
				color: #000;
				text-decoration: none;

				& div.photo{
					position: relative;
					width: 100px;
					height: 100px;
					margin: 0;
					overflow: hidden;
					flex-shrink: 0;

					& img{
						position: absolute;
						top: 0;
						left: -200%;
						right: -200%;
						bottom: 0;
						width: auto;
						height: 100%;
						margin: auto;
						transition: all 0.5s;
					}
				}

				& div.text{
					width: calc(100% - 100px);
					padding: 0.5em 0.5em 0.5em 1em;
					background-color: #fff;
				}
			}

			& a:hover img{
				transform: scale(1.1);
			}
		}
	}
}

/************************************
** コメント
************************************/
#comments{
	padding: var(--padding-base6);
}


/************************************
** トップへ戻るボタン
************************************/
.goto-top {
	display: none;
	position: fixed;
	right: 8px;
	bottom: 91px;
	z-index: 99999;
}

.goto-top a {
	display: block;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	text-align: center;
	line-height: 40px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-menubt-bg);
	color: var(--color-menubt-font);
}
.goto-top a:hover {
	color: var(--color-menubt-bg);
	background: var(--color-menubt-font);
}
.goto-top a:before {
    content: "\f077";
	font-family: FontAwesome;
}


/************************************
** カテゴリー
************************************/
div.category-wrapper{
	margin: 0 0 1.6em 0;
}
ul.category-children-list{
	display: flex;
	flex-wrap: wrap;

	& li{	
		list-style: none;
		margin: 0.25em;

		& a{
			display: block;
			color: #000;
			text-decoration: none;
			padding: 0.25em 1em;
			background-color: #eee;
			border-radius: 1.5em;
		}

		& a::before{
			content: "\f07b";
			margin: 0 0.25em 0 0;
			font-size: 12px;
			font-family: "Font Awesome 5 Free";
			font-weight: 900;
		}
	}
}

ul.category-list{
	display: flex;
    flex-wrap: wrap;
	padding: 0;
	margin-bottom: 0;

	& li{
		position: relative;
		width: 50%;
		padding: 0 2.4em 2.4em 2.4em;
        margin: 0 0 2.4em 0;
		list-style: none;
		box-sizing: border-box;

        & a{
			position: relative;
			display: block;
			height: 100%;
            color: #000;
            text-decoration: none;
			background-color: #fff;
			border-radius: 10px;
			box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
			transition: box-shadow 0.5s;

			& div.photo{
				position: relative;
				width: 100%;
				height: 0;
				padding: 44.895% 0 0 0;
				margin: 0;
				background: #f9f9f9;
				overflow: hidden;
				border-radius: 10px 10px 0 0;

				& img{
					position: absolute;
					top: 0;
					left: -200%;
					right: -200%;
					bottom: 0;
					width: 100%;
					height: auto;
					margin: auto;
					transition: transform 0.5s;
				}
			}

			& div.text{
				position: relative;
				width: 100%;
				padding: 1.6em 1.6em 1.6em 120px;
				box-sizing: border-box;
				text-align: justify;
				text-justify: inter-ideograph;

				&.no_vol{
					padding-left: 1.6em;
				}

				& h3{
					padding: 0;
					border: none;
					font-size: 18px;
				}
				
				& h3::before{
					display: none;
				}

				& time{
					position: absolute;
					display: block;
					top: -30px;
					left: 10px;
					font-family: var(--fontfamily-alphabet);
					font-weight: var(--fontweight-alphabet);
					font-size: 50px;
					text-align: left;
					line-height: 1;
                    font-style: italic;
					transform: rotate(-10deg);

					& span{
						display: block;
						margin-bottom: -0.15em;
                        font-size: 60px;
                        letter-spacing: 0;
					}
				}

				& div.vol{
					position: absolute;
					display: block;
					top: 1em;
					left: 1.6em;
					font-family: var(--fontfamily-alphabet);
					font-weight: var(--fontweight-alphabet);
					font-size: 12px;

					& span{
						display: block;
						font-size: 50px;
						line-height: 30px;
						font-style: italic;
						letter-spacing: -0.05em;
					}
				}

				& div.cat{
					display: flex;
					flex-wrap: wrap;
					font-size: 11px;
					margin: 0 0 0.5em 0;

					> span{
						display: block;
						padding: 0.25em 0.5em;
						margin: 0 0 2px 2px;
						border: 1px solid #333;
						background-color: #333;
						border-radius: 3px;
						color: #fff;
					}
				}

				& div.tag{
					display: flex;
					flex-wrap: wrap;
					font-size: 11px;
					margin: 0 0 0.5em 0;

					> span{
						display: block;
						padding: 0.25em 0.5em;
						margin: 0 0 2px 2px;
						border: 1px solid #999;
						border-radius: 3px;
					}
				}

				& div.author{
					display: block;
					position: absolute;
					top: 90px;
					left: 25px;
					width: 40px;
					height: 40px;
					border-radius: 50%;
					overflow: hidden;
	
					& img{
						width: 100%;
						height: 100%;
					}
				}
			}

        }

        & a:hover{
			box-shadow: 0 0 30px rgba(0,0,0,0.1);
		}

        & a:hover div.photo img{
            transform: scale(1.1);
        }
	}
	
	& li:last-child{
		margin-bottom: 2.4em;
	}

	& li::before{
		position: absolute;
		top: 0;
		right: -1px;
		width: 2px;
		height: calc(100% - 2.4em);
		background-image: linear-gradient(0deg,#999 25%,transparent 25%);
		background-position: 0 0;
		background-repeat: repeat-y;
		background-size: 2px 8px;
		content: "";
	}
	& li::after{
		position: absolute;
		bottom: -1px;
		left: 2.4em;
		width: calc(100% - 4.8em);
		height: 2px;
		background-image: linear-gradient(90deg,#999 25%,transparent 25%);
		background-position: 0 0;
		background-repeat: repeat-x;
		background-size: 8px 2px;
		content: "";
	}
	& li:nth-child(odd){
		padding-left: 0;
	}
	& li:nth-child(even){
		padding-right: 0;
	}
	& li:nth-child(2n)::before{
		display: none;
	}
	& li:nth-last-child(-n+2)::after{
		display: none;
	}
	& li.now{
		& time::after {
			content: "開催中";
            display: block;
            padding: 0.3em;
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            background-color: #000;
            color: #fff;
            width: 3.5em;
            text-align: center;
            line-height: 1;
		}
	}
	& li.now.recruitment{
		& time::after {
			content: "募集中";
		}
	}
}
ul.category-list.event{
	& li{
        & a{
			& div.photo{
				padding: 100% 0 0 0;
				background-color: #ede9e5;

				& img{
					transform: scale(0.9);
				}
			}
			& div.time{
				margin: 0 0 1em 0;
				line-height: 1.3;
				text-align: left;
				
				& span{
					display: block;
				}
			}
		}
		& a:hover div.photo img{
            transform: scale(1);
        }
	}
	& li.v a div.photo img{
		width: auto;
		height: 100%;
	}
	& li.h a div.photo img{
		width: 100%;
		height: auto;
	}
}

ul.category-list + div.button-wrap{
	margin-bottom: 4em;
}
ul.category-list + div.button-wrap:last-child{
	margin-bottom: 1.6em;
}

@media only screen and (max-width: 1400px) {
	ul.category-list{
	
		& li{
			width: 50%;
		}
	}
}
@media only screen and (max-width: 800px) {
	ul.category-list{
	
		& li{
			width: 100%;
			padding: 0 0 2.4em 0;
		}
		& li::before{
			display: none;
		}
		& li:nth-child(2n)::before{
			display: none;
		}
		& li:nth-last-child(-n+2)::after{
			display: block;
		}
		& li:last-child::after{
			display: none;
		}
	}
}

p.archive-link{
	margin: 2.4em 0 0 0;
	text-align: right;

	& a{
		display: block;
		color: #000;
		transition: transform 1s;
	}
	& a:hover{
		transform: translateX(1em);
	}
}


/************************************
** faq
************************************/
article #faq{
	& div.wrapper{
		> ul{
			max-width: var(--page-max-width);
			padding: 0;
			margin: 0 auto 4em auto;

			& li{
				list-style: none;
			}
		}

		& h3{
			margin-top: 2.4em;
			font-family: var(--fontfamily-sub);
			font-weight: var(--fontweight-sub);
		}

		& .toggle{
			position: relative;
			min-height: 80px;
			padding: 1.6em 1.6em 1.6em 0.5em;
			margin: 0 0 1.6em 0;
			border: 2px solid #000;
			cursor: pointer;
			box-sizing: border-box;

			& h4{
				position: relative;
				padding: 0 24px 0 30px;
				margin: 0;
				color: #000;
				line-height: 24px;
				font-size: 18px;
				font-weight: 600;
				text-align: left;
				font-family: var(--fontfamily-sub);
				font-weight: var(--fontweight-sub);
			}
			& h4::before {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				width: auto;
				height: auto;
				content: "Q";
				vertical-align: text-bottom;
				font-weight: 700;
				background: none;
			}

			& strong,
			h4{
				display: block;
				font-size: 18px;
				text-align: left;
			}
			& p{
				margin: 0 0 1em 0;
				text-align: justify;
				text-justify: inter-ideograph;
			}
			& p:last-child{
				margin: 0;
			}
			& p + ul,
			p + ol,
			p + h4{
				margin-top: 1.6em;
			}

			& .toggle_box{
				position: relative;
				display: none;
				padding: 1.6em 0 0 30px;
				cursor: auto;
			}
			& .toggle_box::before {
				position: absolute;
				top: 2.4em;
				left: 2px;
				display: block;
				content: "A";
				vertical-align: text-bottom;
				font-size: 18px;
				font-weight: 700;
				line-height: 1;
			}
		}
		& .toggle:last-child{
			margin-bottom: 0;
		}
		
		
		& .toggle::after{
			position: absolute;
			top: 40px;
			right: 21px;
			display: block;
			content: "";
			width: 18px;
			height: 0;
			margin: 0;
			border-top: 2px solid #000;
			transition: 0.5s all;
		}
		& .toggle::before{
			position: absolute;
			top: 40px;
			right: 21px;
			display: block;
			content: "";
			width: 18px;
			height: 0;
			margin: 0;
			transform: rotate(90deg);
			border-top: 2px solid #000;
			transition: 0.5s all;
		}
		& .toggle.active::before,
		& .toggle.active::after{
			transform: rotate(180deg);
		}
	}
}


/************************************
** マイリスト
************************************/
div.myfavorite{
	position: relative;
	width: 50px;
	height: 50px;
	justify-content: center;
	align-items: center;

	& button.bookmark{
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		width: 50px;
		height: 50px;
		background-color: #ccc;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		z-index: 1;
		font-size: 20px;
	}

	& button.bookmark::before{
		content: "\f004";
		font-family: FontAwesome;
		color: #fff;
	}

	& div.balloon{
		position: absolute;
		top: 0;
		right: 25px;
		bottom: 0;
		margin: auto 0;
		width: 0;
		padding: 0.5em 0;
		border-radius: 0 1.5em 1.5em 0;
		transform: translateX(100%);
		background: #fff;
		font-weight: bold;
		color: #4f483c;
		white-space: nowrap;
		line-height: 1.1;
		overflow: hidden;
		z-index: 0;
		transition: all 0.25s;

		& span{
			display: block;
			font-size: 12px;
		}
	}
}
div.myfavorite.post{
	margin: 1em auto 0 auto;
	transform: translateX(-90px);

	&.active{
		& button.bookmark{
			background-color: #ff4d4d;
		}
	}

	& button.bookmark{
		background-color: #b99a50;
	}

	& div.balloon{
		width: 9em;
		padding: 0.5em 1em 0.5em 32px;
	}
}
div.myfavorite.foot{
	position: fixed;
	left: 8px;
	bottom: 91px;
	display: none;
	z-index: 2147400000;
	
	& button.bookmark{
		background-color: #b99a50;
	}
}
div.myfavorite.active{
	& button.bookmark{
		background-color: #ff4d4d;
	}
	& button.bookmark::before{
		content: "\e4ff";
		color: #fff;
	}
	& div.balloon{
		width: 9em;
		padding: 0.5em 1em 0.5em 32px;
	}
}
@media only screen and (max-width: 1000px) {
	div.myfavorite.post {
		margin: 28px auto -28px auto;
	}
}



/************************************
** マイリスト・閲覧履歴
************************************/
ul.favorite-list,
ul.recently-viewed-list{
	padding: 0;

	& li{
		position: relative;
		display: flex;
		width: 100%;
		margin-bottom: 0 0 1.6em 0;
		list-style: none;
		align-content: center;
		background-color: #fff;
		border-radius: 10px;

		& div.photo{
			position: relative;
			width: 30%;
			height: 0;
			padding: 20% 0 0 0;
			margin: 0 1em 0 0;
			background-color: #e0e0e0;
			overflow: hidden;
			flex-shrink: 0;

			& img{
				position: absolute;
				top: 0;
				left: -200%;
				right: -200%;
				bottom: 0;
				width: 100%;
				height: auto;
				margin: auto;
				transition: transform 0.5s;
			}
		}

		& div.text{
			display: flex;
			align-items: center;

			& a{
				color: var(--color-black);
				text-decoration: none;
			}
			& h3{
				padding: 0.5em 40px 0.5em 0;
                margin: 0 0 .5em 0;
				border: none;
                font-size: 21px;
                font-family: var(--fontfamily-article);
				line-height: 1.1;
			}
			& h3::before{
				content: none;
			}
			& p{
				margin: 0;
				text-align: justify;
				text-justify: inter-ideograph;
			}
		}

		& div.myfavorite{
			position: absolute;
			top: 0;
			right: -10px;
			bottom: 0;
			margin: auto 0;
			z-index: 1;

			& button.bookmark{
				border: 5px solid #fff;
			}
		}
	}

	& li:hover{

		& div.photo{

			& img{
				transform: scale(0.9);
			}
		}
	}

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

	& li.h{
		& div.photo{
			& img{
				width: 100%;
				height: auto;
			}
		}
	}
	& li.v{
		& div.photo{
			& img{
				width: auto;
				height: 100%;
			}
		}
	}
}
@media screen and (max-width: 800px) {
	ul.favorite-list,
	ul.recently-viewed-list{
	
		& li{
	
			& div.text{
				& h3{
					font-size: 16px;
					text-align: justify;
				}
			}
		}
	}
}
@media screen and (max-width: 600px) {
	ul.favorite-list,
	ul.recently-viewed-list{
	
		& li{
	
			& div.text{
				& h3{
					font-size: 13px;
				}
			}
		}
	}
}


/************************************
** ジオコード付き関連アイテム
************************************/
div.geocode-box,
div.geocode-box-nearby{
	margin: 0 0 2.4em 0;

	> p{
		padding: 1em;
		margin: 0;
		font-size: 14px;
		font-weight: bold;
		text-align: center;
	}

	& ul{
		display: flex;
		padding: 0;
		margin: 0;
		justify-content: space-evenly;

		& li{
			position: relative;
			display: flex;
			width: 32%;
			margin-bottom: 0 0 1.6em 0;
			list-style: none;
			align-content: center;
			background-color: #fff;
			border-radius: 10px;
			transition: transform 0.5s;

			& a{
				display: block;
				width: 100%;
				height: 100%;
				flex-direction: column;
				justify-content: flex-start;
				color: var(--color-black);
				text-decoration: none;
	
				& div.photo{
					position: relative;
					width: 100%;
					height: 0;
					padding: 66.66% 0 0 0;
					margin: 0 1em 0 0;
					background-color: #e0e0e0;
					border-radius: 10px 10px 0 0;
					overflow: hidden;
					flex-shrink: 0;
		
					& img{
						position: absolute;
						top: 0;
						left: -200%;
						right: -200%;
						bottom: 0;
						width: 100%;
						height: auto;
						margin: auto;
						transition: transform 0.5s;
					}

					& i{
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						display: flex;
						align-items: center;
						justify-content: center;
						font-family: 'FontAwesome';
						font-size: 60px;
					}
				}
		
				& div.text{
					margin: 0.75em;
                    font-size: 11px;
                    text-align: center;
                    line-height: 1.35;

					& span.title{
						display: block;
					}

					& div.distance{
						position: absolute;
						top: -20px;
						left: -20px;
						width: 90px;
						height: 90px;
						border-radius: 100%;
						background-color: rgba(250, 250, 248, 0.9);
                        color: var(--color-black);
						transform: scale(0.8) rotate(-10deg);

						> span{						
							position: absolute;
							left: 0;
							top: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							height: 40px;
							font-size: 13px;
							text-align: center;
							line-height: 1.3;

							& span{
								display: block;
								font-size: 21px;
								font-family: var(--fontfamily-sub);
								font-weight: var(--fontweight-sub);
								line-height: 1;
								text-align: center;
								flex-shrink: 0;
								white-space: nowrap;
							}
						}
					}
				}
			}

			&.item1{
				width: 100%;
				max-width: 600px;

				& a{
					display: flex;
					flex-direction: row;
					align-items: center;
	
					& div.photo{
						width: 35%;
						padding: 23.33% 0 0 0;
						border-radius: 10px 0 0 10px;
					}

					& div.text{
						width: 60%;
                    	font-size: 14px;
					}
				}
			}
		}

		& li.station{
			& div.photo{
				background-color: #768ab9;
			}
			& i{
				color: #1a2a4f;
			}
		}

		& li.highway{
			& div.photo{
				background-color: #76b9b0;
			}
			& i{
				color: #1a4f46;
			}
		}

		& li.roadside{
			& div.photo{
				background-color: #b4b976;
			}
			& i{
				color: #444f1a;
			}
		}

		& li:hover{
			transform: scale(0.95);
		}

		& li.h{
			& a{
				& div.photo{
					& img{
						width: 100%;
						height: auto;
					}
				}
			}
		}
		& li.v{
			& a{
				& div.photo{
					& img{
						width: auto;
						height: 100%;
					}
				}
			}
		}

		& li:last-child{
			margin: 0 0 1.6em 0;
		}
	}
}
div.geocode-box-nearby{
	& ul{
		flex-wrap: wrap;
		justify-content: flex-start;

		& li:nth-child(3n+2){
			margin-left: 2%;
			margin-right: 2%;
		}
	}
}
div.geocode-box-nearby{
	& ul.hotel-list{
		display: block;

		& li{
			width: 100%;
		}
		& li:nth-child(3n+2){
			margin: 0 0 1.6em 0;
		}
		& li:hover{
			transform: none;
		}
	}
}
@media screen and (max-width: 600px) {
	div.geocode-box,
	div.geocode-box-nearby{
		& ul{
			& li{
				& a{
					& div.text{
	
						& div.distance{							
							top: -35px;
							left: -35px;
							transform: scale(0.5) rotate(-10deg);
						}
					}
				}
			}
		}
	}
}


/************************************
** スライダー
************************************/
.sly-frame {
    position: relative;
	padding: 0 0 50px 0;
	margin: 0 0 2.4em 0;
    overflow: hidden;

	.sly-slidee {
		display: flex;
		padding: 0;
		margin: 0;
		list-style: none;
		background-color: #e0e0e0;

		& li {
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 1.6em;
			margin: 0;
			flex-shrink: 0;
			box-sizing: border-box;

			& div.photo{
				position: relative;
				width: 100%;
				height: 0;
				padding: 66.666% 0 0 0;
				overflow: hidden;
				
				& img{
					position: absolute;
					top: 0;
					left: -200%;
					right: -200%;
					bottom: 0;
					width: 100%;
					height: auto;
					margin: auto;
					transition: transform 0.5s;
				}
			}

			& div.text{
				padding: 1.6em 0 0 0;

				& blockquote{
					margin: 0;
					background-color: rgba(255, 255, 255, 0.5);
					font-size: 12px;
				}
			}
		}

		& li.v div.photo img{
			width: auto;
			height: 100%;
		}
		& li.h div.photo img{
			width: 100%;
			height: auto;
		}
	}

	& .controls {
		position: absolute;
		top: 50%;
		width: 100%;
		display: flex;
		justify-content: space-between;
		transform: translateY(-50%);

		& .btn {
			background: none;
			border: none;
			color: white;
			font-size: 2em;
			cursor: pointer;
		}

		& .btn.disabled {
			visibility: hidden;
		}
	}
	
	& ul.pages {
		position: absolute;
		bottom: 25px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		padding: 0;
		margin: 0;
	
		& li {
			width: 10px;
			height: 10px;
			background: white;
			border-radius: 50%;
			margin: 0 5px;
			cursor: pointer;
			text-indent: -9999px;
			overflow: hidden;
		}

		& li.active {
			background: gray;
		}
	}
}


/************************************
** youtubeコンテナ
************************************/
div.youtube-container,
div.video-container{
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 0 2.4em 0;
	aspect-ratio: 16 / 9;

	& a{
		display: flex;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		z-index: 10;

		&::before {
			display: flex;
			content: "\f04b";
			font-family: 'FontAwesome';
			background: rgba(0,0,0,0.5);
			color: #fff;
			border: none;
			border-radius: 50%;
			width: 60px;
			height: 60px;
			padding-left: 5px;
			font-size: 24px;
			cursor: pointer;
			justify-content: center;
			align-items: center;
    		box-sizing: border-box;
		}

		& button.mute-toggle{
			position: absolute;
			right: 8px;
		  	bottom: 8px;
			padding: 0;
			background: transparent;
			border: none;
			cursor: pointer;
			font-size: 24px;
			z-index: 100;
		}
	}

	&.vertical {
		background-color: #000;

		& .video-bg{
			position: absolute;
			top: 50%; left: 50%;
			width: 100%;
			height: auto;
			aspect-ratio: 16/9;
			transform: translate(-50%, -50%);
			background-image: var(--thumb-url);
			background-size: cover;
			background-position: center;
			opacity: 0.5;
			z-index: 1;
		}
		& .video-foreground {
			position: absolute;
			top: 50%; left: 50%;
			width: auto;
			height: 100%;
			aspect-ratio: 9/16;
			transform: translate(-50%, -50%);
			background-image: var(--thumb-url);
			background-size: cover;
			background-position: center;
			z-index: 1;
		}
	}
}


/************************************
** youtubeリスト
************************************/
ul.youtube-list{
	display: flex;
	padding: 0;
	justify-content: space-between;
	flex-wrap: wrap;

	& li{
		width: 49%;
		margin-bottom: 0 0 1.6em 0;
		list-style: none;
		align-content: flex-start;
		background-color: rgba(250,250,250,0.3);
		overflow: hidden;

		& a{
			color: var(--color-black);
			text-decoration: none;

			& div.photo{
				position: relative;
				width: 100%;
				height: 0;
				padding: 56.25% 0 0 0;
				margin: 0 1.6em 0 0;
				border-radius: 10px;
				background-color: #000;
				overflow: hidden;
				flex-shrink: 0;

				& img{
					position: absolute;
					top: 0;
					left: -200%;
					right: -200%;
					bottom: 0;
					width: 100%;
					height: auto;
					margin: auto;
					transition: all 0.5s;
					opacity: 1;
				}
			}

			& div.photo::after {
                font-size: 3em;
                position: absolute;
                top: 0;
                left: 0;
                display: flex;
                width: 2em;
                height: 2em;
                border-radius: 100%;
                background-color: rgba(255, 255, 255, 0.8);
                justify-content: center;
                align-items: center;
				content: '\f04b';
                font-family: 'FontAwesome';
                font-weight: 900;
                color: rgba(0, 0, 0, 0.7);
                pointer-events: none;
                transition: all 0.5s;
                right: 0;
                bottom: 0;
                margin: auto;
                font-size: 30px;
                text-indent: 0.2em;
				opacity: 0;
			}

			> p{
				padding: 1em;
				margin: 0 0 0.5em 0;
				font-size: 14px;
				font-family: var(--fontfamily-article);
				font-weight: 600;
				text-align: justify;
				text-justify: inter-ideograph;
			}
		}

		& div.text{
			& h3{
				padding: 1em;
				margin: 0 0 0.5em 0;
				font-size: 14px;
				font-family: var(--fontfamily-article);
				font-weight: 400;
				text-align: justify;
				text-justify: inter-ideograph;
			}
			& h3::before{
				content: none;
			}
		}

		& a:hover{
			& div.photo{
				& img{
					opacity: 0.35;
				}
			}
			& div.photo::after {
				opacity: 1;
			}
		}
	}

	& li:last-child{
		margin-bottom: 1.6em;
	}
}

div.youtube-box{
	max-width: 600px;
	margin: 0 auto 1.6em auto;
	padding: 0;

	& a{
		color: var(--color-black);
		text-decoration: none;

		& div.photo{
			position: relative;
			width: 100%;
			height: 0;
			padding: 56.25% 0 0 0;
			margin: 0 1.6em 0 0;
			border-radius: 10px;
			background-color: #000;
			overflow: hidden;
			flex-shrink: 0;

			& img{
				position: absolute;
				top: 0;
				left: -200%;
				right: -200%;
				bottom: 0;
				width: 100%;
				height: auto;
				margin: auto;
				transition: all 0.5s;
				opacity: 1;
			}
		}

		& div.photo::after {
			font-size: 3em;
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			width: 2em;
			height: 2em;
			border-radius: 100%;
			background-color: rgba(255, 255, 255, 0.8);
			justify-content: center;
			align-items: center;
			content: '\f04b';
			font-family: 'FontAwesome';
			font-weight: 900;
			color: rgba(0, 0, 0, 0.7);
			pointer-events: none;
			transition: all 0.5s;
			right: 0;
			bottom: 0;
			margin: auto;
			font-size: 30px;
			text-indent: 0.2em;
			opacity: 0;
		}

		> p{
			padding: 1em;
			margin: 0 0 0.5em 0;
			font-size: 14px;
			font-family: var(--fontfamily-article);
			font-weight: 600;
			text-align: justify;
			text-justify: inter-ideograph;
		}
	}

	& div.text{
		& h3{
			padding: 1em;
			margin: 0 0 0.5em 0;
			font-size: 14px;
			font-family: var(--fontfamily-article);
			font-weight: 400;
			text-align: justify;
			text-justify: inter-ideograph;
		}
		& h3::before{
			content: none;
		}
	}

	& a:hover{
		& div.photo{
			& img{
				opacity: 0.35;
			}
		}
		& div.photo::after {
			opacity: 1;
		}
	}
}


/************************************
** インスタ
************************************/
#insta-gallery{
	& div.insta-header{
		> a{
			display: flex;
			align-items: center;
			background-color: var(--insta-bg-color);
			padding: var(--insta-padding) var(--insta-padding) 5px var(--insta-padding);
			color: var(--insta-font-color);
			text-decoration: none;

			& img{
				max-width: 80px;
				margin: 0 1em 0 0;
			}
		}
	}

	& div.insta-sly-frame{
		position: relative;
		width: 100%;
		padding: 1em 0 0 0;
		background-color: var(--insta-bg-color);
		
		> ul{
			display: flex;
			padding: 0;
			margin: 0;
			gap: var(--gap-5px);

			&.aspect1_1 li a{
				aspect-ratio: 1 / 1;
			}
			&.aspect3_4 li a{
				aspect-ratio: 3 / 4;
			}
			&.aspect4_5 li a{
				aspect-ratio: 4 / 5;
			}

			& li{
				display: block;
				width: 250px;
				margin: 0;
				list-style: none;
				background-color: #f0f0f0;
				border-radius: 5px;
				box-sizing: border-box;
				flex-shrink: 0;

				& a{
					position: relative;
					display: block;
					width: 100%;
					height: auto;
					overflow: hidden;

					& img{
						position: absolute;
						top: 0;
						left: -200%;
						right: -200%;
						bottom: 0;
						margin: auto;
						width: 100%;
						height: auto;
					}
				}
			}
		}

		& .controls {
			position: absolute;
			top: 50%;
			left: 0;
			right: 0;
			padding: 0;
			display: flex;
			justify-content: space-between;
			transform: translateY(-50%);
			pointer-events: none;

			& button {
				background: none;
				border: none;
				font-size: 24px;
				color: #eee;
				cursor: pointer;
				outline: none;
				pointer-events: all;
				transition: color 0.3s ease;
				width: 40px;
				height: 80px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0,0,0,0.8);
				transition: transform 0.5s;
			}

			& button.prev{
				border-radius: 0 10px 10px 0;

				&:hover{
					transform: translateX(-10px);
				}
			}

			& button.next{
				border-radius: 10px 0 0 10px;

				&:hover{
					transform: translateX(10px);
				}
			}

			& button.disabled{
				visibility: hidden;
			}
		}

		& .scrollbar {
			display: block;
			width: 100%;
			height: 8px;
			margin: 8px auto 0 auto;
			line-height: 0;
			border-radius: 5px;
			background: #ddd;
			overflow: hidden;
			user-select: none; /* Standard syntax */
			-webkit-user-select: none; /* Safari */
			-moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
			cursor: pointer;
			box-sizing: border-box;

			& .handle .mousearea {
				position: absolute;
				top: -9px;
				left: 0;
				width: 100%;
				height: 20px;
				background: none !important;
			}

			& .active {
				display: block;
			}
			& .handle {
				width: 100px;
				height: 8px;
				background: #888;
				cursor: pointer;
				border-radius: 5px;
			}
		}
	}
	
	> ul{
		display: flex;
		padding: 0;
		margin: 0;
		flex-wrap: wrap;
		background-color: var(--insta-bg-color);
		border: var(--insta-padding) solid var(--insta-bg-color);
		gap: var(--gap-5px);
		justify-content: center;

		&.col1 li{
			width: 100%;
		}
		&.col2 li{
			width: var(--col-2-n-5px);
		}
		&.col3 li{
			width: var(--col-3-n-5px);
		}
		&.col4 li{
			width: var(--col-4-n-5px);
		}
		&.col5 li{
			width: var(--col-5-n-5px);
		}
		
		&.min-col2 li{
			max-width: var(--col-2-5px);
		}
		&.min-col3 li{
			max-width: var(--col-3-5px);
		}
		&.min-col4 li{
			max-width: var(--col-4-5px);
		}
		&.min-col5 li{
			max-width: var(--col-5-5px);
		}

		&.aspect1_1 li a{
			aspect-ratio: 1 / 1;
		}
		&.aspect3_4 li a{
			aspect-ratio: 3 / 4;
		}
		&.aspect4_5 li a{
			aspect-ratio: 4 / 5;
		}

		& li{
			display: block;
			margin: 0;
			list-style: none;
			background-color: #f0f0f0;
			border-radius: 5px;
			box-sizing: border-box;

			& a{
				position: relative;
				display: block;
				width: 100%;
				height: auto;
				overflow: hidden;

				& img{
					position: absolute;
					top: 0;
					left: -200%;
					right: -200%;
					bottom: 0;
					margin: auto;
					width: 100%;
					height: auto;
				}
			}
		}
	}
}