.elementor-23105 .elementor-element.elementor-element-b9c7a6d{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23105 .elementor-element.elementor-element-1c520ad{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-23105 .elementor-element.elementor-element-9d26901{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-23105 .elementor-element.elementor-element-6bdf346{--display:flex;--position:absolute;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:2px 2px;--row-gap:2px;--column-gap:2px;--margin-top:0;--margin-bottom:0;--margin-left:0;--margin-right:0;--padding-top:30px;--padding-bottom:30px;--padding-left:30px;--padding-right:30px;bottom:0px;--z-index:999;}.elementor-23105 .elementor-element.elementor-element-6bdf346.e-con{--align-self:flex-end;}body:not(.rtl) .elementor-23105 .elementor-element.elementor-element-6bdf346{left:0px;}body.rtl .elementor-23105 .elementor-element.elementor-element-6bdf346{right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );}.elementor-23105 .elementor-element.elementor-element-004c5ca .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:700;letter-spacing:1px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );padding:5px 10px 5px 10px;}.elementor-23105 .elementor-element.elementor-element-0704631 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:700;letter-spacing:1px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );padding:5px 10px 5px 10px;}.elementor-23105 .elementor-element.elementor-element-9439fc9 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:700;letter-spacing:1px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );padding:5px 10px 5px 10px;}.elementor-23105 .elementor-element.elementor-element-6fcafdb .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:700;letter-spacing:1px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );padding:5px 10px 5px 10px;}.elementor-23105 .elementor-element.elementor-element-493e716 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:700;letter-spacing:1px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );padding:5px 10px 5px 10px;}.elementor-23105 .elementor-element.elementor-element-05ecd8a .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:700;letter-spacing:1px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );padding:5px 10px 5px 10px;}.elementor-23105 .elementor-element.elementor-element-bda3a00 .elementor-button{background-color:#FFFFFF00;font-family:"Montserrat", Sans-serif;font-size:15px;font-weight:700;letter-spacing:1px;fill:var( --e-global-color-secondary );color:var( --e-global-color-secondary );padding:5px 10px 5px 10px;}@media(max-width:1023px){.elementor-23105 .elementor-element.elementor-element-6bdf346{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--flex-wrap:wrap;}}@media(max-width:767px){.elementor-23105 .elementor-element.elementor-element-b9c7a6d{--min-height:100svh;--justify-content:center;--margin-top:-60px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-23105 .elementor-element.elementor-element-9d26901{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-23105 .elementor-element.elementor-element-6bdf346{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-23105 .elementor-element.elementor-element-004c5ca .elementor-button{font-size:13px;padding:8px 8px 8px 8px;}.elementor-23105 .elementor-element.elementor-element-0704631 .elementor-button{font-size:13px;padding:8px 8px 8px 8px;}.elementor-23105 .elementor-element.elementor-element-9439fc9 .elementor-button{font-size:13px;padding:8px 8px 8px 8px;}.elementor-23105 .elementor-element.elementor-element-6fcafdb .elementor-button{font-size:13px;padding:8px 8px 8px 8px;}.elementor-23105 .elementor-element.elementor-element-493e716 .elementor-button{font-size:13px;padding:8px 8px 8px 8px;}.elementor-23105 .elementor-element.elementor-element-05ecd8a .elementor-button{font-size:13px;padding:8px 8px 8px 8px;}.elementor-23105 .elementor-element.elementor-element-bda3a00 .elementor-button{font-size:13px;padding:8px 8px 8px 8px;}}/* Start custom CSS for html, class: .elementor-element-9d26901 *//* =========================================
   Base
========================================= */
.cinematic svg{
  width: 100%;
}

/* =========================================
   Countdown (full screen)
========================================= */
.bg-dof{ position: relative; }

.countdown{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #000;
  opacity: 1;
  transition: opacity .5s ease;
}

.countdown__video{
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  display: block;
}

/* 終了したら非表示（フェード見せたいなら display:none はJSで遅らせる） */
.bg-dof.is-countdown-done .countdown{
  display: none;
  opacity: 0;
}

/* =========================================
   Stage (A/B positioning)
========================================= */
.sig-seq{
  position: relative;
  height: 80vh; /* 必要なければ外してOK */
}

/* 共通：中央基準 */
.sig-seq .sig{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* SVGサイズ調整（必要なら数値変更） */
.sig-seq .sig svg{
  display: block;
  width: min(82vw, 300px);
  height: auto;
}
/* --- sig-b：上に固定（Bは消えない / ふわっとフェードのみ + 滲み） --- */
.sig-seq .sig-b{
  top: 22%;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: blur(2px);
  transition:
    opacity 1000ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 1000ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter;
}

/* JSが .sig-seq に is-show-b を付けたらBを表示（消えない） */
.sig-seq.is-show-b .sig-b{
  opacity: 1;
  filter: blur(0);
}

/* --- sig-a：画面中央くらい（Aはこのタイミングで「見える」） --- */
.sig-seq .sig-a{
  top: 46%;
  transform: translate(-50%, -50%);
  opacity: 0;                 /* ← 最初は見えない */
  transition: opacity 400ms ease;
  will-change: opacity;
}

/* JSが bg に is-show-a を付けたら A を表示 */
.bg-dof.is-show-a .sig-seq .sig-a{
  opacity: 1;
}

/* 端末配慮：動きを減らす設定の人は静かに */
@media (prefers-reduced-motion: reduce) {
  .sig-seq .sig-a,
  .sig-seq .sig-b{
    transition: opacity 500ms linear;
    filter: none;
  }
}

/* =========================================
   SVG Artista (A fill animation)
   - Generated by SVG Artista on 1/7/2026, 6:03:11 PM
========================================= */

@-webkit-keyframes animate-svg-fill-1 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
@keyframes animate-svg-fill-1 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
.wordA-1{ -webkit-animation: animate-svg-fill-1 1s cubic-bezier(0.455,0.03,0.515,0.955) .4s both; animation: animate-svg-fill-1 1s cubic-bezier(0.455,0.03,0.515,0.955) .4s both; }

@-webkit-keyframes animate-svg-fill-2 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
@keyframes animate-svg-fill-2 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
.wordA-2{ -webkit-animation: animate-svg-fill-2 1s cubic-bezier(0.455,0.03,0.515,0.955) .6s both; animation: animate-svg-fill-2 1s cubic-bezier(0.455,0.03,0.515,0.955) .6s both; }

@-webkit-keyframes animate-svg-fill-3 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
@keyframes animate-svg-fill-3 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
.wordA-3{ -webkit-animation: animate-svg-fill-3 1s cubic-bezier(0.455,0.03,0.515,0.955) .8s both; animation: animate-svg-fill-3 1s cubic-bezier(0.455,0.03,0.515,0.955) .8s both; }

@-webkit-keyframes animate-svg-fill-4 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
@keyframes animate-svg-fill-4 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
.wordA-4{ -webkit-animation: animate-svg-fill-4 1s cubic-bezier(0.455,0.03,0.515,0.955) 1s both; animation: animate-svg-fill-4 1s cubic-bezier(0.455,0.03,0.515,0.955) 1s both; }

@-webkit-keyframes animate-svg-fill-5 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
@keyframes animate-svg-fill-5 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
.wordA-5{ -webkit-animation: animate-svg-fill-5 1s cubic-bezier(0.455,0.03,0.515,0.955) 1.2s both; animation: animate-svg-fill-5 1s cubic-bezier(0.455,0.03,0.515,0.955) 1.2s both; }

@-webkit-keyframes animate-svg-fill-6 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
@keyframes animate-svg-fill-6 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
.wordA-6{ -webkit-animation: animate-svg-fill-6 1s cubic-bezier(0.455,0.03,0.515,0.955) 1.4s both; animation: animate-svg-fill-6 1s cubic-bezier(0.455,0.03,0.515,0.955) 1.4s both; }

@-webkit-keyframes animate-svg-fill-7 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
@keyframes animate-svg-fill-7 { 0%{fill:transparent;} 100%{fill:rgb(0,0,0);} }
.wordA-7{ -webkit-animation: animate-svg-fill-7 1s cubic-bezier(0.455,0.03,0.515,0.955) 1.6s both; animation: animate-svg-fill-7 1s cubic-bezier(0.455,0.03,0.515,0.955) 1.6s both; }

/* =========================================
   IMPORTANT:
   A animation should NOT run behind countdown
   → pause by default, run when bg has .is-show-a
========================================= */
.sig-seq .sig-a .wordA-1,
.sig-seq .sig-a .wordA-2,
.sig-seq .sig-a .wordA-3,
.sig-seq .sig-a .wordA-4,
.sig-seq .sig-a .wordA-5,
.sig-seq .sig-a .wordA-6,
.sig-seq .sig-a .wordA-7{
  animation-play-state: paused;
}

.bg-dof.is-show-a .sig-seq .sig-a .wordA-1,
.bg-dof.is-show-a .sig-seq .sig-a .wordA-2,
.bg-dof.is-show-a .sig-seq .sig-a .wordA-3,
.bg-dof.is-show-a .sig-seq .sig-a .wordA-4,
.bg-dof.is-show-a .sig-seq .sig-a .wordA-5,
.bg-dof.is-show-a .sig-seq .sig-a .wordA-6,
.bg-dof.is-show-a .sig-seq .sig-a .wordA-7{
  animation-play-state: running;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b9c7a6d *//* 付与するクラス（Elementorの親コンテナに付与） */
.bg-dof{
  position: relative;
  overflow: hidden;
  background: #fff; /* 初期は白 */
}

/* 背景レイヤー共通 */
.bg-dof::before,
.bg-dof::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("https://nicholsonandnicholson.net/wp-content/uploads/2026/01/main_pc2.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: opacity, filter, transform;
  z-index: 0;
}

/* 中身を前面に */
.bg-dof > *{
  position: relative;
  z-index: 1;
}

/* 下：最終的に見せたい “シャープ” 背景（初期は非表示） */
.bg-dof::before{
  opacity: 0;
  filter: blur(0px);
  transform: scale(1.02);
  transition: opacity 2.8s ease-out;
}

/* 上：最初に見せる “滲み＋震え” 背景（初期は非表示にするのが今回の肝） */
.bg-dof::after{
  opacity: 0; /* ★ここを 1 → 0 にして「最初は白」を実現 */
  filter: blur(18px) saturate(1.15) contrast(1.08);
  transform: scale(1.06);
}

/* ▼ Bが出るタイミングで背景演出開始（is-visible ではなく is-show-b に統一） */
.bg-dof.is-show-b::before{
  opacity: 1;
}

.bg-dof.is-show-b::after{
  opacity: 1; /* いったん滲み背景を出してから */
  animation:
    dof-unblur 1.6s ease-out forwards,
    dof-jitter 0.18s steps(2, end) infinite;
}

/* 滲みが解けていく（blur↓ ＋ opacity↓） */
@keyframes dof-unblur{
  0%   { filter: blur(18px) saturate(1.15) contrast(1.08); opacity: 1; }
  35%  { filter: blur(12px) saturate(1.12) contrast(1.06); opacity: 1; }
  70%  { filter: blur(6px)  saturate(1.08) contrast(1.03); opacity: .65; }
  100% { filter: blur(0px)  saturate(1.0)  contrast(1.0);  opacity: 0; }
}

/* 震え（微振動） */
@keyframes dof-jitter{
  0%   { transform: translate(0,0) scale(1.06); }
  25%  { transform: translate(0.6px,-0.4px) scale(1.06); }
  50%  { transform: translate(-0.7px,0.5px) scale(1.06); }
  75%  { transform: translate(0.4px,0.7px) scale(1.06); }
  100% { transform: translate(0,0) scale(1.06); }
}

/* 動きを減らす設定の人にはアニメ切る */
@media (prefers-reduced-motion: reduce){
  .bg-dof::after,
  .bg-dof.is-show-b::after{ animation:none !important; opacity:0; filter:none; }
  .bg-dof::before{ opacity:1; }
}

@media (max-width:1023px){
    /* 背景レイヤー共通 */
.bg-dof::before,
.bg-dof::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("https://nicholsonandnicholson.net/wp-content/uploads/2026/01/26aw_main_sp.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: opacity, filter, transform;
  z-index: 0;
}
}

@media(max-width:767px){
    .sig-seq .sig-a svg{
        width:min(60vw, 300px);
    }
    
}/* End custom CSS */