/* ==================================================
   Blocks layout helper (Canopus)
   - Gutenberg align / Fullwide を最小CSSで安定化
================================================== */

/* ==================================================
   Align controls inside entry content
================================================== */

/* 記事幅（デフォルト） */
.cp-entry__content > :where(:not(.alignwide):not(.alignfull)),
.entry__content  > :where(:not(.alignwide):not(.alignfull)){
  max-width: var(--wp--style--global--content-size, 720px);
  margin-inline: auto;
}

/* 幅広（wide） */
.cp-entry__content > :where(.alignwide),
.entry__content  > :where(.alignwide){
  max-width: var(--wp--style--global--wide-size, 1200px);
  margin-inline: auto;
}

/* 全幅（dvw優先 → vwフォールバック） */
.cp-entry__content > :where(.alignfull),
.entry__content  > :where(.alignfull){
  max-width: none;
  width: 100dvw;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);
}

@supports not (width: 100dvw){
  .cp-entry__content > :where(.alignfull),
  .entry__content  > :where(.alignfull){
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

/* 2カラム時：本文カラムからはみ出させない（PC） */
.layout-two-column .site-main .cp-entry__content > :where(.alignfull),
.layout-two-column .site-main .entry__content  > :where(.alignfull){
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}


/* ==================================================
   Canopus Fullwide Block
================================================== */

.wp-block-canopus-fullwide{
  position: relative;
  isolation: isolate; /* 重ねた時のレイヤー事故を減らす */

  /* overflow: clip が使える環境は clip、だめなら hidden */
  overflow: clip;

  width: 100dvw;
  max-width: none;
  margin-left: calc(50% - 50dvw);
  margin-right: calc(50% - 50dvw);

  /* 上下margin（デフォルト0） */
  margin-top: var(--cp-mar-pc, 0px);
  margin-bottom: var(--cp-mar-pc, 0px);

  /* テキスト色（既存維持） */
  color: var(--cp-fw-text, inherit);

  /* 白帯（固定/パララックス時）の防止に使う “余裕” */
  --cp-fw-overscan: 240px; /* 必要なら 200〜320 程度で調整 */
  --cp-fw-scale: 1.06;

  /* 背景レイヤー制御 */
  --cp-fw-bg-color: #f5f5f5;     /* 背景色のデフォルト */
  --cp-fw-bg-opacity: 1;         /* 背景(画像/動画/色)だけの不透明度 */
  --cp-fw-overlay-opacity: 1;    /* overlayだけの不透明度 */

  /* ブロック本体は塗らない（透過できるように） */
  background: transparent;
}

@supports not (width: 100dvw){
  .wp-block-canopus-fullwide{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@supports not (overflow: clip){
  .wp-block-canopus-fullwide{ overflow: hidden; }
}

/* SP：上下margin */
@media (max-width: 782px){
  .wp-block-canopus-fullwide{
    margin-top: var(--cp-mar-sp, 0px);
    margin-bottom: var(--cp-mar-sp, 0px);
  }
}


/* ==================================================
   Background layer: Image + Color (::before)
================================================== */

.wp-block-canopus-fullwide::before{
  content: "";
  position: absolute;

  top: calc(-1 * var(--cp-fw-overscan, 240px));
  bottom: calc(-1 * var(--cp-fw-overscan, 240px));
  left: 0;
  right: 0;

  /* 背景色 */
  background-color: var(--cp-fw-bg-color, #f5f5f5);

  /* 背景画像（未設定ならnone） */
  background-image: var(--cp-fw-bg-image, none);
  background-size: cover;
  background-repeat: no-repeat;

  /* 焦点（中心がデフォルト） */
  background-position:
    var(--cp-fw-bg-pos-x, 50%)
    var(--cp-fw-bg-pos-y, 50%);

  /* 固定背景（指定時だけ） */
  background-attachment: var(--cp-fw-bg-attach, scroll);

  /* blur */
  filter: blur(var(--cp-fw-bg-blur, 0px));

  /* 疑似固定/パララックス（JSが更新） */
  transform: translate3d(0, var(--cp-fw-bg-translate, 0px), 0)
             scale(var(--cp-fw-scale, 1.06));
  will-change: transform;

  /* 背景だけ透明化 */
  opacity: var(--cp-fw-bg-opacity, 1);

  z-index: 0;
  pointer-events: none;
}

/* パララックスON（CSSだけでも最低限 “ONっぽい”） */
.wp-block-canopus-fullwide.is-bg-parallax::before{
  background-attachment: fixed;
}


/* ==================================================
   Background layer: Video (.cp-fw-video-wrap / .cp-fw-video)
================================================== */

.wp-block-canopus-fullwide .cp-fw-video-wrap{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;

  /* 動画も背景レイヤーとして不透明度を統一 */
  opacity: var(--cp-fw-bg-opacity, 1);
}

.wp-block-canopus-fullwide .cp-fw-video{
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 焦点 */
  object-position:
    var(--cp-fw-bg-pos-x, 50%)
    var(--cp-fw-bg-pos-y, 50%);

  /* blur */
  filter: blur(var(--cp-fw-bg-blur, 0px));

  /* blur端の欠け保険 */
  transform: scale(var(--cp-fw-scale, 1.06));
}


/* ==================================================
   Background layer: Overlay color (::after)
================================================== */

.wp-block-canopus-fullwide::after{
  content: "";
  position: absolute;
  inset: 0;

  background: var(--cp-fw-bg-overlay, transparent);
  opacity: var(--cp-fw-overlay-opacity, 1);

  z-index: 1;
  pointer-events: none;
}


/* ==================================================
   Inner (content area)
================================================== */

.wp-block-canopus-fullwide .canopus-fullwide__inner{
  position: relative;
  z-index: 2;

  margin-inline: auto;
  width: 100%;

  padding-inline: 1rem;
  padding-block: var(--cp-pad-pc, 60px);

  background: transparent;

  /* PADDING=0時の margin相殺を止める */
  display: flow-root;
}

/* SP padding */
@media (max-width: 782px){
  .wp-block-canopus-fullwide .canopus-fullwide__inner{
    padding-block: var(--cp-pad-sp, 40px);
  }
}

/* 中身の幅（contentSize） */
.wp-block-canopus-fullwide.is-content-article .canopus-fullwide__inner{
  max-width: var(--wp--style--global--content-size, 720px);
}
.wp-block-canopus-fullwide.is-content-wide .canopus-fullwide__inner{
  max-width: var(--wp--style--global--wide-size, 1200px);
}
.wp-block-canopus-fullwide.is-content-full .canopus-fullwide__inner{
  max-width: none;
}

/* full の「フル」は左右paddingゼロ（完全フル幅） */
.wp-block-canopus-fullwide.is-content-full .canopus-fullwide__inner{
  padding-inline: 0 !important;
}

/* 先頭/末尾マージンを潰して “PADDING=0でも空く” を止める */
.wp-block-canopus-fullwide .canopus-fullwide__inner > :first-child{ margin-top: 0 !important; }
.wp-block-canopus-fullwide .canopus-fullwide__inner > :last-child { margin-bottom: 0 !important; }


/* 2カラム時：本文カラムからはみ出させない（PC） */
.layout-two-column .site-main .wp-block-canopus-fullwide{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}


/* ==================================================
   Editor only（管理画面）
================================================== */

.editor-styles-wrapper .wp-block-canopus-fullwide{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.editor-styles-wrapper :where(.alignfull){
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.editor-styles-wrapper :where(.alignwide){
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.block-editor-writing-flow{ overflow-x: hidden; }

.editor-styles-wrapper .wp-block-canopus-fullwide.is-selected .canopus-fullwide__inner,
.editor-styles-wrapper .wp-block-canopus-fullwide.has-child-selected .canopus-fullwide__inner{
  outline: 1px dashed rgba(0, 0, 0, 0.18);
  outline-offset: 4px;
}


/* ==================================================
   (1) SP時：2カラム扱いでも「全幅系」を画面いっぱいに戻す
================================================== */

@media (max-width: 960px){
  body.layout-two-column .site-main .cp-entry__content > :where(.alignfull),
  body.layout-two-column .site-main .entry__content  > :where(.alignfull){
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }

  body.layout-two-column .site-main .wp-block-canopus-fullwide{
    width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }

  @supports not (width: 100dvw){
    body.layout-two-column .site-main .cp-entry__content > :where(.alignfull),
    body.layout-two-column .site-main .entry__content  > :where(.alignfull),
    body.layout-two-column .site-main .wp-block-canopus-fullwide{
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }
  }
}


/* ==================================================
   canopus/fullwide：rounded-corner_blur_white_box
================================================== */

/* 外側に “セクション余白” を移す */
.wp-block-canopus-fullwide.rounded-corner_blur_white_box{
  padding-block: var(--cp-pad-pc, 30px);
  padding-inline: 1rem;
}

@media (max-width: 782px){
  .wp-block-canopus-fullwide.rounded-corner_blur_white_box{
    padding-block: var(--cp-pad-sp, 10px);
  }
}

/* inner：カード化（セクション余白は外側に移したので inner の上下は0） */
.wp-block-canopus-fullwide.rounded-corner_blur_white_box .canopus-fullwide__inner{
  padding: var(--cp-card-pad, 45px) !important;

  border-radius: 24px;
  border: 3px solid rgba(255, 255, 255, 0.85);
  overflow: hidden;
  position: relative;

  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: flow-root;
}

@media (max-width: 782px){
  .wp-block-canopus-fullwide.rounded-corner_blur_white_box .canopus-fullwide__inner{
    padding: var(--cp-card-pad, 15px) !important;
  }
}

/* カード内の中身を前面へ */
.wp-block-canopus-fullwide.rounded-corner_blur_white_box .canopus-fullwide__inner > *{
  position: relative;
  z-index: 1;
}

/* ⚠️ 元の「h2 padding-top:50px」はスコープが広いので、対象をこのブロック内に限定 */
@media (max-width: 782px){
  .wp-block-canopus-fullwide.rounded-corner_blur_white_box .canopus-fullwide__inner h2{
    padding-top: 50px;
  }
}


/* ==================================================
   Fade Up On Scroll (Canopus)
================================================== */

.fade-up-on-scroll{
  opacity: 0;
  transform: translate3d(0, 48px, 0) scale(0.992);
  transition:
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.fade-up-on-scroll.is-visible{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.wp-block-heading.fade-up-on-scroll{ letter-spacing: 0.02em; }

img.fade-up-on-scroll{
  transform: translate3d(0, 56px, 0) scale(0.985);
  transition-duration: 1.15s;
}

/* 既存ユーティリティ */
.height-100vh{ min-height: 100vh; }


/* ==================================================
   rounded-corner の “カード自体を遅延でふわっ” と表示（fade-upと分離）
   - JS側が cp-box-visible を付けた時だけ発火
================================================== */

.wp-block-canopus-fullwide.rounded-corner_blur_white_box .canopus-fullwide__inner{
  opacity: 0;
  transform: translate3d(0, 34px, 0);
  transition:
    opacity 1.0s cubic-bezier(.22,.8,.2,1),
    transform 1.0s cubic-bezier(.22,.8,.2,1);
  transition-delay: .5s;
  will-change: opacity, transform;
}

.wp-block-canopus-fullwide.rounded-corner_blur_white_box.cp-box-visible .canopus-fullwide__inner{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ==================================================
   Front-only animations guard (Editor safety)
================================================== */

.editor-styles-wrapper .fade-up-on-scroll{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

.editor-styles-wrapper img.fade-up-on-scroll{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* rounded-corner_blur_white_box の inner 遅延表示もエディタでは無効 */
.editor-styles-wrapper .wp-block-canopus-fullwide.rounded-corner_blur_white_box .canopus-fullwide__inner{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}


/* ==================================================
   FIX: nested fullwide should be transparent by default
================================================== */

/* 1) 親フルワイド内にある “子フルワイド” はデフォ背景を塗らない */
.wp-block-canopus-fullwide .wp-block-canopus-fullwide{
  --cp-fw-bg-color: transparent;
}

/* 2) 子が “背景カスタムあり” なら、透明化を解除（従来意図を維持） */
.wp-block-canopus-fullwide .wp-block-canopus-fullwide.has-cp-custom-bg{
  --cp-fw-bg-color: #f5f5f5;
}

/* 3) 念のため：子の inner も透明を維持 */
.wp-block-canopus-fullwide .wp-block-canopus-fullwide .canopus-fullwide__inner{
  background: transparent;
}


/* ----------------------------------------------------------
   4) Scroll Indicator（スクロールマーク）
---------------------------------------------------------- */

.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 5;
}

.scroll-indicator::before {
  content: "";
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: #fff;
  animation: scroll-indicator-dot 1.3s infinite ease-in-out;
}

.scroll-indicator::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  width: 12px;
  height: 12px;
  border-bottom: 1.5px solid rgba(255,255,255,0.6);
  border-right: 1.5px solid rgba(255,255,255,0.6);
  transform: translateX(-50%) rotate(45deg);
}

.scroll-indicator:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}

@keyframes scroll-indicator-dot {
  0%   { transform: translateY(0);  opacity: 1; }
  60%  { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0);  opacity: 0; }
}

/* スマホでテキストと重ならないように調整 */
@media (max-width: 768px) {
  .scroll-indicator {
    bottom: 5vh;
    transform: translateX(-50%) scale(0.9);
  }

  .section--hero .section__inner {
    padding-bottom: 120px;  /* マークぶんの余裕 */
  }
}