/*
layout-base.css — JP共通レイアウト（header / nav / sns / sidebar / right / footer）
=====================================================================
・全JPページで layout3.latte のbody末尾に「最後に」読み込む唯一の共通レイアウトCSS。
・bundle2.css / home.bundle2.css / new2022.common.min.css の共通レイアウト部分を
  統合済み（bundle2.css 優先）。
・page-specific の装飾（.searchAreamap / .soiMovie / 208pxムービー /
  listLatte.min.css / process.css 等）は本ファイルと衝突しないため各ページCSSに残す。
・変更後は cache/latte/ をクリアすること。
*/
/* ベースフォント: 全ページ統一 */
body {
    font-family: Murecho, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}

/* ===== 共通レイアウト: bundle2.css / home.bundle2.css / new2022 より統合 ===== */
#page-top,
#toThai {
    display: none;
}

@media (min-width:740px) {
    nav#globalNav {
        width: 1198px;

        height: 47px;

        margin: auto;
    }

    nav#globalNav>ol {
        display: flex;
    }

    nav#globalNav>ol>li {
        width: 20%;

        margin: 0 0.3em;

        border: 3px solid #009e8f;

        font-size: 1.4em;

        text-align: center;

        border-top: 5px solid green;

        border-radius: 0 0 10px 10px;
    }

    nav#globalNav>ol>li>a {
        display: block;

        color: #26a546;

        font-size: 20px;

        line-height: 37px;

        float: none;

        font-weight: 700;

        text-decoration: none;

        text-indent: 0;
    }

    .snsb {
        display: flex;

        align-items: center;

        justify-content: space-between;

        height: 40px;
    }

    .snsb>li {
        margin-right: 8px;

        margin-bottom: .5em;
    }

    .snsb form {
        width: 350px;

        height: 40px;
    }

    .snsb form>input:first-child {
        width: 155px;

        height: 23px;

        border: none;

        background: 0 0;

        color: #333;

        padding-top: 3px;

        padding-left: 10px;

        outline: 0;
    }

    .snsb form>input:last-child {
        position: relative;

        left: -40px;

        width: 40px;

        height: 40px;

        border: none;

        background: 0 0;

        color: #7fb97f;

        cursor: pointer;
    }
}

@media (max-width:740px) {
    #globalNav,
    #globalSns,
    #globalLeft,
    #globalFoot>nav {
        display: none;
    }

    nav.spglobal {
        transition: .2s;
    }
}

@media (min-width:740px) {
    article#globalLeft>nav>dl:nth-child(1)>dd {
        width: 182px;

        height: 73px;

        margin: 10px;
    }

    article#globalLeft>nav>dl:nth-child(2)>dd {
        width: 182px;

        height: 71px;

        margin: 10px;
    }

    article#globalLeft>nav>dl:nth-child(3)>dd {
        width: 182px;

        height: 73px;

        margin: 10px 10px 11px;
    }
}
/* ===== 共通レイアウト 統合終了 ===== */

#breadcrumbs ul {
    display: flex;
    background: #fefefe;
    background: linear-gradient(180deg, rgba(254, 254, 254, 1) 0, rgba(221, 221, 221, 1) 50%);
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #9cb39c;
    border-radius: 3px;
}

#breadcrumbs ul li {
    font-size: 16px;
    color: #333;
}

#breadcrumbs li:after {
    content: '>';
    padding: 0 .3em;
    color: #888;
    font-size: 20px;
}

#breadcrumbs li:last-child:after {
    content: '';
}

nav#breadcrumbs {
    ul {
        display: flex;

        li {
            font-size: 16px;
            line-height: 30px;
        }
    }
}

@media (max-width:740px) {
    nav.pager {
        margin-bottom: 10px;
    }

    nav.pager ul {
        display: flex;

        justify-content: space-around;
    }

    nav.pager ul li {
        width: 100%;

        padding: 0 6px;
    }

    nav.pager>ul>li>a.here {
        text-decoration: none;

        background: #62a478;

        color: #fff;
    }

    nav.pager>ul>li>a {
        text-align: center;

        color: #62a478;

        border: 1px solid #62a478;

        text-decoration: none;

        padding: 5px;

        border-radius: 3px;

        width: 100%;

        display: block;
    }

    header#top {
        height: 0;
        padding-top: 24.8%;
        margin-top: 53px;
        position: relative;
        background: url(../img/mobile/header.png) no-repeat;
        background-size: auto;
        background-size: contain;
        width: inherit;
        width: 100%;
    }

    .spglobal>ul {
        display: flex;
        flex-direction: column;
        padding-left: 10px;
    }

    nav.spglobal {
        background: #009e8f;

        position: fixed;

        z-index: 1;

        top: 60px;

        bottom: 0;

        right: 0;

        width: 0;

        transition: .5s;

        z-index: 5;

        padding: 8px 0;

        overflow-x: hidden;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
    }

    .spglobal li:not(:last-child),
    .spglobal ul:not(:last-child) {
        list-style: none;

        border-bottom: 2px solid #556b2f;
    }

    .spglobal ul {
        padding-left: 16px;
    }

    .spglobal a {
        text-decoration: none;

        font-size: 24px;

        line-height: 43px;

        color: #fff;
    }

    .spglobal ul li form {
        display: flex;
    }

    .spglobal .autoComplete_wrapper {
        width: calc(100% - 60px);
    }

    .spglobal .autoComplete_wrapper>input {
        height: 48px;

        width: 95%;

        margin: 0;

        padding: 0 20px 0 32px;

        font-size: 16px;

        border-radius: 100px;

        background-size: 22px;

        background-position: left 11px top 15px;

        background-repeat: no-repeat;

        background-origin: border-box;

        background-color: #fff;
    }

    .spglobal .autoComplete_wrapper>ul>li {
        margin: 5px;

        padding: 5px 10px;

        font-size: 18px;

        border-radius: 5px;
    }

    article#globalRight {
        width: 100%;

        overflow: hidden;
    }
}

