@charset "utf-8";

:root {
  --font-base: "Shippori Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --font-en: "Cormorant Garamond", serif;
  --font-sc: "Noto Serif SC", "Shippori Mincho", "Shippori Mincho", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Sawarabi Mincho", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  --font-cinzel: "Cinzel", "Cormorant Garamond", serif;
  --font-sans: "Noto Sans JP", sans-serif;

  --header-sp: 48.805815161rem;
  --header-pc: 49.1666666667rem;
  --pt: 177.570093458rem;
  --pb: 20.7684319834rem;
}

@font-face {
  font-family: "Garamond Three";
  src: url("../../fonts/kokuyo_lp/Garamond-Three-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}


/* html{
    font-size: 0.30534351145vw !important;
}
@media screen and (min-width: 768px){
    html {
        font-size: 1.04166666667vw !important;
    }
}
@media screen and (min-width: 2161px){
    html {
        font-size: 22.5px !important;
    }
} */

/* common.css外から追記 */
.kkyheadnavi {
    width: 98.9%;
}
/* headerの要素が溢れてしまっているので、申し訳ありませんが追記してます。 */

body {
  width: 100%;
  height: auto;
  font-size: 16.6147455867rem;
  font-weight: 400;
  line-height: 2;
  color: #000000;
  margin: 0;
  padding: 0;
  max-width: 100%;
  box-sizing: border-box;
}
@media screen and (min-width: 768px){
    body {
        font-size: 15rem;
    }
}

.lpContent:where(h1,h2,h3,h4,h5,span,p) {
    margin:0;
    padding:0;
}

ul {
    list-style: none;
}

.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}
.text-center_pc {
  text-align: left !important;
}
@media screen and (min-width: 768px){
  .text-center_pc {
    text-align: center !important;
  }
}
.text-center_sp {
  text-align: center !important;
}
@media screen and (min-width: 768px){
  .text-center_pc {
    text-align: left !important;
  }
}
.brSp {
  display: block;
}
@media screen and (min-width: 768px){
  .brSp {
    display: none;
  }
}
.brPc {
  display: none;
}
@media screen and (min-width: 768px){
  .brPc {
    display: block;
  }
}

.containerBase {
    width: 100%;
    padding: 0 22.8452751817rem 0 23.8836967809rem;
    margin: 0 auto;
}
@media screen and (min-width: 768px){
    .containerBase {
        max-width: calc(1680px + 320rem);
        padding: 0 160rem;
    }
}

.fontSc {
    font-family: var(--font-sc);
}

.lpContent {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: var(--font-base) !important;
}

.lpFv {
    background: linear-gradient(90deg, #E8FAF3 0%, #46FFB9 100%);
}

#lh-box.lpFvVisual {
  padding: var(--pt) 22.8452751817rem var(--pb) 23.8836967809rem;
  height: calc(100svh - var(--header-sp)); /* ←固定 */
  box-sizing: border-box;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  #lh-box.lpFvVisual {
    padding: var(--pt) 22.8452751817rem var(--pb) 23.8836967809rem;
    height: calc(799.166666667rem - 49.1666666667rem);
  }
}
@media (min-width: 1200px) {
  #lh-box.lpFvVisual {
    --pt: 106.666666667rem;
    --pb: 13.3333333333rem;
    padding: var(--pt) 16.6666666667rem var(--pb);
    height: calc(100svh - var(--header-pc)); /* ←固定 */
  }
}

.lpFvVideo,
.lpFvSlider,
.lpFvSlider .swiper-wrapper,
.lpFvSlider .swiper-slide {
  height: calc((100svh - var(--header-sp)) - var(--pt) - var(--pb));
}
@media (min-width: 768px) {
  .lpFvVideo,
  .lpFvSlider,
  .lpFvSlider .swiper-wrapper,
  .lpFvSlider .swiper-slide {
    height: 100%;
  }
}
@media (min-width: 1200px) {
  .lpFvVideo,
  .lpFvSlider,
  .lpFvSlider .swiper-wrapper,
  .lpFvSlider .swiper-slide {
    height: calc((100svh - var(--header-pc)) - var(--pt) - var(--pb));
  }
}

.lpFvVideo {
  width: 100%;
  position: relative;
}

.lpFvVideo video,
.lpFvSliderImage img,
.lpFvSliderCatch img,
.lpFvSliderTitle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lpFvCatch {
    display: block;
    width: 219.106957425rem;
    position: absolute;
    top: 41.5368639668rem;
    left: 50%;
    translate: -50% 0;
}
@media screen and (min-width: 768px){
    .lpFvCatch {
        width: 1067.5rem;
        top: 36.4166666667rem;
    }
}

.lpFvCatch picture,
.lpFvCatch img {
    width: 100%;
    height: 100%;
    display: block;
}

.lpFvSliderCatch {
    width: 25.5867082035rem;
    position: absolute;
    top: 31.1526479751rem;
    left: 31.1526479751rem;
}
@media screen and (min-width: 768px){
    .lpFvSliderCatch {
        width: 44.1166666667rem;
        top: 61.4166666667rem;
        left: auto;
        right: 178.916666667rem;
    }
}
.lpFvSlider .swiper-slide-02 .lpFvSliderCatch {
    width: 26.1059190031rem;
    top: 113.707165109rem;
    left: 56.0747663551rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-02 .lpFvSliderCatch {
        width: 45rem;
        top: 85.9166666667rem;
        left: 261.416666667rem;
    }
}
.lpFvSlider .swiper-slide-03 .lpFvSliderCatch {
    top: 81.8276220145rem;
    left: auto;
    right: 75.0778816199rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-03 .lpFvSliderCatch {
        top: 133.75rem;
        right: 189.916666667rem;
    }
}

.lpFvSliderTitle {
    display: block;
    width: 293.541017653rem;
    position: absolute;
    bottom: 31.1526479751rem;
    left: 50%;
    translate: -50% 0;
}
@media screen and (min-width: 768px){
    .lpFvSliderTitle {
        width: 500rem;
        bottom: 69.5rem;
    }
}
.lpFvSlider .swiper-slide-02 .lpFvSliderTitle {
    width: 216.998961578rem;
    bottom: 28.4527518172rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-02 .lpFvSliderTitle {
        width: 369.583333333rem;
        bottom: 64.9166666667rem;
    }
}
.lpFvSlider .swiper-slide-03 .lpFvSliderTitle {
    width: 284.330218069rem;
    bottom: 32.8141225337rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-03 .lpFvSliderTitle {
        width: 484.325rem;
        bottom: 72.3333333333rem;
    }
}

.lpFvVisual .swiper-pagination {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8.30737279335rem;
    top: 10.3842159917rem;
    left: 10.3842159917rem;
    bottom: auto;
}
@media screen and (min-width: 768px){
    .lpFvVisual .swiper-pagination {
        top: auto;
        left: auto;
        bottom: 16.6666666667rem;
        right: 16.6666666667rem;
        gap: 9.09166666667rem;
    }
}

.lpFvVisual .swiper-pagination .swiper-pagination-bullet {
    width: 6.23052959502rem;
    height: 6.23052959502rem;
    background: #ffffff;
    opacity: 0.5;
    margin: 0;
}
@media screen and (min-width: 768px){
    .lpFvVisual .swiper-pagination .swiper-pagination-bullet {
        width: 6.81666666667rem;
        height: 6.81666666667rem;
    }
}

.lpFvVisual .swiper-pagination .swiper-pagination-bullet-active {
    width: 16.6147455867rem;
    height: 16.6147455867rem;
    background: url(../../images/kokuyo_lp/component/circle.svg) center center no-repeat;
    background-size: 100%;
    opacity: 1;
}
@media screen and (min-width: 768px){
    .lpFvVisual .swiper-pagination .swiper-pagination-bullet-active {
        width: 18.1833333333rem;
        height: 18.1833333333rem;
    }
}

.lpFvHead {
    display: none;
}
@media screen and (min-width: 768px){
    .lpFvHead {
        width: fit-content;
        display: flex;
        align-items: center;
        gap: 33.3333333333rem;
        position: absolute;
        top: 130.833333333rem;
        right: 39.1666666667rem;
        z-index: 1;
    }
}

.lpFvHeadlanguage {
    display: flex;
    align-items: center;
    position: relative;
}

