@charset "utf-8";
/* =========================================================================
   パンガル 専用スタイル（子テーマ）

   ■ 読み込み方法
   functions.php から wp_head の priority 20 で <link> を書き出している。
   親テーマの tcd_head()（priority 10）が出力するインラインCSSより
   後ろに置くためで、こうしないと
     .post_list .title { font-size:21px; }
     .rich_font_logo { font-weight:bold !important; }
   といったインライン指定に負ける。

   ■ 適用範囲
   ・ロゴ（#logo_text）だけは全ページ共通。サイトの顔なので
     トップページと下層でロゴが変わらないようにしている。
   ・記事一覧の2カラム化・サイドバーは body.home（トップページ）限定。
     投稿ページ・アーカイブ・固定ページのデザインは一切変更しない。
   ========================================================================= */


/* =========================================================================
   1. ロゴ「パンガル。」（画像ロゴ）
   ========================================================================= */

/* 以前はCSSテキスト（Noto Sans JP 900 ＋ background-clip:text のかすれ）で
   作っていたが、MAGのロゴのような強い擦れはCSSでは不自然になるため、
   画像ロゴ（img/logo.png）へ変更した。

   ・ベースフォント … アンニャントロマン（稲塚春／商用可・表記不要）
   ・擦れ … Canvasで手続き的に生成（粒状の抜け・横方向のかすれ筋・細い傷・
            大きめの剥がれ・インクのムラ）。黒文字部分のみに掛けている。
   ・末尾の「。」… 赤の正円。擦れ加工は掛けていない。
   ・原寸 774×231px（表示330px時で約2.3倍＝高解像度ディスプレイでも粗くならない）

   親テーマの構造は3パターンあり、モバイルUAでは h1#logo が出力されないため、
   セレクタは #logo に依存させず a.rich_font_logo で書く。
   サイト名のテキストはSEO・読み上げのためDOMに残し、視覚的にだけ隠している。 */

#logo_text #logo {
  font-weight: normal;
  margin: 0;
  line-height: 1;
  max-width: 100%;
}

#header #logo_text a.rich_font_logo {
  display: block;
  /* トップページも下層ページも同じサイズにする。
     基準は投稿ページの見え方（170×51）。ロゴは主張させない方針。 */
  width: 170px;
  height: 51px;
  /* ここで calc(100% - 30px) のような指定をしないこと。
     モバイルUAでは #logo_text > a、PCでは #logo_text > h1#logo > a となり、
     親が幅に合わせて縮む（shrink-to-fit）場合に、100% の基準が
     ロゴ自身の幅になってしまい、ロゴが小さく描画される。 */
  max-width: 100%;
  margin: 0 auto;
  background-image: url(img/logo.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  text-decoration: none !important;
  /* サイト名テキストを視覚的に隠す（display:none にはしない） */
  text-indent: 110%;
  white-space: nowrap;
  overflow: hidden;
}

/* サブコピー（親テーマの #site_description をそのまま使う）
   文字列は functions.php の bloginfo フィルターで
   「HONEYsPOT作品のレビューサイトpanchiragirl.com」に差し替えている。
   主役のロゴを邪魔しないよう、小さめ・細め・字間広めにしている。 */
.pc #site_description {
  font-size: 12px;
  font-weight: 600;
  color: #111;
  letter-spacing: 0.14em;
  /* letter-spacing で右に余白ができるぶんを打ち消して中央に見せる */
  text-indent: 0.14em;
  padding: 13px 0 0;
  line-height: 1.6;
}

/* ロゴ上下の余白。画像側に透明マージンをほとんど持たせていないので、
   ここで詰める。巨大な空白を作らないこと。 */
body.home #header {
  padding: 30px 0 26px;
}



/* =========================================================================
   2. トップページ：記事一覧を2カラムに
   ========================================================================= */

/* #main_col（790px・白背景）の中で、記事カードを2列に並べる。
   左右のpaddingは持たせず、カードのアイキャッチが白箱の端まで
   届くようにしている（MAGのトップ大型記事と同じ見え方）。
   これで #main_col の上端＝1枚目のアイキャッチ上端になり、
   右サイドバー1つ目のボックス上端とぴったり揃う。 */
body.home #main_col {
  background: #fff;
}

body.home #index_post_list.pangal_post_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
  /* カード同士の縦の間隔。MAGらしい余白は残しつつ、
     前の記事の抜粋と次の記事の画像が離れすぎないところまで詰めている。 */
  row-gap: 28px;
  margin: 0;
  padding: 0 0 30px;
  list-style: none;
}

/* カード本体。親テーマの .post_list li（padding 45px / margin 50px）を打ち消す。
   position:relative は親テーマ側で付いているが、
   カテゴリーラベルの基準になるので明示しておく。 */
body.home .pangal_post_list li.pangal_card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0 0 16px;
  border-bottom: 1px solid #eee;
  overflow: hidden;
}

/* 親テーマは最後の1件だけ枠線を消すが、
   グリッドだと最終行の左右で見た目が揃わなくなるので全カードに残す。 */
body.home .pangal_post_list li.pangal_card:last-child {
  margin: 0;
  border-bottom: 1px solid #eee;
}

/* アイキャッチ（カード上部・幅いっぱい）
   size2（500×300 切り抜き）＝5:3。aspect-ratio を明示しているので、
   万一比率の違う画像が入ってもカードの高さは崩れない。 */
body.home .pangal_post_list .image {
  display: block;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: #f2f2f2;
}
body.home .pangal_post_list .image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}

/* アイキャッチ未設定の投稿はテーマ標準の no_image を敷く（レイアウトを崩さないため） */
body.home .pangal_post_list .image.pangal_no_image img {
  object-fit: cover;
  opacity: 0.5;
}

/* テキスト側 */
body.home .pangal_post_list .desc {
  padding: 22px 20px 0;
  flex: 1 1 auto;
}

/* カテゴリーラベル
   位置（画像の左上に重ねる）は親テーマの
     .post_list .category a { position:absolute; top:0; left:0; z-index:2; }
   がそのまま効く。li 側が position:relative なので、カードの左上＝画像の左上。

   背景色はカテゴリーごとの色を rgba(…,0.85) で front-page.php 側から
   インラインで書き出している（子テーマの pangal_category_label()）。
   ラベル全体に opacity を掛けると文字まで薄くなるので使わない。
   背景だけ半透明にして、画像がラベル越しにうっすら見える状態にしている。 */
body.home .pangal_post_list .category a {
  color: #fff;
  font-size: 12px;
  padding: 10px 16px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  -webkit-transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* ホバーで白抜きに反転する。文字と枠線はカテゴリー固有色。
   背景色はPHP側がインラインで書いているので !important で上書きする。 */
body.home .pangal_post_list .category a:hover {
  background-color: #fff !important;
  color: var(--pangal-cat-color, #222);
  box-shadow: inset 0 0 0 1px var(--pangal-cat-color, #222);
  -webkit-filter: none;
  filter: none;
  text-decoration: none;
}

/* 日付・タイトル・抜粋のタイポグラフィはMAGの値をそのまま使う。
   font-size は親テーマがインラインで
     .post_list .title { font-size:21px; }
     .post_list .excerpt { font-size:14px; }
   と書き出しているので、こちらでは指定しない（テーマオプション連動を殺さない）。 */
body.home .pangal_post_list .date {
  margin: 0 0 12px;
  color: #888;
}
/* タイトルは1行、抜粋は2行で打ち切る（PC・iPad・スマホ共通）。
   文字数でカードの高さが変わらないので、一覧のラインが揃う。
   line-clamp は -webkit- 付きが実質の標準で、対応していない環境でも
   max-height と overflow:hidden で同じ高さに収まる。 */
body.home .pangal_post_list .title {
  margin: 0 0 10px;
  font-weight: bold;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  max-height: 1.65em;
}
body.home .pangal_post_list .title a {
  display: inline;
}
body.home .pangal_post_list .excerpt {
  color: #888;
  line-height: 1.8;
  overflow-wrap: break-word;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /* 抜粋が1行しかない記事でも2行ぶんの高さを確保して、
     カードの高さ（＝一覧のライン）を揃える。 */
  height: 3.6em;
}

/* ページャーは白箱の中で左右に余白を持たせる */
body.home #main_col .page_navi {
  padding: 0 20px 40px;
}


/* =========================================================================
   3. トップページ：サイドバー
   ========================================================================= */

/* 白箱＋白い見出し。見出しのマークアップは親テーマの .side_headline のまま、
   黒ベタ（テーマオプションが .side_headline に background-color:#222 を書き出す）を
   打ち消して、細い罫線＋短いアクセントバーのデザインに統一している。
   アクセント色は --pangal-side-accent で切り替える（既定は黒、新着ニュースだけ水色）。 */
body.home #side_col .side_widget {
  background: #fff;
  padding: 0 0 18px;
  margin: 0 0 20px;
  overflow: hidden;
}
body.home #side_col .side_widget:last-child {
  margin: 0;
}
body.home #side_col .side_widget .side_headline {
  position: relative;
  margin: 0 18px 16px;
  padding: 0 0 10px;
  background: #fff;
  color: #111;
  font-family: "Noto Sans JP", "Hiragino Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-indent: 0;
  border-bottom: 1px solid #e5e5e5;
}
/* 罫線の左端に重ねる短いアクセントバー */
body.home #side_col .side_widget .side_headline:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 28px;
  height: 2px;
  background: #222;
  background: var(--pangal-side-accent, #222);
}
/* 新着ニュースだけ、ニュース用の水色をアクセントに使う */
body.home #side_col .pangal_news_widget {
  --pangal-side-accent: #00BFFF;
}
/* 見出し以外の直下要素に左右余白（白箱の内側パディング） */
body.home #side_col .side_widget > ol,
body.home #side_col .side_widget > ul:not(.user_sns),
body.home #side_col .side_widget > p,
body.home #side_col .side_widget > form,
body.home #side_col .side_widget > div:not(.side_headline):not(.user_name) {
  margin-left: 18px;
  margin-right: 18px;
}

