WPに効く無料コード10選

<?php
/**
 * =========================================================
 * ウィジェットタイトル：先頭「!」でフロント非表示（管理は残る）
 * ---------------------------------------------------------
 * 目的：
 * - 管理画面では識別用にタイトルを付けたい
 * - ただしフロント側ではタイトルを表示したくない
 *
 * 使い方：
 * - ウィジェットの「タイトル」欄の先頭に半角「!」を付ける
 *   例）!おすすめ記事 → フロントではタイトル非表示（!も含めて非表示）
 *
 * 注意：
 * - 半角の「!」のみ対象（全角「！」は対象外）
 * =========================================================
 */

add_filter('widget_title', 'wprl_hide_widget_title_by_exclamation', 10, 3);

function wprl_hide_widget_title_by_exclamation($title, $instance, $id_base){

    // 管理画面（ウィジェット編集/カスタマイザー）ではそのまま表示
    if (is_admin()) {
        return $title;
    }

    // 空チェック
    if (!is_string($title) || $title === '') {
        return $title;
    }

    // 左側の空白を除去して判定（先頭スペースが入ってもOK）
    $trimmed = ltrim($title);

    // 先頭が「!」なら、フロントの表示は空にする（タイトル非表示）
    if (isset($trimmed[0]) && $trimmed[0] === '!') {
        return '';
    }

    return $title;
}

<!-- ▼▼ ここから貼り付け（スマホ横スクロール表） ▼▼ -->
<div class="wprl-tableScroll">
  <table class="wprl-table">
    <thead>
      <tr>
        <th>項目</th>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
        <th>列4</th>
      </tr>
    </thead>

    <tbody>
      <tr><th>行1</th><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
      <tr><th>行2</th><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
      <tr><th>行3</th><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
      <tr><th>行4</th><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
      <tr><th>行5</th><td>内容</td><td>内容</td><td>内容</td><td>内容</td></tr>
    </tbody>
  </table>
</div>

<style>
/* ===== WPレスキューラボ：横スクロールテーブル（カスタムHTML用） ===== */
.wprl-tableScroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.wprl-table{
  width: 100%;
  min-width: 680px; /* ★スマホで横スクロールが出る基準 */
  border-collapse: separate;
  border-spacing: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
}
.wprl-table th,
.wprl-table td{
  padding: 12px 12px;
  border-bottom: 1px solid #eef2f7;
  border-right: 1px solid #eef2f7;
  font-size: 14.5px;
  line-height: 1.6;
  color: #0f172a;
  background: #fff;
  vertical-align: top;
}
.wprl-table thead th{
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg,#f8fafc,#ffffff);
  font-weight: 900;
}
.wprl-table tbody th{
  font-weight: 900;
  background: #fbfdff;
  white-space: nowrap;
}
.wprl-table tr:last-child th,
.wprl-table tr:last-child td{
  border-bottom: none;
}
.wprl-table th:last-child,
.wprl-table td:last-child{
  border-right: none;
}

/* 角丸 */
.wprl-table thead th:first-child{border-top-left-radius: 14px;}
.wprl-table thead th:last-child{border-top-right-radius: 14px;}
.wprl-table tbody tr:last-child th{border-bottom-left-radius: 14px;}
.wprl-table tbody tr:last-child td:last-child{border-bottom-right-radius: 14px;}

/* ホバー（PC向け） */
@media (hover:hover){
  .wprl-table tbody tr:hover td,
  .wprl-table tbody tr:hover th{
    background:#fff7e6;
  }
}
</style>
<!-- ▲▲ ここまで貼り付け ▲▲ -->

<?php
/* =========================================================
  WPレスキューラボ｜可変スペーサー（ショートコード）
  ---------------------------------------------------------
  目的：
    ・ウィジェット間に「余白（スペース）」を簡単に入れる
    ・PC/スマホで高さ(px)を分けられる
    ・任意で薄い区切り線(hr)も入れられる

  使い方（ウィジェットのテキスト/カスタムHTMLに貼る）：
    1) [wprl_spacer h="24"]
       → 24pxの空白（共通）

    2) [wprl_spacer pc="40" sp="18"]
       → PC 40px / スマホ 18px

    3) [wprl_spacer h="12" hr="1"]
       → 12pxの空白 + 薄い区切り線

  属性：
    - h  : 高さ(px)（pc/sp未指定時の共通値）
    - pc : PC時の高さ(px)
    - sp : スマホ時の高さ(px)
    - hr : "1" で薄い区切り線を入れる（任意）

  注意：
    ・安全のため 0〜300px に丸めます
    ・子テーマの functions.php か Code Snippets 推奨
========================================================= */

add_action('wp_head', function () {
  // スペーサー用CSS（必要なら色など調整OK）
  echo '<style>
  .wprl-spacer{display:block;width:100%;height:var(--wprl-h, 16px);}
  .wprl-spacer.is-hr{position:relative;}
  .wprl-spacer.is-hr:before{
    content:"";
    position:absolute;
    left:0; right:0;
    top:50%;
    height:1px;
    background:rgba(15,23,42,.12);
    transform:translateY(-50%);
  }
  @media (max-width:860px){
    .wprl-spacer{height:var(--wprl-sp, var(--wprl-h, 16px));}
  }
  @media (min-width:861px){
    .wprl-spacer{height:var(--wprl-pc, var(--wprl-h, 16px));}
  }
  </style>';
}, 30);

add_shortcode('wprl_spacer', function ($atts) {
  $atts = shortcode_atts([
    'h'  => '',
    'pc' => '',
    'sp' => '',
    'hr' => '',
  ], $atts, 'wprl_spacer');

  // 数値の安全化（0〜300）
  $clamp = function ($v) {
    $v = (string)$v;
    if ($v === '') return '';
    $n = (int) preg_replace('/[^0-9]/', '', $v);
    if ($n < 0) $n = 0;
    if ($n > 300) $n = 300;
    return $n;
  };

  $h  = $clamp($atts['h']);
  $pc = $clamp($atts['pc']);
  $sp = $clamp($atts['sp']);
  $hr = ($atts['hr'] === '1');

  // CSS変数で高さを渡す
  $style = [];
  if ($h  !== '') $style[] = '--wprl-h:'  . $h  . 'px';
  if ($pc !== '') $style[] = '--wprl-pc:' . $pc . 'px';
  if ($sp !== '') $style[] = '--wprl-sp:' . $sp . 'px';

  // 何も指定がない場合の保険
  if (!$style) $style[] = '--wprl-h:16px';

  $classes = 'wprl-spacer' . ($hr ? ' is-hr' : '');

  return '<span class="' . esc_attr($classes) . '" style="' . esc_attr(implode(';', $style)) . '" aria-hidden="true"></span>';
});
?>

