@charset "utf-8";

/* ===============================
   レイアウト基本（PC）
=============================== */
.cast-page {
  max-width: 1000px;
  margin: 40px auto;
  padding: 10 20px;
}

.cast-detail {
  display: flex;
  gap: 50px;
  align-items: flex-start;
}

/* ===============================
   写真ブロック（カード枠）
=============================== */
.cast-photo {
  flex: none;
  width: 300px;              /* 写真267px + 左右余白分 */
  padding: 16px;
  background: #fff;          /* 枠の背景色 */
  border-radius: 20px;       /* 角丸 */
  border: 1px solid #eee;    /* 薄い枠線 */
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); /* 影で立体感 */
  margin-bottom: 20px;
	
  height: auto !important;
  aspect-ratio: auto !important;
  overflow: visible;
  
  margin: 12px auto 20px;
  padding: 14px;
  box-sizing: border-box;

  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 6px 18px rgba(0,0,0,0.10),
    0 0 0 1px rgba(0,0,0,0.04);
}
/* メイン画像は絶対に動かさない */
#mainPhoto {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  aspect-ratio: auto;
 aspect-ratio: 3 / 4;
  display: block;
   border-radius: 12px;
  background: #f5f5f5;
}

/* サムネイルエリア */
.photo-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
	margin-top: 14px;
 
}

