@charset "UTF-8";
/* コンテンツ */


.bg_beige {
    background-color: #f2ebe1;
}

.ytmv iframe {
    display: block;
    width: 100%;
    aspect-ratio:16 / 9;
}

#mainimg {
    position: relative;
    width: 100%;
    height: 100vh; /* disable Fallback */
    height: calc((var(--vh, 1vh) * 100) - 50px);
    min-height: 600px;
    background-image: url("../img2/main.webp");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
#mainimg section {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
#mainimg h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    line-height: 0;
}
#mainimg h1 img {
    width: 100%;
}
#mainimg h2 {
    position: absolute;
    bottom: -5em;
    left: 7%;
    height: 95%;
    line-height: 0;
}
#mainimg h2 img {
    height: 100%;
}

.sub1 {
    width: 70%;
    margin: 0 auto 2em;
}
.sub2 {
    width: 70%;
    margin: 0 auto;
}

.ru_box ul {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: -5em;
}
.ru_box ul li {
    width: 45%;
    margin-bottom: 5em;
}

.tx1 {
    width: 60%;
    margin: 0 auto 2em;
    line-height: 0;
}
.tx2 {
    width: 50%;
    margin: 2em auto 5em;
    line-height: 0;
}

.mdl_img {
    position: relative;
    width: 50%;
    margin: -10em auto 3em;
}

.tx3 {
    width: 50%;
    margin: 4em auto 0;
    line-height: 0;
}

.book_box ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.book_box ul li:first-child {
    width: 45%;
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.3));
}
.book_box ul li:last-child {
    width: 50%;
}
.book_box ul li:last-child p {
    width: 80%;
    margin: 4em auto 0;
}
.btn1 {
    width: 70%;
    margin: 2em auto 0;
}

.pr_box ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.pr_box ul li:first-child {
    width: 47%;
}
.pr_box ul li:last-child {
    width: 47%;
}
.tx7 {
    width: 50%;
    margin: 4em auto
}
.tx8 {
    width: 50%;
    margin: 0 auto
}

.kaijo {
    width: 70%;
    margin: 0 auto 5em;
}
.kaijo h2 {
    width: 70%;
    margin: 0 auto 4em;
}
.kaijo h3 {
    width: 70%;
    margin: 0 auto;
}

@media screen and (max-width: 960px) {
#mainimg {
    aspect-ratio: 5 / 4;
    height: auto;
    min-height: auto;
}
#mainimg h1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    line-height: 0;
}
#mainimg h2 {
    bottom: -4em;
    left: 7%;
    height: 90%;
}  

}


@media screen and (max-width: 560px) {
#mainimg h2 {
    bottom: -3em;
    left: 7%;
    height: 90%;
}  

.sub1 {
    width: 90%;
    margin: 0 auto 2em;
}
.sub2 {
    width: 90%;
    margin: 0 auto 2em;
}

.ru_box ul {
    margin-bottom: -3em;
}
.ru_box ul li {
    width: 80%;
    margin-bottom: 3em;
}

.tx1 {
    width: 90%;
    margin: 0 auto 2em;
    line-height: 0;
}
.tx2 {
    width: 80%;
    margin: 2em auto 5em;
    line-height: 0;
}

.mdl_img {
    position: relative;
    width: 60%;
    margin: -8em auto 2em;
}

.tx3 {
    width: 70%;
    margin: 3em auto 0;
    line-height: 0;
}

.book_box ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
.book_box ul li:first-child {
    width: 100%;
}
.book_box ul li:last-child {
    width: 100%;
}
.book_box ul li:last-child p {
    width: 80%;
    margin: 2em auto 2em;
}
.btn1 {
    width: 100%;
    margin: 2em auto 0;
}

.pr_box ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column-reverse;
}
.pr_box ul li:first-child {
    width: 100%;
}
.pr_box ul li:last-child {
    width: 90%;
}
.tx7 {
    width: 80%;
    margin: 3em auto
}
.tx8 {
    width: 80%;
    margin: 0 auto
}

.kaijo {
    width: 100%;
    margin: 0 auto 3em;
}
.kaijo h2 {
    width: 70%;
    margin: 0 auto 2em;
}
.kaijo h3 {
    width: 80%;
    margin: 0 auto;
}

}