/* ============================================================
   TRIPSAUNAJUNKY 公式サイト 共通スタイル
   ダーク×エモ / 墨紺 #0a0f16 × ゴールド #c9a45c
   ============================================================ */
:root{
  --bg:#0a0f16;
  --bg2:#0e1520;
  --panel:#111a27;
  --ink:#ece7db;
  --muted:#8b94a1;
  --gold:#c9a45c;
  --gold-dim:#9a7c41;
  --ember:#d97b4a;
  --line:rgba(201,164,92,.35);
  --serif:"Shippori Mincho B1",serif;
  --en:"Marcellus",serif;
  --sans:"Zen Kaku Gothic New",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.9;letter-spacing:.06em;
  cursor:url("../img/cursor_yinyang.png?v=3") 14 14, auto}
a,button,label,summary,[role="button"]{cursor:url("../img/cursor_yinyang_gold.png?v=3") 14 14, pointer}

/* ---------- カスタムカーソル（引用マークがゆっくり回転して追従） ---------- */
@keyframes spin-slow{to{transform:rotate(360deg)}}
.tsj-cursor{position:fixed;left:0;top:0;width:34px;height:34px;pointer-events:none;z-index:99999;opacity:0;transition:opacity .25s;will-change:transform}
.tsj-cursor img{position:absolute;inset:0;width:100%;height:100%;animation:spin-slow 12s linear infinite}
.tsj-cursor .yy-g{opacity:0;transition:opacity .2s}
.tsj-cursor.gold .yy-g{opacity:1}
body.cc-on{cursor:none}
body.cc-on a,body.cc-on button,body.cc-on label,body.cc-on summary,body.cc-on [role="button"],body.cc-on input,body.cc-on textarea,body.cc-on select{cursor:none}
@media (prefers-reduced-motion: reduce){.tsj-cursor img{animation:none}}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:#0a0f16}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:22px 40px;transition:background .4s,padding .4s}
header.scrolled,header.solid{background:rgba(10,15,22,.92);backdrop-filter:blur(8px);padding:14px 40px;border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:16px}
.brand .mark{width:60px;height:auto}
.brand .type{height:13px;width:auto;opacity:.95}
nav{display:flex;align-items:center;gap:26px}
nav a{font-size:12px;letter-spacing:.18em;color:var(--muted);transition:color .3s;position:relative}
nav a small{display:block;font-family:var(--en);font-size:10px;color:var(--gold-dim);letter-spacing:.2em;line-height:1.2}
nav a:hover,nav a.on{color:var(--ink)}
.cta-btn{border:1px solid var(--gold);color:var(--gold)!important;padding:9px 22px;font-size:12px;letter-spacing:.2em;transition:all .3s}
.cta-btn:hover{background:var(--gold);color:#0a0f16!important}

/* ---------- mobile menu ---------- */
.menu-btn{display:none;position:relative;z-index:120;width:44px;height:44px;background:none;border:none}
.menu-btn span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:.35s}
.menu-btn span:nth-child(1){top:15px}
.menu-btn span:nth-child(2){top:22px}
.menu-btn span:nth-child(3){top:29px}
.menu-btn.x span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-btn.x span:nth-child(2){opacity:0}
.menu-btn.x span:nth-child(3){top:22px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:110;background:rgba(7,11,17,.97);backdrop-filter:blur(10px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:26px;opacity:0;pointer-events:none;transition:opacity .4s}
.mnav.open{opacity:1;pointer-events:auto}
.mnav a{font-family:var(--serif);font-size:19px;letter-spacing:.25em}
.mnav a small{display:block;text-align:center;font-family:var(--en);font-size:10px;color:var(--gold);letter-spacing:.3em;margin-top:2px}
.mnav .cta-btn{font-family:var(--sans);font-size:14px;margin-top:16px}

/* ---------- hero (top page) ---------- */
.hero{position:relative;height:100svh;min-height:640px;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background:url(../img/hero_night_beach.jpg) center/cover no-repeat}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,15,22,.55) 0%,rgba(10,15,22,.25) 40%,rgba(10,15,22,.92) 100%),
  radial-gradient(ellipse at 30% 60%,transparent 30%,rgba(10,15,22,.45) 100%)}
