/* ======================
   HERO clouds (responsive)
   ====================== */

/* ベース変数（お好みで） */
:root{
  --cloud-dur: 1.2s;                 /* 1枚の標準アニメ時間 */
  --cloud-stagger: .15s;             /* ずらし間隔 */
  --cloud-ease: cubic-bezier(.22,1,.36,1);
  --tempo: 1;                         /* 全体のスピード倍率（大きいほどゆっくり） */
  --logo-extra: .3s;                  /* ロゴ表示に足す余裕時間 */
}
/* ヒーロー本体 */
.hero{
  position: relative;
  overflow: hidden;
  padding-top: 4.64em;
  min-height: var(--hero-min-h);
}

/* 好みで調整：1=今と同じ、0.9=ちょい引き、0.85=さらに引く */
:root{ --sky-zoom: .92; }

/* 空のグラデ＋テクスチャ画像（上に薄く） */
.hero .sky{
  position:absolute;
  inset:0;
  background: linear-gradient(180deg,#dfeef8 0%, #ffffff 80%);
  z-index:0;
  isolation:isolate;
}
.hero .sky::after{
  content:"";
  --hero-bg-opacity: .55;             /* ← 画像の濃さ（0〜1で調整） */
  position:absolute;
  inset:0; 
  inset: -5%;
  pointer-events:none;
  background-image: url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/top-hero-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;

  /* 縮小して“引く” */
  transform: scale(var(--sky-zoom));
  transform-origin: center;

}
@media (max-width: 640px){
  .hero .sky::after{ background-position: 60% center; }
}

/* 親のスケールは水平と幅だけ調整。縦（--y）は触らない */
.cloud-seq{
  position:absolute;
  inset:0; 
  z-index:10; 
  pointer-events:none;
  --x-scale: 1;  /* startX / endX に掛ける */
  --w-scale: 1;  /* 幅（--w）倍率 */
  /* 任意の全体縦オフセット（vh/px） */
  --y-offset: 0vh;
}

/* 個々の雲 */
.cloud{
  position:absolute;
  left:50%;
  top:50%;

  /* 水平はこれまで通り（vwスケールOK） */
  --startX-r: calc(var(--startX, 0vw) * var(--x-scale, 1));
  --endX-r:   calc(var(--endX, 140vw) * var(--x-scale, 1));
  --w-r:      calc(var(--w, 70vw)     * var(--w-scale, 1));

  /* ▼ 縦位置は “固定値” をそのまま使う（vwを使わない） */
  /*   - まずモバイル上書き用の --yM があれば最優先
       - なければ --y を使用（単位は vh か px 推奨）       */
  --y-base: var(--yM, var(--y, 0vh));
  /* 任意の全体オフセット（px/vhどちらでもOK） */
  --y-offset: 0vh;

  /* ← y はスケールを掛けずそのまま（+任意オフセット） */
  --y-r: calc(var(--y-base) + var(--y-offset));

  width: clamp(240px, var(--w-r), 1200px);
  height:auto; display:block;

  transform: translate(
      calc(-50% + var(--startX-r)),
      calc(-50% + var(--y-r))
  ) scale(var(--scale, 1));

  opacity: 0;
  filter: drop-shadow(0 18px 44px rgba(2,6,23,.16));
  will-change: transform, opacity;
  animation: cloudMove calc(var(--dur, var(--cloud-dur)) * var(--tempo))
                     var(--cloud-ease) forwards;
  animation-delay: calc((var(--delay, 0s) + var(--order, 0) * var(--cloud-stagger))
                        * var(--tempo));
}

.cloud img{ height:auto; display:block; }

/* 進路・透明度だけをパラメタ化した汎用キーフレーム */
@keyframes cloudMove{
  0%{
    opacity: var(--opacityFrom, 1);
    transform: translate(calc(-50% + var(--startX-r)),
                         calc(-50% + var(--y-r))) scale(var(--scale, 1));
  }
  60%{ opacity: var(--opacityMid, 1); }
  100%{
    opacity: var(--opacityTo, 0);
    transform: translate(calc(-50% + var(--endX-r)),
                         calc(-50% + var(--y-r))) scale(var(--scaleEnd, var(--scale, 1)));
  }
}



/* ===== Breakpoints（倍率だけ調整） ===== */

/* ~ 1200px：少しコンパクトに */
@media (max-width: 1200px){
  .cloud-seq{
    --x-scale: .92;
    --w-scale: .92;
    /*--y-scale: 1;*/
  }
}

/* ~ 960px：さらに縮小＆ゆっくり */
@media (max-width: 960px){
  :root{
    --hero-min-h: 80vh;
    --tempo: 1.1;
  }
  .cloud-seq{
    --x-scale: .84;
    --w-scale: .86;
    /*--y-scale: .94;*/
  }
}

/* ~ 640px（スマホ）：大きく縮めて縦も少し詰める */
@media (max-width: 640px){
  :root{
    --hero-min-h: 72vh;
    --tempo: 1.2;
    --cloud-stagger: .18s;
  }
  .cloud-seq{
    --x-scale: .74;
    --w-scale: .76;
    /*--y-scale: .88;*/
  }

}

/* ==== crown01 / crown02 を“少し上”へ（PC） ==== */
.cloud-seq .cloud[src$="/clouds/crown01.png"]{ --yM: -38vh; } /* 元 -30vh → -34vh */
.cloud-seq .cloud[src$="/clouds/crown02.png"]{ --yM: -46vh; } /* 元 -40vh → -46vh */

/* スマホだけ ほんの少しだけ下げるなら（任意） */
@media (max-width: 640px){
  .cloud-seq .cloud[src$="/clouds/crown01.png"]{ --yM: -30vh; }
  .cloud-seq .cloud[src$="/clouds/crown02.png"]{ --yM: -40vh; }
}
/* 省電力設定なら即表示（アニメ無効） */
@media (prefers-reduced-motion: reduce){
  .cloud{ animation:none!important; opacity:0!important; }
}




/* ====== 共通：調整しやすい変数 ====== */
:root{

  --logo-min: 200px;
  --logo-max: 500px;      /* 余裕を少し増やす */
  --logo-top: 45%;

  /* 全体スケールだけ上げる（0.94 ≒ +15%） */
  --logo-scale: .94;

  /* 段階固定の基準幅 */
  --logo-base: 450px;     /* ≥1281px */
  --logo-size: calc(var(--logo-base) * var(--logo-scale));
}
/* 〜1280px：少し大きめに、位置ほんの少しだけ下げる */
@media (max-width: 1280px){
  :root{
    --logo-w: 30vw;
    --logo-max: 480px;
    /*--logo-top: 44%;*/
    --blow-x: 88vw;   /* 雲の横流れを少し大きく */
    --blow-y: 12vh;   /* 縦の持ち上がりを少し弱く */
    --logo-base: 450px;
    --logo-top: 46%;
  }
}

/* 〜1024px（タブレット横〜小さめPC） */
@media (max-width: 1024px){
  :root{
    --logo-w: 36vw;
    --logo-max: 440px;
    --logo-base: 410px;    /* ← 340px → 360px */
    --logo-top: 46%;
    --blow-x: 94vw;
    --blow-y: 11vh;
  }
}

/* 〜768px（タブレット縦・大きめスマホ） */
@media (max-width: 768px){
  :root{
    /*--logo-min: 220px;*/
    --logo-min: 220px;
    --logo-w:   56vw;
    --logo-max: 420px;
    --logo-base: 370px;    /* ← 300px → 320px */
    --logo-top: 48%;
    --blow-x: 100vw;
    --blow-y: 10vh;
  }
}

/* 〜480px（スマホ） */
@media (max-width: 480px){
  :root{
    --logo-min: 200px;
    --logo-w: 80vw;
    --logo-max: 360px;
    --logo-base: 340px;    /* ← 260px → 290px */
    --logo-top: 52%;
    --blow-x: 106vw;  /* 端末が狭いので少し多めに流す */
    --blow-y: 8vh;
  }
}





/* 右上方向へ流れて消える（変数でレスポンシブ制御） */
@keyframes blowAway{
  from{ opacity:1; transform: translate(var(--x), var(--y)) scale(var(--s)); }
  to  { opacity:0; transform: translate(calc(var(--x) + var(--blow-x)),
                                        calc(var(--y) - var(--blow-y)))
                   scale(calc(var(--s) * 1.05)); }
}

/* 追加：ロゴの登場所要時間を変数に */
:root{
  --logo-in-dur: 1.2s;  /* ← お好みで 1.4–2.2s あたり */
  --logo-in-dur: 1.6s;   /* ← ゆっくりにするなら 1.6〜2.2s あたり */
  --logo-extra: .8s;        /* 雲が晴れた後の余裕も少し長めに */
  --logo-extra: .8s;     /* 雲の後に少しタメ */
}

/* ====== ロゴ（画像） ====== */
.hero__logo{
  position:absolute;
  left:50%;
  top: var(--logo-top);
  transform: translate(-50%,-50%);
  z-index:11;
  /*width: clamp(var(--logo-min), var(--logo-w), var(--logo-max));*/
  /*width: clamp(var(--logo-min), var(--logo-size), var(--logo-max));*/
  width: clamp(var(--logo-min), var(--logo-size), var(--logo-max));
  display:grid; 
  place-items:center; 
  margin:0; 
  opacity:0;
  animation: logoFade var(--logo-in-dur) var(--cloud-ease) forwards;
  animation-delay: calc(
    (var(--cloud-dur) + 5 * var(--cloud-stagger)) * var(--tempo, 1)
    + var(--logo-extra)
  );
}

/* 2枚を同じ位置に重ねる */
.hero__logo > img{
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;

  height: auto;          /* ← 縦横比は常に維持 */
  /* （任意）にじみ防止 */
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
  transform: translateZ(0);

}

/* 下：紙テクスチャ（背景とロゴの“間”に来る） */
.hero__plate{ z-index: 0; }

/* 上：ロゴ本体（最前面） */
.hero__mark{  z-index: 1; }

/* ロゴのフェードイン */
@keyframes logoFade{
  from{ opacity:0; transform: translate(-50%,-52%) scale(.96); }
  to  { opacity:1; transform: translate(-50%,-50%)  scale(1);   }
}

/* 省電力設定なら即表示（アニメ無効） */
@media (prefers-reduced-motion: reduce){
  .hero__logo{ opacity:1; transform: translate(-50%,-50%) scale(1); }
}


/* 波 SVG 本体 */
.hero-wave{
  position: absolute;
  left: 0; 
  right: 0; 
  bottom: -60px; /* 1pxだけ重ねて段差防止 */
  width: 100%;
  height: var(--wave-h);
  display: block;
  z-index: 7;         /* 波を手前に */
  pointer-events: none;
  filter: drop-shadow(0 -6px 16px rgba(2,6,23,.06)); /* ほんのり陰影（任意） */
}




/* ===== News ===== */
/* セクションの上下余白（上は見出し用、下は雲が入る分やや多め） */
.news{
  padding-top: clamp(64px, 5vw, 64px);
  position: relative;
  background-color: #F5F5EB;
  padding: clamp(48px, 8vw, 96px) 16px;
  padding-bottom: clamp(88px, 10vw, 160px);
  z-index: 10; 
  z-index: auto !important;  /* 以前付けた z-index を無効化 */
  overflow: visible;
}

/* 共通：雲レイヤーのベース */
.news-clouds{
  position: absolute;
  inset: 0;
  pointer-events: none;
  position: absolute; 
  z-index: 10;
}

/* 背面（下の雲）は横スク切り＆背面に固定 */
.news-clouds--back{
  z-index: 1;
  overflow: hidden;           /* 横スクロール対策 */
}

/* 前面（上の雲）はコンテンツより前に出し、上にはみ出せるようにする */
.news-clouds--top{
  z-index: 3;                 /* コンテンツより前面 */
  overflow: visible;          /* セクション上へはみ出して表示 */
}

/* News の雲：横スクロール等の動きを全停止（静止表示） */
.news .cloud-sprite{
  position: absolute;
  opacity: .95;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.05));
  transform: translate3d(var(--dx, 0), var(--dy, 0), 0);
  will-change: transform;
  transition: transform .06s linear; /* 少し補間してカクつき防止 */
  animation: none !important;
  --tx: 0px !important;
}

