/*
Theme Name: いしのまき元気市場 ver5.3.6
Description: 26may08-30//サイト全体の表示速度改善のためCSSの見直し、JSの軽量化とアイコン画像のWebPもしくはSVG化。MediaQueryの切替位置の変更。ACFでの画像表示を「画像URL」→「画像ID」に変更。前のverのテーマファイルを再利用する際は要注意。
Version: 5.3.6
Author: SHOKODO.Co.,Ltd
*/
/*/////////////////////////////////////////
    Base Structure
    Common

    Small @media screen and (max-width: 512px)
    Medium @media screen and (min-width: 513px) and (max-width: 959px)
    Large @media screen and (min-width: 960px)
/////////////////////////////////////////*/
body,
html {
    font-family: sans-serif;
    color: #000;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    width: 100vw;
}

ul {
    list-style: none;
}

@media screen and (min-width: 960px) {
    body {
        width: 100%;
    }
}

/*---------------------------------------
    Images
---------------------------------------*/
@media screen and (min-width: 513px) and (max-width: 959px) {

    .img_wrap img,
    .img_wrap picture {
        margin-bottom: 0;
    }

    .single img.aligncenter {
        max-width: 80%;
        margin: 1em auto;
    }
}

/* SVGアイコンの左右かけ防止 */
svg {
    overflow: visible;
}

/*---------------------------------------
    WP Style
---------------------------------------*/
img.alignleft {
    float: left;
    display: block;
    margin-top: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
}

img.alignright {
    float: right;
    display: block;
    margin-top: 1em;
    margin-left: 1em;
    margin-bottom: 1em;
}

img.aligncenter {
    display: block;
    margin: 1em auto;
}

.single img.aligncenter {
    max-width: 100%;
    margin: 1em auto;
}

/*---------------------------------------
    clearfix
---------------------------------------*/
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

/*---------------------------------------
    Button // PageTo
---------------------------------------*/
#toTop,
#pagetop {
    z-index: 5;
    position: fixed;
    bottom: 21px;
    right: 0;
}

#toTop a,
#pagetop a {
    display: block;
}

#toTop span,
#pagetop span {
    color: transparent;
    display: block;
    width: 56px;
    height: 56px;
    background-image: image-set(
        url(images/pagetop.webp) type("image/webp"),
        url(images/pagetop.png) type("image/png")
    );
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
}

#toTop {
    transition: .3s;
}

#toTop.show {
    opacity: 1;
    visibility: visible;
}

/*---------------------------------------
    SVG
---------------------------------------*/
a.btn-googlemap svg,
a.btn-parkingmap svg {
    width: 1.5em;
    height: 1.5em;
    fill: #fff;
    margin-bottom: -0.3em;
}

/*---------------------------------------
    Button // BackHome
---------------------------------------*/
#back-home {
    position: fixed;
    bottom: 12em;
    right: 0.3em;
    width: 65px;
}

#back-home a {
    display: block;
}

#back-home span img {
    color: transparent;
    display: block;
    width: 65px;
    height: auto;
}

/*---------------------------------------
    Button // reCapcha
---------------------------------------*/
.grecaptcha-badge {
    z-index: 5;
    bottom: 7em !important;
}

/*---------------------------------------
    Links
---------------------------------------*/
a {
    color: #000;
    text-decoration: none;
}

a:hover {
    cursor: pointer;
    opacity: 0.5;
}

a.underline-link {
    text-decoration: underline;
}

/*---------------------------------------
    br PC表示
---------------------------------------*/
@media screen and (max-width: 520px) {
    .pc-br {
        display: none;
    }

    .tb-br {
        display: none;
    }

    .sp-br {
        display: block;
    }
}

@media screen and (min-width: 521px) and (max-width: 959px) {
    .pc-br {
        display: none;
    }

    .tb-br {
        display: block;
    }

    .sp-br {
        display: none;
    }
}

@media screen and (min-width: 960px) {
    .pc-br {
        display: block;
    }

    .tb-br {
        display: block;
    }

    .sp-br {
        display: none;
    }
}

