@charset "utf-8";

  /* ==================================================
    Common CSS (PC) - 整理版
    - 文字サイズは XL / L / M / S の4段階に統一
    - 各所の%指定を撤去して追いやすく
  ================================================== */


  @media (min-width:1000px){

    /* =====================================
      Font Tokens (PC)
      ここだけ触れば全体の文字サイズ感が変わる
    ===================================== */
    :root{
      --fs-xl: 2.1rem; /* 特大：主役見出し */
      --fs-l : 1.6rem;/* 大：セクション見出し/リード */
      --fs-m : 0.9rem;   /* 中：本文 */
      --fs-s : 0.75rem;/* 小：注釈 */

      --lh-tight: 1.35;
      --lh-base : 1.9;
      --lh-wide : 2.1;
    }

    /* =====================================
      Typography (PC)
    ===================================== */
    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);
    }

  .en,
  .eng,
  .english{
    font-family: "Cormorant Garamond", "Times New Roman", Times, serif;
    font-weight: 400;
  }


    /* 使い回し用（必要ならHTMLに付与して使える） */
    .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); }

    /* =====================================
      Base Layout
    ===================================== */
    .sp{ display:none; }

    .cts{
      width:1100px;
      margin:0 auto;
    }

    /* =====================================
      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:40px;
    }

    .set .photos .photo{
      width:340px;
    }

    /* =====================================
      Corner Title
    ===================================== */
    .corner_title{
      padding:20px 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;
    }

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

    /* =====================================
      TYPES (FACILITY)
    ===================================== */
    .types .type{
      display:flex;
    }

    .types .type:nth-child(2n){
      flex-direction:row-reverse;
    }

    .types .type .detail{
      width:50%;
    }

    .types .type .detail .bg{
      width:100%;
      height:100%;
      display:flex;
      align-items:center;
    }

    .types .type .detail .detail_cts{
      width:480px;
      margin-left:70px;
    }

    .types .type:nth-child(2n) .detail .detail_cts{
      margin:0 70px 0 auto;
    }

    .types .type .detail .detail_cts h3{
      font-size: var(--fs-l);
      font-weight: 600;
      letter-spacing: 0.12em;
      color: #fff;
      padding-bottom:15px;
    }

    .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:25px;
    }

    .types .type .detail .detail_cts .copy{
      font-size: var(--fs-m);
      letter-spacing: 0.06em;
      line-height: var(--lh-wide);
      color:#fff;
      padding-bottom: 0; 
    }


    /* gallery ex（最終値を1本化） */
    .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;
    }
	  
/* CTAエリア（必ず画面中央） */
.cta_area{
  width: 100%;
  padding: 40px 0 20px;

  display: flex;
  justify-content: center; /* ← 横センター */
}

.cta_reserve{
  width: 360px;
  height: 50px;
  background: #b6a471;

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

  text-decoration: none;
}

/* 文字を白に */
.cta_reserve,
.cta_reserve span,
.cta_reserve p{
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.16em;
}
	  
.cta_reserve:hover{
  background: #c7b583;
}

.cta_area{
  display: none;
}
	  
	  
	  /* =========================
   FOOTER CTA
========================= */
.footer_cta{
  margin: 0 auto 60px;   /* ロゴとの距離 */
  display: flex;
  justify-content: center;
}

/* フッター内では少し控えめに */
footer .cta_reserve{
  width: 320px;
  height: 48px;
}

	  
    /* =====================================
      HEADER（現状どおり）
    ===================================== */
    header h1{
      width:155px;
      position:absolute;
      top:25px;
      left:25px;
      z-index:999;
    }
	  
header .contact{
  position: fixed;
  top: 0;
  right: 0;

  width: 200px;
  height: 60px;
  background: #ae9c6e;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* aタグを全面クリック可に */
header .contact a{
  width: 100%;
  height: 100%;

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

  text-decoration: none;
}

/* 文字 */
header .contact p{
  margin: 0;

  color: #fff;
  font-size: 1.1rem;      /* 少し大きく */
  letter-spacing: 0.14em;
  line-height: 1;
}
	  
header .contact{ display:none; }


/* =========================
   MV：フルスクリーン（PC）
========================= */
#mv{
  width:100%;
  height:calc(100vh + 150px);
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  overflow:hidden;
}
#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;
}

/* 背景（ズームはactive/prevのみ） */
#mv .mv::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform: translateZ(0) scale(1);
  transition: transform 6.5s linear;
  will-change: transform;
}

/* 画像指定 */
#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"); }

/* activeでズーム */
#mv .swiper-slide-active .mv::before{
  transform: translateZ(0) scale(1.1);
}
/* fade中にprevが戻らないように維持 */
#mv .swiper-slide-prev .mv::before{
  transform: translateZ(0) scale(1.1);
}

