main {
letter-spacing: 0.1em;
}
.cm-wrap {
background: #fff;
}
.map-setsu {
font-size: 17px;
line-height: 1.8;
}
.map-setsu p {
margin-bottom: 32px;
}
.watch {
margin-bottom: 36px;
}
.watch-left {
border: 1px #dadbda solid;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 36px;
padding: 16px 0;
}
.watch-pic {
width: 80%;
}
.watch-pic img {
width: 100%;
height: auto;
margin-bottom: 16px;
background: linear-gradient(180deg, #fafafa 0%, #eeeeee 100%);
border: 1px solid #bababa;
border-radius: 4px;
}
.watch-guide {
width: 100%;
line-height: 1.7;
}
.map-data {
text-align: left;
margin-bottom: 36px;
line-height: 1.7;
}
.map-data-left {
display: flex;
flex-wrap: wrap;
border-top: 1px solid #dadbdc;
border-left: 1px solid #dadbdc;
line-height: 1.7;
}
.map-data-left div {
padding: 8px 4px;
border-right: 1px solid #dadbdc;
border-bottom: 1px solid #dadbdc;
width: 35%;
}
.map-data-left div:nth-of-type(2n) {
width: 65%;
padding-right: 4px;
}
.map-data-left a {
font-weight: bold;
display: inline-block;
margin-right: 12px;
}
.map-data-left span {
margin-right: 12px;
}
.coord a {
font-size: 14px;
}
.map-data-right {
background: #fcc;
height: 160px;
}
.distance {
letter-spacing: 0;
}
.rank {
margin-bottom: 32px;
}
.watch-right {
width: 100%;
margin-bottom: 36px;
}

.mappick {
display: flex;
gap: 4%;
margin-bottom: 32px;
}
.mappick-wrap {
width: 48%;
background: #fff;
}
.mappick-img {
width: 100%;
margin-bottom: 8px;
}
.mappick img {
width: 100%;
height: auto;
}
.mappick-setsu {
margin-bottom: 6px;
}
.mappick-site {
margin-bottom: 6px;
}
.mappick-place {
font-size: 14px;
letter-spacing: 1;
border: 1px solid #abacad;
display: inline-block;
padding: 6px;
border-radius: 2px;
}
.mappick-img img {
width: 100%;
background: linear-gradient(180deg, #fafafa 0%, #eeeeee 100%);
border: 1px solid #bababa;
border-radius: 4px;
}
.cm-wrap-side {
width: 100%;
background: #f5f5f5;
margin-bottom: 20px;
}
@media screen and (max-width: 520px) {


}
@media screen and (max-width: 1023px) and (min-width: 521px) {

.watch {
display: flex;
flex-wrap: wrap;
margin-bottom: 36px;
}
.watch-left {
width: 43%;
border: 1px #dadbda solid;
margin-right: 4%;
display: flex;
justify-content: center;
align-items: center;
}
.watch-pic {
width: 80%;
 }
.watch-pic img {
width: 100%;
margin-bottom: 8px;
background: linear-gradient(180deg, #fafafa 0%, #eeeeee 100%);
border: 1px solid #bababa;
border-radius: 4px;
}
.watch-guide {
width: 100%;
text-align: left;
line-height: 1.5;
}
.map-data {
display: flex;
flex-wrap: wrap;
width: 53%;
}
.map-data-left div {
width: 30%;
}

}
@media screen and (min-width: 1024px) {
.watch {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
}
.watch-left {
width: 43%;
border: 1px #bababa solid;
margin-right: 4%;
display: flex;
justify-content: center;
align-items: center;
background: #f5f9f5;
border-radius: 4px;
}
.watch-pic {
width: 80%;
}
.watch-pic img {
width: 100%;
margin-bottom: 8px;
background: linear-gradient(180deg, #fafafa 0%, #eeeeee 100%);
border: 1px solid #bababa;
border-radius: 4px;
}
.watch-guide {
width: 100%;
text-align: left;
line-height: 1.5;
}
.map-data {
width: 53%;
display: flex;
flex-wrap: wrap;
}
.map-data-left {
display: flex;
flex-wrap: wrap;
width: 100%;
border-top: 1px solid #dadbdc;
border-left: 1px solid #dadbdc;
line-height: 1.4;
}
.map-data-left div {
padding: 8px 4px;
border-right: 1px solid #dadbdc;
border-bottom: 1px solid #dadbdc;
width: 25%;
}
.map-data-left div:nth-of-type(2n) {
width: 75%;
padding-right: 4px;
}
.map-data-left a {
font-weight: bold;
display: inline-block;
margin-right: 12px;
}
.map-data-left span {
margin-right: 12px;
}
.map-data-left a:last-of-type, .map-data-left span:last-of-type {
margin-right: 0;
}
.watch-right {
width: 100%;
margin-bottom: 36px;
}
.rank {
margin-bottom: 40px;
}
.mappick {
display: block;
gap: 0;
}
.mappick-wrap {
width: 100%;
padding: 8px;
background: #fff;
margin-bottom: 20px;
border: 1px solid #a5a79a;
}
.mappick-img {
width: 100%;
margin-bottom: 8px;
}

.mappick-setsu {
line-height: 1.5;
margin-bottom: 6px;
}
.mappick-site {
line-height: 1.5;
margin-bottom: 6px;
}
.mappick-place {
font-size: 14px;
letter-spacing: 1;
border: 1px solid #abacad;
display: inline-block;
padding: 6px;
border-radius: 2px;
}
.mappick-img img {
width: 100%;
background: linear-gradient(180deg, #fafafa 0%, #eeeeee 100%);
border: 1px solid #bababa;
border-radius: 4px;
}

}