:root {
  /* base color */
  --color-black: #141414;
  --color-black-333: #333;
  --color-UQ-black: #242424;
  --color-dark-grey: #666;
  --color-grey: #8f8f8f;
  --color-pale-grey: #f4f4f4;
  --color-pale-grey-f5: #f5f5f5;
  --color-ddd: #ddd;
  --color-eee: #eee;
  --color-aaa: #aaa;
  --color-ef: #efefef;
  --color-black-opacity-4: rgba(0, 0, 0, 0.04);
  --color-black-opacity-8: rgba(0, 0, 0, 0.08);
  --color-black-opacity-10: rgba(0, 0, 0, 0.1);
  --color-black-opacity-12: rgba(0, 0, 0, 0.12);
  --color-black-opacity-40: rgba(0, 0, 0, 0.4);
  --color-black-opacity-60: rgba(0, 0, 0, 0.6);
  --color-black-opacity-80: rgba(0, 0, 0, 0.8);
  --color-red: #a51b20;
  --color-vivid-red: #d3341d;
  --color-red-opacity-10: rgba(165, 27, 32, 0.1);
  --color-light-red: #f6e8e9;
  --color-red-hover: #d12c32;
  --color-dark-red-hover: #701216;
  --color-pink: #e26762;
  --color-light-pink: #fcf0ef;
  --color-pink-opacity-10: rgba(238, 24, 102, 0.1);
  --color-blue: #2e629e;
  --color-green: #7c922f;
  --color-brown: #a6764f;
  --color-brown-hover: #b2794b;
  --color-light-brown: #bba68a;
  --color-white: #fff;
  --color-white-opacity-60: rgba(255, 255, 255, 0.6);
  --color-yellow: #ff0;
  --color-red-no-show: #e00;
  --color-sunny: #d44e18;
  --color-moon: #2a0c58;
  --color-faq-open-bg: #e0e0e0;

  /* sns color */
  --color-facebook: #395394;
  --color-X: #000000;

  /* text size */
  --title-XXXL: 4.5rem;
  --title-XXL: 3.6rem;
  --title-XL: 3.2rem;
  --title-L: 2.8rem;
  --title-M: 2.4rem;
  --title-S: 2rem;
  --text-XL: 1.8rem;
  --text-L: 1.6rem;
  --text-M: 1.4rem;
  --text-S: 1.2rem;
  --text-XS: 1rem;
  --icon-XL: 4.8rem;
  --icon-L: 4rem;
  --icon-M: 2.4rem;
  --icon-S: 1.6rem;
  --icon-XS: 1.2rem;
  --text-input-title: 1.5rem;

  /* space size */
  --space-XXXL: 6rem;
  --space-XXL: 5rem;
  --space-XL: 4rem;
  --space-L: 3rem;
  --space-M: 2rem;
  --space-S: 1.5rem;
  --space-XS: 1rem;
  --space-XXS: 0.5rem;
  --space-XXXS: 0.2rem;
  --space-minus-XXXL: -6rem;
  --space-minus-XL: -4rem;
  --space-minus-M: -2rem;
  --space-minus-XS: -1rem;
  --space-radio-text: 3.5rem;
  --space-fix-header: 4.4rem;
  --space-footer-share-wrapper: 11.5rem;
  --space-footer-top: 8rem;
  --space-minus-common-fix-header: -10rem;
  --space-contents-container: 15rem;
  --space-contents-info-list: 8rem;
  --space-shop-common: 8rem;
  --space-modal-with-bg: 5%;
  --space-banner-head-inner: 47rem;

  /* radius size */
  --radius-common: 8px;
  --radius-sausage: 16px;
  --radius-circle: 50%;
  --radius-switcher-base: 6px;
  --radius-switcher-base-active: 5px;
  --radius-banner: 10px;
  --radius-info: 12px;
  --radius-wide-sausage: 22px;
  --radius-checkbox-inner: 5px;
  --radius-swiper: 12px;
  --radius-link-sausage: 50px;
  --radius-scrollbar: 5px;

  /* pc base width */
  --pc-base-width: 1280px;
  --pc-centered-width: 940px;
  --pc-body-min-width: 1320px;
  --pc-reserve-width: 1100px;
  --pc-static-width: 1100px;
}

@font-face {
  src: url('../fonts/NotoSerifCJKjp-Bold-rimaneCustom.woff2');
  font-display: swap;
  font-family: 'sans-serif';
  font-style: normal;
  font-weight: bold;
}

html {
  background: var(--color-white);
  font-size: 10px;
  font-weight: 500;
}

.font-serif {
  font-family: 'sans-serif';
}

img {
  object-fit: cover;
}

.is-hidden {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
.text-title {
  font-weight: bold;
}

.title-XXXL {
  font-size: var(--title-XXXL);
}

.title-XXL {
  font-size: var(--title-XXL);
}

.title-XL {
  font-size: var(--title-XL);
}

.title-L {
  font-size: var(--title-L);
}

.title-M {
  font-size: var(--title-M);
}

.title-S {
  font-size: var(--title-S);
}

.text-XL {
  font-size: var(--text-XL);
}

.text-L {
  font-size: var(--text-L);
}

.text-M {
  font-size: var(--text-M);
}

.text-S {
  font-size: var(--text-S);
}

.text-XS {
  font-size: var(--text-XS);
}

.text-bold {
  font-weight: 700;
}

.text-lighter {
  font-weight: 400;
}

.text-right {
  text-align: right;
}

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

.text-emphasis,
.text-active,
.text-emphasis [class^='icon-'],
.text-active [class^='icon-'] {
  color: var(--color-red);
}

.text-description {
  color: var(--color-dark-grey);
}

.text-description-light {
  color: var(--color-grey);
}

[class^='icon-'],
[class*=' icon-'] {
  font-size: var(--icon-M);
}

.icon-XL {
  font-size: var(--icon-XL);
}

.icon-L {
  font-size: var(--icon-L);
}

.icon-M {
  font-size: var(--icon-M);
}

.icon-S {
  font-size: var(--icon-S);
}

.pc-only,
.pc-only-flex,
.pc-only-inline-block {
  display: none !important;
}

.component {
  padding: 0 var(--space-M);
}

.two-columns {
  position: relative;
}

.two-columns-down {
  margin-bottom: var(--space-fix-header);
  top: 44px;
}

.app-container {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--space-fix-header));
}

@media (min-width: 768px) {
  body {
    min-width: var(--pc-body-min-width);
  }

  .sp-only {
    display: none !important;
  }

  .pc-only {
    display: block !important;
  }

  .pc-only-flex {
    display: flex !important;
  }

  .pc-only-inline-block {
    display: inline-block !important;
  }

  .pc-new-line-space {
    margin-left: var(--space-XS);
  }

  .main-container {
    margin: 0 auto;
    width: var(--pc-base-width);
  }

  .container-width-fix {
    width: fit-content;
  }

  .component {
    padding: 0;
  }

  .two-columns {
    display: flex;
    gap: 40px;
    margin-bottom: var(--space-fix-header);
    top: 44px;
  }

  .left-column {
    flex: 1;
  }

  .right-column-main {
    margin-top: var(--space-XL);
    width: 790px;
  }

  .right-column-sub {
    width: 30%;
  }

  .sticky-component {
    position: sticky;
    top: 70px;
  }
}