<?php
/* =========================================================
  WPレスキューラボ｜注意・補足ボックス（ショートコード）
  ---------------------------------------------------------
  目的：
    ・記事の可読性を上げる（注意/補足/コツ/メモ）
    ・テーマ依存を避けたデザイン（CSS同梱）
    ・type で4色切替：info / warn / tip / note

  使い方：
    [wprl_box type="info" title="補足"]本文...[/wprl_box]
    [wprl_box type="warn" title="注意"]本文...[/wprl_box]
    [wprl_box type="tip"  title="コツ"]本文...[/wprl_box]
    [wprl_box type="note" title="メモ"]本文...[/wprl_box]

  属性：
    - type : info / warn / tip / note（未指定は info）
    - title: 見出し（未指定なら自動で「補足/注意/コツ/メモ」）
========================================================= */

add_action('wp_head', function () {
  echo '<style>
  /* ===== WPRL Box：テーマ非依存で読みやすい装飾 ===== */
  .wprl-box{
    --wprl-accent:#2563eb;
    --wprl-bg:rgba(37,99,235,.08);
    --wprl-border:rgba(37,99,235,.28);
    --wprl-ink:#0f172a;

    border:1px solid var(--wprl-border);
    background:var(--wprl-bg);
    border-radius:16px;
    padding:14px 14px;
    margin:14px 0;
    box-shadow:0 10px 24px rgba(0,0,0,.04);
    color:var(--wprl-ink);
  }
  .wprl-box__head{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 10px;
  }
  .wprl-box__icon{
    width:34px;
    height:34px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.65);
    border:1px solid rgba(255,255,255,.55);
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    flex:0 0 auto;
  }
  .wprl-box__icon svg{
    width:18px;
    height:18px;
    fill:var(--wprl-accent);
    display:block;
  }
  .wprl-box__title{
    margin:0;
    font-weight:900;
    letter-spacing:.01em;
    font-size:15.5px;
    line-height:1.35;
    color:var(--wprl-ink);
  }
  .wprl-box__body{
    margin:0;
    color:#334155;
    font-size:15.5px;
    line-height:1.9;
  }
  .wprl-box__body p{margin:0 0 10px;}
  .wprl-box__body p:last-child{margin-bottom:0;}
  .wprl-box__body ul, .wprl-box__body ol{
    margin:0;
    padding-left:18px;
    line-height:1.9;
  }

  /* ===== 4種：色テーマ ===== */
  .wprl-box.is-info{
    --wprl-accent:#2563eb;
    --wprl-bg:rgba(37,99,235,.08);
    --wprl-border:rgba(37,99,235,.28);
  }
  .wprl-box.is-warn{
    --wprl-accent:#ea580c;
    --wprl-bg:rgba(234,88,12,.10);
    --wprl-border:rgba(234,88,12,.30);
  }
  .wprl-box.is-tip{
    --wprl-accent:#16a34a;
    --wprl-bg:rgba(22,163,74,.09);
    --wprl-border:rgba(22,163,74,.28);
  }
  .wprl-box.is-note{
    --wprl-accent:#64748b;
    --wprl-bg:rgba(100,116,139,.10);
    --wprl-border:rgba(100,116,139,.28);
  }

  /* ===== スマホ微調整 ===== */
  @media (max-width:860px){
    .wprl-box{padding:13px 13px;border-radius:14px;}
    .wprl-box__title{font-size:15px;}
    .wprl-box__body{font-size:15px;}
  }
  </style>';
}, 30);

function wprl_box_icon_svg($type){
  // SVGは外部依存なし（軽量・安全）
  switch($type){
    case 'warn':
      return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2V9h2v5z"/></svg>';
    case 'tip':
      return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 21h6v-1H9v1zm3-20C7.93 1 5 3.93 5 7c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-4.26c1.81-1.27 3-3.36 3-5.74 0-3.07-2.93-6-7-6zm2.5 10.1-.5.35V16h-4v-4.55l-.5-.35C8.01 10.08 7 8.62 7 7c0-2.21 2.24-4 5-4s5 1.79 5 4c0 1.62-1.01 3.08-2.5 4.1z"/></svg>';
    case 'note':
      return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm1 7V3.5L18.5 9H15zM8 13h8v2H8v-2zm0 4h8v2H8v-2zm0-8h5v2H8V9z"/></svg>';
    case 'info':
    default:
      return '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 7h2V9h-2V7zm0 4h2v6h-2v-6zm1-10C6.48 1 2 5.48 2 11s4.48 10 10 10 10-4.48 10-10S17.52 1 12 1zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>';
  }
}

add_shortcode('wprl_box', function ($atts, $content = '') {
  $atts = shortcode_atts([
    'type'  => 'info',
    'title' => '',
  ], $atts, 'wprl_box');

  $type = strtolower(trim((string)$atts['type']));
  $allowed = ['info','warn','tip','note'];
  if (!in_array($type, $allowed, true)) $type = 'info';

  $default_titles = [
    'info' => '補足',
    'warn' => '注意',
    'tip'  => 'コツ',
    'note' => 'メモ',
  ];
  $title = trim((string)$atts['title']);
  if ($title === '') $title = $default_titles[$type];

  $content = do_shortcode($content);
  $content = wp_kses_post($content);

  $icon = wprl_box_icon_svg($type);

  return '<aside class="wprl-box is-' . esc_attr($type) . '" role="note">'
    . '<div class="wprl-box__head">'
      . '<div class="wprl-box__icon" aria-hidden="true">' . $icon . '</div>'
      . '<p class="wprl-box__title">' . esc_html($title) . '</p>'
    . '</div>'
    . '<div class="wprl-box__body">' . $content . '</div>'
  . '</aside>';
});
?>

