@charset "UTF-8";
/*
 Theme Name:   Lightning Pro Child
 Template:     lightning-pro
 Description:  S-Wing様 サイトリニューアル用子テーマ
 Version:      1.0.0
*/

/* =========================================
   トップページ専用：セクション・リセットスコープ
   (Lightning Proの干渉を強力に遮断)
========================================= */

/* .home 配下の .p-sw-section クラス内にある見出しと疑似要素をリセット */
.home .p-sw-section h1,
.home .p-sw-section h2,
.home .p-sw-section h3,
.home .p-sw-section h4,
.home .p-sw-section h5,
.home .p-sw-section h6,
.home .p-sw-section h1::before, .home .p-sw-section h1::after,
.home .p-sw-section h2::before, .home .p-sw-section h2::after,
.home .p-sw-section h3::before, .home .p-sw-section h3::after {
    all: revert;              /* ブラウザ標準のデザインに差し戻す */
    box-sizing: border-box;   /* 余白計算を安定させる */
    content: none !important; /* テーマ特有の装飾アイコンなどを消去 */
    margin: 0;
    padding: 3px 0 0;
    border: none;
    background: none;
}

/* 改めて共通のフォント設定を適用 */
.home .p-sw-section {
    line-height: 1.6;
    color: #333; /* 基本文字色 */
}

/* 7種類のフォントサイズ（!importantでテーマの指定を確実に上書き） */
:root {
  --fz-xxxl: 64px;
  --fz-xxl:  56px;
  --fz-xl:   44px;
  --fz-l:    30px;
  --fz-m:    24px;
  --fz-s:    20px;
  --fz-xs:   16px;
}

@media (max-width: 768px) {
  :root {
    --fz-xxxl: 40px;
    --fz-xxl:  32px;
    --fz-xl:   28px;
    --fz-l:    22px;
    --fz-m:    18px;
    --fz-s:    16px;
    --fz-xs:   14px;
  }
}

.fz-xxxl { font-size: var(--fz-xxxl) !important; }
.fz-xxl  { font-size: var(--fz-xxl) !important; }
.fz-xl   { font-size: var(--fz-xl) !important; }
.fz-l    { font-size: var(--fz-l) !important; }
.fz-m    { font-size: var(--fz-m) !important; }
.fz-s    { font-size: var(--fz-s) !important; }
.fz-xs   { font-size: var(--fz-xs) !important; }

.fw-bold { font-weight: bold !important; }
.text-center { text-align: center !important; }

/* SEO用隠しテキスト（前述と同様） */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pc {
  display: inline;
}
.sp {
  display: none;
}

/* スマホ画面（例：768px以下）のみ表示 */
@media screen and (max-width: 768px) {
  .pc {
    display: none;
  }
  .sp {
    display: inline;
  }
}

.bg-white {
  background-color: #fff!important;
}

/* =========================================
   汎用：リスト
========================================= */
/* リスト全体のデフォルトスタイルをリセット */
.p-custom-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 各リスト項目の設定 */
.p-custom-list li {
  position: relative;
  padding-left: 1.4em; /* アイコンとテキストの間の余白を確保 */
  margin-bottom: 10px;
  line-height: 1.6;
}

/* ◆マーカーの設定 */
.p-custom-list li::before {
  content: "◆";
  color: #4e95cf; /* ご指定のカラーコード */
  position: absolute;
  left: 0;
  top: 0; /* テキストの1行目の高さに合わせる */
}

.p-custom-list.orange-arrow li::before {
  content: "◆";
  color: #4e95cf; /* ご指定のカラーコード */
  position: absolute;
  left: 0;
  top: 0; /* テキストの1行目の高さに合わせる */
}

/* 別パターン */
.p-custom-list.orange-arrow > li {
  position: relative;
  padding-left: 1.4em; /* アイコンとテキストの間の余白を確保 */
  margin-bottom: 14px;
  line-height: 1.3;
}
.p-custom-list.orange-arrow > li::before {
  position: absolute;
  left: 0;
  top: 45%; /* テキストの1行目の高さに合わせる */
  transform: translateY(-50%);
  width: 0px;
  height: 0px;
  border: 0.5em solid transparent;
  border-left: 0.7em solid #ea7b2f;
  content: "";
}

/* =========================================
   共通コンポーネント：ボタン
========================================= */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  max-width: 560px; /* 最大幅 */
  height: 64px;     /* ボタンの高さ */
  padding: 7px 50px 0 30px; /* 右側にアイコン用の余白を確保 */
  border-radius: 32px;    /* 高事の半分の値で完全なカプセル型に */
  font-size: 22px;
  font-weight: bold;
  text-decoration: none !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  color: #fff !important;
}

/* 右側の矢印アイコン (CSSで描画) */
.c-btn::after {
  content: "";
  position: absolute;
  right: 25px;
  top: 52%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
}

/* ホバー時の動き：少し浮き上がり、影を強くする */
.c-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  opacity: 0.9;
}

/* 配色：オレンジ（製品デモ等） */
.c-btn--orange {
  background: #ee7320; /* PDFのオレンジ色に調整 */
}

/* 配色：ネイビー（相談・お問い合わせ等） */
.c-btn--navy {
  background: #1a3b6c; /* PDFの濃紺 */
}

.superscript {
  vertical-align: super; /* 上付き指定 */
  font-size: 0.6em;       /* 文字を小さく */
}
/* supタグ自体にスタイルを適用する例 */
sup.custom-sup {
  vertical-align: super;
  font-size: 0.5em;
  line-height: 0;        /* 行間への影響を防ぐ */
}

