@charset "UTF-8";
@import "/css/style.css";

/* --------------------------------------------------
	カテゴリ
-------------------------------------------------- */

main ul.category { margin: 0 0 40px !important; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
main ul.category li { margin-bottom: 40px; width: 580px; }
main ul.category dl { display: flex; justify-content: space-between; }
main ul.category dt { width: 150px; flex-shrink: 0; }
main ul.category dt img { padding: 1px; width: 100%; height: auto; border: solid 1px #ccc; box-sizing: border-box; }
main ul.category dd { width: 410px; }
main ul.category dd strong { padding-left: 44px; height: 35px; font-size: 2rem; line-height: 35px; display: inline-block; }
main ul.category dd strong.category01 { background: url(../images/icon01.gif) 0 center no-repeat; color: #db5d23; }
main ul.category dd strong.category02 { background: url(../images/icon02.gif) 0 center no-repeat; color: #5350c5; }
main ul.category dd strong.category03 { background: url(../images/icon03.gif) 0 center no-repeat; color: #f2cd02; }
main ul.category dd strong.category04 { background: url(../images/icon04.gif) 0 center no-repeat; color: #3b7c2a; }
main ul.category dd p.category01all { display: none; }
main ul.category dd p.category02all { display: none; }
main ul.category dd p.category03all { display: none; }
main ul.category dd p.category04all { display: none; }

@media screen and (max-width: 767px) {
main ul.category { display: block; }
main ul.category li { margin-bottom: 20px; width: auto; }
main ul.category dl { justify-content: start; }
main ul.category dt { margin-right: 10px; }
main ul.category dd { width: auto; }
}

/* --------------------------------------------------
	スポット一覧
-------------------------------------------------- */

main ul.spot { margin: 0 0 30px !important; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; }
main ul.spot li { padding: 20px 0; width: 580px; border-bottom: dotted 1px #ccc; }
main ul.spot dl { display: flex; justify-content: space-between; }
main ul.spot dt { width: 160px; }
main ul.spot dt img { padding: 1px; width: 100%; height: auto; border: solid 1px #ccc; box-sizing: border-box; }
main ul.spot dt ul { margin: 10px 0 0; list-style: none; display: flex; justify-content: start; }
main ul.spot dt li { margin: 0 5px 0 0; padding: 0; width: auto; border-bottom: none; }
main ul.spot dt li img { padding: 0; border: none; }
main ul.spot dd { width: 400px; }
main ul.spot dd strong { font-size: 1.8rem; }
main div#googleMap { height: 400px; }

@media screen and (max-width: 767px) {
main ul.spot li { padding: 15px 10px; width: 100%; box-sizing: border-box; }
main ul.spot dl { display: block; }
main ul.spot dt { margin: 0 auto; width: 100%; max-width: 500px; }
main ul.spot dt img { max-width: 496px; height: auto; }
main ul.spot dt li img { width: auto; }
main ul.spot dd { width: auto; }
}

/* --------------------------------------------------
	スポット詳細
-------------------------------------------------- */

main div#experienceDetail div#detail01 { margin-bottom: 20px; }
main div#experienceDetail div#detail01 dl { display: flex; }
main div#experienceDetail div#detail01 dt { margin-right: 24px; width: 500px; flex-shrink: 0; }
main div#experienceDetail div#detail01 dt img { padding: 1px; width: 100%; height: auto; border: solid 1px #ccc; box-sizing: border-box; }
main div#experienceDetail div#detail01 dd {}
main div#experienceDetail div#detail01 dd address { padding: 12px 18px; background: #f6f6f6; font-style: normal; }
main div#experienceDetail div#detail02 { margin-bottom: 20px; }
main div#experienceDetail div#detail03 { margin-bottom: 40px; }
main div#experienceDetail div#detail03 ul { margin: 0 0 1em; list-style: none; display: flex; justify-content: space-between; }
main div#experienceDetail div#detail03 li { padding: 0 10px; width: 380px; }
main div#experienceDetail div#detail03 li img { padding: 1px; width: 100%; height: auto; border: solid 1px #ccc; box-sizing: border-box; }
main div#experienceDetail div#detail03 li p {}
main div#experienceDetail div#detail03 div.resume { padding: 18px 24px; background: #f6f6f6; }
main div#experienceDetail div#detail04 { margin-bottom: 40px; }

@media screen and (max-width: 767px) {
main div#experienceDetail div#detail01 dl { display: block; }
main div#experienceDetail div#detail01 dt { margin: 0 auto; width: 100%; max-width: 500px; }
main div#experienceDetail div#detail02 {}
main div#experienceDetail div#detail03 {}
main div#experienceDetail div#detail03 ul { display: block; }
main div#experienceDetail div#detail03 li { margin: 0 auto 30px; padding: 0; width: 100%; max-width: 380px; }
}