@charset "utf-8";
/*
 * えけすぽ ショートコード専用CSS
 * 独自クラス(aks-)に対して定義。STORK の見た目(トンマナ)を再現するが、
 * クラス名・構造はSTORKと別物。記事本文の [btn] 等の表示互換を保つ。
 *
 * 旧STORKクラス → 新独自クラス 対応:
 *   .btn-wrap          → .aks-btn
 *   .btn-wrap.big      → .aks-btn--big
 *   .btn-wrap.lightning→ .aks-btn--cta(cta_btn)
 *   .btn-wrap.aligncenter → .aks-btn--center
 *   .supplement        → .aks-aside
 *   .c_box             → .aks-box
 *   .accordion         → .aks-accordion
 *   .voice             → .aks-voice
 *   .cta-inner         → .aks-cta-inner
 *   .column-wrap/.d-1of2 → .aks-colwrap/.aks-col2/.aks-col3
 *   .related_article   → .aks-kanren
 *   blogcard nm-*      → .aks-blogcard
 */

/* ============ ボタン [btn] [cta_btn] ============ */
.aks-btn {
  margin: 1.5em 0;
}
.aks-btn--center { text-align: center; }
.aks-btn a {
  display: inline-block;
  text-decoration: none;
  background: var(--aks-main, #4e82c2);
  color: #fff;
  padding: 0.9em 2em;
  border-radius: 4px;
  border: 1px solid var(--aks-main, #4e82c2);
  transition: 0.3s;
  font-weight: bold;
}
.aks-btn a:hover { opacity: 0.85; color: #fff; }

/* でかいボタン */
.aks-btn--big a {
  font-size: 1.1em;
  padding: 1.1em 2em;
  width: 420px;
  max-width: 90%;
}

/* 目立つ(旧 lightning)→ CTAボタン用の赤系 */
.aks-btn--cta a {
  background: #C81C1C;
  border-color: #C81C1C;
  color: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
}
.aks-btn--cta a:hover { background: #EC7373; color: #fff; }

/* 旧記事本文には lightning クラスがそのまま残っている(aks-btn--ctaに未変換)ため、
   本番の見た目(黄色)に合わせて直接上書きする */
.aks-btn.lightning a {
  background: #e8b224;
  border-color: #e8b224;
  color: #fff;
}
.aks-btn.lightning a:hover { background: #f0c869; color: #fff; }

/* 角丸 */
.aks-btn--maru, .aks-btn--maru a { border-radius: 0.4em; }

/* 背景付き */
.aks-btn--bg { background: rgba(0,0,0,.1); padding: 1.5em 1em; margin: 2.5em 0; }
.aks-btn--bg-yellow { background: rgba(255,255,0,0.2); padding: 1.5em 1em; margin: 2.5em 0; }

/* 立体ボタン(rich系) */
.aks-btn--rich_yellow a { font-weight: bold; background-color: #f7cf2e; color: #fff !important; border-radius: 0.2em; box-shadow: 0 4px 0 #ecb254; border: none; text-shadow: 0 1px 1px rgba(0,0,0,.09); }
.aks-btn--rich_yellow a:hover { background: #ecb254; box-shadow: 0 1px 0 #ecb254; }
.aks-btn--rich_pink a { font-weight: bold; background-color: #ee5656; color: #fff !important; border-radius: 0.2em; box-shadow: 0 4px 0 #d34e4e; border: none; text-shadow: 0 1px 1px rgba(0,0,0,.09); }
.aks-btn--rich_pink a:hover { background: #d34e4e; box-shadow: 0 1px 0 #d34e4e; }
.aks-btn--rich_orange a { font-weight: bold; background-color: #ef9b2f; color: #fff !important; border-radius: 0.2em; box-shadow: 0 4px 0 #cc8c23; border: none; text-shadow: 0 1px 1px rgba(0,0,0,.09); }
.aks-btn--rich_orange a:hover { background: #cc8c23; box-shadow: 0 1px 0 #cc8c23; }
.aks-btn--rich_green a { font-weight: bold; background-color: #39cd75; color: #fff !important; border-radius: 0.2em; box-shadow: 0 4px 0 #1eae59; border: none; text-shadow: 0 1px 1px rgba(0,0,0,.09); }
.aks-btn--rich_green a:hover { background: #1eae59; box-shadow: 0 1px 0 #1eae59; }
.aks-btn--rich_blue a { font-weight: bold; background-color: #19b4ce; color: #fff !important; border-radius: 0.2em; box-shadow: 0 4px 0 #07889d; border: none; text-shadow: 0 1px 1px rgba(0,0,0,.09); }
.aks-btn--rich_blue a:hover { background: #07889d; box-shadow: 0 1px 0 #07889d; }

/* ============ CTA [cta_in] [cta_ttl] ============ */
.aks-cta-inner {
  background: #0E0E0E;
  color: #ddd;
  border-top: 5px solid rgba(146, 146, 146, 0.3);
  padding: 1.5em;
}
.aks-cta-copy { text-align: center; color: #fff; margin-bottom: 1em; }
.aks-cta-inner .aks-btn a { box-shadow: none; margin-top: 1em; }

/* ============ 補足 [aside] ============ */
.aks-aside {
  background: rgba(255, 255, 0, .2);
  font-size: .94em;
  padding: 3% 4%;
  margin: 1.5em 0 2em;
  border-radius: 4px;
  border: 1px solid rgba(165, 165, 165, 0.2);
}
.aks-aside p { margin-bottom: .8em; }
.aks-aside p:last-child { margin-bottom: 0; }
.aks-aside--warning { background: rgba(255, 0, 45, 0.18); color: #333; }
.aks-aside::before {
  font-family: "Font Awesome 5 Free", "fontawesome";
  content: '\f0e6';
  font-weight: 900;
  display: inline-block;
  margin-right: .3em;
  font-size: 1.2em;
}
.aks-aside--warning::before { content: '\f071'; }
.aks-aside--border, .aks-aside--boader { background: none; }
.aks-aside--border::before, .aks-aside--boader::before, .aks-aside--noicon::before { content: none; }

/* ============ ボックス [box] ============ */
.aks-box {
  padding: 1em 4%;
  margin: 2em 0;
  border: 2px solid #dddddd;
  border-radius: 0.2em;
}
.aks-box p { margin-bottom: .8em; }
.aks-box p:last-child { margin-bottom: 0; }
.aks-box--titled { padding-top: 0; padding-bottom: 1.4em; }
.aks-box--titled .aks-box-title span {
  position: relative;
  top: -0.85em;
  padding: 0.1em 0.5em;
  background: #6d6d6d;
  color: #fff;
  font-weight: bold;
  border-radius: 0.2em;
  display: inline-block;
  vertical-align: bottom;
}
.aks-box.blue_box { background: #d4f3ff; border-color: #82c8e2; color: #465d65; }
.aks-box.blue_box .aks-box-title span { background: #82c8e2; }
.aks-box.red_box { background: #ffafaf; border-color: #e77373; color: #654646; }
.aks-box.red_box .aks-box-title span { background: #e77373; }
.aks-box.yellow_box { background: #fff8d4; border-color: #ded647; color: #636546; }
.aks-box.yellow_box .aks-box-title span { background: #ded647; }
.aks-box.green_box { background: #d8f7c3; border-color: #79e37c; color: #42613a; }
.aks-box.green_box .aks-box-title span { background: #79e37c; }
.aks-box.pink_box { background: #ffeeee; border-color: #f7b2b2; color: #775454; }
.aks-box.pink_box .aks-box-title span { background: #f7b2b2; }
.aks-box.glay_box { background: #ececec; border-color: #9c9c9c; color: #555; }
.aks-box.glay_box .aks-box-title span { background: #9c9c9c; }
.aks-box.black_box { background: #313131; border-color: #757575; color: #fff; }
.aks-box.black_box .aks-box-title span { background: #757575; }
.aks-box--simple { background: none; }
.aks-box--simple .aks-box-title span { background: #fff; color: #999; }

/* ============ アコーディオン [open] ============ */
.aks-accordion {
  margin: 0.9em 0;
  font-size: 95%;
  position: relative;
  z-index: 1;
}
.aks-accordion::before, .aks-accordion::after {
  content: ""; display: block; width: 100%; height: 100%;
  background: #1ab4d3; opacity: 0.15;
  position: absolute; top: 0; left: 0; z-index: -1;
}
.aks-accordion::after { background: #000; opacity: 0.02; }
.aks-accordion-check { display: none; }
.aks-accordion-label {
  position: relative; color: initial; display: block; margin: 0;
  padding: 10px 30px 10px 10px; font-weight: bold; cursor: pointer;
}
.aks-accordion-label::after {
  content: "+"; position: absolute; right: 0.8em; top: calc(50% - 0.5em);
  line-height: 1; color: rgba(100,100,100,0.7); transition: .3s;
}
.aks-accordion-check:checked + .aks-accordion-label::after { transform: rotate(45deg); }
.aks-accordion-content {
  height: 0; opacity: 0; padding: 0 1em; transition: .5s;
  visibility: hidden; background: #fff;
}
.aks-accordion-content p:last-child { margin-bottom: 0; }
.aks-accordion-check:checked + .aks-accordion-label + .aks-accordion-content {
  height: auto; opacity: 1; padding: 10px 1em; margin: 3px;
  transform: translateY(-3px); visibility: visible;
}

/* ============ 吹き出し [voice] ============ */
.aks-voice { margin: 1em 0 1.3em; font-size: 0.95em; overflow: hidden; }
.aks-voice-comment {
  border: 3px solid #eee; background: #fff; color: #444;
  padding: 2.5%; position: relative; width: 85%; border-radius: 5px;
  float: right; box-sizing: border-box;
}
.aks-voice-icon { width: 12%; text-align: center; float: left; margin: 0; }
.aks-voice-icon img { border-radius: 50%; margin: 0; border: 4px solid #f5f5f5; width: 100%; }
.aks-voice-name { font-size: 0.65em; padding: 0.4em 0; }
.aks-voice-comment::before {
  content: ''; position: absolute;
  border-right: 8px solid #eee; border-bottom: 8px solid transparent; border-top: 8px solid transparent;
  top: 10px; left: -11px;
}
.aks-voice-comment::after {
  content: ''; position: absolute;
  border-right: 10px solid #fff; border-bottom: 8px solid transparent; border-top: 8px solid transparent;
  top: 10px; left: -7px;
}
.aks-voice-comment p { margin-bottom: 1em; }
.aks-voice-comment p:last-child { margin-bottom: 0; }
/* 右配置(type r) */
.aks-voice--r .aks-voice-icon { float: right; }
.aks-voice--r .aks-voice-comment { float: left; }
.aks-voice--r .aks-voice-comment::before { border-right: none; border-left: 8px solid #eee; left: auto; right: -11px; }
.aks-voice--r .aks-voice-comment::after { content: none; }

/* ============ カラム [colwrap][col2][col3] ============ */
.aks-colwrap { display: flex; flex-wrap: wrap; gap: 0; margin: 1.5em 0; }
.aks-col { box-sizing: border-box; }
.aks-col2 { width: 50%; padding-right: 2.8%; }
.aks-col3 { width: 33.333%; padding-right: 2.8%; }
@media only screen and (max-width: 767px) {
  .aks-col2, .aks-col3 { width: 100%; padding-right: 0; }
}

/* ============ 関連記事 [kanren][kanren2] ============ */
.aks-kanren { margin: 1.8em 0; text-align: left; }
.aks-kanren a {
  color: #333; background: #fff; border: 1px solid #eee;
  box-shadow: 1px 1px 0 #efefef; text-decoration: none;
  display: block; overflow: hidden; padding: 0.9em;
}
.aks-kanren a:hover { color: #666; background: lightyellow; }
.aks-kanren-thumb { width: 22%; float: left; margin: 0; }
.aks-kanren-thumb img { width: 100%; margin-bottom: 0; }
.aks-kanren-meta { padding-left: 25%; }
.aks-kanren-ttl { margin: 0 0 0.1em; font-size: 1em; font-weight: bold; }
.aks-kanren-ttl::before {
  content: '関連記事'; font-size: .7em; font-weight: bold; color: #fff;
  background: #111; width: 5em; display: inline-block; padding: 0.2em;
  position: relative; top: -2px; text-align: center; margin-right: 0.5em; border-radius: 2px;
}
.aks-kanren--nolabel .aks-kanren-ttl::before { content: none; }
.aks-kanren-date { font-size: 0.8em; }

/* ============ ブログカード [blogcard] ============ */
.aks-blogcard {
  display: block; text-decoration: none; color: #333;
  border: 1px solid #e3e3e3; border-radius: 4px; overflow: hidden;
  margin: 1.5em 0; transition: 0.2s;
}
.aks-blogcard:hover { background: #fafafa; color: #333; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.aks-blogcard-box { display: flex; align-items: stretch; }
.aks-blogcard-thumb { width: 30%; flex-shrink: 0; }
.aks-blogcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aks-blogcard-content { padding: 0.9em; flex: 1; }
.aks-blogcard-title { font-weight: bold; margin-bottom: 0.3em; }
.aks-blogcard-excerpt { font-size: 0.85em; color: #666; }
@media only screen and (max-width: 480px) {
  .aks-btn a { font-size: 0.9em; padding: 0.9em 1.5em; }
  .aks-btn--big a { font-size: 0.9em; padding: 0.9em 1.5em; min-width: 80%; max-width: 90%; }
  .aks-kanren { font-size: 0.8em; }
  .aks-kanren-meta { padding-left: 32%; }
  .aks-kanren-thumb { width: 30%; }
  .aks-kanren-ttl::before { content: '関連'; width: 3em; }
}