@charset "UTF-8";
/*
Theme Name: XeoryExtensionChild
Theme URI: https://xeory.jp/extension
Template: xeory_extension
Description: Xeory拡張子テーマ
Author: バズ部
Author URI: https://bazubu.com/
Version: 1.0.0
*/

/*
 * 親テーマ（xeory_extension）のCSSは functions.php で全停止。
 * このファイルがスタイルの唯一のソース。
 */

/* ============================================================
   目次（TABLE OF CONTENTS）
   ------------------------------------------------------------
   各セクションは下の「==== 見出し ====」バナーで区切っている。
   エディタの検索で見出し名（例: "Header CTA"）を探すと該当箇所へ飛べる。
   ※ CSSはカスケード（上から順に適用）に依存するため、
     原則として並び順は変えないこと。

   1.  Variables ............ デザイントークン（色・文字・余白の :root 変数）
   2.  Reset ................ 全要素の初期化
   3.  Layout ............... ページ骨格（#content / 2カラム・1カラム）
   4.  Grid ................. .gr1〜.gr12 のfloatグリッド（親テーマ由来）
   5.  Header ............... サイトヘッダー
   6.  Global Nav ........... グローバルナビ／ドロップダウン／SPナビ
   7.  Post / Article ....... 投稿・固定ページ本文（記事ヘッダー〜CTA〜著者）
                             ＋ .c-postTitle（page.php/archive の投稿タイトル）
   8.  Pagination ........... ページャ
   9.  Sidebar .............. サイドバー（＋ .widget_recent_entries）
   10. Comments ............. コメント
   11. Footer ............... フッター（レガシー .footer-* ＋ 未使用の .p-footer*）
   12. Utility .............. 汎用ユーティリティ（.u-bg--* / .u-icon--*）
   13. Header CTA ........... ヘッダーCTAボタン（資料DL・お問い合わせ）
   14. Hero ................. ヒーロー領域
   15. 資料DLページ（single） . single-download の2カラム＋CF7フォーム装飾
                             ＋ アーカイブ記事ループ
   16. Front Page ........... トップ固有（メインビジュアル/各セクション/
                             パンくず/アニメーション）※旧称「旧スタイル」
                             ＋ 共用見出し .p-heading / .p_category
   17. Project: 資料DL一覧 ... page.php (type=download) の .p-download* 一式
   18. Front Page: News ..... トップのお知らせ一覧 .p-topNewsList
   19. Service / Solution ... ソリューション紹介ページの本文セクション群
                             （.p-serviceHero / .c-btn / .p-worries /
                              .p-feature / .p-options / .p-section--* /
                              .p-faq / .p-cta / .p-caseStudy）

   ※ レスポンシブ(@media)は独立セクションを設けず、各コンポーネント直下に同居。

   ※ 命名規則: FLOCSS準拠。.l-(Layout) .c-(Component) .p-(Project)
     .u-(Utility) ／ 状態は .is-* ／ JSフックは data-* 属性に分離。
   ============================================================ */


/* ============================================================
   1. Variables（デザイントークン）
   ------------------------------------------------------------
   色・文字サイズ・余白・角丸などの「唯一の正」をここで定義し、
   各セクションは var(--xxx) で参照する（直値のベタ書きは避ける）。
   ============================================================ */

:root {
  /* Color */
  --color-primary:    #f05194;
  --color-accent:     #FF6C00;
  --color-text:       #131524;
  --color-text-light: #5E6265;
  --color-bg:         #FFFFFF;
  --color-bg-sub:     #FAFAFA;
  --color-bg-warm:    #FEFAFB;
  --color-border:     #E5E5E5;
  --color-dark:       #131D2A;
  --color-dark-2:     #3B4552;
  --color-cozre:      #f05194;

  /* Typography */
  --font-sans: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Yu Gothic", "游ゴシック", YuGothic, "Meiryo", "メイリオ", sans-serif;
    /* Inter を先頭に。日本語など Inter に無い文字は --font-sans 相当へフォールバック */
  --font-inter: "Inter", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Yu Gothic", "游ゴシック", YuGothic, "Meiryo", "メイリオ", sans-serif;

  --font-size-h1: 48px;
  --line-height-h1: 1.25;

  --font-size-h2: 32px;
  --line-height-h2: 1.375;

  --font-size-h3: 22px;
  --line-height-h3: 1.455;

  --font-size-h4: 16px;
  --line-height-h4: 1.75;

  --font-size-base: 16px;
  --line-height-base: 1.75;

  --font-size-sm: 12px;
  --line-height-sm: 1.667;

  --font-size-xs: 10px;
  --line-height-xs: 1.6;

  /* Layout */
  --wrap-width:   1136px;
  --side-width:   310px;
  --gutter-pc:    48px;
  --gutter-sp:    20px;

  /* Breakpoints（参考値。CSS変数は @media で使えないため下記は注記のみ。
     実際の各 @media は 1200px / 991px / 767px の直値で書く） */
  /* --bp-laptop: 1200px  … laptop以下 */
  /* --bp-tablet:  991px  … tablet以下（2カラム→1カラム化の境界） */
  /* --bp-phone:   767px  … phone以下 */

  /* Radius */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  /* Gap */
  --gap-xs:  16px;
  --gap-sm:  24px;
  --gap-md:  32px;
  --gap-lg:  40px;
  --gap-xl:  48px;
  
  /* Shadow */
  --shadow-default:  0 0px 16px rgba(19, 21, 36, .1); /* 浮き上がり時の影 */

  /* Motion（transition / hover を統一）
     - timing（duration・easing）は必ず変数で共有する。
       例) transition: color var(--duration) var(--ease);
     - 対象プロパティはできるだけ明示する（all は多数のプロパティが
       同時に変わる箇所のみ許容）。 */
  --ease:          ease;   /* 標準イージング */
  --duration:      0.2s;   /* 標準デュレーション */
  --duration-slow: 0.3s;   /* 大きめの動き用 */

  /* Hover の共通値 */
  --hover-lift:    translateY(-4px);                 /* カード等の浮き上がり */
  --shadow-hover:  0 8px 24px rgba(19, 21, 36, .12); /* 浮き上がり時の影 */

}


/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-inter);
  font-size: 1rem;
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

ul, ol {
  list-style: none;
}

img, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  color: var(--color-primary);
}

a:hover {
  color: var(--color-primary);
}

table {
  border-collapse: collapse;
  width: 100%;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
  appearance: none;
}

button {
  cursor: pointer;
}

h1 { font-weight: bold; font-size: var(--font-size-h2); line-height: var(--line-height-h2); }
h2 { font-weight: bold; font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
h3 { font-weight: bold; font-size: var(--font-size-h4); line-height: var(--line-height-h4); }
h4 { font-weight: bold; font-size: var(--font-size-h4); line-height: var(--line-height-h4); }
p  { font-weight: normal; font-size: var(--font-size-base); line-height: var(--line-height-base); }
small { font-weight: normal; font-size: var(--font-size-sm); line-height: var(--line-height-sm); }

@media screen and (min-width: 768px) {
  h1 { font-weight: bold; font-size: var(--font-size-h1); line-height: var(--line-height-h1); }
  h2 { font-weight: bold; font-size: var(--font-size-h2); line-height: var(--line-height-h2); }
  h3 { font-weight: bold; font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
}


/* ============================================================
   Layout
   ============================================================ */

/* ------------------------------------------------------------
   設計：モバイルファースト。基本＝スマホ（1カラム積み）を記述し、
   min-width で段階的にタブレット→PC（2カラムflex）へ拡張する。
   ブレークポイント: 768px(md) / 992px(lg) / 1201px(xl)
   ------------------------------------------------------------ */
#content {
  padding: 80px var(--gutter-sp);
}

/* .wrap：スマホは1カラム（block）。992pxで2カラムflexへ。
   （親テーマの float + ネガティブマージン方式から flexbox へ置換済み。
   そのため .main-inner には専用の指定は不要） */
.wrap {
  max-width: var(--wrap-width);
  width: auto;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  display: block;
}

#main {
  width: 100%;
}

#side {
  width: 100%;
}

/* 1カラム: サイドを出さないページ用に右余白を解除 */
.one-column .main-inner {
  margin-right: 0;
}

.one-column #content .wrap {
  width: 100%;
}

.one-column #content .wrap--download {
  width: 100%;
}

/* スマホでは表をブロック化して横はみ出しを防ぐ */
table,
tr,
th,
td {
  display: block;
}

/* ===== md: 768px以上 ===== */
@media screen and (min-width: 768px) {
  .wrap {
    padding: 0 24px;
    overflow: visible;
  }

  /* 表は本来の表示へ戻す */
  table { display: table; }
  tr { display: table-row; }
  th,
  td { display: table-cell; }

  /* .one-column #content .wrap {
    width: 880px;
  } */
}

/* ===== lg: 992px以上（2カラム flex レイアウト） ===== */
@media screen and (min-width: 992px) {
  #content {
    padding: 80px var(--gutter-pc);
  }
  .wrap {
    display: flex;
    gap: 40px;
    width: 100%;
    padding: 0;
  }

  #side {
    width: var(--side-width);
    flex: 0 0 var(--side-width);
  }

}

.l-container {
  padding: 64px var(--gutter-sp);
}

/* ===== lg: 992px以上 ===== */
@media screen and (min-width: 992px) {
  .l-container {
    padding: 80px var(--gutter-pc);
  }
}

.l-container__inner {
  max-width: var(--wrap-width);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   Grid
   ============================================================ */

.row { overflow: hidden; }

/* スマホは全カラム100%幅で積む。768px以上で本来の分割幅へ */
.gr1, .gr2, .gr3, .gr4, .gr5,
.gr6, .gr7, .gr8, .gr9, .gr10,
.gr11, .gr12, .gr1-5 {
  width: 100%;
  float: left;
}

@media screen and (min-width: 768px) {
  .gr1  { width: 8.33%; }
  .gr2  { width: 16.66%; }
  .gr3  { width: 25%; }
  .gr4  { width: 33.33%; }
  .gr5  { width: 41.66%; }
  .gr6  { width: 50%; }
  .gr7  { width: 58.33%; }
  .gr8  { width: 66.66%; }
  .gr9  { width: 75%; }
  .gr10 { width: 83.33%; }
  .gr11 { width: 91.33%; }
  .gr12 { width: 100%; }
  .gr1-5 { width: 20%; }
}


/* ============================================================
   Header
   ============================================================ */

/* スマホ基本：高さ60px・ロゴ小。768pxで通常サイズ、992pxで .wrap を全幅化 */
#header {
  background-color: #fff;
  height: 60px;
  padding: 0 0 0 var(--gutter-sp);
}

#header .wrap {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--gap-sm);
  width: auto;
  padding: 0;
}

#logo {
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 18px;
  font-weight: bold;
}

#logo img {
  max-height: 24px;
  width: auto;
}

#header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: 100%;
}

/* ===== md: 768px以上 ===== */
@media screen and (min-width: 768px) {
  #header {
    height: 92px;
  }

  #logo {
    font-size: 24px;
  }

  #logo img {
    max-height: 32px;
  }
}

