.section-boundary {
  position: relative;
  z-index: -1;
  width: 100vw;
  height: var(--section-boundary-height-desktop);
  margin-left: 50%;
  /* 下の区画への潜り込み（sink-below）。呼び出しごとの量は
     [data-boundary="id"]{--section-boundary-sink-below:…} で渡す（既定 0px、
     見え方は変わらない）。無単位の値が渡ると calc() が無効になり height/margin が
     壊れるので、渡す側は必ず px を付ける。 */
  /* 上の区画へ食い込む量。帯そのものが上へ動く（下の中身は動かない）。 */
  margin-top: calc(-1 * var(--section-boundary-rise-above, 0px));
  margin-bottom: calc(-1 * var(--section-boundary-sink-below, 0px));
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-50%);
  background: rgb(var(--section-boundary-color-above-rgb));
}

[data-behavior-boundaries="original"] .section-boundary {
  display: none;
}

.section-boundary__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgb(var(--section-boundary-color-rgb));
}

[data-behavior-boundary-intensity="background"] .section-boundary {
  --section-boundary-color-rgb: var(--section-boundary-background-rgb);
  --section-boundary-layer1-alpha: 0.9;
  --section-boundary-layer2-alpha: 0.54;
  --section-boundary-layer3-alpha: 0.27;
}

[data-behavior-boundary-intensity="brand-subtle"] {
  --section-boundary-color-rgb: var(--section-boundary-brand-rgb);
  --section-boundary-layer1-alpha: 0.1;
  --section-boundary-layer2-alpha: 0.06;
  --section-boundary-layer3-alpha: 0.03;
}

[data-behavior-boundary-intensity="text-subtle"] {
  --section-boundary-color-rgb: var(--section-boundary-text-rgb);
  --section-boundary-layer1-alpha: 0.12;
  --section-boundary-layer2-alpha: 0.072;
  --section-boundary-layer3-alpha: 0.036;
}

.section-boundary__layer--front {
  --section-boundary-layer-alpha: var(--section-boundary-layer1-alpha);
  transform: translate(0, 0);
}

.section-boundary__layer--back {
  --section-boundary-layer-alpha: var(--section-boundary-layer3-alpha);
  transform: translate(0, -1px);
}

.section-boundary__layer--middle {
  --section-boundary-layer-alpha: var(--section-boundary-layer2-alpha);
  transform: translate(0, 0);
}

.section-boundary--slant .section-boundary__layer--front {
  background: linear-gradient(to bottom, rgba(var(--section-boundary-color-rgb), var(--section-boundary-layer-alpha)) var(--section-boundary-layer-fade-start, 0%), rgba(var(--section-boundary-color-below-rgb), 1) calc(100% - 8px), rgba(var(--section-boundary-color-below-rgb), 1) 100%);
  clip-path: polygon(0 var(--section-boundary-slant-front-start), 100% var(--section-boundary-slant-front-end), 100% 100%, 0 100%);
}

.section-boundary--slant .section-boundary__layer--back {
  background: linear-gradient(to bottom, rgba(var(--section-boundary-color-rgb), var(--section-boundary-layer-alpha)) var(--section-boundary-layer-fade-start, 0%), rgba(var(--section-boundary-color-below-rgb), 1) calc(100% - 8px), rgba(var(--section-boundary-color-below-rgb), 1) 100%);
  clip-path: polygon(0 var(--section-boundary-slant-back-start), 100% var(--section-boundary-slant-back-end), 100% 100%, 0 100%);
}

.section-boundary--slant .section-boundary__layer--middle {
  background: linear-gradient(to bottom, rgba(var(--section-boundary-color-rgb), var(--section-boundary-layer-alpha)) var(--section-boundary-layer-fade-start, 0%), rgba(var(--section-boundary-color-below-rgb), 1) calc(100% - 8px), rgba(var(--section-boundary-color-below-rgb), 1) 100%);
  clip-path: polygon(0 var(--section-boundary-slant-middle-start), 100% var(--section-boundary-slant-middle-end), 100% 100%, 0 100%);
}

