@charset "UTF-8";
/* =========================================================
   WEBで叶える屋さん LP
   BEM + 名前空間 "wdk-*" で Cocoon 本体との詳細度衝突を回避
   ========================================================= */

/* ---------- CSS変数（デザイントークン） ---------- */
.wdk-lp-body{
	--wdk-c-ink:        #1a2b4a;
	--wdk-c-ink-2:      #24365a;
	--wdk-c-ink-soft:   #4a5a78;
	--wdk-c-accent:     #e8833a;
	--wdk-c-accent-dk:  #c76a24;
	--wdk-c-accent-sf:  #fbeadb;
	--wdk-c-bg:         #fafaf7;
	--wdk-c-bg-2:       #f2f1ec;
	--wdk-c-line:       #e3e1d8;
	--wdk-c-text:       #22283a;
	--wdk-c-text-mute:  #6b7186;
	--wdk-c-white:      #ffffff;
	--wdk-c-success:    #2f7d5a;
	--wdk-c-danger:     #b53a3a;

	--wdk-f-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
	--wdk-f-disp: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;

	--wdk-r-sm: 8px;
	--wdk-r-md: 14px;
	--wdk-r-lg: 22px;
	--wdk-r-pill: 999px;
	--wdk-sh-1: 0 2px 8px rgba(26,43,74,.06);
	--wdk-sh-2: 0 10px 30px rgba(26,43,74,.10);
	--wdk-sh-3: 0 20px 60px rgba(26,43,74,.18);

	--wdk-ease: cubic-bezier(.22,.61,.36,1);
	--wdk-dur: .45s;

	--wdk-wrap: 1120px;
	--wdk-gutter: clamp(20px, 4vw, 40px);
}

/* ---------- Reset（LPページのみに限定） ---------- */
.wdk-lp-body,
.wdk-lp-body *,
.wdk-lp-body *::before,
.wdk-lp-body *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* ============================================================
   iPhone Safari 幅ゆらぎ対策 — viewport 実幅漏れの封殺
   Cocoon親テーマは html/body に overflow-x を明示しないため、
   .wdk-hero::before / ::after 等の絶対配置装飾がスクロール幅を
   押し広げる余地を残す。ここで漏れ止めを行う。
   overflow: clip は scroll container を生成しないため、
   position: sticky や scroll-behavior と衝突しない安全な選択肢。
   ============================================================ */
html,
body.wdk-lp-body{
	overflow-x: clip;         /* Safari 16+ / Chrome 111+ */
	max-width: 100%;
}
/* clipに未対応の古いSafari向け二段フォールバック */
@supports not (overflow: clip){
	html,
	body.wdk-lp-body{ overflow-x: hidden; }
}


.wdk-lp-body{
	margin: 0; padding: 0;
	font-family: var(--wdk-f-sans);
	font-size: 16px; line-height: 1.8;
	color: var(--wdk-c-text);
	background: var(--wdk-c-bg);
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
}
.wdk-lp-body img,
.wdk-lp-body svg{ max-width: 100%; display: block; }

.wdk-lp-body a{ color: inherit; text-decoration: none; }
/* ★ .wdk-btn 系にリセットが勝たないよう、素の <button> だけを対象にする */
.wdk-lp-body button:not([class*="wdk-btn"]){
    font-family: inherit; cursor: pointer; border: 0; background: transparent;
}

.wdk-lp-body h1,
.wdk-lp-body h2,
.wdk-lp-body h3,
.wdk-lp-body h4{ font-family: var(--wdk-f-disp); line-height: 1.4; letter-spacing: .02em; margin: 0; }
.wdk-lp-body p{ margin: 0; }
.wdk-lp-body ul{ margin: 0; padding: 0; list-style: none; }

