/*
Theme Name: うまいもんマップ
Theme URI: http://www.umaimon.net/
Author: Foodconnection
Author URI: http://www.umaimon.net/
Description: うまいもんマップのテーマ
*/


/* --------------------------------------------------------------------------------------
  トップページ
--------------------------------------------------------------------------------------- */

.flag {
    position: absolute;
    top: 10px;
    right: 10px;
}

.flag li {
    list-style: none;
}

.flag li {
    display: none;
}

.flag li.active {
    display: block
}

.lead {
    background: url(shared/img/lead_inner_bg.png) no-repeat center top, url(shared/img/lead_bg.gif) repeat left top;
    min-height: 566px;
    padding-top: 5%;
    padding-bottom: 30px;
    position: relative;
}

.lead .box {
    text-align: center;
}

.lead h2 {
    font-size: 185%;
    font-weight: normal;
    letter-spacing: 2px;
}

.lead h2 span {
    color: #c11938;
}

.lead p {
    line-height: 2.2;
    width: 39%;
    margin: 2% auto 0;
}

.lead li {
    position: absolute;
}

.lead li:nth-child(1) {
    top: 8%;
    left: 4%;
}

.lead li:nth-child(2) {
    top: 92%;
    left: 13%;
}

.lead li:nth-child(3) {
    top: 112%;
    left: 41%;
}

.lead li:nth-child(4) {
    top: 82%;
    left: 64%;
}

.lead li:nth-child(5) {
    top: 1%;
    left: 70%;
}

.osusume-ttl {
    text-align: center;
}

.osusume-ttl span {
    background: url(shared/img/head_icon_left.png) no-repeat left 25%, url(shared/img/head_icon_right.png) no-repeat right 25%, url(shared/img/head_icon_bottom.png) no-repeat center bottom;
    display: inline-block;
    font-size: 117%;
    font-weight: normal;
    line-height: 1.5;
    padding: 0 8% 4%;
    text-align: center;
}

.osusume-ttl strong {
    color: #3a813b;
    font-weight: normal;
}

.umaimon-map {
    background: url(shared/img/separation.png) no-repeat center top /100% auto;
    margin-top: 1%;
    padding-top: 10%;
}

.umaimon-map section {
    text-align: center;
}

.umaimon-map h2 {
    background: url(shared/img/map_icon_left.png) no-repeat left 65%, url(shared/img/map_icon_right.png) no-repeat right 65%, url(shared/img/map_ttl.png) no-repeat center top;
    display: inline-block;
    font-size: 191%;
    font-weight: normal;
    letter-spacing: 2px;
    padding: 4% 4% 3%;
}

.umaimon-map h2 span {
    color: #e63556;
    font-size: 235%;
}

.map-wrap {
    height: 600px;
    width: 100%;
}

.ins h2 {
    background: url(shared/img/icon_ins_black.png) no-repeat center top;
    font-size: 190%;
    font-weight: normal;
    letter-spacing: 1px;
    margin-top: 4.5%;
    padding-top: 3%;
}

.ins p {
    font-size: 160%;
}

.ins p a {
    color: #1f6aca;
}

.inslist {
    margin-top: 3%;
}

.inslist ul {
    margin-left: -2%;
}

.inslist li {
    float: left;
    margin-left: 1.5%;
    width: 15%;
}

.inslist li a {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    padding-bottom: 80%;
    width: 100%;
}

.ins .banner {
    font-size: 110%;
    margin-top: 3%;
    padding: 0.8% 5% 0.8% 3%;
}

ins .banner:after {
    top: 23%;
}

.shop-list a .no-image:after {
    content: "No Image";
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 230px;
    color: #a2b5c1;
    width: 390px;
    font-size: 230%;
    font-family: "tbchibirgothicplusk-pro",sans-serif;
}

.shop-list a .no-image {
    background: url(shared/img/search_bg.gif) repeat;
}

/* --------------------------------------------------------------------------------------
  店舗一覧
--------------------------------------------------------------------------------------- */

