@charset "utf-8";@charset "UTF-8";
#header,
.keyword-box,
.crumbsList,
#header .header__nav,
#header .header__inner,
#header .header__nav--bottom {
  display: none;
}

/* ===============================
   基本リセット
=============================== */
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* ===============================
   MC LOOK2026 メインコンテナ
=============================== */
.mc-look2026 {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* ===============================
   ヒーロー画像エリア (通常)
=============================== */
.mc-look2026-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.mc-look2026-hero picture {
  display: block;
  width: 100%;
  height: 100%;
}

.mc-look2026-hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   TOP画像 (パララックス適用)
=============================== */
.mc-look2026-hero--parallax {
  clip-path: inset(0);
  aspect-ratio: 768 / 1080; 
}

.mc-look2026-hero--parallax picture {
  display: contents; 
}

/* 画面に固定される背景画像 */
.mc-look2026-hero--parallax img {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: none; 
  aspect-ratio: 768 / 1080; 
  object-fit: cover;
  object-position: center;
  z-index: -1;
  will-change: transform;
}

/* PC用の比率 (1920x1080ベース) */
@media (min-width: 768px) {
  .mc-look2026-hero--parallax {
    aspect-ratio: 1920 / 1080;
  }
  .mc-look2026-hero--parallax img {
    aspect-ratio: 1920 / 1080;
  }
}

/* 最後のヒーロー画像上の余白 */
.mc-look2026-hero--final {
    /* margin-top: clamp(60px, 8vw, 100px); */
}

/* ===============================
   TOPロゴ画像設定
=============================== */
/* ▼ SP用（スマホサイズ基本）指定 ▼ */
.mc-look2026-top-logo {
  position: fixed;
  top: 17%;
  left: 40%;
  transform: translate(-50%, -50%);
  width: 70%;
  padding: 0 4%;
  box-sizing: border-box;
  z-index: 2;
  pointer-events: none;
}

.mc-look2026-top-logo img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* ▼ 320pxサイズ用の指定 ▼ */
@media (max-width: 320px) {
  .mc-look2026-top-logo {
    top: 15%; 
  }
}

/* ▼ PC用（768px以上）の指定 ▼ */
@media (min-width: 768px) {
  .mc-look2026-top-logo {
    top: 25%;
    left: 25%;
    width: 40%;
  }
  .mc-look2026-top-logo img {
    max-width: 100%;
  }
}

/* ===============================
   アイテムグリッドエリア
=============================== */
.mc-look2026-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  position: relative; 
  z-index: 3;
  background-color: #fff; 
}

.mc-look2026-item {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.mc-look2026-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===============================
   テキスト・クレジット設定
=============================== */
.mc-look2026-title {
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  color: #fff;
  font-size: clamp(20px, 3.5vw, 40px);
  font-weight: 500;
  letter-spacing: 0.05em;
  z-index: 2;
}

.mc-look2026-credit {
  position: absolute;
  bottom: 4%;
  right: 5%;
  color: #fff;
  font-size: clamp(10px, 1.5vw, 16px);
  line-height: 1.6;
  text-shadow: 0px 1px 3px rgba(0,0,0,0.3);
  pointer-events: none;
  z-index: 2;
}

.mc-look2026-credit p {
  margin: 0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5em;
}

.mc-look2026-credit a {
  color: #fff;
  text-decoration: underline;
  pointer-events: auto;
}

/* ===============================
   フッターエリア設定
=============================== */
.mc-look2026-footer {
  padding: clamp(80px, 10vw, 120px) 20px 60px;
  text-align: center;
  background-color: #fff;
  position: relative;
  z-index: 3;
}

.mc-look2026-footer-links {
  margin-bottom: 80px;
}

.mc-look2026-footer-links a {
  display: block;
  color: #111;
  text-decoration: none;
  font-size: clamp(17px, 2vw, 22px);
  margin-bottom: 24px;
  letter-spacing: 0.05em;
}

.mc-look2026-footer-links a:last-child {
  margin-bottom: 0;
}

.mc-look2026-footer-links a:hover {
  opacity: 0.7;
}

.mc-look2026-footer-logo img {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===============================
   自動スライド (CSSアニメーション)
=============================== */
.mc-css-slider {
  display: grid;
  width: 100%;
  height: 100%;
}

.mc-css-slider > img,
.mc-css-slider > picture {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  opacity: 0; /* 初期は非表示 */
}

/* pictureタグ内のimgも100%に */
.mc-css-slider > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----- 2枚用スライダー (8秒周期) ----- */
.mc-css-slider--2 > img,
.mc-css-slider--2 > picture {
  animation: mcSlideFade2 8s infinite;
}

.mc-css-slider--2 > *:nth-child(1) { animation-delay: 0s; }
.mc-css-slider--2 > *:nth-child(2) { animation-delay: -4s; }

@keyframes mcSlideFade2 {
  0%    { opacity: 1; }
  37.5% { opacity: 1; } 
  50%   { opacity: 0; } 
  87.5% { opacity: 0; } 
  100%  { opacity: 1; }
}

/* ----- 3枚用スライダー (12秒周期) ----- */
.mc-css-slider--3 > img,
.mc-css-slider--3 > picture {
  animation: mcSlideFade3 12s infinite;
}
.mc-css-slider--3 > *:nth-child(1) { animation-delay: 0s; }
.mc-css-slider--3 > *:nth-child(2) { animation-delay: -8s; }
.mc-css-slider--3 > *:nth-child(3) { animation-delay: -4s; }

@keyframes mcSlideFade3 {
  0%     { opacity: 1; }
  25%    { opacity: 1; } 
  33.33% { opacity: 0; } 
  91.66% { opacity: 0; } 
  100%   { opacity: 1; } 
}