/* /membership-site-development/ 会員サイトのCMS v5 (2026-09-25)
   Bootstrap 3（html font-size:10px）環境のため文字サイズは px。すべて .msd5 の中に閉じる。 */
.msd5 {
  --ink: #232629; --sub: #5d636a; --line: #dde1e5; --soft: #f5f6f7;
  --navy: #1f2d44; --btn: #d9481b;
  --c-mukaeru: #4f8a16;  --t-mukaeru: #eef5e4;
  --c-miseru: #1f6aa5;   --t-miseru: #e6f0f8;
  --c-todokeru: #b85f12; --t-todokeru: #fbefe3;
  --c-shiru: #6a4fa3;    --t-shiru: #efebf7;
  --c-mamoru: #46566a;   --t-mamoru: #eceff3;
  color: var(--ink); font-size: 16px; line-height: 1.85;
}
.msd5 * { box-sizing: border-box; }
.msd5 a { color: #1d6fa5; }
.msd5 .m5-in--wide { max-width: 1280px; width: auto; }
.msd5 .m5-sec { padding: 72px 0; }
.msd5 .m5-h2 { font-size: 34px; font-weight: 800; line-height: 1.35; margin: 0 0 18px; text-align: left; letter-spacing: -.005em; }
.msd5 .m5-lead { margin: 0 0 36px !important; text-align: left; color: #3a4047; }
.msd5 .m5-btn { display: inline-block; padding: 14px 40px; border-radius: 999px; background: var(--btn); color: #fff !important; font-size: 16px; font-weight: 700; text-decoration: none !important; line-height: 1.4; }
.msd5 .m5-btn:hover { opacity: .88; }

/* サイト共通CSS（Bootstrap 3・unify）の影響を受けないための土台 */
.msd5 { display: block; width: 100%; text-align: left; }
.msd5 section, .msd5 aside, .msd5 article, .msd5 div { box-sizing: border-box; float: none; }
.msd5 h1, .msd5 h2, .msd5 h3, .msd5 p, .msd5 ul, .msd5 ol, .msd5 li, .msd5 dl, .msd5 dt, .msd5 dd { margin: 0; padding: 0; border: 0; background: none; text-transform: none; font-family: inherit; }
.msd5 h1, .msd5 h2, .msd5 h3 { color: var(--ink); }
.msd5 li::before, .msd5 li::after { content: none; }
.msd5 small { font-size: inherit; }
.msd5 p, .msd5 li, .msd5 dd, .msd5 dt, .msd5 span, .msd5 small { color: inherit; }
.msd5 a:hover, .msd5 a:focus { text-decoration: none; }
.msd5 .m5-in { width: auto; max-width: 1170px; margin: 0 auto; padding: 0 20px; }
.msd5 .m5-in--wide { max-width: 1170px; }
.msd5 .m5-in::before, .msd5 .m5-in::after { content: none; }
.msd5 p { margin: 0 0 12px; }
.msd5 ul, .msd5 ol { margin: 0; padding: 0; list-style: none; }

/* 印 */
.msd5 .m5-mk { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1; flex: none; }
.msd5 .m5-mk--plain { border: 1.5px solid #b9c0c7; background: #fff; }
.msd5 .m5-mk--tpl { background: #fff4d6; color: #8a5a00; border: 1.5px solid #e2b24a; }
.msd5 .m5-mk--cond { background: #fde8e8; color: #a33; border: 1.5px solid #e59a9a; }

/* チップ */
.msd5 .m5-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.7; margin: 0 4px 4px 0; }
.msd5 .m5-chip--mukaeru { background: var(--t-mukaeru); color: var(--c-mukaeru); }
.msd5 .m5-chip--miseru { background: var(--t-miseru); color: var(--c-miseru); }
.msd5 .m5-chip--todokeru { background: var(--t-todokeru); color: var(--c-todokeru); }
.msd5 .m5-chip--shiru { background: var(--t-shiru); color: var(--c-shiru); }
.msd5 .m5-chip--mamoru { background: var(--t-mamoru); color: var(--c-mamoru); }

/* 印 */

/* ヒーロー */
.msd5 .m5-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #7a8591; margin: 0 0 14px !important; }
.msd5 .m5-hero { padding: 72px 0 56px; background: #fff; border-bottom: 1px solid var(--line); }
.msd5 .m5-hero__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.msd5 .m5-hero__h1 { font-size: 64px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 24px; }
.msd5 .m5-hero__lead { font-size: 18px; line-height: 1.9; color: #3a4047; margin: 0 0 32px !important; max-width: 34em; }
.msd5 .m5-hero__act { display: flex; align-items: center; gap: 28px; margin: 0 !important; }
.msd5 .m5-btn { background: var(--navy); border-radius: 6px; padding: 14px 28px; font-size: 15px; letter-spacing: .04em; }
.msd5 .m5-hero__jump { font-size: 15px; font-weight: 700; color: var(--ink) !important; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.msd5 .m5-hero__jump::after { content: " ↓"; }
.msd5 .m5-hero__stat { border-left: 1px solid var(--line); padding-left: 40px; }
.msd5 .m5-stat__nums { display: flex; gap: 40px; margin-bottom: 22px; }
.msd5 .m5-stat__nums p { margin: 0 !important; }
.msd5 .m5-stat__nums strong { display: block; font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.msd5 .m5-stat__nums span { display: block; font-size: 13px; color: var(--sub); margin-top: 8px; }
.msd5 .m5-stat__legend li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 10px 32px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.msd5 .m5-stat__legend li .m5-mk { position: absolute; left: 0; top: 11px; }
.msd5 .m5-stat__legend li small { display: block; font-size: 12px; color: var(--sub); }
.msd5 .m5-stat__legend li b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* 全体マップ */
.msd5 .m5-map { background: var(--soft); padding: 72px 0 64px; }
.msd5 .m5-map__head { margin: 0 0 28px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 48px; align-items: end; }
.msd5 .m5-map__head .m5-eyebrow { grid-column: 1 / -1; }
.msd5 .m5-map__h2 { font-size: 34px; font-weight: 800; line-height: 1.35; margin: 0; letter-spacing: -.005em; }
.msd5 .m5-map__lead { font-size: 15px; color: #4a5058; margin: 0 !important; line-height: 1.85; }
.msd5 .m5-map__panel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(20,30,50,.06), 0 12px 32px rgba(20,30,50,.06); overflow: hidden; }
.msd5 .m5-mapcol { padding: 0 0 12px; border-left: 1px solid #eceef1; }
.msd5 .m5-mapcol:first-child { border-left: 0; }
.msd5 .m5-mapcol .m5-mapcol__head { padding: 22px 22px 16px; border-top: 4px solid; }
.msd5 .m5-mapcol__top { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px !important; }
.msd5 .m5-mapcol__name { font-size: 21px; font-weight: 800; letter-spacing: .02em; }
.msd5 .m5-mapcol__n { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.msd5 .m5-mapcol__q { font-size: 13px; color: var(--sub); line-height: 1.6; margin: 0 !important; min-height: 42px; }
.msd5 .m5-mapcol__list { padding: 0 22px; }
.msd5 .m5-mapcol__list li a { display: block; position: relative; padding: 10px 0 10px 28px; border-top: 1px solid #f0f1f3; color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.6; }
.msd5 .m5-mapcol__list li a:hover, .msd5 .m5-mapcol__list li a:focus { text-decoration: none; background: #fafbfc; }
.msd5 .m5-mapcol__list li a:hover .m5-it { text-decoration: underline; text-underline-offset: 3px; }
.msd5 .m5-mapcol__list .m5-mk { position: absolute; left: 0; top: 12px; width: 18px; height: 18px; font-size: 11px; }
.msd5 .m5-mapcol__list small { display: block; font-size: 12px; color: var(--sub); line-height: 1.55; margin-top: 2px; }
.msd5 .m5-mapcol--mukaeru .m5-mapcol__head { border-color: var(--c-mukaeru); } .msd5 .m5-mapcol--mukaeru .m5-mapcol__n { color: var(--c-mukaeru); }
.msd5 .m5-mapcol--miseru .m5-mapcol__head { border-color: var(--c-miseru); } .msd5 .m5-mapcol--miseru .m5-mapcol__n { color: var(--c-miseru); }
.msd5 .m5-mapcol--todokeru .m5-mapcol__head { border-color: var(--c-todokeru); } .msd5 .m5-mapcol--todokeru .m5-mapcol__n { color: var(--c-todokeru); }
.msd5 .m5-mapcol--shiru .m5-mapcol__head { border-color: var(--c-shiru); } .msd5 .m5-mapcol--shiru .m5-mapcol__n { color: var(--c-shiru); }
.msd5 .m5-mapcol--mamoru .m5-mapcol__head { border-color: var(--c-mamoru); } .msd5 .m5-mapcol--mamoru .m5-mapcol__n { color: var(--c-mamoru); }
.msd5 .m5-map__foot { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; margin: 18px 0 0 !important; font-size: 13px; color: var(--sub); }
.msd5 .m5-map__foot > span { display: inline-flex; align-items: center; gap: 8px; }
.msd5 .m5-map__foot .m5-map__more { margin-left: auto; }

/* 3つの構成 */
.msd5 .m5-arch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; align-items: stretch; }
.msd5 .m5-arch__p { border: 1px solid var(--line); border-radius: 10px; padding: 22px 22px 10px; background: #fff; position: relative; }
.msd5 .m5-arch__p h3 { font-size: 18px; font-weight: 700; margin: 0 0 12px; line-height: 1.5; }
.msd5 .m5-arch__p dt { font-size: 12px; font-weight: 700; color: var(--sub); }
.msd5 .m5-arch__p dd { margin: 0 0 12px; font-size: 15px; line-height: 1.75; }
.msd5 .m5-arch__p.m5-is-ww { border: 2px solid var(--navy); }
.msd5 .m5-arch__tag { position: absolute; top: -13px; left: 20px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 12px; border-radius: 999px; margin: 0 !important; }
.msd5 .m5-arch__note { margin: 0 !important; }
.msd5 .m5-arch__note .m5-mk { vertical-align: -3px; }

/* 9つの決めること */
.msd5 .m5-decide { background: var(--soft); }
.msd5 .m5-qs { display: grid; gap: 14px; }
.msd5 .m5-q { display: grid; grid-template-columns: 270px 1fr; background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.msd5 .m5-q__head { padding: 22px 22px; border-left: 6px solid; }
.msd5 .m5-q__grp { font-size: 12px; font-weight: 700; margin: 0 0 4px !important; }
.msd5 .m5-q__title { font-size: 20px; font-weight: 800; margin: 0 0 8px; line-height: 1.45; }
.msd5 .m5-q__ask { font-size: 14px; color: var(--sub); margin: 0 !important; line-height: 1.7; }
.msd5 .m5-q__body { padding: 22px 26px 12px; font-size: 15px; line-height: 1.85; }
.msd5 .m5-q__ww { background: var(--soft); border-left: 3px solid var(--navy); padding: 12px 16px; margin: 4px 0 12px; border-radius: 0 6px 6px 0; }
.msd5 .m5-q__ww strong { color: var(--navy); }
.msd5 .m5-q__note { font-size: 13.5px; color: var(--sub); line-height: 1.7; }
.msd5 .m5-q__note span { display: inline-block; font-size: 11.5px; font-weight: 700; border: 1px solid #c6ccd2; border-radius: 4px; padding: 0 6px; margin-right: 8px; color: #4a5058; }
.msd5 .m5-q__note--warn span { border-color: #e59a9a; color: #a33; }
.msd5 .m5-q__rel { font-size: 13.5px; }
.msd5 .m5-q--mukaeru .m5-q__head { border-color: var(--c-mukaeru); } .msd5 .m5-q--mukaeru .m5-q__grp { color: var(--c-mukaeru); }
.msd5 .m5-q--miseru .m5-q__head { border-color: var(--c-miseru); } .msd5 .m5-q--miseru .m5-q__grp { color: var(--c-miseru); }
.msd5 .m5-q--todokeru .m5-q__head { border-color: var(--c-todokeru); } .msd5 .m5-q--todokeru .m5-q__grp { color: var(--c-todokeru); }
.msd5 .m5-q--shiru .m5-q__head { border-color: var(--c-shiru); } .msd5 .m5-q--shiru .m5-q__grp { color: var(--c-shiru); }
.msd5 .m5-q--mamoru .m5-q__head { border-color: var(--c-mamoru); } .msd5 .m5-q--mamoru .m5-q__grp { color: var(--c-mamoru); }

/* 紺帯 */
.msd5 .m5-band { background: var(--navy); color: #fff; padding: 72px 0; }
.msd5 .m5-h2--inv { color: #fff; }
.msd5 .m5-band__grid { display: grid; grid-template-columns: 1fr 48px 1fr; gap: 16px; align-items: center; margin: 30px 0 26px; }
.msd5 .m5-band__col { border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 22px 24px; align-self: stretch; }
.msd5 .m5-band__col--ww { background: #fff; color: var(--ink); border-color: #fff; }
.msd5 .m5-band__h { font-size: 17px; font-weight: 800; margin-bottom: 10px !important; }
.msd5 .m5-band__col li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.7; margin-bottom: 6px; }
.msd5 .m5-band__col li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .6; }
.msd5 .m5-band__arrow { font-size: 30px; text-align: center; opacity: .8; }
.msd5 .m5-band__close { text-align: left; margin: 0 !important; font-size: 16px; }

/* 事例 */
.msd5 .m5-cases__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.msd5 .m5-case a { display: flex; flex-direction: column; height: 100%; padding: 18px 18px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; background: #fff; }
.msd5 .m5-case a:hover { border-color: #9aa4b0; }
.msd5 .m5-case__ind { font-size: 12px; color: var(--sub); margin: 0 0 2px !important; }
.msd5 .m5-case__who { font-size: 19px; font-weight: 800; line-height: 1.4; margin: 0 0 8px !important; }
.msd5 .m5-case__what { font-size: 13.5px; line-height: 1.7; color: #3d4247; flex: 1; }
.msd5 .m5-chips { margin: 6px 0 0 !important; }

/* 運用の困りごと */
.msd5 .m5-probs { background: var(--soft); }
.msd5 .m5-probs__list { display: grid; gap: 10px; }
.msd5 .m5-prob a { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.msd5 .m5-prob a:hover { border-color: #9aa4b0; }
.msd5 .m5-prob__t { font-size: 17px; font-weight: 700; margin: 0 !important; grid-column: 1; }
.msd5 .m5-prob__lead { font-size: 13.5px; color: var(--sub); margin: 0 !important; grid-column: 1; line-height: 1.7; }
.msd5 .m5-prob .m5-chips { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0 !important; text-align: right; }
.msd5 .m5-more-link { text-align: left; margin-top: 18px !important; font-size: 14px; }

/* さらに調べる・CTA */
.msd5 .m5-next__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 44px; }
.msd5 .m5-next__list a { display: block; padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; font-weight: 700; text-decoration: none; font-size: 15px; line-height: 1.6; }
.msd5 .m5-next__list a span { display: block; font-size: 12px; font-weight: 400; color: var(--sub); }
.msd5 .m5-cta { text-align: center; background: var(--soft); border-radius: 12px; padding: 34px 20px; }

/* レスポンシブ */
@media (max-width: 1199px) {
  .msd5 .m5-map__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .msd5 .m5-mapcol:nth-child(4) { border-left: 0; }
  .msd5 .m5-mapcol:nth-child(n+4) { border-top: 1px solid #eceef1; }
  .msd5 .m5-hero__h1 { font-size: 52px; }
}
@media (max-width: 991px) {
  .msd5 .m5-hero__grid, .msd5 .m5-map__head { grid-template-columns: 1fr; gap: 36px; }
  .msd5 .m5-map__head { gap: 12px; }
  .msd5 .m5-hero__stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 28px; }
  .msd5 .m5-map__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msd5 .m5-mapcol:nth-child(odd) { border-left: 0; } .msd5 .m5-mapcol:nth-child(4) { border-left: 1px solid #eceef1; }
  .msd5 .m5-mapcol:nth-child(n+3) { border-top: 1px solid #eceef1; }
  .msd5 .m5-cases__grid { grid-template-columns: repeat(2, 1fr); }
  .msd5 .m5-arch__grid { grid-template-columns: 1fr; gap: 22px; }
  .msd5 .m5-q { grid-template-columns: 1fr; }
  .msd5 .m5-q__head { border-left-width: 0; border-top: 5px solid; }
  .msd5 .m5-next__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .msd5 .m5-hero { padding: 44px 0 36px; }
  .msd5 .m5-hero__h1 { font-size: 38px; }
  .msd5 .m5-hero__lead { font-size: 16px; }
  .msd5 .m5-hero__act { flex-wrap: wrap; gap: 16px 24px; }
  .msd5 .m5-stat__nums strong { font-size: 48px; }
  .msd5 .m5-map { padding: 48px 0; }
  .msd5 .m5-map__h2 { font-size: 25px; }
  .msd5 .m5-map__panel { grid-template-columns: 1fr; }
  .msd5 .m5-mapcol { border-left: 0 !important; border-top: 1px solid #eceef1; }
  .msd5 .m5-mapcol:first-child { border-top: 0; }
  .msd5 .m5-mapcol__q { min-height: 0; }
  .msd5 .m5-map__foot .m5-map__more { margin-left: 0; }
  .msd5 { font-size: 15px; }
  .msd5 .m5-sec, .msd5 .m5-band { padding: 48px 0; }
  .msd5 .m5-h2 { font-size: 23px; }
  .msd5 .m5-cases__grid, .msd5 .m5-next__list { grid-template-columns: 1fr; }
  .msd5 .m5-band__grid { grid-template-columns: 1fr; }
  .msd5 .m5-band__arrow { transform: rotate(90deg); }
  .msd5 .m5-prob a { grid-template-columns: 1fr; }
  .msd5 .m5-prob .m5-chips { grid-column: 1; grid-row: auto; text-align: left; margin-top: 6px !important; }
}

.msd5 .m5-eyebrow--inv { color: #9fb0c8; }
@media (max-width: 767px) { .msd5 .m5-h2 { font-size: 25px; } }

/* 紺帯：サイト共通CSSの p・li の文字色に負けないよう明示 */
.msd5 .m5-band p, .msd5 .m5-band li, .msd5 .m5-band .m5-band__h { color: #fff; }
.msd5 .m5-band .m5-band__col li { color: #e6ebf2; }
.msd5 .m5-band .m5-band__close { color: #d5dce6; }
.msd5 .m5-band .m5-eyebrow--inv { color: #9fb0c8; }
.msd5 .m5-band .m5-band__col--ww p, .msd5 .m5-band .m5-band__col--ww li, .msd5 .m5-band .m5-band__col--ww .m5-band__h { color: var(--ink); }

/* 本文の段落は内枠の幅いっぱいに流す（途中で折り返さない） */
.msd5 .m5-lead, .msd5 .m5-band__close, .msd5 .m5-arch__note { max-width: none; }