@charset "utf-8";

/* ==================================================
  Common CSS (SP) - PC反映 完全版
  - 文字トークン: XL/L/M/S をPC思想で統一
  - SP全体スケールは --sp-scale だけで調整
  - 英字はPCと同じ Cormorant Garamond / text-transform:none に統一
  - MVは ::beforeズーム + ::after暗転 + SPタイトルSVG
================================================== */
@media (max-width:999px){

	  html, body{
    margin:0;
    padding:0;
    overflow-x:hidden;
  }
	
  /* =====================================
    Font Tokens (SP)
    ※ここだけ触れば全体の文字サイズ感が変わる
  ===================================== */
  :root{
    /* 0.90 = 90% / 0.88 推奨 / 0.85 = 85% */
    --sp-scale: 0.85;

    /* ベース（SPの素の値） */
    --fs-xl-base: 1.5rem;
    --fs-l-base : 1.2rem;
    --fs-m-base : 0.95rem;
    --fs-s-base : 0.85rem;

    /* スケール適用後 */
    --fs-xl: calc(var(--fs-xl-base) * var(--sp-scale));
    --fs-l : calc(var(--fs-l-base)  * var(--sp-scale));
    --fs-m : calc(var(--fs-m-base)  * var(--sp-scale));
    --fs-s : calc(var(--fs-s-base)  * var(--sp-scale));

    --lh-tight: 1.22;
    --lh-base : 1.60;
    --lh-wide : 1.78;
  }

  /* =====================================
    Typography (SP)
  ===================================== */
  body{
    font-size: var(--fs-m);
    line-height: var(--lh-base);
  }

  body,div,p,a,article,section,nav,ul,li,header,footer,input,select,textarea,th,td{
    font-family: 'Shippori Mincho', "Hiragino Mincho ProN", 游明朝, "Yu Mincho", YuMincho, serif;
    font-weight: 400;
    letter-spacing: 0.05em;
  }

  h1,h2,h3,h4,h5{
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    letter-spacing: 0.08em;
    line-height: var(--lh-tight);
  }

  /* 英字（PCと完全統一） */
  .en,
  .eng,
  .english{
    font-family: "Cormorant Garamond", "Times New Roman", Times, serif;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: none;
  }

  /* はみ出し保険 */
  p,h1,h2,h3,h4,h5{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

	 body,div,p,a,article,section,nav,ul,li,header,footer,input,select,textarea,th,td{
    letter-spacing: 0.04em; /* ← 0.03〜0.04で微調整 */
  }

  /* 見出しも少し締める（広がり過ぎ防止） */
  h1,h2,h3,h4,h5{
    letter-spacing: 0.06em; /* ← 0.06〜0.08 */
  }
	
	
  img{ display:block; max-width:100%; height:auto; }

  /* =====================================
    Base Layout
  ===================================== */
  .pc{ display:none; }
  .cts{
    width:90%;
    margin:0 auto;
  }

  /* 使い回し用（PCと同じ思想） */
  .t-xl{ font-size: var(--fs-xl); }
  .t-l { font-size: var(--fs-l); }
  .t-m { font-size: var(--fs-m); }
  .t-s { font-size: var(--fs-s); }

  /* =====================================
    Titles
  ===================================== */
  .titles{
    padding-bottom:30px;
    text-align:center;
  }
  .titles h2{
    font-size: var(--fs-xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0.10em;
  }
  .titles .subtitle{
    font-size: var(--fs-m);
    font-weight: 500;
    letter-spacing: 0.06em;
  }

  /* =====================================
    Set (intro/program etc.)
  ===================================== */
  .set h3{
    font-size: var(--fs-l);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.8;
    color:#ae9c6e;
    text-align:center;
    padding-bottom:30px;
  }

  .set .photos{
    display:flex;
    justify-content:space-between;
    margin-top:30px;
  }
  .set .photos .photo{
    width:32%;
  }

  /* =====================================
    Corner Title（PCに合わせて統一）
  ===================================== */
  .corner_title{
    padding:15px 0;
    background: linear-gradient(to bottom, #4a4032 0%, #332b22 100%) no-repeat;
    background-size:100% 100%;
    text-align:center;
  }

  .corner_title h2{
    font-size: var(--fs-l);
    font-weight: 400;
    letter-spacing: 0.14em;
    color:#fff;
    line-height: 1.1;
  }

  .corner_title .kana{
    font-size: var(--fs-s);
    letter-spacing: 0.08em;
    color: #ae9c6e;
    text-transform: uppercase;
    transform: none;
    margin-bottom:7px;
  }

  /* =====================================
    TYPES（FACILITY）SPは縦積み
  ===================================== */
  .types .type .detail{ width:100%; }
  .types .type .detail .bg{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
  }
  .types .type .detail .detail_cts{
    width:100%;
    padding:30px 30px 45px;
  }
  .types .type .detail .detail_cts h3{
    font-size: var(--fs-l);
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.35;
    color:#fff;
    text-align:center;
    padding-bottom:10px;
  }
  .types .type .detail .detail_cts h3 .sub{ font-size: var(--fs-s); }
  .types .type .detail .detail_cts .kana{
    font-size: var(--fs-s);
    color:#fff;
    padding-bottom:20px;
    text-align:center;
    text-transform:none;
  }
  .types .type .detail .detail_cts .copy{
    font-size: var(--fs-m);
    letter-spacing: 0.06em;
    line-height: var(--lh-wide);
    color:#fff;
    padding-bottom:30px;
  }

  /* CTA（PC同様：非表示） */
  .cta_btn{ display:none; }

  /* gallery ex（PCと思想を合わせる） */
  .gallery p.ex{
    font-size: var(--fs-m);
    letter-spacing: 0.04em;
    line-height: var(--lh-base);
    font-weight: 400;
    color: #fff;
    padding-bottom: 0;
	text-align:left; /* SPは左揃え */

  }

  /* =====================================
    HEADER
  ===================================== */
  header h1{
    width:155px;
    position:absolute;
    top:20px;
    left:20px;
    z-index:999;
  }
  header .contact{ display:none; }

  /* MV：フルスクリーン（SPはsvh優先） */
  #mv{
    width:100%;
    height: calc(100svh + 150px); /* PC思想を踏襲。不要なら +150px を消す */
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
    background:#000;
  }

  #mv .cts{ width:100%; height:100%; }

  #mv .container{
    position:relative;
    height:100%;
    overflow:hidden;
  }

  #mv .mv_slider{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
  }

  #mv .mv_slider.swiper,
  #mv .mv_slider .swiper-wrapper,
  #mv .mv_slider .swiper-slide{
    height:100%;
  }

  /* スライド本体 */
  #mv .mv{
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
  }

  /* fade時の端チラつき＆黒帯対策 */
  #mv .mv_slider,
  #mv .mv_slider .swiper-wrapper,
  #mv .mv_slider .swiper-slide,
  #mv .mv{
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* 背景レイヤー（常時animationはしない／transitionでズーム） */
  #mv .mv::before{
    content:"";
    position:absolute;

    /* ★黒帯が出る端1px対策：少しだけはみ出させる */
    inset:-3px;

    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;

    transform: translateZ(0) scale(1);
    transition: transform 6.5s linear; /* ズーム時間 */
    will-change: transform;
  }

  /* activeでズーム */
  #mv .swiper-slide-active .mv::before{
    transform: translateZ(0) scale(1.10);
  }

  /* ★fade中にprevが戻らないように維持（ここが肝） */
  #mv .swiper-slide-prev .mv::before{
    transform: translateZ(0) scale(1.10);
  }

  /* 画像指定 */
  #mv .mv1::before{ background-image:url("../img/mv_1.jpg"); }
  #mv .mv2::before{ background-image:url("../img/mv_2.jpg"); }
  #mv .mv3::before{ background-image:url("../img/mv_3.jpg"); }

  /* 暗転レイヤー（上品に） */
  #mv .mv::after{
    content:"";
    position:absolute;
    inset:-3px;                 /* beforeと同じくはみ出し */
    background: rgba(0,0,0,.08);
    opacity: 0;                 /* 通常はOFF */
    pointer-events:none;
    transition: opacity .6s ease;
  }

  /* activeだけ少しON */
  #mv .swiper-slide-active .mv::after{
    opacity: .60; /* 0.45〜0.75 */
  }

  /* =========================
     タイトル（読みやすさ＋光彩）
     ※SP位置はお好みで 26%〜35% を調整
  ========================= */
  .mv_copy{
    position:absolute;
    top:30%;
    left:0;
    width:100%;
    transform:translateY(-50%);
    z-index:20;
    text-align:center;
    pointer-events:none;
  }

  .mv_copy_title{
    position: relative;
    display: inline-block;
    padding: 8px 16px;

    /* タイトルの“親”をアニメさせる */
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    filter: blur(10px);
    animation: mvTitleReveal 1.6s ease-out forwards;
    animation-delay: .35s;
  }

  /* 白い光彩（控えめ） */
  .mv_copy_title::after{
    content:"";
    position:absolute;
    inset:-10px;
    border-radius:999px;
    background: radial-gradient(
      ellipse at center,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 40%,
      rgba(255,255,255,0) 70%
    );
    filter: blur(16px);
    opacity:.7;
    pointer-events:none;
  }

  .mv_copy_title img{
    position: relative;
    z-index: 1;
    display:block;
    width: min(520px, 86vw);
    height:auto;
    margin:0 auto;

    filter:
      drop-shadow(0 10px 22px rgba(0,0,0,.16))
      drop-shadow(0 0 12px rgba(255,255,255,.20));

    /* 画像は少し遅らせて追いかけ */
    opacity: 0;
    transform: translateY(6px) scale(0.99);
    animation: mvTitleRevealImg 1.6s ease-out forwards;
    animation-delay: .55s;
  }

  @keyframes mvTitleReveal{
    0%{
      opacity:0;
      transform: translateY(12px) scale(0.97);
      filter: blur(12px);
    }
    60%{
      opacity:.75;
      transform: translateY(4px) scale(0.99);
      filter: blur(4px);
    }
    100%{
      opacity:1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  @keyframes mvTitleRevealImg{
    0%{
      opacity:0;
      transform: translateY(10px) scale(0.98);
      filter: blur(10px);
    }
    100%{
      opacity:1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  /* Scroll Sign は入れない（指定どおり） */
  #mv .scroll_sign{ display:none !important; }


.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

 

  /* =====================================
    INTRO（PCに合わせて英字を統一）
  ===================================== */
  #intro{
    padding:50px 0 30px;
    background:#fff;
  }
  #intro .intro_title{
    text-align:center;
    padding-bottom:24px;
  }

  #intro .intro_title .hotel{
    font-family: 'Shippori Mincho', "Hiragino Mincho ProN", 游明朝, "Yu Mincho", YuMincho, serif;
    font-size: calc(var(--fs-m) * 1.15);
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 2.4;
    color: #ae9c6e;
  }

  #intro .intro_title .hotel.en{
    font-family: "Cormorant Garamond", "Times New Roman", Times, serif;
    font-size: calc(var(--fs-xl) * 1.15);
    font-weight: 300;
    letter-spacing: 0.20em;   /* SPは広すぎ注意：0.18〜0.22推奨 */
    line-height: 1.9;
    text-transform: none;     /* ★PCと統一 */
    margin: 8px 0 18px;
  }

  #intro .intro_title h2{
    font-size: var(--fs-xl);
    line-height: 1.25;
    color:#ae9c6e;
    letter-spacing:0.10em;
  }

  #intro .copy{ text-align:center; }
  #intro .ex{ text-align:center; }

  #intro .container{
    margin:30px 0 18px;
    padding-bottom:0;
    position:relative;
    overflow:hidden;
    border-top:none !important;
    box-shadow:none !important;
  }

  #intro .intro_slider{
    overflow:hidden;
    background:transparent;
    border:none;
    box-shadow:none;
    height:auto !important;
  }

  #intro .intro_slider img{
    display:block;
    width:100%;
    height:auto;
    vertical-align:top;
  }

  #intro .intro_slider .swiper-slide{
    line-height:0;
    border:0;
    height:auto !important;
  }

  #intro .intro_slider .swiper-wrapper,
  #intro .intro_slider .swiper-slide{
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    height:auto !important;
  }

  #intro .intro_slider .swiper-pagination{
    position: static !important;
    margin-top: 12px;
  }

  div.ex p{
    font-size: var(--fs-m);
    padding-bottom:20px;
    letter-spacing:0.06em;
    line-height: var(--lh-wide);
    font-weight:400;
	 text-align:left; /* SPは左揃え */

  }
  div.ex p:last-child{ padding-bottom:0; }
	
	
  /* introのサブ写真：縦長（2:3） */
