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

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

/** =1
 * ========================================
 * icon - common
 * ========================================
 */

#icon {
}

#icon.ip-milk #main,
#icon.ip-skicon #main,
#icon.ip-chiffon #main,
#icon.ip-herbal #main,
#icon.ip-poudre #main {
  margin-top: 0;
}

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

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  /* banner */
  #icon .banner .itemImage {
    width: 16%;
  }
  #icon .banner .itemText {
    width: 74.5%;
  }
}

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

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

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

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIcon .w_half {
    width: 48%;
  }
}

.sectionIcon {
}
.sectionIconTitle {
  color: #000;
  line-height: 1.3;
  letter-spacing: 0;
}
.sectionIcon .itemText {
}
.sectionIcon .boxBanner .itemText {
  line-height: 1.3;
}
.sectionIcon .itemImage {
  text-align: center;
}
.sectionIcon .itemImage img {
  max-width: 100%;
  height: auto;
}
.sectionIcon .itemImage .txt_cap {
  margin-top: 0.8em;
  color: #a0a0a0;
  line-height: 1.3;
}
.sectionIcon .itemImage .txt_cap.txt_right {
  display: block;
  margin-top: 1.5em;
}
.sectionIcon .itemImage span.txt_cap {
  display: inline-block;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionIcon {
    padding-bottom: 40px;
  }
  .sectionIconTitle {
    margin-bottom: 1em;
    font-size: 1.4rem;
  }
  .sectionIcon .itemText {
    line-height: 1.4;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionIcon {
  }
  .sectionIconTitle {
    margin-bottom: 0.6em;
    font-family: "OptimaLTPro-Roman", Optima, Calibri, Arial, sans-serif;
    font-weight: normal;
    font-size: 32px;
    font-size: 3.2rem;
  }
  .sectionIcon .itemText {
    line-height: 1.7;
  }
}

/* section movie */
.sectionIcon.secMovie {
  padding-top: 9.375%;
  padding-bottom: 12.5%;
  background: #f3edf2
    url(../image/bg_movie.jpg) center center
    no-repeat;
  background-size: cover;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionIcon.secMovie .sectionIconTitle {
    margin-bottom: 1.4em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionIcon.secMovie .sectionIconTitle {
    margin-bottom: 0.9em;
  }
}

/* [ modal ]
      ------------------------------ */
.modalIcon {
}
.modalIconTitle {
  line-height: 1.18;
  margin-bottom: 0.25em;
}

.modalIconContent {
  border-top: 1px solid #e3e3e3;
}
.modalIcon .itemImage img {
  max-width: 100%;
  height: auto;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .modalIconTitle {
    font-size: 2.2rem;
  }

  .modalIconContent {
    margin-top: 1em;
    padding-top: 15px;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .modalIconTitle {
    font-size: 32px;
    font-size: 3.2rem;
  }

  .modalIconContent {
    margin-top: 1.7em;
    padding-top: 1.8em;
  }
}

/* modal - movie */
#icon .js-modal.modalMovie {
}

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

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  #icon .js-modal.modalMovie .l-inner {
    margin: 0 3%;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  #icon .js-modal.modalMovie .l-inner {
    width: auto;
    margin: 0 40px;
  }
}

/**
   * LINE UP
   * ----------------------------------
   */
.articleProductList {
  border-top: 1px solid #c8c8c8;
}
.articleProductListTitle {
  line-height: 1;
}

.sectionProductList.icon {
}
.sectionProductList.icon .itemList {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* only milk */
.ip-milk .sectionProductList.icon {
  text-align: left;
}
.ip-milk .sectionProductList.icon .itemList .textSeries {
  margin-bottom: 0.7em;
  color: #000;
  font-size: 14px;
  font-size: 1.4rem;
  line-height: 1.15;
}
.ip-milk .sectionProductList.icon .itemList .textName {
  letter-spacing: 0.05em;
  font-size: 11px;
  font-size: 1.1rem;
  line-height: 1.65;
}
.ip-milk .sectionProductList.icon .itemList .textName,
.ip-milk .sectionProductList.icon .itemList .textName a {
  color: #a0a0a0;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleProductList {
    margin-bottom: 40px;
    padding-top: 35px;
  }
  .articleProductListTitle {
    margin-bottom: 10px;
    font-size: 2.8rem;
  }

  .sectionProductList.icon .itemList {
    width: 48%;
    margin-top: 4%;
    padding: 5%;
  }
  .sectionProductList.icon .itemList:nth-child(odd) {
    margin-right: 4%;
  }
  .sectionProductList.icon .itemList .itemImage {
    /*padding: 0 5px;*/
  }

  /* only skicon & chiffon */
  .ip-skicon .sectionProductList.icon,
  .ip-chiffon .sectionProductList.icon {
    text-align: left;
  }

  /* only milk */
  .ip-milk .sectionProductList.icon .itemList .textName {
    font-size: 1.4rem;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleProductList {
    margin-bottom: 100px;
    padding-top: 75px;
  }
  .articleProductListTitle {
    margin-bottom: 5px;
    font-size: 40px;
    font-size: 4rem;
  }

  .sectionProductList.icon {
    margin: 0 -20px;
  }
  .sectionProductList.icon .itemList {
    width: 25%;
    margin-top: 40px;
    padding: 0 20px;
  }

  .sectionProductList.icon.column3PC .itemList:nth-child(3n + 1) {
    margin-left: 12.5%;
  }
  .sectionProductList.icon.column3PC .itemList:nth-child(3n) {
    margin-right: 12.5%;
  }
}

/**
   * ICON PRODUCTS MENU
   * ----------------------------------
   */
.articleIconMenu {
}
.sectionIconMenu.is-iconDetail {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMenu {
    /* padding: 35px 15px 0; */
    padding-top: 35px;
    /* border-top: 1px solid #000; */
    border-top: 1px solid #c8c8c8;
  }
  [class*="sectionIconMenu"].is-iconDetail .sectionIconMenuTitle {
    margin-bottom: 25px;
    font-size: 2.8rem;
    line-height: 1;
  }
  /* [class*="sectionIconMenu"].is-iconDetail
    .sectionIconMenuContent:not(.displayPc) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
    -ms-flex-line-pack: stretch;
    -webkit-align-content: stretch;
    align-content: stretch;
    border: 1px solid #c8c8c8;
  }
  [class*="sectionIconMenu"].is-iconDetail .sectionIconMenuContent::before,
  [class*="sectionIconMenu"].is-iconDetail .sectionIconMenuContent::after {
    display: none;
  }
  [class*="sectionIconMenu"].is-iconDetail .sectionIconMenuContent .itemMenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -ms-flex-line-pack: center;
    -webkit-align-content: center;
    align-content: center;
    width: 50%;
    margin-bottom: -1px;
    border-bottom: 1px solid #c8c8c8;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
  }
  [class*="sectionIconMenu"].is-iconDetail
    .sectionIconMenuContent
    .itemMenu:nth-child(odd) {
    border-right: 1px solid #c8c8c8;
  }
  [class*="sectionIconMenu"].is-iconDetail .sectionIconMenuContent .itemMenu a {
    width: 100%;
    padding: 1em 1.25em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
  }
  [class*="sectionIconMenu"].is-iconDetail
    .sectionIconMenuContent
    .itemMenu
    a::before,
  [class*="sectionIconMenu"].is-iconDetail
    .sectionIconMenuContent
    .itemMenu
    a
    .itemImage {
    display: none;
  }
  [class*="sectionIconMenu"].is-iconDetail
    .sectionIconMenuContent
    .itemMenu
    a
    .itemName {
    position: static;
    padding: 0;
    background-color: transparent;
    color: #666;
    -webkit-transition: color 0.6s ease-out;
    -moz-transition: color 0.6s ease-out;
    -o-transition: color 0.6s ease-out;
    transition: color 0.6s ease-out;
  }
  .no-touch
    [class*="sectionIconMenu"].is-iconDetail
    .sectionIconMenuContent
    .itemMenu
    a:hover
    .itemName {
    color: #a9a9a9;
  } */
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  [class*="sectionIconMenu"].is-iconDetail .sectionIconMenuTitle {
    display: none;
  }
}

/* [ pagerNews ]
    ------------------------------ */

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

/**
   * navLocalIcon
   * ----------------------------------
   */
.navLocalIcon {
  margin-top: -60px;
  padding: 35px 0;
  text-align: center;
}
.navLocalIcon .itemNav {
  display: inline-block;
  margin: 0 1.5em;
  font-size: 13px;
  font-size: 1.3rem;
}
.navLocalIcon .itemNav a {
  color: #000;
  text-decoration: none;
  -webkit-transition: color 0.6s ease-out;
  -moz-transition: color 0.6s ease-out;
  -o-transition: color 0.6s ease-out;
  transition: color 0.6s ease-out;
}
.no-touch .navLocalIcon .itemNav a:hover {
  color: #a0a0a0;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .navLocalIcon {
    display: none;
  }
}
/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
}