/* 上側の初期位置（はみ出し見せたいので少し上から） */
.cloud-l1{ top: -80px; left:  -7em; width: 540px; height:auto; }
.cloud-l2{ top:   5px; left: -7em; width: 420px; height:auto; }
.cloud-r1{ top: -115px; right: -7em; width: 560px; height:auto; }

/* 下側の初期位置（背面のまま） */
.cloud-b1{ bottom:-18px; left: -60px;  width:520px;  height:auto; right:auto; }
.cloud-b2{ bottom:-36px; left:-180px;  width:520px;  height:auto; right:auto; }
.cloud-b3{ bottom:-22px; left:   40px;  width:600px;  height:auto; right:auto; }
.cloud-b4{ bottom:-24px; right:-110px; width:560px;  height:auto; left:auto; }
.cloud-b5{ bottom:-10px; right:  80px; width:380px;  height:auto; left:auto; }

@media (max-width: 640px){
  .cloud-r1{ right: -80px; width: 440px; }
  .cloud-l2{ left: -120px; width: 340px; }
  .cloud-r1{ right:-80px; width:440px; }
  .cloud-b1{ left:-40px;  width:380px; }
  .cloud-b2{ left:-120px; width:420px; }
  .cloud-b3{ left:0;     width:420px; }
  .cloud-b4{ right:-60px; width:420px; }
  .cloud-b5{ right:20px;  width:300px; }  
}

