@charset "UTF-8";

:root {
  interpolate-size: allow-keywords;
  --color-text: #000;
  --color-gray: #4C4C4C;
  --color-gold: #DC9B46;
  --color-beige: #F9F6EE;
  --color-brown: #8E6C3F;
  --font-gothic: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
  --font-mincho: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
  --radius-item: 10px;
  --radius-button: 10rem;
  --header-height: 60px;

  @media screen and (min-width: 1025px) {
    --header-height: 90px;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  color: var(--color-text);
  background: #fff;
  font-family: var(--font-gothic);
  line-height: 1.8;
  font-size: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s;

  &:hover {
    opacity: 0.7;
  }
}

h1,
h2,
h3,
h4,
h5,
p,
li {
  text-wrap: auto;

  @media screen and (max-width: 767px) {
    word-break: auto-phrase;
    word-break: break-all;
    overflow-wrap: break-word;
    text-wrap: auto;
  }
}

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.5;
}


p {
  line-height: 1.8;
}

ul {
  line-height: 1.8;
  margin: 0;
  padding: 0;

  li {
    list-style: none;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

strong {
  font-weight: 600;
}

sub {
  line-height: 1;
  vertical-align: baseline;
}

.yoff-header {
  background: var(--color-gold);
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-height);
  padding: 1em 0;

  .u-inner {
    justify-content: space-between;
    flex-direction: row;
    display: flex;
    gap: 1em;
    align-items: center;
  }

  .nav {
    display: flex;
    align-items: center;
    gap: 1em;

    @media screen and (min-width: 768px) {
      gap: 0.5em;
    }
  }

  .global_nav {
    @media screen and (max-width: 767px) {
      background: var(--color-text);
      position: fixed;
      top: var(--header-height);
      width: 100%;
      left: 0;
      right: 0;
      margin: auto;
      padding: 1em;
      opacity: 0;
      visibility: hidden;
      transform: translateY(0);
      pointer-events: none;
      transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }

    &.is-open {
      @media screen and (max-width: 767px) {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }
    }

    ul {
      display: flex;

      @media screen and (max-width: 767px) {
        flex-wrap: wrap;
        font-size: 1em;
      }
    }

    li {
      @media screen and (min-width: 768px) {
        position: relative;
        border-right: 1px solid #fff;

        &:last-child {
          border-right: none;
        }
      }
    }

    a {
      display: block;
      color: #fff;
      line-height: 1;
      font-size: 1em;

      @media screen and (max-width: 767px) {
        padding: 1em;
      }

      @media screen and (min-width: 768px) {
        padding: 0 1em;
      }

      @media screen and (min-width: 1025px) {
        padding: 0 1.5em;
      }
    }
  }

  .menu {
    @media screen and (min-width: 768px) {
      display: none;
    }

    @media screen and (max-width: 767px) {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      height: 100%;
      gap: 0.5em;
      width: fit-content;
      flex-direction: column;
    }

    span {
      @media screen and (max-width: 767px) {
        font-size: 0.8em;
        text-align: center;
        line-height: 1;
      }
    }

    img {
      @media screen and (max-width: 767px) {
        width: 1.4em;
      }
    }
  }

  .c-button {
    a {
      background: var(--color-text);
      max-width: 180px;
      padding: 0.7em 1.5em;
      font-size: 0.8em;

      @media screen and (min-width: 768px) {
        padding: 0.7em 2.5em;
        font-size: 0.9em;
      }

      @media screen and (min-width: 1025px) {
        max-width: 240px;
        padding: 0.7em 3em;
        font-size: 1em;
      }


      &::after {
        right: 0.8em;

        @media screen and (max-width:767px) {
          content: none;
        }
      }
    }
  }
}

.logo {
  a {
    display: block;

    &:hover {
      opacity: 1;
    }

    img {
      max-width: 60px;

      @media screen and (min-width: 768px) {
        max-width: 80px;
      }
    }
  }
}

/*fadein*/
.js-scroll {
  opacity: 0;
  transition: opacity 500ms;

  &.scrolled {
    opacity: 1;
  }
}

.scrolled.fade-in {
  animation: fade-in 0.8s ease-in-out both;
}

.scrolled.fade-in-bottom {
  animation: fade-in-bottom 0.8s ease-in-out both;
}

.scrolled.slide-left {
  animation: slide-in-left 0.8s ease-in-out both;
}

.scrolled.slide-right {
  animation: slide-in-right 0.8s ease-in-out both;
}

@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
    opacity: 0;
  }

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

