@charset "utf-8";

/* =========================================================
 * 共通 /content/dam/nttcom/hq/jp/business/services/container-dc/img
 * ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

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

main img{
  vertical-align: bottom;
}

.fw--bold{
  font-weight: bold;
}
.sp__only{
  display: none;
}



/* 見出し */
.h2__title{
  margin: 0 0 80px;
}
.h2__title::after{
  position: absolute;
  bottom: -46px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}
.h2__title--ja{
  margin: 0;
  font-size: 40px;
  text-align: center;
  line-height: 1.4;
}
.h2__title--sml{
  margin-bottom: 40px;
}
.h2__title--sml::after{
  bottom: -20px;
}
.h2__title--sml .h2__title--ja{
  font-size: 30px;
  line-height: 1.4;
}

.contents__subtitle{
  margin: 0 0 20px;
  color: #3D3D3D;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

.border-heading{
  position: relative;
  margin: 0 0 45px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}
.border-heading::after{
  content: "";
  position: absolute;
  bottom: -26px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: 70px;
  height: 5px;
  background: #00C4FE;
}
@media screen and (max-width:768px) {
  .pc__only{
    display: none;
  }
  .sp__only{
    display: block;
  }



  /* 見出し */
  .h2__title--ja{
    font-size: 28px;
  }

  .border-heading{
    font-size: 22px;
  }

}



/* 大枠 */
.main-article__contents{
  width: auto;
  margin-top: 100px;
}

.contents + .contents{
  margin-top: 150px;
}

@media screen and (min-width:769px) {
  .main-article__contents--inner > .sec--02{
    padding-top: 80px;
  }
  .main-article__contents--inner > .sec--03{
    padding-top: 130px;
  }

  .contents .contents__inner{
    width: 1060px;
    margin: 0 auto;
  }
  .contents--wide .contents__inner{
    width: 1220px;
  }
  .contents--medium .contents__inner{
    width: 1100px;
  }
}
@media screen and (max-width:768px) {
  .main-article{
    padding: 80px 0 0;
  }
  .main-article__contents{
    margin: 0;
  }
  .main-article__contents--inner{
    padding: 0 32px 80px;
  }

  .contents + .contents{
    margin-top: 80px;
  }

  .scroll-block{
    overflow-x: auto;
  }
}



/* テキスト */
.summary-txt{
  margin: 40px 0 0;
  font-size: 20px;
}
.summary-txt--l{
  font-size: 24px;
}
.summary-txt--l span{
  color: #122FAE;
  font-size: 30px;
}



/* リスト */
.dot-txt{
  position: relative;
  padding-left: 20px;
}
.dot-txt::before{
  content: "";
  position: absolute;
  top: calc((1.5em - 7px) / 2);
  left: 6px;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #013364;
}
.dot-txt:nth-child(n + 2){
  margin-top: 4px;
}

.note{
  margin: 20px 0 0;
}
.note__txt{
  font-size: 14px;
  line-height: 1.4;
}



/* 画像 */
.contents__img{
  margin: 20px 0 0;
}



/* なぜ今、コンテナ型データセンターが必要なのか */
.reason__list{
  display: flex;
  margin: 40px 0 0;
  border-right: 1px solid #ccc;
}
.reason__item{
  width: 25%;
  padding: 0 25px 22px;
  border-left: 1px solid #ccc;
}
.reason__img{
  width: 112px;
  margin: 0 auto;
}
.reason__ttl{
  margin: 24px 0 0;
  color: #3080D9;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}
.reason__txt{
  margin: 14px 0 0;
  line-height: 1.6;
}
@media screen and (max-width:768px) {
  .reason__list{
    display: block;
    border: none;
  }
  .reason__item{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0 0 24px;
    border: none;
    border-bottom: 1px solid #ccc;
  }
  .reason__item:nth-child(n + 2){
    margin-top: 32px;
  }
  .reason__img{
    width: 25vw;
  }
  .reason__detail{
    width: calc(100% - (25vw + 10px));
  }
  .reason__ttl{
    margin: 0;
    line-height: 1.2;
    text-align: left;
  }
}



/* 4つの要件に応えるコンテナ型データセンターの特徴 */
.features__list{
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin: 40px 0 0;
}
.features__item{
  display: flex;
  flex-direction: column;
  width: calc(50% - 20px);
  border-radius: 30px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
  overflow: hidden;
}
.features__heading{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 69px;
  background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/features_heading_bg-pc.png) no-repeat center / contain;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.1333;
}
.features__summary{
  position: relative;
  padding: 10px 30px 15px;
}
.features__img{
  position: absolute;
  top: -54px;
  left: 30px;
  width: 180px;
}
.features__ttl{
  text-align: center;
}
.features__ttl span{
  display: inline-block;
  margin: 20px 0 0;
  color: #3080D9;
  font-size: 30px;
  font-weight: bold;
  line-height: 1.1333;
}
.features__solution{
  width: 124px;
  margin: 0 auto;
}
.features__txt{
  line-height: 1.6;
}
.features__summary .features__txt{
  margin: 10px 0 0;
  color: #122FAE;
  font-size: 21px;
  font-weight: bold;
}
.features__detail{
  flex: 1;
  padding: 15px 30px 25px;
  background: rgba(65, 175, 235, .15);
}
.features__detail .features__txt{
  font-size: 18px;
}

/* 個別設定 */
.features__item--03 .features__img{
  left: 0;
}

@media screen and (max-width:768px) {
  .features__list{
    display: block;
  }
  .features__item{
    width: 100%;
  }
  .features__item:nth-child(n + 2){
    margin-top: 40px;
  }
  .features__heading{
    background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/features_heading_bg-sp.png) no-repeat center / cover;
    font-size: 6.8vw;
  }
  .features__img{
    width: 30vw;
    left: 0.9vw;
  }
  .features__ttl span{
    font-size: 6.8vw;
  }
  .features__summary{
    padding: 10px 6.8vw 15px;
  }
  .features__summary .features__txt{
    font-size: 18px;
  }

  /* 個別設定 */
  .features__item--02 .features__img{
    top: -44px;
    left: -4.1vw;
    width: 27.7vw;
  }
  .features__item--03 .features__img{
    top: -20px;
    left: -1.8vw;
  }
  .features__item--04 .features__img{
    top: -20px;
    left: -5vw;
    width: 28.6vw;
  }
}



