/* Homepage styles extracted from original www.mercari-emart.com */
body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}
:root {
    --primary: #5E6DF2;
    --hov-primary: #5562DA;
    --soft-primary: rgba(94,109,242,0.15);
}

#map {
    width: 100%;
    height: 250px;
}
#edit_map {
    width: 100%;
    height: 250px;
}

.pac-container { z-index: 100000; }
.fc-widget-small { display: none !important; }

@media screen and (max-width: 1024px) {
    footer .footer_cnt {
        flex-wrap: wrap !important;
        justify-content: space-around !important;
        width: 100%;
        max-width: 760px;
        align-content: flex-start;
        flex-direction: column;
    }
}

#header .navbar-default .navbar-collapse2 .navbar-nav > li {
    white-space: nowrap;
}
@media screen and (max-width: 767px) {
    #header .navbar-default .navbar-collapse2 {
        width: 100%;
        margin: 0 auto;
        background: #fff;
        border-bottom: 1px solid #e7e7e7;
    }
}
@media (min-width: 768px) {
    .navbar-nav > li {
        float: left;
    }
    .navbar-collapse2 {
        width: auto;
        box-shadow: none;
        border-top: 0px;
    }
    .navbar-collapse2.collapse {
        padding-bottom: 0px;
        display: block !important;
        height: auto !important;
        visibility: visible !important;
        overflow: visible !important;
    }
    .container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse2, .container-fluid > .navbar-collapse2 {
        margin-right: 0px;
        margin-left: 0px;
    }
    .navbar-default .nav li a {
        margin: 7px 0 0 5px;
    }
    .navbar-default {
        padding: 5px 0 5px 0;
    }
    .navbar-right {
        float: right !important;
        margin-right: -15px;
    }
    .navbar-toggle {
        display: none;
    }
    #header #header-search .submit {
        width: 40px;
        border-radius: 0;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        background: #ececec url(/images/icn_header-search.png) no-repeat 40%;
        background-size: 15px auto;
        border: 1px solid #757575;
        border-left: none;
        width: 8%;
    }
    .navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
        margin-left: -15px;
    }
}

.navbar-fixed-top .navbar-collapse2, .navbar-fixed-bottom .navbar-collapse2 {
    max-height: 340px;
}
#header .navbar-default .navbar-collapse2 {
    width: auto;
}
#header .container {
    max-width: 1160px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}
#header .navbar-default .navbar-right {
    display: flex;
    justify-content: flex-end;
    float: none !important;
    margin-right: 0;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}
.visible-xs, .visible-sm, .visible-md, .visible-lg {
    display: none !important;
}
.navbar-nav > li > a {
    padding: 5px;
}
.navbar-default .nav li a {
    border: solid 1px rgba(0, 0, 0, 0);
    color: #000;
    font-size: 14px;
    text-transform: uppercase;
}
#header .reg {
    border: #5E6DF2 1px solid !important;
    border-radius: 3px;
    background-color: #5E6DF2 !important;
    color: #fff !important;
    font-weight: bold !important;
    line-height: 32px;
}
option {
    font-weight: normal;
    display: block;
    white-space: nowrap;
    min-height: 1.2em;
    padding: 0px 2px 1px;
}
header .nav .lang_wrap select, #header .lang_wrap select {
    height: 32px;
    padding: 2px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    vertical-align: middle;
    background: #fafafa;
}
#header .lang_wrap {
    margin: 7px 0 0 5px;
}
#header .navbar-default .navbar-collapse .navbar-nav > li {
    white-space: nowrap;
}
.nav > li {
    position: relative;
    display: block;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar-nav {
    margin: 7.5px -15px;
}
#header .navbar-default .navbar-collapse {
    width: auto;
}
@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
    .visible-xs {
        display: block !important;
    }
    #header .container .container-inner .navbar-header02 {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .vsbl_sp {
        display: block;
    }
    #header .navbar-default .navbar-right {
        float: none !important;
        margin-right: 0;
        justify-content: flex-start;
    }
    #header .container .container-inner .reg_sp {
        float: none;
        margin: 0;
        font-weight: bold;
        text-align: center;
        line-height: 1.2;
        display: block;
        border: 1px solid #5E6DF2;
        border-radius: 3px;
        background-color: #5E6DF2;
        color: #fff;
    }
    #header .container .container-inner .reg_sp_border {
        font-size: 12px;
        border: none;
        border-radius: 0;
        background: none;
        color: #fff;
        padding: 5px;
        display: block;
    }
    #header .lang ul {
        text-align: center;
    }
    #header .lang li {
        font-size: 13px;
        padding: 0;
    }
    #header .container {
        max-width: 768px;
        min-width: 100%;
        padding: 0;
        display: block;
        height: 60px;
    }
}

