@layer base {
  :root {
    --main-width: 1200px;
    --navigation-width: 890px;
  }

  ::-webkit-scrollbar {
    background: #f5f5f5;
  }

  ::-webkit-scrollbar-thumb {
    background: #999;
    -webkit-border-radius: 4px;
    border-radius: 4px;
  }

  .header {
    border-bottom: none;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .header .inner .link.logo {
    color: #222;
    flex-direction: column;
    gap: 0 12px;
    max-width: fit-content;
    font-size: 17px;
    font-weight: 900;
    transition: opacity .3s;
    display: flex;
  }

  .header .inner .link.logo .powered-by {
    align-items: center;
    gap: 4px;
    display: flex;
  }

  .header .inner .link.logo .powered-by small {
    color: #1e293b;
    font-size: 9px;
    font-weight: 500;
  }

  .header .inner .link.logo .powered-by img {
    aspect-ratio: 154 / 20;
    width: 109px;
  }

  .header .inner .link.logo:hover {
    opacity: .8;
  }

  .header .inner .block-btn .btn {
    display: none;
  }

  @media (min-width: 420px) {
    .header .inner {
      align-items: center;
      width: 100%;
      padding-right: 40px;
    }

    .header .inner .block-btn .btn {
      color: #fff;
      background: linear-gradient(90deg, #ea7500 0%, #e97306 7.14%, #e8700d 14.29%, #e66e11 21.43%, #e56b15 28.57%, #e46918 35.71%, #e3661b 42.86%, #e2641e 50%, #e06120 57.14%, #df5f22 64.29%, #de5c24 71.43%, #dd5a26 78.57%, #db5727 85.71%, #da5529 92.86%, #d9522a 100%);
      -webkit-border-radius: 4px;
      border-radius: 4px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      min-width: 124px;
      padding: 8px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.5;
      text-decoration: none;
      transition: opacity .3s;
      display: flex;
    }

    .header .inner .block-btn .btn:before {
      content: "";
      background: url("../image/icon-calc.svg") center / contain no-repeat;
      width: 18px;
      height: 18px;
      display: block;
    }

    .header .inner .block-btn .btn:hover {
      opacity: .8;
    }
  }

  @media (min-width: 890px) {
    .header {
      padding-left: 0;
      padding-right: 0;
    }

    .header .inner {
      gap: 22px;
      padding-left: 24px;
    }

    .header .inner .link.logo {
      align-items: center;
      font-size: 24px;
    }

    .header .inner .link.logo .powered-by {
      gap: 4px;
    }

    .header .inner .link.logo .powered-by small {
      font-size: 12px;
    }

    .header .inner .link.logo .powered-by img {
      width: 154px;
    }

    .header .information {
      flex-grow: 1;
      gap: 0;
      padding: 0;
      display: flex;
    }

    .header .information .block-tel .text {
      display: none;
    }

    .header .information .tel {
      color: var(--deco1-color);
      gap: 6px;
      font-size: 38px;
      font-weight: 700;
    }

    .header .information .tel:before {
      content: "";
      background: url("../image/icon-phone.svg") center / contain no-repeat;
      width: 28px;
      height: 28px;
      margin-top: 4px;
      display: block;
    }

    .header .information .tel:hover {
      color: var(--deco1-color);
      opacity: .8;
    }

    .header .information .tel:hover:before {
      color: var(--deco1-color);
    }

    .header .inner {
      align-items: center;
      width: 100%;
      padding-right: 0;
    }

    .header .inner .block-btn .btn {
      -webkit-border-radius: 0;
      border-radius: 0;
      flex-direction: column;
      gap: 10px;
      width: 144px;
      height: 92px;
      padding: 16px;
      font-size: 14px;
    }

    .header .inner .block-btn .btn:before {
      width: 22px;
      height: 22px;
    }

    .header .inner .block-btn .btn:hover {
      opacity: .8;
    }

    .header .list .link {
      font-size: 16px;
      font-weight: 500;
    }

    .header .list .link:hover {
      font-weight: 700;
    }

    .header .list .sep {
      background-color: #d9d9d9;
      height: 50px;
    }

    .header .list .sep:first-child {
      display: none;
    }

    .header .list .sep:last-child {
      display: none;
    }

    .header .list .item .menu {
      width: auto;
      left: 40px;
      right: 40px;
    }

    .header .list .item .menu .inner {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .header .list .item .menu .inner .block-link {
      white-space: nowrap;
    }
  }

  @media (min-width: 1120px) {
    .header .information .block-tel .text {
      background: var(--deco1-color);
      color: #fff;
      -webkit-border-radius: 6px;
      border-radius: 6px;
      margin-right: 8px;
      padding: 4px 6px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.2;
      display: block;
      position: relative;
    }

    .header .information .block-tel .text:after {
      content: "";
      border-style: solid;
      border-top-width: 4px;
      border-top-color: rgba(0, 0, 0, 0);
      border-bottom-width: 4px;
      border-bottom-color: rgba(0, 0, 0, 0);
      border-left: 8px solid var(--deco1-color);
      border-right: 0;
      width: 0;
      height: 0;
      display: block;
      position: absolute;
      top: 50%;
      right: -8px;
      transform: translateY(-50%);
    }
  }

  @media (min-width: 1340px) {
    .header .inner .link.logo {
      flex-direction: row;
    }
  }

  .contact-cards {
    background: #fff;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    padding: 28px 24px;
    display: flex;
    box-shadow: 0 0 30px rgba(0, 0, 0, .25);
  }

  @media (min-width: 890px) {
    .contact-cards {
      grid-template-columns: 1fr 1fr;
      gap: 40px 31px;
      max-width: none;
      padding: 28px 24px;
      display: grid;
    }
  }

  @media (min-width: 1100px) {
    .contact-cards {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  .contact-card {
    flex-direction: column;
    align-items: center;
    gap: 20px;
    display: flex;
  }

  @media (min-width: 890px) {
    .contact-card {
      min-width: 0;
    }

    .contact-card:first-child {
      grid-column: 1 / -1;
    }
  }

  @media (min-width: 1100px) {
    .contact-card:first-child {
      grid-column: auto;
    }
  }

  .contact-card-title {
    letter-spacing: .084em;
    color: #000;
    text-align: center;
    white-space: nowrap;
    border-bottom: 1px solid #b8b8b8;
    width: 100%;
    padding-bottom: 20px;
    font-family: Noto Sans JP, sans-serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.4;
  }

  @media (min-width: 890px) {
    .contact-card-title {
      font-size: 18px;
    }
  }

  .contact-card-body {
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
    display: flex;
  }

  .contact-phone {
    justify-content: center;
    align-items: center;
    gap: 8px;
    display: flex;
  }

  .contact-phone-icon {
    width: 32px;
    height: 32px;
  }

  @media (min-width: 890px) {
    .contact-phone-icon {
      width: 26px;
      height: 26px;
    }
  }

  .contact-phone-number {
    color: #e32828;
    font-family: Noto Sans JP, sans-serif;
    font-size: max(34px, min(1.09vw + 30.09px, 44px));
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
  }

  @media (min-width: 890px) {
    .contact-phone-number {
      pointer-events: none;
    }
  }

  .contact-phone-hours {
    color: #000;
    text-align: center;
    font-family: Noto Sans JP, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
  }

  @media (min-width: 890px) {
    .contact-phone-hours {
      font-size: 12px;
    }
  }

  .contact-card-desc {
    color: #000;
    text-align: center;
    font-family: Noto Sans JP, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
  }

  @media (min-width: 890px) {
    .contact-card-desc {
      font-size: 12px;
    }
  }

  .contact-card-btn {
    color: #fff;
    background: #ea7500;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 54px;
    padding: 20px 24px;
    font-family: Noto Sans JP, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: opacity .3s;
    display: flex;
  }

  .contact-card-btn:hover {
    opacity: .85;
  }

  .contact-card-btn img {
    flex-shrink: 0;
  }

  .navigation .contents .block .list .group .list-inner {
    padding-left: var(--p-lg);
  }

  @media (max-width: 767px) {
    .navigation .contents {
      padding-bottom: 100px;
    }
  }

  .hamburger-menu {
    right: 12px;
  }

  .menu-open :where(.hamburger-menu) .item {
    background-color: #fff;
  }

  @media (min-width: 890px) {
    .hamburger-menu {
      display: none;
    }

    .menu-open {
      overflow: auto !important;
    }

    .menu-open .navigation {
      display: none;
    }
  }

  .footer {
    gap: 40px;
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .footer .information {
    padding-bottom: 0;
  }

  .footer .information .logo .link {
    color: #222;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    max-width: fit-content;
    font-size: 24px;
    font-weight: 900;
    transition: opacity .3s;
    display: flex;
  }

  .footer .information .logo .powered-by {
    align-items: center;
    gap: 4px;
    display: flex;
  }

  .footer .information .logo .powered-by small {
    color: #1e293b;
    font-size: 12px;
    font-weight: 500;
  }

  .footer .information .logo .powered-by img {
    aspect-ratio: 154 / 20;
    width: 154px;
  }

  .footer .information .logo .link:hover {
    opacity: .8;
  }

  .footer .list {
    padding: 0 var(--content-spacing);
    border: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 22px;
    display: flex;
  }

  .footer .list .block {
    border-bottom: 1px solid #cbd5e1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    display: flex;
  }

  .footer .list .block .heading {
    color: var(--deco2-color);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
  }

  .footer .list .block .heading:hover {
    color: var(--main-color);
  }

  .footer .list .block .list {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 20px;
    display: flex;
  }

  .footer .list .block .list .block-link {
    color: var(--deco2-color);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
  }

  .footer .list .block .list .block-link:hover {
    color: var(--main-color);
  }

  .footer .bottom {
    justify-content: center;
    gap: 24px;
    display: flex;
  }

  .footer .bottom .privacypolicy {
    text-align: center;
    font-size: var(--text-xs);
    color: #1e293b;
    padding-block: var(--p-md);
  }

  .footer .bottom .privacypolicy .link {
    color: #1e293b;
    text-decoration: none;
  }

  .footer .copyright, .footer .copyright .link {
    color: #1e293b;
  }

  @media (min-width: 768px) {
    .footer {
      gap: 40px 60px;
      padding-top: 96px;
      padding-bottom: 96px;
      display: flex;
    }

    .footer .information .logo {
      width: auto;
      height: auto;
    }

    .footer .information .logo .link {
      align-items: flex-start;
      margin-bottom: 0;
    }

    .footer .list {
      width: 100%;
      max-width: unset;
      grid-template-columns: repeat(3, 1fr);
      align-items: flex-start;
      padding: 0;
      display: grid;
    }

    .footer .list .block {
      border-bottom: none;
      border-right: 1px solid #cbd5e1;
      justify-content: flex-start;
      align-items: flex-start;
      width: auto;
      height: 100%;
    }

    .footer .bottom {
      justify-content: flex-start;
    }
  }

  @media (min-width: 980px) {
    .footer {
      grid-template-columns: max-content 1fr;
      display: grid;
    }
  }

  body {
    padding-bottom: 80px;
  }

  .sp-float-nav {
    z-index: 100001;
    background: #0645b8;
    align-items: stretch;
    gap: 8px;
    height: 80px;
    padding: 12px;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .sp-float-nav__phone {
    background: #fff;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    flex: 0 0 232px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 20px 0;
    text-decoration: none;
    transition: opacity .3s;
    display: flex;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  }

  .sp-float-nav__phone-number {
    color: #e32828;
    white-space: nowrap;
    font-family: Noto Sans JP, sans-serif;
    font-size: 27.535px;
    font-weight: 700;
    line-height: 1.2;
  }

  .sp-float-nav__assessment {
    color: #fff;
    background: linear-gradient(90deg, #ea7500 0%, #d7522a 100%);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: .9;
    text-decoration: none;
    transition: opacity .3s;
    display: flex;
  }

  .sp-float-nav__phone:hover {
    opacity: .85;
  }

  .sp-float-nav__assessment:hover {
    opacity: .85;
  }

  .sp-float-nav svg {
    flex-shrink: 0;
  }

  @media (max-width: 411px) {
    .sp-float-nav__phone {
      flex: 0 0 min(232px, 56vw);
      padding: 8px 12px;
    }

    .sp-float-nav__phone-number {
      font-size: 20px;
    }

    .sp-float-nav__assessment {
      padding: 8px;
      font-size: 16px;
    }
  }

  @media (min-width: 768px) {
    body {
      padding-bottom: 0;
    }

    .sp-float-nav {
      display: none;
    }
  }
}

.hamburger-menu {
  background-color: #fff;
}

.menu-open .hamburger-menu {
  background-color: unset;
}

@media (min-width: 890px) {
  .header .list .item .text {
    font-size: 16px;
  }

  .header .list .item .menu .heading {
    margin-top: 22px;
  }

  .header .block-link {
    font-weight: 500;
  }
}

.breadcrumb-wrapper {
  padding-inline: unset;
  padding-left: 24px;
}
