@charset "UTF-8";
:root {
  --key-color: #1374b4;
  --linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
  --ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
  --ease-in: cubic-bezier(0.420, 0.000, 1.000, 1.000);
  --ease-out: cubic-bezier(0.000, 0.000, 0.580, 1.000);
  --ease-in-out: cubic-bezier(0.420, 0.000, 0.580, 1.000);
  --easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
  --easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  --easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
  --easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  --easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
  --easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
  --easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
  --easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
  --easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
  --easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  --easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  --easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
  --easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
  --easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
  --easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  --easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
  --easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
  --easeInOutQuart: cubic-bezier(0.770, 0.000, 0.275, 1.000);
  --easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
  --easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
  --easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
  --easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);
  --easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);
  --easeBuruBuru: cubic-bezier(0.42, 0, 0.58, 1);
}

/* ============================================================================

　_base

=============================================================================== */
/* ----------------------------------------------------------------------------
　reset
---------------------------------------------------------------------------- */
body, h1, h2, h3, h4, h5, ul, ol, li, dl, dt, dd, p, strong, address, a, span, div, section, header {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul, li {
  list-style: none;
}

ol {
  padding: 0 0 0 2rem;
  margin: 0 0 0 0;
}

ol li {
  list-style: decimal;
}

button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  cursor: pointer;
  color: #333;
}

address {
  font-style: normal;
}

img {
  width: 100%;
  border: 0;
  vertical-align: bottom;
}

/* ----------------------------------------------------------------------------
　font-size
---------------------------------------------------------------------------- */
html {
  font-size: 62.5%;
}

/* ----------------------------------------------------------------------------
　font-family
---------------------------------------------------------------------------- */
body,
input,
button,
select,
textarea {
  font-family: "Noto Sans JP", sans-serif;
}

/* ----------------------------------------------------------------------------
　overflow
---------------------------------------------------------------------------- */
html {
  overflow-x: hidden !important;
}

body {
  overflow-x: hidden !important;
}

/* ----------------------------------------------------------------------------
　link
---------------------------------------------------------------------------- */
a {
  color: #555;
  text-underline-offset: 0.3rem;
}
a:hover {
  text-decoration: none;
}

/* ----------------------------------------------------------------------------
　is-visible
---------------------------------------------------------------------------- */
.is-visible-ld,
.is-visible-sd {
  display: none;
}

@media screen and (max-width: 999px) {
  .is-visible-ld {
    display: block;
  }
  .is-hidden-ld {
    display: none;
  }
}
@media screen and (max-width: 743px) {
  .is-visible-sd {
    display: block;
  }
  .is-hidden-sd {
    display: none !important;
  }
}
/* ----------------------------------------------------------------------------
　widthdebug
---------------------------------------------------------------------------- */
#widthdebug {
  position: fixed;
  left: 0rem;
  bottom: 0rem;
  background-color: #000;
  color: #fff;
  font-size: 1.6rem;
  z-index: 1000000;
}

/* ----------------------------------------------------------------------------
　main
---------------------------------------------------------------------------- */
main {
  font-size: 1.6rem;
  color: #555;
}
main a {
  color: #555;
}
main a:hover {
  opacity: 0.7;
}

/* ----------------------------------------------------------------------------
　container
---------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
　print
---------------------------------------------------------------------------- */
@media print {
  body {
    zoom: 0.55;
    -webkit-print-color-adjust: exact;
  }
  header {
    position: relative !important;
  }
  main {
    overflow-x: hidden;
  }
  .pagetop,
  #widthdebug,
  #gdpr {
    display: none !important;
  }
}
/* ============================================================================

　_header

=============================================================================== */
main {
  padding-top: 100px;
}
@media screen and (max-width: 999px) {
  main {
    padding-top: 70px;
  }
}
@media screen and (max-width: 743px) {
  main {
    padding-top: 60px;
  }
}

