@charset "utf-8";

/* ==========================================================
   KAWAII LAB. トップページ／グループ紹介ページ 独自CSS
   ==========================================================
   home.php（front_topウィジェット）と、front-top-widget.html内の
   マークアップに対応するスタイルです。
   ブログ全体のレイアウト・記事一覧・サイドバーなどはSWELL側の
   デザインをそのまま使うため、それらのCSSは含んでいません。
   ========================================================== */

/* コンテナ幅の調整（#content = .l-content.l-container）
----------------------------------------------- */

/* SWELL標準の.l-containerは、max-width（「サイト幅」設定・px固定）に対して
   margin: autoで余りを振り分ける方式。この方式だと、画面幅とmax-widthの差が
   大きくなるほど（ワイドモニターほど）、余白の"割合"だけがどんどん増えていき、
   中身と余白のバランスに偏りが出やすい。
   そのため#content（.l-container）だけ、ここで上書きする。
   ・クラス名（.l-container）ではなくID（#content）で絞っているのは、
     .l-containerはSWELL側であちこちに使われる共通クラスのため、クラスごと
     上書きすると、portal.cssが読み込まれるページ内の他の.l-container要素
     （ヘッダーなど）まで巻き込んでしまうのを避けるため。
   ・padding: 5%（割合ベース）を基本にし、画面幅が変わっても余白と中身の
     比率が一定に保たれるようにする（VIDEO・VIDEO SHORTSセクションの
     #portal-video-innerと同じ考え方）。
   ・max-widthは明示的にnone（上限なし）にしている。以前は具体的なpx数値
     （2560pxなど）を指定していたが、その行をコメントアウトして無効化すると、
     「何も指定していない」状態になり、SWELL標準の.l-container自身が持つ
     max-width（calc(var(--container_size)+var(--swl-pad_container)*2)、
     「サイト幅」の設定値から計算される値）が代わりに顔を出してしまう不具合が
     実際に発生した（検証ツールで確認済み）。max-width: noneという有効な値を
     明示しておけば、この行が今後どう変わっても、SWELL標準の値に差し替わる
     ことはなく、常にpadding: 5%だけで完結する、意図した動きになる。 */
#content.l-container {
  width: 100%;
  max-width: none;
  padding-left: 5%;
  padding-right: 5%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* フロントページの#content自体の背景色は、以前はここにvar(--color_bg)固定で
   書かれていたが、「SWELL Extension｜メインビジュアル・背景 拡張設定」
   プラグインを自己完結させるため、プラグイン側（swell-ext-main-visual.css）
   へ移動した。#body_wrap.home #content.l-container { background: ...; }
   というセレクタ自体はそちらに定義されている。 */

/* #content（外側の箱）だけ広げても、その内側にある#main_content（.l-article）が
   独自にmax-width: var(--article_size)（「1カラム時の記事コンテンツ幅」、900px）
   を持っているため、そのままでは見た目が変わらない。#main_contentは、この
   もう1段階内側の頭打ちを外し、#content側の5%padding＋1600px上限だけに
   委ねる形にする（#main_content自体には、これ以上のpadding/marginは持たせない
   ＝#content側の5%が、そのままこのページの余白になる）。
   【絞り込みについて】以前はここに絞り込みが無く、サイト全体（kawaii_callmix
   の個別記事ページ等）にまで意図せず全幅レイアウトが効いてしまっていた
   （SWELL標準の「サイドバー分の幅を引く」計算より、ここのwidth: 100%が
   詳細度で勝ってしまうため）。.-sidebar-offは、SWELL標準がbody_classに
   自動で付与する「サイドバー非表示中」を示すクラスなので、これで絞り込むと、
   ページごとのサイドバー表示設定（外観 > カスタマイズ > サイドバー）と
   自動的に連動する形になる：サイドバーがオフのページ（トップページ含む）
   ではこのルールがそのまま効き、オンのページではこのルール自体が当たらなく
   なるため、SWELL標準の2カラム計算が邪魔されない。 */
.-sidebar-off #main_content.l-article {
  max-width: 100%;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* 英字の見出し・ラベル用フォント（CUTIE STREET公式サイトを参考）
   → 固定ページ・404ではportal.cssが読み込まれず、ヘッダーメニュー
   （.c-gnav a / .c-spnav a）だけフォントが抜けてしまっていたため、
   全ページ共通で読み込まれるstyle.css側に移設した。
----------------------------------------------- */

/* グループナビ
----------------------------------------------- */

/* この左右の余白（5%）は、以降ほぼ同じ形で他のセクション（#group-hub-inner、
   #portal-*-inner など）にも登場する。
   以前は SWELL標準の変数 var(--swl-pad_container, 5%) を使っていたが、
   SWELL側でこの変数に実際の値（画面幅に応じて4vw/32px/48px）を常に
   設定しているため、5%（予備の値）は一度も使われていなかった。
   さらにこの変数は、.l-container（ヘッダー・本文エリアなど）の横幅の
   上限（max-width）の計算にも使われているため、変数自体を書き換えると
   余白以外にも影響が出てしまう。そのため、ここでは変数を使わず、
   触りたい要素だけに直接 5% を指定している。 */
#group-nav {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 0;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
  text-align: center;
}

#group-nav h2 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
  border-left: 2px solid #333;
  padding-left: 12px;
  text-align: left;
}

#group-nav ul {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

#group-nav ul li a {
  display: block;
  padding: 8px 20px;
  background: #ff69b4;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  font-size: 13px;
  transition: 0.1s ease-in-out;
}

#group-nav ul li a:hover {
  background: #ff1493;
  transition: 0.1s ease-in-out;
}

/* グループハブ（メインコンテンツ化）
----------------------------------------------- */

#group-hub {
  /* フルブリードと.l-content内への収まりを、行ったり来たり試した末、最終的に
     「①枠内に収める路線」で統一した。#contentの枠（padding: 5%、上限なし）を
     広げた意味が無くならないよう、必然性の薄いフルブリードはやめ、
     .l-content・#main_contentの制限幅にそのまま収める
     （VIDEO・VIDEO SHORTSだけは、Swiperスライダーの都合で例外的にフルブリードのまま）。 */
  padding: 40px 0;
}

/* 以前はここにも独自の左右5%padding（padding-left/right: 5%）を持たせていたが、
   #group-hubは#content内に収まっている（フルブリードではない）ため、
   #content側の5%（画面幅基準）に対して、さらにここで5%（#group-hubの90%幅
   基準＝実質約4.5%分）が二重に加算されてしまい、GROUPSカードの行だけ
   INFORMATION/SCHEDULE等の一覧より内側にズレて表示される不具合になっていた。
   他の#portal-*-innerと同じく、ここは横paddingを持たせず#content側の5%だけに
   揃える（縦のpadding: 40px 0は#group-hub側が担当）。 */
#group-hub-inner {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* INFORMATION・SCHEDULE・VIDEO等の見出し（.portal-section-title h2）と
   同じ見た目（フォントサイズ・太さ・字間・余白）に揃える。
   GROUPSには「VIEW ALL」リンクが無く.portal-section-titleの2カラム構造
   （display:flex; justify-content:space-between;）を使う意味が無いため、
   クラス名・HTML構造はそのまま、値だけ.portal-section-title h2に合わせている。
   text-align: centerだけは元のGROUPS独自の指定として残す（他の見出しは
   「VIEW ALL」と横並びのため左寄せだが、GROUPSは単独の見出しなので中央配置の
   ままの方が見た目のバランスが良いため）。
   レスポンシブ側の上書きも、.portal-section-title h2と同じブレークポイント
   （960px・600〜959px）に合わせて下の該当メディアクエリに追加している。 */
.group-hub-heading {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.group-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* KAWAII LAB.追加により5→6列（1120px/960px時の
    3列・2列ブレークポイントは、6でもちょうど割り切れる（3+3・2+2+2）ため変更不要） */
  gap: 16px;
}

.group-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 220px;
  border-radius: 12px;
  text-decoration: none;
  padding: 20px 10px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.group-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.group-card-emoji {
  font-size: 44px;
  margin-bottom: 10px;
}