@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
    opacity: 0;
  }

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

@keyframes fade-in-bottom {
  0% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*yoff*/
details {
  div {
    overflow: hidden;
  }

  summary {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  &::details-content {
    content-visibility: unset;
    display: block grid;

    @media (prefers-reduced-motion: no-preference) {
      transition-duration: 300ms;
      transition-property: grid-template-rows;
    }
  }

  &:not([open])::details-content {
    grid-template-rows: 0fr;
  }

  &[open]::details-content {
    grid-template-rows: 1fr;
  }
}

.l-main {
  margin-top: var(--header-height);

  section {
    scroll-margin-top: var(--header-height);

    &:not(.yoff-mv, .yoff-intro, .yoff-cta__info, .yoff-cta__button) {
      padding: 3em 0;

      @media screen and (min-width: 768px) {
        padding: 5em 0;
      }
    }
  }
}

.u-inner {
  width: 90%;
  max-width: 1200px;
  margin-inline: auto;
}

.u-pc {
  display: none;

  @media screen and (min-width: 768px) {
    display: flex;
  }
}

.u-sp {
  display: flex;

  @media screen and (min-width: 768px) {
    display: none;
  }
}

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

.u-pc-center {
  @media screen and (min-width: 768px) {
    text-align: center;
  }
}

.u-gold {
  color: var(--color-gold);
}

.u-brown {
  color: var(--color-brown);
}

.u-mincho {
  font-family: var(--font-mincho);
  font-weight: 500;
}

.u-list-note {
  width: fit-content;

  li {
    color: var(--color-gray);
    font-size: 0.9em;
    position: relative;
    padding-left: 1.5em;

    &::before {
      position: absolute;
      left: 0;
      content: "※ ";
    }

    &.num01,
    &.num02 {
      padding-left: 2em;
    }

    &.num01 {
      &::before {
        content: "※1 ";
      }
    }

    &.num02 {
      &::before {
        content: "※2 ";
      }
    }
  }
}

.u-list-check {
  margin-bottom: 2em;

  li {
    font-weight: 600;
    font-size: 1.2em;
    background: url("../images/check-ico.svg") no-repeat left top 0.6rem / 1.3rem;
    padding: 0.2em 0 0.2em 1.8em;
    letter-spacing: 0.05rem;

    &:not(:last-child) {
      margin-bottom: 0.5em;
    }

    .num {
      line-height: 1;
      font-size: 1.4em;
    }

    sub {
      font-size: 0.7rem;
    }
  }
}

.u-dl {
  border-radius: var(--radius-item);
  background: #fff;
  overflow: hidden;
  max-width: 600px;
  margin-inline: auto;
  width: 100%;

  dt,
  dd {
    text-align: center;
    line-height: 1.5;
  }

  img {
    text-align: center;
    display: block;
    margin-inline: auto;
  }

  dt {
    text-align: center;
    border-radius: var(--radius-item) var(--radius-item) 0 0;
    padding: 1em 0.5em 0.9em;
    font-size: 1.14em;
    letter-spacing: 0.05rem;

    span {
      font-size: 0.9em;
    }

    &.bg-gray {
      font-weight: 600;
      padding: 0.6em 0.5em 0.5em;
    }
  }

  dd {
    border-radius: 0 0 var(--radius-item) var(--radius-item);
    height: 100%;
    padding: 1.5em;
  }
}

.u-flex {
  display: flex;
  flex-direction: column;
  gap: 1.5em;

  @media screen and (min-width: 768px) {
    flex-direction: row;
    gap: 2em;
  }

  @media screen and (min-width: 1025px) {
    align-items: center;
  }
}

.u-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  align-items: baseline;
}

.c-button {
  a {
    background: var(--color-gold);
    color: #fff;
    display: block;
    padding: 0.8em 2em;
    border-radius: var(--radius-button);
    max-width: 600px;
    width: 100%;
    position: relative;
    text-align: center;
    font-size: 1.1em;
    margin-inline: auto;

    &::after {
      content: "\2192";
      position: absolute;
      right: 1em;
      top: 0;
      bottom: 0;
      margin: auto;
      line-height: 1;
      height: fit-content;
    }
  }

  &.-dl {
    a {
      background: #fff;
      color: var(--color-text);
    }
  }
}

.c-title {
  margin: 0 auto 3em;

  h2 {
    font-family: var(--font-mincho);
    font-weight: 500;
    text-align: center;
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  }
}

.en-copy {
  color: var(--color-gold);
  position: relative;
  font-size: 0.9rem;
  letter-spacing: 0.05rem;
  padding: 0 calc(35px + 1em);
  display: flex;
  width: fit-content;
  align-items: center;
  flex-direction: row;
  line-height: 1;
  margin: 0 auto 1.5em;

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35px;
    height: 1px;
    background-color: currentColor;
  }

  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }
}

