@charset "UTF-8";

:root {
  --font-color: rgba(0, 0, 0, 1);
  --roma-font-color: rgba(6, 172, 93, 1);

  --title-font-color: rgba(6, 172, 93, 1);
  --text-link-font-color: rgba(6, 172, 93, 1);

  --link-font-color: rgba(0, 0, 0, 1);
  --area-hover-font-color: rgba(6, 172, 93, 1);

  --bg-color-main: rgba(255, 255, 255, 1);
  --bg-color-sub: rgba(246, 255, 239, 1);
  --bg-color-special: #e5eef7;
  --bg-color-featured-experiences: rgba(246, 255, 239, 1);

  --btn-color: rgba(6, 172, 93, 1);
  --btn-font-color: rgba(255, 255, 255, 1);

  --btn-hover-color: rgba(255, 255, 255, 1);
  --btn-hover-font-color: rgba(6, 172, 93, 1);
  --btn-hover-border-color: rgba(6, 172, 93, 1);

  --maincopy-color: rgba(246, 255, 239, 1);
  --border-color: rgba(6, 172, 93, 1);
  --border-color-light-gray: rgba(230, 230, 230, 1);
  --border-color-gray: rgba(200, 200, 200, 1);

  --border-property: rgba(230, 230, 230, 1) solid 1px;

  --font-size-xxs: 0.7rem;
  --font-size-xs: 0.8rem;
  --font-size-sm: 0.9rem;
  --font-size-base: 1rem;
  --font-size-md: 1.25rem;
  --font-size-lg: 1.5rem;
  --font-size-xl: 1.75rem;
  --font-size-xxl: 2rem;
  --font-size-xxxl: 3rem;

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;
  --spacing-xxxl: 80px;

  --navbar-height: 4.5rem;

  --navbar-sp-color: rgba(6, 172, 93, 1);
  --navbar-sp-font-color: rgba(255, 255, 255, 1);
  --navbar-sp-border-color: rgba(255, 255, 255, 1);

  --corner-md-duplicate: 8px;

  --footer-color: rgba(6, 172, 93, 1);
  --footer-font-color: rgba(255, 255, 255, 1);
  --footer-border-color: rgba(255, 255, 255, 1);

  --container-max-width: 1000px;

  /* 画像のズーム */
  --img-zoom-transition: 0.5s;
  --img-zoom-transform: scale(1.1, 1.1);
}

@media screen and (max-width: 1024px) {
  :root {
    --font-size-xxs: 0.6rem;
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 1.75rem;
    --font-size-xxxl: 2.5rem;
  }
}

@media screen and (max-width: 480px) {
  :root {
    /* スマホの文字サイズ */
    --font-size-xxs: 0.6rem;
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.15rem;
    --font-size-xl: 1.3rem;
    --font-size-xxl: 1.45rem;
    --font-size-xxxl: 1.6rem;
  }
}