/* =========================================
   汎用：差し込み用CTAボタン
========================================= */
.c-cta-insert {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;    /* 上部余白 30px */
  margin-bottom: 60px; /* 下部余白 60px */
  padding: 0 20px;     /* スマホ等での画面端への接触を防ぐ */
}

/* スマホ時のボタン調整（そのまま） */
@media (max-width: 992px) {
  .c-cta-insert {
    flex-direction: column;
  }

  .c-cta-insert .c-btn {
    width: 100%;
    max-width: 100%;
    font-size: 18px;
  }
}


/* =========================================
   ヘッダー（Lightning Pro デフォルト上書き）
========================================= */

/* --- ヘッダーの上下余白調整 --- */
/* .siteHeadContainer または .navbar-header に対して余白を設定します。
   ※数値（15pxなど）はデザインに合わせて適宜調整してください。 */
.siteHeader .siteHeadContainer {
    padding-top: 0;
    padding-bottom: 0;
}

/* --- ヘッダー内の要素を垂直中央揃えにする --- */
.siteHeader .navbar-header {
    display: flex !important;
    align-items: center !important; /* 垂直方向（縦）の中央揃え */
    justify-content: space-between !important; /* ロゴを左、ボタンを右に配置 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* ロゴのデフォルト下余白を消す */
.siteHeader .siteHeader_logo {
    margin-bottom: 0 !important;
}

/* ボタンエリアのデフォルト上余白などを消す */
.siteHeader .siteHeader_sub {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

/* --- お問い合わせボタンのデザイン変更 --- */
.siteHeader .siteHeader_sub .contact_btn .btn.btn-primary {
    background-color: #f47926 !important; /* 背景色：オレンジ */
    border-color: #f47926 !important;     /* 枠線も同色に */
    color: #ffffff !important;            /* 文字色：白抜き */
    border-radius: 50px !important;       /* 角丸（ピル型） */
    padding: 10px 30px !important;        /* ボタン内の余白（上下 左右） */
    font-weight: bold !important;         /* 文字を太く */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; /* 軽く影をつけて少し浮かせる（不要なら none に変更） */
    transition: opacity 0.3s ease;
}

/* ホバー（マウスオーバー）時の挙動 */
.siteHeader .siteHeader_sub .contact_btn .btn.btn-primary:hover {
    background-color: #f47926 !important;
    opacity: 0.8 !important; /* 少し透かす */
    color: #ffffff !important;
}

/* アイコンとテキストの間の余白を少し調整 */
.siteHeader .siteHeader_sub .contact_btn .btn.btn-primary i,
.veu_contact .contact_bt_txt i,
.mobile-fix-nav .contact_bt_txt i {
    display: none;
/*    margin-right: 8px;*/
}

/* =========================================
   ③ ヒーローエリア全体 (Section 03)
========================================= */

/* --- 画像とメインコピーの親要素 --- */
.home .p-sw-section.p-hero .p-hero__image-wrapper {
    position: relative;
    width: 100%;
}

/* --- 画像コンテナ（PC用設定：デフォルト） --- */
.home .p-sw-section.p-hero .p-hero__images {
    display: flex; /* 横並び */
    width: 100%;
}

/* 各画像の共通設定 */
.home .p-sw-section.p-hero .p-hero__image {
    width: 100%;
    height: auto;
    display: block;
    /* 画像を枠いっぱいに広げつつ、比率を保ってトリミングする設定 */
    object-fit: cover; 
}

/* PC：左側の画像（60%幅 / 比率を指定） */
.home .p-sw-section.p-hero .p-hero__image--left {
    width: 60%;
    aspect-ratio: 16 / 9; /* 例：ここで画像自体の比率を指定します */
}

/* PC：右側の画像（40%幅 / 左と同じ比率にする） */
.home .p-sw-section.p-hero .p-hero__image--right {
    width: 40%;
    aspect-ratio: 16 / 9; 
}

/* --- 画像の上に重なるテキスト（PC用） --- */
.home .p-sw-section.p-hero .p-hero__catch-wrapper {
    position: absolute;
    top: 24%;
    left: 3%;
    transform: translateY(-50%);
    z-index: 20; /* 画像より上に配置 */
    width: 100%;
    max-width: 1200px;
}

/* --- メインキャッチ（H1） --- */
.home .p-sw-section.p-hero .p-hero__main-catch {
    display: block !important;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: bold !important;
    line-height: 1.4em !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    letter-spacing: 0.05em;
    width: 56%;
    color: #1a3b6c !important;

    /* グラデーション */
/*    background: linear-gradient(110deg, #052049 0%, #11315d 50%, #1472f5 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    border: none !important;*/

    /* 縁取り */
    /*text-shadow: 2px 3px 3px rgba(255, 255, 255, 0.2);*/
}

/* 各spanをブロック要素にして改行させ、行間を均等(1.4em)に保つ */
.home .p-sw-section.p-hero .p-hero__main-catch span {
    display: block;
    line-height: 1.1em; 
}

/* 1行目 左寄せ */
.home .p-sw-section.p-hero .p-hero__main-catch .p-hero__main-catch-top {
    text-align: left;
}
/* 2行目 中央 */
.home .p-sw-section.p-hero .p-hero__main-catch .p-hero__main-catch-middle {
    text-align: center;
}

/* 3行目 右寄せ */
.home .p-sw-section.p-hero .p-hero__main-catch .p-hero__main-catch-bottom {
    text-align: right;
}


/* --- 下部のメッセージバー --- */
.home .p-sw-section.p-hero .p-hero__message-bar {
    background: linear-gradient(90deg, #a9beeb 0%, #f0f7ff 100%) !important;
    padding: 30px 20px;
    width: 100%;
    border-top: 1px solid #b1c9e8;
    border-bottom: 1px solid #b1c9e8;
    position: relative;
    z-index: 25; /* 画像の上に被せるため少し高く設定 */
}

.home .p-sw-section.p-hero .p-hero__message-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.home .p-sw-section.p-hero .p-hero__catchphrase {
    text-align: left !important;
    color: #1a3b6c !important;
    margin-bottom: 8px !important;
    line-height: 1.1 !important;
    letter-spacing: 0.02em;
    font-size: 24px;
}

.home .p-sw-section.p-hero .p-hero__sub-text {
    text-align: left !important;
    color: #1a3b6c !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-size: 16px;
}


@media (max-width: 1200px) {
    .home .p-sw-section.p-hero .p-hero__catch-wrapper {
        top: 25%;
    }
    .home .p-sw-section.p-hero .p-hero__main-catch {
        width: 52%;
    }
}
@media (max-width: 1100px) {
    .home .p-sw-section.p-hero .p-hero__catch-wrapper {
        top: 26%;
    }
    .home .p-sw-section.p-hero .p-hero__main-catch {
        width: 51%;
    }
}
@media (max-width: 1000px) {
    .home .p-sw-section.p-hero .p-hero__catch-wrapper {
        top: 27%;
    }
    .home .p-sw-section.p-hero .p-hero__main-catch {
        width: 50%;
    }
}
@media (max-width: 900px) {
    .home .p-sw-section.p-hero .p-hero__catch-wrapper {
        top: 28%;
    }
    .home .p-sw-section.p-hero .p-hero__main-catch {
        width: 49%;
    }
}

/* -----------------------------------------
   スマートフォン・タブレット対応 (max-width: 768px)
----------------------------------------- */
@media (max-width: 768px) {

    .home .p-sw-section.p-hero .p-hero__image-wrapper {
        display: flex;
        flex-direction: column;
        background-color: #fff;
        overflow: hidden; /* はみ出し防止 */
    }

    .home .p-sw-section.p-hero .p-hero__catch-wrapper {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        padding: 40px 20px 0px;
        width: 100%;
        z-index: 30;
    }

    .home .p-sw-section.p-hero .p-hero__main-catch {
        font-size: 36px !important;
        text-align: left !important;
        margin-bottom: -70px !important; /* 画像との重なり */
        line-height: 1.1em!important;
        width: 100%;
    }

    .home .p-sw-section.p-hero .p-hero__main-catch .p-hero__main-catch-top {
        line-height: 1.1em!important;
    }

    .home .p-sw-section.p-hero .p-hero__images {
        padding-top: 0; /* スマホでは不要なら0に */
        height: 230px;
    }

    /* 右側の画像を非表示 */
    .home .p-sw-section.p-hero .p-hero__image--right {
        display: none;
    }

    /* 左側の画像を100%幅にする */
    .home .p-sw-section.p-hero .p-hero__image--left {
        width: 100%;
        aspect-ratio: auto; /* スマホでは元の画像比率、あるいは任意の比率に変更可能 */
    }

    .home .p-sw-section.p-hero .p-hero__message-bar {
        padding: 25px 20px;
        margin-top: 0; /* 下側の重なり */
        z-index: 25;
    }

    /* 以下、テキストの左寄せ設定などはそのまま */
    .home .p-sw-section.p-hero .p-hero__catchphrase,
    .home .p-sw-section.p-hero .p-hero__sub-text {
        text-align: left !important;
    }
}

/* =========================================
   ④ 機能セクション専用
========================================= */
.p-system-bg {
  background-color: #fff;
  padding: 40px 20px;
}

.p-system-bg__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- アイコンリストのレイアウト --- */
.p-system-bg__icon-list {
  display: grid;
  grid-template-columns: repeat(8, 1fr); /* PC: 均等に8列 */
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- 各アイコンのリストアイテム --- */
.p-system-bg__icon-item {
  width: 100%;
}

/* --- リンク要素（縦並びにして全体をクリック可能に） --- */
.p-system-bg__icon-link {
  display: flex;
  flex-direction: column;
  align-items: center;    /* 画像とテキストを中央揃え */
  text-decoration: none;  /* リンクの下線を消す */
  color: #333;            /* テキストの色 */
  transition: transform 0.3s ease, opacity 0.3s ease; /* ホバー時のアニメーション準備 */
}

/* ホバー時の演出（少し浮き上がり、フワッと透ける） */
.p-system-bg__icon-link:hover {
  transform: translateY(-3px);
  opacity: 0.7;
}

/* --- アイコン画像 --- */
.p-system-bg__icon-link img {
  width: 100%;
  aspect-ratio: 1 / 1;    /* 画像部分を完全な正方形に固定 */
  object-fit: contain;
  border-radius: 10px;
  margin-bottom: 8px;     /* 画像とテキストの間の余白 */
}

/* --- アイコン下のテキスト --- */
.p-system-bg__icon-text {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  line-height: 1.3;
  /* 長いテキストが来た場合に改行させるか、1行に収めるかはお好みで */
  word-break: auto-phrase; 
}


/* -----------------------------------------
   レスポンシブ対応
----------------------------------------- */
@media (max-width: 768px) {
  .p-system-bg {
    padding: 60px 15px;
  }

  .p-system-bg__icon-list {
    grid-template-columns: repeat(4, 1fr); /* スマホ: 4列（自動的に2行に） */
    gap: 15px 10px; /* 縦の隙間を15px、横の隙間を10pxに微調整 */
  }

  .p-system-bg__icon-text {
    font-size: 16px; /* スマホではマスが小さくなるので文字も小さく */
  }
}

/* =========================================
   ⑤ トライアングル配置のスタイル調整
========================================= */
.p-results {
  background-color: #f0f7ff;
  padding: 40px 20px 60px;
}

.p-results__metrics {
  display: flex;
  justify-content: center;
  align-items: flex-start; /* 上端を基準にして位置を調整 */
  gap: 20px;
  margin-bottom: 80px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* 各アイテムの基本設定 */
.p-results__item {
  position: relative;
  flex: 0 1 280px; /* 基本の幅 */
  transition: all 0.3s ease;
  
  /* 追加: ボックス内の要素（画像コンテナ）を確実に中央配置する */
  display: flex;
  justify-content: center;
}


/* 中央：最大サイズ */
.p-results__item--center {
  z-index: 2;
  transform: scale(1.1); /* 中央を1.1倍に強調 */
}

/* 左右：一回り小さくして位置を下げる */
.p-results__item--side {
  z-index: 1;
  transform: scale(0.80) translateY(100px); /* 0.85倍に縮小し、60px下げる */
}

/* テキストの重なり設定（前回の設定を継承） */
.p-results__image-container {
  position: relative;
  width: 100%;
  margin-left: 16px;
}

.p-results__bg-img {
  width: 100%;
  height: auto;
  
  /* 追加: 画像をブロック要素にし、文字と同じ扱いで左に寄るのを防ぐ */
  display: block;
  margin: 0 auto;
}

.p-results__overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 1.1;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: #1a3b6c;
}
.p-results__overlay-text.bottom {
  top: 60%;
}
.p-results__overlay-text.left {
  left: 40%;
}
.p-results__overlay-text.right {
  left: 70%;
}

.p-results__label {
  font-weight: bold;
  margin-bottom: 2px !important;
  line-height: 1.1;
}

.p-results__value {
  font-weight: bold;
  margin: 0 !important;
  line-height: 1.1;
}

/* 数字部分のフォントサイズ調整 */
.p-results__item--center .fz-xxl { font-size: 72px; } /* 中央はより大きく */
.p-results__item--side .fz-xl { font-size: 56px; }    /* 左右は控えめに */

/* CTAボタンエリアのレイアウト */
.p-results__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 40px;
}

/* --- 前半の共通スタイル、PC用トライアングル設定は維持 --- */

/* テキスト位置の補助クラス（HTMLに合わせて追加） */
.p-results__overlay-text.right { text-align: right; padding-right: 15%; }
.p-results__overlay-text.left  { text-align: left;  padding-left: 15%; }
.p-results__overlay-text.bottom { top: auto; bottom: 20%; transform: translate(-50%, 0); }

/* -----------------------------------------
   レスポンシブ対応（スマホ・タブレット）
----------------------------------------- */
@media (max-width: 992px) {
  /* 1点目の課題：画像の間隔を狭くする */
  .p-results__metrics {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
  }

  /* トライアングル用の変形をスマホでは解除 */
  .p-results__item--center,
  .p-results__item--side {
    transform: scale(1) translateY(0) !important;
    max-width: 280px; /* 画像が大きすぎないよう制限 */
  }

  /* 2点目の課題：表示順を 中→左→右 に変更 */
  .p-results__item--center {
    order: 1; /* 中央を一番上に */
  }
  .p-results__item--left {
    order: 2; /* 左を二番目に */
  }
  .p-results__item--right {
    order: 3; /* 右を三番目に */
  }

  /* スマホ時のボタン調整 */
  .p-results__cta {
    flex-direction: column;
    gap: 15px;
    padding: 0 20px;
  }
  .c-btn {
    width: 100%;
    max-width: 100%;
    font-size: 18px;
  }
}


/* =========================================
   ⑥ お困りごとセクション
========================================= */
.p-worries {
  background-color: #fff;
  padding: 40px 20px 60px;
}

.p-worries__inner {
  max-width: 1200px; /* 全体の器を1200pxに固定 */
  margin: 0 auto;
}

/* --- タイトル周りは前回の調整を維持 --- */
.p-worries__head-wrapper {
  margin-bottom: 10px; /* 画像との間を少し広げます */
  text-align: center;
}

/* --- 画像リストの調整 --- */
.p-worries__list {
  display: flex;
  justify-content: center; /* 2つの要素を中央に寄せる */
  gap: 40px;               /* 画像の間の隙間を広げて「詰まっている感」を解消 */
}

.p-worries__item {

  /* 画像1枚あたりの最大幅を指定(画像が3枚並ぶ) */
  /* (1200px - (隙間10px*2)) / 3 = 390px 以下にする */
  flex: 0 1 390px;

}
/* --- 画像ボックス（aタグ化） --- */
.p-worries__image-box {
  position: relative;
  overflow: hidden;
  border: 1px solid #bbb;
  border-bottom: none;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  
  /* 追加: aタグをブロック要素にし、デフォルトのリンクスタイルを消す */
  display: block;
  text-decoration: none;
  color: inherit;
  
  /* 追加: 浮き上がるアニメーションの準備 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 追加: ボックス全体をホバーした時のアクション（上に5px浮き上がり、影を濃く広げる） */
.p-worries__image-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

.p-worries__img {
  width: 100%;
  height: auto;
  display: block;
  
  /* 追加: 画像ズームアニメーションの準備 */
  transition: transform 0.3s ease;
}

/* 追加: ボックスホバー時に中の画像を少しズームさせる */
.p-worries__image-box:hover .p-worries__img {
  transform: scale(1.03);
}

.p-worries__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(51, 51, 51, 0.85);
  padding: 8px 10px;
  text-align: center;
  
  /* 追加: 背景色変化アニメーションの準備 */
  transition: background-color 0.3s ease;
}

/* 追加: ボックスホバー時にオーバーレイの透明度を少し下げて明るく見せる */
.p-worries__image-box:hover .p-worries__overlay {
  background-color: rgba(51, 51, 51, 0.65);
}

.p-worries__text {
  color: #fff !important;
  font-size: 19px; /* 少しだけサイズを下げてスマートに */
  font-weight: bold;
  margin: 0 !important;
  line-height: 1.4;
}

.p-worries__exptext-box {
  width: 86%;
  margin: 20px auto 0!important;
}

.p-worries__exptext-box ul {
  margin: 0;
  padding: 0px;
  list-style: none;
}

.p-worries__exptext-box ul > li {
  position: relative;
  padding: 0px 0px 0px 1em;
  margin: 0 auto!important;
}
.p-worries__exptext-box ul > li::before {
  position: absolute;
  top: 45%;
  left: 0px;
  transform: translateY(-50%);
  width: 0px;
  height: 0px;
  border: 0.5em solid transparent;
  border-left: 0.7em solid #3388dd;
  content: "";
}

/* --- レスポンシブ対応 --- */
@media (max-width: 900px) {
  .p-worries__list {
    gap: 30px; /* 画面が狭くなってきたら隙間を調整 */
  }
}

@media (max-width: 768px) {
  .p-worries__list {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  .p-worries__item {
    flex: 0 1 100%;
    max-width: 340px; /* スマホでも横に広がりすぎないように */
  }
  .p-worries__exptext-box {
    width: 86%;
  }
}

/* =========================================
   ⑦ S-Wingによる解決宣言セクション専用
========================================= */
.p-solution-decl {
  background-color: #f8fbff; /* ページ全体のメリハリをつけるため、ごく薄い青背景に */
  padding: 0 20px 60px;
}

.p-solution-decl__inner {
  max-width: 1000px; /* 画像が大きくなりすぎないように最大幅を制限 */
  margin: 0 auto;
}

/* タイトル（詳細度を高めて確実な適用を狙う） */
.home .p-sw-section h2.p-solution-decl__head {
  color: #1a3b6c !important;
  margin-bottom: 50px !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

/* 画像ラッパー */
.p-solution-decl__image-wrapper {
  text-align: center; /* 画像を中央揃え */
  width: 100%;
}

.p-solution-decl__img {
  max-width: 100%; /* スマホなど画面幅に合わせて縮小 */
  height: auto;
  display: inline-block;
}

/* -----------------------------------------
   レスポンシブ対応
----------------------------------------- */
@media (max-width: 768px) {
  .p-solution-decl {
    padding: 60px 15px;
  }

  .home .p-sw-section h2.p-solution-decl__head {
    margin-bottom: 30px !important;
    font-size: 24px !important; /* スマホではタイトルを少し小さく調整 */
  }
}

/* =========================================
   ⑧ 機能ピックアップセクション
========================================= */
.p-pickup {
  background: #f4f4f4; /* 全体の背景色 */
  padding: 60px 20px 20px;
}

.p-pickup__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- セクション全体のタイトル（Pick Up） --- */
.p-pickup__head {
  text-align: left;
  position: relative;
  border-bottom: 4px solid #1a3b6c;
  margin-bottom: 60px;
}

.p-pickup__main-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  font-weight: 900 !important;
  color: #5075b6!important;
  line-height: 1.3 !important;
  margin: 0 0 15px 0 !important;
  letter-spacing: 0.05em;
  padding-left: 1rem;
}

.p-pickup__lead {
  font-size: 1.15rem;
  font-weight: bold;
  color: #3960a5!important;
  line-height: 1.6;
  margin: 0 !important;
}

/* --- 各機能アイテム --- */
.p-pickup__item {
  margin-bottom: 60px;
}

/* ヘッダー（青背景タイトル＋タグ） */
.p-pickup__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #4e95cf;
  color: #fff;
  padding: 14px 18px;
  margin-bottom: 20px;
  position: relative; /* 新機能アイコンの絶対配置基準 */
  border-radius: 12px 12px 0 0;
}

.p-pickup__item-title {
  margin: 0 !important;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem) !important;
  color: #fff !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
}

.p-pickup__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-right: 30px;
}
.p-pickup__tags.new-tag {
  margin-right: 160px;
}

.p-pickup__tag {
  border: 1px solid rgba(255, 255, 255, 0.85);
  color: #fff;
  padding: 8px 14px 5px; /* 上下のpadding微調整 */
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* 新機能アイコン */
.p-pickup__new-tag {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.p-pickup__new-tag img {
  width: 140px;
  height: auto;
}

/* コンテンツエリア（グリッドレイアウト） */
.p-pickup__item-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

/* --- 左側：お悩み --- */
.p-pickup__problem-col {
  position: relative;
  padding-top: 8px;
}

.p-pickup__problem-lead {
  color: #4e95cf;
  font-weight: 800;
  font-size: clamp(1.3rem, 1.8vw, 1.8rem);
  line-height: 1.15;
  margin: 0 0 6px 28px!important; /* 位置微調整 */
/*  transform: rotate(-8deg);*/
  transform-origin: left center;
  display: inline-block;
}

.p-pickup__problem-balloon {
  position: relative;
  background: #fff;
  border: 5px solid #4e95cf;
  border-radius: 32px;
  padding: 22px 22px 26px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.p-pickup__problem-balloon::after {
  content: "";
  position: absolute;
  right: 26px;
  bottom: -28px;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 28px solid #4e95cf;
  transform: skewX(-18deg);
}

.p-pickup__problem-balloon::before {
  content: "";
  position: absolute;
  right: 30px;
  bottom: -21px;
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid #fff;
  z-index: 1;
  transform: skewX(-18deg);
}

.p-pickup__problem-text {
  margin: 0 !important;
  font-size: 1.05rem;
  font-weight: bold;
  color: #222;
}

.p-pickup__problem-icon {
  display: block;
  width: 180px;      /* アイコンサイズ拡大 */
  margin-top: 0;     /* 上部余白削除 */
  margin-left: auto; /* 右揃え */
}

/* --- 右側：解決策 --- */
.p-pickup__solution-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.p-pickup__solution-card {
  position: relative;
  background: #fff;
  border: 5px solid #ea7b2f;
  border-radius: 34px;
  padding: 26px 26px 30px;
  min-height: 250px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.p-pickup__solution-title {
  margin: 0 0 14px !important;
  color: #d8641f !important;
  font-size: clamp(1.5rem, 2vw, 2.2rem) !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
}

.p-pickup__solution-text {
  margin: 0 !important;
  font-size: 1.05rem;
  color: #222;
  max-width: 90%;
  font-weight: 500;
}

.p-pickup__solution-icon {
  position: absolute;
  right: 13px;  /* 位置調整 */
  bottom: 4px;  /* 位置調整 */
  width: clamp(96px, 12vw, 110px);
  opacity: 0.95;
}

/* --- 効果バー --- */
.p-pickup__effect-bar {
  position: relative;
  align-self: flex-end;
  width: min(92%, 900px);
  background: linear-gradient(90deg, #1598d5 0%, #18a8e5 100%);
  color: #fff;
  padding: 18px 72px 13px 24px; /* 余白調整 */
  font-size: clamp(1.15rem, 2vw, 1.75rem);
  font-weight: 800;
  text-align: left;
  line-height: 1.3;
  clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 50%, calc(100% - 44px) 100%, 0 100%);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* --- レスポンシブ対応 --- */
@media (max-width: 960px) {
  .p-pickup__item-body {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .p-pickup__problem-col {
    max-width: 520px;
  }
  .p-pickup__solution-text {
    max-width: calc(100% - 120px);
  }
  .p-pickup__effect-bar {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .p-pickup__tags {
    margin-right: 0; /* スマホ時はスペース指定解除 */
    margin-bottom: 8px;
  }
  .p-pickup__new-tag {
    position: static;
    transform: none;
    margin-bottom: 10px;
  }
  .p-pickup__tags.new-tag {
    margin-right: 0;
  }

}

@media (max-width: 640px) {
  .p-pickup {
    padding: 60px 15px 0;
  }
  .p-pickup__item-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 14px 0 14px;
    margin-bottom: 8px;
  }
  .p-pickup__item-title {
    font-size: 1.6rem !important;
  }
  .p-pickup__tags {
    gap: 8px;
  }
  .p-pickup__tag {
    font-size: 0.82rem;
    padding: 7px 10px;
  }
  .p-pickup__problem-lead {
    transform: none;
    font-size: 1.4rem;
    margin-bottom: 6px !important;
    margin-left: 10px !important;
  }
  .p-pickup__problem-balloon {
    border-width: 4px;
    border-radius: 26px;
    padding: 18px;
  }
  .p-pickup__problem-balloon::after {
    right: 20px;
  }
  .p-pickup__problem-balloon::before {
    right: 23px;
  }
  .p-pickup__problem-icon {
    width: 104px;
    margin-top: 18px;
    margin-left: auto;
  }
  .p-pickup__solution-card {
    border-width: 4px;
    border-radius: 26px;
    padding: 18px 18px 92px;
    min-height: auto;
  }
  .p-pickup__solution-title {
    font-size: 1.35rem !important;
    margin-bottom: 10px !important;
  }
  .p-pickup__solution-text {
    max-width: 100%;
    font-size: 0.98rem;
  }
  .p-pickup__solution-icon {
    width: 92px;
    right: 3px;
    bottom: 3px;
  }
  .p-pickup__effect-bar {
    padding: 14px 40px 14px 14px;
    font-size: 1.2rem;
    text-align: left;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 50%, calc(100% - 28px) 100%, 0 100%);
  }

  .p-pickup__solution-col {
    gap: 12px;
  }

  .p
  -pickup__new-tag {
    position: absolute;
    top: 14px;    /* ヘッダーの上下paddingに合わせる */
    right: 14px;  /* ヘッダーの左右paddingに合わせる */
    transform: none;
    margin-top: 0;
    z-index: 1;
  }

  /* ① スマホではリボン画像を非表示にする */
  .p-pickup__new-tag img {
    display: none;
  }

  /* ② 代わりにCSSで赤背景の小さなバッジを生成する */
  .p-pickup__new-tag::after {
    content: "新機能";
    display: inline-block;
    background-color: #d82323; /* リボンの赤に近い色（適宜調整してください） */
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px; /* 少し角を取る */
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* 軽く影をつけて馴染ませる */
  }

}

/* -----------------------------------------
   機能ピックアップ：詳細リンク
----------------------------------------- */
/* 右寄せにするためのコンテナ */
.p-pickup__detail-link-wrap {
  display: flex;
  justify-content: flex-end; /* 確実に右寄せ */
  margin-top: 0;
  margin-bottom: 10px;
}

/* リンク本体 */
.p-pickup__detail-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  /* サイズアップ */
  font-size: 18px; /* 15pxから18pxへ大きく */
  font-weight: bold;
  color: #333;
  text-decoration: none;

  /* 存在感を出すための装飾 */
  padding: 8px 20px;
  background-color: #f9f9f9; /* ごく薄いグレー */
  border: 1px solid #bbb;    /* 薄い枠線 */
  border-radius: 8px;        /* わずかに角を丸める */

  transition: all 0.3s ease;
}

/* 矢印アイコン */
.p-pickup__detail-link i {
  color: #f47926; /* 矢印はアクセントのオレンジ */
  font-size: 16px;
  transition: transform 0.3s ease;
}

/* ホバー時の挙動 */
.p-pickup__detail-link:hover {
  background-color: #fff;
  border-color: #f47926; /* 枠線をオレンジに */
  color: #f47926;        /* 文字もオレンジに */
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 軽く浮き上がらせる */
}

.p-pickup__detail-link:hover i {
  transform: translateX(5px); /* 矢印を動かす */
}

/* スマホ表示での調整 */
@media (max-width: 992px) {
  .p-pickup__detail-link {
    font-size: 16px; /* スマホでも読みやすいサイズ */
    width: 100%;     /* スマホでは横いっぱいに広げて押しやすくする */
    justify-content: center;
  }
}

/* =========================================
   ⑨ システムのテーマ／システムがもたらす価値
========================================= */
.p-system-theme {
  padding: 20px 20px 40px 20px;
  background: #f4f4f4; /* 全体の背景色 */
}

.p-system-theme__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* 角丸のグレー背景ボックス */
.p-system-theme__box {
  background-color: #f0f2f5; /* 薄すぎず濃すぎない絶妙なグレー */
  border-radius: 20px;
  padding: 20px 80px;
  text-align: left;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* ほんの少しだけ影を落として浮かせる */
  background-color: #E0E2E4;
}

/* --- タイトル --- */
.p-system-theme__title {
  margin: 0 0 40px 0 !important;
  color: #1a3b6c !important;
  line-height: 1.4 !important;
}

.p-system-theme__title-sub {
  font-weight: bold;
  color: #e65100;
}

.p-system-theme__title-main {
  font-weight: 900;
  display: inline-block;
  color: #e65100;
}

/* --- 本文 --- */
.p-system-theme__text {
  text-align: left; /* 本文は読みやすさ重視で左揃え */
  display: inline-block; /* 親要素のtext-align: centerを使ってブロックごと中央に配置 */
  max-width: 1200px;
  line-height: 1.6 !important;
  color: #333;
  font-weight: 500;
}

.p-system-theme__text p {
  margin: 0;
}

.p-system-theme__text p:last-child {
  margin-bottom: 0;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .p-system-theme__box {
    padding: 40px 20px;
    border-radius: 12px;
  }

  .p-system-theme__title-sub {
    font-size: 18px;
  }

  .p-system-theme__title-main {
    font-size: 28px;
  }

  .p-system-theme__text {
    font-size: 15px;
    line-height: 1.8;
  }
}

/* =========================================
   ⑩ 経営者サイドからのアンケート
========================================= --> */
.p-management-survey {
  padding: 50px 20px; /* 上下の余白をおさえめに調整 */
  background-color: #fff;
}

.p-management-survey__inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

/* 画像エリア */
.p-management-survey__image {
  margin-bottom: 30px;
}

.p-management-survey__image img {
  width: 100%;
  max-width: 800px;
  height: auto;
}

/* テキストエリア全体 */
.p-management-survey__content {
  display: flex;
  flex-direction: column;
  gap: 24px; /* ブロック間の余白 */
  text-align: left;
  max-width: 1000px;
  margin: 0 auto;
}

/* 各テキストブロック */
.p-management-survey__block {
  border-left: 4px solid #1a3b6c; /* アクセントの左線 */
  padding-left: 20px;
}

.p-management-survey__subtitle {
  font-size: 1.1rem;
  font-weight: 800;
  color: #1a3b6c;
  margin: 0 0 8px 0 !important;
  line-height: 1.4;
}

.p-management-survey__text {
  margin: 0 !important;
  color: #333;
  line-height: 1.7;
  font-weight: 500;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .p-management-survey {
    padding: 40px 15px;
  }

  .p-management-survey__image {
    margin-bottom: 20px;
  }

  .p-management-survey__block {
    padding-left: 15px;
  }
}

/* =========================================
   ⑪ 管理者・経営層セクション専用見出し
========================================= */
.p-management__head {
  text-align: left;
  position: relative;
  border-bottom: 4px solid #1a3b6c;
  margin-bottom: 60px;
}

.p-management__main-title {
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important; /* ⑧よりは少し抑えつつ強調 */
  font-weight: 900 !important;
  color: #5075b6!important;
  line-height: 1.3 !important;
  margin: 0 0 15px 0 !important;
  letter-spacing: 0.05em;
  padding-left: 1rem;
}

.p-management__lead {
  font-size: 1.15rem;
  font-weight: bold;
  color: #3960a5!important;
  line-height: 1.6;
  margin: 0 !important;
}

/* シルバー系の配色調整（前回の追加分） */
.p-pickup--management .p-pickup__item-header {
  background: linear-gradient(135deg, #9ba2ad 0%, #bdc3c7 100%);
}
.p-pickup--management .p-pickup__problem-lead {
  color: #7a828e;
}
.p-pickup--management .p-pickup__problem-balloon {
  border-color: #9ba2ad;
}
.p-pickup--management .p-pickup__problem-balloon::after {
  border-top-color: #9ba2ad;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  .p-management__head {
    text-align: left; /* スマホでは左揃えの方が見やすい場合が多いです */
    padding-bottom: 20px;
    margin-bottom: 40px;
  }
  .p-management__head::after {
    left: 0;
    transform: none;
  }
  .p-management__main-title {
    font-size: 1.6rem !important;
  }
  .p-management__lead {
    font-size: 0.95rem;
  }
}


/* =========================================
   ⑬ サポート体制（修正版）
========================================= */
.p-support {
  padding: 60px 20px 40px; /* 下の余白をおさえめに */
  background-color: #fff;
}

.p-support__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* セクション見出し（左寄せ＋下線） */
.p-support__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  border-bottom: 4px solid #1a3b6c;
  margin-bottom: 50px;
}

.p-support__main-title {
  font-size: 56px !important;
  font-weight: 900 !important;
  color: #5075b6!important;
  line-height: 1 !important;
  margin: 0 !important;
}

.p-support__sub-title {
  font-size: 18px;
  font-weight: bold;
  color: #3960a5!important;
}

/* 3段組コンテンツエリア */
.p-support__content {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 40px;
}

.p-support__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center; /* ★要素（画像・タイトル）を中央に寄せる */
}

/* 画像エリアの修正 */
.p-support__item-image {
  width: 100%;
  max-width: 280px; /* 画像が大きすぎないよう制限（適宜調整してください） */
  margin-bottom: 20px;
  /* aspect-ratioとoverflow:hiddenを削除し、見切れを防止 */
}

.p-support__item-image img {
  width: 100%;
  height: auto; /* ★縦横比を維持して全体を表示 */
  display: block;
}

.p-support__item-title {
  text-align: center; /* ★タイトルを中央寄せ */
  width: 100%;
  font-size: 1.25rem;
  font-weight: 800;
  color: #5075b6!important;
  margin: 0 0 15px 0 !important;
  line-height: 1.4;
}

.p-support__item-text {
  text-align: left; /* ★説明文はご指定通り左寄せ */
  width: 100%; /* 幅いっぱいに広げて左寄せを維持 */
  margin: 0 !important;
  line-height: 1.7;
  color: #444;
  font-weight: 500;
  padding-left: 20px;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) {
  .p-support__head {
    flex-direction: column;
    gap: 10px;
    padding-bottom: 15px;
  }

  .p-support__main-title {
    font-size: 40px !important;
  }

  .p-support__content {
    flex-direction: column;
    gap: 50px;
  }

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

  .p-support__item-image {
    max-width: 240px;
  }

  .p-support__item-text {
    padding-left: 0;
  }

}


/* =========================================
   ⑭ おしらせ
========================================= */
.p-news {
  padding: 60px 20px 80px;
  background-color: #fff;
}

.p-news__inner {
  max-width: 1000px; /* 記事リストが見やすい幅に設定 */
  margin: 0 auto;
}

/* タイトル周り（他セクションと共通） */
.p-news__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  border-bottom: 4px solid #1a3b6c;
  margin-bottom: 40px;
}

.p-news__main-title {
  font-size: 56px !important;
  font-weight: 900 !important;
  color: #1a3b6c;
  line-height: 1 !important;
  margin: 0 !important;
}

.p-news__sub-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 記事リスト */
.p-news__list {
  margin-bottom: 50px;
}

.p-news__item {
  border-bottom: 1px solid #ddd;
}

.p-news__item-link {
  display: flex;
  gap: 30px;
  padding: 30px 0;
  text-decoration: none !important;
  color: inherit;
  transition: opacity 0.3s;
}

.p-news__item-link:hover {
  opacity: 0.7;
}

/* サムネイル */
.p-news__item-thumb {
  width: 240px;
  flex-shrink: 0;
}

.p-news__item-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

/* 記事本文エリア */
.p-news__item-body {
  flex-grow: 1;
}

.p-news__item-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.p-news__item-date {
  font-size: 14px;
  color: #888;
  font-weight: bold;
}

.p-news__item-cat {
  background: #f0f2f5;
  color: #1a3b6c;
  font-size: 12px;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 2px;
}

.p-news__item-title {
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: #333 !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.4 !important;
}

.p-news__item-excerpt {
  color: #666;
  line-height: 1.6;
}

/* --- ページネーションのスタイル調整 --- */
.p-news__pagination {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.p-news__pagination ul {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 8px;
}

.p-news__pagination a,
.p-news__pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #1a3b6c;
  font-weight: bold;
  border-radius: 4px;
}

.p-news__pagination .current {
  background: #1a3b6c;
  color: #fff;
  border-color: #1a3b6c;
}

/* --- レスポンシブ --- */
@media (max-width: 768px) {
  .p-news__item-link {
    flex-direction: column;
    gap: 15px;
  }
/* 親要素の幅もスマホに合わせて調整（必要に応じて） */
  .p-news__item-thumb {
    width: 100%; /* 240px固定を解除して親に合わせる */
    margin-bottom: 15px; /* 下のテキストとの間に余白を作る */
  }

  .p-news__item-thumb img {
    width: 75%;
    display: block;       /* 1. ブロック要素に変更 */
    margin-left: auto;    /* 2. 左余白を自動調整 */
    margin-right: auto;   /* 3. 右余白を自動調整 */
  }
  .p-news__main-title {
    font-size: 40px !important;
  }
}


/* スクリーンリーダー用テキストを画面外に飛ばす（クリックを阻害しない） */
.p-news__pagination .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}