/*! Writen  by SCSS */
.security_area .security_group {
  flex-direction: column;
  row-gap: clamp(80px, 10.77vw, 140px); }
  @media screen and (max-width: 820px) {
    .security_area .security_group {
      row-gap: 30px; } }
  @media screen and (max-width: 480px) {
    .security_area .security_group {
      row-gap: 80px; } }
  .security_area .security_group .security_in .secu_group {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 40px 1.88%; }
    @media screen and (max-width: 480px) {
      .security_area .security_group .security_in .secu_group {
        gap: 40px 0; } }
    .security_area .security_group .security_in .secu_group .item {
      position: relative;
      width: 49.06%; }
      @media screen and (max-width: 480px) {
        .security_area .security_group .security_in .secu_group .item {
          width: 100%; } }
      .security_area .security_group .security_in .secu_group .item.item01 {
        width: 100%; }
        .security_area .security_group .security_in .secu_group .item.item01 .item_text_group {
          width: 48.98%;
          position: relative; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .secu_group .item.item01 .item_text_group {
              width: 100%;
              margin-bottom: 20px; } }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .secu_group .item.item01 .item_text_group .item_name {
              line-height: 1.4; } }
          .security_area .security_group .security_in .secu_group .item.item01 .item_text_group .item_name .cap_l.inline {
            display: inline; }
          .security_area .security_group .security_in .secu_group .item.item01 .item_text_group .item_read .letter {
            letter-spacing: -0.03em; }
          .security_area .security_group .security_in .secu_group .item.item01 .item_text_group .item_read .cap_l {
            margin-top: 0; }
        .security_area .security_group .security_in .secu_group .item.item01 .diagram_img {
          position: absolute;
          right: 0;
          top: 20px;
          width: 95.48%;
          pointer-events: none; }
          @media screen and (max-width: 820px) {
            .security_area .security_group .security_in .secu_group .item.item01 .diagram_img {
              top: 35px; } }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .secu_group .item.item01 .diagram_img {
              width: 100%;
              position: relative;
              right: auto;
              top: auto;
              margin: 20px 0; } }
          .security_area .security_group .security_in .secu_group .item.item01 .diagram_img .cap {
            right: 51%; }
            @media screen and (max-width: 480px) {
              .security_area .security_group .security_in .secu_group .item.item01 .diagram_img .cap {
                right: 60%; } }
        .security_area .security_group .security_in .secu_group .item.item01 .interphone {
          width: 48.98%;
          justify-content: flex-start;
          column-gap: 30px;
          margin-top: 18%; }
          @media screen and (max-width: 820px) {
            .security_area .security_group .security_in .secu_group .item.item01 .interphone {
              margin-top: 15%; } }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .secu_group .item.item01 .interphone {
              width: 100%;
              margin-top: 0;
              justify-content: space-between;
              gap: 0; } }
          .security_area .security_group .security_in .secu_group .item.item01 .interphone .text_group {
            width: 56.55%; }
            @media screen and (max-width: 480px) {
              .security_area .security_group .security_in .secu_group .item.item01 .interphone .text_group {
                width: 73%; } }
            .security_area .security_group .security_in .secu_group .item.item01 .interphone .text_group .t01 {
              background: #db5a39;
              line-height: 1.4;
              text-align: center;
              font-size: clamp(12px, 1.077vw, 14px);
              color: #FFF;
              padding: 5px;
              margin-bottom: 5px; }
              @media screen and (max-width: 480px) {
                .security_area .security_group .security_in .secu_group .item.item01 .interphone .text_group .t01 {
                  font-size: 13px; } }
            .security_area .security_group .security_in .secu_group .item.item01 .interphone .text_group .t02 {
              font-size: clamp(10px, 0.924vw, 12px);
              line-height: 1.3; }
              @media screen and (max-width: 480px) {
                .security_area .security_group .security_in .secu_group .item.item01 .interphone .text_group .t02 {
                  font-size: 12px; } }
          .security_area .security_group .security_in .secu_group .item.item01 .interphone .phone_img {
            width: 12.74%; }
            @media screen and (max-width: 480px) {
              .security_area .security_group .security_in .secu_group .item.item01 .interphone .phone_img {
                width: 23%; } }
      @media screen and (max-width: 480px) {
        .security_area .security_group .security_in .secu_group .item.item03 {
          flex-direction: column;
          row-gap: 30px; } }
      .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first {
        width: 49.66%; }
        @media screen and (max-width: 480px) {
          .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first {
            width: 100%; } }
        .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first .image {
          margin: 10px 0 5px; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first .image {
              width: 100%;
              margin: 10px auto; } }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first .image img {
              width: 100%; } }
        .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first .point_group {
          flex-direction: column;
          font-size: 10px;
          line-height: 1.6;
          gap: 5px 0; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first .point_group {
              width: 100%;
              gap: 5px 0;
              font-size: 13px; } }
          .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first .point_group .point {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 2px 5px;
            letter-spacing: -0.08em; }
            .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first .point_group .point .num {
              flex-shrink: 0;
              width: 12px;
              height: 12px;
              display: flex;
              justify-content: center;
              align-items: center;
              color: #FFF;
              background: #746552; }
              @media screen and (max-width: 480px) {
                .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first .point_group .point .num {
                  width: 24px;
                  height: 24px; } }
            .security_area .security_group .security_in .secu_group .item.item03 .item03_in.first .point_group .point .text {
              line-height: 1.2; }
      .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second {
        width: 44.78%;
        flex-direction: column;
        row-gap: 15px; }
        @media screen and (max-width: 820px) {
          .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second {
            width: 48%; } }
        @media screen and (max-width: 480px) {
          .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second {
            width: 100%;
            row-gap: 20px; } }
        .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .item_text_group .item_name {
          background: #db5a39;
          font-size: clamp(11px, 1.077vw, 14px);
          color: #FFF;
          line-height: 1.4;
          padding: 5px;
          letter-spacing: -0.05em;
          border: none; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .item_text_group .item_name {
              font-size: 14px; } }
        .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .item_text_group .item_read {
          font-size: clamp(10px, 0.924vw, 12px); }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .item_text_group .item_read {
              font-size: 12px; } }
        .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .image {
          margin: 10px auto 0; }
          .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .image.image01 {
            width: 97.67%; }
            @media screen and (max-width: 480px) {
              .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .image.image01 {
                width: fit-content; } }
            .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .image.image01 .cap {
              right: 35%; }
          .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .image.image02 {
            width: 63.04%; }
            @media screen and (max-width: 480px) {
              .security_area .security_group .security_in .secu_group .item.item03 .item03_in.second .second_in .image.image02 {
                width: fit-content; } }
  .security_area .security_group .security_in .after_group {
    flex-wrap: wrap;
    row-gap: clamp(40px, 6.154vw, 80px); }
    @media screen and (max-width: 480px) {
      .security_area .security_group .security_in .after_group .item .item_text_group .item_name.line2 {
        line-height: 1.6; } }
    .security_area .security_group .security_in .after_group .item.item01 {
      width: 54.28%; }
      @media screen and (max-width: 480px) {
        .security_area .security_group .security_in .after_group .item.item01 {
          width: 100%; } }
      @media screen and (max-width: 480px) {
        .security_area .security_group .security_in .after_group .item.item01 .item_text_group {
          margin-bottom: 20px; } }
      .security_area .security_group .security_in .after_group .item.item01 .image {
        margin-top: 20px; }
    .security_area .security_group .security_in .after_group .item.item02 {
      width: 40.86%; }
      @media screen and (max-width: 480px) {
        .security_area .security_group .security_in .after_group .item.item02 {
          width: 100%; } }
      .security_area .security_group .security_in .after_group .item.item02 .leben_group {
        background: #4c6a78;
        padding: 20px 25px;
        margin-top: 20px;
        color: #FFF; }
        @media screen and (max-width: 820px) {
          .security_area .security_group .security_in .after_group .item.item02 .leben_group {
            padding: 15px; } }
        .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben_ttl {
          font-size: clamp(12px, 1.077vw, 14px);
          padding-bottom: 10px;
          margin-bottom: 10px;
          line-height: 1.4;
          border-bottom: 1px solid #FFF; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben_ttl {
              font-size: 14px; } }
        .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben_read {
          font-size: clamp(10px, 0.924vw, 12px);
          line-height: 1.4; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben_read {
              font-size: 12px; } }
        .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point {
          flex-wrap: wrap;
          gap: 10px 0;
          margin: 10px 0;
          color: #4c6a78; }
          .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point .point_in {
            width: 48.6%;
            background: #e3e9ed;
            padding: 15px 10px; }
            @media screen and (max-width: 820px) {
              .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point .point_in {
                padding: 6px; } }
            @media screen and (max-width: 480px) {
              .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point .point_in {
                padding: 10px 6px; } }
            .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point .point_in .point_ttl {
              font-size: clamp(12px, 1.077vw, 14px);
              text-align: center;
              line-height: 1.4; }
              @media screen and (max-width: 480px) {
                .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point .point_in .point_ttl {
                  font-size: 13px; } }
            .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point .point_in .point_read_group {
              margin-top: 10px; }
              .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point .point_in .point_read_group .point_read {
                font-size: clamp(10px, 0.924vw, 12px);
                line-height: 1.15; }
                @media screen and (max-width: 480px) {
                  .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point .point_in .point_read_group .point_read {
                    font-size: 11px; } }
                .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben4_point .point_in .point_read_group .point_read.indent {
                  text-indent: -1em;
                  padding-left: 1em; }
        .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben_iso .iso_text {
          width: 82%;
          font-size: 11px;
          line-height: 1.3; }
          .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben_iso .iso_text .small {
            display: block;
            font-size: 10px;
            margin-top: 3px; }
        .security_area .security_group .security_in .after_group .item.item02 .leben_group .leben_iso .iso_image {
          width: 14.96%; }
    .security_area .security_group .security_in .after_group .item.item03 {
      width: 100%; }
      @media screen and (max-width: 480px) {
        .security_area .security_group .security_in .after_group .item.item03 .item_text_group {
          margin-bottom: 20px; } }
      .security_area .security_group .security_in .after_group .item.item03 .image {
        margin-top: 20px; }
    .security_area .security_group .security_in .after_group .item.item04 {
      width: 100%; }
      @media screen and (max-width: 480px) {
        .security_area .security_group .security_in .after_group .item.item04 {
          flex-direction: column;
          row-gap: 20px; } }
      .security_area .security_group .security_in .after_group .item.item04 .item04_left {
        width: 32.48%;
        text-align: center;
        display: flex;
        flex-direction: column;
        row-gap: 15px;
        line-height: 1.5; }
        @media screen and (max-width: 480px) {
          .security_area .security_group .security_in .after_group .item.item04 .item04_left {
            width: 100%; } }
        .security_area .security_group .security_in .after_group .item.item04 .item04_left .takara_ttl {
          align-items: center;
          font-size: clamp(13px, 1.308vw, 17px);
          color: #036eb7;
          column-gap: 5px; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .after_group .item.item04 .item04_left .takara_ttl {
              font-size: 16px; } }
        .security_area .security_group .security_in .after_group .item.item04 .item04_left .takara_read {
          font-size: clamp(11px, 1.154vw, 15px);
          line-height: 2; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .after_group .item.item04 .item04_left .takara_read {
              font-size: 14px; } }
          .security_area .security_group .security_in .after_group .item.item04 .item04_left .takara_read .color_dot {
            display: block;
            color: #036eb7; }
      .security_area .security_group .security_in .after_group .item.item04 .item04_right {
        width: 64.96%;
        flex-wrap: wrap;
        gap: 10px 0; }
        @media screen and (max-width: 480px) {
          .security_area .security_group .security_in .after_group .item.item04 .item04_right {
            width: 100%;
            justify-content: space-between; } }
        .security_area .security_group .security_in .after_group .item.item04 .item04_right .box {
          width: 48.69%;
          position: relative; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .after_group .item.item04 .item04_right .box {
              width: 48%; } }
          .security_area .security_group .security_in .after_group .item.item04 .item04_right .box:after {
            content: "";
            position: absolute;
            inset: 0;
            border: 1px solid #000;
            pointer-events: none; }
          .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .box_ttl {
            background: linear-gradient(to right, #1f98d4 0%, #1e2c75 100%);
            padding: clamp(15px, 1.539vw, 20px) 5px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: clamp(12px, 1.385vw, 18px);
            color: #FFF;
            line-height: 1.2; }
            @media screen and (max-width: 480px) {
              .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .box_ttl {
                padding: 12px 5px;
                font-size: 3.6vw;
                line-height: 1.3; } }
            .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .box_ttl.line1 {
              line-height: 2.4; }
              @media screen and (max-width: 480px) {
                .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .box_ttl.line1 {
                  line-height: 2.6; } }
          .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .text_group {
            padding: 25px 20px 20px; }
            @media screen and (max-width: 820px) {
              .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .text_group {
                padding: 10px; } }
            .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .text_group .box_sub_ttl {
              text-align: center;
              font-size: clamp(14px, 1.539vw, 20px);
              display: flex;
              justify-content: center;
              align-items: center;
              line-height: 1.3;
              padding-bottom: clamp(15px, 1.539vw, 20px);
              margin-bottom: clamp(15px, 1.539vw, 20px);
              border-bottom: 1px solid #000; }
              @media screen and (max-width: 480px) {
                .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .text_group .box_sub_ttl {
                  font-size: 13px;
                  padding-bottom: 10px;
                  margin-bottom: 10px; } }
            .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .text_group .box_read_group.first {
              text-align: center; }
              @media screen and (max-width: 480px) {
                .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .text_group .box_read_group.first {
                  text-align: left; } }
            .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .text_group .box_read_group .box_read {
              font-size: clamp(11px, 1.231vw, 16px);
              line-height: 1.5; }
              @media screen and (max-width: 480px) {
                .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .text_group .box_read_group .box_read {
                  font-size: 11px; } }
              @media screen and (max-width: 480px) {
                .security_area .security_group .security_in .after_group .item.item04 .item04_right .box .text_group .box_read_group .box_read.indent {
                  text-indent: -1.2em;
                  padding-left: 1.2em; } }
        .security_area .security_group .security_in .after_group .item.item04 .item04_right .item04_right_cap {
          width: 100%; }
          @media screen and (max-width: 480px) {
            .security_area .security_group .security_in .after_group .item.item04 .item04_right .item04_right_cap {
              text-align: left; } }

/*# sourceMappingURL=quality04.css.map */