/* ===== lg: 992px以上 ===== */
@media screen and (min-width: 992px) {
  #header {
    padding: 0 var(--gutter-pc);
  }
  #header .wrap {
    width: 100%;
    padding: 0;
  }
}


/* ============================================================
   Global Nav
   ============================================================ */

/* --- PC用の水平ナビ＆ドロップダウン（スマホでは #gnav を隠すので不活性） --- */
#gnav ul {
  display: flex;
  list-style: none;
  margin: 0;
}

#gnav ul li a {
  display: block;
  padding: 32px 16px;
  color: var(--color-text);
  font-size: 14px;
  transition: color var(--duration-slow) var(--ease);
}

@media screen and (min-width: 992px) {
  #gnav ul li a {
    padding: 32px 8px;
  }
}

@media screen and (min-width: 1201px) {
  #gnav ul li a {
    padding: 32px 16px;
  }
}


#gnav ul li a:hover,
#gnav ul li.current-menu-item a {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--color-primary);
}


/* Dropdown */
#gnav ul li {
  position: relative;
  margin: 0;
}

#gnav ul li .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 280px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

#gnav ul li:hover .sub-menu {
  display: block;
}

#gnav ul li .sub-menu li a {
  padding: 12px 16px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}

#gnav ul li .sub-menu li a:hover {
  color: var(--color-primary);
  background: var(--color-bg-sub);
}

/* --- スマホ基本：水平ナビ(#gnav)を隠し、バーガー＋ドロワー(#gnav-sp)を表示 --- */
#gnav {
  display: none;
}

#header-nav-btn {
  display: block;
  line-height: 60px;
  width: 60px;
}
#header-nav-btn a {
  display: block;
  text-align: center;
  font-size: 32px;
  background: #fff;
}

.dummy {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 10;
}

/* SPドロワー */
#gnav-sp {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #fbf8f8;
  color: var(--color-text);
  font-family: var(--font-inter);
  z-index: 100;
}
#gnav-sp .wrap {
  width: 100%;
  margin: 0;
  padding: 36px 0;
}
#gnav-sp .wrap a {
  color: var(--color-text);
}
#gnav-sp #header-cont-content h4,
#gnav-sp #header-cont-about h4,
#gnav-sp #header-cont-sns h4 {
  font-weight: bold;
  margin-bottom: 16px;
}
#gnav-sp #header-cont-content li,
#gnav-sp #header-cont-about li,
#gnav-sp #header-cont-sns li {
  font-size: 14px;
  list-style: none;
}
#gnav-sp #header-cont-content li a,
#gnav-sp #header-cont-about li a,
#gnav-sp #header-cont-sns li a {
  padding: 10px 12px;
}
#gnav-sp #header-cont-content ul {
  margin-left: -2%;
}
#gnav-sp #header-cont-content li {
  margin-left: 2%;
  width: 48%;
  list-style: none;
}
#gnav-sp #header-cont-content li a {
  display: block;
  position: relative;
}
#gnav-sp #header-cont-content .children {
  display: none;
}
#gnav-sp #footer-nav li a {
  display: block;
  padding: 8px 12px;
  position: relative;
}

#gnav-sp #footer-nav .children {
  display: none;
}
#gnav-sp #header-cont-sns li a {
  display: block;
  padding: 8px 12px 8px 0;
}

/* ===== lg: 992px以上（PC：水平ナビ表示／バーガー・ドロワー非表示） ===== */
@media screen and (min-width: 992px) {
  #gnav {
    display: block;
  }
  #header-nav-btn {
    display: none;
  }
  #gnav-sp {
    display: none;
    position: fixed;
    right: auto;
    background: var(--color-dark-2);
  }
}

/* ============================================================
   Post / Article
   ============================================================ */

article.post,
article.page {
  background: var(--color-bg);
  /* margin-bottom: 60px; */
}

/* Header */
.post-header {
  padding: 0;
}

.cat-name {
  margin-bottom: 16px;
}

.cat-name span {
  display: inline-block;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 4px 16px;
  font-size: 12px;
}

.post-title {
  font-weight: bold;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--color-text);
  margin-bottom: 0;
}

.post-title a {
  color: var(--color-text);
}

.post-title br {
  display: none;
}

.post-title a:hover {
  color: var(--color-accent);
}

.post-meta-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-text);
  background: #fff;
  margin: 0;
}

.post-meta.list-inline {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
}

.post-meta.list-inline li {
  margin: 0;
}

/* Thumbnail */
.post-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* Body */
.post-content {
  padding: 24px 0;
}

.post-content h2 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  margin: 40px 0 24px;
  padding: 14px 0;
  color: var(--color-text);
}

.post-content h3 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  margin: 40px 0 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.post-content h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  margin: 40px 0 24px;
  padding-left: 12px;
  border-left: 4px solid var(--color-border);
}

.post-content p {
  margin-bottom: 24px;
}

.post-content p img {
  border-radius: var(--radius-sm);
}

ul,
ol {
  margin: 0 0 24px 24px;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  margin-bottom: 8px;
}

.post-content blockquote {
  margin: 0 0 24px;
  padding: 24px 24px 24px 48px;
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  color: var(--color-text-light);
}

.post-content table {
  margin-bottom: 24px;
  border: 1px solid var(--color-border);
}

.post-content table.company_table th {
  white-space: nowrap;
}

.post-content table th,
.post-content table td {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  text-align: left;
}

.post-content table thead th {
  background: var(--color-dark-2);
  color: #fff;
}

.post-content img.alignleft {
  float: left;
  margin: 0 20px 20px 0;
}

.post-content img.alignright {
  float: right;
  margin: 0 0 20px 20px;
}

.post-content img.aligncenter {
  margin: 0 auto 20px;
}

/* Footer */
.post-footer {
  padding: 24px 20px;
  font-size: 13px;
  color: var(--color-text-light);
}

.post-footer-list {
  list-style: none;
  margin: 0;
}

/* CTA */
.post-cta {
  padding: var(--gap-xs);
  background: var(--color-bg-warm);
  background: linear-gradient(90deg, var(--color-bg-warm) 0%, #FFEFF3 100%);
  color: var(--color-text);
  border-radius: var(--radius-sm);
}

.cta-post-title {
  font-size: 18px;
  line-height: var(--line-height-h2);
  margin-bottom: 24px;
  padding: 24px 0;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.post-cta .btn {
  width: 100%;
  display: block;
  border-radius: 3px;
  text-align: center;
  color: var(--color-text);
  padding: 16px;
  background-color: var(--color-bg);
  border-radius: var(--radius-xs);
  transition: color var(--duration-slow) var(--ease);
}

.post-cta .btn:hover {
  color: var(--color-primary);
}

.post-cta-btn {
  text-align: center;
  margin-top: 24px;
}
.post-cta-btn a {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 16px 40px;
  border-radius: 40px;
  font-weight: bold;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  transition: transform var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
}

.post-cta-btn a:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}

/* Author */
.post-author {
  display: flex;
  gap: 24px;
  padding: 20px;
  border-top: 1px solid var(--color-border);
}

.post-author-img img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

/* --- スマホ基本：メタ・著者・CTAを段積み。768px/992pxで段階的にPCレイアウトへ ---
   ※ 旧 .bzb-sns-btn / .sharrre / .loop-comment-icon の指定は、子テーマの
     .post-meta-area 内に該当マークアップが出力されない死にコードのため削除。 */
.post-meta-area .post-meta,
.post-meta-area .post-meta-comment {
  width: 100%;
  padding: 0;
  text-align: left;
}
.post-meta-area .post-meta .date {
  background: transparent;
  text-align: left;
  padding: 8px;
}
.post-meta-area .post-meta-comment .author {
  border: none;
  padding: 8px 20px;
  text-align: left;
}
.post-meta-area .post-meta-comment .comments {
  padding: 8px 20px;
}

.post-author .post-author-meta {
  padding-top: 12px;
}
.post-author .post-author-meta p {
  margin-right: 0;
}

.post-cta .post-cta-inner {
  padding: 0;
}
.post-cta .post-cta-cont {
  padding: 0 0 16px;
}
.post-cta .post-cta-cont .post-cta-img {
  float: none;
  margin: 0 0 12px;
  width: 100%;
}
.post-cta .post-cta-btn a {
  width: 100%;
}

/* ===== md: 768px以上（本文まわりをPC余白・サイズへ） ===== */
@media screen and (min-width: 768px) {
  .post-content {
    padding: 32px 0;
  }
  .post-footer {
    padding: 24px 0;
  }
  .post-cta {
    padding: var(--gap-lg);
  }
  .post-author {
    padding: 40px 64px;
  }
  .cta-post-title {
    font-size: var(--font-size-h2);
    padding: 0 0 var(--gap-sm);
  }

  .post-author .post-author-meta {
    padding-top: 0;
  }

  .post-meta-area .post-meta {
    width: 40%;
  }
  .post-meta-area .post-meta-comment {
    width: auto;
  }
  .post-meta-area .post-meta .date {
    padding: 0;
  }
  .post-meta-area .post-meta-comment .author {
    padding: 0;
  }
  .post-meta-area .post-meta-comment .comments {
    padding: 0;
  }

  .post-cta .post-cta-cont {
    padding: 0;
  }
  .post-cta .post-cta-cont .post-cta-img {
    margin: 0;
    width: auto;
  }
  .post-cta .post-cta-btn a {
    width: auto;
  }
}

/* ===== lg: 992px以上（メタ情報を flex 横並びへ） ===== */
@media screen and (min-width: 992px) {
  .post-meta-area {
    color: var(--color-text-light);
    background: transparent;
  }
  .post-meta-area .post-meta {
    float: none;
    width: auto;
  }
}


/* ---- 投稿タイトル（.c-postTitle）：page.php / archive で使用 ---- */
.c-postTitle {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: var(--color-text);
}

@media screen and (min-width: 768px) {
  .c-postTitle {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.c-postTitle--archive {
  margin-bottom: 40px;
}


/* ============================================================
   Pagination
   ============================================================ */

.pagination {
  padding: 40px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  grid-column: 1 / -1;
}

.pagination a,
.pagination .current {
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: 14px;
  border-radius: var(--radius-xs);
  transition: background-color var(--duration-slow) var(--ease), border-color var(--duration-slow) var(--ease);
}

.pagination a:hover,
.pagination .current {
  background: var(--color-text-light);
  color: #fff;
  border-color: var(--color-text-light);
}


/* ============================================================
   Sidebar
   ============================================================ */

/* .side-inner は現状スタイル指定なし（必要になればここに追加）。
   例: 内側パディングを付けたい場合 → .side-inner { padding-left: 40px; } */

.side-widget {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--color-border);
}

.side-widget:last-child {
  border-bottom: none;
}

.side-title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
  padding: 8px 12px;
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
}

.side-widget ul li {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
}

.side-widget ul li:last-child {
  border-bottom: none;
}

.side-widget a {
  color: var(--color-primary);
}

.side-widget a:hover {
  text-decoration: underline;
  color: var(--color-primary);
}

.post-date {
  display: block;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-text-light);
}

