@charset "UTF-8";
.security-camera {
  color: #000;
  /* サイト共通の p{line-height:1.8} 等が見出し/ラベル類の高さを崩すためリセット */
}
.security-camera p {
  line-height: 1;
}
@media screen and (max-width: 768px) {
  .security-camera .pc {
    display: none;
  }
}
.security-camera .sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .security-camera .sp {
    display: block;
  }
}
.security-camera {
  /* 見出しピル（共通） */
}
.security-camera .sec-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0.636em 1em;
  border-radius: 45px;
  background-image: linear-gradient(115deg, #fee101 43%, #f5a602 82%);
  font-size: min(3.5vw, 35px);
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #000;
}
@media screen and (max-width: 768px) {
  .security-camera .sec-heading {
    font-size: min(6.4vw, 30px);
    text-shadow: 1.5px 1.5px 0 #000;
  }
}
.security-camera {
  /* ===== MV ===== */
  /* スマホ時のレイアウト比率は Figma (node 94:2, 402px幅基準) に準拠し、cqw で幅に応じて拡大縮小 */
}
.security-camera .mv {
  position: relative;
  overflow: hidden;
  height: min(46.5277777778vw, 670px);
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .security-camera .mv {
    height: auto;
    container-type: inline-size;
  }
}
.security-camera .mv__photo {
  display: contents;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__photo {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 402/273;
    overflow: hidden;
  }
}
.security-camera .mv__bg {
  position: absolute;
  display: block;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.security-camera .mv__overlay {
  position: absolute;
  inset: 0;
  width: 72.3%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(to right, #fff 53.857%, rgba(255, 255, 255, 0) 100%);
}
@media screen and (max-width: 768px) {
  .security-camera .mv__overlay {
    inset: auto;
    left: 0;
    top: 0;
    width: 53.9800995025%;
    height: 100%;
  }
}
.security-camera .mv__inner {
  position: relative;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__inner {
    height: auto;
    z-index: 2;
    margin-top: 8.4577114428cqw;
    padding-bottom: 8.2089552239cqw;
  }
}
.security-camera .mv__camera {
  position: absolute;
  left: 0;
  top: min(2.7777777778vw, 40px);
  width: min(27.2916666667vw, 393px);
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__camera {
    top: 4.7619047619%;
    left: 0;
    width: 37.8109452736%;
    aspect-ratio: 152/173;
    z-index: 2;
  }
}
.security-camera .mv__camera > img {
  display: block;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__camera > img {
    height: 100%;
    object-fit: contain;
  }
}
.security-camera .mv__content {
  position: absolute;
  left: min(26.1805555556vw, 377px);
  top: min(7.2916666667vw, 105px);
  width: min(38.1944444444vw, 550px);
  display: flex;
  flex-direction: column;
  gap: min(1.5277777778vw, 22px);
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__content {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    max-width: min(91.5422885572%, 480px);
    margin: 0 auto;
    gap: 2.9891304348cqw;
    padding: 0;
    container-type: inline-size;
  }
}
.security-camera .mv__eyebrow {
  font-size: min(1.7361111111vw, 25px);
  line-height: 1.55;
  font-weight: 800;
}
.security-camera .mv__eyebrow > br {
  display: none;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__eyebrow {
    font-size: 5.4347826087cqw;
    line-height: 1.3;
    text-align: center;
  }
}
.security-camera .mv__title {
  font-size: min(3.8194444444vw, 55px);
  line-height: 1.36;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__title {
    font-size: 14.1304347826cqw;
    line-height: 1.3;
  }
}
.security-camera .mv__sub {
  font-size: min(2.4305555556vw, 35px);
  line-height: 1.39;
  font-weight: 900;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__sub {
    font-size: 5.9782608696cqw;
    line-height: 1.32;
    text-align: center;
  }
}
.security-camera .mv__badges {
  display: flex;
  gap: min(0.6944444444vw, 10px);
  margin-top: min(2.0833333333vw, 30px);
}
@media screen and (max-width: 768px) {
  .security-camera .mv__badges {
    width: min(94.5273631841%, 480px);
    justify-content: center;
    gap: 2.7173913043cqw;
    margin-top: 8.9673913043cqw;
  }
}
.security-camera .mv__badge {
  position: relative;
  width: min(10.4166666667vw, 150px);
}
@media screen and (max-width: 768px) {
  .security-camera .mv__badge {
    container-type: inline-size;
    width: auto;
    aspect-ratio: 1/1;
    flex: 1;
  }
}
.security-camera .mv__badge-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(8.4027777778vw, 121px);
  border: min(0.3472222222vw, 5px) solid #000;
  border-radius: min(2.0833333333vw, 30px) min(2.0833333333vw, 30px) 0 0;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__badge-card {
    height: 80.6666666667cqw;
    border-width: clamp(2px, 4.1666666667cqw, 5px);
    border-radius: 25cqw 25cqw 0 0;
    border-bottom: none;
  }
}
.security-camera .mv__badge-card img {
  display: block;
  width: 100%;
}
.security-camera .mv__badge-label {
  position: relative;
  margin-top: min(-0.3472222222vw, -5px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(2.3611111111vw, 34px);
  padding: 0 4px;
  border-radius: 0 0 min(0.7638888889vw, 11px) min(0.7638888889vw, 11px);
  background-color: #000;
  font-size: min(1.25vw, 18px);
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}
@media screen and (max-width: 768px) {
  .security-camera .mv__badge-label {
    margin-top: -3.3333333333cqw;
    height: 22.6666666667cqw;
    border-radius: 0 0 9.1666666667cqw 9.1666666667cqw;
    font-size: 11.6666666667cqw;
  }
}
.security-camera {
  /* ===== 理由セクション ===== */
}
.security-camera .reason {
  padding: 89px 20px 78px;
  background-color: #fff9cc;
}
@media screen and (max-width: 768px) {
  .security-camera .reason {
    padding: 48px 15px;
  }
}
.security-camera .reason .inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.security-camera .reason__heading {
  margin-bottom: 41px;
}
.security-camera .reason__heading > br {
  display: none;
}
@media screen and (max-width: 768px) {
  .security-camera .reason__heading {
    margin-bottom: 24px;
  }
  .security-camera .reason__heading br {
    display: inline;
  }
}
.security-camera .reason__list {
  display: flex;
  gap: 30px;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .security-camera .reason__list {
    gap: 15px;
  }
}
@media screen and (max-width: 640px) {
  .security-camera .reason__list {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}
.security-camera .reason__card {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 280px;
  font-size: min(2.2vw, 22px);
  gap: 0.68em;
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1.27em;
  background-color: #fff;
}
@media screen and (max-width: 640px) {
  .security-camera .reason__card {
    font-size: 3.4375vw;
    width: 100%;
  }
}
.security-camera .reason__num {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: baseline;
  gap: 0.27em;
  padding: 0.27em 1em 0.43em 0.6em;
  border-radius: 0 0 17px 0;
  background-image: linear-gradient(98deg, #fee101 43%, #f5a602 82%);
  font-size: 12.7118644068cqw;
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  text-shadow: 1.5px 1.5px 0 #000;
  white-space: nowrap;
}
.security-camera .reason__num span {
  display: inline-block;
  line-height: 1;
}
.security-camera .reason__num span:first-child {
  font-size: 0.66em;
}
.security-camera .reason__content {
  margin-top: 21.6101694915cqw;
}
.security-camera .reason__title {
  margin-top: 0.7em;
  margin-bottom: 1.42em;
  font-size: 9.3220338983cqw;
  font-weight: 800;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 0.36em;
  text-decoration-thickness: 0.36em;
  text-decoration-color: #FEE101;
}
.security-camera .reason__text {
  font-size: clamp(14px, 6.8cqw, 16px);
  line-height: 1.56;
}
.security-camera .reason__figure--border {
  border: 1px solid #000;
}
.security-camera .reason__figure img {
  display: block;
  max-width: 100%;
}
.security-camera {
  /* ===== サービス一覧 ===== */
}
.security-camera .service {
  padding: 60px 20px;
}
@media screen and (max-width: 768px) {
  .security-camera .service {
    padding: 40px 15px;
  }
}
.security-camera .service .inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.security-camera .service__heading {
  margin-bottom: 41px;
}
@media screen and (max-width: 768px) {
  .security-camera .service__heading {
    margin-bottom: 24px;
  }
}
.security-camera .service__card {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 221px;
  border-radius: 30px;
  overflow: hidden;
  background-color: #ca3b22;
  transition: opacity 0.2s ease 0s;
}
.security-camera .service__card:hover {
  text-decoration: none;
  opacity: 0.8;
}
@media screen and (max-width: 768px) {
  .security-camera .service__card {
    border-radius: 3.90625vw;
  }
}
@media screen and (max-width: 540px) {
  .security-camera .service__card {
    flex-direction: column;
    min-height: 0;
  }
}
.security-camera .service__body {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 48.7%;
  padding: 40px 20px 40px 48px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .security-camera .service__body {
    padding: 3.125vw 2.6041666667vw 3.125vw 4.6875vw;
  }
}
@media screen and (max-width: 540px) {
  .security-camera .service__body {
    width: 100%;
    padding: 5.9259259259vw 5.1851851852vw;
  }
}
.security-camera .service__name {
  margin-bottom: 0.72em;
  font-size: 25px;
  font-weight: 600;
}
@media screen and (max-width: 768px) {
  .security-camera .service__name {
    font-size: 3.2552083333vw;
  }
}
@media screen and (max-width: 540px) {
  .security-camera .service__name {
    font-size: clamp(18px, 6.4vw, 25px);
  }
}
.security-camera .service__desc {
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .security-camera .service__desc {
    font-size: max(2.0833333333vw, 12px);
  }
}
@media screen and (max-width: 540px) {
  .security-camera .service__desc {
    font-size: clamp(12px, 3.7333333333vw, 16px);
  }
}
.security-camera .service__arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
}
@media screen and (max-width: 768px) {
  .security-camera .service__arrow {
    right: 3.125vw;
    width: 5.2083333333vw;
  }
}
@media screen and (max-width: 540px) {
  .security-camera .service__arrow {
    width: clamp(24px, 8.5333333333vw, 40px);
  }
}
.security-camera .service__arrow img {
  display: block;
  width: 100%;
}
.security-camera .service__figure {
  width: 51.3%;
}
@media screen and (max-width: 540px) {
  .security-camera .service__figure {
    width: auto;
  }
}
.security-camera .service__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.security-camera .service__note {
  margin-top: 41px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .security-camera .service__note {
    margin-top: 1.5em;
    font-size: clamp(14px, 4.2666666667vw, 16px);
  }
}
.security-camera .service__note a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.security-camera .service__note img {
  width: 20px;
}
.security-camera {
  /* ===== ご利用までの流れ ===== */
}
.security-camera .flow {
  padding: 60px 20px;
}
@media screen and (max-width: 768px) {
  .security-camera .flow {
    padding: 40px 15px;
  }
}
.security-camera .flow .inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.security-camera .flow__heading {
  margin-bottom: 47px;
}
@media screen and (max-width: 768px) {
  .security-camera .flow__heading {
    margin-bottom: 24px;
  }
}
.security-camera .flow__list {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .security-camera .flow__list {
    flex-wrap: wrap;
    gap: 0;
    row-gap: 20px;
    overflow-x: visible;
    padding-bottom: 0;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
}
.security-camera .flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(15vw, 150px);
  text-align: center;
}
@media screen and (max-width: 768px) {
  .security-camera .flow__step {
    flex: 0 0 calc((100% - 40px) / 3);
    width: calc((100% - 40px) / 3);
  }
}
.security-camera .flow__break {
  display: none;
}
@media screen and (max-width: 768px) {
  .security-camera .flow__break {
    display: block;
    flex-basis: 100%;
    width: 100%;
    height: 0;
  }
}
.security-camera .flow__num {
  margin-bottom: 10px;
  font-size: min(2vw, 20px);
  font-weight: 800;
  color: #f5a602;
}
@media screen and (max-width: 768px) {
  .security-camera .flow__num {
    font-size: 14px;
  }
}
.security-camera .flow__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88%;
  aspect-ratio: 1/1;
  margin-bottom: 10px;
  border-radius: 50%;
  background-image: linear-gradient(180deg, #fee101 20%, #f5a602 81%);
}
@media screen and (max-width: 768px) {
  .security-camera .flow__icon {
    width: 84px;
    height: 84px;
  }
}
.security-camera .flow__icon img {
  display: block;
  width: 100%;
}
.security-camera .flow__label {
  font-size: min(1.8vw, 18px);
  font-weight: 700;
  line-height: 1.4;
}
@media screen and (max-width: 768px) {
  .security-camera .flow__label {
    font-size: 13px;
  }
}
.security-camera .flow__arrow {
  flex-shrink: 0;
  align-self: center;
  width: min(3.8vw, 38px);
}
@media screen and (max-width: 768px) {
  .security-camera .flow__arrow {
    width: 20px;
  }
}
.security-camera .flow__arrow img {
  display: block;
  width: 100%;
}
.security-camera {
  /* ===== お問い合わせ ===== */
}
.security-camera .contact {
  padding: 70px 20px;
  background-image: linear-gradient(163deg, #fee101 14%, #f5a602 100%);
}
@media screen and (max-width: 768px) {
  .security-camera .contact {
    padding: 40px 15px;
  }
}
.security-camera .contact .inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.security-camera .contact__tel {
  padding: 55px 32px;
  margin-bottom: 18px;
  background-color: #fff;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .security-camera .contact__tel {
    padding: 32px 20px;
  }
}
.security-camera .contact__tel-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 800;
}
.security-camera .contact__tel-heading img {
  width: 22px;
}
.security-camera .contact__tel-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-bottom: 6px;
}
.security-camera .contact__tel-number img {
  margin-top: 10px;
  width: 58px;
}
.security-camera .contact__tel-number span {
  font-size: 50px;
  font-weight: 800;
  line-height: 1.4;
  color: #094e9c;
}
@media screen and (max-width: 768px) {
  .security-camera .contact__tel-number span {
    font-size: 32px;
  }
}
.security-camera .contact__tel-note {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.56;
}
@media screen and (max-width: 768px) {
  .security-camera .contact__tel-note {
    font-size: 13px;
  }
}
.security-camera .contact__tel-small {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.43;
}
@media screen and (max-width: 768px) {
  .security-camera .contact__tel-small {
    font-size: 11px;
  }
}
.security-camera .contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .security-camera .contact__grid {
    grid-template-columns: 1fr;
  }
}
.security-camera .contact__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 53px 38px 45px;
  background-color: #fff;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .security-camera .contact__box {
    padding: 28px 20px;
  }
}
.security-camera .contact__box-heading {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 20px;
  font-weight: 800;
}
.security-camera .contact__box-heading img {
  width: 28px;
}
.security-camera .contact__box-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.56;
}
.security-camera .contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 364px;
  height: 54px;
  padding: 0 56px;
  border-radius: 10px;
  background-color: #094e9c;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  transition: opacity 0.2s ease 0s;
}
.security-camera .contact__btn:hover {
  text-decoration: none;
  opacity: 0.85;
}
.security-camera .contact__btn img {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  flex-shrink: 0;
}

