@charset "UTF-8";

main div#title { background: url(../img/sightseeing/main.jpg); }
div#contents div.title { margin-bottom: 40px; text-align: center; }
div#contents div.title img { width: 100%; max-width: 820px; }
div#contents dl { margin-bottom: 32px; display: flex; }
div#contents dt {}
div#contents dd { padding-left: 32px; }
div#contents dd ul { margin: 1em 0 1em 1.5em; }
div#contents div.spot {}
div#contents div.spot ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
div#contents div.spot ul::after { content: ''; width: 320px; display: block; }
div#contents div.spot li { margin-bottom: 24px; padding: 20px; width: 280px; border: solid 1px #ccc; display: flex; flex-direction: column; }
div#contents div.spot li img { display: block; }
div#contents div.spot li strong { margin: 12px 0 4px; font-size: 1.7rem; text-align: center; display: block; }
div#contents div.spot li p { margin-bottom: 8px; }
div#contents div.spot li a { margin-top: auto; padding: 4px; background: #2762b6; border: solid 1px #2762b6; color: #fff; text-align: center; display: block; transition: all 0.25s; }
div#contents div.spot li a:hover { background: #fff; color: #2762b6; text-decoration: none; }

@media screen and (max-width: 767px) {
div#contents p img { max-width: 100%; }
div#contents dl { display: block; }
div#contents dt { text-align: center; }
div#contents dd { padding-left: 0; }
div#contents div.spot ul { margin: 0; display: block; }
div#contents div.spot li { width: auto; }
div#contents div.spot li img { margin: 0 auto; }
}