@charset "utf-8";
@media (max-width: 767px) {
  .pc-layout {
    display: none;  /* スマホではPC用レイアウトを非表示 */
  }

  .swiper-container {
    width: 100%;
    height: auto;
    margin-bottom: 40px;
  }
  
  /* swiper-wrapperがフレックスボックスで並ぶように */
  .swiper-wrapper {
    display: flex;
  }
  
  /* swiper-slideが並ぶように */
  .swiper-slide {
    flex-shrink: 0; /* アイテムが縮小しないように */
    width: auto; /* 各スライドが自動で幅を決める */
  }
}

/* PC用のスタイル */
@media (min-width: 768px) {
  .mobile-slider {
    display: none;  /* PCではスライダーを非表示 */
  }
}
.swiper-button-prev,
.swiper-button-next {
  height: 50px;
  width: 50px;
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 50px;
  margin: auto;
  width: 50px;
}
/* 前への矢印カスタマイズ */
.swiper-button-prev::after {
  background-image: url(https://junpei-sugiyama.com/wp-content/uploads/2021/02/e0379d76f3f78d80011fc748c93b6cbe.png);

}
/* 次への矢印カスタマイズ */
.swiper-button-next::after {
  background-image: url(https://junpei-sugiyama.com/wp-content/uploads/2021/02/e1bdcdb129887882c13aaf571f555b16.png);
}
/* 画像サイズ調整 */
.swiper-slide img {
  height: auto;
  width: 100%;
}
.fv_bg {
        background: url("../img/fv_img/pc_fv_img.webp") center center no-repeat;
        background-size: cover; /* 画面全体に自然に収まる */
        position: relative;
        animation: fadeIn 0.7s forwards;
        opacity: 0;
      }
      .fv_bg h1 {
        max-width: 680px;
        width: 35.416%;
        position: absolute;
        top: 48%;
        left: 41%;
        transform: translate(-50%, -50%);
      }
      .fv_cta {
        background-color: #17186c;
      }
      .fv_inner {
        padding-top: 46%;
        max-width: 1320px;
      }
      /* .inner {
        position: relative;
        max-width: 1400px;
        width: 80%;

        margin: 0 auto;
      } */
      .fv_flex {
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding-bottom: 1.5rem;
      }
      .globe {
        max-width: 850px;
        width: 68%;
        margin-top: -7rem;
       }
       .globe-img{
        position: relative;
        z-index: 100;
       }
      .shadow img{
        mix-blend-mode: multiply;
        position: absolute;
        bottom: -7%;
        left: 36%;
        z-index: 99;
        width: 33%;
        max-width: 480px;
    }
      .cta {
        max-width: 460px;

        width: 32%;
        padding-top:1.4% ;
        z-index: 999;
      }
      @media screen and (max-width: 1280px) {
        .fv_inner {
          padding-top: 47%;
         width: 68.75%;
        }
        .globe {
          width: 68%;
          margin-top: -5rem;
         }
        .fv_flex {
          padding-top: 1rem;
      }
    }
      /*768px以下で文字色が青色に*/
      @media screen and (max-width: 768px) {
        .fv_bg h1 {
          width: 80%;
          position: absolute;
          top: 57%;
          transform: translateY(-50%);
          left: 5%;
        }
        .fv_bg {
          background-image: url(../img/fv_img/sp_fv_img.webp);
          /* height: 73.36vh; */
          padding-bottom: 83.6%;
          background-size: cover;
          background-position: top, right;
         }
        .fv_flex {
          margin: 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          align-content: center;
          flex-direction: column;

          /* padding-bottom: 5%; */
          width: 100%;
          padding: 0 1% 2% 3%;
        }
        .globe {
          width: 100%;
          margin-top: -8.2em;
        }
        .shadow img{
          mix-blend-mode: multiply;
          position: absolute;
          top: 31%;
          left: 49%;
          z-index: 99;
          width: 50%;
        }
        .cta {
         max-width: 100%;
         width: 100%;
         margin-top: -1.2%;
        }
      }
      @keyframes fadeIn {
        0% {
          opacity: .3;
        }
        100% {
          opacity: 1;
        }
      }
      .is-animated {
        opacity: 0;
        animation: fadeIn 1s ease-in forwards;
      }


  /*店舗FV  */
      .shop_name{
        position: relative; /* または absolute, fixed, sticky */
        z-index: 100; /* これで z-index が効くようになる */    
      }
      #top {
        position: relative; /* または absolute, fixed, sticky */
        z-index: 10; /* これで z-index が効くようになる */
      }
      #shop .shibuya_cta {
        background-color: #1230B2;
      }
      .shibuya_bc{
        background: #EBF4F7;
      }
      #shop .akasaka_cta {
        background-color: #C33D38;
      }
      .akasaka_bc{
        background: #FCF5F5;
      }
      #shop .ikebukuro_cta {
        background-color: #FFAF00;
      }
      .ikebukuro_bc{
        background: #FFFBF2;
      }
      #shop .nanba_cta {
        background-color: #FF0000;
      }
      .nanba_bc{
        background: #FFF2F2;
      }
      #shop .omiya_cta {
        background-color: #FF5200;
      }
      .omiya_bc{
        background: #FFF6F2;
      }
      #shop .shinbashi_cta {
        background-color: #18A2EE;
      }
      .shinbashi_bc{
        background: #F3FAFE;
      }
      #shop .shinjuku_cta {
        background-color: #009F76;
      }
      .shinjuku_bc{
        background: #F2FAF8;
      }
      #shop .ueno_cta {
        background-color: #FF607C;
      }
      .ueno_bc{
        background: #FFFAFB;
      }
      #shop .umeda_cta {
        background-color: #BB007F;
      }
      .umeda_bc{
        background: #FCF2F9;
      }

     #shop .inner {
          max-width: 100%;
          margin: 0 auto;
          padding: 70px 0 0;
      }
      #shop .shop_name{
        z-index: 1000;
      }
      #shop .inner .shop_name h1{
        max-width: 1400px;
        margin: 0 auto ;
        padding: 50px 15px 20px;
      }
          /* --- Responsive Design --- */
     @media (max-width: 768px) {
       #shop .inner {
         max-width: 100%;
         margin: 0 auto;
         padding: 45px 0 0;
        }
        #shop .inner .shop_name h1{
          max-width: 1400px;
          margin: 20px auto ;
          padding: 20px 15px 20px;
        }
      }
      @media (min-width: 960px) {
      .top-mv {
        padding-top: 50px;
        padding-bottom: 15px;
        z-index: 0;
      }
      .top-mv__image {
        padding-top: calc((168 / 800) * 100%);
        animation: mvBgScrollPC 80s linear infinite;
      }
      .shibuya_bc .top-mv__image {
        background-image: url('../img/fv_img/fv_shibuya.webp');
      }
      .akasaka_bc .top-mv__image {
        background-image: url('../img/fv_img/fv_akasaka.webp');
      }
      .ikebukuro_bc .top-mv__image {
        background-image: url('../img/fv_img/fv_ikebukuro.webp');
      }
      .nanba_bc .top-mv__image {
        background-image: url('../img/fv_img/fv_nanba.webp');
      }
      .omiya_bc .top-mv__image {
        background-image: url('../img/fv_img/fv_omiya.webp');
      }
      .shinjuku_bc .top-mv__image {
        background-image: url('../img/fv_img/fv_shinjuku.webp');
      }
      .shinbashi_bc .top-mv__image {
        background-image: url('../img/fv_img/fv_shinbashi.webp');
      }
      .ueno_bc .top-mv__image {
        background-image: url('../img/fv_img/fv_ueno.webp');
      }
      .umeda_bc .top-mv__image {
        background-image: url('../img/fv_img/fv_umeda.webp');
      }
    }

    @media (max-width: 959.98px) {
      .top-mv {
        padding-top: 0; 
        margin-top: -23%;
      }
      .top-mv__image {
        padding-top: calc((220 / 375) * 100%);
        animation: mvBgScrollSP 80s linear infinite;
      }
      .shibuya_bc .top-mv__image {
        background-image: url('../img/fv_img/sp_fv_shibuya.webp');
      }
      .akasaka_bc .top-mv__image {
        background-image: url('../img/fv_img/sp_fv_akasaka.webp');
      }
      .ikebukuro_bc .top-mv__image {
        background-image: url('../img/fv_img/sp_fv_ikebukuro.webp');
      }
      .nanba_bc .top-mv__image {
        background-image: url('../img/fv_img/sp_fv_nanba.webp');
      }
      .omiya_bc .top-mv__image {
        background-image: url('../img/fv_img/sp_fv_omiya.webp');
      }
      .shinjuku_bc .top-mv__image {
        background-image: url('../img/fv_img/sp_fv_shinjuku.webp');
      }
      .shinbashi_bc .top-mv__image {
        background-image: url('../img/fv_img/sp_fv_shinbashi.webp');
      }
      .ueno_bc .top-mv__image {
        background-image: url('../img/fv_img/sp_fv_ueno.webp');
      }
      .umeda_bc .top-mv__image {
        background-image: url('../img/fv_img/sp_fv_umeda.webp');
      }
    }

    /* --- Common Styles --- */
    .top-mv__inner {
      position: relative;
    }

    .top-mv__image {
      display: block;
      width: 100%;
      background-position: center;
      background-size: cover;
      will-change: background-position;
    }

    @keyframes mvBgScrollPC {
      0% { background-position: 0 0; }
      100% { background-position: -3202px 0; }
    }

    @keyframes mvBgScrollSP {
      0% { background-position: 0 0; }
      100% { background-position:  -1900px 0; }
    }

    .transparent-inner {
      border-style: solid;
      border-top-color: #f2f2f2;
      border-bottom-color: #f2f2f2;
    }

    @media (min-width: 960px) {
      .transparent-inner {
        margin-top: -5px;
        margin-bottom: -5px;
        border-width: 5px 0;
      }
    }

    @media (max-width: 959.98px) {
      .transparent-inner {
        margin-top: -10px;
        margin-bottom: -10px;
        border-width: 10px 0;
      }
    }

    .to-top-button--transparent {
      position: fixed;
      right: 10px;
      bottom: 10px;
      z-index: 7999;
      width: 50px;
      height: 50px;
      background-color: rgba(0, 0, 0, 0.5);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.5s;
    }

    .to-top-button__arrow {
      position: absolute;
      top: 0;
      right: 0;
      bottom: -5px;
      left: 0;
      margin: auto;
      display: block;
      width: 14px;
      height: 14px;
      border-top: 1px solid #fff;
      border-right: 1px solid #fff;
      transform: rotate(-45deg);
    }

/* コラム用 */
.external-posts{
	display:flex;
	gap: 2rem;
}

.external-posts a{
	font-weight:bold;	
	border-bottom: none;
}

.external-posts a:after{
	content:""! important;
}

.external-post-item img{
	padding-bottom: 2rem;
}

@media only screen and (max-width: 768px) {
      .external-posts{
		  display:flex;
		  gap: 2rem;
		  flex-direction: column;
		  }
}

/* バナー用 */
.banner .slick-slide{
    margin-top: 30px;
}

.banner .slick-slide img{
	padding-left:2rem;
	padding-right:2rem;
}
@media only screen and (max-width: 768px) {
.banner .slick-slide img{
	padding-left:1rem;
	padding-right:1rem;
}
}
@media only screen and (max-width: 768px) {
.banner-area{
  .inner{
    padding: 5px 15px;
  }
}

}


.banner .slick-slide a{
	border:none;
}

/* 営業時間・料金表用 */

#hours{
	    text-align: center;
}

#price{
	    text-align: center;
	margin-bottom: 30px;
}