@charset "UTF-8";

/* ==========================================
   ■ PC設定値（参考LPの等比スケーリング仕様）
   ========================================== */
:root {
  --limitSizeNum: 100vw;
  --spSize: 780;
  --pcSize: 1400;
  --spSizeInPc: 468;
}

.f-container {
  --pc-width: 1400;             /* PCデザイン幅 */
  --sp-width: 780;              /* SPデザイン幅 */
  --pc-artboard-width: 468;     /* PC内の中央コンテンツ幅 */
  --sp-artboard-width: 780;     /* SP基準デザイン幅 */
  --formula: calc(var(--variable) * var(--ratio));  /* 中央コンテンツ用（SP→PC縮小） */
  --formula_pc: calc(var(--variable) * 1);          /* PC左右パーツ用 */
}

/* 1401px以上：固定値（拡大させない） */
@media (min-width: 1401px) {
  html {
    font-size: 62.5%;
  }
  .f-container {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* 468 / 780 ≒ 0.6 */
    --variable: 1px;
  }
}

/* 768px〜1400px：画面幅に応じて等比可変 */
@media (min-width: 768px) and (max-width: 1400px) {
  html {
    font-size: calc(100vw / 140);
  }
  .f-container {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
}

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
}

/* SP追従ナビはPCで非表示 */
.sp-sticky-nav {
  display: none !important;
}

.l-container {
  width: 100%;
}

.l-footer {
  padding: 0;  
}

.pc-footer {
  margin: 0;
}

/* ==========================================
   3 Column Layout
   ========================================== */
.f-container {
  opacity: 0;
  transition: opacity 0.5s ease, background-color 0.5s ease;
  overflow: clip;
  display: flex;
  justify-content: center;
  position: relative;
  background-color: #f8ebe9; /* hero〜sec01 背景 */
}
.f-container.show {
  opacity: 1;
}
.f-container.is-sec02 {
  background-color: #f7f0e4; /* sec02 背景 */
}

/* サイドバー（ヘッダー80px分を引いた追従設定） */
.f-left, .f-right {
  width: calc((100% - 780 * var(--formula)) / 2);
  height: calc(100vh - 80px);
  position: sticky;
  top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pc-group {
  position: absolute;
  transition: opacity 0.6s ease;
}

/* 左カラム：タイトル */
.f-left .pc-group {
  width: calc(238 * var(--formula_pc));
}
.f-left .pc-group-01 {
  opacity: 1;
}
.f-left .pc-group-02 {
  opacity: 0;
}
.f-container.is-sec02 .f-left .pc-group-01 {
  opacity: 0;
}
.f-container.is-sec02 .f-left .pc-group-02 {
  opacity: 1;
}

/* 右カラム：LOOK画像を横並びに配置 */
.f-right .look-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: calc(50 * var(--formula_pc));
  width: calc(290 * var(--formula_pc));
}
.f-right .fig-pc-look {
  width: calc(140 * var(--formula_pc));
}
.f-right .pc-group-01 {
  opacity: 1;
}
.f-right .pc-group-02 {
  opacity: 0;
}
.f-container.is-sec02 .f-right .pc-group-01 {
  opacity: 0;
}
.f-container.is-sec02 .f-right .pc-group-02 {
  opacity: 1;
}

/* ==========================================
   Center Main Content (中央 468px 相当)
   ========================================== */
.f-main {
  width: calc(780 * var(--formula));
  position: relative;
}
.f-main-wrap {
  width: 100%;
  background-color: #fcf8f7;
  transition: background-color 0.5s ease;
}
.f-container.is-sec02 .f-main-wrap {
  background-color: #faf8f2;
}