<?php
/* =========================================================
  WPレスキューラボ｜FAQアコーディオン（schema.org FAQPage 対応）
  ---------------------------------------------------------
  目的：
    ・FAQをアコーディオンで見やすく表示
    ・FAQPage 構造化データ(JSON-LD)を同時に出力（SEO用途）
    ・テーマ依存を避けるCSS同梱

  使い方（例）：
    [wprl_faq title="よくある質問" disclaimer="1"]
      [wprl_faq_item q="納期はどれくらい？"]内容...[/wprl_faq_item]
      [wprl_faq_item q="料金の目安は？"]内容...[/wprl_faq_item]
    [/wprl_faq]

  ショートコード：
    - 親：[wprl_faq]
        属性：
          title="見出し"（任意）
          disclaimer="1" で注意書き表示（既定=1）
          id="任意ID"（未指定なら自動）
    - 子：[wprl_faq_item]
        属性：
          q="質問"（必須）
        本文：回答（HTML可・ショートコード可）

  注意：
    ・FAQPage は「ページの主要コンテンツがFAQ」のときに推奨されます。
      乱用すると構造化の評価が落ちる可能性があります（自己責任）。
========================================================= */

/* ---- 1) CSS（フロントに1回だけ出す） ---- */
add_action('wp_head', function(){
  echo '<style>
  /* ===== WPRL FAQ：テーマ非依存のFAQアコーディオン ===== */
  .wprl-faq{
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,.04);
    overflow:hidden;
    margin:16px 0;
  }
  .wprl-faq__head{
    padding:14px 16px;
    border-bottom:1px solid #eef2f7;
    background:linear-gradient(180deg,#fbfdff,#ffffff);
  }
  .wprl-faq__title{
    margin:0;
    font-weight:900;
    font-size:18px;
    color:#0f172a;
    line-height:1.35;
  }
  .wprl-faq__disc{
    margin:10px 0 0;
    padding:10px 12px;
    border:1px solid #fde68a;
    border-radius:14px;
    background:#fffbeb;
    color:#7c2d12;
    font-size:13.5px;
    line-height:1.75;
  }

  .wprl-faq__items{padding:6px 0;}

  /* item */
  .wprl-faqItem{
    border-top:1px solid #eef2f7;
  }
  .wprl-faqItem:first-child{
    border-top:none;
  }

  /* summary */
  .wprl-faqItem summary{
    list-style:none;
    cursor:pointer;
    padding:14px 16px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:#0f172a;
    font-weight:900;
    line-height:1.55;
    position:relative;
  }
  .wprl-faqItem summary::-webkit-details-marker{display:none;}

  .wprl-faqItem__qBadge{
    flex:0 0 auto;
    width:26px;
    height:26px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:rgba(37,99,235,.10);
    border:1px solid rgba(37,99,235,.25);
    color:#2563eb;
    font-weight:900;
    font-size:13px;
    margin-top:1px;
  }
  .wprl-faqItem__qText{
    flex:1 1 auto;
    font-size:15.5px;
  }

  /* caret */
  .wprl-faqItem__caret{
    flex:0 0 auto;
    margin-left:auto;
    width:26px;
    height:26px;
    border-radius:10px;
    display:grid;
    place-items:center;
    border:1px solid #e5e7eb;
    background:#fff;
    color:#0f172a;
  }
  .wprl-faqItem__caret svg{
    width:14px;
    height:14px;
    display:block;
    transition:transform .2s ease;
  }
  .wprl-faqItem[open] .wprl-faqItem__caret svg{
    transform:rotate(180deg);
  }

  /* answer */
  .wprl-faqItem__a{
    padding:0 16px 14px;
    color:#334155;
    font-size:15.5px;
    line-height:1.9;
  }
  .wprl-faqItem__a p{margin:0 0 10px;}
  .wprl-faqItem__a p:last-child{margin-bottom:0;}
  .wprl-faqItem__a ul,.wprl-faqItem__a ol{margin:0; padding-left:18px; line-height:1.9;}

  /* hover (PC) */
  @media (hover:hover){
    .wprl-faqItem summary:hover{
      background:#f8fafc;
    }
  }

  @media (max-width:860px){
    .wprl-faq__title{font-size:17px;}
    .wprl-faqItem__qText{font-size:15px;}
    .wprl-faqItem__a{font-size:15px;}
  }
  </style>';
}, 30);

/* ---- 2) FAQデータを「親ショートコード内で集約」する仕組み ---- */
$GLOBALS['wprl_faq_stack'] = [];

add_shortcode('wprl_faq', function($atts, $content = ''){
  $atts = shortcode_atts([
    'title' => 'よくある質問',
    'disclaimer' => '1',
    'id' => '',
  ], $atts, 'wprl_faq');

  // ID（同一ページ複数のFAQがあってもOK）
  $id = trim((string)$atts['id']);
  if($id === ''){
    $id = 'wprl-faq-' . wp_generate_uuid4();
  }

  // この親ブロック用にスタックを初期化
  $GLOBALS['wprl_faq_stack'][$id] = [];

  // まず子ショートコードを展開（この過程で stack にQ/Aが積まれる）
  $inner = do_shortcode($content);

  // JSON-LD生成（Q/Aが1件以上のときだけ）
  $jsonld = '';
  $qa = $GLOBALS['wprl_faq_stack'][$id];
  if(is_array($qa) && count($qa) >= 1){
    $faq = [
      '@context' => 'https://schema.org',
      '@type'    => 'FAQPage',
      'mainEntity' => []
    ];
    foreach($qa as $row){
      $faq['mainEntity'][] = [
        '@type' => 'Question',
        'name'  => $row['q'],
        'acceptedAnswer' => [
          '@type' => 'Answer',
          'text'  => $row['a_plain'], // テキストはHTMLでもOKだが、基本はプレーン寄りにする
        ],
      ];
    }
    $jsonld = '<script type="application/ld+json">' . wp_json_encode($faq, JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) . '</script>';
  }

  $title = esc_html((string)$atts['title']);
  $show_disc = (string)$atts['disclaimer'] === '1';

  $disc = '';
  if($show_disc){
    $disc = '<div class="wprl-faq__disc">
      ※FAQ構造化データ（FAQPage）は「ページの主要コンテンツがFAQ」である場合に適しています。
      乱用や不適切なマークアップは評価に影響する可能性があります。最終判断は自己責任でお願いします。
    </div>';
  }

  // 出力（アコーディオンは details/summary でJS不要）
  $out  = '<section class="wprl-faq" id="' . esc_attr($id) . '" aria-label="FAQ">';
  $out .=   '<div class="wprl-faq__head">';
  $out .=     '<h3 class="wprl-faq__title">' . $title . '</h3>';
  $out .=     $disc;
  $out .=   '</div>';
  $out .=   '<div class="wprl-faq__items">' . $inner . '</div>';
  $out .= '</section>';
  $out .= $jsonld;

  // 後片付け
  unset($GLOBALS['wprl_faq_stack'][$id]);

  return $out;
});

