@charset "UTF-8";
/* reset css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-weight: inherit;
/* outline: 0;*/ }
html {
font-size: 100%;
-webkit-text-size-adjust: none; }
img {
vertical-align: text-bottom;
-ms-interpolation-mode: bicubic; }
a {
-webkit-tap-highlight-color: transparent; }
strong {
font-weight: bold; }
ol, ul {
list-style: none; }
table {
border-collapse: collapse;
/* border-collapse: separate;*/
border-spacing: 0; }
caption, th, td {
font-weight: normal;
text-align: left;
vertical-align: top; }
blockquote:before, blockquote:after,
q:before, q:after {
content: ""; }
blockquote, q {
quotes: "" ""; }
a:focus {
/*\*/
overflow: hidden;
/**/ }
option {
padding-right: 10px; }
/* HTML5 ELEMENTS */
header, article, aside, section, footer,
nav, menu, details, hgroup, summary {
display: block; }
/***** common style *****/
@media (max-width: 1173px) {
.pc-visibility {
display: none; } }
@media (min-width: 1174px) {
.tb-visibility {
display: none; } }
@media (max-width: 767px) {
.tb-visibility {
display: none; } }
@media (max-width: 767px) {
.pc-tb-visibility {
display: none; } }
@media (min-width: 1174px) {
.tb-sp-visibility {
display: none; } }
@media (min-width: 768px) {
.sp-visibility {
display: none; } }
body {
color: #505050;
font-size: 3.5897435897vw;
font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",arial,Meiryo,メイリオ,helvetica,sans-serif;
line-height: 1;
letter-spacing: 0; }
@media (max-width: 768px) {
body {
font-size: 14px; } }
a {
color: inherit;
text-decoration: none;
transition: all 0.3s; }
a:hover {
opacity: 0.8; }
img {
width: 100%;
vertical-align: top; }
.bold {
font-weight: bold; }
.btn {
position: relative;
display: block;
box-sizing: border-box;
vertical-align: top;
width: 76.9230769231vw;
height: 10.2564102564vw;
background-color: #FFFFFF;
padding: 0;
padding-left: 12%;
margin: 0 auto;
border: solid 2px #0068B7;
border-radius: 5.1282051282vw;
font-size: 4.1025641026vw;
line-height: 10vw;
color: #0068B7;
font-weight: bold;
cursor: pointer; }
@media (min-width: 768px) {
.btn {
width: 300px;
height: 40px;
border-radius: 20px;
font-size: 16px;
line-height: 39px;
padding-left: 39px; } }
.btn:before {
position: absolute;
top: 2.0512820513vw;
left: 2.5641025641vw;
width: 5.641025641vw;
height: 5.641025641vw;
background-image: url("/assets/images/common/icon-arrow.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
.btn:before {
top: 8px;
left: 10px;
width: 22px;
height: 22px; } }
.btn:hover {
opacity: 0.8; }
.btn-list li {
margin-bottom: 3.8461538462vw; }
@media (min-width: 768px) {
.btn-list li {
margin-bottom: 15px; } }
.btn-list li:last-child {
margin-bottom: 0; }
.guide-btn {
position: relative;
display: block;
box-sizing: border-box;
vertical-align: top;
width: 38.4615384615vw;
height: 9.2307692308vw;
background-color: #FFFFFF;
padding: 0;
padding-left: 28%;
border: solid 2px #0068B7;
border-radius: 4.6153846154vw;
font-size: 3.5897435897vw;
line-height: 8.7179487179vw;
white-space: nowrap;
color: #0068B7;
font-weight: bold;
cursor: pointer; }
@media (min-width: 768px) {
.guide-btn {
width: 150px;
height: 36px;
border-radius: 18px;
font-size: 14px;
line-height: 35px;
padding-left: 50px; } }
.guide-btn:before {
position: absolute;
top: 1.2820512821vw;
left: 1.5384615385vw;
width: 7.4358974359vw;
height: 5.641025641vw;
background-image: url("/assets/images/common/icon-arrow.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
.guide-btn:before {
top: 4px;
left: 10px;
width: 35px;
height: 25px; } }
.guide-btn.brawn {
border: solid 2px #B58D5E;
color: #B58D5E; }
.guide-btn.map:before {
background-image: url("/assets/images/common/icon-map.png"); }
.guide-btn.map-2:before {
background-image: url("/assets/images/common/icon-map-2.png"); }
.guide-btn.play:before {
background-image: url("/assets/images/common/icon-play.png"); }
.guide-btn.play-2:before {
background-image: url("/assets/images/common/icon-play-2.png"); }
.guide-btn.google-map:before {
background-image: url("/assets/images/common/icon-google-map.png"); }
.guide-btn.google-map-2:before {
background-image: url("/assets/images/common/icon-google-map-2.png"); }
.guide-btn.taxi:before {
background-image: url("/assets/images/common/icon-taxi.png"); }
.guide-btn.taxi-2:before {
background-image: url("/assets/images/common/icon-taxi-2.png"); }
.guide-btn.bus:before {
background-image: url("/assets/images/common/icon-bus.png"); }
.guide-btn.bus-2:before {
background-image: url("/assets/images/common/icon-bus-2.png"); }
.guide-btn.train:before {
background-image: url("/assets/images/common/icon-train.png"); }
.guide-btn.ropeway:before {
background-image: url("/assets/images/common/icon-ropeway.png"); }
.guide-btn:hover {
opacity: 0.8; }
.guide-btn-list {
width: 90%;
margin: 0 auto;
max-width: 720px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around; }
.guide-btn-list li {
margin-bottom: 2.5641025641vw; }
@media (min-width: 768px) {
.guide-btn-list li {
margin-bottom: 10px; } }
.head-2 {
background-color: #66B4EF;
font-size: 4.1025641026vw;
line-height: 7.6923076923vw;
color: #FFFFFF;
font-weight: bold;
text-align: center; }
@media (min-width: 768px) {
.head-2 {
font-size: 16px;
line-height: 30px; } }
.head-3 {
font-size: 4.1025641026vw;
line-height: 1;
padding: 6.9230769231vw 0;
color: #0068B7;
font-weight: bold;
text-align: center; }
@media (min-width: 768px) {
.head-3 {
font-size: 16px;
padding: 27px 0; } }
.head-3.brawn {
color: #B58D5E; }
.ranking-list {
width: 90%;
margin: 0 auto;
max-width: 720px; }
@media (min-width: 768px) {
.ranking-list {
max-width: 480px; } }
.ranking-list li {
margin-bottom: 2.5641025641vw;
border: solid 2px #0068B7; }
@media (min-width: 768px) {
.ranking-list li {
margin-bottom: 10px; } }
.ranking-list li:last-child {
margin-bottom: 0; }
.ranking-list li a, .ranking-list li span {
cursor: pointer;
display: block;
box-sizing: border-box;
height: 20.5128205128vw; }
.ranking-list li a::after, .ranking-list li span::after {
clear: both;
content: "";
display: block; }
@media (min-width: 768px) {
.ranking-list li a, .ranking-list li span {
height: 80px; } }
.ranking-list li a .img, .ranking-list li span .img {
float: left;
width: 28%;
height: 20.5128205128vw;
background-size: cover;
background-position: center; }
@media (min-width: 768px) {
.ranking-list li a .img, .ranking-list li span .img {
height: 80px; } }
.ranking-list li a .detail-box, .ranking-list li span .detail-box {
float: left;
width: 72%; }
.ranking-list li a .detail-box .detail-title, .ranking-list li span .detail-box .detail-title {
box-sizing: border-box;
background-color: #D7EFFC;
padding-left: 2.5641025641vw;
font-size: 2.5641025641vw;
line-height: 5.641025641vw;
color: #0068B7;
font-weight: bold;
white-space: nowrap; }
@media (min-width: 768px) {
.ranking-list li a .detail-box .detail-title, .ranking-list li span .detail-box .detail-title {
padding-left: 10px;
font-size: 12px;
line-height: 22px; } }
.ranking-list li a .detail-box .detail-text, .ranking-list li span .detail-box .detail-text {
position: relative;
box-sizing: border-box;
padding-left: 9.4871794872vw;
padding-top: 1.5384615385vw;
padding-right: 1.0256410256vw;
font-size: 4.1025641026vw;
line-height: 5.641025641vw;
color: #0068B7;
font-weight: bold; }
@media (min-width: 768px) {
.ranking-list li a .detail-box .detail-text, .ranking-list li span .detail-box .detail-text {
padding-left: 37px;
padding-top: 6px;
padding-right: 4px;
font-size: 16px;
line-height: 22px; } }
.ranking-list li a .detail-box .detail-text:before, .ranking-list li span .detail-box .detail-text:before {
position: absolute;
top: 1.5384615385vw;
left: 2.5641025641vw;
width: 5.641025641vw;
height: 5.641025641vw;
background-image: url("/assets/images/common/icon-arrow.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
.ranking-list li a .detail-box .detail-text:before, .ranking-list li span .detail-box .detail-text:before {
top: 6px;
left: 10px;
width: 22px;
height: 22px; } }
.shop-list li {
margin-bottom: 2.5641025641vw;
border: solid 2px #B58D5E; }
@media (min-width: 768px) {
.shop-list li {
margin-bottom: 10px; } }
.shop-list li:last-child {
margin-bottom: 0; }
.shop-list li a, .shop-list li span {
cursor: pointer;
display: block;
box-sizing: border-box;
min-height: 14.8717948718vw;
background-color: #FFFFFF; }
.shop-list li a::after, .shop-list li span::after {
clear: both;
content: "";
display: block; }
@media (min-width: 768px) {
.shop-list li a, .shop-list li span {
min-height: 58px; } }
.shop-list li a .shop-cat, .shop-list li span .shop-cat {
box-sizing: border-box;
background-color: #F4E8DB;
padding-left: 2.5641025641vw;
font-size: 3.0769230769vw;
line-height: 6.4102564103vw;
color: #B58D5E;
font-weight: bold;
white-space: nowrap; }
@media (min-width: 768px) {
.shop-list li a .shop-cat, .shop-list li span .shop-cat {
padding-left: 10px;
font-size: 12px;
line-height: 25px; } }
.shop-list li a .shop-text, .shop-list li span .shop-text {
position: relative;
box-sizing: border-box;
padding-left: 7.9487179487vw;
padding-top: 1.5384615385vw;
padding-bottom: 1.0256410256vw;
padding-right: 1.0256410256vw;
font-size: 3.5897435897vw;
line-height: 4.6153846154vw;
color: #B58D5E;
font-weight: bold; }
@media (min-width: 768px) {
.shop-list li a .shop-text, .shop-list li span .shop-text {
padding-left: 37px;
padding-top: 6px;
padding-right: 6px;
font-size: 16px;
line-height: 22px; } }
.shop-list li a .shop-text:before, .shop-list li span .shop-text:before {
position: absolute;
top: 1.5384615385vw;
left: 2.0512820513vw;
width: 4.6153846154vw;
height: 4.6153846154vw;
background-image: url("/assets/images/common/icon-arrow-2.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
.shop-list li a .shop-text:before, .shop-list li span .shop-text:before {
top: 6px;
left: 8px;
width: 18px;
height: 18px; } }
#landmark-modal {
display: none;
z-index: 21;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
padding-top: 15.3846153846vw;
overflow-y: scroll; }
@media (min-width: 768px) {
#landmark-modal {
padding-top: 40px; } }
#landmark-modal .landmark-modal-box {
position: relative;
background-color: #FFFFFF;
width: 90%;
margin: 0 auto;
max-width: 720px;
width: 96%;
border-radius: 2.0512820513vw; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box {
border-radius: 8px; } }
#landmark-modal .landmark-modal-box .landmark-modal-close-box {
position: absolute;
top: 3.8461538462vw;
right: 3.8461538462vw; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-close-box {
top: 15px;
right: 15px; } }
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close {
cursor: pointer;
position: relative;
z-index: 9;
height: 30px;
width: 30px; }
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close span {
position: absolute;
top: 2.5641025641vw;
right: 0;
border: 0;
width: 7.6923076923vw;
height: 0.5128205128vw;
background: #0068B7; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close span {
top: 11px;
width: 30px;
height: 2px; } }
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close span:nth-of-type(1) {
border-top: none;
border-bottom: none;
transform: rotate(45deg); }
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close span:nth-of-type(2) {
border-top: none;
border-bottom: none;
transform: rotate(-45deg); }
#landmark-modal .landmark-modal-box .landmark-modal-list > li {
box-sizing: border-box;
padding: 5.1282051282vw 3.8461538462vw; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-list > li {
padding: 20px; } }
#landmark-modal .landmark-modal-box .landmark-modal-list .landmark-name {
box-sizing: border-box;
padding: 0 5.1282051282vw;
font-size: 4.6153846154vw;
line-height: 7.1794871795vw;
color: #0068B7;
text-align: center;
font-weight: bold; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-list .landmark-name {
padding: 0 20px;
font-size: 18px;
line-height: 28px; } }
#landmark-modal .landmark-modal-box .landmark-modal-list .landmark-img {
margin-top: 5.1282051282vw;
padding-top: 66%;
background-size: cover;
background-position: center; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-list .landmark-img {
margin-top: 20px; } }
#landmark-modal .landmark-modal-box .landmark-modal-list p {
margin-top: 4.1025641026vw;
padding-bottom: 6.1538461538vw;
font-size: 4.1025641026vw;
line-height: 7.1794871795vw; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-list p {
margin-top: 16px;
padding-bottom: 24px;
font-size: 16px;
line-height: 28px; } }
#shop-modal {
display: none;
z-index: 21;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
padding-top: 15.3846153846vw;
overflow-y: scroll; }
@media (min-width: 768px) {
#shop-modal {
padding-top: 40px; } }
#shop-modal .shop-modal-box {
position: relative;
background-color: #FFFFFF;
width: 90%;
margin: 0 auto;
max-width: 720px;
width: 96%;
border-radius: 2.0512820513vw; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box {
border-radius: 8px; } }
#shop-modal .shop-modal-box .shop-modal-close-box {
position: absolute;
top: 3.8461538462vw;
right: 3.8461538462vw; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-close-box {
top: 15px;
right: 15px; } }
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close {
cursor: pointer;
position: relative;
z-index: 9;
height: 30px;
width: 30px; }
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close span {
position: absolute;
top: 2.5641025641vw;
right: 0;
border: 0;
width: 7.6923076923vw;
height: 0.5128205128vw;
background: #B58D5E; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close span {
top: 11px;
width: 30px;
height: 2px; } }
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close span:nth-of-type(1) {
border-top: none;
border-bottom: none;
transform: rotate(45deg); }
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close span:nth-of-type(2) {
border-top: none;
border-bottom: none;
transform: rotate(-45deg); }
#shop-modal .shop-modal-box .shop-modal-list > li {
box-sizing: border-box;
padding: 5.1282051282vw 3.8461538462vw; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-list > li {
padding: 20px; } }
#shop-modal .shop-modal-box .shop-modal-list .shop-name {
box-sizing: border-box;
padding: 0 5.1282051282vw;
font-size: 4.6153846154vw;
line-height: 7.1794871795vw;
color: #B58D5E;
text-align: center;
font-weight: bold; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-list .shop-name {
padding: 0 20px;
font-size: 18px;
line-height: 28px; } }
#shop-modal .shop-modal-box .shop-modal-list p {
margin-top: 4.1025641026vw;
font-size: 4.1025641026vw;
line-height: 7.1794871795vw;
padding-bottom: 5.1282051282vw; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-list p {
margin-top: 16px;
padding-bottom: 44px;
font-size: 16px;
line-height: 28px; } }
#shop-modal .shop-modal-box .shop-modal-list .shop-img {
margin-bottom: 6.1538461538vw;
padding-top: 66%;
background-size: cover;
background-position: center; }
/***** common style *****/
@media (max-width: 1173px) {
.pc-visibility {
display: none; } }
@media (min-width: 1174px) {
.tb-visibility {
display: none; } }
@media (max-width: 767px) {
.tb-visibility {
display: none; } }
@media (max-width: 767px) {
.pc-tb-visibility {
display: none; } }
@media (min-width: 1174px) {
.tb-sp-visibility {
display: none; } }
@media (min-width: 768px) {
.sp-visibility {
display: none; } }
body {
color: #505050;
font-size: 3.5897435897vw;
font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",arial,Meiryo,メイリオ,helvetica,sans-serif;
line-height: 1;
letter-spacing: 0; }
@media (max-width: 768px) {
body {
font-size: 14px; } }
a {
color: inherit;
text-decoration: none;
transition: all 0.3s; }
a:hover {
opacity: 0.8; }
img {
width: 100%;
vertical-align: top; }
.bold {
font-weight: bold; }
.btn {
position: relative;
display: block;
box-sizing: border-box;
vertical-align: top;
width: 76.9230769231vw;
height: 10.2564102564vw;
background-color: #FFFFFF;
padding: 0;
padding-left: 12%;
margin: 0 auto;
border: solid 2px #0068B7;
border-radius: 5.1282051282vw;
font-size: 4.1025641026vw;
line-height: 10vw;
color: #0068B7;
font-weight: bold;
cursor: pointer; }
@media (min-width: 768px) {
.btn {
width: 300px;
height: 40px;
border-radius: 20px;
font-size: 16px;
line-height: 39px;
padding-left: 39px; } }
.btn:before {
position: absolute;
top: 2.0512820513vw;
left: 2.5641025641vw;
width: 5.641025641vw;
height: 5.641025641vw;
background-image: url("/assets/images/common/icon-arrow.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
.btn:before {
top: 8px;
left: 10px;
width: 22px;
height: 22px; } }
.btn:hover {
opacity: 0.8; }
.btn-list li {
margin-bottom: 3.8461538462vw; }
@media (min-width: 768px) {
.btn-list li {
margin-bottom: 15px; } }
.btn-list li:last-child {
margin-bottom: 0; }
.guide-btn {
position: relative;
display: block;
box-sizing: border-box;
vertical-align: top;
width: 38.4615384615vw;
height: 9.2307692308vw;
background-color: #FFFFFF;
padding: 0;
padding-left: 28%;
border: solid 2px #0068B7;
border-radius: 4.6153846154vw;
font-size: 3.5897435897vw;
line-height: 8.7179487179vw;
white-space: nowrap;
color: #0068B7;
font-weight: bold;
cursor: pointer; }
@media (min-width: 768px) {
.guide-btn {
width: 150px;
height: 36px;
border-radius: 18px;
font-size: 14px;
line-height: 35px;
padding-left: 50px; } }
.guide-btn:before {
position: absolute;
top: 1.2820512821vw;
left: 1.5384615385vw;
width: 7.4358974359vw;
height: 5.641025641vw;
background-image: url("/assets/images/common/icon-arrow.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
.guide-btn:before {
top: 4px;
left: 10px;
width: 35px;
height: 25px; } }
.guide-btn.brawn {
border: solid 2px #B58D5E;
color: #B58D5E; }
.guide-btn.map:before {
background-image: url("/assets/images/common/icon-map.png"); }
.guide-btn.map-2:before {
background-image: url("/assets/images/common/icon-map-2.png"); }
.guide-btn.play:before {
background-image: url("/assets/images/common/icon-play.png"); }
.guide-btn.play-2:before {
background-image: url("/assets/images/common/icon-play-2.png"); }
.guide-btn.google-map:before {
background-image: url("/assets/images/common/icon-google-map.png"); }
.guide-btn.google-map-2:before {
background-image: url("/assets/images/common/icon-google-map-2.png"); }
.guide-btn.taxi:before {
background-image: url("/assets/images/common/icon-taxi.png"); }
.guide-btn.taxi-2:before {
background-image: url("/assets/images/common/icon-taxi-2.png"); }
.guide-btn.bus:before {
background-image: url("/assets/images/common/icon-bus.png"); }
.guide-btn.bus-2:before {
background-image: url("/assets/images/common/icon-bus-2.png"); }
.guide-btn.train:before {
background-image: url("/assets/images/common/icon-train.png"); }
.guide-btn.ropeway:before {
background-image: url("/assets/images/common/icon-ropeway.png"); }
.guide-btn:hover {
opacity: 0.8; }
.guide-btn-list {
width: 90%;
margin: 0 auto;
max-width: 720px;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-around; }
.guide-btn-list li {
margin-bottom: 2.5641025641vw; }
@media (min-width: 768px) {
.guide-btn-list li {
margin-bottom: 10px; } }
.head-2 {
background-color: #66B4EF;
font-size: 4.1025641026vw;
line-height: 7.6923076923vw;
color: #FFFFFF;
font-weight: bold;
text-align: center; }
@media (min-width: 768px) {
.head-2 {
font-size: 16px;
line-height: 30px; } }
.head-3 {
font-size: 4.1025641026vw;
line-height: 1;
padding: 6.9230769231vw 0;
color: #0068B7;
font-weight: bold;
text-align: center; }
@media (min-width: 768px) {
.head-3 {
font-size: 16px;
padding: 27px 0; } }
.head-3.brawn {
color: #B58D5E; }
.ranking-list {
width: 90%;
margin: 0 auto;
max-width: 720px; }
@media (min-width: 768px) {
.ranking-list {
max-width: 480px; } }
.ranking-list li {
margin-bottom: 2.5641025641vw;
border: solid 2px #0068B7; }
@media (min-width: 768px) {
.ranking-list li {
margin-bottom: 10px; } }
.ranking-list li:last-child {
margin-bottom: 0; }
.ranking-list li a, .ranking-list li span {
cursor: pointer;
display: block;
box-sizing: border-box;
height: 20.5128205128vw; }
.ranking-list li a::after, .ranking-list li span::after {
clear: both;
content: "";
display: block; }
@media (min-width: 768px) {
.ranking-list li a, .ranking-list li span {
height: 80px; } }
.ranking-list li a .img, .ranking-list li span .img {
float: left;
width: 28%;
height: 20.5128205128vw;
background-size: cover;
background-position: center; }
@media (min-width: 768px) {
.ranking-list li a .img, .ranking-list li span .img {
height: 80px; } }
.ranking-list li a .detail-box, .ranking-list li span .detail-box {
float: left;
width: 72%; }
.ranking-list li a .detail-box .detail-title, .ranking-list li span .detail-box .detail-title {
box-sizing: border-box;
background-color: #D7EFFC;
padding-left: 2.5641025641vw;
font-size: 2.5641025641vw;
line-height: 5.641025641vw;
color: #0068B7;
font-weight: bold;
white-space: nowrap; }
@media (min-width: 768px) {
.ranking-list li a .detail-box .detail-title, .ranking-list li span .detail-box .detail-title {
padding-left: 10px;
font-size: 12px;
line-height: 22px; } }
.ranking-list li a .detail-box .detail-text, .ranking-list li span .detail-box .detail-text {
position: relative;
box-sizing: border-box;
padding-left: 9.4871794872vw;
padding-top: 1.5384615385vw;
padding-right: 1.0256410256vw;
font-size: 4.1025641026vw;
line-height: 5.641025641vw;
color: #0068B7;
font-weight: bold; }
@media (min-width: 768px) {
.ranking-list li a .detail-box .detail-text, .ranking-list li span .detail-box .detail-text {
padding-left: 37px;
padding-top: 6px;
padding-right: 4px;
font-size: 16px;
line-height: 22px; } }
.ranking-list li a .detail-box .detail-text:before, .ranking-list li span .detail-box .detail-text:before {
position: absolute;
top: 1.5384615385vw;
left: 2.5641025641vw;
width: 5.641025641vw;
height: 5.641025641vw;
background-image: url("/assets/images/common/icon-arrow.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
.ranking-list li a .detail-box .detail-text:before, .ranking-list li span .detail-box .detail-text:before {
top: 6px;
left: 10px;
width: 22px;
height: 22px; } }
.shop-list li {
margin-bottom: 2.5641025641vw;
border: solid 2px #B58D5E; }
@media (min-width: 768px) {
.shop-list li {
margin-bottom: 10px; } }
.shop-list li:last-child {
margin-bottom: 0; }
.shop-list li a, .shop-list li span {
cursor: pointer;
display: block;
box-sizing: border-box;
min-height: 14.8717948718vw;
background-color: #FFFFFF; }
.shop-list li a::after, .shop-list li span::after {
clear: both;
content: "";
display: block; }
@media (min-width: 768px) {
.shop-list li a, .shop-list li span {
min-height: 58px; } }
.shop-list li a .shop-cat, .shop-list li span .shop-cat {
box-sizing: border-box;
background-color: #F4E8DB;
padding-left: 2.5641025641vw;
font-size: 3.0769230769vw;
line-height: 6.4102564103vw;
color: #B58D5E;
font-weight: bold;
white-space: nowrap; }
@media (min-width: 768px) {
.shop-list li a .shop-cat, .shop-list li span .shop-cat {
padding-left: 10px;
font-size: 12px;
line-height: 25px; } }
.shop-list li a .shop-text, .shop-list li span .shop-text {
position: relative;
box-sizing: border-box;
padding-left: 7.9487179487vw;
padding-top: 1.5384615385vw;
padding-bottom: 1.0256410256vw;
padding-right: 1.0256410256vw;
font-size: 3.5897435897vw;
line-height: 4.6153846154vw;
color: #B58D5E;
font-weight: bold; }
@media (min-width: 768px) {
.shop-list li a .shop-text, .shop-list li span .shop-text {
padding-left: 37px;
padding-top: 6px;
padding-right: 6px;
font-size: 16px;
line-height: 22px; } }
.shop-list li a .shop-text:before, .shop-list li span .shop-text:before {
position: absolute;
top: 1.5384615385vw;
left: 2.0512820513vw;
width: 4.6153846154vw;
height: 4.6153846154vw;
background-image: url("/assets/images/common/icon-arrow-2.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
.shop-list li a .shop-text:before, .shop-list li span .shop-text:before {
top: 6px;
left: 8px;
width: 18px;
height: 18px; } }
#landmark-modal {
display: none;
z-index: 21;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
padding-top: 15.3846153846vw;
overflow-y: scroll; }
@media (min-width: 768px) {
#landmark-modal {
padding-top: 40px; } }
#landmark-modal .landmark-modal-box {
position: relative;
background-color: #FFFFFF;
width: 90%;
margin: 0 auto;
max-width: 720px;
width: 96%;
border-radius: 2.0512820513vw; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box {
border-radius: 8px; } }
#landmark-modal .landmark-modal-box .landmark-modal-close-box {
position: absolute;
top: 3.8461538462vw;
right: 3.8461538462vw; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-close-box {
top: 15px;
right: 15px; } }
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close {
cursor: pointer;
position: relative;
z-index: 9;
height: 30px;
width: 30px; }
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close span {
position: absolute;
top: 2.5641025641vw;
right: 0;
border: 0;
width: 7.6923076923vw;
height: 0.5128205128vw;
background: #0068B7; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close span {
top: 11px;
width: 30px;
height: 2px; } }
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close span:nth-of-type(1) {
border-top: none;
border-bottom: none;
transform: rotate(45deg); }
#landmark-modal .landmark-modal-box .landmark-modal-close-box .landmark-modal-close span:nth-of-type(2) {
border-top: none;
border-bottom: none;
transform: rotate(-45deg); }
#landmark-modal .landmark-modal-box .landmark-modal-list > li {
box-sizing: border-box;
padding: 5.1282051282vw 3.8461538462vw; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-list > li {
padding: 20px; } }
#landmark-modal .landmark-modal-box .landmark-modal-list .landmark-name {
box-sizing: border-box;
padding: 0 5.1282051282vw;
font-size: 4.6153846154vw;
line-height: 7.1794871795vw;
color: #0068B7;
text-align: center;
font-weight: bold; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-list .landmark-name {
padding: 0 20px;
font-size: 18px;
line-height: 28px; } }
#landmark-modal .landmark-modal-box .landmark-modal-list .landmark-img {
margin-top: 5.1282051282vw;
padding-top: 66%;
background-size: cover;
background-position: center; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-list .landmark-img {
margin-top: 20px; } }
#landmark-modal .landmark-modal-box .landmark-modal-list p {
margin-top: 4.1025641026vw;
padding-bottom: 6.1538461538vw;
font-size: 4.1025641026vw;
line-height: 7.1794871795vw; }
@media (min-width: 768px) {
#landmark-modal .landmark-modal-box .landmark-modal-list p {
margin-top: 16px;
padding-bottom: 24px;
font-size: 16px;
line-height: 28px; } }
#shop-modal {
display: none;
z-index: 21;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
padding-top: 15.3846153846vw;
overflow-y: scroll; }
@media (min-width: 768px) {
#shop-modal {
padding-top: 40px; } }
#shop-modal .shop-modal-box {
position: relative;
background-color: #FFFFFF;
width: 90%;
margin: 0 auto;
max-width: 720px;
width: 96%;
border-radius: 2.0512820513vw; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box {
border-radius: 8px; } }
#shop-modal .shop-modal-box .shop-modal-close-box {
position: absolute;
top: 3.8461538462vw;
right: 3.8461538462vw; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-close-box {
top: 15px;
right: 15px; } }
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close {
cursor: pointer;
position: relative;
z-index: 9;
height: 30px;
width: 30px; }
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close span {
position: absolute;
top: 2.5641025641vw;
right: 0;
border: 0;
width: 7.6923076923vw;
height: 0.5128205128vw;
background: #B58D5E; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close span {
top: 11px;
width: 30px;
height: 2px; } }
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close span:nth-of-type(1) {
border-top: none;
border-bottom: none;
transform: rotate(45deg); }
#shop-modal .shop-modal-box .shop-modal-close-box .shop-modal-close span:nth-of-type(2) {
border-top: none;
border-bottom: none;
transform: rotate(-45deg); }
#shop-modal .shop-modal-box .shop-modal-list > li {
box-sizing: border-box;
padding: 5.1282051282vw 3.8461538462vw; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-list > li {
padding: 20px; } }
#shop-modal .shop-modal-box .shop-modal-list .shop-name {
box-sizing: border-box;
padding: 0 5.1282051282vw;
font-size: 4.6153846154vw;
line-height: 7.1794871795vw;
color: #B58D5E;
text-align: center;
font-weight: bold; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-list .shop-name {
padding: 0 20px;
font-size: 18px;
line-height: 28px; } }
#shop-modal .shop-modal-box .shop-modal-list p {
margin-top: 4.1025641026vw;
font-size: 4.1025641026vw;
line-height: 7.1794871795vw;
padding-bottom: 5.1282051282vw; }
@media (min-width: 768px) {
#shop-modal .shop-modal-box .shop-modal-list p {
margin-top: 16px;
padding-bottom: 44px;
font-size: 16px;
line-height: 28px; } }
#shop-modal .shop-modal-box .shop-modal-list .shop-img {
margin-bottom: 6.1538461538vw;
padding-top: 66%;
background-size: cover;
background-position: center; }
#header {
z-index: 11;
position: relative;
background-color: #FFFFFF;
box-shadow: 0 0.7692307692vw 1.5384615385vw 1.5384615385vw rgba(0, 0, 0, 0.1); }
@media (min-width: 768px) {
#header {
box-shadow: 0 3px 6px 6px rgba(0, 0, 0, 0.1); } }
#header.fixed {
position: fixed;
top: 0;
left: 0;
right: 0; }
#header .header-wrap {
width: 90%;
margin: 0 auto;
max-width: 720px;
width: 94%;
height: 12.8205128205vw; }
#header .header-wrap::after {
clear: both;
content: "";
display: block; }
@media (min-width: 768px) {
#header .header-wrap {
height: 50px; } }
#header .logo-box {
float: left;
width: 41.0256410256vw;
padding-top: 3.8461538462vw;
vertical-align: top;
line-height: 0; }
@media (min-width: 768px) {
#header .logo-box {
padding-top: 15px;
width: 160px;
height: 50px;
box-sizing: border-box; } }
#header .header-lang {
float: left;
margin-left: 20.5128205128vw; }
#header .header-lang::after {
clear: both;
content: "";
display: block; }
@media (min-width: 768px) {
#header .header-lang {
margin-left: 80px;
height: 50px;
line-height: 0; } }
#header .header-lang li {
display: inline-block;
margin-right: 2.5641025641vw;
color: #707070;
font-size: 3.5897435897vw;
line-height: 12.8205128205vw;
font-weight: bold; }
@media (min-width: 768px) {
#header .header-lang li {
margin-right: 10px;
font-size: 14px;
line-height: 50px; } }
#header .header-lang li:last-child {
margin-right: 0; }
#header .header-lang li.selected {
color: #66B4EF; }
#header .header-menu-btn {
cursor: pointer;
display: block;
position: relative;
box-sizing: border-box;
float: right;
width: 7.6923076923vw;
height: 6.4102564103vw;
margin-top: 3.3333333333vw; }
@media (min-width: 768px) {
#header .header-menu-btn {
width: 30px;
height: 25px;
margin-top: 13px; } }
#header .header-menu-btn span {
display: block;
height: 2.0512820513vw;
transition: all 0.3s;
transform: rotate(0deg); }
@media (min-width: 768px) {
#header .header-menu-btn span {
height: 8px; } }
#header .header-menu-btn span:nth-of-type(1) {
border-top: 2px solid #0068B7;
border-bottom: 1px solid #0068B7; }
#header .header-menu-btn span:nth-of-type(2) {
border-top: 1px solid #0068B7;
border-bottom: 2px solid #0068B7; }
#header .header-menu-btn.selected {
position: relative; }
#header .header-menu-btn.selected span {
position: absolute;
top: 2.5641025641vw;
right: 0;
border: 0;
width: 7.6923076923vw;
height: 0.5128205128vw;
background: #0068B7; }
@media (min-width: 768px) {
#header .header-menu-btn.selected span {
top: 11px;
width: 30px;
height: 2px; } }
#header .header-menu-btn.selected span:nth-of-type(1) {
border-top: none;
border-bottom: none;
transform: rotate(45deg); }
#header .header-menu-btn.selected span:nth-of-type(2) {
border-top: none;
border-bottom: none;
transform: rotate(-45deg); }
.header-menu-list-wrap {
display: none;
position: fixed;
top: 12.8205128205vw;
left: 0;
right: 0;
bottom: 0;
background-color: #505050;
z-index: 21;
overflow-y: scroll; }
@media (min-width: 768px) {
.header-menu-list-wrap {
top: 50px; } }
.header-menu-list-wrap .header-menu-list li {
border-bottom: solid 0.2564102564vw #888888;
height: 8.9743589744vw; }
@media (min-width: 768px) {
.header-menu-list-wrap .header-menu-list li {
height: 50px; } }
.header-menu-list-wrap .header-menu-list li a {
display: block;
box-sizing: border-box;
padding-left: 10%;
font-size: 4.1025641026vw;
line-height: 8.7179487179vw;
color: #FFFFFF;
font-weight: bold; }
@media (min-width: 768px) {
.header-menu-list-wrap .header-menu-list li a {
font-size: 18px;
line-height: 50px; } }
.header-menu-list-wrap .header-menu-global-list {
padding-top: 8.7179487179vw; }
@media (min-width: 768px) {
.header-menu-list-wrap .header-menu-global-list {
padding-top: 34px; } }
.header-menu-list-wrap .header-menu-global-list li a {
display: block;
box-sizing: border-box;
padding-left: 10%;
font-size: 4.1025641026vw;
line-height: 8.7179487179vw;
color: #FFFFFF;
font-weight: bold; }
@media (min-width: 768px) {
.header-menu-list-wrap .header-menu-global-list li a {
font-size: 18px;
line-height: 50px; } }
.header-menu-list-wrap .header-menu-global-list li a::before {
content: "> "; }
.header-menu-list-wrap .header-menu-sns-list {
padding-top: 5.1282051282vw;
padding-bottom: 5.1282051282vw;
box-sizing: border-box;
padding-left: 10%; }
@media (min-width: 768px) {
.header-menu-list-wrap .header-menu-sns-list {
padding-top: 30px;
padding-bottom: 20px; } }
.header-menu-list-wrap .header-menu-sns-list li {
display: inline-block;
vertical-align: top;
width: 7.6923076923vw;
margin-right: 5.8974358974vw; }
@media (min-width: 768px) {
.header-menu-list-wrap .header-menu-sns-list li {
width: 30px;
margin-right: 23px; } }
.header-menu-list-wrap .header-menu-sns-list li a {
display: block; }
.footer-push {
margin-top: 11.5384615385vw;
background-color: #FFFEDD;
padding: 6.9230769231vw 0; }
@media (min-width: 768px) {
.footer-push {
margin-top: 45px;
padding: 27px 0; } }
.footer-push a {
display: block;
width: 90%;
margin: 0 auto;
max-width: 720px; }
@media (min-width: 768px) {
.footer-push a {
width: 350px; } }
#footer {
background-color: #66B4EF; }
#footer .footer-wrap {
width: 90%;
margin: 0 auto;
max-width: 720px;
position: relative; }
#footer .footer-wrap .header-menu-global-list {
padding-top: 6.4102564103vw; }
@media (min-width: 768px) {
#footer .footer-wrap .header-menu-global-list {
padding-top: 25px; } }
#footer .footer-wrap .header-menu-global-list li a {
display: block;
box-sizing: border-box;
font-size: 4.1025641026vw;
line-height: 8.7179487179vw;
color: #FFFFFF;
font-weight: bold; }
@media (min-width: 768px) {
#footer .footer-wrap .header-menu-global-list li a {
font-size: 18px;
line-height: 50px; } }
#footer .footer-wrap .header-menu-global-list li a::before {
content: "> "; }
#footer .footer-wrap .footer-menu-sns-list {
margin-top: 5.1282051282vw;
display: block;
box-sizing: border-box;
text-align: right; }
@media (min-width: 768px) {
#footer .footer-wrap .footer-menu-sns-list {
margin-top: 20px; } }
#footer .footer-wrap .footer-menu-sns-list li {
display: inline-block;
vertical-align: top;
width: 7.6923076923vw;
margin-left: 5.8974358974vw; }
@media (min-width: 768px) {
#footer .footer-wrap .footer-menu-sns-list li {
width: 30px;
margin-left: 23px; } }
#footer .footer-wrap .footer-menu-sns-list li a {
display: block; }
#footer .copyright-box {
margin-top: 6.4102564103vw;
border-top: solid 1px #FFFFFF;
box-sizing: border-box;
padding: 5.1282051282vw 0; }
@media (min-width: 768px) {
#footer .copyright-box {
margin-top: 25px;
padding: 20px 0; } }
#footer .copyright-box .logo-box {
display: block;
margin: 0 auto;
width: 41.0256410256vw;
vertical-align: top;
line-height: 0; }
@media (min-width: 768px) {
#footer .copyright-box .logo-box {
width: 160px;
box-sizing: border-box; } }
#footer .copyright-box .copyright {
margin-top: 4.1025641026vw;
font-size: 2.3076923077vw;
text-align: center;
color: #FFFFFF;
white-space: nowrap; }
@media (min-width: 768px) {
#footer .copyright-box .copyright {
margin-top: 16px;
font-size: 9px; } }
#top-page .info-area {
background-color: #D7EFFC; }
#top-page .info-area .info-box {
width: 90%;
margin: 0 auto;
max-width: 720px;
box-sizing: border-box;
padding: 5.8974358974vw 0; }
@media (min-width: 768px) {
#top-page .info-area .info-box {
padding: 23px 0; } }
#top-page .info-area .info-box .head {
font-size: 4.6153846154vw;
text-align: center;
font-weight: normal; }
@media (min-width: 768px) {
#top-page .info-area .info-box .head {
font-size: 18px; } }
#top-page .info-area .info-box .info-list {
margin-top: 3.8461538462vw;
height: 31.7948717949vw;
overflow-y: scroll; }
@media (min-width: 768px) {
#top-page .info-area .info-box .info-list {
margin-top: 15px;
height: 124px; } }
#top-page .info-area .info-box .info-list li {
border-bottom: solid 1px #707070; }
#top-page .info-area .info-box .info-list li a {
display: block;
padding: 1.2820512821vw 0; }
#top-page .info-area .info-box .info-list li a::after {
clear: both;
content: "";
display: block; }
@media (min-width: 768px) {
#top-page .info-area .info-box .info-list li a {
padding: 5px 0; } }
#top-page .info-area .info-box .info-list li .date {
float: left;
width: 20%;
font-size: 3.0769230769vw;
line-height: 5.1282051282vw; }
@media (min-width: 768px) {
#top-page .info-area .info-box .info-list li .date {
width: 15%;
font-size: 12px;
line-height: 20px; } }
#top-page .info-area .info-box .info-list li .title {
float: left;
width: 80%;
box-sizing: border-box;
padding-left: 5%;
font-size: 3.0769230769vw;
line-height: 5.1282051282vw;
color: #0068B7;
font-weight: bold; }
@media (min-width: 768px) {
#top-page .info-area .info-box .info-list li .title {
width: 85%;
padding-left: 2%;
font-size: 12px;
line-height: 20px; } }
#top-page .top-main-area {
padding: 6.4102564103vw 0; }
@media (min-width: 768px) {
#top-page .top-main-area {
padding: 25px 0; } }
#top-page .top-main-map {
width: 100%;
padding-bottom: 3.8461538462vw; }
@media (min-width: 768px) {
#top-page .top-main-map {
max-width: 700px;
margin: 0 auto;
padding-bottom: 20px; } }
#top-page .btn-list-box {
padding: 4.358974359vw 0 6.1538461538vw; }
@media (min-width: 768px) {
#top-page .btn-list-box {
padding: 17px 0 24px; } }
#top-page .ranking-list-box {
padding: 4.8717948718vw 0 0; }
@media (min-width: 768px) {
#top-page .ranking-list-box {
padding: 19px 0 0; } }
#nearby .current-position {
font-size: 12px;
font-weight: bold;
text-align: center; }
#nearby .ranking-list-box {
padding-bottom: 11.5384615385vw; }
@media (min-width: 768px) {
#nearby .ranking-list-box {
padding-bottom: 45px; } }
#area .top-main-map {
width: 100%; }
@media (min-width: 768px) {
#area .top-main-map {
max-width: 700px;
margin: 0 auto; } }
#area .area-head {
padding: 5.1282051282vw 0;
font-size: 6.1538461538vw;
line-height: 8.2051282051vw;
text-align: center;
color: #0068B7;
font-weight: bold; }
@media (min-width: 768px) {
#area .area-head {
padding: 20px 0;
font-size: 24px;
line-height: 32px; } }
#area .area-text {
width: 90%;
margin: 0 auto;
max-width: 720px;
font-size: 4.1025641026vw;
line-height: 7.1794871795vw; }
@media (min-width: 768px) {
#area .area-text {
font-size: 16px;
line-height: 28px; } }
#area .show-this-area-box {
padding: 10.2564102564vw 0 6.1538461538vw;
text-align: center; }
@media (min-width: 768px) {
#area .show-this-area-box {
padding: 40px 0 24px; } }
#area .show-this-area-box .show-this-area {
cursor: pointer;
display: inline-block;
position: relative;
box-sizing: border-box;
font-size: 3.5897435897vw;
line-height: 4.6153846154vw;
padding-right: 2.8205128205vw;
color: #0068B7;
font-weight: bold; }
@media (min-width: 768px) {
#area .show-this-area-box .show-this-area {
padding-right: 11px;
font-size: 14px;
line-height: 18px; } }
#area .show-this-area-box .show-this-area:after {
position: absolute;
right: -4.6153846154vw;
width: 4.6153846154vw;
height: 4.6153846154vw;
background-image: url("/assets/images/common/icon-plus.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
#area .show-this-area-box .show-this-area:after {
right: -18px;
width: 18px;
height: 18px; } }
#area .show-this-area-box .show-this-area.selected:after {
background-image: url("/assets/images/common/icon-minus.png"); }
#area .how-to-go-area {
display: none;
background-color: #D7EFFC;
padding: 2.5641025641vw 0 7.6923076923vw; }
@media (min-width: 768px) {
#area .how-to-go-area {
padding: 10px 0 30px; } }
#area .how-to-go-area .area-head-1 {
padding: 3.5897435897vw 0;
font-size: 4.6153846154vw;
line-height: 7.6923076923vw;
text-align: center;
color: #0068B7;
font-weight: bold; }
@media (min-width: 768px) {
#area .how-to-go-area .area-head-1 {
padding: 14px 0;
font-size: 18px;
line-height: 30px; } }
#area .how-to-go-area .how-to-go-list-box {
margin: 0 auto;
width: 94%; }
@media (min-width: 768px) {
#area .how-to-go-area .how-to-go-list-box {
width: 80%; } }
#area .pick-up-shop-area {
background-color: #FFFEDD;
width: 90%;
margin: 0 auto;
max-width: 720px;
margin-top: 5.1282051282vw;
box-sizing: border-box;
padding: 0 6% 7.6923076923vw; }
@media (min-width: 768px) {
#area .pick-up-shop-area {
max-width: 480px;
margin-top: 20px;
padding: 0 6% 30px; } }
#area .pick-up-shop-area-btm {
margin-bottom: 8.9743589744vw; }
@media (min-width: 768px) {
#area .pick-up-shop-area-btm {
margin-bottom: 35px; } }
#route .youtube-area {
width: 82%;
margin: 0 auto; }
@media (min-width: 768px) {
#route .youtube-area {
max-width: 560px; } }
#route .youtube-area .youtube-box {
width: 100%;
position: relative;
height: 0;
padding-top: 56.25%;
overflow: hidden; }
#route .youtube-area .youtube-box iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
#route .back-link {
display: block;
text-align: center;
font-size: 3.5897435897vw;
line-height: 6.1538461538vw;
color: #66B4EF;
padding: 7.6923076923vw 0 15.3846153846vw; }
@media (min-width: 768px) {
#route .back-link {
font-size: 14px;
line-height: 24px;
padding: 30px 0 60px; } }
#how .youtube-area {
width: 82%;
margin: 7.6923076923vw auto; }
@media (min-width: 768px) {
#how .youtube-area {
max-width: 560px;
margin: 30px auto; } }
#how .youtube-area .youtube-box {
width: 100%;
position: relative;
height: 0;
padding-top: 56.25%;
overflow: hidden; }
#how .youtube-area .youtube-box iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
#how .how-content {
width: 90%;
margin: 0 auto;
max-width: 720px; }
#how .how-content .top-desc {
font-size: 4.1025641026vw;
line-height: 7.1794871795vw; }
@media (min-width: 768px) {
#how .how-content .top-desc {
font-size: 16px;
line-height: 28px; } }
#how .how-content .comment {
margin-top: 5.1282051282vw;
font-size: 3.5897435897vw;
line-height: 5.641025641vw; }
@media (min-width: 768px) {
#how .how-content .comment {
margin-top: 20px;
font-size: 14px;
line-height: 22px; } }
#how .how-content .one-line-comment {
padding: 5.1282051282vw 0;
font-size: 3.5897435897vw;
line-height: 5.641025641vw; }
@media (min-width: 768px) {
#how .how-content .one-line-comment {
padding: 20px 0;
font-size: 14px;
line-height: 22px; } }
#how .how-content .site-title {
margin-top: 10.2564102564vw;
font-size: 3.5897435897vw;
line-height: 1;
font-weight: bold;
text-align: center; }
@media (min-width: 768px) {
#how .how-content .site-title {
margin-top: 40px;
font-size: 14px; } }
#how .how-content .link-text {
display: block;
margin-top: 2.0512820513vw;
margin-bottom: 10.2564102564vw;
text-align: center;
font-size: 3.5897435897vw;
line-height: 6.1538461538vw;
color: #66B4EF; }
@media (min-width: 768px) {
#how .how-content .link-text {
margin-top: 8px;
margin-bottom: 40px;
font-size: 14px;
line-height: 24px; } }
#how .how-content .image-1 {
margin-top: 7.6923076923vw;
width: 100%; }
@media (min-width: 768px) {
#how .how-content .image-1 {
margin-top: 30px; } }
#how .how-content .desc {
margin-top: 5.1282051282vw;
font-size: 4.6153846154vw;
line-height: 6.6666666667vw; }
@media (min-width: 768px) {
#how .how-content .desc {
margin-top: 20px;
font-size: 18px;
line-height: 26px; } }
#how .how-content .desc span {
color: #E50112;
font-weight: bold; }
#how .how-content .image-2 {
margin: 7.6923076923vw auto 0;
width: 57%; }
@media (min-width: 768px) {
#how .how-content .image-2 {
margin-top: 30px;
max-width: 200px; } }
#how .how-content .back-link {
display: block;
text-align: center;
font-size: 3.5897435897vw;
line-height: 6.1538461538vw;
color: #66B4EF;
padding: 7.6923076923vw 0 15.3846153846vw; }
@media (min-width: 768px) {
#how .how-content .back-link {
font-size: 14px;
line-height: 24px;
padding: 30px 0 60px; } }
#souvenirs .top-main {
background-image: url("/assets/images/souvenirs/bg-tile.png");
background-repeat: repeat; }
#souvenirs .top-main h1 {
padding-top: 8.9743589744vw;
font-size: 5.1282051282vw;
line-height: 1;
text-align: center;
color: #B58D5E;
font-weight: bold; }
@media (min-width: 768px) {
#souvenirs .top-main h1 {
padding-top: 35px;
font-size: 20px; } }
#souvenirs .top-main .ribbon-box {
position: relative;
margin: 3.8461538462vw auto 0;
padding-bottom: 8.9743589744vw;
width: 91.2820512821vw;
height: 14.1025641026vw; }
@media (min-width: 768px) {
#souvenirs .top-main .ribbon-box {
margin-top: 15px;
padding-bottom: 35px;
width: 420px;
height: 55px; } }
#souvenirs .top-main .ribbon-box .ribbon {
position: relative; }
#souvenirs .top-main .ribbon-box .ribbon:before {
position: absolute;
top: 0;
left: 0;
width: 8.4615384615vw;
height: 13.8461538462vw;
background-image: url("/assets/images/souvenirs/ribbon-left.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
#souvenirs .top-main .ribbon-box .ribbon:before {
width: 33px;
height: 54px; } }
#souvenirs .top-main .ribbon-box .ribbon:after {
position: absolute;
top: 0;
right: 0;
width: 8.4615384615vw;
height: 13.8461538462vw;
background-image: url("/assets/images/souvenirs/ribbon-right.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
#souvenirs .top-main .ribbon-box .ribbon:after {
width: 33px;
height: 54px; } }
#souvenirs .top-main .ribbon-box p {
position: absolute;
top: 0;
left: 5.641025641vw;
right: 5.641025641vw;
height: 10.2564102564vw;
background-color: #ED6079;
text-align: center;
font-size: 4.1025641026vw;
line-height: 10.2564102564vw;
white-space: nowrap;
color: #FFFFFF;
font-weight: bold; }
@media (min-width: 768px) {
#souvenirs .top-main .ribbon-box p {
left: 22px;
right: 22px;
height: 40px;
font-size: 18px;
line-height: 40px; } }
#souvenirs .souvenirs-content {
width: 90%;
margin: 0 auto;
max-width: 720px;
padding: 7.6923076923vw 0 10.2564102564vw; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content {
padding: 30px 0 40px; } }
#souvenirs .souvenirs-content .top-desc {
font-size: 4.1025641026vw;
line-height: 7.1794871795vw; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .top-desc {
font-size: 16px;
line-height: 28px; } }
#souvenirs .souvenirs-content .souvenirs-list {
margin-top: 7.6923076923vw; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list {
margin-top: 30px; } }
#souvenirs .souvenirs-content .souvenirs-list > li {
position: relative;
background-color: #FFFEDD;
box-sizing: border-box;
padding: 5.1282051282vw;
border-radius: 2.0512820513vw;
margin-bottom: 5.1282051282vw; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list > li {
padding: 20px;
border-radius: 8px;
margin-bottom: 20px; } }
#souvenirs .souvenirs-content .souvenirs-list > li:last-child {
margin-bottom: 0; }
#souvenirs .souvenirs-content .souvenirs-list .top-box::after {
clear: both;
content: "";
display: block; }
#souvenirs .souvenirs-content .souvenirs-list .top-box .image-box {
float: left;
width: 38%;
padding-top: 33.25%;
background-position: center;
background-size: cover; }
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box {
float: right;
width: 58%; }
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .title {
background-color: #B58D5E;
box-sizing: border-box;
padding: 0 1.2820512821vw;
font-size: 4.1025641026vw;
line-height: 6.4102564103vw;
text-align: center;
color: #FFFFFF;
font-weight: bold; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .title {
padding: 0 5px;
font-size: 16px;
line-height: 25px; } }
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .price {
margin-top: 2.5641025641vw;
font-size: 3.5897435897vw;
line-height: 6.9230769231vw;
text-align: center;
font-weight: bold;
color: #707070; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .price {
margin-top: 10px;
font-size: 14px;
line-height: 27px; } }
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .shops {
margin-top: 2.0512820513vw;
display: block;
text-align: center; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .shops {
margin-top: 8px; } }
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .shops span {
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 2.5641025641vw;
font-size: 3.5897435897vw;
line-height: 4.6153846154vw;
color: #B58D5E;
font-weight: bold; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .shops span {
margin-left: 10px;
font-size: 14px;
line-height: 18px; } }
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .shops span:before {
position: absolute;
top: 0;
left: -2.5641025641vw;
width: 4.6153846154vw;
height: 4.6153846154vw;
background-image: url("/assets/images/common/icon-arrow-2.png");
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .shops span:before {
left: -10px;
width: 18px;
height: 18px; } }
#souvenirs .souvenirs-content .souvenirs-list .top-box .title-box .shops:hover {
opacity: 0.8; }
#souvenirs .souvenirs-content .souvenirs-list .btm-box {
float: left;
width: 100%;
margin-top: 4.1025641026vw;
font-size: 3.5897435897vw;
line-height: 6.6666666667vw;
color: #707070; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list .btm-box {
float: right;
width: 58%;
margin-top: 16px;
font-size: 14px;
line-height: 26px; } }
#souvenirs .souvenirs-content .souvenirs-list .ranking-badge {
position: absolute;
top: 1.2820512821vw;
left: 1.5384615385vw; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list .ranking-badge {
top: 5px;
left: 6px; } }
#souvenirs .souvenirs-content .souvenirs-list .ranking-badge.rank {
width: 10.5128205128vw;
height: 9.7435897436vw;
background-position: center;
background-size: cover;
content: ""; }
@media (min-width: 768px) {
#souvenirs .souvenirs-content .souvenirs-list .ranking-badge.rank {
width: 41px;
height: 38px; } }
#souvenirs .souvenirs-content .souvenirs-list .ranking-badge.rank-1 {
background-image: url("/assets/images/souvenirs/ranking1.png"); }
#souvenirs .souvenirs-content .souvenirs-list .ranking-badge.rank-2 {
background-image: url("/assets/images/souvenirs/ranking2.png"); }
#souvenirs .souvenirs-content .souvenirs-list .ranking-badge.rank-3 {
background-image: url("/assets/images/souvenirs/ranking3.png"); }
#souvenirs-modal {
display: none;
z-index: 21;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
padding-top: 15.3846153846vw;
overflow-y: scroll; }
@media (min-width: 768px) {
#souvenirs-modal {
padding-top: 40px; } }
#souvenirs-modal .souvenirs-modal-box {
position: relative;
background-color: #FFFFFF;
width: 90%;
margin: 0 auto;
max-width: 720px;
border-radius: 2.0512820513vw; }
@media (min-width: 768px) {
#souvenirs-modal .souvenirs-modal-box {
border-radius: 8px; } }
#souvenirs-modal .souvenirs-modal-box .souvenirs-modal-close-box {
position: absolute;
top: 3.8461538462vw;
right: 3.8461538462vw; }
@media (min-width: 768px) {
#souvenirs-modal .souvenirs-modal-box .souvenirs-modal-close-box {
top: 15px;
right: 15px; } }
#souvenirs-modal .souvenirs-modal-box .souvenirs-modal-close-box .souvenirs-modal-close {
cursor: pointer;
position: relative;
z-index: 9;
height: 30px;
width: 30px; }
#souvenirs-modal .souvenirs-modal-box .souvenirs-modal-close-box .souvenirs-modal-close span {
position: absolute;
top: 2.5641025641vw;
right: 0;
border: 0;
width: 7.6923076923vw;
height: 0.5128205128vw;
background: #B58D5E; }
@media (min-width: 768px) {
#souvenirs-modal .souvenirs-modal-box .souvenirs-modal-close-box .souvenirs-modal-close span {
top: 11px;
width: 30px;
height: 2px; } }
#souvenirs-modal .souvenirs-modal-box .souvenirs-modal-close-box .souvenirs-modal-close span:nth-of-type(1) {
border-top: none;
border-bottom: none;
transform: rotate(45deg); }
#souvenirs-modal .souvenirs-modal-box .souvenirs-modal-close-box .souvenirs-modal-close span:nth-of-type(2) {
border-top: none;
border-bottom: none;
transform: rotate(-45deg); }
#souvenirs-modal .souvenirs-modal-list {
box-sizing: border-box;
padding: 5.1282051282vw; }
@media (min-width: 768px) {
#souvenirs-modal .souvenirs-modal-list {
padding: 20px; } }
#souvenirs-modal .souvenirs-modal-list .shop-name {
font-size: 4.6153846154vw;
line-height: 7.1794871795vw;
color: #B58D5E;
text-align: center;
font-weight: bold; }
@media (min-width: 768px) {
#souvenirs-modal .souvenirs-modal-list .shop-name {
font-size: 18px;
line-height: 28px; } }
#souvenirs-modal .souvenirs-modal-list p {
margin-top: 4.1025641026vw;
margin-bottom: 4.1025641026vw;
font-size: 4.1025641026vw;
line-height: 7.1794871795vw;
text-align: center; }
@media (min-width: 768px) {
#souvenirs-modal .souvenirs-modal-list p {
margin-top: 16px;
margin-bottom: 16px;
font-size: 16px;
line-height: 28px; } }
#taxi .taxi-head {
padding: 5.1282051282vw 0;
font-size: 6.1538461538vw;
line-height: 8.2051282051vw;
text-align: center;
color: #0068B7;
font-weight: bold; }
@media (min-width: 768px) {
#taxi .taxi-head {
padding: 20px 0;
font-size: 24px;
line-height: 32px; } }
#taxi .taxi-text {
width: 90%;
margin: 0 auto;
max-width: 720px;
font-size: 4.1025641026vw;
line-height: 7.1794871795vw;
text-align: center; }
@media (min-width: 768px) {
#taxi .taxi-text {
font-size: 16px;
line-height: 28px; } }
#taxi .taxi-text .bold {
font-weight: bold; }
#taxi .taxi-image {
width: 90%;
margin: 0 auto;
max-width: 720px;
margin-top: 5.1282051282vw;
width: 80%; }
@media (min-width: 768px) {
#taxi .taxi-image {
margin-top: 40px; } }
#taxi .taxi-back-link {
width: 90%;
margin: 0 auto;
max-width: 720px;
margin-top: 10.2564102564vw;
text-align: center; }
@media (min-width: 768px) {
#taxi .taxi-back-link {
margin-top: 20px; } }
#taxi .taxi-back-link a {
font-size: 4.1025641026vw;
line-height: 7.1794871795vw; }
@media (min-width: 768px) {
#taxi .taxi-back-link a {
font-size: 16px;
line-height: 28px;
cursor: pointer; } }