@charset "utf-8";

#cm-gallery h1 {
	max-width: 1200px;
	width: 94%;
	margin: 3% auto 0;
        height: 0;
        overflow: hidden;
	padding-top: 24%;
	margin-bottom: 20px;
	background: url(../images/home_movie_title.png) center center no-repeat;
        background-size: 100% auto;
}

/* main */

.cm-gallery-main .main-inner{
        max-width: 1200px;
	width: 94%;
        margin: 0 auto;
}

.cm-gallery-main .top-title-box {
        font-family: 'Kiwi Maru', serif;
        padding: 0.5rem;
        border-top: solid 1px #20aee5;
        border-bottom: solid 1px #20aee5;
        color: #20aee5;
        text-align: center;
        margin: 1rem auto;
}

.cm-gallery-main .cm-box {
        margin: 2rem auto;
}

.cm-gallery-main .movie-box  {
        position: relative;
        padding-bottom: 56.25%; 
        height: 0;
        overflow: hidden;
}

.cm-gallery-main .movie-box iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}

.cm-gallery-main .text-box {
        margin: 1rem auto;
        font-size: 2rem;
        text-align: center;
}

@media screen and (min-width:768px) {

#cm-gallery h1 {
	position: absolute;
	overflow: visible;
	padding-left: 27%;
	top: 12rem;
        z-index: 1;
	margin: 0 auto;
	padding-top: 0;
        color: #036eb8;
        font-family: 'Kiwi Maru', serif;
	font-size: 0.75vw;
	font-weight: bold;
	background: none;
}

#cm-gallery .cm-gallery-header .header-inner {
	max-width: 1200px;
	width: 94%;
	margin: 3% auto;
	padding-bottom: 5px;
        margin-top: 8rem;
        height: 7rem;
	position: relative;
	background-color: #bae3f9;
	background-image:
	radial-gradient(#d3edfb 20%, transparent 20%),
        radial-gradient(#d3edfb 20%, transparent 20%);
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
	border-radius: 5px; 
}

#cm-gallery .pc-cm-gallery-title {
        position: absolute;
        left: 10%;
        bottom: 0;
	color: #036eb8;
        font-family: 'Kiwi Maru', serif;
	font-size: 4rem;
}

#cm-gallery .cm-gallery-header .cm-gallery-img-ico {
        position: absolute;
        bottom: 0;
        right: 10%;
        width: auto;
        height: 150%;
}

#cm-gallery .gallery-box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
}

#cm-gallery .gallery-box .cm-box {
        width: 45%;
}

#cm-gallery .gallery-box .cm-box.is-empty {
        width:45%;
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-top: 0;
        margin-bottom: 0;
}

}