.lpFvHeadlanguage a {
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 10rem;
    line-height: 1;
    letter-spacing: 0.04em;
    color: #ffffff;
    display: block;
    padding: 0 8.33333333333rem;
}
.lpFvHeadlanguage a + a {
    border-left: 2px solid #ffffff;
    padding: 0 8.33333333333rem;
}
.lpFvHeadlanguage a:last-child {
    padding: 0 0 0 8.33333333333rem;
}

.lpFvHeadLInks {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 25.8333333333rem;
}

.lpFvSnsLink {
    width: 24.9221183801rem;
    height: 24.9221183801rem;
}
@media screen and (min-width: 768px){
    .lpFvSnsLink {
        width: auto;
        height: 18.3333333333rem;
    }
}

.lpFvSnsLink-sp {
    position: absolute;
    z-index: 2;
}
@media screen and (min-width: 768px){
    .lpFvSnsLink-sp {
        display: none;
        position: relative;
        top: auto;
        right: auto;
    }
}
.lpFvSnsLink-pc {
    display: none;
}
@media screen and (min-width: 768px){
    .lpFvSnsLink-pc {
        display: flex;
    }
}

.lpFvSnsLink img {
    width: 100%;
    height: 100%;
}

.lpFvSnsLink-la {
    top: 31.1526479751rem;
    right: 32.1910695742rem;
}
.lpFvSnsLink-la::after {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/component/icon_la-bk.svg) center center / 100% no-repeat;
    width: 24.9221183801rem;
    height: 24.9221183801rem;
    transition: translate 0.2s ease-out;
}
.lpFvSnsLink-la.visible::after {
    background: url(../../images/kokuyo_lp/component/icon_la-bk.svg) center center / 100% no-repeat;
}

.lpFvSnsLink-cp {
    top: 31.1526479751rem;
    right: 33.3437175493rem;
}
.lpFvSnsLink-cp::after {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/component/icon_cp.svg) center center / 100% no-repeat;
    width: 24.9221183801rem;
    height: 24.9221183801rem;
    transition: translate 0.2s ease-out;
}
.lpFvSnsLink-cp.active::after {
    background: url(../../images/kokuyo_lp/component/icon_cp-bk.svg) center center / 100% no-repeat;
}

.lpFvVisual.visible .lpFvSnsLink-cp::after {
    opacity: 0;
}
.lpFvVisual.active .lpFvSnsLink-la::after {
    opacity: 0;
}