/* Search */
.widget_search {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.widget_search input[type="text"] {
  width: 100%;
  padding: 10px 44px 10px 14px;
  font-size: 14px;
  border: none;
  background: var(--color-bg);
}

.widget_search button {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-light);
}

/* スマホ／タブレットではサイドを main の下に積むため上余白。992pxで解除 */
.side-inner {
  margin-top: 40px;
}

@media screen and (min-width: 992px) {
  .side-inner {
    margin-top: 0;
  }
}


/* ---- 最近の投稿ウィジェット ---- */
.widget_recent_entries ul {
  list-style: none;
  margin: 0;
}

.widget_recent_entries li {
  margin: 0;
}

.widget_recent_entries li br {
  display: none;
}

.widget_recent_entries li a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-slow) var(--ease);
}

.widget_recent_entries li a:hover {
  color: var(--color-primary);
  text-decoration: none;
}


/* ============================================================
   Comments
   ============================================================ */

.comments-area {
  padding: 0 20px 40px;
}

.comment-list .comment {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-border);
}

.comment-list .children {
  margin-left: 48px;
}

.comment-author {
  font-weight: bold;
  font-size: 13px;
}

.comment-meta {
  font-size: 12px;
  color: var(--color-text-light);
  margin-bottom: 10px;
}

.reply a {
  font-size: 12px;
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-light);
}

.comment-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.comment-form-author,
.comment-form-email {
  width: 100%;
}

.comment-form-comment,
.comment-form-url,
.form-submit {
  width: 100%;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg);
  font-size: 14px;
}

.form-submit #submit {
  display: inline-block;
  width: 240px;
  padding: 12px;
  background: var(--color-dark-2);
  color: #fff;
  border-radius: 3px;
  font-weight: bold;
  cursor: pointer;
}

.form-submit #submit:hover {
  background: var(--color-dark);
}

/* ===== md: 768px以上（コメント余白を広げ、名前/メール欄を2カラムへ） ===== */
@media screen and (min-width: 768px) {
  .comments-area {
    padding: 0 64px 40px;
  }

  .comment-form-author,
  .comment-form-email {
    width: calc(50% - 8px);
  }
}


/* ============================================================
   Footer
   ============================================================ */

#footer {
  color: var(--color-text);
  /* コンテンツが短くても上の余白を吸収してフッターを最下部へ押し下げる */
  margin-top: auto;
}

.footer-01 {
  background: var(--color-bg-sub);
  padding: 40px 0;
}

.footer-02 {
  background: #010A17;
  padding: 16px 0;
}

.footer-logo {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: bold;
}

.footer-address {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

#footer-brand-area {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#footer-gnav-ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}

.footer-copy {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.pagetop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 50;
}

.pagetop span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
}

.pagetop span:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* スマホ基本：Facebookは隠し、一覧エリアは全幅。768px/992pxでPCへ拡張 */
#footer-facebook {
  display: none;
}
#footer-list-area {
  width: 100%;
}

/* ===== md: 768px以上 ===== */
@media screen and (min-width: 768px) {
  .footer-01 {
    padding: 56px 0;
  }

  #footer-gnav-ul {
    flex-direction: row;
    gap: 24px;
  }

  .pagetop {
    bottom: 40px;
    right: 40px;
  }
}

/* ===== lg: 992px以上 ===== */
@media screen and (min-width: 992px) {
  #footer-facebook {
    display: block;
  }
  #footer-list-area {
    width: 50%;
  }
}


/* ---- FLOCSS版フッター（.p-footer*） ----------------------------
   ※ 現状この .p-footer* マークアップを出力しているテンプレートは無く
     （実際のフッターは親テーマ footer.php の .footer-01 等レガシー）、
     将来フッターを差し替える前提で用意された未使用スタイル。
   ------------------------------------------------------------ */
.p-footer {
  background-color: #fbf8f8;
}
.p-footer__foot {
  border-top: 1px solid #ddd;
}
.p-footer__wrap {
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 0 24px;
}
/* スマホ基本：縦積み（block）。768pxでflex、992pxで横一列(nowrap)へ */
.p-footer__list {
  display: block;
  justify-content: space-between;
  margin: 0;
  padding: 64px 0;
  list-style: none;
}

.p-footer__listItem {
  margin: 0;
  border-top: 1px solid #ddd;
}
.p-footer__listItem ul {
  list-style: none;
  margin: 0;
}
.p-footer__listItem--soloList {
  border: none;
}
.p-footer__listItem--snsList {
  flex: 1 0 100%;
  margin-top: 24px;
  border: none;
}
.p-footer__listItem--snsList ul {
  display: flex;
  justify-content: center;
  gap: var(--gap-lg);
}
.p-footer__listItem--sns:not(:first-child) {
  margin-left: 24px;
}
.p-footer__listItem--sns {
  border: none;
}

.p-footer__heading {
  font-weight: bold;
}
.p-footer__link {
  display: block;
  font-size: 14px;
  line-height: 44px;
  color: var(--color-text);
  transition: color var(--duration-slow) var(--ease);
}
.p-footer__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

/* ===== md: 768px以上 ===== */
@media screen and (min-width: 768px) {
  .p-footer__list {
    display: flex;
    flex-wrap: wrap;
  }
  .p-footer__listItem {
    border-top: none;
  }
  .p-footer__listItem--snsList ul {
    justify-content: flex-end;
  }
  .p-footer__link {
    display: inline;
    line-height: 32px;
  }
}

/* ===== lg: 992px以上 ===== */
@media screen and (min-width: 992px) {
  .p-footer__list {
    flex-wrap: nowrap;
  }
  .p-footer__listItem--snsList {
    flex: 0 1 auto;
    margin-top: 0;
  }
  .p-footer__listItem--snsList ul {
    display: block;
  }
  .p-footer__listItem--sns:not(:first-child) {
    margin-left: 0;
  }
}
.p-footer__copy {
  text-align: center;
  font-size: 13px;
  padding: 16px 0;
  color: #777;
}
.p-footer__icon {
  margin-right: 8px;
}

#footer-sns li {
  margin: 0;
}

.p-footer__listItem--snsList a {
  color: var(--color-text);
  transition: color var(--duration-slow) var(--ease);
  font-size: 14px;
  line-height: 32px;
}
.p-footer__listItem--snsList a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

#footer-sns li.header-feedly {
  display: none !important;
}


/* ============================================================
   Utility
   ============================================================ */

.text-right  { text-align: right; }
.text-center { text-align: center; }
.text-left   { text-align: left; }

.table-wrap {
  overflow-x: auto;
}

.list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* WordPress 標準クラス */
.alignleft   { float: left; margin: 0 20px 20px 0; }
.alignright  { float: right; margin: 0 0 20px 20px; }
.aligncenter { display: block; margin: 0 auto 20px; }
.wp-caption  { max-width: 100%; }
.wp-caption-text { font-size: 12px; color: var(--color-text-light); text-align: center; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.display-none {
  display: none;
}


.u-bg--pink {
  background-color: var(--color-bg-warm);
  background: linear-gradient(90deg, var(--color-bg-warm) 0%, #FFEFF3 100%);
}

.u-icon--link {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  background-position: center center;
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m488-440-36 36q-11 11-11 28t11 28q11 11 28 11t28-11l104-104q12-12 12-28t-12-28L508-612q-11-11-28-11t-28 11q-11 11-11 28t11 28l36 36H360q-17 0-28.5 11.5T320-480q0 17 11.5 28.5T360-440h128Zm-8 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
}

.u-icon--newTab {
  width: 24px;
  height: 24px;
  background-size: 24px 24px;
  background-position: center center;
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h240q17 0 28.5 11.5T480-800q0 17-11.5 28.5T440-760H200v560h560v-240q0-17 11.5-28.5T800-480q17 0 28.5 11.5T840-440v240q0 33-23.5 56.5T760-120H200Zm560-584L416-360q-11 11-28 11t-28-11q-11-11-11-28t11-28l344-344H600q-17 0-28.5-11.5T560-800q0-17 11.5-28.5T600-840h200q17 0 28.5 11.5T840-800v200q0 17-11.5 28.5T800-560q-17 0-28.5-11.5T760-600v-104Z'/%3E%3C/svg%3E");
}


/* ============================================================
   ヘッダーCTAエリア
   ============================================================ */

/* スマホ基本：CTAエリアは非表示（バーガー内に集約）。769pxで表示 */
#header-cta-area {
  display: none;
  vertical-align: middle;
  margin-left: 20px;
}

.header-cta__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}

.header-cta__item {
  margin: 0;
}

.header-cta__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  transition: opacity var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.header-cta__link:hover {
  opacity: .8;
  text-decoration: none;
}

/* 資料ダウンロード:アウトライン */
.header-cta__item.is-download .header-cta__link {
  color: var(--color-text-light);
  background: #fff;
  border: 1px solid #ccc;
}

/* お問い合わせ:ピンク塗り */
.header-cta__item.is-contact .header-cta__link {
  color: #fff;
  background: #ec6a9b; /* ロゴのピンクに合わせて調整 */
  border: 1px solid #ec6a9b;
}

/* ===== アイコン(SVG背景画像で制御) ===== */
.cta-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.cta-icon--download {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
}

.cta-icon--contact {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}

/* ===== 769px以上で表示（〜768pxはバーガー内に集約） ===== */
@media screen and (min-width: 769px) {
  #header-cta-area {
    display: inline-block;
  }
}

/* ============================================================
   Hero
   ============================================================ */

.c-hero {
  width: 100%;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg-sub);
}


/* ============================================================
   資料ダウンロードページ専用スタイル (2カラム & フォーム装飾)
   ============================================================ */

