@charset "utf-8";
@layer reset, tokens, base, components, utilities, pages;


@layer tokens {
  :root {
    /* fontsize */
    --text-xs: 0.6rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-lg: clamp(0.9375rem, 0.821rem + 0.4386vw, 1.1719rem);
    --text-xl: clamp(1.1719rem, 1.0262rem + 0.5482vw, 1.4648rem);
    --text-2xl: clamp(1.4648rem, 1.2828rem + 0.6853vw, 1.8311rem);
    --text-3xl: clamp(1.8311rem, 1.6035rem + 0.8566vw, 2.2888rem);
    --text-4xl: clamp(2.2888rem, 2.0044rem + 1.0708vw, 2.861rem);
    --text-5xl: clamp(2.861rem, 2.5055rem + 1.3385vw, 3.5763rem);
    --text-6xl: clamp(3.5763rem, 3.1319rem + 1.6731vw, 4.4703rem);
    --text-7xl: clamp(4.4703rem, 3.9148rem + 2.0914vw, 5.5879rem);

    /* space */
    --spacing-3xs: clamp(0.2344rem, 0.2052rem + 0.1096vw, 0.293rem);
    --spacing-2xs: clamp(0.4688rem, 0.4105rem + 0.2193vw, 0.5859rem);
    --spacing-xs: clamp(0.7031rem, 0.6157rem + 0.3289vw, 0.8789rem);
    --spacing-sm: clamp(0.9375rem, 0.821rem + 0.4386vw, 1.1719rem);
    --spacing-md: clamp(1.4063rem, 1.2315rem + 0.6579vw, 1.7578rem);
    --spacing-lg: clamp(1.875rem, 1.642rem + 0.8772vw, 2.3438rem);
    --spacing-xl: clamp(2.8125rem, 2.463rem + 1.3158vw, 3.5156rem);
    --spacing-2xl: clamp(3.75rem, 3.284rem + 1.7544vw, 4.6875rem);
    --spacing-3xl: clamp(5.625rem, 4.926rem + 2.6316vw, 7.0313rem);
    --spacing-4xl: clamp(7.5rem, 6.568rem + 3.5088vw, 9.375rem);
    --spacing-5xl: clamp(11.25rem, 9.852rem + 5.2632vw, 14.0625rem);
    --spacing-6xl: clamp(15rem, 13.136rem + 7.0175vw, 18.75rem);
    --spacing-7xl: clamp(22.5rem, 19.7039rem + 10.5263vw, 28.125rem);

    /* lineHeight */
    --text-none-line-tight: 1.2;
    --text-xs--line-height: 1.3;
    --text-sm--line-height: 1.5;
    --text-base--line-height: 1.75;
    --text-lg--line-height: 1.5;
    --text-xl--line-height: 1.3;
    --text-2xl--line-height: 1.3;
    --text-3xl--line-height: 1.3;
    --text-4xl--line-height: 1.3;
    --text-5xl--line-height: 1.2;
    --text-6xl--line-height: 1.2;
    --text-7xl--line-height: 1.2;

    /* fontWeights */
    --font-normal: 400;
    --font-medium: 520;
    --font-semibold: 600;
    --font-bold: 700;

    /* colors */
    --color-white-pure: oklch(var(--color-white-pure-oklch));
    --color-white-pure-oklch: 1 0 0;

    --color-white: oklch(var(--color-white-oklch));
    --color-white-oklch: 0.955 0 0;

    --color-black: oklch(var(--color-black-oklch));
    --color-black-oklch: 0.398 0 0;

    --color-teal-lightest: oklch(var(--color-teal-lightest-oklch));
    --color-teal-lightest-oklch: 0.978 0.011 211;

    --color-teal-bright: oklch(var(--color-teal-bright-oklch));
    --color-teal-bright-oklch: 0.495 0.084 204.7;

    --color-slate: oklch(var(--color-slate-oklch));
    --color-slate-oklch: 0.40 0.035 220;

    --color-gray: oklch(var(--color-gray-oklch));
    --color-gray-oklch: 0.515 0 0;

    --color-navy: oklch(var(--color-navy-oklch));
    --color-navy-oklch: 0.323 0.103 255;

    --color-orange: oklch(var(--color-orange-oklch));
    --color-orange-oklch: 0.681 0.156 42.2;

    --color-accent: oklch(var(--color-accent-oklch));
    --color-accent-oklch: 0.614 0.206 25.7;

    --color-line: oklch(var(--color-line-oklch));
    --color-line-oklch: 0.849 0.003 106.4;

    /* width */
    --max-content-width: 80rem;
    --small-content-width: 62.5rem;

    /* rounded */
    --rounded-sm: 8px;
    --rounded-base: 12px;
    --rounded-lg: 16px;
    --rounded-full: calc(infinity * 1px);

    /* z-Index */
    --z-canvas: 0;
    --z-header: 100;
    --z-overlay: 999;

    /* duration */
    --duration-xs: 0.3s;
    --duration: 0.6s;
    --ease-standard: cubic-bezier(0.8, 0, 0.2, 1);
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
    --base-vw: 425;
  }

  body {
    font-family: "Noto Sans JP", sans-serif;
    color: var(--color-slate);
    background-color: var(--color-teal-lightest);
    font-size: var(--text-base);
    line-height: var(--text-sm--line-height);
    font-feature-settings: "palt";
    letter-spacing: .1em;
  }

  a {
    color: inherit;
  }

  @media not (min-width:425px) {
    html {
      font-size: calc(100 / var(--base-vw) * 1 * 16vw);
    }
  }

  @media (min-width: 1920px) {
    html {
      --base-vw: 1920;
      font-size: calc(100 / var(--base-vw) * 1 * 16vw);
    }
  }
}

