/*
 * Keep the Rails 8 LP header aligned with the CSS currently served by
 * mastory.jp. The compiled LP stylesheet was copied before the production
 * header responsiveness fixes landed, so these rules restore that delta.
 */
.header {
  height: 62px;
}

.header-content {
  height: 62px;
}

.header-logo {
  position: relative;
}

.header-logo h1 {
  margin: 0;
  color: #333;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
}

.header-logo a {
  display: inline-block;
}

.header-logo__groupTitle {
  display: block;
  margin-top: 2px;
  color: #012543;
  font-size: .7rem;
  line-height: 1.2;
}

.header-logo img {
  width: auto;
  height: 34px;
}

@media (min-width: 769px) {
  .header-content {
    height: 62px;
  }
}

@media (max-width: 768px) {
  .header-logo {
    flex: 0 0 214px;
    width: 214px;
    min-width: 214px;
  }

  .header-logo h1 {
    width: 214px;
  }

  .header-logo a {
    max-width: none;
  }

  .header-logo a img {
    width: 170px;
    height: 25px;
    max-width: none;
    max-height: none;
  }

  .header-logo > img {
    width: auto;
    height: 23px;
    max-width: none;
    max-height: none;
    margin-top: 2px;
    padding-left: 3px !important;
  }

  .header-logo__groupTitle {
    font-size: .5rem;
    white-space: nowrap;
  }

  .header-tel {
    right: 58px;
  }

  .header-tel img {
    width: 34px;
  }
}

@media (max-width: 360px) {
  .header-content {
    padding-right: 8px;
    padding-left: 8px;
  }

  .header-logo {
    flex-basis: 190px;
    width: 190px;
    min-width: 190px;
  }

  .header-logo h1 {
    width: 190px;
  }

  .header-logo a img {
    width: 150px;
    height: 22px;
  }

  .header-logo > img {
    height: 20px;
  }

  .header-logo__groupTitle {
    font-size: .45rem;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  .header-content {
    padding-right: 1%;
    padding-left: 1%;
  }

  .header-logo {
    flex: 0 0 325px;
    width: 325px;
    min-width: 325px;
  }

  .header-logo__groupTitle {
    white-space: nowrap;
  }

  .header-content > .p-lp01-consultation1.pc-only {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
}

@media (min-width: 769px) and (max-width: 911px) {
  .header-content {
    gap: 8px;
  }

  .header-content > .p-lp01-consultation1.pc-only {
    max-width: 520px;
  }

  .header-content .p-lp01-consultation1 .c-tel {
    justify-content: flex-end;
    gap: 4px;
  }

  .header-content .p-lp01-consultation1 .c-tel__wrapper {
    flex: 1 1 auto;
    min-width: 0;
    margin-right: 0;
  }

  .header-content .p-lp01-consultation1 .c-tel__tel {
    min-width: 0;
    margin-left: 4px;
  }

  .header-content .p-lp01-consultation1 .c-tel__telno {
    font-size: clamp(1.75rem, 2.3vw, 2.2rem);
    white-space: nowrap;
  }

  .header-content .p-lp01-consultation1 .c-tel__telno span {
    font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  }

  .header-content .p-lp01-consultation1 .c-tel__msg-wrapper1 {
    white-space: nowrap;
  }

  .header-content .p-lp01-consultation1 .c-tel__msg {
    font-size: clamp(.72rem, 1vw, 1rem);
  }

  .header-content .p-lp01-consultation1 .c-tel__msg.u-pr-5 {
    padding-right: 2px !important;
  }

  .header-content .p-lp01-consultation1 .c-tel__24 {
    font-size: clamp(.72rem, 1vw, 1rem);
  }

  .header-content .p-lp01-consultation1 .c-tel__24.u-pl-10 {
    padding-left: 2px !important;
  }

  .header-content .p-lp01-consultation1 .c-textbox--red {
    width: 30px;
    font-size: .8rem;
  }

  .header-content .p-lp01-consultation1 .p-lp01-consultation1__contact {
    flex: 0 1 auto;
    min-width: 0;
  }

  .header-content .p-lp01-consultation1 .c-btn--contact {
    padding: 3px 8px;
    font-size: clamp(.9rem, 1.25vw, 1.2rem);
    white-space: nowrap;
  }

  .header-content .p-lp01-consultation1 .c-btn--contact::before {
    margin-right: -4px;
    margin-left: -6px;
    transform: scale(.42);
  }

  .header-content .p-lp01-consultation1 .c-tel__free {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: clamp(.9rem, 1.25vw, 1.2rem);
  }
}

@media (min-width: 769px) and (max-width: 1080px) {
  .header-nav {
    justify-content: flex-end;
  }

  .header-nav li {
    margin-right: clamp(8px, 1.5vw, 20px);
  }

  .header-nav li:last-child {
    margin-right: 0;
  }

  .header-nav li > a {
    font-size: clamp(1rem, 1.45vw, 1.3rem);
    line-height: 1.4;
    white-space: nowrap;
  }
}