@charset "UTF-8";

.mod-page-title h1 span {
    display: inline-block;
    border: none;
    padding: 5px 10px 5px 0;
    margin-left: 0px;
    color: #000;
    vertical-align: middle;
    background-color: #F6F6F7;
}
.mod-page-title h1 span.p-catch {
    font-size: 60%;
}
.mod-page-title h1 span.c-name {
    font-size: 60%;
}

.box-blue {
    padding: 20px 30px;
    border-radius: 15px;
    margin-top: 60px;
    border: solid 2px #000;
    background-color: #e0eff9;
    color: #000;
}

.box-blue .title {
    font-weight: bold;
    font-size: 1.8em;
}

.box-gray {
    padding: 20px 30px;
    margin-top: 60px;
    border: solid 2px #000;
    background-color: #E5E5E5;
    color: #000;
}

.box-gray .title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}
.box-white-link {
    padding: 20px 20px;
    background-color: #fff;
    border-radius: 15px;
    margin-top: 30px;
    transition: background-color 0.5s ease;
}
.box-white-link .flex {
    margin-top: 0;
    margin-bottom: 0;
    justify-content: center;
}
a.tx-dec {
    text-decoration: none;
}
a .ctn-box p {
    font-size: 1.6em;
    font-weight: bold;
}

a .box-white-link:hover {
    background-color: #ccc;
    opacity:0.7;
    text-decoration-line: underline;
}

.container {
    text-align: center;
    margin: 20px;
}
.image-caption {
    display: inline-block;
    text-align: center;
    width: 100%;
}
.caption {
    width: 100%;
    word-wrap: break-word;
    font-size: 1.4em;
}

.flex {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    margin-bottom: 30px;
}

figure {
    display: flex;
    flex-flow: column;
    padding: 0;
}
figure.img-r {
    margin: 0 0 0 40px;
    width: 240px;
}
figure.img-l {
    margin: 0 30px 0 0;
    width: 240px;
}
.movieArea {
    max-width: 510px;
    margin: 0px auto 0px;
    padding: 30px;
}
.movieArea img {
    width: 100%;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 767px) {
    .box-gray {
        padding: 20px 20px;
    }
    .flex {
        display: block !important;
        margin-top: 0px;
    }
    .flex img {
        width: 100%;
        margin: 20px auto 0;
    }
    figure.img-l {
        margin: 0 0 30px 0;
        width: 100%;
}

}
@media screen and (max-width: 768px) {
    figure.img-r {

    }
}