*/
.ainomori-tbl{
overflow-x:auto;-webkit-overflow-scrolling:touch;
border:1px solid var(--ainomori-border);border-radius:8px;
}
.ainomori-tbl table{border-collapse:collapse;width:100%;font-size:.86em;margin:0}
.ainomori-tbl th,.ainomori-tbl td{
border:1px solid var(--ainomori-border);
padding:9px 12px;text-align:left;white-space:nowrap;
}
.ainomori-tbl thead th{background:#f0eee7;font-weight:700;color:#5c594e}
.ainomori-tbl tbody tr:nth-child(even){background:#fbfaf7}
.ainomori-tbl tbody tr:hover{background:var(--ainomori-green-soft)}
.ainomori-cmp th:first-child,.ainomori-cmp td:first-child{
position:sticky;left:0;z-index:1;
background:var(--ainomori-surface);
box-shadow:2px 0 0 var(--ainomori-border);
font-weight:700;
}
.ainomori-cmp thead th:first-child{background:#f0eee7;z-index:2}
.ainomori-cmp tbody tr:nth-child(even) td:first-child{background:#fbfaf7}
.ainomori-cmp .best{color:var(--ainomori-green-dark);font-weight:700}
/* 価格注記 */
.ainomori-note{font-size:.76em;color:var(--ainomori-muted);margin-top:8px}
/* ---- 比較表→詳細のジャンプ導線 (2026-07-15追加) ----
比較表の機種名を押すと各機種の詳細へ、詳細から比較表へ戻れる導線。
使い方は テンプレート/記事テンプレート.md と codex-rules/AI-no-mori.md 参照。 */
/* (1) 比較表の機種名セル=詳細へのジャンプリンク(列は増やさない) */
.ainomori-jump{color:var(--ainomori-green-dark);font-weight:700;text-decoration:none}
.ainomori-jump-tag{
display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
gap:1px;margin-left:5px;padding:3px 5px 4px;line-height:1;vertical-align:middle;
color:var(--ainomori-green-dark);background:transparent;
border:1px solid var(--ainomori-green);border-radius:6px;
}
.ainomori-jump-tag b{font-size:11px;font-weight:700}
.ainomori-jump-tag i{
display:block;width:5px;height:5px;font-style:normal;
border-right:1.5px solid var(--ainomori-green-dark);
border-bottom:1.5px solid var(--ainomori-green-dark);
transform:rotate(45deg);margin-top:1px;
}
.ainomori-jump:hover .ainomori-jump-tag{background:var(--ainomori-green);color:#fff}
.ainomori-jump:hover .ainomori-jump-tag i{border-right-color:#fff;border-bottom-color:#fff}
/* (2) ジャンプ着地点の見出し(ヘッダー潜り防止のオフセット)
※実サイトは追従ヘッダーOFF(2026-07-15確認)。40px=管理バー32px+余白。
Cocoonの固定ヘッダーを後でONにするなら値を上げる。 */
.ainomori-anchor{scroll-margin-top:40px}
/* (3) 各詳細末尾「比較表に戻る」ボタン */
.ainomori-back{text-align:right;margin:.2em 0 1.6em}
.ainomori-back a{
display:inline-flex;align-items:center;gap:6px;text-decoration:none;
font-size:.8em;font-weight:700;color:var(--ainomori-green-dark);
background:var(--ainomori-green-soft);border:1px solid #d8e4d9;
padding:6px 14px;border-radius:999px;
}
.ainomori-back a:hover{background:#e2ece2}
/* (4) 右下フローティング「比較表へ」ボタン(JSが比較表のある記事だけ生成)
Cocoonのトップへ戻るボタン(右下)を避けて左下に配置。デスクトップのみ。 */
.ainomori-float-cmp{
position:fixed;left:20px;bottom:20px;z-index:900;
display:inline-flex;align-items:center;gap:7px;
background:var(--ainomori-green);color:#fff;border:none;cursor:pointer;
font-family:inherit;font-size:13px;font-weight:700;
padding:11px 16px;border-radius:999px;
box-shadow:0 4px 14px rgba(60,58,50,.28);
opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .3s, transform .3s, background .2s;
}
.ainomori-float-cmp.is-shown{opacity:1;transform:translateY(0);pointer-events:auto}
.ainomori-float-cmp:hover{background:var(--ainomori-green-dark)}
.ainomori-float-cmp i{
display:block;width:7px;height:7px;
border-left:2px solid #fff;border-top:2px solid #fff;
transform:rotate(45deg);margin-top:2px;
}
@media (max-width:1023px){ .ainomori-float-cmp{display:none} }
/* ---- お問い合わせフォーム(CF7) 案B+木の温もり/LINE風 (2026-07-15) ----
フォーム本体は Contact Form 7(フォームID15)。autop無効化は子テーマfunctions.php。
フクロウ画像は cocoon-child-master/images/owl-phone.webp。 */
.ainomori-contact{max-width:450px;margin:24px auto;background:#fbf7ee;
border:1px solid #d8cba7;border-radius:16px;overflow:hidden;box-shadow:0 3px 14px rgba(90,70,40,.12)}
.ainomori-contact .ac-head{position:relative;padding:14px 18px 12px;background:#f6efe0;
display:flex;align-items:flex-end;gap:12px}
.ainomori-contact .ac-owl{width:80px;height:auto;display:block;flex:none;margin-bottom:-1px}
.ainomori-contact .ac-meta{padding-bottom:10px;display:flex;flex-direction:column;line-height:1.4}
.ainomori-contact .ac-nm{font-weight:700;font-size:.92em;color:#4a4230}
.ainomori-contact .ac-st{font-size:.68em;color:var(--ainomori-green-dark)}
.ainomori-contact .ac-branch{position:absolute;left:14px;right:14px;bottom:0;height:0;
border-top:3px solid #a9885c;border-radius:3px}
.ainomori-contact .ac-leaf{position:absolute;bottom:1px;width:13px;height:7px;
background:var(--ainomori-green);border-radius:0 70% 0 70%;transform:rotate(-18deg)}
.ainomori-contact .ac-leaf.b{width:10px;height:6px;background:var(--ainomori-green-dark);transform:rotate(14deg)}
.ainomori-contact .ac-thread{padding:20px 16px;min-height:92px;background:#e7ede4}
.ainomori-contact .ac-recv{position:relative;border-radius:4px 14px 14px 14px;padding:10px 14px;
font-size:.86em;max-width:84%;background:#fff;border:1px solid #dfe5db;color:#3b4a3d;line-height:1.7}
.ainomori-contact .ac-recv::before{content:"";position:absolute;left:-8px;top:0;
border:7px solid transparent;border-top-color:#dfe5db;border-right-color:#dfe5db}
.ainomori-contact .ac-compose{padding:14px 16px 18px;background:#f6efe0;border-top:1px solid #d8cba7}
.ainomori-contact .ac-row{display:flex;gap:8px;margin-bottom:10px}
.ainomori-contact .ac-row .wpcf7-form-control-wrap{flex:1;display:block;min-width:0}
.ainomori-contact input[type=text],
.ainomori-contact input[type=email]{width:100%;border:1px solid #d8cba7;border-radius:999px;
padding:9px 14px;background:#fffdf8;font:inherit;color:#4a4230;outline:none}
.ainomori-contact textarea{width:100%;border:1px solid #d8cba7;border-radius:14px;
padding:9px 14px;background:#fffdf8;font:inherit;color:#4a4230;resize:none;outline:none;
line-height:28px;height:121px;
background-image:repeating-linear-gradient(to bottom, transparent 0 27px, #ece2c8 27px 28px);
background-attachment:local;background-position:0 9px}
.ainomori-contact input:focus,.ainomori-contact textarea:focus{border-color:var(--ainomori-green);background:#fff}
.ainomori-contact input[type=submit]{margin-top:3px;width:100%;border:none;cursor:pointer;
background:var(--ainomori-green);color:#fff;font-weight:700;font-size:1em;letter-spacing:.03em;
padding:12px;border-radius:10px;box-shadow:0 3px 0 #4e6b53;-webkit-appearance:none;appearance:none;
transition:transform .06s ease, box-shadow .06s ease, background .2s}
.ainomori-contact input[type=submit]:hover{background:var(--ainomori-green-dark)}
.ainomori-contact input[type=submit]:active{transform:translateY(3px);box-shadow:0 0 0 #4e6b53}
.ainomori-contact .wpcf7-spinner{margin:8px auto 0;display:block}
.ainomori-contact .wpcf7-not-valid-tip{font-size:.75em;color:#c0473f;margin-top:4px}
.wpcf7-response-output{max-width:450px;margin:14px auto 0 !important;font-size:.82em;border-radius:8px}
/* お問い合わせページ(page-id-16)専用: 白い本文カードを淡い森グリーンに、不要なSNS共有/フォローを非表示 (2026-07-15) */
.page-id-16 #main{background:linear-gradient(rgba(247,246,242,.4),rgba(247,246,242,.4)),url(/wp-content/themes/cocoon-child-master/images/contact-bg.webp) center/cover no-repeat !important}
.page-id-16 #main .main-in,
.page-id-16 #main .article,
.page-id-16 #main .entry-content{background:transparent !important}
.page-id-16 .sns-share,
.page-id-16 .sns-follow{display:none !important}
/* ---- コメントいいね「参考になった」 (2026-07-15) ---- */
.ainomori-like-wrap{margin:8px 0 2px}
.ainomori-like{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
background:#fff;border:1px solid var(--ainomori-border);border-radius:999px;
padding:4px 12px;font-size:.8em;color:var(--ainomori-muted);font-family:inherit;line-height:1.4;
transition:background .15s, border-color .15s, color .15s}
.ainomori-like:hover{border-color:var(--ainomori-green);color:var(--ainomori-green-dark)}
.ainomori-like .ainomori-like-ico{transition:transform .15s}
.ainomori-like .ainomori-like-count{font-weight:700;color:var(--ainomori-green-dark)}
.ainomori-like .ainomori-like-count:empty{display:none}
.ainomori-like.is-liked{background:var(--ainomori-green-soft);border-color:var(--ainomori-green);color:var(--ainomori-green-dark);cursor:default}
.ainomori-like.is-liked .ainomori-like-ico{transform:scale(1.15)}
/* ---- 製品リアクション「気になる／持ってる」 (2026-07-16) ---- */
.ainomori-react{display:flex;gap:8px;margin:1em 0 .2em;flex-wrap:wrap}
.ainomori-react-btn{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
background:#fff;border:1px solid var(--ainomori-border);border-radius:999px;
padding:5px 14px;font-size:.82em;color:var(--ainomori-muted);font-family:inherit;line-height:1.4;
transition:background .15s, border-color .15s, color .15s}
.ainomori-react-btn:hover{border-color:var(--ainomori-green);color:var(--ainomori-green-dark)}
.ainomori-react-btn .ainomori-react-count{font-weight:700;color:var(--ainomori-green-dark)}
.ainomori-react-btn .ainomori-react-count:empty{display:none}
.ainomori-react-btn.is-on{background:var(--ainomori-green-soft);border-color:var(--ainomori-green);color:var(--ainomori-green-dark);cursor:default}
/* ---- 製品タグ付きコメント「この製品への声」 (2026-07-16) ---- */
.ainomori-voices{margin:.4em 0 1.2em}
.ainomori-voices-head{font-size:.78em;font-weight:700;color:var(--ainomori-green-dark);margin:0 0 6px}
.ainomori-voice{background:var(--ainomori-green-soft);border:1px solid #d8e4d9;border-radius:4px 12px 12px 12px;
padding:8px 12px;margin:0 0 6px;font-size:.84em;line-height:1.6}
.ainomori-voice-who{display:block;font-size:.82em;font-weight:700;color:var(--ainomori-muted);margin-bottom:2px}
.ainomori-voice-cta{display:inline-block;background:none;border:none;padding:0;cursor:pointer;
font-family:inherit;font-size:.8em;color:var(--ainomori-green-dark);text-decoration:none;font-weight:700}
.ainomori-voice-cta:hover{text-decoration:underline}
.ainomori-voice-cta.is-empty{color:var(--ainomori-muted);font-weight:400}
.comment-form-ainomori-product select{max-width:100%;padding:6px 10px;border:1px solid var(--ainomori-border);border-radius:6px;font:inherit;background:#fff}
/* ---- コメント欄のカード化 (2026-07-16) ----
Cocoon既定のコメント一覧が真っ白で仕切りがなく読みにくいため、
1コメント=1カード(白面+罫線+角丸+影)にし、名前/日付/本文/返信を整理 */
.comment-area .comment{list-style:none}
.comment-area .comment-list ol,.comment-area .comment-list ul{margin:0;padding:0}
.comment-area .comment-body{
background:#fff;border:1px solid var(--ainomori-border);border-radius:12px;
padding:14px 16px 10px;margin:0 0 14px;box-shadow:var(--ainomori-shadow)}
.comment-area .children{margin:0 0 0 22px;padding-left:14px;border-left:2px solid var(--ainomori-green-soft)}
.comment-area .comment-author{display:flex;align-items:center;gap:9px;margin:0 0 2px}
.comment-area .comment-author .avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--ainomori-border);background:#fff;float:none;margin:0}
.comment-area cite.fn{font-style:normal;font-weight:700;color:var(--ainomori-green-dark);font-size:.92em}
.comment-area .says{display:none}
.comment-area .comment-meta{margin:0 0 8px;font-size:.72em}
.comment-area .comment-meta a{color:var(--ainomori-muted);text-decoration:none}
.comment-area .comment-content{font-size:.92em;line-height:1.8}
.comment-area .comment-content p{margin:.3em 0}
.comment-area .reply{text-align:right;margin-top:2px}
.comment-area .comment-reply-link{
display:inline-block;font-size:.76em;font-weight:700;
color:var(--ainomori-green-dark);background:var(--ainomori-green-soft);
border:1px solid #d8e4d9;border-radius:999px;padding:4px 14px;text-decoration:none}
.comment-area .comment-reply-link:hover{background:#e2ece2}
h2#comments,#reply-title{
font-size:1.1em;background:var(--ainomori-green-soft);
border-left:4px solid var(--ainomori-green);border-radius:4px;
padding:.45em .8em;margin:1.6em 0 .8em}
#respond{scroll-margin-top:40px}
/* ---- フクロウ吹き出しの右配置バリアント (2026-07-17) ----
使い方:
)
… でフクロウが右・吹き出しが左になる */
.ainomori-owl.right{flex-direction:row-reverse}
.ainomori-owl.right .bubble{border-radius:12px}
.ainomori-owl.right .bubble::before{
left:auto;right:-9px;
border-right-color:transparent;border-left-color:#d8e4d9}
.ainomori-owl.right .bubble::after{
left:auto;right:-7px;
border-right-color:transparent;border-left-color:var(--ainomori-green-soft)}
/* ---- メイン比較表の主役化 (2026-07-17) ----
.ainomori-cmp(先頭列固定つき比較表)だけ、緑枠+緑ヘッダー+広め余白で「この記事の柱」感を出す。
調査条件・スペック表(.ainomori-tblのみ)は従来の控えめなまま */
div.ainomori-cmp{border:2px solid var(--ainomori-green);border-radius:10px;
box-shadow:0 3px 12px rgba(107,143,113,.22)}
.ainomori-cmp table{font-size:.9em}
.ainomori-cmp th,.ainomori-cmp td{padding:14px 16px;line-height:1.6}
.ainomori-cmp thead th{background:var(--ainomori-green);color:#fff;
font-size:.84em;letter-spacing:.03em;border-color:#5d7f63}
.ainomori-cmp thead th:first-child{background:var(--ainomori-green-dark);z-index:2}
.ainomori-cmp tbody tr:hover{background:#e6efe7}
.ainomori-cmp tbody td:first-child{font-size:.96em}
/* 製品名列: 通常時はフル名を1行表示(基本のnowrapのまま)。横スクロール時に略称へ切替して細くする */
/* 横スクロール中は製品名を略称に切り替え(JSが.is-scrolledを付与) */
.ainomori-cmp .pn-short{display:none}
.ainomori-cmp.is-scrolled .pn-full{display:none}
.ainomori-cmp.is-scrolled .pn-short{display:inline}
.ainomori-cmp.is-scrolled th:first-child,.ainomori-cmp.is-scrolled td:first-child{min-width:auto;max-width:none;white-space:nowrap}
/* ---- コメント返信スレッドの見える化 (2026-07-17) ----
カード化時の ol/ul リセットが入れ子インデントを打ち消していたため、
強い指定で返信階層に緑の枝線+淡緑カードを付ける */
.comment-area .comment-list ol.children,
.comment-area .comment-list ul.children{
margin:0 0 14px 26px;padding:0 0 0 14px;
border-left:3px solid var(--ainomori-green)}
.comment-area .children .comment-body{background:var(--ainomori-green-soft);border-color:#d8e4d9}
.comment-area .children .comment-author .avatar{width:32px;height:32px}
/* ---- 声CTAの補足注記・続きリンク・コメント並び替えバー (2026-07-17) ---- */
.ainomori-cta-note{font-weight:400;color:var(--ainomori-muted);font-size:.92em}
.ainomori-voices-more{display:inline-block;margin:0 14px 6px 0;font-size:.8em;font-weight:700;
color:var(--ainomori-green-dark);text-decoration:none}
.ainomori-voices-more:hover{text-decoration:underline}
.ainomori-sortbar{display:flex;gap:8px;margin:0 0 14px;align-items:center}
.ainomori-sortbar button{background:#fff;border:1px solid var(--ainomori-border);border-radius:999px;
padding:5px 14px;font-size:.8em;color:var(--ainomori-muted);cursor:pointer;font-family:inherit;
white-space:nowrap;flex:none}
.ainomori-sortbar button.on{background:var(--ainomori-green);border-color:var(--ainomori-green);color:#fff;font-weight:700}
.ainomori-sortbar select{border:1px solid var(--ainomori-border);border-radius:999px;
padding:4px 12px;font-size:.8em;color:var(--ainomori-muted);background:#fff;font-family:inherit;
margin-left:auto;max-width:15em;min-width:0;text-overflow:ellipsis}
/* コメントカードの製品名チップ(JSが投稿日時の右へ移動する) */
.ainomori-tagchip{display:inline-block;font-size:.7em;font-weight:700;
color:var(--ainomori-green-dark);background:var(--ainomori-green-soft);
border:1px solid #d8e4d9;border-radius:999px;padding:1px 10px;margin:0 0 6px}
.comment-meta .ainomori-tagchip{margin:0 0 0 10px;font-size:.9em}
/* ---- フクロウ吹き出し ----
Cocoonの吹き出し機能を使う場合は不要。
カスタムHTMLで使う場合:
文
*/
.ainomori-owl{display:flex;gap:14px;align-items:flex-end;margin:1.6em 0}
.ainomori-owl img{
width:88px;height:auto;flex:none;
}
.ainomori-owl .bubble{
position:relative;background:var(--ainomori-green-soft);
border:1px solid #d8e4d9;border-radius:12px;
padding:12px 16px;font-size:.88em;
}
.ainomori-owl .bubble::before{
content:"";position:absolute;left:-9px;bottom:18px;
border:8px solid transparent;border-right-color:#d8e4d9;
}
.ainomori-owl .bubble::after{
content:"";position:absolute;left:-7px;bottom:18px;
border:8px solid transparent;border-right-color:var(--ainomori-green-soft);
}
/* ---- まとめ(見解)ボックス / 注意点ボックス ---- */
.ainomori-verdict{
background:var(--ainomori-green-soft);
border:1px solid #d8e4d9;border-radius:10px;
padding:6px 22px 14px;margin:1em 0;
}
.ainomori-caution{
background:#faf6ef;
border:1px solid #e8dcc8;border-left:4px solid var(--ainomori-brown);
border-radius:6px;padding:6px 22px 14px;margin:1em 0;
}
/* ---- サイドバーウィジェット見出し ---- */
.sidebar h3{
border-bottom:2px solid var(--ainomori-green-soft);
color:var(--ainomori-green-dark);
background:none;
}
/* ============================================
サイドバー開閉(デスクトップのみ)
※Cocoonの実DOM(#body-in, #main, #sidebar)は
バージョンにより異なる可能性あり。
実サイトのDevToolsで要素IDを確認してから有効化すること。
(実機未検証: 2026-07-06時点)
============================================ */
@media (min-width:1024px){
body.ainomori-sb-closed #sidebar{display:none}
body.ainomori-sb-closed #main{width:100% !important;max-width:100% !important}
.ainomori-sb-tab{
position:fixed;top:50%;transform:translateY(-50%);z-index:9999;
writing-mode:vertical-rl;letter-spacing:.15em;
background:var(--ainomori-green);color:#fff;
border:none;cursor:pointer;
padding:18px 10px;border-radius:8px 0 0 8px;
font-size:13px;font-weight:700;
box-shadow:0 3px 12px rgba(60,58,50,.24);
transition:left .3s ease, right .3s ease;
}
.ainomori-sb-tab:hover{background:var(--ainomori-green-dark)}
}
@media (max-width:1023px){
/* モバイルはCocoon標準(サイドバーは本文の下)のままにする。
ドロワー化はPhase 2。モックにドロワー実装例あり */
.ainomori-sb-tab{display:none}
}
/* ============================================
ヘッダー背景画像の表示位置
Cocoon既定は .header{background-position:top center}=上寄せで、
縦長画像だと上部(空)しか出ない。中央のフクロウ帯が見えるよう中央へ。
background-size:100% auto は維持(横フル幅=右のフクロウが横に切れない)。
必要なら center を「center 40%」等に微調整してフクロウの見え方を追い込む。
============================================ */
.header{
/* Cocoonの.headerは実際は background-size:cover(base/モバイル両方で上書き)。
coverは狭幅で左右を切るため、右寄せにして右のフクロウを残す(切れるのは左の空)。
縦45%でフクロウ+森が入るように。画像はワイドv4(緑多め)。 */
background-position:right 45% !important;
}
/* ---- 情報ソース折りたたみ (2026-07-19) ---- */
details.ainomori-src{border:1px solid #d8e4d9;border-radius:8px;background:#f7f6f2;padding:10px 16px;margin:.5em 0 1.5em}
details.ainomori-src summary{cursor:pointer;font-weight:700;color:#4b5d4f}
details.ainomori-src summary:hover{color:#6b8f71}
details.ainomori-src[open] summary{margin-bottom:10px;border-bottom:1px dashed #d8e4d9;padding-bottom:8px}
/* ---- 製品画像(見出し直下) (2026-07-24) ----
★2026-07-28: ここにあったカッテネ(商品リンクカード)用のCSSを削除した。
理由: 出典が「アフィサクッの完成版CSSをそのまま移植」で、既存ブログと同一の
クラス名・配色・数値を共有しており、サイト同士が結び付く手がかりになっていたため。
商品リンクは自作プラグイン guulink へ移行済み(CSSはプラグイン側が持つ)。
削除前の全文: guulink/style.css.backup-20260728
============================================ */
.ainomori-prodimg{margin:14px 0 18px}
.ainomori-prodimg a{display:inline-block;border:1px solid #edf0ea;border-radius:8px;overflow:hidden;background:#fff;line-height:0;box-shadow:0 2px 8px rgba(31,37,32,.05)}
.ainomori-prodimg img{display:block;width:200px;height:200px;object-fit:contain;margin:0;padding:0;background:#fff}
@media (max-width:640px){
.ainomori-prodimg{text-align:center}
.ainomori-prodimg img{width:170px;height:170px}
}