.contents{
    border:3px solid #191970;
    position: relative;
    width: 100%;
    height: 100%;
}

.titlearea{
    height: auto;
    width: 100%;
}

.maintitle{
    display: inline-block;
    background-color: #191970;
    color: #fff;
    padding: 5px;
    left: 0;
    margin: -1px 0 0 -1px;
}

.titletext{
    margin: 0;
}

.subtitle{
    color: #191970;
    font-weight:bold;
    margin-top: 8px;
    padding-left: 5px;
}

.subtext{
    display: inline;
    background-color: #fff;
}

.comment{
    padding-left: 5px;
}

.comment2{
    font-size: 25px;
    color: #ff0000;
}

.maparea{
    /* height: calc(100% - 58px); */
    height: 800px;
    width: 100%;
}

.mappin{
    height:20px;
    width: 20px;
}

#mapid{
    position: relative;
    width: 100%;
    height: 100%;
}

.moviecontents{
    z-index: 999;
    position: absolute;
    bottom: 4%;
    left: 3%;
}

.movietitlearea{
    padding: 8px 10px 8px 10px;
    background-color: #191970;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

#movietitle{
    margin: 0;
    vertical-align: middle;
}

.moviearea{
    border: 3px solid #191970;
}

button.close{
    color: white; 
    opacity: 1;
}

iframe{
    display:block;
    margin:3px;
    width: 448px;
    height: 252px;
}

@media screen and (max-width: 993px){
 
	/*　スマホ横/タブレット(画面サイズ916px以下)　*/
    
    .titlearea{
        height: auto;
        width: 100%;
        margin: -1px 0 1px -1px;
    }

    .maparea{
        height: calc(100% - 100px);
        width: 100%;
    }

    .moviecontents{
        z-index: 999;
        position: absolute;
        bottom: 3%;
        left: 7%;
    }

    iframe{
        display:block;
        margin:3px;
        aspect-ratio: 16 / 9;
        width: auto;
        height: 20vw;
    }
}

@media screen and (max-width: 496px){
 
	/*　スマホ縦(画面サイズ466px以下)　*/
    .titlearea{
        height: auto;
        width: 100%;
    }

    .maintitle{
        width: 100vw;
    }
    
    .maparea{
        height: calc(100% - 132px);
        width: 100%;
    }

    .moviecontents{
        margin: 0 auto;
        bottom: 18px;
        left: 50%;
        transform: translateX(-50%);
    }

    iframe{
        display:block;
        margin:3px;
        aspect-ratio: 16 / 9;
        width: 80vw;
        height: auto;
    }
}