.hero-inner{position:relative;z-index:2;padding:0 8vw;max-width:1200px}
.hero-en{font-family:var(--en);color:var(--gold);font-size:13px;letter-spacing:.5em;margin-bottom:28px}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5.2vw,64px);line-height:1.7;letter-spacing:.12em}
.hero h1 .thin{display:block;font-size:.42em;font-weight:400;color:var(--ink);opacity:.85;letter-spacing:.28em;margin-top:26px}
.hero-tate{position:absolute;right:5vw;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--serif);font-size:15px;letter-spacing:.55em;color:rgba(236,231,219,.5);border-right:1px solid var(--line);padding-right:18px;z-index:2}
.scroll-cue{position:absolute;bottom:0;left:8vw;z-index:2;font-family:var(--en);font-size:10px;letter-spacing:.4em;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:12px}
.scroll-cue::after{content:"";width:1px;height:70px;background:linear-gradient(180deg,var(--gold),transparent);animation:drop 2.2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- page hero (下層) ---------- */
.page-hero{position:relative;padding:190px 8vw 90px;background:var(--bg2)}
.page-hero .en{font-family:var(--en);color:var(--gold);font-size:12px;letter-spacing:.45em;margin-bottom:16px}
.page-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4vw,52px);letter-spacing:.16em;line-height:1.6}
.page-hero .lead{color:var(--muted);font-size:14px;margin-top:22px;max-width:640px}
.page-hero.imgbg{background-position:center;background-size:cover}
.page-hero.imgbg::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,22,.82),rgba(10,15,22,.94))}
.page-hero.imgbg>*{position:relative}
.page-hero.imgbg h1{color:#ece7db}
.page-hero.imgbg .lead{color:#c6cbd3}

/* ---------- shared ---------- */
section{position:relative;padding:130px 8vw}
.label{font-family:var(--en);color:var(--gold);font-size:12px;letter-spacing:.45em;margin-bottom:14px}
.label::before{content:"";display:inline-block;width:36px;height:1px;background:var(--gold);vertical-align:middle;margin-right:16px}
h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,40px);letter-spacing:.14em;line-height:1.6;margin-bottom:40px}
h3{font-family:var(--serif);font-weight:500;letter-spacing:.12em}
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1s ease,transform 1s ease}
.reveal.on{opacity:1;transform:none}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:14px 40px;font-size:13px;letter-spacing:.2em;transition:all .3s;text-align:center}
.btn:hover{background:var(--gold);color:#0a0f16}
.btn.solid{background:var(--gold);color:#0a0f16}
.btn.solid:hover{background:transparent;color:var(--gold)}
.more{font-family:var(--en);font-size:12px;letter-spacing:.35em;color:var(--gold);display:inline-flex;align-items:center;gap:14px}
.more::after{content:"";width:48px;height:1px;background:var(--gold);transition:width .3s}
.more:hover::after{width:80px}
.note{color:var(--muted);font-size:12px}

/* ---------- statement ---------- */
.statement{text-align:center;padding-top:150px;overflow:hidden}
.statement p.big{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:2.4;letter-spacing:.18em}
.statement p.sub{color:var(--muted);font-size:14px;margin-top:34px;line-height:2.4}
.statement .kanji{font-family:var(--serif);color:rgba(201,164,92,.14);font-size:clamp(60px,10vw,130px);letter-spacing:.1em;position:absolute;top:30px;left:50%;transform:translateX(-50%);white-space:nowrap;pointer-events:none}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:0}
.stats div{background:var(--bg);padding:56px 20px;text-align:center}
.stats .num{font-family:var(--en);font-size:clamp(30px,3.4vw,46px);color:var(--ink)}
.stats .num em{font-style:normal;color:var(--gold);font-size:.55em}
.stats .cap{color:var(--muted);font-size:12px;letter-spacing:.2em;margin-top:10px}

/* ---------- about (top) ---------- */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.about .photo{position:relative}
.about .photo img{width:100%;height:640px;object-fit:cover;filter:saturate(.85) contrast(1.05)}
.about .photo::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 80px rgba(10,15,22,.5)}
.about .photo .frame{position:absolute;top:18px;left:18px;right:-18px;bottom:-18px;border:1px solid var(--line);z-index:-1}
.about p{color:#c6cbd3;font-size:14.5px;margin-bottom:22px}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);margin:36px 0}
.roles a{background:var(--bg2);padding:26px 24px;display:block;transition:background .3s}
.roles a:hover{background:var(--panel)}
.roles .name{font-family:var(--serif);font-size:19px;letter-spacing:.15em}
.roles .title{color:var(--gold);font-size:11.5px;letter-spacing:.2em;margin-top:6px}
.roles .axis{color:var(--muted);font-size:12px;margin-top:10px}

/* ---------- services ---------- */
.services{background:var(--bg2)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:60px}
.svc{position:relative;overflow:hidden;background:var(--panel)}
.svc .im{height:300px;overflow:hidden}
.svc .im img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.85);transition:transform .8s ease,filter .8s}
.svc:hover .im img{transform:scale(1.06);filter:saturate(1) brightness(1)}
.svc .body{padding:26px 24px 34px}
.svc .no{font-family:var(--en);color:var(--gold);font-size:12px;letter-spacing:.3em}
.svc h3{font-size:17px;line-height:1.7;margin:12px 0 10px}
.svc p{color:var(--muted);font-size:12.5px;line-height:2}

