@charset "utf-8";

/* ベーススタイル */
.listArea {
  display: flex;          /* フレックスレイアウト */
  flex-wrap: wrap;        /* 横幅からはみ出したら折り返し */
  gap: 1.2rem;            /* カード間の余白 */
  justify-content: center;/* 中央揃え（左詰めなら flex-start） */
  width: 100%;            /* 画面幅いっぱい */
  box-sizing: border-box; /* gap計算時に余白を含む */
  /* padding: 1rem;          余白は任意 */
}

/* 女の子カード全体 */
.card {
  position: relative;
  min-width:240px;
  max-width:280px;
  background-color: #fa8fc1;
  /* border: 5px solid rgba(248, 188, 228, 0.4); */
  border-radius: 15px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
  padding-bottom:1rem;
  text-align: center;
}
.card.newwari1{
  background:#79b7eb;
}
.card.newwari2{
  background:#d3b75d;
}
.card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* hover:shadow-xl */
}

/* 画像 */
.card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
  margin: 0 auto 1rem;
  display: block;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;

}
.frame_new{
  position: absolute;
  top: 0;
  left: 0;
}
.frame_icon{
  position: absolute;
  bottom:0;
  right: 0;
}

/* 画像ホバー時のオーバーレイ */
.card-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.6);
  /* backdrop-filter: blur(8px); */
  /* -webkit-backdrop-filter: blur(8px); */
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.card-img:hover .card-img-overlay {
  opacity: 1;
}

.card-img-overlay a.text{
  display: block;
  color: #333;
  font-size: 0.775rem;
  line-height: 1.6;
  text-align: center;
  margin: 0;
  overflow-y: hidden;
  max-height: 100%;
  word-wrap: break-word;
  text-decoration:none;
}


/* キャッチコピー - 自動スクロール版 */
.card-catch {
  position: absolute;
  top:5px;
  right:0%;
  width:80%;
  padding:0.2rem;
  background:rgba(255, 130, 207, 0.5);
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
  text-shadow: 2px 2px 4px rgba(214, 5, 127, 1);
  margin-bottom:0.4rem;
  font-size: 0.875rem;
  color: #FFF;
  line-height: 1.6;
  z-index:9;
  overflow: hidden;
  white-space: nowrap;
}

.card-catch p {
  display: inline-block;
  white-space: nowrap;
  margin: 0;
  padding-left: 100%;
  animation: marqueeLinear 20s linear infinite;
  will-change: transform;
}

.card-catch:hover p {
  animation-play-state: paused;
}

.card-catch p span {
  display: inline-block;
  padding-right: 2em;
}

@keyframes marqueeLinear {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 枠 */
.card-cont {
  color: #FFFFFF; /* text-pink-600 */
}

/* 名前 */
.card-name {
  font-size: 1.125rem;
  font-weight: 600;
}

/* サイズ（身長・スリーサイズなど） */
.card-size {
  font-size: 0.875rem;
}

/* キャストアイコン */
.card .card-cast-icon {
  display: flex;
  flex-wrap: wrap;
  width:100%;
  padding-top:30px;
}
.card .card-cast-icon p{
  width:50%;
  color: #777;
}

/* スケジュール用の時間バッジ */
.card-schedule
{
  width:96%;
  box-sizing: border-box;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937; /* text-gray-800 */
  background-color: #fce7f3; /* bg-pink-100 */
  border-radius: 50vmax;
  padding: 0.25rem 0.75rem;
  display: inline-block;
}


.card-status{
  width:100%;
  box-sizing: border-box;
  margin-top: 0.5rem;
  font-size: 0.975rem;
  font-weight: 500;
  color: #FFF; /* text-gray-800 */
  padding: 0.25rem 0.75rem;
  display: inline-block;
}

/* メディアクエリ：スマホサイズ（〜768px） */
@media screen and (max-width: 768px) {
  .listArea {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.2rem;
    padding: 0;
    width: 100%;
  }
  .card{
    width: 100%;
    min-width: auto;
    max-width: 100%;
  }

  .card-img {
    margin-bottom: 0.8rem;
  }

  .card-img-overlay {
    padding: 0.5rem;
  }

  .card-img-overlay p {
    font-size: 0.75rem;
  }

  .card-name {
    font-size: 1rem;
  }

  .card-size {
    font-size: 0.75rem;
  }

  .card-catch {
    font-size: 0.75rem;
  }

  .card-catch p {
    animation-duration: 15s;
  }

  /* スケジュール用の時間バッジ */
  .card-schedule {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    white-space: nowrap;
  }
  .card-schedule span{
    display: inline;
    white-space: nowrap;
  }

  /* ステータス用のバッジ */
  .card-status {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
  }
  .card-status span{
    white-space: nowrap;
  }
}

/* メディアクエリ：PCサイズ（640px〜） */
@media screen and (min-width: 640px) {

}

@media screen and (min-width: 768px) {
  .card {
  }
}

@media screen and (min-width: 1024px) {
  .card {
  }
}