/* ===========================================================
   サンプルギャラリー / HyperFrames リッチアニメーション教室
   濃紺 #0a0d16 × 金 #d8b365 / 明朝見出し / スマホ最優先
   =========================================================== */

:root{
  --bg:#0a0d16;
  --bg-2:#0c1020;
  --card:#111629;
  --card-2:#151b31;
  --line:rgba(216,179,101,.16);
  --line-2:rgba(255,255,255,.08);
  --gold:#d8b365;
  --gold-lt:#f0dcb2;
  --gold-dk:#9c7c40;
  --tx:#e9ebf3;
  --dim:#9aa2ba;
  --dim-2:#6f7791;
  --radius:14px;
  --tap:44px;
  --wrap:1180px;
  --mincho:"Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:Inter, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP",
         "Yu Gothic UI", Meiryo, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:
    radial-gradient(1200px 620px at 50% -10%, #16203c 0%, rgba(10,13,22,0) 62%),
    var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,video{ max-width:100%; display:block; }

a{ color:var(--gold-lt); }

button{ font:inherit; color:inherit; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:16px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:#0a0d16; padding:10px 16px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

::selection{ background:rgba(216,179,101,.3); }

:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:6px; }

/* ---------------------------------------------------------- hero */

.hero{
  padding:44px 0 26px;
  text-align:center;
  position:relative;
}
.hero::after{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(560px,86%); height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.5;
}
.kicker{
  margin:0 0 10px;
  font-size:12px; letter-spacing:.22em; text-transform:none;
  color:var(--gold); font-weight:600;
}
.hero h1{
  font-family:var(--mincho);
  font-weight:800;
  font-size:clamp(30px,8.4vw,54px);
  line-height:1.25;
  margin:0 0 16px;
  background:linear-gradient(180deg,#fff 8%,var(--gold-lt) 62%,var(--gold-dk) 130%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.lede{
  margin:0 auto;
  max-width:40em;
  font-size:16px;
  color:var(--dim);
}
.lede b{ color:var(--gold-lt); font-weight:700; font-size:1.12em; }

.stats{
  list-style:none; margin:22px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.stats li{
  font-size:13px; color:var(--dim);
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 13px;
  background:rgba(255,255,255,.02);
  white-space:nowrap;
}
.stats li b{ color:var(--gold-lt); font-weight:700; }

/* ---------------------------------------------------------- tabs */

.tabbar{
  position:sticky; top:0; z-index:30;
  background:rgba(10,13,22,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}
.tabbar .wrap{ padding-inline:0; }
.tabs{
  display:flex; gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:8px 16px;
  scroll-padding-inline:16px;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:0 0 auto;
  min-height:var(--tap);
  display:inline-flex; align-items:center; gap:7px;
  padding:0 15px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--dim);
  font-size:15px; font-weight:600;
  cursor:pointer;
  white-space:nowrap;
  transition:color .18s, background .18s, border-color .18s;
}
.tab:hover{ color:var(--tx); }
.tab .n{
  font-size:12px; font-weight:700;
  color:var(--dim-2);
  font-variant-numeric:tabular-nums;
}
.tab.is-on{
  color:#0a0d16;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  border-color:var(--gold);
}
.tab.is-on .n{ color:rgba(10,13,22,.62); }

/* ---------------------------------------------------------- toolbar */

.toolbar{
  position:sticky; top:60px; z-index:29;
  background:rgba(10,13,22,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
  padding:10px 0;
}
.tools{ display:flex; flex-direction:column; gap:9px; }

.searchbox{
  position:relative; display:flex; align-items:center;
  background:var(--card);
  border:1px solid var(--line-2);
  border-radius:12px;
  min-height:var(--tap);
  transition:border-color .18s;
}
.searchbox:focus-within{ border-color:var(--gold); }
.searchbox .ico{
  width:19px; height:19px; margin-left:13px; flex:0 0 auto;
  fill:none; stroke:var(--dim-2); stroke-width:2; stroke-linecap:round;
}
#q{
  flex:1 1 auto; min-width:0;
  background:transparent; border:0; outline:0;
  color:var(--tx);
  font-size:16px;               /* 16px未満だとiOSがズームする */
  padding:11px 8px 11px 10px;
  font-family:var(--sans);
}
#q::placeholder{ color:var(--dim-2); }
#q::-webkit-search-cancel-button{ display:none; }
.qclear{
  flex:0 0 auto;
  width:var(--tap); height:var(--tap);
  background:none; border:0; cursor:pointer;
  color:var(--dim); font-size:22px; line-height:1;
}

.chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:0 0 auto;
  min-height:38px; padding:0 14px;
  display:inline-flex; align-items:center;
  border-radius:999px;
  border:1px solid var(--line-2);
  background:transparent;
  color:var(--dim);
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:.18s;
}
.chip:hover{ color:var(--tx); border-color:var(--line); }
.chip.is-on{
  color:var(--gold-lt);
  border-color:var(--gold);
  background:rgba(216,179,101,.1);
}

/* ---------------------------------------------------------- section */

.sec{ padding:34px 0 8px; }
.sec-head{ margin-bottom:20px; }
.sec-head h2{
  font-family:var(--mincho); font-weight:700;
  font-size:clamp(22px,5.4vw,30px);
  line-height:1.4;
  margin:0 0 8px;
  color:#fff;
}
.sec-head h2 .cnt{
  font-family:var(--sans);
  font-size:13px; font-weight:700;
  color:var(--gold);
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 10px;
  margin-left:10px;
  vertical-align:3px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.sec-head p{ margin:0; color:var(--dim); font-size:15px; max-width:46em; }

/* ---------------------------------------------------------- grid + card */

.grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.grid.wide{ grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }

.card{
  display:flex; flex-direction:column;
  text-align:left;
  background:linear-gradient(180deg,var(--card-2),var(--card));
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  overflow:hidden;
  padding:0;
  cursor:pointer;
  color:inherit;
  transition:border-color .2s, transform .2s, box-shadow .2s;
  min-height:var(--tap);
}
.card:hover{
  border-color:var(--gold);
  transform:translateY(-3px);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.8);
}
.card:active{ transform:translateY(0); }

.shot{
  position:relative;
  aspect-ratio:1/1;
  background:#05070d;
  overflow:hidden;
  isolation:isolate;
}
.grid.wide .shot{ aspect-ratio:16/9; }
.shot::before{
  content:"";
  position:absolute; inset:-14%;
  background-image:var(--bg,none);
  background-size:cover; background-position:center;
  filter:blur(22px) saturate(1.25) brightness(.42);
  z-index:-1;
}
.shot video, .shot img{
  width:100%; height:100%;
  object-fit:contain;
  background:transparent;
}
.play{
  position:absolute; inset:0; margin:auto;
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(10,13,22,.55);
  border:1px solid rgba(240,220,178,.5);
  backdrop-filter:blur(4px);
  display:grid; place-items:center;
  opacity:0; transition:opacity .2s, transform .2s;
  transform:scale(.86);
  pointer-events:none;
}
.play svg{ width:16px; height:16px; fill:var(--gold-lt); margin-left:3px; }
.card:hover .play, .card:focus-visible .play{ opacity:1; transform:scale(1); }
@media (hover:none){ .play{ opacity:.9; transform:scale(1); } }

.no{
  position:absolute; top:8px; left:8px;
  font-size:11px; font-weight:700;
  letter-spacing:.06em;
  color:var(--gold-lt);
  background:rgba(10,13,22,.78);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2px 7px;
  font-variant-numeric:tabular-nums;
}
.from{
  position:absolute; top:8px; right:8px;
  font-size:10px; font-weight:700;
  color:var(--dim);
  background:rgba(10,13,22,.78);
  border:1px solid var(--line-2);
  border-radius:6px;
  padding:2px 7px;
}
.len{
  position:absolute; bottom:8px; right:8px;
  font-size:11px; font-weight:600;
  color:#e9ebf3;
  background:rgba(5,7,13,.8);
  border-radius:5px;
  padding:1px 6px;
  font-variant-numeric:tabular-nums;
}

.body{ padding:11px 12px 13px; display:flex; flex-direction:column; gap:6px; }
.ttl{
  font-family:var(--mincho); font-weight:700;
  font-size:15px; line-height:1.45;
  color:#fff;
  overflow-wrap:anywhere;
}
.sub{
  font-size:12.5px; line-height:1.6;
  color:var(--dim);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:1px; }
.tag{
  font-size:10.5px; font-weight:600;
  color:var(--gold);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 6px;
  white-space:nowrap;
}
.tag.plain{ color:var(--dim-2); border-color:var(--line-2); }

/* ---------------------------------------------------------- CTA */

.cta{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:var(--tap);
  padding:12px 26px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  color:#0a0d16;
  font-weight:700; font-size:15px;
  text-decoration:none;
  box-shadow:0 10px 26px -12px rgba(216,179,101,.75);
  transition:transform .18s, box-shadow .18s, filter .18s;
}
.cta::after{ content:"→"; font-weight:700; }
.cta:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.cta-lg{ font-size:16px; padding:14px 30px; }

/* セクションの締めの一言。ボタンはフッターとモーダルにあるので、ここには置かない */
.sec-note{
  margin:26px 0 6px;
  padding:18px;
  text-align:center;
}
.sec-note p{ margin:0; color:var(--dim); font-size:15px; }
.sec-note p b{ color:var(--gold-lt); font-family:var(--mincho); font-weight:700; }

/* ---------------------------------------------------------- empty */

.empty{
  padding:60px 20px; text-align:center; color:var(--dim);
}
.empty b{ display:block; font-family:var(--mincho); font-size:20px; color:#fff; margin-bottom:8px; }

/* ---------------------------------------------------------- footer */

.foot{
  margin-top:50px;
  padding:44px 0 40px;
  text-align:center;
  border-top:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(216,179,101,.05),rgba(10,13,22,0) 60%);
}
.foot-lead{
  font-family:var(--mincho); font-weight:700;
  font-size:clamp(19px,4.8vw,26px);
  margin:0 0 10px; color:#fff; line-height:1.5;
}
.foot-sub{ margin:0 0 24px; color:var(--dim); font-size:15px; }
.credit{
  margin:30px 0 0; font-size:14px; color:var(--dim);
  font-family:var(--mincho);
}
.credit span{ color:var(--gold); font-family:var(--sans); font-weight:600; }
.note{ margin:8px 0 0; font-size:11.5px; color:var(--dim-2); }

/* ---------------------------------------------------------- modal */

.modal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:12px; }
.modal[hidden]{ display:none; }
.modal-bg{ position:absolute; inset:0; background:rgba(4,6,12,.86); backdrop-filter:blur(6px); }
.modal-box{
  position:relative;
  width:min(980px,100%);
  max-height:calc(100dvh - 24px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:linear-gradient(180deg,var(--card-2),#0c1020);
  border:1px solid var(--line);
  border-radius:16px;
  animation:pop .22s ease-out;
}
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.985);} to{ opacity:1; transform:none; } }

.mstage{
  background:#05070d;
  display:grid; place-items:center;
  border-radius:15px 15px 0 0;
  overflow:hidden;
}
.mstage video{
  width:100%; height:auto;
  max-height:min(64dvh,580px);
  object-fit:contain;
  background:#05070d;
}
.minfo{ padding:16px 18px 22px; text-align:center; }
.mkick{ margin:0 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.16em; color:var(--gold); }
.minfo h2{
  font-family:var(--mincho); font-weight:700;
  font-size:clamp(19px,4.6vw,25px);
  margin:0 0 8px; color:#fff; line-height:1.45;
}
.mnote{ margin:0 auto 12px; max-width:44em; color:var(--dim); font-size:14.5px; text-align:left; }
.mnote:empty{ display:none; }
.mbadges{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; padding:0; margin:0 0 18px; }
.mbadges li{
  font-size:12px; font-weight:600; color:var(--gold);
  border:1px solid var(--line); border-radius:999px; padding:3px 11px;
}

.mclose{
  position:absolute; top:8px; right:8px; z-index:2;
  width:var(--tap); height:var(--tap);
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(10,13,22,.72);
  color:#fff; font-size:24px; line-height:1;
  cursor:pointer;
}
.mnav{
  position:absolute; top:calc(50% - 60px);
  width:var(--tap); height:var(--tap);
  border-radius:50%;
  border:1px solid var(--line-2);
  background:rgba(10,13,22,.72);
  color:var(--gold-lt); font-size:26px; line-height:1;
  cursor:pointer;
  display:grid; place-items:center;
}
.mprev{ left:6px; }
.mnext{ right:6px; }
.mnav:hover{ border-color:var(--gold); }

/* ---------------------------------------------------------- responsive */

@media (max-width:719px){
  .toolbar{ top:60px; }
  .sec{ padding-top:26px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(144px,1fr)); gap:11px; }
  .grid.wide{ grid-template-columns:1fr; }
  .mnav{ top:auto; bottom:14px; }
}