#intro .photos .photo{
  aspect-ratio: 1 / 1.35;   
  overflow:hidden;        /* はみ出し防止 */
}

#intro .photos .photo img{
  width:100%;
  height:100%;
  object-fit:cover;       /* 中央トリミング */
  display:block;
}


.reserve_notice{
  color: #b8a06a;
}

div.ex p.reserve_notice{
  text-align: center;
}


	
  /* =====================================
    Swiper bullet（共通）
  ===================================== */
  .swiper-pagination-bullet{
    width:8px;
    height:8px;
    margin:0 6px;
    border-radius:50%;
    background:rgba(0,0,0,0.35);
    opacity:1;
  }
  .swiper-pagination-bullet-active{
    background:#ae9c6e;
  }

  /* =====================================
    ROOMS (rooms_new)
  ===================================== */
  #rooms.rooms_new .photos,
  #rooms.rooms_new .room_types{
    display:none !important;
  }

  #rooms.rooms_new .rooms_panel{
    background: linear-gradient(to bottom, #ae9c6e 0%, #9a875e 100%);
    padding: 0 0 30px;
  }

  #rooms.rooms_new .rooms_slider{
    width:100vw;
    max-width:none;
    margin:0 calc(50% - 50vw) 22px;
    background: transparent;
    overflow: hidden; 
  }

  #rooms.rooms_new .rooms_slider .swiper-slide{
   width:100% !important;
  }

   #rooms.rooms_new .rooms_slider img{
    width:100%;
    height:auto;
    aspect-ratio: 16 / 12; /* いまのPC思想に合わせるならこれ */
    object-fit:cover;
  }

  #rooms.rooms_new .rooms_slider .swiper-pagination{
    position:static;
    margin-top:12px;
  }

  #rooms.rooms_new .rooms_text{
    text-align:center;
    color:#fff;
    padding: 0 6% 2%;
  }

  #rooms.rooms_new .rooms_lead{
    font-size: var(--fs-l);
    font-weight:600;
    letter-spacing:0.10em;
    line-height:1.8;
    margin-bottom:18px;
    color:#fff;
  }

  #rooms.rooms_new .rooms_copy p{
    font-size: var(--fs-m);
    text-align:left; /* SPは左揃え */
    font-weight:400;
    letter-spacing:0.06em;
    line-height: var(--lh-wide);
    color: rgba(255,255,255,0.92);
    margin:0;
  }

  #rooms.rooms_new .attention{
    font-size: var(--fs-s);
    letter-spacing:0.06em;
    line-height: 1.8;
    color: rgba(255,255,255,0.85);
    text-align:center;
    margin-top:18px;
	 text-align:left; /* SPは左揃え */
  }

  /* introのサブ写真：縦長（2:3） */