/* ---------- works grid (top) ---------- */
.works-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px}
.works-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;margin-top:60px}
.work{position:relative;height:320px;overflow:hidden}
.work img{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.75);transition:transform .8s,filter .8s}
.work:hover img{transform:scale(1.05);filter:saturate(1) brightness(.95)}
.work .cap{position:absolute;left:18px;right:14px;bottom:18px;z-index:2}
.work .cap .en{font-family:var(--en);font-size:11px;letter-spacing:.22em;color:var(--gold)}
.work .cap .jp{font-family:var(--serif);font-size:14px;letter-spacing:.1em;line-height:1.6;text-shadow:0 2px 12px rgba(0,0,0,.7)}
.work::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,15,22,.85))}
.work.ph{background:var(--panel);display:flex;align-items:center;justify-content:center}
.work.ph::before{content:"";position:absolute;inset:0;background:url(../img/logo_mark_white.png) center/46% no-repeat;opacity:.08}
.work.ph::after{background:linear-gradient(180deg,transparent 55%,rgba(10,15,22,.6))}

/* ---------- works page ---------- */
.wrow{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:74px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.wrow:first-child{padding-top:20px}
.wrow .ph{overflow:hidden}
.wrow .ph img{width:100%;height:400px;object-fit:cover;filter:saturate(.85);transition:transform .8s}
.wrow:hover .ph img{transform:scale(1.03)}
.wrow.rev .ph{order:2}
.wrow .en{font-family:var(--en);color:var(--gold);font-size:12px;letter-spacing:.3em;margin-bottom:10px}
.wrow h3{font-size:clamp(20px,2vw,26px);margin-bottom:12px}
.wrow .role{font-family:var(--serif);font-size:12px;letter-spacing:.2em;color:var(--gold);margin-bottom:16px}
.wrow .role span{color:var(--muted);margin-left:16px;letter-spacing:.16em}
.wrow p{color:#c6cbd3;font-size:14px}
.wrow .ph.phld{background:var(--panel);height:400px;position:relative}
.wrow .ph.phld::before{content:"";position:absolute;inset:0;background:url(../img/logo_mark_white.png) center/40% no-repeat;opacity:.08}

/* ---------- yaesaka ---------- */
.yaesaka{background:url(../img/sunset_sea.jpg) center/cover fixed no-repeat;text-align:center;padding:170px 8vw}
.yaesaka::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,22,.93),rgba(10,15,22,.72) 50%,rgba(10,15,22,.95))}
.yaesaka>*{position:relative}
.yaesaka .en{font-family:var(--en);color:#c9a45c;letter-spacing:.5em;font-size:12px;margin-bottom:24px}
.yaesaka h2{margin-bottom:26px;color:#ece7db}
.yaesaka p{color:#c6cbd3;font-size:14.5px;max-width:620px;margin:0 auto 14px}

/* ---------- crew (top + page) ---------- */
.crew{display:grid;grid-template-columns:.95fr 1.05fr;gap:70px;align-items:center;background:var(--bg2)}
.crew .photo img{width:100%;height:560px;object-fit:cover;filter:saturate(.9)}
.badge{display:inline-block;border:1px solid var(--gold);color:var(--gold);font-size:11px;letter-spacing:.3em;padding:6px 16px;margin-bottom:24px}
.crew ul{list-style:none;margin:28px 0 36px;display:grid;gap:14px}
.crew li{color:#c6cbd3;font-size:13.5px;padding-left:26px;position:relative}
.crew li::before{content:"—";position:absolute;left:0;color:var(--gold)}
.price{font-family:var(--en);font-size:34px;letter-spacing:.08em}
.price small{font-size:13px;color:var(--muted);letter-spacing:.15em;margin-left:14px}
.price .strike{text-decoration:line-through;color:var(--muted);font-size:16px;margin-right:16px}
.bene-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;margin-top:56px}
.bene{background:var(--panel);padding:34px 24px;border-top:2px solid var(--line)}
.bene .n{font-family:var(--en);color:var(--gold);font-size:13px;letter-spacing:.2em}
.bene h3{font-size:15.5px;line-height:1.8;margin:12px 0 10px}
.bene p{color:var(--muted);font-size:12.5px}
.toku-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.toku{background:var(--bg);border:1px solid rgba(255,255,255,.08);padding:34px 26px;text-align:center}
.toku .n{font-family:var(--en);color:var(--gold);font-size:12px;letter-spacing:.3em}
.toku h3{font-size:15px;line-height:1.8;margin:14px 0 8px}
.toku .worth{font-family:var(--en);color:var(--gold);font-size:14px}
.toku p{color:var(--muted);font-size:12px;margin-top:10px}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:56px}
.step{background:var(--panel);padding:30px 22px;position:relative}
.step .n{font-family:var(--en);color:var(--gold);font-size:12px;letter-spacing:.25em}
.step h3{font-size:14.5px;line-height:1.8;margin:10px 0 8px}
.step p{color:var(--muted);font-size:12px}
.pricebox{background:var(--bg2);border:1px solid var(--line);padding:56px 40px;text-align:center;margin-top:56px}
.pricebox .price{font-size:clamp(38px,4vw,54px)}
.pricebox .cap{color:var(--muted);font-size:12.5px;margin-top:14px}

/* ---------- profile pages ---------- */
.prof{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.prof .photo{position:relative}
.prof .photo img{width:100%;height:auto;filter:saturate(.85)}
.prof .photo .frame{position:absolute;top:18px;left:18px;right:-18px;bottom:-18px;border:1px solid var(--line);z-index:-1}
.prof .en-name{font-family:var(--en);color:var(--gold);font-size:13px;letter-spacing:.4em;margin-bottom:14px}
.prof h1{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4vw,50px);letter-spacing:.2em;line-height:1.5}
.prof .title{color:var(--gold);font-size:13px;letter-spacing:.25em;margin:14px 0 34px}
.prof p{color:#c6cbd3;font-size:14.5px;margin-bottom:22px}
.prof dl{display:grid;grid-template-columns:130px 1fr;gap:14px 24px;margin:36px 0;border-top:1px solid rgba(255,255,255,.08);padding-top:36px}
.prof dt{font-family:var(--en);color:var(--gold);font-size:11px;letter-spacing:.25em;padding-top:5px}
.prof dd{color:#c6cbd3;font-size:13.5px}

/* ---------- contact ---------- */
.ccards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.ccard{background:var(--panel);padding:44px 34px;border-top:2px solid var(--gold);display:flex;flex-direction:column;gap:18px}
.ccard h3{font-size:17px;line-height:1.7}
.ccard p{color:var(--muted);font-size:13px;flex:1}
.ccard .btn{width:100%;padding:13px 10px;font-size:12px}

/* ---------- news ---------- */
.news-list{border-top:1px solid rgba(255,255,255,.1);margin-top:50px}
.news-item{display:grid;grid-template-columns:150px 120px 1fr;gap:24px;align-items:center;padding:26px 6px;border-bottom:1px solid rgba(255,255,255,.1);transition:background .3s}
.news-item:hover{background:rgba(255,255,255,.03)}
.news-item .date{font-family:var(--en);color:var(--muted);font-size:13px;letter-spacing:.15em}
.news-item .tag{font-size:10.5px;letter-spacing:.25em;color:var(--gold);border:1px solid var(--line);text-align:center;padding:4px 0}
.news-item .tit{font-size:14px;letter-spacing:.1em}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}

/* ---------- 3機能・汎用カード ---------- */
.f3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px}
.f3 .card{background:var(--panel);padding:44px 34px;border-top:2px solid var(--line)}
.f3.cols4{grid-template-columns:repeat(4,1fr)}
.f3 .n{font-family:var(--en);color:var(--gold);font-size:12px;letter-spacing:.3em}
.f3 h3{font-size:17px;margin:14px 0 12px;line-height:1.7}
.f3 p{color:var(--muted);font-size:13px}

/* ---------- fixed CTA (mobile) ---------- */
.fixed-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;grid-template-columns:1fr 1fr;gap:1px;background:rgba(201,164,92,.35);border-top:1px solid rgba(201,164,92,.35)}
.fixed-cta a{background:rgba(10,15,22,.96);backdrop-filter:blur(8px);padding:17px 8px;text-align:center;font-size:12.5px;letter-spacing:.14em}
.fixed-cta a.g{color:var(--gold)}

/* ---------- footer ---------- */
footer{background:#070b11;padding:110px 8vw 50px;text-align:center}
footer .logo{width:210px;margin:0 auto 38px}
footer .tag{font-family:var(--serif);font-size:17px;letter-spacing:.3em;margin-bottom:10px}
footer .tag-sub{color:var(--muted);font-size:12px;letter-spacing:.2em;margin-bottom:46px}
.fnav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-bottom:44px}
.fnav a{color:var(--muted);font-size:12px;letter-spacing:.18em;transition:color .3s}
.fnav a:hover{color:var(--ink)}
.sns{display:flex;justify-content:center;gap:34px;margin-bottom:60px}
.sns a{font-family:var(--en);font-size:12px;letter-spacing:.25em;color:var(--muted);transition:color .3s}
.sns a:hover{color:var(--gold)}
footer .copy{color:#525a66;font-size:10.5px;letter-spacing:.25em}

/* ---------- noanim（検証・スクリーンショット用） ---------- */
body.noanim .reveal{opacity:1!important;transform:none!important;transition:none!important}
body.noanim .hero{height:900px!important;min-height:0!important}
body.noanim .yaesaka{background-attachment:scroll!important}
body.noanim html{scroll-behavior:auto}

/* ---------- responsive ---------- */
@media(max-width:960px){
  header{padding:16px 20px}
  header.scrolled,header.solid{padding:12px 20px}
  nav{display:none}
  .menu-btn{display:block}
  .hero-tate{display:none}
  section{padding:90px 6vw}
  .hero h1{font-size:clamp(26px,8vw,40px)}
  .statement .kanji{font-size:17vw;top:60px}
  h2{overflow-wrap:anywhere}
  .page-hero{padding:150px 6vw 70px}
  .page-hero h1,.prof h1{overflow-wrap:anywhere}
  .stats{grid-template-columns:repeat(2,1fr)}
  .about,.crew,.prof{grid-template-columns:1fr;gap:44px}
  .about .photo img{height:420px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .works-grid{grid-template-columns:repeat(2,1fr)}
  .wrow{grid-template-columns:1fr;gap:30px;padding:50px 0}
  .wrow.rev .ph{order:0}
  .wrow .ph img,.wrow .ph.phld{height:260px}
  .bene-grid{grid-template-columns:repeat(2,1fr)}
  .toku-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .ccards,.f3,.f3.cols4,.grid2{grid-template-columns:1fr}
  .news-item{grid-template-columns:100px 1fr;grid-template-rows:auto auto}
  .news-item .tit{grid-column:1/-1}
  .yaesaka{background-attachment:scroll}
  .fixed-cta{display:grid}
  footer{padding-bottom:120px}
}
@media(max-width:560px){
  .svc-grid,.works-grid,.bene-grid,.toku-grid,.steps{grid-template-columns:1fr}
  .work{height:260px}
}