@charset "UTF-8";

/* ==========================================================================
   cle-footer.css — CLE SIESTE フッター（全ページ共通）

   移植元: docs/design/sample_0820/styles.css 2339〜2434 行（本体）
                                              2492〜（〜1024）
                                              2634〜（タブレット）
                                              3225〜（SP）
           docs/design/sample_0820/index-v2.css 8節（ロゴの寸法と位置）

   マークアップは ec_force/shop/sections/footer.liquid。

   読み込みは _head.html.liquid。cle-header.css の後、cle-top.css の前。
   ヘッダーと同じく全ページで読むので、TOP専用の指定は書かないこと。

   クラス名の対応表:
     .site-footer         → .cle-footer
     .footer-inner        → .cle-footer__inner
     .footer-brand        → .cle-footer__brand
     .footer-logo         → .cle-footer__logo
     .footer-links        → .cle-footer__links
     .footer-links div    → .cle-footer__group
     .footer-links b      → .cle-footer__group-title
     .footer-links a      → .cle-footer__link
     .footer-bottom       → .cle-footer__bottom
     .footer-bottom-links → .cle-footer__legal
   ========================================================================== */

/* 背景画像の URL は liquid が style 属性で --cle-footer-bg に渡す
   （ファイルアップロード側にあるため、URL をここに書けない）。

   background-color を敷いているのは、TOPページで背後の固定ヒーローが
   透けるのを防ぐため。画像未設定でも成立させる意味もある。

   z-index は付けない。TOPでは cle-top.css の
   「.cle-hero ~ [data-section-id]」で 10 が入る。 */
.cle-footer {
  position: relative;
  padding: 50px 0 30px;
  background-color: #17120d;
  background-image: var(--cle-footer-bg, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: rgba(255, 250, 244, 0.94);
}

.cle-footer__inner,
.cle-footer__bottom {
  width: min(100%, 1400px);
  margin-inline: auto;
  padding-inline: 42px;
}

/* ロゴを左、リンクの列を右端に寄せる。 */
.cle-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 88px;
}

.cle-footer__brand {
  flex: 0 0 270px;
  margin-top: -20px;
  text-decoration: none;
}

/* 幅は liquid が --cle-footer-logo-w で渡す（既定 126px）。
   位置の微調整に transform を使うのは、margin だとフッターの高さや
   リンク列の位置まで動いてしまうため。見た目だけ動かす。 */
.cle-footer__logo {
  width: var(--cle-footer-logo-w, 126px);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  transform: translate(12px, 12px);
}

.cle-footer__links {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 40px;
  flex: 0 0 auto;
  width: max-content;
  margin-left: auto;
  padding-top: 4px;
  justify-items: start;
}

.cle-footer__group {
  display: grid;
  align-content: start;
  gap: 12px;
}

.cle-footer__group-title {
  margin: 0 0 10px;
  color: rgba(255, 250, 244, 0.96);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.cle-footer__link {
  color: rgba(255, 250, 244, 0.94);
  font-size: 13px;
  line-height: 1.15;
  text-decoration: none;
}

/* 和文は欧文より一段小さく、細く組む。
   欧文（lang="en"）は cle-common.css の :lang(en) で
   Cormorant Garamond になる。 */
.cle-footer__link:not([lang='en']) {
  font-size: 0.8em;
  font-weight: 100;
}

/* ---- 最下段 ------------------------------------------------------------ */

.cle-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
  padding-top: 27px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.3;
}

.cle-footer__bottom > span:first-child {
  font-size: 10px;
}

.cle-footer__legal {
  font-size: 80%;
  font-weight: 100;
  text-align: right;
}

.cle-footer__legal a {
  color: inherit;
  text-decoration: none;
}

.cle-footer__legal a:hover,
.cle-footer__legal a:focus-visible {
  text-decoration: underline;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* ---- 〜1024 ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .cle-footer__inner,
  .cle-footer__bottom {
    padding-inline: 24px;
  }
}

/* ---- タブレット（769〜1199）------------------------------------------- */
@media (min-width: 769px) and (max-width: 1199px) {
  .cle-footer__inner,
  .cle-footer__bottom {
    padding-inline: clamp(24px, 4.2vw, 42px);
  }

  .cle-footer__inner {
    gap: clamp(32px, 4vw, 88px);
  }

  .cle-footer__brand {
    flex-basis: clamp(180px, 20vw, 270px);
    margin-top: clamp(-18px, -1.6vw, -10px);
  }

  .cle-footer__links {
    gap: clamp(24px, 3vw, 40px);
  }
}

/* ---- SP（〜768）------------------------------------------------------- */
@media (max-width: 768px) {
  /* リンクの列を先に出し、ロゴを下の右端に置く。 */
  .cle-footer__inner,
  .cle-footer__bottom {
    flex-direction: column;
    padding-inline: 38px;
  }

  .cle-footer__inner {
    gap: 20px;
  }

  .cle-footer__brand {
    flex-basis: auto;
    order: 2;
    align-self: flex-end;
    margin-top: 12px;
  }

  .cle-footer__logo {
    width: 130px;
    /* 右端揃えになるので、PCの寄せは戻す。 */
    transform: none;
  }

  /* 2列に折り返し、3列目だけ幅いっぱいに置く。 */
  .cle-footer__links {
    order: 1;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: auto;
    gap: 28px;
    width: 100%;
  }

  .cle-footer__group:nth-child(3) {
    grid-column: 1 / -1;
  }

  .cle-footer__group-title {
    font-size: 16px;
  }

  .cle-footer__link,
  .cle-footer__link:not([lang='en']) {
    font-size: 14px;
  }

  .cle-footer__bottom {
    align-items: flex-start;
    gap: 12px;
  }

  .cle-footer__legal {
    text-align: left;
  }
}