.lpFvMenu {
    width: 100%;
    height: 0;
    background-color: #46FFB9;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    /* translate: 0 -200%; */
    z-index: 1;
    transition: all 0.5s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.lpFvMenuList {
    border-top: 1px solid #ffffff;
    translate: 0 -200%;
    transition: all 0.6s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.lpFvMenuList li {
    border-bottom: 1px solid #ffffff;
}

.lpFvMenuBtn {
    width: 100%;
    height: 52.9595015576rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var( --font-sans);
    font-weight: 700;
    font-size: 16.6147456rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
}

.lpFvMenuList li:nth-child(2) .lpFvMenuBtn {
    font-size: 18.691588785rem;
}

.lpFvMenuRow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 47.7673935618rem;
    padding: 31.1526479751rem 0;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
    translate: 0 -200%;
    transition: all 0.6s cubic-bezier(0.18, 0.06, 0.23, 1);
}

.lpFvMenuLink {
    width: 31.1526479751rem;
    height: 35.3063343718rem;
    position: relative;
}

.lpFvMenuLink::after {
    content: "";
    position: absolute;
    width: 31.1526479751rem;
    height: 35.3063343718rem;
    transition: translate 0.2s ease-out;
}

.lpFvMenuLink-ig::after {
    background: url(../../images/kokuyo_lp/component/icon_ig-bk.svg) center center / 100% no-repeat;
}
.lpFvMenuLink-x::after {
    background: url(../../images/kokuyo_lp/component/icon_x-bk.svg) center center / 100% no-repeat;
}
.lpFvMenuLink-yt {
    width: 41.5368639668rem;
}
.lpFvMenuLink-yt::after {
    background: url(../../images/kokuyo_lp/component/icon_yt-bk.svg) center center / 100% no-repeat;
    width: 41.5368639668rem;
}
.lpFvMenuLink-tt::after {
   background: url(../../images/kokuyo_lp/component/icon_tt-bk.svg) center center / 100% no-repeat;
}

.lpFvMenu.visible {
    /* height: 300.10384216rem; */
    height: 247.144340602rem;
    padding: 87.2274143302rem 22.8452751817rem 51.9210799585rem 23.8836967809rem;
    /* translate: 0 0; */
}
.lpFvMenu-cn.visible {
    height: 300.10384216rem;
    /* translate: 0 0; */
}
.lpFvMenu.visible .lpFvMenuList {
    translate: 0 0;
}

.lpFvMenu.active {
    height: 232.606438214rem;
    padding: 87.2274143302rem 22.8452751817rem 51.9210799585rem 23.8836967809rem;
    /* translate: 0 0; */
}
.lpFvMenu.active .lpFvMenuRow{
    translate: 0 0;
}

.lpFvTxt {
    padding: 103.842159917rem 0 84.1121495327rem;
}
@media screen and (min-width: 768px){
    .lpFvTxt {
        padding: 154.166666667rem 0 206.666666667rem;
    }
}

.lpFvTxtTitle {
    width: 267.912772586rem;
    display: block;
    margin: 0 auto 52.9595015576rem;
}
@media screen and (min-width: 768px){
    .lpFvTxtTitle {
        width: 258.333333333rem;
        margin: 0 auto 55rem;
    }
}
.lpFvTxtTitle img {
    width: 100%;
    height: 100%;
}

.lpFvTxtLine p {
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.07em;
}
@media screen and (min-width: 768px){
    .lpFvTxtLine p {
        letter-spacing: -0.02em;
    }
}

.lpFvfilms {
    width: 100%;
    padding: 0 0 84.1121495327rem;
}
@media screen and (min-width: 768px){
    .lpFvfilms {
        padding: 0 0 117.5rem;
    }
}

.lpFvfilmsHeading {
    font-family: "Garamond Three", "Cormorant Garamond", serif;
    font-weight: 400;
    font-size: 45.6905503634rem;
    text-align: center;
    line-height: 1.3;
    color: #ffffff;
    margin: 0 auto 32.1910695742rem;
    display: block;
}
@media screen and (min-width: 768px){
    .lpFvfilmsHeading {
        font-size: 95rem;
        line-height: 0.8;
        margin: 0 auto 50rem;
        white-space: nowrap;
    }
}

.lpFvfilmsTrailer {
    width: 100%;
}

.lpFvfilmsTrailerVideo {
    width: 100%;
    height: 203.271028037rem;
    display: none;
    opacity: 0;
    transition: opacity .3s;
}
@media screen and (min-width: 768px){
    .lpFvfilmsTrailer .lpFvfilmsTrailerVideo {
        height: 630rem;
    }
}
.lpFvfilmsTrailer video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.lpFvfilmsTrailer iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* アクティブなボタン */
.lpFvfilms:has(#film-30:checked) .lpFvfilmsNav label[for="film-30"],
.lpFvfilms:has(#film-15:checked) .lpFvfilmsNav label[for="film-15"]{
  opacity: 1;
}
/* アクティブなコンテンツ */
.lpFvfilms:has(#film-30:checked) .lpFvfilmsTrailer .s-30,
.lpFvfilms:has(#film-15:checked) .lpFvfilmsTrailer .s-15 {
  display: block;
  opacity: 1;
}

.lpFvfilmsRow {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 31.1526479751rem;
    margin: 18.691588785rem 0 0;
}
@media screen and (min-width: 768px){
    .lpFvfilmsRow {
        flex-direction: row;
        justify-content: space-between;
        margin: 30.8333333333rem 0 0;
    }
}

.lpFvfilmsCatch {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12.46105919rem;
}
@media screen and (min-width: 768px){
    .lpFvfilmsCatch {
        align-items: baseline;
        justify-content: flex-start;
        gap: 12.5rem;
    }
}
.lpFvfilmsCatch p {
    font-family: var(--font-en);
    font-weight: 400;
    font-size: 18.691588785rem;
    line-height: 1;
}
@media screen and (min-width: 768px){
    .lpFvfilmsCatch p {
        font-size: 25rem;
    }
}
.lpFvfilmsCatch span {
    font-weight: 400;
    font-size: 16.6147456rem;
    line-height: 1;
}
@media screen and (min-width: 768px){
    .lpFvfilmsCatch span {
        font-size: 16.6666666667rem;
    }
}

.lpFvfilmsTab {
    width: fit-content;
}
input[name="film"] {
  display: none;
}
.lpFvfilmsNav {
    display: flex;
    align-items: center;
}
.lpFvfilmsNavBtn {
    width: fit-content;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity .3s;
}
.lpFvfilmsNavBtn p {
    font-size: 16.6147455867rem;
    line-height: 1.35;
    letter-spacing: 0.05em;
}
@media screen and (min-width: 768px){
    .lpFvfilmsNavBtn p {
        font-size: 16.6666666667rem;
    }
}

.lpFvfilmsNavBtn:first-child {
    padding: 0 31.1526479751rem 0 0;
}
@media screen and (min-width: 768px){
    .lpFvfilmsNavBtn:first-child {
        padding: 0 25rem 0 0;
    }
}
.lpFvfilmsNavBtn:last-child {
    padding: 0 0 0 31.1526479751rem;
    border-left: 1px solid #000000;
}
@media screen and (min-width: 768px){
    .lpFvfilmsNavBtn:last-child {
        padding: 0 0 0 25rem;
    }
}

@media screen and (min-width: 768px){
    .lpFvfilmsNavBtn:hover {
        opacity: 1;
    }
}

.lpFvGallery {
    width: 100%;
    padding: 0 0 84.1121495327rem;
}
@media screen and (min-width: 768px){
    .lpFvGallery {
        padding: 0 0 183.333333333rem;
    }
}

.lpFvGalleryImage {
    width: 100%;
    display: block;
}

.lpFvGalleryImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lpProItem {
    width: 100%;
    position: relative;
}

.lpProVideo {
    width: 100%;
    /* height: 37.5rem; */
    height: 100vh;
    position: sticky;
    top: 0;
    margin: -1px 0 0;
}
/* @media screen and (min-width: 768px){
    .lpProVideo {
        height: 53.5rem;
    }
} */

.lpProVideo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lpProVideoLabel {
    width: fit-content;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -55%;
    color: #ffffff;
}
@media screen and (min-width: 768px){
    .lpProVideoLabel {
        translate: -50% -50%;
    }
}

.lpProCatch {
    display: block;
    width: 301.142263759rem;
    height: auto;
    margin: 0 auto 51.9210799585rem;
}
@media screen and (min-width: 768px){
    .lpProCatch {
        display: block;
        width: 425.833333333rem;
        margin: 0 auto 83.3333333333rem;
    }
}

.lpProCatch img {
    width: 100%;
    height: 100%;
}

.lpProDirector {
    font-weight: 400;
    font-size: 22.8452751817rem;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-align: center;
    display: block;
    margin: 0 0 25.9605399792rem;
    white-space: nowrap;
}
@media screen and (min-width: 768px){
    .lpProDirector {
        font-size: 28.3333333333rem;
        letter-spacing: 0.02em;
        margin: 0 0 35.8333333333rem;
    }
}

.lpProActor {
    font-weight: 400;
    font-size: 14.5379023884rem;
    line-height: 1.25;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
}
@media screen and (min-width: 768px){
    .lpProActor {
        font-size: 15rem;
    }
}

.lpProItemContainer {
    position: relative;
    z-index: 1;
    padding: 88.2658359294rem 0 137.07165109rem;
}
@media screen and (min-width: 768px){
    .lpProItemContainer {
        padding: 105rem 0 176.666666667rem;
    }
}

.lpProItem-01 .lpProItemContainer {
    background-color: #80838C;
    background-image: url(../../images/kokuyo_lp/pc/bg-noise.jpg);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}
.lpProItem-01 .lpProItemContainer::before,
.lpProItem-01 .lpProItemContainer::after {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/pc/bg-haikei01.jpg) top right / 190% no-repeat;
    width: 100%;
    height: 630.321910696rem;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    mix-blend-mode: color;
}
@media screen and (min-width: 768px){
    .lpProItem-01 .lpProItemContainer::before,
    .lpProItem-01 .lpProItemContainer::after {
        background: url(../../images/kokuyo_lp/pc/bg-haikei01.jpg) top right / 100% no-repeat;
        height: 879.166666667rem;
    }   
}
.lpProItem-01 .lpProItemContainer::after {
    top: auto;
    bottom: 0;
    rotate: 180deg;
}

.lpProItemTxt {
    width: 100%;
    padding: 0 0 71.6510903427rem;
    border-bottom: 1px solid #FFFFFF33;
    margin: 0 0 40.4984423676rem;
    text-align: center;
    color: #ffffff;
}
@media screen and (min-width: 768px){
    .lpProItemTxt {
        padding: 0 0 114.166666667rem;
        margin: 0 0 77.5rem;
    }
}

.lpProItemTxtCatch {
    font-family: var(--font-en);
    font-weight: 500;
    font-size: 11.4226375909rem;
    line-height: 1;
    letter-spacing: -0.04em;
    display: block;
    width: fit-content;
    padding: 0 0 4.15368639668rem;
    border-bottom: 1px solid #ffffff;
    margin: 0 auto 19.7300103842rem;
}
@media screen and (min-width: 768px){
    .lpProItemTxtCatch {
        font-size: 10rem;
        letter-spacing: 0;
        padding: 0 0 2.5rem;
        margin: 0 auto 23.3333333333rem;
    }
}

.lpProItemTxt p {
    letter-spacing: -0.07em;
}

.lpProItemFilm {
    width: 100%;
    margin: 0 0 86.188992731rem;
}
@media screen and (min-width: 768px){
    .lpProItemFilm {
        margin: 0 0 149.283333333rem;
    }
}

.lpProItemFilmHeading {
    font-size: 21.8068535826rem;
    line-height: 1;
    letter-spacing: -0.04em;
    color: #ffffff;
    display: block;
    margin: 0 0 29.0758047767rem;
}
@media screen and (min-width: 768px){
    .lpProItemFilmHeading {
        font-size: 30.8333333333rem;
        letter-spacing: 0;
        margin: 0 0 37.5rem;
    }
}

.lpProItemFilmlink {
    width: 100%;
    height: 203.271028037rem;
    display: block;
    position: relative;
}
@media screen and (min-width: 768px){
    .lpProItemFilmlink {
        height: 630rem;
    }
}

.lpProItemFilmImage {
    width: 101%;
    height: 101%;
    display: block;
    position: relative;
    contain: paint;
}
.lpProItemFilmImage::after {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/sp/film-edge.svg) center center no-repeat;
    background-size: 100%;
    width: 349.94807892rem;
    height: 191.838006231rem;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
@media screen and (min-width: 768px){
    .lpProItemFilmImage::after {
        background: url(../../images/kokuyo_lp/pc/film-edge.svg) center center no-repeat;
        background-size: 100%;
        width: 1085rem;
        height: 594.166666667rem;
    }
}
.lpProItemFilmImage img {
    width: 101%;
    height: 101%;
    object-fit: cover;
    object-position: center;
}

.lpProItemFilmIcon {
    width: 85.3894080997rem;
    height: 85.3894080997rem;
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
@media screen and (min-width: 768px){
    .lpProItemFilmIcon {
        width: 114.216666667rem;
        height: 114.216666667rem;
    }
}

.lpProItemFilmIcon::after {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/pc/film-accent.svg) center center / 100% no-repeat;
    width: 110.903426791rem;
    height: 110.903426791rem;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    animation: 20s linear infinite rotation1;
}
@media screen and (min-width: 768px){
    .lpProItemFilmIcon::after {
        width: 148.333333333rem;
        height: 148.333333333rem;
    }
}

@keyframes rotation1{
    0%{ transform:rotate(0);}
    100%{ transform:rotate(360deg); }
}

.lpProItemFiimTab {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 30.1142263759rem;
    padding: 40.4984423676rem 0 0;
    border-top: 1px solid #FFFFFF33;
    margin: 41.5368639668rem 0 0;
}
@media screen and (min-width: 768px){
    .lpProItemFiimTab {
        flex-direction: row;
        gap: 66.6666666667rem;
        border-top: none;
        padding: 0;
        margin: 100rem 0 0;
    }
}

input[name="switch-a"],
input[name="switch-b"],
input[name="switch-c"] {
  display: none;
}

.lpProItemFiimTabList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0 20.7684319834rem;
}
@media screen and (min-width: 768px){
    .lpProItemFiimTabList {
        flex: 0 1 303.333333333rem;
        display: flex;
        flex-direction: column;
        gap: 0;
        border-top: 1px solid #ffffff;
    }
}

.lpProItemFiimTabList li {
    width: calc((100% - 20.7684319834rem) / 2);
    border-bottom: 1px solid #ffffff;
}
@media screen and (min-width: 768px){
    .lpProItemFiimTabList li {
        width: 100%;
        height: 73.3333333333rem;
    }
}

.lpProItemFiimTabList li:nth-child(1),
.lpProItemFiimTabList li:nth-child(2) {
    border-top: 1px solid #ffffff;
    height: 63.8629283489rem;
}
@media screen and (min-width: 768px){
    .lpProItemFiimTabList li:nth-child(1),
    .lpProItemFiimTabList li:nth-child(2) {
        border-top: none;
        height: 73.3333333333rem;
    }
}

.lpProItemFiimBtn {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5.19210799585rem;
    color: #ffffff;
    padding: 12.46105919rem 0;
    opacity: 0.5;
    transition: opacity .3s;
}
@media screen and (min-width: 768px){
    .lpProItemFiimBtn {
        height: 73.3333333333rem;
        align-items: flex-start;
        gap: 13.3333333333rem;
        padding: 20rem 8.3333333333rem;
    }
}
@media screen and (min-width: 768px){
    .lpProItemFiimBtn:hover {
        opacity: 1;
    }
}

.lpProItemFiimBtn p {
    font-size: 14.5379023884rem;
    line-height: 1.35;
    letter-spacing: -0.04em;
    text-align: center;
}
@media screen and (min-width: 768px){
    .lpProItemFiimBtn p {
        font-size: 15rem;
        letter-spacing: -0.08em;
        text-align: left;
        margin: -3.33333333333rem 0 0;
    }
}

.lpProItemFiimBtn span {
    font-size: 12.46105919rem;
    letter-spacing: -0.04em;
    text-align: center;
}
@media screen and (min-width: 768px){
    .lpProItemFiimBtn span {
        font-size: 15rem;
    }
}

.lpProItemFiimBtn i {
    font-style: normal;
    font-size: 10.3842159917rem;
    letter-spacing: 0;
}
@media screen and (min-width: 768px){
    .lpProItemFiimBtn i {
        font-size: 10rem;
    }
}

.ActorName {
    font-size: 11.4226375909rem !important;
    line-height: 1;
    letter-spacing: -0.04em;
    text-align: center;
}
@media screen and (min-width: 768px){
    .ActorName {
        font-size: 11.6666666667rem !important;
        text-align: left;
        margin: 0;
    }
}

.lpProItemFiimTabList li:nth-child(1) .lpProItemFiimBtn,
.lpProItemFiimTabList li:nth-child(2) .lpProItemFiimBtn {
    height: 62.8245067497rem;
}
@media screen and (min-width: 768px){
    .lpProItemFiimTabList li:nth-child(1) .lpProItemFiimBtn,
    .lpProItemFiimTabList li:nth-child(2) .lpProItemFiimBtn {
        height: 73.3333333333rem;
    }
}


.lpProItemFiimTabContents {
    width: 100%;
    height: 203.530633437rem;
}
@media screen and (min-width: 768px){
    .lpProItemFiimTabContents {
        flex: 0 1 750rem;
        height: 421.666666667rem;
    }
}

.lpProItemFiimTabContents section {
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
    transition: opacity .3s;
}

.lpProItemFiimTabContents section video,
.lpProItemFiimTabContents section iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* アクティブなボタン */
#tab-10:checked ~ .lpProItemFiimTabList label[for="tab-10"],
#tab-11:checked ~ .lpProItemFiimTabList label[for="tab-11"],
#tab-12:checked ~ .lpProItemFiimTabList label[for="tab-12"],
#tab-13:checked ~ .lpProItemFiimTabList label[for="tab-13"],
#tab-14:checked ~ .lpProItemFiimTabList label[for="tab-14"],
#tab-15:checked ~ .lpProItemFiimTabList label[for="tab-15"],
#tab-20:checked ~ .lpProItemFiimTabList label[for="tab-20"],
#tab-21:checked ~ .lpProItemFiimTabList label[for="tab-21"],
#tab-22:checked ~ .lpProItemFiimTabList label[for="tab-22"],
#tab-23:checked ~ .lpProItemFiimTabList label[for="tab-23"],
#tab-24:checked ~ .lpProItemFiimTabList label[for="tab-24"],
#tab-30:checked ~ .lpProItemFiimTabList label[for="tab-30"],
#tab-31:checked ~ .lpProItemFiimTabList label[for="tab-31"],
#tab-32:checked ~ .lpProItemFiimTabList label[for="tab-32"],
#tab-33:checked ~ .lpProItemFiimTabList label[for="tab-33"],
#tab-34:checked ~ .lpProItemFiimTabList label[for="tab-34"] {
  opacity: 1;
}

