header.area-detail-header{border-bottom: 3px solid #AF0016;min-height: 60px;}
.sp{display: none;}
main.area-top{padding: 0 10px;}

section.prefecture-map-content{max-width: 1200px; margin: 50px auto 200px;}
.area-top-title{text-align: center; font-family: serif;color: #AF0016;}
section.prefecture-map-content .prefecture-map{width: 525px;margin: 50px auto;text-align: center;position: relative;}
section.prefecture-map-content .prefecture-map img.map-img{width: 100%;}
section.prefecture-map-content .circle{background-color: #f8999e; width: 40px;height: 40px;border-radius: 30px;opacity: 0.5;position: absolute;transform: translate(-50%,-50%);}
section.prefecture-map-content .circle:hover{background-color: #777;}
section.prefecture-map-content .detail{width: 300px;position: absolute;}
section.prefecture-map-content .detail:hover{transform: translateY(-1px);box-shadow:6px 6px 6px 0px rgba(0, 0, 0, 0.45);transition: 0.2s; }
section.prefecture-map-content .detail ul{padding: 10px; list-style: inside;font-size: 15px; border: solid 1px #777; border-top: unset;margin: 0;background-color: #fff;}
section.prefecture-map-content .detail p.detail-title{text-align: center;color: #fff;background-color: #AF0016;padding: 6px 0;margin: 0;border: solid 1px #999;}
section.prefecture-map-content .detail p.textarea{background-color: #fff;border: solid 1px #999;padding: 10px;margin: 0;font-size: 14px;}
section.prefecture-map-content svg g{ fill: rgb(238, 119, 119,0.5); stroke: rgb(238, 119, 119,0.5); stroke-width: 1;}
section.prefecture-map-content svg{height: 100%; width: 100%;position: absolute;}
section.prefecture-map-content a.area-detail-box{color: #444;text-decoration: none;}

.top-left{top:0;left:7%;}
.center-left{top:35%;left: 7%;}
.bottom-left{top:65%;left:7%;}
.top-right{top:0;right:7%;}
.center-right{top:35%;right: 7%;}
.bottom-right{top:65%;right:7%;}

section.area-detail-content{padding: 0; margin: 100px auto; max-width: 1200px; width: 85%;}
section.area-detail-content .detail-img{display: flex; justify-content: center; width: 100%;height: 250px;}
section.area-detail-content .detail-img img{width: 25%;object-fit: cover;}
section.area-detail-content .recommended-points{display: flex; justify-content: left;flex-wrap: wrap;}
section.area-detail-content .recommended-points a{text-decoration: none;}
section.area-detail-content .recommended-points a p{color: #333;}
section.area-detail-content .recommended-points a > div{height: 110px;position: relative;}
section.area-detail-content .recommended-points .recommended-point{width: 33%;padding: 10px;box-sizing: border-box;}
section.area-detail-content .recommended-points .recommended-point-title{color: #AF0016;text-align: center;border-bottom: 2px solid #AF0016;}
section.area-detail-content  h3.recommended-title{text-align: center;background-color: #AF0016;color: #fff;font-weight: 100;padding: 10px 0;}
section.area-detail-content .recommended-points a p.view-detail{font-size: 14px; color: #444; text-align: right;margin-right: 10px;margin: 0;position: absolute;bottom: 0;right: 0;}
section.area-detail-content .recommended-points a p.view-detail::after{content: "";border-top: 1px #444 solid;border-right: 1px #444 solid;width: 5px;height: 5px;display: inline-block;transform: rotate(45deg);margin: 2px;}
section.area-detail-content .recommended-restaurants ,section.area-detail-content .recommended-restaurants {margin: 100px 0;}
section.area-detail-content .recommended-points ul{padding: 0 5px; list-style: inside;}
section.area-detail-content .recommended-points ul li:not(:last-child){margin-bottom: 15px;}
section.area-detail-content .recommended-restaurants ul{display: flex;justify-content: center;padding: 0;}
section.area-detail-content .recommended-restaurants ul li {width: 50%;margin: 5px; background-color: #f6f5f4;display: flex;align-items: center;}
section.area-detail-content .recommended-restaurants ul li a{text-decoration: none;color: #444;display: flex;width: 100%;}
section.area-detail-content .recommended-restaurants ul li a i {width: 40%;display: flex; align-items: center;}
section.area-detail-content .recommended-restaurants ul li a i img{width: 100%}
section.area-detail-content .recommended-restaurants ul li a .restaurants-text{padding: 5px;width: 60%;}
section.area-detail-content .recommended-restaurants ul li a .restaurants-text dl{margin: 5px 0 0 0;}
section.area-detail-content .recommended-restaurants ul li a .restaurants-text dl div{display: flex;}
section.area-detail-content .recommended-restaurants ul li a .restaurants-text dl div dt{width: 25%;}
section.area-detail-content .recommended-restaurants ul li a .restaurants-text dl div dd{width: 75%;margin-left: 10px;}
section.area-detail-content .recommended-hotels ul{justify-content: center;}
section.area-detail-content .recommended-hotels ul li{width: 24%; margin: 5px;background-color: #f6f5f4;}
section.area-detail-content .recommended-hotels ul li a{color: #444; text-decoration: none;}
section.area-detail-content .recommended-hotels ul li dd{margin: 0;padding: 10px; }
section.area-detail-content .recommended-hotels ul li dd b em{display: block;font-weight: 400;font-size: 13px;}
section.area-detail-content .recommended-hotels ul li a.map-button{font-size: 12px;display: block;height: 24px;line-height: 25px;background: #ff7d73;color: #fff;font-weight: 600;cursor: pointer;padding: 0 12px !important;}
section.area-detail-content .recommended-hotels ul li .price-map{display: flex;flex-grow: 1;flex-flow: inherit;justify-content: end;}
section.area-detail-content .recommended-hotels ul li a dl dt i {background-repeat: no-repeat;background-position: 50%;height: 180px;width: auto;background-size: cover;}
.sp-point{display: none;}
.pc-point{display: block;}
.pc-line{display: block;}
.sp-line{display: none;}
@media screen and (max-width:1195px){
    section.area-detail-content .recommended-restaurants ul{flex-flow: column;}
    section.area-detail-content .recommended-restaurants ul li{width: 100%; margin:10px auto;}
    section.area-detail-content .recommended-restaurants ul li a i {width: 30%;}
    section.area-detail-content .recommended-hotels ul li{width: 23%;}
}
@media screen and (max-width:1024px){
    section.prefecture-map-content .detail p.textarea {font-size: 12px;}
    .top-left{top:0;left:3%;}
    .center-left{top:35%;left: 3%;}
    .bottom-left{top:65%; left:3%;}
    .top-right{top:0;right: 3%;}
    .center-right{top:35%;right: 3%;}
    .bottom-right{top:65%;right:3%;}
    section.prefecture-map-content .prefecture-map {width: 330px;}
    .sp-point{display: block;}
    .pc-point{display: none;}
    .pc-line{display: none;}
    .sp-line{display: block;}
}
@media screen and (max-width:1000px){
    .detail-title{font-size: 12px;}
    section.area-detail-content .recommended-hotels ul li{width: 48%;}
    .top-left{top:0;left:0;width: 230px !important;}
    .center-left{top:40%;left: 0;width: 230px !important;}
    .bottom-left{top:76%;left:0;width: 230px !important;}
    .top-right{top:0;right:0;width: 230px !important;}
    .center-right{top:40%;right: 0;width: 230px !important;}
    .bottom-right{top:76%;right:0;width: 230px !important;}
}
@media screen and (max-width:769px){
    .pc{display: none;}
    .sp{display: block;}
    .sp-line{display: none;}
    section.prefecture-map-content .prefecture-map {margin: 30px auto;}
    section.prefecture-map-content .detail {width: 95% !important;position: unset;padding: 10px 10px;}
    section.prefecture-map-content .detail:hover{transform: unset;box-shadow:unset;}

    section.area-detail-content{width: 95%; margin: 50px auto;}
    section.area-detail-content .recommended-points{flex-flow: column;}
    section.area-detail-content .recommended-points .recommended-point { width: 100%; margin: 10px auto;padding: 0;}
    section.area-detail-content .detail-img{height: 100px;}
    section.area-detail-content .recommended-hotels ul li{width: 100%; margin: 10px auto;}
}