@charset "utf-8";
/*----------------------------------------------------
	共通
----------------------------------------------------*/
body {
  background: #000;
  color: #fff;
  font-size: var(--16px);
  letter-spacing: .1em;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

/*Google Material Symbols*/
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48 }

/*----------------------------------------------------
	custom properties
----------------------------------------------------*/
:root {
  --size-main: 1000px; /*デザインのコンテンツ幅*/
  --height-nav: 120px;
  --color-main: #3f41fa;
  --color-sub: #3FD924;
  --color-gray-dark: gray;
  --color-gray-light: silver;

  --16px: clamp(14px, 12.800px + 0.32vw, 16px);
  --18px: clamp(16px, 14.800px + 0.32vw, 18px);
  --20px: clamp(18px, 16.800px + 0.32vw, 20px);
  --30px: clamp(22px, 17.200px + 1.28vw, 30px);
  --40px: clamp(28px, 20.800px + 1.92vw, 40px);
}

/*----------------------------------------------------
	box
----------------------------------------------------*/
.main {
  width: min(100% - 2em, var(--size-main));
  margin-inline: auto;
  line-height: 1.8;
  margin-bottom: 8em;
}
.main.-requests {
  margin-bottom: 0;
}
.container-inner {
  width: min(100% - 2em, var(--size-main));
  margin-inline: auto;
}
.container-inner-small {
  width: min(100%, 800px);
  margin-inline: auto;
}
.container-center {
  max-inline-size: max-content;
  margin-inline: auto;
}
@media (min-width: 768px) {
  /* PC */
  .full-container {
    /*全幅*/
    margin: 0 calc(50% - 50vw);
    width: 100vw;
  }
  .full-container-back {
    /*背景全幅*/
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    width: 100vw;
  }
  .full-right {
    /*右側へ要素を広げる*/
    flex: 1;
    margin-right: calc(50% - 50vw);
  }
  .full-left {
    /*左側へ要素を広げる*/
    flex: 1;
    margin-left: calc(50% - 50vw);
  }
}
@media (max-width: 767px) { /* SP */
  .full-container {
    /*全幅*/
    width: 100vw;
  }
  .full-container-back {
    /*背景全幅*/
    width: 100vw;
  }
}

/*----------------------------------------------------
	header
----------------------------------------------------*/
#check { display: none; }
.header__link { scroll-margin-top: var(--height-nav); }
@media (min-width: 1000px) { /* PC */
.header {
  position: sticky;
  top: 0;
  margin: 0 auto;
  z-index: 100;
  font-size: var(--16px);
  font-weight: bold;
}
/* スクロールしたらヘッダーメニューの背景色を変更 */
.header.headerColorScroll {
  background: #000;
  transition: background 0.4s ease-out;
}
.header__inner {
  width: min(100% - 3em, 1400px);
  margin-inline: auto;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.header__contact {
  margin-left: 2em;
}
.header__contact__link {
  display: inline-block;
  padding: 1.2em 1.5em;
  border: 1px solid #fff;
  color: #fff;
  transition: .3s;
  margin-right: 1em;
}
.header__contact__link:is(:hover, :focus) {
  border: 1px solid var(--color-main);
}
.header__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1em;
  margin-bottom: 1em;
}
.header__nav .nav__list { display: flex; list-style: none; }
.header__nav .nav__item { position: relative; z-index: 1; }
.header__nav .nav__item:first-child { display: none; }
.header__nav .nav__item::after { content: ''; position: absolute; bottom: -1em; left: 15%; width: 70%; height: 2px; background: var(--color-main); transition: all .3s; transform: scale(0, 1); transform-origin: center top; }
.header__nav .nav__item:hover::after { transform: scale(1, 1); }
.header__nav .nav__item:hover .nav__sublist { visibility: visible; opacity: 1; }
.header__nav .nav__link { color: #fff; padding-left: 1em; padding-right: 1em; text-decoration: none; display: block; }
.header__nav .nav__link:hover { color: #fff; }
}
@media (max-width: 999px) { /* SP */
.header {  }
.header__contact { display: none; }
.header__nav .nav__list { width: 100vw; height: 100vh; position: fixed; top: 0; right: -110%; z-index: 2; background: rgba(0,0,0,0.8); list-style: none; text-align: center; padding: 1em 0; }
.header__nav .nav__item { font-size: 20px; padding: .7em 0; }
.header__nav .nav__link { color: #fff; text-decoration: none; display: block; }
.header__nav .nav__button { background: var(--color-sub) url("../images/nav_button.png") no-repeat; display: block; width: 50px; height: 50px; position: fixed; top: 10px; right: 10px; cursor: pointer; z-index: 200; }

#check:checked ~ .nav__list { right: 0; transition: .4s; }
#check:checked ~ .nav__button { background-position: -50px 0; z-index: 300; }
}

/*----------------------------------------------------
	pagetop
----------------------------------------------------*/
.pagetop {
  position: relative;
}
.pagetop p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*----------------------------------------------------
	footer
----------------------------------------------------*/
.footer {
  text-align: center;
  line-height: 1.5;
  background: #fff;
  color: #000;
}
.top__footer .footer {
  background: #000;
  color: #fff;
}

.footer__logo {
  width: 70%;
  margin: auto;
  padding: 2em 0 1em;
}

@media (min-width: 768px) { /* PC */
.footer {
  padding-top: 3em;
  padding-bottom: 5em;
}
.footer__contact {
  display: none;
}
.footer__copyright {
  text-align: center;
  font-size: 12px;
  transform: rotate(270deg);
  position: absolute;
  right: -50px;
  top: 50%;
  z-index: 150;
}
}
@media (max-width: 767px) { /* SP */
.footer {
  padding-top: 0;
  padding-bottom: 3em;
}
.footer__contact {
  background: var(--color-main);
  text-align: center;
  font-weight: bold;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  font-size: var(--18px);
  padding: 1.5em;
  overflow: hidden;
  z-index: 100;
}
.footer__contact__link {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 0 1em;
}
.footer__copyright {
  text-align: center;
  margin: 2em 0;
  font-size: 12px;
}
}

/*----------------------------------------------------
	link
----------------------------------------------------*/
a { text-decoration: none; color: #fff; }