html, body { margin:0; padding:0; width:100%; overflow-x:hidden; }
*, *::before, *::after { box-sizing:border-box; }
body { scrollbar-gutter: stable; }
body {
    font-size:16px;
    z-index:0;
    line-height: 1.75em;
    background:#f5ecdb;
    overflow-x:hidden !important;
    width: 100vw; 
    margin: 0 !important;
    padding: 0 !important;
}
a {
	outline : none;
	text-decoration:none;
}
a.active, a:active, a:focus, a:hover {
	text-decoration:none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 200;
  margin:0;
  padding:0;
  }
p{
  margin:0;
  padding:0;
}
img{
    width:100%;
    height:auto;
}
*:focus {
  outline: none;
}
.wrapper{
    width: 100%;           /* 基本は親要素いっぱい */
    max-width: 400px;      /* 最大幅を400pxに制限（これで実質400px固定になります） */
    position: relative;
    /* 【重要】ecforceのスタイルを打ち消して強制的に中央揃えにする */
    padding:0 !important;
    margin: 0 auto !important; 
    /* はみ出し防止を強化 */
    overflow: hidden !important; 
    display: block !important;
    z-index: 99;
}
section {
    width:100%;
    padding:0 !important;
    display:block;
    margin:0 auto;
    position:relative;
    overflow-x:hidden !important;
}
.container-fluid{
    padding:0 !important;
    overflow-x:hidden !important;
}
.container{
    padding:0 !important;
    overflow-x:hidden !important;
}
.mx-auto{
    display:block !important;
    margin:0 auto !important;
}
.text-center{
    text-align:center;
}
.animation01{
    opacity:0;
}

@media screen and (max-width: 480px){
.wrapper{
    max-width: 100%;
}
}

/*--------------------------------------------------------------
PC表示（左右背景を上下左右いっぱいに表示）
--------------------------------------------------------------*/
.pc-left-area{
    position: fixed;
    top: 0;
    left: 0;
    width: calc(50% - 200px);
    height: 100vh;
    z-index: 0;              /* 背景として後ろへ */
    background: #fff;
    overflow: hidden;        /* はみ出しを隠す */
    pointer-events: none;    /* クリック阻害しない */
}

.pc-right-area{
    position: fixed;
    top: 0;
    right: 0;
    width: calc(50% - 200px);
    height: 100vh;
    z-index: 0;              /* 背景として後ろへ */
    background: #fff;
    overflow: hidden;
    pointer-events: none;
}

/* 中身は全面 */
.pc-inner{
    width: 100%;
    height: 100%;
    position: relative;
}

/* これまでの「中央寄せ」をやめて、全面配置にする */
.pc-inner-area{
    position: absolute;
    inset: 0;                /* top/right/bottom/left:0 */
    transform: none;         /* translateY を無効化 */
    margin: 0;
    width: 100%;
    height: 100%;
}

/* img を全面に敷き詰め（トリミングあり） */
.pc-left-area .pc-inner-area img,
.pc-right-area .pc-inner-area img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    object-fit: cover;       /* “いっぱいに表示”の要 */
    object-position: center;
}

/* メインコンテンツを前面に */
.wrapper{
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 480px){
    .pc-left-area{ display: none; }
    .pc-right-area{ display: none; }
    .wrapper{ width: 100%; }
}

/*--------------------------------------------------------------
KV
--------------------------------------------------------------*/
#vasilisa_01{
    position:relative;
    z-index:1;
}
.kv-area {
  position: relative;
  z-index:1;
}
.brand-logo{
  width:50%;
  position:absolute;
  top:4%;
  left:0;
  right:0;
  margin:auto;
  z-index:10;
}
.kv-text{
  width:85%;
  position:absolute;
  top:25%;
  left:0;
  right:0;
  margin:auto;
  z-index:3;
}
.kv-fixed-img{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 400px;
  height: auto;
  z-index: 11;
  pointer-events: none;
}
/* 固定が外れた時（JSで制御するため、CSSでの強制指定は最低限にする） */
.kv-fixed-img.kv-embedded {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* bottom: 0 は削除しました */
    /* top は JS で計算して style属性に入ります */
    
    opacity: 1 !important;
    z-index: 20; /* 背景より手前 */
}

