@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ==================================================
   LoL対面ナビ
   Champion Matchup Article
================================================== */

.mn-article {
  --mn-navy: #182238;
  --mn-navy-light: #263552;
  --mn-blue: #536fe8;
  --mn-blue-light: #f1f4ff;
  --mn-red: #dc5461;
  --mn-red-light: #fff3f4;
  --mn-green: #319873;
  --mn-green-light: #effaf6;
  --mn-text: #252c3a;
  --mn-subtext: #6f7889;
  --mn-border: #e2e6ed;
  --mn-bg: #f7f8fb;

  color: var(--mn-text);
}


/* ==================================================
   記事上部メタ
================================================== */

.mn-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 5px 0 18px;
}

.mn-role,
.mn-type {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}

.mn-role {
  background: var(--mn-navy);
  color: #fff;
}

.mn-type {
  border: 1px solid var(--mn-border);
  background: #fff;
  color: var(--mn-subtext);
}

.mn-updated {
  margin-left: auto;
  color: #8991a0;
  font-size: 11px;
}

.mn-intro {
  margin-bottom: 22px;
  color: #4d5666;
  line-height: 1.8;
}


/* ==================================================
   10秒チェック
================================================== */

.mn-quick {
  margin: 22px 0 38px;
  border: 1px solid #dce1ea;
  border-radius: 14px;
  background: #fff;
  box-shadow:
    0 3px 8px rgba(26, 36, 57, .03),
    0 12px 32px rgba(26, 36, 57, .07);
  overflow: hidden;
}

.mn-quick-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #172137 0%, #263657 100%);
  color: #fff;
}

.mn-quick-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  color: #1e2b47;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
}

.mn-quick-title {
  font-size: 17px;
  font-weight: 800;
}


/* 一番重要な文章 */

.mn-key {
  padding: 20px 21px;
  border-bottom: 1px solid #edf0f4;
  background:
    linear-gradient(135deg, #f8f9fc 0%, #f3f5fa 100%);
}

.mn-key-label {
  display: block;
  margin-bottom: 7px;
  color: #7b8494;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.mn-key-text {
  color: #202a3d;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.65;
}

.mn-key-text strong {
  color: #314dbb;
}


/* 注意事項 */

.mn-checks {
  padding: 8px 20px;
}

.mn-check {
  display: grid;
  grid-template-columns: 29px 1fr;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid #eef0f4;
}

.mn-check:last-child {
  border-bottom: 0;
}

.mn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
}

.mn-danger .mn-icon {
  background: var(--mn-red-light);
  color: var(--mn-red);
}

.mn-safe .mn-icon {
  background: var(--mn-green-light);
  color: var(--mn-green);
}

.mn-small-label {
  display: block;
  margin-bottom: 2px;
  color: #9299a6;
  font-size: 10px;
  font-weight: 700;
}

.mn-check strong {
  display: block;
  color: #303746;
  font-size: 14px;
  line-height: 1.55;
}


/* POINT */

.mn-point {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 18px 18px;
  padding: 12px 14px;
  border-left: 4px solid var(--mn-blue);
  border-radius: 7px;
  background: var(--mn-blue-light);
  color: #34415c;
  font-size: 14px;
  line-height: 1.6;
}

.mn-point-label {
  flex-shrink: 0;
  color: var(--mn-blue);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}


/* ==================================================
   H2
================================================== */

.mn-article h2 {
  position: relative;
  margin-top: 46px;
  margin-bottom: 20px;
  padding: 0 0 11px 14px;
  border: 0;
  border-bottom: 1px solid #e5e8ed;
  background: none;
  color: #222b3c;
  font-size: 22px;
  font-weight: 800;
}

.mn-article h2::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 12px;
  left: 0;
  width: 4px;
  border-radius: 5px;
  background: var(--mn-blue);
}

.mn-article h2::after {
  display: none;
}


/* 冒頭結論 */

