/* ================= UTAGE構築の窓口（aktlink 静的版） =================
   UTAGE公式ブランドカラー：青#58A3E6 → 紫#A75FF5 のグラデーション
   色を変えるならこの :root だけ触れば全ページに反映されます
   （変数名は旧テンプレ由来で --green ですが、中身はUTAGEの青紫です）*/
:root{
  --green:#7277ea;        /* メイン（バッジ・ボタン・アクセント）＝青紫の中間 */
  --green-d:#5b4fd6;      /* 濃い青紫（ホバー・見出し罫線・リンク）*/
  --ink:#333;             /* 本文の黒 */
  --muted:#777;
  --line:#e6e6e6;
  --bg:#ffffff;
  --soft:#f1f3fe;         /* 薄い青紫がかった背景 */
  --marker:#fff3a8;       /* マーカー（黄色は据え置き）*/
  --grad:linear-gradient(-45deg,#a75ff5 0%,#58a3e6 100%); /* UTAGEブランドグラデ */
  --cta:linear-gradient(180deg,#ffab23 0%,#ff7a00 100%);  /* CTAボタン：目立つオレンジ（14日間無料）*/
  --cta2:linear-gradient(180deg,#ff6a6a 0%,#e01f1f 100%); /* 特典ボタン：赤→薄赤（書籍プレゼント）*/
  --serif:"Hiragino Mincho ProN","Yu Mincho",serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:18px;line-height:2.0;word-break:auto-phrase;letter-spacing:.01em}
img{max-width:100%;height:auto}
a{color:var(--green-d);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:820px;margin:0 auto;padding:0 18px}

/* ===== ヘッダー ===== */
.site-head{background:var(--grad);position:sticky;top:0;z-index:50;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.head-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;height:64px}
.brand-logo{height:38px;width:auto;display:block}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand-icon{height:40px;width:auto;display:block;flex:none;background:#fff;border-radius:50%;padding:2px}
.brand-name{font-weight:800;color:#fff;font-size:17px;letter-spacing:.01em;white-space:nowrap}
.head-nav{display:flex;gap:16px;flex-wrap:wrap}
.head-nav a{color:#fff;font-weight:700;font-size:14px;opacity:.95}
.head-nav a:hover{opacity:1;text-decoration:underline}

/* ===== 記事 ===== */
article.post{max-width:740px;margin:0 auto;padding:26px 18px 60px}
.crumbs{color:var(--muted);font-size:13px;margin:6px 0 16px}
.crumbs a{color:var(--muted)}
.post-cat{display:inline-block;background:var(--green);color:#ffffff;font-weight:700;
  border-radius:4px;padding:3px 12px;font-size:12px}
h1.post-title{font-size:30px;line-height:1.55;margin:14px 0 12px;font-weight:800;letter-spacing:.02em}
.post-meta{color:var(--muted);font-size:13px;border-bottom:2px solid var(--green);padding-bottom:14px;margin-bottom:8px}

/* 目次（AiCmo参考：薄背景カード・区切り線・番号は青紫の色文字・マーカー無し・H2開閉式）*/
.toc{background:#f7f8fd;border:1px solid #e3e7fb;border-radius:12px;
  padding:20px 26px 16px;margin:28px 0 42px;font-size:17px;line-height:1.6}
.toc-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0 0 10px;padding:0 0 12px;border-bottom:1px solid #dde3f8}
.toc-ttl{font-weight:800;font-size:18px;color:var(--ink);margin:0;padding:0}
.toc-all{border:1px solid var(--green);background:#fff;color:var(--green-d);
  font-size:13px;font-weight:800;border-radius:999px;padding:6px 15px;cursor:pointer;white-space:nowrap}
.toc-all:hover{background:var(--green);color:#fff}
.toc ol{list-style:none;counter-reset:toc;margin:0;padding:0}
.toc ol>li{counter-increment:toc;margin:0;position:relative}
.toc ol>li>a{display:block;padding:8px 2px 8px 28px;color:var(--ink);font-size:17.5px;
  line-height:1.55;font-weight:400;text-decoration:none}
.toc ol>li>a::before{content:counter(toc);color:var(--green-d);font-weight:800;
  font-size:15px;margin-right:10px}
.toc a:hover{color:var(--green-d);text-decoration:underline}
/* H2開閉トグル（既定は閉じ＝H2だけ表示）*/
.toc-tog{position:absolute;left:-3px;top:8px;width:22px;height:22px;padding:0;
  border:0;background:transparent;cursor:pointer}
.toc-tog::before{content:"";display:block;width:7px;height:7px;margin:0 auto;
  border-right:2px solid var(--green-d);border-bottom:2px solid var(--green-d);
  transform:rotate(-45deg);transition:transform .15s}
.toc li.has-sub.open>.toc-tog::before{transform:rotate(45deg)}
.toc ul.sub{list-style:none;display:none;margin:1px 0 6px;padding:0 0 0 2.3em}
.toc li.has-sub.open>ul.sub{display:block}
.toc ul.sub li{margin:0}
.toc ul.sub a{display:block;padding:5px 2px;font-size:16px;line-height:1.55;
  color:#666;text-decoration:none}
.toc ul.sub a::before{content:"−";color:var(--green);margin-right:8px;font-weight:700}

/* 本文の見出し（AiCmoの文字組みを参考／下線カラーはUTAGE青紫）*/
.body h2{font-size:27px;font-weight:800;line-height:1.5;letter-spacing:.02em;
  margin:64px 0 24px;padding:0 0 14px;border-bottom:2px solid var(--green)}
.body h3{font-size:21px;font-weight:800;line-height:1.55;
  margin:44px 0 16px;padding:2px 0 2px 14px;border-left:5px solid var(--green)}
.body h4{font-size:18px;font-weight:800;line-height:1.6;margin:32px 0 12px}
.body p{margin:0 0 1.5em}
.body ul,.body ol{margin:0 0 1.5em;padding-left:1.5em}
.body li{margin:0 0 .5em}
.body img{border-radius:6px;margin:10px 0}
/* 本文中の最初の見出しは上の余白を詰める */
.body>h2:first-child,.toc+h2{margin-top:24px}

/* Cocoonの装飾を再現 */
.marker-under,.marker-under strong{background:linear-gradient(transparent 60%,var(--marker) 60%)}
.info-box,.blank-box,.white-box{background:#fff;border:1px solid var(--line);border-left:5px solid var(--green);
  border-radius:6px;padding:14px 18px;margin:18px 0}
/* 吹き出し */
.speech-wrap{display:flex;gap:12px;align-items:flex-start;margin:22px 0}
.speech-wrap.sbp-r{flex-direction:row-reverse}
.speech-person{width:74px;text-align:center;flex:0 0 auto}
.speech-icon-image{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--line);background:#fff}
.speech-name{font-size:11px;color:var(--muted);margin-top:3px}
.speech-balloon{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;max-width:76%}
.speech-wrap:not(.sbp-r) .speech-balloon{background:#eef7e8}
.sbp-r .speech-balloon{background:#fff}
figure.wp-cap{margin:18px 0;text-align:center}
figure.wp-cap figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.blogcard a{display:block;border:1px solid var(--line);border-radius:8px;padding:12px 16px;background:#fff;word-break:break-all}
.aligncenter{display:block;margin-left:auto;margin-right:auto}

/* CTA */
.body a img.aligncenter,.cta img{width:100%;max-width:800px;border-radius:8px;margin:10px auto}

/* ===== 一覧（ブログトップ）===== */
.list-head{background:var(--soft);border-bottom:1px solid var(--line);padding:30px 0 24px;text-align:center}
.list-head h1{font-size:24px;margin:0 0 6px}
.list-head p{color:var(--muted);margin:0;font-size:14px}
.search-box{max-width:520px;margin:18px auto 0;display:flex;gap:8px}
.search-box input{flex:1;border:1px solid var(--line);border-radius:8px;padding:11px 14px;font-size:15px}
.cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:18px 0 0}
.cat-btn{border:1px solid var(--green);background:#fff;color:var(--green-d);border-radius:999px;
  padding:6px 14px;font-size:13px;font-weight:700;cursor:pointer}
.cat-btn.active,.cat-btn:hover{background:var(--green);color:#ffffff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;padding:28px 0 60px}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;
  transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 8px 22px rgba(0,0,0,.10);transform:translateY(-2px)}
.card a{color:inherit;display:flex;flex-direction:column;height:100%}
.card .thumb{aspect-ratio:1200/630;background:var(--soft) center/cover no-repeat;position:relative}
.card .thumb .badge{position:absolute;top:8px;left:8px;background:var(--green);color:#ffffff;
  font-size:11px;font-weight:700;border-radius:4px;padding:2px 9px;z-index:2}
/* アイキャッチが無い記事のプレースホルダー */
.card .thumb.ph{display:flex;align-items:center;justify-content:center;padding:14px;
  background:linear-gradient(135deg,var(--green) 0%,var(--green-d) 100%)}
.card .thumb.ph .ph-txt{color:#fff;font-weight:800;font-size:15px;line-height:1.5;text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.15)}
.card .c-body{padding:12px 14px 16px}
.card h3{font-size:15px;line-height:1.5;margin:0 0 6px;font-weight:700}
.card .c-date{color:var(--muted);font-size:12px}
.no-hit{text-align:center;color:var(--muted);padding:40px 0}

/* ===== フッター ===== */
.site-foot{background:var(--soft);border-top:1px solid var(--line);margin-top:40px;padding:30px 0;text-align:center}
.foot-logo{height:34px;margin-bottom:8px}
.foot-desc{color:var(--muted);font-size:13px;margin:0 0 10px}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:0 0 12px}
.foot-nav a{color:var(--ink);font-size:13px}
.foot-copy{color:var(--muted);font-size:12px;margin:0}
/* AiCmoへの導線CTA（旧LINE CTAを置換）*/
.aicmo-cta{background:linear-gradient(180deg,#fbf8f0,#f6efdd);border:1px solid #e7ddc4;
  border-radius:14px;padding:24px 20px;margin:30px 0;text-align:center}
.aicmo-cta-lead{color:#8a6d2f;font-size:14px;font-weight:800;margin:0 0 8px}
.aicmo-cta-main{font-size:16px;line-height:1.85;margin:0 0 18px;color:var(--ink)}
.aicmo-cta-main strong{color:#111}
.aicmo-cta-btn{display:inline-block;background:linear-gradient(180deg,#caa63a,#a67f2e);color:#fff;
  font-weight:800;font-size:16px;padding:14px 30px;border-radius:999px;text-decoration:none;
  box-shadow:0 5px 16px rgba(166,127,46,.32)}
.aicmo-cta-btn:hover{filter:brightness(1.07);text-decoration:none;color:#fff}

/* 文脈内部リンク（対応するAiCmo記事への橋渡し）*/
.aicmo-related{border:1px solid #e7ddc4;border-left:4px solid #caa63a;background:#fbf8f0;
  border-radius:8px;padding:12px 16px;margin:22px 0;display:flex;flex-direction:column;gap:3px}
.aicmo-related-label{font-size:12px;color:#8a6d2f;font-weight:800}
.aicmo-related a{color:#a67f2e;font-weight:700;font-size:15px;line-height:1.5}

/* 固定ページ */
article.page .body h2{margin-top:32px}
article.page .body{font-size:15.5px}

@media(max-width:600px){
  .head-nav{gap:10px}.head-nav a{font-size:12px}
  h1.post-title{font-size:23px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
}

/* ============================================================
   utage（jstork19テーマ）由来の装飾クラス用スタイル
   緑テンプレに合わせて再現。build時に /utage/assets/ へ配置される。
   ============================================================ */

/* --- WordPress 画像・配置 --- */
.body img{max-width:100%;height:auto}
.aligncenter{display:block;margin:16px auto;text-align:center}
.alignright{float:right;margin:6px 0 12px 18px;max-width:50%}
.alignleft{float:left;margin:6px 18px 12px 0;max-width:50%}
.alignnone{display:block;margin:12px 0}
.body figure{margin:16px 0}
.body figure img{display:block;margin:0 auto}

/* --- マーカー（黄色ハイライト） --- */
.st-mymarker-s,.ymarker{
  background:linear-gradient(transparent 62%,var(--marker) 62%);
  font-weight:700;padding:0 1px}

/* --- 太字強調 --- */
.huto{font-weight:700}
.hutoaka{font-weight:700;color:#e23b3b}
.big{font-size:1.08em}
.supplement{color:var(--muted);font-size:.9em}

/* --- 吹き出し（voice） --- */
.voice{display:flex;align-items:center;gap:14px;margin:22px 0}
.voice.r{flex-direction:row-reverse}
.voice .icon,.voice figure.icon{flex:none;margin:0;text-align:center}
.voice_icon__img{width:64px;height:64px;border-radius:50%;
  border:2px solid var(--green);object-fit:cover;background:#fff}
.voicecomment{position:relative;flex:1;background:var(--soft);
  border:1px solid #d8e8cd;border-radius:14px;padding:13px 17px;
  font-size:15px;line-height:1.7}
.voicecomment:before{content:"";position:absolute;top:22px;left:-9px;
  width:0;height:0;border:9px solid transparent;
  border-right-color:var(--soft);filter:drop-shadow(-1px 0 0 #d8e8cd)}
.voice.r .voicecomment:before{left:auto;right:-9px;
  border-right-color:transparent;border-left-color:var(--soft);
  filter:drop-shadow(1px 0 0 #d8e8cd)}
.voicecomment p:first-child{margin-top:0}
.voicecomment p:last-child{margin-bottom:0}

/* --- 囲みボックス（cbox / box_title） --- */
.cbox{border:2px solid var(--green);border-radius:12px;
  background:#fff;margin:22px 0;overflow:hidden}
.cbox.is-style-blue_box{border-color:#5b9bd5}
.box_title{background:var(--green);padding:8px 16px}
.cbox.is-style-blue_box .box_title{background:#5b9bd5}
.span__box_title,.box_title{color:#fff;font-weight:800;font-size:15px}
.span__box_title{color:#fff}
.cboxcomment{padding:14px 18px;line-height:1.8}
.cboxcomment p:first-child{margin-top:0}
.cboxcomment p:last-child{margin-bottom:0}
/* box_titleが無いcboxは上辺に薄い緑ライン */
.cbox>.cboxcomment:first-child{border-top:5px solid var(--soft)}

/* --- ボタン（WPブロック / アフィリCTA） --- */
.wp-block-button,.btn-wrap{margin:20px 0;text-align:center}
.wp-block-button__link{display:inline-block;background:var(--green-d);
  color:#fff;font-weight:800;text-decoration:none;
  padding:14px 30px;border-radius:40px;font-size:16px;
  box-shadow:0 3px 0 #4d9633;transition:transform .05s}
.wp-block-button__link:hover{color:#fff;transform:translateY(1px);
  box-shadow:0 2px 0 #4d9633;text-decoration:none}
.wp-block-button.big .wp-block-button__link{padding:16px 40px;font-size:17px}

/* --- 料金/製品ボックス（pp-* Pochipp系）簡易整形 --- */
.pp-sec{border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin:16px 0;background:#fafafa}
.pp-sec-title{font-weight:800;margin-bottom:8px}
.pp-result{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pp-result-amt{font-size:1.3em;font-weight:800;color:var(--green-d)}
.pp-badge{display:inline-block;background:var(--green);color:#ffffff;
  font-weight:700;font-size:12px;padding:2px 10px;border-radius:20px}
.pp-tag{display:inline-block;background:var(--soft);border:1px solid var(--line);
  font-size:12px;padding:1px 8px;border-radius:4px;margin:2px}

/* --- 記事内テーブル --- */
.body table{border-collapse:collapse;width:100%;margin:18px 0;font-size:14px}
.body table th,.body table td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.body table th{background:var(--soft)}

/* --- CTA 文字ボタン（粗い画像ボタンの置き換え。UTAGEグラデ・ベクター鮮明）--- */
.cta-lead{text-align:center;font-weight:800;color:var(--green-d);margin:26px 0 2px;font-size:15px}
.cta-btn{display:block;max-width:560px;margin:12px auto 26px;text-align:center;
  background:var(--cta);color:#fff;font-weight:800;font-size:19px;line-height:1.45;
  padding:19px 26px;border-radius:14px;text-decoration:none;
  text-shadow:0 1px 2px rgba(140,60,0,.25);
  box-shadow:0 8px 20px rgba(255,122,0,.38);transition:transform .06s,filter .15s}
.cta-btn:hover{filter:brightness(1.06);text-decoration:none;color:#fff;transform:translateY(-1px)}
.cta-btn:active{transform:translateY(1px)}
@media(max-width:600px){.cta-btn{font-size:16px;padding:16px 18px}}

/* --- 特典ボタン（旧「5大特典」バナー画像の置き換え。赤→薄赤・書籍プレゼントへ）--- */
.gift-btn{display:block;max-width:600px;margin:22px auto 26px;text-align:center;
  background:var(--cta2);color:#fff;font-weight:800;font-size:18px;line-height:1.5;
  padding:18px 24px;border-radius:14px;text-decoration:none;
  text-shadow:0 1px 2px rgba(120,0,0,.28);
  box-shadow:0 8px 20px rgba(224,31,31,.34);transition:transform .06s,filter .15s}
.gift-btn:hover{filter:brightness(1.06);text-decoration:none;color:#fff;transform:translateY(-1px)}
.gift-btn:active{transform:translateY(1px)}
@media(max-width:600px){.gift-btn{font-size:15px;padding:15px 16px}}

/* --- 中川さんの回答吹き出し（質問者=悩む男性への返答・右側・薄紫で区別）--- */
.nakagawa-voice .voicecomment{background:#eef1ff;border-color:#d3dbfb}
/* 中川さんは左側（icon左）なので尻尾も左向き */
.nakagawa-voice .voicecomment:before{border-right-color:#eef1ff;border-left-color:transparent;
  filter:drop-shadow(-1px 0 0 #d3dbfb)}
.nakagawa-voice .voice_icon__img{border-color:var(--green)}

/* --- 比較・料金表（画像の表をHTML化。UTAGE列を強調）--- */
.tbl-wrap{overflow-x:auto;margin:20px 0 30px;-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;min-width:520px;font-size:15px;
  border:1px solid #e3e7fb;border-radius:12px;overflow:hidden}
table.cmp th,table.cmp td{border-bottom:1px solid #eceefb;padding:12px 14px;text-align:center;vertical-align:middle;line-height:1.6}
table.cmp thead th{background:var(--soft);color:var(--ink);font-weight:800;font-size:15px}
table.cmp tbody th{text-align:left;font-weight:700;background:#fafbff;white-space:nowrap}
table.cmp .u{background:#eef1ff}
table.cmp thead th.u{background:#e0e6ff}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp .ok{color:#2a9d5a;font-weight:800}
table.cmp .no{color:#c0c4cc;font-weight:800}
table.cmp .tri{color:#e08a00;font-weight:800}
table.cmp .sub{color:#888;font-size:12px;display:block;margin-top:2px}
.cmp-badge{display:inline-block;background:var(--green);color:#fff;font-size:11px;font-weight:800;border-radius:6px;padding:1px 7px;margin-left:5px;vertical-align:2px}