/* コンテンツは中面（雲：背面＜コンテンツ＜前面） */
.news__wrap{
  width: 100%;
  max-width: 1080px !important;
  margin-inline: auto !important;
  position: relative;
  /*z-index: 2;*/
  z-index: 30; 
  margin-top: 2em;
  position:relative; 
  z-index:1;
  z-index: 2;
  z-index: 30;
}

.news__header{ 
  text-align:center; 
  margin-bottom: 18px; 
}
.news__title{
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 800;
  color: var(--link-hover, #0ea5e9);
  letter-spacing:.02em;
  margin: 0 0 4px;

  font-family: "Lunasima", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #0071BC;

}
.news__subtitle{
  margin:0; 
  font-size: 12px; 
  opacity:.7; 
  letter-spacing:.18em;
  font-family: 'Gothic A1', sans-serif;
}

/* カード */
.news-card{
  background:#fff;
  border:1px solid rgba(2,6,23,.08);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
  padding: clamp(8px, 2vw, 14px);
  width:100%;
}
.news-card{ width: 100%; }

.news-list{ 
  list-style:none; 
  margin:0; 
  padding:0; 
}
.news-item{
  display:grid;
  grid-template-columns: 128px 1fr;
  gap: 18px;
  padding: 16px 12px;
  border-top: 1px solid rgba(2,6,23,.06);
}
.news-item:first-child{ border-top:0; }

/* 日付／本文 */
.news-date{
  font-weight:800;
  color: #0071BC; /* 適度な青。必要なら var(--link-hover) に変更可 */
  font-size: 13px;
  letter-spacing:.02em;
  align-self: flex-start;
}
.news-body{ min-width:0; }
.news-title{
  color:#0f172a; 
  text-decoration:none; 
  font-weight:800;
  display:inline-block;
}
.news-title:hover{ 
  /*color: var(--link-hover, #0ea5e9); */
}
.news-excerpt{
  margin:.35em 0 0; 
  font-size: 12px; 
  opacity:.82; 
  line-height:1.6;
  display:-webkit-box; 
  -webkit-line-clamp:2; 
  -webkit-box-orient:vertical; 
  overflow:hidden;
}


@media (prefers-reduced-motion: reduce){
  .news .cloud-sprite{ will-change: auto; }
}




/* ============ Purpose / Banner 基本 ============ */

/* Purpose 一帯をレイヤ化して雲を背景としてはみ出しを隠す */
.purpose{
  position: relative;
  padding: clamp(52px, 8vw, 96px) 16px; /* 既存の余白があればそのままでOK */
  background: #F5F5EB;
  z-index: auto !important;
  overflow: visible;
}
.purpose-clouds{
  position: absolute;
  inset: 0;
  inset: -120px 0 auto;
  z-index: 20;
  pointer-events: none;
}

/* clamp の順序修正 */
.purpose-clouds .pb1 { top:-90px; left:15%;  width:clamp(520px, 30vw, 600px); }
.purpose-clouds .pb2 { top:0px;   left:0;    width:clamp(900px, 45vw, 965px); }
.purpose-clouds .pb3 { top:50px;  right:-5%; width:clamp(850px, 55vw, 900px); z-index:1 }
.purpose-clouds .pb4 { top:265px; right:10%; width:clamp(700px, 38vw, 700px); z-index:5; }
.purpose-clouds .pb5 { top:200px; left:-5%;    width:clamp(300px, 20vw, 500px); }

@media (max-width:640px){
  .purpose-statement{ max-width: 92%; }
  .purpose-clouds .pb1{ top:-36px; left:-40px; width:260px; }
  .purpose-clouds .pb2{ top:-14px; left:-60px; width:320px; }
  .purpose-clouds .pb3{ top:-14px; right:0;    width:360px; }
  .purpose-clouds .pb4{ top:160px; right:-40px;width:360px; }
  .purpose-clouds .pb5{ top:80px;  right:10px; width:240px; }
}
/* Purpose: 見出し直下の中央寄りテキスト（開催趣意） */
.purpose__wrap{ 
  position: relative; 
  z-index: 30;
  max-width: 1080px;
  margin: 0 auto;
}
.purpose-statement__body{
  line-height: 2;
  font-size: clamp(14px, 1.7vw, 16px);
  color: #0f172a;
}
.purpose-statement__body p{ 
  margin: .7em 0; 
  text-align:center; 
}

/* Purpose の雲：JSが --shiftX/--shiftY を流し込み */
.purpose-clouds .cloud-sprite{
  position: absolute;
  will-change: transform;
  /* JS が流し込む --dx / --dy を反映（News と同じ） */
  transform: translate3d(var(--dx, 0), var(--dy, 0), 0);
  transition: transform .06s linear; /* 少し補間してカクつき防止 */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.05));

}

