@charset "UTF-8";
/*各ページ独自のcss設定*/
/*以下に指定を記述する*/

.header_div {
   background-color: #2b2f50;
   height: 16vw;
   width: 100%;
   margin-bottom: 1vw;
   margin-top: 0;
   padding: 2vw 0 1vw;
}

.ponpons{
   margin-top: 1vw;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   flex-wrap: wrap;
   justify-content: space-around;
}

.pon_white {
   width: 10vw;
   display: block;
   margin: 0 auto;
}



.pon_color {
   width: 12vw;
   display: block;
   margin: 0 auto;
}

.pon_p{
   font-size: 1.2em;
   font-weight: 700;
   /*color: white;*/
   text-align: center;
   font-family: 'Yomogi', cursive;
   margin: revert;
}

.pon_a{
   text-decoration: none;
   color: white;
   font-family: 'Yomogi', cursive;
}

/*.pon_a_p_1 :hover{
   color: #fffdc0;
}

.pon_a_p_2 :hover{
   color: #9dc8d8;
}

.pon_a_p_3 :hover{
   color: #f0b775;
}

.pon_a_p_4 :hover{
   color: #d25565;
}*/

@media screen and (min-width:1024px) {
    /*レスポンシブ用*/
.header_div{
   height: 10vw;
   margin-bottom: 4vw;
}


.pon_white{
   width: 6vw;
}

.pon_color{
   width: 8.5vw;
}

.pon_p{
   font-size: 1em;
   margin: 1em 0 0;
}

}