@charset "UTF-8";
/* ============================================================
   あまた音楽堂 作曲者・編曲者 一覧/詳細 専用 (amata_composer.css)
   読み込み: Composer/index.twig, Composer/detail.twig の
             stylesheet ブロック
   ------------------------------------------------------------
   ■ キャッシュバスターは手動採番(?v=N)を廃止し、mtime自動付与に移行済み
     (A-1 / 概要ファイル 3-19)。Twig側は |amata_v フィルタが付与する。
     このファイルに版数を書かないこと。FTPで上げ直せばURLが変わる。

   トークンはすべて amata_common.css の :root 実在名で照合済み。
   意匠は amata_list.css / amata_detail.css の既存ルールに揃えている:
     ・コンテナ  : var(--amata-container) + padding-inline(.amata-list と同値)
     ・BP        : 991px / 575px(.amata-list と同じ)
     ・見出し    : border-left 4px teal(.amata-detail-sec__head と同じ)
     ・作品カード: .amata-card の意匠を複製(別ファイルのため定義を持つ)
   ============================================================ */

/* ------------------------------------------------------------
   1. コンテナ
   左右余白は --amata-composer-gutter の1箇所で管理する(ルールブック9)。
   値は amata_list.css の .amata-list(20px / 991px以下16px)と同一。
   ------------------------------------------------------------ */
.amata-composer,
.amata-composer-detail {
  --amata-composer-gutter: 20px;
  box-sizing: border-box;
  max-width: var(--amata-container);
  margin-inline: auto;
  padding-inline: var(--amata-composer-gutter);
}

/* ------------------------------------------------------------
   2. パンくず(amata_list.css の .amata-breadcrumb と同じ配色)
   ------------------------------------------------------------ */
.amata-composer__crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  font-size: 0.82rem;
  color: var(--amata-ink-soft);
}
.amata-composer__crumb a {
  color: var(--amata-ink-soft);
  text-decoration: none;
}
.amata-composer__crumb a:hover,
.amata-composer__crumb a:focus-visible {
  color: var(--amata-teal);
  text-decoration: underline;
}

/* ------------------------------------------------------------
   3. ページ見出し
   ------------------------------------------------------------ */
.amata-composer__head {
  margin-bottom: 20px;
}
.amata-composer__title {
  margin: 0;
  color: var(--amata-ink);
  font-size: 1.5rem;
  font-weight: 700;
}

/* ------------------------------------------------------------
   4. 五十音インデックスナビ
   ------------------------------------------------------------ */
.amata-kana-nav {
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--amata-line);
}
.amata-kana-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amata-kana-nav__link,
.amata-kana-nav__item--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  padding: 4px 14px;
  border: 1px solid var(--amata-line);
  border-radius: var(--amata-radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
}
.amata-kana-nav__link {
  color: var(--amata-teal);
  text-decoration: none;
  transition: color var(--amata-dur-fast) ease,
              border-color var(--amata-dur-fast) ease,
              background-color var(--amata-dur-fast) ease;
}
.amata-kana-nav__link:hover,
.amata-kana-nav__link:focus-visible {
  border-color: var(--amata-teal);
  background: var(--amata-teal);
  color: #fff;
}
/* 0件の行: グレーで非リンク。amata_list.css の 0件表現(#b7c2c2)と同じ扱い。
   リンクではないのでホバー装飾を一切持たせない(ルールブック9 アフォーダンス一致) */
.amata-kana-nav__item--empty {
  color: #b7c2c2;
  cursor: default;
}

/* ------------------------------------------------------------
   5. セクション見出し(amata_detail.css の .amata-detail-sec__head と同意匠)
   ------------------------------------------------------------ */
.amata-kana-sec {
  margin-bottom: 40px;
  /* アンカージャンプ時に固定ヘッダーへ潜り込ませない */
  scroll-margin-top: calc(var(--amata-header-h) + 16px);
}
.amata-kana-sec__head,
.amata-works__head {
  margin: 0 0 16px;
  padding-left: 12px;
  border-left: 4px solid var(--amata-teal);
  color: var(--amata-ink);
  font-size: 1.15rem;
  font-weight: 700;
}

