body { 
  margin-right: 10;
  margin-top: 10;
  margin-left: 10;
  margin-bottom: 10;

  /*background-image: linear-gradient(90deg, #fffae0 0%,#fffae0 64%, #2200ff 64%,#2200ff 100%);
  opacity: 0.9;
  
  z-index: 1;*/

}  

a,a:visited{
    color:dimgray;
    text-decoration: none; 
}

a:hover{
    color:mediumblue;
    text-decoration: none; 
    font-weight: bold;
}


.wrapper{
    margin-right: 0px;
    margin-left: auto;
    width:fit-content;
}    

.grid-countainer{
 display: grid;
 grid-template-columns: 150px  1fr 1fr repeat(5,100px);
 grid-template-rows: repeat(4,50px) ;
 grid-auto-rows: minmax(50px,auto);
 gap: 8px;
 grid-template-areas:
 "logo1 void1 void1 menu1 menu2 menu3 menu4 menu5"
 "void2 void2 void2 void2 void2 void2 void2 void2"
 "void3 void3 pict1 pict1 pict1 pict1 pict1 pict1"
 "void3 void3 pict1 pict1 pict1 pict1 pict1 pict1"
 "title1 title1 pict1 pict1 pict1 pict1 pict1 pict1"
 "title2 title2 pict1 pict1 pict1 pict1 pict1 pict1"
 "void4 void4 pict1 pict1 pict1 pict1 pict1 pict1"
 "title3 title3 pict1 pict1 pict1 pict1 pict1 pict1"
 "void5 void5 pict1 pict1 pict1 pict1 pict1 pict1"
 "void6 void6 void6 void6 void6 void6 void6 void6"
 "jitx1 jitx1 jitx1 jitx1 jitx1 jitx1 void7 void7"
 "jitx1 jitx1 jitx1 jitx1 jitx1 jitx1 void7 void7"
 "jitx1 jitx1 jitx1 jitx1 jitx1 jitx1 void7 void7"
 "jitx1 jitx1 jitx1 jitx1 jitx1 jitx1 void7 void7"
 "jitx1 jitx1 jitx1 jitx1 jitx1 jitx1 jibn1 jibn1"
 "jitx1 jitx1 jitx1 jitx1 jitx1 jitx1 jibn2 jibn2"
 "jitx1 jitx1 jitx1 jitx1 jitx1 jitx1 jibn3 jibn3"
 "void8 void8 void8 void8 void8 void8 jibn4 jibn4"
 "void9 void9 void9 void9 void9 void9 void9 void9"
 "gaipx1 gaipx1 gaitx1 gaitx1 gaitx1 gaitx1 gaitx1 gaitx1"
 "gaipx1 gaipx1 gaitx1 gaitx1 gaitx1 gaitx1 gaitx1 gaitx1"
 "gaipx1 gaipx1 gaitx1 gaitx1 gaitx1 gaitx1 gaitx1 gaitx1"
 "void10 void10 gaitx1 gaitx1 gaitx1 gaitx1 gaitx1 gaitx1"
 "void11 void11 void11 void11 void11 void11 void11 void11"
 "contx1 contx1 contx1 contx1 contx1 contx1 contx1 contx1"
 "contx1 contx1 contx1 contx1 contx1 contx1 contx1 contx1"
 "contx1 contx1 contx1 contx1 contx1 contx1 contx1 contx1"
 ;
}

@media screen and (max-width: 1210px) {
.grid-countainer{  grid-template-columns: 150px  0.5fr 0.1fr repeat(5,100px);
  }
}
@media screen and (max-width: 900px) {
.grid-countainer{  grid-template-columns: 150px  0.5fr 0.1fr repeat(5,0.5fr);
  }
}

 .logo1{grid-area: logo1; 
        background-image: url("outobarner.png");
        background-position: left center;
        background-size: contain;
        background-repeat: no-repeat;
 }
 /*.void1{grid-area: void1; background-color: blue;}*/

 .menu1{grid-area: menu1; 
        font-size: 3hw;
        text-align: center;
        vertical-align:center;
 }      
 .menu2{grid-area: menu2; 
        font-size: 3hw;
        text-align: center;
        vertical-align:center;
 } 
 .menu3{grid-area: menu3; 
        font-size: 3hw;
        text-align: center;
        vertical-align:center;
 } 
 .menu4{grid-area: menu4; 
        font-size: 3hw;
        text-align: center;
        vertical-align:center;
 } 
 .menu5{grid-area: menu5; 
        font-size: 3hw;
        text-align: center;
        vertical-align:center;
 }         
 


