@charset "utf-8";

/* ==============================================
WEDDING ページ専用CSS
(ヘッダー/フッター/共通ナビ/共通ボタンは css/style.css を参照)
WEDDINGページ専用パレット:#DCD8EF / #FFF099 / #D9FAF7 / #E0C8F7
============================================== */

:root{
  --w-yellow: #FFF099;
  --w-lavender: #E0C8F7;
  --w-mint: #D9FAF7;
  --w-lilac: #DCD8EF;
  --w-line: #E7E3ED;
  --w-sub: #6c6484;
}

.wedding-page{ background: var(--paper); }

/* ハンバーガーメニュー内、ホテル公式サイトへの導線リンク */
.mobile-menu-hotel-link{
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--w-line);
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
  color: var(--purple) !important;
}

/* ================= HEADER(ウェディング専用ボタン配色) ================= */
.btn-mint{ background: var(--w-mint); color: var(--purple); }
.btn-pale-yellow{ background: var(--w-yellow); color: var(--purple); }
.btn-lavender-fill{ background: var(--w-lavender); color: var(--purple); }

.wedding-logo{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wedding-label{
  margin-top: 4px;
  font-family: 'Castoro', serif;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--w-lavender);
}

/* ================= HERO ================= */
/* ヘッダーボタンの幅を最大値に統一 */
.wedding-page .site-header .btn{
  min-width: 168px;
}

/* hero = 100vh - ヘッダー高さ - ナビ高さ(main.jsが実測して--header-h/--nav-hに反映) */
.wedding-hero{
  width: 100%;
  height: calc(100vh - var(--header-h) - var(--nav-h, 64px));
  min-height: 360px;
  overflow: hidden;
}
.wedding-hero img{ width: 100%; height: 100%; object-fit: cover; }

/* ================= INTRO / TITLE ANIMATION ================= */
.wedding-intro{
  padding: 90px 6% 60px;
  text-align: center;
}

.wedding-title{
  font-family: 'La Belle Aurore', cursive;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 56px);
  color: var(--w-yellow);
  text-shadow: 0 2px 10px rgba(45,0,77,0.12);
  margin-bottom: 18px;
  min-height: 1.4em;
}

/* JSが1文字ずつ <span> に分割し、.show が付くごとにフェードインする */
.wedding-title .letter{
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.wedding-title .letter.show{
  opacity: 1;
  transform: translateY(0);
}
.wedding-title .letter.space{ width: 0.3em; }

.wedding-subtitle{
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--purple);
  margin-bottom: 56px;
}

/* ================= COLLAGE(ふわっと表示) ================= */
/* 参考画像のような縦の流れ:全幅カット⇄2枚並びを繰り返す構成 */
.collage{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 780px;
  margin: 0 auto;
}

.collage-item{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.collage-item img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ふわっと表示アニメーション(IntersectionObserverで.in-viewを付与) */
.fade-up{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.19,1,0.22,1), transform 0.9s cubic-bezier(0.19,1,0.22,1);
}
.fade-up.in-view{
  opacity: 1;
  transform: translateY(0);
}

.g1{ grid-column: 1 / 3; aspect-ratio: 4 / 3; }
.g2{ grid-column: 1; aspect-ratio: 4 / 3; }
.g3{ grid-column: 2; aspect-ratio: 4 / 3; }
.g4{ grid-column: 1 / 3; aspect-ratio: 3 / 4; }
.g5{ grid-column: 1; aspect-ratio: 4 / 5; }
.g6{ grid-column: 2; aspect-ratio: 4 / 5; }
.g7{ grid-column: 1 / 3; aspect-ratio: 16 / 10; }
.g8{ grid-column: 1 / 3; aspect-ratio: 16 / 9; }

@media (max-width: 560px){
  .collage{ gap: 10px; }
}

/* ---- ホバー時の説明オーバーレイ(会場のこだわり/ドレス/お食事/プラン) ---- */
.collage-item.hover-info{ cursor: pointer; }

.collage-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px;
  background: linear-gradient(180deg, rgba(45,0,77,0) 40%, rgba(45,0,77,0.78) 100%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.collage-item.hover-info:hover .collage-overlay,
.collage-item.hover-info:focus-within .collage-overlay{
  opacity: 1;
  transform: translateY(0);
}

.collage-overlay h4{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--w-yellow);
  margin-bottom: 8px;
}

