@charset "UTF-8";
/* ==========================================================================
   extra.css — design.css（テンプレ移植）の補完
   slick / jQuery を使わない実装に合わせた差分のみを書く。
   design.css は極力そのままにしておくこと。
   ========================================================================== */

/* ==========================================================================
   ブランド配色の上書き
   Tashinam のエンジ #872c30 ＋ ロゴの金 #e9cb90 に差し替える。
   テンプレは「ベージュ地 #cdbaa7 ＋ 白」だったので、
   ・地 → エンジ
   ・写真やエンジ地に乗る装飾文字 → 金
   ・白カードの上に乗る文字・記号 → エンジ
   の3系統に振り分けている。design.css は触らずここで上書きする。
   ========================================================================== */
:root {
  --brand: #872c30;
  --gold: #e9cb90;
}

/* ---- 地の色 ---- */
.ssp-page { background-color: var(--brand); }

.tm-hero { background-color: var(--brand); }

.tm-hero::after {
  background: linear-gradient(0deg, var(--brand) 30%, rgba(135, 44, 48, 0) 100%);
}

/* ---- 写真・エンジ地に乗る装飾文字 → 金 ---- */
#svg-01 .svg-text-white,
#svg-02 .svg-text-white {
  fill: var(--gold);
}

.tm-hero-text-02-sub,
.tm-hero-text-03 { color: var(--gold); }

.tm-hero-text-01-line { background-color: var(--gold); }

.tm-countdown-goaldate .year,
.tm-countdown-goaldate .date { color: var(--gold); }

.tm-countdown-text-text { fill: var(--gold); }

/* ---- 白カードの上に乗るもの → エンジ ---- */
#svg-04 .svg-text-white,   /* Host */
#svg-08 .svg-text-white,   /* Presence or Absence */
#svg-04 g[class*="text"],
#svg-08 g[class*="text"] {
  fill: var(--brand);
}

.tm-host-text { color: var(--brand); }

.tm-host-item-img-shape { background-image: conic-gradient(var(--brand) 0deg, white 0deg); }
.tm-host-item-img-shape.is-animated { background-image: conic-gradient(var(--brand) 365deg, white 365deg); }

.tm-poa-star svg { fill: var(--brand); }
.tm-poa-sub-title { color: var(--brand); }
.tm-poa-thanks p { color: var(--brand); }
#svg-thanks-poa .svg-text-white { fill: var(--brand); }

.tm-information-detail-inner .ttl-01 {
  color: #fff;
  background-color: var(--brand);
}

.tm-information-place p .ttl { color: var(--brand); }

.form-Main_Button {
  color: var(--brand);
  border-color: var(--brand);
}

.form-Main_Group-required .form-Main_Key::after { background: var(--brand); }

.radio:checked + span:before,
.radio:checked + .radioLever:before,
.checkbox:checked + span:before,
.checkbox:checked + .checkboxLever:before { color: var(--brand); }

.form-Main_Attendance_Item input:checked + .form-Main_AttendanceTextWrapper { color: var(--brand); }

/* ---- ページ表示の保険 --------------------------------------------------
   design.css の .ssp-page は visibility:hidden / opacity:0 で始まり、
   JSが .is-entered を付けて初めて表示される。JSが走らないと
   「ベージュの空白ページが出て何も起きない」状態になるため、
   CSSアニメーションで必ず表示に倒す。JSが正常なら従来どおりフェードイン。 */
.ssp-page {
  animation: ssp-fallback-show 0s linear 1.2s forwards;
}

@keyframes ssp-fallback-show {
  to { visibility: visible; opacity: 1; }
}

/* ---- ヒーローの文字を写真から浮かせる ----------------------------------
   参照テンプレのデモ写真は「白い床の広い平面」で、ベージュ(#cdbaa7)の文字が
   そのまま読めた。実写真は中間調が多く文字が沈むため、ごく薄い影を敷く。
   明るい背景ではほぼ見えず、暗部に乗ったときだけ効く。 */