/* アクティブなコンテンツ */
#tab-10:checked ~ .lpProItemFiimTabContents .section-10,
#tab-11:checked ~ .lpProItemFiimTabContents .section-11,
#tab-12:checked ~ .lpProItemFiimTabContents .section-12,
#tab-13:checked ~ .lpProItemFiimTabContents .section-13,
#tab-14:checked ~ .lpProItemFiimTabContents .section-14,
#tab-15:checked ~ .lpProItemFiimTabContents .section-15,
#tab-20:checked ~ .lpProItemFiimTabContents .section-20,
#tab-21:checked ~ .lpProItemFiimTabContents .section-21,
#tab-22:checked ~ .lpProItemFiimTabContents .section-22,
#tab-23:checked ~ .lpProItemFiimTabContents .section-23,
#tab-24:checked ~ .lpProItemFiimTabContents .section-24,
#tab-30:checked ~ .lpProItemFiimTabContents .section-30,
#tab-31:checked ~ .lpProItemFiimTabContents .section-31,
#tab-32:checked ~ .lpProItemFiimTabContents .section-32,
#tab-33:checked ~ .lpProItemFiimTabContents .section-33,
#tab-34:checked ~ .lpProItemFiimTabContents .section-34 {
  display: block;
  opacity: 1;
}

.lpProItemHeading {
    font-family: var(--font-en);
    font-weight: 300;
    font-size: 31.1526479751rem;
    line-height: 0.7;
    color: #ffffff;
    display: flex;
}
@media screen and (min-width: 768px){
    .lpProItemHeading {
        font-size: 43.3333333333rem;
        transform-origin: bottom left;
        transform: rotate(90deg);
        position: absolute;
        top: -30rem;
        left: 3.33333333333rem;
    }
}

.lpProItemDirecter {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 31.1526479751rem;
    margin: 0 0 76.8431983385rem;
}
@media screen and (min-width: 768px){
    .lpProItemDirecter {
        flex-direction: row;
        gap: 125rem;
        margin: 0 0 133.333333333rem;
    }
}

.lpProItemDirecterHead {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 33.2294911734rem;
}
@media screen and (min-width: 768px){
    .lpProItemDirecterHead {
        flex: 1 1 0;
        padding: 0 0 0 90rem;
        position: relative;
    }
}

.lpProItemDirecterImage {
    width: 100%;
    height: 361.370716511rem;
    display: block;
    contain: paint;
}
@media screen and (min-width: 768px){
    .lpProItemDirecterImage {
        width: 370rem;
        height: 546.308333333rem;
    }
}

.lpProItemDirecterImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.lpProItemDirecterInner {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40.4984423676rem;
}
@media screen and (min-width: 768px){
    .lpProItemDirecterInner {
        flex: 0 1 535rem;
        gap: 56.6666666667rem;
    }
}

.lpProName {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18.691588785rem;
    color: #ffffff;
}
@media screen and (min-width: 768px){
    .lpProName {
        width: fit-content;
        flex-direction: row;
        align-items: center;
        gap: 0;
        position: relative;
    }
}

