/* ------------------------------
       ベース（リセット + 変数）
    ------------------------------ */
    *, *::before, *::after { box-sizing: border-box; }
    html:focus-within { scroll-behavior: smooth; }
    html, body { height: 100%; }
    body { margin: 0; font-family: 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif; line-height: 1.7; }
    img, svg { display: block; max-width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    :root{
      --bg: #0b0d12;
      --panel: #11151c;
      --muted: #98a2b3;
      --text: #e6e9ef;
      --brand: #85f1ff;
      --accent: #6ee7b7;
      --ring: rgba(124,156,255,.35);
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.25);
      --maxw: 1100px;
    }
    @media (prefers-color-scheme: light){
      :root{ --bg:#f8fafc; --panel:#ffffff; --text:#0f172a; --muted:#475569; --ring: rgba(99,102,241,.25); }
      body{ background: var(--bg); color: var(--text); }
    }
    body{ background: var(--bg); color: var(--text); }

    /* ------------------------------
       ユーティリティ
    ------------------------------ */
    .container{ width: min(100% - 32px, var(--maxw)); margin-inline: auto; }
    .stack{ display: grid; gap: 16px; }
    .pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px; background: linear-gradient(90deg, var(--brand), var(--accent)); color:#0b0d12; font-weight:700; font-size:.85rem; }
    .muted{ color: var(--muted); }
    .btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius: 12px; background: var(--brand); color:#0b0d12; font-weight:700; box-shadow: var(--shadow); border: 2px solid transparent; }
    .btn:hover{ filter: brightness(1.05); }
    .btn.outline{ background: transparent; color: var(--text); border-color: var(--ring); box-shadow:none; }
    .grid{ display:grid; gap:16px; }
    @media (min-width: 768px){ .grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

    /* ------------------------------
       ヘッダー
    ------------------------------ */
    header{ position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.2) blur(8px); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--bg), #fff 12%); }
    .nav{ display:flex; align-items:center; justify-content:space-between; padding: 12px 0; }
    .nav a.logo{ font-weight: 800; letter-spacing:.2px; }
    .nav .links{ display:flex; gap: 12px; }
    .nav .links a{ padding:8px 12px; border-radius: 10px; }
    .nav .links a:hover{ background: color-mix(in oklab, var(--panel), #fff 8%); }

    /* ------------------------------
       ヒーロー
    ------------------------------ */
    .hero{ padding: 64px 0 24px; }
    .hero-inner{ display:grid; gap: 24px; align-items:center; }
    @media (min-width: 900px){
      .hero-inner{ grid-template-columns: 1.1fr .9fr; }
    }
    .avatar{ width: 140px; aspect-ratio:1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow); border: 3px solid var(--ring); }
    .badge-wrap{ display:flex; gap:10px; flex-wrap: wrap; }
    h1{ margin:0; font-size: clamp(28px, 4vw, 42px); line-height:1.2; letter-spacing: .2px; }
    h2{ margin:0 0 8px; font-size: clamp(20px, 3vw, 28px); }

    /* ------------------------------
       セクション共通
    ------------------------------ */
    section{ padding: 48px 0; border-top: 1px solid color-mix(in oklab, var(--panel), #fff 10%); }
    .card{ background: var(--panel); border: 1px solid color-mix(in oklab, var(--panel), #fff 8%); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
    .card h3{ margin: 0 0 6px; font-size: 1.05rem; }

    /* ------------------------------
       スキル
    ------------------------------ */
    .skill-list{ display:flex; gap:10px; flex-wrap: wrap; }
    .chip{ padding:8px 12px; border-radius: 999px; border:1px solid color-mix(in oklab, var(--panel), #fff 14%); background: color-mix(in oklab, var(--panel), #000 8%); font-size:.9rem; }

    .chip:hover{
        background:#004e8d;
        cursor:pointer;
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(0,0,0,0.3); 
    }
    /* ------------------------------
       プロジェクト
    ------------------------------ */
    .project{ display:grid; gap: 12px; }
    .project .thumb{ aspect-ratio: 16/9; border-radius: 12px; overflow:hidden; background: #0f172a; border:1px solid color-mix(in oklab, var(--panel), #fff 10%); }
    .thumb:hover{cursor:pointer}
    /* ------------------------------
       連絡先
    ------------------------------ */
    form{ display:grid; gap:12px; }
    input, textarea{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid color-mix(in oklab, var(--panel), #fff 14%); background: color-mix(in oklab, var(--panel), #000 8%); color: var(--text); outline: none; }
    input:focus, textarea:focus{ border-color: var(--brand); box-shadow: 0 0 0 6px var(--ring); }
    textarea{ min-height: 140px; resize: vertical; }

    /* ------------------------------
       フッター
    ------------------------------ */
    footer{ padding: 36px 0 56px; }
    .socials{ display:flex; gap:12px; }
    .socials a{ padding:10px 12px; border-radius: 10px; border:1px solid color-mix(in oklab, var(--panel), #fff 12%); }

.lb-area {
  display: flex;
  gap: 32px; /* ブロック同士の余白 */
  flex-wrap: wrap; /* 画面幅が狭いときに折り返す */
  margin-top: 30px;
}

.lb-area h3 {
  margin-top: 0;
}

.lb-area > div {
  flex: 1; /* 均等に幅を取る。不要なら消してOK */
  min-width: 200px; /* 折り返しの基準 */
}

.schedule-section {
  padding: 2rem 1rem;
}

.table-wrapper {
  overflow-x: auto; /* スマホで横スクロール */
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px; /* 狭すぎ防止 */
}

.schedule-table th,
.schedule-table td {
  border: 1px solid #ddd;
  padding: 0.75rem 1rem;
  text-align: center;
}

.schedule-table th {
  background-color: #2a4252;
  color: #fff;
}

.status {
  font-weight: bold;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.status.ongoing {
  background-color: #9ad1ff;
  color: #004e8d;
}

.status.pending {
  background-color: #eeeeee;
  color: #555;
}

.status.confirmed {
  background-color: #fac3cc;
  color: #60252a;
}

.gm_list{
    width:30%;
    margin:30px auto;
}
    @media (max-width: 780px){
        .gm_list{
            width:80%;
                }
    }

h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 1.5em 0 0.8em;
  padding-left: 0.6em;
  border-left: 6px solid var(--accent);
}

#scenario-list,#scenario-list2 {
  overflow: hidden;
  max-height: 140px; /* 初期表示高さ（例：最初の5件分） */
  transition: max-height 0.5s ease;
}

#scenario-list.expanded,#scenario-list.expanded2 {
  max-height: 1500px; /* 適当に大きめでOK */
}

.more {
  padding: 0.7em 1.4em;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  border: none;
  border-radius: 12px;
  background: linear-gradient(45deg, var(--brand, #ff6b6b), var(--accent, #feca57));
  cursor: pointer;
  transition: opacity 0.3s, transform 0.2s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    width:100%;
}

.more:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
.card.project {
  display: flex;
  flex-direction: column; /* 縦方向に積む */
  align-items: flex-start; /* 上に揃える */
}
.card.project h3 {
  font-size: 1.1rem;
  color: var(--brand);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
  letter-spacing: 0.5px;

  /* 高さを固定 */
  height: 3rem;        /* 必要な高さに調整 */
  overflow: hidden;    /* はみ出る場合は隠す */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 行数指定（2行） */
  -webkit-box-orient: vertical;
  width:100%;
}

h4 {
  font-size: 1rem;           /* ちょっと小さめ */
  font-weight: 600;           /* 少し太めで見出し感 */
  color: var(--brand, #408b79);
  margin: 16px 0 8px 0;            /* 下に余白 */
  letter-spacing: 0.5px;
}

/* モーダル全体 */
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
  align-items: center;
  justify-content: center;
}

/* モーダル画像 */
.modal-content {
  max-width: 90%;
  max-height: 90%;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* キャプション */
#caption {
  margin-top: 12px;
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
}

/* 閉じるボタン */
.close {
  position: absolute;
  top: 20px; right: 30px;
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
}
.close:hover { color: var(--accent, #6ee7b7); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.gallery-item {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 のアスペクト比 */
  overflow: hidden;
  border-radius: 12px;
}

.gallery-item img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像を中央で切り抜き */
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.gallery-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}


/* レスポンシブ */
@media (max-width: 1200px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .gallery-grid { grid-template-columns: 1fr; } }

.coc6{
  background: #2f4f4f;
  color:#fff
}
.coc7{
  background: #b8860b;
  color:#fff
}
.emoklore{
  background: #f08080;
  color:#fff
}
.dnd{
  background: #8b0000;
  color:#fff
}
.gm{
  background: #eee;
  color:#555  
}