.btn-primary {
    background-image:none;
    background-color: #ddd4c9;
    border:none;
    color: #303030;
    text-shadow:none;
    font-weight:regular;
}

.btn-primary:hover {
    background-image:none;
    background-color: #ddd4c9;
    border:#999;
    box-shadow:2px 2px 3px #999;
    color: #303030;
    text-shadow:none;
    font-weight:regular;
    transition:0.3s;
}


body{ background:#fff; font-family: 'Noto Sans JP', sans-serif; }
.panel{ margin-bottom:50px; }
.col-sm-4{ display:none; }















/* 既存のチャプター装飾 */
.liststyle { list-style:none; margin-left:-20px;}
.liststyle a {
  color: #303030;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding-bottom: -10px;
}
.liststyle a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000000;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.liststyle a:hover::after {
  opacity: 1;
}

/* ▼進捗バーの見た目 */
.mw-progress{
  padding:10px 15px 15px;
  background:#ffffff;
  margin:10px 0 15px;
  border-radius:6px;
}
.mw-progress-label{
  font-size:14px;
  margin-bottom:6px;
  color:#555;
}
.mw-progress-bar{
  width:100%;
  height:8px;
  background:#e3ded5;
  border-radius:999px;
  overflow:hidden;
}
.mw-progress-bar-inner{
  height:100%;
  width:0%;
  /* 好きな色に変えてOK */
  background:#c46a5a;
  transition:width .3s ease;
}
.mw-progress-text{
  margin-top:6px;
  font-size:13px;
  color:#555;
}
/* ▲進捗バー */




/* =========================
   進捗一覧（マイページ用）
========================= */
/* 全体ラッパ（横幅調整したい時だけ使う） */
#mw-progress-dashboard {
  max-width: 100％;
  padding:5%;
  margin: 0 auto;
}

/* カテゴリー見出し部分（Shopifyコース / WordPressコース） */
.mw-category {
  padding: 6px 12px 0;
}

.mw-category-title-row {
  font-size: 22px;
  font-weight: 600;
  color: #555;
  margin: 40px 0 6px;
}

/* レッスン行本体 */
.mw-category-lessons {
  margin-bottom: 20px;
}

.mw-progress-row {
  padding: 10px 10px;
  border-bottom:1px solid #aaa;
}

/* タイトル｜バー｜％ を横並びに */
.mw-row-main {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) 80px;
  column-gap: 16px;
  align-items: center;
  font-size: 14px;
}

.mw-col.title {
  white-space: nowrap;
}

.mw-col.bar .mw-progress-bar {
  width: 100%;
  height: 8px;
  background: #e3ded5;
  border-radius: 999px;
  overflow: hidden;
}

.mw-col.bar .mw-progress-bar-inner {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: #c46a5a; /* ゴールド系カラー */
  transition: width 0.3s ease;
}

.mw-col.percent {
  text-align: right;
  font-size: 13px;
}

/* 通常の％表示 */
.mw-progress-percent {
  font-weight: 600;
}

/* 100％ or completed=true のとき：クラウンに置き換え */
.mw-progress-percent.is-complete {
  position: relative;
  padding-left: 30px;
  color: #c6a667;
}

.mw-progress-percent.is-complete::before {
  content: "👑";
  position: absolute;
  left: 0;
  top: 40%;
  transform: translateY(-50%);
  font-size: 22px;
}
/* スマホ表示用レイアウト調整 */
@media (max-width: 768px) {

  /* タイトル｜バー｜％ の並び方をスマホ用に変更 */
  .mw-row-main {
    grid-template-columns: minmax(0, 1fr) 80px; /* 1列目=バー, 2列目=% */
    grid-template-rows: auto auto;
    grid-template-areas:
      "title  title"   /* 1行目：タイトルのみ（2列ぶち抜き） */
      "bar    percent";/* 2行目：バー＋％ */
    row-gap: 4px;
  }

  .mw-col.title {
    grid-area: title;
    white-space: normal;   /* スマホでは折り返しOKにする */
  }

  .mw-col.bar {
    grid-area: bar;
  }

  .mw-col.percent {
    grid-area: percent;
  }
}