.sec_web_price {
  padding: 0 40px 90px;
  background: linear-gradient(100deg, #eef7ff, #fff 56%);

  .wrap {
    margin: 0 auto;
    max-width: 1360px;
    display: grid;
    grid-template-columns: minmax(0, .66fr) minmax(0, 1fr);
    align-items: center;
    gap: 58px;

    @media (max-width: 1100px) { gap: 35px; }
    @media (max-width: 800px) { grid-template-columns: 1fr; gap: 29px; }
  }

  .photo {
    overflow: hidden;
    min-width: 0;
    border-radius: 0 0 12px 12px;

    img { width: 100%; aspect-ratio: .98; object-fit: cover; object-position: 50% center; }
    @media (max-width: 800px) { margin: 0 -28px; border-radius: 0; img { aspect-ratio: 2.2; object-position: 55% 48%; } }
    @media (max-width: 600px) { margin: 0 -18px; img { aspect-ratio: 1.8; } }
  }

  .content { padding-top: 55px; min-width: 0; }
  .kicker { margin-bottom: 6px; }
  h2 { color: #0b2344; font-size: 36px; font-weight: 800; line-height: 1.4em; letter-spacing: -.03em; }
  .intro { margin-top: 8px; max-width: 570px; color: #607995; font-size: 14px; line-height: 1.8em; }

  .panel {
    margin-top: 29px;
    padding: 30px 35px;
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
    gap: 32px;
    border: 1px solid #d2e3f8;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 16px 42px #1a5caf10;

    @media (max-width: 1100px) { padding: 25px; gap: 23px; }
    @media (max-width: 600px) { margin-top: 22px; padding: 23px; grid-template-columns: 1fr; gap: 22px; }
  }

  .amount {
    display: flex;
    flex-direction: column;
    justify-content: center;

    p { color: #173760; font-size: 17px; font-weight: 800; }
    strong { margin-top: 9px; color: #0a2850; font-family: var(--font-en); font-size: 56px; font-weight: 800; line-height: 1.15em; white-space: nowrap; span { font-family: var(--font-jp); font-size: 22px; } }
    @media (max-width: 1100px) { strong { font-size: 44px; } }
    @media (max-width: 600px) { strong { font-size: 48px; } }
  }

  .included {
    padding-left: 28px;
    border-left: 2px solid #589cff;

    h3 { color: #1a3559; font-size: 14px; font-weight: 800; line-height: 1.6em; }
    ul { margin-top: 12px; display: grid; gap: 8px; }
    li { padding-left: 23px; position: relative; color: #58718e; font-size: 13px; line-height: 1.6em; }
    li::before { position: absolute; left: 0; top: 4px; width: 13px; height: 7px; border-left: 2px solid #1674ef; border-bottom: 2px solid #1674ef; content: ""; transform: rotate(-45deg); }
    @media (max-width: 600px) { padding: 19px 0 0; border-top: 2px solid #589cff; border-left: 0; }
  }

  .note { margin-top: 14px; color: #7288a0; font-size: 11px; line-height: 1.8em; }

  @media (max-width: 800px) { padding: 0 28px 69px; .content { padding-top: 0; } }
  @media (max-width: 600px) { padding: 0 18px 56px; h2 { font-size: 28px; } }
}