#program .photos .photo{
  aspect-ratio: 1 / 1.35;   
  overflow:hidden;        /* はみ出し防止 */
}

#program .photos .photo img{
  width:100%;
  height:100%;
  object-fit:cover;       /* 中央トリミング */
  display:block;
}
	
  /* =====================================
    FACILITY
  ===================================== */
  #facility .types .type{
    background: linear-gradient(to bottom, #ae9c6e 0%, #9a875e 100%) no-repeat;
    background-size:100% 100%;
  }

  #facility .types .type .photo{
    width:100%;
    height:60vw;
  }

  #facility .types .type:last-child .photo{
    width:100%;
    height:40vw;
  }

  #facility .types .type .facility1{ background:url(../img/facility_1.jpg) center/cover no-repeat; }
  #facility .types .type .facility2{ background:url(../img/facility_2.jpg) center/cover no-repeat; }
  #facility .types .type .facility3{ background:url(../img/facility_3.jpg) center/cover no-repeat; }
  #facility .types .type .facility4{ background:url(../img/facility_4.jpg) center/cover no-repeat; }
  #facility .types .type .facility5{ background:url(../img/facility_5.jpg) center/cover no-repeat; }
  #facility .types .type .facility6{ background:url(../img/facility_6.jpg) center/cover no-repeat; }


  #facility .types .type .detail{
    background:none; /* PC同様、背景はtype全体で管理している想定 */
  }

  #facility .types .type .detail .detail_cts .copy{
    padding-bottom:0;
  }

  #facility .types .type .detail .detail_cts .link{
    padding-top:15px;
  }
  #facility .types .type .detail .detail_cts .link a{
    display:flex;
    justify-content:flex-end;
    align-items:center;
  }
  #facility .types .type .detail .detail_cts .link a p{
    font-size: var(--fs-m);
    letter-spacing: 0.06em;
    line-height: var(--lh-wide);
    color:#fff;
    padding:7px 10px 0 0;
  }
  #facility .types .type .detail .detail_cts .link a img{
    width:50px;
  }

  .facility_note{
    background:#fff;
    padding: 16px 0 16px;
  }
  .facility_note .note{
    font-size: var(--fs-s);
    line-height: 1.35;
    text-align: center;
    letter-spacing: 0.08em;
    font-family: 'Shippori Mincho', serif;
	  	 text-align:left; 
  }

  /* =====================================
    PROGRAM
  ===================================== */
  #program{
    padding:30px 0;
  }
  #program .ex{ text-align:center; }
  #program .set h3{
    font-size: var(--fs-l);
    letter-spacing:-0.05em;
    line-height:1.8;
    margin:0 auto 18px;
    padding:0 6%;
    text-align:center;
    color:#0a5c8a; /* PCで合わせた紺 */
  }

  /* =====================================
    ESTHE（PCが非表示なのでSPも合わせる）
  ===================================== */
  #esthe{ display:none; }

  /* =====================================
    ACTIVITY（PCの意図をSPにも）
  ===================================== */
  #activity{
    padding:40px 0 50px;
    background:linear-gradient(to top,#1f4675,#066494);
  }

  /* 帯は使わない（PC同様） */
  #activity .corner_title{
    background:none;
    padding:0;
    margin-bottom:30px;
  }

  #activity h4{
    font-size: var(--fs-l);
    letter-spacing: 0.12em;
    color:#fff;
    text-align:center;
    padding-bottom:30px;
  }

  #activity .galleries .gallery{
    width:100%;
    margin-bottom:50px;
  }
  #activity .galleries .gallery:last-child{
    margin-bottom:0;
  }
  #activity .galleries .gallery .photo{
    margin-bottom:25px;
  }

  /* アクティビティ名：LとMの中間（PC同様） */
  #activity .galleries .gallery .item{
    font-size: calc((var(--fs-l) + var(--fs-m)) / 2);
    color:#fff;
    padding-bottom:15px;
    line-height:1.45;
    text-align:center;
    letter-spacing:0.06em;
    display:block;
  }

  #activity .galleries .gallery .ex{
    font-size: var(--fs-m);
    letter-spacing:0.06em;
    line-height: var(--lh-wide);
    color:#fff;
  }

  /* =====================================
    INFORMATION（非表示）
  ===================================== */
  #information{
    display:none;
  }

  /* =====================================
    ACCESS
  ===================================== */
  #access{
    padding:30px 0;
  }
  #access h4{
    font-size: var(--fs-m);
    color:#ae9c6e;
    letter-spacing:0.12em;
    font-family:"Cormorant Garamond", "Times New Roman", serif;
    transform:scale(1,1.2);
    text-align:center;
    padding-bottom:30px;
  }

  /* iframe版の地図トーン調整（必要なら） */
  #access .map iframe{
    filter:
      grayscale(30%)
      sepia(45%)
      saturate(120%)
      hue-rotate(12deg)
      brightness(0.93)
      contrast(1.1);
  }

	 #access .google_map a{
    width:100%;
    max-width:none;
    height:auto;
    padding:8px 8px;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#e6e6e6;
    margin-top:10px;
  }

  #access .google_map a p{
    font-size: var(--fs-m);
    letter-spacing: 0.10em; /* 本文より少しだけ広くしてボタン感 */
    margin:0;
  }
	
	.address a{
    color: inherit;        /* デザイン崩さない */
    text-decoration: none; /* 下線消す */
  }

	/* ACCESS：テキストを中央寄せ */