.shop-list {
    margin-left: -4%;
    margin-top: 3%;
}

.shop-list a {
    color: #000;
    display: block;
    float: left;
    margin-bottom: 4%;
    margin-left: 4%;
    width: 46%;
}

.shop-list a:hover {
    text-decoration: none;
}

.shop-list a div {
    height: 230px;
    overflow: hidden;
    width: 100%;
}

.shop-list a div span {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    height: 230px;
    width: 100%;
}

.shop-list a dl {
    padding: 2% 2% 0;
}

.shop-list a dt {
    font-weight: bold;
    font-size: 125%;
}

/* --------------------------------------------------------------------------------------
  店舗詳細
--------------------------------------------------------------------------------------- */

.pankuzu {
    background: url(shared/img/lead_bg.gif) repeat left top;
    position: relative;
    padding: 1.5% 0;
}

.pankuzu ul {
    letter-spacing: -0.4em;
}

.pankuzu li {
    display: inline-block;
    letter-spacing: normal;
    margin-left: 1%;
    line-height: 1.5;
    vertical-align: middle;
}

.pankuzu li:after {
    content: "＞";
    margin-left: 13px;
}

.pankuzu li:first-child {
    margin: 0;
}

.pankuzu li:last-child:after {
    font-size: 0;
}

.pankuzu li:first-child a {
    background: url(shared/img/icon_home.png) no-repeat;
    width: 20px;
    height: 16px;
    display: inline-block;
    font-size: 0;
    vertical-align: middle;
}

.pankuzu li a {
    color: #000;
}

.shop-wrap h2 {
    background: url(shared/img/shop_ttl_bg.png) no-repeat left 37%, url(shared/img/line.png) repeat-x left bottom;
    color: #1a4763;
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
    font-size: 181%;
    font-weight: normal;
    margin-bottom: 4%;
    padding-bottom: 1%;
    padding-left: 4%;
}

.shop-wrap .image {
    float: left;
    margin-bottom: 4%;
    margin-right: 4%;
}

.shop-wrap table {
    clear: both;
    width: 100%;
}

.shop-wrap th {
    border-bottom: 1px solid #dadada;
    line-height: 1.7;
    padding: 2% 0;
    width: 20%;
}

.shop-wrap td {
    border-bottom: 1px solid #dadada;
    line-height: 1.7;
    padding: 2% 0;
}

.shop-wrap .map {
    height: 460px;
    margin: 5% 0;
    width: 100%;
}

.new-shop .list .no-image:after {
    content: "No Image";
    display: block;
    text-align: center;
    color: #a2b5c1;
    font-size: 89%;
    font-family: "tbchibirgothicplusk-pro",sans-serif;
    text-align: center;
    padding: 39% 1%;
    line-height: 1.2;
}

/* --------------------------------------------------------------------------------------
  記事の中身のスタイルをデフォルトに戻す
--------------------------------------------------------------------------------------- */

.post-content html,
.post-content address,
.post-content blockquote,
.post-content body,
.post-content dd,
.post-content div,
.post-content dl,
.post-content dt,
.post-content fieldset,
.post-content form,
.post-content frame,
.post-content frameset,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.post-content noframes,
.post-content ol,
.post-content p,
.post-content ul,
.post-content center,
.post-content dir,
.post-content hr,
.post-content menu,
.post-content pre {
    display: block;
    unicode-bidi: embed;
}

.post-content li {
    display: list-item;
}

.post-content head {
    display: none;
}

.post-content table {
    display: table;
}

.post-content tr {
    display: table-row;
}

.post-content thead {
    display: table-header-group;
}

.post-content tbody {
    display: table-row-group;
}

.post-content tfoot {
    display: table-footer-group;
}

.post-content col {
    display: table-column;
}

.post-content colgroup {
    display: table-column-group;
}

.post-content td,
.post-content th {
    display: table-cell;
}

.post-content caption {
    display: table-caption;
}