.menu-btn {
  position: fixed;
  top:10px;
  right:10px;
  display: flex;
  height: 7%;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #1313f1;
  border-radius: 10px;
}

@media screen and (max-width: 500px) {
.menu-btn{  margin-right: 100px;
            width: 120px;
  }
}


.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
  transition: all 0.5s
}
.menu-btn span:before{
  bottom: 8px;
   transition: all 0.5s
}
.menu-btn span:after{ 
  top: 8px; 
   transition: all 0.5s

}

#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
    transition: all 0.5s
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
    transition: all 0.5s
}

#menu-btn-check {
    display: none;
}


@media screen and (min-width: 721px) {
  .menu-btn{
    top:0px;
    right:0px;
    height: 0px;
    width: 0px;
    
  }
  .menu-btn span,
  .menu-btn span:before,
  .menu-btn span:after {
  content: '';
  display: block;
  height: 0px;
  width: 0px;
  border-radius: 0px;
  background-color: #ffffff;
  position: absolute;
  }
  .menu-btn span:before{
  bottom:0px;
  }
  .menu-btn span:after{ 
  top: 0px; 

  }
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 80;
    background-color:#1313f1;
}
.menu-content ul {
    padding: 70px 10px 0;
}
.menu-content ul li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}
.menu-content ul li a {
    display: block;
    width: 100%;
    font-size: 15px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}
@media screen and (max-width: 900px) {
.menu-content ul li a{ font-size: 30px;
  }
}

.menu-content ul li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 80;
    background-color: #1a3694;
    transition: all 0.5s;/*アニメーション設定*/
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}


@media screen and (max-width: 721px) {
  .menu1,.menu2 ,.menu3,.menu4,.menu5{
    font-size:0px;
  }
}
 /*.void2{grid-area: void2; background-color: brown;}*/
 /*.void3{grid-area: void3; background-color: chocolate;}*/
 .pict1{grid-area: pict1;
        background-image: url(outo1.jpg);
        background-position: right top;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: auto ;
        width: 1000px;
        height: 900px;
 }

 .title1{grid-area: title1;
       margin-left: 50px;
       margin-right: -240px;
       padding-right: 5px;
       border-width: 3px;
       border-color: #1313f1;
       border-style: solid;
       font-size: 3vh;
       text-align: center;
       vertical-align: center;
       font-weight: bold;
       color: #1313f1;
       text-wrap: nowrap; 
       height: 55px;
    }
                

  .title2{grid-area: title2;
       margin-left: 50px;
       margin-right: -240px;
       padding-right: 5px;
       border-width: 3px;
       border-color: #1313f1;
       border-style: solid;
       font-size: 3vh;
       text-align: center;
       vertical-align: center;
       font-weight: bold;
       color: #1313f1;
       text-wrap: nowrap; 
       height: 55px;
    } 
  .title3{grid-area: title3;
       margin-left: 50px;
       margin-right: -240px;
       padding-right: 5px;
       border-width: 3px;
       border-color:aliceblue;
       font-size: 3vh;
       text-align: center;
       vertical-align: center;
       font-weight: bold;
       color: #ffffff;
       background-color: #1313f1;
       text-wrap: nowrap; 
       height: 55px;
    }  

@media screen and (max-width: 721px) {
    .title1,.title2,.title3{
        font-size: 2wh;


    }
}    

.title3:hover{ background-color: #fefeff;
                color:#1313f1;
                border-color: #1313f1;
                border-width: 5px;
                border-style: solid;
               
            }



 .jitx1{grid-area: jitx1;
        margin-right: 30vw;
        border-width: 10px;
        border-color: blue;
        border-style: solid;
        padding-left: 8vw;
}

 .jitx1-1{grid-area: jitx1;
        padding-top: 35px;
        padding-left: 15px;
        margin-right: auto;
        text-align: left;
        vertical-align:top;
        font-size: 75px;
        font-weight: bold;
        color: blue;
        transform: scale(1.0 , 2.25);
    }
 .jitx1-2{grid-area: jitx1;
        padding-top: 90px;
        padding-left: 30px;
        margin-right: 15vw;
        text-align: left;
        vertical-align:top;
        font-size: 2vh;
        color: rgb(0, 0, 0);
    }   

 .jibn1{grid-area: jibn1;
        background-image: url(room1.jpg);
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: -45vw;
        margin-right: 0;
        height: 160px;
        width: 70vw;
    }
 .jibn1-1{grid-area: jibn1;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-style: italic;
        font-weight: bold;
        text-align: left;
        vertical-align:center;
        text-wrap: nowrap;
        size: cover;
        font-size :60px;
         margin-left: -20px ;
        color: blanchedalmond;
        transform: scale(50%,1.4);
    }