#access{
  text-align: center;
}

#access p,
#access address,
#access .address,
#access .google_map,
#access .google_map p{
  text-align: center;
 margin-top:10px;

}

	
	
  /* =====================================
    FOOTER
  ===================================== */
  footer{
    background:#3f3f3f;
    padding:30px 0 20px;
  }
  footer .cta_btn{ display:none; }

  footer .logo{
    width:50vw;
    margin:0 auto 20px;
  }
  footer .copyright{
    font-size: var(--fs-s);
    text-align:center;
    color:#808080;
    letter-spacing:0.12em;
  }

  /* =====================================
    SWIPER（矢印）
    ※SPで要らなければこのブロックごと消してOK
  ===================================== */
  .swiper-button-prev,
  .swiper-button-next{
    position:absolute;
    top:50%;
    width:50px;
    height:50px;
    margin-top:-25px;
    z-index:10;
    cursor:pointer;
    background-size:50px 50px;
    background-position:center;
    background-repeat:no-repeat;
  }
  .swiper-button-prev.swiper-button-disabled,
  .swiper-button-next.swiper-button-disabled{
    opacity:0.35;
    cursor:auto;
    pointer-events:none;
  }
  .swiper-button-prev,
  .swiper-container-rtl .swiper-button-next{
    background-image:url(../img/slide_prev.svg);
    left:16px; /* SPは端に寄せる */
    right:auto;
  }
  .swiper-button-next,
  .swiper-container-rtl .swiper-button-prev{
    background-image:url(../img/slide_next.svg);
    right:16px;
    left:auto;
  }

	
