/*
*
* TOPページ用スタイル
*
*/

/* header */
@media (width >= 1540px) {
  .header.is-scroll {
    & .header-pannel {
      display: flex;
      height: 5rem;
      transition: .3s;
    }

    .header-logo {
      margin-left: 0;
      transition: .3s;
    }
  }

  .header:not(.is-scroll) {
    .header-pannel {
      position: relative;
      height: 7.8125rem;
      transition: .3s;

      &::before,
      &::after {
        content: "";
        display: block;
        width: 100%;
        height: 2rem;
        position: absolute;
        left: 411px;
        top: 94px;
      }

      &::before {
        background: #fff;
      }

      &::after {
        border-radius: .5rem 0 0;
        background: var(--rs-primary-color);
      }
    }

    .header-logo {
      width: 26.6875rem;
      background: #fff;
      border-radius: 0 0 1rem;
      margin-left: -1rem;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      padding-top: 1rem;
      transition: .3s;

      & img {
        max-width: 20.9183rem;
      }
    }
  }
}

/* home main */

.home-main {
  overflow: hidden;
}

/* hero */
.hero-head {
  background: var(--rs-primary-color);
  padding: 6rem 0 6.69rem;
}

.hero-inner {
  display: flex;
  justify-content: space-between;
}

.hero-text {
  width: 50%;
  min-width: 36.875rem;
  padding: 1.125rem 1.25rem 0;
}

.hero-sub-title {
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: normal;
  font-size: 1.9834rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin: 0 0 0.75rem;
}

.hero-sub-title-inner {
  box-decoration-break: clone;
  background: #fff;
  padding: 0.25rem 0.63rem;

  & strong {
    font-size: 2.3063rem;
    letter-spacing: 0.16em;
  }
}

.hero-headline {
  font-family: "Noto Sans JP", sans-serif;
  font-feature-settings: normal;
  font-size: 2.7476rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  line-height: 1.55;
  margin: 0 0 2rem;
}

.hero-headline-inner {
  box-decoration-break: clone;
  background: #fff;
  padding: .375rem 0.66rem;

  & strong {
    font-size: 3.2485rem;
  }

  & em {
    font-size: 2.875rem;
  }
}

.hero-button {
  display: flex;
  align-items: center;
  gap: 0.88rem;
  background: var(--rs-secondary-color);
  border-radius: 2.875rem;
  padding: .56rem 3rem .56rem .56rem;
  max-width: 29.0625rem;
  position: relative;

  &[aria-hidden="true"] {
    display: none;
  }

  &::after {
    --arrow: url('data:image/svg+xml;charset=utf-8,<svg viewbox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M9.64021 0.731804C9.21593 0.37824 8.58537 0.435564 8.2318 0.859841C7.87824 1.28412 7.93556 1.91468 8.35984 2.26825L12.238 5.50003L1 5.50002C0.447715 5.50002 0 5.94774 0 6.50002C0 7.05231 0.447715 7.50002 1 7.50002L12.238 7.50003L8.35984 10.7318C7.93556 11.0854 7.87824 11.7159 8.2318 12.1402C8.58537 12.5645 9.21593 12.6218 9.64021 12.2682L14.7183 8.03647C15.6779 7.23688 15.6778 5.76317 14.7183 4.96358L9.64021 0.731804Z" fill="%23fff"/></svg>');

    content: "";
    display: block;
    width: 1rem;
    height: 0.8125rem;
    background-image: var(--arrow), var(--arrow);
    background-size: 1rem .8125rem;
    background-repeat: no-repeat, no-repeat;
    background-position: left -1rem center, center center;
    position: absolute;
    right: 1.5rem;
    top: 0;
    bottom: 0;
    margin: auto;
  }
}

.hero-button-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5625rem;
  height: 4.5625rem;
  flex-shrink: 0;
  background: #fff;
  color: var(--rs-secondary-color);
  border-radius: 50%;
  font-size: 0.9063rem;
  font-weight: 700;
  font-variation-settings: "wght" 700;
  line-height: 1.3;
  text-align: center;
  padding-top: .5rem;
}

