@charset "UTF-8";
/* ==========================================================================
   スマートフォン表示対応（レスポンシブ追加スタイル）
   - screen.css の後に読み込まれる追加ファイルで、既存のPC向けスタイルは
     一切変更していません。
   - すべて @media (max-width: 768px) の中に閉じているため、
     PC幅（768pxを超える画面）での表示には影響しません。
   ========================================================================== */

/* ハンバーガーボタン・スマホ用ヘッダーCTAはPCでは常に非表示
   （メディアクエリの外側で明示的に指定） */
.l-lpHeader__spNavBtn,
.l-lpHeader__spCta {
  display: none;
}

/* screen.css の .c-topSubTitle--intro span { display:block; color:#2A97EB }
   （旧構造用）が文節spanに効いて青色・縦積みになるのを打ち消す。
   PC・スマホ共通で元の見出しと同じ見た目に保つ */
.c-topSubTitle--intro .u-jpPhrase {
  display: inline-block;
  color: inherit;
  font-weight: inherit;
}

@media screen and (max-width: 768px) {

  /* ---------- 横スクロール対策 ---------- */
  /* html / body への overflow 指定は iOS Safari でフッター下に
     余分なスクロール領域（大きな余白）を生む既知の問題があるため
     設定しない。横はみ出しの真因（固定幅など）は各所で解消済み。
     screen.css の body.is-lp { overflow: hidden } も iOS の同問題を
     引き起こすため通常値に戻す */
  body.is-lp {
    overflow: visible;
  }

  /* ---------- iOSのフッター下余白対策 ---------- */
  /* screen.css の html { height: 100% } は html の高さをビューポートに
     固定する。iOSはスクロール中にツールバーが伸縮して実際に見える
     高さ（innerHeight）が変化するのに対し、レイアウト計算に使う
     高さ（documentElement.clientHeight）は変化前の大きい値のまま
     になることがあり、その差分がフッター下の余白として残る。
     min-height:100% も同じビューポート依存値のため、高さ指定は
     一切行わず、コンテンツ量だけで高さが決まるようにする */
  html {
    height: auto;
    min-height: 0;
    /* レイアウト上は余白ゼロでも、iOSのツールバー伸縮時に新しく
       見える領域が再描画されず白く残る場合があるため、地の色を
       ページ背景色と揃えて目立たなくする保険 */
    background-color: #f9f9fa;
  }

  /* l-main の min-height: 100vh も iOS の vh 計算差の影響を受けるため
     モバイルでは解除（コンテンツは常にビューポートより長いため実害なし） */
  .l-main--lp {
    min-height: 0;
  }

  img,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  .c__logo-listScroll .inner,
  .c__logo-listScroll .inner img,
  .c__logo-listScroll img {
    max-width: 100%;
  }

  .c__logo-listScroll .inner {
    height: auto;
  }

  /* ロゴはスライド幅いっぱいに表示（PCと同じ帯状の見え方にする）。
     width:auto + 中央寄せだとロゴ間に隙間ができるため width:100% にする */
  .c__logo-listScroll .inner img {
    width: 100%;
    height: auto;
  }

  /* screen.css の .slick-list.draggable { width: calc(1080px + 30px) } が
     スマホでもリスト幅を1110px固定にし、スライド幅計算を狂わせるため解除 */
  .slick-list.draggable {
    width: 100%;
  }

  /* slick.css がフッターで再読み込みされ後勝ちするため、詳細度を上げて
     ロゴ間の余白を打ち消す */
  .c__logo-listScroll.slick-initialized .slick-slide {
    padding: 0;
  }

  /* ---------- 全体の最小幅の解除 ---------- */
  /* body.is-top { min-width: 1280px } が screen.css にあり、これが
     スマホでの横はみ出し（および iOS での fixed ヘッダー不動作）の根本原因。
     body 自体の最小幅を必ず解除する */
  body,
  body.is-lp,
  body.is-top {
    min-width: 0;
  }

  .l-body,
  .is-lp .l-body {
    min-width: 0;
  }

  .l-static {
    padding: 0 20px;
  }

  .l-topContainer,
  .l-topContainer--caseStudies,
  .l-topContainer--company,
  .l-topContainer--intro,
  .l-topContainerCompany,
  .l-topContainerCompany--caseStudies,
  .l-interview {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  /* /info/company/ の事業内容リスト直下、RECRUITへの余白がPC用の
     margin-top: 100px のままで過大になっているため縮小する */
  .l-topContainer--company {
    margin-top: 40px;
  }

  /* ---------- ヘッダー：ハンバーガーメニュー化 ---------- */
  /* position: sticky は祖先要素のoverflow指定の影響を受けるため、
     より確実な position: fixed を使用し、押し出されたスペースは
     .l-main--lp に padding-top を追加して確保する */
  /* padding-bottom: 285px はPCで絶対配置のフッター用に確保された
     スペース。モバイルではフッターを通常フローに戻しているため不要
     （残すとフッター下に大きな余白ができる）。
     padding-top はヘッダー分の確保だったが、最上部ではヘッダーを
     隠す仕様（is-spHeaderHidden）にしたため 0 にし、コンテンツを
     画面最上部から表示する */
  .l-main--lp,
  .l-seminar.l-main--lp {
    padding-top: 0;
    padding-bottom: 0;
  }

  /* トップページ以外の全ページに効く padding-bottom: 100px（PC用）が
     ページ最下部の過大な余白の原因のため縮小 */
  body.is-lp:not(.is-top) .l-contents {
    padding-bottom: 40px;
  }

  .l-lpHeader {
    padding: 0 20px;
    height: 48px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    width: 100%;
    box-sizing: border-box;
    transition: top .25s ease;
  }

  /* ロゴはPC比 4/5 サイズに縮小（SVGなので width/height 指定で拡縮） */
  .l-lpHeader__title svg {
    width: 96px;
    height: 18px;
  }

  /* ページ最上部ではヘッダーを画面外（上）に隠す。
     スクロールするとJSがこのクラスを外し、スライドインで表示される */
  .l-lpHeader.is-spHeaderHidden {
    top: -48px;
  }

  /* ヘッダー内CTA：ファーストビューのボタンと同じ配色（#2a97eb×白） */
  .l-lpHeader__spCta {
    display: inline-block;
    margin-left: auto;
    background-color: #2a97eb;
    border: 1px solid #2a97eb;
    border-radius: 16px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    padding: 9px 12px;
    white-space: nowrap;
  }

  /* .l-lpHeader--transparent a のリンク色指定に勝つよう要素付きで指定 */
  .l-lpHeader a.l-lpHeader__spCta,
  .l-lpHeader--transparent a.l-lpHeader__spCta {
    color: #fff;
    text-decoration: none;
  }

  .l-lpHeader__spNavBtn {
    display: block;
    width: 24px;
    height: 18px;
    margin-left: 14px;
    position: relative;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    z-index: 101;
  }

  .l-lpHeader__spNavBtn span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #596574;
    transition: all .2s;
  }

  .l-lpHeader--transparent .l-lpHeader__spNavBtn span {
    background: #596574;
  }

  .l-lpHeader__spNavBtn span:nth-child(1) { top: 0; }
  .l-lpHeader__spNavBtn span:nth-child(2) { top: 8px; }
  .l-lpHeader__spNavBtn span:nth-child(3) { top: 16px; }

  .l-lpHeader.is-spNavOpen .l-lpHeader__spNavBtn span:nth-child(1) {
    top: 8px;
    transform: rotate(45deg);
  }
  .l-lpHeader.is-spNavOpen .l-lpHeader__spNavBtn span:nth-child(2) {
    opacity: 0;
  }
  .l-lpHeader.is-spNavOpen .l-lpHeader__spNavBtn span:nth-child(3) {
    top: 8px;
    transform: rotate(-45deg);
  }

  .l-lpHeader > .l-lpHeader__links,
  .l-lpHeader > .l-lpHeader__login {
    display: none;
  }

  .l-lpHeader.is-spNavOpen > .l-lpHeader__links {
    display: block;
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 76px;
    margin: 0;
    background: #fff;
    z-index: 100;
    overflow-y: auto;
    flex-direction: column;
    align-items: flex-start;
    font-size: 16px;
    padding: 10px 20px 20px;
    box-sizing: border-box;
  }

  .l-lpHeader.is-spNavOpen > .l-lpHeader__links .l-lpHeader__links__item {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #e6e6e6;
  }

  /* テキスト部分だけでなく行全体をタップ領域にするため、
     余白は li ではなく a 側に持たせてブロック化する */
  .l-lpHeader.is-spNavOpen > .l-lpHeader__links .l-lpHeader__links__item > a {
    display: block;
    width: 100%;
    padding: 14px 0;
    box-sizing: border-box;
  }

  .l-lpHeader.is-spNavOpen > .l-lpHeader__links .l-lpHeader__links__item:not(:last-child):after {
    content: none;
  }

  .l-lpHeader.is-spNavOpen .l-lpHeader__links__Child {
    display: block;
    position: static;
    padding: 10px 0 0;
  }

  .l-lpHeader.is-spNavOpen .l-lpHeader__links__Child ul {
    border: none;
    box-shadow: none;
  }

  /* ハンバーガーメニュー内の「お問い合わせ」は非表示にする
     （フッター側の同じクラスの一覧には元々お問い合わせ項目が無いため
     :has() でハンバーガーメニュー内だけに絞り込む必要はあるが念のため限定） */
  .l-lpHeader.is-spNavOpen > .l-lpHeader__links .l-lpHeader__links__item:has(a[href="/contact/"]) {
    display: none;
  }

  .l-lpHeader.is-spNavOpen > .l-lpHeader__login {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 76px;
    margin: 0;
    background: #fff;
    z-index: 100;
    padding: 20px;
    border-top: 8px solid #f5f5f5;
    box-sizing: border-box;
  }

  /* ログインボタンも横幅いっぱいをタップ領域にする */
  .l-lpHeader.is-spNavOpen > .l-lpHeader__login .c-loginBtn {
    display: block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  .l-lpHeader--transparent {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .l-lpHeader--transparent a,
  .l-lpHeader--transparent .l-lpHeader__title svg path {
    color: #596574;
    fill: #596574;
  }

  /* ---------- メインビジュアル（トップページ） ---------- */
  /* 動画の高さ(70vw)よりテキストが縦に長いと overflow:hidden で
     キャッチコピーの上下が見切れるため、テキストを通常フローに戻し、
     動画はセクション全体を覆う背景として絶対配置する */
  .c-mainVisual__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
  }

  .c-mainVisual__info {
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: none;
    transform: none;
    width: 100%;
    box-sizing: border-box;
    padding: 48px 0;
  }

  .c-mainVisual__info__img {
    width: 150px;
    height: auto;
  }

  .c-mainVisual__info__title {
    font-size: 17px;
    line-height: 1.8;
    margin: 18px auto 0;
    text-wrap: balance;
  }

  .c-mainVisual__info__text {
    font-size: 12px;
    line-height: 1.9;
    margin-top: 12px;
    text-wrap: balance;
  }

  .c-mainVisual__info__contactBtn {
    margin-top: 24px;
  }

  /* ファーストビューのCTAボタンが大きすぎるため縮小
     （.c-contactBtnは他の場所にも使われる共通クラスのため、
     ファーストビューのボタンだけに限定して上書きする） */
  .c-mainVisual__info__contactBtn .c-contactBtn {
    font-size: 14px;
    padding: 10px 16px;
  }

  .c-mainVisual--logo {
    padding: 1rem 0;
  }

  /* ---------- Intro セクション（Clipping / Matrix / Report ほか） ---------- */
  .p-topIntro__inner {
    flex-direction: column;
    gap: 20px;
  }

  /* トップページの5セクション（Clipping〜）は、外側paddingが
     0px/40pxとセクションごとにバラバラで、セクション間の余白が
     41px〜141pxと不規則だったため統一する（/info/function/ の
     修正と同様の対応。他ページに影響しないよう.is-topに限定） */
  .is-top .p-topIntro--01,
  .is-top .p-topIntro--02,
  .is-top .p-topIntro--03,
  .is-top .p-topIntro--04,
  .is-top .p-topIntro--05 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* 内側の .l-topContainer--intro 自身にもPC用のpadding-top（80px、
     #5だけ40px）が残っており、外側セクションのpaddingと二重にかかって
     いたため0にする（/info/function/ の対応と同じ原因） */
  .is-top .l-topContainer--intro {
    padding-top: 0;
  }

  /* 基底ルールの width:490px / width:0 を解除
     （トップページ以外＝機能ページ等の p-topIntro にも効く） */
  .p-topIntro__message {
    width: 100%;
  }

  .p-topIntro__imgWrap {
    width: 100%;
  }

  .p-topIntro__img {
    max-width: 100%;
    height: auto;
  }

  .p-topIntro--01,
  .p-topIntro--05 {
    height: auto;
    padding: 40px 0;
  }

  /* --04 だけ余白用のコンテナ（l-topContainer--intro）を持たない
     HTML構造のため、セクション自体に左右余白を持たせる */
  .p-topIntro--04 {
    padding: 40px 20px;
    box-sizing: border-box;
  }

  .p-topIntro--01 .p-topIntro__img,
  .p-topIntro--05 .p-topIntro__img {
    float: none;
    margin: 0 auto 20px;
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  /* Database（--05）は画像→テキストの順で、他のセクション（テキスト→画像）
     と表示順が逆になっていたため、DOMは変更せずflexのorderで視覚的な
     順序だけ入れ替える（PC表示には影響しない） */
  .is-top .p-topIntro--05 .p-topIntro__imgWrap {
    order: 2;
  }

  .is-top .p-topIntro--05 .p-topIntro__message {
    order: 1;
  }

  /* 上記の並び替えにより画像が最後の要素になったため、画像自身の
     margin-bottom:20pxが、セクションのpadding-bottom(30px)に加算されて
     直後の「PR Analyzerの機能をもっと見る」ボタンとの間が50pxと
     過大になっていた。flexのgapで間隔は確保済みのため0にする */
  .is-top .p-topIntro--05 .p-topIntro__img {
    margin-bottom: 0;
  }

  /* サポート満足度の円グラフ（--04の2枚目の画像）：キャプションのPC用
     margin-top:50pxが画像自身の margin-bottom:20px と二重にかかり、
     画像の下の余白が70pxと過大になっていたため0にする */
  .p-topIntro--04 .p-topIntro__caption {
    margin-top: 0;
    /* 「ツールの使い方をメールやお電話、Web会議でサポート」がPC用の
       14pxだと1行に収まらず末尾の「ート」だけ折り返っていたため縮小 */
    font-size: 13px;
  }

  /* 1枚目のキャプション（ツールの使い方～）に下余白が無く、直後の
     円グラフ画像とぴったりくっついていたため余白を追加する。
     2枚目のキャプション（満足度調査の出典）には付けない
     （カード自体の下余白(30px)と二重になるのを避けるため） */
  .p-topIntro--04 .p-topIntro__imgBox:first-child .p-topIntro__caption {
    margin-bottom: 20px;
  }

  .p-topIntro--01 .p-topIntro__message,
  .p-topIntro--02 .p-topIntro__message,
  .p-topIntro--03 .p-topIntro__message,
  .p-topIntro--04 .p-topIntro__message,
  .p-topIntro--05 .p-topIntro__message {
    margin: 0;
    width: 100%;
    padding: 0;
  }

  .p-topIntro--02 .p-topIntro__img,
  .p-topIntro--03 .p-topIntro__imgWrap img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .p-topIntro--02 .p-topIntro__slideWrap {
    width: 100%;
    padding: 0;
    margin-top: 20px;
  }

  /* 背景の装飾数字（1〜5）：PC用のfont-size:270pxがそのまま残り、
     画面幅に対して巨大かつ左側にはみ出す形になっていたため縮小し、
     右側に配置する（.p-topIntro__messageはoverflow:hiddenの親内なので
     はみ出す分は自動でクリップされる） */
  .p-topIntro--01 .p-topIntro__message::before,
  .p-topIntro--02 .p-topIntro__message::before,
  .p-topIntro--03 .p-topIntro__message::before,
  .p-topIntro--04 .p-topIntro__message::before,
  .p-topIntro--05 .p-topIntro__message::before {
    font-size: 120px;
    top: -10px;
    left: auto;
    right: -10px;
  }

  .is-top .p-topIntro--04 .p-topIntro__imgWrap {
    flex-direction: column;
    max-width: 100%;
    width: 100%;
    margin: 20px auto;
  }

  .p-topIntro--04 .p-topIntro__imgBox {
    width: 100%;
  }

  .p-topIntro--04 .p-topIntro__imgBox img,
  .p-topIntro--04 .p-topIntro__img--after {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin: 0 0 20px;
  }

  .p-topIntro__txt {
    font-size: 16px;
  }

  .p-topIntro__title {
    font-size: 18px;
    line-height: 1.5;
  }

  .p-topIntro__text {
    font-size: 14px;
    line-height: 1.7;
  }

  /* ---------- Case Study / Contact 見出しセクション ---------- */
  .c-subVisual--caseStudies,
  .c-subVisual--contact {
    height: auto;
    padding: 40px 20px;
    margin-top: 60px;
    box-sizing: border-box;
  }

  /* ---------- 導入事例（Case Study）カード ---------- */
  .p-interviewLink {
    width: 100%;
    max-width: 100%;
    margin: 20px 0 0;
    padding: 0 20px;
    box-sizing: border-box;
    justify-content: center;
  }

  /* 事例間の区切りを明確にするため、余白＋区切り線を追加 */
  .p-interviewLink__item {
    width: 100%;
    max-width: 340px;
    margin-top: 0;
    padding: 28px 0 32px;
    border-bottom: 1px solid #dfe5eb;
  }

  .p-interviewLink__item:last-child {
    border-bottom: 0;
    padding-bottom: 10px;
  }

  .p-interviewLink__item__img img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* 企業ロゴは引き伸ばさず元サイズ基準で上限だけ設ける。
     width:100% で引き伸ばすと元画像が小さいロゴほど巨大に見えるため */
  .p-interviewLink__item__logo {
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 44px;
  }

  .c-topSubTitle__heading {
    font-size: 18px;
    line-height: 1.6;
  }

  /* 見出しの文節単位改行：コンテンツ側で文節を .u-jpPhrase で括り、
     inline-block 化することで語の途中で改行されないようにする。
     PCでは1行に収まるため見た目への影響はない */
  .u-jpPhrase {
    display: inline-block;
  }

  .c-topSubTitle--intro {
    padding: 24px 0 24px;
    font-size: 18px;
  }

  /* 見出し（Case Study 等）の下線装飾（span::before, bottom:-15px）は
     見出しの外側に描画されるため、本文の上余白を広めに取って重なりを防ぐ。
     日本語の本文は中央揃えだと読みにくいため左揃えにする */
  .c-subVisual--caseStudies p,
  .c-subVisual--contact p {
    font-size: 16px;
    line-height: 1.8;
    text-align: left;
    padding-top: 40px;
    padding-bottom: 20px;
  }

  .c-subVisual--caseStudies p small,
  .c-subVisual--contact p small {
    font-size: 13px;
    line-height: 1.8;
    padding-top: 16px;
  }

  .c-subVisual__heading {
    width: 90%;
  }

  .c-subVisual__heading__title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .c-subVisual__heading__read {
    font-size: 13px;
  }

  /* ---------- Seminar 一覧（トップページ埋め込み分） ---------- */
  /* このセクションは .l-topContainer クラスを持たず左右余白が無いため追加。
     上下もPC用のpadding-top/bottom:100pxが残っていたため縮小する */
  .l-topContainer--seminar {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
    box-sizing: border-box;
  }

  .p-seminar {
    max-width: 100%;
    padding: 0 20px;
  }

  .p-seminar__row {
    display: block;
  }

  /* トップページのセミナー行：padding 0 60px + width:100% で 495px に
     膨らむため、box-sizing と padding を調整 */
  .is-top .p-seminar__row {
    max-width: 100%;
    padding: 0 20px 20px;
    margin: 40px auto 0;
    box-sizing: border-box;
  }

  /* ---------- /seminar/ 上部の絞り込みUI（カテゴリ・受付状況） ---------- */
  .l-seminar__catList,
  .p-seminar__status {
    display: none;
  }

  /* 非表示にした .p-seminar__status が margin-bottom:35px を担っていたため、
     見出しとカード一覧の間の余白が消えていた分を見出し側で補う */
  .p-seminar__head {
    display: block;
    margin-bottom: 24px;
  }

  /* ---------- /seminar/ セミナーレポート：ブログ一覧と同じYahoo!ニュース風に ---------- */
  .p-seminar__reort {
    margin-top: 70px;
    padding: 40px 0;
  }

  .p-seminar__reort .l-static {
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .p-seminar__reort--head {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .p-seminar__reort--more {
    float: none;
    display: inline-block;
    bottom: 0;
    margin-top: 4px;
    padding-right: 15px;
  }

  .p-seminar__col02 {
    margin-top: 16px;
  }

  /* inline-block（画像110px＋テキスト残り幅）は合計がちょうどカード幅と
     同じになり、要素間の空白ぶんだけあふれて折り返ってしまうため、
     CSS Grid で確実に「画像左（縦2段分）・タイトル右上・メタ右下」の
     配置にする */
  .p-seminar__col02 .p-seminar__content--report {
    width: 100%;
    display: grid;
    grid-template-columns: 110px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    margin-bottom: 0;
    padding: 16px 0;
    border-bottom: 1px solid #e6e6e6;
  }

  .p-seminar__col02 .p-seminar__content--report:last-child {
    border-bottom: 0;
  }

  .p-seminar__col02 .p-seminar__content--report:nth-child(2n) {
    padding-left: 0;
  }

  .p-seminar__col02 .p-seminar__content__left {
    display: block;
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    width: 110px;
    height: 110px;
  }

  .p-seminar__col02 .p-seminar__content__right {
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    padding-left: 0;
    min-width: 0;
  }

  .p-seminar__col02 .p-seminar__title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* ブログ一覧のYahoo!風表示は抜粋文を出していないため、揃える */
  .p-seminar__col02 .p-seminar__overview {
    display: none;
  }

  /* .p-seminar__content__right__meta は .p-seminar__content__right の
     子ではなく兄弟要素（同じ <a> の直下）なので、その前提でセレクタを組む */
  .p-seminar__col02 .p-seminar__content__right__meta {
    padding-top: 8px;
    border-top: 0;
    font-size: 12px;
    font-weight: normal;
    color: #999;
  }

  .p-seminar__date,
  .p-seminar__meta__cat {
    float: none;
    display: inline;
    width: auto;
    border: 0;
    padding: 0;
    color: #999;
    font-weight: normal;
  }

  .p-seminar__date {
    white-space: nowrap;
  }

  .p-seminar__meta__cat {
    /* カテゴリ名が複数連結され長くなる場合があり、nowrapのままだと
       横幅がコンテナを超えて画面右にはみ出し、横スクロールの原因になっていた */
    white-space: normal;
    word-break: break-word;
    margin-left: 10px;
  }

  .p-seminar__content__right__meta::after {
    content: none;
  }

  .p-seminar__content {
    width: 100%;
    margin-left: 0;
    float: none;
    margin-bottom: 24px;
  }

  .p-seminar__content:nth-child(3n+1) {
    margin-left: 0;
  }

  /* ---------- /blog/ 上部のカテゴリ絞り込みUI ---------- */
  .l-blog__catList {
    display: none;
  }

  /* 非表示にした .l-blog__catList が margin-bottom:60px を担っていたため、
     見出しとカード一覧の間の余白が詰まりすぎないよう .p-blog 側で補う */
  .p-blog:first-of-type {
    margin-top: 20px;
  }

  /* ---------- Blog 一覧（トップページ埋め込み分） ---------- */
  .is-top .p-blog__row {
    max-width: 100%;
    padding: 0 20px;
    margin-top: 40px;
  }

  /* ブログ一覧（/blog/）：padding 80px で本文が175pxに圧迫されるため縮小 */
  .p-blog {
    max-width: 100%;
    padding: 30px 20px;
  }

  /* アーカイブ型のブログカード：Yahoo!ニュース風のリスト型
     （正方形サムネイル左・太字タイトル最大3行・グレーのメタ情報） */
  .p-blog__row:not(.p-blog__col02) .p-blog__content {
    margin-bottom: 0;
    padding: 16px 0;
    border-bottom: 1px solid #e6e6e6;
  }

  .p-blog__row:not(.p-blog__col02) .p-blog__content:last-of-type {
    border-bottom: 0;
  }

  .p-blog__row:not(.p-blog__col02) .p-blog__content__left {
    width: 110px;
    height: 110px;
  }

  .p-blog__row:not(.p-blog__col02) .p-blog__content__icatch {
    height: 100%;
  }

  .p-blog__row:not(.p-blog__col02) .p-blog__content__left img {
    position: static;
    -webkit-transform: none;
    transform: none;
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-width: 0;
  }

  .p-blog__row:not(.p-blog__col02) .p-blog__content__right {
    width: calc(100% - 110px - 20px);
    padding-left: 12px;
    padding-top: 0;
  }

  /* タイトル：太字・最大3行で省略（Yahoo!ニュース風）。
     margin-top: 20px（基底CSS）がバッジ下の過大な余白の原因のため 0 に */
  .p-blog__row:not(.p-blog__col02) .p-blog__title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* PICK UP は小さなバッジとしてタイトル上に表示する */
  .p-blog__row:not(.p-blog__col02) .p-blog__content_tag {
    display: none;
  }

  .p-blog__row:not(.p-blog__col02) .p-blog__cat {
    display: inline-block;
    font-size: 10px;
    padding: 3px 8px;
    line-height: 1.2;
    margin-bottom: 6px;
  }

  /* ブログ一覧のページネーションは無限スクロール
     （archive-blog.php / taxonomy-blog_type.php のJS）に置き換え */
  .p-blog ~ .pagenation__wrap {
    display: none;
  }

  /* メタ情報（日付・カテゴリ）：タイトル下に小さくグレーで横一列表示 */
  .p-blog__row:not(.p-blog__col02) .p-blog__content__right__meta {
    position: static;
    padding-top: 8px;
    margin-top: 0;
    border-top: 0;
    font-size: 12px;
    font-weight: normal;
    color: #999;
  }

  .p-blog__row:not(.p-blog__col02) .p-blog__content__right__meta::after {
    content: none;
  }

  .p-blog__row:not(.p-blog__col02) .p-blog__date,
  .p-blog__row:not(.p-blog__col02) .p-blog__meta__cat {
    display: inline;
    float: none;
    width: auto;
    border: 0;
    padding: 0;
    margin: 0;
    color: #999;
    font-weight: normal;
    white-space: nowrap;
  }

  .p-blog__row:not(.p-blog__col02) .p-blog__meta__cat {
    margin-left: 10px;
  }

  /* カテゴリ名が「PRトレ/ンド」のように語の途中で折り返さないようにする */
  .p-blog__meta__cat a {
    white-space: nowrap;
    display: inline-block;
  }

  /* トップページの2カラム型ブログ（p-blog__col02）：
     カードを縦積みにし、カード内は「サムネイル左・テキスト右」を維持。
     screen.css 側の詳細度が高いルール群（width: calc(50% - 27px) 等）に
     合わせて .p-blog__col02 を付けて上書きする */
  .p-blog__col02 {
    display: block;
  }

  .p-blog__col02 .p-blog__content {
    width: 100%;
    margin-bottom: 0;
    padding: 20px 0;
    border-bottom: 1px solid #e6e6e6;
    box-sizing: border-box;
  }

  .p-blog__col02 .p-blog__content:nth-child(2n) {
    padding-left: 0;
  }

  .p-blog__col02 .p-blog__content:last-child {
    border-bottom: 0;
  }

  .is-top .p-blog__col02 .p-blog__content__left,
  .p-blog__col02 .p-blog__content__left {
    width: 110px;
    height: auto;
  }

  /* screen.css では絶対配置でトリミング表示しているが、
     高さ auto の親では潰れるため通常フローに戻す */
  .p-blog__col02 .p-blog__content__left img {
    position: static;
    -webkit-transform: none;
    transform: none;
    width: 100%;
    height: auto;
    min-width: 0;
  }

  .p-blog__col02 .p-blog__content__right {
    width: calc(100% - 110px - 20px);
    padding-left: 15px;
    height: auto;
  }

  /* 最新記事一覧（.p-blog__col02）：タイトルに行数制限がなく本文が
     縦に伸びてカードの高さがバラバラになっていた点、メタ情報（日付・
     カテゴリ）がPC用の position:absolute・float・固定幅(48px等)の
     ままで、カテゴリ名が単語の途中で折り返されていた点を、
     ピックアップ記事一覧（:not(.p-blog__col02)）と同じ表示に揃える */
  .p-blog__col02 .p-blog__title {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .p-blog__col02 .p-blog__content__right__meta {
    position: static;
    padding-top: 8px;
    margin-top: 0;
    border-top: 0;
    font-size: 12px;
    font-weight: normal;
    color: #999;
  }

  .p-blog__col02 .p-blog__content__right__meta::after {
    content: none;
  }

  .p-blog__col02 .p-blog__date,
  .p-blog__col02 .p-blog__meta__cat {
    display: inline;
    float: none;
    width: auto;
    border: 0;
    padding: 0;
    margin: 0;
    color: #999;
    font-weight: normal;
  }

  .p-blog__col02 .p-blog__date {
    white-space: nowrap;
  }

  .p-blog__col02 .p-blog__meta__cat {
    white-space: normal;
    word-break: break-word;
    margin-left: 10px;
  }

  .l-topContainer--blog {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* ---------- ブログ記事詳細：前後の記事リンク・シェアエリア ---------- */
  /* [前の記事(200px)][シェア/メタ情報][次の記事(200px)] の3カラム
     横並びを縦積みに変更 */
  .p-blog__detail__pager {
    flex-direction: column;
    margin-top: 30px;
  }

  .p-blog__detail__pager .p-blog__pager__next,
  .p-blog__detail__pager .p-blog__pager__prev {
    float: none;
    width: 100%;
    min-height: 160px;
  }

  /* シェアボックスを非表示にしたことで前後の記事リンクが隙間なく
     隣接するため、カード間に余白を追加する */
  .p-blog__detail__pager .p-blog__pager__next:not(:last-child),
  .p-blog__detail__pager .p-blog__pager__prev:not(:last-child) {
    margin-bottom: 16px;
  }

  /* タイトル・公開日・SNSシェアボタンのボックスはスマホでは非表示にし、
     前後の記事リンクだけを表示してすっきりさせる */
  .p-blog__detail__pager .p-blog__pager__post {
    display: none;
  }

  .p-blog__pager__post__meta {
    flex-wrap: wrap;
  }

  .p-blog__pager__meta__date,
  .p-blog__pager__meta__cat {
    float: none;
  }

  /* シェアボタン：はてな・Facebook・X・LINE を中央揃え・折り返しに */
  .p-blog__pager__post__sns ul {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .p-blog__pager__post__sns li {
    float: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Facebookの「いいね」iframeが意図した高さより膨張することがあるため固定 */
  .p-blog__pager__post__sns .p-list__sns--facebook {
    height: 21px;
    overflow: hidden;
  }

  /* 記事タイトル・本文中の見出し・段落テキストを2px縮小 */
  .p-blog__heading__title {
    font-size: 24px;
  }

  .p-blog__detail__content h1 {
    font-size: 20px;
  }

  .p-blog__detail__content h2 {
    font-size: 18px;
  }

  .p-blog__detail__content h3 {
    font-size: 14px;
  }

  .p-blog__detail__content p {
    font-size: 14px;
  }

  /* ---------- 共通ページネーション（一覧ページ下部の数字ページ送り） ---------- */
  /* .pagination が幅350px固定のため、左右にpaddingのある一覧ページでは
     画面幅を超えてしまい、横に少しスクロールできてしまう不具合の原因になっていた */
  .pagination {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ---------- 共通ボタン ---------- */
  .c-btn__more {
    padding: 0 20px;
  }

  /* 「他の導入事例を見る」ボタン下のPC用余白(100px)を解除 */
  .is-top .p-interviewLink + .c-btn__more {
    padding-bottom: 0;
  }

  /* ボタン周辺の余白を引き締める：
     カード一覧→ボタン間（PC用 60px を 20px に）、
     ボタン→Contact セクション間（60px を 40px に） */
  .is-top .p-interviewLink {
    padding-bottom: 20px;
  }

  .c-subVisual--contact {
    margin-top: 40px;
  }

  /* ボタンは line-height:48px の1行前提設計のため、文言が折り返すと
     行間が破綻する。折り返しても崩れないように行間・余白を再設定 */
  .c-contactBtn,
  .c-moreBtn {
    line-height: 1.5;
    padding: 14px 20px;
    display: inline-block;
    box-sizing: border-box;
    max-width: 100%;
  }

  /* ---------- 導入事例インタビュー詳細（/info/customers/xxx/） ---------- */
  /* メインビジュアル：幅948px固定＋絶対配置センタリングを解除し、
     トップページ同様テキストを通常フローに戻す */
  .c-mainVisual--interview {
    height: auto;
  }

  /* .l-interview（プロフィール以下のコンテンツ全体）にPC用の
     margin-top:-50pxが指定されており、テキストとの間隔が10px程度まで
     狭まっていた。めり込みのデザイン自体は活かしたいとのことなので、
     完全に解除せず30pxだけ残す（見出しテキストとは重ならない範囲） */
  .l-interview {
    margin-top: -30px;
  }

  /* INTERVIEWラベル〜見出しテキストの位置を上に詰め、下に続く
     インタビュー対象者の情報エリアとの間の余白を広げて被らないようにする */
  .c-mainVisual__interview {
    position: relative;
    top: auto;
    left: auto;
    -webkit-transform: none;
    transform: none;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 20px 60px;
  }

  .c-mainVisual__interview__heading {
    margin-bottom: 20px;
  }

  /* 本文中に <br> でPC版向けの改行が入っており、16pxだとその1行ずつが
     コンテナ幅(335px)に収まらず、さらに内部で折り返って短い孤立行が
     できていたため、各行が収まるサイズまで縮小する */
  .c-mainVisual__interview__title {
    font-size: 13px;
    line-height: 1.7;
  }

  /* キャッチコピーと会社名の間の余白は、<br>への margin/::after では
     ブラウザが余白を反映しないため、JS（single-customers.php側）で
     会社名以降をspanで囲んで margin-top を付与している */
  .c-mainVisual__interview__title .u-titleGap {
    display: block;
    margin-top: 14px;
  }

  .c-mainVisual__interview__read {
    font-size: 13px;
    margin-bottom: 24px;
  }

  /* プロフィール（企業ロゴ・企業名・説明文）エリア：PC版はdisplay:flexの
     横並びで、.p-profile__textはwidth:0+flex-grow:1で残り幅を確保する
     設計。モバイル幅では画像・企業名側の余白(padding:60px 80px や
     margin-right:130px等)だけで幅を使い切ってしまい、説明文の実質幅が
     0pxになって1文字ずつ縦に折り返る不具合になっていたため、
     縦積みレイアウトに変更する */
  .p-profile {
    display: block;
    padding: 30px 20px;
    box-sizing: border-box;
    text-align: center;
  }

  .p-profile__img {
    margin: 0 auto 16px;
  }

  .p-profile__detail,
  .p-profile--alignCtr .p-profile__detail {
    margin: 0 0 16px;
  }

  /* 社名がPC用の24pxのままで、部署名(16px)より大きく目立ちすぎていたため縮小 */
  .p-profile__company__name {
    font-size: 18px;
  }

  .p-profile__text {
    width: auto;
    flex-grow: 0;
    text-align: left;
  }

  /* Facebookの「いいね」iframe（SNSシェアの1番目）が意図した高さ(21px)より
     大きく膨張し、アイコン欄全体が縦に間延びして見えていたため固定する */
  .sns__list__item:first-child {
    height: 21px;
    overflow: hidden;
  }

  /* 本文コンテナ群：min-width 995px を解除 */
  .sns {
    min-width: 0;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  /* .interviewIntroduce__text / .p-interviewArticleVertical__text（外側）と
     その内側の __text__detail が、どちらも左右20pxのpaddingを持っていて
     合計40pxになり、他のテキストエリア（20px）より余白が広く見えていた。
     外側のpaddingは0にし、内側の __text__detail 側の20pxだけに統一する */
  .interviewIntroduce__text,
  .p-interviewArticleVertical__text {
    min-width: 0;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .interviewIntroduce__text__detail {
    padding: 24px 20px;
  }

  /* .p-interviewArticleVertical__text__detail の padding:80px（PC用）が
     モバイルでも残っており、実質幅が135pxまで狭まって見出し・本文が
     数文字ごとに折り返る不具合になっていたため縮小する */
  .p-interviewArticleVertical__text__detail {
    padding: 24px 20px;
  }

  .p-interviewArticleVertical__text__detail__heading,
  .p-interviewArticleVertical__text h2 {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* 記事の2カラム（テキスト60%＋画像）を縦積みに */
  .c-interviewArticle {
    display: block;
  }

  .c-interviewArticle__text {
    width: 100%;
    margin-top: 24px;
    box-sizing: border-box;
    padding: 24px 20px;
  }

  /* 見出し(h2)がPC用の26pxのまま残っていたため、他の見出しと揃える */
  .c-interviewArticle__text h2,
  .c-interviewArticle__text__heading {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
  }

  /* 画像はPC版の2カラム用に width:45% + margin-left:-5% が指定されており、
     縦積みにしてもそのまま残ってしまい、小さく左に寄って表示されていたため
     他ページと同様に幅いっぱいに表示する。上下のmarginが0のままテキストと
     隙間なく接していたので、他のテキストエリアの余白(20px)と揃える */
  .c-interviewArticle__img {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .c-interviewArticle--left .c-interviewArticle__img {
    margin: 20px auto;
  }

  /* ページ下部のお問い合わせ誘導ブロック：min-width 995px を解除。
     内側の .contact__text__detail 側に20pxのpaddingがあるため、
     ここは0にして他のテキストエリアと余白を揃える */
  .contact__text {
    min-width: 0;
    max-width: 100%;
    padding: 0;
  }

  .contact__text__detail {
    padding: 24px 20px;
  }

  .contact__text__detail__heading {
    font-size: 18px;
    line-height: 1.6;
  }

  /* お問い合わせ誘導エリア(.contact)のPC用margin-bottom:100pxがそのまま
     残っており、直後の「その他の導入実績はこちら」ボタンとの間が
     過大な余白になっていたため縮小する */
  .l-interview .contact {
    margin-bottom: 30px;
  }

  /* ---------- 導入事例一覧（/info/customers/） ---------- */
  /* 3カラムのカードを、トップページの導入事例と同様に
     1カラム・横幅いっぱいの縦並びに変更 */
  .p-casestudy {
    max-width: 100%;
    padding: 0 20px;
  }

  .p-casestudy__row {
    display: block;
  }

  .p-casestudy__content {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }

  /* 最下部のロゴ一覧はモバイルでは非表示 */
  .p-logo_list {
    display: none;
  }

  /* ページ番号タップの遷移はやめ、無限スクロール
     （archive-customers.php のJS）に置き換えるため非表示。
     ～ セレクタで導入事例一覧のページネーションだけに限定
     （他のアーカイブページのページネーションには影響しない） */
  .p-casestudy ~ .pagenation__wrap {
    display: none;
  }

  /* ---------- お役立ち資料（/info/download/） ---------- */
  /* 3カラムのeBookカードを、セミナー一覧と同様に
     1カラム・横幅いっぱいの縦並びに変更 */
  .p-download {
    max-width: 100%;
    padding: 0 20px;
  }

  .p-download__row {
    display: block;
  }

  .p-download__content {
    float: none;
    width: 100%;
    margin-right: 0;
    margin-bottom: 30px;
  }

  /* ---------- ニュース一覧（/news/） ---------- */
  /* padding:80px で本文が175px幅に圧迫され、さらに日付固定130pxで
     タイトルが45px幅（縦書き状態）になっていたため、
     余白を縮小し「日付上・タイトル下」の縦積みに変更 */
  .p-news {
    padding: 30px 20px;
  }

  .p-news__block + .p-news__block {
    margin-top: 50px;
  }

  .p-news__date {
    width: 100%;
    float: none;
    margin-bottom: 2px;
  }

  .p-news__title {
    width: 100%;
    float: none;
  }

  /* 「プレスリリース」見出しと「プレスリリース一覧を見る」リンクは
     同じ<h2>内でリンク側がfloat:rightになっている。「お知らせ」の方は
     文字数が少なく収まるが、「プレスリリース」は文字数が多く画面幅で
     収まりきらず、リンクだけ次の行に落ちて崩れて見えていた。
     floatではなくflexboxにして、両方が同じ行に収まるようにする */
  .p-news__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 16px;
  }

  .p-news__more {
    float: none;
    flex-shrink: 0;
    font-size: 12px;
  }

  /* ---------- ページ共通見出し（c-lpHeading） ----------
     news / blog / download / faq / seminar 系（一覧・詳細・taxonomy）と
     プラン・料金ページで共通利用されているブロック。ここを直すと
     該当する全ページの見出しサイズが揃って調整される */
  /* min-height:200px の解除で見出し下の余白も失われたため、
     padding-bottom で下側の余白を補う */
  .c-lpHeading {
    padding-top: 40px;
    padding-bottom: 30px;
    min-height: 0;
  }

  .c-lpHeading__title {
    font-size: 26px;
  }

  .c-lpHeading__subTitle {
    font-size: 14px;
    margin-top: 10px;
  }

  .c-lpHeading__comment {
    margin-top: 14px;
    margin-bottom: 30px;
    font-size: 13px;
    line-height: 1.8;
  }

  /* ---------- サービス利用規約・プライバシーポリシー・情報セキュリティ方針 ---------- */
  /* 本文が16pxのままでスマホでは大きい印象だったため、
     ブログ詳細ページの本文(.p-blog__detail__content p: 14px)に合わせて縮小 */
  .c-terms__title {
    font-size: 14px;
  }

  .c-terms__text {
    font-size: 14px;
  }

  .c-lpHeading__notice {
    font-size: 13px;
    padding-top: 24px;
    padding-bottom: 30px;
    line-height: 1.7;
  }

  .c-lpHeading--company {
    min-height: 0;
    padding-top: 40px;
    font-size: 20px;
    margin-bottom: 30px;
  }

  .c-lpHeading--pt150 {
    padding-top: 40px;
  }

  /* ---------- セミナー詳細ページ（/seminar/details/xxx） ---------- */
  /* コンテナの左右padding(100px)で本文幅が190px程度に圧迫されるため縮小 */
  .p-seminar.l-seminar {
    padding: 30px 20px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .p-seminar__heading__title {
    font-size: 20px;
    line-height: 1.5;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  /* 「開催日時」(60%)と「申し込みボタン」(40%)の横並びで、
     ボタンが極端に狭くなるため縦積みに変更 */
  .p-seminar__apply--detail {
    display: block;
    width: 100%;
  }

  .p-seminar__apply--btn {
    width: 100%;
    float: none;
    margin-top: 20px;
  }

  .p-seminar__apply--btn a {
    display: block;
    float: none;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .p-seminar__detail__content {
    font-size: 15px;
  }

  .p-seminar__detail__content h1 {
    font-size: 19px;
  }

  /* 記事下の「このセミナーに申し込む」ブロック */
  .p-seminar__detail--apply {
    padding: 30px 20px;
  }

  /* SNSシェアボタン：float:left（高さの違うウィジェットが混在）で
     縦の位置が不揃いになっていたため、flexboxで中央揃え・折り返しに */
  .p-seminar__detail--apply__sns ul {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .p-seminar__detail--apply__sns li {
    float: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Facebookの「いいね」iframeが、ウィジェット読み込み状況によって
     意図した高さ(21px)より大きく膨張し、行全体の高さを崩すことがある
     ため、高さを固定してクリップする */
  .p-seminar__detail--apply__sns .p-list__sns--facebook {
    height: 21px;
    overflow: hidden;
  }

  /* 記事下の「募集中のセミナー」セクション */
  .p-seminar__detail--recruitment {
    margin-top: 40px;
    padding-bottom: 40px;
  }

  .p-seminar__detail--recruitment .l-static {
    padding: 40px 20px 20px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .p-seminar__recruitment--head {
    font-size: 22px;
  }

  .p-seminar__recruitment--head02 {
    font-size: 16px;
    padding-bottom: 20px;
  }

  /* 「現在募集中のセミナー」カード：トップページのセミナー表示と
     同じ左右の余白（20px）を持たせる。カード自体（.p-seminar__content）
     は既にトップページと共通のクラスのため見た目は揃っている */
  .p-seminar__detail--recruitment .slick-slider {
    padding: 0 20px 20px;
    box-sizing: border-box;
  }

  /* ---------- 機能ページ（/info/function/） ---------- */
  /* このページだけ .l-static のラップが外れているため、見出しに
     直接左右の余白を持たせる（他ページの.c-lpHeadingには影響しない） */
  .c-lpHeading:has(+ .p-function) {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    box-sizing: border-box;
  }

  .c-lpHeading__notice .u-jpPhrase {
    display: inline-block;
  }

  /* 「充実の機能で...」見出し：フォント縮小・左右余白・改行位置調整
     .c-function__List h2 (クラス+要素) の詳細度に確実に勝つよう important */
  .p-function__listHead {
    font-size: 22px !important;
    padding: 0 20px 30px !important;
    box-sizing: border-box;
    line-height: 1.6;
  }

  .p-function__listHead .u-jpPhrase {
    display: inline-block;
  }

  .c-function__List {
    padding-top: 40px;
  }

  /* 機能バッジ：4列グリッドを、アイコン左・タイトル＋説明を右に
     まとめた「横長カードの縦積み」に変更 */
  .p-topFunction {
    display: block;
    max-width: 100%;
    margin: 0 auto 20px;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .p-topFunction__item {
    display: grid;
    grid-template-columns: 50px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    width: 100%;
    min-height: 0;
    padding: 16px;
    margin-bottom: 12px;
    text-align: left;
    box-sizing: border-box;
    border: 1px solid #eee;
  }

  .p-topFunction__item__img {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: start;
    width: 50px;
    height: 50px;
    margin-bottom: 0;
  }

  .p-topFunction__item__ttl {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    padding-bottom: 6px;
  }

  .p-topFunction__item__text {
    grid-column: 2;
    grid-row: 2;
    font-size: 12px;
  }

  /* Domo・なずき連携セクション：インラインstyleの固定幅/高さ2カラムを
     打ち消して縦積み・可変高さにする（!importantでインラインstyleに勝つ） */
  .p-function__partner {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 20px;
  }

  .p-function__partner__inner {
    /* width:100% + margin:0 20px を両方指定すると、右側が20pxはみ出て
       横スクロールが発生していたため width は auto にし、
       margin分を差し引いた幅をブラウザに計算させる */
    width: auto !important;
    height: auto !important;
    margin: 0 20px !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  .p-function__partner__row {
    display: block !important;
    padding: 20px !important;
    box-sizing: border-box;
  }

  .p-function__partner__img {
    text-align: center;
    margin-bottom: 16px;
  }

  .p-function__partner__img img {
    max-width: 160px !important;
    width: 100% !important;
    height: auto !important;
  }

  .p-function__partner__text {
    margin: 0 !important;
    font-size: 13px;
  }

  .p-function__partner__heading {
    font-size: 16px !important;
  }
  /* .p-function 配下の高詳細度ルール（幅496px固定・float・
     ネガティブマージン等）を同等以上の詳細度で打ち消す */
  .p-function .l-topContainer--intro {
    /* 左右の余白は外側 .p-topIntro--0N の padding(20px)側だけで作る。
       ここでも左右paddingを入れると合計40pxになり余白が広くなりすぎるため0にする */
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
  }

  .p-function .p-topIntro--left .p-topIntro__img,
  .p-function .p-topIntro--left.p-topIntro--01 .p-topIntro__img {
    margin-left: 0;
  }

  .p-function .p-topIntro--left .p-topIntro__imgWrap img,
  .p-function .p-topIntro--right .p-topIntro__imgWrap img {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  .p-function .p-topIntro--right .p-topIntro__message,
  .p-function .p-topIntro--right.p-topIntro--02 .p-topIntro__message,
  .p-function .p-topIntro--03 .p-topIntro__message,
  .p-function .p-topIntro--04 .p-topIntro__message,
  .p-function .p-topIntro--05 .p-topIntro__message,
  .p-function .p-topIntro--06 .p-topIntro__message {
    width: 100%;
    float: none;
    margin-top: 0;
    padding-top: 0;
  }

  /* 画像＋説明が交互に並ぶ6セクション(--01〜--06)は、PC版ではセクションごとに
     外側paddingが0px/40px/95px/130pxとバラバラで、画像とテキストの間隔も
     0px〜40pxと不規則だった。ここで外側セクションのpaddingを全セクション統一し、
     画像とテキストの間隔はflexのgapだけで一元管理して規則的な余白にする */
  .p-function .p-topIntro--01,
  .p-function .p-topIntro--02,
  .p-function .p-topIntro--03,
  .p-function .p-topIntro--04,
  .p-function .p-topIntro--05,
  .p-function .p-topIntro--06 {
    height: auto !important;
    padding: 30px 20px !important;
    box-sizing: border-box;
  }

  .p-function .p-topIntro__inner {
    /* --02・--04 だけ display:block（PC版の独自レイアウト）が別途指定されており、
       flexのgapが効かず画像とテキストの間隔が0pxになっていたため flex を強制する */
    display: flex !important;
    flex-direction: column;
    gap: 20px;
  }

  /* PC版は --left/--right でHTML内の画像・テキストの並び順（DOM順）が
     互い違いになっており、モバイルではそのDOM順のまま縦積みされるため
     カードごとに「画像→テキスト」「テキスト→画像」がバラバラだった。
     flexのorderで全カード「テキスト→画像」の順に統一する */
  .p-function .p-topIntro__message {
    order: 1;
  }

  .p-function .p-topIntro__imgWrap {
    order: 2;
  }

  /* 並び順をorderで統一したため、PC版由来の margin-top（画像の次に
     テキストが来る前提の余白）が残っているとカードごとに余白が
     バラつく。画像・テキスト間の余白は flex の gap だけに一元化する */
  .p-function .p-topIntro__message {
    margin-top: 0;
    padding-top: 0;
    width: 100%;
    float: none;
  }

  .p-function .p-topIntro__imgWrap {
    margin-top: 0;
  }

  /* 本文中のPC版向け強制改行（<br>）をモバイルでは無効化し、
     画面幅に応じた自然な改行にする（PC表示には影響しないよう br 自体は残す）。
     特定ページに限定せず、どのページでも使える汎用クラスにする */
  .u-mobileHide {
    display: none;
  }

  .p-function .p-topIntro__img {
    margin: 0 auto !important;
  }

  .p-function .p-topIntro__title {
    font-size: 18px;
  }

  /* ---------- プラン・料金ページ（/info/plan/） ---------- */
  /* 導入事例カードの引き上げ(-130px)とボタン下余白(100px)を解除 */
  .p-plan .p-interviewLink {
    margin: 20px auto 0;
  }

  /* .l-contents の下部余白(40px)がこの下にすでにあるため、
     ここでは padding-bottom を追加しない（加算されて過大になる） */
  .p-plan .p-interviewLink + .c-btn__more {
    margin-top: 20px;
    padding-bottom: 0;
  }

  /* 白背景エリア（.p-interviewLink-wrap）自体をボタンの下に広げ、
     ボタン周辺に余裕のある見た目にする */
  .p-interviewLink-wrap {
    padding-bottom: 50px;
  }

  /* 「月額16.5万円から」エリア：#plan専用ID指定（height:320px,
     padding-top:80px）を上書きし、高さ固定を解除 */
  .p-plan .c-subVisual--caseStudies#plan {
    height: auto;
    padding: 40px 20px;
    box-sizing: border-box;
  }

  /* 「日本を代表する大手企業～」エリア：ページ専用指定
     （height:260px, padding-top:140px）を上書き */
  .p-plan .c-subVisual--caseStudies {
    height: auto;
    padding: 40px 20px;
    box-sizing: border-box;
  }

  /* 「PR Analyzerの活用事例」を含むこのエリア（#case）は、テキストの下に
     40pxの余白があり、背景画像だけの余白部分が長く見えていたため、
     #caseだけ下余白を縮小する（#planのCTAボタン周りの余白には影響させない） */
  .p-plan .c-subVisual--caseStudies#case {
    padding-bottom: 15px;
  }

  /* 料金テキスト・事例見出しテキスト：ページ専用の32px指定
     （#case用のID付きセレクタ含む）を打ち消し、他ページの
     c-subVisual--caseStudies p と揃える */
  .p-plan .c-subVisual--caseStudies p,
  .p-plan .c-subVisual p,
  .p-plan #case.c-subVisual p {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.8;
    text-align: left;
    padding-top: 0;
  }

  /* 「月額16.5万円から」は中央揃えにしたいという要望のため、
     上の左揃えルールより詳細度の高いセレクタで#planに限定して上書き */
  .p-plan .c-subVisual--caseStudies#plan p {
    text-align: center;
  }

  .p-plan .c-topSubTitle {
    font-size: 18px;
  }

  /* 「日本を代表する大手企業～」エリア（#case）の見た目崩れの修正。
     u-jpPhraseで複数spanに分割した見出しに、PC用の装飾用下線
     （各span::beforeで生成される30px幅の線）がspanごとに
     表示されてしまい、テキストの間にダッシュのような線が
     散らばって見えていたため非表示にする */
  .p-plan #case.c-subVisual h2 .u-jpPhrase::before {
    content: none;
  }

  /* 見出し(h2)と直後の文章(p)が余白なく隙間なくくっついていたのと、
     見出しは中央揃えなのに文章だけ左揃えで不揃いだったため、
     #caseに限定して揃える */
  .p-plan #case.c-subVisual p {
    text-align: center;
    margin-top: 10px;
  }

  .p-plan .c-btn__more {
    padding: 0 20px;
  }

  /* 「PR Analyzerの活用事例」の直後：#caseセクション自身のpadding-bottom(40px)
     ＋.p-interviewLinkのmargin-top(20px)＋各カード共通のpadding-top(28px)が
     積み重なり、合計88pxと過大な余白になっていた。1番目のカードは前の
     カードと区切る必要がないため、その分の余白を無くして詰める */
  .p-plan .p-interviewLink__item:first-child {
    padding-top: 0;
  }

  /* .p-plan__list { width: 1080px } の固定幅と2カラムを解除して縦積みに */
  .p-plan__list {
    width: 100%;
    max-width: 100%;
    margin: 20px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .p-plan__item {
    width: 100%;
    float: none;
    /* 「PLAN」ラベルは.p-plan__item-numの::beforeでtop:-25pxの位置に
       表示されるため、上のpaddingが30pxのままだと数字円の直上5pxしか
       余白がなく詰まって見える。48pxにして余白を確保する */
    padding: 48px 20px 40px;
    box-sizing: border-box;
  }

  .p-plan__item:nth-child(2n+1) {
    margin-right: 0;
  }

  /* タイトルが最長15文字あり、24px(PC用)のままではカード幅内で
     折り返してしまうため、1行に収まるサイズに縮小 */
  .p-plan__item-ttl {
    font-size: 18px;
  }

  /* ---------- 運営会社ページ（/info/company/） ---------- */
  /* ラベル固定幅304pxの2カラムで値が潰れるため縦積みに変更 */
  .p-company {
    line-height: 1.8;
  }

  .p-company__row {
    display: block;
    padding-bottom: 12px;
  }

  .p-company__row__title {
    width: 100%;
    margin-bottom: 2px;
  }

  .p-company__row__detail {
    width: 100%;
  }

  /* ---------- お問い合わせフォーム（/contact/ ほか） ---------- */
  /* .p-contact { width: 865px } の固定幅を解除し、
     「ラベル横・入力欄横並び」を「ラベル上・入力欄下」の縦積みに変更 */
  .p-contact {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .p-contactItem {
    display: block;
    line-height: 1.8;
    padding: 12px 0;
  }

  .p-contactItem__title {
    width: 100%;
    padding-right: 0;
    margin-bottom: 6px;
    font-weight: bold;
  }

  .p-contactItem__detail {
    width: 100%;
    display: block;
  }

  .p-contactItem__input {
    width: 100%;
    max-width: 100%;
  }

  .p-contactItem__explanation {
    padding-left: 0;
  }

  .p-contact input[type="text"],
  .p-contact input[type="email"],
  .p-contact input[type="tel"],
  .p-contact select,
  .p-contact textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* テキスト入力欄はブラウザ標準の高さ(18px)のままだったため、
     「お問い合わせ種別」セレクト(40px)と同じ高さ・装飾に統一
     （お問い合わせ内容の textarea は除く） */
  .p-contact input[type="text"],
  .p-contact input[type="email"],
  .p-contact input[type="tel"] {
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d1d5d8;
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
  }

  /* ---------- フッター ---------- */
  .l-lpFooter,
  .l-lpFooter__fixed {
    min-width: 0;
  }

  /* 下部パディングはPC/旧仕様で追従バーに隠れないための確保分。
     スマホでは追従バー自体を非表示にするため縮小 */
  .l-lpFooter {
    padding: 30px 20px 40px;
    position: static;
  }

  /* PR Analyzer ロゴと © BILCOM Inc. をフッターの最下部に表示する
     （flexのorderで並び替え：ナビ→法的リンク→ロゴ→コピーライト） */
  .l-lpFooter__row {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .l-lpFooter__row .l-lpHeader__links {
    order: 1;
  }

  .l-lpFooter__row .l-lpFooter__links {
    order: 2;
  }

  .l-lpFooter__title {
    order: 3;
    margin-top: 28px;
  }

  .l-lpFooter__copyright {
    order: 4;
    top: 0;
    margin-top: 10px;
  }

  .l-lpFooter .l-lpHeader__links {
    display: block;
    width: 100%;
    top: 0;
    padding-bottom: 0;
    margin-top: 0;
  }

  .l-lpFooter .l-lpHeader__links .l-lpHeader__links__item {
    float: none;
    display: block;
    padding: 8px 0;
  }

  .l-lpFooter .l-lpHeader__links__item:not(:last-child):after {
    content: none;
  }

  /* 「お役立ち情報」の子メニュー（お役立ち資料・お役立ちブログ等）は
     PC版では:hoverで表示される仕組みのため、タップ操作のスマホでは
     開けなかった。ハンバーガーメニュー側と同様に常時展開表示にする */
  .l-lpFooter .l-lpHeader__links .l-lpHeader__links__Child {
    display: block;
    position: static;
    padding: 4px 0;
  }

  /* PC版はこの子メニュー自体に固定幅138pxが指定されており、常時展開後も
     左寄りの狭い箱のまま残っていたため、リンク側をcenterにしても
     箱自体が中央に来ず左に寄って見えていた。幅いっぱいに広げる */
  .l-lpFooter .l-lpHeader__links .l-lpHeader__links__item .l-lpHeader__links__Child {
    width: 100%;
  }

  /* PC版のドロップダウンカード（白背景・角丸・影）が、常時展開にしたことで
     周りのメニューから浮いて見えていたため、他のフッターメニューと
     同じ見た目（背景なし）に揃える */
  .l-lpFooter .l-lpHeader__links .l-lpHeader__links__Child ul {
    border: none;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
  }

  .l-lpFooter .l-lpHeader__links .l-lpHeader__links__Child ul li {
    padding: 6px 0;
    border-bottom: none;
    display: block;
  }

  /* リンクはPC用にdisplay:flexで幅いっぱい・左寄せだったため、
     他のフッターメニューと同じ中央揃えのテキストにする */
  .l-lpFooter .l-lpHeader__links .l-lpHeader__links__hasChild .l-lpHeader__links__Child ul li a {
    display: block;
    width: auto;
    padding: 0;
    text-align: center;
  }

  /* 常時展開にしたため、開閉を示す矢印アイコンは不要 */
  .l-lpFooter .l-lpHeader__links .l-lpHeader__links__hasChild::before {
    display: none;
  }

  /* 「お役立ち情報」配下（note・お役立ち資料・お役立ちブログ）のホバーは
     PC版のドロップダウン用スタイル（灰色背景でハイライト）のままだったため、
     他のフッターメニュー項目と同じ「opacity: 0.6で薄くなる」動きに揃える */
  .l-lpFooter .l-lpHeader__links .l-lpHeader__links__hasChild ul li:hover {
    background: transparent;
  }

  .l-lpFooter .l-lpHeader__links .l-lpHeader__links__hasChild ul li:hover a {
    opacity: 0.6;
  }

  .l-lpFooter .l-lpFooter__links {
    display: block;
    width: 100%;
    top: 0;
    margin-top: 10px;
  }

  .l-lpFooter .l-lpFooter__links__item {
    float: none;
    display: block;
    padding: 6px 0;
  }

  .l-lpFooter .l-lpFooter__links__item:not(:last-child):after {
    content: none;
  }

  /* 画面下部に追従する「お問い合わせ・資料請求」バーは、
     スマホでは画面を圧迫するため非表示にする */
  .l-lpFooter__fixed {
    display: none;
  }

  /* ---------- /info/company/ の RECRUIT 導線（p-recruitBox） ---------- */
  /* PC版は画像を右にfloatさせ、キャプションをposition:absoluteで
     重ねる横並びレイアウト。スマホ幅では画像が縮小されて枠(figure)の
     高さがごく小さくなり、absolute配置のキャプション文字が枠から
     あふれて下のセクションと重なってしまうため、画像を上・テキストを
     下に積む縦積みレイアウトに変更する */
  .p-recruitBox {
    margin-top: 40px;
  }

  .p-recruitBox__img {
    float: none;
    width: 100%;
  }

  .p-recruitBox__caption {
    position: static;
    top: auto;
    bottom: auto;
    display: block;
    margin-top: 20px;
  }

  .p-recruitBox__title {
    font-size: 26px;
    margin-top: 0;
  }

  .p-recruitBox__text {
    font-size: 14px;
    margin-top: 10px;
  }

  .p-recruitBox__btn {
    width: 100%;
    max-width: 257px;
    margin: 20px auto 0;
    text-align: center;
  }
}

/* 幅の狭い端末（iPhone SE 等）ではヘッダー内の
   ロゴ・CTA・ハンバーガーが収まるようさらに縮小 */
@media screen and (max-width: 359px) {
  .l-lpHeader {
    padding: 0 12px;
  }

  .l-lpHeader__title svg {
    width: 84px;
    height: 16px;
  }

  .l-lpHeader__spCta {
    font-size: 11px;
    padding: 8px 10px;
  }

  .l-lpHeader__spNavBtn {
    margin-left: 10px;
  }
}

/* PC表示（769px以上）専用：ファーストビューの動画背景を
   ウィンドウの縦横比に関わらず必ず画面いっぱいに表示する。
   元CSS（screen.css）は高さ指定がなく、動画の16:9比率のまま
   幅100%で自動計算されるため、ウィンドウが16:9より縦長だと
   下の白背景セクションが見えてしまう。スマホ表示には影響しない。 */
@media screen and (min-width: 769px) {
  .c-mainVisual__video {
    height: 100vh;
    object-fit: cover;
  }
}