/* ==========================================================================
Sourvane サービス案内ページ 専用スタイル
==========================================================================
このファイルは、もともと「外観 → カスタマイズ → 追加CSS」に入っていたものを
テーマのファイルに移したものである。
移した理由：
追加CSS は WordPress の仕様上、全ページの にそのまま書き出される。
約33KBがサイト全体（約3,900ページ）に配られていたが、
このCSSのセレクタ273本はすべて .svn 配下で、
Sourvane案内ページ5本以外には1つもマッチしていなかった。
読み込み条件：
inc/sourvane-css.php が、本文に class="svn を含むページでのみ読み込む。
編集するときは：
このファイルを直接編集すること。管理画面の「追加CSS」は無効化されている
（inc/sourvane-css.php の wp_get_custom_css フィルター）。
フォント（Shippori Mincho B1 / Playfair Display）は、元は先頭の @import で
読み込んでいたが、@import は CSS の解析後にしか始まらないため、
inc/sourvane-css.php から として読み込むようにした。
========================================================================== */
/* ==========================================================================
Sourvane サービス案内ページ 共通スタイル v0.3 (2026-09-26)
設置場所：外観 → カスタマイズ → 追加CSS
■ 影響範囲について
すべてのセレクタは .svn（このページ群でしか使わないクラス）配下に限定しています。
.svn を含まないページのHTMLには1つもマッチしないため、既存ページの表示は変わりません。
■ 詳細度の設計（重要）
テーマ（style.css）は .wp__single_content h2 / .gp__page__child h2 / .page table など
詳細度 0-1-1〜0-1-2 のルールで見出し・表・リンクを装飾しています。
そこで打ち消し用の土台を「.svn.svn :where(タグ)」＝ 0-2-0 とし、
部品側は「.svn .svn-xxx」＝ 0-2-0（土台より後に記述）としています。
これにより「テーマ ＜ 土台 ＜ 部品」の順で確実に上書きされます。
新しい部品を足すときも必ず .svn を前置してください。
========================================================================== */
/* --- 1. トークン ---------------------------------------------------------- */
.svn{
--svn-base:#FBF8F3; --svn-base-alt:#F4EDE2;
--svn-surface:#FFFFFF; --svn-surface-2:#FCFAF6;
--svn-line:#E2D6C3; --svn-line-strong:#CDBCA3;
--svn-ink:#241812; --svn-muted:#6B5A4C;
--svn-brand:#3A251A; --svn-brand-ink:#2A1A12;
--svn-link:#8A6420;
--svn-gold:#C9A96A; --svn-gold-light:#FFF3D2;
--svn-zebra:#FAF6EF; --svn-hover:#F3EADC;
--svn-dark:#17110E; --svn-dark-alt:#1F1713;
--svn-dark-surface:#221912;--svn-dark-line:#3B2C22;
--svn-dark-ink:#F4EBDD; --svn-dark-muted:#C6B29B;
--svn-dark-link:#E9C88C;
--svn-grad-brand:linear-gradient(135deg,#2A1A12 0%,#4A2F20 55%,#5E3E2A 100%);
--svn-grad-brand-hover:linear-gradient(135deg,#4A2F20 0%,#6B4830 55%,#7A5436 100%);
--svn-grad-gold:linear-gradient(100deg,#D9B87A 0%,#FFF3D2 26%,#F5E3B4 50%,#E6C98F 74%,#FFF6DC 100%);
--svn-grad-gold-hover:linear-gradient(100deg,#FFF6DC 0%,#FFFDF2 50%,#F5E3B4 100%);
--svn-grad-dark:linear-gradient(135deg,#0F0B09 0%,#241812 50%,#3A281D 100%);
--svn-veil:linear-gradient(90deg,rgba(10,7,5,.92) 0%,rgba(14,10,7,.74) 46%,rgba(14,10,7,.34) 100%);
--svn-r:4px; --svn-r-card:8px;
--svn-shadow:0 1px 2px rgba(42,26,18,.06), 0 calc(.5 * var(--s)) calc(1.5 * var(--s)) rgba(42,26,18,.06);
--svn-font:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
--svn-serif:"Shippori Mincho B1","Yu Mincho","Hiragino Mincho ProN",serif;
--svn-latin:"Playfair Display",Georgia,serif;
--svn-accent:#8A6420;
--svn-accent-dark:#E9C88C;
/* 画面幅に応じた基準単位。1920px までは 16px、それ以上は画面幅の 1/120（上限24px）。
sourvane.jp の html{font-size:min(0.833333vw,24px)}（1921px以上）と同じ曲線。
.svn 内のすべての寸法をこの単位の倍数で組んでいるため、大画面では全体が比例拡大する。 */
--s:clamp(1rem, 0.833333vw, 1.5rem);
--svn-w:min(94vw, calc(100 * var(--s)));
--svn-w-wide:min(96vw, calc(112.5 * var(--s)));
font-family:var(--svn-font);
font-size:var(--s);
font-weight:400;
font-style:normal;
color:var(--svn-ink);
line-height:1.9;
letter-spacing:0;
text-align:left;
-webkit-font-smoothing:antialiased;
}
.svn.is-design{ --svn-accent:#8A6420; --svn-accent-dark:#E4C28A; }
.svn.is-build { --svn-accent:#A2552F; --svn-accent-dark:#E8A87E; }
.svn.is-verify{ --svn-accent:#4F6F5E; --svn-accent-dark:#9FC9B2; }
.svn.is-care { --svn-accent:#55617F; --svn-accent-dark:#A9B6D6; }
/* --- 2. テーマの装飾を打ち消す土台（詳細度 0-2-0） ------------------------
theme: sakiyomi が実際に掛けているもの（2026-09-26 に実機で確認）
・.wp__single_content h2 / .gp__page__child h2 … 背景色 #E4314E・#42210B、白文字、padding
・.wp__single_content h3 … 赤い下線、左padding、色 #333
・.wp__single_content p / .gp__page__child p … 色 #333、margin、line-height、左padding
・.wp__single_content table td … width:25%、中央寄せ、薄い罫線
・.wp__single_content ul / ol … margin-left:20px
・.wp__ai_content h3::after / ul li::before … 緑青のグラデーション帯・黒い四角
・.wp__single_content a:hover … color:#fff / #ff3ae1（!important）
・@media(max-width:1024px) .page table … height:50px !important で潰す
------------------------------------------------------------------------ */
.svn.svn :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,blockquote,
table,caption,thead,tbody,tfoot,tr,th,td,
figure,figcaption,section,article,aside,header,footer,
div,span,a,img,svg,hr,em,strong,b,i,small){
margin:0; padding:0; border:0; background:none; color:inherit;
font:inherit; letter-spacing:inherit; text-align:inherit;
text-transform:none; text-decoration:none; text-indent:0;
vertical-align:baseline; list-style:none; box-shadow:none; border-radius:0;
}
.svn.svn :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,div,span,figure,figcaption,table,th,td)::before,
.svn.svn :where(h1,h2,h3,h4,h5,h6,p,ul,ol,li,a,div,span,figure,figcaption,table,th,td)::after{
content:none; display:none;
}
.svn.svn :where(table){ border-collapse:collapse; border-spacing:0; table-layout:auto; width:auto; }
.svn.svn :where(th,td){ width:auto; }
.svn.svn :where(img,svg){ max-width:100%; height:auto; display:block; }
/* WebP変換プラグインが ![]()
を で包むため、picture もブロック要素として扱う */
.svn.svn :where(picture){ display:block; }
.svn.svn :where(p):empty{ display:none; }
/* テーマのリンク装飾（下線グラデーションとホバー色）を無効化 */
.svn.svn :where(a){ background-size:100% 100% !important; }
.svn.svn :where(a):hover{ color:inherit !important; background-size:100% 100% !important; }
/* 1024px 以下でテーマが表を50pxの読み込み帯に潰すのを止める */
@media (max-width:1024px){
.svn.svn :where(table){ display:table !important; height:auto !important;
background-image:none !important; position:static !important; }
.svn.svn :where(thead){ display:table-header-group !important; }
.svn.svn :where(tbody){ display:table-row-group !important; }
.svn.svn :where(tr){ display:table-row !important; }
}
/* --- 3. 器の解放（画面幅いっぱいに広げる） --------------------------------
親テーマの .grid-1600（max-width:1600px＋左右padding）を、
「.svn を含むコンテナ」に限って外す。:has() を使うため他ページには一切マッチしない。
100vw を使わないので縦スクロールバーぶんの横ずれも起きない。 */
.grid-1600:has(.svn){ max-width:none; padding-left:0; padding-right:0; }
@supports not selector(:has(*)){
.svn{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
}
/* --- 4. セクションの器 ---------------------------------------------------- */
.svn .svn-sec{ position:relative; }
.svn .svn-sec__in{
max-width:var(--svn-w); margin:0 auto;
padding:clamp(calc(3 * var(--s)),4.5vw,calc(5.5 * var(--s))) clamp(calc(1 * var(--s)),3vw,calc(2.5 * var(--s)));
}
.svn .svn-sec__in--wide{ max-width:var(--svn-w-wide); }
.svn .svn-sec--light{ background:var(--svn-base); color:var(--svn-ink); }
.svn .svn-sec--alt { background:var(--svn-base-alt); color:var(--svn-ink); }
.svn .svn-sec--dark { background:var(--svn-grad-dark); color:var(--svn-dark-ink); }
.svn .svn-sec--dark2{ background:linear-gradient(180deg,#31241A 0%,#241A13 100%); color:var(--svn-dark-ink); }
.svn .svn-sec--gold { background:var(--svn-grad-gold); color:var(--svn-brand-ink); }
/* --- 5. 見出し ------------------------------------------------------------ */
.svn .svn-eyebrow{
display:block; font-family:var(--svn-latin); font-size:calc(.75 * var(--s)); letter-spacing:.32em;
text-transform:uppercase; color:#EAD3A1; margin:0 0 calc(1 * var(--s)); line-height:1.4;
}
.svn .svn-sec--light .svn-eyebrow,.svn .svn-sec--alt .svn-eyebrow,.svn .svn-sec--gold .svn-eyebrow{ color:var(--svn-link); }
.svn .svn-rule{ display:block; width:calc(8.25 * var(--s)); height:3px; background:var(--svn-grad-gold); margin:0 0 calc(1.5 * var(--s)); border:0; }
.svn .svn-sec-title{
display:block; font-family:var(--svn-serif); font-weight:600; letter-spacing:.04em; line-height:1.5;
font-size:clamp(calc(1.3125 * var(--s)),2vw,calc(1.875 * var(--s))); color:inherit; background:none;
position:relative; margin:0 0 calc(1.75 * var(--s)); padding:0 0 calc(1 * var(--s)); border:0;
}
.svn .svn-sec-title::after{
content:"" !important; display:block !important; position:absolute; left:0; bottom:0;
width:calc(3.75 * var(--s)); height:2px; background:var(--svn-grad-gold);
}
.svn .svn-sec--light .svn-sec-title::after,.svn .svn-sec--alt .svn-sec-title::after{ background:var(--svn-accent); }
.svn .svn-sec-lead{
font-size:calc(1.0625 * var(--s)); line-height:2; margin:0 0 calc(2.5 * var(--s)); max-width:62em; color:inherit;
}
.svn .svn-sec--dark .svn-sec-lead,.svn .svn-sec--dark2 .svn-sec-lead{ color:var(--svn-dark-muted); }
.svn .svn-sec--light .svn-sec-lead,.svn .svn-sec--alt .svn-sec-lead{ color:var(--svn-muted); }
.svn .svn-sub-title{
display:block; font-family:var(--svn-serif); font-weight:600; font-size:calc(1.125 * var(--s)); letter-spacing:.04em;
line-height:1.6; margin:calc(2.75 * var(--s)) 0 calc(1 * var(--s)); padding:0; color:inherit; background:none; border:0;
}
/* --- 6. ボタン ------------------------------------------------------------ */
.svn .svn-btns{ display:flex; flex-wrap:wrap; gap:calc(.875 * var(--s)); margin-top:calc(2 * var(--s)); }
.svn .svn-btns > p{ display:contents; }
.svn .svn-btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5em;
padding:calc(.9375 * var(--s)) calc(2.5 * var(--s)); border-radius:var(--svn-r); border:1px solid transparent;
font-size:calc(.9375 * var(--s)); font-weight:700; letter-spacing:.1em; line-height:1.4;
text-decoration:none; text-align:center; cursor:pointer;
transition:background .25s,color .25s,box-shadow .25s;
}
.svn .svn-btn--gold{ background:var(--svn-grad-gold); color:#2A1A12 !important; box-shadow:0 2px 0 rgba(0,0,0,.25); }
.svn .svn-btn--gold:hover,.svn .svn-btn--gold:focus-visible{ background:var(--svn-grad-gold-hover); color:#2A1A12 !important; }
.svn .svn-btn--brand{ background:var(--svn-grad-brand); color:#F6EFE4 !important; border-color:#2A1A12; }
.svn .svn-btn--brand:hover,.svn .svn-btn--brand:focus-visible{ background:var(--svn-grad-brand-hover); color:#F6EFE4 !important; }
.svn .svn-btn--ghost{ background:transparent; border-color:rgba(240,221,174,.55); color:#F6EFE4 !important; }
.svn .svn-btn--ghost:hover,.svn .svn-btn--ghost:focus-visible{ background:var(--svn-grad-gold); border-color:transparent; color:#2A1A12 !important; }
.svn .svn-btn--accent{ background:var(--svn-accent); color:#FFF6E6 !important; }
.svn .svn-btn--accent:hover,.svn .svn-btn--accent:focus-visible{ background:var(--svn-brand-ink); color:#FFF6E6 !important; }
.svn .svn-btn__ex{ font-size:.75em; opacity:.75; letter-spacing:0; }
.svn a:focus-visible{ outline:2px solid #E9C88C; outline-offset:3px; }
/* --- 7. ヒーロー ---------------------------------------------------------- */
.svn .svn-hero{ position:relative; overflow:hidden; background:#0F0B09; }
/* ヒーロー背景。WebP変換プラグインが ![]()
を
![]()
に書き換えるため、
内側の ![]()
にも同じ指定を当てて必ず全面に敷き詰める。 */
.svn .svn-hero__bg,
.svn .svn-hero__bg img{
position:absolute; inset:0; width:100%; height:100%; max-width:none;
display:block; object-fit:cover; object-position:center;
}
.svn .svn-hero__bg{ opacity:.95; }
.svn .svn-hero::after{ content:"" !important; display:block !important; position:absolute; inset:0; background:var(--svn-veil); }
.svn .svn-hero__in{
position:relative; z-index:1; max-width:var(--svn-w); margin:0 auto;
padding:clamp(calc(3.5 * var(--s)),6vw,calc(7.5 * var(--s))) clamp(calc(1 * var(--s)),3vw,calc(2.5 * var(--s)));
color:var(--svn-dark-ink);
}
.svn .svn-hero__title{
display:block; font-family:var(--svn-serif); font-weight:600; letter-spacing:.04em; line-height:1.55;
font-size:clamp(calc(1.625 * var(--s)),3.3vw,calc(3 * var(--s))); margin:0 0 calc(1.25 * var(--s)); padding:0; max-width:20em;
color:var(--svn-dark-ink); background:none; border:0;
}
.svn .svn-hero__lead{ font-size:calc(1.0625 * var(--s)); line-height:2; color:#E4D8C6; max-width:46em; margin:0; }
.svn .svn-hero__lead + .svn-hero__lead{ margin-top:calc(1 * var(--s)); }
/* --- 8. カード ------------------------------------------------------------ */
.svn .svn-grid{ display:grid; gap:calc(1.5 * var(--s)); }
.svn .svn-grid--2{ grid-template-columns:repeat(2,1fr); }
.svn .svn-grid--3{ grid-template-columns:repeat(3,1fr); }
.svn .svn-grid--4{ grid-template-columns:repeat(4,1fr); }
.svn .svn-card{
background:var(--svn-surface); border:1px solid var(--svn-line);
border-radius:var(--svn-r-card); padding:calc(1.5 * var(--s)); box-shadow:var(--svn-shadow);
display:flex; flex-direction:column;
}
.svn .svn-sec--dark .svn-card,.svn .svn-sec--dark2 .svn-card{
background:var(--svn-dark-surface); border-color:rgba(201,169,106,.32); box-shadow:none; color:var(--svn-dark-ink);
}
.svn .svn-card__fig{ margin:-1.5rem -1.5rem calc(1.25 * var(--s)); border-radius:var(--svn-r-card) var(--svn-r-card) 0 0; overflow:hidden; }
.svn .svn-card__fig img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.svn .svn-card__title{
display:block; font-family:var(--svn-serif); font-weight:600; font-size:calc(1.1875 * var(--s)); line-height:1.6;
letter-spacing:.03em; margin:0 0 calc(.75 * var(--s)); padding:0; color:inherit; background:none; border:0;
}
.svn .svn-card__text{ font-size:calc(.9375 * var(--s)); line-height:1.95; color:var(--svn-muted); margin:0; }
.svn .svn-sec--dark .svn-card__text,.svn .svn-sec--dark2 .svn-card__text{ color:var(--svn-dark-muted); }
.svn .svn-card--top{ border-top:3px solid var(--svn-gold); }
/* --- 9. 指標 -------------------------------------------------------------- */
.svn .svn-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(1.25 * var(--s)); }
.svn .svn-stats--mt{ margin-top:calc(2.5 * var(--s)); }
.svn .svn-stat{ border-left:3px solid var(--svn-gold); padding:calc(.25 * var(--s)) 0 calc(.25 * var(--s)) calc(1 * var(--s)); }
.svn .svn-stat__n{
display:block; font-family:var(--svn-latin); font-size:calc(2 * var(--s)); line-height:1.2;
font-variant-numeric:tabular-nums; color:var(--svn-link);
}
.svn .svn-sec--dark .svn-stat__n,.svn .svn-sec--dark2 .svn-stat__n{ color:var(--svn-dark-link); }
.svn .svn-stat__l{ display:block; font-size:calc(.8125 * var(--s)); letter-spacing:.06em; color:var(--svn-muted); margin-top:calc(.25 * var(--s)); }
.svn .svn-sec--dark .svn-stat__l,.svn .svn-sec--dark2 .svn-stat__l{ color:var(--svn-dark-muted); }
/* --- 10. 対比（問題／解決） ----------------------------------------------- */
.svn .svn-vs{ display:grid; grid-template-columns:1fr 1fr; gap:calc(1.25 * var(--s)) calc(2 * var(--s)); align-items:start; }
.svn .svn-vs__head{
display:block; font-family:var(--svn-serif); font-size:calc(1.125 * var(--s)); font-weight:600; letter-spacing:.04em;
padding:0 0 calc(.625 * var(--s)); border-bottom:1px solid rgba(201,169,106,.45); margin:0 0 calc(1 * var(--s)); color:inherit; background:none;
}
.svn .svn-vs__head--ans{ color:var(--svn-link); border-bottom-color:var(--svn-accent); }
.svn .svn-vs__item{ margin:0 0 calc(1.25 * var(--s)); }
.svn .svn-vs__t{
font-weight:700; font-size:calc(1 * var(--s)); margin:0 0 calc(.375 * var(--s));
display:flex; gap:calc(.625 * var(--s)); align-items:baseline; color:inherit;
}
.svn .svn-vs__no{ font-family:var(--svn-latin); color:var(--svn-link); font-size:calc(1 * var(--s)); }
.svn .svn-vs__d{ font-size:calc(.9375 * var(--s)); line-height:1.9; color:var(--svn-muted); margin:0; }
/* --- 11. 番号つきの流れ --------------------------------------------------- */
.svn .svn-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(1.25 * var(--s)); }
.svn .svn-flow__card{
background:var(--svn-surface); border:1px solid var(--svn-line); border-top:2px solid var(--svn-accent);
border-radius:var(--svn-r); padding:calc(1.25 * var(--s));
}
.svn .svn-flow__h{ display:flex; gap:calc(.75 * var(--s)); align-items:baseline; margin:0 0 calc(.5 * var(--s)); }
.svn .svn-flow__n{ font-family:var(--svn-latin); font-size:calc(1.5 * var(--s)); color:var(--svn-accent); line-height:1; }
.svn .svn-flow__t{ font-weight:700; font-size:calc(.9375 * var(--s)); line-height:1.6; }
.svn .svn-flow__d{ font-size:calc(.875 * var(--s)); line-height:1.9; color:var(--svn-muted); margin:0; }
/* --- 12. 表 --------------------------------------------------------------- */
.svn .svn-tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--svn-r); }
.svn .svn-table{ width:100%; min-width:680px; background:var(--svn-surface); font-size:calc(.875 * var(--s)); table-layout:auto; margin:0; }
.svn .svn-table th,.svn .svn-table td{
border:1px solid var(--svn-line); padding:calc(.75 * var(--s)) calc(.875 * var(--s)); text-align:center; vertical-align:middle; width:auto;
}
.svn .svn-table thead th{ background:var(--svn-grad-brand); color:#F6EFE4; font-weight:700; border-color:#2A1A12; }
.svn .svn-table tbody th{ text-align:left; font-weight:700; background:var(--svn-zebra); width:24%; }
.svn .svn-table .is-yes{ background:#EEDDB4; color:#6B4A12; font-weight:700; }
.svn .svn-table .is-no { background:#EBE4DC; color:#8C7A6B; font-weight:700; }
.svn .svn-scrollhint{ display:none; font-size:calc(.8125 * var(--s)); color:var(--svn-muted); margin-top:calc(.625 * var(--s)); }
/* --- 13. チップ ----------------------------------------------------------- */
.svn .svn-chips{ display:flex; flex-wrap:wrap; gap:calc(.625 * var(--s)); margin:0; padding:0; list-style:none; }
.svn .svn-chips li.svn-chip{
display:inline-flex; align-items:center; justify-content:center;
min-height:calc(2.375 * var(--s)); padding:calc(.375 * var(--s)) calc(1.25 * var(--s)); position:static;
border-radius:999px; border:1px solid var(--svn-line-strong); background:var(--svn-surface);
font-size:calc(.9375 * var(--s)); font-weight:700; line-height:1.5; color:var(--svn-ink); letter-spacing:.04em;
white-space:nowrap;
}
/* --- 14. 含む／含まない --------------------------------------------------- */
.svn .svn-scope{ display:grid; grid-template-columns:1fr 1fr; gap:calc(1.5 * var(--s)); }
.svn .svn-scope__box{ border:1px solid var(--svn-line); border-radius:var(--svn-r-card); background:var(--svn-surface); padding:calc(1.5 * var(--s)); }
.svn .svn-scope__box--in{ border-top:3px solid var(--svn-accent); }
.svn .svn-scope__box--out{ border-top:3px solid var(--svn-line-strong); background:var(--svn-surface-2); }
.svn .svn-scope__h{ font-weight:700; font-size:calc(1 * var(--s)); margin:0 0 calc(1 * var(--s)); letter-spacing:.04em; }
.svn .svn-list{ display:grid; gap:calc(.625 * var(--s)); margin:0; padding:0; }
.svn .svn-list li{ position:relative; padding-left:calc(1.5 * var(--s)); font-size:calc(.875 * var(--s)); line-height:1.85; color:var(--svn-muted); }
.svn .svn-list li::before{
content:"" !important; display:block !important; position:absolute; left:0; top:.7em;
width:calc(.5 * var(--s)); height:calc(.5 * var(--s)); border-radius:50%; background:var(--svn-accent);
}
.svn .svn-list--out li::before{ background:none; border-top:1.5px solid var(--svn-line-strong); width:calc(.625 * var(--s)); height:0; top:.95em; border-radius:0; }
/* --- 15. 注記 ------------------------------------------------------------- */
.svn .svn-note{
border-left:3px solid var(--svn-gold); background:var(--svn-surface-2);
padding:calc(1 * var(--s)) calc(1.25 * var(--s)); font-size:calc(.875 * var(--s)); line-height:1.9; color:var(--svn-muted); margin-top:calc(1.5 * var(--s));
}
.svn .svn-sec--dark .svn-note,.svn .svn-sec--dark2 .svn-note{ background:rgba(201,169,106,.08); color:var(--svn-dark-muted); }
/* --- 16. 画面イメージ ----------------------------------------------------- */
.svn .svn-shots{ display:grid; grid-template-columns:1fr 1fr; gap:calc(1.25 * var(--s)); align-items:start; }
.svn .svn-shot{ border:1px solid var(--svn-line); border-radius:var(--svn-r); overflow:hidden; background:var(--svn-surface); box-shadow:var(--svn-shadow); margin:0; }
.svn .svn-shot img{ width:100%; }
.svn .svn-shot figcaption{ display:block; font-size:calc(.8125 * var(--s)); color:var(--svn-muted); padding:calc(.75 * var(--s)) calc(.875 * var(--s)); border-top:1px solid var(--svn-line); }
/* --- 17. 見出し＋リードと図版の2カラム ------------------------------------ */
.svn .svn-split{
display:grid; grid-template-columns:1.15fr .85fr;
gap:clamp(calc(1.75 * var(--s)),3vw,calc(3.5 * var(--s))); align-items:center; margin-bottom:clamp(calc(2 * var(--s)),3vw,calc(3.25 * var(--s)));
}
.svn .svn-split__body .svn-sec-lead{ margin-bottom:0; }
.svn .svn-figure{
border-radius:var(--svn-r-card); overflow:hidden; border:1px solid var(--svn-line);
box-shadow:var(--svn-shadow); margin:0;
}
.svn .svn-sec--dark .svn-figure,.svn .svn-sec--dark2 .svn-figure{ border-color:rgba(201,169,106,.3); box-shadow:none; }
.svn .svn-figure img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.svn .svn-sec__head--c{ text-align:center; max-width:72em; margin:0 auto clamp(calc(2 * var(--s)),3vw,calc(3 * var(--s))); }
.svn .svn-sec__head--c .svn-sec-title{ display:inline-block; }
.svn .svn-sec__head--c .svn-sec-title::after{ left:50%; transform:translateX(-50%); }
.svn .svn-sec__head--c .svn-sec-lead{ margin-left:auto; margin-right:auto; margin-bottom:0; }
/* --- 18. 関連サービスのカード -------------------------------------------- */
.svn .svn-svc{ display:grid; grid-template-columns:repeat(4,1fr); gap:calc(1.25 * var(--s)); }
.svn .svn-svc--mt{ margin-top:calc(2 * var(--s)); }
.svn .svn-svc__card{
position:relative; display:flex; flex-direction:column;
background:var(--svn-dark-surface);
border:1px solid rgba(201,169,106,.3); border-top:3px solid var(--svc-accent,#C9A96A);
border-radius:var(--svn-r-card); padding:calc(1.5 * var(--s)) calc(1.25 * var(--s)); color:var(--svn-dark-ink);
transition:background .25s,transform .25s;
}
.svn .svn-svc__card:hover{ background:#2C211A; transform:translateY(-2px); }
.svn .svn-svc__card--design{ --svc-accent:#E4C28A; }
.svn .svn-svc__card--build { --svc-accent:#E8A87E; }
.svn .svn-svc__card--verify{ --svc-accent:#9FC9B2; }
.svn .svn-svc__card--care { --svc-accent:#A9B6D6; }
.svn .svn-svc__step{ display:block; font-family:var(--svn-latin); font-size:calc(.75 * var(--s)); letter-spacing:.2em; color:var(--svc-accent,#C9A96A); margin:0 0 calc(.5 * var(--s)); }
.svn .svn-svc__name{
display:block; font-family:var(--svn-serif); font-size:calc(1.125 * var(--s)); font-weight:600; letter-spacing:.03em;
margin:0 0 calc(.625 * var(--s)); padding:0; color:var(--svn-dark-ink); background:none; border:0;
}
.svn .svn-svc__pre{ margin:0 0 calc(1 * var(--s)); }
.svn .svn-svc__pre span{
display:inline-block; font-size:calc(.6875 * var(--s)); letter-spacing:.04em; line-height:1.5;
border:1px solid rgba(201,169,106,.4); border-radius:999px; padding:calc(.25 * var(--s)) calc(.75 * var(--s)); color:var(--svn-dark-muted);
}
.svn .svn-svc__d{ font-size:calc(.875 * var(--s)); line-height:1.9; color:var(--svn-dark-muted); margin:0 0 calc(1 * var(--s)); flex:1; }
.svn .svn-svc__morewrap{ margin:0; }
.svn .svn-svc__more{
display:inline-block; font-size:calc(.8125 * var(--s)); font-weight:700; letter-spacing:.08em;
color:var(--svc-accent,#C9A96A) !important;
}
.svn .svn-svc__more::after{ content:"" !important; display:block !important; position:absolute; inset:0; }
.svn .svn-svc__card:hover .svn-svc__more{ color:#FFF6DC !important; }
/* --- 19. CTA帯 ------------------------------------------------------------ */
.svn .svn-cta{ text-align:center; }
.svn .svn-cta .svn-sec-title{ display:inline-block; margin-left:auto; margin-right:auto; }
.svn .svn-cta .svn-sec-title::after{ left:50%; transform:translateX(-50%); }
.svn .svn-cta .svn-sec-lead{ margin-left:auto; margin-right:auto; }
.svn .svn-cta .svn-btns{ justify-content:center; }
.svn .svn-sec--gold .svn-sec-lead{ color:#3A2A18; }
/* --- 20. 流れ図（横版／縦版の出し分け） ---------------------------------- */
.svn .svn-flowfig svg{ width:100%; height:auto; display:block; max-width:100%; }
.svn .svn-flowfig--v{ display:none; }
.svn .svn-flowfig--h{ max-width:calc(75 * var(--s)); margin-left:auto; margin-right:auto; }
/* --- 21. レスポンシブ ----------------------------------------------------- */
@media (max-width:980px){
.svn .svn-grid--3,.svn .svn-grid--4,.svn .svn-flow,.svn .svn-svc{ grid-template-columns:repeat(2,1fr); }
.svn .svn-stats{ grid-template-columns:repeat(2,1fr); }
.svn .svn-shots{ grid-template-columns:1fr; }
.svn .svn-split{ grid-template-columns:1fr; }
.svn .svn-vs{ grid-template-columns:1fr; gap:0; }
.svn .svn-vs__col--ans{ margin-top:calc(2 * var(--s)); }
}
@media (max-width:760px){
.svn .svn-flowfig--h{ display:none; }
.svn .svn-flowfig--v{ display:block; max-width:360px; margin:0 auto; }
.svn .svn-scrollhint{ display:block; }
}
@media (max-width:600px){
.svn .svn-grid--2,.svn .svn-grid--3,.svn .svn-grid--4,
.svn .svn-flow,.svn .svn-svc,.svn .svn-scope,.svn .svn-stats{ grid-template-columns:1fr; }
.svn .svn-btn{ width:100%; padding:calc(.875 * var(--s)) calc(1.25 * var(--s)); }
.svn .svn-card__fig{ margin:-1.5rem -1.5rem calc(1 * var(--s)); }
}
@media (prefers-reduced-motion:reduce){
.svn *,.svn *::before,.svn *::after{ transition:none !important; }
.svn .svn-svc__card:hover{ transform:none; }
}
/* ==========================================================================
22. 関連サービスページ用の追加部品
.svn に is-design / is-build / is-verify / is-care を付けると、
アクセント色がサービスごとに切り替わる（§1 のトークン参照）。
ここのセレクタも .svn を前置してあるので他ページには影響しない。
========================================================================== */
/* --- 22-1. アクセント色の適用（関連サービスページのときだけ） ------------- */
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-eyebrow{ color:var(--svn-accent-dark); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-sec--light .svn-eyebrow,
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-sec--alt .svn-eyebrow{ color:var(--svn-accent); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-rule{ background:var(--svn-accent-dark); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-sec--dark .svn-sec-title::after,
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-sec--dark2 .svn-sec-title::after,
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-hero .svn-sec-title::after{ background:var(--svn-accent-dark); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-stat{ border-left-color:var(--svn-accent); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-sec--dark .svn-stat{ border-left-color:var(--svn-accent-dark); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-sec--dark .svn-stat__n,
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-sec--dark2 .svn-stat__n{ color:var(--svn-accent-dark); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-stat__n{ color:var(--svn-accent); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-note{ border-left-color:var(--svn-accent); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-sec--dark .svn-note,
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-sec--dark2 .svn-note{ border-left-color:var(--svn-accent-dark); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-card--top{ border-top-color:var(--svn-accent); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-vs__no{ color:var(--svn-accent); }
.svn:is(.is-design,.is-build,.is-verify,.is-care) .svn-table thead th{
background:linear-gradient(135deg,var(--svn-brand-ink) 0%,var(--svn-brand) 60%,var(--svn-accent) 160%);
}
/* --- 22-2. ヒーローの前提条件バッジ --------------------------------------- */
.svn .svn-hero__meta{ display:flex; flex-wrap:wrap; gap:calc(.5 * var(--s)); margin:0 0 calc(1.25 * var(--s)); }
.svn .svn-hero__meta > p{ display:contents; }
.svn .svn-badge{
display:inline-flex; align-items:center; gap:.5em;
padding:calc(.3125 * var(--s)) calc(.875 * var(--s));
border:1px solid var(--svn-accent-dark); border-radius:999px;
font-size:calc(.75 * var(--s)); font-weight:700; letter-spacing:.06em; line-height:1.5;
color:var(--svn-accent-dark); white-space:nowrap;
}
.svn .svn-badge--solid{ background:var(--svn-accent-dark); color:#211710; border-color:transparent; }
/* --- 22-3. 当社の環境／お客様の環境（隔絶の図） --------------------------- */
.svn .svn-iso{ display:grid; grid-template-columns:1fr auto 1fr; gap:calc(1.25 * var(--s)); align-items:stretch; }
.svn .svn-iso__box{
border:1px solid rgba(201,169,106,.32); border-radius:var(--svn-r-card);
background:var(--svn-dark-surface); padding:calc(1.375 * var(--s));
}
.svn .svn-iso__box--us{ border-top:3px solid var(--svn-accent-dark); }
.svn .svn-iso__box--you{ border-top:3px solid var(--svn-dark-line); background:rgba(255,255,255,.03); }
.svn .svn-iso__h{
display:block; font-family:var(--svn-serif); font-size:calc(1.0625 * var(--s)); font-weight:600;
letter-spacing:.04em; margin:0 0 calc(.875 * var(--s)); color:var(--svn-dark-ink);
}
.svn .svn-iso__mid{
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:calc(.75 * var(--s)); min-width:calc(9 * var(--s)); position:relative; text-align:center;
}
.svn .svn-iso__mid::before{
content:"" !important; display:block !important; position:absolute; top:0; bottom:0; left:50%;
border-left:2px dashed rgba(201,169,106,.45);
}
.svn .svn-iso__label{
position:relative; background:var(--svn-dark-alt); padding:calc(.375 * var(--s)) calc(.625 * var(--s));
font-size:calc(.75 * var(--s)); font-weight:700; letter-spacing:.08em; color:var(--svn-dark-muted);
}
.svn .svn-iso__flow{
position:relative; background:var(--svn-dark-alt); padding:calc(.5 * var(--s)) calc(.625 * var(--s));
font-size:calc(.75 * var(--s)); line-height:1.6; color:var(--svn-accent-dark); font-weight:700;
}
@media (max-width:980px){
.svn .svn-iso{ grid-template-columns:1fr; }
.svn .svn-iso__mid{ min-width:0; padding:calc(.5 * var(--s)) 0; }
.svn .svn-iso__mid::before{ top:50%; bottom:auto; left:0; right:0; width:100%;
border-left:0; border-top:2px dashed rgba(201,169,106,.45); }
}
/* --- 22-4. 他の関連サービス（3枚） ---------------------------------------- */
.svn .svn-svc--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .svn .svn-svc--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .svn .svn-svc--3{ grid-template-columns:1fr; } }
/* --- 22-5. 流れ図で現在地を示す ------------------------------------------- */
.svn .svn-flowfig .is-current rect{ stroke-width:3; }
/* --- 22-6. 見落としがちな要素の補正 --------------------------------------- */
/* §2 の土台で font:inherit にしているため、強調の太字を戻す */
.svn .svn-sec-lead strong,.svn .svn-card__text strong,.svn .svn-list strong,
.svn .svn-note strong,.svn .svn-vs__d strong,.svn .svn-flow__d strong,.svn .svn-svc__d strong{ font-weight:700; }
.svn :where(em,i){ font-style:italic; }
/* 暗い地の上に置く箇条書き */
.svn .svn-sec--dark .svn-list li,.svn .svn-sec--dark2 .svn-list li{ color:var(--svn-dark-muted); }
.svn .svn-sec--dark .svn-list li::before,.svn .svn-sec--dark2 .svn-list li::before{ background:var(--svn-accent-dark); }
.svn .svn-sec--dark .svn-list--out li::before,.svn .svn-sec--dark2 .svn-list--out li::before{
background:none; border-top-color:rgba(201,169,106,.5);
}
/* 本文中のリンク（カード全体リンクの .svn-svc__more とは用途が違うので別クラス） */
.svn .svn-link{
color:var(--svn-accent) !important; font-weight:700;
text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px;
}
.svn .svn-sec--dark .svn-link,.svn .svn-sec--dark2 .svn-link,.svn .svn-hero .svn-link{ color:var(--svn-accent-dark) !important; }
.svn .svn-link:hover{ color:var(--svn-brand-ink) !important; }
.svn .svn-sec--dark .svn-link:hover,.svn .svn-sec--dark2 .svn-link:hover{ color:#FFF6DC !important; }
/* 隔絶の図：中央列の p を透過させて span を直接フレックス項目にする */
.svn .svn-iso__mid > p{ display:contents; }
/* --- 22-7. 表の見出しセル内の補足 ----------------------------------------- */
.svn .svn-th-note{
display:block; font-size:calc(.6875 * var(--s)); font-weight:400; line-height:1.5;
color:var(--svn-muted); margin-top:calc(.25 * var(--s));
}
/* --- 22-8. カード内のバッジ（扱いの区分を示す） --------------------------- */
.svn .svn-cardbadge{ margin:0 0 calc(.75 * var(--s)); }
.svn .svn-card--flat{ border-top:3px solid var(--svn-accent-dark); }
/* --- 22-9. ヒーローの暗幕を強める（明るい背景画像を使うページ用） --------
.svn-hero に svn-hero--dim を併記すると、文字が載る左側をより強く落とす。 */
.svn .svn-hero--dim::after{
background:
linear-gradient(90deg, rgba(8,6,4,.96) 0%, rgba(9,7,5,.92) 32%, rgba(11,8,6,.74) 60%, rgba(14,10,7,.40) 100%),
linear-gradient(180deg, rgba(10,7,5,.30) 0%, rgba(10,7,5,0) 38%, rgba(10,7,5,.38) 100%);
}
.svn .svn-hero--dim .svn-hero__bg{ filter:saturate(.82) contrast(1.03); opacity:1; }
@media (max-width:760px){
.svn .svn-hero--dim::after{
background:
linear-gradient(180deg, rgba(8,6,4,.92) 0%, rgba(9,7,5,.88) 55%, rgba(12,9,6,.80) 100%);
}
}
/* 表のヘッダーセル内の補足は、濃い地に載るため明るい色にする */
.svn .svn-table thead th .svn-th-note{ color:rgba(246,239,228,.72); }
/* --- 22-10. ヒーローの暗幕（さらに強い版） --------------------------------
明るい背景画像を使うページ用。svn-hero--dim より一段強く落とす。 */
.svn .svn-hero--dim2::after{
background:
linear-gradient(90deg, rgba(6,5,3,.975) 0%, rgba(8,6,4,.95) 34%, rgba(10,8,5,.84) 62%, rgba(14,10,7,.55) 100%),
linear-gradient(180deg, rgba(10,7,5,.36) 0%, rgba(10,7,5,.04) 40%, rgba(10,7,5,.46) 100%);
}
.svn .svn-hero--dim2 .svn-hero__bg{ filter:saturate(.72) brightness(.80) contrast(1.04); opacity:1; }
@media (max-width:760px){
.svn .svn-hero--dim2::after{
background:linear-gradient(180deg, rgba(6,5,3,.95) 0%, rgba(8,6,4,.92) 55%, rgba(12,9,6,.88) 100%);
}
}
/* --- 22-11. 枠の中に収める小さめの表 -------------------------------------- */
.svn .svn-table--compact{ min-width:0; font-size:calc(.8125 * var(--s)); }
.svn .svn-table--compact th,.svn .svn-table--compact td{ padding:calc(.5 * var(--s)) calc(.375 * var(--s)); }
.svn .svn-table--compact tbody th{ width:auto; text-align:center; font-family:var(--svn-latin); }
.svn .svn-scope__box .svn-tablewrap{ margin-bottom:calc(.75 * var(--s)); }
.svn .svn-scope__box .svn-sec-lead{ font-size:calc(.875 * var(--s)); line-height:1.9; margin:0; color:var(--svn-muted); max-width:none; }
/* --- 22-12. 暗い地のセクションに表を置いたときの補正 ----------------------
.svn-table は白い面を持つため、文字色まで地の色を継ぐと読めなくなる。
セクションの地に関わらず、表の中は常に濃い文字色にする。 */
.svn .svn-table{ color:var(--svn-ink); }
.svn .svn-table thead th{ color:#F6EFE4; }
.svn .svn-sec--dark .svn-scrollhint,.svn .svn-sec--dark2 .svn-scrollhint{ color:var(--svn-dark-muted); }