.bg-beige {
  /*background: #F7F3EB;*/
  background: var(--color-beige);
}

.bg-gold {
  background: var(--color-gold);
  color: #fff;
}

.bg-brown {
  background: var(--color-brown);
  color: #fff;
}

.bg-gray {
  background: var(--color-gray);
  color: #fff;
}

.yoff-mv {
  padding: 3em 0 8em;
  height: 100%;
  z-index: 1;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    background: url("../images/yoff-mv.jpg") no-repeat left 35% top / cover;

    @media screen and (min-width:1025px) {
      background: url("../images/yoff-mv.jpg") no-repeat center top / cover fixed;
    }
  }

  @media screen and (min-width:1025px) {
    padding: 5.5em 0 8em;
  }

  .u-inner {
    flex-direction: column;
    gap: 3em;

    @media screen and (min-width: 768px) {
      flex-direction: row;
    }

    @media screen and (min-width:1025px) {
      justify-content: space-between;
    }

  }

  .yoff-mv__text {
    flex-direction: column;
    gap: 2em;
    animation: fade-in-bottom 0.5s ease-in-out both;
    align-items: baseline;

    .yoff-mv__text-copy {
      h2 {
        font-family: var(--font-mincho);
        font-weight: 500;
        display: flex;
        flex-direction: column;
        font-size: clamp(1.125rem, 0.925rem + 1vw, 2.125rem);
        gap: 0.5em;
        line-height: 1.5;
        margin-bottom: 1em;

        .en-copy {
          margin: 0 0 1.5em;
          padding: 0 0 0 calc(35px + 1em);

          &::after {
            content: none;
          }
        }

        .u-gold {
          font-size: 1.3em;
          line-height: 1.4;
        }
      }

      p {
        font-size: 1.1em;
      }
    }

    .yoff-mv__text-button {
      width: 100%;
      max-width: 20rem;
      margin: 1em auto 0 0;

      @media screen and (max-width:767px) {
        margin: auto;
      }

      p {
        margin-top: 0.5em;
        text-align: center;
        color: var(--color-gold);
      }
    }

  }


  .yoff-mv__img {
    img {
      width: 100%;
      max-width: 30rem;
      object-fit: contain;
      animation: fade-in-bottom 1s ease-in-out both;
    }
  }
}

.yoff-intro__bg {
  position: relative;
  padding: 0 0 4em;
}

