@charset "UTF-8";
/* ==========================================================================
   Maison Martin Margiela, 1989-2009: The Private Archive Collection
   特設ページ専用スタイル（/margiela/ ・ /en/margiela/ 共通）

   ・ブレイクポイントは既存 styles.css に合わせて 897px / 896px
   ・サイズ指定は既存 styles.css と同じ vw 基準（PCデザイン幅 1920px 想定）
   ・レイアウト（.l-inner / .p-auction-outline / .c-title-h2 / .c-hr）は
     既存クラスをそのまま流用し、ここではページ固有部分のみ定義する
   ========================================================================== */


/* --------------------------------------------------------------------------
   見出し色
   デザイン案に合わせて黒。サイト標準の青(#0055FF)に戻す場合はこの1ブロックを削除
   -------------------------------------------------------------------------- */
.p-margiela .c-title-h2 {
  color: #000; }


/* --------------------------------------------------------------------------
   KV（タイトル・ロゴは支給画像に含まれるため、画像はそのままの比率で表示）
   -------------------------------------------------------------------------- */
.p-margiela-kv img {
  display: block;
  width: 100%;
  height: auto; }

/* 画像内に焼き込まれたタイトルの代替。読み上げ・SEO用に非表示で保持 */
.p-margiela-kv__title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%); }


/* --------------------------------------------------------------------------
   オンラインカタログ公開告知（左：告知文 ／ 右：Instagram アイコン）
   -------------------------------------------------------------------------- */
.p-margiela-notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.p-margiela-notice__text {
  font-family: "Swis721_Ex_BT_Bold", "Noto Sans JP";
  font-weight: 700;
  line-height: 1.4; }

/* 告知文と参加登録リンクを区切る「｜」。本文より薄い色で入れる */
.p-margiela-notice__sep {
  color: #B3B3B3; }

.p-margiela-notice__text a {
  text-decoration: underline; }

/* Instagram アイコン。テキストが長い場合でも潰れないよう縮小を止める。
   高さは IE が SVG の viewBox からアスペクト比を導けないため幅と同値で明示する */
.p-margiela-notice__sns {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: block;
  color: #000; }

.p-margiela-notice__sns svg {
  display: block;
  width: 100%;
  height: 100%; }


/* --------------------------------------------------------------------------
   作品画像グリッド（PC 4列 / SP 2列×4段）
   IE も考慮して grid ではなく flex + % 幅で組む
   -------------------------------------------------------------------------- */
.p-margiela-gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0; }

/* 罫線は拡大しても太らないよう 1px 固定 */
.p-margiela-gallery__img {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #EDEDED;
  background-color: #F2F2F2; }

/* デザイン案(MM_WEB3.jpg)実測 128 x 160px = 4:5 の縦長で切り出し。
   比率を変える場合は padding-top を変更（正方形 → 100% / 3:2 → 66.6666%） */
.p-margiela-gallery__img:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 125%; }

.p-margiela-gallery__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover; }


/* --------------------------------------------------------------------------
   本文セクション（INTRODUCTION / COLLECTOR'S MESSAGE）
   -------------------------------------------------------------------------- */
.p-margiela-text__body p + p {
  margin-top: 1.6em; }


/* ==========================================================================
   PC
   ========================================================================== */
@media (min-width: 897px) {

  .p-margiela {
    padding-bottom: 7.8vw; }

  .p-margiela-kv {
    position: relative;
    margin-top: 1.56vw;
    padding: 0 2.6vw; }

  /* 告知文(.p-margiela-notice)の有無どちらでも間隔が成立するよう下方向のみで指定。
     告知行は Instagram アイコン(2.6vw)がテキスト行(1.25vw x 1.4)より高く、
     中央揃えのぶん文字が約14px下がるため、罫線→文字が約40pxになる値にしている
     （1920px時 25.9px + 14.1px = 40px） */
  .p-margiela .c-hr {
    margin: 0 0 1.35vw; }

  .p-margiela-notice {
    font-size: 1.25vw;
    margin: 0 0 3.12vw; }

  .p-margiela-notice__sep {
    margin: 0 0.2vw; }

  /* デザイン案実測（告知文の約2倍の高さ）。1920px 時 約50px */
  .p-margiela-notice__sns {
    width: 2.6vw;
    height: 2.6vw;
    margin-left: 2.6vw; }

  /* デザイン案実測比（タイトル幅128 : 横アキ21 : 縦アキ12）を .l-inner 幅に割り付け
     → 画像 21.10vw / 横アキ 3.46vw / 縦アキ 1.98vw */
  .p-margiela-gallery {
    margin: 0 -1.73vw; }

  .p-margiela-gallery__item {
    width: 25%;
    padding: 0 1.73vw;
    margin-bottom: 1.98vw; }

  .p-margiela-text {
    margin-top: 5.2vw; }

  .p-margiela-text__title {
    margin-bottom: 1.82vw; }

  .-jp .p-margiela-text__body {
    font-size: 0.94vw;
    font-weight: 300;
    line-height: 2; }

  .-en .p-margiela-text__body {
    font-size: 1.04vw;
    line-height: 1.8; }

}


/* ==========================================================================
   SP
   ========================================================================== */
@media (max-width: 896px) {

  .p-margiela {
    padding-bottom: 16vw; }

  .p-margiela-kv {
    position: relative;
    margin-top: 2.66vw;
    padding: 0 4.26vw; }

  /* SPは .p-auction-outline に下パディングが無く PREVIEW と罫線が密着するため、
     上マージンで間隔を作る（値は .p-auction-outline-block の margin-top と揃える）。
     下は PC と同じ比率で詰める（罫線→文字が390px幅で約18px） */
  .p-margiela .c-hr {
    margin: 10.66vw 0 2.7vw; }

  .p-margiela-notice {
    font-size: 3.2vw;
    margin: 0 0 6.66vw; }

  /* 「｜」の位置で改行し、区切り記号自体は不要になるので隠す */
  .p-margiela-notice__line {
    display: block; }

  .p-margiela-notice__sep {
    display: none; }

  /* PCと同じ「告知文の約2倍」の比率。390px幅で約27px */
  .p-margiela-notice__sns {
    width: 6.9vw;
    height: 6.9vw;
    margin-left: 4.26vw; }

  /* PCと同じアキ比率を2列に割り付け → 画像 42.27vw / 横アキ 6.94vw / 縦アキ 3.96vw */
  .p-margiela-gallery {
    margin: 0 -3.47vw; }

  /* SP は 2列×4段 */
  .p-margiela-gallery__item {
    width: 50%;
    padding: 0 3.47vw;
    margin-bottom: 3.96vw; }

  .p-margiela-text {
    margin-top: 10.66vw; }

  .p-margiela-text__title {
    margin-bottom: 4.26vw; }

  .-jp .p-margiela-text__body {
    font-size: 2.93vw;
    line-height: 1.9; }

  .-en .p-margiela-text__body {
    font-size: 3.2vw;
    line-height: 1.7; }

}