/* 動きを減らす設定時：アニメはやめるが位置は維持（transformは消さない） */
@media (prefers-reduced-motion: reduce){
  .purpose-clouds .cloud-sprite{
    transition: none !important;   /* ← transform:none は削除 */
  }
}





/* ==== Greeting base ==== */
#greeting{
  position: relative;
  isolation: isolate;
  /* 既存の背景があれば残してOK。少なくとも最下端は同色(= var(--seam-gs))で終わるように */
  background-color: var(--seam-gs); /* 保険：単色でも同色 */
}

#greeting::after{
  bottom:-2px;
  height:56px; /* 42→56px：薄い帯を包み込む */
  background: linear-gradient(
    180deg,
    rgba(245,245,235,0) 0%,
    var(--seam-gs)       100%
  );
}
.greeting__wrap{ 
  max-width: 1040px; 
  margin-inline: auto; 
}

/* カード外観（必要なければ削除可） */
.greeting-card{
  padding: clamp(16px,3vw,24px);
}

/* レイアウト */
.greeting__grid{
  display:grid;
  grid-template-columns: 320px 1fr;   /* 左画像 / 右本文（PC） */
  gap: clamp(16px,3vw,28px);
  align-items:start;
}

/* 画像 */
.greeting__media{
  margin:0;
  border-radius:14px;
  overflow:hidden;
  background:#eef1f5;
  aspect-ratio: 4 / 4;       /* 画像が無くても高さを確保 */
}
.greeting__media img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block;
}