/* PROFILE ウィジェット
   マークアップは親テーマの user_profile ウィジェットと同じなので、
   円形トリミング（border-radius:100%）やホバーの薄まり、SNSアイコンの
   丸ボタンは親テーマのCSSがそのまま効く。ここではサイズと余白だけ整える。 */
body.home #side_col .tcdw_user_profile_widget {
  text-align: center;
  padding: 0 0 6px;
}
body.home #side_col .tcdw_user_profile_widget .side_headline {
  margin: 0 18px 22px;
  text-align: left;
}
body.home #side_col .pangal_avatar {
  display: block;
  width: 170px;
  height: 170px;
  margin: 0 auto 18px;
  border-radius: 50%;
  overflow: hidden;
}
body.home #side_col .pangal_avatar img {
  display: block;
  width: 170px;
  height: 170px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0;
}
body.home #side_col .tcdw_user_profile_widget .user_name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0 0 14px;
  line-height: 1.4;
}
body.home #side_col .tcdw_user_profile_widget .user_desc {
  font-size: 12px;
  line-height: 1.9;
  color: #666;
  margin: 0 18px 18px;
  text-align: left;
}
body.home #side_col .tcdw_user_profile_widget .user_sns {
  margin: 0;
  padding: 0 12px 12px;
}

/* 記事リスト（小さいアイキャッチ＋日付＋タイトル） */
body.home #side_col .styled_post_list1 li {
  margin: 0 0 16px;
  padding: 0;
}
body.home #side_col .styled_post_list1 li:last-child {
  margin: 0;
}
body.home #side_col .styled_post_list1 .image {
  float: left;
  width: 72px;
  height: 72px;
  margin: 0 12px 0 0;
  overflow: hidden;
  background: #f2f2f2;
}
body.home #side_col .styled_post_list1 .image img {
  width: 72px;
  height: 72px;
  object-fit: cover;
}
body.home #side_col .styled_post_list1 .info {
  overflow: hidden;
}
body.home #side_col .styled_post_list1 .date {
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  margin: 0 0 5px;
}
body.home #side_col .styled_post_list1 .title {
  font-size: 13px;
  font-weight: bold;
  line-height: 1.7;
  margin: 0;
  max-height: none;
  overflow: visible;
}

/* カテゴリー一覧 */
body.home #side_col .pangal_category_list li {
  line-height: 1.8;
  padding: 0;
  margin: 0 0 10px;
  font-size: 13px;
}
body.home #side_col .pangal_category_list li:last-child {
  margin: 0;
}

/* 検索フォーム。親テーマの .widget_search の指定を活かしつつ、
   白箱にしたぶんの上下パディングだけ打ち消す。 */
body.home #side_col .widget_search {
  padding: 0 0 18px;
}
body.home #side_col .widget_search .side_headline {
  margin: 0 18px 16px;
}
body.home #side_col .widget_search form {
  margin-left: 18px;
  margin-right: 18px;
}


/* -------- サイト内検索（PCサイドバー／スマホ専用セクション共通） -------- */

/* 入力欄と虫めがねボタンの見た目は親テーマ（.widget_search）のまま。
   ここでは placeholder の色と AND / OR 切り替えだけを足している。 */

.pangal_search_form {
  position: relative;
}

/* 入力欄と虫めがねボタン。PC・スマホで同じ見た目になるよう、
   親テーマの .widget_search 依存をやめて自前で指定している
   （スマホ側のフォームは .widget_search の中に無いため）。 */
.pangal_search_form #s {
  width: 100%;
  height: 42px;
  margin: 0;
  border: none;
  background: #f2f2f2;
  padding: 0 54px 0 12px;
  color: #222;
  font-size: 13px;
  line-height: 42px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  border-radius: 0;
}
.pangal_search_form #searchsubmit {
  position: absolute;
  right: 0;
  top: 0;
  width: 42px;
  height: 42px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  text-indent: -300%;
  white-space: nowrap;
  -webkit-appearance: none;
  background-color: #222;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  -webkit-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.pangal_search_form #searchsubmit:hover {
  background-color: #444;
}

/* 未入力のときだけ薄いグレー。入力した文字は既定色のまま。 */
.pangal_search_form #s::-webkit-input-placeholder { color: #aaa; }
.pangal_search_form #s::-moz-placeholder { color: #aaa; opacity: 1; }
.pangal_search_form #s:-ms-input-placeholder { color: #aaa; }
.pangal_search_form #s::placeholder { color: #aaa; opacity: 1; }
.pangal_search_form #s {
  color: #222;
}

/* AND / OR の切り替え。ラジオボタン本体は隠し、ラベルをボタンに見せている。
   親テーマは .widget_search label { display:none } なので明示的に戻す。 */
.pangal_search_mode {
  clear: both;
  display: block;
  padding: 10px 0 0;
  font-size: 0; /* inline-block 同士の隙間対策 */
  line-height: 1;
}
.pangal_search_radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.pangal_search_mode label {
  display: inline-block;
  vertical-align: middle;
  min-width: 44px;
  margin: 0 6px 0 0;
  padding: 5px 0;
  border: 1px solid #ccc;
  background: #fff;
  color: #222;
  font-family: "Noto Sans JP", "Hiragino Sans", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  cursor: pointer;
  -webkit-transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.pangal_search_mode label:hover {
  border-color: #222;
}
/* 選択中だけ黒背景＋白文字 */
.pangal_search_radio:checked + label {
  background: #222;
  border-color: #222;
  color: #fff;
}
/* キーボード操作でも位置が分かるようにする */
.pangal_search_radio:focus + label {
  outline: 1px dotted #888;
  outline-offset: 2px;
}
.pangal_search_note {
  display: inline-block;
  vertical-align: middle;
  color: #999;
  font-size: 10.5px;
  letter-spacing: 0;
  line-height: 1.4;
}


/* =========================================================================
   4. タブレット（771px〜1124px）
   ========================================================================= */

/* 親テーマは body { min-width:1125px } の固定幅設計なので、
   iPad 横（1024px）などでは横スクロールが出る。
   トップページに限って可変幅にする。body.home を必ず付けているので
   他のページの表示は一切変わらない。 */
@media screen and (min-width: 771px) and (max-width: 1124px) {
  body.home {
    min-width: 0;
  }
  body.home #global_menu_wrap,
  body.home #footer,
  body.home #footer_post_list {
    min-width: 0;
  }
  body.home #global_menu {
    width: auto;
    max-width: 1125px;
  }
  body.home #header,
  body.home #main_contents,
  body.home #footer_inner {
    width: auto;
    max-width: 1125px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  body.home #main_col {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  body.home #side_col {
    width: 280px;
    flex: 0 0 280px;
  }
  body.home #index_post_list.pangal_post_list {
    column-gap: 30px;
    row-gap: 22px;
  }

}

