@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');

.fd-c { opacity: 0; transform: translateY(6.6vw); transition: opacity 1.2s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1) }
.fd-c .zm-in { transform: scale(1.12); transition: opacity 1.2s linear, transform 1s cubic-bezier(0.19, 1, 0.22, 1) }
.fd-c.active { opacity: 1; transform: translateY(0); }
.fd-c.active .zm-in { transform: scale(1); }

#contents { position: relative; padding-top: 9.16vw; margin-top: 46vw; background: url("../img/kv_bot.png") no-repeat top; background-size: contain; z-index: 10 }
#contents .contents-inner { position: relative; background: #fff; }
.kv-2509 { position: fixed; left: 0; top: 0; z-index: 0; }
.kv-2509 .vis { opacity: 0; filter: contrast(300%); transition: 1.2s linear }
.kv-2509.active .vis { opacity: 1; filter: contrast(100%); }
.kv-2509 .logotype { position: absolute; left: 4.4vw; top: calc(50% - 20px); z-index: 10 }
.kv-2509 p { position: absolute; right: 8.8vw; top: calc(50% - 18px); z-index: 10; font-size: 28px; color: #fff }
#contents { position: relative; letter-spacing: 0.12em; font-feature-settings: "palt" 1; }
.locnav { position: absolute; right: 2.2vw; top: 4.4vw; width: 2em; height: 100%; z-index: 100 }
.locnav.fixed { position: fixed; right: 2.2vw; top: calc(50vh - 4.4vw); width: 2em; height: 100%; }
.locnav p { font-size: 16px; writing-mode: vertical-rl; }
.locnav p i { color: #a5aac6 }
.intro { padding: 0 8.8vw 4.4vw }
.intro h1 { font-size: 54px; letter-spacing: 0.24em; text-align: right }
.intro h1 .txtl-t { font-family: "Zen Old Mincho", serif; font-weight: normal; margin-right: -0.5em; }
.intro h1 p { font-size: 14px; font-weight: 300; letter-spacing: 0.12em; margin-right: 1em }
.intro p.lead { font-size: 18px; letter-spacing: 0.24em; }
.scene { position: relative; padding: 8.8vw 0 4.4vw; }
.scene .line { position: absolute; width: 200%; height: 1px; background: #d1d4e2; margin-left: -50%; z-index: 0 }
.scene h2 { position: relative; font-size: 80px; color: #1f2a68; margin: 0 4.4vw; z-index: 10 }
.scene h2 i { color: #a5aac6 }
.scene .movie { position: relative; padding: 0 8.8vw 8.8vw; margin: -30px 0 0; z-index: 0 }
.scene .movie h2 { position: absolute; right: 7.7vw; top: 33.3vw; font-size: 36px; font-family: "Zen Old Mincho", serif; font-weight: normal; writing-mode: vertical-rl; width: 130px; padding: 120px 0 0; background: url("../img/2509/diagonal-line.png") no-repeat top; background-size: contain }
.scene .movie video { width: 100%; }
.scene .scene-collection { position: relative; padding: 6.6vw 8.8vw 0; text-align: center }
.scene .scene-collection h3 { font-size: 20px; letter-spacing: 0.24em; line-height: 1.8em; font-weight: 300; text-align: left }
.scene .scene-collection img.item { width: 50vw }
.scene .scene-collection .item-title { position: absolute; left: 17.6vw; bottom: 0; text-align: left }
.scene .scene-collection .item-title h3 { font-size: 24px; font-weight: bold }
.scene .scene-collection .btn-goto { position: absolute; right: 0; bottom: 0; width: 320px; }
#scene-a .line { transform: rotate(15deg) }
#scene-b .line { transform: rotate(345deg); margin-top: 8.8vw }
#scene-c .line { transform: rotate(7.5deg); margin-top: 17.6vw }
#scene-a .scene-inner { position: relative }
#scene-a .scene-inner .vis-01 { width: calc(50% - 8.8vw) }
#scene-a .scene-inner .vis-02 { position: absolute; right: 0; bottom: 0; width: 50% }
#scene-a .scene-inner .texts { position: absolute; left: 50%; top: 4.4vw; }
#scene-a .scene-inner .texts h3 { font-size: 24px; letter-spacing: 0.24em; margin-bottom: 0.66em }
#scene-a .scene-inner .texts p { font-size: 16px; letter-spacing: 0.24em; }
#scene-b .scene-inner { position: relative }
#scene-b .scene-inner .vis-01 { position: absolute; left: 0; bottom: 0; width: 50% }
#scene-b .scene-inner .vis-02 { width: calc(50% - 8.8vw); margin-left: calc(50% + 8.8vw)  }
#scene-b .scene-inner .texts { position: absolute; left: 8.8vw; top: 4.4vw; }
#scene-b .scene-inner .texts h3 { font-size: 24px; letter-spacing: 0.24em; margin-bottom: 0.66em }
#scene-b .scene-inner .texts p { font-size: 16px; letter-spacing: 0.24em; }
#scene-c .scene-inner { position: relative }
#scene-c .scene-inner .vis-01 { width: calc(50% - 4.4vw); padding-bottom: 8.8vw }
#scene-c .scene-inner .vis-02 { position: absolute; right: 0; bottom: 0; width: calc(50% - 4.4vw) }
#scene-c .scene-inner .texts { position: absolute; left: calc(50% + 4.4vw); top: 4.4vw; }
#scene-c .scene-inner .texts h3 { font-size: 24px; letter-spacing: 0.24em; margin-bottom: 0.66em }
#scene-c .scene-inner .texts p { font-size: 16px; letter-spacing: 0.24em; }
.glass-case { padding: 8.8vw 8.8vw 0; text-align: center }
.glass-case .inner-block { position: relative; max-width: 1080px; padding: 2.2vw 4.4vw; background: #e8eaf1; border-radius: 12px; margin: 0 auto; text-align: right }
.glass-case .inner-block .item-title { position: absolute; left: 4.4vw; top: 8.8vw; text-align: left }
.glass-case .inner-block .item-title h3 { font-size: 24px; font-weight: bold; margin-bottom: 0.66em; }
.scenes-footer { margin: 13.6vw 0 8.8vw; text-align: center }
.scenes-footer .logo { margin-top: 3em }
.scenes-footer p { font-size: 18px; margin-top: 1em; }
.scenes-footer p span { font-size: 24px; font-weight: 500; }
#footer { opacity: 1; }

@media screen and (max-width: 780px) {
    
    #contents { margin-top: 86vw; }
    .kv-2509 .logotype { position: absolute; left: 4.4vw; top: calc(50% - 20px); z-index: 10 }
    .kv-2509 .logotype img { width: 50vw }
    .kv-2509 p { position: absolute; right: inherit; left: 4.4vw; top: calc(50% + 20px); font-size: 18px; }
    #contents { position: relative; letter-spacing: 0.08em; font-feature-settings: "palt" 1; }
    .locnav { position: fixed; right: -4px; top: calc(50vh - 6vw); width: 2em; height: 100%; z-index: 100 }
    .locnav p { font-size: 13px; writing-mode: vertical-rl; }
    .intro { padding: 0 6vw 6vw }
    .intro h1 { font-size: 32px; letter-spacing: 0.24em; text-align: right }
    .intro h1 p { font-size: 14px; font-weight: 300; letter-spacing: 0.12em; margin-right: 1em }
    .intro p.lead { font-size: 14px; letter-spacing: 0.16em; margin-top: 2em }
    .scene { padding: 8vw 0 6vw; }
    .scene h2 { position: relative; font-size: 48px; color: #1f2a68; margin: 0 3vw; z-index: 10 }
    .scene .movie { position: relative; padding: 0 6vw 8.8vw; margin: -30px 0 0; z-index: 0 }
    .scene .movie h2 { position: absolute; right: 6vw; top: 136vw; font-size: 20px; font-family: "Zen Old Mincho", serif; font-weight: normal; writing-mode: vertical-rl; width: 65px; height: 100%; padding: 60px 0 0; background: url("../img/2509/diagonal-line.png") no-repeat top; background-size: contain }
    .scene .scene-collection { position: relative; padding: 6vw 6vw 0; text-align: center }
    .scene .scene-collection h3 { font-size: 16px; letter-spacing: 0.24em; line-height: 1.8em; font-weight: 300; text-align: left }
    .scene .scene-collection img.item { width: 75vw; margin-top: 1em }
    .scene .scene-collection .item-title { position: relative; left: inherit; bottom: inherit; }
    .scene .scene-collection .item-title h3 { font-size: 20px; font-weight: bold }
    .scene .scene-collection .btn-goto { position: relative; right: inherit; bottom: inherit; width: auto; }
    #scene-a .scene-inner .vis-01 { width: calc(100% - 30vw); }
    #scene-a .scene-inner .vis-02 { position: relative; right: inherit; bottom: inherit; width: calc(100% - 6vw); margin-left: 6vw }
    #scene-a .scene-inner .texts { position: relative; left: inherit; top: inherit; padding: 6vw; }
    #scene-a .scene-inner .texts h3 { font-size: 18px; letter-spacing: 0.24em; margin-bottom: 0.5em; text-align: right }
    #scene-a .scene-inner .texts p { font-size: 14px; letter-spacing: 0.24em; }
    #scene-b .scene-inner .vis-01 { position: relative; left: inherit; bottom: inherit; width: calc(100% - 18vw) }
    #scene-b .scene-inner .vis-02 { width: calc(100% - 30vw); margin-left: 24vw  }
    #scene-b .scene-inner .texts { position: relative; left: inherit; top: inherit; padding: 6vw }
    #scene-b .scene-inner .texts h3 { font-size: 18px; letter-spacing: 0.24em; margin-bottom: 0.5em }
    #scene-b .scene-inner .texts p { font-size: 14px; letter-spacing: 0.24em; }
    #scene-c .scene-inner .vis-01 { width: calc(100% - 18vw); padding-bottom: 0 }
    #scene-c .scene-inner .vis-02 { position: relative; right: inherit; bottom: inherit; width: calc(100% - 6vw); margin-left: 6vw }
    #scene-c .scene-inner .texts { position: relative; left: inherit; top: inherit; padding: 6vw }
    #scene-c .scene-inner .texts h3 { font-size: 18px; letter-spacing: 0.24em; margin-bottom: 0.5em; text-align: right }
    #scene-c .scene-inner .texts p { font-size: 14px; letter-spacing: 0.24em; }
    .glass-case { padding: 6vw 6vw 0; text-align: center }
    .glass-case .inner-block { position: relative; max-width: inherit; padding: 6vw 3vw; }
    .glass-case .inner-block .item-title { position: relative; left: inherit; top: inherit; text-align: left; padding: 0 3vw 3vw }
    .glass-case .inner-block .item-title h3 { font-size: 18px; font-weight: bold; margin-bottom: 0; }
    .glass-case .inner-block .item { width: 100% }
    .scenes-footer { margin: 12vw 0 6vw; text-align: center }
    .scenes-footer .logo { margin-top: 2em }
    .scenes-footer .logo img { width: 180px }
    .scenes-footer p { font-size: 14px; margin-top: 0.5em; }
    .scenes-footer p span { font-size: 18px; font-weight: 500; }
    
}