.group-card-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 4px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.group-card-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 14px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.group-card-btn {
  font-size: 11px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  padding: 5px 14px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.card-fruits {
  background: linear-gradient(135deg, #ef866c, #efa06c);
}

.card-candy {
  /* KAWAII LAB.追加時、元は黄緑系グラデーションだったが、CANDY TUNEの絞り込みボタン色
     （filter-candy、#b06ab3＝紫系）に合わせる形でKAWAII LAB.側と入れ替えた。 */
  background: linear-gradient(135deg, #8c6cef, #be6cef);
}

.card-sweet {
  background: linear-gradient(135deg, #ef6cc6, #e9a5bc);
}

.card-cutie {
  background: linear-gradient(135deg, #6cb2ef, #6ce4ef);
}

.card-more {
  background: linear-gradient(135deg, #efc46c, #efde6c);
}

.card-kawaiilab {
  /* CANDY TUNE（card-candy）と紫グラデーション（#8c6cef〜#be6cef）を入れ替えたため、
     こちらは黄緑系。絞り込みボタン（filter-kawaiilab）等の他の箇所も
     同じ黄緑系（色相100°・彩度75%・明度38%系）で統一済み。 */
  background: linear-gradient(135deg, #efe46c, #a3ef6c);
}

/* 最新ニュース見出し
----------------------------------------------- */

.news-heading {
  font-size: 16px;
  font-weight: bold;
  padding-left: 12px;
  border-left: 2px solid #000;
  margin: 0 0 25px;
}

@media (max-width: 1120px) {
  .group-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ヒーローエリア
----------------------------------------------- */

/* 背景色・余白・中央寄せは、サイドバーの有無に関わらず常に適用する
   （見た目としては「色付きの帯」自体は常に残す）。 */
#hero {
  background: linear-gradient(135deg, #fbf4d8 0%, #efe3b3 50%, #efbfb3 100%);
  padding: 70px 0;
  text-align: center;
}

/* 【絞り込みについて】「画面いっぱいに広げる」部分（フルブリード）だけ、
   サイドバー非表示中限定にする。以前はここに絞り込みが無く、サイドバー
   表示中のページでも常にフルブリードになり、サイドバーと重なってしまって
   いた。同じフルブリードの仕組みを持つ.video-slider-outer（このファイル内、
   後述）では、すでに#body_wrap.-sidebar-offで絞り込まれていたため、それに
   合わせる形でここにも同じ絞り込みを追加した：サイドバー表示中は、通常の幅
   （親要素＝#main_content.l-articleの、サイドバー分を引いた幅）にそのまま
   収まった、色付きの箱になる。 */
#body_wrap.-sidebar-off #hero {
  /* SWELLの幅制限コンテナから抜け出して画面いっぱいに広げる */
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* サイドバーonでも、960px未満では常にフルブリードにする。
   SWELL標準の「サイドバー分の幅を引く」2カラム計算自体が、
   @media (min-width: 960px) の中でしか効かない仕様のため
   （960px未満ではサイドバーは横に並ばず下に落ち、メインコンテンツは
   常に画面幅いっぱいになる）、960px未満に限っては「サイドバーon」
   でも実質的に「サイドバーoff」と同じ状態だと言える。
   .video-slider-outer側にも、全く同じ考え方の指定がある。 */
@media not all and (min-width: 960px) {
  #body_wrap.-sidebar-on #hero {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* #heroが画面幅いっぱいに広がる作りのため、#hero-innerから見た「親の幅」は
   本文エリアの制限を受けない画面幅そのものになる。ヘッダーと同じ理由で、
   max-width: 1080pxとmargin: 0 autoの組み合わせが、5%パディングと
   二重に効いてしまうため、max-widthを外してパディングだけに任せる。 */
#hero-inner {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
}

.hero-en {
  font-size: 13px;
  letter-spacing: 4px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 10px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-jp {
  font-size: 34px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-desc {
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ポータル共通セクション
----------------------------------------------- */

/* フルブリード（画面幅いっぱいに広げる処理）は、以前は#portal-video・
   #portal-video-shorts（セクション全体）にかけていたが、それだと背景色も
   画面の端まで広がってしまい、GROUPS・INFORMATION&SCHEDULE・コール・MIXの
   セクション（#content側の枠＝padding: 5%の中に収まる幅）と構成が食い違って
   しまっていた。
   フルブリードが必要なのは、あくまでSwiperスライダーで次のスライドが画面端に
   少し見切れる演出のためだけなので、セクション全体ではなくスライダー本体
   （.video-slider.swiper）だけにこの処理を移した。これにより、
   #portal-video・#portal-video-shortsという「箱」自体は他のセクションと
   同じ幅・同じ背景の扱いに揃い、その中のスライダー部分だけが画面幅いっぱいに
   飛び出す構成になる（詳しくはスライダー側のCSSを参照）。
   ※サイドバーが無い時だけこの処理をする理由は変わらず：サイドバーがある状態で
   フルブリードすると中心がズレてレイアウトが崩れてしまうため、その場合は
   通常のブロック要素として、コンテンツ列の幅にそのまま収まる形にする
   （サイドバーの表示・非表示は管理画面側でいつでも自由に切り替えられる想定）。 */

/* 背景色は、以前は background: inherit で親要素の計算済みの色を引き継ぐ方式を
   取っていたが、検証ツールで実際のDOM（#body_wrap〜各セクション）の
   computed background-colorを確認したところ、#body_wrap自体が
   （-body-solidというクラス名にもかかわらず）background-colorを持っておらず、
   終始 transparent だった。background: inherit は「直接の親の計算済みの値」
   しかコピーできないため、途中の要素がどれだけ透明かにかかわらず、
   透明を透明へコピーし続けるだけで、実際の色までは届かなかった。
   ※ SWELL本体側のCSS（main.css）を確認したところ、実際に--color_bgが
   background-colorとして使われているのは<body>要素1箇所だけで、
   #body_wrap・#content・#main_content・.l-mainContent__innerは
   どれもbackgroundを持っていない。つまりinheritはどこで使っても
   （直接の親1つしか見ないため）結局はtransparentにしかならず、
   「inheritならではの利点」は無い（transparentと明示した方が、
   意図が伝わりやすいので、以降はtransparentで統一している）。
   ※ SWELL本体は、管理画面「外観 > カスタマイズ > サイト全体設定 > 基本カラー」
   ＞「背景色」の設定値を、SWELL標準のCSS変数 --color_bg としてすでに
   自動出力している（wp-content/themes/swell/classes/Style/Color.php）。 */

/* フロントページ専用（#group-hub・#portal-info-schedule）は、独自のbackground
   指定を持たせず、常に透明のままにしている。フロントページでは#content自体が
   background: var(--color_bg)を持つようになったため（#body_wrap.home #content
   の指定を参照）、ここを透明にしておけば、その色がそのまま透けて見える
   （2重に同じ色を塗るのと結果は同じなので、指定自体を省略している）。 */

/* #portal-video・#portal-video-shorts・#portal-callmixは、フロントページの
   ミニプレビューと、専用ページ（/video/・/video-shorts/・/call-mix/）の
   両方で同じIDを使い回している。フロントページ側は上と同じ理由で
   （#content自体が色を持つため）独自のbackground指定は不要。
   フロントページ以外側だけ、あえてtransparentを明示して
   #body_wrap:not(.home)::before（そのページ上部だけの帯）をそのまま
   透けさせている（フロントページ以外は#contentが無色のままなので、
   ここで明示的にtransparentにしておかないとデフォルトの挙動に委ねる形になり、
   意図が伝わりにくいため）。
   ※ .homeクラスが実際に付くのは<body>タグ自身ではなく#body_wrap（header.php側で
   body_class()を<div id="body_wrap">に対して呼んでいるため）。#body_wrapを
   基準にする（body:not(.home)等と書くと、存在しないクラスを見ることになり、
   全ページで常にtrueになってしまう）。 */
#body_wrap:not(.home) #portal-video,
#body_wrap:not(.home) #portal-video-shorts,
#body_wrap:not(.home) #portal-callmix {
  background: transparent;
}

/* #portal-group（グループ個別ページ専用。フロントページとは共有していない）は、
   フロントページに存在しないため出し分け不要。常にtransparentにして、
   #portal-info・#portal-scheduleと同じく帯を透けさせる。 */
#portal-group {
  background: transparent;
}

/* #portal-info・#portal-schedule（VIEW ALLの一覧ページ専用。フロントページとは
   共有していない）も同じ理由でtransparent。 */
#portal-info,
#portal-schedule {
  background: transparent;
}

/* 左右のpaddingを一旦0にする実験。#content側ですでに5%のpaddingが
   付いているため、ここを0にすると、各セクションの中身（見出し・絞り込み
   ボタン・カード・リスト項目）は#content由来の5%（画面幅基準）だけで
   揃うことになり、フルブリードして単独で5%を持つ.video-slider-outerとも
   基準が一致する（#portal-video-innerのように、#content→#portal-video→
   #portal-video-innerと2段階で5%が重なる、という状態を解消する）。
   ※ #portal-info-inner・#portal-schedule-inner（archive-viewall.php側の
   information/scheduleページ単体で使っているID）が、名前の似ている
   #portal-info-schedule-inner（フロントページの2カラム表示専用ID）と
   混同されて指定漏れになっていたため、ここに追加した
   （これが無いと、video/video-shortsだけ見出し上に40px分の余白が付き、
   info/scheduleだけ余白なしになって高さがバラバラに見えていた）。 */
#portal-info-inner,
#portal-schedule-inner,
#portal-info-schedule-inner,
#portal-video-inner,
#portal-video-shorts-inner,
#portal-callmix-inner,
#portal-group-inner {
  width: 100%;
  margin: 0 auto;
  padding: 40px 0;
  box-sizing: border-box;
}

/* INFORMATION・SCHEDULEの2列レイアウト（公式サイトの
   .page--home .block--content-wrap { display:flex; ... } を参考） */
#portal-info-schedule-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  /* gap指定は無し。justify-content: space-betweenが2カラムの間の余白を自動で確保するため、
     固定gapで最低間隔を強制すると、その分カラム自体の実質幅が狭くなってしまう。 */
}

.portal-col {
  flex: 0 1 44%; /* 均等に広がりきらないようにし、space-betweenで真ん中に隙間を作る */
  min-width: 0;
  container-type: inline-size; /* このカラム自身の幅を基準に、下の絞り込みボタンの表記を切り替えるため */
}

@media not all and (min-width: 960px) {
  #portal-info-schedule-inner {
    flex-direction: column;
    flex-wrap: nowrap; /* column方向に切り替わった後もベースのwrapが残っていると、
                           高さ未確定のflexコンテナで意図しない折り返しが起きるリスクがあるため明示的に打ち消す */
    align-items: stretch; /* ベースのalign-items:flex-startは、行(row)方向では「上端揃え」の意味だが、
                              column方向では交差軸が横になるため「各カラムの幅を中身にフィットさせる（広げない）」
                              意味に変わってしまう。stretchで上書きし、各カラムを横幅いっぱいに広げる。 */
    gap: 40px; /* 縦積みの時は、space-betweenが効かないため、ここで余白を確保する */
  }

  /* 縦積みになると、他のセクションと違いgapの余白だけになるが、
     区切り線自体は無しの方針にしたため、余白だけ確保する */
  .portal-col:not(:last-child) {
    padding-bottom: 30px;
  }
}

.portal-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
}

.portal-section-title h2 {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #333;
}

.portal-more {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
  margin-left: 16px; /* space-betweenで生まれる余白が16pxを下回るときの最低限の隙間を保証する */
}

.portal-more:hover {
  color: #d6a400;
  text-decoration: none;
}

/* INFORMATION リスト */

.info-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.info-list-item a {
  display: flex;
  align-items: center;
  padding: 14px 4px;
  gap: 16px;
}

.info-list-item a:hover .info-title {
  text-decoration: underline;
}

.info-date {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #999;
  width: 90px;
  flex-shrink: 0;
}

.info-cat {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--group-color, #d6a400);
  border: 1px solid var(--group-color, #d6a400);
  border-radius: 3px;
  padding: 2px 8px;
  width: 90px;
  flex-shrink: 0;
  text-align: center;
}

.info-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.info-new {
  flex-shrink: 0;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #ff5a5a;
  letter-spacing: 0.5px;
}

/* SCHEDULE リスト */

.schedule-list {
  list-style: none;
  margin: 0 0 15px;
  padding: 0;
}

/* 【修正】以前は.schedule-item（<li>）をdisplay:flexにして、中の<a>はdisplay:contentsで
   「透明化」し、.schedule-date／.schedule-txtを直接<li>のflexアイテムとして扱う構造だった。
   しかし<a>（クリック可能・フォーカス可能な要素）にdisplay:contentsを使うと、ブラウザが
   ヒットテスト・フォーカスリング・DevToolsのハイライト枠を正しく計算できないことがある
   （実際の不具合：DevToolsで<a>を選択すると、見た目の行と全く違う位置・サイズの枠が
   表示される）。INFORMATION側（.info-list-item a）はもともとこの問題を避けるため、
   flexコンテナ自体を<a>に直接持たせる設計になっており、SCHEDULE側もそれに合わせて
   flex一式（display/align-items/gap/padding）を<li>からその中の<a>へ移した
   （PHP側のkawaiilab_render_schedule_item_html()から style="display:contents" も削除済み）。 */
.schedule-item a {
  display: flex;
  align-items: center;
  gap: 0; /* .schedule-dateがwidth: 60px固定のため、見た目の隙間は
    （60px－文字の実幅）＋gapの合計になる。text-align: leftにした際、
    その余白が全部文字の右側に寄って隙間が広がって見えたため、
    widthは60pxのまま（将来の表記揺れに対する余裕を残すため）gap側を0にしている。 */
  padding: 14px 4px;
}

.schedule-date {
  width: 60px;
  text-align: left; /* center→left。INFO側の.info-dateと同じ左揃えにして、
    上のタイトル・絞り込みボタンの左端と見た目の開始位置を揃えた
    （centerのままだと、60px幅の箱の中で文字自体が内側にインデントされて見えていた）。 */
  flex-shrink: 0;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--group-color, #d6a400);
}

.schedule-month {
  display: block;
  font-size: 11px;
  color: #999;
}

.schedule-year {
  display: block;
  font-size: 9px;
  color: #fff;
  background: #d6a400;
  border-radius: 3px;
  padding: 1px 4px;
  margin-bottom: 3px;
}

.schedule-day {
  display: block;
  font-size: 22px;
  color: inherit; /* 親.schedule-item直下の要素として、--group-colorを継承する
    （元は.schedule-item[data-group="..."] .schedule-day { color: inherit; }を
    グループの数だけ書いていたが、.schedule-date側がvar(--group-color)化されたことで、
    inheritさえしておけば自動的に反映されるため、常時inheritの1行に統一した）。 */
}

.schedule-dow {
  display: block;
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}

.schedule-cat {
  font-size: 11px;
  color: #fff;
  background: var(--group-color, #d6a400);
  border-radius: 3px;
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 4px;
}

.schedule-tit {
  font-size: 14px;
  color: #333;
}

.schedule-item a:hover .schedule-tit {
  text-decoration: underline;
}

.schedule-note {
  font-size: 12px;
  color: #bbb;
}

.video-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 2px solid var(--group-color, #d6a400);
  overflow: hidden;
  margin-bottom: 10px;
  position: relative; /* サムネイル画像・再生ボタンを重ねる基準にする */
}

/* YouTubeのサムネイル画像・再生ボタン（functions.php側の
   kawaiilab_render_video_item_html()がHTMLとして最初から出力する）。
   タップされるまでは<iframe>自体を作らない方式（facade）にしており、
   タップされた時だけportal.js側で<iframe>を組み立てて差し込む
   （詳しい理由はportal.js側のコメントを参照）。 */
.video-frame__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  z-index: 1;
}

.video-frame__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  cursor: pointer;
  z-index: 2;
}

/* 再生アイコン（三角）をCSSだけで描く */
.video-frame__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%; /* 三角の見た目の重心を中央に合わせるため、少し右にずらす */
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 16px;
  border-color: transparent transparent transparent #fff;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* YT.Player()が実際のiframeに置き換えるまでの、ごく一瞬だけ存在する
   プレースホルダー。置き換わった後のiframe自体は、上の.video-frame iframe
   ルールがそのまま効く。 */
.yt-player-placeholder {
  width: 100%;
  height: 100%;
}

.video-placeholder {
  color: #999;
  font-size: 12px;
}

.video-tit {
  font-size: 13px;
  color: #333;
}

/* グループ別フィルタータブ
----------------------------------------------- */

.group-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.filter-btn {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #ccc;
  background: #fff;
  color: #999;
  transition: 0.15s ease-in-out;
}

/* ホバー時：少し浮き上がる（選択中かどうかに関わらず共通） */
.filter-btn:hover {
  transform: translateY(-1px);
}

/* PCではフル表記、スマホでは短縮表記を出す（デフォルトはPC＝フル表記を表示） */
.filter-btn__short {
  display: none;
}

.filter-btn.filter-all {
  border-color: #333;
  color: #333;
}

.filter-btn.filter-all:hover:not(.is-active) {
  background-color: rgba(51, 51, 51, 0.08);
}

.filter-btn.filter-all.is-active {
  background: #333;
  color: #fff;
}

/* グループ絞り込みボタン（fruits/candy/sweet/cutie/more/kawaiilab）の色。
   以前はグループごとに.filter-btn.filter-Xというルールを個別に用意し、HEX値を
   ハードコードしていたが、KAWAII LAB.追加時にCSS側への反映を書き忘れる事故が
   起きたため、functions.php側で各ボタンに埋め込んでいるstyle="--group-color: ...;"
   （KAWAIILAB_GROUPSのcolorをそのまま出力）を使った可変ルール1セットにまとめた。
   グループが増えても、KAWAIILAB_GROUPSにcolorさえ追加すれば自動的に反映される。
   ホバー時の薄い背景色はcolor-mix()で作っている（.callmix-part__item--mixで
   既に使っている手法と同じ）。 */
.group-filter:not(.category-filter) .filter-btn:not(.filter-all) {
  border-color: var(--group-color, #d6a400);
  color: var(--group-color, #d6a400);
}

.group-filter:not(.category-filter) .filter-btn:not(.filter-all):hover:not(.is-active) {
  background-color: color-mix(in srgb, var(--group-color, #d6a400) 12%, transparent);
}

.group-filter:not(.category-filter) .filter-btn:not(.filter-all).is-active {
  background: var(--group-color, #d6a400);
  color: #fff;
}

/* カテゴリー別フィルタータブ（SCHEDULE専用・グループフィルターの下に表示）
----------------------------------------------- */

.schedule-filter-label {
  font-size: 11px;
  color: #bbb;
  font-weight: bold;
  letter-spacing: 1px;
  margin: -12px 0 8px;
}

.category-filter {
  margin-bottom: 24px;
}

.category-filter .filter-btn {
  border-color: #333;
  color: #333;
}

.category-filter .filter-btn:hover:not(.is-active) {
  background-color: rgba(51, 51, 51, 0.08);
}

.category-filter .filter-btn.is-active {
  background: #333;
  color: #fff;
}

/* グループ別アーカイブページの「新着／人気」タブ
----------------------------------------------- */

/* taxonomy-kawaii_idol_group.php（グループ別一覧。callmix/video/video-shortsの
   3種類を1ファイルで兼ねている）だけで使う、SWELL標準のタブコンポーネント
   （archive-term.php由来、SWELL_PARTS::tab_list()が出力するHTML・開閉動作は
   そのまま）。見た目だけ、上の.filter-btn（ピル型の絞り込みボタン）と同じ
   デザイン言語に揃える。
   「新着/人気」はグループを表すものではなく表示順の切り替えなので、
   --group-colorではなく.filter-btn.filter-allと同じ配色（白地に#333の枠線、
   選択中は#333で塗りつぶし）に合わせている。

   SWELL本体（blocks.css）で実際のis-style-bbを確認。「吹き出し風」ではなく、
   下線タイプのタブだった：常時薄く見える::before（1px、グレー、opacity:.4）と、
   選択中だけ色付きで太くなる::after（2px、--color_main）の2層構成。
   どちらにせよ、このサイトのピル型ボタンの見た目には合わないため、
   ::before/::afterごと打ち消して作り替える方針は変わらない。

   加えて、素のSWELL側で実害のある指定が2つあったため、合わせて打ち消している：
   ①.p-postListTabの初期値margin: 4em auto 2em; width: 96%（上の余白・横幅が
     他のportal-callmix内の要素と揃わなくなる）。
   ②SWELL_PARTS::tab_list()自身がdata-width-pc="25" data-width-sp="50"を
     固定出力しており、これが--the-tab-flex経由でタブ1個の幅を25%/50%固定に
     してしまう（ピル型ボタンは文字幅に合わせたいため、2タブしか無い今回は
     特に間延びして見えてしまう）。

   【2026-10】以前は#portal-callmixだけに絞っていたが、taxonomy-kawaii_idol_group.php
   がvideo/video-shorts（/video-group/{term}/・/video-shorts-group/{term}/）も
   同じ構造（SWELL_PARTS::tab_list()・parts/post_list/item/pagination）で
   出すようになったため、そちらの箱のid（portal-video・portal-video-shorts。
   front-page.php・archive-video.phpと使い回している既存id）にも:is()で広げた。
   #portal-callmixと同じ理由で、他のportal.css読み込みページ（トップページ・
   VIEW ALL・グループ紹介）にはこの.c-tabListコンポーネント自体が存在せず
   実害は無いが、SWELL標準クラスへの上書きが意図せず他ページへ波及しないよう
   念のため限定している。 */
:is(#portal-callmix, #portal-video, #portal-video-shorts) .p-postListTab {
  width: 100%;
  margin: 0 0 24px;
}

:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-tabList {
  --the-tab-flex: 0 0 auto; /* data-width-pc="25"由来の固定幅を解除し、文字幅に合わせる */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 !important; /* SWELL標準が!importantでmarginを指定しているため、こちらも!importantで上書き */
  /* 中央寄せ。このタブは.filter-btn（リストを絞り込むだけ）とは違い、中身ごと
     別パネルに入れ替える本来のタブUIなので、揃える相手はgroup-filter（今は
     このページから削除済み）ではなく、一覧の下にある.callmix-pagination・
     .c-pagination（これも中央寄せ）の方がふさわしい。SWELL標準（.c-tabList）
     自体もjustify-content: centerがデフォルトなので、素の挙動に戻す形になる。 */
  justify-content: center;
}

:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-tabList .c-tabList__item {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}

:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-tabList__button {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  /* .filter-btnと同じフォント指定（common.css側の一覧には入れず、ここだけで
     完結させている。common.cssはサイト全体に効くため、このタブ専用の指定を
     そちらに置くと、他ページの.c-tabList__buttonにまで意図せず波及してしまう）。 */
  font-family: 'Archivo Black', -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic Medium", 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
  display: inline-block;
  width: auto;
  height: auto;
  line-height: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1.5px solid #333;
  background: #fff;
  color: #333;
  opacity: 1; /* SWELL標準（is-style-bb）の初期値opacity:.7を解除（薄く見えてしまうため） */
  box-shadow: none;
  transition: 0.15s ease-in-out;
}

:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-tabList__button::before,
:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-tabList__button::after {
  content: none; /* is-style-bbの下線装飾（::before常時／::after選択時）を両方とも消す */
}

:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-tabList__button:hover {
  transform: translateY(-1px);
  background-color: rgba(51, 51, 51, 0.08);
}

/* SWELL標準のJS（tabControl）が、選択中のタブにaria-selected="true"を付け替える */
:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-tabList__button[aria-selected="true"] {
  background: #333;
  color: #fff;
}

/* グループ別アーカイブページのページネーション配色を、.callmix-pagination・
   .viewall-pagination（info/schedule/video/video-shorts）と揃える。
   taxonomy-kawaii_idol_group.phpではSWELL標準のparts/post_list/item/paginationを
   使っており、これはmain.css側で.c-pagination・[class*=page-numbers]として
   出力され、選択中の色がvar(--color_main)（SWELLの基本カラー設定）になる、
   このサイト独自の配色（#ddd枠線・#333文字・選択中#222・ホバー#d6a400）とは
   別物のルールになっていたため、ここで揃える（video/video-shortsの箱にも
   同じ理由で:is()を広げている。上のタブと同じ経緯）。 */
:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-pagination {
  justify-content: center;
  margin: 32px 0 0;
}

:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-pagination [class*="page-numbers"] {
  border-radius: 999px;
  border: 1px solid #ddd;
  background: none;
  color: #333;
  font-weight: 700;
}

:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-pagination [class*="page-numbers"].current {
  background: #222;
  border-color: #222;
  color: #fff;
}

:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-pagination a[class*="page-numbers"]:hover {
  background: none;
  border-color: #d6a400;
  color: #d6a400;
}

:is(#portal-callmix, #portal-video, #portal-video-shorts) .c-pagination__dot {
  color: #999;
}


/* VIDEOスライダー（Swiper.js）
----------------------------------------------- */

/* サイドバーが無い時だけ、SWELLの幅制限コンテナから抜け出して画面いっぱいに広げる
   （理由は#portal-video側のコメントを参照）。
   以前はこの処理を.video-slider.swiper自身（Swiper.jsのコンテナそのもの）に
   直接かけていたが、Swiper.jsは自分のコンテナのclientWidth（＝paddingを含む値）を
   そのままスライド幅の計算に使うため、コンテナ自身にpaddingを持たせると
   「Swiperが思っている幅」と「実際にスライドが見えている幅」がズレてしまい、
   動画が変な位置・変なサイズで表示される不具合が起きた。
   そのため、フルブリード＋左右の余白は、Swiperのコンテナ本体ではなく、
   それをもう1つ外側から包むだけの専用要素（.video-slider-outer。front-page.php側で
   追加したdiv）に持たせる形に変更した。.video-slider.swiper自身にはpaddingを
   一切持たせず、常に親（.video-slider-outer）の中身の幅＝100%をそのまま使う。
   ※左右の余白は%ではなくvwで指定している。パーセント指定のpaddingは、
   要素自身の見た目の幅（ここではwidth: 100vw）ではなく、あくまで親要素
   （#portal-video-inner。#content内に収まる、画面幅の約90%の箱）の幅を基準に
   計算されるため、もし5%と書いてしまうと「画面幅の90%×5%＝画面幅の4.5%」に
   なってしまい、#content.l-container側の5%（画面幅そのものの5%）とズレる
   （実際にこのズレが原因で、動画がタイトルより少しはみ出す不具合が発生した）。
   vwは親要素の幅に関係なく常にビューポート基準なので、このズレが起きない。
   ※100vwは、縦スクロールバーの太さも含めた画面幅を指すため、実際に見えている
   幅（スクロールバーを除いた幅）よりわずかに広くなり、中央寄せの計算もその分
   ズレる。SWELL本体の.alignfullクラス（main.css）が、JSで実測したスクロールバー
   幅を--swl-scrollbar_widthというCSS変数に入れて補正しているのと同じやり方を、
   ここにも適用する（transform: translateX(-50%)ではなく、SWELL側と同じ
   calc()ベースの書き方に統一）。 */
#body_wrap.-sidebar-off .video-slider-outer {
  width: 100vw;
  max-width: 5120px; /* デュアルQHD相当の、最上位クラスのウルトラワイドモニターを目安にした上限 */
  position: relative;
  left: calc(50% - 50vw);
  padding-left: 5vw;
  padding-right: 5vw;
  box-sizing: border-box;
}

@supports (--css: variables) {
  #body_wrap.-sidebar-off .video-slider-outer {
    left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px) / 2);
    width: calc(100vw - var(--swl-scrollbar_width, 0px));
  }
}

/* SPだけ、左右の余白（5vw）を無くして画面幅いっぱいに表示する。
   PC側の余白（タイトル・他セクションとの横位置を揃えるための5vw）は、
   スマホではむしろカードが小さくなりすぎる・端の余白が間延びして見える
   ため、SPだけ無くす方針にした。width/left側（フルブリード自体の指定）は
   触らず、paddingだけ上書きする。 */
@media not all and (min-width: 960px) {
  #body_wrap.-sidebar-off .video-slider-outer {
    padding-left: 0;
    padding-right: 0;
  }
}

/* サイドバーonでも、960px未満では.video-slider-outerも常にフルブリードにする。
   #hero側と全く同じ理由（SWELL標準の2カラム計算が960px以上でしか効かないため、
   960px未満では「サイドバーon」でも実質的に「サイドバーoff」と同じ状態）。
   上のサイドバーoff用のルール一式（フルブリード本体＋スクロールバー幅補正＋
   SP時のpadding除去）と、まったく同じ内容を#body_wrap.-sidebar-onにも適用する。 */
@media not all and (min-width: 960px) {
  #body_wrap.-sidebar-on .video-slider-outer {
    width: 100vw;
    max-width: 5120px;
    position: relative;
    left: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }
}

@supports (--css: variables) {
  @media not all and (min-width: 960px) {
    #body_wrap.-sidebar-on .video-slider-outer {
      left: calc(50% - 50vw + var(--swl-scrollbar_width, 0px) / 2);
      width: calc(100vw - var(--swl-scrollbar_width, 0px));
    }
  }
}

/* 矢印を動画の下に置くため、その分の余白を確保。
   ※左右方向のpaddingは意図的に持たせていない（理由は上の.video-slider-outerの
   コメントを参照。Swiper.js自身のコンテナには左右paddingを持たせてはいけない）。 */
.video-slider.swiper {
  padding-bottom: 50px;
}

.video-item {
  box-sizing: border-box;
}

/* Swiperのデフォルト矢印（動画に重なる位置）を、動画の下・左右に配置し直す */
.video-slider .swiper-button-prev,
.video-slider .swiper-button-next {
  top: auto !important;
  bottom: 0 !important;
  /* Swiper標準の「縦中央に配置」を確実に打ち消す */
  transform: none !important;
  width: 36px !important;
  height: 36px !important;
  margin-top: 0 !important;
  border-radius: 50% !important;
  border: 1.5px solid #ccc !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: 0.15s ease-in-out;
}

.video-slider .swiper-button-prev {
  left: 0 !important;
}

.video-slider .swiper-button-next {
  right: 0 !important;
}

/* SPだけ、動画カード自体は画面幅いっぱい（上の.video-slider-outerのpadding
   ゼロ指定）のままにしつつ、矢印ボタンだけは他のセクション（タイトル等）と
   同じ横位置（画面幅の5%＝#content側のpaddingと揃う）まで内側へ戻す。
   「カードは画面端まで見せたいが、ボタンまで画面のギリギリ端に
   押し出されるのは避けたい」という要望に対応するため、ボタンの位置だけ
   カードの表示範囲から切り離している。 */
@media not all and (min-width: 960px) {
  .video-slider .swiper-button-prev {
    left: 5% !important;
  }

  .video-slider .swiper-button-next {
    right: 5% !important;
  }
}

.video-slider .swiper-button-prev:after,
.video-slider .swiper-button-next:after {
  /* Swiper標準の三角形（枠線ベース）ではなく、シンプルな矢印文字に統一 */
  font-family: initial !important;
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  border: none !important;
  border-top: 1.5px solid #666 !important;
  border-right: 1.5px solid #666 !important;
}

.video-slider .swiper-button-prev:after {
  transform: rotate(-135deg) !important;
}

.video-slider .swiper-button-next:after {
  transform: rotate(45deg) !important;
}

.video-slider .swiper-button-prev:hover,
.video-slider .swiper-button-next:hover {
  background-color: #f5f5f5 !important;
  border-color: #999 !important;
}

.video-slider .swiper-button-disabled {
  opacity: 0.3;
}

/* VIDEO SHORTS（縦長9:16）
----------------------------------------------- */

.video-list--shorts .video-frame {
  aspect-ratio: 9 / 16;
}

/* ==========================================================
   レスポンシブ対応（SWELLのブレークポイントに合わせる）
   ==========================================================
   SWELL本体は 960px（PC⇔SP切り替え）と 600px（文字サイズ等の微調整）
   を基準にしています。ここも同じ書き方（@media not all and (min-width:…)）
   に揃えています。
   ========================================================== */

@media not all and (min-width: 960px) {

  .filter-btn {
    letter-spacing: 0;
    padding: 5px 6px;
    font-size: 11px;
  }

  /* 絞り込みボタン（グループ・カテゴリー共通）：スマホではボタン間の隙間も詰めて
     1行に収まりやすくする。 */
  .group-filter {
    gap: 6px;
  }

  /* グループカード：5列 → 2列 */
  .group-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .group-card {
    height: 180px;
  }

  /* ヒーローエリア：余白と文字サイズを縮小 */
  #hero {
    padding: 48px 0;
  }

  .hero-jp {
    font-size: 24px;
  }

  .hero-en {
    font-size: 11px;
    letter-spacing: 2px;
  }

  /* グループハブ：上下の余白を縮小 */
  #group-hub {
    padding: 28px 0;
  }

  /* ポータル各セクション：上下の余白を縮小
     （PC用のルールと同様、portal-info-inner・portal-schedule-innerが
     指定漏れになっていたため追加。portal-callmix-inner・portal-group-innerも
     同様に漏れていた＝コールMIX紹介ページとグループページだけSPでも40pxの
     ままになっていたため、こちらも追加して他と揃えた） */
  #portal-info-inner,
  #portal-schedule-inner,
  #portal-info-schedule-inner,
  #portal-video-inner,
  #portal-video-shorts-inner,
  #portal-callmix-inner,
  #portal-group-inner {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* セクション見出し（INFORMATION/SCHEDULE/VIDEOなど）＋ VIEW ALL：
     見出しの文字サイズをPC用のまま使うと「VIEW ALL」が画面外に押し出されて
     しまうため、見出し側を縮小し、右端のVIEW ALLは常に全部見える幅を確保する */
  .portal-section-title {
    margin-bottom: 14px;
  }

  .portal-section-title h2 {
    font-size: 6.4vw;
    letter-spacing: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* GROUPSの見出しも、INFO等（.portal-section-title h2）と同じfont-size・letter-spacing・
     margin-bottomに揃える。GROUPSは「VIEW ALL」と横並びのflexアイテムではない
     （独立したh2要素）ため、flex/overflow/white-space系のプロパティは不要。 */
  .group-hub-heading {
    font-size: 6.4vw;
    letter-spacing: 0;
    margin-bottom: 14px;
  }

  .portal-more {
    font-size: 8px;
    letter-spacing: 0;
    flex-shrink: 0;
    margin-left: 10px;
  }

  /* INFORMATIONリスト：1行目＝日付+カテゴリ+NEW、2行目＝タイトル（最大2行）
     HTML/JS側の順序（日付→カテゴリ→タイトル→NEW）は変えず、
     orderプロパティで見た目の並びだけ入れ替えている */
  .info-list-item a {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
    padding: 12px 4px;
  }

  .info-date {
    font-size: 10px;
    letter-spacing: 0;
    width: auto;
    order: 1;
  }

  .info-cat {
    font-size: 10px;
    letter-spacing: 0;
    width: auto;
    order: 2;
    white-space: nowrap;
  }

  .info-new {
    order: 3;
    margin-left: auto;
  }

  .info-title {
    order: 4;
    flex: 1 1 100%;
    /* -webkit-line-clamp: 2; は削除済み。PC・SP問わず#portal-info・#portal-schedule・
       #portal-info-scheduleそれぞれの専用ルール側で、画面幅を問わず常に2行まで許可する
       設定を持つようになったため、ここで重ねて指定する必要が無くなったため。 */
    font-size: 13px;
    line-height: 1.5;
  }
}

/* 600px〜959px：公式サイトのタブレット幅（768〜959px）相当。
   960px未満を一律6.4vw（スマホ用の値）にしていたのを、こちらのCSSに
   既にある600pxの区切りを使って、公式によりもう1段階近づける
   （公式の768pxとは区切り位置が完全には一致しないが、近い近似として）。 */
@media (min-width: 600px) and (max-width: 959px) {
  .portal-section-title h2 {
    font-size: 5vw;
  }

  .group-hub-heading {
    font-size: 5vw;
  }
}

/* ページネーション */
.viewall-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 8px;
}

