@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

:root { 
  /* ----- Colors ----- */
  --black: #222222;
  --text-black: #595757;
  --white: #ffffff;
  --key: #005BAC;
  --accent: #FFF33B;
  --yellow-light: #F8F3A1;
  --pink-light: #F6C6DB;
  --blue-light: #D8EFFC;
  --orange-light: #FDE7BD;
  --green-light: #DAFFD4;
  --gradient-primary: linear-gradient(220deg, #EBD7ED 2%, #EFE7F1 26%, #E7F3E8 58%, #D8EFFC 85%, #EBD7ED 108%);
  --gradient-primary-top: linear-gradient(200deg, #EBD7ED 2%, #EFE7F1 15%, #E7F3E8 30%, #D8EFFC 55%, #E7F3E8 80%, #D8EFFC 89%, #EBD7ED 108%);  
  --gradient-secondary: linear-gradient(90deg, #FFF33B 0%, #FFF33B 11%, #FEF13D 12%, #FAD77C 37%, #F6C4A9 58%, #F4B8C5 74%, #F4B4D0 84%, #F4B4D0 100%);
 
  /* ----- Background ----- */
  --bg-image-pc: url(../images/common/bg_base.svg) repeat center / 50px 50px;
  --bg-image-sp: url(../images/common/bg_base_sp.svg) repeat center / 30px 30px;
 
  /* ----- Typography ----- */
  --font-base: "Zen Maru Gothic", sans-serif;
  /* font-size */
  --fs-13: 0.8125rem;  
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem; /*base*/
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-26: 1.625rem;
  --fs-28: 1.75rem;
  --fs-30: 1.875rem;
  --fs-32: 2rem;
  --fs-38: 2.375rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-54: 3.375rem;
  /* font-weight */  
  --fw-regular: 400; /*caption*/
  --fw-medium: 500; /*base*/
  --fw-bold: 700; /*heading*/
  /* line-height */  
  --lh-170: 1.7; /*base*/
  --lh-120: 1.2; /*heading*/
  --lh-150: 1.5; /*title*/
  --lh-140: 1.4; /*button*/
  --lh-100: 1;
 
  /* ----- border-radius ----- */
  --radius-10: 10px;
  --radius-20: 20px;
  --radius-30: 30px;
  --radius-40: 40px;
  --radius-50: 50px;

  /* --- Spacing --- */
  /*テキスト周りの余白*/
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-14: 0.875rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem; 
  /*セクション・カード周りの余白*/
  --space-10: 0.625rem;
  --space-20: 1.25rem;
  --space-30: 1.875rem;
  --space-40: 2.5rem;
  --space-50: 3.125rem;
  --space-60: 3.75rem;
  --space-70: 4.375rem;
  --space-80: 5rem;
}

/* ======================================================
Breakpoints  (Design: SP 375 / Tablet 768 / PC 1024 / Large 1280)
------------------------------------------------------
-- PC large        : 1280px +
-- PC small        : 1024px – 1279px
-- Tablet          : 768px – 1023px
-- Smartphone      : ~767px
====================================================== 
@media (min-width: 1280px) {}
@media (min-width: 1024px) and (max-width: 1279px) {}
@media (min-width: 768px) and (max-width: 1023px) {}
@media (max-width: 767px) {}
====================================================== */


/* ======================================================
Text Style
------------------------------------------------------*/

body {
  font-family: var(--font-base);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  line-height: var(--lh-170);
  background: var(--bg-image-pc);
  color: var(--text-black);
}
@media (max-width: 767px) {
  body {
    background: var(--bg-image-sp);
  }  
}

/*大見出し下 リード文*/
.text--lead {font-size: var(--fs-24); font-weight: var(--fw-bold);}
@media (max-width: 767px) {.text--lead {font-size: var(--fs-16)}}

/*小見出し 平文と合わせて使用*/
.text--subtitle {font-size: var(--fs-18); font-weight: var(--fw-bold);}

/*画像下キャプション*/
.text--caption {font-size: var(--fs-13); font-weight: var(--fw-regular);}

/*注釈*/
.text--note {font-size: var(--fs-13); font-weight: var(--fw-medium); color: #797979;}


/* ======================================================
Utility
------------------------------------------------------*/

.flex {
  display: flex;
}

/**
 * display none
 */
.pc_none {
  display: none;
}
.sp_none {
  display: block;
}
@media screen and (max-width: 1023px) {
  .pc_none {
    display: block;
  }
  .sp_none {
    display: none;
  }
}

/**
 * visually hidden
 */
.u-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.u-text--lightgray{
  color: #D8D8D8;
}

.u-text--center {
  text-align: center; 
}

.u-text--strong {
  font-weight: var(--fw-bold);
  background-color: var(--yellow-light);
}

.br-sp { display: none;}
.br-pc { display: inline;}

@media (max-width: 768px) {
  .br-sp { display: inline;}
  .br-pc { display: none;}
}