@layer reset, base, theme, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd,
  ul,
  ol {
    margin: 0;
  }

  ul,
  ol {
    padding: 0;
    list-style: none;
  }

  img,
  picture,
  svg,
  iframe {
    display: block;
    max-inline-size: 100%;
  }

  img {
    block-size: auto;
  }

  table {
    border-collapse: collapse;
    inline-size: 100%;
  }
}

@layer theme {
  :root {
    --color-brand: #2abab0;
    --color-brand-dark: #1f928a;
    --color-brand-subtle: #e9f8f7;
    --color-bg-page: #f4f5f7;
    --color-bg-surface: #ffffff;
    --color-bg-muted: #f8f9fa;
    --color-text-primary: #333333;
    --color-text-body: #555555;
    --color-text-heading: #555555;
    --color-text-muted: #6e6e6e;
    --color-text-inverse: #ffffff;
    --color-accent-red: #d91e36;
    --color-accent-pink: #c74b82;
    --color-accent-navy: #000080;
    --color-border: #dce1e5;
    --color-focus: #005fcc;

    --font-sans: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

    --radius-sm: 4px;
    --radius-md: 6px;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
    --container-max: 68rem;
  }
}

@layer base {
  html {
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: 1.8;
    color: var(--color-text-body);
    background-color: var(--color-bg-page);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  body {
    min-block-size: 100dvh;
    display: flex;
    flex-direction: column;
    font-size: 1.0625rem;
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  p + p {
    margin-block-start: 1.25rem;
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--color-text-primary);
    line-height: 1.4;
    text-wrap: balance;
  }

  a {
    color: var(--color-brand-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    transition: color 0.15s ease, background-color 0.15s ease;
  }

  a:hover {
    color: var(--color-text-primary);
  }

  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
}

@layer components {
  /* Skip Link */
  .skip-link {
    position: absolute;
    inset-block-start: 0.5rem;
    inset-inline-start: 0.5rem;
    z-index: 1000;
    padding-block: 0.625rem;
    padding-inline: 1rem;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-weight: 700;
    border: 2px solid var(--color-brand);
    border-radius: var(--radius-sm);
    text-decoration: none;
  }

  /* Header & Navigation */
  .site-header {
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  .header-inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-block: 1.25rem 0.75rem;
    padding-inline: 1rem;
    display: flex;
    justify-content: center;
    align-items: safe center;
  }

  .site-logo-link {
    display: inline-block;
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    border-radius: var(--radius-sm);
  }

  .site-logo-link:focus-visible {
    outline-color: var(--color-text-inverse);
  }

  .site-logo-image {
    inline-size: min(100%, 300px);
    block-size: auto;
  }

  .site-nav {
    border-block-start: 1px solid rgba(255, 255, 255, 0.2);
  }

  .nav-list {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-inline: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    flex-wrap: balance;
    justify-content: center;
    align-items: safe center;
    gap: 0.25rem;
  }

  .nav-item {
    flex: 0 1 auto;
  }

  .nav-link {
    display: inline-flex;
    align-items: safe center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-block: 0.5rem;
    padding-inline: 1.25rem;
    color: var(--color-text-inverse);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-sm);
    position: relative;
  }

  .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.16);
    color: var(--color-text-inverse);
  }

  .nav-link[aria-current="page"] {
    background-color: rgba(255, 255, 255, 0.22);
  }

  .nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    inset-inline: 0.75rem;
    inset-block-end: 0.25rem;
    block-size: 2px;
    background-color: var(--color-text-inverse);
    border-radius: 1px;
  }

  .nav-link:focus-visible {
    outline-color: var(--color-text-inverse);
  }

  /* Main Container */
  .site-main {
    flex: 1 0 auto;
    inline-size: 100%;
    max-inline-size: var(--container-max);
    margin-inline: auto;
    padding-block: clamp(1.25rem, 3vw, 2.5rem);
    padding-inline: clamp(0.75rem, 2.5vw, 1.5rem);
  }

  .content-card {
    background-color: var(--color-bg-surface);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    padding-block: clamp(1.5rem, 4vw, 3rem);
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }

  /* Breadcrumb */
  .breadcrumb {
    margin-block-end: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
  }

  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: safe center;
    gap: 0.5rem;
  }

  .breadcrumb-item:not(:last-child)::after {
    content: "›";
    margin-inline-start: 0.5rem;
    color: var(--color-text-muted);
  }

  .breadcrumb-link {
    color: var(--color-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: safe center;
    min-block-size: 1.75rem;
  }

  .breadcrumb-link:hover {
    color: var(--color-brand-dark);
    text-decoration: underline;
  }

  /* Headings */
  .page-title {
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: 1.75rem;
    padding-block-end: 0.625rem;
    border-block-end: 2px solid var(--color-border);
  }

  .section-heading {
    font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
    font-weight: 700;
    color: var(--color-text-heading);
    border-block-start: 1px solid var(--color-brand);
    border-block-end: 1px solid var(--color-brand);
    border-inline-start: 7px solid var(--color-brand);
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    margin-block: 2rem 1.25rem;
    background-color: var(--color-bg-surface);
  }

  .section-block:first-child > .section-heading:first-child {
    margin-block-start: 0;
  }

  .major-heading {
    font-size: clamp(1.3125rem, 1.15rem + 0.6vw, 1.5rem);
    font-weight: 700;
    color: var(--color-text-primary);
    background-color: var(--color-bg-muted);
    border-inline-start: 5px solid var(--color-brand);
    padding-block: 0.875rem;
    padding-inline: 1.25rem;
    margin-block: 2.75rem 1.5rem;
  }

  /* Hero Image */
  .hero-figure {
    margin-block-end: 2rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .hero-image {
    inline-size: 100%;
    aspect-ratio: 1600 / 1068;
    object-fit: cover;
  }

  /* Grid Layouts */
  .grid-2col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 2rem;
    margin-block: 1.75rem;
    align-items: start;
  }

  .grid-3col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1.25rem;
    margin-block: 1.75rem;
  }

  /* Photo Figures */
  .photo-card {
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--color-bg-muted);
  }

  .photo-card img {
    inline-size: 100%;
    block-size: auto;
  }

  .photo-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* Access Route Steps */
  .access-step {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 1.75rem;
    align-items: start;
    padding-block: 1.5rem;
  }

  .access-step:not(:last-child) {
    border-block-end: 1px dashed var(--color-border);
  }

  .access-step .section-heading {
    margin-block-start: 0;
  }

  /* Pricing Cards (Eventspace & Coworking) */
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1.5rem;
    margin-block: 1.25rem;
  }

  .pricing-box {
    background-color: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding-block: 1.25rem;
    padding-inline: 1.5rem;
  }

  .pricing-title {
    font-weight: 700;
    font-size: 1.125rem;
    margin-block-end: 0.5rem;
    color: var(--color-text-primary);
  }

  .pricing-title-weekend {
    color: var(--color-accent-pink);
  }

  .price-lead {
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--color-text-primary);
  }

  .price-tax-note {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--color-text-muted);
  }

  /* Notice & Alert Text */
  .notice-important {
    color: var(--color-accent-red);
    font-weight: 700;
  }

  .notice-info {
    color: var(--color-accent-navy);
    margin-block: 1rem;
  }

  .footnote-text {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-block-start: 2rem;
  }

  /* 404 Not Found Page */
  .not-found-section {
    display: flex;
    flex-direction: column;
    align-items: safe center;
    text-align: center;
    gap: 1.5rem;
    padding-block: 1rem 2rem;
  }

  .not-found-image {
    inline-size: min(100%, 36rem);
    aspect-ratio: 1024 / 602;
    border-radius: var(--radius-sm);
  }

  .not-found-message {
    font-size: 1.125rem;
    color: var(--color-text-primary);
  }

  .btn-back-home {
    display: inline-flex;
    align-items: safe center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-block: 0.625rem;
    padding-inline: 1.75rem;
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--radius-sm);
  }

  .btn-back-home:hover {
    background-color: var(--color-brand-dark);
    color: var(--color-text-inverse);
  }

  /* Feature Lists */
  .item-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  .item-list-title {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-block-end: 0.5rem;
  }

  /* Embedded Maps & Forms */
  .map-embed-wrapper {
    margin-block: 1.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--color-border);
    aspect-ratio: 16 / 9;
    min-block-size: 18rem;
  }

  .map-embed-wrapper iframe {
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  .form-embed-wrapper {
    margin-block-start: 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-muted);
  }

  .form-embed-wrapper iframe {
    inline-size: 100%;
    min-block-size: 46rem;
    border: 0;
  }

  /* Company Info Table */
  .info-table {
    margin-block-start: 1.25rem;
    border: 1px solid var(--color-border);
  }

  .info-table tr:not(:last-child) {
    border-block-end: 1px solid var(--color-border);
  }

  .info-table th,
  .info-table td {
    padding-block: 0.875rem;
    padding-inline: 1.125rem;
    text-align: start;
    vertical-align: top;
  }

  .info-table th {
    background-color: var(--color-bg-muted);
    color: var(--color-text-primary);
    font-weight: 700;
    inline-size: 30%;
    min-inline-size: 8.5rem;
    border-inline-end: 1px solid var(--color-border);
  }

  @media (max-width: 36rem) {
    .info-table th,
    .info-table td {
      display: block;
      inline-size: 100%;
    }

    .info-table th {
      border-inline-end: 0;
      border-block-end: 1px solid var(--color-border);
      padding-block: 0.625rem;
    }
  }

  /* Footer */
  .site-footer {
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    margin-block-start: auto;
    padding-block: 2rem 1.75rem;
    padding-inline: 1rem;
  }

  .footer-inner {
    max-inline-size: var(--container-max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: safe center;
    gap: 1rem;
    text-align: center;
  }

  .footer-logo-image {
    inline-size: min(100%, 240px);
    block-size: auto;
  }

  .footer-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .footer-nav-link {
    display: inline-flex;
    align-items: safe center;
    min-block-size: 2.25rem;
    padding-inline: 0.75rem;
    color: var(--color-text-inverse);
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: var(--radius-sm);
  }

  .footer-nav-link:hover {
    text-decoration: underline;
    color: var(--color-text-inverse);
  }

  .footer-nav-link:focus-visible {
    outline-color: var(--color-text-inverse);
  }

  .copyright {
    font-size: 0.8125rem;
    opacity: 0.95;
  }
}

@layer utilities {
  .visually-hidden:where(:not(:focus-within, :active)) {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .text-large {
    font-size: 1.1875rem;
  }
}