.viewall-pagination .pg-num,
.viewall-pagination .pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #ddd;
  color: #333;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
}

.viewall-pagination .pg-num.is-current {
  background: #222;
  border-color: #222;
  color: #fff;
}

.viewall-pagination .pg-btn.is-disabled {
  opacity: 0.35;
  pointer-events: none;
}

.viewall-pagination a.pg-num:hover,
.viewall-pagination a.pg-btn:hover {
  border-color: #d6a400;
  color: #d6a400;
}

/* ==========================================================
   グループ紹介ページ（fruitszipper/candytune/sweetsteady/cutiestreet/morestar）専用
   5ページ共通なのでここにまとめる。グループごとの色は各カードの
   style="--group-color: ...;" というインラインCSS変数で切り替える。
   ========================================================== */

.group-hero {
  text-align: center;
  padding: 20px 0 30px;
}

.group-hero__emoji {
  font-size: 40px;
  line-height: 1;
  display: block;
}

.group-hero__en {
  font-size: 30px;
  font-weight: 600;
  color: var(--group-color, #333);
  margin: 10px 0 4px;
  letter-spacing: 1px;
}

.group-hero__ja {
  font-size: 13px;
  font-weight: 700;
  color: #999;
  letter-spacing: 2px;
}

.group-hero__sns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.group-hero__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #ddd;
  color: #333;
  text-decoration: none;
}