.yoff-intro {
  background: #fff;
  border-radius: var(--radius-item) 0 0 var(--radius-item);
  z-index: 1;
  position: relative;
  padding: 2em 1.5em;
  width: calc(100vw - ((100vw - 100%) / 2));
  margin-top: -4em;

  @media screen and (min-width: 768px) {
    padding: 3em;
  }


  .yoff-intro__title {
    align-items: center;
    margin-bottom: 3em;

    h2 {
      font-size: clamp(1.25rem, 1.075rem + 0.875vw, 2.125rem);
      position: relative;
      text-align: center;
      margin: auto;
      padding: 0 0 0.8em 0;

      @media screen and (min-width: 768px) {
        padding: 0 1em 0 0;
        text-align: left;
        margin: 0;
      }

      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        bottom: 0;
        width: 90px;
        height: 1px;
        background: #ccc;

        @media screen and (min-width: 768px) {
          top: 0;
          left: auto;
          width: 1px;
          height: 80%;
        }
      }
    }

    p {
      flex: 1;
      font-size: 1.1em;
      line-height: 1.8;
      letter-spacing: 0.05rem;
    }
  }

  .yoff-intro__list {
    gap: 1em;
    grid-template-columns: repeat(2, 1fr);

    @media screen and (min-width: 768px) {
      gap: 1.2em;
      grid-template-columns: repeat(2, 1fr);
    }

    @media screen and (min-width: 1200px) {
      grid-template-columns: repeat(4, 1fr);
    }

    .yoff-intro__list-item {
      dt {
        @media screen and (max-width: 767px) {
          font-size: 1em;
        }
      }

      dd {
        padding: 1.5em 1em;

        @media screen and (max-width: 767px) {
          display: flex;
          flex-direction: column;
          min-height: 14em;
          align-items: center;
        }

        p {
          line-height: 1.5;
        }

        img {
          margin: 1em auto;
          min-height: 40px;

          @media screen and (max-width: 767px) {
            padding: 1em 0.5em;
            margin: auto;
          }

        }

        .u-gold {
          display: block;
          font-size: 1.1em;
          margin-top: 0.2em;

          @media screen and (min-width: 768px) {
            font-size: 1.2em;
          }

          .num {
            font-size: 1.3em;
            line-height: 1;

            @media screen and (min-width: 768px) {
              font-size: 1.4em;
            }
          }
        }
      }
    }
  }
}