/* 950px 未満は2カラム＋サイドバーだと記事カードが細くなりすぎるので、
   サイドバーを記事一覧の下に落とす（記事は2カラムのまま）。 */
@media screen and (min-width: 771px) and (max-width: 949px) {
  body.home .flex_layout {
    display: block;
  }
  /* flex を解いた瞬間、親テーマの #main_col { float:left } が復活して
     サイドバーが回り込んでしまうので float も解除する。 */
  body.home #main_col {
    float: none;
    width: auto;
  }
  body.home #side_col {
    width: auto;
    float: none;
    clear: both;
    margin: 30px 0 0;
  }
  body.home #side_col .side_widget {
    margin: 0 0 20px;
  }
}


/* =========================================================================
   5. スマートフォン・小型タブレット（〜770px）
   ========================================================================= */

/* この幅では親テーマの responsive.css が効く。
   responsive.css は当ファイルより前に読み込まれるので、
   打ち消したい箇所は body.home を付けて詳細度で勝たせている。 */
@media screen and (max-width: 770px) {

  /* ヘッダーを1本のバーから、ロゴ＋サブタイトルの縦積みに変える */
  body.home #header {
    display: block;
    height: auto;
    padding: 22px 0 18px;
    text-align: center;
  }
  body.home #logo_text {
    overflow: visible;
    float: none;
    display: block;
    width: auto;
    height: auto;
    text-align: center;
    padding-inline: 20px;
  }

  body.home #site_description {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    padding: 10px 0 0;
    line-height: 1.6;
  }

  /* 親テーマ responsive.css は「1件目＝大型記事」前提で、
     1枚目だけ画像を画面端まではみ出させる指定を持っている
     （li:first-child .image に margin-left:-20px、
       .category a に left:-20px）。
     大型記事を廃止したパンガルでは1枚目だけ左にズレて
     カテゴリーラベルが切れるので、ここで打ち消す。 */
  body.home #index_post_list.pangal_post_list li:first-child .image {
    overflow: hidden;
    margin-left: 0;
  }
  body.home #index_post_list.pangal_post_list li:first-child .image img {
    width: 100%;
  }
  body.home #index_post_list.pangal_post_list li:first-child .category a {
    left: 0;
  }

  /* 記事一覧：501px以上（iPad縦など）は2列を維持 */
  body.home #index_post_list.pangal_post_list {
    column-gap: 20px;
    row-gap: 20px;
    padding: 0 0 24px;
  }
  body.home .pangal_post_list li.pangal_card {
    padding: 0 0 14px;
  }
  body.home .pangal_post_list .desc {
    padding: 16px 0 0;
  }
  body.home .pangal_post_list .category a {
    font-size: 11px;
    padding: 8px 12px;
  }
  body.home #main_col .page_navi {
    padding: 0 0 30px;
  }

  /* サイドバーは記事一覧の下（親テーマの responsive.css で block 化される）。
     767〜770px の隙間では flex のままなので、ここでも明示しておく。 */
  body.home .flex_layout {
    display: block;
  }
  body.home #side_col {
    width: auto;
    float: none;
    padding: 25px 20px;
  }
}

/* スマートフォン：記事は1列 */
@media screen and (max-width: 600px) {
  body.home #index_post_list.pangal_post_list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 18px;
  }

}

/* 横スクロール防止（親テーマの min-width:1125px を確実に殺す） */
@media screen and (max-width: 770px) {
  body.home,
  body.home #footer,
  body.home #footer_post_list,
  body.home #global_menu_wrap {
    min-width: 0;
  }
  body.home img,
  body.home #main_col {
    max-width: 100%;
  }
}


/* =========================================================================
   6. 新着ニュース（カスタム投稿タイプ news）
   ========================================================================= */

/* -------- サイドバーの「新着ニュース」ブロック --------
   MAGの「デザインされた記事一覧2」に寄せた、サムネイル無し・
   日付無し・タイトルのみの縦リスト。区切りは細い点線、先頭に小さな黒い三角。 */

body.home #side_col .pangal_news_list {
  margin-top: 0;
  margin-bottom: 0;
}
body.home #side_col .pangal_news_list li {
  margin: 0;
  padding: 0;
  border-bottom: 1px dotted #bbb;
  line-height: 1.7;
}
body.home #side_col .pangal_news_list li:last-child {
  border-bottom: none;
}
body.home #side_col .pangal_news_list a {
  display: block;
  position: relative;
  padding: 14px 0 14px 17px;
  font-size: 13px;
  line-height: 1.75;
  color: #222;
  text-decoration: none;
  /* 1件あたり2行まで。それ以上は省略する。 */
  max-height: 3.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* 先頭の小さな三角（▶）。新着ニュース専用の水色 #00BFFF を使う。
   カテゴリーの4色とは分けている。 */
body.home #side_col .pangal_news_list a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #00BFFF;
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
}
body.home #side_col .pangal_news_list a:hover {
  color: #0092c4;
  text-decoration: none;
}
body.home #side_col .pangal_news_list a:hover:before {
  border-left-color: #0092c4;
}


/* -------- ニュース詳細・一覧に共通の1カラム枠 -------- */

.pangal_news_page {
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  padding: 54px 60px 60px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* パンくずもニュースの本文幅に合わせる */
body.single-news #bread_crumb,
body.post-type-archive-news #bread_crumb {
  width: auto;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 0 18px;
}

/* NEWS の英字ラベル */
.pangal_news_page .news_label {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.26em;
  color: #111;
  line-height: 1;
  margin: 0 0 20px;
}


/* -------- 詳細ページ -------- */

.pangal_news_page .news_title {
  font-size: 26px;
  font-weight: bold;
  line-height: 1.6;
  color: #111;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}
.pangal_news_page .news_date {
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #888;
  margin: 0;
}
.pangal_news_page .news_rule {
  border-top: 1px solid #e2e2e2;
  margin: 26px 0 34px;
}

/* 本文。行間を広めに取って読み物として成立させる。 */
.pangal_news_page .news_body {
  margin: 0;
  font-size: 15px;
  line-height: 2.05;
  color: #333;
}
.pangal_news_page .news_body p {
  margin: 0 0 1.9em;
}
.pangal_news_page .news_body h2 {
  font-size: 19px;
  font-weight: bold;
  line-height: 1.6;
  color: #111;
  margin: 3em 0 1.3em;
  padding: 0 0 0.7em;
  border-bottom: 1px solid #e2e2e2;
}
.pangal_news_page .news_body h3 {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.7;
  color: #111;
  margin: 2.6em 0 1.1em;
  padding: 0 0 0 12px;
  border-left: 3px solid #111;
}
/* 親テーマのリセットで list-style が消えているので戻す */
.pangal_news_page .news_body ul,
.pangal_news_page .news_body ol {
  margin: 0 0 1.9em;
  padding: 0 0 0 1.5em;
}
.pangal_news_page .news_body ul { list-style: disc; }
.pangal_news_page .news_body ol { list-style: decimal; }
.pangal_news_page .news_body li { margin: 0 0 0.6em; line-height: 1.9; }
.pangal_news_page .news_body blockquote {
  margin: 0 0 1.9em;
  padding: 0.2em 0 0.2em 20px;
  border-left: 2px solid #ddd;
  color: #555;
  font-size: 14px;
}
.pangal_news_page .news_body blockquote p:last-child { margin-bottom: 0; }
/* 親テーマ（design-plus.css）が引用に水色の飾り引用符を付けるので消す。
   パンガルのニュースは白黒基調のシャープな見た目に揃える。 */
.pangal_news_page .news_body blockquote:before,
.pangal_news_page .news_body blockquote:after,
.pangal_news_page .news_body blockquote p:before,
.pangal_news_page .news_body blockquote p:after {
  content: none;
  display: none;
}
/* リンクはパンガルのアクセント（ロゴの赤）に合わせる */
.pangal_news_page .news_body.post_content a {
  color: #c2182b;
  text-decoration: underline;
}
.pangal_news_page .news_body.post_content a:hover {
  text-decoration: none;
}

/* 本文中の画像。本文幅いっぱいまで使えるが、比率は維持。
   角丸・影・カード化はしない。 */
.pangal_news_page .news_body img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
  box-shadow: none;
}
.pangal_news_page .news_body figure,
.pangal_news_page .news_body .wp-block-image {
  margin: 2.8em 0;
}
.pangal_news_page .news_body figcaption,
.pangal_news_page .news_body .wp-element-caption {
  font-size: 12px;
  line-height: 1.8;
  color: #888;
  margin: 0.9em 0 0;
  text-align: left;
}

