@charset "utf-8";

/**
 * @file
 * メインCSSファイル
 */

/* global */
* {
  scroll-margin-top: var(--size-80);
}

@media (max-width: 768px) {
  * {
    scroll-margin-top: var(--size-40);
  }
}

html {
  position: relative;
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
}
.is-overflow-hidden {
  overflow: hidden;
}
body {
  font-family: "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
}

/* component */
.c-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #FFF;
  color: #000;
  padding: 8px;
  z-index: 100;
  transition: top 0.3s ease-in-out;
}
.c-skip-link:focus {
  top: 10px;
  z-index: 302;
}
.c-bold {
  font-weight: 700;
}
.c-only-pc {
  display: block;
}
.c-only-sp {
  display: none;
}

@media (max-width: 768px) {
  .c-only-pc {
    display: none;
  }
  .c-only-sp {
    display: block;
  }
}

.c-inner-left {
  margin-left: max(0px, calc((100vw - var(--size-1280)) / 2 - var(--size-80)));
  padding-left: var(--size-80);
  max-width: 100%;
}
.c-inner-right {
  margin-right: max(0px, calc((100vw - var(--size-1280)) / 2 - var(--size-80)));
  padding-right: var(--size-80);
  max-width: 100%;
}
@media (max-width: 1240px) {
  .c-inner-left {
    padding-left: var(--size-80);
  }
  .c-inner-right {
    padding-right: var(--size-80);
  }
}

@media (max-width: 768px) {
  .c-inner-left {
    margin-left: 0;
    padding-left: var(--size-32);
  }
  .c-inner-right {
    margin-right: 0;
    padding-right: var(--size-32);
  }
}