@charset "UTF-8";

/* Snow Monkey Form */
.snow-monkey-form {
  display: flex;
  flex-direction: column;
}

.snow-monkey-form > .snow-monkey-forms-turnstile {
  text-align: center;
}

.snow-monkey-form > .smf-action {
  order: 1;
}

.snow-monkey-form[data-screen="complete"] .snow-monkey-forms-turnstile {
	display: none;
}

.snow-monkey-form:is([data-screen="complete"], [data-screen="systemerror"]) .snow-monkey-forms-turnstile {
	display: none;
}


/* ============================================================
   メガメニュー（WordPress ／ テーマ unitone の「Mega Menu」ブロック用）
   2026-10-20 作成
   ── 静的サイト（/test/css/style.css「メガメニュー」章。末尾の「わずかに透かす」追記を含む）の
      見た目を、unitone のメガメニューが出力する HTML に合わせて移植したもの。
   ── 置き場所：wp-content/plugins/my-unitone/style.css の末尾に追記

   ■ ブロックに付けるクラス（ブロックを選択 › 右の設定 ›「高度な設定」›「追加 CSS クラス」）
       Section                              … mega-panel    （パネル全体。これが無いと中身の装飾は効かない）
       With sidebar の中の、写真がある方の Content … mega-feature  （左の写真カード）
       段落「ABOUT US」                      … mega-eyebrow
       段落（リード文）                       … mega-lead
       グリッド（リンクの一覧）               … mega-links
     ・リンクは、各項目の見出し（h3）と、写真側の見出し（h2）の文字に付けるだけ。
       カード全体が押せるようになる（CSS で当たり判定をカードいっぱいに広げている）
     ・写真カードの「詳しく見る」は、h2 の下に段落を1つ足すと出る（→ は自動で付く）

   ■ パネルそのもの（白い全幅パネル・下のページを沈める影・開閉の動き）はクラス不要。
     ヘッダー内のメガメニューすべてに効く。

   ■ !important について
     WordPress の文字サイズ・背景色のプリセット（has-〇〇-font-size など）や、
     レイアウト用の margin は !important 付きで出力されるため、
     それを上書きする所だけ !important を付けている。
   ============================================================ */

:root{
  --mega-photo-w:   300px;                 /* 左の写真の幅（1100px以下は 240px、767px以下は 200px） */
  --mega-max:       1184px;                /* パネル中身の最大幅（静的サイトの 1280px から左右の余白 48px×2 を引いた幅） */
  --mega-desc-size: .875rem;               /* リンクの説明文（14px） */
  --mega-bg:        rgba(255,255,255,.97); /* パネルの背景。数字を下げるほど透ける */
  --mega-dim:       rgba(22,41,94,.16);    /* パネルの下のページを沈める色。不要なら transparent */
  --mega-line:      rgba(30,58,138,.14);   /* パネル内の罫線 */
  --mega-ease:      cubic-bezier(.2,0,0,1);
  --mega-ease-out:  cubic-bezier(.16,1,.3,1);
  /* 色（静的サイトのカラーパレットと同じ値） */
  --mega-navy:      #1e3a8a;
  --mega-text:      #1f2937;
  --mega-note:      #525a66;
  --mega-gold:      #6b5310;
  --mega-tint:      #eef2f8;
}


/* ============================================================
   1. パネル（PC表示。ハンバーガーで開くオーバーレイの中は 5. で別指定）
   ============================================================ */

/* 位置の基準の付け替え：
   unitone の標準ではパネルの位置の基準がナビ項目で、ナビ項目の真下から出る。
   この案件のヘッダーはロゴがナビより背が高いので、そのままだとパネルがロゴの下半分に重なる。
   パネルの祖先のうち「ヘッダー直下のブロックより内側」をすべて position:static にして、
   位置の基準をヘッダー直下のブロック（いまは Section）に移す。
   ・ヘッダー直下のブロック自体は触らないので、そこを追従（sticky）にしても効いたまま
   ・ハンバーガーで開くオーバーレイ（.is-menu-open。position:fixed）は対象外 */
.site-header > * :has(.unitone-mega-menu__container):not(.is-menu-open){
  position: static !important;
}

