@charset "UTF-8";

/* ===== カラー変数 ===== */
:root{
  --arrow:      #b23aa0;   /* スライダー矢印（紫）*/
  --orange:     #f39800;   /* スケジュール見出し */
  --orange-dk:  #e07d00;
  --today:      #222;      /* 選択中の日 */
  --line:       #cfcfcf;
  --qa-head:    #f6f2f7;
}

/* ===== 基本 ===== */
*{ box-sizing:border-box; }

/* コンテンツ全体：見出し画像に合わせて 797px */
.profile{ width:797px; margin:0px auto 16px; }

/* ===== 見出し画像（w797 × h46 webp）=====
   実画像に差し替える場合は .heading > img を 797×46 で表示 */
.heading{
  width:797px; height:46px; margin:0 0 12px;
}
.mainprofile + .heading{ margin-top:28px; }
.heading img{ display:block; width:797px; height:46px; }

/* ===== メイン：左右2カラム（440 + gap12 + 345 = 797）===== */
.mainprofile{ display:flex; gap:6px; align-items:flex-start;padding:3px }
.col-left{ width:440px; }
.col-right{ width:345px; }

/* ================= 左：FlexSlider ================= */
/* メインスライダー */
#main ul,.slides,.flex-direction-nav{margin: 0}
.slider-main{ margin:0;}
.slider-main .slides img{ width:432px; height: 576px; object-fit:cover; display:block; }
/* 写真プレースホルダー（差し替え時は不要）*/
.ph-photo{
  aspect-ratio:3/4;          /* 写真は 3:4（440幅なら約587高）*/
  background:#fff; 
  display:flex; align-items:center; justify-content:center;
}

/* サムネイルカルーセル */
.slider-thumb{ margin:0; background:transparent; border-radius: 0;    border: 4px solid antiquewhite ; }
.slider-thumb .slides img{ width:86px; height: 115px; object-fit:cover; display:block; cursor:pointer; }
.ph-thumb{
  aspect-ratio:3/4;          /* メイン写真と同じ 3:4 を縮小表示 */
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.slider-thumb .slides img,
.slider-thumb .ph-thumb{ opacity:.8; transition:opacity .2s; }
.slider-thumb .flex-active-slide img,
.slider-thumb .flex-active-slide .ph-thumb{ opacity:1; }
/* 枚数が5枚未満でも中央寄せせず左揃えを維持 */
.slider-thumb .slides{ text-align:left; margin:0; }
.slider-thumb .slides > li{ float:left; }
.flexslider {border-color:antiquewhite;border-radius: 0;  }
/* 矢印（紫）: メイン・サムネイル共通 */
.flexslider .flex-direction-nav a{cursor:pointer;
  opacity:1; height:44px; line-height:44px; color:var(--arrow);
  text-shadow:none;
  top:50%; margin:0; transform:translateY(-50%);   /* 高さに依存せず縦中央 */
}
.flexslider .flex-direction-nav a::before{ color:var(--arrow); font-size:34px; }

.flexslider:hover .flex-direction-nav .flex-prev{ left:8px; opacity:1; }
.flexslider:hover .flex-direction-nav .flex-next{ right:8px; opacity:1; }
.flex-direction-nav .flex-prev{ left:8px; opacity:1; }
.flex-direction-nav .flex-next{ right:8px; opacity:1; }

.slider-thumb .flex-direction-nav a{ height:115px; line-height:115px; }
.slider-thumb .flex-direction-nav a::before{ font-size:22px; }

/* ================= 右：情報パネル ================= */
.col-right{ border:1px solid var(--line); background:#fff; height:705px; } /* ≒ 写真587 + 余白8 + サムネ109。左に合わせて調整 */
/* パネル自体はスクロールさせず、中を縦フレックスに */
.info-scroll{
  height:100%;
  display:flex; flex-direction:column;
  padding:12px 14px;
  overflow:hidden;
}

/* 名前・ランク */
.cast-head{ display:flex; justify-content:space-between; align-items:flex-start; }
.cast-name{ margin:0; font-size:22px; font-weight:bold;color: #8904cc;display: inline-flex;    align-items: center;  }
.cast-age{ font-size:16px; font-weight:normal; }
.cast-rank{
  font-size:22px; font-weight:bold; color:#e07d00; line-height:1;
}
.cast-spec{ margin:2px 0 12px; font-size:13px; color:#555; }

/* アイコン画像グリッド（3×2）*/
.icon-grid{
  list-style:none; margin:0 0 5px!important; padding:0;
  display:flex; flex-wrap:wrap; gap:2px;
}
.icon-grid img{ display:block; height:23px; width:auto; }  /* ← 高さ固定・幅は比率で可変 */
.icon-box{
  display:inline-flex; align-items:center; justify-content:center;
  height:23px; padding:0 14px;      /* 幅は中身に応じて可変 */
 
}
/* Q&A テーブル */
.qa-table{ width:100%; border-collapse:collapse; margin-bottom:14px; }
.qa-table th,
.qa-table td{
  border:1px solid #f0d799; padding:7px 8px;
  font-size:13px; text-align:left; vertical-align:top;
}
.qa-table th{ width:35%; background:#fff8ec; font-weight:bold; }

/* 見出し＋テキスト */
/* 見出し＋テキストの部分「だけ」を残り高さ内でスクロール */
.free-text{
  flex:1 1 auto; min-height:0;   /* min-height:0 でフレックス内スクロールを有効化 */
  overflow-y:auto;
  scrollbar-width:thin;
}
.free-text::-webkit-scrollbar{ width:8px; }
.free-text::-webkit-scrollbar-thumb{ background:#bcbcbc; border-radius:4px; }
.free-title{
  margin:0 0 6px; font-size:15px; font-weight:bold;
  border-left:4px solid var(--arrow); padding-left:8px;
}
.free-text p{ margin:0; font-size:13px; color:#555; }

/* ================= 下：週間スケジュール ================= */
#schedule_container{
  display:flex;
  width:797px;
  gap:2px;               /* 列と列の隙間 */
}
.schedule{
  flex:1 1 0;            /* 7列を均等幅に */
  min-width:0;
  display:flex;
  flex-direction:column;
  border:1px solid #eee;
}
/* 日付ヘッダー */
.date{
  background:linear-gradient(var(--orange),var(--main-color));
  color:#fff; font-weight:bold; font-size:12px; line-height:1.3;
  text-align:center; padding:6px 2px;
}
.date.sat{ background:linear-gradient(#3f93e6,#1a72c9); }  /* 土＝青 */
.date.sun{ background:linear-gradient(#e6584b,#d0392b); }  /* 日＝赤 */
/* 時間セル（長い文字は折り返し）*/
.schedule .time{
  flex:1;
  background:#fff8ec; color:#333;
  font-size:12px; line-height:1.5; text-align:center;
  padding:8px 4px;
  overflow-wrap:anywhere;border-radius: 0;margin-bottom: 0;display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== レスポンシブ（797px未満で縦積み）===== */
@media (max-width:820px){
  .profile,.heading,.schedule{ width:100%; }
  .heading img{ width:100%; height:auto; }
  .mainprofile{ flex-wrap:wrap; }
  .col-left,.col-right{ width:100%; }
  .col-right{ height:auto; }
  .info-scroll{ height:auto; }
  .free-text{ max-height:240px; }
}