/*---------------------------------------
    Font
---------------------------------------*/
.red {
    color: #ff0000;
}

.small {
    font-size: 80%;
}

/*---------------------------------------
    Heading
---------------------------------------*/
h1 {
    font-size: 2em;
}

h1 span {
    font-size: 0.5em;
}

h2 {
    font-size: 1.875em;
}

h2 span {
    display: block;
    font-size: 0.5em;
}

h3 {
    font-size: 1.5em;
}

h3 span {
    font-size: 0.8em;
}

h4 {
    font-size: 1.3em;
}

h5 {
    font-size: 1.2em;
}

h5 span {
    font-size: 0.8em;
}

h6 {
    font-size: 1.1em;
}

/*---------------------------------------
    Design Heading
---------------------------------------*/
#access-area h2 {
    text-align: center;
    color: #0053A9;
}

#about h2 span,
#news h2 span,
#access h2 span,
#access-area h2 span {
    display: block;
    font-weight: normal;
}

.ribbon-title {
    display: inline-block;
    position: relative;
    width: 90%;
    line-height: 150%;
    text-align: center;
    margin: 0 5% 1em 5%;
    padding: 1em 2em;
    font-size: 120%;
    background: #3498db;
    color: #fff;
    box-sizing: border-box;
}

.ribbon-title:before,
.ribbon-title:after {
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.ribbon-title:before {
    top: 0;
    left: 0;
    border-width: 34px 0px 34px 30px;
    border-color: transparent transparent transparent #fff;
    border-style: solid;
}

.ribbon-title:after {
    top: 0;
    right: 0;
    border-width: 34px 30px 34px 0px;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
}

/*---------------------------------------
    Header
---------------------------------------*/
@media screen and (max-width: 520px) {
    header {
        flex-wrap: nowrap;
        padding: 60px 1em 2em 1em;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 795px) and (min-width: 521px) {
    header {
        flex-wrap: wrap;
        ;
    }
}

header {
    position: relative;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-top: #00a0ff 10px solid;
}
@media screen and (max-width: 520px) {
    .header-info-area {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-between;
    }
}
@media screen and (max-width: 795px) and (min-width: 521px) {
    .header-info-area {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
    }
}
@media screen and (min-width: 796px) and (max-width: 959px) {
    .header-info-area {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
    }
}
@media screen and (min-width: 960px) {
    .header-info-area {
        flex-direction: row;
        flex-wrap: nowrap;
        width: 1275px;
        margin: 1em auto;
        padding-bottom: 1em;
        border-bottom: #000 1px solid;
    }
}

.header-info-area {
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

@media screen and (max-width: 520px) {
    .header-info-area svg {
        width: 360px;
        height: auto;
    }
}

@media screen and (min-width: 521px) {
    .logo-genki svg {
        max-width: 100%;
        margin: 0;
    }
}

@media screen and (max-width: 795px) {
    .header-info-area svg.logo-genki {
        text-align: center;
        margin: 0 auto;
    }
}

@media screen and (max-width: 520px) {
    .businesshour-area {
        width: 100%;
        margin: 1em auto;
    }
}
@media screen and (max-width: 795px) and (min-width: 521px) {
    .businesshour-area {
        width: 55%;
        margin: 1em auto;
    }
}
@media screen and (min-width: 796px) and (max-width: 959px) {
    .businesshour-area {
        width: 70%;
        margin-left: 2em;
    }
}
.businesshour-area {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 1em;
}

@media screen and (max-width: 520px) {
    .businesshour-area dl {
        width: calc(100% - 50px);
    }
}

@media screen and (max-width: 795px) and (min-width: 521px) {
    .businesshour-area dl {
        width: calc(100% - 45px);
    }
}

@media screen and (min-width: 796px) and (max-width: 959px) {
    .businesshour-area dl {
        width: calc(100% - 40px);
    }
}

@media screen and (min-width: 960px) {
    .businesshour-area dl {
        width: calc(100% - 55px);
        /* 「営業時間」の幅と余白分マイナス */
    }
}

.businesshour-area dl {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

@media screen and (max-width: 520px) {
    .businesshour-area dl dt {
        width: 40%;
    }
}

@media screen and (max-width: 795px) and (min-width: 521px) {
    .businesshour-area dl dt {
        width: 35%;
        margin-bottom: 0.5em;
    }
}

@media screen and (min-width: 796px) and (max-width: 959px) {
    .businesshour-area dl dt {
        width: 30%;
        margin-bottom: 0.5em;
    }
}

@media screen and (min-width: 960px) {
    .businesshour-area dl dt {
        width: 30%;
        margin-bottom: 0.5em;
    }
}

.businesshour-area dl dt {
    color: #0040a4;
}

@media screen and (max-width: 520px) {
    .businesshour-area dl dt span {
        /* display: block; */
        text-align: left;
    }
}

@media screen and (max-width: 795px) and (min-width: 521px) {
    .businesshour-area dl dt span {
        display: inline;
        text-align: left;
    }
}

@media screen and (min-width: 796px) and (max-width: 959px) {
    .businesshour-area span {
        display: block;
        width: 100%;
        text-align: right;
    }
}

@media screen and (max-width: 520px) {
    .businesshour-area dl dd {
        max-width: 70%;
    }
}

@media screen and (max-width: 795px) and (min-width: 521px) {
    .businesshour-area dl dd {
        margin-bottom: 0.5em;
    }
}

@media screen and (min-width: 796px) and (max-width: 959px) {
    .businesshour-area dl dd {
        width: 70%;
        margin-bottom: 0.5em;
    }
}

@media screen and (min-width: 960px) {
    .businesshour-area dl dd {
        width: 70%;
        margin-bottom: 0.5em;
    }
}

.businesshour-area dl dt,
.businesshour-area dl dd {
    margin: 0;
    padding: 0;
    font-weight: 700;
}

@media screen and (max-width: 520px) {
    .btn-area {
        display: flex;
    }
}
@media screen and (max-width: 795px) and (min-width: 521px) {
    .btn-area {
        width: 30%;
        display: flex;
        flex-direction: column;
        gap: 0.5em;
        margin: 1em 0 0 0;
    }
}
@media screen and (min-width: 796px) and (max-width: 959px) {
    .btn-area {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        margin: 1em 0 0 0;
    }
}
@media screen and (min-width: 960px) {
    .btn-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        margin: 0;
    }
}

@media screen and (max-width: 520px) {
    .btn-area picture,
    .btn-area img {
        width: 90%;
        height: auto;
    }
}

@media screen and (min-width: 521px) {
    .btn-area picture,
    .btn-area img {
        width: 142px;
        height: auto;
    }
}


/*---------------------------------------
  Menu
---------------------------------------*/
@media screen and (min-width: 960px) {
    .head-menu {
        width: 1470px;
        margin: 1em auto;
    }
}
@media screen and (max-width: 520px) {
    .drawer-logo img {
        width: 50%;
        height: auto;
        margin: 0;
    }    
}
@media screen and (min-width: 521px) {
    .drawer-logo img {
        display: none;
    } 
}
@media screen and (max-width: 795px) and (min-width: 521px) {
    .head-menu {
        width: 90%;
        margin: 1em auto;
    }
}

@media screen and (max-width: 795px) and (min-width: 521px) {
    .menu ul li {
        width: calc(100% / 6);
    }
}
@media screen and (max-width: 795px) and (min-width: 521px) {
    .menu ul li a svg {
        width: 90%;
        height: auto;
        margin: 0 5%;
    }
}

@media screen and (max-width: 795px) and (min-width: 521px) {
    .menu ul {
        flex-direction: row;
        column-gap: 1em;
        width: 100%;
    }
}
@media screen and (min-width: 960px) {
    .menu ul {
        justify-content: center;
        column-gap: 1em;
    }
}
.menu ul {
    display: flex;
    padding: 0;
    margin: 0;
}

.head-menu ul li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.head-menu ul li a span {
    display: block;
    text-align: center;
    font-weight: 700;
}

#drawer,
label p {
    display: none;
}

/*---------------------------------------
    Sections
---------------------------------------*/
@media screen and (min-width: 960px) {
    .main,
    #contact .inner,
    #pickup-area .inner {
        width: 1080px;
    }
}
.main,
#contact .inner,
#pickup-area .inner,
footer .footer_top {
    margin: 0 auto;
}

footer {
    padding: 0 65px 0 0;
}

nav#fnav {
    width: 100%;
    margin: 0.5em auto;
}

@media screen and (max-width: 959px) {
    .main {
        width: 90%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 959px) {
    .main img {
        max-width: 100%;
        height: auto;
    }
}


@media screen and (min-width: 960px) {
    footer .footer_top {
        width: 70%;
    }
}

/*---------------------------------------
    Sections // Contact
---------------------------------------*/
#contact h2 {
    letter-spacing: 0.2rem;
    color: #0053A9;
}

#contact h3 {
    margin: 0 0 0 0;
    text-align: center;
}