/* パネル（閉じている状態） */
:where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .unitone-mega-menu > .unitone-mega-menu__container{
  inset: 100% 0 auto 0;                          /* ヘッダーの下端から、ヘッダーの幅いっぱい */
  width: auto;
  max-width: none;
  translate: none;
  border-top: 1px solid var(--mega-line);
  background-color: var(--mega-bg) !important;   /* ブロックで背景色を設定していても、この色にそろえる */
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
          backdrop-filter: blur(12px) saturate(1.2);
  /* 2つ目の影＝パネルより下のページを薄く沈める。clip-path で上側（ヘッダー）には掛けない */
  box-shadow: 0 24px 40px -18px rgba(0,30,80,.22), 0 0 0 100vmax var(--mega-dim);
  clip-path: inset(0 -100vmax -100vmax -100vmax);
  transform: translateY(-8px);
  transition: opacity .22s var(--mega-ease), transform .22s var(--mega-ease), visibility 0s .22s;
}
/* 開いている状態（unitone が親ボタンの aria-expanded を true にする） */
:where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .unitone-mega-menu > [aria-expanded="true"] ~ .unitone-mega-menu__container{
  transform: none;
  transition: opacity .22s var(--mega-ease), transform .28s var(--mega-ease-out), visibility 0s 0s;
}
/* 閉じかけ（フェードアウト中）のパネルは押せないようにする */
:where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .unitone-mega-menu > [aria-expanded="false"] ~ .unitone-mega-menu__container > .unitone-mega-menu__placement{
  pointer-events: none;
}
.unitone-mega-menu__container > .unitone-mega-menu__placement:has(> .mega-panel){
  background-color: transparent;
  color: var(--mega-text);
}

/* 開いている間はヘッダーもパネルと同じ白にして、ひと続きに見せる */
.site-header:has(.wp-block-navigation__responsive-container:not(.is-menu-open) .unitone-mega-menu > [aria-expanded="true"]){
  background-color: var(--mega-bg);
}


/* ============================================================
   2. 開いている項目に下線（静的サイトのナビと同じ 2px の紺）
   ============================================================ */
:where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .unitone-mega-menu > .wp-block-navigation-item__content .wp-block-navigation-item__label{
  position: relative;
}
:where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .unitone-mega-menu > .wp-block-navigation-item__content .wp-block-navigation-item__label::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 1px;
  background: var(--mega-navy);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
:where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .unitone-mega-menu > [aria-expanded="true"] .wp-block-navigation-item__label::after{
  transform: scaleX(1);
}


/* ============================================================
   3. パネルの中身（Section に mega-panel を付けたもの）
   ============================================================ */

/* unitone は全要素（*）に行の高さを指定しているため、文中のリンクや太字が
   親の行の高さを受け継がず、行が高くなる。パネル内では親に合わせる */
.mega-panel :is(h2, h3, h4, h5, h6, p) *{
  line-height: inherit;
}

/* Section：中身の最大幅と上下の余白。
   枠線・ぼかし・背景色はパネル側で付けるので、ブロック側の設定は打ち消す */
.unitone-mega-menu__container .mega-panel{
  --unitone--max-width: var(--mega-max);
  --unitone--backdrop-filter: none !important;
  border-width: 0 !important;
  background-color: transparent !important;
}
.unitone-mega-menu__container .mega-panel > [data-unitone-layout~="gutters"]{
  padding-top: 32px;
  padding-bottom: 40px;
}

/* With sidebar：左に写真カード、右に見出し・リード・リンクの2列
   （mega-feature が付いている時だけ。付いていなければ unitone の並びのまま） */
.mega-panel [data-unitone-layout~="with-sidebar"]:has(> .mega-feature){
  display: grid;
  grid-template-columns: var(--mega-photo-w) minmax(0, 1fr);
  gap: 0 48px;
  align-items: start;
}
.mega-panel [data-unitone-layout~="with-sidebar"]:has(> .mega-feature) > [data-unitone-layout~="with-sidebar__content"]{
  grid-row: 1;
  grid-column: 2;
  min-width: 0;
  max-width: none;
}
.mega-panel [data-unitone-layout~="with-sidebar"]:has(> .mega-feature) > .mega-feature{
  grid-column: 1;
}

/* ---------- 左：写真カード（mega-feature） ----------
   写真・グラデーション・見出し・「詳しく見る」を、同じマス目に重ねて置く */