.jibn2{grid-area: jibn2;
        background-image: url(rose1.jpg);
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: -45vw;
        margin-right: 0;
        height: 160px;
        width: 70vw;
    }
 .jibn2-1{grid-area: jibn2;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-style: italic;
        font-weight: bold;
        text-align: left;
        vertical-align: center;
        text-wrap: nowrap;
        size: cover;
        font-size :60px;
        margin-left: -20px ;
        color: blanchedalmond;
        transform: scale(50%,1.4);
    }    

.jibn3{grid-area: jibn3;
        background-image: url(car1.jpg);
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: -45vw;
        margin-right: 0;
        height: 160px;
        width: 70vw;
    }
 .jibn3-1{grid-area: jibn3;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-style: italic;
        font-weight: bold;
        text-align: left;
        vertical-align: center;
        text-wrap: nowrap;
        size: cover;
        font-size :60px;
        margin-left: -20px ;
        color: blanchedalmond;
        transform: scale(50%,1.4);
    }    

.jibn4{grid-area: jibn4;
        background-image: url(airport1.jpg);
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
        margin-left: -45vw;
        margin-right: 0;
        height: 160px;
        width: 70vw;
    }
 .jibn4-1{grid-area: jibn4;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        font-style: italic;
        font-weight: bold;
        text-align: left;
        vertical-align: center;
        text-wrap: nowrap;
        size: cover;
        font-size :60px;
        margin-left: -20px ;
        color: blanchedalmond;
        transform: scale(50%,1.4);
    } 
@media screen and (max-width: 900px) {
    .jibn1-1, .jibn2-1, .jibn3-1, .jibn4-1{
        text-align:left;
        padding-left: 0px;
        margin-left: -80px;
        transform: scale(30%,1.4);
    }
}
 .gaitx1{grid-area: gaitx1;
        margin-right: 8vw;
        margin-left: 0vw;
        border-width: 10px;
        border-color: blue;
        border-style: solid;
        padding-left: 8px;
         z-index: 53;
        }

