/* ==========================================================
   CHATROIS HALLOWEEN
   ========================================================== */


/* ==========================================================
   BREADCRUMB
   自動生成パンくずをMV上に重ねる
   ========================================================== */

#fs_CustomPage .fs-c-breadcrumb {
  position: relative;
  z-index: 10;

  width: calc(100% - 40px);
  max-width: 1200px;

  margin: 0 auto -54px;
  padding: 18px 0;

  background: transparent;

  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .03em;

  color: rgba(255, 255, 255, .8);
}

#fs_CustomPage .fs-c-breadcrumb a {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
}

#fs_CustomPage .fs-c-breadcrumb a:hover {
  color: #fff;
}


/* ==========================================================
   HALLOWEEN MV
   ========================================================== */

#fs_CustomPage .feature-mv--halloween {

  background-image: url(/item/_assets/images/halloween/halloween-mv-pc.webp);
  background-position: center calc(50% + 45px);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: #f36b21;
  min-height: 1000px;
  color: #fff;
	
}


/* ==========================================================
   MV CONTENT
   ========================================================== */

#fs_CustomPage .feature-mv--halloween .feature-mv__content {
  position: relative;
  z-index: 2;

}


/* ==========================================================
   HALLOWEEN LOGO
   ========================================================== */

#fs_CustomPage .feature-mv--halloween .feature-mv__title {
  margin-top: 0;
  margin-bottom: 26px;
}

#fs_CustomPage .feature-mv--halloween .feature-mv__logo {
  display: block;

  width: min(520px, 36vw);
  max-width: 100%;
  height: auto;
}


/* ==========================================================
   LEAD
   ========================================================== */

#fs_CustomPage .feature-mv--halloween .feature-mv__lead {
  color: rgba(255, 255, 255, .95);

  font-size: 14px;
  line-height: 2.1;
  letter-spacing: .04em;
}

#fs_CustomPage .feature-mv--halloween .feature-mv__lead p {
  margin: 0;
}

#fs_CustomPage .feature-mv--halloween .feature-mv__lead p + p {
  margin-top: 18px;
}

/* ==========================================================
   HALLOWEEN TYPOGRAPHY
   ========================================================== */

/* 英字ラベル */
#fs_CustomPage .feature-section--seasonal .feature-section__en,
#fs_CustomPage .feature-section--more .feature-section__en {
/*  font-family: Georgia, "Times New Roman", serif;*/
  font-size: 16px;
  font-weight: 600;
/*  font-style: italic;*/
  letter-spacing: .18em;
  color: #b85f32;
}

/* セクション見出し */
#fs_CustomPage .feature-section--seasonal .feature-section__title,
#fs_CustomPage .feature-section--more .feature-section__title {
  font-weight: 400;
  letter-spacing: .08em;
  color: #382a2e;
}


/* キャッチ */
#fs_CustomPage
.feature-section--seasonal
.feature-product-card__catch {
  font-family: var(--feature-font-serif);

  font-size: 14px;
  font-weight: 500;
  letter-spacing: .05em;

  color: #b85f32;
}


/* 商品名 */
#fs_CustomPage
.feature-section--seasonal
.feature-product-card__name {
  font-family: var(--feature-font-serif);

  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
}


/* 説明文 */
#fs_CustomPage
.feature-section--seasonal
.feature-product-card__description {
  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    "Noto Sans JP",
    sans-serif;

  font-weight: 400;
  line-height: 1.9;
}


/* 価格 */
#fs_CustomPage
.feature-section--seasonal
.feature-product-card__price {
  font-family: Arial, sans-serif;
  font-weight: 500;
}


/* ==========================================================
   HALLOWEEN / SEASONAL PRODUCTS
   ========================================================== */

#fs_CustomPage .feature-section--seasonal {
  width: 100vw;
  margin-left: calc(50% - 50vw);

  background: #fcf0d1;
}

/* ==========================================================
   HALLOWEEN / MORE
   ========================================================== */

#fs_CustomPage .feature-section--more {
  padding-top: 110px;
  background: #fff;
}

/* MORE配下のフル幅グループ背景 */
#fs_CustomPage .feature-section__group--cat,
#fs_CustomPage .feature-section__group--gift  {
  background: #f5deda;
}


/* ==========================================================
   HALLOWEEN MV / SP
   ========================================================== */

@media (max-width: 767px) {
	
  /* 固定ヘッダー下の白い余白を縮める */
  body#fs_CustomPage {
    padding-top: 100px;
  }


  /* ------------------------------------------
     BREADCRUMB
     ------------------------------------------ */

  #fs_CustomPage .fs-c-breadcrumb {
    width: calc(100% - 32px);

    margin: 0 auto -44px;
    padding: 12px 0;

    font-size: 10px;
    line-height: 1.5;
  }


  /* ------------------------------------------
     MV
     ------------------------------------------ */

  #fs_CustomPage .feature-mv--halloween {
    min-height: 640px;

    padding:
      72px
      20px
      80px;

    background-color: #f36b21;

    /* SP画像完成後にURLだけ入れる */
    background-image:
      url("/item/_assets/images/halloween/halloween-mv-sp.webp");

    background-position:
      center top;

    background-size:
      cover;

    background-repeat:
      no-repeat;

    background-attachment:
      scroll;
  }


  /* ------------------------------------------
     CONTENT
     ------------------------------------------ */

  #fs_CustomPage .feature-mv--halloween .feature-mv__content {
    width: 100%;
    max-width: none;

    margin: 0 auto 0;
    text-align: center;
  }


  /* ------------------------------------------
     LOGO
     ------------------------------------------ */

  #fs_CustomPage .feature-mv--halloween .feature-mv__title {
    margin: 0 0 14px;
  }

  #fs_CustomPage .feature-mv--halloween .feature-mv__logo {
    width: min(340px, 78vw);
    max-width: 100%;
    height: auto;

    margin: 0 auto;
  }


  /* ------------------------------------------
     LEAD
     ------------------------------------------ */

  #fs_CustomPage .feature-mv--halloween .feature-mv__lead {
    display: none;
  }

  /* ------------------------------------------
     SEASONAL PRODUCTS
     ------------------------------------------ */

  #fs_CustomPage
  .feature-section--seasonal
  .feature-product-card__link {
    padding: 24px;
  }


  /* ------------------------------------------
     MORE
     ------------------------------------------ */

  #fs_CustomPage .feature-section--more {
    padding-top: 72px;
  }


}