@charset "UTF-8";

.sp-fixed-menu,
.sp-drawer-menu,
.sp-viewer,
.sp-main-visual {
    display: none;
}

#footer-container {
    background: url("../images/ft-bg.png") repeat-x bottom left;
    clear: both;
}

@media screen and (max-width: 768px) {
    html,
    body {
        min-width: 0;
    }

    body {
        padding-bottom: 64px;
    }

    #wrap,
    #wrap2 {
        background-image: none;
    }

    #wrap,
    #wrap2,
    #description,
    #description h1,
    #description div,
    #container,
    #header,
    #global-nav,
    #global-nav ul,
    #contents-body,
    #contents,
    #contentspage,
    #sidebar,
    #footer {
        box-sizing: border-box;
        float: none;
        min-width: 0;
        width: 100%;
    }

    #description h1,
    #description div {
        background: #7aaa2a;
        color: #fff;
        font-size: 11px;
        line-height: 1.4;
        padding: 6px 12px;
        text-align: center;
    }

    #container {
        padding: 0 12px;
    }

    #header {
        height: auto;
    }

    #site-id,
    #site-id2,
    #toptel {
        float: none;
        line-height: 1;
        text-align: center;
    }

    #site-id,
    #site-id2 {
        padding-top: 12px;
    }

    #toptel {
        margin-top: 6px;
    }

    #site-id img,
    #site-id2 img,
    #toptel img,
    #contents img,
    #contentspage img {
        height: auto;
        max-width: 100%;
    }

    #global-nav {
        margin-top: 10px;
        overflow: visible;
    }

    #global-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
    }

    #global-nav .menu1,
    #global-nav .menu2,
    #global-nav .menu3,
    #global-nav .menu4,
    #global-nav .menu5,
    #global-nav .menu6,
    #global-nav ul li {
        background: none;
        float: none;
        height: auto;
        width: calc(50% - 3px);
    }

    #global-nav a {
        background: #7aaa2a;
        border-radius: 4px;
        color: #fff;
        display: block;
        font-size: 13px;
        font-weight: bold;
        height: auto;
        line-height: 1.35;
        padding: 10px 4px;
        text-align: center;
        text-decoration: none;
        text-indent: 0;
    }

    #bread-crumb {
        box-sizing: border-box;
        clear: both;
        display: block;
        float: none;
        font-size: 11px;
        line-height: 1.5;
        margin: 10px 0 0;
        padding: 0 0 6px;
        position: relative;
        width: 100%;
        z-index: 1;
    }

    #bread-crumb ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0 6px;
        margin: 0;
        padding: 0;
    }

    #bread-crumb li {
        float: none;
        line-height: 1.5;
    }

    #bread-crumb li.sub {
        padding-left: 0;
    }

    #bread-crumb li.sub:before {
        content: ">";
        letter-spacing: 0;
        margin-right: 6px;
    }

    #contents-body {
        padding-top: 14px;
    }

    #contents,
    #contentspage {
        padding-bottom: 24px;
    }

    #rp,
    #rp2 {
        display: none;
    }

    #contents .top-editor,
    #contents .top-editor *,
    #contentspage .entry-content,
    #contentspage .entry-content *,
    #contentspage .top-editor,
    #contentspage .top-editor * {
        box-sizing: border-box;
        max-width: 100%;
    }

    #contents .top-editor {
        overflow: hidden;
        width: 100%;
    }

    #contents .top-editor img,
    #contents .top-editor iframe,
    #contents .top-editor video,
    #contentspage .entry-content img,
    #contentspage .entry-content iframe,
    #contentspage .entry-content video {
        height: auto;
        max-width: 100%;
    }

    #contents .top-editor .alignleft,
    #contents .top-editor .alignright,
    #contentspage .entry-content .alignleft,
    #contentspage .entry-content .alignright,
    #contents .top-editor img.alignleft,
    #contents .top-editor img.alignright,
    #contentspage .entry-content img.alignleft,
    #contentspage .entry-content img.alignright {
        clear: both;
        display: block;
        float: none;
        margin: 10px auto 14px;
    }

    #contents .top-editor p,
    #contentspage .entry-content p {
        overflow: hidden;
    }

    #contents .top-editor h2,
    #contents .top-editor h3,
    #contents .top-editor .bgh2,
    #contents .top-editor .bgh3,
    #contentspage .entry-content h1,
    #contentspage .entry-content h2,
    #contentspage .entry-content h3,
    #contentspage .entry-content .bgh2,
    #contentspage .entry-content .bgh3 {
        display: block;
        font-size: 100%;
        height: auto;
        line-height: 1.45;
        min-height: 0;
        width: 100%;
    }

    #contents .top-editor h2.noh2-32,
    #contentspage .entry-content h2.noh2-32 {
        font-size: 24px;
        line-height: 1.55;
        text-align: center;
    }

    #contents .top-editor h2.noh2-24,
    #contentspage .entry-content h2.noh2-24 {
        font-size: 20px;
        line-height: 1.55;
    }

    #contents .top-editor .gallery,
    #contentspage .entry-content .gallery {
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
        width: 100%;
    }

    #contents .top-editor .gallery .gallery-item,
    #contentspage .entry-content .gallery .gallery-item {
        box-sizing: border-box;
        float: none;
        margin: 8px 0;
        padding: 0 4px;
        width: 50%;
    }

    #contents .top-editor .gallery br,
    #contentspage .entry-content .gallery br {
        display: none;
    }

    #contents .top-editor table.top-table,
    #contents .top-editor table.table-btn,
    #contents .top-editor table:not(.keep-table),
    #contents .top-editor table.top-table tbody,
    #contents .top-editor table.table-btn tbody,
    #contents .top-editor table:not(.keep-table) tbody,
    #contents .top-editor table.top-table tr,
    #contents .top-editor table.table-btn tr,
    #contents .top-editor table:not(.keep-table) tr,
    #contents .top-editor table.top-table td,
    #contents .top-editor table.table-btn td,
    #contents .top-editor table:not(.keep-table) td,
    #contents .top-editor table:not(.keep-table) th,
    #contentspage .entry-content table.top-table,
    #contentspage .entry-content table.table-btn,
    #contentspage .entry-content table:not(.keep-table),
    #contentspage .entry-content table.top-table tbody,
    #contentspage .entry-content table.table-btn tbody,
    #contentspage .entry-content table:not(.keep-table) tbody,
    #contentspage .entry-content table.top-table tr,
    #contentspage .entry-content table.table-btn tr,
    #contentspage .entry-content table:not(.keep-table) tr,
    #contentspage .entry-content table.top-table td,
    #contentspage .entry-content table.table-btn td,
    #contentspage .entry-content table:not(.keep-table) td,
    #contentspage .entry-content table:not(.keep-table) th {
        display: block;
        height: auto;
        width: 100%;
    }

    #contents .top-editor table.top-table,
    #contents .top-editor table.table-btn,
    #contents .top-editor table:not(.keep-table),
    #contentspage .entry-content table.top-table,
    #contentspage .entry-content table.table-btn,
    #contentspage .entry-content table:not(.keep-table) {
        border-collapse: collapse;
        margin: 0 0 18px;
    }

    #contents .top-editor table.top-table td,
    #contents .top-editor table.table-btn td,
    #contents .top-editor table:not(.keep-table) td,
    #contents .top-editor table:not(.keep-table) th,
    #contentspage .entry-content table.top-table td,
    #contentspage .entry-content table.table-btn td,
    #contentspage .entry-content table:not(.keep-table) td,
    #contentspage .entry-content table:not(.keep-table) th {
        padding: 0 0 14px;
    }

    /* SP static HTML hard overrides: old inline widths/floats break fixed pages. */
    #contents .top-editor [style*="width"],
    #contentspage .entry-content [style*="width"] {
        height: auto !important;
        max-width: 100% !important;
        width: auto !important;
    }

    #contents .top-editor [style*="float"],
    #contentspage .entry-content [style*="float"],
    #contents .top-editor .alignleft,
    #contents .top-editor .alignright,
    #contentspage .entry-content .alignleft,
    #contentspage .entry-content .alignright,
    #contents .top-editor img.alignleft,
    #contents .top-editor img.alignright,
    #contentspage .entry-content img.alignleft,
    #contentspage .entry-content img.alignright {
        clear: both !important;
        display: block !important;
        float: none !important;
        height: auto !important;
        margin: 12px auto 16px !important;
        max-width: 100% !important;
    }

    #contents .top-editor table.top-table,
    #contents .top-editor table.table-btn,
    #contents .top-editor table:not(.keep-table),
    #contents .top-editor table.top-table tbody,
    #contents .top-editor table.table-btn tbody,
    #contents .top-editor table:not(.keep-table) tbody,
    #contents .top-editor table.top-table tr,
    #contents .top-editor table.table-btn tr,
    #contents .top-editor table:not(.keep-table) tr,
    #contents .top-editor table.top-table td,
    #contents .top-editor table.table-btn td,
    #contents .top-editor table:not(.keep-table) td,
    #contents .top-editor table:not(.keep-table) th,
    #contentspage .entry-content table.top-table,
    #contentspage .entry-content table.table-btn,
    #contentspage .entry-content table:not(.keep-table),
    #contentspage .entry-content table.top-table tbody,
    #contentspage .entry-content table.table-btn tbody,
    #contentspage .entry-content table:not(.keep-table) tbody,
    #contentspage .entry-content table.top-table tr,
    #contentspage .entry-content table.table-btn tr,
    #contentspage .entry-content table:not(.keep-table) tr,
    #contentspage .entry-content table.top-table td,
    #contentspage .entry-content table.table-btn td,
    #contentspage .entry-content table:not(.keep-table) td,
    #contentspage .entry-content table:not(.keep-table) th {
        box-sizing: border-box !important;
        display: block !important;
        float: none !important;
        height: auto !important;
        width: 100% !important;
    }

    #contents .top-editor table img,
    #contentspage .entry-content table img {
        display: block;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }

    #footer,
    #footer-container {
        display: none;
    }

    .pc-viewer {
        display: none;
    }

    .sp-viewer {
        background: url("../images/top-bg.png") no-repeat center top;
        background-size: auto 230px;
        display: block;
        height: 230px;
        margin: 12px 0 0;
        overflow: hidden;
        position: static;
        width: 100%;
    }

    .sp-main-visual {
        display: none;
    }

    #sidebar {
        display: none;
    }

    .sp-fixed-menu {
        background: #7aaa2a;
        bottom: 0;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        left: 0;
        position: fixed;
        right: 0;
        z-index: 10000;
    }

    .sp-fixed-menu a,
    .sp-fixed-menu button {
        align-items: center;
        appearance: none;
        background: transparent;
        border: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.35);
        color: #fff;
        display: flex;
        font-size: 12px;
        font-weight: bold;
        justify-content: center;
        line-height: 1.25;
        min-height: 46px;
        padding: 6px 8px;
        text-align: center;
        text-decoration: none;
    }

    .sp-fixed-menu a:first-child,
    .sp-fixed-menu button:first-child {
        border-left: 0;
    }

    .sp-fixed-menu__button {
        cursor: pointer;
        font-family: inherit;
    }

    #page-top {
        bottom: 64px;
        right: 8px;
    }

    #page-top a {
        background-size: 54px auto;
        height: 54px;
        width: 54px;
    }

    #page-top img {
        width: 54px;
    }

    .sp-drawer-menu {
        background: rgba(0, 0, 0, 0.45);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 10001;
    }

    .sp-drawer-menu.is-open {
        display: block;
    }

    .sp-drawer-menu__inner {
        background: #fff;
        box-sizing: border-box;
        height: 100%;
        margin-left: auto;
        max-width: 340px;
        overflow-y: auto;
        padding: 16px;
        width: 88%;
    }

    .sp-drawer-menu__close {
        background: #7aaa2a;
        border: 0;
        color: #fff;
        display: block;
        font-weight: bold;
        margin: 0 0 12px auto;
        padding: 8px 14px;
    }

    .sp-drawer-menu__title {
        border-bottom: 2px solid #7aaa2a;
        color: #333;
        font-size: 16px;
        font-weight: bold;
        margin: 0 0 8px;
        padding-bottom: 8px;
    }

    .sp-drawer-menu__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .sp-drawer-menu__list li {
        border-bottom: 1px solid #e2e2e2;
    }

    .sp-drawer-menu__list a {
        color: #333;
        display: block;
        font-weight: bold;
        padding: 12px 4px;
        text-decoration: none;
    }

    .sp-drawer-menu .blog-recent-posts {
        list-style: none;
        margin: 0 0 14px;
        padding: 0;
    }

    .sp-drawer-menu .blog-recent-posts li {
        border-bottom: 1px solid #e2e2e2;
        line-height: 1.5;
    }

    .sp-drawer-menu .blog-recent-posts a,
    .sp-drawer-menu__blog-link {
        color: #333;
        display: block;
        font-weight: bold;
        padding: 12px 4px;
        text-decoration: none;
    }

    .sp-drawer-menu__blog-link {
        background: #7aaa2a;
        color: #fff;
        margin-top: 8px;
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    #contents .top-editor h2.noh2-32,
    #contentspage .entry-content h2.noh2-32 {
        font-size: 21px;
    }

    #contents .top-editor .gallery .gallery-item,
    #contentspage .entry-content .gallery .gallery-item {
        width: 50%;
    }
}