@media screen and (max-width: 520px) {
.top {
position: relative;
top: 0;
left: 0;
margin-left: auto;
margin-right: auto;
height: 70px;
border-bottom: 1px #a5a79a solid;
background: #eee;
width: 100%;
}
.site-name {
display: inline;
position: relative;
background: #fcc;
margin: 0;
padding: 0;
height: 70px;
}
.site-logo {
padding-left: 32px;
height: 70px;
background-image: url('/assets/img/logo.svg');
background-size: 28px 28px;
background-repeat: no-repeat;
background-position: 0px 21px;
margin: 0 3% 0;
}
.site-name img {
margin-top: 19px;
height: 45%;
max-width: 82%;
}
.glass-button {
position: absolute;
top: 9px;
right: 6px;
height: 58%;
display: inline;
margin-right: 3%;
}
.glass-button img {
margin-top: 12px;
height: 68%;
}
.main-contents {
margin-top: 32px;
text-align: left;
}
.content-pick {
display: flex;
flex-wrap: wrap;
margin-bottom: 40px;
width: 100%;
}
.cl2 {
width: 48%;
margin-right: 4%;
margin-bottom: 16px;
}
.cl2:nth-child(2n) {
margin-right: 0;
}
.cl2-left {
margin-bottom: 12px;
}
.cl2 img {
width: 100%;
background: linear-gradient(180deg, #fafafa 0%, #eeeeee 100%);
border: 1px solid #bababa;
border-radius: 4px;
}
.cl2-setsu {
margin-bottom: 8px;
line-height: 1.5;
}
.cl2-setsu a {
font-weight: bold;
}
.cl2-site {
margin-bottom: 8px;
line-height: 1.5;
}
.cl2-place {
font-size: 14px;
letter-spacing: 1;
border: 1px solid #abacad;
display: inline-block;
padding: 5px;
border-radius: 2px;
}
.hanabi-container {
margin-top: 20px;
margin-bottom: 40px;
}
.hanabi-form {
text-align:center;
width: 100%;
}
.hanabi-btn {
display: block;
  width: 100%;
font-size: 16px;
color: #fff;
padding: 10px 20px;
text-align: center;
background: #4b8954;
border: 0;
border-radius: 4px;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.hanabi-btn:hover {
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.25);
}

.hanabi-btn:active {
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
transform: translateY(2px);
}
.pick-chui {
font-size: 14px;
text-align: right;
width: 100%;
display: block;
margin-bottom: 40px;
}
.content-pref {
margin-bottom: 40px;
}
.content-pref ul {
display: flex;
flex-wrap: wrap;
justify-content:flex-start;
margin-bottom: 16px; 
}
.content-pref li {
text-align: center;
width: 23.5%;
background: #fff;
margin-bottom:8px;
border: 1px #ccc solid;
border-radius: 2px;
position: relative;
margin-right: 2%;
}
.content-pref li:first-child {
width: 100%;
background: #666;
color: #fff;
padding: 4px 0;
border-radius: 2px;
margin-bottom: 12px;
}
.content-pref li:nth-of-type(4n+1) {
margin-right: 0;
}
.content-pref li a {
display: block;
width: 100%;
height: 100%;
padding: 6px 4px;
}
.content-category {
text-align: left;
margin-bottom: 29px;
}
.content-category ul {
display: flex;
flex-wrap: wrap;
width:100%;

}
.content-category li {
text-align: center;
width: 32%;
background: #fff;
margin-right: 2%;
margin-bottom: 16px;
}
.content-category li a {
display: block;
width: 100%;
height: 100%;
color: #333;
}
.content-category img {
width: 100%;
margin: 0 auto 8px;
display: block;
}
.content-category li:nth-of-type(3n) {
margin-right: 0;
}
.rank-time {
width: 100%;
text-align: right;
margin-right: 8px;
}
.gorank {
width: 100%;
text-align: center;
margin: 24px auto 12px;
background: #dedede;
border: 1px #ccc solid;
border-radius: 3px;
position: relative;
}
.gorank a {
padding: 12px 0;
display: block;
width: 100%;
height: 100%;
}
.gorank::before {
content: "";
width: 12px;
height: 12px;
border-top: solid 1px #333;
border-right: solid 1px #333;
transform: rotate(45deg);
position: absolute;
display: block; 
top: 14px;
right: 12px;
}
.rank-stop {
margin: 0 0 32px 0;
padding: 16px 0;
text-align: center;
width: 100%;
border: 1px #a5a79a solid;
border-radius: 2px;
}
.content6-wrap {
position: relative;
padding-top: 12px;
border: 0;
}
.content6-update {
font-size: 15px;
}
.new-place {
font-size: 14px;
letter-spacing: 1;
border: 1px solid #abacad;
display: inline-block;
padding: 5px;
border-radius: 2px;
}
footer {
width: 100%;
background-color: #333;
padding: 0px 3% 0;
color: #fff;
}
footer a {
color: #fff;
}
footer ul {
position: relative;
padding:16px 0;
display: flex;
flex-wrap: wrap;
line-height: 2.3;
}
footer li {
margin-right:20px;
}
footer li:last-of-type {
margin-right: 0;
}
}
@media screen and (max-width: 1023px) and (min-width: 521px) {
.top {
position: relative;
top: 0;
left: 0;
margin-left: auto;
margin-right: auto;
height: 70px;
border-bottom: 1px #a5a79a solid;
background: #eee;
width: 100%;
}
.site-name {
display: inline;
position: relative;
background: #fcc;
margin: 0;
padding: 0;
height: 70px;
}
.site-logo {
padding-left: 32px;
height: 70px;
background-image: url('/assets/img/logo.svg');
background-size: 28px 28px;
background-repeat: no-repeat;
background-position: 0px 21px;
margin: 0 3% 0;
}
.site-name img {
margin-top: 20px;
height: 45%;
max-width: 82%;
}
.glass-button {
position: absolute;
top: 8px;
right: 12px;
height: 58%;
display: inline;
margin-right: 3%;
}
.glass-button img {
margin-top: 12px;
height: 68%;
}
.main-contents {
margin-top: 40px;
}
.content-pick {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 52px;
}
.cl2 {
width: 32%;
margin-right: 2%;
margin-bottom: 20px;
}
.cl2:nth-of-type(3n) {
margin-right: 0;
}
.cl2-left {
padding: 0;
margin-bottom: 13px;
}
.cl2 img {
width: 100%;
height: auto;
background: linear-gradient(180deg, #fafafa 0%, #eeeeee 100%);
border: 1px solid #bababa;
border-radius: 4px;
}
.cl2-right {
margin: 0 auto;
}
.cl2-setsu {
margin-bottom: 6px;
line-height: 1.5;
}
.cl2-setsu a {
font-weight: bold;
}
.cl2-site {
margin-bottom: 8px;
line-height: 1.5;
}
.cl2-place {
font-size: 14px;
letter-spacing: 1;
border: 1px solid #abacad;
display: inline-block;
padding: 6px;
border-radius: 2px;
}
.hanabi-container {
margin-top: 20px;
margin-bottom: 40px;
}
.hanabi-form {
text-align:center;
}
.hanabi-btn {
width: 100%;
font-size: 18px;
color: #fff;
letter-spacing: 2px;
padding: 10px 0;
text-align: center;
background: #4b8954;
border: 0;
border-radius: 4px;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.hanabi-btn:hover {
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.25);
}

.hanabi-btn:active {
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
transform: translateY(2px);
}
.pick-chui {
text-align: right;
line-height: 1;
margin-bottom: 56px;
width: 100%;
}
.content-pref {
margin-bottom: 52px;
position: relative;
height: 580px;
width: 100%;
background-image: url('/assets/img/map_japan.svg');
background-size: 87% 78%;
background-repeat: no-repeat;
background-position: 46% 15%;
}
.content-pref ul {
position: absolute;
width:23%;
display: flex;
flex-wrap: wrap;
}
.content-pref li:first-child {
width: 100%;
background: #666;
color: #fff;
padding: 7px 0;
}
.content-pref li {
text-align: center;
width: 49%;
margin-bottom:4px;
border: 1px #ccc solid;
border-radius: 2px;
position: relative;
}
.content-pref li a {
display: block;
width: 100%;
height: 100%;
padding: 8px 0;
}
.content-pref li a:hover {
background: #dedede;
}
.hokkaido-tohoku {top: 2%;left: 76%;}.hokkaido {margin-right: 2%;order: 1;}.aomori {order: 2;}.akita {margin-right: 2%;order: 3;}.iwate {order: 4;margin-right: 0;}.yamagata {margin-right: 2%;order: 5;}.miyagi {order: 6;}.fukushima {order: 7;}.kanto {top: 36%;left: 76%;}.tochigi {order: 1;margin-right: 2%;}.ibaraki {order: 2;}.gunma {order: 3;margin-right: 2%;}.saitama {order: 4;}.tokyo {order: 5;margin-right: 2%;
}.chiba {order: 6;}.kanagawa {order: 7;}.koushin {top: 15%;left: 28%;}.toyama{order: 1;margin-right: 2%;}.niigata{order: 2;}.ishikawa{order: 3;margin-right: 2%;}.nagano {order: 4;}.fukui{order: 5;margin-right: 2%;}.yamanashi{order: 6;}.tokai {top:70%;left: 76%;}.mie{order: 1;margin-right: 2%;}.gifu {order: 2;}.aichi {order: 3;margin-right: 2%;}.shizuoka {order: 4;}.kinki {top: 70%;left: 51%;}.kyoto {order: 1;margin-right: 2%;}.shiga {order: 2;}.osaka {order: 3;margin-right: 2%;}.nara {order: 4;}.hyogo {
order: 5;margin-right: 2%;}.wakayama {order: 6;}.chugoku {top: 25%;left: 3%;}.shimane{order: 1;margin-right: 2%;}.tottori {order: 2;}.hiroshima {order: 3;margin-right: 2%;}.okayama {order: 4;}.yamaguchi{order: 5;}.shikoku {top: 79%;left: 26%;}.kagawa{order: 1;margin-right: 2%;}.tokushima{order: 2;}.ehime {order: 3;margin-right: 2%;}.kochi {order: 4;}.kyushu {top:53%;left: 1%;}.saga {
order: 1;margin-right: 2%;}.fukuoka {order: 2;}.nagasaki {order: 3;margin-right: 2%;}.oita {order: 4;}.kumamoto{order: 5;margin-right: 2%;}.miyazaki{order: 6;}.okinawa{order: 7;margin-right: 2%;}.kagoshima {order: 8;}
.content-category {
text-align: left;
margin-bottom: 36px;
}
.content-category ul {
display: flex;
flex-wrap: wrap;
width:100%;
}
.content-category li {
text-align: center;
width: 23.5%;
background: #fff;
margin-right: 2%;
margin-bottom: 16px;
}
.content-category li a {
display: block;
width: 100%;
height: 100%;
color: #333;
}
.content-category img {
width: 100%;
margin: 0 auto 8px;
display: block;
}
.content-category li:nth-of-type(4n) {
margin-right: 0;
}
.rank-time {
width: 100%;
text-align: right;
margin-right: 8px;
margin-bottom: 22px;
line-height: 1;
}
.gorank {
position: relative;
width: 60%;
text-align: center;
margin-left: auto;
margin-right: auto;
background: #eee;
border: 1px #a5a79a solid;
border-radius: 2px;
}
.gorank a {
display: block;
padding: 12px 0;
width: 100%;
height: 100%;
}
.gorank::after {
content: "";
width: 8px;
height: 8px;
border-top: solid 1px #333;
border-right: solid 1px #333;
transform: rotate(45deg);
position: absolute;
top: 43%;
right: 16px;
}
.rank-stop {
margin: auto;
text-align: center;
padding: 12px 0;
border: 1px #ccc solid;
border-radius: 2px;
margin-bottom: 52px;
width: 60%;
}
footer {
width: 100%;
background-color: #333;
padding: 0px 3% 0;
color: #fff;
}
footer a {
color: #fff;
}
footer ul {
position: relative;
padding:16px 0;
display: flex;
flex-wrap: wrap;
line-height: 2.3;
}
footer li {
margin-right:20px;
}
footer li:last-of-type {
margin-right: 0;
}
}
@media screen and (min-width: 1024px) {
.top {
margin: 0 auto;
height: 70px;
border-bottom: 1px #a5a79a solid;
background: #eee;
width: 100%;
}
.top-wrapper {
position: relative;
max-width: 1460px;
width: 86%;
margin: auto;
}
.site-name {
display: inline;
position: relative;
margin: 0;
padding: 0;
height: 70px;
}
.site-logo {
padding-left: 36px;
height: 70px;
background-image: url('/assets/img/logo.svg');
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: 0px 18px;
}
.site-name img {
margin-top: 16px;
height: 52%;
}
.glass-button {
position: absolute;
top: 5px;
right: 16px;
height: 80%;
}
.glass-button img {
margin-top: 12px;
height: 63%;
}
.main-contents {
margin-top: 52px;
}
.br {
display: block;
}
.content-pick {
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 8px;
}
.cl2 {
width: 32%;
margin-right: 2%;
margin-bottom: 40px;
}
.cl2:nth-of-type(3n) {
margin-right: 0;
}
.cl2-left {
margin-bottom: 12px;
}
.cl2 img {
width: 100%;
height: auto;
background: linear-gradient(180deg, #fafafa 0%, #eeeeee 100%);
border: 1px solid #bababa;
border-radius: 4px;
}
.cl2-right {
margin: 0 auto;
}
.cl2-setsu {
line-height: 1.4;
margin-bottom: 10px;
}
.cl2-setsu a {
font-size: 16px;
color: #000;
}
.cl2-setsu a:hover {
text-decolation: underline;
}
.cl2-site {
font-size: 16px;
color: #333;
line-height: 1.5;
margin-bottom: 8px;
}
.cl2-place {
font-size: 15px;
letter-spacing: 1;
border: 1px solid #abacad;
display: inline-block;
padding: 6px;
border-radius: 2px;
}
.hanabi-container {
margin-top: 20px;
margin-bottom: 40px;
}
.hanabi-form {
text-align:center;
}
.hanabi-btn {
width: 100%;
font-size: 18px;
color: #fff;
letter-spacing: 2px;
padding: 10px 0;
text-align: center;
background: #4b8954;
border: 0;
border-radius: 4px;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
.hanabi-btn:hover {
box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.25);
}

.hanabi-btn:active {
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
transform: translateY(2px);
}
.pick-chui {
margin-bottom: 52px;
text-align: right;
width: 100%;
}
.content-pref {
margin-bottom: 52px;
position: relative;
height: 580px;
width: 100%;
background-image: url('/assets/img/map_japan.svg');
background-size: 87% 78%;
background-repeat: no-repeat;
background-position: 60% 15%;
}
.content-pref ul {
position: absolute;
width:23%;
display: flex;
flex-wrap: wrap;
}
.content-pref li:first-child {
width: 100%;
background: #666;
color: #fff;
padding: 4px 0;
border-radius: 2px;
}
.content-pref li {
text-align: center;
width: 49%;
margin-bottom:4px;
border: 1px #ccc solid;
border-radius: 2px;
position: relative;
background: #fff;
}
.content-pref li a {
display: block;
width: 100%;
height: 100%;
padding: 6px 0;
}
.content-pref li a:hover {
background: #dedede;
}
.hokkaido-tohoku {top: 2%;left: 76%;}.hokkaido {margin-right: 2%;order: 1;}.aomori {order: 2;}.akita {margin-right: 2%;order: 3;}.iwate {order: 4;margin-right: 0;}.yamagata {margin-right: 2%;order: 5;}.miyagi {order: 6;}.fukushima {order: 7;}.kanto {top: 36%;left: 76%;}.tochigi {order: 1;margin-right: 2%;}.ibaraki {order: 2;}.gunma {order: 3;margin-right: 2%;}.saitama {order: 4;}.tokyo {order: 5;margin-right: 2%;}.chiba {order: 6;}.kanagawa {order: 7;}.koushin {top: 15%;left: 28%;}.toyama{order: 1;margin-right: 2%;}.niigata{order: 2;}.ishikawa{order: 3;margin-right: 2%;}.nagano {order: 4;}.fukui{order: 5;margin-right: 2%;}.yamanashi{order: 6;}.tokai {top:70%;left: 76%;}.mie{order: 3;margin-right: 2%;}.gifu {order: 1;margin-right: 2%;}.aichi {order: 4;}.shizuoka {order: 2;}.kinki {top: 70%;left: 51%;}.kyoto {order: 1;margin-right: 2%;}.shiga {order: 2;}.osaka {order: 3;margin-right: 2%;}.nara {order: 4;}.hyogo {order: 5;margin-right: 2%;}.wakayama {order: 6;}.chugoku {top: 25%;left: 3%;}.shimane{order: 1;margin-right: 2%;}.tottori {order: 2;}.hiroshima {order: 3;margin-right: 2%;}.okayama {order: 4;}.yamaguchi{order: 5;}.shikoku {top: 79%;left: 26%;}.kagawa{order: 2;}.tokushima{order: 4;}.ehime {order: 1;margin-right: 2%;}.kochi {order: 3;margin-right: 2%;}.kyushu {top:53%;left: 1%;}.saga {order: 1;margin-right: 2%;}.fukuoka {order: 2;}.nagasaki {order: 3;margin-right: 2%;}.oita {
order: 4;}.kumamoto{order: 5;margin-right: 2%;}.miyazaki{order: 6;}.okinawa{order: 7;margin-right: 2%;}.kagoshima {order: 8;}
.content-category {
text-align: left;
margin-bottom: 52px;
}
.content-category ul {
display: flex;
flex-wrap: wrap;
width:100%;
}
.content-category li {
text-align: center;
width: 23.5%;
background: #fff;
margin-right: 2%;
margin-bottom: 20px;
}
.content-category li a {
display: block;
width: 100%;
color: #333;
}
.content-category img {
width: 100%;
margin: 0 auto 12px;
display: block;
}
.content-category li:nth-of-type(4n) {
margin-right: 0;
}
.rank-time {
line-height: 1;
text-align: right;
margin-bottom: 12px;
}
.gorank {
    position: relative;
    width: 100%;
    margin: 20px auto 0;
    padding: 8px;
    background: #666;
    border-radius: 2px;
    border: 1px #666 solid;
    height: 40px;
}
.gorank a {
position: absolute;
color: #fff;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 40px;
padding-left: 8px;
}

.gorank a:hover {
    color: #fff;
    background: #a8a7a6;
}
.gorank::after {
    content: "";
    width: 8px;
    height: 8px;
    border-top: solid 1px #fff;
    border-right: solid 1px #fff;
    transform: rotate(45deg);
    position: absolute;
    top: 40%;
    right: 8px;
}
.rank-stop {
margin: 16px 0 32px;
padding: 12px;
background: #fff;
border: 1px #ccc solid;
border-radius: 2px;
}
.new-place {
font-size: 14px;
letter-spacing: 1;
border: 1px solid #abacad;
display: inline-block;
padding: 6px;
border-radius: 2px;
}
footer {
width: 100%;
background-color: #333;
padding: 20px 0 32px;
text-align: right;
color: #fff;
}
footer ul {
width: 86%;
max-width: 1460px;
margin: auto;
}
footer a {
color: #fff;
}
footer ul {
display: flex;
flex-wrap: wrap;
}
footer li {
margin-right: 20px;
}
footer li:last-of-type {
margin: 0 0 0 auto;
}
}