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

/* --- フォント（Font Awesome は「外部リンク」アイコン1つだけに使用） --- */
@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 標準のホバー速度カーブ */
  --font-jp: "Noto Sans JP", sans-serif;
  --font-en: "Poppins", sans-serif;
}

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

/* --- リセット（STUDIO と同じく、各要素に直接かかる） --- */
:where(.site, .site a, .site b, .site button, .site div, .site footer, .site form, .site h1, .site h2, .site h3, .site h4, .site h5, .site h6,
  .site header, .site i, .site img, .site input, .site label, .site li, .site main, .site nav, .site ol, .site p, .site section, .site select,
  .site small, .site span, .site strong, .site textarea, .site ul, .site table, .site tr, .site td, .site th, .site dl, .site dt, .site dd, .site figure) {
  -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（画面幅の区切りごとに -1280 / -760 / -540）が自動で付き、
   画面の幅と解像度に合う版が使われる（src/lib/image-sets.mjs）。付いていない画像は --img のまま。
   --img-set は子の .pic に引き継がれないよう、各 .pic で一度消す（style に書いた値が優先される） */
:where(.pic) { --img-set: initial; --img-set-1280: initial; --img-set-760: 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: 1280px) { :where(.pic)::before { background-image: var(--img-set-1280, var(--img-set, var(--img, none))); } }
  @media screen and (max-width: 760px) { :where(.pic)::before { background-image: var(--img-set-760, var(--img-set-1280, var(--img-set, var(--img, none)))); } }
  @media screen and (max-width: 540px) { :where(.pic)::before { background-image: var(--img-set-540, var(--img-set-760, var(--img-set-1280, 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; }
:where(.b.fa-ext) { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; line-height: 1; display: inline-flex; justify-content: center; align-items: center; }
.fa-ext::before { content: "\f35d"; }

/* 改行の出し分け（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) 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) s,
:where(.rich) strong, :where(.rich) u, :where(.rich) ul, :where(.rich) table tbody, :where(.rich) table tbody tr, :where(.rich) table tbody tr > td, :where(.rich) table tbody tr > th {
  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) ul li p, :where(.rich) ol li p, :where(.rich) table tr td p, :where(.rich) table tr th p { margin: 0; }
:where(.rich) img, :where(.rich) video { vertical-align: bottom; max-width: 100%; height: auto; }
:where(.rich) h1 { margin: 20px 0; font-size: 3em; font-weight: 700; display: block; }
:where(.rich) h2 { margin: 10px 0; font-size: 2em; font-weight: 700; display: block; }
:where(.rich) h3 { margin: 10px 0; font-size: 1em; font-weight: 700; display: block; }
:where(.rich) h4, :where(.rich) h5 { margin: 10px 0; font-size: 1em; font-weight: 600; display: block; }
:where(.rich) ul { margin: 0 0 0 20px; } :where(.rich) ul li { margin: 10px 0; list-style: outside; }
:where(.rich) ol { margin: 0 0 0 20px; } :where(.rich) ol li { margin: 10px 0; list-style: decimal; }
:where(.rich) blockquote { border-left: 3px solid rgba(0,0,0,.15); margin: 10px 0; padding: 10px 15px; font-style: italic; }
:where(.rich) h6 { margin: 10px 0; font-size: 1em; font-weight: 500; display: block; }
:where(.rich) hr { border-top: 1px solid rgb(204, 204, 204); margin: 10px 0; }
: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) 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; }
/* 太字・リンクなど（STUDIO と同じ。太字は 900、リンクは青＋下線） */
: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; }

/* --- スクロールで出現する演出（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; }

/* フォームの迷惑送信よけ（人には見えない入力欄） */
.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 のアイコン（class="fa fa-名前"）。使っているものだけ文字コードを書く --- */
:where(.b.fa) { font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; line-height: 1; display: inline-flex; justify-content: center; align-items: center; }
.fa-money-bill::before { content: "\f0d6"; }
.fa-cash-register::before { content: "\f788"; }
.fa-file-signature::before { content: "\f573"; }
.fa-angles-down::before { content: "\f103"; }
.fa-check::before { content: "\f00c"; }
.fa-chevron-right::before { content: "\f054"; }
.fa-plus::before { content: "\2b"; }

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