.hero-button-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--rs-font-size-xs);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  line-height: 1.6;
  color: #fff;

  & strong {
    font-size: 1.375rem;
    letter-spacing: 0;
  }
}

.hero-figure {
  padding: 0 .87rem 0 0;
  flex-shrink: 1;
}

.hero-achivement {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .83rem;
  font-family: "Noto Sans JP", sans-serif;

  & dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 9.9221rem;
    height: 6.9624rem;
    background: url("../images/home/bg-archivement.svg") no-repeat center center / contain;
    color: #fff;

    & dt {
      font-weight: 600;
      font-variation-settings: "wght" 600;
      line-height: 1.5;
    }

    & dd {
      text-align: center;
      line-height: 1;

      & .text {
        display: block;
        font-size: 0.9831rem;
        font-weight: 600;
      font-variation-settings: "wght" 600;
      }
    }

    &.number {
      & dt {
        font-size: 0.8983rem;
        margin-bottom: -.425rem;
      }

      & dd {
        font-size: 1.4773rem;
        font-weight: 900;
        font-variation-settings: "wght" 900;

        & strong {
          font-size: 2.0284rem;
          font-weight: 900;
          font-variation-settings: "wght" 900;
          line-height: 1.4;
        }
      }
    }

    &.market {
      padding-top: .5rem;

      & dt {
        font-size: 0.7186rem;
      }

      & dd {
        & strong {
          font-size: 1.4373rem;
          font-weight: 900;
          font-variation-settings: "wght" 900;
          line-height: 1.4;
        }

        & .text {
          margin-top: .375rem;
        }
      }
    }

    &.rate {
      padding-top: .5rem;

      & dt {
        font-size: 0.7623rem;
        margin-bottom: -.425rem;
      }

      & dd {
        font-size: 1.5343rem;
        font-weight: 900;
        font-variation-settings: "wght" 900;

        & strong {
          font-size: 1.8935rem;
          line-height: 1.4;
        }

        & .text {
          margin-top: .125rem;
        }
      }
    }
  }
}

.hero-card {
  margin-top: -2.5rem;
}

.hero-card-slider {
  & .splide__track {
    overflow: visible;
  }
}

.hero-card-list {
  & li {
    background: #fff;
    box-shadow: 0 3px 10px 0 rgb(65 65 65 / 20%);
    border: 1px solid  var(--rs-gray200);
    border-radius: 0.5rem;
    overflow: hidden;
  }

  & .c-card-link {
    border: none;
  }
}

@media (width >= 768px) {
  .hero-card-list {
    & li {
      width: 21.875rem;
      transition : 0.5s;

      &:hover {
        box-shadow: none;
        border: 1px solid  var(--rs-link-color);
        transition : 0.5s;
      }
    }

    & .c-card-link {
      border: none;
    }
  }
}

@media (width >= 992px) {
  .hero-button {
    &:hover {
      text-decoration: none;
      background: #454545;

      &::after {
        background-position: center center, left 1rem center;
        transition: background .5s;
      }

      & .hero-button-label {
        color: #454545;
      }
    }
  }
}

@media (width < 992px) {
  .hero-inner {
    flex-direction: column;
    align-items: center;
    margin: 0 2rem;
  }

  .hero-text {
    width: 100%;
    min-width: inherit;
    padding: 0;
    margin: 0 0 2rem;
  }

  .hero-figure {
    padding: 0;
    width: 100%;
    max-width: 600px;
    margin: 0 0 2.04rem;

    & img {
      width: 100%;
    }
  }

  .hero-headline {
    margin: 0;
  }

}

