:root{
  --bg:#f4efe6;
  --bg-soft:#fbf7f1;
  --card:#fffaf3;
  --card-strong:#fffdf8;

  --text:#1f2a37;
  --text-strong:#162133;
  --muted:#6f7b88;
  --line:rgba(45, 58, 72, 0.10);

  --brand-deep:#1b6f6b;
  --brand:#2fa6a0;
  --brand-soft:#76c9c0;
  --brand-pale:#dff4ef;

  --accent-gold:#d9b64d;
  --accent-gold-soft:#f7ebbf;

  --map:#1d9a8d;
  --route:#6c8fd8;

  --meter-base:#dfe8e2;
  --meter-1:#d9f2ec;
  --meter-2:#9dd7cb;
  --meter-3:#d9b64d;

  --shadow:0 12px 30px rgba(28, 39, 48, 0.10);
  --shadow-soft:0 8px 20px rgba(28, 39, 48, 0.06);
  --radius:22px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 28%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.48) 0%, rgba(255,255,255,0) 24%),
    linear-gradient(180deg, #eef2f6 0%, #edf1f4 52%, #e8edef 100%);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}

img{
  display:block;
  max-width:100%;
}

button,
input,
select{
  font:inherit;
}

button{
  cursor:pointer;
  border:none;
  background:none;
}

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

.hidden{
  display:none !important;
}

.siteHeader{
  padding:22px 16px 14px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(28,56,92,.96) 0%, rgba(41,77,118,.92) 100%);
  box-shadow:0 8px 24px rgba(17,32,54,.12);
}

.siteHeader h1{
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:38px;
  line-height:1.08;
  letter-spacing:.01em;
  color:#ffffff;
  font-weight:900;
}

.titleMark{
  color:#e34b3f;
  font-size:.9em;
  line-height:1;
  transform:translateY(-1px);
  text-shadow:0 2px 10px rgba(227,75,63,.28);
}

.tagline{
  margin:10px 0 0;
  color:rgba(255,255,255,.88);
  font-size:15px;
  font-weight:700;
}

.mainArea{
  width:min(100%, 860px);
  margin:0 auto;
  padding:12px 14px 40px;
}

.heroBox{
  background:
    radial-gradient(circle at 82% 12%, rgba(232,195,92,.10) 0%, rgba(232,195,92,0) 20%),
    radial-gradient(circle at 16% 10%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, rgba(255,252,246,.97) 0%, rgba(255,255,255,.93) 100%);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
  padding:18px;
  display:grid;
  gap:16px;
}

.heroTop{
  display:grid;
  gap:6px;
}

.heroTitle{
  margin:0;
  font-size:18px;
  line-height:1.42;
  font-weight:900;
  color:var(--brand-deep);
}

.entryGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.entryBtn{
  position:relative;
  width:100%;
  min-height:96px;
  border-radius:20px;
  padding:16px 18px;
  border:1px solid #d7dde5;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  box-shadow:var(--shadow-soft);
  background:#fff;
}

.primaryEntry{
  background:linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-blue-2) 100%);
  color:#fff;
  border:none;
}

.secondaryEntry{
  color:var(--brand-deep);
}

.entryIcon{
  flex:0 0 auto;
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  line-height:1;
  border-radius:18px;
}

.entryText{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  flex:1 1 auto;
}

.entryLabel{
  font-size:18px;
  line-height:1.15;
  font-weight:900;
}

.entrySub{
  font-size:13px;
  line-height:1.35;
  color:inherit;
  opacity:.92;
}

.selectEntry{
  overflow:hidden;
  position:relative;
  padding-right:56px;
}

