@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block
}

body {
  line-height: 1
}

ol, ul {
  list-style: none
}

blockquote, q {
  quotes: none
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

body {
  -webkit-text-size-adjust: 100%;
  color: #000;
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

body * {
  outline: none
}

body *:hover, body *:active, body *:focus {
  outline: none
}

header, footer, nav, h1, h2, h3, h4, h5, article, section, p, div, span, figure, ul, ol, li, dl, dt, dd, img, a {
  box-sizing: border-box;
  position: relative
}

a {
  text-decoration: none
}

img, video {
  display: block;
  width: 100%;
  height: auto
}

.animate .fadein, .animate.fadein {
  opacity: 0;
  transition: opacity 1s ease
}

.animate.show .fadein, .animate.show.fadein {
  opacity: 1
}

body {
  width: 100%
}

body.modal_on {
  overflow: hidden
}

main {
  overflow: hidden
}

@keyframes header_show {
  0% {
    transform: translateY(-101%)
  }
  100% {
    transform: translateY(0%)
  }
}

footer {
  background: #000
}

footer img {
  display: inline
}

footer p {
  text-align: center;
  color: #cccccc;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 65px
}

@media only screen and (max-width: 834px) {
  footer p {
    line-height: 10.15625vw;
    font-size: 2.8125vw
  }
}

body .scroll_btn {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 8px 0;
  z-index: 2;
  display: none;
  background-color: rgba(0, 0, 0, 0.3)
}

body .scroll_btn section {
  width: 620px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

@media only screen and (max-width: 834px) {
  body .scroll_btn section {
    width: 62%;
    display: block
  }
}

body .scroll_btn section .s-strongest {
  width: 300px;
  background: #c03;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  color: #fff;
  line-height: 40px;
  font-size: 16px;
  border: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative
}

@media only screen and (max-width: 834px) {
  body .scroll_btn section .s-strongest {
    width: 100%;
    font-size: 3.125vw;
    line-height: 9.375vw
  }
}

body .scroll_btn section .s-strongest:after {
  position: absolute;
  content: "";
  right: 15px;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(/content/dam/nttcom/hq/jp/business/lp/5g/img/attempt_arrow.png) no-repeat center top/contain;
  width: 10px;
  height: 10px
}

@media only screen and (max-width: 834px) {
  body .scroll_btn section .s-strongest:after {
    width: 3.125vw;
    height: 3.125vw
  }
}

body .scroll_btn section .s-strongest2 {
  width: 300px;
  background: #fff;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
  border: none
}

body .scroll_btn section .s-strongest2 a {
  display: block
}

body .scroll_btn section .right a:hover {
  opacity: 1
}

body .scroll_btn section span:hover {
  opacity: 0.6;
  cursor: pointer
}

body .scroll_btn section img {
  width: 20px;
  vertical-align: middle;
  margin-top: -4px;
  margin-right: 5px;
  display: inline-block
}

main .t_red {
  color: #c03
}

.inner {
  width: 1000px;
  margin: 0 auto
}

@media only screen and (max-width: 1100px) {
  .inner {
    width: 90.90909vw
  }
}

@media only screen and (max-width: 834px) {
  .inner {
    width: 87.5vw
  }
}

.inner:after {
  content: "";
  clear: both;
  display: block
}

@media only screen and (max-width: 833px) {
  .pc {
    display: none !important
  }
}

@media only screen and (min-width: 834px) {
  .sp {
    display: none !important
  }
}

img.pc, br.pc, span.pc, strong.pc, small.pc {
  display: inline
}

@media only screen and (max-width: 834px) {
  img.pc, br.pc, span.pc, strong.pc, small.pc {
    display: none
  }
}

img.sp, br.sp, span.sp, strong.sp, small.sp {
  display: none
}

@media only screen and (max-width: 834px) {
  img.sp, br.sp, span.sp, strong.sp, small.sp {
    display: inline
  }
}

a[href^="tel"] {
  cursor: text
}

@media only screen and (max-width: 834px) {
  a[href^="tel"] {
    cursor: pointer
  }
}

main #contact {
  font-family: 'Noto Sans JP', sans-serif;
  padding-bottom: 45px
}

@media only screen and (min-width: 834px) {
  main #contact {
    border-top: solid 2px #c03;
    padding-top: 45px
  }
}

main #contact img {
  display: inline
}

@media only screen and (max-width: 834px) {
  main #contact {
    border-top: solid 4rem #c03;
    padding-top: 52rem;
    padding-bottom: 6.25vw
  }
}

main #contact h2 {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px
}

@media only screen and (max-width: 834px) {
  main #contact h2 {
    display: none
  }
}

main #contact h3 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 45px;
  position: relative;
  text-align: center
}

@media only screen and (max-width: 1100px) {
  main #contact h3 {
    margin-bottom: 4.09091vw;
    font-size: 2.36364vw
  }
}

@media only screen and (max-width: 834px) {
  main #contact h3 {
    font-size: 4.375vw;
    margin-bottom: 6.25vw
  }
}

main #contact h3:after {
  position: absolute;
  content: "";
  bottom: -15px;
  left: 0;
  right: 0;
  margin: auto;
  width: 30px;
  height: 2px;
  background: #c03
}

@media only screen and (max-width: 834px) {
  main #contact h3:after {
    width: 4.6875vw;
    bottom: -3vw
  }
}

main #contact .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start
}

@media only screen and (max-width: 834px) {
  main #contact .inner {
    display: block
  }
}

main #contact .inner:after {
  display: none
}

main #contact .left_box {
  display: inline-block
}

@media only screen and (max-width: 834px) {
  main #contact .left_box {
    display: table;
    margin: 0 auto 7.8125vw
  }
}

main #contact .left_box .contact_btn {
  background: #000;
  color: #fff;
  border: none;
  width: 475px;
  line-height: 60px;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  position: relative;
  display: block;
  border-radius: 35px;
  -webkit-border-radius: 35px;
  -moz-border-radius: 35px;
  cursor: pointer
}

@media only screen and (max-width: 1100px) {
  main #contact .left_box .contact_btn {
    width: 43.18182vw;
    font-size: 1.90909vw;
    line-height: 5.45455vw
  }
}

@media only screen and (max-width: 834px) {
  main #contact .left_box .contact_btn {
    width: 71.875vw;
    font-size: 3.125vw;
    line-height: 9.375vw
  }
}

main #contact .left_box .contact_btn:hover {
  opacity: 0.6
}

main #contact .left_box .contact_btn:after {
  position: absolute;
  content: "";
  right: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  background: url(/content/dam/nttcom/hq/jp/business/lp/5g/img/attempt_arrow.png) no-repeat center top/contain;
  width: 13px;
  height: 13px
}

@media only screen and (max-width: 834px) {
  main #contact .left_box .contact_btn:after {
    width: 4.0625vw;
    height: 4.0625vw
  }
}

main #contact .left_box .contact_btn img {
  width: 30px;
  margin-right: 12px;
  vertical-align: middle
}

@media only screen and (max-width: 1100px) {
  main #contact .left_box .contact_btn img {
    width: 2.72727vw
  }
}

@media only screen and (max-width: 834px) {
  main #contact .left_box .contact_btn img {
    width: 4.6875vw;
    margin-right: 1.5625vw
  }
}

main #contact .right_box p {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 18px;
  letter-spacing: 0.1em;
  text-align: center
}

@media only screen and (max-width: 1100px) {
  main #contact .right_box p {
    margin-bottom: 1.63636vw;
    font-size: 1.45455vw
  }
}

@media only screen and (max-width: 834px) {
  main #contact .right_box p {
    margin-bottom: .78125vw;
    font-size: 3.4375vw;
    letter-spacing: 0.05em
  }
}

main #contact .right_box h4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px
}

@media only screen and (max-width: 834px) {
  main #contact .right_box h4 {
    margin-bottom: 2.34375vw
  }
}

main #contact .right_box h4 img {
  width: 34px;
  margin-right: 10px;
  vertical-align: middle;
  margin-top: 5px
}