.section-boundary--slant.section-boundary--angle-62 {
  /* 呼び出しごとの振れ幅は calc() にしない。custom property を getComputedStyle で
     読むと calc() はブラウザが数値へ畳まずテキストのまま返る（2026-09-25 に実測、
     照合.mjs が「ちがい」を検出）。呼び出し側の値は tpl/layouts/Amoxi.astro が
     span からこの 6 値を数値計算した「結果」を .section-boundary[data-boundary="id"]
     （specificity 0,2,0 で本規則と同点、後勝ち）へ直接出す。ここは既定値のみ持つ。 */
  --section-boundary-slant-front-start: 66%;
  --section-boundary-slant-front-end: 34%;
  --section-boundary-slant-middle-start: 57%;
  --section-boundary-slant-middle-end: 25%;
  --section-boundary-slant-back-start: 48%;
  --section-boundary-slant-back-end: 16%;
}

.section-boundary--slant.section-boundary--dissolve-none .section-boundary__layer--back,
.section-boundary--slant.section-boundary--dissolve-none .section-boundary__layer--middle {
  display: none;
}

.section-boundary--slant.section-boundary--dissolve-none .section-boundary__layer--front {
  background: rgb(var(--section-boundary-color-below-rgb));
}

.section-boundary--arc svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
}

.section-boundary--arc .section-boundary__layer--front {
  --section-boundary-fade-start-alpha: var(--section-boundary-layer1-alpha);
}

.section-boundary--arc .section-boundary__layer--middle {
  --section-boundary-fade-start-alpha: var(--section-boundary-layer2-alpha);
}

.section-boundary--arc .section-boundary__layer--back {
  --section-boundary-fade-start-alpha: var(--section-boundary-layer3-alpha);
}

@media (max-width: 991px) {
  .section-boundary {
    height: var(--section-boundary-height-mobile);
    /* 省略時は sink-below と同値（呼び出しが狭い段の値を別に渡さなければ変わらない）。 */
    margin-top: calc(-1 * var(--section-boundary-rise-above-narrow, var(--section-boundary-rise-above, 0px)));
    margin-bottom: calc(-1 * var(--section-boundary-sink-below-narrow, var(--section-boundary-sink-below, 0px)));
  }
}

.section-boundary--wave svg {
  display: block;
  width: 200%;
  height: 100%;
  fill: none;
}

.section-boundary--wave .section-boundary__layer {
  animation: section-boundary-wave-slide 60s linear infinite;
  transform: translateX(0);
}

.section-boundary--wave .section-boundary__layer--front {
  --section-boundary-fade-start-alpha: var(--section-boundary-layer1-alpha);
  animation-delay: 0ms;
}

.section-boundary--wave .section-boundary__layer--middle {
  --section-boundary-fade-start-alpha: var(--section-boundary-layer2-alpha);
  animation-delay: -20000ms;
}

.section-boundary--wave .section-boundary__layer--back {
  --section-boundary-fade-start-alpha: var(--section-boundary-layer3-alpha);
  animation-delay: -40000ms;
}

@keyframes section-boundary-wave-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

[data-behavior-boundary-accent="front"] .section-boundary__layer--front,
[data-behavior-boundary-accent="middle"] .section-boundary__layer--middle,
[data-behavior-boundary-accent="back"] .section-boundary__layer--back {
  --section-boundary-color-rgb: var(--section-boundary-accent-rgb);
  --section-boundary-layer-alpha: var(--section-boundary-accent-alpha);
  --section-boundary-fade-start-alpha: var(--section-boundary-accent-alpha);
}

[data-behavior-boundary-accent-strength="subtle"] {
  --section-boundary-accent-alpha: 0.24;
}

[data-behavior-boundary-accent-strength="medium"] {
  --section-boundary-accent-alpha: 0.42;
}

@media (prefers-reduced-motion: reduce) {
  .section-boundary--wave .section-boundary__layer {
    animation: none;
  }
}

