@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic&family=Mochiy+Pop+One&display=swap');
/* ========================================
   まとめてますよ
   Frontend Design
   ======================================== */

.mma-wrapper,
.mma-wrapper *{
    box-sizing:border-box;
}

/* WordPress本文幅を突き抜けてアンテナを広く使う */
.mma-wrapper{
    width:min(1400px, calc(100vw - 80px));
    max-width:none;
    margin:0 auto;
    color:#222;
    font-family:"BIZ UDGothic", sans-serif;
}

/* -------------------------
   アンテナ専用ヘッダー
   ------------------------- */

.mma-header{
    background:#fcf003;
    border-top:5px solid #111;
    border-bottom:1px solid #d5c671;
    margin-bottom:28px;
}

.mma-header-inner{
    min-height:64px;
    padding:0 24px;
    display:flex;
    align-items:center;
    gap:45px;
}

.mma-logo{
    flex:0 0 auto;
}

.mma-logo a{
    color:#111;
    font-family:"Mochiy Pop One", sans-serif;
    font-size:28px;
    font-weight:400;
    letter-spacing:.02em;
    text-decoration:none;
    white-space:nowrap;
}

.mma-nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px 24px;
}

.mma-nav a,
.mma-nav span{
    color:#222;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
}

/* ナビゲーションリンクは黒で統一 */
.mma-nav a{
color:#222;
text-decoration:none;
}

/* マウスオーバー時に下線 */
.mma-nav a:hover{
text-decoration:underline;
text-underline-offset:4px;
}

/* -------------------------
   メイン 7 : 3
   ------------------------- */

.mma-main{
    display:grid;
    grid-template-columns:minmax(0,7fr) minmax(290px,3fr);
    gap:22px;
    align-items:start;
}

/* -------------------------
左側の記事エリア
------------------------- */

.mma-news-column{

    /*
     * PICKUPエリア全体を囲っていた
     * 薄いグレーの外枠は付けない。
     *
     * PICKUPは白背景のまま
     * 下の黄色ラインへ自然につなげる。
     */
    border:none;

    /* サイト全体と同じ白背景 */
    background:#fff;

    /* 内部要素のはみ出しを防ぐ */
    overflow:hidden;
}


/* -------------------------
右側の登録サイト欄
------------------------- */

.mma-sidebar{

    /*
     * 登録サイト欄は今までどおり
     * 薄いグレーの外枠を残す。
     */
    border:1px solid #d8d8d8;

    /* 背景 */
    background:#fff;

    /* 内部要素のはみ出しを防ぐ */
    overflow:hidden;
}

/* -------------------------
   セクション見出し
   ------------------------- */

.mma-section-title{
    min-height:54px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:0 18px;
    background:#222;
    border-bottom:4px solid #fcf003;
}

.mma-section-title strong{
    color:#fcf003;
    font-size:25px;
    font-weight:800;
    font-style:italic;
}

.mma-section-title span{
    color:#fff;
    font-size:14px;
    font-weight:700;
}

/* -------------------------
   新着記事
   ------------------------- */

.mma-news-list{
    width:100%;
}

.mma-news-row{
    display:grid;
    grid-template-columns:72px 48px 60px 88px minmax(0,1fr) 125px;
    align-items:center;
    min-height:86px;
    padding:6px 13px;
    border-bottom:1px dotted #cfcfcf;
    background:#fff;
}

.mma-news-row:last-child{
    border-bottom:0;
}

.mma-news-row:nth-child(even){
    background:#fcfcfc;
}

.mma-news-row:hover{
    background:#fffbea;
}

/* 日付 */
.mma-date{
    color:#333;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
}

