/*************************************************
variables.css
**************************************************/
/* 変数 */
:root {
  /* Layout */
  /* ビューポートの最小幅 (ピクセル単位) */
  --min-viewport-width: 375;
  /* ビューポートの最大幅 (ピクセル単位) */
  --max-viewport-width: 1400;

  /* ------- typography ------- */
  --font-primary: Noto sans JP, Helvetica Neue, arial, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, meiryo, sans-serif;
  /* ------- Font Size ------- */
  /* ratio */
  --font-size-base: 16;
  --em: 1em / 16;
  --rem: 1rem / 16;
  /* value */
  --font-size: calc(var(--font-size-base) * var(--em)); /* 1em */
  /* property */
  --font-size-14: calc(14 / var(--font-size-base) * var(--font-size)); /* 0.875em */
  --font-size-15: calc(15 / var(--font-size-base) * var(--font-size)); /* 0.9375em */
  --font-size-16: var(--font-size); /* 1em */
  --font-size-17: calc(17 / var(--font-size-base) * var(--font-size)); /* 1.0625em */
  --font-size-18: calc(18 / var(--font-size-base) * var(--font-size)); /* 1.125em */
  --font-size-19: calc(19 / var(--font-size-base) * var(--font-size)); /* 1.1875em */
  --font-size-20: calc(20 / var(--font-size-base) * var(--font-size)); /* 1.25em */
  --font-size-21: calc(21 / var(--font-size-base) * var(--font-size)); /* 1.3125em */
  --font-size-22: calc(22 / var(--font-size-base) * var(--font-size)); /* 1.375em */
  --font-size-23: calc(23 / var(--font-size-base) * var(--font-size)); /* 1.4375em */
  --font-size-24: calc(24 / var(--font-size-base) * var(--font-size)); /* 1.5em */
  --font-size-25: calc(25 / var(--font-size-base) * var(--font-size)); /* 1.5625em */
  --font-size-26: calc(26 / var(--font-size-base) * var(--font-size)); /*  */
  --font-size-28: calc(28 / var(--font-size-base) * var(--font-size)); /* 1.75em */
  --font-size-30: calc(30 / var(--font-size-base) * var(--font-size)); /*  */
  --font-size-32: calc(32 / var(--font-size-base) * var(--font-size)); /* 2em */
  --font-size-35: calc(35 / var(--font-size-base) * var(--font-size)); /* 2.1875em */
  --font-size-36: calc(36 / var(--font-size-base) * var(--font-size)); /* 2.25em */
  --font-size-40: calc(40 / var(--font-size-base) * var(--font-size));
  --letter-spacing: normal;

  /* ------- Font Weight ------- */
  /* value */
  --FontWeight-300: 300;
  --FontWeight-400: 400;
  --FontWeight-500: 500;
  --FontWeight-600: 600;
  --FontWeight-700: 700;
  /* property */
  --fontweight-light: var(--FontWeight-300);
  --fontweight-regular: var(--FontWeight-400);
  --fontweight-medium: var(--FontWeight-500);
  --fontweight-semibold: var(--FontWeight-600);
  --fontweight-bold: var(--FontWeight-700);

  /* ------- Letter Spacing ------- */
  /* ratio */
  --tracking-unit: 0.1em;
  /* value */
  --tracking-value-0: 0; /* 0 (0) */
  --tracking-value-1: 0.1; /* 0.01em (1%) */
  --tracking-value-2: 0.2; /* 0.02em (2%) */
  --tracking-value-3: 0.3; /* 0.03em (3%) */
  --tracking-value-5: 0.5; /* 0.05em (5%) */
  --tracking-value-10: 1; /* 0.1em (10%) */
  --tracking-value-15: 1.5; /* 0.1em (15%) */
  /* property */
  --tracking-0: calc(var(--tracking-value-0) * var(--tracking-unit));
  --tracking-10: calc(var(--tracking-value-1) * var(--tracking-unit));
  --tracking-20: calc(var(--tracking-value-2) * var(--tracking-unit));
  --tracking-30: calc(var(--tracking-value-3) * var(--tracking-unit));
  --tracking-50: calc(var(--tracking-value-5) * var(--tracking-unit));
  --tracking-100: calc(var(--tracking-value-10) * var(--tracking-unit));
  --tracking-150: calc(var(--tracking-value-15) * var(--tracking-unit));

  /* Border-radius */
  --rounded-4: 4px;
  --rounded-6: 6px;
  --rounded-8: 8px;
  --rounded-10: 10px;
  --rounded-12: 12px;
  --rounded-16: 16px;
  --rounded-20: 20px;
  --rounded-full: calc(infinity * 1px);

  /* ------- Colors from Design System ------- */
  /* Primary Colors */
  /* 数値は明度の高さを表現（100が最も明るい） */
  --color-bluegreen-10: #0062AE; /* */
  --color-bluegreen-50: #80D4D4; /* */
  --color-bluegreen-60: #B5D5F6;/* */
  --color-bluegreen-65: #478cd0;/* */
  --color-bluegreen-70: #B3E0E4;/* */
  --color-bluegreen-85: #d8f5f9;
  --color-bluegreen-80: #daf8fd;
  --color-bluegreen-90: #e7fbfe; /* 明るい */

  --color-neutral-5: #000000;
  --color-neutral-10: #060606;
  --color-neutral-20: #062042;
  --color-neutral-50: #b3b3b3;
  --color-neutral-60: #ddd;
  --color-neutral-90: #efefef; /* */
  --color-neutral-100: #ffffff;

  --color-blue-1: #295794; /*table-border*/
  --color-blue-2: #0d4289; /*top serch-box-border*/
  --color-blue-3: #0e366b; /*top heading-color*/

  --color-red-1: #f6ccd8;
  --color-red-2: #B30101;

  /* colore accent */
  --color-accent-1: #b0eef8; /*background*/
  --color-accent-2: #99e7dc; /*background*/
  --color-accent-2-2: #42c7b5; /*default*/
  --color-accent-2-3: #18a794; /*hover*/
  --color-accent-3: #bdd4f2; /*background*/
  --color-accent-3-2: #5c88c3; /*default*/
  --color-accent-3-3: #3f6ead; /*hover*/
  --color-accent-4: #f1e69f; /*background*/
  --color-accent-4-2: #eb8b1d; /*default*/
  --color-accent-4-3: #eb761d; /*hover*/
  --color-accent-5: #f4b4d0; /*marker*/
  --color-accent-6: #F7F7DA; /* */
  --color-accent-7: #21673D; /* */

  --color-brown: #4b3e2f; /*top-archive-border*/

  /* Semantic Colors:Text Colors */
  --color-text-default: #000000;
  --color-text-bold: #362115;
  --color-text-accent: var(--color-bluegreen-65); /* */
  --color-text-link: #062042;
  --color-text-placeholder: #a3a3a3;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #a1a1a1;
  --color-text-important: #a11904;
  --color-text-bredcrumb: #060606;
  --color-text-bredcrumb-link: #002f52;

  /* Semantic Colors:Background Colors */
  --color-background-default: #fff;
  --color-background-subtle: #f7f7f7;
  --color-background-subtler: #B4E6EA; /* */
  --color-background-accent: #00a5bf;
  --color-background-hover: var(--color-bluegreen-60); /* */
  --color-background-button: var(--color-bluegreen-65);
  --color-background-drawer: var(--color-bluegreen-70);
  --color-background-icon: #F2EEE6;

  /* Semantic Colors:Border Colors */
  --border-default: #4b3e2f;
  --border-accent: #062042;
  --border-black: #000;
  --border-table: #295794;
  --border-focus: #e99d19;
  --border-subtle: #a8e5ef;
  --border-inverse: #fff;
  --border-accent: var(--color-bluegreen-65);

  /* Semantic Colors:Category Colors */
  --category-pickup--background: #FEED00;
  --category-info--background: #B6ECF0;
  --category-exhibition--background: #EDC747; /*background*/
  --category-general--background: #bdd4f2; /*background*/
  --category-general--link-dfault: #5c88c3; /*default*/
  --category-general--link-hover: #3f6ead; /*hover*/
  --category-event--background: #E4EE87; /*background*/
  --category-event--link-dfault: #eb8b1d; /*default*/
  --category-event--link-hover: #eb761d; /*hover*/
  --category-kids--background: #FDC4E6; /*background*/
  --category-kids--link-dfault: #e29f51; /*default*/
  --category-kids--link-hover: #eb761d; /*hover*/
  --category-kids-color: #D92791;
  --category-library-border-color: #225D98;
  --category-library-text-color: #1C4C93;
  --category-public-color: #21673D;
  --categoyr-audiovisual-color: #D8F9E6;

  /* Semantic Colors:Marker Colors */
  --marker-close: #f4b4d0;
  --marker-event: #dce49c;

  /* Semantic Colors:Button Colors */
  --button-color-default: #062042;
  --color-link-default: var(--color-bluegreen-70); /* */

  /* Elevation */
  --elevation: 0px 3px 6px rgba(0, 0, 0, 0.16);

  /* Buttons */
  --button-size--min-mobile: 48px; /*andriod*/
  --button-size--min-ios: 44px; /*ios*/

  /* Header Elevation */
  --header-elevation: 0 0px 3px 6px rgba(0, 0, 0, 0.05);

  /* ------- Branding ------- */
  --branding-title-font-size: calc(40 / 16 * 1em);
  --branding-title-font-size-mobile: var(--font-size-28);
  --branding-title-font-weight: var(--fontweight-regular);
  --branding-title-line-height: 1.45;
  --branding-title-letter-spacing: normal;
  --branding-span-font-size: calc(17 / 16 * 1em);
  --branding-span-font-size-mobile: var(--font-size-14);
  --branding-span-font-weight: var(--fontweight-medium);
  --branding-span-letter-spacing: var(--tracking-150);
  --branding-span-line-height: 1;
  --branding-logo-size: calc(90 / 16 * 1rem);
  --branding-logo-size-mobile: calc(54 / 16 * 1rem);

  /* ------- Navigation ------- */
  /* Main Navigation */
  --header-gnav-font-family: var(--font-primary);
  --header-gnav-font-size: calc(21 / 16 * 1rem);
  --header-gnav-font-weight: var(--fontweight-medium);
  --header-gnav-color-link-text: #062042;
  --header-gnav-color-link-hover: #daf8fd;
  --header-gnav-color-border: #000;

  /* Drawer Navigation */
  --drawer-nav-font-size: calc(21 / 16 * 1rem);
  --drawer-nav-font-weight: var(--fontweight-medium);
  --drawer-nav-color-link-text: #062042;
  --drawer-nav-color-link-hover: #daf8fd;
  --drawer-nav-color-border: #000;

  /* Footer Navigation */
  --footer-nav-font-size: calc(18 / 16 * 1rem);
  --footer-nav-font-weight: var(--fontweight-medium);
  --footer-nav-color-link-text: #062042;
  --footer-nav-color-link-hover: #daf8fd;
  --footer-nav-color-border: #000;

  /* Footer Navigation */
  --reread-link-width: calc(177 / 16 * 1rem);
  --reread-link-height: calc(144 / 16 * 1rem);

  /* ------- Toggle ------- */
  /* Toggle Color */
  --nav-toggle-color: #062042;
  --nav-toggle-background-color: #a6e2eb;
  /* Toggle Button */
  --toggle-size: 80px;
  --toggle-size-mobile: 56px;
  --toggle-line-width: 40px;
  --toggle-line-width-mobile: 30px;
  --toggle-line-height: 3px;
  --toggle-padding: 6px;
  --toggle-padding-mobile: 4px;

  /* Toggle Text */
  --toggle-font-family: var(--font-primary);
  --toggle-font-size: 16px;
  --toggle-font-size-mobile: 14px;
  --toggle-font-weight: var(--fontweight-medium);
  --toggle-letter-spacing: calc(100 / 1000 * 0.1em);

  /* ------- Drawer ------- */
  --drawer-color-link-text: #062042;
  --drawer-color-background: var(--color-background-subtle);
  --drawer-branding-title: 33px;
  --drawer-branding-title-mobile: 24px;
  --drawer-branding-description: 16px;
  --drawer-branding-description-mobile: 13px;
  --drawer-nav-color: #062042;
  --drawer-nav-text: 22px;
  --drawer-nav-text-mobile: 20px;
  --drawer-nav-sub-text: 18px;
  --drawer-nav-sub-text-mobile: 15px;
  --drawer-nav-font-weight: var(--fontweight-regular);

  /* ------- Page Control ------- */
  /* Page Control */
  --ud--change-button: 40px;
  --ud--change-button-mobile: var(--button-size--min-mobile);
  --ud--search-size: 220px;
  --ud--search-size-mobile: 315px;
  --ud--font-size-default: 15px;
  --ud--font-size-subtle: 20px;
  --ud--font-size-subtler: 17px;
  --ud--font-size-subtle-mobile: 18px;
  --ud--font-size-subtler-mobile: 13px;
  --ud--font-weight: var(--fontweight-regular);
  --ud--search-background: var(--color-background-default);
  --ud--search-btn: #062042;
  --ud--search-btn-hovered: #00a5bf;
  --ud--search-form-height: 40px;
  --ud--search-form-background: var(--color-background-default);
  --ud--search-form-background-focused: #bdedf5;

  /* ------- locus ------- */
  --locus--link: var(--color-text-bredcrumb-link);
  --locus--text: var(--color-text-bredcrumb);
  --locus--font-size: var(--font-size-17);
  --locus--font-weight: var(--fontweight-regular);
  --locus--letter-spacing: var(--tracking-30);

  /* ------- Heading h1------- */
  /* layout */
  --heading--background-color-h1: var(--color-bluegreen-65);
  /* typography */
  --heading--color-h1: var(--color-text-bold);
  --heading--font-size-h1: var(--font-size-35);
  --heading--font-weight-h1: var(--fontweight-regular);
  --heading--letter-spacing-h1: var(--tracking-50);
  --heading--line-height-h1: var(--leading-normal);
  /* ------- Heading h2------- */
  /* layout */
  --heading--background-color-h2: var(--color-background-subtler);
  --heading--rounded-h2: 8px;
  /* typography */
  --heading--color-h2: var(--color-text-bold);
  --heading--font-size-h2: var(--font-size-24);
  --heading--font-weight-h2: var(--fontweight-medium);
  --heading--line-height-h2: var(--leading-normal);
  --heading--letter-spacing-h2: var(--tracking-100);
  /* ------- Heading h3------- */
  /* layout */
  --heading--marker-color-h3: var(--color-bluegreen-65);
  /* typography */
  --heading--color-h3: var(--color-text-bold);
  --heading--font-size-h3: var(--font-size-22);
  --heading--font-weight-h3: var(--fontweight-medium);
  --heading--line-height-h3: var(--leading-snug);
  --heading--letter-spacing-h3: var(--tracking-100);
  /* ------- Heading h4------- */
  /* layout */
  --heading--marker-color-h4: #295794;
  /* typography */
  --heading--color-h4: var(--color-text-bold);
  --heading--font-size-h4: var(--font-size-20);
  --heading--font-weight-h4: var(--fontweight-regular);
  --heading--line-height-h4: var(--leading-snug);
  --heading--letter-spacing-h4: var(--tracking-100);
  /* ------- Heading h5------- */
  /* layout */
  --heading--marker-color-h5: var(--color-bluegreen-65);
  --heading--rounded-h5: 2px;
  /* typography */
  --heading--color-h5: var(--color-text-bold);
  --heading--font-size-h5: var(--font-size-18);
  --heading--font-weight-h5: var(--fontweight-regular);
  --heading--line-height-h5: var(--leading-snug);
  --heading--letter-spacing-h5: var(--tracking-100);
  /* ------- Heading h6------- */
  /* layout */
  --heading--marker-color-h6: #A3A3A3;
  /* typography */
  --heading--color-h6: var(--color-text-bold);
  --heading--font-size-h6: var(--font-size-18);
  --heading--font-weight-h6: var(--fontweight-regular);
  --heading--line-height-h6: var(--leading-snug);
  --heading--letter-spacing-h6: var(--tracking-100);

  /* ------- Txtbox ------- */
  --txtbox--margin-block-start: 42px;
  --txtbox--margin-block-start-mobile: calc(var(--txtbox--margin-block-start) / 2);
  --txtbox--margin-block-end: 68px;
  --txtbox--margin-block-end-mobile: calc(var(--txtbox--margin-block-end) / 2);
  --txtbox--font-size: var(--font-size-18);
  --txtbox--font-weight: var(--fontweight-regular);
  --txtbox--letter-spacing: 0;
  --txtbox--line-height: var(--leading-relaxed);
  --txtbox--text-link: var(--color-text-link);
  --txtbox--text-link--hover: var(--color-text-link);
  --txtbox--marker-color: #397EC2;
  --txtbox--marker-size: 7px;

  /* Block: Table */
  --table--stripes-border-color: #295794;
  --table--th-background-color: var(--color-background-subtler);
  --table--td-background-color: #ffffff;
  --table--has-background-text-color: #062042;
  --table--th-font-color: #062042;

  /* side Navigation */
  --side-nav-font-size: var(--font-size-23);
  --side-nav-font-style: normal;
  --side-nav-font-weight: var(--fontweight-regular);
  --side-nav-tracking: var(--tracking-50);
  --side-nav-color-link: var(--color-text-bold);
  --side-nav-padding: calc(16 / 16 * 1rem);
  --side-nav-border-color: #062042;
  --side-nav-background-color: var(--color-background-subtler);
  --side-nav-background-color-hovered:var(--color-background-hover);

  /* Main Navigation - Mobile */
  --side-nav-font-family-mobile: var(--font-primary);
  --side-nav-font-size-mobile: var(--font-size-sm);

  /* Main Navigation - side Menu */
  --side-nav-sidemenu--font-size: var(--font-size-xs);
  --side-nav-sidemenu--font-size-mobile: var(--font-size-sm);
  --side-nav-sidemenu--font-style-mobile: normal;

  /* Main Navigation - Button */
  --side-nav-button-font-size: var(--font-size-xs);
  --side-nav-button-font-weight: 500;

  /* ------- Footer ------- */
  /* Footer */
  --footer-background: var(--color-background-subtle);
  --footer-color-text: var(--color-text-bold);
  --footer-color-link: var(--color-text-link);
  --footer-color-link-hovered: var(--color-text-link);
  --footer-font-family: var(--font-primary);
  --footer-font-size: var(--font-size-16);
  --footer-font-weight: var(--fontweight-regular);
  --footer-letter-spacing: var(--tracking-50);
  --footer-line-height: var(--leading-normal);
  --footer-block-start: 35px;
  --footer-block-end: 139px;
  /* Separator */
  --separator--border-color: var(--color-neutral-70);
  --separator--border-color-mobile: var(--color-neutral-80);
  --separator--height: 1px;
  /* Copyright */
  --copyright-background: var(--color-background-subtler);
  --copyright-color-text: var(--color-text-default);
  --copyright--font-size: var(--font-size-15);
  --copyright--font-weight: var(--fontweight-regular);
  --copyright--letter-spacing: var(--tracking-50);
  --copyright--line-height: var(--leading-normal);
  /* toTop */
  --totop--size: 76px;
  --totop--size-mobile: 54px;
  --totop--icon-width: 22px;
  --totop--background-color: var(--color-background-accent);
  --totop--background-color-hovered: #00889e;
  --totop--border-color: #fff;

  /* ------- Common ------- */
  /* Spacing */
  --space-measure: unset;

  /* Negative */
  --negative-100: -4px;
  --negative-200: -8px;
  --negative-300: -12px;
  --negative-400: -16px;
  --negative-600: -24px;

  /* 基本space */
  --space-unit: calc(8 * var(--rem));
  --space-none: 0;
  --space-2: calc(2 * var(--rem)); /* 2px */
  --space-4: calc(4 * var(--rem)); /* 4px */
  --space-6: calc(6 * var(--rem)); /* 6px */
  --space-8: var(--space-unit); /* 8px */
  --space-10: calc(10 * var(--rem)); /* 12px */
  --space-12: calc(12 * var(--rem)); /* 12px */
  --space-14: calc(14 * var(--rem)); /* 14px */
  --space-16: calc(16 * var(--rem)); /* 16px */
  --space-18: calc(18 * var(--rem)); /* 18px */
  --space-20: calc(20 * var(--rem)); /* 20px */
  --space-24: calc(24 * var(--rem)); /* 24px */
  --space-28: calc(28 * var(--rem)); /* 28px */
  --space-30: calc(30 * var(--rem)); /* 30px */
  --space-32: calc(32 * var(--rem)); /* 32px */
  --space-34: calc(34 * var(--rem)); /* 34px */
  --space-36: calc(36 * var(--rem)); /* 36px */
  --space-40: calc(40 * var(--rem)); /* 40px */
  --space-44: calc(44 * var(--rem)); /* 44px */
  --space-48: calc(48 * var(--rem)); /* 48px */
  --space-52: calc(52 * var(--rem)); /* 52px */
  --space-54: calc(54 * var(--rem)); /* 54px */
  --space-56: calc(56 * var(--rem)); /* 56px */
  --space-60: calc(60 * var(--rem)); /* 60px */
  --space-64: calc(64 * var(--rem)); /* 64px */
  --space-72: calc(72 * var(--rem)); /* 72px */
  --space-74: calc(74 * var(--rem)); /* 74px */
  --space-80: calc(80 * var(--rem)); /* 80px */
  --space-96: calc(96 * var(--rem)); /* 96px */
  --space-120: calc(120 * var(--rem)); /* 120px */
  --space-128: calc(128 * var(--rem)); /* 128px */
  --space-160: calc(160 * var(--rem)); /* 160px */

  /* Responsive */
  --container-size-lg: 1180px;
  --container-size-xl: 1400px;

  --container-content: calc(calc(2 * var(--space-16)) + var(--container-size-lg));

  /* ガターのスペーシング（最小幅の流動的な比率に基づく） */
  --spacing-gutter: calc(20 * var(--min-fluid-ratio));

  /* Aspect-ratio */
  --aspect-square: 1 / 1;
  --aspect-video: 16 / 9;
  --aspect-video-vertical: 9 / 16;
  --aspect-golden: 1.618 / 1;
  --aspect-photo: 4 / 3;
  --aspect-photo-vertical: 3 / 4;
  --aspect-landscape: 3 / 2;
  --aspect-portrait: 2 / 3;
  --aspect-thumbnail: 1.91 / 1;

  /* z-index */
  --stack-top: calc(infinity);
  --stack-drawer: 300;
  --stack-head: 200;
  --stack-foot: 100;
  --stack-foreground: 1;
  --stack-background: -1;
}

@media (width < 768px) {
  :root {
    --reread-link-width: calc(104 / 16 * 1rem);
    --reread-link-height: calc(86 / 16 * 1rem);
  }
}