@charset "UTF-8";

div#pageTitle div { margin: 0 auto; padding: 50px 0; width: 1280px; background-image: url(../img/pictogram/ksupo/Cycling.png), url(../img/pictogram/ksupo/Equestrian.png), url(../img/pictogram/ksupo/Rifle.png), url(../img/pictogram/ksupo/Slalom.png); background-position: left 0 center, left 180px center, right 180px center, right 0 center; background-size: 240px auto, 240px auto, 220px auto, 240px auto; background-repeat: no-repeat; text-align: center; }
div#pageTitle h1 { padding: 0; background: none; }
div#pageTitle p { color: #fff; font-size: 1.8rem; }

@media screen and (max-width: 767px) {
div#pageTitle div { padding: 30px 0; width: auto; background-position: left -5% center, left 12% center, right 12% center, right -5% center; background-size: 120px auto, 120px auto, 100px auto, 120px auto; }
div#pageTitle h1 { padding: 0; }
div#pageTitle p {}
}


/* --------------------------------------------------
	トップ
-------------------------------------------------- */

#Main section { margin: 0 auto 80px; width: 1280px; }
#Main section div.title { margin-bottom: 70px; text-align: center; }
#Main section div.title h2 { font-size: 2.8rem; }
#Main section ul { margin: 0 auto 40px; width: 960px; border-top: solid 1px #000; list-style: none; }
#Main section li { padding: 12px 0; border-bottom: solid 1px #000; }
#Main section li dl { display: flex; }
#Main section li dt { padding: 0; width: 150px; border: 0; text-align: center; }
#Main section li dt::after { display: none; }
#Main section li dd { padding: 0; width: 810px; border: 0; }
#Main section li dd span.new { margin-left: 0.5em; padding: 0 10px; background: #e2100f; color: #fff; font-size: 1.2rem; display: inline-block; }
#Main section div.button { margin-bottom: 120px; text-align: center; }
#Main section div.button a { width: 125px; height: 30px; border: solid 1px #000; color: #000; font-size: 1.6rem; text-align: center; line-height: 28px; display: inline-block; }
#Main section div.button a:hover { background: #000; color: #fff; text-decoration: none; }
#Main section .more { margin-bottom: 50px; text-align: center; }
#Main section .more a { padding: 5px 20px; background: #000; border: solid 2px #000; color: #fff !important; display: inline-block; transition: all .3s ease; }
#Main section .more a:hover { background: #fff; color: #000 !important; text-decoration: none; }
#Main section div.sns { margin: 0 auto; width: 960px; display: flex; justify-content: space-between; }
#Main section div.sns dl { width: 290px; text-align: center; }
#Main section div.sns dt { margin-bottom: 50px; }
#Main section div.sns dd { height: 360px; overflow: auto; }
#Main section div.sns dd ul { margin: 0; width: auto; border-top: none; display: flex; flex-wrap: wrap; align-items: center; }
#Main section div.sns dd li { padding: 2px; width: 50%; border-bottom: none; box-sizing: border-box; }
#Main section div.sns dd li img { width: 100%; }
.no-data { text-align: center; }

@media screen and (max-width: 767px) {
#Main section { margin-bottom: 40px; width: auto; }
#Main section div.title { margin-bottom: 30px; }
#Main section ul { width: auto; }
#Main section li { padding: 12px 10px; }
#Main section li dl { display: block; }
#Main section li dt { width: auto; text-align: left; }
#Main section li dd { width: auto; }
#Main section div.button { margin-bottom: 40px; }
#Main section div.sns { width: auto; display: block; }
#Main section div.sns dl { margin: 0 auto 30px; }
#Main section div.sns dt { margin-bottom: 15px; }
}

/* --------------------------------------------------
	詳細
-------------------------------------------------- */

.blog-single h2 { margin: 1em 0 0.5em !important; padding: 0.5em; border-bottom: double 3px #111; font-size: 2.2rem !important; text-align: left !important; }
.blog-single p { margin: 1em 0; }
.blog-single ul, section#Main ol { margin: 1em 0 1em 1.5em; }
.blog-single table { width: 100%; border-collapse: collapse; }
.blog-single th { padding: 20px; background: #f4f4f4; border: solid 1px #ccc; }
.blog-single td { padding: 20px; border: solid 1px #ccc; }
.blog-single .post-navi { text-align: center; }

@media screen and (max-width: 767px) {
.blog-single h2 { font-size: 2rem !important; }
}