@charset "UTF-8";

.l-section:has(.c-anchor-links) {
  padding: 32px 0 0;
}

.l-section:has(.c-anchor-links)+.l-section {
  padding-top: 56px;
}

#aboutus-fukusienne .l-section:last-of-type {
  padding-bottom: 80px;
}


/* grid */
.p-fukusienne-grid {
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'heading image'
    'conts image';
  gap: 40px 56px;
}

.p-fukusienne-grid.is-vtuber {
  display: grid;
  grid-template-columns: 1fr 0.674fr;
  gap: 40px 48px;
}

.p-fukusienne-grid .c-heading {
  grid-area: heading;
}

.p-fukusienne-grid__image {
  grid-area: image;
}

.p-fukusienne-grid__image img {
  border-radius: 20px;
}

.p-fukusienne-grid__contents {
  grid-area: conts;
}

.p-fukusienne-grid__heading::before {
  top: 8px;
  transform: skewY(-30deg) translateY(0);
}

.p-fukusienne-grid__heading::after {
  top: 26px;
  transform: skewY(-30deg) translateY(0);
}

/* p-fukusienne-gridbox */
.p-fukusienne-gridbox {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 16px;
}

.p-fukusienne-gridbox__image {
  flex: 0 0 130px;
}

.p-fukusienne-gridbox__text {
  flex: 1;
}

.p-fukusienne-gridbox__image a {
  transition: opacity 0.2s;
}

.p-fukusienne-gridbox__image a:hover {
  opacity: 0.8;
}

/* vtuber */
.p-vtuber-grid {
  display: grid;
  grid-template-columns: 0.306fr 1fr;
  grid-template-areas:
    'image heading'
    'image conts';
  gap: 16px 24px;
  padding: 32px;
  border-radius: 20px;
}

.p-vtuber-grid__image {
  grid-area: image;
}

.p-vtuber-grid__heading {
  display: flex;
  align-items: flex-end;
  grid-area: heading;
  font-size: var(--fs-24);
  line-height: 1.4;
  letter-spacing: 0.96px;
}

.p-vtuber-grid__text {
  display: flex;
  align-items: flex-start;
  grid-area: conts;
}

/* ボタンアイコン */
.p-icon-instagram::before {
  content: '';
  width: 30px;
  height: 30px;
  margin-inline-end: 10px;
  background: url('/assets/images/pages/fukusienne/icon-ig.png') center no-repeat;
  background-size: contain;
}

.p-icon-youtube::before {
  content: '';
  width: 30px;
  height: 30px;
  margin-inline-end: 10px;
  background: url('/assets/images/pages/fukusienne/icon-youtube.svg') center no-repeat;
  background-size: contain;
}


/* バックナンバー */
.p-magazine__row {
  gap: 35px 34px;
}

.p-magazine .c-noteList__item {
  font-weight: 400;
}

.p-magazine__row>.l-col {
  flex: 0 0 calc((100% - 102px) / 4);
  max-width: calc((100% - 102px) / 4);
}

.p-magazine__image {
  padding: 20px;
  border: 1px solid var(--color-gray);
  background: var(--color-white);
  box-shadow: 2px 2px 10px 0 rgba(34, 46, 127, 0.14);
  margin-block-end: 8px;
}

.p-magazine .c-icon-link:hover .p-magazine__image {
  box-shadow: none;
  border-color: var(--color-active) !important;
}


/* ------------------------------
  7. SP（767px 以下）
------------------------------ */
@media screen and (max-width: 767px) {
  .l-section:has(.c-anchor-links) {
    padding: 32px 0 0;
  }

  .l-section:has(.c-anchor-links)+.l-section {
    padding-top: 40px;
  }

  #aboutus-fukusienne .l-section:last-of-type {
    padding-bottom: 56px;
  }


  /* grid */
  .p-fukusienne-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      'heading'
      'image'
      'conts';
    gap: 24px;
  }

  .p-fukusienne-grid.is-vtuber {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .p-fukusienne-grid__image {
    margin-block-start: 8px;
  }

  .p-fukusienne-grid__image img {
    border-radius: 10px;
  }

  #section04 .p-fukusienne-grid__image img {
    border-radius: 20px;
  }

  .p-fukusienne-grid.is-vtuber .p-fukusienne-grid__image {
    display: flex;
    justify-content: center;
    margin-block-start: 16px;
  }

  .p-fukusienne-grid__contents .c-list .c-list__item {
    font-size: var(--fs-14);
  }

  .p-fukusienne-grid__contents .c-list--disc .c-list__item::before {
    top: 9px;
  }

  .p-fukusienne-gridbox {
    flex-direction: column;
    gap: 24px 0;
  }

  .p-fukusienne-gridbox__image,
  .p-fukusienne-gridbox__text {
    flex: none;
    width: 100%;
  }

  .p-fukusienne-gridbox__image img {
    width: calc(245 / 375 * 100vw);
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* vtuber */
  .p-vtuber-grid {
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-areas:
      'image heading'
      'conts conts';
    gap: 16px;
    padding: 24px;
  }

  .p-vtuber-grid__heading {
    align-items: center;
    font-size: var(--fs-20);
    letter-spacing: 0.8px;
  }

  .p-fukusienne-grid__heading::before {
    top: 4px;
  }

  .p-fukusienne-grid__heading::after {
    top: 21px;
  }

  /* ボタンアイコン */
  .p-icon-instagram::before {
    width: 24px;
    height: 24px;
    margin-inline-end: 8px;
  }

  .p-icon-youtube::before {
    width: 24px;
    height: 24px;
    margin-inline-end: 8px;
  }


  /* バックナンバー */
  .p-magazine__row {
    gap: 16px;
    justify-content: center;
  }

  .p-magazine__row>.l-col {
    flex: 0 1 100%;
    max-width: 287px;
  }

  .c-accordion-trigger__text {
    font-size: var(--fs-20);
  }

  .c-accordion-content__inner {
    padding: 24px;
  }
}