#contact {
    position: relative;
    text-align: center;
    color: #fff;
}

#contact a {
    color: #fff;
}


@media screen and (max-width: 512px) {
    #contact::before {
        top: 5px;
        left: 25px;
    }
}
@media screen and (min-width: 511px) and (max-width: 959px) {
    #contact::before {
        top: 40px;
        left: 100px;
    }
}
@media screen and (min-width: 960px) {
    #contact::before {
        top: 35px;
        left: 620px;
    }
}
#contact::before {
    content: '';
    display: inline-block;
    position: absolute;
    background-image: image-set(url("./images/kamome03.webp") type("image/webp"),
                    url("./images/kamome03.png") type("image/png"));
    background-size: contain;
    background-repeat: no-repeat;
    width: 143px;
    height: 48px;
}

@media screen and (max-width: 512px) {
    #contact::after {
        top: 15px;
        right: -15px;
    }
}
@media screen and (min-width: 511px) and (max-width: 959px) {
    #contact::after {
        top: 0;
        right: 100px;
    }
}
@media screen and (min-width: 960px) {
    #contact::after {
        top: 0;
        right: 600px;
    }
}
#contact::after {
    content: '';
    display: inline-block;
    position: absolute;
    background-image: image-set(url("./images/kamome04.webp") type("image/webp"),
                    url("./images/kamome04.png") type("image/png"));
    background-size: contain;
    background-repeat: no-repeat;
    width: 143px;
    height: 48px;
}

