@charset "utf-8";
/* search
-------------------------------------------------- */
div#search {
    margin: 0 auto 100px
    }
div#search h4 {
    padding: 0 0 10px;
    font-family: "Noto Sans Japanese";
    color: #55321f;
    font-size: 20px;
    text-align: center;
    letter-spacing: normal;
    border-bottom: 1px #ccc solid
    }
div#search div#keyword_search {
    margin: 30px auto
    }
div#search div#keyword_search h4 {
    border: none
    }
div#search div#keyword_search input[type="text"] {
    width: 90%;
    width: calc(100% - 30px);
    max-width: 490px;
    display: block;
    margin: 0 auto;
    padding: 10px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border: 3px #ccc solid
    }
div#search ul#genre_search, div#search ul#coupon_city_search {
    width: 47.5%;
    margin: 0 5% 15px 0
    }
div#search ul#genre_search {
    float: left
    }
div#search ul#coupon_city_search {
    float: right;
    margin-right: 0
    }
div#search ul#genre_search h4, div#search ul#coupon_city_search h4 {
    margin-bottom: 10px
    }
div#search ul#genre_search li {
    width: 47.5%;
    margin: 5px 5% 5px 0
    }
div#search ul#genre_search li:nth-child(2n) {
    margin-right: 0
    }
div#search ul#coupon_city_search li {
    width: 30%;
    margin: 5px 5% 5px 0
    }
div#search ul#coupon_city_search li:nth-child(3n) {
    margin-right: 0
    }
/* checkbox */
ul#genre_search input, ul#coupon_city_search input, ul.function li.area input, ul.function li.sort input {
    display: none
    }
ul#genre_search label span, ul#coupon_city_search label span, ul.function li.area label span, ul.function li.sort label span {
    display: block;
    padding-left: 28px;
    position: relative;
    margin-right: 20px
    }
ul#genre_search label span::before, ul#coupon_city_search label span::before, ul.function li.area label span::before, ul.function li.sort label span::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #55321f;
    border-radius: 4px
    }
ul.function li.sort label span::before {
    border-radius: 12px
    }
ul#genre_search input + ul#genre_search label span::after, ul#coupon_city_search input + ul#coupon_city_search label span::after, ul.function li.area input + ul.function li.area label span::after, ul.function li.sort input + ul.function li.sort label span::after {
    color: #ff4646 !important;
    font-weight: bold
    }
ul#genre_search input:checked + label span::after, ul#coupon_city_search input:checked + label span::after, ul.function li.area input:checked + label span::after, ul.function li.sort input:checked + label span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 7px;
    width: 7px;
    height: 14px;
    transform: rotate(40deg);
    border-bottom: 3px solid #ff4646;
    border-right: 3px solid #ff4646
    }
/* merchant_list*/
p.merchant_list {
    width: 100%;
    margin: 10px 0 30px;
    font-size: 16px;
    text-align: right
    }
p.merchant_list a {
    padding: 0 0 0 15px;
    background: url(../img/arr.png) no-repeat left 0.4em
    }
p.merchant_list span {
    display: block;
    font-size: 12px
    }
/* function */
ul.function {
    width: 97%;
    clear: both;
    margin: 0 auto 30px;
    padding: 15px 1%;
    text-align: center;
    border-top: 1px #ccc solid;
    border-bottom: 1px #ccc solid
    }
div#search p.btn a {
    margin: 0 auto
    }
@media screen and (max-width: 990px) {
    div#search ul#genre_search, div#search ul#coupon_city_search {
        width: 100%;
        float: none;
        margin: 0 auto 15px
        }
    }
@media screen and (max-width: 510px) {
    div#search ul#genre_search li {
        width: 100%;
        margin: 5px 0
        }
    div#search ul#coupon_city_search li {
        width: 47.5%;
        margin: 5px 5% 5px 0
        }
    div#search ul#coupon_city_search li:nth-child(3n) {
        margin-right: 5%
        }
    div#search ul#coupon_city_search li:nth-child(2n) {
        margin-right: 0
        }
    /*ul.function li:nth-child(1){
    		width:100%;
    		text-align:center;
    		padding-bottom:15px;
    	}*/
    }
/* no_spot */
p.nospot {
    margin: 50px auto 150px;
    color: #f00;
    font-size: 16px;
    text-align: center
    }
/* list
-------------------------------------------------- */
h3.pttl span {
    display: block;
    font-size: 14px;
    font-weight: normal;
    text-align: center
    }
h3.ttl {
    width: 100%;
    font-size: 24px;
    text-align: center
    }
h4.city {
    width: 100%;
    margin: 30px auto 10px;
    color: #e23366;
    font-size: 24px;
    border-bottom: 1px #969696 solid
    }
h4.city img {
    margin-right: 10px;
    vertical-align: middle
    }
@media screen and (max-width: 640px) {
    h4.city {
        font-size: 18px
        }
    }
ul.serch_result {
    width: 100%;
    margin: 30px auto;
    opacity: 1 !important
    }
ul.serch_result * {
    opacity: 1 !important
    }
ul.serch_result li {
    margin: 0 auto 20px;
    padding: 0 0 20px;
    letter-spacing: -0.4em;
    border-bottom: 1px #ccc dotted
    }
p.name, div.add, ul.hp {
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    word-break: break-all;
    zoom: 1
    }
p.name:not(span) {
    width: 35%;
    margin: -3px 2% 0 0;
    font-family: "Noto Sans Japanese";
    font-size: 18px;
    font-weight: bold
    }
