@charset "utf-8";

:root {
  --bg:       #fdfcfb;
  --bg-2:     #EEEAE2;
  --bg-3:     #E5E1D8;
  --bg-dark:  #9f7996;
  --bg-dark2: #9f7996;
  --ink:      #161616;
  --ink-2:    #6a625a;
  --ink-3:    #A4A09A;
  --ink-4:    #C8C4BC;
  --line:     rgba(28,28,26,.08);
  --line2:    rgba(28,28,26,.14);
  --serif-jp: 'Shippori Mincho','Noto Serif JP',serif;
  --serif-en: "Lato", sans-serif;
  --sans:     'Jost',sans-serif;
  --ease:     cubic-bezier(.22,.1,.22,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{background:var(--bg);color:var(--ink);font-family:var(--serif-jp);font-weight:300;overflow-x:hidden;cursor:none;-webkit-font-smoothing:antialiased;}

/* CURSOR */
.cur{position:fixed;top:0;left:0;width:6px;height:6px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .1s,opacity .3s;}
.crg{position:fixed;top:0;left:0;width:28px;height:28px;border:1px solid var(--ink);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);opacity:.22;transition:width .35s var(--ease-out),height .35s var(--ease-out),opacity .3s;}
.crg.ex{width:50px;height:50px;opacity:.12;}
.cur.ex{transform:translate(-50%,-50%) scale(0);opacity:0;}

/* LOADER */
.loader{position:fixed;inset:0;background:var(--bg-dark);z-index:10000;display:flex;align-items:center;justify-content:center;transition:opacity .9s var(--ease),visibility .9s;}
.loader.out{opacity:0;visibility:hidden;}
.ldr-en{font-family:var(--serif-en);font-size:clamp(1.1rem,3.5vw,2rem);font-weight:300;font-style:italic;letter-spacing:.28em;color:rgba(255, 255, 255, 0.059);animation:fIn 1.1s var(--ease-out) .2s forwards;opacity:0;}
.ldr-jp{display:block;margin-top:.5rem;font-family:var(--serif-jp);font-size:1em;font-weight:300;letter-spacing:.45em;color:rgba(252, 249, 242, 0.08);animation:fIn .9s var(--ease-out) .7s forwards;opacity:0;}
.ldr-bar{width:0;height:1px;background:rgba(245,243,238,.16);margin:1.6rem auto 0;animation:bar 1.5s var(--ease-out) .4s forwards;}
@keyframes fIn{to{opacity:1;}}
@keyframes bar{to{width:100px;}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:2.2rem 5vw;display:flex;justify-content:space-between;align-items:center;transition:background .5s,padding .4s;}
nav.st{padding-top:1.3rem;padding-bottom:1.3rem;background:rgba(245,243,238,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
.nav-logo{font-family:var(--serif-jp);font-size:.78rem;font-weight:400;letter-spacing:.35em;color:var(--ink);text-decoration:none;}
.nav-ul{display:flex;gap:2.8rem;list-style:none;}
.nav-ul a{font-family:var(--sans);font-size:.8em;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;transition:color .3s;}
.nav-ul a:hover{color:var(--ink);}

/* HERO */
.hero{
    height: 100vh;
    min-height: 600px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }
.h-bg{    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #e3b74a 0%, #A8A49C 25%, #f1e0f9 55%, #503d3b 100%);
    filter: saturate(.55) brightness(.9);
    transform: scale(1.04);
    transition: transform 10s ease;}
.h-bg.ld{transform:scale(1);}
.h-ov{
  position:absolute;inset:0;
  background-image: url(https://t-yoshiyoshi.github.io/portfolio/img/bg_top.jpg);
  /*background:linear-gradient(to bottom,rgba(66,63,65,.06) 0%,rgba(223,170,214,.01) 40%,rgba(151,64,132,.48) 100%);*/
}
.h-copy{position:relative;z-index:2;padding:0 5vw 9vh;max-width:860px;}
.h-eye{
  font-family: var(--sans);
    font-size: 1em;
    font-weight: 300;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgb(112 105 97);
    margin-top: 2em;
    margin-bottom: 1.6rem;
    opacity: 0;
    animation: hUp .8s var(--ease-out) 2.3s forwards;
}
.h-ttl{
font-family: var(--serif-en);
    font-size: clamp(2.6rem, 8vw, 6.5rem);
    font-weight: 400;
    margin: 5px 0;
    font-size: 3.2em;
    line-height: .94;
    color: rgb(255 255 255 / 81%);
    letter-spacing: -.01em;
    /* text-shadow: 0px 0px 20px #a6a6a6b0;*/
  }
.h-ttl .w{display:inline-block;opacity:0;transform:translateY(28px);}
.h-ttl .w:nth-child(1){animation:hUp .9s var(--ease-out) 2.4s forwards;}
.h-ttl .w:nth-child(2){animation:hUp .9s var(--ease-out) 2.55s forwards;font-style:italic;}
.h-ttl .w:nth-child(3){animation:hUp .9s var(--ease-out) 2.7s forwards;}
.h-sub{margin-top:1.8rem;font-family:var(--sans);font-size:.7em;font-weight:300;color:rgba(245,238,244,.46);letter-spacing:.2em;line-height:2;opacity:0;animation:hUp .8s var(--ease-out) 3s forwards;}
.h-scrl{position:absolute;right:5vw;bottom:9vh;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.7rem;opacity:0;animation:hUp .8s var(--ease-out) 3.2s forwards;}
.h-scrl span{font-family:var(--sans);font-size:.8em;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,238,245,.42);writing-mode:vertical-rl;}
.stk{width:1px;height:38px;background:rgba(245,243,238,.18);position:relative;overflow:hidden;}
.stk::after{content:'';position:absolute;left:0;top:-100%;width:100%;height:100%;background:rgba(245,243,238,.45);animation:td 2s ease-in-out 3.4s infinite;}
@keyframes hUp{to{opacity:1;transform:translateY(0);}}
@keyframes td{0%{top:-100%}100%{top:200%}}

/* SECTION */
.sec{padding:10vh 5vw;}
.shd{display:flex;align-items:baseline;gap:1.6rem;margin-bottom:6rem;}
.snum{font-family:var(--sans);font-size:.5rem;font-weight:300;letter-spacing:.18em;color:var(--ink-3);}
.stitle{font-family:var(--serif-jp);font-size:clamp(1.3rem,2.8vw,2.1rem);font-weight:400;letter-spacing:.12em;color:var(--ink);}
.stitle-en{font-family:var(--serif-en);font-size:2em;font-weight:500;font-style:italic;letter-spacing:.1em;color:var(--ink-3);margin-left:.5rem;}
.srule{flex:1;height:1px;background:var(--line2);margin-left:.8rem;}

/* TABS */
.tabs{display:flex;gap:0;margin-bottom:5rem;border-bottom:1px solid var(--line2);overflow-x:auto;}
.tab{padding:1rem 2.2rem;font-family:var(--sans);font-size:1em;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);background:none;border:none;cursor:none;position:relative;transition:color .3s;white-space:nowrap;}
.tab::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--ink);transform:scaleX(0);transition:transform .4s var(--ease);}
.tab.on{color:var(--ink);}
.tab.on::after{transform:scaleX(1);}
.tab:hover{color:var(--ink-2);}