.mega-panel .mega-feature{
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--mega-tint);
  color: #fff;
}
.mega-panel .mega-feature > [data-unitone-layout~="with-sidebar__content__content"]{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  padding: 0;
}
.mega-panel .mega-feature > [data-unitone-layout~="with-sidebar__content__content"] > *{
  grid-column: 1;
}
/* 写真（Frame ブロック）：カードいっぱい・4:3（ブロックで比率を設定していても 4:3 にそろえる） */
.mega-panel .mega-feature [data-unitone-layout~="frame"]{
  --unitone--ratio: 4/3 !important;
  grid-row: 1 / -1;
  z-index: 0;
  margin: 0;
}
.mega-panel .mega-feature [data-unitone-layout~="frame"] img{
  display: block;
  transition: transform .6s var(--mega-ease-out);
}
.mega-panel .mega-feature:hover [data-unitone-layout~="frame"] img{ transform: scale(1.05); }
/* 文字を読ませるための下側のグラデーション（静的サイトと同じ濃さ。
   写真が真っ白でも、見出し（20px太字）で約5:1、「詳しく見る」（14px）で7:1以上） */
.mega-panel .mega-feature > [data-unitone-layout~="with-sidebar__content__content"]::after{
  content: "";
  grid-row: 1 / -1;
  grid-column: 1;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(22,41,94,0) 25%,
    rgba(22,41,94,.55) 55%,
    rgba(22,41,94,.92) 100%);
}
/* 見出し（カテゴリ名） */
.mega-panel .mega-feature > [data-unitone-layout~="with-sidebar__content__content"] > :is(h2, h3, h4){
  position: static;               /* unitone はブロックを position:relative にするため。リンクの当たり判定をカード全体にする */
  grid-row: 2;
  z-index: 2;
  margin: 0 20px;
  font-size: 1.25rem !important;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #fff;
}
/* 「詳しく見る」（h2 の下に段落を足した時だけ出る） */
.mega-panel .mega-feature > [data-unitone-layout~="with-sidebar__content__content"] > p{
  grid-row: 3;
  z-index: 2;
  margin: 2px 20px 0;
  font-size: .875rem !important;
  line-height: 1.85;
  color: #fff;
  pointer-events: none;           /* 上に重ねた文字がリンクのクリックを邪魔しないように */
}
.mega-panel .mega-feature p::after{
  content: "→";
  display: inline-block;
  margin-left: .4em;
  transition: transform .25s var(--mega-ease-out);
}
.mega-panel .mega-feature:hover p::after{ transform: translateX(4px); }
/* 一番下の文字の下に余白（「詳しく見る」が無い時は見出しの下） */
.mega-panel .mega-feature > [data-unitone-layout~="with-sidebar__content__content"] > :not([data-unitone-layout~="frame"]):last-child{
  margin-bottom: 16px;
}
/* 見出しのリンクの当たり判定をカード全体に広げる */
.mega-panel .mega-feature a{
  color: inherit;
  text-decoration: none;
}
.mega-panel .mega-feature a::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
}

/* ---------- 右：見出し・リード ---------- */
/* Stack の間隔は 0 にして、下の margin で付ける */
.mega-panel [data-unitone-layout~="stack"]:has(> .mega-lead){
  gap: 0;
}
.mega-panel .mega-eyebrow{
  margin: 0 0 .15em;
  font-size: .8125rem !important;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  color: var(--mega-gold);
}
.mega-panel .mega-lead{
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--mega-line);
  font-size: 1rem !important;
  line-height: 1.7;
  color: var(--mega-text);
}

/* ---------- 右：リンクの一覧（mega-links） ---------- */
.mega-panel .mega-links{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: none;
  grid-auto-rows: auto;
  gap: 2px 12px;
  max-width: none;
  /* カードの内側余白ぶん左右へ出して、文字の頭をリードとそろえる
     （親の Text ブロックが左右の margin:auto を !important で付けるため、こちらも !important） */
  margin: 0 -14px !important;
}
/* 1件ずつのカード（グループ） */
.mega-panel .mega-links > *{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 12px 34px 12px 14px;
  border-radius: 8px;
  transition: background-color .2s var(--mega-ease);
}
.mega-panel .mega-links > :has(a):hover{ background-color: var(--mega-tint); }
/* 右端の ›（リンクがあるカードだけ） */
.mega-panel .mega-links > :has(a)::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-top: 2px solid var(--mega-navy);
  border-right: 2px solid var(--mega-navy);
  transform: rotate(45deg);
  opacity: .55;
  pointer-events: none;
  transition: transform .25s var(--mega-ease-out), opacity .2s var(--mega-ease);
}
.mega-panel .mega-links > :has(a):hover::after{
  transform: translateX(3px) rotate(45deg);
  opacity: 1;
}
/* 項目名（見出し） */
.mega-panel .mega-links :is(h2, h3, h4, h5, h6){
  position: static;               /* unitone はブロックを position:relative にするため。リンクの当たり判定をカード全体にする */
  margin: 0;
  font-size: 1rem !important;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: normal;
  color: var(--mega-navy);
}
/* 説明文 */
.mega-panel .mega-links p{
  margin: 0;
  font-size: var(--mega-desc-size) !important;
  line-height: 1.6;
  color: var(--mega-note);
}
/* 見出しのリンクの当たり判定をカード全体に広げる */
.mega-panel .mega-links a{
  color: inherit;
  text-decoration: none;
}
.mega-panel .mega-links a:hover{ text-decoration: none; }
.mega-panel .mega-links a::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;                     /* 説明文（unitone で position:relative）より上に置いて、説明文の上でも押せるように */
}

