@charset "UTF-8";
/*
 * TOGA OFFICEの共通デザイントークン。
 * 色、幅、余白、角丸、書体、アニメーション時間を変更するときの正本です。
 * 編集画面でも選択させる値は theme.json のプリセットも確認してください。
 */
:root {
  /* 基本色 */
  --toga-blue: var(--wp--preset--color--toga-blue, #004097);
  --toga-blue-dark: #003578;
  --toga-sky: var(--wp--preset--color--sky-blue, #009cd0);
  --toga-ink: var(--wp--preset--color--ink, #000);
  --toga-muted: var(--wp--preset--color--slate, #495050);
  --toga-mist: #f0f2f2;
  --toga-dots: #b2b2b2;
  --toga-line: var(--wp--preset--color--divider, #d2d8d8);
  --toga-required: #ff6973;
  --toga-white: var(--wp--preset--color--white, #fff);
  /*
   * 共通レイアウト
   * 本文の最大幅と画面端のガターから、共通コンテンツ幅と開始位置を算出します。
   * ページごとのSCSSでは同じ計算を再定義せず、これらを参照します。
   */
  --toga-content-max-width: 1150px;
  --toga-content-gutter: 48px;
  --toga-content-width: min(
  	var(--toga-content-max-width),
  	calc(100vw - var(--toga-content-gutter) - var(--toga-content-gutter))
  );
  --toga-content-offset: max(
  	var(--toga-content-gutter),
  	calc((100vw - var(--toga-content-max-width)) / 2)
  );
  --toga-content-frame-width: calc(
  	var(--toga-content-max-width) + var(--toga-content-gutter) + var(--toga-content-gutter)
  );
  --toga-page-title-gutter: 80px;
  --toga-page-title-height: 171px;
  --toga-page-title-padding-top: 80px;
  --toga-page-title-padding-bottom: 25px;
  --toga-section-space: 100px;
  /* 共通の上方向スペース */
  --toga-space-15: 15px;
  --toga-space-20: 20px;
  --toga-space-24: 24px;
  --toga-space-28: 28px;
  --toga-space-30: 30px;
  --toga-space-50: 50px;
  --toga-space-75: 75px;
  --toga-space-100: 100px;
  /* ヘッダー、角丸 */
  --toga-header: 160px;
  --toga-header-compact: 100px;
  --toga-radius-image: 10px;
  --toga-radius-control: 30px;
  --toga-radius-pill: 999px;
  /* 書体 */
  --toga-font-sans:
  	"noto-sans-cjk-jp", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
  	"Yu Gothic", Meiryo, "Helvetica Neue", Arial, sans-serif;
  --toga-font-latin: "inter-18pt", "Inter", sans-serif;
  /* アニメーション */
  --toga-motion-hover: 220ms;
  --toga-motion-soft: 400ms;
  --toga-motion-fade: 600ms;
  --toga-motion-quick: 520ms;
  --toga-motion-reveal: 680ms;
  --toga-ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --toga-ease-soft: cubic-bezier(0.45, 0, 0.55, 1);
  --toga-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --toga-hero-title-wait: 120ms;
  --toga-hero-title-stagger: 260ms;
}

@media (max-width: 767px) {
  :root {
    /* SPでは同じ変数名の値だけを切り替えます。 */
    --toga-content-gutter: 20px;
    --toga-page-title-gutter: 20px;
    --toga-page-title-height: 134px;
    --toga-page-title-padding-top: 56px;
    --toga-page-title-padding-bottom: 25px;
    --toga-header: 92px;
  }
}

/*# sourceMappingURL=tokens.css.map */