/* サムネイル画像（指定サイズ 93x140） */
.photo-thumbs img {
  width: 93px;
  height: 140px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.photo-thumbs img:hover {
  opacity: 1;
}

/* ===============================
   プロフィールエリア
=============================== */
.cast-profile {
  flex: 1;
}

.cast-name {
  font-size: 2.2rem;
  color: var(--azuki);
  font-weight: 800;
  margin: 0 0 8px 0;
}

.cast-basic {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #555;
  margin-bottom: 25px;
}

.cast-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.skill {
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: bold;
  border-radius: 4px;
  color: #fff;
}

/* スキルカラー */
.skill.talk { background: #a59ad1; }
.skill.cleaning { background: #88b79a; }
.skill.bath { background: #87adc7; }
.skill.laundry { background: #9bbbd1; }
.skill.alcohol { background: #d99a8b; }
.skill.cooking { background: #d9ac8b; }
/* 追加項目 (既存のトーンに合わせて調整) */
.skill.drink    { background: #d6817b; } /* 晩酌 (赤を柔らかく) */
.skill.sake     { background: #b194bc; } /* お酒のお供 (紫を淡く) */
.skill.game     { background: #87a9d1; } /* ゲーム (爽やかな青) */
.skill.karaoke  { background: #e8a3bc; } /* カラオケ (優しいピンク) */
.skill.walk     { background: #96c78e; } /* 散歩 (若草色) */
.skill.shopping { background: #e9d18b; } /* お買い物 */
.skill.massage  { background: #e3bc8d; } /* マッサージ (肌馴染みの良いオレンジ) */
/* ===============================
   詳細データ（表レイアウト共通）
=============================== */
.cast-data {
  display: grid;
  grid-template-columns: 110px 1fr;
  row-gap: 12px;
  column-gap: 16px;
  width: 100%;
  margin-top: 16px;
}

/* 項目名（左列） */
.cast-data dt {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: #666;
  text-align: right;
  line-height: 1.6;
}

/* 値（右列） */
.cast-data dd {
  margin: 0;
  font-size: 0.95rem;
  color: #222;
  line-height: 1.6;
  padding-bottom: 6px;
  border-bottom: 1px dashed #e5e5e5;
}

/* 最終行の下線を除去 */
.cast-data dd:last-of-type {
  border-bottom: none;
}

@media (max-width: 768px) {

  /* ─────────────
     詳細データ（表レイアウト）
  ───────────── */
  .cast-data {
    order: 4;
    width: 100%;
    max-width: 360px;
    margin: 12px auto 0;
    display: grid;
    grid-template-columns: 110px 1fr; /* 左：項目 / 右：値 */
    row-gap: 10px;
    column-gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #eee;
  }

  .cast-data dt {
    font-size: 0.85rem;
    font-weight: 600;
    color: #666;
    text-align: right;
    padding: 6px 0;
  }

  .cast-data dd {
    margin: 0;
    font-size: 0.95rem;
    color: #222;
    padding: 6px 0;
    border-bottom: 1px dashed #e6e6e6;
  }

  /* 最終行の下線を消す */
  .cast-data dd:last-of-type {
    border-bottom: none;
  }
}
.cast-data dd:nth-of-type(even) {
  background: #fafafa;
}

.cast-data dt {
  color: var(--azuki);
  font-weight: bold;
}

/* ===============================
   メッセージセクション
=============================== */
.cast-message {
  width: 100%;
  max-width: 720px;          /* 読みやすい行長 */
  margin: 40px auto;         /* 上下の余白を確保 */
  padding: 24px 28px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  box-sizing: border-box;
}

/* メッセージ本文 */
.cast-message p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
}

@media (max-width: 768px) {

  @media (max-width: 768px) {

  .cast-message {
    width: calc(100% - 32px); /* ← これが決定打 */
    max-width: none;
    margin: 28px auto;
    padding: 20px 18px;
    box-sizing: border-box;
  }

}


  .cast-message p {
    font-size: 0.95rem;
    line-height: 1.9;      /* スマホは行間広め */
  }
}

/* ===============================
   スケジュールセクション
=============================== */
/* ===============================
   スケジュール（iframe）
=============================== */
.cast-schedule {
  width: 100%;
  margin: 40px auto;
  box-sizing: border-box;
  overflow-x: hidden;
}

/* iframe 共通 */
.cast-schedule iframe {
  width: 100%;
  border: none;
  display: block;
}
/* PC */
@media (min-width: 769px) {

  .cast-schedule {
    padding: 0 40px;
  }

  .cast-schedule iframe {
    height: 900px; /* PCは固定でOK */
  }
}
/* スマホ */
@media (max-width: 768px) {

  .cast-schedule {
    width: calc(100% - 32px);
    margin: 32px auto;
    padding: 0;
  }


/* ===============================
   保存された余白設定
=============================== */
.contact-stack {
  margin-left: 100px;
  margin-top: 40px;
}

.info-group {
  margin-left: 100px;
}

/* ===============================
   レスポンシブ（スマホ用）
=============================== */
@media (max-width: 768px) {
  .cast-detail {
    flex-direction: column;
    align-items: center;
  }

  .cast-profile {
    display: contents;
  }

  /* 1. 名前を一番上へ */
  .cast-head {
    order: 1;
    width: 100%;
    text-align: center;
    margin-bottom: 0;   /* 念のため */
  }

.cast-head .cast-name {
    margin: 0;          /* ← これが最重要 */
    line-height: 1.2;
  }	
	
/* 基本情報 */
  .cast-head .cast-basic {
    margin: 2px 0 0;    /* 最小限だけ残す */
    line-height: 1.4;
  }	
	
  /* 2. 写真のカード枠 */
  .cast-photo {
    order: 2;
    width: 300px; /* スマホでもカード幅を固定 */
    margin: 0 auto 12px;
    padding: 12px;
    box-sizing: border-box;
	  border-radius: 16px;
    box-shadow:
      0 6px 16px rgba(0,0,0,0.10),
      0 0 0 1px rgba(0,0,0,0.05);
    box-sizing: border-box;
  
  }

  /* スキル全体 */
  .cast-skills {
    order: 3;
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;

    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }

  /* スキル内の要素（念のため全解除） */
  .cast-skills * {
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
  }
}

  /* 4. 詳細データ */
  .cast-data {
    order: 4;
    width: 100%;
    border-top: 1px solid #eee;
    padding-top: 20px;
  }

  /* 余白リセット */
  .contact-stack,
  .info-group {
    margin-left: 0;
  }
}