@charset "utf-8";
.column-page {
  color: #252525;
}
.column-article-page {
  background: #fff !important;
  background-image: none !important;
}
.column-page * {
  box-sizing: border-box;
}
.column-contents {
  padding-bottom: 70px !important;
}
.column-main {
  text-align: left;
  background: transparent;
}
.column-main img {
  max-width: 100%;
  height: auto;
}
.column-main #path {
  margin-bottom: 18px;
}
.column-hero {
  position: relative;
  overflow: hidden;
  margin-top: 30px;
  margin-bottom: 42px;
  padding: 36px 46px;
  color: #092b59;
  background:
    radial-gradient(circle at 90% 15%, rgba(10, 58, 121, .06) 0 90px, transparent 91px), linear-gradient(135deg, #f6f8fb 0%, #e7eef6 100%);
  border: 1px solid #d7e1ec;
  border-radius: 4px;
}
.column-hero::after {
  content: "";
  position: absolute;
  right: 35px;
  bottom: -48px;
  width: 160px;
  height: 160px;
  border: 28px solid rgba(10, 58, 121, .05);
  border-radius: 50%;
}
.column-hero__eyebrow, .column-section-title > p {
  margin-bottom: 8px;
  color: #0a4f94;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .16em;
}
.column-hero h2 {
  margin-bottom: 18px;
  font-size: 36px;
  font-weight: bold;
  line-height: 1.3;
}
.column-hero > p:last-child {
  position: relative;
  z-index: 1;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.9;
}
.column-section-title {
  margin-bottom: 18px;
}
.column-section-title h2 {
  padding-left: 14px;
  border-left: 5px solid #0a3a79;
  font-size: 25px;
  font-weight: bold;
  line-height: 1.4;
}
.column-category-section + .column-category-section {
  margin-top: 30px;
}
.column-card {
  margin-bottom: 4px;
}
.column-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: opacity .2s ease;
}
.column-card__link:hover {
  opacity: .82;
}
.column-card__body {
  padding: 6px 2px 8px;
}
.column-card__meta {
  margin-bottom: 4px;
  padding-left: 18px;
  color: #66707a;
  font-size: 12px;
}
.column-card h3 {
  position: relative;
  margin-bottom: 0;
  padding-left: 18px;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.55;
}
.column-card h3::before {
  content: "▶";
  position: absolute;
  top: .15em;
  left: 0;
  color: #0a4f94;
  font-size: .62em;
}
.column-cv {
  margin-top: 34px;
}
.column-cv a, .column-cv img {
  display: block;
  width: 100%;
}
.column-cv a {
  transition: opacity .2s ease;
}
.column-cv a:hover {
  opacity: .86;
}
.article-cv {
  margin: 12px 0 0;
  scroll-margin-top: 20px;
}
.column-article {
  overflow: hidden;
  background: #fff;
  border: 0;
  box-shadow: none;
}
.article-wide-header {
  margin-top: 46px;
  margin-bottom: 22px;
  padding: 0 0 24px;
  background: #fff;
  border: 0;
  box-shadow: none;
}
.article-header__category {
  display: inline-block;
  padding: 5px 12px;
  color: #fff;
  background: #0a4f94;
  font-size: 12px;
  font-weight: bold;
}
.article-wide-header h2 {
  margin-bottom: 14px;
  font-size: 29px;
  font-weight: bold;
  line-height: 1.5;
  text-shadow: none;
}
.article-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #737b84;
  font-size: 12px;
  text-align: left;
}
.article-main-image {
  height: 390px;
  background: #e8edf2;
}
.article-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-content-image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto 24px;
}
.article-lead, .article-section, .article-toc {
  margin-right: 0;
  margin-left: 0;
}
.article-lead {
  padding: 30px 0 10px;
}
.column-article p, .column-article li, .column-article dd {
  font-size: 16px;
  line-height: 2;
}
.column-article p {
  margin-bottom: 20px;
}
.bike-key-article .article-lead > p, .bike-key-article .article-section > p {
  text-align: left !important;
}
.article-toc {
  margin-top: 24px;
  margin-bottom: 44px;
  padding: 24px 28px;
  background: #f3f6f9;
  border-top: 3px solid #0a4f94;
}
.article-toc__title {
  margin-bottom: 14px !important;
  color: #092b59;
  font-size: 20px !important;
  font-weight: bold;
}
.article-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.article-toc ol ol {
  margin: 4px 0 0 18px;
}
.article-toc ol ol li {
  padding-left: 18px;
  counter-increment: none;
}
.article-toc ol ol li::before {
  content: "・";
  font-size: 16px;
  line-height: 1.6;
}
.article-toc li {
  position: relative;
  padding: 7px 0 7px 34px;
  border-bottom: 1px solid #dce2e8;
  counter-increment: toc;
  line-height: 1.6;
}
.article-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: #0a3a79;
  font-size: 12px;
  font-weight: bold;
}
.article-toc a {
  color: #234e7e;
  text-decoration: none;
}
.article-section {
  margin-bottom: 52px;
  scroll-margin-top: 20px;
}
.article-section > h2 {
  margin: 0 0 24px;
  padding: 14px 18px;
  color: #fff;
  background: #092b59;
  border-left: 0;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
}
.article-section > h3 {
  margin: 34px 0 18px;
  padding: 0 0 10px;
  border-left: 0;
  border-bottom: 2px solid #0a3a79;
  font-size: 21px;
  font-weight: bold;
  line-height: 1.55;
}
.article-section > h4 {
  margin: 26px 0 14px;
  padding: 10px 14px;
  color: #092b59;
  background: #eef3f8;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
}
.article-steps {
  margin: 24px 0 30px;
  border: 0;
  background: none !important;
  background-image: none !important;
}
.article-steps li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 8px;
  border: 0;
  background: none !important;
  background-image: none !important;
  line-height: 1.6;
}
.article-steps li::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
  background: none !important;
  background-image: none !important;
}
.article-steps li::after {
  content: "" !important;
  position: absolute;
  top: 32px;
  bottom: -32px;
  left: 23px;
  display: block !important;
  width: 2px;
  background: #9eb4cc !important;
}
.article-steps li:last-child::after {
  content: none !important;
  display: none !important;
}
.article-step__number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  height: 32px;
  color: #fff;
  background: #0a3a79;
  border-radius: 50%;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(9, 43, 89, .2);
}
.article-step__body {
  flex: 1;
  background: none !important;
  background-image: none !important;
}
.article-step__body strong {
  display: block;
  padding: 1px 0 7px;
  color: #0a4f94;
  border-bottom: 1px solid #0a3a79;
  background: none !important;
  background-image: none !important;
  font-size: 17px;
  line-height: 1.45;
}
.article-step__body small {
  display: block;
  padding-top: 7px;
  color: #4c5965;
  background: none !important;
  background-image: none !important;
  font-size: 14px;
  line-height: 1.7;
}
.article-photo-row {
  display: grid;
  grid-template-columns: 46% 1fr;
  gap: 24px;
  align-items: center;
  margin: 28px 0 36px;
  padding: 20px;
  background: #f5f7f9;
}
.article-photo-row figure img {
  display: block;
}
.article-photo-row p {
  margin-bottom: 0;
}
.article-note__label {
  color: #0a4f94;
  font-weight: bold;
}
.article-table-wrap {
  overflow-x: auto;
  margin: 26px 0;
  -webkit-overflow-scrolling: touch;
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.7;
}
.article-table th, .article-table td {
  padding: 13px 14px;
  border: 1px solid #bfcbd7;
  text-align: left;
  vertical-align: top;
}
.article-table thead th {
  color: #fff;
  background: #0a4f94;
  text-align: center;
  font-weight: bold;
}
.article-table tbody th {
  width: 135px;
  color: #092b59;
  background: #fff;
  font-weight: bold;
}
.sliding-door-cost-table {
  table-layout: fixed;
}
.sliding-door-cost-table thead th:first-child {
  width: 52%;
}
.sliding-door-cost-table thead th:nth-child(2) {
  width: 18%;
}
.sliding-door-cost-table thead th:nth-child(3) {
  width: 30%;
}
.safe-trouble-table {
  table-layout: fixed;
}
.safe-trouble-table thead th:first-child {
  width: 42%;
}
.safe-trouble-table thead th:nth-child(2) {
  width: 35%;
}
.safe-trouble-table thead th:nth-child(3) {
  width: 23%;
}
.master-key-cost-table {
  table-layout: fixed;
}
.master-key-cost-table thead th:first-child {
  width: 22%;
}
.master-key-cost-table thead th:nth-child(2) {
  width: 30%;
}
.door-guard-cost-table {
  table-layout: fixed;
}
.door-guard-cost-table thead th:first-child {
  width: 38%;
}
.door-guard-cost-table thead th:nth-child(2) {
  width: 22%;
}
.key-creation-cost-table {
  table-layout: fixed;
}
.key-cost-factor-table thead th:first-child {
  width: 34%;
}
.key-cost-home-table thead th:first-child,
.key-cost-vehicle-table thead th:first-child {
  width: 30%;
}
.key-cost-home-table thead th:nth-child(2),
.key-cost-vehicle-table thead th:nth-child(2) {
  width: 27%;
}
.key-type-image-table {
  table-layout: fixed;
}
.key-type-image-table thead th:first-child {
  width: 24%;
}
.key-type-image-table thead th:nth-child(2),
.key-type-image-table .article-table__image-cell {
  width: 116px;
}
.key-type-image-table .article-table__image-cell {
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  background: #f7f9fb;
}
.key-type-image-table .article-table-image {
  width: 90px;
  height: 90px;
}
.key-cost-locker-table thead th:first-child {
  width: 31%;
}
.key-cost-locker-table thead th:nth-child(2) {
  width: 25%;
}
.key-cost-safe-table thead th:first-child {
  width: 52%;
}
.key-cost-provider-table thead th:first-child {
  width: 19%;
}
.key-cost-provider-table thead th:nth-child(2) {
  width: 20%;
}
.key-cost-provider-table thead th:nth-child(3) {
  width: 16%;
}
.key-cost-store-table thead th:first-child {
  width: 25%;
}
.key-cost-store-table thead th:nth-child(2) {
  width: 22%;
}
.article-table-image {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  object-fit: cover;
}
.solution-table thead th:first-child {
  width: 100px;
}
.solution-table thead th:nth-child(2) {
  width: 225px;
}
.bike-key-cost-table {
  table-layout: fixed;
}
.bike-key-cost-table thead th {
  text-align: left;
}
.bike-key-cost-table thead th:first-child {
  width: 40%;
}
.bike-key-cost-table thead th:nth-child(2) {
  width: 35%;
}
.bike-key-cost-table thead th:nth-child(3) {
  width: 25%;
}
.bike-key-cost-table tbody th {
  width: auto;
}
.article-case-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
  margin: 20px 0 38px;
}
.article-case-card__photo {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  color: #52677d;
  background: #eef3f8;
  border: 1px solid #c9d5e1;
  font-size: 15px;
  font-weight: bold;
}
.article-case-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-case-card__photo picture {
  display: block;
  width: 100%;
  height: 100%;
}
.article-case-card__details {
  min-width: 0;
}
.article-case-card__details .article-table-wrap {
  height: 100%;
  margin: 0;
}
.article-case-card__details .article-table {
  height: 100%;
  table-layout: fixed;
}
.article-case-card__details .article-table th:last-child, .article-case-card__details .article-table td:last-child {
  width: 31%;
}
.article-case-card__details .article-table tbody td:first-child {
  text-align: left;
  vertical-align: middle;
}
.article-case-card__details .article-table td:last-child {
  text-align: center;
  vertical-align: middle;
}
.article-case-card__details .article-table a {
  color: #0a4f94;
  font-weight: bold;
  text-decoration: underline;
}
.article-checklist {
  margin: 22px 0 28px;
  padding: 0;
  background: none;
  border: 0;
}
.article-checklist li {
  position: relative;
  padding: 5px 0 5px 28px;
  line-height: 1.7;
}
.article-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #0a3a79;
  font-weight: bold;
}
.article-summary p {
  margin-bottom: 20px;
  color: #252525;
  font-size: 16px;
  line-height: 2;
}
.article-summary p:last-child {
  margin-bottom: 0;
}
.lost-key-list {
  margin: 18px 0 26px;
  padding: 0;
  list-style: none;
}
.lost-key-list li {
  position: relative;
  padding: 6px 0 6px 25px;
  line-height: 1.8;
}
.lost-key-list li::before {
  content: "・";
  position: absolute;
  left: 3px;
  color: #0a4f94;
  font-weight: bold;
}
.article-price-link, .lost-key-location-table a {
  color: #0a4f94;
  font-weight: bold;
  text-decoration: underline;
}
.locksmith-choice-article a.article-inline-link,
.suzuki-key-loss-article a.article-inline-link,
.sliding-door-lock-article a.article-inline-link {
  color: #0000ee;
  font-weight: inherit;
  text-decoration: underline;
}
.dimple-key-loss-article a.dimple-key-choice-link {
  color: #0000ee;
  font-weight: inherit;
  text-decoration: underline;
}
.locksmith-choice-table tbody th {
  width: 210px;
  text-align: left;
}
.lost-key-comparison-table th, .lost-key-comparison-table td {
  vertical-align: middle;
}
.lost-key-comparison-table tbody th {
  text-align: left;
}
.lost-key-comparison-table .article-table__image-cell {
  width: 110px;
  min-height: 80px;
  background: #f7f9fb;
}
.lost-key-location-table tbody td {
  text-align: center;
}
.dimple-key-cost-table {
  table-layout: fixed;
}
.dimple-key-cost-table thead th:first-child {
  width: 65%;
}
.dimple-key-cost-table thead th:nth-child(2) {
  width: 35%;
}
.dimple-key-cost-table tbody th {
  width: auto;
}
.bmw-key-cost-table {
  table-layout: fixed;
}
.bmw-key-cost-table thead th:first-child {
  width: 65%;
}
.bmw-key-cost-table thead th:nth-child(2) {
  width: 35%;
}
.bmw-key-cost-table tbody th {
  width: auto;
}
.bmw-case-summary-table {
  min-width: 0;
  table-layout: fixed;
}
.bmw-case-summary-table tbody th {
  width: 24%;
  vertical-align: middle;
}
.bmw-case-summary-table tbody td {
  vertical-align: middle;
}
.bmw-key-flow .article-step__body > h3 {
  margin: 0;
  padding: 1px 0 7px;
  color: #0a4f94;
  border-bottom: 1px solid #0a3a79;
  font-weight: bold;
  font-size: 17px;
  line-height: 1.45;
}
.bmw-key-flow .article-step__body > p,
.bmw-key-flow .article-step__body > ul {
  margin-bottom: 0;
  padding-top: 7px;
}
.bmw-key-flow .lost-key-list > li {
  display: block;
  gap: 0;
}
.bmw-key-flow .lost-key-list > li::before {
  content: "・" !important;
  display: block !important;
}
.bmw-key-flow .lost-key-list > li::after {
  content: none !important;
  display: none !important;
}
.lost-key-cost-article .article-section .article-cv {
  margin-top: 34px;
  margin-bottom: 10px;
}
.cost-factors {
  min-width: 540px;
}
.cost-factors tbody th, .cost-factors tbody td {
  text-align: left;
  vertical-align: middle;
}
.lost-key-cost-article .cost-factors .article-table__image-cell {
  width: 150px;
}
.lost-key-cost-article .cost-factors .article-table-image {
  width: 120px;
  height: 120px;
}
.article-back {
  margin: 0 !important;
  padding: 25px;
  text-align: center;
}
.article-back a {
  color: #0a4f94;
  font-weight: bold;
}
@media screen and (max-width: 640px) {
  .column-page > header {
    height: auto;
    min-height: 75px;
  }
  .column-page #menu {
    clear: both;
  }
  .column-page #menu .dl-menu {
    display: none;
    position: static;
    top: auto;
    left: auto;
    margin-top: 71px;
    opacity: 0;
    transform: none;
  }
  .column-page #menu .dl-menu.dl-menuopen {
    display: block;
    position: relative;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .column-contents {
    width: 100% !important;
    padding: 0 4% 45px !important;
  }
  .column-main {
    float: none !important;
    width: 100% !important;
    padding-bottom: 25px !important;
  }
  .column-contents > aside {
    display: none;
  }
  .column-hero {
    margin-top: 16px;
    margin-bottom: 30px;
    padding: 26px 24px;
  }
  .column-hero h2 {
    font-size: 28px !important;
  }
  .column-card__link {
    display: block;
  }
  .column-card__body {
    padding: 5px 1px 7px;
  }
  .column-card h3 {
    font-size: 18px;
  }
  .column-cv {
    margin-top: 24px;
  }
  .article-wide-header {
    position: relative;
    z-index: 1;
    margin-top: 16px;
    margin-bottom: 18px;
    padding: 0 0 18px;
    background: #fff;
  }
  .article-wide-header h2 {
    position: static;
    margin: 0 0 12px;
    font-size: 20px !important;
    line-height: 1.6 !important;
  }
  .article-main-image {
    position: relative;
    z-index: 0;
    margin-top: 0;
    height: auto;
    aspect-ratio: 16 / 11;
  }
  .article-lead, .article-section, .article-toc {
    margin-right: 0;
    margin-left: 0;
  }
  .column-article p, .column-article li, .column-article dd {
    font-size: 15px;
    line-height: 1.9;
  }
  .article-summary p {
    font-size: 16px;
    line-height: 1.9;
  }
  .column-article #contact p {
    font-size: 16px;
    line-height: 1.9;
  }
  .article-toc {
    padding: 20px 15px;
  }
  .article-toc li {
    padding-left: 28px;
  }
  .article-toc ol ol {
    margin-left: -28px;
  }
  .article-section > h2 {
    margin-right: 0;
    margin-left: 0;
    padding: 13px 15px;
    font-size: 21px !important;
  }
  .article-section > h3 {
    font-size: 19px !important;
  }
  .article-section > h4 {
    font-size: 17px !important;
  }
  .article-photo-row {
    display: block;
  }
  .article-photo-row figure {
    margin-bottom: 16px;
  }
  .article-case-card {
    display: block;
    margin-bottom: 34px;
  }
  .article-case-card__photo {
    max-width: 320px;
    margin: 0 auto 16px;
  }
  .article-case-card__photo--sp-landscape {
    max-width: none;
    aspect-ratio: 600 / 335;
  }
  .article-case-card__details .article-table {
    min-width: 0;
  }
  .article-case-card__details .article-table tbody td:first-child {
    text-align: left;
    vertical-align: top;
  }
  .article-table {
    min-width: 620px;
    font-size: 14px;
  }
  .bmw-key-cost-table {
    min-width: 0;
  }
  .master-key-cost-table {
    min-width: 0;
    font-size: 13px;
  }
  .master-key-cost-table th, .master-key-cost-table td {
    padding: 9px 7px;
    overflow-wrap: anywhere;
  }
  .door-guard-cost-table {
    min-width: 0;
    font-size: 13px;
  }
  .door-guard-cost-table th, .door-guard-cost-table td {
    padding: 9px 7px;
    overflow-wrap: anywhere;
  }
  .key-creation-cost-table {
    min-width: 0;
    font-size: 12px;
  }
  .key-creation-cost-table th, .key-creation-cost-table td {
    padding: 7px 5px;
    overflow-wrap: anywhere;
  }
  .key-type-image-table {
    font-size: 11px;
  }
  .key-type-image-table thead th:first-child {
    width: 24%;
  }
  .key-type-image-table thead th:nth-child(2),
  .key-type-image-table .article-table__image-cell {
    width: 52px;
  }
  .key-type-image-table .article-table__image-cell {
    padding: 4px;
  }
  .key-type-image-table .article-table-image {
    width: 44px;
    height: 44px;
  }
  .bmw-case-summary-table tbody th {
    width: 28%;
  }
  .locksmith-choice-table tbody th {
    width: 190px;
  }
  .cost-factors {
    width: 540px;
    min-width: 540px;
    table-layout: fixed;
    font-size: 12px;
  }
  .cost-factors th, .cost-factors td {
    padding: 8px 6px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .cost-factors thead th:first-child {
    width: 110px;
  }
  .cost-factors thead th:nth-child(2) {
    width: 64px;
  }
  .cost-factors thead th:nth-child(3) {
    width: 100px;
  }
  .cost-factors .article-table-image {
    width: 40px;
    height: 40px;
  }
  .lost-key-comparison-table {
    min-width: 520px;
  }
  .lost-key-location-table {
    min-width: 0;
  }
  .lost-key-comparison-table .article-table__image-cell {
    width: 64px;
    min-width: 64px;
  }
  .lost-key-cost-article .cost-factors thead th:nth-child(2), .lost-key-cost-article .cost-factors .article-table__image-cell {
    width: 92px;
    min-width: 92px;
  }
  .lost-key-cost-article .cost-factors .article-table-image {
    width: 60px;
    height: 60px;
  }
}
.article-supervisor {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 45px 0;
  padding: 24px;
  background: #f7f9fb;
  border: 1px solid #d9e1ea;
  border-left: 5px solid #2fb8ff;
}
.article-supervisor__image {
  flex: 0 0 90px;
}
.article-supervisor__image img {
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}
.article-supervisor__body {
  flex: 1;
}
.article-supervisor__title {
  margin: 0 0 10px !important;
  color: #0089c7;
  font-size: 18px !important;
  font-weight: bold;
  line-height: 1.5;
}
.article-supervisor__title strong {
  font-weight: bold;
}
.article-supervisor__text {
  margin: 0 !important;
  color: #333;
  line-height: 1.9;
}
@media screen and (max-width:640px) {
  .article-supervisor {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    text-align: left;
  }
  .article-supervisor__image {
    flex: 0 0 70px;
    margin: 0;
  }
  .article-supervisor__image img {
    width: 70px;
    height: 70px;
  }
  .article-supervisor__body {
    flex: 1;
  }
  .article-supervisor__title {
    margin-bottom: 6px !important;
    font-size: 15px !important;
    line-height: 1.5;
  }
  .article-supervisor__text {
    margin: 0 !important;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
  }
}
.article-rating {
  margin: 40px 0;
  padding: 14px 24px;
  background: #f8f8f5;
  border: 1px solid #e4e4dd;
}