@media screen and (min-width: 960px) {
    #contact .inner {
        margin: 0 auto;
        padding: 0 0 1em 0;
    }
}

@media screen and (max-width: 512px) {
    #contact .inner::before {
        top: 115px;
        right: 0;
        width: 120px;
        height: 120px;
    }
}
@media screen and (min-width: 511px) and (max-width: 959px) {
    #contact .inner::before {
        top: 245px;
        right: 1em;
        width: 175px;
        height: 242px;
    }
}
@media screen and (min-width: 960px) {
    #contact .inner::before {
        top: 240px;
        right: 370px;
        width: 159px;
        height: 145px;
    }
}
#contact .inner::before {
    content: '';
    display: inline-block;
    position: absolute;
    background-image: image-set(url("./images/ship02.webp") type("image/webp"),
                    url("./images/ship02.png") type("image/png"));
    background-size: contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 512px) {
    #contact .sub_txt {
        margin: 6.8em 0 0 0;
    }
}
@media screen and (min-width: 513px) {
    #contact .sub_txt {
        margin: 7.5em 0 0 0;
    }
}


.tenant {
    width: 80%;
    padding: 1em;
    margin: 0 auto;
    border: 1px solid #fff;
}
    .tenant p {
        margin: 0 0 1em 0;
    }

.sub_txt {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
}


@media screen and (max-width: 512px) {
    .content {
        font-size: 0.9em;
        line-height: 1.5em;
        margin: 0.5em 0 1em 0;
    }
}