@media (min-width:720px){
  body{ font-size:16.5px; }
  .hero{ padding:64px 0 34px; }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:18px; }
  .tools{ flex-direction:row; align-items:center; }
  .searchbox{ flex:1 1 auto; }
  .chips{ flex:0 0 auto; }
  .ttl{ font-size:16px; }
  .minfo{ padding:20px 26px 26px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .card:hover{ transform:none; }
}

/* ---------------------------------------------------------- 購入者エリア(合言葉)
   モーダル内。動画は誰でも見られるが、プロンプト全文とコードはここで開く。 */

.vault{
  margin:18px -18px 0;
  padding:18px;
  text-align:left;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(216,179,101,.05),transparent 120px);
}
.vault-h{
  display:flex; align-items:center; gap:8px;
  margin:0 0 6px;
  font-family:var(--sans);
  font-size:14px; font-weight:700; letter-spacing:.02em;
  color:var(--gold-lt);
}
.vault-ico{
  width:17px; height:17px; flex:none;
  fill:none; stroke:var(--gold); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.vault-lead{ margin:0 0 12px; font-size:13px; line-height:1.7; color:var(--dim); }
.vault-lead.is-open{ margin:0; color:var(--dim-2); font-size:12.5px; }

.vault-form{ display:flex; gap:8px; flex-wrap:wrap; }
/* display 指定は UA の [hidden]{display:none} より強いので、明示的に打ち消す */
.vault-form[hidden]{ display:none; }
.vault-form input{
  flex:1 1 200px; min-width:0;
  height:var(--tap); padding:0 14px;
  font:inherit; font-size:15px; color:var(--tx);
  background:rgba(0,0,0,.28);
  border:1px solid var(--line-2); border-radius:10px;
}
.vault-form input::placeholder{ color:var(--dim-2); }
.vault-form input:focus{ outline:none; border-color:var(--gold); }
.vault-form button{
  height:var(--tap); padding:0 22px;
  font:inherit; font-size:15px; font-weight:700; color:#0a0d16;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  border:0; border-radius:10px; cursor:pointer;
}
.vault-form button:hover{ filter:brightness(1.06); }

.vault-msg{ margin:10px 0 0; font-size:13px; line-height:1.7; color:var(--dim); }
.vault-msg.is-bad{ color:#ff9b9b; }
.vault-none{ margin:0; font-size:13px; color:var(--dim); }

.vb{
  margin-top:14px;
  border:1px solid var(--line-2); border-radius:12px;
  background:rgba(0,0,0,.24);
  overflow:hidden;
}
.vb-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 12px;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  color:var(--gold);
  background:rgba(216,179,101,.07);
  border-bottom:1px solid var(--line-2);
}
.vb-copy{
  flex:none;
  padding:6px 12px;
  font:inherit; font-size:12px; font-weight:700;
  color:var(--gold-lt);
  background:transparent;
  border:1px solid var(--line); border-radius:8px; cursor:pointer;
}
.vb-copy:hover{ background:rgba(216,179,101,.12); }
.vb-text{ padding:12px; font-size:13.5px; line-height:1.85; color:var(--tx); }
.vb-pre{
  margin:0; padding:12px;
  max-height:min(52vh,460px); overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.vb-pre code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Noto Sans Mono",monospace;
  font-size:12.5px; line-height:1.75; color:#dfe4f2;
  white-space:pre; tab-size:2;
}
.vb-prompt .vb-pre code{ white-space:pre-wrap; word-break:break-word; }

@media (min-width:720px){
  .vault{ margin:22px -26px 0; padding:22px 26px; }
}