@charset "utf-8";

/*
Theme Name: Cinque Skeleton 1.2.5
*Theme URI: 
Author: CinqueStelline
Author URI: http://CinqueStelline.com/
Description: 
Version: 1.2.5 (PHP8.4-safe)
License: 
License URI: 
Text Domain: Cinque Skeleton
*Tags: This is Bootstrap 4 Based Theme
*/

/* DESIGNCORD
------------------------------------------------------------

------------------------------------------------------------ */

/* TABLE OF CONTENTS
------------------------------------------------------------
* Global
* Branding
* Layout
* Header
* Footer
* Menus
* Content
* Navigations
* Comments
* Widgets
* Plugins
* Print
------------------------------------------------------------ */

/* =Global
----------------------------------------------- */

/* For UI */
html,
body {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
		"Meiryo", sans-serif;
	-webkit-font-feature-settings: "palt" 1; /* for Android 4.4 */
	font-feature-settings: "palt" 1;
	letter-spacing: 0.2ex;
	line-height: 2em;
}
@media (max-width: 767px) {
	html,
	body {
		font-size: 14px;
	}
}
html.open {
	overflow: hidden;
}
body,
a,
a img,
.anime {
	transition: 0.35s ease-out;
}
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}
a.post-edit-link {
	background: #16b716;
	padding: 0.35em 0.5em;
	color: white;
	font-size: 0.8em;
	border-radius: 5px;
}
a.post-edit-link::before {
	content: "\f303";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	margin-right: 0.5em;
}
a.post-edit-link:hover {
	background: forestgreen;
	color: white;
}

/* Base */
body,
button,
input,
select,
textarea {
	font-family: sans-serif;
}
.tb {
	display: inline-block;
}

/* =Menus
----------------------------------------------- */

/* グローバルメニュー */
header {
	border-bottom: rgba(41, 41, 39, 0.08) 1px solid;
	height: auto;
	z-index: 500;
}
@media (max-width: 1023px) {
	header {
		background: rgba(255, 255, 255, 0.85);
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1030;
	}
	#main {
		margin-top: 46px;
	}
	.navbar-nav {
		width: 100%;
	}
	#sidebar.show aside {
		width: 100%;
	}
}
#sidebar {
	height: calc(100vh - 46px);
	width: 0;
	position: fixed;
	left: -75vw;
	top: 46px;
	z-index: 50;
}
#sidebar.show {
	left: 0;
	width: 100vw;
	background: rgba(255, 255, 255, 0.9);
	overflow: scroll;
	padding: 1em;
	z-index: 500;
}
#categories-2 h2 {
	font-size: 1em;
	margin-bottom: 1em;
}
#sidebar.show li {
	line-height: 4em;
	border-bottom: rgba(34, 139, 34, 0.18) 1px solid;
}
#sidebar.show ul li:first-child {
	border-top: rgba(34, 139, 34, 0.18) 1px solid;
}
#sidebar.show li:hover,
#sidebar.show li:focus {
	background: rgba(34, 139, 34, 0.18);
}

#sidebar.show li,
#sidebar.show aside {
	text-align: center;
	font-size: 1em;
}
#sidebar.show li a {
	display: block;
}

@media (min-width: 576px) {
	#main {
		margin-top: calc(4rem + 1px);
	}
	#sidebar {
		height: calc(100vh - 4rem);
	}
}
@media (min-width: 768px) {
	#sidebar {
		top: 62px;
	}
}
@media (min-width: 1024px) {
	body:not(.home) header,
	#sidebar {
		width: 210px;
		padding: 1.5em 0 0.5rem 1rem;
		position: fixed;
		font-size: 0.8rem;
		display: block;
	}
	#main {
		margin-top: 0;
	}
	#main[class^="home"] {
		margin-top: 8em;
	}
	header {
		height: 4rem;
		border-bottom: none;
	}
	#sidebar.show {
		background: transparent;
	}
	#sidebar {
		left: 0;
		background: rgba(255, 255, 255, 0.8);
		top: 0;
		padding-top: 15em;
		height: 100vh;
	}
	#sidebar.collapse {
		display: inherit;
	}
	ul.nav.navbar-nav.primary {
		display: inline-block;
		margin-bottom: 1.5em;
	}

	body.home header {
		width: 100%;
		height: auto;
		padding: 1rem 0;
	}
}
@media (min-width: 1024px) and (max-width: 1279px) {
	#sidebar > .navbar-nav,
	aside#categories-2 {
		padding-left: 1.5em;
	}
}
@media (min-width: 1280px) {
	#sidebar {
		width: 250px;
		font-size: 1rem;
	}
}
@media (min-width: 1390px) {
	body:not(.home) header,
	body:not(.home) #sidebar {
		left: calc((100vw - 1390px) / 2);
	}
}