header {
  position: fixed;
  top: 0rem;
  left: 0rem;
  width: 100%;
  height: 100px;
  z-index: 12;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
@media screen and (max-width: 999px) {
  header {
    height: 70px;
  }
}
@media screen and (max-width: 743px) {
  header {
    height: 60px;
    overflow: hidden;
  }
}
header .container {
  width: 1200px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
@media screen and (max-width: 1280px) {
  header .container {
    width: 95%;
  }
}
@media screen and (max-width: 743px) {
  header .container {
    width: 100%;
  }
}
header .container h1 {
  width: 200px;
  margin-right: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (max-width: 999px) {
  header .container h1 {
    width: 120px;
    margin-right: 1rem;
  }
}
@media screen and (max-width: 743px) {
  header .container h1 {
    width: 150px;
    margin-left: 1rem;
    margin-right: 0rem;
  }
}
header nav {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header nav ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
}
@media screen and (max-width: 743px) {
  header nav ul {
    display: none;
  }
}
header nav ul li {
  width: 100%;
  position: relative;
}
header nav ul li::before {
  content: "";
  width: 1px;
  height: 40%;
  background-color: #e5e5e5;
  position: absolute;
  top: 30%;
  left: 0rem;
}
header nav ul li a {
  height: 100%;
  font-size: 1.6rem;
  color: #333;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
}
@media screen and (max-width: 1100px) {
  header nav ul li a {
    font-size: 1.3rem;
  }
}
header .nav_contact {
  width: 180px;
}
@media screen and (max-width: 999px) {
  header .nav_contact {
    width: 125px;
  }
}
@media screen and (max-width: 743px) {
  header .nav_contact {
    width: 107px;
  }
}
header .nav_top {
  width: 40px;
}
@media screen and (max-width: 999px) {
  header .nav_top {
    width: 28px;
  }
}
@media screen and (max-width: 743px) {
  header .nav_top {
    width: 40px;
  }
}
header .sp_menu_open {
  width: 50px;
  height: 60px;
  position: relative;
  font-size: 0rem;
}
header .sp_menu_open.active::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 45%;
}
header .sp_menu_open.active::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 45%;
}
header .sp_menu_open.active p::after {
  display: none;
}
header .sp_menu_open::before {
  content: "";
  width: 50%;
  height: 2px;
  background-color: #333;
  position: absolute;
  top: 30%;
  left: 25%;
  -webkit-transition: 0.2s var(--easeOutQuad);
  transition: 0.2s var(--easeOutQuad);
}
header .sp_menu_open::after {
  content: "";
  width: 50%;
  height: 2px;
  background-color: #333;
  position: absolute;
  top: 47%;
  left: 25%;
  -webkit-transition: 0.2s var(--easeOutQuad);
  transition: 0.2s var(--easeOutQuad);
}
header .sp_menu_open p {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rem;
  left: 0rem;
}
header .sp_menu_open p::after {
  content: "";
  width: 50%;
  height: 2px;
  background-color: #333;
  position: absolute;
  top: 65%;
  left: 25%;
}

#sp_menu {
  position: fixed;
  top: 60px;
  left: 0rem;
  width: 100%;
  height: calc(100% - 60px);
  z-index: 13;
  background-color: #fff;
  display: none;
}
@media screen and (min-width: 744px) {
  #sp_menu {
    display: none !important;
  }
}
#sp_menu.active {
  display: block;
  -webkit-animation: spMenuAnime 0.3s var(--easeOutQuad) 0s forwards;
          animation: spMenuAnime 0.3s var(--easeOutQuad) 0s forwards;
}
@-webkit-keyframes spMenuAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
@keyframes spMenuAnime {
  0% {
    opacity: 0;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
  }
}
#sp_menu nav ul li {
  border-bottom: 1px solid #ccc;
}
#sp_menu nav ul li a {
  display: block;
  font-size: 1.8rem;
  padding: 1.5rem 2rem;
  text-decoration: none;
}

/* ============================================================================

　_footer

=============================================================================== */
footer {
  font-size: 1.8rem;
  border-top: #cccccc 4px solid;
  color: #555;
}

footer .container {
  padding-top: 0.8em;
  padding-bottom: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1200px;
  margin: 0 auto 0;
}
@media screen and (max-width: 1280px) {
  footer .container {
    width: 95%;
  }
}
@media screen and (max-width: 743px) {
  footer .container {
    width: 92%;
    display: block;
  }
}

footer .copyright {
  padding: 15px;
  background-color: #CA0033;
  text-align: center;
  color: #fff;
}
@media screen and (max-width: 743px) {
  footer .copyright {
    font-size: 1.3rem;
  }
}

footer .mark {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
}
@media screen and (max-width: 743px) {
  footer .mark {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-bottom: 1rem;
  }
}
footer .mark img {
  width: auto;
}
@media screen and (max-width: 743px) {
  footer .mark img {
    height: 50px;
    width: auto;
  }
}

footer .txt {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: 1.6rem;
  line-height: 120%;
}
footer .txt a {
  text-decoration: none;
}
@media screen and (max-width: 743px) {
  footer .txt {
    font-size: 1.4rem;
    margin-bottom: 2rem;
  }
}

footer .footer-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}
@media screen and (max-width: 743px) {
  footer .footer-logo {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}