/* 前後ナビ */
.pangal_news_page .news_nav {
  margin: 56px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #e2e2e2;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}
.pangal_news_page .news_nav_prev,
.pangal_news_page .news_nav_next {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  line-height: 1.7;
}
.pangal_news_page .news_nav_next { text-align: right; }
.pangal_news_page .news_nav_label {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #aaa;
  margin: 0 0 6px;
}
.pangal_news_page .news_nav a {
  color: #222;
  text-decoration: none;
}
.pangal_news_page .news_nav a:hover { color: #c2182b; }

/* 一覧へ戻る（控えめに） */
.pangal_news_page .news_back {
  margin: 34px 0 0;
  font-size: 13px;
}
.pangal_news_page .news_back a {
  color: #888;
  text-decoration: none;
}
.pangal_news_page .news_back a:hover { color: #c2182b; }


/* -------- 一覧ページ（/news/） -------- */

.pangal_news_page .news_archive_head {
  margin: 0 0 10px;
}
.pangal_news_page .news_archive_title {
  font-size: 22px;
  font-weight: bold;
  color: #111;
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0;
}
.pangal_news_page .news_list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e2e2e2;
}
.pangal_news_page .news_list_item {
  margin: 0;
  padding: 26px 0;
  border-bottom: 1px solid #e2e2e2;
}
.pangal_news_page .news_list_date {
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #888;
  margin: 0 0 8px;
  line-height: 1.2;
}
.pangal_news_page .news_list_title {
  font-size: 17px;
  font-weight: bold;
  line-height: 1.7;
  margin: 0 0 10px;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}
.pangal_news_page .news_list_title a {
  color: #111;
  text-decoration: none;
}
.pangal_news_page .news_list_title a:hover { color: #c2182b; }
.pangal_news_page .news_list_excerpt {
  font-size: 13px;
  line-height: 1.9;
  color: #888;
  margin: 0;
}
.pangal_news_page .page_navi { margin-top: 40px; }


/* -------- ニュースページのレスポンシブ -------- */

@media screen and (min-width: 771px) and (max-width: 1124px) {
  body.single-news,
  body.post-type-archive-news {
    min-width: 0;
  }
  body.single-news #footer,
  body.single-news #footer_post_list,
  body.single-news #global_menu_wrap,
  body.post-type-archive-news #footer,
  body.post-type-archive-news #footer_post_list,
  body.post-type-archive-news #global_menu_wrap {
    min-width: 0;
  }
  body.single-news #header,
  body.single-news #main_contents,
  body.single-news #footer_inner,
  body.post-type-archive-news #header,
  body.post-type-archive-news #main_contents,
  body.post-type-archive-news #footer_inner {
    width: auto;
    max-width: 1125px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 770px) {
  .pangal_news_page {
    max-width: none;
    padding: 32px 20px 40px;
    margin: 0 15px;
  }
  body.single-news #bread_crumb,
  body.post-type-archive-news #bread_crumb {
    max-width: none;
  }
  .pangal_news_page .news_title { font-size: 21px; }
  .pangal_news_page .news_body { font-size: 15px; line-height: 1.95; }
  .pangal_news_page .news_body h2 { font-size: 18px; margin: 2.4em 0 1.1em; }
  .pangal_news_page .news_body h3 { font-size: 15px; }
  .pangal_news_page .news_nav { display: block; }
  .pangal_news_page .news_nav_next { text-align: left; margin-top: 18px; }
  .pangal_news_page .news_archive_title { font-size: 19px; }
  .pangal_news_page .news_list_title { font-size: 16px; }
}


/* =========================================================================
   7. レビュー記事（投稿詳細ページ）
   ========================================================================= */

/* 親テーマの single.php はそのまま使い、本文（.post_content）の中に
   レビュー入力の内容を差し込んでいる。
   .post_content は PC で margin:0 50px（＝ #main_col 790px の内側 690px）。
   写真だけは左右のマージンを打ち消して、記事幅いっぱい（790px）に広げる。 */

/* 投稿ページのコンテンツを中央に置く。

   親テーマの single.php は #main_col（790px）を float:left で置くだけなので、
   サイドバーが無い投稿ページでは記事が左に寄って見える。
   float を解除して margin:auto で中央に戻す。
   本文（.post_content）にも max-width を持たせ、
   見出し・本文・写真・キャプションがすべて同じ中央軸に載るようにしている。
   文字そのものは左揃えのまま。 */
body.single-post #main_col {
  float: none;
  width: 790px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
body.single-post .post_content {
  max-width: 690px;
  margin-left: auto;
  margin-right: auto;
}

.single .pangal_review {
  margin: 0;
}

/* 導入文。本文より少しだけ大きく、ゆったり組む。 */
.single .pangal_review_lead {
  font-size: 16px;
  line-height: 2.1;
  color: #333;
  margin: 0 0 1.2em;
}
.single .pangal_review_lead p {
  margin: 0 0 1.6em;
}
.single .pangal_review_lead p:last-child {
  margin-bottom: 0;
}

/* 見出し */
.single .post_content .pangal_review_heading {
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
  color: #111;
  letter-spacing: 0.01em;
  margin: 3.4em 0 1.3em;
  padding: 0 0 0.7em;
  border-bottom: 1px solid #e2e2e2;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}

/* 本文 */
.single .pangal_review_text {
  font-size: 15px;
  line-height: 2.05;
  color: #333;
}
.single .pangal_review_text p {
  margin: 0 0 1.9em;
}
.single .pangal_review_text p:last-child {
  margin-bottom: 0;
}

/* レビュー写真。
   記事幅いっぱいには広げず、本文の左右に余白を残して中央に置く。
   ・width は指定しない（auto）。max-width だけで上限を決める
   ・height:auto で縦横比を保持。object-fit などの切り抜きはしない
   ・元画像が max-width より小さい場合は拡大せず、実寸のまま中央に置く
   ・角丸・影・枠は付けない */
.single .pangal_review_figure {
  margin: 3.4em auto;
  max-width: 560px;
  text-align: center;
}
.single .pangal_review_figure img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
}

/* 写真の説明文。写真の直下に、本文より小さく控えめに。
   写真と同じ中央軸・同じ幅の中で左揃えにする。 */
.single .pangal_review_caption {
  font-size: 12px;
  line-height: 1.8;
  color: #888;
  margin: 0.9em 0 0;
  padding: 0;
  text-align: left;
}

/* 総評 */
.single .pangal_review_summary {
  margin-top: 0;
}

/* 本文欄（ブロックエディタ）に追記があった場合の間隔 */
.single .pangal_review + p,
.single .pangal_review + h2,
.single .pangal_review + ul {
  margin-top: 2.4em;
}


/* -------- レビュー記事のレスポンシブ -------- */

@media screen and (max-width: 770px) {
  /* この幅では親テーマが .post_content { margin:0 } にし、
     #main_col 側に padding:0 20px が入る。
     写真は画面いっぱいには広げず、560px の上限を保ったまま中央に置く。
     画面がそれより狭ければ、コンテナ幅まで自動で縮む。 */
  .single .pangal_review_figure {
    margin-left: auto;
    margin-right: auto;
  }
  .single .pangal_review_caption {
    padding: 0;
  }
  .single .pangal_review_lead {
    font-size: 15px;
    line-height: 2;
  }
  .single .post_content .pangal_review_heading {
    font-size: 18px;
    margin: 2.6em 0 1.1em;
  }
  .single .pangal_review_text {
    font-size: 15px;
    line-height: 1.95;
  }
}


/* -------- 投稿詳細ページのタブレット幅（771〜1124px） --------
   親テーマは body { min-width:1125px } の固定幅設計なので、
   このままだと iPad 横などで横スクロールが出る。
   トップページ・ニュースページと同じ考え方で、投稿詳細ページも可変幅にする。
   body.single-post を必ず付けているので、他のページには影響しない。 */

@media screen and (min-width: 771px) and (max-width: 1124px) {
  body.single-post {
    min-width: 0;
  }
  body.single-post #global_menu_wrap,
  body.single-post #footer,
  body.single-post #footer_post_list {
    min-width: 0;
  }
  body.single-post #global_menu {
    width: auto;
    max-width: 1125px;
  }
  body.single-post #header,
  body.single-post #main_contents,
  body.single-post #footer_inner {
    width: auto;
    max-width: 1125px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  body.single-post #main_col {
    width: 790px;
    max-width: 100%;
    flex: 0 1 790px;
    min-width: 0;
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  body.single-post #side_col {
    width: 280px;
    flex: 0 0 280px;
  }
}


