@charset "utf-8";
.ggmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media all and (max-width: 899px) {
    /* COMMON */
    
    .pc-only {
        display: none;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    table {
        width: 100%;
    }
    table th {
        padding: 5px 0;
        text-align: center;
    }
    #hpb-container {
        width: 100%;
        margin-top: 0
    }
    /* HEADER */
    
    #hpb-header {
        width: 100%
    }
    #hpb-headerMain h1 {
        text-align: center;
    }
    #hpb-headerLogo {
        width: 100%;
    }
    #hpb-headerLogo a {
        background-size: 300px;
        background-position: top center;
        margin: 0 10px;
        height: 30px;
    }
    #hpb-headerExtra1 {
        width: 100%;
        float: none;
        padding: 0;
    }
    #hpb-headerExtra1 p.tel,
    #hpb-headerExtra1 p.address {
        text-align: center;
        padding: 0;
        font-size: 12px;
    }
    #hpb-headerExtra1 p.tel span {
        display: block;
    }
    .hpb-layoutset-01 #hpb-title {
        padding-bottom: 80px;
        background-image: url(topTitleBg_10Aa_01.png);
        background-position: bottom center;
        background-size: 100%;
        background-repeat: no-repeat;
        margin: 0 auto;
        max-width: 360px;
        height: 100px;
    }
    .hpb-layoutset-01 #hpb-title h2 {
        background-size: 100%;
        background-repeat: no-repeat;
        height: 100px;
    }
    /* NAVIGATION */
    
    #hpb-nav {
        width: 100%;
    }
    .naver-handle {
        color: #1C2F90;
        background-color: #DFDCF3;
        border-color: #93ABEF;
        border-left: none;
        border-right: none;
    }
    .naver-handle:after {
        background: #1C2F90;
        box-shadow: 0 5px 0 #1C2F90, 0 -5px 0 #1C2F90;
    }
    .naver.open .naver-handle:after {
        color: #1C2F90;
    }
    .naver.enabled .naver-container {
        border: none;
    }
    #hpb-nav ul {
        width: 100%;
    }
    .hpb-layoutset-01 #hpb-nav,
    .hpb-layoutset-02 #hpb-nav {
        top: 100px;
        height: auto;
        text-align: left;
    }
    #hpb-nav li {
        width: 100%;
        float: none;
        height: auto;
        background-image: none;
    }
    #hpb-nav li a {
        padding-top: 0;
    }
    #hpb-nav a,
    #hpb-nav a:link,
    #hpb-nav a:visited {
        color: #1C2F90;
        text-decoration: none;
        padding: 0 15px;
        border-bottom: 1px solid #DFDCF3;
    }
    #hpb-nav a:hover {
        background-color: #F5F3FD;
    }
    #hpb-nav li span.ja,
    .hpb-layoutset-02 #hpb-nav li span.ja {
        display: inline-block;
        line-height: 48px;
    }
    #hpb-nav li span.en,
    .hpb-layoutset-02 #hpb-nav li span.en {
        display: inline-block;
        float: right;
        line-height: 48px;
    }
    .hpb-layoutset-02 #hpb-nav {
        top: 0;
        height: auto;
    }
    /* MAIN */
    
    .hpb-layoutset-01 #hpb-main,
    .hpb-layoutset-02 #hpb-wrapper {
        width: 100%;
        float: none;
        border: none;
    }
    .hpb-layoutset-01 #toppage,
    .hpb-layoutset-02 #hpb-main {
        margin: 0;
    }
    #toppage-news {
        margin-top: 50px;
    }
    #hpb-main dl {
        margin: 0;
    }
    #hpb-main dt {
        float: none;
        display: block;
        padding: 10px 0 0;
    }
    #hpb-main dd {
        display: block;
        padding: 5px 0 10px 0;
    }
    .hpb-layoutset-02 h2 {
        width: 100%;
        height: 48px;
        line-height: 48px;
        margin: 0;
        background-position: top left;
        background-image: none;
        background-color: #93ABEF;
        border-radius: 6px;
    }
    .hpb-layoutset-02 h2 span.ja {
        font-size: 16px;
        padding: 0 0 0 15px;
    }
    .hpb-layoutset-02 h2 span.en {
        display: inline-block;
        font-size: 12px;
        float: right;
        padding-right: 1em;
    }
    #hpb-main img.right {
        display: block;
        margin: 10px auto 10px;
        float: none;
    }
    /* ASIDE */
    
    #hpb-aside {
        width: 100%;
        float: none;
        text-align: center;
    }
    #shopinfo {
        padding: 30px 0;
    }
    #shopinfo h3,
    #shopinfo h4,
    #shopinfo p {
        text-align: center;
    }
    #banner {
        width: 100%;
    }
    /* FOOTER */
    
    #hpb-footerMain {
        width: 100%;
    }
}