/* ============================================
   MUSEUM - KEN MIYAKE  共通スタイル
   ============================================ */

/* ---- リセット・共通 ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

body {
  background-color: #f8f8f8;
  color: #333;
  font-family: "helvetica-neue-lt-pro", "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

/* ============================================
   出現演出（下から立ち上がる）
   ============================================ */
/* マスクから本体がせり上がる（ロゴ・テキスト用） */
.logo-mask,
.reveal-mask {
  display: inline-block;
  overflow: hidden;
  line-height: 0;
}

.reveal-up {
  display: inline-block;
  transform: translateY(110%);
  animation: revealUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0s);
  will-change: transform;
}

@keyframes revealUp {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* フェードしながら下からスライドイン（テキスト・ブロック用） */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- テキストリンク hover：slideUp ----
   ホバーで文字が上にスライドし、同じ文字に入れ替わる。
   複製を absolute(top:100%) に置き translateY(-100%) で送るため
   1行・複数行・高さ違いを問わず崩れない。 */
.slideUp {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  vertical-align: bottom;
}

.slideUp__cur,
.slideUp__new {
  display: block;
  transition: transform 0.24s ease-out;
}

.slideUp__new {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

.contact-btn:hover .slideUp__cur,
.contact-btn:hover .slideUp__new,
.insta-link:hover .slideUp__cur,
.insta-link:hover .slideUp__new,
.info-link:hover .slideUp__cur,
.info-link:hover .slideUp__new,
.about-info:hover .slideUp__cur,
.about-info:hover .slideUp__new,
.modal-close:hover .slideUp__cur,
.modal-close:hover .slideUp__new,
.top-page-link:hover .slideUp__cur,
.top-page-link:hover .slideUp__new {
  transform: translateY(-100%);
}

/* 日本語本文用 */
.jp,
.modal-title,
.modal-sub,
.form-intro,
.form-field select,
.form-field input,
.form-field textarea {
  font-family: yu-gothic-pr6n, 'Yu Gothic', '游ゴシック', YuGothic, sans-serif;
  font-weight: 400;
}

/* ============================================
   TOPページ
   ============================================ */
.top {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.top-logo {
  position: absolute;
  top: calc(50% - 20px);
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 393px;
}

.logo-museum {
  width: 393px;
  height: auto;
  aspect-ratio: 393 / 64;
}

.logo-miyake {
  width: 226px;
  height: auto;
  padding-left: 2px;
  aspect-ratio: 226 / 11;
}

/* ロゴを accent 色で塗る（index.htmlの色パターン用・マスク） */
.logo-fill {
  background-color: var(--accent, #ffffff);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.logo-fill.logo-museum {
  -webkit-mask-image: url(../assets/logo_museum.svg);
  mask-image: url(../assets/logo_museum.svg);
}

.logo-fill.logo-miyake {
  -webkit-mask-image: url(../assets/logo_miyake.svg);
  mask-image: url(../assets/logo_miyake.svg);
}

/* ロゴ下の識別番号（ACC.0001） */
.top-acc {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 70px;
  margin-left: -2px;
}

.acc-text {
  font-family: "helvetica-neue-lt-pro", "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--accent-50, rgba(255, 255, 255, 0.5));
  white-space: nowrap;
}

/* ACC.0001：KEN MIYAKEの後に、じんわり滲みながら現れて鮮明になる */
.acc-fade {
  opacity: 0;
  filter: blur(8px);
  animation: accFade 3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
  will-change: opacity, filter;
}

@keyframes accFade {
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.top-footer {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  white-space: nowrap;
}

.contact-btn,
.insta-link,
.footer-id,
.credit {
  font-family: "helvetica-neue-lt-pro", "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #333;
  line-height: 1;
}

.contact-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* 英字UIラベルは大文字表示 */
.contact-btn,
.insta-link,
.modal-close,
.top-page-link,
.form-label-en {
  text-transform: uppercase;
}

/* ============================================
   TOPページ：写真／映像バージョン（index2 / index3）
   ============================================ */
/* 背景メディア：中央クロップ → 全画面 */
.intro-media {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* PC/SP画像切替（picture）用：コンテナいっぱいに */
.intro-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.intro-media__el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(38.6%);
  transform: scale(0.6);
  transition: clip-path 1.3s cubic-bezier(0.85, 0, 0.15, 1),
              transform 1.3s cubic-bezier(0.85, 0, 0.15, 1);
  will-change: clip-path, transform;
}

.intro-expanded .intro-media__el {
  clip-path: inset(0);
  transform: scale(1);
}

/* 本文（ロゴ・フッター）をメディアの上に */
.top-media .top {
  position: relative;
  z-index: 1;
}

/* 全画面化が終わるまでロゴ・テキストは出現させない */
.top-media .reveal-up,
.top-media .acc-fade {
  animation-play-state: paused;
}

.top-media.intro-revealed .reveal-up,
.top-media.intro-revealed .acc-fade {
  animation-play-state: running;
}

/* 白バージョン：ロゴ・テキストを白（index.htmlは --accent で上書き） */
.top-media-white .footer-id,
.top-media-white .credit,
.top-media-white .contact-btn,
.top-media-white .insta-link {
  color: var(--accent, #ffffff);
}

/* imgロゴ（index3など）は filter で白に。index.htmlのマスクロゴには適用しない */
.top-media-white img.logo-museum,
.top-media-white img.logo-miyake {
  filter: brightness(0) invert(1);
}

/* ============================================
   モーダル
   ============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.is-open {
  opacity: 1;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--overlay, rgba(248, 248, 248, 0.95));
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.modal-content {
  position: relative;
  z-index: 1;
  width: 370px;
  height: 130px;
  border: 1px solid #000000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* hover：黒が下から迫り上がり、out時は上へ抜ける */
.modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000000;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.85, 0, 0.15, 1);
}

.modal-content:hover::before {
  transform: scaleY(1);
  transform-origin: bottom;
}

.modal-content:hover .modal-title,
.modal-content:hover .modal-sub {
  color: #ffffff;
}

.modal-link {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0 20px;
}

/* モーダル内テキストはオープン時にマスクでせり上がる（毎回再生） */
.modal .reveal-up {
  animation: none;
  transform: translateY(110%);
}

.modal.is-open .reveal-up {
  animation: revealUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0s);
}

.modal-title {
  display: block;
  font-size: 18px;
  color: #000;
  line-height: 1.5;
  transition: color 0.3s ease-out;
}

.modal-sub {
  display: block;
  font-size: 11px;
  color: #000;
  line-height: 1.5;
  transition: color 0.3s ease-out;
}

.modal-close {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: "helvetica-neue-lt-pro", "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #333;
}

.close-icon {
  font-size: 16px;
  line-height: 1;
}

/* ---- ABOUTモーダル（index4：枠なし・中央テキスト） ---- */
.about-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  padding: 0 24px;
}

/* 段落ごとにマスク出現させるためのまとまり */
.about-text-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 段落内は1行ずつ（reveal-mask）を縦に積む。行間はline-heightで確保 */
.about-para {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* PC＝結合行 / SP＝分割行 を出し分け */
.about-para .sp-only {
  display: none;
}

@media (max-width: 767px) {
  .about-para .pc-only {
    display: none;
  }
  .about-para .sp-only {
    display: inline-block;
  }
}

.about-text {
  max-width: 600px;
  font-family: yu-gothic-pr6n, 'Yu Gothic', '游ゴシック', YuGothic, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  color: #000;
}

/* PC/SPで改行位置を出し分け（SP専用の改行） */
.br-sp {
  display: none;
}

@media (max-width: 767px) {
  .br-sp {
    display: inline;
  }
}

/* 〜428pxはvw、それ以上はpx（ABOUT本文18px / ACC 11px） */
@media (max-width: 428px) {
  .about-text {
    font-size: 3.8vw;
  }
  .acc-text {
    font-size: 2.2vw;
  }
}

.about-info {
  font-family: "helvetica-neue-lt-pro", "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
}

/* ============================================
   右上メニュー（+ボタン → パネル展開）
   ============================================ */
.menu {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 150px;
  height: 160px;
  z-index: 900;
  pointer-events: none;
}

.menu-panel {
  position: absolute;
  inset: 0;
  background-color: var(--accent, #ffffff);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s cubic-bezier(0.85, 0, 0.15, 1);
  pointer-events: none;
}

.menu.is-open .menu-panel {
  clip-path: inset(0);
  pointer-events: auto;
}

.menu-nav {
  position: absolute;
  top: 44px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.menu-link {
  font-family: "helvetica-neue-lt-pro", "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  color: #333;
  transition: opacity 0.2s ease;
}

.menu-link:hover {
  opacity: 0.55;
}

/* +/− トグル */
.menu-toggle {
  position: absolute;
  top: 5px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
}

.menu-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: #1e1e1e;
  border-radius: 10px;
  transform: translate(-50%, -50%);
  transition: transform 0.4s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.3s ease;
}

.menu-bar--v {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* オープン時：縦バーを消して「−」に */
.menu.is-open .menu-bar--v {
  transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
  opacity: 0;
}

/* メニューリンクはオープン時にマスクでせり上がる（毎回再生） */
.menu .reveal-up {
  animation: none;
  transform: translateY(110%);
}

.menu.is-open .reveal-up {
  animation: revealUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--d, 0s);
}

/* 写真/映像版：閉じている時のバーは accent（既定は白）、開くとパネル上で黒 */
.top-media-white .menu-bar {
  background-color: var(--accent, #ffffff);
}

.top-media-white .menu.is-open .menu-bar {
  background-color: #1e1e1e;
}

/* ============================================
   CONTACTページ
   ============================================ */
.contact-page {
  min-height: 100%;
  background-color: #f8f8f8;
}

.contact-header {
  text-align: center;
  padding-top: 93px;
}

.contact-logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
}

.contact-logo-museum {
  width: 320px;
  height: auto;
}

.contact-logo-miyake {
  width: 184px;
  height: auto;
}

.contact-main {
  padding-bottom: 80px;
}

.form-card {
  width: 800px;
  max-width: 100%;
  margin: 98px auto 0;
  background-color: #ffffff;
  padding: 51px 60px 65px;
}

.form-label-en {
  font-family: "helvetica-neue-lt-pro", "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #333;
}

.form-intro {
  font-size: 13px;
  line-height: 1.8;
  color: #000;
  margin-top: 14px;
}

.form-divider {
  border: none;
  border-top: 1px solid #b8b8b8;
  margin: 44px 0;
}

/* ---- Thank you ページ ---- */
.thanks-card {
  text-align: center;
  padding-top: 108px;
  padding-bottom: 108px;
}

.thanks-title {
  font-family: "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

.thanks-text {
  font-family: yu-gothic-pr6n, 'Yu Gothic', '游ゴシック', YuGothic, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  color: #000;
  margin-top: 22px;
}

/* ---- フォーム ---- */
.form-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.form-label {
  flex: 0 0 240px;
  width: 240px;
  font-family: yu-gothic-pr6n, 'Yu Gothic', '游ゴシック', YuGothic, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #000;
  padding-top: 15px;
}

.form-field {
  flex: 0 0 440px;
  width: 440px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background-color: #fff;
  border: 1px solid #b8b8b8;
  border-radius: 5px;
  font-size: 13px;
  color: #333;
  padding: 0 16px;
}

.form-field input,
.form-field select {
  height: 55px;
}

.form-field textarea {
  height: 300px;
  padding: 16px;
  resize: vertical;
  font-family: yu-gothic-pr6n, 'Yu Gothic', '游ゴシック', YuGothic, sans-serif;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #333;
}

/* ---- 添付ファイル ---- */
.form-field input[type="file"] {
  height: auto;
  min-height: 55px;
  padding: 14px 16px;
  line-height: 1.4;
  cursor: pointer;
}

.form-note {
  margin-top: 8px;
  font-family: yu-gothic-pr6n, 'Yu Gothic', '游ゴシック', YuGothic, sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.6;
  color: #888;
}

/* ---- select ▼アイコン ---- */
.select-wrap {
  position: relative;
}

.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 9px;
  height: 9px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.form-field select:invalid,
.form-field select option[disabled] {
  color: #999;
}

/* ---- reCAPTCHA(v2) ---- */
.recaptcha-area {
  margin: 8px 0 36px 240px;
}

.recaptcha-area .g-recaptcha {
  display: inline-block;
}

/* ---- 送信ボタン ---- */
.submit-btn {
  position: relative;
  overflow: hidden;
  display: block;
  width: 200px;
  height: 50px;
  margin: 0 auto;
  background-color: #f8f8f8;
  color: #000;
  font-size: 14px;
  font-family: "helvetica-neue-lt-pro", "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 400;
  border: 1px solid #000;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.3s ease-out;
}

/* hover：黒が下から迫り上がり、out時は上へ抜ける */
.submit-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #000000;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s cubic-bezier(0.85, 0, 0.15, 1);
}

.submit-btn:hover::before {
  transform: scaleY(1);
  transform-origin: bottom;
}

.submit-btn:hover {
  color: #ffffff;
}

.btn-label {
  position: relative;
  z-index: 1;
}

/* ---- top page リンク ---- */
.top-page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 60px;
  font-family: "helvetica-neue-lt-pro", "helvetica-lt-pro", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #333;
}

.arrow-icon {
  font-size: 15px;
  line-height: 1;
}

/* ============================================
   レスポンシブ（SP：767px以下）
   ============================================ */
/* 13pxのテキスト：狭い画面ではvwで縮小、13pxを上限に段差なく接続（clamp） */
@media (max-width: 767px) {
  .contact-btn,
  .insta-link,
  .footer-id,
  .credit,
  .modal-close,
  .top-page-link,
  .about-info,
  .menu-link,
  .thanks-text {
    font-size: clamp(11px, 3.8vw, 13px);
  }
}

@media (max-width: 767px) {
  /* TOP */
  .top-logo {
    width: 333px;
    max-width: 85vw;
    gap: 28px;
  }

  .logo-museum {
    width: 333px;
    max-width: 85vw;
  }

  .logo-miyake {
    width: 200px;
    max-width: 49.5vw;
    padding-left: 2px;
  }

  .top-acc {
    margin-top: 60px;
    margin-left: 0px;
  }

  .top-footer {
    bottom: 45px;
    padding: 0 31px;
  }

  /* 右上メニュー */
  .menu {
    top: 8px;
    right: 8px;
    width: 130px;
    height: 170px;
  }

  /* フッターのCONTACTのみ個別に左パディング */
  #contactBtn {
    padding-left: 3vw;
  }

  /* モーダル */
  .modal-content {
    width: 310px;
    height: 130px;
  }

  .modal-title {
    font-size: 16px;
  }

  .modal-close {
    bottom: 45px;
  }

  /* CONTACT */
  .contact-header {
    padding-top: 38px;
  }

  .contact-logo-link {
    gap: 14px;
  }

  .contact-logo-museum {
    width: 178px;
  }

  .contact-logo-miyake {
    width: 102px;
  }

  .form-card {
    width: calc(100% - 60px);
    margin: 50px auto 0;
    padding: 30px 20px;
  }

  .form-intro {
    font-size: 12px;
    line-height: 1.6;
    margin-top: 12px;
  }

  .form-divider {
    margin: 28px 0;
  }

  /* Thank you（SP） */
  .thanks-card {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  /* フォーム：縦並び */
  .form-row {
    flex-direction: column;
    margin-bottom: 15px;
  }

  .form-label {
    flex: none;
    width: 100%;
    font-size: 12px;
    padding-top: 0;
    padding-bottom: 10px;
  }

  .form-field {
    flex: none;
    width: 100%;
  }

  /* iOSの自動ズーム防止のため入力欄は16px（未満だとフォーカス時に拡大される） */
  .form-field input,
  .form-field select,
  .form-field textarea {
    font-size: 16px;
  }

  .form-field input,
  .form-field select {
    height: 50px;
  }

  .form-field textarea {
    height: 230px;
  }

  /* reCAPTCHA（固定304px）を画面幅に合わせて縮小・はみ出し防止 */
  .recaptcha-area {
    margin: 4px 0 28px 0;
    width: 100%;
    overflow: hidden;
  }

  .recaptcha-area .g-recaptcha {
    transform: scale(0.9);
    transform-origin: left top;
  }

  /* 送信ボタン：左揃え（フォームフィールドと左端を揃える） */
  .submit-btn {
    width: 180px;
    height: 45px;
    margin: 0;
    font-size: 12px;
  }

  .top-page-link {
    margin-top: 40px;
  }
}

/* ============================================
   [dev] テーマ切り替えボタン（テスト用）
   ============================================ */
.dev-toggle {
  display: none; /* テスト用ボタンは非表示（時間による自動切替は有効） */
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 2000;
  background: none;
  border: none;
  cursor: pointer;
  font-family: monospace;
  font-size: 13px;
  color: #999;
  padding: 4px;
  line-height: 1;
}

.dev-toggle:hover {
  opacity: 0.7;
}

/* ============================================
   ダークモード（文字色・背景色を反転）
   ============================================ */
html.dark body {
  background-color: #0d0d0d;
  color: #f0f0f0;
}

html.dark .contact-page {
  background-color: #0d0d0d;
}

/* 通常テキスト（#333 系） */
html.dark .contact-btn,
html.dark .insta-link,
html.dark .info-link,
html.dark .footer-id,
html.dark .credit,
html.dark .form-label-en,
html.dark .modal-close,
html.dark .top-page-link,
html.dark .about-info,
html.dark .menu-link,
html.dark .thanks-title {
  color: #f0f0f0;
}

/* 強調テキスト（#000 系） */
html.dark .modal-title,
html.dark .modal-sub,
html.dark .form-label,
html.dark .form-intro,
html.dark .about-text,
html.dark .thanks-text {
  color: #ffffff;
}

/* ロゴ（黒SVG → 白） */
html.dark .logo-museum,
html.dark .logo-miyake,
html.dark .contact-logo-museum,
html.dark .contact-logo-miyake {
  filter: brightness(0) invert(1);
}

/* カード・パネル（白 → ダーク） */
html.dark .form-card,
html.dark .menu-panel {
  background-color: #1a1a1a;
}

/* 区切り線・ボーダー */
html.dark .form-divider {
  border-top-color: #555;
}

/* フォーム入力欄 */
html.dark .form-field input,
html.dark .form-field select,
html.dark .form-field textarea {
  background-color: #1a1a1a;
  color: #f0f0f0;
  border-color: #555;
}

html.dark .form-field input:focus,
html.dark .form-field select:focus,
html.dark .form-field textarea:focus {
  border-color: #aaa;
}

html.dark .select-wrap::after {
  border-color: #aaa;
}

/* モーダル */
html.dark .modal-overlay {
  background-color: rgba(13, 13, 13, 0.99);
}

html.dark .modal-content {
  background-color: #0d0d0d;
  border-color: #ffffff;
}

html.dark .modal-content::before {
  background-color: #ffffff;
}

html.dark .modal-content:hover .modal-title,
html.dark .modal-content:hover .modal-sub {
  color: #0d0d0d;
}

/* 右上メニュー（+/− バーは白） */
html.dark .menu-bar,
html.dark .menu.is-open .menu-bar {
  background-color: #ffffff;
}

/* SENDボタン */
html.dark .submit-btn {
  background-color: #0d0d0d;
  color: #ffffff;
  border-color: #ffffff;
}

html.dark .submit-btn::before {
  background-color: #ffffff;
}

html.dark .submit-btn:hover {
  color: #0d0d0d;
}

/* 極小幅端末：reCAPTCHAをさらに縮小 */
@media (max-width: 360px) {
  .recaptcha-area .g-recaptcha {
    transform: scale(0.78);
    transform-origin: left top;
  }
}