:root{
  --page-bg: #ffd93d;     /* JSから切替 */
  --fg: #0b0f18;
  --muted: rgba(11,15,24,.72);
}

*{ box-sizing:border-box; }
html,body{
  margin:0;
  min-height:100%;
  color:var(--fg);
  font-family: "M PLUS 1p", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:16px;
  overflow-x:hidden;
  background: var(--page-bg);
}

/* 背景（フラワー）＋読みやすさの薄いベール（テキスト個別背景は使わない） */
body{
  transition: background-color 900ms ease, background 1200ms ease;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,.35),
      rgba(255,255,255,.10) 35%,
      rgba(255,255,255,.06) 65%,
      rgba(0,0,0,.05));
  mix-blend-mode: soft-light;
}

img{
    width:100%;
    height:auto;
    opacity: 1;
    transition: all 0.4s ease-out;
}

img:hover{
  opacity: 0.8;
}

img.qd-single__img {
    object-fit: cover;
    object-position: center;
    aspect-ratio: 16 / 9;
    width: 100%;
}

a{
  color:#0b0f18;
  text-decoration: none;
  transition: all 0.4s ease-out;
  opacity: 1;
}

a:hover{
  text-decoration: none;
  opacity: 0.5;
}

h1, h2, h3, h4, h5{
  line-height: 1.2;
}

/* ===== 3D stage ===== */
.qd-stage{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
#c{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* ===== header (logo image) ===== */
.qd-header{
  position:fixed;
  top:16px;
  left:16px;
  z-index:30;
  pointer-events:none;
}
.qd-logo-img{
  display:block;
  height:40px;
  width:auto;
}

/* ===== main ===== */
.qd-main{
  position:relative;
  z-index:10;
}

.qd-sec{
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  padding:78px 18px;
  margin-top: -50px;
}

.qd-inner{
  width:min(1040px, calc(100vw - 36px));
  margin:0 auto;
}

/* ===== HERO ===== */
.qd-hero h1{
  margin:0 0 14px;
  font-size: clamp(14px, 5.2vw, 28px);
  font-weight: 800;
  letter-spacing: .05em;
  line-height: 1.05;
  color: rgba(255, 255, 255, .92);
  text-shadow:
  0 1px 0 rgba(255,255,255,.55),   /* 上部ハイライト（柔らかい立体感） */
  0 0 3px rgba(0,0,0,.18),         /* ごく薄い輪郭（黄色に馴染む） */
  0 6px 18px rgba(0,0,0,.16);      /* 柔らかい落ち影 */
}

.qd-inner p.qd-sub{
  margin:0;
  color:var(--muted);
  font-size:1rem;
  font-weight:400;
  text-transform:none;
}

/* ===== Headings (NEW: h5 + h2 motto) ===== */
h5.text-3d-light-sm{
  margin:0 0 10px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.80);
  text-shadow:
    0 1px 0 rgba(255,255,255,.70),
    0 10px 20px rgba(0,0,0,.10);
}

/* motto は h2 で大きく（見せ場） */
h2.qd-motto{
  margin: 0 0 18px;
  font-size: clamp(22px, 3.6vw, 42px);
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow:
    0 1px 0 rgba(255,255,255,.70),
    0 12px 26px rgba(0,0,0,.14);
}

/* cards/kv 内の h3 */
h3{
  margin:0 0 8px;
  font-size:14px;
  font-weight:900;
  letter-spacing:.04em;
}

/* 本文 */
.qd-inner p{
  margin:0 auto 20px;
  line-height: 2.0;
  font-size: 14px;
  color: rgba(11,15,24,.72);
}

/* ===== grid / cards ===== */
.qd-grid{
  margin-top:100px;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:80px;
}
.qd-grid-column03{
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:40px;
}
.qd-grid-column03 p{
  line-height: 1.5;
}
.qd-kv{
  margin-top:14px;
  display:grid;
  grid-template-columns:80px 1fr;
  gap:10px 14px;
}

.qd-kv > div:nth-child(odd){
  color: rgba(255,255,255,.62);
  font-size:12px;
  font-weight:900;
}
.qd-contact{
  color:#fff;
}

.qd-note{ opacity:.75; margin-left:.35em; }

