外枠） ── */
.ao-rlt-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border-radius: 18px;
overflow: hidden;
border: 1px solid #E1E8F1;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
height: 100%;
}
.ao-rlt-link:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -20px rgba(26,58,92,0.22);
border-color: #5b9ee1;
color: inherit;
text-decoration: none;
}
/* ── カード article ── */
.ao-rlt-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border-radius: 18px;
overflow: hidden;
margin: 0;
padding: 0;
}
/* ── サムネイル（画像上・全幅） ── */
.ao-rlt-thumb {
width: 100%;
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;
background-color: #c4c4c4;
flex-shrink: 0;
}
/* NO IMAGE フォールバック（カテゴリ別グラデーション） */
.ao-rlt-thumb.rlt-ph-spiritual { background-color: transparent; background-image: linear-gradient(135deg, #7F6BC9, #5C4DA8); }
.ao-rlt-thumb.rlt-ph-quotes { background-color: transparent; background-image: linear-gradient(135deg, #E0A23C, #C57A20); }
.ao-rlt-thumb.rlt-ph-qol-goods { background-color: transparent; background-image: linear-gradient(135deg, #4FB58A, #2F8F66); }
.ao-rlt-thumb.rlt-ph-mixed,
.ao-rlt-thumb.rlt-ph-thoughts { background-color: transparent; background-image: linear-gradient(135deg, #378ADD, #1F6BBF); }
/* ── テキスト本体エリア ── */
.ao-rlt-body {
padding: 16px 18px 20px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
/* ── メタ行（日付 + カテゴリバッジ） ── */
.ao-rlt-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.ao-rlt-date {
font-family: "Poppins", sans-serif;
font-size: 11px;
color: #7f8c8d;
letter-spacing: 0.04em;
}
/* ── カテゴリバッジ（トップと統一） ── */
.ao-rlt-badge {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-size: 11px;
padding: 3px 10px;
border-radius: 4px;
color: #fff;
background: #378ADD;
white-space: nowrap;
}
.ao-rlt-badge.rlt-cat-spiritual { background: #7F6BC9; }
.ao-rlt-badge.rlt-cat-quotes { background: #E0A23C; }
.ao-rlt-badge.rlt-cat-qol-goods { background: #4FB58A; }
/* ── タイトル ── */
.ao-rlt-title {
font-size: 14px;
font-weight: 700;
line-height: 1.6;
color: #1A3A5C;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ── レスポンシブ ── */
@media (max-width: 768px) {
#related-entries .related-list {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px !important;
}
}
@media (max-width: 480px) {
#related-entries .related-list {
grid-template-columns: 1fr !important;
}
.ao-rlt-title {
font-size: 13px;
}
}
/* ---------------------------------------------------------------
** 修正⑤ サイドバー・ランキングウィジェット
** ------------------------------------------------------------- */
.ao-sb-ranking-widget {
background: #1A3A5C;
border-radius: 12px;
overflow: hidden;
margin-bottom: 24px;
padding: 0;
}
.ao-sb-ranking-widget .widget-title {
background: #1A3A5C;
color: #fff;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 16px;
letter-spacing: 0.08em;
padding: 14px 18px 10px;
border-radius: 0;
margin: 0;
}
.ao-sb-rank-list {
padding: 0 12px 12px;
}
.ao-sb-rank-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
/* 各記事アイテム（1〜5位の各行）の下余白を 16px 追加（PC・スマホ共通） */
margin-bottom: 16px;
border-bottom: 1px solid rgba(255,255,255,0.12);
text-decoration: none;
color: #fff;
transition: opacity 0.2s ease;
}
.ao-sb-rank-item:last-child {
border-bottom: none;
}
.ao-sb-rank-item:hover {
opacity: 0.8;
color: #fff;
text-decoration: none;
}
.ao-sb-rank-num {
font-family: "Poppins", sans-serif;
font-size: 18px;
font-weight: 700;
color: #6ec6f5;
min-width: 22px;
text-align: center;
flex-shrink: 0;
line-height: 1;
}
.ao-sb-rank-thumb {
width: 54px;
height: 40px;
object-fit: cover;
border-radius: 6px;
flex-shrink: 0;
}
.ao-sb-rank-title {
font-size: 12px;
font-weight: 500;
line-height: 1.45;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ---------------------------------------------------------------
** 修正⑥ サイドバー各ウィジェット：カード型デザイン
** ------------------------------------------------------------- */
/* 共通：各ウィジェットをカードに */
.sidebar .widget {
border-radius: 12px;
overflow: hidden;
margin-bottom: 24px;
padding: 0;
box-shadow: 0 2px 10px rgba(26,58,92,0.07);
}
/* ウィジェットタイトル共通 */
.sidebar .widget .widget-title,
.sidebar .widget .widgettitle {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.05em;
padding: 12px 18px;
margin: 0;
border-radius: 0;
line-height: 1.3;
}
/* ウィジェット内コンテンツの余白 */
.sidebar .widget > ul,
.sidebar .widget > div:not(.widget-title):not(.widgettitle),
.sidebar .widget form {
padding: 12px 16px 14px;
}
/* Recent Posts：アイスブルー */
.sidebar .widget_recent_entries {
background: #E6F1FB;
}
.sidebar .widget_recent_entries .widget-title,
.sidebar .widget_recent_entries .widgettitle {
background: #0C447C;
color: #fff;
}
.sidebar .widget_recent_entries a {
color: #0C447C;
}
.sidebar .widget_recent_entries a:hover {
color: #378ADD;
}
/* Archives：薄グレー */
.sidebar .widget_archive {
background: #F5F8FC;
}
.sidebar .widget_archive .widget-title,
.sidebar .widget_archive .widgettitle {
background: #5B6E87;
color: #fff;
}
/* Categories：ブルー */
.sidebar .widget_categories {
background: #378ADD;
}
.sidebar .widget_categories .widget-title,
.sidebar .widget_categories .widgettitle {
background: #1A3A5C;
color: #fff;
}
.sidebar .widget_categories a,
.sidebar .widget_categories label {
color: #fff;
}
.sidebar .widget_categories a:hover {
color: #E6F1FB;
text-decoration: none;
}
/* 検索ウィジェット */
.sidebar .widget_search {
background: #F5F8FC;
}
.sidebar .widget_search .widget-title,
.sidebar .widget_search .widgettitle {
background: #5B6E87;
color: #fff;
}
/* Recent Comments は非表示（修正②で display:none 済み）なので色設定不要 */
/* ウィジェット内 ul リストの余白調整 */
.sidebar .widget ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.sidebar .widget ul li {
padding: 5px 0;
border-bottom: 1px solid rgba(0,0,0,0.06);
font-size: 13px;
}
.sidebar .widget_categories ul li,
.sidebar .widget_categories ul li a {
border-color: rgba(255,255,255,0.2);
color: #fff;
}
.sidebar .widget ul li:last-child {
border-bottom: none;
}
/* ---------------------------------------------------------------
** ヘッダーアイコンボタン追加（SUZURI / Instagram）
** ------------------------------------------------------------ */
/* FV（トップページ）：左側ボタン群をまとめる flex ラッパー */
.home .aomode-front .ao-fv-icon-group {
display: flex;
align-items: center;
gap: 8px;
}
/* 下層ページ：左側ボタン群をまとめる flex ラッパー */
.aomode-site-header-inner .aomode-site-header-icon-group {
display: flex;
align-items: center;
gap: 8px;
order: 1; /* 上の a.aomode-site-header-icon-btn { order:1 } と同じ位置 */
}
@media screen and (max-width: 599px) {
.aomode-site-header-inner .aomode-site-header-icon-group {
gap: 4px;
}
}
/* SUZURIボタン内 "S" テキストアイコン */
.ao-icon-s {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1;
}
/* Tabler アイコン（ti クラス）のサイズ調整 */
.ao-fv-icon-btn .ti {
font-size: 22px;
}
.aomode-site-header-icon-btn .ti {
font-size: 20px;
}
/* =====================================================================
** /blog/ 投稿一覧ページ専用スタイル
** トップページのBLOGセクションと同じ3カラムカード型レイアウト。
** .blog (body class) / .ao-blog-archive (wrapper) のスコープで完結。
** ===================================================================== */
.ao-blog-archive {
--ao-navy: #1A3A5C;
--ao-blue: #378ADD;
--ao-blue-soft: #D9E8F7;
--ao-blue-ice: #E6F1FB;
--ao-bg: #F5F8FC;
--ao-ink: #16243A;
--ao-ink-soft: #5B6E87;
--ao-ink-mute: #8FA0B6;
--ao-hair: #E1E8F1;
--ao-tag-spirit: #7F6BC9;
--ao-tag-quote: #E0A23C;
--ao-tag-qol: #4FB58A;
font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
color: var(--ao-ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.ao-blog-archive,
.ao-blog-archive * { box-sizing: border-box; }
.ao-blog-archive .en {
font-family: "Poppins", "Zen Kaku Gothic New", sans-serif;
letter-spacing: -0.01em;
}
/* Cocoon側カードスタイルのリセット（/blog/ 専用） */
.blog .ao-blog-archive .ao-blog-card {
background: #fff;
border: 1px solid var(--ao-hair);
border-radius: 18px;
overflow: hidden;
box-shadow: none;
margin: 0;
padding: 0;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog .ao-blog-archive .ao-blog-card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -20px rgba(26,58,92,0.25);
border-color: var(--ao-blue-soft);
}
/* ヘッダー（タイトル＋カテゴリ） */
.ao-blog-archive .ao-archive-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 32px;
margin: 0 0 48px;
flex-wrap: wrap;
}
.ao-blog-archive .ao-archive-title-block {
display: flex;
align-items: baseline;
gap: 24px;
}
.ao-blog-archive .ao-archive-title {
font-family: "Poppins", sans-serif;
font-weight: 800;
font-size: 64px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ao-navy);
margin: 0;
}
.ao-blog-archive .ao-archive-sub {
font-size: 15px;
color: var(--ao-ink-soft);
font-weight: 700;
position: relative;
padding-left: 18px;
}
.ao-blog-archive .ao-archive-sub::before {
content: "";
position: absolute; left: 0; top: 50%;
transform: translateY(-50%);
width: 8px; height: 8px;
background: var(--ao-blue);
border-radius: 50%;
}
/* カテゴリーリンク（アーカイブ版） */
.ao-blog-archive .ao-archive-cats {
display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.ao-blog-archive .ao-archive-cats-label {
font-family: "Poppins", sans-serif;
font-size: 13px;
color: var(--ao-ink-soft);
font-weight: 600;
margin-right: 8px;
letter-spacing: 0.1em;
}
.ao-blog-archive .ao-archive-cat {
padding: 8px 16px;
border: 1px solid var(--ao-hair);
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: var(--ao-ink-soft);
background: #fff;
text-decoration: none;
display: inline-flex; align-items: center; gap: 6px;
transition: all .2s ease;
}
.ao-blog-archive .ao-archive-cat::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--ao-ink-mute);
}
.ao-blog-archive .ao-archive-cat:hover:not(.is-active) {
border-color: var(--ao-blue);
color: var(--ao-navy);
}
.ao-blog-archive .ao-archive-cat.is-active {
background: var(--ao-navy);
color: #fff;
border-color: var(--ao-navy);
}
.ao-blog-archive .ao-archive-cat.is-active::before {
background: var(--ao-blue);
}
/* 3カラムグリッド */
.ao-blog-archive .ao-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 36px 32px;
}
.ao-blog-archive .ao-blog-link {
display: flex; flex-direction: column;
height: 100%;
color: inherit;
text-decoration: none;
}
.ao-blog-archive .ao-blog-thumb {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
background-color: #ccc;
background-size: cover;
background-position: center;
}
.ao-blog-archive .ao-blog-new {
position: absolute;
top: 14px; left: 14px;
z-index: 2;
background: var(--ao-blue);
color: #fff;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.1em;
padding: 5px 10px;
border-radius: 4px;
}
.ao-blog-archive .ao-blog-body {
padding: 22px 22px 24px;
display: flex; flex-direction: column; gap: 12px;
flex: 1;
}
.ao-blog-archive .ao-blog-meta {
display: flex; justify-content: space-between; align-items: center;
}
.ao-blog-archive .ao-blog-date {
font-family: "Poppins", sans-serif;
font-size: 12px;
color: var(--ao-ink-mute);
letter-spacing: 0.04em;
}
.ao-blog-archive .ao-blog-title {
font-size: 16px;
font-weight: 700;
line-height: 1.6;
color: var(--ao-navy);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ao-blog-archive .ao-blog-tags {
display: flex; gap: 6px; flex-wrap: wrap;
list-style: none; margin: 0; padding: 0;
margin-top: auto;
}
.ao-blog-archive .ao-tag {
font-size: 11px;
color: var(--ao-blue);
padding: 3px 9px;
border: 1px solid var(--ao-blue-soft);
border-radius: 999px;
background: var(--ao-blue-ice);
font-weight: 600;
white-space: nowrap;
list-style: none;
}
.ao-blog-archive .ao-cat-badge {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-size: 11px;
padding: 4px 10px;
border-radius: 4px;
color: #fff;
background: var(--ao-blue);
}
.ao-blog-archive .ao-cat-badge.cat-spiritual { background: var(--ao-tag-spirit); }
.ao-blog-archive .ao-cat-badge.cat-quotes { background: var(--ao-tag-quote); }
.ao-blog-archive .ao-cat-badge.cat-qol-goods { background: var(--ao-tag-qol); }
/* カテゴリ別プレースホルダ背景（サムネ未設定時）
※ background ショートハンドだと background-position を初期値(top left)に
リセットしてしまうため background-image のみ指定 */
.ao-blog-archive .ph-spiritual { background-image: linear-gradient(135deg, #7F6BC9, #5C4DA8); }
.ao-blog-archive .ph-quotes { background-image: linear-gradient(135deg, #E0A23C, #C57A20); }
.ao-blog-archive .ph-qol-goods { background-image: linear-gradient(135deg, #4FB58A, #2F8F66); }
.ao-blog-archive .ph-mixed,
.ao-blog-archive .ph-thoughts { background-image: linear-gradient(135deg, #378ADD, #1F6BBF); }
/* ページネーション */
.ao-blog-archive .ao-archive-pagination {
margin-top: 56px;
display: flex;
justify-content: center;
}
.ao-blog-archive .ao-archive-pagination .page-numbers {
display: inline-flex;
align-items: center; justify-content: center;
min-width: 40px; height: 40px;
padding: 0 12px;
margin: 0 4px;
border: 1px solid var(--ao-hair);
border-radius: 999px;
background: #fff;
color: var(--ao-ink-soft);
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: all .2s ease;
}
.ao-blog-archive .ao-archive-pagination .page-numbers:hover {
border-color: var(--ao-blue);
color: var(--ao-navy);
}
.ao-blog-archive .ao-archive-pagination .page-numbers.current {
background: var(--ao-navy);
color: #fff;
border-color: var(--ao-navy);
}
.ao-blog-archive .ao-archive-pagination .page-numbers.dots {
background: transparent;
border-color: transparent;
}
.ao-blog-archive .ao-archive-empty {
text-align: center;
color: var(--ao-ink-soft);
padding: 80px 0;
}
/* ページ背景（投稿一覧ページ） */
.blog #wrapper,
.blog #content,
.blog #main {
background: var(--ao-bg, #F5F8FC);
}
.blog #main {
padding: 32px;
}
/* /blog/ ページでは Cocoon の自動ページタイトルを非表示 */
.blog #main > .a-wrap,
.blog #main > .entry-title,
.blog #main > .page-title,
.blog #main > .archive-title {
display: none;
}
/* レスポンシブ */
@media screen and (max-width: 1023px) {
.ao-blog-archive .ao-blog-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.ao-blog-archive .ao-archive-title { font-size: 44px; }
.ao-blog-archive .ao-archive-head {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
}
@media screen and (max-width: 599px) {
.ao-blog-archive .ao-blog-grid {
grid-template-columns: 1fr;
}
.ao-blog-archive .ao-archive-title { font-size: 36px; }
.blog #main { padding: 20px; }
}
/* =====================================================================
** FV (Hero) リデザイン
** ① 背景: #2F5E94 + ブロブ (3色: #264B76 / #516F91 / #7D93AD)
** ② スライドカード: 白背景＋既存 opacity ロジック維持
** ③ アーチSVG キャッチコピー: 上端起点、ヘッダー上端に頂点
** ④ AOMODEロゴ: Poppins ExtraBold 80px / 白 / アウトライン / 影 / 境界跨ぎ
** ⑤ 左右ボタン: アーチ頂点(=top:0)起点で配置
** ===================================================================== */
/* ─── ① 背景ベース ─────────────────────────────── */
.home .aomode-front .ao-fv {
background: #2F5E94;
padding: 130px 0 72px;
/* width:100vw / margin-left ブレイクアウト・overflow:visible は
既存ルール(1248-1254行)を維持 → スライドのブリードを保つ */
}
.home .aomode-front .ao-fv-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden; /* ブロブはここで切る */
pointer-events: none;
}
.home .aomode-front .ao-fv-blob {
position: absolute;
display: block;
}
.home .aomode-front .ao-fv-blob-a {
width: 560px; height: 440px;
background: #264B76;
top: -140px; left: -160px;
border-radius: 62% 38% 60% 40% / 55% 65% 35% 45%;
transform: rotate(-12deg);
}
.home .aomode-front .ao-fv-blob-b {
width: 420px; height: 340px;
background: #7D93AD;
top: -100px; right: -120px;
border-radius: 50% 50% 60% 40% / 55% 45% 60% 40%;
transform: rotate(18deg);
}
.home .aomode-front .ao-fv-blob-c {
width: 260px; height: 210px;
background: #516F91;
top: 30%; left: 18%;
border-radius: 55% 45% 70% 30% / 60% 50% 50% 40%;
transform: rotate(-5deg);
}
.home .aomode-front .ao-fv-blob-d {
width: 480px; height: 380px;
background: #7D93AD;
bottom: -140px; left: 4%;
border-radius: 60% 40% 65% 35% / 50% 60% 40% 50%;
transform: rotate(12deg);
}
.home .aomode-front .ao-fv-blob-e {
width: 180px; height: 150px;
background: #264B76;
top: 22%; right: 12%;
border-radius: 55% 45% 60% 40% / 60% 40% 55% 45%;
transform: rotate(25deg);
}
.home .aomode-front .ao-fv-blob-f {
width: 320px; height: 260px;
background: #516F91;
bottom: -90px; right: -100px;
border-radius: 65% 35% 55% 45% / 50% 50% 50% 50%;
transform: rotate(-18deg);
}
.home .aomode-front .ao-fv-blob-g {
width: 160px; height: 130px;
background: #7D93AD;
top: 6%; left: 42%;
border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
transform: rotate(-20deg);
}
.home .aomode-front .ao-fv-blob-h {
width: 200px; height: 170px;
background: #264B76;
bottom: 24%; right: 32%;
border-radius: 50% 50% 60% 40% / 60% 40% 55% 45%;
transform: rotate(8deg);
}
/* ─── ⑤ 左右ボタン位置 ─────────────────────────── */
.home .aomode-front .ao-fv-icon-group {
position: absolute;
top: 24px;
left: 60px;
z-index: 10;
display: flex;
align-items: center;
gap: 12px;
}
.home .aomode-front .ao-fv .ao-hamburger-btn {
position: absolute;
top: 24px;
right: 60px;
z-index: 10;
/* スタイル変更：白地・黒線・角丸12px・ドロップシャドウ
※ box-sizing: border-box（.home .aomode-front 共通）により
border 1px は内側に入り、48×48px の外寸は維持 */
background: #FFFFFF;
color: #000000; /* SVG の stroke="currentColor" 反映 */
border: 1px solid #000000;
border-radius: 12px;
box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.75);
}
.home .aomode-front .ao-fv .ao-hamburger-btn:hover {
/* 基底ルール .ao-fv-icon-btn:hover の黒背景・白アイコンを打ち消し、
新デザインを維持しつつ軽い浮き上がりを表現 */
background: #FFFFFF;
color: #000000;
transform: translate(-1px, -1px);
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.75);
}
/* ─── ③ アーチSVG キャッチコピー ─────────────────── */
.home .aomode-front .ao-fv-arch {
position: absolute;
top: 40px; /* アーチ頂点(=SVG内 y≈0)を FV 上端に */
left: 50%;
transform: translateX(-50%);
width: 320px; /* 横幅固定、高さはアスペクト比維持 */
height: auto;
z-index: 5;
pointer-events: none;
display: block;
}
/* ─── ④ AOMODE ロゴ ────────────────────────────── */
.home .aomode-front .ao-fv-logo {
position: absolute;
left: 50%;
/* padding-top:240px のためカルーセル開始位置 ≈ 240px。
line-height 64px のうち 60%(38.4px) を上、40%(25.6px) を下に */
top: calc(140px - 32px); /* ≈ 201.6px */
transform: translateX(-50%);
z-index: 30;
font-family: "Poppins", sans-serif;
font-weight: 800; /* ExtraBold */
font-size: 80px;
letter-spacing: 1.28px;
line-height: 64px;
color: #FFFFFF;
-webkit-text-stroke: 2px #232323;
text-shadow: 2px 4px 0px rgba(0, 0, 0, 0.75);
margin: 0;
padding: 0;
white-space: nowrap;
}
/* ─── ② スライドカード（白地＋既存 opacity 維持） ──── */
.home .aomode-front .ao-fv-slide {
background-color: #FFFFFF; /* 既存 #C4C4C4 を白で上書き
→ Cocoon 紺色背景が透過時に滲まないように */
}
/* カルーセル: 上端は padding で確保したので bottom オフセット解除 */
.home .aomode-front .ao-fv-carousel {
bottom: -20px;
z-index: 2;
}
/* ヘッダー行・ロゴラップは DOM 削除済み。残骸ルールが効かないよう display:none で念押し */
.home .aomode-front .ao-fv-header-row,
.home .aomode-front .ao-fv-logo-wrap,
.home .aomode-front .ao-fv-catchcopy {
display: none;
}
/* ─── レスポンシブ ─────────────────────────────── */
@media screen and (max-width: 1023px) {
.home .aomode-front .ao-fv {
padding: 180px 0 72px;
}
.home .aomode-front .ao-fv-icon-group {
top: 16px; left: 20px; gap: 8px;
}
.home .aomode-front .ao-fv .ao-hamburger-btn {
top: 16px; right: 20px;
}
.home .aomode-front .ao-fv-arch {
width: 320px;
}
.home .aomode-front .ao-fv-logo {
font-size: 56px;
line-height: 48px;
letter-spacing: 0.9px;
-webkit-text-stroke: 1.5px #232323;
text-shadow: 2px 3px 0px rgba(0, 0, 0, 0.75);
top: calc(180px - 28.8px); /* ≈ 151.2px */
}
}
@media screen and (max-width: 768px) {
/* SP実機(360-768px)で新デザインが確実に適用されるよう、
背景／配色／配置を強めの宣言で再指定 */
.home .aomode-front .ao-fv {
padding: 140px 0 48px !important;
background: #2F5E94 !important;
}
.home .aomode-front .ao-fv-icon-group {
position: absolute !important;
top: 12px !important;
left: 12px !important;
display: flex !important;
flex-direction: row !important; /* 縦並び化を防止 */
align-items: center;
gap: 8px;
z-index: 10;
}
.home .aomode-front .ao-fv .ao-hamburger-btn {
position: absolute !important;
top: 12px !important;
right: 12px !important;
z-index: 10;
}
.home .aomode-front .ao-fv-arch {
width: 250px;
top: 80px;
}
.home .aomode-front .ao-fv-logo {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 56px !important;
line-height: 36px !important;
letter-spacing: 0.6px;
color: #FFFFFF !important;
-webkit-text-stroke: 1px #232323;
text-shadow: 1px 2px 0px rgba(0, 0, 0, 0.75);
top: calc(140px - 14.4px) !important; /* line-height 36の40%=14.4 */
z-index: 30 !important;
}
/* カルーセル下の余白を抑える */
.home .aomode-front .ao-fv-carousel {
bottom: 0 !important;
padding: 0 0 20px !important;
}
.home .aomode-front .ao-fv-blob { transform: scale(0.75); }
}
/* =====================================================================
** 下層ページ サイドバー リデザイン
** - 各ブロックが上のブロックに乗り上がる積層レイアウト
** - 上角丸 16px / box-shadow / 白文字
** - 順序: RANKING → Search → Other Contents → Categories → Archives
** - スコープ: body:not(.home) で下層ページのみ適用（トップに影響なし）
** ===================================================================== */
/* サイドバー本体: 積層の z-index スタッキング親 */
body:not(.home) #sidebar.sidebar {
position: relative;
}
/* ─── 全ウィジェット共通 ─────────────────────────── */
body:not(.home) .sidebar .widget {
position: relative;
padding: 24px 20px !important;
margin: 0 0 -20px 0 !important;
border-radius: 16px 16px 0 0;
overflow: hidden;
box-shadow: 0px 2px 10px rgba(26, 58, 92, 0.07);
color: #FFFFFF;
box-sizing: border-box;
}
/* タイトル: 英字 Poppins Bold 24px / 白 */
body:not(.home) .sidebar .widget .widget-title,
body:not(.home) .sidebar .widget .widgettitle,
body:not(.home) .sidebar .widget .wp-block-heading,
body:not(.home) .sidebar .widget > h2,
body:not(.home) .sidebar .widget > h3,
body:not(.home) .sidebar .widget > .wp-block-group > h2 {
font-family: "Poppins", "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.3;
letter-spacing: 0.02em;
color: #FFFFFF !important;
background: transparent !important;
padding: 0 !important;
margin: 0 0 14px 0 !important;
border-radius: 0 !important;
}
/* 本文・リンク・リスト全て白 */
body:not(.home) .sidebar .widget,
body:not(.home) .sidebar .widget a,
body:not(.home) .sidebar .widget li,
body:not(.home) .sidebar .widget p,
body:not(.home) .sidebar .widget span,
body:not(.home) .sidebar .widget label {
color: #FFFFFF;
}
body:not(.home) .sidebar .widget a:hover {
color: #FFFFFF;
opacity: 0.85;
text-decoration: none;
}
/* リスト系（latest-posts / categories / archives） */
body:not(.home) .sidebar .widget ul {
list-style: none;
margin: 0;
padding: 0;
}
body:not(.home) .sidebar .widget ul li {
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
font-size: 14px;
line-height: 1.5;
font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
body:not(.home) .sidebar .widget ul li:last-child {
border-bottom: none;
}
/* 既存ルール (.sidebar .widget > ul / form 12px padding) を打ち消し */
body:not(.home) .sidebar .widget > ul,
body:not(.home) .sidebar .widget > div:not(.widget-title):not(.widgettitle),
body:not(.home) .sidebar .widget form {
padding: 0 !important;
}
/* ─── ① RANKING（最背面） ────────────────────── */
body:not(.home) .sidebar .ao-sb-ranking-widget {
background: #1A3A5C !important;
z-index: 1;
}
/* 既存 .widget-title (line 1870 系) のパディング・サイズを共通仕様で上書き */
body:not(.home) .sidebar .ao-sb-ranking-widget .widget-title {
font-size: 24px !important;
letter-spacing: 0.02em !important;
font-weight: 700 !important;
padding: 0 !important;
margin: 0 0 14px 0 !important;
}
body:not(.home) .sidebar .ao-sb-ranking-widget .ao-sb-rank-list {
padding: 0 !important;
}
/* ─── ② 検索（#block-2） ─────────────────────── */
body:not(.home) .sidebar #block-2 {
background: #5C4DA8 !important;
z-index: 2;
}
/* WP標準 search ブロックの label をタイトル化 */
body:not(.home) .sidebar #block-2 .wp-block-search__label {
font-family: "Poppins", "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1.3;
color: #FFFFFF;
margin: 0 0 14px 0;
padding: 0;
display: block;
}
body:not(.home) .sidebar #block-2 .wp-block-search__inside-wrapper {
display: flex;
gap: 8px;
align-items: center;
}
body:not(.home) .sidebar #block-2 .wp-block-search__input {
border-radius: 999px;
border: none;
padding: 8px 16px;
background: #FFFFFF;
color: #1A3A5C;
flex: 1 1 auto;
min-width: 0;
}
body:not(.home) .sidebar #block-2 .wp-block-search__button {
border-radius: 999px;
border: none;
background: #1A3A5C;
color: #FFFFFF;
padding: 8px 18px;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
}
body:not(.home) .sidebar #block-2 .wp-block-search__button:hover {
background: #122A45;
color: #FFFFFF;
}
/* ─── ③ Other Contents（#block-3 / 最新の投稿） ── */
body:not(.home) .sidebar #block-3 {
background: #499DBB !important;
z-index: 3;
}
/* ─── ④ Recent Comments（#block-4）はデザインに無いので非表示 ── */
body:not(.home) .sidebar #block-4,
body:not(.home) .sidebar .widget:has(.wp-block-latest-comments) {
display: none !important;
}
/* ─── sidebar-scroll: 内部を flex column 化し Categories→Archives 順に ─ */
body:not(.home) .sidebar .sidebar-scroll {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
/* Cocoon親テーマで position: sticky が設定されており、これが独立した
stacking context を生成して内部の z-index を閉じ込めてしまう。
コンテナごと block-3 (z-index:3) より前面に持ち上げる必要があるため
z-index を明示する */
z-index: 4;
}
/* ⑤ Categories（#block-6）— 上に配置 */
body:not(.home) .sidebar .sidebar-scroll #block-6 {
background: #459983 !important;
z-index: 4;
order: 1;
}
/* ⑥ Archives（#block-5）— 最下部・最前面・下マージン解除 */
body:not(.home) .sidebar .sidebar-scroll #block-5 {
background: #E1A23B !important;
border-radius: 16px;
z-index: 5;
order: 2;
margin-bottom: 0 !important;
}
/* =====================================================================
** 記事詳細ページ 目次 (Cocoon TOC) リデザイン
** - 白カード / 角丸16px / box-shadow / 中央寄せ max-width 800px
** - タイトル帯 #499DBB / 白文字（[閉じる] 含む）
** - リンク #1A3A5C / weight 500 / 番号は Poppins
** - Cocoon親テーマの .toc 既定 (border / display:table 等) を
** #toc.toc で詳細度を上げて完全上書き
** ===================================================================== */
#toc.toc {
width: 100%;
max-width: 800px;
margin: 32px auto !important;
background: #FFFFFF !important;
border: none !important;
border-radius: 16px !important;
box-shadow: 0px 0px 16px rgba(221, 221, 221, 0.5) !important;
padding: 0 !important;
display: block !important;
overflow: hidden;
font-size: 15px;
}
/* タイトル帯（「目次 [閉じる]」） */
#toc.toc .toc-title {
background: #499DBB !important;
color: #FFFFFF !important;
font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
font-weight: 700 !important;
font-size: 16px !important;
line-height: 1.4;
text-align: center;
padding: 14px 16px !important;
margin: 0 !important;
display: block;
cursor: pointer;
border-radius: 0 !important;
}
/* Cocoonが ::after で "[閉じる]"/"[開く]" を挿入。文字色を白に統一 */
#toc.toc .toc-title::before,
#toc.toc .toc-title::after {
color: #FFFFFF !important;
}
/* 内側コンテンツ余白 */
#toc.toc .toc-content {
padding: 18px 28px 22px !important;
background: #FFFFFF;
}
/* リスト */
#toc.toc .toc-list {
padding-left: 1.8em !important;
margin: 0 !important;
list-style-position: outside;
}
#toc.toc .toc-list li {
margin: 6px 0;
font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
font-weight: 500;
color: #1A3A5C;
line-height: 1.6;
}
/* 番号: ::marker（tnt-number = ブラウザ既定マーカー）と
::before（tnt-number-detail = カウンタ生成）両対応 */
#toc.toc .toc-list li::marker {
font-family: "Poppins", sans-serif;
font-weight: 500;
color: #1A3A5C;
}
#toc.toc.tnt-number-detail .toc-list ol li::before {
font-family: "Poppins", sans-serif;
font-weight: 500;
color: #1A3A5C;
}
/* リンク */
#toc.toc .toc-list a,
#toc.toc a {
color: #1A3A5C !important;
font-weight: 500;
text-decoration: none;
transition: color .15s ease;
}
#toc.toc .toc-list a:hover,
#toc.toc a:hover {
color: #378ADD !important;
text-decoration: underline;
}
/* =====================================================================
** 記事詳細ページ 前後記事ナビゲーション（#pager-post-navi）
** - PC(>=768px): 1行2カラム横並び (prev左 / next右)
** - 上下のボーダー線・「前の記事を読む」等のラベル(::before)を非表示
** - テキスト色 #1A3A5C / 背景白 / サムネ寸法・hoverは現状維持
** - SP(<768px): Cocoon既定の縦並びを維持（mediaクエリ外には何も書かない）
** ===================================================================== */
@media (min-width: 768px) {
/* コンテナ：横並び化 */
#pager-post-navi.pager-post-navi {
display: flex !important;
flex-direction: row !important;
gap: 24px;
margin: 38px 0;
background: #FFFFFF;
}
/* prev / next: 50%ずつ */
#pager-post-navi.pager-post-navi a.prev-post,
#pager-post-navi.pager-post-navi a.next-post {
flex: 1 1 50%;
width: auto;
background: #FFFFFF;
color: #1A3A5C;
/* 上下区切り線を完全に消す（post-navi-border 設定・border-element 由来など全て対象） */
border: none !important;
}
/* ラベル(::before)非表示 — スキンによる「前の記事を読む」/「次の記事を読む」 */
#pager-post-navi.pager-post-navi a.prev-post::before,
#pager-post-navi.pager-post-navi a.next-post::before,
#pager-post-navi.pager-post-navi a::before {
content: none !important;
display: none !important;
}
/* リンク／タイトル文字色 */
#pager-post-navi.pager-post-navi a,
#pager-post-navi.pager-post-navi a .prev-post-title,
#pager-post-navi.pager-post-navi a .next-post-title {
color: #1A3A5C;
}
/* hover は Cocoon既定 (.a-wrap:hover background #f5f8fa) のまま維持 */
}
/* =====================================================================
** Who is? + ILLUSTRATION セクション リデザイン
** ① Who is? の上部のみ角丸 (PC 48px / SP 20px)
** ② ILLUSTRATION: 外側#274C95全幅 / 内側#F5F8FC角丸コンテナ
** ③ 画像サイズ: 左340×500 / 中段340×240×2 / 右340×500
** ④ suzuri-goods.png をおじさんに被せる (左85px / 前面)
** ⑤ 吹き出し: SUZURIグッズ上部センター "グッズ"
** ⑥ surisurikun.png 56×56 を吹き出しテキスト隣に
** ⑦ SUZURIへボタン (ao-pill-btn + 外部リンクSVG)
** ⑧ FV左SUZURIアイコンを surisurikun.png 画像に
** ===================================================================== */
/* ── ① Who is? 上部角丸 ───────────────────── */
.home .aomode-front .ao-whois-section {
border-radius: 48px 48px 0 0;
}
/* ── ② ILLUSTRATION 背景2層 (外側#274C95全幅) ── */
.home .aomode-front .ao-illust-section {
background: #274C95;
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
padding: 0;
box-sizing: border-box;
position: relative;
}
/* 内側コンテナ: 左右32px余白 / 四隅48px / #F5F8FC */
.home .aomode-front .ao-illust-inner {
background: #F5F8FC;
margin: 0 32px;
border-radius: 48px;
padding: 96px 32px;
box-sizing: border-box;
position: relative;
}
/* ── ③ グリッド配置 ───────────────────────── */
/* 4カラム:
col1-3 = 340px (boys / [boydog+blue] / おじさん),
col4 = 235px (suzuri-goods の はみ出し受け = 340 - 85 overlap)
total = 340*3 + 235 + 20*3 = 1315px ←【visual unit と一致するため、margin:0 auto で
キレイに中央寄せされる(空きトラックが残らない)】
minmax(0, X) で narrow PC viewport では各 col が比例縮小 */
.home .aomode-front .ao-illust-grid {
display: grid;
grid-template-columns:
minmax(0, 340px)
minmax(0, 340px)
minmax(0, 340px)
minmax(0, 235px);
grid-template-rows: 1fr 1fr;
gap: 20px;
justify-content: center;
row-gap: 20px;
max-width: 1315px;
margin: 0 auto;
width: 100%;
aspect-ratio: 1315 / 500; /* 全体の縦横比を固定 (W:H = 1315:500) */
}
/* セル個別 - 旧定義(L1065-1080) を上書き
固定 width/height は外し、grid track と aspect-ratio に追従させる */
.home .aomode-front .ao-illust-c1 {
grid-column: 1; grid-row: 1 / span 2;
background: linear-gradient(160deg, #B7C7DB, #8AA3C3);
border-radius: 14px;
}
.home .aomode-front .ao-illust-c2 {
grid-column: 2; grid-row: 1;
background: linear-gradient(160deg, #D9E0EB, #B7C2D5);
border-radius: 14px;
}
.home .aomode-front .ao-illust-c3 {
grid-column: 2; grid-row: 2;
background: linear-gradient(160deg, #C7D5E5, #93AAC5);
border-radius: 14px;
}
.home .aomode-front .ao-illust-c4 {
grid-column: 3; grid-row: 1 / span 2;
background: linear-gradient(160deg, #A7BFD8, #6E89A8);
border-radius: 14px;
position: relative;
overflow: visible; /* suzuri-goods が右側 col4 へはみ出す */
}
/* おじさん画像はc4のセル枠内でcover */
.home .aomode-front .ao-illust-c4 .ao-illust-img {
border-radius: 14px;
}
/* ── ④ SUZURIグッズ画像 (おじさん右側に隣接、85px被せ) ──
suzuri-goods の左端 = c4_right - 85px。width は c4 と等倍 (100%) で
narrow viewport でも c4 と比例して縮小する */
.home .aomode-front .ao-suzuri-goods-img {
position: absolute;
top: 62%;
left: calc(100% - 85px);
right: auto;
transform: translateY(-50%);
width: 100%; /* = c4 width (col_3) */
height: auto;
z-index: 5; /* おじさんより前面 */
pointer-events: none;
}
/* ── ⑤+⑥ 吹き出しを SUZURIグッズ上部センターに ──
suzuri-goods は left=100%-85px, width=100% (=W)
→ 横中央 = (W-85) + W/2 = 1.5W - 85 = calc(150% - 85px) */
.home .aomode-front .ao-illust-c4 .ao-speech-bubble {
position: absolute;
top: calc(50% - 200px);
left: calc(150% - 85px);
transform: translateX(-50%);
width: 220px;
background: #fff;
border: 1px solid var(--ao-hair);
border-radius: 16px;
padding: 14px 16px;
font-size: 13px;
font-weight: 700;
color: var(--ao-navy);
line-height: 1.6;
box-shadow: 0 10px 24px -10px rgba(26,58,92,0.2);
z-index: 10;
}
/* 既存の左向き矢印 ::before を打ち消し、下向き三角に */
.home .aomode-front .ao-illust-c4 .ao-speech-bubble::before {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
top: auto;
width: 0; height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 12px solid #fff;
border-bottom: none;
filter: drop-shadow(0 1px 0 var(--ao-hair));
}
.home .aomode-front .ao-illust-c4 .ao-speech-bubble .small {
display: block;
font-size: 11px;
color: var(--ao-blue);
font-family: "Poppins", sans-serif;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 4px;
}
.home .aomode-front .ao-speech-text-row {
display: flex;
align-items: center;
gap: 8px;
}
.home .aomode-front .ao-speech-text {
flex: 1 1 auto;
}
.home .aomode-front .ao-speech-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
object-fit: contain;
display: block;
}
/* ── ⑦ SUZURIへボタン (ao-pill-btn 流用) ─── */
.home .aomode-front .ao-illust-cta {
display: flex;
justify-content: center;
margin-top: 64px;
}
/* (ao-pill-btn / ao-arrow-circle は既存スタイルをそのまま使用) */
/* ── ⑧ FV SUZURIアイコン: 画像差替 ──────── */
.home .aomode-front .ao-fv-icon-btn-suzuri .ao-fv-icon-img {
width: 36px;
height: 36px;
object-fit: contain;
display: block;
}
/* ── レスポンシブ (max-width: 1023px) ────── */
/* タブレット: suzuri-goods を absolute から block flow へ切替
→ 4枚のイラストの下に block 表示で並ぶ
c4 を flex column 化し、子要素を order で並べ替える */
@media screen and (max-width: 1023px) {
/* Who is? の角丸 48px は維持 */
/* ILLUSTRATION 内側コンテナ */
.home .aomode-front .ao-illust-inner {
margin: 0 16px;
padding: 64px 20px;
}
/* グリッド: 2カラム表示。aspect-ratio 解除、auto rows */
.home .aomode-front .ao-illust-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
aspect-ratio: auto;
max-width: 100%;
gap: 16px;
}
.home .aomode-front .ao-illust-c1,
.home .aomode-front .ao-illust-c2,
.home .aomode-front .ao-illust-c3,
.home .aomode-front .ao-illust-c4 {
width: 100%;
height: auto;
aspect-ratio: 340 / 240;
grid-column: auto;
grid-row: auto;
}
.home .aomode-front .ao-illust-c1 {
aspect-ratio: 340 / 500;
grid-column: 1; grid-row: 1 / span 2;
}
.home .aomode-front .ao-illust-c2 { grid-column: 2; grid-row: 1; }
.home .aomode-front .ao-illust-c3 { grid-column: 2; grid-row: 2; }
/* c4: flex column 化 → 子要素を image / bubble / suzuri-goods の縦順に */
.home .aomode-front .ao-illust-c4 {
grid-column: 1 / span 2;
grid-row: 3;
aspect-ratio: auto;
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
overflow: visible;
background: transparent;
border-radius: 0;
padding: 0;
}
/* おじさん画像: 絶対配置を解除し block 化 */
.home .aomode-front .ao-illust-c4 .ao-illust-img {
position: static;
inset: auto;
width: 100%;
max-width: 500px;
height: auto;
aspect-ratio: 340 / 500;
object-fit: cover;
object-position: center;
order: 1;
border-radius: 14px;
}
/* 吹き出し: absolute → static、suzuri-goods の上に配置 (order 2) */
.home .aomode-front .ao-illust-c4 .ao-speech-bubble {
position: static;
top: auto; left: auto; right: auto; bottom: auto;
transform: none;
margin: 0 auto;
width: auto;
max-width: 320px;
order: 2;
}
/* 吹き出し三角を suzuri-goods (下) に向ける */
.home .aomode-front .ao-illust-c4 .ao-speech-bubble::before {
position: absolute;
bottom: -10px;
top: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
border-top: 12px solid #fff;
border-bottom: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
/* suzuri-goods: absolute → static、block 表示で c4 末尾 (order 3) */
.home .aomode-front .ao-suzuri-goods-img {
position: static;
top: auto; left: auto; right: auto; bottom: auto;
transform: none;
display: block;
width: 70%;
max-width: 340px;
height: auto;
margin: 0 auto;
order: 3;
pointer-events: auto;
}
}
/* ── レスポンシブ (max-width: 768px) ─────── */
/* SP: タブレット (≤1023px) と同じ「c4 flex column / suzuri-goods static block」
を継承しつつ、1カラム化と寸法調整のみ追加 */
@media (max-width: 768px) {
/* ① Who is? 上部角丸: SP 20px */
.home .aomode-front .ao-whois-section {
border-radius: 20px 20px 0 0;
}
/* ② ILLUSTRATION 内側コンテナ角丸: SP 20px */
.home .aomode-front .ao-illust-inner {
margin: 0 12px;
border-radius: 20px;
padding: 56px 16px;
}
/* グリッド: 1カラム化、aspect-ratio 解除維持 */
.home .aomode-front .ao-illust-grid {
grid-template-columns: 1fr;
aspect-ratio: auto;
gap: 14px;
}
.home .aomode-front .ao-illust-c1,
.home .aomode-front .ao-illust-c2,
.home .aomode-front .ao-illust-c3,
.home .aomode-front .ao-illust-c4 {
grid-column: 1;
grid-row: auto;
aspect-ratio: 340 / 240;
height: auto;
width: 100%;
}
.home .aomode-front .ao-illust-c1 { aspect-ratio: 340 / 500; }
/* c4 は flex column 維持。SP 用に微調整 */
.home .aomode-front .ao-illust-c4 {
aspect-ratio: auto;
grid-column: 1;
gap: 12px;
}
.home .aomode-front .ao-illust-c4 .ao-illust-img {
max-width: 100%;
}
/* 吹き出し: SP用にコンパクト化 */
.home .aomode-front .ao-illust-c4 .ao-speech-bubble {
max-width: 280px;
padding: 12px 14px;
font-size: 12px;
}
/* SUZURIグッズ: モバイルは適度に縮小 (static block 維持) */
.home .aomode-front .ao-suzuri-goods-img {
width: 80%;
max-width: 280px;
}
.home .aomode-front .ao-speech-icon {
width: 44px; height: 44px;
}
.home .aomode-front .ao-illust-cta {
margin-top: 40px;
}
}
/* =====================================================================
** サイドバー：カテゴリー／アーカイブの記事数カウントを全角括弧で囲う
** Cocoonがブロック出力の件数を 5 に整形し
** 元の括弧を除去するため、CSSの擬似要素で （ ） を付与する。
** サイドバー内の該当2ブロックのみにスコープ。
** ===================================================================== */
#sidebar .wp-block-categories .post-count::before,
#sidebar .wp-block-archives .post-count::before {
content: "（";
}
#sidebar .wp-block-categories .post-count::after,
#sidebar .wp-block-archives .post-count::after {
content: "）";
}
/* =====================================================================
** スマホ／タブレット（1023px以下）でもサイドバーを表示する
** Cocoon設定「モバイルにサイドバーを表示しない」により body.no-mobile-sidebar
** が付与され、親テーマが .no-mobile-sidebar .sidebar { display:none } で
** 1023px以下のサイドバーを隠している。これを子テーマで解除する。
** 縦積み・全幅化（main.main, div.sidebar { display:block; width:auto; }）は
** 親テーマが同メディアクエリ内で既に設定済みのため、表示解除のみでよい。
** トップページ（.home）のサイドバー非表示は意図的なので対象外。
** ===================================================================== */
@media screen and (max-width: 1023px) {
body:not(.home).no-mobile-sidebar .sidebar {
display: block;
width: auto;
}
}
/* =====================================================================
** スマホ（768px以下）サイドバーのスタイル微調整
** ① Ranking ウィジェットの上下余白 +16px（padding で重なり維持）
** ② Ranking / Recent Posts / Categories / Archives の文字を 16px に
** ③ 重なり(margin-bottom)を 10px 緩める（-20px → -10px、重なりは維持）
** ※ Archives(#block-5) は最下段で下に重ねる相手が無いため 0px のまま
** PC（769px以上）は一切変更しない。
** ===================================================================== */
@media (max-width: 768px) {
/* ① Ranking セクション上下余白 +16px（24px → 40px / 横20pxは維持） */
body:not(.home) .sidebar .ao-sb-ranking-widget {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* ② 文字サイズ 16px：Ranking 記事タイトル */
body:not(.home) .sidebar .ao-sb-ranking-widget .ao-sb-rank-title {
font-size: 16px !important;
}
/* ② 文字サイズ 16px：Recent Posts 記事タイトル */
body:not(.home) .sidebar #block-3 .wp-block-latest-posts__post-title {
font-size: 16px !important;
}
/* ② 文字サイズ 16px：Categories カテゴリ名 */
body:not(.home) .sidebar #block-6 .list-item-caption {
font-size: 16px !important;
}
/* ② 文字サイズ 16px：Archives 年月テキスト */
body:not(.home) .sidebar #block-5 .list-item-caption {
font-size: 16px !important;
}
/* ③ 重なりを 10px 緩める（-20px → -10px）：Recent Posts / Categories */
body:not(.home) .sidebar #block-3 {
margin-bottom: -10px !important;
}
body:not(.home) .sidebar .sidebar-scroll #block-6 {
margin-bottom: -10px !important;
}
/* Archives(#block-5) は最下段のため重なり対象外・0px 維持 */
}
/* =====================================================================
** サイドバー内リンクの hover スタイル（PC・スマホ共通）
** - 背景色を付けない（親テーマ .widget_block ul li a:hover の
** background-color:#f5f8fa を打ち消す）
** - opacity 0.6 でふわっと減光
** - transition: opacity 0.2s ease で滑らかに変化
** サイドバー（.sidebar）内のみにスコープ。他リンクには影響なし。
** ===================================================================== */
.sidebar a {
transition: opacity 0.2s ease;
}
.sidebar a:hover {
background-color: transparent !important;
opacity: 0.6 !important;
}
/* =====================================================================
** CONTACT FORM セクション（Who is? 直下・青背景で連続させる）
** - Who is? と同じ #274C95 全幅背景で繋げる
** - フォーム最大幅 640px・中央揃え・PC/SP共通レスポンシブ
** - Contact Form 7 のスタイルは .ao-contact-section 内にスコープ
** ===================================================================== */
.home .aomode-front .ao-contact-section {
background: #274C95;
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
padding: 0 20px 124px; /* 下部は中央寄せSubmitボタンのスペース確保 */
box-sizing: border-box;
}
.home .aomode-front .ao-contact-inner {
position: relative; /* 中央寄せSubmitボタンの基準 */
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 4fr 6fr;
gap: 40px;
align-items: stretch;
}
/* 左カラム：タイトル＋リード文（青背景・フォーム入力欄と同じ高さ） */
.home .aomode-front .ao-contact-intro {
background: #385A9D; /* #274C95 に白8% */
border-radius: 12px;
padding: 48px 40px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
}
/* タイトル：白文字・h2相当 */
.home .aomode-front .ao-contact-title {
font-family: "Poppins", "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 1.5;
color: #ffffff;
text-align: left;
margin: 0 0 20px;
}
/* リード文：白文字・16px */
.home .aomode-front .ao-contact-lead {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.9;
color: #ffffff;
text-align: left;
margin: 0;
}
/* 右カラム：フォーム */
.home .aomode-front .ao-contact-form {
align-self: start;
}
/* ラベル：白文字 */
.home .aomode-front .ao-contact-form label {
display: block;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 15px;
font-weight: 500;
color: #ffffff;
margin-bottom: 16px;
}
/* 入力ボックス・テキストエリア：白背景・角丸8px・幅100% */
.home .aomode-front .ao-contact-form input[type="text"],
.home .aomode-front .ao-contact-form input[type="email"],
.home .aomode-front .ao-contact-form input[type="tel"],
.home .aomode-front .ao-contact-form input[type="url"],
.home .aomode-front .ao-contact-form input[type="number"],
.home .aomode-front .ao-contact-form input[type="date"],
.home .aomode-front .ao-contact-form select,
.home .aomode-front .ao-contact-form textarea {
width: 100%;
box-sizing: border-box;
background: #ffffff;
border: none;
border-radius: 8px;
padding: 12px 14px;
margin-top: 6px;
font-family: "Zen Kaku Gothic New", sans-serif;
font-size: 15px;
color: #1A3A5C;
}
.home .aomode-front .ao-contact-form textarea {
min-height: 140px;
resize: vertical;
}
/* プレースホルダー：白背景上なので可読色（薄グレー） */
.home .aomode-front .ao-contact-form ::placeholder {
color: #9bb0c5;
opacity: 1;
}
/* 送信ボタンの行（CF7最後の）：列フローから外して
セクション全体の中央へ。これにより左カラムの高さは
入力欄ブロックの下端に揃って縮む。 */
.home .aomode-front .ao-contact-form > p:last-of-type {
position: absolute;
left: 0;
right: 0;
top: 100%;
margin: 28px 0 0;
text-align: center;
}
/* 送信ボタン：#378ADD・白文字・角丸・hoverで少し暗く */
.home .aomode-front .ao-contact-form input[type="submit"],
.home .aomode-front .ao-contact-form button[type="submit"] {
display: inline-block;
width: auto;
min-width: 200px;
margin: 0;
background: #378ADD;
color: #ffffff;
border: none;
border-radius: 999px;
padding: 14px 40px;
font-family: "Poppins", "Zen Kaku Gothic New", sans-serif;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.home .aomode-front .ao-contact-form input[type="submit"]:hover,
.home .aomode-front .ao-contact-form button[type="submit"]:hover {
background: #2a6fb8;
}
/* 送信完了・各種レスポンスメッセージ：青背景上で読めるよう白文字 */
.home .aomode-front .ao-contact-form .wpcf7-response-output {
color: #ffffff;
}
/* CONTACT FORM レスポンシブ（768px以下） */
@media (max-width: 768px) {
.home .aomode-front .ao-contact-section {
padding: 0 16px 56px;
}
/* SPは縦積み・中央寄せに戻す */
.home .aomode-front .ao-contact-inner {
grid-template-columns: 1fr;
gap: 28px;
}
/* SPではSubmitを通常フローに戻す（縦積みの最下部・画面中央に配置） */
.home .aomode-front .ao-contact-form > p:last-of-type {
position: static;
margin: 28px 0 0;
text-align: center;
}
.home .aomode-front .ao-contact-form input[type="submit"],
.home .aomode-front .ao-contact-form button[type="submit"] {
display: block;
margin: 0 auto;
}
.home .aomode-front .ao-contact-intro {
padding: 32px 24px;
}
.home .aomode-front .ao-contact-title {
font-size: 21px;
text-align: center;
margin-bottom: 16px;
}
.home .aomode-front .ao-contact-lead {
text-align: center;
}
}
/* =====================================================================
** SERIES（連載目次：宿ができるまで）セクション
** ===================================================================== */
.home .aomode-front .ao-series-section { background: var(--ao-bg); }
.home .aomode-front .ao-series-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--ao-hair);
}
.home .aomode-front .ao-series-item {
border-bottom: 1px solid var(--ao-hair);
}
.home .aomode-front .ao-series-link {
display: flex;
align-items: baseline;
gap: 24px;
padding: 20px 8px;
transition: background .2s ease, padding-left .2s ease;
}
.home .aomode-front .ao-series-link:hover {
background: var(--ao-blue-ice);
padding-left: 16px;
}
.home .aomode-front .ao-series-num {
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 18px;
color: var(--ao-blue);
flex-shrink: 0;
letter-spacing: 0.04em;
}
.home .aomode-front .ao-series-title {
font-family: "Zen Kaku Gothic New", sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.6;
color: var(--ao-ink);
flex: 1 1 auto;
}
.home .aomode-front .ao-series-date {
font-family: "Poppins", sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--ao-ink-mute);
flex-shrink: 0;
letter-spacing: 0.04em;
}
/* SERIES レスポンシブ（768px以下） */
@media screen and (max-width: 768px) {
.home .aomode-front .ao-series-link {
gap: 14px;
padding: 16px 4px;
}
.home .aomode-front .ao-series-link:hover {
padding-left: 12px;
}
.home .aomode-front .ao-series-num { font-size: 16px; }
.home .aomode-front .ao-series-title { font-size: 14px; }
.home .aomode-front .ao-series-date { font-size: 11px; }
}
/* =====================================================================
** FVスライダー：連載バッジ（連載 宿ができるまで）
** ===================================================================== */
/* 英字「SERIES」：黒背景ラベル（角丸なし）。Poppins bold で大きく見せる */
.home .aomode-front .ao-fv-series-badge {
display: inline-block;
align-self: flex-start;
font-family: "Poppins", sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1;
letter-spacing: 0.04em;
color: #fff;
background: #000;
padding: 6px 14px;
border-radius: 0;
margin-bottom: 12px;
}
@media screen and (max-width: 768px) {
.home .aomode-front .ao-fv-series-badge {
font-size: 14px;
padding: 4px 10px;
margin-bottom: 8px;
}
}