add_shortcode('wprl_faq_item', function($atts, $content = ''){
  $atts = shortcode_atts([
    'q' => '',
    'parent_id' => '', // 通常は自動で親が管理するので未使用（予備）
    'open' => '0',      // 1で初期オープン
  ], $atts, 'wprl_faq_item');

  $q = trim((string)$atts['q']);
  if($q === '') return ''; // 質問がないものは出さない

  // 回答：HTMLとして表示用 / JSON-LD用に軽く整形したテキストも持つ
  $a_html = do_shortcode($content);
  $a_html = wp_kses_post($a_html);

  // JSON-LD用（タグ除去・改行はスペース）
  $a_plain = wp_strip_all_tags($a_html);
  $a_plain = preg_replace('/\s+/u', ' ', $a_plain);
  $a_plain = trim((string)$a_plain);

  // どのFAQ親に属するか：最後に作られたstackキーへ積む（親が直前に初期化する前提）
  $keys = array_keys($GLOBALS['wprl_faq_stack']);
  $current_id = end($keys);
  if($current_id){
    $GLOBALS['wprl_faq_stack'][$current_id][] = [
      'q' => $q,
      'a_plain' => $a_plain,
    ];
  }

  $open = ((string)$atts['open'] === '1') ? ' open' : '';

  $caret = '<span class="wprl-faqItem__caret" aria-hidden="true">
    <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"></path></svg>
  </span>';

  $out  = '<details class="wprl-faqItem"' . $open . '>';
  $out .=   '<summary>';
  $out .=     '<span class="wprl-faqItem__qBadge">Q</span>';
  $out .=     '<span class="wprl-faqItem__qText">' . esc_html($q) . '</span>';
  $out .=     $caret;
  $out .=   '</summary>';
  $out .=   '<div class="wprl-faqItem__a">' . $a_html . '</div>';
  $out .= '</details>';

  return $out;
});
?>

/* =========================================================
  WPレスキューラボ｜LP用 CTAボタンセット（追加CSS）
  ---------------------------------------------------------
  使い方（例）：
    <a class="wprl-cta wprl-cta--blue" href="...">無料相談・お問い合わせ</a>

  色バリエ：
    - wprl-cta--blue    ：王道ブルー（信頼系）
    - wprl-cta--grad    ：ブルー×オレンジの目立つグラデ
    - wprl-cta--dark    ：黒系（引き締め）
    - wprl-cta--line    ：LINE風グリーン（任意）

  サイズ：
    - wprl-cta--lg      ：大きめ（LP向け）
    - wprl-cta--md      ：標準
    - wprl-cta--sm      ：小さめ

  アイコン：
    - wprl-cta--mail / --tel / --chat / --doc（疑似アイコン）
  補足テキスト：
    - <div class="wprl-ctaNote">24時間受付・返信は原則メール</div>

========================================================= */

:root{
  --wprl-cta-radius: 16px;
  --wprl-cta-shadow: 0 16px 34px rgba(0,0,0,.12);
  --wprl-cta-shadowHover: 0 18px 40px rgba(0,0,0,.16);
  --wprl-cta-ink: #0f172a;
  --wprl-cta-muted: #64748b;
  --wprl-cta-line: #e5e7eb;
}

/* ベース */
.wprl-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  text-decoration:none !important;
  font-weight: 900;
  letter-spacing: .02em;

  border-radius: var(--wprl-cta-radius);
  border: 1px solid rgba(15,23,42,.10);

  padding: 14px 18px;
  min-height: 52px;

  box-shadow: var(--wprl-cta-shadow);
  transform: translateZ(0);
  transition: transform .08s ease, opacity .2s ease, box-shadow .2s ease, filter .2s ease;

  color:#fff;
  background:#2563eb;
  line-height: 1.2;
  white-space: nowrap;
}

.wprl-cta:hover{
  opacity: .96;
  box-shadow: var(--wprl-cta-shadowHover);
  filter: saturate(1.05);
}

.wprl-cta:active{
  transform: translateY(1px);
}

.wprl-cta:focus{
  outline: none;
}

.wprl-cta:focus-visible{
  outline: 3px solid rgba(37,99,235,.28);
  outline-offset: 3px;
}

/* 幅 */
.wprl-cta--block{
  display:flex;
  width: 100%;
}

/* サイズ */
.wprl-cta--lg{
  padding: 16px 22px;
  min-height: 58px;
  font-size: 16px;
}
.wprl-cta--md{
  font-size: 15.5px;
}
.wprl-cta--sm{
  padding: 10px 14px;
  min-height: 44px;
  font-size: 14px;
  border-radius: 14px;
}

/* 色：ブルー（信頼） */
.wprl-cta--blue{
  background: #2563eb;
  border-color: rgba(37,99,235,.18);
}

