@charset "UTF-8";

/* ========================================
	SHOP
======================================== */

/* contents */

/* #contents_shop {
	width:1000px;
	min-height:1000px;
	margin:0 auto;
	padding:0 0 50px 0;
} */
#main {
    float: left;
    width: 773px;
}

#side {
    float: right;
    width: 200px;
}

#contents_shop h2 {
    padding: 20px 0;
    margin: 0 0 10px;

    /* border-top:1px solid #ccc;
	border-bottom:1px solid #ccc; */
    font-size: 18px;
}

#contents_shop h2 span {
    padding: 0 0 0 20px;
    border-left: 3px solid #004098;
}

/* nav */
#contents_shop .shopnav {
    margin: 0 0 10px;
}

#contents_shop .shopnav li {
    float: left;
    width: 130px;
    padding: 10px 0;
    margin: 0 5px 10px;
    font-size: 12px;
    font-weight: bold;

    /* border:2px solid #3f9fe9;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 29%, #bfdfff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(29%,#ffffff), color-stop(100%,#bfdfff));
	background: -webkit-linear-gradient(top,  #ffffff 29%,#bfdfff 100%);
	background: -o-linear-gradient(top,  #ffffff 29%,#bfdfff 100%);
	background: -ms-linear-gradient(top,  #ffffff 29%,#bfdfff 100%);
	background: linear-gradient(to bottom,  #ffffff 29%,#bfdfff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#bfdfff',GradientType=0 );
	color:#3f9fe9; */
    color: #004098;
    text-align: center;
    letter-spacing: -1px;
    cursor: pointer;
    border: 1px solid #004098;
    border-radius: 4px;
}

#contents_shop .shopnav li.current {
    color: #fff;
    background: #004098;
}

#contents_shop .shopnav li:hover {
    color: #fff;

    /* filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8; */
    background: #004098;
}

#contents_shop .titleArea h3 {
    padding: 0 0 0 10px;
    margin: 0 0 12px;
    clear: both;
    font-size: 18px;
    line-height: 25px;
    color: #3f9fe9;
    border-bottom: 2px solid #bfdfff;
}

#contents_shop .lst {
    display: none;
}

#contents_shop .lst table {
    width: 998px;
    margin: 0 0 10px;
    border: 1px solid #ccc;
}

#contents_shop .lst table th {
    padding: 5px;
    text-align: left;
    background: #eaeaea;
    border: 1px solid #ccc;
}

#contents_shop .lst table th.kind {
    color: #fff;
    text-align: center;
    background: #666;
}

#contents_shop .lst table td {
    padding: 10px;
    border: 1px solid #ccc;
}

#contents_shop .lst table td a {
    text-decoration: underline;
}

#contents_shop .lst table td:first-child {
    width: 25%;
}

/* detailLst */
.shopDetail table {
    width: 771px;
    margin: 0 0 20px;
    border: 1px solid #ccc;
}

.shopDetail table th {
    width: 90px;
    padding: 10px;
    text-align: left;
    background: #eaeaea;
    border: 1px solid #ccc;
}

.shopDetail table .shopinfo th,
.shopDetail table .shopcomment th {
    background: #fbc21e;
}

.shopDetail table td {
    padding: 10px;
    line-height: 1.5;
    text-align: left;
    border: 1px solid #ccc;
}

.shopDetail table span.addressGmap {
    display: none;
}

.shopDetail table .access span {
    display: block;
    padding: 0 0 0 3em;
    text-indent: -3em;
}

.shopDetail #img_s {
    float: left;

    /*	width:350px; */
    width: 768px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.shopDetail #map {
    /* width:771px;
	height:298px; */
    float: left;
    width: 417px;
    height: 700px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.shopDetail table {
    clear: both;
}

.shopDetail .topics h3 {
    padding: 10px 20px;

    /* border:5px solid #ccc; */
    font-size: 16px;
    border-bottom: 2px solid #004098;
}

.shopDetail .topics li {
    padding: 10px;
    border-bottom: 1px dotted #eaeaea;
}

.shopDetail .topics li:nth-child(even) {
    background: #eaeaea;
}

.shopDetail .topics p.img {
    float: left;

    /*	width:100px;      */
    width: 700px;

    /*	max-height:110px; */
    max-height: 310px;
    margin: 0 10px 0 0;
    overflow: hidden;
    border: 1px solid #fff;
}

