@charset "UTF-8";
@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&family=Oswald:wght@200..700&display=swap);

:root {
  --main-clr-wt: #ffffff;
  --main-clr-rd: #cc0033;
  --main-clr-lrd: #ffeaed;
  --main-clr-yl: #feda00;
  --main-clr-blg: #404057;
  --main-clr-bl: #363b82;
  --ff-oswald: 'Oswald', sans-serif;
}

/*---------------------------------------
  共通系
---------------------------------------*/
main {
  font-family: 'Noto Sans JP', Helvetica, Neue Haas Grotesk, Arial;
  font-size: 18px;
  font-weight: 500;
}
main * {
  font-family: 'Noto Sans JP', Helvetica, Neue Haas Grotesk, Arial;
}
main *,
main * ::before,
main * ::after {
  box-sizing: border-box;
}
main img {
  vertical-align: bottom;
}

.sp-only {
  display: none;
}

.conts-inner {
  width: 1020px;
  margin: 0 auto;
}
.conts--bg {
  margin: 0 auto;
  border-radius: 40px 40px 0 0;
}


/* ボタン */
.primary-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 70px;
  margin: 10px 0;
  padding: 0 50px;
  border-radius: 10px;
  background: linear-gradient(0deg, rgba(189, 0, 46, 1) 0%, rgba(228, 15, 67, 1) 100%);
  color: var(--main-clr-wt)!important;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 7px 0 0 #890022;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}
.primary-btn::after {
  position: absolute;
  top: 50%;
  right: 19px;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/icon_arrow.png) no-repeat top left;
}
.primary-btn:hover {
  transform: translateY(7px);
  box-shadow: none;
}

.primary-btn--wt {
  border: 2px solid var(--main-clr-rd);
  background: var(--main-clr-wt);
  color: var(--main-clr-rd) !important;
}
.primary-btn--wt::after {
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/icon_arrow-rd.png) no-repeat top left;
}


/* 見出し */
.primary-heading {
  position: relative;
  padding: 0 0 35px;
  font-size: 38px;
  font-weight: bold;
  text-align: center;
}
.primary-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 5px;
  background: var(--main-clr-rd);
}

/* テキスト */
.note-txt {
  font-size: 14px;
}
.note-txt--r {
  text-align: right;
}

.slash-txt {
  text-align: center;
}
.slash-txt > span {
  display: inline-block;
  /*padding: 0 74px; 文字数が増えたので幅を広げる*/
  padding: 0 55px;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.6;
}
.slash-txt--rd > span,
.slash-txt > span span {
  color: var(--main-clr-rd);
}
.slash-txt > span::before,
.slash-txt > span::after {
  position: absolute;
  bottom: 26px;
  content: "";
  display: inline-block;
  width: 62px;
  height: 4px;
  border-radius: 100vh;
  background: var(--main-clr-rd);
}
.slash-txt > span::before {
  /*left: 10px; 文字数が増えたので幅を広げる*/
  left: 0;
  transform: rotate(60deg);
}
.slash-txt > span::after {
  /*right: 10px; 文字数が増えたので幅を広げる*/
  right: 0;
  transform: rotate(-60deg);
}

