@charset "utf-8";
/*
Template: jstork19
Theme Name: stork19_custom
Theme URI:http://open-cage.com/stork19/
Version: 1.3.0
Author: opencage
Author URI: https://open-cage.com/
*/

/*
 * Cocoon -> STORK19 Compatibility for tipsforlifestyles.com
 * v0.5 / Article-body styles only; adds Cocoon bb-tips/bb-hint/bb-memo/bb-bad labels
 * Blog cards remain a separate migration item.
 */

/* Balloons */
.entry-content .speech-wrap {
  --cc-balloon-bg: #fff;
  --cc-balloon-border: #ccd6e0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  margin: 1.6em 0;
  clear: both;
  box-sizing: border-box;
}
.entry-content .speech-wrap.sbp-r { flex-direction: row-reverse; }
.entry-content .speech-wrap .speech-person {
  flex: 0 0 72px;
  width: 72px;
  min-width: 0;
  margin: 0;
  text-align: center;
}
.entry-content .speech-wrap .speech-icon { margin: 0; padding: 0; }
.entry-content .speech-wrap .speech-icon-image {
  display: block;
  width: 72px;
  height: 72px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #dce2e9;
  box-sizing: border-box;
}
.entry-content .speech-wrap .speech-name {
  display: block;
  margin-top: 4px;
  font-size: .75em;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.entry-content .speech-wrap .speech-balloon {
  position: relative;
  flex: 1 1 0%;
  min-width: 0;
  max-width: 100%;
  padding: .95em 1.1em;
  border: 1px solid var(--cc-balloon-border);
  border-radius: 10px;
  background: var(--cc-balloon-bg);
  box-sizing: border-box;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
.entry-content .speech-wrap.sbs-line {
  --cc-balloon-bg: #eff9ef;
  --cc-balloon-border: #a7d6b2;
}
.entry-content .speech-wrap .speech-balloon > :first-child { margin-top: 0; }
.entry-content .speech-wrap .speech-balloon > :last-child { margin-bottom: 0; }
.entry-content .speech-wrap .speech-balloon::before,
.entry-content .speech-wrap .speech-balloon::after {
  content: "";
  position: absolute;
  top: 21px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.entry-content .speech-wrap:not(.sbp-r) .speech-balloon::before {
  left: -10px;
  border-right: 10px solid var(--cc-balloon-border);
}
.entry-content .speech-wrap:not(.sbp-r) .speech-balloon::after {
  left: -8px;
  border-right: 10px solid var(--cc-balloon-bg);
}
.entry-content .speech-wrap.sbp-r .speech-balloon::before {
  right: -10px;
  border-left: 10px solid var(--cc-balloon-border);
}
.entry-content .speech-wrap.sbp-r .speech-balloon::after {
  right: -8px;
  border-left: 10px solid var(--cc-balloon-bg);
}

/* Blank boxes */
.entry-content .blank-box {
  --cc-box-border: #aabbd0;
  --cc-box-bg: transparent;
  --cc-tab-label: "ポイント";
  position: relative;
  margin: 1.5em 0;
  padding: 1.1em 1.3em;
  background: var(--cc-box-bg);
  border: 2px solid var(--cc-box-border);
  border-radius: 6px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.entry-content .blank-box.bb-blue { --cc-box-border: #7baed9; --cc-box-bg: #f0f8ff; }
.entry-content .blank-box.bb-red { --cc-box-border: #df9999; --cc-box-bg: #fff2f2; }
.entry-content .blank-box.bb-green { --cc-box-border: #91c8a4; --cc-box-bg: #f0faf3; }
.entry-content .blank-box.bb-yellow { --cc-box-border: #d9be7c; --cc-box-bg: #fff9ea; }
.entry-content .blank-box.bb-tab { margin-top: 2.3em; }
.entry-content .blank-box.bb-tab::before {
  content: var(--cc-tab-label);
  position: absolute;
  top: -1.05em;
  left: 12px;
  display: inline-block;
  padding: .18em .8em;
  font-size: .82em;
  line-height: 1.5;
  font-weight: 700;
  background: #f2f5f8;
  color: #263441;
  border: 1px solid var(--cc-box-border);
  border-radius: 4px;
  box-sizing: border-box;
}
.entry-content .blank-box.bb-check { --cc-tab-label: "✓ チェック"; }
.entry-content .blank-box.bb-point { --cc-tab-label: "ポイント"; }
/* Additional Cocoon tab variants found in existing published articles */
.entry-content .blank-box.bb-tips {
  --cc-tab-label: "TIPS";
  --cc-box-border: #95b4cf;
  --cc-box-bg: #f5f9fd;
}
.entry-content .blank-box.bb-hint {
  --cc-tab-label: "ヒント";
  --cc-box-border: #8daecc;
  --cc-box-bg: #f2f8fc;
  white-space: pre-line;
}
.entry-content .blank-box.bb-memo {
  --cc-tab-label: "メモ";
  --cc-box-border: #91bfa0;
  --cc-box-bg: #f2faf3;
}
.entry-content .blank-box.bb-bad {
  --cc-tab-label: "注意";
  --cc-box-border: #db9696;
  --cc-box-bg: #fff5f5;
}
.entry-content .blank-box.bb-tab:has(> .bb-label)::before { content: none; }
.entry-content .blank-box.bb-tab > .bb-label {
  position: absolute;
  top: -1.05em;
  left: 12px;
  padding: .18em .8em;
  font-size: .82em;
  line-height: 1.5;
  font-weight: 700;
  background: #f2f5f8;
  color: #263441;
  border: 1px solid var(--cc-box-border);
  border-radius: 4px;
  box-sizing: border-box;
}
.entry-content .blank-box.bb-check > .bb-label::after { content: "チェック"; }
.entry-content .blank-box > ul { padding-left: 1.5em; list-style: disc; }
.entry-content .blank-box > ol { padding-left: 1.5em; list-style: decimal; }
.entry-content .blank-box > :not(.bb-label):first-child { margin-top: 0; }
.entry-content .blank-box > :last-child { margin-bottom: 0; }

/* Information and warning boxes */
.entry-content :is(.information-box,.question-box,.alert-box,.memo-box,.primary-box,.success-box,.warning-box,.danger-box) {
  --cc-info-bg: #f1f8ff;
  --cc-info-border: #9fc6e6;
  position: relative;
  margin: 1.5em 0;
  padding: 1em 1.2em;
  background: var(--cc-info-bg);
  border: 1px solid var(--cc-info-border);
  border-left-width: 4px;
  border-radius: 6px;
  box-sizing: border-box;
  overflow-wrap: anywhere;
}
.entry-content :is(.question-box,.warning-box) {
  --cc-info-bg: #fff9e9; --cc-info-border: #deb969;
}
.entry-content :is(.alert-box,.danger-box) {
  --cc-info-bg: #fff0f0; --cc-info-border: #dc9999;
}
.entry-content :is(.memo-box,.success-box) {
  --cc-info-bg: #f0faf3; --cc-info-border: #83bf9d;
}
.entry-content :is(.information-box,.question-box,.alert-box,.memo-box).common-icon-box { padding-left: 3em; }
.entry-content :is(.information-box,.question-box,.alert-box,.memo-box).common-icon-box::before {
  position: absolute;
  top: 1em;
  left: 1em;
  font-weight: 700;
  line-height: 1;
}
.entry-content .information-box.common-icon-box::before { content: "ℹ"; }
.entry-content .question-box.common-icon-box::before { content: "?"; }
.entry-content .alert-box.common-icon-box::before { content: "!"; }
.entry-content .memo-box.common-icon-box::before { content: "✎"; }
.entry-content :is(.information-box,.question-box,.alert-box,.memo-box,.primary-box,.success-box,.warning-box,.danger-box) > :first-child { margin-top: 0; }
.entry-content :is(.information-box,.question-box,.alert-box,.memo-box,.primary-box,.success-box,.warning-box,.danger-box) > :last-child { margin-bottom: 0; }

/* Underline markers */
.entry-content span.marker,
.entry-content span.marker-red,
.entry-content span.marker-blue {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.entry-content span.marker { background-image: linear-gradient(transparent 55%, rgba(255,255,153,.75) 55%); }
.entry-content span.marker-red { background-image: linear-gradient(transparent 55%, rgba(255,208,209,.75) 55%); }
.entry-content span.marker-blue { background-image: linear-gradient(transparent 55%, rgba(168,218,251,.75) 55%); }

/* Small screens */
@media (max-width: 600px) {
  .entry-content .speech-wrap { gap: 8px; }
  .entry-content .speech-wrap .speech-person { width: 52px; flex-basis: 52px; }
  .entry-content .speech-wrap .speech-icon-image { width: 52px; height: 52px; }
  .entry-content .speech-wrap .speech-balloon { padding: .75em .85em; font-size: .95em; }
  .entry-content .blank-box { padding: .95em; }
}

/* Blogcard fallback (not a link/card conversion) */
.entry-content .blogcard-type {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}