/**
   * articleAboutIcon
   * ----------------------------------
   */
.articleAboutIcon {
  border-top: 1px solid #ddd;
  padding-top: 80px;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleAboutIcon {
    border-top: 1px solid #ddd;
    padding-top: 15px;
  }
}
/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
}
/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
}

/* [ sectionAboutMenu ]
    ------------------------------ */
.sectionAboutMenu {
  position: relative;
}
.sectionAboutMenu .itemMenu {
}
.sectionAboutMenu .itemMenu a {
  display: block;
  overflow: hidden;
  position: relative;
  padding-top: 50%;
  -webkit-transition: all 0.6s ease-out;
  -moz-transition: all 0.6s ease-out;
  -o-transition: all 0.6s ease-out;
  transition: all 0.6s ease-out;
}
.sectionAboutMenu .itemName {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.6em 0;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  text-align: center;
  letter-spacing: 0.075em;
}
.sectionAboutMenu .itemImage {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.sectionAboutMenu .itemImage img {
  width: 100%;
  height: auto;
}

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

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionAboutMenu .itemMenu {
    float: left;
  }
  .sectionAboutMenu .itemMenu:first-child {
    margin-left: 0;
  }
  .sectionAboutMenu .itemName {
    font-size: 1.4rem;
  }
}
/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .sectionAboutMenu .itemMenu {
    width: 47%;
    margin-left: 6%;
  }
}
/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  .sectionAboutMenu {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
  }
  .sectionAboutMenu .itemMenu {
    width: 280px;
    margin-left: 40px;
  }
}

/** =3
 * ========================================
 * icon - milk lotion
 * ========================================
 */
