@charset "UTF-8";
/* ---------------------------
  variable
----------------------------- */
:root {
  --white: #ffffff;
  --black: #000000;
  --gray: #cccccc;
  --gray-dark: #999999;
  --gray-light: #F2F2F2;
  --red: #E50012;
  --font-primary: var(--black);
  --family-primary: 'Noto Sans JP', sans-serif;
  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-default: 1.5;
  --line-height-normal: 1.7;
  --line-height-relaxed: 2;
  --spacing-gutter: clamp(20px, -15.056px + 8.989vw, 100px);
  --header-height: 80px;
  --header-height-sp: 50px;
  --leading-trim: calc((1em - 1lh) / 2);
  --radius-full: calc(1px / 0);
}

/* ---------------------------
  CSS Reset
----------------------------- */
* {
  min-inline-size: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(html) {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

:where(body) {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

:where(body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol) {
  margin: 0;
}

:where(ul, ol) {
  list-style-type: "";
  padding: unset;
}

:where(a:not([class])) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

:where(a) {
  text-decoration: none;
}

:where(img, picture) {
  max-width: 100%;
  height: auto;
  display: block;
}

:where(input, button, textarea, select) {
  font: inherit;
}

:where(input[type=text], textarea) {
  font-size: 16px;
}

:where(textarea) {
  field-sizing: content;
}

:where(button, [type=button], [type=reset], [type=submit]) {
  touch-action: manipulation;
}

:where(:-moz-any-link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
  cursor: pointer;
}

:where(:any-link,
button,
[type=button],
[type=reset],
[type=submit],
label[for],
select,
summary,
[role=tab],
[role=button]) {
  cursor: pointer;
}

:focus:not(:focus-visible) {
  outline: none;
}

:where(address) {
  font-style: normal;
}

:where(table) {
  border-collapse: collapse;
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after,
  ::backdrop {
    background-attachment: scroll !important;
    transition-delay: 0s !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* ---------------------------
  base
----------------------------- */
body {
  color: var(--font-primary);
  font-family: var(--family-primary);
  font-size: clamp(0.875rem, 0.82rem + 0.225vw, 1rem);
  line-height: 1.75;
  font-weight: 400;
  overflow-x: clip;
  overflow-y: scroll;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

a {
  color: var(--font-primary);
}

button {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  cursor: pointer;
}

/* ---------------------------
  utility
----------------------------- */
.u-wrapper {
  max-width: calc(1200px + 2 * var(--spacing-gutter));
  margin-inline: auto;
  padding: 0 var(--spacing-gutter);
}

.u-br-sm {
  display: none;
}
@media (max-width: 640px) {
  .u-br-sm {
    display: inline;
  }
}

.u-br-sm-none {
  display: inline;
}
@media (max-width: 640px) {
  .u-br-sm-none {
    display: none;
  }
}

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

.u-br-lg {
  display: none;
}
@media (max-width: 1024px) {
  .u-br-lg {
    display: inline;
  }
}

.u-sr-only {
  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-forced-wide {
  margin-inline: calc(50% - 50vi);
}

.u-forced-wide-bg {
  -o-border-image: linear-gradient(var(--_background) 0 0) 0//0 100vi;
     border-image: linear-gradient(var(--_background) 0 0) fill 0//0 100vi;
}

/* ---------------------------
  component
----------------------------- */
/* ---------------------------
  header
----------------------------- */
@media (max-width: 1024px) {
  .header .u-wrapper {
    padding: 0;
  }
}

.header__logo {
  padding: 60px 0 50px;
}
@media (max-width: 1024px) {
  .header__logo {
    padding: 0;
  }
}
.header__logo a {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .header__logo a {
    margin-left: 0;
    padding: 5px 10px;
  }
}
@media (max-width: 1024px) {
  .header__logo img {
    width: 170px;
  }
}
.header__logo span {
  display: block;
  text-align: center;
  font-size: 2.125rem;
  font-weight: 700;
  margin-top: 1em;
}
@media (max-width: 1024px) {
  .header__logo span {
    display: none;
  }
}

.g-nav {
  background-color: var(--red);
}
@media (max-width: 1024px) {
  .g-nav {
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 999;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background-color: var(--white);
    padding-top: var(--header-height-sp);
    overflow-y: auto;
    visibility: hidden;
    transition: left 0.2s ease-in, visibility 0.2s ease-in;
  }
}
.g-nav.is_active {
  left: 0;
  visibility: visible;
}

.g-nav-list {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 20px;
  max-width: 1000px;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .g-nav-list {
    display: block;
    padding: 20px;
  }
}

@media (max-width: 1024px) {
  .g-nav-list__item {
    border-top: 1px solid var(--gray);
  }
}
@media (max-width: 1024px) {
  .g-nav-list__item:last-child {
    border-bottom: 1px solid var(--gray);
  }
}
.g-nav-list__item a {
  display: block;
  text-align: center;
  font-weight: 500;
  color: var(--white);
  padding: 1em;
  transition: opacity 0.2s ease-in-out;
}
.g-nav-list__item a:focus-visible {
  opacity: 0.7;
}
@media (any-hover: hover) {
  .g-nav-list__item a:hover {
    opacity: 0.7;
  }
}
@media (max-width: 1024px) {
  .g-nav-list__item a {
    color: var(--black);
  }
}

/* ---------------------------
  hamb
----------------------------- */
.hamburger {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  padding: 17px 12px;
  background-color: var(--red);
  cursor: pointer;
  z-index: 10000;
}
@media (max-width: 1024px) {
  .hamburger {
    display: block;
  }
}
.hamburger.is_active .hamburger__inner {
  transform: translateX(4px);
}
.hamburger.is_active .hamburger__inner span:nth-of-type(1) {
  transform: rotate(34deg);
}
.hamburger.is_active .hamburger__inner span:nth-of-type(2) {
  opacity: 0;
}
.hamburger.is_active .hamburger__inner span:nth-of-type(3) {
  transform: rotate(-34deg);
}

.hamburger__inner {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  transition: 0.3s ease-in-out;
}
.hamburger__inner span {
  display: block;
  width: 100%;
  height: 1px;
  opacity: 1;
  background-color: #fff;
  transform-origin: left;
  transition: 0.3s ease-in-out;
}

.fixed-menu {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: var(--white);
  border-top: 1px solid var(--black);
}
@media (max-width: 1024px) {
  .fixed-menu {
    display: block;
  }
}
.fixed-menu ul {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1.1fr 0.6fr;
  gap: 1px;
  background-color: var(--black);
}
.fixed-menu li {
  display: block;
  background-color: var(--white);
}
.fixed-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: var(--white);
  height: 50px;
  font-size: clamp(0.625rem, 0.52rem + 0.449vw, 0.875rem);
  font-weight: 500;
  text-align: center;
}
.fixed-menu span {
  display: block;
  line-height: 1;
  font-weight: 500;
  margin-top: 0.6em;
}

.side-menu {
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 100;
}
@media (max-width: 1024px) {
  .side-menu {
    display: none;
  }
}
.side-menu li {
  display: block;
}
.side-menu li + li {
  margin-top: 1px;
}
.side-menu a {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 0.5em;
  color: var(--white);
  writing-mode: vertical-rl;
  text-orientation: upright;
  background-color: var(--black);
  padding: 1.2em 0.5em;
  width: 60px;
  transition: opacity 0.2s ease-in-out;
}
.side-menu a:focus-visible {
  opacity: 0.7;
}
@media (any-hover: hover) {
  .side-menu a:hover {
    opacity: 0.7;
  }
}

/* ---------------------------
  footer
----------------------------- */
.footer {
  border-top: 1px solid var(--gray);
}

.footer__info {
  padding: clamp(3.125rem, 1.76rem + 5.618vw, 6.25rem) 0;
  text-align: center;
}
.footer__info h2 {
  max-width: 600px;
  margin-inline: auto;
  border-radius: var(--radius-full);
  margin-bottom: 2em;
  text-align: center;
  font-size: clamp(1rem, 0.86rem + 0.562vw, 1.3125rem);
  font-weight: 500;
  background-color: var(--red);
  color: var(--white);
  padding: 0.3em;
}
.footer__info h3 {
  font-size: clamp(1rem, 0.86rem + 0.562vw, 1.3125rem);
  font-weight: 700;
  margin-bottom: 1.5em;
}

.footer__tel {
  font-size: clamp(1.125rem, 0.96rem + 0.674vw, 1.5rem);
  font-weight: 700;
  margin-top: 0.5em;
  margin-bottom: 1em;
}
@media (max-width: 640px) {
  footer{
    padding-bottom:50px;
  }
  .footer__tel span {
    display: none;
  }
}

.footer__copy {
  border-top: 1px solid var(--gray);
}
.footer__copy small {
  display: block;
  text-align: center;
  background-color: var(--gray-light);
  padding: 0.8em;
}

/* ---------------------------
  top
----------------------------- */
.content {
  padding-top: clamp(1.875rem, 1.05rem + 3.371vw, 3.75rem);
  padding-bottom: clamp(5rem, 4.45rem + 2.247vw, 6.25rem);
}
.content section {
  margin-top: clamp(1.875rem, 1.33rem + 2.247vw, 3.125rem);
}
.content section + section {
  margin-top: clamp(3.125rem, 1.76rem + 5.618vw, 6.25rem);
}
.content h2:not([class]) {
  padding-left: 0.8em;
  border-left: 5px solid var(--red);
  font-size: clamp(1.125rem, 1.04rem + 0.337vw, 1.3125rem);
  font-weight: 500;
  margin-bottom: 1.5em;
  margin-top: 3em;
}
.content h3:not([class]) {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.8em;
  align-items: center;
  font-size: clamp(1.125rem, 1.04rem + 0.337vw, 1.3125rem);
  font-weight: 500;
  margin-bottom: 1em;
  margin-top: 2em;
}
.content h3:not([class])::before {
  content: "";
  display: block;
  width: clamp(1.5625rem, 0.88rem + 2.809vw, 3.125rem);
  height: 3px;
  background-color: var(--red);
}
.content h4:not([class]) {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.8em;
  align-items: center;
  font-size: clamp(0.9375rem, 0.91rem + 0.112vw, 1rem);
  font-weight: 500;
  margin-bottom: 0.5em;
}
.content h4:not([class])::before {
  content: "";
  display: block;
  width: 1.1em;
  height: 1.1em;
  background-color: var(--red);
}
.content h4:not([class]) + table {
  margin-top: 1em;
}
.content h5:not([class]) {
  font-size: clamp(0.9375rem, 0.86rem + 0.337vw, 1.125rem);
  font-weight: 500;
  margin-bottom: 1em;
  margin-top: 1em;
  background-color: var(--black);
  text-align: center;
  color: var(--white);
  max-width: 300px;
  padding: 0.5em;
}
@media (max-width: 640px) {
  .content h5:not([class]) {
    max-width: 260px;
  }
}
.content h6:not([class]) {
  font-size: clamp(0.9375rem, 0.86rem + 0.337vw, 1.125rem);
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 500;
  margin-bottom: 1em;
  margin-top: 2em;
  border: 1px solid var(--gray);
  text-align: center;
  padding: 0.5em 1em;
}
.content ul:not([class]) {
  list-style: disc;
  padding-left: 1.2em;
  margin-top: 1em;
}
.content ol:not([class]) {
  counter-reset: counter;
  margin-top: 1em;
}
.content ol:not([class]) li {
  counter-increment: counter;
  padding-left: 2.5em;
  position: relative;
}
.content ol:not([class]) li::before {
  display: inline-block;
  content: "（" counter(counter) "）";
  position: absolute;
  top: 0.1em;
  left: 0;
}
.content table {
  width: -moz-fit-content;
  width: fit-content;
  border-collapse: collapse;
}
.content th, .content td {
  padding: 0.8em 1.2em;
  font-size: clamp(0.75rem, 0.64rem + 0.449vw, 1rem);
  vertical-align: middle;
  border: 1px solid var(--gray-dark);
  text-align: left;
}
.content th {
  font-weight: 500;
}
.content th {
  background-color: var(--gray-light);
  min-width: 80px;
}

.lead {
  border: 1px solid var(--gray);
  padding: 1.8em 2.2em;
}
@media (max-width: 640px) {
  .lead {
    padding: 1em;
  }
}

.border__item {
  padding: 30px clamp(1rem, -0.48rem + 6.067vw, 4.375rem);
  border-bottom: 1px solid var(--gray);
}
@media (max-width: 640px) {
  .border__item {
    padding-inline: 0;
  }
}
.border__item > *:not(h4) {
  margin-left: 2em;
}
@media (max-width: 640px) {
  .border__item > *:not(h4) {
    margin-left: 0;
  }
}

.border__item:first-child {
  padding-top: 0;
}

.file-list {
  display: flex;
  align-items: center;
  gap: 14px clamp(1.25rem, 0.43rem + 3.371vw, 3.125rem);
  flex-wrap: wrap;
}
.file-list li {
  display: block;
}
.file-list a {
  display: block;
  transition: opacity 0.2s ease-in-out;
}
.file-list a:focus-visible {
  opacity: 0.7;
}
@media (any-hover: hover) {
  .file-list a:hover {
    opacity: 0.7;
  }
}
.file-list img {
  display: inline-block;
  vertical-align: top;
  margin-right: 0.8em;
}

.spacer {
  height: clamp(2rem, 0.69rem + 5.393vw, 5rem);
}

.btn {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: 0.8em;
  border: 1px solid var(--black);
  background-color: var(--white);
  position: relative;
  text-align: center;
  font-size: clamp(0.9375rem, 0.86rem + 0.337vw, 1.125rem);
  font-weight: 500;
  padding: 1.25em 2em;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: clamp(1.5rem, 0.79rem + 2.921vw, 3.125rem);
  margin-bottom: clamp(1.25rem, 0.98rem + 1.124vw, 1.875rem);
  margin-inline: auto !important;
  transition: color 0.2s ease-in;
}
.btn:focus-visible {
  color: var(--red);
}
@media (any-hover: hover) {
  .btn:hover {
    color: var(--red);
  }
}
.btn::before {
  content: "";
  width: 1em;
  height: 1em;
  display: inline-block;
  background-image: url(../img/chevron.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: var(--gray-light);
  width: 100%;
  height: 100%;
  translate: 8px 8px;
}