@import "variable.css";

/* ===============================================
     MARK:common
=============================================== */
.l-inner-sm {
  max-width: calc(var(--h--content-width-sm) + (var(--h--content-padding-side) * 2));
  padding-inline: var(--h--content-padding-side);
  margin-inline: auto;
}

.l-inner-md {
  max-width: calc(var(--h--content-width-md) + (var(--h--content-padding-side) * 2));
  padding-inline: var(--h--content-padding-side);
  margin-inline: auto;
}

.l-inner-lg {
  max-width: calc(var(--h--content-width-lg) + (var(--h--content-padding-side) * 2));
  padding-inline: var(--h--content-padding-side);
  margin-inline: auto;
}

/* ===============================================
     MARK:Top
=============================================== */
.l-fv {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  grid-template-areas:
    "image"
    "details";
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;

  @media (width >= 1024px) {
    min-height: 100dvh;
    grid-template-columns: max(460px, calc(540 / 1440 * 100vw)) 1fr;
    grid-template-areas: "details image";
  }
}

.l-fv__image {
  grid-area: image;
}

.l-fv__details {
  grid-area: details;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-inline: 20px;
  margin-top: 20px;
  margin-inline: auto;
  z-index: 10;

  @media (width >= 1024px) {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding-block: clamp(80px, calc(134 / 798 * 100dvh), 160px);
    /* detailsの高さ=530px,1024px時点の画像の高さ=798px,(798 - 530)/2=134 */
    margin-top: inherit;
  }
}

.l-fv__lead {
  margin-top: clamp(20px, calc(20 / 375 * 100vw), 30px);
}

.l-fv__sns {
  margin-top: clamp(30px, calc(30 / 375 * 100vw), 40px);
}

.l-fv__comic {
  margin-top: clamp(20px, calc(20 / 375 * 100vw), 30px);
}

.l-top-news {
  margin-top: clamp(80px, calc(80 / 375 * 100vw), 120px);
}

.l-top-news__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  row-gap: 40px;
  -webkit-column-gap: 120px;
  -moz-column-gap: 120px;
  column-gap: 120px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;

  @media (width >= 768px) {
    grid-template-columns: auto 1fr;
  }
}

.l-top-news__list {
  @media (width >= 768px) {
    margin-top: 20px;
  }
}

.l-top-staff {
  margin-top: clamp(80px, calc(80 / 375 * 100vw), 120px);
}

.l-top-staff__container {
  margin-top: clamp(40px, calc(40 / 375 * 100vw), 80px);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: clamp(40px, calc(40 / 375 * 100vw), 80px);

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

.l-top-staff__list {
  margin-top: clamp(20px, calc(20 / 375 * 100vw), 40px);
}

.l-top-introduction {
  margin-top: clamp(40px, calc(40 / 375 * 100vw), 120px);
  background-image:
    -webkit-gradient(linear, left top, left bottom, from(rgb(255 255 255 / 95%)), to(rgb(255 255 255 / 95%))),
    url("../images/bg_intro.jpg");
  background-image: linear-gradient(rgb(255 255 255 / 95%), rgb(255 255 255 / 95%)), url("../images/bg_intro.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-image:
    url("../images/bg_intro_mask.png"), -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
  -webkit-mask-image: url("../images/bg_intro_mask.png"), linear-gradient(#000, #000);
  mask-image: url("../images/bg_intro_mask.png"), -webkit-gradient(linear, left top, left bottom, from(#000), to(#000));
  mask-image: url("../images/bg_intro_mask.png"), linear-gradient(#000, #000);
  -webkit-mask-position: top, center;
  mask-position: top, center;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: contain, contain;
  mask-size:
    auto 120px,
    contain;
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  padding-top: clamp(120px, calc(120 / 375 * 100vw), 200px);
  padding-bottom: clamp(80px, calc(80 / 375 * 100vw), 120px);
}

.l-top-introduction__content {
  margin-top: clamp(40px, calc(40 / 375 * 100vw), 80px);
}

/* ===============================================
     MARK:Footer
=============================================== */
.l-footer {
  padding-block: 40px;
}

.l-footer__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 30px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  @media (width >= 768px) {
    -webkit-box-orient: inherit;
    -webkit-box-direction: inherit;
    -ms-flex-direction: inherit;
    flex-direction: inherit;
  }
}

.l-footer__copy {
  margin-top: 10px;

  @media (width >= 768px) {
    margin-top: inherit;
    margin-left: auto;
  }
}

/* ===============================================
     MARK:Article
=============================================== */
.l-article__wrapper {
  padding-top: clamp(50px, calc(50 / 375 * 100vw), 100px);
  padding-bottom: clamp(40px, calc(40 / 375 * 100vw), 80px);
}

.l-article__inner {
  background-color: var(--h--color-gray);
  padding: clamp(20px, calc(20 / 375 * 100vw), 80px);
  margin-top: clamp(40px, calc(40 / 375 * 100vw), 80px);
}

.l-article__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  row-gap: 10px;
  border-bottom: 1px solid var(--h--color-Navy-100);
  padding-bottom: clamp(20px, calc(20 / 375 * 100vw), 30px);
}

.l-article__content {
  margin-top: clamp(20px, calc(20 / 375 * 100vw), 30px);
}

.l-article__button {
  margin-top: 40px;
  margin-inline: auto;
}