/* PANELS */
.panel{display:none;}
.panel.on{display:block;}
.plbl{font-family:var(--sans);font-size:1em;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);margin-bottom:4rem;display:flex;align-items:center;gap:1.2rem;}
.plbl::before{content:'';width:20px;height:1px;background:var(--ink-4);}

/* FEATURED */
.feat{display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 1rem;
    cursor: none;}
.feat.flip{grid-template-columns:1fr 1.5fr;}
.feat.flip .fi{order:2;}
.feat.flip .finfo{order:1;}
.fi{position:relative;overflow:hidden;}
.fi::before{content:'';display:block;padding-top:68%;}
.fi-in{position:absolute;inset:0;overflow:hidden;}

/* ★ FIX: .fi-in > div のハードコードbgを削除。各パネルのHTMLで個別に指定 */
.fi-in > div {
    width: 50%;
    height: 100%;
    transition: transform 1s var(--ease-out);
}
.feat:hover .fi-in > div{transform:scale(1.035);}

.fbadge{position:absolute;top:0;left:0;z-index:3;padding:.5rem 1rem;background:var(--bg-dark);color:rgba(245,243,238,.5);font-family:var(--sans);font-size:.47rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;}
.finfo{padding:1rem 0;}
.fcat{font-family:var(--sans);font-size:.5rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1.4rem;}
.ftitle{font-family:var(--serif-jp);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:400;line-height:1.6;letter-spacing:.06em;color:var(--ink);margin-bottom:1.6rem;}
.ftitle_02{font-family:var(--serif-jp);font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:400;line-height:1.6;letter-spacing:.06em;color:var(--ink);margin-bottom:1.6rem;}
.ftitle_02:hover{color:#c741af}
.id-pass{
    font-family: sans-serif;
    font-size: 1.2em;
    font-weight: 400;
    margin-bottom: 1em;
}

.fdesc{font-size:1em;font-weight:300;line-height:2.15;color:var(--ink-2);margin-bottom:2rem;letter-spacing:.04em;}
.ftags{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:2.4rem;}
.tag{font-family:var(--sans);font-size:.47rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line2);padding:.26rem .68rem;}
.bmore{display:inline-flex;align-items:center;gap:.9rem;font-family:var(--sans);font-size:.56rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);text-decoration:none;cursor:none;position:relative;}
.bmore::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1px;background:var(--ink);transform-origin:right;transition:transform .5s var(--ease);}
.bmore:hover::after{transform:scaleX(0);transform-origin:left;}
.barr{transition:transform .4s var(--ease);display:inline-block;}
.bmore:hover .barr{transform:translateX(5px);}
.dvd{height:1px;background:var(--line);margin:5rem 0;}