/* 右側テキスト */
.greeting__title{
  margin:0 0 .25rem; 
  font-weight:800; 
  letter-spacing:.02em;
  font-size: clamp(18px,2vw,20px);
  color:#0f172a;
}
.greeting__subtitle{
  margin:0 0 .9rem; 
  font-weight:800;
  font-size: clamp(14px,1.8vw,15px);
  color:#0f172a; 
  opacity:.9;
  line-height: 1.4;
}
.greeting__text{ 
  color:#0f172a; 
  line-height:1.9; 
  font-size:14px; 
  opacity:.9; 
}
.greeting__text p{ margin:.7em 0; }

/* SP：縦並び */
@media (max-width: 768px){
  .greeting__grid{ grid-template-columns: 1fr; }
  .greeting__media{ 
    order:-1; 
    /*aspect-ratio: 16/10; */
  }
}




/* ===== 共通レイアウト ===== */
.panel{ 
  padding: clamp(48px, 8vw, 96px) 16px; 
  background:#F5F5EB; 
}
.panel__wrap{ 
  max-width: 1080px; 
  margin-inline:auto;
  margin: 0 auto; 
}
.panel__box{
  background:#fff; 
  border:1px solid rgba(2,6,23,.08); 
  border-radius:15px;
  box-shadow:0 10px 30px rgba(2,6,23,.06);
  padding: 8em 5em;
}

@media (max-width:640px){
  .panel__box{
    padding: 3em 1em;
  }
}


.panel__head{ 
  text-align:center; 
  margin-bottom: clamp(14px, 2.2vw, 40px); 
}
.panel__title{
  margin:0; 
  letter-spacing:.02em;
  font-size: clamp(28px, 3.4vw, 40px);

  font-family: "Lunasima", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Meiryo", sans-serif;
  font-weight: 700;
  font-style: italic;
  color: #0071BC;

}
.panel__sub{ 
  margin:.25rem 0 0; 
  font-size:12px; 
  letter-spacing:.18em; 
  /*opacity:.7; */
  font-family: 'Gothic A1', sans-serif;
}
.panel__decoration{
  display:block;
  margin:3rem auto;
  width: clamp(64px, 8vw, 96px);
  height:auto;
  object-fit:contain;
  filter: drop-shadow(0 2px 4px rgba(2,6,23,.08));
}

.panel__text{ 
  color:#0f172a; 
  line-height:1.9; 
  font-size:14px; 
  opacity:.9; 
}
.panel__text p{ margin:.7em 0; }

/* ===== Slogan ===== */
#slogan{
  position: relative;
  isolation: isolate;
  background:
    /* ← ラジアル中心を少し下げて、白の効きを弱める */
    radial-gradient(140% 130% at 50% 16%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,0)   58%
    ),
    linear-gradient(180deg,
      var(--seam-gs) 0%,
      var(--seam-gs) 60%,
      var(--seam-top, var(--seam-gs)) 100%
    );
  background-color: var(--seam-gs); /* 保険 */
  text-align: center;
}
#slogan::before{
  content:"";
  position:absolute; 
  left:0; 
  right:0; 
  top:-2px;
  height:52px; /* 40～60pxで微調整可 */
  pointer-events:none;
  z-index:0;
  background: linear-gradient(
    180deg,
    var(--seam-gs)          0%,
    rgba(245,245,235,.85)  40%,
    rgba(245,245,235,0)   100%
  );
}
#slogan::after{
  content:"";
  position:absolute; 
  left:0; 
  right:0; 
  bottom:-2px;
  height:42px;
  pointer-events:none;
  background: linear-gradient(180deg,
    rgba(245,255,235,0) 0%,
    var(--seam-top)      100%
  );
}
/* スローガンの箱：中央寄せ＆余白 */
.slogan__innder{
  display: grid;
  place-items: center;
  margin: clamp(10px, 2.4vw, 18px) 0 clamp(16px, 3.2vw, 22px);
}

/* 画像をレスポンシブに */
.slogan__art{
  display: block;
  width: clamp(280px, 60vw, 640px); /* 下限 / 推奨 / 上限 */
  height: auto;
  margin-inline: auto;
  image-rendering: -webkit-optimize-contrast; /* にじみ対策（任意） */
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* もし “読み上げ用テキスト” を残すなら */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}


/*
.slogan__main,
.slogan__line{
  margin:.1em 0 .35em;
  font-weight:900;
  letter-spacing:.06em;
  font-size: clamp(23px, 4vw, 38px); 
  color:#2b2019;
  line-height:1.25;
}
.slogan__main rt{
  font-size:.45em; 
  font-weight:700; 
  letter-spacing:.18em;
}
*/



