/* TOP画像BOX */
.top-main-area{
  position: relative;
}
/* TOP画像BOX内の背景画像 */
.top-main-area-image{
  width:100%;
  height:100vh;
  object-fit: cover;
  margin-top:-15px;
  animation: fadein 4s forwards;
}
@keyframes fadein {
  0% {opacity: 0}
  40% {opacity: 0}
  100% {opacity: 1}
}
@media screen and (max-width:769px){
  .top-main-area-image{
    margin-top:-42px;
  }
}
@media screen and (max-height:999px){
  .top-main-area-image{
    height:1000px;
  }
}
/* TOP画像BOX内の背景画像の上にあるロゴ */
.top-main-image-logo{
  position:absolute;
  top:6%;
  left:50%;
  transform:translate(-50%);
  filter:drop-shadow(.3rem .3rem .5rem #e23);
  animation: fadein 1s forwards;
}
@media screen and (max-width:769px){
  .top-main-image-logo{
    width:70vw!important;
  }
}
/* TOPの星 */
.top-main-star{
  position:absolute;
  top:5px;
  right:-50px;
  animation: top-main-star-rotate 5s infinite; /* 回転アニメーションを追加 */
}
@media screen and (max-width:769px){
  .top-main-star{
    top:-5px;
    width:42px;
  }
}
@keyframes top-main-star-rotate {
    0% {
        transform: translateX(-50%) rotate(0deg); /* 初期位置 */
    }
    100% {
        transform: translateX(-50%) rotate(360deg); /* 360度回転 */
    }
}
/* 店長あいさつ------------------------ */
.welcome{
  position:absolute;top:13%;left:50%;transform:translate(-50%);
  width:500px;height:400px;
  filter:drop-shadow(.3rem .3rem .5rem #e23);
  animation: fadein 6s forwards;
}
@media screen and (max-width:769px){
  .welcome, .tencho-fade{width:80vw!important;}
}
.ttl-ribon{position:absolute;}
.welcome-ttl{ /* タイトル部分DIV */
  background-color:#027d0f;
  padding:8px 8px 0.5px 8px;
  border-radius:4px;
  margin-top:-70px;
}
.welcome-text{background-color:#fff7e6;margin:5px auto;padding:0.75rem;border-radius:4px;}
.welcome-comment-top{text-align:center;font-size:1.4rem;}
.welcome-comment{font-size:1rem;}
@media screen and (max-width:600px){
  .welcome-comment-top{font-size:1rem;margin-top:1.4rem}
  .welcome-comment{font-size:1.1rem;}
}

/* 店長浮遊 */
@keyframes FloatVertical {
            0% { transform:translate3d(0,10px,0); }
            50% { transform:translate3d(0,20px,0); }
            100% { transform:translate3d(0,10px,0); }
}
.tencho-fade{animation: FloatVertical 6.0s ease-in-out infinite alternate;}


.prd-lst-price{
  font-size:16px;
}

/* 出現effect */
.scroll_up {
  transition:0.8s esse-in-out;
  transform:translateY(30px);
  opacity:0;
}
.scroll_up.on{
  transform:translateY(0);
  opacity:1.0;
}


/* モーダル */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: rgb(100 100 100 / 50%);
  opacity: 0;
  transition: opacity 0.5s, scale 0s 0.5s;
  scale: 0;
}

.modal:target {
  opacity: 1;
  transition: opacity 0.5s;
  scale: 1;
}

.modal-wrapper {
  position: relative;
  width: 80%;
  max-width: 500px;
  max-height: 80%;
  padding: 20px;
  margin: auto;
  background-color: #ffa500;
  color:#fff;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.5s, transform 0.5s;
  transform: rotateY(180deg);
}

.modal:target .modal-wrapper {
  opacity: 1;
  transform: rotateY(0);
}

.modal-close {
  width:50px;
  height:50px;
  border-radius:50%;
  background-color:#00bfff;
  position:absolute;
  top:-20px;
  right:20px;
}
.modal-content p.comment{
  font-size:1rem;
  font-family: "Kaisei Opti", serif;
  font-weight: 700;
  font-style: normal;
}
/* drippi */
.drippi{
  width:100px;
  position:absolute;
  top:-74px;
  left:50%;
  transform:translate(-50%);
  display:none;
}
.drippi-switch{
  width:100px;
  position:absolute;
  top:-74px;
  left:50%;
  transform:translate(-50%);
  transform: scale(1.5);
  opacity:0;
}
#drippi-switch:checked + .drippi{
  display:block;
}

/*** 雪玉（共通） ***/
.snows div{
  position: fixed; /*画面固定*/
  top: -250px; /*初期位置*/
  left: 0;
  border-radius: 50%; /*丸型*/
  background: #fff; /*雪の色*/
  opacity: 0.9; /*若干透明に*/
}

/*** 小さい雪玉 ***/
.snows div:nth-child(1){
  width: 10px;
  height: 10px;
  filter: blur(2px); /*ぼかし*/
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    5vw -40px 0 #fff,
    10vw 150px #fff,
    15vw -230px #fff,
    22vw 240px #fff,
    30vw 120px #fff,
    35vw -180px #fff,
    44vw 240px #fff,
    50vw 0 #fff,
    60vw 180px #fff,
    68vw 40px #fff,
    74vw -130px #fff,
    81vw -240px #fff,
    88vw 100px #fff,
    95vw 60px #fff;
    animation: fall 12s linear infinite;/*落下*/
}

/*** 小さい雪玉2 ***/
.snows div:nth-child(2){
  width: 10px;
  height: 10px;
  filter: blur(2px); /*ぼかし*/
  /* ±240pxの範囲で影(複製)を作る */
  box-shadow:
    7vw 220px 0 #fff,
    35vw 20px #fff,
    68vw 100px #fff,
    93vw -190px #fff;
  animation: fall 12.5s linear infinite;/*落下*/
  animation-delay: 6s; /*開始遅延*/
}

/*** 中ぐらいの雪玉 ***/
.snows div:nth-child(3){
  width: 14px;
  height: 14px;
  filter: blur(3px); /*ぼかし*/
  /* ±233pxの範囲で影(複製)を作る */
  box-shadow:
    12vw 5px 0 #fff,
    32vw -100px #fff,
    45vw -180px #fff,
    68vw 40px #fff,
    77vw 65px #fff,
    94vw 230px #fff;
  animation: fall 10s linear infinite; /*落下*/
  animation-delay: 6s; /*開始遅延*/
}

/*** 大きめの雪玉 ***/
.snows div:nth-child(4){
  width: 20px;
  height: 20px;
  filter: blur(8px); /*ぼかし*/
  /* ±222pxの範囲で影(複製)を作る */
  box-shadow:
    40vw -200px #fff,
    80vw 220px #fff;
  animation: fall 7s linear infinite; /*落下*/
  animation-delay: 4s; /*遅延*/
}

/*** 落下アニメーション ***/
@keyframes fall{
  0%{
    top: -250px;
  }
  100% {
    top: calc(100% + 250px);
  }
}

/* 大きい画面では改行しない */
@media (min-width:769px){
  .line-break-large{
    display:none;
  }
}