.articleIconMilk {
}
.articleIconMilk .sectionIconTitle.fcPink {
  color: #de82b2;
}

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

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMilk .sectionIcon.sec01 {
    padding-top: 56.25%;
    background: url(../image/bg_011.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconMilk .sectionIcon.sec01 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec01 {
    /*padding: 15% 0 23.5%;*/
    /* padding: 9.375% 0 15%; */
    padding: 12.5% 0;
    background: #fff
      url(../image/bg_012.jpg)
      center center no-repeat;
    background-size: cover;
  }
  .articleIconMilk .sectionIcon.sec01 .w_half + .w_half {
    margin-top: 3em;
  }
}

/**
   * section02
   * ----------------------------------
   */
.articleIconMilk .sectionIcon.sec02 {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMilk .sectionIcon.sec02 {
    position: relative;
    padding-top: 56.25%;
  }
  .articleIconMilk .sectionIcon.sec02 .sectionIconTitle {
    margin-top: 1em;
  }
  .articleIconMilk .sectionIcon.sec02 .itemImage {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec02 {
    padding: 9% 0 12.5%;
    background-color: #edf2f6;
  }
  .articleIconMilk .sectionIcon.sec02 .sectionIconTitle,
  .articleIconMilk .sectionIcon.sec02 .itemText {
    text-align: center;
  }
  .articleIconMilk .sectionIcon.sec02 .itemText {
    margin-bottom: 55px;
  }
}

/**
   * section03
   * ----------------------------------
   */
.articleIconMilk .sectionIcon.sec03 {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMilk .sectionIcon.sec03 {
    padding-top: 56.25%;
    background: url(../image/bg_031.jpg) center
      top no-repeat;
    background-size: 100% auto;
  }
  .articleIconMilk .sectionIcon.sec03 .sectionIconTitle {
    margin-top: 1em;
  }

  .articleIconMilk .sectionIcon.sec03 .itemText,
  .articleIconMilk .sectionIcon.sec03 .itemImage {
    margin-bottom: 20px;
  }
  .articleIconMilk .sectionIcon.sec03 .itemImage .flo_left,
  .articleIconMilk .sectionIcon.sec03 .itemImage .flo_right {
    float: none;
    margin-right: auto;
    margin-left: auto;
  }
  .articleIconMilk .sectionIcon.sec03 .itemImage .flo_left {
    margin-bottom: 15px;
  }
  .articleIconMilk .sectionIcon.sec03 .itemImage.image01 .flo_left,
  .articleIconMilk .sectionIcon.sec03 .itemImage.image01 .flo_right {
    width: 80%;
  }
  .articleIconMilk .sectionIcon.sec03 .itemImage.image02 .flo_left,
  .articleIconMilk .sectionIcon.sec03 .itemImage.image02 .flo_right {
    width: 90%;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec03 {
    padding: 9% 0 10%;
    background: #e0e5ec
      url(../image/bg_032.jpg) center top
      no-repeat;
    background-size: 100% auto;
  }
  .articleIconMilk .sectionIcon.sec03 .w_half {
    margin-left: 52%;
  }

  .articleIconMilk .sectionIcon.sec03 .itemText,
  .articleIconMilk .sectionIcon.sec03 .itemImage {
    margin-bottom: 20px;
  }
  .articleIconMilk .sectionIcon.sec03 .itemImage .flo_left,
  .articleIconMilk .sectionIcon.sec03 .itemImage .flo_right {
    width: 45.5%;
  }
}

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

.articleIconMilk .sectionIcon.sec04 .sectionIconTitle .fs_large {
  font-size: 129%;
}

.articleIconMilk .sectionIcon.sec04 .itemList .textTitle {
  color: #000;
  line-height: 1;
  letter-spacing: 0;
}
.articleIconMilk .sectionIcon.sec04 .itemList .textTitle .fs_large {
  font-size: 133%;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMilk .sectionIcon.sec04 {
    padding-top: 56.25%;
    background: url(../image/bg_04.jpg) center
      top no-repeat;
    background-size: 100% auto;
  }
  .articleIconMilk .sectionIcon.sec04 .sectionIconTitle {
    margin-top: 1em;
  }
  .articleIconMilk .sectionIcon.sec04 .itemList .textTitle {
    margin-top: 1em;
    margin-bottom: 0.4em;
    font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
      sans-serif;
    font-weight: bold;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec04 {
    /*padding: 9% 0 6.25%;*/
    padding: 9.375% 0;
    background: #fff url(../image/bg_041.jpg)
      center center no-repeat;
    background-size: cover;
  }
  .articleIconMilk .sectionIcon.sec04 .sectionIconTitle {
    /*text-align: center;*/
  }
  .articleIconMilk .sectionIcon.sec04 .itemList .textTitle {
    margin-top: 1.5em;
    margin-bottom: 0.6em;
    color: #000;
    font-family: "OptimaLTPro-Roman", Optima, Calibri, Arial, sans-serif;
    font-size: 24px;
    font-size: 2.4rem;
  }
}

/**
   * section05 & section06
   * ----------------------------------
   */
.articleIconMilk .sectionIcon.sec05 {
}

.articleIconMilk .sectionIcon.sec06 .boxBanner > .itemText {
  margin-bottom: 0.4em;
}
.articleIconMilk .sectionIcon.sec06 .boxBanner .banner + .banner {
  margin-top: 10px;
}

.articleIconMilk .sectionIcon.sec06 .boxBanner .itemMovie {
  margin-top: 1.5em;
}
.articleIconMilk .sectionIcon.sec06 .boxBanner .txtMovie {
  margin-bottom: 0.4em;
  color: #000;
  font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold;
}
.articleIconMilk .sectionIcon.sec06 .boxBanner .thumbMovie img {
  max-width: 100%;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMilk .sectionIcon.sec05,
  .articleIconMilk .sectionIcon.sec06 {
    padding-top: 20px;
    border-top: 1px solid #e3e3e3;
  }

  .articleIconMilk .sectionIcon.sec06 .flo_left .itemText {
    margin-bottom: 1em;
  }
  .articleIconMilk .sectionIcon.sec06 .boxBanner {
    margin-top: 1.4em;
  }
}

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

  .articleIconMilk .sectionIcon.sec06 {
    padding: 4.5% 0 9%;
  }
  .articleIconMilk .sectionIcon.sec06 .flo_left .itemText {
    margin-bottom: 20px;
  }
  .articleIconMilk .sectionIcon.sec06 .boxBanner {
    margin-top: 0.5em;
  }
  .articleIconMilk .sectionIcon.sec06 .boxBanner > .itemText {
    padding-top: 0.4em;
  }
  /* .articleIconMilk
    .sectionIcon.sec06
    .itemMovie
    .js-modalHandler.open.movie:after {
    border-top-width: 25px;
    border-bottom-width: 25px;
    border-left-width: 40px;
  } */
}

/* boxMovie */
.articleIconMilk
  .sectionIcon.sec06
  .boxBanner
  .boxMovie
  .js-modalHandler.open.movie::before {
  display: block;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.15);
}
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec06 .boxBanner .boxMovie .boxMovieIconPlay {
    margin-bottom: 10px;
  }
  .articleIconMilk .sectionIcon.sec06 .boxBanner .boxMovie .boxMovieTitle {
    font-size: 1.6rem;
  }
}

/**
   * section07
   * ----------------------------------
   */
.articleIconMilk .sectionIcon.sec07 {
  background-color: #edf2f6;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMilk .sectionIcon.sec07 {
    padding-top: 25px;
  }
  .articleIconMilk .sectionIcon.sec07 .itemText {
    margin-bottom: 20px;
    text-align: left;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec07 {
    padding-top: 8%;
    padding-bottom: 10%;
    /* background-color: #edf2f6; */
  }
  .articleIconMilk .sectionIcon.sec07 .sectionIconTitle {
    text-align: center;
  }
  .articleIconMilk .sectionIcon.sec07 .itemText {
    max-width: 600px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;
  }
}

/**
   * section08
   * ----------------------------------
   */
.articleIconMilk .sectionIcon.sec08 {
}

.articleIconMilk .sectionIcon.sec08 .itemNotice {
  margin-top: 25px;
  color: #a0a0a0;
  mix-blend-mode: multiply;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMilk .sectionIcon.sec08 {
    padding-top: 56.25%;
    background: url(../image/bg_04.jpg) center
      top no-repeat;
    background-size: 100% auto;
  }
  .articleIconMilk .sectionIcon.sec08 .itemText {
    margin-top: 1.5em;
    margin-bottom: 20px;
  }
  .articleIconMilk .sectionIcon.sec08 .itemNotice {
    font-size: 1rem;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec08 {
    /*padding: 9% 0 6.25%;*/
    padding: 9.375% 0 12.9%;
    background: #fff url(../image/bg_08.jpg)
      center center no-repeat;
    background-size: cover;
  }
  .articleIconMilk .sectionIcon.sec08 .w_half {
    width: 56.5%;
    width: -webkit-calc(520/920 * 100%);
    width: calc(520 / 920 * 100%);
  }
  .articleIconMilk .sectionIcon.sec08 .itemText {
    margin-bottom: 25px;
  }
  .articleIconMilk .sectionIcon.sec08 .itemNotice {
    font-size: 1.2rem;
  }
}

/* list */
.articleIconMilk .sectionIcon.sec08 .itemImageList {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.articleIconMilk .sectionIcon.sec08 .itemImageList .image {
  box-sizing: border-box;
}
.articleIconMilk .sectionIcon.sec08 .itemImageList .image img {
  max-width: 100%;
}
/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMilk .sectionIcon.sec08 .itemImageList {
    margin: -5px;
  }
  .articleIconMilk .sectionIcon.sec08 .itemImageList .image {
    width: 50%;
    padding: 5px;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec08 .itemImageList {
    margin: -10px;
  }
  .articleIconMilk .sectionIcon.sec08 .itemImageList .image {
    width: 33.33%;
    width: -webkit-calc(1/3 * 100%);
    width: calc(1 / 3 * 100%);
    padding: 10px;
  }
}

/**
   * section09
   * ----------------------------------
   */
.articleIconMilk .sectionIcon.sec09 {
}

.articleIconMilk .sectionIcon.sec09 .sectionIconContent {
}
.articleIconMilk .sectionIcon.sec09 .sectionIconContent + .sectionIconContent {
  border-top: 1px solid #ccc;
}
.articleIconMilk .sectionIcon.sec09 .sectionIconContent .itemTitle {
  color: #000;
  font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconMilk .sectionIcon.sec09 {
    padding-top: 56.25%;
    background: url(../image/bg_031.jpg) center
      top no-repeat;
    background-size: 100% auto;
  }
  .articleIconMilk .sectionIcon.sec09 .sectionIconTitle {
    margin-top: 1em;
  }

  .articleIconMilk .sectionIcon.sec09 .sectionIconContent {
    margin-top: 20px;
  }
  .articleIconMilk
    .sectionIcon.sec09
    .sectionIconContent
    + .sectionIconContent {
    padding-top: 20px;
  }
  .articleIconMilk .sectionIcon.sec09 .sectionIconContent .itemTitle {
    margin-bottom: 15px;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconMilk .sectionIcon.sec09 {
    padding: 9% 0 10%;
    background: #e0e5ec
      url(../image/bg_09.jpg) center top
      no-repeat;
    background-size: 100% auto;
  }
  .articleIconMilk .sectionIcon.sec09 .w_half {
    margin-left: 52%;
    margin-left: -webkit-calc(480/920 * 100%);
    margin-left: calc(480 / 920 * 100%);
  }

  .articleIconMilk .sectionIcon.sec09 .sectionIconContent {
    margin-top: 30px;
  }
  .articleIconMilk
    .sectionIcon.sec09
    .sectionIconContent
    + .sectionIconContent {
    padding-top: 30px;
  }
  .articleIconMilk .sectionIcon.sec09 .sectionIconContent .itemTitle {
    margin-bottom: 20px;
    font-size: 16px;
    font-size: 1.6rem;
  }
}

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

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

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconSkicon .sectionIcon.sec01 {
    padding-top: 56.25%;
    background: url(../image/bg_013.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconSkicon .sectionIcon.sec01 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconSkicon .sectionIcon.sec01 {
    padding: 15.625% 0 22.65625%;
    background: #fafbfd
      url(../image/bg_014.jpg)
      center bottom no-repeat;
    /* background-size: 100% auto; */
    background-size: cover;
  }
  /* .articleIconSkicon .sectionIcon.sec01 .w_half {
        margin-left: 52%;
      } */
}

/**
   * section02
   * ----------------------------------
   */
.articleIconSkicon .sectionIcon.sec02 {
}

.articleIconSkicon .sectionIcon.sec02 .itemText + .itemText {
  margin-top: 1em;
}
.articleIconSkicon .sectionIcon.sec02 .txt_cap {
  padding-top: 1.5em;
  color: #a0a0a0;
  font-size: 12px;
  font-size: 1.2rem;
}

.articleIconSkicon .sectionIcon.sec02 .boxBanner {
  margin-top: 1.75em;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconSkicon .sectionIcon.sec02 {
    padding-top: 56.25%;
    background: url(../image/bg_02.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconSkicon .sectionIcon.sec02 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconSkicon .sectionIcon.sec02 {
    /* padding: 9.375% 0 11.328125%; */
    padding: 9.375% 0;
    background: #fafbfd
      url(../image/bg_021.jpg)
      center top no-repeat;
    /* background-size: 100% auto; */
    background-size: cover;
  }
  .articleIconSkicon .sectionIcon.sec02 .w_half {
    margin-left: 52%;
  }
}

/* [ tears' action ]
    ------------------------------ */
#tearsAction {
}
#tearsAction .itemIntro {
  color: #000;
  text-align: center;
  text-transform: uppercase;
}

#tearsAction .box .txt_cap {
  line-height: 1.5;
}

#tearsAction .box .itemText .txt_title {
  margin-bottom: 0.5em;
  color: #000;
  font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold;
}
#tearsAction .box .itemText .txt_detail {
  letter-spacing: 0.01em;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  #tearsAction .box {
    margin-bottom: 20px;
  }
  #tearsAction .box + .box {
    padding-top: 15px;
    border-top: 1px solid #e3e3e3;
  }

  #tearsAction .box .itemImage {
    margin-bottom: 1em;
  }
  #tearsAction .box .txt_cap {
    font-size: 1rem;
  }
  #tearsAction .box:nth-child(3) .txt_cap {
    margin-top: 0.7em;
  }
  #tearsAction .box .image {
    margin-right: 6%;
    margin-left: 6%;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  #tearsAction .box {
    float: left;
    width: 29.4%;
    margin-left: 5.9%;
  }
  #tearsAction .box:first-child {
    margin-left: 0;
  }

  #tearsAction .box .itemImage {
    margin-bottom: 0.8em;
  }
  #tearsAction .box .txt_cap {
    margin-bottom: 1em;
    font-size: 12px;
    font-size: 1.2rem;
  }
}