.mn-lead {
  margin: 20px 0;
  padding: 15px 17px;
  border-radius: 8px;
  background: #f6f7fa;
  color: #303848;
  line-height: 1.8;
}


/* ==================================================
   やられる流れ
================================================== */

.mn-flow {
  display: flex;
  align-items: stretch;
  gap: 7px;
  margin: 24px 0;
}

.mn-flow-item {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 13px 9px;
  border: 1px solid var(--mn-border);
  border-radius: 9px;
  background: #fff;
  text-align: center;
}

.mn-flow-num {
  display: block;
  margin-bottom: 5px;
  color: #9aa1ae;
  font-size: 10px;
  font-weight: 800;
}

.mn-flow-item strong {
  color: #343c4a;
  font-size: 12px;
}

.mn-flow-last {
  border-color: #f2cdd1;
  background: var(--mn-red-light);
}

.mn-flow-last strong {
  color: #b4444e;
}

.mn-flow-arrow {
  display: flex;
  align-items: center;
  color: #a9afba;
  font-size: 22px;
  font-weight: 300;
}


/* ==================================================
   解説ボックス
================================================== */

.mn-note {
  margin: 22px 0;
  padding: 16px 18px;
  border-radius: 9px;
}

.mn-note p {
  margin: 7px 0 0;
}

.mn-note-title {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
}

.mn-note-danger {
  border: 1px solid #f1d7da;
  background: var(--mn-red-light);
}

.mn-note-danger .mn-note-title {
  color: var(--mn-red);
}

.mn-note-safe {
  border: 1px solid #cfebe0;
  background: var(--mn-green-light);
}

.mn-note-safe .mn-note-title {
  color: var(--mn-green);
}


/* ==================================================
   Lv6警告
================================================== */

.mn-warning {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 13px;
  margin: 22px 0;
  padding: 17px;
  border: 1px solid #f0d5d8;
  border-radius: 10px;
  background: #fff8f8;
}

.mn-warning-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mn-red);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.mn-warning-title {
  display: block;
  margin-bottom: 5px;
  color: #ad4049;
  font-size: 15px;
  font-weight: 800;
}

.mn-warning p {
  margin: 0;
}


/* ==================================================
   最後の3行まとめ
================================================== */

.mn-summary {
  margin: 45px 0 32px;
  border-radius: 13px;
  background: var(--mn-navy);
  box-shadow: 0 10px 25px rgba(24, 34, 56, .12);
  color: #fff;
  overflow: hidden;
}

.mn-summary-head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.mn-summary-head span {
  display: block;
  margin-bottom: 3px;
  color: #aebbd5;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.mn-summary-head strong {
  font-size: 17px;
}

.mn-summary-list {
  padding: 9px 20px 14px;
}

