@charset "utf-8";


.towninfo-nav{
    padding: 55px 0;
    background:url(../../../town_ranking/images/bgi_grid.webp) repeat left top;
}

.towninfo-nav-in{
    max-width: 920px;
    margin:0 auto;
}
@media screen and (max-width: 767px) {
    .towninfo-nav-in{
        padding: 0 4%;
    }
}

.towninfo-nav .flex{
    display: flex;
}
@media screen and (max-width: 767px) {
    .towninfo-nav .flex {
        display: block;
    }
}

.towninfo-nav .btn-chiiki{
    text-align: center;
    margin: 10px;
    flex-basis:47.65%;
    background-color: #fff;
}
.towninfo-nav .btn-chiiki a:hover img {
    opacity: .5;
    transition-duration: .3s;
}
@media screen and (max-width: 767px) {
    .towninfo-nav .btn-chiiki{
        margin:15px auto 0px auto;
        max-width:438px;
    }
}

.towninfo-nav-btn{
	background-color: #FFF;
	max-width: 438px;
    margin:0 auto 30px auto;
    border-radius: 3px;
    overflow: hidden;
}
.towninfo-nav-btn a{
	display: block;
    position: relative;
	padding-top: 17px;
	padding-bottom: 17px;
	padding-left: 5%;
    text-align: center;
	font-size: 24px;font-weight: bold;
	background-color: #FBD900;
}
.towninfo-nav-btn a::after {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 10%;
	margin-top: -13px;
	width: 27px;
	height: 27px;
	background-image: url(../img/arrow_circle_black_l.webp);
}
.towninfo-nav-btn a:hover{
    opacity: .5;
    transition-duration: .3s;
}
@media screen and (max-width: 767px) {
    .towninfo-nav-btn{
        width:100%;
    }
    .towninfo-nav-btn a{
        padding-left: 8%;
        font-size:18px;
    }
    .towninfo-nav-btn a::after {
        left: 10%;
    }
}
/* スキップリンク */
.skip-link {
  position: absolute;
  top: -30px;
  left: 50%;
  display: inline-block;
  width: 1px;
  height: 1px;
  padding: 2px 10px;
  overflow: hidden;
  text-decoration: none;
  background: #fff;
  transition: 0.4s;
  transform: translateX(-50%);
  white-space: nowrap;
}
.skip-link:focus {
  top: 0;
  width: auto;
  height: auto;
  outline: auto;
  overflow: visible;
  z-index: 10000;
}
@media screen and (max-width: 640px) {
  .skip-link {
    font-size: 12px;
  }
}