@media only screen and (max-width: 1100px) {
  main #contact .right_box h4 img {
    width: 3.09091vw
  }
}

@media only screen and (max-width: 834px) {
  main #contact .right_box h4 img {
    width: 6.25vw;
    margin-top: 1vw;
    margin-right: 1.5625vw
  }
}

main #contact .right_box h4 a {
  color: #c03;
  font-size: 48px;
  font-weight: 500;
  font-family: 'Barlow', sans-serif
}

@media only screen and (max-width: 1100px) {
  main #contact .right_box h4 a {
    font-size: 4.36364vw
  }
}

@media only screen and (max-width: 834px) {
  main #contact .right_box h4 a {
    font-size: 8.75vw
  }
}

main #contact .right_box h4 span {
  font-size: 16px;
  font-weight: 400;
  color: #c03;
  border: solid 1px #c03;
  line-height: 38px;
  padding: 0 10px;
  margin-left: 10px;
  vertical-align: middle;
  display: inline-block;
  margin-top: 5px
}

@media only screen and (max-width: 1100px) {
  main #contact .right_box h4 span {
    line-height: 3.45455vw;
    padding: 0 .90909vw;
    font-size: 1.27273vw
  }
}

@media only screen and (max-width: 834px) {
  main #contact .right_box h4 span {
    font-size: 2.8125vw;
    padding: 1.5625vw
  }
}

main #contact .right_box span {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px
}

@media only screen and (max-width: 1100px) {
  main #contact .right_box span {
    font-size: 1.27273vw
  }
}

@media only screen and (max-width: 834px) {
  main #contact .right_box span {
    font-size: 2.8125vw;
    line-height: 4.6875vw
  }
}