/* ドコモビジネスが提供するコンテナ型データセンターとは */
.about .intro-txt{
  max-width: 1100px;
  margin: 0 auto;
}
.scope{
  margin: 40px 0 0;
}
.scope__box{
  min-width: 1100px;
  padding: 34px 40px 24px;
  border: 1px solid #ccc;
  border-radius: 30px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
}
.scope__list{
  display: flex;
  gap: 12px;
}
.scope__item{
  width: 20%;
  background: #e3f3fc;
  border-radius: 18px;
  overflow: hidden;
}
.scope__heading{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/scope_heading_bg.png) no-repeat center / contain;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
}
.scope__heading span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  border-radius: 50%;
  background: #fff;
  color: #3080d9;
  font-size: 22px;
}
.scope__detail{
  padding: 10px 10px 34px;
}
.scope__arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 987px;
  height: 49px;
  margin: -16px auto 0;
  background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/scope_arrow.png) no-repeat center / contain;
  color: #fff;
  font-weight: bold;
  font-size: 24px;
}



/* コンテナ型DCの基本構成イメージ */
.overview .contents__img{
  max-width: 940px;
  margin: 20px auto 0;
}



/* 用途や条件に応じて柔軟に選べる提供パターン */
.pattern-example{
  margin: 40px 0 0;
}
.pattern-example__list{
  display: flex;
  gap: 20px;
}
.pattern-example__item{
  width: calc(50% - 10px);
  padding: 26px 28px;
  border: 3px solid #122FAE;
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .1);
}
.pattern-example__heading{
  color: #3956D2;
}
.pattern-example__txt{
  line-height: 1.4;
}
.pattern-example__guideline{
  max-width: 400px;
  margin: 20px auto 0;
  padding: 5px;
  border-radius: 100vh;
  background: rgba(248, 216, 73, .3);
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}