.mn-summary-list > div {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mn-summary-list > div:last-child {
  border-bottom: 0;
}

.mn-summary-list span {
  color: #8195c2;
  font-size: 10px;
  font-weight: 900;
}

.mn-summary-list strong {
  font-size: 14px;
}


/* ==================================================
   関連チャンピオン
================================================== */

.mn-related {
  margin: 32px 0;
  padding: 19px;
  border: 1px solid var(--mn-border);
  border-radius: 11px;
  background: #fff;
}

.mn-related-title {
  margin-bottom: 12px;
  color: #565f6e;
  font-size: 12px;
  font-weight: 800;
}

.mn-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mn-related-links a {
  display: inline-block;
  padding: 7px 11px;
  border: 1px solid #dfe3ea;
  border-radius: 7px;
  background: #f8f9fb;
  color: #43506c;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: .15s ease;
}

.mn-related-links a:hover {
  border-color: #9ba9df;
  background: var(--mn-blue-light);
  color: #3850ae;
}


/* ==================================================
   情報ソース
================================================== */

.mn-source {
  margin-top: 35px;
  padding-top: 15px;
  border-top: 1px solid #eceef2;
  color: #969daa;
  font-size: 11px;
}

.mn-source a {
  color: #747f97;
  text-decoration: underline;
}


/* ==================================================
   スマートフォン
================================================== */

@media screen and (max-width: 600px) {

  .mn-meta {
    margin-bottom: 14px;
  }

  .mn-updated {
    width: 100%;
    margin: 2px 0 0;
  }

  .mn-intro {
    font-size: 14px;
  }

  .mn-quick {
    margin: 17px 0 30px;
    border-radius: 11px;
  }

  .mn-quick-head {
    padding: 12px 14px;
  }

  .mn-quick-title {
    font-size: 15px;
  }

  .mn-key {
    padding: 16px;
  }

  .mn-key-text {
    font-size: 16px;
  }

  .mn-checks {
    padding: 6px 15px;
  }

  .mn-check {
    padding: 10px 0;
  }

  .mn-check strong {
    font-size: 13px;
  }

  .mn-point {
    align-items: flex-start;
    margin: 4px 14px 14px;
    padding: 11px 12px;
    font-size: 13px;
  }

  .mn-article h2 {
    margin-top: 38px;
    font-size: 19px;
  }

  /*
   * PCでは横フロー
   * スマホでは縦フロー
   */
  .mn-flow {
    flex-direction: column;
    gap: 5px;
  }

  .mn-flow-item {
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    padding: 11px 13px;
    text-align: left;
  }

  .mn-flow-num {
    margin: 0;
  }

  .mn-flow-arrow {
    height: 13px;
    justify-content: center;
    transform: rotate(90deg);
    font-size: 18px;
  }

  .mn-warning {
    grid-template-columns: 32px 1fr;
    padding: 14px;
  }

  .mn-warning-icon {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .mn-summary {
    margin-top: 36px;
    border-radius: 10px;
  }

  .mn-summary-head {
    padding: 16px;
  }

  .mn-summary-list {
    padding: 7px 16px 12px;
  }

}

/* ==================================================
   LoL対面ナビ
   トップ・アーカイブ記事一覧カード
================================================== */


/* ------------------------------
   カード同士の余白
------------------------------ */

.ect-vertical-card {
  gap: 24px;
}


/* ------------------------------
   カード本体
------------------------------ */

.ect-vertical-card .entry-card-wrap {
  box-sizing: border-box;
  padding: 0 !important;
  border: 1px solid #e1e6ef;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 3px 12px rgba(25, 35, 55, 0.04);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


/* マウスを乗せたとき */

.ect-vertical-card .entry-card-wrap:hover {
  transform: translateY(-3px);
  border-color: #c9d2e6;
  box-shadow: 0 10px 26px rgba(25, 35, 55, 0.10);
}


/* Cocoon内部の余白を整理 */

.ect-vertical-card .entry-card {
  height: 100%;
  padding: 0 !important;
}


/* ------------------------------
   サムネイル
------------------------------ */

.ect-vertical-card .entry-card-thumb {
  margin: 0 !important;
  border-radius: 0;
  overflow: hidden;
  background: #182238;
}


/* 1200×630の比率を維持 */

.ect-vertical-card .entry-card-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  transition: transform .25s ease;
}


/* ホバー時、画像をほんの少し拡大 */

.ect-vertical-card .entry-card-wrap:hover .entry-card-thumb img {
  transform: scale(1.015);
}


/* ------------------------------
   タイトル
------------------------------ */

.ect-vertical-card .entry-card-title {
  display: -webkit-box;
  margin: 0 !important;
  padding: 14px 16px 6px;
  color: #20293a;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.55;

  /* 最大2行 */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* タイトルホバー */

.ect-vertical-card .entry-card-wrap:hover .entry-card-title {
  color: #3f5cc9;
}


/* ------------------------------
   抜粋文章は非表示
------------------------------ */

.ect-vertical-card .entry-card-snippet {
  display: none !important;
}


/* ------------------------------
   日付などのメタ情報
------------------------------ */

.ect-vertical-card .entry-card-meta {
  padding: 4px 16px 14px;
  color: #8b94a4;
  font-size: 11px;
}


/* 投稿日・更新日の色 */

.ect-vertical-card .post-date,
.ect-vertical-card .post-update {
  color: #8b94a4;
  font-size: 11px;
}


/* ------------------------------
   リンク全体
------------------------------ */

.ect-vertical-card .entry-card-wrap {
  color: inherit;
  text-decoration: none;
}


/* ==================================================
   タブレット
================================================== */

@media screen and (max-width: 834px) {

  .ect-vertical-card {
    gap: 18px;
  }

  .ect-vertical-card .entry-card-title {
    padding: 12px 13px 5px;
    font-size: 15px;
  }

  .ect-vertical-card .entry-card-meta {
    padding: 3px 13px 12px;
  }

}


/* ==================================================
   スマートフォン
================================================== */

@media screen and (max-width: 600px) {

  /* スマホでは1列 */
  .ect-2-columns .entry-card-wrap,
  .ect-3-columns .entry-card-wrap {
    width: 100% !important;
  }

  .ect-vertical-card {
    gap: 16px;
  }

  .ect-vertical-card .entry-card-wrap {
    border-radius: 10px;
  }

  .ect-vertical-card .entry-card-title {
    padding: 11px 13px 5px;
    font-size: 15px;
    line-height: 1.5;
  }

}

/* ==========================================
   LoL対面ナビ：2列崩れ修正
========================================== */

.ect-vertical-card {
  gap: 0 !important;
  justify-content: space-between !important;
}

.ect-vertical-card .entry-card-wrap {
  width: 49% !important;
  margin-bottom: 24px !important;
}

/* スマホでは1列 */
@media screen and (max-width: 600px) {

  .ect-vertical-card .entry-card-wrap {
    width: 100% !important;
    margin-bottom: 16px !important;
  }

}

/* ==========================================
   LoL対面ナビ：ヘッダー＋グローバルナビ
========================================== */

/* ① ヘッダーとナビの間隔を少し詰める */
.header-in {
  padding-bottom: 6px !important;
}

.logo-header {
  margin-bottom: 0 !important;
}


/* ② グローバルナビを整える */
#navi {
  background: #f8f9fc;
  border-top: 1px solid #eef1f5;
  border-bottom: 1px solid #dfe4ec;
}

#navi .navi-in {
  background: transparent;
}


/* メニューリンク */
#navi .navi-in > ul > li > a {
  padding-top: 14px;
  padding-bottom: 14px;
  color: #293246;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}


/* ホバー */
#navi .navi-in > ul > li > a:hover {
  background: #eef2ff;
  color: #405bc2;
}