/* GRID */
.wg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem 2rem;}
.wg.c4{grid-template-columns:repeat(4,1fr);}
.wc{cursor:none;}
.wci{position:relative;overflow:hidden;background:var(--bg-2);}
.wci::before{content:'';display:block;padding-top:72%;}
.wci>div{position:absolute;inset:0;}

/* ★ FIX: .wci .im のwidth:70%をwidth:100%に修正（画像が半分しか表示されていた） */
.wci .im{
    width: 70%;
    height: 100%;
    margin: 0 auto;
    transition: transform .8s var(--ease-out);
}
.wc:hover .im{transform:scale(1.055);}
.wc.ban .wci::before{padding-top:52%;}
.wc.dtp .wci{    
  box-shadow: 0 2px 24px rgba(28, 28, 26, .09), 0 1px 5px rgba(28, 28, 26, .06);
    height: 400px;}
.wci-info{padding:.9rem 0 0;}
.wct{font-family:var(--serif-jp);font-size:.8rem;font-weight:400;letter-spacing:.06em;color:var(--ink);margin-bottom:.22rem;}
.wcs{font-family:var(--sans);font-size:.52rem;font-weight:300;letter-spacing:.12em;color:var(--ink-4);text-transform:uppercase;}

/* browser chrome for web */
.bwr{background:#bdbdbd;padding:.55rem .55rem 0;position:relative; height: 250px;}
.bdots{display:flex;gap:.25rem;margin-bottom:.35rem;}
.bdots span{width:5px;height:5px;border-radius:50%;background:rgba(245,243,238,.14);}
.bwin{position:relative;overflow:hidden;}
.bwin::before{content:'';display:block;padding-top:62%;}
.bwin .im{position:absolute;inset:0;width:100%;height:100%;}

/* illust hover */
.ilov{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(28,28,26,.3) 0%,transparent 50%);opacity:0;transition:opacity .5s var(--ease);pointer-events:none;}
.wc:hover .ilov{opacity:1;}