.tm-hero-text-01 svg,
.tm-hero-text-02 svg {
  filter: drop-shadow(0 1px 10px rgba(60, 45, 30, 0.38));
}

.tm-hero-text-03,
.tm-hero-text-02-sub {
  /* 近い影で輪郭を立て、遠い影で背景を沈める */
  text-shadow:
    0 0 2px rgba(60, 45, 30, 0.55),
    0 1px 14px rgba(60, 45, 30, 0.70);
}

/* お名前・日付の背後だけ、ごく薄く沈める。
   白いドレスなど明るい被写体に重なっても読めるようにするため。
   テンプレがヒーロー下部にグラデを敷いているのと同じ考え方。 */
.tm-hero-text-03 { isolation: isolate; }

.tm-hero-text-03::before {
  content: "";
  position: absolute;
  inset: -1.4em -1.2em -1.2em -1.6em;
  z-index: -1;
  background: radial-gradient(
    ellipse at 60% 50%,
    rgba(45, 34, 24, 0.42) 0%,
    rgba(45, 34, 24, 0.26) 45%,
    rgba(45, 34, 24, 0) 78%
  );
  pointer-events: none;
}

/* ---- ヒーローのスライド（slickのfade相当を素のCSSで） ------------------ */
.tm-hero-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 750/1364;
}

.tm-hero-slider-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}

.tm-hero-slider-item.is-active { opacity: 1; }

