﻿/*html{overflow: scroll; pointer-events: auto;}
html.opening,
html.opening body{margin: 0; width: 100%; height: 100%; overflow: hidden; }*/
.viewport{overflow-y: scroll;}
.viewport.opening{position: relative; width: 100%; height: 100vh; overflow: hidden; background: #fff;}
.sequence-stage,
.content-stage{position: absolute; inset: 0;}
.sequence-stage{background: #fff; z-index: 20; overflow: hidden;}
.content-stage{z-index: 5; opacity: 0; background: linear-gradient(135deg, #f8f5ee 0%, #efe6d7 45%, #e3d4bb 100%);}
.content-inner{max-width: 980px; margin: 0 auto; padding: 12vh 7vw; color: #2b2620;}
.content-card{background: rgba(255, 255, 255, .88); border-radius: 28px; padding: 48px; box-shadow: 0 24px 80px rgba(0, 0, 0, .12);}
.content-card h1{margin: 0 0 18px; font-size: clamp(28px, 5vw, 54px); line-height: 1.1;}
.content-card p{margin: 0 0 16px; font-size: clamp(16px, 2vw, 20px); line-height: 1.9;}
.visual{position: absolute; inset: 0; opacity: 0; background-repeat: no-repeat; background-size: cover; background-position: center center;}
.image1{opacity: 0; width: 100vw; height: 100vh; left: 50%; top: 0; transform: translate(-50%, 0) scale(0.2); transform-origin: center bottom; background-image: url('../../images/open/open01.jpg');}
.image2{background-image: url('../../images/open/open02.jpg');}
.image3{background-image: url('../../images/open/open03.jpg');}
.copy{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);  margin: 0 auto; text-align: center; font-size: 2.1rem; line-height: 1.1; letter-spacing: .15em; opacity: 0; z-index: 40; writing-mode: vertical-rl; text-orientation: upright;text-combine-upright: all;  font-family:"游明朝", "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "Times New Roman", "ＭＳ Ｐ明朝", "MS PMincho", serif !important; -ms-font-family: "ＭＳ Ｐ明朝", "MS PMincho";-ms-font-feature-settings:"pkna";}
.copy.black{color: #333;}
.copy.white{color: #fff; top: 30%; font-size: 1.8rem;}
.copy .char{display: inline-block; opacity: 0;}
.copy#copyBlack > span{margin: .1em 0;}
.copy#copyWhite{text-combine-upright: none; font-feature-settings: "pkna" 0, "valt" 0;text-shadow: 0px 0px 6px #7f7f7f;}
@media only screen and (max-width :480px) {
    .copy{font-size: 1.8rem;}
}