/* ABOUT */
#about{padding:12vh 5vw;background:var(--bg-2);}
.abl{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6vw;align-items:start;}
.alead{font-family:var(--serif-jp);font-size:clamp(1.15rem,2.1vw,1.65rem);font-weight:400;line-height:2;letter-spacing:.08em;color:var(--ink);margin-bottom:2.2rem;}
.abody{font-size:.8rem;font-weight:300;line-height:2.2;letter-spacing:.04em;color:var(--ink-2);margin-bottom:1.3rem;}
.aprt{aspect-ratio:3/4;overflow:hidden;position:relative;}
.aprt .pim{width:100%;height:100%;transition:transform .8s var(--ease-out);}
.aprt:hover .pim{transform:scale(1.03);}
.acap{margin-top:.8rem;font-family:var(--sans);font-size:.5rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);}
.slbl{font-family:var(--sans);font-size:.5rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);margin-bottom:1.3rem;padding-bottom:.65rem;border-bottom:1px solid var(--line);}
.skr{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--line);}
.skr:last-child{border-bottom:none;}
.skn{font-size:.76rem;font-weight:300;letter-spacing:.04em;color:var(--ink-2);}
.skt{width:68px;height:1px;background:var(--line2);position:relative;}
.skf{position:absolute;left:0;top:0;height:100%;background:var(--ink-2);width:0;transition:width 1.6s var(--ease-out);}
.sec-sk{margin-bottom:2.8rem;}
.tls{display:grid;grid-template-columns:1fr 1fr;gap:0;}
.tl{font-size:.75rem;font-weight:300;letter-spacing:.04em;color:var(--ink-2);padding:.52rem 0;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:.45rem;}
.tl::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex-shrink:0;}

/* CONTACT */
#contact{padding:14vh 5vw 10vh;background:var(--bg-dark);position:relative;overflow:hidden;}
.cgh{position:absolute;bottom:-8vh;right:-3vw;font-family:var(--serif-en);font-size:18vw;font-weight:300;font-style:italic;color:rgba(245,243,238,.022);line-height:1;pointer-events:none;user-select:none;}
.cin{position:relative;z-index:1;max-width:720px;}
.clead{font-family:var(--serif-jp);font-size:clamp(1.5rem,3.2vw,2.8rem);font-weight:400;line-height:1.75;letter-spacing:.08em;color:rgba(245,243,238,.65);margin-bottom:3.5rem;}
.cmail{display:inline-flex;align-items:center;gap:1.2rem;font-family:var(--serif-en);font-size:clamp(.95rem,1.8vw,1.45rem);font-weight:300;font-style:italic;color:rgba(245,243,238,.5);text-decoration:none;cursor:none;position:relative;margin-bottom:4rem;}
.cmail::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:1px;background:rgba(245,243,238,.18);transition:background .4s;}
.cmail:hover::after{background:rgba(245,243,238,.45);}
.cmail:hover{color:rgba(245,243,238,.72);}
.clks{display:flex;gap:2.4rem;flex-wrap:wrap;}
.clk{font-family:var(--sans);font-size:.56rem;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,243,238,.22);text-decoration:none;cursor:none;transition:color .3s;position:relative;}
.clk::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1px;background:rgba(245,243,238,.28);transition:width .35s var(--ease);}
.clk:hover{color:rgba(245,243,238,.48);}
.clk:hover::after{width:100%;}

/* FOOTER */
footer{padding:2.5rem 5vw;background:var(--bg-dark2);display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(245,243,238,.05);}
.flog{font-family:var(--serif-jp);font-size:.7rem;font-weight:400;letter-spacing:.3em;color:rgba(245,243,238,.2);}
.fcpy{
    font-family: var(--sans);
    font-size: .8em;
    font-weight: 300;
    letter-spacing: .1em;
    color: rgb(247 237 212 / 60%);
    margin: 0 auto;}

/* =========================================
   MODAL — ★ 全面修正
   ========================================= */
.mbk{position:fixed;inset:0;background:rgba(28,28,26,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:1000;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;cursor:none;}
.mbk.on{opacity:1;visibility:visible;}

.mdl{
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%,-48%) scale(.97);
  width:88vw; max-width:960px;
  max-height:90vh;
  background:var(--bg);
  z-index:1001;
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:transform .5s var(--ease-out),opacity .4s var(--ease),visibility .4s;
}
.mdl.on{transform:translate(-50%,-50%) scale(1);opacity:1;visibility:visible;}