/* ---- アルバムのカルーセル（slick centerMode 相当） --------------------- */
.tm-message-gallery .gl-list {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.tm-message-gallery .gl-track {
  display: flex;
  align-items: center;
  will-change: transform;
}

.tm-message-gallery .tm-message-gallery-item {
  /* JSが幅を実測して上書きする。JSが動かなくても崩れないよう既定値を置く */
  flex: 0 0 64%;
  opacity: 0.6;
  transition: opacity 0.35s ease;
}

.tm-message-gallery .tm-message-gallery-item.is-center { opacity: 1; }

.tm-message-gallery .tm-message-gallery-item img {
  transform: scale(var(--scale-side));
}

.tm-message-gallery .tm-message-gallery-item.is-center img {
  transform: scale(var(--scale-center));
}

.tm-message-gallery .gl-dots {
  display: flex;
  gap: 1px;
  justify-content: center;
  margin-top: 3.5em;
  padding: 0;
  list-style: none;
}

.tm-message-gallery .gl-dots li {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-message-gallery .gl-dots li button {
  width: var(--dot-size);
  height: var(--dot-size);
  padding: 0;
  color: #fff;
  background: currentcolor;
  border: 0;
  border-radius: 50%;
  opacity: 0.65;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.tm-message-gallery .gl-dots li.is-active button {
  opacity: 1;
  transform: scale(var(--dot-active-scale));
}

/* ---- カウントダウンの円 ------------------------------------------------
   参照テンプレでは写真を円の背景に敷いている（ページ内インラインstyle）。
   images/countdown.jpg を差し替えれば反映される。 */
#countdown .tm-countdown-circle {
  width: auto !important;
  background: url("../images/countdown.jpg") no-repeat center center / cover !important;
}

/* 円の背景が写真なので、ヒーローと同じくベージュ文字を浮かせる */
.tm-countdown-goaldate .year,
.tm-countdown-goaldate .date {
  text-shadow:
    0 0 2px rgba(45, 34, 24, 0.45),
    0 1px 16px rgba(45, 34, 24, 0.65);
}

.tm-countdown-text svg {
  filter: drop-shadow(0 1px 8px rgba(45, 34, 24, 0.55));
}

/* 数字と "Count Down" は濃色なので、逆に白側で抜く */
.tm-countdown-title span,
.tm-countdown-limitnumber,
.tm-countdown-limitunit {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.75);
}

/* ---- Information：補足文（text-07）と地図 ------------------------------ */
.tm-information-detail-inner .text-07 {
  display: block;
  margin-top: 0.6em;
  color: #7a7a7a;
  line-height: 1.7;
}

.tm-information-map iframe { border: 0; }

.tm-information-place p .ttl { white-space: nowrap; }

/* ---- Host：肩書き・本文 ------------------------------------------------ */
.tm-host-item-title {
  color: #7a7a7a;
  letter-spacing: 0.18em;
}

.tm-host-item-text-02 {
  padding: 0 1em;
  font-size: 3.4667vw;
  line-height: 2;
  color: #434343;
}

@media (width >= 750px), print {
  .tm-host-item-text-02 { font-size: 20px; }
}

/* ---- 出欠フォーム周り -------------------------------------------------- */
.tm-poa-form {
  color: #434343;
  text-align: left;
}

.form-Main_CompanionRow {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.form-Main_CompanionRow .input { flex: 1 1 auto; }
.form-Main_CompanionRow .select-wrap { flex: 0 0 auto; }

#addCompanion {
  padding: 0.6em 1.2em;
  font-family: inherit;
  color: var(--brand);
  cursor: pointer;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-Main_Value > label { display: inline-flex; align-items: center; }

/* iOSで入力時にページが拡大されないよう16px以上を強制（参照テンプレと同じ） */
input[type=text],
input[type=tel],
input[type=email],
textarea,
select {
  font-size: 16px !important;
}

/* 送信ボタンはテンプレのピンクではなくブランド色に合わせる */
.form-Main_Button {
  color: var(--brand);
  border-color: var(--brand);
  padding-left: 3em;
}

.form-Main_Button::before { display: none; }

.form-Main_Attendance_Item input:checked + .form-Main_AttendanceTextWrapper {
  color: #000;
  background: url("../images/btn_back.png") no-repeat center center/contain;
}

/* 送信完了 */
.tm-poa-thanks {
  padding: 2em 0 1em;
  text-align: center;
}

.tm-poa-thanks svg { width: 70%; margin: 0 auto 1.5em; }

.tm-poa-thanks p {
  font-size: 3.7333vw;
  line-height: 2.2;
  color: var(--brand);
}

@media (width >= 750px), print {
  .tm-poa-thanks p { font-size: 22px; }
}

/* ---- フッター ---------------------------------------------------------- */
.tm-footer-logo { width: 45%; margin: 0 auto 2em; }

/* ---- アクセス ---------------------------------------------------------- */
/* Information の白地カードの上に置く。基準は body の 3.2vw（750px以上でpx固定）。 */
.tm-access {
  margin: 3.5em auto 0;
  padding: 0 1em;
  max-width: 640px;
}

.tm-access-title {
  text-align: center;
  margin-bottom: 1.8em;
}

/* Information セクションはエンジ地。文字は金と白、カードは白で抜く。 */
.tm-access-title > span:first-child {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 5.6vw;
  letter-spacing: .18em;
  color: var(--gold);
}

.tm-access-title .sub {
  display: block;
  margin-top: .6em;
  font-size: 3.2vw;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .82);
}

.tm-access-card {
  border-radius: 6px;
  padding: 1.4em 1.3em;
  margin-bottom: 1.5em;
  background: #fff;
}

.tm-access-card-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6em;
  font-size: 4vw;
  font-weight: 500;
  color: var(--brand);
  padding-bottom: .9em;
  margin-bottom: .3em;
  border-bottom: 1px solid rgba(135, 44, 48, .16);
}

.tm-access-badge {
  flex: none;
  font-size: 2.9vw;
  letter-spacing: .06em;
  color: #fff;
  background: var(--brand);
  border-radius: 2px;
  padding: .35em .7em;
}

.tm-access-way { padding-top: 1.1em; }

.tm-access-way-head {
  display: flex;
  align-items: baseline;
  gap: .5em;
  font-size: 3.7vw;
  font-weight: 500;
  color: #3d3330;
  margin-bottom: .5em;
}

.tm-access-icon { font-size: 4.2vw; line-height: 1; }

.tm-access-time {
  margin-left: auto;
  font-size: 3.2vw;
  color: var(--brand);
  letter-spacing: .04em;
}

.tm-access-way-body {
  font-size: 3.4vw;
  line-height: 2;
  color: #4a403c;
}