.gaitx1-1{grid-area: gaitx1;
        padding-top: 35px;
        padding-right: 10px;
        padding-left: 35px;
        margin-left: auto;
        text-align: left;
        vertical-align:top;
        font-size: 75px;
        font-weight: bold;
        color: blue;
        transform: scale(0.9 , 2.25);
         z-index: 52;
    }
 .gaitx1-2{grid-area: gaitx1;
        padding-top: 95px;
        padding-right: 15px;
        margin-right: 4vw;
        margin-left: 2vw;
        text-align: left;
        vertical-align:top;
        font-size: 2vh;
        color: rgb(0, 0, 0);
        z-index: 51;
    }   
 
 .gaipx1{grid-area: gaipx1;
        padding-top:5px;
        padding-left:5px;
        margin-right: -15vw;
        margin-bottom: -15vw;
        background-image: url(rose2.jpg);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 50;
    }

 .void10{z-index: 5;}
  .contx1{grid-area: contx1;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    border-width: 10px;
    border-color: #1313f1;
    border-style: solid;
    z-index: 51;
    }

 .segrid-contax1{
    display: grid;
    grid-template-columns: 1fr 1.75fr 1.75fr 1fr;
    grid-template-rows: 1fr 1.5fr 3fr 1fr;
    gap: 16px;
    grid-template-areas: "contx11 contx11 contx11 contx11"
                         "contx12 contx12 contx12 contx12"
                         "contx13 contx13 contx14 contx14"
                         "contx15 contx15 contx15 contx15";

   }

 .contx11{grid-area: contx11;
    padding-top: 20px;
    text-align: center;
    vertical-align: top;
    font-size: 50px;
    font-weight: bold;
    color: #1313f1;
    transform: scale(0.8 , 2);
 }
  .contx12{grid-area: contx12;
    padding-top: 35px;
    text-align: center;
    vertical-align: top;
    font-size: 20px;
    color: #1313f1;
    font-weight: bold;
 }
 .contx13{grid-area: contx13;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-right: 0vw;
    margin-left: 10vw;
    border-width: 3px;
    border-color: #1313f1;
    border-style: solid;
    height: 240px;
     background-color:#1313f1;
 }

 .contx13-1{grid-area: contx13;
    padding-top: 50px;
    text-align: center;
    vertical-align: top;
    font-size: 15px;
    color: #ffffff;
    transform: scale(1.8 , 2);
 }

 .contx13-2{grid-area: contx13;
    background-image: url(mail.png);
    background-position: 18% 93%;
    background-size: 10%;
    padding-left: 50px;
    background-repeat: no-repeat;
    padding-top: 50px;
    text-align: center;
    vertical-align: center;
    font-size: 45px;
    color:#ffffff;
 }


  .contx14{grid-area: contx14;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    margin-right: 10vw;
    margin-left: 0vw;
    border-width: 3px;
    border-color: #1313f1;
    border-style: solid;
    height: 240px;
    background-color:#ffffff;
 }

  .contx14-1{grid-area: contx14;
    padding-top: 50px;
    text-align: center;
    vertical-align: top;
    font-size: 15px;
    color:rgb(34, 101, 226);
    transform: scale(1.8 , 2);
 }
 .contx14-2{grid-area: contx14;
    background-image: url(tel.png);
    background-position: 18% 93%;
    background-size: 10%;
    background-repeat: no-repeat;
    padding-top: 50px;
    padding-left: 50px;
    text-align: center;
    vertical-align: center;
    font-size: 45px;
    color:rgb(34, 101, 226);
 }

 .grid-countainerji{
 display: grid;
 grid-template-columns: 150px  1fr 1fr repeat(5,100px);
 grid-template-rows: repeat(4,50px) ;
 grid-auto-rows: minmax(50px,auto);
 gap: 8px;
 grid-template-areas:
 "logo1 void1 void1 menu1 menu2 menu3 menu4 menu5"
 "void12 void12 void12 void12 void12 void12 void12 void12"
 "jitx21 jitx21 void14 void14 void14 void14 void14 void14"
 "jitx21 jitx21 jipx21 jipx21 jipx21 jipx21 jipx21 jipx21"
 "jitx21 jitx21 jipx21 jipx21 jipx21 jipx21 jipx21 jipx21"
 "jitx21 jitx21 jipx21 jipx21 jipx21 jipx21 jipx21 jipx21"
 "void15 void15 jipx21 jipx21 jipx21 jipx21 jipx21 jipx21"
 "jitl21 jitl21 jitl21 jitl21 jitl21 jitl21 jitl21 jitl21"
 "jitt21 jitt21 jitt21 jitt21 jitt21 jitt21 jitt21 jitt21"
 "jitt21 jitt21 jitt21 jitt21 jitt21 jitt21 jitt21 jitt21"
 "jitt21 jitt21 jitt21 jitt21 jitt21 jitt21 jitt21 jitt21"
 "jitt21 jitt21 jitt21 jitt21 jitt21 jitt21 jitt21 jitt21"
 "void13 void13 void13 void13 void13 void13 void13 void13"
 "contl2 contl2 contl2 contl2 contl2 contl2 contl2 contl2"
 "contx2 contx2 contx2 contx2 contx2 contx2 contx2 contx2"
 "contx2 contx2 contx2 contx2 contx2 contx2 contx2 contx2"
 "contx2 contx2 contx2 contx2 contx2 contx2 contx2 contx2"
 ;
 }

@media screen and (max-width: 900px) {
.grid-countainer{  grid-template-columns: 150px  0.5fr 0.1fr repeat(5,0.5fr);
  }
}

 .jitx21{grid-area: jitx21;
        margin-right: -30vw;
        border-width: 5px;
        border-color: blue;
        border-style: solid;
        padding-left: 8vw;
        z-index:60;
        min-width: 350px;
}

@media screen and (max-width: 900px) {
 .jitx21{width: 350px;}
}