/* 色：目立つグラデ（ブルー×オレンジ） */
.wprl-cta--grad{
  background: linear-gradient(90deg, #2563eb 0%, #1d4ed8 40%, #f97316 100%);
  border-color: rgba(249,115,22,.22);
}

/* 色：ダーク */
.wprl-cta--dark{
  background: linear-gradient(180deg, #111827 0%, #0b1220 100%);
  border-color: rgba(255,255,255,.08);
}

/* 色：LINE風（任意） */
.wprl-cta--line{
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  border-color: rgba(34,197,94,.22);
}

/* 疑似アイコン（絵文字を使わず、CSSで丸いバッジ） */
.wprl-cta__ico{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display:inline-grid;
  place-items:center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  flex: 0 0 auto;
  position: relative;
}

/* それっぽい記号（CSSのみ） */
.wprl-cta--mail .wprl-cta__ico:before{
  content:"✉";
  font-size: 14px;
  line-height: 1;
}
.wprl-cta--tel .wprl-cta__ico:before{
  content:"☎";
  font-size: 14px;
  line-height: 1;
}
.wprl-cta--chat .wprl-cta__ico:before{
  content:"💬";
  font-size: 14px;
  line-height: 1;
}
.wprl-cta--doc .wprl-cta__ico:before{
  content:"📄";
  font-size: 14px;
  line-height: 1;
}

/* 文言 */
.wprl-cta__txt{
  display:inline-block;
}

/* 補足テキスト */
.wprl-ctaNote{
  margin-top: 10px;
  color: var(--wprl-cta-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* レイアウト用：ボタンを並べる */
.wprl-ctaRow{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
.wprl-ctaRow .wprl-cta{
  flex: 0 0 auto;
}

/* スマホ最適化 */
@media (max-width: 860px){
  .wprl-cta{
    white-space: normal;
    text-align:center;
  }
  .wprl-ctaRow{
    flex-direction:column;
    align-items:stretch;
  }
  .wprl-ctaRow .wprl-cta{
    width: 100%;
  }
}

<!-- ▼▼ ここから貼り付け（自動目次TOC） ▼▼ -->

<nav class="wprl-toc" data-wprl-toc aria-label="目次">
  <div class="wprl-toc__head">
    <div class="wprl-toc__ttl">目次</div>
    <button type="button" class="wprl-toc__toggle" data-wprl-toc-toggle aria-expanded="true">
      たたむ
    </button>
  </div>

  <div class="wprl-toc__body" data-wprl-toc-body>
    <ol class="wprl-toc__list" data-wprl-toc-list></ol>
  </div>

  <div class="wprl-toc__note">
    ※見出しは自動取得（h2/h3）。目次に入れたくない見出しは <code>wprl-no-toc</code> を付けて除外できます。
  </div>
</nav>

<style>
/* =========================================================
  WPレスキューラボ｜自動目次（TOC）テンプレ
  - このブロックを置いたページだけ有効
========================================================= */
.wprl-toc{
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  overflow: hidden;
  margin: 14px 0 18px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  color:#0f172a;
}

.wprl-toc__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f7;
  background: #ffffff;
}
.wprl-toc__ttl{
  font-weight: 900;
  letter-spacing:.02em;
  font-size: 15.5px;
  display:flex;
  align-items:center;
  gap: 10px;
}
.wprl-toc__ttl:before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background:#111827;
  display:inline-block;
}

.wprl-toc__toggle{
  appearance:none;
  border: 1px solid #cbd5e1;
  background:#f8fafc;
  color:#0f172a;
  font-weight: 900;
  font-size: 12.5px;
  padding: 7px 10px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform .05s ease, opacity .2s ease, background .2s ease;
}
.wprl-toc__toggle:hover{opacity:.95; background:#eef2f7;}
.wprl-toc__toggle:active{transform: translateY(1px);}

.wprl-toc__body{
  padding: 10px 14px 12px;
}

.wprl-toc__list{
  margin:0;
  padding-left: 18px;
  line-height: 1.85;
  color:#334155;
  font-size: 14.8px;
}
.wprl-toc__list a{
  color:#1d4ed8;
  text-decoration:none;
  font-weight: 800;
}
.wprl-toc__list a:hover{
  text-decoration: underline;
}

.wprl-toc__item{
  margin: 6px 0;
}
.wprl-toc__item--h3{
  margin-left: 10px;
  list-style-type: circle;
  color:#475569;
}
.wprl-toc__item--h3 a{
  font-weight: 700;
  color:#2563eb;
}

.wprl-toc__note{
  padding: 10px 14px 12px;
  border-top: 1px solid #eef2f7;
  background:#f8fafc;
  color:#64748b;
  font-size: 12.5px;
  line-height: 1.7;
}
.wprl-toc__note code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  font-weight: 900;
}

/* スマホ */
@media (max-width: 860px){
  .wprl-toc__list{font-size: 14.3px;}
}
</style>

<script>
/* =========================================================
  WPレスキューラボ｜自動目次（TOC）生成
  - 対象：同一ページ内の h2 / h3
  - 除外：.wprl-no-toc が付いた見出し
  - IDが無い見出しには自動でID付与
========================================================= */
(function(){
  var toc = document.querySelector("[data-wprl-toc]");
  if(!toc) return;

  var list = toc.querySelector("[data-wprl-toc-list]");
  var body = toc.querySelector("[data-wprl-toc-body]");
  var toggle = toc.querySelector("[data-wprl-toc-toggle]");
  if(!list || !body || !toggle) return;

  // 目次対象を拾う：記事コンテンツ内を優先（無ければ全体）
  // Gutenbergの一般的なコンテンツ領域候補を優先的に探す
  var scope =
    document.querySelector("main") ||
    document.querySelector(".wp-site-blocks") ||
    document.querySelector(".entry-content") ||
    document.querySelector("article") ||
    document.body;

  // TOC自身の中の見出しは除外するため、scopeからTOCを除外したい
  // ざっくり：全見出し取得後、toc内かどうかで除外
  var headings = scope.querySelectorAll("h2, h3");

  function slugify(str){
    return (str || "")
      .trim()
      .toLowerCase()
      .replace(/[\s　]+/g, "-")
      .replace(/[^\w\-ぁ-んァ-ヶ一-龠ー]/g, "")
      .replace(/\-+/g, "-")
      .replace(/^\-|\-$/g, "");
  }

  function uniqueId(base){
    var id = base || "toc";
    var n = 2;
    while(document.getElementById(id)){
      id = (base || "toc") + "-" + n;
      n++;
    }
    return id;
  }

  // 目次生成
  var count = 0;
  headings.forEach(function(h){
    // TOC内の見出しは除外
    if(toc.contains(h)) return;

    // 除外クラス
    if(h.classList && h.classList.contains("wprl-no-toc")) return;

    var text = (h.textContent || "").trim();
    if(!text) return;

    // 見出しにIDが無ければ付与
    if(!h.id){
      var base = slugify(text) || ("heading-" + (count+1));
      h.id = uniqueId(base);
    }

    var li = document.createElement("li");
    li.className = "wprl-toc__item " + (h.tagName === "H3" ? "wprl-toc__item--h3" : "wprl-toc__item--h2");

    var a = document.createElement("a");
    a.href = "#" + h.id;
    a.textContent = text;

    li.appendChild(a);
    list.appendChild(li);
    count++;
  });

  // 目次が空なら非表示（ページに見出しがない場合）
  if(count === 0){
    toc.style.display = "none";
    return;
  }

  // スムーズスクロール（ブラウザが対応していればCSSでOKだが保険でJS）
  // ただしユーザーの設定（reduce motion）に配慮
  var prefersReduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  list.addEventListener("click", function(e){
    var link = e.target.closest("a");
    if(!link) return;

    var id = link.getAttribute("href");
    if(!id || id.charAt(0) !== "#") return;

    var target = document.querySelector(id);
    if(!target) return;

    e.preventDefault();

    var top = target.getBoundingClientRect().top + window.pageYOffset - 12; // 少し上に余白
    window.scrollTo({
      top: top,
      behavior: prefersReduced ? "auto" : "smooth"
    });

    // URLハッシュ更新（履歴に残しすぎないよう replace）
    try{
      history.replaceState(null, "", id);
    }catch(_){}
  });

  // たたむ/ひらく
  toggle.addEventListener("click", function(){
    var expanded = toggle.getAttribute("aria-expanded") === "true";
    if(expanded){
      body.style.display = "none";
      toggle.setAttribute("aria-expanded", "false");
      toggle.textContent = "ひらく";
    }else{
      body.style.display = "";
      toggle.setAttribute("aria-expanded", "true");
      toggle.textContent = "たたむ";
    }
  });
})();
</script>

<!-- ▲▲ ここまで貼り付け ▲▲ -->

<!-- ▼▼ ここから貼り付け（関連記事カード） ▼▼ -->

<section class="wprl-related" aria-label="関連記事">
  <header class="wprl-related__head">
    <h3 class="wprl-related__ttl">関連記事</h3>
    <p class="wprl-related__lead">あわせて読むと理解が早い記事をまとめました。</p>
  </header>

  <div class="wprl-related__grid">

    <!-- ▼ 1枚目（画像あり例：画像URLは任意） -->
    <a class="wprl-relatedCard" href="https://crayonbox.jp/contact-us/">
      <div class="wprl-relatedCard__thumb">
        <img src="https://crayonbox.jp/wp-content/uploads/2026/02/8d1c5c738f3dd981cbf32c14d5365ced-1.jpg" alt="" loading="lazy">
      </div>
      <div class="wprl-relatedCard__body">
        <div class="wprl-relatedCard__kicker">おすすめ</div>
        <div class="wprl-relatedCard__title">無料相談・お問い合わせはこちら</div>
        <div class="wprl-relatedCard__desc">困っている内容を送るだけ。必要な部分だけピンポイントで相談できます。</div>
        <div class="wprl-relatedCard__meta">カテゴリ：お問い合わせ</div>
      </div>
    </a>

    <!-- ▼ 2枚目（画像なし例：thumbを外すだけでもOK） -->
    <a class="wprl-relatedCard wprl-relatedCard--noimg" href="/wordpress-guide/security-seo-checklist/">
      <div class="wprl-relatedCard__body">
        <div class="wprl-relatedCard__kicker">チェックリスト</div>
        <div class="wprl-relatedCard__title">公開前に必須！セキュリティ&SEO設定20項目</div>
        <div class="wprl-relatedCard__desc">初心者が落ちがちな初期設定をまとめて確認できます。</div>
        <div class="wprl-relatedCard__meta">カテゴリ：WordPressガイド</div>
      </div>
    </a>

    <!-- ▼ 3枚目 -->
    <a class="wprl-relatedCard wprl-relatedCard--noimg" href="/common-problems/table-layout-tips/">
      <div class="wprl-relatedCard__body">
        <div class="wprl-relatedCard__kicker">困った時</div>
        <div class="wprl-relatedCard__title">表・レイアウト崩れの直し方（スマホ対応）</div>
        <div class="wprl-relatedCard__desc">横スクロール表や崩れ対策の考え方を整理。</div>
        <div class="wprl-relatedCard__meta">カテゴリ：トラブル対処</div>
      </div>
    </a>

    <!-- ▼ 4枚目 -->
    <a class="wprl-relatedCard wprl-relatedCard--noimg" href="/pro-support/shortcode-development/">
      <div class="wprl-relatedCard__body">
        <div class="wprl-relatedCard__kicker">プロ支援</div>
        <div class="wprl-relatedCard__title">ショートコード制作（ピンポイント対応）</div>
        <div class="wprl-relatedCard__desc">「こういう動きをしたい」を短いコードで実装します。</div>
        <div class="wprl-relatedCard__meta">カテゴリ：プロ支援</div>
      </div>
    </a>

  </div>
</section>

<style>
/* =========================================================
  WPレスキューラボ｜関連記事カード（内部リンク強化）
  - このブロック内だけに効く安全設計
========================================================= */
.wprl-related{
  margin: 18px 0 20px;
  padding: 14px 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
  color:#0f172a;
}

.wprl-related__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef2f7;
}
.wprl-related__ttl{
  margin:0;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .02em;
  display:flex;
  align-items:center;
  gap: 10px;
}
.wprl-related__ttl:before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background:#111827;
  display:inline-block;
}
.wprl-related__lead{
  margin:0;
  color:#64748b;
  font-size: 12.8px;
  font-weight: 700;
  line-height: 1.6;
}

/* グリッド */
.wprl-related__grid{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* カード本体（aタグ） */
.wprl-relatedCard{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items:stretch;

  text-decoration:none !important;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background:#ffffff;
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);

  transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease;
  color:#0f172a;
}
.wprl-relatedCard:hover{
  transform: translateY(-1px);
  border-color: #cbd5e1;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}
.wprl-relatedCard:active{transform: translateY(0px);}

.wprl-relatedCard__thumb{
  background:#f8fafc;
  border-right: 1px solid #eef2f7;
}
.wprl-relatedCard__thumb img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* 画像なし */
.wprl-relatedCard--noimg{
  grid-template-columns: 1fr;
}
.wprl-relatedCard--noimg .wprl-relatedCard__thumb{
  display:none;
}

/* 本文 */
.wprl-relatedCard__body{
  padding: 12px 12px 12px 0;
}
.wprl-relatedCard--noimg .wprl-relatedCard__body{
  padding: 12px 12px;
}

.wprl-relatedCard__kicker{
  display:inline-flex;
  align-items:center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid #cbd5e1;
  background:#f8fafc;
  font-size: 11.5px;
  font-weight: 900;
  color:#0f172a;
}

.wprl-relatedCard__title{
  margin-top: 8px;
  font-weight: 900;
  font-size: 14.8px;
  line-height: 1.45;
  color:#0f172a;
}
.wprl-relatedCard__desc{
  margin-top: 6px;
  color:#475569;
  font-size: 12.8px;
  line-height: 1.7;
}
.wprl-relatedCard__meta{
  margin-top: 8px;
  color:#64748b;
  font-size: 12px;
  font-weight: 800;
}

/* レスポンシブ */
@media (max-width: 860px){
  .wprl-related__head{
    align-items:flex-start;
    flex-direction:column;
  }
  .wprl-related__grid{
    grid-template-columns: 1fr;
  }
  .wprl-relatedCard{
    grid-template-columns: 86px 1fr;
  }
  .wprl-relatedCard__body{
    padding: 12px 12px 12px 0;
  }
}
</style>

<!-- ▲▲ ここまで貼り付け ▲▲ -->

/* =========================================================
  ボタン・リンク“押しやすさ”改善セット（追加CSS）
  - タップ領域（スマホ）を確保
  - リンクの下線を整える（読みやすさUP）
  - ホバー/フォーカスの視認性UP（PC＆キーボード操作）
  - 影響範囲は本文エリア中心に限定して安全寄り
========================================================= */

/* 影響範囲（どれか当たればOK） */
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main) {
  --wprl-tap-min: 44px;        /* 推奨タップ高さ */
  --wprl-radius: 12px;
  --wprl-ring: 0 0 0 3px rgba(59,130,246,.28);
  --wprl-ink: #0f172a;
  --wprl-link: #2563eb;
  --wprl-linkHover: #1d4ed8;
}

/* ===== 1) 通常リンク：下線を“見やすい”方向へ ===== */
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main) a{
  color: var(--wprl-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.16em;
  text-decoration-color: rgba(37,99,235,.55);
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* ホバー（PC） */
@media (hover:hover){
  :where(.entry-content, .wp-block-post-content, .is-layout-flow, main) a:hover{
    color: var(--wprl-linkHover);
    text-decoration-color: rgba(29,78,216,.75);
  }
}

/* フォーカス（キーボード操作も見やすく） */
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main) a:focus-visible{
  outline: none;
  box-shadow: var(--wprl-ring);
  border-radius: 6px;
}

/* ===== 2) ボタン系：押しやすい“高さ”と余白 ===== */
/* WP標準ボタン（例：.wp-block-button__link） */
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main) .wp-block-button__link,
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main) button,
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main) input[type="submit"],
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main) input[type="button"],
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main) input[type="reset"]{
  min-height: var(--wprl-tap-min);
  padding: 12px 16px;
  border-radius: var(--wprl-radius);
  line-height: 1.2;
}

