/* トップページ固有の追加スタイル（2026-10 改修版）。デモの index.html の <head> 内 <style> を移したもの。
   デモと同じく共通CSS（/common/styles/index.r2610.css）より前に読む（head.html の pre_css）。 */
/* 1) 超軽量サムネ(299B・data URI)を背景に敷く = ネットワークを待たずに即描画 */
.ly_pageTopMainVisual{
  background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAHAAbAAD//gAQTGF2YzYxLjE5LjEwMAD/2wBDAAgcHCEcISYmJiYmJi0qLS8vLy0tLS0vLy8yMjI7OzsyMjIvLzIyODg7O0BCQD09Oz1CQkZGRlRUUFBiYmV4eJH/xABjAAEBAQEAAAAAAAAAAAAAAAAFBgECAQEBAQAAAAAAAAAAAAAAAAACAwUQAAEDAwIHAQAAAAAAAAAAAAEAAhEhAxIEQYFxYiIxkaFREQEBAQEBAAAAAAAAAAAAAAAAESKhUf/AABEIAA4AGAMBIgACEQADEQD/2gAMAwEAAhEDEQA/AHdMXtcKgTRY99wNgvBJJExUfVPuvEKYuXTBFZ2QkC1QBuM95P6d+K4nqKLecfE1COy5+1j694s//9k=") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
/* 2) 本番ポスター(動画の1フレーム目)を上に重ねる。動画と同じ位置合わせ(center center / cover) */
.ly_pageTopMainVisual::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;
  background-image:image-set(url("/videos/hero_pirika_poster.webp") type("image/webp"),
                             url("/videos/hero_pirika_poster.jpg")  type("image/jpeg"));
  background-image:-webkit-image-set(url("/videos/hero_pirika_poster.webp") type("image/webp"),
                                     url("/videos/hero_pirika_poster.jpg")  type("image/jpeg"));
  background-position:center center;background-size:cover;background-repeat:no-repeat;
}
@media screen and (max-width:752px){
  /* スマホ用ポスターは動画と同じ 縦横比1.125・スマホ専用フレーミング版の1コマ目 */
  .ly_pageTopMainVisual{background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD//gAQTGF2YzYxLjE5LjEwMAD/2wBDAAgcHCEcISYmJiYmJi0qLS8vLy0tLS0vLy8yMjI7OzsyMjIvLzIyODg7O0BCQD09Oz1CQkZGRlRUUFBiYmV4eJH/xABkAAEBAQAAAAAAAAAAAAAAAAAGAAUBAAMBAAAAAAAAAAAAAAAAAAEEAwUQAAEDAgYDAQEAAAAAAAAAAAEAAhGhA2GCkVExEkFxsSETEQADAQEBAAAAAAAAAAAAAAAAASFRAqH/wAARCAAQABIDASIAAhEAAxEA/9oADAMBAAIRAxEAPwBU25d/kQHAQRyJ+o9ec646O4AHMCJqUcffJ8rLY/u8zt+e96JfqKMCorzHRWY6IxLsVS7GqzbvhU//2Q==") !important;}
  .ly_pageTopMainVisual::before{
    background-image:image-set(url("/videos/hero_pirika_poster_sp.webp") type("image/webp"),
                               url("/videos/hero_pirika_poster_sp.jpg")  type("image/jpeg"));
    background-image:-webkit-image-set(url("/videos/hero_pirika_poster_sp.webp") type("image/webp"),
                                       url("/videos/hero_pirika_poster_sp.jpg")  type("image/jpeg"));
  }
}
/* 3) 可読性スクリーン。動画が来る前から出しておく = 動画が出ても見た目が変わらない */
.ly_pageTopMainVisual::after{
  content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,27,62,0.72) 0%,rgba(13,27,62,0.66) 50%,
    rgba(13,27,62,0.50) 80%,rgba(13,27,62,0.30) 100%);
}
/* 4) 動画はポスターの上・スクリーンの下に入る */
.ly_pageTopMainVisual > video{z-index:0;}
/* 5) 文字は最初から白（スクリーンが常に出ているため） */
.ly_pageTopMainVisual .bl_pageTopMainVisual{position:relative;z-index:2;}
/* index.css が後から読まれるため、詳細度を上げて上書きする */
.ly_pageTopMainVisual .bl_pageTopMainVisualMessage,
.ly_pageTopMainVisual .bl_pageTopMainVisualMessage_title,
.ly_pageTopMainVisual .bl_pageTopMainVisualMessage_text,
.ly_pageTopMainVisual .bl_pageTopMainVisualMessage_text p,
.ly_pageTopMainVisual .el_heroNote{color:#fff;}

.ly_pageTopMainVisual .bl_pageTopMainVisual{
  padding-top:22.4rem;   /* 下12rem + ヘッダー10.4rem */
}
/* 6) ヒーローの高さを詰める
      狙い: 文字の下の余白を減らし、縦横比をPC寄りにする
            = object-fit:cover での左右の見切れが減り、動画がより広く見える */
@media screen and (max-width:752px){
  /* 従来 min-height:44rem(440px) / padding:6rem(60px) 均等。
     上下均等だと、固定ヘッダー(74px)がヒーロー上部に被る分だけ文字が下に押し出され、
     結果として下に117pxも余っていた。上下を非対称にして下だけ詰める。 */
  .ly_pageTopMainVisual .bl_pageTopMainVisual{
    
    min-height:44rem;height:auto;
    padding-top:10.6rem;         /* 下3.2rem + ヘッダー7.4rem */
    padding-bottom:3.2rem;
  }
}
@media screen and (min-width:753px) and (max-width:1199px){
  /* タブレット幅でも height:80rem(800px) 固定で縦長になっていたため合わせて調整 */
  /* 46vw = 縦横比 約2.17 で固定。PC(1600px幅で比2.0)とほぼ同じ見え方になる */
  .ly_pageTopMainVisual .bl_pageTopMainVisual{
    height:auto;min-height:46vw;
    padding-top:14.4rem;   /* 下4rem + ヘッダー10.4rem */
    padding-bottom:4rem;
  }
}

.ly_pageTopMainVisual .el_phrase{display:inline-block;max-width:100%;}
.ly_pageTopMainVisual .bl_pageTopMainVisualMessage_title,
.ly_pageTopMainVisual .el_heroLead{text-wrap:balance;}

@media screen and (max-width:752px){
  .ly_pageTopMainVisual .el_heroLead{font-size:1.5rem;}
}
/* 6.5) 各セクションの「リード文 → 本体」の間隔を詰める
      このサイトの余白は1.1rem刻み。カード同士の間隔が2.2rem(22px)なのに対し、
      リード文の下だけ8.8rem(88px)＝4倍あり、見出しと中身が切り離されて見えていた。
      カード間隔の2倍(4.4rem)にして、まとまりは保ったまま44px詰める。
      トップページの3セクション（サービス／できること／協賛・協働）に同じ値を当てる。 */
.ly_pageTopContentsFrame .bl_pageTopSection_text{margin-bottom:4.4rem;}
@media screen and (max-width:752px){
  /* スマホはカード間隔1.2rem(12px)の2倍 = 2.4rem(24px) */
  .ly_pageTopContentsFrame .bl_pageTopSection_text{margin-bottom:2.4rem;}
}
/* 7) ヒーローと「ピリカの提供するサービス」の間を詰める
      この上余白は複数セクション共通の指定なので、直下の1節だけに限定して上書きする */
/* 「あなたが、ピリカとできること。」を削除した結果、サービス欄の直後が
   「お知らせ」の灰色ブロックになった。サービス欄には下余白が無く（padding-bottom:0。
   元は次のセクションの上余白17.6remが受けていた）カードが灰色に貼り付いて見えるため、
   上と同じ値の下余白を持たせる。お知らせ側の上余白6.6remと合わせて
   17.6rem＝このサイトの標準のセクション間隔になる。 */

.ly_pageTopContentsFrame .bl_pageTopServiceSection,
.ly_pageTopContentsFrame .bl_pageTopInformationSection,
.ly_pageTopContentsFrame .bl_pageTopSponsorshipSection{
  padding-top:6.6rem;
  padding-bottom:6.6rem;
}

.ly_pageTopContentsFrame .bl_pageTopSection_title_label_en{margin-bottom:0;}
/* 見出しの下に、一覧側の上余白2.2remが二重に乗っていた（スポンサーシップ） */
.ly_pageTopContentsFrame .bl_pageTopSponsorshipList{padding-top:0;}
/* 協賛ロゴの間隔は縦1.1rem・横2.2remと不揃いだった → 縦横とも1.1rem（SPは縦2.4・横1.2 → 1.2rem） */
.ly_pageTopContentsFrame .bl_pageTopSponsorshipList{gap:1.1rem;}

.ly_pageTopContentsFrame .bl_pageTopSponsorshipMarquee{display:flex;flex-direction:column;row-gap:1.1rem;}
.ly_pageTopContentsFrame .bl_pageTopSponsorshipMarquee_row{overflow:hidden;}
.ly_pageTopContentsFrame .bl_pageTopSponsorshipMarquee_track{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  column-gap:1.1rem;row-gap:1.1rem;padding:0;margin:0;width:-webkit-max-content;width:max-content;
}
.ly_pageTopContentsFrame .bl_pageTopSponsorshipMarquee_track .bl_pageTopSponsorshipList_item{flex:none;}
.ly_pageTopContentsFrame .is-marqueeReady .bl_pageTopSponsorshipMarquee_track{
  flex-wrap:nowrap;
  animation:bl_pageTopSponsorshipMarquee_scroll 36s linear infinite;
}
.ly_pageTopContentsFrame .is-marqueeReady .bl_pageTopSponsorshipMarquee_row[data-direction="right"] .bl_pageTopSponsorshipMarquee_track{
  animation-direction:reverse;
}
.ly_pageTopContentsFrame .is-marqueeReady .bl_pageTopSponsorshipMarquee_row:hover .bl_pageTopSponsorshipMarquee_track{
  animation-play-state:paused;
}
@keyframes bl_pageTopSponsorshipMarquee_scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion:reduce){
  .ly_pageTopContentsFrame .is-marqueeReady .bl_pageTopSponsorshipMarquee_track{animation:none;}
}