/* button */
.qd-btn{
  display:inline-block;
  margin-top:14px;
  padding:11px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.16);
  color: rgba(11,15,24,.92);
  text-decoration:none;
  font-size:13px;
  font-weight:900;
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 26px rgba(0,0,0,.10);
}
.qd-btn:hover{ background: rgba(255,255,255,.74); }

.qd-footer{ padding:30px 0 60px; }
.qd-footer small{
  color: rgba(255,255,255,.62);
}

/* ===== loading ===== */
.loading{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.55);
  z-index:999;
}
.loading__box{
  width:min(420px, calc(100vw - 48px));
}
.loading__title{ font-size:20px; font-weight:900; color:#fff;margin-bottom:10px; }
.loading__bar{ height:30px; border-radius:999px; overflow:hidden; background: rgba(157, 126, 233, 0.1); }
.loading__barInner{ height:100%; width:0%; background: rgba(56, 156, 10,0.70); }
.loading__msg{ margin-top:10px; font-size:12px; color: rgba(0, 0, 0, 0.65); }

/* =========================================================
   NEW: Reveal System（タイトル→モットー→本文→カード）
   ========================================================= */
.qd-sec .reveal-title,
.qd-sec .reveal-motto,
.qd-sec .reveal-body,
.qd-sec .reveal-card{
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(6px);
  transition:
    opacity 700ms ease,
    transform 850ms cubic-bezier(.2,.9,.2,1),
    filter 850ms ease;
  will-change: opacity, transform, filter;
}

.qd-sec.is-in .reveal-title{
  opacity:1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

.qd-sec.is-in .reveal-motto{
  opacity:1;
  transform: translate3d(0,0,0);
  filter: blur(0);
  transition-delay: 120ms;
}

.qd-sec.is-body-in .reveal-body{
  opacity:1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

.qd-sec.is-cards-in .reveal-card{
  opacity:1;
  transform: translate3d(0,0,0);
  filter: blur(0);
}

/* カードは個別遅延（JSで --d を入れる） */
.qd-sec .reveal-card{
  transition-delay: var(--d, 0ms);
}

/* タイトル以外だけを“ぼかし箱”に */
.reveal-body{
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  background: rgba(255, 255, 255, 0.2);
  padding: 14px 16px;
}

.qd-team h3{
  color:#2b5bff;
  color:#4fbef4;
  font-size:1.4rem;
}
.qd-team p{
  color:#ffffff;
  font-size:0.9rem;
}
/* ミニビューア：カード上方にはみ出せるようoverflow解除 */
.qd-team.qd-grid{
  overflow: visible;
}
.qd-team .qd-card{
  min-height: 120px;
  overflow: visible;
}

/*レスポンシブ*/
@media (max-width: 860px){
  .qd-grid{ grid-template-columns:1fr; }
  .qd-grid-column03{grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 560px){
  .qd-hero h1{text-align: center;}
  .qd-kv{ grid-template-columns:1fr; }
  .qd-inner p.qd-sub{
    font-size: 0.8rem;
    text-align: center;
  }
  .qd-grid-column03{
    gap:20px;
  }
}

@media (max-width: 450px){
  .qd-grid-column03{
    grid-template-columns:1fr;
}
}

/* =========================================================
   ADD: Non-top pages Header (Hamburger) + Fullscreen Overlay Menu
   - ベースCSSは一切変更しない（ここから下だけ追記）
   - トップは従来どおり（ロゴだけ）
========================================================= */

/* top判定：functions.phpで body_class に is-top を付ける前提 */
body .qd-header{
  top:0;
  left:0;
  width:100%;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  z-index:1000;
}

body .qd-header-inner{
  width:min(100%, calc(100vw - 36px));
  height:100%;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

body .qd-logo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  pointer-events:auto;
}
body .qd-logo-img{
  height:40px;
  opacity:1;
}

/* hamburger */
body .qd-burger{
  width:44px;
  height:38px;
  position:relative;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  padding:0;
}
body .qd-burger span{
  position:absolute;
  left:0;
  width:100%;
  height:5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .28s ease, top .28s ease, bottom .28s ease, opacity .22s ease;
}
body .qd-burger span:nth-child(1){ top:1px; }
body .qd-burger span:nth-child(2){ top:16px; }
body .qd-burger span:nth-child(3){ bottom:1px; }

body .qd-burger.is-open span:nth-child(1){
  top:11px;
  transform: rotate(45deg);
}
body .qd-burger.is-open span:nth-child(2){
  opacity:0;
}
body .qd-burger.is-open span:nth-child(3){
  bottom:11px;
  transform: rotate(-45deg);
}

/* 固定ヘッダー分の余白（他ページのみ） */
body .qd-main{
  padding-top: 60px;
}

/* =========================================================
   Fullscreen overlay menu（定義はこれ1つに統一）
   - nav#qdMenu 自体を「全面オーバーレイ」にする
   - closeは「全画面(.qd-menu)基準」で absolute
========================================================= */

/* nav本体＝全面（閉じてる時は非表示） */
body .qd-menu{
  position:fixed;
  inset:0;
  z-index:3000;
  display:none;
  pointer-events:none;
}

/* 開いた時 */
body .qd-menu.is-open{
  display:block;
  pointer-events:auto;
}

/* 背景（暗幕） */
body .qd-menu::before{
  content:"";
  position:absolute;
  inset:0;
  background: #ffa500;;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:0;
  transition: opacity 280ms ease;
}

body .qd-menu.is-open::before{
  opacity:1;
}

/* パネル（中央） */
body .qd-menu-panel{
  position:absolute;
  inset:0;
  margin:auto;
  width:min(1260px, calc(100vw - 40px));
  border-radius: 28px;
  padding: 46px 26px 26px;
  background: transparent;      /* 背景色無し */
  box-shadow: none;             /* 箱感無し */
  display:flex;
  align-items:center;
  justify-content:center;
  transform: translate3d(0, 16px, 0) scale(.98);
  opacity:0;
  /* NEW: hologram reveal (CSS fallback when GSAP is unavailable) */
  -webkit-clip-path: circle(0% at 85% 10%);
  clip-path: circle(0% at 85% 10%);

  transition:
    transform 420ms cubic-bezier(.2,.9,.2,1),
    opacity 320ms ease,
    clip-path 520ms cubic-bezier(.2,.9,.2,1),
    -webkit-clip-path 520ms cubic-bezier(.2,.9,.2,1);
}

body .qd-menu.is-open .qd-menu-panel{
  transform: translate3d(0, 0, 0) scale(1);
  opacity:1;
  -webkit-clip-path: circle(140% at 50% 35%);
  clip-path: circle(140% at 50% 35%);
}

/* close button：全画面(.qd-menu)に対して absolute（＝意図どおり） */
body .qd-menu .qd-menu-close{
  position:absolute;
  top: calc(18px + env(safe-area-inset-top));   /* iPhoneノッチ対策 */
  right: calc(18px + env(safe-area-inset-right));
  width:56px;
  height:56px;
  border-radius:999px;
  border: 2px solid rgba(255,255,255,.92);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor:pointer;
  z-index:3100;
}

/* ×印（CSSで描画） */
body .qd-menu .qd-menu-close::before,
body .qd-menu .qd-menu-close::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24px;
  height:2px;
  background: rgba(255,255,255,.95);
  transform-origin:center;
}
body .qd-menu .qd-menu-close::before{
  transform: translate(-50%,-50%) rotate(45deg);
}
body .qd-menu .qd-menu-close::after{
  transform: translate(-50%,-50%) rotate(-45deg);
}

/* iOSの青い輪っかを抑える（フォーカスは残す） */
body .qd-menu .qd-menu-close:focus{
  outline: none;
}
body .qd-menu .qd-menu-close:focus-visible{
  outline: 3px solid rgba(255,255,255,.65);
  outline-offset: 4px;
}

/* メニューリスト：中央寄せ・背景なし・文字白 */
body .qd-menu-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap: 22px;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* li はふわっと出す（JSで --d） */
body .qd-menu-list > li{
  opacity:0;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 360ms ease,
    transform 520ms cubic-bezier(.2,.9,.2,1);
  transition-delay: var(--d, 0ms);
}

body .qd-menu.is-open .qd-menu-list > li{
  opacity:1;
  transform: translate3d(0, 0, 0);
}

/* リンク：背景色完全撤去・白文字 */
body .qd-menu-list a{
  display:inline-block;
  padding: 10px 10px;
  border-radius: 14px;
  text-decoration:none;
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  background: transparent;
  font-size: clamp(1.2rem, 4.6vw, 1.8rem);
  line-height: 1.15;
}

body .qd-menu-list a:hover{
  opacity:.9;
}

/* メニューオープン中はスクロール止める（JSが落ちても保険） */
body.is-menu-open{
  overflow:hidden;
}



/* =========================================================
   ADD: Inline style 제거分（index.php / page.php / single.php）
   - 直書きCSSをすべてクラス化してここに移設
========================================================= */

/* 一覧ページの見出し */
.qd-list-title{
  margin: 0 0 18px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 10px #ffa500;
}

/* 投稿カード（一覧） */
.qd-post-card{
  margin: 0 0 18px;
}

.qd-post-card__title{
  margin: 0 0 6px;
  font-size: 18px;
}

.qd-post-card__link{
  text-decoration: none;
  color: inherit;
}

.qd-post-card__link:hover{
  opacity: .92;
}

.qd-post-card__meta{
  font-size: 12px;
  opacity: .7;
  margin-bottom: 8px;
}

.qd-post-card__excerpt{
  font-size: 14px;
  line-height: 1.9;
}

/* ページネーションの余白 */
.qd-pagination{
  margin: 24px 0;
}

/* the_posts_pagination の見た目（必要最低限） */
.qd-pagination .nav-links{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.qd-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.16);
  background: rgba(255,255,255,.55);
  text-decoration:none;
  color: rgba(11,15,24,.92);
  font-weight:900;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.qd-pagination .page-numbers.current{
  background: rgba(255,255,255,.78);
}
.qd-pagination .page-numbers:hover{
  background: rgba(255,255,255,.72);
}

/* 固定ページタイトル */
.qd-page-title{
  margin: 0 0 14px;
  font-size:2.5rem;
  font-weight: 900;
  color:#fff;
  text-shadow: 0 0 10px #ffa500;
}

/* 記事ページタイトル + 日付 */
.qd-single-title{
  margin: 0 0 8px;
  font-weight: 900;
  color:#fff;
  text-shadow: 0 0 10px #ffa500;
  line-height: 1.2;
}
.qd-single-meta{
  font-size: 12px;
  opacity: .7;
  margin-bottom: 18px;
}

/* 本文の“ぼかし箱”（page/single共通） */
.qd-content-box{
  line-height: 2.0;
  padding: 16px 0;
}

/* =========================================================
   POLISH: Menu Overlay + Panel subtle premium
========================================================= */

/* overlay button = 暗幕（クリック領域） */
body .qd-menu .qd-menu-overlay{
  position:absolute;
  inset:0;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  background: #9acd32;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:0;
  transition: opacity 280ms ease;
}

/* 開いた時に暗幕表示 */
body .qd-menu.is-open .qd-menu-overlay{
  opacity:1;
}

/* パネルを少しだけ“浮かせる” */
body .qd-menu-panel{
  /* 既存の透明コンセプトは維持しつつ、ほんの少しだけ奥行き */
  filter: drop-shadow(0 26px 70px rgba(0,0,0,.22));
}

/* ハンバーガーの当たり判定をちょい広く＝触り心地アップ */
body .qd-burger{
  touch-action: manipulation;
}

/* Reduce Motion 対応（OSで軽減設定なら動きを控える） */
@media (prefers-reduced-motion: reduce){
  body .qd-menu *{
    transition: none !important;
  }
}

/* =========================================================
   Blog layout: 3-column grid + sidebar
========================================================= */

.qd-layout{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 60px;
  align-items:start;
}

.qd-content{
  min-width: 0;
}

.qd-sidebar{
  position: sticky;
  top: 96px; /* 非トップ固定ヘッダーを考慮 */
  min-width: 0;
}

.qd-sidebar .wp-block-heading{
  color:#fff;
  text-shadow: 0 0 10px #ffa500;
}

/* 3列グリッド（記事一覧） */
.qd-post-grid{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.qd-post-card{
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.qd-post-card__thumb{
  display:block;
  position:relative;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background: rgba(255,255,255,.35);
}

.qd-post-card__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
  transition: transform .35s ease;
}

.qd-post-card__noimg{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.65;
}

.qd-post-card__body{
  padding: 12px 12px 14px;
}

.qd-post-card__meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  font-size:12px;
  color: rgba(11,15,24,.8);
  margin-bottom: 8px;
}

.qd-post-card__cat{
  display:inline-flex;
  align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 900;
  background: rgba(255,255,255,.55);
}

.qd-post-card__title{
  margin:0;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.5;
}

.qd-post-card__link{
  color: rgba(11,15,24,.92);
  text-decoration:none;
}

/* Sidebar widgets */
.qd-widget{
  margin-bottom: 14px;
}

.qd-widget__title{
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
}

.qd-widget__text{
  margin:0;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(11,15,24,.72);
}

/* WordPress標準のウィジェット（リスト）を整える */
.qd-sidebar ul{
  margin:0;
  padding-left: 10px;
}
.qd-sidebar ul li{
  list-style:square;
  margin: 6px 0;
}

.qd-sidebar li a{
    font-size: 0.9rem;
    text-decoration: none;
}


/* Pagination: 既存qd-paginationがある前提で微調整 */
.qd-pagination{
  margin-top: 22px;
}

/* Responsive */
@media (max-width: 1100px){
  .qd-layout{ grid-template-columns: minmax(0, 1fr) 280px; }
  .qd-post-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px){
  .qd-layout{ grid-template-columns: 1fr; }
  .qd-sidebar{ position: static; top:auto; }
  .qd-post-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .qd-post-grid{ grid-template-columns: 1fr; }
}

/* =========================================================
   Post navigation (prev/next)
========================================================= */
.qd-post-nav{
  margin-top: 16px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qd-post-nav__item a{
  display:block;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration:none;
  color: rgba(11,15,24,.92);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.qd-post-nav__item a:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.28);
  box-shadow: 0 26px 60px rgba(0,0,0,.12);
}

.qd-post-nav__label{
  display:block;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  opacity: .75;
  margin-bottom: 6px;
}

.qd-post-nav__title{
  display:block;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.5;
}

.qd-post-nav__next{
  text-align: right;
}

/* 片側しか無い時の崩れ防止 */
.qd-post-nav__prev:empty,
.qd-post-nav__next:empty{
  display:none;
}

@media (max-width: 520px){
  .qd-post-nav{
    grid-template-columns: 1fr;
  }
  .qd-post-nav__next{
    text-align:left;
  }
}

/* =========================================================
   PJAX fade (fallback) - non-top only
========================================================= */
body .qd-pjax-leaving{
  opacity:0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}

/* =========================================================
   Non-top light three background only
========================================================= */
body .qd-stage-lite{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:0;
}
body #cLite{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* =========================================================
   CF7 カスタム
========================================================= */
.wpcf7-spinner{
  display: none;
}
.cf7-confirm-msg p{
  margin: 0 auto 0;
}

.cf7-field span.req {
    font-size: 0.8rem;
    font-weight: 800;
    color: yellowgreen;
    vertical-align: 1px;
}

/* 1. デフォルトのチェックボックスを非表示にする */
.wpcf7-list-item input[type="checkbox"] {
    display: none !important;
}

/* 2. ラベル全体の設定（クリック範囲） */
.wpcf7-list-item label {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    margin: 5px 0;
}

/* 3. テキスト部分（.wpcf7-list-item-label）にボックスを作成 */
.wpcf7-list-item-label {
    position: relative;
    padding-left: 30px; /* ボックスの幅(20px) + 余白(10px) */
    line-height: 20px;
    display: inline-block;
}

/* 4. カスタムボックスのベース（::before） */
.wpcf7-list-item-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* 垂直中央揃え */
    width: 20px;
    height: 20px;
    background-color: #eeeeee;
    border-radius: 4px;
    border: 2px solid yellowgreen;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

/* 5. チェックマーク（::after）のアニメーション準備 */
.wpcf7-list-item-label::after {
    content: "✔";
    position: absolute;
    left: 4px;
    top: 50%;
    /* 中央揃えにしつつ、最初はサイズ0 */
    transform: translateY(-50%) scale(0); 
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
}

/* 6. 【重要】チェックされた時の切り替え */

/* チェックが入ったらボックスを塗りつぶす */
.wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
    background-color: yellowgreen;
}

/* チェックが入ったらマークを拡大表示 */
.wpcf7-list-item input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

/* ホバー時に少し明るくする */
.wpcf7-list-item label:hover .wpcf7-list-item-label::before {
    filter: brightness(0.9);
}