@media (width < 768px) {
  .hero-inner {
    margin: 0 min(4.0713vw, 1rem);
  }

  .hero-head {
    padding: 3.38rem 0 6.36rem;
  }

  .hero-sub-title {
    font-size: min(5.4392vw,1.336rem);
    letter-spacing: 0.08em;
    margin: 0 0 0.64rem;
  }

  .hero-sub-title-inner {
    padding: 0.1875rem min(1.7099vw, 0.42rem);

    & strong {
      font-size: min(6.3247vw,1.5535rem);
    }
  }

  .hero-headline {
    font-size: min(7.5347vw,1.8507rem);
  }

  .hero-headline-inner {
    padding: 0.3125rem 0.42rem;

    & strong {
      font-size: min(8.9059vw,2.1881rem);
    }

    & em {
      font-size: min(7.8844vw,1.9366rem);
    }
  }

  .hero-button {
    gap: 0.69rem;
    letter-spacing: 0;
    padding-right: 1rem;
    justify-content: flex-start;
    width: 100%;
    max-width: 22.8125rem;

    &::after {
      right: 1.18rem;
    }
  }

  .hero-button-label {
    width: 3.5775rem;
    height: 3.5775rem;
    font-size: 0.7106rem;
  }

  .hero-button-text {
    font-size: 0.6861rem;

    & strong {
      font-size: 1.0781rem;
    }
  }

  .hero-button-arrow {
    width: 1rem;
    height: .75rem;
    right: 1.18rem;
  }

  .hero-figure {
    padding: 0;
    text-align: center;

    & img {
      width: 17.6649rem;
    }
  }

  .hero-achivement {
    gap: .57rem;

    & dl {
      width: min(31.3573%, 7.0756rem);
      height: 4.9649rem;

      & dd {
        & span {
          font-size: 0.7011rem;
        }
      }

      &.number {
        & dt {
          font-size: 0.6406rem;
          margin-bottom: -.1875rem;
        }

        & dd {
          font-size: 1.0534rem;

          & strong {
            font-size: 1.4464rem;
          }
        }
      }

      &.market {
        padding-top: .3125rem;

        & dt {
          font-size: 0.5125rem;
        }

        & dd {
          & strong {
            font-size: 1.0249rem;
          }

          & .text {
            margin-top: .1875rem;
          }
        }
      }

      &.rate {
        padding-top: .3125rem;

        & dt {
          font-size: 0.5436rem;
          margin-bottom: -.3125rem;
        }

        & dd {
          font-size: 1.0941rem;

          & strong {
            font-size: 1.3502rem;
          }
        }
      }
    }
  }

  .hero-card-slider {
    margin: 0 -1rem;
  }
}

/* about */

.about {
  padding: 6.5rem 2rem 7.5rem;
}

.about-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1.69rem;
}

.about-figure {
  display: flex;
  align-items: center;
  grid-row: 1 / span 2;
  line-height: 0;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-title {
  font-size: var(--rs-font-size-m);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  line-height: 1.5;
  align-self: flex-end;
}

.about-item {
  width: 46.6667%;
  display: grid;
  grid-auto-columns: min-content;
  grid-auto-rows: auto;
  gap: 1.5rem 5.7143%;

  &:nth-child(odd) {
    grid-template-columns: min(41.0714%, 14.375rem) 1fr;

    & .about-figure {
      grid-column: 1 / 2;
    }

    & .about-title {
      grid-column: 2 / 2;
    }
  }

  &:nth-child(even) {
    grid-template-columns: 1fr min(41.0714%, 14.375rem);
    margin-top: 7.5rem;

    & .about-figure {
      grid-column: 2 / 2;
    }
  }
}


.about-lead {
  color: var(--rs-gray700);
}

@media (width < 992px) {
  .about-list {
    flex-direction: column;
    gap: 3rem;
  }

  .about-item {
    width: 100%;

    &:nth-child(even) {
      margin-top: 0;
    }
  }
}

@media (width < 768px) {
  .about {
    padding: 4.67rem 0 2.5rem;
  }

  .about-title {
    width: 100%;
    font-size: 1.5rem;
  }

  .about-item {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
  }

  .about-figure {
    width: 9.125rem;
    align-items: flex-start;
  }

  .about-lead {
    flex: 1;
  }
}

/* function */

.function-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem;

  & li {
    width: 11.875rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.5rem 0;
  }
}