@layer components {

  /* block */
  .c-section {
    padding-block-start: var(--spacing-4xl);
  }

  .c-section--bottom {
    padding-block-end: var(--spacing-4xl);
  }

  .c-inner {
    box-sizing: content-box;
    max-inline-size: var(--max-content-width);
    margin-inline: auto;
    padding-inline: var(--spacing-sm);
  }

  .c-content {
    margin-block-start: var(--spacing-xl);
  }

  /* text */
  .c-heading {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
    font-weight: var(--font-semibold);
    text-align: center;
    color: var(--color-teal-bright);
  }

  .c-text-line,
  .c-text-line--slash {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-semibold);
    color: var(--color-teal-bright);
    text-align: center;
  }

  .c-text-line::before,
  .c-text-line::after,
  .c-text-line--slash::before,
  .c-text-line--slash::after {
    content: "";
    box-sizing: border-box;
    background-color: var(--color-teal-bright);
    margin-block-start: 0.7em;
  }

  .c-text-line {
    gap: 0.75rem;
  }

  .c-text-line::before,
  .c-text-line::after {
    inline-size: clamp(2.5rem, 0.0146rem + 9.3567vw, 7.5rem);
    block-size: 0.0625rem;
  }

  .c-text-line--slash {
    gap: 0.5rem;
  }

  .c-text-line--slash::before,
  .c-text-line--slash::after {
    inline-size: 1em;
    block-size: 0.08rem;
    transform-origin: center;
  }

  .c-text-line--slash::before {
    transform: rotate(60deg);
  }

  .c-text-line--slash::after {
    transform: rotate(-60deg);
  }

  .c-text-line+.c-heading {
    margin-block-start: var(--spacing-xs);
  }

  .c-text-indent {
    padding-left: 1em;
    text-indent: -1em;
  }

  /* カラム */
  .c-column {
    display: flex;
    gap: var(--_gap);
  }

  .c-column__item {
    flex-basis: calc((100% - var(--_gap) * (var(--_column) - 1)) / var(--_column));
  }

  /* CTA */
  .c-cta_area {
    margin-inline: auto;
    margin-block-start: var(--spacing-2xl);
  }

  .c-cta-btn {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    inline-size: min(100%, 28.75rem);
    margin-inline: auto;
    padding: 0.5rem 0.75rem 0.625rem;
    background-color: var(--color-orange);
    border: 2px solid var(--color-orange);
    border-radius: var(--rounded-full);
    transition: background-color 0.3s cubic-bezier(0.8, 0, 0.2, 1);
  }

  .c-cta-btn--fit {
    max-width: fit-content;
    margin-inline: auto;
  }

  /* p+ :is(.c-cta-btn) {
    margin-top: 0.75rem;
  } */

  .c-cta-btn::before {
    content: "";
  }

  .c-cta-btn__label {
    padding-inline-start: 1rem;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    text-align: center;
    place-content: center;
    color: var(--color-white-pure);
    transition: color 0.3s cubic-bezier(0.8, 0, 0.2, 1);
  }

  /* 矢印 */
  .c-cta-btn__arrow {
    display: inline-flex;
    align-items: center;
    width: 2rem;
    margin-top: 0.125rem;
  }

  .c-cta-btn__arrow svg {
    width: 2rem;
    height: 1rem;
    overflow: visible;
  }

  .arrow-line {
    stroke: var(--color-white-pure);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke 0.3s cubic-bezier(0.8, 0, 0.2, 1);
  }

  .arrow-head {
    stroke: var(--color-white-pure);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.3s cubic-bezier(0.8, 0, 0.2, 1);
  }

  .c-cta-btn:hover .arrow-line {
    animation: arrow-out-in 0.3s cubic-bezier(0.8, 0, 0.2, 1) forwards;
  }

  .c-cta-btn:hover .arrow-head {
    animation: arrow-out-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  @keyframes arrow-out-in {
    0% {
      transform: translateX(0);
      opacity: 1;
    }

    40% {
      transform: translateX(14px);
      opacity: 0;
    }

    41% {
      transform: translateX(-14px);
      opacity: 0;
    }

    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @media (hover: hover) {
    .c-cta-btn:hover {
      background-color: var(--color-white-pure);
    }

    .c-cta-btn:hover .c-cta-btn__label {
      color: var(--color-orange);
    }

    .c-cta-btn:hover .arrow-line,
    .c-cta-btn:hover .arrow-head {
      stroke: var(--color-orange);
    }
  }

  @media (min-width:768px) {
    .c-cta-btn--large {
      inline-size: min(100%, 32.5rem);
    }

    .c-cta-btn--large .c-cta-btn__label {
      font-size: var(--text-xl);
    }
  }
}

@layer utilities {

  /* fontSize */
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--text-3xl--line-height);
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--text-5xl--line-height);
  }

  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--text-6xl--line-height);
  }

  .text-7xl {
    font-size: var(--text-7xl);
    line-height: var(--text-7xl--line-height);
  }

  /* line-height only (単独で調整したい場合) */
  .leading-tight {
    line-height: var(--text-none-line-tight);
  }

  .leading-xs {
    line-height: var(--text-xs--line-height);
  }

  .leading-sm {
    line-height: var(--text-sm--line-height);
  }

  .leading-base {
    line-height: var(--text-base--line-height);
  }

  /* Font Weight */
  .font-normal {
    font-weight: 400;
  }

  .font-medium {
    font-weight: 500;
  }

  .font-semibold {
    font-weight: 600;
  }

  .font-bold {
    font-weight: 700;
  }

  /* color */
  .text-white-pure {
    color: var(--color-white-pure);
  }

  .text-white {
    color: var(--color-white);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-teal-lightest {
    color: var(--color-teal-lightest);
  }

  .text-teal-bright {
    color: var(--color-teal-bright);
  }

  .text-slate {
    color: var(--color-slate);
  }

  .text-gray {
    color: var(--color-gray);
  }

  .text-navy {
    color: var(--color-navy);
  }

  .text-accent {
    color: var(--color-accent);
  }

  .text-line {
    color: var(--color-line);
  }

  /* word-break */
  .wbr {
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  /* position / layout */
  .center {
    text-align: center;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .fit-mx {
    max-inline-size: fit-content;
    margin-inline: auto;
  }

  .block {
    display: block;
  }

  .inline {
    display: inline;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  @media not (min-width:768px) {
    .sp-hidden {
      display: none;
    }
  }

  @media (min-width:768px) {
    .pc-hidden {
      display: none;
    }
  }
}

@layer pages {

  /* =========================
    Layer
  ========================= */
  .lp-container {
    display: flex;
    flex-direction: column;
    min-block-size: 100dvh;
    overflow: clip;
  }

  .lp-main {
    flex: 1;
  }

  /* =========================
    Header
  ========================= */
  .lp-header {
    position: relative;
    z-index: 1;
    background-color: var(--color-white-pure);
  }

  .lp-header__row {
    padding-block: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .lp-header__logo-link {
    display: block;
    inline-size: 5rem;
  }

  .lp-header__content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .lp-header__text {
    font-size: var(--text-xs);
    color: var(--color-black);
    letter-spacing: normal;
  }

  .lp-header__link {
    font-size: var(--text-xs);
    color: var(--color-navy);
    letter-spacing: normal;
    transition: opacity var(--duration-xs);
  }

  @media (hover: hover) {
    .lp-header__link:hover {
      opacity: 0.7;
    }
  }

  /* =========================
    Footer
  ========================= */
  .lp-footer {
    padding-block: 3.5rem;
    background: var(--color-navy);
  }

  .lp-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 5rem 2.5rem;
    max-inline-size: 65.25rem;
  }

  .lp-contact-card {
    inline-size: min(22.5rem, 100%);
    margin-inline: auto;
  }

  .lp-contact-card__title {
    padding-block-end: 0.5rem;
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: 500;
    text-align: center;
    color: var(--color-white);
    border-bottom: 1px solid var(--color-white);
  }

  .lp-contact-card__text {
    margin-block-start: 1.25rem;
    font-size: var(--text-lg);
    line-height: var(--text-xs--line-height);
    text-align: center;
    color: var(--color-white);
  }

  .lp-contact-card__actions {
    margin-block-start: 1.5rem;
    display: flex;
    justify-content: center;
  }

  .lp-contact-card__btn {
    position: relative;
    z-index: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: min(22.5rem, 100%);
    padding: 1rem 0.75rem;
    border-radius: var(--rounded-full);
    border: 0.125rem solid var(--color-white);
    background: var(--color-white);
    color: var(--color-navy);
    font-size: var(--text-lg);
    line-height: var(--text-none-line-tight);
    font-weight: var(--font-semibold);
    text-decoration: none;
    overflow: hidden;
    transition: color var(--duration) var(--ease-standard),
      transform var(--duration) var(--ease-standard);
  }

  .lp-contact-card__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-navy);
    transform: scaleX(0);
    transform-origin: right top;
    transition: transform var(--duration) var(--ease-standard);
    z-index: -1;
  }

  @media (hover: hover) {
    .lp-contact-card__btn:hover {
      color: var(--color-white);
    }

    .lp-contact-card__btn:hover::before {
      transform: scaleX(1);
      transform-origin: left top;
    }
  }

  @media (min-width: 768px) {
    .lp-footer {
      padding-block: 4rem;
    }
  }

  /* =========================
    Mainvisual
  ========================= */

  .lp-main-visual {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-width: 0;
    min-height: 40rem;
    overflow: hidden;
    background: var(--color-teal-lightest);
    color: var(--color-teal-bright);
  }

  .lp-main-visual__picture {
    position: absolute;
    z-index: var(--z-canvas);
    inset: 0;
    top: -11.25rem;
  }

  .lp-main-visual__picture img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: clamp(-20rem, -44.7813rem + 93.2945vw, 0rem) top;
  }

  .lp-main-visual__texture {
    display: none;
  }

  .lp-main-visual__gradient {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
      linear-gradient(to top, oklch(0.91 0.04 185) 33%, oklch(0.91 0.04 185 / 0.88) 58%, oklch(0.91 0.04 185 / 0) 84%);
    pointer-events: none;
  }


  .lp-main-visual__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    inline-size: min(100%, 92.5rem);
    margin-inline: auto;
    padding: 0 var(--spacing-sm) var(--spacing-md);
  }

  .lp-main-visual__copy {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .lp-main-visual__heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
  }

  .lp-main-visual__lead {
    color: var(--color-teal-bright);
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--text-lg--line-height);
  }

  .lp-main-visual__lead .-em {
    text-decoration-color: oklch(var(--color-orange-oklch) / 65%);
    ;
    text-decoration-line: underline;
    text-decoration-thickness: 8px;
    text-underline-offset: -5px;
  }

  .lp-main-visual__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3xs);
    color: var(--color-teal-bright);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    line-height: var(--text-3xl--line-height);
    letter-spacing: 0.08em;
    font-feature-settings: "palt" 1;
  }

  .lp-main-visual__title span {
    display: block;
    max-inline-size: 100%;
    padding: var(--spacing-3xs) var(--spacing-2xs);
    background: var(--color-white-pure);
    overflow-wrap: anywhere;
  }

  .lp-main-visual__description {
    color: var(--color-teal-bright);
    font-size: var(--text-lg);
    font-weight: var(--font-medium);
    line-height: var(--text-sm--line-height);
  }

  .lp-main-visual__description span {
    display: block;
  }

  .lp-main-visual__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xs);
    inline-size: 100%;
  }

  .lp-main-visual__date {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--text-sm--line-height);
    color: var(--color-orange);
  }

  .lp-main-visual__date::before,
  .lp-main-visual__date::after {
    background-color: var(--color-orange);
  }


  @media (min-width: 800px) {
    .lp-main-visual {
      align-items: center;
      min-height: 37.5rem;
    }

    .lp-main-visual__picture img {
      object-position: center;
    }

    .lp-main-visual__texture {
      position: absolute;
      z-index: 1;
      inset: 0;
      display: block;
      inline-size: 100%;
      block-size: 100%;
      object-fit: cover;
      opacity: 0.75;
      mask-image:
        linear-gradient(to right,
          #000 0%,
          #000 25%,
          transparent 65%);
      pointer-events: none;
    }

    .lp-main-visual__gradient {
      background:
        linear-gradient(to top,
          oklch(0.20 0.025 220 / 72%) 0%,
          oklch(0.20 0.025 220 / 0%) 27%),
        linear-gradient(to right,
          oklch(0.91 0.04 185 / 100%) 0%,
          oklch(0.91 0.04 185 / 92%) 28%,
          oklch(0.91 0.04 185 / 0%) 64%);
    }

    .lp-main-visual__content {
      gap: var(--spacing-xl);
      padding: var(--spacing-xl) 0 var(--spacing-xl) var(--spacing-xl);
    }

    .lp-main-visual__copy {
      gap: var(--spacing-md);
    }

    .lp-main-visual__heading {
      gap: var(--spacing-sm);
    }

    .lp-main-visual__lead {
      font-size: var(--text-2xl);
      line-height: var(--text-2xl--line-height);
    }

    .lp-main-visual__title {
      display: block;
      width: fit-content;
      padding: var(--spacing-3xs) var(--spacing-2xs);
      background: var(--color-white-pure);
      font-size: var(--text-4xl);
      line-height: var(--text-5xl--line-height);
    }

    .lp-main-visual__title span {
      display: inline;
      padding: 0;
      background: transparent;
    }

    .lp-main-visual__action {
      max-inline-size: fit-content;
    }
  }

  /* =========================
    なぜ今、ムスリム市場なのか？
  ========================= */
  .lp-about-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 3rem;
    align-items: center;
  }

  .lp-about__visual {
    block-size: 100%;
    aspect-ratio: 4 / 2;
  }

  .lp-about__visual img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .lp-about-lists {
    display: grid;
    gap: 2rem;
  }

  .lp-about-item__title {
    padding-block-end: 0.25rem;
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-medium);
    border-bottom: 1px solid var(--color-teal-bright)
  }

  .lp-about-item__text {
    margin-block-start: 0.75rem;
  }

  @media not (min-width:992px) {
    .lp-about__visual {
      margin-inline: calc(50% - 50dvw);
      inline-size: 100dvw;
      max-inline-size: 100dvw;
    }
  }

  @media (min-width:992px) {
    .lp-about-layout {
      grid-template-columns: 25rem minmax(0, 1fr);
    }

    .lp-about__visual {
      aspect-ratio: auto;
    }
  }

  /* =========================
    ツアー詳細
  ========================= */
  .lp-tour__cover img {
    min-block-size: 240px;
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%;
  }

  .lp-tour-main {
    --curve-height: clamp(40px, 5.15vw, 74px);
    --curve-bleed: clamp(40px, 5.55vw, 80px);

    position: relative;
    background-color: var(--color-teal-bright);
  }

  .lp-tour-main::before {
    position: absolute;
    inset-block-start: calc(var(--curve-height) * -1);
    inset-inline: calc(var(--curve-bleed) * -1);
    block-size: var(--curve-height);
    background: inherit;
    clip-path: ellipse(50% 100% at 50% 100%);
    content: "";
  }

  .lp-tour-inner {
    padding-block-start: var(--spacing-2xl);
    padding-block-end: var(--spacing-4xl);
  }

  .lp-toru-box {
    padding-block: var(--spacing-xl);
    padding-inline: var(--spacing-lg);
    background-color: var(--color-white-pure);
    border-radius: var(--rounded-base);
  }

  .lp-tour__heading {
    margin-block-start: var(--spacing-xs);
    font-size: var(--text-2xl);
    line-height: var(--text-2xl--line-height);
    font-weight: var(--font-semibold);
    text-align: center;
    color: var(--color-teal-bright);
  }

  .lp-tour-facts {
    display: grid;
    grid-template-columns: 1fr;
    inline-size: min(100%, 50rem);
    margin-block-start: var(--spacing-lg);
    margin-inline: auto;
    padding-block: var(--spacing-xs);
    overflow: hidden;
    border-radius: var(--rounded-sm);
    background: var(--color-teal-lightest);
    color: var(--color-teal-bright);
  }

  .lp-tour-facts+p {
    margin-block-start: var(--spacing-2xs);
  }

  .lp-tour-facts__item {
    display: grid;
    place-content: center;
    gap: var(--spacing-3xs);
    min-inline-size: 0;
    padding-inline: var(--spacing-lg);
    text-align: center;
  }

  .lp-tour-facts__item+.lp-tour-facts__item {
    padding-block-start: 1rem;
    margin-block-start: 1rem;
    border-block-start: 1px solid oklch(var(--color-teal-bright-oklch) / 65%);
  }

  .lp-tour-facts__label {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--text-xl--line-height);
    letter-spacing: 0.06em;
  }

  .lp-tour-facts__value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    line-height: var(--text-2xl--line-height);
    letter-spacing: 0.02em;
  }

  .lp-tour-facts__value span {
    font-size: var(--text-xl);
  }

  .lp-toru-description {
    margin-block-start: var(--spacing-lg);
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    text-align: center;
  }

  /* ポイント */
  .lp-tour-pickup {
    max-inline-size: var(--small-content-width);
    margin-inline: auto;
    margin-block-start: var(--spacing-2xl);
  }

  .lp-tour-points {
    block-size: min(100% - 2rem, 34.5rem);
  }

  .lp-tour-points__list {
    margin-block-start: var(--spacing-lg);
  }

  .lp-tour-point {
    display: grid;
    grid-template-columns: 0.875rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    min-height: 0;
  }

  .lp-tour-point__media {
    grid-column: 2;
    grid-row: 1;
    block-size: 100%;
  }

  .lp-tour-point__media img {
    display: block;
    block-size: 100%;
    inline-size: auto;
    object-fit: cover;
    border-radius: var(--rounded-sm);
  }

  .lp-tour-point__timeline {
    position: relative;
    grid-column: 1;
    grid-row: 1 / 3;
    display: flex;
    justify-content: center;
    inline-size: 100%;
  }

  .lp-tour-point__timeline::after {
    position: absolute;
    top: 0.875rem;
    bottom: 0;
    left: 50%;
    inline-size: 0.0625rem;
    background: var(--color-teal-bright);
    content: "";
    transform: translateX(-50%);
  }

  .lp-tour-point__marker {
    position: relative;
    z-index: 1;
    display: block;
    block-size: 1rem;
    inline-size: 1rem;
    aspect-ratio: 1;
    background-color: var(--color-white-pure);
    border: 1px solid var(--color-teal-bright);
    border-radius: 50%;
  }

  .lp-tour-point__content {
    grid-column: 2;
    grid-row: 2;
    block-size: 100%;
    padding-block-start: var(--spacing-md);
    padding-block-end: var(--spacing-lg);
  }

  .lp-tour-point:last-of-type .lp-tour-point__content {
    padding-block-end: 0;
  }

  .lp-tour-point__label {
    margin-block-end: 0.25rem;
    padding-block: 0.125rem 0.1875rem;
    padding-inline: 0.75rem;
    border-radius: var(--rounded-full);
    background: var(--color-teal-bright);
    color: var(--color-white-pure);
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-semibold);
  }

  .lp-tour-point__heading {
    margin-block-start: var(--spacing-2xs);
    color: var(--color-teal-bright);
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-semibold);
  }

  .lp-tour-point__description {
    margin-block: var(--spacing-xs);
  }

  .lp-tour-point__heading br,
  .lp-tour-point__description br {
    display: none;
  }

  @media (min-width: 768px) {
    .lp-tour-facts {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-tour-facts__item+.lp-tour-facts__item {
      padding-block-start: 0;
      margin-block-start: 0;
      border-inline-start: 1px solid oklch(var(--color-teal-bright-oklch) / 65%);
      border-block-start: 0;
    }

    .lp-tour-point {
      grid-template-columns: 1fr 1rem 1fr;
      grid-template-rows: none;
      column-gap: 2.5rem;
    }

    .lp-tour-point__media {
      grid-column: 1;
      grid-row: auto;
      padding-block-end: var(--spacing-xl);
    }

    .lp-tour-point__timeline {
      grid-column: 2;
      grid-row: 1;
    }

    .lp-tour-point__content {
      grid-column: 3;
      grid-row: auto;
      width: min(25rem, 100%);
      padding-block: 0;
    }

    .lp-tour-point__heading br,
    .lp-tour-point__description br {
      display: inline;
    }

    .lp-tour-point--reverse .lp-tour-point__content {
      grid-column: 1;
      grid-row: 1;
      justify-self: end;
    }

    .lp-tour-point--reverse .lp-tour-point__media {
      grid-column: 3;
    }

    .lp-tour-point--reverse .lp-tour-point__media img {
      border-radius: var(--rounded-sm);
    }

    .lp-tour-point:last-child .lp-tour-point__media {
      padding-block-end: 0;
    }
  }

  /* スケジュール */
  .lp-tour-schedule {
    margin-block-start: var(--spacing-2xl);
  }

  .lp-schedule-table-frame {
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--rounded-base);
    background: var(--color-white-pure);
  }

  .lp-schedule-table {
    inline-size: 100%;
  }

  .lp-schedule-table__date-column {
    inline-size: 17%;
  }

  .lp-schedule-table__transport-column {
    inline-size: 12%;
  }

  .lp-schedule-table__details-column {
    inline-size: 71%;
  }

  .lp-schedule-table thead {
    background: var(--color-teal-bright);
    color: var(--color-white-pure);
  }

  .lp-schedule-table thead th {
    padding: var(--spacing-xs);
    font-size: var(--text-lg);
    line-height: var(--text-lg--line-height);
    font-weight: var(--font-semibold);
    text-align: center;
  }

  .lp-schedule-table tbody th,
  .lp-schedule-table tbody td {
    padding: var(--spacing-xs) var(--spacing-sm);
    vertical-align: top;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .lp-schedule-table tbody tr+tr>* {
    border-block-start: 1px solid var(--color-line);
  }

  .lp-schedule-table__date {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    line-height: var(--text-lg--line-height);
  }

  .lp-schedule-table__date time {
    display: block;
  }

  .lp-schedule-table__city {
    display: block;
    margin-block-start: var(--spacing-3xs);
    color: var(--color-teal-bright);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--text-base--line-height);
  }

  .lp-schedule-table__transport {
    text-align: center;
  }

  .lp-schedule-table__transport-tag {
    display: inline-block;
    padding: var(--spacing-3xs) var(--spacing-2xs);
    border-radius: var(--rounded-sm);
    background: var(--color-teal-lightest);
    color: var(--color-teal-bright);
    font-weight: var(--font-medium);
  }

  .lp-schedule-table__details {
    min-width: 0;
  }

  .lp-schedule-table__content {
    display: grid;
    gap: var(--spacing-3xs);
  }

  .lp-schedule-table__highlight {
    color: var(--color-teal-bright);
    font-weight: var(--font-bold);
  }

  .lp-schedule-table__list {
    display: grid;
    gap: var(--spacing-3xs);
    padding-inline-start: var(--spacing-2xs);
  }

  .lp-schedule-table__list li {
    padding-left: 0.5em;
    text-indent: -0.5em;
  }

  .lp-schedule-table__meals {
    margin-block-start: var(--spacing-xs);
    color: var(--color-gray);
    font-size: var(--text-sm);
    text-align: right;
  }

  .schedule-notes {
    display: grid;
    gap: var(--spacing-3xs);
    margin-block-start: var(--spacing-xs);
    color: var(--color-gray);
    font-size: var(--text-sm);
  }

  /* フライト */
  .lp-recommended-flights {
    margin-block-start: var(--spacing-2xl);
  }

  .lp-recommended-flights__title {
    font-size: var(--text-xl);
    line-height: var(--text-xl--line-height);
    font-weight: var(--font-semibold);
    color: var(--color-teal-bright);
    text-align: center;
  }

  .lp-recommended-flights__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
    margin-block-start: var(--spacing-md);
  }

  .lp-flight-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-line);
    border-radius: var(--rounded-base);
    background: var(--color-white-pure);
  }

  .lp-flight-card__header,
  .lp-flight-card__body {
    display: grid;
    grid-template-columns: var(--flight-card-columns);
    column-gap: var(--flight-card-column-gap);
    padding-inline: var(--spacing-sm);
  }

  .lp-flight-card__header {
    padding-block: var(--spacing-xs);
    background: var(--color-teal-bright);
    color: var(--color-white-pure);
  }

  .lp-flight-card__header span {
    padding: 0;
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    line-height: var(--text-lg--line-height);
    text-align: start;
  }

  .lp-flight-card__header span:first-child {
    grid-column: 2;
  }

  .lp-flight-card__header span:last-child {
    grid-column: 3;
  }

  .lp-flight-card__body {
    align-items: start;
    padding-block: var(--spacing-sm);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    line-height: var(--text-base--line-height);
  }

  .lp-flight-card__route {
    grid-column: 1;
  }

  .lp-flight-card__number {
    grid-column: 2;
  }

  .lp-flight-card__times {
    display: grid;
    grid-column: 3;
    row-gap: var(--spacing-3xs);
  }

  .lp-flight-card__route,
  .lp-flight-card__number,
  .lp-flight-card__times {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .lp-recommended-flights__note {
    margin-block-start: var(--spacing-xs);
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
  }

  @media not (min-width:992px) {
    .lp-schedule-table {
      display: block;
      table-layout: auto;
    }

    .lp-schedule-table colgroup,
    .lp-schedule-table thead {
      display: none;
    }

    .lp-schedule-table tbody {
      display: grid;
    }

    .lp-schedule-table tbody tr {
      display: grid;
      min-width: 0;
      padding: var(--spacing-sm);
    }

    .lp-schedule-table tbody tr+tr {
      border-block-start: 1px solid var(--color-line);
    }

    .lp-schedule-table tbody tr+tr>* {
      border-block-start: 0;
    }

    .lp-schedule-table tbody th,
    .lp-schedule-table tbody td {
      display: block;
      width: auto;
      min-width: 0;
      padding: 0;
    }

    .lp-schedule-table__date {
      padding-block-end: var(--spacing-sm);
      border-bottom: 1px solid var(--color-teal-bright);
    }

    .lp-schedule-table__transport,
    .lp-schedule-table__details {
      margin-block-start: var(--spacing-md);
    }

    .lp-schedule-table__transport {
      text-align: left;
    }

    .lp-schedule-table__transport::before,
    .lp-schedule-table__details::before {
      display: block;
      margin-block-end: var(--spacing-2xs);
      color: var(--color-gray);
      content: attr(data-label);
      font-size: var(--text-base);
      font-weight: var(--font-semibold);
      line-height: var(--text-sm--line-height);
    }

    .lp-schedule-table__transport--empty {
      display: none !important;
    }

    .lp-schedule-table__meals {
      text-align: left;
    }

    .lp-recommended-flights {
      margin-block-start: var(--spacing-2xl);
    }

    .lp-recommended-flights__grid {
      grid-template-columns: 1fr;
    }

    .lp-flight-card__header {
      display: none;
    }

    .lp-flight-card__body {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--spacing-sm);
      padding: var(--spacing-sm);
      font-size: var(--text-base);
    }

    .lp-flight-card__route::before,
    .lp-flight-card__number::before,
    .lp-flight-card__times::before {
      display: block;
      margin-bottom: var(--spacing-3xs);
      color: var(--color-gray);
      content: attr(data-label);
      font-size: var(--text-sm);
      font-weight: var(--font-semibold);
      line-height: var(--text-sm--line-height);
    }

    .lp-flight-card__times {
      grid-column: 1 / -1;
      padding-top: var(--spacing-sm);
      border-top: 1px solid var(--color-line);
    }
  }

  /* =========================
    HISが視察旅行で選ばれる理由
  ========================= */
  .inspection-strengths {
    padding: var(--spacing-lg) var(--spacing-sm);
    background: var(--color-teal-lightest);
  }

  .inspection-strengths__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }

  .strength-card {
    min-width: 0;
    overflow: hidden;
    border-radius: var(--rounded-sm);
    background: var(--color-white-pure);
  }

  .strength-card__figure {
    display: grid;
    grid-template-rows: auto 1fr;
    block-size: 100%;
  }

  .strength-card__image {
    position: relative;
    overflow: hidden;
  }

  .strength-card__image::after {
    position: absolute;
    inset: 0;
    background: oklch(var(--color-white-pure-oklch) / 4%);
    content: "";
    pointer-events: none;
  }

  .strength-card__image img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .strength-card__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    text-align: center;
  }

  .strength-card__title {
    color: var(--color-teal-bright);
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--text-xl--line-height);
  }

  .strength-card__note {
    margin-block-start: var(--spacing-3xs);
    color: var(--color-gray);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    line-height: var(--text-sm--line-height);
  }

  @media (min-width: 768px) {
    .inspection-strengths {
      padding: var(--spacing-lg);
    }

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

    .strength-card:last-child {
      grid-column: 1 / -1;
      width: calc((100% - var(--spacing-lg)) / 2);
      justify-self: center;
    }

    .strength-card__title br {
      display: initial;
    }
  }


  @media (min-width: 992px) {
    .inspection-strengths__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .strength-card:last-child {
      grid-column: auto;
      width: auto;
      justify-self: stretch;
    }
  }

  /* =========================
    お問い合わせ
  ========================= */
  .lp-interval {
    padding-block-start: var(--spacing-4xl);
  }

  .lp-interval img {
    inline-size: 100%;
    max-block-size: 26.25rem;
    min-block-size: 15rem;
    object-fit: cover;
  }

  .lp-contact {
    margin-block-start: -4rem;
  }

  .lp-contact-box {
    position: relative;
    padding: 3rem 2rem;
    background-color: var(--color-white-pure);
    border-radius: var(--rounded-base);
  }

  .lp-contact-hsforms {
    max-inline-size: 64rem;
    margin-inline: auto;
    margin-block-start: 3rem;
  }
}