/* PCのみ */
@media screen and (min-width: 835px) {

  #navi .navi-in > ul {
    min-height: 48px;
  }

}

/* ==========================================
   LoL対面ナビ
   スマホトップ：チャンピオン検索
========================================== */

.mn-mobile-search {
  margin: 14px 12px 18px;
  padding: 16px;
  border: 1px solid #dfe4ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(24, 34, 56, .06);
}

.mn-mobile-search-head {
  margin-bottom: 12px;
}

.mn-mobile-search-label {
  display: block;
  margin-bottom: 3px;
  color: #536fe8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.mn-mobile-search-head strong {
  color: #20293a;
  font-size: 17px;
  font-weight: 800;
}

.mn-mobile-search-form {
  display: flex;
  gap: 7px;
}

.mn-mobile-search-form input {
  min-width: 0;
  flex: 1;
  height: 46px;
  padding: 0 13px;
  border: 1px solid #d8dee8;
  border-radius: 8px;
  background: #f9fafc;
  color: #252c3a;
  font-size: 16px;
  box-sizing: border-box;
}

.mn-mobile-search-form input:focus {
  outline: none;
  border-color: #7185df;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(83, 111, 232, .10);
}

.mn-mobile-search-form button {
  flex: 0 0 auto;
  height: 46px;
  padding: 0 17px;
  border: 0;
  border-radius: 8px;
  background: #182238;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.mn-mobile-search-form button:active {
  transform: translateY(1px);
}

