.elementor-kit-5{--e-global-color-primary:#333333;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#333333;--e-global-color-3643495:#FFFEF2;--e-global-color-4ad13f0:#FFFFFB;--e-global-color-e9dbc8e:#E7DFD4;--e-global-color-68ecd2d:#3F4E57;--e-global-color-a22c9e5:#B3AFA9;--e-global-color-71ba14e:#AB987A;--e-global-color-06630e9:#4F0C0C;--e-global-color-9aedc36:#151100;--e-global-color-d8206b8:#3D3938;--e-global-color-8d8a338:#EAE7E2;--e-global-color-06c1e74:#F5F5F5;--e-global-typography-primary-font-family:"Noto Serif JP";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:#333333;font-family:"Libre Caslon Display", Sans-serif;}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:#02010100;color:var( --e-global-color-primary );}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1599px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:1279px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:1023px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}@media(max-width:479px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}}/* Start custom CSS *//* ===========================
   1. リセット / ベース
   =========================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html,
body {
  width: 100%;
  margin: 0;
}

html {
  font-size: 100%;
  scroll-behavior: auto;
}

body {
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}


/* ===========================
   2. トークン（フォント / 余白 / 角丸 / 色）
   =========================== */

:root {
  /* フォントスケール（ベース = ノートPC帯）
     cqw = コンテナ幅の1%（.page-frame を基準に可変）
     例: .page-frame が 1440px → 1cqw ≒ 14.4px 前後 */
  --fs-body: 1cqw;

  /* 段階スケール
     → すべて「--fs-body」を基準に倍率で管理 */
  --fs-xs: calc(var(--fs-body) * 0.80);
  --fs-s:  calc(var(--fs-body) * 0.90);
  --fs-m:  var(--fs-body);           /* = 本文標準 */
  --fs-l:  calc(var(--fs-body) * 1.25);
  --fs-xl: calc(var(--fs-body) * 1.60);

  /* 余白トークン（px封印・全ての margin / padding / gap 用）
     → 文字サイズとは別軸で動かしたいので rem で管理 */
  --space-xs: 0.75rem;
  --space-s:  1rem;
  --space-m:  1.5rem;
  --space-l:  2rem;
  --space-xl: 3rem;

  /* 角丸 */
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 1rem;

  /* 色トークン（OKLCHベース） */
  --color-bg:            oklch(0.98 0.02 95);
  --color-surface:       oklch(0.94 0.03 95);
  --color-surface-alt:   oklch(0.90 0.03 95);

  --color-text:          oklch(0.18 0.04 30);
  --color-text-soft:     oklch(0.40 0.03 40);

  --color-accent:        oklch(0.72 0.16 250);
  --color-accent-soft:   oklch(0.85 0.08 250);
  --color-accent-strong: oklch(0.55 0.18 250);

  --color-on-accent:     oklch(0.15 0.03 250);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}


/* ===========================
   3. ブレイクポイントごとの本文ベース
   （Elementor のブレイクポイントに対応）
   =========================== */

/* モバイル縦向き（〜479px）
   例: 375px 幅 → 1cqw ≒ 3.75px
   → 2.4cqw ≒ 9px くらいの本文サイズを想定 */
@media (max-width: 479px) {
  :root {
    --fs-body: 2.4cqw;
  }
}

/* モバイル横向き（480〜767px）
   例: 600px 幅 → 1cqw = 6px
   → 1.5cqw ≒ 9〜10px 程度（縦より少し小さめ） */
@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --fs-body: 1.5cqw;
  }
}

/* タブレット縦向き（768〜1023px）
   例: 820px 幅 → 1cqw ≒ 8.2px
   → 1.2cqw ≒ 10px 前後（SPより落ち着いたサイズ） */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --fs-body: 1.2cqw;
  }
}

/* タブレット横向き（1024〜1279px）
   例: 1100px 幅 → 1cqw = 11px
   → 1cqw ≒ 11px 前後 */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --fs-body: 1cqw;
  }
}

/* ノートPC帯（1280〜1599px）
   → ベースの 1cqw をそのまま使用
   例: 1440px 幅 → 1cqw ≒ 14.4px */

/* ワイドスクリーン（1600px〜）
   そのまま 1cqw だと 1600px 幅 → 16px。
   好みに応じてここで抑えたい場合は 0.8〜0.9cqw などに調整する。
   例: 1920px 幅で 0.8cqw → ≒ 15.4px 程度。 */
@media (min-width: 1600px) {
  :root {
    --fs-body: 0.8cqw;
  }
}


/* ===========================
   4. 親コンテナ .page-frame
   =========================== */
/* Elementor で「ページの器」にするコンテナに付けるクラス */

.page-frame {
  /* 本番では max-width を付けて
     「vw を .page-frame の中に閉じ込める」想定。
     完全リキッドで見たいときは dev 用クラスで上書き。 */
  /* max-width: 1920px !important; */
  margin-inline: auto;
  container-type: inline-size !important; /* cqw の物差しになる */

  /* タイポは .page-frame の font-size を唯一の基準にする。
     見出し・リードなどの倍率は Elementor 側で
     各ウィジェットに直接 cqw を指定する。 */
  font-size: var(--fs-body);
}

/* 開発時に「完全リキッドで挙動確認したい」とき用
   （body に .dev-liquid を付けた場合だけ有効）
   → .page-frame の幅 = viewport 幅 になるので
      1cqw ≒ 1vw として振る舞う */
body.dev-liquid .page-frame {
  max-width: none !important;
}


/* ===========================
   5. 段落のデフォルト行間だけ軽く指定
   =========================== */

.page-frame p {
  line-height: 1.7;
}


/* ===========================
   6. テキストサイズ ユーティリティ
   （Elementor の「CSSクラス」に text-xs などを付けて使う）
   =========================== */

.page-frame .text-xs {
  font-size: var(--fs-xs);
}

.page-frame .text-s {
  font-size: var(--fs-s);
}

.page-frame .text-m {
  font-size: var(--fs-m);
}

.page-frame .text-l {
  font-size: var(--fs-l);
}

.page-frame .text-xl {
  font-size: var(--fs-xl);
}


/* ===========================
   7. ボタンユーティリティ（任意）
   =========================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1.5em;
  padding-block: 0.75em;
  border-radius: 999rem;
  border: none;
  background: var(--color-accent);
  color: var(--color-on-accent);
  text-decoration: none;
}

.btn:hover {
  background: var(--color-accent-strong);
}

.btn:focus-visible {
  outline-color: var(--color-accent-強);
}/* End custom CSS */