.function-figure {
  width: 4.625rem;

  & svg {
    fill: var(--rs-primary-color);
  }
}

.function-title {
  font-weight: 700;
  font-variation-settings: "wght" 700;
  text-align: center;
  word-break: break-word;
}

@media (width < 768px) {
  .function-list {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 0;

    & li {
      gap: .45rem;
      padding: 1.35rem;
      flex-basis: 47.4860%;
    }
  }

  .function-figure {
    width: 4.1493rem;
  }

  .function-title {
    font-size: 0.8971rem;
  }
}

/* flow */
.flow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.flow-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  & li {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    background: #fff;
    border: solid 1px var(--rs-tertiary-color-red200);
    border-radius: 0.5rem;
  }
}

.flow-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;

  & span {
    font-family: Futura, "Century Gothic", sans-serif;
    font-size: 1.4375rem;
    font-weight: 700;
    font-variation-settings: "wght" 700;
    line-height: 1;
    color: var(--rs-primary-color);
    text-align: center;
  }

  & img {
    width: 3.3125rem;
  }
}

.flow-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flow-title {
  font-size: 1.25rem;
  font-weight: 600;
  font-variation-settings: "wght" 600;
  line-height: 1.5;
  text-align: center;
}

@media (width < 768px) {
  .flow-list {
    flex-direction: column;
    gap: .5rem;

    & li {
      flex-direction: row;
      gap: 2rem;
      padding: 1.5rem;
      min-width: inherit;
    }
  }

  .flow-figure {
    flex-shrink: 0;
    gap: .5rem;
    width: 3.3125rem;

    & img {
      width: 100%;
    }
  }

  .flow-text {
    gap: .5rem;
  }

  .flow-title {
    text-align: left;
  }
}

/* information */
.information-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  padding: 0 1.75rem;
}

.information-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.0979%;
}

.information-meta {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.information-date {
  font-size: var(--rs-font-size-xs);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  color: var(--rs-gray500);
}

.information-category {
  font-size: var(--rs-font-size-xs);
  font-weight: 600;
  font-variation-settings: "wght" 600;
  padding: 0.125rem 0.625rem;
}

.information-item {
  width: 48.9510%;

  & a {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    padding: 1.5rem;
    font-weight: 400;
    font-variation-settings: "wght" 400;
  }

  &.rs-info {
    & .information-category {
      background: var(--rs-tertiary-color-red200);
      color: var(--rs-tertiary-color-red500);
    }
  }

  &.addfunction {
    & .information-category {
      background: var(--rs-secondary-color-gray);
      color: var(--rs-secondary-color);
    }
  }
}

@media (width < 768px) {
  .information-column {
    padding: 0;
  }

  .information-item {
    width: 100%;
  }
}

/* レンサバコラム */
@media (width >= 768px) {
  .rs-column-list {
    justify-content: center;
    gap: 2.5rem;

    & li {
      width: 18rem;
    }
  }
}

.plan-spec {
  & dl {
    & dd {
      & b {
        font-weight: 400;
        font-variation-settings: "wght" 400;
      }
    }
  }
}

/* イベント・セミナー情報 */
.event-seminar {
  border-top: 1px solid #E7E6E6;
  background: #F9F9F9;
}

.event-seminar-text {
  align-items: flex-start;
}

.event-seminar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.event-seminar-tag {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.125rem 0.625rem;
  border-radius: 0.1875rem;

  &.regular {
    background: #FFF1F3;
    color: #E7174E;
  }
  &.offline {
    background: #F9F9F9;
    color: #004B76;
  }
}

.event-seminar-date {
  font-size: 1rem;

  & strong {
    font-size: 1.25rem;
    font-weight: 600;
  }

  & b {
    font-weight: 600;
  }
}

.event-seminar-title {
  font-size: var(--font-size-xs);
}

@media (width >= 768px) {
  .event-seminar-list {
    & li {
      width: 29.1667%;
      min-width: 18rem;
    }
  }
}