/* 左右2カラム構造：スマホは縦積み、992pxで横2カラムへ */
.dl-page-flex {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

/* 左カラム（テキスト） */
.dl-page-left {
  flex: 1;
  min-width: 0;
}

.dl-page-left .post-thumbnail {
  margin-bottom: 32px;
}

/* 右カラム（フォーム） */
.dl-page-right {
  flex: none;
  width: 100%;
}

/* スクロール追従＆フォームのハコ */
.dl-form-sticky-box {
  position: static;
  top: 20px; /* スクロール追従位置（992px以上で sticky 有効） */
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 30px 16px;
}

.dl-form-box-title {
  font-size: 18px;
  text-align: center;
  margin: 0 auto 24px !important;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 12px;
}

/* フォームパーツ全体のレイアウト */
.dl-form-field-group label {
  display: block;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: bold;
}

.dl-label-text {
  display: inline-block;
}

/* 必須マーク */
.dl-required {
  background-color: var(--color-primary);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  margin-left: 8px;
  vertical-align: middle;
}

/* 「姓」「名」の横並び設定 */
.dl-form-row {
  display: flex;
  gap: 12px;
}
.dl-form-col {
  flex: 1;
}

/* リセットCSSを上書きするインプット装飾 */
.dl-form-field-group input[type="text"],
.dl-form-field-group input[type="email"],
.dl-form-field-group input[type="tel"],
.dl-form-field-group textarea {
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  font-size: 15px;
  color: var(--color-text);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

/* フォーカス時の挙動 */
.dl-form-field-group input:focus,
.dl-form-field-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(240, 81, 148, 0.15); /* primaryカラーの薄い影 */
}

/* テキストエリアの高さ調整 */
.dl-form-field-group textarea {
  height: 100px;
  resize: vertical;
}

/* チェックボックス（同意する）の装飾 */
.dl-form-checkbox {
  margin: 24px 0;
}
.dl-form-checkbox input[type="checkbox"] {
  appearance: checkbox; /* ブラウザ標準のチェックボックスを復活 */
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}
.dl-form-checkbox label {
  font-weight: normal;
  font-size: 13px;
  cursor: pointer;
}

/* 送信ボタンの装飾 */
.dl-form-submit-wrap {
  text-align: center;
}
.dl-form-submit-wrap input[type="submit"] {
  display: block;
  width: 100%;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 16px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 6px rgba(255, 108, 0, 0.2);
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
  cursor: pointer;
}

.dl-form-submit-wrap input[type="submit"]:hover {
  opacity: .8;
}

.dl-form-submit-wrap input[type="submit"]:active {
  transform: translateY(1px);
}

/* ------------------------------------------------------------
   Contact Form 7（プラグイン生成フォーム）の装飾
   ------------------------------------------------------------
   CF7 は上の .dl-form-* とは別のマークアップ（.wpcf7-* クラス）を
   出力するため、.dl-form-* のセレクタが一切マッチせず、リセットCSS
   （input/textarea の border・background・appearance 消去）が残った
   素の状態になる。ここで .dl-form-* と同等の見た目を CF7 のクラスへ
   当て直す。
   ※ CF7 フォームは資料DLページ（.dl-form-sticky-box）に限らず、お問い
     合わせ等で独立して設置され得るため、特定の親要素にスコープせず
     .wpcf7-form 自体に対して当てる（＝CF7フォームならどこでも適用）。
   ※ 「姓／名」の横並びなど input 単位のレイアウトは CF7 管理画面の
     フォームテンプレート側（列を成すマークアップ）に依存するため、
     ここでは縦積みを基本とする。
   ------------------------------------------------------------ */

/* 各フィールド間の余白（CF7既定テンプレートの <p> 区切りに対応） */
.wpcf7-form p {
  margin-bottom: 16px;
}

.wpcf7-form p br{
  display: none;
}

/* ラベル（.dl-form-field-group label 相当） */
.wpcf7-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: bold;
}

/* コントロールラッパ（CF7が各入力を囲む span）をブロック化して width を効かせる */
.wpcf7-form-control-wrap {
  display: block;
  margin: 8px 0 0;
}

/* リセットCSSを上書きするインプット装飾（.dl-form-field-group input 相当） */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form textarea,
.wpcf7-form select {
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  padding: 10px 14px;
  font-size: 15px;
  color: var(--color-text);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

/* フォーカス時の挙動 */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(240, 81, 148, 0.15); /* primaryカラーの薄い影 */
}

/* テキストエリアの高さ調整 */
.wpcf7-form textarea {
  height: 100px;
  resize: vertical;
}

/* チェックボックス／承諾（acceptance）の装飾（.dl-form-checkbox 相当） */
.wpcf7-checkbox,
.wpcf7-acceptance {
  margin: 24px 0;
}
.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0 0 8px;
}
.wpcf7-checkbox label,
.wpcf7-acceptance label {
  display: inline; /* ラベルは入力の横に */
  font-weight: normal;
  font-size: 13px;
  cursor: pointer;
}
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"] {
  appearance: auto; /* リセットの appearance:none を打ち消し標準UIを復活 */
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
  cursor: pointer;
}

/* 送信ボタン（input[type=submit] / button どちらでも）（.dl-form-submit-wrap 相当） */
.wpcf7-form .wpcf7-submit {
  display: block;
  width: 100%;
  background-color: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 16px;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 6px rgba(255, 108, 0, 0.2);
  transition: background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
  cursor: pointer;
}
.wpcf7-form .wpcf7-submit:hover {
  opacity: .8;
}
.wpcf7-form .wpcf7-submit:active {
  transform: translateY(1px);
}

/* 送信中スピナー */
.wpcf7-spinner {
  margin: 12px auto 0;
}

/* エラー時の入力枠を赤く */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid {
  border-color: #dc3545;
}

/* エラーメッセージ（各フィールド下の吹き出し） */
.wpcf7-not-valid-tip {
  color: #dc3545;
  font-size: 12px;
  font-weight: normal;
  margin-top: 4px;
}

/* 送信結果メッセージ（フォーム下部の通知） */
.wpcf7-response-output {
  margin: 16px 0 0 !important;
  padding: 12px !important;
  font-size: 13px;
  border-radius: var(--radius-xs);
}

/* 🖥 992px以上：左右2カラム＋フォーム固定（sticky） */
@media screen and (min-width: 992px) {
  .dl-page-flex {
    flex-direction: row;
  }

  .dl-page-right {
    flex: 0 0 380px; /* フォームの幅を380pxに固定 */
    width: auto;
  }

  .dl-form-sticky-box {
    position: sticky;
    padding: 30px 24px;
  }
}

/* アーカイブページ記事ループ */
.c-post {
  color: var(--color-text);
  text-decoration: none;
}

.c-post__header {
  padding: 0 12px;
}

.c-post__loopWrap {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: var(--gap-lg);
  width: 100%;
}
@media screen and (min-width: 769px) {
  .c-post__loopWrap {
    grid-template-columns: 1fr 1fr;
  }
}

.c-post__title {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}

.c-post__title br {
  display: none;
}

.c-post__thumbnailWrap {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 0 0 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
}

.c-post__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.c-post__metaArea {
  padding: 0 12px;
}

.c-post__meta {
  list-style: none;
  margin: 0;
}

.c-date {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}


/* ============================================================
   16. Front Page（トップページ固有）
   ------------------------------------------------------------
   front-page.php 用。メインビジュアル（.p-mainVisual）、
   各セクション（.p-topService / .p-topCompany / .p-topArticle 等）、
   スライドのキーフレームアニメーションを含む。
   ※ パンくず(.breadcrumb*)は全ページ共通だが、配置上ここにある。
   ============================================================ */

.p-mainVisual {
  position: relative;
  background-color: var(--color-bg-warm);
  background: linear-gradient(90deg, var(--color-bg-warm) 0%, #FFEFF3 100%);
  max-height: 800px;
  overflow: hidden;
  color: var(--color-text);
}

/* メインビジュアル：スマホ基本→768px→992pxで段階拡張 */
.p-mainVisual .wrap {
  display: block;
  padding: 40px 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  background-image: url(lib/images/img_main@2x.png);
  background-size: 400px 364px;
  background-repeat: no-repeat;
  background-position: center 128px;
}
@media screen and (min-width: 768px) {
  .p-mainVisual .wrap {
    padding: 128px 0 0;
    background-size: 600px 546px;
    background-position: calc(50% + 280px) 0;
  }
}
@media screen and (min-width: 992px) {
  .p-mainVisual .wrap {
    padding: 140px 0 0;
    background-size: 800px 728px;
    background-position: calc(50% + 320px) 0;
  }
}

.p-mainVisual h2 {
  font-size: 36px;
  line-height: 1.3;
  margin: 0 auto 200px;
  max-width: 280px;
  text-align: center;
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  z-index: 1;
  position: relative;
  color: #555;
}
@media screen and (min-width: 768px) {
  .p-mainVisual h2 {
    font-size: 50px;
    max-width: 400px;
    text-align: left;
    margin: 0 0 100px;
  }
}
@media screen and (min-width: 992px) {
  .p-mainVisual h2 {
    font-size: 56px;
    max-width: 420px;
    margin: 0 0 188px;
  }
}
.p-mainVisual p {
  font-size: 16px;
  max-width: 370px;
  width: auto;
  margin: 0 auto 320px;
  font-feature-settings: "palt";
  z-index: 1;
  position: relative;
  color: #4a4552;
}
@media screen and (min-width: 768px) {
  .p-mainVisual p {
    margin: 0 0 54px;
  }
}
@media screen and (min-width: 992px) {
  .p-mainVisual p {
    font-size: 18px;
    max-width: 400px;
    margin: 0 0 108px;
  }
}

.p-mainVisual__abstract01 {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg width='804' height='903' viewBox='0 0 804 903' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M796 398C726 613 438 471 398 796C358 1121 0 617.809 0 398C0 178.191 178.191 0 398 0C617.809 0 848 183 796 398Z' fill='%23FFF2F6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  display: block;
  width: 804px;
  height: 903px;
  position: absolute;
  z-index: 0;
  left: -640px;
  top: -320px;
}
@media screen and (min-width: 768px) {
  .p-mainVisual__abstract01 {
    left: -336px;
  }
}
.p-mainVisual__abstract02 {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg width='804' height='903' viewBox='0 0 804 903' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.43363 504.351C77.4336 289.351 365.434 431.351 405.434 106.351C445.434 -218.649 803.434 284.542 803.434 504.351C803.434 724.161 625.243 902.351 405.434 902.351C185.624 902.351 -44.5664 719.351 7.43363 504.351Z' fill='%23FFE7ED'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  display: block;
  width: 804px;
  height: 903px;
  position: absolute;
  z-index: 0;
  right: -400px;
  top: 320px;
  display: none;
}
@media screen and (min-width: 992px) {
  .p-mainVisual__abstract02 {
    display: block;
  }
}
@media screen and (min-width: 1201px) {
  .p-mainVisual__abstract02 {
    right: -374px;
    top: 70px;
  }
}
.p-mainVisual__txtWrap {
  padding: 0 24px;
  max-width: var(--wrap-width);
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .p-mainVisual__txtWrap {
    padding: 0 48px;
  }
}
@media screen and (min-width: 992px) {
  .p-mainVisual__txtWrap {
    padding: 0 40px;
  }
}
.p-mainVisual__imgWrap {
  animation: fadeIn 3s linear;
  display: flex;
  width: 1920px;
  overflow: hidden;
}
@media screen and (min-width: 992px) {
  .p-mainVisual__imgWrap {
    width: 2560px;
  }
}
@keyframes fadeIn {
  0%   { opacity: 0; }
  10%  { opacity: 0; }
  100% { opacity: 1; }
}
.p-mainVisual__img {
  width: 1920px;
  height: auto;
}
@media screen and (min-width: 992px) {
  .p-mainVisual__img {
    width: 2560px;
    height: 254px;
  }
}
.p-mainVisual__img--01 {
  animation: slide1-tab 100s -50s linear infinite;
}
@media screen and (min-width: 992px) {
  .p-mainVisual__img--01 {
    animation: slide1 100s -50s linear infinite;
  }
}
.p-mainVisual__img--02 {
  animation: slide2-tab 100s linear infinite;
}
@media screen and (min-width: 992px) {
  .p-mainVisual__img--02 {
    animation: slide2 100s linear infinite;
  }
}
@keyframes slide1 {
  0% {
    transform: translateX(2560px);
  }
  to {
    transform: translateX(-2560px);
  }
}
@keyframes slide2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-5120px);
  }
}
@keyframes slide1-tab {
  0% {
    transform: translateX(1920px);
  }
  to {
    transform: translateX(-1920px);
  }
}
@keyframes slide2-tab {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-3840px);
  }
}

