@charset "UTF-8";

/* カラー切替
-----------------------------------------------------------------------*/
.main [data-pagearea] {
  display: none;
}
.main [data-pagearea].selected {
  display: block;
}
.main .item_head[data-pagearea].selected {
  display: flex;
}

/* メインビジュアル
-----------------------------------------------------------------------*/
.main .mv img {
  width: 100%;
}

/* 価格・商品名
-----------------------------------------------------------------------*/
.main .item_head {
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 3%;
  margin-top: min(calc(30 / 768 * 100vw), 30px);
}

.main .item_price {
  display: flex;
  align-items: center;
  gap: 0;
  line-height: 1.2;
}

.main .special_label {
  color: #fff;
  background-color: #000;
  font-family: var(--font-family);
  font-size: 1.2em;
  line-height: 1.1;
  letter-spacing: 0.02em;
  padding: 0 0.2em;
  margin-right: 0.4em;
}
.main .item_name {
  width: 100%;
  font-weight: bold;
  margin-top: 0.4em;
  line-height: 1.4;
}
.main .item_mybox {
  flex-shrink: 0;
}

/* カラー選択
-----------------------------------------------------------------------*/
.main .color_select {
  margin-top: min(calc(36 / 768 * 100vw), 36px);
}
.main .color_select_ttl {
  color: var(--i-color-pink);
  font-weight: bold;
}
.main .color_nav {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  margin-top: min(calc(14 / 768 * 100vw), 14px);
}
.main .color_nav_item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(calc(8 / 768 * 100vw), 8px) 0;
  padding: min(calc(12 / 768 * 100vw), 12px) 0 min(calc(10 / 768 * 100vw), 10px);
  border: 2px solid transparent;
  cursor: pointer;
}
.main .color_nav_img {
  width: 92%;
  height: auto;
}
.main .color_nav_name {
  line-height: 1;
}
.main .color_nav_item.selected {
  border-color: var(--i-color-pink02);
}
/* 選択中の吹き出し */
.main .color_nav_item.selected::before,
.main .color_nav_item.selected::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.main .color_nav_item.selected::before {
  top: 100%;
  width: min(calc(30 / 768 * 100vw), 30px);
  height: min(calc(24 / 768 * 100vw), 24px);
  background-color: var(--i-color-pink02);
}
.main .color_nav_item.selected::after {
  top: calc(100% - 2px);
  width: calc(min(calc(30 / 768 * 100vw), 30px) - 4px);
  height: calc(min(calc(24 / 768 * 100vw), 24px) - 3px);
  background-color: #fff;
}

/* 説明 */
.main .item_body {
  margin-top: min(calc(30 / 768 * 100vw), 30px);
}
.main .item_desc {
  line-height: 1.7;
  background-color: #f6ede4;
  padding: 0.9em 1.4em;
  border-radius: 0.6em;
  font-weight: bold;
}

/* スウォッチボタン */
.main .btn_swatch {
  width: calc(540 / 768 * 100%);
  margin-inline: auto;
}
.main .btn_swatch a {
  position: relative;
  display: block;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 1.4;
  background-color: #000;
  padding: 0.4em 1em;
  border-radius: 2em;
}
.main .btn_swatch a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.6em;
  translate: 0 -50%;
  width: 0.6em;
  height: 0.7em;
  background-color: #fff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

/* カート */
.main .item_cart {
  container-type: inline-size;
  container-name: container-cart;
}

/* セット内容
-----------------------------------------------------------------------*/
.main .set {
  font-weight: bold;
  background-color: #f6ede4;
  margin-inline: 1%;
  padding-bottom: min(calc(24 / 768 * 100vw), 24px);
}
.main .set_ttl {
  color: #fff;
  text-align: center;
  background-color: #a6826a;
  padding: 0.7em 0;
}
.main .set_item {
  margin-inline: 2%;
  padding: min(calc(30 / 768 * 100vw), 30px) 2%;
}
.main .set_item + .set_item {
  border-top: 1px solid #d9d0c8;
}
.main .set_item_ttl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.3em 0.5em;
  font-weight: bold;
  line-height: 1.3;
  border-left: 0.3em solid #c8a888;
  padding-left: 0.4em;
}
.main .set_item_badge {
  font-weight: bold;
  letter-spacing: 0.05em;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 1em;
  padding: 0.1em 0.7em;
}
.main .set_img {
  margin-top: min(calc(20 / 768 * 100vw), 20px);
}
.main .set_img img {
  height: auto;
}
.main .set_img.ver_foundation {
  width: calc(560 / 700 * 100%);
  margin-inline: 5% auto;
}
.main .set_img.ver_pouch {
  width: calc(575 / 700 * 100%);
  margin-inline: 8% auto;
}
.main .set_row {
  display: flex;
  align-items: center;
  gap: 0 4%;
}
.main .set_img.ver_sponge {
  flex-shrink: 0;
  width: calc(235 / 700 * 100%);
  margin-inline: 4% 0;
}
.main .set_text {
  margin-top: min(calc(16 / 768 * 100vw), 16px);
  line-height: 1.6;
}
.main .set_spec {
  margin-top: 1em;
  line-height: 1.7;
}
.main .set_more {
  display: flex;
  justify-content: flex-end;
  margin-top: min(calc(16 / 768 * 100vw), 16px);
}
.main .set_note {
  color: #666;
  margin-inline: 2%;
}

/* 動画・バナー
-----------------------------------------------------------------------*/
.main .btn_movie {
  width: calc(557 / 768 * 100%);
  margin-inline: auto;
}
.main .btn_movie img {
  height: auto;
}
.main .bnr_list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: min(calc(24 / 768 * 100vw), 24px) 0;
  border-top: 2px solid #000;
  padding: min(calc(50 / 768 * 100vw), 50px) 0 min(calc(60 / 768 * 100vw), 60px);
}
.main .bnr_list a {
  width: calc(745 / 768 * 100%);
}
.main .bnr_list img {
  width: 100%;
  height: auto;
}

/* 動画モーダル */
.main .youtube_short {
  width: min(70%, 400px);
  margin: auto;
}
.main .youtube_short iframe {
  aspect-ratio: 9 / 16;
  width: 100%;
  height: 100%;
}