/* 前に追加した「隙間埋めマージン」も不要なので削除してください */
/* .kv-scroll-content { margin-top: ... } ← これは削除 */

/* 代わりに、画像の下に隙間ができないようベースを整えます */
.kv-bg, .kv-fixed-img {
    vertical-align: bottom;
    display: block;
}
@media screen and (max-width: 480px){
.kv-fixed-img{
  max-width: 100%;
}
}

@media screen and (min-height: 1141px){
.height-01-disp{
  display:block;         
}
.height-02-disp{
  display:none;         
}
.height-03-disp{
  display:none;
}
}

@media screen and (min-height: 751px) and (max-height: 1140px){
.height-01-disp{
  display:none;
}
.height-02-disp{
  display:block;       
}
.height-03-disp{
  display:none;   
}
}

@media screen and (max-height: 750px){
.height-01-disp{
  display:none;
}
.height-02-disp{
  display:none;
}
.height-03-disp{
  display:block;
}
}

@media screen and (min-height: 801px) {
  .kv-normal {
    display: block !important;
  }
  .kv-middle {
    display: none !important;
  }
  .kv-short {
    display: none !important;
  }
}

@media screen and (min-height: 601px) and (max-height: 800px) {
  .kv-normal {
    display: none !important;
  }
  .kv-middle {
    display: block !important;
  }
  .kv-short {
    display: none !important;
  }
}
@media screen and (max-height: 600px) {
  .kv-normal {
    display: none !important;
  }
  .kv-middle {
    display: none !important;
  }
  .kv-short {
    display: block !important;
  }
}

.arrow-area{
  position:absolute;
  bottom:10px;
  display:block;
  text-align:center;
  width:100%;
  z-index:99;
}
.arrow-area img{
  width:22px;
  height:auto;
  margin:0 1px;
}
.arrow-area .lineup-arrow-02{
  width:20px;
  height:auto;
  margin:0 1px;
}
.arrow-area img.active{
  width:27px;
  height:auto;
}
.arrow-area .lineup-arrow-02.active{
  width:25px;
  height:auto;
}
.lineup-arrow {
  transition: transform 0.3s ease-out;
  transform: rotate(0deg);
}

/* --- KVエリアのオーバーレイ構造用CSS --- */

/* KVエリア全体 */
.kv-area {
    position: relative;
    width: 100%;
}

/* 1. 背景画像ラッパー（kv_01） */
.kv-bg-wrap {
    width: 100%;
    position: relative;
    z-index: 0;
}

.kv-bg {
    width: 100%;
    display: block;
    backface-visibility: hidden;
}

/* 2. 下から被さってくるコンテンツ（kv_02） */
/* クラス名を kv-scroll-content に合わせました */
.kv-scroll-content {
    position: relative;
    z-index: 10;
    width: 100%;
}

.kv-02 {
    width: 100%;
}

/* 3. 次のセクション */
#vasilisa_02 {
    position: relative;
    z-index: 15;
}

/* 固定フッター画像 */
.kv-fixed-img {
    z-index: 20;
}
.arrow-area {
    z-index: 20;
}

.kv-bg-wrap.is-fixed{
  position: fixed;
  margin: 0 !important;
  transform: none !important;
  max-width: none !important;
  z-index: 2;
  max-width: 100%;
}
/* 固定中は「画像側」をずらして、固定直前の見え方を再現 */
.kv-bg-wrap.is-fixed .kv-bg{
  transform: translate3d(0, var(--kvPinOffset, 0px), 0);
  will-change: transform;
}

/*--------------------------------------------------------------
LINEUP
--------------------------------------------------------------*/
#vasilisa_02 {
    position: relative;
    z-index: 1;
    background: #E8D0D0;
}
#vasilisa_02 .container-fluid {
    position: relative;
}

/* --- 【変更】スライダー化に伴いFlexとスクロール設定を解除 --- */
.lineup-area {
    display: block;        /* FlexからBlockへ変更 */
    overflow: visible;     /* overflow-x: auto を解除 */
    scroll-snap-type: none; /* スナップ解除 */
    position: relative;
    opacity: 0;            /* JS読み込み前のガタつき防止 */
    transition: opacity 0.5s;
    cursor: default;       /* エリア自体のカーソルはデフォルトに */
}