.possess{
  display: flex;
  gap: 30px;
  margin: 20px 14px 0;
}
.possess__item{
  width: calc(50% - 15px);
}
.possess__box{
  padding: 14px;
  border-radius: 22px;
  background: #E4F1F9;
  text-align: center;
}
.possess__ttl{
  display: inline-block;
  border-bottom: 2px solid #EDB73C;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}
.possess__txts{
  display: inline-block;
  margin: 12px 0 0;
}
.possess__txt{
  text-align: left;
}
.possess__txts .dot-txt:nth-child(n + 2){
  margin-top: 0;
}
.possess__img{
  width: 173px;
  margin: 4px auto 0;
}

.rcmd{
  margin: 18px 0 0;
  border-radius: 10px;
  background: rgba(65, 175, 235, .15);
  overflow: hidden;
}
.rcmd__heading{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/rcmd_heading_bg-pc.png) no-repeat center / contain;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
.rcmd__list{
  padding: 16px 26px;
}
.rcmd__list .dot-txt{
  line-height: 1.4;
}
.rcmd__list .dot-txt:nth-child(n + 2){
  margin-top: 10px;
}
.rcmd__list .dot-txt::before{
  width: 4px;
  height: 4px;
}
@media screen and (max-width:768px) {
  .pattern-example__list{
    flex-direction: column-reverse;
  }
  .pattern-example__item{
    width: 100%;
    padding: 30px 24px;
  }
  .pattern-example__guideline{
    font-size: 4.5vw;
  }

  .possess{
    gap: 22px;
    margin: 20px 0 0;
  }
  .possess__item{
    width: calc(50% - 7px);
  }
  .possess__box{
    padding: 8px;
    border-radius: 11px;
  }
  .possess__ttl{
    font-size: 2.7vw;
  }
  .possess__txts{
    margin-top: 6px;
  }
  .possess__txt{
    font-size: 10px;
  }
  .possess__txts .dot-txt::before{
    top: calc((1.5em - 4px) / 2);
    left: 11px;
    width: 4px;
    height: 4px;
  }
  .possess__img{
    width: 113px;
  }

  .rcmd__heading{
    background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/rcmd_heading_bg-sp.png) no-repeat center / cover;
    font-size: 4.5vw;
  }
}



/* ご相談から導入までの流れ */
.flow-point{
  max-width: 1020px;
  margin: 20px auto 0;
  border-radius: 30px;
  background: rgb(65 175 235 / 11%);
  overflow: hidden;
}
.flow-point__heading{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 61px;
  margin: 0;
  background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/flow_point_heading_bg-pc.png) no-repeat center / contain;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.4;
}
.flow-point__list{
  display: flex;
  gap: 30px;
  padding: 30px 50px 55px;
}
.flow-point__item{
  width: calc((100% - 90px) / 4);
}
.flow-point__img{
  text-align: center;
}
.flow-point__img img{
  width: 84px;
}
.flow-point__ttl{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0;
  color: #122FAE;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}
.flow-point__txt{
  margin: 5px 0 0;
  line-height: 1.6;
}
@media screen and (max-width:768px) {
  .flow-point__heading{
    background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/flow_point_heading_bg-sp.png) no-repeat center / cover;
  }
  .flow-point__list{
    display: block;
    padding: 6.8vw 11.4vw;
  }
  .flow-point__item{
    width: 100%;
  }
  .flow-point__item + .flow-point__item{
    margin-top: 40px;
  }
}



