@charset "utf-8";
/*-------------------------------------
  Root
-------------------------------------*/
:root { --drawer-bar-color: #2F67A4; }
:root { --drawer-border-color: transparent; }
:root { --drawer-background-color: #FFF; }
:root { --drawer-menu-background-color: #FFF; }
:root { --drawer-menu-selected-background-color: #F2F2F2; }
:root { --drawer-width: 50px; }
:root { --drawer-height: 50px; }
:root { --safe-area-inset-top: env(safe-area-inset-top); }
:root { --safe-area-inset-bottom: env(safe-area-inset-bottom); }
:root { --safe-area-inset-left: env(safe-area-inset-left); }
:root { --safe-area-inset-right: env(safe-area-inset-right); }
:root { --drawer-open-transition-duration: 0.4s; }
:root { --drawer-close-transition-duration: 0.4s; }
:root { --gotop-color: rgb(15,63,108); }
:root { --gotop-background: rgba(255,255,255,0.6); }
:root { --form-outline-color: rgba(0,100,255,0.5); }
:root { --form-border-color: rgba(204,204,204,1.0); }
:root { --form-radio-color: #999; }
:root { --form-radio-checked-color: #2F67A4; }
:root { --form-transition: color 0.2s linear, background 0.2s linear, opacity 0.2s linear, font-style 0.2s linear; }
:root { --link-color: #2F67A4; }
:root { --notice-color: #d63638; }
:root { --notice-font-family: arial, sans-serif; }
:root { --notice-font-size: 14px; }
:root { --notice-font-weight: 400; }
:root { --form-message-color: #d63638; }
:root { --form-message-font-family: arial, sans-serif; }
:root { --form-message-font-size: 14px; }
:root { --form-message-font-weight: 400; }

/*-------------------------------------
  Reset CSS
  html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark
-------------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
nav ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
ins { background-color: #FF9; color: #000; text-decoration: none; }
mark { background-color: #FF9; color: #000; font-style: italic; font-weight: 600; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { text-decoration: none; border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #CCC; margin: 0; padding: 0; }
input, select { vertical-align: middle; }

/*-------------------------------------
  Common element
-------------------------------------*/
html {}
html, body { min-width: 320px; height: 100%; background: transparent; font-size: 14px; line-height: 1.6; font-family: Arial, sans-serif; font-weight: 400; color: #222; word-break: normal; overflow-wrap: break-word; -webkit-text-size-adjust : 100%; -webkit-appearance: none; appearance: none; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a, a:link, a:visited { color: #2F67A4; text-decoration: none; cursor: pointer; transition: 0.3s; }
a:hover, a:active, a:focus { color: #2F67A4; text-decoration: none; }
a:focus { outline: none; }
img { border: none; outline: none; vertical-align: top; }
video::cue { color: #FFF; font: 1.0rem/1.6 Arial, sans-serif; font-weight: 400; background-color: rgba(0, 0, 0, 0.0); opacity: 1; visibility: visible; text-decoration: none; text-shadow: 0px 0px 4px rgb(34, 34, 34), 0px 0px 4px rgb(34, 34, 34), 0px 0px 4px rgb(34, 34, 34), 0px 0px 4px rgb(34, 34, 34); outline: none; white-space: pre-line; }
h1, h2, h3, h4, h5, h6 { font-size: 1.0rem; line-height: 1.6; font-weight: 400; }
p {}
address { font-style: normal; }
cite {}
figure figcaption { display: inline-block; }
pre { background: rgb(0,0,0); color: rgb(255,255,255); overflow: auto; font-size: 1.1rem; line-height: 1.5; }
hr {}
strong, em {}
ul, ol, li { list-style: none; }
table { border-collapse: separate; }
th, td { font-weight: 400; border: none; }
video::-webkit-media-controls-panel { background: transparent linear-gradient(to bottom,transparent, transparent calc(100% - 70px),rgba(0,0,0,0.2) calc(100% - 70px), rgba(0,0,0,0.2) 100%) no-repeat 0 0 / 100% 100%; }
@media screen and (min-width: 900px) {
  a:hover { opacity: 0.85; }
}

/*-------------------------------------
.drawer  z-index: 1000-1010
-------------------------------------*/
.drawer::before { width: 0; height: 100vh; background: var(--drawer-background-color); display: block; box-sizing: border-box; content: ''; position: fixed; top: 0; left: 0; z-index: 1000; opacity: 0; }
.drawer::before { opacity: 0; transition: opacity var(--drawer-close-transition-duration); }
.drawer.isOpen::before { width: 100%; top: 0; left: 0; opacity: 1; transition: opacity var(--drawer-open-transition-duration); }
.isCloseDrawer .drawer::before { width: 100%; top: 0; left: 0; opacity: 0; transition: opacity var(--drawer-open-transition-duration); }
.drawer .drawerMenuWrap { width: 100%; height: 100%; background: var(--drawer-background-color); overflow-y: auto; position: fixed; z-index: 1000; }
.drawer .drawerMenuWrap { transition: all var(--drawer-close-transition-duration), height 0s var(--drawer-close-transition-duration); }
.drawer .drawerMenuWrap.isActive { transition: all var(--drawer-open-transition-duration), height 0s; }
.drawerFade .drawerMenuWrap { top: 100vh; transition: all var(--drawer-open-transition-duration), top 0s var(--drawer-close-transition-duration); }
.drawerFade .drawerMenuWrap.isActive { top: 0; transition: all var(--drawer-open-transition-duration), top 0s; }
.drawer .drawerMenu { width: 100%; height: auto; position: absolute; }
.drawer .drawerBtnArea { width: var(--drawer-width); height: var(--drawer-height); padding: 0; background: transparent; display: flex; justify-content: center; align-items: flex-start; position: fixed; z-index: 1010; line-height: var(--drawer-height); }
.drawer .drawerBtnArea { transition: all var(--drawer-close-transition-duration), width 0s; }
.drawer.isOpen .drawerBtnArea { transition: all var(--drawer-open-transition-duration), width 0s; }
.drawer .drawerBtn { width: var(--drawer-width); height: var(--drawer-height); border: 2px solid var(--drawer-border-color); background: var(--drawer-background-color); display: inline-block; box-sizing: border-box; position: relative; }
.drawer .drawerBtn:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); cursor: pointer; outline: none; }
.drawer .iconDrawer { width: 26px; height: 2px; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: var(--drawer-bar-color); }
.drawer .iconDrawer::before { width: 26px; height: 2px; display: block; content: ''; position: absolute; top: 0; left: 10px; margin-top: -8px; margin-left: -10px; background: var(--drawer-bar-color); }
.drawer .iconDrawer::after { width: 26px; height: 2px; display: block; content: ''; position: absolute; top: 0; left: 10px; margin-top: 8px; margin-left: -10px; background: var(--drawer-bar-color); }
.drawer .iconDrawer, .drawer .iconDrawer::before, .drawer .iconDrawer::after { transition: all var(--drawer-close-transition-duration); }
.drawer.isOpen .iconDrawer, .drawer.isOpen .iconDrawer::before, .drawer.isOpen .iconDrawer::after { transition: all var(--drawer-open-transition-duration); }
.drawer.isOpen .drawerBtn.isActive .iconDrawer { height: 0; }
.drawer.isOpen .drawerBtn.isActive .iconDrawer::before { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.drawer.isOpen .drawerBtn.isActive .iconDrawer::after { margin-top: 0; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
.drawer .drawerMenuList { width: 100%; height: auto; border-top: 1px solid #E9E9E9; }
.drawer .drawerMenuList li { width: 100%; height: auto; padding: 0; border-bottom: 1px solid #E9E9E9; background: var(--drawer-menu-background-color); line-height: var(--drawer-height); }
.drawer .drawerMenuList a.isSelected { background: var(--drawer-menu-selected-background-color); }
.drawer .drawerMenuList a { height: 100%; padding: 0 0 0 calc(20px + var(--safe-area-inset-left)); display: block; }
.drawerTopRight.drawerHorizontal .drawer .drawerMenuList a, .drawerBottomRight.drawerHorizontal .drawer .drawerMenuList a { padding: 0 0 0 20px }
/* Alignment top or bottom */
.drawerBottomLeft.drawerVertical .drawerMenuWrap, .drawerBottomRight.drawerVertical .drawerMenuWrap { display: flex; align-items: flex-end; }
.drawerBottomLeft .drawerMenuWrap { justify-content: flex-start; }
.drawerBottomRight .drawerMenuWrap { justify-content: flex-end; }
/* .drawerVertical .drawerMenuWrap */
.drawerTopLeft.drawerVertical .drawer .drawerMenuWrap, .drawerTopRight.drawerVertical .drawer .drawerMenuWrap { height: calc(100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - var(--drawer-height)); top: -100%; left: 0; opacity: 1; }
.drawerTopLeft.drawerVertical .drawer.isOpen .drawerMenuWrap.isActive, .drawerTopRight.drawerVertical .drawer.isOpen .drawerMenuWrap.isActive { top: calc(var(--safe-area-inset-top) + var(--drawer-height)); }
.drawerBottomLeft.drawerVertical .drawer .drawerMenuWrap, .drawerBottomRight.drawerVertical .drawer .drawerMenuWrap { height: calc(100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - var(--drawer-height)); top: 150%; left: 0; opacity: 1; }
.drawerBottomLeft.drawerVertical .drawer.isOpen .drawerMenuWrap.isActive, .drawerBottomRight.drawerVertical .drawer.isOpen .drawerMenuWrap.isActive { top: 0; }
/* .drawerHorizontal .drawerMenuWrap */
.drawerTopLeft.drawerHorizontal .drawer .drawerMenuWrap { top: var(--safe-area-inset-top); left: -100%; opacity: 1; }
.drawerTopLeft.drawerHorizontal .drawer.isOpen .drawerMenuWrap.isActive { top: var(--safe-area-inset-top); left: 0; opacity: 1; }
.drawerTopRight.drawerHorizontal .drawer .drawerMenuWrap { top: var(--safe-area-inset-top); right: -100%; opacity: 1; }
.drawerTopRight.drawerHorizontal .drawer.isOpen .drawerMenuWrap.isActive { top: var(--safe-area-inset-top); right: 0; opacity: 1; }
.drawerBottomLeft.drawerHorizontal .drawer .drawerMenuWrap { height: calc(100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - var(--drawer-height)); top: 0; left: -100%; opacity: 1; }
.drawerBottomLeft.drawerHorizontal .drawer.isOpen .drawerMenuWrap.isActive { top: 0; left: 0; opacity: 1; }
.drawerBottomRight.drawerHorizontal .drawer .drawerMenuWrap { height: calc(100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - var(--drawer-height)); top: 0; right: -100%; opacity: 1; }
.drawerBottomRight.drawerHorizontal .drawer.isOpen .drawerMenuWrap.isActive { top: 0; right: 0; opacity: 1; }
/* .drawerFade .drawerMenuWrap */
.drawerTopLeft.drawerFade .drawer .drawerMenuWrap, .drawerTopRight.drawerFade .drawer .drawerMenuWrap { height: calc(100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - var(--drawer-height)); left: 0; opacity: 0; }
.drawerTopLeft.drawerFade .drawer.isOpen .drawerMenuWrap.isActive, .drawerTopRight.drawerFade .drawer.isOpen .drawerMenuWrap.isActive { top: calc(var(--safe-area-inset-top) + var(--drawer-height)); opacity: 1; }
.drawerBottomLeft.drawerFade .drawer .drawerMenuWrap, .drawerBottomRight.drawerFade .drawer .drawerMenuWrap { height: calc(100% - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - var(--drawer-height)); left: 0; opacity: 0; }
.drawerBottomLeft.drawerFade .drawer.isOpen .drawerMenuWrap.isActive, .drawerBottomRight.drawerFade .drawer.isOpen .drawerMenuWrap.isActive { top: 0; opacity: 1; }
/* .drawerMenu */
.drawerTopLeft.drawerHorizontal .drawer .drawerMenu { width: calc(100% - var(--drawer-width) - var(--safe-area-inset-right)); top: var(--drawer-height); left: 0; }
.drawerTopRight.drawerHorizontal .drawer .drawerMenu { width: calc(100% - var(--drawer-width) - var(--safe-area-inset-left)); top: var(--drawer-height); right: 0; }
.drawerBottomLeft.drawerHorizontal .drawer .drawerMenu { width: calc(100% - var(--drawer-width) - var(--safe-area-inset-right)); position: absolute; top: var(--safe-area-inset-top); left: 0; }
.drawerBottomRight.drawerHorizontal .drawer .drawerMenu { width: calc(100% - var(--drawer-width) - var(--safe-area-inset-left)); position: absolute; top: var(--safe-area-inset-top); right: 0; }
.drawerBottomLeft .drawer .drawerMenu, .drawerBottomRight .drawer .drawerMenu { width: 100%; height: auto !important; margin-top: auto; position: static; }
/* .drawerVertical .drawerBtnArea */
.drawerTopLeft.drawerVertical .drawer .drawerBtnArea { height: calc(var(--drawer-height) + var(--safe-area-inset-top)); top: 0; left: var(--safe-area-inset-left); }
.drawerTopRight.drawerVertical .drawer .drawerBtnArea { height: calc(var(--drawer-height) + var(--safe-area-inset-top)); top: 0; right: var(--safe-area-inset-right); }
.drawerBottomLeft.drawerVertical .drawer .drawerBtnArea { height: calc(var(--drawer-height) + var(--safe-area-inset-bottom)); bottom: 0; left: var(--safe-area-inset-left); }
.drawerBottomRight.drawerVertical .drawer .drawerBtnArea { height: calc(var(--drawer-height) + var(--safe-area-inset-bottom)); bottom: 0; right: var(--safe-area-inset-right); }
/* .drawerHorizontal .drawerBtnArea */
.drawerTopLeft.drawerHorizontal .drawer .drawerBtnArea { top: 0; left: var(--safe-area-inset-left); }
.drawerTopLeft.drawerHorizontal .drawer.isOpen .drawerBtnArea { left: calc(100% - var(--drawer-width) - var(--safe-area-inset-right)); }
.drawerBottomLeft.drawerHorizontal .drawer .drawerBtnArea { bottom: var(--safe-area-inset-bottom); left: var(--safe-area-inset-left); }
.drawerBottomLeft.drawerHorizontal .drawer.isOpen .drawerBtnArea { left: calc(100% - var(--drawer-width) - var(--safe-area-inset-right)); }
.drawerTopRight.drawerHorizontal .drawer .drawerBtnArea { top: 0; right: var(--safe-area-inset-right); }
.drawerTopRight.drawerHorizontal .drawer.isOpen .drawerBtnArea { top: 0; right: calc(100% - var(--drawer-width) - var(--safe-area-inset-left)); }
.drawerBottomRight.drawerHorizontal .drawer .drawerBtnArea { bottom: var(--safe-area-inset-bottom); right: var(--safe-area-inset-right); }
.drawerBottomRight.drawerHorizontal .drawer.isOpen .drawerBtnArea { right: calc(100% - var(--drawer-width) - var(--safe-area-inset-left)); }
/* .drawerFade .drawerBtnArea */
.drawerTopLeft.drawerFade .drawer .drawerBtnArea { height: calc(var(--drawer-height) + var(--safe-area-inset-top)); top: 0; left: var(--safe-area-inset-left); }
.drawerTopRight.drawerFade .drawer .drawerBtnArea { height: calc(var(--drawer-height) + var(--safe-area-inset-top)); top: 0; right: var(--safe-area-inset-right); }
.drawerBottomLeft.drawerFade .drawer .drawerBtnArea { height: calc(var(--drawer-height) + var(--safe-area-inset-bottom)); bottom: 0; left: var(--safe-area-inset-left); }
.drawerBottomRight.drawerFade .drawer .drawerBtnArea { height: calc(var(--drawer-height) + var(--safe-area-inset-bottom)); bottom: 0; right: var(--safe-area-inset-right); }
/* drawer mega menu */
.drawer .toggleMenu li { border: none; border-top: 1px solid #E9E9E9; text-indent: 20px; }
.drawer .toggleMenu .toggleMenu li { text-indent: 40px; }
.drawer .toggleMenu .toggleMenu .toggleMenu li { text-indent: 60px; }
.drawer .toggleMenu .toggleMenu .toggleMenu .toggleMenu li { text-indent: 80px; }
.crossToggleSW { width: 100%; height: 16px; }
.cross { width: 14px; height: 14px; margin: 0 4px 0 0; display: inline-block; transform: rotate(-45deg); transition: all 0.2s ease-in-out 0s; }
.cross::before, .cross::after { height: 14px; width: 1.5px; background: currentColor; position: absolute; left: 7px; content: ' '; }
.cross::before { transform: rotate(45deg); }
.cross::after { transform: rotate(-45deg); }
.crossToggleSW.isActive .cross { transform: rotate(-135deg); opacity: 1; }
.crossToggleSW.isActive .cross::before, .crossToggleSW.isActive .cross::after { transform: rotate(45deg); background: currentColor; }
.toggleMenu { display: none; }
@media screen and (min-width: 900px) {
  .glbHeader .toggleMenu.isActive ul { display: flex; flex-flow: column; }
  .glbHeader .toggleMenu.isActive ul a { background: #FFF; }
  .glbHeader .glbNav .megaMenuBox.isActive { min-width: 120px; position: absolute; }
  .glbHeader .glbNav .megaMenuBox.isActive .megaMenuBox.isActive { position: relative; }
  .glbHeader .drawerExport .toggleMenu.isActive ul a { padding-left: 0; font-size: calc(var(--nav-font-size) * 0.9); }
  .toggleMenu li { width: 100%; height: 100%; position: relative; text-indent: 12px; }
}
/* other setting */
.drawerTopLeft.drawerFade .drawer .drawerBtnArea > a:not(.drawerBtn), .drawerTopRight.drawerFade .drawer .drawerBtnArea > a:not(.drawerBtn), 
.drawerBottomLeft.drawerFade .drawer .drawerBtnArea > a:not(.drawerBtn), .drawerBottomRight.drawerFade .drawer .drawerBtnArea > a:not(.drawerBtn) { display: none; }
.drawerTopLeft.drawerHorizontal .drawer .drawerBtnArea > a:not(.drawerBtn), .drawerBottomLeft.drawerHorizontal .drawer .drawerBtnArea > a:not(.drawerBtn), 
.drawerTopRight.drawerHorizontal .drawer .drawerBtnArea > a:not(.drawerBtn), .drawerBottomRight.drawerHorizontal .drawer .drawerBtnArea > a:not(.drawerBtn) { display: none; }
.drawer .drawerBtnArea > * { transition: all var(--drawer-close-transition-duration), border-color 0s; }
.drawer.isOpen .drawerBtnArea > * { transition: all var(--drawer-open-transition-duration), border-color 0s; }
/* Hide scrollbar    for desktop Safari => set in javascript overflow: auto; */
.stopScroll::-webkit-scrollbar { display: none; /* Chrome and Safari */ }
.stopScroll { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ }

/*-------------------------------------
  Go top button CSS (z-index: 500)
-------------------------------------*/
#goTopBtn { width: 32px; height: 32px; margin: auto; border: 1px solid var(--gotop-color); border-radius: 2px; background: var(--gotop-background); position: fixed; z-index: 500; transition: all 0.2s linear 0s; }
#goTopBtn::before { width: 8px; height: 8px; margin: 12px auto; border: 1.5px solid var(--gotop-color); border-bottom: none; border-right: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#goTopBtn { bottom: 60px; right: -40px; }
#goTopBtn.isActive { right: 4px; opacity: 1; }

/*-------------------------------------
  TinyMCE
-------------------------------------*/
body > .tox-tinymce:not(.tox-tinymce-inline) { width: 0 !important; height: 0 !important; border: none; position: fixed; top: -100px; left: 0; z-index: -1; font-family: Arial, sans-serif; }
body > .tox-tinymce-aux { z-index: 160010; }
body > .tox-tinymce-aux.tox .tox-button { min-height: 30px; font-weight: 400; }
body > .tox-tinymce-aux.tox .tox-tbtn { cursor: pointer; }
body > .tox-tinymce-aux.tox .tox-tbtn:focus { background: 0 0 transparent; }
body > .tox-tinymce-aux.tox .tox-form__group label { margin: 0; padding: 0; text-align: center; }
body > .tox-tinymce-aux .tox-form__group .tox-form__controls-h-stack { margin-top: -10px; padding: 0 4px; }
body > .tox-tinymce-aux .tox-form__group .tox-form__controls-h-stack .tox-textfield { text-align: center; }
body > .tox-tinymce-aux.tox:not([dir="rtl"]) .tox-image-tools__toolbar > .tox-button + .tox-slider { margin-left: 0; padding: 0 8px; }
body > .tox-tinymce-aux.tox:not([dir="rtl"]) .tox-image-tools__toolbar > .tox-slider + .tox-button { margin-left: 0; }
body > .tox-tinymce-aux.tox:not([dir="rtl"]) .tox-image-tools__toolbar > .tox-slider:not(:first-of-type) { margin: 0 8px; }
body > .tox-tinymce-aux.tox .tox-slider__rail { min-width: 30px; }
body > .tox-tinymce-aux.tox .tox-slider__handle { margin-left: 7px; }
body > .tox-tinymce-aux.tox .tox-slider .tox-label { padding: 0; position: absolute; top: -20px; }
body > .tox-tinymce-aux.tox .tox-dialog__content-js { max-height: calc(100vh - 102px); }
body > .tox-tinymce-aux.tox .tox-spacer { height: 100%; text-align: center; }
body > .tox-tinymce-aux.tox .tox-spacer #cropSizeInfo { height: 100%; display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: center; font-size: 14px; }
body > .tox-tinymce-aux.tox .tox-spacer #cropSizeInfo span { margin: 0 4px; display: inline-block; }
body > .tox-tinymce-aux.tox .tox-spacer label { padding: 0 0 5.5px; line-height: 1; }
body > .tox-tinymce-aux.tox input[type="range"] { width: 90%; min-width: 30px; max-width: 300px; -webkit-appearance: none; appearance: none; cursor: pointer; }
body > .tox-tinymce-aux.tox input[type="range"]:focus { outline: none; }
body > .tox-tinymce-aux.tox input[type="range"]::-webkit-slider-runnable-track { height: 10px; border: 1px solid #CCC; border-radius: 3px; background: transparent; -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; }
body > .tox-tinymce-aux.tox input[type="range"]::-webkit-slider-thumb { height: 24px; width: 14px; margin-top: -8px; border: 2px solid #185d8c; border-radius: 3px; background: #207ab7; -webkit-appearance: none; appearance: none; cursor: pointer; }
body > .tox-tinymce-aux.tox input[type="range"]::-moz-focus-outer { border: 0; }
body > .tox-tinymce-aux.tox input[type="range"]::-moz-range-track { height: 8px; border: 1px solid #CCC; border-radius: 3px; background: transparent; -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; }
body > .tox-tinymce-aux.tox input[type="range"]::-moz-range-thumb { height: 20px; width: 10px; border: 2px solid #185d8c; border-radius: 3px; background: #207ab7; cursor: pointer; }
body > .tox-tinymce-aux.tox .tox-image-tools__image[data-imageratio] .tox-croprect-handle:not(.tox-croprect-handle-move) { display: none; }
body > .tox-tinymce-aux.tox .tox-image-tools__image[data-cropratio] .tox-croprect-handle:not(.tox-croprect-handle-move) { display: none; }
body > .tox-tinymce.tox-tinymce-inline { z-index: 0; min-height: 40px; opacity: 0; transition: opacity 0.1s; }
body > .tox-tinymce.tox-tinymce-inline.isFixedWidth { opacity: 1; }
body > .tox-tinymce.tox-tinymce-inline .tox-toolbar__group { flex-flow: row nowrap; }
body > .tox-tinymce-aux.tox .tox-croprect-block { display: none; }
@media screen and (min-width: 641px) and (min-height: 401px) {
  body > .tox-tinymce-aux.tox .tox-button { transition: all 0.3s; }
  body > .tox-tinymce-aux.tox .tox-tbtn:hover { background: #dee0e2; border: 0; box-shadow: none; color: #222f3e; }
  body > .tox-tinymce-aux.tox .tox-textfield { width: 60px; }
  body > .tox-tinymce-aux.tox .tox-slider__rail { max-width: 300px; }
}

/*-------------------------------------
  Media uploader
-------------------------------------*/
.media-modal.wp-core-ui { text-align: left; font-family: arial, sans-serif; font-size: initial; }
.media-modal.wp-core-ui button { min-height: auto; font-family: arial; }
.media-modal.wp-core-ui .button { width: 120px; min-height: auto; padding: 0; font-family: arial, sans-serif; font-weight: 400; line-height: 2.1; }
.media-modal.wp-core-ui .trash-attachment { display: none; }
.media-modal.wp-core-ui .media-modal-content .media-toolbar-primary .media-button { margin: 10px 0 0; }
.media-modal.wp-core-ui .media-modal-content .media-toolbar-primary .media-button:first-child { margin-left: auto; }
.media-modal.wp-core-ui .button.button-hero { width: auto; min-height: 46px; }
.media-modal.wp-core-ui .media-menu-item { font-family: arial, sans-serif; min-height: initial; }
.media-modal.wp-core-ui .wp-core-ui select { min-height: 30px; max-width: 25rem; padding: 0 24px 0 8px; border-color: #8c8f94; border-radius: 3px; font-size: 14px; line-height: 2; color: #2c3338; -webkit-appearance: none; appearance: none; }
.media-modal.wp-core-ui #media-search-input { height: 30px; margin: 32px 0 0; padding: 2px; -webkit-appearance: none; appearance: none; line-height: 1.6; font-size: 13px; }
.media-modal.wp-core-ui .edit-selection { display: none; }
.media-modal.wp-core-ui .isHideForce li.attachment .thumbnail, .media-modal.wp-core-ui .isHideForce .load-more-wrapper, .media-modal.wp-core-ui .isHideForce .media-sidebar { opacity: 0; }
.media-modal.wp-core-ui li.attachment .thumbnail { opacity: 1; transition: opacity 0.2s; }
.media-modal.wp-core-ui .media-sidebar { width: 100%; max-width: 80vw; min-height: 80vh; opacity: 1; right: -100%; transition: opacity 0.2s, right 0.2s; }
.media-modal.wp-core-ui .media-sidebar.isActive { right: 0; }
.media-modal.wp-core-ui .media-sidebar .media-uploader-status { padding: 0; }
.media-modal.wp-core-ui .media-sidebar .media-uploader-status h2, .media-modal.wp-core-ui .media-sidebar .upload-details, .media-modal.wp-core-ui .media-sidebar .media-progress-bar { display: none; }
.media-modal.wp-core-ui .media-sidebar .upload-errors { margin: 24px 0 8px; }
.media-modal.wp-core-ui .edit-attachment, .media-modal.wp-core-ui .delete-attachment, .media-modal.wp-core-ui #alt-text-description { display: none; }
.media-modal.wp-core-ui .media-sidebar .attachment-info { margin: 0; padding: 0 0 4px; border: none; }
.media-modal.wp-core-ui .media-sidebar .mejs-controls { box-sizing: border-box; }
.media-modal.wp-core-ui .media-sidebar .mejs-overlay-button { opacity: 0.75; }
.media-modal.wp-core-ui .media-sidebar .mejs-currenttime-container { color: #FFF; }
.media-modal.wp-core-ui .media-sidebar .mejs-duration-container { color: #FFF; display: none; }
.media-modal.wp-core-ui .media-sidebar .mejs-time-handle-content { width: 2px; height: 16px; border-width: 2px; border-top: 0; border-bottom: 0; top: -7px; left: -4px; transform: scale(1); }
.media-modal.wp-core-ui .media-sidebar .has-description { padding-top: 10px; border-top: 1px solid #dcdcde; }
.media-modal.wp-core-ui .media-sidebar .attachment-details { overflow: hidden; }
.media-modal.wp-core-ui .media-sidebar #attachment-details-alt-text { font-size: 12px; line-height: 1.4; }
.media-modal.wp-core-ui .media-sidebar #attachment-details-title { font-size: 12px; line-height: 1.4; }
.media-modal.wp-core-ui .media-sidebar #attachment-details-caption { font-size: 12px; line-height: 1.4; }
.media-modal.wp-core-ui .media-sidebar #attachment-details-description { font-size: 12px; line-height: 1.4; }
.media-modal.wp-core-ui .media-sidebar .copy-attachment-url { width: calc(98% + 2px); font-size: 12px; line-height: 1.4; }
.media-modal.wp-core-ui .media-sidebar .filename { display: none; }
.media-modal.wp-core-ui .media-sidebar .attachment-details-copy-link { opacity: 0; position: absolute; left: -100%; }
.media-modal.wp-core-ui .media-sidebar label[for="attachment-details-copy-link"] { display: none; }
.media-modal.wp-core-ui .media-sidebar .copy-to-clipboard-container { margin: 0 0 60px; padding: 0 2px 0 0; }
.media-modal.wp-core-ui .media-sidebar .attachment-details .setting .name, .compat-item label span, .media-sidebar .checkbox-label-inline, .media-sidebar .setting .name { padding: 0 2px 2px; }
.media-modal.wp-core-ui .media-sidebar .copy-to-clipboard-container .success { padding: 4px; vertical-align: top; }
.media-modal.wp-core-ui .media-sidebar .attachment-details + * { display: none; }
.media-modal.wp-core-ui .formMsg { margin: 0 0 5px; padding: 0; opacity: 0; font-size: 110%; transition: opacity 0.5s; }
.media-modal.wp-core-ui .media-sidebar .copy-to-clipboard-container .success, .media-modal.wp-core-ui .formMsg { color: var(--form-message-color); font-family: var(--form-message-font-family); font-size: calc(var(--form-message-font-size) * 0.9); font-weight: var(--form-message-font-weight); }
.media-modal.wp-core-ui .formMsg.isActive { opacity: 1; }
.media-modal.wp-core-ui .media-toolbar .formMsg { position: absolute; bottom: -10px; white-space: nowrap; text-indent: 2px; }
.media-modal .media-toolbar .spinner { top: 0; }
.media-frame .spinner { top: -3px; left: -5px; }
.media-frame .mediaInfoBtnWrap .mediaInfoBtn { width: auto; min-width: 40px; padding: 0 2px; background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 3px; position: absolute; top: 1px; right: 6px; color: #a7aaad; font-size: 14px; line-height: 18px; }
.media-frame .mediaInfoBtnWrap .mediaInfoBtn:hover, .media-frame .mediaInfoBtn:focus { box-shadow: none; color: inherit; outline: none; color: #a7aaad; }
.media-frame .mediaInfoBtnWrap .mediaInfoBtn.isActive { background: #f6f7f7; border: 1px solid #2271b1; opacity: 1; color: #2271b1; }
.media-frame-toolbar .media-toolbar-primary { width: 100%; float: none; display: flex; justify-content: space-between; }
.media-frame-toolbar .media-button-select { position: static; order: 2; }
.media-frame-toolbar .deleteMediaBtn { position: static; order: 1; }
@media screen and (max-width: 370px) {
  .media-modal.wp-core-ui .media-router .media-menu-item, .media-frame .mediaInfoBtnWrap .mediaInfoBtn { font-size: calc(14 * 100vw / 400); }
}
@media screen and (min-width: 641px) and (min-height: 401px) {
  .media-modal.wp-core-ui .attachments-browser .media-toolbar-primary { max-width: 45%; }
  .media-modal.wp-core-ui .attachments-browser.has-load-more .attachments-wrapper { top: 82px; }
  .media-modal.wp-core-ui .media-sidebar { width: 220px; max-width: 70%; right: 0; }
  .media-modal.wp-core-ui .attachment-info .thumbnail img { max-width: 88px; }
  .media-modal.wp-core-ui .media-sidebar .copy-to-clipboard-container { padding: 0 2px; }
  .media-modal.wp-core-ui .media-sidebar .attachment-details .setting .name, .compat-item label span, .media-sidebar .checkbox-label-inline, .media-sidebar .setting .name { padding: 0; }
  .media-modal.wp-core-ui .media-sidebar .copy-attachment-url { width: 100%; }
  .media-frame .mediaInfoBtnWrap .mediaInfoBtn { display: none; }
  .media-modal.wp-core-ui .media-toolbar .formMsg { left: 145px; bottom: -10px; }
}
@media screen and (min-width: 783px) {
  .media-modal.wp-core-ui .media-toolbar .formMsg { left: 140px; bottom: 10px; }
}
@media screen and (min-width: 900px) {
  .media-modal.wp-core-ui .media-sidebar .copy-to-clipboard-container { margin: 0; }
  .media-modal.wp-core-ui .media-sidebar { width: 267px; }
  .media-modal.wp-core-ui .attachment-info .thumbnail img { max-width: 120px; }
}

/*-------------------------------------
  Edit media for TinyMCE
-------------------------------------*/
#editMedia { width: 0; height: 0; display: none !important; position: absolute; z-index: -1; top: 0; left: 0; }
.editMediaBtn { width: 24px; height: 24px; padding: 0; border: 1px solid #2271b1; background-color: rgba(255,255,255,0.6); display: none; position: absolute; top: 8px; left: 8px; box-sizing: border-box; cursor: pointer; }
.editMediaBtn::before { padding: 0; font-family: dashicons; content: '\f165'; color: #2271b1; }
.editMediaBtn.isActive { display: inline-block; }
.editMediaBtn.isActive { display: none; }
.selection-view .editMediaBtn { display: none; }
.deleteMediaBtn { width: auto; display: inline-block; position: absolute; right: 10px; left: calc(-100vw + 152px); }
.editMediaLinkWrap { margin: 4px 2px 0; }
.updateMediaInfoLinkWrap { margin: 2px 2px 0; }
.editMediaLink, .updateMediaInfoLink { padding: 4px 2px; font-size: 110%; }
@media screen and (min-width: 641px) and (min-height: 401px) {
  .deleteMediaBtn { left: -120%; }
}

/*-------------------------------------
  Dashicons
-------------------------------------*/
.dashicons, .dashicons-before:before { transition: none; }
.dashicons-arrow-right-alt2 { color: #999; vertical-align: middle; }

/*-------------------------------------
  Avatar in admin bar 
-------------------------------------*/
#wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img, #wpadminbar #wp-admin-bar-my-account.with-avatar > a img { width: 16px; border-radius: 24px; object-fit: cover; }
#wp-admin-bar-user-info .avatar { border-radius: 32px; object-fit: cover; }

/*-------------------------------------
  Form
-------------------------------------*/
.snsWrap form {}
.snsWrap legend { width: 100%; text-align: center; margin: 0 auto; }
.snsWrap select { background-color: transparent; vertical-align: baseline; }
.snsWrap textarea, .snsWrap input:not(.button) { border: 1px solid var(--form-border-color); font-size: 1.0rem; line-height: 1.6; font-family: Arial, sans-serif; color: #222; }
.snsWrap textarea { padding: 2px; resize: none; }
.snsWrap input[type="checkbox"], .snsWrap input[type="radio"] { vertical-align: 0; display: inline; }
.snsWrap input[type="text"], .snsWrap input[type="tel"], .snsWrap input[type="email"], .snsWrap input[type="url"], .snsWrap input[type="search"], .snsWrap input[type="password"], .snsWrap input[type="color"] { height: 30px; padding: 2px 4px; border-radius: 2px; }
.snsWrap input[type="button"], .snsWrap input[type="reset"], .snsWrap input[type="submit"], .snsWrap button { min-height: 30px; font-size: 1.0rem; line-height: 2.1; -moz-appearance: none; -webkit-appearance: none; appearance: none; }
.snsWrap button {}
.snsWrap input::-webkit-input-placeholder { padding-top: 0.2rem; }
.snsWrap input:focus:not([type="range"]), .snsWrap select:focus, .snsWrap textarea:focus, .snsWrap button:focus { outline: none; box-shadow: 0 0 0 2px var(--form-outline-color); }
.snsWrap .select { position: relative; display: inline-block; }
.snsWrap .select select { height: 30px; padding: 0 25px 0 5px; -moz-appearance: none; -webkit-appearance: none; appearance: none; border: 1px solid var(--form-border-color); border-radius: 2px; background: #FFF url(../image/select.svg) no-repeat calc(100% + 1px) top/auto 100%; color: #222; font-size: 1.0rem; line-height: 1.2; cursor: pointer; }
.snsWrap .select select::-ms-expand { display: none; }
.snsWrap .confirm .select select { cursor: default; }
.snsWrap .select select[multiple="multiple"], .snsWrap .select select[multiple] { height: auto; max-height: 90px; padding: 0; background-image: none; }
.snsWrap .select select[multiple="multiple"] option, .snsWrap .select select[multiple] option { padding: 0 8px; }
.snsWrap input.hidden[type="radio"], .snsWrap input.hidden[type="checkbox"] { display: none; }
.snsWrap .radioWrap input[type="radio"], .snsWrap .checkboxWrap input[type="checkbox"] { display: none; }
.snsWrap .radio, .snsWrap .checkbox { margin: 0px 14px 0px 0px; padding: 0px 0px 0px 26px; display: inline-block; box-sizing: border-box; transition: var(--form-transition); position: relative; cursor: pointer; }
.snsWrap .confirm .radio, .snsWrap .confirm .checkbox { cursor: default; }
.snsWrap .radio::before, .snsWrap .checkbox::before { border-color: var(--form-radio-color); opacity: 0.7; }
.snsWrap .radio::before { width: 16px; height: 16px; margin-top: -11px; background: #FFF; border: 2px solid var(--form-radio-color); border-radius: 10px; display: block; content: ''; position: absolute; top: 50%; left: 0px; transition: var(--form-transition); }
.snsWrap .radio::after { width: 10px; height: 10px; margin-top: -6px; border-radius: 50%; background-color: var(--form-radio-checked-color); display: block; content: ''; position: absolute; top: 50%; left: 5px; opacity: 0; transition: var(--form-transition); }
.snsWrap .checkbox::before { width: 16px; height: 16px; margin-top: -10px; background: #FFF; border: 2px solid var(--form-radio-color); border-radius: 2px; position: absolute; top: 50%; left: 0px; display: block; content: ''; transition: var(--form-transition); }
.snsWrap .checkbox::after { width: 5px; height: 9px; margin-top: -7px; border-right: 3px solid var(--form-radio-color); border-bottom: 3px solid rgb(102,102,102); display: block; content: ''; position: absolute; top: 50%; left: 6px; opacity: 0; transform: rotate(45deg); transition: var(--form-transition); }
.snsWrap input[type="radio"]:checked + .radio::after, .snsWrap input[type="checkbox"]:checked + .checkbox::after { border-color: var(--form-radio-checked-color); opacity: 0.7; }
.snsWrap .radio:focus::before, .snsWrap .checkbox:focus::before { box-shadow: 0 0 0 2px var(--form-radio-color); }

/*-------------------------------------
  Spinner
-------------------------------------*/
@keyframes spinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.snsWrap .spinner { width: 18px; height: 18px; border-radius: 18px; background: #808080; display: inline-block; visibility: hidden; position: relative; top: 6px; left: 5px; animation: spinner 1.5s linear infinite; }
.snsWrap .spinner::after { width: 4px; height: 4px; margin-left: -2px; border-radius: 4px; background: #FFF; position: absolute; top: 2px; left: 50%; content: ''; }
.snsWrap .spinner.isActive { visibility: visible; }
.snsWrap .btnArea { max-width: 300px; margin: auto; padding: 0; display: flex; justify-content: space-between; align-items: center; }
.snsWrap .btnArea .spinner { top: 0; left: 0; }

/*-------------------------------------
  Button
-------------------------------------*/
.button, a.button, input.button { width: 120px; max-width: 300px; height: 30px; margin: 5px 0 5px 10px; padding: 0 5px; border: 1px solid var(--button-color); border-radius: 2px; background: var(--button-background-color); box-sizing: border-box; display: inline-block; color: var(--button-color); line-height: 2.1; text-align: center; font-size: 14px; font-weight: 400; cursor: pointer; appearance: none; }
input.button { padding-bottom: 4px; }
.btnArea .button { margin: 10px auto; }
.snsWrap .button { transition: background 0.3s, color 0.3s; }
@media screen and (min-width: 900px) {
  .snsWrap .button:not(.metaBtn):hover { background: var(--button-color); color: var(--button-background-color); }
}

/*-------------------------------------
  SNS button
-------------------------------------*/
.snsPostMetaFormWrap, .snsUserMetaFormWrap { max-width: 100vw; margin: 0 0 2px; display: inline-block; overflow-x: auto; position: relative; text-align: right; }
.snsPostMetaForm, .snsUserMetaForm { max-width: 96vw; display: inline; white-space: nowrap; }
.snsPostMetaForm .metaBtnWrap, .snsUserMetaForm .metaBtnWrap { width: auto; height: auto; margin: 0 0 0 5px; display: inline-block; }
.snsPostMetaForm .metaBtn, .snsUserMetaForm .metaBtn { width: auto; height: auto; margin: 0; padding: 0 5px; overflow: hidden; position: relative; font-size: 12px; line-height: 26px; font-weight: 600; vertical-align: bottom; transition: background-color 0.5s; }
.snsPostMetaForm .metaBtn { border: 1px solid var(--post-meta-button-color); color: var(--post-meta-button-color); }
.snsPostMetaForm .metaBtn.isPositive { background: var(--post-meta-button-color); color: #FFF; }
.snsUserMetaForm .metaBtn { border: 1px solid var(--user-meta-button-color); color: var(--user-meta-button-color); }
.snsUserMetaForm .metaBtn.isPositive { background: var(--user-meta-button-color); color: #FFF; }
.snsPostMetaForm .metaBtn.disabled, .snsUserMetaForm .metaBtn.disabled { cursor: default; opacity: 0.7; }
.snsPostMetaForm .metaCount, .snsUserMetaForm .metaCount { width: auto; height: 15px; margin: 0 5px 4px; display: inline-block; overflow: hidden; text-align: center; vertical-align: bottom; }
.snsPostMetaForm .metaCount .count, .snsUserMetaForm .metaCount .count { padding: 0 2px; display: block; font-size: 15px; font-weight: 600; line-height: 1; }
.snsPostMetaForm .metaCount { border-bottom: 1px solid var(--post-meta-button-color); }
.snsPostMetaForm .metaCount .count { color: var(--post-meta-button-color); }
.snsUserMetaForm .metaCount { border-bottom: 1px solid var(--user-meta-button-color); }

/*-------------------------------------
  Common
-------------------------------------*/
.snsMainSection { width: 96%; margin: 0 auto; }
.snsMainSection.isSingle { width: 100%; }
.snsArticle { margin: 5px auto; }
.snsMainSection .userName { font-size: 14px; font-weight: 600; }
.snsMainSection .userSlug { margin: 0; display: none; font-size: 100%; }
.snsMainSection img.avatar, .snsPersonalHeader img.avatar { width: 48px; height: 48px; border-radius: 24px; object-fit: cover; vertical-align: bottom; }
.postNotExists, .commentNotExists, .userNotExists { margin: 10px 20px; }
.snsMainSection img.reaction { width: 40px; height: 40px; margin: 0 2px; border-radius: 20px; object-fit: cover; }
.snsMainSection .postTitleLink { font-size: 110%; font-weight: 600; }
.snsMainSection .postDate { opacity: 0.75; font-weight: 600; }
.snsMainSection .dashicons-calendar, .snsMainSection .dashicons-category, .snsMainSection .dashicons-tag { margin: 0; color: var(--site-text-color); opacity: 0.75; font-weight: 600; }
.snsMainSection .dashicons-calendar, .snsMainSection .dashicons-tag { display: none; }

/*-------------------------------------
  Form message
-------------------------------------*/
#memberLoginForm .formMsg, .memberLogoutForm .formMsg, #memberLostPasswordForm .formMsg, #memberResetPasswordForm .formMsg, #memberRegisterForm .formMsg, #memberWithdrawalForm .formMsg, #editProfileForm .formMsg, #editPostForm .formMsg, .snsPostMetaForm .formMsg, .snsUserMetaForm .formMsg { width: auto; min-width: 240px; height: auto; margin: 0; padding: 5px 10px; border: 1px solid var(--form-message-color); border-radius: 4px; background: #FFF; display: none; position: fixed; top: 40%; left: 50%; z-index: -1; color: var(--form-message-color); font-family: var(--form-message-font-family); font-size: calc(var(--form-message-font-size) * 1.0); font-weight: var(--form-message-font-weight); line-height: 1.6; text-align: left; white-space: normal; }
#memberLoginForm .formMsg.isActive, .memberLogoutForm .formMsg.isActive, #memberLostPasswordForm .formMsg.isActive, #memberResetPasswordForm .formMsg.isActive, #memberRegisterForm .formMsg.isActive, #memberWithdrawalForm .formMsg.isActive, #editProfileForm .formMsg.isActive, #editPostForm .formMsg.isActive, .snsPostMetaForm .formMsg.isActive, .snsUserMetaForm .formMsg.isActive { display: flex; z-index: 10; transform: translate(-50%, -50%); animation: fadeInOut 2s linear 0s 1 forwards; }
.snsMainSection .formMsg::before, .snsMainSection .formMsg::after, .memberLogoutForm .formMsg::before, .memberLogoutForm .formMsg::after, .snsPostMetaForm .formMsg::before, .snsPostMetaForm .formMsg::after, .snsUserMetaForm .formMsg::before, .snsUserMetaForm .formMsg::after { margin: auto; content: ''; }
@keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 99.9% { opacity: 0; z-index: 1; } 100% { opacity: 0; z-index: -1; } }

/*-------------------------------------
  Pagination
-------------------------------------*/
.snsPagination { margin: 20px auto; font-size: 14px; }
.snsPagination.onlyOnePage { margin: 0 auto; visibility: hidden; }
.snsPagination, .snsPagination .pages { display: flex; flex-flow: nowrap; justify-content: center; align-items: center; }
.snsPagination a, .snsPagination .current { min-width: 30px; height: auto; margin: 0 2px; padding: 0 4px; border: 1px solid #2F67A4; display: inline-block; color: #2F67A4; line-height: 30px; text-align: center; }
.snsPagination .current { background: #2F67A4; color: #FFF; cursor: default; }
.snsPagination .previous, .snsPagination .next { font-size: 120%; line-height: 0.5; }
.snsPagination .hellip { padding: 10px 4px 0; color: #2F67A4; text-decoration-line: none; }
@media screen and (min-width: 900px) {
  .snsPagination { margin: 20px auto; }
}

/*-------------------------------------
  Administrator or editor mypage common
-------------------------------------*/
.disallowedAccount { width: 96%; margin: 10px auto 20px; color: var(--notice-color); font-family: var(--notice-font-family); font-size: var(--notice-font-size); font-weight: var(--notice-font-weight); }
.disallowedAccount li { list-style: disc inside; padding: 0 0 0 10px; }
@media screen and (min-width: 900px) {
  .disallowedAccount { width: 80%; }
}

/*-------------------------------------
  Member form common (register, login, lost password, reset password, withdrawal)
-------------------------------------*/
.memberLoginTogglePanel, .memberTogglePanel { width: 96%; margin: 30px auto; padding: 10px 0 20px; border: 1px solid #CCC; border-radius: 3px; display: none; }
.memberLoginTogglePanel.isActive, .memberTogglePanel.isActive { display: block; }
.memberLoginTogglePanel > h4, .memberLoginTogglePanel > p, .memberTogglePanel > h4, .memberTogglePanel > p { margin: 10px 0; padding: 2px 10px; overflow: hidden; text-align: center; font-size: 100%; }
.memberLoginTogglePanel > h4, .memberTogglePanel > h4 { font-size: 110%; font-weight: 600; opacity: 0.7; }
.memberLoginTogglePanel .formDesc, .memberTogglePanel .formDesc { font-size: 13px; text-align: left; }
.memberLoginTogglePanel input[type="text"], .memberLoginTogglePanel input[type="password"], .memberLoginTogglePanel input[type="email"], .memberTogglePanel input[type="text"], .memberTogglePanel input[type="password"], .memberTogglePanel input[type="email"] { width: 96%; height: 32px; padding: 0 5px; border: 1px solid #CCC; text-align: left; font-size: 14px; }
.memberLoginTogglePanel input[name="user_pass"], .memberLoginTogglePanel input[name="pass1"] { width: calc(96% - 40px); margin-left: 2%; float: left; }
.memberLoginTogglePanel .dashicons, .memberTogglePanel .dashicons { width: 30px; height: 30px; margin: 2px 2% 0 0; float: right; font-family: dashicons; font-size: 18px; line-height: 28px; }
.memberLoginTogglePanel input.button, .memberTogglePanel input.button { width: auto; min-width: 110px; }
.memberLoginTogglePanel .memberLoginToggleLink, .memberTogglePanel .memberToggleLink { margin: 5px 0; }
@media screen and (min-width: 900px) {
  .memberLoginTogglePanel, .memberTogglePanel { width: 600px; margin: 100px auto; }
  .memberLoginTogglePanel .formDesc, .memberTogglePanel .formDesc { width: 80%; margin: auto; }
  .memberLoginTogglePanel input[type="text"], .memberLoginTogglePanel input[type="password"], .memberLoginTogglePanel input[type="email"], .memberTogglePanel input[type="text"], .memberTogglePanel input[type="password"], .memberTogglePanel input[type="email"] { width: 80%; }
  .memberLoginTogglePanel input[name="user_pass"], .memberLoginTogglePanel input[name="pass1"] { width: calc(80% - 40px); margin-left: 10%; }
  .memberLoginTogglePanel .dashicons, .memberTogglePanel .dashicons { margin-right: 10%; }
}

/*-------------------------------------
  Member register
-------------------------------------*/
#memberRegisterForm {}

/*-------------------------------------
  Member login
-------------------------------------*/
#memberLoginForm {}

/*-------------------------------------
  Member logout
-------------------------------------*/
.memberLogoutForm .memberLogoutBtn { cursor: pointer; }

/*-------------------------------------
  Member lost password
-------------------------------------*/
#memberLostPasswordForm {}

/*-------------------------------------
  Member reset password
-------------------------------------*/
#memberResetPasswordForm { display: block; }

/*-------------------------------------
  Member withdrawal
-------------------------------------*/
#memberWithdrawalForm { margin: 30px auto 60px; }
#memberWithdrawalForm textarea { width: 96%; height: 200px; padding: 2px 5px; border: 1px solid #CCC; text-align: left; font-size: 14px; }

/*-------------------------------------
  SNS 404
-------------------------------------*/
.is404 { width: 96%; margin: 40px auto 0; padding: 0; position: relative; }
.is404 .title404 { width: 100%; margin-top: -30px; padding: 0 0 0 10px; overflow: hidden; text-overflow: ellipsis; opacity: 0.75; color: var(--post-title-color); font-size: 150%; font-weight: 600; white-space: nowrap; line-height: 1.4; font-family: serif; font-style: italic; }
@media screen and (min-width: 768px) {
  .is404 .title404 { font-size: 160%; }
}

/*-------------------------------------
  SNS post archive
-------------------------------------*/
.snsArchive { width: 96%; margin: 40px auto 0; padding: 0; position: relative; }
.snsArchive .postListTitle { width: 100%; display: inline-block; position: absolute; top: -30px; left: 0; overflow: hidden; text-overflow: ellipsis; opacity: 0.75; color: var(--post-title-color); font-size: 150%; font-weight: 600; white-space: nowrap; line-height: 1.4; font-family: serif; font-style: italic; }
.snsArchive .postListWrap { margin: 20px 0 0; }
.snsArchive .postBox { width: 100%; margin: 20px auto; padding: 10px; border: 1px solid #CCC; border-radius: 3px; }
.snsArchive .postHead { margin: 0 0 5px; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-end; position: relative; }
.snsArchive .postContent { overflow: hidden; position: relative; z-index: 0; }
.snsArchive .authorWrap { width: 100%; padding: 0 0 2px; flex-grow: 1; font-weight: 600; }
.snsArchive .authorLink { margin: 0 0 0 7px; }
.snsArchive .postMainCategory { width: auto; padding: 0 10px 0 0; position: absolute; top: 0; right: 0; opacity: 0.4; color: var(--post-title-color); font-size: 150%; font-weight: 600; font-family: serif; font-style: italic; }
.snsArchive .postDate { position: absolute; top: 5px; left: 55px; }
.snsArchive .postTitle { width: 100%; overflow: hidden; font-weight: 600; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.snsArchive .postMediaLink { width: 100%; margin: 5px auto 10px; display: block; }
.snsArchive .postAttachment { margin: 0 auto; border-radius: 8px; overflow: hidden; display: flex; flex-flow: row wrap; }
.snsArchive .postAttachment img { width: 100%; height: 100%; object-fit: cover; }
.snsArchive .postExcerpt { margin: 0 0 10px; }
.snsArchive .postList .moreLink { font-size: 90%; }
.snsArchive .postList .moreLink span { font-size: 125%; }
.snsArchive .postMeta { width: 100%; margin: 0 0 5px; font-size: 100%; }
.snsArchive .postMeta .dashicons { margin-left: -25px; }
.snsArchive .postMeta .postCategory { margin: 0 5px 0 0; padding: 0 5px 0 25px; }
.snsArchive .postMeta .postCategoryLink { margin: 0 2px; }
.snsArchive .postMeta .postTag { padding: 0 0 0 4px; display: inline-block; }
.snsArchive .postMeta .postTagLink { margin: 0 5px 0 0; display: inline-block; }
/* archive all (default) */
:root { --post-count: 1; }
@media screen and (min-width: 768px) {
  :root { --post-count: 2; }
}
@media screen and (min-width: 900px) {
  :root { --post-count: 3; }
}
@media screen and (min-width: 1400px) {
  :root { --post-count: 4; }
}
.snsArchive .postList { margin: 10px 0; display: flex; flex-flow: row wrap; gap: 10px; }
.snsArchive .postBox { width: calc(((100% - (var(--post-count) - 1) * 10px) / var(--post-count))); margin: 0; }
.snsArchive .postBox .postAttachment { width: 90%; height: calc(90% / 16 * 9); margin: 0 auto 10px; border-radius: 12px; overflow: hidden; position: relative; }
.snsArchive .postBox .postAttachment img { width: 100%; height: auto; margin: 0; display: inline-block; overflow: hidden; aspect-ratio: 16 / 9; vertical-align: bottom; }
.snsArchive .postBox .postAttachment img:nth-child(2n+1) {}
.snsArchive .postBox .attached1 img { width: 100%; }
.snsArchive .postBox .attached2 img { display: block; position: relative; }
.snsArchive .postBox .attached2::after { width: 2px; height: 100%; margin: auto; background: #FFF; display: block; content: ''; position:absolute; top: 0; left: 50%; right: 50%; }
.snsArchive .postBox .attached2 img { width: 50%; aspect-ratio: 8 / 9; }
.snsArchive .postBox .attached3 { display: block; position: relative; }
.snsArchive .postBox .attached3 img { width: 50%; height: 50%; float: left; }
.snsArchive .postBox .attached3 img:nth-child(1) { aspect-ratio: 8 / 9; }
.snsArchive .postBox .attached3::before { width: 50%; height: 2px; margin: auto; background: #FFF; display: block; content: ''; position:absolute; top: 50%; bottom: 50%; left: 50%; }
.snsArchive .postBox .attached3::after { width: 2px; height: 100%; margin: auto; background: #FFF; display: block; content: ''; position:absolute; top: 0; left: 50%; right: 50%; }
.snsArchive .postBox .attached4 img { width: 50%; height: 50%; float: left; }
.snsArchive .postBox .attached4::before { width: 100%; height: 2px; margin: auto; background: #FFF; display: block; content: ''; position:absolute; top: 50%; bottom: 50%; left: 0; }
.snsArchive .postBox .attached4::after { width: 2px; height: 100%; margin: auto; background: #FFF; display: block; content: ''; position:absolute; top: 0; left: 50%; right: 50%; }
.snsArchive .snsBlock.mediaBlock figure * { object-fit: cover; }

/*-------------------------------------
  SNS search post form
-------------------------------------*/
.searchPostForm { margin: 0; padding: 0; display: flex; flex-flow: row wrap; justify-content: flex-start; }
.searchPostForm .select { max-width: 50%; margin: 5px 0 0 auto; }
.searchPostForm .searchBox { max-width: 400px; margin: 5px 0 0 0; display: flex; flex-grow: 1; }
.searchPostForm .searchPost { width: 100%; }
.searchPostForm .searchPostBtn { width: auto; margin: 0 0 0 5px; }
@media screen and (min-width: 768px) {
  .searchPostForm { justify-content: flex-end; }
  .searchPostForm .select { margin: 5px 5px 0 0; }
}

/*-------------------------------------
  SNS user personal panel
-------------------------------------*/
.snsPersonalHeader { position: relative; }
.snsUserPersonalWrap { margin: 0; background: rgba(0,0,0,0.02); position: relative; }
.snsUserPersonalWrap .userImageProfile { width: 100%; height: var(--personal-image-height); display: block; }
.snsUserPersonalWrap .userImageProfile .userMetaImage { width: 100%; height: var(--personal-image-height); border-bottom: 1px solid var(--link-color); display: inline-block; object-fit: cover; }
.snsUserPersonalWrap .snsUserMetaFormWrap { width: 100%; height: 40px; padding: 6px 0.5%; background: rgba(255,255,255,0.4); position: absolute; top: calc(var(--personal-image-height) - 40px); right: 0; }
.snsUserPersonalWrap img.avatar { width: 90px; max-width: 160px; height: 90px; max-height: 160px; border-radius: 80px; position: absolute; top: var(--personal-image-height); left: 5%; transform: translate(0%, -80%); }
.snsUserPersonalWrap .profileWrap { padding: 20px 4% 5px; overflow: hidden; }
.snsUserPersonalWrap .snsUserPersonal { padding: 20px 0 0; float: left; }
.snsUserPersonalWrap .userName { width: auto; max-width: calc(100% - (5% - 50px + 210 * 100vw / 900)); padding: 2px; overflow: hidden; position: absolute; top: var(--personal-image-height); left: calc(5% - 50px + 210 * 100vw / 900); color: var(--link-color); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; text-shadow: 1px 1px 2px #FFF, -1px -1px 2px #FFF, -1px 1px 2px #FFF, 1px -1px 2px #FFF; }
.snsUserPersonalWrap .userProfile { width: 100%; }
.snsUserPersonalWrap .snsUserPostMainCategory { margin: 5px 0 0 auto; overflow-x: auto; float: right; display: flex; flex-flow: row wrap; }
.snsUserPersonalWrap .mainCategoryLink { max-width: 90px; margin: 5px; display: flex; flex-flow: row wrap; justify-content: center; align-items: flex-end; line-height: 1.2; white-space: nowrap; font-family: serif; }
.snsUserPersonalWrap .mainCategoryLink .userMetaImage { width: 64px; height: 64px; border-radius: 32px; background: rgba(255,255,255,0.6); display: block; object-fit: cover; }
.snsUserPersonalWrap .mainCategoryLink.isSelected { font-weight: 600; }
.snsUserPersonalWrap .mainCategoryLink .userMetaImage { outline: 1px solid #2C84E3; }
.snsUserPersonalWrap .mainCategoryLink.isSelected .userMetaImage { outline: 2px solid #2C84E3; }
.snsUserPersonalWrap .mainCategoryLink .mainCategoryName { border-bottom: 0.5px solid currentColor; }
.snsUserPersonalWrap .mainCategoryLink.isSelected .mainCategoryName { border-width: 1px; }
.snsUserPersonalWrap .mainCategoryLink span + .mainCategoryName { border-bottom: none; }
.snsUserPersonalWrap .mainCategoryLink .count { display: none; font-weight: 600; }
.snsPersonalHeader .mypageTitle { width: 92%; margin: 20px auto 0; opacity: 0.75; font-weight: 600; font-size: 150%; font-family: serif; font-style: italic; line-height: 1.4; }
.snsPersonalHeader .postListLink { width: 92%; max-width: 1400px; margin: -2px auto 2px; position: relative; z-index: 1; text-align: right; }
.snsPersonalHeader .postListLink a { margin: 0 0 0 5px; padding: 2px 4px; border: 1px solid currentColor; font-size: 95%; font-family: serif; }
.snsUserPersonalWrap .userImageProfile.empty { height: var(--personal-image-height-empty); }
.snsUserPersonalWrap .userImageProfile.empty .userMetaImage { width: 100%; height: var(--personal-image-height-empty); }
.snsUserPersonalWrap .userImageProfile.empty + .snsUserMetaFormWrap { top: calc(var(--personal-image-height-empty) - 41px); }
.snsUserPersonalWrap .userImageProfile.empty + .snsUserMetaFormWrap + .avatarLink img.avatar { top: var(--personal-image-height-empty); }
.snsUserPersonalWrap .userImageProfile.empty + .snsUserMetaFormWrap + .avatarLink + .profileWrap .userName { top: var(--personal-image-height-empty); }
@media screen and (min-width: 401px) {
  .snsUserPersonalWrap img.avatar { width: calc(90px + 70 * (100vw - 400px) / 500); max-width: 160px; height: calc(90px + 70 * (100vw - 400px) / 500); max-height: 160px; }
  .snsUserPersonalWrap .userImageProfile.empty + .snsUserMetaFormWrap + .avatarLink img.avatar { top: calc(var(--personal-image-height-empty) + 55 * (100vw - 400px) / 500); }
  .snsUserPersonalWrap .userImageProfile.empty + .snsUserMetaFormWrap + .avatarLink img.avatar { top: var(--personal-image-height-empty); }
}
@media screen and (min-width: 900px) {
  .snsUserPersonalWrap { margin: 0 0 50px; }
  .snsUserPersonalWrap .userImageProfile { height: var(--personal-image-height-pc); }
  .snsUserPersonalWrap .userImageProfile .userMetaImage { width: 100%; height: var(--personal-image-height-pc); }
  .snsUserPersonalWrap .snsUserMetaFormWrap { padding: 6px 4%; top: calc(var(--personal-image-height-pc) - 40px); }
  .snsUserPersonalWrap img.avatar { width: 160px; height: 160px; top: var(--personal-image-height-pc); }
  .snsUserPersonalWrap .profileWrap { padding: 20px 8% 5px; }
  .snsUserPersonalWrap .userName { max-width: none; left: calc(5% + 160px); top: var(--personal-image-height-pc); }
  .snsPersonalHeader .mypageTitle { width: calc(95% - 160px); font-size: 160%; }
  .snsUserPersonalWrap .userImageProfile.empty { height: calc(var(--personal-image-height-empty) + 25px); }
  .snsUserPersonalWrap .userImageProfile.empty .userMetaImage { width: 100%; height: calc(var(--personal-image-height-empty) + 25px ); }
  .snsUserPersonalWrap .userImageProfile.empty + .snsUserMetaFormWrap { top: calc(var(--personal-image-height-empty) - 16px); }
  .snsUserPersonalWrap .userImageProfile.empty + .snsUserMetaFormWrap + .avatarLink img.avatar { top: calc(var(--personal-image-height-empty) + 25px); }
  .snsUserPersonalWrap .userImageProfile.empty + .snsUserMetaFormWrap + .avatarLink + .profileWrap .userName { top: calc(var(--personal-image-height-empty) + 25px); }
}

/*-------------------------------------
  Single page
-------------------------------------*/
.snsArticleHeader { margin: 0 auto 5px; }
.snsArticleHeader .postTitleWrap { padding: 0 10px; border-bottom: 1px solid var(--post-title-color); display: flex; flex-flow: row wrap; align-items: baseline; }
.snsArticleHeader .postTitle { margin: 0; overflow: hidden; flex-grow: 1; color: var(--post-title-color); font-weight: 700; }
.snsArticleHeader a { color: var(--link-color); }
.snsArticleHeader .authorWrap { margin: 0 0 0 auto; padding: 2px 0; display: flex; align-items: flex-end; float: right; font-size: 90%; }
.snsArticleHeader .authorLink { margin: 0 10px; font-size: 14px; font-weight: 600; }
.snsArticleHeader span.authorLink {  color: var(--site-text-color); }
.snsArticleContent .snsPostMeta { width: 100%; margin: 5px 0; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-end; }
.snsArticleContent .snsPostMeta .snsPostMetaFormWrap { width: 100%; margin: 0 0 10px auto; }
.snsArticleContent .postDateWrap { margin: 0 10px; }
.snsArticleContent .postCategoryWrap { margin: 0 10px 0 auto; }
.snsArticleContent .postTagWrap { width: 100%; margin: 0 10px 0 20px; }
.snsArticleContent .postTagWrap .postTag { margin: 0 5px 0 0; }
.snsArticleContent .postCategory + .dashicons { width: 0.8rem; font-size: 100%; line-height: 1.4; text-indent: -1px; }
.snsArticleContent .postCategory + .dashicons:last-child { display: none; }
.snsArticleContent { overflow: hidden; }
/* .snsPost */
.snsPost.isSingle { max-width: 1600px; }
.snsPost .snsBlock { width: 96%; margin: 0 auto 10px; }
.snsPost .snsBlock.thumbnailBlock { width: 100%; }
.snsPost .snsBlock.thumbnailBlock figure { width: 100%; text-align: center; }
.snsPost .snsBlock.thumbnailBlock img { width: 100%; object-fit: cover; object-position: center 30%; max-height: 600px; }
.snsPost .snsBlock.mediaBlock { display: flex; flex-flow: row wrap; align-items: flex-start; clear: both; }
.snsPost .snsBlock figure { width: 100%; margin: 0 0 5px; display: inline-block; }
.snsPost .snsBlock:not(.thumbnailBlock) img, .snsPost .snsBlock:not(.thumbnailBlock) video { width: 100%; height: 100%; max-height: 300px; margin: 0 auto; background: #000; object-fit: contain; vertical-align: top; }
/* float media */
.snsPost .snsBlock.mediaBlock1 figure { max-height: min(100vmin, 300px); }
.snsPost .snsBlock.mediaBlock1 video { max-height: min(100vmin, 300px); }
.snsPost .snsBlock p { word-break: break-word; }
.snsPost .snsBlock .iconFileLink { width: auto; }
.snsPost .snsBlock .iconFileLink .iconFile { display: none; }
.snsPost .snsBlock .iconFileLink .dashicons-download { margin: 0 2px 0 0; vertical-align: middle; }
@media screen and (min-width: 900px) {
  .snsPost.isSingle { width: 96%; }
  .snsArticleContent .snsPostMeta .snsPostMetaFormWrap { width: auto; margin: 0 0 0 auto; order: 3; }
  .snsArticleContent .postDateWrap { order: 1; }
  .snsArticleContent .postCategoryWrap { margin: 0 auto 0 10px; order: 2; }
  .snsArticleContent .postTagWrap { order: 4; }
  .snsPost .snsBlock.mediaBlock figure { width: calc((100% - 10px) / 3); }
}
@media screen and (min-width: 568px) {
  .snsPost .snsBlock.mediaBlock figure { width: calc((100% - 10px) / 2); height: 300px; }
  .snsPost .snsBlock.mediaBlock figure:nth-child(2n) { margin: 0 0 5px 0px; }
  .snsPost .snsBlock.mediaBlock figure:nth-child(2n+1) { margin: 0 5px 5px 0; }
  .snsPost .snsBlock.mediaBlock figure:nth-last-child(2) { margin-bottom: 0; }
  .snsPost .snsBlock.mediaBlock figure:nth-last-child(1) { margin-bottom: 0; }
  /* float media */
  .snsPost .snsBlock.mediaBlock1 { width: auto; max-width: 50%; margin: 0 20px 10px 2%; display: block; float: left; }
  .snsPost .snsBlock.mediaBlock1:nth-child(even) { float: right; }
  .snsPost .snsBlock.mediaBlock.mediaBlock1 figure { width: auto; height: auto; max-height: min(100vmin, 400px); }
  .snsPost .snsBlock.mediaBlock.mediaBlock1 img, .snsPost.isSingle .snsBlock.mediaBlock.mediaBlock1 video { width: 100%; max-height: min(100vmin, 400px); }
  .snsPost .snsBlock.mediaBlock.mediaBlock1 video { width: auto; height: auto; max-height: min(100vmin, 400px); }
}
@media screen and (min-width: 900px) {
  .snsPost .snsBlock.mediaBlock figure { width: calc((100% - 10px) / 3); height: 240px; }
  .snsPost .snsBlock.mediaBlock figure:nth-child(2n) { margin: 0; }
  .snsPost .snsBlock.mediaBlock figure:nth-child(2n+1) { margin: 0; }
  .snsPost .snsBlock.mediaBlock figure:nth-child(3n+2) { margin: 0 5px 5px; }
  .snsPost .snsBlock.mediaBlock figure:nth-last-child(3) { margin-bottom: 0; }
  .snsPost .snsBlock.mediaBlock figure:nth-last-child(2) { margin-bottom: 0; }
  .snsPost .snsBlock.mediaBlock figure:nth-last-child(1) { margin-bottom: 0; }
}
@media screen and (min-width: 1200px) {
  .snsPost .snsBlock.mediaBlock figure { width: calc((100% - 20px) / 3); height: 300px; }
}

/*-------------------------------------
  Single page #snsComments
-------------------------------------*/
#snsComments { margin: 60px auto 10px; padding: 15px 15px 15px; background: rgba(200,200,200,0.1); }
#snsComments .commentsTitle { margin: 0 5px; font-weight: 600; }
#snsComments .unapprove { color: var(--notice-color); font-size: 90%; text-indent: 10px; }
#snsComments .commentList { margin: 0 0 10px; }
#snsComments .commentBody { padding: 15px 0; overflow: hidden; }
#snsComments .postTitle { margin: 5px 0; font-size: 100%; font-weight: 600; }
#snsComments .commentMeta { width: 100%; padding: 0 10px 10px; display: flex; justify-content: space-between; align-items: flex-end; text-align: center; }
#snsComments .commentAuthor { max-width: calc(100% - 140px); }
#snsComments .commentAuthorName { width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#snsComments .commentMetaData { width: 140px; display: flex; flex-flow: column-reverse wrap; justify-content: flex-end; align-items: flex-end; }
#snsComments .commentMeta time { margin: 5px 0; display: block; line-height: 1; font-size: 90%; }
#snsComments .postAuthorLinkWrap { width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; }
#snsComments .button { width: auto; margin: 0; }
#snsComments .editCommentLink, #snsComments .commentReplyLink, #snsComments .editBtnArea .deleteCommentBtn, #snsComments .editBtnArea .editCommentBtn { width: 60px; }
#snsComments .approveCommentLink, #snsComments .deleteCommentLink, #snsComments .spamCommentLink { width: auto; min-width: 40px; }
#snsComments .editCommentLink { margin: 0 0 4px; }
#snsComments .editCommentLink.isActive { background: rgba(47,103,164,0.8); color: #FFF; }
#snsComments .editCommentLink.isActive::after { display: inline; content: '中'; }
#snsComments .commentContent { width: 100%; padding: 0 10px; position: relative; }
#snsComments .isEditable .commentContent { display: none; }
#snsComments .guestComment { width: 100%; min-height: 131px; padding: 20px; border-radius: 4px; border: 1px solid #FFF; background: #FFF; position: relative; }
#snsComments .awaitingModeration .guestComment::after { width: 100%; height: 100%; border-radius: 4px; background: rgba(255,255,255,0.6); display: block; content: ''; position: absolute; top: 0; left: 0; }
#snsComments .commentAwaitingModeration { margin: 5px 5px 10px; line-height: 1.4; color: var(--notice-color); font-family: var(--notice-font-family); font-size: var(--notice-font-size); font-weight: var(--notice-font-weight); }
#snsComments .commentContent .formMsg { margin: 5px 5px 10px; line-height: 1.4; color: var(--form-message-color); font-family: var(--form-message-font-family); font-size: calc(var(--form-message-font-size) * 0.9); font-weight: var(--form-message-font-weight); }
#snsComments .reply { margin: 10px 0; text-align: right; }
#snsComments .awaitingModeration .reply { display: none; }
#snsComments .children { margin: 0 0 0 4%; padding: 0 0 0 4%; border-left: 1px solid #999; }
#snsComments .closedComment { margin: 30px auto 10px; font-weight: 600; text-align: center; font-size: 95%; }
/* #snsEditCommentForm */
#snsEditCommentForm { width: 100%; padding: 0 10px; display: none; position: relative; }
.commentBody.isEditable #snsEditCommentForm { display: block; }
#snsEditCommentForm .formMsg { padding: 0 0 5px; display: block; opacity: 0; color: var(--form-message-color); font-family: var(--form-message-font-family); font-size: calc(var(--form-message-font-size) * 0.9); font-weight: var(--form-message-font-weight); transition: opacity 0.3s; }
#snsEditCommentForm .formMsg.isActive { opacity: 1; }
#snsEditCommentForm textarea, #snsEditCommentForm .commentHTML { width: 100%; height: auto; min-height: 131px; padding: 20px; border-radius: 4px; border: 1px solid #FFF; background: #FFF; }
#snsEditCommentForm textarea, #snsEditCommentForm .commentHTML[contentEditable="true"] { border: 1px solid var(--link-color); resize: none; outline: none; box-shadow: none; }
#snsEditCommentForm .editBtnArea { margin: 10px 0; text-align: center; }
#snsEditCommentForm .spinner { display: none; }
#snsEditCommentForm .editCommentBtn { margin: 0 0 0 10px; }
#respond { margin: 0 10px; padding: 10px; border: 1px solid #CCC; background: #FFF; }
.commentBody + #respond { margin-top: -15px; }
#respond .commentReplyTitle { margin: 0; padding: 0; font-weight: 600; }
#respond .commentReplyTitle .replyTo { padding: 0 0 0 5px; }
#respond .commentReplyTitle small { display: none; }
#respond .commentReply {}
#respond .commentToReply { margin: 5px 0 15px; padding: 10px; border-radius: 4px; background: #FFF; }
#respond .mustLogin { padding: 0 10px; font-size: 95%; }
#respond #snsCommentForm .error { color: var(--notice-color); font-size: 90%; text-indent: 10px; }

/* #snsCommentForm */
#snsCommentForm { width: 100%; margin: 0 auto; }
#snsCommentForm .loginAs { padding: 0 0 0 5px; font-size: 100%; font-weight: 600; }
#snsCommentForm .commentNotes { color: var(--notice-color); font-family: var(--notice-font-family); font-size: calc(var(--notice-font-size) * 0.9); font-weight: var(--notice-font-weight); text-align: right; line-height: 1; }
#snsCommentForm .commentTable { width: 100%; margin: 5px auto 15px; background: #FFF; border-collapse: collapse; table-layout: fixed; text-align: left; }
#snsCommentForm th, #snsCommentForm td { width: 100%; padding: 10px; border: 1px solid #CCC; display: block; border-bottom-color: transparent; }
#snsCommentForm tr:last-child { border-bottom: 1px solid #CCC; }
#snsCommentForm textarea { width: 100%; min-height: 15vh; vertical-align: bottom; resize: vertical; }
#snsCommentForm input[type="text"], #snsCommentForm input[type="email"], #snsCommentForm input[type="url"] { width: 100%; }
#snsCommentForm label[for="commentCookiesConsent"] { margin: 0; font-size: 90%; }
#snsCommentForm .isRequired { margin: 0 0 0 10px; }
#snsCommentForm .commentTable .commentAuthor { font-size: 100%; }
#snsCommentForm .commentTable .isRequired { color: var(--notice-color); font-family: var(--notice-font-family); font-size: calc(var(--notice-font-size) * 0.85); font-weight: var(--notice-font-weight); }
#snsCommentForm .btnArea { display: block; text-align: center; }
#snsCommentForm .btnArea .cancelCommentReplyLink { margin: 0 10px 0 0; font-size: 1.0rem; vertical-align: bottom; }
@media screen and (min-width: 900px) {
  #snsComments { width: 90%; }
  #snsComments .commentMeta { width: 140px; padding: 2px; display: block; float: left; text-align: center; }
  #snsComments .commentMeta time { margin: 0 0 5px; }
  #snsComments .commentContent { width: calc(100% - 140px); padding: 0 10px; float: left; }
  #snsComments .commentAuthor { max-width: none; }
  #snsComments .commentMetaData { display: block; text-align: center; }
  #respond .commentReplyTitle { width: 80%; margin: 0 auto; }
  #respond .commentToReply { margin: 5px 10% 15px; padding: 10px; }
  #respond .mustLogin { width: 80%; margin: 0 auto; }
/* #snsEditCommentForm */
  #snsEditCommentForm { width: calc(100% - 140px); padding: 0 10px; float: left; }
  #snsEditCommentForm .editBtnArea { margin: 10px 0; text-align: right; }
  #snsEditCommentForm .formMsg { display: inline; }
  #snsEditCommentForm .formMsg.isActive { display: inline; }
/* #snsCommentForm */
  #snsCommentForm { width: 80%; }
  #snsCommentForm th, #snsCommentForm td { width: auto; padding: 10px; border: 1px solid #CCC; display: table-cell; }
  #snsCommentForm th { width: 160px; text-align: left; vertical-align: middle; }
  #snsCommentForm td[colspan="2"] { padding: 10px 30px; }
  #snsCommentForm label[for="commentCookiesConsent"] { margin: 0; font-size: 100%; }
}

/*-------------------------------------
  Single page comment reaction
-------------------------------------*/
#snsEditCommentForm .editReactionBtn, #snsCommentForm .reactionBtn { width: 30px; margin: 0 0 0 10px; padding: 2px 0; border-radius: 15px; vertical-align: middle; }
#snsEditCommentForm .editReactionBtn.isActive, #snsCommentForm .reactionBtn.isActive { box-shadow: 0 0 0 1px #2F67A4; }
#snsComments .reactionArea { text-align: center; }
#snsComments .reactionWrap { width: auto; max-width: 100%; margin: 5px auto; border: 1px solid #CCC; border-radius: 4px; background: #FFF; display: none; }
#snsComments .reactionWrap.isActive { display: inline-block; }
#snsEditCommentForm .reactionWrap.isActive { float: right; }
#snsComments .reactionWrap .reactionBtnArea { padding: 5px 5px 0; overflow: hidden; }
#snsComments .reactionWrap img.reaction { margin: 4px; float: left; cursor: pointer; }
#snsComments .reactionWrap .reactionFooter { width: 100%; margin: 0 auto; padding: 2px 5px; border-top: 1px solid #CCC; display: block; font-size: 13px; text-align: center; white-space: nowrap; }
#snsComments .reactionWrap .removeReactionBtn { width: auto; height: auto; margin: 0; padding: 0; visibility: hidden; font-size: 13px; line-height: 1.4; }
#snsComments .reactionWrap .removeReactionBtn.isActive { visibility: visible; }

/*-------------------------------------
  Mypage and Mypage post list
-------------------------------------*/
.mypagePostList { width: 96%; margin: 10px auto; padding: 0; border:1px solid #CCC; position: relative; }
.mypagePostList .postListSwitch { position: absolute; top: -20px; right: 0; }
.mypagePostList h3 { margin: 10px 10px 0; font-size: 108%; font-weight: 700; }
.mypagePostList .allPostBtn { width: auto; position: absolute; top: 2px; right: 10px; }
/* main categorty link */
.mypagePostList .snsUserPostMainCategory { padding: 0 5px 5px; overflow-x: auto; display: flex; flex-flow: row nowrap; align-items: center; }
/* for only safari */
.mypagePostList .snsUserPostMainCategory::before { content: '.'; opacity: 0; }
.mypagePostList .snsUserPostMainCategory::after { content: '.'; opacity: 0; }
.mypagePostList .mainCategoryLink { width: auto; margin: 5px 5px 0; display: flex; flex-flow: row wrap; justify-content: center; white-space: nowrap; }
.mypagePostList .mainCategoryLink:first-child { margin-left: auto; }
.mypagePostList .mainCategoryLink:not(.button) { align-items: flex-end; }
.mypagePostList .mainCategoryLink .userMetaImage { display: none; }
.mypagePostList .mainCategoryLink .mainCategoryName { font-weight: 400; font-family: serif; }
.mypagePostList .mainCategoryLink.isSelected .mainCategoryName { font-weight: 700; }
.mypagePostList .mainCategoryLink .count { display: none; font-weight: 400; }
/* use user meta image for main category link */
.mypagePostList .useUserMetaImage { min-height: 40px; line-height: 1.2; }
.mypagePostList .useUserMetaImage .userMetaImage { width: 30px; height: 30px; margin: 0 2px; border-radius: 15px; background: #FFF; display: block; outline: 1px solid #2C84E3; object-fit: cover; }
.mypagePostList .mainCategoryLink.isSelected .userMetaImage { outline: 2px solid #2C84E3; }
.mypagePostList .useUserMetaImage .mainCategoryLink:not(.button) { width: auto; height: auto; padding: 0; border: none; }
.mypagePostList .useUserMetaImage .isSelected .userMetaImage { box-shadow: 1px -1px 0 #F93B95, 1px 1px 0 #F93B95, -1px 1px 0 #F93B95, -1px -1px 0 #F93B95; }
/* search post form */
.mypagePostList .searchPostForm { padding: 0 10px; }
/* post list */
.mypagePostList .postListWrap { margin: 10px 5px 10px; position: relative; }
.mypagePostList .postListWrap + .postListWrap { margin: 50px 5px 10px; }
.mypagePostList h4 { padding: 0 5px; overflow: hidden; display: inline-block; font-weight: 700; vertical-align: middle; }
.mypagePostList .postListHead { margin: 5px 10px 0; display: flex; flex-flow: row wrap; justify-content: space-between; font-size: 95%; font-weight: 600; text-align: right; }
.mypagePostList .newPostBtn { width: auto; margin: 0; padding: 0 10px; }
.mypagePostList .postListHeadTitle { margin-left: auto; padding: 5px 2px; overflow-x: auto; white-space: nowrap; }
.mypagePostList .postListHeadTitle .totalPost, .mypagePostList .postListHeadTitle .userCategory, .mypagePostList .postListHeadTitle .searchPost { padding: 0 5px; display: inline-block; }
.mypagePostList .postListHeadTitle .postCount { margin: 0 0 0 -3px; }
.mypagePostList .searchWord { margin: 5px 0 0 15px; margin: 5px 0 5px 15px; border-bottom: 1px solid var(--site-text-color); display: inline-block; line-height: 1.5; }
.mypagePostList .searchWord .dashicons { opacity: 0.75; }
.mypagePostList .postListCount { margin: 0 0 0 10px; }
.mypagePostList .postBox { margin: 10px 5px; padding: 5px 0; border-bottom: 1px solid #CCC; display: flex; flex-flow: row wrap; align-items: center; }
.mypagePostList .postBox > .dashicons { margin: 0 0 0 -5px; }
.mypagePostList .postCategory { height: auto; padding: 0 4px; border: 1px solid var(--site-text-color); border-radius: 2px; display: inline-block; font-size: 12px; font-weight: 600; }
.mypagePostList .snsPostMetaForm .metaBtnWrap { margin: 0 0 0 5px; }
.mypagePostList .postStatus { height: auto; padding: 0 4px; border-radius: 2px; display: inline-block; font-size: 12px; text-align: center; }
.mypagePostList.mypagePostMetaSend .postStatus {}
.mypagePostList .postStatus.draft { border: 1px solid #666; color: #666; }
.mypagePostList .postStatus.private { border: 1px solid #999; color: #999; }
.mypagePostList .postStatus.future { border: 1px solid #7A561A; color: #7A561A; }
.mypagePostList .postStatus.publish { border: 1px solid #D63638; color: #D63638; }
.mypagePostList .editPostBtn { padding: 0 10px; }
.mypagePostList .postLink { padding: 5px 0 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mypagePostList .postTitle { font-weight: 600; }
.mypagePostList .postBox .commentStatus { width: auto; margin: 0 0 0 20px; display: inline-block; }
.mypagePostList .postBox .commentCount { min-width: 16px; margin: 0; color: #2F67A4; }
.mypagePostList .postBox .unapprovedCommentCount { min-width: 16px; margin: 0; color: #EF3580; }
.mypagePostList .postBox .dashicons-admin-comments { width: auto; margin: -5px 0 0 -5px; font-size: 140%; color: #2F67A4; }
.mypagePostList .postBox .dashicons-welcome-comments { width: auto; margin: -5px 0 0 -5px; font-size: 140%; color: #EF3580; }
/* .mypagePostList default */
.mypagePostList .postCategory { width: auto; margin: 0 5px; order: 1; }
.mypagePostList .snsPostMetaFormWrap { width: auto; margin: 5px 0 2px auto; order: 4; }
.mypagePostList .postStatus { width: auto; margin: 0 5px 0 0; order: 2; }
.mypagePostList .editPostBtn { width: auto; margin: 0 5px 0 auto; order: 6; }
.mypagePostList .postDate { width: auto; margin: 0 5px; order: 3; }
.mypagePostList .postLink { width: calc(100% - 65px); margin: 0 5px 0; order: 5; }
/* .mypagePostList.mypagePostRecent */
.mypagePostList.mypagePostRecent .postCategory { display: none; }
.mypagePostList.mypagePostRecent .postDate { width: auto; margin: 0px 25px 0 5px; order: 2; }
.mypagePostList.mypagePostRecent .editPostBtn { width: auto; margin: 0 5px 0 auto; order: 6; }
/* .mypagePostList.mypagePostMetaSend */
.mypagePostList.mypagePostMetaSend .postLink { width: 100%; }
/* .mypagePostList.mypagePostMetaReceive */
.mypagePostList.mypagePostMetaReceive {}
@media screen and (min-width: 900px) {
  .mypagePostList { width: 80%; margin: 10px auto; padding: 20px; }
  .mypagePostList .allPostBtn { top: 22px; right: 30px; }
  .mypagePostList .snsUserPostMainCategory { margin-top: -35px; padding: 0; }
/* for only safari */
  .mypagePostList .snsUserPostMainCategory::before { content: ''; }
  .mypagePostList .snsUserPostMainCategory::after { content: ''; }
  .mypagePostList .searchPostForm { padding: 5px; }
  .mypagePostList .postListHead { margin: 0 5px; }
  .mypagePostList .newPostBtn { margin: 0 5px; }
/* .mypagePostList default */
  .mypagePostList .postCategory { width: auto; margin: 0 0 0 5px; order: 1; }
  .mypagePostList .snsPostMetaFormWrap { width: auto; margin: 0 0 0 auto; order: 5; }
  .mypagePostList .postStatus { margin: 0 0 0 5px; order: 2; }
  .mypagePostList .editPostBtn { width: auto; margin: 0 5px; order: 6; }
  .mypagePostList .postDate { width: calc(100% - 125px); margin: 0 5px 0 5px; order: 3; }
  .mypagePostList .postLink { width: auto; margin: 0 5px; order: 4; }
/* .mypagePostList.mypagePostMetaSend */
  .mypagePostList.mypagePostMetaSend .snsPostMetaFormWrap { width: auto; margin: 0 0 0 auto; order: 5; }
  .mypagePostList.mypagePostMetaSend .postLink { width: auto; }
}

/*-------------------------------------
  Mypage and Mypage comment list
/*-------------------------------------*/
.mypageCommentList { width: 96%; margin: 10px auto; padding: 0; border:1px solid #CCC; position: relative; }
.mypageCommentList h3 { margin: 10px 10px 0; font-size: 108%; font-weight: 700; }
.mypageCommentList .allCommentBtn { width: auto; position: absolute; top: 3px; right: 10px; }
.mypageCommentList .searchCommentForm { margin: 10px 0 0; padding: 0 10px; display: flex; justify-content: flex-end; }
.mypageCommentList .searchCommentForm .commentDestination { max-width: 200px; flex-grow: 1; vertical-align: middle; }
.mypageCommentList .searchCommentForm .commentDestination select { width: 100%; }
.mypageCommentList .searchCommentForm .searchComment { max-width: 40%; margin: 0 2px; flex-grow: 1; }
.mypageCommentList .searchCommentForm .searchCommentBtn { width: auto; margin: 0; }
.mypageCommentList .commentsTitle { padding: 0 5px; overflow: hidden; display: inline-block; font-weight: 700; vertical-align: middle; }
.mypageCommentList .searchCommentFormWrap { margin: 0 0 10px; }
.mypageCommentList .searchWord { margin: 5px 0 5px 15px; border-bottom: 1px solid var(--site-text-color); display: inline-block; line-height: 1.5; }
.mypageCommentList .searchWord .dashicons { opacity: 0.75; }
.mypageCommentList .commentListCount { margin: 0 0 0 10px; }
.mypageCommentList .commentListHead { margin: 5px 10px 0; font-size: 95%; font-weight: 600; text-align: right; }
.mypageCommentList .totalComment, .mypageCommentList .unapprove { padding: 0 0 0 5px; display: inline-block; font-size: 100%; }
.mypageCommentList .totalCommentCount, .mypageCommentList .unapproveCount { margin: 0 0 0 2px; }
.mypageCommentList .commentListWrap { margin: 0 5px; position: relative; }
.mypageCommentList .commentBody { margin: 10px 5px; padding: 5px 0 10px; border-bottom: 1px solid #CCC; overflow: hidden; }
.mypageCommentList .postCategory { height: auto; padding: 0 4px; border: 1px solid var(--site-text-color); border-radius: 2px; display: inline-block; font-size: 12px; font-weight: 600; }
.mypageCommentList .postStatus { height: auto; padding: 0 4px; border-radius: 2px; display: inline-block; font-size: 12px; text-align: center; }
.mypageCommentList .postStatus.draft { border: 1px solid #666; color: #666; }
.mypageCommentList .postStatus.private { border: 1px solid #999; color: #999; }
.mypageCommentList .postStatus.future { border: 1px solid #7A561A; color: #7A561A; }
.mypageCommentList .postStatus.publish { border: 1px solid #D63638; color: #D63638; }
.mypageCommentList .postDate { margin: 0 25px 0 5px; }
.mypageCommentList .postTitle { max-width: 740px; margin: 5px 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 100%; font-weight: 600; vertical-align: middle; }
.mypageCommentList .commentStatus { width: auto; margin: 0 0 0 20px; display: none; }
.mypageCommentList .commentCount { min-width: 16px; margin: 0; color: var(--link-color); }
.mypageCommentList .unapprovedCommentCount { min-width: 16px; margin: 0; color: #EF3580; }
.mypageCommentList .dashicons-admin-comments { width: auto; margin: -5px 0 0 -5px; font-size: 140%; color: var(--link-color); }
.mypageCommentList .dashicons-welcome-comments { width: auto; margin: -5px 0 0 -5px; font-size: 140%; color: #EF3580; }
.mypageCommentList .commentMeta { width: 100%; padding: 0 5px; text-align: right; }
.mypageCommentList .commentAuthor { padding: 4px 2px; display: flex; align-items: flex-end; }
.mypageCommentList .commentMeta .avatar { width: 32px; height: 32px; border-radius: 16px; }
.mypageCommentList .commentAuthorName { margin: 0 0 0 2px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 90%; }
.mypageCommentList .commentMetaData {}
.mypageCommentList .commentMeta time { display: block; line-height: 1; font-size: 90%; }
.mypageCommentList .commentContent { width: 100%; padding: 5px 5px 0; }
.mypageCommentList .guestComment { width: 100%; padding: 10px; border-radius: 4px; border: 1px solid #CCC; background: #FFF; }
.mypageCommentList .awaitingModeration .guestComment { background: #F3F3F3; }
.mypageCommentList .commentAwaitingModeration { margin: 5px 5px 0; line-height: 1.4; color: var(--notice-color); font-family: var(--notice-font-family); font-size: calc(var(--notice-font-size) * 0.9); font-weight: var(--notice-font-weight); }
@media screen and (min-width: 900px) {
  .mypageCommentList { width: 80%; margin: 10px auto; padding: 20px; }
  .mypageCommentList .allCommentBtn { margin: 0 5px; position: static; vertical-align: middle; }
  .mypageCommentList .searchCommentForm { margin: 0; padding: 0; display: inline-block; }
  .mypageCommentList .searchCommentForm .commentDestination { max-width: none; }
  .mypageCommentList .searchCommentForm .searchComment { width: 240px; max-width: none; }
  .mypageCommentList .searchCommentFormWrap { margin: -30px 5px 0 0; float: right; }
  .mypageCommentList .commentListHead { margin: 10px 10px 0; }
  .mypageCommentList .postTitle { margin: 0; display: inline-block; }
  .mypageCommentList .commentMeta { width: 200px; padding: 0 0 0 5px; float: left; text-align: left; }
  .mypageCommentList .commentContent { width: calc(100% - 200px); padding: 5px 5px 0; float: right; }
}

/*-------------------------------------
  Mypage and Mypage user list
-------------------------------------*/
.mypageUserList { width: 96%; margin: 10px auto; padding: 0; border:1px solid #CCC; position: relative; }
.mypageUserList h3 { margin: 10px 10px 0; font-size: 108%; font-weight: 700; }
.mypageUserList .searchUserFormWrap { margin: 0 0 10px; }
.mypageUserList .searchUserForm { margin: 10px 0 0; padding: 0 10px; display: flex; justify-content: flex-end; }
.mypageUserList .searchUserForm .userDestination { max-width: 200px; flex-grow: 1; vertical-align: middle; }
.mypageUserList .searchUserForm .userDestination select { width: 100%; }
.mypageUserList .searchUserForm .searchUser { max-width: 40%; margin: 0 2px; flex-grow: 1; }
.mypageUserList .searchUserForm .searchUserBtn { width: auto; margin: 0; }
/* .mypageUesrList .userListHead (list page) */
.mypageUserList .userListHead { margin: 10px 10px 0; font-size: 95%; font-weight: 600; text-align: right; }
.mypageUserList .totalUser, .mypageUserList .searchUser { padding: 0 5px; display: inline-block; font-size: 100%; }
.mypageUserList .userCount { margin: 0 0 0 -3px; }
.mypageUserList .searchWord { margin: 5px 0 5px 15px; border-bottom: 1px solid var(--site-text-color); display: inline-block; line-height: 1.5; }
.mypageUserList .searchWord .dashicons { opacity: 0.75; }
.mypageUserList .userListWrap { margin: 10px 5px 10px; position: relative; }
.mypageUserList .userListWrap + .userListWrap { margin: 50px 5px 10px; }
.mypageUserList h4 { padding: 0 5px; overflow: hidden; display: inline-block; font-weight: 700; vertical-align: middle; }
.mypageUserList h4 .userListCount { margin: 0 0 0 10px; }
.mypageUserList .userBox { margin: 5px; padding: 2px 0 8px; border-bottom: 1px solid #CCC; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-end; white-space: nowrap; }
.mypageUserList .userBox.skelton { display: none; }
.mypageUserList .userName { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .mypageUesrList .userBox .userListHead (mypage recent) */
.mypageUserList .userBox .userListHead { margin: 5px auto 0; padding: 0; display: inline-block; font-size: 95%; font-weight: 600; }
.mypageUserList .userBox .userListHead::before { display: inline; content: '【'; }
.mypageUserList .userBox .userListHead::after { display: inline; content: '】'; }
.mypageUserList .userProfileWrap { width: 100%; margin: 0 0 5px; display: none; }
.mypageUserList .userProfile { padding: 0 10px; }
.mypageUserList .userProfile p { font-size: 95%; }
.mypageUserList .userActivity { width: 100%; }
.mypageUserList .userActivity .postBox { margin: 0; padding: 5px 0 0 5px; display: flex; flex-flow: row wrap; align-items: center; }
.mypageUserList .userActivity .postBox + .postBox { border-top: 1px dotted #CCC; }
.mypageUserList .postBox > .dashicons { margin: 0 0 0 -5px; }
.mypageUserList .userActivity .postCategory { margin: 0; padding: 0 4px; border: 1px solid var(--site-text-color); border-radius: 2px; display: inline-block; font-size: 12px; font-weight: 600; }
.mypageUserList .userActivity .snsPostMetaFormWrap { margin: 0; order: 3; }
.mypageUserList .userActivity .snsPostMetaForm .metaBtnWrap, .mypageUserList .userActivity .snsUserMetaForm .metaBtnWrap { margin: 0; }
.mypageUserList .userActivity .snsPostMetaForm .metaCount, .mypageUserList .userActivity .snsUserMetaForm .metaCount { margin: 0 2px 2px 5px; }
.mypageUserList .userActivity .postStatus { display: none; }
.mypageUserList .userActivity .postDate { margin: 0 0 0 5px; }
.mypageUserList .userActivity .postLink { padding: 5px 0 5px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 95%; }
.mypageUserList .userActivity .postTitle { font-size: 100%; font-weight: 600; }
.mypageUserList .userActivity .postBox .commentStatus { margin: 0 0 0 20px; display: inline-block; white-space: nowrap; }
.mypageUserList .userActivity .postBox .commentCount { min-width: 16px; margin: 0; color: #2F67A4; }
.mypageUserList .userActivity .postBox .dashicons-admin-comments { width: auto; margin: -5px 0 0 -5px; font-size: 140%; color: #2F67A4; }
@media screen and (min-width: 900px) {
  .mypageUserList { width: 80%; margin: 10px auto; padding: 20px; }
  .mypageUserList .searchUserFormWrap { margin: -30px 5px 0 0; float: right; }
  .mypageUserList .searchUserForm { margin: 0; padding: 0; display: inline-block; }
  .mypageUserList .searchUserForm .userDestination { max-width: none; }
  .mypageUserList .searchUserForm .searchUser { width: 240px; max-width: none; }
}

/*-------------------------------------
  Mypage and Mypage profile
-------------------------------------*/
#mypageProfile { width: 96%; margin: 10px auto; padding: 0; border:1px solid #CCC; display: none; position: relative; }
#mypageProfile.isActive { display: block; }
#mypageProfile h3 { margin: 10px; font-size: 108%; font-weight: 700; }
#mypageProfile .memberToggleLink { padding: 0 10px; text-align: right; font-size: 95%; }
#editProfileForm .memberProfile { width: 100%; margin: 10px auto 0; border-collapse: collapse; border-top: 1px solid #CCC; }
#editProfileForm .memberProfile + .memberProfile { margin: 0; border: none; }
#editProfileForm .formMsgWrap { height: 30px; padding: 0; border: none; vertical-align: middle; }
#editProfileForm th, #editProfileForm td { padding: 10px; border-bottom: 1px solid #CCC; display: block; }
#editProfileForm th { width: 100%; font-size: 95%; font-weight: 700; text-align: left; }
#editProfileForm .formDesc, #editProfileForm .notice, #editProfileForm .error { padding: 0 10px; font-size: 93%; }
#editProfileForm .notice { display: inline-block; color: var(--notice-color); font-family: var(--notice-font-family); font-size: calc(var(--notice-font-size) * 0.9); font-weight: var(--notice-font-weight); }
#editProfileForm .error { display: none; color: var(--notice-color); font-family: var(--notice-font-family); font-size: calc(var(--notice-font-size) * 0.9); font-weight: var(--notice-font-weight); }
#editProfileForm .error.isActive { display: inline-block; }
#editProfileForm .avatarWrap { text-align: center; }
#editProfileForm .avatarWrap .avatarHead { margin: 5px auto; display: block; font-weight: 700; text-align: left; font-size: 95%; }
#editProfileForm .avatarWrap img { width: 120px; height: 120px; margin: 0 auto 10px; border-radius: 60px; background: #EFEFEF; object-fit: cover; }
#editProfileForm .selectMediaBtn, #editProfileForm .removeMediaBtn { width: auto; margin: 4px; padding: 0 10px; }
#editProfileForm input[type="text"], #editProfileForm input[type="password"], #editProfileForm input[type="email"] { width: 96%; max-width: 300px; height: 32px; padding: 0 5px; border: 1px solid #CCC; text-align: left; font-size: 14px; }
#editProfileForm input[disabled], #editProfileForm textarea[disabled] { background: rgba(239, 239, 239, 0.3); }
#editProfileForm input.invalid, #editProfileForm textarea.invalid { background: #FEE; }
#editProfileForm textarea { width: 96%; height: 120px; padding: 2px 5px; border: 1px solid #CCC; text-align: left; font-size: 14px; vertical-align: top; }
#editProfileForm input[name="user_pass"], #editProfileForm input[name="new_user_pass"] { width: calc(96% - 40px); }
#editProfileForm .userUrl td::after { padding: 0 10px; content: '※100文字以内'; display: inline-block; color: var(--notice-color); font-family: var(--notice-font-family); font-size: calc(var(--notice-font-size) * 0.9); font-weight: var(--notice-font-weight); }
#editProfileForm .dashicons { width: 30px; height: 30px; margin: 2px 0 0 2px; float: none; font-family: dashicons; font-size: 18px; line-height: 28px; }
#editProfileForm .userImageMeta { display: flex; align-items: center; }
#editProfileForm .userImageMeta .mediaWrap { max-width: calc(100% - 105px); margin: 0 0 0 10px; }
#editProfileForm .userImageMeta img { max-width: 100%; max-height: 160px; object-fit: cover; }
#editProfileForm .userImageMeta.circle img { width: 64px; height: 64px; border-radius: 32px; }
#editProfileForm .btnArea { width: 100%; max-width: none; margin: 30px auto; display: block; text-align: center; }
#editProfileForm .editProfileBtn { margin: 0 0 0 18px; }
#editProfileForm .profile, #editProfileForm .profileHTML { width: 96%; min-height: 120px; padding: 2px 5px; border: 1px solid #CCC; background: #FFF; text-align: left; font-size: 14px; vertical-align: top; word-break: break-word; }
#editProfileForm .profile, #editProfileForm .profileHTML[contentEditable="true"] { resize: none; outline: none; box-shadow: none; }
#editProfileForm .profile:focus { box-shadow: 0 0 0 2px var(--form-outline-color); }
#editProfileForm .profileHTML[contentEditable="true"]:focus { border: 1px solid var(--link-color); }
#editProfileForm .profile + .profile, #editProfileForm .profileHTML { height: auto; display: none; word-break: break-word; }
#editProfileForm .profileHTML.isActive { display: block; }
#editProfileForm .userMetaNotify { display: flex; flex-flow: row nowrap; align-items: center; }
#editProfileForm .userMetaButtonName { max-width: 160px; padding: 5px 0; flex-grow: 1; font-weight: 600; }
@media screen and (min-width: 900px) {
  #mypageProfile { width: 80%; margin: 10px auto; padding: 20px; }
  #editProfileForm th { width: 200px; }
  #editProfileForm th, #editProfileForm td { padding: 10px 2px; display: table-cell; vertical-align: middle; }
  #editProfileForm tr:last-child .formMsgWrap { visibility: hidden; }
  #editProfileForm .avatarWrap { width: 200px; vertical-align: top; }
  #editProfileForm .avatarWrap figcaption { margin: 5px auto; text-align: center; }
  #editProfileForm .btnArea { margin: 30px auto 10px; }
}

/*-------------------------------------
  Edit post
-------------------------------------*/
#editPostForm { width: 100%; margin: 0 auto; padding: 10px; border: 1px solid #CCC; position: relative; }
#editPostForm h4 { width: 100%; margin: 0 auto; font-size: 110%; font-weight: 700; }
#editPostForm p { margin: 10px 0; text-align: center; }
#editPostForm .newPostBtn { margin: 0; position: absolute; top: 8px; right: 10px; }
#editPostForm table { width: 100%; margin: 10px auto; border-collapse: collapse; font-size: 14px; text-align: left; }
#editPostForm .postTitleBlock .notice { margin: 2px 5px 0; display: block; line-height: 1.4; color: var(--notice-color); font-family: var(--notice-font-family); font-size: calc(var(--notice-font-size) * 0.9); font-weight: var(--notice-font-weight); }
#editPostForm table tr:last-child { border-bottom: 1px solid #CCC; }
#editPostForm th, #editPostForm td { width: 100%; padding: 2px; border: 1px solid #CCC; display: block; border-bottom-color: transparent; }
#editPostForm th { vertical-align: middle; }
#editPostForm td { padding: 2px; position: relative; }
#editPostForm td[colspan="2"] { text-align: center; }
#editPostForm .head { width: auto; height: 40px; padding: 10px; display: inline-block; font-weight: 600; }
#editPostForm input:not(.button) { width: 100%; height: 32px; padding: 0 5px; border: 1px solid #CCC; font-size: 14px; }
#editPostForm textarea { width: 100%; min-height: 20vh; padding: 0 5px; border: 1px solid #CCC; font-size: 14px; vertical-align: middle; resize: vertical; }
#editPostForm select { width: auto; margin: 2px 0; border: 1px solid #CCC; }
#editPostForm .editPostCategory .select { width: calc(100% - 20px); }
#editPostForm .editPostCategory input[type="text"] { height: 30px; }
#editPostForm .editPostCategory input + .select { width: 100%; }
#editPostForm .editPostCategory .select:not(.isActive) { display: none; }
#editPostForm .editPostCategory select { width: 100%; }
#editPostForm .editPostCategory .select.addCategory { width: 130px; }
#editPostForm .editPostCategory .newCategory { display: none; }
#editPostForm .editPostCategory .newCategory.isActive { width: 120px; margin: 0 0 0 4px; display: inline-block; }
#editPostForm .editPostCategory input[type="text"] { vertical-align: baseline }
#editPostForm .skelton { display: none; }
#editPostForm .myMetaBox { min-height: 42px; margin: 5px auto; padding: 2px; border: 1px solid #CCC; position: relative; }
#editPostForm .headWrap { width: 100%; display: flex; }
#editPostForm .headWrap .head { width: auto; height: 40px; margin: 0 10px 0 0; display: block; font-weight: 600; }
#editPostForm .selectMediaBtn { width: auto; margin: 5px 0 5px 5px; padding: 4px; }
#editPostForm .removeMediaBtn { width: auto; margin: 5px 0 5px 5px; padding: 4px; display: none; }
#editPostForm .removeMediaBtn.isActive { display: inline-block; }
#editPostForm .upBlockBtn, #editPostForm .downBlockBtn { width: auto; margin: 5px; padding: 4px 5px 4px 3px; }
#editPostForm .upBlockBtn { margin: 5px 0 5px auto; }
#editPostForm .upBlockBtn .dashicons, #editPostForm .downBlockBtn .dashicons { transform: scale(1.5); }
#editPostForm .removeBlockBtn { width: auto; margin: 5px; padding: 4px; }
#editPostForm .head + .removeBlockBtn, #editPostForm .removeMediaBtn + .removeBlockBtn { margin: 5px 5px 5px auto; }
#editPostForm .mediaWrap > * { width: 100%; max-height: 100vmin; margin: 0 0 5px; background: #000; object-fit: contain; vertical-align: bottom; }
#editPostForm .mediaWrap > *:last-child { margin: 0; }
#editPostForm .myMetaBox.thumbnail img { width: 100%; height: auto; max-height: 600px; margin: 0; object-fit: contain; }
#editPostForm .contentHTML { min-height: 20vh; padding: 5px; background: #FFF; border: 1px solid #CCC; }
#editPostForm .contentHTML p { margin: 0; padding: 0; text-align: left; }
#editPostForm textarea.useHTML { display: none; }
#editPostForm .contentHTML[contentEditable="true"]:focus, #editPostForm .contentHTML[contentEditable="true"]:hover { border: 1px solid var(--link-color); }
#editPostForm .contentHTML.textBox { width: 100%; height: 36px; min-height: auto; overflow: hidden; line-height: 1.8; white-space: nowrap; }
#editPostForm .contentHTML.textBox br { display: none; }
#editPostForm .contentHTML.textBox * { display: inline; }
#editPostForm .iconFileLink { border: 1px solid #CCC; display: inline-block; position: relative; text-align: center; }
#editPostForm .iconFileLink .iconFile { display: none; }
#editPostForm .iconTextWrap { width: 100%; padding: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#editPostForm .iconFileLink .dashicons-download { margin: 2px; vertical-align: middle; }
#editPostForm .addPostFieldBlock { width: 100%; max-width: 320px; margin: auto; padding: 0; }
#editPostForm .addFieldBtnArea { margin: 20px auto 0 0; display: flex; flex-flow: row wrap; justify-content: space-between; text-align: center; }
#editPostForm .addFieldBtnArea .headWrap { width: auto; height: 30px; margin: 0; display: none; }
#editPostForm .addFieldBtnArea .addBlockBtn { width: auto; margin: 5px; }
#editPostForm .addFieldBtnArea .addBlockBtn .dashicons { margin: 5.5px 0 0 -3px; }
#editPostForm .postStatusBlock { margin: 10px auto; text-align: center; }
#editPostForm .postStatusBlock .btnArea { margin-top: 10px; }
#editPostForm .postStatusBlock label { margin: 0; }
#editPostForm .postStatusBlock select { margin: 0; }
#editPostForm .postPreviewLink.button { width: auto; margin: 5px 0; }
#editPostForm .postPreviewLink .dashicons { vertical-align: -4px; }
#editPostForm .postPreviewLink .previewUrl { margin: 0 5px; display: none; text-align: left; font-weight: 400; word-break: break-all; }
#editPostForm .infoPreview { margin: 5px auto 0; padding: 0 10px; display: inline-block; line-height: 1.4; text-align: left; color: var(--notice-color); font-family: var(--notice-font-family); font-size: calc(var(--notice-font-size) * 0.9); font-weight: var(--notice-font-weight); }
#editPostForm .editPostBtn + .deletePostBtn { display: none; }
#editPostForm .isInvalid { background: #FCC; }
@media screen and (min-width: 568px) {
  #editPostForm { width: 96%; max-width: 1400px; padding: 10px 20px; }
  #editPostForm .newPostBtn { right: 20px; }
  #editPostForm th, #editPostForm td { width: auto; border-bottom-color: #CCC; display: table-cell; vertical-align: middle; }
  #editPostForm th { width: 160px; }
  #editPostForm td { padding: 2px 10px; }
  #editPostForm .head { display: block; }
  #editPostForm .editPostCategory .select { width: auto; }
  #editPostForm .editPostCategory input + .select { width: auto; }
  #editPostForm .editPostCategory select { width: auto; }
  #editPostForm .editPostCategory .select.addCategory { width: auto; }
  #editPostForm .postStatusBlock label { margin: 0 5px; }
  #editPostForm .postPreviewLink.button { margin: 0 5px; }
  #editPostForm .mediaWrap { display: flex; flex-flow: row wrap; align-items: flex-start; }
  #editPostForm .mediaWrap > * { width: calc((100% - 5px) / 2); height: 180px; margin: 0; }
  #editPostForm .mediaWrap > * { margin: 0 0 5px; }
  #editPostForm .mediaWrap > *:nth-child(2n) { margin: 0 0 5px 5px; }
  #editPostForm .mediaWrap > *:nth-child(2n+1) { margin: 0 0 5px 0; }
  #editPostForm .mediaWrap > *:nth-last-child(2) { margin-bottom: 0; }
  #editPostForm .mediaWrap > *:nth-last-child(1) { margin-bottom: 0; }
}
@media screen and (min-width: 900px) {
  #editPostForm .mediaWrap > * { width: calc((100% - 10px) / 3); height: 200px; }
  #editPostForm .mediaWrap { align-items: flex-start; }
  #editPostForm .mediaWrap > *:nth-child(2n) { margin: 0; }
  #editPostForm .mediaWrap > *:nth-child(2n+1) { margin: 0; }
  #editPostForm .mediaWrap > *:nth-child(3n+2) { margin: 0 5px 5px; }
  #editPostForm .mediaWrap > *:nth-last-child(3) { margin-bottom: 0; }
  #editPostForm .mediaWrap > *:nth-last-child(2) { margin-bottom: 0; }
  #editPostForm .mediaWrap > *:nth-last-child(1) { margin-bottom: 0; }
}
@media screen and (min-width: 1200px) {
  #editPostForm .mediaWrap > * { width: calc((100% - 10px) / 3); height: 240px; }
}