.group-hero__sns a svg {
  width: 18px;
  height: 18px;
}

.group-hero__sns a:hover {
  border-color: var(--group-color, #333);
  color: var(--group-color, #333);
}

.group-hero__concept {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 20px;
  border: 1px solid var(--group-color, #ddd);
  border-radius: 999px;
  color: var(--group-color, #333);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}

.group-info {
  max-width: 680px;
  margin: 30px auto 0;
}

.group-info__stats {
  text-align: center;
  margin: 0 0 20px;
  padding: 16px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  font-size: 13px;
  line-height: 2;
}

.group-info__stats dt {
  display: inline;
  color: #999;
  font-weight: 700;
}

.group-info__stats dt::after {
  content: '：';
}

.group-info__stats dd {
  display: inline;
  margin: 0 24px 0 4px;
  color: #333;
  font-weight: 700;
}

.group-info__desc {
  font-size: 14px;
  line-height: 1.9;
  color: #555;
  margin: 0 0 40px;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media not all and (min-width: 960px) {
  .member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* メンバー一覧の直後に続く「VIDEO」「VIDEO SHORTS」「コール・MIX紹介」の
   各ミニセクション。sectionタグ自体にはブラウザ標準の余白が無く、
   #portal-group-inner側のpadding:40px 0は箱全体の一番上と一番下にしか
   効かないため、このままだと直前の要素（メンバーカード一覧・1つ前の
   ミニセクション）にぴったりくっついてしまう。サイト全体の余白の基準
   （40px・SP 28px）に合わせて、各セクションの先頭にmargin-topを追加する。
   【2026-10】以前は#group-callmixだけにこのルールがあったが、
   #group-video・#group-videoshorts（VIDEO/VIDEO SHORTSセクション）を
   追加した際、同じ理由で間隔が無くなってしまっていたため、同じ値で揃えた。
   いずれかのセクションが無い投稿（動画がまだ無いグループ等）でも、
   残りのセクション同士の間隔は変わらない（margin-topは「自分の直前に
   何かがある時だけ」ではなく常に効くが、各セクションはそもそも
   have_posts()がtrueの時しか出力されないため、実際に隣り合う要素との
   間にだけ意図した余白ができる）。 */
#group-video,
#group-videoshorts,
#group-callmix {
  margin-top: 40px;
}

@media not all and (min-width: 960px) {
  #group-video,
  #group-videoshorts,
  #group-callmix {
    margin-top: 28px;
  }
}

/* 絞り込みボタンの短縮表記（FZなど）は、公式サイトのタブレット/SP区切り（768px）に合わせる。
   768px〜959pxは、サイズ・余白は詰めるがフル表記のまま（この幅なら詰めるだけで1行に収まる）。
   768px未満だけ短縮表記にする（member-gridの列数切り替えは、これとは別に600pxのまま）。 */
@media not all and (min-width: 768px) {
  .filter-btn__full {
    display: none;
  }

  .filter-btn__short {
    display: inline;
  }

  /* 短縮表記（CTなど）のときは絵文字も非表示にする */
  .filter-btn__emoji {
    display: none;
  }

  /* paddingだけは960px未満ブロックの5px 6pxより少し横を広げて5px 10pxにする。
     font-size・letter-spacing・gapは詰めたまま＝上の960px未満ブロックの値を維持する。 */
  .filter-btn {
    padding: 5px 10px;
  }
}

/* INFORMATION・SCHEDULEが2列で横並びになるのは960px以上の時だけ（959px以下では
   #portal-info-schedule-innerがflex-direction:columnで1列に積み上がり、実際の幅も
   フルに使えるため、通常のブレークポイント（768px）通りフル表記で問題ない）。
   2列になる960px以上のときだけ、実際の1列分の幅が半分程度しかないため、
   短縮表記を強制する。 */
@media (min-width: 960px) {
  #portal-info-schedule .filter-btn__full {
    display: none;
  }

  #portal-info-schedule .filter-btn__short {
    display: inline;
  }

  /* 絵文字はここでは非表示にしない（768px未満の短縮表記の時だけ消す、という
     元のルールのままにする）。INFORMATION/SCHEDULEの2列PC表示は、文字表記だけ
     短縮して絵文字はそのまま見せたいとのことなので、このブロックからは除外する。 */
}

/* INFORMATIONリストの記事タイトルも、フィルターボタンの短縮表記と同じ理由
   （2カラムレイアウトのため、画面幅が広くても実際の1列分の幅は半分程度しかない）で、
   デスクトップ用の「1行・タイトル省略」レイアウトのままだとタイトルがほとんど読めない。
   そのため#portal-info-schedule内では画面幅に関係なく、常に
   「1行目＝日付+カテゴリ+NEW、2行目＝タイトル（最大2行）」のスタック表示にする
   （960px未満向けの.info-list-item a等の指定と中身は同じだが、画面幅条件を外して
   #portal-info-schedule内では常時適用する）。 */
#portal-info-schedule .info-list-item a {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 10px;
}

#portal-info-schedule .info-date {
  width: auto;
  order: 1;
}

#portal-info-schedule .info-cat {
  width: auto;
  order: 2;
  white-space: nowrap;
}

