/* ============================================================
   HERO
============================================================ */
.hero{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  /* Saturated navy + stage spotlight from left-center */
  background:
    radial-gradient(ellipse 70% 88% at 28% 50%,  #102e62 0%,  #081e42 40%, transparent 70%),
    radial-gradient(ellipse 95% 32% at 50% -6%,  rgba(20,60,155,.32) 0%, transparent 58%),
    radial-gradient(ellipse 48% 60% at 96% 44%,  rgba(8,22,62,.45) 0%,  transparent 62%),
    linear-gradient(174deg, #010810 0%, #020c1c 30%, #030f24 62%, #06112e 100%);
}
/* Gloss sheen overlay */
.hero::before{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(140deg, rgba(30,85,210,.07) 0%, transparent 36%),
    linear-gradient(to bottom, rgba(22,68,175,.09) 0%, transparent 24%),
    linear-gradient(to bottom, transparent 65%, rgba(0,4,16,.55) 100%);
  pointer-events:none;z-index:1;
}
/* Bottom-left depth shadow */
.hero::after{
  content:'';position:absolute;
  left:-100px;bottom:5%;width:500px;height:500px;
  background:radial-gradient(ellipse at center,rgba(4,14,36,.55) 0%,transparent 70%);
  pointer-events:none;z-index:1;
}
/* Vertical lines */
.hero-vl{
  position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(201,168,76,.12),transparent);
  pointer-events:none;z-index:1;
}
/* Rotating compass ring */
.compass{
  position:absolute;right:-80px;top:50%;
  transform:translateY(-50%);
  width:560px;height:560px;
  animation:rot 80s linear infinite;
  pointer-events:none;z-index:1;
}
.compass-ring{
  position:absolute;border-radius:50%;
  border:1px solid rgba(201,168,76,.07);
}
.compass-ring:nth-child(1){inset:0}
.compass-ring:nth-child(2){inset:50px;border-color:rgba(201,168,76,.1)}
.compass-ring:nth-child(3){inset:110px;border-color:rgba(201,168,76,.15)}
.compass-ring:nth-child(4){inset:180px;border-color:rgba(201,168,76,.12)}
.compass-cross{
  position:absolute;inset:0;
}
.compass-cross::before,.compass-cross::after{
  content:'';position:absolute;background:rgba(201,168,76,.08);
}
.compass-cross::before{width:1px;height:100%;left:50%}
.compass-cross::after{width:100%;height:1px;top:50%}
/* Diamond center */
.compass-diamond{
  position:absolute;left:50%;top:50%;
  width:20px;height:20px;
  border:1px solid rgba(201,168,76,.3);
  transform:translate(-50%,-50%) rotate(45deg);
}
@keyframes rot{to{transform:translateY(-50%) rotate(360deg)}}

.hero-inner{
  position:relative;z-index:2;
  max-width:56vw;
  padding:0 clamp(20px,4vw,60px) 0 clamp(60px,20vw,380px);
  margin-top:74px;
}
/* Eyebrow */
.h-brow{
  display:flex;align-items:center;gap:18px;
  margin-bottom:22px;
  opacity:0;animation:sl-up .8s ease 2.7s forwards;
}
.h-brow-line{
  width:52px;height:1px;background:var(--gold-grad);
  transform:scaleX(0);transform-origin:left;
  animation:sc-x .7s ease 2.7s forwards;
}
.h-brow-txt{
  font-family:var(--d);font-style:italic;font-size:12px;
  letter-spacing:.28em;color:var(--g2);
  opacity:0;animation:fi .6s ease 3.2s forwards;
}
@keyframes sc-x{to{transform:scaleX(1)}}
/* H1 */
.hero h1{
  font-family:var(--s);font-size:clamp(28px,3.4vw,52px);
  font-weight:500;line-height:1.55;letter-spacing:.04em;
  margin-bottom:28px;
}
.hero h1 .cl{
  display:inline-block;opacity:0;transform:translateY(40px) rotate(1deg);
  animation:char-in .55s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes char-in{to{opacity:1;transform:translateY(0) rotate(0)}}
.hero-sub{
  font-family:var(--s);font-size:clamp(14px,1.3vw,18px);font-weight:300;
  color:var(--text-2);line-height:2.3;margin-bottom:16px;
  opacity:0;animation:sl-up .8s ease 3.4s forwards;
}
.hero-note{
  font-size:12px;color:var(--text-3);letter-spacing:.1em;margin-bottom:36px;
  opacity:0;animation:sl-up .8s ease 3.6s forwards;
}
.hero-btns{
  display:flex;gap:18px;flex-wrap:wrap;
  opacity:0;animation:sl-up .8s ease 3.8s forwards;
}
@keyframes sl-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
/* Scroll indicator */
.hero-scroll{
  position:absolute;bottom:44px;left:clamp(60px,20vw,380px);
  display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2;
  opacity:0;animation:fi 1s ease 4.2s forwards;
}
.hs-txt{font-family:var(--d);font-size:10px;letter-spacing:.3em;color:var(--text-3);writing-mode:vertical-rl}
.hs-line{
  width:1px;height:56px;
  background:linear-gradient(to bottom,var(--g2),transparent);
  animation:hs-pulse 2.2s ease-in-out infinite;
}
@keyframes hs-pulse{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.5);opacity:.4}}

