@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;
/* 	tsuika */
	  animation: fadeIn 0.7s forwards;
  transition: background-image 1s ease; /* フェード風に切替 */
      }
      .fv_bg h1 {
        max-width: 680px;
        width: 45.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: 100%;
          position: absolute;
          top: 57%;
          transform: translateY(-50%);
          left: 0%;
        }
        .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: -7.5em;
        }
        .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;
	}

/* 追従ボタン */

  .cta-follow {
	      max-width: 260px;
    position: fixed;
    bottom: 20px;
/*     left: 50%;
    transform: translateX(-50%); */
	      right: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    z-index: 9999;
	      width: 30%;
  }
@media only screen and (max-width: 768px) {
	.cta-follow {
	width: 70%;
	left: 50%;
    transform: translateX(-50%); 
	}
}

.cta-follow a{
	border-bottom:none;
}

  .cta-follow.active {
    opacity: 1;
    visibility: visible;
  }
  :root {
      --wcs-bg: #ffffff;
      --wcs-card: #ffffff;
      --wcs-ink: #1b2430;          /* Base text */
      --wcs-muted: #647089;        /* Secondary text */
      --wcs-brand: #05148C;        /* Brand navy */
      --wcs-border: #e8ecf5;       /* Subtle card border */
      --wcs-radius: 16px;
      --wcs-shadow: 0 8px 20px rgba(5,20,140,.06);
    }
    * { box-sizing: border-box; }
    body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "LINE Seed JP", "Noto Sans", "Helvetica Neue", Arial, sans-serif; color: var(--wcs-ink); background: var(--wcs-bg); line-height:1.6; }

    /* container */
    .wcs-section {padding-bottom: 50px;}
    .wcs-container { max-width: 1100px; margin: 0 auto; }

    /* header */
    .wcs-header { text-align:center; margin-bottom: 24px; }
    .wcs-eyebrow { display:inline-block; letter-spacing:.08em; font-size:.78rem; color: var(--wcs-brand); text-transform: uppercase; font-weight: 700; }
    .wcs-title { margin:.35rem 0 0; font-weight: 800; line-height:1.15; font-size: clamp(1.5rem, 2.2vw, 2.1rem); color: var(--wcs-brand); }
    .wcs-sub { margin:.4rem auto 0; color: var(--wcs-muted); max-width: 720px; font-size: .95rem; }

    /* grid */
    .wcs-grid { display:grid; gap:14px; grid-template-columns: 1fr; padding: 0 18px;}
    @media (min-width:640px){ .wcs-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width:960px){ .wcs-grid { grid-template-columns: repeat(3, 1fr); } }

    .wcs-card { background: var(--wcs-card); border: 1px solid var(--wcs-border); border-radius: var(--wcs-radius); padding: 38px; box-shadow: var(--wcs-shadow); position:relative; overflow:hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; height: 100%; }
    .wcs-card:hover { transform: translateY(-3px); border-color: rgba(5,20,140,.25); box-shadow: 0 10px 26px rgba(5,20,140,.12); }

    .wcs-icon { width: 26px; height: 26px; margin-bottom: 10px; color: var(--wcs-brand); flex: none; }
    .wcs-card h3 { margin: 0 0 6px; font-size: 2rem; letter-spacing:.01em; color: #006fbf; }
    .wcs-card p { margin: 0; color: var(--wcs-muted); font-size: 1.5rem; padding: 18px 0;}

    /* perks */
    .wcs-perks { display:flex; flex-wrap: wrap; gap:10px; margin: 20px 0 6px; }
    .wcs-perk { display:inline-flex; align-items:center; gap:.5ch; border-radius: 999px; padding: 8px 12px; font-size: .9rem; color:#1b2430; background:#f4f7ff; border: 1px solid #dfe6ff; }
    .wcs-perk svg { width:16px; height:16px; color: var(--wcs-brand); }

    /* cta */
    .wcs-cta { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top: 18px; }
    .wcs-btn { display:inline-flex; align-items:center; gap:.6ch; padding: 12px 16px; border-radius: 12px; text-decoration:none; font-weight: 700; letter-spacing:.01em; border: 1px solid transparent; }
    .wcs-btn svg { width:18px; height:18px; }
    .wcs-btn.primary { background: var(--wcs-brand); color:#fff; border-color:#04106f; box-shadow: 0 8px 16px rgba(5,20,140,.25); }
    .wcs-btn.primary:hover { filter: brightness(1.05); }
    .wcs-btn.wa { background:#25D366; color:#fff; border-color:#1eaa52; box-shadow: 0 8px 16px rgba(37,211,102,.25); }

    /* link-like under title */
    .wcs-links { text-align:center; margin-top: 6px; }
    .wcs-links a { color: var(--wcs-brand); text-decoration: none; font-weight:600; }
    .wcs-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

    /* focus-visible */
    .wcs-card:focus-within, .wcs-btn:focus-visible, .wcs-perk:focus-visible { outline: 3px solid rgba(5,20,140,.28); outline-offset: 2px; }



 /* =========================
   HEROテキスト（Anton）
   ========================= */

/* H1 の位置＆フォント（PCベース） */
.fv_bg h1 {
  max-width: 680px;
  width: 45.416%;
  position: absolute;
  top: 55%;
  left: 41%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-family: 'Anton', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #001342;
}

/* ラッパー */
.fv-hero {
  text-align: left;
}

/* ───────── 1行目：青帯（100%）───────── */
.fv-hero-ribbon {
  display: block;
  width: 100%;                        /* ★ 100% */
  box-sizing: border-box;
  background-color: #052f85;
  color: #ffffff;
  padding: 0.18em 0.45em;
  font-size: clamp(14px, 2.45vw, 39.5px);
  line-height: 1.25;
  letter-spacing: 0.03em;
  margin-bottom: 0.25em;
}

/* ───────── 2・3行目：メインコピー ───────── */
.fv-hero-main {
  margin-top: 0.4em;                  /* 青帯との距離（白） */
  font-size: clamp(34px, 3.7vw, 57px);
  line-height: 1.03;
  font-weight: 400;
  color: #000b3d;
}

/* 2行とも縦並び */
.fv-hero-main > span {
  display: block;
}

/* 2行目：白帯100% ＋ 下に空白 */
.fv-hero-main > span:first-child {
  width: 100%;                        /* ★ 100% */
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 0.12em 0.24em 0.18em;      /* 上・左右・下 */
  margin-bottom: 0.26em;              /* ★ 下にしっかり空白 */
}

/* 3行目：白帯は100%にしない（テキスト幅だけ） */
.fv-hero-main > span:last-child {
  display: inline-block;              /* ★ ここだけ 100%にしない */
  background-color: #ffffff;
  padding: 0.12em 0.24em 0.12em;
}

/* ───────── 4行目：住所（白帯100%）───────── */
.fv-hero-sub {
  margin-top: 0.4em;
  display: block;
  width: 100%;                        /* ★ 100% */
  box-sizing: border-box;
  background-color: #ffffff;
  padding: 0.15em 0.4em;
  font-size: clamp(16px, 1.7vw, 28px);
  line-height: 1.2;
  color: #000b3d;
}

/* =========================
   タブレット（768〜959.98px）
   ========================= */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .fv_bg h1 {
    max-width: 600px;
    width: 52%;
    top: 58%;
    left: 35%;
    transform: translate(-50%, -50%);
  }

  .fv-hero-ribbon {
    font-size: clamp(14px, 3vw, 20.5px);
  }

  .fv-hero-main {
    font-size: clamp(28px, 3.7vw, 40px);
  }

  .fv-hero-sub {
    font-size: clamp(14.5px, 1.8vw, 18px);
  }
}

/* =========================
   スマホ（〜767.98px）
   ========================= */
@media screen and (max-width: 767.98px) {
  .fv_bg h1 {
    width: 100%;
    position: absolute;
    top: 60%;
    left: 0;
    transform: translateY(-50%);
    padding: 0 3.73%;
  }

  .fv-hero-ribbon {
    font-size: clamp(11px, 5.2vw, 24px);
    padding: 0.16em 0.35em;
  }

  .fv-hero-main {
    font-size: clamp(20px, 7.7vw, 33.5px);
  }

  .fv-hero-sub {
  font-size: clamp(11px, 3.6vw, 27px);
  }
}

.fv-hero-ribbon,
.fv-hero-main > span:first-child,
.fv-hero-main > span:last-child,
.fv-hero-sub {
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.28);
}