@media screen and (max-width: 512px) {
    #contact {
        margin: 0 auto;
        padding: 35px 0 1em 0;
        background-position: 0 72px;
    }
}
@media screen and (min-width: 513px) and (max-width: 769px) {
    #contact {
        margin: 3em 0 0 0;
        padding: 1em 0 2em 0;
        background-position: 0 53px;
    }
}
/* Tablet表示から画像をSP用に差し替え */
@media screen and (max-width: 959px) {
    #contact {
        background-image: image-set(url("./images/contact_bg-sp.webp") type("image/webp"),
                url("./images/contact_bg-sp.png") type("image/png"));
        background-repeat: no-repeat;
    }
}

@media screen and (min-width: 770px) and (max-width: 959px) {
    #contact {
        padding: 4em 0 0 0;
        margin: 4em 0 0 0;
    }
}
@media screen and (min-width: 960px) {
    #contact {
        padding: 0;
        margin: 4em 0 0 0;
        /* WebP未対応ブラウザ対策 */
        background-image: image-set(url("./images/contact_bg-pc.webp") type("image/webp"),
                url("./images/contact_bg-pc.png") type("image/png"));
        background-repeat: no-repeat;
        background-position: top center;
    }
}
#contact {
    width: calc(100vw - var(--scrollbar-width));
    background-size: cover;
}

@media screen and (min-width: 960px) {
    #contact h3 span {
        display: inline;
    }
}

@media screen and (min-width: 513px) and (max-width: 769px) {
    #contact h2 {
        margin: 80px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 960px) {
    #contact h2 {
        margin: 0 0 1em 0;
        padding: 0 0 2.5em 0;
    }
}
@media screen and (min-width: 960px) {
    #contact h2 span {
        display: block;
        font-weight: normal;
    }
}

/*---------------------------------------
    Sections // Footer
---------------------------------------*/
@media screen and (min-width: 960px) {
    nav#fnav {
        width: 82%;
        padding: 1em 0;
    }
}

footer {
    width: 100%;
}

@media screen and (max-width: 512px) {
    .footer_top {
        padding: 0 1em;
    }
}
.footer_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

@media screen and (max-width: 512px) {
    ul.foot-nav-area {
        flex-wrap: wrap;
        align-items: flex-start;
        width: 90%;
        margin: 0;
        padding: 1em 0;
    }
}
@media screen and (min-width: 960px) {
    ul.foot-nav-area {
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 95%;
        margin: 0 5% 0 0;
    }
}
ul.foot-nav-area {
    display: flex;
}
@media screen and (max-width: 512px) {
    ul.foot-nav-area li {
        padding: 1em 0 0 0;
        margin: 0 1em 0.5em 0;
    }
}
@media screen and (min-width: 960px) {
    ul.foot-nav-area li {
        line-height: 1.8;
        padding-right: 1em;
        margin: 0;
        padding: 0 1.5em;
    }
}
@media screen and (min-width: 513px) and (max-width: 959px) {
    ul.foot-nav-area li {
        padding: 0.5em 0.5em;
        margin: 0;
        border-right: #000 1px solid;
    }
}
ul.foot-nav-area li {
    font-size: 0.85em;
}

@media screen and (min-width: 513px) and (max-width: 959px) {
    ul.foot-nav-area li::after {
        padding: 0 0.5em;
    }
}

ul.foot-nav-area li:last-of-type {
    border-right: none;
}

@media screen and (max-width: 512px) {
    .footer_sns {
        justify-content: center;
        padding: 1em 0;
    }
}
@media screen and (min-width: 513px) and (max-width: 769px) {
    .footer_sns {
        justify-content: flex-start;
        width: 100%;
        margin-left: 1em;
    }
}
@media screen and (min-width: 770px) and (max-width: 959px) {
    .footer_sns {
        width: 20%;
    }
}
.footer_sns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .footer_sns img,
    .footer_sns svg {
        width: auto;
        height: 16px;
    }

    .footer_sns a img,
    .footer_sns a svg {
        width: 27px;
        height: auto;
        fill: #3498db;
    }

#copyright {
    background: #000;
    color: #fff;
    font-size: 0.75em;
    text-align: center;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    letter-spacing: 1px;
    padding: 1em 0;
}

    #copyright,
    #copyright .inner {
        width: 100%;
    }

    #copyright a {
        text-decoration: none;
        color: #fff;
    }