/*--------------------------------------------------------------------------
汎用
--------------------------------------------------------------------------*/
body {max-width: 640px; min-width: 320px; padding-top: 80px!important; max-height: 100%; min-height: calc(100vh - 70px);}
main {min-height: calc(100vh - 70px); margin-bottom: auto;}

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

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

/*コンティナ*/
.container {padding: 0 20px; 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:20px; 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;}
/*--------------------------------------------------------------------------
ヘッダー
--------------------------------------------------------------------------*/
header {position: fixed; top: 0; width: 100%; height: 80px; text-align: center; background: #fff; box-shadow: 2px 2px 2px 0 rgba(0,0,0, .2); z-index: 1000;}
header .logo {display: inline-block; margin: 12px 0;}
header .logo span {display: block; line-height: 1; letter-spacing: 1.5px;}
header .logo span.en {font-size: 1.2rem;}
header .logo span.jp {font-size: .75rem; margin-top: 5px;}
header .g-navi {position: fixed; top: 80px; left: 0; width: 100%; transform: scale(1,0); transform-origin: top; transition: .5s ease; z-index: 1002;}
header .g-navi ul {display: block; background: #fff;}
header .g-navi li {line-height: 1.25; overflow: hidden; transition: .3s ease;}
header .g-navi li a {display: block; font-family:'Lora','Noto Serif JP',游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif; font-size: 1.15rem; color: #333; text-align: center; padding: 20px 0; border-top: 1px solid #ccc;}

.open header .g-navi {transform: scale(1,1);}

header #nav-toggle {position: absolute; display: block; top: 0px; right: 0; width: 64px; height: 70px; z-index: 2001; padding: 0; transition: .5s cubic-bezier(0.68, -0.43, 0.265, 1.55);}
header #nav-toggle span {position: absolute; left: 16px; display: block; width: 32px; height: 1px; margin: 0 auto; background: #333; transition: all ease .5s;}
header #nav-toggle span:nth-child(1) {top: 26px;}
header #nav-toggle span:nth-child(2) {top: 34px;}
header #nav-toggle span:nth-child(3) {top: 42px;}
header #nav-toggle p {position: absolute; left: 50%; bottom : 6px; transform: translate(-50%,0); font-size: .75rem;}
header #nav-toggle:hover {cursor: pointer;}

.open header #nav-toggle span {background: #9c8157;}
.open header #nav-toggle span:nth-child(1) {transform: rotate(45deg); top: 35px;}
.open header #nav-toggle span:nth-child(2) {transform: scale(0,1);}
.open header #nav-toggle span:nth-child(3) {transform: rotate(-45deg); top: 35px;}

header #overlay {position: fixed; top: 80px; left: 0; width: 100vw; height: calc(100vh - 80px); background: rgba(0,0,0, .5); visibility: hidden; transition: all .5s ease; opacity: 0; z-index: 999;}
.open header #overlay {opacity: 1; visibility: visible;}
/*--------------------------------------------------------------------------
----------------------------------------------------------------------------
----------------------------------------------------------------------------
フロントページ
----------------------------------------------------------------------------
----------------------------------------------------------------------------
--------------------------------------------------------------------------*/
/*------------------------------------
カラム
------------------------------------*/
.col-box {display: block; margin: 30px 0;}
.col-box .col-1,.col-box .col-2 {margin-bottom: 30px;}
/*------------------------------------
TOP
------------------------------------*/
/*------------------------------------
NEWS
------------------------------------*/
#home .new-post {margin: 0 0 20px;}
#home .new-post .h-box {flex-wrap: wrap; align-items: baseline; border-bottom: 1px solid #333;}
#home .new-post .h-box span.en {display: block; width: 100%; font-size: 1.5rem; line-height: 1.25;}
#home .new-post .h-box span.jp {font-size: .8rem; margin-left: 3px;}
#home .new-post .h-box .more {color: #333; padding: 0 10px 5px;}
#home .new-post .h-box .more i {color: #333; font-size: .75rem; margin: 0 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 {}
#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.1rem; 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
------------------------------------*/
#home .fb {max-width: 500px; margin: 0 auto;}
#home .fb > .fb-page {width: 100%;}
#home .fb > .fb-page > span,
#home .fb iframe {width: 100% !important;}
/*------------------------------------
サイドバナー
------------------------------------*/
#home .side_bnr ul {width: 100%; max-width: 300px; margin: 0 auto;}
#home .side_bnr li {display: block; margin-bottom: 10px;}
#home .side_bnr li a {display: block;}
#home .side_bnr li a img {width: 100%;}
#home .side_bnr h2.widgettitle {display: none;}
/*------------------------------------
ボトムバナー
------------------------------------*/
#home .bottom_bnr {margin: 0 0 30px;}
#home .bottom_bnr ul {width: 100%; max-width: 640px; margin: 0 auto;}
#home .bottom_bnr li {display: block; margin: 0 0 10px 0;}
#home .bottom_bnr li a {display: block;}
#home .bottom_bnr h2.widgettitle {display: none;}
/*------------------------------------
フッター
------------------------------------*/
footer {width: 100%; height: 50px; align-items: center; margin-top: auto; background: #333;}
footer .copyright {display: inline-block; color: #fff; font-size: .8rem; text-align: center; margin: auto;}
footer #scroll {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; 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: 1.75rem; 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.5rem; 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.25rem; 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.1rem; line-height: 1.5; font-weight: 700; margin: 0 0 30px 0; padding-left: 10px; border-left: 4px solid #333;}
#single h5 {font-size: 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 .scroll-table {overflow: auto; white-space: nowrap; margin: 0 0 30px 0;}
#single table {border-collapse: collapse; text-align: left; line-height: 1.5;}
#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: 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 {display: block; margin: 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%; margin: 0 auto;}
#single .wp-block-media-text .wp-block-media-text__content {padding: 20px 0 0 0; text-align: center;}
#single .wp-block-media-text p {text-align: center!important;}
#single .wp-block-media-text p.has-large-font-size {margin: 0 0 10px!important; font-size: 1.5rem; line-height: 1.25!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;}
#single .wp-block-file .wp-block-file__button {display: inline-block; color: #fff; background: #333; padding: 8px 14px; border: 1px solid #333; border-radius: 36px;}
#single .wp-block-file .wp-block-file__button:hover {color: #333; background: #fff; opacity: 1;}

#single .wp-block-column {margin: 0 0 20px 0!important;}

#single .wp-block-embed {display: block;}
#single .wp-block-embed iframe {max-width: 100%;}

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

/*前後記事*/
#postlink {display: block; margin: 60px 0;}
#postlink a {width: calc(100% - 30px); display: flex; padding: 15px; border-top: 1px solid #333; border-bottom: 1px solid #333;}
#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;}
#postlink a.prev {justify-content: flex-end; margin-top: 15px;}
#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.1rem; 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: .9rem; margin-top: 3px;}
/*--------------------------------------------------------------------------
アーカイブ (archive.php)
--------------------------------------------------------------------------*/
#archive {}
#archive .post-list {margin-top: -20px;}
#archive .target .image {min-width: 100px; max-width: 100px; 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 0; border-bottom: 1px solid #ccc;}
#archive .target .text {margin-left: 10px;}
#archive .target h3 {font-size: 1.1rem; margin-bottom: 3px;}
#archive .target h3 span {display: 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: 6rem; 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.1rem; color: #fff; z-index: 2; margin-top: 5px; text-align: center;}
#notfound a {display: block; width: 280px;font-size: 1.2rem; 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;}