*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#f6f7f9;color:#17191c}button,input,select{font:inherit}.site-header,main{max-width:1080px;margin:auto}.site-header{padding:28px 18px 10px;display:flex;justify-content:space-between;gap:16px;align-items:center}.eyebrow{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.08em;color:#737982;text-transform:uppercase}h1,h2,h3,p{margin-top:0}.site-header h1{font-size:clamp(26px,6vw,44px);margin-bottom:0}main{padding:18px}.search-panel{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:18px;box-shadow:0 10px 30px rgba(0,0,0,.04)}label{display:block;font-size:13px;font-weight:700;margin-bottom:8px}.search-row{display:grid;grid-template-columns:1fr auto;gap:10px}.search-row input,.filters select{width:100%;padding:13px 14px;border:1px solid #d8dce2;border-radius:12px;background:#fff}.filters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.primary,.secondary,.icon-btn,.chips button{border:0;border-radius:12px;padding:12px 15px;cursor:pointer}.primary{background:#17191c;color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.secondary,.icon-btn,.chips button{background:#fff;border:1px solid #d8dce2;color:#17191c}.chips{display:flex;gap:8px;overflow-x:auto;padding:16px 0}.chips button.active{background:#17191c;color:#fff}.result-header{display:flex;align-items:end;justify-content:space-between;margin:14px 0}.result-header h2{margin-bottom:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.035)}.thumb{position:relative;aspect-ratio:16/10;background:#e9ebef}.placeholder{height:100%;display:flex;align-items:center;justify-content:center;color:#969ca5;font-weight:800;letter-spacing:.12em}.badge{position:absolute;z-index:1;top:10px;left:10px;background:#17191c;color:#fff;padding:6px 8px;border-radius:999px;font-size:11px}.card-body{padding:15px}.meta{font-size:12px;color:#777f89;margin-bottom:7px}.card h3{font-size:18px;line-height:1.4;margin-bottom:8px}.description{font-size:13px;line-height:1.65;color:#59606a}.tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.tags span{font-size:11px;background:#f1f3f5;padding:5px 7px;border-radius:999px}.card-footer{display:flex;align-items:end;justify-content:space-between;gap:10px}.price{display:block}.rating{font-size:12px;color:#737982}.actions{display:flex;gap:7px}.favorite.active{background:#17191c;color:#fff}.age-gate{position:fixed;inset:0;background:rgba(15,16,18,.92);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}.age-card{width:min(440px,100%);background:#fff;border-radius:22px;padding:26px;text-align:center}.age-card h2{font-size:2em}.age-card .primary,.age-card .secondary{width:100%;margin-top:10px}.hidden{display:none!important}@media(max-width:800px){.cards{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr}.site-header{align-items:flex-start;flex-direction:column}.icon-btn{align-self:flex-end}}@media(max-width:560px){.cards{grid-template-columns:1fr}.search-row{grid-template-columns:1fr}.result-header{align-items:center}.card-footer{align-items:center}.site-header{padding-top:20px}}
@media (max-width: 768px) {
  .cards,
  .results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .card {
    min-width: 0;
  }

  .card-body {
    padding: 12px;
  }

  .card h3 {
    font-size: 14px;
    line-height: 1.4;
  }

  .card .description,
  .card .meta,
  .card .tags {
    font-size: 12px;
  }

   .card-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .card-footer > div:first-child {
    width: 100%;
    min-width: 0;
  }

  .actions {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    width: 100%;
  }

  .actions .favorite {
    width: 44px;
    min-width: 44px;
    padding: 10px 0;
  }

  .actions .primary {
    width: 100%;
    min-width: 0;
    padding: 10px 8px;
    font-size: 13px;
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .card h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
  }
}
@media (max-width: 768px) {
  .actions .primary {
    min-width: 74px;
    padding: 10px 0;
    font-size: 13px;
  }
}



  .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .card-footer {
    margin-top: auto;
  }
}

.header-description {
  margin-top: 12px;
  max-width: 620px;
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
}

@media (max-width: 768px) {
  .header-description {
    font-size: 0.95rem;
  }
}

/* ===== 気分から選ぶ ===== */

.mood-panel {
  margin: 32px 0;
  padding: 24px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.mood-heading {
  margin-bottom: 20px;
}

.mood-heading h2 {
  margin: 8px 0 0;
  font-size: 1.6rem;
}

.mood-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.mood-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 18px 12px;

  border: 1px solid #e5e5e5;
  border-radius: 14px;

  background: #fff;

  cursor: pointer;

  transition: all .2s ease;
}

.mood-button:hover {
  transform: translateY(-3px);
  border-color: #ff5b8a;
  box-shadow: 0 8px 20px rgba(255, 91, 138, .15);
}

.mood-icon {
  font-size: 1.8rem;
}