.shopDetail .topics p.img img {
    width: 100%;
    height: auto;
}

.shopDetail .topics dl {
    float: left;
    width: 630px;
}

.shopDetail .topics dl dt.date {
    margin: 0 0 5px;
    font-size: 10px;
    color: #999;
}

.shopDetail .topics dl dd.title {
    margin: 0 0 5px;
    font-size: 14px;
    font-weight: bold;
}

.shopDetail .topics dl dd.summary {
    font-size: 12px;
    line-height: 1.3;
}

.shopDetail .qrImg {
    float: left;
}

/* postDetail */
#contents_shop .postDetail h2 {
    margin: 0 0 10px;
}

#contents_shop .postDetail .date {
    line-height: 22px;
    color: #9e9e9e;
}

#contents_shop .postDetail h3 {
    margin: 10px 0;
    font-size: 18px;
    font-weight: bold;
}

.postDetail .postContents {
    padding: 20px;
    margin: 10px 0 0;
    line-height: 1.5;
    border: 5px solid #eaeaea;
}

#contents_shop .back {
    padding: 0 0 0 15px;
    margin: 20px 0;
    background: url(../img/btn_linkarrow_blue.png) no-repeat left center;
}

/* ========================================
	post
======================================== */
#contents_shop .postDetail .midashi {
    padding: 0;
    margin: 0 0 15px;
    font-size: 140%;
    font-weight: bold;
}

#contents_shop .postDetail .mgn-b5 {
    margin: 0 0 5px;
}

#contents_shop .postDetail .mgn-b15 {
    margin: 0 0 15px;
}

#contents_shop .postDetail .mgn-b25 {
    margin: 0 0 25px;
}

#contents_shop .postDetail .fb {
    font-weight: bold;
}

#contents_shop .postDetail .fc_red {
    color: #f00;
}

#contents_shop .postDetail .fc_orange {
    color: #f60;
}

#contents_shop .postDetail .fc_blue {
    color: #00f;
}

#contents_shop .postDetail .fc_green {
    color: #390;
}

#contents_shop .postDetail .fs150 {
    font-size: 150%;
}

#contents_shop .postDetail .fs130 {
    font-size: 130%;
}

#contents_shop .postDetail .fs120 {
    font-size: 120%;
}

#contents_shop .postDetail img {
    border: none;
}

/* ========================================
	side
======================================== */
#side #shopsearchBox {
    padding: 0;
    margin: 0 0 20px;
    background: #fff;
    border: 2px solid #004098;
    border-radius: 4px;
}

#side #shopsearchBox h2 {
    padding: 7px 0;
    margin: 0;
    font-size: 14px;
    color: #004098;
    text-align: center;
}

#side #shopsearchBox p {
    padding: 0 0 10px;
    margin: 0 0 5px;
    font-size: 10px;
    color: #fdd000;
    text-align: center;
    background: #004098;
}

#side #shopsearchBox p.mapImg {
    padding: 10px 0 0;
    margin: 0;
}

#side #shopsearchBox ul {
    width: 188px;
    margin: 0 auto;
}

#side #shopsearchBox li {
    float: left;
    cursor: pointer;
}

#side #shopsearchBox li a {
    display: block;
    width: 88px;
    height: 21px;
    margin: 0 2px 5px;
    font-size: 11px;
    line-height: 21px;
    color: #004098;
    text-align: center;
    text-decoration: none;
    letter-spacing: -1px;
    border: 1px solid #004098;
    border-radius: 4px;
}

#side #shopsearchBox li.allShop a {
    width: 183px;
}

#side #shopsearchBox li a.on,
#side #shopsearchBox li a:hover {
    color: #fff;
    background: #004098;
    border: 1px solid #004098;
}

/* bnr */
#side .bnr_allShop:hover {
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    opacity: 0.8;
}

#side .bnr_allShop span {
    display: none;
}

#side .bnr_tw {
    float: right;
    margin: 10px 0 0;
    background: #50abf1;
    border-radius: 4px;
}

#side .bnr_tw a {
    display: block;
    width: 123px;
    padding: 15px 0 15px 67px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    background: url(../img/btn_tw.gif) no-repeat 15px center;
}

