@charset "UTF-8";
/*
Theme Name: 余白 -Yohaku- (SWELL CHILD)
Theme URI: https://himekuri.co.jp/
Template: swell
Description: SWELLの子テーマ。明朝と大胆な余白を軸にした編集的（エディトリアル）な世界観と、出現アニメーション（左から流れる／左からそっと寄せる／左下から押し込む）を追加します。ブロックのサイドバーから選ぶだけで設定できます。操作感はSWELLのまま。
Version: 1.12.0
Author: 株式会社日めくり
Author URI: https://himekuri.co.jp/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* =========================================================
   0. トークン（ブランド）
   ========================================================= */
:root{
  --wsp-ink:#1c2a3a;          /* 深い藍 */
  --wsp-ink-soft:rgba(28,42,58,.74);
  --wsp-ink-faint:rgba(28,42,58,.5);
  --wsp-paper:#f4efe6;        /* 生成り */
  --wsp-paper-hi:#faf6ee;
  --wsp-paper-lo:#ece3d3;
  --wsp-gold:#b08d4f;         /* くすんだ金 */
  --wsp-gold-soft:rgba(176,141,79,.42);
  --wsp-line:rgba(28,42,58,.14);
  --wsp-serif-jp:"Shippori Mincho", serif;
  --wsp-serif-la:"Cormorant Garamond","Shippori Mincho", serif;
  --wsp-pad-y:clamp(6rem,14vw,12rem);
}

/* =========================================================
   1. 全体の地色・文字・明朝（控えめに上書き）
   ========================================================= */
body{
  background-color:var(--wsp-paper);
  color:var(--wsp-ink);
  font-family:var(--wsp-serif-jp);
  line-height:2;
  -webkit-font-smoothing:antialiased;
}

/* =========================================================
   2. 出現アニメーション
   ・.flow  … 左から流れるように表示（画像向け／STUDIO recipe35）
   ・.reveal … テキスト等を左からそっと寄せる
   ・hidden状態は .flow-ready 配下でのみ有効（JS未実行・エディタ・
     視差offでは常に表示され、レイアウトが壊れない）
   ========================================================= */
.flow-ready .reveal{
  opacity:0;
  transform:translateX(-26px);
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),
             transform 1.1s cubic-bezier(.22,1,.36,1);
}
.flow-ready .reveal.in{opacity:1;transform:none}

.flow-ready .flow{
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transform:translateX(-30px);
  transition:opacity .7s ease,
             clip-path 1.2s cubic-bezier(.22,1,.36,1),
             transform 1.2s cubic-bezier(.22,1,.36,1);
  will-change:clip-path,transform,opacity;
}
.flow-ready .flow.in{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(0)}

/* .flow-media … 「メディアとテキスト」ブロックの画像“だけ”を左から流す
   （テキスト側はそのまま普通に表示される） */
.flow-ready .flow-media .wp-block-media-text__media{
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transform:translateX(-30px);
  transition:opacity .7s ease,
             clip-path 1.2s cubic-bezier(.22,1,.36,1),
             transform 1.2s cubic-bezier(.22,1,.36,1);
  will-change:clip-path,transform,opacity;
}
.flow-ready .flow-media.in .wp-block-media-text__media{opacity:1;clip-path:inset(0 0 0 0);transform:translateX(0)}

