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

  /* ------- typography ------- */
  --font-primary: "Sawarabi Gothic", Helvetica Neue, arial, Hiragino Kaku Gothic ProN, Hiragino Sans, BIZ UDPGothic, meiryo, sans-serif;
  /* ------- Font Size ------- */
  /* ratio */
  --font-size-base: 16;
  --em: 1em / var(--font-size-base);
  --rem: 1rem / var(--font-size-base);
  /* value */
  --font-size: calc(var(--font-size-base) * var(--em)); /* 1em */
  /* property */
  --font-size-08: calc(08 / var(--font-size-base) * var(--font-size));
  --font-size-10: calc(10 / var(--font-size-base) * var(--font-size));
  --font-size-12: calc(12 / var(--font-size-base) * var(--font-size));
  --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-4: 0.4; /* 0.04em (3%) */
  --tracking-value-5: 0.5; /* 0.05em (5%) */
  --tracking-value-6: 0.6; /* 0.06em (6%) */
  --tracking-value-7: 0.7; /* 0.07em (7%) */
  --tracking-value-10: 1; /* 0.1em (10%) */
  --tracking-value-12: 1.2; /* 0.12em (12%) */
  --tracking-value-15: 1.5; /* 0.15em (15%) */
  --tracking-value-25: 2.5; /* 0.25em (25%) */
  /* 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-70: calc(var(--tracking-value-7) * var(--tracking-unit));
  --tracking-100: calc(var(--tracking-value-10) * var(--tracking-unit));
  --tracking-120: calc(var(--tracking-value-12) * var(--tracking-unit));
  --tracking-150: calc(var(--tracking-value-15) * var(--tracking-unit));
  --tracking-250: calc(var(--tracking-value-25) * var(--tracking-unit));

  /* Border-radius */
  --rounded-4: 4px;
  --rounded-6: 6px;
  --rounded-8: 8px;
  --rounded-10: 10px;
  --rounded-12: 12px;
  --rounded-14: 14px;
  --rounded-16: 16px;
  --rounded-20: 20px;
  --rounded-full: calc(infinity * 1px);
  --border-width-md: 1px;
  --border-width-lg: 2px;
  --border-width-xl: 4px;

  /* ------- Colors from Design System ------- */
  /* Primary Colors */
  --font-color: #3e3a39;
  --link-color: #3922ad;
  --theme-color: #006934;
  --sub-color-01: #006536;
  --sub-color-02: #ebe6d1;
  --sub-color-03: #ccddbb;
  --sub-color-04: #f5ba5c;
  --sub-color-05: #f2bf80;
  --sub-color-06: #59503e;
  --sub-color-07: #d7f8bf;
  
  --white-color: #FFF;
  --black-color: #000;
  
  --gray-color-01: #a6a6a6;
  --gray-color-02: #808080;
  --gray-color-03: #f7f7f7;

  /* colore accent */
  --accent-color-01: #a80021;
  --accent-color-02: #ff855c;
  --accent-color-03: #f6ccd8;


  /* Semantic Colors:Category Colors */


  /* 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);
  
  /* Header Size */
  --header-size:
    calc(
      (58 * var(--rem)) /* ロゴサイズ */
       + (var(--space-30) * 2) /* 上下余白 */
    );
  @media (width < 768px) {
    --header-size:
      calc(
        (58 * var(--rem)) /* ロゴサイズ */
         + (var(--space-16) * 2) /* 上下余白 */
      );
  }
  @media (width < 640px) {
    --header-size:
      calc(
         (60vw * 0.1484375)/* ロゴサイズ */
         + (var(--space-16) * 2) /* 上下余白 */
      );
  }

  /* ------- Branding ------- */
  --branding-logo-size: calc(128 * var(--rem));
  @media (width < 1080px) {
    --branding-logo-size: 7em;
  }


  /* ------- Navigation ------- */
  /* Main Navigation */

  /* Drawer Navigation */

  /* Footer Navigation */

  /* Footer Navigation */

  /* ------- Toggle ------- */
  /* Toggle Color */
  --nav-toggle-color: var(--white-color);
  --nav-toggle-background-color: var(--theme-color);
  /* Toggle Button */
  --toggle-size: 56px;
  --toggle-line-width: 30px;
  --toggle-line-height: 4px;
  --toggle-padding: 6px;

  /* Toggle Text */
  --toggle-font-family: var(--font-primary);
  --toggle-font-size: 16px;
  --toggle-font-color: var(--color-text-inverse);
  --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: 48px;
  --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);


  /* ------- 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(--link-color);
  --txtbox--text-link--hover: var(--link-color);
  --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 ------- */
  --reread-link-height: calc(74 * var(--rem));
  --reread-link-inset: calc(48 * var(--rem));

  /* ------- Common ------- */
  /* Spacing */
  --space-measure: unset;
  
  /* transition */
  --hover-anm: all .2s ease-in 0s;

  /* 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-15: calc(15 * 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-22: calc(22 * var(--rem)); /* 22px */
  --space-24: calc(24 * var(--rem)); /* 24px */
  --space-26: calc(26 * var(--rem)); /* 26px */
  --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-38: calc(38 * var(--rem)); /* 38px */
  --space-40: calc(40 * var(--rem)); /* 40px */
  --space-42: calc(42 * var(--rem)); /* 44px */
  --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: 9000;
  --stack-toggle: 9300;
  --stack-drawer: 9200;
  --stack-head: 9200;
  --stack-foot: 100;
  --stack-cover: 9100;
  --stack-foreground: 1;
  --stack-background: -1;
}

@media (width < 768px) {
  :root {
    --toggle-size: 48px;
    --toggle-line-width: 28px;
    --toggle-line-height: 2px;
    --toggle-padding: 4px;

    --reread-link-width: calc(104 / 16 * 1rem);
    --reread-link-height: calc(64 / 16 * 1rem);
    --reread-link-inset: calc(16 * var(--rem));
  }
}

@media (width < 768px) {
  :root {
    --container-content: calc(calc(2 * var(--space-10)) + var(--container-size-lg));
  }
}