/* [ Metabolic rhythm ]
    ------------------------------ */
#metabolicRhythm {
}

#metabolicRhythm .itemText .txt_title {
  margin-bottom: 1em;
  color: #000;
  font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold;
}
#metabolicRhythm .itemText .txt_detail + .txt_detail {
  margin-top: 1em;
}
#metabolicRhythm .itemText ul.mark1 {
  padding-left: 1em;
}
#metabolicRhythm .itemText ul.mark1 li::before {
  display: inline-block;
  width: 1.3em;
  margin-left: -1.3em;
  content: "・";
}
#metabolicRhythm .itemText ul.mark2 {
  padding-left: 1em;
}
#metabolicRhythm .itemText ul.mark2 li::before {
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  content: "-";
}

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

  #metabolicRhythm .itemText .box {
    padding-top: 1.25em;
    border-top: 1px solid #e3e3e3;
  }
  #metabolicRhythm .itemText .box + .box {
    margin-top: 1.25em;
  }
}

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

  #metabolicRhythm .itemText {
    display: flex;
    display: -webkit-flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
  }
  #metabolicRhythm .itemText .box {
    width: 30%;
    width: -webkit-calc(200/680 * 100%);
    width: calc(200 / 680 * 100%);
  }
  #metabolicRhythm .itemText .box:nth-child(2) {
    -webkit-order: 1;
    order: 1;
  }
  #metabolicRhythm .itemText .txt_title {
    display: none;
  }
}

