@charset "UTF-8";

.main {
  --q-gold: #bd9f63;
  --q-brown: #4b3a24;
  --q-line: #cdb88c;
  color: var(--q-brown);
}

html{
  scroll-behavior: smooth;
}
.main a {
  color: inherit;
}

.main area {
  cursor: pointer;
}

/* アンカー位置（#header の実高さに追従）
-----------------------------------------------------------------------*/
.main .scroll_adjust div {
  padding-top: var(--header-h, 61px);
}

@media screen and (768px <=width) {
  .main .scroll_adjust div {
    padding-top: var(--header-h, 81px);
  }
}


/* 公開日時制御（coming soon ⇔ カート）
   common/reserve261006.xhtml が出力するフラグで出し分け
-----------------------------------------------------------------------*/
.branch_icon_area {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 1em;
  /* padding-block: 0.5rem; */
}

.branch_main_area {
  display: none;
}

body:has(.is_release_before):has(.is_platinum) .branch_icon_area {
  display: none;
}

body:has(.is_release_before):has(.is_platinum) .branch_main_area {
  display: block;
}

body:has(.is_release_after) .branch_icon_area {
  display: none;
}

body:has(.is_release_after) .branch_main_area {
  display: block;
}

.branch_icon_coming {
  color: #fff;
  line-height: 1.1;
  background-color: #0e6eb8;
  text-align: center;
  padding: 0.3em 1em;
  font-size: min(calc(24 / 768 * 100vw), 16px);
}


/* ON SALE ／ MV ／ 4つのポイント
-----------------------------------------------------------------------*/
.main .howtouse_ttl {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: min(calc(36 / 768 * 100vw), 36px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--q-brown);
  padding: 0 0 0.3em min(calc(30 / 768 * 100vw), 30px);
  border-bottom: 1px solid var(--q-brown);
}

.main .howtouse_text {
  line-height: 1.9;
  padding: 1em min(calc(20 / 768 * 100vw), 20px) 0;
}

.main .howtouse_link {
  color: inherit;
  text-decoration: underline;
}

.main .point4 {
  background-image: linear-gradient(#fff, #f6f0e8);
}


/* 商品セクション共通
-----------------------------------------------------------------------*/
/* 背景画像（bg1／bg2）は item_drw から下（.sec_item_bg）にだけ表示 */
.main .sec_item {
  background-color: #fff;
  padding: min(calc(50 / 768 * 100vw), 50px) min(calc(30 / 768 * 100vw), 30px) 0;
}

.main .sec_item_bg {
  /* 背景の高さは「アコーディオンを開いた状態の高さ」で固定（--bg-h は page.js で設定）
     100% 100% だと開閉のたびに伸縮するため。JS未実行時は幅基準（auto） */
  background-repeat: no-repeat;
  background-size: 100% var(--bg-h, auto);
  background-position: top center;
  /* セクションの左右余白を打ち消して全幅に */
  margin: 0 max(calc(-30 / 768 * 100vw), -30px) 0;
  padding: min(calc(40 / 768 * 100vw), 40px) min(calc(26 / 768 * 100vw), 26px);
}

.main .sec_item_bg.ver_bg1 {
  background-color: #f3d9d2;
  background-image: url(../img/bg1.png);
}

.main .sec_item_bg.ver_bg2 {
  background-color: #f5dfcb;
  background-image: url(../img/bg2.png);
}

.main .sec_item_bg .item_drw {
  margin-top: 0;
}

.main .item_ttl {
  display: flex;
  align-items: center;
  gap: 0 1em;
}

.main .item_ttl.ver_center {
  justify-content: center;
}

.main .item_ttl_img {
  line-height: 0;
  margin: 0;
}

.main .item_like {
  flex-shrink: 0;
}

.main .item_name {
  line-height: 1.5;
  margin-top: 0.8em;
}

.main .item_spf {
  line-height: 0;
  margin-top: 0.8em;
}

.main .item_price {
  margin-top: 0.6em;
}

.main .item_price_num {
  font-weight: bold;
  margin-left: 0.3em;
}

.main .item_cart {
  margin-top: 0.6em;
}

.main .item_cart .i_cart101,
.main .item_cart .i_cart101_empty {
  margin-top: 0;
}

.main .item_cart .i_ingredient {
  flex-shrink: 0;
  color: inherit;
}

.main .item_cart .i_ingredient::before {
  background-color: currentColor;
}

.main .item_lead {
  line-height: 1.8;
  margin-top: 1.5em;
}

.main .item_lead strong,
 strong {
  font-weight: bold;
  color: #3c321d;
}


/* item01 プライマー
-----------------------------------------------------------------------*/
.main .primer_head {
  display: flex;
  align-items: flex-start;
  gap: 0 3%;
}

.main .primer_info {
  flex-grow: 1;
  min-width: 0;
}

.main .primer_fig {
  flex-shrink: 0;
  margin-right: max(calc(-20 / 768 * 100vw), -20px);
}


/* item02 ファンデーション
-----------------------------------------------------------------------*/
.main [data-colorarea] {
  display: none;
}

.main [data-colorarea].selected {
  display: block;
}

.main .fd_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5%;
}