/* ボタンのフォーカス */
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main)
  .wp-block-button__link:focus-visible,
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main)
  button:focus-visible,
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main)
  input[type="submit"]:focus-visible{
  outline: none;
  box-shadow: var(--wprl-ring);
}

/* ===== 3) “小さいリンク”を押しやすく（本文内） ===== */
/* 例：本文中のテキストリンクを “ゆるくボタン化” してタップミスを減らす */
@media (max-width: 860px){
  :where(.entry-content, .wp-block-post-content, .is-layout-flow, main) p a,
  :where(.entry-content, .wp-block-post-content, .is-layout-flow, main) li a{
    display: inline-block;
    padding: 6px 8px;
    margin: -6px -8px;            /* 行間を崩さずタップ領域だけ広げる */
    border-radius: 10px;
  }
  :where(.entry-content, .wp-block-post-content, .is-layout-flow, main) p a:active,
  :where(.entry-content, .wp-block-post-content, .is-layout-flow, main) li a:active{
    background: rgba(37,99,235,.10);
  }
}

/* ===== 4) 例外：カード型リンク等 “装飾済み” は下線を消す ===== */
/* よくある：カード・ボタン・ナビ・画像リンク */
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main)
  a.wp-block-button__link,
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main)
  a:has(img),
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main)
  .wprl-relatedCard,
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main)
  .wprl-fxbtn{
  text-decoration: none !important;
}

