h1{font-size:1.3rem;text-align:left;margin:0 auto 20px}@media screen and (max-width:780px){h1{text-align:center}}.choosing-watch{transition:0.2s}.choosing-watch:hover{opacity:.7}.button_top{font-size:1.2rem;padding:1rem;text-align:center;border-radius:10px;border:1px solid #666;background:#eee;color:#666;width:80%;margin:auto}.grid_wrap .col img{width:100%;aspect-ratio:16 / 9;object-fit:cover}*{min-height:0;min-width:0}.snow{color:snow;font-size:10px;position:fixed;top:-5%;text-shadow:5vw -100px 2px,10vw -400px 3px,20vw -500px 4px,30vw -580px 1px,39vw -250px 2px,42vw -340px 5px,56vw -150px 2px,63vw -180px 0,78vw -220px 4px,86vw -320px 9px,94vw -170px 7px;animation:roll 8s linear infinite}.snow2nd{animation:anim 12s linear infinite}@keyframes roll{0%{transform:rotate(0deg)}90%{opacity:1}100%{transform:rotate(20deg);top:100%;opacity:0}}@keyframes anim{100%{color:transparent;top:150%}}.harada_txt{font-size:1rem}@media screen and (max-width:780px){.harada_txt{padding:15px}}@media screen and (min-width:781px){.harada_txt{padding:15px 0}}.mainslide>li:not(:first-child){display:none}body{margin:0;overflow-x:hidden}.mainslide{max-width:1200px;margin:0 auto}.mainslide .slick-list{overflow:visible}.mainslide img{object-fit:cover;width:100%;}ul.seller_lists li a{display:block;width:100%}.slick-slider{margin-bottom:none}.slick-slide:not(.slick-center){-webkit-filter:opacity(70%);-moz-filter:opacity(70%);-o-filter:opacity(70%);-ms-filter:opacity(70%);filter:opacity(70%);transition:0.2s linear}@media screen and (max-width:768px){.slick-slide:not(.slick-center){-webkit-filter:none;-moz-filter:none;-o-filter:none;-ms-filter:none;filter:none;transition:0.2s linear}}.mainslide{display:none}.mainslide .slick-initialized{display:block}.topmain{width:980px;max-width:100%;margin:0 auto}.topback{margin:0;height:auto;max-height: 550px;}.top_banner2{display:flex;display:grid;grid-template-columns:1fr 1fr;gap:10px}@media screen and (max-width:780px){.top_banner2{padding:0 10px}}@media screen and (min-width:781px){.top_banner2{padding:0}}@media screen and (max-width:780px){.top_banner{padding:0 10px;height:auto;overflow:hidden;font-size:1em;flex-wrap:wrap}.top_banner div.banner_img{margin:10px 0;flex-basis:100%}.top_banner div.cen{margin-left:0;margin-right:0}.banner_img img,.banner_img_cen img{width:100%;height:100px;object-fit:cover}.top_banner p{font-size:.8rem}.top_img_box p{font-size:.9rem}}.banner_img{margin:0;padding-top:15px;background:linear-gradient(319deg,rgb(35 16 2 / 100%),rgb(0 0 0 / 100%));color:#fff;flex-basis:33%;border-radius:5px;box-shadow:0 3px 6px #ddd}.cen{margin:15px 15px 20px}.banner_img a,.banner_img_cen a{color:#fff}.banner_img p,.banner_img_cen p{color:#fff;margin:10px}.banner_img img,.banner_img_cen img{width:100%;height:180px;object-fit:cover}.top_img_box img.banner_img_solo{width:100%;height:150px;object-fit:cover;opacity:.5;display:block}.top_img_box{position:relative;text-align:center;padding:20px 0}.top_img_box p{font-size:1.1rem;font-weight:700;position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);-webkit-transform:translateY(-50%) translateX(-50%);margin:auto}.top_img_box a{color:#fff;transition:0.3s}.top_img_box a:hover{opacity:.8}.newicon{border:solid 1px #696969;border-radius:0 5px 5px 0;margin:0;position:absolute;width:3rem;left:0;top:150px}.hiticon{border:solid 1px #696969;background-color:#696969;border-radius:0 5px 5px 0;margin:0;position:absolute;width:3rem;left:0;top:150px}.limiticon{border:solid 1px #221002;background-color:#221002;border-radius:0 5px 5px 0;margin:0;position:absolute;width:3rem;left:0;top:150px}.newicon>p{margin:.5%;color:#696969;text-align:center}.hiticon>p{margin:.5%;color:#ffffff!important;text-align:center}.limiticon>p{margin:.5%;color:#ffffff!important;text-align:center}.banner_img{transition:0.2s}.banner_img:hover{opacity:.7}.top_banner_img{display: grid; grid-template-columns: 1fr 1fr; gap:1%; } @media screen and (max-width:780px){.top_banner_img{margin:0 5px;}}

/* 雪粒のアニメーション */
@keyframes snow-fall {
    0% {
        /* 初期位置：Y軸方向を0に設定 */
        transform: translateY(0); 
    }
    100% {
        /* 終了位置：ビューポートの高さ分だけ下に移動 (GPU処理で軽量) */
        transform: translateY(100vh);
    }
}

/* 真雪 */
/* @keyframes は変更なし */
@keyframes sway-and-fall {
    0% {
        transform: translateY(0) translateX(-30px);
    }
    50% {
        transform: translateY(50vh) translateX(20px);
    }
    100% {
        transform: translateY(105vh) translateX(-30px);
    }
}

/* --- コンテナ設定 --- */
.snow-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

/* --- 疑似要素の共通スタイル --- */
/* ::beforeと::afterで共通するプロパティをまとめる */
.snow-field::before,
.snow-field::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    /* colorではなく、background-colorで雪の色と透明度を指定 */
    color: rgba(255, 255, 255, 0.7);
    
    /* box-shadowは共通。ただし、個別に調整したい場合は分ける */
    box-shadow:
        10vw -10vh 2px 3px,
        25vw -30vh 3px 4px,
        40vw -5vh 2px 3px,
        5vw -45vh 2px 2px,
        60vw -20vh 4px 5px,
        75vw -50vh 2px 3px,
        90vw -15vh 3px 4px,
        15vw -60vh 2px 3px,
        50vw -70vh 4px 5px,
        85vw -25vh 2px 2px;

    /* animation は共通プロパティとしてここで指定 */
    animation: sway-and-fall 10s linear infinite;
}

/* --- 個別のスタイル (アニメーションの遅延時間のみ) --- */
.snow-field::after {
    /* ::afterのみアニメーション開始を遅延させる */
    animation-delay: 5s;
}

/* f3の上書き */
.p-swiper-container {
    margin: 20px 10px 2rem !important;
}

/* LINE誘導バナー 開始 */

.top-line-navigate-banner {
  display: block;
  max-width: 500px;
  margin: 50px auto;
  transition: 0.2s;
}

.top-line-navigate-banner:hover {
  opacity: 0.8;
}

/* LINE誘導バナー 終了 */