.post-content th {
    font-weight: bolder;
    text-align: center;
}

.post-content caption {
    text-align: center;
}

.post-content body {
    margin: 8px;
}

.post-content h1 {
    font-size: 2em;
    margin: .67em 0;
}

.post-content h2 {
    font-size: 1.5em;
    margin: .75em 0;
}

.post-content h3 {
    font-size: 1.17em;
    margin: .83em 0;
}

.post-content h4,
.post-content p,
.post-content blockquote,
.post-content ul,
.post-content fieldset,
.post-content form,
.post-content ol,
.post-content dl,
.post-content dir,
.post-content menu {
    margin: 1.12em 0;
}

.post-content h5 {
    font-size: .83em;
    margin: 1.5em 0;
}

.post-content h6 {
    font-size: .75em;
    margin: 1.67em 0;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6,
.post-content b,
.post-content strong {
    font-weight: bolder
}

.post-content blockquote {
    margin-left: 40px;
    margin-right: 40px;
}

.post-content i,
.post-content cite,
.post-content em,
.post-content var,
.post-content address {
    font-style: italic;
}

.post-content pre,
.post-content tt,
.post-content code,
.post-content kbd,
.post-content samp {
    font-family: monospace;
}

.post-content pre {
    white-space: pre;
}

.post-content button,
.post-content textarea,
.post-content input,
.post-content select {
    display: inline-block;
}

.post-content big {
    font-size: 1.17em;
}

.post-content small,
.post-content sub,
.post-content sup {
    font-size: .83em;
}

.post-content sub {
    vertical-align: sub;
}

.post-content sup {
    vertical-align: super;
}

.post-content table {
    border-spacing: 2px;
}

.post-content thead,
.post-content tbody,
.post-content tfoot {
    vertical-align: middle;
}

.post-content td,
.post-content th,
.post-content tr {
    vertical-align: inherit;
}

.post-content s,
.post-content strike,
.post-content del {
    text-decoration: line-through;
}

.post-content hr {
    border: 1px inset;
}

.post-content ol,
.post-content ul,
.post-content dir,
.post-content menu,
.post-content dd {
    margin-left: 40px;
}

.post-content ol {
    list-style-type: decimal;
}

.post-content ol ul,
.post-content ul ol,
.post-content ul ul,
.post-content ol ol {
    margin-top: 0;
    margin-bottom: 0;
}

.post-content u,
.post-content ins {
    text-decoration: underline;
}

.post-content br:before {
    content: "\A";
    white-space: pre-line;
}

.post-content center {
    text-align: center;
}

.post-content a:link,
.post-content a:visited {
    text-decoration: underline;
}

.post-content a:focus {
    outline: thin dotted invert;
}


/* --------------------------------------------------------------------------------------
  記事詳細
--------------------------------------------------------------------------------------- */

.post-ttl h1 {
    line-height: 1.7;
}

.post-detail img {
    max-width: 100%;
    height: auto;
}

.post-ttl time {
    display: block;
    text-align: right;
    margin-top: 1%;
}

.post-ttl dl {
    display: inline-block;
    width: 32%;
    vertical-align: top;
}

.post-ttl dt {
    border-radius: 9px;
    border: 1px solid #4c4c4c;
    display: inline-block;
    font-size: 80%;
    font-weight: bold;
    line-height: 1.5;
    padding: 0 5%;
    vertical-align: middle;
}

.post-ttl dd {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5;
}

.post-ttl ul {
    display: inline-block;
    vertical-align: middle;
}

.post-ttl li {
    display: inline-block;
    vertical-align: middle;
}

.post-ttl li a {
    font-size: 80%;
    text-decoration: underline;
    line-height: 1.5;
    margin-left: 2%;
}

.post-detail .social {
    margin-top: 7%;
}

.post-detail .social li {
    display: inline-block;
    vertical-align: top;
}

.post-detail .social li img,
.post-detail .social li span {
    vertical-align: top !important;
}


/* --------------------------------------------------------------------------------------
   タブレット
--------------------------------------------------------------------------------------- */

@media (max-width: 980px) {
    .lead ul {
        margin-top: 3%;
        padding-bottom: 10%;
    }
    .lead li {
        position: relative;
        top: auto !important;
        left: auto !important;
        display: inline-block;
    }
    .umaimon-map {
        background: none;
        margin-top: 0;
        padding-top: 4%;
    }
    .umaimon-map h2 {
        padding: 6% 5% 3%;
    }
    .map-wrap {
        height: 450px;
    }
    .inslist ul {
        margin-left: 5%;
        width: 90%;
    }
    .ins .banner {
        margin-bottom: 5%;
    }
    .pankuzu ul {
        padding-left: 2%;
    }
    .pankuzu li:after {
        margin-left: 8px;
    }
    .lead p {
        width: 60%;
    }
}


/* --------------------------------------------------------------------------------------
   スマホ
--------------------------------------------------------------------------------------- */

@media (max-width: 766px) {
    .lead {
        background-size: 100% auto, auto auto;
        min-height: inherit;
    }
    .lead p {
        width: 100%;
    }
    .lead ul {
        margin-top: 3%;
        padding-bottom: 10%;
    }
    .lead li {
        position: relative;
        top: auto !important;
        left: auto !important;
        display: inline-block;
        width: 31%;
    }
    .lead h2 br {
        display: none;
    }
    .osusume-ttl span {
        background-size: 7% auto, 7% auto, 10% auto;
        background-position: left 36%, right 36%, center bottom;
        font-size: 91%;
    }
    .umaimon-map {
        background: none;
        margin-top: 0;
        padding-top: 4%;
    }
    .umaimon-map h2 {
        background-position: left 10%, right 10%, center top;
        background-size: 8% auto, 8% auto, 69% auto;
        padding: 12% 10% 3%;
        line-height: 1.0;
    }
    .map-wrap {
        height: 250px;
    }
    .inslist ul {
        margin-left: 5%;
        width: 90%;
    }
    .inslist li {
        width: 31%;
        margin-bottom: 1.5%;
    }
    .ins h2 {
        padding-top: 8%;
        font-size: 159%;
        margin-top: 7%;
    }
    .ins p {
        font-size: 100%;
    }
    .ins .banner {
        margin-bottom: 5%;
        width: 60%;
    }
    .pankuzu ul {
        padding-left: 2%;
    }
    .pankuzu li:after {
        margin-left: 8px;
    }
    .post-ttl,
    .post-content,
    .social {
        margin-left: 3%;
        margin-right: 3%;
    }
    .post-ttl dd,
    .post-ttl ul,
    .post-ttl dd li {
        display: block;
    }
    .shop-list {
        margin-left: 0;
    }
    .shop-list a {
        border-bottom: 1px solid #dadada;
        width: 100%;
        margin-left: 0;
        margin-bottom: 0;
    }
    .shop-list a:first-child {
        border-top: 1px solid #dadada;
    }
    .shop-list a div {
        height: auto;
        float: left;
        width: 36%;
    }
    .shop-list a div span {
        height: auto;
        padding-bottom: 78%;
    }
    .shop-list a dl {
        height: auto;
        float: right;
        width: 58%;
        line-height: 1.5;
        padding: 3% 0;
        margin-right: 2%;
    }
    .shop-list a dd {
        font-size: 85%;
    }
    .shop-wrap .image {
        float: none;
        margin-right: 4%;
        margin-left: 4%;
        margin-bottom: 0;
    }
    .shop-wrap h2 {
        margin-left: 4%;
        margin-right: 4%;
    }
    .shop-wrap p {
        margin: 2% 4% 0;
    }
    .shop-wrap table {
        width: 92%;
        margin-top: 5%;
        margin-right: 4%;
        margin-left: 4%;
    }
    .shop-wrap .map {
        height: 240px;
    }
}