/* .push-in … 左下からぐっと押し込まれるように現れる（STUDIO recipe64） */
.flow-ready .push-in{
  opacity:0;
  transform:translate(-38px,38px) rotate(-5deg);
  transition:opacity .8s ease,
             transform 1.1s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.flow-ready .push-in.in{opacity:1;transform:translate(0,0) rotate(0)}

/* .wsp-from-right … 右からふわっと（recipe24） */
.flow-ready .wsp-from-right{opacity:0;transform:translateX(30px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
.flow-ready .wsp-from-right.in{opacity:1;transform:none}

/* .wsp-from-below … 下からふわっと（recipe12） */
.flow-ready .wsp-from-below{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
.flow-ready .wsp-from-below.in{opacity:1;transform:none}

/* .wsp-tilt … 傾きながら下からふわっと（recipe45） */
.flow-ready .wsp-tilt{opacity:0;transform:translateY(42px) rotate(-4deg);transition:opacity 1s ease,transform 1.2s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
.flow-ready .wsp-tilt.in{opacity:1;transform:none}

/* .wsp-fade … じわ〜とフェード（recipe41 / recipe02） */
.flow-ready .wsp-fade{opacity:0;transition:opacity 1.5s ease;will-change:opacity}
.flow-ready .wsp-fade.in{opacity:1}

/* .wsp-stagger … 中の要素が順番に下から（recipe13） */
.flow-ready .wsp-stagger > *{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}
.flow-ready .wsp-stagger.in > *{opacity:1;transform:none}
.flow-ready .wsp-stagger.in > *:nth-child(1){transition-delay:.05s}
.flow-ready .wsp-stagger.in > *:nth-child(2){transition-delay:.13s}
.flow-ready .wsp-stagger.in > *:nth-child(3){transition-delay:.21s}
.flow-ready .wsp-stagger.in > *:nth-child(4){transition-delay:.29s}
.flow-ready .wsp-stagger.in > *:nth-child(5){transition-delay:.37s}
.flow-ready .wsp-stagger.in > *:nth-child(6){transition-delay:.45s}
.flow-ready .wsp-stagger.in > *:nth-child(7){transition-delay:.53s}
.flow-ready .wsp-stagger.in > *:nth-child(8){transition-delay:.61s}

/* --- テキスト専用の表示エフェクト --------------------------------- */

/* 方向ちがいのワイプ（recipe14 左→右 / recipe71 右→左 / recipe70 下→上 / recipe72 上→下） */
.flow-ready .wsp-text-right{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
.flow-ready .wsp-text-right.in{clip-path:inset(0 0 0 0)}
.flow-ready .wsp-text-left{clip-path:inset(0 0 0 100%);transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
.flow-ready .wsp-text-left.in{clip-path:inset(0 0 0 0)}
.flow-ready .wsp-text-up{clip-path:inset(100% 0 0 0);transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
.flow-ready .wsp-text-up.in{clip-path:inset(0 0 0 0)}
.flow-ready .wsp-text-down{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.22,1,.36,1)}
.flow-ready .wsp-text-down.in{clip-path:inset(0 0 0 0)}

/* 斜めに出てくる（recipe25） */
.flow-ready .wsp-diagonal{opacity:0;transform:translate(-28px,28px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.22,1,.36,1)}
.flow-ready .wsp-diagonal.in{opacity:1;transform:none}

/* 1文字ずつふわっと（recipe67）… JSが .wsp-char に分割 */
.flow-ready .wsp-chars .wsp-char{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.flow-ready .wsp-chars.in .wsp-char{opacity:1;transform:none}

/* ボックスが流れた後にテキスト（recipe42）… JSが中身を .wsp-inner で包む */
.flow-ready .wsp-box-reveal{position:relative;overflow:hidden}
.flow-ready .wsp-box-reveal .wsp-inner{opacity:0}
.flow-ready .wsp-box-reveal::after{content:"";position:absolute;inset:0;background:var(--wsp-gold);transform:scaleX(0);transform-origin:left;z-index:2}
.flow-ready .wsp-box-reveal.in .wsp-inner{animation:wspBoxText 1.1s steps(1,end) forwards}
.flow-ready .wsp-box-reveal.in::after{animation:wspBoxBar 1.1s cubic-bezier(.7,0,.3,1) forwards}
@keyframes wspBoxBar{
  0%{transform:scaleX(0);transform-origin:left}
  46%{transform:scaleX(1);transform-origin:left}
  54%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}
@keyframes wspBoxText{0%,50%{opacity:0}51%,100%{opacity:1}}

/* ボックスの流れにあわせて左→右にテキスト（recipe20） */
.flow-ready .wsp-box-lr{position:relative}
.flow-ready .wsp-box-lr .wsp-inner{display:block;clip-path:inset(0 100% 0 0)}
.flow-ready .wsp-box-lr::after{content:"";position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--wsp-gold);transform:scaleX(0);transform-origin:left;z-index:2}
.flow-ready .wsp-box-lr.in .wsp-inner{animation:wspLrText 1.2s cubic-bezier(.22,1,.36,1) forwards}
.flow-ready .wsp-box-lr.in::after{animation:wspLrBar 1.2s cubic-bezier(.22,1,.36,1) forwards}
@keyframes wspLrText{0%{clip-path:inset(0 100% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes wspLrBar{
  0%{transform:scaleX(0);transform-origin:left}
  50%{transform:scaleX(1);transform-origin:left}
  51%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}

@media (prefers-reduced-motion: reduce){
  .flow-ready .wsp-text-right,.flow-ready .wsp-text-left,
  .flow-ready .wsp-text-up,.flow-ready .wsp-text-down,
  .flow-ready .wsp-diagonal,
  .flow-ready .wsp-chars .wsp-char,
  .flow-ready .wsp-box-reveal .wsp-inner,
  .flow-ready .wsp-box-lr .wsp-inner{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important;animation:none !important}
  .flow-ready .wsp-box-reveal::after,.flow-ready .wsp-box-lr::after{display:none !important}
}

/* 遅延（重ねて出したいとき用） */
.flow-ready .d1{transition-delay:.1s}
.flow-ready .d2{transition-delay:.2s}
.flow-ready .d3{transition-delay:.3s}

@media (prefers-reduced-motion: reduce){
  .flow-ready .reveal,
  .flow-ready .flow,
  .flow-ready .push-in,
  .flow-ready .wsp-from-right,
  .flow-ready .wsp-from-below,
  .flow-ready .wsp-tilt,
  .flow-ready .wsp-fade,
  .flow-ready .wsp-stagger > *,
  .flow-ready .flow-media .wp-block-media-text__media{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
}

/* =========================================================
   2b. ボタンのホバー動作（マウスを乗せたときの動き）
   ・クラスは .wp-block-button（または .wp-block-buttons）に付く
   ・ホバー効果なので JS も .flow-ready も不要（常時有効）
   ========================================================= */

/* 共通トランジション */
.hv-fill-up .wp-block-button__link,.hv-fill-down .wp-block-button__link,
.hv-fill-left .wp-block-button__link,.hv-fill-right .wp-block-button__link,
.hv-fill-diagonal .wp-block-button__link,.hv-fill-sides .wp-block-button__link,
.hv-fill-vert .wp-block-button__link,.hv-expand .wp-block-button__link,
.hv-expand-x .wp-block-button__link,.hv-expand-y .wp-block-button__link,
.hv-underline-fill .wp-block-button__link,.hv-invert .wp-block-button__link,
.hv-circle-right .wp-block-button__link,.hv-circle-lr .wp-block-button__link{
  position:relative;overflow:hidden;z-index:1;transition:color .4s ease,background-color .4s ease;
}
.hv-lift .wp-block-button__link,.hv-shadow-spread .wp-block-button__link,
.hv-press-down .wp-block-button__link,.hv-press-3d .wp-block-button__link,
.hv-press-inset .wp-block-button__link,.hv-press-bl .wp-block-button__link,
.hv-press-br .wp-block-button__link,.hv-scale-up .wp-block-button__link,
.hv-scale-down .wp-block-button__link,.hv-round .wp-block-button__link,
.hv-fade .wp-block-button__link,.hv-flip-front .wp-block-button__link,
.hv-flip-back .wp-block-button__link,.hv-line-grow .wp-block-button__link,
.hv-border-in .wp-block-button__link,.hv-arrow .wp-block-button__link{
  position:relative;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-radius .4s ease,opacity .4s ease,background-color .4s ease,color .4s ease;
}

/* 塗り系の共通 ::before（単方向） */
.hv-fill-up .wp-block-button__link::before,.hv-fill-down .wp-block-button__link::before,
.hv-fill-left .wp-block-button__link::before,.hv-fill-right .wp-block-button__link::before,
.hv-fill-diagonal .wp-block-button__link::before,.hv-expand .wp-block-button__link::before,
.hv-expand-x .wp-block-button__link::before,.hv-expand-y .wp-block-button__link::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--wsp-gold);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
/* 塗り系ホバーで文字色を反転 */
.hv-fill-up .wp-block-button__link:hover,.hv-fill-up .wp-block-button__link:focus-visible,
.hv-fill-down .wp-block-button__link:hover,.hv-fill-down .wp-block-button__link:focus-visible,
.hv-fill-left .wp-block-button__link:hover,.hv-fill-left .wp-block-button__link:focus-visible,
.hv-fill-right .wp-block-button__link:hover,.hv-fill-right .wp-block-button__link:focus-visible,
.hv-fill-diagonal .wp-block-button__link:hover,.hv-fill-diagonal .wp-block-button__link:focus-visible,
.hv-fill-sides .wp-block-button__link:hover,.hv-fill-sides .wp-block-button__link:focus-visible,
.hv-fill-vert .wp-block-button__link:hover,.hv-fill-vert .wp-block-button__link:focus-visible,
.hv-expand .wp-block-button__link:hover,.hv-expand .wp-block-button__link:focus-visible,
.hv-expand-x .wp-block-button__link:hover,.hv-expand-x .wp-block-button__link:focus-visible,
.hv-expand-y .wp-block-button__link:hover,.hv-expand-y .wp-block-button__link:focus-visible,
.hv-underline-fill .wp-block-button__link:hover,.hv-underline-fill .wp-block-button__link:focus-visible{
  color:var(--wsp-paper-hi);
}

/* 個別：初期位置と、ホバー時の到達位置 */
.hv-fill-up .wp-block-button__link::before{transform:translateY(100%)}
.hv-fill-up .wp-block-button__link:hover::before,.hv-fill-up .wp-block-button__link:focus-visible::before{transform:translateY(0)}

.hv-fill-down .wp-block-button__link::before{transform:translateY(-100%)}
.hv-fill-down .wp-block-button__link:hover::before,.hv-fill-down .wp-block-button__link:focus-visible::before{transform:translateY(0)}

.hv-fill-left .wp-block-button__link::before{transform:translateX(100%)}
.hv-fill-left .wp-block-button__link:hover::before,.hv-fill-left .wp-block-button__link:focus-visible::before{transform:translateX(0)}

.hv-fill-right .wp-block-button__link::before{transform:translateX(-100%)}
.hv-fill-right .wp-block-button__link:hover::before,.hv-fill-right .wp-block-button__link:focus-visible::before{transform:translateX(0)}

.hv-fill-diagonal .wp-block-button__link::before{left:-25%;width:150%;transform:skewX(-18deg) translateX(-120%)}
.hv-fill-diagonal .wp-block-button__link:hover::before,.hv-fill-diagonal .wp-block-button__link:focus-visible::before{transform:skewX(-18deg) translateX(0)}

.hv-expand .wp-block-button__link::before{transform:scale(0)}
.hv-expand .wp-block-button__link:hover::before,.hv-expand .wp-block-button__link:focus-visible::before{transform:scale(1)}

.hv-expand-x .wp-block-button__link::before{transform:scaleX(0)}
.hv-expand-x .wp-block-button__link:hover::before,.hv-expand-x .wp-block-button__link:focus-visible::before{transform:scaleX(1)}

.hv-expand-y .wp-block-button__link::before{transform:scaleY(0)}
.hv-expand-y .wp-block-button__link:hover::before,.hv-expand-y .wp-block-button__link:focus-visible::before{transform:scaleY(1)}

/* 左右から中央 / 上下から中央（::before と ::after を使用） */
.hv-fill-sides .wp-block-button__link::before,.hv-fill-sides .wp-block-button__link::after,
.hv-fill-vert .wp-block-button__link::before,.hv-fill-vert .wp-block-button__link::after{
  content:"";position:absolute;z-index:-1;background:var(--wsp-gold);
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.hv-fill-sides .wp-block-button__link::before{left:0;top:0;bottom:0;width:50%;transform-origin:left;transform:scaleX(0)}
.hv-fill-sides .wp-block-button__link::after{right:0;top:0;bottom:0;width:50%;transform-origin:right;transform:scaleX(0)}
.hv-fill-sides .wp-block-button__link:hover::before,.hv-fill-sides .wp-block-button__link:hover::after,
.hv-fill-sides .wp-block-button__link:focus-visible::before,.hv-fill-sides .wp-block-button__link:focus-visible::after{transform:scaleX(1)}

.hv-fill-vert .wp-block-button__link::before{top:0;left:0;right:0;height:50%;transform-origin:top;transform:scaleY(0)}
.hv-fill-vert .wp-block-button__link::after{bottom:0;left:0;right:0;height:50%;transform-origin:bottom;transform:scaleY(0)}
.hv-fill-vert .wp-block-button__link:hover::before,.hv-fill-vert .wp-block-button__link:hover::after,
.hv-fill-vert .wp-block-button__link:focus-visible::before,.hv-fill-vert .wp-block-button__link:focus-visible::after{transform:scaleY(1)}

/* 下線が伸びて背景になる */
.hv-underline-fill .wp-block-button__link::before{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;z-index:-1;
  background:var(--wsp-gold);transition:height .5s cubic-bezier(.22,1,.36,1);
}
.hv-underline-fill .wp-block-button__link:hover::before,.hv-underline-fill .wp-block-button__link:focus-visible::before{height:100%}

/* 背景と文字色が変わる */
.hv-invert .wp-block-button__link:hover,.hv-invert .wp-block-button__link:focus-visible{
  background-color:var(--wsp-gold);color:var(--wsp-paper-hi);
}

/* 影がついて浮き上がる */
.hv-lift .wp-block-button__link:hover,.hv-lift .wp-block-button__link:focus-visible{
  transform:translateY(-4px);box-shadow:0 14px 26px rgba(28,42,58,.18);
}
/* 影が広がる */
.hv-shadow-spread .wp-block-button__link{box-shadow:0 0 0 rgba(28,42,58,0)}
.hv-shadow-spread .wp-block-button__link:hover,.hv-shadow-spread .wp-block-button__link:focus-visible{box-shadow:0 10px 34px rgba(28,42,58,.24)}

/* 下に押し込まれて影が消える */
.hv-press-down .wp-block-button__link{box-shadow:0 8px 16px rgba(28,42,58,.22)}
.hv-press-down .wp-block-button__link:hover,.hv-press-down .wp-block-button__link:focus-visible{transform:translateY(4px);box-shadow:0 0 0 rgba(28,42,58,0)}

/* 立体を押し込む（3D） */
.hv-press-3d .wp-block-button__link{box-shadow:0 6px 0 rgba(28,42,58,.28)}
.hv-press-3d .wp-block-button__link:hover,.hv-press-3d .wp-block-button__link:focus-visible{transform:translateY(4px);box-shadow:0 2px 0 rgba(28,42,58,.28)}

/* 立体が押し込まれて凹む */
.hv-press-inset .wp-block-button__link:hover,.hv-press-inset .wp-block-button__link:focus-visible{transform:translateY(1px);box-shadow:inset 0 4px 9px rgba(28,42,58,.32)}

/* 左下／右下に押し込まれる */
.hv-press-bl .wp-block-button__link:hover,.hv-press-bl .wp-block-button__link:focus-visible{transform:translate(-3px,3px)}
.hv-press-br .wp-block-button__link:hover,.hv-press-br .wp-block-button__link:focus-visible{transform:translate(3px,3px)}

/* 拡大／縮小 */
.hv-scale-up .wp-block-button__link:hover,.hv-scale-up .wp-block-button__link:focus-visible{transform:scale(1.06)}
.hv-scale-down .wp-block-button__link:hover,.hv-scale-down .wp-block-button__link:focus-visible{transform:scale(.94)}

/* 角丸に変わる */
.hv-round .wp-block-button__link:hover,.hv-round .wp-block-button__link:focus-visible{border-radius:999px}

/* 透過する */
.hv-fade .wp-block-button__link:hover,.hv-fade .wp-block-button__link:focus-visible{opacity:.6}

/* くるっと手前／奥に回転 */
.hv-flip-front .wp-block-button__link:hover,.hv-flip-front .wp-block-button__link:focus-visible{transform:perspective(700px) rotateX(16deg)}
.hv-flip-back .wp-block-button__link:hover,.hv-flip-back .wp-block-button__link:focus-visible{transform:perspective(700px) rotateX(-16deg)}

/* 線の上を別の線が伸びる */
.hv-line-grow .wp-block-button__link::before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:rgba(28,42,58,.2)}
.hv-line-grow .wp-block-button__link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--wsp-gold);transition:width .5s cubic-bezier(.22,1,.36,1)}
.hv-line-grow .wp-block-button__link:hover::after,.hv-line-grow .wp-block-button__link:focus-visible::after{width:100%}

/* 枠が現れる */
.hv-border-in .wp-block-button__link::after{content:"";position:absolute;inset:5px;border:1px solid var(--wsp-gold);opacity:0;transform:scale(1.06);transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1);pointer-events:none}
.hv-border-in .wp-block-button__link:hover::after,.hv-border-in .wp-block-button__link:focus-visible::after{opacity:1;transform:scale(1)}

/* 矢印が右側に移動する */
.hv-arrow .wp-block-button__link::after{content:"→";display:inline-block;margin-left:.6em;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.hv-arrow .wp-block-button__link:hover::after,.hv-arrow .wp-block-button__link:focus-visible::after{transform:translateX(6px)}

/* アイコンが回転する（ボタン内の画像・SVGを回す） */
.hv-icon-spin .wp-block-button__link img,.hv-icon-spin .wp-block-button__link svg{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.hv-icon-spin .wp-block-button__link:hover img,.hv-icon-spin .wp-block-button__link:focus-visible img,
.hv-icon-spin .wp-block-button__link:hover svg,.hv-icon-spin .wp-block-button__link:focus-visible svg{transform:rotate(360deg)}

/* 丸が右に／左右に伸びてボタンに変形する（丸ベースの背景が伸びる近似） */
.hv-circle-right .wp-block-button__link::before,.hv-circle-lr .wp-block-button__link::before{
  content:"";position:absolute;top:0;bottom:0;z-index:-1;background:var(--wsp-gold);border-radius:999px;
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-radius .5s ease;
}
.hv-circle-right .wp-block-button__link::before{left:0;width:100%;transform-origin:left;transform:scaleX(0)}
.hv-circle-right .wp-block-button__link:hover::before,.hv-circle-right .wp-block-button__link:focus-visible::before{transform:scaleX(1);border-radius:6px}
.hv-circle-lr .wp-block-button__link::before{left:0;width:100%;transform-origin:center;transform:scaleX(0)}
.hv-circle-lr .wp-block-button__link:hover::before,.hv-circle-lr .wp-block-button__link:focus-visible::before{transform:scaleX(1);border-radius:6px}
.hv-circle-right .wp-block-button__link:hover,.hv-circle-right .wp-block-button__link:focus-visible,
.hv-circle-lr .wp-block-button__link:hover,.hv-circle-lr .wp-block-button__link:focus-visible{color:var(--wsp-paper-hi)}

@media (prefers-reduced-motion: reduce){
  [class*="hv-"] .wp-block-button__link,
  [class*="hv-"] .wp-block-button__link::before,
  [class*="hv-"] .wp-block-button__link::after,
  [class*="hv-"] .wp-block-button__link img,
  [class*="hv-"] .wp-block-button__link svg{transition:none !important}
}

/* =========================================================
   2c. オープニングアニメーション（サイト表示時に一度だけ）
   ・<html> に .wsp-op-play が付いたときだけ再生
   ・視差off・JS無効・セッション2回目は非表示（安全側で崩れない）
   ・背景色は要素の style="--wsp-op-bg:..." で指定
   ========================================================= */
.wsp-opening{position:fixed;inset:0;z-index:99999;display:none;overflow:hidden;pointer-events:none}
.wsp-op-play .wsp-opening{display:block}

/* 背景が上から下に流れる（recipe48） */
.wsp-op-curtain-down{background:var(--wsp-op-bg,#1c2a3a)}
.wsp-op-play .wsp-op-curtain-down{animation:wspOpCurtain 1.1s cubic-bezier(.7,0,.25,1) forwards}
@keyframes wspOpCurtain{0%{transform:translateY(0)}100%{transform:translateY(100%)}}

/* ロゴをふわっと表示して消える（recipe36） */
.wsp-op-logo{background:var(--wsp-op-bg,#1c2a3a);display:flex;align-items:center;justify-content:center}
.wsp-op-mark{max-width:min(60vw,220px);max-height:120px;width:auto;height:auto;opacity:0}
.wsp-op-play .wsp-op-logo{animation:wspOpVeil 2.2s ease forwards}
.wsp-op-play .wsp-op-mark{animation:wspOpMark 2.2s ease forwards}
@keyframes wspOpMark{0%{opacity:0;transform:scale(.98)}22%{opacity:1;transform:scale(1)}68%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.02)}}
@keyframes wspOpVeil{0%,74%{opacity:1}100%{opacity:0;visibility:hidden}}

/* 背景が中央から上下に開く（recipe27） */
.wsp-op-split{background:transparent}
.wsp-op-half{position:absolute;left:0;width:100%;height:50.5%;background:var(--wsp-op-bg,#1c2a3a)}
.wsp-op-top{top:0}
.wsp-op-bottom{bottom:0}
.wsp-op-play .wsp-op-top{animation:wspOpSplitTop 1.1s cubic-bezier(.7,0,.25,1) forwards}
.wsp-op-play .wsp-op-bottom{animation:wspOpSplitBottom 1.1s cubic-bezier(.7,0,.25,1) forwards}
@keyframes wspOpSplitTop{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes wspOpSplitBottom{0%{transform:translateY(0)}100%{transform:translateY(100%)}}

@media (prefers-reduced-motion: reduce){
  .wsp-opening{display:none !important}
}

/* =========================================================
   2d. 画像のホバー動作（画像・カバーにマウスを乗せたとき）
   ・画像 = figure.wp-block-image ／ カバー = .wp-block-cover に付く
   ・テキストが出る系はカバーブロック向け（中の文章を出し入れ）
   ========================================================= */
/* 傾く／大きくする */
.himg-tilt-right,.himg-tilt-left,.himg-grow{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.himg-tilt-right:hover{transform:rotate(3deg)}
.himg-tilt-left:hover{transform:rotate(-3deg)}
.himg-grow:hover{transform:scale(1.05)}

/* 拡大（枠内ズーム） */
.himg-zoom{overflow:hidden}
.himg-zoom img,.himg-zoom .wp-block-cover__image-background{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.himg-zoom:hover img,.himg-zoom:hover .wp-block-cover__image-background{transform:scale(1.08)}

/* モノクロ→カラー */
.himg-gray img,.himg-gray .wp-block-cover__image-background{filter:grayscale(1);transition:filter .6s ease}
.himg-gray:hover img,.himg-gray:hover .wp-block-cover__image-background{filter:grayscale(0)}

/* カバー向け：ボケてテキスト表示 */
.himg-blur-text img,.himg-blur-text .wp-block-cover__image-background{transition:filter .5s ease}
.himg-blur-text .wp-block-cover__inner-container{opacity:0;transition:opacity .5s ease}
.himg-blur-text:hover img,.himg-blur-text:hover .wp-block-cover__image-background{filter:blur(6px)}
.himg-blur-text:hover .wp-block-cover__inner-container{opacity:1}

/* カバー向け：左／下からオーバーレイ＋テキスト、円が広がる＋テキスト */
.himg-overlay-left,.himg-overlay-bottom,.himg-circle{position:relative;overflow:hidden}
.himg-overlay-left::after,.himg-overlay-bottom::after{content:"";position:absolute;inset:0;background:rgba(28,42,58,.72);z-index:1;pointer-events:none;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.himg-overlay-left::after{transform:translateX(-100%)}
.himg-overlay-bottom::after{transform:translateY(100%)}
.himg-overlay-left:hover::after,.himg-overlay-bottom:hover::after{transform:translate(0,0)}
.himg-circle::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;background:rgba(28,42,58,.72);transform:translate(-50%,-50%);z-index:1;pointer-events:none;transition:width .55s ease,height .55s ease}
.himg-circle:hover::after{width:260%;height:260%}
.himg-overlay-left .wp-block-cover__inner-container,.himg-overlay-bottom .wp-block-cover__inner-container,
.himg-circle .wp-block-cover__inner-container{position:relative;z-index:2;opacity:0;transition:opacity .5s ease .12s}
.himg-overlay-left:hover .wp-block-cover__inner-container,.himg-overlay-bottom:hover .wp-block-cover__inner-container,
.himg-circle:hover .wp-block-cover__inner-container{opacity:1}

@media (prefers-reduced-motion: reduce){
  [class*="himg-"],[class*="himg-"] img,[class*="himg-"] .wp-block-cover__image-background,
  [class*="himg-"] .wp-block-cover__inner-container,[class*="himg-"]::after{transition:none !important}
  .himg-blur-text .wp-block-cover__inner-container,.himg-overlay-left .wp-block-cover__inner-container,
  .himg-overlay-bottom .wp-block-cover__inner-container,.himg-circle .wp-block-cover__inner-container{opacity:1 !important}
  [class*="himg-"]::after{display:none !important}
}

/* =========================================================
   2e. スライダー（グループ・カラム・ギャラリーの中身を流す）
   ・JSが中身をトラックにまとめ、マーキーは複製して無限ループ
   ・編集画面では普通の並びで表示され、公開ページでスライダーになる
   ========================================================= */
/* マーキー（同じ速度でゆっくり流れる／左側が消える） */
.wsp-slider,.wsp-slider-mask{overflow:hidden}
.wsp-slider .wsp-slider-track,.wsp-slider-mask .wsp-slider-track{
  display:flex;flex-wrap:nowrap;width:max-content;align-items:center;
  gap:clamp(1rem,3vw,2.5rem);animation:wspMarquee 32s linear infinite;
}
.wsp-slider .wsp-slider-track > *,.wsp-slider-mask .wsp-slider-track > *{flex:0 0 auto;margin:0}
.wsp-slider:hover .wsp-slider-track,.wsp-slider-mask:hover .wsp-slider-track{animation-play-state:paused}
@keyframes wspMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.wsp-slider-mask{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 100%);
}

/* フェード（その場でふわっと切り替わる） */
.wsp-slider-fade{position:relative}
.wsp-slider-fade > .wsp-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease}
.wsp-slider-fade > .wsp-slide.wsp-active{opacity:1}

@media (prefers-reduced-motion: reduce){
  .wsp-slider .wsp-slider-track,.wsp-slider-mask .wsp-slider-track{animation:none !important}
  .wsp-slider-fade > .wsp-slide{transition:none !important}
}

/* =========================================================
   2f. テキストナビ（リンクのホバー）
   ・ナビゲーション・段落・リストに付けると、中の <a> に効く
   ========================================================= */
[class*="tnav-"] a{position:relative;text-decoration:none;transition:color .3s ease}

/* 下線が左→右（recipe16） */
.tnav-underline a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--wsp-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.tnav-underline a:hover::after{transform:scaleX(1)}

/* 下線が中央→左右（recipe05） */
.tnav-underline-center a::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--wsp-gold);transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.tnav-underline-center a:hover::after{transform:scaleX(1)}

/* 中心から左右に線（やや太め・recipe65） */
.tnav-line-center a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:var(--wsp-gold);transform:scaleX(0);transform-origin:center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.tnav-line-center a:hover::after{transform:scaleX(1)}

/* 上線が左→右（recipe50） */
.tnav-overline a::before{content:"";position:absolute;left:0;top:-2px;width:100%;height:1px;background:var(--wsp-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.tnav-overline a:hover::before{transform:scaleX(1)}

/* 枠線がつく（recipe66） */
.tnav-border a{padding:.25em .6em}
.tnav-border a::before{content:"";position:absolute;inset:0;border:1px solid var(--wsp-gold);opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.tnav-border a:hover::before{opacity:1;transform:scale(1)}

/* 背景が左→右（recipe38） */
.tnav-bg a{padding:.15em .5em;z-index:0}
.tnav-bg a::before{content:"";position:absolute;inset:0;background:var(--wsp-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1);z-index:-1}
.tnav-bg a:hover{color:var(--wsp-paper-hi)}
.tnav-bg a:hover::before{transform:scaleX(1)}

/* 背景に丸（recipe37） */
.tnav-circle a{padding:.35em .7em;z-index:0}
.tnav-circle a::before{content:"";position:absolute;left:50%;top:50%;width:2.4em;height:2.4em;border-radius:50%;background:var(--wsp-gold-soft);transform:translate(-50%,-50%) scale(0);transition:transform .35s cubic-bezier(.22,1,.36,1);z-index:-1}
.tnav-circle a:hover::before{transform:translate(-50%,-50%) scale(1)}

/* テキストが入れ替わる（recipe07・JSが .tnav-roll でラップ） */
.tnav-swap a{overflow:hidden;display:inline-block;vertical-align:bottom}
.tnav-swap a .tnav-roll{display:inline-block;position:relative;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.tnav-swap a .tnav-roll::after{content:attr(data-text);position:absolute;left:0;top:100%;width:100%}
.tnav-swap a:hover .tnav-roll{transform:translateY(-100%)}

@media (prefers-reduced-motion: reduce){
  [class*="tnav-"] a::before,[class*="tnav-"] a::after,[class*="tnav-"] a .tnav-roll{transition:none !important}
}

/* =========================================================
   2g. SWELL ヘッダーメニュー（グローバルナビ）のホバー
   ・カスタマイザーで選ぶと <body> に wsp-gnav-XXX が付く
   ・対象は .c-gnav の各リンクラベル（.ttl）
   ・SWELL標準のホバー下線は、選択時のみ止めて二重を防ぐ
   ========================================================= */
[class*="wsp-gnav-"] .c-gnav > .menu-item > a::after{display:none !important}
[class*="wsp-gnav-"] .c-gnav > .menu-item > a .ttl{position:relative;display:inline-block}

/* 下線 左→右 */
.wsp-gnav-underline .c-gnav > .menu-item > a .ttl::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--wsp-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.wsp-gnav-underline .c-gnav > .menu-item:hover > a .ttl::after{transform:scaleX(1)}

/* 下線 中央→左右 */
.wsp-gnav-underline-center .c-gnav > .menu-item > a .ttl::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--wsp-gold);transform:scaleX(0);transform-origin:center;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.wsp-gnav-underline-center .c-gnav > .menu-item:hover > a .ttl::after{transform:scaleX(1)}

/* 中心から左右に線（太め） */
.wsp-gnav-line-center .c-gnav > .menu-item > a .ttl::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--wsp-gold);transform:scaleX(0);transform-origin:center;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.wsp-gnav-line-center .c-gnav > .menu-item:hover > a .ttl::after{transform:scaleX(1)}

/* 上線 左→右 */
.wsp-gnav-overline .c-gnav > .menu-item > a .ttl::before{content:"";position:absolute;left:0;top:-3px;width:100%;height:1px;background:var(--wsp-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.wsp-gnav-overline .c-gnav > .menu-item:hover > a .ttl::before{transform:scaleX(1)}

/* 枠線がつく */
.wsp-gnav-border .c-gnav > .menu-item > a .ttl{padding:.2em .55em}
.wsp-gnav-border .c-gnav > .menu-item > a .ttl::before{content:"";position:absolute;inset:0;border:1px solid var(--wsp-gold);opacity:0;transform:scale(.9);transition:opacity .3s ease,transform .3s ease}
.wsp-gnav-border .c-gnav > .menu-item:hover > a .ttl::before{opacity:1;transform:scale(1)}

/* 背景 左→右 */
.wsp-gnav-bg .c-gnav > .menu-item > a .ttl{padding:.15em .5em;z-index:0}
.wsp-gnav-bg .c-gnav > .menu-item > a .ttl::before{content:"";position:absolute;inset:0;background:var(--wsp-gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1);z-index:-1}
.wsp-gnav-bg .c-gnav > .menu-item:hover > a .ttl{color:var(--wsp-paper-hi)}
.wsp-gnav-bg .c-gnav > .menu-item:hover > a .ttl::before{transform:scaleX(1)}

/* 背景に丸 */
.wsp-gnav-circle .c-gnav > .menu-item > a .ttl{padding:.3em .6em;z-index:0}
.wsp-gnav-circle .c-gnav > .menu-item > a .ttl::before{content:"";position:absolute;left:50%;top:50%;width:2.2em;height:2.2em;border-radius:50%;background:var(--wsp-gold-soft);transform:translate(-50%,-50%) scale(0);transition:transform .35s cubic-bezier(.22,1,.36,1);z-index:-1}
.wsp-gnav-circle .c-gnav > .menu-item:hover > a .ttl::before{transform:translate(-50%,-50%) scale(1)}

/* テキストが入れ替わる（JSが .ttl の中を .tnav-roll で包む） */
.wsp-gnav-swap .c-gnav > .menu-item > a .ttl{overflow:hidden}
.wsp-gnav-swap .c-gnav > .menu-item > a .ttl .tnav-roll{display:inline-block;position:relative;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.wsp-gnav-swap .c-gnav > .menu-item > a .ttl .tnav-roll::after{content:attr(data-text);position:absolute;left:0;top:100%;width:100%}
.wsp-gnav-swap .c-gnav > .menu-item:hover > a .ttl .tnav-roll{transform:translateY(-100%)}

@media (prefers-reduced-motion: reduce){
  [class*="wsp-gnav-"] .c-gnav .ttl::before,[class*="wsp-gnav-"] .c-gnav .ttl::after,
  [class*="wsp-gnav-"] .c-gnav .ttl .tnav-roll{transition:none !important}
}

/* =========================================================
   3. 共通の小物（ラベル・罫）
   ========================================================= */
.wsp-eyebrow{
  font-family:var(--wsp-serif-la);
  font-style:italic;font-weight:500;
  letter-spacing:.02em;color:var(--wsp-gold);
  font-size:1.05rem;margin-bottom:.4rem;
}
.wsp-caps{
  font-family:var(--wsp-serif-la);
  letter-spacing:.42em;text-transform:uppercase;
  font-size:.7rem;color:var(--wsp-gold);
}
.wsp-rule{width:1px;height:64px;background:var(--wsp-gold-soft);margin:0 auto}

/* 画像プレースホルダ／画像は角丸を最小に、余白で見せる */
.wsp-hero img,.wsp-offer img,.wsp-profile img{border-radius:2px;display:block;width:100%}

/* =========================================================
   フォント選択（見出し・段落・リスト・引用）
   ・ブロックに付けると、その中の文字が指定フォントになる
   ========================================================= */
.wsp-font-noto-serif{font-family:"Noto Serif JP", serif}
.wsp-font-zen-old{font-family:"Zen Old Mincho", serif}
.wsp-font-kaisei{font-family:"Kaisei Tokumin", serif}
.wsp-font-zen-gothic{font-family:"Zen Kaku Gothic New", sans-serif}
.wsp-font-noto-sans{font-family:"Noto Sans JP", sans-serif}
.wsp-font-maru{font-family:"Zen Maru Gothic", sans-serif}
.wsp-font-klee{font-family:"Klee One", cursive}

/* =========================================================
   4. HERO
   ========================================================= */
.wsp-hero{padding-block:clamp(7rem,16vw,12rem) var(--wsp-pad-y)}
.wsp-hero .wp-block-columns{align-items:center;gap:clamp(2rem,5vw,5rem)}
.wsp-hero .wp-block-heading{
  font-family:var(--wsp-serif-jp);font-weight:500;
  font-size:clamp(2.4rem,6vw,4.7rem);line-height:1.5;
  letter-spacing:.03em;margin:1.4rem 0 1.8rem;
}
.wsp-hero .wsp-lead{color:var(--wsp-ink-soft);line-height:2.15;max-width:26em}

/* =========================================================
   5. STATEMENT（余白に一文）
   ========================================================= */
.wsp-statement{padding-block:var(--wsp-pad-y);text-align:center}
.wsp-statement>*{margin-inline:auto}
.wsp-statement .wsp-big{
  font-family:var(--wsp-serif-jp);font-weight:500;
  font-size:clamp(1.5rem,3.4vw,2.3rem);line-height:2.1;
  letter-spacing:.04em;max-width:34rem;
}
.wsp-statement .wsp-sub{color:var(--wsp-ink-soft);line-height:2.3;max-width:30rem;margin-top:2rem}

/* =========================================================
   6. OFFER（交互配置の編集レイアウト）
   ========================================================= */
.wsp-offer{padding-block:var(--wsp-pad-y);background:var(--wsp-paper-hi)}
.wsp-offer .wsp-head{margin-bottom:clamp(3rem,7vw,6rem)}
.wsp-offer .wsp-head .wsp-caps{display:block;margin-bottom:1.1rem}
.wsp-offer .wsp-head .wp-block-heading{
  font-family:var(--wsp-serif-jp);font-weight:500;
  font-size:clamp(1.9rem,4vw,3rem);letter-spacing:.05em;line-height:1.6;
}
.wsp-offer .wp-block-columns{
  align-items:center;gap:clamp(2rem,6vw,6rem);
  margin-bottom:clamp(4rem,9vw,8rem);
}
.wsp-offer .wp-block-columns:last-child{margin-bottom:0}
.wsp-offer .wsp-idx{font-family:var(--wsp-serif-la);font-size:1.05rem;color:var(--wsp-gold);letter-spacing:.1em}
.wsp-offer .wp-block-heading{
  font-family:var(--wsp-serif-jp);font-weight:500;
  font-size:clamp(1.5rem,2.6vw,2rem);letter-spacing:.05em;margin:.7rem 0 1.2rem;
}
.wsp-offer .wsp-body{color:var(--wsp-ink-soft);line-height:2.25;max-width:24em}

/* =========================================================
   7. DARK（藍の面に白抜き）
   ========================================================= */
.wsp-dark{
  padding-block:var(--wsp-pad-y);
  background:var(--wsp-ink);color:var(--wsp-paper-hi);text-align:center;
}
.wsp-dark>*{margin-inline:auto}
.wsp-dark .wsp-caps{color:var(--wsp-gold)}
.wsp-dark .wsp-rule{background:var(--wsp-gold-soft)}
.wsp-dark .wsp-big{
  font-family:var(--wsp-serif-jp);font-weight:500;
  font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.95;
  letter-spacing:.08em;margin:1.4rem auto;max-width:38rem;
}
.wsp-dark .wsp-sub{color:rgba(244,239,230,.66);line-height:2.3;max-width:32rem}

/* =========================================================
   8. PROFILE
   ========================================================= */
.wsp-profile{padding-block:var(--wsp-pad-y)}
.wsp-profile .wp-block-columns{align-items:center;gap:clamp(2rem,6vw,6rem)}
.wsp-profile .wsp-caps{display:block;margin-bottom:1.1rem}
.wsp-profile .wp-block-heading{
  font-family:var(--wsp-serif-jp);font-weight:500;
  font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:.05em;margin-bottom:.3rem;
}
.wsp-profile .wsp-role{font-family:var(--wsp-serif-la);font-style:italic;color:var(--wsp-gold);letter-spacing:.03em;margin-bottom:1.6rem}
.wsp-profile .wsp-body{color:var(--wsp-ink-soft);line-height:2.3;max-width:30em}

/* =========================================================
   9. CTA（煽らない、細い金枠）
   ========================================================= */
.wsp-cta{padding-block:var(--wsp-pad-y);background:var(--wsp-paper-hi);text-align:center}
.wsp-cta>*{margin-inline:auto}
.wsp-cta .wsp-lead{
  font-family:var(--wsp-serif-jp);font-weight:500;
  font-size:clamp(1.5rem,3vw,2.1rem);letter-spacing:.05em;line-height:1.9;margin-bottom:2.4rem;
}
.wsp-cta .wp-block-button__link,
.wsp-btn .wp-block-button__link{
  background:transparent;color:var(--wsp-ink);
  border:1px solid var(--wsp-gold);border-radius:1px;
  font-family:var(--wsp-serif-la);font-style:italic;font-size:1.05rem;letter-spacing:.08em;
  padding:1rem 3.2rem;transition:background .45s ease,color .45s ease;
}
.wsp-cta .wp-block-button__link:hover,
.wsp-btn .wp-block-button__link:hover{background:var(--wsp-gold);color:var(--wsp-paper-hi)}

/* =========================================================
   10. レスポンシブ
   ========================================================= */
@media (max-width:820px){
  .wsp-hero .wp-block-columns,
  .wsp-offer .wp-block-columns,
  .wsp-profile .wp-block-columns{gap:2rem}
}