.yoff-strengths {
  .yoff-strengths__item {
    background: #fff;
    border-radius: var(--radius-item);
    padding: 1.5em;

    @media screen and (min-width: 768px) {
      padding: 2.5em;
    }

    &:not(:last-child) {
      margin: 0 auto 2em;
    }

    h3 {
      display: flex;
      align-items: center;
      flex-direction: row;
      font-family: var(--font-mincho);
      font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
      font-weight: 500;
      margin-bottom: 1em;

      .num {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.2rem;
        color: var(--color-gold);
        line-height: 1;
        font-size: 1.4em;
        padding-right: 0.5em;
        border-right: 1px solid var(--color-gold);

        @media screen and (min-width: 768px) {
          font-size: 2em;
        }

        .strengths {
          font-size: 0.7rem;
          text-align: center;

          @media screen and (min-width: 768px) {
            font-size: 0.9rem;
          }
        }
      }

      .title {
        padding-left: 1em;
        flex: 1;
      }
    }

    .u-flex {

      img,
      .yoff-strengths__item-text {
        flex: 1;
        width: 100%;

        @media screen and (min-width: 768px) {
          width: calc(50% - 2em);
        }
      }


      .yoff-strengths__item-text {
        .bg-beige {
          padding: 1.8em 1.8em 1.7em;
          border-radius: var(--radius-item);

          @media screen and (min-width: 768px) {
            margin: 0 auto 2em;
          }

          h4 {
            font-weight: 600;
            text-align: center;
            font-size: clamp(1rem, 0.925rem + 0.375vw, 1.375rem);

            &.border {
              border-top: 1px solid var(--color-text);
              border-bottom: 1px solid var(--color-text);
              padding: 0.3em 0;
              margin: 0 auto 1em;
            }
          }

          dl {
            margin: auto;
            display: flex;
            align-items: center;
            font-weight: 600;
            font-size: 1.1em;
            letter-spacing: 0.05rem;
            flex-direction: column;
            width: 100%;

            &:not(:last-child) {
              margin-bottom: 1em;
            }

            @media screen and (min-width: 768px) {
              margin-bottom: 0;
              flex-direction: row;
              width: fit-content;
              gap: 1em;
            }

            dd {
              .num {
                font-size: 1.5em;
              }
            }
          }
        }

        p {
          font-size: 1.1em;

          @media screen and (max-width: 767px) {
            margin-top: 1.5em;
          }
        }

        .bg-gray__list {
          gap: 1em;
          margin: 1.5em auto 0;
          grid-template-columns: repeat(2, 1fr);

          @media screen and (min-width:1025px) {
            gap: 1.5em;
            grid-template-columns: repeat(2, 1fr);
          }

          li {
            font-weight: 600;
            border-radius: 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            letter-spacing: 0.1rem;
            padding: 0.8em 0.3em;
            font-size: 0.9em;
            line-height: 1.5;

            @media screen and (min-width: 768px) {
              padding: 1.2em 0.5em;
              font-size: 1.05em;
            }

            strong {
              font-size: 1.1em;
              line-height: 1.3;

              @media screen and (min-width: 768px) {
                font-size: 1.3em;
              }

              .num {
                font-size: 1.3em;

                @media screen and (min-width: 768px) {
                  font-size: 1.5em;
                }
              }
            }

            small {
              font-size: 0.8rem;
            }
          }
        }
      }
    }

    .yoff-strengths__item-border {
      border-radius: var(--radius-item);
      border: 1px solid var(--color-text);
      padding: 1em;
      margin: 2em auto;

      p {
        font-size: clamp(1rem, 0.825rem + 0.875vw, 1.875rem);
        line-height: 1.5;

        sub {
          font-size: 0.6em;
        }
      }
    }
  }
}

.yoff-case {
  .yoff-case__list {
    gap: 2em;

    @media screen and (min-width: 768px) {
      grid-template-columns: repeat(1, 1fr);
    }

    @media screen and (min-width:1025px) {
      gap: 1.5em;
      grid-template-columns: repeat(3, 1fr);
    }

    h3 {
      margin: 0 auto 1em;
    }

    .yoff-case__list-item-dl {
      background: #fff;
      border-radius: var(--radius-item);
      padding: 0 1em;
      margin: 0 auto 1em;

      dt {
        border-bottom: 1px solid var(--color-gold);
        padding: 0.8em 0 0.5em;
        font-weight: 600;
        line-height: 1;
        font-size: 1em;
      }

      dd {
        padding: 0.5em 0 0.8em;
        font-size: 1.02em;
      }
    }

    img {
      margin: 0.6em auto 1em;
      display: block;
    }

    .u-dl.u-center {
      dd {
        display: flex;

        @media screen and (min-width:1025px) {
          min-height: 10.5em;
        }

        span {
          margin: auto;
        }
      }
    }
  }
}