/* Slick初期化後にふわっと表示させる */
.lineup-area.slick-initialized {
    opacity: 1;
}

/* --- 【変更】各カード設定 --- */
.lineup-item {
    width: 100%;           /* 幅は100% */
    outline: none;         /* フォーカス枠線を消す */
    box-sizing: border-box;
    /* flex, scroll-snap 設定は削除 */
}

/* 任意：スクロールバー設定（Slickでは不要ですが残しても影響なし） */
.lineup-area::-webkit-scrollbar {
    height: 8px;
}
.lineup-area img, .lineup-area a {
    -webkit-user-drag: none;
    user-drag: none;
}

.lineup-img {
    width: 90%;
    display: block;
    margin: 0 auto 8%;
}

/* 親要素 */
.btn-wrap01 {
    width: 17%;
    display: block;
    margin: 0% auto 7%;
    position: relative;
    overflow: visible;
    -webkit-tap-highlight-color: transparent;
}

/* 背景（疑似要素） */
.btn-wrap01::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 400%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* 【修正】元の絶対パスに戻しました */
    background-image: url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/vasilisa_2026/img/mist/btn_purchase_bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    z-index: 1; /* 背景は「1」 */
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

/* 画像本体のクラス名をHTMLに合わせて変更 */
.lineup-btn-buy {
    width: 100%;
    display: block;
    border-radius: 30px;
    position: relative; /* z-indexを効かせるために必須 */
    z-index: 2;         /* 背景(1)より大きい数字にして手前に出す */
}

/* アクティブ時の表示 */
.btn-wrap01:hover::after {
    opacity: 1;
}

/* --- アニメーション定義（復活） --- */

/* 1. 左から右へ現れるアニメーション */
@keyframes wipeIn {
    0% { clip-path: inset(0 100% 0 0); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* 2. 点滅するアニメーション */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* --- 一連の動作をまとめたアニメーション定義 --- */
@keyframes wipeAndFadeLoop {
    /* 0%〜30%: 左から右へワイプ表示 */
    0% { clip-path: inset(0 100% 0 0); opacity: 0; }
    30% { clip-path: inset(0 0 0 0); opacity: 1; }
    /* 30%〜80%: 表示したままキープ */
    80% { clip-path: inset(0 0 0 0); opacity: 1; }
    /* 80%〜100%: フェードアウトして消える */
    100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

/* --- 対象要素への適用 --- */
.lineup-icon-scroll {
    /* 位置やサイズの設定 */
    width: 13.5%;
    position: absolute;
    top: 64.0%;
    left: 80%;
    z-index: 20;

    /* --- 【重要修正】アニメーションさせつつ、ボタンとして機能させる --- */
    pointer-events: auto; /* none から auto に変更（クリック可能にする） */
    cursor: pointer;      /* 指カーソルを表示 */

    /* アニメーション設定（復活） */
    animation: wipeAndFadeLoop 2.5s ease-in-out infinite;
    
    /* アニメーション開始前は非表示 */
    opacity: 0;
}

/* スライダーが最後の1枚に来た時にボタンを半透明にする場合（infinite: falseの時のみ有効） */
.slick-disabled {
    opacity: 0.5 !important;
    cursor: default;
    pointer-events: none;
}

.lineup-item-01 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    background-image: url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/vasilisa_2026/img/mist/lineup_bg_nudeone.png);
}
.lineup-name-01 {
    width: 40%;
    display: block;
    margin: 5% auto 5%;
}
.lineup-text-01 {
    width: 40.5%;
    display: block;
    margin: 0 auto 7%;
}
.lineup-chart-01 {
    width: 94%;
    position: relative;
    left: 1%;
    margin: 0 0 10%;
}

.lineup-item-02 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    background-image: url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/vasilisa_2026/img/mist/lineup_bg_silkyflora.png);
}
.lineup-name-02 {
    width: 48%;
    display: block;
    margin: 5% auto 5%;
}
.lineup-text-02 {
    width: 46.5%;
    display: block;
    margin: 0 auto 7%;
}
.lineup-chart-02 {
    width: 94%;
    position: relative;
    left: 1%;
    margin: 0 0 10%;
}