@media print {
  html {
    font-size: 1px
  }
  body {
    min-width: 737px
  }
  .flex_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  a:not(.modal_btn) {
    transition: opacity 0.2s ease
  }
  a:not(.modal_btn):hover {
    opacity: 0.7
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    background-color: #000
  }
  header .inner {
    display: flex;
    align-items: center;
    max-width: 1366px;
    height: 70px;
    padding: 0 17px;
    margin: 0 auto;
    box-sizing: border-box
  }
  header .logo {
    margin-right: 67px;
    position: relative;
    z-index: 102
  }
  header .logo img {
    width: 107px;
    height: auto
  }
  section.kv {
    width: 100%;
    padding-top: calc(2172% / 28);
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/kv_pc.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    z-index: 1;
    margin-bottom: calc(-503% / 14)
  }
  section.kv h1 {
    position: absolute;
    color: #c03;
    width: 890rem;
    top: calc(134% / 10.86);
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
    height: 157rem
  }
  section.kv h1 .line1 {
    display: inline-block;
    font-size: 49rem;
    padding-top: calc(22% / 8.9);
    opacity: 0
  }
  section.kv h1 .line1 small {
    font-size: 34rem
  }
  section.kv h1 .anim_letter {
    opacity: 0
  }
  section.kv h1 .line2 {
    margin-top: calc(24% / 8.9);
    display: inline-block;
    font-size: 48rem;
    font-weight: bold;
    opacity: 0
  }
  section.kv h1:before, section.kv h1:after {
    content: '';
    display: block;
    position: absolute;
    width: 34rem;
    height: 62rem;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/kv_deco.svg");
    background-size: 33rem 61rem;
    background-repeat: no-repeat;
    background-position: left top
  }
  section.kv h1:before {
    left: 0;
    top: 0
  }
  section.kv h1:after {
    right: 0;
    bottom: 0;
    transform: rotate(180deg)
  }
  section.kv.show h1 .line1 {
    opacity: 1
  }
  section.kv.show h1 .anim_letter {
    transition: opacity 0.6s ease;
    opacity: 1
  }
  section.kv.show h1 .line2 {
    transition: opacity 1s ease 2s;
    opacity: 1
  }
  section.kv.show h1 .anim_letter.delay1 {
    transition-delay: .09s
  }
  section.kv.show h1 .anim_letter.delay2 {
    transition-delay: .18s
  }
  section.kv.show h1 .anim_letter.delay3 {
    transition-delay: .27s
  }
  section.kv.show h1 .anim_letter.delay4 {
    transition-delay: .36s
  }
  section.kv.show h1 .anim_letter.delay5 {
    transition-delay: .45s
  }
  section.kv.show h1 .anim_letter.delay6 {
    transition-delay: .54s
  }
  section.kv.show h1 .anim_letter.delay7 {
    transition-delay: .63s
  }
  section.kv.show h1 .anim_letter.delay8 {
    transition-delay: .72s
  }
  section.kv.show h1 .anim_letter.delay9 {
    transition-delay: .81s
  }
  section.kv.show h1 .anim_letter.delay10 {
    transition-delay: .9s
  }
  section.kv.show h1 .anim_letter.delay11 {
    transition-delay: .99s
  }
  section.kv.show h1 .anim_letter.delay12 {
    transition-delay: 1.08s
  }
  section.kv.show h1 .anim_letter.delay13 {
    transition-delay: 1.17s
  }
  section.kv.show h1 .anim_letter.delay14 {
    transition-delay: 1.26s
  }
  section.kv.show h1 .anim_letter.delay15 {
    transition-delay: 1.35s
  }
  section.kv.show h1 .anim_letter.delay16 {
    transition-delay: 1.44s
  }
  section.kv.show h1 .anim_letter.delay17 {
    transition-delay: 1.53s
  }
  section.kv.show h1 .anim_letter.delay18 {
    transition-delay: 1.62s
  }
  section.kv.show h1 .anim_letter.delay19 {
    transition-delay: 1.71s
  }
  section.kv.show h1 .anim_letter.delay20 {
    transition-delay: 1.8s
  }
  section.block_section {
    background: #e5e2e2;
    background: linear-gradient(140deg, #e5e2e2 0%, #f8f8f8 6%, #fff 47%, #f8f8f8 70%, #e5e2e2 100%)
  }
  section.block_section h2 {
    color: #c03;
    font-weight: bold;
    font-size: 39rem;
    line-height: 50rem;
    margin: 0 auto 24px;
    width: 810rem;
    padding-left: 120rem;
    background-repeat: no-repeat;
    background-position: left 4rem;
    background-size: 94rem auto;
    white-space: nowrap
  }
  section.block_section .main_text {
    font-size: 20rem;
    line-height: 35rem;
    width: 810rem;
    padding-left: 120rem;
    margin: 0 auto
  }
  section#block1 {
    padding-top: calc(270% / 14);
    padding-bottom: 70px
  }
  section#block1 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2_01.png");
    z-index: 2
  }
  section#block1 .main_text {
    margin-bottom: 42px;
    z-index: 2
  }
  section#block1 .fig {
    width: 728px;
    margin: 0 auto;
    left: -10px
  }
  section#block2 {
    padding-top: 60px;
    padding-bottom: 64px
  }
  section#block2 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2_02.png")
  }
  section#block2 .main_text {
    margin-bottom: 45px
  }
  section#block2 .fig {
    width: 750px;
    margin: 0 auto 16px
  }
  section#block2 .text1 {
    font-size: 24px;
    line-height: 46px;
    width: 600px;
    white-space: nowrap;
    margin: 0 auto;
    font-weight: bold
  }
  section#block3 {
    padding-top: 60px;
    padding-bottom: 86px
  }
  section#block3 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2_03.png")
  }
  section#block3 .main_text {
    margin-bottom: 40px
  }
  section#block3 .lineup_table {
    width: 944rem;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 13rem
  }
  section#block3 .lineup_table * {
    transform: translate3d(0, 0, 0)
  }
  section#block3 .lineup_table th, section#block3 .lineup_table td {
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box
  }
  section#block3 .lineup_table th {
    width: 437rem;
    background-color: #D0D8E0;
    font-size: 23rem;
    line-height: 40rem;
    font-weight: bold
  }
  section#block3 .lineup_table th.col1 {
    width: 222rem
  }
  section#block3 .lineup_table th.col2 {
    width: 202rem;
    line-height: 35rem
  }
  section#block3 .lineup_table td {
    width: 485rem;
    box-shadow: 4rem 4rem 8rem 0rem rgba(0, 0, 0, 0.6)
  }
  section#block3 .lineup_table td a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 132rem;
    background: #ca0033;
    background: linear-gradient(110deg, #ca0033 0%, #e5004c 42%, #ff0064 69%, red 100%);
    color: #fff;
    transition: color 0.2s ease
  }
  section#block3 .lineup_table td a .btn_inner {
    line-height: 1.5
  }
  section#block3 .lineup_table td a strong {
    font-size: 28rem;
    font-weight: bold
  }
  section#block3 .lineup_table td a small {
    font-size: 21rem
  }
  section#block3 .lineup_table td a:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 22rem;
    height: 22rem;
    box-sizing: border-box;
    border: 11rem solid #be0028;
    border-left: 11rem solid transparent;
    border-bottom: 11rem solid transparent;
    transition: border 0.2s ease
  }
  section#block3 .lineup_table td a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ececec;
    background: linear-gradient(110deg, #ececec 0%, #fff 52%, #ececec 100%);
    opacity: 0.01;
    transition: opacity 0.2s ease
  }
  section#block3 .lineup_table td a:hover {
    color: #CC0033
  }
  section#block3 .lineup_table td a:hover:before {
    opacity: 0.99
  }
  section#block3 .lineup_table td a:hover:after {
    border: 11rem solid #BED1E2;
    border-left: 11rem solid transparent;
    border-bottom: 11rem solid transparent
  }
  section#block4 {
    padding-top: 60px;
    padding-bottom: 45px;
    background: #fff
  }
  section#block4 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2.png");
    background-size: 28rem auto;
    padding-left: 50rem;
    width: 722rem;
    left: -10rem
  }
  section#block4 .main_text {
    text-align: center;
    font-size: 24rem;
    line-height: 42rem;
    padding: 0
  }
  section#block4 .main_text strong {
    font-weight: bold;
    color: #c03
  }
  #modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    display: none
  }
  #modal .scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 203
  }
  #modal .modal_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 202;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer
  }
  #modal .modal_close {
    position: absolute;
    display: block;
    width: calc(66px * 0.75);
    height: calc(66px * 0.75);
    right: calc(-33px * 0.75);
    top: calc(-33px * 0.75);
    background-repeat: no-repeat;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/close.svg");
    background-size: calc(64px * 0.75) calc(64px * 0.75);
    background-position: center center;
    z-index: 204
  }
  #modal .modal_inner {
    position: relative;
    width: calc(100% - 80px);
    max-width: 790px;
    margin: 60px auto;
    z-index: 203
  }
  #modal .modal_contents {
    display: none;
    width: 100%;
    background: #edecec;
    background: linear-gradient(142deg, #edecec 0%, #edecec 25%, #f6f6f6 40%, #fff 55%, #fff 73%, #f4f3f3 86%);
    overflow: hidden;
    border-radius: 10px;
    padding-bottom: calc(60px * 0.75)
  }
  #modal .modal_contents h2 {
    background: #c03;
    background: linear-gradient(90deg, #c03 0%, #ff0064 69%, red 100%);
    font-weight: bold;
    font-size: calc(42rem * 0.75);
    color: #fff;
    line-height: calc(104rem * 0.75);
    margin-bottom: calc(25rem * 0.75);
    text-align: center
  }
  #modal .modal_contents .main_text {
    text-align: center;
    font-size: calc(32rem * 0.75);
    line-height: calc(52 / 32);
    margin-bottom: calc(40rem * 0.75)
  }
  #modal .modal_contents .row1 {
    margin: 0 auto calc(60rem * 0.75)
  }
  #modal .modal_contents .row1 .fig {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
  }
  #modal .modal_contents .row1 .points li {
    padding-top: calc(28rem * 0.75);
    font-size: calc(24rem * 0.75);
    line-height: 1.3;
    white-space: nowrap;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: calc(116rem * 0.75) auto
  }
  #modal .modal_contents .row1 .points li:nth-child(n+2) {
    margin-top: calc(22rem * 0.75)
  }
  #modal .modal_contents .row1 .points li:nth-child(1) {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/point1.png")
  }
  #modal .modal_contents .row1 .points li:nth-child(2) {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/point2.png")
  }
  #modal .modal_contents .row1 .points li:nth-child(3) {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/point3.png")
  }
  #modal .modal_contents .row2 .row_title {
    font-size: calc(26rem * 0.75);
    font-weight: bold;
    width: calc(100% - 80rem);
    margin: 0 auto calc(33rem * 0.75);
    text-align: center;
    line-height: 1
  }
  #modal .modal_contents .row2 .row_title:before, #modal .modal_contents .row2 .row_title:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: calc(50% - 282rem * 0.75);
    height: 1px;
    background-color: #A8B1BD
  }
  #modal .modal_contents .row2 .row_title:after {
    left: auto;
    right: 0
  }
  #modal .modal_contents .row2 .row_title span {
    display: inline-block;
    background: #c03;
    background: linear-gradient(90deg, #c03 0%, #e6004c 52%, #ff0064 82%, red 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
  }
  #modal .modal_contents .row2 .scenes {
    margin-bottom: calc(40rem * 0.75)
  }
  #modal .modal_contents .row2 .scenes li {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
  }
  #modal .modal_contents .row2 .scenes li .fig {
    display: block;
    width: calc(228rem * 0.75);
    margin-right: calc(30rem * 0.75)
  }
  #modal .modal_contents .row2 .scenes li .text {
    width: calc(260rem * 0.75);
    font-size: calc(20rem * 0.75);
    line-height: calc(35 / 20)
  }
  #modal .modal_contents .row2 .scenes li:nth-child(n+2) {
    margin-top: calc(30rem * 0.75)
  }
  #modal .modal_contents .row2 .btn_text {
    text-align: center;
    color: #c03;
    font-size: calc(28.8rem * 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: calc(14rem * 0.75)
  }
  #modal .modal_contents .row2 .btn_text:before {
    content: '';
    display: inline-block;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2.png");
    background-size: calc(22rem * 0.75) auto;
    width: calc(22rem * 0.75);
    height: calc(32rem * 0.75);
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: calc(14rem * 0.75)
  }
  #modal .modal_contents .row2 .modal_bottom_btn {
    display: block;
    margin: 0 auto;
    width: calc(478rem * 0.75);
    font-size: calc(30rem * 0.75);
    line-height: calc(48rem * 0.75);
    border-radius: calc(48rem * 0.75);
    box-shadow: 4rem 4rem 8rem 0rem rgba(0, 0, 0, 0.6);
    background: #c03;
    background: linear-gradient(90deg, #c03 0%, #e6004c 52%, #ff0064 82%, red 100%);
    overflow: hidden;
    color: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    appearance: none;
    position: relative;
    transition: color 0.2s ease;
    text-align: center
  }
  #modal .modal_contents .row2 .modal_bottom_btn:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ececec;
    background: linear-gradient(90deg, #ececec 0%, #fff 50%, #ececec 100%);
    opacity: 0.01;
    transition: opacity 0.2s ease
  }
  #modal .modal_contents .row2 .modal_bottom_btn span {
    display: inline-block;
    position: relative
  }
  #modal .modal_contents .row2 .modal_bottom_btn:hover {
    color: #c03
  }
  #modal .modal_contents .row2 .modal_bottom_btn:hover:before {
    opacity: 0.99
  }
  #modal .modal_contents#modal1 .row1 {
    width: calc(648rem * 0.75);
    padding-left: calc(175rem * 0.75)
  }
  #modal .modal_contents#modal1 .row1 .fig {
    width: calc(119rem * 0.75)
  }
  #modal .modal_contents#modal1 .row2 .scenes {
    margin-bottom: calc(56rem * 0.75)
  }
  #modal .modal_contents#modal2 .row1 {
    width: calc(768rem * 0.75);
    padding-left: calc(380rem * 0.75)
  }
  #modal .modal_contents#modal2 .row1 .fig {
    width: calc(341rem * 0.75);
    padding-bottom: calc(30rem * 0.75)
  }
  #modal .modal_contents#modal2 .row1 .fig .cap {
    position: absolute;
    font-size: calc(14rem * 0.75);
    bottom: calc(10rem * 0.75);
    width: calc(140rem * 0.75);
    white-space: nowrap;
    left: 0
  }
  #modal .modal_contents#modal2 .row1 .fig .cap.cap2 {
    left: calc(172rem * 0.75)
  }
  #modal .modal_contents#modal3 .row1 {
    width: calc(736rem * 0.75);
    padding-left: calc(248rem * 0.75)
  }
  #modal .modal_contents#modal3 .row1 .fig {
    width: calc(209rem * 0.75)
  }
  #modal .modal_contents#modal4 .row1 {
    width: calc(844rem * 0.75);
    padding-left: calc(364rem * 0.75)
  }
  #modal .modal_contents#modal4 .row1 .fig {
    width: calc(338rem * 0.75)
  }
  #modal .modal_contents#modal4 .row1 .note {
    font-size: calc(14rem * 0.75);
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: calc(-26rem * 0.75)
  }
  #modal .modal_contents#modal4 .row2 .scenes {
    margin-bottom: calc(62rem * 0.75)
  }
  #modal .modal_contents#modal4 .row2 .scenes li {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: calc(594rem * 0.75);
    margin-left: auto;
    margin-right: auto
  }
  #modal .modal_contents#modal4 .row2 .scenes li .scene_title {
    width: 100%;
    font-weight: bold;
    font-size: calc(22rem * 0.75);
    margin-bottom: calc(12rem * 0.75);
    margin-left: -0.5em
  }
  #modal .modal_contents#modal4 .row2 .scenes li .fig .cap {
    font-size: calc(14rem * 0.75);
    display: block;
    position: absolute;
    bottom: calc(-20rem * 0.75);
    left: 0
  }
  #modal .modal_contents#modal4 .row2 .scenes li .text {
    width: calc(327rem * 0.75);
    white-space: normal
  }
  #modal .modal_contents#modal4 .row2 .scenes li:nth-child(n+2) {
    margin-top: calc(36rem * 0.75)
  }
  #modal .modal_contents#modal5 .row1 {
    width: calc(702rem * 0.75);
    padding-left: calc(338rem * 0.75)
  }
  #modal .modal_contents#modal5 .row1 .fig {
    width: calc(289rem * 0.75);
    padding-bottom: calc(60rem * 0.75)
  }
  #modal .modal_contents#modal5 .row1 .fig .cap {
    position: absolute;
    font-size: calc(14rem * 0.75);
    bottom: calc(40rem * 0.75);
    width: calc(140rem * 0.75);
    white-space: nowrap;
    left: calc(-6rem * 0.75)
  }
  #modal .modal_contents#modal5 .row1 .fig .cap.cap2 {
    left: calc(148rem * 0.75)
  }
  #modal .modal_contents#modal5 .row2 .scenes li {
    width: calc(736rem * 0.75);
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto
  }
  #modal .modal_contents#modal5 .row2 .scenes li .fig {
    width: calc(481rem * 0.75);
    margin-right: 0
  }
  #modal .modal_contents#modal5 .row2 .scenes li .text {
    width: calc(222rem * 0.75);
    line-height: calc(32rem * 0.75)
  }
  #modal .modal_contents#modal6 .row1 {
    width: calc(703rem * 0.75);
    padding-left: calc(270rem * 0.75)
  }
  #modal .modal_contents#modal6 .row1 .fig {
    width: calc(225rem * 0.75)
  }
  #modal .modal_contents#modal7 .row1 {
    width: calc(762rem * 0.75);
    padding-left: calc(305rem * 0.75)
  }
  #modal .modal_contents#modal7 .row1 .fig {
    width: calc(266rem * 0.75)
  }
  #modal .modal_contents#modal7 .row2 .scenes li {
    display: block;
    width: calc(700rem * 0.75);
    margin: 0 auto
  }
  #modal .modal_contents#modal7 .row2 .scenes li .fig {
    width: 100%;
    margin-right: 0
  }
  #modal .modal_contents#modal7 .row2 .scenes li .text {
    width: 100%;
    margin-top: calc(9rem * 0.75);
    line-height: calc(32rem * 0.75)
  }
  .pc_none {
    display: none !important
  }
}