/* ─── Monogram background pattern ─── */
.hero-mono-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;z-index:1;
  mix-blend-mode:screen;
  opacity:.9;
}

/* Hero Logo Relief — 型押し (embossed stamp) */
.hero-relief {
  position:absolute;
  right:5%;top:50%;
  transform:translateY(-50%);
  width:440px;height:440px;
  pointer-events:none;z-index:1;
  opacity:0;
  animation:fi 2s ease 2.6s forwards;
}
.hero-relief img {
  width:100%;height:100%;object-fit:contain;
  opacity:.38;
  /* Die-stamp / emboss: directional highlight + deep shadow, low saturation */
  filter:
    sepia(.62) saturate(2.2) brightness(1.18) contrast(1.28)
    drop-shadow(-1.5px -1.5px 0 rgba(255,238,190,.55))
    drop-shadow(-1px   -1px   0 rgba(240,210,100,.38))
    drop-shadow( 2px    2px  2px rgba(10,5,0,.85))
    drop-shadow( 3px    3px  5px rgba(4,2,0,.58));
  mix-blend-mode:screen;
}

/* ============================================================
   HERO GEOMETRIC DECORATIONS
============================================================ */
/* Corner ornaments */
.hg-corner {
  position:absolute;pointer-events:none;z-index:2;
  width:80px;height:80px;opacity:0;
}
.hg-tl{top:88px;left:52px; animation:fi .9s ease 3.2s forwards}
.hg-tr{top:88px;right:52px;animation:fi .9s ease 3.4s forwards}
.hg-bl{bottom:52px;left:52px;animation:fi .9s ease 3.5s forwards}
.hg-br{bottom:52px;right:56px;animation:fi .9s ease 3.7s forwards}

/* Floating diamonds */
.hg-d {
  position:absolute;pointer-events:none;z-index:2;
  border:1px solid rgba(201,168,76,.3);
  transform:rotate(45deg);
  opacity:0;
  animation:
    fi .8s ease var(--dl,3s) forwards,
    dp var(--dur,6s) ease-in-out calc(var(--dl,3s) + .9s) infinite;
}
@keyframes dp {
  0%,100%{opacity:.9;transform:rotate(45deg) scale(1)   translateY(0)}
  50%    {opacity:.5;transform:rotate(45deg) scale(.92) translateY(var(--dy,-7px))}
}

/* Horizontal deco rules (full-width, centered diamond) */
.hg-hrule {
  position:absolute;left:0;right:0;pointer-events:none;z-index:2;
  display:flex;align-items:center;opacity:0;
  animation:fi 1.2s ease var(--dl,3.4s) forwards;
}
.hg-hrule::before,.hg-hrule::after {
  content:'';flex:1;height:1px;
}
.hg-hrule::before{background:linear-gradient(to right,transparent,rgba(201,168,76,var(--op,.18)))}
.hg-hrule::after {background:linear-gradient(to left, transparent,rgba(201,168,76,var(--op,.18)))}
.hg-rh-d {
  width:7px;height:7px;border:1px solid rgba(201,168,76,.42);
  transform:rotate(45deg);flex-shrink:0;margin:0 14px;
}