/* ===== 5) “外部リンクっぽい”視認性（任意：嫌なら削除OK） ===== */
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main)
  a[target="_blank"]{
  text-decoration-style: dotted;
}

/* ===== 6) クリック不能に見えるリンク対策（色が薄すぎるテーマ向け） ===== */
:where(.entry-content, .wp-block-post-content, .is-layout-flow, main)
  a:visited{
  opacity: .92;
}

/* =========================================================
  Contact Form 7 見た目改善セット（追加CSS）
  - 影響範囲：CF7(.wpcf7)内に限定（安全）
  - スマホ優先：タップ高さ/余白/エラー見やすさ
  - テーマ差分で崩れにくい「控えめ＆堅牢」設計
========================================================= */

.wpcf7{
  --cf7-ink:#0f172a;
  --cf7-muted:#64748b;
  --cf7-line:#e5e7eb;
  --cf7-soft:#f8fafc;
  --cf7-bg:#ffffff;

  --cf7-brand:#2563eb;              /* アクセント（青） */
  --cf7-brand2:#f97316;             /* サブ（オレンジ） */
  --cf7-danger:#dc2626;             /* エラー */
  --cf7-warning:#b45309;

  --cf7-radius:14px;
  --cf7-shadow:0 12px 26px rgba(0,0,0,.06);
  --cf7-tap:44px;                    /* 推奨タップ高さ */
  --cf7-pad:12px;
  --cf7-font:system-ui, -apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;

  color:var(--cf7-ink);
  font-family:var(--cf7-font);
}

