@charset "utf-8";

/* shop, publicity, security, company
------------------------------------ */
#page-header {
    margin: 0 auto 40px;
    background-color: #000000;
}
#page-header .ttl.container {
    height: 40px;
    padding: 20px 0;
}
#page-sub-header {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 40px;
}
#page-sub-header .btn-back {
    float: right;
    padding-top: 8px;
}
#content-body {
    width: 960px;
    margin: 0 auto 40px;
    overflow: hidden;
}
article p,
article ul,
article ol {
    font-size: 14px;
    line-height: 2;
    margin-bottom: 2em;
}
strong {
    color: #414141;
}
.box {
    margin-bottom: 20px;
    padding: 40px;
    background-color: #e8f0ea;
}
.box > :last-child {
    margin-bottom: 0;
}
.rollover:hover img {
    opacity: .7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -khtml-opacity: .7;
    /zoom: 1;
}

/* shop-index
------------------------------------ */

#shop .shop-search-header {
    margin-bottom: 20px;
}
#shop .half-column {
    float: left;
    width: 470px;
}
#shop .half-column:nth-of-type(2n) {
    float: right;
}
#shop .half-column form {
    margin: 0;
    padding: 0;
}
#shop .half-column p {
    margin: 10px 0 0;
}
#shop .shop-prefecture-lists {
    overflow: hidden;
}
#shop .shop-prefecture-lists ul {
    float: left;
    width: 216px;
    margin-bottom: 20px;
}
#shop .shop-prefecture-lists ul li {
    padding-left: 20px;
}
#shop .shop-prefecture-lists ul li a {
    padding-left: 20px;
    background: url(../../img/shop/arw_list.gif) no-repeat left center;
}
#shop .shop-prefecture-lists ul li.list-title {
    color: #35573f;
    font-weight: bold;
}
#shop input[type="text"].search-text {
    line-height: 1;
    margin: 0;
    padding: 4px;
    width: 288px;
    height: 31px;
    background-color: #ffffff;
    border: solid 1px #c9d9ce;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    font: -webkit-control;
}
#shop input[type="submit"].search-submit {
    line-height: 1;
    margin: 0 0 0 10px;
    padding: 0;
    width: 85px;
    height: 31px;
    border: none;
    outline: none;
    background: transparent url(../../img/shop/btn_search.gif) no-repeat left top;
    text-indent: -9999px;
    cursor: pointer;
    -webkit-appearance: none;
}
#shop input[type="submit"].search-submit:hover {
    opacity: .7;
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    -khtml-opacity: .7;
    /zoom: 1;
}

/* shop-list
------------------------------------ */

#shop #shop-list-container {
    overflow: hidden;
}
#shop #shop-list-container #side {
    float: left;
    width: 220px;
    margin-bottom: 50px;
    padding: 20px;
    border: solid 1px #e8f0ea;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#shop #shop-list-container #side :last-child {
    margin-bottom: 0;
}
#shop #shop-list {
    float: none;
    display: inline;
    width: 700px;
    margin-bottom: 30px;
    line-height: 1.6;
}
#shop #shop-list > li {
    background-color: #e8f0ea;
}
#shop #shop-list > li:nth-of-type(2n) {
    background-color: #fafcfb;
}
#shop #shop-list > li p {
    margin-bottom: 8px;
}
#shop #shop-list > li :last-child {
    margin-bottom: 0;
}
#shop #shop-list > li > a {
    display: block;
    padding: 20px 125px 16px 25px;
    background: transparent url(../../img/shop/btn_detail.png) no-repeat right center;
}
#shop #shop-list > li > a:hover {
    text-decoration: none;
    background: transparent url(../../img/shop/btn_detail_over.png) no-repeat right center;
}
#shop #shop-list > li strong {
    color: #35573f;
}
#shop #shop-list > li > a:hover strong {
    border-bottom: solid 1px #35573f;
}
#shop .shop-ic-list {
    overflow: hidden;
}
#shop .shop-ic-list li {
    position: relative;
    float: left;
    margin-right: 30px;
}
#shop .shop-ic-list li img {
    margin: -4px 10px 0 0;
    vertical-align: middle;
}
#shop #side .shop-ic-list li {
    float: none;
    margin-right: 0;
}
#shop .page-nav {
    margin-bottom: 20px;
}
#shop .page-nav ul {
    list-style: none;
    font-size: 12px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#shop .page-nav ul li {
    float: left;
    margin-right: 4px;
    line-height: 1;
}
#shop .page-nav ul li a,
#shop .page-nav ul li span {
    display: inline-block;
    padding: 6px 8px 5px;
    background-color: #e8f0ea;
}
#shop .page-nav a:link, #shop .page-nav a:visited {
    background-color: #35573f;
    color: #ffffff;
    text-decoration: none;
}
#shop .page-nav a:hover, #shop .page-nav a:active {
    background-color: #9aab9f;
    color: #ffffff;
    text-decoration: none;
}

