/*
 * RHINO front page — 金屏風モダン（琳派）デザイン v2
 * front-page.php 専用。他ページには読み込まれない（is_front_page ガード）。
 * 出典: rhino-design-mock-v2.html（承認済みモック）を忠実に移植。
 */
:root{
  --sumi:#131109;        /* 深い墨 */
  --sumi2:#1E1A12;
  --paper:#F3EFE3;       /* 胡粉 */
  --gold:#C9A24B;        /* 金 */
  --gold-hi:#F3DE9C;     /* 金の光 */
  --gold-deep:#8A6B28;   /* 金の陰 */
  --shu:#C13B32;         /* 朱 */
  --line-gold:rgba(201,162,75,.35);
}
.rhino-lp *{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body.rhino-lp-body{
  background:var(--sumi);
  color:var(--paper);
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:300;letter-spacing:.06em;line-height:2;
  overflow-x:hidden;
}
.rhino-lp .serif{font-family:"Shippori Mincho B1",serif}
.rhino-lp .en{font-family:"Cormorant Garamond",serif;letter-spacing:.32em;text-transform:uppercase}

/* 金泥グラデ文字（煌めきアニメ） */
.rhino-lp .kindei{
  background:linear-gradient(100deg,#9C7B33 0%,var(--gold) 22%,var(--gold-hi) 40%,#FFF6D8 50%,var(--gold-hi) 60%,var(--gold) 78%,#9C7B33 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rhino-shine 5.5s linear infinite;
}
@keyframes rhino-shine{to{background-position:-220% 0}}

/* 金の罫線（光が走る） */
.rhino-lp .gold-rule{position:relative;height:1px;background:rgba(201,162,75,.25);overflow:hidden}
.rhino-lp .gold-rule::after{content:"";position:absolute;inset:0;width:34%;
  background:linear-gradient(90deg,transparent,var(--gold-hi),transparent);
  animation:rhino-runlight 3.6s ease-in-out infinite}
@keyframes rhino-runlight{0%{transform:translateX(-120%)}100%{transform:translateX(420%)}}

/* ───────── header ───────── */
.rhino-lp .lp-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 48px;
  background:linear-gradient(180deg,rgba(19,17,9,.85),rgba(19,17,9,0));
}
.rhino-lp .logo{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:21px;letter-spacing:.42em;text-decoration:none}
.rhino-lp nav{display:flex;gap:32px;font-size:12px;letter-spacing:.18em}
.rhino-lp nav a{color:var(--paper);text-decoration:none;position:relative;opacity:.85}
.rhino-lp nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .5s cubic-bezier(.22,1,.36,1)}
.rhino-lp nav a:hover{opacity:1}
.rhino-lp nav a:hover::after{width:100%}
.rhino-lp .cta-mini{
  border:1px solid var(--line-gold);padding:10px 24px;font-size:12px;letter-spacing:.24em;
  text-decoration:none;color:var(--gold-hi);transition:.45s;position:relative;overflow:hidden;
}
.rhino-lp .cta-mini:hover{background:var(--gold);color:var(--sumi);border-color:var(--gold)}