@media screen and (min-width: 834px) {
  html {
    font-size: 1px
  }
}

@media only screen and (min-width: 834px) and (max-width: 960px) {
  html {
    font-size: calc(1vw / 9.6)
  }
}

@media screen and (min-width: 834px) {
  body {
    min-width: 834px
  }
  .flex_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center
  }
  a:not(.modal_btn) {
    transition: opacity 0.2s ease
  }
  a:not(.modal_btn):hover {
    opacity: 0.7
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    background-color: #000
  }
  header .inner {
    display: flex;
    align-items: center;
    max-width: 1366px;
    height: 70px;
    padding: 0 17px;
    margin: 0 auto;
    box-sizing: border-box
  }
  header .logo {
    margin-right: 67px;
    position: relative;
    z-index: 102
  }
  header .logo img {
    width: 107px;
    height: auto
  }
  section.kv {
    width: 100%;
    padding-top: calc(2172% / 28);
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/kv_pc.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    z-index: 1;
    margin-bottom: calc(-503% / 14)
  }
  section.kv h1 {
    position: absolute;
    color: #c03;
    width: 890rem;
    top: calc(134% / 10.86);
    left: 50%;
    transform: translate(-50%, 0%);
    text-align: center;
    height: 157rem
  }
  section.kv h1 .line1 {
    display: inline-block;
    font-size: 49rem;
    padding-top: calc(22% / 8.9);
    opacity: 0
  }
  section.kv h1 .line1 small {
    font-size: 34rem
  }
  section.kv h1 .anim_letter {
    opacity: 0
  }
  section.kv h1 .line2 {
    margin-top: calc(24% / 8.9);
    display: inline-block;
    font-size: 48rem;
    font-weight: bold;
    opacity: 0
  }
  section.kv h1:before, section.kv h1:after {
    content: '';
    display: block;
    position: absolute;
    width: 34rem;
    height: 62rem;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/kv_deco.svg");
    background-size: 33rem 61rem;
    background-repeat: no-repeat;
    background-position: left top
  }
  section.kv h1:before {
    left: 0;
    top: 0
  }
  section.kv h1:after {
    right: 0;
    bottom: 0;
    transform: rotate(180deg)
  }
}

@media only screen and (min-width: 834px) and (max-width: 960px) {
  section.kv {
    padding-top: 744px
  }
}