.mn-mobile-search-note {
  margin-top: 8px;
  color: #8a92a0;
  font-size: 11px;
}


/* 念のためPCでは非表示 */
@media screen and (min-width: 835px) {
  .mn-mobile-search {
    display: none !important;
  }
}

/* ==========================================
   LoL対面ナビ：スマホヘッダーをコンパクト化
========================================== */

@media screen and (max-width: 834px) {

  /* キャッチコピーを非表示 */
  .tagline {
    display: none !important;
  }

  /* ヘッダーの高さ・余白を縮小 */
  .header-in {
    min-height: 72px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* サイト名 */
  .logo-header {
    margin: 0 !important;
  }

  .logo-header a {
    font-size: 24px !important;
    line-height: 1.3 !important;
  }

}

@media screen and (max-width: 834px) {

  /* サイト名部分をもう少しコンパクトに */
  .header-in {
    min-height: 58px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .logo-header a {
    font-size: 22px !important;
  }

  /* ロールナビの縦幅も少しだけ縮める */
  #navi .navi-in > ul > li > a {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

}

@media screen and (max-width: 600px) {

  /* スマホの記事タイトルを少しコンパクトに */
  .ect-vertical-card .entry-card-title {
    padding: 10px 12px 4px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* カード同士を少しだけ離す */
  .ect-vertical-card .entry-card-wrap {
    margin-bottom: 18px !important;
  }

}

/* ==========================================
   LoL対面ナビ：スマホ記事本文
========================================== */

@media screen and (max-width: 600px) {

  .article {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .article p {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

}

@media screen and (max-width: 600px) {
  .article p {
    margin-top: 1.2em !important;
    margin-bottom: 1.2em !important;
  }
}

/* ==========================================
   LoL対面ナビ：PCサイドバー検索
========================================== */

.mn-pc-search {
  padding: 20px;
  border: 1px solid #dfe4ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(24, 34, 56, .05);
}

.mn-pc-search-head {
  margin-bottom: 15px;
}

.mn-pc-search-head span {
  display: block;
  margin-bottom: 4px;
  color: #536fe8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.mn-pc-search-head strong {
  display: block;
  color: #20293a;
  font-size: 17px;
  font-weight: 800;
}

.mn-pc-search-form {
  display: flex;
  gap: 7px;
}

.mn-pc-search-form input {
  min-width: 0;
  flex: 1;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #d8dee8;
  border-radius: 7px;
  background: #f9fafc;
  color: #252c3a;
  font-size: 14px;
  box-sizing: border-box;
}

.mn-pc-search-form input:focus {
  outline: none;
  border-color: #7185df;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(83, 111, 232, .10);
}

.mn-pc-search-form button {
  flex-shrink: 0;
  height: 44px;
  padding: 0 15px;
  border: 0;
  border-radius: 7px;
  background: #182238;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mn-pc-search-form button:hover {
  background: #263552;
}

.mn-pc-search-note {
  margin: 9px 0 0 !important;
  color: #8a92a0;
  font-size: 11px;
  line-height: 1.5;
}

.mn-riot-notice {
  max-width: 1000px;
  margin: 0 auto;
  color: #8a92a0;
  font-size: 11px;
  line-height: 1.7;
  text-align: center;
}

.mn-riot-notice p {
  margin: 4px 0;
}

.mn-riot-notice a {
  color: #67748d;
  text-decoration: underline;
}

/* =========================================
   LoL対面ナビ：初心者向けカウンターピックカード
========================================= */

.mn-counter-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin:18px 0 22px;
}

.mn-counter-card{
  min-width:0;
  padding:16px;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #e2e6ed;
  border-radius:12px;
  box-shadow:0 3px 12px rgba(24,34,56,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}

.mn-counter-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(24,34,56,.10);
}

/* カード上部 */
.mn-counter-head{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:13px;
}

.mn-counter-num{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#182238;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1;
}

.mn-counter-name{
  color:#182238;
  font-size:18px;
  font-weight:700;
  line-height:1.4;
}

.mn-counter-badge{
  margin-left:auto;
  padding:4px 8px;
  border-radius:999px;
  background:#effaf6;
  color:#319873;
  font-size:11px;
  font-weight:700;
  line-height:1.3;
  white-space:nowrap;
}

/* おすすめ理由 */
.mn-counter-reason{
  margin-bottom:12px;
  padding:11px 12px;
  background:#f1f4ff;
  border-left:3px solid #536fe8;
  border-radius:8px;
}

.mn-counter-reason span{
  display:block;
  margin-bottom:4px;
  color:#536fe8;
  font-size:11px;
  font-weight:700;
}

.mn-counter-reason strong{
  display:block;
  color:#252c3a;
  font-size:14px;
  font-weight:700;
  line-height:1.55;
}

/* 詳細説明 */
.mn-counter-card p{
  margin:0;
  color:#6f7889;
  font-size:14px;
  line-height:1.75;
}

/* ヨネなど複数ロール用 */
.mn-counter-role{
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 0 10px;
  color:#182238;
  font-size:18px;
  font-weight:700;
}

.mn-counter-role span{
  display:inline-block;
  padding:4px 9px;
  border-radius:6px;
  background:#182238;
  color:#fff;
  font-size:12px;
  font-weight:700;
}

/* タブレット */
@media screen and (max-width:1023px){
  .mn-counter-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* スマホ */
@media screen and (max-width:768px){
  .mn-counter-grid{
    grid-template-columns:1fr;
    gap:10px;
    margin:15px 0 20px;
  }

  .mn-counter-card{
    padding:14px;
  }

  .mn-counter-card:hover{
    transform:none;
  }

  .mn-counter-name{
    font-size:17px;
  }

  .mn-counter-reason{
    padding:10px 11px;
  }

  .mn-counter-reason strong{
    font-size:14px;
  }

  .mn-counter-card p{
    font-size:14px;
    line-height:1.7;
  }

  .mn-counter-role{
    margin-top:18px;
    font-size:17px;
  }
}


/* ==================================================
   LoL対面ナビ｜初心者コラム共通CSS
   .mn-column 内だけに適用
================================================== */

.mn-column {
  --mn-col-main: #2563eb;
  --mn-col-main-soft: #eef4ff;
  --mn-col-text: #202630;
  --mn-col-subtext: #626b78;
  --mn-col-border: #e1e6ed;
  --mn-col-bg: #f7f9fc;
  --mn-col-heading-bg: #f3f6fb;
  --mn-col-danger: #d94747;
  --mn-col-danger-soft: #fff4f4;

  color: var(--mn-col-text);
  line-height: 1.85;
}


/* ==============================
   見出し
============================== */

.mn-column h2 {
  margin: 40px 0 22px !important;
  padding: 12px 16px !important;

  background: var(--mn-col-heading-bg) !important;

  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 4px solid var(--mn-col-main) !important;

  border-radius: 7px !important;
  box-shadow: none !important;

  color: var(--mn-col-text) !important;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.5;
}

.mn-column h3 {
  margin: 32px 0 15px;
  padding: 0;
  background: transparent;
  color: var(--mn-col-text);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
}


/* ==============================
   本文
============================== */

.mn-column p {
  margin: 0 0 18px;
}

.mn-column strong {
  font-weight: 700;
}

.mn-column ul {
  margin: 14px 0 20px;
  padding-left: 1.4em;
}

.mn-column li {
  margin-bottom: 7px;
}


/* ==============================
   10秒チェック
============================== */

.mn-column .mn-column-quick {
  margin: 0 0 34px;
  padding: 22px;
  background: var(--mn-col-bg);
  border: 1px solid var(--mn-col-border);
  border-radius: 14px;
}

.mn-column .mn-column-quick-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.5;
}

.mn-column .mn-column-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 4px 9px;

  background: var(--mn-col-main);
  color: #fff;

  border-radius: 6px;

  font-size: 0.75rem;
  font-weight: 700;
}


/* ==============================
   3つの結論カード
============================== */

.mn-column .mn-column-cards {
  display: grid;
  gap: 10px;
}

.mn-column .mn-column-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 15px 16px;

  background: #fff;
  border: 1px solid var(--mn-col-border);
  border-radius: 10px;
}

.mn-column .mn-column-num {
  flex: 0 0 auto;
  padding-top: 2px;

  color: var(--mn-col-main);

  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.mn-column .mn-column-card strong {
  display: block;
  margin-bottom: 3px;
  line-height: 1.55;
}

.mn-column .mn-column-card p {
  margin: 0;

  color: var(--mn-col-subtext);

  font-size: 0.91rem;
  line-height: 1.65;
}


/* ==============================
   最重要ルール
============================== */

.mn-column .mn-column-rule {
  margin-top: 16px;
  padding: 14px 16px;

  background: var(--mn-col-main-soft);
  border-radius: 9px;

  text-align: center;
  font-weight: 700;
  line-height: 1.7;
}

.mn-column .mn-column-rule em {
  color: var(--mn-col-danger);
  font-style: normal;
}


/* ==============================
   基本・注意ボックス
============================== */

.mn-column .mn-column-note,
.mn-column .mn-column-warning {
  margin: 22px 0;
  padding: 16px 18px;

  border-radius: 9px;

  line-height: 1.75;
}

.mn-column .mn-column-note {
  background: var(--mn-col-main-soft);
  border-left: 4px solid var(--mn-col-main);
}

.mn-column .mn-column-warning {
  background: var(--mn-col-danger-soft);
  border-left: 4px solid var(--mn-col-danger);
}

.mn-column .mn-column-note-label,
.mn-column .mn-column-warning-label {
  display: block;
  margin-bottom: 4px;

  font-size: 0.82rem;
  font-weight: 800;
}

.mn-column .mn-column-warning-label {
  color: var(--mn-col-danger);
}


/* ==============================
   流れ
============================== */

.mn-column .mn-column-flow {
  margin: 22px 0;
  padding: 18px;

  background: var(--mn-col-bg);
  border: 1px solid var(--mn-col-border);
  border-radius: 11px;
}

.mn-column .mn-column-flow-step {
  padding: 10px 12px;

  background: #fff;
  border-radius: 8px;

  text-align: center;
  font-weight: 700;
}

.mn-column .mn-column-flow-arrow {
  padding: 5px 0;

  text-align: center;

  color: var(--mn-col-main);

  font-weight: 800;
}


/* ==============================
   チェックリスト
============================== */

.mn-column .mn-column-check {
  margin: 22px 0;
  padding: 18px;

  background: #fff;
  border: 1px solid var(--mn-col-border);
  border-radius: 12px;
}

.mn-column .mn-column-check-title {
  margin-bottom: 11px;
  font-weight: 700;
}

.mn-column .mn-column-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 10px 0;

  border-bottom: 1px solid #edf0f3;
}

.mn-column .mn-column-check-item:last-of-type {
  border-bottom: 0;
}

.mn-column .mn-column-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 23px;
  width: 23px;
  height: 23px;
  margin-top: 2px;

  background: var(--mn-col-main-soft);
  border-radius: 50%;

  color: var(--mn-col-main);

  font-size: 0.78rem;
  font-weight: 800;
}

.mn-column .mn-column-check p {
  margin: 12px 0 0;

  color: var(--mn-col-subtext);

  font-size: 0.91rem;
}


/* ==============================
   最後のまとめ
============================== */

.mn-column .mn-column-summary {
  display: grid;
  gap: 12px;

  margin: 24px 0;
}

.mn-column .mn-column-summary-item {
  display: flex;
  gap: 16px;

  padding: 17px;

  background: var(--mn-col-bg);
  border: 1px solid var(--mn-col-border);
  border-radius: 11px;
}

.mn-column .mn-column-summary-num {
  flex: 0 0 auto;

  color: var(--mn-col-main);

  font-size: 1.15rem;
  font-weight: 800;
}

.mn-column .mn-column-summary-item strong {
  display: block;
  margin-bottom: 3px;
}

.mn-column .mn-column-summary-item p {
  margin: 0;

  color: var(--mn-col-subtext);

  font-size: 0.91rem;
  line-height: 1.65;
}


/* ==============================
   スマホ
============================== */

@media (max-width: 600px) {

  .mn-column {
    line-height: 1.8;
  }

  .mn-column h2 {
    margin: 34px 0 18px !important;
    padding: 10px 12px !important;

    font-size: 1.18rem;
  }

  .mn-column h3 {
    margin-top: 28px;
    font-size: 1.08rem;
  }

  .mn-column .mn-column-quick {
    padding: 16px;
    border-radius: 11px;
  }

  .mn-column .mn-column-quick-title {
    gap: 8px;
    font-size: 1.05rem;
  }

  .mn-column .mn-column-card {
    gap: 11px;
    padding: 13px;
  }

  .mn-column .mn-column-rule {
    padding: 13px 14px;
    text-align: left;
  }

  .mn-column .mn-column-note,
  .mn-column .mn-column-warning {
    padding: 14px 15px;
  }

  .mn-column .mn-column-flow {
    padding: 14px;
  }

  .mn-column .mn-column-flow-step {
    padding: 9px 10px;
  }

  .mn-column .mn-column-check {
    padding: 15px;
  }

  .mn-column .mn-column-summary-item {
    gap: 12px;
    padding: 14px;
  }
}

/* ==========================================
   関連記事上：初心者コラム
========================================== */

.mn-guide-related {
  margin: 36px 0 32px;
}

.mn-guide-related-title {
  margin: 0 0 18px !important;
  padding: 11px 14px !important;

  background: #f3f6fb !important;
  border: 0 !important;
  border-left: 4px solid #2563eb !important;
  border-radius: 6px !important;

  font-size: 1.25rem !important;
  font-weight: 700;
  line-height: 1.5;
}

.mn-guide-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.mn-guide-related-card {
  display: block;
  overflow: hidden;

  background: #fff;
  border: 1px solid #dfe4eb;
  border-radius: 8px;

  color: #202630 !important;
  text-decoration: none !important;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.mn-guide-related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(0,0,0,.08);
}

.mn-guide-related-thumb {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #eef1f5;
}

.mn-guide-related-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mn-guide-related-body {
  padding: 10px 11px 12px;
}

.mn-guide-related-label {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 6px;

  background: #eef4ff;
  border-radius: 4px;

  color: #2563eb;
  font-size: .7rem;
  font-weight: 700;
}

.mn-guide-related-card-title {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.55;
}


/* スマホ */

@media (max-width: 600px) {

  .mn-guide-related {
    margin: 30px 0 26px;
  }

  .mn-guide-related-title {
    font-size: 1.15rem !important;
  }

  .mn-guide-related-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mn-guide-related-card {
    display: grid;
    grid-template-columns: 130px 1fr;
  }

  .mn-guide-related-thumb {
    height: 100%;
    aspect-ratio: auto;
  }

  .mn-guide-related-body {
    padding: 10px;
  }

}