.lpProNameJp {
    font-size: 29.0758047767rem;
    line-height: 1.35;
    letter-spacing: 0.08em;
}
@media screen and (min-width: 768px){
    .lpProNameJp {
        font-size: 30.8333333333rem;
        line-height: 1;
        padding-right: 24.1666666667rem;
    }
}

.lpProNameJp span {
    font-size: 14.5379023884rem;
    letter-spacing: 0;
}
@media screen and (min-width: 768px){
    .lpProNameJp span {
        font-size: 15rem;
    }
}

.lpProNameEn {
    font-family: var(--font-en);
    font-size: 14.5379023884rem;
    line-height: 1;
    letter-spacing: -0.04em;
}
@media screen and (min-width: 768px){
    .lpProNameEn {
        font-size: 10.8333333333rem;
        line-height: 1.5;
        letter-spacing: 0;
        display: inline-block;
        padding-left: 25rem;
        margin: 3.33333333333rem 0 0;
        border-left: 1px solid #ffffff;
    }
}

.lpProColumnItme:first-of-type {
    margin: 0 0 43.6137071651rem;
}
@media screen and (min-width: 768px){
    .lpProColumnItme:first-of-type {
        margin: 0 0 44.1666666667rem;
    }
}

.lpProColumnItmeHead {
    width: 100%;
    background: linear-gradient(270deg, #46FFB9 0%, #FFFFFF 100%);
    padding: 7.26895119418rem 6.23052959502rem;
    margin: 0 0 20.7684319834rem;
}
@media screen and (min-width: 768px){
    .lpProColumnItmeHead {
        padding: 5rem;
        margin: 0 0 17.5rem;
    }
}

.lpProColumnItmeHead h5 {
    font-family: var(--font-en);
    font-size: 10.3842159917rem;
    line-height: 0.7;
    letter-spacing: 0.05em;
    text-align: left;
}
@media screen and (min-width: 768px){
    .lpProColumnItmeHead h5 {
        font-size: 8.75rem;
        letter-spacing: 0;
    }
}

.lpProColumnItme p {
    font-size: 14.5379023884rem;
    color: #ffffff;
    text-align: left;
    letter-spacing: -0.07em;
}
@media screen and (min-width: 768px){
    .lpProColumnItme p {
        font-size: 11.6666666667rem;
        letter-spacing: -0.08em;
    }
}

.lpProItemCast {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32.1910695742rem;
    margin: 0 0 79.958463136rem;
}
@media screen and (min-width: 768px){
    .lpProItemCast {
        flex-direction: row;
        position: relative;
        gap: 0;
        padding: 0 0 0 90rem;
        margin: 0 0 114.166666667rem;
    }
}

.lpProItemCastColumn {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 31.1526479751rem 0;
}
@media screen and (min-width: 768px){
    .lpProItemCastColumn {
        width: fit-content;
        display: flex;
        flex-wrap: wrap;
        gap: 50rem 0;
    }
}

.lpProItemCastBlock {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 13.4994807892rem;
    position: relative;
}
@media screen and (min-width: 768px){
    .lpProItemCastBlock {
        width: 257.5rem;
        gap: 21.6666666667rem;
    }
}

.lpProItemCastImage {
    width: 100%;
    height: 180.685358255rem;
    display: block;
    contain: paint;
}
@media screen and (min-width: 768px){
    .lpProItemCastImage {
        height: 257.5rem;
    }
}

.lpProItemCastImage img {
    width: 101%;
    height: 101%;
    object-fit: cover;
    object-position: center;
}

.lpProItemCastTxt {
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 10.3842159917rem;
    color: #ffffff;
}
@media screen and (min-width: 768px){
    .lpProItemCastTxt {
        gap: 12.5rem;
    }
}

.lpProItemCastName {
    font-size: 14.5379023884rem;
    line-height: 1;
}
@media screen and (min-width: 768px){
    .lpProItemCastName {
        font-size: 21.6666666667rem;
    }
}

.lpProItemCastName span {
    font-size: 14.5379023884rem;
}
@media screen and (min-width: 768px){
    .lpProItemCastName span {
        font-size: 13.3333333333rem;
    }
}

.lpProItemCastRole {
    font-size: 13.4994807892rem;
    line-height: 1.25;
    letter-spacing: -0.07em;
}
@media screen and (min-width: 768px){
    .lpProItemCastRole {
        font-size: 11.6666666667rem;
    }
}

.lpProItemCastBlockMark {
    width: fit-content;
    height: auto;
    position: absolute;
    top: 143.302180685rem;
    right: 10.3842159917rem;
}
@media screen and (min-width: 768px){
    .lpProItemCastBlockMark {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6.25rem;
        top: 195rem;
        right: 16.6666666667rem;
    }
}

.lpProItemCastBlockMark div {
    width: 26.9989615784rem;
    height: 26.9989615784rem;
    border-radius: 9999px;
    border: 2px solid #ffffff;
    position: relative;
}
@media screen and (min-width: 768px){
    .lpProItemCastBlockMark div {
        width: 34.1666666667rem;
        height: 34.1666666667rem;
    }
}

.lpProItemCastBlockMark div::before,
.lpProItemCastBlockMark div::after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    width: 8.73312564901rem;
    height: 1.03842159917rem;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
}
@media screen and (min-width: 768px){
    .lpProItemCastBlockMark div::before,
    .lpProItemCastBlockMark div::after {
        width: 10.5333333333rem;
        height: 0.83333333333rem;
    }
}

.lpProItemCastBlockMark div::after {
    rotate: 90deg;
}

.lpProItemCastBlockMark small {
    display: none;
}
@media screen and (min-width: 768px){
    .lpProItemCastBlockMark small {
        font-family: var(--font-en);
        font-weight: 500;
        font-size: 8.33333333333rem;
        line-height: 1;
        color: #ffffff;
        text-align: center;
        display: block;
    }
}

.lpCastModal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #00000099;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 3;
    transition: opacity .3s ease, visibility 0s linear .3s; /* 閉じるときだけ visibility を遅延 */
    pointer-events: none; /* 非表示時の背面クリック防止 */
    will-change: opacity;
}

.lpCastModal.is-open{
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease; /* 開くときは visibility 遅延なし */
  pointer-events: auto;         /* 表示中は操作可能に */
}

.lpCastModalContainer {
    width: 100%;
    height: 100%;
    padding: 76.8431983385rem 22.8452751817rem 31.1526479751rem 23.8836967809rem;
    position: relative;
    pointer-events: all;
    overflow: hidden;
}
@media screen and (min-width: 768px){
    .lpCastModalContainer {
        padding: 100rem 193.333333333rem;
    }
}

.lpCastModalWrap {
    width: fit-content;
    height: auto;
    position: absolute;
    top: 76.8431983385rem;
    left: 50%;
    translate: -50% 0;
    opacity: 0;
}

.lpCastModalClose {
    width: fit-content;
    position: absolute;
    top: -6.23052959502rem;
    right: 0;
    translate: 0 -100%;
}
@media screen and (min-width: 768px){
    .lpCastModalClose {
        top: -8.33333333333rem;
        cursor: pointer;
    }
}

.lpCastModalClose span {
    width: 54.4755970924rem;
    height: 51.9210799585rem;
    display: block;
    position: relative;
}
@media screen and (min-width: 768px){
    .lpCastModalClose span {
        width: 43.7166666667rem;
        height: 41.6666666667rem;
    }
}

.lpCastModalClose span::before,
.lpCastModalClose span::after {
    content: "";
    position: absolute;
    background-color: #ffffff;
    width: 1px;
    height: 143%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    rotate: 47deg;
}
@media screen and (min-width: 768px){
    .lpCastModalClose span::before,
    .lpCastModalClose span::after {
        height: 140%;
        left: 49%;
        translate: -50% -50%;
        rotate: 45deg;
    }
}
.lpCastModalClose span::after {
    rotate: -47deg;
}
@media screen and (min-width: 768px){
    .lpCastModalClose span::after {
        rotate: -45deg;
    }
}


