@font-face {
   font-family: 'MPLUSRounded1c-Bold';
   src: url('../MPLUSRounded1c-Bold.ttf');
 }
 @font-face {
   font-family: 'MPLUSRounded1c-Black';
   src: url('../MPLUSRounded1c-Black.ttf');
 }
 @font-face {
   font-family: 'MPLUSRounded1c-ExtraBold';
   src: url('../MPLUSRounded1c-ExtraBold.ttf');
 }
 @font-face {
   font-family: 'MPLUSRounded1c-Light';
   src: url('../MPLUSRounded1c-Light.ttf');
 }
 @font-face {
   font-family: 'MPLUSRounded1c-Medium';
   src: url('../MPLUSRounded1c-Medium.ttf');
 }
 @font-face {
   font-family: 'MPLUSRounded1c-Regular';
   src: url('../MPLUSRounded1c-Regular.ttf');
 }
 @font-face {
   font-family: 'MPLUSRounded1c-Thin';
   src: url('../MPLUSRounded1c-Thin.ttf');
 }

 .f1 {
   font-family: 'MPLUSRounded1c-Bold', sans-serif;
 }
 .f2 {
   font-family: 'MPLUSRounded1c-Light', sans-serif;
 }
 .f3 {
   font-family: 'MPLUSRounded1c-Thin', sans-serif;
 }
 .f4 {
   font-family: 'MPLUSRounded1c-Black', sans-serif;
 }
 .f5 {
   font-family: 'MPLUSRounded1c-ExtraBold', sans-serif;
 }
 .f6 {
   font-family: 'MPLUSRounded1c-Medium', sans-serif;
 }
 .f7 {
   font-family: 'MPLUSRounded1c-Regular', sans-serif;
 }
 @media (max-width: 768px) {
     .hide-on-small-screen {
         display: none!important;
     }
 }

 .gallery {
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .image-container {
      position: relative;
      width: 90%;
      margin-bottom: 20px;
  }
  .large-image {
      width: 100%;
  }
  .favorite-button {
      position: absolute;
      top: -4px;
      right: 10px;
      width: 40px;
      height: 40px;
      border-radius: 50%;

      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;

  }
  .favorite-button img {
      width: 70%;
      height: 70%;
  }
  .thumbnail-container {
      display: flex;
      justify-content: center;
      margin-top: 5px;
  }
  .thumbnail {
      width: 30%;
      margin: 0 10px;
      cursor: pointer;
      object-fit: contain; /* 画像が潰れないようにする */
  }
  .favorite-button.on {
      /*background-color: #ff529687;*/
        background-color: white;
  }


 .swiper-container {
   width: 100%;
   height: 105px;
 }

   .swiper-slide {
     text-align: center;
     font-size: 18px;
     background: #fff;
     display: -webkit-box;
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     -webkit-justify-content: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     -webkit-align-items: center;
     align-items: center;
     transition: transform 0.3s, box-shadow 0.3s; /* ホバー効果のためのトランジションを追加 */
   }

 .swiper-pagination {
   position: relative; /* ドットの位置を調整 */
   bottom: 10px; /* スライドショーの真下に配置 */
   text-align: center;
   margin-top: 20px;
 }

 .swiper-slide:hover {
   transform: scale(1.05); /* ホバー時に拡大 */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* ホバー時にシャドウを追加 */
 }




 .line-share-button {
     position: absolute;
     top: -4px;
     right: 60px; /* この値を調整してボタンの位置を変更できます */
     width: 25px;
     height: 42px;
 }




 .content {
   position: relative;
   width: 200px;
   height: 100%;
 }

 .ranking {
   position: absolute;
   top: 0;
   left: 0;
   width: 50px; /* 必要に応じてサイズを調整 */
   height: 50px; /* 必要に応じてサイズを調整 */
 }

 .ranking img {
   width: 100%;
   height: 100%;
 }

 .wrap {
   overflow: hidden;
   display: flex;
   align-items: center;
   height: 340px;
 }

 .slideshow {
   display: flex;
   -webkit-animation: loop-slide 50s infinite linear 0s both;
   animation: loop-slide 50s infinite linear 0s both;
 }

 @-webkit-keyframes loop-slide {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(-100%);
   }
 }

 @keyframes loop-slide {
   from {
     transform: translateX(0);
   }
   to {
     transform: translateX(-100%);
   }
 }

 .slide-paused:hover .slideshow {
   -webkit-animation-play-state: paused;
   animation-play-state: paused;
 }

 .content-hover {
   transition: all 0.2s;
   margin-right: 20px;
 }

 .content-hover:hover {
   transform: translateY(-20px);
   border-radius: 0 10%;
   box-shadow: 0 3px 10px 0 #333;
   opacity: 0.8;
   cursor: pointer;
 }