.marker-txt {
  margin: 37px 0 0;
  text-align: center;
}
.marker-txt span {
  display: inline-block;
  background: linear-gradient(transparent 60%, #ffda37 60%);
  font-size: 30px;
  font-weight: bold;
}

.explan-txt {
  margin: 43px 0 0;
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
}

/* リンク */
.underline-link {
  text-decoration: underline;
}
.underline-link:hover {
  color: var(--main-clr-rd);
  text-decoration: none;
}

@media screen and (max-width: 768px) {
  .main-article {
    padding-top: 0;
  }

  .pc-only {
    display: none;
  }
  .sp-only {
    display: block;
  }

  .conts-inner {
    width: 100%;
    padding: 0 20px;
  }

  .conts--bg {
    border-radius: 20px 20px 0 0;
  }

  /* ボタン */
  .primary-btn {
    max-width: 320px;
    height: 50px;
    margin: 10px auto 0;
    border-radius: 5px;
    font-size: 16px;
  }

  /* 見出し */
  .primary-heading {
    padding-bottom: 18px;
    font-size: 28px;
    line-height: 1.3;
  }

  /* テキスト */
  .note-txt {
    font-size: 12px;
  }

  .slash-txt > span {
    font-size: 18px !important;
  }

  .marker-txt {
    margin-top: 32px;
  }
  .marker-txt span {
    font-size: 20px;
  }

  .explan-txt {
    margin-top: 26px;
    font-size: 12px;
    line-height: 1.6;
  }

}


/* TOP */
.conts.top {
  padding: 0 0 99px;
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/design_bg-pc.png) no-repeat bottom center;
}
.top .conts-inner {
  width: auto;
}
.top-box {
  width: 1598px;
  min-height: 660px;
  margin: 0 auto;
  padding: 58px 0 0 290px;
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/mv_img-pc.png) no-repeat top left;
}
.top-item {
  max-width: 600px;
}
.top-point {
  padding: 5px 0;
  border-radius: 100vh;
  background: var(--main-clr-yl);
  font-size: 26px;
  font-weight: bold;
  text-align: center;
}
.top-heading {
  margin: -5px 0 0;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 2px;
}
.top-heading_inner {
  display: flex;
  align-items: center;
  margin: 10px 0 0;
}
.top-heading_inner:nth-child(n + 2) {
  margin-top: -13px;
}
.top-heading_point {
  margin: 0 -7px 0 0;
  color: var(--main-clr-rd);
  font-size: 62px;
  letter-spacing: -5px;
}
.top-en {
  margin: 10px 0 0;
  color: var(--main-clr-blg);
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.2em;
}
.top-list{
  display: flex;
  justify-content: space-between;
  margin: 22px 0 0;
}
.top-list_item {
  position: relative;
  width: 180px;
  height: 180px;
  padding: 40px 0 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 0 0 rgba(68, 68, 66, 0.3);
  font-weight: bold;
  text-align: center;
}
.top-list_txt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  font-size: 16px;
  line-height: 1.2;
}
.top-list_item:nth-child(3) .top-list_txt {
  font-size: 14px;
}
.top-list_item::before {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  display: inline-block;
  width: 28px;
  height: 30px;
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/icon_check.png) no-repeat top left / contain;
}
.top-list_ttl {
  color: var(--main-clr-rd);
  font-size: 24px;
  line-height: 1.2;
}

.btn-point {
  margin: 22px 0 0;
  text-align: center;
}
.btn-point span {
  display: inline-block;
  padding: 0 32px;
  color: var(--main-clr-rd);
  font-size: 22px;
  font-weight: bold;
}
.btn-point span::before,
.btn-point span::after {
  position: absolute;
  top: 50%;
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--main-clr-rd);
}
.btn-point span::before {
  left: -4px;
  transform: rotate(45deg) translateY(-50%);
}
.btn-point span::after {
  right: -4px;
  transform: rotate(-45deg) translateY(-50%);
}

@media screen and (max-width: 768px) {
  .conts.top {
    padding: 0 0 60px;
    background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/design_bg-sp.png) no-repeat bottom center / contain;
  }
  .top .conts-inner {
    padding: 0;
  }
  .top-box {
    width: 100%;
    min-height: auto;
    padding: 0;
    border-radius: 0 0 5.3vw 5.3vw;
    background: #eeeef4;
    overflow: hidden;
  }
  .top-item {
    position: relative;
    margin: 0 auto;
    padding: 20px 20px 0;
    z-index: 10;
  }
  .mv_img {
    margin-top: -42px;
  }
  .top-point {
    padding: 2px 0;
    font-size: 13px;
  }
  .top-heading {
    margin-top: 9px;
    text-align: center;
    font-size: 24px;
  }
  .top-heading_inner {
    justify-content: center;
  }
  .top-heading_inner:nth-child(n + 2) {
    margin-top: 0;
  }
  .top-heading_point {
    margin-right: 5px;
    font-size: 36px;
  }
  .top-en {
    margin-top: 2px;
    font-size: 11px;
    text-align: center;
  }
  .top-list {
    display: block;
    margin-top: 19px;
  }
  .top-list_item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    min-height: 46px;
    height: auto;
    padding: 7px 10px 7px 52px;
    border-radius: 100vh;
  }
  .top-list_txt {
    display: block;
    min-height: auto;
    font-size: 12px;
  }
  .top-list_item:nth-child(3) .top-list_txt {
    font-size: 12px;
  }
  .top-list_item::before {
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
  }
  .top-list_item:nth-child(n + 2) {
    margin-top: 6px;
  }
  .top-list_ttl {
    font-size: 12px;
  }

  .btn-point {
    margin-top: 20px;
    line-height: 1.4;
  }
  .btn-point span {
    font-size: 14px;
  }
  .btn-point span::before,
  .btn-point span::after {
    top: auto;
    bottom: 7px;
    width: 18px;
  }
  .btn-point span::before {
    left: 16px;
    transform: rotate(45deg);
  }
  .btn-point span::after {
    right: 16px;
    transform: rotate(-45deg);
  }

}