/* =========================================================
   あんしんカメラ Jモデル（下層ページ）
   ========================================================= */
.security-camera.jmodel {
  /* 共通見出しピル／流れアイコンを赤系に上書き */
}
.security-camera.jmodel .sec-heading {
  background-image: linear-gradient(176.8deg, #ca3b22 19.205%, #f8573b 70.309%);
}
.security-camera.jmodel .flow__num {
  color: #ef0000;
}
.security-camera.jmodel .flow__icon {
  background-image: linear-gradient(150.78deg, #ca3b22 19.205%, #f8573b 70.309%);
}
.security-camera.jmodel .flow__notes {
  margin-top: 32px;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .flow__notes {
    margin-top: 20px;
  }
}
.security-camera.jmodel .flow__notes-heading {
  margin-bottom: 0.4em;
  font-size: 14px;
  font-weight: 700;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .flow__notes-heading {
    font-size: 12px;
  }
}
.security-camera.jmodel .flow__notes p:not(.flow__notes-heading) {
  font-size: 14px;
  line-height: 1.4285714286;
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .flow__notes p:not(.flow__notes-heading) {
    font-size: 12px;
  }
}
.security-camera.jmodel .flow__notes p + p {
  margin-top: 0.2em;
}
.security-camera.jmodel {
  /* ===== ヒーロー ===== */
}
.security-camera.jmodel .jhero {
  position: relative;
  display: flex;
  align-items: stretch;
  height: min(31.25vw, 450px);
  background-color: #ca3b22;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jhero {
    flex-direction: column;
    height: auto;
  }
}
.security-camera.jmodel .jhero__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 54.375%;
  min-width: 0;
  padding-left: min(18.75vw, 270px);
  padding-right: 20px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jhero__inner {
    flex-basis: auto;
    padding: 24px 20px 32px;
    order: 2;
  }
}
.security-camera.jmodel .jhero__title {
  margin-bottom: min(1.8055555556vw, 26px);
  font-size: min(3.8194444444vw, 55px);
  font-weight: 700;
  line-height: 1.3636363636;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jhero__title {
    margin-bottom: 10px;
    font-size: min(7.4666666667vw, 40px);
  }
}
.security-camera.jmodel .jhero__sub {
  font-size: min(1.7361111111vw, 25px);
  font-weight: 800;
  line-height: 1.548;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jhero__sub {
    font-size: min(3.7333333333vw, 20px);
  }
}
.security-camera.jmodel .jhero__figure {
  flex: 1;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jhero__figure {
    flex: none;
    order: 1;
    aspect-ratio: 375/220;
  }
}
.security-camera.jmodel .jhero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.security-camera.jmodel {
  /* ===== あなたの暮らしの様々なシーンを見守ります ===== */
}
.security-camera.jmodel .jscenes {
  padding: 60px 20px;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jscenes {
    padding: 40px 15px;
  }
}
.security-camera.jmodel .jscenes .inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.security-camera.jmodel .jscenes__figure {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 36px auto 0;
  aspect-ratio: 900/643;
}
.security-camera.jmodel .jscenes__bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.security-camera.jmodel .jscenes__pointer {
  position: absolute;
  display: block;
  background-color: #f6cccc;
}
.security-camera.jmodel .jscenes__pointer--1 {
  left: 73.2%;
  top: 14.85%;
  width: 6.44%;
  height: 17.73%;
  clip-path: polygon(0% 100%, 56% 0%, 100% 0%);
}
.security-camera.jmodel .jscenes__pointer--2 {
  left: 65.83%;
  top: 56.5%;
  width: 13.39%;
  height: 11.74%;
  clip-path: polygon(0% 100%, 75.5% 0%, 100% 5.96%);
}
.security-camera.jmodel .jscenes__pointer--3 {
  left: 9.39%;
  top: 59.4%;
  width: 2.61%;
  height: 23.72%;
  clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}