/* ───────── hero ───────── */
.rhino-lp .hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;overflow:hidden}
.rhino-lp #kira{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.rhino-lp .hero::before{ /* 金雲（琳派の雲霞） */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 34% at 78% 20%,rgba(201,162,75,.20),transparent 70%),
    radial-gradient(46% 30% at 14% 78%,rgba(201,162,75,.14),transparent 70%),
    radial-gradient(30% 20% at 50% 55%,rgba(243,222,156,.10),transparent 70%);
}
.rhino-lp .hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:auto auto;gap:5vw;align-items:center;
  padding:0 7vw;
}
.rhino-lp .hero-art{position:relative;width:min(44vw,600px)}
.rhino-lp .hero-art .halo{ /* 金の円光 */
  position:absolute;inset:-14% -8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(243,222,156,.22),rgba(201,162,75,.10) 55%,transparent 72%);
  animation:rhino-breath 6s ease-in-out infinite;
}
@keyframes rhino-breath{50%{opacity:.6;transform:scale(1.04)}}
.rhino-lp .hero-art .ring{
  position:absolute;inset:-6% 0;border-radius:50%;
  border:1px solid rgba(201,162,75,.30);
  -webkit-mask:linear-gradient(120deg,#000 30%,transparent 60%);
  mask:linear-gradient(120deg,#000 30%,transparent 60%);
  animation:rhino-spin 26s linear infinite;
}
.rhino-lp .hero-art .ring.r2{inset:-12% -6%;border-color:rgba(243,222,156,.18);animation-duration:40s;animation-direction:reverse}
@keyframes rhino-spin{to{transform:rotate(360deg)}}
.rhino-lp .hero-art img{
  position:relative;width:100%;display:block;
  filter:drop-shadow(0 0 34px rgba(201,162,75,.45)) drop-shadow(0 24px 40px rgba(0,0,0,.55));
  animation:rhino-float 7s ease-in-out infinite;
}
@keyframes rhino-float{50%{transform:translateY(-12px)}}
.rhino-lp .hero-copy{display:flex;flex-direction:row-reverse;gap:2.8vw;align-items:flex-start}
.rhino-lp .tate{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-family:"Shippori Mincho B1",serif;font-weight:600;
  font-size:clamp(46px,5.8vw,92px);letter-spacing:.26em;line-height:1.5;
  opacity:1;transform:translateY(24px);
  animation:rhino-rise 1.6s cubic-bezier(.22,1,.36,1) .3s both;
}
.rhino-lp .tate.sub{
  font-size:clamp(13px,1.05vw,16px);font-weight:400;letter-spacing:.42em;
  color:rgba(243,239,227,.62);padding-top:1.4em;animation-delay:1.1s;
}
@keyframes rhino-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rhino-lp .hero-eyebrow{
  position:absolute;left:7vw;top:15vh;font-size:11px;color:var(--gold);z-index:2;
  opacity:0;animation:rhino-rise 1.4s ease 1.6s forwards;
}
.rhino-lp .seal{
  position:absolute;right:7vw;bottom:11vh;z-index:3;
  width:78px;height:78px;background:var(--shu);color:var(--paper);
  display:grid;place-items:center;
  font-family:"Shippori Mincho B1",serif;font-size:35px;font-weight:800;
  box-shadow:0 6px 26px rgba(193,59,50,.4);
  transform:scale(1.6) rotate(-6deg);opacity:0;
  animation:rhino-stamp .55s cubic-bezier(.34,1.56,.64,1) 2.6s forwards;
}
@keyframes rhino-stamp{60%{opacity:1;transform:scale(.94) rotate(-3deg)}to{opacity:1;transform:scale(1) rotate(-3deg)}}
.rhino-lp .scroll-cue{position:absolute;left:7vw;bottom:8vh;font-size:10px;color:rgba(201,162,75,.8);display:flex;align-items:center;gap:14px;z-index:2}
.rhino-lp .scroll-cue::after{content:"";width:70px;height:1px;background:var(--gold);transform-origin:left;animation:rhino-sweep 2.4s ease-in-out infinite}
@keyframes rhino-sweep{0%{transform:scaleX(0)}55%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}
.rhino-lp .hero-strap{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;justify-content:center;gap:38px;padding:20px 0 22px;
  font-size:10.5px;letter-spacing:.34em;color:rgba(243,222,156,.75);
  border-top:1px solid rgba(201,162,75,.18);
  background:linear-gradient(180deg,transparent,rgba(19,17,9,.6));
}

/* ───────── 共通 ───────── */
.rhino-lp section{padding:17vh 8vw;position:relative}
.rhino-lp .eyebrow{font-size:11px;color:var(--gold);margin-bottom:56px;display:flex;align-items:center;gap:18px}
.rhino-lp .eyebrow::after{content:"";flex:0 0 64px;height:1px;background:var(--line-gold)}
.rhino-lp .reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.rhino-lp .reveal.in{opacity:1;transform:none}

/* ───────── philosophy（金屏風） ───────── */
.rhino-lp .philosophy{
  background:
    radial-gradient(120% 90% at 20% 0%,rgba(255,246,216,.5),transparent 55%),
    linear-gradient(115deg,#D8B15E 0%,#EACD86 26%,#C39A44 47%,#EED9A0 66%,#CFA751 84%,#B98F38 100%);
  color:var(--sumi);
  min-height:92vh;display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center;
}
.rhino-lp .philosophy::before{ /* 箔のムラ */
  content:"";position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;pointer-events:none;
  background:
   repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 2px,transparent 2px 7px),
   repeating-linear-gradient(90deg,rgba(120,85,20,.08) 0 1px,transparent 1px 90px),
   repeating-linear-gradient(0deg,rgba(120,85,20,.08) 0 1px,transparent 1px 90px);
}
.rhino-lp .philosophy .eyebrow{color:#6E5312}
.rhino-lp .philosophy .eyebrow::after{background:rgba(90,66,12,.45)}
.rhino-lp .phi-lines{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:clamp(25px,2.5vw,36px);line-height:2.5;letter-spacing:.18em;position:relative;z-index:1}
.rhino-lp .phi-lines em{font-style:normal;border-bottom:2px solid var(--shu);padding-bottom:2px}
.rhino-lp .phi-body{font-size:14.5px;color:#3C3212;max-width:44ch;position:relative;z-index:1;font-weight:400}
.rhino-lp .phi-body p+p{margin-top:2em}

/* ───────── services ───────── */
.rhino-lp .svc-list{display:grid;border-top:1px solid var(--line-gold)}
.rhino-lp .svc{
  display:grid;grid-template-columns:130px 1fr 1.2fr auto;gap:4vw;align-items:center;
  padding:64px 0;border-bottom:1px solid var(--line-gold);
  position:relative;overflow:hidden;transition:.5s;text-decoration:none;color:inherit;
}
.rhino-lp .svc::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(201,162,75,.12),transparent 60%);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.rhino-lp .svc:hover::before{transform:scaleX(1)}
.rhino-lp .kanji{
  font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:66px;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--gold);transition:.5s;position:relative;z-index:1;
}
.rhino-lp .svc:hover .kanji{
  -webkit-text-stroke:0;
  background:linear-gradient(120deg,var(--gold-deep),var(--gold-hi) 50%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rhino-lp .svc h3{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:24px;letter-spacing:.14em;margin-bottom:10px;position:relative;z-index:1}
.rhino-lp .svc .en-sub{font-size:11px;color:var(--gold)}
.rhino-lp .svc p{font-size:14px;color:rgba(243,239,227,.75);max-width:42ch;position:relative;z-index:1}
.rhino-lp .svc .arrow{font-family:"Cormorant Garamond",serif;font-size:22px;color:var(--gold);transition:transform .5s;position:relative;z-index:1}
.rhino-lp .svc:hover .arrow{transform:translateX(10px);color:var(--gold-hi)}

/* ───────── works（金砂子の紙） ───────── */
.rhino-lp .works{
  background:var(--paper);color:var(--sumi);
}
.rhino-lp .works .eyebrow{color:#8A6B28}
.rhino-lp .works .eyebrow::after{background:rgba(138,107,40,.4)}
.rhino-lp .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(138,107,40,.3)}
.rhino-lp .work{
  background:#FBF8EF;aspect-ratio:4/3;padding:28px;
  display:flex;flex-direction:column;justify-content:space-between;transition:.5s;position:relative;overflow:hidden;
}
.rhino-lp .work::after{ /* 金砂子 */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(201,162,75,.5) .8px,transparent .9px),radial-gradient(rgba(201,162,75,.35) .6px,transparent .8px);
  background-size:90px 90px,140px 140px;background-position:0 0,40px 60px;
}
.rhino-lp .work:hover{background:#fff;box-shadow:0 18px 44px rgba(138,107,40,.18);z-index:1}
.rhino-lp .work .tag{font-size:10px;color:#8A6B28}
.rhino-lp .work h4{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:17px;letter-spacing:.1em}
.rhino-lp .work .thumb{flex:1;margin:18px 0;border:1px solid rgba(138,107,40,.35);display:grid;place-items:center;color:#8A6B28;font-size:11px;letter-spacing:.3em;background:repeating-linear-gradient(45deg,transparent,transparent 6px,rgba(138,107,40,.12) 6px,rgba(138,107,40,.12) 7px)}

/* ───────── contact ───────── */
.rhino-lp .contact{
  text-align:center;min-height:74vh;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:44px;
  background:
    radial-gradient(60% 40% at 50% 110%,rgba(201,162,75,.22),transparent 70%),
    var(--sumi2);
}
.rhino-lp .contact h2{font-family:"Shippori Mincho B1",serif;font-weight:600;font-size:clamp(30px,3.4vw,50px);letter-spacing:.22em}
.rhino-lp .contact p{font-size:13.5px;color:rgba(243,239,227,.65)}
.rhino-lp .btn-gold{
  display:inline-block;padding:22px 88px;color:var(--sumi);text-decoration:none;
  font-size:14px;letter-spacing:.4em;font-weight:500;position:relative;
  background:linear-gradient(100deg,#9C7B33,var(--gold) 30%,var(--gold-hi) 50%,var(--gold) 70%,#9C7B33);
  background-size:200% 100%;animation:rhino-shine 4s linear infinite;
  box-shadow:0 10px 34px rgba(201,162,75,.35);transition:transform .4s,box-shadow .4s;
}
.rhino-lp .btn-gold:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(201,162,75,.5)}
.rhino-lp .lp-footer{color:rgba(243,239,227,.4);font-size:11px;text-align:center;padding:38px;letter-spacing:.2em;background:var(--sumi2)}

@media (max-width:900px){
  .rhino-lp .hero-inner{grid-template-columns:1fr;gap:8vh;padding-top:14vh;justify-items:center}
  .rhino-lp .hero-art{width:82vw}
  .rhino-lp .tate{font-size:46px}
  .rhino-lp .philosophy{grid-template-columns:1fr;min-height:auto}
  .rhino-lp .svc{grid-template-columns:70px 1fr;grid-template-rows:auto auto}
  .rhino-lp .svc .arrow{display:none}
  .rhino-lp .work-grid{grid-template-columns:1fr}
  .rhino-lp nav{display:none}
  .rhino-lp .hero-strap{flex-wrap:wrap;gap:10px 24px;padding:14px 6vw}
}
@media (prefers-reduced-motion:reduce){
  .rhino-lp *,.rhino-lp *::before,.rhino-lp *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rhino-lp .tate,.rhino-lp .tate.sub,.rhino-lp .hero-eyebrow,.rhino-lp .seal{opacity:1;transform:none}
}