@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/

/* ヘッダーの「各種ログイン」（menu-item-215）。
   ナビの帯いっぱいに塗ると「現在開いているページ」の強調と読み違えられるため、
   押せるボタンの形（ピル）にする。色はカスタマイザーの指定を打ち消して a 側で塗る（2026-09-24） */
.desktop-nav #menu-item-215 {
  background-color: transparent;
  display: flex;
  align-items: center;
  /* 隣の項目から離して独立したボタンに見せる。右端は本文の右はしに揃えたままにする */
  margin-left: 16px;
}
.desktop-nav #menu-item-215 > a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  line-height: 1.2;
  padding: 0 20px;
  border-radius: 999px;
  background-color: #ffb36b;
  /* オレンジ地に白文字は明暗差が小さく読みにくいので黒文字にする（2026-09-24） */
  color: #222222;
  transition: background-color .15s ease, transform .15s ease;
}
.desktop-nav #menu-item-215 > a:hover {
  background-color: #f59a45;
  color: #222222;
  transform: translateY(-1px);
}

/* トップだけ。本文の白い枠が中身の高さで止まり、右カラム（SNS まで）との下端が揃わないので伸ばす。
   左右が横並びのとき（1030px 以上）だけ効かせる（2026-09-24） */
@media only screen and (min-width: 1030px) {
  .home #main {
    display: flex;
    flex-direction: column;
  }
  /* 白い枠 → 本文 → 最後のグループ → 新着情報の箱、と順に余白を受け渡す */
  .home #main > #entry,
  .home #entry > .entry-content,
  .home .entry-content > .wp-block-group:last-child,
  .home .entry-content > .wp-block-group:last-child > .wp-block-group {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  /* 新着情報の箱はブロック設定で高さ 500px 固定。伸ばした分を使い、あふれる分は中でスクロール */
  .home #sgb-css-id-1 {
    /* flex-basis を 0 にして「余った高さだけ」を埋める。auto だと中身の高さ分ページが伸びる */
    height: auto;
    flex: 1 1 0;
    min-height: 500px;
  }
}

/* フッター上部のウィジェット枠。中身は空のコードブロックだけで、104px の余白になっていたので隠す。
   フッターにウィジェットを置くときは、この指定を外す（2026-09-24） */
/* テーマがページ後方の <style> で display:grid を出すので、クラスを足して強さを上げる */
footer.footer #inner-footer {
  display: none;
}

/* 新着情報の箱（2026-09-24）。
   枠線はブロック設定の #f5f5f5 で白地にほぼ見えないため濃くする。
   枠は外側の箱に描き、中の一覧は上下 24px をぼかす。こうすると
   スクロール途中でも文字が枠線のきわでスパッと切れない。 */
/* 内側の箱には style="border-style:none" が直接書かれているので、ひとつ外側に枠を描く */
.home .entry-content > .wp-block-group:last-child {
  border: 2px solid #9a9a9a;
  border-radius: 12px; /* テーマは本文内で角丸の変数を 0 にしているので直に指定する */
  overflow: hidden;
}
.home #sgb-css-id-1 {
  border: 0;
  border-radius: 0;
  padding: 24px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}