/* ------------------------------- common.css ------------------------------- */
html,
body {
  min-width: 100%;
}

body {
  .num-txt {
    line-height: 1;
  }
}

/* ============ reset ============ */
.sx-cnt * {
  all: unset;
  display: revert;
  font-family: sans-serif;
  /* zoom: 120%; */
}

.sx-cnt_wrap {
  zoom: 120%;

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
    line-height: 1.5;
    letter-spacing: 0;
  }

  ol,
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  small,
  em,
  span,
  strong {
    font-style: normal;
    font-weight: inherit;
    color: inherit;
  }

  .img img {
    margin: inherit;
    width: inherit;
    display: inherit;
  }
}

/* ctaだけ除外 */
.sx-cnt_wrap div.cta_2011 {
  zoom: 80%;
}

/* -------------------------------- common_sp ------------------------------- */
@media (width <= 767px) {
  .sx-cnt * {
  }

  .sx-cnt_wrap {
    zoom: 100%;
  }

  .ddf_cw {
    width: 100%;
  }

  .bc_bg > .ddf_cw {
    width: calc(100% - var(--sp-2));
  }

  /* ============ reset ============ */
  .sx-cnt * {
    all: unset;
    display: revert;
    font-family: sans-serif;
    /* zoom: 120%; */
  }

  .sx-cnt_wrap {
    /* zoom: 125%; */

    *,
    ::before,
    ::after {
      box-sizing: border-box;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
      margin: 0;
      line-height: 1.5;
      letter-spacing: 0;
    }

    ol,
    ul {
      padding: 0;
      margin: 0;
    }

    small,
    em,
    span,
    strong {
      font-style: normal;
      font-weight: inherit;
      color: inherit;
    }

    p {
      font-size: var(--small-fz);
    }
  }

  /* ctaだけ除外 */
  .sx-cnt_wrap div.cta_2011 {
    /* zoom: 80%; */
  }
}

/* -------------------------------- style.css ------------------------------- */

.sec00 {
  height: 339px !important;
  background: no-repeat center / cover url("../img/sec00_bg.webp") !important;

  .sec00__title {
    color: inherit;
  }

  .sec00__textbox p {
    text-align: center;
  }
}

    .sec01 {
        padding-block: var(--sp-5);
        background-color: var(--clr-bg) !important;
    }

.sec02 {
  .sec02__item-button {
    border: 0;
  }
}

.close-btn {
  border: none;

  &:hover {
    cursor: pointer;
  }
}

/* style */
.sec03-list-item {
  margin: 0;
}
.sec03-list-item .txt-content .list {
  text-align: left;
}
.sec03-list-item .txt-content p {
  font-size: inherit;
}
.sec03-list-wrap .img {
  margin: 0;
}
.sec03-list_img {
}
.sec_03_anime01 {
  width: 86px !important;
}

/* ------------------------------ style_sp.css ------------------------------ */
@media (width <= 767px) {
  .sec00 {
    height: auto !important;
    background: no-repeat center / cover url("../img/sec00_bg.webp");
  }

  .sec_03_anime01 {
    width: 7.18vw !important;
  }
}

/* ------------------------------- 既存パーツ用 ------------------------------ */
.ddf-cnt_wrap #topics_2011 {
  margin-block: 0 !important;
}

@media (width <= 767px) {
  .ddf-cnt_wrap #topics_2011 {
    margin-block: 0 !important;

    .ddf_sp {
      display: block;
    }

    .flex_2011 {
      padding-inline: var(--sp-2);
    }
  }
}
.sub-header.sp {
  display: block !important;
}
.mini-header,
.main-header,
.sub-header {
  letter-spacing: 0;
  line-height: 1;
}

#police-cooperation .reveal #topics_2011 {
  margin-top: 0 !important;
}

/* .more_btn_2011 */
.more_btn_2011 {
  /* zoom: 80%; */
}
.more_btn_2011 a {
  width: fit-content;
  display: block;
  margin: 0 auto;
}

.more_btn_2011 {
}
.more_btn_2011 a {
}
.more_btn_2011 a span {
  position: relative;
  display: block;
  text-align: center;
  width: 330px;
  margin: 0 auto;
  padding: 18px 0 18px 20px;
  background-color: #ffffff;
  color: #353738;
  border: 4px solid #353738;
  border-radius: 12px;
  font-size: 30px;
  line-height: 1;
  box-shadow: 0 2px 20px -5px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease-in-out;
}
.more_btn_2011 a span:before {
  content: "";
  margin: 0;
  padding: 0;
  top: 25.5px;
  left: 46px;
  position: absolute;
  border: 4px solid #353738;
  border-left: none;
  border-top: none;
  height: 17px;
  width: 17px;
  transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transition: all 0.2s ease-in-out;
}
.more_btn_2011 a span:hover {
  /*	transform: scale(1.02, 1.02);*/
  color: #ffffff;
  background-color: #353738;
  opacity: 1;
}
.more_btn_2011 a span:hover:before {
  border-color: #ffffff;
}