@media screen and (max-width: 800px) {
    #contents_shop {
        width: 96%;
        margin: 0 auto;
    }

    #contents_shop .titleArea {
        padding: 15px 2% 7px 0;
        margin: 0 0 8px;
        border: none;
        border-top: 2px solid #cfcfcf;
        border-bottom: 2px solid #cfcfcf;
        border-radius: 0;
    }

    #contents_shop .shopnav {
        margin: 0 0 30px;
    }

    #contents_shop .shopnav li {
        width: 30%;
        margin: 0 0 10px 2%;
    }

    #contents_shop .lst table {
        width: 96%;
        margin: 0 2%;
        line-height: 1.5;
    }

    /* lst */
    #contents_shop .lst table th {
        font-size: 12px;
    }

    #contents_shop .lst table td {
        font-size: 12px;
    }

    .shopDetail .topics p.img {
        float: left;
        width: 30%;
        margin: 0 2% 0 0;
    }

    .shopDetail .topics dl {
        float: left;
        width: 66%;
    }

    .shopDetail .topics dl dt.date {
        width: 100%;
    }

    /* detail */
    #contents_shop #main {
        width: 100%;
    }

    .shopDetail table {
        width: 100%;
        margin: 0 auto 20px;
    }

    .shopDetail #img {
        width: 100%;
        height: 150px;
        overflow: hidden;
        text-align: center;
    }

    .shopDetail #img img {
        margin: -35px 0 0;
    }

    .shopDetail #map {
        width: 100%;
        height: 150px;
    }

    .shopDetail .topics dl dt {
        width: 23%;
        margin: 0 2% 0 0;
    }

    /* side */
    #side #shopsearchBox h2 {
        width: 96%;
        margin: 0 auto 5px;
        color: #004098;
        border-bottom: 2px solid #3262a5;
    }

    #side #shopsearchBox p {
        display: none;
    }

    #side #shopsearchBox ul {
        width: 100%;
    }

    #side #shopsearchBox li {
        width: 46%;
        margin: 0 2%;
    }

    #side #shopsearchBox li a {
        width: 100%;
    }

    #side #shopsearchBox li.allShop {
        width: 96%;
    }

    #side #shopsearchBox li.allShop a {
        width: 100%;
    }

    /* bnr */
    #side {
        width: 100%;
    }

    #side .bnr_allShop {
        padding: 10px 0;

        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,525252+100 */
        margin: 10px 0 0; /* Old browsers */
        background: linear-gradient(
            top,
            rgb(0 0 0 / 100%) 0%,
            rgb(82 82 82 / 100%) 100%
        ); /* FF3.6+ */
        background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0%, rgb(0 0 0 / 100%)),
            color-stop(100%, rgb(82 82 82 / 100%))
        ); /* Chrome,Safari4+ */
        background: linear-gradient(
            top,
            rgb(0 0 0 / 100%) 0%,
            rgb(82 82 82 / 100%) 100%
        ); /* Chrome10+,Safari5.1+ */
        background: linear-gradient(
            top,
            rgb(0 0 0 / 100%) 0%,
            rgb(82 82 82 / 100%) 100%
        ); /* Opera 11.10+ */
        background: linear-gradient(
            top,
            rgb(0 0 0 / 100%) 0%,
            rgb(82 82 82 / 100%) 100%
        ); /* IE10+ */
        background: linear-gradient(
            to bottom,
            rgb(0 0 0 / 100%) 0%,
            rgb(82 82 82 / 100%) 100%
        ); /* W3C */
        filter: progid:dximagetransform.microsoft.gradient( startColorstr='#000000', endColorstr='#525252',GradientType=0 ); /* IE6-9 */
        border-radius: 4px;
    }

    #side .bnr_allShop a {
        text-decoration: none;
    }

    #side .bnr_allShop span {
        display: block;
        color: #fff;
        text-align: center;
    }

    #side .bnr_allShop img {
        display: none;
    }

    #side .bnr_tw {
        float: none;
        width: 100%;
        margin: 10px 0 0;
        background: url(../img/btn_tw.gif) no-repeat 15px center #50abf1;
        border-radius: 4px;
    }

    #side .bnr_tw a {
        width: 100%;
        padding: 10px 0;
        text-align: center;
    }
}