.security-camera.jmodel .jscenes__pointer--4 {
  left: 56.9%;
  top: 78.5%;
  width: 9.39%;
  height: 8.17%;
  clip-path: polygon(0% 0%, 100% 56.2%, 87.6% 100%);
}
.security-camera.jmodel .jscenes__bubble {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f6cccc;
  border-radius: 4.5555555556cqw;
  padding: 0 3cqw;
}
.security-camera.jmodel .jscenes__bubble > p {
  font-size: 2cqw;
  font-weight: 800;
  line-height: 1.495;
  text-align: center;
}
.security-camera.jmodel .jscenes__bubble > p .sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jscenes__bubble > p {
    font-size: 3cqw;
  }
  .security-camera.jmodel .jscenes__bubble > p .sp {
    display: inline;
  }
}
.security-camera.jmodel .jscenes__hl {
  background-color: #fff;
  padding: 0 0.4cqw;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.security-camera.jmodel .jscenes__bubble--snow {
  left: 72.56%;
  top: 3.58%;
  width: 27.22%;
  height: 12.91%;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jscenes__bubble--snow {
    left: 71.2%;
    top: 1.87%;
    width: 29.94%;
    height: 16.33%;
  }
}
.security-camera.jmodel .jscenes__bubble--parcel {
  left: 72.11%;
  top: 45.4%;
  width: 25.22%;
  height: 12.91%;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jscenes__bubble--parcel {
    left: 70.85%;
    top: 43.69%;
    width: 27.74%;
    height: 16.33%;
  }
}
.security-camera.jmodel .jscenes__bubble--invasion {
  left: 63.67%;
  top: 81.96%;
  width: 33.67%;
  height: 12.91%;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jscenes__bubble--invasion {
    left: 61.99%;
    top: 80.25%;
    width: 37.04%;
    height: 16.33%;
  }
}
.security-camera.jmodel .jscenes__bubble--farm {
  left: 1.44%;
  top: 81.96%;
  width: 33.67%;
  height: 12.91%;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jscenes__bubble--farm {
    left: 0%;
    top: 77.4%;
    width: 37.04%;
    height: 22%;
  }
}
.security-camera.jmodel .jscenes__bubble--family {
  left: 0%;
  top: 2.8%;
  width: 25.22%;
  height: 39.2%;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.3333333333cqw;
  padding: 2.4444444444cqw 0 0;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jscenes__bubble--family {
    top: 0%;
    width: 27.74%;
    height: 45.1%;
  }
}
.security-camera.jmodel .jscenes__bubble--family img {
  display: block;
  width: 76%;
  border-radius: 1.3333333333cqw;
}
.security-camera.jmodel {
  /* ===== 便利機能 ===== */
}
.security-camera.jmodel .jfeature {
  padding: 89px 20px 78px;
  background-color: #f6cccc;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jfeature {
    padding: 48px 15px;
  }
}
.security-camera.jmodel .jfeature .inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.security-camera.jmodel .jfeature__list {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 34px;
  margin-bottom: 34px;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jfeature__list {
    gap: 15px;
  }
}
@media screen and (max-width: 640px) {
  .security-camera.jmodel .jfeature__list {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }
}
.security-camera.jmodel .jfeature__card {
  container-type: inline-size;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 280px;
  padding-top: 68px;
  padding-right: 20px;
  padding-bottom: 20px;
  background-color: #fff;
}
@media screen and (max-width: 640px) {
  .security-camera.jmodel .jfeature__card {
    width: 100%;
    max-width: 420px;
  }
}
.security-camera.jmodel .jfeature__num {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 48px;
  padding-bottom: 4px;
  border-radius: 0 0 17px 0;
  background-image: linear-gradient(176.8deg, #ca3b22 19.205%, #f8573b 70.309%);
  font-size: 30px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1.5px 1.5px 0 #000;
  line-height: 1;
}
.security-camera.jmodel .jfeature__body {
  padding-left: 30px;
}
.security-camera.jmodel .jfeature__title {
  margin-bottom: 15px;
  font-size: 9.3220338983cqw;
  font-weight: 800;
  line-height: 1.3;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jfeature__title {
    font-size: min(5.76vw, 27px);
  }
}
.security-camera.jmodel .jfeature__text {
  font-size: clamp(13px, 6.5cqw, 16px);
  line-height: 1.56;
}
.security-camera.jmodel .jfeature__notes p {
  font-size: 14px;
  line-height: 1.4285714286;
  padding-left: 1.5em;
  text-indent: -1.5em;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jfeature__notes p {
    font-size: 12px;
  }
}
.security-camera.jmodel .jfeature__notes p a {
  color: inherit;
  text-decoration: underline;
}
.security-camera.jmodel .jfeature__notes p + p {
  margin-top: 0.2em;
}
.security-camera.jmodel {
  /* ===== 商品詳細 ===== */
}
.security-camera.jmodel .jspec {
  padding: 60px 20px;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jspec {
    padding: 40px 15px;
  }
}
.security-camera.jmodel .jspec .inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.security-camera.jmodel .jspec__table {
  width: 100%;
  max-width: 840px;
  margin: 41px auto 0;
  border-collapse: collapse;
  font-size: 16px;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jspec__table {
    font-size: max(1.953125vw, 12px);
  }
}
.security-camera.jmodel .jspec__table tr {
  display: flex;
  flex-wrap: wrap;
}
.security-camera.jmodel .jspec__table th,
.security-camera.jmodel .jspec__table td {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border: 1px solid #000;
  line-height: 1.4;
  text-align: left;
  font-weight: normal;
}
.security-camera.jmodel .jspec__table th {
  width: 30%;
  background-color: #d9d9d9;
  font-weight: 600;
  border-right: none;
}
.security-camera.jmodel .jspec__table td {
  width: 70%;
  background-color: #fff;
}
.security-camera.jmodel .jspec__table tr + tr th,
.security-camera.jmodel .jspec__table tr + tr td {
  margin-top: -1px;
}
@media screen and (max-width: 640px) {
  .security-camera.jmodel .jspec__table th,
  .security-camera.jmodel .jspec__table td {
    width: 100%;
  }
  .security-camera.jmodel .jspec__table th {
    border-bottom: none;
  }
}
.security-camera.jmodel {
  /* ===== 月額利用料／キャンペーン ===== */
}
.security-camera.jmodel .jplan {
  padding: 60px 20px 90px;
  background-color: #f6cccc;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jplan {
    padding: 40px 15px 60px;
  }
}
.security-camera.jmodel .jplan .inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.security-camera.jmodel .jplan__price-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
@media screen and (max-width: 640px) {
  .security-camera.jmodel .jplan__price-row {
    flex-direction: column;
  }
}
.security-camera.jmodel .jplan__price-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 14px;
  background-image: linear-gradient(117.6deg, #dc462b 15.158%, #ffb641 49.983%, #f8573b 86.876%);
}
@media screen and (max-width: 640px) {
  .security-camera.jmodel .jplan__price-card {
    flex: none;
    width: 100%;
  }
}
.security-camera.jmodel .jplan__price-card-inner {
  container-type: inline-size;
  position: relative;
  padding: 2em;
  border: 2px solid #fff;
  border-radius: 21px;
  text-align: center;
  color: #fff;
}
.security-camera.jmodel .jplan__price-lead {
  margin-bottom: 0.8em;
  font-size: clamp(16.2px, 5.852cqw, 33.25px);
  font-weight: 700;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}
