:root {
  --bg: #070006;
  --txt: #ffe4f0;
  --muted: #ff9ec6;
  --line: rgba(255, 150, 200, .25);

  --pink1: #ff2f92;
  --pink2: #ff5db5;
  --pink3: #ff9cd6;
  --hot: #ff1f7e;

  --panel: rgba(255, 50, 140, .09);
  --panel2: rgba(255, 50, 140, .04);

  --r: 16px;
  --thumbW: 170px;
  --headerH: 80px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--txt);
  background:
    radial-gradient(950px 520px at 18% -10%, rgba(255, 50, 140, .38), transparent 60%),
    radial-gradient(900px 560px at 85% 0%, rgba(255, 120, 200, .30), transparent 60%),
    radial-gradient(900px 640px at 50% 112%, rgba(180, 0, 110, .22), transparent 62%),
    var(--bg);
  overflow-x: hidden;
}

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

.wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}
main.wrap{
  padding-top: 80px;    /* 80pxロゴ＋余白 */
}

/* ===== Header ===== */

@keyframes glowPulse {
  0% {
    filter: drop-shadow(0 0 0 rgba(255, 47, 146, 0));
  }

  50% {
    filter: drop-shadow(0 0 18px rgba(255, 47, 146, .25));
  }

  100% {
    filter: drop-shadow(0 0 0 rgba(255, 47, 146, 0));
  }
}

.topbar {
  position: fixed;
  top: 0;
  left:0;
  right:0;
  z-index: 60;
  height: var(--headerH);
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(7, 0, 6, .82);
  backdrop-filter: blur(12px) saturate(175%);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index:999;
}

/* left */
.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.logo img {
  width: 120px;
  /* 指定どおり */
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow:
    0 0 18px rgba(255, 80, 160, .42),
    0 0 30px rgba(255, 0, 120, .25);
  animation: glowPulse 4.2s ease-in-out infinite;
}

/* center catch (important: min-width:0 to prevent layout break) */
.topbar__catch {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  line-height: 1.25;
  pointer-events: none;
  /* クリック邪魔しない */
}

.topbar__main {
  font-size: 15px;
  font-weight: 1100;
  color: var(--pink3);
  text-shadow: 0 0 14px rgba(255, 47, 146, .65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__sub {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 900;
  color: #ff7bbf;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* right */
.lang {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  /*
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  */
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.lang select {
  background: rgba(0, 0, 0, .35);
  color: #fff;
  border: 1px solid rgba(255, 150, 200, .30);
  padding: 6px 8px;
  border-radius: 10px;
  outline: none;
  font-weight: 900;
  cursor: pointer;
}

/* Mobile: subline hidden, main smaller, keep stable */
@media (max-width: 768px) {
  .topbar {
    gap: 10px;
    padding: 10px 12px;
  }

  .topbar__main {
    font-size: 13px;
  }

  .topbar__sub {
    display: none;
  }

  .lang {
    padding: 7px 8px;
    font-size: 11px;
  }

  .lang select {
    padding: 5px 7px;
  }
}

/* ===== Hero (if you still use it somewhere) ===== */
.hero {
  padding: 24px 0 10px;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: 28px;
  color: var(--pink3);
  text-shadow: 0 0 26px rgba(255, 47, 146, .72);
  letter-spacing: .6px;
}

.hero p {
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 900;
}

.seo {
  margin: 12px auto 0;
  max-width: 900px;
  font-size: 12.5px;
  line-height: 1.85;
  color: rgba(255, 200, 225, .86);
  background: rgba(0, 0, 0, .18);
  border: 1px dashed rgba(255, 150, 200, .22);
  border-radius: 14px;
  padding: 12px 14px;
}

/* ===== Section Title ===== */

.listTitle {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 8px;
}

.listTitle h2 {
  margin: 0;
  font-size: 16px;
  color: #ffd2e6;
  letter-spacing: .6px;
}

.rankBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 150, 200, .28);
  background: linear-gradient(135deg, rgba(255, 47, 146, .18), rgba(182, 76, 255, .10));
  color: #ffe1ef;
  font-weight: 1100;
  font-size: 12px;
  box-shadow: 0 0 18px rgba(255, 47, 146, .12);
}

.rankBadge b {
  color: #fff;
}

/* ===== List / Cards ===== */

.list {
  padding: 10px 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.row {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  /* ← main狭く、thumb広く */
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  overflow: hidden;
  cursor: pointer;
  transition: .18s;
  position: relative;
}

.row:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 80, 160, .12) inset,
    0 0 40px rgba(255, 80, 160, .25);
}

.row:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 30, 120, .12), transparent 55%);
}