/* キーボード操作の時のフォーカス枠を、文字ではなくカード全体に出す */
@supports selector(:has(a:focus-visible)){
  .mega-panel :is(.mega-links > *, .mega-feature):has(a:focus-visible){
    outline: 2px solid var(--mega-navy);
    outline-offset: 2px;
  }
  .mega-panel :is(.mega-links, .mega-feature) a:focus-visible{ outline: none; }
}

/* 折り返す時は文節で（Chrome・Edge 119以降。未対応のブラウザは通常の折り返し） */
.mega-panel :is(.mega-lead, .mega-links :is(h2, h3, h4, h5, h6), .mega-links p){
  word-break: auto-phrase;
}


/* ============================================================
   4. 幅が狭い時（PC表示のまま）
   ============================================================ */
@media (max-width: 1100px){
  :root{ --mega-photo-w: 240px; }
  .unitone-mega-menu__container .mega-panel > [data-unitone-layout~="gutters"]{
    padding-top: 28px;
    padding-bottom: 32px;
  }
  .mega-panel [data-unitone-layout~="with-sidebar"]:has(> .mega-feature){ column-gap: 32px; }
  .mega-panel .mega-links{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  :root{ --mega-photo-w: 200px; }
  .mega-panel [data-unitone-layout~="with-sidebar"]:has(> .mega-feature){ column-gap: 24px; }
  .mega-panel .mega-links{ grid-template-columns: minmax(0, 1fr); }
}


/* ============================================================
   5. スマホ（599px以下でハンバーガーから開くオーバーレイの中。アコーディオンで開く）
      写真カードは横長の帯にして先頭へ。リンクは1列
   ============================================================ */
.is-menu-open .unitone-mega-menu__container .mega-panel > [data-unitone-layout~="gutters"]{
  padding-top: 8px;
  padding-bottom: 24px;
}
.is-menu-open .mega-panel [data-unitone-layout~="with-sidebar"]:has(> .mega-feature){
  grid-template-columns: minmax(0, 1fr);
  row-gap: 16px;
}
.is-menu-open .mega-panel [data-unitone-layout~="with-sidebar"]:has(> .mega-feature) > [data-unitone-layout~="with-sidebar__content"]{
  grid-row: 2;
  grid-column: 1;
}
.is-menu-open .mega-panel [data-unitone-layout~="with-sidebar"]:has(> .mega-feature) > .mega-feature{
  grid-row: 1;
}
.is-menu-open .mega-panel .mega-feature [data-unitone-layout~="frame"]{ --unitone--ratio: 3/1 !important; }
.is-menu-open .mega-panel .mega-links{ grid-template-columns: minmax(0, 1fr); }


/* ---------- 動きを減らす設定 ---------- */
@media (prefers-reduced-motion: reduce){
  .unitone-mega-menu__container,
  .unitone-mega-menu__container *,
  .unitone-mega-menu__container *::before,
  .unitone-mega-menu__container *::after,
  .unitone-mega-menu .wp-block-navigation-item__label::after{ transition: none !important; }
  :where(.wp-block-navigation__responsive-container:not(.is-menu-open)) .unitone-mega-menu > .unitone-mega-menu__container{ transform: none; }
  .mega-panel .mega-feature:hover [data-unitone-layout~="frame"] img,
  .mega-panel .mega-feature:hover p::after{ transform: none; }
}
/* ==================== メガメニュー ここまで ==================== */