:root {
  --bm-navy: #102a56;
  --bm-navy-deep: #091a39;
  --bm-teal: #079aaa;
  --bm-yellow: #f5b82e;
  --bm-paper: #f7f6f2;
  --bm-white: #fff;
  --bm-ink: #17233a;
  --bm-muted: #627086;
  --bm-line: #dbe1e7;
  --bm-shell: min(1120px, calc(100% - 40px));
}

.byemo-media-page,
.byemo-media-page #body_wrap { background: var(--bm-paper) !important; color: var(--bm-ink); }
.byemo-media-page .l-content,
.byemo-media-page .l-mainContent,
.byemo-media-page .l-mainContent__inner { width: 100%; max-width: none; margin: 0; padding: 0; }
.bm-main, .bm-main * { box-sizing: border-box; }
.bm-main { font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
.bm-shell { width: var(--bm-shell); margin-inline: auto; }

.bm-hero { position: relative; overflow: hidden; padding: 80px 0 70px; background: var(--bm-navy); color: white; }
.bm-hero::after { position: absolute; right: -5%; bottom: -80px; width: 43%; height: 140px; background: var(--bm-teal); content: ""; transform: rotate(-8deg); }
.bm-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 280px; align-items: end; gap: 50px; }
.bm-eyebrow { margin: 0 0 10px; color: var(--bm-yellow); font-size: .68rem; font-weight: 900; letter-spacing: .2em; }
.bm-hero h1, .bm-archive-head h1 { margin: 0; color: white; font-size: clamp(2.4rem, 5vw, 4.4rem); font-weight: 900; letter-spacing: -.055em; }
.bm-hero__inner > div > p:last-child { max-width: 700px; margin: 19px 0 0; color: #dce5f1; font-size: .9rem; line-height: 1.85; }
.bm-hero__search { display: flex; flex-direction: column; padding: 19px 21px; border-radius: 13px; background: var(--bm-yellow); color: var(--bm-navy); text-decoration: none; transition: transform .18s; }
.bm-hero__search:hover { color: var(--bm-navy); transform: translateY(-3px); }
.bm-hero__search span { font-size: .66rem; font-weight: 700; }
.bm-hero__search strong { margin-top: 4px; font-size: 1rem; }

.bm-categories { border-bottom: 1px solid var(--bm-line); background: white; }
.bm-categories .bm-shell { display: flex; gap: 6px; overflow-x: auto; padding-block: 13px; scrollbar-width: none; }
.bm-categories a { flex: 0 0 auto; padding: 8px 13px; border-radius: 999px; color: var(--bm-muted); font-size: .76rem; font-weight: 800; text-decoration: none; }
.bm-categories a:hover, .bm-categories .is-current { background: var(--bm-navy); color: white; }

.bm-index { padding-block: 78px 96px; }
.bm-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.bm-heading span { color: var(--bm-teal); font-size: .64rem; font-weight: 900; letter-spacing: .18em; }
.bm-heading h2 { margin: 5px 0 0; color: var(--bm-navy); font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 900; letter-spacing: -.04em; }
.bm-heading p { margin: 0; color: var(--bm-muted); font-size: .8rem; }
.bm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bm-card { overflow: hidden; border: 1px solid var(--bm-line); border-radius: 17px; background: white; box-shadow: 0 9px 28px rgba(16,42,86,.07); transition: transform .18s, box-shadow .18s; }
.bm-card:hover { box-shadow: 0 16px 36px rgba(16,42,86,.13); transform: translateY(-4px); }
.bm-card__image { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--bm-navy); }
.bm-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bm-card:hover .bm-card__image img { transform: scale(1.025); }
.bm-card__placeholder { display: grid; width: 100%; height: 100%; place-content: center; background: linear-gradient(135deg, var(--bm-navy), var(--bm-navy-deep)); color: white; text-align: center; }
.bm-card__placeholder b { font-size: 1.55rem; font-style: italic; }
.bm-card__placeholder small { margin-top: 5px; color: var(--bm-yellow); font-size: .55rem; font-weight: 900; letter-spacing: .16em; }
.bm-card__body { padding: 20px; }
.bm-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--bm-muted); font-size: .65rem; }
.bm-card__meta a { padding: 4px 7px; border-radius: 4px; background: #e5f5f5; color: #087b88; font-weight: 800; text-decoration: none; }
.bm-card h2 { margin: 13px 0 9px; font-size: 1.08rem; font-weight: 900; line-height: 1.55; }
.bm-card h2 a { color: var(--bm-navy); text-decoration: none; }
.bm-card__body > p { display: -webkit-box; overflow: hidden; margin: 0; color: var(--bm-muted); font-size: .76rem; line-height: 1.75; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.bm-card__more { display: inline-flex; gap: 10px; margin-top: 16px; color: var(--bm-teal); font-size: .72rem; font-weight: 900; text-decoration: none; }

.bm-empty { padding: 54px; border: 1px solid var(--bm-line); border-radius: 16px; background: white; text-align: center; }
.bm-empty strong { color: var(--bm-navy); font-size: 1.2rem; }
.bm-empty p { color: var(--bm-muted); }
.navigation.pagination { margin-top: 40px; }
.nav-links { display: flex; justify-content: center; gap: 7px; }
.nav-links .page-numbers { display: grid; min-width: 40px; height: 40px; place-items: center; padding: 0 10px; border: 1px solid var(--bm-line); border-radius: 8px; background: white; color: var(--bm-navy); font-size: .76rem; font-weight: 800; text-decoration: none; }
.nav-links .current { border-color: var(--bm-navy); background: var(--bm-navy); color: white; }

.bm-cta { background: var(--bm-teal); color: white; }
.bm-cta__inner { display: flex; min-height: 245px; align-items: center; justify-content: space-between; gap: 40px; }
.bm-cta span { color: var(--bm-yellow); font-size: .65rem; font-weight: 900; letter-spacing: .18em; }
.bm-cta h2 { margin: 8px 0; color: white; font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; letter-spacing: -.045em; }
.bm-cta p { margin: 0; color: #e7f7f8; font-size: .82rem; }
.bm-cta a { flex: 0 0 auto; padding: 16px 21px; border-radius: 11px; background: var(--bm-yellow); color: var(--bm-navy); font-weight: 900; text-decoration: none; }

.bm-archive-head { padding: 65px 0 58px; background: var(--bm-navy); }
.bm-archive-head h1 { font-size: clamp(2rem, 4.5vw, 3.7rem); }
.bm-archive-description { max-width: 700px; margin-top: 16px; color: #dce5f1; font-size: .86rem; line-height: 1.8; }

.bm-article__head { padding: 68px 0 0; background: white; }
.bm-article__narrow { width: min(850px, calc(100% - 40px)); margin-inline: auto; }
.bm-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--bm-muted); font-size: .69rem; }
.bm-article__meta a { padding: 5px 8px; border-radius: 4px; background: #e5f5f5; color: #087b88; font-weight: 800; text-decoration: none; }
.bm-article__head h1 { margin: 18px 0 0; color: var(--bm-navy); font-size: clamp(2rem, 4.6vw, 3.55rem); font-weight: 900; line-height: 1.35; letter-spacing: -.045em; }
.bm-article__lead { margin: 20px 0 0; color: var(--bm-muted); line-height: 1.9; }
.bm-article__visual { width: min(1120px, calc(100% - 40px)); overflow: hidden; margin: 42px auto 0; border-radius: 20px; aspect-ratio: 16 / 8.5; background: var(--bm-navy); }
.bm-article__visual img { width: 100%; height: 100%; object-fit: cover; }
.bm-article__layout { display: grid; grid-template-columns: minmax(0, 760px) 280px; justify-content: center; gap: 56px; padding-block: 62px 92px; }
.bm-article__content { min-width: 0; color: #29364b; font-size: .97rem; line-height: 2; }
.bm-article__content h2 { margin: 2.5em 0 1em; padding-bottom: .55em; border-bottom: 3px solid var(--bm-teal); color: var(--bm-navy); font-size: 1.65rem; line-height: 1.5; }
.bm-article__content h3 { margin: 2.2em 0 .8em; color: var(--bm-navy); font-size: 1.3rem; }
.bm-article__content a { color: var(--bm-teal); font-weight: 700; }
.bm-article__content img { border-radius: 12px; }
.bm-article__content blockquote { margin: 2em 0; padding: 22px; border-left: 4px solid var(--bm-teal); background: white; color: var(--bm-muted); }
.bm-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--bm-line); }
.bm-tags span { color: var(--bm-muted); font-size: .7rem; }
.bm-tags a { padding: 5px 9px; border-radius: 999px; background: white; font-size: .7rem; text-decoration: none; }
.bm-article__aside { align-self: start; position: sticky; top: 28px; }
.bm-aside-cta { padding: 23px; border-radius: 17px; background: var(--bm-navy); color: white; }
.bm-aside-cta > span { color: var(--bm-yellow); font-size: .62rem; font-weight: 900; letter-spacing: .17em; }
.bm-aside-cta strong { display: block; margin-top: 10px; font-size: 1.08rem; line-height: 1.65; }
.bm-aside-cta p { color: #dce5f1; font-size: .73rem; line-height: 1.7; }
.bm-aside-cta a { display: block; margin-top: 17px; padding: 11px; border-radius: 8px; background: var(--bm-yellow); color: var(--bm-navy); font-size: .75rem; font-weight: 900; text-align: center; text-decoration: none; }
.bm-related { padding-bottom: 96px; }
.bm-grid--related .bm-card__body > p { display: none; }

@media (max-width: 900px) {
  .bm-grid { grid-template-columns: repeat(2, 1fr); }
  .bm-article__layout { grid-template-columns: 1fr; }
  .bm-article__aside { position: static; }
}

@media (max-width: 600px) {
  :root { --bm-shell: min(100% - 28px, 1120px); }
  .bm-hero { padding: 58px 0 48px; }
  .bm-hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .bm-hero__search { width: 100%; }
  .bm-index { padding-block: 58px 72px; }
  .bm-heading { display: block; }
  .bm-heading p { margin-top: 10px; }
  .bm-grid { grid-template-columns: 1fr; }
  .bm-cta__inner { display: block; padding-block: 48px; text-align: center; }
  .bm-cta a { display: block; margin-top: 24px; }
  .bm-article__head { padding-top: 48px; }
  .bm-article__narrow, .bm-article__visual { width: calc(100% - 28px); }
  .bm-article__visual { margin-top: 30px; border-radius: 12px; aspect-ratio: 16 / 10; }
  .bm-article__layout { gap: 35px; padding-block: 42px 70px; }
  .bm-article__content { font-size: .91rem; }
  .bm-article__content h2 { font-size: 1.4rem; }
}