/* テーマ側の余計な余白や幅指定の影響を受けにくく */
.wpcf7 form{
  margin:0;
  max-width: 960px;
}

/* ===== ラベル（見出し風に） ===== */
.wpcf7 form label{
  display:block;
  font-weight:900;
  color:var(--cf7-ink);
  letter-spacing:.01em;
  margin: 0 0 8px;
}

/* 1フィールド単位：余白 */
.wpcf7 .wpcf7-form-control-wrap{
  display:block;
}

/* 典型：pで包まれる構造に対応（テーマがpのmarginを持つため） */
.wpcf7 form p{
  margin: 0 0 14px;
}
.wpcf7 form p:last-child{margin-bottom:0;}

/* ===== 入力（text/email/tel/url/number/date）& select & textarea ===== */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea{
  width:100%;
  box-sizing:border-box;
  min-height: var(--cf7-tap);
  padding: var(--cf7-pad) 14px;
  border: 1px solid var(--cf7-line);
  border-radius: var(--cf7-radius);
  background: var(--cf7-bg);
  color: var(--cf7-ink);
  font-size: 15.5px;
  line-height: 1.5;
  outline: none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* textareaは高さ確保 */
.wpcf7 textarea{
  min-height: 160px;
  resize: vertical;
}

/* placeholder */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder{
  color: rgba(100,116,139,.85);
}

/* focus（入力中の分かりやすさ） */
.wpcf7 input:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus{
  border-color: rgba(37,99,235,.65);
  box-shadow: 0 0 0 4px rgba(37,99,235,.18);
  background: #ffffff;
}

/* selectの矢印がテーマで崩れる場合があるので最小限 */
.wpcf7 select{
  padding-right: 34px;
}

/* ===== チェック/ラジオ：押しやすく ===== */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"]{
  width: 18px;
  height: 18px;
  vertical-align: middle;
  accent-color: var(--cf7-brand);
}

/* チェック/ラジオの並び（CF7の構造：span.wpcf7-list-item） */
.wpcf7 .wpcf7-list-item{
  margin: 0 14px 10px 0;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.wpcf7 .wpcf7-list-item-label{
  color: var(--cf7-ink);
  font-weight: 700;
}

/* ===== 送信ボタン（目立つグラデ） ===== */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"]{
  width: 100%;
  min-height: calc(var(--cf7-tap) + 6px);
  border: none;
  border-radius: calc(var(--cf7-radius) + 2px);
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .02em;
  color:#fff;

  background: linear-gradient(135deg, var(--cf7-brand), var(--cf7-brand2));
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
  transition: transform .06s ease, opacity .18s ease, box-shadow .18s ease;
}
@media (hover:hover){
  .wpcf7 input[type="submit"]:hover,
  .wpcf7 button[type="submit"]:hover{
    opacity: .96;
    box-shadow: 0 18px 36px rgba(0,0,0,.18);
  }
}
.wpcf7 input[type="submit"]:active,
.wpcf7 button[type="submit"]:active{
  transform: translateY(1px);
}

/* ===== 必須/任意の見え方（CF7: span.wpcf7-form-control-wrap近辺に任意で入れる想定） =====
   テキスト側で「（必須）」など入れてもOKですが、
   もし 必須 をラベルに入れた場合に綺麗に見せます */
.wpcf7 .wprl-required{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color:#fff;
  background: var(--cf7-danger);
  margin-left: 8px;
}
.wpcf7 .wprl-optional{
  display:inline-flex;
  align-items:center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  color: #0f172a;
  background: #e2e8f0;
  margin-left: 8px;
}

/* ===== 入力エラー（CF7標準） ===== */
/* 赤い吹き出し（not-valid-tip） */
.wpcf7 .wpcf7-not-valid-tip{
  margin-top: 8px;
  font-weight: 800;
  color: var(--cf7-danger);
  font-size: 13px;
  line-height: 1.6;
}

/* NG入力枠（CF7: .wpcf7-not-valid） */
.wpcf7 .wpcf7-not-valid{
  border-color: rgba(220,38,38,.65) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.16) !important;
}

/* 送信後のメッセージ枠（成功/失敗/警告） */
.wpcf7 .wpcf7-response-output{
  margin: 14px 0 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px;
  font-weight: 800;
  line-height: 1.7;
  box-shadow: var(--cf7-shadow);
  background: #fff;
}

/* 成功 */
.wpcf7 form.sent .wpcf7-response-output{
  border: 1px solid rgba(34,197,94,.35);
  background: linear-gradient(180deg,#ecfdf5,#ffffff);
  color: #065f46;
}

/* 失敗（送信エラー） */
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
  border: 1px solid rgba(220,38,38,.35);
  background: linear-gradient(180deg,#fef2f2,#ffffff);
  color: #7f1d1d;
}

/* 警告（スパム判定等） */
.wpcf7 form.spam .wpcf7-response-output{
  border: 1px solid rgba(180,83,9,.35);
  background: linear-gradient(180deg,#fffbeb,#ffffff);
  color: #7c2d12;
}

/* ===== ローディングアイコンのズレ対策 ===== */
.wpcf7 .wpcf7-spinner{
  margin-left: 10px;
}

/* ===== スマホ微調整 ===== */
@media (max-width: 860px){
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="url"],
  .wpcf7 input[type="number"],
  .wpcf7 input[type="date"],
  .wpcf7 select,
  .wpcf7 textarea{
    font-size: 15.5px; /* iOS拡大防止のため16に寄せたいなら 16px でもOK */
  }
}

/* ===== 任意：フォーム全体をカード化したい場合（必要ならコメント解除） =====
.wpcf7 form{
  padding: 16px 16px 18px;
  border: 1px solid var(--cf7-line);
  border-radius: 18px;
  background: linear-gradient(180deg,#ffffff,#fbfdff);
  box-shadow: var(--cf7-shadow);
}
*/