.mclose{
  position:absolute; top:1.3rem; right:1.3rem;
  width:34px; height:34px;
  background:none; border:1px solid var(--line2);
  cursor:none; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.6rem; font-weight:300;
  color:var(--ink-2); transition:background .25s; z-index:10;
}
.mclose:hover{background:var(--bg-2);}

/* ★ FIX: グリッドレイアウトを安定化 */
.mgrid{
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    min-height: 700px;
    padding: 10px;
}

/* ★ FIX: モーダル画像エリア — position:relativeを確実に設定、heightを固定 */
.mimg{
  position:relative;
  overflow:hidden;


}

/* ★ FIX: openM()でinnerHTMLに挿入される div に適用するスタイル */
.mimg .mimg-fill {
  position:absolute;
  inset:0;
  background-size:contain;
  background-position:center;
  height: 100%;
}

.mbody{padding:2.8rem 2.4rem; overflow-y:auto;}
.mcat{font-family:var(--sans);font-size:.5rem;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.9rem;}
.mtitle{font-family:var(--serif-jp);font-size:1.3rem;font-weight:400;letter-spacing:.06em;line-height:1.65;color:var(--ink);margin-bottom:1.3rem;}


/* モーダルタイトルリンク */
.mtitle a{
  color:inherit;
  text-decoration:none;
  position:relative;
  transition:color .3s;
}
.mtitle a::after{
  content:'';
  position:absolute;
  bottom:-2px; left:0;
  width:100%; height:1px;
  background:var(--ink-2);
  transform-origin:right;
  transition:transform .4s var(--ease);
}
.mtitle a:hover{color:var(--ink-2);}
.mtitle a:hover::after{transform:scaleX(0);transform-origin:left;}
/* ID/Pass表示 */
.midpass{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:300;
  letter-spacing:.08em;
  color:var(--ink-3);
  background:var(--bg-2);
  border:1px solid var(--line2);
  padding:.55rem .85rem;
  margin-bottom:1.4rem;
  display:inline-block;
  line-height:1.9;
}
.midpass strong{
  font-weight:400;
  color:var(--ink-2);
  font-family:monospace;
  letter-spacing:.05em;
}


.mdesc{font-size:.78rem;font-weight:300;line-height:2.1;letter-spacing:.04em;color:var(--ink-2);margin-bottom:1.6rem;}
.mmeta{display:flex;flex-direction:column;gap:.55rem;}
.mrow{display:flex;gap:1rem;font-size:.74rem;}
.mlbl{width:52px;flex-shrink:0;font-family:var(--sans);font-size:.48rem;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-4);padding-top:.1rem;}
.mval{color:var(--ink-2);font-weight:300;}

/* SCROLL REVEAL */
.rv{opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.1s;}
.rv.d2{transition-delay:.22s;}
.rv.d3{transition-delay:.34s;}

/* =========================================
   PLACEHOLDER BG CLASSES
   各カテゴリで視覚的に異なる色調
   ========================================= */
