/* ========================================================
   LESSON NEWS  –  コンパクト&レスポンシブ テーブルレイアウト
   --------------------------------------------------------
   ● 全テーブル幅は常に 100%
   ● 列幅は《date / lesson / type / class》の 4 分割をベース
     （「掲載日」が無いテーブルは date が無いぶん自動再配分）
   ● PC では table-layout:fixed で寸法を安定
   ● モバイル(≤600px)は table-layout:auto で自然にフィット
   ● 行ごと薄色背景 + ラベル濃色セル
   ● 余白・フォントをほど良く圧縮
   =======================================================*/
/* =========================================================
   LESSON NEWS – 安定レイアウト版
   ========================================================= */

/* ---------- ラッパ ---------- */
.lesson-news{
  margin:1.2em 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ---------- 見出し ---------- */
.ln-title{
  font:700 1.35em/1.2 "Helvetica Neue",Arial,sans-serif;
  margin:.6em 0 .3em;
  padding-bottom:.2em;
  border-bottom:2px solid #333;
}
.ln-new{color:#3498db}
.ln-month{color:#555}

/* ---------- テーブル共通 ---------- */
.lc-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;      /* 列幅を colgroup に委ねる */
  margin-bottom:.7em;
  min-width:360px;
}
.lc-table th,
.lc-table td{
  border:1px solid #ccc;
  padding:.35em .55em;
  font-size:.9em;
  line-height:1.45;
  background:#f9f9f9;
  box-sizing:border-box;
}
.lc-table th{
  background:#eee;
  font-weight:700;
}
.lc-table.lc-new th,
.lc-table.lc-new td{border-width:2px}

/* ---------- colgroup 幅 ---------- */
.lc-table col.col-date   {width:6em}  /* 掲載日 */
.lc-table col.col-lesson {width:6em}  /* レッスン日 */
.lc-table col.col-type   {width:4em}  /* ラベル */
.lc-table col.col-class  {width:auto} /* クラス名 */

/* ---------- ラベル ---------- */
td.type-cell{
  color:#fff;
  font-weight:700;
  text-align:center;
  vertical-align:middle;
  background:#999;
  padding:.35em 0;
  font-size:.85em;
}
td.type-cell.cancel   {background:#e74c3c!important}
td.type-cell.sub      {background:#2ecc71!important}
td.type-cell.transfer {background:#3498db!important}

/* ---------- 行ハイライト ---------- */
tr.cancel-row   td:not(.type-cell){background:#fcebea}
tr.sub-row      td:not(.type-cell){background:#ecf9f1}
tr.transfer-row td:not(.type-cell){background:#ebf4fb}

/* ---------- クラス＋コメント ---------- */
td.class-cell{line-height:1.4}
td.class-cell .lc-comment{
  display:block;
  margin-top:.15em;
  font-size:.85em;
  color:#555;
}

/* =============================
   モバイル (≤600px) – 列幅固定版
   =============================*/
@media (max-width: 600px){

  /* 見出し */
  .ln-title{
    font-size:1.05em;
    margin:.4em 0 .25em;
  }

  /* テーブルは再び fixed で列幅をキープ */
  .lc-table{
    table-layout:fixed;
    font-size:.8em;         /* 全体を少し縮小 */
  }

  /* ------- 4 列テーブル（新着） ------- */
  .lc-table.lc-new col.col-date   {width:15%;}
  .lc-table.lc-new col.col-lesson {width:15%;}
  .lc-table.lc-new col.col-type   {width:10%;}
  .lc-table.lc-new col.col-class  {width:60%;}

  /* ------- 3 列テーブル（月別） ------- */
  .lc-table:not(.lc-new) col.col-lesson {width:15%;}
  .lc-table:not(.lc-new) col.col-type   {width:15%;}
  .lc-table:not(.lc-new) col.col-class  {width:70%;}

  /* セル余白・行高をさらに圧縮 */
  .lc-table th,
  .lc-table td{
    padding:.28em .42em;
    line-height:1.35;
    word-break:break-word;      /* 長い単語で列が広がるのを防止 */
  }
  td.type-cell{
    font-size:.8em;
    padding:.28em 0;
  }
  td.class-cell .lc-comment{font-size:.75em;}

}

.insta-label {
  margin-top: 6px;
}

/* InstagramアカウントのせるようのCSS */
.insta-label {
  margin-top: 14px;
  text-align: left;
}

.insta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
  color: white !important; /* ← ここポイント！ */
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.insta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
}

.insta-button span {
  color: white !important; /* ← span にも念のため指定 */
}

.insta-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png');
  background-size: cover;
  background-position: center;
  border-radius: 4px;
}

/* K-POPのまとめページのデザイン */
/* 全体設定 */
.fullwidth-timetable {
  max-width: 100%;
  padding: 2rem 5vw;
  background: #fff0f5;
  font-family: "Noto Sans JP", sans-serif;
}

/* 曜日ブロック */
.kpop-day-block {
  margin-bottom: 4rem;
  border-left: 5px solid #ff8ab3;
  padding-left: 1.2rem;
}

/* 曜日見出し */
.day-heading {
  font-size: 2rem;
  font-weight: bold;
  color: #e60073;
  margin-bottom: 1rem;
}

/* レッスン一覧を縦に並べる */
.kpop-lessons.vertical {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* カード共通スタイル */
.kpop-card {
  background: linear-gradient(to bottom, #fff6f9, #ffe5ef);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  width: 100%;
  max-width: 100%;
  box-shadow: 0 8px 15px rgba(255, 105, 180, 0.2);
  position: relative;
  transition: transform 0.3s ease;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.kpop-card:hover {
  transform: translateY(-3px);
}

/* キッズクラス背景 */
.kpop-card.kids {
  background: linear-gradient(to bottom, #fffde7, #fff9c4) !important;
  box-shadow: 0 8px 15px rgba(255, 214, 0, 0.2);
}

/* サムネイル画像 */
.kpop-thumb {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ff69b4;
  flex-shrink: 0;
}

/* カード内テキスト領域 */
.kpop-content {
  flex: 1;
}

/* スタジオバッジ */
.kpop-badge {
  position: absolute;
  top: -12px;
  right: -12px;
  color: white;
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
.kpop-badge.studio1 { background-color: #8BC34A !important; }
.kpop-badge.studio5 { background-color: #ec407a !important; }
.kpop-badge.studio8 { background-color: #ff9800 !important; }

/* 時間表示 */
.kpop-time {
  font-weight: bold;
  font-size: 1.2rem;
}
	  
/* ──────────────────────────
   管理カレンダー「変更情報」エリア
────────────────────────── */
/* ───────────────────────────────
   レッスン情報テーブル表示用
─────────────────────────────── */
.lesson-admin-info {
  padding: 0 1.5em; /* 左右の余白を控えめに */
  margin: 0 auto;
  width: 100%
  box-sizing: border-box;
}


.lesson-admin-info .lc-admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1em;
  font-size: 0.95em;
}

.lesson-admin-info .lc-admin-table th,
.lesson-admin-info .lc-admin-table td {
  border: 1px solid #ddd;
  padding: 0.5em 0.8em;
  vertical-align: top;
  line-height: 1.5;
}

.lesson-admin-info .lc-admin-table thead th {
  background: #f4f4f4;
  text-align: center;
  font-weight: bold;
}

.lesson-admin-info .lc-admin-table td.type-cell {
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.lesson-admin-info .lc-admin-table tr.cancel td.type-cell {
  background-color: #e74c3c;
}

.lesson-admin-info .lc-admin-table tr.sub td.type-cell {
  background-color: #f39c12;
}

.lesson-admin-info .lc-admin-table tr.transfer td.type-cell {
  background-color: #3498db;
}

/* ───────────────────────────────
   コメント装飾
─────────────────────────────── */
.lesson-admin-info .class-comment .lc-comment {
  display: block;
  margin-top: 0.3em;
  font-size: 0.9em;
  color: #555;
}

/* ───────────────────────────────
   LINE要約（開閉ブロック）
─────────────────────────────── */

.lc-line-summary {
  margin-top: 1.5em;
}

.line-summary-toggle {
  background: #eee;
  border: 1px solid #ccc;
  padding: 0.5em 1.2em;
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.line-summary-toggle:hover {
　width: 100%;
  text-align: left;
  box-sizing: border-box;
  background-color: #ddd;
}

.line-summary-content {
  width: 100%;
  box-sizing: border-box;
  background: #fdfdfd;
  border: 1px solid #ccc;
  padding: 1em;
  font-size: 0.9em;
  white-space: pre-wrap;
  line-height: 1.6;
  color: #333;
  border-radius: 6px;
  margin-top: 0.8em;
}

.line-summary-content::before {
  content: "";
  font-weight: bold;
  display: block;
  margin-bottom: 0.5em;
  color: #222;
}

/* ローディングテキスト */
.line-summary-content .loading-text {
  color: #888;
  font-style: italic;
}