@charset "UTF-8";

body{
    font-family: serif;
    background-color:rgb(139,105,94) ;
}



 .ikn{
        position: fixed;
        top:1vh;
        left: 60vw;
        z-index: 10;
        opacity: 1 ;
    }

 
    .menui{
        height: 10vh;
        width: 10vh;
        opacity: 1;
    }
    .menut{
        height: 3vh;
        width: 10vh;
        opacity: 1;
    }

    


    .menumove{
        position: fixed;
        display: flex;
        flex-direction: column;
        top: 3vh;
        right: 3vh;
        z-index: 1500;
        background-color: rgb(255, 255, 255);
        border-radius: 10%;
        cursor: pointer;
        pointer-events: auto;
        opacity: 1;
    }
    .ideamove{
         position: fixed;
        display: flex;
        flex-direction: column;
        top: 3vh;
        right: 3vh;
        z-index: 900;
        background-color: white;
        border-radius: 10%;
        opacity: 0;
    }
    .mapmove{
      position: fixed;
        display: flex;
        flex-direction: column;
        top: 3vh;
        right: 3vh;
        z-index: 900;
        background-color: white;
        border-radius: 10%;
        opacity: 0;
    }
    .homemove{
        position: fixed;
        display: flex;
        flex-direction: column;
        top: 3vh;
        right: 3vh;
        z-index: 900;
        background-color: white;
        border-radius: 10%;
        opacity: 0;
    }
    




.title{
    font-size: 60px;
    font-family: serif;
    position: relative;
    display: inline-block;
    padding-bottom: 4px; /* 下の線の位置確保 */
    color: white;
}

.subtitle{
    color: white;
}


.plans{
    display: flex;
    flex-direction: row;
    justify-content: center;
    
    position: relative;
    top: 5vh;
    width: 100vw;
}

.plan1{
    width: 30%;
}
.planE{
    width: 30%;
}
.planS{
    width: 30%;
}


.planContent{
    width: 100vw;
    height: 70vh;
    background-color: rgb(174,142,132);
    top: 10vh;
    position: relative;
    z-index: 100;
}


.plans button {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}

.plans button img {
  width: 100%;
  height: auto;
  display: block;
}


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