@charset "UTF-8";


/* ---------------------------------------------------------
 common
--------------------------------------------------------- */
/* layout
--------------------------------------------------------- */
.stories-content {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 24px;
  padding: 0 3vw 96px;
}

.stories-sm {
  max-width: 793px;
  margin-left: auto;
  margin-right: auto;
}

.stories-md {
  max-width: 998px;
  margin-left: auto;
  margin-right: auto;
}

section + section,
.stories-mt {
  margin-top: 96px;
}

.full-img {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.img-r-full>figure {
  margin-right: calc(100% - 50vw);
}

@media screen and (min-width: 1281px) {
  .stories-sm {
    max-width: 1056px;
  }

  .stories-md {
    max-width: 1328px;
  }

  .full-img {
    height: 700px;
    overflow: hidden;
  }

  .full-img img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    object-position: center;
  }

  .img-r-full>figure {
    margin-right: 0;
  }
}

@media screen and (max-width: 1080px) {
  .stories-content {
    padding: 0 5vw 96px;
  }
}

@media screen and (max-width: 769px) {
  .stories-content {
    padding: 0 5vw 56px;
    margin-bottom: 16px;
  }

  section + section,
  .stories-mt {
    margin-top: 56px;
  }

  .full-img {
    height: 276px;
    overflow: hidden;
  }

  .full-img img {
    width: 100%;
    height: 276px;
    object-fit: cover;
    object-position: center;
  }

  .tb-img-full {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .tb-img-full figcaption {
    padding: 0 5vw;
  }

  .img-r-full>figure {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .img-r-full>figure figcaption {
    padding: 0 5vw;
  }

  /* SP時のみ左右余白を戻す（他コンテンツと同じ 5vw ガター）: sp_gutter => true */
  .img-r-full>figure.sp-gutter {
    margin-left: 0;
    margin-right: 0;
  }

  .img-r-full>figure.sp-gutter figcaption {
    padding: 0;
  }
}

/* font
--------------------------------------------------------- */
.h1-stories,
.h2-stories {
  font-size: 4rem;
  font-weight: normal;
  line-height: 130%;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

.h2-stories {
  margin-bottom: 40px;
}

.h3-stories {
  font-size: 2.4rem;
  font-weight: normal;
  line-height: 130%;
  font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
}

.caption {
  color: var(--Text_sub_black);
}

.caption.border {
  padding-top: 8px;
  border-top: 1px solid var(--Text_sub_white);
}

@media screen and (max-width: 1080px) {
  .h1-stories,
  .h2-stories {
    font-size: 2.8rem;
  }

  .h2-stories {
    margin-bottom: 20px;
  }
}


.brand-main-v {
  background: url("/brand/common/img/stories/bg_001.webp") no-repeat center center / cover;
  height: 500px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.main-v-text {
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
  text-align: center;

  h1,
  p {
    color: var(--Text_white);
  }
}

.scroll-ui {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  color: var(--Primary_black);
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  text-align: center;
  line-height: 1;

  &::after {
    content: "";
    display: block;
    width: 1px;
    height: 58px;
    background: var(--Primary_black);
    margin: 8px auto 0;
  }
}



/* ---------------------------------------------------------
 stories TOP
--------------------------------------------------------- */
.stories-card-link {
  color: var(--Text_black);
  text-decoration: none;
  display: block;

  /* サムネイルは記事のメインビジュアルを流用するため縦横比が一定でない。
     カード枠（16:9）に合わせてトリミング表示する。
     共通の .image-skeleton-wrapper .is-skeleton は object-fit:contain のため、
     このカード内だけ cover に上書きする */
  .image-skeleton-wrapper .is-skeleton {
    height: 100%;
    object-fit: cover;
  }

  figure {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;

    &::before {
      content: "";
      position: absolute;
      z-index: 1;
      inset: -0.5px;
      padding: 4.5px;
      background: radial-gradient(ellipse 105.61% 273.09% at 99.38% 0.5%, #D6FFB6 0.48%, #C191FF 31.73%, #3548E5 69.23%);
      border-radius: inherit;
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0;
      transition: .3s ease;
    }

    img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    }
  }

  .stories-card-body {
    margin: 12px 0 0;
    display: flex;
    gap: 32px 8px;
    /* タイトルの行数で矢印の縦位置が動かないよう上揃えで固定する */
    align-items: flex-start;
    justify-content: space-between;
  }

  .contributor {
    margin: 10px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;

    span:first-child {
      font-size: 1.2rem;
    }

    span:last-child {
      font-size: 1.6rem;
    }
  }

  @media screen and (min-width: 770px) {
    --circle-size: 40px;
    --border-width: 2px;
    --circle-radius: calc((var(--circle-size) / 2) - (var(--border-width) / 2));
    --circle-circumference: calc(2 * 3.14159 * var(--circle-radius));

    &:hover {
      .circle-anim-container {
        .anim-circle circle {
          stroke-dasharray: var(--circle-circumference) var(--circle-circumference);
          opacity: 1;
          transition:
            stroke-dasharray 0.4s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0s,
            stroke 0.6s;
        }

        .inner-icon-svg {
          animation: anim-arrow 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }
      }


      figure::before {
        opacity: 1;
      }

      figure img {
        transform: scale(1.1) !important;
      }
    }
  }
}


@media screen and (max-width: 769px) {
  .brand-main-v {
    background: url("/brand/common/img/stories/bg_001_sp.webp") no-repeat bottom center / cover;
    height: 100vh;
    max-height: 586px;
  }
}




/* ---------------------------------------------------------
 stories-h1-area
--------------------------------------------------------- */
.stories-h1-area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100vw;
  min-height: 500px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.stories-h1-area>figure {
  min-height: 500px;
  max-height: 650px;
  overflow: hidden;
}

.stories-h1-area>figure img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  max-height: 650px;
  object-fit: cover;
  object-position: center;
}

.stories-h1-area>div {
  padding: 32px 48px;
  background: no-repeat center/cover;
}

.stories-h1-area.story-01>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url(/brand/common/img/stories/bg_001.webp);
}

.stories-h1-area>div {
  color: var(--Text_white);
}

.stories-h1-area .story-num {
  font-family: "Junge", "Noto Serif JP", "Yu Mincho", serif;
  font-size: 1.4rem;
}

.stories-h1-area h1 {
  margin-top: 30px;
}

.stories-h1-area .sign-img {
  margin-top: 24px;
  margin-bottom: 16px;
}

.stories-h1-area .director {
  font-size: 1.4rem;
}

.stories-h1-area p {
  font-size: 2.4rem;
  color: var(--Text_white);
}

@media screen and (max-width: 1080px) {
  .stories-h1-area {
    min-height: 450px;
  }

  .stories-h1-area>figure {
    min-height: 450px;
  }

  .stories-h1-area>figure img {
    min-height: 450px;
  }
}

@media screen and (max-width: 769px) {
  .stories-h1-area {
    grid-template-columns: 1fr;
  }

  .stories-h1-area>figure {
    min-height: auto;
    max-height: 100%;
    aspect-ratio: 3 / 2;
    object-position: top;
  }

  .stories-h1-area>figure img {
    width: 100%;
    height: 100%;
    min-height: auto;
    max-height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .stories-h1-area h1 {
    margin-top: 20px;
  }

  .stories-h1-area p {
    font-size: 2rem;
  }
}


/* ---------------------------------------------------------
 director-column
--------------------------------------------------------- */
.director-column {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 80px 40px;
  background: var(--Primary_black);
}

.director-column-wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 790px;
  margin: 0 auto;
  color: var(--Text_white);
}

.director-column-wrap figure {
  min-width: 277px;
  width: 277px;
  height: 277px;
}

.director-column-wrap span,
.director-column-wrap p {
  font-size: 1.4rem;
  color: var(--Text_white);
}

.director-column-wrap .director-name span:last-child {
  display: block;
  font-size: 2.4rem;
  line-height: 150%;
}

.director-column-wrap p+p {
  margin-top: 20px;
}

@media screen and (max-width: 769px) {
  .director-column {
    padding: 56px 16px;
  }

  .director-column-wrap {
    flex-direction: column-reverse;
  }

  .director-column-wrap figure {
    min-width: auto;
    width: 190px;
    height: 190px;
    margin: 0 auto;
  }

  .director-column-wrap .director-name {
    width: max-content;
    margin-right: auto;
    margin-left: auto;
  }
}


/* ---------------------------------------------------------
 story-ourmoments
--------------------------------------------------------- */
@media screen and (min-width: 770px) {
  .story-ourmoments .link-to-ourmoments {
    padding: 32px 24px;
  }
}