@charset "utf-8";
/* ==============================================
ROOM TYPE ページ専用CSS
(共通トークン・共通コンポーネントは css/style.css を参照)
============================================== */

/* ================= ROOM HERO ================= */
.room-hero{
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 380px;
    max-height: 640px;
    overflow: hidden;
  }

  /* 写真の明暗にかかわらず文字を読みやすくするための暗幕 */
  .room-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, rgba(45,0,77,0.55) 0%, rgba(45,0,77,0.22) 38%, rgba(45,0,77,0.38) 100%);
    pointer-events: none;
  }
  
  .room-hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .room-hero-badge{
    position: absolute;
    z-index: 2;
    left: 5%;
    top: 14%;
    width: 210px;
    height: 210px;
    background: rgba(204,204,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Serif JP', serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--purple);
  }
  
  .room-hero-text{
    position: absolute;
    z-index: 2;
    right: 6%;
    top: 12%;
    text-align: right;
    max-width: 560px;
    color: var(--gray);
  }
  
  .room-hero-text .script{
    font-family: 'La Belle Aurore', cursive;
    font-size: clamp(30px, 4.2vw, 48px);
    text-shadow: 2px 3px 6px rgba(229,229,234,0.8);
  }
  
  .room-hero-text .sub{
    margin-top: 10px;
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: clamp(16px, 2vw, 22px);
    color: var(--paper);
    text-shadow: 0 2px 8px rgba(45,0,77,0.4);
  }
  
  @media (max-width: 800px){
    .room-hero-badge{ width: 140px; height: 140px; font-size: 22px; left: 6%; top: 10%; }
    .room-hero-text{ left: 6%; right: 6%; text-align: left; top: auto; bottom: 8%; }
  }
  
  /* ================= SECTION HEAD (共通見出し) ================= */
  .section-head{
    text-align: center;
    padding: 0 6%;
    margin-bottom: 50px;
  }
  
  .section-head .en-title{
    font-family: 'Castoro', serif;
    font-size: clamp(30px, 4.5vw, 48px);
    color: var(--yellow);
    margin-bottom: 20px;
  }
  
  .section-head .divider{
    width: 100%;
    max-width: 1100px;
    height: 0;
    border-top: 3px solid var(--lavender);
    margin: 0 auto 26px;
  }
  
  .section-head .lead{
    font-size: 15px;
    line-height: 2;
    color: var(--purple);
    max-width: 900px;
    margin: 0 auto;
  }
  
  /* ================= ROOM TYPE SECTION ================= */
  .room-type-section{
    padding: 90px 6%;
  }
  
  .room-card{
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1300px;
    margin: 0 auto 90px;
  }
  
  .room-card:last-child{ margin-bottom: 0; }
  
  .room-info{ flex: 0 0 380px; }
  
  .room-en{
    font-family: 'Castoro', serif;
    font-size: clamp(26px, 2.8vw, 34px);
    color: var(--yellow);
    line-height: 1.35;
    margin-bottom: 16px;
  }
  
  .room-jp{
    font-size: 19px;
    font-weight: 400;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--lavender);
    display: inline-block;
    margin-bottom: 18px;
  }
  
  .room-desc{
    font-size: 14px;
    line-height: 2;
    color: var(--purple);
    margin-bottom: 26px;
  }
  
  .spec-row{
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: var(--purple);
    margin-bottom: 16px;
  }
  
  .spec-row img{
    width: 26px;
    height: 26px;
    object-fit: contain;
    flex-shrink: 0;
    /* アイコン画像を濃いグレーに統一し、白背景でも見やすくする */
    filter: grayscale(1) brightness(0.45);
  }
  .spec-divider{ 
    color: #000000; 
    padding: 0 4px; }
  
  .btn-purple-lg{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    padding: 17px 54px;
    background: var(--purple);
    color: var(--yellow);
    font-size: 16px;
    font-weight: 700;
  }
  
  /* ---- 客室スライダー(自動切替 + クリックで手動切替) ---- */
  .room-slider{
    position: relative;
    flex: 1 1 auto;
    aspect-ratio: 772/584;
    max-height: 600px;
    overflow: hidden;
  }
  
  .room-slider .slide{
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s ease;
  }
  
  .room-slider .slide.active{ opacity: 1; z-index: 1; }
  .room-slider .slide img{ width: 100%; height: 100%; object-fit: cover; }
  
  .slider-nav{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(45,0,77,0.35);
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s ease;
  }
  .slider-nav:hover{ background: rgba(45,0,77,0.6); }
  .slider-nav svg{ width: 24px; height: 24px; }
  .slider-nav.prev{ left: 20px; }
  .slider-nav.next{ right: 20px; }
  
  @media (max-width: 900px){
    .room-card{ flex-direction: column; gap: 32px; }
    .room-info{ flex: none; width: 100%; }
    .room-slider{ width: 100%; aspect-ratio: 4/3; }
  }
  
  /* ================= BENEFITS ================= */
  .benefits-section{
    padding: 90px 6%;
    background: var(--paper);
    text-align: center;
  }
  
  .benefits-row{
    display: flex;
    justify-content: center;
    gap: 70px;
    flex-wrap: wrap;
    margin-bottom: 60px;
  }
  
  .benefit-item{
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .benefit-glow{
    position: absolute;
    inset: 0;
    background: var(--lavender);
    filter: blur(20px);
    border-radius: 50%;
    opacity: 0.9;
  }
  
  .benefit-item p{
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 2;
    color: var(--purple);
  }
  
  .benefit-list-trigger{
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--purple);
    line-height: 2;
    padding: 10px;
  }
  
  .benefit-list-trigger .underline{
    display: inline-block;
    margin-top: 4px;
    padding-bottom: 4px;
    border-bottom: 3px solid var(--lavender);
    transition: border-color .2s ease, color .2s ease;
  }
  
  .benefit-list-trigger:hover .underline{
    border-color: var(--yellow);
    color: var(--yellow);
  }
  
  /* ================= MODAL (BENEFIT一覧ポップアップ) ================= */
  .modal-overlay{
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(45,0,77,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  
  .modal-overlay.open{ display: flex; }
  
  .modal-box{
    position: relative;
    background: #fff;
    max-width: 880px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 48px 40px;
  }
  
  .modal-close{
    position: absolute;
    top: 16px; right: 20px;
    width: 40px; height: 40px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--purple);
    cursor: pointer;
  }
  
  .modal-title{
    font-family: 'Castoro', serif;
    font-size: 26px;
    color: var(--purple);
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--lavender);
  }
  
  .modal-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 30px;
  }
  
  .modal-col h3{
    font-size: 15px;
    font-weight: 700;
    color: var(--purple);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--yellow);
    margin-bottom: 16px;
  }
  
  .modal-col ul{ list-style: none; }
  .modal-col li{
    font-size: 13.5px;
    line-height: 1.9;
    color: var(--gray);
    margin-bottom: 8px;
    padding-left: 14px;
    position: relative;
  }
  .modal-col li::before{
    content: "";
    position: absolute;
    left: 0; top: 9px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--lavender);
  }
  
  .modal-note{
    font-size: 11.5px;
    line-height: 1.9;
    color: var(--gray);
  }
  
  @media (max-width: 700px){
    .modal-grid{ grid-template-columns: 1fr; gap: 26px; }
    .modal-box{ padding: 60px 24px 32px; }
  }
  
  /* ================= 空室状況(AVAILABILITY) ================= */
  .availability-section{
    padding: 90px 6% 120px;
  }
  
  .availability-box{
    display: flex;
    gap: 48px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px;
    background: var(--lavender);
    border: 3px solid var(--yellow);
  }
  
  .calendar-wrap{
    flex: 1 1 420px;
    background: #fff;
    padding: 16px;
    display: flex;
    justify-content: center;
  }
  
  /* flatpickr インライン表示を横幅いっぱいに */
  .calendar-wrap .flatpickr-calendar{
    width: 100% !important;
    max-width: 420px;
    box-shadow: none;
    font-family: 'Noto Serif JP', serif;
  }
  
  .availability-form{
    flex: 1 1 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
  }
  
  .field-row{
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .field-row label{
    flex: 0 0 100px;
    font-size: 16px;
    font-weight: 600;
    color: var(--purple);
  }
  
  .field-row input{
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--gray);
    border-radius: 3px;
    background: #fff;
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    color: var(--purple);
  }
  
  .search-btn{
    align-self: center;
    margin-top: 10px;
    padding: 14px 60px;
    background: var(--yellow);
    border: none;
    font-family: 'Noto Serif JP', serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--purple);
    cursor: pointer;
    transition: filter .2s ease;
  }
  .search-btn:hover{ filter: brightness(0.94); }
  
  @media (max-width: 800px){
    .availability-box{ flex-direction: column; padding: 20px; }
    .field-row{ flex-wrap: wrap; }
    .field-row label{ flex: none; width: 100%; }
    .field-row input{ width: 100%; }
  }
  
  /* flatpickr のブランドカラー上書き(レンジ選択部分をパープル系に) */
  .flatpickr-day.selected,
  .flatpickr-day.startRange,
  .flatpickr-day.endRange{
    background: var(--purple) !important;
    border-color: var(--purple) !important;
    color: var(--yellow) !important;
  }
  .flatpickr-day.inRange{
    background: rgba(45,0,77,0.12) !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }
  .flatpickr-day.today{
    border-color: var(--yellow) !important;
  }