@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@300;500;900&display=swap');

body {
    font-family: 'Kiwi Maru', serif;
    background-color: #fff2b7;
    color:  #242424;
    font-family:sans-serif;
    padding:0;
    margin:0;
}

div {
    /* background-color: rgba(0,0,0,0); */
    /* color:#404040; */
}

img{
    vertical-align:top;}

a{
    color:#404040;   
}

#pageWrapper {
    position:relative;
    font-family: 'Kiwi Maru', serif;
    margin:0px;
    padding:0px;}
#title{
    background-color: #FFFFFF;
    text-align: center;
    position: fixed;
    display:table;
    width:100%;
    min-height:7vh;
    margin:0;
    z-index: 900;}

#titleBody{
    display:table-cell;
    vertical-align: middle;
    font-size: 1.5rem;
}
#titleMargin{
    min-height:7vh;}

#title img{
    position:absolute;
    height: 5vh;
    left:2rem;}

#sideMenu{
    padding:0;
    top: 5vh;
    height: 100vh;
    width: 90vw;
    position: fixed;
    z-index:960;
    border-top-left-radius: 1rem;
    border-left: rgba(0,0,0,0.2) .2rem solid;
    border-top: rgba(0,0,0,0.2) .2rem solid;
    background-color: rgba(0,0,0,.2);
    overflow: hidden;
    right:-100vw;}
#sideMenu div{
    position: relative;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    padding: .2rem;}
#sideMenu .subMenuWrapper{
    margin-bottom:0;
    padding:0;}
#sideMenu .subMenuWrapper .subMenuTitle{
    background:rgba(255,255,255,1);
    color:#404040;
    padding-left:1rem;
    z-index: 970;}

#sideMenu .subMenuWrapper div{
    background: linear-gradient(45deg, #b0003a 50%, #e91e63 50%, #e91e63 70%, #ff6090 70% , #ff6090 100% );
    color:#eeeeee;
    padding-left:2rem;
    z-index: 965;
    height:5vh;}

#titleMenuButton{
    height:100%;
    min-width:2rem;
    aspect-ratio: 1/1;
    position:absolute;
    top:0;
    right:1rem;
    z-index:990;}

#titleMenuButton hr{
    background-color: #606060;
    display:block;
    margin:0;
    border:none;
    width:60%;
    height:10%;
    transform-origin:50% 50% 50%;
    position: absolute;
    top:15%;
    left:20%;
    transition:.2s;}
#titleMenuButton hr:nth-of-type(2){
    top:45%;}
#titleMenuButton hr:nth-of-type(3){
    top:75%;}



#welcomeImage{
   width:100%;
   position:relative;
   height: 80vh;
    overflow: hidden;
    background-color:#FFFFFF;
    
}
#welcomeImage img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index: 400;
}

#welcomeImage div{
    position:absolute;
    width:100%;
    height:80vh;
    object-fit:contain;
    opacity:0;
}

#servicesTitle{
    background-color: #FFFFFF;
    text-align:center;
    padding-top:.2rem;
    padding-bottom:.2rem;}
#services{
    max-width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    background-color: darkcyan;}
#services div{
    background-color:darkgreen;
    
    text-align:center;
    object-fit:cover;}
#services div img{
    width:100%;}

#footer .wrapper{
    display:none;
}

#footer .rights{
    width:100%;
    background-color: rgba(255,255,255,1);
    font-size:.9rem;
    text-align:center;
}

#pageTopButton{
    z-index: 900;
    position:fixed;
    right: 1vh;
    bottom:1vh;
    display:none;
}

#pageTopButton img{
    max-height: 5vh;
}

/* General Purpose Classes / 汎用クラス */

.textFloat{
    position:absolute;
    z-index: 600;
}


#menuTest{}
.mt2button{
    background-color: rgba(0,0,0,0);
    height:10vh;
    position:relative;
    overflow: hidden;}
.mt2bbcov{
    z-index: 104;
    background-color: rgba(0,0,0,0);
    position:absolute;
    width:100%;
    height:10vh;}
.mt2bbd{
    z-index: 103;
    background-color: rgba(0,0,0,0);
    position:absolute;
    top:3vh;
    left:5%;
    color:#eeeeee;
    font-size: 1.2rem;}
.mt2bbg{
    background-color: rgba(0,0,0,0);
    background: linear-gradient(45deg, #b0003a 50%,  #e91e63 50%, #e91e63 70%, #ff6090 70% , #ff6090 100% );
    z-index:102;
    height:10vh;
    width:100%;
    position:absolute;
    top:0;
    left:0;}
.mt2bbgg{
    background-color: #b0003a;
    z-index: 101;
    height:10vh;
    width:100%;
    position:absolute;
    top:0;
    left:0;}
.mt2button{
    text-decoration: none;
    }
.mt2a{
    display:none;
    text-decoration: none;
    text-align:center;
}
.mt2index{
    padding-top: 10vh;
    background: linear-gradient(55deg, rgba(255,255,255,1) 10%,  rgba(255, 255, 255, .5) 50%,  rgba(255, 255, 255, .2) 100% );
    position:relative;
}
.mt2index img{
    
    overflow: hidden;
    position: absolute;
    right:0;
    bottom:0;
    z-index: -1;
}
.mt2indexTitle{
    font-family: 'M PLUS Rounded 1c', sans-serif;
    z-index: 50;
    text-align: center;
    font-size: 1.2rem;}
.mt2indexBody{
    z-index: 50;
    padding:.5rem;}
.mt2click{
    z-index: 50;
    text-align: right;
    font-size: .9rem;
    padding:.2rem;}

.mt3button{
    background-color: rgba(0,0,0,0);
    height:10vh;
    position:relative;
    overflow: hidden;}
.mt3bbcov{
    z-index: 4;
    background-color: rgba(0,0,0,0);
    position:absolute;
    width:100%;
    height: 10vh;}
.mt3bbd{
    z-index: 3;
    background-color: rgba(0,0,0,0);
    position:absolute;
    top:3vh;
    left:5%;
    color:#eeeeee;
    font-size: 1.2rem;
    height:10vh;}
.mt3bbg{
    background-color: rgba(0,0,0,0);
    background: linear-gradient(135deg, #3175ff 50%,  #0053fd 50%, #0053fd 70%, #003ab0 70% , #003ab0 100% );
    z-index: 2;
    height:10vh;
    width:100%;
    position:absolute;
    top:0;
    left:0;}
.mt3bbgg{
    background-color: #003ab0;
    z-index: 1;
    height:10vh;
    width:100%;
    position:absolute;
    top:0;
    left:0;}

.mt3button a{
    text-decoration: none;}

.mt3index{
    top: 10vh;
    position:relative;}

.mt3index img{

}

.mt3indexTitle{
    text-align: center;
    font-size: 1.2rem;}

.mt3indexBody{
    padding:.5rem;}

.mt3click{
    text-align: right;
    font-size: .9rem;
    padding:.2rem;}


#services{
    display:none;
}

#viewport{
    z-index:-1;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    max-width:100vw;
    height:100vh;
    margin:0;
    padding:0;
    background-color:rgba(0,0,0,0);
    display:block;
}

#mt2pcButton{
    display:none;
}

#iframeMap{
    width:95vw;
}