/* イントロ */
.intro-heading {
  text-align: center;
  margin: 70px 0 0;
  font-weight: bold;
}
.intro-heading span {
  display: inline-block;
  color: var(--main-clr-rd);
}
.intro-heading > span {
  position: relative;
  padding: 0 4px 9px;
  border-bottom: 4px solid var(--main-clr-rd);
  font-size: 38px;
}
.intro-heading > span::after {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  display: inline-block;
  border-top: 20px solid var(--main-clr-rd);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}
.intro-heading > span span {
  font-size: 24px;
}
.intro-txt {
  margin: 34px 0 0;
  font-size: 28px;
  font-weight: bold;
  text-align: center;
  line-height: 1.65;
}

.red-box {
  max-width: 1240px;
  margin: 36px auto 0;
  padding: 53px 138px;
  background: #ffeaed;
  border-radius: 40px;
  text-align: center;
}

.intro-list {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0;
}
.intro-list_item {
  position: relative;
  width: 280px;
  padding: 23px 0 42px;
  border-radius: 30px;
  background: var(--main-clr-wt);
}
.intro-list_txt {
  position: absolute;
  bottom: -21px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  padding: 12px 0;
  border-radius: 100vh;
  background: var(--main-clr-rd);
  color: var(--main-clr-wt);
  line-height: 1;
}

@media screen and (max-width: 768px) {
  .intro-heading {
    margin-top: 52px;
  }
  .intro-heading > span {
    padding: 0 26px 8px;
    font-size: 28px;
  }
  .intro-heading > span span {
    display: block;
    font-size: 16px;
  }
  .intro-txt{
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.5;
  }

  .red-box {
    margin: 18px 20px 0;
    padding: 29px 20px;
    border-radius: 20px;
  }
  .red-box .slash-txt > span {
    display: block;
    max-width: 375px;
    margin: 0 auto;
    padding: 0 20px;
    line-height: 1.38;
  }
  .red-box .slash-txt > span::before {
    left: -16px;
  }
  .red-box .slash-txt > span::after {
    right: -16px;
  }

  .intro-list {
    justify-content: center;
    margin-top: 19px;
  }
  .intro-list + .intro-list {
    margin-top: 34px;
    justify-content: space-between;
  }

  .intro-list_item {
    width: 46%;
    border-radius: 10px;
    padding: 12px 4px 20px;
  }
  .intro-list_txt {
    bottom: -16px;
    width: 88%;
    padding: 8px 0;
    font-size: 15px;
  }

}


/* サービスのポイント */
.conts.point {
  padding: 99px 0 140px;
  background: #f4f4fa;
}

.point-list {
  display: flex;
  justify-content: space-between;
  margin: 60px 0 0;
}
.point-list_item {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 320px;
  padding: 64px 0 36px;
  border-radius: 20px;
  background: var(--main-clr-wt);
  text-align: center;
}
.point-list_num {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--main-clr-rd);
  color: var(--main-clr-wt);
  font-size: 32px;
  font-family: var(--ff-oswald);
}
.point-list_txt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  margin: 20px 0 0;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6;
}
.point-structure {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 80px 0 0;
}
.point-structure + .note-txt{
  margin-top: 21px;
}

.structure-item {
  width: 480px;
  text-align: center;
}

.structure-connect{
  position: absolute;
  top: 322px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.structure-item_point {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 146px;
  padding: 0 0 18px;
  font-size: 20px;
  font-weight: bold;
}
.structure-item_point span {
  font-size: 24px;
}
.structure-item_img {
  display: flex;
  justify-content: center;
  gap: 31px;
}
.structure-box_detail {
  margin: 20px 0 0;
  border-radius: 20px;
  background: var(--main-clr-wt);
  overflow: hidden;
}
.structure-box_heading {
  padding: 22px 0;
  color: var(--main-clr-wt);
  font-size: 24px;
}
.structure-box_inner {
  padding: 16px;
}

.structure-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 0;
}
.structure-list_item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(50% - 5px);
  padding: 14px 0;
  border-radius: 6px;
  font-weight: bold;
  line-height: 1.3;
}
.structure-list_item span {
  font-size: 12px;
}