/* -------- スマートフォン幅の本文画像 --------
   画面が狭いので上限560pxはコンテナ幅に吸収される。
   本文の左右にもわずかに余白を残して、文章と写真の境目を作る。 */

@media screen and (max-width: 600px) {
  .single .pangal_review_figure {
    max-width: 92%;
  }
}


/* =========================================================================
   8. 投稿ページ：パンくず・タイトルエリア・作品評価
   ========================================================================= */

/* -------- パンくず --------
   親テーマは #bread_crumb を 1125px 幅で置くので、790px の記事コンテナより
   左に飛び出して見える。記事コンテナと同じ幅・同じ中央軸に揃える。 */
body.single-post #bread_crumb {
  width: 790px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 0 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* -------- タイトルエリア --------
   親テーマ側のタイトルとメタ（カテゴリー＋日付）は隠し、
   子テーマが差し込む .pangal_post_head をアイキャッチの上に置く。 */
body.single-post #post_title,
body.single-post #post_meta_top {
  display: none;
}

/* タイトルエリア
   カテゴリー色のアクセントバー → カテゴリー名 → タイトル → 日付 の順で、
   情報の階層が一目で分かるようにしている。
   色はカテゴリーごとに変わる（トップページのカードラベルと同じ色）。 */
.single .pangal_post_head {
  max-width: 690px;
  margin: 0 auto;
  padding: 6px 0 30px;
  text-align: left;
}
.single .pangal_post_head_bar {
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 0 16px;
}
.single .pangal_post_head_cat {
  margin: 0 0 10px;
  line-height: 1;
}
/* タイトル上のカテゴリーもチップにする。
   通常＝カテゴリー色のベタ塗り＋白文字、ホバー＝白背景＋カテゴリー色。
   色は PHP 側がインラインで --pangal-cat-color として渡している。 */