.row__main {
  padding: 14px;
  position: relative;
  padding-bottom:60px;     /* ボタン分の余白確保 */
}

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

.title {
  font-size: 18px;
  font-weight: 1100;
  color: #fff;
  text-shadow: 0 0 12px rgba(255, 80, 160, .60);
}

.badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 150, 200, .28);
  background: rgba(255, 50, 140, .08);
  color: #ffd0e4;
  font-weight: 1100;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 0 14px rgba(255, 80, 160, .12);
}

.desc {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.65;
  /*display: -webkit-box;*/
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /*overflow:hidden;*/
}

.actions {
  position:absolute;
  left:14px;
  bottom:14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--hot), var(--pink2));
  border: 1px solid rgba(255, 150, 200, .22);
  box-shadow:
    0 0 12px rgba(255, 50, 140, .50),
    0 0 22px rgba(255, 100, 180, .28);
  transition: .15s;
  
  padding:12px 18px;
  font-size:13px;
  font-weight:1100;
  border-radius:14px;
}
.btn:hover{
  transform: translateY(-2px) scale(1.03);
}

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

.qbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 150, 200, .26);
  background: rgba(0, 0, 0, .18);
  color: #ffd2e6;
  font-weight: 1100;
  font-size: 12px;
  transition: .12s;
}

.qbtn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(255, 47, 146, .14);
}

.row__thumb {
  position: relative;
  border-left: 1px solid rgba(255, 150, 200, .14);
  background: rgba(0, 0, 0, .25);
}

.row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.3) contrast(1.05);
  /*transform: scale(1.02);*/
  object-position: left center; /* ← 左寄せで見せる */
}

.row__thumb:after {
  content: "";
  position: absolute;
  inset: 0;
  /*background: linear-gradient(90deg, rgba(7,0,6,.78), transparent 5%);*/
  pointer-events: none;
}

/* ===== Footer ===== */

.footer {
  border-top: 1px solid rgba(255, 150, 200, .18);
  padding: 16px 0 26px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

/* ===== Responsive for cards ===== */

@media (max-width:768px){

  .topbar{
    height:auto !important;
    padding:8px 10px;

    display:grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;

    align-items:start;
    gap:4px 8px;
  }

  /* ロゴ：左側で2行分使う */
  .logo{
    grid-column:1;
    grid-row:1 / 3;   /* ★2行使う */
    align-self:start;
  }

  .logo img{
    height:64px;
    width:auto;
  }

  /* LANG：右上 */
  .lang{
    grid-column:2;
    grid-row:1;
    justify-self:end;

    padding:4px 6px;
    font-size:10px;
    gap:4px;
  }

  .lang select{
    padding:2px 6px;
    font-size:10px;
  }

  /* キャッチ：LANGのすぐ下 */
  .topbar__catch{
    max-width: 210px;        /* ← 右側で暴れない上限。必要なら240へ */
    justify-self:end;
    text-align:right;
    line-height:1.12;
  }

  .topbar__main{
    font-size:12px;
    white-space:nowrap;      /* 1行で見せる */
    overflow:hidden;
    text-overflow:ellipsis;  /* 収まらなければ … */
  }

  .topbar__sub{
    display:block !important;
    font-size:10px;
    margin-top:2px;

    white-space:nowrap;      /* 2行目も1行固定 */
    overflow:hidden;
    text-overflow:ellipsis;  /* 収まらなければ … */
    opacity:.95;
  }

}

/* SP: row__thumb を上、row__main を下（上下レイアウト） */
@media (max-width:560px){
  .row{
    display:flex;              /* gridを上書き */
    flex-direction:column;
  }

  .row__thumb{
    order:1;
    width:100%;
    height:200px;              /* 好みで 160〜220 */
    border-left:none;
    border-bottom:1px solid rgba(255,150,200,.14);
  }

  .row__main{
    order:2;
    width:100%;
  }

  .row__thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:left center; /* 左寄せ維持 */
  }

  /* 既存の .row:before の横グラデが縦積みだと不自然なら薄くする */
  .row:before{
    background: linear-gradient(180deg, rgba(255,30,120,.10), transparent 60%);
  }
}