/* 個別設定 */
.structure-item--01 .structure-item_point {
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/point_sb-app-pc.png) no-repeat top left / contain;
}
.structure-item--01 .structure-item_point span {
  color: var(--main-clr-rd);
}
.structure-item--01 .structure-box_heading {
  background: var(--main-clr-rd);
}
.structure-item--01 .structure-list_item {
  background: #fff0f0;
}
.structure-item--01 .structure-list_item p,
.structure-item--01 .structure-list_item span {
  color: var(--main-clr-rd);
}
.structure-item--01 .structure-list_item span {
  display: block;
  margin-top: 0;
}

.structure-item--02 .structure-item_point {
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/point_sb-db-pc.png) no-repeat top left / contain;
}
.structure-item--02 .structure-item_point span {
  color: var(--main-clr-bl);
}
.structure-item--02 .structure-box_heading {
  background: var(--main-clr-bl);
}
.structure-item--02 .structure-list_item {
  background: #e5eff5;
}
.structure-item--02 .structure-list_item.point {
  background: #4949b6;
  color: var(--main-clr-wt);
}
.structure-item--02 .structure-list_item p,
.structure-item--02 .structure-list_item sup {
  color: var(--main-clr-bl);
}

.bl-box {
  margin: 80px 0 0;
  padding: 30px 40px 40px;
  border-radius: 20px;
  background: #e0e0ef;
  text-align: center;
}
.bl-box_txt {
  font-size: 24px;
  font-weight: bold;
}
.plus-box {
  display: flex;
  justify-content: space-between;
  margin: 42px 0 0;
}
.plus-box_item {
  position: relative;
  width: 460px;
  padding: 29px 29px 13px;
  border-radius: 20px;
  background: var(--main-clr-wt);
}
.plus-box_ttl {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 180px;
  padding: 4px 0;
  border-radius: 100vh;
  color: var(--main-clr-wt);
  font-size: 20px;
  font-weight: bold;
}
.plus-box_txt {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}

.plus-box_item.plus-box_item--01 {
  border: 4px solid var(--main-clr-rd);
}
.plus-box_item--01 .plus-box_ttl {
  background: var(--main-clr-rd);
}

.plus-box_item.plus-box_item--02 {
  border: 4px solid var(--main-clr-bl);
}
.plus-box_item.plus-box_item--02::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-75%, -50%);
  content: "";
  display: inline-block;
  width: 60px;
  height: 60px;
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/icon_plus.png) no-repeat center / contain;
}
.plus-box_item--02 .plus-box_ttl {
  background: var(--main-clr-bl);
}

.conts.point .slash-txt {
  margin: 79px 0 0;
}
.conts.point .slash-txt > span {
  padding: 0 80px;
  font-size: 28px;
}
.conts.point .slash-txt > span::before,
.conts.point .slash-txt > span::after {
  bottom: 16px;
}