.selectEntry select{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

.originInfoBox{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:74px;
  padding:14px 16px;
  border:1px solid #dde4ea;
  border-radius:20px;
  background:linear-gradient(180deg, #fcfcfa 0%, #f6f7f4 100%);
}

.originInfoText{
  font-size:16px;
  line-height:1.4;
  font-weight:800;
  color:#20406d;
}

.originInfoBtn{
  flex:0 0 auto;
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid #d7dde5;
  background:#fff;
  color:var(--brand-deep);
  font-size:20px;
  font-weight:900;
}

.filterGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
}

.filterCard select{
  width:100%;
  min-height:60px;
  border:2px solid #cad6e2;
  border-radius:17px;
  padding:0 48px 0 16px;
  background:linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
  color:#1d6f6b;
  font-size:16px;
  font-weight:900;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  box-shadow:0 6px 16px rgba(31,42,55,.05);
  cursor:pointer;
}

.heroActionStack{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}

.mainActionBtn{
  width:100%;
  min-height:56px;
  border-radius:17px;
  padding:0 16px;
  color:#ffffff;
  font-size:16px;
  font-weight:900;
  background:linear-gradient(180deg, #1d8f87 0%, #146d68 100%);
  box-shadow:0 12px 24px rgba(20,109,104,.24);
  border:1px solid rgba(10,70,66,.10);
  transition:.15s ease;
}

.topMapBtn{
  width:100%;
  min-height:50px;
  border-radius:17px;
  padding:0 16px;
  color:var(--brand-deep);
  font-size:15px;
  font-weight:900;
  border:1px solid rgba(18,33,61,.10);
  background:linear-gradient(180deg, #ffffff 0%, #f6fafb 100%);
}

.resultArea{
  margin-top:18px;
}

.resultHead h2{
  margin:0;
  font-size:20px;
  line-height:1.25;
  color:var(--brand-deep);
  font-weight:900;
}

.resultsMeta{
  margin:8px 0 0;
  font-size:13px;
  color:#6d7f93;
  font-weight:700;
}

#rankingList,
#ss25List{
  display:grid;
  gap:14px;
  margin-top:14px;
}

.ss25Area{
  margin-top:26px;
}

#rankingList .rankCard:first-child{
  background:
    radial-gradient(circle at 84% 14%, rgba(232,195,92,.20) 0%, rgba(232,195,92,0) 24%),
    radial-gradient(circle at 18% 0%, rgba(255,248,222,.90) 0%, rgba(255,248,222,0) 34%),
    linear-gradient(180deg, #fffaf0 0%, #ffffff 62%);
  border:2px solid #e3c04f;
  box-shadow:
    0 14px 30px rgba(16,24,40,.08),
    0 0 0 1px rgba(255,248,222,.55) inset;
}


.mainCol{
  min-width:0;
  padding-right:2px;
}
.titleRow{
  display:flex;
  align-items:flex-start;
  gap:0;
  margin-bottom:4px;
  min-width:0;
}

.rankNo{
  position:absolute;
  top:6px;
  right:6px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(180deg, #fff6d8 0%, #f2d56d 100%);
  color:#7a5a00;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  box-shadow:
    0 6px 14px rgba(122,90,0,.18),
    0 1px 0 rgba(255,255,255,.55) inset;
}

.onsenName{
  margin:0;
  min-width:0;
  font-size:30px;
  line-height:1.12;
  color:var(--brand-deep);
  font-weight:900;
  letter-spacing:-0.03em;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
.pref{
  margin-top:4px;
  color:#6a7f95;
  font-size:14px;
  line-height:1.35;
  font-weight:800;
}

.catchcopy{
  margin-top:8px;
  color:#233f5b;
  font-size:16px;
  line-height:1.5;
  font-weight:800;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.subMetaRow{
  display:none;
}

.distancePill{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(180deg, #f5f9f7 0%, #edf4f1 100%);
  border:1px solid rgba(83,122,122,.14);
  color:#5c7388;
  font-size:12px;
  font-weight:800;
}

.favBtn{
  position:absolute;
  top:12px;
  right:12px;
  width:64px;
  height:64px;
  border-radius:17px;
  color:#735600;
  font-size:12px;
  line-height:1.15;
  font-weight:900;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #fff7d8 0%, #f3de8f 100%);
  border:1px solid rgba(216,182,70,.32);
  box-shadow:0 10px 22px rgba(216,182,70,.18);
}
.favIcon{
  width:56px;
  height:56px;
  display:block;
  object-fit:contain;
  pointer-events:none;
  border-radius:50%;
  filter: drop-shadow(0 4px 10px rgba(215,179,90,.22));
  transition: transform .18s ease, filter .18s ease;
}

.favBtn:hover .favIcon{
  transform: scale(1.06);
}

.favBtn.isSaved .favIcon{
  filter:
    drop-shadow(0 0 8px rgba(255,214,102,.42))
    drop-shadow(0 6px 16px rgba(215,179,90,.34));
}

.favBtn.isSaved::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,255,255,0) 58%, rgba(255,224,130,.22) 72%, rgba(255,224,130,0) 100%);
  animation: yunohaSteam 2.4s ease-in-out infinite;
}

@keyframes yunohaSteam{
  0%{
    transform: scale(.92);
    opacity:.35;
  }
  50%{
    transform: scale(1.04);
    opacity:.62;
  }
  100%{
    transform: scale(.92);
    opacity:.35;
  }
}
.cardBottom{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:15px 16px 16px;
}

.scoreRow{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
}

.score100{
  font-size:24px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#12213d;
}

.matchMeter{
  display:flex;
  gap:7px;
  max-width:520px;
}

.matchMeter .seg{
  flex:1;
  height:12px;
  border-radius:999px;
  background:#dbe8ea;
}

.matchMeter .seg.active{
  background:linear-gradient(90deg, #d8f0f4 0%, #9fd2cf 52%, #d8b646 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 2px 8px rgba(216,182,70,.10);
}


.summary{
  font-size:16px;
  line-height:1.62;
  margin-top:2px;
  font-weight:800;
  color:#223248;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.actionRow{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:2px;
}

.actionBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 12px;
  border-radius:13px;
  font-size:14px;
  font-weight:900;
  border:1px solid transparent;
}

.mapBtn{
  color:#fff;
  background:linear-gradient(180deg, #27a193 0%, var(--map) 100%);
  box-shadow:0 8px 16px rgba(35,137,127,.18);
}

.routeBtn{
  color:#fff;
  background:linear-gradient(180deg, #6b99ea 0%, var(--route) 100%);
  box-shadow:0 8px 16px rgba(78,130,220,.18);
}

.detailBtn{
  color:var(--brand-deep);
  background:linear-gradient(180deg, #ffffff 0%, #f5f9fb 100%);
  border-color:rgba(22,49,79,.10);
}

.ssCard .rankNo{
  background:linear-gradient(180deg, #fff4c7 0%, #ffe48d 100%);
}

.siteFooter{
  padding:20px 16px 30px;
  text-align:center;
  color:#77879a;
  font-size:13px;
  font-weight:700;
}

.modal{
  position:fixed;
  inset:0;
  z-index:1000;
}

.modalOverlay{
  position:absolute;
  inset:0;
  background:rgba(18,26,38,.54);
  backdrop-filter:blur(4px);
}

.modalBox{
  position:relative;
  width:min(100%, 760px);
  max-height:min(88vh, 900px);
  overflow:auto;
  margin:40px auto 0;
  border-radius:26px;
  background:linear-gradient(180deg, #ffffff 0%, #fafdfd 100%);
  box-shadow:0 24px 50px rgba(16,24,40,.24);
  padding:18px 16px 20px;
}

.modalClose{
  position:sticky;
  top:0;
  margin-left:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  color:var(--brand-deep);
  font-size:22px;
  font-weight:900;
  background:linear-gradient(180deg, #ffffff 0%, #f2f6f8 100%);
  border:1px solid rgba(22,49,79,.10);
  z-index:2;
}

#modalContent{
  margin-top:4px;
}

.modalTitle{
  margin:0;
  font-size:28px;
  line-height:1.15;
  color:var(--brand-deep);
  font-weight:900;
  letter-spacing:-0.02em;
}

.modalPref{
  margin:8px 0 0;
  color:#6a7c90;
  font-size:14px;
  font-weight:800;
}

.modalScore{
  margin-top:16px;
  font-size:34px;
  line-height:1;
  color:var(--brand-deep);
  font-weight:900;
}

.modalQla{
  margin:10px 0 0;
  color:#38516a;
  font-size:15px;
  font-weight:800;
}

.modalSection{
  margin-top:18px;
  padding:14px 14px 15px;
  border-radius:18px;
  background:linear-gradient(180deg, #fbfdfd 0%, #f4f8f9 100%);
  border:1px solid rgba(20,32,51,.05);
}

.modalSection h3{
  margin:0 0 8px;
  font-size:15px;
  color:var(--brand-deep);
  font-weight:900;
}

.modalSection p{
  margin:0;
  color:#30455f;
  font-size:15px;
  line-height:1.75;
  font-weight:700;
}

.eventLayerSection{
  padding-top:16px;
}

.eventLayerHead{
  display:grid;
  gap:6px;
  margin-bottom:10px;
}

.eventLayerSub{
  margin:0;
  color:#6b7a90;
  font-size:13px;
  line-height:1.6;
  font-weight:700;
}

.eventLayerGroups{
  display:grid;
  gap:10px;
}

.eventDetourGroup{
  border:1px solid rgba(22,49,79,.08);
  border-radius:16px;
  background:linear-gradient(180deg, #ffffff 0%, #f7fafb 100%);
  overflow:hidden;
}

.eventDetourSummary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 14px 13px;
  font-size:14px;
  font-weight:900;
  color:var(--brand-deep);
}

.eventDetourSummary::-webkit-details-marker{
  display:none;
}

.eventDetourCount{
  flex:0 0 auto;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(180deg, #eef8f6 0%, #dff1ed 100%);
  color:#1b6f6b;
  font-size:11px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
}

.eventDetourBody{
  display:grid;
  gap:10px;
  padding:0 14px 14px;
}

.eventDetourItem{
  border:1px solid rgba(20,32,51,.05);
  border-radius:14px;
  background:linear-gradient(180deg, #fbfdfd 0%, #f3f7f8 100%);
  overflow:hidden;
}

.eventDetourItemSummary{
  list-style:none;
  cursor:pointer;
  padding:12px;
}

.eventDetourItemSummary::-webkit-details-marker{
  display:none;
}

.eventDetourMain{
  display:grid;
  gap:6px;
}

.eventDetourName{
  margin:0;
  color:#162133;
  font-size:14px;
  line-height:1.45;
  font-weight:900;
}

.eventDetourValue{
  margin:0;
  color:#30455f;
  font-size:13px;
  line-height:1.7;
  font-weight:700;
}

.eventDetourMeta{
  margin:0;
  color:#6b7a90;
  font-size:12px;
  line-height:1.55;
  font-weight:800;
}

.eventDetourExpand{
  display:grid;
  gap:8px;
  padding:0 12px 12px;
}

.eventDetourRow{
  display:grid;
  gap:4px;
  padding:10px 10px 9px;
  border-radius:12px;
  background:#ffffff;
  border:1px solid rgba(22,49,79,.06);
}

.eventDetourLabel{
  color:#1b6f6b;
  font-size:11px;
  line-height:1.4;
  font-weight:900;
}

.eventDetourText{
  color:#30455f;
  font-size:12px;
  line-height:1.65;
  font-weight:700;
}

.eventLayerEmpty{
  margin:0;
  color:#5f7387;
  font-size:14px;
  line-height:1.75;
  font-weight:700;
}

@media (max-width:640px){
  .eventDetourSummary{
    padding:13px 12px 12px;
    font-size:13px;
  }

  .eventDetourBody{
    padding:0 12px 12px;
  }

  .eventDetourItemSummary{
    padding:11px;
  }

  .eventDetourName{
    font-size:13px;
  }

  .eventDetourValue{
    font-size:12px;
    line-height:1.65;
  }

  .eventDetourMeta{
    font-size:11px;
  }

  .eventDetourText{
    font-size:11px;
  }
}

.modalActions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}


.distanceBottom{
  font-size:14px;
  line-height:1.45;
  color:#5f7387;
  padding:0 8px;
  text-align:center;
}

.qlaModalContent{
  max-width:720px;
  margin:auto;
}

.rankQlaText{
  font-size:13px;
  color:#6b7a90;
  margin-top:6px;
  letter-spacing:0.02em;
}

@media (max-width:640px){
  .siteHeader h1{
    font-size:32px;
  }

  .tagline{
    font-size:14px;
  }

  .mainArea{
    padding:10px 12px 28px;
  }


  .heroTitle{
    font-size:16px;
  }

  .entryBtn{
    min-height:96px;
    border-radius:18px;
    padding:14px 16px;
  }

  .entryLabel{
    font-size:17px;
  }

  .originInfoBox{
    min-height:64px;
    padding:12px 14px;
  }

  .originInfoText{
    font-size:15px;
  }

  .originInfoBtn{
    width:42px;
    height:42px;
    border-radius:13px;
  }

  .filterLabel{
    font-size:16px;
  }

  .filterCard select{
  min-height:58px;
  font-size:16px;
  padding:0 46px 0 14px;
}
.filterCard::after{
  right:16px;
  bottom:16px;
  font-size:18px;
}

.selectEntry{
  padding-right:0;
}

.selectEntry::after{
  content:"▼";
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  color:#6b7a8c;
  opacity:.6;
  pointer-events:none;
}

  .mainActionBtn{
  min-height:54px;
  font-size:16px;
}

.topMapBtn{
  min-height:54px;
  font-size:16px;
}



  .rankNo{
    top:6px;
    right:6px;
    min-width:44px;
    height:24px;
    padding:0 8px;
    font-size:11px;
  }

  .onsenName{
    font-size:28px;
    line-height:1.1;
    letter-spacing:-0.025em;
  }

  .pref{
    margin-top:4px;
    font-size:13px;
  }

  .catchcopy{
    margin-top:8px;
    font-size:15px;
    line-height:1.45;
  }

  .distancePill{
    font-size:11px;
    padding:0 10px;
    min-height:30px;
  }

  .favBtn{
    top:14px;
    right:14px;
    width:48px;
    height:48px;
    border-radius:16px;
    font-size:11px;
  }

  .cardBottom{
    padding:14px;
    gap:10px;
  }

  .score100{
    font-size:24px;
  }

  .matchMeter .seg{
    height:10px;
  }


  .summary{
    font-size:15px;
    line-height:1.58;
  }

  .actionRow{
    grid-template-columns:repeat(3, minmax(0,1fr));
  }

  .modalBox{
    width:calc(100% - 20px);
    margin:16px auto 0;
    border-radius:22px;
    padding:16px 14px 18px;
  }

  .modalTitle{
    font-size:24px;
  }

  .modalScore{
    font-size:30px;
  }

  .modalActions{
    grid-template-columns:1fr;
  }
}

/* =========================
   YUNOHA UI
   ========================= */

:root{
  --yunoha-accent: #E97A2E;
  --yunoha-accent-soft: #FFF1E4;
  --yunoha-card: rgba(255, 252, 246, 0.96);
  --yunoha-line: rgba(233, 122, 46, 0.16);
}

.yunohaGuide{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border-radius:22px;
  background:
    radial-gradient(circle at 16% 18%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, var(--yunoha-card) 0%, #ffffff 100%);
  border:1px solid var(--yunoha-line);
  box-shadow:0 8px 20px rgba(16,24,40,.05);
}

.yunohaGuideTop{
  margin-top:2px;
}

.yunohaGuideResult{
  margin-top:12px;
  margin-bottom:4px;
}

.yunohaGuideQla{
  margin:14px 0 18px;
}

.yunohaGuideImg{
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}

.yunohaGuideImgTop{
  width:132px;
  height:132px;
}

.yunohaGuideImgResult{
  width:108px;
  height:108px;
}

.yunohaGuideImgQla{
  width:140px;
  height:104px;
}

.yunohaGuideText{
  min-width:0;
}

.yunohaGuideLead{
  margin:0;
  color:var(--brand-deep);
  font-size:17px;
  line-height:1.45;
  font-weight:900;
}


.yunohaStateBox{
  margin-top:12px;
}

.yunohaState{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:22px 18px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #fffdf8 0%, #ffffff 100%);
  border:1px solid rgba(22,49,79,.08);
  box-shadow:var(--shadow-soft);
  text-align:center;
}

.yunohaStateImg{
  object-fit:contain;
}

.yunohaStateImgLoading{
  width:120px;
  height:120px;
}

.yunohaStateImgEmpty{
  width:180px;
  height:180px;
}

.yunohaStateLead{
  margin:0;
  color:var(--brand-deep);
  font-size:18px;
  line-height:1.5;
  font-weight:900;
}

.yunohaStateSub{
  margin:0;
  color:#718195;
  font-size:13px;
  line-height:1.7;
  font-weight:700;
  max-width:34em;
}

.favBtn{
  overflow:hidden;
}

.favBtn.isSaved{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.86) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #fff4c8 0%, #e7be5f 100%);
  border-color:rgba(216,182,70,.45);
  box-shadow:0 12px 24px rgba(216,182,70,.24);
}

.favBtn:focus-visible{
  outline:3px solid rgba(233, 122, 46, 0.22);
  outline-offset:2px;
}


@media (min-width: 641px){
  .yunohaGuideTop{
    grid-template-columns:144px minmax(0, 1fr);
  }

  .yunohaGuideImgTop{
    width:144px;
    height:144px;
  }

  .yunohaGuideLead{
    font-size:18px;
  }
}

@media (max-width: 640px){
  .yunohaState{
    padding:18px 14px;
    border-radius:20px;
  }

  .yunohaStateImgLoading{
    width:96px;
    height:96px;
  }

  .yunohaStateImgEmpty{
    width:132px;
    height:132px;
  }

  .yunohaStateLead{
    font-size:16px;
  }

  .yunohaStateSub{
    font-size:12px;
  }
}
.view {
  display: none;
}

.view.is-active {
  display: block;
}


.listGrid {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

#rankingList {
  width: 100%;
  min-height: 300px;
}
#searchView {
  width: 100%;
  min-width: 320px;
  min-height: 400px;
  padding: 24px 0 40px;
}

.searchViewInner {
  display: flex;
  width: min(1120px, calc(100% - 32px));
  min-width: 320px;
  min-height: 400px;
  margin: 0 auto;
}

.resultArea {
  display: block;
  width: 100%;
  min-width: 320px;
  min-height: 300px;
}


/* =========================
   Search Result View Fix
========================= */

.searchView {
  display: block !important;
  width: 100%;
  min-height: 160px;
  margin-top: 24px;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.searchViewHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.searchViewLead{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}

.searchViewLead--banner{
  width:100%;
}

.searchGuideBannerWrap{
  display:block;
  width:100%;
  margin-top: 4px;
  margin-bottom: 10px;
}

.searchGuideBanner{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:18px;
}

/* ↓↓↓ここに追加↓↓↓ */
.searchGuideBanner.searchGuideBanner--yunoha{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  object-fit:contain;
  border-radius:18px;
}

/* ▼ ゆのはサイズ調整（追加） */
.searchGuideBanner--yunoha{
  max-width: 320px;
  margin: 0 auto;
}

@media (max-width:640px){
  .searchGuideBanner.searchGuideBanner--yunoha{
    width:100%;
    height:auto;
    border-radius:16px;
  }
}

@media (max-width:640px){
  .searchGuideBanner--yunoha{
    max-width: 260px;
  }
}

.searchViewText{
  min-width:0;
}

.sectionTitle {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 700;
}

.searchViewMessage {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #2f2a25;
}

.searchViewSub {
  margin: 6px 0 0;
  font-size: 14px;
  color: #6f655d;
}

.resultCount {
  margin: 0;
  font-size: 14px;
  color: #6f655d;
  font-weight: 700;
}

.rankingList {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 16px;
  width: 100%;
  min-height: 1px;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
}


.mainInfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.titleRow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.titleBlock {
  min-width: 0;
}

.cardTitle {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  color: #2f2a25;
  word-break: break-word;
}

.cardArea {
  margin: 4px 0 0;
  color: #75695f;
  font-size: 14px;
}

.rankScore {
  flex: 0 0 auto;
  min-width: 84px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff5e8;
  color: #a45700;
  border: 1px solid #f0d5aa;
  font-size: 18px;
  font-weight: 800;
}


.metaChip {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f5efe6;
  color: #5d5148;
  font-size: 13px;
  font-weight: 700;
}

.desc {
  margin: 0;
  color: #403a35;
  font-size: 13px;
  line-height: 1.7;
}

.emptyState {
  background: #fff;
  border: 1px dashed #d8cab6;
  border-radius: 18px;
  padding: 28px 20px;
  text-align: center;
  color: #6f655d;
}


.hidden {
  display: none !important;
}
.rankCardSSR {
  position: relative;
  border: 3px solid #d4af37; /* ←これを強化 */
  background:
    radial-gradient(circle at top right, rgba(212, 175, 55, 0.25), transparent 40%),
    linear-gradient(135deg, #fffdf7 0%, #fff6d8 50%, #f3e3a4 100%);
  box-shadow:
    0 12px 30px rgba(180, 140, 30, 0.25),
    0 0 0 1px rgba(212, 175, 55, 0.4) inset;
}

.rankCardSSR::before {
  content: "SSR";
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #5a4300;
  background: linear-gradient(135deg, #ffe082, #d4af37);

  /* 👇これ追加 */
  box-shadow:
    0 4px 12px rgba(180, 140, 30, 0.35),
    0 0 10px rgba(212, 175, 55, 0.3);
}

.rankCardSSR .scoreBadge,
.rankCardSSR .rankScore,
.rankCardSSR .scorePill,
.rankCardSSR .rankPill {
  border-color: rgba(212, 175, 55, 0.45);
  background: rgba(255, 248, 220, 0.9);
}

.rankCardSSR .thumbWrap {
  border-radius: 18px;
}

.rankCardSSR:hover {
  transform: translateY(-1px);
  box-shadow:
    0 14px 30px rgba(180, 140, 30, 0.16),
    0 0 0 1px rgba(212, 175, 55, 0.24) inset;
}
.rankCardSSR::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  box-shadow:
  0 0 25px rgba(212, 175, 55, 0.6),
  0 0 50px rgba(212, 175, 55, 0.25);
  pointer-events: none;
}


.mainInfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.titleBlock {
  min-width: 0;
}

.scoreCol {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}




.subContentRow {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(120, 100, 60, 0.12);
}

.subSection {
  width: 100%;
  min-width: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  padding: 12px 14px;
}

.subSectionHead {
  font-size: 13px;
  font-weight: 700;
  color: #6f5a3a;
  margin-bottom: 8px;
}

.subSectionBody {
  font-size: 13px;
  line-height: 1.6;
}

.subPlaceholder {
  font-size: 12px;
  line-height: 1.6;
  color: #9a896f;
}

  .scoreCol {
    justify-content: flex-start;
  }

  .subContentRow {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   RANK CARD REBUILD / MOBILE FIRST
   一覧＋展開型カード
   ========================================= */


.rankHeaderMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.rankBadgeMini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:linear-gradient(180deg, #fff7d7 0%, #f2db93 100%);
  color:#735600;
  border:1px solid rgba(216,182,70,.28);
  font-size:12px;
  font-weight:900;
}

.qlaItem{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
}

.qlaDots{
  display:inline-block;
  color:#7b8a97;
  font-size:12px;
  letter-spacing:.08em;
}

.qlaInfoBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(27,111,107,.18);
  background:linear-gradient(180deg, #ffffff 0%, #f3faf8 100%);
  color:var(--brand-deep);
  font-size:12px;
  font-weight:900;
}

.tagList{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tagChip{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#f5f7f8;
  border:1px solid rgba(31,42,55,.08);
  color:#4f6274;
  font-size:12px;
  font-weight:800;
}

.expandToggleBtn{
  width:100%;
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:2px;
  border-radius:14px;
  border:1px solid rgba(22,49,79,.10);
  background:linear-gradient(180deg, #fffdf9 0%, #f4f6f5 100%);
  color:var(--text-strong);
  font-size:14px;
  font-weight:900;
}

.expandToggleIcon{
  font-size:12px;
  line-height:1;
}

.cardExpand{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(16,24,40,.06);
}

.expandGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.expandSection{
  padding:12px;
  border-radius:16px;
  background:linear-gradient(180deg, #fbfdfd 0%, #f4f8f9 100%);
  border:1px solid rgba(20,32,51,.05);
}

.expandSectionWide{
  grid-column:auto;
}

.expandTitle{
  margin:0 0 6px;
  color:var(--brand-deep);
  font-size:14px;
  line-height:1.4;
  font-weight:900;
}

.expandBody{
  margin:0;
  color:#5f7387;
  font-size:13px;
  line-height:1.6;
  font-weight:700;
}



@media (max-width: 640px) {
  .thumbWrap {
    width: 100%;
    aspect-ratio: auto;
  }
}

  .onsenName{
    font-size:24px;
    white-space:normal;
    line-height:1.18;
  }

  .favBtn{
    top:12px;
    right:12px;
    width:46px;
    height:46px;
    border-radius:14px;
  }

  .favIcon{
    width:42px;
    height:42px;
  }

  .scoreRow{
    align-items:center;
    gap:10px;
  }

  .score100{
    font-size:22px;
  }

  .matchMeter{
    gap:5px;
  }

  .matchMeter .seg{
    height:9px;
  }


  .qlaInfoBtn{
    min-height:32px;
    padding:0 10px;
    font-size:11px;
  }

  .tagChip{
    min-height:28px;
    padding:0 10px;
    font-size:11px;
  }

  .summary{
    font-size:14px;
    line-height:1.6;
  }

  .actionRow{
    gap:8px;
  }

  .actionBtn{
    min-height:42px;
    padding:0 8px;
    font-size:13px;
  }

  .expandToggleBtn{
    min-height:44px;
    font-size:13px;
  }

  .expandSection{
    padding:11px;
    border-radius:14px;
  }

  .expandTitle{
    font-size:13px;
  }

  .expandBody{
    font-size:12px;
  }
}
/* =========================================
   YUNOHA GUIDE TEXT TUNING
   ========================================= */

.yunohaGuideText{
  display:flex;
  align-items:center;
}

.yunohaGuideSub{
  margin: 0;
  color: #35506b;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  max-width: none;
}

.guideBreak{
  display: none;
}

@media (max-width: 640px){
  .yunohaGuideSub{
    font-size: 13px;
    line-height: 1.55;
  }

  .guideBreak{
    display: block;
  }
}

/* =========================================
   Qタイトル調整（Q1〜Q5共通）
   ========================================= */

.heroTitle{
  font-size:26px;
  font-weight:800;
  line-height:1.4;
  letter-spacing:.01em;
}

@media (max-width: 640px){
  .heroTitle{
    font-size:22px;
  }
}
/* =========================================
   FAVORITE BUTTON FINAL（シンプル安定版）
   ========================================= */

.favBtn{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;

  width: 58px;
  height: 58px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  border: 1px solid rgba(216,182,70,.34);

  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #fff8dc 0%, #f2d67b 100%);

  box-shadow:
    0 10px 22px rgba(216,182,70,.22),
    0 1px 0 rgba(255,255,255,.65) inset;

  transition: transform .16s ease;
}

.favBtn:active{
  transform: scale(.95);
}

.favIcon{
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* 保存状態 */
.favBtn.isSaved{
  background:
    linear-gradient(180deg, #fff4c9 0%, #e8be43 100%);
}


.tagline{
  display:block;
  margin-top:10px;
  line-height:1.5;
}

.tagline em{
  display:block;
  margin-top:2px;
  color:rgba(255,255,255,.78);
}


.heroTop{
  margin-bottom:6px;
}

.searchView{
  margin-top:20px;
}

.searchViewHeader{
  align-items:flex-start;
}

.searchViewLead{
  align-items:flex-start;
}


.thumbWrap{
  width:100%;
  aspect-ratio:4 / 5;
  min-height:0;
  overflow:hidden;
  border-radius:18px;
}

.thumb{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
}

.cardTop{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
  position:relative;
}

.titleBlock{
  min-width:0;
}

.cardTitle{
  margin:0;
  line-height:1.35;
}

.catchcopy{
  margin:8px 0 0;
  color:#6b5330;
  font-size:14px;
  line-height:1.6;
  font-weight:700;
}

.scoreCol{
  position:static;
}

.scoreBadge{
  min-width:84px;
}

.desc{
  margin:10px 0 0;
  line-height:1.7;
}

.subContentRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:14px;
}

.subSection{
  min-width:0;
}

@media (min-width:980px){
  .site-main,
  .mainArea{
    width:min(100%, 820px);
    padding-left:18px;
    padding-right:18px;
    padding-bottom:44px;
  }

  .heroBox{
    padding:24px 24px 22px;
  }
}

@media (max-width:640px){

  .siteHeader h1{
    font-size:clamp(30px, 8vw, 40px);
    line-height:1.06;
  }

  .tagline{
    margin-top:10px;
    font-size:13px;
    line-height:1.45;
  }

  .tagline em{
    font-size:12px;
  }


  .heroBox{
    margin-bottom:6px;
    padding:16px;
    border-radius:26px;
    gap:14px;
  }

  .heroTitle{
    font-size:22px;
    line-height:1.35;
  }

  .yunohaGuideTop{
    grid-template-columns:88px minmax(0,1fr);
  }

  .yunohaGuideText{
    align-items:flex-start;
  }

  .yunohaGuideSub{
    font-size:13px;
    line-height:1.55;
  }

  .searchView{
    margin-top:18px;
  }

  .searchViewHeader{
    gap:10px;
    margin-bottom:12px;
  }

  .searchViewLead{
    gap:12px;
  }

  .searchGuideImg{
    width:88px;
  }

  .sectionTitle{
    margin-bottom:4px;
    font-size:18px;
    line-height:1.3;
  }

  .searchViewMessage{
    font-size:15px;
    line-height:1.45;
  }

  .searchViewSub{
    margin-top:4px;
    font-size:13px;
    line-height:1.55;
  }

  .resultCount{
    width:100%;
    text-align:right;
    font-size:13px;
  }


  .cardTitle{
    font-size:18px;
  }

  .cardArea{
    margin-top:4px;
    font-size:12px;
  }

  .catchcopy{
    margin-top:6px;
    font-size:13px;
    line-height:1.5;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }

  .metaRow{
    gap:6px;
    margin-top:8px;
  }

  .metaChip{
    min-height:28px;
    padding:0 10px;
    font-size:11px;
  }

  .qlaInfoBtn{
    min-height:30px;
    padding:0 10px;
    font-size:11px;
  }

  .desc{
    font-size:13px;
    line-height:1.6;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }

  .scoreBadge{
    min-width:76px;
    padding:6px 10px;
    border-radius:999px;
  }

  .scoreBadgeValue{
    font-size:13px;
  }

  .scoreBadgeRank{
    font-size:11px;
  }

  .favBtn{
    width:42px;
    height:42px;
    top:10px;
    right:10px;
  }

  .favoriteIcon,
  .favIcon{
    width:34px;
    height:34px;
  }

  .subContentRow{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:12px;
  }

  .subSection{
    padding:12px;
    border-radius:14px;
  }

  .subSectionHead{
    font-size:13px;
  }

  .subSectionBody{
    font-size:12px;
    line-height:1.55;
  }
}
/* =========================
   FINAL MOBILE FIX（最優先）
========================= */
@media (max-width: 640px) {
  .siteHeader{
    padding:18px 12px 10px;
  }

  .siteHeader h1{
    font-size:34px;
  }

  .tagline{
    font-size:14px;
    line-height:1.45;
  }

  .tagline em{
    font-size:12px;
    color:rgba(255,255,255,.78);
  }

  .mainArea{
    margin: 0 auto;
    padding: 10px 10px 30px;
  }
}
/* =========================
   CTA HIERARCHY FINAL
========================= */

.primaryEntry{
  background:linear-gradient(135deg, #3f6f9e 0%, #345f88 100%);
  border:1px solid rgba(38,74,108,.14);
  box-shadow:0 14px 28px rgba(24,44,68,.22);
}

.primaryEntry .entryLabel{
  color: #ffffff;
}

.primaryEntry .entrySub{
  color: rgba(255,255,255,.92);
}

.primaryEntry .entryIcon{
  background: rgba(255,255,255,.14);
}

.secondaryEntry{
  background:linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
  border:2px solid #c4d2df;
background:linear-gradient(180deg, #ffffff 0%, #eef4f9 100%);
  box-shadow:0 8px 18px rgba(16,24,40,.05);
}

.secondaryEntry .entryLabel{
  color:#163053;
  font-size:14px;
  line-height:1.15;
}

.secondaryEntry .entrySub{
  color:#6b7a8c;
  font-size:11px;
  line-height:1.3;
}

.secondaryEntry .entryIcon{
  background: rgba(32,64,109,.07);
}

.heroTitle{
  font-weight: 900;
}
.entryBtn:active{
  transform: scale(0.97);
}
/* =========================================
   YUSEN RANK CARD FINAL
   検索結果カード 完成版
========================================= */

.rankCard.yrCard{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
  background:linear-gradient(180deg,#fffdf9 0%,#f8f4ed 100%);
  border:1px solid rgba(28,44,60,.08);
  border-radius:24px;
  padding:16px;
  box-shadow:0 14px 30px rgba(24,36,48,.08);
  overflow:visible;
}

.rankCard.yrCard.rankCardSSR{
  border:2px solid rgba(217,182,77,.62);
  background:
    radial-gradient(circle at 84% 10%, rgba(217,182,77,.14) 0%, rgba(217,182,77,0) 24%),
    linear-gradient(180deg,#fffaf0 0%,#fffdf9 100%);
}

.yrHead{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

.yrThumbWrap{
  position:relative;
  width:88px;
  aspect-ratio:1 / 1;
  border-radius:20px;
  overflow:hidden;
  background:#e8edf2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}

.yrThumb{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.yrRankNo{
  position:absolute;
  left:8px;
  top:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  background:linear-gradient(180deg,#fff6d8 0%,#f2d56d 100%);
  color:#7a5a00;
  font-size:11px;
  font-weight:900;
  box-shadow:0 6px 12px rgba(122,90,0,.18);
}

.yrMain{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.yrMainTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.yrTitleCol{
  min-width:0;
}

.yrTitle{
  margin:0;
  color:#162133;
  font-size:28px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-0.03em;
  word-break:keep-all;
}

.yrPref{
  margin:4px 0 0;
  color:#6f7b88;
  font-size:13px;
  font-weight:800;
}

.yrUtility{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.yrFavBtn{
  position:relative;
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #fff7d8 0%, #f3de8f 100%);
  border:1px solid rgba(216,182,70,.32);
  box-shadow:0 8px 18px rgba(216,182,70,.18);
  transition:transform .16s ease;
}

.yrFavBtn:active{
  transform:scale(0.92);
}

.yrMenuBtn{
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid rgba(22,49,79,.10);
  background:linear-gradient(180deg,#ffffff 0%,#f3f5f8 100%);
  color:#23415d;
  font-size:22px;
  font-weight:900;
  line-height:1;
  box-shadow:0 6px 14px rgba(16,24,40,.05);
}

.yrMenu{
  position:absolute;
  top:54px;
  right:0;
  z-index:20;
  min-width:120px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(22,49,79,.10);
  background:#ffffff;
  box-shadow:0 14px 28px rgba(16,24,40,.12);
  display:grid;
  gap:6px;
}

.yrMenuItem{
  min-height:38px;
  padding:0 12px;
  border-radius:12px;
  background:linear-gradient(180deg,#ffffff 0%,#f6f8fa 100%);
  color:#163053;
  font-size:13px;
  font-weight:800;
  text-align:left;
}

.yrCatchcopy{
  margin:0;
  color:#233f5b;
  font-size:15px;
  line-height:1.45;
  font-weight:800;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.yrTags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.yrTag{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#f8fcfb 0%,#eef6f4 100%);
  border:1px solid rgba(83,122,122,.14);
  color:#315a63;
  font-size:11px;
  font-weight:900;
}

.yrScoreBox{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 14px 12px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbfb 100%);
  border:1px solid rgba(22,49,79,.06);
}

.yrScoreTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.yrScoreBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  font-size:20px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.02em;
  color:#12213d;
  background:linear-gradient(180deg,#f4f6f8 0%,#eceff3 100%);
}

.yrScoreBadge.score-s{
  background:linear-gradient(180deg,#fff4c7 0%,#ffe48d 100%);
  color:#7a5a00;
}

.yrScoreBadge.score-a{
  background:linear-gradient(180deg,#eef8f6 0%,#dbeee8 100%);
  color:#1b6f6b;
}

.yrScoreBadge.score-b{
  background:linear-gradient(180deg,#eef3fb 0%,#dde8f8 100%);
  color:#355b8a;
}

.yrQlaBtn{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(22,49,79,.10);
  background:linear-gradient(180deg,#ffffff 0%,#f4f6f8 100%);
  color:#23415d;
  font-size:12px;
  font-weight:900;
}

.yrQlaLine{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  color:#26415d;
  font-size:13px;
  font-weight:850;
}

.yrQlaItem{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.yrDots{
  color:#6b7a90;
  font-size:12px;
  letter-spacing:.03em;
}

.yrLead{
  margin:0;
  color:#5f7387;
  font-size:12px;
  font-weight:800;
}

.yrActionRow{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:8px;
}

.yrActionBtn{
  min-height:46px;
  border-radius:14px;
  font-size:14px;
  font-weight:900;
  text-decoration:none;
}

.yrDistance{
  margin:0;
  color:#6b7a90;
  font-size:12px;
  font-weight:800;
  text-align:center;
}

.yrExpand{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding-top:2px;
}

.yrSummary{
  margin:0;
  color:#223248;
  font-size:14px;
  line-height:1.65;
  font-weight:800;
}

.yrExpandGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.yrExpandSection{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(22,49,79,.06);
  background:linear-gradient(180deg,#fbfdfd 0%,#f4f8f9 100%);
}

.yrDetourGroups{
  display:grid;
  gap:10px;
}

.yrDetourGroup{
  border:1px solid rgba(22,49,79,.08);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fafb 100%);
  overflow:hidden;
}

.yrDetourGroupSummary{
  list-style:none;
  cursor:pointer;
  padding:12px 14px;
  font-size:13px;
  font-weight:900;
  color:#1b6f6b;
}

.yrDetourGroupSummary::-webkit-details-marker{
  display:none;
}

.yrDetourGroupBody{
  display:grid;
  gap:8px;
  padding:0 12px 12px;
}

.yrDetourItem{
  border:1px solid rgba(20,32,51,.05);
  border-radius:12px;
  background:linear-gradient(180deg,#fbfdfd 0%,#f3f7f8 100%);
  overflow:hidden;
}

.yrDetourSummary{
  list-style:none;
  cursor:pointer;
  padding:11px 12px;
}

.yrDetourSummary::-webkit-details-marker{
  display:none;
}

.yrDetourMain{
  display:grid;
  gap:5px;
}

.yrDetourName{
  color:#162133;
  font-size:13px;
  line-height:1.45;
  font-weight:900;
}

.yrDetourValue{
  color:#30455f;
  font-size:12px;
  line-height:1.65;
  font-weight:700;
}

.yrDetourMeta{
  color:#6b7a90;
  font-size:11px;
  line-height:1.5;
  font-weight:800;
}

.yrDetourExpand{
  display:grid;
  gap:8px;
  padding:0 12px 12px;
}

.yrDetourRow{
  display:grid;
  gap:4px;
  padding:9px 10px;
  border-radius:10px;
  background:#ffffff;
  border:1px solid rgba(22,49,79,.06);
}

.yrDetourLabel{
  color:#1b6f6b;
  font-size:10px;
  line-height:1.4;
  font-weight:900;
}

.yrDetourText{
  color:#30455f;
  font-size:11px;
  line-height:1.6;
  font-weight:700;
}

.yrExpandTitle{
  margin:0 0 6px;
  color:#163053;
  font-size:13px;
  font-weight:900;
}

.yrExpandBody{
  margin:0;
  color:#5f7387;
  font-size:12px;
  line-height:1.65;
  font-weight:700;
}

@media (min-width: 641px){
  .rankCard.yrCard{
    gap:16px;
    padding:18px;
  }

  .yrHead{
    grid-template-columns:120px minmax(0,1fr);
    gap:16px;
  }

  .yrThumbWrap{
    width:120px;
    border-radius:22px;
  }

  .yrTitle{
    font-size:32px;
  }

  .yrCatchcopy{
    font-size:16px;
  }

  .yrExpandGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .yrActionBtn{
    min-height:48px;
    font-size:15px;
  }

  .yrDistance{
    font-size:13px;
  }
}
/* =========================================
   YUSEN RANK CARD FINAL TUNING
   最終微調整
========================================= */

/* 1位カードの特別感を少し強める */
#rankingList .rankCard.yrCard:first-child{
  background:
    radial-gradient(circle at 86% 10%, rgba(217,182,77,.18) 0%, rgba(217,182,77,0) 24%),
    radial-gradient(circle at 14% 0%, rgba(255,248,222,.85) 0%, rgba(255,248,222,0) 30%),
    linear-gradient(180deg,#fffaf0 0%,#fffdf9 100%);
  border:2px solid rgba(217,182,77,.72);
  box-shadow:
    0 18px 34px rgba(24,36,48,.10),
    0 0 0 1px rgba(255,248,222,.55) inset;
}

#rankingList.isKeywordFiltered .rankCard.yrCard:first-child{
  background: linear-gradient(180deg,#fffdf9 0%,#f8f4ed 100%);
  border: 1px solid rgba(28,44,60,.08);
  box-shadow: 0 14px 30px rgba(24,36,48,.08);
}

#rankingList.isKeywordFiltered .yrRankNo{
  background: linear-gradient(180deg,#eef3f6 0%,#dde5eb 100%);
  color: #4e6476;
  box-shadow: none;
}

#rankingList.isKeywordFiltered .yrRankNo--filtered{
  min-width: 56px;
}

/* カード全体を少し締める */
.rankCard.yrCard{
  gap:12px;
  padding:14px;
}

.yrHead{
  gap:12px;
}

.yrMain{
  gap:6px;
}

.yrMainTop{
  gap:8px;
}

.yrTitle{
  font-size:24px;
  line-height:1.08;
}

.yrPref{
  margin-top:2px;
}

.yrCatchcopy{
  font-size:14px;
  line-height:1.4;
  -webkit-line-clamp:2;
}

.yrTags{
  gap:5px;
}

.yrTag{
  min-height:26px;
  padding:0 9px;
  font-size:10px;
}

/* スコア部を少し圧縮 */
.yrScoreBox{
  gap:7px;
  padding:12px 12px 10px;
}

.yrScoreBadge{
  min-height:36px;
  padding:0 12px;
  font-size:18px;
}

.yrQlaBtn{
  min-height:32px;
  padding:0 11px;
  font-size:11px;
}

.yrQlaLine{
  gap:6px 10px;
  font-size:12px;
}

.yrLead{
  font-size:11px;
}

/* CTAを少しだけ締める */
.yrActionRow{
  gap:7px;
}

.yrActionBtn{
  min-height:44px;
  font-size:14px;
}

/* 距離表示を控えめに */
.yrDistance{
  font-size:11px;
  margin-top:-2px;
}

/* メニュー位置を自然にする */
.yrUtility{
  align-items:flex-start;
}

.yrMenu{
  top:46px;
  right:0;
  min-width:108px;
  padding:6px;
  border-radius:14px;
  gap:4px;
}

.yrMenuItem{
  min-height:34px;
  padding:0 10px;
  border-radius:10px;
  font-size:12px;
}

/* 展開エリアを圧縮 */
.yrExpand{
  gap:10px;
  padding-top:0;
}

.yrSummary{
  font-size:13px;
  line-height:1.55;
}

.yrExpandGrid{
  gap:8px;
}

.yrExpandSection{
  padding:10px 11px;
  border-radius:14px;
}

.yrExpandTitle{
  margin:0 0 4px;
  font-size:12px;
}

.yrExpandBody{
  font-size:11px;
  line-height:1.45;
}

/* サムネを少しだけ洗練 */
.yrThumbWrap{
  border-radius:18px;
}

.yrRankNo{
  min-width:42px;
  height:22px;
  font-size:10px;
  top:7px;
  left:7px;
}

/* スマホ最適化 */
@media (max-width:640px){
  .rankCard.yrCard{
    gap:11px;
    padding:13px;
    border-radius:22px;
  }

  .yrHead{
    grid-template-columns:84px minmax(0,1fr);
    gap:11px;
  }

  .yrThumbWrap{
    width:84px;
    border-radius:18px;
  }

  .yrTitle{
    font-size:22px;
    line-height:1.06;
    letter-spacing:-0.025em;
  }

  .yrCatchcopy{
    font-size:13px;
    line-height:1.38;
  }

  .yrFavBtn{
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .yrMenuBtn{
    width:38px;
    height:38px;
    border-radius:13px;
    font-size:20px;
  }

  .yrMenu{
    top:42px;
    min-width:102px;
  }

  .yrScoreBox{
    padding:11px 11px 10px;
    border-radius:16px;
  }

  .yrScoreBadge{
    min-height:34px;
    font-size:17px;
  }

  .yrQlaLine{
    font-size:11px;
  }

  .yrActionBtn{
    min-height:42px;
    border-radius:13px;
    font-size:13px;
  }

  .yrDistance{
    font-size:11px;
  }

  .yrExpandSection{
    padding:9px 10px;
  }

  .yrExpandTitle{
    font-size:12px;
  }

  .yrExpandBody{
    font-size:11px;
  }
}

/* PCは少し呼吸を戻す */
@media (min-width:641px){
  .rankCard.yrCard{
    padding:16px;
    gap:14px;
  }

  .yrHead{
    grid-template-columns:108px minmax(0,1fr);
    gap:14px;
  }

  .yrThumbWrap{
    width:108px;
  }

  .yrTitle{
    font-size:28px;
  }

  .yrExpandGrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
/* =========================================
   トップ枠ズレ補正
   ========================================= */

.site-main.mainArea{
}
/* =========================================
   YUSEN 実機アクセシビリティ修正
   スマホで小さすぎる問題を一括補正
   ========================================= */

/* hidden属性が効かず開いたまま見える事故を防ぐ */
[hidden]{
  display:none !important;
}

/* ---------- Q1 / トップ ---------- */

.site-main.mainArea{
  width:min(100%, 860px);
  margin:0 auto;
  padding:8px 12px 28px;
  overflow-x:hidden;
}

.heroBox{
  width:100%;
  max-width:100%;
  margin:0;
  padding:14px 12px 16px;
  border-radius:24px;
  box-sizing:border-box;
  overflow:hidden;
}

.heroTitle{
  font-size:clamp(21px, 5.7vw, 28px);
  line-height:1.24;
  letter-spacing:-0.02em;
  white-space:normal;
}


.entryGrid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}

.entryBtn{
  min-width:0;
  min-height:100px;
  padding:14px 12px;
  border-radius:20px;
}

.entryIcon{
  width:56px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  font-size:22px;
  line-height:1;
}

.entryLabel{
  font-size:17px;
  line-height:1.12;
  word-break:keep-all;
}

.entrySub{
  font-size:12px;
  line-height:1.35;
}


/* ---------- スマホ専用 ---------- */

@media (max-width:640px){
  .site-main.mainArea{
    padding:10px 10px 28px;
  }

  .heroBox{
    padding:15px 12px 18px;
    border-radius:22px;
  }

  .heroTitle{
    font-size:clamp(21px, 5.8vw, 26px);
    line-height:1.3;
  }


  .entryGrid{
    gap:10px;
  }

  .entryBtn{
  min-height:96px;
  padding:12px 8px;
  gap:8px;
}

  .entryLabel{
  font-size:15px;
  line-height:1.18;
}

  .entrySub{
  font-size:11px;
  line-height:1.3;
}

}
/* =========================================
   YUSEN ranking card mobile readability fix
   いまの小さすぎ問題を最後尾から上書き
   ========================================= */

.rankCard.yrCard{
  overflow: visible;
}

.yrUtility{
  position: relative;
  z-index: 6;
}

.yrFavBtn,
.favBtn.yrFavBtn{
  width: 62px;
  height: 62px;
  min-width: 62px;
  min-height: 62px;
  border-radius: 20px;
  z-index: 7;
}

.yrFavBtn .favIcon,
.favBtn.yrFavBtn .favIcon,
.yrFavBtn .favoriteIcon,
.favBtn.yrFavBtn .favoriteIcon{
  width: 54px;
  height: 54px;
  object-fit: contain;
}

.yrMenuBtn{
  width: 50px;
  height: 50px;
  border-radius: 17px;
  font-size: 24px;
}

.yrScoreBox{
  position: relative;
  z-index: 1;
}

.yrScoreBadge{
  position: relative;
  z-index: 1;
}

/* スマホ最優先 */
@media (max-width: 640px){
  .rankCard.yrCard{
    padding: 16px;
    gap: 14px;
    border-radius: 24px;
  }

  .yrHead{
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }

  .yrThumbWrap{
    width: 112px;
    height: 112px;
    min-width: 112px;
    border-radius: 20px;
    overflow: hidden;
  }

  .yrThumb{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .yrRankNo{
    min-width: 48px;
    height: 26px;
    padding: 0 10px;
    font-size: 12px;
    top: 8px;
    left: 8px;
  }

  .yrMain{
    gap: 10px;
  }

  .yrMainTop{
    gap: 12px;
    align-items: flex-start;
  }

  .yrTitle{
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .yrPref{
    margin-top: 5px;
    font-size: 15px;
  }

  .yrCatchcopy{
    font-size: 17px;
    line-height: 1.5;
    -webkit-line-clamp: 3;
  }

  .yrTags{
    gap: 8px;
  }

  .yrTag{
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }

  .yrFavBtn,
  .favBtn.yrFavBtn{
    width: 62px;
    height: 62px;
    min-width: 62px;
    min-height: 62px;
    border-radius: 20px;
  }

  .yrFavBtn .favIcon,
  .favBtn.yrFavBtn .favIcon,
  .yrFavBtn .favoriteIcon,
  .favBtn.yrFavBtn .favoriteIcon{
    width: 54px;
    height: 54px;
  }

  .yrMenuBtn{
    width: 48px;
    height: 48px;
    border-radius: 16px;
    font-size: 24px;
  }

  .yrMenu{
    top: 54px;
    min-width: 126px;
    padding: 8px;
    border-radius: 16px;
  }

  .yrMenuItem{
    min-height: 42px;
    padding: 0 12px;
    font-size: 14px;
  }

  .yrScoreBox{
    gap: 10px;
    padding: 14px;
    border-radius: 18px;
  }

  .yrScoreBadge{
    min-height: 40px;
    padding: 0 14px;
    font-size: 20px;
  }

  .yrQlaBtn{
    min-height: 38px;
    padding: 0 14px;
    font-size: 14px;
  }

  .yrQlaLine{
    gap: 8px 12px;
    font-size: 15px;
  }

  .yrDots{
    font-size: 14px;
  }

  .yrLead{
    font-size: 15px;
    line-height: 1.55;
  }

  .yrActionRow{
    gap: 10px;
  }

  .yrActionBtn{
    min-height: 52px;
    border-radius: 15px;
    font-size: 17px;
  }

  .yrDistance{
    font-size: 14px;
    margin-top: 0;
  }

  .yrSummary{
    font-size: 15px;
    line-height: 1.7;
  }

  .yrExpandTitle{
    font-size: 14px;
  }

  .yrExpandBody{
    font-size: 14px;
    line-height: 1.7;
  }
}
/* =========================
   1位カードV2（安全試作版）
   既存 .rankCard / .yrCard は触らない
========================= */

.rankCardV2{
  position: relative;
  overflow: hidden;
  border: 1px solid #eadfcf;
  box-shadow:
    0 14px 36px rgba(0,0,0,.07),
    0 2px 10px rgba(0,0,0,.04);
  background:
    linear-gradient(180deg, rgba(255,248,239,.96) 0%, rgba(255,255,255,1) 100%);
}

.rankCardV2::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background: linear-gradient(90deg, #d7a94b 0%, #f3d58a 50%, #c98f2f 100%);
  pointer-events:none;
}

.rankCardV2 .yrHead{
  gap: 18px;
}

.rankCardV2 .yrThumbWrap{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}

.rankCardV2 .yrThumb{
  display:block;
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
}

.rankCardV2 .yrTopBadge{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background: rgba(35, 75, 87, .92);
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
}

.rankCardV2 .yrCatchcopyV2{
  font-size: 16px;
  line-height: 1.7;
  font-weight: 800;
  color:#234b57;
}

.rankCardV2 .yrScoreBoxV2{
  border: 1px solid #eadfcf;
  background: linear-gradient(180deg, #fffaf2 0%, #fff 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.rankCardV2 .yrScoreBadge{
  transform: scale(1.04);
}

.rankCardV2 .yrTags{
  gap: 8px;
}

.rankCardV2 .yrTag{
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

.rankCardV2 .yrActionRow{
  margin-top: 14px;
}

.rankCardV2 .yrActionBtn{
  font-weight: 700;
}

@media (max-width: 640px){
  .rankCardV2 .yrThumb{
    min-height: 200px;
  }

  .rankCardV2 .yrTopBadge{
    top:10px;
    left:10px;
    padding:6px 10px;
    font-size:11px;
  }

  .rankCardV2 .yrCatchcopyV2{
    font-size: 15px;
    line-height: 1.65;
  }
}
/* =========================
   1位カード：お気に入りボタン改善
   四角い外枠感を消して、丸を主役にする
========================= */

.rankCardV2 .favoriteBtn,
.rankCardTop1 .favoriteBtn{
  width: 64px;
  height: 64px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rankCardV2 .favoriteBtn:hover,
.rankCardTop1 .favoriteBtn:hover{
  background: transparent;
  box-shadow: none;
  transform: translateY(-1px);
}

.rankCardV2 .favoriteBtn:active,
.rankCardTop1 .favoriteBtn:active{
  transform: translateY(0);
}

.rankCardV2 .favoriteBtn img,
.rankCardTop1 .favoriteBtn img,
.rankCardV2 .favoriteBtn .favoriteIcon,
.rankCardTop1 .favoriteBtn .favoriteIcon{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: block;
  object-fit: cover;
  box-shadow:
    0 6px 16px rgba(0,0,0,.10),
    0 0 0 2px #f2d76b;
  background: #fffaf0;
}

.rankCardV2 .favoriteBtn:hover img,
.rankCardTop1 .favoriteBtn:hover img,
.rankCardV2 .favoriteBtn:hover .favoriteIcon,
.rankCardTop1 .favoriteBtn:hover .favoriteIcon{
  box-shadow:
    0 8px 18px rgba(0,0,0,.13),
    0 0 0 2px #f2d76b;
}

@media (max-width: 640px){
  .rankCardV2 .favoriteBtn,
  .rankCardTop1 .favoriteBtn{
    width: 56px;
    height: 56px;
  }

  .rankCardV2 .favoriteBtn img,
  .rankCardTop1 .favoriteBtn img,
  .rankCardV2 .favoriteBtn .favoriteIcon,
  .rankCardTop1 .favoriteBtn .favoriteIcon{
    width: 50px;
    height: 50px;
  }
}
/* =========================
   全カード共通：お気に入りボタン統一
========================= */

.favoriteBtn,
.yrFavBtn{
  width: 64px;
  height: 64px;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.favoriteBtn:hover,
.yrFavBtn:hover{
  background: transparent !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

.favoriteBtn:active,
.yrFavBtn:active{
  transform: translateY(0);
}

.favoriteBtn img,
.yrFavBtn img,
.favoriteBtn .favoriteIcon,
.yrFavBtn .favoriteIcon{
  width: 56px;
  height: 56px;
  display: block;
  object-fit: cover;
  border-radius: 999px !important;
  background: #fffaf0;
  box-shadow:
    0 6px 16px rgba(0,0,0,.10),
    0 0 0 2px #f2d76b;
}

.favoriteBtn:hover img,
.yrFavBtn:hover img,
.favoriteBtn:hover .favoriteIcon,
.yrFavBtn:hover .favoriteIcon{
  box-shadow:
    0 8px 18px rgba(0,0,0,.13),
    0 0 0 2px #f2d76b;
}

/* もし外側ラッパーが四角く見えている場合の保険 */
.yrFavorite,
.favoriteWrap,
.favoriteBtnWrap{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

@media (max-width: 640px){
  .favoriteBtn,
  .yrFavBtn{
    width: 56px;
    height: 56px;
  }

  .favoriteBtn img,
  .yrFavBtn img,
  .favoriteBtn .favoriteIcon,
  .yrFavBtn .favoriteIcon{
    width: 50px;
    height: 50px;
  }
}
/* =========================
   お気に入りボタン 微調整
   少し引き算して上品にする
========================= */

.favoriteBtn,
.yrFavBtn{
  width: 58px !important;
  height: 58px !important;
}

.favoriteBtn img,
.yrFavBtn img,
.favoriteBtn .favoriteIcon,
.yrFavBtn .favoriteIcon{
  width: 48px !important;
  height: 48px !important;
  box-shadow:
    0 3px 10px rgba(0,0,0,.08),
    0 0 0 1.5px #ecd46a !important;
}

.favoriteBtn:hover img,
.yrFavBtn:hover img,
.favoriteBtn:hover .favoriteIcon,
.yrFavBtn:hover .favoriteIcon{
  box-shadow:
    0 5px 12px rgba(0,0,0,.10),
    0 0 0 1.5px #ecd46a !important;
}

@media (max-width: 640px){
  .favoriteBtn,
  .yrFavBtn{
    width: 52px !important;
    height: 52px !important;
  }

  .favoriteBtn img,
  .yrFavBtn img,
  .favoriteBtn .favoriteIcon,
  .yrFavBtn .favoriteIcon{
    width: 44px !important;
    height: 44px !important;
  }
}
/* =========================
   右上メニューボタン 微調整
========================= */

.cardMenuBtn,
.yrMenuBtn,
.moreBtn{
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  background: rgba(245, 247, 250, 0.92) !important;
  border: 1px solid rgba(210, 218, 228, 0.95) !important;
  box-shadow:
    0 2px 8px rgba(0,0,0,.04) !important;
  color: #314a67 !important;
}

.cardMenuBtn:hover,
.yrMenuBtn:hover,
.moreBtn:hover{
  background: rgba(250, 252, 255, 0.98) !important;
  box-shadow:
    0 4px 10px rgba(0,0,0,.06) !important;
  transform: translateY(-1px);
}

.cardMenuBtn:active,
.yrMenuBtn:active,
.moreBtn:active{
  transform: translateY(0);
}

@media (max-width: 640px){
  .cardMenuBtn,
  .yrMenuBtn,
  .moreBtn{
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
  }
}
/* =========================
   右上ボタンを丸に統一（最重要仕上げ）
========================= */

.cardMenuBtn,
.yrMenuBtn,
.moreBtn{
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  background: rgba(245, 247, 250, 0.95) !important;
  border: 1px solid rgba(220, 228, 238, 0.9) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,.05) !important;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* ホバーは控えめ */
.cardMenuBtn:hover,
.yrMenuBtn:hover,
.moreBtn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 3px 8px rgba(0,0,0,.07) !important;
}

/* スマホ */
@media (max-width: 640px){
  .cardMenuBtn,
  .yrMenuBtn,
  .moreBtn{
    width: 44px !important;
    height: 44px !important;
  }
}
/* =========================
   横並びのまま主従を作る
========================= */

.rankCardV2 .yrRight,
.rankCard .yrRight{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* お気に入り（主役） */
.favoriteBtn,
.yrFavBtn{
  width: 58px !important;
  height: 58px !important;
}

/* …ボタン（脇役） */
.cardMenuBtn,
.yrMenuBtn,
.moreBtn{
  width: 42px !important;
  height: 42px !important;
  opacity: 0.75;
  border-radius: 999px !important;
}

/* さらに弱くする */
.cardMenuBtn:hover,
.yrMenuBtn:hover,
.moreBtn:hover{
  opacity: 0.9;
}

.yrFavBtn{
  margin-right: 6px !important;
}

.yrMenuBtn{
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  opacity: 0.78;
}
/* =========================
   …ボタン 最終仕上げ（確定版）
========================= */

.yrMenuBtn{
  width: 42px;
  height: 42px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(245, 247, 250, 0.95);
  border: 1px solid rgba(220, 228, 238, 0.9);

  box-shadow: 0 2px 6px rgba(0,0,0,.05);

  font-size: 18px;
  line-height: 1;

  opacity: 0.75;
  margin-left: 8px; /* ←これで横位置も自然になる */
}

/* ホバーは控えめ */
.yrMenuBtn:hover{
  opacity: 0.9;
  transform: translateY(-1px);
}

/* スマホ */
@media (max-width: 640px){
  .yrMenuBtn{
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
}
/* =========================
   右上2ボタンの高さズレ修正（確定版）
========================= */

.yrUtility{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.yrFavBtn{
  width: 58px !important;
  height: 58px !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 58px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.yrMenuBtn{
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;   /* ← これが重要 */
  margin: 0 !important;
  border-radius: 999px !important;
  flex: 0 0 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

@media (max-width: 640px){
  .yrUtility{
    gap: 8px !important;
  }

  .yrFavBtn{
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }

  .yrMenuBtn{
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }
}

/* QLAドット */
.qlaDot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#d6e0e6;
}

.qlaDot.active{
  background:#7fa9bc;
}

/* スマホQ1 */
@media (max-width: 640px){
  .heroTitle{
    font-size: clamp(18px, 4.9vw, 22px) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.01em !important;
  }
}

/* スマホガイド */
@media (max-width: 640px){
  .yunohaGuide{
    grid-template-columns: 82px minmax(0,1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .yunohaGuideImgTop{
    width: 82px !important;
    height: 82px !important;
  }

  .yunohaGuideText{
    align-items: center !important;
  }

  .yunohaGuideSub{
    font-size: 13px !important;
    line-height: 1.55 !important;
    font-weight: 800 !important;
    max-width: none !important;
    letter-spacing: -0.03em !important;
  }

  .guideBreak{
    display: block !important;
  }
}
/* ===== 強制上書き（最終） ===== */



.favBtn{
  border:0;
  background:none;
  padding:0;
}
/* =========================================
   YUSEN UI REBUILD FINAL
   ランキングカード最終再構築
   これを style.css の一番最後に追加
   ========================================= */

/* ---------- 共通 ---------- */
#rankingList{
  gap: 18px;
}

#rankingList .rankCard.yrCard,
#rankingList .rankCard.yrCard.rankCardClean{
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(28, 56, 74, 0.10);
  background:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #fffdf9 0%, #f8fbfb 100%);
  box-shadow:
    0 18px 40px rgba(19, 34, 48, 0.08),
    0 2px 10px rgba(19, 34, 48, 0.04);
  color: #1e2f3c;
}

/* ---------- 2位以下の通常カード ---------- */
#rankingList .rankCard.yrCard:not(.rankCardClean){
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  padding: 18px;
  align-items: start;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrHead{
  display: contents;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrThumbWrap{
  position: relative;
  width: 148px;
  height: 148px;
  min-width: 148px;
  border-radius: 22px;
  overflow: hidden;
  background: #e8eef1;
  box-shadow:
    0 10px 24px rgba(18, 33, 45, 0.08),
    inset 0 0 0 1px rgba(255,255,255,.52);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrThumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrRankNo{
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  min-width: 56px;
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff3c7 0%, #e9c85d 100%);
  color: #7b5700;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .03em;
  box-shadow: 0 8px 18px rgba(150, 111, 0, 0.18);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrMain{
  min-width: 0;
  display: grid;
  gap: 12px;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrMainTop{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrTitleWrap{
  min-width: 0;
  flex: 1 1 auto;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrTitle{
  margin: 0;
  font-size: 30px;
  line-height: 1.08;
  font-weight: 900;
  color: #145b60;
  letter-spacing: -.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrPref{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.3;
  color: #718296;
  font-weight: 800;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrCatchcopy{
  margin: 0;
  font-size: 16px;
  line-height: 1.52;
  color: #284257;
  font-weight: 800;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrUtility{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  z-index: 6;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrFavBtn,
#rankingList .rankCard.yrCard:not(.rankCardClean) .favBtn.yrFavBtn{
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #fff9dc 0%, #f3df96 100%);
  border: 1px solid rgba(216,182,70,.32);
  box-shadow: 0 10px 20px rgba(216,182,70,.16);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrFavBtn .favIcon,
#rankingList .rankCard.yrCard:not(.rankCardClean) .favBtn.yrFavBtn .favIcon,
#rankingList .rankCard.yrCard:not(.rankCardClean) .yrFavBtn .favoriteIcon,
#rankingList .rankCard.yrCard:not(.rankCardClean) .favBtn.yrFavBtn .favoriteIcon{
  width: 50px;
  height: 50px;
  object-fit: contain;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrMenuBtn{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #f2f6f8 100%);
  border: 1px solid rgba(22,49,79,.10);
  color: #1d4c60;
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(15, 30, 45, 0.08);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrMenu{
  top: 54px;
  right: 0;
  min-width: 126px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(22,49,79,.10);
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 30px rgba(15,30,45,.12);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreBox{
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fcfc 0%, #eef6f5 100%);
  border: 1px solid rgba(34, 92, 96, 0.08);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreBadge{
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fa 100%);
  color: #10273f;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  box-shadow: inset 0 0 0 1px rgba(20,40,60,.06);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrQlaBtn,
#rankingList .rankCard.yrCard:not(.rankCardClean) .qlaInfoBtn{
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(20,40,60,.08);
  color: #1a5866;
  font-size: 13px;
  font-weight: 900;
  margin-left: auto;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrQlaLine{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 15px;
  line-height: 1.35;
  color: #28465f;
  font-weight: 850;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrLead{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #627386;
  font-weight: 800;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrActionRow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrActionBtn{
  min-height: 50px;
  padding: 0 12px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrMapBtn{
  color: #fff;
  background: linear-gradient(180deg, #27a193 0%, #188d81 100%);
  box-shadow: 0 10px 18px rgba(35,137,127,.16);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrRouteBtn{
  color: #fff;
  background: linear-gradient(180deg, #6a98e9 0%, #597fd5 100%);
  box-shadow: 0 10px 18px rgba(78,130,220,.15);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .expandToggleBtn,
#rankingList .rankCard.yrCard:not(.rankCardClean) .yrDetailBtn{
  color: #1b5765;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
  border: 1px solid rgba(22,49,79,.10);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrDistance{
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #607488;
  font-weight: 800;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrExpand{
  margin-top: 2px;
  padding-top: 14px;
  border-top: 1px solid rgba(22,49,79,.08);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrSummary{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.72;
  color: #26384c;
  font-weight: 800;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrExpandGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrExpandSection{
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdfd 0%, #f3f8f8 100%);
  border: 1px solid rgba(20,32,51,.06);
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrExpandTitle{
  margin: 0 0 8px;
  font-size: 14px;
  color: #16515e;
  font-weight: 900;
}

#rankingList .rankCard.yrCard:not(.rankCardClean) .yrExpandBody{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #4d6277;
  font-weight: 700;
}

/* ---------- 1位カード ---------- */
#rankingList .rankCard.yrCard.rankCardClean{
  padding: 0;
  border: 2px solid rgba(221, 184, 77, 0.72);
  background:
    radial-gradient(circle at 85% 12%, rgba(255,250,227,.95) 0%, rgba(255,250,227,0) 28%),
    linear-gradient(180deg, #fffaf0 0%, #ffffff 62%);
  box-shadow:
    0 22px 48px rgba(18, 33, 45, 0.10),
    0 0 0 1px rgba(255,248,222,.60) inset;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanShell{
  padding: 20px;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanTopBar{
  display: none;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanHero{
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanThumbWrap{
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 24px;
  overflow: hidden;
  background: #e8eef1;
  box-shadow:
    0 14px 30px rgba(20,32,51,.10),
    inset 0 0 0 1px rgba(255,255,255,.52);
}

#rankingList .rankCard.yrCard.rankCardClean .cleanThumb{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanTopPick{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  min-height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff4cb 0%, #e4bf4f 100%);
  color: #785500;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  box-shadow: 0 8px 18px rgba(150,111,0,.20);
}

#rankingList .rankCard.yrCard.rankCardClean .cleanTitle{
  margin: 0;
  font-size: 36px;
  line-height: 1.04;
  font-weight: 900;
  color: #14595d;
  letter-spacing: -.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanPref{
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.3;
  color: #728396;
  font-weight: 800;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanCatch{
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.55;
  color: #243f53;
  font-weight: 800;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanScoreRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanScoreBadge{
  min-height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
  color: #10263f;
  font-size: 24px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(20,40,60,.06);
}

#rankingList .rankCard.yrCard.rankCardClean .cleanQla{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.35;
  color: #26455d;
  font-weight: 850;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanLead{
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #5b6d81;
  font-weight: 800;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanDistance{
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.45;
  color: #5d7185;
  font-weight: 800;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanActionRow{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
  margin-top: 16px;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanActionBtn{
  min-height: 52px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanMapBtn{
  color: #fff;
  background: linear-gradient(180deg, #27a193 0%, #188d81 100%);
  box-shadow: 0 10px 18px rgba(35,137,127,.16);
}

#rankingList .rankCard.yrCard.rankCardClean .cleanRouteBtn{
  color: #fff;
  background: linear-gradient(180deg, #6a98e9 0%, #597fd5 100%);
  box-shadow: 0 10px 18px rgba(78,130,220,.15);
}

#rankingList .rankCard.yrCard.rankCardClean .cleanShareBtn,
#rankingList .rankCard.yrCard.rankCardClean .cleanDetailBtn{
  color: #1b5765;
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
  border: 1px solid rgba(22,49,79,.10);
}

#rankingList .rankCard.yrCard.rankCardClean .cleanDetailRow{
  margin-top: 10px;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanDetailBtn{
  width: 100%;
  min-height: 52px;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanExpand{
  margin-top: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(22,49,79,.08);
}

#rankingList .rankCard.yrCard.rankCardClean .cleanExpand .yrSummary{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: #26384c;
  font-weight: 800;
}

#rankingList .rankCard.yrCard.rankCardClean .yrExpandGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}

#rankingList .rankCard.yrCard.rankCardClean .yrExpandSection{
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfdfd 0%, #f3f8f8 100%);
  border: 1px solid rgba(20,32,51,.06);
}

#rankingList .rankCard.yrCard.rankCardClean .yrExpandTitle{
  margin: 0 0 8px;
  font-size: 14px;
  color: #16515e;
  font-weight: 900;
}

#rankingList .rankCard.yrCard.rankCardClean .yrExpandBody{
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #4d6277;
  font-weight: 700;
}

/* ---------- スマホ ---------- */
@media (max-width: 640px){
  #rankingList{
    gap: 16px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean){
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
    border-radius: 24px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrThumbWrap{
    width: 112px;
    height: 112px;
    min-width: 112px;
    border-radius: 20px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrRankNo{
    min-width: 48px;
    height: 26px;
    padding: 0 10px;
    font-size: 11px;
    top: 8px;
    left: 8px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrMain{
    gap: 10px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrMainTop{
    gap: 10px;
    align-items: flex-start;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrTitle{
    font-size: 24px;
    line-height: 1.08;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrPref{
    margin-top: 4px;
    font-size: 13px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrCatchcopy{
    font-size: 14px;
    line-height: 1.45;
    -webkit-line-clamp: 3;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrFavBtn,
  #rankingList .rankCard.yrCard:not(.rankCardClean) .favBtn.yrFavBtn{
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
    border-radius: 16px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrFavBtn .favIcon,
  #rankingList .rankCard.yrCard:not(.rankCardClean) .favBtn.yrFavBtn .favIcon,
  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrFavBtn .favoriteIcon,
  #rankingList .rankCard.yrCard:not(.rankCardClean) .favBtn.yrFavBtn .favoriteIcon{
    width: 44px;
    height: 44px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrMenuBtn{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: 20px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreBox{
    gap: 9px;
    padding: 12px;
    border-radius: 16px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreBadge{
    min-height: 36px;
    padding: 0 12px;
    font-size: 18px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrQlaBtn,
  #rankingList .rankCard.yrCard:not(.rankCardClean) .qlaInfoBtn{
    min-height: 34px;
    padding: 0 12px;
    font-size: 12px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrQlaLine{
    font-size: 14px;
    gap: 8px 10px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrLead{
    font-size: 13px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrActionBtn{
    min-height: 46px;
    border-radius: 14px;
    font-size: 14px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrDistance{
    font-size: 13px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrSummary{
    font-size: 14px;
    line-height: 1.68;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrExpandGrid{
    grid-template-columns: 1fr;
  }

  /* 1位 */
  #rankingList .rankCard.yrCard.rankCardClean .cleanShell{
    padding: 16px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanHero{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanThumbWrap{
    width: 100%;
    height: auto;
    aspect-ratio: 1.28 / 1;
    border-radius: 22px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanTitle{
    font-size: 30px;
    line-height: 1.05;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanPref{
    margin-top: 6px;
    font-size: 14px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanCatch{
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanScoreRow{
    margin-top: 14px;
    gap: 10px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanScoreBadge{
    min-height: 40px;
    padding: 0 14px;
    font-size: 21px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanQla{
    font-size: 15px;
    gap: 8px 12px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanLead{
    font-size: 14px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanDistance{
    font-size: 14px;
    margin-top: 12px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanActionRow{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
    margin-top: 14px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanActionBtn{
    min-height: 48px;
    border-radius: 15px;
    font-size: 14px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanDetailBtn{
    min-height: 48px;
  }

  #rankingList .rankCard.yrCard.rankCardClean .cleanExpand .yrSummary{
    font-size: 14px;
    line-height: 1.7;
  }

  #rankingList .rankCard.yrCard.rankCardClean .yrExpandGrid{
    grid-template-columns: 1fr;
  }
}
/* =========================
   Q1ガイド文 2行固定化（トップ専用）
========================= */
@media (max-width: 640px){
  .yunohaGuideTop{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:12px !important;
  }

  .yunohaGuideTop .yunohaGuideImgTop{
    width:88px !important;
    height:88px !important;
    flex-shrink:0 !important;
  }

  .yunohaGuideTop .yunohaGuideText{
    flex:1;
  }
}

  .yunohaGuideTop .yunohaGuideSub{
    margin:0 !important;
    width:100% !important;
    max-width:none !important;
    font-size:13px !important;
    line-height:1.55 !important;
    font-weight:800 !important;
    letter-spacing:-0.01em !important;
    color:#365373 !important;
  }

  .yunohaGuideTop .guideBreak{
    display:block !important;
    height:0 !important;
  }
}


/* =========================
   QLAドット 色分け
========================= */
.yrDots{
  display: inline-block !important;
  vertical-align: middle !important;
  font-size: 12px !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
  color: #6b7a90 !important;
}

.yrDots .qlaDot{
  width: 13px !important;
  height: 13px !important;
  border-radius: 999px !important;
  background: #d8e0e8 !important;
  border: 1px solid rgba(50, 74, 104, 0.08) !important;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7) !important;
}


/* ===== 1位カード 右下ユーティリティ 正本 ===== */

#rankingList .cleanThumbWrap{
  position: relative !important;
  overflow: visible !important;
}


#rankingList .rankCard.yrCard.rankCardClean .cleanMenuBtn{
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  border-radius: 999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18) !important;
}
.footer{
  margin-top:40px;
  padding:24px 16px 28px;
  border-top:1px solid #e8dfd2;
  text-align:center;
  color:#666;
  font-size:13px;
  background:#fffdf9;
}

.footerBrand{
  font-size:14px;
  font-weight:700;
  color:#4b4036;
  margin-bottom:10px;
}

.footerLinks{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 14px;
  margin-bottom:10px;
}

.footerLinks a{
  color:#666;
  text-decoration:none;
}

.footerLinks a:hover{
  text-decoration:underline;
}

.footerCopy{
  font-size:12px;
  color:#888;
}

@media (max-width: 640px){
  .footer{
    margin-top:32px;
    padding:22px 14px 26px;
  }

  .footerLinks{
    gap:8px 12px;
  }
}
/* =========================
   QLAドット 最終安定版
========================= */

.yrQlaLine{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

.yrQlaItem{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  color:#38586a !important;
  font-weight:700 !important;
  line-height:1.2 !important;
}

.yrQlaItem strong{
  min-width:16px !important;
  font-weight:900 !important;
  color:#163c4c !important;
}

.yrDots{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  margin-left:2px !important;
  vertical-align:middle !important;
}

.yrDots .qlaDot{
  width:12px !important;
  height:12px !important;
  border-radius:999px !important;
  background:#d9e2ea !important;
  border:1px solid rgba(64,92,120,.12) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    0 1px 2px rgba(22,60,76,.05) !important;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease !important;
}

/* 通常カードの点灯色 */
.yrDots.tone-normal .qlaDot.active{
  background:linear-gradient(180deg, #7e9ab8 0%, #5f7f9f 100%) !important;
  border-color:rgba(57,86,115,.22) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    0 2px 4px rgba(57,86,115,.14) !important;
}

/* SSカードの点灯色 */
.yrDots.tone-ss .qlaDot.active{
  background:linear-gradient(180deg, #ffe39a 0%, #e0b84f 100%) !important;
  border-color:rgba(191,145,30,.26) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    0 0 0 1px rgba(255,221,130,.18),
    0 3px 7px rgba(190,145,45,.18) !important;
}

/* 5点満点列だけ強発光 */
.yrDots.tone-ss.isPerfect .qlaDot.active{
  animation:qlaSsAura 2.8s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.60),
    0 0 0 1px rgba(255,223,140,.22),
    0 0 10px rgba(240,196,78,.42),
    0 3px 8px rgba(184,138,27,.18) !important;
}

.rankCard.yrCard:hover .yrDots .qlaDot.active{
  transform:translateY(-1px) scale(1.03) !important;
}

@keyframes qlaSsAura{
  0%{
    transform:translateY(0) scale(1);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.55),
      0 0 0 1px rgba(255,223,140,.20),
      0 0 7px rgba(240,196,78,.28),
      0 3px 7px rgba(184,138,27,.15);
  }
  50%{
    transform:translateY(-1px) scale(1.06);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.65),
      0 0 0 1px rgba(255,223,140,.25),
      0 0 12px rgba(240,196,78,.46),
      0 4px 10px rgba(184,138,27,.20);
  }
  100%{
    transform:translateY(0) scale(1);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.55),
      0 0 0 1px rgba(255,223,140,.20),
      0 0 7px rgba(240,196,78,.28),
      0 3px 7px rgba(184,138,27,.15);
  }
}
/* =========================
   QLAドット + SS演出 最終版
========================= */

/* --- QLAレイアウト --- */
.yrQlaLine{
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
}

.yrQlaItem{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  color:#38586a !important;
  font-weight:700 !important;
  line-height:1.2 !important;
}

.yrQlaItem strong{
  min-width:16px !important;
  font-weight:900 !important;
  color:#163c4c !important;
}

/* --- ドットベース --- */
.yrDots{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  margin-left:2px !important;
  vertical-align:middle !important;
}

.yrDots .qlaDot{
  width:12px !important;
  height:12px !important;
  border-radius:999px !important;
  background:#d9e2ea !important;
  border:1px solid rgba(64,92,120,.12) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.85),
    0 1px 2px rgba(22,60,76,.05) !important;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    background .22s ease,
    border-color .22s ease !important;
}

/* --- 通常カード --- */
.yrDots.tone-normal .qlaDot.active{
  background:linear-gradient(180deg, #7e9ab8 0%, #5f7f9f 100%) !important;
  border-color:rgba(57,86,115,.22) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    0 2px 4px rgba(57,86,115,.14) !important;
}

.yrDots.tone-s .qlaDot.active{
  background:linear-gradient(180deg, #8fb46a 0%, #6f9550 100%) !important;
  border-color:rgba(75,105,54,.22) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    0 2px 4px rgba(75,105,54,.14) !important;
}


.yrDots.tone-b .qlaDot.active{
  background:linear-gradient(180deg, #b8bfc7 0%, #8f98a3 100%) !important;
  border-color:rgba(95,104,114,.20) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.32),
    0 2px 4px rgba(95,104,114,.12) !important;
}

/* --- SSカード（金） --- */
.yrDots.tone-ss .qlaDot.active{
  background:linear-gradient(180deg, #ffe39a 0%, #e0b84f 100%) !important;
  border-color:rgba(191,145,30,.26) !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.55),
    0 0 0 1px rgba(255,221,130,.18),
    0 3px 7px rgba(190,145,45,.18) !important;
}

/* --- SSかつ満点列だけ強発光 --- */
.yrDots.tone-ss.isPerfect .qlaDot.active{
  animation:qlaSsAura 3.6s ease-in-out infinite !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.60),
    0 0 0 1px rgba(255,223,140,.22),
    0 0 10px rgba(240,196,78,.42),
    0 3px 8px rgba(184,138,27,.18) !important;
}

/* --- 軽いホバー反応 --- */
.rankCard.yrCard:hover .yrDots .qlaDot.active{
  transform:translateY(-1px) scale(1.03) !important;
}

/* --- SSスコアバッジ強化 --- */
.yrScoreBadge.score-ss{
  background:linear-gradient(135deg, #ffe39a, #d4af37) !important;
  color:#5b4300 !important;
  box-shadow:0 4px 12px rgba(212,175,55,0.35) !important;
}

/* --- 1位カードだけ静かなオーラ --- */
.rankCardTop{
  position:relative;
}

.rankCardTop::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:24px;
  background:radial-gradient(circle, rgba(255,214,102,0.12), transparent 70%);
  pointer-events:none;
}

/* --- アニメーション --- */
@keyframes qlaSsAura{
  0%{
    transform:translateY(0) scale(1);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.55),
      0 0 0 1px rgba(255,223,140,.20),
      0 0 7px rgba(240,196,78,.28),
      0 3px 7px rgba(184,138,27,.15);
  }
  50%{
    transform:translateY(-1px) scale(1.05);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.65),
      0 0 0 1px rgba(255,223,140,.25),
      0 0 12px rgba(240,196,78,.46),
      0 4px 10px rgba(184,138,27,.20);
  }
  100%{
    transform:translateY(0) scale(1);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,.55),
      0 0 0 1px rgba(255,223,140,.20),
      0 0 7px rgba(240,196,78,.28),
      0 3px 7px rgba(184,138,27,.15);
  }
}
.onsenSearchBox{
  margin: 18px 0 8px;
}

#onsenSearchInput{
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 1px solid #d7dde5;
  padding: 0 14px;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  background: #fff;
}

#onsenSearchInput:focus{
  border-color: #2fa6a0;
  box-shadow: 0 0 0 2px rgba(47,166,160,.15);
}
.siteHeader h1{
  cursor: pointer;
}
.onsenSearchLabel{
  margin: 14px 0 6px;
  font-size: 13px;
  font-weight: 800;
  color: #2fa6a0;
}

.onsenSearchBox{
  margin: 0 0 14px;
}

#onsenSearchInput{
  width: 100%;
  height: 56px;
  border-radius: 16px;
  border: 2px solid #2fa6a0;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 700;
  outline: none;
  background: #ffffff;
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

#onsenSearchInput::placeholder{
  color: #7b8794;
  opacity: 1;
}

#onsenSearchInput:focus{
  border-color: #1b8f88;
  box-shadow: 0 0 0 3px rgba(47,166,160,.14);
}
@media (max-width: 640px){
  #rankingList .rankCard.yrCard:not(.rankCardClean){
    padding: 14px;
    gap: 12px;
    border-radius: 22px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrHead{
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrThumbWrap{
    width: 88px;
    height: 88px;
    min-width: 88px;
    border-radius: 18px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrTitle{
    font-size: 18px;
    line-height: 1.15;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrPref{
    font-size: 12px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrCatchcopy{
    font-size: 13px;
    line-height: 1.45;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrMainTop{
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: start;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrUtility{
    gap: 6px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrFavBtn{
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 14px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrMenuBtn{
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 20px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreBox{
    margin-top: 8px;
    padding: 12px;
    border-radius: 16px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreTop{
    display: grid;
    grid-template-columns: 92px minmax(0,1fr);
    gap: 8px;
    align-items: center;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreBadge{
    min-height: 34px;
    font-size: 16px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrQlaBtn{
    min-height: 34px;
    font-size: 12px;
    justify-self: end;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrQlaLine{
    font-size: 12px;
    gap: 6px 10px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrLead{
    font-size: 12px;
    line-height: 1.5;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrActionRow{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrActionBtn{
    min-height: 42px;
    font-size: 13px;
    border-radius: 13px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrDistance{
    margin-top: 6px;
    font-size: 12px;
  }
}
#scrollTopBtn{
  position: fixed;
  right: 14px;
  bottom: 16px;
  z-index: 1200;

  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #1f2a37;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

#scrollTopBtn.show{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
/* =========================================
   2位以下カード 見え方最適化
   構成は変えず、スマホだけ整える
   ========================================= */
@media (max-width: 640px){

  /* 2位以下だけに効かせる */
  #rankingList .rankCard.yrCard:not(.rankCardClean){
    padding: 14px;
    gap: 12px;
    border-radius: 22px;
  }

  /* 上段の並びを安定化 */
  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrHead{
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrThumbWrap{
    width: 92px;
    height: 92px;
    min-width: 92px;
    border-radius: 18px;
  }

  /* 温泉名まわり */
  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrMain{
    gap: 8px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrMainTop{
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: start;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrTitle{
    font-size: 20px;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrPref{
    margin-top: 3px;
    font-size: 12px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrCatchcopy{
    font-size: 14px;
    line-height: 1.45;
    margin: 0;
  }

  /* 右上ユーティリティ */
  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrUtility{
    gap: 6px;
    align-items: start;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrFavBtn{
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 14px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrFavBtn .favIcon{
    width: 36px;
    height: 36px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrMenuBtn{
    width: 38px;
    height: 38px;
    border-radius: 13px;
    font-size: 20px;
  }

  /* タグは残す。主張だけ弱める */
  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrTags{
    gap: 6px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrTag{
    min-height: 28px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 999px;
    opacity: .92;
  }

  /* スコア箱を整列 */
  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreBox{
    margin-top: 8px;
    padding: 12px;
    border-radius: 16px;
    gap: 8px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreTop{
    display: grid;
    grid-template-columns: 96px minmax(0,1fr);
    gap: 8px;
    align-items: center;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrScoreBadge{
    min-height: 34px;
    padding: 0 10px;
    font-size: 16px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrQlaBtn{
    min-height: 34px;
    padding: 0 10px;
    font-size: 12px;
    justify-self: end;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrQlaLine{
    gap: 6px 10px;
    font-size: 12px;
    line-height: 1.45;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrLead{
    font-size: 12px;
    line-height: 1.5;
  }

  /* ボタン列の圧を整える */
  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrActionRow{
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 8px;
  }

  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrActionBtn{
    min-height: 42px;
    border-radius: 13px;
    font-size: 13px;
  }

  /* 距離表示 */
  #rankingList .rankCard.yrCard:not(.rankCardClean) .yrDistance{
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.45;
  }
}
/* ===== QLA折り返し防止 ===== */
.yrQlaLine{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.yrQlaLine::-webkit-scrollbar{
  display: none;
}
/* ===== お気に入り可視化 強化 ===== */
.favBtn.isSaved{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #fff2c7 0%, #e8be43 100%);
  border-color: rgba(255, 107, 129, .55);
  box-shadow:
    0 0 0 2px rgba(255,107,129,.18) inset,
    0 10px 22px rgba(216,182,70,.24);
}

.favBtn.isSaved .favIcon{
  transform: scale(1.05);
  filter:
    drop-shadow(0 0 8px rgba(255,214,102,.42))
    drop-shadow(0 6px 16px rgba(215,179,90,.34));
}

#favoriteToast{
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%) translateY(10px);
  z-index: 1001;
  min-width: 180px;
  max-width: calc(100% - 32px);
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(25, 35, 52, .94);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

#favoriteToast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* ===== 2位以下カード 安定レイアウト ===== */

.rankCard{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  align-items: start;
}

/* サムネ */
.thumbWrap{
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

/* メイン */
.yrMain{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* タイトル */
.yrTitle{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

/* タグ折り返し安定 */
.yrTags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ボタンエリア固定 */
.yrAction{
  display: flex;
  gap: 8px;
}

/* QLAエリア */
.yrScoreBox{
  margin-top: 6px;
}

/* 距離 */
.yrDistance{
  margin-top: 4px;
  font-size: 13px;
}
#loadMoreBtn{
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: none;
  background: #2fa6a0;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  margin: 16px 0 24px;
}
.qlaAccordion{
  border-bottom:1px solid #eee;
  padding:8px 0;
}

.qlaAccordion summary{
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.qlaAccordion summary::after{
  content:"+";
  font-size:18px;
  transition:.2s;
}

.qlaAccordion[open] summary::after{
  content:"−";
}

.qlaAccordionBody{
  margin-top:8px;
  font-size:14px;
  line-height:1.6;
  color:#555;
}
/* =========================================
   YUSEN UI MICRO TUNING
   目的:
   - サムネを少し大きく
   - 温泉名を主役化
   - CTAを押しやすく
   - 余白を少し締める
   ルール:
   - yrカード系のみ触る
   - JS/HTML構造は触らない
========================================= */

.rankCard.yrCard{
  padding:14px;
  gap:12px;
}

.rankCard.yrCard .yrHead{
  grid-template-columns:120px minmax(0, 1fr);
  gap:14px;
  align-items:start;
}

.rankCard.yrCard .yrThumbWrap{
  width:120px;
  height:120px;
  min-width:120px;
  border-radius:20px;
  overflow:hidden;
}

.rankCard.yrCard .yrThumb{
  width:100%;
  height:100%;
  object-fit:cover;
}

.rankCard.yrCard .yrMain{
  gap:7px;
}

.rankCard.yrCard .yrTitle{
  font-size:28px;
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:900;
}

.rankCard.yrCard .yrPref{
  margin-top:3px;
  font-size:14px;
}

.rankCard.yrCard .yrCatchcopy{
  font-size:15px;
  line-height:1.45;
  -webkit-line-clamp:2;
}

.rankCard.yrCard .yrScoreBox{
  padding:13px 13px 11px;
  gap:8px;
}

.rankCard.yrCard .yrActionRow{
  gap:8px;
}

.rankCard.yrCard .yrActionBtn{
  min-height:50px;
  font-size:16px;
  border-radius:14px;
}

.rankCard.yrCard .yrDistance{
  font-size:12px;
}

.rankCard.yrCard .yrFavBtn{
  width:60px;
  height:60px;
  min-width:60px;
  min-height:60px;
  border-radius:18px;
}

.rankCard.yrCard .yrFavBtn .favIcon,
.rankCard.yrCard .yrFavBtn .favoriteIcon{
  width:52px;
  height:52px;
  object-fit:contain;
}

.rankCard.yrCard .yrMenuBtn{
  width:46px;
  height:46px;
  border-radius:15px;
  font-size:22px;
}

#rankingList .rankCard.yrCard:first-child{
  box-shadow:
    0 18px 34px rgba(24,36,48,.10),
    0 0 0 1px rgba(255,248,222,.55) inset;
}

@media (max-width:640px){
  .rankCard.yrCard{
    padding:14px;
    gap:12px;
    border-radius:22px;
  }

.yunohaGuide.yunohaGuideQla{
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}

.yunohaGuide.yunohaGuideQla .yunohaGuideImgQla{
  width: 100%;
  height: auto;
  max-width: none;
  justify-self: center;
}

.yunohaGuide.yunohaGuideQla .yunohaGuideText{
  display: block;
  width: 100%;
}

.yunohaGuide.yunohaGuideQla .yunohaGuideLead{
  font-size: 15px;
  line-height: 1.6;
}

.yunohaGuide.yunohaGuideQla .qlaEn{
  display: block;
  margin-top: 6px;
}

  .rankCard.yrCard .yrHead{
    grid-template-columns:100px minmax(0, 1fr);
    gap:12px;
  }

  .rankCard.yrCard .yrThumbWrap{
    width:100px;
    height:100px;
    min-width:100px;
    border-radius:18px;
  }

  .rankCard.yrCard .yrMain{
    gap:8px;
  }

  .rankCard.yrCard .yrTitle{
    font-size:22px;
    line-height:1.1;
  }

  .rankCard.yrCard .yrPref{
    font-size:13px;
  }

  .rankCard.yrCard .yrCatchcopy{
    font-size:14px;
    line-height:1.42;
  }

  .rankCard.yrCard .yrScoreBox{
    padding:12px 12px 10px;
  }

  .rankCard.yrCard .yrActionBtn{
    min-height:48px;
    font-size:15px;
  }

  .rankCard.yrCard .yrFavBtn{
    width:54px;
    height:54px;
    min-width:54px;
    min-height:54px;
    border-radius:17px;
  }

  .rankCard.yrCard .yrFavBtn .favIcon,
  .rankCard.yrCard .yrFavBtn .favoriteIcon{
    width:46px;
    height:46px;
  }

  .rankCard.yrCard .yrMenuBtn{
    width:42px;
    height:42px;
    font-size:20px;
  }
}
/* =========================================
   rankCardClean のうち 2位以下だけ通常化
   構造は同じ、見た目だけ1位専用感を外す
========================================= */

#rankingList .rankCard.cleanStandardCard{
  border: 1px solid rgba(28, 56, 74, 0.10);
  background:
    radial-gradient(circle at 85% 12%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #fffdf9 0%, #f8fbfb 100%);
  box-shadow:
    0 18px 40px rgba(19, 34, 48, 0.08),
    0 2px 10px rgba(19, 34, 48, 0.04);
}

#rankingList .rankCard.cleanStandardCard .cleanTopBar{
  background: linear-gradient(90deg, #dbe7ee 0%, #eef4f8 100%);
  opacity: .9;
}

#rankingList .rankCard.cleanStandardCard .cleanTopPick{
  background: linear-gradient(180deg, #f5f7f9 0%, #e4ebf1 100%);
  color: #445b70;
  border: 1px solid rgba(90, 112, 132, 0.16);
  box-shadow: 0 8px 16px rgba(41, 61, 80, 0.08);
}

/* 1位だけ残す装飾を通常カードでは弱める */
#rankingList .rankCard.cleanStandardCard .cleanThumbWrap{
  box-shadow:
    0 10px 24px rgba(18, 33, 45, 0.08),
    inset 0 0 0 1px rgba(255,255,255,.52);
}
/* =========================================
   QLA 横1列固定（折り返し完全禁止）
========================================= */

#rankingList .rankCard.rankCardClean .cleanQlaLine{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:10px !important;
  overflow:hidden !important;
}

#rankingList .rankCard.rankCardClean .cleanQlaItem{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
  flex-shrink:0 !important;
}

#rankingList .rankCard.rankCardClean .cleanQlaItem .yrDots{
  display:inline-flex !important;
  flex-wrap:nowrap !important;
  white-space:nowrap !important;
}

/* スマホ時は少しだけ圧縮 */
@media (max-width:640px){
  #rankingList .rankCard.rankCardClean .cleanQlaLine{
    gap:6px !important;
  }

  #rankingList .rankCard.rankCardClean .cleanQlaItem{
    gap:4px !important;
    font-size:13px !important;
  }

  #rankingList .rankCard.rankCardClean .cleanQlaItem .yrDots span{
    transform:scale(0.85);
  }
}
.qlaEn{
  display:block;
  margin-top:2px;
  font-size:12px;
  line-height:1.45;
  color:#7b8694;
  font-weight:700;
  letter-spacing:.01em;
}

.qlaAccordion summary .qlaEn{
  margin-top:3px;
  font-size:11px;
}

.qlaFormula .qlaEn{
  margin-top:4px;
}
.favModeBadge {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 12px;
  background: #f3e7c9;
  color: #8a6d2f;
  font-weight: 600;
}
.favModeBadge {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 10px;
  font-size: 11px;
  border-radius: 999px;
  background: #e8d7a5;
  color: #6b5420;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.myPageTabs{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin:0 0 16px;
}

.myTab{
  min-height:48px;
  padding:0 10px;
  border:none;
  border-radius:16px;
  font-size:14px;
  line-height:1.1;
  font-weight:900;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(16,24,40,.06);
  border:1px solid rgba(22,49,79,.08);
  transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

.myTab:active{
  transform:scale(.98);
}

.myTab--goyu{
  background:linear-gradient(180deg,#fff7de 0%,#f2dfab 100%);
  color:#6b5314;
}

.myTab--fav{
  background:linear-gradient(180deg,#eef7fb 0%,#dbeaf5 100%);
  color:#2d5876;
}

.myTab--post{
  background:linear-gradient(180deg,#fff1f4 0%,#f8dce5 100%);
  color:#8b4b63;
}

.myTab.active{
  transform:translateY(-1px);
  box-shadow:0 12px 22px rgba(16,24,40,.10);
  outline:2px solid rgba(255,255,255,.7);
}

.myTab--goyu.active{
  background:linear-gradient(180deg,#efd27a 0%,#d5ad43 100%);
  color:#fffaf0;
}

.myTab--fav.active{
  background:linear-gradient(180deg,#7fb3d4 0%,#5f94b8 100%);
  color:#ffffff;
}

.myTab--post.active{
  background:linear-gradient(180deg,#e08aa6 0%,#c96d8d 100%);
  color:#ffffff;
}

@media (max-width:640px){
  .myPageTabs{
    gap:8px;
    margin:0 0 14px;
  }

  .myTab{
    min-height:44px;
    padding:0 8px;
    border-radius:14px;
    font-size:13px;
  }
}

.cleanVisitMeta{
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: #7a632a;
  font-weight: 800;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanGoyuBtn{
  color: #6a4f12;
  background: linear-gradient(180deg, #fff6d8 0%, #efd88a 100%);
  box-shadow: 0 10px 18px rgba(185,150,63,.14);
}

#rankingList .rankCard.yrCard.rankCardClean .cleanGoyuBtn.isSaved{
  color: #fff;
  background: linear-gradient(180deg, #d1a946 0%, #b48921 100%);
  box-shadow: 0 10px 18px rgba(162,122,24,.18);
}

#goyuInToast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(12px);
  min-width: 220px;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(41, 34, 20, .92);
  color: #fffaf0;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 800;
  text-align: center;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}

#goyuInToast.is-show{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 640px){
  .cleanVisitMeta{
    font-size: 11px;
    margin-top: 5px;
  }
}
.backToSearchBtn{
  margin-top:8px;
  padding:6px 10px;
  font-size:13px;
  border-radius:8px;
  background:#eee;
}
/* =========================================
   YUSEN 右上ユーティリティ強化
   📂マイページ導線を見える化
   ========================================= */

#rankingList .rankCard .yrUtility{
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;

  /* ❌これ削除 */
  /* background: rgba(255,255,255,.72); */
  /* backdrop-filter: blur(8px); */

  /* ✅これに変更 */
  background: transparent;
  padding: 0;
}

#rankingList .rankCard .yrFavBtn,
#rankingList .rankCard .favBtn.yrFavBtn{
  width: 58px;
  height: 58px;
  min-width: 58px;
  min-height: 58px;
  border-radius: 18px;
}

#rankingList .rankCard .yrMenuBtn{
  width: 64px;
  height: 64px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  /* ❌白ベースやめる */
  /* background: rgba(255,255,255,0.85); */

  /* ✅透明寄り */
  background: rgba(255,255,255,0.45);

  backdrop-filter: blur(6px);

  box-shadow: 0 10px 24px rgba(0,0,0,0.18),
              0 0 0 2px rgba(255,255,255,0.35);
}

#rankingList .rankCard .yrMenuBtn:active{
  transform: scale(.95);
}

#rankingList .rankCard .yrMenuBtn[aria-expanded="true"]{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 34%),
    linear-gradient(180deg, #eef7ff 0%, #cfe1f1 100%);
  box-shadow:
    0 12px 24px rgba(20,32,48,.16),
    0 0 0 2px rgba(67,114,156,.10);
}

#rankingList .rankCard .yrMenuEmoji{
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 40px;   /* ← 少しだけ強める */
  line-height: 1;

  transform: translate(-2px, -4px); /* ← ここが神調整 */

  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
#rankingList .rankCard .yrMenu{
  top: 66px;
  right: 0;
  min-width: 152px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 32px rgba(20,32,48,.14);
}

@media (max-width: 640px){
  #rankingList .rankCard .yrUtility{
    gap: 7px;
    padding: 5px;
    border-radius: 16px;
  }

  #rankingList .rankCard .yrFavBtn,
  #rankingList .rankCard .favBtn.yrFavBtn,
  #rankingList .rankCard .yrMenuBtn{
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    border-radius: 50%;
  }

  #rankingList .rankCard .yrMenuEmoji{
  font-size: 34px;

  /* 重要 */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

  #rankingList .rankCard .yrMenu{
    top: 60px;
    min-width: 142px;
  }
}
#rankingList .rankCard.yrCard.rankCardClean .cleanFavBtn{
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;

  border-radius: 999px !important;
  overflow: hidden !important;

  background: none !important;   /* ←ここ重要 */
  border: none !important;       /* ←ここ重要 */
  box-shadow: none !important;   /* ←ここ重要 */

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanFavIcon{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:999px !important;
}
.cleanScoreTop{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.cleanScoreTop .cleanUtility{
  margin-left: auto;
  display: flex;
  align-items: center;
}
.cleanScoreTop{
  position: relative;
  min-height: 56px;   /* ←これ追加 */
}

.cleanScoreTop .cleanUtility{
  position: absolute;
  right: 0;
  top: 50%;

  transform: translateY(-50%);
  display:flex;
  align-items:center;   /* ←これが本命 */
}

#rankingList .rankCard.yrCard.rankCardClean .cleanScoreTop .cleanUtility{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% - 5px));
}

/* ===== 湯格バッジ：yrScoreTop単独構造版 ===== */

.yrScoreTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}

.yrScoreMain{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.yrScoreValueRow{
  display:flex;
  align-items:baseline;
  gap:8px;
}

.yrScoreValue{
  font-size:28px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#12213d;
  white-space:nowrap;
}

.yrYukakuWrap{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}

@media (max-width:640px){
  .yrScoreTop{
    align-items:flex-start;
    gap:10px;
  }

  .yrScoreValue{
    font-size:24px;
  }
}
/* 最後に追加 */
.cleanUtility{
  margin-left: auto;
  padding-right: 4px;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanFavBtn{
  margin-right: 2px;
}
.moreResultsBtn{
  display:block;
  width:min(100%, 220px);
  margin:18px auto 6px;
  padding:14px 18px;
  border:none;
  border-radius:999px;
  background:linear-gradient(180deg, #ffffff 0%, #f3f6f8 100%);
  color:#163053;
  font-size:15px;
  font-weight:900;
  line-height:1.2;
  box-shadow:0 8px 18px rgba(16,24,40,.08);
  border:1px solid rgba(22,49,79,.10);
}

.moreResultsBtn:active{
  transform:scale(.98);
}

@media (max-width:640px){
  .moreResultsBtn{
    width:min(100%, 190px);
    margin:16px auto 4px;
    padding:13px 16px;
    font-size:14px;
  }
}
.travelSetupGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.stationFieldWrap{
  display:grid;
  gap:10px;
}

.stationSearchStubBtn{
  width:100%;
  min-height:52px;
  border-radius:16px;
  border:1px dashed rgba(22,49,79,.18);
  background:linear-gradient(180deg,#f9fbfc 0%,#f2f6f8 100%);
  color:#6b7a90;
  font-size:14px;
  font-weight:800;
  cursor:not-allowed;
  opacity:.78;
}
.originPickerBlock{
  display:grid;
  gap:12px;
}

.originPickerTrigger{
  width:100%;
  min-height:74px;
  border-radius:22px;
  padding:0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:2px solid #c7d5e3;
  background:linear-gradient(180deg,#ffffff 0%,#f5f9fc 100%);
  box-shadow:0 8px 18px rgba(16,24,40,.05);
  text-align:left;
}

.originPickerLabel{
  flex:0 0 auto;
  color:#1b6f6b;
  font-size:14px;
  font-weight:900;
}

.originPickerValue{
  flex:1 1 auto;
  color:#163053;
  font-size:17px;
  font-weight:800;
  min-width:0;
}

.originPickerCaret{
  flex:0 0 auto;
  color:#5f7387;
  font-size:18px;
  font-weight:900;
}

.originPickerPanel{
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(22,49,79,.10);
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfd 100%);
  box-shadow:0 16px 30px rgba(16,24,40,.08);
}

.originSearchField{
  display:grid;
  gap:8px;
}

.originSearchLabel,
.originSectionTitle{
  margin:0;
  color:#1b6f6b;
  font-size:14px;
  font-weight:900;
}

#originSearchInputQ1{
  width:100%;
  min-height:56px;
  border:2px solid #cad6e2;
  border-radius:16px;
  padding:0 16px;
  background:#fff;
  color:#163053;
  font-size:16px;
  font-weight:800;
}

.originCurrentBtn{
  width:100%;
  min-height:52px;
  border-radius:16px;
  border:1px solid rgba(22,49,79,.10);
  background:linear-gradient(180deg,#f8fcff 0%,#eef6fb 100%);
  color:#163053;
  font-size:15px;
  font-weight:900;
}

.originSection{
  display:grid;
  gap:10px;
}

.originChipRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.originChip,
.regionChip{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(22,49,79,.10);
  background:#fff;
  color:#274663;
  font-size:13px;
  font-weight:800;
}

.originCandidateList{
  display:grid;
  gap:8px;
}

.originCandidateBtn{
  width:100%;
  min-height:52px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid rgba(22,49,79,.10);
  background:linear-gradient(180deg,#ffffff 0%,#f7fafc 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
}

.originCandidateMain{
  color:#163053;
  font-size:15px;
  font-weight:800;
}

.originCandidateMeta{
  color:#6b7a90;
  font-size:12px;
  font-weight:800;
}

.originEmpty{
  padding:14px;
  border-radius:14px;
  background:#f7fafc;
  color:#6b7a90;
  font-size:13px;
  font-weight:700;
}

@media (max-width:640px){
  .originPickerTrigger{
    min-height:68px;
    padding:0 14px;
    border-radius:18px;
  }

  .originPickerValue{
    font-size:15px;
    line-height:1.4;
  }

  .originPickerPanel{
    padding:14px;
    border-radius:18px;
  }

  #originSearchInputQ1{
    min-height:52px;
    font-size:15px;
  }

  .originCurrentBtn{
    min-height:48px;
    font-size:14px;
  }

  .originChip,
  .regionChip{
    min-height:34px;
    padding:0 12px;
    font-size:12px;
  }

  .originCandidateBtn{
    min-height:48px;
    padding:0 12px;
  }

  .originCandidateMain{
    font-size:14px;
  }
}
.originChoiceWrap{
  display:flex;
  gap:10px;
  margin:0 0 4px;
}

.originChoiceBtn{
  flex:1;
  min-height:88px;
  padding:12px 10px;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease;
}

.originChoiceBtn:active{
  transform:scale(.97);
}

.originChoiceBtn.primary{
  flex:1.3;
  background:linear-gradient(135deg, #3a6ea5 0%, #2f5d8a 100%);
  color:#fff;
  border:none;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}

.originChoiceBtn.secondary{
  background:#f5f7f9;
  color:#223248;
  border:2px solid #d5dde5;
}

.originChoiceIcon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.18);
  font-size:18px;
  line-height:1;
}

.originChoiceBtn.secondary .originChoiceIcon{
  background:rgba(32,64,109,.06);
}

.originChoiceText{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.originChoiceTitle{
  margin:0;
  font-size:13px;
  line-height:1.18;
  font-weight:800;
  white-space:nowrap;
}

.originChoiceSub{
  margin-top:3px;
  font-size:11px;
  line-height:1.15;
  opacity:.78;
  white-space:nowrap;
}

@media (max-width:640px){
  .originChoiceWrap{
    gap:8px;
    margin:0 0 2px;
  }

  .originChoiceBtn{
    min-height:80px;
    padding:10px 8px;
    border-radius:15px;
    gap:8px;
  }

  .originChoiceIcon{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:17px;
  }

  .originChoiceTitle{
    font-size:12px;
  }

  .originChoiceSub{
    font-size:10px;
  }
}

@media (max-width:640px){
  .originChoiceWrap{
    gap:10px;
    margin:0 0 4px;
  }

  .originChoiceBtn{
    min-height:88px;
    padding:12px 10px;
    border-radius:16px;
    gap:10px;
  }

  .originChoiceIcon{
    width:38px;
    height:38px;
    border-radius:11px;
    font-size:18px;
  }

  .originChoiceTitle{
    font-size:13px;
  }

  .originChoiceSub{
    font-size:11px;
  }
}
#scrollTopBtn{
  position:fixed;
  right:14px;
  bottom:16px;
  z-index:1200;

  width:44px;
  height:44px;
  border:none;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#1f2a37;
  color:#fff;
  font-size:18px;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.18);

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:opacity .25s ease, visibility .25s ease, transform .25s ease;
  transform:translateY(6px);
}

#scrollTopBtn.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
/* ===== 検索結果バナー調整（最優先） ===== */

.searchGuideBanner{
  border-radius:18px;
}

@media (max-width:640px){
  .searchGuideBanner{
    border-radius:16px;
  }
}
.yunohaGuideImgQla{
  width: 160px;
  height: auto;
}
/* QLAモーダル専用サイズ調整 */
.yunohaGuide.yunohaGuideQla{
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.yunohaGuide.yunohaGuideQla .yunohaGuideImgQla{
  width: 200px;
  height: auto;
}

.yunohaGuide.yunohaGuideQla .yunohaGuideText{
  display: flex;
  align-items: center;
}

@media (max-width: 640px){
  .yunohaGuide.yunohaGuideQla{
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 12px;
  }

  .yunohaGuide.yunohaGuideQla .yunohaGuideImgQla{
    width: 140px;
  }
}
.yunohaGuide.yunohaGuideQla{
  align-items: center;   /* ←これが超重要 */
}

.yunohaGuide.yunohaGuideQla .yunohaGuideImgQla{
  display: block;
}

.yunohaGuide.yunohaGuideQla .yunohaGuideText{
  display: flex;
  flex-direction: column;
  justify-content: center; /* ←縦中央に揃える */
}
@media (max-width:640px){
  .yunohaGuideImgQla{
    width:96px !important;
    height:72px !important;
  }
}
@media (max-width:640px){
  .yunohaGuide .yunohaGuideQla .yunohaGuideImgQla{
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    display:block;
  }

  .yunohaGuide{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:640px){
  .yunohaGuide.yunohaGuideQla{
    display:block !important;
  }

  .yunohaGuide.yunohaGuideQla .yunohaGuideImgQla{
    width:100% !important;
    height:auto !important;
    display:block !important;
    margin:0 0 12px 0 !important;
  }

  .yunohaGuide.yunohaGuideQla .yunohaGuideText{
    display:block !important;
    width:100% !important;
  }

  .yunohaGuide.yunohaGuideQla .yunohaGuideLead{
    font-size:15px !important;
    line-height:1.6 !important;
  }

  .yunohaGuide.yunohaGuideQla .qlaEn{
    display:block !important;
    margin-top:6px !important;
  }
}
/* =========================
   TOP YUNOHA HERO IMAGE
   ========================= */

.yunohaGuideTop{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  align-items:start;
}

.yunohaTopVisualWrap{
  position:relative;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}

.yunohaGuideImgTopHero{
  display:block;
  width:100%;
  max-width:440px;
  height:auto;
  object-fit:contain;
}

.yunohaNameTag{
  position:absolute;
  left:10px;
  top:28px;
  writing-mode:vertical-rl;
  text-orientation:upright;
  font-family:"Yuji Syuku","Hiragino Maru Gothic Pro","Yu Gothic","MS PGothic",cursive;
  font-size:15px;
  line-height:1;
  letter-spacing:1px;
  color:#d77a86;
  text-shadow:
    0.5px 0.5px 0 rgba(255,255,255,.9),
    -0.5px -0.5px 0 rgba(255,255,255,.9),
    0 0 4px rgba(255,255,255,.55);
  pointer-events:none;
  opacity:.95;
}

.yunohaGuideTop .yunohaGuideText{
  display:flex;
  justify-content:center;
}

.yunohaGuideTop .yunohaGuideSub{
  margin:0;
  text-align:center;
  max-width:28em;
}

@media (max-width:640px){
  .yunohaGuideTop{
    gap:10px;
  }

  .yunohaGuideImgTopHero{
    max-width:360px;
  }

  .yunohaNameTag{
    left:6px;
    top:18px;
    font-size:13px;
  }

  .yunohaGuideTop .yunohaGuideSub{
    font-size:13px;
    line-height:1.55;
  }
}
/* =========================
   TOP YUNOHA FINAL OVERRIDE
   画像は大きく、テキストは温泉の上に重ねる
   ========================= */

#yunohaTopGuide.yunohaGuideTop{
  position:relative !important;
  display:block !important;
  padding:12px !important;
  overflow:hidden !important;
}

#yunohaTopGuide .yunohaTopVisualWrap{
  position:relative !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  display:block !important;
}

#yunohaTopGuide .yunohaGuideImgTopHero{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  object-fit:contain !important;
}

#yunohaTopGuide .yunohaNameTag{
  position:absolute !important;
  left:8px !important;
  top:42px !important;
  writing-mode:vertical-rl !important;
  text-orientation:upright !important;
  font-family:"Hachi Maru Pop","Yuji Syuku","Hiragino Maru Gothic Pro","Yu Gothic",cursive !important;
  font-size:14px !important;
  line-height:1 !important;
  letter-spacing:1px !important;
  color:#d98995 !important;
  text-shadow:
    1px 1px 0 rgba(255,255,255,.95),
   -1px -1px 0 rgba(255,255,255,.95),
    0 0 3px rgba(255,255,255,.75) !important;
  transform:rotate(-4deg) !important;
  opacity:.98 !important;
  pointer-events:none !important;
  z-index:2 !important;
}



#yunohaTopGuide .guideBreak{
  display:inline !important;
}

@media (max-width:640px){
  #yunohaTopGuide.yunohaGuideTop{
    padding:10px !important;
  }

 

  #yunohaTopGuide .yunohaNameTag{
    left:6px !important;
    top:36px !important;
    font-size:13px !important;
  }
}
#yunohaTopGuide .yunohaGuideSub{
  font-size:0 !important;
}

#yunohaTopGuide .guideLine{
  display:block !important;
  white-space:nowrap !important;
  font-size:13px !important;
}
#yunohaTopGuide .yunohaGuideText{
  position:absolute !important;
  top:22px !important;
  right:8px !important;
  width:56% !important;
  margin:0 !important;
  z-index:3 !important;
}

#yunohaTopGuide .guideLine{
  display:block !important;
  white-space:nowrap !important;
  font-size:13px !important;
  line-height:1.5 !important;
  letter-spacing:-0.01em !important;
  font-weight:400 !important;
  color:#2b2b2b !important;
}

#yunohaTopGuide .guideLine + .guideLine{
  margin-top:6px !important;
}
.searchGuideBannerWrap + *{
  margin-top: 6px;
}
.searchGuideBanner--yunoha{
  max-width: 320px;
  margin: 0 auto;
}

@media (max-width:640px){
  .searchGuideBanner--yunoha{
    max-width: 260px;
  }
}
/* =========================
   APP SPLASH
   ========================= */

.aboutYunoha {
  max-width: 240px;
  width: 100%;
  height: auto;
}
.favBtn.isSaved .favIcon {
  animation: yunohaGlow 2.2s ease-in-out infinite;
}

@keyframes yunohaGlow {
  0% {
    filter: drop-shadow(0 0 0 rgba(255,200,80,0));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(255,200,80,0.5));
    transform: scale(1.04);
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(255,200,80,0));
    transform: scale(1);
  }
}
.postFeedWrap{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.postCard{
  background:linear-gradient(180deg,#fffdf9 0%,#f8f5ef 100%);
  border:1px solid rgba(22,49,79,.08);
  border-radius:22px;
  padding:14px;
  box-shadow:0 12px 26px rgba(18,33,45,.06);
}

.postCardHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.postUser{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.postAvatar{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
  border:1px solid rgba(22,49,79,.08);
}

.postUserMeta{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.postNickname{
  font-size:13px;
  line-height:1.35;
  font-weight:900;
  color:#18334c;
}

.postCardDate{
  font-size:11px;
  line-height:1.35;
  color:#7a8795;
  font-weight:700;
}

.postIntro{
  margin:8px 0 14px;
  color:#6b7c8c;
  font-size:13px;
  line-height:1.6;
  font-weight:700;
}

.tagLabel{
  font-size:12px;
  color:#6b7c8c;
  margin:12px 0 8px;
  font-weight:800;
}

.postTagRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:4px;
}

.postTagBtn{
  min-height:34px;
  padding:0 12px;
  border:none;
  border-radius:999px;
  background:linear-gradient(180deg,#f7fbfa 0%,#edf5f3 100%);
  border:1px solid rgba(83,122,122,.14);
  color:#315a63;
  font-size:12px;
  font-weight:900;
  box-shadow:0 4px 10px rgba(16,24,40,.04);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.postTagBtn:active{
  transform:scale(.98);
}

.postTagBtn.isSelected{
  background:linear-gradient(180deg,#8dc7bc 0%,#5ea79a 100%);
  color:#ffffff;
  box-shadow:0 8px 16px rgba(28,111,107,.18);
}

.postNote{
  font-size:11px;
  color:#7a8795;
  line-height:1.6;
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:linear-gradient(180deg,#fafcfd 0%,#f2f6f8 100%);
  border:1px solid rgba(22,49,79,.06);
}

.postForm textarea{
  width:100%;
  min-height:110px;
  margin-top:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(22,49,79,.10);
  background:#fff;
  color:#2c3f53;
  font-size:14px;
  line-height:1.7;
  resize:vertical;
}

.postForm input[type="file"]{
  width:100%;
  margin-top:8px;
  margin-bottom:2px;
}

#submitPostBtn{
  width:100%;
  min-height:48px;
  margin-top:14px;
  border:none;
  border-radius:16px;
  background:linear-gradient(180deg,#1d8f87 0%,#146d68 100%);
  color:#ffffff;
  font-size:15px;
  font-weight:900;
  box-shadow:0 10px 22px rgba(20,109,104,.20);
}

@media (max-width:640px){
  .postIntro{
    font-size:12px;
    margin:6px 0 12px;
  }

  .tagLabel{
    font-size:11px;
    margin:10px 0 7px;
  }

  .postTagBtn{
    min-height:32px;
    padding:0 11px;
    font-size:11px;
  }

  .postForm textarea{
    min-height:96px;
    font-size:13px;
    line-height:1.65;
  }

  #submitPostBtn{
    min-height:46px;
    font-size:14px;
  }
}

.postManageRow{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}

.postMiniBtn{
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(22,49,79,.10);
  background:linear-gradient(180deg,#ffffff 0%,#f5f8fb 100%);
  color:#1d415e;
  font-size:11px;
  font-weight:900;

  /* 追加ここ */
  opacity:0.6;
}

/* 追加ここ */
.postCard:hover .postMiniBtn{
  opacity:1;
}
.postMiniBtnDanger{
  color:#8b3d3d;
}

.postOnsenMeta{
  margin-top:10px;
}

.postCardName{
  margin:0;
  font-size:22px;
  line-height:1.15;
  color:#14595d;
  font-weight:900;
  letter-spacing:-0.02em;
}

.postCardPref{
  margin-top:4px;
  font-size:12px;
  color:#738396;
  font-weight:800;
}

.postCardImage{
  display:block;
  width:100%;
  margin-top:12px;
  border-radius:18px;
  object-fit:cover;
  max-height:420px;
  background:#eef2f4;
}

.postCardMemo{
  margin:12px 0 0;
  font-size:14px;
  line-height:1.7;
  color:#2c3f53;
  font-weight:700;
}

.postCardTags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.postCardTag{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(180deg,#f7fbfa 0%,#edf5f3 100%);
  border:1px solid rgba(83,122,122,.14);
  color:#315a63;
  font-size:11px;
  font-weight:900;
}

.postCardFoot{
  display:flex;
  justify-content:flex-start;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(22,49,79,.08);
}

.postLikeBtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(22,49,79,.10);
  background:linear-gradient(180deg,#ffffff 0%,#f5f8fb 100%);
  color:#23415d;
  font-size:12px;
  font-weight:900;
}

.postLikeBtn.isLiked{
  background:linear-gradient(180deg,#fff3f6 0%,#ffe4ec 100%);
  color:#a34d69;
  border-color:rgba(163,77,105,.18);
}

.postLikeIcon{
  font-size:14px;
  line-height:1;
}

.postLikeCount{
  min-width:1.5em;
  text-align:center;
}

@media (max-width:640px){
  .postCard{
    padding:13px;
    border-radius:20px;
  }

  .postCardName{
    font-size:20px;
  }

  .postCardMemo{
    font-size:13px;
  }

  .postManageRow{
    flex-direction:column;
    align-items:flex-end;
  }
}
/* ===== 体験傾向（今回追加） ===== */

.yrTrendYunoha{
  margin:8px 0 0;
  color:#6b5c4f;
  font-size:11px;
  line-height:1.6;
  font-weight:700;
}

.yrExpandSection--trend{
  background:linear-gradient(180deg,#fffdf8 0%,#f8f5ee 100%);
}
/* ===== YUNOHA 最終調整（上書き専用） ===== */
.yunohaGuide {
  padding: 10px 12px !important;
  margin-bottom: 6px !important;
}

.yunohaGuide p {
  margin: 4px 0 !important;
  line-height: 1.4 !important;
}
.qBlock {
  margin-bottom: 12px;
}
.primaryBtn {
  margin-top: 12px;
  margin-bottom: 8px;
}

.selectBox {
  padding: 12px;
}
#rankingList .rankCard.yrCard.rankCardClean .cleanUtility{
  position: static !important;
  transform: none !important;
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanScoreBox{
  position: relative;
}
#rankingList .rankCard.yrCard.rankCardClean .cleanTitleRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanTitleBlock{
  flex:1;
  min-width:0;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanUtility{
  position:static !important;
  transform:none !important;
  margin-top:0 !important;
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanFavBtn{
  width:72px;
  height:72px;
  min-width:72px;
  min-height:72px;
  border-radius:999px;
}

#rankingList .rankCard.yrCard.rankCardClean .cleanFavIcon{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
}
/* SS → 赤 */
.yrDots.tone-ss .qlaDot.active{
  background:linear-gradient(180deg,#ff4d4f 0%,#d9363e 100%) !important;
  border-color:rgba(180,40,40,.25) !important;
}

/* S → オレンジ */
.yrDots.tone-s .qlaDot.active{
  background:linear-gradient(180deg,#ffa940 0%,#d9822b 100%) !important;
  border-color:rgba(180,120,40,.25) !important;
}

/* A → イエロー（tone-normalを使う） */
.yrDots.tone-normal .qlaDot.active{
  background:linear-gradient(180deg,#ffd666 0%,#d6b85a 100%) !important;
  border-color:rgba(180,150,60,.25) !important;
}

/* B → 黄緑 */
.yrDots.tone-b .qlaDot.active{
  background:linear-gradient(180deg,#95de64 0%,#5fa83a 100%) !important;
  border-color:rgba(90,140,60,.25) !important;
}
/* ===== 強制上書き ===== */
.yrThumbWrap{
  position: relative;
}
.yrCardBadges{
  display:flex;
  align-items:center;
  gap:10px;
  position:absolute;
  top:14px;
  left:14px;
  z-index:3;
}

.yrGradeBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:14px;
  font-weight:800;
  letter-spacing:.04em;
  box-shadow:0 4px 10px rgba(0,0,0,.10);
}

.grade-ssr{
  background:linear-gradient(135deg,#c58a00,#f7df8a);
  color:#fff;
}

.grade-sr{
  background:linear-gradient(135deg,#d8b44a,#f3e3a7);
  color:#5b4300;
}

.grade-ssplus{
  background:#1f5f66;
  color:#fff;
}

.grade-splus{
  background:#4a7380;
  color:#fff;
}