:root {
      --main-green: #375b3b;
      --accent-gold: #c2a869;
      --bg-light: #f7f5f2;
      --text-main: #333;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family:"Roboto","Noto Serif JP",sans-serif;
      color: var(--text-main);
      background-color: #fff;
      line-height: 1.7;
      font-size: 15px;
    }

    .sub-header {
      background: url("../images/ryokin.JPG") center/cover no-repeat;
      /* ↑ 適宜、コース写真に差し替えてください */
      padding: 80px 16px 60px;
      text-align: center;
      color: #fff;
      position: relative;
      margin-top: 75px;
    }

    .sub-header::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.35);
    }

    .sub-header .inner {
      position: relative;
      max-width: 960px;
      margin: 0 auto;
    }

    .sub-header h1 {
      font-size:clamp(1.75rem,5vw,2rem);
      line-height:1.3;
      font-weight:600;
      letter-spacing:.05em;
      text-shadow:0 2px 4px rgba(0,0,0,.4);
    }

    .sub-header p {
      margin-top: 1rem;
      font-size: 1rem;
    }

    main {
      max-width: 960px;
      margin: 32px auto 64px;
      padding: 0 16px;
    }

    .breadcrumb {
      font-size: 12px;
      margin-bottom: 20px;
      color: #777;
    }

    .breadcrumb a {
      color: #777;
      text-decoration: none;
    }

    .breadcrumb a:hover {
      text-decoration: underline;
    }


    .lead {
      background: var(--bg-light);
      border-left: 4px solid var(--accent-gold);
      padding: 16px 18px;
      margin-bottom: 28px;
      font-size: 14px;
    }

    .note {
      font-size: 12px;
      color: #777;
      margin-top: 6px;
    }

    .table-wrap {
      overflow-x: auto;
      margin-top: 8px;
      margin-bottom: 20px;
    }

    table.price-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 520px;
      background: #fff;
    }

    table.price-table th,
    table.price-table td {
      border: 1px solid #ddd;
      padding: 10px 8px;
      text-align: center;
      font-size: 14px;
    }

    table.price-table th {
      background: var(--main-green);
      color: #fff;
      font-weight: 600;
      white-space: nowrap;
    }

    table.price-table tr:nth-child(even) td {
      background: #fafafa;
    }

    table.price-table td.align-left {
      text-align: left;
    }

    .btn-area {
      text-align: center;
      margin: 32px 0 16px;
    }

    .btn-primary {
      display: inline-block;
      padding: 12px 32px;
      background: var(--main-green);
      color: #fff;
      text-decoration: none;
      border-radius: 999px;
      font-size: 15px;
      letter-spacing: 0.08em;
    }

    .btn-primary:hover {
      opacity: 0.9;
    }

    .btn-sub {
      display: inline-block;
      margin-top: 8px;
      font-size: 13px;
      color: var(--main-green);
      text-decoration: underline;
    }

    ul {
      padding-left: 1.2em;
    }

    @media (max-width: 640px) {
      .sub-header {
        padding: 64px 12px 48px;
      }

      .sub-header h1 {
        font-size: 20px;
      }

      main {
        margin: 24px auto 40px;
      }

      h2.section-title {
        font-size: 18px;
      }
    }