#portal-info-schedule .info-new {
  order: 3;
  margin-left: auto;
}

#portal-info-schedule .info-title {
  order: 4;
  flex: 1 1 100%;
  -webkit-line-clamp: 2;
  line-height: 1.5;
}

/* 単独のアーカイブページ（archive-viewall.phpのINFORMATION/SCHEDULE単独ページ、
   #portal-info・#portal-schedule）は、フロントページの2カラムほど幅が狭くないため、
   上のような縦積みレイアウトへの総入れ替えは不要。日付・カテゴリー・NEWバッジは
   今まで通り横並びのまま、タイトルだけ「1行で省略」ではなく「2行まで許可」に変更する
   （最小限の変更に留めている）。 */
#portal-info .info-title,
#portal-schedule .info-title {
  -webkit-line-clamp: 2;
}

@media not all and (min-width: 600px) {
  .member-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

.member-card {
  border: 2px solid var(--group-color, #ddd);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  background: #fff;
}

.member-card__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  background: #f2f2f2;
}

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

.member-card__avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--member-color, #ddd);
  color: #fff;
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
}

.member-card__name {
  font-size: 18px;
  font-weight: 900;
  color: #333;
  margin: 0;
}

.member-card__kana {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #999;
  margin-top: 2px;
}

.member-card__meta {
  font-size: 12px;
  color: #666;
  margin: 8px 0 0;
}

