/*
Theme Name: 音楽島 -Music Island-
Template: force_tcd078
Description: TCD「FORCE」の子テーマ（パソナ音楽島 公式サイト）
Version: 0.2.0
Text Domain: ongakujima
*/

/*
 * このファイルは親テーマの CSS と、管理画面の設定から出る <style> の「前」に読まれる。
 * 同じ強さのセレクタでは後ろが勝つので、上書きする所は body の class（.wp-child-theme-ongakujima）を頭に付けて 1 段強くしている。
 * 色の決まり: 文字 #1e3445（紺） / 差し色 #1a9fd6（水色） / 淡い地 #f4f9fc・#eaf6fb
 */

/* ============================================================
   書体
============================================================ */

/* 親テーマの書体の変数を差し替える（テーマ自身のトークンなので変数のまま上書きする）。:root より強い html:root で、後ろの <style> に勝たせる */
html:root {
  --tcd-font-type1: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic Medium", sans-serif;
  --tcd-font-type2: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho Pro", serif;
  --tcd-font-type-logo: "Jost", "Zen Kaku Gothic New", sans-serif;
}

.wp-child-theme-ongakujima { color: #1e3445; background: #ffffff; }

/* 英字の見出し・ラベル・日付・メニューは Jost でそろえる */
.wp-child-theme-ongakujima #global_menu > ul > li > a,
.wp-child-theme-ongakujima .headline .rich_font_1,
.wp-child-theme-ongakujima .post_meta .date,
.wp-child-theme-ongakujima #footer_menu a,
.wp-child-theme-ongakujima #copyright {
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  letter-spacing: 0.12em;
}

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

/* ヘッダーのロゴは指示書どおり「音楽島」だけを出す（サイト名は <title> とフッターで「音楽島 -Music Island-」のまま使う）。
   字の大きさはテーマが style 属性で付けるので、元の字は枠の外へ押し出して隠し、::before で「音楽島」を描く。
   元の字は読み上げ用に残る。アイコンが届いたら管理画面でロゴ画像に切り替える */
.wp-child-theme-ongakujima #header_logo .pc_logo_text,
.wp-child-theme-ongakujima #header_logo .mobile_logo_text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 200%;
}
.wp-child-theme-ongakujima #header_logo .pc_logo_text { display: block; width: 96px; height: 32px; }
.wp-child-theme-ongakujima #header_logo .mobile_logo_text { width: 80px; height: 60px; }
.wp-child-theme-ongakujima #header_logo .pc_logo_text::before,
.wp-child-theme-ongakujima #header_logo .mobile_logo_text::before {
  content: "音楽島";
  position: absolute;
  top: 0px;
  left: 0px;
  text-indent: 0px;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: 0.12em;
}
.wp-child-theme-ongakujima #header_logo .mobile_logo_text::before { font-size: 22px; line-height: 60px; }
/* SP では PC 用の字を出さない（上の display: block がテーマの非表示に勝ってしまうため、ここで戻す） */
.mobile .wp-child-theme-ongakujima #header_logo .pc_logo_text { display: none; }

/* ロゴは KV の明朝とそろえる */
.wp-child-theme-ongakujima .pc_logo_text,
.wp-child-theme-ongakujima .mobile_logo_text {
  font-family: "Shippori Mincho", "Yu Mincho", serif;
  letter-spacing: 0.08em;
}

/* KV の上では地を付けない。テーマはカーソルが載ると水色でいきなり塗るので、それをやめて白い幕を上から下ろす */
.wp-child-theme-ongakujima #header { border-bottom: 1px solid rgba(255, 255, 255, 0.32); transition: border-color 0.5s ease; }
.wp-child-theme-ongakujima #header.active { background: transparent; border-bottom-color: #e3eef4; }
.wp-child-theme-ongakujima #header::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc .wp-child-theme-ongakujima #header.active::before { transform: scaleY(1); }
/* 幕が下りたら字は紺。幕と同じ速さで色を替える */
.wp-child-theme-ongakujima #header_logo .logo a,
.wp-child-theme-ongakujima #global_menu > ul > li > a { transition: color 0.5s ease; }
.wp-child-theme-ongakujima #header_social_link::before { transition: background-color 0.5s ease; }
.pc .wp-child-theme-ongakujima #header.active #header_logo .logo a,
.pc .wp-child-theme-ongakujima #header.active #global_menu > ul > li > a,
.pc .wp-child-theme-ongakujima #header.active #header_social_link li a::before { color: #1e3445; }
.pc .wp-child-theme-ongakujima #header.active #global_menu > ul > li > a:hover,
.pc .wp-child-theme-ongakujima #header.active #global_menu > ul > li.current-menu-item > a,
.pc .wp-child-theme-ongakujima #header.active #header_logo .logo a:hover { color: #1a9fd6; }
.pc .wp-child-theme-ongakujima #header.active #header_social_link::before { background: #c9dbe5; }