.lpCastModalContents {
    width: calc(100% - 46.7289719626rem);
    height: calc(100% - 107.995846314rem);
    padding: 24.9221183801rem 0 0;
    position: absolute;
    top: 76.8431983385rem;
    left: 50%;
    translate: -50% 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility 0s linear .3s;
    will-change: opacity;
}
@media screen and (min-width: 768px){
    .lpCastModalContents {
        width: calc(100% - 386.666666667rem);
        height: auto;
        padding: 33.3333333333rem 50rem 41.6666666667rem 0;
        top: 50%;
        translate: -50% -50%;
        max-width: 1680px;
    }
}
@media screen and (min-width: 1200px){
    .lpCastModalContents {
        height: calc(100% - 200rem) !important;
    }
}

.lpCastModalContents.is-active{
  opacity: 1;
  visibility: visible;
  transition: opacity .3s ease;
}

#cast01-1,#cast01-2,#cast01-3 {
    background-color: #80838C;
    background-image: url(../../images/kokuyo_lp/pc/bg-noise.jpg);
    background-size: 100%;
    background-blend-mode: multiply;
    background-repeat: no-repeat; /* ←追加 */
    transform: translateZ(0);    /* ←場合によって有効 */
}

#cast01-1::before,
#cast01-2::before,
#cast01-3::before {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/pc/bg-haikei01.jpg) top right / 190% no-repeat;
    width: 100%;
    height: 630.321910696rem;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    mix-blend-mode: color;
}
@media screen and (min-width: 768px){
    #cast01-1::before,
    #cast01-2::before,
    #cast01-3::before {
        background: url(../../images/kokuyo_lp/pc/bg-haikei01.jpg) top right / 100% no-repeat;
        height: 100%;
    }   
}

#cast01-1::after,
#cast01-2::after,
#cast01-3::after {
    content: "";
    position: absolute;
    background-color: #80838C;
    width: 100%;
    height: 1px;
    bottom: 0;
    right: 0;
    left: 0;
}


.lpCastModalHead {
    width: fit-content;
    height: 20.7684319834rem;
    display: flex;
    padding: 0 23.8836967809rem 0 0;
    margin: 0 0 37.3831775701rem auto;
}
@media screen and (min-width: 768px){
    .lpCastModalHead {
        height: 25rem;
        padding: 0;
        margin: 0 0 38.3333333333rem auto;
    }
}
.lpCastModalHead img {
    height: 100%;
}

.lpCastModalScroll {
    height: 91%;
    overflow: hidden;
    /* padding: 0 0 62.3052959502rem; */
    padding: 0 0 20.7684319834rem;
}
@media screen and (min-width: 768px){
    .lpCastModalScroll {
        height: 94%;
        padding: 0 0 41.6666666667rem;
        min-height: 0;
    }
}

.lpCastModalcolumn {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 41.5368639668rem;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 768px){
    .lpCastModalcolumn {
        flex-direction: row;
        gap: 66.6666666667rem;
        max-height: none;
        height: 100%;
        overflow: hidden; /* 子の .lpCastModalInner にスクロールを委譲 */
        min-height: 0; 
    }
}

.lpCastModalImage {
    width: 100%;
    height: 361.370716511rem;
    contain: paint;
}
@media screen and (min-width: 768px){
    .lpCastModalImage {
        flex: 0 1 408.333333333rem !important;
        width: 408.333333333rem;
        height: 408.333333333rem;
    }
}
.lpCastModalImage img {
    width: 101%;
    height: 101%;
    object-fit: cover;
    object-position: center;
}

.lpCastModalTxtarea {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 41.5368639668rem;
    padding: 0 22.8452751817rem 0 23.8836967809rem;
}
@media screen and (min-width: 768px){
    .lpCastModalTxtarea {
        flex: 1 1 0;
        gap: 50rem;
        padding: 0;
        min-height: 0;
    }
}

@media screen and (min-width: 768px){
    .lpCastModalInner {
        min-height: 0;     /* Flexスクロールの要必須 */
        overscroll-behavior: contain;      /* 背景のスクロール連動を防止 */
        padding: 0 55rem 0 0;
        max-height: 100%;
    }
}

.lpCastModalTxtarea .lpProName {
    flex-direction: column;
    align-items: flex-start;
    gap: 23.8836967809rem;
    text-align: left;
}   
@media screen and (min-width: 768px){
    .lpCastModalTxtarea .lpProName {
        gap: 28.3333333333rem;
    }   
}

@media screen and (min-width: 768px){
    .lpCastModalTxtarea .lpProNameJp {
        padding: 0;
        line-height: 0.8;
    }   
}

.lpCastModalTxtarea .lpProNameEn {
    font-size: 18.691588785rem;
}
@media screen and (min-width: 768px){
    .lpCastModalTxtarea .lpProNameEn {
        font-size: 13.3333333333rem;
        line-height: 0.8;
        padding: 0;
        border-left: none;
    }   
}

[data-simplebar]::-webkit-scrollbar {display: none;}
[data-simplebar] {scrollbar-width: none;}
.simplebar-track.simplebar-vertical {
  background: #fff; /* ← 白に変更 */
}
.simplebar-scrollbar::before {
  background: #46FFB9;   /* 色変更 */
}
.simplebar-scrollbar::before {
  width: 6px;
}
.simplebar-scrollbar.simplebar-horizontal::before {
  height: 6px;
}

@media screen and (min-width: 768px){
    .lpCastModalContents-po {
        height: auto !important;
    }
}
@media screen and (min-width: 768px){
    .lpCastModalContents-po::before {
        height: 100% !important;
    }
}
@media screen and (min-width: 768px){
    .lpCastModalContents-po .lpCastModalScroll {
        height: auto;
        padding: 0;
    }
}
@media screen and (min-width: 768px){
    .lpCastModalContents-po .lpCastModalcolumn {
        height: auto;
    }
}



.lpProItemCrew {
    width: 100%;
    padding: 31.1526479751rem 0 0;
    border-top: 1px solid #FFFFFF33;
}
@media screen and (min-width: 768px){
    .lpProItemCrew {
        padding: 41.6666666667rem 0 0;
    }
}

.lpProItemCrewTxt {
    text-align: center;
}

@media screen and (min-width: 768px){
    .lpProItemCrewTxt-sp {
        display: none;
    }
}
.lpProItemCrewTxt-pc {
    display: none;
}
@media screen and (min-width: 768px){
    .lpProItemCrewTxt-pc {
        display: block;
    }
}

.lpProItemCrew p {
    font-size: 14.5379023884rem;
    text-align: center;
    letter-spacing: -0.04em;
    color: #ffffff;
}
@media screen and (min-width: 768px){
    .lpProItemCrew p {
        font-size: 11.6666666667rem;
        letter-spacing: -0.08em;
    }
}
/* 01 */
/* 02 */

.lpProItem-02 .lpProItemContainer {
    background: #254148;
    background-image: url(../../images/kokuyo_lp/pc/bg-noise.jpg);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}
.lpProItem-02 .lpProItemContainer::before,
.lpProItem-02 .lpProItemContainer::after {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/pc/bg-haikei02.jpg) top right / 190% no-repeat;
    width: 100%;
    height: 630.321910696rem;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    mix-blend-mode: color;
}
@media screen and (min-width: 768px){
    .lpProItem-02 .lpProItemContainer::before,
    .lpProItem-02 .lpProItemContainer::after {
        background: url(../../images/kokuyo_lp/pc/bg-haikei02.jpg) top right / 100% no-repeat;
        height: 879.166666667rem;
    }   
}
.lpProItem-02 .lpProItemContainer::after {
    top: auto;
    bottom: 0;
    rotate: 180deg;
}

.lpProItem-02 .lpProCatch {
    display: block;
    width: 265.835929387rem;
    height: auto;
}
@media screen and (min-width: 768px){
    .lpProItem-02 .lpProCatch {
        width: 375rem;
        margin: 0 auto 83.3333333333rem;
    }
}

#cast02-1,#cast02-2,#cast02-3,#cast02-4,#cast02-5,#cast02-6,#cast02-7 {
    background: #254148;
    background-image: url(../../images/kokuyo_lp/pc/bg-noise.jpg);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}

#cast02-1::before,
#cast02-2::before,
#cast02-3::before,
#cast02-4::before,
#cast02-5::before,
#cast02-6::before,
#cast02-7::before {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/pc/bg-haikei02.jpg) top right / 190% no-repeat;
    width: 100%;
    height: 630.321910696rem;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    mix-blend-mode: color;
}
@media screen and (min-width: 768px){
    #cast02-1::before,
    #cast02-2::before,
    #cast02-3::before,
    #cast02-4::before,
    #cast02-5::before,
    #cast02-6::before,
    #cast02-7::before {
        background: url(../../images/kokuyo_lp/pc/bg-haikei02.jpg) top right / 100% no-repeat;
        height: 100%;
    }   
}