/* ロゴ */
.brand {
	text-align: center;
	margin: auto;
	max-width: calc(100vw - 2rem - 86px);
	height: 32px;
}
.brand a {
	display: inline-block;
}
.brand a:hover {
	opacity: 0.8;
}
.brand img.Logo {
	width: 100%;
}
header .brand a {
	height: 32px;
	width: 172px;
	max-width: 100%;
}
@media (min-width: 768px) {
	header .brand {
		height: 46px;
	}
	header .brand a {
		height: 46px;
		width: 247.25px;
	}
	.brand img.Logo {
		width: auto;
		height: 100%;
	}
}
@media (min-width: 1024px) {
	.brand img.Logo {
		width: 100%;
		height: auto;
	}
	body.home .brand img.Logo {
		width: 350px;
		height: auto;
	}
	header .brand a {
		height: 10em;
	}
	body.home header .brand a {
		height: 10em;
		width: 208px;
	}
}
@media (min-width: 1280px) {
	body.home header .brand a {
		height: 11em;
	}
}
@media (min-width: 1390px) {
	body.home header .brand a {
		height: 12em;
	}
}

/* トグルスイッチ */
button.navbar-toggle {
	width: 2rem;
	display: block;
	border: none;
	background: transparent;
	transform: scale(0.7, 0.7);
	padding: 0;
	outline: none !important;
	position: absolute;
	top: 0;
	bottom: 0;
}
@media (min-width: 576px) {
	button.navbar-toggle {
		transform: scale(1);
	}
}
button.navbar-toggle .icon-bar.top {
	height: 4px;
	transform: rotate(135deg);
	margin: 13px 0 -8px;
	background-color: #040000;
}
button.navbar-toggle .icon-bar.middle {
	display: none;
	transform: rotate(360deg);
	padding-top: 2px;
}
button.navbar-toggle .icon-bar.bottom {
	height: 4px;
	transform: rotate(-135deg);
	margin-bottom: 6px;
	background-color: #040000;
}
button.navbar-toggle.collapsed .icon-bar {
	transform: rotate(0deg);
	margin: 0;
	display: block;
}
button.navbar-toggle .icon-bar {
	width: 33px;
	border-radius: 2px;
	display: block;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}
button.navbar-toggle .icon-bar + .icon-bar {
	margin-top: 4px;
}
@media (min-width: 768px) {
	button.navbar-toggle {
		transform: scale(0.8, 0.8);
	}
	button.navbar-toggle .sr-only + span {
		display: inline-block;
		vertical-align: text-bottom;
	}
}
@media (min-width: 1024px) {
	button.navbar-toggle {
		display: none;
	}
	a.navbar-brand {
		right: initial;
		text-align: initial;
	}
	.navbar {
		background: transparent;
		padding: 0;
	}
	button.navbar-toggle {
		display: none;
	}
}

/* メインコンテンツ & フッターコンテンツ */
@media (min-width: 1024px) {
	body:not(.home) #main {
		margin-left: 250px;
	}
	.home section {
		padding-left: 250px;
	}
	footer {
		padding-left: 250px;
	}
}
footer .container {
	font-size: 0.8em;
	padding-top: 1.5rem;
}
footer time.updated {
	font-size: 0.8em;
	opacity: 0.5;
}
footer {
	padding-bottom: 2rem;
}
footer .admin {
	margin: 1.5rem 0;
	line-height: 1.5;
}
/* カルーセル */
.img-fluid {
	width: 100%;
}
.carousel-inner {
	width: 100%;
}
.carousel-inner:before {
	content: "";
	display: block;
	padding-top: 38.19%; /* 高さを幅の%で固定 */
}
.carousel-item {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

/* ソーシャルボタン */
#main aside {
	margin: 5rem 0;
}
#main aside .socials {
	height: 21px;
	line-height: 21px;
	margin-bottom: 1em;
	position: relative;
}
#main aside .socials + .socials {
	height: 28px;
	line-height: 28px;
}
.socials .label {
	margin-right: 0.5em;
}
.socials .label,
.socials a,
iframe.line-it-button {
	/*color : #494946;
	color : rgb(73, 73, 70);*/
	opacity: 0.7;
	filter: alpha(opacity=70) progid: DXImageTransform.Microsoft.Alpha(opacity=70);
}
.socials a:hover,
.socials a:focus,
iframe.line-it-button:hover,
iframe.line-it-button:focus {
	opacity: 1;
	filter: alpha(opacity=100) progid: DXImageTransform.Microsoft.Alpha(opacity=100);
}
.socials a {
	font-size: 21px;
	margin-right: 0.75rem;
}
a[data-social-platform="facebook"] {
	color: rgb(59, 89, 153) !important;
}
a[data-social-platform="twitter"] {
	/*color: rgb(85, 172, 238);*/
	color: rgb(33, 173, 242) !important;
}
a[data-social-platform="google"] {
	color: rgb(229, 72, 43) !important;
}
.pocket-btn {
	display: inline;
	position: absolute;
	height: 24px !important;
	margin: 4px 0.75rem 0;
}
iframe.line-it-button {
	position: absolute !important;
	display: inline-block;
}

form input.btn {
	margin-top: 1em;
}
form input[type="submit"] {
	margin-left: 1em;
}

div#notice {
	background: #f4fff3;
	padding: 1em;
	margin-bottom: 2em;
}
@media (min-width: 1024px) {
	div#notice {
		padding: 2em;
		margin: 4em;
	}
}
div#notice p {
	text-align: inherit;
}
#notice ul#shops {
	max-width: 100%;
}
#notice ul#shops address:before {
	content: "Tel:";
	margin-right: 0.25em;
}

time#pub_day {
	margin: -2em auto 2em;
	display: block;
	text-align: center;
	font-size: 0.75em;
}