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

/**
 * CSS Information
 * ===============================================================
 *
 * Site URL:  http://test.albion-cosmetics.com/global/
 * File name: index.css
 * Summary:   indexページの固有スタイル
 * Author:    CrEa., Inc.
 *
 * -----------------------------------
 *
 * TOC:
 *     =1    home
 *
 * ===============================================================
*/

/** =1
 * ========================================
 * home
 * ========================================
 */
#home .l-contents {
  background-color: #f1f7fd;
}
/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  #home .l-main {
    margin-top: 35px;
    margin-bottom: 40px;
  }
}
/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  #home .l-contents {
    padding-top: 150px;
    padding-bottom: 80px;
  }
  #home .l-main {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

/**
* world map
* ----------------------------------
*/
.worldMap svg {
  width: 100%;
  height: auto;
}

/* [ boxWorldMapPc ]
------------------------------ */
/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .boxWorldMapPc {
    display: none;
  }
}

/* -- >>> styles for middle & wide layout ----- */
@media screen and (min-width: 600px) and (max-width: 1524px) {
  .boxWorldMapPc {
    overflow: hidden;
  }
  .boxWorldMapPc .worldMap {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
/* -- >>> styles for middle layout ----- */
@media screen and (min-width: 600px) and (max-width: 1199px) {
  .boxWorldMapPc .worldMap {
    width: calc(1464 / 1200 * 100%);
  }
}
/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 1200px) and (max-width: 1524px) {
  .boxWorldMapPc .worldMap {
    width: 1464px;
  }
}
/* -- >>> styles for x-wide layout ----- */
@media screen and (min-width: 1525px) {
  .boxWorldMapPc {
    width: 1464px;
    margin-inline: auto;
  }
}

/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  [id="worldMapPc"] a {
    display: block;
  }
  [id="worldMapPc"] a .icon {
    display: block;
    transition: transform 0.3s ease;
    transform-origin: 816px 215px;
  }
  [id="worldMapPc"] a [id="textCN"] .icon {
    transform-origin: 797px 215px;
  }
  [id="worldMapPc"] a [id="textHK"] .icon {
    transform-origin: 797px 215px;
  }
  [id="worldMapPc"] a [id="textTW"] .icon {
    transform-origin: 816px 215px;
  }
  [id="worldMapPc"] a [id="textVN"] .icon {
    transform-origin: 797px 214px;
  }
  [id="worldMapPc"] a [id="textKR"] .icon {
    transform-origin: 807px 195px;
  }
  [id="worldMapPc"] a [id="textUS"] .icon {
    /* transform-origin: 927px 249px; */
    transform-origin: 927px 240px;
  }
  [id="worldMapPc"] a .text {
    transition: opacity 0.3s ease;
  }

  .no-touch [id="worldMapPc"] a:hover .icon {
    transform: scale(1.3);
  }
  .no-touch [id="worldMapPc"] a:hover .text {
    opacity: 0.6;
  }
}

/* [ boxWorldMapSp ]
------------------------------ */
/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .boxWorldMapSp .worldMap {
    margin-bottom: 10px;
  }
}
/* -- >>> styles for medium & wide layout ----- */
@media screen and (min-width: 600px) {
  .boxWorldMapSp {
    display: none;
  }
}

.listCountryHome {
  border: 1px solid #ddd;
  background-color: #fff;
}
.listCountryHomeItem:not(:first-child) {
  border-top: 1px solid #ddd;
}
.listCountryHome a {
  display: flex;
  align-items: center;
  column-gap: calc(9 / 15 * 1em);
  min-height: 48px;
  padding: calc(8 / 15 * 1em) calc(14 / 15 * 1em);
  box-sizing: border-box;
  color: #000;
  font-size: 1.5rem;
  text-decoration: none;
}
.listCountryHome a:not(:has(.icon-country)) {
  justify-content: center;
}
.listCountryHome a.icon-popup::after {
  opacity: 1;
  margin-left: 0;
  background-image: url(../image/icon_popup_dark.png);
}
.listCountryHome a .icon-country {
  width: 26px;
}
.listCountryHome a .text .fsSmall {
  font-size: calc(13 / 15 * 1em);
}