/* =========================================================
   base.css  全ページ共通の土台（リセットと部品の基本ルール）
   STUDIO の表示ルールを再現しているため、ここは基本的に変更しない。
   ========================================================= */

/* --- アイコン用フォント（Font Awesome。元サイトと同じ 6.4.2 の塗り。このサイトで使っているのは塗りのアイコンだけ） --- */
@font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: block; src: url("/assets/fonts/fa-solid-900.woff2") format("woff2"); }

:root {
  --ease: cubic-bezier(0.4, 0.4, 0, 1);   /* STUDIO 標準のホバー速度カーブ */
}

html, body { margin: 0; padding: 0; }
body { background: #fff; }

/* --- リセット（STUDIO と同じく、各要素に直接かかる） --- */
:where(.site, .site a, .site abbr, .site address, .site article, .site aside, .site audio, .site b, .site blockquote, .site button, .site canvas, .site caption, .site cite, .site code, .site dd, .site del, .site details, .site dfn, .site div, .site dl, .site dt, .site em, .site fieldset, .site figcaption, .site figure, .site footer, .site form, .site h1, .site h2, .site h3, .site h4, .site h5, .site h6, .site header, .site hgroup, .site i, .site iframe, .site img, .site input, .site ins, .site kbd, .site label, .site legend, .site li, .site main, .site mark, .site menu, .site nav, .site object, .site ol, .site p, .site pre, .site q, .site samp, .site section, .site select, .site small, .site span, .site strong, .site sub, .site summary, .site sup, .site table, .site tbody, .site td, .site textarea, .site tfoot, .site th, .site thead, .site time, .site tr, .site ul, .site var, .site video) {
  -webkit-font-smoothing: antialiased; box-sizing: border-box; color: rgb(51, 51, 51); word-spacing: 1px; backface-visibility: hidden;
  border: 0; margin: 0; padding: 0; font-family: sans-serif; line-height: 1; text-decoration: none; list-style: none;
  transition: 0.3s var(--ease);
}
:where(.site) a, :where(.site) button { vertical-align: baseline; background: none; font-size: 100%; }
:where(.site) a:focus:not(:focus-visible), :where(.site) button:focus:not(:focus-visible) { outline: none; }
:where(.site) input, :where(.site) select { vertical-align: middle; }
:where(.site) textarea { resize: none; }
:where(.site) input[type="email"], :where(.site) input[type="tel"], :where(.site) input[type="text"], :where(.site) select, :where(.site) textarea { appearance: none; }
:where(.site) button, :where(.site) a { cursor: pointer; }

/* --- 部品の基本形 ---
   b    : すべての部品。縦並び・中央揃えのフレックスボックス
   t    : 文字の部品（横並び・中央揃え）
   pic  : 背景画像の部品（画像は style="--img:url(...)" で指定）
   ic   : Material Symbols のアイコン（文字でアイコン名を書く。例 chevron_right）
   rich : 記事本文などのリッチテキスト                                       */
:where(.b) { z-index: 0; pointer-events: all; flex-flow: column; flex: 0 0 auto; align-content: center; align-items: center; max-width: 100%; display: flex; position: relative;
  transition-property: all; }
:where(.b)::-webkit-scrollbar { display: none; }
:where(.btn) { cursor: pointer; transition: 0.4s var(--ease); }
:where(input.b, textarea.b) { align-content: normal; }
:where(.b.inner) { position: static !important; }
:where(.b.fixed) { z-index: 2; }
:where(.b.t), :where(.b.ic) { word-break: break-word; overflow-wrap: anywhere; flex-direction: row; place-content: center; align-items: center; display: flex; overflow: visible; }
:where(.pic) { position: relative; }
:where(.pic)::before { content: ""; border-radius: inherit; z-index: -2; pointer-events: none; background: var(--img, none) 50% center / cover; width: 100%; height: 100%; transition: inherit; position: absolute; top: 0; left: 0; }
/* 背景画像の出し分け：大きさ違いの版がある画像は --img-set（画面幅の区切りごとに -840 / -540）が自動で付き、
   画面の幅と解像度に合う版が使われる（src/lib/image-sets.mjs）。付いていない画像は --img のまま。
   --img-set は子の .pic に引き継がれないよう、各 .pic で一度消す（style に書いた値が優先される） */
:where(.pic) { --img-set: initial; --img-set-840: initial; --img-set-540: initial; }
@supports (background-image: image-set(url("a.webp") 1x)) {
  :where(.pic)::before { background-image: var(--img-set, var(--img, none)); }
  @media screen and (max-width: 840px) { :where(.pic)::before { background-image: var(--img-set-840, var(--img-set, var(--img, none))); } }
  @media screen and (max-width: 540px) { :where(.pic)::before { background-image: var(--img-set-540, var(--img-set-840, var(--img-set, var(--img, none)))); } }
}
:where(.b.ic) { font-family: "Material Symbols Outlined"; font-variation-settings: "FILL" var(--symbol-fill, 0), "wght" var(--symbol-weight, 400);
  min-width: 1em; min-height: 1em; font-style: normal; font-weight: 400; letter-spacing: normal; text-transform: none; white-space: nowrap; overflow-wrap: normal; direction: ltr; -webkit-font-smoothing: antialiased; line-height: 1; }
.w100 { --symbol-weight: 100; } .w200 { --symbol-weight: 200; } .w300 { --symbol-weight: 300; } .w400 { --symbol-weight: 400; }
.w500 { --symbol-weight: 500; } .w600 { --symbol-weight: 600; } .w700 { --symbol-weight: 700; }

/* 改行の出し分け（data-bp="@tablet:0" = 760px 以下で消す 等） */
br[data-bp~="@tablet:1"], br[data-bp~="@mobile:1"], br[data-bp~="@mini:1"] { display: none; }
@media screen and (max-width: 760px) { br[data-bp~="@tablet:0"] { display: none; } br[data-bp~="@tablet:1"] { display: inline; } }
@media screen and (max-width: 540px) { br[data-bp~="@mobile:0"] { display: none; } br[data-bp~="@mobile:1"] { display: inline; } }
@media screen and (max-width: 360px) { br[data-bp~="@mini:0"] { display: none; } br[data-bp~="@mini:1"] { display: inline; } }

/* ページ全体の箱（STUDIO の StudioCanvas 相当） */
.site { height: auto; min-height: 100dvh; display: flex; }
.site > .b { min-height: 100dvh; overflow: clip; }

/* リッチテキスト（記事本文）。ページ側の指定が勝つよう :where() で優先度を下げている（STUDIO と同じ） */
:where(.rich) { word-break: break-word; display: block; }
:where(.rich) [data-thread], :where(.rich) a, :where(.rich) blockquote, :where(.rich) em, :where(.rich) h1, :where(.rich) h2, :where(.rich) h3, :where(.rich) h4, :where(.rich) li, :where(.rich) ol, :where(.rich) p, :where(.rich) p > code, :where(.rich) pre, :where(.rich) pre > code, :where(.rich) s, :where(.rich) strong, :where(.rich) table tbody, :where(.rich) table tbody tr, :where(.rich) table tbody tr > td, :where(.rich) table tbody tr > th, :where(.rich) u, :where(.rich) ul { color: inherit; font-family: inherit; font-size: inherit; text-align: inherit; letter-spacing: inherit; line-height: inherit; font-weight: inherit; font-style: inherit; backface-visibility: visible; }
:where(.rich) p { align-self: stretch; margin: 10px 0; display: block; }
:where(.rich) > p { min-height: 1em; }
:where(.rich) img, :where(.rich) video { vertical-align: bottom; max-width: 100%; height: auto; }
:where(.rich) h1 { align-self: stretch; margin: 20px 0; font-size: 3em; font-weight: 700; display: block; }
:where(.rich) h2 { align-self: stretch; margin: 10px 0; font-size: 2em; font-weight: 700; display: block; }
:where(.rich) h3 { align-self: stretch; margin: 10px 0; font-size: 1em; font-weight: 700; display: block; }
:where(.rich) h4, :where(.rich) h5 { align-self: stretch; margin: 10px 0; font-size: 1em; font-weight: 600; display: block; }
:where(.rich) h6 { align-self: stretch; margin: 10px 0; font-size: 1em; font-weight: 500; display: block; }
:where(.rich) [data-type="table"] { overflow-x: auto; }
:where(.rich) [data-type="table"] p { white-space: pre-line; word-break: break-all; }
:where(.rich) table { table-layout: auto; border-collapse: collapse; border-spacing: unset; color: rgb(26, 26, 26); border: 1px solid rgb(242, 242, 242); margin: 10px 0; font-size: 14px; line-height: 1.4; }
:where(.rich) table tr th { background: rgba(245, 245, 245, 0.5); }
:where(.rich) table tr td, :where(.rich) table tr th { border: 1px solid rgb(242, 242, 242); min-width: 100px; max-width: 240px; padding: 12px; }
:where(.rich) table tr td p, :where(.rich) table tr th p { margin: 0; }
:where(.rich) blockquote { border-left: 3px solid rgba(0, 0, 0, 0.15); margin: 10px 0; padding: 10px 15px; font-style: italic; }
:where(.rich) ul { margin: 0 0 0 20px; }
:where(.rich) ul li { margin: 10px 0; list-style: outside; }
:where(.rich) ul li p { margin: 0; }
:where(.rich) ol { margin: 0 0 0 20px; }
:where(.rich) ol li { margin: 10px 0; list-style: decimal; }
:where(.rich) ol li p { margin: 0; }
:where(.rich) hr { border-top: 1px solid rgb(204, 204, 204); margin: 10px 0; }
:where(.rich) p > code { background: rgb(238, 238, 238); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; margin: 2px; padding: 0 5px; display: inline; }
:where(.rich) pre { white-space: pre-wrap; background: rgb(238, 238, 238); border-radius: 6px; margin: 20px 0; padding: 25px 35px; font-family: Menlo, Monaco, "Courier New", monospace; }
:where(.rich) pre code { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0; }
:where(.rich) strong { color: inherit; font-family: inherit; font-weight: 900; display: inline; }
:where(.rich) em { font-style: italic; }
:where(.rich) u { text-decoration: underline; }
:where(.rich) a { color: rgb(0, 124, 255); text-decoration: underline; display: inline; }
:where(.rich) s { text-decoration: line-through; }
:where(.rich) [data-type="table_of_contents"] { color: rgb(97, 97, 97); background-color: rgb(245, 245, 245); border-radius: 2px; margin: 0; padding: 24px 24px 8px; font-size: 16px; text-decoration: underline; list-style: none; }
:where(.rich) [data-type="table_of_contents"] .toc_list { margin: 0; }
:where(.rich) [data-type="table_of_contents"] .toc_item { font-weight: inherit; color: currentcolor; list-style: none; font-size: inherit !important; }
:where(.rich) [data-type="table_of_contents"] .toc_item > a { font-weight: inherit; color: currentcolor; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; text-decoration: none; font-size: inherit !important; }
:where(.rich) [data-type="table_of_contents"] .toc_item > a:hover { opacity: 0.7; }
:where(.rich) [data-type="table_of_contents"] .toc_item--1 { margin: 0 0 16px; }
:where(.rich) [data-type="table_of_contents"] .toc_item--2 { margin: 0 0 16px; padding-left: 2rem; }
:where(.rich) [data-type="table_of_contents"] .toc_item--3 { margin: 0 0 16px; padding-left: 4rem; }

/* --- スクロールで出現する演出（data-appear を付けた部品） ---
   JS が有効なときだけ初期状態（透明・少し下）にし、画面に入ると .in を付けて表示する。
   各部品の初期状態・速さはページ CSS の「html.js .xxx:not(.in)」に書いてある。 */
@media (prefers-reduced-motion: reduce) {
  html.js [data-appear] { opacity: 1 !important; translate: none !important; filter: none !important; transform: none !important; transition: none !important; }
  .spin { animation: none !important; }
}

/* セクション（section 要素）は内側の .inner が余白を持つ */
:where(.b.section) { flex-flow: column !important; align-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; padding: 0 !important; }

/* HTML 埋め込み（iframe）の枠。中の iframe は枠いっぱい（STUDIO と同じ） */
:where(.b.frame) { display: block; overflow: hidden; }
:where(.b.frame) > iframe { width: 100%; height: 100%; }
/* 画面の上に貼り付く部品（position: sticky） */
:where(.b.sticky) { z-index: 1; }
/* 表（STUDIO の表パーツ） */
:where(table.b) { flex-flow: unset; align-items: unset; place-content: unset; min-width: max-content; max-width: none; display: table; }
:where(thead.b) { z-index: auto; display: table-header-group; }
:where(tbody.b) { z-index: auto; display: table-row-group; }
:where(tr.b) { display: table-row; }
:where(td.b), :where(th.b) { text-align: left; vertical-align: middle; height: inherit; display: table-cell; }
/* 横に流れ続ける並び（STUDIO の「ループ」。data-loop="1秒に動く px"。動きは site.js） */
.loop { overflow: hidden; }
.loop > .loop-track { display: flex; flex-direction: row; flex: 0 0 auto; min-width: 100%; gap: inherit; justify-content: flex-start; align-items: center; will-change: transform; }
.loop > .loop-track > * { flex-shrink: 0; }
.loop [data-appear] { opacity: inherit !important; transform: inherit !important; transition: inherit !important; }
/* フォームの送信中 */
.submitLoading { opacity: 0.5 !important; pointer-events: none !important; }

/* フォームの迷惑送信よけ（人には見えない入力欄） */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* --- STUDIO の「Material Icons」（塗りのアイコン）。class に mi が付く --- */
:where(.b.ic.mi) { font-family: "Material Icons"; font-variation-settings: normal; }

/* --- Font Awesome のアイコン。使っているものだけ文字コードを書く ---
   fa = 6.4.2 の塗り（STUDIO の icon-solid）。新しいアイコンを使うときは、ここに「.fa.fa-名前::before { content: "\文字コード"; }」を足す */
:where(.b.fa) { font-style: normal; line-height: 1; display: inline-flex; justify-content: center; align-items: center; -webkit-font-smoothing: antialiased; }
:where(.b.fa) { font-family: "Font Awesome 6 Free"; font-weight: 900; }
.fa.fa-angle-right::before { content: "\f105"; }
.fa.fa-arrow-up-right-from-square::before { content: "\f08e"; }
.fa.fa-handshake-angle::before { content: "\f4c4"; }
.fa.fa-square-check::before { content: "\f14a"; }

/* hidden 属性を付けた部品は必ず隠す（.b の display: flex より優先） */
[hidden] { display: none !important; }

/* 絞り込み検索・キーワード検索で、条件に合わない記事を隠す（site.js が data-hide を付け外しする） */
[data-filter-list] > [data-hide], [data-search-list] > [data-hide] { display: none !important; }
/* HTML 埋め込み（/salesnetwork）：高さは site.js が中身に合わせる */
:where(.b.frame) > iframe[data-autoheight] { display: block; border: 0; height: 900px; }