@media (min-width:740px) {

    header#globalHead,
    header#top {
        position: relative;

        width: 100%;

        height: 120px;

        background: url(../img/pcGlobalHeaderBg2022.gif?2);
    }

    footer#globalFoot {
        width: 100%;
    }

    section#globalSns {
        width: 1168px;

        padding: 10px 16px 5px;
    }

    article#globalLeft {
        display: flex;

        flex-direction: column;

        row-gap: 10px;

        width: 203px;

        margin: 0 16px;

        border: none;
    }

    article#globalRight {
        width: 945px;

        margin-right: 16px;
    }

    article#globalLeft>nav>dl:nth-child(1) {
        background: url(../img/pcLeftMenu1.png) no-repeat;

        height: 469px;

        margin-bottom: 10px;
    }

    article#globalLeft>nav>dl:nth-child(2) {
        background: url(../img/pcLeftMenu2.png) no-repeat;

        height: 861px;

        margin-bottom: 10px;
    }

    article#globalLeft>nav>dl:nth-child(3) {
        background: url(../img/pcLeftMenu3.png) no-repeat;

        height: 552px;

        margin-bottom: 10px;
    }

    article#globalLeft>nav>dl>dt {
        width: 203px;

        height: 38px;

        margin: 0 0 10px;

        padding: 0;

        text-indent: 100%;

        white-space: nowrap;

        overflow: hidden;
    }

    article#globalLeft>nav>dl>dd {
        width: 183px;

        height: 75px;

        margin: 9px;
    }

    article#globalLeft>nav>dl>dd>a {
        display: block;

        overflow: hidden;

        text-indent: 100%;

        white-space: nowrap;

        height: 100%;
    }

    footer#globalFoot>p {
        height: 68px;

        line-height: 68px;

        text-align: center;
    }

    footer#globalFoot>nav>ol {
        width: 100%;

        height: 42px;

        margin: 0;

        padding: 0;

        background: 0 0;

        display: flex;

        border-bottom: 3px solid green;

        justify-content: space-evenly;
    }

    footer#globalFoot>nav>ol>li {
        border: 3px solid green;

        border-radius: 10px 10px 0 0;

        text-align: center;

        font-size: 24px;

        margin: 0 .3em;

        width: max-content;

        padding: 0 5px;

        border-bottom: none;
    }

    footer#globalFoot>nav>ol>li>a {
        font-size: 20px;

        line-height: 39px;

        font-weight: 700;

        color: green;

        padding: 0 10px;

        display: block;

        height: 100%;
    }

    footer#globalFoot>nav>ol>li:last-child {
        width: 228px;

        margin-right: 0;
    }

    #globalLeft>a {
        width: 100%;
    }

    #globalLeft>a.volunteer {
        line-height: 35px;

        text-decoration: none;

        text-align: center;

        font-size: 20px;

        padding: 6px 0;

        border: solid 1px;
    }

    #globalLeft>a>h3 {
        color: #db0000;

        top: -127px;

        font-size: 19px;

        font-weight: 700;

        position: relative;

        text-align: right;

        line-height: 130%;

        margin: 0 2px 0 0;

        width: 98%;
    }

    #globalLeft>a>h3.tm30 {
        color: #242424;

        top: -120px;

        font-size: 22px;

        text-align: center;
    }

    #globalLeft>a>p.tm30 {
        text-align: center;

        margin: 0;

        font-size: 12px;
    }

    #globalLeft>a>p {
        top: -121px;

        color: #242424;

        font-size: 12px;

        position: relative;

        display: block;

        margin-left: 51%;
    }

    #globalLeft .headoffice {
        color: #fff;

        border: 1px solid #000;

        text-align: center;

        font-weight: 700;

        font-size: 16px;

        padding: .4em;

        margin: 8px 0 4px 0;

        background-color: #0e3e98;
    }

    #globalLeft .storelist {
        color: #fff;

        border: 1px solid #000;

        text-align: center;

        font-weight: 700;

        font-size: 20px;

        padding: .4em;

        margin: 16px 0 8px 0;

        background-color: #1f864c;
    }

    #globalLeft>a.store {
        height: 157px;

        position: relative;
    }

    #globalLeft>a.store>span {
        top: 5px;

        left: 0;

        right: 0;

        position: absolute;

        color: #094;

        font-size: 17px;

        text-align: center;

        font-weight: 700;

        display: block;
    }

    #globalLeft .youtube {
        border: 1px #000 solid;

        font-weight: 700;

        color: #009e8f;

        font-size: 20px;

        display: block;

        width: 100%;

        padding-top: 1em;

        padding-bottom: 1em;

        text-decoration: none;

        line-height: 150%;

        text-align: center;
    }

    #globalLeft .condo {
        border: 1px #000 solid;

        font-weight: 700;

        color: #db0000;

        font-size: 19px;

        display: block;

        width: 100%;

        padding-top: 1em;

        padding-bottom: 1em;

        text-decoration: none;

        line-height: 150%;

        text-align: center;
    }

    nav.pager>ul>li>a {
        min-width: 20px;

        margin: 0 5px 0 0;

        padding: 5px;

        line-height: 20px;

        text-align: center;

        color: #62a478;

        border: 1px solid #62a478;

        text-decoration: none;
    }

    nav.pager>ul>li>a.here {
        text-decoration: none;

        background: #62a478;

        color: #fff;
    }
}