/* 暗転レイヤー（常時薄く） */
#mv .mv::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.08);
  pointer-events:none;
}

/* タイトル */
.mv_copy{
  position:absolute;
  top:35%;
  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(600px, 86vw);
  height:auto;
  margin:0 auto;
  opacity: 0;
  transform: translateY(6px) scale(0.99);
  animation: mvTitleRevealImg 1.6s ease-out forwards;
  animation-delay: .55s;
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.16))
    drop-shadow(0 0 12px rgba(255,255,255,.20));
}

@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); }
}

	 .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;
}

	  
  /* =========================
     Scroll Sign
  ========================= */
  .scroll_sign{
    position:absolute;
    bottom:40px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    pointer-events:none;
  }

  .scroll_sign .scroll_text{
    font-size:11px;
    letter-spacing:0.25em;
    color:#fff;
    margin-bottom:10px;
    opacity:0.8;
  }

  .scroll_sign .scroll_line{
    width:1px;
    height:40px;
    background:rgba(255,255,255,0.8);
    position:relative;
    overflow:hidden;
  }

  .scroll_sign .scroll_line::after{
    content:'';
    position:absolute;
    top:-100%;
    left:0;
    width:100%;
    height:100%;
    background:#fff;
    animation:scrollLine 1.8s ease-in-out infinite;
  }

  @keyframes scrollLine{
    0%   { top:-100%; opacity:0; }
    30%  { opacity:1; }
    100% { top:100%; opacity:0; }
  }
	  

	  
    /* =====================================
      INTRO
    ===================================== */
    #intro{
      padding:60px 0 120px;
      background:#fff;
    }

    #intro .intro_title{
      text-align:center;
      padding-bottom:30px;
    }

   #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: 3.1;
    color: #ae9c6e;
  }

  #intro .intro_title .hotel.en{
    font-size: calc(var(--fs-xl) * 1.5); /* ← 見出し格に */
    font-weight: 300;
    letter-spacing: 0.1em;             /* ← 少しだけ締める */
    line-height: 2.0;
    text-transform: none;               /* ★ 大文字固定を解除 */
    margin-bottom: 25px;
  }


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

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

    #intro .container{
      margin:70px 0;
      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: 16px;
    }

    div.ex p{
      font-size: var(--fs-m);
      padding-bottom:20px;
      letter-spacing:0.06em;
      line-height: var(--lh-wide);
      font-weight:400;
    }

    div.ex p:last-child{
      padding-bottom:0;
    }
	  
	  .reserve_notice{
color: #b8a06a; /* タイトルと同系のゴールド */
}


    /* =====================================
      ROOMS (new layout)
    ===================================== */
    #rooms.rooms_new .rooms_panel{
      background: linear-gradient(to bottom, #ae9c6e 0%, #9a875e 100%);
      padding: 0 0 60px;
    }

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

      /* チラ見せ用 */
      overflow: visible;
    }

    #rooms.rooms_new .rooms_slider .swiper-slide{
      width: 85%;
      max-width: 1200px;
      line-height:0;
    }

    #rooms.rooms_new .rooms_slider img{
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      display: block;
      vertical-align:top;
    }


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

    #rooms.rooms_new .rooms_text{
      text-align:center;
      color:#fff;
    }

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

    #rooms.rooms_new .rooms_copy p{
      font-size: var(--fs-m);
      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:3;
      color: rgba(255,255,255,0.85);
      text-align:center;
      margin-top:28px;
      padding:0;
    }


    /* =====================================
      FACILITY
    ===================================== */
    #facility .types .type{
      background: linear-gradient(to bottom, #ae9c6e 0%, #9a875e 100%) no-repeat;
      background-size:100% 100%;
    }

    #facility .types .type .photo{
      width:50%;
      height:500px;
    }

    #facility .types .type:last-child .photo{
      width:50%;
      height:250px;
    }

    #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;
    }

    #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: 20px 0 20px;
  }

  .facility_note .note {
    font-size: var(--fs-s);
    line-height: 1.3;
    text-align: center;
    letter-spacing: 0.08em;
    font-family: 'Shippori Mincho', serif;
  }

  /* =====================================
      PROGRAM
    ===================================== */
    #program{
      padding:100px 0;
    }
    #program .ex{ text-align:center;
      }

      #program h3 {
    color: #0a5c8a; /* 下のACTIVITYと同じ紺色に */
  }



    /* =====================================
      ESTHE
    ===================================== */
    #esthe{
      padding:70px 0;
      background:linear-gradient(to top,#115587,#1f4675);
    }

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

    #esthe .galleries{
      display:flex;
      justify-content:center;
    }

    #esthe .galleries .gallery{
      width:340px;
      margin:0 20px;
    }

    #esthe .galleries .gallery .photo{
      margin-bottom:25px;
    }

    #esthe .galleries .gallery .item{
      font-size: var(--fs-l);
      letter-spacing: 0.06em;
      color:#fff;
      padding-bottom:20px;
      text-align:center;
      line-height:1.4;
      display:block;
    }

      #esthe{
    display: none;
  }


    /* =====================================
      ACTIVITY
    ===================================== */
    #activity{
      padding:40px 0 100px;
      background:linear-gradient(to top,#1f4675,#066494);
    }

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

    #activity .galleries{
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
    }

    #activity .galleries .gallery{
      width:340px;
      margin-bottom:50px;
    }

    #activity .galleries .gallery:nth-child(3n){
      margin-right:0;
    }

    #activity .galleries .gallery .photo{
      margin-bottom:25px;
    }

    #activity .galleries .gallery .item{
      font-size:calc(var(--fs-l) * 0.85); 
      letter-spacing: -0.07em;
      color:#fff;
      padding-bottom:20px;
      text-align:center;
      line-height:1.4;
      display:block;
    }

    #activity .galleries .gallery .item,
    #activity .galleries .gallery .item a,
    #activity .galleries .gallery .item span,
    #activity .galleries .gallery .item small{
      color:#fff;
    }


      /* ACTIVITY：コーナータイトルの帯を使わない */
  #activity .corner_title{
    background: none;
    padding: 0;
  }

      /* ACTIVITY タイトル位置調整 */
  #activity .corner_title{
    background: none;
    margin-bottom: 30px; /* 写真との距離はここで確保 */
  }

      /* ACTIVITY：アクティビティ名（LとMの中間） */
  #activity .galleries .gallery .item{
    font-size: calc((var(--fs-l) + var(--fs-m)) / 2);
    line-height: 1.45;
  }



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

    #information .cts{
      width:800px;
      margin:auto;
    }

    #information h4{
      font-size: var(--fs-m);
      color:#ae9c6e;
      letter-spacing:0.12em;
      transform:scale(1,1.2);
      text-align:center;
      padding-bottom:40px;
    }

    #information .informations .information{
      display:flex;
      justify-content:space-between;
      margin-bottom:15px;
    }

    #information .informations .information:last-child{
      margin-bottom:0;
    }

    #information .informations .information .date{
      width:20%;
      letter-spacing:0.12em;
    }

    #information .informations .information .item{
      width:80%;
      letter-spacing:0.12em;
    }

    /* =====================================
      ACCESS
    ===================================== */
    #access{
      padding:100px 0;
    }

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

    #access .map{
      width:100%;
      height:340px;
      margin-bottom:40px;
    }

    #access .hotel{
      font-size: var(--fs-l);
      margin-top: 20px;
      padding-bottom:15px;
      text-align:center;
    }

    #access .address{
      font-size: var(--fs-m);
      letter-spacing:0.12em;
      padding-bottom:15px;
      line-height: var(--lh-wide);
      text-align:center;
    }

    #access .contact{
      font-size: var(--fs-m);
      letter-spacing:0.12em;
      line-height: var(--lh-wide);
      text-align:center;
      padding-bottom:30px;
    }

    #access .google_map a{
      width:500px;
      height:60px;
      background:#e6e6e6;
      display:flex;
      justify-content:center;
      align-items:center;
      margin:auto;
    }

    #access .google_map a p{
      text-align:center;
      font-size: var(--fs-m);
      letter-spacing:0.12em;
    }



    /* =====================================
      FOOTER
    ===================================== */
    footer{
      background:#3f3f3f;
      padding:50px 0 20px;
    }

    footer .cta_btn{
      width:500px;
      margin:0 auto 100px;
      display:none;
    }

.footer_cta{
  display: none;
}

	  
footer .logo{
  width:250px !important;
  margin:0 auto;   /* ← これが決定打 */
 padding:0 0 30px;

}

    footer .copyright{
      font-size: var(--fs-s);
      text-align:center;
      color:#808080;
      letter-spacing:0.12em;
    }


/* PCではSP固定CTAを完全に消す */
.sp_cta{
  display:none !important;
}

	  
    /* =====================================
      SWIPER（矢印）
    ===================================== */
    .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:50px;
      right:auto;
    }

    .swiper-button-next,
    .swiper-container-rtl .swiper-button-prev{
      background-image:url(../img/slide_next.svg);
      right:50px;
      left:auto;
    }

    /* はみ出し完全防止（MV周りは強めに維持） */
    #mv,
    #mv .container,
    .mv_slider,
    .swiper{
      overflow:hidden;
    }


    /* 長い文章や英字がはみ出す事故を止める（現状維持） */
    p,h1,h2,h3,h4,h5{
      overflow-wrap:anywhere;
      word-break:break-word;
}

  #map{
    filter:none !important;
    transform:none !important;
  }


/* ===============================
  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);
}

	  
	  

}