.content-pick {
display: flex;
flex-wrap: wrap;
gap: 2%;
width: 100%;
margin-bottom: 32px;
}
.cl2 {
flex: 1;
text-align: left;
}
.cl2-left {
margin-bottom: 10px;
}
.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;
}
.cl2-setsu {
text-align: left;
line-height: 1.4;
margin-bottom: 10px;
}
.cl2-setsu a {
letter-spacing: 0.12em;
color: #111;
}
.cl2-site {
line-height: 1.4;
margin-bottom: 10px;
padding-left: 23px;
background-image: url('/assets/img/info-icon.svg');
background-repeat: no-repeat;
background-size: 18px auto;
background-position: 0 2px;
}
.cl2-place {
font-size: 15px;
letter-spacing: 1;
border: 1px solid #abacad;
display: inline-block;
padding: 8px 6px;
border-radius: 2px;
}
.hanabi-container {
margin-bottom: 32px;
}
.hanabi-form {
text-align:center;
margin-bottom: 32px;
}
.hanabi-btn {
width: 100%;
color: #fff;
letter-spacing: 0.1em;
text-align: center;
background: #4b8954;
border: 1px #4b8954 solid;
border-radius: 4px;
cursor: pointer;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
padding: 10px 20px;
}
.content-pref {
margin-bottom: 24px;
}
.content-pref ul {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
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%;
height: 36px;
padding: 0;
}
.content-pref li:first-child {
padding: 4px 0;
margin-bottom: 12px;
height: auto;
width: 100%;
background: #666;
color: #fff;
letter-spacing: 0.1em;
border: 1px #666 solid;
border-radius: 2px;
}
.content-pref li:nth-of-type(4n+1) {
margin-right: 0;
}
.content-pref li a {
width: 100%;
height: 100%;
display: flex; 
align-items: center;
justify-content: center;
}
.content-category {
margin-bottom: 16px;
}
.content-category ul {
display: flex;
flex-wrap: wrap;
gap: 2%;
width:100%;
}
.content-category li {
text-align: center;
width: 32%;
background: #fff;
margin-bottom: 16px;
}
.content-category li a {
padding-top: 0;
display: block;
width: 100%;
height: 100%;
color: #333;
}
.content-category img {
width: 100%;
height: auto;
margin: 0 auto 8px;
display: block;
}

.rightrank-wrap {
display: flex;
margin-bottom: 8px;
border: 1px #ccc solid;
border-radius: 4px;
width: 100%;
}
.rightrank-wrap:hover {
background: #efefef;
}
.rightrank-no {
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
background: #666;
color: #fff;
padding: 0 8px;
border-radius: 4px 0 0 4px;
}
.rightrank-right,.right-new-right {
width: 100%;
padding: 10px 8px;
}
.rightrank-setsu {
font-size: 16px;
margin-bottom: 10px;
letter-spacing: 0.1em;
font-weight: bold;
line-height: 1.5;
color: #525252;
}
.rightrank-site {
font-size: 15px;
margin-bottom: 10px;
}
.rightrank-place {
font-size: 15px;
padding-left: 22px;
background-image: url('/assets/img/guide2.svg');
background-repeat: no-repeat;
background-size: 15px auto;
background-position: 0 0;
flex-shrink: 0;
}
.rank-time {
text-align: right;
margin: 12px 4px 12px 0;
}
.gorank {
position: relative;
width: 100%;
margin: 20px auto 32px;
padding: 8px;
background: #666;
border-radius: 4px;
border: 1px #666 solid;
height: 40px;
}
.gorank a {
text-align: center;
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: 0 0 32px 0;
padding: 16px 0;
text-align: center;
width: 100%;
border: 1px #a5a79a solid;
border-radius: 2px;
}
.right-new-date {
font-size: 15px;
margin: 0 0 8px 4px;
}

@media screen and (max-width: 520px) {

}
@media screen and (max-width: 1023px) and (min-width: 521px) {
.content-pick {
margin-bottom: 40px;
}
.hanabi-form {
margin-bottom: 40px;
}
.hanabi-btn {
font-size: 18px;
padding: 10px 0;
}
.content-pref {
margin-bottom: 16px;
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;
align-items: center;
margin-bottom: 0;
gap: 2%;
}
.content-pref li {
position: relative;
display: flex;
justify-content:center;
width: 49%;
margin-right: 0;
margin-bottom: 4px;
border: 1px #ccc solid;
border-radius: 2px;
position: relative;
height: 32px;
padding: 0;
}
.content-pref li:first-child {
width: 100%;
padding: 4px 0;
margin-bottom: 4px;
}
.content-pref li a {
position: relative;
padding-top: 2px;
}
  .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 {
margin-bottom: 24px;
}
.content-category li {
width: 23.5%;
}
.content-category li a {
padding-top: 2px;
display: block;
width: 100%;
height: 100%;
}
.content-category img {
width: 100%;
height: auto;
margin: 0 auto 8px;
display: block;
}
.gorank {
margi-bottom: 40px;
}
.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) {
.content-pick {
margin-bottom: 52px;
}
.hanabi-form {
margin-bottom: 52px;
}
.hanabi-btn {
font-size: 18px;
padding: 10px 0;
}
.content-pref {
margin-bottom: 30px;
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;
align-items: center;
margin-bottom: 32px;
gap: 2%;
}
.content-pref li {
display: flex;
align-items: center;
justify-content: center;
width: 49%;
margin-right: 0;
margin-bottom: 4px;
border: 1px #ccc solid;
border-radius: 2px;
position: relative;
height: 32px;
padding: 0;
}
.content-pref li:first-child {
background: #666;
color: #fff;
letter-spacing: 0.1em;
margin-bottom: 6px;
border: 1px #666 solid;
border-radius: 2px;
width: 100%;
padding: 4px 0;
}
.content-pref li a {
padding-top: 2px;
  }
.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 {
margin-bottom: 0;
}
.content-category li {
width: 23.5%;
}
.rightrank-wrap {
background: #fff;
}
.rightrank-wrap:hover {
background: #efefef;
}
.rightrank-no {
background: inherit;
color: #333;
padding: 0 6px;
}
.rightrank-right {
padding: 10px 4px;
}
.rank-stop {
text-align: left;
padding: 8px;
}
.right-new-date {
font-size: 15px;
margin: 0 0 6px 4px;
}
.right-new-right {
padding: 8px;
}
}