/* ----------------------------------------
* breadcrumb
---------------------------------------- */

.breadcrumb {
  margin: 0;
  overflow: hidden;
  font-size: 13px;
  padding: 0;
  line-height: 22px;
  white-space: pre;
  overflow-x: scroll;
}

.breadcrumb-area {
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 0 var(--gutter-sp);
}
.breadcrumb-area .wrap {
  padding: 10px 0;
  width: auto;
  max-width: var(--wrap-width);
}
@media screen and (min-width: 992px) {
  .breadcrumb-area {
    padding: 0 var(--gutter-pc);
  }
}

.breadcrumb::-webkit-scrollbar {
  display: none;
}
.breadcrumb li {
  display: inline-block;
  list-style: none;
  margin: 0;
}
.breadcrumb li br {
  display: none;
}

/* 親 bzb_breadcrumb() が出力するアイコン（<i class="fa">）を非表示。
   FontAwesome は子テーマで読み込んでおらず、空要素＋余白になるため消す。 */
.breadcrumb .fa {
  display: none;
}


.p-moreTextLink {
  text-align: right;
  margin-top: 24px;
}
.p-moreTextLink__link {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-light);
  transition: color var(--duration-slow) var(--ease);
}
.p-moreTextLink__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.p-moreTextLink__icon {
  font-size: 20px;
  margin-left: 8px;
}

.p-topService {
  background-color: #fff;
  border-radius: var(--radius-sm);
  margin: 40px 0 0;
  overflow: hidden;
}
.p-topService__tabItemWrap {
  display: flex;
  list-style: none;
  margin: 0;
}
.p-topService__tabItem {
  font-weight: bold;
  flex: 1 0 auto;
  text-align: center;
  font-size: 14px;
  margin: 0;
  padding: 16px 0;
  background-color: #EFE2E2;
  color: #777;
  cursor: pointer;
  transition: background-color var(--duration-slow) var(--ease);
}
.p-topService__tabItem:hover {
  background-color: #fff;
}
.p-topService__tabItem.is-active {
  background-color: #fff;
  color: var(--color-primary);
}
.p-topService__tabItem:is(.is-active) {
  cursor: default;
}
@media screen and (min-width: 600px) {
  .p-topService__tabItem {
    font-size: 20px;
  }
}
.p-topService__content {
  display: none;
}
.p-topService__content.is-active {
  display: block;
}
/* スマホ基本は1カラム積み。600pxで2カラムgrid、768pxで余白拡張 */
.p-topService__list {
  display: block;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: var(--gap-md);
  margin: 0;
  padding: 32px 0;
  list-style: none;
}
@media screen and (min-width: 600px) {
  .p-topService__list {
    display: grid;
    padding: 32px;
  }
}
@media screen and (min-width: 768px) {
  .p-topService__list {
    padding: 32px 40px;
  }
}
.p-topService__item {
  padding: 16px 24px;
}
.p-topService__link {
  color: var(--color-text);
}
.p-topService__link:hover {
  text-decoration: none;
  color: var(--color-text);
}
.p-topService__link:hover .p-topService__linkBtn {
  color: var(--color-primary);
}
.p-topService__heading {
  color: inherit;
  margin: 8px 0;
}
.p-topService__txt {
  color: inherit;
}
.p-topService__btnWrap {
  text-align: right;
  margin-top: 16px;
}
.p-topService__linkBtn {
  color: var(--color-text);
  transition: color var(--duration-slow) var(--ease);
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  gap: 8px;
}
.p-topService__icon {
  font-size: 20px;
  margin-left: 8px;
}

/* スマホは縦積み。768pxで2カラムgrid、1201pxで左右余白なし */
.p-topCompany {
  display: block;
  gap: var(--gap-lg);
  grid-template-columns: 1fr 1fr;
  padding: 0;
}
@media screen and (min-width: 768px) {
  .p-topCompany {
    display: grid;
    padding: 0 20px;
  }
}
@media screen and (min-width: 1201px) {
  .p-topCompany {
    padding: 0;
  }
}

.p-topCompany__header {
  margin-bottom: 24px;
}
.p-topCompany__linkList {
  list-style: none;
  margin: 0;
}
.p-topCompany__linkListItem {
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}
.p-topCompany__linkListItem:last-child {
  border: none;
}
.p-topCompany__link {
  display: block;
  color: var(--color-text);
  padding: 16px 8px 16px 64px;
  position: relative;
  transition: color var(--duration-slow) var(--ease);
}
.p-topCompany__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}

@media screen and (min-width: 992px) {
  .p-topCompany__link {
    padding: 16px 16px 16px 74px;
  }
}

.p-topCompany__linkHeading {
  font-size: 16px;
  line-height: var(--line-height-h4);
  margin: 0;
}

@media screen and (min-width: 992px) {
  .p-topCompany__linkHeading {
    font-size: var(--font-size-h4);
  }
}

.p-topCompany__linkDescription {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}
.p-topCompany__icon {
  position: absolute;
  top: 50%;
  left: 16px;
  margin: -16px 0 0;
  width: 32px;
  height: 32px;
  background-size: 32px 32px;
  background-position: center center;
}

.p-topCompany__icon--message {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M280-410h400q12.77 0 21.38-8.62Q710-427.23 710-440t-8.62-21.38Q692.77-470 680-470H280q-12.77 0-21.38 8.62Q250-452.77 250-440t8.62 21.38Q267.23-410 280-410Zm0-120h400q12.77 0 21.38-8.62Q710-547.23 710-560t-8.62-21.38Q692.77-590 680-590H280q-12.77 0-21.38 8.62Q250-572.77 250-560t8.62 21.38Q267.23-530 280-530Zm0-120h400q12.77 0 21.38-8.62Q710-667.23 710-680t-8.62-21.38Q692.77-710 680-710H280q-12.77 0-21.38 8.62Q250-692.77 250-680t8.62 21.38Q267.23-650 280-650ZM172.31-260Q142-260 121-281q-21-21-21-51.31v-455.38Q100-818 121-839q21-21 51.31-21h615.38Q818-860 839-839q21 21 21 51.31v581.84q0 24.31-22.19 33.66-22.2 9.34-39.27-7.74L718.46-260H172.31ZM744-320l56 55.39v-523.08q0-4.62-3.85-8.46-3.84-3.85-8.46-3.85H172.31q-4.62 0-8.46 3.85-3.85 3.84-3.85 8.46v455.38q0 4.62 3.85 8.46 3.84 3.85 8.46 3.85H744Zm-584 0v-480 480Z'/%3E%3C/svg%3E");
}

.p-topCompany__icon--mvv {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='m647.38-224.54 109.39-109.38q8.31-8.31 20.88-8.5 12.58-.2 21.27 8.5 8.69 8.69 8.69 21.07 0 12.39-8.69 21.08L673.08-165.92q-10.85 10.84-25.31 10.84-14.46 0-25.31-10.84l-53.15-53.16q-8.31-8.31-8.12-20.88.19-12.58 8.5-20.89 8.31-8.3 20.95-8.3 12.64 0 20.82 8.3l35.92 36.31ZM170-140q-12.75 0-21.37-8.63-8.63-8.63-8.63-21.38 0-12.76 8.63-21.37Q157.25-200 170-200h280q12.75 0 21.38 8.63 8.62 8.63 8.62 21.38 0 12.76-8.62 21.37Q462.75-140 450-140H170Zm0-155q-12.75 0-21.37-8.63-8.63-8.63-8.63-21.38 0-12.76 8.63-21.37Q157.25-355 170-355h280q12.75 0 21.38 8.63 8.62 8.63 8.62 21.38 0 12.76-8.62 21.37Q462.75-295 450-295H170Zm0-155q-12.75 0-21.37-8.63-8.63-8.63-8.63-21.38 0-12.76 8.63-21.37Q157.25-510 170-510h620q12.75 0 21.37 8.63 8.63 8.63 8.63 21.38 0 12.76-8.63 21.37Q802.75-450 790-450H170Zm0-155q-12.75 0-21.37-8.63-8.63-8.63-8.63-21.38 0-12.76 8.63-21.37Q157.25-665 170-665h620q12.75 0 21.37 8.63 8.63 8.63 8.63 21.38 0 12.76-8.63 21.37Q802.75-605 790-605H170Zm0-155q-12.75 0-21.37-8.63-8.63-8.63-8.63-21.38 0-12.76 8.63-21.37Q157.25-820 170-820h620q12.75 0 21.37 8.63 8.63 8.63 8.63 21.38 0 12.76-8.63 21.37Q802.75-760 790-760H170Z'/%3E%3C/svg%3E");
}

.p-topCompany__icon--info {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M381.04-533.35Q340-574.38 340-632.31q0-57.92 41.04-98.96 41.04-41.04 98.96-41.04 57.92 0 98.96 41.04Q620-690.23 620-632.31q0 57.93-41.04 98.96-41.04 41.04-98.96 41.04-57.92 0-98.96-41.04ZM180-248.46v-28.16q0-29.38 15.96-54.42 15.96-25.04 42.66-38.5 59.3-29.07 119.65-43.61 60.35-14.54 121.73-14.54t121.73 14.54q60.35 14.54 119.65 43.61 26.7 13.46 42.66 38.5Q780-306 780-276.62v28.16q0 25.3-17.73 43.04-17.73 17.73-43.04 17.73H240.77q-25.31 0-43.04-17.73Q180-223.16 180-248.46Zm60 .77h480v-28.93q0-12.15-7.04-22.5-7.04-10.34-19.11-16.88-51.7-25.46-105.35-38.58-53.65-13.11-108.5-13.11t-108.5 13.11Q317.85-341.46 266.15-316q-12.07 6.54-19.11 16.88-7.04 10.35-7.04 22.5v28.93Zm296.5-328.12q23.5-23.5 23.5-56.5t-23.5-56.5q-23.5-23.5-56.5-23.5t-56.5 23.5q-23.5 23.5-23.5 56.5t23.5 56.5q23.5 23.5 56.5 23.5t56.5-23.5Zm-56.5-56.5Zm0 384.62Z'/%3E%3C/svg%3E");
}

