@charset "utf-8";

/* 
 * ========================================
 *  管理画面・サイト表示の共通設定
 *  ・theme.json → config.css → editor-style.css → style.css の優先順に処理を記載する
 * ========================================
*/

/* 
 * ========================================
 *  ダークモード
 * ========================================
*/
:root[data-theme='dark'] {
  --img-arrow-search: url('../images/icons/search-dark.svg');
  --img-arrow-tag: url('../images/icons/tag-dark.svg');

  /* 配色 */
  --wp--preset--color--base: #383838;
  --wp--preset--color--contrast: #E2E2E9;
  --wp--preset--color--accent-1: #FFB59F;
  --wp--preset--color--accent-2: #FFB59F;
  --wp--preset--color--accent-3: #555555;
  --wp--preset--color--accent-4: #555;
  --wp--preset--color--accent-5: #555;
  --wp--preset--color--custom-base-01: #555;
  --wp--preset--color--custom-base-02: #555;
  --wp--preset--color--custom-base-03: #555;
  --wp--preset--color--custom-link: #FFB2BD;
  --wp--preset--color--custom-border-bottom: var(--wp--preset--color--contrast);

  /* UI差分 */
  --color-focus-bg: transparent;

  /* ボタン（基本） */
  --color-btn-text: var(--wp--preset--color--contrast);

  /* ボタン（ブロックスタイル） */
  --color-btn-fill01-text: var(--wp--preset--color--contrast);
  --color-btn-fill01-border: var(--wp--preset--color--contrast);
  --color-btn-fill02-bg: #555;
  --color-btn-fill02-text: var(--wp--preset--color--contrast);
  --color-btn-fill02-border: var(--wp--preset--color--contrast);
  --color-btn-fill03-bg: var(--color-footer-btn01-bg);
  --color-btn-fill03-border: #FFB59F;

  /* ボタン（その他） */
  --color-btn-pagination-border: var(--wp--preset--color--contrast);

  /* ヘッダー */
  --color-header-sub-menu: var(--wp--preset--color--contrast);

  /* フッター */
  --color-footer-bg: #555;
  --color-footer-title: var(--wp--preset--color--contrast);

  --color-footer-btn01-bg: #723522;
  --color-footer-btn01-text: var(--wp--preset--color--contrast);
  --color-footer-btn01-border: #FFB59F;
  --color-footer-btn02-bg: #555;
  --color-footer-btn02-text: var(--wp--preset--color--contrast);
  --color-footer-btn-sns-border: var(--wp--preset--color--contrast);

  --color-h2: var(--wp--preset--color--contrast);
  --color-th: var(--wp--preset--color--base);
  --color-box-title-set-bg: var(--wp--preset--color--base);
  --color-table-bg: var(--wp--preset--color--base);
  --color-table-border: var(--wp--preset--color--contrast);
  --color-faq-q-text: var(--wp--preset--color--base);

  /* 固有デザイン色｜組織図 */
  --color-fig-organization-01: var(--wp--preset--color--base);
  --color-fig-organization-02: var(--wp--preset--color--base);
  --color-fig-organization-03: var(--wp--preset--color--base);
  --color-fig-organization-04: var(--wp--preset--color--base);
  --color-fig-organization-line-01: var(--wp--preset--color--base);
  --color-fig-organization-line-02: var(--wp--preset--color--base);
}