/* Large bg octagon frame */
.hg-oct {
  position:absolute;right:-50px;top:50%;transform:translateY(-50%);
  width:520px;height:520px;
  pointer-events:none;z-index:1;
  opacity:0;animation:fi 2s ease 3s forwards;
}
.hg-oct svg{width:100%;height:100%}

/* Cross / star ornaments */
.hg-cross {
  position:absolute;pointer-events:none;z-index:2;
  opacity:0;animation:fi .7s ease var(--dl,3.6s) forwards;
}

/* Thin vertical accent line pair */
.hg-vaccent {
  position:absolute;top:88px;bottom:52px;width:1px;pointer-events:none;z-index:2;
  opacity:0;animation:fi 1s ease 3.3s forwards;
}

/* Gold chain / zigzag line */
.hg-chain {
  position:absolute;pointer-events:none;z-index:2;
  opacity:0;animation:fi 1s ease 3.8s forwards;
}

/* ============================================================
   HERO — prominent Japanese brand name
============================================================ */
.h-annaijo-wrap{
  display:flex;align-items:center;gap:18px;
  margin-bottom:20px;
  opacity:0;animation:sl-up .8s ease 3.0s forwards;
}
.h-annaijo-line{flex:0 0 26px;height:1px;background:var(--gold-grad)}
.h-annaijo{
  font-family:var(--s);font-size:clamp(16px,1.75vw,23px);
  font-weight:500;letter-spacing:.32em;
  background:var(--gold-h);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;
}

/* ============================================================
   OVERVIEW — TOP page section highlights
============================================================ */
.overview{background:var(--n0);padding:120px 0 0;position:relative}
.ov-intro{text-align:center;margin-bottom:72px}
.ov-intro .sec-lbl{justify-content:center}
/* Grid with gold hairlines as dividers */
.ov-top{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(201,168,76,.12);margin-bottom:1px;
}
.ov-bot{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(201,168,76,.12);
}
.ov-card{
  display:flex;flex-direction:column;padding:60px 52px;
  background:var(--n0);position:relative;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:background .45s;
}
.ov-card:nth-child(even){background:rgba(7,18,35,.6)}
/* Top gold bar reveal on hover */
.ov-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gold-grad);
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s ease;
}
/* Left gold bar reveal on hover */
.ov-card::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:2px;
  background:linear-gradient(to bottom,transparent,var(--g2),transparent);
  transform:scaleY(0);transform-origin:top;
  transition:transform .5s ease .08s;
}
.ov-card:hover{background:rgba(201,168,76,.028)}
.ov-card:hover::before{transform:scaleX(1)}
.ov-card:hover::after{transform:scaleY(1)}
.ov-num{
  font-family:var(--d);font-size:82px;font-weight:300;font-style:italic;
  color:rgba(201,168,76,.05);line-height:.85;margin-bottom:-20px;
}
.ov-en{
  font-family:var(--d);font-style:italic;font-size:11px;
  letter-spacing:.28em;color:var(--g2);margin-bottom:18px;
  display:flex;align-items:center;gap:12px;
}
.ov-en::before{content:'';width:22px;height:1px;background:var(--gold-grad);flex-shrink:0}
.ov-title{
  font-family:var(--s);font-size:clamp(18px,1.8vw,26px);
  font-weight:500;line-height:1.65;letter-spacing:.04em;
  color:var(--text-1);margin-bottom:20px;
}
.ov-lead{
  font-family:var(--s);font-size:13px;color:var(--text-2);
  line-height:2.25;flex:1;margin-bottom:34px;
}
.ov-more{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--d);font-style:italic;font-size:10.5px;
  letter-spacing:.22em;color:var(--g2);
  transition:color .3s,gap .3s;
}
.ov-more svg{width:10px;height:10px;flex-shrink:0;transition:transform .3s}
.ov-card:hover .ov-more{color:var(--g3);gap:14px}
.ov-card:hover .ov-more svg{transform:translateX(4px)}

