.ttc-draw { max-width: 480px; margin: 0 auto; text-align: center; padding: 8px; }
.ttc-draw-stage { display: flex; justify-content: center; margin-bottom: 22px; perspective: 1000px; }
.ttc-draw-flip { position: relative; width: 200px; height: 320px; transition: transform 0.7s cubic-bezier(.4,.2,.2,1); transform-style: preserve-3d; }
.ttc-draw-flip.ttc-flipped { transform: rotateY(180deg); }
.ttc-draw-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; backface-visibility: hidden; border-radius: 14px; }
.ttc-draw-back { background: linear-gradient(160deg, #2C5C78, #173B50); border: 3px solid #E6C875; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.ttc-back-moon { font-size: 40px; animation: ttcFloat 3.2s ease-in-out infinite; }
.ttc-back-star { position: absolute; color: #9FD1E8; font-size: 14px; animation: ttcFloat 2.8s ease-in-out infinite; }
.ttc-bs-1 { top: 40px; left: 36px; animation-delay: .4s; }
.ttc-bs-2 { bottom: 50px; right: 40px; font-size: 11px; animation-delay: 1s; }
@keyframes ttcFloat { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-8px);} }
.ttc-draw-front { transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; }
.ttc-draw-front img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
.ttc-draw-title { color: #173B50; font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.ttc-draw-lead { color: #666; font-size: 14px; margin: 0 0 22px; line-height: 1.7; }
.ttc-draw-btn, .ttc-detail-btn, .ttc-retry-btn { display: inline-block; border: none; border-radius: 24px; padding: 13px 32px; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; }
.ttc-draw-btn, .ttc-detail-btn { background: #2C5C78; color: #fff; box-shadow: 0 4px 14px rgba(44,92,120,0.3); }
.ttc-draw-btn:hover, .ttc-detail-btn:hover { background: #173B50; transform: translateY(-1px); }
.ttc-retry-btn { background: #fff; color: #2C5C78; border: 1px solid #9FD1E8; margin-top: 12px; }
.ttc-retry-btn:hover { background: #F2F8FB; }
.ttc-preview { margin-top: 24px; background: #F2F8FB; border-radius: 14px; padding: 28px 22px; text-align: center; }
.ttc-preview-name { color: #173B50; font-size: 26px; font-weight: 700; margin: 0 0 8px; }
.ttc-preview-score { color: #E0A623; font-size: 34px; font-weight: 700; margin: 0 0 16px; }
.ttc-preview-message { color: #2C5C78; font-size: 17px; font-weight: 600; margin: 0 0 14px; line-height: 1.6; }
.ttc-preview-desc { color: #555; font-size: 15px; line-height: 1.8; margin: 0 0 18px; }

.ttc-result-wrap { max-width: 600px; margin: 0 auto; padding: 8px 4px 32px; }
.ttc-result-card, .ttc-recommend-card, .ttc-cta-card, .ttc-listing-card { background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(23,59,80,0.08); padding: 32px 26px; margin-bottom: 22px; }
.ttc-result-card { text-align: center; position: relative; overflow: hidden; padding-top: 56px; }
.ttc-result-card-band { position: absolute; top: 0; left: 0; right: 0; height: 64px; background: linear-gradient(135deg, #173B50, #2C5C78 60%, #173B50); display: flex; align-items: center; justify-content: center; gap: 10px; color: rgba(255,255,255,0.55); font-size: 13px; letter-spacing: 6px; }
.ttc-result-cardart { display: flex; justify-content: center; margin-bottom: 18px; }
.ttc-card-frame { display: inline-block; border-radius: 10px; overflow: hidden; border: 3px solid #E6C875; box-shadow: 0 4px 14px rgba(23,59,80,0.18); background: #173B50; }
.ttc-card-frame img { display: block; width: 100%; height: auto; }
.ttc-card-frame-lg { width: 160px; }
.ttc-card-frame-sm { width: 100%; max-width: 90px; }
.ttc-result-date { color: #888; font-size: 13px; margin: 0 0 4px; }
.ttc-result-name { color: #173B50; font-size: 28px; margin: 0 0 6px; }
.ttc-result-score { color: #E0A623; font-size: 30px; font-weight: 700; margin: 0; }
.ttc-result-score span { font-size: 14px; color: #aaa; font-weight: 400; }
.ttc-divider { height: 1px; background: linear-gradient(90deg, transparent, #DCEEF7, transparent); margin: 24px 0; }
.ttc-block-h2 { color: #2C5C78; font-size: 14px; font-weight: 700; text-align: left; letter-spacing: 0.05em; margin: 0 0 10px; }
.ttc-block-text { color: #333; line-height: 1.9; text-align: left; margin: 0; }
.ttc-lucky-row { display: flex; gap: 14px; text-align: left; }
.ttc-lucky-item { flex: 1; background: #F2F8FB; border-radius: 8px; padding: 14px; }
.ttc-lucky-label { display: block; color: #2C5C78; font-size: 11px; font-weight: 700; margin-bottom: 6px; }
.ttc-lucky-value { color: #173B50; font-size: 13px; line-height: 1.6; }
.ttc-lucky-num { font-size: 24px; font-weight: 700; }
.ttc-section-h2 { color: #173B50; font-size: 17px; margin: 0 0 18px; text-align: center; }
.ttc-recommend-grid { display: flex; flex-direction: column; gap: 14px; }
.ttc-recommend-item { display: flex; gap: 12px; text-decoration: none; align-items: center; }
.ttc-recommend-thumb { flex: 0 0 72px; width: 72px; height: 72px; border-radius: 8px; background-color: #DCEEF7; background-size: cover; background-position: center; }
.ttc-recommend-body { display: flex; flex-direction: column; }
.ttc-recommend-title { color: #173B50; font-size: 14px; font-weight: 700; line-height: 1.5; }
.ttc-recommend-excerpt { color: #888; font-size: 12px; margin-top: 3px; line-height: 1.5; }
.ttc-cta-grid { display: flex; flex-direction: column; gap: 12px; }
.ttc-cta-item { display: block; background: #F2F8FB; border: 1px solid #DCEEF7; border-radius: 10px; padding: 16px; text-decoration: none; transition: border-color 0.2s ease; }
.ttc-cta-item:hover { border-color: #2C5C78; }
.ttc-cta-title { display: block; color: #173B50; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.ttc-cta-desc { display: block; color: #888; font-size: 12px; }
@media screen and (min-width: 700px) { .ttc-cta-grid { flex-direction: row; } .ttc-cta-item { flex: 1; } }
.ttc-listing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.ttc-listing-item { display: flex; gap: 10px; align-items: center; background: #F2F8FB; border: 1px solid #DCEEF7; border-radius: 10px; padding: 12px; text-decoration: none; transition: border-color 0.2s ease; }
.ttc-listing-item:hover { border-color: #173B50; }
.ttc-listing-body { display: flex; flex-direction: column; }
.ttc-listing-name { display: block; color: #173B50; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.ttc-listing-meaning { display: block; color: #888; font-size: 11px; line-height: 1.5; }
@media screen and (max-width: 480px) {
  .ttc-draw-flip { width: 160px; height: 256px; }
  .ttc-result-name { font-size: 24px; }
  .ttc-lucky-row { flex-direction: column; }
}
/* 追加：カード名のかっこ装飾、今日の意味見出し、運勢見出しの装飾、ヒントボックス */
.ttc-result-name {
  display: inline-block;
  color: #173B50;
}
.ttc-result-name .ttc-bracket {
  color: #9FD1E8;
  font-weight: 400;
  margin: 0 0.08em;
}
.ttc-today-meaning {
  color: #2C5C78;
  font-size: 18px;
  font-weight: 700;
  margin: 6px 0 0;
}
.ttc-block-h2 {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ttc-block-h2::before {
  content: '\25C6';
  color: #9FD1E8;
  font-size: 10px;
}
.ttc-hint-box {
  background: #F2F8FB;
  border: 1.5px solid #9FD1E8;
  border-radius: 14px;
  padding: 24px 26px;
  text-align: left;
  box-shadow: 0 2px 10px rgba(44,92,120,0.06);
}
.ttc-hint-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #173B50;
  font-weight: 700;
  font-size: 15px;
  margin: 0 0 16px;
}
.ttc-hint-title::before {
  content: '\25C6';
  color: #9FD1E8;
  font-size: 10px;
}
.ttc-hint-list { margin: 0; }
.ttc-hint-item {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}
.ttc-hint-item:last-child { margin-bottom: 0; }
.ttc-hint-num {
  flex: 0 0 auto;
  width: 20px;
  color: #9FD1E8;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
}
.ttc-hint-text {
  flex: 1;
  color: #444;
  font-size: 14px;
  line-height: 1.8;
}

/* ドロー画面：カードをタップで回転させる */
.ttc-draw-stage { cursor: pointer; }
/* 見出し付きボックス（占うときのヒント用） */
.cstm-box-titled {
   --box-color: #2C5C78;
   margin: 0;
   border: 1px solid var(--box-color);
   max-width: 800px;
   border-radius: 8px;
   overflow: hidden;
}
.cstm-box-titled .box-title {
   background-color: var(--box-color);
   color: #fff;
   padding: 0.6em 1em;
   text-align: center;
   font-weight: bold;
}
.cstm-box-titled .box-content {
   padding: 1.6em 1.8em;
   background: #fff;
}
.cstm-box-titled p { margin:0; }