@charset "UTF-8";

/*//////////////////////////////////////////////////

to/one WEB STORE　|　Best Cosmetics Award ベスコス受賞アイテムをご紹介

//////////////////////////////////////////////////*/

/* ========================================================
                      * Layout style *
========================================================= */


html {
  font-size: calc(10 * (100vw/600));
}

@media (min-width: 769px) {
  html {
    font-size: calc(10 * (100vw/1600));
  }
}

@media (min-width: 1600px) {
  html {
    font-size: 62.5%
  }
}

footer {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
}

.share-txt {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.share-txt span {
  margin-top: calc(40 * (var(--rate)));
  margin-bottom: calc(40* (var(--rate)));
}

span.result {
  display: none !important;
}


/* ========================================================
                      * root *
========================================================= */
:root {
  --rate: calc(var(--pcMainContentWidth) / var(--spWidth));

  /* PCデザインのメインコンテンツの横幅 */
  --pcMainContentWidth: 60rem;

  /* PCデザインの横幅 */
  --pcWidth: 1600;

  /* SPデザインの横幅 */
  --spWidth: 750;

  --color_white: #fff;
  --color_main: #FCFBF9;
  --color_main_txt: #727171;
  --color_sub01: #C6A093;
  --color_sub02: #F7F4F1;
  --font_ja: "pragmatica", "hiragino-kaku-gothic-pron", sans-serif;
  --font_en: "pragmatica", sans-serif;
}

#Wrap {
  width: 100%;
}


/* @media (min-width: 769px) {
  :root {
    --rate: calc((100vw/1600));
  }
} */


/* ========================================================
                      * lp_contents *
========================================================= */

.lp_contents * {
  box-sizing: border-box;
  font-feature-settings: "palt";
  line-height: 1;
  letter-spacing: .15em;
  font-weight: 400;
  text-align: center;
}

.lp_contents {
  width: 100%;
  max-width: 60rem;
  height: 100%;
  font-family: var(--font_ja);
  overflow-x: clip;
  color: var(--color_main_txt);
}

@media (min-width: 769px) {
  .lp_contents {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
  }
}

.lp_contents .pc_only {
  display: none;
}

.lp_contents img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.lp_contents a {
  width: 100%;
  height: 100%;
  display: inline-block;
  color: unset;
}

.lp_contents h1,
.lp_contents h2,
.lp_contents h3,
.lp_contents h4,
.lp_contents h5 {
  font-weight: 400;
}

.lp_contents_inner {
  position: relative;
  z-index: 1;
  overflow: clip;
  background: var(--color_white);
  padding-bottom: calc(160 * (var(--rate)));
}

.lp_contents a,
.lp_contents button,
.lp_contents .btn_accordion,
.lp_contents dl,
.sec_products .contents_wrap .slide_tab,
.sec_products .contents_wrap .slide_tab li {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

.lp_contents a:hover {
  opacity: 1;
}



/* ========================================================
                      * PC *
========================================================= */
@media (min-width: 769px) {

  .lp_contents .fixed_area {
    position: relative;
    position: fixed;
    top: 0;
    left: 50%;
    translate: -50% 0;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background: var(--color_main);
  }

  .lp_contents .fixed_area .fixed_nav {
    display: grid;
    place-items: center;
    width: calc((100% - 60rem) / 2);
    height: 100vh;
    /* padding-top: var(--header-height); */
  }

  .fixed_left_inner .logo {
    width: 27.5rem;
    text-align: center;
  }

  .lp_contents_inner {
    width: 60rem;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
  }

}


/* ========================================================
            * fixed_nav fixed_right   *
========================================================= */

.fixed_right .ankerlink_wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  width: 40rem;
}

.fixed_right .ankerlink_wrap li {
  width: 12rem;
  height: 17rem;
  border-radius: 1.5rem;
  background: var(--color_sub02);
  position: relative;
}