.tm-access-way-body b {
  font-weight: 500;
  color: var(--brand);
}

.tm-access-note {
  display: inline-block;
  margin-top: .4em;
  font-size: 3vw;
  line-height: 1.9;
  color: #7b6f69;
}

.tm-access-foot {
  font-size: 3.1vw;
  line-height: 2;
  color: rgba(255, 255, 255, .82);
  text-align: center;
  margin-top: 1.6em;
}

@media (width >= 750px), print {
  .tm-access { padding: 0; }
  .tm-access-title > span:first-child { font-size: 34px; }
  .tm-access-title .sub { font-size: 15px; }
  .tm-access-card-head { font-size: 19px; }
  .tm-access-badge { font-size: 13px; }
  .tm-access-way-head { font-size: 17px; }
  .tm-access-icon { font-size: 19px; }
  .tm-access-time { font-size: 15px; }
  .tm-access-way-body { font-size: 16px; }
  .tm-access-note { font-size: 14px; }
  .tm-access-foot { font-size: 14px; }
}

/* ---- 会場紹介 ---------------------------------------------------------- */
.tm-venue {
  background: #f7f3ee;
  padding: 4em 0 4.5em;
}

.tm-venue-inner { max-width: 640px; margin: 0 auto; padding: 0 1.2em; }

.tm-venue-title { text-align: center; margin-bottom: 2em; }

.tm-venue-title > span:first-child {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 6.4vw;
  letter-spacing: .2em;
  color: var(--brand);
}

.tm-venue-title .sub {
  display: block;
  margin-top: .7em;
  font-size: 3.2vw;
  letter-spacing: .12em;
  color: #7b6f69;
}

.tm-venue-lead {
  text-align: center;
  font-size: 5vw;
  line-height: 1.7;
  color: var(--brand);
  margin-bottom: 1.6em;
}

.tm-venue-lead .en {
  display: block;
  margin-top: .5em;
  font-family: "Poppins", sans-serif;
  font-size: 2.9vw;
  letter-spacing: .3em;
  color: #a89a92;
}

.tm-venue-text {
  font-size: 3.5vw;
  line-height: 2.3;
  color: #4a403c;
  text-align: center;
}

.tm-venue-note {
  display: inline-block;
  font-size: 3.1vw;
  line-height: 2;
  color: #7b6f69;
}

.tm-venue-block { margin-top: 3em; }

.tm-venue-subtitle {
  text-align: center;
  font-size: 4.2vw;
  letter-spacing: .12em;
  color: var(--brand);
  margin-bottom: 1.2em;
}

.tm-venue-subtitle span {
  display: inline-block;
  padding-bottom: .5em;
  border-bottom: 1px solid rgba(135, 44, 48, .3);
}

/* 写真枠。写真が無ければこの要素自体が出力されない。 */
.tm-venue-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4em;
  margin: 2.2em 0;
}

.tm-venue-photo { margin: 0; }

.tm-venue-photo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.tm-venue-photo figcaption {
  margin-top: .5em;
  font-size: 2.8vw;
  line-height: 1.7;
  color: #7b6f69;
  text-align: center;
}

.tm-venue-link { text-align: center; margin-top: 2.6em; }

.tm-venue-link a {
  font-size: 3.2vw;
  letter-spacing: .08em;
  color: var(--brand);
  border-bottom: 1px solid rgba(135, 44, 48, .4);
  padding-bottom: .2em;
}

@media (width >= 750px), print {
  .tm-venue-inner { padding: 0; }
  .tm-venue-title > span:first-child { font-size: 38px; }
  .tm-venue-title .sub { font-size: 15px; }
  .tm-venue-lead { font-size: 26px; }
  .tm-venue-lead .en { font-size: 13px; }
  .tm-venue-text { font-size: 16px; }
  .tm-venue-note { font-size: 14px; }
  .tm-venue-subtitle { font-size: 21px; }
  .tm-venue-photo figcaption { font-size: 13px; }
  .tm-venue-link a { font-size: 15px; }
}