/* ============================================================
   NEWS block — Perfume 式レイアウト (実CSS実測に準拠)
   Perfume c-news__item: flex row [date 固定 | type("|"区切り) | title flex],
   行間 1px 罫線(先頭は top 罫線), 右端矢印 hover で左スライド,
   c-btn1 "News All" = 350x50 枠 + グリッドアイコン + hover 反転。
   → KAGVYA ダーク適応。フォント/文字アニメ(見出し data-span)/ホバー演出(overlay)は続投。
   アイコンは自作(SVG), コンテンツは KAGVYA 自前 (参照元の素材・文言は不使用)。
   ============================================================ */

/* ---- section: 見出し(上) → 全幅リスト → News All(中央下)。chanmina の左右分割を解除 ---- */
/* Hero からの距離を広げる (ブロック全体を下げる) */
#news.cm-section{margin-top:calc(220 * var(--pv))!important;padding:calc(96 * var(--pv)) 0 calc(96 * var(--pv))!important;}
#news .section-header{position:static!important;display:block!important;width:auto!important;height:auto!important;
  max-width:1290px;margin:0 auto!important;padding:0 45px!important;}
#news .header-title{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:auto!important;margin:0 0 27px 0!important;padding:0!important;z-index:auto;}
/* Perfume c-title1 = 38px/weight500。KAGVYA のフォント(serif)と data-span 文字アニメは維持 */
#news .header-title h2 strong{font-size:38px!important;line-height:1!important;letter-spacing:.76px!important;color:var(--kg-ink)!important;}
#news .header-view{display:none!important;}   /* MORE は News All ボタンに置換 */
#news .section-main--news{position:static!important;margin:0!important;padding:0!important;width:100%!important;min-height:0!important;}

