@charset "utf-8";

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

html & body




















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

html,
body {
  overflow-x: clip;
}

html {
  color: #1c1c1c;
  font-size: 62.5%;
  font-weight: 400;
  font-family:
    "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
}

body img {
  display: block;
  height: auto;
  width: 100%;
}

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

wrap




















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

.wrap {
  position: relative;
  width: 100%;
}

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

header




















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

.header {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 72px;
  transition:
    background-color 0.3s,
    border-bottom 0.3s;
}

.header.is-scrolled {
  background-color: #fff;
  border-bottom: 1px solid #dedede;
}

body.is-drawer-open {
  position: fixed;
  top: var(--drawer-scroll-top, 0);
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  touch-action: none;
}

.header .header__inn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  height: 72px;
  margin: 0 auto;
  padding: 0 16px;
}

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

.header__logo .logoContainer {
  width: 200px;
}

@media (max-width: 480px) {
  .header__logo .logoContainer {
    width: 28vw;
  }
}

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

.header__nav #navigationWrapper {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* - - - - - - - - - - - - - - - - - - - - - - */

.drawerCheckbox,
#drawerOpenBtn,
.drawerOverlay,
.drawerCloseBtn {
  display: none;
}

@media (max-width: 480px) {
  #drawerOpenBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
  }
  #drawerOpenBtn img {
    width: 24px;
  }
  .drawerOverlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }
  .drawerContent {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1001;
    width: clamp(160px, 64vw, 360px);
    height: 100dvh;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;
    transform: translateX(110%);
    transition: transform 0.3s ease-in-out;
  }
  .drawerCloseBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    cursor: pointer;
  }
  .drawerCloseBtn img {
    width: 24px;
  }
  #drawerTrigger:checked ~ .drawerOverlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  #drawerTrigger:checked ~ .drawerContent {
    transform: translateX(0);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.1);
  }
}

.navMenuList {
  display: flex;
}

.navMenuList li a {
  display: block;
  position: relative;
  padding: 0 18px;
  font-size: 1.4rem;
  font-weight: 500;
  text-decoration: none;
  color: #151515;
  transition: 0.3s;
}

.navMenuList li a:hover {
  color: #de511f;
}

.navMenuList li a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 9px;
  height: 9px;
  background: url(../img/common/menu-arrow.svg) no-repeat center / contain;
  transform: translateY(-50%);
}

@media (max-width: 480px) {
  .navMenuList {
    flex-direction: column;
    margin-top: 80px;
    border-top: 1px solid #ddd;
  }
  .navMenuList li {
    width: 100%;
    border-bottom: 1px solid #ddd;
  }
  .navMenuList li a {
    padding: 24px;
  }
}

/* - - - - - - - - - - - - - - - - - - - - - - */

.actionButtons {
  display: flex;
}

.actionButtons li {
  margin-left: 10px;
}

.actionButtons a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 160px;
  height: 40px;
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(270deg, #e5673b 0%, #ae4b28 100%);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.actionButtons a.is-white {
  color: #de511f;
  background: none;
  border: 1px solid #de511f;
}

.actionButtons a:hover {
  opacity: 0.5;
}

@media (max-width: 480px) {
  .actionButtons a {
    height: 44px;
    width: clamp(76px, 22vw, 140px);
    font-size: clamp(10px, 2.8vw, 14px);
  }
}

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

footer




















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

.footer {
  display: block;
  position: relative;
  width: 100%;
  margin-top: 100px;
  padding-top: 100px;
  padding-bottom: 60px;
  background: transparent
    linear-gradient(270deg, #e2e2e2 0%, #f4f4f400 48%, #e0e0e0 100%) 0% 0%
    no-repeat;
}

.footer::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background-color: #ae4b28;
}

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

.footer__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 50px;
  margin: 0 auto;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1),
    rgba(220, 220, 220, 0.15) 50%,
    rgba(255, 255, 255, 1)
  );
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.08);
  transform: skew(-12deg);
}

@media (max-width: 480px) {
  .footer__badge {
    width: 88%;
    height: 48px;
  }
}

.footer__badge .badgeTxt {
  display: block;
  font-size: 1.9rem;
  font-weight: 500;
  text-align: center;
  color: #cc4b1e;
  transform: skew(12deg);
}

@media (max-width: 480px) {
  .footer__badge .badgeTxt {
    font-size: 4vw;
  }
}

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

.footer__ttl {
  width: 560px;
  margin: 40px auto 0;
}

@media (max-width: 480px) {
  .footer__ttl {
    width: 92%;
    margin: 40px auto 0;
  }
}

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

.footer__txt {
  margin-top: 24px;
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
  color: #cc4b1e;
}

@media (max-width: 480px) {
  .footer__txt {
    font-size: 4vw;
  }
}

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

.footer__actionButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto 0;
}

@media (max-width: 480px) {
  .footer__actionButtons {
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 64vw;
    margin: 12vw auto 0;
  }
}

.footer__actionButtons li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 190px;
  height: 48px;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(270deg, #e5673b 0%, #ae4b28 100%);
  border-radius: 4px;
  transition: all 0.3s;
}

.footer__actionButtons li a.is-white {
  width: 190px;
  height: 48px;
  margin-left: 20px;
  font-size: 1.5rem;
  color: #de511f;
  background: #fff;
  border: 1px solid #de511f;
}

.footer__actionButtons li a:hover {
  opacity: 0.5;
}

@media (max-width: 480px) {
  .footer__actionButtons li a {
    width: 64vw;
    height: 12vw;
    font-size: 4vw;
  }
  .footer__actionButtons li a.is-white {
    width: 64vw;
    margin-top: 10px;
    margin-left: 0;
    font-size: 4vw;
  }
}

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

.footer__info {
  display: block;
  margin: 80px auto 0;
}

.footer__info .companyName {
  display: block;
  font-size: 1.4rem;
  text-align: center;
  color: #212121;
}

.footer__info .companyMail {
  display: block;
  padding-top: 12px;
  font-size: 1.4rem;
  text-align: center;
  color: #212121;
}

.footer__info .copyright {
  display: block;
  padding-top: 12px;
  font-size: 1.4rem;
  text-align: center;
  color: #212121;
}

@media (max-width: 480px) {
  .footer__info .companyName,
  .footer__info .companyMail,
  .footer__info .copyright {
    font-size: 1.2rem;
  }
}

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

only



















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

.pc-only {
  display: block;
}

br.pc-only,
a.pc-only,
span.pc-only {
  display: inline;
}

@media (max-width: 480px) {
  .pc-only {
    display: none;
  }
  br.pc-only,
  a.pc-only,
  span.pc-only {
    display: none;
  }
}

.sp-only {
  display: none;
}

br.sp-only,
a.sp-only,
span.sp-only {
  display: none;
}

@media (max-width: 480px) {
  .sp-only {
    display: block;
  }
  br.sp-only,
  a.sp-only,
  span.sp-only {
    display: inline;
  }
}