.wp-child-theme-ongakujima #global_menu > ul > li > a {
  padding: 0px 16px 0px 16px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.16em;
}
/* ホバーと今いるページは、字の下に細い線を左から引く（五線の 1 本に見立てる） */
.wp-child-theme-ongakujima #global_menu > ul > li > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 24px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s ease;
}
.wp-child-theme-ongakujima #global_menu > ul > li > a:hover::after,
.wp-child-theme-ongakujima #global_menu > ul > li > a:focus-visible::after,
.wp-child-theme-ongakujima #global_menu > ul > li.current-menu-item > a::after { height: 1px; transform: scaleX(1); }
.wp-child-theme-ongakujima #global_menu > ul > li > a:hover { color: #ffffff; }

/* スクロールして上に付いたヘッダー: テーマの水色の塗りをやめ、白地に紺の字にする */
.pc .wp-child-theme-ongakujima.header_fix #header {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0px 1px 0px 0px #e3eef4;
}
.pc .wp-child-theme-ongakujima.header_fix #header_logo .logo a,
.pc .wp-child-theme-ongakujima.header_fix #global_menu > ul > li > a,
.pc .wp-child-theme-ongakujima.header_fix #header_social_link li a::before { color: #1e3445; }
.pc .wp-child-theme-ongakujima.header_fix #global_menu > ul > li > a:hover,
.pc .wp-child-theme-ongakujima.header_fix #global_menu > ul > li.current-menu-item > a,
.pc .wp-child-theme-ongakujima.header_fix #header_logo .logo a:hover { color: #1a9fd6; }
.pc .wp-child-theme-ongakujima.header_fix #header_social_link::before { background: #c9dbe5; }

/* SNS: テーマは Instagram → TikTok → YouTube の順に出すので、指示書の Instagram → YouTube → TikTok に並べ替える */
#header_social_link, #footer_social_link { display: flex; }
#footer_social_link { justify-content: center; }
#header_social_link li.insta, #footer_social_link li.insta { order: 1; }
#header_social_link li.youtube, #footer_social_link li.youtube { order: 2; }
#header_social_link li.tiktok, #footer_social_link li.tiktok { order: 3; }

/* メニューと SNS の間の縦線 */
.wp-child-theme-ongakujima #header_social_link { align-items: center; }
.wp-child-theme-ongakujima #header_social_link::before {
  content: "";
  width: 1px;
  height: 16px;
  margin: 0px 16px 0px 0px;
  background: rgba(255, 255, 255, 0.48);
}
.wp-child-theme-ongakujima #header_social_link li a::before,
.wp-child-theme-ongakujima #footer_social_link li a::before { transition: color 0.3s ease, transform 0.3s ease; }

/* SNS のアイコンは、カーソルを載せると各サービスの色になる（どこへ飛ぶかが色で分かる）。
   ヘッダーに載った時点で字を紺にする指定より強くするため、#header を頭に付ける */
