/* =========================================================
   2026-09 リニューアルで追加（詳しいページ 3つ）
   各ページのデモの見た目は、実際のサイトの CSS を元に再現しています
   ========================================================= */
.dt-page main {
  font-family: "Shippori Mincho", "Noto Serif JP", serif;
  color: #4a4641;
}

.dt-page .dt-stage {
  position: relative;
}

.dt-page .dt-stage-lbl {
  position: absolute;
  bottom: 10%;
  width: 52%;
  text-align: center;
}

/* 「スマホでの見え方」のスマホの枠 */
.dt-page .mobile {
  padding: 9px;
  background-color: #2e2c29;
  border-radius: 30px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2);
}

.dt-page .pscr {
  overflow: hidden;
  background-color: #fff;
  border-radius: 22px;

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* ページ下の移動（次の作品・WORKS・TOP） */
.dt-page .dt-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  margin: 24px 0 80px;
  padding-top: 48px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.dt-page .dt-next {
  font-size: 14px;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.dt-page .dt-nav-btns {
  display: flex;
  gap: 16px;
}

/* ふくふくリフォーム：見た目／コードの切り替えボタン */
.dt-page .dt-tg {
  min-height: 32px;
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #4a4641;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  cursor: pointer;

  &[aria-pressed="true"] {
    background-color: #7b8d91;
    color: #fff;
  }

  &:focus-visible {
    outline: 2px solid #7b8d91;
    outline-offset: 2px;
  }
}

/* Fukufuku */

.dt-fukufuku {
  .en{font-family:Montserrat,sans-serif}
  .eyebrow{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.2em;color:#7b8d91}
  .h{margin:0;font-size:24px;font-weight:400;letter-spacing:.12em;display:flex;align-items:center;gap:20px}
  .h::after{content:"";flex:1;height:1px;background:rgba(123,141,145,.3)}
  .p{margin:0;font-size:15px;line-height:2.1;color:#444444}
  .frame{background:#ffffff;border-radius:10px;border:1px solid rgba(123,141,145,.15);box-shadow:0 10px 30px rgba(0,0,0,.05),0 1px 4px rgba(0,0,0,.1);box-sizing:border-box;position:relative}
  .tag{font-size:12px;letter-spacing:.15em;color:#7b8d91}
  .live{font-size:11px;letter-spacing:.1em;color:#7b8d91;border:1px solid #7b8d91;padding:2px 10px;border-radius:999px}
  .btn{display:inline-block;width:200px;padding:14px 0;border:1px solid #7b8d91;color:#7b8d91;text-align:center;text-decoration:none;font-family:Montserrat,sans-serif;font-size:13.6px;letter-spacing:.2em}
  .btn:hover{background:#7b8d91;color:#ffffff}
  .browser{background:#ffffff;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.1)}
  .bar{display:flex;gap:6px;padding:9px 12px;background:#ecebe7}
  .bar span{width:9px;height:9px;border-radius:50%;background:#cfcac2}
  .num{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.2em;color:#7b8d91}
  .pt{margin:0;font-size:19px;font-weight:400;line-height:1.7;color:#4a4641}
  .list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .list li{font-size:14px;line-height:1.8;color:#444444;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08)}
  .fk-g{font-family:"BIZ UDPGothic",sans-serif}
  .fk-n{font-family:"Noto Sans JP",sans-serif}
  .fk-sub{margin:0 0 8px;color:#0088cc;font-size:13px;font-weight:700;letter-spacing:.15em}
  .fk-h2{display:inline-block;margin:0 0 16px;font-size:26px;font-weight:700;color:#222222;line-height:1.3}
  .fk-line{width:36px;height:2px;background:#0088cc;margin:0 auto}
  .code{margin:0;padding:24px 26px;background:#2e2c29;color:#e9e5dd;border-radius:6px;font-family:Menlo,Consolas,monospace;font-size:11.5px;line-height:1.75;white-space:pre-wrap;word-break:break-all}
  .code .c{color:#a9b7a0}
  a { color: #7b8d91; }
  a:hover { color: #4a4641; }
}

/* Nekohatake */
@keyframes fadein{0%{opacity:0;transform:scale(1.03)}28%{opacity:1;transform:scale(1)}88%{opacity:1}100%{opacity:0}}
@keyframes ckhHeroLoop{0%{opacity:0;transform:scale(1.06)}21%{opacity:1;transform:scale(1)}90%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}
@keyframes ckhCapLoop{0%,6%{opacity:0;transform:translateY(12px)}22%{opacity:1;transform:translateY(0)}90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
.dt-nekohatake {
  .en{font-family:Montserrat,sans-serif}
  .eyebrow{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.2em;color:#7b8d91}
  .h{margin:0;font-size:24px;font-weight:400;letter-spacing:.12em;display:flex;align-items:center;gap:20px}
  .h::after{content:"";flex:1;height:1px;background:rgba(123,141,145,.3)}
  .p{margin:0;font-size:15px;line-height:2.1;color:#444444}
  .frame{background:#ffffff;border-radius:10px;border:1px solid rgba(123,141,145,.15);box-shadow:0 10px 30px rgba(0,0,0,.05),0 1px 4px rgba(0,0,0,.1);box-sizing:border-box;position:relative}
  .tag{font-size:12px;letter-spacing:.15em;color:#7b8d91}
  .live{font-size:11px;letter-spacing:.1em;color:#7b8d91;border:1px solid #7b8d91;padding:2px 10px;border-radius:999px}
  .btn{display:inline-block;width:200px;padding:14px 0;border:1px solid #7b8d91;color:#7b8d91;text-align:center;text-decoration:none;font-family:Montserrat,sans-serif;font-size:13.6px;letter-spacing:.2em}
  .btn:hover{background:#7b8d91;color:#ffffff}
  .browser{background:#ffffff;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.1)}
  .bar{display:flex;gap:6px;padding:9px 12px;background:#ecebe7}
  .bar span{width:9px;height:9px;border-radius:50%;background:#cfcac2}
  .num{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.2em;color:#7b8d91}
  .pt{margin:0;font-size:19px;font-weight:400;line-height:1.7;color:#4a4641}
  .list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .list li{font-size:14px;line-height:1.8;color:#444444;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08)}
  .cmp{margin:0;display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);border-top:1px solid rgba(0,0,0,.08)}
  .flow{display:flex;align-items:center;gap:20px}
  .flow .box{flex:1;padding:24px;border:1px solid rgba(123,141,145,.4);border-radius:4px;background:rgba(255,255,255,.6);display:flex;flex-direction:column;gap:6px}
  .demo{background:#ffffff;border-radius:10px;border:1px solid rgba(123,141,145,.15);box-shadow:0 10px 30px rgba(0,0,0,.05),0 1px 4px rgba(0,0,0,.1);padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
  .hint{font-family:Montserrat,sans-serif;font-size:11px;letter-spacing:.15em;color:#7b8d91;display:flex;align-items:center;gap:6px}
  .hint::before{content:"";width:6px;height:6px;border-radius:50%;background:#7b8d91}
  .jcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:#4a4641;cursor:pointer}
  .jcard .ph{overflow:hidden;border-radius:4px;aspect-ratio:1/1}
  .jcard .ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .jcard .jt{font-size:14px;line-height:1.5;text-align:center;transition:color .4s ease,transform .4s ease}
  .jcard:hover .ph img{transform:scale(1.08)}
  .jcard:hover .jt{color:#6b7f4e;transform:translateY(-3px)}
  .fade img{transition:filter .8s ease}
  .fade img{filter:saturate(.35) brightness(1.06) contrast(.92)}
  .fade:hover img{filter:saturate(1.2) brightness(1) contrast(1.02)}
  .fadein{animation:fadein 7s ease infinite}
  .lift{display:block;border-radius:4px;transition:transform .35s ease,box-shadow .35s ease;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer}
  .lift:hover{transform:translateY(-6px);box-shadow:0 14px 26px rgba(0,0,0,.14)}
  .gcard{display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.1);background:#f7f3ea;cursor:pointer;text-decoration:none;color:#4a4641}
  .gcard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.3) brightness(1.05);transition:filter .6s ease}
  .gcard:hover img{filter:saturate(1.15)}
  .gcard span{padding:10px 0;text-align:center;font-size:13px;line-height:1.6}
  .acard{position:relative;display:block;overflow:hidden;cursor:pointer;text-decoration:none}
  .acard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
  .acard .ov{position:absolute;inset:0;background:rgba(40,36,32,.72);color:#f5f4f0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;text-align:center;opacity:0;transition:opacity .45s ease}
  .acard:hover .ov{opacity:1}
  @media (prefers-reduced-motion: reduce){.fadein{animation:none}.jcard .ph img,.jcard .jt,.lift,.gcard img,.acard .ov,.fade img{transition:none}}
  .nj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .nj-card{display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.25,.46,.45,.94);cursor:pointer}
  .nj-card:hover{transform:translateY(-4px)}
  .nj-ph{aspect-ratio:1/1;border-radius:10px;overflow:hidden;margin-bottom:12px;background:#e0e0e0}
  .nj-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.25,.46,.45,.94)}
  .nj-card:hover .nj-img{transform:scale(1.05)}
  .nj-t{margin:0 0 8px;color:#46533f;font-family:"Noto Serif JP",serif;font-size:14px;font-weight:400;line-height:1.4;transition:color .35s ease}
  .nj-card:hover .nj-t{color:#735a36}
  .nj-sub{font-size:.9em}
  .nj-p{margin:0;color:#444841;font-family:"Noto Sans JP",sans-serif;font-size:10.5px;line-height:1.8}
  .nf-area{position:relative;width:100%;aspect-ratio:826/619}
  .nf-stack{position:absolute;inset:0;border-radius:10px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.05)}
  .nf-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .nf-lum{filter:grayscale(100%);opacity:.7}
  .nf-ov{opacity:.4;transition:opacity .8s ease}
  .nf-area:hover .nf-ov{opacity:.9}
  .nf-list{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:62%;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;z-index:10}
  .nf-card{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(197,200,190,.3);border-radius:8px;padding:10px 13px;cursor:pointer;transition:transform .45s cubic-bezier(.25,.46,.45,.94),background .45s ease,border-color .45s ease,box-shadow .45s ease}
  .nf-card:hover{transform:translateY(-3px) scale(1.02);background:rgba(255,255,255,.96);border-color:#334537;box-shadow:0 12px 28px rgba(70,83,63,.18)}
  .nf-lb{display:block;font-family:"Noto Sans JP",sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.05em;margin-bottom:4px}
  .nf-t{margin:0;font-family:"Noto Sans JP",sans-serif;font-size:11.5px;font-weight:400;color:#675d50;line-height:1.3}
  .ne-hero{position:relative;width:100%;aspect-ratio:1366/768;overflow:hidden;border-radius:3px;background:#1f1c19}
  .ne-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;animation:ckhHeroLoop 7s ease infinite}
  .ne-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.05) 32%,rgba(0,0,0,.02) 60%,rgba(0,0,0,.36))}
  .ne-cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:0 16px 9%;z-index:2;animation:ckhCapLoop 7s ease infinite}
  .ne-h1{font-family:"Zen Old Mincho",Georgia,serif;font-weight:600;letter-spacing:.06em;font-size:30px;line-height:1.1;color:#ffffff;text-shadow:0 2px 16px rgba(0,0,0,.55)}
  .ne-tag{font-family:"Zen Kaku Gothic New",sans-serif;font-size:9px;letter-spacing:.22em;margin-top:8px;color:#ffffff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
  .ne-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .ne-door{position:relative;overflow:hidden;border:1px solid #E1DBCC;border-radius:6px;padding:18px 16px;background:#F4F1E9;display:flex;flex-direction:column;gap:6px;box-shadow:0 2px 10px rgba(38,38,32,.05);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;text-decoration:none;color:#262620;cursor:pointer}
  .ne-door::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#B27B52;transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
  .ne-door:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(38,38,32,.13);border-color:#5E6A45;background:#FBF9F3}
  .ne-door:hover::before{transform:scaleY(1)}
  .ne-lb{font-family:"Zen Kaku Gothic New",sans-serif;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:#B27B52;font-weight:500}
  .ne-dh{font-family:"Zen Old Mincho",Georgia,serif;font-size:16px;transition:color .2s ease}
  .ne-door:hover .ne-dh{color:#5E6A45}
  .ne-dp{font-family:"Zen Kaku Gothic New",sans-serif;font-size:10px;line-height:1.7;color:#5B584C;flex:1}
  .ne-ar{font-family:"Zen Kaku Gothic New",sans-serif;font-size:10px;color:#5E6A45;font-weight:600;margin-top:6px;display:inline-flex;align-items:center;gap:5px}
  .ne-ar::after{content:"→";transition:transform .25s ease}
  .ne-door:hover .ne-ar{text-decoration:underline;text-underline-offset:3px}
  .ne-door:hover .ne-ar::after{transform:translateX(5px)}
  .ne-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid #E1DBCC;border-radius:8px;overflow:hidden}
  .ne-tool{position:relative;overflow:hidden;padding:16px 15px;border-right:1px solid #E1DBCC;border-bottom:1px solid #E1DBCC;display:flex;flex-direction:column;gap:6px;min-height:170px;background:#EAE5D8;transition:background .2s;text-decoration:none;color:#F1ECDE;cursor:pointer}
  .ne-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;filter:grayscale(.6) brightness(.82) saturate(.85);transition:filter .45s ease,transform .6s ease}
  .ne-tool:not(.ne-all)::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(28,29,24,.45),rgba(28,29,24,.74));transition:background .45s ease;pointer-events:none}
  .ne-tool>span{position:relative;z-index:2}
  .ne-tool:hover .ne-bg{filter:grayscale(0) brightness(.95) saturate(1.05);transform:scale(1.05)}
  .ne-tool:not(.ne-all):hover::after{background:linear-gradient(180deg,rgba(28,29,24,.34),rgba(28,29,24,.62))}
  .ne-num{font-family:"Zen Old Mincho",serif;color:#E7C6A4;font-size:9px}
  .ne-th{font-family:"Zen Old Mincho",serif;font-size:14px;color:#ffffff;text-shadow:0 1px 10px rgba(0,0,0,.45)}
  .ne-jp{color:rgba(241,236,222,.72);font-size:10px;margin-left:.3em}
  .ne-tp{font-family:"Zen Kaku Gothic New",sans-serif;font-size:9.5px;line-height:1.6;color:rgba(241,236,222,.94);flex:1;text-shadow:0 1px 8px rgba(0,0,0,.4)}
  .ne-more{margin-top:auto;font-family:"Zen Kaku Gothic New",sans-serif;font-size:9px;color:#ffffff;font-weight:600;display:inline-flex;align-items:center;gap:5px}
  .ne-more::after{content:"→";transition:transform .2s}
  .ne-tool:hover .ne-more{text-decoration:underline;text-underline-offset:3px}
  .ne-tool:hover .ne-more::after{transform:translateX(4px)}
  .ne-all{background:#35402C;justify-content:center;align-items:flex-start}
  .ne-all:hover{background:#3F4B34}
  @media (prefers-reduced-motion: reduce){.ne-hero-img,.ne-cap{animation:none}.nj-card,.nj-img,.nf-ov,.nf-card,.ne-door,.ne-bg{transition:none}}
  a { color: #7b8d91; }
  a:hover { color: #4a4641; }
}

/* Leeloo */
@keyframes fadein{0%{opacity:0;transform:scale(1.03)}28%{opacity:1;transform:scale(1)}88%{opacity:1}100%{opacity:0}}
.dt-leeloo {
  .en{font-family:Montserrat,sans-serif}
  .eyebrow{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.2em;color:#7b8d91}
  .h{margin:0;font-size:24px;font-weight:400;letter-spacing:.12em;display:flex;align-items:center;gap:20px}
  .h::after{content:"";flex:1;height:1px;background:rgba(123,141,145,.3)}
  .p{margin:0;font-size:15px;line-height:2.1;color:#444444}
  .frame{background:#ffffff;border-radius:10px;border:1px solid rgba(123,141,145,.15);box-shadow:0 10px 30px rgba(0,0,0,.05),0 1px 4px rgba(0,0,0,.1);box-sizing:border-box;position:relative}
  .tag{font-size:12px;letter-spacing:.15em;color:#7b8d91}
  .live{font-size:11px;letter-spacing:.1em;color:#7b8d91;border:1px solid #7b8d91;padding:2px 10px;border-radius:999px}
  .btn{display:inline-block;width:200px;padding:14px 0;border:1px solid #7b8d91;color:#7b8d91;text-align:center;text-decoration:none;font-family:Montserrat,sans-serif;font-size:13.6px;letter-spacing:.2em}
  .btn:hover{background:#7b8d91;color:#ffffff}
  .browser{background:#ffffff;border-radius:8px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.06),0 1px 4px rgba(0,0,0,.1)}
  .bar{display:flex;gap:6px;padding:9px 12px;background:#ecebe7}
  .bar span{width:9px;height:9px;border-radius:50%;background:#cfcac2}
  .num{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.2em;color:#7b8d91}
  .pt{margin:0;font-size:19px;font-weight:400;line-height:1.7;color:#4a4641}
  .list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
  .list li{font-size:14px;line-height:1.8;color:#444444;padding-bottom:10px;border-bottom:1px solid rgba(0,0,0,.08)}
  .cmp{margin:0;display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1fr);border-top:1px solid rgba(0,0,0,.08)}
  .flow{display:flex;align-items:center;gap:20px}
  .flow .box{flex:1;padding:24px;border:1px solid rgba(123,141,145,.4);border-radius:4px;background:rgba(255,255,255,.6);display:flex;flex-direction:column;gap:6px}
  .demo{background:#ffffff;border-radius:10px;border:1px solid rgba(123,141,145,.15);box-shadow:0 10px 30px rgba(0,0,0,.05),0 1px 4px rgba(0,0,0,.1);padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px}
  .hint{font-family:Montserrat,sans-serif;font-size:11px;letter-spacing:.15em;color:#7b8d91;display:flex;align-items:center;gap:6px}
  .hint::before{content:"";width:6px;height:6px;border-radius:50%;background:#7b8d91}
  .jcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:#4a4641;cursor:pointer}
  .jcard .ph{overflow:hidden;border-radius:4px;aspect-ratio:1/1}
  .jcard .ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .jcard .jt{font-size:14px;line-height:1.5;text-align:center;transition:color .4s ease,transform .4s ease}
  .jcard:hover .ph img{transform:scale(1.08)}
  .jcard:hover .jt{color:#6b7f4e;transform:translateY(-3px)}
  .fade img{transition:filter .8s ease}
  .fade img{filter:saturate(.35) brightness(1.06) contrast(.92)}
  .fade:hover img{filter:saturate(1.2) brightness(1) contrast(1.02)}
  .fadein{animation:fadein 7s ease infinite}
  .lift{display:block;border-radius:4px;transition:transform .35s ease,box-shadow .35s ease;box-shadow:0 1px 3px rgba(0,0,0,.08);cursor:pointer}
  .lift:hover{transform:translateY(-6px);box-shadow:0 14px 26px rgba(0,0,0,.14)}
  .gcard{display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.1);background:#f7f3ea;cursor:pointer;text-decoration:none;color:#4a4641}
  .gcard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.3) brightness(1.05);transition:filter .6s ease}
  .gcard:hover img{filter:saturate(1.15)}
  .gcard span{padding:10px 0;text-align:center;font-size:13px;line-height:1.6}
  .acard{position:relative;display:block;overflow:hidden;cursor:pointer;text-decoration:none}
  .acard img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
  .acard .ov{position:absolute;inset:0;background:rgba(40,36,32,.72);color:#f5f4f0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:16px;text-align:center;opacity:0;transition:opacity .45s ease}
  .acard:hover .ov{opacity:1}
  @media (prefers-reduced-motion: reduce){.fadein{animation:none}.jcard .ph img,.jcard .jt,.lift,.gcard img,.acard .ov,.fade img{transition:none}}
  .lg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .lg-card{display:block;border:1px solid #C5B89F;color:#1F2A44;text-decoration:none;overflow:hidden;transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;cursor:pointer;background:transparent}
  .lg-card:hover{border-color:#1F2A44;transform:translateY(-2px);box-shadow:0 4px 16px rgba(31,42,68,.06)}
  .lg-wrap{display:block;position:relative;width:100%;aspect-ratio:3/2;overflow:hidden;background:#FAF7F2}
  .lg-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
  .lg-card:hover .lg-img{transform:scale(1.04)}
  .lg-veil{position:absolute;inset:0;background:rgba(245,239,227,.4);pointer-events:none;transition:opacity .6s ease;opacity:1}
  .lg-card:hover .lg-veil{opacity:0}
  .lg-body{display:flex;flex-direction:column;align-items:center;padding:12px 6px;text-align:center}
  .lg-title{font-family:"Cormorant Garamond","Yu Mincho",serif;font-size:13px;letter-spacing:.12em;margin-bottom:6px}
  .lg-div{display:block;width:20px;height:1px;background:#C5B89F;margin-bottom:6px}
  .lg-label{font-family:"Yu Mincho","Shippori Mincho",serif;font-size:10px;letter-spacing:.1em;color:#4a4a4a}
  .la-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .la-card{display:block;color:#1F2A44;text-decoration:none;cursor:pointer}
  .la-wrap{position:relative;display:block;width:100%;aspect-ratio:3/2;overflow:hidden;background:#FAF7F2}
  .la-img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
  .la-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(255,255,255,.92);opacity:0;transition:opacity .7s ease;pointer-events:none}
  .la-card:hover .la-ov{opacity:1}
  .la-oc{display:flex;flex-direction:column;align-items:center;gap:14px}
  .la-cm{display:block;font-family:"Yu Mincho","Shippori Mincho",serif;font-size:12px;letter-spacing:.1em;line-height:2.1;color:#1F2A44;text-align:center;word-break:keep-all;line-break:strict}
  .la-odiv{display:block;width:24px;height:1px;background:rgba(197,184,159,.7)}
  .la-hint{font-family:"Yu Mincho","Shippori Mincho",serif;font-size:10px;letter-spacing:.18em;color:#6B5D4D}
  .la-body{display:flex;flex-direction:column;align-items:center;padding:16px 6px 0;text-align:center}
  .la-name{font-family:"Yu Mincho","Shippori Mincho",serif;font-size:14px;letter-spacing:.16em;margin-bottom:10px}
  .la-div{display:block;width:28px;height:1px;background:#C5B89F;margin-bottom:10px}
  .la-med{font-family:"Yu Mincho","Shippori Mincho",serif;font-size:11px;letter-spacing:.14em;color:#4a4a4a}
  @media (prefers-reduced-motion: reduce){.lg-card,.lg-img,.lg-veil,.la-ov{transition:none}}
  a { color: #7b8d91; }
  a:hover { color: #4a4641; }
}

/* =========================================================
   2026-10 追加（遅道 Photographs の詳しいページ）
   デモの見た目は、遅道サイトの CSS を元に再現しています
   ========================================================= */
.dt-osodo {
  .en{font-family:Montserrat,sans-serif}
  .eyebrow{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.2em;color:#7b8d91}
  .h{margin:0;font-size:24px;font-weight:400;letter-spacing:.12em;display:flex;align-items:center;gap:20px}
  .h::after{content:"";flex:1;height:1px;background:rgba(123,141,145,.3)}
  .p{margin:0;font-size:15px;line-height:2.1;color:#444444}
  .frame{background:#ffffff;border-radius:10px;border:1px solid rgba(123,141,145,.15);box-shadow:0 10px 30px rgba(0,0,0,.05),0 1px 4px rgba(0,0,0,.1);box-sizing:border-box;position:relative}
  .tag{font-size:12px;letter-spacing:.15em;color:#7b8d91}
  .btn{display:inline-block;width:200px;padding:14px 0;border:1px solid #7b8d91;color:#7b8d91;text-align:center;text-decoration:none;font-family:Montserrat,sans-serif;font-size:13.6px;letter-spacing:.2em}
  .btn:hover{background:#7b8d91;color:#ffffff}
  .num{font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.2em;color:#7b8d91}
  .pt{margin:0;font-size:19px;font-weight:400;line-height:1.7;color:#4a4641}
  .hint{font-family:Montserrat,sans-serif;font-size:11px;letter-spacing:.15em;color:#7b8d91;display:flex;align-items:center;gap:6px}
  .hint::before{content:"";width:6px;height:6px;border-radius:50%;background:#7b8d91}
}

/* 遅道：デモ（実際のサイトの CSS をもとに再現） */
.dt-osodo .os-demo{--ink:#e9e8e4;--red:#d6372d;background:#0b0b0b;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.12);padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;color:var(--ink);font-family:"Zen Kaku Gothic New","Noto Sans JP",sans-serif}
.dt-osodo .os-demo .hint{color:#8a8884}
.dt-osodo .os-demo .hint::before{background:#8a8884}
.dt-osodo .os-film{background:#050505;padding:0 10px}
.dt-osodo .os-film .edge{--holes:repeating-linear-gradient(90deg,transparent 0 9px,#1d1d1d 9px 17px,transparent 17px 24px);background:var(--holes) left 4px/100% 7px no-repeat;margin:0 -10px;padding:14px 10px 4px;display:flex;justify-content:space-around;font-size:9px;letter-spacing:.2em;color:#8a6a2a;font-family:"IBM Plex Mono",monospace}
.dt-osodo .os-film .edge.lo{background-position:left calc(100% - 4px);padding-top:4px;padding-bottom:14px}
.dt-osodo .frames{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.dt-osodo .fr{position:relative;margin:0;padding:0;aspect-ratio:3/2;background:#000;cursor:pointer}
.dt-osodo .fr img{display:block;width:100%;height:100%;object-fit:contain;filter:invert(1) contrast(.85) brightness(.9);transition:filter 1.2s ease}
.dt-osodo .fr.c img{filter:invert(1) sepia(.55) saturate(1.8) hue-rotate(-12deg) contrast(.85) brightness(.95)}
.dt-osodo .mk{position:absolute;inset:-7px;width:calc(100% + 14px);height:calc(100% + 14px);overflow:visible;pointer-events:none}
.dt-osodo .mk path{fill:none;stroke:var(--red);stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--L,2000);stroke-dashoffset:var(--L,2000);transition:stroke-dashoffset .7s cubic-bezier(.6,.1,.3,1) .25s;opacity:.92}
.dt-osodo .fr:hover img,.dt-osodo .fr.dev img{filter:none}
.dt-osodo .fr:hover .mk path,.dt-osodo .fr.dev .mk path{stroke-dashoffset:0}
@media (max-width:599px){
  .dt-osodo .os-film{overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0}
  .dt-osodo .os-film::-webkit-scrollbar{display:none}
  .dt-osodo .os-film-in{width:calc(5 * 62vw);padding:0 10px}
  .dt-osodo .frames{gap:12px}
  .dt-osodo .fr{scroll-snap-align:center}
}
/* 画面（メニュー・スライドショー） */
.dt-osodo .os-screen{position:relative;aspect-ratio:3/2;overflow:hidden;background:#000}
.dt-osodo .os-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dt-osodo .os-mb{position:absolute;top:12px;right:14px;z-index:2;display:flex;align-items:center;gap:10px;background:none;border:0;color:#fff;font:inherit;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.3em;cursor:pointer;padding:6px 0;mix-blend-mode:difference}
.dt-osodo .os-mb i{display:flex;flex-direction:column;gap:5px;width:24px}
.dt-osodo .os-mb i::before,.dt-osodo .os-mb i::after{content:"";height:1px;background:currentColor;transition:transform .4s}
.dt-osodo .os-mb:hover i::before,.dt-osodo .os-mb:focus-visible i::before{transform:translateX(-6px)}
.dt-osodo .os-mb:hover i::after,.dt-osodo .os-mb:focus-visible i::after{transform:translateX(6px)}
.dt-osodo .os-mn{position:absolute;inset:0;z-index:3;visibility:hidden;pointer-events:none}
.dt-osodo .os-mn.show{visibility:visible;pointer-events:auto}
.dt-osodo .os-mn .safe{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(120,18,12,.38),rgba(26,4,3,.94) 50%,rgba(6,3,3,.98));opacity:0;transition:opacity .7s ease}
.dt-osodo .os-mn.show .safe{opacity:1;animation:osFlick .6s steps(1) 1}
@keyframes osFlick{0%{opacity:0}25%{opacity:.5}40%{opacity:.2}60%{opacity:1}}
.dt-osodo .os-mn nav{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:0 14%}
.dt-osodo .os-mn nav a{position:relative;font-size:clamp(18px,2.4vw,26px);font-weight:300;letter-spacing:.2em;color:#e9d9d4;cursor:pointer;padding:2px 12px;opacity:0;transform:translateY(8px);transition:opacity .8s,transform .8s;transition-delay:calc(.3s + var(--i)*.1s)}
.dt-osodo .os-mn nav a small{font-size:10px;letter-spacing:.2em;margin-left:14px;color:#b98a82}
.dt-osodo .os-mn.show nav a{opacity:1;transform:none}
.dt-osodo .os-mn nav a .mk{inset:-4px -10px;width:calc(100% + 20px);height:calc(100% + 8px)}
.dt-osodo .os-mn nav a .mk path{stroke:#ff5a46;stroke-width:2.4;transition-delay:0s;transition-duration:.5s}
.dt-osodo .os-mn nav a:hover .mk path{stroke-dashoffset:0}
.dt-osodo .os-close{position:absolute;top:12px;right:14px;background:none;border:0;color:#e9e8e4;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.3em;cursor:pointer}
.dt-osodo .os-close:hover,.dt-osodo .os-close:focus-visible{color:#fff;text-decoration:underline;text-underline-offset:4px}
.dt-osodo .os-fv .sl{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.dt-osodo .os-fv .sl.on{opacity:1}
.dt-osodo .os-fv .sl img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 7s linear}
.dt-osodo .os-fv .sl.on img{transform:scale(1)}
.dt-osodo .os-fv .fv-cap{position:absolute;left:14px;bottom:12px;z-index:2;display:flex;gap:14px;align-items:center;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.3em;color:#d8d6d1}
.dt-osodo .os-fv .fv-cap b{font-weight:400}
.dt-osodo .os-fv .bar{width:90px;height:1px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.dt-osodo .os-fv .bar span{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.dt-osodo .os-fv .bar span.run{animation:osRun 5.5s linear forwards}
@keyframes osRun{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.dt-osodo .os-demo *{transition:none!important;animation:none!important}}
.dt-osodo .os-push{margin-top:auto;padding-top:10px}
.dt-osodo .os-mb{transition:opacity .3s}.dt-osodo .os-screen.open .os-mb{opacity:0;pointer-events:none}
.dt-osodo .os-screen.open .os-mb{transition:none}