/* ============================================================
   PRICE PREVIEW — TOP page teaser
============================================================ */
.price-preview {
  background: linear-gradient(160deg, var(--n2) 0%, var(--n1) 50%, var(--n0) 100%);
  position: relative;
  overflow: hidden;
}
.price-preview::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.25), transparent);
}
.price-preview::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.15), transparent);
}
/* price-preview は container の大きなパディングを上書き */
.price-preview .container {
  padding-left: clamp(28px, 5vw, 80px);
  padding-right: clamp(28px, 5vw, 80px);
}
.pp-inner {
  display: grid;
  grid-template-columns: 260px 1fr auto;
  align-items: center;
  gap: 0;
  padding: 72px 0;
}
.pp-lead {
  padding-right: 52px;
  border-right: 1px solid rgba(201,168,76,.12);
}
.pp-lead .sec-lbl { margin-bottom: 14px; }
.pp-headline {
  font-family: var(--s);
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.pp-sub {
  font-family: var(--s);
  font-size: 12px;
  color: var(--text-3);
  line-height: 2.1;
  margin-bottom: 28px;
}
.pp-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 0 48px;
}
.pp-item {
  padding: 32px 20px;
  background: rgba(255,255,255,.018);
  border: 1px solid rgba(201,168,76,.1);
  text-align: center;
  transition: border-color .3s, background .3s;
}
.pp-item:hover {
  border-color: rgba(201,168,76,.28);
  background: rgba(201,168,76,.04);
}
.pp-label {
  font-size: 11px;
  font-family: var(--sans);
  letter-spacing: .1em;
  color: var(--text-3);
  margin-bottom: 14px;
  display: block;
}
.pp-price {
  font-family: var(--d);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 400;
  color: var(--g3);
  line-height: 1;
  margin-bottom: 6px;
}
.pp-unit {
  font-family: var(--sans);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: .05em;
}
.pp-cta {
  padding-left: 48px;
  border-left: 1px solid rgba(201,168,76,.12);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  white-space: nowrap;
}
.pp-cta-note {
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--sans);
  line-height: 1.9;
}

@media(max-width:1024px) {
  .pp-inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 60px 0;
  }
  .pp-lead {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid rgba(201,168,76,.12);
    padding-bottom: 44px;
  }
  .pp-items { padding: 0; }
  .pp-cta {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(201,168,76,.12);
    padding-top: 44px;
    flex-direction: row;
    align-items: center;
    gap: 28px;
    white-space: normal;
  }
}
@media(max-width:768px) {
  .pp-items { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .pp-item { padding: 20px 10px; }
  .pp-price { font-size: 20px; }
  .pp-inner { padding: 52px 0; }
  .pp-cta { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   PP-BIZ — 営業情報 strip
============================================================ */
.pp-biz {
  border-top: 1px solid rgba(201,168,76,.12);
  padding: 36px 0 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.pp-biz-list {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0;
}
.pp-biz-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-right: 44px;
  margin-right: 44px;
  border-right: 1px solid rgba(201,168,76,.1);
}
.pp-biz-row:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}
.pp-biz-row dt {
  font-size: 10.5px;
  font-family: var(--sans);
  letter-spacing: .1em;
  color: var(--text-3);
  white-space: nowrap;
}
.pp-biz-row dd {
  font-family: var(--s);
  font-size: 15px;
  color: var(--text-2);
  letter-spacing: .04em;
}
.pp-biz-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--d);
  font-style: italic;
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--g2);
  white-space: nowrap;
  transition: color .3s, gap .3s;
}
.pp-biz-link svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: transform .3s;
}
.pp-biz-link:hover { color: var(--g3); gap: 14px; }
.pp-biz-link:hover svg { transform: translateX(3px); }

@media(max-width:1024px) {
  .pp-biz {
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 0 44px;
    gap: 24px;
  }
  .pp-biz-list { flex-wrap: wrap; gap: 20px 0; }
  .pp-biz-row { padding-right: 32px; margin-right: 32px; }
}
@media(max-width:768px) {
  .pp-biz-list { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pp-biz-row { border-right: none; padding-right: 0; margin-right: 0; }
}