@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* ---------------------------------------------------------------- */
/* reset */
/* ---------------------------------------------------------------- */
body,
div,
ul, ol, li,
di, dt, dd,
h1, h2, h3, h4, h5, h6,
pre,
form, fieldset, input, textarea, figure,
p, blockquote,
th, td, dl, dt, dd {
  margin: 0;
  padding: 0;
}

body, button, input, optgroup, select, textarea, th, td, tr, p {
  font-family: 'Noto Sans JP', "Yu Gothic", YuGothic, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
  font-size: 14px;
  line-height: 1.7;
}

ul, ol, li {
  list-style: none;
}

img {
  border: none;
  vertical-align: bottom;
}

.clf:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
  visibility: hidden;
}

* {
  box-sizing: border-box;
  word-break: break-word;
}

/* ---------------------------------------------------------------- */
header {
  background-color: #000000;
}
header div {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0.65rem;
}
@media screen and (max-width: 767px) {
  header div {
    margin: 0;
  }
}
header img {
  display: block;
  width: 18%;
}
@media screen and (max-width: 767px) {
  header img {
    width: 30%;
  }
}

.contents {
  color: #000000;
}
.contents a {
  text-decoration: none;
}
.contents img {
  width: 100%;
  max-width: 100%;
  height: auto;
}
.contents .u-min {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
}
.contents .c-ttl {
  font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "MS P明朝", "MS PMincho", serif;
  text-align: center;
  position: relative;
}
@media screen and (min-width: 768px) {
  .contents .c-ttl {
    padding-bottom: 30px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .c-ttl {
    padding-bottom: 2.0833333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .c-ttl {
    padding-bottom: 8vw;
  }
}
.contents .c-ttl::after {
  position: absolute;
  content: '';
  display: block;
  background-color: #000;
  height: 1px;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
@media screen and (min-width: 768px) {
  .contents .c-ttl::after {
    width: 44px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .c-ttl::after {
    width: 3.0555555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .c-ttl::after {
    width: 11.7333333333vw;
  }
}
.contents .c-ttl span {
  display: block;
}
@media screen and (min-width: 768px) {
  .contents .c-ttl-sub {
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .c-ttl-sub {
    font-size: 1.6666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .c-ttl-sub {
    font-size: calc((40 / 750) * 100vw);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
}
@media screen and (min-width: 768px) {
  .contents .c-ttl-sub {
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .c-ttl-sub {
    margin-bottom: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .c-ttl-sub {
    margin-bottom: 4vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .c-ttl-main {
    font-size: 40px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .c-ttl-main {
    font-size: 2.7777777778vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .c-ttl-main {
    font-size: calc((56 / 750) * 100vw);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-kv {
    margin-bottom: 70px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-kv {
    margin-bottom: 4.8611111111vw;
  }
}
.contents .p-kv__ttl {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .contents .p-kv__ttl {
    background: linear-gradient(to right, #E5EDF7 0%, #E7E8E9 100%);
  }
}
@media screen and (min-width: 768px) {
  .contents .p-kv__ttl img {
    max-width: 1440px;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-link {
    margin-bottom: 70px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-link {
    margin-bottom: 4.8611111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-link {
    margin-bottom: 10.6666666667vw;
  }
}
.contents .p-link__list {
  display: flex;
}
@media screen and (min-width: 768px) {
  .contents .p-link__list {
    justify-content: center;
    column-gap: 2px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-link__list {
    column-gap: 0.1388888889vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-link__list {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 0.2666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-link__list-item {
    width: 248px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-link__list-item {
    width: 17.2222222222vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-link__list-item {
    width: 49.8666666667%;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-link__list-item.item04 a {
    padding-top: 20px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-link__list-item.item04 a {
    padding-top: 1.3888888889vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-link__list-item.item04 a {
    padding-top: 6.4vw;
  }
}
.contents .p-link__list-item a {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #5fa1b7;
  position: relative;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .contents .p-link__list-item a {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-link__list-item a {
    font-size: 0.9722222222vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-link__list-item a {
    font-size: calc((28 / 750) * 100vw);
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-link__list-item a {
    height: 81px;
    padding-top: 12px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-link__list-item a {
    height: 5.625vw;
    padding-top: 0.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-link__list-item a {
    height: 21.7333333333vw;
    padding-top: 3.2vw;
  }
}
.contents .p-link__list-item a::after {
  position: absolute;
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u35180852/pc/comparison/refa_lock_series/css/../img/ic-arrow-wh.png);
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .contents .p-link__list-item a::after {
    width: 14px;
    height: 8px;
    bottom: 12px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-link__list-item a::after {
    width: 0.9722222222vw;
    height: 0.5555555556vw;
    bottom: 0.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-link__list-item a::after {
    width: 2.6666666667vw;
    height: 1.6vw;
    bottom: 3.7333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__ttl {
    margin-bottom: 70px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__ttl {
    margin-bottom: 4.8611111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__ttl {
    margin-bottom: 13.3333333333vw;
  }
}
.contents .p-lineup__bg {
  background-repeat: no-repeat;
  background-size: cover;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__bg {
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u35180852/pc/comparison/refa_lock_series/css/../img/bg-lineup.jpg);
    padding: 68px 0 80px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__bg {
    padding: 4.7222222222vw 0 5.5555555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__bg {
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u35180852/pc/comparison/refa_lock_series/css/../img/bg-lineup-sp.jpg);
    padding: 13.3333333333vw 0;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item.item01 .p-lineup__item-ttl, .contents .p-lineup__item.item03 .p-lineup__item-ttl {
    white-space: nowrap;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item.item01 .box, .contents .p-lineup__item.item03 .box {
    margin-left: auto;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item.item02 .p-lineup__item-ttl, .contents .p-lineup__item.item03 .p-lineup__item-ttl, .contents .p-lineup__item.item04 .p-lineup__item-ttl {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 106px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item.item02 .p-lineup__item-ttl, .contents .p-lineup__item.item03 .p-lineup__item-ttl, .contents .p-lineup__item.item04 .p-lineup__item-ttl {
    height: 7.3611111111vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item-ttl {
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item-ttl {
    font-size: 1.5277777778vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item-ttl {
    font-size: calc((44 / 750) * 100vw);
    line-height: 1.8;
    letter-spacing: 0.08em;
    font-weight: 500;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item-ttl {
    text-align: center;
    margin-bottom: 24px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item-ttl {
    margin-bottom: 1.6666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item-ttl {
    padding-left: 8.5333333333vw;
    margin-bottom: 4.8vw;
    padding-right: 7.4666666667vw;
  }
}
.contents .p-lineup__item-wrap {
  display: flex;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item-wrap {
    justify-content: center;
    column-gap: 12px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item-wrap {
    column-gap: 0.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item-wrap {
    flex-direction: column;
  }
}
.contents .p-lineup__item .box {
  background-color: #fff;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box {
    width: 325px;
    padding-bottom: 25px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box {
    width: 22.5694444444vw;
    padding-bottom: 1.7361111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box {
    width: 92vw;
    padding-bottom: 6.6666666667vw;
  }
}
.contents .p-lineup__item .box img {
  display: block;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box img {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box img {
    margin-bottom: 1.0416666667vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box img {
    margin-bottom: 4.4vw;
  }
}
.contents .p-lineup__item .box-category {
  display: flex;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-category {
    padding: 0 15px;
    margin-bottom: 10px;
    column-gap: 6px;
    row-gap: 5px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-category {
    padding: 0 1.0416666667vw;
    margin-bottom: 0.6944444444vw;
    column-gap: 0.4166666667vw;
    row-gap: 0.3472222222vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-category {
    padding: 0 4vw;
    margin-bottom: 2.4vw;
    column-gap: 1.4666666667vw;
    row-gap: 1.4666666667vw;
  }
}
.contents .p-lineup__item .box-category li {
  color: #5fa1b7;
  border: 1px solid #5fa1b7;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-category li {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-category li {
    font-size: 0.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-category li {
    font-size: calc((24 / 750) * 100vw);
    line-height: 1;
    letter-spacing: 0em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-category li {
    padding: 5px 8px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-category li {
    padding: 0.3472222222vw 0.5555555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-category li {
    padding: 1.3333333333vw 2.1333333333vw;
  }
}
.contents .p-lineup__item .box-ttl {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-ttl {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-ttl {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-ttl {
    font-size: calc((32 / 750) * 100vw);
    line-height: 1.6;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-ttl {
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-ttl {
    margin-bottom: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-ttl {
    margin-bottom: 4vw;
  }
}
.contents .p-lineup__item .box-price {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-price {
    font-size: 20px;
    line-height: 1;
    letter-spacing: 0.04em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-price {
    font-size: 1.3888888889vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-price {
    font-size: calc((40 / 750) * 100vw);
    line-height: 1;
    letter-spacing: 0.04em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-price {
    margin-bottom: 16px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-price {
    margin-bottom: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-price {
    margin-bottom: 4vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-price-yen {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-price-yen {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-price-yen {
    font-size: calc((32 / 750) * 100vw);
    line-height: 1.25;
    letter-spacing: 0.04em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-price-tax {
    font-size: 17px;
    line-height: 1.1764705882;
    letter-spacing: 0.04em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-price-tax {
    font-size: 1.1805555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-price-tax {
    font-size: calc((34 / 750) * 100vw);
    line-height: 1.1764705882;
    letter-spacing: 0.04em;
    font-weight: 400;
  }
}
.contents .p-lineup__item .box-btn {
  display: flex;
  align-items: center;
  background-color: #000;
  color: #fff;
  position: relative;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-btn {
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-btn {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-btn {
    font-size: calc((32 / 750) * 100vw);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-btn {
    width: 200px;
    height: 54px;
    padding-left: 27px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-btn {
    width: 13.8888888889vw;
    height: 3.75vw;
    padding-left: 1.875vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-btn {
    width: 53.3333333333vw;
    height: 14.4vw;
    padding-left: 7.2vw;
  }
}
.contents .p-lineup__item .box-btn::after {
  position: absolute;
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u35180852/pc/comparison/refa_lock_series/css/../img/ic-arrow-wh.png);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__item .box-btn::after {
    width: 15px;
    height: 9px;
    right: 27px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__item .box-btn::after {
    width: 1.0416666667vw;
    height: 0.625vw;
    right: 1.875vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__item .box-btn::after {
    width: 4vw;
    height: 2.4vw;
    right: 7.2vw;
  }
}
.contents .p-lineup__wrap {
  display: flex;
}
@media screen and (min-width: 768px) {
  .contents .p-lineup__wrap {
    justify-content: center;
    column-gap: 12px;
    margin-top: 60px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-lineup__wrap {
    column-gap: 0.8333333333vw;
    margin-top: 4.1666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-lineup__wrap {
    flex-direction: column;
    margin-top: 9.6vw;
    row-gap: 9.6vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-series {
    padding: 70px 0 60px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series {
    padding: 4.8611111111vw 0 4.1666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series {
    padding: 13.3333333333vw 0;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-series__ttl {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__ttl {
    margin-bottom: 2.0833333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__ttl {
    margin-bottom: 6.6666666667vw;
  }
}
.contents .p-series__lead {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contents .p-series__lead {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__lead {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__lead {
    font-size: calc((28 / 750) * 100vw);
    line-height: 1.6;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-series__lead {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__lead {
    margin-bottom: 2.0833333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__lead {
    margin-bottom: 6.6666666667vw;
  }
}
.contents .p-series__tabwrap {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .contents .p-series__tabwrap {
    margin-bottom: 48px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__tabwrap {
    margin-bottom: 3.3333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__tabwrap {
    margin-bottom: 8.9333333333vw;
  }
}
.contents .p-series__tab {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  color: #aeb6c5;
  border: 1px solid #aeb6c5;
  border-right: none;
}
@media screen and (min-width: 768px) {
  .contents .p-series__tab {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__tab {
    font-size: 0.9722222222vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__tab {
    font-size: calc((22 / 750) * 100vw);
    line-height: 1.5;
    letter-spacing: 0em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-series__tab {
    width: 135px;
    height: 73px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__tab {
    width: 9.375vw;
    height: 5.0694444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__tab {
    width: 23.2vw;
    height: 20.1333333333vw;
  }
}
.contents .p-series__tab::after {
  position: absolute;
  content: '';
  display: none;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 99%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
@media screen and (min-width: 768px) {
  .contents .p-series__tab::after {
    width: 15px;
    height: 8px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__tab::after {
    width: 1.0416666667vw;
    height: 0.5555555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__tab::after {
    width: 4vw;
    height: 2vw;
  }
}
.contents .p-series__tab.is-active {
  color: #fff;
  font-weight: 600;
}
.contents .p-series__tab.is-active::after {
  display: block;
}
.contents .p-series__tab.tab01.is-active {
  background-color: #f5bf56;
  border-color: #f5bf56;
}
.contents .p-series__tab.tab01.is-active::after {
  background-color: #f5bf56;
}
.contents .p-series__tab.tab02.is-active {
  background-color: #e3928d;
  border-color: #e3928d;
}
.contents .p-series__tab.tab02.is-active::after {
  background-color: #e3928d;
}
.contents .p-series__tab.tab03.is-active {
  background-color: #dbb886;
  border-color: #dbb886;
}
.contents .p-series__tab.tab03.is-active::after {
  background-color: #dbb886;
}
.contents .p-series__tab.tab04 {
  border-right: 1px solid #aeb6c5;
}
.contents .p-series__tab.tab04.is-active {
  background-color: #b78e7f;
  border-color: #b78e7f;
}
.contents .p-series__tab.tab04.is-active::after {
  background-color: #b78e7f;
}
.contents .p-series__panel-wrap {
  position: relative;
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-wrap {
    padding-bottom: 9.0666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel-wrap .swiper-button-next,
  .contents .p-series__panel-wrap .swiper-button-prev {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-wrap .swiper-button-next,
  .contents .p-series__panel-wrap .swiper-button-prev {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    background-size: contain;
    margin: 0;
    background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u35180852/pc/comparison/refa_lock_series/css/../img/ic-next.png);
    top: 39%;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-wrap .swiper-button-next {
    right: 3.2vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-wrap .swiper-button-prev {
    left: 3.2vw;
    transform: scale(-1, 1);
  }
}
.contents .p-series__panel-wrap .swiper-button-next.swiper-button-disabled,
.contents .p-series__panel-wrap .swiper-button-prev.swiper-button-disabled {
  display: none;
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel-wrap .swiper-pagination {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-wrap .swiper-pagination {
    display: flex;
    justify-content: center;
    column-gap: 2.6666666667vw;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.contents .p-series__panel-wrap .swiper-pagination .swiper-pagination-bullet {
  opacity: 1;
  border-radius: 0;
  margin: 0;
  width: 10.6666666667vw;
  height: 1.0666666667vw;
  background-color: #cccccc;
}
.contents .p-series__panel-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #666666;
}
.contents .p-series__panel .swiper-wrapper {
  display: flex;
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel .swiper-wrapper {
    justify-content: center;
    column-gap: 73px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__panel .swiper-wrapper {
    column-gap: 5.0694444444vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel-item {
    width: 200px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__panel-item {
    width: 13.8888888889vw;
  }
}
.contents .p-series__panel-item img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel-item img {
    height: 180px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__panel-item img {
    height: 12.5vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-item img {
    height: 47.7333333333vw;
  }
}
.contents .p-series__panel-item .ttl {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel-item .ttl {
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__panel-item .ttl {
    font-size: 0.9722222222vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-item .ttl {
    font-size: calc((32 / 750) * 100vw);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel-item .ttl {
    margin: 30px 0 30px -50px;
    width: 300px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__panel-item .ttl {
    margin: 2.0833333333vw 0 2.0833333333vw -3.4722222222vw;
    width: 20.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-item .ttl {
    margin: 8vw 0;
  }
}
.contents .p-series__panel-item .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel-item .btn {
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__panel-item .btn {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-item .btn {
    font-size: calc((32 / 750) * 100vw);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel-item .btn {
    width: 200px;
    height: 54px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__panel-item .btn {
    width: 13.8888888889vw;
    height: 3.75vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-item .btn {
    margin: 0 auto;
    width: 53.3333333333vw;
    height: 14.4vw;
  }
}
.contents .p-series__panel-item .btn::after {
  position: absolute;
  content: '';
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u35180852/pc/comparison/refa_lock_series/css/../img/ic-arrow-wh.png);
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}
@media screen and (min-width: 768px) {
  .contents .p-series__panel-item .btn::after {
    width: 15px;
    height: 9px;
    right: 15px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-series__panel-item .btn::after {
    width: 1.0416666667vw;
    height: 0.625vw;
    right: 1.0416666667vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-series__panel-item .btn::after {
    width: 4vw;
    height: 2.4vw;
    right: 4vw;
  }
}
.contents .p-timing__bg {
  background-color: #ebeff6;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__bg {
    padding: 60px 0 72px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__bg {
    padding: 4.1666666667vw 0 5vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__bg {
    padding: 12vw 0;
  }
}
.contents .p-timing__inner {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__inner {
    max-width: 1000px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__inner {
    max-width: 69.4444444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__inner {
    max-width: 92vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-timing__ttl {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__ttl {
    margin-bottom: 2.0833333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__ttl {
    margin-bottom: 6.6666666667vw;
  }
}
.contents .p-timing__lead {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__lead {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__lead {
    font-size: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__lead {
    font-size: calc((28 / 750) * 100vw);
    line-height: 1.6;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-timing__lead {
    margin-bottom: 72px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__lead {
    margin-bottom: 5vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__lead {
    margin-bottom: 8vw;
  }
}
.contents .p-timing__wrap {
  display: flex;
  position: relative;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__wrap {
    align-items: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__wrap {
    flex-direction: column;
    padding-left: 4vw;
  }
}
.contents .p-timing__wrap::before {
  position: absolute;
  content: '';
  display: block;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__wrap::before {
    left: 0;
    width: 100%;
    height: 1px;
    top: 49.5px;
    background: linear-gradient(to right, #9b9fa3 0%, #9b9fa3 98%, transparent 100%);
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__wrap::before {
    top: 3.4375vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__wrap::before {
    height: 100%;
    width: 0.2666666667vw;
    background: linear-gradient(#9b9fa3 0%, #9b9fa3 98%, transparent 100%);
    top: 0;
    left: 17.1333333333vw;
  }
}
.contents .p-timing__item {
  position: relative;
  z-index: 1;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.top {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    column-gap: 3.7333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item.top .ttl {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translate(-50%, -100%);
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item.top .ttl {
    top: -0.8333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item.top img {
    display: block;
    margin: 0 auto;
    width: 100px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item.top img {
    width: 6.9444444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.top img {
    width: 26.6666666667vw;
  }
}
.contents .p-timing__item.bottom {
  position: relative;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item.bottom {
    padding-top: 140px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item.bottom {
    padding-top: 9.7222222222vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom {
    margin: -3.2vw 0;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item.bottom:not(:last-of-type) {
    width: 165px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item.bottom:not(:last-of-type) {
    width: 11.4583333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom.bottom01 {
    margin-top: 6.6666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom.bottom01::after {
    width: 35.3333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom.bottom02::after {
    width: 29.6vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom.bottom03::after {
    width: 15.7333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom.bottom04 {
    margin-bottom: 0;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom.bottom04::after {
    width: 29.7333333333vw;
  }
}
.contents .p-timing__item.bottom::before, .contents .p-timing__item.bottom::after {
  position: absolute;
  content: '';
  display: block;
}
.contents .p-timing__item.bottom::before {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u35180852/pc/comparison/refa_lock_series/css/../img/ic-check.png);
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item.bottom::before {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    top: 50px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item.bottom::before {
    width: 2.0833333333vw;
    height: 2.0833333333vw;
    top: 3.4722222222vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom::before {
    width: 8vw;
    height: 8vw;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 13.0666666667vw;
  }
}
.contents .p-timing__item.bottom::after {
  background-color: #8abecf;
  z-index: 1;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item.bottom::after {
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 67px;
    top: 65px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item.bottom::after {
    width: 0.1388888889vw;
    height: 4.6527777778vw;
    top: 4.5138888889vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom::after {
    height: 0.5333333333vw;
    top: 50%;
    transform: translateY(-50%);
    left: 17.0666666667vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item.bottom .ttl {
    margin-top: 8px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item.bottom .ttl {
    margin-top: 0.5555555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item.bottom .ttl {
    margin-top: 2.1333333333vw;
    width: 47.3333333333vw;
    text-align: center;
    margin-left: auto;
  }
}
.contents .p-timing__item-imgwrap {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item-imgwrap {
    column-gap: 10px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item-imgwrap {
    column-gap: 0.6944444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item-imgwrap {
    margin-left: auto;
    position: relative;
    z-index: 5;
    padding: 0 1.6vw;
    column-gap: 2.4vw;
    width: 47.3333333333vw;
  }
}
.contents .p-timing__item-imgwrap img {
  width: auto;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item-imgwrap img {
    height: 100px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item-imgwrap img {
    height: 6.9444444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item-imgwrap img {
    height: 26.6666666667vw;
  }
}
.contents .p-timing__item .ttl {
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item .ttl {
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item .ttl {
    font-size: 0.9722222222vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item .ttl {
    font-size: calc((28 / 750) * 100vw);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
.contents .p-timing__item .bnr {
  display: inline-block;
  background-color: #b6babf;
  color: #fff;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item .bnr {
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item .bnr {
    font-size: 0.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item .bnr {
    font-size: calc((28 / 750) * 100vw);
    line-height: 1;
    letter-spacing: 0.08em;
    font-weight: 600;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-timing__item .bnr {
    padding: 4px 12px;
    border-radius: 11px;
    margin-top: 10px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__item .bnr {
    padding: 0.2777777778vw 0.8333333333vw;
    border-radius: 0.7638888889vw;
    margin-top: 0.6944444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__item .bnr {
    padding: 1.3333333333vw 3.8666666667vw;
    border-radius: 3.2vw;
    position: absolute;
    z-index: 1;
    left: -1.6vw;
    transform: translateY(100%);
    bottom: -4.8vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-timing__note {
    margin-top: 30px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__note {
    margin-top: 2.0833333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__note {
    margin-top: 7.2vw;
  }
}
.contents .p-timing__note-txt {
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (min-width: 768px) {
  .contents .p-timing__note-txt {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-timing__note-txt {
    font-size: 0.7638888889vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-timing__note-txt {
    font-size: calc((22 / 750) * 100vw);
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-comparison {
    padding: 70px 0 100px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison {
    padding-bottom: 4.8611111111vw 0 6.9444444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison {
    padding: 13.3333333333vw 0;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__ttl {
    margin-bottom: 60px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__ttl {
    margin-bottom: 4.1666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__ttl {
    margin-bottom: 9.3333333333vw;
  }
}
.contents .p-comparison__inner {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__inner {
    max-width: 1000px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__inner {
    max-width: 86.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__inner {
    padding-left: 4vw;
  }
}
.contents .p-comparison__tablewrap {
  overflow-x: auto;
  padding-bottom: 3px;
}
.contents .p-comparison__table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  position: relative;
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table::after {
    position: absolute;
    content: '';
    display: block;
    right: 0;
    transform: translateX(100%);
    width: 4vw;
    height: 1px;
  }
}
.contents .p-comparison__table thead th {
  border: 1px solid #bcc2c4;
  border-top: none;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table thead th {
    width: 250px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table thead th {
    width: 17.3611111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table thead th {
    width: 57.0666666667vw;
  }
}
.contents .p-comparison__table thead th:first-of-type {
  border: none;
  background-color: #fff;
  position: sticky;
  left: 0;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table thead th:first-of-type {
    width: 98px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table thead th:first-of-type {
    width: 6.8055555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table thead th:first-of-type {
    width: 22.5333333333vw;
  }
}
.contents .p-comparison__table thead th:first-of-type::before {
  position: absolute;
  content: "";
  top: -1px;
  left: -1px;
  width: calc( 100% - 1px );
  height: calc( 100% - 1px );
  border: 1px solid #fff;
}
.contents .p-comparison__table thead th.lockoil a::before {
  background-color: #f5bf56;
}
.contents .p-comparison__table thead th.lockoillight a::before {
  background-color: #f2d073;
}
.contents .p-comparison__table thead th.lockoilbloom a::before {
  background-color: #ff8f92;
}
.contents .p-comparison__table thead th.lockoilbloomlight a::before {
  background-color: #f4acc6;
}
.contents .p-comparison__table thead th.maegamilock a::before {
  background-color: #dbb886;
}
.contents .p-comparison__table thead th.volumelock a::before {
  background-color: #e3928d;
}
.contents .p-comparison__table thead th.straightlock a::before {
  background-color: #aad3cf;
}
.contents .p-comparison__table thead th.tsuyalock a::before {
  background-color: #c297e6;
}
.contents .p-comparison__table thead th.locktreatment a::before {
  background-color: #b78e7f;
}
.contents .p-comparison__table thead th a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table thead th a {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    font-weight: 600;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table thead th a {
    font-size: 0.9722222222vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table thead th a {
    font-size: calc((24 / 750) * 100vw);
    line-height: 1.4;
    letter-spacing: 0.02em;
    font-weight: 600;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table thead th a {
    height: 55px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table thead th a {
    height: 3.8194444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table thead th a {
    height: 12.6666666667vw;
  }
}
.contents .p-comparison__table thead th a::before, .contents .p-comparison__table thead th a::after {
  position: absolute;
  content: '';
  display: block;
}
.contents .p-comparison__table thead th a::before {
  height: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table thead th a::before {
    width: 246px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table thead th a::before {
    width: 17.0833333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table thead th a::before {
    width: 56vw;
  }
}
.contents .p-comparison__table thead th a::after {
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u35180852/pc/comparison/refa_lock_series/css/../img/ic-arrow-wh.png);
  top: 51%;
  transform: translateY(-50%) rotate(-90deg);
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table thead th a::after {
    width: 18px;
    height: 11px;
    right: 10px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table thead th a::after {
    width: 1.25vw;
    height: 0.7638888889vw;
    right: 0.6944444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table thead th a::after {
    width: 3.7333333333vw;
    height: 2.2666666667vw;
    right: 2.4vw;
  }
}
.contents .p-comparison__table thead th .product {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table thead th .product {
    height: 170px;
  }
}
@media screen and (min-width: 768px) {
    .contents .p-comparison__table thead th .product.balm img {
        height: 4.7055555556vw;
        
    }
}
@media screen and (max-width: 767px) {
    .contents .p-comparison__table thead th .product.balm img {
        height: 16vw;
        
    }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table thead th .product {
    height: 11.8055555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table thead th .product {
    height: 38.8vw;
  }
}
.contents .p-comparison__table thead th .product img {
  width: auto;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table thead th .product img {
    height: 134px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table thead th .product img {
    height: 9.3055555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table thead th .product img {
    height: 30.5333333333vw;
  }
}
.contents .p-comparison__table tbody .ta-l td {
  text-align: left;
}
.contents .p-comparison__table tbody th {
  position: sticky;
  left: 0;
  z-index: 3;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table tbody th {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table tbody th {
    font-size: 0.9027777778vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table tbody th {
    font-size: calc((22 / 750) * 100vw);
    line-height: 1.6363636364;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table tbody th {
    width: 98px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table tbody th {
    width: 6.8055555556vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table tbody th {
    width: 22.5333333333vw;
  }
}
.contents .p-comparison__table tbody th::before {
  position: absolute;
  content: '';
  display: block;
  background-color: #fff;
  top: -1px;
  left: 0;
  width: calc(100% - 1px);
  height: 100%;
  border: 1px solid #bcc2c4;
  z-index: -2;
}
.contents .p-comparison__table tbody th::after {
  position: absolute;
  content: '';
  display: block;
  background-color: #ededed;
  top: 50%;
  left: 50%;
  transform: translate(-49%, -50%);
  z-index: -1;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table tbody th::after {
    width: calc( 100% - 5px);
    height: calc( 100% - 5px);
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table tbody th::after {
    width: calc( 100% - 0.3472222222vw);
    height: calc( 100% - 0.3472222222vw);
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table tbody th::after {
    width: calc( 100% - 1.0666666667vw);
    height: calc( 100% - 1.0666666667vw);
  }
}
.contents .p-comparison__table tbody td {
  text-align: center;
  border: 1px solid #bcc2c4;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table tbody td {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table tbody td {
    font-size: 0.9027777778vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table tbody td {
    font-size: calc((22 / 750) * 100vw);
    line-height: 1.6363636364;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table tbody td {
    width: 250px;
    padding: 12px 10px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table tbody td {
    width: 17.3611111111vw;
    padding: 0.8333333333vw 0.6944444444vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table tbody td {
    width: 57.0666666667vw;
    padding: 2.6666666667vw 2.1333333333vw;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table tbody td.img {
    padding: 16px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table tbody td.img {
    padding: 1.1111111111vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table tbody td.img {
    padding: 3.7333333333vw 4vw;
  }
}
.contents .p-comparison__table tbody td .ttl {
  display: block;
  font-weight: 600;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__table tbody td .note {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__table tbody td .note {
    font-size: 0.8333333333vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__table tbody td .note {
    font-size: calc((20 / 750) * 100vw);
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__note {
    margin-top: 24px;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__note {
    margin-top: 1.6666666667vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__note {
    margin-top: 4vw;
  }
}
.contents .p-comparison__note-txt {
  text-indent: -1em;
  padding-left: 1em;
}
@media screen and (min-width: 768px) {
  .contents .p-comparison__note-txt {
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
@media screen and (max-width: 1440px) and (min-width: 768px) {
  .contents .p-comparison__note-txt {
    font-size: 0.7638888889vw;
  }
}
@media screen and (max-width: 767px) {
  .contents .p-comparison__note-txt {
    font-size: calc((22 / 750) * 100vw);
    line-height: 1.4;
    letter-spacing: 0.08em;
    font-weight: 400;
  }
}
.contents .js-panel {
  display: none;
}
.contents .js-panel.is-active {
  display: block;
}
@media screen and (max-width: 767px) {
  .contents .is-pc {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .contents .is-sp {
    display: none;
  }
}

footer {
  text-align: center;
}
footer .btn {
  display: block;
  margin: 0 auto 100px;
  width: 100%;
  max-width: 750px;
}
@media screen and (max-width: 767px) {
  footer .btn {
    margin-bottom: 10vw;
  }
}
footer .copyright {
  background: #000;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.8;
}
@media screen and (max-width: 767px) {
  footer .copyright {
    font-size: 0.68rem;
  }
}