/* ご相談から導入までの流れ */
.flow-detail{
  max-width: 1020px;
  margin: 40px auto 0;
}
.flow-step{
  display: flex;
  gap: 36px;
  margin: 66px 0 0;
}
.flow-step__item{
  position: relative;
  width: calc((100% - 144px) / 5);
  border-radius: 20px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .1);
}
.flow-step__item:nth-child(n + 2)::before{
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  transform: translateY(-50%);
  display: inline-block;
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
  border-left: 16px solid #FBCC00;
}
.flow-step__detail{
  padding: 10px 20px 20px;
}
.flow-step__num{
  text-align: center;
}
.flow-step__num img{
  width: 122px;
}
.flow-step__ttl{
  margin: 10px 0 0;
  color: #122FAE;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  text-align: center;
}
.flow-step__txt{
  margin: 10px 0 0;
  line-height: 1.4;
}
@media screen and (max-width:768px) {
  .flow-step{
    display: block;
  }
  .flow-step__item{
    width: 100%;
  }
  .flow-step__item:nth-child(n + 2){
    margin-top: 46px;
  }
  .flow-step__item:nth-child(n + 2)::before{
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    border-top: 16px solid #FBCC00;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: none;
  }
}



/* ユースケース */
.usecase-block{
  max-width: 1020px;
  margin: 80px auto 0;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
  border-radius: 30px 30px 10px 10px;
  overflow: hidden;
}
.usecase-block__heading{
  display: flex;
  align-items: center;
  gap: 30px;
  height: 85px;
  padding: 10px 50px;
  background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/usecase_heading_bg-pc.png) no-repeat center / contain;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
}
.usecase-block__num{
  width: 120px;
  display: inline-block;
}

.usecase-block__detail--default{
  padding: 20px 20px 15px;
}
.usecase-block__detail--default .usecase-block__txt{
  font-size: 20px;
  line-height: 1.4;
}

.tag-block{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0 0;
}
.tag{
  display: inline-block;
  padding: 8px 20px;
  border-radius: 5px;
  background: #3080D9;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.usecase-block__detail--detail{
  padding: 30px 50px;
}

.usecase-block__intro{
  display: flex;
  align-items: center;
  gap: 30px;
}
.usecase-block__intro--reverse{
  flex-direction: row-reverse;
}
.usecase-block__img{
  width: 280px;
}
.usecase-block__txts{
  width: calc(100% - 310px);
}
.usecase-block__txt{
  line-height: 1.6;
}
.usecase-block__txt span{
  color: #122FAE;
}
.usecase-block__txt:nth-child(n + 2){
  margin-top: 1em;
}

.usecase-issue{
  margin: 30px 0 0;
  padding: 20px 27px 25px;
  border-radius: 20px;
  background: #eee;
}
.usecase-issue__heading{
  position: relative;
  text-align: center;
}
.usecase-issue__heading::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: 100%;
  height: 3px;
  background: #fff;
}
.usecase-issue__heading span{
  display: inline-block;
  padding: 0 20px;
  background: #eee;
  color: #013364;
  font-size: 24px;
  font-weight: bold;
  z-index: 10;
}

.usecase-issue__list{
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 18px 0;
}
.usecase-issue__item{
  width: calc((100% - 30px) / 4);
  text-align: center;
}
.usecase-issue__img{
  width: 84px;
  margin: 0 auto;
}
.usecase-issue__txt{
  margin: 10px 0 0;
  color: #013364;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
}

.usecase-reason{
  margin: 20px 0 0;
  padding: 30px 50px 50px;
  border-radius: 20px;
  background: rgba(245, 232, 56, .1);
}
.usecase-reason__heading{
  text-align: center;
}
.usecase-reason__heading span{
  position: relative;
  display: inline-block;
  padding-left: 79px;
  color: #013364;
  font-size: 28px;
  font-weight: bold;
  line-height: 1.4;
}
.usecase-reason__heading span::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: 59px;
  height: 62px;
  background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/icon_good.png) no-repeat center / contain;
}
.usecase-reason__txt{
  margin: 34px 0 0;
  line-height: 1.6;
}
.usecase-reason__txt + .usecase-reason__txt{
  margin-top: 1em;
}
.usecase-reason__list + .usecase-reason__txt{
  margin-top: 20px;
}


