:root {
  --letter-spacing-base: 0.02em;
  --letter-spacing-en: 0.02em;
  --line-height-base: 2;
  --line-height-head: 1.6;
  --line-height-en: 1.2;

  --base-color: hsl(45, 30%, 95%);
  --main-color: hsl(45, 50%, 50%);
  --sub-main-color: hsl(225, 50%, 50%);
  --main-color-100-rgb: rgb(233, 242, 255);
  --main-color-50-rgb: rgb(217, 234, 255);
  --base-white: 255, 255, 255;
  --base-white-rgb: rgb(255, 255, 255);
  --black: hsl(45, 0%, 30%);
  --black-alpha: hsla(45, 0%, 30%, 0.5);
  --gray-light: rgb(204, 204, 204);
  --glass-light: hsla(45, 0%, 80%, 0.4);
  --glass: hsla(45, 0%, 50%, 0.4);
  --glass-deep: hsla(45, 0%, 20%, 0.4);

  --larger_notebooks: 1160px;
  /*
  --large_desktop: 1440px;
  --desktop_notebook: 1024px;
  --tablet: 768px;
  --smartphone: 480px;
  */

  --base-size-small: 4px;
  --base-size: 8px;
  --base-size-large: 16px;
  --base-size-xlarge: 32px;
  --base-size-xxlarge: 64px;
  --base-size-xxxlarge: 128px;

  --sidebar_width: 250px;
  --header-height-sp: 60px;
  --header-height-pc: 120px;
  --header-width-sp: 40px;
  --header-width-pc: 80px;

  --body_padding_side_sp: 20px;
  --body_padding_side: 60px;
  --border-radius-img-base: 20px;

  --z-index-nav: 1000;
  --z-index-base: 1000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* outline: 1px solid magenta; */
}
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--base-color);
  min-width: 320px;
  font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  color: var(--black);
  font-size: 1.4rem;
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
}
@media all and (min-width: 768px) {
  body {
    min-width: var(--larger_notebooks);
    font-size: 1.6rem;
  }
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: var(--base-size-xxxlarge);
}

section:nth-of-type(n + 2) {
  margin-top: var(--base-size-xxxlarge);
}

@media all and (max-width: 768px) {
  section {
    margin-bottom: var(--base-size-xlarge);
  }
  section:nth-of-type(n + 2) {
    margin-top: var(--base-size-xlarge);
  }
}

ul[class],
ol[class] {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}
@media all and (min-width: 768px) {
  a:hover {
    text-decoration: none;
  }
}

a[class] {
  text-decoration: none;
}

h2 {
  font-size: 2.4rem;
  line-height: var(--line-height-head);
  letter-spacing: var(--letter-spacing-base);
}

h3 {
  font-size: 1.8rem;
  line-height: var(--line-height-head);
  letter-spacing: var(--letter-spacing-base);
}

h4 {
  font-size: 1.6rem;
  line-height: var(--line-height-head);
  letter-spacing: var(--letter-spacing-base);
}

/* business area */
.g-business-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--larger_notebooks);

  margin: var(--base-size-xlarge) auto;
  padding: var(--base-size-large);

  border-top-width: 1px;
  border-top-style: solid;
  border-image: linear-gradient(
      90deg,
      transparent,
      var(--gray-light),
      transparent
    )
    1;
}
.g-business-area h2 {
  position: relative;
  margin-bottom: var(--base-size-large);
}
.g-business-area h2::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--main-color), transparent);
}
.g-business-area h3 {
  color: var(--main-color);
}
.g-business-area h4 {
  margin: var(--base-size-large);
}
.g-business-area li::marker {
  color: var(--main-color);
}

@media all and (max-width: 768px) {
  .g-business-area {
    width: 80%;
    font-size: 1.2rem;
  }
  .g-business-area h2 {
    font-size: 1.8rem;
  }
  .g-business-area h3 {
    font-size: 1.4rem;
  }
}

/* calendar */
.fc {
  width: 100%;
}

.fc .fc-button-primary {
  background-color: var(--main-color);
  color: var(--base-white);
  border: none;
}

/* swiper */
.swiper-wrapper {
  /* This is key for a smooth, non-stop scroll */
  transition-timing-function: linear !important;
}