/* ===== Symbol ===== */
#symbol{
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 8vw, 100px) 16px;
  background: var(--c1);                  /* フォールバック */
  /* C1→C2 へ素直に遷移（上はやや長めに C1 を残すと柔らかい） */
  background-image: linear-gradient(
    180deg,
    var(--c1) 0%,
    var(--c1) 28%,
    var(--c2) 100%
  );
}
#symbol::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height: var(--feather-h);
  pointer-events:none;
  background: linear-gradient(
    180deg,
    rgba(230,230,220,0)    0%,   /* #E6E6DC の RGBA(0) */
    rgba(230,230,220,.18) 40%,
    var(--c2)            100%
  );
  z-index:1;
}
#symbol::before{
  /* 他はそのまま。最初の2ストップだけ変数に */
  background:
    linear-gradient(
      180deg,
      var(--seam-top) 0%,
      var(--seam-top) 22%,
      #E6E6DC 48%,
      #FFD2AA 100%
    ),
    radial-gradient(120% 70% at 50% 26%,
      rgba(255,255,255,.15) 0%,
      rgba(255,255,255,.55) 36%,
      rgba(255,255,255,0)   66%
    );
}
/* カードは最前面に */
#symbol .panel__box{
  position: relative;
  z-index: 1;
  background:#fff;
  border-radius: 15px;
  box-shadow:
    0 18px 44px rgba(2,6,23,.14),
    0 2px 0 rgba(255,255,255,.6) inset;
}
.symbol img{
  width: min(420px, 82%); 
  height:auto; 
  display:block;
  filter: drop-shadow(0 10px 24px rgba(2,6,23,.10));
  margin: 1em auto;
  text-align: center;
}
/* 小さめ画面の余白調整 */
@media (max-width: 640px){
  .panel__text{ font-size:13px; }
}


/* ========== MOVIE セクション ========== */
.movie{
  position: relative;
  isolation: isolate;

  /* ★動画の下に余白を確保（シルエットを見せるスペース） */
  padding-bottom: clamp(200px, 80vw, 360px);

  /* 上端はこれまで通り symbol の色(#E6E6DC=var(--c2))で始める */
  background:
    /* 1) 上端の連続グラデ（symbol と同色スタート → 中腹まで） */
    linear-gradient(
      180deg,
      var(--c2) 0%,
      var(--c2) 42%,
      var(--mv-g1) 60%,
      var(--mv-g2) 82%,
      var(--mv-g3) 100%
    );

  background-repeat: no-repeat;
  background-color: var(--mv-g3); /* 保険 */

  /* 既存：境目対策（上端フェザー）はこのまま維持 OK */
  margin-top: -1px; /* 髪の毛ライン対策として 1px 重ね */
}
/* 上フェザー：symbol::after の鏡写し（既存のまま／参考） */

.movie::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px;
  height: var(--feather-h);
  pointer-events:none;
  background: linear-gradient(
    180deg,
    var(--c2)             0%,
    rgba(230,230,220,.18) 40%,
    rgba(230,230,220,0) 100%
  );
  z-index: 0;
}
/* 下側のシルエット帯（動画の背面・余白ゾーンだけに表示） */

.movie::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  /* 余白の高さ：必要に応じて調整（動画下の「海面」の高さ） */
  height: clamp(220px, 28vw, 360px);

  pointer-events:none;
  z-index: 1;              /* 動画の背面、背景の前面 */

  /* 画像（左・中央・右） */
  background-image:
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/bg_graphic.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/bg_graphic-2.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/bg_graphic-1.png");
  background-repeat: no-repeat, no-repeat, no-repeat;

  /* 位置：左右は端から少し内側、中央は真ん中 */
  background-position:
  left  clamp(1em, 3.5vw, 48px) bottom clamp(1em, 1.3vw, 15px),   /* 左 */
  right  clamp(65%, 3.5vw, 48px)                     bottom clamp(5.5em, 1.3vw, 14px),   /* 中央 */    
  right clamp(1em, 3.5vw, 48px) bottom clamp(3.5em, 1.3vw, 14px);

  /* 幅でスケールさせる。PC上限：L=345 / C=105 / R=330 */
  background-size:
    clamp(180px, 25vw, 345px) auto,   /* 左 */
    clamp( 64px,  7.8vw, 105px) auto, /* 中央 */
    clamp(170px, 24vw, 330px) auto;   /* 右 */

  filter: drop-shadow(0 10px 18px rgba(2,6,23,0));
}

/* デスクトップではピクセル指定で“きっちり”出したい場合の上書き（任意） */
@media (min-width: 1200px){
  .movie::after{
    background-size: 345px auto, 105px auto, 330px auto;
    background-position:
      left 4em bottom 1em,
      right 38% bottom 5em,
      right 10% bottom 1em
  }
}
.movie__wrap{ 
  position: relative; 
  max-width: 1080px; 
  margin-inline:auto;
  margin: 0 auto; 
  z-index: 2;
}

/* 外枠（スクショのように薄いベージュの額縁） */
.movie-card{
  padding: clamp(10px,2vw,18px);
}

