/* ちいくじ工作教室：microCMSの本文のカスタムclassを、元のサイト（SWELL 2.16.0）と同じ見た目にする。
   元の値は SWELL の main.css・blocks.css と、元のページの swell_custom-inline-css から写した。
   本文は .post_content の中に入る前提（SWELLのCSSと一緒に読む）。 */

/* マーカー：元のサイトでは span.marker に色の指定が無く、文字のまま（太字は <strong> 側）。
   公開の土台は span.marker を <mark> に置き換えるが、cms-blocks.mjs が span に戻す（元の HTML に <mark> があるところは、元どおりブラウザ標準の黄色のまま）。
   黄色くしたいときは、下の2行を background:linear-gradient(transparent 64%,#fcf69f 0%) に替える（SWELLの黄色マーカーの色）。 */
.post_content span.marker {
  background: none;
  color: inherit;
}

/* ボタン：p（中央寄せ）> a > span.btn-*。span が a の外に付いて保存された場合（span > a）も同じ見た目にする。 */
.post_content p:has(> a > :is(.btn-green, .btn-orange, .btn-blue)),
.post_content p:has(> :is(.btn-green, .btn-orange, .btn-blue)) {
  margin: 0 auto 2em;
  text-align: center;
}
.post_content :is(.btn-green, .btn-orange, .btn-blue) {
  --cms-btn-min: 64%;
  --cms-btn-padding: .75em 1.5em;
  background: var(--cms-btn-color);
  border-radius: 80px;
  box-shadow: 0 4px 0 var(--cms-btn-shadow);
  box-sizing: border-box;
  color: #fff;
  display: inline-block;
  font-size: 1.5em;
  font-weight: 700;
  letter-spacing: var(--swl-letter_spacing, 1px);
  line-height: 1.5;
  min-width: var(--cms-btn-min);
  padding: var(--cms-btn-padding);
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: transform .25s, box-shadow .25s;
  z-index: 1;
}
.post_content :is(.btn-green, .btn-orange, .btn-blue) a {
  color: inherit;
  text-decoration: none;
}
.post_content :is(.btn-green, .btn-orange, .btn-blue):hover {
  box-shadow: 0 0 0 transparent;
  transform: translate3d(0, 4px, 0);
}
.post_content .btn-green { --cms-btn-color: #62d847; --cms-btn-shadow: rgba(74, 162, 53, 1); }
.post_content .btn-orange { --cms-btn-color: #fcae28; --cms-btn-shadow: rgba(189, 131, 30, 1); }
.post_content .btn-blue { --cms-btn-color: #338df4; --cms-btn-shadow: rgba(38, 106, 183, 1); }
/* 元の「-size-l」（オレンジ・青）は上下の余白が大きい。オレンジは幅いっぱい。
   青は6個とも「画像の下に中央で並べる縦の枠」の中にあり、字の幅ぶんの大きさで出ている */
.post_content :is(.btn-orange, .btn-blue) { --cms-btn-padding: 1em 1.5em; }
.post_content .btn-orange { --cms-btn-min: 100%; }
.post_content .btn-blue { --cms-btn-min: 0; }
@media (min-width: 600px) {
  .post_content .btn-green { --cms-btn-min: 40%; }
  .post_content .btn-orange { --cms-btn-min: 80%; }
}

/* 吹き出し：p > span.bln-*。アイコンは ::before、しっぽは ::after で描く。
   元の .c-balloon は「アイコン60px（600px以上は80px）＋左右24pxの余白＋文の箱（最大560px）」。 */
.post_content p:has(> :is(.bln-boy, .bln-girl, .bln-girl-left, .bln-both)) {
  --cms-bln-icon: 60px;
  --cms-bln-top: 4px;
  display: flow-root;
  min-height: var(--cms-bln-icon);
}
@media (min-width: 600px) {
  .post_content p:has(> :is(.bln-boy, .bln-girl, .bln-girl-left, .bln-both)) {
    --cms-bln-icon: 80px;
    --cms-bln-top: 8px;
  }
}
.post_content :is(.bln-boy, .bln-girl, .bln-girl-left, .bln-both) {
  background: var(--cms-bln-bg);
  border-radius: 8px;
  box-sizing: border-box;
  color: #333;
  display: block;
  font-size: .95em;
  line-height: 1.6;
  margin: var(--cms-bln-top) 0 var(--cms-bln-top) calc(var(--cms-bln-icon) + 24px);
  max-width: min(560px, calc(100% - var(--cms-bln-icon) - 48px));
  padding: 1em;
  position: relative;
  width: fit-content;
}
@media (min-width: 600px) {
  .post_content :is(.bln-boy, .bln-girl, .bln-girl-left, .bln-both) { font-size: 1em; }
}
.post_content :is(.bln-boy, .bln-girl, .bln-girl-left, .bln-both)::before {
  background: #fff var(--cms-bln-face) center / cover no-repeat;
  border: 2px solid #ececec;
  border-radius: 50%;
  box-sizing: border-box;
  content: "";
  height: var(--cms-bln-icon);
  left: calc(-1 * (var(--cms-bln-icon) + 24px));
  position: absolute;
  top: calc(-1 * var(--cms-bln-top));
  width: var(--cms-bln-icon);
}
.post_content :is(.bln-boy, .bln-girl, .bln-girl-left, .bln-both)::after {
  border-color: transparent var(--cms-bln-bg) transparent transparent;
  border-style: solid;
  border-width: 8px 10px 8px 0;
  content: "";
  height: 0;
  left: -10px;
  position: absolute;
  top: 16px;
  width: 0;
}
/* 右に出る吹き出し（女の子・右） */
.post_content .bln-girl {
  margin-left: auto;
  margin-right: calc(var(--cms-bln-icon) + 24px);
}
.post_content .bln-girl::before {
  left: auto;
  right: calc(-1 * (var(--cms-bln-icon) + 24px));
}
.post_content .bln-girl::after {
  border-color: transparent transparent transparent var(--cms-bln-bg);
  border-width: 8px 0 8px 10px;
  left: auto;
  right: -10px;
}
.post_content .bln-boy { --cms-bln-bg: #e2f6ff; --cms-bln-face: url("/assets/cms-decor/bln-boy.png"); }
.post_content :is(.bln-girl, .bln-girl-left) { --cms-bln-bg: #ffebeb; --cms-bln-face: url("/assets/cms-decor/bln-girl.png"); }
.post_content .bln-both { --cms-bln-bg: #d1f8c2; --cms-bln-face: url("/assets/cms-decor/bln-both.png"); }

/* 写真の横スクロール：元の記事ではインラインstyleだった値をそのまま写した */
.post_content .chiikuji-feed-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.post_content .chiikuji-feed-scroll > img {
  flex: 0 0 72%;
  height: auto;
  margin: 0;
  max-width: 320px;
  scroll-snap-align: start;
  width: 72%;
}

/* 縦並び・中央の枠：元は WordPress がページごとに出す wp-container-… の style（flex-direction:column;align-items:center）と .is-layout-flex の値 */
.post_content .wp-block-group.is-vertical.is-content-justification-center {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: .5em;
}

/* 背景色つきの文字（ラベル）：元はインラインの background-color と color:#ffffff だった値 */
.post_content .label-blue { background-color: #3366ff; color: #fff; }
.post_content .label-green { background-color: #339966; color: #fff; }
.post_content .label-red { background-color: #ff0000; color: #fff; }

/* インラインの style だったもの：字間（元は letter-spacing: 0.05em）・文字の太さ（元は font-weight: 400。テーマの本文は500） */
.post_content .ls-wide { letter-spacing: .05em; }
.post_content .fw-normal { font-weight: 400; }

/* リンクに直書きされていた見た目（元はリンクの style）。飾りは中の span に付くので、リンクごと :has で整える */
.post_content a:has(> .link-plain) { color: inherit; text-decoration: underline; text-decoration-color: currentColor; text-decoration-thickness: .08em; text-underline-offset: .18em; }
.post_content a:has(> .link-green) { color: #176b3a; font-weight: 700; text-decoration: underline; }

/* 黄色マーカー：元は SWELL の span.swl-marker.mark_yellow（main.css の .mark_yellow と同じ塗り。色は元のページの --color_mark_yellow） */
.post_content .marker-yellow { background: linear-gradient(transparent 64%, var(--color_mark_yellow, #fcf69f) 0%); }