@charset "UTF-8";
/* ==================================================================================================== レイアウト
==================================================================================================== */
body { background: url("../img/spots/main_bg001.png") no-repeat center top; }
@media screen and (max-width: 750px) { body { background: url("../img/common/sp/main_bg001.png") no-repeat center top; background-size: contain; } }

.maintitle-sec { margin-bottom: 60px; }
@media screen and (max-width: 750px) { .maintitle-sec { margin-bottom: 6.6666666667%; } }
@media screen and (max-width: 750px) { .maintitle-sec p { margin-top: 30.6666666667%; } }

.contents { background: url("../img/spots/main_bg002.png") no-repeat left top 340px; }
@media screen and (max-width: 750px) { .contents { background: none; } }

/* ==================================================================================================== コンテンツ
==================================================================================================== */
.spots-map { margin-bottom: 115px; text-align: center; }
@media screen and (max-width: 750px) { .spots-map { margin-bottom: 8%; } }
.spots-map .inner { position: relative; }
.spots-map .spots-heding { position: absolute; bottom: 85px; right: 60px; width: 20.8333333333%; }

.spots-list { margin-bottom: 135px; }
.spots-list .spots-list-top { display: none; }
@media screen and (max-width: 750px) { .spots-list .spots-list-top { display: block; margin-bottom: 13.3333333333%; padding: 8% 2.6666666667%; background: url("../img/spots/sp/top_bg001.png"); font-size: 1.7222222222rem; font-weight: 700; color: #0184cc; text-align: center; } }
.spots-list .spots-list-top p:first-child { margin-bottom: 10px; }
.spots-list .spots-box { position: relative; display: flex; align-items: center; justify-content: space-between; }
@media screen and (max-width: 750px) { .spots-list .spots-box { display: block; margin-bottom: 12%; padding-bottom: 12%; border-bottom: 1px solid #c8c8c8; } }
.spots-list .spots-box .box-fig { width: 50%; }
@media screen and (max-width: 750px) { .spots-list .spots-box .box-fig { width: 100%; } }
.spots-list .spots-box .box-item { position: relative; z-index: 1; width: 50%; }
@media screen and (max-width: 750px) { .spots-list .spots-box .box-item { width: 100%; } }
.spots-list .spots-box .box-item-top { display: flex; border-bottom: 1px solid #0096e5; }
@media screen and (max-width: 750px) { .spots-list .spots-box .box-item-top { margin-bottom: 5.3333333333%; border-bottom: none; } }
.spots-list .spots-box .box-item-top .box-item-top-in { display: flex; align-items: center; width: 100%; max-width: 470px; padding-bottom: 20px; }
@media screen and (max-width: 750px) { .spots-list .spots-box .box-item-top .box-item-top-in { max-width: initial; padding-bottom: 0; } }
.spots-list .spots-box .box-item-top p { margin-right: 15px; }
.spots-list .spots-box .box-item-top .item-heading { font-size: 1.3333333333rem; font-weight: 500; }
.spots-list .spots-box .box-item-top .item-heading small { font-size: 0.8333333333rem; }
.spots-list .spots-box .box-item-con { display: flex; }
@media screen and (max-width: 750px) { .spots-list .spots-box .box-item-con { display: block; } }
.spots-list .spots-box .box-item-con .box-item-con-in { width: 100%; max-width: 470px; margin-top: 30px; padding-left: 10px; font-size: 0.8888888889rem; line-height: 1.8; }
@media screen and (max-width: 750px) { .spots-list .spots-box .box-item-con .box-item-con-in { max-width: initial; margin-top: 0; margin-right: 0; padding: 6.6666666667% 2.6666666667% 0; } }
.spots-list .spots-box .box-item-con span, .spots-list .spots-box .box-item-con a { color: #2878ff; }
.spots-list .spots-box.odd .box-item-top { padding-left: 50px; padding-right: 20px; }
@media screen and (max-width: 750px) { .spots-list .spots-box.odd .box-item-top { padding-left: 2.6666666667%; padding-right: 0; } }
.spots-list .spots-box.odd .box-fig img { border-bottom-right-radius: 30px; }
@media screen and (max-width: 750px) { .spots-list .spots-box.odd .box-fig { padding-right: 2.6666666667%; } }
.spots-list .spots-box.odd .box-item-con { padding-left: 50px; padding-right: 20px; }
@media screen and (max-width: 750px) { .spots-list .spots-box.odd .box-item-con { padding-left: 0; padding-right: 0; } }
.spots-list .spots-box.even { flex-direction: row-reverse; }
.spots-list .spots-box.even .box-item-top { justify-content: flex-end; padding-left: 20px; padding-right: 50px; }
@media screen and (max-width: 750px) { .spots-list .spots-box.even .box-item-top { padding-left: 2.6666666667%; padding-right: 0; } }
@media screen and (max-width: 750px) { .spots-list .spots-box.even .box-fig { padding-left: 2.6666666667%; } }
.spots-list .spots-box.even .box-fig img { border-bottom-left-radius: 30px; }
.spots-list .spots-box.even .box-item-con { justify-content: flex-end; padding-left: 20px; padding-right: 50px; }
@media screen and (max-width: 750px) { .spots-list .spots-box.even .box-item-con { padding-left: 0; padding-right: 0; } }
.spots-list .spots01::before, .spots-list .spots02::before, .spots-list .spots03::before, .spots-list .spots06::before, .spots-list .spots07::before, .spots-list .spots09::before, .spots-list .spots12::before, .spots-list .spots15::before { content: ''; position: absolute; display: block; background-repeat: no-repeat; background-position: center bottom; background-size: contain; }
@media screen and (max-width: 750px) { .spots-list .spots01::before, .spots-list .spots02::before, .spots-list .spots03::before, .spots-list .spots06::before, .spots-list .spots07::before, .spots-list .spots09::before, .spots-list .spots12::before, .spots-list .spots15::before { display: none; } }
.spots-list .spots01::before { right: 0; bottom: 0; width: 178px; height: 179px; margin: 0 3.5714285714% 1.5714285714% 0; background-image: url("../img/spots/main_bg003.png"); }
@media screen and (max-width: 1400px) { .spots-list .spots01::before { width: 12.7142857143%; } }
.spots-list .spots02::before { left: 0; bottom: 0; width: 170px; height: 153px; margin: 0 0 2.8571428571% 1.6428571429%; background-image: url("../img/spots/main_bg004.png"); }
@media screen and (max-width: 1400px) { .spots-list .spots02::before { width: 12.1428571429%; } }
.spots-list .spots03::before { right: 0; bottom: 0; width: 109px; height: 110px; margin: 0 9% 1.0714285714% 0; background-image: url("../img/spots/main_bg005.png"); }
@media screen and (max-width: 1400px) { .spots-list .spots03::before { width: 7.7857142857%; } }
.spots-list .spots06::before { left: 0; bottom: 0; width: 170px; height: 153px; margin: 0 0 10.7142857143% 0; background-image: url("../img/spots/main_bg006.png"); }
@media screen and (max-width: 1400px) { .spots-list .spots06::before { width: 12.1428571429%; } }
.spots-list .spots07::before { right: 0; bottom: 0; z-index: 2; width: 146px; height: 145px; margin: 0 3.9285714286% -4.4285714286% 0; background-image: url("../img/spots/main_bg007.png"); }
@media screen and (max-width: 1400px) { .spots-list .spots07::before { width: 10.4285714286%; } }
.spots-list .spots09::before { right: 0; bottom: 0; width: 178px; height: 179px; margin: 0 4.2857142857% 3.2857142857% 0; background-image: url("../img/spots/main_bg008.png"); }
@media screen and (max-width: 1400px) { .spots-list .spots09::before { width: 12.7142857143%; } }
.spots-list .spots12::before { left: 0; bottom: 0; width: 159px; height: 135px; margin: 0 0 6% -1.8571428571%; background-image: url("../img/spots/main_bg009.png"); }
@media screen and (max-width: 1400px) { .spots-list .spots12::before { width: 11.3571428571%; } }
.spots-list .spots15::before { right: 0; bottom: 0; width: 143px; height: 145px; margin: 0 13.5714285714% -3.3571428571% 0; background-image: url("../img/spots/main_bg010.png"); }
@media screen and (max-width: 1400px) { .spots-list .spots15::before { width: 10.2142857143%; } }

/*# sourceMappingURL=spots.css.map */