/* .more_btn_2011 */
.more_btn_2011 {
  /* zoom: 80%; */
}
.more_btn_2011 a {
  width: fit-content;
  display: block;
  margin: 0 auto;
}

/* 法人様向けサービス */
.under_line {
  position: relative;
  /* 親要素を基準に子要素を配置 */
  display: inline-block;
  /* コンテナのサイズを画像に合わせる */
  margin-bottom: 30px;
  margin-top: -88px;
  /* z-index: -1; */
  z-index: 0;
}

.under_line img {
  position: absolute;
  /* 画像を重ねるために絶対位置を指定 */
  width: 100%;
  /* 必要に応じてサイズを調整 */
  height: auto;
}

.kojin {
  z-index: 1;
  /* 背面に配置 */
  margin-top: 5px;
}

.hojin {
  z-index: 2;
  /* 前面に配置 */
}

/* 基本的にPCでは表示しない設定 */
.hojin_kojin_sp,
.hojin_title,
.kojin_title2,
.center-container_1 {
  display: none;
}

.ddf-cnt_wrap #service_2011 {
  zoom: 127% !important;
}

/* モバイル（768px 以下）でのみ表示 */
@media screen and (max-width: 767px) {
  /* モバイル画面 */
  .under_line {
    display: block;
  }

  .center-container_1 {
    display: block;
  }
  .service_card_2011 ul a {
    width: 100% !important;
    margin-bottom: 5px;
  }
  .ddf-cnt_wrap #service_2011 {
    zoom: 100% !important;
  }

  #service_2011 .flex_2011 ~ .service_card_2011 h3 {
    margin-top: 0;
  }
  #service_2011 {
    padding: 20px 0 0 !important;
  }
  .service_card_2011 img {
    height: auto !important;
  }
}

@media screen and (max-width: 768px) {
  .hojin_kojin_sp {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 25px 30px 21px 30px;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo,
      "sans-serif";
  }

  .click_sp {
    width: 25px;
    height: auto;
    margin-bottom: 3px;
    margin-left: 7px;
  }

  .hojin_title {
    font-size: 20px !important;
    display: block;
    /* PCでは非表示なので、モバイルで表示されるように追加 */
    color: #fff;
    text-align: center;
    font-weight: 300;
    line-height: 1.2;
    margin-left: 14px;
  }

  .kojin_title_sp {
    font-size: 24px;
    color: #fff;
    text-decoration-line: underline;
    font-weight: 250;
    line-height: normal;
  }

  .kojin_title2 {
    display: flex;
    align-items: center;
    font-size: 18px !important;
    color: #8a8a8a;
    text-align: center;
    font-weight: 250;
    line-height: 1.2;
    gap: 1px;
    margin-bottom: 4px;
  }

  .pc-none {
    display: none;
    /* PCで非表示にするため、この設定は不要。PCではすでにデフォルトで非表示 */
  }

  /* モバイル（SP）で center-container_1 を非表示 */
  .center-container_1.sp-none {
    display: none !important;
  }
}

/* PC用のスタイル */
@media screen and (min-width: 769px) {
  .hojin_kojin_sp {
    display: none;
    /* PCでは非表示にする */
  }

  /* PCで under_line を非表示 */
  .under_line {
    display: none !important;
  }

  .center-container_1 {
    display: none !important;
  }
}
.h2_2011 h2 {
  font-size: 30px !important;
  margin-bottom: 20px !important;
}
.h2_2011 h2 span {
  font-size: 13px !important;
  margin-left: 14px !important;
}

.hojin_title {
  font-size: 16px;
}

.kojin_title2 {
  font-size: 16px;
}

.link-icon2 {
  height: 20px;
  width: 20px;
}

.kojin_title {
  color: #45a0dd;
  font-size: 38px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  text-decoration-line: underline;
  margin-right: 10px;
}

@media screen and (max-width: 600px) {
  .ddf-cnt_wrap #service_2011 {
    .service_card_2011 img {
      width: 25% !important;
    }

    .h2_2011 {
      margin-top: 20px;
    }
  }
}