.lens__heading {
  font-size: 4rem;
  margin-top: 14rem;
  text-align: center;
}

.lens__dl {
  display: flex;
}

.lens__dl dt {
  color: #ed1c24;
  flex-shrink: 0;
  font-size: 2.6rem;
}

.lens__dl--price {
  align-items: center;
}

.lens__dl--price dd {
  align-items: center;
  display: flex;
  font-size: 2.8rem;
  gap: .8928571429em;
  justify-content: flex-start;
}

.lens__dl--price dd .lens__price-plus {
  font-size: 1.7857142857em;
}

.lens__dl--price dd .lens__price-yen {
  font-size: 1.4285714286em;
}

.lens__dl--point {
  margin-top: 5.8rem;
}

.lens__dl--point dt {
  line-height: 3.3rem;
}

.lens__dl--point dd {
  font-size: 2.8rem;
}

.lens__dl--point dd .lens__checkList-item {
  align-items: center;
  display: flex;
}

.lens__dl--point dd .lens__checkList-item+.lens__checkList-item {
  margin-top: 1.0714285714em;
}

.lens__dl--point dd .lens__checkList-icon {
  display: inline-block;
  line-height: 0;
  margin-right: .6818181818em;
  width: .7857142857em;
}

.lens__dl--point dd .lens__checkList-icon .cls-1 {
  fill: #e6e6e6;
}

.lens__dl--point dd .lens__checkList-icon .cls-2 {
  fill: #ed1c24;
}

.lens__dl--point dd .lens__dl-note {
  font-size: .9285714286em;
  margin-top: 1.5384615385em;
}

.lens__notes {
  border-bottom: min(.2rem,1px) solid #e6e6e6;
  border-top: min(.2rem,1px) solid #e6e6e6;
  font-size: 2.6rem;
  line-height: 1.619047619;
  margin: 3.4761904762em auto 0;
  padding: 1.9047619048em .4761904762em 1.9047619048em .9523809524em;
  width: 64rem;
}

.lens__notes li {
  -webkit-padding-end: 1em;
  display: inline-block;
  padding-inline-end: 1em;
}

.lens .pm+.c-btn {
  color: #fff;
  margin: 7.2rem auto 0;
}

.lens .pm+.c-btn .c-btn__link {
  background: #000;
}

.lens .l-contents {
  border-bottom: min(.2rem,1px) solid #e6e6e6;
  padding-bottom: 12.8rem;
}

.lens .main {
  position: relative;
}

.lens .main__ph {
  aspect-ratio: 375/566;
  position: relative;
}

.lens .main__heading {
  color: #fff;
  font-size: 5rem;
  inset: 0 0 auto 0;
  margin: 8.8rem auto auto auto;
  position: absolute;
  text-align: center;
}

.lens .main__mt {
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  visibility: hidden;
  z-index: -1;
}

.lens .main__mt-ball {
  aspect-ratio: 1;
  border-radius: 50%;
  width: 10rem;
}

.lens .main__mt-logo {
  width: 15.4rem;
}

.lens .main__mt-text {
  width: 64.2rem;
}

.lens .main__canvas {
  aspect-ratio: 375/566;
  height: auto;
  inset: 0;
  position: absolute;
  width: 100%;
  z-index: 5;
}

.lens .main__canvas canvas {
  height: 100%;
}

.lens .main__lead {
  font-size: 2.6rem;
  line-height: 1.5;
  margin: 9rem auto 8rem;
  text-align: center;
}

.lens .main .lens__dl {
  margin-inline: auto;
  width: 62rem;
}

.lens .main .lens__dl dt {
  width: 17.7419354839%;
}

.lens .style__thumbWrapper {
  -moz-column-gap: 1.9230769231em;
  column-gap: 1.9230769231em;
  display: grid;
  font-size: 2.6rem;
  grid-template-columns: repeat(auto-fit, 11.5384615385em);
  justify-content: center;
  margin: 6rem auto 0;
}

.lens .style__thumb {
  cursor: pointer;
  margin-bottom: 3.1818181818em;
  position: relative;
}

