/* ヘッダー全体 */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #f56918;
  z-index: 100;
  backdrop-filter: blur(5px);
}

/* 内部コンテナ */
.nav-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
}

/* ロゴ */
.logo a {
  font-size: 1.3rem;
  font-family: 'Cormorant Garamond', serif;
  color: #005d30;
  text-decoration: none;
  font-weight: bold;
}

/* ナビゲーションリスト */
.nav-list {
  list-style: none;
  display: flex;
  gap: 20px;
}
.nav-list li a {
  /*color: #9370DB;*/
  color: #005d30;
  text-decoration: none;
  font-size: 1rem;
  padding: 6px 12px;
  transition: background 0.3s, color 0.3s;
}
.nav-list li a:hover {
  background: #820073;
  color: rgb(8, 152, 193);
  border-radius: 4px;
}

/* メニューボタン（ハンバーガー） */
.menu-toggle {
  display: none;
  font-size: 1.6rem;
  background: none;
  color: #005d30;
  border: none;
  cursor: pointer;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .nav-list {
    position: absolute;
    top: 60px;
    right: 20px;
    color:#f56918;
    background: #5c1b4e;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    display: none;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
  }
  .nav-list.open {
    display: flex;
  }
  .menu-toggle {
    display: block;
  }
}

/* リセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: auto; /* ← ここが重要：スクロールを許可 */
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background-color: #f5f7fa;
  color: #333;
  line-height: 1.6;
  /* 背景動画がある場合は padding を一時的に無効化 */
  padding: 0;
}

/* 動画背景 */
#bg-video {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: -1;
  object-fit: cover;
  filter: brightness(0.7); /* 0.5 = 半分の明るさ */
}

/* オーバーレイ */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 74, 110, 0.4);
  z-index: 0;
}

/* オーバーレイ */
.overlay_yorokobi2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(175, 169, 112, 0.4);
  z-index: 0;
}

/* コンテンツ */
.container {
  max-width: 900px;
  margin: 60px auto 0 auto; /* ← 上に余白を追加 */
  position: relative;
  z-index: 1;
  padding: 20px;
}

h1 {
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  margin-bottom: 20px;
  color: #5899d2;
}

h3 {
  margin-top: 10px;
  color: #bfbfff;
}

.note1 {
  font-size: 20px;
  color: #ffcabd;
}

.note {
  color: #d4d4e2;
}

.sns-links {
  display: flex;
  justify-content: center; /* 中央寄せ */
  flex-wrap: wrap;         /* 横幅が足りない場合は折り返し */
  gap: 12px;               /* アイコン同士の間隔 */
  margin: 20px 0;          /* 上下余白 */
}

.sns-links img {
  width: 36px;       /* ここで統一サイズ（例：36px） */
  height: 36px;
  object-fit: cover; /* 元画像の縦横比を保ちつつ枠にフィット */
  border-radius: 8px; /* 角丸（不要なら削除） */
  transition: transform 0.2s;
}

.sns-links img:hover {
  transform: scale(1.1); /* ホバー時に少し拡大 */
}


/* アラート */
.alert {
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 20px;
}
.alert-error {
  background: #fdecea;
  color: #b71c1c;
}
.alert-success {
  background: #e8f5e9;
  color: #2e7d32;
}

/* フォームカード */
.form-card {
  background: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-top: 20px;
}
.form-card section {
  margin-bottom: 24px;
}

/* カレンダー */
.calendar {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  table-layout: fixed;           /* ← 列幅を内容に左右されないよう固定 */
}
.calendar th,
.calendar td {
  width: 14.285%;
  height: 50px;
  text-align: center;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
  font-size: 0.95rem;
}
.calendar th {
  background: #f2f2f2;
  font-weight: bold;
  color: #555;
}
.calendar td.available {
  background-color: #fdfdb6;
  cursor: pointer;
  transition: background 0.2s;
}
.calendar td.available:hover {
  background-color: #ffdc4e;
}
.calendar td.unavailable {
  background-color: #f0f0f0;
  color: #c0c0c0;
}

/* 時間リスト */
.time-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.time-item {
  flex: none; /* ← 幅の指定を無効にする */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  transition: border-color 0.2s;
}
.time-item:hover:not(.disabled) {
  border-color: #3498db;
}
.time-item.disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}
.time-item input {
  margin-right: 8px;
  accent-color: #3498db;
}

/* ユーザー情報フォーム */
.userinfo label {
  display: block;
  margin-bottom: 12px;
}
.userinfo input,
.userinfo textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 4px;
  font-size: 1rem;
  background: #fff;
  transition: border-color 0.2s;
}
.userinfo input:focus,
.userinfo textarea:focus {
  border-color: #3498db;
  outline: none;
}