/* ---- Perfume row layout: 共通クラス pn-* (index #news / news.html 両用) ---- */
.pn-list{list-style:none;margin:0 auto;padding:0 45px;max-width:1290px;}
.pn-item{position:relative;border-bottom:1px solid var(--kg-line);}
.pn-item:first-child{border-top:1px solid var(--kg-line);}
.pn-item a{display:flex;align-items:center;padding:22px 0;text-decoration:none;position:relative;flex-wrap:nowrap;}
/* hover: KAGVYA overlay(続投) + title brighten + 右矢印スライド(Perfume 踏襲) */
.pn-item a::before{content:"";position:absolute;inset:0;background:#626162;opacity:0;transition:opacity .18s linear;pointer-events:none;}
.pn-item a:hover::before{opacity:.08;}
/* 矢印: base を少し左(right 6→12)。hover で右へ「ぴょこっと」= Perfume c-news__item::before 機構
   (本家 right:24→14 / transition 300ms ease で right 値を減らして右移動)を移植。他のhover演出には非干渉。 */
.pn-item a::after{content:"";position:absolute;top:50%;right:12px;width:7px;height:7px;
  border-top:1.5px solid var(--kg-ink);border-right:1.5px solid var(--kg-ink);
  transform:translateY(-50%) rotate(45deg);transition:right .3s ease,opacity .3s ease;opacity:.45;}
.pn-item a:hover::after{opacity:1;right:3px;}
/* ★ホバー時の文字アニメ = 以前(chanmina)の「日付が右へスライド」を踏襲。列幅は slide 分の余裕を確保 */
.pn-date{flex:0 0 120px;font-size:15px;line-height:1.6;letter-spacing:.04em;color:var(--kg-mute);
  font-family:"Inter","Roboto Mono",monospace;position:relative;z-index:1;
  transition:padding-left .28s cubic-bezier(.215,.61,.355,1);}
/* type は固定幅にして title 開始位置を全行で揃える (Perfume flex:0 0 130px 相当)。"|" は列頭の区切り */
.pn-type{flex:0 0 128px;font-size:15px;line-height:1.6;letter-spacing:.06em;color:var(--kg-red);position:relative;z-index:1;white-space:nowrap;}
.pn-type::before{content:"|";opacity:.3;margin:0 16px 0 0;color:var(--kg-ink);}
.pn-tit{flex:1 1 auto;font-size:15px;line-height:1.5;color:var(--kg-ink);padding-right:44px;transition:color .2s ease;position:relative;z-index:1;}
.pn-item a:hover .pn-date{padding-left:22px;}   /* 以前の hover 演出: 日付が右へスライド */
.pn-item a:hover .pn-tit{color:#fff;}

/* ---- News All ボタン (Perfume c-btn1 を丸パクリ: 枠+グリッドアイコン+hover反転。ダーク適応) ---- */
.kg-newsall{display:flex;align-items:center;justify-content:center;gap:10px;box-sizing:border-box;
  width:min(350px,84%);height:50px;margin:46px auto 0;
  border:2px solid var(--kg-ink);color:var(--kg-ink);text-decoration:none;
  font-size:16px;letter-spacing:.72px;line-height:1;transition:background .3s ease,color .3s ease;}
.kg-newsall__ico{flex:0 0 auto;width:12px;height:12px;fill:currentColor;}   /* 自作 2x2 グリッド。currentColor 追従で hover 反転 */
.kg-newsall:hover{background:var(--kg-ink);color:var(--kg-bg);}

/* ---- news.html (一覧ページ) = 同じ pn-* を使用。見出し + 戻る ---- */
.pn-page{padding:0 0 calc(120 * var(--pv));}
.pn-page-head{max-width:1290px;margin:0 auto;padding:calc(220 * var(--pv)) 45px calc(44 * var(--pv));}
.pn-page-tit{margin:0;font-size:38px;line-height:1;letter-spacing:.76px;color:var(--kg-ink)!important;font-weight:400;}
.pn-page-tit strong span{display:inline-block;}
.pn-back{max-width:1290px;margin:calc(56 * var(--pv)) auto 0;padding:0 45px;}
.pn-back a{display:inline-block;font-size:15px;letter-spacing:.1em;color:var(--kg-ink)!important;text-decoration:none;
  border-bottom:1px solid var(--kg-line);padding-bottom:4px;transition:color .2s,border-color .2s;}
.pn-back a:hover{color:var(--kg-gold)!important;border-bottom-color:var(--kg-gold);}

/* ---- SP ---- */
@media (max-width:960px){
  #news.cm-section{padding:calc(80*(100vw/828)) 0!important;}
  #news .section-header{padding:0 6%!important;}
  #news .header-title h2 strong{font-size:calc(64*(100vw/828))!important;}
  .pn-list{padding:0 6%;}
  .pn-item a{flex-wrap:wrap;padding:16px 0;}
  .pn-date{flex:0 0 auto;}
  .pn-type{order:2;min-width:0;}
  .pn-type::before{margin:0 10px 0 0;}
  .pn-tit{flex:0 0 100%;order:3;margin-top:6px;padding-right:28px;font-size:14px;}
  .pn-item a::after{top:22px;transform:rotate(45deg);}
  .pn-page-head{padding:calc(200*(100vw/828)) 6% calc(40*(100vw/828));}
  .pn-page-tit{font-size:calc(60*(100vw/828));}
  .pn-back{padding:0 6%;}
}

/* ============================================================
   VIDEO block — Perfume c-video-slide 完全準拠 (ダーク適応)
   大型16:9スライダー / 各slide: サムネ + 中央 ▶ 再生ボタン + 下部タイトルバー /
   右下に Video All(solid) + スライドカウンター + 前後矢印。
   ※自動再生(iframe)は未実装 = 静止サムネ + 再生ボタン。コンテンツ/サムネは KAGVYA 自前。
   ============================================================ */
#video.cm-section{margin-top:calc(220 * var(--pv))!important;padding:calc(96 * var(--pv)) 0!important;}
#video .section-header{position:static!important;display:block!important;width:auto!important;height:auto!important;
  max-width:1290px;margin:0 auto!important;padding:0 45px!important;}
#video .header-title{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  width:auto!important;margin:0 0 27px 0!important;padding:0!important;}
#video .header-title h2 strong{font-size:38px!important;line-height:1!important;letter-spacing:.76px!important;color:var(--kg-ink)!important;}
#video .header-view{display:none!important;}
#video .section-main--video{position:static!important;margin:0!important;padding:0!important;width:100%!important;min-height:0!important;}

.pv-slide{position:relative;max-width:1290px;margin:0 auto;padding:0 45px;}
.pv-swiper{overflow:hidden;}
.pv-swiper .swiper-wrapper{align-items:stretch;}
.pv-item{position:relative;overflow:hidden;background:#000;}
.pv-thumb{position:relative;padding-top:56.25%;overflow:hidden;}   /* 16:9 */
.pv-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform .6s ease,opacity .3s ease;}
.pv-item:hover .pv-thumb img{opacity:1;transform:scale(1.03);}
/* 全面カバー(クリックでYouTube) + 中央再生ボタン (Perfume c-video-slide__item a) */
.pv-cover{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.32);transition:background .3s ease;text-decoration:none;}
.pv-item:hover .pv-cover{background:rgba(0,0,0,.16);}
.pv-play{width:84px;height:84px;border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .3s ease;}
.pv-item:hover .pv-play{transform:scale(1.08);}
.pv-play i{display:block;width:0;height:0;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff;margin-left:5px;}
/* 下部タイトルバー (Perfume c-video-slide__info: 半透明黒帯・1行省略・右に操作領域ぶんの余白) */
.pv-info{position:absolute;left:0;bottom:0;width:100%;height:64px;z-index:3;background:rgba(0,0,0,.34);
  color:#fff;font-size:16px;line-height:64px;padding:0 40px;padding-right:360px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.02em;}
/* 右下の操作群 (Video All + カウンター + 前後矢印) = Perfume 準拠の重なり配置 */
.pv-controls{position:absolute;right:45px;bottom:0;z-index:6;display:flex;align-items:stretch;height:64px;}
.pv-counter{display:flex;align-items:center;color:#fff;font-size:15px;letter-spacing:.08em;padding:0 12px;
  font-family:"Inter","Roboto Mono",monospace;}
.pv-counter em{opacity:.45;margin:0 7px;font-style:normal;}
.pv-arrow{width:40px;height:64px;background:rgba(0,0,0,.34);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease;}
.pv-arrow:hover{background:rgba(0,0,0,.55);}
.pv-arrow::before{content:"";width:9px;height:9px;border-top:2px solid #fff;border-right:2px solid #fff;}
.pv-arrow--prev::before{transform:rotate(-135deg);margin-left:4px;}
.pv-arrow--next::before{transform:rotate(45deg);margin-right:4px;}
.pv-arrow.swiper-button-disabled{opacity:.3;cursor:default;}
/* Video All = Perfume c-video-slide__all を忠実に: 真っ黒地 + 白文字 + 白グリッドアイコン */
.pv-all{display:flex;align-items:center;justify-content:center;gap:10px;height:64px;width:158px;
  background:#000;color:#fff;text-decoration:none;font-size:15px;letter-spacing:.06em;transition:background .2s ease;}
.pv-all__ico{flex:0 0 auto;width:11px;height:11px;fill:currentColor;}
.pv-videoall-m{display:none;}   /* mobile版 Video All(=News All様式ピル)。desktopは非表示 */
.pv-all:hover{background:#1a1a1a;}
/* COMING SOON スライド (真っ黒・再生ボタン無し) */
.pv-item--soon .pv-cover{background:#0a0b0d;cursor:default;}
.pv-item--soon .pv-soon{color:var(--kg-mute);font-size:18px;letter-spacing:.2em;}

/* ---- Perfume 完全踏襲: YouTube IFrame をその場で流す(空div→iframe差替) ---- */
.pv-video{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.pv-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block;}
/* index スライダー = ambient(動く無音サムネ)。cover を透過にして動画を見せる。play ボタンは YouTube を別タブで開く */
.pv-swiper .pv-cover{background:transparent;z-index:2;}
.pv-swiper .pv-item:hover .pv-cover{background:rgba(0,0,0,.14);}
.pv-swiper .pv-info{z-index:3;}
/* video.html = クリックで inline 再生。再生中はサムネ/cover/info をフェード(Perfume c-video-list is-playing) */
.pv-vlist .pv-item{cursor:pointer;}
.pv-vlist .pv-item .pv-cover{transition:opacity .3s ease;}
.pv-vlist .pv-item.is-playing .pv-thumb,
.pv-vlist .pv-item.is-playing .pv-cover,
.pv-vlist .pv-item.is-playing .pv-info{opacity:0;pointer-events:none;}
.pv-vlist .pv-item.is-playing .pv-video{z-index:5;pointer-events:auto;}
/* 中央の再生ボタンは非表示 (ボス指示: Perfumeから外すが無い方が良い判断)。cover(クリック領域)は維持 */
.pv-play{display:none!important;}

@media (max-width:960px){
  #video.cm-section{margin-top:calc(160*(100vw/828))!important;padding:calc(80*(100vw/828)) 0!important;}
  #video .section-header{padding:0 6%!important;}
  #video .header-title h2 strong{font-size:calc(64*(100vw/828))!important;}
  .pv-slide{padding:0 6%;}
  .pv-play{width:60px;height:60px;}
  .pv-play i{border-width:7px 0 7px 11px;}
  .pv-info{height:48px;line-height:48px;font-size:13px;padding:0 16px;padding-right:150px;}
  .pv-controls{right:6%;height:48px;}
  .pv-all{width:auto;padding:0 14px;height:48px;font-size:13px;}
  /* mobile: バー内の Video All(黒ボタン)は隠し、News All と同じ様式のピルをスライダー下に表示(ボス指示・Perfume準拠) */
  .pv-controls .pv-all{display:none!important;}
  .pv-videoall-m{display:flex;margin-top:calc(40*(100vw/828));}
  .pv-counter{display:none;}
  .pv-arrow{width:34px;height:48px;}
}

/* ---- video.html (一覧ページ) = Perfume c-video-list 準拠: 大型16:9 を縦積み。pv-item を再利用 ---- */
.pv-vpage{padding:0 0 calc(120 * var(--pv));}
.pv-vpage-head{max-width:1100px;margin:0 auto;padding:calc(220 * var(--pv)) 45px calc(44 * var(--pv));}
.pv-vpage-tit{margin:0;font-size:38px;line-height:1;letter-spacing:.76px;color:var(--kg-ink)!important;font-weight:400;}
.pv-vpage-tit strong span{display:inline-block;}
.pv-vlist{max-width:1100px;margin:0 auto;padding:0 45px;list-style:none;}
.pv-vlist > li{margin-bottom:calc(60 * var(--pv));}
.pv-vlist .pv-info{padding-right:40px;}   /* 一覧は操作群が無いので右余白を通常に */
.pv-vpage .pn-back{max-width:1100px;}
@media (max-width:960px){
  .pv-vpage-head{max-width:none;padding:calc(200*(100vw/828)) 6% calc(40*(100vw/828));}
  .pv-vpage-tit{font-size:calc(60*(100vw/828));}
  .pv-vlist{padding:0 6%;}
  .pv-vlist > li{margin-bottom:calc(40*(100vw/828));}
}