@keyframes hero-after-slide {
  from {
    transform: translate(-50%, 0) translateX(-100vw);
  }
  to {
    transform: translate(-50%, 0) translateX(0);
  }
}
@keyframes hero-copy-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@layer page {
  .p-hero__visual {
    position: relative;
    width: 100%;
    min-height: 20rem;
    overflow: hidden;
    background: url("../../../img/bg-header.webp") center/cover no-repeat;
  }
  @media screen and (min-width: 768px) {
    .p-hero__visual {
      min-height: 32.5rem;
    }
  }
  .p-hero__visual::after {
    content: "";
    position: absolute;
    left: calc(50% - 53.3333333333vw);
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 156, 159, 0.85);
    clip-path: polygon(0 0, 100% 0, calc(100% - 22vh) 100%, 0 100%);
    transform: translate(-50%, 0);
    animation: hero-after-slide 0.7s linear forwards;
  }
  @media screen and (min-width: 768px) {
    .p-hero__visual::after {
      left: calc(50% - 58vw);
    }
  }
  .p-hero__copy {
    width: 224px;
    position: absolute;
    z-index: 1;
    text-align: left;
    top: 5rem;
    left: calc(50% - 13.3333333333vw);
    transform: translate(-50%, 0);
    animation: hero-copy-fade 1s linear 0.7s forwards;
    opacity: 0;
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    letter-spacing: 0.06em;
    text-shadow: 2px 2px 0 #004c50;
  }
  @media screen and (min-width: 768px) {
    .p-hero__copy {
      top: 8.125rem;
      left: calc(50% - 20vw);
      width: 346px;
      font-size: 2.5rem;
      letter-spacing: 0.08em;
    }
  }
  .p-hero__inner {
    padding: 2rem 1.25rem 2.5rem;
  }
  @media screen and (min-width: 768px) {
    .p-hero__inner {
      padding: 3rem 1.5rem 3.5rem;
    }
  }
  .p-hero__lead {
    font-size: 0.875rem;
    line-height: 1.9;
    text-align: left;
  }
  @media screen and (min-width: 768px) {
    .p-hero__lead {
      font-size: 1rem;
      text-align: center;
      max-width: 34.25rem;
      margin-inline: auto;
    }
  }
  .p-section {
    padding: 2.5rem 1.25rem;
  }
  @media screen and (min-width: 768px) {
    .p-section {
      padding: 4rem 1.5rem;
    }
  }
  .p-section__ttl {
    margin-bottom: 1.5rem;
    font-weight: 700;
    border-bottom: 2px solid var(--accent);
    font-size: 1.25rem;
    line-height: 1.3;
    padding-bottom: 0.5rem;
  }
  @media screen and (min-width: 768px) {
    .p-section__ttl {
      margin-bottom: 2rem;
      font-size: 2rem;
      padding-bottom: 0.625rem;
    }
  }
  .p-section__inner {
    max-width: 62.5rem;
    margin-inline: auto;
  }
  .p-section__lead {
    font-size: 0.875rem;
    line-height: 1.8;
  }
  @media screen and (min-width: 768px) {
    .p-section__lead {
      font-size: 0.9375rem;
    }
  }
  .p-company-list {
    display: block;
    margin-top: 1.5rem;
    max-width: 50rem;
    margin-inline: auto;
    font-size: 0.875rem;
  }
  @media screen and (min-width: 768px) {
    .p-company-list {
      margin-top: 2rem;
      font-size: 0.9375rem;
    }
  }
  .p-company-list__row {
    display: grid;
    grid-template-columns: 6rem 1fr;
    align-items: stretch;
    border-bottom: 1px solid #c0c0c0;
  }
  @media screen and (min-width: 768px) {
    .p-company-list__row {
      grid-template-columns: 7.5rem 1fr;
      align-items: center;
    }
  }
  .p-company-list__row:first-child {
    border-top: 1px solid #c0c0c0;
  }
  .p-company-list__term {
    display: flex;
    align-items: center;
    background: #555;
    color: #fff;
    font-weight: 600;
    padding: 0.625rem 0.75rem;
  }
  @media screen and (min-width: 768px) {
    .p-company-list__term {
      padding: 0.75rem 1rem;
    }
  }
  .p-company-list__desc {
    background: #fff;
    padding: 0.625rem 0.75rem;
  }
  @media screen and (min-width: 768px) {
    .p-company-list__desc {
      padding: 0.75rem 1rem;
    }
  }
  .p-company-list__desc a {
    color: var(--accent);
  }
  @media (any-hover: hover) {
    .p-company-list__desc a:hover {
      text-decoration: none;
    }
  }
  @media screen and (min-width: 768px) {
    .p-company-list__desc a[href^="tel:"] {
      color: var(--main);
      text-decoration: none;
    }
  }
  @media (any-hover: hover) {
    .p-company-list__desc a[href^="tel:"]:hover {
      color: var(--accent);
    }
  }
  .p-bento {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  @media screen and (min-width: 768px) {
    .p-bento {
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }
  }
  .p-bento__item {
    position: relative;
    padding: 1rem;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    align-items: start;
    text-align: left;
  }
  @media screen and (min-width: 768px) {
    .p-bento__item {
      grid-row: auto;
      grid-template-columns: auto 1fr;
      grid-template-rows: 3rem auto;
      gap: 0 0.625rem;
    }
  }
  .p-bento__item:nth-child(2n+2)::before {
    content: "";
    position: absolute;
    left: calc(-1 * 0.5rem);
    top: 0;
    bottom: 0;
    width: 1px;
    background: #c0c0c0;
    translate: -50% 0;
  }
  @media screen and (min-width: 768px) {
    .p-bento__item:nth-child(2n+2)::before {
      left: calc(-1 * 0.75rem);
    }
  }
  .p-bento__item:nth-child(3)::before {
    content: "";
    position: absolute;
    background: #c0c0c0;
    top: calc(-1 * 0.5rem);
    left: 0;
    right: 0;
    height: 1px;
    translate: 0 -50%;
  }
  @media screen and (min-width: 768px) {
    .p-bento__item:nth-child(3)::before {
      top: 0;
      bottom: 0;
      left: calc(-1 * 0.75rem);
      right: auto;
      width: 1px;
      height: auto;
      translate: -50% 0;
    }
  }
  .p-bento__item:nth-child(4)::after {
    content: "";
    position: absolute;
    top: calc(-1 * 0.5rem);
    left: 0;
    right: 0;
    height: 1px;
    background: #c0c0c0;
    translate: 0 -50%;
  }
  @media screen and (min-width: 768px) {
    .p-bento__item:nth-child(4)::after {
      display: none;
    }
  }
  .p-bento__item .p-bento__icon {
    grid-column: 1/-1;
    grid-row: 1;
    justify-self: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0 auto;
    color: var(--accent);
  }
  @media screen and (min-width: 768px) {
    .p-bento__item .p-bento__icon {
      grid-column: 1;
      grid-row: 1;
      align-self: center;
      margin: 0;
      width: 3rem;
      height: 3rem;
    }
  }
  .p-bento__item .p-bento__icon svg {
    width: 100%;
    height: 100%;
  }
  .p-bento__item .p-bento__ttl {
    align-self: start;
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
  }
  @media screen and (min-width: 768px) {
    .p-bento__item .p-bento__ttl {
      align-self: center;
      grid-column: 2;
      grid-row: 1;
      font-size: 1rem;
      text-align: left;
    }
  }
  .p-bento__item .p-bento__text {
    align-self: start;
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.6;
  }
  @media screen and (min-width: 768px) {
    .p-bento__item .p-bento__text {
      grid-column: 1/-1;
      grid-row: 2;
      margin-top: 0.75rem;
      font-size: 0.875rem;
    }
  }
  .p-store__body {
    display: grid;
    gap: 1.5rem;
  }
  @media screen and (min-width: 768px) {
    .p-store__body {
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
      align-items: start;
    }
  }
  .p-store__visual {
    border-radius: 0.75rem;
    overflow: hidden;
  }
  @media screen and (min-width: 768px) {
    .p-store__visual {
      border-radius: 1rem;
    }
  }
  .p-store__visual img {
    width: 100%;
  }
  .p-store__text {
    margin-bottom: 2rem;
    font-size: 0.875rem;
    line-height: 1.8;
  }
  @media screen and (min-width: 768px) {
    .p-store__text {
      margin-bottom: 3rem;
      font-size: 0.9375rem;
    }
  }
  .p-store__link-wrap {
    margin: 0;
    text-align: center;
  }
  .p-store__link {
    display: inline-flex;
    align-items: center;
    position: relative;
    padding: 0.75rem 1.75rem 0.75rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    background: var(--accent);
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.2s;
  }
  @media screen and (min-width: 768px) {
    .p-store__link {
      font-size: 0.9375rem;
      padding: 0.875rem 1.75rem;
    }
  }
  .p-store__link::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    translate: 0 -50%;
    rotate: 45deg;
    transform-origin: center;
    transition: translate 0.2s;
  }
  @media (any-hover: hover) {
    .p-store__link:hover {
      background: color-mix(in srgb, var(--accent) 65%, black);
    }
    .p-store__link:hover::after {
      translate: 0.25rem -50%;
    }
  }
  .p-section--contact {
    background: color-mix(in srgb, var(--accent) 35%, white);
    padding: 3rem 1.25rem;
  }
  @media screen and (min-width: 768px) {
    .p-section--contact {
      padding: 4.5rem 1.5rem;
    }
  }
  .p-contact-box {
    max-width: 45rem;
    margin-inline: auto;
    text-align: center;
  }
  .p-contact-box__label {
    display: block;
    margin: 0 0 1rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.7);
  }
  @media screen and (min-width: 768px) {
    .p-contact-box__label {
      margin-bottom: 1.25rem;
      font-size: 0.875rem;
    }
  }
  .p-contact-box__ttl {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    border: none;
    padding: 0;
  }
  @media screen and (min-width: 768px) {
    .p-contact-box__ttl {
      font-size: 2rem;
      margin-bottom: 1.25rem;
    }
  }
  .p-contact-box__lead {
    margin: 0 0 2rem;
    font-size: 0.9375rem;
    line-height: 1.8;
  }
  @media screen and (min-width: 768px) {
    .p-contact-box__lead {
      font-size: 1rem;
      margin-bottom: 2.5rem;
    }
  }
  .p-contact-box__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
  }
  @media screen and (min-width: 768px) {
    .p-contact-box__actions {
      gap: 1rem;
    }
  }
  .p-contact-box__actions p {
    margin: 0;
  }
  .p-contact-box__icon {
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5rem;
    flex-shrink: 0;
  }
  .p-contact-box__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16.25rem;
    padding: 0.875rem 1.25rem;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
    background: #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
  }
  @media screen and (min-width: 768px) {
    .p-contact-box__btn {
      min-width: 17.5rem;
      padding: 1rem 1.5rem;
      font-size: 1.125rem;
      border-radius: 0.625rem;
    }
  }
  @media (any-hover: hover) {
    .p-contact-box__btn:hover {
      background: color-mix(in srgb, var(--accent) 65%, black);
      color: #fff;
    }
  }
}