.ly_pageTopContentsFrame .bl_topPageInformationButton{margin-top:3.3rem;}
@media screen and (max-width:752px){
  .ly_pageTopContentsFrame .bl_pageTopSponsorshipList{gap:1.2rem;}
  /* ロゴ枠の高さが画像の縦横比で51〜58pxとばらつき、行ごとの間隔が不揃いに見えていた → 高さを固定 */
  .ly_pageTopContentsFrame .bl_pageTopSponsorshipList_item_link{height:6rem;max-height:none;}
  .ly_pageTopContentsFrame .bl_pageTopSponsorshipList_item_image{max-width:100%;max-height:100%;width:auto;height:auto;}
  .ly_pageTopContentsFrame .bl_pageTopSponsorshipMarquee_track .bl_pageTopSponsorshipList_item_link{min-width:14rem;}
  .ly_pageTopContentsFrame .bl_topPageInformationButton{margin-top:3.6rem;}
}
/* 8) サービス一覧のカード（B案）
      従来は「大きな画像＋縦積み＋"詳しくはこちら"ボタン」で、PCは1枚が高く、
      スマホでは1枚534px×6枚=3437px（ページ全体の4割弱）を占めていた。
      B案は「小さなアイコンを左、見出しを右、説明文を下に全幅」の2段構成にし、
      ボタンを廃してカードの領域全体をリンクにした。文言は削っていない。
      ※ index.css が後から読まれるので、詳細度を1つ上げて上書きしている */

