/* =====================================================
   Stork SE 互換CSS（実際に使われている装飾のみ移植）
   出典: jstorkse/style.css v2.1 + カスタマイザー色設定
   変数はすべて実値に展開済み。
   ---
   移植対象（全公開コンテンツの使用実態調査に基づく）:
   - [box] 展開DOM（.cbox 系）: site_color / glay_box / red_box /
     blue_box / green_box / yellow_box (+pink) / type_simple / type_ttl
   - [btn] 展開DOM（.btn-wrap / .simple）
   - マーカー3色（span__stk_maker_yellow / pink / blue）
   ===================================================== */

/* ---------- ボックス（.cbox） ---------- */
.cbox {
  padding: 1em;
  margin: 2em 0;
  border: 2px solid #153b96;
  background-color: rgba(21, 59, 150, 0.1);
  border-radius: 4px;
}

.cbox p:last-child { margin-bottom: 0; }

.cbox.intitle { padding-top: 0; }

.cbox:not(.type_ttl) .box_title { margin-bottom: -0.4em; }

.cbox.intitle .span__box_title {
  position: relative;
  top: -1.1rem;
  padding: 0.1em 0.7em;
  background-color: #153b96;
  color: #fff;
  font-weight: 700;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  min-width: 3em;
}

.cbox.intitle .span__box_title:empty { visibility: hidden; }

@media only screen and (max-width: 480px) {
  .cbox.intitle .span__box_title { font-size: 88%; }
}

/* 色バリエーション（枠・背景・タイトルバッジ） */
.cbox.is-style-blue_box { background: #d4f3ff; border-color: #19b4ce; }
.cbox.is-style-blue_box .span__box_title { background: #19b4ce; }

.cbox.is-style-red_box { background: #feeeed; border-color: #ee5656; }
.cbox.is-style-red_box .span__box_title { background: #ee5656; }

.cbox.is-style-yellow_box { background: #fffae2; border-color: #f7cf2e; }
.cbox.is-style-yellow_box .span__box_title { background: #f7cf2e; }

.cbox.is-style-green_box { background: #e8fbf0; border-color: #39cd75; }
.cbox.is-style-green_box .span__box_title { background: #39cd75; }

.cbox.is-style-pink_box { background: #fee; border-color: #f7b2b2; }
.cbox.is-style-pink_box .span__box_title { background: #f7b2b2; }

.cbox.is-style-glay_box { background: #f5f5f5; border-color: #9c9c9c; }
.cbox.is-style-glay_box .span__box_title { background: #9c9c9c; }

.cbox.is-style-site_color { border-color: #153b96; }
.cbox:not(.type_simple):not(.type_ttl).is-style-site_color { background-color: rgba(21, 59, 150, 0.1); }
.cbox:not(.type_simple).is-style-site_color .span__box_title { background-color: #153b96; }

/* type_simple: 白背景・枠のみ、タイトル文字が色付き */
.cbox.type_simple { background-color: #fff; }
.cbox.type_simple .span__box_title { background-color: #fff; }
.cbox.type_simple.is-style-blue_box .span__box_title { color: #19b4ce; }
.cbox.type_simple.is-style-red_box .span__box_title { color: #ee5656; }
.cbox.type_simple.is-style-yellow_box .span__box_title { color: #f7cf2e; }
.cbox.type_simple.is-style-green_box .span__box_title { color: #39cd75; }
.cbox.type_simple.is-style-pink_box .span__box_title { color: #f7b2b2; }
.cbox.type_simple.is-style-glay_box .span__box_title { color: #9c9c9c; }
.cbox.type_simple.is-style-site_color .span__box_title { color: #153b96; }

/* type_ttl: タイトルバーが全幅（Tree of Study等で使用） */
.cbox.type_ttl {
  padding: 0;
  position: static;
  border-radius: 0;
  background: none;
  color: inherit;
}
.cbox.type_ttl .span__box_title {
  width: 100%;
  position: static;
  border-radius: 0;
  vertical-align: top;
  display: inline-block;
  padding: 0.1em 0.7em;
  background-color: #153b96;
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.cbox.type_ttl .cboxcomment { padding: 1em; }

/* ---------- ボタン（.btn-wrap） ---------- */
.btn-wrap {
  margin: 0.5em auto 1em !important;
  text-align: center;
}

.btn-wrap p { margin: 0; }

.btn-wrap a {
  padding: 0.667em 2em;
  font-size: 1em;
  vertical-align: middle;
  font-weight: 700;
  border-radius: 3px;
  max-width: calc(100% - 1em);
  width: auto;
  display: inline-block;
  border-width: 1px;
  border-style: solid;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 1px 10px rgba(0, 0, 0, 0.07);
  color: #fff;
  background-color: #0e78ea;
  border-color: #0e78ea;
  text-decoration: none !important;
}

.btn-wrap.simple a {
  color: #0e78ea;
  border-color: #0e78ea;
  background: none;
}

/* ---------- マーカー3色 ----------
   Storkはスクロール連動アニメで塗るが、ここでは常に塗られた状態で表示 */
.span__stk_maker_yellow,
.span__stk_maker_pink,
.span__stk_maker_blue {
  background-repeat: no-repeat;
  background-size: 200% 0.6em;
  background-position: 100% 100%;
}

.span__stk_maker_yellow {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ff6 50%);
}

.span__stk_maker_pink {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #ffd5d5 50%);
}

.span__stk_maker_blue {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #b5dfff 50%);
}