.article-rating__title {
  margin: 0 0 14px !important;
  font-size: 20px;
  font-weight: bold;
  color: #0a3a79;
}

.article-rating__row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.article-rating__row:last-child {
  margin-bottom: 0;
}

.article-rating__label {
  width: 180px;
  font-weight: bold;
}

.article-rating__score {
  display: flex;
  gap: 2px;
  margin-left: 10px;
  line-height: 1;
}

.article-rating__score span {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  transform: none;
  font-size: 20px;
  line-height: 1;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.article-rating__score .on {
  color: #0a4f94;
}

.article-rating__score .off {
  color: #d7dde5;
}

/* 半分の星 */
.article-rating__score .half {
  position: relative;
  color: #d7dde5;
}

.article-rating__score .half::before {
  content: "★";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: #0a4f94;
}

.article-rating__num {
  margin-left: 12px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
  white-space: nowrap;
  line-height: 1;
}

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

  .article-rating {
    padding: 16px;
  }

  .article-rating__title {
    margin-bottom: 12px !important;
    font-size: 18px;
  }

  .article-rating__row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 8px;
  }

  .article-rating__label {
    width: 140px;
    margin-bottom: 0;
    flex-shrink: 0;
    font-size: 14px;
  }

  .article-rating__score {
    margin-left: 8px;
    gap: 2px;
    line-height: 1;
  }

  .article-rating__score span {
    font-size: 17px;
    line-height: 1;
  }

  .article-rating__num {
    margin-left: 8px;
    font-size: 13px;
    white-space: nowrap;
    line-height: 1;
  }

}
.article-toc > ol {
  counter-reset: toc-circle;
}
.article-toc > ol > li.toc-circle {
  counter-increment: toc-circle;
  position: relative;
  padding-left: 37px;
}
.article-toc > ol > li.toc-circle::before {
  position: absolute;
  left: 0px;
  top: 11px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a4f94;
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
}
.article-toc > ol > li.toc-circle:nth-child(1)::before {
  content: "1" !important;
}
.article-toc > ol > li.toc-circle:nth-child(2)::before {
  content: "2" !important;
}
.article-toc > ol > li.toc-circle:nth-child(3)::before {
  content: "3" !important;
}
.article-toc > ol > li.toc-circle:nth-child(4)::before {
  content: "4" !important;
}
.article-toc > ol > li.toc-circle:nth-child(5)::before {
  content: "5" !important;
}
.article-toc > ol > li.toc-circle:nth-child(6)::before {
  content: "6" !important;
}
.article-toc > ol > li.toc-circle:nth-child(7)::before {
  content: "7" !important;
}
.article-toc > ol > li.toc-circle:nth-child(8)::before {
  content: "8" !important;
}
.article-toc > ol > li.toc-circle:nth-child(9)::before {
  content: "9" !important;
}
.article-toc > ol > li.toc-circle:nth-child(10)::before {
  content: "10" !important;
}
.article-toc > ol > li.toc-circle > ol > li::before {
  content: "・" !important;
  background: none;
  color: inherit;
  width: auto;
  height: auto;
  border-radius: 0;
  display: block;
  left: 0;
  top: 4px;
  font-size: 14px;
  font-weight: normal;
}

.price-note {
  margin-top: 8px;
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.8;
  color: #8f8f8f;
  text-align: left;
}

.key-repair-article a.article-inline-link {
  color: #0000ee;
  font-weight: inherit;
  text-decoration: underline;
}