.member-card__color {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.member-card__color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--member-color, #ccc);
}

.member-card__catch {
  font-size: 13px;
  color: var(--group-color, #666);
  font-weight: 700;
  margin: 10px 0 14px;
  line-height: 1.5;
}

.member-card__data {
  text-align: left;
  font-size: 12px;
  color: #666;
  border-top: 1px dashed #eee;
  padding-top: 12px;
  margin: 0;
  list-style: none;
}

.member-card__data li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 3px 0;
}

.member-card__data li span:first-child {
  color: #aaa;
  flex: 0 0 auto;
  white-space: nowrap;
}

.member-card__data-value {
  flex: 1;
  text-align: right;
}

.member-card__sns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

.member-card__sns a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  text-decoration: none;
}

.member-card__sns a svg {
  width: 16px;
  height: 16px;
}

.member-card__sns a:hover {
  border-color: var(--group-color, #333);
  color: var(--group-color, #333);
}

/* ==========================================================
   コール・MIX紹介（kawaii_callmix）専用
   ========================================================== */

/* 詳細ページ（1曲ごとのページ）：読み物ページなので、他のポータル部分と違い
   画面幅いっぱいには広げず、通常の記事幅に収める（サイドバー有無の影響も受けない）。
   一覧ページ（旧#callmix-archive・#callmix-archive-inner）は、以前は独自のIDで
   背景色ルールを別に持っていたが、フロントページの「コール・MIX紹介」プレビュー枠と
   見た目を揃えたい・共通の余白ルール（40px・SP 28px）にもそのまま乗せたいという
   理由から、archive-kawaii_callmix.php側のIDを#portal-callmix・#portal-callmix-inner
   （front-page.php・/video/・/video-shortsと同じ命名）に統一した。
   そのため、この一覧ページ用の個別ルールはもう無い。背景色・余白は、
   #group-hub等をまとめて定義している箇所の共通ルール（#portal-callmix,
   #portal-callmix-inner を含むセレクタ一覧）がそのまま適用される。 */

#callmix-single-inner {
  /* 2026-10-03追加：SWELLの「フォントサイズ(PC・Tab/Mobile)」カスタマイザー設定は、
     :rootの--swl-fz--contentというCSS変数として定義されているが、このページは
     the_content()を使わない完全自作のHTMLのため、SWELL本来の本文用セレクタ
     （.post_content等）の対象に入らず、設定を変えても連動していなかった。
     ここで明示的にfont-sizeとして適用し、このページの文字サイズ全体の基準(1em)にする。
     変数が無い場合（万一読み込み順の問題などで）のフォールバックとして16pxを指定。 */
  font-size: var(--swl-fz--content, 16px);
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 0;
}

/* 詳細ページ
----------------------------------------------- */

/* .callmix-title-block：post_head.php（子テーマ上書き版）側で、バッジ＋H1を
   囲んでいる要素。親の.p-articleHead.c-postTitle（SWELL標準、タイトルと日付を
   横並びにするflexレイアウトが付いている）の中にネストしているため、そのままだと
   バッジとH1まで横並びになってしまう。ここで明示的に縦積み（column）に戻している。
   日付表示（.c-postTitle__date）自体は.p-articleHead.c-postTitleの直下に残して
   あるので、そちらのスタイルはそのまま活きる。 */
.callmix-title-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.callmix-group-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--group-color, #ddd);
  color: var(--group-color, #333);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 16px;
}

.callmix-group-badge:hover {
  background: var(--group-color, #333);
  color: #fff;
}

.callmix-title {
  font-size: 28px;
  font-weight: 900;
  color: #333;
  margin: 0 0 40px;
  line-height: 1.4;
}

/* H2見出しの上に添える小さいラベル（愛称＋見出しの簡易英語版）。
   H2側と違い、こちらは意図的に共通のclass1つを使い回している
   （2箇所とも見た目は同じで、中身のテキストだけが違うため）。 */
.callmix-section-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--group-color, #d6a400); /* アイドルグループごとの色（--group-color）に合わせる。
    グループが無い等で未指定の場合は元の黄色にフォールバックする */
  margin-bottom: 6px;
}

.callmix-section-tit {
  font-size: 18px;
  font-weight: 900;
  color: #333;
  border-left: 4px solid var(--group-color, #d6a400);
  padding-left: 14px;
  margin: 0 0 20px;
}

.callmix-parts {
  margin-bottom: 48px;
}

.callmix-part {
  padding: 20px 0;
  border-bottom: 1px dashed #eee;
}

.callmix-part:first-of-type {
  padding-top: 0;
}

.callmix-part__name {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--group-color, #d6a400);
  border-radius: 4px;
  padding: 3px 12px;
  margin: 0 0 10px;
}

.callmix-part__lyrics {
  /* 2026-10-03：px固定からemに変更。SWELLの「フォントサイズ(PC・Tab/Mobile)」
     カスタマイザー設定は、この要素まで継承されてきている（間に上書きが無いため）。
     この歌詞本文を「1em＝基準」として扱う（調整係数を付けず、継承された文字サイズを
     そのまま使う）。コール・MIXまわりの他の文字サイズ（バッジ・ルビ・MIXカード本文）は、
     すべてこの基準からの比率として組む。 */
  font-size: 1em;
  line-height: 1.9;
  color: #444;
  margin: 0 0 10px;
  white-space: pre-line;
  text-align: center;
}

.callmix-lyrics-highlight {
  display: flex; /* inline-flexだと、短い場合は隣の通常の歌詞と同じ行に収まってしまう。
                     flexにすることでブロック要素として扱われ、長さに関わらず
                     常にこの部分だけで1行を専有する（前後で必ず改行される） */
  flex-direction: column;
  align-items: center;
  vertical-align: top;
  margin: 0 2px;
  max-width: 100%; /* 親要素（歌詞全体）の幅を超えないようにする。これが無いと、
                       中の歌詞が長い時に折り返さず、はみ出したまま伸び続けてしまう */
}

.callmix-lyrics-highlight__text {
  font-weight: 900;
  color: var(--group-color, #d6a400);
  min-width: 0; /* Flexアイテムは初期状態だと「中身の幅より縮めない」性質があり、
                   これが折り返しを妨げてしまうため解除する */
  overflow-wrap: break-word; /* 上の幅制限に収まらない場合の保険として、単語の途中でも折り返す */
}

.callmix-lyrics-highlight__call {
  /* 2026-10-03：歌詞本文(.callmix-part__lyrics＝基準の1em)に対する比率で指定。
     単独バッジと比率を入れ替え、0.8emに変更（16×0.8＝12.8px）。 */
  font-size: 0.8em;
  font-weight: 700;
  color: #4a90d9;
  background: rgba(74, 144, 217, 0.1);
  border-radius: 4px;
  padding: 1px 8px;
  margin-top: 2px;
  white-space: normal; /* MIXの内容など長い文言も、画面幅を超えず折り返して収まるようにする
                           （nowrapのままだと、短いコール文言では問題無いが、長いMIXの内容だと
                           画面の外にはみ出してしまっていた） */
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* 重ねる歌詞が無い（合いの手のような）コール。歌詞の地の文と同じ高さに、
   バッジだけをそのまま挟み込む */
.callmix-lyrics-call-standalone {
  display: flex; /* inline-flexだと短い場合に隣の歌詞と同じ行に収まってしまうため、
                     .callmix-lyrics-highlightと同じ考え方で常に単独の行にする */
  align-items: center;
  justify-content: center;
  width: fit-content; /* flexにした副作用で横幅が画面いっぱいに広がってしまうため、
                          中身(「はい！」など)にぴったりの幅に戻す */
  max-width: 100%; /* 中身が長いMIXの内容などの場合に、画面の外にはみ出さないようにする */
  margin: 2px auto; /* 横方向はautoにして、fit-contentの幅のまま行の中央に来るようにする */
  vertical-align: middle;
  /* 2026-10-03：歌詞本文(.callmix-part__lyrics＝基準の1em)に対する比率で指定。
     コール重ねバッジと比率を入れ替え、0.75emに変更（16×0.75＝12px）。 */
  font-size: 0.75em;
  font-weight: 700;
  color: #4a90d9;
  background: rgba(74, 144, 217, 0.1);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: normal; /* 上のcallmix-lyrics-highlight__callと同じ理由で、長い内容は折り返す */
  word-break: break-word;
  overflow-wrap: break-word;
}

.callmix-part__items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.callmix-part__item {
  background: #fff;
  border-left: 4px solid #ddd;
  border-radius: 4px;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.callmix-part__item--mix {
  border-left-color: var(--group-color, #d6a400);
  background: linear-gradient(90deg, color-mix(in srgb, var(--group-color, #d6a400) 6%, transparent), color-mix(in srgb, var(--group-color, #d6a400) 0%, transparent) 60%);
}

.callmix-part__item-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #fff;
  border: 1.5px solid #ccc;
  border-radius: 999px;
  padding: 3px 12px;
  margin-bottom: 8px;
}

.callmix-part__item--mix .callmix-part__item-badge {
  color: var(--group-color, #d6a400);
  border-color: var(--group-color, #d6a400);
}

.callmix-part__item-text {
  /* 2026-10-03：歌詞本文(.callmix-part__lyrics＝基準の1em)に対する比率で指定。
     本来の比率は14px÷15px＝0.9333だが、切りの良い0.9375emに調整
     （16×0.9375＝ちょうど15px）。 */
  font-size: 0.9375em;
  font-weight: 700;
  line-height: 2.6; /* ふりがな（<rt>）が上の行と重ならないよう、余裕を持たせている */
  letter-spacing: 0.03em;
  color: #333;
  margin: 0;
}

.callmix-mix-block {
  display: block; /* {{all_br}}区切り：PC・スマホ問わず常に別行にする */
}

.callmix-mix-sp-span {
  display: inline; /* {{sp_br}}区切り：PCでは同じ行内（インライン）でつなげる */
}

@media not all and (min-width: 960px) {
  .callmix-mix-sp-span {
    display: block; /* スマホ(960px未満)の時だけ、別行にする */
  }
}

.callmix-part__item-text rt {
  /* 2026-10-03：px固定からemに変更。本来の比率は10px÷14px＝0.7143だが、
     0.73emに調整（親.callmix-part__item-textが15px相当になった場合、
     15×0.73≒11px）。2026-10-03追記：スマホの「デバイス可変」設定で画面幅が
     狭いと極端に小さくなるため、max()で8px以上を保証する下限を追加。 */
  font-size: max(8px, 0.73em);
  font-weight: 500;
  letter-spacing: 0;
  color: #888;
  user-select: none; /* コールの言葉自体（漢字部分）だけをコピーしやすくする */
}

/* 2026-10-03追加：歌詞に重ねるバッジ（callmix-lyrics-highlight__call・
   callmix-lyrics-call-standalone）側には、ルビ(rt)の文字サイズ指定が無く、
   ブラウザの初期値（親文字サイズの約50%）任せになっていた。バッジ自体の
   文字サイズが11px/12pxと小さいため、初期値のままだと5〜6px程度になり
   読めなくなってしまうので、.callmix-part__item-text rtと同じ考え方で
   明示的に指定する（SWELLのフォントサイズ設定に連動させるため、ここもem指定。
   2つのバッジは文字サイズが違う（11px/12px）ため、同じ9px相当でも
   emの値はそれぞれ別になる）。 */
.callmix-lyrics-highlight__call rt {
  /* 親.callmix-lyrics-highlight__call（16×0.8＝12.8px）に対する比率。12.8×0.85≒10.88px相当。
     2026-10-03追記：スマホの「デバイス可変」設定で画面幅が狭いと極端に小さくなるため、
     max()で8px以上を保証する下限を追加。 */
  font-size: max(8px, 0.85em);
  font-weight: 500;
  letter-spacing: 0;
  color: inherit; /* バッジの地色（青系）に合わせる。カード側のように文字色を
                      本文より薄くする必要が無いため、グレー(#888)固定にはしない */
  user-select: none;
}

.callmix-lyrics-call-standalone rt {
  /* 9px ÷ 12px（親.callmix-lyrics-call-standaloneの文字サイズ）。
     2026-10-03追記：スマホの「デバイス可変」設定で画面幅が狭いと極端に小さくなるため、
     max()で8px以上を保証する下限を追加。 */
  font-size: max(8px, 0.75em);
  font-weight: 500;
  letter-spacing: 0;
  color: inherit;
  user-select: none;
}

.callmix-videos {
  margin-bottom: 24px;
}

/* 高さの偏りを防ぐため、動画の配置はJS（portal.js側のkawaiilabLayoutVideoMasonry）が
   「毎回一番低い列に足す」方式で位置を計算する。ここでは、そのJSが基準にする
   position:relativeのコンテナと、JS実行前・JS無効時のフォールバック（1列で縦積み）だけ
   CSSで用意しておく。 */
.callmix-video-grid {
  position: relative;
}

.callmix-video-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* フォールバック時（JS実行前）は1列で縦に並ぶ */
  margin-bottom: 20px;
  box-sizing: border-box;
}

/* JSがレイアウトを計算し終えると、.callmix-video-gridに付与される
   （付与前はposition:staticのまま＝上のフォールバック表示になる） */
.callmix-video-grid.is-masonry-ready .callmix-video-item {
  position: absolute;
  margin-bottom: 0; /* 位置(top)はJSが指定するため、margin側での間隔調整は不要 */
}

/* YouTubeは16:9の枠にiframeを収める */
.callmix-video-frame--youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #333;
  margin-bottom: 8px;
}

.callmix-video-frame--youtube iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 2026-10-13：TikTokはfacade方式にした（functions.php内
   kawaiilab_render_video_embed_html()のtiktokケース、single-kawaii_callmix.php
   側のJS参照）。.callmix-video-outlinkは2つの役割を兼ねる：
     --facade：クリック前に見えているボタン。クリックされるまで本物の
       埋め込みは作らない（TikTok側のoverload-protect対策）。
     --fallback：クリック後、本物の埋め込みが失敗した時だけ[hidden]を外して
       表示する最終フォールバック（TikTok本体へのリンクカード）。
   どちらも見た目は共通で、中の.callmix-video-outlink__thumb（<img>）に
   TikTok公式oEmbed APIから取得できたサムネイルが入っていれば画像付きで、
   取得できなければプラットフォーム名だけの固定プレースホルダーになる。
   縦横比はTikTok本来の縦長フォーマットに合わせて9:16（.video-list--shorts
   と同じ比率）にしている。YouTube枠（16:9）や埋め込み本体の可変高さとは
   揃わないが、.callmix-video-grid側はJSの貪欲法masonryで列の高さを都度
   計算しているため、高さが揃っていなくてもレイアウトは崩れない
   （single-kawaii_callmix.php内 kawaiilabLayoutVideoMasonry() 参照）。 */
.callmix-video-outlink {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, #1a1a1a 0%, #000 100%);
  text-decoration: none;
  margin: 0 auto 8px;
  transition: 0.15s ease-in-out;
}

/* 2026-10-13：(hover: hover)で囲んでいる。タッチ端末は「ホバーできる」
   ポインターを持たないが、:hoverにスタイルが付いているとブラウザが
   「1回目のタップ＝hover状態の発生、2回目のタップ＝実際のクリック」
   という挙動をすることがあり、facadeボタン・フォールバックリンクが
   タップ1回で反応しない原因になっていた。マウス等、実際にホバー操作が
   できる環境だけに:hoverを限定することで、タッチ端末では1回のタップで
   即クリックとして扱われるようにする。 */
@media (hover: hover) {
  .callmix-video-outlink:hover {
    background: linear-gradient(160deg, #272727 0%, #0a0a0a 100%);
  }

  .callmix-video-outlink:hover .callmix-video-outlink__play {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.06);
  }
}

.callmix-video-outlink__platform {
  font-family: 'Archivo Black', -apple-system, BlinkMacSystemFont, "游ゴシック体", YuGothic, "Yu Gothic Medium", 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  opacity: 0.85;
}

.callmix-video-outlink__play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  position: relative;
  transition: 0.15s ease-in-out;
}

/* 再生アイコン（三角）をCSSだけで描く。.video-frame__play::beforeと同じ考え方 */
.callmix-video-outlink__play::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 55%; /* 三角の見た目の重心を中央に合わせるため、少し右にずらす */
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #fff;
}

.callmix-video-outlink__label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.02em;
}

/* --facade（クリック前のボタン）は<button>要素なので、ブラウザ標準の
   見た目（枠線・背景・フォント）をリセットする */
.callmix-video-outlink--facade {
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.callmix-video-outlink--facade:disabled {
  cursor: default;
}

/* oEmbed APIから取得できたサムネイル画像。取得できなかった場合は
   [hidden]のままで、プラットフォーム名だけの見た目になる */
.callmix-video-outlink__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.callmix-video-outlink__thumb[hidden] {
  display: none;
}

/* サムネイル画像の上にプラットフォーム名・再生アイコン等の文字を
   読みやすくするための暗いグラデーション。サムネイルが無い時は
   背後の背景（グラデーション）がそのまま見えるだけなので問題ない */
.callmix-video-outlink__thumb:not([hidden]) ~ .callmix-video-outlink__platform,
.callmix-video-outlink__thumb:not([hidden]) ~ .callmix-video-outlink__play,
.callmix-video-outlink__thumb:not([hidden]) ~ .callmix-video-outlink__label {
  position: relative;
  z-index: 1;
}

/* 2026-10-13：当初は.callmix-video-outlink__thumb（<img>）自身に
   ::afterで暗いグラデーションを重ねていたが、効いていなかった。<img>は
   「置換要素」と呼ばれる特殊な要素で、::before/::afterの生成内容は
   どのブラウザでも<img>には描画されない（CSS仕様上の制限）。そのため
   <img>の直後に専用の<span class="...__overlay">を別途用意し、
   そちらに重ねる形に変更した。 */
.callmix-video-outlink__overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 0;
}

.callmix-video-outlink__thumb:not([hidden]) ~ .callmix-video-outlink__overlay {
  display: block;
}

/* クリック後、層2（本物の埋め込み）の結果を待っている間に表示する
   ローディングスピナー。再生アイコン（__play）と入れ替わりで表示する */
.callmix-video-outlink__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: kawaiilab-spin 0.8s linear infinite;
  position: relative;
  z-index: 1;
}

.callmix-video-outlink__spinner[hidden] {
  display: none;
}

@keyframes kawaiilab-spin {
  to { transform: rotate(360deg); }
}

/* TikTok/X/Instagramは、それぞれの埋め込みスクリプトが独自のサイズで描画するため、
   幅を固定せず、はみ出さない範囲で中央に表示する */
.callmix-video-item .tiktok-embed,
.callmix-video-item .twitter-tweet,
.callmix-video-item .instagram-media {
  max-width: 100% !important;
  margin: 0 auto 8px !important;
}

/* TikTokのfacadeボタン（--facade）・最終フォールバックのリンクカード
   （--fallback）・クリック後にJSが挿入する本物の埋め込み（.tiktok-embed）
   を持つラッパー。通常はfacadeだけが見えていて、クリックされると
   JS側（single-kawaii_callmix.php内 kawaiilabPlayTiktokFacade()）が
   facadeを隠して埋め込みを試み、失敗したらfallbackを表示する。 */
.callmix-video-tiktok {
  width: 100%;
  position: relative;
}

/* [hidden]のデフォルト（display:none）は、.callmix-video-outlinkの
   display:flexより詳細度が低く上書きされてしまうため、明示的に指定する。 */
.callmix-video-outlink[hidden] {
  display: none;
}

/* 2026-10-13：層2失敗時、facadeから--fallbackへ切り替わる瞬間の見た目。
   [hidden]解除は一瞬でdisplay:none→flexに切り替わるだけなので、
   「もう一度押す必要がある」と気づきにくい。そこでフェードイン
   （is-appearing→解除でtransition発生）と、再生アイコンを軽く揺らす
   ひと押し（is-nudging）をJS側（kawaiilabFail）から付けて気づきやすくする。 */
.callmix-video-outlink--fallback {
  opacity: 1;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, background 0.15s ease-in-out;
}

.callmix-video-outlink--fallback.is-appearing {
  opacity: 0;
  transform: translateY(6px);
}

@keyframes kawaiilab-nudge {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
  60% { transform: translateY(1px); }
}

.callmix-video-outlink--fallback.is-nudging .callmix-video-outlink__play {
  animation: kawaiilab-nudge 0.5s ease-in-out 2;
}

/* 2026-10-13：層2成功時に表示するヒント。本物のTikTok iframe内にある
   再生ボタンはTikTok自身のUIで、facadeボタンと見分けがつきにくいため
   「もう一度、動画内の再生ボタンを押してね」と数秒だけ案内する
   （JS側：kawaiilabShowPlayHint、.callmix-video-tiktokの直下に追加される）。 */
.callmix-video-hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 8px);
  max-width: calc(100% - 24px);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 999px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  z-index: 2;
}

.callmix-video-hint.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.callmix-video-label {
  font-size: 13px;
  color: #666;
  margin: 0;
}

/* 列数（スマホ1列／PC2列）はJS側（kawaiilabLayoutVideoMasonry内のmatchMedia判定）で
   決めているため、ここでのCSSメディアクエリは不要になった */

/* 一覧ページ
----------------------------------------------- */

.callmix-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.callmix-list-item a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  text-decoration: none;
}

.callmix-list-item a:hover .callmix-list-item__title {
  text-decoration: underline;
}

.callmix-list-item__group {
  flex-shrink: 0;
  /* .info-catと1文字も違わない、全く同じ指定にしている
     （white-space/overflow/text-overflowは.info-cat側にも無いため、
     こちらでも付けない） */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--group-color, #333);
  border: 1px solid var(--group-color, #ddd);
  border-radius: 3px;
  padding: 2px 8px;
  width: 90px;
  text-align: center;
}

.callmix-list-item__title {
  /* flex: 1・min-width: 0が無いと、タイトルが長い時に縮みきらず、行全体が
     右にはみ出してしまう（.info-titleと同じ理由で必要な指定）。 */
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* コール・MIXリストも、INFORMATIONと同じ考え方でSP幅では縦積みにする。
   ただしコール・MIXには日付・NEWバッジが無く、バッジ（グループ名）＋タイトル
   の2要素だけなので、INFORMATIONよりは単純な並び替えで済む。
   ※ このルールは、必ず上のPC用の基本指定（.callmix-list-item a等）より
   後ろに書くこと。CSSは同じ強さの指定同士がぶつかった場合、書かれた順番が
   後の方が勝つため、@media側を先に書いてしまうと、SP幅で見てもPC用の
   指定に上書きされて無効化されてしまう（実際にこの順序ミスで、SP側の
   指定が効かない不具合が発生した）。 */
@media not all and (min-width: 960px) {
  .callmix-list-item a {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
    padding: 12px 4px;
  }

  .callmix-list-item__group {
    font-size: 10px;
    letter-spacing: 0;
    width: auto;
    white-space: nowrap;
    order: 1;
  }

  .callmix-list-item__title {
    order: 2;
    flex: 1 1 100%;
    font-size: 13px;
    line-height: 1.5;
    white-space: normal; /* PC用のwhite-space: nowrapを解除し、折り返せるようにする */
  }
}

.callmix-no-data {
  text-align: center;
  color: #999;
  padding: 60px 0;
}

/* taxonomy-kawaii_idol_group.phpのvideo/video-shorts側（「このグループの動画は
   まだありません。」）用。.callmix-no-dataと全く同じ見た目だが、クラス名を
   分けている（callmix-no-data/video-no-dataはテキストの意味も違う別クラスの
   ため、見た目だけ合わせる形で別ルールとして用意する）。 */
.video-no-data {
  text-align: center;
  color: #999;
  padding: 60px 0;
}

.callmix-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 0;
}

.callmix-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #ddd;
  color: #333;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
}

.callmix-pagination .page-numbers.current {
  background: #222;
  border-color: #222;
  color: #fff;
}

.callmix-pagination a.page-numbers:hover {
  /* SWELL本体（main.css）に、範囲を絞っていないグローバルなルール
     [class*=page-numbers]:hover { background-color: var(--color_main); ... }
     が存在する。このルールよりこちらの方が詳細度は高いが、以前はここで
     background-colorを一切指定していなかったため、上書き対象にすらならず、
     SWELL側のvar(--color_main)の塗りつぶしがそのまま素通りしてしまっていた
     （colorだけは指定していたので、文字色は正しく#d6a400になっていた）。
     明示的にnoneを指定して、このサイト独自の「枠線と文字色だけ変わる」
     ホバーに固定する。 */
  background: none;
  border-color: #d6a400;
  color: #d6a400;
}

/* コール・MIXページ（single-kawaii_callmix）だけ、SWELL標準では960px未満で
   非表示になる「画面端に固定表示するシェアボタン」をスマホでも表示させる。
   portal.cssはトップページ・グループ紹介ページ等でも読み込まれるため、
   誤って他のページにまで影響しないよう、bodyクラス（single-kawaii_callmix、
   投稿タイプごとにWordPressが自動で付与する）で対象を絞っている。
   このテーマはSWELLの仕様で、body_class()の出力が<body>自体ではなく
   #body_wrapに付くため（common.css側の#body_wrap.admin-barと同じ理由）、
   #body_wrapを対象にする。
   SWELL側の元ルール（single.css）が!importantなので、こちらも!importantで上書きする。 */
@media not all and (min-width: 960px) {
  #body_wrap.single-kawaii_callmix .-fix.c-shareBtns {
    display: block !important;
  }
}

