@charset "UTF-8";

#content .main_title_box{background:url("/movie/images/main_title_bg.webp")no-repeat center;background-size:cover;}



body.modal-open {overflow: hidden;}
html {overflow-y: scroll;}


.tab_block {width: 100%;max-width: 1000px;margin: auto;padding-top: 100px;text-align: left;}
.movie_tabs {display: inline-block;gap: 20px;padding: 0 0 0 40px;}
@media (max-width: 768px) {.tab_block {padding-top: 10vw;}
.movie_tabs {display: flex;flex-wrap: nowrap;overflow-x: auto;gap: 0;padding:0 0 0 10px;-webkit-overflow-scrolling: touch;scroll-behavior: smooth;padding-left: 10px;scroll-padding-left: 10px;}

.movie_tabs::before {content: "";flex: 0 0 5px;}
.movie_tabs::-webkit-scrollbar {display: none;}

.tab-btn {flex: 0 0 auto;min-height: 48px;padding: 14px 22px;font-size: 1.4em;border-radius: 16px 16px 0 0;white-space: nowrap;transition: 0.25s;width:auto;}
/* 非アクティブ */
.tab-btn:not(.active) {background: #d9d2c2;color: #555;  padding:0 10px;}
/* アクティブ強調 */
.tab-btn.active {background: var(--color-base);color: #fff;  padding:0 10px;}
/* タップ感 */
.tab-btn:active {transform: scale(0.96);}
.movie_tabs {scroll-snap-type: x mandatory;}
.tab-btn {scroll-snap-align: start;}
}


.tab-btn {padding: 10px;border: none;background:var(--color-base2);cursor: pointer;transition: 0.3s;border-radius: 10px 10px 0 0;box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);font-family: "Kiwi Maru", serif;font-size: 1.6em;margin-right: 10px;line-height: 1.6;flex: 1 1 auto;text-align: center;}
.tab-btn:not(.active) {}
.tab-btn.active {background:var(--color-base);color: #fff;box-shadow: none;}


.movie_block_wrap {width: 100%;max-width: 1000px;margin: 0 auto 100px;position: relative;}
.wrap_back {background:#e8e2d4;padding: 40px;}
@media (max-width: 768px) {
.movie_block_wrap {margin: 0 auto 10vw;}
.wrap_back {padding: 5vw;}
.tab-btn {font-size: 1.4em;}
}


.movie_block {position: absolute;inset: 0;opacity: 0;visibility: hidden;transition: opacity .4s ease;display: none;}
.movie_block.active {position: relative;opacity: 1;visibility: visible;display: block !important;}
.movie_block .title{margin: 0 0 40px;text-align: left;position: relative;}
.movie_block .title h3.tab_title {font-size: 2em;line-height: 1.4;font-weight: 500;letter-spacing: 0.08em;font-family: "Kiwi Maru", serif;}
.movie_block .title p.number {font-size: 1.2em;line-height: 1.4;position: absolute;right: 0;bottom: 0;}
@media (max-width: 768px) {
.movie_block .title h3.tab_title {font-size: 1.4em;margin: 0 0 5px;letter-spacing: 0;}
.movie_block .title{margin: 0 0 5vw;}
.movie_block .title p.number {font-size: 1.4em;position: inherit;right: inherit;bottom: inherit;}
}



.movie_block ul.movie_list {display: grid;grid-template-columns: repeat(4, minmax(0,1fr));gap: 20px;}
@media (max-width: 1024px) {
.movie_block ul.movie_list {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 768px) {
.movie_block ul.movie_list {grid-template-columns: repeat(3, 1fr);;}
}

.movie_block ul.movie_list li {list-style: none;width: 100%;min-width: 0;padding: 0;margin-bottom: 20px; text-align: left;}
.movie_block ul.movie_list li .text_block {padding: 5px 8px;background: var(--color-base);}
.movie_block ul.movie_list li p.movie_title {font-size: 1.2em;line-height: 1.6;font-weight: 500;color:#fff;margin: 0 0 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;height: 3em;}
.movie_block ul.movie_list li p.movie_comment {font-size: 1.6em;line-height: 1.4;margin: 5px 0 0;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
@media (max-width: 768px) {
.movie_block ul.movie_list {gap: 2.5vw;}
.movie_block ul.movie_list li {margin-bottom: 0;}
.movie_block ul.movie_list li p.movie_title { font-size: 1em; }
.movie_block ul.movie_list li p.movie_comment { font-size: 1.6em; }
}




.modal {display: none;position: fixed;inset: 0;background: rgba(0,0,0,0.85);z-index: 9999;justify-content: center;align-items: center;}
.modal.active {display: flex;}
.modal-content {position: relative;width: 80vw;max-width: 320px;}
.video-wrap {position: relative;width: 100%;padding-top: 177.77%;}

.video-wrap iframe {position: absolute;inset: 0;width: 100%;height: 100%;border: 0;}
.close-btn {position: absolute;top: -45px;right: 0;width: 40px;height: 40px;border-radius: 50%;background: rgba(0,0,0,0.7);color: #fff;font-size: 22px;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: 0.3s;}
.close-btn:hover {background: rgba(255,0,0,0.8);}

.shortmovie {cursor: pointer;}
.shortmovie {width: 100%;aspect-ratio: 9 / 16;position: relative;overflow: hidden;cursor: pointer;}
.shortmovie img {width: 100%;height: 100%;object-fit: cover;}

.shortmovie::after {content: "";position: absolute;top: 50%;left: 50%;width: 70px;height: 70px;transform: translate(-50%, -50%);background: rgba(0, 0, 0, 0.6);border-radius: 50%;transition: 0.3s;}
.shortmovie::before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-40%, -50%);border-style: solid;border-width: 14px 0 14px 22px;border-color: transparent transparent transparent #fff;z-index: 2;}
.shortmovie:hover::after {background: rgba(255, 0, 0, 0.8);transform: translate(-50%, -50%) scale(1.1);}
@media screen and (max-width: 767px) {
.shortmovie::after {width: 50px;height: 50px;}
.shortmovie::before {border-width: 10px 0 10px 18px;}

}



.pager {overflow: hidden;padding: 40px 0 0;}
.pager ul {list-style: none;position: relative;left: 50%;float: left;}
.pager ul li {margin: 0 1px;position: relative;left: -50%;float: left;}
.pager ul li span,
.pager ul li a {display: block;font-size: 16px;padding: 0.6em 1em;text-decoration:none;}
.pager ul li a {background:var(--color-base);color: #ffffff;}
.pager ul li a:hover {background: var(--color-base2);}
.pager ul li.current{background: var(--color-base2);color: #ffffff;}

@media screen and (max-width: 767px) {
.pager {padding: 10vw 0 0;}
.pager ul {list-style: none;position: relative;left: 50%;float: left;}
.pager ul li {margin: 0 1px;position: relative;left: -50%;float: left;}
.pager ul li span,
.pager ul li a {display: block;font-size: 12px;padding: 0.8em;text-decoration:none;}
.pager ul li a {background: var(--color-base);color: #ffffff;}
.pager ul li a:hover {background: var(--color-base2);}
.pager ul li.current{background-color:var(--color-base2);}
}