@charset "UTF-8";

body{
    text-align: center;
    font-family: serif;
}

.container{
    margin-top: 5%;
}

.title{
    font-weight: bold;
    font-size: 40px;
}

.box{
    margin-top: 5%;
}

h1{
    font-size: 50px;
}
h2{
    font-size: 15px;
}
h3{
    font-size: 15px;
}



.menuForAllbox{
  position: fixed;
 bottom: 0;
 z-index: 99999;
}
.menuForAll{
    display: grid;
    grid-template-columns: repeat(8,1fr);
    z-index: 99999;
   
}
.first{
    
    width: 100%;
    height: 100%;
    object-fit: cover;
    grid-column: 1;
}
.aa{
   text-decoration: none;
     clip-path: polygon(
    30% 0%, 70% 0%, 
    100% 30%, 100% 70%, 
    70% 100%, 30% 100%, 
    0% 70%, 0% 30%
  );
   background-color: rgb(231, 153, 20);
   width: 100%;
   height: 100%;
  display: flex;              /* 子要素を中央寄せするため */
  justify-content: center;    /* 横方向中央 */
  align-items: center;        /* 縦方向中央 */
 color: white;
  align-self: end;            /* Gridのセル内で下揃えしたいなら残す */
  text-align: center;   
  filter: drop-shadow(0 0 0 black); 
  font-size: 2.5vw;     /* 複数行テキストにも対応 */
}

.ii{
    font-size: 3vw;
   text-decoration: none;
     clip-path: polygon(
    30% 0%, 70% 0%, 
    100% 30%, 100% 70%, 
    70% 100%, 30% 100%, 
    0% 70%, 0% 30%
  );
   background-color: rgb(81, 178, 206);
   width: 100%;
   height: 100%;
  display: flex;              /* 子要素を中央寄せするため */
  justify-content: center;    /* 横方向中央 */
  align-items: center;        /* 縦方向中央 */
 color: white;
  align-self: end;            /* Gridのセル内で下揃えしたいなら残す */
  text-align: center;   
  filter: drop-shadow(0 0 0 black);      /* 複数行テキストにも対応 */
}

.margin{
    height: 30vh;
}