.wdk-lp-body :focus-visible{
	outline: 3px solid var(--wdk-c-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- Utility ---------- */
.wdk-wrap{ max-width: var(--wdk-wrap); margin: 0 auto; padding: 0 var(--wdk-gutter); }
.wdk-section{ padding: clamp(64px, 9vw, 120px) 0; }
.wdk-eyebrow{
	display: inline-block;
	font-size: .82rem; letter-spacing: .24em; font-weight: 700;
	color: var(--wdk-c-accent-dk);
	margin-bottom: 14px;
	text-transform: uppercase;
}
.wdk-eyebrow--on-dark{ color: var(--wdk-c-accent); }
.wdk-h-sec{
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 900; color: var(--wdk-c-ink);
	margin-bottom: 14px;
}
.wdk-h-sec__accent{ color: var(--wdk-c-accent); }
.wdk-h-sec--on-dark{ color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.wdk-lead{
	font-size: clamp(1rem, 1.4vw, 1.06rem);
	color: var(--wdk-c-ink-soft); margin-bottom: 44px; max-width: 60ch;
}
.wdk-lead--on-dark{ color: rgba(255,255,255,.85); margin-bottom: 36px; }
.wdk-center{ text-align: center; }
.wdk-center .wdk-lead{ margin-left: auto; margin-right: auto; }

/* ============================================================
   ★ 日本語自然改行トークン（Universal Optimality 準拠）
   ------------------------------------------------------------
   - word-break: auto-phrase … 対応ブラウザ（Chromium 119+, Safari 17+）で
     日本語文節を検出し「意味の切れ目」で自動改行させる。
   - overflow-wrap: anywhere  … 長い英字・URLがはみ出す事故を防ぐ。
   - line-break: strict       … 句読点や小書き仮名を行頭に絶対に置かない。
   - text-wrap: pretty        … 見出し末尾の "孤語（オーファン）" を抑制。
   ------------------------------------------------------------
   本文向け（複数行）／見出し向け（少数行）で2種類のミックスインを用意する。
============================================================ */
.wdk-lp-body{
    /* デフォルト全要素で禁則を厳密化（Cocoon には影響しない） */
    line-break: strict;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* 本文の長文（リード・説明文・お客様の声・FAQ回答） */
.wdk-lp-body .wdk-lead,
.wdk-lp-body .wdk-hero__sub,
.wdk-lp-body .wdk-pain__txt,
.wdk-lp-body .wdk-reason__txt,
.wdk-lp-body .wdk-flow__txt,
.wdk-lp-body .wdk-select__desc,
.wdk-lp-body .wdk-voice__txt,
.wdk-lp-body .wdk-faq__a p,
.wdk-lp-body .wdk-faq__a,
.wdk-lp-body .wdk-form__note,
.wdk-lp-body .wdk-svc__item{
    word-break: auto-phrase;      /* 日本語文節で改行 */
    overflow-wrap: anywhere;
    line-break: strict;
    text-wrap: pretty;
    hanging-punctuation: allow-end;
}

/* 見出し・CTA・カードタイトル（孤語を抑え、見た目のバランスを整える） */
.wdk-lp-body .wdk-h-sec,
.wdk-lp-body .wdk-hero__h,
.wdk-lp-body .wdk-select__ttl,
.wdk-lp-body .wdk-reason__ttl,
.wdk-lp-body .wdk-pain__ttl,
.wdk-lp-body .wdk-flow__ttl,
.wdk-lp-body .wdk-service__ttl,
.wdk-lp-body .wdk-faq__q{
    word-break: auto-phrase;
    line-break: strict;
    text-wrap: balance;           /* 見出しは balance で行末を揃える */
}

/* ★ PC / SP で表示を出し分ける改行ユーティリティ
   - <br class="wdk-br-pc">   … PC でのみ改行、SP では消える
   - <br class="wdk-br-sp">   … SP でのみ改行、PC では消える
   - <span class="wdk-nowrap">…</span> … 語句の折り返し禁止（例：「制作のご相談」） */
.wdk-br-pc{ display: inline; }
.wdk-br-sp{ display: none; }
.wdk-nowrap{ white-space: nowrap; display: inline-block; }

@media (max-width: 640px){
    .wdk-br-pc{ display: none; }
    .wdk-br-sp{ display: inline; }
}

/* auto-phrase 非対応ブラウザ向けフォールバック（Firefox 等）
   ぶら下げ禁則と anywhere でも最低限「単語途中で切れる」事故は防ぐ */
@supports not (word-break: auto-phrase){
    .wdk-lp-body .wdk-lead,
    .wdk-lp-body .wdk-hero__sub,
    .wdk-lp-body .wdk-pain__txt,
    .wdk-lp-body .wdk-reason__txt,
    .wdk-lp-body .wdk-select__desc,
    .wdk-lp-body .wdk-voice__txt,
    .wdk-lp-body .wdk-faq__a{
        word-break: keep-all;
        overflow-wrap: anywhere;
    }
}


/* ---------- Buttons ----------
   [重要]
   Cocoon 親テーマの button / .entry-content button 等の詳細度に勝つため、
   すべて .wdk-lp-body を前置してスコープ内で最強の詳細度を確保する。
   さらに .wdk-btn--primary の背景色は "静止時が真っ白" 事故を絶対に起こさないよう
   !important で固定（LPスコープ内なので副作用なし）。
============================================================ */
.wdk-lp-body .wdk-btn{
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 16px 30px; min-height: 56px;
	font-weight: 700; font-size: 1rem;
	line-height: 1.4;
	color: #fff;
	border: 0;
	border-radius: var(--wdk-r-pill);
	transition: transform var(--wdk-dur) var(--wdk-ease),
	            box-shadow var(--wdk-dur) var(--wdk-ease),
	            background var(--wdk-dur) var(--wdk-ease),
	            color var(--wdk-dur) var(--wdk-ease);
	will-change: transform;
	text-decoration: none;
	-webkit-appearance: none;
	appearance: none;
}
.wdk-lp-body .wdk-btn--primary{
	background: var(--wdk-c-accent) !important;   /* ★ 静止時オレンジを絶対保証 */
	color: #fff !important;
	box-shadow: 0 8px 20px rgba(232,131,58,.35);
	position: relative; overflow: hidden;
}
.wdk-lp-body .wdk-btn--primary::before{
	content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
	animation: wdk-shine 3.2s ease-in-out infinite;
}
@keyframes wdk-shine{
	0%   { left: -60%; }
	40%  { left: 130%; }
	100% { left: 130%; }
}
.wdk-lp-body .wdk-btn--primary:hover,
.wdk-lp-body .wdk-btn--primary:focus-visible{
	background: var(--wdk-c-accent-dk) !important;
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(232,131,58,.45);
}
.wdk-lp-body .wdk-btn--ghost{
	background: transparent !important;
	color: var(--wdk-c-ink) !important;
	border: 2px solid var(--wdk-c-ink);
}
.wdk-lp-body .wdk-btn--ghost:hover,
.wdk-lp-body .wdk-btn--ghost:focus-visible{
	background: var(--wdk-c-ink) !important;
	color: #fff !important;
	transform: translateY(-2px);
}
.wdk-lp-body .wdk-btn--lg{ padding: 20px 40px; min-height: 64px; font-size: 1.08rem; }
.wdk-lp-body .wdk-btn__arrow{ transition: transform var(--wdk-dur) var(--wdk-ease); }
.wdk-lp-body .wdk-btn:hover .wdk-btn__arrow{ transform: translateX(4px); }


/* ---------- Header ---------- */
.wdk-header{
	position: fixed; inset: 0 0 auto 0; z-index: 80;
	background: rgba(250,250,247,.85);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--wdk-dur) var(--wdk-ease),
	            background var(--wdk-dur) var(--wdk-ease);
}
.wdk-header.is-scrolled{
	border-color: var(--wdk-c-line);
	background: rgba(250,250,247,.96);
}
.wdk-header .wdk-wrap{
	display: flex; align-items: center; justify-content: space-between;
	height: 72px;
}
.wdk-logo{
	display: flex; align-items: center; gap: 10px;
	font-family: var(--wdk-f-disp); font-weight: 900; font-size: 1.05rem;
	color: var(--wdk-c-ink);
}
.wdk-logo--on-dark{ color: #fff; }
.wdk-logo__mark{
	width: 34px; height: 34px; border-radius: 10px;
	background: linear-gradient(135deg, var(--wdk-c-ink) 0%, var(--wdk-c-accent) 130%);
	display: grid; place-items: center; color: #fff;
	font-weight: 900; font-size: .95rem;
}
.wdk-logo--on-dark .wdk-logo__mark{ background: var(--wdk-c-accent); }

/* ---------- Logo Mark（1:1画像バリアント） ----------
   - 正方形WebPロゴを --wdk-r-md 角丸で載せる
   - 画像自体の背景ノイズを消すため overflow:hidden で完全内接
   - ダークフッター側は薄い光彩リングで浮き上がらせる
*/
.wdk-logo__mark--img{
    width: 40px; height: 40px;
    border-radius: var(--wdk-r-md);
    background: #fff;
    padding: 0;
    overflow: hidden;
    box-shadow: var(--wdk-sh-1);
    border: 1px solid var(--wdk-c-line);
    transition: transform var(--wdk-dur) var(--wdk-ease),
                box-shadow var(--wdk-dur) var(--wdk-ease);
}
.wdk-logo__mark--img img{
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    aspect-ratio: 1 / 1;
}
.wdk-logo:hover .wdk-logo__mark--img{
    transform: translateY(-1px);
    box-shadow: var(--wdk-sh-2);
}

/* ダーク（フッター）側：薄いオレンジ光彩リングで存在感を担保 */
.wdk-logo--on-dark .wdk-logo__mark--img{
    background: #fff;
    border-color: rgba(255,255,255,.12);
    box-shadow:
        0 0 0 1px rgba(232,131,58,.28),
        0 6px 18px rgba(0,0,0,.28);
}

/* ---------- Logo Text ----------
   画像マークと文字の間の呼吸を再設計（水の流れの間） */
.wdk-logo__text{
    font-family: var(--wdk-f-disp);
    font-weight: 900;
    font-size: clamp(.82rem, 3.4vw, 1.05rem);
    letter-spacing: .01em;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 640px){
    .wdk-logo__mark--img{ width: 36px; height: 36px; }
}


.wdk-header__cta{ padding: 12px 22px; min-height: 44px; font-size: .92rem; }
@media (max-width: 640px){
	.wdk-header__cta{ padding: 10px 16px; font-size: .85rem; }
}
@media (max-width: 400px){
	.wdk-header__cta{ padding: 8px 12px; font-size: .78rem; }
}

/* ---------- Main（固定ヘッダー分の余白） ---------- */
.wdk-main{ padding-top: 0; }

/* ---------- Hero ---------- */
.wdk-hero{
	position: relative; overflow: hidden;
	padding: calc(72px + 60px) 0 clamp(72px, 12vw, 140px);
	background:
		radial-gradient(1200px 600px at 90% -10%, rgba(232,131,58,.14), transparent 60%),
		radial-gradient(900px 500px at -10% 20%, rgba(26,43,74,.10), transparent 55%),
		linear-gradient(180deg, var(--wdk-c-bg) 0%, #f4f2ec 100%);
}
.wdk-hero::before,
.wdk-hero::after{
	content: ""; position: absolute; border-radius: 50%; filter: blur(2px);
	pointer-events: none;
}
.wdk-hero::before{
	width: 520px; height: 520px; right: -140px; top: -120px;
	background: conic-gradient(from 210deg, transparent, rgba(232,131,58,.18), transparent 60%);
	animation: wdk-spin 40s linear infinite;
}
.wdk-hero::after{
	width: 380px; height: 380px; left: -120px; bottom: -100px;
	background: radial-gradient(circle, rgba(26,43,74,.16), transparent 65%);
	animation: wdk-drift 12s var(--wdk-ease) infinite alternate;
}
@keyframes wdk-drift{
	0%   { transform: translate(0, 0) scale(1); }
	100% { transform: translate(24px, -16px) scale(1.08); }
}
@keyframes wdk-spin{ to { transform: rotate(360deg); } }

@keyframes wdk-float{
	0%, 100% { transform: translate3d(0, 0,   0); }
	50%      { transform: translate3d(0, -10px, 0); }
}
/* wdk-float は translateY のみを扱うため、X軸を明示的に0固定して
   Safariが合成マトリクスからXを推測する余地を消す。
   translate3d 化で GPU レイヤを固定し、サブピクセル丸め方向を安定化。 */
.wdk-hero__stage{
	animation: wdk-float 6s var(--wdk-ease) infinite;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.wdk-hero .wdk-wrap{ position: relative; z-index: 2; }
.wdk-hero__grid{
	display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px;
	align-items: center;
}
@media (max-width: 900px){
	.wdk-hero__grid{ grid-template-columns: 1fr; gap: 40px; }
}
.wdk-hero__title{
	font-size: clamp(1.9rem, 5vw, 3.2rem);
	font-weight: 900; line-height: 1.32; color: var(--wdk-c-ink);
	letter-spacing: .01em;
}
.wdk-hero__hl{
	background: linear-gradient(180deg, transparent 62%, rgba(232,131,58,.35) 62%);
	padding: 0 .1em;
}
.wdk-hero__sm{
	display: block; font-size: .55em; font-weight: 700;
	color: var(--wdk-c-ink-soft); margin-top: 12px; letter-spacing: .06em;
}
.wdk-hero__sub{
	margin-top: 26px; font-size: 1.05rem; color: var(--wdk-c-ink-soft); max-width: 52ch;
}
.wdk-hero__badges{
	display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px;
}
.wdk-badge{
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: var(--wdk-r-pill);
	background: var(--wdk-c-white); border: 1px solid var(--wdk-c-line);
	font-size: .85rem; font-weight: 700; color: var(--wdk-c-ink);
	box-shadow: var(--wdk-sh-1);
}
.wdk-badge__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--wdk-c-accent); }
.wdk-hero__cta{ margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero Visual：AI×プロ総合力 概念図 */

.wdk-hero__visual{
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.wdk-flow{
	background: #fff; border-radius: var(--wdk-r-lg);
	box-shadow: var(--wdk-sh-3); border: 1px solid var(--wdk-c-line);
	padding: 26px 22px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.wdk-flow__pros{ display: flex; gap: 10px; width: 100%; justify-content: center; }
.wdk-flow__node{
	flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
	background: var(--wdk-c-bg-2); border-radius: 14px; padding: 14px 6px;
}
.wdk-flow__ico{ font-size: 1.6rem; }
.wdk-flow__lbl{ font-size: .74rem; font-weight: 700; color: var(--wdk-c-ink); white-space: nowrap; }

.wdk-flow__connect{
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	margin: 6px 0; width: 100%;
}
.wdk-flow__connect-line{
	width: 2px; height: 22px; background: var(--wdk-c-line);
	position: relative; overflow: hidden;
}
.wdk-flow__connect-line::before{
	content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
	background: linear-gradient(180deg, transparent 0%, var(--wdk-c-accent) 50%, transparent 100%);
	animation: wdk-flow-drip 1.8s var(--wdk-ease) infinite;
}
.wdk-flow__connect-line::after{
	content: ""; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
	border: 5px solid transparent; border-top-color: var(--wdk-c-accent);
}
@keyframes wdk-flow-drip{
	0%   { top: -100%; }
	100% { top: 100%; }
}
.wdk-flow__connect-txt{
	font-size: .68rem; font-weight: 700; color: var(--wdk-c-accent-dk);
	letter-spacing: .02em; text-align: center;
}
.wdk-flow__connect--down .wdk-flow__connect-line{ height: 26px; }

.wdk-flow__hub{
	width: 100%; text-align: center; border-radius: 16px; padding: 18px 14px;
	background: linear-gradient(135deg, var(--wdk-c-ink) 0%, var(--wdk-c-ink-2) 100%);
	color: #fff; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.wdk-flow__hub-ico{ font-size: 1.8rem; }
.wdk-flow__hub-ttl{
	font-family: var(--wdk-f-disp); font-weight: 900; font-size: 1.15rem; line-height: 1.3;
	color: var(--wdk-c-accent);
}
.wdk-flow__hub-sub{ font-size: .72rem; opacity: .85; }

.wdk-flow__result{
	width: 100%; text-align: center; border-radius: 16px; padding: 16px 14px;
	background: var(--wdk-c-bg-2); border: 1px dashed var(--wdk-c-line);
	display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.wdk-flow__result-num{
	font-family: var(--wdk-f-disp); font-weight: 900; font-size: 2.2rem; line-height: 1;
	color: var(--wdk-c-ink);
}
.wdk-flow__result-num small{ font-size: .38em; font-weight: 700; margin-left: 4px; }
.wdk-flow__result-lbl{ font-size: .76rem; color: var(--wdk-c-ink-2); line-height: 1.5; }

@media (max-width: 480px){
	.wdk-flow__lbl{ font-size: .68rem; }
	.wdk-flow__ico{ font-size: 1.35rem; }
}

/* ---------- Pain ---------- */
.wdk-pain{ background: var(--wdk-c-bg-2); }
.wdk-pain__grid{
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 900px){ .wdk-pain__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .wdk-pain__grid{ grid-template-columns: 1fr; } }
.wdk-pain__card{
	background: #fff; border-radius: var(--wdk-r-md);
	padding: 28px 24px; border: 1px solid var(--wdk-c-line);
	box-shadow: var(--wdk-sh-1);
	transition: transform var(--wdk-dur) var(--wdk-ease),
	            box-shadow var(--wdk-dur) var(--wdk-ease);
}
.wdk-pain__card:hover{ transform: translateY(-4px); box-shadow: var(--wdk-sh-2); }
.wdk-pain__icon{
	width: 52px; height: 52px; border-radius: 14px;
	background: var(--wdk-c-accent-sf); color: var(--wdk-c-accent-dk);
	display: grid; place-items: center; margin-bottom: 16px;
	font-weight: 900; font-family: var(--wdk-f-disp); font-size: 1.4rem;
}
.wdk-pain__ttl{ font-size: 1.05rem; margin-bottom: 8px; color: var(--wdk-c-ink); }
.wdk-pain__txt{ font-size: .92rem; color: var(--wdk-c-text-mute); line-height: 1.7; }

/* ---------- Reason ---------- */
.wdk-reason__grid{
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
@media (max-width: 900px){ .wdk-reason__grid{ grid-template-columns: 1fr; } }
.wdk-reason__card{
	padding: 34px 28px; border-radius: var(--wdk-r-lg);
	background: #fff; border: 1px solid var(--wdk-c-line);
	position: relative; overflow: hidden;
	transition: transform var(--wdk-dur) var(--wdk-ease),
	            box-shadow var(--wdk-dur) var(--wdk-ease);
}
.wdk-reason__card:hover{ transform: translateY(-4px); box-shadow: var(--wdk-sh-2); }
.wdk-reason__no{
	font-family: var(--wdk-f-disp); font-weight: 900;
	font-size: 3.2rem; line-height: 1; color: var(--wdk-c-bg-2);
	position: absolute; right: 20px; top: 14px;
}
.wdk-reason__ttl{
	font-size: 1.2rem; margin: 0 0 12px; color: var(--wdk-c-ink); position: relative;
}
.wdk-reason__txt{
	font-size: .94rem; color: var(--wdk-c-text-mute); line-height: 1.85; position: relative;
}
.wdk-reason__ico{
	width: 56px; height: 56px; border-radius: 16px;
	background: linear-gradient(135deg, var(--wdk-c-ink) 0%, var(--wdk-c-ink-2) 100%);
	color: #fff; display: grid; place-items: center; margin-bottom: 18px;
	font-weight: 900; font-size: 1.3rem;
}

/* ---------- Service ---------- */
.wdk-service{ background: var(--wdk-c-bg-2); }
.wdk-svc__list{
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
@media (max-width: 900px){ .wdk-svc__list{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .wdk-svc__list{ grid-template-columns: 1fr; } }
.wdk-svc__item{
	background: #fff; padding: 18px 20px; border-radius: var(--wdk-r-md);
	border: 1px solid var(--wdk-c-line); display: flex; align-items: center; gap: 12px;
	font-weight: 700; color: var(--wdk-c-ink); font-size: .98rem;
}
.wdk-svc__item::before{
	content: "✓"; width: 26px; height: 26px; border-radius: 50%;
	background: var(--wdk-c-accent); color: #fff; font-size: .85rem;
	display: grid; place-items: center; flex-shrink: 0;
}

/* ---------- Spec ---------- */
.wdk-spec__grid{
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 900px){ .wdk-spec__grid{ grid-template-columns: repeat(2, 1fr); } }
.wdk-spec__card{
	padding: 30px 24px; border-radius: var(--wdk-r-lg);
	background: linear-gradient(180deg, var(--wdk-c-ink) 0%, var(--wdk-c-ink-2) 100%);
	color: #fff; text-align: center; position: relative; overflow: hidden;
}
.wdk-spec__card::before{
	content: ""; position: absolute; inset: auto -30% -60% auto;
	width: 200px; height: 200px;
	background: radial-gradient(circle, rgba(232,131,58,.28), transparent 60%);
}
.wdk-spec__lbl{ font-size: .82rem; opacity: .75; letter-spacing: .12em; margin-bottom: 8px; }
.wdk-spec__num{
	font-family: var(--wdk-f-disp); font-weight: 900;
	font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1;
	color: var(--wdk-c-accent);
}
.wdk-spec__num-sm{ font-size: .5em; }
.wdk-spec__num--text{ font-size: 1.2rem; padding: 14px 0; }
.wdk-spec__unit{ font-size: .9rem; opacity: .8; margin-top: 4px; }
.wdk-spec__note{
	margin-top: 24px; padding: 20px 24px;
	background: var(--wdk-c-accent-sf); border-left: 4px solid var(--wdk-c-accent);
	border-radius: var(--wdk-r-sm);
	font-size: .92rem; color: var(--wdk-c-ink); line-height: 1.8;
}
.wdk-spec__note strong{ color: var(--wdk-c-accent-dk); }

/* ---------- Flow ---------- */
.wdk-flow{ background: var(--wdk-c-bg-2); }
.wdk-flow__list{
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative;
}
@media (max-width: 900px){ .wdk-flow__list{ grid-template-columns: 1fr; gap: 12px; } }
.wdk-flow__item{
	background: #fff; padding: 26px 20px; border-radius: var(--wdk-r-md);
	border: 1px solid var(--wdk-c-line);
	text-align: center; position: relative;
}
.wdk-flow__step{
	display: inline-block; padding: 4px 12px; border-radius: var(--wdk-r-pill);
	background: var(--wdk-c-ink); color: #fff; font-size: .75rem; font-weight: 700;
	letter-spacing: .1em; margin-bottom: 12px;
}
.wdk-flow__ttl{ font-size: 1rem; color: var(--wdk-c-ink); margin-bottom: 6px; }
.wdk-flow__txt{ font-size: .82rem; color: var(--wdk-c-text-mute); line-height: 1.6; }
.wdk-flow__item::after{
	content: "›"; position: absolute; right: -14px; top: 50%;
	transform: translateY(-50%);
	color: var(--wdk-c-accent); font-weight: 900; font-size: 1.6rem;
}
.wdk-flow__item:last-child::after{ display: none; }
@media (max-width: 900px){
	.wdk-flow__item::after{
		content: "↓"; right: auto; left: 50%; top: auto; bottom: -18px;
		transform: translateX(-50%); font-size: 1.2rem;
	}
}

/* ---------- Contact Select ---------- */
.wdk-contact-select{
	background:
		radial-gradient(1000px 500px at 50% 0%, rgba(232,131,58,.10), transparent 60%),
		linear-gradient(180deg, var(--wdk-c-bg) 0%, var(--wdk-c-bg-2) 100%);
	position: relative;
}
.wdk-select__grid{
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
	margin-top: 20px;
}
@media (max-width: 900px){ .wdk-select__grid{ grid-template-columns: 1fr; } }
.wdk-select__card{
	background: #fff; border-radius: var(--wdk-r-lg);
	padding: 36px 30px; border: 1px solid var(--wdk-c-line);
	display: flex; flex-direction: column;
	box-shadow: var(--wdk-sh-1);
	transition: transform var(--wdk-dur) var(--wdk-ease),
	            box-shadow var(--wdk-dur) var(--wdk-ease),
	            border-color var(--wdk-dur) var(--wdk-ease);
	position: relative; overflow: hidden;
}
.wdk-select__card::before{
	content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
	background: linear-gradient(90deg, var(--wdk-c-ink), var(--wdk-c-accent));
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--wdk-dur) var(--wdk-ease);
}
.wdk-select__card:hover{
	transform: translateY(-6px); box-shadow: var(--wdk-sh-3); border-color: transparent;
}
.wdk-select__card:hover::before{ transform: scaleX(1); }
.wdk-select__num{
	font-family: var(--wdk-f-disp); font-weight: 900; font-size: .85rem;
	color: var(--wdk-c-accent-dk); letter-spacing: .24em; margin-bottom: 14px;
}
.wdk-select__ttl{
	font-size: 1.3rem; color: var(--wdk-c-ink); margin-bottom: 14px; line-height: 1.4;
}
.wdk-select__desc{
	font-size: .94rem; color: var(--wdk-c-text-mute); line-height: 1.85;
	margin-bottom: 24px; flex-grow: 1;
}
.wdk-select__tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 26px; }
.wdk-select__tag{
	font-size: .75rem; padding: 4px 10px; border-radius: var(--wdk-r-pill);
	background: var(--wdk-c-bg-2); color: var(--wdk-c-ink-soft); font-weight: 700;
}
.wdk-select__card .wdk-btn{ width: 100%; }

/* ---------- Voices ---------- */
.wdk-voices__grid{
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 900px){ .wdk-voices__grid{ grid-template-columns: 1fr; } }
.wdk-voice__card{
	background: #fff; border-radius: var(--wdk-r-lg); padding: 30px 28px;
	border: 1px solid var(--wdk-c-line); position: relative;
}
.wdk-voice__card::before{
	content: "\201C"; position: absolute; top: -10px; left: 20px;
	font-family: Georgia, serif; font-size: 5rem; color: var(--wdk-c-accent); line-height: 1;
}
.wdk-voice__txt{
	font-size: .95rem; color: var(--wdk-c-text); line-height: 1.9;
	margin-bottom: 18px; padding-top: 14px;
}
.wdk-voice__who{
	display: flex; align-items: center; gap: 12px;
	padding-top: 16px; border-top: 1px solid var(--wdk-c-line);
}
/* ---------- Voice Avatar（写真対応：2重リング設計） ----------
   写真＝静水 / 外側リング＝導流の光（--wdk-c-accent）
   内側の細ラインは --wdk-c-line で"分節"を担保
*/
.wdk-voice__avatar{
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wdk-c-ink), var(--wdk-c-accent));
    color: #fff;
    display: grid; place-items: center;
    font-weight: 900; font-family: var(--wdk-f-disp);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px var(--wdk-c-line),
        0 0 0 5px rgba(232,131,58,.28);
    transition: box-shadow var(--wdk-dur) var(--wdk-ease),
                transform var(--wdk-dur) var(--wdk-ease);
}
.wdk-voice__card:hover .wdk-voice__avatar{
    transform: scale(1.04);
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 3px var(--wdk-c-line),
        0 0 0 6px var(--wdk-c-accent);
}
/* 写真バリアント：グラデ背景を無効化し、画像を全面配置 */
.wdk-voice__avatar--img{
    background: var(--wdk-c-bg-2);
}
.wdk-voice__avatar--img img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1 / 1;
    display: block;
    border-radius: 50%;
}

.wdk-voice__meta{ font-size: .85rem; }
.wdk-voice__meta strong{ display: block; color: var(--wdk-c-ink); font-size: .92rem; }
.wdk-voice__meta span{ color: var(--wdk-c-text-mute); font-size: .8rem; }
.wdk-dummy-note{
	text-align: center; margin-top: 20px; font-size: .78rem; color: var(--wdk-c-text-mute);
}

/* ---------- FAQ ---------- */
.wdk-faq{ background: var(--wdk-c-bg-2); }
.wdk-faq__list{ max-width: 820px; margin: 0 auto; }
.wdk-faq__item{
	background: #fff; border-radius: var(--wdk-r-md); margin-bottom: 12px;
	border: 1px solid var(--wdk-c-line); overflow: hidden;
	transition: box-shadow var(--wdk-dur) var(--wdk-ease);
}
.wdk-faq__item.is-open{ box-shadow: var(--wdk-sh-2); }
.wdk-faq__q{
	width: 100%; text-align: left; padding: 22px 24px; padding-right: 56px;
	font-weight: 700; color: var(--wdk-c-ink); font-size: 1rem;
	display: flex; align-items: center; gap: 16px;
	position: relative;
}
.wdk-faq__qmark{
	width: 32px; height: 32px; border-radius: 50%;
	background: var(--wdk-c-accent); color: #fff; font-weight: 900;
	display: grid; place-items: center; flex-shrink: 0; font-family: var(--wdk-f-disp);
}
.wdk-faq__q::after{
	content: ""; position: absolute; right: 24px; top: 50%;
	width: 12px; height: 12px;
	border-right: 2px solid var(--wdk-c-ink);
	border-bottom: 2px solid var(--wdk-c-ink);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--wdk-dur) var(--wdk-ease);
}
.wdk-faq__item.is-open .wdk-faq__q::after{
	transform: translateY(-30%) rotate(-135deg);
}
.wdk-faq__a{
	max-height: 0; overflow: hidden;
	transition: max-height var(--wdk-dur) var(--wdk-ease);
}
.wdk-faq__inner{
	padding: 0 24px 22px 72px;
	color: var(--wdk-c-text-mute); line-height: 1.9; font-size: .94rem;
}

/* ---------- Notice ---------- */
.wdk-notice__grid{
	display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 900px){ .wdk-notice__grid{ grid-template-columns: 1fr; } }
.wdk-notice__card{
	background: #fff; border-radius: var(--wdk-r-lg);
	padding: 34px 30px; border: 1px solid var(--wdk-c-line);
}
.wdk-notice__ttl{
	font-size: 1.15rem; color: var(--wdk-c-ink); margin-bottom: 18px;
	padding-bottom: 14px; border-bottom: 2px solid var(--wdk-c-accent);
	display: flex; align-items: center; gap: 10px;
}
.wdk-notice__ico{
	width: 32px; height: 32px; border-radius: 8px;
	background: var(--wdk-c-accent-sf); color: var(--wdk-c-accent-dk);
	display: grid; place-items: center; font-weight: 900;
}
.wdk-notice__list li{
	padding: 10px 0 10px 26px; position: relative;
	font-size: .94rem; color: var(--wdk-c-text); line-height: 1.75;
	border-bottom: 1px dashed var(--wdk-c-line);
}
.wdk-notice__list li:last-child{ border-bottom: 0; }
.wdk-notice__list li::before{
	content: "●"; position: absolute; left: 0; top: 12px;
	color: var(--wdk-c-accent); font-size: .6rem;
}
.wdk-notice__list--warn li{ padding-left: 30px; }
.wdk-notice__list--warn li::before{
	content: "!"; color: #fff; background: var(--wdk-c-danger);
	width: 18px; height: 18px; border-radius: 50%;
	display: grid; place-items: center;
	font-size: .7rem; font-weight: 900; top: 14px;
}

/* ---------- Hero Stage（画像×ガラスフロー図：二層構造） ----------
   - 16:9 の背景画像を"世界観の水源"として敷く
   - その上に半透明ガラスパネルとしてフロー図を重ねる
   - モバイルでは画像は視認できる比率で下部に、フロー図は上に自然分離
*/
.wdk-hero__stage{
    position: relative;
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--wdk-r-lg);
    overflow: visible;
    isolation: isolate;
}

.wdk-hero__bg{
    position: relative;
    margin: 0;
    border-radius: var(--wdk-r-lg);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    box-shadow: var(--wdk-sh-3);
    border: 1px solid var(--wdk-c-line);
    background: var(--wdk-c-ink);
}
.wdk-hero__bg img{
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* インクブルー寄りの薄いヴェールで、上に載るフロー図の可読性を保証 */
.wdk-hero__bg-veil{
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(26,43,74,.12) 0%, rgba(26,43,74,.40) 100%);
    pointer-events: none;
}

/* Glass バリアント：ガラスパネル化 */
/* 親を flex 化して glass パネルの中央寄せを margin auto ではなく
   flex 主軸で解決する。backdrop-filter による composited layer 化と
   margin auto の中央計算が Safari で衝突する挙動を根本回避。 */
.wdk-hero__stage{
	display: flex;
	flex-direction: column;
	align-items: center;    /* 子要素すべてを水平中央に固定 */
}

.wdk-flow--glass{
    position: relative;
    margin-top: -22%;
    margin-left: 0;         /* auto を撤去（flexの中央寄せに主権を渡す） */
    margin-right: 0;
    width: min(94%, 400px);
    max-width: 100%;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    box-shadow:
        0 24px 60px rgba(26,43,74,.28),
        0 2px 6px rgba(26,43,74,.10),
        inset 0 0 0 1px rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.5);
    transform: translate3d(0, 0, 0);   /* Safari 合成レイヤの位置を明示的にゼロ固定 */
}


@media (max-width: 900px){
    .wdk-hero__stage{ max-width: 560px; }
    .wdk-flow--glass{ margin-top: -18%; }
}

@media (max-width: 520px){
    .wdk-hero__visual{ max-width: 100%; }
    .wdk-hero__stage{ max-width: 100%; }
}

@media (max-width: 520px){
    .wdk-flow--glass{
        margin-top: -14%;
        width: min(96%, 360px);
    }
}


/* ---------- Shot（LP本文16:9横長画像） ----------
   [設計思想]
   - 原画はすべて 16:9（1280×720 等）。比率はコンテナ側で保持し、
     img は object-fit: contain で "情報損失ゼロ" を担保する。
   - Cocoon 親テーマの img{ height:auto !important } を無効化するため、
     .wdk-shot__frame にラップして aspect-ratio を強制する構造にする。
   - 旧マークアップ（<figure class="wdk-shot"><img></figure>）でも
     フォールバックで比率が保たれるよう二重防御をかける。
============================================================ */
.wdk-shot{
    margin: 0 auto clamp(28px, 4vw, 48px);
    width: 100%;
    max-width: 920px;
    border-radius: var(--wdk-r-lg);
    overflow: hidden;
    box-shadow: var(--wdk-sh-2);
    border: 1px solid var(--wdk-c-line);
    background: var(--wdk-c-bg-2);
    transition: transform var(--wdk-dur) var(--wdk-ease),
                box-shadow var(--wdk-dur) var(--wdk-ease);
    /* ★ コンテナ自身に 16:9 を持たせる（Cocoon の img 上書きに勝つ） */
    aspect-ratio: 16 / 9;
    position: relative;
    display: block;
}
.wdk-shot:hover{
    transform: translateY(-2px);
    box-shadow: var(--wdk-sh-3);
}
/* ★ 詳細度を高めて Cocoon の img 系ルールを完全に上書きする */
.wdk-lp-body .wdk-shot > img{
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain;        /* 16:9 原画を「切らずに」美しくフィット */
    object-position: center;
    display: block;
    background: var(--wdk-c-bg-2);
}
/* --wide は互換維持（後方互換）：挙動は base と同一 */
.wdk-shot--wide{ max-width: 920px; }

@media (max-width: 600px){
    .wdk-shot{ border-radius: var(--wdk-r-md); }
}

/* ---------- Closing assurance icon badges（透過アイコン最適化） ----------
   透過画像の本質＝背景と融け合う。
   タイル背景を撤廃し、下地の --wdk-c-bg にそのまま浮遊させる。
   ホバー時、オレンジのハロー（アクセント環光）で"存在の必然性"を示す。
*/
.wdk-assure{
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: clamp(20px, 4vw, 44px);
    margin: 0 0 clamp(28px, 4vw, 48px);
}
.wdk-assure__item{
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    min-width: 148px;
    padding: 6px 4px 0;
}
.wdk-assure__item__ico{
    position: relative;
    width: 96px; height: 96px;
    display: grid; place-items: center;
    isolation: isolate;
}
/* 透過画像のハロー：ホバー時のみ現れる */
.wdk-assure__item__ico::before{
    content: "";
    position: absolute; inset: 6px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(232,131,58,.28), transparent 72%);
    opacity: 0;
    transform: scale(.85);
    transition: opacity var(--wdk-dur) var(--wdk-ease),
                transform var(--wdk-dur) var(--wdk-ease);
    z-index: -1;
}
.wdk-assure__item img{
    width: 96px; height: 96px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: transparent;
    border: 0;
    padding: 0;
    box-shadow: none;
    filter: drop-shadow(0 6px 14px rgba(26,43,74,.14));
    transition: transform var(--wdk-dur) var(--wdk-ease),
                filter var(--wdk-dur) var(--wdk-ease);
}
.wdk-assure__item:hover img{
    transform: translateY(-4px) scale(1.03);
    filter: drop-shadow(0 10px 22px rgba(232,131,58,.30));
}
.wdk-assure__item:hover .wdk-assure__item__ico::before{
    opacity: 1;
    transform: scale(1);
}
.wdk-assure__item span{
    font-size: .92rem; font-weight: 700;
    color: var(--wdk-c-ink); text-align: center;
    letter-spacing: .02em;
}

@media (max-width: 520px){
    .wdk-assure{ gap: 18px; }
    .wdk-assure__item{ min-width: 100px; }
    .wdk-assure__item__ico,
    .wdk-assure__item img{ width: 72px; height: 72px; }
}


/* ---------- Final CTA ---------- */
.wdk-final-cta{
	background: linear-gradient(135deg, var(--wdk-c-ink) 0%, var(--wdk-c-ink-2) 100%);
	color: #fff; text-align: center; position: relative; overflow: hidden;
}
.wdk-final-cta::before,
.wdk-final-cta::after{
	content: ""; position: absolute; border-radius: 50%;
	background: radial-gradient(circle, rgba(232,131,58,.25), transparent 65%);
	pointer-events: none;
}
.wdk-final-cta::before{ width: 600px; height: 600px; top: -200px; right: -200px; }
.wdk-final-cta::after{ width: 500px; height: 500px; bottom: -200px; left: -150px; }
.wdk-final-cta .wdk-wrap{ position: relative; z-index: 2; }

/* ---------- Footer ---------- */
.wdk-footer{
	background: #12203c; color: rgba(255,255,255,.72);
	padding: 50px 0 30px; font-size: .88rem;
}
.wdk-footer__grid{
	display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; margin-bottom: 30px;
}
@media (max-width: 700px){ .wdk-footer__grid{ grid-template-columns: 1fr; } }
.wdk-footer__desc{ margin-top: 14px; line-height: 1.85; max-width: 44ch; }
.wdk-footer__ttl{ color: #fff; font-size: .95rem; margin-bottom: 12px; }
.wdk-footer__col a{ display: block; padding: 6px 0; opacity: .75; }
.wdk-footer__col a:hover{ opacity: 1; color: var(--wdk-c-accent); }
.wdk-footer__copy{
	border-top: 1px solid rgba(255,255,255,.1);
	padding-top: 20px; text-align: center; font-size: .8rem; opacity: .6;
}

/* =========================================================
   Modal
   ========================================================= */
.wdk-modal-bd{
	position: fixed; inset: 0; z-index: 100;
	background: rgba(18,32,60,.6);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	display: none; align-items: flex-start; justify-content: center;
	padding: 20px; overflow-y: auto;
	opacity: 0; transition: opacity var(--wdk-dur) var(--wdk-ease);
}
.wdk-modal-bd.is-open{ display: flex; opacity: 1; }
.wdk-modal{
	background: #fff; width: 100%; max-width: 720px;
	border-radius: var(--wdk-r-lg);
	margin: 40px auto;
	box-shadow: var(--wdk-sh-3);
	overflow: hidden;
	transform: translateY(20px) scale(.98);
	transition: transform var(--wdk-dur) var(--wdk-ease);
	position: relative;
	display: flex;
	flex-direction: column;
	max-height: min(86vh, 760px);
	min-height: min(60vh, 520px);
}
.wdk-modal-bd.is-open .wdk-modal{ transform: translateY(0) scale(1); }
.wdk-modal__header{
	padding: 26px 30px 20px;
	background: linear-gradient(135deg, var(--wdk-c-ink) 0%, var(--wdk-c-ink-2) 100%);
	color: #fff; position: relative;
}
.wdk-modal__kicker{
	font-size: .78rem; letter-spacing: .2em; color: var(--wdk-c-accent);
	font-weight: 700; text-transform: uppercase;
}
.wdk-modal__header h2{
	font-size: 1.35rem; margin-top: 6px; color: #fff; line-height: 1.4;
}
.wdk-modal__header p{ margin-top: 8px; font-size: .88rem; opacity: .85; }
.wdk-modal__close{
	position: absolute; top: 16px; right: 16px;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(255,255,255,.14); color: #fff;
	display: grid; place-items: center; font-size: 1.2rem;
	transition: background var(--wdk-dur) var(--wdk-ease);
}
.wdk-modal__close:hover{ background: rgba(255,255,255,.28); }
.wdk-modal__body{
	padding: 28px 30px 32px;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
}

/* ---------- Form ---------- */
.wdk-form__group{ margin-bottom: 22px; }
.wdk-form__label{
	display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
	font-weight: 700; font-size: .94rem; color: var(--wdk-c-ink);
}
.wdk-form__req{
	font-size: .7rem; padding: 2px 8px; border-radius: var(--wdk-r-pill);
	background: var(--wdk-c-danger); color: #fff; font-weight: 700;
}
.wdk-form__opt{
	font-size: .7rem; padding: 2px 8px; border-radius: var(--wdk-r-pill);
	background: var(--wdk-c-bg-2); color: var(--wdk-c-text-mute); font-weight: 700;
}
.wdk-form__input,
.wdk-form__select,
.wdk-form__textarea{
	width: 100%; padding: 12px 14px; font-size: .96rem;
	border: 1.5px solid var(--wdk-c-line); border-radius: var(--wdk-r-sm);
	background: var(--wdk-c-bg); font-family: inherit; color: var(--wdk-c-text);
	transition: border-color var(--wdk-dur) var(--wdk-ease),
	            background var(--wdk-dur) var(--wdk-ease);
}
.wdk-form__input:focus,
.wdk-form__select:focus,
.wdk-form__textarea:focus{
	outline: none; border-color: var(--wdk-c-accent); background: #fff;
}
.wdk-form__textarea{ resize: vertical; min-height: 100px; line-height: 1.7; }
.wdk-form__radio-group,
.wdk-form__check-group{ display: flex; flex-wrap: wrap; gap: 8px; }
.wdk-form__radio,
.wdk-form__check{
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px; border-radius: var(--wdk-r-pill);
	background: var(--wdk-c-bg); border: 1.5px solid var(--wdk-c-line);
	cursor: pointer; font-size: .9rem; font-weight: 500;
	transition: all var(--wdk-dur) var(--wdk-ease);
	user-select: none;
}
.wdk-form__radio input,
.wdk-form__check input{
	appearance: none; -webkit-appearance: none;
	width: 16px; height: 16px; border: 2px solid var(--wdk-c-line);
	margin: 0; cursor: pointer; flex-shrink: 0;
	transition: all var(--wdk-dur) var(--wdk-ease);
}
.wdk-form__radio input{ border-radius: 50%; }
.wdk-form__check input{ border-radius: 4px; }
.wdk-form__radio input:checked,
.wdk-form__check input:checked{
	border-color: var(--wdk-c-accent); background: var(--wdk-c-accent);
	box-shadow: inset 0 0 0 3px #fff;
}
.wdk-form__check input:checked{
	background: var(--wdk-c-accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8l3 3 5-6' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat;
	box-shadow: none;
}
.wdk-form__radio:has(input:checked),
.wdk-form__check:has(input:checked){
	border-color: var(--wdk-c-accent);
	background: var(--wdk-c-accent-sf);
	color: var(--wdk-c-accent-dk);
}
.wdk-form__help{ font-size: .8rem; color: var(--wdk-c-text-mute); margin-top: 6px; }

.wdk-form__actions{
	margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--wdk-c-line);
	display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
}
.wdk-form__actions .wdk-btn{ min-width: 180px; }
.wdk-form__privacy{
	font-size: .78rem; color: var(--wdk-c-text-mute); margin-top: 12px; line-height: 1.7;
}

/* ---------- Privacy 同意チェック行 ---------- */
.wdk-privacy-group{ margin-top: -4px; }
.wdk-privacy-check{
	display: flex; align-items: flex-start; gap: 10px;
	padding: 14px 16px; border-radius: var(--wdk-r-sm);
	background: var(--wdk-c-bg); border: 1.5px solid var(--wdk-c-line);
	cursor: pointer; font-size: .88rem; color: var(--wdk-c-text);
	line-height: 1.6; transition: all var(--wdk-dur) var(--wdk-ease);
}
.wdk-privacy-check:has(input:checked){
	border-color: var(--wdk-c-accent); background: var(--wdk-c-accent-sf);
}
.wdk-privacy-check:has(input.is-invalid){
	border-color: var(--wdk-c-danger);
}
.wdk-privacy-check__input{
	appearance: none; -webkit-appearance: none;
	width: 18px; height: 18px; border: 2px solid var(--wdk-c-line);
	border-radius: 4px; margin: 2px 0 0; cursor: pointer; flex-shrink: 0;
	transition: all var(--wdk-dur) var(--wdk-ease);
}
.wdk-privacy-check__input:checked{
	border-color: var(--wdk-c-accent);
	background: var(--wdk-c-accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8l3 3 5-6' stroke='white' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat;
}
.wdk-privacy-link{
	color: var(--wdk-c-accent-dk); font-weight: 700;
	text-decoration: underline; text-underline-offset: 2px;
}
.wdk-privacy-link:hover{ color: var(--wdk-c-accent); }

/* ---------- Privacy スライドパネル ---------- */
.wdk-privacy-panel{
	position: absolute; inset: 0; z-index: 10;
	background: #fff; border-radius: var(--wdk-r-lg);
	display: flex; flex-direction: column;
	transform: translateX(100%);
	transition: transform var(--wdk-dur) var(--wdk-ease);
	pointer-events: none;
}
.wdk-privacy-panel.is-open{
	transform: translateX(0);
	pointer-events: auto;
}
.wdk-privacy-panel__header{
	padding: 22px 26px 18px;
	background: linear-gradient(135deg, var(--wdk-c-ink) 0%, var(--wdk-c-ink-2) 100%);
	color: #fff; display: flex; align-items: center; justify-content: space-between;
	flex-shrink: 0;
}
.wdk-privacy-panel__header h3{ font-size: 1.1rem; color: #fff; margin: 0; }
.wdk-privacy-panel__close{
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(255,255,255,.14); color: #fff;
	display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0;
	transition: background var(--wdk-dur) var(--wdk-ease);
}
.wdk-privacy-panel__close:hover{ background: rgba(255,255,255,.28); }
.wdk-privacy-panel__body{
	padding: 24px 26px; overflow-y: auto; flex-grow: 1;
	min-height: 0;
	font-size: .88rem; color: var(--wdk-c-text); line-height: 1.85;
}
.wdk-privacy-panel__body p{ margin-bottom: 1.2em; }
.wdk-privacy-panel__footer{
	padding: 16px 26px; border-top: 1px solid var(--wdk-c-line);
	display: flex; justify-content: flex-end; flex-shrink: 0;
	background: #fff;
}
.wdk-privacy-panel__confirm{
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 12px 30px; border: 0; border-radius: var(--wdk-r-pill);
	background: var(--wdk-c-accent) !important;   /* ★ 静止時に真っ白で見えなくなる事故を防止 */
	color: #fff !important; font-weight: 700; font-size: .92rem; cursor: pointer;
	box-shadow: 0 8px 20px rgba(232,131,58,.35);
	transition: background var(--wdk-dur) var(--wdk-ease),
	            transform .12s var(--wdk-ease),
	            box-shadow var(--wdk-dur) var(--wdk-ease);
	animation: wdk-pop .4s var(--wdk-ease);
}
.wdk-privacy-panel__confirm:hover{
	background: var(--wdk-c-accent-dk) !important;
	box-shadow: 0 10px 24px rgba(199,106,36,.4);
}
.wdk-privacy-panel__confirm:active,
.wdk-privacy-panel__confirm.is-pressed{
	background: var(--wdk-c-accent-dk) !important;
	transform: scale(.94);
	box-shadow: 0 4px 10px rgba(199,106,36,.35);
}

@media (max-width: 640px){
	.wdk-modal{
		max-height: 92vh;
		min-height: 0;
		margin: 16px auto;
	}
}

/* progress */
.wdk-form__progress{
	display: flex; align-items: center; gap: 10px; margin-bottom: 22px;
	padding: 12px 16px; background: var(--wdk-c-bg-2); border-radius: var(--wdk-r-sm);
	font-size: .85rem; color: var(--wdk-c-ink);
}
.wdk-form__bar{
	flex-grow: 1; height: 6px; background: var(--wdk-c-line);
	border-radius: 3px; overflow: hidden;
}
.wdk-form__bar > i{
	display: block; height: 100%; width: 0; background: var(--wdk-c-accent);
	border-radius: 3px; transition: width .3s var(--wdk-ease);
}
.wdk-form__progress-txt{ font-weight: 700; white-space: nowrap; }

/* Thanks */
.wdk-thanks{ padding: 40px 30px; text-align: center; }
.wdk-thanks__check{
	width: 80px; height: 80px; border-radius: 50%;
	background: var(--wdk-c-success); color: #fff;
	display: grid; place-items: center; margin: 0 auto 24px;
	font-size: 2.2rem;
	animation: wdk-pop .6s var(--wdk-ease);
}
@keyframes wdk-pop{
	0% { transform: scale(0); opacity: 0; }
	60% { transform: scale(1.15); opacity: 1; }
	100% { transform: scale(1); }
}
.wdk-thanks h3{ font-size: 1.4rem; color: var(--wdk-c-ink); margin-bottom: 14px; }
.wdk-thanks p{
	color: var(--wdk-c-text-mute); line-height: 1.85;
	max-width: 44ch; margin: 0 auto 24px;
}

/* Error */
.wdk-form__input.is-invalid,
.wdk-form__select.is-invalid,
.wdk-form__textarea.is-invalid,
.wdk-form__input.is-invalid:focus,
.wdk-form__select.is-invalid:focus,
.wdk-form__textarea.is-invalid:focus{
	border-color: var(--wdk-c-danger);
}
.wdk-form__error-msg{
	padding: 12px 16px; margin-top: 12px;
	background: #fdecec; color: var(--wdk-c-danger);
	border-radius: var(--wdk-r-sm); font-size: .88rem; font-weight: 700;
}

/* =========================================================
   Motion — reveal
   ========================================================= */
.wdk-reveal{
	opacity: 0; transform: translateY(24px);
	transition: opacity .8s var(--wdk-ease), transform .8s var(--wdk-ease);
}
.wdk-reveal.is-in{ opacity: 1; transform: none; }

/* ★ Hero Stage は wdk-float アニメーションと wdk-reveal の transform が
      二重掛けとなり、Safariの合成マトリクスが破綻する。
      stageに限り reveal は「opacityフェード」だけに降格する。 */
.wdk-hero__stage.wdk-reveal{
	transform: none;                    /* 初期状態でtranslateYを与えない */
}
.wdk-hero__stage.wdk-reveal.is-in{
	transform: none;                    /* is-in後も明示的にnone（animation側に主権） */
}


@media (prefers-reduced-motion: reduce){
	.wdk-reveal{ opacity: 1; transform: none; }
	.wdk-hero::before{ animation: none; }
	.wdk-lp-body *{ transition: none !important; animation: none !important; }
	
	.wdk-hero__stage,
	.wdk-hero::after,
	.wdk-flow__connect-line::before{ animation: none !important; }
}

/* Print */
@media print{
	.wdk-header, .wdk-modal-bd, .wdk-btn{ display: none !important; }
	.wdk-hero{ background: none; }
}

/* =========================================================
   Page Top Button（ページトップボタン）
   - 名前空間 wdk-pagetop
   - デザイントークン完全準拠（配色・角丸・シャドウ）
   - z-index: 70 (ヘッダー80 / モーダル100 と非干渉)
   ========================================================= */
.wdk-pagetop{
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 70;

	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;

	width: 56px;
	height: 56px;
	padding: 0;

	background: var(--wdk-c-ink);
	color: var(--wdk-c-white);
	border: 1px solid rgba(255, 255, 255, .08);
	border-radius: 50%;

	font-family: var(--wdk-f-disp);
	font-weight: 700;
	line-height: 1;

	cursor: pointer;
	box-shadow: var(--wdk-sh-2);

	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity .35s ease,
		visibility .35s ease,
		transform .35s ease,
		background-color .25s ease,
		box-shadow .25s ease;

	-webkit-tap-highlight-color: transparent;
}

/* ---------- Page Top Button — 適応視認性（Adaptive Legibility） ----------
   背景色に応じて外観を切替：
     .is-on-dark  … ダーク背景上（Final-CTA / Spec / Footer 前後）
     .is-on-light … ライト背景上（デフォルト・Hero / Pain / FAQ 等）
   常に WCAG AAA コントラストを維持しつつ、ブランドの重心（インクブルー）は失わない。
*/

/* ライト背景上：現行デザインを踏襲しつつ、文字色を#fff固定で明示 */
.wdk-pagetop.is-on-light{
    background: var(--wdk-c-ink);
    color: var(--wdk-c-white);
    border-color: rgba(255, 255, 255, .10);
    box-shadow: var(--wdk-sh-2);
}
.wdk-pagetop.is-on-light .wdk-pagetop__label{
    color: #fff;
    opacity: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.wdk-pagetop.is-on-light .wdk-pagetop__icon{
    color: var(--wdk-c-accent);
}

/* ダーク背景上：白基調に反転。オレンジアクセントを最大化し"水の光"となる */
.wdk-pagetop.is-on-dark{
    background: var(--wdk-c-white);
    color: var(--wdk-c-ink);
    border-color: rgba(26, 43, 74, .12);
    box-shadow:
        0 10px 30px rgba(0, 0, 0, .35),
        0 0 0 1px rgba(232,131,58,.35);
}
.wdk-pagetop.is-on-dark .wdk-pagetop__label{
    color: var(--wdk-c-ink);
    opacity: 1;
    text-shadow: none;
    font-weight: 900;
}
.wdk-pagetop.is-on-dark .wdk-pagetop__icon{
    color: var(--wdk-c-accent-dk);
}
.wdk-pagetop.is-on-dark .wdk-pagetop__ring{
    border-color: var(--wdk-c-accent-dk);
}

/* ラベルの視認性そのものを底上げ（両モード共通） */
.wdk-pagetop__label{
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
    opacity: 1;
}

/* ホバー：ダーク側は薄く色相を落ち着かせる */
@media (hover: hover){
    .wdk-pagetop.is-on-dark:hover{
        background: #fff8f0;
        box-shadow:
            0 14px 36px rgba(0, 0, 0, .40),
            0 0 0 1px rgba(232,131,58,.55);
    }
}


/* 表示状態（JSで .is-visible を付与） */
.wdk-pagetop.is-visible{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* フッター到達時（JSで .is-hidden-near-footer を付与） */
.wdk-pagetop.is-hidden-near-footer{
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	pointer-events: none;
}

/* ホバー（PC） */
@media (hover: hover){
	.wdk-pagetop:hover{
		background: var(--wdk-c-ink-2);
		box-shadow: 0 14px 34px rgba(26, 43, 74, .28);
	}
	.wdk-pagetop:hover .wdk-pagetop__ring{
		transform: scale(1);
		opacity: 1;
	}
	.wdk-pagetop:hover .wdk-pagetop__icon{
		transform: translateY(-2px);
	}
}

/* フォーカス（キーボード操作） */
.wdk-pagetop:focus{
	outline: none;
}
.wdk-pagetop:focus-visible{
	box-shadow:
		0 14px 34px rgba(26, 43, 74, .28),
		0 0 0 4px var(--wdk-c-accent-sf),
		0 0 0 6px var(--wdk-c-accent);
}

/* 押下 */
.wdk-pagetop:active{
	transform: translateY(0) scale(.96);
}

/* アイコン */
.wdk-pagetop__icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wdk-c-accent);
	transition: transform .25s ease;
	margin-top: 2px;
}

/* ラベル "TOP" */
.wdk-pagetop__label{
	font-size: 9px;
	letter-spacing: .12em;
	color: var(--wdk-c-white);
	opacity: .85;
	margin-top: 1px;
}

/* ホバー時に浮き上がるアクセントリング */
.wdk-pagetop__ring{
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--wdk-c-accent);
	opacity: 0;
	transform: scale(.85);
	transition: transform .35s ease, opacity .35s ease;
	pointer-events: none;
}

/* ---------- タブレット ---------- */
@media (max-width: 900px){
	.wdk-pagetop{
		right: 18px;
		bottom: 18px;
		width: 52px;
		height: 52px;
	}
}

/* ---------- スマートフォン ---------- */
/* 注意：ブランド視覚継続性のため display:none は使用しない。
   サイズと位置のみを最適化し、フォームCTAと干渉しないよう調整。 */
@media (max-width: 600px){
	.wdk-pagetop{
		right: 14px;
		bottom: 14px;
		width: 48px;
		height: 48px;
	}
	.wdk-pagetop__icon svg{
		width: 20px;
		height: 20px;
	}
	.wdk-pagetop__label{
		font-size: 8px;
	}
}

/* ---------- モーション低減設定への配慮 ---------- */
@media (prefers-reduced-motion: reduce){
	.wdk-pagetop,
	.wdk-pagetop__icon,
	.wdk-pagetop__ring{
		transition: opacity .15s linear;
	}
	.wdk-pagetop.is-visible{
		transform: none;
	}
}

/* ---------- スマホ用の追従CTAバー ---------- */

.wdk-stickycta{
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	padding: 10px clamp(16px, 4vw, 24px);
	background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
	border-top: 1px solid var(--wdk-c-line);
	transform: translateY(100%); transition: transform var(--wdk-dur) var(--wdk-ease);
}
.wdk-stickycta.is-visible{ transform: translateY(0); }
.wdk-stickycta__btn{ width: 100%; }
@media (min-width: 901px){ .wdk-stickycta{ display: none; } } /* PCでは非表示、モバイル専用 */

/* reCAPTCHA v3 の自動挿入バッジが、スマホ追従CTAバーと重ならないよう位置を調整 */
.grecaptcha-badge{ bottom: 14px !important; }
@media (max-width: 900px){
	.grecaptcha-badge{ bottom: 76px !important; }
}

/* ============================================================
   Works Gallery（制作ギャラリー・流れるスライド）
   ============================================================ */

/* ---------- Works Gallery：世界観の転換（昼 → 夜のステージ） ---------- */
.wdk-gallery.wdk-gallery--stage{
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(170deg, var(--wdk-c-ink) 0%, var(--wdk-c-ink-2) 55%, #16233f 100%);
}

/* 直前セクション（明るい背景）からの緩やかな切り替え */
.wdk-gallery.wdk-gallery--stage::before{
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 160px;
	background: linear-gradient(180deg, var(--wdk-c-bg) 0%, rgba(250,250,247,0) 100%);
	opacity: .9;
	pointer-events: none;
	z-index: 1;
}

/* カード5色を弱めたスポットライト＋微細なドットテクスチャ */
.wdk-gallery__bg{
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(circle at 12% 18%, rgba(255,138,92,.28), transparent 42%),
		radial-gradient(circle at 85% 12%, rgba(54,209,196,.22), transparent 40%),
		radial-gradient(circle at 78% 88%, rgba(106,130,251,.24), transparent 45%),
		radial-gradient(circle at 15% 90%, rgba(247,183,51,.18), transparent 40%),
		radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1.6px);
	background-size: auto, auto, auto, auto, 26px 26px;
}

.wdk-gallery.wdk-gallery--stage .wdk-wrap,
.wdk-gallery.wdk-gallery--stage .wdk-gallery__viewport{
	position: relative;
	z-index: 2;
}
.wdk-gallery__viewport{
	position: relative;
	overflow: hidden;
	margin-top: 8px;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	        mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.wdk-gallery__track{
	display: flex;
	align-items: stretch;
	gap: 24px;
	width: max-content;
	padding: 8px var(--wdk-gutter) 24px;
	will-change: transform; /* JS駆動のtransform更新をブラウザに事前通知し、コンポジット処理を安定させる */
	transform: translateZ(0);      /* 独立GPUレイヤを強制し、巻き戻り時の再合成コストをゼロに近づける */
	backface-visibility: hidden;   /* Safari/iOSでのサブピクセルちらつき対策 */
	-webkit-backface-visibility: hidden;
}


.wdk-gallery__card{
	flex: 0 0 auto;
	width: min(78vw, 340px);
	display: flex;
	flex-direction: column;
	border-radius: var(--wdk-r-lg);
	overflow: hidden;
	box-shadow: var(--wdk-sh-2);
	color: #fff;
}

/* 5枠それぞれ異なるカラフルな帯グラデーション */
.wdk-gallery__card--01{ background: linear-gradient(135deg, #ff8a5c 0%, #ff5f6d 100%); }
.wdk-gallery__card--02{ background: linear-gradient(135deg, #36d1c4 0%, #1a2b4a 120%); }
.wdk-gallery__card--03{ background: linear-gradient(135deg, #6a82fb 0%, #fc5c9c 100%); }
.wdk-gallery__card--04{ background: linear-gradient(135deg, #f7b733 0%, #fc4a1a 100%); }
.wdk-gallery__card--05{ background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%); }

.wdk-gallery__visual{
	width: 100%;
	aspect-ratio: 16 / 9;
	position: relative;
}

.wdk-gallery__visual img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wdk-gallery__body{
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px 24px;
}

.wdk-gallery__no{
	font-family: var(--wdk-f-disp);
	font-weight: 900;
	font-size: 1.15rem;
	letter-spacing: .06em;
	opacity: .9;
}

.wdk-gallery__shuso{
	font-family: var(--wdk-f-disp);
	font-weight: 900;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	line-height: 1.4;
	/* 入力文字数がバラついてもカード高さを揃えるため2行で省略 */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wdk-gallery__title{
	font-weight: 700;
	font-size: .9rem;
	opacity: .95;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wdk-gallery__desc{
	font-size: .85rem;
	line-height: 1.7;
	opacity: .9;
	/* 3行で省略し、5枚のカード高さを常に揃える */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wdk-gallery__tags{
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
}

.wdk-gallery__tag{
	padding: 5px 12px;
	border-radius: var(--wdk-r-pill);
	background: rgba(255,255,255,.22);
	backdrop-filter: blur(4px);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
}

.wdk-gallery__link{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-weight: 700;
	font-size: .85rem;
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 4px;
	width: fit-content;
}

@media (max-width: 640px){
	.wdk-gallery__viewport{
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
		        mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	}
	.wdk-gallery__track{ padding: 8px 24px 20px; gap: 16px; }
}

/* ============================================================
   iOS Safari 専用 — 最終防波堤（GPU合成レイヤー分離版）
   @supports (-webkit-touch-callout: none) は iOS Safari のみ真になる
   （macOS Safari / Chrome / Firefox / Android Chrome すべて偽）。
   PC・他スマホの表示は 100% 変わらない。
   ============================================================ */
@supports (-webkit-touch-callout: none){

    /* Hero の絶対配置装飾（::before/::after の光る円）が
       iOS Safari で幅を漏らすのを局所封鎖。
       ※ contain: paint は Safari 17系で "内側幅を Visual Viewport 基準に
          丸めてしまう" 副作用が確認されたため、layout のみに変更する。
          描画のクリップは overflow: clip 側で担保する。 */
    .wdk-hero{
        contain: layout;
        overflow: clip;
        /* 実効幅を Layout Viewport にピン留め。%基準漏れが起きても
           このセクションの外側には絶対に伝播しない */
        width: 100%;
        max-width: 100vw;
        /* iOS Safari のスクロールバー幅ゆらぎを吸収 */
        margin-left: auto;
        margin-right: auto;
    }

    /* 【構造改修①】visual / stage を「flexで中央寄せする箱」から
       ふつうのブロック要素に戻す。
       backdrop-filterでGPU合成レイヤー化された子要素に対しては、
       align-items中央寄せもmargin:auto中央寄せも、Safariが
       正しい基準点を持てないケースがある（＝過去2回の改修が
       効かなかった理由）。中央寄せの"計算方法"を変えるのではなく、
       計算の土台であるレイアウトモデル自体を単純化する。 */
    .wdk-hero__visual{
        display: block;
        width: 100%;
        min-width: 0;
        /* 親（grid セル）に絶対に負けない最終上限 */
        max-width: 100%;
        box-sizing: border-box;
        /* Safari で backdrop-filter 子孫を持つ要素の "祖先幅逆汚染" を切る */
        contain: layout;
    }

    .wdk-hero__stage{
        display: block;        /* flexを撤去 */
        margin-left: auto;
        margin-right: auto;
		min-width: 0;
        /* floatアニメーションはこの要素からは外す（②で bg 側に移す） */
        animation: none;
        transform: none;
    }

    /* 【構造改修②】ふわふわ浮く演出は「背景画像側」だけに付け替える。
       これにより、backdrop-filterパネル（.wdk-flow--glass）の親が
       "常時transformが動き続けるレイヤー"ではなくなり、
       GPU合成の基準点がフレームごとに再計算されて位置がズレる、
       という根本原因を取り除く。見た目は「画像だけがふわふわ浮き、
       ガラスパネルは静止した状態で重なる」という、ごく自然な演出になる。 */
    .wdk-hero__bg{
		min-width: 0;
        animation: wdk-float 6s var(--wdk-ease) infinite;
        transform: translate3d(0, 0, 0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* 【構造改修③】ガラスパネルの中央寄せを、最も枯れた
       「ブロック要素 + margin:auto」方式に統一する。
       flexのalign-itemsには一切依存しない。 */
    .wdk-flow--glass{
        margin-left: auto;     /* 撤去されていたautoを復活 */
        margin-right: auto;
        isolation: isolate;    /* このパネル専用のスタッキングコンテキストを明示 */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* transform: translate3d(0,0,0) は既存の共通CSS側で
           全ブラウザに既に付与済みなので、ここでは重複させない */
    }
	
    /* 【構造改修④／今回追加】
       原因の芯である "H1 の 5vw が Visual Viewport 幅で膨れる連鎖" を切る。
       - clamp() の中央値を vw → cqw（コンテナクエリ幅）に置き換える
       - コンテナクエリに未対応の古い iOS Safari 向けフォールバックとして
         font-size の絶対上限を px で二重ロックする
       PC / Android / iOS-Chrome には @supports 判定で一切影響しない。 */
    .wdk-lp-body .wdk-hero{
        container-type: inline-size;
    }
    .wdk-lp-body .wdk-hero__title{
        font-size: clamp(1.9rem, 5cqw, 3.2rem);
        /* cqw 非対応環境向け二段フォールバック（絶対上限をpxで確定） */
        max-width: 100%;
    }
    @supports not (font-size: 1cqw){
        .wdk-lp-body .wdk-hero__title{
            font-size: clamp(1.9rem, 5vw, 3.2rem);
        }
    }

    /* grid セル自体にも "最小コンテンツ幅で膨らむ" のを止める保険を掛ける
       （左カラムの H1 が min-content で grid を押し広げる Safari 挙動を封殺） */
    .wdk-lp-body .wdk-hero__grid > *{
        min-width: 0;
    }
	
}

/* ============================================================
   ★ iPhone Safari ヒーロー右ズレ 最終吸収パッチ
   ------------------------------------------------------------
   [目的]
   - PC / Android / iOS-Chrome の表示は一切変えない
   - iPhone Safari の以下3現象だけを潰す
     (a) .wdk-hero__stage の overflow:visible による子はみ出し漏れ
     (b) .wdk-flow--glass の width:min(94%, 400px) の %基準ズレ
     (c) backdrop-filter × transform × % による compositing 幅暴走
   [設計]
   - 既存宣言は残したまま、ここで "最後勝ち" の上書きだけを行う
   - 全ブラウザ共通の安全補強（stageのoverflow整理）
   - Safari限定パッチは @supports (-webkit-touch-callout: none) で
     iOS Safari のみに限定（PC Safari / Chrome / Firefox には無影響）
============================================================ */

/* --- (1) 全ブラウザ共通：stage の "はみ出し漏れ止め" ---
   overflow: visible の意図は「flow--glass の box-shadow を切らない」ためだが、
   shadow は blur 60px 以内なので padding で吸収する方が安全。
   ここで overflow: clip に切り替え、子の水平方向はみ出しだけを止める。
   (垂直方向の -22% margin-top は overflow-clip-margin で許容) */
.wdk-lp-body .wdk-hero__stage{
    overflow: clip;
    overflow-clip-margin: 40px;   /* box-shadow を切らせない安全マージン */
    /* 幅の暴走を親側で最終ロック */
    max-width: min(480px, 100%);
}
/* clip 非対応の旧Safari向けフォールバック */
@supports not (overflow: clip){
    .wdk-lp-body .wdk-hero__stage{
        overflow: hidden;
    }
}

/* --- (2) 全ブラウザ共通：flow--glass の幅基準を"%依存"から切り離す ---
   min(94%, 400px) の 94% が Safari で祖先基準に漏れる問題への根本対策。
   親 stage の max-width が確定しているので、
   ここでは "親の内側 100% を上限にした固定 clamp" に置き換える。
   結果値は他ブラウザでも従来とほぼ同じ（400px上限は不変）。 */
.wdk-lp-body .wdk-flow--glass{
    /* min(94%, 400px) → clamp(0px, 100%, 400px) と等価だが
       "%基準の祖先漏れ" を Safari が起こしても親stage内で必ずクリップされる */
    width: 100%;
    max-width: 400px;
    /* margin-top の % 基準も同時に安定化させるため
       -22% を rem/px の絶対値レンジに変換（他ブラウザでの見た目は同一） */
    margin-top: clamp(-90px, -22%, -60px);
}

/* --- (3) iPhone Safari 限定パッチ ---
   @supports (-webkit-touch-callout: none) は iOS Safari のみ true。
   PC Safari / Chrome / Firefox / Android には一切影響しない。 */
@supports (-webkit-touch-callout: none){
    /* stage の transform×animation×flex×overflow 4点衝突を回避
       アニメーションはそのまま活かしつつ、レイアウト計算を
       "1コンテナ内に閉じる" ため contain を追加 */
    .wdk-lp-body .wdk-hero__stage{
        contain: layout paint;
        /* 幅を pixel で確定：Safariが基準幅を祖先に漏らす余地を消す */
        width: 100%;
    }

    /* flow--glass の compositing 昇格を "幅計算後" に遅延させる */
    .wdk-lp-body .wdk-flow--glass{
        /* transform: translate3d(0,0,0) の GPU 昇格は残す必要があるが、
           will-change を明示することで Safari は幅計算を先に確定してから
           合成レイヤ化するため、%基準の漏れが起きない。 */
        will-change: transform;
        /* backdrop-filter が幅計算にフィードバックする挙動を切る */
        isolation: isolate;
        /* 最終防衛線：親 stage の実効幅を絶対に超えない */
        max-width: 100%;
        box-sizing: border-box;
    }

    /* hero セクション自体にも保険で clip を効かせる
       （body の overflow-x:clip が Cocoon 親テーマの何かに
        上書きされた場合の二重防御） */
    .wdk-lp-body .wdk-hero{
        overflow: clip;
    }
}


/* ============================================================
   iPhone Safari 最終保険 — main / wrap レベルの幅ロック
   ------------------------------------------------------------
   Cocoon 親テーマの残存スタイルが .wdk-main / .wdk-wrap に
   微細な padding-right / min-width を注入している場合の最終防衛。
   iOS Safari 限定なので他環境の表示は一切変わらない。
============================================================ */
@supports (-webkit-touch-callout: none){
    .wdk-lp-body .wdk-main{
        width: 100%;
        max-width: 100vw;
        overflow-x: clip;
    }
    .wdk-lp-body .wdk-hero .wdk-wrap{
        width: 100%;
        max-width: min(var(--wdk-wrap), 100vw);
        box-sizing: border-box;
    }
    /* ヘッダーの CTA ボタンが画面右端に張り付いて見える現象への追加保険。
       header は position: fixed なので Layout Viewport 幅で明示ロックする。 */
    .wdk-lp-body .wdk-header{
        width: 100vw;
        max-width: 100vw;
        left: 0;
        right: auto;
    }
    .wdk-lp-body .wdk-header .wdk-wrap{
        width: 100%;
        max-width: min(var(--wdk-wrap), 100vw);
        box-sizing: border-box;
    }
}