.container01{
    display: grid;
    grid-template-rows: 12vw 38vw 1fr 7vw;
    grid-template-columns: 14.2vw 65vw 15.69vw;
    grid-template-areas: 
    "header header header"
    "side1 nav side2"
    "side3 main side4"
    "footer footer footer";
}
.container02{
    display: grid;
    grid-template-rows: 12vw 41.24vw 80vw 3vw;
    grid-template-columns: 14.2vw 65vw 15.69vw;
    grid-template-areas: 
    "header header header"
    "side1 nav side2"
    "side3 main side4"
    "footer footer footer";
}
.header{
    grid-area: header;
}
.nav {
    grid-area: nav;
}
.side1 {
    grid-area: side1;
}
.side2 {
    grid-area: side2;
}
.main {
    grid-area: main;
}
.footer {
    grid-area: footer;
}

.body02 a{
    color: #ffffff;
}
.body02 div{
    color: #ffffff;
}

header {
    text-align: center;
    padding: 0vw;
}

h1{
    margin: 0;
    padding: 0;
}

header h1 a{
    color: #635555;
    font-family: "Stick", sans-serif;
    font-size: 3.7vw;
    text-decoration: none;
    border: 0vw;
    left: 18.2vw;
    top: 4vw;
    position: absolute;
    word-wrap: break-word;
}


 
header img {
    width:40vw; 
    height: auto;
    position: absolute;
    top: 7.6vw;
    left: 15.2vw;
}
.plane_morning{
    width:14vw; 
    height: auto;
    position: absolute;
    top: 7.4vw;
    left: 31.75vw;
}
.plane_afternoon{
    width:25vw; 
    height: auto;
    position: absolute;
    top: 7.4vw;
    left: 31.75vw;
}
.plane_evening{
    width:35vw; 
    height: auto;
    position: absolute;
    top: 7.4vw;
    left: 31.75vw;
}
.plane_night{
    width:44vw; 
    height: auto;
    position: absolute;
    top: 7.4vw;
    left: 31.75vw;
}

body {
    background: #D9D9D9;
}

body div{
    font-family:'stick';
}

.map img {
    width: 65vw;
    margin-top: 1vw;
    margin-left: -1.0vw;
}


.logo01 {
    color: #635555;
    font-family: "stoke", sans-serif;
    font-size: 1.82vw;
    text-decoration: none;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    left: 13vw; 
    top: 44vw; 
    position: absolute;
    z-index: 0;
}
.logo02 {
    color: #ffffff;
    font-family: "stoke", sans-serif;
    font-size: 1.82vw;
    text-decoration: none;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    left: 13vw; 
    top: 44vw; 
    position: absolute;
    z-index: 0;
}
.pin{
    z-index: 4;
    position: absolute;
    width:2vw;
    height: auto;
    transform: translateY(100%);
}
.pin:hover{
    transform: scale(1);
    transform: translateY(2vw);
    transition: transform 0.6s ease;    
}

.goal-flag {
    position: absolute;
    width: 3vw; 
    height: auto;
    z-index: 5;
    transform: translateY(100%);
    transform: rotate(-12deg);
}
.goal-flag01 {
    position: absolute;
    width: 3vw; 
    height: auto;
    z-index: 5;
    transform: translateY(100%);
    transform: rotate(-12deg);
}
.goal-flag:hover {
    transform: scale(1);
    transform: translateY(-4vw);
    transform: rotate(-22deg);
    transition: transform 0.6s ease;   
}



.allow{
    z-index: 2;
    left: 43vw; 
    top: 49vw; 
    position: absolute;
    width: 12vw;
    height: auto;
}
.allow:hover{
    transform: scale(1.2);
    transform: translateY(0.5vw);
    transition: transform 0.6s ease;    
}
.star{
    z-index: 2;
    left: 47vw; 
    top: 32vw; 
    position: absolute;
    width: 2.2vw;
    height: auto;
}

.guid{
    font-size: 2vw;
    width: 60vw;
}

#home{
    position: relative;
    top: -3vw;
}
.icon img {
    grid-area: map;
    width: 6.5vw;
    filter: brightness(0) invert(1);
    position: relative;
    z-index: 2;
    margin: 0vw;
    margin-top:-0.5vw;
    margin-left: 1.5vw;
    top: 3vw;
}



.icon-link img {
    transition: transform 0.2s ease;
}

.icon-link:hover img {
    transform: scale(1.5);
    animation: changeColor 0.3s ease-out forwards;
}

.rounded-box {
    position: absolute;
    border-radius: 10vw;
    background-color: rgb(255, 255, 255);
    opacity: 50%;
    top: 19vw;
    left: 79.7vw;
}

@media screen and (max-width:850px) {
    .rounded-box{
        left: 80.7vw;
        top: 21vw;
    }
    .guid{
        font-size: 3vw;
        width: 80vw;
    }
}

.circle {
    position: absolute;
    width: 5.2vw;
    height: 5.2vw;
    border-radius: 50%;
    margin-top: -3vw;
    margin-left: 2.4vw;
    background-color: rgb(255, 255, 255);
    z-index: 1;
    opacity: 0;
    transition: transform 0.2s ease;
}

