@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 3.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/
/*ロゴ画像を横いっぱいに*/
#inner-header, #drawer + #inner-header, #logo {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.header--center #logo img {
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 1000px;
}
.header--center #logo {
    padding: 0;
    background: #6bb6ff;
}


@media only screen and (min-width: 1240px) {
    .single #logo img, .page #logo img {
        max-width: 1180px;
    }
}
/*END ロゴ画像を横いっぱいに*/

#logo {
    font-size: 10px;/*スマホサイズ*/
}
@media only screen and (min-width: 481px) {
   #logo {
       font-size: 28px;/*481px以上での表示サイズ*/
   }
}
/* ==== 応急処置: WP 7.0.2 が theme.json の CSS 変数(global-styles-inline-css)を
   出力しなくなり、ワイド画面でレイアウトが崩れるため子テーマで補う。
   値は sango-theme/theme.json (v3.9.0) から機械生成。
   SANGO を 3.12.x へ更新したらこのブロックごと削除すること。2026-08-06 ==== */
:root {
  --wp--custom--wrap--width: 92%;
  --wp--custom--wrap--default-width: 800px;
  --wp--custom--wrap--content-width: 1180px;
  --wp--custom--wrap--max-width: var(--wp--custom--wrap--content-width);
  --wp--custom--wrap--side: 30%;
  --wp--custom--wrap--gap: 2em;
  --wp--custom--wrap--mobile--padding: 15px;
  --wp--custom--shadow--large: 0 15px 30px -7px rgba(0, 12, 66, 0.15 );
  --wp--custom--shadow--large-hover: 0 40px 50px -15px rgba(0, 12, 66, 0.2 );
  --wp--custom--shadow--medium: 0 6px 13px -3px rgba(0, 12, 66, 0.1), 0 0px 1px rgba(0,30,100, 0.1 );
  --wp--custom--shadow--medium-hover: 0 12px 45px -9px rgb(0 0 0 / 23%);
  --wp--custom--shadow--solid: 0 1px 2px 0 rgba(24, 44, 84, 0.1), 0 1px 3px 1px rgba(24, 44, 84, 0.1);
  --wp--custom--shadow--solid-hover: 0 2px 4px 0 rgba(24, 44, 84, 0.1), 0 2px 8px 0 rgba(24, 44, 84, 0.1);
  --wp--custom--shadow--small: 0 2px 4px #4385bb12;
  --wp--custom--rounded--medium: 12px;
  --wp--custom--rounded--small: 6px;
  --wp--custom--widget--padding-horizontal: 18px;
  --wp--custom--widget--padding-vertical: 6px;
  --wp--custom--widget--icon-margin: 6px;
  --wp--custom--widget--gap: 2.5em;
  --wp--custom--entry--gap: 1.5rem;
  --wp--custom--entry--gap-mobile: 1rem;
  --wp--custom--entry--border-color: #eaedf2;
  --wp--custom--animation--fade-in: fadeIn 0.7s ease 0s 1 normal;
  --wp--custom--animation--header: fadeHeader 1s ease 0s 1 normal;
  --wp--custom--transition--default: 0.3s ease-in-out;
  --wp--custom--totop--opacity: 0.6;
  --wp--custom--totop--right: 18px;
  --wp--custom--totop--bottom: 20px;
  --wp--custom--totop--mobile--right: 15px;
  --wp--custom--totop--mobile--bottom: 10px;
  --wp--custom--toc--button--opacity: 0.6;
  --wp--custom--footer--column-gap: 40px;
  --wp--preset--font-family--default: "Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
  --wp--preset--font-family--notosans: "Noto Sans JP", var(--wp--preset--font-family--default);
  --wp--preset--font-family--mplusrounded: "M PLUS Rounded 1c", var(--wp--preset--font-family--default);
  --wp--preset--font-family--dfont: "Quicksand", var(--wp--preset--font-family--default);
}
/* ==== END 応急処置 ==== */