.main .fd_bottle {
  padding-left: 9%;
}

.main .fd_info {
  min-width: 0;
}

.main .fd_info .item_name {
  margin-top: .6em;
}

.main .fd_lead {
  line-height: 1.8;
  margin-top: .6em;
}

.main .fd_color.selected {
  display: flex;
  align-items: center;
  gap: min(calc(60 / 768 * 100vw), 60px);
  margin-top: 6%;
}

.main .fd_texture {
  flex-shrink: 0;
}



.main .fd_cart {
  flex-grow: 1;
  min-width: 0;
}

.main .fd_color_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0 0.5em;
  border-bottom: 1px solid #878a8d;
}

.main .fd_color_name {
  font-weight: bold;
  letter-spacing: 0.05em;
}

.main .fd_color_text {
  margin-top: 0.8em;
}

/* カラー選択 */
.main .fd_swatch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: min(calc(16 / 768 * 100vw), 16px) min(calc(10 / 768 * 100vw), 10px);
  margin-top: 6%;
}

.main .fd_swatch_btn {
  display: block;
  position: relative;
  line-height: 0;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  background: #fff;
  padding: min(calc(20 / 768 * 100vw), 20px) min(calc(16 / 768 * 100vw), 16px);
  transition: none;
}

/* border幅は変えず、内側の box-shadow で太さを出す（レイアウトが動かない） */
.main .fd_swatch_btn.selected {
  border-color: #bfa368;
  box-shadow: inset 0 0 0 min(calc(2 / 768 * 100vw), 2px) #bfa368;
}

.main .fd_swatch_btn img {
  width: min(calc(105 / 768 * 100vw), 105px) !important;
  height: auto;
}

.main .fd_swatch_name {
  position: absolute;
  top: 50%;
  right: 12%;
  transform: translateY(-50%);
  line-height: 1;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #282425;
}

.main .fd_legend {
  margin-top: 5%;
  padding-block: min(calc(20 / 768 * 100vw), 20px);
  padding-inline: min(calc(32 / 768 * 100vw), 32px);
  color: #333;
  background-image: -moz-linear-gradient( 130deg, rgb(244,236,223) 0%, rgb(251,246,238) 100%);
  background-image: -webkit-linear-gradient( 130deg, rgb(244,236,223) 0%, rgb(251,246,238) 100%);
  background-image: -ms-linear-gradient( 130deg, rgb(244,236,223) 0%, rgb(251,246,238) 100%);
}

.main .fd_compare {
  margin-top: 5%;
  display: flex;
  justify-content: center;
}

.main .fd_compare_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 0.6em;
    color: #fff;
    font-weight: bold;
    background-color: #000;
    border-radius: 100px;
    padding: 0.3em 1.5em;
    width: fit-content;
}

.main .fd_compare_btn::before {
  flex-shrink: 0;
  content: "";
  width: 0.5em;
  height: 0.6em;
  background-color: #fff;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}


/* アコーディオン
-----------------------------------------------------------------------*/
.main .item_drw {
  margin-top: 6%;
  border: 1px solid #f4ecdf;
}

.main .drw_btn {
  display: flex;
  align-items: center;
  position: relative;
  color: #bfa368;
  font-weight: bold;
  padding: 20px 2.75em 20px 0.8em;
  cursor: pointer;
  /* border-width: 1px;
  border-color: rgb(244, 236, 223);
  border-style: solid; */
  background-image: -moz-linear-gradient( 130deg, rgb(244,236,223) 0%, rgb(251,246,238) 100%);
  background-image: -webkit-linear-gradient( 130deg, rgb(244,236,223) 0%, rgb(251,246,238) 100%);
  background-image: -ms-linear-gradient( 130deg, rgb(244,236,223) 0%, rgb(251,246,238) 100%);

}

.main .drw_btn_text {
  flex-grow: 1;
  letter-spacing: 0;
}

.main .drw_btn_icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0.8em;
  width: 1.2em;
  height: 1.2em;
  margin: auto;
}

.main .drw_btn_icon::before,
.main .drw_btn_icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--q-gold);
}

.main .drw_btn_icon::before {
  width: 1em;
  height: 2px;
}

.main .drw_btn_icon::after {
  width: 2px;
  height: 1em;
}

.main .drw_btn.active .drw_btn_icon::after {
  display: none;
}

.main .drw_target {
  display: none;
}

/* 初期状態は開いた状態 */
.main .drw_target.open {
  display: block;
}

.main .drw_target_in {
  background-color: #fff;
  padding: min(calc(20 / 768 * 100vw), 20px) min(calc(15 / 768 * 100vw), 15px);
}

.main .drw_block + .drw_block {
  margin-top: min(calc(40 / 768 * 100vw), 40px);
}

.main .drw_head {
  color: var(--q-gold);
  font-weight: bold;
  line-height: 1.5;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--q-line);
  margin-bottom: 0.8em;
}

.main .drw_text {
  line-height: 1.9;
}

