/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
html,body {overflow-y: auto!important;}
body {min-height: 100vh; scrollbar-face-color: #333; scrollbar-track-color: #eee; scrollbar-arrow-color: #333; scrollbar-shadow-color: #eee;}
body::-webkit-scrollbar {width: 14px; background: #eee; z-index: 3;}
body::-webkit-scrollbar-thumb {background: #333;}
main {min-height: calc(100vh - 290px); margin-bottom: auto;}

/*pc限定*/
.sp {display: none!important;}

/*clearfix*/
.clearfix::after {display: block; clear: both; content: "";}

/*コンティナ*/
.container {display: block; width: 90vw; max-width: 1280px; margin: 0 auto; position: relative;}

/*汎用flex*/
.flex {display: flex; align-items: flex-start; justify-content: space-between;}

/*汎用ヘッダー*/
.h-g {font-size: 2.2rem; text-align: center; text-transform: capitalize; margin-bottom: 30px; padding: 25px 0; border-bottom: 1px solid #ccc;}

/*ページャー*/
#pagination {margin: 40px 0;}
#pagination .page-numbers {display: flex; justify-content: center; align-items: center;}
#pagination span,#pagination a {display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; color: #fff; background: #333; font-size: 1.2rem; line-height: 1; margin: 0 5px; padding: 12px; border: 1px solid #333; border-radius: 50%; opacity: 1;}
#pagination a {color: #333; background: #fff;}
#pagination a:hover {color: #fff; background: #333;}

@media screen and (max-width: 768px) {
	.container {width: 94vw;}
}

/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {width: 100%; text-align: center;}
header .logo {display: inline-block; margin: 40px 0;}
header .logo span {display: block; line-height: 1; letter-spacing: 1.5px;}
header .logo span.en {font-size: 2.2rem;}
header .logo span.jp {font-size: 1.3rem; margin-top: 10px;}
header .g-navi ul {display: inline-flex; align-items: center; border-top: 1px solid #333; border-bottom: 1px solid #333; padding: 0 20px;}
header .g-navi li {margin: 20px 20px;}
header .g-navi li a {display: block; position: relative; font-family: 'Lora','Noto Serif JP',游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif; font-size: 1.25rem; color: #333; padding: 0 5px; opacity: 1;}
header .g-navi li a:hover {color: #abb1b5;}

header #nav-toggle,#overlay {display: none;}

@media screen and (max-width: 768px) {
	header .logo span.en {font-size: 2rem;}
	header .logo span.jp {font-size: 1.1rem;}
	header .g-navi li {margin: 15px 10px;}
	header .g-navi li a {font-size: 1.05rem;}
}

/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*------------------------------------
カラム
------------------------------------*/
.col-box {margin: 60px 0; flex-wrap: wrap;}
.col-1,.col-main {width: calc(100% - 400px); margin-right: 40px;}
.col-2,.col-side {width: 360px;}

@media screen and (max-width: 1024px) {
	.col-box {margin: 40px 0 20px;}
	.col-1 {width: 100%; margin-right: 0;}
	.col-2 {width: 500px;}
	.col-main {width: 100%; margin-right: 0;}
	.col-side {width: 100%;}
}
@media screen and (max-width: 768px) {
	.col-2 {width: 56%;}
}
/*------------------------------------
TOP
------------------------------------*/
#home .top {margin: -1px 0 0;}
/*------------------------------------
NEWS
------------------------------------*/
#home .new-post {margin: 0 0 30px;}
#home .new-post .h-box {align-items: baseline; border-bottom: 1px solid #333;}
#home .new-post .h-box span.en {font-size: 1.75rem;}
#home .new-post .h-box span.jp {font-size: .9rem; margin-left: 15px;}
#home .new-post .h-box .more {display: inline-flex; align-items: center; color: #333; margin-left: auto; padding: 5px 10px;}
#home .new-post .h-box .more i {color: #333; font-size: .75rem; margin: 2px 0 0 5px;}
#home .new-post.concert .h-box {border-color: #8c7147!important;}
#home .new-post.concert .h-box span,
#home .new-post.concert .h-box .more,
#home .new-post.concert .h-box .more i {color: #8c7147!important;}
#home .new-post ul {padding: 0 5px;}
#home .new-post ul li a {display: block; padding: 10px 5px; border-bottom: 1px solid #ccc;}
#home .new-post ul li a h3 {font-size: 1.2rem; margin-bottom: 3px;}
#home .new-post ul li a h3 span {display: inline-block; margin-right: 1rem;}
#home .new-post ul li a p {font-size: .85rem;}
#home .new-post ul li a p time {font-size: inherit;}
#home .new-post ul li:last-child a {border-bottom: none;}
/*------------------------------------
FACEBOOK
------------------------------------*/
.fb {max-width: 500px; margin: 0 auto;}
.fb > .fb-page {width: 100%;}
.fb > .fb-page > span,
.fb iframe {width: 100% !important;}
/*------------------------------------
サイドバナー
------------------------------------*/
#home .side_bnr {margin: 60px 0 0;}
#home .side_bnr ul {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; margin: 0 auto;}
#home .side_bnr li {width: calc((100% - 30px) / 4); margin: 0 10px 10px 0;}
#home .side_bnr li:nth-child(4n) {margin-right: 0;}
#home .side_bnr li a {width: auto;}
#home .side_bnr h2.widgettitle {display: none;}

@media screen and (max-width: 1024px) {
	#home .side_bnr {width: calc(100% - 540px); margin: 0 0 0 40px;}
	#home .side_bnr ul {display: block;}
	#home .side_bnr li {width: 100%; margin: 0 0 10px;}
	#home .side_bnr li img {margin: 0 auto;}
}
@media screen and (max-width: 768px) {
	#home .side_bnr {width: 40%; margin-left: 4%;}
}
/*------------------------------------
ボトムバナー
------------------------------------*/
#home .bottom_bnr {width: 100%; margin: 30px 0 0;}
#home .bottom_bnr ul {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
#home .bottom_bnr li {width: calc((100% - 16px) / 2); margin: 0 16px 16px 0;}
#home .bottom_bnr li:nth-child(2n) {margin-right: 0;}
#home .bottom_bnr li a {width: auto;}
#home .bottom_bnr h2.widgettitle {display: none;}
/*------------------------------------
フッター
------------------------------------*/
footer {width: 100%; height: 75px; align-items: center; margin-top: auto; background: #333;}
footer .copyright {display: inline-block; color: #fff; text-align: center; margin: auto;}
footer #scroll {display: flex; justify-content: center; align-items: center; width: 75px; height: 75px; border-left: solid 1px #666;}
footer #scroll img {width: 20px; color: #fff;}
/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
テンプレ＆固定ページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
投稿ページ・固定ページ (single.php,page.php)
--------------------------------------------------------------------------*/
#state {margin-bottom: 30px; border-top: 1px solid #ddd; border-left: 0; border-right: 0;}
#state h1 {font-size: 2rem; font-weight: 500; line-height: 1.25; padding: 80px 0;}
#state .flex {justify-content: flex-start; align-items: center;}
#state p {margin-left: auto;}
#state .cat {display: inline-block; color: #fff; font-size: 1rem; white-space: nowrap; margin: 0 12px 0 0; padding: 2px 10px; background: #333;}
#state .cat:last-child {margin-right: 0;}

#single {}

#single h2 {font-size: 1.7rem; line-height: 1.5; font-weight: 700; margin: 0 0 30px 0; padding: 12px 0; border-bottom: 2px solid #333;}
#single h3 {font-size: 1.4rem; line-height: 1.5; font-weight: 700; margin: 0 0 30px 0; padding: 15px 20px; background: #f3f3f3; border-radius: 5px;}
#single h4 {font-size: 1.2rem; line-height: 1.5; font-weight: 700; margin: 0 0 30px 0; padding-left: 10px; border-left: 4px solid #333;}
#single h5 {font-size: 1.1rem; line-height: 1.5; font-weight: 700; margin: 0 0 30px 0; padding-left: 1em;}
#single p {line-height: 2; margin: 0 0 30px 0;}
#single p::after {display: block; clear: both; content: "";}
#single a {color: #0075c2;}
#single em {font-style: italic;}
#single strong {font-weight: 700;}
#single sup, #single sub {font-size: .5em;}
#single sup {vertical-align: top;}
#single sub {vertical-align: bottom;}
#single pre {margin: 0 0 30px 0;}
#single blockquote {position: relative; margin: 0 0 40px 0; padding: 20px 30px; border: 1px solid #ddd;}
#single code {display: block; color: #fff; margin: 0 0 40px 0; padding: 20px; background: #364549;}

#single ul, #single ol {margin: 0 0 30px 0;}
#single ul li, #single ol li {margin-left: 1.5em; line-height: 2.5;}
#single ul {list-style-type: disc;}
#single ul li {list-style-type: inherit;}
#single ol {list-style-type: decimal;}
#single ol li {list-style-type: inherit;}
#single ul ul, #single ol ol, #single ul ol, #single ol ul {margin: 0 0 0 1.75em;}

#single table {border-collapse: collapse; text-align: left; line-height: 1.5; margin: 0 0 30px 0;}
#single table thead th, #single table thead td,
#single table tfoot th, #single table tfoot td {background: #f3f3f3; font-weight: 700;}
#single table tr {border-bottom: 1px solid #ddd;}
#single table tr:last-child {border-bottom: none;}
#single table thead th, #single table thead td {padding: 0.75rem 1rem;}
#single table th, #single table td {font-family: initial; padding: 0.5rem 1rem;}
#single table th {background: #fafafa;}

#single img {margin: 0;}
#single .aligncenter img {margin: 0 auto;}
#single .alignleft img {margin-right: auto;}
#single .alignright img {margin-left: auto;}
#single figure {display: inline-block; margin: 0 0 40px 0;}
#single figcaption {font-size: 1rem; text-align: left;}
#single figure.wp-block-image figcaption {background: #f3f3f3; margin: 0; padding: 10px 15px;}
#single ul.wp-block-gallery li.blocks-gallery-item {margin: 10px 10px;}
#single ul.wp-block-gallery li.blocks-gallery-item figure {margin: 0;}
#single ul.wp-block-gallery li.blocks-gallery-item figure figcaption {width: calc(100% - 30px); font-size: .9rem; text-align: left; background: rgba(0,0,0, .3); margin: 0; padding: 10px 15px;}

#single .wp-block-media-text {align-items: start; margin: 0 0 30px 0;}
#single .wp-block-media-text figure.wp-block-media-text__media {display: block; margin: 0; padding: 0;}
#single .wp-block-media-text figure.wp-block-media-text__media img {width: auto; max-width: 100%;}
#single .wp-block-media-text .wp-block-media-text__content {padding: 0 20px;}
#single .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {padding: 0 20px 0 0;}
#single .wp-block-media-text p.has-large-font-size {margin: 0!important;}

#single .wp-block-cover {margin: 0 0 40px 0;}

#single .wp-block-pullquote {position: relative; margin: 0 0 40px 0; padding: 20px 0;}
#single .wp-block-pullquote blockquote {margin: 0; padding: 40px 0; border: 2px solid #333!important; border-left: none!important; border-right: none!important;}
#single .wp-block-pullquote blockquote p {font-family: 'Lora','Noto Serif JP',游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif; font-size: 1.35rem; margin: 0 0 20px 0;}

#single .wp-block-button {margin: 0 0 40px 0;}
#single .wp-block-button a {display: inline-block; color: #fff; font-size: 1.1rem; background: #333; padding: 8px 20px; border: 1px solid #333; border-radius: 36px;}
#single .wp-block-button a:hover {color: #333; background: #fff; opacity: 1;}

#single .wp-block-file {margin: 0 0 40px 0;}
.wp-block-file__button,
.wp-block-button__link {display: inline-block; color: #fff; background: #333; padding: 8px 14px; border: 1px solid #333; border-radius: 36px;}
.wp-block-file__button:hover,
.wp-block-button__link:hover {color: #333; background: #fff; opacity: 1;}

#single .wp-block-columns {}
#single .wp-block-column {margin: 0 16px 20px 0;}
#single .wp-block-column:last-child {margin: 0 0 20px 0;}

#single .wp-block-embed {display: block;}

#single .aligncenter {display: block; margin: 0 auto 30px;}
#single .alignright {float: right;}
#single .alignleft {float: left;}

/*前後記事*/
#postlink {display: flex; margin: 80px 0; border-top: 1px solid #333; border-bottom: 1px solid #333;}
#postlink a {width: calc(50% - 30px); display: flex; padding: 15px; position: relative;}
#postlink a h3 {font-size: 1rem;}
#postlink a .image {min-width: 120px; max-width: 120px; height: 80px;}
#postlink a .image img {width: 100%; height: 100%; transition: .5s ease; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';}
#postlink a.next {justify-content: flex-start; margin-right: auto;}
#postlink a.prev {justify-content: flex-end; margin-left: auto; border-left: 1px solid #333;}
#postlink a.next .image {margin-right: 15px;}
#postlink a.prev .image {margin-left: 15px;}

/*サイドバー*/
.col-side {}
.col-side ul {margin: 0 0 30px 0;}
.col-side ul h2 {font-size: 1.25rem; font-weight: 700; border-bottom: 2px solid #333; margin-bottom: 10px; padding-bottom: 10px;}
.col-side ul li {font-size: 1.15rem; line-height: 1.25; margin-bottom: 10px;}
.col-side ul li a {color: #333;}
.col-side ul li span.post-date {display: block; font-size: .90rem; margin-top: 3px;}

@media screen and (max-width: 1024px) {
	#postlink {margin: 80px 0 40px;}

	.col-side {display: flex; width: 100%; margin-bottom: 20px;}
	.col-side > ul {width: calc(100% - 540px); margin: 0 40px 0 0;}
	.col-side .fb {width: 500px; margin: 0;}
}

@media screen and (max-width: 768px) {
	#single .wp-block-column {display: flex; flex-direction: column; margin: 0 0 20px 0;}

	.col-side > ul {width: 40%; margin: 0 4% 0 0;}
	.col-side .fb {width: 56%; margin: 0;}
}
/*--------------------------------------------------------------------------
アーカイブ (archive.php)
--------------------------------------------------------------------------*/
#archive {}
#archive .post-list {margin-top: -30px;}
#archive .target .image {min-width: 140px; max-width: 140px; height: 100px; overflow: hidden;}
#archive .target .image img {width: 100%; height: 100%; object-fit: cover; object-position: 50%; font-family: 'object-fit: cover; object-position: 50%;';}
#archive .target {justify-content: flex-start; padding: 15px; border-bottom: 1px solid #ccc;}
#archive .target .text {margin-left: 20px;}
#archive .target h3 {font-size: 1.3rem; margin-bottom: 3px;}
#archive .target h3 span {display: inline-block; margin-right: 1rem;}
#archive .target p {font-size: .85rem;}
#archive .target p time {font-size: inherit;}
/*--------------------------------------------------------------------------
404.php
--------------------------------------------------------------------------*/
#notfound {position: relative; width: 100%; height: calc(100vh - 290px); background: url(../img/404_back.jpg);}
#notfound:after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0, .5); z-index: 1;}
#notfound .box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: inline-flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2;}
#notfound h1 {display: flex; justify-content: center; align-items: center; font-weight: 900; line-height: 1; font-size: 9em; color: #fff; z-index: 2;}
#notfound h1 span {font-family:inherit; font-size: .3em; font-weight: 900; line-height: 1.25; color: inherit; margin-left: 20px; z-index: 2;}
#notfound p {font-size: 1.5em; color: #fff; z-index: 2; margin-top: 5px;}
#notfound a {display: block; width: 280px;font-size: 1.25em; color: #fff; text-align: center; margin-top: 30px; padding: 8px 0; background: #333; border: 2px solid #333; opacity: 1; z-index: 2;}
#notfound a:hover {color: #333; background: #fff;}