/* shop-gmap
------------------------------------ */

#shop #map {
    width: 100%;
    height: 400px;
    margin-bottom: 30px;
    background-color: #e2e2e2;
}

/* shop-detail
------------------------------------ */

#shop #shop-detail-content .shop-ic-list {
    margin-bottom: 50px;
    padding-top: 30px;
    border-top: 1px solid #bbc7be;
}
#shop input[type="text"].copy-url {
    color: #666666;
    line-height: 1;
    margin: 10px 0 0;
    padding: 4px;
    width: 100%;
    height: 31px;
    background-color: #ffffff;
    border: solid 1px #c9d9ce;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    font: -webkit-control;
}

/* publicity
------------------------------------ */

#publicity #publicity-container {
    overflow: hidden;
}
#publicity #publicity-content {
    float: left;
    width: 700px;
    margin-bottom: 50px;
}
#publicity #publicity-content > :last-child {
    margin-bottom: 0;
}
#publicity #publicity-container #side {
    float: right;
    width: 220px;
    margin-bottom: 50px;
}
#publicity #publicity-container #side :last-child {
    margin-bottom: 0;
}
#publicity #publicity-container #side h2 {
    margin-bottom: 20px;
}
#publicity #publicity-container #side nav {
    padding-left: 8px;
}
#publicity #publicity-container #side a {
    padding-left: 20px;
    background: url(../../img/publicity/arw_list.gif) no-repeat left center;
}
#publicity .post {
    border: 1px solid #bbc7be;
    border-radius: 2px;
    background: #ffffff;
    margin: 0 0 40px;
    padding: 0;
}
#publicity .post-headers {
    padding : 20px 25px 15px;
    background: #e8f0ea;
    border-bottom: 1px solid #bbc7be;
    line-height: 1.6;
}
#publicity .post-headers .post-date {
    color: #35573f;
    margin-bottom: 0;
}
#publicity .post-headers .post-date img {
    vertical-align: baseline;
    margin-left: 15px;
}
#publicity .post-headers .post-header {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 0;
}
#publicity .post-body {
    display: table;
    padding: 25px;
}
#publicity .post-photo-container {
    display: table-cell;
    width: auto;
    padding-right: 20px;
}
#publicity .post-photo-box {
    width: 125px;
    margin-bottom: 10px;
}
#publicity .post-article {
    display: table-cell;
    width: auto;
}
#publicity .post-article > :last-child {
    margin-bottom: 0;
}
#publicity #publicity-container #side form{
    display: none;
}

/* company
------------------------------------ */

#company .company-list {
    position: relative;
    margin-bottom: 20px;
    color: #414141;
    font-size: 14px;
    line-height: 2;
}
#company .company-list dt {
    position: absolute;
    width: 16em;
    padding: 15px 0 15px 40px;
    color: #35573f;
    font-weight: bold;
}
#company .company-list dd {
    background-color: #e8f0ea;
    padding: 15px 40px 15px 17em;
}
#company .company-list dd:nth-of-type(2n) {
    background-color: transparent;
}

/* security
------------------------------------ */

#security .box ol > li {
    margin-bottom: 2em;
}
#security .box ol > :last-child {
    margin-bottom: 0;
}



/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {

        /* shop, publicity, security, company
        ------------------------------------ */
        #page-header .ttl.container {
            width: 100%;
            height: auto;
            padding: 20px 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #page-sub-header {
            font-size: 24px;
            font-weight: normal;
            margin-bottom: 40px;
        }
        #content-body {
            width: 100%;
            margin: 0 auto 40px;
            padding: 0 20px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            overflow: hidden;
        }

        /* shop-index
        ------------------------------------ */
        #shop .half-column {
            float: none;
            width: 100%;
        }
        #shop .half-column:nth-of-type(2n) {
            float: none;
        }
        #shop .shop-prefecture-lists ul {
            float: left;
            width: 25%;
        }
        
        /* shop-list
        ------------------------------------ */
        #shop #shop-list-container #side {
            float: right;
            width: 28%;
        }
