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

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

/** =1
 * ========================================
 * icon
 * ========================================
 */

#icon {
}

/**
	 * articleIcon
	 * ----------------------------------
	 */

.sectionIcon {
}
/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionIconTitle {
    font-size: 1.8rem;
  }
  .sectionIcon .itemText {
    line-height: 1.65;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionIconTitle {
    font-size: 36px;
    font-size: 3.6rem;
    line-height: 1.28;
  }
}

/** =2
 * ========================================
 * icon - index
 * ========================================
 */

/** =3
 * ========================================
 * icon - milk lotion
 * ========================================
 */
.articleIconMilk {
}

/**
	 * section04
	 * ----------------------------------
	 */
.articleIconMilk .sectionIcon.sec04 {
}

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

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec04 .itemList .textTitle {
    font-family: "OptimaLTPro-Roman", "Helvetica Neue", Helvetica, Arial,
      "微軟正黑體", sans-serif;
  }
}

/** =4
 * ========================================
 * icon - Skin Conditiner
 * ========================================
 */
.articleIconSkicon {
}

/**
   * section01
   * ----------------------------------
   */
.articleIconSkicon .sectionIcon.sec01 {
}

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

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconSkicon .sectionIcon.sec01 {
    padding: 18.75% 0 25%;
    padding: calc(240 / 1280 * 100%) 0 calc(320 / 1280 * 100%);
  }
}

/** =5
 * ========================================
 * icon - Chiffon
 * ========================================
 */
.articleIconChiffon {
}

/**
	 * section04
	 * ----------------------------------
	 */

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconChiffon .sectionIcon.sec04 {
    padding: 19% 0 19%;
  }
}

/** =6
 * ========================================
 * icon - Herbal Oil
 * ========================================
 */
.articleIconHerbal {
}

/**
	 * section02
	 * ----------------------------------
	 */

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconHerbal .sectionIcon.sec02 .l-inner {
    padding: 9.375% 0 14.84375%;
  }
}

/**
	 * section03
	 * ----------------------------------
	 */
.articleIconHerbal .sectionIcon.sec03 .flo_right .itemTitle {
  margin-bottom: 0.6em;
}

/**
	 * section04
	 * ----------------------------------
	 */
.articleIconHerbal .sectionIcon.sec04 .itemText + .itemText {
  margin-top: 1.3em;
}

/* [ using Herbal Oil ]
		------------------------------ */
#usingOil .content02 .box .itemText .txt_title {
  color: #f1af1f;
  font-weight: bold;
  line-height: 1.4;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  #usingOil .content02 .box .itemText .txt_title {
    margin-bottom: 0.5em;
    font-size: 1.8rem;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  #usingOil .content02 .box .itemText .txt_title {
    margin-bottom: 0.6em;
    font-size: 20px;
    font-size: 2rem;
  }
}