.yoff-pricing {
  .u-inner {
    position: relative;

    &::before {
      background: url("../images/yoff-illust01.svg") no-repeat right top / contain;
      content: "";
      position: absolute;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      top: -4em;
      max-width: 110px;

      @media screen and (min-width:768px) {
        top: -7em;
        max-width: 300px;
      }
    }
  }

  .yoff-pricing__list {
    margin: 0 auto 2em;
    width: 100%;
    max-width: 100%;

    dt.bg-gold,
    dt.bg-brown {
      font-size: 1.3em;
      padding: 0.6em 0.5em 0.5em;
    }

    >dd {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 2em;

      @media screen and (min-width: 1025px) {
        flex-direction: row;
        padding: 2em 3em;
        gap: 3em;
      }
    }

    .yoff-pricing__list-text {
      text-align: center;
      letter-spacing: 0.05rem;
      font-size: 1.05em;

      @media screen and (min-width: 1025px) {
        text-align: left;
      }

      h3 {
        margin-bottom: 0.5em;
        font-size: 1.4em;
      }
    }

    .u-grid {
      flex: 1;
      gap: 1.5em;
      grid-template-columns: repeat(2, 1fr);

      @media screen and (max-width: 376px) {
        grid-template-columns: repeat(1, 1fr);
      }

      @media screen and (max-width: 1024px) {
        width: 100%;
        gap: 1em;
      }

      @media screen and (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .pricing-dl {
      dt.bg-gray {
        font-size: 0.9em;

        @media screen and (min-width: 768px) {
          font-size: 1em;
        }
      }

      dd {
        height: fit-content;
        padding: 1em;
        letter-spacing: 0.15rem;
        text-align: center;
        font-size: 0.9em;

        @media screen and (min-width: 768px) {
          font-size: 1.1em;
        }

        strong {
          font-size: 1.3em;

          @media screen and (min-width: 768px) {
            font-size: 1.5em;
          }
        }

        .num {
          font-size: 1.6em;
          line-height: 1;
          font-weight: 600;

          @media screen and (min-width: 768px) {
            font-size: 1.8em;
          }
        }

        small {
          display: block;
          font-size: 0.9rem;
          letter-spacing: 0.05rem;
        }
      }
    }

  }

  .u-list-note {
    @media screen and (max-width:767px) {
      margin-inline: auto;
    }

    li {
      color: var(--color-text);
    }
  }

  .c-button {
    a {
      margin-top: 3em;
      font-size: 1.2em;

      @media screen and (min-width: 768px) {
        font-size: 1.3em;
      }
    }
  }
}

.yoff-process {
  .c-title {
    margin: 0 auto 4em;
  }

  .yoff-process__list {
    position: relative;
    gap: 4em;

    @media screen and (min-width: 1025px) {
      grid-template-columns: repeat(5, 1fr);
    }

    &::before {
      content: "";
      position: absolute;
      background: var(--color-gold);
      margin: auto;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 2px;
      height: 100%;

      @media screen and (min-width: 1025px) {
        width: 100%;
        height: 2px;
      }
    }

    li {
      position: relative;
      border-radius: var(--radius-item);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1em;
      padding: calc(3em / 2 + 2em) 1em 1em;
      color: var(--color-gold);

      @media screen and (max-width: 1024px) {
        width: 100%;
        max-width: 240px;
        margin-inline: auto;
        flex-direction: row;
        justify-content: center;
        gap: 2em;
        padding: calc(3em / 2 + 1.5em) 1.5em 1.5em;
      }

      .yoff-process__num {
        position: absolute;
        top: calc(-3em / 2);
        border-radius: 50%;
        background: var(--color-beige);
        font-family: var(--font-mincho);
        left: 0;
        right: 0;
        margin: auto;
        width: 3em;
        height: 3em;
        line-height: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 1.5em;

        span {
          font-size: 0.9rem;
        }
      }

      img {
        max-width: 80px;
        margin: auto;

        @media screen and (max-width: 1024px) {
          max-width: 60px;
          margin: 0;
        }
      }

      p {
        line-height: 1.5;
        font-size: 1em;

        @media screen and (min-width: 1200px) {
          font-size: 1.1em;
        }
      }
    }
  }
}

.yoff-qa {
  .yoff-qa__item {
    &:not(:last-child) {
      margin: 0 auto 2em;
    }

    summary,
    .yoff-qa__item-content {
      display: flex;
      gap: 1.5em;
      flex-direction: row;
      align-items: baseline;
    }

    summary {
      cursor: pointer;
      list-style: none;
      position: relative;
      background: var(--color-gold);
      border-radius: var(--radius-item);
      color: #fff;
      font-size: 1.1em;
      padding: 1em 3em 1em 1em;

      @media screen and (min-width: 768px) {
        padding: 1em 4em 1em 1em;
      }

      &::-webkit-details-marker {
        display: none;
      }

      &::before,
      &::after {
        position: absolute;
        content: "";
        top: 0;
        bottom: 0;
        margin: auto;
        width: 1.3rem;
        height: 2px;
        background: #fff;
        transition: transform 0.3s ease, top 0.3s ease;
        right: 1em;

        @media screen and (min-width: 768px) {
          right: 2em;
        }
      }

      &::after {
        transform: rotate(90deg);
        border-radius: var(--radius-item) var(--radius-item) 0 0;
      }

      span {
        flex: 1;
      }
    }

    .yoff-qa__item-content {
      background: #fff;
      border-radius: 0 0 var(--radius-item) var(--radius-item);
      font-size: 1.05em;
      padding: 0 1em;

      p {
        flex: 1;
      }
    }

    .q,
    .a {
      font-family: var(--font-mincho);
      border-radius: 50%;
      width: 2.5rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      background: #fff;
      color: var(--color-gold);
      font-size: 1em;
      flex: inherit;
    }

    .q {
      background: #fff;
      color: var(--color-gold);
    }

    .a {
      background: var(--color-gray);
      color: #fff;
    }

    &[open] {
      summary {
        &::after {
          transform: rotate(0deg);
        }
      }

      .yoff-qa__item-content {
        padding: 1em;
      }
    }
  }
}

.yoff-cta {
  .yoff-cta__info {
    position: relative;
    padding: 3em 0 0;

    @media screen and (min-width: 768px) {
      padding: 5em 0;
      background: url("../images/yoff-illust02.svg") no-repeat right bottom / contain;
    }

    @media screen and (min-width: 1025px) {
      background: url("../images/yoff-illust02.svg") no-repeat right 20% bottom / contain;
    }

    .u-inner {
      display: flex;
      flex-direction: column;
      gap: 2em;

      @media screen and (min-width: 768px) {
        flex-direction: row;
      }
    }

    .yoff-cta__info-text {
      @media screen and (min-width: 768px) {
        width: 50%;
      }

      h2 {
        font-family: var(--font-mincho);
        font-size: clamp(1.375rem, 1.1rem + 1.375vw, 2.75rem);
        margin-bottom: 0.5em;
        line-height: 1.5;
        font-weight: 500;
      }

      p {
        font-size: 1.1em;
      }
    }

    .yoff-cta__info-img {
      position: relative;
      overflow: hidden;
      margin-top: -2px;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.8) 0%,
            rgba(255, 255, 255, 0.8) 5%,
            rgba(255, 255, 255, 0) 10%);
        pointer-events: none;
      }

      @media screen and (min-width: 768px) {
        display: none;
      }

      img {
        width: 100%;
        margin-inline: auto;
      }
    }
  }

  .yoff-cta__button {
    padding: 3em 0;
    margin-top: -1px;

    @media screen and (min-width: 768px) {
      padding: 3.5em 0;
    }

    .u-grid {
      gap: 1em;

      @media screen and (min-width: 768px) {
        gap: 2em;
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .c-button {
      a {
        font-size: 1.3em;
      }
    }
  }
}

.yoff-footer {
  background: var(--color-text);
  color: #fff;
  padding: 2em 0;

  @media screen and (min-width: 768px) {
    padding: 3em 0;
  }

  .yoff-footer__nav {
    gap: 2em;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #666;
    padding-bottom: 2em;
    margin: 0 auto 2em;

    .yoff-footer__nav-list {
      display: flex;
      gap: 1em;
      flex-direction: column;
      text-align: center;

      @media screen and (min-width: 768px) {
        gap: 1em 2.5em;
        flex-direction: row;
      }
    }
  }

  .yoff-footer__copyright {
    p {
      small {
        font-size: 0.8em;
      }
    }
  }
}