.icon-link:hover + .circle {
    transform: scale(1.5);
    animation: fade 0.1s ease-out forwards;
}

#circle1 {
    background-color: rgb(175, 213, 219);
    box-shadow: -0.5vw -0.5vw 0vw rgba(0, 25.53, 29.56, 0.25) inset; 
    border-radius: 50vw;
}
#circle2 {
    background-color: rgb(109, 166, 253);
    box-shadow: -0.5vw -0.5vw 0vw rgba(0, 25.53, 29.56, 0.25) inset; 
    border-radius: 50vw;
}
#circle3 {
    background-color: rgb(235, 159, 104);
    box-shadow: -0.5vw -0.5vw 0vw rgba(0, 25.53, 29.56, 0.25) inset; 
    border-radius: 50vw;
}
#circle4 {
    background-color: rgb(41, 23, 112);
    box-shadow: -0.5vw -0.5vw 0vw rgba(0, 25.53, 29.56, 0.25) inset; 
    border-radius: 50vw;
    
}

@keyframes changeColor {
    0% {
        filter: brightness(0.9) invert(0.1);
    }
    to {
        filter: brightness(1) invert(0);
    }
}

@keyframes fade {
    0% {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.road{
    width: 71.17vw; 
    height: 54.38vw; 
    left: 17.52vw;  
    position: absolute;
    margin-top:15vw;
}
/* モーダル全体のスタイル */
.modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: transparent;
    backdrop-filter: blur(5px);
    -webkit-background-filter: 5px;
    background-image: linear-gradient(
        120deg,
        rgba(255,255,255,0.3),
        rgba(0, 0, 0, 0.2)
    );
    background-color: rgba(0,0,0,0.8); 
}

/* モーダル内の画像スタイル */
.modal-content {
    margin: auto;
    display: block;
    width: 50%;
    max-width: 100%;
    max-height: 100%;
    padding-top: 10vw; 
    
}

/* 閉じるボタンのスタイル */
.close {
    position: fixed;
    top: 3vw; 
    left: 5vw; 
    color: white;
    font-size: 4vw;
    font-weight: bold;
    cursor: pointer;
}

/* 閉じるボタンにホバーした時のスタイル */
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

.photos{
    z-index: 5;
}

.photos:hover{
    transform: scale(1.2);
    transition: transform 0.2s ease;
    /* animation: changeColor 0.3s ease-out forwards; */
}

#photos01{
    width: 15.17vw; 
    top: 42vw;
    left: 35vw;  
    position: absolute;
    margin-top:15vw;
    box-shadow: -10px 10px 10px 0px rgba(0, 0, 0, 0.25);
}
#photos02{
    width: 15.17vw; 
    top: 60vw;
    left: 80vw;  
    position: absolute;
    box-shadow: -10px 10px 10px 0px rgba(0, 0, 0, 0.25);
}
#photos03{
    width: 15.17vw; 
    top: 74vw;
    left: 45vw;  
    position: absolute;
    box-shadow: -10px 10px 10px 0px rgba(0, 0, 0, 0.25);
}
#photos04{
    width: 15.17vw; 
    top: 98vw;
    left: 38vw; 
    position: absolute;
    box-shadow: -10px 10px 10px 0px rgba(0, 0, 0, 0.25);
}
#photos05{
    width: 15.17vw; 
    top: 107.2vw;
    left: 69vw; 
    position: absolute;
    box-shadow: -10px 10px 10px 0px rgba(0, 0, 0, 0.25);
}
.goal{
    width: 5.17vw; 
    top: 112.2vw;
    left: 86vw; 
    position: absolute;
}
main h1{
    color: #635555;
    font-size: 3vw;
}
main a{
    color: #635555;
    font-size: 2vw;
}
main div{
    color: #635555;
    font-size: 1.5vw;
    width: 21vw; /* テキストボックスの幅を設定 */
    word-wrap: break-word; /* テキストを折り返す */
}
.time01{
    top: 55vw;
    left: 12vw;
    position: absolute;
}
.textbox01{
    top: 58vw;
    left: 12vw;
    position: absolute;
}
.time02{
    top: 57vw;
    left: 58vw;
    position: absolute;
}
.textbox02{
    top: 60vw;
    left: 58vw;
    position: absolute;
}
.time03{
    top: 74vw;
    left: 20vw; 
    position: absolute;
}
.textbox03{
    top: 77vw;
    left: 20vw; 
    position: absolute;
}
.time04{
    top: 97vw;
    left: 15vw; 
    position: absolute;
}
.textbox04{
    top: 100vw;
    left: 15vw; 
    position: absolute;
}
.time05{
    top: 94.2vw;
    left: 69vw; 
    position: absolute;
}
.textbox05{
    top: 97.2vw;
    left: 69vw; 
    position: absolute;
}

.cloud{
    position: absolute;
    height: 60vh;
    right: -20vw;
    z-index: 9999;
    transition: left 2s ease-in-out, top 2s ease-in-out;
}