:root {
      --blue: #0087db;
      --blue-dark: #27539a;
      --teal: #00afaa;
      --green: #008e44;
      --pink: #c35c9e;
      --soft-blue: #e9f7ff;
      --soft-teal: #e8f7f5;
      --soft-green: #eef8ef;
      --soft-pink: #fbf0f7;
      --ink: #222;
      --muted: #5d6b74;
      --line: #dbe9ee;
      --paper: #fff;
      --bg: #f7fbfc;
      --shadow: 0 18px 45px rgba(0, 86, 125, .12);
    }

    body {
      margin: 0;
      color: var(--ink);
      font-family: "Noto Sans JP", sans-serif;
      font-size: 15px;
      line-height: 1.9;
      background: var(--paper);
    }

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

    a {
      color: inherit;
      text-decoration: none;
    }

    .container {
      width: min(1220px, calc(100% - 36px));
      margin: 0 auto;
    }

    .container,
    .hero-copy,
    .hero-lead,
    .feature-body,
    .feature-nav,
    .hero-points,
    .check-list li {
      min-width: 0;
    }


    .hero {
      position: relative;
      min-height: 560px;
      display: grid;
      align-items: center;
      overflow: hidden;
      isolation: isolate;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .84) 42%, rgba(255, 255, 255, .12) 78%),
        url("https://www.kose-ent-clinic.com/images/feature/hero.jpg") center / cover no-repeat;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: auto 0 0 0;
      height: 130px;
      background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
      z-index: -1;
    }

    .hero-copy {
      max-width: 680px;
      padding: 86px 0 110px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 18px;
      color: var(--teal);
      font-family: Roboto, "Noto Sans JP", sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .eyebrow::before {
      content: "";
      width: 36px;
      height: 2px;
      background: var(--teal);
    }

    h1 {
      margin: 0;
      color: var(--blue-dark);
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.25;
      letter-spacing: 0;
    }

    .hero-lead {
      max-width: 620px;
      margin: 24px 0 30px;
      font-size: 18px;
      font-weight: 500;
      color: #314852;
    }

    .hero-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      width: 100%;
      max-width: 670px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .hero-points li {
      min-height: 56px;
      padding: 14px 16px 14px;
      background: rgba(0, 135, 219, .8);
      border: 1px solid rgba(0, 135, 219, .16);
      border-radius: 8px;
      box-shadow: 0 10px 25px rgba(0, 135, 219, .08);
      line-height: 1.4;
      color: #ffffff;
      font-weight: 500;
      text-align: center;
    }

    .hero-points span {
      display: block;
      color: var(--teal);
      font-family: Roboto, sans-serif;
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
    }

    .nav-band {
      position: relative;
      z-index: 2;
      margin: -48px auto 0;
    }

    .feature-nav {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 0;
      padding: 10px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .feature-nav a {
      display: grid;
      gap: 4px;
      min-height: 74px;
      place-items: center;
      padding: 10px 8px;
      color: var(--blue-dark);
      text-align: center;
      border-right: 1px dotted #c7dde6;
    }

    .feature-nav a:last-child {
      border-right: 0;
    }

    .feature-nav b {
      color: var(--teal);
      font-family: Roboto, sans-serif;
      font-size: 20px;
      line-height: 1;
    }

    .feature-nav span {
      font-size: 15px;
      font-weight: 700;
      line-height: 1.45;
    }

    .intro {
      padding: 74px 0 44px;
      text-align: center;
    }

    .section-title {
      margin: 0 auto 22px;
      color: var(--blue-dark);
      font-size: clamp(25px, 3.4vw, 38px);
      line-height: 1.45;
      letter-spacing: 0;
    }

    .section-title span {
      display: inline-flex;
      position: relative;
      padding: 22px 52px;
    }

    .section-title span::before,
    .section-title span::after {
      content: "";
      position: absolute;
      width: 28px;
      height: 28px;
    }

    .section-title span::before {
      top: 0;
      left: 0;
      border-top: 1px solid var(--blue);
      border-left: 1px solid var(--blue);
    }

    .section-title span::after {
      right: 0;
      bottom: 0;
      border-right: 1px solid var(--blue);
      border-bottom: 1px solid var(--blue);
    }

    .intro p {
      max-width: 790px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 17px;
      font-weight: 500;
    }

    .features {
      padding-bottom: 74px;
    }

    .feature {
      display: grid;
      grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
      gap: clamp(26px, 5vw, 58px);
      align-items: center;
      padding: 70px 0;
      border-top: 1px solid var(--line);
    }

    .feature:nth-child(even) {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    }

    .feature:nth-child(even) .feature-media {
      order: 2;
    }

    .feature-media {
      position: relative;
      border-radius: 2px;
    }

    .feature-media::before {
      content: "";
      position: absolute;
      inset: 18px -18px -18px 18px;
      background: var(--soft-teal);
      border-radius: 2px;
      z-index: -1;
    }

    .feature-media.pink::before {
      background: var(--soft-pink);
    }

    .feature-media.blue::before {
      background: var(--soft-blue);
    }

    .feature-media.green::before {
      background: var(--soft-green);
    }
    .feature-media.map::before {
      background: #ffffff;
    }

    .photo {
      width: 100%;
      /*box-shadow: var(--shadow);*/
    }

    .photo.tall {

    }

    .feature-no {
      display: inline-grid;
      grid-template-columns: 54px auto;
      align-items: center;
      gap: 14px;
      margin-bottom: 18px;
      color: var(--teal);
      font-family: Roboto, "Noto Sans JP", sans-serif;
      font-weight: 700;
      letter-spacing: .06em;
    }

    .feature-no b {
      display: grid;
      width: 54px;
      height: 54px;
      place-items: center;
      color: #fff;
      font-size: 22px;
      background: linear-gradient(135deg, var(--teal), var(--blue));
      border-radius: 50%;
    }

    .feature-no span {
      color: var(--blue);
      font-size: 13px;
      text-transform: uppercase;
    }

    .feature h2 {
      margin: 0 0 22px;
      color: var(--blue-dark);
      font-size: clamp(24px, 3vw, 34px);
      line-height: 1.2;
      letter-spacing: 0;
    }

    .feature h2 small {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 15px;
      font-weight: 500;
    }

    .feature p {
      margin: 0 0 22px;
      color: #354b55;
    }

    .check-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      position: relative;
      padding: 15px 18px 15px 48px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(39, 83, 154, .06);
    }

    .check-list li::before {
      content: "";
      position: absolute;
      top: 18px;
      left: 18px;
      width: 18px;
      height: 18px;
      background: url("https://www.kose-ent-clinic.com/images/icon/check-circle.svg") center / contain no-repeat;
    }

    .check-list strong {
      color: var(--blue);
    }

    .mini-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin: 26px 0 0;
    }

    .mini-card {
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(39, 83, 154, .06);
    }

    .mini-card img {
      width: 100%;
      aspect-ratio: 16 / 11;
      object-fit: cover;
    }

    .mini-card p {
      margin: 0;
      padding: 11px 12px 13px;
      color: var(--blue-dark);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.45;
    }

    .note-box {
      margin-top: 24px;
      padding: 22px 24px;
      background: var(--soft-blue);
      border-left: 5px solid var(--blue);
      border-radius: 8px;
    }

    .note-box p {
      margin: 0;
    }

    .note-box a {
      color: var(--blue);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .wide-band {
      padding: 58px 0;
      background:
        linear-gradient(90deg, rgba(0, 135, 219, .86) 0%, rgba(0, 175, 170, .82) 100%),
        url("https://www.kose-ent-clinic.com/images/feature/hero.jpg") center / cover no-repeat;
      color: #fff;
    }


    .wide-band h2 {
      margin: 0 0 12px;
      font-size: clamp(24px, 3vw, 34px);
      letter-spacing: 0;
      text-align: start;
    }

    .wide-band p {
      max-width: 690px;
      margin: 0;
      color: rgba(255, 255, 255, .94);
    }

    .cta-stack {
      display: grid;
      gap: 10px;
      min-width: 230px;
      flex-direction: column;
      margin-top: 30px;
    }

    .cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 10px 24px;
      color: var(--blue-dark);
      font-weight: 700;
      background: #fff;
      border-radius: 999px;
    }

    .cta.outline {
      color: #fff;
      background: transparent;
      border: 2px solid rgba(255, 255, 255, .88);
    }

    .d-none {
      display: block;
    }
    @media (max-width: 960px) {
      .header-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 0;
      }
      .d-md-block {
      display: none;
    }
      .header-actions {
        width: 100%;
      }

      .tel,
      .reserve {
        flex: 1;
      }

      .hero {
        min-height: auto;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .88) 62%, rgba(255, 255, 255, .78) 100%),
          url("https://www.kose-ent-clinic.com/images/facilities/gallery_img02.jpg") center / cover no-repeat;
      }

      .hero-copy {
        padding: 58px 0 90px;
      }

      .hero-points {
        grid-template-columns: 1fr;
      }

      .feature-nav {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .feature-nav a:nth-child(3) {
        border-right: 0;
      }

      .feature-nav a:nth-child(n+4) {
        border-top: 1px dotted #c7dde6;
      }

      .feature,
      .feature:nth-child(even) {
        grid-template-columns: 1fr;
      }

      .feature:nth-child(even) .feature-media {
        order: 0;
      }

    }

    @media (max-width: 620px) {
      .container {
        width: calc(100vw - 56px);
        max-width: 1120px;
      }

      body {
        font-size: 14px;
        line-height: 1.75;
      }

      .logo img {
        width: min(300px, 78vw);
      }

      .header-actions {
        flex-direction: column;
        width: 100%;
      }

      .tel,
      .reserve {
        flex: none;
        width: 100%;
        max-width: 100%;
        font-size: 17px;
      }

      .hero-copy {
        padding: 42px 0 76px;
        max-width: 100%;
      }

      .hero-lead,
      .intro p {
        font-size: 15px;
        max-width: 100%;
        overflow-wrap: anywhere;
      }

      .hero-points,
      .feature-nav,
      .section-title,
      .intro p {
        width: 100%;
      }

      .feature-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .feature-nav span,
      .hero-points li,
      .check-list li {
        overflow-wrap: anywhere;
      }

      .feature-nav a {
        border-right: 0;
      }

      .feature-nav a:nth-child(odd) {
        border-right: 1px dotted #c7dde6;
      }

      .feature-nav a:nth-child(n+3) {
        border-top: 1px dotted #c7dde6;
      }

      .section-title span {
        padding: 16px 28px;
      }

      .intro {
        padding-top: 58px;
      }

      .feature {
        padding: 48px 0;
      }

      .feature-media::before {
        inset: 12px -8px -12px 8px;
      }

      .mini-grid {
        grid-template-columns: 1fr;
      }

      .check-list li {
        padding: 14px 15px 14px 42px;
      }

      .check-list li::before {
        left: 15px;
      }

      .cta-stack {
        min-width: 0;
      }
    }