.jitx21-1{grid-area: jitx21;
        padding-top: 35px;
        padding-left: 15px;
        margin-right: auto;
        text-align: left;
        vertical-align:top;
        font-size: 75px;
        font-weight: bold;
        color: blue;
        transform: scale(1.0 , 2.25);
        z-index:60;
}


.jipx21{grid-area: jipx21;
        background-image: url(room1.jpg);
        background-position:center;
        background-size:contain;
        background-repeat: no-repeat;
        height: 600px;
        z-index:59;    
    }
#ji2 .jipx21{background-image: url(rose1.jpg);
    }
#ji3 .jipx21{background-image: url(car1.jpg);
    }
#ji4 .jipx21{background-image: url(airport1.jpg);
    }
#gi1 .jipx21{background-image: url(pc1.jpg);
    } 
#sp1 .jipx21{background-image :url(rose1.jpg)  ;}       
.jitl21{grid-area: jitl21;
        padding-top: 30px;
        font-size: 4vh;
        text-align: center;
        height: 100px;
    }

.jitt21{grid-area: jitt21;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    border-width: 3px;
    z-index: 51;
    }    


 .segrid-jitt21{
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: 1fr;
    gap: 16px;
    grid-template-areas: "jitt21v1 jitt21tt jitt21v2";
    grid-auto-rows: minmax(50px,auto);
    }

.jitt21tt{grid-area: jitt21tt;
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
    border-width: 3px;
    border-color: #1313f1;
    border-style: solid;
    font-size: 3vh;
    z-index: 51;
    }

.contl2{grid-area: contl2;
        padding-top: 30px;
        font-size: 4vh;
        text-align: center;
        height: 100px;}    

.contx2{grid-area: contx2;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    z-index: 51;
    }    

.segrid-contax2{
    display: grid;
    grid-template-columns:  0.5fr 1fr 1fr 1fr 1fr 0.5fr;
    grid-template-rows: 1fr;
    grid-auto-rows: minmax(50px,auto);
    gap: 16px;
    grid-template-areas:
     "contex2v1 contex2b1 contex2b2 contex2b3 contex2b4 contex2v2"

}

.contex2b1{grid-area: contex2b1;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    z-index: 51;
    height: 110px;
    background-repeat: no-repeat;
    background-image: url(room1.jpg);
    background-position: center;
    background-size: cover;
    color:#1313f1;
    text-align: center;
    vertical-align:bottom;
    font-size: 2vw;
    text-shadow:
    3px 3px 3px #fefeff,
    -3px 3px 3px #fefeff,
    -3px -3px 3px #fefeff,
    3px -3px 3px #fefeff;
    
}
.contex2b2{grid-area: contex2b2;
     padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    z-index: 51;
    height: 110px;
    background-repeat: no-repeat;
    background-image: url(rose1.jpg);
    background-position: center;
    background-size: cover;
    color:#1313f1;
    text-align: center;
    vertical-align:bottom;
    font-size: 2vw;
     text-shadow:
    3px 3px 3px #fefeff,
    -3px 3px 3px #fefeff,
    -3px -3px 3px #fefeff,
    3px -3px 3px #fefeff;
}
.contex2b3{grid-area: contex2b3;
     padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    z-index: 51;
    height: 110px;
    background-repeat: no-repeat;
    background-image: url(car1.jpg);
    background-position: center;
    background-size: cover;
    color:#1313f1;
    text-align: center;
    vertical-align:bottom;
    font-size: 2vw;
     text-shadow:
    3px 3px 3px #fefeff,
    -3px 3px 3px #fefeff,
    -3px -3px 3px #fefeff,
    3px -3px 3px #fefeff;
}
.contex2b4{grid-area: contex2b4;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    z-index: 51;
    height: 110px;
    background-repeat: no-repeat;
    background-image: url(airport1.jpg);
    background-position: center;
    background-size: cover;
    color:#1313f1;
    text-align: center;
    vertical-align:bottom;
    font-size: 2vw; 
     text-shadow:
    3px 3px 3px #fefeff,
    -3px 3px 3px #fefeff,
    -3px -3px 3px #fefeff,
    3px -3px 3px #fefeff;   
}

@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}


div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: center;
margin: auto;
}
video.vid_main {
width: 100%;
max-width: 920px;/*PC版での最大幅*/
}