/* ===============================
  Swiper Pagination - Gold Theme
=============================== */

/* 非アクティブ（控えめゴールド） */
.swiper-pagination-bullet{
  width:8px;
  height:8px;
  margin:0 6px;
  border-radius:50%;
  background: rgba(174,156,110,0.35); /* #ae9c6e ベース */
  opacity:1;
  transition: background .3s ease, transform .3s ease;
}

/* アクティブ（主役ゴールド） */
.swiper-pagination-bullet-active{
  background: #ae9c6e; /* メインゴールド */
  transform: scale(1.15);
}

/* =====================================
  MV：右の黒帯（サブピクセル隙間）対策
===================================== */

/* MV内の横幅を確実に100%に固定 */
#mv,
#mv .cts,
#mv .container,
#mv .mv_slider,
#mv .mv_slider .swiper-wrapper,
#mv .mv_slider .swiper-slide{
  width:100%;
  max-width:100%;
}

/* 背景レイヤーを少しだけ“はみ出させて”隙間を潰す */
#mv .mv::before,
#mv .mv::after{
  inset:-3px !important; /* -2〜-4で調整 */
}

/* transform+fade時の端チラつき保険 */
#mv .mv,
#mv .mv::before{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}

	
 .sp_cta{
    display: block;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45px;
    background: #b6a471;
    z-index: 1000;
  }

  .sp_cta a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    color: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.16em;
    text-decoration: none;
  }

.cta_area,
.footer_cta{
  display: none;
}

/* 下固定CTA（小さめ） */
  .sp_cta{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 48px;            /* 56→48 */
    background: #b6a471;
    z-index: 1000;

    /* 初期は隠す */
    transform: translateY(110%);
    opacity: 0;
    transition: transform .35s ease, opacity .35s ease;
  }

  /* 表示状態 */
  .sp_cta.is-show{
    transform: translateY(0);
    opacity: 1;
  }

  .sp_cta a{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #fff;
    font-size: 0.80rem;
    letter-spacing: 0.14em;
    text-decoration: none;
  }

  /* CTAにフッターが隠れない逃げ代 */
  body{
    padding-bottom: 48px;
  }
body{ padding-bottom: 0; }
body.has-sp-cta{ padding-bottom: 48px; }

	
	
  .sp_cta{
    display: none;
  }
	

}