.wp-child-theme-ongakujima #header #header_social_link li a:hover::before,
.wp-child-theme-ongakujima #header #header_social_link li a:focus-visible::before,
.wp-child-theme-ongakujima #footer_social_link li a:hover::before,
.wp-child-theme-ongakujima #footer_social_link li a:focus-visible::before { transform: translateY(-2px); }
/* Instagram: ロゴと同じ黄 → 桃 → 紫のグラデーションを字の形で切り抜く */
.wp-child-theme-ongakujima #header #header_social_link li.insta a:hover::before,
.wp-child-theme-ongakujima #header #header_social_link li.insta a:focus-visible::before,
.wp-child-theme-ongakujima #footer_social_link li.insta a:hover::before,
.wp-child-theme-ongakujima #footer_social_link li.insta a:focus-visible::before {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* YouTube: 赤。アイコンの三角はくり抜きなので、後ろに白い四角を敷いて本物と同じ白い三角に見せる */
.wp-child-theme-ongakujima #header #header_social_link li.youtube a:hover::before,
.wp-child-theme-ongakujima #header #header_social_link li.youtube a:focus-visible::before,
.wp-child-theme-ongakujima #footer_social_link li.youtube a:hover::before,
.wp-child-theme-ongakujima #footer_social_link li.youtube a:focus-visible::before { color: #ff0000; }
.wp-child-theme-ongakujima #header_social_link li.youtube a,
.wp-child-theme-ongakujima #footer_social_link li.youtube a {
  background: linear-gradient(#ffffff, #ffffff) center 55% / 8px 8px no-repeat;
  background-color: transparent;
  background-size: 0px 0px;
}
.wp-child-theme-ongakujima #header_social_link li.youtube a:hover,
.wp-child-theme-ongakujima #header_social_link li.youtube a:focus-visible,
.wp-child-theme-ongakujima #footer_social_link li.youtube a:hover,
.wp-child-theme-ongakujima #footer_social_link li.youtube a:focus-visible { background-size: 8px 8px; }
/* TikTok: 本物と同じく、黒い地の上の白い音符に水色と赤のずれを重ねる */
.wp-child-theme-ongakujima #header #header_social_link li.tiktok a:hover::before,
.wp-child-theme-ongakujima #header #header_social_link li.tiktok a:focus-visible::before,
.wp-child-theme-ongakujima #footer_social_link li.tiktok a:hover::before,
.wp-child-theme-ongakujima #footer_social_link li.tiktok a:focus-visible::before {
  color: #000000;
  text-shadow: -1px -1px 0px #25f4ee, 1px 1px 0px #fe2c55;
}

/* ============================================================
   KV
============================================================ */

#index_slider .catch { letter-spacing: 0.08em; }
#index_slider .desc { letter-spacing: 0.08em; }

/* KV 下の COLUMN の帯: 濃い水色の塗りをやめて白地に紺の字にする */
.wp-child-theme-ongakujima #header_carousel .item a.link { background: #ffffff; }
.wp-child-theme-ongakujima #header_carousel .item .title { color: #1e3445; }
.wp-child-theme-ongakujima #header_carousel .item a:hover .title { color: #1a9fd6; }
.wp-child-theme-ongakujima #header_carousel .item { border-right: 1px solid #e3eef4; box-sizing: border-box; }

/* ============================================================
   トップの各コンテンツ（template-parts/front/）
   形は docs/判断/2026-10-23_デザインの見直し/ で採用したもの:
   空の配色（水色の光）・セリフの斜体の英字＋明朝・左寄せの特大英字・縦書きのコピー・NEWS と COLUMN は 1 件大きく＋2 件・
   RECRUIT は大きな写真＋重ねたカード・MEMBER は 4 列・ARCHIVE は横に流れる写真・境目は波
============================================================ */

/* 親は各コンテンツに width: 850px と固定の高さ・濃い地を付け、管理画面の設定からも <style>（.index_design_content2.num4 など）で地の色を出す。
   新しい形では幅を画面いっぱいにして中身の幅は各 __inner で決めるので、ここで外す（親の <style> に勝つよう class を 3 つ重ねる） */