/* 時刻 */
.mma-time{
    color:#333;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

/* カテゴリ */
.mma-category{
justify-self:center;
padding:2px 5px;
border:1px solid #277bb5;
border-radius:2px;
background:#fff;
color:#176da8;
font-size:10px;
font-weight:700;
white-space:nowrap;
}


/* 記事サムネイル */
.mma-thumbnail{
    width:80px;
    height:56px;
    overflow:hidden;
    background:#f3f3f3;
}

.mma-thumbnail a{
    display:block;
    width:100%;
    height:100%;
}

.mma-thumbnail img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* -------------------------
カテゴリ別カラー
記事一覧・登録サイト共通
------------------------- */

/* ニュース：赤 */
.mma-category-news{
border-color:#d64545;
color:#d64545;
}

/* アニメ：藍色 */
.mma-category-anime{
border-color:#4545b8;
color:#4545b8;
}

/* ゲーム：緑 */
.mma-category-game{
border-color:#2f8a4c;
color:#2f8a4c;
}

/* 趣味：赤紫 */
.mma-category-hobby{
border-color:#b0448f;
color:#b0448f;
}

/* 芸能：オレンジ */
.mma-category-entertainment{
border-color:#d97818;
color:#d97818;
}

/* 生活：青 */
.mma-category-life{
border-color:#277bb5;
color:#176da8;
}

/* VTuber：紫 */
.mma-category-vtuber{
border-color:#7651b5;
color:#7651b5;
}

/* お金：ゴールド系 */
.mma-category-money{
border-color:#a67c00;
color:#8a6800;
}

/* スポーツ：濃い緑 */
.mma-category-sports{
border-color:#16705a;
color:#16705a;
}


/* 記事タイトル */
.mma-title{
    min-width:0;
    padding:0 8px;
}

/* 記事タイトルは読みやすさ優先で黒にする */
.mma-title a{
display:-webkit-box;
overflow:hidden;
color:#222;
font-size:16px;
font-weight:500;
line-height:1.45;
text-decoration:none;
white-space:normal;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
}

.mma-title a:hover{
    color:#06446f;
    text-decoration:underline;
}

/* サイト名 */
.mma-site{
    overflow:hidden;
    color:#555;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* -------------------------
   登録サイト
   ------------------------- */

.mma-site-list{
    list-style:none;
    margin:0;
    padding:0;
}

.mma-site-list li{
    display:flex;
    align-items:center;
    gap:11px;
    min-height:53px;
    padding:8px 12px;
    border-bottom:1px dotted #ccc;
}

.mma-site-list li:last-child{
    border-bottom:0;
}

.mma-site-list li:hover{
    background:#fffbea;
}

/* 順位 */
.mma-rank{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 30px;
    width:30px;
    height:30px;
    border-radius:3px;
    background:#fcf003;
    color:#111;
    font-size:13px;
    font-weight:800;
}

/* 4位以下は少し控えめ */
.mma-site-list li:nth-child(n+4) .mma-rank{
    background:#eee;
}

/* サイト情報 */
.mma-site-info{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.mma-site-info a{
    overflow:hidden;
    color:#222;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.mma-site-info a:hover{
    text-decoration:underline;
}

/* 登録サイトのカテゴリを記事一覧と同じタグ表示にする */
/* カテゴリ別の色指定が優先されるようにする */
:where(.mma-site-info) > span{
align-self:flex-start;
padding:2px 5px;
border:1px solid #277bb5;
border-radius:2px;
background:#fff;
color:#176da8;
font-size:10px;
font-weight:700;
line-height:1.2;
white-space:nowrap;
}

/* -------------------------
   空表示
   ------------------------- */

.mma-empty{
    margin:0;
    padding:25px;
    color:#777;
}

/* -------------------------
スマホ
------------------------- */

@media(max-width:900px){

/* アンテナ全体 */
.mma-wrapper{
width:calc(100vw - 20px);
}

/* ヘッダーをコンパクトにする */
.mma-header-inner{
padding:10px 12px;
align-items:flex-start;
flex-direction:column;
gap:8px;
}

.mma-logo a{
font-size:24px;
}

.mma-nav{
gap:5px 14px;
}

.mma-nav a,
.mma-nav span{
font-size:13px;
}

/* メインを1列表示 */
.mma-main{
grid-template-columns:1fr;
}

/* -------------------------
スマホの記事一覧
タイトルを最優先で全文表示
------------------------- */

.mma-news-row{
grid-template-columns:82px minmax(0,1fr) auto auto;
gap:2px 6px;
padding:9px 10px;
align-items:center;
}

/* スマホではカテゴリを非表示 */
.mma-category{
display:none;
}

/* スマホのサムネイル */
.mma-thumbnail{
grid-column:1;
grid-row:1 / 3;
width:78px;
height:58px;
align-self:center;
}

/* タイトルを1段目いっぱいに表示 */
.mma-title{
grid-column:2 / -1;
grid-row:1;
padding:0;
}

/* タイトルは全文表示 */
.mma-title a{
display:block;
overflow:visible;
font-size:15px;
line-height:1.4;
white-space:normal;
-webkit-line-clamp:unset;
-webkit-box-orient:initial;
}

/* サイト名を2段目左側に表示 */
.mma-site{
grid-column:2;
grid-row:2;
margin-top:2px;
font-size:11px;
line-height:1.3;
color:#444;
font-weight:600;
}

/* 日付を2段目右側に表示 */
.mma-time{
grid-column:4;
grid-row:2;
font-size:10px;
font-weight:500;
color:#666;
}

.mma-date{
grid-column:3;
grid-row:2;
font-size:10px;
font-weight:600;
color:#444;
}

/* 時刻を日付の右に表示 */
.mma-time{
grid-column:4;
grid-row:2;
font-size:10px;
font-weight:600;
color:#444;
}

}



/* スマホではヘッダー下の余白を少し詰める */
.mma-header{
margin-bottom:14px;
}


/* -------------------------
スマホのページ送り
------------------------- */

.mma-pagination{
gap:10px;
margin-top:12px;
padding-top:10px;
}

.mma-pagination a{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:40px;
padding:8px 12px;
border:1px solid #ccc;
background:#fff;
color:#222;
font-size:13px;
font-weight:700;
text-decoration:none;
}

.mma-pagination a:hover{
background:#f5f5f5;
text-decoration:none;
}

/* 上部の余白を詰める */
body .wp-site-blocks{
    padding-top:0 !important;
}

body main{
    margin-top:0 !important;
    padding-top:0 !important;
}

body .wp-block-post-content{
    margin-top:0 !important;
    padding-top:0 !important;
}

.mma-wrapper{
    margin-top:0 !important;
}

/* -------------------------
スマホの登録サイト欄
------------------------- */

.mma-site-list li{
padding:10px 12px;
gap:12px;
}

/* 順位 */
.mma-rank{
flex:0 0 36px;
width:36px;
height:36px;
font-size:14px;
}

/* サイト名 */
.mma-site-info a{
font-size:15px;
}

/* カテゴリ */
.mma-site-info > span{
font-size:11px;
}

/* IN / OUTを少し見やすくする */
.mma-site-stats{
gap:12px;
margin-top:3px;
font-size:11px;
color:#555;
flex-wrap:wrap;
}

/* 登録サイト欄とフッターの間を詰める */
.mma-main{
padding-bottom:10px;
}

.mma-footer{
margin-top:6px;
}

/* テーマ側の外余白を極力なくす */
body,
.wp-site-blocks,
main,
.wp-block-group,
.wp-block-post-content{
    margin:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* 上余白を詰める */
.wp-site-blocks{
    padding-top:0 !important;
}

.wp-block-post-content{
    padding-top:0 !important;
}

/* アンテナ本体を画面幅いっぱい寄りに */
.mma-wrapper{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
}

/* メイン部分だけ少し内側に */
.mma-main{
    padding:0 20px 20px;
}

/* 黄色ヘッダーは左右いっぱい */
.mma-header{
    margin-left:0 !important;
    margin-right:0 !important;
}



/* Twenty Twenty-Five の標準ブロック余白を解除 */
.wp-site-blocks > *,
.wp-site-blocks > * + *,
.wp-site-blocks main,
.wp-site-blocks .wp-block-post-content,
.wp-site-blocks .entry-content {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    padding-block-start: 0 !important;
    padding-block-end: 0 !important;
}

/* ページ本文の上余白を強制的にゼロ */
.wp-block-post-content > :first-child {
    margin-top: 0 !important;
}

/* アンテナ本体 */
.mma-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* トップページのWordPress標準タイトル分を上へ詰める */
.mma-wrapper{
    position:relative;
    top:-70px;
    margin-bottom:-70px !important;
}


/* IN / OUTは読みやすい濃さにする */
.mma-site-stats{
display:flex;
gap:10px;
margin-top:4px;
font-size:11px;
font-weight:500;
line-height:1.4;
color:#444;
}

.mma-site-stats span{
    white-space:nowrap;
}

/* 選択中のカテゴリを強調表示 */
.mma-nav a.is-active{
font-weight:700;
text-decoration:underline;
text-underline-offset:4px;
}


/* 新着記事のページ送り */
.mma-pagination{
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
margin-top:20px;
padding-top:12px;
border-top:1px solid #ddd;
}

.mma-pagination a{
font-size:14px;
font-weight:600;
text-decoration:none;
}

.mma-pagination a:hover{
text-decoration:underline;
}



/* -------------------------
フッター領域
------------------------- */

.mma-footer{
min-height:64px;
margin-top:24px;
background:#fcf003;
border-top:4px solid #111;
}



/* -------------------------
アンテナ下部に残るWordPress標準余白を削除
------------------------- */

/* アンテナを包む外側ブロックの下余白を消す */
.wp-block-group.alignfull.has-global-padding.is-layout-constrained:has(.mma-wrapper){
padding-bottom:0 !important;
margin-bottom:0 !important;
}

/* ショートコードの後ろに残る空段落を消す */
.wp-block-post-content > p.wp-block-paragraph:empty{
display:none !important;
margin:0 !important;
padding:0 !important;
}





@media(max-width:900px){


/* アンテナ上部に残るWordPress標準余白を削除 */
.wp-block-group.alignfull.has-global-padding.is-layout-constrained:has(.mma-wrapper){
padding-top:0 !important;
margin-top:0 !important;
}

/* スマホでは上方向への位置調整を解除 */
.mma-wrapper{
    top:0 !important;
    margin-bottom:0 !important;
}


/* 登録サイト欄とフッターの間を詰める */
.mma-main{
padding-bottom:10px !important;
}

/* スマホではフッター上の余白を小さくする */
.mma-footer{
margin-top:6px !important;
}

}



/* WordPressテーマ側のトップ余白を削除 */
.wp-block-group.alignfull.has-global-padding.is-layout-constrained:has(.mma-wrapper){
    padding-top:0 !important;
    margin-top:0 !important;
}


/* このサイトについてのヘッダーをトップページと同じ高さに固定 */
body.mma-about-standalone .mma-header-inner{
    min-height:64px !important;
    height:64px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}
.mma-logo a{
	display:inline-flex;
	align-items:center;
}

.mma-logo-stamp{
	display:block;
	width:60px;
	height:auto;
	margin-left:10px;
	flex:0 0 auto;
}



/* PCのみ、本文エリアの左右に余白を付ける */
@media(min-width:901px){

    /* PCではメイン本文の左右に余白を付ける */
    .mma-main{
        padding-left:80px !important;
        padding-right:80px !important;
    }

    /* PC時の記事一覧のサイト名表示位置 */
    .mma-site{
        justify-self:start;
        margin-left:18px;
        color:#333;
        font-size:12px;
        font-weight:600;
        text-align:left;
    }

}

/* ========================================
PICKUP
トップページ1ページ目だけに表示する特別枠
======================================== */

/* PICKUPカード全体のグリッド */
.mma-pickup-grid{

    /* PICKUPカードをグリッド表示 */
    display:grid;

    /* PCでは最大5列 */
    grid-template-columns:repeat(5, minmax(0, 1fr));

    /* カード同士の間隔 */
    gap:10px;

    /* PICKUP枠の内側余白 */
    padding:12px;

    /*
     * PICKUPエリア背景は
     * サイト全体と同じ白にする
     */
    background:#fff;

    /*
     * 新着エリアとの境界だけ
     * サイトカラーの黄色を残す
     */
    border-bottom:4px solid #fcf003;
}

/* 1件分のPICKUPカード */
.mma-pickup-card{

    /* 長いタイトルでも横幅を壊さない */
    min-width:0;

    /*
     * 画像 → タイトル → サイト名
     * の3段を縦方向に並べる。
     *
     * タイトルの高さは固定せず
     * 全文を表示する。
     */
    display:flex;
    flex-direction:column;

    /*
 * カードの高さは
 * 画像・タイトル・サイト名の内容に合わせる。
 *
 * 無理に高さを伸ばさないことで
 * タイトルとサイト名の間に
 * 不要な空白ができないようにする。
 */
height:auto;
align-self:start;

    /* カード外へのはみ出しを防ぐ */
    overflow:hidden;

    /* カード本体は白 */
    background:#fff;

    /* 基本文字色 */
    color:#111;

    /* カード全体がリンクなので下線を消す */
    text-decoration:none;

/*
 * カード外周の線は付けない。
 * PICKUP全体を軽く見せて
 * サイト全体の白背景になじませる。
 */
border:none;

}

/* PICKUPカードにマウスを乗せたとき */
.mma-pickup-card:hover{

    /* リンク下線は出さない */
    text-decoration:none;

    /* わずかに明るさを変える */
    background:#fffdf0;
}

/* PICKUP画像エリア */
.mma-pickup-image{

    /* カード幅いっぱい */
    width:100%;

    /* 16:9で統一 */
    aspect-ratio:16 / 9;

    /* 画像がはみ出さないようにする */
    overflow:hidden;

    /* 画像なし時の背景 */
    background:#222;
}

/* PICKUP画像 */
.mma-pickup-image img{

    /* img特有の下側余白をなくす */
    display:block;

    /* 画像エリアいっぱい */
    width:100%;
    height:100%;

    /* 比率を維持してトリミング */
    object-fit:cover;
}

/* PICKUP記事タイトル */
.mma-pickup-title{

    /*
     * サイト名と同じ白背景で統一する。
     */
    background:#fff;

    /*
     * タイトルを途中で切らず全文表示する。
     *
     * 固定height
     * max-height
     * line-clamp
     * overflow:hidden
     *
     * は使用しない。
     */
    display:block;
    height:auto;
    min-height:0;
    max-height:none;
    overflow:visible;

   /*
 * タイトルの下余白を小さくして
 * サイト名をタイトルのすぐ下へ寄せる。
 */
padding:8px 10px 2px;

    /* タイトル文字 */
    color:#111;
    font-size:13px;
    font-weight:700;
    line-height:1.45;

    /*
 * タイトルの直後にサイト名を表示する。
 * 余った高さを無理に埋めない。
 */
flex:0 0 auto;
}

/* PICKUPのサイト名 */
.mma-pickup-site{

    /*
     * タイトルと同じ白背景にする。
     */
    background:#fff;

    /*
 * タイトルとサイト名は
 * 同じ白背景でつなげる。
 * 境界線も付けない。
 */
border-top:none;

    /*
 * サイト名部分は必要な高さだけ使う。
 * 32px固定をやめて、タイトル直下へ詰める。
 */
min-height:0;

/* サイト名を通常位置に表示 */
display:block;

/*
 * タイトルとの間は4pxだけ空ける。
 * 下側にも少し余白を残す。
 */
padding:4px 10px 6px;

    /*
     * サイト名を少し濃くする。
     * タイトルよりは控えめだが
     * しっかり読める濃さにする。
     */
    color:#333;
    font-size:11px;
    font-weight:700;
    line-height:1.2;

    /* 長いサイト名は1行で省略 */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    /*
 * タイトルの直後にサイト名を置く。
 * 不自然な空白を作らない。
 */
margin-top:0;

/* サイト名部分は縮ませない */
flex:0 0 auto;
}

/* ========================================
スマホ時のPICKUP
======================================== */

@media(max-width:900px){

    /* ========================================
       スマホ時のPICKUP
       ======================================== */

    .mma-pickup-grid{

        /*
         * PCの5列指定を確実に上書きして
         * スマホでは必ず2列にする。
         */
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;

        /* カード間の余白 */
        gap:10px;

        /*
         * 左右に少し余白を残す。
         * 画面端ギリギリにはしない。
         */
        padding:10px;

        /* スマホでも背景は白 */
        background:#fff;
    }

    .mma-pickup-card{

        /*
         * PC側の幅や高さ指定を引きずらない。
         * 2列のグリッド幅いっぱいに収める。
         */
        width:100%;
        max-width:none;
        min-width:0;
        height:auto;

        /* カードの高さは内容に合わせる */
        align-self:start;
    }

    .mma-pickup-image{

        /*
         * スマホでも画像は横長16:9。
         * 幅いっぱいに表示する。
         */
        width:100%;
        aspect-ratio:16 / 9;
    }

    .mma-pickup-title{

        /*
         * スマホでは文字を少し小さくする。
         * 1文字ずつ縦に落ちる状態を防ぐ。
         */
        font-size:12px;
        line-height:1.5;

        /*
         * タイトル周囲の余白をコンパクトにする。
         */
        padding:7px 7px 2px;

        /*
         * PHP側ですでに42文字に短縮しているので
         * CSS側では無理に切らない。
         */
        display:block;
        height:auto;
        min-height:0;
        max-height:none;
        overflow:visible;

        /* 残り高さを無理に埋めない */
        flex:0 0 auto;
    }

    .mma-pickup-site{

        /*
         * タイトルのすぐ下にサイト名を置く。
         */
        min-height:0;
        margin-top:0;

        /* スマホ用の余白 */
        padding:3px 7px 6px;

        /* PCより少し小さめ */
        font-size:10px;
        line-height:1.3;

        /* サイト名は1行 */
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

}


/* オカルト：茶色 */
.mma-category-occult{
    border-color:#795548;
    color:#795548;
}