:root {
    --vh:100vh;
}

/* titlebox */
.titlebox::after { content:""; display:block; clear:both; }
.titlebox strong{ font-weight:900; }
.titlebox .btn { float:right; margin-top:1.25rem; margin-right:4px; }

/**************************************************
* main-sect-visual
**************************************************/
.main-sect-visual { position:relative; min-height:332px; max-height:1200px; height:35vh; background:url('../img/main/main_bg.png') no-repeat center center; }
.main-sect-visual .container { position:relative; }
.main-sect-visual .container, .main-sect-visual .main-visual-slide { height:100%; }

.main-visual-slide a { display:block; height:100%; }
.main-visual-slide .main-visual-item-bg { width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1; overflow:hidden; }
.main-visual-slide img { opacity:0; }

.main-visual-slide .swiper-slide.main-visual-item01 .main-visual-item-bg { background:url("../img/main/main_visual01.jpg") no-repeat 50% 50%/ cover; }
.main-visual-slide .swiper-slide.main-visual-item02 .main-visual-item-bg { background:url("../img/main/main_visual02.jpg") no-repeat 50% 50%/ cover; }
.main-visual-slide .swiper-slide.main-visual-item03 .main-visual-item-bg { background:url("../img/main/main_visual03.jpg") no-repeat 50% 50%/ cover; }

.main-slide-button > div::after { font-size:2.75rem; }
.main-slide-button .swiper-button-prev { left:-6%; color:#231f20; }
.main-slide-button .swiper-button-next { right:-6%; color:#231f20; }

.main-slide-pagination { position:static !important; margin-top:7px;  }
.main-slide-pagination .swiper-pagination-bullet { margin:0 4px; opacity:1; background-color:#fee06e; }
.main-slide-pagination .swiper-pagination-bullet-active { background-color:#5b3619; }

@media (max-width:991px) {
    .main-slide-button .swiper-button-prev { left:1%; }
    .main-slide-button .swiper-button-next { right:1%; }
}
@media (max-width:749px) {
    .main-sect-visual .container { padding:0; }
    .main-sect-visual { min-height:inherit; height:auto; }
}
@media (max-width:479px) {

}

/**************************************************
* main-sect-picturebook
**************************************************/
.main-sect-picturebook .cont-wrap { position:relative; }
.main-picturebook-slide { margin:5% 0 3%; }
.main-picturebook-slide .swiper-slide { text-align:center; }
.main-picturebook-slide .swiper-slide .imgbox { padding:10px; border:1px solid #ccc; }
.main-picturebook-slide .swiper-slide p { margin-top:8px; }

.main-picturebook-slide-scrollbar { height:4px; }
.main-picturebook-slide-scrollbar .swiper-scrollbar-drag { background-color:#fee06e; }

.main-picturebook-slide-button > div::after { font-size:2.75rem; }
.main-picturebook-slide-button .swiper-button-prev { left:-6%; margin-top:calc(-1.5% - (var(--swiper-navigation-size)/ 2)); color:#231f20; }
.main-picturebook-slide-button .swiper-button-next { right:-6%; margin-top:calc(-1.5% - (var(--swiper-navigation-size)/ 2)); color:#231f20; }

@media (max-width:991px) {
    .main-picturebook-slide-button .swiper-button-prev { left:1%; }
    .main-picturebook-slide-button .swiper-button-next { right:1%; }
}

/**************************************************
* main-sect-recommend
**************************************************/
.main-sect-recommend .cont-wrap { position:relative; }
.main-recommend-slide { margin:5% 0 1%; }
.main-recommend-slide .swiper-slide { text-align:center; }
.main-recommend-slide .swiper-slide p { margin-top:8px; }

.main-recommend-pagination { position:static !important; margin-top:7px; }
.main-recommend-pagination .swiper-pagination-bullet { margin:0 4px; opacity:1; background-color:#fee06e; }
.main-recommend-pagination .swiper-pagination-bullet-active { background-color:#5b3619; }

.main-recommend-slide-button > div::after { font-size:2.75rem; }
.main-recommend-slide-button .swiper-button-prev { left:-6%; margin-top:calc(-1.5% - (var(--swiper-navigation-size)/ 2)); color:#231f20; }
.main-recommend-slide-button .swiper-button-next { right:-6%; margin-top:calc(-1.5% - (var(--swiper-navigation-size)/ 2)); color:#231f20; }

@media (max-width:991px) {
    .main-recommend-slide-button .swiper-button-prev { left:1%; }
    .main-recommend-slide-button .swiper-button-next { right:1%; }
}

/**************************************************
* main-sect-youtube
**************************************************/
.main-sect-youtube .titlebox h2 { margin-bottom:5rem; }

.main-sect-youtube .d-flbox { width:60%; }
.main-sect-youtube .d-flbox iframe { width:100%; aspect-ratio:16/9; vertical-align:top; }

.main-sect-youtube .d-frbox { width:40%; padding-left:3%; display:flex; flex-direction:column; justify-content:space-between; }
.main-sect-youtube .d-frbox .txtbox .txt01 { margin-bottom:8px; font-size:1.0625rem; font-weight:600; word-break:keep-all; }
.main-sect-youtube .d-frbox .txtbox .txt02 { margin-bottom:8px; font-size:0.9375rem; word-break:keep-all; }
.main-sect-youtube .d-frbox .txtbox .btn { padding:0 10px; background-color:#f04844; border-color:#f04844; border-radius:4px; }

#main-youtube-slide { position:relative; width:100%; }
#main-youtube-slide .imgbox { width:100%; aspect-ratio:16/9; }

.main-youtube-slide-button { position:relative; margin-bottom:8px; text-align:right; }
.main-youtube-slide-button > span { position:static; display:inline-block; width:0.875rem; height:1.625rem; color:#5b3619; }
.main-youtube-slide-button > span::after { font-size:1.25rem; }

#main-youtube-slide .main-youtube-slide-pagination { position:relative; display:inline-block; margin:0 4px; display:inline-flex; align-items:center; justify-content:center; transform:translateY(-50%); }
#main-youtube-slide .main-youtube-slide-pagination .swiper-pagination-bullet { margin:0 4px; background-color:#fee06e; opacity:1; }
#main-youtube-slide .main-youtube-slide-pagination .swiper-pagination-bullet-active { background-color:#5b3619; }

@media (max-width:991px) {
    .main-sect-youtube .titlebox h2 { margin-bottom:3.75rem; }
    .main-sect-youtube .d-flex { flex-direction:column; align-items:center; }
    .main-sect-youtube .d-flbox { width:80%; padding-right:0; }
    .main-sect-youtube .d-frbox { width:80%; padding-left:0; }
    
    .main-sect-youtube .d-frbox .txtbox .txt01 { margin-top:1.5rem; }
    #main-youtube-slide .main-youtube-slide-pagination { transform:translateY(-60%); }
}
@media (max-width:639px) {
    .main-sect-youtube .titlebox h2 { margin-bottom:2.5rem; }
    .main-sect-youtube .d-flbox { width:100%; }
    .main-sect-youtube .d-frbox { width:100%; }
}
@media (max-width:479px) {
    #main-youtube-slide .main-youtube-slide-pagination { transform:translateY(-25%); }
}