@charset 'UTF-8';
.fancybox-bg
{
    display: none;
}

#fancybox-wrap
{
    margin-left: 10px; 
    padding: 10px !important;
}

.fancybox-wrap
{
    display: none;
}

.fancybox-box
{
    max-width: 400px; 
    padding: 10px;
}
.fancybox-box p
{
    font-size: 14px; 

    margin-bottom: 5px;

    color: inherit;
}
.fancybox-box p:first-of-type
{
    color: #ac4a37;
}
.fancybox-box img
{
    float: left;

    margin-right: 10px;
}
.fancybox-box .clear
{
    clear: both;
}

#fancybox-outer
{
    border-radius: 10px !important; 
    background: #fff !important;
}

#fancybox-content
{
    margin-right: auto;
    margin-left: auto; 

    border: none !important;
    background: #fff !important;
}

.kaitaku
{
    padding-top: 30px;
}
@media screen and (max-width: 768px)
{
    .kaitaku
    {
        padding-top: 20px;
    }
}
.kaitaku p
{
    font-size: 14px;

    color: #fff;
}
@media (max-width: 768px)
{
    .kaitaku p
    {
        font-size: 12px;
    }
}
.kaitaku a
{
    display: inline-block;
}
.kaitaku a:hover
{
    opacity: .8;
}
.kaitaku .font-mincho
{
    font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ';
}
.kaitaku #content-wrap
{
    max-width: 950px;
    margin: 0 auto;
}
.kaitaku #content-wrap #content-innerframe
{
    padding-bottom: 30px;

    background: #000;
}
@media (max-width: 768px)
{
    .kaitaku #content-wrap #content-innerframe img
    {
        width: 100% !important;
    }
}
.kaitaku-container
{
    padding-right: 75px; 
    padding-left: 75px;
}
@media (max-width: 768px)
{
    .kaitaku-container
    {
        padding-right: 15px; 
        padding-left: 15px;
    }
}
.kaitaku-mainVisual
{
    margin-bottom: 20px;
}
.kaitaku-mainVisual img
{
    min-width: 100%; 
    max-width: 100%;
}
.kaitaku-mainVisual h1
{
    margin-top: 0;
    margin-bottom: 0;
}
.kaitaku-mainVisual-bottom
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;
}
.kaitaku-mainVisual-bottom figure
{
    margin: 0;
}
.kaitaku-mainVisual-bottom figure:first-child
{
    width: 63%;
}
.kaitaku-mainVisual-bottom figure:last-child
{
    width: 36.2%;
}
.kaitaku-lead
{
    line-height: 1.8;

    margin-bottom: 30px; 

    text-align: center;
}
@media (max-width: 768px)
{
    .kaitaku-lead
    {
        text-align: left;
    }
    .kaitaku-lead br
    {
        display: none;
    }
}
.kaitaku-intro
{
    margin-bottom: 40px;
}
.kaitaku-intro-title
{
    margin-bottom: 20px; 

    text-align: center;
}
.kaitaku-intro-title img
{
    max-width: 100%;
}
.kaitaku-intro h2
{
    font-family: '游明朝', YuMincho, 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN', 'HG明朝E', 'メイリオ';
    font-size: 18px;

    margin-top: 10px;
    margin-bottom: 10px;

    letter-spacing: 5px; 

    color: #fff;
}
@media (max-width: 768px)
{
    .kaitaku-intro h2
    {
        font-size: 14px;
    }
}
.kaitaku-intro-inner1
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;
}
@media (max-width: 768px)
{
    .kaitaku-intro-inner1
    {
        display: block;
    }
}
.kaitaku-intro-inner1 ul
{
    font-size: 14px;

    padding-left: 0;
    padding-left: 1em; 

    list-style-type: none;

    color: #fff;
}
.kaitaku-intro-inner1 ul li
{
    position: relative;
}
.kaitaku-intro-inner1 ul li:before
{
    position: absolute;
    top: 0; 
    left: -1em;

    content: '■';
}
.kaitaku-intro-inner1 div img
{
    max-width: 100%;
}
.kaitaku-intro-inner1 div:first-child
{
    width: 41%;
}
@media (max-width: 768px)
{
    .kaitaku-intro-inner1 div:first-child
    {
        width: 100%;
    }
}
.kaitaku-intro-inner1 div:last-child
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    width: 56%;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;
}
@media (max-width: 768px)
{
    .kaitaku-intro-inner1 div:last-child
    {
        width: 100%;
    }
}
.kaitaku-intro-inner1 div:last-child figure
{
    width: 49%; 
    margin: 0;
}
.kaitaku-intro-inner1 div:last-child figure img
{
    width: 100%;
}
.kaitaku-intro-inner2
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;
}
@media (max-width: 768px)
{
    .kaitaku-intro-inner2
    {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column;
                flex-flow: column;
    }
}
.kaitaku-intro-inner2 ul
{
    font-size: 14px;

    padding-left: 0;
    padding-left: 1em; 

    list-style-type: none;

    color: #fff;
}
.kaitaku-intro-inner2 ul li
{
    position: relative;
}
.kaitaku-intro-inner2 ul li:before
{
    position: absolute;
    top: 0; 
    left: -1em;

    content: '■';
}
.kaitaku-intro-inner2 figure
{
    width: 47%; 
    margin: 0;
}
@media (max-width: 768px)
{
    .kaitaku-intro-inner2 figure
    {
        width: 100%;
        margin-bottom: 20px;
    }
}
.kaitaku-intro-inner2 figure img
{
    max-width: 100%;
}
.kaitaku-intro-inner2 div
{
    width: 50%;
}
@media (max-width: 768px)
{
    .kaitaku-intro-inner2 div
    {
        width: 100%;
    }
}
.kaitaku-info
{
    margin-bottom: 30px; 
    padding-top: 40px;
    padding-bottom: 40px;

    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
}
@media (max-width: 768px)
{
    .kaitaku-info
    {
        padding-top: 20px;
    }
}
.kaitaku-info-desc
{
    float: left;

    width: 52%;
}
@media (max-width: 768px)
{
    .kaitaku-info-desc
    {
        float: none;

        width: 100%;
    }
}
.kaitaku-info-desc h3
{
    font-size: 21px;

    margin-top: 0;
    margin-bottom: 20px; 

    letter-spacing: .5em;

    color: #fff;
}
.kaitaku-info-desc p:first-of-type
{
    margin-bottom: 20px;
}
@media (max-width: 768px)
{
    .kaitaku-info-desc p:last-of-type
    {
        margin-bottom: 20px;
    }
}
.kaitaku-info-map
{
    position: relative;

    overflow: hidden; 

    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.kaitaku-info-map iframe,
.kaitaku-info-map object,
.kaitaku-info-map embed
{
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}
.kaitaku-info-mapWrap
{
    float: right; 

    width: 45%;
}
@media (max-width: 768px)
{
    .kaitaku-info-mapWrap
    {
        float: none;

        width: 100%;
    }
}
.kaitaku-info .clear
{
    clear: both;
}
.kaitaku-beer h4
{
    font-size: 28px;

    margin-top: 0;
    margin-bottom: 10px; 

    text-align: center;
    letter-spacing: .1em;

    color: #fff;
}
@media (max-width: 768px)
{
    .kaitaku-beer h4
    {
        font-size: 20px;
    }
}
.kaitaku-beer-list1
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    max-width: 100%; 
    margin-top: 0;
    margin-bottom: 40px;
    padding-left: 0;

    list-style-type: none;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
@media (max-width: 768px)
{
    .kaitaku-beer-list1
    {
        margin-bottom: 20px;
    }
}
@media (max-width: 500px)
{
    .kaitaku-beer-list1
    {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }
}
.kaitaku-beer-list1 li
{
    width: 18.5%;
}
@media (max-width: 500px)
{
    .kaitaku-beer-list1 li
    {
        width: 31%;
        margin-right: 1.1%;
        margin-bottom: 2%;
        margin-left: 1.1%;
    }
}
.kaitaku-beer-list1 li img
{
    max-width: 100%;
}
.kaitaku-beer-shop
{
    margin-bottom: 40px;
}
@media (max-width: 768px)
{
    .kaitaku-beer-shop
    {
        margin-bottom: 20px;
    }
}
.kaitaku-beer-shop img
{
    max-width: 100%;
}
.kaitaku-beer-list2
{
    margin-top: 0; 
    margin-bottom: 0;
    padding-left: 0;

    list-style-type: none;
}
.kaitaku-beer-list2 li
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    padding-top: 20px;
    padding-bottom: 20px; 

    border-bottom: solid 1px #fff;

    -webkit-box-pack: justify;

        -ms-flex-pack: justify;

            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.kaitaku-beer-list2 li:last-child
{
    border-bottom: none;
}
@media (max-width: 768px)
{
    .kaitaku-beer-list2 li
    {
        max-width: 468px;
        margin-right: auto;
        margin-left: auto; 

        -webkit-box-orient: vertical; 

        -webkit-box-direction: normal; 

            -ms-flex-flow: column; 

                flex-flow: column;
    }
}
.kaitaku-beer-list2 div
{
    width: 40%;
}
@media (max-width: 768px)
{
    .kaitaku-beer-list2 div
    {
        width: 100%;
        margin-bottom: 10px;
    }
}
.kaitaku-beer-list2 div p
{
    font-size: 17px;
}
@media (max-width: 768px)
{
    .kaitaku-beer-list2 div p
    {
        font-size: 14px;
    }
}
.kaitaku-beer-list2 div a
{
    float: right;
}
.kaitaku-beer-list2 div img
{
    border-radius: 10px;
    -webkit-box-shadow: 0 0 3px 3px #555;
            box-shadow: 0 0 3px 3px #555;
}
.kaitaku-beer-list2 figure
{
    position: relative; 

    width: 57%;
    margin: 0;
}
@media (max-width: 768px)
{
    .kaitaku-beer-list2 figure
    {
        width: 100%;
    }
}
.kaitaku-beer-list2 figure img
{
    max-width: 100%;
}

@media screen and (max-width: 768px)
{
    #sapporo-topicpath-area
    {
        display: none;
    }
    #structure
    {
        font-size: 122%; 

        min-width: 320px;
        max-width: 768px;
        min-height: 800px;
        margin: 0;
        padding-bottom: 10px;
    }
    #structure #content-wrap
    {
        max-width: 640px;
        padding-top: 0;
    }
    #structure #content-wrap #content-innerframe
    {
        font-size: 1rem; 

        -webkit-box-sizing: border-box; 

                box-sizing: border-box;
        width: 100%;
        max-width: 640px;
        margin-right: 0;
        margin-left: 0;
    }
}
.kaitaku span
{
    display: inline-block;
}
.kaitaku span:hover
{
    opacity: .8;
    cursor: pointer;
}