#cast02-1::after,
#cast02-2::after,
#cast02-3::after,
#cast02-4::after,
#cast02-5::after,
#cast02-6::after,
#cast02-7::after {
    content: "";
    position: absolute;
    background-color: #254148;
    width: 100%;
    height: 1px;
    bottom: 0;
    right: 0;
    left: 0;
}


@media screen and (min-width: 768px){
    .lpProItem-02 .lpProItemCastBlock {
        width: 25%;
    }
}

.lpProItem-02 .lpProItemFilmHeading {
    font-size: 24.9221183801rem;
    margin: 0 0 24.9221183801rem;
}
@media screen and (min-width: 768px){
    .lpProItem-02 .lpProItemFilmHeading {
        font-size: 33.3333333333rem;
    }
}

@media screen and (min-width: 768px){
    .lpProItem-02 .lpProItemDirecterInner {
        gap: 56.6666666667rem;
        margin: -5.83333333333rem 0 0;
    }
}

@media screen and (min-width: 768px){
    .lpProItem-02 .lpProItemCast {
        margin: -4.16666666667rem 0 114.166666667rem;
    }
}
/* 02 */
/* 03 */

.lpProItem-03 .lpProItemContainer {
    background: #2C2828;
    background-image: url(../../images/kokuyo_lp/pc/bg-noise.jpg);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}
.lpProItem-03 .lpProItemContainer::before,
.lpProItem-03 .lpProItemContainer::after {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/pc/bg-haikei03.jpg) top right / 190% no-repeat;
    width: 100%;
    height: 630.321910696rem;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    mix-blend-mode: color;
}
@media screen and (min-width: 768px){
    .lpProItem-03 .lpProItemContainer::before,
    .lpProItem-03 .lpProItemContainer::after {
        background: url(../../images/kokuyo_lp/pc/bg-haikei03.jpg) top right / 100% no-repeat;
        height: 879.166666667rem;
    }   
}
.lpProItem-03 .lpProItemContainer::after {
    top: auto;
    bottom: 0;
    rotate: 180deg;
}

.lpProItem-03 .lpProCatch {
    display: block;
    width: 283.946002077rem;
    height: auto;
}
@media screen and (min-width: 768px){
    .lpProItem-03 .lpProCatch {
        width: 416.666666667rem;
        margin: 0 auto 83.3333333333rem;
    }
}

#cast03-1,#cast03-2,#cast03-3 {
    background: #2C2828;
    background-image: url(../../images/kokuyo_lp/pc/bg-noise.jpg);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}
#cast03-1::before,
#cast03-2::before,
#cast03-3::before {
    content: "";
    position: absolute;
    background: url(../../images/kokuyo_lp/pc/bg-haikei03.jpg) top right / 190% no-repeat;
    width: 100%;
    height: 630.321910696rem;
    top: 0;
    right: 0;
    left: 0;
    z-index: -1;
    mix-blend-mode: color;
}
@media screen and (min-width: 768px){
    #cast03-1::before,
    #cast03-2::before,
    #cast03-3::before {
        background: url(../../images/kokuyo_lp/pc/bg-haikei03.jpg) top right / 100% no-repeat;
        height: 100%;
    }   
}

#cast03-1::after,
#cast03-2::after,
#cast03-3::after {
    content: "";
    position: absolute;
    background-color: #2C2828;
    width: 100%;
    height: 1px;
    bottom: 0;
    right: 0;
    left: 0;
}


.lpProItem-03 .lpProItemTxt {
    margin: 0 0 38.4215991693rem;
}
@media screen and (min-width: 768px){
    .lpProItem-03 .lpProItemTxt {
        margin: 0 0 77.5rem;
    }
}

@media screen and (min-width: 768px){
    .lpProItem-03 .lpProItemTxt p {
        letter-spacing: -0.01em;
    }
}

.lpProItem-03 .lpProItemFilmHeading {
    font-size: 23.8836967809rem;
    margin: 0 0 28.0373831776rem;
}
@media screen and (min-width: 768px){
    .lpProItem-03 .lpProItemFilmHeading {
        font-size: 33.3333333333rem;
        letter-spacing: -0.01em;
        margin: 0 0 37.5rem;
    }
}

@media screen and (min-width: 768px){
    .lpProItem-03 .lpProItemDirecter {
        margin: 0 0 150rem;
    }
}

.lpProItem-03 .lpProItemDirecterInner {
    gap: 40.4984423676rem;
}
@media screen and (min-width: 768px){
    .lpProItem-03 .lpProItemDirecterInner {
        margin: -6.66666666667rem 0 0;
        gap: 56.6666666667rem;
    }
}

@media screen and (min-width: 768px){
    .lpProItem-03 .lpProColumnItme:first-of-type {
        margin: 0 0 68.3333333333rem;
    }
}
/* 03 */

.lpLinks {
    width: 100%;
    background-color: #46FFB9;
    padding: 83.0737279335rem 0;
    position: relative;
}
@media screen and (min-width: 768px){
    .lpLinks {
        padding: 66.6666666667rem 0;
    }
}

.lpLinksCatch {
    font-size: 18.691588785rem;
    line-height: 1.25;
    text-align: center;
    display: block;
    margin: 0 auto 31.1526479751rem;
}
@media screen and (min-width: 768px){
    .lpLinksCatch {
        font-size:15rem;
        margin: 0 auto 25rem;
    }
}

.lpLinksCatch-en {
    font-family: var(--font-en);
}

.lpLinksRow {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 47.7673935618rem;
}
@media screen and (min-width: 768px){
    .lpLinksRow {
        gap: 50rem;
    }
}

.lpLinksBtn {
    height: 31.1526479751rem;
    display: flex;
}
@media screen and (min-width: 768px){
    .lpLinksBtn {
        height: 25rem;
        transition: all 0.5s cubic-bezier(0.18, 0.06, 0.23, 1);
    }
}
@media screen and (min-width: 768px){
    .lpLinksBtn:hover {
        opacity: 0.5;
    }
}
.lpLinksBtn img {
    width: 100%;
    height: 100%;
}

#lpLinks-end-sensor {
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

/* filmNav */
.filmNav {
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #ffffff;
    padding: 15.5763239875rem 0;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
    translate: 0 200%;
    transition: all 0.5s cubic-bezier(0.18, 0.06, 0.23, 1);
}
@media screen and (min-width: 768px){
    .filmNav {
        width: 222.5rem;
        flex-direction: column;
        padding: 30.8333333333rem 30rem 32.5rem 29.1666666667rem;
        border-radius: 6px;
        bottom: 33.3333333333rem;
        right: 33.3333333333rem;
        left: auto;
        box-shadow: 0px 0px 10px 0px #0000001A;
    }
}
.filmNav.is-active {
    translate: 0 0;
}
.filmNav.is-hidden {
    opacity: 0;
}

.filmNavLink {
    width: 33.3333%;
    height: 41.5368639668rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width: 768px){
    .filmNavLink {
        width: 100%;
        height: auto;
        padding: 18.3333333333rem 0;
        transition: all 0.5s cubic-bezier(0.18, 0.06, 0.23, 1);
    }
}
@media screen and (min-width: 768px){
    .filmNavLink:hover {
        opacity: 0.75;
    }
}

@media screen and (min-width: 768px){
    .filmNavLink:nth-child(1) {
        padding: 0 0 18.3333333333rem;
    } 
}
@media screen and (min-width: 768px){
    .filmNavLink:nth-child(3) {
        padding: 18.3333333333rem 0 0;
    } 
}

.filmNavLink:nth-child(2) {
    border-left: 1px solid #D9D9D9;
    border-right: 1px solid #D9D9D9;
}
@media screen and (min-width: 768px){
    .filmNavLink:nth-child(2) {
        border-left: none;
        border-right: none;
        position: relative;
    }
}
@media screen and (min-width: 768px){
    .filmNavLink:nth-child(2)::before,
    .filmNavLink:nth-child(2)::after {
        content: "";
        position: absolute;
        background-color: #D9D9D9;
        width: 83.3333333333rem;
        height: 1px;
        top: 0;
        left: 50%;
        translate: -50% 0;
    }
}
@media screen and (min-width: 768px){
    .filmNavLink:nth-child(2)::after {
        top: auto;
        bottom: 0;
    }
}

