/* ==================================================
      CSS Variables
    ================================================== */
    :root {
      /* Breakpoints */
      --breakpoint-sm: 639px;
      --breakpoint-md: 767px;
      --breakpoint-lg: 1023px;

      /* Colors */
      --color-base: #ffffff;
      --color-text: #96713F;
      --color-muted: #666666;
      --color-primary: #96713F;
      --color-bg-light: #f6f8fb;
      --color-border: #dbc5a7;
      --color-dark: #111111;

      /* Font */
      --font-family-base:
      YakuHanJPs,
      "Helvetica Neue",
      Arial,
      "Hiragino Kaku Gothic ProN",
      "Hiragino Sans",
      "Noto Sans JP",
      sans-serif;

      --fz10: 0.625rem;
      --fz11: 0.6875rem;
      --fz12: 0.75rem;
      --fz13: 0.8125rem;
      --fz14: 0.875rem;
      --fz15: 0.9375rem;
      --fz16: 1rem;
      --fz17: 1.0625rem;
      --fz18: 1.125rem;
      --fz19: 1.1875rem;
      --fz20: 1.25rem;
      --fz21: 1.3125rem;
      --fz22: 1.375rem;
      --fz23: 1.4375rem;
      --fz24: 1.5rem;
      --fz25: 1.5625rem;
      --fz26: 1.625rem;
      --fz27: 1.6875rem;
      --fz28: 1.75rem;
      --fz29: 1.8125rem;
      --fz30: 1.875rem;
      --fz31: 1.9375rem;
      --fz32: 2rem;
      --fz33: 2.0625rem;
      --fz34: 2.125rem;
      --fz35: 2.1875rem;
      --fz36: 2.25rem;
      --fz37: 2.3125rem;
      --fz38: 2.375rem;
      --fz39: 2.4375rem;
      --fz40: 2.5rem;

      --line-height-base: 1.8;
      --line-height-heading: 1.35;

      /* Layout */
      --container-width: 1080px;
      --container-padding: 20px;

      /* Spacing */
      --space-xs: 8px;
      --space-sm: 12px;
      --space-md: 20px;
      --space-lg: 32px;
      --space-xl: 48px;
      --space-xxl: 72px;

      /* Radius */
      --radius-sm: 8px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --radius-full: 999px;

      /* Shadow */
      --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.08);
      --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.04);

      /* Animation */
      --transition-base: 0.2s ease;
    }

    @media (max-width: 767px) {
      :root {
        --font-size-base: 0.9375rem;
        --font-size-md: 1rem;
        --font-size-lg: 1.25rem;
        --font-size-xl: 1.75rem;
        --font-size-xxl: 2.125rem;

        --container-padding: 16px;

        --space-lg: 28px;
        --space-xl: 40px;
        --space-xxl: 56px;
      }
    }

    /* ==================================================
      Reset CSS
    ================================================== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
    }

    body {
      margin: 0;
      font-family: var(--font-family-base);
      font-size: var(--fz16);
      line-height: 1.8;
      color: var(--color-text);
      background: var(--color-base);
      overflow-wrap: anywhere;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    figure,
    blockquote,
    dl,
    dd {
      margin: 0;
    }

    ul,
    ol {
      margin: 0;
      padding: 0;
    }

    img,
    picture,
    svg,
    video,
    canvas {
      display: block;
      max-width: 100%;
    }

    img {
      height: auto;
    }

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

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    table {
      border-collapse: collapse;
    }

    address {
      font-style: normal;
    }

    :focus-visible {
      outline: 3px solid rgba(85, 85, 85, 0.35);
      outline-offset: 3px;
    }

    /* ==================================================
      Utility Classes
    ================================================== */
    .u-container {
      width: min(
        100% - calc(var(--container-padding) * 2),
        var(--container-width)
      );
      margin-inline: auto;
    }

    .u-text-center {
      text-align: center;
    }

    .u-text-left {
      text-align: left;
    }

    .u-text-muted {
      color: var(--color-muted);
    }

    .u-bg-light {
      background: var(--color-bg-light);
    }

    .u-mt-xs {
      margin-top: var(--space-xs);
    }

    .u-mt-sm {
      margin-top: var(--space-sm);
    }

    .u-mt-md {
      margin-top: var(--space-md);
    }

    .u-mt-lg {
      margin-top: var(--space-lg);
    }

    .u-mt-xl {
      margin-top: var(--space-xl);
    }

    .u-mb-0 {
      margin-bottom: 0;
    }

    .u-hidden-sp {
      display: block;
    }

    .u-hidden-pc {
      display: none;
    }

    @media (max-width: 639px) {
      .u-hidden-sp {
        display: none;
      }

      .u-hidden-pc {
        display: block;
      }
    }

    /* ==================================================
      Components
    ================================================== */
    .c-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 600px;
      padding: 24px 40px;
      border-radius: var(--radius-full);
      background: var(--color-primary);
      color: #ffffff;
      font-weight: 700;
      line-height: 1.4;
      text-align: center;
      transition:
        background var(--transition-base),
        color var(--transition-base),
        transform var(--transition-base),
        box-shadow var(--transition-base);
    }

    .c-button:hover {
      background: var(--color-primary-dark);
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft);
    }

    .c-button--white {
      background: #ffffff;
      color: var(--color-primary);
    }

    .c-button--white:hover {
      background: #f0f4ff;
    }

    .c-section-title {
      font-size: var(--fz20);
      line-height: 1.5;
      letter-spacing: 0.04em;
      padding-bottom: 0.25em;
    }

    .c-section-lead {
      margin-top: var(--space-md);
      color: var(--color-muted);
    }

    /* ==================================================
      First View
    ================================================== */
    .fv {
      position: relative;
      display: grid;
      place-items: center;
      background:#060606;
      color: #ffffff;
    }

    .logo_abc{
      position: absolute;
      top: 2%;
      left: 2%;

      width: 10%;
      max-width: 120px;

      z-index: 10;
    }
    @media (max-width: 639px) {
      .logo_abc{
        top: 1em;
        left: 1em;
        width: 20%;
      }
    }

    .fv__inner {
      width: 100%;
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
    }

    .fv__content {
      max-width: 750px;
      justify-self: end;
    }

    .fv__content img,
    .fv__content picture{
      width: 100%;
    }

    .fv__label {
      display: inline-block;
      padding: 6px 14px;
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: var(--radius-full);
      font-size: var(--font-size-sm);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.08em;
    }

    .fv__title {
      margin-top: var(--space-md);
      font-size: var(--font-size-xxl);
      line-height: var(--line-height-heading);
      letter-spacing: 0.04em;
    }

    .fv__text {
      margin-top: 2em;
      line-height: 1.9;
    }
    @media (max-width: 639px) {

      .fv__text {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5em;
        place-items: center;
        margin-top: 0.5em;
      }
    }

    .fv__actions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm);
      margin-top: var(--space-lg);
    }

    .fv__visual {
    }

    .fv__visual img {
      object-fit: cover;
      max-height: 716px;
    }

    @media (max-width: 639px) {
      .fv {
        min-height: auto;
        padding: 10% 0 0 0;
      }

      .fv::after {
        width: 360px;
      }

      .fv__inner {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
      }

      .fv__content {
        max-width: none;
        text-align: center;
      }

      .fv__actions {
        justify-content: center;
      }

      .fv__visual {
        max-width: 420px;
        margin-inline: auto;
      }
    }

    .fv_note{
      position: absolute;
      right: 1em;
      bottom: 0;
      transform: translate(0, calc(100% + 4px));
      color: #9A8D6F;
      font-size: var(--fz12);
      text-align: right;
      line-height: 1.3;
    }
    @media (max-width: 639px) {
      .fv_note{
        font-size: var(--fz10);
      }
    }

    /* ==================================================
      Main Content
    ================================================== */
    .main {
      padding: 4em 0 0 0;
    }
    @media (max-width: 639px) {
      .main{
        padding-top: 4%;
      }
    }

    .section {
      padding: 2em 0;
    }

    .section__inner {
      display: grid;
      gap: 2em;
      align-items: start;
      max-width: 860px;
    }

    .section__head{
      border-bottom: 2px solid var(--color-primary);
    }

    .section__body {
    }

    .section__body p + p,
    .section__body p + ul,
    .section__body ul + p{
      margin-top: var(--space-sm);
    }

    .section__body dd + dt {
      margin-top: var(--space-sm);
    }

    .section__body dt{
      font-weight: bold;
    }

    .section__body dd{
      padding-top: 0.35em;
      padding-bottom: var(--space-sm);
      border-bottom: 1px solid var(--color-border);
    }

    .section__body p + small{
      display: block;
      margin-top: var(--space-md);
    }

    .section__list {
      display: grid;
      gap: var(--space-sm);
      list-style: none;
    }

    .section__list li {
      position: relative;
      padding-left: 1.4em;
    }

    .section__list li::before {
      content: "";
      position: absolute;
      top: 0.65em;
      left: 0;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--color-primary);
    }

    .section__list.marker-style-ast li::before {
      content: "※";
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
    }

    @media (max-width: 767px) {
      .section {
        padding: var(--space-xl) 0;
      }

      .section__inner {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }

      .section__body {
      }
    }

    .c-section-link{
      display: inline-block;
      margin-top: 1em;
      border-bottom: 1px solid var(--color-primary);
    }

    /* .section.about .section__body p{
      display: grid;
      gap: 3em;
      grid-template-columns: 1.5fr 0.5fr;
    }
    @media (max-width: 639px) {
      .section.about .section__body p{
        gap: 1em;
      }
    }

    .section.about .section__body p .illust{
      min-width: 120px;
    } */

    /* ==================================================
      CTA
    ================================================== */
    .cta {
      margin-top: 3em;
      padding: var(--space-xl) 0;
      background: var(--color-primary);
      color: #ffffff;
      text-align: center;
    }

    .cta__title {
      line-height: var(--line-height-heading);
      letter-spacing: 0.04em;
    }

    .cta__text {
    }

    .cta__button {
      margin-top: 1em;
      font-size: var(--fz32);
    }
    @media (max-width: 639px) {
      .cta__button {
        font-size: var(--fz24);
      }
    }

    /* ==================================================
      Footer
    ================================================== */
    .footer {
      padding: var(--space-lg) 0;
      background: var(--color-dark);
      color: #ffffff;
      text-align: center;
    }

    .footer small {
      color: rgba(255, 255, 255, 0.72);
      font-size: var(--font-size-xs);
    }