/* コール・MIXページ（single-kawaii_callmix）だけ、前後の投稿リンクの矢印の色を、
   サイト全体のメインカラー（--color_main、SWELL「基本カラー」設定）から
   グループカラー（--group-color）に差し替える。
   グループが無い投稿（万一）の場合は、今まで通りサイトのメインカラーに
   フォールバックする（var()の入れ子：--group-colorが無ければ--color_mainを使う）。
   元のルールは swell_custom-inline-css（カスタマイザーの「追加CSS」、
   ファイルではなくDB保存のインラインCSS）にあるため、ファイル側では直接編集できない。 */
#body_wrap.single-kawaii_callmix .p-pnLinks .-prev .p-pnLinks__link {
  border-left-color: var(--group-color, var(--color_main));
}

#body_wrap.single-kawaii_callmix .p-pnLinks .-next .p-pnLinks__link {
  border-right-color: var(--group-color, var(--color_main));
}

/* コール・MIXページ（single-kawaii_callmix）だけ、「コメントを送信」ボタンの背景色も
   同様にグループカラーへ差し替える（元のルールはcomments.css、SWELL本体側のファイル）。 */
#body_wrap.single-kawaii_callmix .comment-respond #submit {
  background-color: var(--group-color, var(--color_main));
}

/* ==========================================================
   VIDEO/VIDEO SHORTS 個別記事ページ（single-kawaii_video.php）専用
   ========================================================== */