p.name span {
    display: inline-block;
    margin: 5px 0 0 0;
    padding: 4px 20px 1px;
    font-family: メイリオ, Meiryo, Osaka, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic";
    color: #55321f;
    font-size: 14px;
    text-align: center;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px
    }
p.name span.genre01, ul#genre_search li:nth-child(2) label span::before {
    background-color: #DEDEF3
    }
p.name span.genre02, ul#genre_search li:nth-child(3) label span::before {
    background-color: #F1DCD6
    }
p.name span.genre03, ul#genre_search li:nth-child(4) label span::before {
    background-color: #C4D6EF
    }
p.name span.genre04, ul#genre_search li:nth-child(5) label span::before {
    background-color: #FFD6C7
    }
p.name span.genre05, ul#genre_search li:nth-child(6) label span::before {
    background-color: #BAD3CB
    }
p.name span.genre06, ul#genre_search li:nth-child(7) label span::before {
    background-color: #DCD3C3
    }
p.name span.genre07, ul#genre_search li:nth-child(8) label span::before {
    background-color: #D7DBB8
    }
p.name span.genre08, ul#genre_search li:nth-child(9) label span::before {
    background-color: #E4DBDB
    }
/*p.name span.genre09,
ul#genre_search li:nth-child(10) label span::before{background-color:#bad3cb;}
p.name span.genre10,
ul#genre_search li:nth-child(11) label span::before{background-color:#f3c7c7;}
p.name span.genre11,
ul#genre_search li:nth-child(12) label span::before{background-color:#dcd3c3;}
p.name span.genre12,
ul#genre_search li:nth-child(13) label span::before{background-color:#e0cacb;}
p.name span.genre13,
ul#genre_search li:nth-child(14) label span::before{background-color:#d7dbb8;}
p.name span.genre14,
ul#genre_search li:nth-child(15) label span::before{background-color:#acd3de;}
p.name span.genre15,
ul#genre_search li:nth-child(16) label span::before{background-color:#e4dbdb;}*/
div.add {
    width: 48%;
    margin: 0 2% 0 0;
    line-height: 1.4
    }
div.add p:not(span) {
    padding-left: 5em;
    text-indent: -5em
    }
div.add p span {
    width: 4em;
    position: relative;
    left: 0;
    display: inline-block;
    margin: 0 10px 5px 0;
    padding: 2px 0 0;
    color: #fff;
    text-align: center;
    text-indent: 0;
    background: #333
    }
ul.hp {
    width: 18%
    }
ul.serch_result li ul.hp li {
    width: 100%;
    margin: 0 auto 10px;
    padding: 0;
    text-align: center;
    border-bottom: none
    }
/*ul.serch_result li ul.hp li:nth-child(2){
	margin-bottom:0;
}*/
ul.hp li a {
    min-width: 7em;
    display: block;
    padding: 4px 0.5em 0;
    color: #fff;
    text-align: center;
    letter-spacing: normal;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    transition: all 0.3s linear;
    background-color: #e23366
    }
ul.hp li a:hover {
    background-color: #333
    }
ul.hp li a[href="javascript:void(0);"] {
    text-decoration: none;
    pointer-events: none
    }
ul.hp li a[href="javascript:void(0);"]:hover {
    background-color: #e23366
    }
div.add .travel-name {
    margin: 0 0 15px;
    font-size: 22px;
    font-weight: bold
    }
@media screen and (max-width: 730px) {
    ul.serch_result li {
        position: relative
        }
    p.name:not(span) {
        width: 70%;
        width: calc(100% - 12em - 10px);
        margin: 3px 0 10px 0
        }
    div.add {
        width: 70%;
        width: calc(100% - 17em);
        margin: 3px 0 10px 0
        }
    p.name span {
        position: absolute;
        top: 0;
        right: 0
        }
    ul.hp {
        width: auto;
        float: right
        }
    ul.hp li a {
        width: 15em;
        padding: 4px 5px 1px
        }
    div.add .travel-name {
        font-size: 18px
        }
    }
@media screen and (max-width: 510px) {
    p.name:not(span) {
        width: 100%
        }
    div.add {
        width: 100%;
        margin: 3px 0 0 0
        }
    p.name span {
        position: static;
        display: block
        }
    ul.hp {
        width: 100%;
        float: none;
        letter-spacing: -0.4em
        }
    ul.serch_result li ul.hp li {
        display: inline-block;
        width: auto;
        margin: 0;
        padding: 2px 5px 2px 0;
        vertical-align: top;
        letter-spacing: normal;
        zoomo: 1
        }
    ul.serch_result li ul.hp li a {
        width: 7em
        }
    }
@media screen and (max-width: 350px) {
    ul.serch_result li {
        margin: 0 auto 20px;
        padding: 0 0 25px
        }
    }
.vaccinated-note dl {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex
    }
.vaccinated-note dl dt {
    width: 210px
    }
.vaccinated-note dl dd {
    width: calc(100% - 210px)
    }
.vaccinated {
    display: block;
    padding: 4px 1em;
    color: #fff;
    text-align: center;
    letter-spacing: normal;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    transition: all 0.3s linear;
    background: #8cc63f
    }
.yoyaku {
    display: block;
    min-width: 11em;
    padding: 6px 1em;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    letter-spacing: normal;
    border-radius: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    transition: all 0.3s linear;
    background: #29abe2
    }
.yoyaku span {
    font-size: 12px
    }