.lineup-item-03 {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    background-image: url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/vasilisa_2026/img/mist/lineup_bg_gracerouge.png);
}
.lineup-name-03 {
    width: 55%;
    display: block;
    margin: 5% auto 5%;
}
.lineup-text-03 {
    width: 54.5%;
    display: block;
    margin: 0 auto 7%;
}
.lineup-chart-03 {
    width: 90%;
    position: relative;
    left: 4%;
    margin: 0 0 10%;
}
/*--------------------------------------------------------------
CONCEPT
--------------------------------------------------------------*/
.concept-area{
    padding:30% 0;
    background-repeat:no-repeat;
    background-position:center center;
    background-size: 130% auto;
    background-image:url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/vasilisa_2026/img/mist/concept_bg.png);
}
.concept-text{
    width:90%;
    display:block;
    margin:0 auto;
}

/*--------------------------------------------------------------
POINT
--------------------------------------------------------------*/
.point-num{
    width:14%;
    display:block;
    margin:10% auto;
}
.point-img{
    width:90%;
    display:block;
    margin:0 auto 9%;
}
.point-item-01{
    padding:20% 0;
    background-repeat:no-repeat;
    background-position:center top;
    background-size: 140% auto;
    background-image:url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/vasilisa_2026/img/mist/point_bg_01.png);
}
.point-text-01{
    width:79.5%;
    display:block;
    margin:10% auto 9%;
}
.point-desc-01{
    width:60.5%;
    display:block;
    margin:0 auto 5%;
}

.point-item-02{
    padding:20% 0 30%;
    background-repeat:no-repeat;
    background-position:center top;
    background-size: 120% auto;
    background-image:url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/vasilisa_2026/img/mist/point_bg_02.png);
}
.point-text-02{
    width:69.5%;
    display:block;
    margin:10% auto 9%;
}
.point-desc-02{
    width:64.5%;
    display:block;
    margin:0 auto 5%;
}
.point-element-02{
    width:90.5%;
    display:block;
    margin:0 auto 4%;
}
.point-add-02{
    width:69%;
    display:block;
    margin:0 auto 5%;
}

.point-item-03{
    padding:20% 0;
    background-repeat:no-repeat;
    background-position:center top;
    background-size: 98% auto;
    background-image:url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/vasilisa_2026/img/mist/point_bg_03.png);
}
.point-text-03{
    width:64.1%;
    display:block;
    margin:10% auto 9%;
}
.point-desc-03{
    width:57.0%;
    display:block;
    margin:5% auto;
}


/*--------------------------------------------------------------
スライダー
--------------------------------------------------------------*/
.slider-area{
    position:relative;
}
.slider-text-01{
    width:52%;
    position:absolute;
    top:5.5%;
    left:20.3%;
}
.slider-text-02{
    width:41.8%;
    position:absolute;
    bottom:10%;
    right:13.9%;
}


/* 親要素（リンクタグ） */
.btn-wrap02 {
    width: 56%;
    display: block;
    margin: 5% auto 20%;
    position: relative;
    
    /* 【重要】ここが hidden だとはみ出した部分が切れてしまいます。visible（初期値）にします */
    overflow: visible; 
    
    -webkit-tap-highlight-color: transparent;
}

/* 疑似要素（背景用レイヤー） */
.btn-wrap02::after {
    content: "";
    position: absolute;
    
    /* ボタンより一回り大きく設定（1.2倍〜1.5倍くらいが自然です） */
    width: 180%;
    height: 450%; /* 縦長の画像なので、高さも少し大きめに確保 */
    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background-image:url(https://d2w53g1q050m78.cloudfront.net/storefitsjapanco/uploads/item/vasilisa_2026/img/mist/btn_purchase_bg.png);
    
    /* 【重要】ここを変更！ 画像を要素サイズいっぱいに引き伸ばします */
    background-size: 100% 100%; 
    
    background-repeat: no-repeat;
    background-position: center;
    
    opacity: 0;
    z-index: 1; /* ボタンの後ろ */
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
}

/* ボタン画像本体 */
.btn-purchase {
    width: 100%;
    display: block;
    border-radius: 30px;
    position: relative;
    z-index: 2; /* 背景より手前 */
    display:block;
}

/* アクティブ時の表示 */
.btn-wrap02:hover::after {
    opacity: 1;
}