.main .drw_note {
  font-size: 0.7em;
}

.main .drw_sub {
  line-height: 1.5;
  margin-bottom: 0.6em;
}

.main .drw_fig {
  text-align: center;
  margin-top: 1em;
}

.main .drw_fig.ver_left {
  text-align: left;
  margin-top: 0;
}

.main .drw_fig img {
  max-width: 100%;
  height: auto;
}

/* テキスト＋右画像（ライトピンク） */
.main .drw_flex {
  display: flex;
  align-items: center;
  gap: 0 3%;
}

.main .drw_flex .drw_text {
  flex: 1;
}

.main .drw_flex_img {
  flex-shrink: 0;
  width: 22%;
}

.main .drw_flex_img img {
  width: 100% !important;
  height: auto;
}

/* 図のキャプション（図の各コマの下に並べる） */
.main .drw_step {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 3%;
  margin-top: 0.8em;
}

.main .drw_step_item {
  line-height: 1.5;
}

.main .drw_step_ttl {
  display: block;
  font-weight: bold;
  margin-bottom: 0.2em;
}

/* 重ねて表示するモーダル（下のモーダルより前面に） */
.main .modal_modmicro.ver_stack {
  z-index: calc(var(--i-modal-zindex) + 1);
}


/* HOW TO USE
-----------------------------------------------------------------------*/
.main .sec_item .howtouse {
  margin-top: 8%;
}


/* 区切り線（rectangle.png）
   img を直接置くと行ボックスの高さ分の隙間ができるため、line-height: 0 の箱で包む */
.main .line_bar {
  line-height: 0;
}

.main .line_bar img {
  display: block;
  width: 100% !important;
  height: auto;
}


/* 注釈
-----------------------------------------------------------------------*/
.main .note {
  padding: min(calc(36 / 768 * 100vw), 36px) min(calc(30 / 768 * 100vw), 30px);
}

.main .note_item {
  display: flex;
  line-height: 1.7;
}

/* 2行目以降は ※番号 の後ろに揃える */
.main .note_num {
  flex-shrink: 0;
  margin-right: 0.5em;
}


/* QUANT シリーズ
-----------------------------------------------------------------------*/
.main .series {
  padding-block: min(calc(40 / 768 * 100vw), 40px);
  background-image: -moz-linear-gradient( 130deg, rgb(244,236,223) 0%, rgb(253,250,245) 100%);
  background-image: -webkit-linear-gradient( 130deg, rgb(244,236,223) 0%, rgb(253,250,245) 100%);
  background-image: -ms-linear-gradient( 130deg, rgb(244,236,223) 0%, rgb(253,250,245) 100%);
}

.main .series_ttl {
  text-align: center;
}

.main .series_slider {
  position: relative;
  margin-top: min(calc(40 / 768 * 100vw), 40px);
}

.main .series_slider .swiper {
  padding: 0 min(calc(30 / 768 * 100vw), 30px);
}

.main .series_link {
  display: block;
  text-align: center;
}

.main .series_fig {
  display: block;
  line-height: 0;
}

.main .series_fig img {
  width: 100% !important;
  height: auto;
}

.main .series_label {
  display: block;
  margin-top: 0.5em;
  padding-bottom: 0.3em;
}

.main .series_prev,
.main .series_next {
  position: absolute;
  z-index: 2;
  top: 40%;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.main .series_prev {
  left: min(calc(10 / 768 * 100vw), 10px);
}

.main .series_next {
  right: min(calc(10 / 768 * 100vw), 10px);
}

.main .series_prev::before,
.main .series_next::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 30%;
  height: 30%;
  margin: auto;
  border-style: solid;
  border-color: #fff;
  border-width: 2px 2px 0 0;
}

.main .series_prev::before {
  transform: translateX(15%) rotate(-135deg);
}

.main .series_next::before {
  transform: translateX(-15%) rotate(45deg);
}

.main .series_prev.swiper-button-disabled,
.main .series_next.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

.main .series_bnr {
  margin: min(calc(40 / 768 * 100vw), 40px) 0 0;
  padding-inline: min(calc(25 / 768 * 100vw), 25px);
}

.main .series_bnr_btn {
display: flex;
    align-items: center;
    justify-content: end;
    gap: 0 0.6em;
    font-weight: bold;
    /* padding: 0.8em 0.5em; */
    /* border-top: 1px solid var(--q-brown); */
    /* border-bottom: 1px solid var(--q-brown); */
    text-decoration: underline;
    color: #000;
}

.main .series_bnr_btn::before {
  flex-shrink: 0;
  content: "";
  width: 0.5em;
  height: 0.6em;
  background-color: #000;
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
}


/* 画像モーダル
-----------------------------------------------------------------------*/
.main .js_zoom_modal .modal_modmicro_container {
  max-width: 768px;
}

.main .js_zoom_modal .modal_modmicro_content {
  text-align: center;
}

.main .js_zoom_modal .modal_modmicro_content img {
  width: 100% !important;
  height: auto;
}

.main .drw_step.ver2{
  display: flex;
    justify-content: space-between;
}