/* DTP — 温かいグレージュ、紙の質感 */
.pd-m{
  background: url(https://t-yoshiyoshi.github.io/portfolio/img/robo04.png) no-repeat center;
  background-size: cover;}
.pd-1{background:url(https://t-yoshiyoshi.github.io/portfolio/2023_netuden.jpg
) center/cover no-repeat; background-color:#C8C4BC;}
.pd-2{background: url(https://t-yoshiyoshi.github.io/portfolio/img/news_02.png) no-repeat center;}
.pd-3{background: url(https://t-yoshiyoshi.github.io/portfolio/img/news_03.png) no-repeat center;}

/* Banner — ダーク・コントラスト強め */
.pb-m{background: url(https://t-yoshiyoshi.github.io/portfolio/img/konton_war_top_02.png) center / cover no-repeat; background-size: cover;}
.pb-1{background: url(https://t-yoshiyoshi.github.io/portfolio/img/konton_gorin_top_02.jpg) center / cover no-repeat; background-size: cover;}
.pb-2{background: url(https://t-yoshiyoshi.github.io/portfolio/img/superpower_of_chaos_top.jpg) center / cover no-repeat; background-size: cover;}
.pb-3{background: url(https://t-yoshiyoshi.github.io/portfolio/img/yontaku_AI.jpg) center / cover no-repeat; background-size: cover;}
.pb-4{background: url(https://t-yoshiyoshi.github.io/portfolio/img/Premier_league07-1.jpg) center / cover no-repeat; background-size: cover;}

/* Web — クリーン・ライト */
.pw-m{    
  background: url(https://t-yoshiyoshi.github.io/portfolio/img/yon-taku.png) no-repeat center;
    background-size: cover;}
.pw-1{background:linear-gradient(180deg,#1C1C1A 0%,#282825 100%);}
.pw-2{background:linear-gradient(180deg,#E0EAE8 0%,#C0D4D0 100%);}
.pw-3{background:linear-gradient(180deg,#F4EEE8 0%,#E0D4C8 100%);}

/* Illustration — ディープ・アトモスフェリック */
.pi-m{
  background: url(https://t-yoshiyoshi.github.io/portfolio/img/ouka.png) center / cover no-repeat;
  background-size: cover;}
.pi-1{        
  background: url(https://t-yoshiyoshi.github.io/portfolio/img/funai.png) no-repeat center;
  background-size: cover;}
.pi-2{  background: url(https://t-yoshiyoshi.github.io/portfolio/img/gada_04_08.jpg) no-repeat center;
  background-size: cover;}
.pi-3{background: url(https://t-yoshiyoshi.github.io/portfolio/img/20250107_news03.jpg) no-repeat center;
  background-size: cover;}

/* DTP用ペーパーライン */
.pp::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 29px,rgba(28,28,26,.032) 30px);pointer-events:none;}

/* RESPONSIVE */
@media(max-width:1080px){
  .feat{grid-template-columns:1fr;gap:2.5rem;}
  .feat.flip .fi{order:0;}.feat.flip .finfo{order:0;}
  .abl{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  nav{padding:1.4rem 5vw;}
  .nav-ul{gap:1.8rem;}
  .wg{grid-template-columns:1fr 1fr;}
  .wg.c4{grid-template-columns:1fr;}
  .abl{grid-template-columns:1fr;}
  .fi{
      min-height: 300px;

  }
  .fi-in {
    position: absolute;
    inset: 0;
    width: 460px;
    height: 320px;
    overflow: hidden;
}
  .mgrid{
        grid-template-columns: 1fr;
        min-height: 1050px;}
.wci {
    position: relative;
    overflow: hidden;
    background: var(--bg-2);
    height: 65%;
}
  .wci .im {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    transition: transform .8s var(--ease-out);
}
  .mimg{min-height:0;}
  .clks{gap:1.5rem;}
  footer{flex-direction:column;gap:.7rem;text-align:center;}
  body{cursor:auto;}
  .cur,.crg{display:none;}
}
@media(max-width:500px){
  .nav-ul{display:none;}
  .h-ttl {
    font-size: 2.5em;
}
  .h-eye{
  font-family: var(--sans);
    font-size: 0.8em;
    font-weight: 300;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgb(112 105 97);
    margin-top: 2em;
    margin-bottom: 8.6rem;
    opacity: 0;
    animation: hUp .8s var(--ease-out) 2.3s forwards;
}
  .tab{padding:.75rem 1rem;font-size:1em;}
  .wg{grid-template-columns:1fr;}
  .mimg .mimg-fill {
  height: 100%;
}
.fdesc{
  width: 100%;
}
.mdl{
  position: fixed;
  transform: translate(-50%, -48%) scale(.97);
  width: 95vw;
  max-width: 960px;
  max-height: 90vh;
  background: var(--bg);
  z-index: 1001;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: transform .5s var(--ease-out), opacity .4s var(--ease), visibility .4s;
}
.aprt {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
    width: 60%;
    margin: 0 auto;
}
.feat.flip {
    grid-template-columns: 1fr;
}
.wci .im {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    transition: transform .8s var(--ease-out);
}
.im pw-1{
  position:absolute;inset:0;display:flex;align-items:center;padding:.9rem;background: url(https://t-yoshiyoshi.github.io/portfolio/img/anim_bousai.png) no-repeat center;
      background-size: unset;
  
}
}