.p-topCompany__icon--member {
  background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%231f1f1f'%3E%3Cpath d='M94.62-197.69v-578.47q0-25.3 17.73-43.03t43.03-17.73h258.47q25.3 0 43.03 17.73t17.73 43.03v99.24h330.01q25.3 0 43.03 17.73t17.73 43.03v418.47q0 25.3-17.73 43.04-17.73 17.73-43.03 17.73H155.38q-25.3 0-43.03-17.73-17.73-17.74-17.73-43.04Zm59.99.77h100.01v-100H154.61v100Zm0-160h100.01v-100H154.61v100Zm0-160h100.01v-100H154.61v100Zm0-160h100.01v-100H154.61v100Zm160 480h100.01v-100H314.61v100Zm0-160h100.01v-100H314.61v100Zm0-160h100.01v-100H314.61v100Zm0-160h100.01v-100H314.61v100Zm160 480h330.78v-420H474.61v100h87.7v60h-87.7v100h87.7v60h-87.7v100Zm175.39-260v-60h60v60h-60Zm0 160v-60h60v60h-60Z'/%3E%3C/svg%3E");
}

.p-topArticle {
  margin: 40px 0 0;
}
/* スマホは1カラム積み。600pxで3カラムgrid、992pxで左右余白なし */
.p-topArticle__newArticles {
  display: block;
  gap: var(--gap-lg);
  grid-template-columns: auto auto auto;
  margin: 0;
  list-style: none;
  padding: 0;
}
@media screen and (min-width: 600px) {
  .p-topArticle__newArticles {
    display: grid;
  }
}
@media screen and (min-width: 992px) {
  .p-topArticle__newArticles {
    padding: 0;
  }
}
.p-topArticle__newArticle {
  flex: 1 0 auto;
  padding: 0;
  margin: 0 0 40px;
}
@media screen and (min-width: 600px) {
  .p-topArticle__newArticle {
    margin: 0;
  }
}
/* 3件目：600〜767pxのみ非表示（2カラム化に伴う調整） */
.p-topArticle__newArticle:nth-child(3) {
  display: block;
}
@media screen and (min-width: 600px) {
  .p-topArticle__newArticle:nth-child(3) {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .p-topArticle__newArticle:nth-child(3) {
    display: block;
  }
}
.p-topArticle__link {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-slow) var(--ease);
}
.p-topArticle__link:hover {
  text-decoration: none;
}
.p-topArticle__link h3 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}
.p-topArticle__link h3 br {
  display: none;
}
.p-topArticle img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  object-fit: cover;
  margin-bottom: 4px;
}
@media screen and (min-width: 600px) {
  .p-topArticle img {
    height: 200px;
  }
}
.p-topArticle__txtWrap {
  padding: 0 12px;
}
.p-topArticle__metaWrap {
  display: flex;
  margin-top: 8px;
}

.p-topArticleCategory {
  display: flex;
  margin-top: 24px;
}
.p-topArticleCategory__title {
  margin-top: 40px;
}
.p-topArticleCategory__link {
  display: block;
  flex: 1 0 33%;
  color: #241913;
  padding: 16px;
  position: relative;
  border: 1px solid var(--color-border);
  text-align: center;
  background-color: #fff;
}
.p-topArticleCategory__link:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.p-topArticleCategory__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  margin-top: -16px;
  font-size: 32px;
}
.p-topArticleCategory__text {
  font-size: 14px;
}

.p-contactRecruit {
  display: block;
  gap: var(--gap-lg);
  grid-template-columns: auto auto;
}
@media screen and (min-width: 600px) {
  .p-contactRecruit {
    display: grid;
  }
}
.p-contactRecruit__linkWrap {
  justify-content: center;
}
.p-contactRecruit__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color-bg-sub);
  padding: 80px 0;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: #292222;
  transition: color var(--duration-slow) var(--ease);
}
.p-contactRecruit__link:hover {
  text-decoration: none;
  color: var(--color-primary);
}
.p-contactRecruit__link--contact {
  background-image: url(lib/images/img_contact@2x.jpg);
  background-size: cover;
  margin-bottom: 32px;
}
@media screen and (min-width: 600px) {
  .p-contactRecruit__link--contact {
    margin-bottom: 0;
  }
}
.p-contactRecruit__link--recruit {
  background-image: url(lib/images/img_recruit@2x.jpg);
  background-size: cover;
}
.p-contactRecruit__heading {
  font-size: 24px;
  font-weight: bold;
}

.p-card__items {
  list-style: none;
  display: grid;
  gap: var(--gap-md);
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  margin: 40px 0 0;
}
.p-card__item {
  border-radius: var(--radius-sm);
  background-color: #FFF;
  box-shadow: var(--shadow-default);
  overflow: hidden;
  margin: 0;
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.p-card__item:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}
.p-card .single #main article a,
.p-card .page #main article a,
.p-card__link {
  display: block;
  text-decoration: none;
  color: var(--color-text);
  padding: 0 0 28px;
}
.p-card__link:hover {
  text-decoration: none;
  color: var(--color-text);
}
.p-card__heading {
  display: block;
  font-size: 18px;
  font-weight: bold;
  padding: 16px 12px 0;
  margin: 0;
  color: var(--color-text);
}
@media screen and (min-width: 768px) {
  .p-card__heading {
    padding: 24px 24px 0;
  }
}
.p-card__txt {
  display: block;
  padding: 0 12px;
  margin: 0;
  font-size: 14px;
}
@media screen and (min-width: 768px) {
  .p-card__txt {
    padding: 0 24px;
  }
}

.p-serviceList {
  margin: 32px auto;
}
h3.p-serviceList__heading {
  margin: 0 0 8px;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.p-serviceList p:not([class]) {
  display: none;
}

.p-serviceList br:not([class]) {
  display: none;
}

.p-serviceList__list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 0;
  gap: var(--gap-lg);
}

.p-serviceList__link {
  text-decoration: none;
  color: var(--color-text);
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-serviceList__link:hover {
  text-decoration: none;
}

.p-serviceList__item {
  list-style: none;
  margin: 0;
  box-shadow: var(--shadow-default);
  border-radius: var(--radius-sm);
  transition: box-shadow var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
  grid-column: span 6;
}
@media screen and (min-width: 768px) {
  .p-serviceList__item {
    grid-column: span 3;
  }
}

.p-serviceList__item:hover {
  box-shadow: var(--shadow-hover);
  transform: var(--hover-lift);
}

.p-serviceList__item:hover .p-serviceList__linkBtn {
  background-color: var(--color-primary);
  color: #FFF;
}

.p-serviceList__img {
  display: block;
  width: 240px;
  height: auto;
  margin: 0 auto 16px;
}

.p-serviceList__txt {
  margin: 0 0 16px;
  color: var(--color-text-light);
}

p.p-serviceList__linkBtn {
  display: inline-block;
  align-self: flex-end;
  font-size: 13px;
  margin: auto 0 0;
  padding: 4px 16px;
  background-color: var(--color-bg-sub);
  border-radius: 4px;
  color: var(--color-text);
}

.single-lp .post-content {
	padding: 0;
}


/* ---- 見出し・カテゴリラベル（front-page 等で共用） ---- */
.p-heading {
  font-feature-settings: "palt";
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

@media screen and (min-width: 768px) {
  .p-heading {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.p-heading__eng {
  font-size: 0.64em;
  margin-left: 16px;
  color: var(--color-text-light);
}

.p_category {
  margin-bottom: 12px;
  margin-top: 0;
}


/* ============================================================
   17. Project: 資料ダウンロード一覧（page.php / type=download）

   ■ 設計方針（FLOCSS）
   - これ以降は FLOCSS の Project レイヤー。接頭辞 `.p-` を付け、
     コンポーネント単位で BEM（Block__Element--Modifier）で命名する。
   - 状態は `.is-*`（例: .is-active）で表し、JS から付け外しする。
   - 詳細度を一定に保つため「セレクタは原則クラス1つだけ」。
     `.foo .bar` のような子孫結合や要素型セレクタ（h2, a 等）は使わない。
     これにより既存CSS（#main 等のID／.post-content h2 等）と
     詳細度で競合せず、ここのクラスを後から上書き・拡張しやすい。
   - JS のフックは `data-*` 属性に分離（スタイル用クラスと役割を分ける）。
   ============================================================ */

   /* ---- 全体レイアウト：左=絞り込み / 右=資料一覧 ---- */
/* スマホ基本：1カラム積み（絞り込み→一覧）。992pxで左240px固定の2カラムへ */
.p-downloadArchive {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-md);
  align-items: start;
}

/* 左カラム（絞り込み）。992px以上でスクロール追従させる */
.p-downloadArchive__side {
  position: static;
  top: auto;
}

.p-downloadArchive__main {
  min-width: 0; /* グリッド内で子のはみ出しを防ぐ */
}

/* ---- 絞り込み・並び替えUI ---- */
.p-downloadFilter {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  margin-bottom: var(--gap-lg);
}

/* 左カラムでは「ラベルの下にボタン」の縦積みにする */
.p-downloadFilter__group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.p-downloadFilter__label {
  flex: 0 0 auto;
  min-width: 5em;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
}

.p-downloadFilter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.p-downloadFilter__btn {
  display: inline-block;
  padding: 6px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-light);
  background: var(--color-bg-sub);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  transition: color var(--duration) var(--ease), background-color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.p-downloadFilter__btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.p-downloadFilter__btn.is-active {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ---- 一覧グリッド ---- */
/* 右カラム幅に応じてカード数が自動増減する（左カラム分狭くなった幅に追従） */
.p-downloadList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap-sm);
}

.p-downloadList__item[hidden] {
  display: none;
}

.p-downloadList__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.p-downloadList__link:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}

.p-downloadList__thumb {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg-sub);
}

.p-downloadList__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* カード本文：重要度順に タイトル > カテゴリー > タグ > 日付 */
.p-downloadList__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
}

/* 1. タイトル（最重要） */
.p-downloadList__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  transition: color var(--duration-slow) var(--ease);
}

.p-downloadList__link:hover .p-downloadList__title {
  color: var(--color-primary);
}

/* 2. カテゴリー（バッジで強調） */
.p-downloadList__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-downloadList__cat {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-primary);
  background: rgba(240, 81, 148, .1);
  border-radius: var(--radius-xs);
}

/* 3. タグ（控えめ） */
.p-downloadList__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.p-downloadList__tag {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-light);
}

/* 4. 日付（最も控えめ／一番下に押し下げ） */
.p-downloadList__date {
  margin-top: auto;
  font-size: 11px;
  color: var(--color-text-light);
}

.p-downloadList__empty {
  padding: var(--gap-md) 0;
  color: var(--color-text-light);
  text-align: center;
}

/* ---- レスポンシブ：992px以上で左240px固定の2カラム＋絞り込み縦積み＋追従 ---- */
@media screen and (min-width: 992px) {
  .p-downloadArchive {
    grid-template-columns: 240px 1fr;
    gap: var(--gap-lg);
  }

  /* 左カラムをスクロール追従 */
  .p-downloadArchive__side {
    position: sticky;
    top: 20px;
  }

  /* 絞り込みは縦積み（ラベルの下にボタン） */
  .p-downloadFilter__group {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
  }

  .p-downloadList {
    gap: var(--gap-md);
  }
}

/* ============================================================
   18. Front Page: News（お知らせ一覧 .p-topNewsList）
   ------------------------------------------------------------
   トップの「お知らせ」ループ。日付・カテゴリ・タイトルを横並び表示。
   ============================================================ */