.lens .style__thumb.is-hidden {
  display: none;
}

.lens .style__ph {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.lens .style__ph-overlay {
  inset: 0;
  opacity: 0;
  position: absolute;
  z-index: 1;
}

.lens .style__ph-overlay::before {
  background: var(--bg);
  content: "";
  display: block;
  inset: 0;
  opacity: 1;
  position: absolute;
  transition: .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.lens .style__ph-img {
  filter: blur(0);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: .3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.lens .style__icon {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  box-shadow: .0454545455em .0454545455em 0 #ccc;
  color: #ccc;
  display: grid;
  margin-top: 90%;
  place-items: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 1.3636363636em;
}

.lens .style__icon svg {
  transform-origin: 50%;
  width: 33.3333333333%;
}

.lens .style__colorName {
  margin-top: 1.0909090909em;
  text-align: center;
}

.lens .style__brightness {
  font-size: 1em;
  margin-top: .7777777778em;
  text-align: center;
}

.lens .online {
  padding-top: 14rem;
}

.lens .online__heading {
  font-size: 4rem;
  text-align: center;
}

.lens .online__lead {
  font-size: 2.6rem;
  line-height: 1.619047619;
  margin-top: 4.4rem;
  text-align: center;
}

.lens .online__list {
  display: flex;
  flex-wrap: wrap;
  margin: 5.4rem auto 0;
  margin-top: 5.4rem;
  position: relative;
}

.lens .online__list::before {
  background: #e6e6e6;
  content: "";
  display: block;
  height: 100%;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: min(.2rem,1px);
}

.lens .online__thumb {
  padding: 0 2.4rem 12rem;
  width: 50%;
}

.lens .online__thumb.is-hidden {
  display: none;
}

.lens .online__slider {
  aspect-ratio: 330/395;
}

.lens .online__slider-pagination {
  margin: 2.6rem auto 0;
  width: -moz-fit-content;
  width: fit-content;
}

.lens .online__slider-pagination .swiper-pagination-bullet {
  aspect-ratio: 1;
  background: #ccc;
  height: auto;
  margin: 0 1rem;
  opacity: 1;
  width: .8rem;
}

.lens .online__slider-pagination .swiper-pagination-bullet-active {
  background: #000;
}

.lens .online__info {
  font-size: 2.6rem;
  margin-top: 3.4rem;
  text-align: center;
}

.lens .online__info-frameName {
  font-size: 1.2em;
  line-height: 1.25;
}

.lens .online__info-frame,
.lens .online__info-lens {
  color: gray;
  font-size: 1em;
  line-height: 1.619047619;
}

.lens .online__info-frame {
  margin-top: .8095238095em;
}

.lens .online__info-lens {
  margin-top: .7619047619em;
}

.lens .online__info-plus {
  aspect-ratio: 1;
  margin: .5769230769em auto 0;
  position: relative;
  width: .5384615385em;
}

.lens .online__info-plus::before,
.lens .online__info-plus::after {
  background: #000;
  content: "";
  display: block;
  position: absolute;
}

.lens .online__info-plus::before {
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: .2rem;
}

.lens .online__info-plus::after {
  height: .2rem;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.lens .online__btn {
  font-size: 2.6rem;
  margin: 3.7rem auto 0;
  width: -moz-fit-content;
  width: fit-content;
}

.lens .online__btn-inner {
  background: var(--bg);
  border-radius: 999px;
  box-shadow: .3rem .3rem 0 #ccc;
  display: block;
  padding: .7619047619em 1.9523809524em;
}

.lens .online__note {
  font-size: 2.2rem;
  margin-top: 1.2222222222em;
  text-align: center;
}

.pm {
  background: url(https://rim.jins.com/jp/wp/wp-content/themes/rim/assets/images/lens/pm-bg.jpg) repeat-y left top/contain;
  margin-top: 16rem;
  padding: 9.6rem 0 5.2rem;
}

.pm__header {
  color: #fff;
  font-size: 5rem;
  text-align: center;
}

.pm__header span {
  display: block;
}

.pm__header-ja {
  font-size: .6em;
  margin-top: .6666666667em;
}

.pm__inner {
  background: #fff;
  margin: 6.4rem auto 0;
  padding: 7rem 0 13rem;
  width: min(93.3333333333%,150rem);
}

.pm__ph {
  margin: 0 auto;
  width: 65rem;
}

.pm__ph-img--2 {
  margin-top: 5.8461538462%;
}

.pm__detail {
  margin: 9rem auto 0;
}

.pm__detail-lead {
  font-size: 2.8rem;
  line-height: 1.4285714286;
  margin: 0 auto 8rem;
  width: -moz-fit-content;
  width: fit-content;
}

.pm__detail .lens__dl {
  margin-inline: auto;
  width: 56rem;
}

.pm__detail .lens__dl dt {
  width: 21.4285714286%;
}

.pm__detail .lens__dd--point .lens__checkList-item:nth-of-type(1) .lens__checkList-icon .cls-2 {
  display: none;
}

.pm__tab {
  display: grid;
  font-size: 2.6rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 7rem auto 0;
  width: 60rem;
}

.pm__tab-item {
  align-items: center;
  border-right: min(.2rem,1px) solid #e6e6e6;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}

.pm__tab-item.is-current .pm__tab-arw svg {
  fill: #000;
  stroke: none;
}

.pm__tab-item:nth-of-type(1) {
  border-left: min(.2rem,1px) solid #e6e6e6;
}

.pm__tab-ball {
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  width: 4.4444444444em;
}

.pm__tab-name {
  margin-top: .75em;
  text-align: center;
}

.pm__tab-arw {
  line-height: 0;
  margin-top: .75em;
  width: .85em;
}

.pm__tab-arw svg {
  fill: none;
  stroke: #e6e6e6;
  stroke-miterlimit: 10;
  stroke-width: 2px;
}

.pm__slider {
  margin: 7.4rem auto 0;
  width: 51.7rem;
}

.pm__slides {
  aspect-ratio: 630/838;
  position: relative;
}

.pm__slide {
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.pm__slide:nth-of-type(n+2) {
  display: none;
}

.pm__slide-outdoor {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}

.pm__slide-outdoor img {
  height: 100%;
  width: auto;
}

.pm__slide-handleWrapper {
  box-sizing: content-box;
  height: calc(100% + 4rem);
  pointer-events: auto;
  position: absolute;
  top: -2rem;
}

.pm__slide-handleWrapper::before {
  content: "";
  display: block;
  inset: 0;
  left: -4rem;
  position: absolute;
  width: 8rem;
}

.pm__slide-handle {
  background: currentColor;
  color: #ccc;
  height: 100%;
  position: relative;
  width: min(.2rem,1px);
}

.pm__slide-handle::before,
.pm__slide-handle::after {
  aspect-ratio: 17/11;
  background: currentColor;
  content: "";
  display: block;
  left: -0.85rem;
  position: absolute;
  width: 1.7rem;
}

.pm__slide-handle::before {
  -webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  top: 0;
}

.pm__slide-handle::after {
  -webkit-clip-path: polygon(50% 0%, 0 100%, 100% 100%);
  bottom: 0;
  clip-path: polygon(50% 0%, 0 100%, 100% 100%);
}

.pm__slide-ball {
  aspect-ratio: 1;
  border-radius: 50%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 7.3rem;
}

.pm__situation {
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
}

.pm__situation-text {
  width: 17rem;
}

@media screen and (min-width: 769px) {
  .lens__heading {
    font-size: 2.5rem;
    margin-top: 12rem;
  }

  .lens__dl dt {
    font-size: clamp(13px,.668rem + .3vw,14px);
  }

  .lens__dl--price dd {
    font-size: 2rem;
    font-size: clamp(15px,.215rem + 1.51vw,20px);
  }

  .lens__dl--point {
    margin-top: 3rem;
  }

  .lens__dl--point dt {
    line-height: 2rem;
  }

  .lens__dl--point dd {
    font-size: clamp(15px,.215rem + 1.51vw,20px);
  }

  .lens__dl--point dd .lens__dl-note {
    font-size: clamp(13px,.523rem + .6vw,15px);
  }

  .lens__notes {
    font-size: 1.4rem;
    width: auto;
  }

  .lens .pm+.c-btn {
    font-size: 1.7rem;
    margin: 6rem auto 0;
    width: 27.3rem;
  }

  .lens .c-btn__note {
    font-size: 1.4rem;
  }

  .lens .l-contents {
    padding-bottom: 18rem;
  }

  .lens .main {
    align-items: center;
    display: flex;
    margin: 0 auto;
    padding-top: 1.2rem;
    width: min(97%, 156.25rem);
  }

  .lens .main__ph {
    flex-shrink: 0;
    width: 50.4%;
  }

  .lens .main__heading {
    color: #000;
    font-size: 3rem;
    margin: 0;
    position: relative;
  }

  .lens .main__mt-ball {
    width: 7rem;
  }

  .lens .main__mt-logo {
    width: 10.8rem;
  }

  .lens .main__mt-text {
    width: 44.9rem;
  }

  .lens .main__lead {
    font-size: 1.8rem;
    margin: 8rem auto 6rem;
    width: 75%;
  }

  .lens .main__lead br.md {
    display: none;
  }

  .lens .main__col {
    padding: 8rem 0;
    width: 100%;
  }

  .lens .main__col .lens__dl,
  .lens .main__col .lens__notes {
    width: min(80%,44.6rem);
  }

  .lens .main__col .lens__dl dt,
  .lens .main__col .lens__notes dt {
    width: max(5rem,15.0224215247%);
  }

  .lens .style__thumbWrapper {
    -moz-column-gap: 5.7086614173%;
    column-gap: 5.7086614173%;
    font-size: 1.54rem;
    grid-template-columns: repeat(4, 1fr);
    margin: 4.8rem auto 0;
    max-width: 109.6rem;
    padding: 0 4rem;
  }

  .lens .style__colorName {
    margin-top: 1.0909090909em;
    text-align: center;
  }

  .lens .style__brightness {
    margin-top: .7777777778em;
    text-align: center;
  }

  .lens .style .c-moreBtn {
    margin-top: 6rem;
  }

  .lens .online {
    padding-top: 14rem;
  }

  .lens .online__heading {
    font-size: 3rem;
  }

  .lens .online__lead {
    font-size: 1.3rem;
    margin-top: 2.8rem;
  }

  .lens .online__list {
    margin-top: 4.7rem;
    width: min(94.0789473684%,114.4rem);
  }

  .lens .online__thumb {
    flex-shrink: 0;
    margin-right: 3.1468531469%;
    padding: 0 0 10rem;
    width: 21.8531468531%;
  }

  .lens .online__thumb:nth-of-type(4n+2) {
    margin-right: 6.2937062937%;
  }

  .lens .online__thumb:nth-of-type(4n) {
    margin-right: 0;
  }

  .lens .online__slider-pagination {
    margin-top: 1.7rem;
  }

  .lens .online__slider-pagination .swiper-pagination-bullet {
    margin: 0 .7rem;
    width: .6rem;
  }

  .lens .online__info {
    font-size: 1.8rem;
    margin-top: 1.5rem;
  }

  .lens .online__info-plus::before {
    width: .14rem;
  }

  .lens .online__info-plus::after {
    height: .14rem;
  }

  .lens .online__btn {
    font-size: 1.5rem;
    margin-top: 2.7rem;
  }

  .lens .online__btn-inner {
    box-shadow: .2rem .2rem 0 #ccc;
  }

  .lens .online__note {
    font-size: 1.1rem;
  }

  .pm {
    background: url(https://rim.jins.com/jp/wp/wp-content/themes/rim/assets/images/lens/pm-bg-pc.jpg) no-repeat center top/cover;
    padding: 8.3rem 0 8.3rem;
  }

  .pm__header {
    font-size: 3rem;
  }

  .pm__inner {
    align-items: flex-start;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 7rem auto 0;
    padding: 7rem min(7.03125%,9rem) 10.4rem;
    width: min(90%,120rem);
  }

  .pm__inner-colL {
    display: flex;
    flex-direction: column-reverse;
    flex-shrink: 0;
    width: 45.8823529412%;
  }

  .pm__inner-colR {
    width: 43.7254901961%;
  }

  .pm__ph {
    margin: 5rem 0 0;
    width: 100%;
  }

  .pm__detail {
    margin: 6.4rem auto 0;
  }

  .pm__detail-lead {
    font-size: 2rem;
  }

  .pm__detail .lens__dl {
    width: 87.4439461883%;
  }

  .pm__detail .lens__dl dt {
    width: max(5rem,17.1794871795%);
  }

  .pm__tab {
    font-size: 1.3rem;
    width: 100%;
  }

  .pm__tab-item {
    padding-top: .6rem;
  }

  .pm__tab-ball {
    margin-top: 2rem;
    order: 2;
  }

  .pm__tab-name {
    order: 3;
  }

  .pm__tab-arw {
    margin-top: 0;
    order: 1;
  }

  .pm__tab-arw svg {
    transform: scale(1, -1);
  }

  .pm__slider {
    display: flex;
    flex-direction: column-reverse;
    margin: 0;
    width: 100%;
  }

  .pm__slides {
    margin-top: 2.5rem;
  }

  .pm__slide {
    inset: 0;
    pointer-events: none;
    position: absolute;
  }

  .pm__slide:nth-of-type(n+2) {
    display: none;
  }

  .pm__slide-handleWrapper::before {
    left: -2rem;
    width: 4rem;
  }

  .pm__slide-ball {
    width: 4rem;
  }

  .pm__situation {
    margin-top: 0;
  }

  .pm__situation-text {
    width: 11.5rem;
    width: max(8rem,24.5726495726%);
  }
}

@media screen and (hover: hover)and (min-width: 769px) {
  .lens .online__btn:hover .online__btn-inner {
    transform: translate(0.2rem, 0.2rem);
  }
}

@media screen and (max-width: 768px) {
  .lens .main__lead br.md {
    display: none;
  }

  .pm__tab-item.is-current .pm__tab-arw svg {
    animation: changeArw .3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

@keyframes changeArw {
    0%, 100% {
      transform: translateY(0%);
    }

    50% {
      transform: translateY(50%);
    }
}
}

@media screen and (min-width: 769px)and (max-width: 1000px) {
  .lens .main {
    align-items: flex-start;
  }

  .lens .main .main__col {
    padding: 8rem 0 0 0;
  }

  .lens .main .main__lead {
    line-height: 1.5;
  }

  .lens .main .main__lead br.md {
    display: inline-block;
  }

  .lens .main .main__mt-ball {
    width: 5.6rem;
  }

  .lens .main .main__mt-logo {
    width: 8.64rem;
  }

  .lens .main .main__mt-text {
    width: 35rem;
  }
}

@media screen and (min-width: 769px)and (max-width: 1080px) {
  .pm .pm__detail-lead {
    font-size: 1.6rem;
  }

  .pm .pm__detail-lead br {
    display: none;
  }

  .pm .lens__dl {
    width: 100%;
  }

  .pm .lens__notes {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (hover: hover) {
  .lens .style__thumb:not(.is-open):not(.no-hover):hover .style__ph-overlay::before {
    opacity: .5;
  }

  .lens .style__thumb:not(.is-open):not(.no-hover):hover .style__ph-img {
    filter: blur(5px);
  }

  .lens .online__btn .online__btn-inner {
    transition: .2s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .lens .online__btn:hover .online__btn-inner {
    box-shadow: 0 0 0 #ccc;
    transform: translate(0.3rem, 0.3rem);
  }

  .pm__tab-item .pm__tab-ball {
    transform: scale(1);
    transition: .2s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .pm__tab-item .pm__tab-arw svg {
    transform: scale(1, -1) translateY(0);
    transition: .3s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .pm__tab-item:hover:not(.is-current) .pm__tab-ball {
    transform: scale(0.95);
  }

  .pm__tab-item:hover:not(.is-current) .pm__tab-arw svg {
    fill: #ccc;
    stroke: none;
    transform: scale(1, -1) translateY(50%);
  }
}