@media screen and (max-width: 768px) {
  .conts.point {
    padding-top: 60px;
    padding-bottom: 82px;
  }
  .point-list {
    display: block;
    margin-top: 30px;
  }
  .point-list_item {
    width: 100%;
    padding: 24px 0 20px;
  }
  .point-list_item:nth-child(n + 2) {
    margin-top: 30px;
  }
  .point-list_num {
    left: -10px;
    transform: none;
  }
  .point-list_txt {
    margin-top: 8px;
    line-height: 1.4;
  }

  .point-structure {
    display: block;
    margin-top: 62px;
  }
  .point-structure + .note-txt {
    margin-top: 15px;
  }
  .structure-item {
    width: 100%;
  }
  .structure-item_point {
    height: 127px;
    padding-bottom: 20px;
  }
  .structure-item_point p {
    line-height: 1.3;
  }
  .structure-item_point span {
    font-size: 20px;
  }
  .structure-item_img {
    gap: 20px;
  }
  .structure-item_img picture {
    width: 30%;
  }

  .structure-box_detail {
    border-radius: 10px;
  }
  .structure-box_heading {
    padding: 8px 0;
    font-size: 16px;
  }

  .structure-list {
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
  }
  .structure-list_item {
    border-radius: 3px;
    font-size: 12px;
  }

  .structure-connect {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 94%;
    margin: -30px auto 0;
    text-align: center;
  }


  /* 個別設定 */
  .structure-item--01 .structure-item_point {
    background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/point_sb-app-sp.png) no-repeat top center / contain;
  }
  .structure-item--01 .structure-box_inner {
    padding: 8px 8px 50px;
  }
  .structure-item--01 .structure-list_item span {
    display: inline;
  }
  .structure-item--01 .structure-box_img img {
    width: 158px;
  }

  .structure-item--02 {
    margin-top: 10px;
  }
  .structure-item--02 .structure-item_point {
    background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/point_sb-db-sp.png) no-repeat top center / contain;
  }
  .structure-item--02 .structure-box_inner {
    padding: 8px 8px 30px;
  }

  .bl-box {
    margin-top: 40px;
    padding: 15px 21px 15px;
    border-radius: 10px;
  }
  .bl-box_txt {
    font-size: 16px;
    line-height: 1.35;
  }

  .plus-box {
    display: block;
    margin-top: 32px;
  }
  .plus-box_item {
    width: 100%;
    padding: 25px 10px 20px;
    border-radius: 10px;
  }
  .plus-box_ttl {
    top: -16px;
    width: 140px;
    padding: 3px 0;
    font-size: 15px;
  }
  .plus-box_txt {
    font-size: 14px;
  }

  .plus-box_item.plus-box_item--01,
  .plus-box_item.plus-box_item--02 {
    border-width: 2px;
  }

  .plus-box_item.plus-box_item--02 {
    margin-top: 54px;
  }
  .plus-box_item.plus-box_item--02::before {
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
  }

  .conts.point .slash-txt {
    margin-top: 40px;
  }
  .conts.point .slash-txt > span {
    padding: 0 40px;
  }
  .conts.point .slash-txt > span::before,
  .conts.point .slash-txt > span::after {
    bottom: 8px;
    width: 32px;
  }
  .conts.point .slash-txt > span::before {
    left: -6px;
  }
  .conts.point .slash-txt > span::after {
    right: -6px;
  }


}



/* 拡張機能の一例 */
.case-box {
  display: flex;
  justify-content: space-between;
  margin: 30px 0 0;
}
.case-box_item {
  width: 495px;
  padding: 30px;
  border-radius: 20px;
  background: var(--main-clr-wt);
}
.case-box_heading {
  position: relative;
  padding: 0 0 0 16px;
  font-size: 20px;
  font-weight: bold;
}
.case-box_heading::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 4px;
  height: 30px;
  border-radius: 100vh;
  background: var(--main-clr-rd);
}
.case-box_txt {
  margin: 20px 0 0;
  font-size: 16px;
}
.case-box_txt p {
  line-height: 1.7;
}
@media screen and (max-width: 768px) {
  .case-box {
    display: block;
    margin-top: 20px;
  }
  .case-box_item {
    width: 100%;
    padding: 22px 20px;
    border-radius: 10px;
  }
  .case-box_item:nth-child(n + 2) {
    margin-top: 20px;
  }
  .case-box_heading {
    font-size: 15px;
  }
  .case-box_heading::before {
    height: 25px;
  }
  .case-box_txt {
    margin-top: 16px;
    font-size: 12px;
  }
  .case-box_txt p {
    line-height: 1.65;
  }

}


/* プロによる手厚い利用サポート */
.atten-block {
  margin: 40px 0 0;
}
.atten-block_heading {
  display: inline-block;
  padding: 7px 24px 3px 24px;
  border-radius: 10px 10px 0 0;
  background: var(--main-clr-rd);
  color: var(--main-clr-wt);
  font-size: 20px;
  font-weight: bold;
}
.atten-block_detail {
  border: 4px solid var(--main-clr-rd);
  background: var(--main-clr-wt);
  border-radius: 0 10px 10px 10px;
  padding: 28px;
}
.atten-block_detail p {
  font-size: 16px;
  line-height: 1.75;
}
@media screen and (max-width: 768px) {
  .atten-block_heading {
    width: 100%;
    font-size: 15px;
    text-align: center;
  }
  .atten-block_detail {
    padding: 17px 18px;
    border-radius: 0 0 10px 10px;
    border-width: 2px;
  }
  .atten-block_detail p {
    font-size: 12px;
    line-height: 1.55;
  }
}



/* 導入パターン */
.patter-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 38px 0 0;
  padding: 30px;
  border-radius: 20px;
  background: var(--main-clr-wt);
}
.patter-box_img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 180px;
  border-radius: 20px;
  background: #f4f4fa;
}
.patter-box_detail {
  width: calc(100% - 314px);
}
.patter-box_heading {
  font-size: 24px;
  font-weight: bold;
}
.patter-box_txt {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
}
.dot-list {
  margin-top: 13px;
}
.dot-list_item {
  position: relative;
  padding-left: 1.3em;
  font-size: 16px;
  line-height: 1.7;
}
.dot-list_item::before {
  position: absolute;
  top: .7em;
  left: 4px;
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--main-clr-rd);
}