#header-search input, #header-search select {
    float: left;
    height: 70px;
}
#header-search .submit {
    width: 80px;
    border: none;
    border-radius: 3px;
    background: #333 url(/images/icn_search.png) no-repeat center;
    overflow: hidden;
    text-indent: 200%;
    white-space: nowrap;
}
#header #header-search input, #header #header-search select {
    height: 40px;
}
#header #header-search .submit {
    width: 40px;
    border-radius: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    background: #ececec url(/images/icn_header-search.png) no-repeat 40%;
    background-size: 15px auto;
    border: 1px solid #757575;
    border-left: none;
    width: 18%;
}
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.navbar-default .navbar-toggle {
    border-color: #ddd;
    margin: 5px;
    padding: 0;
    border: 0;
}
#header .reg_sp_border {
    border: 1px solid #5E6DF2;
    border-radius: 3px;
    background-color: #5E6DF2;
    padding: 4px;
    color: #fff;
    font-size: 14px;
}
#header .reg_sp {
    float: right;
    margin: 16px 5px 0 0;
    font-weight: bold;
}
/* Scoped to desktop: unconditional, this also cancelled the
   `@media (max-width: 767px) { .vsbl_sp { display: block } }` rule above,
   which left the phone hero as an empty white block under the navbar. */
@media (min-width: 768px) {
    .vsbl_sp {
        display: none;
    }
}
#header-search .wrd {
    width: 90%;
    margin-right: 10px;
    padding: 10px 0 10px 10px;
    background: #fff;
    border: none;
    outline: none;
    border: 1px solid #e1e1e1;
    -webkit-appearance: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#header #header-search .wrd {
    margin-right: 0;
    border: 1px solid #757575 !important;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-right: none !important;
    font-size: 12px;
    width: 92%;
}
#header-search form {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}
#header #header-search form {
    justify-content: flex-start;
    width: 100%;
}
#header-search {
    padding: 40px;
    background-color: #f9f9f9;
}
#header #header-search {
    padding: 0 15px 0 35px;
    background: none;
    width: 100%;
    flex: 1 1 0px;
}
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}
#header .container .container-inner {
    display: flex;
    width: 100%;
    align-items: center;
}
#header .container .container-inner .navbar-header {
    width: 117px;
    height: 50px;
    float: none;
}
.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-default .navbar-brand {
    color: #777;
    width: 117px;
    height: 50px;
    background-image: url(/images/logo_pc.png);
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -9999999px;
    padding: 5px 0;
    margin: 0;
}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
    margin-left: 0;
}
.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}
.navbar-default {
    border-bottom: solid 1px #e7e7e7;
    background-color: #fff;
}
@media (max-width: 979px) {
    #header .navbar-default .nav li a {
        margin: 0px 0 0 5px;
    }
    #header .navbar-default .navbar-right {
        margin-right: 15px;
    }
}
.navbar-right .lang_wrap {
    margin: 0px !important; 
}
.navbar-right a {
    padding: 0px 5px !important;
    line-height: 32px;
    height: 32px;
    display: block;
    margin: 0px 0 0 5px !important;
}
#header .lang ul {
    list-style: none;
    padding: 0;
    color: #000;
}
.in {
    display: block !important;
    visibility: visible;
}

