@charset "utf-8"; .contents { padding:0; } /* ========================= ローディング（整理版） ========================= */ /* 初期状態は表示（オーバーレイ） */ #loading{width:100%;height:100%;position:fixed;top:0;left:0;background:#64B9FF;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;text-align:center;z-index:9999;opacity:1;visibility:visible;pointer-events:auto;transition:opacity .6s ease,visibility .6s ease;} /* 2回目以降は で即非表示 */ html.skip-loading #loading{display:none!important;} /* 初回表示中はスクロール抑止（任意） */ html.need-loading body{overflow:hidden;} /* 表示／非表示（同義クラスは束ねて定義） */ #loading.show,#loading.fadein{opacity:1;visibility:visible;pointer-events:auto;} #loading.hidden,#loading.fadeout{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s ease,visibility .6s ease;} /* 中身 */ #loading lottie-player{width:130px;height:130px;display:block;margin:0 auto 20px;} #loading strong{width:100%;display:block;color:#fff;text-align:center;margin:0 auto 10px;} #loading .loading_item{width:230px;margin:0 auto;display:block;} #loading .loading_item .nanmaru_loading{width:130px;} /* プログレスバー */ .progress{width:100%;height:8px;background:#eee;border-radius:999px;overflow:hidden;} .progress-bar{width:0%;height:100%;background:#FC5942;border-radius:inherit;transition:width .1s linear;} /* 伸びアニメーション（必要なら付与） */ @keyframes progress-grow{from{width:0%;}to{width:100%;}} /* スクロール案内のフェード */ .scroll_down{transition:opacity .5s ease;} .scroll_down.is-hide{opacity:0;pointer-events:none;} /* 伸びアニメーション */ @keyframes progress-grow { from { width:0%; } to { width:100%; } } /* Scroll案内のフェードアウト */ .scroll_down { transition: opacity .5s ease; } .scroll_down.is-hide { opacity: 0; pointer-events: none; } /* Safari on desktop/laptop だけに適用（iOS は除外） */ .safari-desktop .clouds_3d, .safari-desktop .top_wrap lottie-player { pointer-events:none; } /* スクロール誘導UIはリンクだけ当たり判定ON */ .safari-desktop .scroll_down { pointer-events:none; } .safari-desktop .scroll_down a { pointer-events:auto; } /* 初回の一時ロック用（Safariはバウンスが強いのでcontain） */ html.intro-lock, body.intro-lock { overflow:hidden; overscroll-behavior:contain; } /* ========================= トップビジュアル ========================= */ .top_stage { margin-bottom:80px; z-index:0; position:relative; } @media (min-width:768px) { .top_stage { min-height: 100vh; } } .top_stage .nanmaru_run { width:100vw; height:100vw; position:absolute; bottom:12%; right:-20%; } @media (min-width:768px) { .top_stage .nanmaru_run { width:55vw; height:55vw; position:absolute; bottom:-2%; right:-2.5%; } } .nanmaru_run { opacity:0; transition:opacity .3s ease; } .nanmaru_run.is-playing { opacity:1; } .top_wrap { width:100%; height:100vh; overflow:hidden; position: sticky; top:0; /* 背景 */ background: url(/img/index/illust_kagosima_sp.jpg) no-repeat center top; background-size: calc(100% * var(--bgScale, 1.2)) auto; /* ズーム制御 */ background-position: center var(--bgY, 0%); /* パン制御 */ will-change: background-size, background-position; } @media (min-width:768px) { .top_wrap { width:100%; height:100vh; overflow:hidden; position: sticky; top:0; /* 背景 */ background: url(/img/index/illust_kagosima.jpg) no-repeat center top; background-size: calc(100% * var(--bgScale, 1.2)) auto; /* ズーム制御 */ background-position: center var(--bgY, 0%); /* パン制御 */ will-change: background-size, background-position; } } @media (min-width:768px) and (max-width:1024px) { .top_wrap { height: calc(100vh - 80px); background-size:cover; } } /*3D*/ .clouds_3d{ perspective: 900px; perspective-origin: 50% 40%; transform-style: preserve-3d; } .top_stage, .top_wrap, .clouds_3d{ transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } .clouds_3d, .clouds_3d *{ backface-visibility: hidden; -webkit-backface-visibility: hidden; } .top_stage, .top_wrap { transform-style: preserve-3d; -webkit-transform-style: preserve-3d; /* Safari */ } .box { transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; } /*html, body { overscroll-behavior: none; } */ html.stage-lock, body.stage-lock { overflow:hidden; height:100%; } .top_stage { touch-action:none; overscroll-behavior:contain; } /* 解除直後の一瞬はトランジション殺す→“ガクッ”防止 */ .no-transient, .no-transient * { transition: none !important; } .top_wrap .h1_wrap { position:absolute; /*bottom:68vh; */top:80px; } @media (min-width:768px) { .top_wrap .h1_wrap { top:80px; bottom:65vh; } } .top_wrap .h1_wrap h1 { font-size:32px; font-weight:bold; letter-spacing:-0.05em; } @media (min-width:768px) { .top_wrap .h1_wrap h1 { font-size:40px; } } /* h1 赤帯のアニメーション */ .top_wrap .h1_wrap h1 .bgline{ position:relative; display:inline-block; line-height:1.2; margin-bottom:10px; padding:0 5px; color:#fff; z-index:0; } .top_wrap .h1_wrap h1 .bgline::before{ content:""; position:absolute; inset:0; background:#FC5942; transform:scaleX(0); transform-origin:left center; transition:transform .8s ease-out; z-index:-1; } .top_wrap .h1_wrap h1 .bgline.is-inview::before{ transform:scaleX(1); } .top_wrap .h1_wrap .sub{ position:relative; display:inline-block; line-height:1.2; margin-bottom:10px; padding:0 5px; color:#fff; z-index:0; } .top_wrap .h1_wrap .sub::before{ content:""; position:absolute; inset:0; background:#FC5942; transform:scaleX(0); transform-origin:left center; transition:transform .8s ease-out; z-index:-1; } .top_wrap .h1_wrap .sub.is-inview::before{ transform:scaleX(1); } .top_wrap .h1_wrap .sub span { font-size:20px; font-weight:bold; display:inline; } @media (min-width:768px) { .top_wrap .h1_wrap .sub span { font-size:30px; } } .top_wrap .h1_wrap .lead { font-size:16px; line-height:1.5em; color:#fff; opacity:0; transform:translateY(10px); transition: opacity .5s ease, transform .5s ease; font-weight:bold; transition-delay:.8s; margin-top:20px; } @media (min-width:768px) { .top_wrap .h1_wrap .lead { font-size:16px; margin-top:initial; } } .top_wrap .h1_wrap .lead.is-inview { opacity:1; transform:translateY(0); text-shadow: 2px 2px 4px rgba(0,0,0,0.3);} @media (min-width:768px) { .top_wrap .h1_wrap h1 { font-size:70px; margin-top:15px; margin-bottom:24px; } .top_wrap .h1_wrap h1 small { font-size:50px; } .top_wrap .h1_wrap .lead { font-size:20px; } } /* 文字は最初は透明→0.8s遅れて出す */ .top_wrap .h1_wrap h1 .bgline, .top_wrap .h1_wrap .sub{ color:transparent; transition: color 0s linear .8s; } .top_wrap .h1_wrap h1 .bgline.is-inview, .top_wrap .h1_wrap .sub.is-inview{ color:#fff; } .top_wrap .h1_wrap h1 .bgline.is-inview::before, .top_wrap .h1_wrap .sub.is-inview::before{ transform:scaleX(1); } /* 空 */ .sky { width:100%; height:100vh; position:relative; } .sky img { will-change: transform; } .sky .box1 { width:90%; position:absolute; top:5%; left:-20%; } .sky .box2 { width:70%;position:absolute; top:19%; left:-10%; } .sky .box3 { width:50%;position:absolute; top:0%; left:45%; } .sky .box4 { width:80%;position:absolute; top:20%; right:5%; } .sky .box5 { width:50%;position:absolute; top:15%; right:-5%; } .sky .box6 { width:50%;position:absolute; bottom:15%; left:0%; } .sky .box7 { width:90%; position:absolute; top:45%; left:-10%; } .sky .box8 { width:50%; position:absolute; top:50%; left:70%; } .sky .box9 { width:80%; position:absolute; top:60%; right:-5%; z-index:10; } .sky .box10 { width:60%; position:absolute; top:40%; left:0%; } .sky .box11 { width:40%; position:absolute; bottom:-10%; left:15%; } .sky .box12 { width:40%; position:absolute; top:40%; right:0%; } .sky .box13 { width:10%; position:absolute; bottom:20%; right:25%; } @media (min-width:768px) { .sky .box1 { width:initial; position:absolute; top:0%; left:0%; } .sky .box2 { width:initial; position:absolute; top:0%; left:40%; } .sky .box3 { width:initial; position:absolute; top:0%; left:48%; } .sky .box4 { width:initial; position:absolute; top:17%; right:0%; } .sky .box5 { width:initial; position:absolute; top:0%; right:0%; } .sky .box6 { width:initial; position:absolute; bottom:10%; left:0%; } .sky .box7 { width:initial; position:absolute; top:28%; left:15%; } .sky .box8 { width:500px; position:absolute; top:60%; left:45%; } .sky .box9 { width:initial; position:absolute; top:40%; right:-5%; z-index:10; } .sky .box10 { width:initial; position:absolute; top:35%; left:0%; } .sky .box11 { width:initial; position:absolute; bottom:10%; left:18%; } .sky .box12 { width:30%; position:absolute; top:30%; left:50%; } .sky .box13 { width:initial; position:absolute; bottom:20%; right:25%; } .title_wrap { width:100%; } } /* box 自体にも will-change を付与（画像だけでなく）*/ .sky .box{ will-change: transform; transform: translate3d(0,0,0); } /* prefers-reduced-motion の人には浮遊を無効化（安全策） */ @media (prefers-reduced-motion: reduce){ .sky .box{ --fx:0px; --fy:0px; --frot:0deg; } } /*南日本ハウスのロゴ*/ .top_stage .logo_top {width:70%; position:absolute; top:45%; left:50%;transform: translate(-50%, -50%);z-index:9999999; opacity: 1;transition: opacity .45s ease;will-change: opacity;} @media (min-width:768px) { .top_stage .logo_top { width:450px; top:40%; } } /* Lottie は最初は隠す */ .top_stage .nanmaru_run{ opacity:0; visibility:hidden; transition:opacity .4s ease; pointer-events:none; } .top_stage .nanmaru_run.is-playing{ opacity:1; visibility:visible; } /* h1 ラッパー自体のフェードアップ（帯アニメは既存の .is-inview を使用） */ .top_wrap .h1_wrap{ opacity:0; transform:translateY(10px); transition:opacity .6s ease, transform .6s ease; } .top_wrap .h1_wrap.is-show{ opacity:1; transform:translateY(0); } /*スクロールダウン*/ @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap'); .top_stage .scroll_down{position:absolute;bottom:100px;right:50%;animation: arrowmove 1s ease-in-out infinite; z-index:9999; opacity: 1;visibility: visible;transition: opacity 0.4s ease, visibility 0.4s ease;} .top_stage .scroll_down a{position: absolute;left: -24px;bottom:100px;color: #004680;font-size: 14px;font-family: 'Josefin Sans', sans-serif;letter-spacing: .2em;text-transform: uppercase;width: 24px;height: 24px;text-decoration: none;} .top_stage .text {display: block;margin-top: 70px;margin-left: -14px;font-size: 12px;color: #004680;text-transform: uppercase;white-space: nowrap;letter-spacing: 2px;} .top_stage .scroll_down .arrow {position: absolute;width: 28px;height: 5px;opacity: 0;transform: scale3d(0.5, 0.5, 0.5);animation: move 3s ease-out infinite;} .top_stage .scroll_down .arrow:first-child {animation: move 3s ease-out 1s infinite;} .top_stage .scroll_down .arrow:nth-child(2) {animation: move 3s ease-out 2s infinite;} .top_stage .scroll_down .arrow:before, .top_stage .scroll_down .arrow:after { content: ' ';position: absolute;top: 0;height: 100%;width: 51%;background: #004680;} .top_stage .scroll_down .arrow:before {left: 0;transform: skew(0deg, 30deg);} .top_stage .scroll_down .arrow:after {right: 0;width: 50%;transform: skew(0deg, -30deg);} @keyframes move { 25% { opacity: 1; } 33% { opacity: 1; transform: translateY(30px); } 67% { opacity: 1; transform: translateY(40px); } 100% { opacity: 0; transform: translateY(55px) scale3d(0.5, 0.5, 0.5); } } .top_stage .scroll_down.is-hide { opacity: 0; pointer-events: none; } .top_stage .scroll_down {transition: opacity 0.5s ease;} /* ロック中だけネイティブスクロール抑制 */ .top_stage.locking { touch-action: none; overscroll-behavior: contain; } /* ========================= ニュースタブ ========================= */ .news_tabs { display:flex; gap:10px; margin-top:40px; margin-bottom:15px; font-weight:bold; border-bottom:1px solid #DDDBDB; } .news_tab { width:50%; padding:8px 16px;cursor:pointer; position:relative; line-height:2em; } .news_tab.active { background:#fff; } .news_tab.active::after{content:""; position:absolute; left:0; right:0; bottom:0; height:5px;background:#004680; } .news_contents .news_wrap[hidden]{ display:none !important; } .news_wrap { margin-bottom:50px; } .contents_wrap .news_wrap { width:100%; } .contents_wrap .news_wrap .button_normal { margin-top:40px; margin-bottom:80px; } @media (min-width:768px) { .news_tabs { margin-top:80px; } } /* 波のある背景の余白 */ .contents_bg_excursion { padding:80px 0 0; } @media (min-width:768px) { .contents_bg_excursion { padding:100px 0 0 0; } } /* ========================= コンテンツ / ボタン群 ========================= */ .button_contents { width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; margin-top:30px; margin-bottom:50px; } .button_contents li { width:48%; display:flex; align-items:center; border:2px solid #004680; border-radius:10px; overflow:hidden; box-shadow:0 3px 6px rgba(0,0,0,.16); } .button_contents li a { width:100%; height:100%; display:flex; align-items:center; flex-wrap:wrap; padding:16px 0; position:relative; } .button_contents li a::after { content:""; position:absolute; top:50%; right:7%; transform:translateY(-50%); width:12px; height:12px; background:url("/img/common/icon_arrow_right_blue.svg") no-repeat center / contain; } .button_contents li a.otherlink::after { content:none; } .button_contents li a:hover { background:#f2f2f2; } .button_contents li a img { width:auto; height:35px; margin:0 auto; display:block; } .button_contents li a span { width:100%; text-align:center; display:inline-block; font-weight:bold; color:#004680; } .button_contents li a span.icon_other {position:relative; } .button_contents li a span.icon_other::after { content:""; position:absolute; top:50%; right:20px; width:12px; height:12px; background:url("/img/common/icon_othersite_blue.svg") no-repeat center/contain; transform:translateY(-50%); } @media (min-width:768px) { .button_contents{margin-top:40px; margin-bottom:120px; } .button_contents li { width:15%; } .button_contents li a { padding:50px 0; } .button_contents li a img { height:57px; } .button_contents li a span { font-size:18px; margin-top:10px; } .button_contents li a span.icon_other::after { right:40px; } } @media (min-width:768px) and (max-width:1024px) { .button_contents li a { padding:10px 0;} } /* ========================= コンテンツ見出し帯／走るなん丸 ========================= */ .contents_wrap_page { width:100%; position:relative; } .contents_wrap_page_title { width:100%; height:95vw; position:relative; background:url(/img/index/photo_bg_contents_sp.jpg) no-repeat center / cover; margin-bottom:60px; } .nanmaru_run_contents { height:70px; position:absolute; top:15px; z-index:10; animation: runAcross 15s linear infinite; } @keyframes runAcross { from { left:-200px; } to { left:100vw; } } .minami_run { height:70px; position:absolute; top:15px; z-index:10; animation: runAcross2 17s linear infinite; } @keyframes runAcross2 { from { left:-200px; } to { left:100vw; } } @media (min-width:768px) { .nanmaru_run_contents { height:70px; top:-10px;} .minami_run { height:90px; top:0px; } } @media (min-width:768px) { .contents_wrap_page { margin-top:120px; } .contents_wrap_page_title { height:40vw; margin-bottom:100px; background:url(/img/index/photo_bg_contents.jpg) no-repeat center / cover; } .nanmaru_run_contents { height:100px; } } .contents_wrap_page .text_lm { width:100%; display:block; text-align:center; margin-bottom:32px; } .contents_wrap_page .text_lead { width:100%; display:block; text-align:center; } .contents_wrap_page_title .message_wrap { width:15vw; display:flex; gap:10px; flex-direction:row-reverse; position:absolute; top:20px; left:13%; align-items:flex-start; } .contents_wrap_page_title .message_wrap div { width:20%; display:flex; justify-content:center; margin-left:10px; } /* 縦書きラベル（バー成長アニメ） */ .contents_wrap_page_title .message_wrap strong{ writing-mode:vertical-rl; text-orientation:upright; color:#fff; font-weight:700; background:#FC5942; display:inline-block; padding:12px 0; line-height:1.4; transform:scaleY(0); transform-origin:top; animation: barGrow .6s ease forwards; } .contents_wrap_page_title .message_wrap > div:nth-child(1) strong { --col-delay:0s; animation-delay:var(--col-delay); } .contents_wrap_page_title .message_wrap > div:nth-child(2) strong { --col-delay:.25s; animation-delay:var(--col-delay); } .contents_wrap_page_title .message_wrap > div:nth-child(3) strong { --col-delay:.5s; animation-delay:var(--col-delay); } @keyframes barGrow { from { transform:scaleY(0); } to { transform:scaleY(1); } } /* 文字1文字ずつの出現 */ .contents_wrap_page_title .message_wrap strong .ch{ opacity:0; transform:translateY(-6px); animation: charIn .35s ease forwards; animation-delay: calc(var(--col-delay,0s) + var(--i,0)*.06s + .1s); } @keyframes charIn { to { opacity:1; transform:translateY(0); } } @media (min-width:768px) { .contents_wrap_page_title .message_wrap { width:12vw; right:11%; left:auto; } .contents_wrap_page_title .message_wrap div { width:48px; } .contents_wrap_page_title .message_wrap strong { font-size:32px; } } @media screen and (min-width: 769px) and (max-width:1280px) { .contents_wrap_page_title .message_wrap { width:25vw; left:5%; } .contents_wrap_page_title { height:45vw; } .contents_wrap_page { margin-top:0; } } /* 横スクロールテキスト */ .scroll-wrap { width:100%; height:75px; position:relative; overflow:hidden; } .scroll-content { display:flex; animation: marquee 8s linear infinite; } .scroll-content img { width:auto; height:70px; } @media (min-width:768px) { .scroll-wrap { height:85px; } .scroll-content img { width:2040px; height:85px; } } @keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-200px); } } /* ========================= 店舗ギャラリー ========================= */ .gallery { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:4px; margin-bottom:40px; } .gallery .big { grid-column:1 / span 2; grid-row:1; } .gallery .small { grid-row:2; } .gallery img { width:100%; height:100%; object-fit:cover; display:block; } @media (min-width:768px) { .gallery { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:10px; } .gallery .big { grid-column:1; grid-row:1 / span 2; } .gallery .big img { width:100%; } .gallery .small { grid-column:2; } .gallery > :nth-child(2).small { grid-row:1; } .gallery > :nth-child(3).small { grid-row:2; } } .button_shop { width:100%; display:flex; flex-wrap:wrap; gap:15px; margin-bottom:60px; } .button_shop li { width:100%; } @media (min-width:768px) { .button_shop { justify-content:space-between;margin-bottom:120px; } .button_shop li { width:30%; } } .section_title.bgtext.shop { margin-top:60px; } @media (min-width:768px) { .section_title.bgtext.shop { margin-top:120px; } } /* ========================= トピックスのスライダー ========================= */ .section_title.bgtext { /* SP: デフォルト */ } @media (min-width:768px){ .section_title.bgtext { margin-bottom:80px; } } .slider_wrap.topics { padding-bottom:0; } .contents_bg_excursion.staff .slider_wrap { padding-bottom:200px; } .full-screen.slider { margin-bottom:40px; } @media (min-width:768px){ .contents_bg_excursion.staff .slider_wrap { padding-bottom:300px; } .full-screen.slider { margin-bottom:0; } } :root{--cz-scale-rest:.7;--cz-scale-center:1.2;--cz-hover-img-scale:1.04;--cz-fade-rest:.5;--cz-trans:.3s ease;} .center-zoom .slick-list{overflow:visible;} .center-zoom .slick-track{display:flex;align-items:center;} .center-zoom .slick-slide{display:flex;align-items:center;justify-content:center;height:auto;padding-block:30px;transform-origin:center center;transform:scale(var(--cz-scale-rest));opacity:var(--cz-fade-rest);transition:transform var(--cz-trans),opacity var(--cz-trans);} .center-zoom .slick-center{transform:scale(var(--cz-scale-center));opacity:1;} .center-zoom .slick-slide img{display:block;width:100%;height:auto;margin-bottom:10px;transform-origin:center center;transform:none;transition:transform .25s ease,opacity .2s ease;will-change:transform;} .center-zoom .slick-slide a{display:block;width:100%;} @media (hover:hover){.center-zoom .slick-slide a:hover img{transform:scale(var(--cz-hover-img-scale));}.center-zoom .slick-slide a:hover{opacity:.7;}} .center-zoom .slick-slide a:focus-visible img{transform:scale(var(--cz-hover-img-scale));} .center-zoom .slick-slide a:focus-visible{opacity:.7;} .center-zoom.slider{display:block;} .center-zoom .slick-prev,.center-zoom .slick-next{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:33px;height:33px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;} .center-zoom .slick-prev{left:2.5%;} .center-zoom .slick-next{right:2.5%;} @media (min-width:768px){ .center-zoom .slick-prev,.center-zoom .slick-next{width:37px;height:37px;}.center-zoom .slick-prev{left:28%;}.center-zoom .slick-next{right:28%;} } .center-zoom .slick-prev:before,.center-zoom .slick-next:before{content:none;} @media (prefers-reduced-motion:reduce){.center-zoom .slick-slide,.center-zoom .slick-slide img{transition:none!important;}} @media (min-width:768px) and (max-width:1024px) { /* ここはSlickのデフォルトに寄せる（flexをやめる） */ .center-zoom .slick-track{display:block;} /* slick-slideも flexやめる */ .center-zoom .slick-slide{ padding-block:30px; transform-origin:center center; transform:scale(var(--cz-scale-rest)); opacity:var(--cz-fade-rest); transition:transform var(--cz-trans),opacity var(--cz-trans); } /* 代わりに「中身」をflexで中央寄せ */ .center-zoom .slick-slide > div{ display:flex; align-items:center; justify-content:center; } } /* slide本体は拡大しない */ .center-zoom .slick-slide{ transform: none !important; } /* ズームしたい対象（aタグ）にだけscaleをかける */ .center-zoom .slick-slide a{ display:block; transform: scale(var(--cz-scale-rest)); transform-origin:center; transition: transform var(--cz-trans), opacity var(--cz-trans); opacity: var(--cz-fade-rest); } /* 中央だけ大きく */ .center-zoom .slick-center a{ transform: scale(var(--cz-scale-center)); opacity: 1; } /* pageTop 初期は非表示 */ .page_top{position:fixed;bottom:50px;right:5%;display:block;width:130px;height:130px;z-index:100;text-decoration:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility .35s ease;} .page_top.show{opacity:1;visibility:visible;pointer-events:auto;} #pagetop_lottie{width:100%;height:100%;transform:rotateY(0deg) translateY(0);transition:transform 0.8s ease 0.3s;} .page_top.active #pagetop_lottie{transform:rotateY(360deg) translateY(-200px);} @media screen and (min-width:1025px){.page_top{bottom:100px;right:100px;} } .page_top[data-defer="1"]:not([data-ready="1"]){opacity:0!important;visibility:hidden!important;pointer-events:none!important;} /* ロック中だけ効かせる */ .top_stage.locking { touch-action: none; overscroll-behavior: contain; } .top_stage { touch-action: auto; overscroll-behavior: auto; }