/*#cont_sp { min-height: 100vh;}*/
.cont { display: none;}
/*.cont:first-child { display: block;}*/



/*_pager*/
#pager_sp { width: 90%; max-width: 400px; height: 32px; margin: 1.5em auto 2.5em auto; position: relative;}

#pg_back { width: 20px; height: 20px; position: absolute; top: 8px; left: 0;}
/*#pg_back a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0;}*/
.lnk_bk { width: 8px; height: 8px; border-top: 1.5px solid rgba(255, 255, 255, .5); border-left: 1.5px solid rgba(255, 255, 255, .5); transform: rotate(-45deg); position: absolute; top: 4px; left: 6px;}
.lnk_bk#bk_on { border-top: 1.5px solid rgba(255, 255, 255, 1); border-left: 1.5px solid rgba(255, 255, 255, 1); transform: rotate(-45deg);}
.lnk_bk#bk_on:hover { opacity: .7; cursor: pointer;}
/*#pg_back a .lnk_bk { width: 8px; height: 8px; border-top: 1.5px solid rgba(255, 255, 255, 1); border-left: 1.5px solid rgba(255, 255, 255, 1); transform: rotate(-45deg); position: absolute; top: 4px; left: 6px;}
#pg_back a:hover .lnk_bk { opacity: .7;}*/

#pg_next { width: 20px; height: 20px; position: absolute; top: 8px; right: 0;}
/*#pg_next a { width: 100%; height: 100%; display: block; position: absolute; top: 0; right: 0;}*/
.lnk_nx { width: 8px; height: 8px; border-top: 1.5px solid rgba(255, 255, 255, .5); border-right: 1.5px solid rgba(255, 255, 255, .5); transform: rotate(45deg); position: absolute; top: 4px; right: 6px;}
.lnk_nx#nx_on { border-top: 1.5px solid rgba(255, 255, 255, 1); border-right: 1.5px solid rgba(255, 255, 255, 1); transform: rotate(45deg);}
.lnk_nx#nx_on:hover { opacity: .7; cursor: pointer;}
/*#pg_next a .lnk_nx { width: 8px; height: 8px; border-top: 1.5px solid rgba(255, 255, 255, 1); border-right: 1.5px solid rgba(255, 255, 255, 1); transform: rotate(45deg); position: absolute; top: 4px; right: 6px;}
#pg_next a:hover .lnk_nx { opacity: .7;}*/

#pg_cnt { width: calc(100% - 60px); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%); display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; font-size: 110%;}
#pg_cnt .ptt { flex-basis: 14%; text-align: center;}
#pg_cnt .ptt .maru { width: 32px; height: 32px; margin: 0 auto; border-radius: 50px; position: relative; text-align: center;}
#pg_cnt .ptt .maru span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%); font-size: 85%;}
#pg_cnt .ptt .maru:hover { opacity: .8; cursor: pointer;}
#pg_cnt .ptt #maru_atv { background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 1);}
#pg_cnt .ptt #maru_atv:hover { opacity: 1; cursor: default;}

/*for_W768-*/
@media all and (min-width: 768px) {
#pager_sp { width: 90%; max-width: 500px; height: 36px; margin: 1em auto 4.5em auto; position: relative;}
#pg_back, #pg_next { width: 30px; height: 30px; position: absolute; top: 8px; right: 0;}
#pg_back .lnk_bk, #pg_back a .lnk_bk, #pg_next .lnk_nx, #pg_next a .lnk_nx { width: 10px; height: 10px;}
#pg_cnt { width: calc(100% - 70px); font-size: 130%;}
#pg_cnt .ptt .maru { width: 36px; height: 36px; border-radius: 50px; position: relative; text-align: center;}
}
/*for_W960-*/
@media all and (min-width: 960px) {
#pager_sp { width: 90%; max-width: 600px; height: 40px; margin: 1.5em auto 4em auto; position: relative;}
#pg_back, #pg_next { width: 32px; height: 32px; position: absolute; top: 10px; right: 0;}
#pg_back .lnk_bk, #pg_back a .lnk_bk, #pg_next .lnk_nx, #pg_next a .lnk_nx { width: 10px; height: 10px;}
#pg_cnt { width: calc(100% - 80px); font-size: 140%;}
#pg_cnt .ptt .maru { width: 40px; height: 40px; border-radius: 50px; position: relative; text-align: center;}
}
/*for_W1100-*/
@media all and (min-width: 1100px) {
#pager_sp { width: 90%; max-width: 650px; height: 42px; margin: 1.5em auto 5em auto; position: relative;}
#pg_back, #pg_next { width: 30px; height: 30px; position: absolute; top: 12px; right: 0;}
#pg_back .lnk_bk, #pg_back a .lnk_bk, #pg_next .lnk_nx, #pg_next a .lnk_nx { width: 10px; height: 10px;}
#pg_cnt { width: calc(100% - 80px); font-size: 180%;}
#pg_cnt .ptt .maru { width: 42px; height: 42px; border-radius: 50px; position: relative; text-align: center;}
}
/*for_W1280-*/
@media all and (min-width: 1280px) {
#pager_sp { width: 90%; max-width: 700px; height: 45px; margin: 1.5em auto 6em auto; position: relative;}
#pg_back, #pg_next { width: 32px; height: 32px; position: absolute; top: 12px; right: 0;}
#pg_back .lnk_bk, #pg_back a .lnk_bk, #pg_next .lnk_nx, #pg_next a .lnk_nx { width: 12px; height: 12px;}
#pg_cnt { width: calc(100% - 100px); font-size: 180%;}
#pg_cnt .ptt .maru { width: 45px; height: 45px; border-radius: 50px; position: relative; text-align: center;}
}