.usecase-reason__subttl{
  margin: 16px 0 0;
  color: #013364;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.usecase-reason__list{
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 70px 16px 0;
}
.usecase-reason__list::before{
  content: "";
  position: absolute;
  top: -62px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: 46px;
  height: 46px;
  background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/icon_cross.png) no-repeat center / contain;
}
.usecase-reason__item{
  width: calc((100% - 30px) / 4);
  padding: 16px 12px;
  border-radius: 10px;
  background: #e4f1f9;
  text-align: center;
}
.usecase-reason__name{
  color: #013364;
  font-weight: bold;
}
.usecase-reason__icon{
  width: 70px;
  margin: 8px auto 0;
}

.usecase-block__btns{
  padding: 0 0 20px;
}
.usecase-block__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  margin: 0 auto;
  padding: 0 40px;
  border: none;
  border-radius: 100vh;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .15);
  background: #013364;
  cursor: pointer;
}
.usecase-block__btn:hover{
  opacity: .7;
}
.usecase-block__btn span{
  position: relative;
  padding: 0 30px 0 0;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.usecase-block__btn span::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/icon_arrow.png) no-repeat center / contain;
}
.usecase-block__body.is-open .usecase-block__btn span::after{
  transform: rotate(180deg) translateY(50%);
}
@media screen and (max-width:768px) {
  .usecase-block{
    margin-top: 40px;
  }
  .usecase-block__heading{
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: 197px;
    padding: 0 24px;
    background: url(/content/dam/nttcom/hq/jp/business/services/container-dc/img/usecase_heading_bg-sp.png) no-repeat center / cover;
    font-size: 5.5vw;
  }
  .usecase-block__num{
    width: 27.3vw;
  }

  .usecase-block__detail--default{
    padding: 20px 24px 15px;
  }

  .usecase-block__detail--detail{
    padding: 30px 24px;
  }

  .usecase-block__intro{
    display: block;
  }
  .usecase-block__img{
    margin: 0 auto;
  }
  .usecase-block__txts{
    width: 100%;
    margin: 20px 0 0;
  }

  .usecase-issue{
    padding: 24px 0 25px;
  }

  .usecase-issue__list{
    display: block;
    margin: 6.4vw 6.8vw 0;
  }
  .usecase-issue__item{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  .usecase-issue__item:nth-child(n + 2){
    margin-top: 30px;
  }
  .usecase-issue__img{
    width: 19.1vw;
    margin: 0;
  }
  .usecase-issue__txt{
    width: calc(100% - (19.1vw + 10px));
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
  }

  .usecase-reason{
    margin-top: 30px;
    padding: 25px 24px 50px;
  }
  .usecase-reason__heading span{
    padding: 72px 0 0;
    font-size: 6.4vw;
  }
  .usecase-reason__heading span::before{
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 13.4vw;
  }


  .usecase-reason__subttl{
    margin-top: 34px;
    font-size: 15px;
  }
  .usecase-reason__list{
    flex-wrap: wrap;
    margin: 52px 0 0;
  }
  .usecase-reason__list::before{
    top: -48px;
    width: 34px;
    height: 34px;
  }
  .usecase-reason__item{
    width: calc(50% - 5px);
    padding: 2.3vw 2.7vw;
  }
  .usecase-reason__name{
    font-size: 2.7vw;
  }
  .usecase-reason__icon{
    width: 50px;
    margin-top: 5px;
  }
}



/* CTAエリア */
.contact-intro{
  margin: 30px 0 20px;
  font-weight: bold;
  font-size: 24px;
  line-height: 1.33333;
  text-align: center;
}
@media screen and (max-width:768px) {
  .contact-intro{
    margin-top: 0;
    font-size: 18px;
  }
}



/* 関連サービス */
.relation-contents__item--no-img{
  display: flex;
  flex-direction: column;
}
.relation-contents__item--no-img .relation-contents__item--group{
  flex: 1;
}