/* セカフロ Motion Gallery v1.5: taller 16:9-oriented canvas while preserving layouts A/B. */
.sfg-root,.sfg-root *,.sfg-detail,.sfg-detail *{box-sizing:border-box}
.sfg-root{--sfg-blue:#0789ff;--sfg-ice:#64dfff;--sfg-shade:.38;position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:650px;margin:28px auto;padding:clamp(18px,3.2vw,42px);color:#fff;background:radial-gradient(ellipse at 80% 8%,#14548c 0%,transparent 47%),linear-gradient(135deg,#051125,#061a30 60%,#060d1f);border:1px solid #24567b;border-radius:18px;font-family:'Noto Sans JP',Meiryo,sans-serif;box-shadow:0 30px 80px rgba(0,15,40,.26)}
.sfg-root .sfg-backdrop{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(115deg,rgba(1,7,16,var(--sfg-shade)),rgba(1,7,16,var(--sfg-shade))),var(--sfg-bg,linear-gradient(110deg,#103356,#071324));background-size:cover;background-position:center;transform:scale(1.04)}
.sfg-root .sfg-backdrop:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(35,176,255,.025) 4px);pointer-events:none}
.sfg-header,.sfg-footer{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px}
.sfg-header{padding:0 1% 14px;border-bottom:1px solid rgba(126,220,255,.38)}
.sfg-header strong{font-size:clamp(20px,3vw,38px);font-weight:900;letter-spacing:.1em;line-height:1.2;color:#f5fcff;text-shadow:0 0 22px rgba(0,148,255,.35)}
.sfg-header strong i{color:#3ec4ff;font-style:normal}
.sfg-header .sfg-kicker{display:block;margin:0 0 4px;color:#7bdbff;font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.28em}
.sfg-header .sfg-header-count{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.16em;color:#abe7ff;white-space:nowrap}
.sfg-scene-window{position:relative;overflow:hidden;width:100%;margin:0 auto}
.sfg-scene-track{display:flex;width:100%;transition:transform .88s cubic-bezier(.22,.8,.17,1);will-change:transform}
.sfg-scene{position:relative;flex:0 0 100%;width:100%;height:clamp(440px,55vw,650px);min-width:0;overflow:hidden}
.sfg-scene:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(150deg,transparent 45%,rgba(0,141,255,.035) 45%,transparent 46%)}
.sfg-tile{position:absolute;z-index:2;display:block;overflow:hidden;min-height:0;border:2px solid rgba(87,204,255,.7);background:#051e34;box-shadow:0 0 0 1px rgba(1,21,36,.4),0 12px 25px rgba(0,0,0,.34);border-radius:5px;isolation:isolate;text-decoration:none!important;color:#fff!important;transition:border-color .25s,box-shadow .25s,filter .25s;animation:sfg-enter .78s cubic-bezier(.2,.85,.2,1) both;animation-delay:calc(var(--sfg-order) * 115ms)}
.sfg-scene:not(.is-active) .sfg-tile{animation:none}
.sfg-tile:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(0,9,25,.86),transparent 46%),linear-gradient(160deg,rgba(7,115,194,.18),transparent 48%);pointer-events:none}
.sfg-tile .sfg-tile-picture{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.sfg-tile .sfg-img{display:block!important;width:100%!important;max-width:none!important;height:100%!important;object-fit:cover;object-position:center;filter:saturate(.95);transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .4s}
.sfg-tile .sfg-tile-meta{position:absolute;z-index:2;left:clamp(8px,1.2vw,20px);right:8px;bottom:clamp(8px,1vw,15px);display:flex;align-items:baseline;gap:10px;color:#fff;text-shadow:0 2px 8px #000;font-size:clamp(12px,1.5vw,18px);font-weight:800;line-height:1.3}
.sfg-tile .sfg-tile-num{font:700 clamp(11px,1.25vw,17px)/1 Arial,sans-serif;color:#6ee3ff;letter-spacing:.04em}
.sfg-tile .sfg-tile-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfg-tile:hover,.sfg-tile:focus-visible{z-index:4;border-color:#fff;box-shadow:0 0 0 2px #138ef7,0 0 28px rgba(22,151,255,.55);outline:none}
.sfg-tile:hover .sfg-img,.sfg-tile:focus-visible .sfg-img{transform:scale(1.075);filter:saturate(1.15)}
.sfg-scene .sfg-scene-lines{position:absolute;inset:0;pointer-events:none}
.sfg-layout-a .sfg-scene-lines:before{content:'';position:absolute;top:-13%;right:11%;height:125%;width:8%;border-left:5px solid var(--sfg-blue);border-right:5px solid var(--sfg-blue);transform:skewX(-20deg);opacity:.72;filter:drop-shadow(0 0 8px rgba(0,131,255,.25))}
.sfg-layout-a .sfg-scene-lines:after{content:'';position:absolute;left:7%;bottom:5%;width:30%;height:10px;border-top:3px solid var(--sfg-blue);border-bottom:2px solid var(--sfg-blue);transform:skewX(-24deg)}
.sfg-layout-a .sfg-slot-0{left:6%;top:9%;width:50%;height:29%}
.sfg-layout-a .sfg-slot-1{left:19%;top:37%;width:50%;height:28%}
.sfg-layout-a .sfg-slot-2{left:4%;top:64%;width:50%;height:29%}
.sfg-layout-a .sfg-slot-3{left:69%;top:-6%;width:20%;height:110%;z-index:1;border:4px solid var(--sfg-blue);transform:skewX(-20deg);border-radius:2px;box-shadow:0 0 26px rgba(0,136,255,.35)}
.sfg-layout-a .sfg-slot-3 .sfg-tile-picture{width:180%;left:-40%;transform:skewX(20deg)}
.sfg-layout-a .sfg-slot-3 .sfg-img{width:100%!important}
.sfg-layout-a .sfg-slot-3 .sfg-tile-meta{left:25%;right:-20%;bottom:14%;transform:skewX(20deg) rotate(-90deg);transform-origin:left bottom;white-space:nowrap}
.sfg-layout-b .sfg-scene-lines:before{content:'';position:absolute;left:7%;right:4%;top:3%;height:19%;border-top:5px solid var(--sfg-blue);border-bottom:5px solid var(--sfg-blue);transform:skewX(16deg);opacity:.46}
.sfg-layout-b .sfg-scene-lines:after{content:'';position:absolute;left:5%;right:12%;bottom:5%;height:9%;border-top:4px solid var(--sfg-blue);border-bottom:3px solid var(--sfg-blue);transform:skewX(-22deg);opacity:.55}
/* Layout B mirrors the hand-drawn five-photo staircase:
   G: one wide ribbon at top; F/E/I: three separate staggered tiles;
   H: one wide ribbon at bottom. Vertical rows NEVER overlap. */
.sfg-layout-b .sfg-slot-0{left:24%;top:45%;width:49%;height:18%} /* E: middle staircase */
.sfg-layout-b .sfg-slot-1{left:4%;top:25%;width:49%;height:18%}  /* F: left staircase */
.sfg-layout-b .sfg-slot-2{left:19%;top:5%;width:77%;height:14%;z-index:1;transform:skewX(20deg);border:4px solid var(--sfg-blue)} /* G: upper wide ribbon */
.sfg-layout-b .sfg-slot-3{left:7%;top:86%;width:84%;height:12%;z-index:1;transform:skewX(-16deg);border:4px solid var(--sfg-blue)} /* H: lower wide ribbon */
.sfg-layout-b .sfg-slot-4{left:47%;top:66%;width:49%;height:18%} /* I: right staircase */
.sfg-layout-b .sfg-slot-2 .sfg-tile-picture,.sfg-layout-b .sfg-slot-3 .sfg-tile-picture{width:110%;left:-5%;transform:skewX(-20deg)}
.sfg-layout-b .sfg-slot-3 .sfg-tile-picture{transform:skewX(16deg)}
.sfg-layout-b .sfg-slot-2 .sfg-tile-meta{transform:skewX(-20deg);left:6%}
.sfg-layout-b .sfg-slot-3 .sfg-tile-meta{transform:skewX(16deg);left:7%}
.sfg-scene-label{position:absolute;right:6px;top:8px;z-index:3;font:700 10px/1 Arial,sans-serif;letter-spacing:.2em;color:rgba(203,242,255,.7);pointer-events:none}
.sfg-footer{border-top:1px solid rgba(126,220,255,.35);padding:15px 1% 0}
.sfg-footer p{font-size:11px;color:#b7d8eb;letter-spacing:.1em;margin:0!important}
.sfg-footer-separator{padding:0 9px;color:#00b6ff}
.sfg-nav{display:flex;gap:10px;align-items:center;color:#fff;font-family:Arial,sans-serif}
.sfg-root .sfg-nav button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(83,195,255,.65);border-radius:50%;background:rgba(6,41,73,.8);color:#fff;cursor:pointer;font:normal 32px/1 Arial,sans-serif;transition:background .2s,transform .2s}
.sfg-root .sfg-nav button:hover,.sfg-root .sfg-nav button:focus-visible{background:#007bd6;transform:translateY(-2px);outline:2px solid #84dfff;outline-offset:2px}
.sfg-page-indicator{min-width:67px;text-align:center;font-weight:800;font-size:13px;letter-spacing:.08em}
@keyframes sfg-enter{from{opacity:0;translate:0 30px;filter:blur(8px)}to{opacity:1;translate:0 0;filter:blur(0)}}
/* Detail behaves like its own full-viewport page, and is moved to body by JS. */
.sfg-detail[hidden]{display:none!important}
.sfg-detail{position:fixed!important;inset:0!important;z-index:2147480000!important;display:flex;flex-direction:column;min-height:100dvh;overflow:auto;padding:clamp(12px,2.5vw,32px);color:#fff!important;background:linear-gradient(140deg,rgba(2,19,36,.98),rgba(2,8,19,.99));font-family:'Noto Sans JP',Meiryo,sans-serif}
.sfg-detail:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 65% 30%,rgba(0,129,240,.18),transparent 49%)}
.sfg-detail .sfg-detail-head{width:100%;max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(87,204,255,.34);padding-bottom:14px}
.sfg-detail a{text-decoration:none!important;color:#fff!important}
.sfg-detail .sfg-detail-close{font-size:clamp(13px,1.5vw,17px);font-weight:700;letter-spacing:.04em;padding:10px 14px;border:1px solid #177dc1;border-radius:5px;background:#092c4d}
.sfg-detail .sfg-detail-close:hover,.sfg-detail .sfg-detail-close:focus-visible{background:#0879cf}
.sfg-detail-counter{font:700 16px Arial,sans-serif;letter-spacing:.1em;color:#8fddff}
.sfg-detail-body{display:grid;grid-template-columns:minmax(34px,64px) minmax(0,1fr) minmax(34px,64px);gap:clamp(4px,1.5vw,25px);width:100%;max-width:1400px;flex:1;align-items:center;margin:auto}
.sfg-detail-figure{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;gap:22px;margin:0;padding:20px 0 0;text-align:center}
.sfg-detail-img{display:block!important;width:auto!important;max-width:100%!important;max-height:min(65dvh,800px)!important;height:auto!important;object-fit:contain;box-shadow:0 22px 50px rgba(0,0,0,.38);border:1px solid #3c7694;background:#0c233c}
.sfg-detail-title{margin:0!important;font-weight:800;font-size:clamp(20px,2.7vw,34px)!important;color:#fff!important;letter-spacing:.03em}
.sfg-detail-caption{margin:8px 0 0!important;color:#d3e6f2!important;font-size:clamp(13px,1.6vw,18px)!important;line-height:1.7}
.sfg-detail .sfg-detail-arrow{display:grid;place-items:center;border:1px solid #367ca8;border-radius:50%;width:clamp(34px,5vw,64px);height:clamp(34px,5vw,64px);background:rgba(14,69,108,.6);font:normal clamp(28px,4vw,42px)/1 Arial,sans-serif;transition:background .2s}
.sfg-detail .sfg-detail-arrow:hover,.sfg-detail .sfg-detail-arrow:focus-visible{background:#0768b0;outline:2px solid #a4e4ff;outline-offset:2px}
.sfg-detail-hint{margin:10px auto 0!important;text-align:center;color:#8baebf;font-size:12px}
@media(max-width:700px){
 .sfg-root{min-height:590px;padding:14px 10px 16px;border-radius:12px;margin:18px auto}
 .sfg-header{padding:3px 6px 11px}
 .sfg-header strong{font-size:clamp(16px,4.9vw,25px);letter-spacing:.05em}
 .sfg-header .sfg-kicker{font-size:9px}
 .sfg-header .sfg-header-count{font-size:9px}
 .sfg-scene{height:475px}
 .sfg-layout-a .sfg-slot-0{left:3%;top:8%;width:65%;height:27%}
 .sfg-layout-a .sfg-slot-1{left:13%;top:35%;width:66%;height:26%}
 .sfg-layout-a .sfg-slot-2{left:3%;top:62%;width:65%;height:29%}
 .sfg-layout-a .sfg-slot-3{left:76%;top:-5%;width:20%;height:107%;transform:skewX(-16deg)}
 .sfg-layout-a .sfg-slot-3 .sfg-tile-picture{transform:skewX(16deg)}
 .sfg-layout-a .sfg-slot-3 .sfg-tile-meta{transform:skewX(16deg) rotate(-90deg)}
 .sfg-layout-a .sfg-scene-lines:before{right:8%;transform:skewX(-16deg)}
 .sfg-layout-b .sfg-slot-0{left:20%;top:44%;width:61%;height:17%}
 .sfg-layout-b .sfg-slot-1{left:3%;top:24%;width:61%;height:17%}
 .sfg-layout-b .sfg-slot-2{left:19%;top:5%;width:75%;height:14%}
 .sfg-layout-b .sfg-slot-3{left:7%;top:86%;width:84%;height:11%;transform:skewX(-12deg)}
 .sfg-layout-b .sfg-slot-4{left:38%;top:65%;width:59%;height:17%}
 .sfg-layout-b .sfg-slot-3 .sfg-tile-picture,.sfg-layout-b .sfg-slot-3 .sfg-tile-meta{transform:skewX(12deg)}
 .sfg-tile .sfg-tile-meta{font-size:12px;left:8px;right:4px;gap:5px;bottom:7px}
 .sfg-tile .sfg-tile-num{font-size:10px}
 .sfg-tile{border-width:1.5px}
 .sfg-footer{padding:11px 4px 0;gap:8px}
 .sfg-footer p{font-size:9px;letter-spacing:0}
 .sfg-footer-separator{padding:0 2px}
 .sfg-root .sfg-nav button{width:36px;height:36px;font-size:26px}
 .sfg-nav{gap:6px}
 .sfg-page-indicator{min-width:55px;font-size:11px}
 .sfg-detail{padding:12px 10px}
 .sfg-detail-body{grid-template-columns:32px minmax(0,1fr) 32px;gap:3px}
 .sfg-detail-figure{gap:14px;padding-top:14px}
 .sfg-detail-img{max-height:58dvh!important}
 .sfg-detail .sfg-detail-arrow{width:31px;height:38px;border-radius:5px;font-size:28px}
 .sfg-detail-hint{font-size:10px}
}
@media(max-width:380px){.sfg-root{padding:12px 7px}.sfg-scene{height:420px}.sfg-footer p{max-width:42%}}
@media(prefers-reduced-motion:reduce){.sfg-root *, .sfg-detail *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}


/* ==============================================
   v1.2: FULL BLEED / RESPONSIVE CAPTION / CONTROLS
   Scoped: only the WordPress page with the shortcode.
   ============================================== */
body.sfg-gallery-page #content,
body.sfg-gallery-page .l-content{width:100%!important;max-width:none!important;margin-top:0!important;margin-bottom:0!important;padding-top:0!important;padding-bottom:0!important;padding-left:0!important;padding-right:0!important}
body.sfg-gallery-page .l-content{display:block!important}
body.sfg-gallery-page .l-mainContent,body.sfg-gallery-page .l-mainContent__inner{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
body.sfg-gallery-page .l-content .l-sidebar{display:none!important}
body.sfg-gallery-page .l-mainContent__inner > .post_content{width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
body.sfg-gallery-page .post_content > .wp-block-shortcode{margin:0!important;padding:0!important}
body.sfg-gallery-page .c-pageTitle{display:none!important}
body.sfg-gallery-page .l-content > .c-breadcrumb,body.sfg-gallery-page .p-breadcrumb{margin-top:0!important}

/* Full viewport width, now with a taller 16:9-oriented stage.
   The gallery keeps full bleed width, but its height is driven by the wider
   viewport so desktop screens no longer feel too flat or horizontal. */
.sfg-root{
  width:100vw!important;max-width:none!important;
  height:max(calc(100svh - var(--sfg-top-offset, 80px)), min(calc(100vw * 9 / 16), 1040px));
  min-height:760px;
  margin:0 calc(50% - 50vw)!important;
  padding:clamp(12px,1.7vw,28px) clamp(12px,2vw,36px)!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  display:flex;flex-direction:column;
}
.sfg-root .sfg-scene-window{flex:1 1 auto;min-height:0;display:flex}
.sfg-root .sfg-scene-track{height:100%;flex:1 0 auto}
.sfg-root .sfg-scene{height:100%;min-height:0}
.sfg-root .sfg-header{flex:0 0 auto;padding-bottom:12px}
.sfg-root .sfg-footer{flex:0 0 auto;min-height:68px}
/* Keep long Japanese titles on a horizontal, glass-panel chip. */
.sfg-layout-a .sfg-slot-3 .sfg-tile-meta{display:none!important}
.sfg-root .sfg-diagonal-caption{
  position:absolute;z-index:7;right:3%;bottom:10%;left:56%;
  display:flex;align-items:center;gap:9px;min-width:0;max-width:440px;
  padding:12px 13px;overflow:hidden;
  border:1px solid rgba(111,222,255,.80);border-left:4px solid #4ad4ff;
  border-radius:5px;background:linear-gradient(100deg,rgba(3,18,43,.95),rgba(7,35,70,.84));
  box-shadow:0 10px 30px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  color:#fff!important;text-decoration:none!important;white-space:nowrap;
  writing-mode:horizontal-tb!important;text-orientation:mixed!important;
  font-weight:800;font-size:clamp(12px,1.4vw,18px);line-height:1.25;
  transition:background .2s,transform .2s,border-color .2s;
}
.sfg-root .sfg-diagonal-caption:hover,.sfg-root .sfg-diagonal-caption:focus-visible{background:rgba(3,78,143,.95);border-color:#fff;transform:translateY(-2px);outline:2px solid #83daff;outline-offset:2px}
.sfg-diagonal-no{font:800 13px/1.2 Arial,sans-serif;color:#67ddff;flex:0 0 auto}
.sfg-diagonal-title{display:block;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;writing-mode:horizontal-tb!important;word-break:keep-all}
.sfg-diagonal-open{font-size:18px;color:#76dfff;flex:0 0 auto}

/* Lower-right control bar: defined glass buttons and an illuminated counter. */
.sfg-root .sfg-nav{gap:7px;border:1px solid rgba(91,185,238,.45);border-radius:11px;padding:6px;background:rgba(2,21,43,.75);box-shadow:0 6px 25px rgba(0,0,0,.24);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.sfg-root .sfg-nav button{width:44px;height:42px;border:1px solid rgba(116,224,255,.35);border-radius:8px;background:linear-gradient(150deg,#0a5c99,#042c55);font:700 23px/1 Arial,sans-serif;box-shadow:inset 0 1px rgba(255,255,255,.12)}
.sfg-root .sfg-nav button:hover,.sfg-root .sfg-nav button:focus-visible{background:linear-gradient(150deg,#16aaff,#086ba9);box-shadow:0 0 15px rgba(22,170,255,.55);transform:translateY(-1px)}
.sfg-root .sfg-page-indicator{min-width:72px;color:#d8f7ff;font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.05em}
.sfg-control-divider{height:25px;width:1px;background:rgba(116,210,255,.30);margin:0 2px}
.sfg-root .sfg-nav .sfg-play-toggle{font-size:16px;color:#7ddaff;background:rgba(4,38,70,.9)}
.sfg-root .sfg-nav .sfg-play-toggle:disabled{opacity:.55;cursor:not-allowed}

/* The green SWELL scroll-to-top button shown in the screenshot is #pagetop. */
body.sfg-gallery-page #pagetop{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important;border:1px solid #59c8ff!important;border-radius:12px!important;background:rgba(3,26,53,.89)!important;color:#d9f7ff!important;box-shadow:0 8px 28px rgba(0,0,0,.35),0 0 12px rgba(0,149,255,.2)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,transform .2s}
body.sfg-gallery-page #pagetop:hover{background:rgba(5,118,191,.96)!important;transform:translateY(-3px)}
body.sfg-gallery-page #pagetop i,body.sfg-gallery-page #pagetop i::before{color:#a7ecff!important}

@media(max-width:700px){
 .sfg-root{height:max(calc(100svh - var(--sfg-top-offset, 60px)), min(calc(100vw * 16 / 9), 760px));min-height:640px;padding:11px 8px 12px!important}
 .sfg-root .sfg-scene-window{min-height:0}
 .sfg-root .sfg-header{padding:4px 8px 9px}
 .sfg-root .sfg-footer{min-height:61px;padding:9px 2px 0}
 .sfg-root .sfg-diagonal-caption{left:39%;right:2%;bottom:5%;padding:7px 7px;gap:6px;font-size:12px;max-width:none;border-left-width:3px}
 .sfg-diagonal-no{font-size:11px}.sfg-diagonal-open{font-size:13px}
 .sfg-root .sfg-nav{gap:3px;padding:4px;border-radius:8px}
 .sfg-root .sfg-nav button{width:34px;height:34px;font-size:18px;border-radius:6px}
 .sfg-root .sfg-nav .sfg-play-toggle{font-size:13px}
 .sfg-root .sfg-page-indicator{min-width:56px;font-size:10px}
 .sfg-control-divider{height:20px;margin:0 1px}
 .sfg-root .sfg-footer p{max-width:36%;font-size:9px}
 body.sfg-gallery-page #pagetop{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
}
@media(max-width:380px){
 .sfg-root{min-height:600px;padding:9px 5px!important}
 .sfg-root .sfg-diagonal-caption{left:37%;right:1%;font-size:11px}
}