@charset "UTF-8";
/************************************
** AFFINGER 互換（affinger-compat.php が出す部品と、記事の中の AFFINGER のクラス）
** affinger-compat.php が子テーマの style.css のあとに読み込む。サイトに依存する指定はここに書かない。
************************************/

/* 記事の中の文字飾り */
.huto { font-weight: bold; }
.hutoaka { font-weight: bold; color: #ff3333; }
.st-aka { color: #ff3333; }
.oomozi { font-size: 150%; line-height: 1.4; font-weight: bold; }
.ymarker { background: #fff9c4; }
.ymarker-s,
.st-mymarker-s { background: linear-gradient(transparent 70%, #fff9c4 0%); }
.rmarker-s { background: linear-gradient(transparent 70%, #ffcdd2 0%); }

/* 2列・3列の並び（パソコンでは横並び、スマホでは縦並び） */
.clearfix::after { content: ""; display: block; clear: both; }
.responbox50 .lbox,
.responbox50 .rbox { width: 49%; box-sizing: border-box; }
.responbox50 .lbox { float: left; }
.responbox50 .rbox { float: right; }
.responbox33 .lbox,
.responbox33 .rbox { float: left; width: 33.33%; padding: 5px; box-sizing: border-box; }

/* 写真風の枠 */
.st-photohu {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 10px 20px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 10px 8px -6px #bebebe;
}

/* 引用風・フリーボックス・番号リスト */
.inyoumodoki { background: #f3f3f3; padding: 20px; margin-bottom: 20px; }
.freebox { position: relative; background: #f3f3f3; border-top: 1px solid #feb20a; margin-bottom: 20px; }
.freebox .p-entry-f { display: inline-block; margin: 0; padding: 3px 20px; background: #feb20a; color: #fff; font-weight: bold; font-size: 15px; }
.freebox .free-inbox { padding: 10px 15px; }
.maruno ol { counter-reset: afc-section; list-style: none; padding-left: 0; }
.maruno ol li { counter-increment: afc-section; position: relative; padding-left: 2.2em; }
.maruno ol li::before {
  content: counter(afc-section);
  position: absolute; left: 0; top: .1em;
  width: 1.6em; height: 1.6em; line-height: 1.6em;
  border-radius: 50%; background: #424242; color: #fff; text-align: center; font-size: .9em;
}

/* 小さな吹き出しラベル */
.afc-mini-balloon-wrap { margin: 0 0 12px; }
.afc-mini-balloon {
  position: relative;
  display: inline-block;
  padding: 4px 14px;
  border-radius: 4px;
  background: var(--afc-bg, #f3f3f3);
  color: var(--afc-fg, #333);
  font-size: .9em;
  font-weight: bold;
}
.afc-mini-balloon::after {
  content: "";
  position: absolute; left: 18px; bottom: -8px;
  border: 8px solid transparent; border-bottom: 0;
  border-top-color: var(--afc-bg, #f3f3f3);
}

/* 話し手の設定が消えた吹き出し（アイコンなし・しっぽなし） */
.speech-wrap.afc-no-person .speech-balloon { margin-left: 0; margin-right: 0; }
.speech-wrap.afc-no-person .speech-balloon::before,
.speech-wrap.afc-no-person .speech-balloon::after { display: none; }

/* AFFINGERタグ（[st_af]）の枠：見出し → 画像と説明 → 説明2 → ボタン */
.afc-af-box { margin: 1.5em 0; padding: 16px; border: 1px solid #ddd; border-radius: 4px; }
.afc-af-heading { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #ddd; font-size: 1.15em; font-weight: bold; }
.afc-af-star { color: #ffb400; white-space: nowrap; }
.afc-af-main { display: flex; gap: 16px; align-items: flex-start; }
.afc-af-banner { flex: 0 0 40%; }
.afc-af-banner img { max-width: 100%; height: auto; }
.afc-af-desc { flex: 1; min-width: 0; }
.afc-af-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 1em; }
.afc-af-links a { display: inline-block; padding: .8em 2em; border-radius: 4px; background: #e53935; color: #fff; font-weight: bold; text-decoration: none; }
.afc-af-links .afc-af-detail a { background: #757575; }
.afc-af-links a:hover { color: #fff; opacity: .85; }

/* ボタン（色だけ AFFINGER から引き継ぐ） */
.afc-btn-wrap { text-align: center; margin: 1em 0; }
.afc-btn { background-color: var(--afc-bg, #ef5350); color: var(--afc-fg, #fff); }
.afc-btn:hover { color: var(--afc-fg, #fff); opacity: .85; }

/* ステップ見出し */
.afc-step { display: flex; align-items: center; gap: 10px; margin: 1.5em 0 1em; font-weight: bold; }
.afc-step-no { flex: none; padding: 4px 12px; border-radius: 4px; background: #424242; color: #fff; font-size: .85em; }

/* 画像付きリンクの並び */
.afc-box-btn { display: grid; grid-template-columns: repeat(var(--afc-cols, 3), 1fr); gap: 10px; margin-bottom: 20px; }
.afc-cols-2 { --afc-cols: 2; } .afc-cols-3 { --afc-cols: 3; } .afc-cols-4 { --afc-cols: 4; }
.afc-box-btn-item { display: block; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; text-align: center; text-decoration: none; color: inherit; font-weight: bold; }
.afc-box-btn-item img { display: block; width: 100%; height: auto; }
.afc-box-btn-text { display: block; padding: 6px; font-size: .9em; }
.afc-box-btn-text small { display: block; font-weight: normal; color: #777; }

/* 記事カードのラベル */
.afc-card { margin-bottom: 1em; }
.afc-card-label { margin-bottom: 4px; }

/* 背景画像つきの見出しボックス */
.afc-flexbox-link { display: block; text-decoration: none; }
.afc-flexbox { display: flex; align-items: center; justify-content: center; min-height: 160px; margin-bottom: 20px; padding: 20px; background: #f3f3f3 center / cover no-repeat; text-align: center; }
.afc-flexbox.afc-has-bg { color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
.afc-flexbox-title { font-size: 1.6em; font-weight: bold; line-height: 1.4; }

/* 角丸ラベル・色付きの帯・下向き三角 */
.afc-marumozi { display: inline-block; padding: 2px 12px; border-radius: 30px; background: var(--afc-bg, #f3f3f3); color: var(--afc-fg, #333); font-size: .9em; }
.afc-marumozi-big { padding: 6px 18px; font-size: 1.1em; font-weight: bold; }
.afc-widecolumn { margin: 0 0 20px; padding: 20px; background: var(--afc-bg, transparent); }
/* 色付きの帯の中の見出しは、AFFINGER と同じく白い文字だけにする */
.afc-widecolumn.afc-has-bg { color: #fff; }
.article .afc-widecolumn.afc-has-bg h2 { margin: 0; padding: 20px 0; background: none; border: none; color: #fff; }
.afc-under-t { color: var(--afc-fg, #e53935); }

/* YouTube */
.afc-youtube { margin-bottom: 20px; }

/*834px以下*/
@media screen and (max-width: 834px){
  .afc-cols-4 { --afc-cols: 2; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  /* AFFINGER の2列・3列はスマホで縦並び（smart50 はスマホでも2列のまま） */
  .responbox50:not(.smart50) .lbox,
  .responbox50:not(.smart50) .rbox,
  .responbox33 .lbox,
  .responbox33 .rbox { float: none; width: 100%; }
  .afc-cols-3, .afc-cols-4 { --afc-cols: 2; }
  .afc-af-main { display: block; }
  .afc-af-banner { margin-bottom: 12px; }
}