.fixed_right .ankerlink_wrap li::before {
  content: "";
  width: 6rem;
  height: 6rem;
  position: absolute;
  top: 8.1rem;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.fixed_right .ankerlink_wrap li:nth-of-type(1):before {
  background: url(../../251205/img/ankerlink_img01.png) no-repeat center / 100%;
}

.fixed_right .ankerlink_wrap li:nth-of-type(2):before {
  background: url(../../251205/img/ankerlink_img02.png) no-repeat center / 100%;
}

.fixed_right .ankerlink_wrap li:nth-of-type(3):before {
  background: url(../../251205/img/ankerlink_img03.png) no-repeat center / 100%;
}

.fixed_right .ankerlink_wrap li:nth-of-type(4):before {
  background: url(../../251205/img/ankerlink_img04.png) no-repeat center / 100%;
}

.fixed_right .ankerlink_wrap li:nth-of-type(5):before {
  background: url(../../251205/img/ankerlink_img05.png) no-repeat center / 100%;
}

.fixed_right .ankerlink_wrap li:nth-of-type(6):before {
  background: url(../../251205/img/ankerlink_img06.png) no-repeat center / 100%;
}

.fixed_right .ankerlink_wrap li::after {
  content: "";
  width: 1.3rem;
  height: 0.7rem;
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: url(../../251205/img/icon_arrow.svg) no-repeat center / 100%;
  pointer-events: none;
}

.fixed_right .ankerlink_wrap li .category {
  color: var(--color_sub01);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: calc(19.2/16);
  margin-top: 1rem;
}

.fixed_right .ankerlink_wrap li:nth-of-type(1) .category,
.fixed_right .ankerlink_wrap li:nth-of-type(5) .category {
  margin-top: 2rem;
}

.fixed_right .ankerlink_wrap li .category_sub {
  font-size: 1.1rem;
  margin-top: 1rem;
}



/* ========================================================
                      * 共通設定  *
========================================================= */

.lp_contents .sp_only {
  display: none;
}

@media (max-width: 768px) {
  .lp_contents .sp_only {
    display: block;
  }
}

.lp_contents .accordion {
  transition: height 0.5s;
  overflow: hidden;
}

.lp_contents .btn_accordion {
  cursor: pointer;
  position: relative;
}

.lp_contents .btn_accordion.is-open {}

.lp_contents .btn_accordion::before {
  content: "";
  position: absolute;
  background: url(../../251205/img/icon_arrow_black.svg) no-repeat center;
  background-size: 100%;
  width: calc(34 * (var(--rate)));
  height: calc(18 * (var(--rate)));
  top: calc(56 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

.lp_contents .btn_accordion.is-open::before {
  transform: translate(-50%) rotate(180deg);
  top: calc(50 * (var(--rate)));
}

.lp_contents .btn {}


.lp_contents .js-fadeIn {
  opacity: 0;
  transition: 1.3s ease;
  transform: translateY(2rem)
}

.lp_contents .js-fadeIn.is-show {
  opacity: 1;
  transform: translateY(0)
}

.lp_contents img:hover {
  opacity: 1;
}

/* ========================================================
                      * sec_mv  *
========================================================= */

.sec_mv {}

.sec_mv .ttl_main {
  width: calc(750 * (var(--rate)));
}

.sec_mv .ankerlink_wrap {
  margin-top: calc(120 * (var(--rate)));
}

.sec_mv .ankerlink_wrap ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(30 * (var(--rate)));
}

.sec_mv .ankerlink_wrap li {
  width: calc(200 * (var(--rate)));
  height: calc(284 * (var(--rate)));
  border-radius: calc(15 * (var(--rate)));
  background: var(--color_sub02);
  position: relative;
}

.sec_mv .ankerlink_wrap li::before {
  content: "";
  width: calc(100 * (var(--rate)));
  height: calc(100 * (var(--rate)));
  position: absolute;
  top: calc(140 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.sec_mv .ankerlink_wrap li:nth-of-type(1):before {
  background: url(../../251205/img/ankerlink_img01.png) no-repeat center / 100%;
}

.sec_mv .ankerlink_wrap li:nth-of-type(2):before {
  background: url(../../251205/img/ankerlink_img02.png) no-repeat center / 100%;
}

.sec_mv .ankerlink_wrap li:nth-of-type(3):before {
  background: url(../../251205/img/ankerlink_img03.png) no-repeat center / 100%;
}

.sec_mv .ankerlink_wrap li:nth-of-type(4):before {
  background: url(../../251205/img/ankerlink_img04.png) no-repeat center / 100%;
}

.sec_mv .ankerlink_wrap li:nth-of-type(5):before {
  background: url(../../251205/img/ankerlink_img05.png) no-repeat center / 100%;
}

.sec_mv .ankerlink_wrap li:nth-of-type(6):before {
  background: url(../../251205/img/ankerlink_img06.png) no-repeat center / 100%;
}

.sec_mv .ankerlink_wrap li::after {
  content: "";
  width: calc(24 * (var(--rate)));
  height: calc(13 * (var(--rate)));
  position: absolute;
  bottom: calc(16 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  background: url(../../251205/img/icon_arrow.svg) no-repeat center / 100%;
  pointer-events: none;
}


.sec_mv .ankerlink_wrap li .category {
  color: var(--color_sub01);
  font-size: calc(28 * (var(--rate)));
  font-weight: 300;
  line-height: calc(33.6/28);
  margin-top: calc(18 * (var(--rate)));
}

.sec_mv .ankerlink_wrap li:nth-of-type(1) .category,
.sec_mv .ankerlink_wrap li:nth-of-type(5) .category {
  margin-top: calc(36 * (var(--rate)));
}

.sec_mv .ankerlink_wrap li .category_sub {
  font-size: calc(20 * (var(--rate)));
  margin-top: calc(10 * (var(--rate)));
}

.sec_mv .ankerlink_wrap li a {}

/* ========================================================
                      * sec_products  *
========================================================= */

.sec_products {}

.sec_products .products_wrap {
  padding-top: calc(155 * (var(--rate)));
}

.sec_products .products_wrap.products05 {
  padding-top: calc(148 * (var(--rate)));
}

.sec_products .ttl {
  font-size: calc(52 * (var(--rate)));
  color: var(--color_sub01);
  text-align: center;
  margin-bottom: calc(63 * (var(--rate)));
}

.sec_products .ttl span {
  font-size: calc(30 * (var(--rate)));
  color: var(--color_main_txt);
  margin-top: calc(25 * (var(--rate)));
  display: block;
}

.sec_products .products02 .ttl span {
  margin-top: calc(22 * (var(--rate)));
}

.sec_products .products_inner {
  width: calc(700 * (var(--rate)));
  margin: 0 auto;
  background: var(--color_sub02);
  padding-top: calc(60 * (var(--rate)));
  padding-bottom: calc(78 * (var(--rate)));
}

.sec_products .products_inner:not(.first) {
  margin-top: calc(80 * (var(--rate))) !important;
}

.sec_products .products06 .products_inner:not(.first) {
  margin-top: calc(88 * (var(--rate))) !important;
}

.sec_products .products06 .products_inner:not(.first) {
  margin-top: calc(86 * (var(--rate)));
}

.sec_products .contents_wrap {
  position: relative;
}

.sec_products .contents_wrap .icon {
  position: absolute;
}

.sec_products .contents_wrap .icon01 {
  width: calc(120 * (var(--rate)));
  height: calc(118 * (var(--rate)));
  top: calc(0 * (var(--rate)));
  left: calc(35 * (var(--rate)));
}

.sec_products .contents_wrap .icon02 {
  width: calc(120 * (var(--rate)));
  height: calc(139 * (var(--rate)));
  top: calc(140 * (var(--rate)));
  left: calc(35 * (var(--rate)));
}

.sec_products .contents_wrap .icon03 {
  width: calc(120 * (var(--rate)));
  height: calc(218 * (var(--rate)));
  top: calc(0 * (var(--rate)));
  right: calc(35 * (var(--rate)));
}

.sec_products .contents_wrap .icon04 {
  width: calc(120 * (var(--rate)));
  height: calc(139 * (var(--rate)));
  top: calc(0 * (var(--rate)));
  left: calc(35 * (var(--rate)));
}

.sec_products .products_inner ul {
  width: calc(700 * (var(--rate)));
  margin: 0 auto;
  cursor: pointer;
}

.sec_products .slick-slide .item_img,
.sec_products li .item_img {
  width: calc(360 * (var(--rate)));
}

.sec_products .img {
  /* width: calc(360 * (var(--rate))); */
  margin: 0 auto;
  position: relative;
}

.sec_products .contents_wrap .slide_tab {
  margin-top: calc(36 * (var(--rate)));
}

.sec_products .contents_wrap .slide_tab ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(24 * (var(--rate)));
}

.sec_products .contents_wrap .slide_tab li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(18 * (var(--rate)));
  cursor: pointer;
}

.sec_products .contents_wrap .slide_tab .color {
  width: calc(50 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  position: relative;
}

.sec_products .contents_wrap .slide_tab li.active .color::before {
  content: "";
  width: calc(64 * (var(--rate)));
  height: calc(64 * (var(--rate)));
  border-radius: 50%;
  border: 2px solid var(--color_sub01);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sec_products .contents_wrap .slide_tab .num {
  font-size: calc(20 * (var(--rate)));
}

.sec_products .products_wrap .name {
  font-size: calc(24 * (var(--rate)));
  margin-top: calc(57 * (var(--rate)));
}

.sec_products .products_wrap .price {
  font-size: calc(24 * (var(--rate)));
  position: relative;
  margin-top: calc(30 * (var(--rate)));
}

.sec_products .products_wrap .price .tax {
  font-size: calc(20 * (var(--rate)));
}

.sec_products .products_wrap .price::before {
  content: "";
  background: #E0D7D3;
  width: calc(600 * (var(--rate)));
  height: 2px;
  position: absolute;
  bottom: calc(-64 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

.sec_products .products_wrap .detail_wrap {
  margin-top: calc(112 * (var(--rate)));
  padding-left: calc(6 * (var(--rate)));
}

.sec_products .products_wrap .detail_wrap .accordion {
  height: calc(230 * (var(--rate)));
}

.sec_products .products_wrap .detail_wrap .txt {
  font-size: calc(22 * (var(--rate)));
  line-height: calc(44/22);
}

.sec_products .products_wrap .detail_wrap .txt:not(:first-of-type) {
  margin-top: calc(27 * (var(--rate)));
}

.sec_products .products_wrap .detail_wrap .txt.on_color {
  color: var(--color_sub01);
}

.sec_products .products_wrap .detail_wrap .btn_accordion {
  font-size: calc(24 * (var(--rate)));
  letter-spacing: .1em;
  padding-top: calc(20 * (var(--rate)));
  padding-bottom: calc(34 * (var(--rate)));
}

.sec_products .products_wrap .detail_wrap .btn_accordion.is-open {
  padding-top: calc(82 * (var(--rate)));
  padding-bottom: calc(3 * (var(--rate)));
}

.sec_products .products_wrap.products02 .detail_wrap .btn_accordion.is-open {
  padding-bottom: calc(0 * (var(--rate)));
}

.sec_products .products_wrap.products04 .detail_wrap .btn_accordion.is-open {
  padding-bottom: calc(0 * (var(--rate)));
}

.sec_products .products_wrap.products05 .detail_wrap .btn_accordion.is-open {
  padding-bottom: calc(35 * (var(--rate)));
}

.sec_products .products_wrap .btn_view {
  background: var(--color_sub01);
  border-radius: calc(12 * (var(--rate)));
  width: calc(360 * (var(--rate)));
  margin: calc(56 * (var(--rate))) auto 0;
}

.sec_products .products_wrap.products03 .btn_view {
  margin: calc(51 * (var(--rate))) auto 0;
}

.sec_products .products_wrap.products06 .btn_view {
  margin: calc(51 * (var(--rate))) auto 0;
}

.sec_products .products_wrap .products_other .btn_view {
  margin: calc(52 * (var(--rate))) auto 0;
}

.sec_products .products_wrap .btn_view a {
  font-size: calc(32 * (var(--rate)));
  letter-spacing: .1em;
  color: var(--color_white);
  padding: calc(21 * (var(--rate))) 0 calc(19 * (var(--rate)));
}

.sec_products .products_wrap .products_other {
  background: var(--color_sub02);
  border-top: 2px solid #E0D7D3;
  border-bottom: 2px solid #E0D7D3;
  margin-top: calc(100 * (var(--rate)));
}

.sec_products .products_wrap.products01 .products_other {
  margin-top: calc(96 * (var(--rate)));
}

.sec_products .products_wrap.products02 .products_other {
  margin-top: calc(96 * (var(--rate)));
}

.sec_products .products_wrap .products_other dl {
  padding-top: calc(34 * (var(--rate)));
  padding-bottom: calc(34 * (var(--rate)));
}

.sec_products .products_wrap .products_other dl.is-open {
  padding-bottom: calc(56 * (var(--rate)));
}

.sec_products .products_wrap.products02 .products_other dl.is-open {
  padding-bottom: calc(50 * (var(--rate)));
}

.sec_products .products_wrap.products04 .products_other dl.is-open {
  padding-bottom: calc(47 * (var(--rate)));
}

.sec_products .products_wrap .products_other dt {
  position: relative;
  cursor: pointer;
}

.sec_products .products_wrap .products_other dt .ttl_sub {
  font-size: calc(30 * (var(--rate)));
  color: var(--color_sub01);
  text-align: left;
  padding-left: calc(78 * (var(--rate)));
  letter-spacing: .1em;
}

.sec_products .products_wrap .products_other dt .ttl_sub span {
  font-size: calc(24 * (var(--rate)));
  display: block;
  text-align: left;
  margin-bottom: calc(8 * (var(--rate)));
  letter-spacing: .15em;
}

.sec_products .products_wrap .products_other dd {
  transition: all .5s;
  height: 0;
  overflow: hidden;
}

.sec_products .products_wrap .products_other .products_inner {
  background: var(--color_white);
  margin-top: calc(36 * (var(--rate)));
}

.sec_products .products_wrap .products_other dt .btn_toggle {
  position: absolute;
  top: calc(7 * (var(--rate)));
  right: calc(80 * (var(--rate)));
  width: calc(40 * (var(--rate)));
  height: calc(40 * (var(--rate)));
}

.sec_products .products_wrap .products_other dt .btn_toggle::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color_sub01);
  content: "";
  backface-visibility: hidden;
  transform: translateY(-50%);
}

.sec_products .products_wrap .products_other dt.is-open .btn_toggle::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color_sub01);
  content: "";
  backface-visibility: hidden;
  transform: translateY(-50%);
}

.sec_products .products_wrap .products_other dt .btn_toggle::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: var(--color_sub01);
  content: "";
  transition: .3s;
  transform: translateX(-50%);
}

@media (max-width: 768px) {

  .sec_products .products_wrap .products_other dt .btn_toggle::before {
    height: 2px;
  }

  .sec_products .products_wrap .products_other dt .btn_toggle::after {
    width: 2px;
  }

  .sec_products .products_wrap .products_other dt.is-open .btn_toggle::before {
    height: 2px;
  }
}

.sec_products .products_wrap .products_other dt.is-open .btn_toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}



.lp_contents .btn_all {
  width: calc(560 * (var(--rate)));
  border-radius: calc(16 * (var(--rate)));
  margin: calc(158 * (var(--rate))) auto 0;
  background: var(--color_sub01);
}

.lp_contents .btn_all a {
  font-size: calc(52 * (var(--rate)));
  letter-spacing: .1em;
  color: var(--color_white);
  padding: calc(26 * (var(--rate))) 0 calc(20 * (var(--rate)));
}

.lp_contents .btn_all a span {
  font-size: calc(22 * (var(--rate)));
  letter-spacing: .15em;
  display: block;
  margin-bottom: calc(12 * (var(--rate)));
}