/* 段を重ねる並べ方。**層の中は単色**にし、濃さの変化は層と層のあいだだけで起こす
   （ユーザー指示 2026-09-25「各層のなかでグラデするんじゃねーよ」）。
   層の中でグラデーションを掛けると、三層あっても一枚の滑らかな面に見える。

   段は上下を切ったリボンなので重ならない。よって半透明のままでよく、濃さが
   足し算になることもない。透かすのは、継ぎ目を区画の上へ重ねたときに下の写真や
   文字が見えるようにするため（ユーザー指摘「HEROセクションが隠れてない」——
   不透明にしていたとき、帯が写真を覆って写真がそこで切れて見えた）。 */
.section-boundary--slant[data-boundary-stack="stepped"] .section-boundary__layer--front,
.section-boundary--slant[data-boundary-stack="stepped"] .section-boundary__layer--middle,
.section-boundary--slant[data-boundary-stack="stepped"] .section-boundary__layer--back {
  background: rgba(var(--section-boundary-color-rgb), var(--section-boundary-layer-alpha));
}

/* 段を「上下とも弧のリボン」にする（ユーザー指示 2026-09-25「全体を曲線（上弦の
   月みたいな、ゆるやかな円弧）に」「上弦だからね」「Dviderの下部が直線になるのもだめ」）。
   上弦は弦（直線）が上で弧が下に膨らむ形なので、線は下へ凹む。中央がいちばん深く、
   両端で元の高さに戻る。上端も下端も同じ弧で、あいだの厚みが一定のリボンになる。
   全段が同じ曲線で、段ごとに始まりの高さが違うだけ。
   曲線は 9 点の折れ線で近似する（半波長の余弦。% 指定なので幅に追随する）。 */
.section-boundary--slant[data-boundary-curve="arc"] .section-boundary__layer--front {
  clip-path: polygon(
    0% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-arc-depth, 6%) * 0),
    12.5% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-arc-depth, 6%) * 0.146),
    25% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-arc-depth, 6%) * 0.5),
    37.5% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-arc-depth, 6%) * 0.854),
    50% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-arc-depth, 6%) * 1),
    62.5% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-arc-depth, 6%) * 0.854),
    75% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-arc-depth, 6%) * 0.5),
    87.5% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-arc-depth, 6%) * 0.146),
    100% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-arc-depth, 6%) * 0),
    100% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0),
    87.5% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.146),
    75% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.5),
    62.5% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.854),
    50% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 1),
    37.5% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.854),
    25% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.5),
    12.5% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.146),
    0% calc(var(--section-boundary-slant-front-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0)
  );
}

.section-boundary--slant[data-boundary-curve="arc"] .section-boundary__layer--middle {
  clip-path: polygon(
    0% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-arc-depth, 6%) * 0),
    12.5% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-arc-depth, 6%) * 0.146),
    25% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-arc-depth, 6%) * 0.5),
    37.5% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-arc-depth, 6%) * 0.854),
    50% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-arc-depth, 6%) * 1),
    62.5% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-arc-depth, 6%) * 0.854),
    75% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-arc-depth, 6%) * 0.5),
    87.5% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-arc-depth, 6%) * 0.146),
    100% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-arc-depth, 6%) * 0),
    100% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0),
    87.5% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.146),
    75% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.5),
    62.5% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.854),
    50% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 1),
    37.5% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.854),
    25% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.5),
    12.5% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.146),
    0% calc(var(--section-boundary-slant-middle-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0)
  );
}

.section-boundary--slant[data-boundary-curve="arc"] .section-boundary__layer--back {
  clip-path: polygon(
    0% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-arc-depth, 6%) * 0),
    12.5% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-arc-depth, 6%) * 0.146),
    25% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-arc-depth, 6%) * 0.5),
    37.5% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-arc-depth, 6%) * 0.854),
    50% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-arc-depth, 6%) * 1),
    62.5% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-arc-depth, 6%) * 0.854),
    75% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-arc-depth, 6%) * 0.5),
    87.5% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-arc-depth, 6%) * 0.146),
    100% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-arc-depth, 6%) * 0),
    100% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0),
    87.5% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.146),
    75% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.5),
    62.5% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.854),
    50% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 1),
    37.5% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.854),
    25% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.5),
    12.5% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0.146),
    0% calc(var(--section-boundary-slant-back-start) + var(--section-boundary-band-thickness, 32%) + var(--section-boundary-arc-depth, 6%) * 0)
  );
}