.single .pangal_post_head_cat a {
  display: inline-block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.16em;
  line-height: 1;
  padding: 7px 12px 6px;
  color: #fff;
  text-decoration: none;
  -webkit-transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.single .pangal_post_head_cat a:hover {
  background-color: #fff !important;
  color: var(--pangal-cat-color, #222);
  box-shadow: inset 0 0 0 1px var(--pangal-cat-color, #222);
}
.single .pangal_post_head_title {
  font-size: 25px;
  font-weight: bold;
  line-height: 1.6;
  color: #111;
  letter-spacing: 0.01em;
  margin: 0 0 16px;
  padding: 0;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}
.single .pangal_post_head_date {
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: #999;
  margin: 0;
  padding: 14px 0 0;
  border-top: 1px solid #ececec;
  line-height: 1.4;
}

/* アイキャッチ。左上のカテゴリーラベルはこの中で重ねる。 */
.single .pangal_post_photo {
  position: relative;
  display: block;
  line-height: 0;
}
.single .pangal_post_photo img {
  display: block;
  width: 100%;
  height: auto;
}
.single .pangal_post_photo .category {
  margin: 0;
}
.single .pangal_post_photo .category a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: block;
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 0;
  box-shadow: none;
  opacity: 1;
  -webkit-transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.single .pangal_post_photo .category a:hover {
  background-color: #fff !important;
  color: var(--pangal-cat-color, #222);
  box-shadow: inset 0 0 0 1px var(--pangal-cat-color, #222);
  -webkit-filter: none;
  filter: none;
}


/* -------- 作品評価 --------
   👍は絵文字ではなくSVG。獲得分は濃い黒、未獲得分は薄いグレーで、
   常に5個並ぶので何段階中いくつかが一目で分かる。 */

/* 4項目は「項目名 → ゲージ → 👍 → 数値」の小さなパネル。
   ゲージの色はその記事のカテゴリー色（--pangal-accent）。
   白背景＋黒文字が基本で、色は細いゲージとバッジにだけ使う。 */
.single .pangal_rating {
  --pangal-accent: #222222;
  --pangal-gold: #b8912f;
  max-width: 690px;
  margin: 4.4em auto 0;
  padding: 26px 30px 28px;
  border: 1px solid #e2e2e2;
  background: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.single .pangal_rating_headline {
  font-size: 14px;
  font-weight: bold;
  color: #111;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin: 0 0 18px;
  padding: 0 0 12px;
  border-bottom: 1px solid #e2e2e2;
}

/* PCは4項目を横並び */
.single .pangal_rating_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.single .pangal_rating_item {
  border: 1px solid #ececec;
  background: #fff;
  padding: 14px 14px 13px;
  min-width: 0;
}

.single .pangal_rating_name {
  display: block;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.12em;
  color: #666;
  line-height: 1.4;
  margin: 0 0 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 評価を視覚化する細いゲージ */
.single .pangal_rating_gauge {
  display: block;
  height: 4px;
  background: #eee;
  margin: 0 0 11px;
  overflow: hidden;
}
.single .pangal_rating_gauge i {
  display: block;
  height: 100%;
  background: var(--pangal-accent);
}

.single .pangal_rating_score {
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.single .pangal_rating_num {
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: bold;
  color: #111;
  line-height: 1;
}
.single .pangal_rating_max {
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #aaa;
  line-height: 1;
}

/* -------- 総合GOOD（4項目より一段上の存在感） -------- */
.single .pangal_rating_total {
  margin: 18px 0 0;
  padding: 22px 20px 20px;
  border: 1px solid #e2e2e2;
  background: #fff;
  text-align: center;
}
.single .pangal_rating_total_icon {
  display: block;
  line-height: 0;
}
.single .pangal_rating_total_icon .pangal_thumb {
  top: 0;
}
.single .pangal_rating_total_icon .pangal_thumb svg {
  width: 26px;
  height: 26px;
  margin: 0 auto;
}
.single .pangal_rating_total_num {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 40px;
  font-weight: bold;
  color: #111;
  line-height: 1.1;
  letter-spacing: 0.01em;
  margin: 6px 0 6px;
}
.single .pangal_rating_total_label {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.24em;
  color: #888;
  line-height: 1.4;
}
.single .pangal_rating_total_sub {
  display: block;
  font-size: 11px;
  color: #aaa;
  letter-spacing: 0.04em;
  margin: 6px 0 0;
}

/* ランクのバッジ */
.single .pangal_rating_badge {
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.18em;
  line-height: 1;
  padding: 6px 12px 5px;
  margin: 0 0 14px;
  border: 1px solid #333;
  color: #333;
  background: #fff;
}

/* 3.0〜3.9 … GOOD。少しだけ華やかに。 */
.single .pangal-good--good .pangal_rating_total {
  border-color: #cfcfcf;
}
.single .pangal-good--good .pangal_rating_badge {
  border-color: #333;
  color: #333;
}

/* 4.0〜4.9 … EXCELLENT ＝ シルバー。
   GOOD（通常）→ EXCELLENT（シルバー）→ PERFECT（ゴールド）と
   ランクが上がるのが一目で分かるようにしている。
   ごく薄いグラデーションと内側の白いハイライトで金属感を出し、
   文字は黒のままにしてモノトーン基調に馴染ませる。 */
.single .pangal-good--excellent .pangal_rating_total {
  border: 1px solid #c2c7ce;
  box-shadow: inset 0 0 0 1px #ffffff;
  background: -webkit-linear-gradient(top, #ffffff 0%, #f4f6f8 100%);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
  padding: 24px 20px 22px;
}
.single .pangal-good--excellent .pangal_rating_badge {
  background: -webkit-linear-gradient(top, #fcfcfd 0%, #e6e9ed 100%);
  background: linear-gradient(180deg, #fcfcfd 0%, #e6e9ed 100%);
  border-color: #b4bac2;
  color: #2b2f35;
}
.single .pangal-good--excellent .pangal_rating_total_num {
  color: #222;
}
.single .pangal-good--excellent .pangal_rating_total_icon .pangal_thumb svg {
  fill: #6f7681;
}
.single .pangal-good--excellent .pangal_rating_total_label {
  color: #7b828c;
}

/* 5.0 … PERFECT。ここだけゴールド。細い二重枠と少し大きな数字で格上に見せる。
   グラデーション・発光・点滅は使わない。 */
.single .pangal-good--perfect .pangal_rating_total {
  border: 1px solid var(--pangal-gold);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--pangal-gold);
  margin: 22px 4px 4px;
  padding: 26px 20px 22px;
}
.single .pangal-good--perfect .pangal_rating_badge {
  background: var(--pangal-gold);
  color: #fff;
  border-color: var(--pangal-gold);
}
.single .pangal-good--perfect .pangal_rating_total_num {
  font-size: 52px;
  color: #8f6f17;
}
.single .pangal-good--perfect .pangal_rating_total_icon .pangal_thumb svg {
  width: 30px;
  height: 30px;
  fill: #8f6f17;
}
.single .pangal-good--perfect .pangal_rating_total_label {
  color: #8f6f17;
}

/* 👍アイコン */
.pangal_thumb {
  display: inline-block;
  line-height: 0;
  position: relative;
  top: 2px;
}
.pangal_thumb svg {
  width: 18px;
  height: 18px;
  display: block;
}
.pangal_thumb.is_on svg {
  fill: #1f1f1f;
}
.pangal_thumb.is_off svg {
  fill: #dcdcdc;
}


/* -------- 投稿ページで使わないブロックを消す --------
   SNS共有ボタンは子テーマの空の sns_btn_btm.php で出力自体を止めているが、
   囲みのdivは親テーマ側に残るのでここで隠す。
   投稿者・カテゴリー・コメント情報、親テーマの前後記事ナビも非表示にする。
   （関連記事は残す） */
body.single-post #single_share,
body.single-post #post_meta_bottom,
body.single-post #previous_next_post {
  display: none;
}


/* -------- 投稿ページのレスポンシブ（追加分） -------- */

@media screen and (max-width: 770px) {
  /* パンくずは本文の左右余白（20px）に揃える */
  body.single-post #main_contents #bread_crumb {
    width: auto;
    max-width: none;
    margin: 15px 20px;
    padding: 0;
  }

  /* この幅では本文の上限（690px）を外し、記事コンテナの内側いっぱいに使う。
     こうするとパンくず・タイトル・本文の左端がすべて 20px で揃う。 */
  body.single-post .post_content {
    max-width: none;
  }

  /* 親テーマは #post_image を 20px 左へはみ出させる（大型アイキャッチ前提の指定）。
     その中にタイトルエリアを入れているとタイトルだけ左にずれるので、
     はみ出しは #post_image ではなく写真そのものに持たせ直す。 */
  body.single-post #post_image {
    margin-left: 0;
    margin-right: 0;
  }
  .single .pangal_post_photo {
    margin-left: -20px;
    margin-right: -20px;
  }
  /* 親テーマの #post_image img { width:calc(100% + 20px) } はID指定なので、
     打ち消すにはこちらもID込みで書く必要がある。 */
  body.single-post #post_image .pangal_post_photo img {
    width: 100%;
  }

  .single .pangal_post_head {
    max-width: none;
    padding: 4px 0 24px;
  }
  .single .pangal_post_head_title {
    font-size: 20px;
  }
  .single .pangal_rating {
    max-width: none;
    padding: 22px 20px 20px;
  }
}

/* タブレット・スマホは2×2 */
@media screen and (max-width: 900px) {
  .single .pangal_rating_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media screen and (max-width: 600px) {
  .single .pangal_rating_total_num {
    font-size: 36px;
  }
  .single .pangal-good--perfect .pangal_rating_total_num {
    font-size: 44px;
  }
}


/* =========================================================================
   9. グローバルメニューとドロップダウン
   ========================================================================= */

/* 土台（高さ・罫線・セル幅・HOMEアイコン）はMAGのまま。
   ここでは配色とドロップダウンの見た目だけをパンガル用に作り替えている。 */


/* -------- 親メニュー --------
   通常も hover も 白背景＋黒文字。塗りつぶさず、下端の細いラインで示す。 */

.pc #global_menu > ul > li > a {
  position: relative;
  color: #333;
  font-weight: bold;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}
.pc #global_menu > ul > li > a:hover,
.pc #global_menu > ul > li.active > a,
.pc #global_menu > ul > li.current-menu-item > a,
.pc #global_menu > ul > li.current-menu-parent > a {
  background-color: #fff !important;
  color: #111 !important;
  border-color: #eee;
}

/* 下端のアクセントライン */
.pc #global_menu > ul > li > a:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: transparent;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.pc #global_menu > ul > li:hover > a:after,
.pc #global_menu > ul > li.active > a:after,
.pc #global_menu > ul > li.current-menu-item > a:after,
.pc #global_menu > ul > li.current-menu-parent > a:after {
  background-color: #111;
}

/* HOMEアイコンのセルも同じ考え方 */
.pc #global_menu_wrap .home_menu {
  position: relative;
}
.pc #global_menu_wrap .home_menu:hover {
  background-color: #fff !important;
  background-image: none !important;
}
.pc #global_menu_wrap .home_menu:hover:before {
  color: #111;
}
.pc #global_menu_wrap .home_menu:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background-color: transparent;
  -webkit-transition: background-color 0.2s ease;
  transition: background-color 0.2s ease;
}
.pc #global_menu_wrap .home_menu:hover:after {
  background-color: #111;
}


/* -------- ドロップダウン（共通コンポーネント） --------
   カテゴリー専用ではなく、どのメニューにぶら下げても同じ見た目になる。
   将来「評価別」に PERFECT / EXCELLENT / … を足しても、そのまま使える。

   表示のアニメーションは opacity と translateY だけ。
   親テーマの jscript.js は slideDown/slideUp で高さを動かすが、
   display と height を !important で固定して、その動きは殺している。 */

.pc #global_menu ul ul {
  display: block !important;
  width: 240px;
  height: auto !important;
  overflow: visible !important;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 1px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  -webkit-transition: opacity 0.22s ease, -webkit-transform 0.22s ease;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 10;
}
.pc #global_menu > ul > li:hover > ul,
.pc #global_menu ul ul li:hover > ul {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: opacity 0.22s ease, -webkit-transform 0.22s ease;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}

.pc #global_menu ul ul li {
  margin: 0;
  padding: 0;
  border: none;
  text-align: left;
}
.pc #global_menu ul ul li + li {
  border-top: 1px solid #f2f2f2;
}

.pc #global_menu ul ul a {
  position: relative;
  display: block;
  height: auto;
  line-height: 1.55;
  margin: 0;
  padding: 11px 14px 11px 18px;
  background: #fff !important;
  color: #333 !important;
  border: none;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: 0.02em;
  text-align: left;
  text-decoration: none;
  -webkit-transition: background-color 0.22s ease, padding-left 0.22s ease, color 0.22s ease;
  transition: background-color 0.22s ease, padding-left 0.22s ease, color 0.22s ease;
}

/* 左端の縦アクセントライン。
   カテゴリー項目には PHP 側が --pangal-cat-color を渡している。
   それ以外の項目は既定のグレー。 */
.pc #global_menu ul ul a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--pangal-cat-color, #d8d8d8);
  -webkit-transition: width 0.22s ease;
  transition: width 0.22s ease;
}

.pc #global_menu ul ul a:hover {
  background-color: #fafafa !important;
  color: #111 !important;
  padding-left: 22px;
}
.pc #global_menu ul ul a:hover:before {
  width: 5px;
}

/* 3階層目も同じ見た目で、親の右隣に出す */
.pc #global_menu ul ul ul {
  top: -1px;
  left: 100%;
}