/* 16:9 ビデオエリア */
.movie-frame{
  position: relative; 
  aspect-ratio: 16 / 9;
  border-radius: 14px; 
  overflow: hidden; 
  background:#000;
  box-shadow: 0 24px 60px rgba(2,6,23,.35);
}
.movie-frame iframe{
  position: absolute; 
  inset: 0; 
  width:100%; 
  height:100%; 
  border:0;
}

/* 小さめ画面微調整 */
@media (max-width:640px){
  .movie-card{ 
    /*padding: 10px;*/
    padding: 1em;
  }
}





/* ==== Overview（上：#F5F5EB → 中：#9BB9BE → 下：#FFB955） ==== */
#overview{
  position: relative;
  isolation: isolate;
  /*padding: clamp(56px, 8vw, 100px) 16px;*/
  padding: clamp(80px, 30vw, 220px) 16px;
  background:
    radial-gradient(140% 120% at 50% 8%,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,0)   55%
    ),
    linear-gradient(180deg,
      var(--ov-top) 0%,
      var(--ov-top) 20%,
      var(--ov-mid) 40%,
      var(--ov-mid) 72%,
      var(--ov-seam) 100%
    );
  --ov-c1: 0px;  /* 左1枚目 */
  --ov-c2: 0px;  /* 左2枚目 */
  --ov-c3: 0px;  /* 左3枚目 */
  --ov-c4: 0px;  /* 右1枚目 */
  --ov-c5: 0px;  /* 右2枚目 */
}
/* movie → overview の“髪の毛ライン”対策：上端1pxかぶせ＋フェザー */
#overview::before{
  content:"";
  position:absolute; 
  left:0; 
  right:0; 
  top:-1px;
  height:56px; pointer-events:none;
  background: linear-gradient(180deg, var(--ov-top) 0%, rgba(245,245,235,0) 100%);
  z-index:0;
}

/* 雲レイヤー：Overviewの“上端”に食い込ませて表示 */
#overview::after{
  content:"";
  position: absolute;
  left: 0; right: 0;
  top: -32px;
  height: clamp(120px, 18vw, 240px);
  pointer-events: none;
  z-index: 0;

  background-image:
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/movie-clouds01.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/movie-clouds02.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/movie-clouds03.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/movie-clouds05.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/movie-clouds04.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

  /* ← 横位置だけ calc(ベース + 変数) に変更。変数は JS でpxを流し込む */
  background-position:

    left  calc(-5% + var(--ov-c3)) top  60px,  /* 3（左・最前面） */
    left  calc(-10% + var(--ov-c2)) top  25px,  /* 02（左・中）   */
    left  calc(-15% + var(--ov-c1)) top   5px,  /* 01（左・一番下）*/
    right calc(0% + var(--ov-c4)) top   35px,  /* 04（右・下）   */
    right calc(-5% + var(--ov-c5)) top -10px;


  /* サイズも画像に対応して順序を入替え */
  background-size:
    clamp(210px, 24vw, 340px) auto,  /* 03 */
    clamp(180px, 22vw, 300px) auto,  /* 02 */
    clamp(220px, 26vw, 360px) auto,  /* 01 */
    clamp(220px, 26vw, 360px) auto,  /* 04 */
    clamp(240px, 28vw, 380px) auto;  /* 05 */
}


/* PCで“きっちり”置きたい場合の上書き */
@media (min-width: 1200px){
  #overview::after{
    top: -36px;
    height: 320px;

    background-size:
      350px auto,  /* 03 */
      600px auto,  /* 02 */
      400px auto,  /* 01 */
      530px auto,
      605px auto;  /* 05 */

    background-position:
      left  calc(-4%  + var(--ov-c3)) top  210px,  /* 03 */
      left  calc(-5%  + var(--ov-c2)) top 25px,  /* 02 */
      left  calc(31% + var(--ov-c1)) top  50px, /* 01 */
      right calc(13%  + var(--ov-c4)) top  140px,
      right calc(-35px + var(--ov-c5)) top -15px; /* 05 */
  }


}



/* 疑似要素での雲は使わない */
#overview::after{ content:none !important; }

/* 雲レイヤー（共通） */
.overview-clouds{
  position:absolute; left:0; right:0;
  top:-32px;
  height: clamp(120px, 18vw, 240px);
  pointer-events:none;
  z-index:0;
}
.overview-clouds .cloud-sprite{
  position:absolute;
  opacity:.98;
  filter: drop-shadow(0 10px 22px rgba(2,6,23,.08));
  transform: translate3d(var(--dx,0), var(--dy,0), 0);
  transition: transform .06s linear;
  will-change: transform;
}

/* ====== タブレット基準（641–1199px） ====== */
/* 左（01=下、02=中、03=上） */
.ov-l01{ left:12%; top: 10px; width: clamp(220px, 24vw, 340px); }
.ov-l02{ left:-6%;  top: 22px; width: clamp(260px, 28vw, 460px); }
.ov-l03{ left:-4%;  top: 54px; width: clamp(200px, 22vw, 320px); }

/* 右（04=下、05=上） */
.ov-r04{ right:-2%; top: 42px; width: clamp(220px, 26vw, 420px); }
.ov-r05{ right:-4%; top:  0px; width: clamp(260px, 30vw, 480px); }