.security-camera.jmodel .jplan__price-main {
  margin-bottom: 0.1em;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  font-weight: 900;
}
.security-camera.jmodel .jplan__price-main .u1 {
  font-size: clamp(31.67px, 12.627cqw, 72.45px);
}
.security-camera.jmodel .jplan__price-main .u2 {
  font-size: clamp(45.75px, 18.009cqw, 103.5px);
  margin: 0 0.05em;
}
.security-camera.jmodel .jplan__price-figure {
  flex: 0 0 35%;
  max-width: 312px;
}
@media screen and (max-width: 640px) {
  .security-camera.jmodel .jplan__price-figure {
    flex: none;
    width: 60%;
    max-width: 260px;
  }
}
.security-camera.jmodel .jplan__price-figure img {
  display: block;
  width: 100%;
}
.security-camera.jmodel .jplan__note {
  margin-top: 24px;
  text-align: left;
}
.security-camera.jmodel .jplan__note p {
  font-size: 14px;
  line-height: 1.4285714286;
  padding-left: 1em;
  text-indent: -1em;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jplan__note p {
    font-size: 12px;
  }
}
.security-camera.jmodel .jplan__note p + p {
  margin-top: 0.2em;
}
.security-camera.jmodel {
  /* ===== フォーム ===== */
}
.security-camera.jmodel .jform {
  padding: 90px 20px 110px;
  background-image: linear-gradient(176.8deg, #ca3b22 19.205%, #f8573b 70.309%);
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jform {
    padding: 48px 15px 60px;
  }
}
.security-camera.jmodel .jform .inner {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.security-camera.jmodel .jform__box {
  padding: 45px;
  background-color: #fff;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jform__box {
    padding: 30px 15px;
  }
}
.security-camera.jmodel .jform__heading {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .security-camera.jmodel .jform__heading {
    margin-bottom: 20px;
  }
}
.security-camera.jmodel .jform__placeholder {
  font-size: 35px;
  font-weight: 700;
  color: #000;
}