@charset "utf-8";
/* このファイルはUTF-8のBOMなし(UTF-8N)で保存しています */

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://test.albion-cosmetics.com/
 * File name: promotion.css
 * Summary:   GLOBAL PROMOTIONコンテンツの固有スタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    promotion
 *
 * ===============================================================
*/

/** =1
 * ========================================
 * promotion
 * ========================================
 */

#promotion {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
}

/**
	 * sectionPromotion
	 * ----------------------------------
	 */
.sectionPromotion {
}
.sectionPromotion img {
  max-width: 100%;
  height: auto;
}

.sectionPromotionTitle {
  border-top: 1px solid #c8c8c8;
  font-family: "OptimaLTPro-Roman", Optima, Calibri, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.2;
}

.sectionPromotionContent {
}
.sectionPromotion .itemImage {
  text-align: center;
}
.sectionPromotion .itemText {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionPromotion {
    margin-bottom: 30px;
  }

  .sectionPromotionTitle {
    margin: 45px 0 30px;
    padding-top: 30px;
    font-size: 2.8rem;
  }

  .sectionPromotion .itemText {
    line-height: 1.2;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionPromotion {
    margin-bottom: 40px;
  }

  .sectionPromotionTitle {
    margin: 90px 0 70px;
    padding-top: 70px;
    font-size: 40px;
    font-size: 4rem;
  }

  .sectionPromotion .itemText {
    line-height: 1.7;
  }
}

/* [ basic ]
		------------------------------ */
.sectionPromotion.basic {
}

.sectionPromotion.basic .itemImageHero img {
  width: 100%;
  height: auto;
}
.sectionPromotion.basic .sectionPromotionTitle {
  margin: 0;
  padding: 0;
  border-top: none;
}
.sectionPromotion.basic .itemText {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionPromotion.basic .itemImageHero {
    margin-top: -40px;
    margin-bottom: 11.25%;
  }
  .sectionPromotion.basic .sectionPromotionTitle {
    margin-bottom: 0.7em;
    font-size: 3.3rem;
    line-height: 1.12;
  }
  .sectionPromotion.basic .itemText {
    font-size: 1.6rem;
    line-height: 1.4;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionPromotion.basic .itemImageHero {
    margin-bottom: 70px;
  }
  .sectionPromotion.basic .sectionPromotionTitle {
    margin-bottom: 30px;
    font-size: 60px;
    font-size: 6rem;
    line-height: 1.17;
  }
  .sectionPromotion.basic .itemText {
    font-size: 20px;
    font-size: 2rem;
    line-height: 1.6;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .sectionPromotion.basic .itemImageHero {
    margin-top: -40px;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  .sectionPromotion.basic .itemImageHero {
    margin-top: -60px;
  }
}

/* [ pattern01 ]
		------------------------------ */
.sectionPromotion.pattern01 {
}
.sectionPromotion.pattern01 .itemText {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
}

/* [ pattern02 ]
		------------------------------ */
.sectionPromotion.pattern02 {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionPromotion.pattern02 .itemImage {
    margin-bottom: 1.25em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionPromotion.pattern02 .itemImage,
  .sectionPromotion.pattern02 .itemText {
    float: left;
    width: 48%;
  }
  .sectionPromotion.pattern02 .itemImage {
    margin-right: 4%;
  }

  .sectionPromotion.pattern02.type-b .itemText {
    float: none;
    width: auto;
  }
  .sectionPromotion.pattern02.type-b .itemImage {
    margin-bottom: 2%;
  }
}

/* [ pattern03 ]
		------------------------------ */
.sectionPromotion.pattern03 {
}
.sectionPromotion.pattern03 .itemLink {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
}

/* [ pattern04 ]
		------------------------------ */
.sectionPromotion.pattern04 {
}
.sectionPromotion.pattern04 .itemImage {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
}

/* [ pattern05 ]
		------------------------------ */
.sectionPromotion.pattern05 {
}
.sectionPromotion.pattern05 .itemImage {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionPromotion.pattern05 .itemImage:first-child {
    margin-bottom: 20px;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionPromotion.pattern05 .itemImage {
    float: left;
    width: 48%;
  }
  .sectionPromotion.pattern05 .itemImage:first-child {
    margin-right: 4%;
  }
}