@media screen and (min-width: 834px) {
  section.kv.show h1 .line1 {
    opacity: 1
  }
  section.kv.show h1 .anim_letter {
    transition: opacity 0.6s ease;
    opacity: 1
  }
  section.kv.show h1 .line2 {
    transition: opacity 1s ease 2s;
    opacity: 1
  }
  section.kv.show h1 .anim_letter.delay1 {
    transition-delay: .09s
  }
  section.kv.show h1 .anim_letter.delay2 {
    transition-delay: .18s
  }
  section.kv.show h1 .anim_letter.delay3 {
    transition-delay: .27s
  }
  section.kv.show h1 .anim_letter.delay4 {
    transition-delay: .36s
  }
  section.kv.show h1 .anim_letter.delay5 {
    transition-delay: .45s
  }
  section.kv.show h1 .anim_letter.delay6 {
    transition-delay: .54s
  }
  section.kv.show h1 .anim_letter.delay7 {
    transition-delay: .63s
  }
  section.kv.show h1 .anim_letter.delay8 {
    transition-delay: .72s
  }
  section.kv.show h1 .anim_letter.delay9 {
    transition-delay: .81s
  }
  section.kv.show h1 .anim_letter.delay10 {
    transition-delay: .9s
  }
  section.kv.show h1 .anim_letter.delay11 {
    transition-delay: .99s
  }
  section.kv.show h1 .anim_letter.delay12 {
    transition-delay: 1.08s
  }
  section.kv.show h1 .anim_letter.delay13 {
    transition-delay: 1.17s
  }
  section.kv.show h1 .anim_letter.delay14 {
    transition-delay: 1.26s
  }
  section.kv.show h1 .anim_letter.delay15 {
    transition-delay: 1.35s
  }
  section.kv.show h1 .anim_letter.delay16 {
    transition-delay: 1.44s
  }
  section.kv.show h1 .anim_letter.delay17 {
    transition-delay: 1.53s
  }
  section.kv.show h1 .anim_letter.delay18 {
    transition-delay: 1.62s
  }
  section.kv.show h1 .anim_letter.delay19 {
    transition-delay: 1.71s
  }
  section.kv.show h1 .anim_letter.delay20 {
    transition-delay: 1.8s
  }
  section.block_section {
    background: #e5e2e2;
    background: linear-gradient(140deg, #e5e2e2 0%, #f8f8f8 6%, #fff 47%, #f8f8f8 70%, #e5e2e2 100%)
  }
  section.block_section h2 {
    color: #c03;
    font-weight: bold;
    font-size: 39rem;
    line-height: 50rem;
    margin: 0 auto 24px;
    width: 810rem;
    padding-left: 120rem;
    background-repeat: no-repeat;
    background-position: left 4rem;
    background-size: 94rem auto;
    white-space: nowrap
  }
  section.block_section .main_text {
    font-size: 20rem;
    line-height: 35rem;
    width: 810rem;
    padding-left: 120rem;
    margin: 0 auto
  }
  section#block1 {
    padding-top: calc(270% / 14);
    padding-bottom: 70px
  }
  section#block1 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2_01.png");
    z-index: 2
  }
  section#block1 .main_text {
    margin-bottom: 42px;
    z-index: 2
  }
  section#block1 .fig {
    width: 728px;
    margin: 0 auto;
    left: -10px
  }
  section#block2 {
    padding-top: 60px;
    padding-bottom: 64px
  }
  section#block2 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2_02.png")
  }
  section#block2 .main_text {
    margin-bottom: 45px
  }
  section#block2 .fig {
    width: 750px;
    margin: 0 auto 16px
  }
  section#block2 .text1 {
    font-size: 24px;
    line-height: 46px;
    width: 600px;
    white-space: nowrap;
    margin: 0 auto;
    font-weight: bold
  }
  section#block3 {
    padding-top: 60px;
    padding-bottom: 86px
  }
  section#block3 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2_03.png")
  }
  section#block3 .main_text {
    margin-bottom: 40px
  }
  section#block3 .lineup_table {
    width: 944rem;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 13rem
  }
  section#block3 .lineup_table * {
    transform: translate3d(0, 0, 0)
  }
  section#block3 .lineup_table th, section#block3 .lineup_table td {
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box
  }
  section#block3 .lineup_table th {
    width: 437rem;
    background-color: #D0D8E0;
    font-size: 23rem;
    line-height: 40rem;
    font-weight: bold
  }
  section#block3 .lineup_table th.col1 {
    width: 222rem
  }
  section#block3 .lineup_table th.col2 {
    width: 202rem;
    line-height: 35rem
  }
  section#block3 .lineup_table td {
    width: 485rem;
    box-shadow: 4rem 4rem 8rem 0rem rgba(0, 0, 0, 0.6)
  }
  section#block3 .lineup_table td a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 132rem;
    background: #ca0033;
    background: linear-gradient(110deg, #ca0033 0%, #e5004c 42%, #ff0064 69%, red 100%);
    color: #fff;
    transition: color 0.2s ease
  }
  section#block3 .lineup_table td a .btn_inner {
    line-height: 1.5
  }
  section#block3 .lineup_table td a strong {
    font-size: 28rem;
    font-weight: bold
  }
  section#block3 .lineup_table td a small {
    font-size: 21rem
  }
  section#block3 .lineup_table td a:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 22rem;
    height: 22rem;
    box-sizing: border-box;
    border: 11rem solid #be0028;
    border-left: 11rem solid transparent;
    border-bottom: 11rem solid transparent;
    transition: border 0.2s ease
  }
  section#block3 .lineup_table td a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ececec;
    background: linear-gradient(110deg, #ececec 0%, #fff 52%, #ececec 100%);
    opacity: 0.01;
    transition: opacity 0.2s ease
  }
  section#block3 .lineup_table td a:hover {
    color: #CC0033
  }
  section#block3 .lineup_table td a:hover:before {
    opacity: 0.99
  }
  section#block3 .lineup_table td a:hover:after {
    border: 11rem solid #BED1E2;
    border-left: 11rem solid transparent;
    border-bottom: 11rem solid transparent
  }
  section#block4 {
    padding-top: 60px;
    padding-bottom: 45px;
    background: #fff
  }
  section#block4 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2.png");
    background-size: 28rem auto;
    padding-left: 50rem;
    width: 722rem;
    left: -10rem
  }
  section#block4 .main_text {
    text-align: center;
    font-size: 24rem;
    line-height: 42rem;
    padding: 0
  }
  section#block4 .main_text strong {
    font-weight: bold;
    color: #c03
  }
  #modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    display: none
  }
  #modal .scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 203
  }
  #modal .modal_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 202;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer
  }
  #modal .modal_close {
    position: absolute;
    display: block;
    width: calc(66px * 0.75);
    height: calc(66px * 0.75);
    right: calc(-33px * 0.75);
    top: calc(-33px * 0.75);
    background-repeat: no-repeat;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/close.svg");
    background-size: calc(64px * 0.75) calc(64px * 0.75);
    background-position: center center;
    z-index: 204
  }
  #modal .modal_inner {
    position: relative;
    width: calc(100% - 80px);
    max-width: 790px;
    margin: 60px auto;
    z-index: 203
  }
  #modal .modal_contents {
    display: none;
    width: 100%;
    background: #edecec;
    background: linear-gradient(142deg, #edecec 0%, #edecec 25%, #f6f6f6 40%, #fff 55%, #fff 73%, #f4f3f3 86%);
    overflow: hidden;
    border-radius: 10px;
    padding-bottom: calc(60px * 0.75)
  }
  #modal .modal_contents h2 {
    background: #c03;
    background: linear-gradient(90deg, #c03 0%, #ff0064 69%, red 100%);
    font-weight: bold;
    font-size: calc(42rem * 0.75);
    color: #fff;
    line-height: calc(104rem * 0.75);
    margin-bottom: calc(25rem * 0.75);
    text-align: center
  }
  #modal .modal_contents .main_text {
    text-align: center;
    font-size: calc(32rem * 0.75);
    line-height: calc(52 / 32);
    margin-bottom: calc(40rem * 0.75)
  }
  #modal .modal_contents .row1 {
    margin: 0 auto calc(60rem * 0.75)
  }
  #modal .modal_contents .row1 .fig {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%)
  }
  #modal .modal_contents .row1 .points li {
    padding-top: calc(28rem * 0.75);
    font-size: calc(24rem * 0.75);
    line-height: 1.3;
    white-space: nowrap;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: calc(116rem * 0.75) auto
  }
  #modal .modal_contents .row1 .points li:nth-child(n+2) {
    margin-top: calc(22rem * 0.75)
  }
  #modal .modal_contents .row1 .points li:nth-child(1) {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/point1.png")
  }
  #modal .modal_contents .row1 .points li:nth-child(2) {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/point2.png")
  }
  #modal .modal_contents .row1 .points li:nth-child(3) {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/point3.png")
  }
  #modal .modal_contents .row2 .row_title {
    font-size: calc(26rem * 0.75);
    font-weight: bold;
    width: calc(100% - 80rem);
    margin: 0 auto calc(33rem * 0.75);
    text-align: center;
    line-height: 1
  }
  #modal .modal_contents .row2 .row_title:before, #modal .modal_contents .row2 .row_title:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: calc(50% - 282rem * 0.75);
    height: 1px;
    background-color: #A8B1BD
  }
  #modal .modal_contents .row2 .row_title:after {
    left: auto;
    right: 0
  }
  #modal .modal_contents .row2 .row_title span {
    display: inline-block;
    background: #c03;
    background: linear-gradient(90deg, #c03 0%, #e6004c 52%, #ff0064 82%, red 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
  }
  #modal .modal_contents .row2 .scenes {
    margin-bottom: calc(40rem * 0.75)
  }
  #modal .modal_contents .row2 .scenes li {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
  }
  #modal .modal_contents .row2 .scenes li .fig {
    display: block;
    width: calc(228rem * 0.75);
    margin-right: calc(30rem * 0.75)
  }
  #modal .modal_contents .row2 .scenes li .text {
    width: calc(260rem * 0.75);
    font-size: calc(20rem * 0.75);
    line-height: calc(35 / 20)
  }
  #modal .modal_contents .row2 .scenes li:nth-child(n+2) {
    margin-top: calc(30rem * 0.75)
  }
  #modal .modal_contents .row2 .btn_text {
    text-align: center;
    color: #c03;
    font-size: calc(28.8rem * 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: calc(14rem * 0.75)
  }
  #modal .modal_contents .row2 .btn_text:before {
    content: '';
    display: inline-block;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2.png");
    background-size: calc(22rem * 0.75) auto;
    width: calc(22rem * 0.75);
    height: calc(32rem * 0.75);
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: calc(14rem * 0.75)
  }
  #modal .modal_contents .row2 .modal_bottom_btn {
    display: block;
    margin: 0 auto;
    width: calc(478rem * 0.75);
    font-size: calc(30rem * 0.75);
    line-height: calc(48rem * 0.75);
    border-radius: calc(48rem * 0.75);
    box-shadow: 4rem 4rem 8rem 0rem rgba(0, 0, 0, 0.6);
    background: #c03;
    background: linear-gradient(90deg, #c03 0%, #e6004c 52%, #ff0064 82%, red 100%);
    overflow: hidden;
    color: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    appearance: none;
    position: relative;
    transition: color 0.2s ease;
    text-align: center
  }
  #modal .modal_contents .row2 .modal_bottom_btn:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ececec;
    background: linear-gradient(90deg, #ececec 0%, #fff 50%, #ececec 100%);
    opacity: 0.01;
    transition: opacity 0.2s ease
  }
  #modal .modal_contents .row2 .modal_bottom_btn span {
    display: inline-block;
    position: relative
  }
  #modal .modal_contents .row2 .modal_bottom_btn:hover {
    color: #c03
  }
  #modal .modal_contents .row2 .modal_bottom_btn:hover:before {
    opacity: 0.99
  }
  #modal .modal_contents#modal1 .row1 {
    width: calc(648rem * 0.75);
    padding-left: calc(175rem * 0.75)
  }
  #modal .modal_contents#modal1 .row1 .fig {
    width: calc(119rem * 0.75)
  }
  #modal .modal_contents#modal1 .row2 .scenes {
    margin-bottom: calc(56rem * 0.75)
  }
  #modal .modal_contents#modal2 .row1 {
    width: calc(768rem * 0.75);
    padding-left: calc(380rem * 0.75)
  }
  #modal .modal_contents#modal2 .row1 .fig {
    width: calc(341rem * 0.75);
    padding-bottom: calc(30rem * 0.75)
  }
  #modal .modal_contents#modal2 .row1 .fig .cap {
    position: absolute;
    font-size: calc(14rem * 0.75);
    bottom: calc(10rem * 0.75);
    width: calc(140rem * 0.75);
    white-space: nowrap;
    left: 0
  }
  #modal .modal_contents#modal2 .row1 .fig .cap.cap2 {
    left: calc(172rem * 0.75)
  }
  #modal .modal_contents#modal3 .row1 {
    width: calc(736rem * 0.75);
    padding-left: calc(248rem * 0.75)
  }
  #modal .modal_contents#modal3 .row1 .fig {
    width: calc(209rem * 0.75)
  }
  #modal .modal_contents#modal4 .row1 {
    width: calc(844rem * 0.75);
    padding-left: calc(364rem * 0.75)
  }
  #modal .modal_contents#modal4 .row1 .fig {
    width: calc(338rem * 0.75)
  }
  #modal .modal_contents#modal4 .row1 .note {
    font-size: calc(14rem * 0.75);
    text-align: center;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: calc(-26rem * 0.75)
  }
  #modal .modal_contents#modal4 .row2 .scenes {
    margin-bottom: calc(62rem * 0.75)
  }
  #modal .modal_contents#modal4 .row2 .scenes li {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: calc(594rem * 0.75);
    margin-left: auto;
    margin-right: auto
  }
  #modal .modal_contents#modal4 .row2 .scenes li .scene_title {
    width: 100%;
    font-weight: bold;
    font-size: calc(22rem * 0.75);
    margin-bottom: calc(12rem * 0.75);
    margin-left: -0.5em
  }
  #modal .modal_contents#modal4 .row2 .scenes li .fig .cap {
    font-size: calc(14rem * 0.75);
    display: block;
    position: absolute;
    bottom: calc(-20rem * 0.75);
    left: 0
  }
  #modal .modal_contents#modal4 .row2 .scenes li .text {
    width: calc(327rem * 0.75);
    white-space: normal
  }
  #modal .modal_contents#modal4 .row2 .scenes li:nth-child(n+2) {
    margin-top: calc(36rem * 0.75)
  }
  #modal .modal_contents#modal5 .row1 {
    width: calc(702rem * 0.75);
    padding-left: calc(338rem * 0.75)
  }
  #modal .modal_contents#modal5 .row1 .fig {
    width: calc(289rem * 0.75);
    padding-bottom: calc(60rem * 0.75)
  }
  #modal .modal_contents#modal5 .row1 .fig .cap {
    position: absolute;
    font-size: calc(14rem * 0.75);
    bottom: calc(40rem * 0.75);
    width: calc(140rem * 0.75);
    white-space: nowrap;
    left: calc(-6rem * 0.75)
  }
  #modal .modal_contents#modal5 .row1 .fig .cap.cap2 {
    left: calc(148rem * 0.75)
  }
  #modal .modal_contents#modal5 .row2 .scenes li {
    width: calc(736rem * 0.75);
    justify-content: space-between;
    margin-left: auto;
    margin-right: auto
  }
  #modal .modal_contents#modal5 .row2 .scenes li .fig {
    width: calc(481rem * 0.75);
    margin-right: 0
  }
  #modal .modal_contents#modal5 .row2 .scenes li .text {
    width: calc(222rem * 0.75);
    line-height: calc(32rem * 0.75)
  }
  #modal .modal_contents#modal6 .row1 {
    width: calc(703rem * 0.75);
    padding-left: calc(270rem * 0.75)
  }
  #modal .modal_contents#modal6 .row1 .fig {
    width: calc(225rem * 0.75)
  }
  #modal .modal_contents#modal7 .row1 {
    width: calc(762rem * 0.75);
    padding-left: calc(305rem * 0.75)
  }
  #modal .modal_contents#modal7 .row1 .fig {
    width: calc(266rem * 0.75)
  }
  #modal .modal_contents#modal7 .row2 .scenes li {
    display: block;
    width: calc(700rem * 0.75);
    margin: 0 auto
  }
  #modal .modal_contents#modal7 .row2 .scenes li .fig {
    width: 100%;
    margin-right: 0
  }
  #modal .modal_contents#modal7 .row2 .scenes li .text {
    width: 100%;
    margin-top: calc(9rem * 0.75);
    line-height: calc(32rem * 0.75)
  }
  .pc_none {
    display: none !important
  }
}