/* ------------------------------------------------------------
   6. 作曲者カード(一覧)
   ------------------------------------------------------------ */
.amata-composer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amata-composer-card__link {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: 1px solid var(--amata-line);
  border-radius: var(--amata-radius);
  background: #fff;
  color: var(--amata-ink);
  text-decoration: none;
  /* box-shadow はペイントのみでレイアウトを起こさない */
  transition: transform var(--amata-dur-fast) var(--amata-ease-out),
              box-shadow var(--amata-dur-fast) ease;
}
.amata-composer-card__link:hover,
.amata-composer-card__link:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--amata-shadow-1);
}
/* 詳細ページの写真を角丸にしたため、一覧側も角丸に揃える(円と角丸の混在を避ける)。
   一覧は「並べて探す」用途なので、サイズは詳細より小さく保つ。 */
.amata-composer-card__photo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--amata-line);
  border-radius: var(--amata-radius);
  background: var(--amata-bg-tint-2);
  color: var(--amata-teal);
}
.amata-composer-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.amata-composer-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.amata-composer-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}
.amata-composer-card__name-en {
  color: var(--amata-ink-soft);
  font-size: 0.78rem;
}
.amata-composer-card__role {
  margin-top: 2px;
  color: var(--amata-ink-soft);
  font-size: 0.76rem;
}

.amata-composer__empty,
.amata-works__empty {
  padding: 24px 0;
  color: var(--amata-ink-soft);
}

/* ------------------------------------------------------------
   7. プロフィール(詳細)
   ------------------------------------------------------------ */
/* プロフィールは2列グリッド。写真が2行にまたがり、右列に「氏名 → 経歴」を積む。
   氏名ブロックだけでは右に大きな空きが出るため、経歴で右列を埋める意図。
   SPでは経歴を写真の下に全幅で回す(下部のメディアクエリで area を差し替え)。

   1列目の幅は下の .amata-work-grid のカード1枚分と同じ計算式にしてある。
     カード幅 = (コンテンツ幅 - カラム間 × (列数-1)) / 列数
   これにより「写真の右端 = 1枚目のカードの右端」「テキストの左端 = 2枚目の
   カードの左端」が画面幅によらず揃う。実寸を直書きしないこと(列数を変えたら
   ここの式も必ず追従させる)。 */
.amata-profile {
  display: grid;
  /* PC: 作品グリッドは4列 / カラム間20px */
  grid-template-columns: calc((100% - 20px * 3) / 4) minmax(0, 1fr);
  grid-template-areas:
    "photo meta"
    "photo bio";
  align-items: start;
  column-gap: 20px;
  row-gap: 18px;
  margin-bottom: 40px;
}
/* プロフィールを兼ねる写真のため、円形ではなく角丸の長方形。
   角丸・枠線は amata_list.css の .amata-card__image と同値にして
   サイト全体の画像意匠に揃える。
   幅はグリッドの1列目いっぱい(= 作品カード1枚分)。高さは aspect-ratio 任せ。 */
.amata-profile__photo {
  grid-area: photo;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--amata-line);
  border-radius: var(--amata-radius);
  background: var(--amata-bg-tint-2);
  color: var(--amata-teal);
}
.amata-profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 写真なしのときの代替アイコン。枠サイズが可変なので比率で追従させる
   (Twig側の width/height 属性より後読みのCSSが勝つ) */
.amata-profile__noimg svg {
  width: 30%;
  height: auto;
}
.amata-profile__meta {
  grid-area: meta;
  min-width: 0;
}
.amata-profile__name {
  margin: 0;
  color: var(--amata-ink);
  font-size: 1.75rem;
  font-weight: 700;
}
.amata-profile__kana {
  margin: 4px 0 0;
  color: var(--amata-ink-soft);
  font-size: 0.85rem;
}
.amata-profile__en {
  margin: 2px 0 0;
  color: var(--amata-ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.amata-profile__title {
  margin: 10px 0 0;
  color: var(--amata-ink);
  font-size: 0.9rem;
}
.amata-profile__link {
  margin: 12px 0 0;
}
.amata-profile__link a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--amata-teal);
  font-size: 0.88rem;
  text-decoration: none;
}
.amata-profile__link a:hover,
.amata-profile__link a:focus-visible {
  text-decoration: underline;
}