/* 
 * ========================================
 *  共通設定
 * ========================================
*/
:root {
  --z-adjustment: 1;
  --z-page-top: 10;
  --z-nav: 11;
  --z-site-id: 12;

  /* リキッドデザイン・ブラウザの文字サイズ変更に対応 */
  --font-vw: calc(16 / 1440 * 100vw);

  --header-height: 4.125rem;  /* 66px */

  /**
   * 文字サイズ
  */
  --font-sz-40: 2.5rem;
  --font-sz-32: 2rem; /* ページタイトル(sp) */
  --font-sz-28: 1.75rem;
  --font-sz-26: 1.625rem; /* footer｜電子文藝館バナーでのみ使用 */
  --font-sz-24: 1.5rem;
  --font-sz-22: 1.375rem;
  --font-sz-20: 1.25rem;
  --font-sz-18: 1.125rem;
  --font-sz-16: 1rem;
  --font-sz-15: 0.9375rem;
  --font-sz-14: 0.875rem;
  --font-sz-13: 0.8125rem;
  --font-sz-12: 0.75rem;
  --font-sz-10: 0.625rem;

  /* 文字サイズ（役割ベース） */
  --font-sz-h2: var(--font-sz-32);
  --font-sz-h3: var(--font-sz-20);

  --font-arial: "Arial", var(--wp--preset--font-family--biz-udpgothic);

  --border-w-1: 0.0625rem;
  --border-w-2: 0.125rem;
  --border-w-3: 0.1875rem;
  --border-w-4: 0.25rem;
  --border-w-6: 0.375rem;

  /* --space-width-pc: ; */
  --space-width-sp: 4.266%;

  --box-shadow: 0.1875rem 0.1875rem 0.1875rem 0 var(--wp--preset--color--custom-box-shadow);
  --box-shadow-tumbnail: 0.4375rem 0.5rem 0 rgba(0, 0, 0, 0.12);

  --width-1000: 62.5rem;
  --width-1280: 80rem;
  

  --img-arrow-search: url('../images/icons/search-accent2.svg');
  --img-arrow-tag: url('../images/icons/tag-accent2.svg');
  --img-home-post-list-cat-bg: url('../images/post-list-cat-bg.jpg');

  /**
   * 配色
  */
  /* UI用（役割ベース） */
  --color-focus-bg: rgba(134, 40, 63, 0.2); /* accent-1 */

  /* ページタイトル */
  --color-page-title-bg-grad-01: var(--wp--preset--color--accent-3);
  --color-page-title-bg-grad-02: rgba(88, 79, 70, 0.5); /* accent-3 */

  /* ボタン（基本） */
  --color-btn-bg-primary: #333; /* ダークモードでも同色 */
  --color-btn-bg-secondary: #86283f; /* ダークモードでも同色 */
  --color-btn-border: var(--wp--preset--color--accent-2);
  --color-btn-text: var(--wp--preset--color--base);

  /* ボタン（ブロックスタイル） */
  --color-btn-fill01-text: var(--wp--preset--color--custom-btn-text);
  --color-btn-fill01-border: var(--wp--preset--color--accent-2);
  --color-btn-fill02-bg: var(--wp--preset--color--custom-base-02);
  --color-btn-fill02-text: var(--wp--preset--color--accent-2);
  --color-btn-fill02-border: var(--wp--preset--color--custom-base-02);
  --color-btn-fill03-bg: var(--wp--preset--color--accent-2);
  --color-btn-fill03-border: var(--wp--preset--color--accent-2);

  /* ボタン（その他） */
  --color-btn-pagination-border: var(--wp--preset--color--accent-2);

  /* ヘッダー */
  --color-header-sub-menu: var(--wp--preset--color--custom-contrast-03);

  /* フッター */
  --color-footer-bg: var(--wp--preset--color--accent-3);
  --color-footer-title: var(--wp--preset--color--accent-3);

  --color-footer-btn01-bg: var(--wp--preset--color--custom-contrast-04);
  --color-footer-btn01-text: var(--wp--preset--color--accent-2);
  --color-footer-btn01-border: var(--wp--preset--color--accent-2);
  --color-footer-btn02-bg: var(--wp--preset--color--accent-3);
  --color-footer-btn02-text: var(--wp--preset--color--custom-contrast-02);
  --color-footer-btn-sns-border: var(--wp--preset--color--accent-4);

  --color-box-title-set-bg: var(--wp--preset--color--custom-base-02);

  --color-modal-bg: rgba(0, 0, 0, 0.5);
  --color-btn-bg-primary-08: rgb(51, 51, 51, 0.8);
  --color-table-bg: transparent;
  --color-table-border: transparent;
  --color-faq-q-text: var(--wp--preset--color--custom-contrast-02);

  /* フォームパーツ */
  --color-input-border: #A3A3A3;

  --color-h2: var(--wp--preset--color--accent-2);
  --color-th: var(--wp--preset--color--accent-2);

  /* 固有デザイン色｜組織図 */
  --color-fig-organization-01: #A6D9DF;
  --color-fig-organization-02: #7DB88A;
  --color-fig-organization-03: #B9D7BD;
  --color-fig-organization-04: #E5F1E7;
  --color-fig-organization-line-01: #BAD8C1;
  --color-fig-organization-line-02: var(--color-fig-organization-04);
}

@media (max-width: 768px) {
  :root {
    --img-home-post-list-cat-bg: url('../images/post-list-cat-bg-sp.jpg');
  }
}