@charset "UTF-8";

body{
    background-color: rgb(241, 241, 241);
}

.container{
    display: flex;
    flex-direction: row;
    margin-top: 5vh;
    gap: 5px;
}




h1{
    text-align: center;
}

h2{
    text-align: center;
}

.subtitle{
    text-align: center;
}

h3{
    text-align: center;
    margin-top: 40px;
    margin-right: 30px;
    margin-left: 30px;
}




.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);      /* 複数行テキストにも対応 */
}