.btn-submit {
  display: block;
  width: 100%;
  padding: 14px;
  background: #003333;
  color: #fff;
  font-size: 1.1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 10px;
}
.btn-submit:hover {
  background: #330033;
}

.profile-image {
  max-width: 250px;
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 20px auto;
  display: block;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 中筮ページ：結果の中央揃え用ラップ */
.result-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  gap: 16px;
  color: #bfbfff
}

.result {
  font-size: 18px;
  color: #bfbfff
  margin-top: 20px;
}

.result-box {
  font-size: 18px;
  color: #bfbfff;
  margin-bottom: 20px;
}

/* 結果テキストを大きく見やすく中央に */
.result-box p,
.final-result {
  font-size: 1.4rem;
  margin-top: 20px;
  text-align: center;
  color: #bfbfff;
  line-height: 1.6;
}

.refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  color:#C99DA5;
  font-size: 18px;
  border-radius: 50px; /* This makes it very round, adjust if needed */
  width: 100px;
  height: 100px;
  font-weight: bold;
  transition: 0.3s;
  box-shadow: 0px 2px 4px 0px rgba(119, 88, 88, 0.5);
  background-color: #6B3A65; /* Assuming you want a basic white background */
  background-image: linear-gradient(180deg, #3a656d, #3a656d);
  margin: auto; /* This centers the button horizontally */
}

.refresh-button:hover {
  transform: translateY(2px);
  box-shadow: 0 0 #B3737F
}

.sparkle {
  position: fixed;
  pointer-events: none;
  width: 4px;
  height: 4px;
  background: radial-gradient(circle, #ffc4fe 30%, #af25c7 80%, transparent 100%);
  border-radius: 50%;
  box-shadow:
    0 0 4px 1px #a410a1,
    0 0 6px 2px #d930af;
  z-index: 9999;
  animation: sparkle-fade 0.8s ease-out forwards;
  transform: translate(-50%, -50%);
  opacity: 0.9;
}

@keyframes sparkle-fade {
  0% {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
  }
  100% {
    opacity: 0;
    transform: scale(1.8) translate(-50%, -50%);
  }
}

/* レスポンシブ */
@media (max-width: 600px) {
  .profile-image { max-width: 80%; }
}
@media (max-width: 600px) {
  .time-item { flex: 1 1 100%; }
  .calendar th,
  .calendar td {
    height: 40px;
    font-size: 0.85rem;
  }
  .form-card { padding: 16px; }
}

/* ← チェックボックス/ラジオは入力欄スタイルをリセット */
.userinfo input[type="checkbox"],
.userinfo input[type="radio"] {
  width: auto !important;
  display: inline-block !important;
  margin: 0 6px 0 0 !important;  /* 文字との間隔だけ少し */
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  vertical-align: middle;
  accent-color: #3498db;         /* 任意：色 */
}

/* 任意：1行をより安定させたい場合（ラベルにクラスを付けたとき） */
.userinfo label.chk-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: auto !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
}

/* 追加: お試し選択時の見た目 */
.kanteisho-disabled {
  opacity: .55;
  color: #7a7a7a;
  cursor: not-allowed;
}
.kanteisho-disabled input { pointer-events: none; }
.note-inline { font-size: 12px; color: #7a7a7a; margin-left: .5rem; }

/* ============================= */
/* 追加: カレンダーの店舗タグ用CSS */
/* ============================= */

/* タグは日付数字の下に積む想定。セル内で上揃えにしてスペースを確保 */
.calendar td { vertical-align: top; padding: 4px 2px; }

/* タグのラッパー（縦積み・隙間） */
.calendar .tag-wrap {
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;           /* 中央寄せ（好みで left に変更可） */
  pointer-events: none;          /* セルクリックの邪魔をしない */
}

/* 店舗タグ本体：オレンジ楕円／2行（上：店舗名、下：時間） */
.calendar .shop-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #f39c12;
  color: #fff;
  border-radius: 9999px;         /* 楕円形に */
  padding: 2px 6px 3px;
  line-height: 1.15;
  max-width: calc(100% - 2px);
  box-shadow: 0 1px 1px rgba(0,0,0,.06);
  pointer-events: none;          /* タップがセルに届くように */
}