/* 親テーマが付けている子メニュー有りの三角マークの色を合わせる */
.pc #global_menu ul ul li.menu-item-has-children > a:before {
  content: "";
}


/* -------- タブレット幅（771〜1124px） --------
   デザインはそのまま。固定1125pxのままだと横スクロールが出るので可変にする。 */
@media screen and (min-width: 771px) and (max-width: 1124px) {
  #global_menu_wrap {
    min-width: 0;
  }
  .pc #global_menu {
    width: auto;
    max-width: 1125px;
    margin: 0 auto;
  }
  .pc #global_menu > ul {
    width: auto;
    float: none;
    margin-left: 50px;
  }
}


/* =========================================================================
   10. 評価別（総合GOOD得点別）の一覧ページ
   ========================================================================= */

/* 記事カードそのものはトップページと同じCSSを使う。
   ここではページ全体の枠と見出しだけを定義している。 */

.pangal-rank-page #main_col {
  float: none;
  width: 790px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
}

.pangal-rank-page .pangal_rank_page {
  width: 790px;
  max-width: 100%;
  margin: 0 auto;
}

.pangal-rank-page .pangal_rank_head {
  background: #fff;
  padding: 30px 30px 26px;
  margin: 0 0 20px;
  border: 1px solid #e2e2e2;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pangal-rank-page .pangal_rank_eyebrow {
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.24em;
  color: #999;
  margin: 0 0 12px;
  line-height: 1;
}
.pangal-rank-page .pangal_rank_title {
  font-family: Arial, sans-serif;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #111;
  line-height: 1.2;
  margin: 0 0 10px;
}
.pangal-rank-page .pangal_rank_range {
  font-size: 12px;
  color: #888;
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1.5;
}

/* ランクごとのアクセント（投稿ページの総合GOODと同じ考え方） */
/* 評価別一覧のヘッダーも同じシルバーの世界観にそろえる */
.pangal-rank-page .pangal_rank_head.pangal-good--excellent {
  border: 1px solid #c2c7ce;
  box-shadow: inset 0 0 0 1px #ffffff;
  background: -webkit-linear-gradient(top, #ffffff 0%, #f4f6f8 100%);
  background: linear-gradient(180deg, #ffffff 0%, #f4f6f8 100%);
}
.pangal-rank-page .pangal_rank_head.pangal-good--excellent .pangal_rank_title {
  color: #23272c;
}
.pangal-rank-page .pangal_rank_head.pangal-good--excellent .pangal_rank_eyebrow {
  color: #8a9098;
}
.pangal-rank-page .pangal_rank_head.pangal-good--perfect {
  border: 1px solid #b8912f;
  box-shadow: 0 0 0 3px #f8f8f8, 0 0 0 4px #b8912f;
  margin: 4px 4px 24px;
}
.pangal-rank-page .pangal_rank_head.pangal-good--perfect .pangal_rank_title {
  color: #8f6f17;
}

.pangal-rank-page .pangal_rank_empty {
  padding: 40px 30px;
  text-align: center;
  color: #888;
  font-size: 13px;
}

.pangal-rank-page #main_col .page_navi {
  padding: 0 20px 40px;
}

/* タブレット幅では固定1125pxをやめて可変にする（横スクロール防止） */
@media screen and (min-width: 771px) and (max-width: 1124px) {
  body.pangal-rank-page {
    min-width: 0;
  }
  body.pangal-rank-page #global_menu_wrap,
  body.pangal-rank-page #footer,
  body.pangal-rank-page #footer_post_list {
    min-width: 0;
  }
  body.pangal-rank-page #header,
  body.pangal-rank-page #main_contents,
  body.pangal-rank-page #footer_inner {
    width: auto;
    max-width: 1125px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
}

@media screen and (max-width: 770px) {
  .pangal-rank-page .pangal_rank_page {
    width: auto;
  }
  .pangal-rank-page .pangal_rank_head {
    padding: 24px 20px 20px;
    margin: 0 0 16px;
  }
  .pangal-rank-page .pangal_rank_title {
    font-size: 23px;
  }
}


/* =========================================================================
   11. サイドバーの PICK UP（HONEYsPOT誘導カード）
   ========================================================================= */

/* PROFILE と 新着ニュース のあいだに置く広告ブロック。
   見出しもボタンも置かず、1行のコピーとバナーだけ。
   バナー全体が1つのリンクになっている。 */

body.home #side_col .pangal_pickup_widget {
  background: #fff;
  padding: 0;
  overflow: visible;
}

body.home #side_col .pangal_pickup {
  display: block;
  /* 下だけ余白を持たせない。バナーの下端でカードが終わって見えるようにする。 */
  padding: 16px 16px 0;
  border: 1px solid #e2e2e2;
  background: #fff;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: border-color 0.22s ease, box-shadow 0.22s ease;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

/* 1行のコピー。サイドバー幅（262px）で1行に収まる。 */
body.home #side_col .pangal_pickup_copy {
  display: block;
  /* サイドバー幅（262px）で1行に収まるサイズ。
     実測で本文幅は約220px、余裕40px前後あるので端末差でも折れない。 */
  font-size: 12.5px;
  line-height: 1.5;
  color: #333;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CSSで作った仮バナー。黒〜チャコール＋白文字＋赤の細いライン1本。 */
body.home #side_col .pangal_pickup_banner {
  display: block;
  position: relative;
  padding: 30px 16px 26px;
  text-align: center;
  background: -webkit-linear-gradient(top, #23262b 0%, #131518 100%);
  background: linear-gradient(180deg, #23262b 0%, #131518 100%);
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.22s ease, box-shadow 0.22s ease;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
body.home #side_col .pangal_pickup_name {
  display: block;
  font-family: "Noto Sans JP", "Hiragino Sans", Arial, sans-serif;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.2;
}
body.home #side_col .pangal_pickup_rule {
  display: block;
  width: 26px;
  height: 2px;
  margin: 12px auto 10px;
  background: #c2182b;
}
body.home #side_col .pangal_pickup_sub {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.22em;
  color: #b9bcc2;
  line-height: 1.4;
  text-indent: 0.22em;
}

/* 本番バナー画像に差し替えたとき用 */
body.home #side_col .pangal_pickup_banner_image {
  padding: 0;
  background: none;
  line-height: 0;
}
body.home #side_col .pangal_pickup_banner_image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ホバー（PCのみ）。バナーがわずかに浮く程度。 */
.pc body.home #side_col .pangal_pickup:hover {
  border-color: #c9c9c9;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.pc body.home #side_col .pangal_pickup:hover .pangal_pickup_banner {
  -webkit-transform: translateY(-2px);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}
/* タブレット幅（サイドバーが記事の下に回る幅）でも同じ見た目を保つ */
@media screen and (max-width: 949px) {
  body.home #side_col .pangal_pickup {
    max-width: 420px;
    margin: 0 auto;
  }
}


/* -------- 評価別ページのフッター新着一覧 --------
   親テーマは全ページ共通で、フッターに「ランダムに選んだ新着記事5件」を
   カードと同じ見た目（アイキャッチ＋カテゴリーラベル＋タイトル）で並べる
   （footer.php の orderby => rand）。
   評価別の一覧ページでは、この帯が検索結果のすぐ下に続くため、
   条件に合わない記事まで一覧に含まれているように見えてしまう。
   検索結果と紛れないよう、評価別ページでだけ非表示にする。 */
body.pangal-rank-page #footer_post_list {
  display: none;
}


/* =========================================================================
   12. スマホ専用セクション（記事一覧の下）
   ========================================================================= */

/* PCサイドバーをそのまま縦積みするのではなく、
   「新着ニュース（2カラム・画像なし）」と「HONEYsPOTバナー」だけを
   スマホ用のUIとして出している（front-page.php が is_mobile() で切り替え）。
   #main_col の内側にあるので、左右の余白は親テーマの padding:0 20px を使う。 */

.pangal_mobile_extra {
  margin: 34px 0 0;
  padding: 0 0 10px;
}