.p-topNewsList {
  background: #FFF;
  overflow: hidden;
  padding: 0;
  margin: 40px auto 0;
  width: 100%;
  max-width: var(--wrap-width);
}

.p-topNewsList article.post {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid var(--color-border);
  margin: 0;
}

.p-topNewsList__title {
  flex: 1 1 auto;
  padding: 0;
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  font-weight: normal;
  color: inherit;
}

.p-topNewsList__title br {
  display: none;
}

.p-topNewsList__link {
  display: block;
  padding: 20px 8px;
  color: var(--color-text);
  transition: color var(--duration-slow) var(--ease);
}

@media screen and (min-width: 768px) {
  .p-topNewsList__link {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 16px;
  }
}
.p-topNewsList__date {
  display: inline-block;
  color: inherit;
  flex: 0 0 96px;
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}
.p-topNewsList__category {
  color: inherit;
  display: inline-block;
  padding: 2px 8px;
  margin: 0 0 0 4px;
  font-size: 11px;
  border: 1px solid var(--color-border);
  flex: 0 0 160px;
  text-align: center;
  transition: color var(--duration-slow) var(--ease);
}
@media screen and (min-width: 768px) {
  .p-topNewsList__category {
    padding: 4px 16px;
    font-size: 14px;
    margin: 0;
  }
}

/* ============================================================
   19. Service / Solution Page（ソリューション紹介・サービス紹介ページ）
   ------------------------------------------------------------
   article（ソリューション紹介）等の本文で使うランディング型セクション群。
   ページ内のブロック順に概ね並ぶ：
     Hero → ボタン(c-btn) → 課題(worries) → 特徴(feature) →
     オプション(options) → セクション余白(section--*) → FAQ(faq) →
     CTA(cta) → 導入事例(caseStudy)
   いずれも FLOCSS の Project/Component レイヤー（.p-* / .c-*）。
   ============================================================ */

/* ---- サービスのtitle直下エリア（Hero） ---- */
.p-serviceHero {
  padding: 0 0 64px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  align-items: center;
  gap: var(--gap-md);
}
.p-serviceHero p:not([class]) {
  display: none;
}

@media screen and (min-width: 768px), print {
  .p-serviceHero {
    grid-template-columns: 1fr 1fr;
  }
}


/* btn */
.c-btn,
p.c-btn {
  display: inline-block;
  margin-bottom: 0;
  padding: 0;
  border-radius: var(--radius-sm);
  width: auto;
  transition: transform var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
  box-shadow: var(--shadow-default);
}

.c-btn--primary {
  background-color: var(--color-primary);
  color: #fff;
}

.c-btn--primary:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}

.c-btn--secondary {
  background-color: var(--color-dark-2);
  color: #fff;
}

.c-btn--secondary:hover {
  transform: var(--hover-lift);
  box-shadow: var(--shadow-hover);
}

.c-btn__wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--gap-xs);
}

@media screen and (min-width: 768px), print {
  .c-btn__wrapper {
    flex-direction: row;
  }
}

@media screen and (min-width: 992px) {
  .c-btn__wrapper {
    justify-content: flex-start;
  }
}

.c-btn__wrapper--centerLarge {
  padding-top: var(--gutter-sp);
  padding-bottom: var(--gutter-sp);
}

@media screen and (min-width: 992px) {
  .c-btn__wrapper--centerLarge {
    justify-content: center;
    padding-top: var(--gutter-pc);
    padding-bottom: var(--gutter-pc);
  }
}

.c-btn__link,
.single #main article a.c-btn__link,
.page #main article a.c-btn__link {
  display: block;
  color: inherit;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: bold;
  padding: 14px 20px;
  text-align: center;
}

.c-btn__link:hover {
  text-decoration: none;
}

/* 課題セクション */
.p-worries {
  margin: 0 calc(50% - 50vw);
  padding: 64px calc(50vw - 50%);
  width: 100vw;
  background-color: var(--color-bg-warm);
}

.p-worries h2 {
  text-align: center;
  margin: 0 0 24px;
  padding: 0;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}