.conts.reason {
  margin: -40px auto 0;
  padding: 97px 0 0;
  background: var(--main-clr-wt);
}

.reason-list {
  margin: 44px 0 0;
  counter-reset: num; /* カウンターの名前を'num'として初期化 */
}
.reason-list_item {
  display: flex;
  justify-content: space-between;
  counter-increment: num; /* 各.list_itemでカウンターを1増やす */ 
}
.reason-list_item:nth-child(even) {
  flex-direction: row-reverse;
}
.reason-list_item:nth-child(n + 2) {
  margin-top: 30px;
}
.reason-list_detail {
  width: calc(100% - 620px);
  margin-top: 34px;
}
.reason-list_ttl {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 140px;
}
.reason-list_ttl:after {
  position: absolute;
  top: -32px;
  right: -14px;
  z-index: 0;
  content: counter(num, decimal-leading-zero);
  display: inline-block;
  color: var(--main-clr-lrd);
  font-size: 140px;
  font-family: var(--ff-oswald);
}
.reason-list_ttl span {
  position: relative;
  color: var(--main-clr-rd);
  font-size: 28px;
  font-weight: bold;
  z-index: 10;
}
.reason-list_txt {
  margin-top: 0;
  font-size: 16px;
  line-height: 2;
}
.reason-list_img {
  width: 580px;
}



@media screen and (max-width: 768px) {
  .patter-box {
    display: block;
    padding: 20px;
    border-radius: 10px;
  }
  .patter-box_img {
    width: 100%;
    height: auto;
    padding: 17px 17px 13px;
    border-radius: 10px;
  }
  .patter-box_img img {
    width: 80px;
  }
  .patter-box_detail {
    width: 100%;
    margin-top: 12px;
  }
  .patter-box_heading {
    font-size: 15px;
  }
  .patter-box_txt {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.25;
  }

  .dot-list {
    margin-top: 10px;
  }
  .dot-list_item {
    font-size: 12px;
  }

  .conts.reason {
    margin-top: -20px;
    padding-top: 57px;
  }

  .reason-list {
    margin-top: 30px;
  }
  .reason-list_item,
  .reason-list_item:nth-child(even) {
    flex-direction: column-reverse;
  }
  .reason-list_detail {
    width: 100%;
    /*margin-top: 37px; 文字の背景に重ねないように修正*/
    margin-top: 80px;
  }
  .reason-list_ttl {
    min-height: auto;
    display: block;
  }
  .reason-list_ttl:after {
    /*top: 50%; 文字の背景に重ねないように修正*/
    top: -40px;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 70px;
  }
  .reason-list_ttl span {
    display: block;
    font-size: 18px;
    text-align: center;
  }
  .reason-list_txt {
    margin-top: 12px;
    font-size: 12px;
    text-align: center;
  }
  .reason-list_img {
    width: 100%;
    text-align: center;
  }


}


/* cta */
.cta-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1240px;
  height: 206px;
  margin: 106px auto 0;
  padding: 0 110px 0 74px;
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/cta_bg-pc.png) no-repeat center / contain;
}
.cta-block_img {
  margin-bottom: -10px;
}
.cta-block_txt {
  flex-grow: 1;
  font-size: 28px;
  font-weight: bold;
  margin-left: 28px;
}
.cta-block_txt span {
  color: var(--main-clr-rd);
}
.cta-block .primary-btn {
  width: 360px;
  margin-left: 51px;
}

@media screen and (max-width: 768px) {
  .cta-block {
    flex-wrap: wrap;
    width: 336px;
    margin: 58px auto 0;
    padding: 25px 5px 36px;
    height: 226px;
    background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/cta_bg-sp.png) no-repeat center / contain;
  }
  .cta-block_img {
    width: 100px;
  }
  .cta-block_txt {
    flex-grow: unset;
    width: calc(100% - 146px);
    margin-left: 10px;
    font-size: 18px;
  }
  .cta-block .primary-btn {
    width: 90%;
    margin: 26px 0 0;
  }
}


/* 導入までの流れ */
.conts.flow {
  margin: 97px 0 0;
}