/* 基本リセット */
.f-container * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.f-container img, .f-container svg {
  width: 100%;
  height: auto;
  pointer-events: none;
  display: block;
}
.f-container a {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.f-container a:hover {
  opacity: 0.7;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

/* ==========================================
   Animations
   ========================================== */
.anim-target {
  transition: all 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.delay-03s { transition-delay: 0.3s; }
.delay-06s { transition-delay: 0.6s; }
.delay-1s  { transition-delay: 1.0s; }

.blur-fade {
  opacity: 0;
  filter: blur(calc(5 * var(--formula)));
  transform: scale(1.03);
}
.blur-fade.showed {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.fade-up {
  opacity: 0;
  transform: translateY(calc(40 * var(--formula)));
}
.fade-up.showed {
  opacity: 1;
  transform: translateY(0);
}

/* Ticker (Marquee) */
.sec01 .ticker-wrap {
  width: 100%;
  overflow: hidden;
  margin: calc(57 * var(--formula)) 0 0;
}
.sec02 .ticker-wrap {
  width: 100%;
  overflow: hidden;
  margin: calc(55 * var(--formula)) 0 0;
}
.ticker-move {
  display: flex;
  width: max-content;
  animation: ticker 15s linear infinite;
}
.ticker-move img {
  width: calc(930 * var(--formula));
  height: auto;
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================
   Sections Layout (Margin / Width)
   ========================================== */
.hero {
  position: relative;
}
.sec01,
.sec02 {
  scroll-margin-top: 160px; 
}
.fig-hero {
  width: 100%;
  position: relative;
}
.fig-hero-title {
  position: absolute;
  top: calc(760 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  width: calc(350 * var(--formula));
}

.fig-hero-title.fade-up {
  transform: translate(-50%, calc(40 * var(--formula)));
}
.fig-hero-title.fade-up.showed {
  transform: translate(-50%, 0);
}

.lead {
  padding: calc(80 * var(--formula)) 0;
}
.fig-lead-text {
  width: calc(600 * var(--formula));
  margin: calc(18 * var(--formula)) auto calc(52 * var(--formula));
}
.lead-looks {
  display: flex;
  justify-content: center;
  gap: calc(100 * var(--formula));
}
.fig-look01, .fig-look02 {
  width: calc(280 * var(--formula));
}

.sec01_upper {
  text-align: center;
  margin-bottom: calc(60 * var(--formula));
}
.sec02_upper {
  text-align: center;
  margin-bottom: calc(74 * var(--formula));
}
.fig-sec01-title {
  width: calc(574 * var(--formula));
  margin: calc(68 * var(--formula)) auto calc(82 * var(--formula));
}
.fig-sec02-title {
  width: calc(670 * var(--formula));
  margin: calc(355 * var(--formula)) auto calc(82 * var(--formula));
}
.fig-sec01-text, .fig-sec02-text {
  width: calc(734 * var(--formula));
  margin: 0 auto;
}

/* Recommend Items */
.sec01 .recommend_items {
  margin: calc(80 * var(--formula)) 0 0;
}
.sec01 .recommend_items_upper, .sec01 .recommend_items_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sec01 .recommend_items_upper {
  padding-left: calc(30 * var(--formula));
  margin-bottom: calc(40 * var(--formula));
}
.sec01 .recommend_items_bottom {
  padding-right: calc(30 * var(--formula));
  margin-top: calc(79 * var(--formula));
}

.sec02 .recommend_items {
  margin: calc(121 * var(--formula)) 0 0;
}
.sec02 .recommend_items_upper, .sec02 .recommend_items_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sec02 .recommend_items_upper {
  padding-left: calc(30 * var(--formula));
  margin-bottom: calc(40 * var(--formula));
}
.sec02 .recommend_items_bottom {
  padding-right: calc(30 * var(--formula));
  margin-top: calc(77 * var(--formula));
}
.fig-img01 { width: calc(518 * var(--formula)); }
.fig-img02 { width: calc(518 * var(--formula)); }
.fig-img05 { width: calc(520 * var(--formula)); }
.fig-img06 { width: calc(520 * var(--formula)); }
.sec01 .item-wrap { width: calc(230 * var(--formula)); text-align: center; }
.sec02 .item-wrap { width: calc(222 * var(--formula)); text-align: center; }
.fig-check01, .fig-check02, .fig-check07, .fig-check08 {
  width: calc(140 * var(--formula));
  margin: calc(20 * var(--formula)) auto 0;
}

.fig-img03 {
  width: 100%;
  margin: calc(63 * var(--formula)) auto calc(60 * var(--formula));
}
.fig-img04 {
  width: 100%;
  margin: calc(58 * var(--formula)) auto 0;
}

/* Items with comments */
.item_with_comment01, .item_with_comment02, .item_with_comment03 {
  margin-bottom: calc(100 * var(--formula));
}
.sec01 .item_with_comment_upper {
  width: calc(600 * var(--formula));
  margin: 0 auto calc(30 * var(--formula));
}
.sec02 .item_with_comment_upper {
  width: calc(642 * var(--formula));
  margin: calc(228 * var(--formula)) auto 0 calc(-12 * var(--formula));
}

.fig-sec01-item03 {
  width: 88%;
  margin: calc(223 * var(--formula)) auto 0;
}
.fig-sec01-item04 {
  width: 82%;
  margin: calc(117 * var(--formula)) auto 0 calc(138 * var(--formula));
}
.fig-sec01-item05 {
  width: 66%;
  margin: calc(117 * var(--formula)) auto calc(-23 * var(--formula)) calc(101 * var(--formula));
}

.fig-sec02-item01 {
  width: 82%;
  margin: calc(117 * var(--formula)) auto calc(28 * var(--formula)) calc(138 * var(--formula));
}
.fig-sec02-item04 {
  width: 77%;
  margin: calc(-106 * var(--formula)) auto calc(24 * var(--formula)) calc(238 * var(--formula));
}
.fig-sec02-item05 {
  width: 60%;
  margin: calc(-148 * var(--formula)) auto calc(14 * var(--formula)) calc(210 * var(--formula));
}

/* Fukidashi Position */
.fig-sec01-fukidashi01 {
  width: calc(376 * var(--formula));
  top: -34%;
  right: -6%;
  z-index: 2;
}
.fig-sec02-fukidashi01 {
  width: calc(382 * var(--formula));
  top: -35%;
  right: -16%;
  z-index: 2;
}
.fig-sec01-fukidashi02 {
  width: calc(166 * var(--formula));
  top: 1%;
  left: -5%;
  z-index: 2;
}
.fig-sec01-fukidashi03 {
  width: calc(165 * var(--formula));
  bottom: 4%;
  right: -7%;
  z-index: 2;
}
.fig-sec02-fukidashi02 {
  width: calc(166 * var(--formula));
  top: 0%;
  left: 11%;
  z-index: 2;
}
.fig-sec02-fukidashi03 {
  width: calc(165 * var(--formula));
  bottom: 14%;
  right: -16%;
  z-index: 2;
}

.fig-limited-circle01 {
  width: calc(150 * var(--formula));
  top: 60.5%;
  left: -6.6%;
  z-index: 3;
}
.fig-limited-circle02 {
  width: calc(150 * var(--formula));
  top: 1%;
  right: -5%;
  z-index: 3;
}
.fig-limited-circle03 {
  width: calc(150 * var(--formula));
  top: 5%;
  left: -7%;
  z-index: 3;
}
.fig-limited-circle04 {
  width: calc(150 * var(--formula));
  top: 60%;
  left: 10%;
  z-index: 3;
}
.fig-limited-circle05 {
  width: calc(150 * var(--formula));
  top: 0%;
  right: -14%;
  z-index: 3;
}
.fig-limited-circle06 {
  width: calc(150 * var(--formula));
  top: 14%;
  left: 10%;
  z-index: 3;
}

.item_with_comment_bottom {
  text-align: center;
}
.fig-check03 {
  width: calc(204 * var(--formula));
  margin: calc(47 * var(--formula)) auto 0;
}
.fig-check04 {
  width: calc(204 * var(--formula));
  margin: calc(47 * var(--formula)) auto 0;
}
.fig-check05 {
  width: calc(204 * var(--formula));
  margin: calc(50 * var(--formula)) auto 0;
}
.fig-check06 {
  width: calc(204 * var(--formula));
  margin: calc(45 * var(--formula)) auto 0;
}
.fig-check09 {
  width: calc(204 * var(--formula));
  margin: calc(50 * var(--formula)) auto 0;
}
.fig-check10 {
  width: calc(204 * var(--formula));
  margin: calc(53 * var(--formula)) auto 0;
}
.fig-comment-title {
  width: calc(550 * var(--formula));
  margin: calc(42 * var(--formula)) auto 0 calc(116 * var(--formula));
}
.fig-comment-text {
  width: calc(698 * var(--formula));
  margin: calc(12 * var(--formula)) auto 0;
}

.sec02 .fig-comment-text {
  width: calc(698 * var(--formula));
  margin: calc(13 * var(--formula)) auto 0;
}

/* ==========================================
   Credit Fonts & Styles
   ========================================== */
.credit a {
  font-family: "lato", "ryo-gothic-plusn", sans-serif;
  color: #8e6c41;
  font-size: calc(26 * var(--formula));
  line-height: calc(57 * var(--formula));
  letter-spacing: 0.1em;
  text-align: center;
}

/* 縦並びにして中央寄せにする */
.credit .item a {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 商品名（テキスト部分）のスタイル */
.credit .item a .txt {
  font-size: calc(28 * var(--formula));
  line-height: calc(56 * var(--formula));
  letter-spacing: 0.1em;
}

/* 金額部分のスタイルと、商品名との間の余白 */
.credit .item a .price {
  margin-top: calc(10 * var(--formula)); /* 改行後の商品名と価格の間の隙間 */
  font-size: calc(28 * var(--formula));
  line-height: calc(28 * var(--formula));
  letter-spacing: 0.1em;
}

/* ==========================================
   Accordion (共通ベース設定)
   ========================================== */
.accordion {
  position: relative;
}

.accordion__body {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: max-height 0.8s ease, margin-bottom 0.8s ease;
}

.accordion__mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(200 * var(--formula));
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.accordion__body.is-open .accordion__mask {
  opacity: 0;
}

.fig-accordion-img {
  position: relative;
  width: 100%;
}

.accordion__link {
  position: absolute;
  display: block;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0); 
  transition: background-color 0.3s ease;
}

.accordion__link:hover {
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.fig-accordion-btn {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
}

.fig-accordion-btn img {
  position: absolute;
  cursor: pointer;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.fig-accordion-btn.is-open .btn-open {
  opacity: 0;
  pointer-events: none;
}

.fig-accordion-btn .btn-close {
  opacity: 0;
  pointer-events: none;
}

.fig-accordion-btn.is-open .btn-close {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================
   Accordion (sec01 個別設定：調整前)
   ========================================== */
.sec01 .accordion {
  width: calc(742 * var(--formula));
  margin: calc(60 * var(--formula)) auto;
}

.sec01 .accordion__body {
  max-height: calc(420 * var(--formula));
}

.sec01 .accordion__body.is-open {
  max-height: calc(2500 * var(--formula)); 
  margin-bottom: 0; 
}

.sec01 .accordion__mask {
  background: linear-gradient(to bottom, rgba(252, 248, 247, 0), rgba(252, 248, 247, 1));
}

.sec01 .accordion__link {
  width: calc(180 / 700 * 100%);
  height: 12%;
  left: 5%;
}

.sec01 .link-eye { top: 19%; }
.sec01 .link-cheek { top: 44%; }
.sec01 .link-lip { top: 69%; }

.sec01 .fig-accordion-btn .btn-open {
  width: calc(190 * var(--formula));
  top: calc(494 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  pointer-events: auto;
}

.sec01 .fig-accordion-btn.is-open .btn-open {
  opacity: 0;
  pointer-events: none;
}

.sec01 .fig-accordion-btn .btn-close {
  width: calc(134 * var(--formula));
  top: auto;
  bottom: calc(123 * var(--formula)); 
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================
   Accordion (sec02 個別設定：調整後)
   ========================================== */
.sec02 .accordion {
  width: calc(742 * var(--formula));
  margin: calc(117 * var(--formula)) auto;
}

.sec02 .accordion__body {
  max-height: calc(420 * var(--formula));
}

.sec02 .accordion__body.is-open {
  max-height: calc(1600 * var(--formula)); 
  margin-bottom: calc(-119 * var(--formula)); 
}

.sec02 .accordion__mask {
  background: linear-gradient(to bottom, rgba(250, 248, 242, 0), rgba(250, 248, 242, 1));
}

.sec02 .accordion__link {
  width: calc(180 / 700 * 100%);
  height: 12%;
  left: 5%;
}

.sec02 .link-eye { top: 19%; }
.sec02 .link-cheek { top: 44%; }
.sec02 .link-lip { top: 69%; }

.sec02 .fig-accordion-btn .btn-open {
  width: calc(190 * var(--formula));
  top: calc(494 * var(--formula));
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  pointer-events: auto;
}

.sec02 .fig-accordion-btn.is-open .btn-open {
  opacity: 0;
  pointer-events: none;
}

.sec02 .fig-accordion-btn .btn-close {
  width: calc(134 * var(--formula));
  top: calc(1386 * var(--formula)); 
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}

/* ==========================================
   Bottom
   ========================================== */
.bottom {
  padding: calc(124 * var(--formula)) 0;
  text-align: center;
}
.fig-check-all {
  width: calc(580 * var(--formula));
  margin: 0 auto calc(100 * var(--formula));
}
.fig-staff {
  width: calc(600 * var(--formula));
  margin: 0 auto calc(56 * var(--formula));
}
.fig-copy-right {
  width: calc(690 * var(--formula));
  margin: 0 auto;
}

.efs-system-notification { display: none !important; }