/* ================================
   テーマ変数（ライトデフォルト）
================================ */
:root {
    --bg: #f7f7f7;     /* ベース背景（元：bodyの #f7f7f7） */
    --text: #111111;   /* 基本文字色 */
    --line: #dddddd;   /* 線用（必要になった時に使えるよう予約） */
}

/* ================================
   テーマ変更遊び
================================ */
body.theme {
    --bg: #fffff9;     /* 京都っぽい背景 */
    --text: #474b42;   /* 文字色 */
    --line: #9a8e5e;   /* ライン */
}



/* ================================
   ベース
================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  background: var(--bg);      /* ここを変数に */
  color: var(--text);         /* ここを変数に */
}

/* 共通レイアウト用ラッパー */
.site-header,
.site-footer,
.section,
.hero,
.top-visual {
  width: 100%;
}

.nohire {
    color: #c00;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(255, 220, 0, 0.5); /* 採用シャドウ */
}



/* ================================
   ヘッダー
================================ */

.site-header {
  border-bottom: 2px solid #9a8e5e;
  background: var(--bg);    /* 白→変数 */
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-logo {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--text);       /* #000→変数 */
  font-size: 1.1rem;
}

.site-nav {
  margin-left: auto;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.nav-list a {
  color: var(--text);       /* #111→変数 */
  text-decoration: none;
  font-size: 0.9rem;
}

.nav-list a:hover {
  text-decoration: underline;
}


.lang-switch a {
  margin-left: 1rem;
  border: 1px solid #9a8e5e;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.8rem;
  color: var(--text);       /* #000→変数 */
}

/* ================================
   トップ画像（ヘッダー帯）
================================ */

.top-visual {
  border-bottom: 2px solid #9a8e5e;
  background: var(--bg);    /* #ffffff→変数 */
}

.top-visual img {
  display: block;
  width: 100%;
  height: 300px;       /* PCでの見た目高さ */
  object-fit: cover;   /* 1600x400とかの横長画像をいい感じにトリミング */
}

/* スマホでは少し高さを低くする */
@media (max-width: 768px) {
  .top-visual img {
    height: 200px;
  }
}

/* ================================
   フクロウ飛行ゾーン
================================ */

.floating-owl {
  position: fixed;
  width: 300px;
  height: 300px;
  right: 20px;
  top: 80%;              /* 初期位置。JSが上書きするからここは目安でOK */
  pointer-events: none;
  z-index: 9999;
}

.floating-owl-img {
  width: 100%;
  height: auto;
}

/* ================================
   Hero（PC版）
================================ */

.hero {
  padding: 4rem 1rem 5rem; /* PCでの余白（自由に変えてOK） */
}

.hero-inner {
  text-align: center; /* 中央寄せ */
}

.hero-inner h1 {
  font-size: 2.6rem; /* PC用の大きめタイトル */
}
.hero-inner p {
  margin-bottom: 1.5rem; /* remはフォント基準の相対値で綺麗 */
}


/* ================================
   セクション（テキスト＆キャラ＆動画）
================================ */

.section {
  padding: 3rem 1rem;
}

.section-inner {
  max-width: 960px;
  margin: 0 auto;
}

.section h2 {
  margin-top: 0;
  font-size: 1.6rem;
  border-left: 6px solid #9a8e5e;
  padding-left: 0.5rem;
}

/* 漫画っぽい枠線のスタイル-Dark使っていない */
.section--light {
  background: var(--bg);      /* #ffffff→変数 */
  border-top: 2px solid var(--bg);   /* 元: #fff */
  border-bottom: 2px solid var(--bg);
}

.section--dark {
  background: #434343;
  color: #f7f7f7;
  border-top: 2px solid #fff;
}

.section--dark h2 {
  border-left-color: #f7f7f7;
}

.section--characters {
  background: var(--bg);      /* #ffffff→変数 */
  border-top: 3px solid #9a8e5e;
  border-bottom: 3px solid #9a8e5e;
}

/* リンクカード */
.link-cards {
  list-style: none;  /* ULの黒丸を消す（必要） */
  padding: 0;        /* ULのデフォルト余白を消す（必要） */
  margin: 2rem 0;    /* セクションとの間の余白（残す） */

  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 二列固定 */
  gap: 1rem;
}

/* カード本体 */
.link-card {
  width: auto;   /* grid任せにする */
  margin: 0;     /* gridで位置が決まるので不要 */
}

.link-cards li a {
  display: flex;
  align-items: center;
  gap: 1rem;

  width: 100%;
  padding: 1rem 1.2rem;
  font-size: 1.1rem;

  border: 2px solid #9a8e5e;
  background: var(--bg);      /* #fff→変数 */
  border-radius: 6px;
  text-decoration: none;
  color: var(--text);         /* #111→変数 */
  transition: 0.15s;
}

.link-cards li a:hover {
  box-shadow: 3px 3px 0 #9a8e5e;
  transform: translate(-2px, -2px);
}

.link-cards .icon {
  font-size: 1.4rem;
  width: 2rem;
  margin-right: 0.3rem;   /* ← アイコン枠の右余白 */
  text-align: center;
}

.link-cards .text {
  flex: 1;
  text-align: left;
}


/* リンクリスト（X、note、YouTubeなど小さ目ボタン用、使ってない） */
.link-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
}