.wp-child-theme-ongakujima .cb_contents.oj-about,
.wp-child-theme-ongakujima .cb_contents.oj-posts,
.wp-child-theme-ongakujima .cb_contents.oj-member,
.wp-child-theme-ongakujima .cb_contents.oj-recruit,
.wp-child-theme-ongakujima .cb_contents.oj-archive { width: auto; height: auto; margin: 0px 0px 0px 0px; }
.wp-child-theme-ongakujima .cb_contents.oj-recruit,
.wp-child-theme-ongakujima .cb_contents.oj-archive { overflow: hidden; background: #ffffff; }

/* 見出し: 左寄せの特大英字（セリフの斜体）＋ 下に明朝の日本語 */
.oj-heading { margin: 0px 0px 48px 0px; text-align: left; }
.oj-heading__en {
  display: block;
  font-family: "Cormorant Garamond", "Shippori Mincho", serif;
  font-size: 96px;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #1e3445;
}
.oj-heading__ja {
  display: block;
  margin: 16px 0px 0px 0px;
  font-family: "Shippori Mincho", serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #1a9fd6;
}
.oj-heading--small .oj-heading__en { font-size: 64px; }

/* ボタン: 水色の細い線。ホバーで地の色が左から流れ込む */
.oj-button { margin: 40px 0px 0px 0px; }
.oj-button--center { text-align: center; }
.oj-button--head { margin: 0px 0px 48px 0px; }
.oj-button__link {
  position: relative;
  z-index: 0;
  display: inline-block;
  overflow: hidden;
  min-width: 240px;
  height: 56px;
  padding: 0px 32px 0px 32px;
  border: 1px solid #1a9fd6;
  border-radius: 999px;
  box-sizing: border-box;
  font-family: "Jost", "Zen Kaku Gothic New", sans-serif;
  font-size: 14px;
  line-height: 54px;
  letter-spacing: 0.2em;
  text-align: center;
  color: #1a9fd6;
  background: #ffffff;
  transition: color 0.6s ease;
}
.oj-button__link::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #1a9fd6;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.oj-button__link::after { content: "→"; margin: 0px 0px 0px 16px; font-family: "Jost", sans-serif; }
.oj-button__link:hover,
.oj-button__link:focus-visible { color: #ffffff; transition: color 0.4s ease; }
.oj-button__link:hover::before,
.oj-button__link:focus-visible::before { transform: scaleX(1); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* 波の境目: 淡い水色の地のセクション（NEWS・COLUMN）の上下に、地と同じ色の波を付ける */
/* 下の波が次のセクション（後ろに描かれる）に隠れないよう、前に出す */
.oj-posts { position: relative; z-index: 1; }
.oj-posts::before,
.oj-posts::after {
  content: "";
  position: absolute;
  left: 0px;
  width: 100%;
  height: 48px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 24C240 0 480 0 720 24s480 24 720 0v24H0z' fill='%23eef8fd'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
  pointer-events: none;
}
.oj-posts::before { top: -47px; }
.oj-posts::after { bottom: -47px; transform: scaleY(-1) scaleX(-1); }

/* 音楽島とは？: 縦書きのコピー ＋ 見出しと本文 ＋ アーチの写真。地に水色の光（ぼかしではなく放射の色の重なり） */
.wp-child-theme-ongakujima .oj-about {
  position: relative;
  padding: 160px 0px 160px 0px;
  background:
    radial-gradient(circle at 88% 18%, rgba(150, 214, 244, 0.45) 0px, rgba(150, 214, 244, 0) 360px),
    radial-gradient(circle at 6% 86%, rgba(190, 236, 226, 0.5) 0px, rgba(190, 236, 226, 0) 320px);
}
.oj-about__inner {
  display: grid;
  grid-template-columns: auto minmax(0px, 1fr) 360px;
  gap: 64px;
  align-items: start;
  max-width: 1200px;
  margin: 0px auto 0px auto;
  padding: 0px 40px 0px 40px;
  box-sizing: border-box;
}
.oj-about__inner--no-photo { grid-template-columns: auto minmax(0px, 1fr); }
.oj-about__vertical {
  margin: 0px 0px 0px 0px;
  writing-mode: vertical-rl;
  font-family: "Shippori Mincho", serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.24em;
  white-space: nowrap;
  color: #1e3445;
}
.oj-about__text p { margin: 0px 0px 24px 0px; font-size: 16px; line-height: 2.2; letter-spacing: 0.04em; color: #42566a; }
.oj-about__photo { overflow: hidden; height: 480px; border-radius: 180px 180px 16px 16px; }
.oj-about__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* NEWS / COLUMN: 1 件大きく ＋ 右に同じ大きさの横長の 2 件（2 件の高さの合計を左にそろえる） */
.wp-child-theme-ongakujima .oj-posts { padding: 120px 0px 120px 0px; background: #eef8fd; }
.oj-posts__inner { max-width: 1200px; margin: 0px auto 0px auto; padding: 0px 40px 0px 40px; box-sizing: border-box; }
.oj-posts__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.oj-posts__grid {
  display: grid;
  grid-template-columns: minmax(0px, 1.4fr) minmax(0px, 1fr);
  grid-auto-rows: 1fr;
  gap: 32px 40px;
}
.oj-post--lead { grid-row: span 2; }
.oj-post__link { display: flex; flex-direction: column; height: 100%; color: #1e3445; }
.oj-post__photo { display: block; overflow: hidden; flex: 1 1 auto; min-height: 160px; border-radius: 12px; }
.oj-post--lead .oj-post__photo { min-height: 320px; }
.oj-post__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.oj-post__link:hover .oj-post__img { transform: scale(1.04); }
.oj-post__body { display: block; padding: 16px 0px 0px 0px; }
.oj-post__meta { display: flex; align-items: center; gap: 16px; margin: 0px 0px 8px 0px; font-family: "Jost", sans-serif; font-size: 13px; letter-spacing: 0.12em; color: #1a9fd6; }
.oj-post__cat { padding: 0px 12px 0px 12px; border: 1px solid #1a9fd6; border-radius: 999px; font-family: "Zen Kaku Gothic New", sans-serif; font-size: 12px; line-height: 22px; letter-spacing: 0.04em; }
.oj-post__title { display: block; font-size: 16px; font-weight: 500; line-height: 1.7; letter-spacing: 0.04em; transition: color 0.3s ease; }
.oj-post--lead .oj-post__title { font-size: 20px; }
.oj-post__link:hover .oj-post__title { color: #1a9fd6; }

/* RECRUIT: 左に大きな写真（右だけ角丸）、右に重ねた白いカード */
.wp-child-theme-ongakujima .cb_contents.oj-recruit {
  position: relative;
  display: block;
  padding: 160px 0px 160px 0px;
  background: #ffffff;
}
.oj-recruit__photo { overflow: hidden; width: 72%; height: 560px; border-radius: 0px 24px 24px 0px; }
.oj-recruit__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oj-recruit__card {
  position: absolute;
  top: 50%;
  right: 6%;
  width: 480px;
  padding: 56px 56px 56px 56px;
  border-radius: 24px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 24px 64px rgba(30, 52, 69, 0.12);
  transform: translateY(-50%);
}
.oj-recruit__card .oj-heading { margin: 0px 0px 24px 0px; }
.oj-recruit__text { margin: 0px 0px 0px 0px; font-size: 16px; line-height: 2; letter-spacing: 0.04em; color: #42566a; }

/* MEMBER（トップ）: 4 列のカード */
.wp-child-theme-ongakujima .oj-member {
  padding: 160px 0px 160px 0px;
  background:
    radial-gradient(circle at 92% 12%, rgba(150, 214, 244, 0.35) 0px, rgba(150, 214, 244, 0) 360px);
}
.oj-member__inner { max-width: 1200px; margin: 0px auto 0px auto; padding: 0px 40px 0px 40px; box-sizing: border-box; }
.oj-member__text { margin: 0px 0px 56px 0px; font-size: 16px; line-height: 2.2; letter-spacing: 0.04em; color: #42566a; }
.oj-member__grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 48px 32px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style: none; }
.oj-member__item { margin: 0px 0px 0px 0px; }
.oj-member .oj-button { margin: 72px 0px 0px 0px; }

/* メンバーのカード（トップと MEMBERS 一覧で共通）: 写真 → 楽器の英字 → 名前 → 楽器 */
.oj-member-card { display: block; color: #1e3445; }
.oj-member-card__photo { display: block; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 16px; background: #eef2f5; }
.oj-member-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.oj-member-card:hover .oj-member-card__img { transform: scale(1.04); }
.oj-member-card__en {
  display: block;
  margin: 16px 0px 0px 0px;
  font-family: "Cormorant Garamond", serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #1a9fd6;
}
.oj-member-card__name { display: inline-block; margin: 4px 16px 0px 0px; font-family: "Shippori Mincho", serif; font-size: 20px; font-weight: 500; letter-spacing: 0.08em; transition: color 0.3s ease; }
.oj-member-card__inst { display: inline-block; font-size: 12px; letter-spacing: 0.08em; color: #6b7c89; }
.oj-member-card:hover .oj-member-card__name { color: #1a9fd6; }

/* ARCHIVE: 見出しと文を横に並べ、下に写真が右から左へ流れ続ける */
.wp-child-theme-ongakujima .cb_contents.oj-archive {
  display: block;
  padding: 160px 0px 160px 0px;
  background: #ffffff;
}
.oj-archive__head {
  display: grid;
  grid-template-columns: auto minmax(0px, 480px);
  gap: 64px;
  align-items: end;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0px auto 56px auto;
  padding: 0px 40px 0px 40px;
  box-sizing: border-box;
}
.oj-archive__head .oj-heading { margin: 0px 0px 0px 0px; }
.oj-archive__text { margin: 0px 0px 0px 0px; font-size: 16px; line-height: 2; letter-spacing: 0.04em; color: #42566a; }
.oj-archive .oj-button { margin: 24px 0px 0px 0px; }
.oj-film { overflow: hidden; }
.oj-film__track { display: flex; width: max-content; animation: oj-film 60s linear infinite; }
.oj-film:hover .oj-film__track { animation-play-state: paused; }
.oj-film__list { display: flex; gap: 24px; margin: 0px 0px 0px 0px; padding: 0px 24px 0px 0px; list-style: none; }
.oj-film__item { overflow: hidden; width: 360px; height: 240px; margin: 0px 0px 0px 0px; border-radius: 16px; }
/* 互い違いに少し下げて、写真の列に揺れを付ける */
.oj-film__item:nth-child(even) { margin: 40px 0px 0px 0px; }
.oj-film__img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes oj-film { to { transform: translateX(-50%); } }

/* ============================================================
   MEMBERS 一覧（authors.php）
============================================================ */

/* 親は #member_archive・#member_sort_button（id）で余白と札の形を決めているので、id を頭に付けて勝たせる */
.wp-child-theme-ongakujima #member_archive.oj-members {
  max-width: 1200px;
  margin: 0px auto 0px auto;
  padding: 120px 40px 160px 40px;
  box-sizing: border-box;
}
.oj-members__text { margin: 0px 0px 48px 0px; font-size: 16px; line-height: 2.2; letter-spacing: 0.04em; color: #42566a; }
/* 楽器の丸い札。押している札は水色で塗る */
.wp-child-theme-ongakujima #member_sort_button.oj-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0px 0px 56px 0px; padding: 0px 0px 0px 0px; border: none; }
.wp-child-theme-ongakujima #member_sort_button .oj-filter__item {
  float: none;
  width: auto;
  height: 40px;
  padding: 0px 20px 0px 20px;
  border: 1px solid #cfe3ee;
  border-radius: 999px;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 38px;
  letter-spacing: 0.06em;
  color: #1e3445;
  background: #ffffff;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.wp-child-theme-ongakujima #member_sort_button .oj-filter__item:hover { border-color: #1a9fd6; color: #1a9fd6; }
.wp-child-theme-ongakujima #member_sort_button .oj-filter__item.active { border-color: #1a9fd6; color: #ffffff; background: #1a9fd6; }
.oj-members__grid { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 56px 32px; }

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

/* バナーの太い白枠（親が style 属性で 14px を付ける）を、中身を枠の上へ広げて 1px だけ残す */
.wp-child-theme-ongakujima #footer_banner .item a {
  width: calc(100% + 26px);
  height: calc(100% + 26px);
  margin: -13px 0px 0px -13px;
}
.wp-child-theme-ongakujima #footer_banner .title { letter-spacing: 0.12em; }
.wp-child-theme-ongakujima #footer_menu a { font-size: 13px; }
.wp-child-theme-ongakujima #copyright { font-size: 12px; }

/* ============================================================
   スプラッシュ（トップを開いたときに 1 回だけ）
============================================================ */

/*
 * <head> のスクリプトが「出す」と決めたときだけ <html> に page--splash が付く。
 * スプラッシュ本体はページの最後（wp_footer）に出るので、それまでの間は body::before の白い幕で KV を隠す。
 * JS が途中で止まっても 5 秒で幕が消える（animation の forwards）。
 */
html.page--splash body { overflow: hidden; }
html.page--splash body::before {
  content: "";
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9998;
  width: 100%;
  height: 100%;
  background: #ffffff;
  animation: site-splash-safety 0.4s ease 5s forwards;
}
@keyframes site-splash-safety { to { opacity: 0; visibility: hidden; } }
/* 幕開けの間は白い下敷きを外す（残すと幕が上がっても KV が見えない） */
html.page--splash.page--splash-open body::before { display: none; }

.site-splash { display: none; }
html.page--splash .site-splash {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* 幕は 2 枚重ね: 白い幕が上へ抜けたあと、水色の幕が少し遅れて追いかける */
.site-splash__curtain {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.site-splash__curtain--back { background: #1a9fd6; }
.site-splash__curtain--front { background: #ffffff; }
.site-splash__inner { position: relative; text-align: center; }
.site-splash__logo {
  margin: 0px 0px 16px 0px;
  font-family: "Shippori Mincho", serif;
  font-size: 56px;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.2;
  color: #1e3445;
  opacity: 0;
  transform: translateY(16px);
}
.site-splash__sub {
  margin: 0px 0px 0px 0px;
  font-family: "Jost", sans-serif;
  font-size: 14px;
  letter-spacing: 0.4em;
  color: #1a9fd6;
}
/* MUSIC ISLAND は 1 字ずつ、下から浮かびながら出す */
.site-splash__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
}
/* 五線: 5 本の線が左から順に引かれる */
.site-splash__staff { display: block; width: 240px; height: 40px; margin: 0px auto 32px auto; }
.site-splash__staff line {
  stroke: #1a9fd6;
  stroke-width: 1;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
}

/* 再生（JS が site-splash--play を付けてから動く） */
.site-splash--play .site-splash__staff line { animation: site-splash-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.site-splash--play .site-splash__staff line:nth-child(2) { animation-delay: 0.08s; }
.site-splash--play .site-splash__staff line:nth-child(3) { animation-delay: 0.16s; }
.site-splash--play .site-splash__staff line:nth-child(4) { animation-delay: 0.24s; }
.site-splash--play .site-splash__staff line:nth-child(5) { animation-delay: 0.32s; }
.site-splash--play .site-splash__logo { animation: site-splash-rise 1s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards; }
.site-splash--play .site-splash__char { animation: site-splash-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(1.1s + var(--i) * 0.07s) forwards; }
/* 幕開け */
.site-splash--leave .site-splash__inner { animation: site-splash-out 0.5s ease forwards; }
.site-splash--leave .site-splash__curtain--front { animation: site-splash-lift 0.9s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
.site-splash--leave .site-splash__curtain--back { animation: site-splash-lift 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards; }

@keyframes site-splash-draw { to { stroke-dashoffset: 0; } }
@keyframes site-splash-rise { to { opacity: 1; transform: translateY(0px); } }
@keyframes site-splash-fade { to { opacity: 1; } }
@keyframes site-splash-out { to { opacity: 0; } }
@keyframes site-splash-lift { to { transform: translateY(-100%); } }

/* ============================================================
   SP（〜767px）
============================================================ */

@media screen and (max-width: 767px) {
  .oj-heading { margin: 0px 0px 32px 0px; }
  .oj-heading__en { font-size: 56px; }
  .oj-heading__ja { margin: 8px 0px 0px 0px; font-size: 15px; }
  .oj-heading--small .oj-heading__en { font-size: 48px; }
  .oj-button__link { min-width: 0px; width: 100%; }
  .oj-posts::before,
  .oj-posts::after { height: 24px; }
  .oj-posts::before { top: -23px; }
  .oj-posts::after { bottom: -23px; }

  .wp-child-theme-ongakujima .oj-about { padding: 96px 0px 96px 0px; }
  .oj-about__inner,
  .oj-about__inner--no-photo { grid-template-columns: auto minmax(0px, 1fr); gap: 24px 24px; padding: 0px 24px 0px 24px; }
  .oj-about__vertical { grid-row: 1; font-size: 22px; letter-spacing: 0.2em; }
  .oj-about__body { grid-column: 1 / -1; }
  .oj-about__photo { grid-row: 1; grid-column: 2; height: 240px; border-radius: 120px 120px 12px 12px; }
  .oj-about__text p { font-size: 15px; line-height: 2; }

  .wp-child-theme-ongakujima .oj-posts { padding: 80px 0px 80px 0px; }
  .oj-posts__inner { padding: 0px 24px 0px 24px; }
  .oj-posts__head { display: block; }
  .oj-button--head { display: none; }
  .oj-posts__grid { grid-template-columns: minmax(0px, 1fr); grid-auto-rows: auto; gap: 24px; }
  .oj-post--lead { grid-row: auto; }
  /* SP は 2 件目からを横並び（写真を左に小さく）にして、縦に長くしない */
  .oj-post:not(.oj-post--lead) .oj-post__link { flex-direction: row; gap: 16px; }
  .oj-post:not(.oj-post--lead) .oj-post__photo { flex: 0 0 120px; min-height: 0px; height: 80px; border-radius: 8px; }
  .oj-post:not(.oj-post--lead) .oj-post__body { padding: 0px 0px 0px 0px; }
  .oj-post--lead .oj-post__photo { min-height: 0px; height: 220px; }
  .oj-post__title,
  .oj-post--lead .oj-post__title { font-size: 15px; }

  .wp-child-theme-ongakujima .cb_contents.oj-recruit { padding: 80px 0px 80px 0px; }
  .oj-recruit__photo { width: 92%; height: 280px; }
  .oj-recruit__card { position: relative; top: auto; right: auto; width: auto; margin: -64px 16px 0px 16px; padding: 32px 24px 32px 24px; transform: none; }
  .oj-recruit__text { font-size: 15px; }

  .wp-child-theme-ongakujima .oj-member { padding: 80px 0px 80px 0px; }
  .oj-member__inner { padding: 0px 24px 0px 24px; }
  .oj-member__text { margin: 0px 0px 40px 0px; font-size: 15px; line-height: 2; }
  .oj-member__grid,
  .oj-members__grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 32px 16px; }
  .oj-member .oj-button { margin: 48px 0px 0px 0px; }
  .oj-member-card__photo { border-radius: 12px; }
  .oj-member-card__en { margin: 8px 0px 0px 0px; font-size: 14px; }
  .oj-member-card__name { display: block; margin: 0px 0px 0px 0px; font-size: 16px; }

  .wp-child-theme-ongakujima .cb_contents.oj-archive { padding: 80px 0px 80px 0px; }
  .oj-archive__head { grid-template-columns: minmax(0px, 1fr); gap: 16px; margin: 0px auto 40px auto; padding: 0px 24px 0px 24px; }
  .oj-archive__text { font-size: 15px; }
  .oj-film__list { gap: 16px; padding: 0px 16px 0px 0px; }
  .oj-film__item { width: 220px; height: 148px; border-radius: 12px; }
  .oj-film__item:nth-child(even) { margin: 24px 0px 0px 0px; }

  .wp-child-theme-ongakujima #member_archive.oj-members { padding: 72px 24px 96px 24px; }
  .oj-members__text { font-size: 15px; line-height: 2; }
  .wp-child-theme-ongakujima #member_sort_button.oj-filter { flex-wrap: nowrap; overflow-x: auto; margin: 0px -24px 40px -24px; padding: 0px 24px 4px 24px; }
  .wp-child-theme-ongakujima #member_sort_button .oj-filter__item { flex: 0 0 auto; height: 36px; padding: 0px 16px 0px 16px; font-size: 13px; line-height: 34px; }

  .site-splash__logo { font-size: 40px; }
  .site-splash__sub { font-size: 12px; }
  .site-splash__staff { width: 200px; height: 32px; margin: 0px auto 24px auto; }
}

/* 動きを減らす設定の人には、スプラッシュを出さない（<head> のスクリプトでも止めている）・ボタンの流れも即時にする */
@media (prefers-reduced-motion: reduce) {
  .oj-button__link::before { transition: none; }
  .oj-film { overflow-x: auto; }
  .oj-film__track { animation: none; }
  .wp-child-theme-ongakujima #global_menu > ul > li > a::after,
  .wp-child-theme-ongakujima #header_social_link li a::before,
  .wp-child-theme-ongakujima #footer_social_link li a::before { transition: none; }
}

/* ============================================================
   ヘッダー（SP: テーマが 1001px 以下で html に .mobile を付けて切り替える）
============================================================ */

/* 白地に紺の字。下に細い線を引いて KV と分ける */
.mobile .wp-child-theme-ongakujima #header { background: #ffffff; border-bottom: 1px solid #e3eef4; }
.mobile .wp-child-theme-ongakujima #header_logo .logo a,
.mobile .wp-child-theme-ongakujima #menu_button::before { color: #1e3445; }
.mobile .wp-child-theme-ongakujima #header_logo .logo a:hover,
.mobile .wp-child-theme-ongakujima #menu_button:hover::before { color: #1a9fd6; }