@media screen and (max-width: 834px) {
  html {
    font-size: calc(1vw / 7.5)
  }
  body {
    min-width: 320px
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000;
    z-index: 10;
    height: 15.625vw
  }
  header .inner {
    width: 100%;
    margin: 0;
    padding: 0
  }
  header .logo {
    margin-top: 3.90625vw;
    margin-left: 6.25vw;
    width: 19.53125vw
  }
  header .logo img {
    width: 100%;
    height: auto
  }
  section.kv {
    width: 100%;
    height: 702.6rem;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/kv_sp.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    z-index: 1;
    margin-bottom: -125rem
  }
  section.kv h1 {
    position: absolute;
    color: #c03;
    width: 100%;
    top: 171rem;
    left: 0;
    text-align: center;
    height: 136rem
  }
  section.kv h1 .line1 {
    display: inline-block;
    font-size: 37.2rem;
    padding-top: 18rem;
    width: 674rem;
    position: relative;
    height: 65rem;
    opacity: 0
  }
  section.kv h1 .line1 small {
    font-size: 25.8rem
  }
  section.kv h1 .line1:before, section.kv h1 .line1:after {
    content: '';
    display: block;
    position: absolute;
    width: 25rem;
    height: 45rem;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/kv_deco.svg");
    background-size: 24rem 44rem;
    background-repeat: no-repeat;
    background-position: left top
  }
  section.kv h1 .line1:before {
    left: 0;
    top: 0
  }
  section.kv h1 .line1:after {
    right: 0;
    bottom: 0;
    transform: rotate(180deg)
  }
  section.kv h1 .anim_letter {
    opacity: 0
  }
  section.kv h1 .line2 {
    margin-top: 18rem;
    display: inline-block;
    font-size: 40.7rem;
    font-weight: bold;
    opacity: 0
  }
  section.kv.show h1 .line1 {
    opacity: 1
  }
  section.kv.show h1 .anim_letter {
    transition: opacity 0.6s ease;
    opacity: 1
  }
  section.kv.show h1 .line2 {
    transition: opacity 1s ease 2s;
    opacity: 1
  }
  section.kv.show h1 .anim_letter.delay1 {
    transition-delay: .09s
  }
  section.kv.show h1 .anim_letter.delay2 {
    transition-delay: .18s
  }
  section.kv.show h1 .anim_letter.delay3 {
    transition-delay: .27s
  }
  section.kv.show h1 .anim_letter.delay4 {
    transition-delay: .36s
  }
  section.kv.show h1 .anim_letter.delay5 {
    transition-delay: .45s
  }
  section.kv.show h1 .anim_letter.delay6 {
    transition-delay: .54s
  }
  section.kv.show h1 .anim_letter.delay7 {
    transition-delay: .63s
  }
  section.kv.show h1 .anim_letter.delay8 {
    transition-delay: .72s
  }
  section.kv.show h1 .anim_letter.delay9 {
    transition-delay: .81s
  }
  section.kv.show h1 .anim_letter.delay10 {
    transition-delay: .9s
  }
  section.kv.show h1 .anim_letter.delay11 {
    transition-delay: .99s
  }
  section.kv.show h1 .anim_letter.delay12 {
    transition-delay: 1.08s
  }
  section.kv.show h1 .anim_letter.delay13 {
    transition-delay: 1.17s
  }
  section.kv.show h1 .anim_letter.delay14 {
    transition-delay: 1.26s
  }
  section.kv.show h1 .anim_letter.delay15 {
    transition-delay: 1.35s
  }
  section.kv.show h1 .anim_letter.delay16 {
    transition-delay: 1.44s
  }
  section.kv.show h1 .anim_letter.delay17 {
    transition-delay: 1.53s
  }
  section.kv.show h1 .anim_letter.delay18 {
    transition-delay: 1.62s
  }
  section.kv.show h1 .anim_letter.delay19 {
    transition-delay: 1.71s
  }
  section.kv.show h1 .anim_letter.delay20 {
    transition-delay: 1.8s
  }
  section.block_section {
    background: #e5e2e2;
    background: linear-gradient(140deg, #e5e2e2 0%, #f8f8f8 6%, #fff 47%, #f8f8f8 70%, #e5e2e2 100%)
  }
  section.block_section h2 {
    color: #c03;
    font-weight: bold;
    font-size: 44rem;
    line-height: 60rem;
    margin: 0 auto 20rem;
    width: 605.8rem;
    padding-left: 144rem;
    background-repeat: no-repeat;
    background-position: left 4rem;
    background-size: 117.4rem auto;
    white-space: nowrap
  }
  section.block_section .main_text {
    font-size: 26rem;
    line-height: 40rem;
    width: 640rem;
    margin: 0 auto
  }
  section#block1 {
    padding-top: 141rem;
    padding-bottom: 62rem
  }
  section#block1 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2_01.png")
  }
  section#block1 .main_text {
    margin-bottom: 50rem
  }
  section#block1 .fig {
    width: 696rem;
    margin: 0 auto;
    left: 3rem
  }
  section#block2 {
    padding-top: 90rem;
    padding-bottom: 65rem
  }
  section#block2 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2_02.png")
  }
  section#block2 .main_text {
    margin-bottom: 22rem
  }
  section#block2 .fig {
    width: 700rem;
    margin: 0 auto 24rem
  }
  section#block2 .text1 {
    font-size: 26rem;
    line-height: 38rem;
    width: 650rem;
    white-space: nowrap;
    margin: 0 auto;
    font-weight: bold
  }
  section#block3 {
    padding-top: 90rem;
    padding-bottom: 90rem
  }
  section#block3 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2_03.png")
  }
  section#block3 .main_text {
    margin-bottom: 27rem
  }
  section#block3 .lineup_table {
    width: 698rem;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 14rem
  }
  section#block3 .lineup_table * {
    transform: translate3d(0, 0, 0)
  }
  section#block3 .lineup_table th, section#block3 .lineup_table td {
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box
  }
  section#block3 .lineup_table th {
    width: 328rem;
    background-color: #D0D8E0;
    font-size: 24rem;
    line-height: 40rem;
    font-weight: bold
  }
  section#block3 .lineup_table th.col1 {
    width: 142rem
  }
  section#block3 .lineup_table th.col2 {
    width: 174rem;
    line-height: 35rem
  }
  section#block3 .lineup_table td {
    width: 348rem;
    box-shadow: 4rem 4rem 8rem 0rem rgba(0, 0, 0, 0.6)
  }
  section#block3 .lineup_table td a {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    height: 124rem;
    background: #ca0033;
    background: linear-gradient(110deg, #ca0033 0%, #e5004c 42%, #ff0064 69%, red 100%);
    color: #fff;
    white-space: nowrap;
    transition: color 0.2s ease
  }
  section#block3 .lineup_table td a .btn_inner {
    line-height: 1.5
  }
  section#block3 .lineup_table td a strong {
    font-size: 28rem;
    font-weight: bold
  }
  section#block3 .lineup_table td a small {
    font-size: 24rem;
    display: block;
    line-height: 1.2;
    margin-top: 4rem
  }
  section#block3 .lineup_table td a:after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 22rem;
    height: 22rem;
    box-sizing: border-box;
    border: 11rem solid #be0028;
    border-left: 11rem solid transparent;
    border-bottom: 11rem solid transparent;
    transition: border 0.2s ease
  }
  section#block3 .lineup_table td a:before {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ececec;
    background: linear-gradient(110deg, #ececec 0%, #fff 52%, #ececec 100%);
    opacity: 0.01;
    transition: opacity 0.2s ease
  }
  section#block3 .lineup_table td a:hover {
    color: #CC0033
  }
  section#block3 .lineup_table td a:hover:before {
    opacity: 0.99
  }
  section#block3 .lineup_table td a:hover:after {
    border: 11rem solid #BED1E2;
    border-left: 11rem solid transparent;
    border-bottom: 11rem solid transparent
  }
  section#block4 {
    padding-top: 90rem;
    padding-bottom: 84rem;
    background: #fff
  }
  section#block4 h2 {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2.png");
    background-size: 34rem auto;
    padding-left: 56rem;
    width: 576rem
  }
  section#block4 .main_text {
    text-align: center;
    font-size: 26rem;
    line-height: 45.5rem;
    padding: 0
  }
  section#block4 .main_text strong {
    font-weight: bold;
    color: #c03
  }
  #modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 200;
    display: none
  }
  #modal .scroll {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 203
  }
  #modal .modal_bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 202;
    background: rgba(0, 0, 0, 0.8);
    cursor: pointer
  }
  #modal .modal_close {
    position: absolute;
    display: block;
    width: 68rem;
    height: 68rem;
    right: 4rem;
    top: 4rem;
    background-repeat: no-repeat;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/close.svg");
    background-size: 68rem auto;
    background-position: center center;
    z-index: 204
  }
  #modal .modal_inner {
    position: relative;
    width: calc(100% - 36rem);
    margin: 18rem auto;
    z-index: 203
  }
  #modal .modal_contents {
    display: none;
    width: 100%;
    background: #edecec;
    background: linear-gradient(142deg, #edecec 0%, #edecec 25%, #f6f6f6 40%, #fff 55%, #fff 73%, #f4f3f3 86%);
    overflow: hidden;
    border-radius: 10rem;
    padding-bottom: 50rem
  }
  #modal .modal_contents h2 {
    background: #c03;
    background: linear-gradient(90deg, #c03 0%, #ff0064 69%, red 100%);
    font-weight: bold;
    font-size: 38rem;
    color: #fff;
    line-height: 77rem;
    margin-bottom: 28rem;
    text-align: center
  }
  #modal .modal_contents .main_text {
    text-align: center;
    font-size: 33rem;
    line-height: 50rem;
    margin-bottom: 28rem
  }
  #modal .modal_contents .row1 {
    margin: 0 auto 44rem
  }
  #modal .modal_contents .row1 .fig {
    position: relative;
    margin: 0 auto 22rem
  }
  #modal .modal_contents .row1 .points {
    padding: 0 40rem
  }
  #modal .modal_contents .row1 .points li {
    padding-top: 40rem;
    font-size: 30rem;
    line-height: 1.3;
    white-space: nowrap;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 168.5rem auto
  }
  #modal .modal_contents .row1 .points li:nth-child(n+2) {
    margin-top: 28rem
  }
  #modal .modal_contents .row1 .points li:nth-child(1) {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/point1.png")
  }
  #modal .modal_contents .row1 .points li:nth-child(2) {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/point2.png")
  }
  #modal .modal_contents .row1 .points li:nth-child(3) {
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/point3.png")
  }
  #modal .modal_contents .row2 .row_title {
    font-size: 26rem;
    font-weight: bold;
    width: 658rem;
    margin: 0 auto 22rem;
    text-align: center;
    line-height: 1
  }
  #modal .modal_contents .row2 .row_title:before, #modal .modal_contents .row2 .row_title:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: calc(50% - 282rem);
    height: 1px;
    background-color: #A8B1BD
  }
  #modal .modal_contents .row2 .row_title:after {
    left: auto;
    right: 0
  }
  #modal .modal_contents .row2 .row_title span {
    display: inline-block;
    background: #c03;
    background: linear-gradient(90deg, #c03 0%, #e6004c 52%, #ff0064 82%, red 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent
  }
  #modal .modal_contents .row2 .scenes {
    margin-bottom: 38rem
  }
  #modal .modal_contents .row2 .scenes li {
    width: 100%;
    padding-left: 36rem
  }
  #modal .modal_contents .row2 .scenes li .text {
    font-size: 26rem;
    line-height: 38rem;
    padding-left: 1em;
    position: relative;
    padding-right: calc(36rem + 1em)
  }
  #modal .modal_contents .row2 .scenes li .text:before {
    content: '・';
    display: inline-block;
    position: relative;
    text-indent: -1em
  }
  #modal .modal_contents .row2 .scenes li:nth-child(n+2) {
    margin-top: 4rem
  }
  #modal .modal_contents .row2 .btn_text {
    text-align: center;
    color: #c03;
    font-size: 28.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 10rem
  }
  #modal .modal_contents .row2 .btn_text:before {
    content: '';
    display: inline-block;
    background-image: url("/content/dam/nttcom/hq/jp/business/lp/5g/nwcz/img/h2.png");
    background-size: 22rem auto;
    width: 22rem;
    height: 32rem;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: 15rem
  }
  #modal .modal_contents .row2 .modal_bottom_btn {
    display: block;
    margin: 0 auto;
    width: 476rem;
    font-size: 30rem;
    line-height: 62rem;
    border-radius: 62rem;
    box-shadow: 4rem 4rem 8rem 0rem rgba(0, 0, 0, 0.6);
    background: #c03;
    background: linear-gradient(90deg, #c03 0%, #e6004c 52%, #ff0064 82%, red 100%);
    overflow: hidden;
    color: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    appearance: none;
    position: relative;
    text-align: center
  }
  #modal .modal_contents .row2 .modal_bottom_btn span {
    display: inline-block;
    position: relative
  }
  #modal .modal_contents#modal1 .row1 .fig {
    width: 120.8rem
  }
  #modal .modal_contents#modal1 .row2 .scenes {
    margin-bottom: 56rem
  }
  #modal .modal_contents#modal2 .row1 .fig {
    width: 361.3rem;
    padding-bottom: 28rem
  }
  #modal .modal_contents#modal2 .row1 .fig .cap {
    position: absolute;
    font-size: 20rem;
    line-height: 26rem;
    top: 98rem;
    width: 130rem;
    white-space: nowrap;
    left: -124rem
  }
  #modal .modal_contents#modal2 .row1 .fig .cap.cap2 {
    left: 345rem
  }
  #modal .modal_contents#modal3 .row1 .fig {
    width: 278rem
  }
  #modal .modal_contents#modal4 .main_text {
    margin-bottom: 56rem
  }
  #modal .modal_contents#modal4 .row1 .fig {
    width: 469.3rem;
    margin-bottom: 18rem
  }
  #modal .modal_contents#modal4 .row1 .note {
    font-size: 20rem;
    line-height: 26rem;
    width: 100%;
    margin-bottom: 20rem;
    padding: 0 40rem
  }
  #modal .modal_contents#modal4 .row2 .scenes li {
    padding-right: 36rem
  }
  #modal .modal_contents#modal4 .row2 .scenes li .scene_title {
    width: 100%;
    font-weight: bold;
    font-size: 22rem;
    margin-bottom: 12rem;
    margin-left: -0.5em
  }
  #modal .modal_contents#modal4 .row2 .scenes li .text {
    padding-left: 0
  }
  #modal .modal_contents#modal4 .row2 .scenes li .text:before {
    display: none
  }
  #modal .modal_contents#modal4 .row2 .scenes li:nth-child(n+2) {
    margin-top: 18rem
  }
  #modal .modal_contents#modal5 .row1 .fig {
    width: 305rem
  }
  #modal .modal_contents#modal5 .row1 .fig .cap {
    position: absolute;
    font-size: 20rem;
    line-height: 1;
    top: 130rem;
    width: 200rem;
    white-space: nowrap;
    left: -110rem;
    transform-origin: left top;
    transform: scale(0.7)
  }
  #modal .modal_contents#modal5 .row1 .fig .cap.cap2 {
    left: 296rem
  }
  #modal .modal_contents#modal6 .row1 .fig {
    width: 261.2rem
  }
  #modal .modal_contents#modal7 .row1 .fig {
    width: 278rem
  }
  #modal .modal_contents#modal7 .row2 .scenes li .text {
    padding-left: 0
  }
  #modal .modal_contents#modal7 .row2 .scenes li .text:before {
    display: none
  }
  .sp_none {
    display: none !important
  }
}