.collage-overlay p{
  font-size: 12.5px;
  line-height: 1.7;
  color: #fff;
  margin-bottom: 10px;
}

.collage-overlay a{
  align-self: flex-end;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--w-yellow);
  text-decoration: underline;
  /* タップしやすい領域を確保 */
  padding: 8px 0 2px 12px;
}

/* タッチデバイス(ホバー不可)はタップで表示/非表示を切り替える。
   wedding.js が .collage-item.hover-info のタップで .tapped を付け外しする */
@media (hover: none){
  .collage-item.hover-info.tapped .collage-overlay{
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= BRIDAL FAIR ================= */
.bridal-fair-section{
  padding: 100px 6%;
  text-align: center;
}

.bridal-fair-section .section-head{ margin-bottom: 60px; }

.bridal-fair-section .en-title{
  font-family: 'Castoro', serif;
  font-size: clamp(30px, 4.5vw, 48px);
  color: var(--yellow);
  margin-bottom: 20px;
}

.fair-copy{
  font-size: 16px;
  line-height: 1.9;
  color: var(--w-sub);
}

.fair-pillars{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

.fair-card{
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 50px -30px rgba(45,0,77,0.2);
}

.fair-photo{ height: 220px; }
.fair-photo img{ width: 100%; height: 100%; object-fit: cover; }

.fair-body{ padding: 26px 24px 30px; text-align: left; }
.fair-body h3{
  font-size: 19px;
  margin-bottom: 10px;
  color: var(--purple);
}
.fair-body p{
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--w-sub);
}

@media (max-width: 860px){
  .fair-pillars{ grid-template-columns: 1fr; }
}

/* ================= RESERVATION(フェア予約・見学予約) ================= */
.reserve-section .wrap,
.guest-section .wrap,
.contact-section .wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: 0 28px;
}

.reserve-section,
.guest-section,
.contact-section{
  padding: 96px 0;
}

.reserve-section .section-header,
.guest-section .section-header,
.contact-section .section-header{
  text-align: center;
  margin-bottom: 52px;
}

.reserve-section .eyebrow,
.guest-section .eyebrow{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 24px;
  color: #E8C400;
  margin-bottom: 14px;
}

.reserve-section .section-header h2,
.guest-section .section-header h2,
.contact-section .en-title{
  font-weight: 600;
  font-size: clamp(22px, 3.4vw, 28px);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  color: var(--purple);
}

.contact-section .en-title{
  font-family: 'Castoro', serif;
  font-weight: 400;
}

.reserve-section .section-header p,
.guest-section .section-header p,
.contact-section .lead{
  font-size: 13.5px;
  line-height: 2;
  color: var(--w-sub);
}

.contact-section .divider{
  width: 200px;
  height: 0;
  border-top: 3px solid var(--w-lilac);
  margin: 14px auto 24px;
}

/* ---- タブ ---- */
.tabs{
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}

.tab-btn{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 13.5px;
  letter-spacing: 0.15em;
  padding: 14px 34px;
  border-radius: 999px;
  border: 1px solid var(--w-line);
  background: #fff;
  color: var(--w-sub);
  cursor: pointer;
  transition: all .35s ease;
}
.tab-btn.active{
  background: var(--w-yellow);
  border-color: var(--w-yellow);
  color: var(--purple);
  font-weight: 500;
}

.form-panel{ display: none; }
.form-panel.active{ display: block; }

.form-card{
  background: #fff;
  border: 1px solid var(--w-line);
  border-radius: 12px;
  padding: 52px 56px;
  box-shadow: 0 30px 60px -40px rgba(45,0,77,0.18);
}

.form-intro{
  text-align: center;
  font-size: 13px;
  line-height: 2;
  color: var(--w-sub);
  margin-bottom: 40px;
  padding-bottom: 36px;
  border-bottom: 1px dashed var(--w-line);
}

.form-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 26px;
}
.form-row.single{ grid-template-columns: 1fr; }

.field label{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  color: var(--purple);
}

.field label .req{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 10px;
  letter-spacing: 0.05em;
  background: var(--w-lavender);
  color: var(--purple);
  padding: 3px 8px;
  border-radius: 999px;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="date"],
.field select,
.field textarea{
  width: 100%;
  font-family: 'Noto Serif JP', serif;
  font-size: 14px;
  padding: 13px 16px;
  border: 1px solid var(--w-line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--purple);
}

.field textarea{ resize: vertical; min-height: 110px; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline: none;
  border-color: var(--w-lavender);
  background: #fff;
}