/**
   * section03
   * ----------------------------------
   */
.articleIconSkicon .sectionIcon.sec03 {
}

.articleIconSkicon .sectionIcon.sec03 .listEffect {
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px solid #e3e3e3;
}
.articleIconSkicon .sectionIcon.sec03 .listEffect dt {
  color: #000;
  font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold;
}
.articleIconSkicon .sectionIcon.sec03 .listEffect dd {
  margin-bottom: 1.5em;
}

.articleIconSkicon .sectionIcon.sec03 .txt_cap {
  color: #a0a0a0;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconSkicon .sectionIcon.sec03 {
    padding-top: 56.25%;
    background: url(../image/bg_031.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconSkicon .sectionIcon.sec03 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconSkicon .sectionIcon.sec03 {
    padding: 6.25% 0;
    background: #fafbfd
      url(../image/bg_033.jpg) left top
      no-repeat;
    background-size: cover;
  }
  .articleIconSkicon .sectionIcon.sec03 .w_half {
    margin-left: 52%;
  }
}

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

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

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconChiffon .sectionIcon.sec01 {
    padding-top: 56.25%;
    background: url(../image/bg_015.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconChiffon .sectionIcon.sec01 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconChiffon .sectionIcon.sec01 {
    padding: 18.75% 0 22.65625%;
    background: #fafbfd
      url(../image/bg_016.jpg) center center
      no-repeat;
    background-size: cover;
  }
}

/**
   * section02
   * ----------------------------------
   */
.articleIconChiffon .sectionIcon.sec02 {
}

.articleIconChiffon .sectionIcon.sec02 .itemImage {
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px solid #e3e3e3;
}
.articleIconChiffon .sectionIcon.sec02 .itemImage dt {
  margin-bottom: 0.6em;
  color: #000;
  text-align: left;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconChiffon .sectionIcon.sec02 {
    padding-top: 56.25%;
    background: url(../image/bg_022.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconChiffon .sectionIcon.sec02 .sectionIconTitle {
    margin-top: 1em;
  }

  .articleIconChiffon .sectionIcon.sec02 .itemImage dt {
    font-size: 1rem;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconChiffon .sectionIcon.sec02 {
    padding: 6.25% 0 5.46875%;
    background: #fafbfd
      url(../image/bg_023.jpg) center center
      no-repeat;
    background-size: cover;
  }
  .articleIconChiffon .sectionIcon.sec02 .w_half {
    margin-left: 52%;
  }
}

/**
   * section03
   * ----------------------------------
   */
.articleIconChiffon .sectionIcon.sec03 {
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconChiffon .sectionIcon.sec03 {
    padding-top: 56.25%;
    background: url(../image/bg_034.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconChiffon .sectionIcon.sec03 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconChiffon .sectionIcon.sec03 {
    padding: 18.75% 0 19.53125%;
    background: #fafbfd
      url(../image/bg_035.jpg) center center
      no-repeat;
    background-size: cover;
  }
  .articleIconChiffon .sectionIcon.sec03 .w_half {
    margin-left: 52%;
  }
}

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

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconChiffon .sectionIcon.sec04 {
    padding-top: 56.25%;
    background: url(../image/bg_042.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconChiffon .sectionIcon.sec04 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconChiffon .sectionIcon.sec04 {
    padding: 14% 0 14%;
    background: #fff
      url(../image/bg_043.jpg) center center
      no-repeat;
    background-size: cover;
    text-align: center;
  }
  .articleIconChiffon .sectionIcon.sec04 .w_half {
    margin-right: auto;
    margin-left: auto;
  }
}

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

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

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconHerbal .sectionIcon.sec01 {
    padding-top: 56.25%;
    background: url(../image/bg_017.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconHerbal .sectionIcon.sec01 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconHerbal .sectionIcon.sec01 {
    padding: 23.4375% 0 19.921875%;
    background: url(../image/bg_018.jpg)
      center center no-repeat;
    background-size: cover;
  }
}

/**
   * section02
   * ----------------------------------
   */
.articleIconHerbal .sectionIcon.sec02 {
}

.articleIconHerbal .sectionIcon.sec02 .txt_cap {
  margin-top: 1.5em;
  color: #a0a0a0;
}

.articleIconHerbal .sectionIcon.sec02 .itemImage {
  margin-top: 1.5em;
  padding-top: 1.5em;
  border-top: 1px solid #d0c085;
}
.articleIconHerbal .sectionIcon.sec02 .itemImage dt {
  margin-bottom: 1em;
  color: #aa8914;
  font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold;
  text-align: left;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconHerbal .sectionIcon.sec02 {
    padding-top: 56.25%;
    background: url(../image/bg_024.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconHerbal .sectionIcon.sec02 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconHerbal .sectionIcon.sec02 {
    background: url(../image/bg_025.jpg)
      center center no-repeat;
    background-size: cover;
  }
  .articleIconHerbal .sectionIcon.sec02 .l-inner {
    position: relative;
    padding: 6.25% 0 9.375%;
  }
  .articleIconHerbal .sectionIcon.sec02 .l-inner:before {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 56.5%;
    height: 100%;
    background: url(../image/bg_02-02.png)
      center center no-repeat;
    background-size: contain;
    content: "";
  }
  .articleIconHerbal .sectionIcon.sec02 .w_half {
    position: relative;
    z-index: 1;
    margin-left: 52%;
  }
}

/**
   * section03
   * ----------------------------------
   */
.articleIconHerbal .sectionIcon.sec03 {
}

.articleIconHerbal .sectionIcon.sec03 .flo_right .itemTitle,
.articleIconHerbal .sectionIcon.sec03 .flo_right .txt_cap {
  color: #000;
  font-weight: normal;
}
.articleIconHerbal .sectionIcon.sec03 .flo_right .itemTitle {
}
.articleIconHerbal .sectionIcon.sec03 .flo_right .txt_cap {
  margin-bottom: 0.6em;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconHerbal .sectionIcon.sec03 {
    padding-top: 25px;
    border-top: 1px solid #c8c8c8;
  }
  .articleIconHerbal
    .sectionIcon.sec03
    .sectionIconContent
    + .sectionIconContent {
    margin-top: 30px;
  }

  .articleIconHerbal .sectionIcon.sec03 .flo_left,
  .articleIconHerbal .sectionIcon.sec03 .flo_right {
    float: none;
  }
  .articleIconHerbal .sectionIcon.sec03 .flo_left {
    margin-bottom: 10px;
  }
  .articleIconHerbal .sectionIcon.sec03 .flo_left .itemImage.image02 {
    padding: 0 26.7%;
  }
  .articleIconHerbal .sectionIcon.sec03 .flo_right .itemTitle {
    font-size: 1.4rem;
  }
  .articleIconHerbal .sectionIcon.sec03 .flo_right .txt_cap {
    font-size: 1rem;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconHerbal .sectionIcon.sec03 {
    padding: 6.25% 0 7.8125%;
    background: url(../image/bg_036.jpg)
      center center no-repeat;
    background-size: cover;
  }
  .articleIconHerbal .sectionIcon.sec03 .sectionIconTitle {
    text-align: center;
  }
  .articleIconHerbal .sectionIcon.sec03 .sectionIconContent {
    padding-top: 60px;
  }

  .articleIconHerbal .sectionIcon.sec03 .flo_left {
    width: 37%;
    margin-left: 4.6875%;
  }
  .articleIconHerbal .sectionIcon.sec03 .flo_left .itemImage.image02 {
    padding-left: 41%;
  }
  .articleIconHerbal .sectionIcon.sec03 .flo_right {
    margin-right: 4%;
  }
  .articleIconHerbal .sectionIcon.sec03 .flo_right .itemTitle,
  .articleIconHerbal .sectionIcon.sec03 .flo_right .txt_cap {
    font-family: "OptimaLTPro-Roman", Optima, Calibri, Arial, sans-serif;
    letter-spacing: 0;
  }
  .articleIconHerbal .sectionIcon.sec03 .flo_right .itemTitle {
    font-size: 24px;
    font-size: 2.4rem;
  }
  .articleIconHerbal .sectionIcon.sec03 .flo_right .txt_cap {
    font-size: 1em;
  }
}

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

.articleIconHerbal .sectionIcon.sec04 .boxBanner {
  margin-top: 1.7em;
}
.articleIconHerbal .sectionIcon.sec04 .boxBanner .banner {
  background-color: #fff;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconHerbal .sectionIcon.sec04 {
    padding-top: 56.25%;
    background: url(../image/bg_044.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconHerbal .sectionIcon.sec04 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconHerbal .sectionIcon.sec04 {
    padding: 14.0625% 0 10.9375%;
    background: url(../image/bg_045.jpg)
      center center no-repeat;
    background-size: cover;
  }
  .articleIconHerbal .sectionIcon.sec04 .w_half {
    margin-right: auto;
    margin-left: auto;
  }
  .articleIconHerbal .sectionIcon.sec04 .sectionIconTitle,
  .articleIconHerbal .sectionIcon.sec04 .sectionIconContent {
    text-align: center;
  }
}

/* [ using Herbal Oil ]
    ------------------------------ */
#usingOil {
}

#usingOil .box .itemText .txt_title {
  color: #f1af1f;
  font-family: "HelveticaLTPro-Bold", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-weight: bold;
  line-height: 1.4;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  #usingOil .modalIconContent + .modalIconContent {
    margin-top: 0;
    padding-top: 20px;
  }

  #usingOil .box {
    margin-bottom: 25px;
  }
  #usingOil .box .itemImage {
    margin-bottom: 10px;
  }

  #usingOil .box .itemText .txt_title {
    margin-bottom: 0.5em;
    font-size: 1.8rem;
  }

  #usingOil .content02 .box.flo_left,
  #usingOil .content02 .box.flo_right {
    float: none;
  }
  #usingOil .content02 .box.flo_right {
    padding-top: 20px;
    border-top: 1px solid #e3e3e3;
  }
}

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

  #usingOil .content01 .box {
    font-size: 0;
    letter-spacing: -0.4em;
    word-spacing: -0.4em;
  }
  #usingOil .content01 .box + .box {
    margin-top: 40px;
  }
  #usingOil .content01 .box .itemImage,
  #usingOil .content01 .box .itemText {
    display: inline-block;
    vertical-align: middle;
  }
  #usingOil .content01 .box .itemImage {
    width: 41%;
    margin-right: 6%;
  }
  #usingOil .content01 .box .itemText {
    width: 53%;
    font-size: 15px;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    word-spacing: 0;
  }
  #usingOil .content01 .box .itemText .txt_title {
    margin-bottom: 0.6em;
    font-size: 20px;
    font-size: 2rem;
  }

  #usingOil .content02 .box {
    width: 47%;
  }
  #usingOil .content02 .box .itemImage {
    margin-bottom: 1.2em;
  }
}

