@charset "UTF-8";

/* =====================================================
  HERO – 
===================================================== */

.corp-hero{
  position:relative;
  overflow:hidden;
  min-height:min(92vh, 980px);
}
@supports (height: 1svh){
  .corp-hero{ min-height:min(92svh, 980px); }
}

.corp-hero{
  --spd-caustics: 16.5s;
  --spd-ripples:  18.5s;
  --spd-sweep:    13.8s;

  --corp-eyebrow: clamp(10px, 1.15vw, 12px);
  --corp-hero:    clamp(22px, 2.6vw, 32px);

  background:
    radial-gradient(1200px 640px at 50% 14%, rgba(248,248,248,.82), rgba(255,255,255,0) 68%),
    radial-gradient(1400px 720px at 50% 36%, rgba(242,242,242,.56), rgba(255,255,255,0) 70%),
    #fff;
}

/* =====================================================
  背景演出（静か）
===================================================== */
.corp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,.72) 18px,
      rgba(255,255,255,0) 44px
    ),
    repeating-linear-gradient(115deg,
      rgba(255,255,255,0) 0px,
      rgba(255,255,255,.54) 14px,
      rgba(255,255,255,0) 40px
    ),
    radial-gradient(900px 520px at 30% 42%,
      rgba(255,255,255,.62),
      rgba(255,255,255,0) 72%
    );

  background-size:920px 920px,760px 760px,100% 100%;
  background-repeat:no-repeat;
  background-position:0% 0%,40% 60%,0% 0%;

  opacity:.62; /* ★少し薄く */
  animation:corpCaustics var(--spd-caustics) linear infinite;
}

@keyframes corpCaustics{
  0%  { background-position:0% 0%,40% 60%,0% 0%; opacity:.52; }
  50% { background-position:60% 35%,8% 18%,0% 0%; opacity:.70; }
  100%{ background-position:110% 70%,-30% -20%,0% 0%; opacity:.52; }
}

.corp-hero__overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:transparent;
}

.corp-hero__overlay::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image:
    repeating-radial-gradient(circle at 50% 45%,
      rgba(255,255,255,.10) 0px,
      rgba(255,255,255,.10) 2px,
      rgba(255,255,255,0) 8px,
      rgba(255,255,255,0) 18px
    ),
    repeating-linear-gradient(108deg,
      rgba(255,255,255,.06) 0px,
      rgba(255,255,255,.06) 2px,
      rgba(255,255,255,0) 12px,
      rgba(255,255,255,0) 26px
    );

  background-size:560px 560px,780px 780px;
  background-repeat:repeat;

  opacity:.14; /* ★少し薄く */
  animation:corpRipples var(--spd-ripples) ease-in-out infinite;
}

@keyframes corpRipples{
  0%  { background-position:0% 0%,0% 0%; opacity:.12; }
  50% { background-position:10% 7%,-8% 12%; opacity:.18; }
  100%{ background-position:0% 0%,0% 0%; opacity:.12; }
}

.corp-hero__overlay::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background-image:
    linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.90) 46%, rgba(255,255,255,0) 78%),
    linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.56) 44%, rgba(255,255,255,0) 76%);

  background-size:780px 780px,980px 980px;
  background-repeat:no-repeat;
  background-position:-60% 20%,-80% 35%;

  opacity:.42; /* ★少し薄く */
  animation:corpSweep var(--spd-sweep) cubic-bezier(.22,1,.36,1) infinite;
}

@keyframes corpSweep{
  0%  { background-position:-80% 20%,-110% 35%; opacity:0; }
  12% { opacity:.46; }
  55% { opacity:.46; }
  100%{ background-position:160% 65%,190% 80%; opacity:0; }
}

/* =====================================================
  Layout
===================================================== */
.corp-hero__inner{
  position:relative;
  min-height:inherit;
  display:grid;
  place-items:center;
  padding:96px 0 86px;
}

.corp-hero__content{
  width:min(100% - (var(--corp-pad-pc,40px)*2), var(--corp-narrow,920px));
  text-align:center;
}

/* =====================================================
  Typography
===================================================== */
.corp-hero__eyebrow{
  font-family:var(--font-en, "Cinzel", serif);
  font-size:var(--corp-eyebrow);
  font-weight:500;
  letter-spacing:var(--corp-en-track-wide);
  text-transform:uppercase;
  margin:0 0 14px;
  color:var(--ink-muted);
  line-height:1.1;
}

.corp-hero__title{
  font-family:var(--font-jp, "Cormorant Garamond", serif);
  font-size:var(--corp-hero);
  letter-spacing:var(--corp-track);
  line-height:1.40;
  margin:0 0 18px;
  color:var(--ink-strong);
}

.corp-hero__sub,
.corp-hero__since{
  font-family:var(--font-en, "Cinzel", serif);
  font-size:var(--corp-eyebrow);
  font-weight:500;
  letter-spacing:var(--corp-en-track);
  text-transform:uppercase;
  color:var(--ink-muted);
}

/* =====================================================
  Water Scroll
===================================================== */
.water-scroll{
  position:absolute;
  bottom:26px;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  user-select:none;
  color:var(--ink-muted);
}

/* ★文字消す */
.water-scroll__text{
  display:none;
}

.water-scroll__track{
  width:1px;
  height:56px;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,.02),
    rgba(0,0,0,.10),
    rgba(0,0,0,.03)
  );
  position:relative;
  overflow:hidden;
  opacity:.55; /* ★少し薄く */
}

.water-scroll__track::after{
  content:"";
  position:absolute;
  left:0;
  top:-40%;
  width:100%;
  height:40%;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
  animation:waterTrack 2.3s cubic-bezier(.22,1,.36,1) infinite;
  opacity:.38; /* ★薄く */
}

@keyframes waterTrack{
  0%{ transform:translateY(0); }
  100%{ transform:translateY(240%); }
}

.water-scroll__drop{
  width:5px;
  height:9px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), rgba(255,255,255,.28) 38%, rgba(0,0,0,.08) 74%, rgba(0,0,0,0) 100%);
  opacity:.68; /* ★薄く */
  animation:waterDrop 2.3s cubic-bezier(.18,1,.26,1) infinite;
  transform:translateY(-56px);
}

@keyframes waterDrop{
  0%  { transform:translateY(-56px); opacity:0; }
  16% { opacity:.72; }
  78% { opacity:.68; }
  100%{ transform:translateY(6px); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .corp-hero::before,
  .corp-hero__overlay::before,
  .corp-hero__overlay::after,
  .water-scroll__track::after,
  .water-scroll__drop{
    animation:none !important;
  }
}