/* ==== トップページのヒーローの字の大きさ。2026-08-15 に固定ページ 1941 から移した ====
   もとは sgb/hero ブロックの css 属性に書かれていた。中身は同じで、置き場所だけを変えた。

   🔴 なぜ移したか。本番の SiteGuard Lite が、and のあとに括弧の式が来て
   さらに # が続く並びを SQL 注入と見なして POST を 403 で弾く。
   @media only screen and (min-width: 769px) と #id- や #333 の組が偶然その形になり、
   1941 の本文が publish_post.py で本番へ出せなくなっていた。
   実測で、弾かれるのは公開 25 本のうち 1941 だけだった。

   ブロックの css 属性はもともとスコープされておらず全体に効いていたので、
   ここへ移しても効き方は変わらない。scopedCSS のほうは描画に出ていないことを
   実測したうえで一緒に落とした。

   🔴 sgb/hero を使っているのは 1941 だけ。ほかのページには影響しない。
   🔴 SANGO の画面でヒーローブロックを触ると css 属性が書き戻される恐れがある。
      そのときは本文ではなくここを直すこと。 ==== */
@media only screen and (min-width: 769px) {
    .header-image__headline {
        font-size: 2em;
    }
    .header-image__descr {
        font-size: .8em;
    }
}
/* ==== END トップページのヒーロー ==== */

/* ==== カードの説明文。2026-09-01 のユーザー判断 ==== */
/* 親テーマの sng_longcard_link_after_title フックで excerpt を差し込んでいる。
   実装は functions.php。**親テーマは触っていない**。
   🔴 素のままだと題名と同じ大きさで地続きになり、どこまでが題名か分からない。
   実測 2026-09-01 にスクリーンショットで確認して、この節を足した。 */
.longc_excerpt {
    display: block;
    margin-top: .5em;
    font-size: .82em;
    line-height: 1.6;
    color: #6b7280;
    font-weight: normal;
    /* 🔴 2 行で打ち切る。1 文でも幅によっては 2 行になるため。
       3 行にしていたら長すぎるとユーザーから差し戻された。2026-09-01 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* 題名は太字のまま残して、説明文と見分けがつくようにする */
.longc_title {
    font-weight: 700;
}
/* ==== END カードの説明文 ==== */

/* ==== BEGIN スマホの字を詰める。2026-09-28 のユーザー指示 ====
   手本は 10gba の本番記事。480px 以下だけに効かせる。481px から上は SANGO の段が
   切り替わるので、タブレットと PC の見た目は変わらない。
   🔴 本番の WAF がメディアクエリと # の並びを弾くので、記事の本文ではなくここに置く。
   🔴 --cl-mobile-compact は印。出し直したあと getComputedStyle で読めることを見る。 */
@media only screen and (max-width: 480px) {
    :root {
        --cl-mobile-compact: "20260928-B";
    }
    .entry-content {
        font-size: 14px;
    }
    .entry-content > p {
        line-height: 1.65;
    }
    .entry-content p {
        margin-bottom: 12px;
    }
    .entry-content h2 {
        font-size: 1.3em;
        margin-top: 32px;
    }
    .single-title {
        font-size: 18px;
    }
    /* カードを横組みにする。左にサムネ、右に題名。説明文は隠す。
       サムネはアイキャッチと同じ縦横比 0.576 にする。正方形にすると日付の字が左右で欠ける */
    .entry-content .c_linkto.longc_linkto {
        display: flex;
        align-items: center;
    }
    .entry-content .longc_img {
        flex: 0 0 130px;
        width: 130px;
        height: 75px;
        padding-bottom: 0;
    }
    .entry-content .longc_img img {
        padding: 6px;
    }
    .entry-content .longc_content {
        flex: 1;
        padding: 8px 12px 8px 4px;
    }
    .entry-content .longc_excerpt {
        display: none;
    }
}
/* ==== END スマホの字を詰める ==== */