/* 1行目：店舗名（長い場合は省略） */
.calendar .shop-tag .shop-name {
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 2行目：時間（店舗名の下に小さめで） */
.calendar .shop-tag .shop-time {
  font-size: 11px;
  opacity: .95;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* モバイル最適化：さらにコンパクトに */
@media (max-width: 600px) {
  .calendar th,
  .calendar td { padding: 3px 1px; }
  .calendar .tag-wrap { margin-top: 2px; gap: 2px; }
  .calendar .shop-tag { padding: 2px 5px; line-height: 1.1; }
  .calendar .shop-tag .shop-name { font-size: 10.5px; }
  .calendar .shop-tag .shop-time { font-size: 9.5px; }
}

/* さらに狭い端末（〜360px）向けの最小サイズ */
@media (max-width: 360px) {
  .calendar .shop-tag { padding: 1px 4px; }
  .calendar .shop-tag .shop-name { font-size: 10px; }
  .calendar .shop-tag .shop-time { font-size: 9px; }
}

/* 追加: shop日マーカー & フォーム無効化見た目 */
.calendar td.shop-day { background: rgba(255,165,0,.15); border-color: rgba(255,165,0,.35); }
.form-card.shop-disabled { opacity:.55; pointer-events:none; }
.time-item.shop { background: rgba(255,165,0,.10); border: 1px dashed rgba(255,165,0,.5); }
.time-item .shop-name { display:block; font-weight:600; }
.time-item .shop-url  { display:block; }
.time-item .shop-time { display:block; }

/* ===== モーダル ===== */
.modal-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000;
}
.modal {
  display:none; position:fixed; inset:0; z-index:1001; pointer-events:none;
  align-items:center; justify-content:center;
}
.modal.show, .modal-backdrop.show { display:flex; }
.modal .modal-panel {
  pointer-events:auto; width:min(680px, 92vw); max-height:80vh; overflow:auto;
  background:#fff; border-radius:16px; padding:20px 18px; box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.modal .modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.modal .modal-title { font-size:18px; font-weight:700; }
.modal .modal-body  { display:grid; gap:12px; }
.shop-card {
  border:1px solid rgba(255,165,0,.5); border-radius:12px; padding:12px;
  background:rgba(255,165,0,.06);
}
.shop-card h4 { margin:0 0 6px; font-size:16px; }
.shop-card .shop-time { font-size:14px; }
.shop-card .shop-actions { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; border:none; cursor:pointer;
  background:#f56918; color:rgb(7, 12, 74); font-weight:600; text-decoration:none;
}
.btn-secondary { background:#4b5563; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

body.yorokobi {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  color: #333;
  line-height: 1.6;
  padding: 0;

  background-image: url("img/image_yorokobi.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body.yorokobi2 {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  color: #333;
  line-height: 1.6;
  padding: 0;
  background-image: url("img/image_yorokobi2.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.yorokobi-title {
  margin-bottom: 20px;   /* ←デフォルトより小さめ */
}


/* ボタン全体と結果表示の間隔を詰める */
.button-wrapper {
  margin-top: 0;         /* タイトルとの距離をなくす */
  margin-bottom: 20px;    /* 結果との距離を少しだけ */
  display: flex;
  justify-content: center;
}

/* ハートボタン本体 */
.heart {
  width: 100px;      /* 正方形を作る */
  height: 100px;
  position: relative;/* 疑似要素の基準 */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: grid;     /* テキストを中央配置 */
  place-items: center;
}

/* ハートを作る疑似要素（左右対称） */
.heart::before,
.heart::after {
  content: "";
  width: 50%;        /* 丸い部分の幅 */
  height: 80%;       /* 丸い部分の高さ */
  background: #E0548E;
  border-radius: 25px 25px 0 0; /* 上半分を丸く */
  position: absolute;
}

/* 左半分 */
.heart::before {
  transform: rotate(-45deg);
  left: 14%;
  top: 0;
}

/* 右半分 */
.heart::after {
  transform: rotate(45deg);
  right: 14%;
  top: 0;
}

/* 中央の文字 */
.heart > span {
  position: relative;
  top: -6px;
  z-index: 1;        /* ハートの上に表示 */
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  pointer-events: none; /* クリックはボタン本体へ */
}

/* ホバー演出（お好みで） */
.heart:hover {
  filter: brightness(1.1);
  transform: scale(1.05);
  transition: transform .2s ease, filter .2s ease;
}

.yorokobi-result-box {
  margin-top:10px; 
  padding:15px; 
  background:#8b00a7; 
  border-radius:10px;
}


.btn-yorokobi {
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:10px; border:none; cursor:pointer;
  background:#ac00a4; color:#ff97f6; font-weight:600; text-decoration:none;
}