/* ------------------------------------------------------------
   8. 経歴(プロフィールグリッドの bio エリア)
   ------------------------------------------------------------ */
.amata-bio {
  grid-area: bio;
  min-width: 0;
  padding: 20px 22px;
  border-radius: var(--amata-radius);
  background: var(--amata-bg-tint-1);
}
.amata-bio__body {
  color: var(--amata-ink);
  line-height: 1.8;
}

/* ------------------------------------------------------------
   9. 作品グリッド(詳細)
   amata_list.css の .amata-cards / .amata-card と同一の意匠。
   ------------------------------------------------------------ */
.amata-works {
  margin-bottom: 40px;
}
.amata-work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.amata-work-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--amata-ink);
  text-decoration: none;
  transition: transform var(--amata-dur-fast) var(--amata-ease-out);
}
.amata-work-card__link:hover,
.amata-work-card__link:focus-visible {
  transform: translateY(-4px);
}
.amata-work-card__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: 1px solid var(--amata-line);
  border-radius: var(--amata-radius);
  background: #fff;
}
.amata-work-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--amata-dur-fast) ease;
}
.amata-work-card__link:hover .amata-work-card__thumb img,
.amata-work-card__link:focus-visible .amata-work-card__thumb img {
  opacity: 0.85;
}
.amata-work-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
}
.amata-work-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}
.amata-work-card__price {
  margin-top: 4px;
  color: var(--amata-red);
  font-size: 1rem;
  font-weight: 700;
}
.amata-work-card__tax {
  margin-left: 2px;
  color: var(--amata-ink-soft);
  font-size: 0.72rem;
  font-weight: 400;
}

/* ------------------------------------------------------------
   10. レスポンシブ(BPは amata_list.css と同じ 991px / 575px)
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .amata-composer,
  .amata-composer-detail {
    --amata-composer-gutter: 16px;
  }
  .amata-composer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .amata-work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* 作品グリッドが3列になるので、写真の幅も3列基準に合わせる */
  .amata-profile {
    grid-template-columns: calc((100% - 20px * 2) / 3) minmax(0, 1fr);
  }
}

@media (max-width: 575px) {
  .amata-composer-grid {
    grid-template-columns: 1fr;
  }
  .amata-work-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 12px;
  }
  .amata-work-card__name {
    font-size: 0.85rem;
  }
  /* SPでも横並びを維持する。縦積みにすると写真の高さ＋氏名ブロックの高さが
     単純加算され(約250px)、写真を大きくするほど縦に間延びするため。
     横並びなら写真の高さ(128px)に収まり、右の余白も氏名で埋まる。 */
  /* 経歴を写真の下に全幅で回す。細い右列に押し込むと極端に読みにくいため。 */
  /* SPは作品グリッド(2列=約165px)に合わせると右のテキスト列が狭くなりすぎるため、
     カード幅とは揃えず 128px 固定を維持する(確認済みのバランス) */
  .amata-profile {
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-areas:
      "photo meta"
      "bio   bio";
    column-gap: 14px;
    row-gap: 16px;
  }
  .amata-profile__name {
    font-size: 1.3rem;
  }
  .amata-bio {
    padding: 16px 18px;
  }
}

/* ------------------------------------------------------------
   11. モーション低減設定の尊重(ルールブック3-6)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .amata-kana-nav__link,
  .amata-composer-card__link,
  .amata-work-card__link,
  .amata-work-card__thumb img {
    transition: none;
  }
  .amata-composer-card__link:hover,
  .amata-composer-card__link:focus-visible,
  .amata-work-card__link:hover,
  .amata-work-card__link:focus-visible {
    transform: none;
  }
}