.pill-options{ display: flex; gap: 12px; flex-wrap: wrap; }
.pill-options input{ display: none; }
.pill-options label{
  margin: 0;
  font-size: 13px;
  padding: 11px 22px;
  border: 1px solid var(--w-line);
  border-radius: 999px;
  color: var(--w-sub);
  cursor: pointer;
  transition: all .25s ease;
}
.pill-options input:checked + label{
  background: var(--w-mint);
  border-color: var(--w-mint);
  color: var(--purple);
}

.agree{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: center;
  margin: 36px 0 32px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--w-sub);
  text-align: left;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.agree input{ margin-top: 3px; }
.agree a{ color: var(--purple); text-decoration: underline; }

.submit-wrap{ text-align: center; }

.btn-submit{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 14px;
  letter-spacing: 0.2em;
  padding: 17px 64px;
  border-radius: 999px;
  border: none;
  background: var(--w-yellow);
  color: var(--purple);
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease;
}
.btn-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(255,240,153,0.9);
}

@media (max-width: 640px){
  .form-card{ padding: 36px 24px; }
  .form-row{ grid-template-columns: 1fr; gap: 20px; }
  .tabs{ gap: 8px; }
  .tab-btn{ padding: 12px 22px; font-size: 12.5px; }
}

/* ================= ご列席者の方へ(アコーディオン) ================= */
.guest-section{ background: var(--paper); }

.accordion{ border-top: 1px solid var(--w-line); }
.acc-item{ border-bottom: 1px solid var(--w-line); }

.acc-head{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Noto Serif JP', serif;
  color: var(--purple);
}

.acc-num{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 22px;
  color: var(--w-lavender);
  width: 34px;
  flex-shrink: 0;
}

.acc-title{ flex: 1; font-size: 16px; letter-spacing: 0.08em; }
.acc-title .en{
  display: block;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--w-sub);
  margin-top: 4px;
}

.acc-icon{
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--w-mint);
  position: relative;
}
.acc-icon::before,
.acc-icon::after{
  content: "";
  position: absolute;
  background: var(--purple);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.acc-icon::before{ width: 10px; height: 1.4px; }
.acc-icon::after{ width: 1.4px; height: 10px; transition: transform .3s ease; }
.acc-item.open .acc-icon::after{ transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }

.acc-body{ max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.acc-item.open .acc-body{ max-height: 2400px; }

.acc-content{
  padding: 4px 8px 40px 54px;
  font-size: 13.5px;
  line-height: 2;
  color: var(--w-sub);
}

.info-table{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px 20px;
  margin-bottom: 8px;
}
.info-table dt{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--purple);
  background: var(--w-lilac);
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  height: fit-content;
}
.info-table dd{ color: var(--purple); }
.info-table dd a.tel{
  display: inline-block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--purple);
  text-decoration: none;
  border-bottom: 1px solid var(--w-lavender);
}
.tel-label{ display: block; font-size: 11.5px; color: var(--w-sub); margin-bottom: 4px; }
.tel-row + .tel-row{ margin-top: 14px; }

.sub-h{
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--purple);
  margin: 26px 0 12px;
  padding-left: 14px;
  border-left: 3px solid var(--w-yellow);
}
.sub-h:first-child{ margin-top: 0; }

.note{ font-size: 12px; color: #9a91b0; line-height: 1.9; }

.link-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  padding: 11px 24px;
  border: 1px solid var(--purple);
  border-radius: 999px;
  text-decoration: none;
  color: var(--purple);
  transition: all .3s ease;
}
.link-btn:hover{ background: var(--purple); color: #fff; }

.facility-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin-top: 4px;
}
.facility-grid li{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--purple);
}
.facility-grid li::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--w-lavender);
  flex-shrink: 0;
}

@media (max-width: 640px){
  .info-table{ grid-template-columns: 1fr; }
  .facility-grid{ grid-template-columns: 1fr; }
  .acc-content{ padding-left: 34px; }
  .acc-num{ width: 26px; font-size: 18px; }
}

/* ================= CONTACT US ================= */
.contact-section .field{ margin-bottom: 24px; }
.contact-section .form-row{ grid-template-columns: 1fr 1fr 1fr; margin-bottom: 0; }
.contact-note{
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--w-sub);
  margin: 24px 0;
}

@media (max-width: 700px){
  .contact-section .form-row{ grid-template-columns: 1fr; gap: 20px; }
}