@charset "UTF-8";

/* aden + anais 2027年干支コレクション eFEA26100（SP: 700pxカンプ / PC: 1200px） */

/* 700pxカンプを画面幅に縮小する。400pxのとき倍率は 400/700 */
.efea26100-fit {
  width: 100%;
  container-type: inline-size;
}

#efea26100 {
  --fea-teal: #007378;
  --fea-text: #6a6e6d;
  --fea-muted: #666b6c;
  --fea-card: rgba(229, 241, 239, 0.5);
  --fea-gift: #f7f7f7;
  --fea-soon: #bababa;
  /* Adobe Fonts（ブランドLPと同じ sofia-pro Regular） */
  --fea-display: "sofia-pro", "source-han-sans-japanese", sans-serif;
  --fea-en: "Nunito", "Hiragino Sans", sans-serif;
  box-sizing: border-box;
  width: 100%;
  overflow-x: clip;
  background: #fff;
  color: var(--fea-text);
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

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

  p,
  h2,
  h3 {
    margin: 0;
  }

  /* 本番サイトの h1 デフォルト（下余白・下線）を打ち消す */
  h1 {
    margin: 0;
    padding: 0;
    border-bottom: none;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  > .inner,
  .fea-gift > .inner {
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;

    @media (width >= 769px) {
      width: min(calc(1200px + 25px * 2), 100%);
      padding-inline: 25px;
    }
  }

  .sp_only {
    @media (width >= 769px) {
      display: none;
    }
  }

  .pc_only {
    display: none;

    @media (width >= 769px) {
      display: revert;
    }
  }

  .fea-mv {
    width: min(660px, calc(100% - 40px));
    margin-inline: auto;

    @media (width >= 769px) {
      width: min(1200px, 100%);
    }
  }

  .fea-mv__img {
    width: 100%;
    height: auto;
    aspect-ratio: 660 / 371;
    object-fit: cover;

    @media (width >= 769px) {
      aspect-ratio: 1200 / 675;
    }
  }

  .fea-lead {
    margin-block-start: 60px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.55;
    text-align: center;

    @media (width >= 769px) {
      max-width: 830px;
      margin-inline: auto;
      margin-block-start: 80px;
      line-height: 1.64;
      letter-spacing: 0.01em;
    }
  }

  .fea-design {
    margin-block-start: 80px;
  }

  .fea-design__title,
  .fea-lineup__title {
    color: var(--fea-teal);
    font-family: var(--fea-display);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 0.8;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
  }

  .fea-design__text {
    max-width: 580px;
    margin-inline: auto;
    margin-block-start: 30px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.44;
    text-align: center;

    @media (width >= 769px) {
      max-width: 960px;
      margin-block-start: 20px;
      font-size: 16px;
      line-height: 1.75;
    }
  }

  .fea-design__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-start: 30px;

    @media (width >= 769px) {
      width: min(960px, 100%);
      margin-inline: auto;
    }
  }

  .fea-design__list img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;

    @media (width >= 769px) {
      aspect-ratio: 320 / 245;
    }
  }

  .fea-lineup {
    margin-block-start: 83px;
  }

  .fea-lineup__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-block-start: 30px;
    align-items: stretch;

    @media (width >= 769px) {
      gap: 40px;
      margin-block-start: 27px;
    }
  }

  .fea-lineup__list > li {
    display: flex;
    min-width: 0;
  }

  .fea-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 450px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--fea-card);
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
    flex: 1;

    @media (width >= 769px) {
      display: grid;
      grid-template-columns: minmax(0, 260fr) minmax(0, 320fr);
      grid-template-rows: minmax(0, 1fr);
      min-height: 0;
      height: 100%;
      align-items: stretch;
    }
  }

  .fea-card:hover,
  .fea-card:focus-visible {
    opacity: 0.92;
  }

  .fea-card--tall {
    min-height: 480px;

    @media (width >= 769px) {
      min-height: 0;
    }
  }

  .fea-card__visual {
    position: relative;
    z-index: 0;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 10px 10px 0 0;

    @media (width >= 769px) {
      min-width: 0;
      min-height: 0;
      align-self: stretch;
      border-radius: 10px 0 0 10px;
    }
  }

  .fea-card__visual picture {
    display: block;
    width: 100%;

    @media (width >= 769px) {
      height: 100%;
    }
  }

  .fea-card__visual img {
    width: 100%;
    aspect-ratio: 300 / 200;
    object-fit: cover;

    @media (width >= 769px) {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: cover;
    }
  }

  .fea-card__visual--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    @media (width >= 769px) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: repeat(2, minmax(0, 1fr));
      min-height: 0;
      height: 100%;
      align-self: stretch;
    }
  }

  .fea-card__visual--split picture {
    min-width: 0;

    @media (width >= 769px) {
      min-height: 0;
      height: 100%;
    }
  }

  .fea-card__visual--split img {
    width: 100%;
    aspect-ratio: 150 / 200;
    object-fit: cover;

    @media (width >= 769px) {
      width: 100%;
      height: 100%;
      aspect-ratio: auto;
      object-fit: cover;
    }
  }

  .fea-card__body {
    position: relative;
    z-index: 2;
    flex: 1;
    padding: 18px 16px 24px;

    @media (width >= 769px) {
      min-width: 0;
      min-height: 0;
      padding: 46px 12px 20px 20px;
    }
  }

  .fea-card__body > :not(.fea-card__deco--pc) {
    position: relative;
    z-index: 1;
  }

  .fea-card__title {
    color: var(--fea-teal);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.23;
  }

  .fea-card__lead {
    margin-block-start: 10px;
    color: var(--fea-muted);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;

    @media (width >= 769px) {
      line-height: 1.5;
    }
  }

  .fea-card__note {
    position: relative;
    width: min(250px, 100%);
    margin-block-start: 16px;
    padding: 8px 12px 8px 16px;
    border-radius: 8px;
    background: #fff;
    color: var(--fea-muted);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.22;
  }

  .fea-card__note::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    border-block: 9px solid transparent;
    border-inline-end: 12px solid #fff;
    translate: 0 -50%;
  }

  .fea-card__note-label {
    display: block;
    color: var(--fea-teal);
    font-weight: 700;
  }

  /* PC：テキスト列に上下スライスを重ねる */
  .fea-card__deco--pc {
    display: none;

    @media (width >= 769px) {
      display: block;
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      border-radius: 0 10px 10px 0;
      pointer-events: none;
    }
  }

  .fea-card__deco--pc img {
    position: absolute;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
  }

  .fea-card__deco--pc-top img {
    top: 0;
    left: 0;
    object-position: top left;
  }

  .fea-card__deco--pc-bottom img {
    right: 0;
    bottom: 0;
    left: 0;
    object-position: bottom right;
  }

  /* SP：カード全体の装飾（従来どおり） */
  .fea-card__deco--sp {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    @media (width >= 769px) {
      display: none;
    }
  }

  .fea-card__deco--sp img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
  }

  .fea-gift {
    margin-block-start: 100px;
    padding-block: 60px 72px;
    background: var(--fea-gift);

    @media (width >= 769px) {
      margin-block-start: 81px;
      padding-block: 49px 56px;
    }
  }

  .fea-gift__layout {
    display: grid;
    grid-template-areas:
      "title"
      "photos"
      "soon";
    justify-items: start;

    @media (width >= 769px) {
      grid-template-columns: minmax(0, 404px) minmax(0, 1fr);
      grid-template-areas:
        "title photos"
        "soon photos";
      column-gap: 68px;
      align-items: center;
    }
  }

  .fea-gift__title {
    grid-area: title;
    color: var(--fea-teal);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.67;
  }

  .fea-gift__photos {
    display: grid;
    grid-area: photos;
    grid-template-columns: minmax(0, 281fr) minmax(0, 283fr);
    column-gap: 25px;
    align-items: start;
    width: min(589px, 100%);
    margin-block-start: 30px;

    @media (width >= 769px) {
      justify-self: end;
      margin-block-start: 0;
    }
  }

  .fea-gift__photo {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .fea-gift__photo--set {
    aspect-ratio: 281 / 237;
    border-radius: 10px;
  }

  .fea-gift__photo--bib {
    aspect-ratio: 283 / 234;
    margin-block-start: 47px;
  }

  .fea-gift__soon {
    display: grid;
    grid-area: soon;
    place-items: center;
    width: min(380px, 100%);
    min-height: 72px;
    margin-block-start: 79px;
    margin-inline: auto;
    border-radius: 100px;
    background: var(--fea-soon);
    color: #fff;
    font-family: var(--fea-en);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    justify-self: center;

    @media (width >= 769px) {
      width: min(280px, 100%);
      min-height: 60px;
      margin-block-start: 21px;
      margin-inline: 0;
      font-size: 22px;
      justify-self: start;
    }
  }
}

@container (width < 769px) {
  #efea26100 {
    width: 700px;
    zoom: calc(100cqi / 700px);
  }
}