@media (max-width: 768px) {
  .mood-buttons {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== 選択中の気分 ===== */

.active-mood {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 16px;
  padding: 12px 16px;

  border: 1px solid #ffd3df;
  border-radius: 12px;

  background: #fff5f8;
}

.active-mood.hidden {
  display: none;
}

.clear-mood-btn {
  border: none;
  background: transparent;

  color: #ff4d7d;
  font-weight: 700;

  cursor: pointer;
}

.clear-mood-btn:hover {
  text-decoration: underline;
}

.results.recommend-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  scroll-snap-type: x proximity;
}

.recommend-carousel::-webkit-scrollbar {
  height: 8px;
}

.recommend-carousel::-webkit-scrollbar-thumb {
  background: #bbb;
  border-radius: 999px;
}

.recommend-carousel {
  align-items: stretch;
}

.recommend-carousel .card {
  min-width: 240px;
  flex: 0 0 240px;
  scroll-snap-align: start;

  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.recommend-carousel .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
}

.recommend-carousel .card h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;

  line-height: 1.4;
  height: 4.2em;
  min-height: 4.2em;
}

.recommend-carousel .description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  line-height: 1.65;
  height: 3.3em;
  min-height: 3.3em;
}

.recommend-carousel .tags {
  min-height: 0;
}

.recommend-carousel .card-footer {
  margin-top: auto;
}

.recommend-carousel .price-row {
  margin-top: auto;
}

/* ===== 作品タイトルを2行固定 ===== */
.card h3,
.recommend-carousel .card h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  overflow: hidden;
  line-height: 1.4;

  height: 2.8em;
  min-height: 2.8em;
  max-height: 2.8em;
}

/* ===== 今日のおすすめ・PC用左右矢印 ===== */
.recommend-heading {
  margin: 40px 0 20px;
}

.recommend-heading h2 {
  margin: 0;
}

.recommend-carousel-wrap {
  position: relative;
}

.recommend-arrow {
  position: absolute;
  top: 50%;
  z-index: 10;

  display: grid;
  place-items: center;

  width: 46px;
  height: 46px;
  padding: 0;

  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);

  color: #111;
  font-size: 32px;
  line-height: 1;

  cursor: pointer;
  transform: translateY(-50%);

  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.16);

  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.recommend-arrow-prev {
  left: -8px;
}

.recommend-arrow-next {
  right: -8px;
}

.recommend-arrow:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}

.recommend-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

/* スマホでは矢印を非表示 */
@media (max-width: 768px) {
  .recommend-arrow {
    display: none;
  }

  .recommend-heading {
    margin: 32px 0 16px;
  }
}

/* ===== カード高さを完全統一 ===== */

/* カード全体 */
.card {
  display: flex;
  flex-direction: column;
}

/* 本文 */
.card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 出演者・説明文を2行固定 */
.description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  line-height: 1.6;
  min-height: 3.2em;
  max-height: 3.2em;
}

/* タグの高さを固定 */
.tags {
  min-height: 30px;
}

/* フッターを最下部へ */
.card-footer {
  margin-top: auto;
}

.results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.popular-keywords {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 18px;
}

.popular-keywords-label {
  margin-right: 4px;
  color: #444;
  font-size: 14px;
  font-weight: 700;
}

.popular-keywords button {
  padding: 7px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  color: #333;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.popular-keywords button:hover {
  border-color: #e60023;
  background: #fff5f7;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .popular-keywords {
    gap: 7px;
  }

  .popular-keywords-label {
    width: 100%;
  }

  .popular-keywords button {
    padding: 7px 10px;
    font-size: 12px;
  }
}

.search-panel {
  position: relative;
}

.autocomplete-list {
  position: absolute;
  z-index: 50;
  top: 112px;
  left: 18px;
  right: 92px;

  overflow: hidden;

  background: #fff;
  border: 1px solid #d8dce2;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.autocomplete-item {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;

  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

.autocomplete-item:last-child {
  border-bottom: 0;
}

.autocomplete-item:hover,
.autocomplete-item.active {
  background: #f1f3f5;
}

/* Normal-flow shortcuts stay below the age gate and fit narrow phones. */
.site-header > div { min-width: 0; max-width: 100%; }
.header-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.top-quick-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin-top: 16px;
}
.quick-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px;
  border: 1px solid #17191c;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.quick-link-search { background: #17191c; color: #fff; }
.quick-link-sale { background: #fff; color: #a31332; border-color: #a31332; }
.quick-link:focus-visible { outline: 3px solid #2463c7; outline-offset: 3px; }
#searchPanel, #saleBrowse { scroll-margin-top: 16px; }
#saleNavigationStatus:empty { display: none; }
@media (max-width: 360px) {
  .top-quick-nav { grid-template-columns: minmax(0, 1fr); }
}

/* The outer main contains the homepage; browsing retains its previous padding. */
#mainContent { max-width: none; padding: 0; }
.browse-content { max-width: 1080px; margin: auto; padding: 18px; }
.initial-catalog { margin: 24px 0; padding: 18px; background: #fff; border: 1px solid #e5e7eb; border-radius: 18px; overflow-wrap: anywhere; }
.initial-catalog ul { padding-left: 20px; }
.initial-catalog h3 { font-size: 16px; line-height: 1.6; }
.initial-catalog li { margin-bottom: 20px; }

#recommendArea, #recommendSection { max-width: 1080px; margin-inline: auto; padding-inline: 18px; }