@charset "utf-8";

* {
  box-sizing: border-box;
}

html, body{
    box-sizing: border-box;
    background-color: #187fc4;
}

.page-wrapper{
     overflow: hidden; /* ここで制御する */
    width: 100%;
}

img{
    display: block;
    width: 100%;
}

h2{
    margin: 0;
}

.wrapper{
    max-width: 1200px;
    margin: 0 auto;
    
}

.pc{
    display: block;
}

.sp{
    display: none;
}

/*ナビゲーション*/



/*キービジュアル*/
.kv{
    width: 100%;
    position: relative;
    z-index: 2
}

.kv-img{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.kv-filter{
     filter: drop-shadow(0 0 15px rgba(255, 255, 255, 2.5));
}

.kv-bg{
    width: 61%;
    position: absolute;
    top: -10%;
    left: 50%;
    translate: -50% 0;
    z-index: 1;
}

.kv-obj01,
.kv-obj02{
    position: absolute;
    z-index: 4;
}

.kv-obj01{
    width: 30%;
    top: 35%;
    right: 16%;
}
.kv-obj02{
    width: 15.8%;
    top: 17%;
    left: 34%;
}


/*キービジュアルアニメーション*/


.kv-pos02{
    transition: all ease .8s;
}
.kv-pos03{
    transition: all ease .8s .7s;
    
}
.kv-pos04{
    transition: all ease .8s 1.2s;
    
}

.kv-anime{
    opacity: 0;
    transform: translateY(20px);
}
.kv-active {
    opacity: 1;
    transform: translateY(0);
}



/*背景白玉アニメーション*/
.bg-ball01{
    width: 10%
}

.floating-sphere {
  position: fixed;
  top: 0;
  left: 0;
  width: 12vw;
  max-width: 250px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  transition-property: top, left, transform;
  /* サイン波のような、よりオーガニックな動きの設定 */
  transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  filter: blur(2px);
  will-change: top, left, transform;
}


.pala-sphere{
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.pala-sphere__pos{
    position: relative;
    width: 100%;
    height: 100%;
}

/*全面白玉配置*/
.para-fixed{
    width: 100%;
    height: 5000px;
    position: fixed;
    top: 40%;
    left: 0;
    background-image: url("../images/parabg.webp");
    background-repeat: repeat;
    background-size: contain;
      will-change: transform; /* ブラウザの描画を最適化 */
      pointer-events: none;
}

/*地球儀アニメーション*/
.rolling{
    animation: rolling 60s linear infinite;
}

@keyframes rolling{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

/*ナビゲーション*/

.nav {
    background-color: #187fc4;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100; /* KVや他のコンテンツより上に来るように数値を調整 */
    width: 100%;
    
    /* 追加：初期状態は上に隠して透明にする */
    transform: translateY(-100%); 
    opacity: 0;
    transition: all 0.4s ease; /* アニメーションの速度 */
}

/* 追加：このクラスがついたら表示される */
.nav.nav-active {
    transform: translateY(0);
    opacity: 1;
}

.sp-nav{
    display: none;
}
.hamburuger-btn{
    display: none;    
}

/*メインロゴ*/
#main-logo{
    position: relative;
    z-index: 2;
}
.logo-pos01{
    width: 14.4%;
    position: absolute;
    top: 40%;
    left: 50.4%;
    translate: -50% 0;
}
.logo-pos02{
    width: 74.5%;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%) scale(0.5);
    opacity: 0;
    transition: all ease .8s;
}

.main-contents,
.end-contents{
    position: relative;
    z-index: 2;
}

.topics-01{
    background-image: url("../images/topic1-bg@2x.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
}
/*ハート赤*/
.topics-obj01{
    width: 38.4%;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
}

/*リンクホバーアニメ*/
.hover-link{
    display: inline-block;
    line-height: 0;
    /* 1.2秒で1サイクル。少し速めることで「動いている感」を強調 */
    animation: urgentBounce 1.2s ease-in-out infinite;
    transform-origin: center center;
    transition: filter 0.3s ease;
}

.hover-link:hover{
  filter: brightness(1.1);
}

@keyframes urgentBounce {
    0% {
        transform: scale(1);
    }
    15% {
        /* 一瞬グッと溜める（少し縮む） */
        transform: scale(0.92);
    }
    30% {
        /* 勢いよく膨らむ（1.1倍近くまで） */
        transform: scale(1.08);
    }
    45% {
        /* 少し戻る */
        transform: scale(0.96);
    }
    60% {
        /* 最後にもう一度軽く膨らんで余韻を残す */
        transform: scale(1.02);
    }
    80%, 100% {
        /* 静止時間（これがないとずっと動きすぎて目が疲れるため） */
        transform: scale(1);
    }
}

.topics-02{
    position: relative;
    z-index: 2;
}
/*ハート緑*/
.topics-obj02{
    width: 38.4%;
    position: absolute;
    top: 9%;
    left: 50%;
   translate: -50% 0;
}
/*スライダー*/
.splide{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 59%;
}
.splide__track{
    border-radius: 20px;
}
.splide__pagination__page {
    background: #c9caca;
}
.splide__pagination__page.is-active {
    background: #727171;
}
.splide__pagination {
    bottom: -14%;
    margin: 5%;
}
.splide__pagination li{
    margin: 0 2%;
}

.topics-03{
    background-image: url("../images/topic3-bg@2x.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
}
/*ハートオレンジ*/
.topics-obj03{
    width: 38.4%;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
}
.topics-nav{
    position: absolute;
    top: 19.5%;
    display: flex;
    width: 50%;
    left: 50%;
    /* margin: 0 auto; */
    transform: translateX(-50%);
    justify-content: space-between;
}
.topics-nav a{
    width: 31.6%;
}


/*子ページ*/

.shop-title,
.shop-section{
    position: relative;
    z-index: 2;
}

/*各種オブジェクト配置*/
.obj-pos{
    position: absolute;
}

.obj01{
    width: 23.9%;
    top: 39%;
    right: 20%;
}
.obj02{
    width: 19.5%;
    bottom: 0;
    left: 17%;
}
.obj03{
    width: 25%;
    top: 6.7%;
    right: 17%;
}
.obj04{
    width: 21.5%;
    top: 21%;
    right: 17%;
}
.obj05{
    width: 16%;
    top: 7%;
    right: 21%;
}
.obj06{
    width: 27.3%;
    bottom: 5%;
    left: -3%;
}
.obj07{
    width: 17.75%;
    top: 7%;
    right: 20%;
}
.obj08{
    width: 16%;
    top: 26%;
    left: 13%;
}
.obj09{
    width: 14%;
    top: 65.5%;
    right: 16%;
    z-index: 3;
}
.obj10{
    width: 49.75%;
    bottom: -4.3%;
    left: 0;
}
.obj11{
    width: 24%;
    top: 36%;
    right: 1%;
    z-index: 3;
}
/*ここから下層ページ*/
.obj12{
    width: 18%;
    top: 32%;
    right: 12%;
    z-index: 3;
}
.obj13{
    width: 19.75%;
    top: 0.5%;
    right: 13%;
}
.obj14{
    width: 26%;
    top: -2.5%;
    left: 8%;
}
.obj15{
    width: 19.75%;
    top: -2.5%;
    right: 13%;
}
.obj16{
    width: 23.5%;
    top: -9%;
    right: 14%;
}


footer{
    background-color: #fff;
    position: relative;
    z-index: 2;
}

/*トップに戻るボタン*/
.top-btn {
    width: 20%;
    max-width: 90px;
    min-width: 60px;
    display: block;
    position: fixed;
    bottom: 5%;
    right: 6%;
    z-index: 10;
    /* --- 追加 --- */
    opacity: 0;
    pointer-events: none; /* 非表示の時はクリック不可 */
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* 表示された時のクラス */
.top-btn.is-show {
    opacity: 1;
    pointer-events: auto;
}



/*アニメーション*/

/*ふわふわ*/
.float{
    animation: floatAnime 1.5s ease-in-out infinite  alternate;
}
.float-rev{
    animation: floatAnimeReverse 1.5s ease-in-out infinite  alternate;
}


@keyframes floatAnime{
    0%{
        transform: translateY(-12px);
    }
    100%{
        transform: translateY(12px);
    }
}

@keyframes floatAnimeReverse{
    0%{
    transform: translateY(12px);
    }
    100%{
        transform: translateY(-12px);
    }
}


/*ボワっと*/
.scale-active{
    transform: translate(-50% , 0) scale(1);
    opacity: 1;
}
.scale-active02{
    transform: scale(1);
    opacity: 1;
}

/*ふわっと*/
.fade-active{
    opacity: 1;
}


/*ボヨン*/
.bound-active{
    animation: bound 1.5s ease .8s ;
    transform-origin: center bottom;
}
.bound-active01 {
   animation: bound 0.8s ease-in-out forwards;
    transform-origin: center bottom;
}
@keyframes bound {
     0% {
        transform: scale(1);
    }
    15% {
        /* グッと溜める（少し潰れる） */
        transform: scale(1.12, 0.88);
    }
    35% {
        /* ポヨンと伸びる（戻る勢いで少し縦長に） */
        transform: scale(0.95, 1.05);
    }
    55% {
        /* 小さく揺り戻し */
        transform: scale(1.03, 0.97);
    }
    75% {
        /* ほぼ静止 */
        transform: scale(0.99, 1.01);
    }
    100% {
        /* 元のサイズ */
        transform: scale(1);
    }
}



.fade-up{
    transform: translateY(50px);
    opacity: 0;
    transition: all ease .8s;
    position: relative;
    z-index: 3;
}

.fade-up-active{
    transform: translateY(0);
    opacity: 1;
}


.fade-in{
    transition: all ease .8s;
    opacity: 0;
}

.fade-in-active{
    opacity: 1;
}