@charset "UTF-8";
/* ==========================================================================
   潮汐グラフ（立体表現版）
   style.css の「潮汐グラフ」ブロックの後ろに追記するか、
   このファイルを style.css の後ろで読み込んでください。

   色は hue-rotate(-5deg) saturate(1.4) を適用した値で確定させています。
   （元の色: #35bdf8 / #0f8fd8 / #0a5ea8 / 断面 #0a5488 / フチ #cdefff）
   ========================================================================== */

/* --------------------------------------------------------------------------
   レイヤー順
   1 …… 目盛線（既存 .p-catchTide__grid）／曲線グラフ
   2 …… 手前に重ねる目盛線
   3 …… 目盛ラベル
   -------------------------------------------------------------------------- */
.p-catchTide__graph {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 影。offset 0 のぼかしのみなので、輪郭がふわっと立ち上がる。
     SVG内の feGaussianBlur だと preserveAspectRatio="none" で横に潰れるため、
     CSSピクセル空間で効く drop-shadow を使う（blur 3px 相当 = radius 6px） */
  filter: drop-shadow(0 0 6px rgba(77, 101, 130, .45));
}

/* 面が不透明なので、水面下でも目盛線が見えるよう手前にもう1枚重ねる。
   テンプレートで .p-catchTide__levelScale の直前に、
   .p-catchTide__grid と同じ中身の div を
   class="p-catchTide__grid p-catchTide__grid--over" として置いてください。
   この div を置かない場合、目盛線は曲線の後ろだけになり水中では見えません */
.p-catchTide__grid--over {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.p-catchTide__grid--over .p-catchTide__gridLine {
  background: rgba(255, 255, 255, .3);
}

/* 目盛ラベルは水面の上に重ねる。
   水の上でも中でも読めるよう、白文字＋濃紺のチップにする */
.p-catchTide__levelScale {
  z-index: 3;
}

.p-catchTide__level {
  left: .6rem;
  padding: .1rem .9rem .2rem;
  color: #fff;
  background: rgba(8, 30, 56, .55);
  border-radius: .6rem;
  opacity: 1;
  text-shadow: none;
}

@media print, screen and (min-width: 744px) {
  .p-catchTide__level {
    padding-left: .9rem;
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 743px) {
  .p-catchTide__level {
    left: .4rem;
    padding: .1rem .7rem .2rem;
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------------------------------
   グラフ本体
   -------------------------------------------------------------------------- */
/* グラデーションの定義は共有の隠しSVG（body直下）に置くため、
   変数は :root に定義する。.c-tideGraph に置くと defs 側に届かない */
:root {
  /* 水の色 */
  --tg-water-light: #00cbff;   /* 下側 */
  --tg-water-mid: #009cf1;
  --tg-water-deep: #0067c1;    /* 水面側 */

  /* 厚みの帯 */
  --tg-cap: #4bd5fb;           /* 天面 */
  --tg-wall: #005c9a;          /* 断面 */
  --tg-glow: rgba(255, 255, 255, .34); /* 水面の光 */
  --tg-rim: #bff3ff;           /* 水面のフチ */

  /* 帯の太さ。ストロークは中心から両側に広がるので「見せたい深さ × 2」。
     天面 0px / 断面 3.5px / 水面の光 1px
     vector-effect: non-scaling-stroke により、この数値がそのまま画面px */
  --tg-cap-w: 0;               /* 0 × 2 */
  --tg-wall-w: 7;              /* (0 + 3.5) × 2 */
  --tg-glow-w: 9;              /* (0 + 3.5 + 1) × 2 */

  /* 下端の白さ */
  --tg-white-mid: .22;
  --tg-white-end: 1;
}

.c-tideGraph {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .2s linear, clip-path .9s cubic-bezier(.22, .61, .36, 1);
}

.c-tideGraph.is-shown {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

.c-tideGraph__svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 面 -------------------------------------------------------------------- */
.c-tideGraph__area { fill: url(#tg-bodyGrad); }
.c-tideGraph__whiteFade { fill: url(#tg-whiteFade); }

.c-tideGraph__waterLight { stop-color: var(--tg-water-light); }
.c-tideGraph__waterMid { stop-color: var(--tg-water-mid); }
.c-tideGraph__waterDeep { stop-color: var(--tg-water-deep); }

.c-tideGraph__white0 { stop-opacity: 0; }
.c-tideGraph__white1 { stop-opacity: var(--tg-white-mid); }
.c-tideGraph__white2 { stop-opacity: var(--tg-white-end); }

/* 厚みの帯と水面のフチ ---------------------------------------------------- */
.c-tideGraph__glow,
.c-tideGraph__wall,
.c-tideGraph__cap,
.c-tideGraph__rim {
  fill: none;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.c-tideGraph__glow {
  stroke: var(--tg-glow);
  stroke-width: var(--tg-glow-w);
}

.c-tideGraph__wall {
  stroke: var(--tg-wall);
  stroke-width: var(--tg-wall-w);
}

.c-tideGraph__cap {
  stroke: var(--tg-cap);
  stroke-width: var(--tg-cap-w);
}

.c-tideGraph__rim {
  stroke: var(--tg-rim);
  stroke-width: 1.4;
}

/* 共有defs用の隠しSVG ---------------------------------------------------- */
#tg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .c-tideGraph {
    transition: none;
  }
}