/* 9) PC表示は 4列 → 3列。6サービスだと4列では 4＋2 になり2段目の右が2枠空く。
      3列なら 3＋3 で埋まる。サービスが増えたら、その時点で列数を見直す。 */
.bl_pageTopServiceSection .bl_pageTopServiceList{
  grid-template-columns:1fr 1fr 1fr;
}

/* カード外側の余白は内側の a に持たせるので、item 側は 0 にする */
.bl_pageTopServiceSection .bl_pageTopServiceList_item{padding:0;}
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link{
  display:grid;
  grid-template-columns:5.6rem 1fr;
  grid-template-areas:"img head" "text text";
  column-gap:1.4rem;row-gap:1.4rem;
  align-items:center;
  padding:2rem;
  margin:0;                                  /* 旧レイアウト用の下24pxを解除 */
  height:100%;
  border:.1rem solid transparent;            /* ホバー時に枠が出ても幅がずれないよう先に確保 */
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
/* カード全体が a になったので、index.css の a:hover{text-decoration:underline} が
   見出しと説明文にまとめて下線を引いてしまう。カード内では下線を出さない。 */
/* カード全体が a になったので、(1) ブラウザ既定のリンク色（青）が付き、
   (2) index.css の a:hover{text-decoration:underline} が見出しと説明文にまとめて
   下線を引いてしまう。どちらもカード内では打ち消す（文字色は本文と同じ #0e0e0e）。 */
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link,
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link:link,
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link:visited,
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link:hover,
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link:focus,
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link:active,
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link *{
  color:inherit;
  text-decoration:none;
}
/* ホバーはサービスページのカード（.bl_svcList_item）と同じ：枠線なし・狭く濃い影で浮かせる */
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link:hover{
  box-shadow:0 6px 16px rgba(0,0,0,.2);
  transform:translateY(-.2rem);
}
.bl_pageTopServiceSection .bl_pageTopServiceList_item_image{
  grid-area:img;width:5.6rem;height:5.6rem;margin:0;
  display:flex;align-items:center;justify-content:center;
}
.bl_pageTopServiceSection .bl_pageTopServiceList_item_image img{
  max-width:100%;max-height:100%;object-fit:contain;
}
/* 旧レイアウトの中央寄せ＋内側11pxを解除する（11px×2ぶん見出し欄が狭くなり、
   14文字のサブタイトルが2行に折れていた） */
.bl_pageTopServiceSection .bl_pageTopServiceList_item_header{
  grid-area:head;text-align:left;padding:0;
}
/* 文字サイズ・行間は改修前と同じ（PC: サブ1.6rem/見出し2rem/本文1.6rem・いずれも行間180%）。
   レイアウトだけを変え、文字は小さくしない。 */
.bl_pageTopServiceSection .bl_pageTopServiceList_item_subTitle{
  font-size:1.6rem;line-height:180%;margin-bottom:0;
}
.bl_pageTopServiceSection .bl_pageTopServiceList_item_title{
  font-size:2rem;line-height:180%;
}
.bl_pageTopServiceSection .bl_pageTopServiceList_item_text{
  grid-area:text;text-align:left;font-size:1.6rem;line-height:180%;padding:0;
}

/* 見出しの右に置く細い山形の矢印。カード全体がリンクなので、これは目印だけ。
   vertical-align:middle は欧文のx-heightを基準にするため、和文だと2px低く見える。
   top:-0.1em で見出しの文字と高さを揃えている。 */
.el_svcArrow{
  display:inline-block;position:relative;
  width:1rem;height:1.4rem;margin-left:1rem;
  vertical-align:middle;top:-0.145em;flex:none;
  transition:transform .25s;
}
.el_svcArrow::before{
  content:"";position:absolute;top:50%;left:0;width:.8rem;height:.8rem;
  border-top:.2rem solid #202b52;border-right:.2rem solid #202b52;
  transform:translateY(-50%) rotate(45deg);
}
.bl_pageTopServiceSection .bl_pageTopServiceList_item_link:hover .el_svcArrow{
  transform:translateX(.3rem);
}

.el_svcArrow{display:none;}

@media screen and (max-width:752px){
  /* 【スマホの余白を揃える】
     旧: リストに 0 1.2rem の内側余白が付いてカードだけ画面端から24px（見出し・リード文は12px）、
         縦は .._item の margin-bottom:6rem で60px空いていた（左右24pxの2.5倍）。
     新: リストの内側余白を外してカードを見出しと同じ12pxに揃え、縦の間隔も12pxにする。
     ※ index.css が後から読まれるため、いずれも詳細度を1つ上げて上書きしている */
  .bl_pageTopServiceSection .bl_pageTopServiceList{
    display:grid;grid-template-columns:1fr;gap:1.2rem;padding:0;
  }
  .bl_pageTopServiceSection .bl_pageTopServiceList_item{margin-bottom:0;}
  .bl_pageTopServiceSection .bl_pageTopServiceList_item_link{
    column-gap:1.2rem;row-gap:.8rem;padding:1.6rem;
  }
  /* スマホは6枚縦積みで場所を取るため、承認済みのコンパクト版の字送りを維持する
     （見出し欄は183pxしかないので、20pxだと「コンサルティング」が2行に折れる） */
  .bl_pageTopServiceSection .bl_pageTopServiceList_item_subTitle{
    font-size:1.3rem;line-height:150%;
  }
  .bl_pageTopServiceSection .bl_pageTopServiceList_item_title{
    font-size:1.8rem;line-height:150%;
  }
  .bl_pageTopServiceSection .bl_pageTopServiceList_item_text{
    font-size:1.5rem;line-height:165%;
  }
  .el_svcArrow{margin-left:.8rem;}
}