/* ==========================================================
   aonagito.com 共通スタイル（ヘッダー／フッター／ページ遷移）
   ========================================================== */
:root{
  --c-ink:#22333d;
  --c-sub:#5f7480;
  --c-water:#3e8ca3;
  --c-water-soft:#a8d3de;
  --c-mist:#eef6f9;
  --c-line:#d9e8ee;
  --c-deep:#1c4a58;
}

/* ===== 共通ヘッダー ===== */
.gnav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(217,232,238,.6);
  font-family:"Zen Kaku Gothic New",sans-serif;
}
.gnav .logo{font-family:"Shippori Mincho",serif;font-weight:600;font-size:18px;letter-spacing:.14em;color:var(--c-ink);text-decoration:none}
.gnav ul{display:flex;gap:clamp(16px,3vw,32px);list-style:none;margin:0;padding:0}
.gnav ul a{font-size:13px;letter-spacing:.12em;color:var(--c-sub);text-decoration:none;transition:color .3s}
.gnav ul a:hover{color:var(--c-water)}
@media(max-width:560px){.gnav ul{gap:14px}.gnav ul a{font-size:12px}}

/* ===== 共通フッター：海 ===== */
.gfooter{
  position:relative;
  height:clamp(300px,36vw,440px);
  overflow:hidden;
  background:linear-gradient(180deg,#fdfefe 0%,var(--c-mist) 42%,#cfe6ee 100%);
  font-family:"Zen Kaku Gothic New",sans-serif;
}
.gfooter .fwave{position:absolute;left:0;width:200%;bottom:0;height:52%}
.gfooter .fw1{animation:gseadrift 30s linear infinite;opacity:.6}
.gfooter .fw2{animation:gseadrift 44s linear infinite reverse;opacity:.42;bottom:-10px}
.gfooter .fw3{animation:gseadrift 60s linear infinite;opacity:.3;bottom:-20px}
@keyframes gseadrift{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.gfooter .boat{
  position:absolute;
  bottom:calc(52% - 14px);
  left:0;width:74px;height:auto;
  animation:sail 46s linear infinite;
}
.gfooter .boat svg{display:block;width:100%;height:auto;animation:bob 5s ease-in-out infinite}
@keyframes sail{
  0%{transform:translateX(110vw)}
  100%{transform:translateX(-140px)}
}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%{transform:translateY(-6px) rotate(1.2deg)}
}
.gfooter .boat .sail{
  transform-origin:36px 44px;
  animation:sailsway 4.2s ease-in-out infinite;
}
@keyframes sailsway{
  0%,100%{transform:rotate(-3.5deg) skewX(-1.5deg)}
  50%{transform:rotate(3.5deg) skewX(1.5deg)}
}
.gfooter .fcredit{
  position:absolute;left:0;right:0;bottom:26px;
  text-align:center;z-index:5;
  font-size:12px;letter-spacing:.14em;color:var(--c-deep);
}
.gfooter .fcredit a{color:inherit;text-decoration:none}
.gfooter .flogo{
  position:absolute;left:0;right:0;top:clamp(48px,8vw,84px);
  text-align:center;
  font-family:"Shippori Mincho",serif;
  font-size:clamp(18px,2.4vw,24px);
  letter-spacing:.3em;color:var(--c-deep);
  opacity:.85;
}

/* ===== 凪のページ遷移 ===== */
/* 到着直後のチラつき防止：JS実行前から波色で覆う */
html.nagi-hold::before{
  content:"";position:fixed;inset:0;z-index:199;
  background:#cfe6ee;
}
.nagi-transition{position:fixed;inset:0;z-index:200;pointer-events:none;transform:translateY(100%)}
.nagi-transition .layer{position:absolute;left:-10%;width:120%;height:120%;bottom:-10%;border-radius:48% 52% 0 0 / 60px 80px 0 0;transform:translateY(110%)}
.nagi-transition .l1{background:#cfe6ee}
.nagi-transition .l2{background:#a8d3de;bottom:-16%}
.nagi-transition .l3{background:#eef6f9;bottom:-22%}
body.leaving .nagi-transition{transform:none;pointer-events:auto}
body.leaving .nagi-transition .l1{animation:nagirise .9s cubic-bezier(.6,.05,.2,1) both}
body.leaving .nagi-transition .l2{animation:nagirise .9s cubic-bezier(.6,.05,.2,1) .12s both}
body.leaving .nagi-transition .l3{animation:nagirise .9s cubic-bezier(.6,.05,.2,1) .24s both}
@keyframes nagirise{from{transform:translateY(110%)}to{transform:translateY(0)}}
body.arriving-init .nagi-transition{transform:none}
body.arriving-init .nagi-transition .layer{transform:translateY(0)}
body.arriving .nagi-transition{transform:none;pointer-events:none}
body.arriving .nagi-transition .l1{animation:nagileave 1.1s cubic-bezier(.4,0,.2,1) .1s both}
body.arriving .nagi-transition .l2{animation:nagileave 1.1s cubic-bezier(.4,0,.2,1) .22s both}
body.arriving .nagi-transition .l3{animation:nagileave 1.1s cubic-bezier(.4,0,.2,1) .34s both}
@keyframes nagileave{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-115%);opacity:.6}}
@media(prefers-reduced-motion:reduce){
  body.leaving .nagi-transition .layer,
  body.arriving .nagi-transition .layer{animation-duration:.01s !important;animation-delay:0s !important}
  .gfooter .fw1,.gfooter .fw2,.gfooter .fw3,.gfooter .boat,.gfooter .boat svg,.gfooter .boat .sail{animation:none}
  .gfooter .boat{left:auto;right:14%}
}