@charset "utf-8";
/* shiraiカスタマイズのためのCSS */

.map{
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
text-align: center;
}

.map iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50%;
height: 75%;
}

@media screen and (max-width: 480px) {
    .map iframe {
        width: 100%;
        height: 100%;
        }
  }

.grid {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /*　1fr 1fr 1frと同じ　*/
    margin-top: 6%;
    margin-bottom: 50px;
}

/* ranking */

/*画像の横幅を100%にしてレスポンシブ化*/
#ranking img{
	width: 100%;
	height: auto;
	vertical-align: bottom;/*画像の下にできる余白を削除*/
}

.ranking-list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    counter-reset: number;
}

.ranking-list li {
    position: relative;
    z-index: 1;
    width:30%;
    margin:20px 0;
    opacity: 0;
}

.ranking-list .ranking-cap{
    margin:10px 0 0 0;
    text-align: center;
    display: block;
}

@media screen and (max-width:550px){
.ranking-list li {
    width: 46%;
}
    
.ranking-list li:last-child{
    display: none;
    }    
}

.ranking-list li::before {
      position: absolute;
      left:-0.5em;
      top:-0.5em;
      z-index: 2;
      counter-increment: number;
      content: counter(number);
      background: #457703;
      display: inline-block;
      width: 2.5em;
      height:2.5em;
      line-height:2.5em;
      font-size:1.2rem;
      text-align: center;
      border-radius: 50%;
      color: #fff;
}

@media screen and (max-width:768px){
.ranking-list li::before {
      width: 2em;
      height:2em;
      line-height:2em;
      font-size:1.1rem;
    }
    
}

.ranking-list li:nth-child(1)::before {
      background: #997F42; }
.ranking-list li:nth-child(2)::before {
      background: #777; }
.ranking-list li:nth-child(3)::before {
      background: #B25938; }


/*　7-8　キラッ　*/
.shine span.mask{
	position: relative;/*キラッの基点となる位置を定義*/
    display: block;
    overflow: hidden;
}

.shine span.mask::before {
	position: absolute;
	content: '';
	width: 50%;/*キラッの横幅*/
	height: 100%;/*キラッの縦幅*/
	top: 0;/*.shine span.maskのトップ0を基点*/
	left: -75%;/*画面の見えていない左から右へ移動するスタート地点*/
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	transform: skewX(-25deg);/*背景白透過を斜めに*/
}

.shine span.mask:hover::before {/*hoverした時の変化*/
	animation: shine 0.7s;/*アニメーションの名前と速度を定義*/
}

@keyframes shine {
	100% {
		left: 125%;/*画面の見えていない左から右へ移動する終了地点*/
	}
}


.contact-area {
    text-align: center  ;
}

.contact-area li a{
    color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

.contact-area span a{
    margin: 30px 30% 0 30%;
    padding: 10px 20px;
    border: 2px solid #333;
    white-space: nowrap;
}

@media screen and (max-width: 480px) {
    .contact-area span a {
        margin: 30px 0 0 0;
        }
  }