:root {
      --green: #3DAA72;
      --green-dark: #2A8055;
      --green-pale: #EBF7F2;
      --green-bg: #F2FAF6;
      --orange: #F08030;
      --text: #1A1A1A;
      --text-mid: #555;
      --text-light: #888;
      --border: #E0E0E0;
      --white: #FFFFFF;
      --off-white: #FAFAF8;
    }

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box
    }

    img {
      max-width: 100%;
      height: auto;
      vertical-align: bottom;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 72px;
    }

    body {
      font-family: 'Noto Sans JP', sans-serif;
      color: var(--text);
      background: var(--white);
      overflow-x: hidden;
      font-weight: 300
    }

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

    /* HEADER */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      background: rgba(255, 255, 255, .97);
      border-bottom: 1px solid var(--border);
      height: 140px;
      display: flex;
      align-items: center;
      padding: 0 40px;
      justify-content: space-between
    }

    .h-logo {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 2px
    }

    .h-logo-img {
      max-height: 80px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }

    .h-logo-icon {
      width: 44px;
      height: 44px;
      background: var(--green);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Noto Serif JP', serif;
      font-size: 24px;
      font-weight: 700;
      color: white;
      letter-spacing: -1px;
      flex-shrink: 0
    }

    .h-logo-text .main {
      font-family: 'Noto Serif JP', serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 3px;
      line-height: 1
    }

    .h-logo-text .sub {
      font-size: 14px;
      color: var(--text-mid);
      letter-spacing: 1px;
      margin-top: 0
    }

    nav {
      display: flex;
      align-items: center;
      gap: 12px
    }

    nav a {
      font-size: 15px;
      color: var(--text-mid);
      letter-spacing: .5px;
      transition: all .2s;
      font-weight: 500;
      padding: 10px 16px;
      border-radius: 4px;
      background: var(--white);
      border: 1px solid var(--border);
    }

    nav a:hover,
    nav a.active {
      color: var(--green);
      border-color: var(--green);
      background: var(--green-pale);
    }

    .h-cta {
      background: var(--green) !important;
      color: white !important;
      padding: 10px 24px !important;
      border-radius: 4px !important;
      border: 1px solid var(--green) !important;
      font-size: 15px !important;
      font-weight: 500 !important;
      letter-spacing: .5px;
      transition: all .2s !important
    }

    .h-cta:hover {
      background: var(--green-dark) !important;
      border-color: var(--green-dark) !important;
    }

    .menu-btn {
      display: none;
      background: transparent;
      border: none;
      cursor: pointer;
      width: 44px;
      height: 44px;
      position: relative;
      z-index: 300;
      margin-left: auto;
    }

    .menu-btn span {
      position: absolute;
      left: 8px;
      right: 8px;
      height: 2px;
      background: var(--text);
      transition: all .3s;
      border-radius: 2px;
    }

    .menu-btn span:nth-child(1) {
      top: 12px;
    }

    .menu-btn span:nth-child(2) {
      top: 21px;
    }

    .menu-btn span:nth-child(3) {
      top: 30px;
    }

    .menu-btn.open span:nth-child(1) {
      top: 21px;
      transform: rotate(45deg);
    }

    .menu-btn.open span:nth-child(2) {
      opacity: 0;
    }

    .menu-btn.open span:nth-child(3) {
      top: 21px;
      transform: rotate(-45deg);
    }

    /* HERO */
    .hero {
      position: relative;
      width: 100%;
      height: 60vh;
      min-height: 480px;
      overflow: hidden;
      margin-top: 72px
    }

    .hero-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to right, rgba(10, 40, 25, .3) 0%, rgba(10, 40, 25, .15) 55%, rgba(10, 40, 25, 0) 100%)
    }

    .hero-copy {
      position: absolute;
      bottom: 80px;
      left: 64px;
      color: white;
      animation: fadeUp .9s ease both
    }

    @keyframes fadeUp {
      from {
        opacity: 0;
        transform: translateY(28px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .hero-copy .en {
      display: block;
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(15px, 1.1vw, 18px);
      font-weight: 300;
      letter-spacing: 6px;
      margin-bottom: 20px;
      opacity: .65;
      text-transform: uppercase
    }

    .hero-copy h1 {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(51px, 5.8vw, 96px);
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: 4px
    }

    /* SECTION GLOBALS */
    .sec {
      padding: 100px 64px
    }

    .sec-sm {
      padding: 72px 64px
    }

    .inner {
      max-width: 1160px;
      margin: 0 auto
    }

    .sec-label {
      font-size: 15px;
      letter-spacing: 4px;
      text-transform: uppercase;
      color: var(--green);
      font-weight: 500;
      margin-bottom: 16px;
      display: flex;
      align-items: center;
      gap: 10px
    }

    .sec-label::before {
      content: '';
      display: inline-block;
      width: 24px;
      height: 1px;
      background: var(--green)
    }

    .sec-heading {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(35px, 3.5vw, 50px);
      font-weight: 700;
      line-height: 1.5;
      letter-spacing: 2px;
      color: var(--text)
    }

    .sec-body {
      font-size: 19px;
      line-height: 2.1;
      color: var(--text-mid);
      font-weight: 300;
      margin-top: 28px;
      max-width: 560px
    }

    .sec-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 17px;
      font-weight: 500;
      color: var(--green);
      letter-spacing: 1px;
      margin-top: 32px;
      border-bottom: 1px solid var(--green);
      padding-bottom: 2px;
      transition: gap .2s
    }

    .sec-link:hover {
      gap: 14px
    }

    .sec-link::after {
      content: '→'
    }

    /* PHOTO GRID */
    .photo-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 48px
    }

    .photo-item {
      aspect-ratio: 4/3;
      overflow: hidden;
      border-radius: 6px;
      background: var(--green-pale)
    }

    .photo-item svg {
      width: 100%;
      height: 100%;
      transition: transform .5s
    }

    .photo-item:hover svg {
      transform: scale(1.04)
    }

    /* INTRO */
    .intro-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-top: 80px
    }

    .intro-photo {
      border-radius: 8px;
      overflow: hidden;
      aspect-ratio: 4/5;
      background: var(--green-pale)
    }

    .intro-photo svg {
      width: 100%;
      height: 100%
    }

    .intro-visual {
      position: relative
    }

    .intro-num {
      position: absolute;
      bottom: -20px;
      right: -20px;
      background: var(--orange);
      color: white;
      padding: 22px 26px;
      border-radius: 8px;
      text-align: center;
      box-shadow: 0 8px 24px rgba(240, 128, 48, .3)
    }

    .intro-num .n {
      font-family: 'Noto Serif JP', serif;
      font-size: 61px;
      font-weight: 700;
      line-height: 1
    }

    .intro-num .u {
      font-size: 15px;
      margin-top: 4px;
      letter-spacing: 1px;
      opacity: .85
    }

    /* PHILOSOPHY */
    .philosophy {
      background: #5D4037;
      color: white;
      padding: 120px 64px;
      position: relative;
      overflow: hidden
    }

    .philosophy::before {
      content: '百笑';
      font-family: 'Noto Serif JP', serif;
      font-size: 354px;
      font-weight: 900;
      color: rgba(255, 255, 255, .04);
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      line-height: 1;
      pointer-events: none;
      letter-spacing: -10px
    }

    .philosophy-inner {
      max-width: 1160px;
      margin: 0 auto
    }

    .philosophy .sec-label {
      color: rgba(255, 255, 255, .5)
    }

    .philosophy .sec-label::before {
      background: rgba(255, 255, 255, .4)
    }

    .philosophy .sec-heading {
      color: white
    }

    .philosophy-body {
      font-size: 19px;
      line-height: 2.2;
      color: rgba(255, 255, 255, .72);
      margin-top: 28px;
      max-width: 620px;
      font-weight: 300
    }

    .philosophy-quote {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(26px, 2.5vw, 45px);
      font-weight: 700;
      line-height: 1.8;
      letter-spacing: 4px;
      color: white;
      border-left: 3px solid var(--green);
      padding-left: 28px;
      margin-top: 56px
    }

    .philosophy-quote em {
      color: var(--green);
      font-style: normal
    }

    /* FEATURES */
    .features-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
      margin-top: 52px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden
    }

    .feat {
      background: white;
      padding: 40px 32px;
      transition: background .2s
    }

    .feat:hover {
      background: var(--green-pale)
    }

    .feat-num {
      font-family: 'Noto Serif JP', serif;
      font-size: 15px;
      letter-spacing: 3px;
      color: var(--green);
      margin-bottom: 16px;
      display: block
    }

    .feat-icon {
      font-size: 41px;
      margin-bottom: 14px;
      display: block
    }

    .feat-title {
      font-family: 'Noto Serif JP', serif;
      font-size: 21px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.5;
      margin-bottom: 12px
    }

    .feat-desc {
      font-size: 17px;
      color: var(--text-mid);
      line-height: 1.9
    }

    /* WORK */
    .work-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      margin-top: 60px;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden
    }

    .work-row+.work-row {
      margin-top: 24px
    }

    .work-photo {
      background: var(--green-pale);
      overflow: hidden
    }

    .work-photo svg {
      width: 100%;
      height: 100%;
      display: block
    }

    .work-text {
      padding: 52px 48px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--off-white)
    }

    .work-row.rev .work-photo {
      order: 2
    }

    .work-row.rev .work-text {
      order: 1;
      background: white
    }

    .work-tag {
      font-size: 15px;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--green);
      font-weight: 500;
      margin-bottom: 16px;
      display: block
    }

    .work-title {
      font-family: 'Noto Serif JP', serif;
      font-size: clamp(26px, 2.2vw, 37px);
      font-weight: 700;
      line-height: 1.4;
      margin-bottom: 20px
    }

    .work-desc {
      font-size: 18px;
      line-height: 2;
      color: var(--text-mid);
      margin-bottom: 24px
    }

    .work-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0
    }

    .work-list li {
      font-size: 18px;
      color: var(--text-mid);
      padding: 10px 0;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 10px
    }

    .work-list li::before {
      content: '—';
      color: var(--green);
      font-weight: 300
    }

    .wage-tag {
      display: inline-block;
      margin-top: 20px;
      background: var(--green-pale);
      color: var(--green);
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 1px;
      padding: 6px 16px;
      border-radius: 50px;
      border: 1px solid rgba(61, 170, 114, .3)
    }

    /* SCHEDULE */
    .schedule-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start
    }

    .tl-item {
      display: grid;
      grid-template-columns: 90px 1fr;
      border-bottom: 1px solid rgba(61, 170, 114, .2)
    }

    .tl-item:first-child {
      border-top: 1px solid rgba(61, 170, 114, .2)
    }

    .tl-time {
      font-family: 'Noto Serif JP', serif;
      font-size: 18px;
      font-weight: 700;
      color: var(--green);
      padding: 16px 0;
      letter-spacing: 1px
    }

    .tl-label {
      padding: 16px 0 16px 20px;
      font-size: 18px;
      color: var(--text);
      border-left: 2px solid var(--green-pale);
      font-weight: 400;
      line-height: 1.5
    }

    .tl-note {
      font-size: 16px;
      color: var(--text-light);
      margin-top: 3px
    }

    .tl-item.brk .tl-time {
      color: var(--orange)
    }

    .tl-item.brk .tl-label {
      background: rgba(240, 128, 48, .06)
    }

    .shuttle-card {
      background: white;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      margin-top: 40px
    }

    .shuttle-head {
      background: var(--green);
      color: white;
      padding: 22px 32px;
      font-family: 'Noto Serif JP', serif;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 1px
    }

    .shuttle-body {
      padding: 0 32px
    }

    .shuttle-stn {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 20px 0;
      border-bottom: 1px solid var(--border)
    }

    .shuttle-stn:last-child {
      border-bottom: none
    }

    .stn-ico {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--green-pale);
      color: var(--green);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0
    }

    .stn-name {
      font-size: 19px;
      font-weight: 500;
      color: var(--text)
    }

    .stn-time {
      font-size: 16px;
      color: var(--text-light);
      margin-top: 2px
    }

    /* GUIDE BANNER */
    .guide-banner {
      position: relative;
      overflow: hidden;
      background: var(--text)
    }

    .guide-banner-bg {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #1B4332 0%, #2D7A50 100%);
      opacity: .97
    }

    .guide-banner-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      max-width: 1160px;
      margin: 0 auto
    }

    .guide-text {
      padding: 100px 80px 100px 64px;
      color: white
    }

    .guide-text .sec-label {
      color: rgba(255, 255, 255, .5)
    }

    .guide-text .sec-label::before {
      background: rgba(255, 255, 255, .4)
    }

    .guide-text .sec-heading {
      color: white
    }

    .guide-text .sec-body {
      color: rgba(255, 255, 255, .72);
      max-width: 100%
    }

    .guide-visual {
      background: var(--green-pale);
      overflow: hidden;
      min-height: 420px
    }

    .guide-visual svg {
      width: 100%;
      height: 100%
    }

    .btn-white {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: white;
      color: var(--green);
      padding: 14px 32px;
      border-radius: 4px;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 1px;
      margin-top: 36px;
      transition: all .2s
    }

    .btn-white:hover {
      background: var(--green-pale)
    }

    .btn-white::after {
      content: '→'
    }

    /* TABLE */
    .ov-table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 48px;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden
    }

    .ov-table tr {
      border-bottom: 1px solid var(--border)
    }

    .ov-table tr:last-child {
      border-bottom: none
    }

    .ov-table th {
      width: 180px;
      padding: 20px 28px;
      background: var(--green-bg);
      font-size: 17px;
      font-weight: 500;
      color: var(--green-dark);
      text-align: left;
      vertical-align: top;
      letter-spacing: .5px
    }

    .ov-table td {
      padding: 20px 28px;
      font-size: 18px;
      color: var(--text-mid);
      line-height: 1.9
    }

    /* APPLY FLOW */
    .flow {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      margin-top: 52px;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden
    }

    .flow-step {
      padding: 36px 24px;
      border-right: 1px solid var(--border);
      text-align: center;
      position: relative;
      background: white;
      transition: background .2s
    }

    .flow-step:last-child {
      border-right: none
    }

    .flow-step:hover {
      background: var(--green-bg)
    }

    .flow-step::after {
      content: '›';
      position: absolute;
      right: -12px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      color: var(--border);
      z-index: 1
    }

    .flow-step:last-child::after {
      display: none
    }

    .flow-num {
      font-family: 'Noto Serif JP', serif;
      font-size: 41px;
      font-weight: 700;
      color: var(--green);
      line-height: 1;
      margin-bottom: 16px;
      display: block
    }

    .flow-title {
      font-size: 18px;
      font-weight: 500;
      color: var(--text);
      margin-bottom: 8px
    }

    .flow-desc {
      font-size: 16px;
      color: var(--text-light);
      line-height: 1.8
    }

    .apply-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      margin-top: 64px;
    }

    /* FOOTER */
    footer {
      background: #5D4037;
      color: rgba(255, 255, 255, .65);
      padding: 72px 64px 40px
    }

    .footer-inner {
      max-width: 1160px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 60px;
      padding-bottom: 56px;
      border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    .f-brand .name {
      font-family: 'Noto Serif JP', serif;
      font-size: 24px;
      font-weight: 700;
      color: white;
      letter-spacing: 3px;
      margin-bottom: 6px
    }

    .f-brand .corp {
      font-size: 15px;
      letter-spacing: 2px;
      color: rgba(255, 255, 255, .4);
      margin-bottom: 18px
    }

    .f-brand p {
      font-size: 17px;
      line-height: 2
    }

    .f-nav h4,
    .f-contact h4 {
      font-size: 15px;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, .45);
      margin-bottom: 20px;
      text-transform: uppercase
    }

    .f-nav ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .f-nav a {
      font-size: 17px;
      color: rgba(255, 255, 255, .6);
      transition: color .2s
    }

    .f-nav a:hover {
      color: white
    }

    .f-contact p {
      font-size: 17px;
      line-height: 2.2
    }

    .footer-bottom {
      max-width: 1160px;
      margin: 28px auto 0;
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .footer-bottom p {
      font-size: 16px;
      color: rgba(255, 255, 255, .3)
    }

    /* REVEAL */
    .reveal {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity .7s ease, transform .7s ease
    }

    .reveal.visible {
      opacity: 1;
      transform: translateY(0)
    }

    /* RESPONSIVE */
    @media(max-width:960px) {
      header {
        padding: 0 20px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 100px;
      }

      .menu-btn {
        display: block;
      }

      nav {
        position: fixed;
        top: 100px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.98);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px;
        padding-top: 40px;
        z-index: 250;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
      }

      nav.open {
        opacity: 1;
        pointer-events: auto;
      }

      nav a {
        width: 80%;
        text-align: center;
        padding: 14px 20px;
        font-size: 17px;
      }

      .h-cta {
        width: 80% !important;
        text-align: center;
        padding: 14px 20px !important;
        font-size: 17px !important;
      }

      .sec,
      .sec-sm,
      .philosophy {
        padding: 64px 24px
      }

      .hero-copy {
        left: 28px;
        bottom: 52px
      }

      .intro-inner,
      .work-row,
      .work-row.rev,
      .schedule-inner,
      .guide-banner-inner,
      .footer-inner {
        grid-template-columns: 1fr
      }

      .work-row.rev .work-photo,
      .work-row.rev .work-text {
        order: 0
      }

      .intro-num {
        position: static;
        margin-top: 20px;
        width: fit-content
      }

      .features-grid {
        grid-template-columns: 1fr 1fr
      }

      .photo-grid {
        grid-template-columns: 1fr 1fr
      }

      .flow {
        grid-template-columns: 1fr 1fr
      }

      .apply-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 48px;
      }

      .guide-text {
        padding: 64px 24px
      }

      .guide-visual {
        min-height: 280px
      }

      .ov-table th {
        width: 110px;
        padding: 16px 12px;
        font-size: 15px;
      }

      .ov-table td {
        padding: 16px 12px;
        font-size: 16px;
      }
    }