/* Font sizes */
.fs-10 {
    font-size: 1.125rem !important;
}
.fs-20 {
    font-size: 2.25rem !important;
}

/* Footer styles */
@media screen and (max-width: 1024px) {
    footer ul {
        margin: 0 10px;
    }
    footer ul.quicklinks, footer ul.quicklinks_cn {
        width: 100%;
        margin-bottom: 5px;
    }
    footer .footer_cnt {
        flex-wrap: wrap;
        justify-content: space-around;
        width: 100%;
        max-width: 760px;
    }
    footer ul li {
        margin: 0 10px;
    }
}
footer ul {
    display: flex;
    justify-content: center;
    margin: 0 10px;
    padding: 0;
    list-style: none;
    line-height: 30px;
}
footer ul.quicklinks {
    width: 40%;
}
footer .footer_cnt {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    max-width: 900px;
    margin: 0 auto;
    color: #333;
    font-size: 11px;
}
footer {
    padding: 25px 0;
    text-align: center;
    border-top: 1px solid #fff;
    background-color: #fff;
}
footer ul li {
    margin: 0 10px;
    line-height: 1.2;
}
footer a, footer a:visited {
    color: #333;
    text-decoration: none;
}
footer ul.sns {
    width: 20%;
    font-size: 18px;
}
ul.sns li a {
    display: block;
    margin: 2px 5px;
    color: #333;
    font-size: 18px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

/* ---------------------------------------------------------------------------
   The legacy layout reserved 61px at the top of #present for the original
   site's fixed navbar. This app renders its own header in normal document
   flow, so that reservation is just dead white space under the navbar.
   (The <=767px rules already zero it, which is why it only showed on desktop.)
--------------------------------------------------------------------------- */
#present {
  padding-top: 0;
}

/* ---------------------------------------------------------------------------
   Restore the original page font.

   `style.css` sets the marketplace's own stack on `body`, but `globals.css`
   sets `body { font-family: 'Open Sans' }` for the rest of the app and is
   emitted after these sheets, so it won this tie on source order alone and the
   whole landing page rendered in the wrong face. Measuring the two pages side
   by side, that single rule was responsible for 94 of the 154 mismatches -
   including every text-width difference, since two faces set the same string
   to different widths.

   `html body` rather than `body` so the win comes from specificity and does
   not depend on which sheet Next happens to emit last. Form controls do not
   inherit font-family from an ancestor by default, hence the second rule.

   Only this route group loads this file, so the app's own pages keep Open Sans.
--------------------------------------------------------------------------- */
html body {
  font-family: Meiryo, Helvetica, Arial, "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
}

html body :is(input, button, select, textarea) {
  font-family: inherit;
}

/* ---------------------------------------------------------------------------
   The search field is 14px on the original at every width. `globals.css` lifts
   every control to 16px below 1024px, because iOS Safari zooms the page when a
   field smaller than that is focused - so this exception buys an exact type
   match on the landing page at the cost of that zoom on the search box.

   Scoped to these two controls so the rest of the app keeps the protection.
   Needs !important and the id to outrank the global rule, which has both.
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  #search .wrd,
  #search .submit {
    font-size: 14px !important;
  }
}

/* ---------------------------------------------------------------------------
   Landing canvas

   The original storefront was capped at 1170px, which leaves large unused
   gutters on current desktop displays and constrains the catalogue grids even
   though their responsive tracks already scale safely. Keep the mobile-first
   `width: 100%` behaviour from the legacy rules, but allow the landing canvas
   to use a modern desktop measure. The header remains independently sized.
--------------------------------------------------------------------------- */
#present,
#main {
  max-width: 1440px;
}