/* ====== スマホ（≤640px）：さらに小さく & 少し内側へ ====== */
@media (max-width:640px){
  .overview-clouds{ top:-28px; height: clamp(110px, 28vw, 200px); }

  .ov-l01{ left: 4%;  top: 6px;  width: clamp(160px, 40vw, 240px); }
  .ov-l02{ left:-8%;  top:16px;  width: clamp(180px, 46vw, 280px); }
  .ov-l03{ left:-6%;  top:38px;  width: clamp(150px, 42vw, 240px); }

  .ov-r04{ right:-2%; top:30px;  width: clamp(160px, 44vw, 260px); }
  .ov-r05{ right:-6%; top:-6px;  width: clamp(180px, 48vw, 300px); }
}

/* ====== PC（≥1200px）：現状の最適サイズを踏襲 ====== */
@media (min-width:1200px){
  .overview-clouds{ top:-36px; height:320px; }

  .ov-l01{ left:31%;  top: 50px; width:400px; }
  .ov-l02{ left:-5%;  top: 25px; width:600px; }
  .ov-l03{ left:-4%;  top:210px; width:350px; }

  .ov-r04{ right:-4%; top:140px; width:530px; }
  .ov-r05{ right:-35px; top:-15px; width:605px; }
}



/* ===== Information ===== */
.info{
  position: relative;
  isolation: isolate;
  /* ↑ ここはすでにお使いの指定でOK。変数が効くようになります */
  padding: var(--info-top-pad) 16px var(--info-pad-b);

  /* 画像3枚（左／夕日／右）＋ 夕景グラデーション */
  background-image:
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/bg_graphic-4.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/yuhi.png"),
    url("https://hojinkai-shimane.jp/wp/wp-content/themes/hojinkai-shimane/assets/images/bg_graphic-5.png"),
    /* 空の“頭”を増やす：上の色(#dec085)を var(--info-top-sky)% まで伸ばす */
    linear-gradient(
      180deg,
      #dec085 0%,
      #dec085 var(--info-top-sky),
      #f3a34e calc(var(--info-top-sky) + 20%),
      #e26a22 calc(var(--info-top-sky) + 42%),
      #c2d8de 100%
    );

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;

  /* 夕日だけ縦位置を変数でコントロール（ボタン群の下に来るように） */
  background-position:
    left 25%  bottom 30%,
    65% var(--sun-y),
    right 10% bottom 0,
    0 0;

  background-size:
    clamp(200px, 30vw, 320px) auto,
    clamp(96px,  10vw, 140px) auto,
    auto clamp(44%, 50vh, 62%),
    100% 100%;
  }
/* 画面が狭い時はさらに少し小さめに */
@media (max-width: 900px){
  .info{
    background-size:
      clamp(150px, 26vw, 260px) auto,
      clamp(72px,  11vw, 110px) auto,
      auto 28%,                    /* 右：高さ 46% 程度に */
      100% 100%;
  }
}

/* overview→info の“髪の毛ライン”対策：上端1pxかぶせ＋フェザー */
.info::before{
  content:"";
  position:absolute; left:0; right:0; top:-1px;
  height:56px; pointer-events:none;
  background: linear-gradient(180deg, var(--ov-seam) 0%, rgba(255,185,85,0) 100%);
  z-index:0;
}
/* レスポンシブ（右シルエットを少し小さく） */
@media (max-width: 900px){
  .info{
    background-size:
      clamp(150px, 26vw, 260px) auto,
      clamp(72px,  11vw, 110px) auto,
      auto 28%,
      100% 100%;
  }
}


.info__wrap{ 
  max-width: 1080px; 
  margin-inline:auto; 
}

/* ボタングリッド */
.info-links{
  display: grid;
  grid-template-columns: repeat(3, minmax(220px,1fr));
  gap: 14px 22px;
  justify-items: center;
  margin: 6px auto 22px;
  max-width: 920px;
}

/* 青い丸ボタン */
.info-btn{
  position: relative;
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  min-width: 220px; 
  height: 42px; 
  padding: 0 18px;
  background:#0071BC; 
  color:#fff; 
  text-decoration:none; 
  font-weight:800;
  border-radius:999px; 
  letter-spacing:.04em;
  box-shadow: 0 10px 26px rgba(14,165,233,.25);
  transition: transform .08s ease, filter .2s ease;
}
.info-btn::after{
  content:"›"; margin-left:.6em; transform: translateY(-1px);
  font-weight:900; font-size: 1.05em; opacity:.9;
}
.info-btn:hover{ 
  /*filter:brightness(1.05); */
  /*transform: translateY(-1px); */
}

/* レスポンシブ：2列→1列 */
@media (max-width: 1052px){
  .info-links{ grid-template-columns: repeat(2, minmax(200px,1fr)); }
}
@media (max-width: 560px){
  .info-links{ grid-template-columns: 1fr; }
  .info-btn{ min-width: 100%; }
}