.filmNavNumber {
    display: none;
}
@media screen and (min-width: 768px){
    .filmNavNumber {
        font-family: var(--font-cinzel);
        font-weight: 700;
        font-size: 16.6666666667rem;
        line-height: 1;
        text-align: center;
        color: #46FFB9;
        display: block;
        width: fit-content;
        padding: 0 0 0.83333333333rem;
        border-bottom: 1px solid #46FFB9;
    }
}

.filmNavTitle {
    display: none;
}
@media screen and (min-width: 768px){
    .filmNavTitle { 
        font-size: 14.1666666667rem;
        line-height: 1;
        text-align: center;
        display: block;
        margin: 0 0 9.16666666667rem;
    }
}

.filmNavTxt {
    font-size: 13.4994807892rem;
    line-height: 1.5;
    letter-spacing: -0.04em;
    text-align: center;
}
@media screen and (min-width: 768px){
    .filmNavTxt {
        font-size: 11.6666666667rem;
        line-height: 1.25;
        letter-spacing: 0;
        white-space: nowrap;
    }
}

@media screen and (min-width: 768px){
    .filmNavTxt-sp  {
        display: none;
    }
}

.filmNavTxt-pc {
    display: none;
}
@media screen and (min-width: 768px){
    .filmNavTxt-pc {
        display: block;
    }
}
/* filmNav */

/* lpContentHead */
.lpContentHeader {
    width: 100%;
    height: 48.805815161rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media screen and (min-width: 768px){
    .lpContentHeader {
        height: 49.1666666667rem;
    }
}
.lpContentHeader a {
    display: flex;
    width: 90rem;
}
@media screen and (min-width: 768px){
    .lpContentHeader a {
        width: 80rem;
    }
}
.lpContentHeader a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* lpContentFotter */
.lpContentFotter {
    width: 100%;
    padding: 83.0737279335rem 0 41.5368639668rem;
    text-align: center;
}
@media screen and (min-width: 768px){
    .lpContentFotter {
        padding: 100rem 0 33.3333333333rem;
    }
}
.lpContentFotterLogo {
    width: 267.912772586rem;
    display: block;
    margin: 0 auto 52.9595015576rem;
}
@media screen and (min-width: 768px){
    .lpContentFotterLogo {
        width: 258.333333333rem;
        margin: 0 auto 55rem;
    }
}
.lpContentFotterLogo img {
    width: 100%;
    height: 100%;
}

.lpContentFotterNav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 52.9595015576rem;
}
@media screen and (min-width: 768px){
    .lpContentFotterNav {
        margin: 0 auto 55rem;
    }
}
.lpContentFotterNav a {
    font-size: 18.691588785rem;
    line-height: 1.25;
}
@media screen and (min-width: 768px){
    .lpContentFotterNav a {
        font-size: 16.6666666667rem;
        transition: all 0.5s cubic-bezier(0.18, 0.06, 0.23, 1);
    }
}
@media screen and (min-width: 768px){
    .lpContentFotterNav a:hover {
        opacity: 0.5;
    }
}

.lpContentFotterNav a:first-of-type {
    padding: 0 16.6147455867rem 0 0;
}
@media screen and (min-width: 768px){
    .lpContentFotterNav a:first-of-type {
        padding: 0 13.3333333333rem 0 0;
    }
}
.lpContentFotterNav a + a {
    padding: 0 16.6147455867rem;
    border-left: 1px solid #000000;
}
@media screen and (min-width: 768px){
    .lpContentFotterNav a + a {
        padding: 0 13.3333333333rem;
    }
}
.lpContentFotterNav a:last-of-type {
    padding: 0 0 0 16.6147455867rem;
}
@media screen and (min-width: 768px){
    .lpContentFotterNav a:last-of-type {
        padding: 0 0 0 13.3333333333rem;
    }
}

.lpContentFotter .copyright {
    font-size: 10.3842159917rem;
    line-height: 1.25;
}
@media screen and (min-width: 768px){
    .lpContentFotter .copyright {
        font-size: 10rem;
    }
}



/* Multilingual */
#multilingual {
    padding-top: 0;
}

.lpFvTxtMl p,
.lpProMl p,
.lpCastModalMl p {
    font-family: var(--font-en);
    letter-spacing: -0.04em !important;
}

.lpProNameMl {
    font-family: var(--font-en);
    font-size: 29.0758047767rem;
    line-height: 1;
    letter-spacing: -0.04em;
}
@media screen and (min-width: 768px){
    .lpProNameMl {
        font-size: 30.8333333333rem;
    }
}

/*---------- ENver ----------*/
.lpFvCatchEn {
    width: 227.943925234rem;
    top: 44.7559709242rem;
}
@media screen and (min-width: 768px){
    .lpFvCatchEn {
        width: 1244.45rem;
        top: 40.9166666667rem;
    }
}

.lpFvSliderCatchEn {
    width: 125.867082035rem;
    top: 68.1204569055rem;
    left: 29.2834890966rem;
}
@media screen and (min-width: 768px){
    .lpFvSliderCatchEn {
        width: 226.6rem;
        top: 82.3333333333rem;
        left: auto;
        right: 157.75rem;
    }
}
.lpFvSlider .swiper-slide-02 .lpFvSliderCatchEn {
    width: 117.092419522rem;
    top: 153.167185877rem;
    left: 46.6251298027rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-02 .lpFvSliderCatchEn {
        width: 210.8rem;
        top: 84rem;
        left: 237.333333333rem;
    }
}
.lpFvSlider .swiper-slide-03 .lpFvSliderCatchEn {
    width: 104.153686397rem;
    top: 124.81827622rem;
    left: auto;
    right: 38.4215991693rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-03 .lpFvSliderCatchEn {
        width: 187.5rem;
        top: 152.166666667rem;
        right: 219.5rem;
    }
}

.lpFvSliderTitleEn {
    width: 310.010384216rem;
    bottom: 20.7684319834rem;
}
@media screen and (min-width: 768px){
    .lpFvSliderTitleEn {
        width: 528.066666667rem;
        bottom: 51.75rem;
    }
}
.lpFvSlider .swiper-slide-02 .lpFvSliderTitleEn {
    width: 216.998961578rem;
    bottom: 28.4527518172rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-02 .lpFvSliderTitleEn {
        width: 407.375rem;
        bottom: 64.9166666667rem;
    }
}
.lpFvSlider .swiper-slide-03 .lpFvSliderTitleEn {
    width: 299.460020768rem;
    bottom: 32.8141225337rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-03 .lpFvSliderTitleEn {
        width: 621.408333333rem;
        bottom: 72.3333333333rem;
    }
}
/*---------- ENver ----------*/
/*---------- CNver ----------*/
.lpFvCatchCn {
    width: 301.630321911rem;
    top: 42.1599169263rem;
}
@media screen and (min-width: 768px){
    .lpFvCatchCn {
        width: 1025.66666667rem;
        top: 36.4166666667rem;
    }
}

.lpFvSliderCatchCn {
    width: 26.282450675rem;
    top: 31.1526479751rem;
    left: 29.6988577362rem;
}
@media screen and (min-width: 768px){
    .lpFvSliderCatchCn {
        width: 44.425rem;
        top: 59.5833333333rem;
        left: auto;
        right: 261.916666667rem;
    }
}
.lpFvSlider .swiper-slide-02 .lpFvSliderCatchCn {
    width: 25.9605399792rem;
    top: 113.811007269rem;
    left: 56.282450675rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-02 .lpFvSliderCatchCn {
        width: 43.8583333333rem;
        top: 86.0833333333rem;
        left: 262.416666667rem;
    }
}
.lpFvSlider .swiper-slide-03 .lpFvSliderCatchCn {
    width: 25.9605399792rem;
    top: 81.6199376947rem;
    left: auto;
    right: 75.1817237799rem;
}
@media screen and (min-width: 768px){
    .lpFvSlider .swiper-slide-03 .lpFvSliderCatchCn {
        width: 43.8083333333rem;
        top: 133.333333333rem;
        right: 190.166666667rem;
    }
}
/*---------- CNver ----------*/
/* Multilingual */