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

body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  background: #e4e4e4;
  color: #222;
}


.page-wrap {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 150px 0 80px;
}



.article-wrap {
  max-width: 100%;
  margin: 40px auto;
  
}

/* ===== メタ行 ===== */


.meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 14px 6px;
  border-bottom: 1px solid #ddd;
}
.meta-bar__left { display: flex; flex-direction: column; gap: 2px; }
.meta-bar__category {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #222;
}

.meta-bar__date {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  color: #888;
  letter-spacing: .06em;
}


/* ===== 本文エリア ===== */
.article-body {
  padding: 24px 28px 32px;
  border-top: 1px solid #ddd;
}


.article-body__subheadline {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  color: #222;
  line-height: 1.45;
  margin-bottom: 16px;
}

.article-body__text {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.9;
  margin-bottom: 14px;
}



/* ===== レスポンシブ ===== */
@media (max-width: 640px) {
  .article-body { padding: 16px 16px 24px; }
}

.article-body__subheadline{font-size: 1.6rem;}



/* ===== PAGE1 グリッド ===== */
.p1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: auto;
  background: #e4e4e4;
  border: none solid #ddd;
}
.col1 { display: grid; grid-template-rows: none; border-right: none; border-bottom: none solid #ddd; min-height: auto; }
.col2 { display: grid; grid-template-rows: none; border-right: none; border-bottom: none solid #ddd; min-height: auto; }
.col3 { display: grid; grid-template-rows: none; border-right: none; border-bottom: none solid #ddd; min-height: auto; }
.col4 { display: block; min-height: auto; }

/* 列3上：横2分割 */
.col3-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
}



/* =====================
   セル共通：画像が背景・テキストがオーバーレイ
   ===================== */

.cell {
  position: relative;
  overflow: hidden;
  min-height: 120px;
}
.cell > img.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.cell:hover > img.bg { transform: scale(1.04); }

.cell > img.bg-contain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.cell:hover > img.bg-contain { transform: scale(1.03); }

/* オーバーレイ共通 */
.ov { position: absolute; z-index: 2; }

/* =====================
   画像position修飾子
   ===================== */
.img--top-center   { object-position: top center; }
.img--center       { object-position: center; }
.img--center-top   { object-position: center top; }
.img--opacity15    { opacity: .15; }

/* =====================
   タグ
   ===================== */
.tag { font-size: .7rem; color: #222; letter-spacing: .04em; font-family: 'Outfit', sans-serif; font-weight: 300; }
.tag--sm { font-size: 9px; color: #555; }

/* =====================
   ブランド名
   ===================== */
.brand {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  color: #222;
  line-height: 1.15;
}
.brand-lg  { font-size: 1.6rem; }
.brand-md  { font-size: 1.6rem; }
.brand-sm  { font-size: 1.6rem; }


.brand::first-letter {
  font-size: 1.5em;
  color: #1a5a9a;
}

.brand.second::first-letter {
  font-size: 1em;
  color: inherit;
}

.brand.second .second-char {
  font-size: 1.5em;
  color: #1a5a9a;
}

/* =====================
   サブ・ボディ
   ===================== */
.sub  { font-size: .8rem; color: #555; }
.body { font-size: .7rem; color: #222; line-height: 1.6; font-weight: 400; }

/* =====================
   縦書き
   ===================== */
.vert {
  writing-mode: vertical-rl;
  font-size: 9px;
  color: #777;
  letter-spacing: .1em;
  white-space: nowrap;
}

/* =====================
   半透明白背景
   ===================== */
.bg-w  { background: rgba(255,255,255,.88); padding: 8px 10px; }
.bg-w2 { background: rgba(255,255,255,.92); padding: 10px 12px; }





/* =====================
   汎用オーバーレイ位置
   ===================== */
/* 縦書き：右中央 */
.ov--vert-right { top: 50%; right: 10px; transform: translateY(-50%); }
/* 縦書き：左中央 */
.ov--vert-left  { top: 50%; left: 10px; transform: translateY(-50%); }
/* 縦書き：上40%（右） */
.ov--vert-40 { top: 40%; }

/* 左上：タグ＋ブランド名コンテナ */
.ov--tl { top: 14px; left: 14px; display: flex; flex-direction: column; gap: 5px; }
/* 左上：right付き */
.ov--tl-wide { top: 14px; left: 14px; right: 14px; display: flex; flex-direction: column; gap: 4px; }
/* 左上：小さめ padding */
.ov--tl-sm { top: 10px; left: 12px; }

/* 左下：タグ＋ブランド名コンテナ */
.ov--bl { bottom: 14px; left: 14px; display: flex; flex-direction: column; gap: 4px; }
/* 左下：right付き */
.ov--bl-wide { bottom: 18px; left: 14px; right: 28px; }
/* 左下：left30px */
.ov--bl-left30 { bottom: 14px; left: 30px; display: flex; flex-direction: column; gap: 3px; }

/* flex列方向 */
.ov--col { display: flex; flex-direction: column; gap: 4px; }

/* 全面中央揃え */
.ov--inset-center {
  inset: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
/* 全面・左上揃え */
.ov--inset-col {
  inset: 0;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-start;
}
/* 全面・半透明白bg */
.ov--inset-overlay {
  inset: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: rgba(255,255,255,.75);
}



/* =====================
   汎用テキストスタイル
   ===================== */

.txt--10-555  { font-size: 10px; color: #555; }


/* =====================
   セル個別：背景色・border
   ===================== */

.cell--asics     { background: #b1b4bb;  }
.cell--BUSTIER { background: #f1f1f1; }
.cell--cotopaxi      { background: #e4e4e4;  }
.cell--DENIMJK       { background: #dde1dc;  }
.cell--DENIMJK-model { background: #dde1dc; }
.cell--Exclusive  { background: #dce4ea;  }
.cell--Exclusive-model { background: #e3e3e3; }
.cell--Flat    { background: #e4e4e4; }
.cell--GRAPHIC    { background: #e4e4e4; }
.cell--Half { background: #e4e4e4;}
.cell--INNER   { background: #e4e4e4; }
.cell--sneakers { background: #f0eeea; }
.cell--khaki  { background: #e4e4e4;  }
.cell--Usude  { background: #f0eeea; min-height: 500px;}
.cell--JACQUARD      { background: #e4e4e4;  }
.cell--Bagmati { background: #e4e4e4; }
.cell--LEOPARD { background: #d8dce5;  }
.cell--MARY    { background: #eaeeef;  }
.cell--Neckline    { background: #fff; }
.cell--ONEWASH  { background: #e4e4e4;  }
.cell--Matador { background: #e4e4e4; }
.cell--Queen { background: #e4e4e4;  }
.cell--canterbury { background: #e4e4e4; }
.cell--hoshii { background: #e4e4e4;  }
.cell--yellow { background: #e4e4e4;  }
.cell--ZIPPER    { background: #f1f1f1;  }
.cell--WATER  { background: #e4e4e4;  }




/* =====================
   本文オーバーレイ：個別位置
   ===================== */
/* 下部・左右余白あり（汎用） */
.ov--body-bottom-lr { bottom: 12px; left: 14px; right: 14px; }
.ov--body-orcival { bottom: 15px; left: 130px; right: 26px; }
.ov--body-GRAPHIC { top: 13px; left: 170px; right: 28px; }
.ov--body-weston { bottom: 15px; left: 160px; right: 28px; }
.ov--body-bic { bottom: 14px; left: 100px; right: 10px; }
.ov--body-diptyque { bottom: 12px; left: 14px; right: 14px; }
.ov--body-paraboot { bottom: 10px; left: 140px; right: 10px; }
.ov--body-LEOPARD { bottom: 20px; left: 160px; right: 10px; }
.ov--body-MARY { bottom: 10px; left: 180px; right: 10px; }
.ov--body-WATER { bottom: 10px; left: 280px; right: 10px;  color:#fff}
.ov--body-Matador { bottom: 14px; left: 160px; right: 28px; color:#fff}
.ov--body-khaki-top { bottom: 80px; left: 14px; right: 14px; font-size: .7rem; color: #333; }
.ov--body-khaki-jk { bottom: 18px; left: 14px; right: 28px;color:#fff }
.ov--body-JACQUARD { top: 14px; left: 14px; right: 28px;  color: #333; line-height: 1.6; }
.ov--body-longchamp2 { bottom: 14px; left: 14px; right: 32px; background: rgba(255,255,255,.85); padding: 8px 10px; }
.ov--body-canterbury-top { top: 14px; left: 14px; right: 28px; font-size: .7rem; color: #444; line-height: 1.6; }
.ov--sneaker-caption { bottom: 10px; left: 14px; }
.ov--body-hoshii { top: 80px; left: 14px; right: 28px;  color: #333; line-height: 1.6; }
.ov--body-ZIPPER { bottom: 10px; left: 160px; right: 10px; }
.ov--body-yellow { bottom: 12px; left: 160px; right: 10px;  color:#fff}

@media (max-width: 500px) {
.ov--body-WATER { top: 10px; left: 10px; right: 10px;  color:#fff}
}

/* =====================
   全列・全セルに高さを確保
   ===================== */


.cell { min-height: 260px; }

/* ===== PAGE3 ===== */
.p3 {
  display: grid;
  grid-template-columns: 50% 50%;
  background: #e4e4e4;
  
  margin-top: 8px;
}
.p3-left {
  display: grid;
  grid-template-rows: auto;
  
}


.p3-bottom {
  display: grid;
  grid-template-columns: 50% 50%;
}

.p3-bottom2 {
  display: grid;
  grid-template-columns: 100%;
}

/* ===== PAGE4 ===== */
.p4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: auto;
  background: #e4e4e4;
  
  margin-top: 8px;
}
.p4-col1 { display: grid; grid-template-rows: none; border-right: none; border-bottom: none solid #ddd; }
.p4-col2 { display: grid; grid-template-rows: none; border-right: none; border-bottom: none solid #ddd; }
.p4-col3 { display: grid; grid-template-rows: none; border-right: none; border-bottom: none solid #ddd; }
.p4-col4 { display: grid; grid-template-rows: none; }



/* ===== フェードイン ===== */
.spread,
.article-wrap {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.spread.is-visible,
.article-wrap.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =====================
   レスポンシブ
   ===================== */
@media (max-width: 1000px) {
  .p1, .p2, .p3, .p4 { grid-template-columns: 1fr; }
  .col3-top { grid-template-columns: 1fr; }
  .p3-left { grid-template-rows: auto; border-right: none; border-bottom: none solid #ddd; }
  .p3-bottom { grid-template-columns: 1fr; }
  .cell { min-height: 300px; }
     
}






/* ===== 追従セールバー ===== */
.sale-bar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999 !important;
  background-color: #c8151b;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 8px,
    rgba(255,255,255,.08) 8px,
    rgba(255,255,255,.08) 16px
  );
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  font-family: 'Outfit', 'Zen Kaku Gothic New', sans-serif;
}

.sale-bar__badge {
  background: #fff;
  color: #c8151b;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sale-bar__badge strong {
  font-size: 18px;
  letter-spacing: 0;
}

.sale-bar__text {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}

.sale-bar__period {
  color: rgba(255,255,255,.85);
  font-size: 11px;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.5);
  padding: 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sale-bar__arrow {
  color: #fff;
  font-size: 14px;
  flex-shrink: 0;
  text-decoration: none;
}

@media (max-width: 640px) {
  .sale-bar { gap: 8px; padding: 8px 10px; }
  .sale-bar__text { font-size: 11px; }
  .sale-bar__period { font-size: 10px; padding: 2px 7px; }
  .sale-bar__badge strong { font-size: 15px; }
}

.col3, .col4 {
  display: grid;
  grid-template-rows: 1fr auto auto;
}

/* PC用：デフォルト */
.sp-only { display: none; } /* スマホ用は隠す */
.pc-only { display: block; } /* PC用を表示 */

/* スマホ用（画面幅が768px以下の場合） */
@media screen and (max-width: 768px) {
  .pc-only { display: none; } /* PC用を隠す */
  .sp-only { display: block; } /* スマホ用を表示 */
}