.flow-list {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 93px 0 0;
}
.flow-list::after {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  background: #e0e0ef;
  display: inline-block;
  width: 100%;
  height: 40px;
}
.flow-list_item {
  position: relative;
  width: 320px;
  padding: 56px 0 43px;
  border-radius: 20px;
  background: #f4f4fa;
  text-align: center;
  z-index: 10;
}
.flow-list_num {
  position: absolute;
  top: -38px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--main-clr-rd);
  font-size: 70px;
  font-family: var(--ff-oswald);
  line-height: 1;
}
.flow-list_ttl {
  font-size: 24px;
  font-weight: bold;
}
.flow-list_img {
  margin: 27px 0 0;
}
.flow-list_txt {
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 1.63;
}

.flow .slash-txt {
  margin: 96px 0 0;
}
.flow .slash-txt > span {
  font-size: 24px;
}
.flow .slash-txt > span span {
  font-size: 28px;
}

.conts.flow + .cta-block {
  margin-top: 30px;
} 
@media screen and (max-width: 768px) {
  .conts.flow {
    margin-top: 50px;
  }

  .flow-list {
    display: block;
    margin-top: 50px;
  }
  .flow-list_item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 24px 8px;
    border-radius: 10px;
    text-align: left;
  }
  .flow-list_item:nth-child(n + 2) {
    margin-top: 30px;
  }
  .flow-list_num {
    top: -24px;
    font-size: 50px;
  }
  .flow-list_img {
    width: 135px;
    margin: 0;
  }
  .flow-list_detail {
    width: calc(100% - 145px);
    margin-left: 10px;
  }
  .flow-list_ttl {
    font-size: 15px;
  }
  .flow-list_txt {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.55;
  }

  .flow .slash-txt {
    max-width: 375px;
    margin: 55px auto 0;
  }
  .flow .slash-txt > span {
    display: block;
    padding: 0;
    line-height: 1.4;
  }
  .flow .slash-txt > span,
  .flow .slash-txt > span span {
    font-size: 16px !important;
  }
  .flow .slash-txt > span::before {
    left: -18px;
  }
  .flow .slash-txt > span::after {
    right: -18px;
  }
}

.conts.case {
  margin: 100px 0 0;
  padding: 99px 0 140px;
  background: #f4f4fa;
}
.case-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 43px 0 0;
}
.case-list_item {
  width: calc(50% - 15px);
/* 幅広げる padding: 24px 32px 40px;*/
  padding: 24px 18px 40px;
  border-radius: 20px;
  background: var(--main-clr-wt);
}
.case-list_heading {
  font-size: 20px;
  font-weight: bold;
}
.case-list_graph {
  display: flex;
  align-items: center;
  margin: 24px 0 0;
}
.case-list_img {
  width: 199px;
  text-align: center;
}
.case-list_detail {
  width: calc(100% - 199px);
  text-align: center;
}
.case-list_type {
  line-height: 1;
}
.case-list_per {
  margin: 8px 0 0;
  color: var(--main-clr-rd);
  font-size: 48px;
  font-weight: bold;
  line-height: 1;
}
.case-list_per span {
  display: inline-block;
  color: var(--main-clr-rd);
  font-size: 72px;
  font-family: var(--ff-oswald);
  line-height: 1;
}
.case-list_txt {
  margin: 24px 0 0;
  font-size: 16px;
  line-height: 1.75;
}
.top-circle::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--main-clr-rd);
}

.case-list_item-col1 {
  width: 100%;
  padding-bottom: 30px;
}
.case-list_item-col1 .case-list_heading {
  font-size: 24px;
}
.address-list {
  display: flex;
  gap: 22px;
  margin: 20px 0 0;
}

@media screen and (max-width: 768px) {
  .conts.case {
    margin-top: 60px;
    padding: 52px 0 80px;
    border-radius: 20px 20px 0 0;
  }

  .case-list {
    display: block;
    margin-top: 30px;
  }
  .case-list_item {
    width: 100%;
/* 幅広げる padding: 16px 20px 16px;*/
    padding: 16px 16px 16px;
    border-radius: 10px;
  }
  .case-list_item:nth-child(n + 2) {
    margin-top: 20px;
  }
  .case-list_item-col1 .case-list_heading {
    font-size: 15px;
  }
  .top-circle::before {
    width: 12px;
    height: 12px;
  }
  .case-list_graph {
    margin-top: 15px;
  }
  .case-list_img {
    width: 146px;
    text-align: center;
  }
  .case-list_img img {
    width: 52%;
  }
  .case-list_detail {
    width: calc(100% - 145px);
  }
  .case-list_type {
    font-size: 12px;
  }
  .case-list_per {
    font-size: 30px;
  }
  .case-list_per span {
    font-size: 50px;
  }
  .case-list_txt {
    margin-top: 10px;
    font-size: 12px;
  }

  .address-list {
    flex-wrap: wrap;
    gap: 0 16px;
    margin-top: 6px;
  }
  .address-list li {
    font-size: 12px;
  }

}