/** =7
 * ========================================
 * icon - LA POUDRE
 * ========================================
 */
.articleIconPoudre {
}

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

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconPoudre .sectionIcon.sec01 {
    padding-top: 56.25%;
    background: url(../image/bg_019.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconPoudre .sectionIcon.sec01 .sectionIconTitle {
    margin-top: 1em;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconPoudre .sectionIcon.sec01 {
    padding: 9.375% 0 18%;
    background: url(../image/bg_0110.jpg)
      center center no-repeat;
    background-size: cover;
    text-align: center;
  }
  .articleIconPoudre .sectionIcon.sec01 .sectionIconTitle {
    padding-top: 190px;
    background: url(../image/logo_elegance.png)
      center top no-repeat;
  }
}

/**
   * section02
   * ----------------------------------
   */
.articleIconPoudre .sectionIcon.sec02 {
}

.articleIconPoudre .sectionIcon.sec02 .itemTitle {
  color: #000;
}
.articleIconPoudre .sectionIcon.sec02 * + .itemTitle {
  margin-top: 1.5em;
}

.articleIconPoudre .sectionIcon.sec02 .boxBnrHistory a img {
  max-width: 100%;
  height: auto;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconPoudre .sectionIcon.sec02 {
    padding-top: 56.25%;
    background: url(../image/bg_026.jpg)
      center top no-repeat;
    background-size: 100% auto;
  }
  .articleIconPoudre .sectionIcon.sec02 .sectionIconTitle {
    margin-top: 1em;
  }
  .articleIconPoudre .sectionIcon.sec02 .boxBnrHistory {
    margin-top: 20px;
  }
  .articleIconPoudre
    .sectionIcon.sec02
    .boxBnrHistory
    .itemBanner
    + .itemBanner {
    margin-top: 15px;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconPoudre .sectionIcon.sec02 {
    padding: 9.375% 0 12.5%;
    background: #fff url(../image/bg_027.jpg)
      center center no-repeat;
    background-size: 100% auto;
  }
  .articleIconPoudre .sectionIcon.sec02 .w_half {
    margin-left: 52%;
  }
  .articleIconPoudre .sectionIcon.sec02 .boxBnrHistory {
    /* margin-top: 60px;
        margin-bottom: -50px; */
    margin-top: 6.52%;
    margin-bottom: -4.35%;
  }
  .articleIconPoudre
    .sectionIcon.sec02
    .boxBnrHistory
    .itemBanner
    + .itemBanner {
    margin-top: 40px;
  }
}

/**
   * section03
   * ----------------------------------
   */
.articleIconPoudre .sectionIcon.sec03 {
}

.articleIconPoudre .sectionIcon.sec03 .itemTitle {
  border-bottom: 1px solid #e0e1e2;
  color: #000;
  text-align: center;
}

.articleIconPoudre .sectionIcon.sec03 .itemImage img {
  display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.articleIconPoudre .sectionIcon.sec03 .itemImage .txt_cap {
  color: #666;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconPoudre .sectionIcon.sec03 {
    padding-top: 35px;
    border-top: 1px solid #e3e3e3;
    background-color: #f5f8fc;
  }
  .articleIconPoudre .sectionIcon.sec03 .sectionIconTitle {
    margin-bottom: 1.6em;
  }

  .articleIconPoudre .sectionIcon.sec03 .w_half.flo_left,
  .articleIconPoudre .sectionIcon.sec03 .w_half.flo_right {
    float: none;
  }
  .articleIconPoudre .sectionIcon.sec03 .w_half.flo_left {
    margin-bottom: 20px;
  }

  .articleIconPoudre .sectionIcon.sec03 .itemTitle {
    margin-bottom: 10px;
    padding-bottom: 0.6em;
    font-size: 1.4rem;
    line-height: 1.2;
  }

  .articleIconPoudre .sectionIcon.sec03 .itemImage.flo_left,
  .articleIconPoudre .sectionIcon.sec03 .itemImage.flo_right {
    width: 48%;
  }
  .articleIconPoudre .sectionIcon.sec03 .itemImage img {
    padding: 0 7%;
  }
  .articleIconPoudre .sectionIcon.sec03 .itemImage .txt_cap + br + .txt_cap {
    margin-top: 0;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconPoudre .sectionIcon.sec03 {
    padding: 7.8125% 0 10.9375%;
    background: #fff url(../image/bg_037.jpg)
      center center no-repeat;
    background-size: cover;
  }
  .articleIconPoudre .sectionIcon.sec03 .sectionIconTitle {
    margin-bottom: 90px;
  }

  .articleIconPoudre .sectionIcon.sec03 .itemTitle {
    margin-bottom: 20px;
    padding-bottom: 0.8em;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.375;
  }

  .articleIconPoudre .sectionIcon.sec03 .itemImage.flo_left,
  .articleIconPoudre .sectionIcon.sec03 .itemImage.flo_right {
    width: 45.5%;
  }
  .articleIconPoudre .sectionIcon.sec03 .itemImage img {
    padding: 0 5%;
  }
}

/* [ sectionIconCotton ]
    ------------------------------ */
.listColorPoudre {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  text-align: center;
}
.listColorPoudreBox {
  box-sizing: border-box;
}
.listColorPoudreBoxTitle {
  margin-bottom: 0.5em;
  color: #000;
  line-height: 1;
}
.listColorPoudreBoxImage {
  margin-bottom: 10px;
}
.listColorPoudreBoxType {
  margin-bottom: 0.5em;
}
.listColorPoudreBoxType [class*="label"] {
  display: inline-block;
  padding: 0.25em 1em 0.2em;
  color: #fff;
  line-height: 1.4;
}
.listColorPoudreBoxType .labelSemiMat {
  background-color: #eebf8e;
}
.listColorPoudreBoxType .labelRadiant {
  background-color: #ccbd83;
}
.listColorPoudreBoxText {
  line-height: 1.4;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .listColorPoudreBox {
    width: 48.28%;
    width: calc(280 / 580 * 100%);
    padding-right: 3.45%;
    padding-right: calc(20 / 580 * 100%);
    padding-left: 3.45%;
    padding-left: calc(20 / 580 * 100%);
    margin-top: 25px;
  }
  .listColorPoudreBox:nth-child(-n + 2) {
    margin-top: 0;
  }

  .listColorPoudreBoxTitle {
    font-size: 1.4rem;
  }
  .listColorPoudreBoxImage img {
    width: 120px;
  }
  .listColorPoudreBoxType [class*="label"] {
    font-size: 1rem;
  }
  .listColorPoudreBoxText {
    font-size: 1.2rem;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .listColorPoudreBox {
    width: 29.35%;
    width: calc(270 / 920 * 100%);
    margin-top: 30px;
  }
  .listColorPoudreBox:nth-child(-n + 3) {
    margin-top: 0;
  }

  .listColorPoudreBoxTitle {
    font-size: 1.6rem;
  }
  .listColorPoudreBoxImage img {
    width: 180px;
  }
  .listColorPoudreBoxType [class*="label"] {
    font-size: 1.2rem;
  }
}

/** =8
 * ========================================
 * icon - Cotton Lesson
 * ========================================
 */
.articleIconCotton {
}
.articleIconCotton .titlePage {
}
.articleIconCotton .itemTextLead {
  font-size: 130%;
  line-height: 1.4;
  text-align: center;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .articleIconCotton .titlePage {
    margin-bottom: 10px;
  }
  .articleIconCotton .itemTextLead {
    margin-bottom: 20px;
  }
  .articleIconCotton .titlePage + .itemTextLead {
    margin-bottom: 30px;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .articleIconCotton .titlePage {
    margin-bottom: 30px;
  }
  .articleIconCotton .itemTextLead {
    margin-bottom: 50px;
  }
}

/* [ sectionIconCotton ]
  ------------------------------ */
.sectionIconCotton {
  border-top: 1px solid #c8c8c8;
}
.sectionIconCottonTitle {
  line-height: 1.15;
}
.sectionIconCotton img {
  max-width: 100%;
  height: auto;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionIconCotton {
    margin: 0 15px 40px;
    padding-top: 35px;
  }
  .sectionIconCotton .l-inner {
    margin: 0;
  }
  .sectionIconCottonTitle {
    margin-bottom: 0.2em;
    font-size: 2rem;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionIconCotton {
    margin-bottom: 120px;
    padding-top: 75px;
  }
  .sectionIconCottonTitle {
    margin-bottom: 0.4em;
    font-size: 32px;
    font-size: 3.2rem;
  }
}

/* boxStep */
.sectionIconCotton .boxStep {
}

.sectionIconCotton .boxStep .boxStepContent {
  counter-increment: step;
}
.sectionIconCotton .boxStep .itemText:before {
  color: #000;
  font-family: Optima, Calibri, Arial, sans-serif;
  font-style: italic;
  content: counter(step);
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionIconCotton .boxStep {
  }
  .sectionIconCotton .boxStep .boxStepContent {
  }
  .sectionIconCotton .boxStep .boxStepContent + .boxStepContent {
    margin-top: 20px;
  }
  .sectionIconCotton .boxStep .itemImage {
    float: right;
    width: 38%;
  }
  .sectionIconCotton .boxStep .itemText {
    position: relative;
    float: left;
    width: 55%;
    padding-top: 4.3%;
    padding-left: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .sectionIconCotton .boxStep .itemText:before {
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 7.8%;
    font-size: 2.5rem;
    line-height: 1;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionIconCotton .boxStep {
  }
  .sectionIconCotton .boxStep .boxStepContent {
    float: left;
  }
  .sectionIconCotton .boxStep .itemText:before {
    display: block;
    margin-bottom: 0.25em;
    border-bottom: 1px solid #dedede;
    font-size: 40px;
    font-size: 4rem;
    text-align: center;
  }
}

/**
   * section01
   * ----------------------------------
   */
.sectionIconCotton.sec01 {
}

/* boxStep */
.sectionIconCotton.sec01 .boxStep {
}

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

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionIconCotton.sec01 .boxStep {
    padding: 0 3.26%;
  }
  .sectionIconCotton.sec01 .boxStep .boxStepContent {
    width: 25.6%;
    margin-left: 11.6%;
  }
  .sectionIconCotton.sec01 .boxStep .boxStepContent:first-child {
    margin-left: 0;
  }
  .sectionIconCotton.sec01 .boxStep .itemImage {
    position: relative;
  }
  .sectionIconCotton.sec01 .boxStep .itemImage:before,
  .sectionIconCotton.sec01 .boxStep .itemImage:after {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid #c8c8c8;
    content: "";
  }
  .sectionIconCotton.sec01 .boxStep .itemImage:before {
    left: -29.54%;
    border-left: 30px solid #c8c8c8;
  }
  .sectionIconCotton.sec01 .boxStep .itemImage:after {
    left: 30.45%;
    left: -webkit-calc(-29.54% - 2px);
    left: calc(-29.54% - 2px);
    border-left: 30px solid #fff;
  }
  .sectionIconCotton.sec01
    .boxStep
    .boxStepContent:first-child
    .itemImage:before,
  .sectionIconCotton.sec01
    .boxStep
    .boxStepContent:first-child
    .itemImage:after {
    display: none;
  }
}

/**
   * section02
   * ----------------------------------
   */
.sectionIconCotton.sec02 {
}

/* boxStep */
.sectionIconCotton.sec02 .boxStep {
}

.sectionIconCotton.sec02 .boxStep .txt_cap {
  padding-top: 1em;
  color: #a0a0a0;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionIconCotton.sec02 .boxStep .txt_cap {
    clear: both;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionIconCotton.sec02 .boxStep {
    margin-top: -40px;
    padding: 0 1.08%;
  }
  .sectionIconCotton.sec02 .boxStep .boxStepContent {
    width: 40%;
    margin: 40px 5% 0;
  }

  .sectionIconCotton.sec02 .boxStep .boxStepContent .itemText,
  .sectionIconCotton.sec02 .boxStep .boxStepContent .txt_cap {
    padding-right: 9.7%;
    padding-left: 9.7%;
  }
}

/**
   * section03
   * ----------------------------------
   */
.sectionIconCotton.sec03 {
}

.sectionIconCotton.sec03 .itemText {
  line-height: 1.4;
}
.sectionIconCotton.sec03 .itemText .txt_name,
.sectionIconCotton.sec03 .itemText .txt_name a {
  color: #000;
  text-decoration: none;
}
.sectionIconCotton.sec03 .itemText .textDetail {
  margin-top: 0.8em;
  color: #a0a0a0;
  font-size: 11px;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  line-height: 1.65;
}
.sectionIconCotton.sec03 .itemText ul.mark {
  padding-left: 1em;
  text-align: left;
}
.sectionIconCotton.sec03 .itemText ul.mark li::before {
  display: inline-block;
  width: 1.3em;
  margin-left: -1.3em;
  content: "・";
}

.sectionIconCotton.sec03 .sectionProductList .itemImage {
  margin-bottom: 15px;
  padding-top: 66.67%;
  padding-top: -webkit-calc(2/3 * 100%);
  padding-top: calc(2 / 3 * 100%);
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .sectionIconCotton.sec03 .itemImage,
  .sectionIconCotton.sec03 .itemText {
    width: 48%;
  }
  .sectionIconCotton.sec03 .itemImage {
    float: right;
  }
  .sectionIconCotton.sec03 .itemText {
    float: left;
  }

  .sectionIconCotton.sec03 .sectionProductList .itemList:nth-child(-n + 2) {
    margin-top: 0;
  }
  .sectionIconCotton.sec03 .sectionProductList .itemImage,
  .sectionIconCotton.sec03 .sectionProductList .itemText {
    float: none;
    width: auto;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .sectionIconCotton.sec03 .sectionIconCottonContent {
    padding: 0 21.74%;
    font-size: 0;
    letter-spacing: -0.4em;
    word-spacing: -0.4em;
  }
  .sectionIconCotton.sec03 .itemImage,
  .sectionIconCotton.sec03 .itemText {
    display: inline-block;
    width: 46%;
    font-size: 14px;
    font-size: 1.4rem;
    letter-spacing: 0.05em;
    word-spacing: 0;
    vertical-align: middle;
  }
  .sectionIconCotton.sec03 .itemText {
    margin-left: 8%;
  }
  .sectionIconCotton.sec03 .itemText .txt_name {
    /* margin-top: .8em; */
  }

  .sectionIconCotton.sec03 .sectionProductList .itemList:nth-child(-n + 4) {
    margin-top: 0;
  }
  .sectionIconCotton.sec03 .sectionProductList .itemImage,
  .sectionIconCotton.sec03 .sectionProductList .itemText {
    display: block;
    width: auto;
    margin-left: 0;
  }
}