@charset "UTF-8";

/*
  設計ルール：
  - 変数定義：open-props.css
  - PC用レイアウト：pc.css
  - SP用レイアウト：sp.css
*/

/*@import "https://unpkg.com/open-props/colors";
@import "https://unpkg.com/open-props/sizes";
@import "https://unpkg.com/open-props/animations";
@import "https://unpkg.com/open-props";
*/

@import "https://unpkg.com/open-props";

.site-root{

  /* ========== Color ========== */
  --color-brand: #004da2;
  --color-white: #fff;
  --color-whitegray: #fafafa;
  --color-whiteblue: #fbfbfe;
  --color-bluegray: #e7f0f3;
  --color-lightbluegray: #dbe4f0;
  --color-lightblue: #a5cdfa;
  --color-mistic: #e9f5fd;
  --color-orange: #fa6c20;
  --color-gray: #ccc;
  --color-mdlgray: #7f7f7f;
  --color-darkgray: #333;
  --color-lightgray: #d9d9d9;
  --color-darkblue: #123c6b;
  --color-breadcrumb: #7f7f7f;
  --color-bluepurple: #89acfb;
  --color-news-icon1: #397fac;
  --color-news-icon2: #dc6360;
  --color-news-icon3: #cc6c78;
  --color-news-icon4: #9573a4;
  --color-news-icon5: #809e87;
  --color-text-link: #2cc9b2;
  --color-text-default: #1e1e1e;
  --bg-grad-whiteblue: linear-gradient(90deg, rgba(245, 253, 255, 1), rgba(247, 250, 255, 1));
  --bg-grad-blue: linear-gradient(90deg, rgba(245, 253, 255, 1), rgba(247, 250, 255, 1));

  /* ========== Font Family ========== */
  --font-heading: 'Figtree', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-serif: 'Libre Caslon Display', serif;
  --font-sign: 'Bonheur Royale', cursive;

  /* ========== Typography ========== */
  --font-fluid-default: clamp(1rem, 1.33vw, 1.125rem);
  --font-fluid-slogan: clamp(3.5rem, 4.17vw, 5rem);
  --font-fluid-slogan-sm: clamp(2.625rem, 4.44vw, 3.75rem);
  --font-fluid-slogan-xs: clamp(2.156rem, 3.65vw, 3.02rem);
  --font-fluid-boxlead: clamp(1.3125rem, 2.22vw, 1.875rem);
  --font-fluid-xs: clamp(.85rem, .75vw, .9rem);
  --font-fluid-ssm: clamp(.85rem, .75vw, .92rem);
  --font-fluid-sm: clamp(.7rem, 1.19vw, 1rem);
  --font-fluid-md: clamp(.875rem, 1.48vw, 1.25rem);
  --font-fluid-lg: clamp(1.05rem, 1.78vw, 1.5rem);
  --font-fluid-num: clamp(4.2rem, 7.11vw, 6rem);
  --font-fluid-num-xs: clamp(2.275rem, 3.85vw, 3.25rem);
  --font-fluid-num-sm: clamp(2.975rem, 5.04vw, 4.25rem);
  --font-fluid-num-exp: clamp(1.05rem, 1.78vw, 1.5rem);
  --font-fluid-exp: clamp(1.2rem, 2.37vw, 2rem);
  --font-fluid-exp-per: clamp(1.75rem, 2.96vw, 2.5rem);
  --font-fluid-lead: clamp(1.225rem, 2.07vw, 1.75rem);
  --font-fluid-history: clamp(8.75rem, 10.42vw, 12.5rem);

  --font-fluid-history-md: clamp(8rem, 8.33vw, 10rem);
  --font-fluid-history-sm: clamp(6.75rem, 7.5vw, 9rem);
  --font-fluid-history-xs: clamp(5.6rem, 6.67vw, 8rem);

  --font-fluid-d: clamp(.9625rem, 1.63vw, 1.375rem);
  --font-fluid-btn: clamp(.875rem, 1.48vw, 1.25rem);
  --font-fluid-inq: clamp(1.575rem, 2.6vw, 2.125rem);
  --font-fluid-h3: clamp(2.1875rem, 3.7vw, 3.125rem);
  --font-fluid-h4: clamp(1.4rem, 2.37vw, 2rem);
  --font-fluid-h5: clamp(1.05rem, 1.78vw, 1.5rem);
  --font-fluid-h6: clamp(.875rem, 1.48vw, 1.25rem);
  --font-fluid-jp-en: .9375rem; /* 固定 */
  --font-fluid-breadcrumb: clamp(.8rem, .7vw, .85rem);

  /* ========== Line Height ========== */
  --leading-df: 1;/* default */
  --leading-heading-lg: 1.15;/* 見出し（大）*/
  --leading-heading-sm: 1.3;/* 見出し（小）*/
  --leading-body-narrow: 1.45;/* 本文 */
  --leading-body: 1.6;/* 本文 */
  --leading-body-loose: 1.75;/* 長文・説明文 */
  --leading-img-0: 0;

  /* ========== LetterSpacing ========== */
  --letterspacing-0: 0;
  --letterspacing-tight: -0.06em;
  --letterspacing-slim: -0.02em;
  --letterspacing-normal: 0.01em;
  --letterspacing-wide: 0.03em;

  --font-space-xs: var(--letterspacing-tight);
  --font-space-sm: var(--letterspacing-slim);
  --font-space-md: var(--letterspacing-normal);
  --font-space-xl: var(--letterspacing-wide);

  /* ========== FontWeight ========== */
  --font-thick-3: var(--font-weight-3);
  --font-thick-4: var(--font-weight-4);
  --font-thick-5: var(--font-weight-5);
  --font-thick-6: var(--font-weight-6);
  --font-thick-7: var(--font-weight-7);
  --font-thick-8: var(--font-weight-8);

  /* ========== Radius ========== */
  --radius-3:  3px;
  --radius-5:  5px;
  --radius-10: 10px;
  --radius-15: 15px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-999: 999px;

  --box-radius-sm: var(--radius-10);
  --box-radius-md: var(--radius-20);
  --box-radius-lg: var(--radius-30);

  /* ========== BoxShadow ========== */
  --box-shadow-1: 0 4px 8px rgba(0, 0, 0, .25);
  --box-shadow-2: 2px 2px 2px rgba(0, 0, 0, .25);
  --box-shadow-3: 2px 2px 0 rgba(198, 198, 198, 1);
  --box-shadow-4: 0 1px 5px rgba(0, 0, 0, .1);
  --box-shadow-5: 0 1px 3px rgba(255, 255, 255, .2);
  --box-shadow-6: 0 4px 4px rgba(0, 0, 0, .15);
  --box-shadow-7: 0 0 3px rgba(255, 255, 255, 1);
  --box-shadow-8: 3px 3px 8px rgba(0, 0, 0, .2);

  /* ========== TextShadow ========== */
  --text-shadow-1: 2px 3px 3px rgba(0, 0, 0, .4);
  --text-shadow-2: 2px 2px 1px rgba(255, 255, 255, 1);

  /* ========== Spacing ========== */
  --space-1:  var(--size-1);/* .25rem */
  --space-2:  var(--size-2);/* .5rem */
  --space-3:  var(--size-3);/* 1rem */
  --space-4:  var(--size-4);/* 1.25rem */
  --space-5:  var(--size-5);/* 1.5rem */
  --space-6:  var(--size-6);/* 1.75rem */
  --space-7:  var(--size-7);/* 2rem */
  --space-8:  var(--size-8);/* 3rem */
  --space-9:  var(--size-9);/* 4rem */
  --space-10: var(--size-10);/* 5rem */
  --space-11: var(--size-11);/* 7.5rem */
  --space-12: var(--size-12);/* 10rem */

  --space-section-0-25: clamp(.125rem, .25vw, .25rem);
  --space-section-0-4: clamp(.175rem, .35vw, .35rem);
  --space-section-0-5: clamp(.25rem, .5vw, .5rem);
  --space-section-0-75: clamp(.375rem, .75vw, .75rem);
  --space-section-1: var(--size-fluid-1);/* clamp(.5rem, 1vw, 1rem); */
  --space-section-1-5: clamp(.75rem, 1.5vw, 1.25rem);
  --space-section-2: var(--size-fluid-2);/* clamp(1rem, 2vw, 1.5rem); */
  --space-section-3: var(--size-fluid-3);/* clamp(1.5rem, 3vw, 2rem); */
  --space-section-4: var(--size-fluid-4);/* clamp(2rem, 4vw, 3rem); */
  --space-section-4-5: clamp(3rem, 4.5vw, 4rem);
  --space-section-5: var(--size-fluid-5);/* clamp(4rem, 5vw, 5rem); */
  --space-section-5-5: clamp(4.5rem, 6vw, 6.25rem);
  --space-section-6: var(--size-fluid-6);/* clamp(5rem, 7vw, 7.5rem); */
  --space-section-7: var(--size-fluid-7);/* clamp(7.5rem, 10vw, 10rem); */
  --space-section-8: var(--size-fluid-8);/* clamp(10rem, 20vw, 15rem); */
  --space-section-8-5: clamp(12.5rem, 25vw, 17.5rem);
  --space-section-9: var(--size-fluid-9);/* clamp(15rem, 30vw, 20rem);*/
  --space-section-10: var(--size-fluid-10);/* clamp(20rem, 40vw, 30rem);*/
  --space-chronology: clamp(8.625rem, 15vw, 12.5rem);
  --mv-section: clamp(6rem, 8vw, 8.5rem);
  --mv-section-sm: clamp(4.5rem, 6.5vw, 7rem);
  --btn-size-fluid: clamp(1.25rem, 3vw, 1.75rem);

  /* ========== ratio ========== */
  --bg-product-ratio: 1.23/1;
}


.lang-en .site-root{

  /* ========== Line Height ========== */
  --leading-heading-lg: 1.1;
  --leading-heading-sm: 1.25;
  --leading-body: 1.6;
  --leading-body-loose: 1.75;

}

.lang-ja .site-root{

  /* ========== Line Height ========== */
  --font-heading: 'Noto Sans CJK JP', sans-serif;
  --font-body: 'Noto Sans CJK JP', sans-serif;

  --leading-heading-lg: 1.25;
  --leading-heading-sm: 1.45;
  --leading-body: 1.75;
  --leading-body-loose: 1.9;

}