/* よくあるご質問 */
.conts.faq {
  margin: 59px 0 0;
}
.faq-list {
  margin: 40px 0 0;
}
.faq-list_heading,
.faq-list_body {
  line-height: 1.67;
  font-weight: bold;
}
.faq-list_heading::before,
.faq-list_body::before {
  position: absolute;
  left: 42px;
  font-size: 36px;
  font-family: var(--ff-oswald);
  line-height: 1;
}
.faq-list_heading {
  position: relative;
  clear: none!important;
  float: none!important;
  display: block;
  width: 100%;
  margin: 0 0 32px;
  padding: 32px 86px 32px 90px;
  border-radius: 20px;
  background: #f4f4fa;
}
.faq-list_heading:hover {
  cursor: pointer;
}
.faq-list_heading::before {
  content: "Q";
  top: 24px;
  color: #13134b;
}
.faq-list_btn {
  position: absolute;
  top: 50%;
  right: 31px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #3f4164;
}
.faq-list_btn span {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.faq-list_btn span::before,
.faq-list_btn span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  background: var(--main-clr-wt);
  display: inline-block;
  border-radius: 100vh;
}
.faq-list_btn span::before {
  width: 20px;
  height: 4px;
}
.faq-list_btn span::after {
  width: 4px;
  height: 20px;
}
.faq-list_heading.is-active .faq-list_btn span::after {
  display: none;
}

.faq-list_body {
  margin: 0!important;
  padding: 0 26px 35px 90px;
}
.faq-list_body::before {
  content: "A";
  top: -6px;
  color: var(--main-clr-rd);
}
@media screen and (max-width: 768px) {
  .conts.faq {
    margin-top: -20px;
    padding: 58px 0 0;
    border-radius: 20px 20px 0 0;
    background: var(--main-clr-wt);
  }

  .faq-list {
    margin-top: 30px;
  }
  .faq-list_heading {
    margin-bottom: 30px;
    border-radius: 10px;
  }

  .faq-list_heading,
  .faq-list_body {
    padding: 30px 60px;
    font-size: 15px;
  }
  .faq-list_heading::before,
  .faq-list_body::before {
    left: 30px;
    font-size: 30px;
  }

  .faq-list_btn {
    top: 26px;
    right: 22px;
    transform: unset;
    width: 33px;
    height: 33px;
  }
  .faq-list_btn span::before {
    width: 15px;
    height: 3px;
  }
  .faq-list_btn span::after {
    width: 3px;
    height: 15px;
  }
  .faq-list_body {
    padding-top: 0;
    padding-right: 10px;
    font-size: 15px;
  }
  .faq-list_body::before{
    top: -6px;
  }

}


.conts.contact {
  display: flex;
  align-items: center;
  min-height: 380px;
  margin: 100px 0 0;
  background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/contact_bg-pc.png) no-repeat center / cover;
}
.contact-box {
  width: 1022px;
  padding: 40px 40px 50px;
  border-radius: 20px;
  background: var(--main-clr-wt);
}
.contact-heading {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}
.contact-detail {
  display: flex;
  justify-content: center;
  margin: 50px 0 0;
}
.contact-detail .primary-btn {
  margin: 0;
  width: 360px;
}
.contact-detail .primary-btn + .primary-btn {
  margin-left: 40px;
}

@media screen and (max-width: 768px) {
  .conts.contact {
    display: block;
    margin-top: 60px;
    padding: 60px 20px;
    background: url(https://www.ntt.com/content/dam/nttcom/hq/jp/business/lp/regional-effort/lgpf/img/contact_bg-sp.png) no-repeat center / cover;
  }
  .contact-box {
    width: 100%;
    padding: 34px 20px 45px;
    border-radius: 10px;
  }
  .contact-heading {
    font-size: 24px;
  }
  .contact-detail {
    display: block;
    margin-top: 26px;
  }
  .contact-detail .primary-btn {
    width: 100%;
    margin: 0 auto;
  }
  .contact-detail .primary-btn + .primary-btn {
    margin: 24px auto 0;
  }

}