.link-list li + li {
  margin-top: 0.5rem;
}

.link-list a {
  display: inline-block;
  padding: 0.5rem 0.8rem;
  border-radius: 4px;
  border: 1px solid #9a8e5e;
  background: var(--bg);      /* #fff→変数 */
  text-decoration: none;
  color: var(--text);         /* #111→変数 */
  font-size: 0.9rem;
}

.section--dark .link-list a {
  background: #111;
  color: #f7f7f7;
  border-color: #f7f7f7;
}

.link-list a:hover {
  box-shadow: 2px 2px 0 #9a8e5e;
}

.link-card .icon img {
  height: 32px;      /* 高さだけ固定 */
  width: auto;       /* 幅は自動調整 */
  display: block;
  object-fit: contain;
}



/* キャラ並びゾーン */
.character-row {
  display: flex;
  column-gap: 2rem;  /* 横方向だけ広げる */
  row-gap: 1.5rem;   /* 縦方向は今まで通り */
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}

.character {
  text-align: center;
}

.character img {
  display: block;
  width: 200px; /* 枠 */
  height: 200px;  /* 枠 */
  object-fit: contain;
  border: 2px solid #9a8e5e;
  border-radius: 8px;
  background: var(--bg);      /* #fff→変数 */
}

.character p {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}

.character-note {
  margin-top: 1.5rem;
  font-size: 0.9rem;
  text-align: center;
}


/* ================================
   Works（作品紹介カード）
================================ */
/* 作品カードグリッド */
.works-grid {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

/* スマホは1列 */
@media (max-width: 768px) {
  .works-grid {
    grid-template-columns: 1fr;
  }
}

/* カード本体 */
.work-card {
  border: 2px solid #9a8e5e;
  border-radius: 8px;
  background: var(--bg);      /* #fff→変数 */
  overflow: hidden;
}

.work-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--text);         /* #111→変数 */
}

/* サムネ部分（画像が入るところ） */
.work-thumb {
  width: 100%;
  background: #eee;
  aspect-ratio: 16 / 9;   /* ここで「縦の感じ」を揃える */
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* テキスト部分 */
.work-body {
  padding: 0.9rem 1rem 1rem;
}

.work-title {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}

.work-copy {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
}

.work-links {
  margin: 0;
  font-size: 0.85rem;
}

.badge {
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  border: 1px solid #9a8e5e;
  font-size: 0.75rem;
}

/* 画像なしカード（短編とか） */
.work-card--text-only .work-body {
  padding-top: 1.2rem;
}

.work-card--text-only .work-thumb {
  display: none;
}

/* Worksページ上部のカテゴリボタン用 */
.works-nav {
  margin-top: 0.5rem;
}

.works-nav-list {
  display: flex;
  gap: 0.5rem;          /* ボタン間のすき間 */
}

/* link-list は本来 li+li で上マージンを付けてるので打ち消す */
.works-nav-list li + li {
  margin-top: 0;        /* 縦の間隔なしにする */
}



/* ================================
   フッター
================================ */

.site-footer {
  border-top: 2px none #9a8e5e;
  background: var(--bg);      /* #ffffff→変数 */
  padding: 2rem 1rem;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.4rem;
}

.footer-nav a {
  text-decoration: none;
  color: var(--text);         /* #333→変数 */
  font-size: 0.9rem;
}

.footer-nav a:hover {
  text-decoration: underline;
}

.site-footer small {
  font-size: 0.75rem;
  color: #666;
}

/* ================================
   スマホ対応
================================ */
@media (max-width: 768px) {
  .header-inner {
    align-items: center;
    flex-wrap: wrap;           /* 幅が狭いときに折り返しOKにするなら */
  }

  /* ハンバーガー封印（使わない） */
  .nav-toggle {
    display: none;
  }

  /* スマホでもメニューは常に表示＋縦並び */
  .nav-list {
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;
    background: var(--bg);     /* #ffffff→変数 */
    padding: 0.5rem 0;
  }

  .nav-list li {
    padding: 0.2rem 0.5rem;
  }

  .hero {
    padding: 2.5rem 1rem 4rem;
  }

  /* hero内の文章を中央揃えにする */
  .hero-inner {
    text-align: center;
  }

  /* h1だけのデザイン */
  .hero-inner h1 {
    font-size: 2rem;
    color: var(--text);        /* #222→変数 */
  }

  /* Cards スマホでは一列に変更 */
  .link-cards {
    grid-template-columns: 1fr; /* 一列になる！ */
  }

  .character-row {
    flex-direction: column;
    align-items: center;
  }
}