/* #callmix-single-inner（上のコール・MIXセクション）と同じ考え方：
   読み物ページなので画面幅いっぱいには広げず、通常の記事幅に収める。 */
#portal-video-single-inner {
  font-size: var(--swl-fz--content, 16px);
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px 0;
}

.video-single-title {
  font-size: 28px;
  font-weight: 900;
  color: #333;
  margin: 0 0 16px;
  line-height: 1.4;
}

/* .callmix-group-badgeと同じパターン。--group-colorは、このファイル
   （single-kawaii_video.php）が#body_wrapに対して設定しているので、
   ここではそのままvar(--group-color, ...)で参照できる。 */
.video-single-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--group-color, #ddd);
  color: var(--group-color, #333);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 16px;
}

.video-single-group:hover {
  background: var(--group-color, #333);
  color: #fff;
}

.video-single-youtube-link {
  margin: 24px 0 20px; /* 動画とボタンの間隔を確保（元は10pxで詰まって見えていた） */
  text-align: center; /* 中央配置 */
}

/* 下線テキストではなく、グループカラーで塗りつぶした
   ピル型ボタンに変更。.video-single-groupの枠線バッジと対になるよう、
   こちらは「アクションを起こしてほしい」要素なので塗りつぶしにしている。 */
.video-single-youtube-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 32px;
  border-radius: 999px;
  background: var(--group-color, #d6a400);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--group-color, #d6a400) 35%, transparent);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}

.video-single-youtube-link a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--group-color, #d6a400) 45%, transparent);
  opacity: .92;
}

/* 再生ボタン風の三角アイコン（画像・アイコンフォント不要、CSSの三角形テクニック） */
.video-single-youtube-link a:before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #fff;
}

.video-single-description-wrap {
  position: relative;
  margin: 0 0 40px;
}

.video-single-description {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin: 0;
  /* 概要欄の改行をそのまま活かす。元データの改行はesc_html()だけだと
     HTML上では詰まって1行になってしまう（brタグ等に変換していないため）。
     pre-lineなら連続する空白は1つにまとめつつ、改行だけは保持できる。 */
  white-space: pre-line;
}

/* 概要欄中のURL（kawaiilab_linkify_descriptionが<a>化したもの）。
   ボタン類ほど強く主張させたくないので、下線付きテキストリンクに留める。 */
.video-single-description a {
  color: var(--group-color, #d6a400);
  text-decoration: underline;
  word-break: break-all; /* 長いURLがコンテナ幅を超えてはみ出さないように */
}

/* 長文の概要欄を折りたたむ（PHP側でmb_strlenが一定以上の時だけこのクラスが付く）。
   -webkit-line-clampは接頭辞付きだが主要ブラウザで広く使える、行数制限の定番手法。 */
.video-single-description-wrap.is-clamped .video-single-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

.video-single-description-wrap.is-clamped.is-expanded .video-single-description {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.video-single-description-toggle {
  display: block;
  margin: 12px auto 0;
  padding: 6px 20px;
  border: 1px solid var(--group-color, #ddd);
  border-radius: 999px;
  background: #fff;
  color: var(--group-color, #333);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.video-single-description-toggle:hover {
  background: var(--group-color, #333);
  color: #fff;
}

/* コール・MIXページと同じく、前後の投稿リンク・コメント送信ボタンの色も
   グループカラーへ差し替える。kawaii_video・kawaii_videoshortsの両方が対象
   （single_templateフィルターで同じこのファイルを共用しているため、
   body_classは投稿タイプごとに別の値になる＝2つともセレクタに含める必要がある）。 */
#body_wrap.single-kawaii_video .p-pnLinks .-prev .p-pnLinks__link,
#body_wrap.single-kawaii_videoshorts .p-pnLinks .-prev .p-pnLinks__link {
  border-left-color: var(--group-color, var(--color_main));
}

#body_wrap.single-kawaii_video .p-pnLinks .-next .p-pnLinks__link,
#body_wrap.single-kawaii_videoshorts .p-pnLinks .-next .p-pnLinks__link {
  border-right-color: var(--group-color, var(--color_main));
}

#body_wrap.single-kawaii_video .comment-respond #submit,
#body_wrap.single-kawaii_videoshorts .comment-respond #submit {
  background-color: var(--group-color, var(--color_main));
}