@media screen and (min-width: 768px), print {
  .p-worries h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.p-worries__listWrap {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 32px auto 0;
}
.p-worries__items {
  display: inline-block;
  margin: 0;
}
.p-worries__item {
  list-style: none;
  position: relative;
  margin: 0;;
  padding: 8px 0;
}
.p-worries__item:before {
  content: "";
  position: absolute;
  display: block;
  background-image: url(/wp-content/uploads/2023/02/icon_checkbox.png);
  background-size: 26px 24px;
  background-repeat: no-repeat;
  width: 24px;
  height: 26px;
  top: 8px;
  left: -32px;
}
@media screen and (min-width: 768px), print {
  .p-worries__item:before {
    top: 11px;
  }
}
@media screen and (min-width: 992px) {
  .p-worries__item:before {
    top: 12px;
  }
}
p.p-worries__answer {
  text-align: center;
  margin: 24px 0 0;
  font-weight: bold;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

.p-worries__heading {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px;
}

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

/* 特徴セクション */
.p-feature {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-lg);
  align-items: center;
}

@media screen and (min-width: 768px), print {
  .p-feature {
    grid-template-columns: 1fr 1fr;
  }
}

.p-feature p:not([class]) {
  display: none;
}

.p-feature__head {
  width: 100%;
  height: auto;
  background-color: var(--color-bg-sub);
  flex: 1 0 auto;
}

.p-feature__body {
  padding: 0;
}


h3.p-feature__heading {
  margin: 0;
  padding: 0 0 12px;
}

p.p-feature__text {
  margin: 0;
  padding: 12px 0 0;
}

.p-feature__head {
  border-radius: var(--radius-sm);
}

.p-feature__img {
  border-radius: var(--radius-sm);
}

/* オプションセクション */
.p-options {
  padding: 0 8px;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: var(--gap-lg);
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
}

@media screen and (min-width: 768px), print {
  .p-options {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 992px) {
  .p-options {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 1200px) {
  .p-options {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.p-options__item {
  list-style: none;
  margin: 0;
}

.p-options__item br {
  display: none;
}

.p-options__term {
  display: block;
  padding: 0 0 0 44px;
  position: relative;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-text);
}

.p-options__termSmall {
  font-size: 0.8em;
}

.p-options__term:after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 32px;
  height: 32px;
}

.p-options__description {
  display: block;
  margin: 0;
  padding: 0 0 0 44px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--color-text-light);
}

.p-options__term:after {
  width: 28px;
  height: 37px;
  background-size: 28px 37px;
  background-position: center center;
}

.p-options__term--01:after {
  background-image: url(/wp-content/uploads/2023/02/icon_enquete.png);
}

.p-options__term--02:after {
  width: 20px;
  height: 37px;
  background-image: url(/wp-content/uploads/2023/02/icon_interview.png);
  background-size: 20px 37px;
  margin: 0 0 0 4px;
}

.p-options__term--03:after {
  width: 40px;
  height: 30px;
  background-image: url(/wp-content/uploads/2023/02/icon_review.png);
  background-size: 40px 30px;
  margin: 0 0 0 -6px;
}

.p-options__term--04:after {
  width: 28px;
  height: 37px;
  background-image: url(/wp-content/uploads/2023/02/icon_report.png);
  background-size: 28px 37px;
}

.p-options__term--05:after {
  width: 28px;
  height: 35px;
  background-image: url(/wp-content/uploads/2023/02/icon_manga.png);
  background-size: 28px 35px;
}

.p-options__term--06:after {
  width: 38px;
  height: 38px;
  background-image: url(/wp-content/uploads/2023/02/icon_person.png);
  background-size: 38px 38px;
  margin: 0 0 0 -5px;
}

.p-options__term--07:after {
  width: 38px;
  height: 38px;
  background-image: url(/wp-content/uploads/2023/02/icon_person.png);
  background-size: 38px 38px;
  margin: 0 0 0 -5px;
}

.p-options__term--08:after {
  width: 32px;
  height: 29px;
  background-image: url(/wp-content/uploads/2023/02/icon_like.png);
  background-size: 32px 29px;
  margin: 0 0 0 -2px;
}

.p-options__term--09:after {
  width: 34px;
  height: 28px;
  background-image: url(/wp-content/uploads/2023/02/icon_recycle.png);
  background-size: 34px 28px;
  margin: 0 0 0 -6px;
}

.p-options__term--10:after {
  width: 23px;
  height: 37px;
  background-image: url(/wp-content/uploads/2023/02/icon_mobile.png);
  background-size: 23px 37px;
  margin: 0 0 0 3px;
}

/* セクション毎の余白や背景色 */
.p-section--feature {
  padding: 64px 0;
}

.p-section--feature h2 {
  margin: 0 0 24px;
  padding: 0;
  text-align: center;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}
@media screen and (min-width: 768px), print {
  .p-section--feature h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.p-section--option {
  padding: 64px 0 0;
}

.p-section--option h2 {
  margin: 0 0 24px;
  padding: 0;
  text-align: center;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}
@media screen and (min-width: 768px), print {
  .p-section--option h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.p-section--faq {
  padding: 64px 0;
}

.p-section--serviceList {
  padding: 64px 0 0;
}

.p-section--caseStudy {
  margin: 0 calc(50% - 50vw);
  padding: 64px calc(50vw - 50%);
  width: 100vw;
  background-color: var(--color-bg-warm);
}

.p-section--caseStudy h2 {
  margin: 0 0 24px;
  padding: 0;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
}

/* よくある質問 */
@media screen and (min-width: 768px), print {
  .p-faq {
    display: flex;
  }
}

h2.p-faq__heading {
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 768px), print {
  h2.p-faq__heading {
    margin: 0;
    padding: 0 64px 0 0;
    flex: 0 0 auto;
  }
}
@media screen and (min-width: 992px) {
  h2.p-faq__heading {
    padding: 0 80px 0 0;
  }
}

.p-faq__dl {
  margin: 32px 0 0;
}
@media screen and (min-width: 768px), print {
  .p-faq__dl {
    margin: 0;
    flex: 0 1 auto;
  }
}

.p-faq__dt {
  position: relative;
  padding: 0 0 0 24px;
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: bold;
  color: var(--color-text);
}
@media screen and (min-width: 768px), print {
  .p-faq__dt {
    font-size: 16px;
  }
}

.p-faq__dt:not(:first-child) {
  margin: 24px 0 0;
}

.p-faq__dt:before {
  content: "Q.";
  position: absolute;
  left: 0;
}

.p-faq__dd {
  position: relative;
  padding: 0 0 0 24px;
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
}
@media screen and (min-width: 768px), print {
  .p-faq__dd {
    font-size: 16px;
  }
}

.p-faq__dd:before {
  content: "A.";
  position: absolute;
  left: 0;
}

/* CTA（コールトゥアクション）お問い合わせセクション */
.p-cta {
  background-color: var(--color-bg-warm);
  margin: 0 calc(50% - 50vw);
  padding: 64px calc(50vw - 50%);
  width: 100vw;
  color: var(--color-text-light);
}

.p-cta__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  gap: var(--gap-md);
}

.p-cta__wrapper p:not([class]) {
  display: none;
}
@media screen and (min-width: 992px) {
  .p-cta__wrapper {
    grid-template-columns: 1fr 400px;
  }
}
@media screen and (min-width: 1200px) {
  .p-cta__wrapper {
    padding: 0;
    max-width: var(--wrap-width);
  }
}

.p-cta__body {
  width: 100%;
}

@media screen and (min-width: 992px) {
  .p-cta__head {
    padding: 0;
  }
}

@media screen and (min-width: 992px) {
  .p-cta__body {
    flex: 1 0 auto;
  }
}

h2.p-cta__heading {
  text-align: center;
  margin: 0 0 16px;
  padding: 0;
}
@media screen and (min-width: 992px) {
  h2.p-cta__heading {
    text-align: left;
  }
}

p.p-cta__txt {
  text-align: left;
  margin: 0 auto;
  max-width: 640px;
}
@media screen and (min-width: 992px) {
  p.p-cta__txt {
    max-width: 100%;
  }
}

.p-caseStudy {
  margin: 32px auto 0;
}
.p-caseStudy p:not([class]) {
  display: none;
}
.p-caseStudy br:not([class]) {
  display: none;
}
.p-caseStudy__items {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  margin: 0;
  gap: var(--gap-lg);
}

.p-caseStudy__link {
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.p-caseStudy__link:hover {
  text-decoration: none;
}
.p-caseStudy__item {
  list-style: none;
  margin: 0;
  box-shadow: var(--shadow-default);
  border-radius: var(--radius-sm);
  transition: box-shadow var(--duration-slow) var(--ease), transform var(--duration-slow) var(--ease);
  grid-column: span 6;
  background-color: #fff;
  overflow: hidden;
}
@media screen and (min-width: 768px), print {
  .p-caseStudy__item {
    grid-column: span 3;
  }
}
@media screen and (min-width: 992px) {
  .p-caseStudy__item {
    grid-column: span 2;
  }
}
.p-caseStudy__item:hover {
  box-shadow: var(--shadow-hover);
  transform: var(--hover-lift);
}
.p-caseStudy__item:hover .p-caseStudy__linkBtn {
  background-color: var(--color-primary);
  color: #FFF;
}
.p-caseStudy__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

h3.p-caseStudy__heading {
  margin: 0;
  padding: var(--gap-xs);
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
}
.p-caseStudy__companyWrap {
  display: flex;
  gap: 8px;
  padding: 0 var(--gap-xs);
  align-items: center;
}
@media screen and (min-width: 768px), print {
  .p-caseStudy__companyWrap {
    padding: 0 24px;
  }
}
.p-caseStudy__companyLogo {
  width: 80px;
  height: 80px;
  border-radius: 40px;
}
p.p-caseStudy__companyName {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}
.p-caseStudy__linkBtn {
  margin: auto 16px 16px;
  align-self: flex-end;
  font-size: 13px;
  display: inline-block;
  padding: 4px 16px;
  background-color: var(--color-bg-sub);
  color: var(--color-text);
  border-radius: var(--radius-xs);
  transition: color var(--duration-slow) var(--ease);
}
@media screen and (min-width: 768px), print {
  .p-caseStudy__linkBtn {
    margin: auto 24px 24px;
  }
}

.bzb-sns-btn {
  display: flex;
  gap: var(--gap-xs);
  margin: 16px 0 0;
  list-style: none;
}

.bzb-sns-btn li {
  margin: 0;
}


span.c-contactForm__require {
  font-size: 12px;
  padding: 2px 4px;
  display: inline-block;
  background-color: #eee;
  line-height: 1;
  margin: 0 4px;
  vertical-align: text-bottom;
}

select.wpcf7-form-control.wpcf7-select {
  width: auto;
}

/* input.wpcf7-form-control.wpcf7-submit.has-spinner {
    background: #f45496;
    border-radius: 3px;
} */





/* 特徴セクション */

.p-feature--research {
  padding: 64px 0;
}

.p-feature--research__text {
  margin: 0;
  padding: 12px 0 0;
}

.p-feature--research{
  padding-bottom: 30px;
}

.p-feature--research h2 {
  text-align: center;
  margin: 0 0 24px;
  padding: 0;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}
@media screen and (min-width: 768px), print {
  .p-feature--research h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.p-feature--research__listwrap{
  text-align: center;
  display: block;
  margin-top: 40px;
}

.p-feature--research__ol{
  display: inline-block;
  list-style: none;
  margin: 0;
}

.p-feature--research__li{
  text-align: left;
  margin-bottom: 32px;
}

.p-feature--research__li:last-child{
  margin-bottom: 0;
}

.p-feature--research__heading{
  text-align: left;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  color: #f38cb1;
  font-weight: bold;
}

.p-feature--research__annotation {
  font-size: var(--font-size-sm);
}

.u-annotation-right {
  text-align: right;
  margin-left: auto;
  display: block;
  margin-top: 16px;
  font-size: var(--font-size-sm);
}



.p-section--faq {
  padding: 64px 0;
}
@media screen and (min-width: 768px), print {
  .p-section--faq {
    padding: 64px 0 128px;
  }
}

.p-section--serviceList {
  padding: 64px 0 0;
}

.p-price{
  list-style:none;
  background-color: #FEFAFB;
  background-size: 100dvw;
  padding: 64px calc(50vw - 50%) 32px;
  margin: 0 calc(50% - 50vw);
}

.p-price h2 {
  text-align: center;
  margin: 0 0 24px;
  padding: 0;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}
@media screen and (min-width: 768px), print {
  .p-price h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

p.p-price__subHeading {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  margin: 32px 0;
}

.p-price__listwrap{
  font-size: 22px;
}

.p-price__tableWrap {
  overflow: scroll;
}

.p-price__table{
  font-size: 14px;
  border-collapse:collapse ;
  margin: 0 auto;
  min-width: 520px;
  max-width: 800px;
  display: table;
}

.p-price__tbody {
  display: table-row-group;
}

.p-price__tr {
  display: table-row;
}

.p-price__th{
  background-color: #5B4E4E;
  display: table-cell;
  color: #FFF;
}
.p-price__td {
  background-color: #fff;
  display: table-cell;
}

.p-price__caption {
  caption-side: bottom;
  text-align:right;
  margin-top: 8px;
  display: table-caption;
  font-size: 12px;
}

p.p-panel__subHeading {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  margin: 32px 0;
}

.p-panel {
  background-color: #FEFAFB;
  background-size: 100dvw;
  padding: 64px calc(50vw - 50%) 32px;
  margin: 0 calc(50% - 50vw);
}

.p-panel h2 {
  text-align: center;
  margin: 0 0 24px;
  padding: 0;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}
@media screen and (min-width: 768px), print {
  .p-panel h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.p-panel__wrapper {
  align-items: center;
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .p-panel__wrapper {
    padding: 0;
    max-width: var(--wrap-width);
  }
}

.p-panel__annotation {
  font-size: 12px;
  text-align: right;
}

.p-panel__img {
  display: block;
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
  height: auto;
}

.p-flow {
  background-color: #FFF;
  background-size: 100dvw;
  padding: 64px calc(50vw - 50%) 32px;
  margin: 0 calc(50% - 50vw);
}

.p-flow h2 {
  text-align: center;
  margin: 0 0 24px;
  padding: 0;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}
@media screen and (min-width: 768px), print {
  .p-flow h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.p-flow__wrapper {
  align-items: center;
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .p-flow__wrapper {
    padding: 0;
    max-width: var(--wrap-width);
  }
}

p.p-flow__subHeading {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  margin: 32px 0 16px;
}

.p-flow__3rdHeading {
  font-size: 18px;
}

.p-flow__img {
  display: block;
  margin: 0 auto;
  max-width: 855px;
  width: 100%;
  height: auto;
}

ul.p-flow__ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: auto;
  gap: var(--gap-md);
}

.p-flow__li {
  margin: 0;
  padding: 0;
}

.p-flow__liHeading {
  font-weight: bold;
  margin: 0 0 4px;
  text-align: left;
  display: block;
}

.p-flow__liImg {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #f38cb1;
  width: 100%;
  height: auto;
}

.p-example {
  background-color: var(--color-bg-warm);
  background-size: 100dvw;
  padding: 64px calc(50vw - 50%) 32px;
  margin: 0 calc(50% - 50vw);
}

.p-example h2 {
  text-align: center;
  margin: 0 0 24px;
  padding: 0;
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}
@media screen and (min-width: 768px), print {
  .p-example h2 {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
  }
}

.p-example__wrapper {
  align-items: center;
  max-width: var(--wrap-width);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}
@media screen and (min-width: 1200px) {
  .p-example__wrapper {
    padding: 0;
    max-width: var(--wrap-width);
  }
}

.p-exampleList {
  margin: 40px auto 32px;
}
.p-exampleList p:not([class]) {
  display: none;
}
.p-exampleList br:not([class]) {
  display: none;
}
.p-exampleList__list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: var(--gap-md);
}

@media screen and (min-width: 768px), print {
  .p-exampleList__list {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 992px), print {
  .p-exampleList__list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.p-exampleList__item {
  list-style: none;
  box-shadow: 0 0 16px 8px rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-sm);
  transition: transform var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
  overflow: hidden;
  box-shadow: var(--shadow-default);
}
.p-exampleList__item--hasLink:hover {
  box-shadow: var(--shadow-hover);
  transform: var(--hover-lift);
}
.p-exampleList__item--hasLink:hover .p-exampleList__linkBtn {
  background-color: var(--color-primary);
  color: #FFF;
}

.p-exampleList__liContent {
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 20px;
  background-color: #FFF;
}
.p-exampleList__liContent:hover {
  text-decoration: none;
}

.p-exampleList__img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 16px;
}

h3.p-exampleList__heading {
  padding: 0 20px;
  margin: 0 0 8px;
  font-size: 18px;
  text-align: left;
  transition: color var(--duration-slow) var(--ease);
  border: none;
}
@media screen and (min-width: 992px) {
  h3.p-exampleList__heading {
    font-size: 18px;
  }
}

.p-exampleList__txt {
  padding: 0 20px;
  margin: 0;
  color: var(--color-text-light);
  text-align: left;
}

.p-exampleList__subTxt {
  padding: 0 20px;
  margin: 0 0 16px;
  font-size: 15px;
  text-align: left;
}

.p-exampleList__strongTxt {
  display: block;
  font-weight: bold;
  color: var(--color-primary);
  font-size: 16px;
}

.p-exampleList__txt:not(:last-child) {
  margin: 0 0 16px;
}

.p-exampleList__linkBtn {
  margin: auto 16px 0;
  align-self: flex-end;
  font-size: 13px;
  display: inline-block;
  padding: 4px 16px;
  background-color: var(--color-bg-sub);
  border-radius: var(--radius-xs);
  color: var(--color-text);
  transition: background-color var(--duration-slow) var(--ease), color var(--duration-slow) var(--ease);
}