/* -------- 見出し -------- */
.pangal_mobile_extra .pangal_m_eyebrow {
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.3em;
  color: #999;
  line-height: 1;
  margin: 0 0 8px;
  text-indent: 0.3em;
}
.pangal_mobile_extra .pangal_m_headline {
  position: relative;
  font-size: 15px;
  font-weight: bold;
  color: #111;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #e5e5e5;
}
/* PCサイドバーの見出しと同じ、罫線に重なる短いアクセントバー */
.pangal_mobile_extra .pangal_m_headline:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 28px;
  height: 2px;
  background: #222;
  background: var(--pangal-side-accent, #222);
}
.pangal_mobile_extra .pangal_m_news {
  --pangal-side-accent: #00BFFF;
}

/* -------- 新着ニュース（2カラム・画像なし） -------- */
.pangal_mobile_extra .pangal_m_news_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pangal_mobile_extra .pangal_m_news_item {
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid #ececec;
  /* カード上部の細いアクセントライン（新着ニュース専用の水色） */
  border-top: 3px solid var(--pangal-news-color, #00BFFF);
  min-width: 0;
}

.pangal_mobile_extra .pangal_m_news_item a {
  display: block;
  padding: 11px 11px 13px;
  text-decoration: none;
  color: #222;
}

.pangal_mobile_extra .pangal_m_news_date {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #999;
  line-height: 1.2;
  margin: 0 0 6px;
}

.pangal_mobile_extra .pangal_m_news_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.6;
  color: #222;
  letter-spacing: -0.01em;
  max-height: 3.2em;
  word-break: break-all;
  overflow-wrap: break-word;
}

.pangal_mobile_extra .pangal_m_news_more {
  margin: 14px 0 0;
  text-align: right;
  font-size: 11px;
}
.pangal_mobile_extra .pangal_m_news_more a {
  color: #888;
  text-decoration: none;
}

/* -------- HONEYsPOTバナー（サイドバーと同じ中身を再利用） -------- */
.pangal_mobile_extra .pangal_m_pickup {
  margin: 26px 0 0;
}
.pangal_mobile_extra .pangal_pickup {
  display: block;
  padding: 16px 16px 18px;
  border: 1px solid #e2e2e2;
  background: #fff;
  text-decoration: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pangal_mobile_extra .pangal_pickup_copy {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: #333;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pangal_mobile_extra .pangal_pickup_banner {
  display: block;
  padding: 30px 16px 26px;
  text-align: center;
  background: -webkit-linear-gradient(top, #23262b 0%, #131518 100%);
  background: linear-gradient(180deg, #23262b 0%, #131518 100%);
}
.pangal_mobile_extra .pangal_pickup_name {
  display: block;
  font-family: "Noto Sans JP", "Hiragino Sans", Arial, sans-serif;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.2;
}
.pangal_mobile_extra .pangal_pickup_rule {
  display: block;
  width: 26px;
  height: 2px;
  margin: 12px auto 10px;
  background: #c2182b;
}
.pangal_mobile_extra .pangal_pickup_sub {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.22em;
  color: #b9bcc2;
  line-height: 1.4;
  text-indent: 0.22em;
}
.pangal_mobile_extra .pangal_pickup_banner_image {
  padding: 0;
  background: none;
  line-height: 0;
}
.pangal_mobile_extra .pangal_pickup_banner_image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 320px など狭い端末では、文字と余白をわずかに詰める */
@media screen and (max-width: 359px) {
  .pangal_mobile_extra .pangal_m_news_grid {
    gap: 8px;
  }
  .pangal_mobile_extra .pangal_m_news_item a {
    padding: 10px 9px 12px;
  }
  .pangal_mobile_extra .pangal_m_news_title {
    font-size: 11.5px;
  }
  .pangal_mobile_extra .pangal_pickup_copy {
    font-size: 11.5px;
  }
  .pangal_mobile_extra .pangal_pickup_name {
    font-size: 19px;
  }
}


/* -------- サイト内検索（スマホ専用セクション） -------- */

.pangal_mobile_extra .pangal_m_search {
  margin: 0 0 26px;
}
/* 入力欄は幅いっぱい（100%）。高さだけスマホ用に少し大きくする。 */
.pangal_mobile_extra .pangal_search_form #s {
  height: 46px;
  line-height: 46px;
  font-size: 16px; /* iOSで入力時に拡大されないサイズ */
}
.pangal_mobile_extra .pangal_search_form #searchsubmit {
  width: 46px;
  height: 46px;
}
.pangal_mobile_extra .pangal_search_mode {
  padding: 8px 0 0;
}


/* =========================================================================
   13. スマホのトップ記事カード（左右余白の統一・縦間隔・抜粋1行）
   ========================================================================= */

/* スマホ限定の調整。body に付く pangal-mobile クラスは、子テーマの
   functions.php が is_mobile()（親テーマのUA判定）で付けている。
   PC・iPad（デスクトップUA）には付かないので、
   770px以下でもタブレットのレイアウトは今までどおり。

   左右の余白はカードごとに --pangal-m-gutter で1か所だけ決め、
   画像・カテゴリーラベル・日付・タイトル・抜粋がすべて同じ値を使う。
   これで「画像の左右端＝テキストの左右端」が必ず揃う。 */

@media screen and (max-width: 770px) {

  body.pangal-mobile.home .pangal_post_list li.pangal_card {
    /* カード内で共通の左右余白 */
    --pangal-m-gutter: 16px;
    padding-bottom: 14px;
  }

  /* アイキャッチ。幅は auto にして「カード幅 − 左右の余白」に収める。
     img は width:100% / height:auto のままなので比率は変わらない
     （object-fit で引き伸ばしてはいない）。 */
  body.pangal-mobile.home .pangal_post_list .image,
  body.pangal-mobile.home #index_post_list.pangal_post_list li:first-child .image {
    width: auto;
    margin-left: 16px;
    margin-left: var(--pangal-m-gutter, 16px);
    margin-right: 16px;
    margin-right: var(--pangal-m-gutter, 16px);
  }

  /* テキスト側も同じ余白。画像の左右端と1本のグリッドで揃う。 */
  body.pangal-mobile.home .pangal_post_list .desc {
    padding: 10px 16px 0;
    padding: 10px var(--pangal-m-gutter, 16px) 0;
  }

  /* カテゴリーラベルは画像の左上のまま（li 基準の絶対配置） */
  body.pangal-mobile.home .pangal_post_list .category a,
  body.pangal-mobile.home #index_post_list.pangal_post_list li:first-child .category a {
    left: 16px;
    left: var(--pangal-m-gutter, 16px);
  }

  /* 日付 → タイトル → 抜粋 を1つのまとまりに見せる。
     間隔は詰めるが、行間は読める範囲（1.4〜1.6）で止めている。 */
  body.pangal-mobile.home .pangal_post_list .date {
    margin: 0 0 3px;
    font-size: 11px;
    line-height: 1.4;
  }
  body.pangal-mobile.home .pangal_post_list .title {
    margin: 0 0 5px;
    line-height: 1.45;
  }

  /* 抜粋は2行まで。あふれたら末尾を … で省略し、カードの高さをそろえる。 */
  body.pangal-mobile.home .pangal_post_list .excerpt {
    margin: 0;
    line-height: 1.6;
    -webkit-line-clamp: 2;
    height: 3.2em;
  }
}

/* 320px など狭い端末では余白を少し詰める */
@media screen and (max-width: 359px) {
  body.pangal-mobile.home .pangal_post_list li.pangal_card {
    --pangal-m-gutter: 12px;
  }
  body.pangal-mobile.home .pangal_post_list .image,
  body.pangal-mobile.home #index_post_list.pangal_post_list li:first-child .image {
    margin-left: 12px;
    margin-right: 12px;
  }
  body.pangal-mobile.home .pangal_post_list .desc {
    padding-left: 12px;
    padding-right: 12px;
  }
  body.pangal-mobile.home .pangal_post_list .category a,
  body.pangal-mobile.home #index_post_list.pangal_post_list li:first-child .category a {
    left: 12px;
  }
}


/* =========================================================================
   14. 記事一覧ページ（/articles/）
   ========================================================================= */

/* 枠組みは評価別ページ（.pangal_rank_page）と共有。
   ここでは見出しまわりの体裁だけ整える。 */

.pangal-articles-page .pangal_rank_head {
  text-align: center;
}
.pangal-articles-page .pangal_rank_title {
  font-family: "Noto Sans JP", "Hiragino Sans", Arial, sans-serif;
  font-size: 22px;
  letter-spacing: 0.08em;
}