/*
        #shop #shop-list {
            float: left;
            width: 70%;
        }*/
        
        /* publicity
        ------------------------------------ */
        
        #publicity #publicity-container {
            overflow: hidden;
        }
        #publicity #publicity-content {
            float: left;
            width: 70%;
            margin-bottom: 50px;
        }
        #publicity #publicity-container #side {
            float: right;
            width: 28%;
            margin-bottom: 50px;
        }

    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {

        /* shop, publicity, security, company
        ------------------------------------ */
        #page-header {
            margin: 0 -10px 20px;
        }
        #page-header .ttl.container {
            height: auto;
            padding: 20px 20px;
        }
        #page-sub-header {
            font-size: 20px;
            font-weight: normal;
            margin-bottom: 20px;
        }
        #page-sub-header .btn-back {
            float: right;
            padding-top: 4px;
        }
        #content-body {
            width: 100%;
            margin: 0 auto 40px;
            overflow: hidden;
        }
        .box {
            padding: 20px;
            margin-bottom: 40px;
        }
        
        /* shop-index
        ------------------------------------ */
        #shop article{
            padding: 0 10px;
        }
        #shop .shop-search-header{
            padding-top: 10px;
            margin-bottom: 10px;
        }
        #shop .shop-search-header img{
            zoom: 0.8;
        }
        #shop .half-column {
            float: none;
            width: 100%;
        }
        #shop .half-column:nth-of-type(2n) {
            float: none;
        }
        #shop .shop-prefecture-lists .row {
            float: left;
            width: 50%;
        }
        #shop .shop-prefecture-lists ul {
            float: none;
            width: 100%;
            margin-bottom: 20px;
        }
        #shop input[type="text"].search-text {
            width: 160px;
        }
        
        /* shop-list
        ------------------------------------ */
        #shop #shop-list-container #side {
            float: none;
            width: 100%;
        }
        #shop #shop-list {
            float: none;
            width: 100%;
        }
        #shop #shop-list > li{
            padding-bottom: 20px;
        }
        #shop #shop-list > li > a {
            display: block;
            padding: 20px 20px 30px 25px;
            background: transparent url(../../img/shop/btn_detail.png) no-repeat center bottom;
        }
        #shop #shop-list > li > a:hover {
            text-decoration: none;
            background: transparent url(../../img/shop/btn_detail_over.png) no-repeat center bottom;
        }
        #shop .page-nav {
            margin-bottom: 20px;
        }
        #shop .page-nav ul {
            list-style: none;
            font-size: 12px;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #shop .page-nav ul li {
            margin-bottom: 4px;
        }
        #shop .page-nav ul li a,
        #shop .page-nav ul li span {
            padding: 6px 6px 5px;
            background-color: #e8f0ea;
        }
        
        /* shop-gmap
        ------------------------------------ */
        #shop #map {
            height: 300px;
        }
        
        /* shop-detail
        ------------------------------------ */
        
        /* publicity
        ------------------------------------ */
        #publicity article {
            padding: 0 10px;
        }
        #publicity #publicity-content {
            float: none;
            width: 100%;
            margin-bottom: 30px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #publicity #publicity-container #side {
            float: none;
            width: 100%;
            padding-left: 10px;
            margin-bottom: 15px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        #publicity #publicity-container #side h2{
            margin-bottom: 0;
        }
        #publicity #publicity-container #side ul{
        	overflow: hidden;
        }
        #publicity #publicity-container #side li{
        	float: left;
        	width: 50%;
        	font-size: 12px;
        }
        /*
        #publicity #publicity-container #side form{
            display: block;
        }
        #publicity #publicity-container #side select{
            width: 90%;
            font-size: 14px;
        }
        /*
        #publicity #publicity-container #side :last-child {
            margin-bottom: 0;
        }
        
        /* company
        ------------------------------------ */
        #company article {
            padding: 0 10px;
        }
        #company .company-list dt {
            width: 8em;
            padding: 15px 0 15px 20px;
        }
        #company .company-list dd {
            padding: 15px 20px 15px 9em;
        }
        
        /* security
        ------------------------------------ */
        #security article {
            padding: 0 10px;
        }

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
    }