.mv {
  background-image:url('../img/m-bg.webp');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  height:541px;
}
.mv .container {
  padding:0;
  position:relative;
  width:100%;
  height:100%;
  margin: 0 auto;
}
.mv-title, .mv-catch2 {
  position: absolute;
  left:18%;
  text-shadow:
  1px 1px 0 #fff,
 -1px 1px 0 #fff,
  1px -1px 0 #fff,
 -1px -1px 0 #fff,
  1px 0 0 #fff,
 -1px 0 0 #fff,
  0 1px 0 #fff,
  0 -1px 0 #fff;
  z-index: 2;
}
.mv-subtitle {
  position: absolute;
  top:10%;
  left:18%;
  display:inline-flex;
  align-items:center;
  gap:2px;
  background:#1f9d55;
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  padding:7px 20px 7px 12px;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(46,168,213,.22);
  z-index:3;
}
.mv-subtitle svg {
  width:20px;
  height:20px;
  fill:currentColor;
  flex:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.15));
  opacity:.95;
}
.mv-title {
  top:18%;
  font-size:4.5rem;
  font-weight:900;
  color:#0a2d4a;
  line-height:1.2;
  margin-bottom:10px;
}
.mv-catch2 {
  max-width: 540px;
  top:50%;
  font-size:1rem;
  color:#0a2d4a;
  font-weight: 500;
  margin:0;
  padding:0;
}
.mv-catch2 {
  top:36%;
}
.mv-person {
  position:absolute;
  inset:0;
  z-index:1;
}
.mv-person img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
#cat-kusuri, #cat-supple, #cat-taisaku {
  scroll-margin-top:90px!important;
}
@media (min-width: 901px) and (max-width: 1366px) {
  .mv-subtitle, .mv-title {
    left: 10%;
  }
}
@media (max-width:900px) {
  .mv {
    height:500px;
  }
  .mv-subtitle {
    font-size:.75rem;
    padding:6px 18px 6px 10px;
  }
  .mv-title {
    font-size:3.5rem;
  }
  .mv-title, .mv-catch2, .mv-subtitle {
    left:10%;
  }
}
@media(max-width:680px) {
  .mv {
    height:auto;
    min-height:0;
  }
  .mv-person {
    position:relative;
    z-index:1;
  }
  .mv-person img {
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
  }
  .mv-subtitle {
    top:8%;
    left:12%;
    font-size:3vw;
  }
  .mv-title {
    top:15%;
    left:10%;
    width:auto;
    white-space:normal;
    font-size:15vw;
    line-height:1.15;
  }
  .mv-catch2 {
    font-size:4vw;
    top:40%;
    left:11%;
    width:76%;
  }
  .sbk {
    display: block;
  }
}
.ranking-hub {
  max-width:900px;
  margin:0 auto;
}
.ranking-hub-cat-h {
  font-size:1.08rem;
  font-weight:800;
  color:#15303c;
  margin:30px 0 14px;
  padding-left:12px;
  border-left:4px solid #2EA8D5;
}
.ranking-hub-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
}
.ranking-hub-card {
  position:relative;
  display:block;
  min-height:135px;
  padding:18px 20px 18px 65px;
  background:#fff;
  border:1px solid #e2eef4;
  border-radius:14px;
  text-decoration:none;
  overflow:hidden;
  transition:border-color .15s,transform .12s,box-shadow .12s;
}
.ranking-hub-card:hover {
  border-color:#9ed3e8;
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(26,111,149,.09);
}
.rh-cat {
  display:block;
  margin-bottom:4px;
  font-size:.78rem;
  font-weight:800;
  color:#2EA8D5;
  letter-spacing:.02em;
}
.rh-title {
  display:block;
  font-size:1.15rem;
  font-weight:800;
  color:#15303c;
  line-height:1.35;
  margin:6px 0;
}
.rh-desc {
  display:block;
  max-width:95%;
  font-size:.85rem;
  line-height:1.65;
  color:#546d7c;
  font-weight: 700;
}
.rh-title, .rh-desc {
  text-shadow:
  1px 1px 0 #fff,
 -1px 1px 0 #fff,
  1px -1px 0 #fff,
 -1px -1px 0 #fff,
  1px 0 0 #fff,
 -1px 0 0 #fff,
  0 1px 0 #fff,
  0 -1px 0 #fff;
}
.rh-go {
  display:block;
  margin-top:8px;
  font-size:.85rem;
  font-weight:800;
  color:#1a7fa8;
}
.ranking-hub-card--primary {
  border-color:#2EA8D5;
  border-width:2px;
}
.ranking-hub-card::before {
  content:"";
  position:absolute;
  left:16px;
  top:16px;
  width:40px;
  height:40px;
  background-image:url("/img/icons-R2.webp");
  background-repeat:no-repeat;
  background-size:285px auto;
}
.ranking-hub-card::after {
  content:"";
  position:absolute;
  top:10%;
  right:5%;
  width:130px;
  height:90px;
  background-image:url("/img/icons-R3.webp");
  background-repeat:no-repeat;
  background-size:680px 215px;
  z-index:0;
  pointer-events:none;
  transform:none;
}
.ranking-hub-card > span {
  position:relative;
  z-index:1;
}
@media (min-width: 901px) and (max-width: 1366px) {
  .ranking-hub-grid {
    gap:6px;
  }
  .ranking-hub-card {
    padding:12px 10px 16px 65px;
  }
}
@media(max-width:900px) {
  .ranking-hub-grid {
    gap:2px;
  }
  .ranking-hub-card {
    min-height: 200px;
    padding:12px 4px 16px 50px;
  }
  .ranking-hub-card::before {
    left:5px;
    top:12px;
  }
  .habatume {
    letter-spacing: -.12rem;
  }
  .ranking-hub-card::after {
    content:"";
    top:80%;
    transform:translateY(-50%);
    width:120px;
    height:90px;
    background-size:680px 215px;
  }
}
@media(max-width:680px) {
  .ranking-hub-grid {
    gap:18px;
  }
  .ranking-hub-card {
    min-height: 190px;
    padding:12px 4px 24px 50px;
  }
  .ranking-hub-grid {
    grid-template-columns:1fr;
  }
  .habatume {
    letter-spacing: -.05rem;
  }
}
.card-kusuri::before {background-position:0 0;}
.card-nonsleep::before {background-position:0 -144px;}
.card-prescription::before {background-position:-96px 0;}
.card-compare::before {background-position:0 -48px;}
.card-shindan::before {background-position:-95px -95px;}
.card-supple::before {background-position:-48px 0;}
.card-guide::before {background-position:-95px -47px;}
.card-free::before {background-position:-192px 0;}
.card-mask::before {background-position:-143px -46px;}
.card-air::before {background-position:-143px -95px;}
.card-taisaku::before {background-position:-244px 0;}
.card-kusuri::after {background-position:-10px 0;}
.card-nonsleep::after {background-position:-368px 0;}
.card-prescription::after {background-position:-260px 0;}
.card-compare::after {background-position:-502px 0;}
.card-shindan::after {background-position:0 -86px;}
.card-supple::after {background-position:-135px -0;}
.card-guide::after {background-position:-385px -80px;}
.card-free::after {background-position:-135px -95px;}
.card-mask::after {background-position:0 -150px;}
.card-air::after {background-position:-520px -80px;}
.card-taisaku::after {background-position:-265px -82px;}