@charset "UTF-8";
*, *:before, *:after {
     -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
     box-sizing: border-box;
}


/* TOPページ用CSSを流用 */

html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     font-weight: inherit;
     font-size: inherit;
     vertical-align: baseline;
}

html, body {
     font-size: 14px;
     backface-visibility: hidden;
     -webkit-backface-visibility: hidden;
     -webkit-font-smoothing: antialiased;
     -webkit-overflow-scrolling: touch;
}

body {
     line-height: 1.75;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
     font-family: FrutigerNeueLTW10-Regul, FrutigerNeueW01-Regular, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Helvetica, sans-serif;
     background: white;
}

main p, main li {
     line-height: inherit;
}

article, header, footer, aside, figure, figcaption, nav, section {
     display: block;
}

h1, h2, h3, h4, h5, h6 {
     color: inherit;
     font-family: inherit;
     line-height: inherit;
}

ol, ul {
     list-style: none;
     list-style-type: none;
}

a, a:visited, a:hover {
     color: inherit;
     text-decoration: inherit;
}

img {
     max-width: 100%;
}

a img:hover {
     transition: all .25s linear 0s;
     opacity: 0.8;
}

.text-link, .text-link:visited, .text-link:hover {
     text-decoration: underline;
}

.hover {
     cursor: pointer;
}

.hover--fade {
     transition: opacity 0.3s;
}

.hover--fade:hover {
     opacity: 0.75;
}

.btn {
     border-radius: 8px;
     border: 1px solid #CCE0FF;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     position: relative;
     /* padding: 10px 30px 10px 30px; */
     padding: 10px 22px 10px 16px;
     min-height: 44px;
}

.btn::after {
     width: 6.409px;
     height: 9.561px;
     position: absolute;
     top: 0;
     bottom: 0;
     /* right: 12px; */
     right: 8px;
     margin: auto;
     content: "";
     width: 6.409px;
     height: 9.561px;
     background-size: 100% 100%;
}

.btn__icon {
     margin-right: 1em;
}

.btn--white {
     background-color: white;
}

.btn--white, .btn--white:visited, .btn--white:hover {
     color: #09377f;
}

.btn--primary {
     background-color: #09357f;
}

.btn--primary-light {
     background-color: #1552BC;
}

.btn--primary, .btn--primary:visited, .btn--primary:hover, .btn--primary-light, .btn--primary-light:visited, .btn--primary-light:hover {
     color: white;
}

.btn--forward.btn--white::after {
     background-image: url(/content/dam/nttcom/hq/jp/index/img/arrow-right-primary.svg);
}

.btn--forward.btn--primary::after, .btn--forward.btn--primary-light::after {
     background-image: url(/content/dam/nttcom/hq/jp/index/img/arrow-right-accent.svg);
}

.btn--external::after {
     background-image: url(/content/dam/nttcom/hq/jp/index/img/external-link.svg);
     width: 10px;
     height: 10px;
}

@media screen and (max-width: 768px) {
     .btn {
          padding: 15px 30px 15px 30px;
     }
}

.pc {
     display: block;
}

.sp {
     display: none;
}

@media screen and (max-width: 768px) {
     .pc {
          display: none;
     }
     .sp {
          display: block;
     }
}

.container {
     max-width: 1200px;
     padding: 0 20px;
     margin: 0 auto;
}

.gotop {
     background-color: #EEE;
     padding: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #0E367D;
}

.gotop__icon {
     margin-right: 0.5em;
}

.goPageTop {
     color: #000;
}
.goPageTop:after {
     background-image: url(/content/dam/nttcom/cmn/img/cta-back-top-black.png);
}
.goPageTop:hover {
     color: #000;
     opacity: .6;
}


/* card */

.card {
     color: #333;
     background-color: white;
     height: 100%;
     position: relative;
}

.card__head img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.card__body {
     padding: 20px;
     min-height: 200px;
}

.card__meta {
     margin-bottom: 15px;
}

.card__tag {
     border: 1px solid #0E367D;
     color: #0E367D;
     font-size: 12px;
     text-align: center;
     font-weight: bold;
     display: inline-block;
     padding: 2px 15px;
}

.card__title {
     font-weight: bold;
     font-size: 14px;
     margin-bottom: 10px;
     text-decoration: underline;
}

.card__title a, .card__title a:visited, .card__title a:hover {
     color: #0E367D;
}

.card__description {
     font-size: 13px;
}

.card--external::after {
     content: "";
     display: inline-block;
     background-image: url(/content/dam/nttcom/hq/jp/index/img/external-link-outline-primary.svg);
     background-size: 100% 100%;
     position: absolute;
     bottom: 10px;
     right: 10px;
     width: 10px;
     height: 10px;
}

@media screen and (max-width: 768px) {
     .card__tag {
          font-size: 10px;
     }
     .card__body {
          padding: 10px;
     }
     .card__title {
          margin-bottom: 15px;
     }
     .card__text {
          margin: 0;
     }
}


/* card--case */

.card--case .card__head {
     height: 130px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 10px;
}

.card--case .card__head img {
     width: auto;
}

@media screen and (min-width: 769px) {
     .card--media .card__head {
          height: auto;
          overflow: visible;
          line-height: 1;
     }
     .card--media .card__head a {
          display: inline-block;
          line-height: 1;
     }
     .card--media .card__head img {
          vertical-align: bottom;
     }
     .card--media .card__title {
          min-height: 4em;
     }
     #media-slider.swiper-container .swiper-wrapper {
          align-items: flex-start;
          min-height: 410px;
     }
     #media-slider.swiper-container .swiper-slide-active {
          /* margin-right: calc( ((1160px/3) - (40px/3)) / 2 ); */
          /* margin-right: 186.5px !important; */
          margin-right: 180.5px !important;
     }
     #media-slider.swiper-container .swiper-slide>.card {
          width: 100%;
     }
     #media-slider.swiper-container .swiper-slide-active>.card {
          width: 150%;
     }
     #media-slider.swiper-container .swiper-slide {
          -webkit-transition: margin 0.3s;
          -moz-transition: margin 0.3s;
          -ms-transition: margin 0.3s;
          -o-transition: margin 0.3s;
          transition: margin 0.3s;
          /* transition-delay: 0.5s; */
     }
     #media-slider.swiper-container .swiper-slide .card {
          -webkit-transition: width 0.3s;
          -moz-transition: width 0.3s;
          -ms-transition: width 0.3s;
          -o-transition: width 0.3s;
          transition: width 0.3s;
     }
}


/*!
 * /content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/
*/


/* =========================================================
 * ページ独自部分
 * @ PAGE ORIGINAL
 * ====================================================== */

.pc_only {
     display: block;
}

.tb_above {
     /*PCとタブレット*/
     display: block;
}

.tb_below {
     /*SPとタブレット*/
     display: none;
}

.sp_only {
     display: none;
}

@media screen and (max-width: 768px) {
     .pc_only {
          display: none;
     }
     .tb_above {
          /*PCとタブレット*/
          display: block;
     }
     .tb_below {
          /*SPとタブレット*/
          display: block;
     }
     .sp_only {
          display: none;
     }
}

@media screen and (max-width: 480px) {
     .pc_only {
          display: none;
     }
     .tb_above {
          /*PCとタブレット*/
          display: none;
     }
     .tb_below {
          /*SPとタブレット*/
          display: block;
     }
     .sp_only {
          display: block;
     }
}

.content-wrapper {
     overflow: hidden;
}

.contents {
     font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, sans-serif;
     font-size: 16px;
     color: #212221;
     -webkit-font-feature-settings: "palt";
     font-feature-settings: "palt";
}

.contents--has-rect {
     overflow: hidden;
}

.contents--has-rect .contents_inner {
     position: relative;
}

.contents--has-rect .contents_inner::after {
     content: "";
     display: block;
     width: calc(118 / 1366 * 100%);
     height: auto;
     padding-top: calc(201 / 1366 * 100%);
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/rect-content-bottom.png);
     position: absolute;
     right: 0;
     bottom: 0;
     -webkit-transform: translate(-29%, 37%);
     transform: translate(-29%, 37%);
}

@media screen and (max-width: 768px) {
     .contents--has-rect .contents_inner::after {
          width: calc(118 / 750 * 100vw);
          padding-top: calc(201 / 750 * 100vw);
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/rect-content-bottom.png);
          -webkit-transform: translate(-59%, 47%);
          transform: translate(-59%, 47%);
     }
}

.contents .contents_inner {
     width: 100%;
     max-width: 1366px;
     margin: 0 auto;
}

.o-icon {
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     width: 16px;
     position: relative;
     display: inline-block;
}

.o-icon>svg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}

.o-icon::before {
     content: "";
     display: block;
     width: 100%;
     height: auto;
     padding-top: 100%;
}

.o-icon--arrow-w>svg {
     fill: #FFF;
}

.o-icon--arrow-w::before {
     padding-top: 161.538461538%;
}

.o-btn {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     position: relative;
     max-width: 500px;
     height: 50px;
     margin: 0 auto;
     font-weight: bold;
}

.o-btn>span {
     position: relative;
     z-index: 2;
}

.o-btn--square::before {
     content: "";
     display: block;
     width: 100%;
     height: 100%;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%) skewX(-15deg);
     transform: translate(-50%, -50%) skewX(-15deg);
     z-index: 1;
}

.o-btn--b {
     background-color: #cc023a;
}

.o-btn--b>span {
     color: #FFF;
}

.o-btn--b:hover {
     background-color: #4c4c4c;
}

.o-btn--b.o-btn--square {
     background: transparent;
     -webkit-box-shadow: none;
     box-shadow: none;
}

.o-btn--b.o-btn--square::before {
     background-color: #cc023a;
}

.o-btn--b.o-btn--square:hover::before {
     background-color: #4c4c4c;
}

.o-btn--shadow {
     -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
     box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
}

.o-btn--arrow .o-icon {
     width: 5px;
     position: absolute;
     right: 10px;
     top: 50%;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     z-index: 2;
}

@media screen and (max-width: 768px) {
     .o-btn {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          position: relative;
          max-width: 680px;
          height: calc(129 / 750 * 100vw);
          margin: 0 auto;
          font-weight: bold;
     }
     .o-btn>span {
          position: relative;
          z-index: 2;
          margin: 30px;
          line-height: 1.5;
     }
     .o-btn--square::before {
          content: "";
          display: block;
          width: calc(620 / 750 * 100vw);
          max-width: 695px;
          height: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%) skewX(-15deg);
          transform: translate(-50%, -50%) skewX(-15deg);
          z-index: 1;
     }
     .o-btn--b {
          background-color: #cc023a;
     }
     .o-btn--b>span {
          color: #FFF;
          margin: 13px;
          font-size: 14px;
          text-align: center;
     }
     .o-btn--b:hover {
          background-color: #ffd800;
     }
     .o-btn--b:hover span {
          color: #0f357c;
     }
     .o-btn--b.o-btn--square {
          background: transparent;
          -webkit-box-shadow: none;
          box-shadow: none;
     }
     .o-btn--b.o-btn--square::before {
          background-color: #cc023a;
          -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
     }
     .o-btn--b.o-btn--square:hover::before {
          background-color: #4c4c4c;
     }
     .o-btn--shadow {
          -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
     }
     .o-btn--arrow .o-icon {
          width: 5px;
          position: absolute;
          right: 10px;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          z-index: 2;
     }
     .o-btn--arrow .o-icon.-sparrow {
          right: 10px;

     }
     .o-btn--arrow:hover .o-icon svg {
          fill: #0f357c;
     }
}

.o-section-anchor {
     margin-top: 70px;
}

@media screen and (max-width: 768px) {
     .o-section-anchor {
          width: calc(620 / 750 * 100vw);
          margin-top: calc(83 / 750 * 100vw);
          margin-left: auto;
          margin-right: auto;
     }
     .o-section-anchor .o-btn--b.o-btn--square {
          height: calc(95 / 750 * 100vw);
     }
}

.o-top_txt--has-bg {
     position: relative;
     font-size: 37px;
     font-weight: bold;
     text-align: center;
}

.o-top_txt--has-bg>span {
     position: relative;
     z-index: 2;
     font-size: 37px;
     font-weight: bold;
}

.o-top_txt--has-bg::before {
     content: "";
     display: block;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     position: relative;
     left: 50%;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
     z-index: 1;
     margin-bottom: calc(23 / 37 * -1em);
}

.card__body {
     padding: 30px;
}

.card__title {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     max-height: 4em;
     text-decoration: none;
}

.card__title a {
     color: #212221;
}

.card__title a:hover {
     color: #0e367d;
}

.card__text {
     margin-top: 25px;
}

.card__date {
     margin-top: 40px;
     font-size: 14px;
}

.card--pict .card__head {
     position: relative;
}

.card--pict .card__head::before {
     content: "";
     display: block;
     width: 100%;
     padding-top: 70.1257861635%;
}

.card--pict .card__head img {
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
}

.card--pict .card__body {
     padding-top: 0 !important;
}

.card--pict .card__title {
     text-align: center;
     font-size: 16px;
     line-height: 1.444444444;
}

.card--pict.icon-sustainable02 img {
     -webkit-transform: translate(-46%, -50%);
     transform: translate(-46%, -50%);
}

.card--pict.icon-sustainable03 img {
     width: 94.9685534591%;
     -webkit-transform: translate(-52%, -50%);
     transform: translate(-52%, -50%);
}

@media screen and (max-width: 768px) {
     .card--pict .card__title {
          text-align: center;
          font-size: 18px;
          line-height: 1.444444444;
     }
}

.u-txt-link {
     text-decoration: underline;
}

.u-txt-link:hover {
     text-decoration: none;
}


/* スライダー */

.swiper-slide {
     height: auto;
}

.worklife-slider {
     width: 1140px;
     margin: 0 auto;
}

.card__title a {
     display: block;
     font-size: 17px;
}

.card__text {
     color: #595757;
     font-size: 13px;
}

.card__text__supp {
     margin-top: 0;
}

.card__text__supp ul {
     list-style-type: disc;
     list-style-position: outside;
     width: calc(100% - 80px);
     margin: 0 auto 15px;
     font-size: 0.8rem;
     color: #595757;
     line-height: 1rem;
     ;
}

.card__text__supp ul li {
     margin-bottom: 5px;
}

.card__body {
     padding: 30px 35px;
}

.card--media .card__title {
     min-height: auto;
     margin-bottom: 15px;
}

.card-slider-accessory {
     margin-top: 62px;
}

@media screen and (max-width: 768px) {
     .card-slider-accessory {
          margin-top: 39px;
     }
     .card-slider-accessory .btn {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
     }
     .card__body {
          padding: calc(24 / 750 * 100vw) calc(28 / 750 * 100vw) calc(38 / 750 * 100vw);
     }
     .card__title a {
          font-size: 14px;
     }
     .card__text {
          font-size: 11px;
          color: #212221;
          margin: 0;
     }
     .card__text__supp ul {
          width: calc(100% - 20px);
     }
}


/* 関連コンテンツ */

.service {
     margin: 0 auto;
     padding: calc(79 / 1366 * 100vw) 0 80px;
     background: #eeeeee;
}

.service .card__link {
     text-decoration: underline;
}

.service a img:hover {
     opacity: 1;
     transition: none;
}
.service a :hover img {
     opacity: .8;
}
.service a :hover .card__link {
     text-decoration: none;
}

.contents-related .o-top_txt--has-bg::before {
     width: calc(1245 / 37 * 1em);
     height: calc(83 / 37 * 1em);
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-related.svg);
}

.contents-related .related-slider {
     margin-top: 63px;
}

.contents-related .related-slider .card-slider-accessory {
     height: auto;
}

.contents-related .related-article {
     padding: 0 40px;
     margin-top: 40px;
}

.contents-related .related-article__wrap {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 0 -21px;
}

.contents-related .related-article__item {
     width: calc((100% - 21px * 2 * 4) / 4);
     margin: 0 21px;
     -webkit-box-flex: 0;
     -ms-flex-positive: 0;
     flex-grow: 0;
}

@media screen and (max-width: 768px) {
     .contents-related .related-article {
          padding: 0 calc(35 / 750 * 100vw);
     }
     .contents-related .related-article__wrap {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: start;
          -ms-flex-pack: start;
          justify-content: start;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          margin: 0 calc(15 / 750 * -100vw);
     }
     .contents-related .related-article__item {
          width: 50%;
          width: calc((100% - 30 / 750 * 100vw * 4) / 2);
          margin: 0 calc(30 / 750 * 100vw);
     }
     .contents-related .related-article__item:nth-child(n+3) {
          margin-top: calc(60 / 750 * 100vw);
     }
}

.contents-related--lower .o-top_txt--has-bg::before {
     width: calc(1245 / 37 * 1em);
     height: calc(83 / 37 * 1em);
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-content.svg);
}

@media screen and (max-width: 768px) {
     .contents-related .contents_inner {
          width: 100%;
     }
     .contents-related .o-top_txt--has-bg::before {
          width: auto;
          max-width: calc(628 / 750 * 100vw);
          height: calc(205 / 750 * 100vw);
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-related-sp.svg);
     }
     .contents-related .related-slider {
          margin-top: 36px;
     }
     .contents-related .related-slider .card-slider-accessory {
          height: auto;
          margin-top: 60px;
     }
     .contents-related .related-slider .slider-control__dots {
          background: none;
     }
     .contents-related .related-slider .slider-control__dots .swiper-pagination-bullet {
          width: calc(36 / 750 * 100vw);
          height: 6px;
          -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
          display: inline-block;
          border-radius: inherit;
          background: #000;
          opacity: 0.2;
     }
     .contents-related .related-slider .slider-control__dots .swiper-pagination-bullet-active {
          background: #212221;
          opacity: 1;
     }
     .contents-related .related-slider .slider-control__back, .contents-related .related-slider .slider-control__next {
          max-width: calc(72 / 750 * 100vw);
          max-height: calc(61 / 750 * 100vw);
          background-color: transparent;
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          border-radius: inherit;
          position: relative;
     }
     .contents-related .related-slider .slider-control__back i, .contents-related .related-slider .slider-control__next i {
          width: calc(16 / 750 * 100vw);
          position: relative;
          z-index: 2;
     }
     .contents-related .related-slider .slider-control__back::before, .contents-related .related-slider .slider-control__next::before {
          display: none;
     }
     .contents-related .related-slider .slider-control__back::after, .contents-related .related-slider .slider-control__next::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: #cc023a;
          position: absolute;
          left: 0;
          top: 0;
          -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
          z-index: 1;
          -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
     }
     .contents-related .related-slider .slider-control__back:hover::after, .contents-related .related-slider .slider-control__next:hover::after {
          background-color: #4c4c4c;
     }
     .contents-related .related-slider .slider-control__back i {
          -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
     }
     .contents-related--lower .contents_inner {
          padding-top: calc(100 / 750 * 100vw);
     }
     .contents-related--lower .top_txt {
          font-size: 19px;
     }
     .contents-related--lower .o-top_txt--has-bg::before {
          width: calc(1245 / 37 * 1em);
          height: calc(83 / 37 * 1em);
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-content.svg);
     }
}


/*!
 * worklife CSS
*/

@-webkit-keyframes SlideInLeft {
     0% {
          opacity: 0;
          -webkit-transform: translateX(-300px);
          transform: translateX(-300px);
     }
     40% {
          opacity: 0.2;
     }
     100% {
          opacity: 1;
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }
}

@keyframes SlideInLeft {
     0% {
          opacity: 0;
          -webkit-transform: translateX(-300px);
          transform: translateX(-300px);
     }
     40% {
          opacity: 0.2;
     }
     100% {
          opacity: 1;
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }
}

@-webkit-keyframes SlideInLeftShort {
     0% {
          opacity: 0;
          -webkit-transform: translateX(-150px);
          transform: translateX(-150px);
     }
     40% {
          opacity: 0.2;
     }
     100% {
          opacity: 1;
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }
}

@keyframes SlideInLeftShort {
     0% {
          opacity: 0;
          -webkit-transform: translateX(-150px);
          transform: translateX(-150px);
     }
     40% {
          opacity: 0.2;
     }
     100% {
          opacity: 1;
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }
}

@-webkit-keyframes SlideInRightShort {
     0% {
          opacity: 0;
          -webkit-transform: translateX(150px);
          transform: translateX(150px);
     }
     40% {
          opacity: 0.2;
     }
     100% {
          opacity: 1;
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }
}

@keyframes SlideInRightShort {
     0% {
          opacity: 0;
          -webkit-transform: translateX(150px);
          transform: translateX(150px);
     }
     40% {
          opacity: 0.2;
     }
     100% {
          opacity: 1;
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }
}

@-webkit-keyframes SlideInTop {
     0% {
          opacity: 0;
          -webkit-transform: translateY(-200px);
          transform: translateY(-200px);
     }
     100% {
          opacity: 1;
          -webkit-transform: translateY(0);
          transform: translateY(0);
     }
}

@keyframes SlideInTop {
     0% {
          opacity: 0;
          -webkit-transform: translateY(-200px);
          transform: translateY(-200px);
     }
     100% {
          opacity: 1;
          -webkit-transform: translateY(0);
          transform: translateY(0);
     }
}

@-webkit-keyframes SlideInBottom {
     0% {
          opacity: 0;
          -webkit-transform: translateY(200px);
          transform: translateY(200px);
     }
     100% {
          opacity: 1;
          -webkit-transform: translateY(0);
          transform: translateY(0);
     }
}

@keyframes SlideInBottom {
     0% {
          opacity: 0;
          -webkit-transform: translateY(200px);
          transform: translateY(200px);
     }
     100% {
          opacity: 1;
          -webkit-transform: translateY(0);
          transform: translateY(0);
     }
}

@-webkit-keyframes FadeIn {
     0% {
          opacity: 0;
     }
     100% {
          opacity: 1;
     }
}

@keyframes FadeIn {
     0% {
          opacity: 0;
     }
     100% {
          opacity: 1;
     }
}

@-webkit-keyframes heartbeat {
     from {
          -webkit-transform: scale(1);
          transform: scale(1);
          -webkit-transform-origin: center center;
          transform-origin: center center;
          -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
     }
     10% {
          -webkit-transform: scale(0.91);
          transform: scale(0.91);
          -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
     }
     17% {
          -webkit-transform: scale(0.98);
          transform: scale(0.98);
          -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
     }
     33% {
          -webkit-transform: scale(0.87);
          transform: scale(0.87);
          -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
     }
     45% {
          -webkit-transform: scale(1);
          transform: scale(1);
          -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
     }
}

@keyframes heartbeat {
     from {
          -webkit-transform: scale(1);
          transform: scale(1);
          -webkit-transform-origin: center center;
          transform-origin: center center;
          -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
     }
     10% {
          -webkit-transform: scale(0.91);
          transform: scale(0.91);
          -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
     }
     17% {
          -webkit-transform: scale(0.98);
          transform: scale(0.98);
          -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
     }
     33% {
          -webkit-transform: scale(0.87);
          transform: scale(0.87);
          -webkit-animation-timing-function: ease-in;
          animation-timing-function: ease-in;
     }
     45% {
          -webkit-transform: scale(1);
          transform: scale(1);
          -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
     }
}

.ani-sec01-01 {
     -webkit-transform: translateX(-300px);
     transform: translateX(-300px);
     opacity: 0;
}

.is-animate .ani-sec01-01 {
     -webkit-animation-name: SlideInLeft;
     animation-name: SlideInLeft;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 0;
     animation-delay: 0;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec01-02 {
     -webkit-transform: translateX(-300px);
     transform: translateX(-300px);
     opacity: 0;
}

.is-animate .ani-sec01-02 {
     -webkit-animation-name: SlideInLeft;
     animation-name: SlideInLeft;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 250ms;
     animation-delay: 250ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec01-01 {
     -webkit-transform: translateX(-300px);
     transform: translateX(-300px);
     opacity: 0;
}

.is-animate .ani-sec01-01 {
     -webkit-animation-name: SlideInLeft;
     animation-name: SlideInLeft;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 0;
     animation-delay: 0;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec01-03 {
     -webkit-transform: translateX(-300px);
     transform: translateX(-300px);
     opacity: 0;
}

.is-animate .ani-sec01-03 {
     -webkit-animation-name: SlideInLeft;
     animation-name: SlideInLeft;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 600ms;
     animation-delay: 600ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec01-04 {
     -webkit-transform: translateY(-200px);
     transform: translateY(-200px);
     opacity: 0;
}

.is-animate .ani-sec01-04 {
     -webkit-animation-name: SlideInTop;
     animation-name: SlideInTop;
     -webkit-animation-duration: 550ms;
     animation-duration: 550ms;
     -webkit-animation-delay: 1000ms;
     animation-delay: 1000ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec01-05 {
     -webkit-transform: translateY(200px);
     transform: translateY(200px);
     opacity: 0;
}

.is-animate .ani-sec01-05 {
     -webkit-animation-name: SlideInBottom;
     animation-name: SlideInBottom;
     -webkit-animation-duration: 550ms;
     animation-duration: 550ms;
     -webkit-animation-delay: 1250ms;
     animation-delay: 1250ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec01-06 {
     -webkit-transform: translateY(-200px);
     transform: translateY(-200px);
     opacity: 0;
}

.is-animate .ani-sec01-06 {
     -webkit-animation-name: SlideInTop;
     animation-name: SlideInTop;
     -webkit-animation-duration: 550ms;
     animation-duration: 550ms;
     -webkit-animation-delay: 1300ms;
     animation-delay: 1300ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec01-07 {
     -webkit-transform: translateY(200px);
     transform: translateY(200px);
     opacity: 0;
}

.is-animate .ani-sec01-07 {
     -webkit-animation-name: SlideInBottom;
     animation-name: SlideInBottom;
     -webkit-animation-duration: 550ms;
     animation-duration: 550ms;
     -webkit-animation-delay: 1600ms;
     animation-delay: 1600ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec02-01 {
     -webkit-transform: translateX(-150px);
     transform: translateX(-150px);
     opacity: 0;
}

.is-animate .ani-sec02-01 {
     -webkit-animation-name: SlideInLeftShort;
     animation-name: SlideInLeftShort;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 0ms;
     animation-delay: 0ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec02-02 {
     opacity: 0;
}

.is-animate .ani-sec02-02 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 500ms;
     animation-duration: 500ms;
     -webkit-animation-delay: 500ms;
     animation-delay: 500ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec02-03 {
     -webkit-transform: translateX(-150px);
     transform: translateX(-150px);
     opacity: 0;
}

.is-animate .ani-sec02-03 {
     -webkit-animation-name: SlideInLeftShort;
     animation-name: SlideInLeftShort;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 750ms;
     animation-delay: 750ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec02-04 {
     -webkit-transform: translateX(-150px);
     transform: translateX(-150px);
     opacity: 0;
}

.is-animate .ani-sec02-04 {
     -webkit-animation-name: SlideInLeftShort;
     animation-name: SlideInLeftShort;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 1000ms;
     animation-delay: 1000ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec02-05 {
     -webkit-transform: translateX(-150px);
     transform: translateX(-150px);
     opacity: 0;
}

.is-animate .ani-sec02-05 {
     -webkit-animation-name: SlideInLeftShort;
     animation-name: SlideInLeftShort;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 1250ms;
     animation-delay: 1250ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec02-06 {
     opacity: 0;
}

.is-animate .ani-sec02-06 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 3500ms;
     animation-delay: 3500ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec03-01 {
     -webkit-transform: translateX(-150px);
     transform: translateX(-150px);
     opacity: 0;
}

.is-animate .ani-sec03-01 {
     -webkit-animation-name: SlideInRightShort;
     animation-name: SlideInRightShort;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 0ms;
     animation-delay: 0ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec03-02 {
     opacity: 0;
}

.is-animate .ani-sec03-02 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 1000ms;
     animation-duration: 1000ms;
     -webkit-animation-delay: 500ms;
     animation-delay: 500ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec03-03 {
     -webkit-transform: translateX(-150px);
     transform: translateX(-150px);
     opacity: 0;
}

.is-animate .ani-sec03-03 {
     -webkit-animation-name: SlideInLeftShort;
     animation-name: SlideInLeftShort;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 750ms;
     animation-delay: 750ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec03-04 {
     -webkit-transform: translateX(-150px);
     transform: translateX(-150px);
     opacity: 0;
}

.is-animate .ani-sec03-04 {
     -webkit-animation-name: SlideInLeftShort;
     animation-name: SlideInLeftShort;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 1000ms;
     animation-delay: 1000ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec03-05 {
     -webkit-transform: translateX(-150px);
     transform: translateX(-150px);
     opacity: 0;
}

.is-animate .ani-sec03-05 {
     -webkit-animation-name: SlideInLeftShort;
     animation-name: SlideInLeftShort;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 1250ms;
     animation-delay: 1250ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec03-06 {
     opacity: 0;
}

.is-animate .ani-sec03-06 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 3500ms;
     animation-delay: 3500ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec04-01 {
     opacity: 0;
}

.is-animate .ani-sec04-01 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 0ms;
     animation-delay: 0ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec04-02 {
     opacity: 0;
}

.is-animate .ani-sec04-02 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 1000ms;
     animation-delay: 1000ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec04-03 {
     opacity: 0;
}

.is-animate .ani-sec04-03 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 2000ms;
     animation-delay: 2000ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec04-04 {
     opacity: 0;
}

.is-animate .ani-sec04-04 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 2500ms;
     animation-delay: 2500ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec04-05 {
     opacity: 0;
}

.is-animate .ani-sec04-05 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 3000ms;
     animation-delay: 3000ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.ani-sec04-06 {
     opacity: 0;
}

.is-animate .ani-sec04-06 {
     -webkit-animation-name: FadeIn;
     animation-name: FadeIn;
     -webkit-animation-duration: 750ms;
     animation-duration: 750ms;
     -webkit-animation-delay: 3500ms;
     animation-delay: 3500ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.is-animate .ani-sec04-07 {
     -webkit-animation-name: heartbeat;
     animation-name: heartbeat;
     -webkit-animation-duration: 1.5s;
     animation-duration: 1.5s;
     -webkit-animation-delay: 4000ms;
     animation-delay: 4000ms;
     -webkit-animation-timing-function: ease-in-out;
     animation-timing-function: ease-in-out;
     -webkit-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
}

.visually-hidden {
     position: absolute;
     left: 0;
     top: 0;
     overflow: hidden;
     width: 1px;
     height: 1px;
}

.sans {
     font-family: Gill Sans, sans-serif;
     font-weight: 600;
}


/* card-slider-accessory */

.card-slider-accessory {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
}

.card-slider-accessory__actions {
     position: absolute;
     right: 0;
     display: flex;
     justify-content: flex-end;
     top: 0;
}

.card-slider-accessory__action {
     margin-left: 10px;
}

.card-slider-set__accesory {
     position: absolute;
     display: flex;
     justify-content: center;
     width: 100%;
}


/* slider-control */

.slider-control {
     display: inline-flex;
     align-items: center;
}

.slider-control__back, .slider-control__next {
     width: 62px;
     height: 50px;
     background-color: transparent;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: inherit;
     position: relative;
}

.slider-control__back i, .slider-control__next i {
     font-size: 14px;
     position: relative;
     z-index: 2;
}

.slider-control__back::after, .slider-control__next::after {
     content: "";
     display: block;
     width: 100%;
     height: 100%;
     background-color: #cc023a;
     position: absolute;
     left: 0;
     top: 0;
     -webkit-transform: skewX(-15deg);
     transform: skewX(-15deg);
     z-index: 1;
     -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
     box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
}

.slider-control__back:hover::after, .slider-control__next:hover::after {
     background-color: #4c4c4c;
}

.slider-control__back {
     margin-right: 2px;
}

.slider-control__back i {
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
}

.slider-control__next {
     margin-left: 2px;
}

.slider-control__play::before {
     display: inline-block;
     content: "";
     background-image: url(/content/dam/nttcom/hq/jp/index/img/slider-control-pause.svg);
     background-size: 100% 100%;
     width: 10px;
     height: 10px;
}

.slider-control__dots {
     display: inline-flex;
     height: 30px;
     align-items: center;
     padding: 0 20px;
}

.slider-control .swiper-pagination-bullet {
     margin: 0 5px;
     width: 32px;
     height: 8px;
     -webkit-transform: skewX(-15deg);
     transform: skewX(-15deg);
     display: inline-block;
     border-radius: inherit;
     background: #000;
     opacity: 0.2;
}

.slider-control .swiper-pagination-bullet-active {
     background: #212221;
     opacity: 1;
}

.slider-control__play {
     width: 44px;
     height: 30px;
     border-radius: 15px;
     background-color: #414F5B;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     margin-left: 10px;
}

.slider-control--stopped .slider-control__play::before {
     content: "";
     display: inline-block;
     background-image: url(/content/dam/nttcom/hq/jp/index/img/slider-control-play.svg);
     background-size: 100% 100%;
     width: 9px;
     height: 10.392px;
}

@media screen and (max-width: 768px) {
     .card-slider-accessory {
          flex-direction: column;
          height: auto;
          align-items: stretch;
     }
     .card-slider-accessory .slider-control {
          display: flex;
          justify-content: center;
     }
     .card-slider-accessory__actions {
          margin-top: 10px;
          position: static;
          display: flex;
          flex-direction: column;
     }
     .card-slider-accessory__action {
          margin-left: 0;
          margin-top: 20px;
     }
     .card-slider-accessory .btn {
          width: 100%;
     }
     .slider-control__dots {
          background: none;
     }
     .slider-control__dots .swiper-pagination-bullet {
          width: calc(36 / 750 * 100vw);
          height: 6px;
          -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
          display: inline-block;
          border-radius: inherit;
          background: #000;
          opacity: 0.2;
     }
     .slider-control__dots .swiper-pagination-bullet-active {
          background: #212221;
          opacity: 1;
     }
     .slider-control__back, .slider-control__next {
          max-width: calc(72 / 750 * 100vw);
          max-height: calc(61 / 750 * 100vw);
          background-color: transparent;
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          border-radius: inherit;
          position: relative;
     }
     .slider-control__back i, .slider-control__next i {
          width: calc(16 / 750 * 100vw);
          position: relative;
          z-index: 2;
     }
     .slider-control__back::before, .slider-control__next::before {
          display: none;
     }
     .slider-control__back::after, .slider-control__next::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: #cc023a;
          position: absolute;
          left: 0;
          top: 0;
          -webkit-transform: skewX(-15deg);
          transform: skewX(-15deg);
          z-index: 1;
          -webkit-box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
     }
     .slider-control__back:hover::after, .slider-control__next:hover::after {
          background-color: #4c4c4c;
     }
     .slider-control__back i {
          -webkit-transform: scaleX(-1);
          transform: scaleX(-1);
     }
}


/* hero */

.hero {
     display: block;
     width: 100%;
     height: auto;
}


/* コンテンツ共通 */

.primary_heading {
     color: #0E367D;
     font-size: 26px;
}

.secondary_heading {
     color: #6487C3;
     font-size: 26px;
     text-align: center;
}

.top_txt {
     text-align: center;
}

.outer-container {
     max-width: 1366px;
     width: 100%;
     margin: auto;
}

.contents_inner {
     width: 1160px;
     margin: 0 auto;
}

@media screen and (max-width: 768px) {
     .outer-container {
          padding-left: 20px;
          padding-right: 20px;
     }
     .contents_inner {
          width: 100%;
          padding: 0 20px;
     }
     .primary_heading {
          font-size: 19px;
     }
     .secondary_heading {
          font-size: 17px;
     }
     .top_txt {
          margin-top: 9px;
          font-size: 19px;
     }
     .btn-arrow {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          padding: 5px 35px;
          line-height: 1.5;
     }
}

.index {
     background: #cc023a;
     color: white;
     padding: 20px 0;
     position: fixed;
     width: 100%;
     z-index: 4;
     right: 0;
     height: 92px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.5s;
     opacity: 1;
     pointer-events: all;
     box-shadow: 0px 3px 4px rgb(0 0 0 / 30%);
}
/* .menu-open .index {
     opacity: 1;
     pointer-events: all;
} */

.index__closed {
     background: rgba(8, 47, 92, 1);
     color: white;
     padding: 20px 35px;
     position: fixed;
     /* width: 100%; */
     z-index: 4;
     right: 0;
     height: 92px;
     display: flex;
     align-items: center;
     opacity: 1;
     cursor: pointer;

     transition: opacity 0.5s;

     display: none;
}
.menu-open .index__closed {
     opacity: 0;
     pointer-events: none;
}


.index .container {
     align-items: center;
     height: 100%;
     display: flex;
}

.index__body {
     flex: 1;
}

.index__leading {
     margin-right: 36px;
     border-right: 1px solid rgba(255, 255, 255, 0.24);
     padding-right: 36px;
}

.index__label {
     font-size: 30px;
}

.index__body {
     line-height: 1;
     margin-top: -10px;
}

.index__link {
     margin: 10px 36px 0 0;
     display: inline-flex;
     align-items: center;
     font-weight: bold;
}

.index__link::before {
     content: "";
     display: inline-block;
     width: 6px;
     background: #fff;
     height: 15px;
     transform: skewX(-10deg);
     margin-right: 0.5em;
}

.index__contact-button {
     font-weight: bold;
     display: inline-block;
     height: 37.43px;
     width: 130px;
     justify-content: center;
     position: relative;
}

.index__contact-button:hover::before {
     background-color: #4c4c4c;
}

.index__contact-button:hover .arrow {
     fill: #fff;
}

.index__contact-button, .index__contact-button:visited {
     color: #cc023a;
}

.index__contact-button::before {
     content: "";
     background: #fff;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     transform: skewX(-12deg);
}

.index__contact-button-body {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100%;
     padding: 0 15px;
}

.index__contact-button .arrow {
     fill: #cc023a;
}

.index__toggle {
     display: none;
}
.index__toggle--pc {
     padding-left: 35px;
     height: 100%;
     display: none;
     align-items: center;
     cursor: pointer;
}
.index .index__toggle--pc svg {
     transform: scale(-1, 1);
}
.fix-hero {
     padding-top: 92px;
}

@media screen and (max-width: 768px) {
     .index {
          padding: 17px 0;
          opacity: 1;
          pointer-events: all;
          height: auto;
          background-color: #cc023a;
     }
     .index__closed {
          display: none;
     }
     .index .container {
          flex-direction: column;
          align-items: flex-start;
     }
     .index__leading {
          border: 0;
          font-size: 18px;
          margin: 0;
          padding: 0;
          line-height: 1em;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
     }
     .index__label {
          font-size: 18px;
     }
     .index__toggle {
          display: block;
     }
     .index__toggle--pc {
          display: none;
     }
     .index__toggle svg {
          width: 19px;
     }
     .index__body {
          display: flex;
          margin-top: 0;
          border-top: 2px solid #fff;
          width: 100%;
          flex-direction: column;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.6s, max-height 0.6s, margin 0.6s;
          overflow: hidden;
          max-height: 0;
     }
     .menu-open .index__body {
          margin-top: 17px;
          opacity: 1;
          pointer-events: all;
          max-height: 500px;
     }
     .index__link {
          margin-top: 20px;
          font-size: 15px;
          margin-left: 2px;
     }
     .index__trailing {
          width: 100%;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.6s, max-height 0.6s, margin 0.6s;
          overflow: hidden;
          max-height: 0;
          display: flex;
          justify-content: center;
     }
     .menu-open .index__trailing {
          margin-top: 35px;
          opacity: 1;
          pointer-events: all;
          max-height: 200px;
     }
     .index__contact-button {
          width: 96%;
          height: 45px;
     }
     .index__contact-button-body {
          width: 100%;
          text-align: center;
          position: relative;
          justify-content: center;
     }
     .index__contact-button .arrow {
          position: absolute;
          right: 10px;
          top: 0;
          bottom: 0;
          margin: auto;
     }

     .fix-hero {
          padding-top: 65px;
     }
}

/* topics */

.topics {
     margin: 0 auto;
     padding: 120px 0;
     position: relative;
}
.topics-figure {
     position: absolute;
}
.topics-figure.-first {
     top: 0;
     right: 0;
     transform: translateX(50%);
}
.topics-figure.-second {
     bottom: 0;
     left: 0;
     transform: rotate(180deg) translateX(50%) translateY(50%);
}

.topics__header {
     display: flex;
     align-items: flex-end;
     margin-bottom: 70px;
}

.topics__heading {
     position: relative;
     font-size: 37px;
     font-weight: bold;
     text-align: center;
     line-height: 1em;
}

.topics__heading:before {
     content: "";
     display: block;
     width: 560px;
     height: 113px;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-topics.svg);
     position: relative;
     left: 50%;
     transform: translateX(-50%);
     z-index: 1;
     margin-bottom: calc(23 / 37 * -1em);
}

.topics__sub-heading {
     margin-left: 125px;
     font-weight: bold;
     font-size: 18px;
}

.topics .card__link {
     text-decoration: underline;
}

.topics .swiper-slide a:hover .card__link {
     text-decoration: none;
}

.topics .swiper-slide a img:hover {
     opacity: 1;
     transition: none;
}

.topics .swiper-slide a:hover img {
     opacity: .8;
}

.card--topics .card__body {
    background: #F4F4F6;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.card--topics .card__date {
     margin-top: auto;
     margin-bottom: 0;
}
.card--topics {
     background: #F4F4F6;
}

@media screen and (max-width: 768px) {
     .topics {
          margin-top: 40px;
          margin-bottom: 60px;
          padding-top: 0;
          padding-bottom: 0;
          overflow: hidden;
     }
     .topics-figure {
          display: none;
     }

     .topics__header {
          flex-direction: column;
          align-items: flex-start;
          margin-bottom: 33px;
     }
     .topics__heading {
          text-align: left;
          font-size: 23px;
     }
     .topics__heading::before {
          max-width: 311px;
          height: 63px;
          width: 83vw;
          height: 16.9vw;
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-topics.svg);
     }
     .topics__sub-heading {
          margin: 33px 0 0;
          font-size: 15px;
          line-height: 30px;
     }
}


/* about */

.about {
     position: relative;
     padding-bottom: 120px;
     margin-top: 120px;
}

.about__head-inner {
     padding: 74px 38px;
     display: flex;
     position: relative;
     z-index: 2;
     max-width: 1366px;
     margin: auto;
}
.about__head--txt {
     font-size: 16px;
     line-height: 32px;
     max-width: 579px;
}

.about__head-col1, .about__head-col2 {
     width: 50%;
}

.about__head-col1 .top_txt {
     font-size: 36px;
     line-height: 54px;
     font-weight: bold;
     line-height: 1.5;
}

.about__head-col1 .top_txt span {
     text-align: left;
     display: block;
     /* padding-left: 132px; */
     font-size: 36px;
}

.about__head-col1 .top_txt::before {
     width: 532px;
     height: 111px;
     margin-left: -90px;
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-about.svg);
     left: 0;
     transform: none;
}

.about__head-col1>p {
     /* padding-left: 132px; */
     line-height: 2;
     margin-top: 40px;
}

.about__head-anchor {
     padding-left: 132px;
     line-height: 2;
     margin-top: 45px;
}

.about__head-col2 {
     position: relative;
}

.about__head-col2::before {
     content: "";
     display: block;
     width: 100%;
     height: 100%;
}

.about__head-photos, .about__head-photo {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
}

.about__head-photo {
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
}

.about__head-photo:nth-child(1) {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-head-rect01.png);
}

.about__head-photo:nth-child(2) {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-head-rect02.png);
}

.about__head-photo:nth-child(3) {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-head-rect03.png);
}

.about__head-photo:nth-child(4) {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-head-rect04.png);
}

.about .card__link {
     text-decoration: underline;
}

.about .swiper-slide a:hover .card__link {
     text-decoration: none;
}

.about .swiper-slide a img:hover {
     opacity: 1;
     transition: none;
}

.about .swiper-slide a:hover img {
     opacity: .8;
}

@media screen and (max-width: 768px) {
     .about {
          margin-top: 60px;
          padding-bottom: 30px;
          overflow: hidden;
     }
     .about .contents_inner {
          position: relative;
          overflow: hidden;
          padding: 0;
          padding-bottom: calc(130 / 750 * 100vw);
     }
     .about .contents_inner::before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background-color: #eaedf2;
          position: absolute;
          top: 0;
          left: -50%;
          -webkit-transform: skewX(-15deg) translateX(-57.5%);
          transform: skewX(-9.5deg);
          z-index: 1;
     }
     .about__head-inner {
          padding: calc(120 / 750 * 100vw) calc(36 / 750 * 100vw) calc(140 / 750 * 100vw);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          position: relative;
          z-index: 2;
     }
     .about__head-col1, .about__head-col2 {
          width: 100%;
     }
     .about__head-col1 .top_txt {
          font-size: 23px;
          font-weight: bold;
          line-height: 1.5;
     }
     .about__head-col1 .top_txt span {
          text-align: left;
          display: block;
          padding-left: 0px;
     }
     .about__head-col1 .top_txt::before {
          width: auto;
          width: calc(666 / 46 * 1em);
          height: calc(125 / 46 * 1em);
          margin-left: -20px;
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-about.svg);
     }
     .about__head-col1 .top_txt span {
          font-size: 23px;
          line-height: 34px;
     }
     .about__head-col1>p {
          padding-left: 0px;
          line-height: 2;
          margin-top: calc(60 / 750 * 100vw);
          font-size: 14px;
     }
     .about__head-anchor {
          padding-left: 0px;
          line-height: 2;
          margin-top: 45px;
          padding: 0 calc(30 / 750 * 100vw);
     }
     .about__head-col2 {
          position: relative;
          padding-top: 73.22%;
     }
     .about__head-col2::before {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
     }
     .about__head-photos, .about__head-photo {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
     }
     .about__head-photo {
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
     }
     .about__head-photo:nth-child(1) {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-head-rect01.png);
     }
     .about__head-photo:nth-child(2) {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-head-rect02.png);
     }
     .about__head-photo:nth-child(3) {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-head-rect03.png);
     }
     .about__head-photo:nth-child(4) {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-head-rect04.png);
     }
     .about__head--txt {
          font-size: 14px;
          line-height: 28px;
     }
}


/* case-study */

.case-list__column {
    margin: -20px auto;
    display: flex;
    flex-direction: column;
}

.case-list .case-tile:nth-child(odd) {
     margin: 20px 115px 20px 0;
}

.case-list .case-tile:nth-child(odd) .case-tile__inner {
     padding: 20px 40px 20px 0;
}

.case-list .case-tile:nth-child(odd) .case-tile__leading {
     margin-right: 40px;
}

.case-list .case-tile:nth-child(even) {
     margin: 20px 0 20px 115px;
}

.case-list .case-tile:nth-child(even) .case-tile__inner {
     flex-direction: row-reverse;
     padding: 20px 0 20px 40px;
}

.case-list .case-tile:nth-child(even) .case-tile__leading {
     margin-left: 40px;
}

.case-tile {
     position: relative;
     color: white;
}

.case-tile::before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: #cc023a;
     transform: skewX(-10.5deg);
}

.case-tile-link {
     display: block;
     transition: opacity 0.6s;
}
.case-tile-link:hover {
     opacity: 0.6;
}
.case-tile__inner {
     position: relative;
     display: flex;
}

.case-tile__eyecatch {
     display: block;
}

.case-tile__body {
     flex: 1;
     display: flex;
}

.case-tile__body-body {
     flex: 1;
}

.case-tile__body-trailing {
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
}

.case-tile__title {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
}

.case-tile__title-head {
     border-bottom: 3px solid white;
     margin-right: 15px;
}

.case-tile__label {
     font-size: 17px;
     font-weight: bold;
     line-height: 1;
}

.case-tile__no {
     font-size: 46px;
     font-weight: bold;
     line-height: 1;
}

.case-tile__title-body {
     font-weight: bold;
}

.case-tile__copy {
     color: #fff;
     font-weight: bold;
}

.case-tile__more {
     color: #fff;
     font-weight: bold;
     height: 37.43px;
     display: inline-block;
     width: 130px;
     margin-top: 30px;
     position: relative;
}

.case-tile__more::before {
     content: "";
     background: #4c4c4c;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     transform: skewX(-12deg);
}

.case-tile__more-inner {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100%;
     padding: 0 20px;
}

.case-list .case-tile:nth-child(odd),
.case-list .case-tile:nth-child(odd) .case-tile__eyecatch,
.case-list .case-tile:nth-child(odd) .case-tile__title,
.case-list .case-tile:nth-child(odd) .case-tile__copy,
.case-list .case-tile:nth-child(odd) .case-tile__more,
.case-list .case-tile:nth-child(odd) .case-tile__logo {
    /* transform: translateX(-50px);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s; */
}

.case-list .case-tile:nth-child(even),
.case-list .case-tile:nth-child(even) .case-tile__eyecatch,
.case-list .case-tile:nth-child(even) .case-tile__title,
.case-list .case-tile:nth-child(even) .case-tile__copy,
.case-list .case-tile:nth-child(even) .case-tile__more,
.case-list .case-tile:nth-child(even) .case-tile__logo {
    /* transform: translateX(50px);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s; */
}

.case-list .case-tile.in-view--enter,
.case-list .case-tile.in-view--enter .case-tile__eyecatch,
.case-list .case-tile.in-view--enter .case-tile__title,
.case-list .case-tile.in-view--enter .case-tile__copy,
.case-list .case-tile.in-view--enter .case-tile__more,
.case-list .case-tile.in-view--enter .case-tile__logo {
    /* transform: none;
    opacity: 1; */
}

.case-list .case-tile.in-view--enter .case-tile__eyecatch {
    transition-delay: 0.25s;
}

.case-list .case-tile.in-view--enter .case-tile__title {
    transition-delay: 0.5s;
}

.case-list .case-tile.in-view--enter .case-tile__copy {
    transition-delay: 0.75s;
}

.case-list .case-tile.in-view--enter .case-tile__more {
    transition-delay: 1s;
}

.case-list .case-tile.in-view--enter .case-tile__logo {
    transition-delay: 1.25s;
}


/* effect */

.effect {
     color: white;
     background: #cc023a;
     padding: 30px 0 80px 0;
     /* margin: 0 0 120px; */
     position: relative;
     z-index: 1;
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/contents_bg.png);
     background-size: 100% 100%;
     width: 100%;
     height: 100%;
}

.effect__heading {
     font-size: 36px;
     font-weight: bold;
     position: relative;
     line-height: 1.3;
     text-align: center;
     color: white;
     margin-bottom: 100px;
}

.effect__heading::before {
     content: "EFFECT";
     font-family: Gill Sans, sans-serif;
     font-size: 160px;
     font-style: italic;
     font-weight: 600;
     position: relative;
     color: #eeeeee;
     display: block;
     line-height: 1;
     margin-bottom: -75px;
     text-align: left;
     opacity: .1;
}
.effect__heading-text {
     position: relative;
}
@media screen and (max-width: 768px) {
     .effect {
          padding-bottom: 30px;
          background-image: none;
     }
     .effect__heading::before {
          font-size: 91.5px;
          margin-left: -30px;
          margin-bottom: -30px;
     }
     .effect__heading-text {
          font-size: 23px;
          line-height: 34px;
     }
     .effect__heading {
          margin-bottom: 75px;
     }
}

.data {
     position: relative;
     padding: 20px 0 120px;
     display: flex;
     flex-direction: column;
     align-items: center;
}

.data__heading-align {
     text-align: center;
     position: absolute;
     top: -19px;
     left: 50%;
     transform: translate(-50%, 0);
}

.data__heading {
     color: #fff;
     font-weight: bold;
     height: 37.43px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     position: relative;
}

.data__heading::before {
     content: "";
     background: #000;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     transform: skewX(-12deg);
}

.data__heading-content {
     position: relative;
     font-size: 30px;
     font-weight: bold;
     padding: 0 10px;
}

.data__sub-heading {
     font-size: 16px;
     text-align: center;
     line-height: 1;
     color: #fff;
     margin-top: 40px;
     z-index: 1;
}

.data__bg {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-bg.png) center/cover no-repeat;
}

.data-list {
     display: flex;
     justify-content: space-between;
     margin: 60px auto;
     width: 1326px;
}

.data-card {
     width: 311px;
     background-color: #fff;
     z-index: 1;
     padding: 0 0 40px;
}

.data-card .item_img {
     position: relative;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
}

.data-card .item_img::before {
     content: "";
     display: block;
     width: 100%;
     height: auto;
     padding-top: calc(334 / 311 * 100%);
}

.data-card .item_img img {
     position: absolute;
     top: 0;
     -webkit-transform-origin: center;
     transform-origin: center;
}

.data-card .o-btn {
     width: calc(100% - 60px);
     margin: 25px auto 0;
     padding: 0 18px;
     min-height: 70px;
     height: auto;
}

.data-card .o-btn span {
     font-size: 14px;
     line-height: 1.4;
}

.data-card:nth-child(1) .item_img {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-card01-graph.png);
}

.data-card:nth-child(1) .item_img img {
     width: calc(132 / 311 * 100%);
     top: calc(166 / 344 * 100%);
     left: calc(92 / 311 * 100%);
}

.data-card:nth-child(2) .item_img {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-card02-graph.png);
}

.data-card:nth-child(2) .item_img img {
     width: calc(120 / 311 * 100%);
     top: calc(85 / 344 * 100%);
     left: calc(97 / 311 * 100%);
}

.data-card:nth-child(3) .item_img {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-card03-graph.png);
}

.data-card:nth-child(3) .item_img img {
     width: calc(158 / 311 * 100%);
     top: calc(71 / 344 * 100%);
     left: calc(124 / 311 * 100%);
}

.data-card:nth-child(4) .item_img {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-card04-graph.png);
}

.data-card:nth-child(4) .item_img img {
     width: calc(131 / 311 * 100%);
     top: calc(71 / 344 * 100%);
     left: calc(156 / 311 * 100%);
}

.data-card .item_note {
     margin: 10px 0 0;
     font-size: 11px;
     text-align: center;
     line-height: 1.5;
     text-decoration: none;
     z-index: 1;
     color: black;
}
.data-card .item_note a {
     text-decoration: none;
}


.data-card .item_note a {
     font-size: 11px;
}

@media screen and (max-width: 768px) {
     .data__heading-align {
          z-index: 2;
          font-size: 23px;
          line-height: 30px;
          width: 100%;
          top: -1.5em;
     }
     .data__heading {
          width: calc(100% - 50px);
          height: auto;
     }
     .data__heading-content {
          font-size: 23px;
          line-height: 30px;
          padding: 5px 0;
     }
     .data__sub-heading {
          font-size: 15px;
          line-height: 28px;
          padding: 0 20px;
          margin-bottom: 30px;
     }
     .data-list {
          margin: 0;
     }
     .data-card {
          width: calc(30 / 750 * 100%);
     }
}

.shines-banner {
     width: 1135px;
     height: 288px;
     background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/effect/shines_banner@2x.png) center/100% 100% no-repeat;
     margin: -80px auto 0 auto;
     padding: 171px 0 0 454px;
     position: relative;
}

.shines-banner__link {
     color: #fff;
     font-weight: bold;
     height: 50px;
     display: inline-flex;
     align-items: center;
     width: 245px;
     justify-content: center;
     position: relative;
     box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
     cursor: pointer;
     margin-left: 16px;
}
.shines-banner__link-wrap:hover .shines-banner__link,
.shines-banner__link:hover {
     color: white;
}

.shines-banner__link::before {
     content: "";
     background: #cc023a;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
    transform: skewX(-12deg) translate(-2%, 0);
    width: 104%;
}
.shines-banner__link-wrap:hover .shines-banner__link::before,
.shines-banner__link:hover::before {
     background-color: #4c4c4c;
}
.shines-banner__link-wrap:hover .shines-banner__link svg path,
.shines-banner__link:hover svg path {
     fill: white;
}

.shines-banner__link-content {
     position: relative;
     font-size: 15px;
}
.shines-banner__link svg {
     position: absolute;
     right: 10px;
     top: 0;
     bottom: 0;
     margin: auto;
}
@media screen and (max-width: 768px) {
     .shines-banner {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/effect/shines_banner-sp.png);
          background-size: contain;
          width: 96vw;
          height: 52vw;
          z-index: 2;
          padding: 0;
          position: relative;
     }
     .shines-banner__link {
          width: 50vw;
          position: absolute;
          right: 15vw;
          bottom: 9vw;
          margin: 0;
     }
     .contents-data .contents_inner {
          padding: calc(120 / 750 * 100vw) calc(35 / 750 * 100vw);
     }
     .data__bg {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          z-index: 1;
          background: #464b52 url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-bg-sp.png) center top/contain no-repeat;
     }
     .contents-data .top_lead {
          display: none;
     }
     .data-list {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          margin: 0;
          padding: 0;
          width: calc(100% - (80 / 750 * 100%));
     }
     .data-card {
          width: calc(100% / 2 - (15 / 750 * 100%));
          margin: 0;
          padding-bottom: 15px;
          background-color: #fff;
     }
     .data-card:nth-child(n+3) {
          margin-top: calc(30 / 750 * 100vw);
     }
     .data-card .item_img {
          position: relative;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
     }
     .data-card .item_img::before {
          content: "";
          display: block;
          width: 100%;
          height: auto;
          padding-top: calc(334 / 311 * 100%);
     }
     .data-card .item_img img {
          position: absolute;
          top: 0;
          -webkit-transform-origin: center;
          transform-origin: center;
     }
     .data-card .o-btn {
          width: calc(100% - (29 / 320 * 100%));
          margin: 25px auto 0;
          padding: 0;
          min-height: 70px;
          height: auto;
     }
     .data-card .o-btn span {
          font-size: 11px;
          line-height: 19px;
     }
     .data-card .o-btn span {
          font-size: 11px;
          line-height: 1.4;
          margin: calc(15 / 260 * 100%) calc(30 / 260 * 100%) calc(15 / 260 * 100%) calc(15 / 260 * 100%);
          text-align: left;
     }
     .data-card .o-btn span br {
          display: none;
     }
     .data-card:nth-child(1) .item_img {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-card01-graph.png);
     }
     .data-card:nth-child(1) .item_img img {
          width: calc(132 / 311 * 100%);
          top: calc(166 / 344 * 100%);
          left: calc(92 / 311 * 100%);
     }
     .data-card:nth-child(2) .item_img {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-card02-graph.png);
     }
     .data-card:nth-child(2) .item_img img {
          width: calc(120 / 311 * 100%);
          top: calc(85 / 344 * 100%);
          left: calc(97 / 311 * 100%);
     }
     .data-card:nth-child(3) .item_img {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-card03-graph.png);
     }
     .data-card:nth-child(3) .item_img img {
          width: calc(158 / 311 * 100%);
          top: calc(71 / 344 * 100%);
          left: calc(124 / 311 * 100%);
     }
     .data-card:nth-child(4) .item_img {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/data-card04-graph.png);
     }
     .data-card:nth-child(4) .item_img img {
          width: calc(131 / 311 * 100%);
          top: calc(71 / 344 * 100%);
          left: calc(156 / 311 * 100%);
     }
     .data-card .item_note {
          margin: 10px calc(15 / 320 * 100%) 0;
          font-size: 11px;
          text-align: center;
          line-height: 1.5;
          text-decoration: none;
     }
     .data-card .item_note br {
          display: none;
     }
     .data-card .item_note a {
          text-decoration: underline;
          font-size: 10px;
     }
}


/* knowledge */

.knowledge {
     margin: 120px 0 0;
     position: relative;
}

.knowledge::before {
     content: "";
     display: block;
     width: 100%;
     background-color: #eeeeee;
     position: absolute;
     top: 160px;
     bottom: 180px;
     left: -56%;
     transform: skewX(-9.5deg);
}

.knowledge .outer-container {
     position: relative;
}

.knowledge__heading {
     position: relative;
     font-size: 37px;
     font-weight: bold;
     text-align: center;
}

.knowledge__heading:before {
     content: "KNOWLEDGE";
     font-family: Gill Sans, sans-serif;
     font-weight: 600;
     font-size: 120px;
     font-style: italic;
     display: block;
     position: relative;
     margin-bottom: -50px;
     line-height: 1;
     color: #eeeeee;
}

.knowledge__copy {
     text-align: center;
     font-weight: bold;
     font-size: 18px;
     margin: 60px 0;
}

.knowledge__body {
     position: relative;
}

.knowledge-tile {
     position: relative;
}

.knowledge-tile-rect {
     position: absolute;
     z-index: 1;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
}

.knowledge-tile-rect::before {
     content: "";
     display: block;
     width: 100%;
     height: auto;
}

.knowledge-tile-inner {
     position: relative;
     z-index: 2;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
}

.knowledge-tile-inner>div {
     width: 50%;
}

.knowledge-tile-inner:hover .knowledge-tile-desc-rect {
     background-color: #4c4c4c;
}

.knowledge-tile-photo {
     position: relative;
}

.knowledge-tile-photo::before {
     content: "";
     display: block;
     width: 100%;
     height: auto;
     padding-top: calc(600 / 707 * 100%);
}

.knowledge-tile-photo>span {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
}

.knowledge-tile-desc {
     position: relative;
}

.knowledge-tile-desc-rect {
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     background-color: #cc023a;
     -webkit-transform: skewX(-10.5deg) translateX(-7.8%);
     transform: skewX(-10.5deg) translateX(-7.8%);
}

.knowledge-tile-desc .o-icon {
     width: 12px;
     position: absolute;
     top: 50%;
     right: 95px;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
}

.knowledge-tile-desc>div {
     padding: 0 110px 0 80px;
     position: absolute;
     top: 50%;
     left: 0;
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
}

.knowledge-tile-number {
     width: 54px;
     position: relative;
}

.knowledge-tile-number::before {
     content: "";
     display: block;
     width: 100%;
     height: auto;
     padding-top: calc(62 / 54 * 100%);
}

.knowledge-tile-number>.o-icon {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     -webkit-transform: inherit;
     transform: inherit;
}

.knowledge-tile-number>.o-icon>svg {
     fill: #FFF;
}

.knowledge-tile-ttl {
     font-size: 27px;
     font-weight: bold;
     color: #FFF;
     margin-top: 32px;
}

.knowledge-tile-txt {
     max-width: 340px;
     color: #FFF;
     margin-top: 32px;
     line-height: 2;
}

.knowledge-tile--01 {
     padding-right: 38px;
}

.knowledge-tile--01 .knowledge-tile-rect--01 {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic01-rect01.png);
     width: 119px;
     bottom: -17%;
     left: 3%;
}

.knowledge-tile--01 .knowledge-tile-rect--01::before {
     padding-top: calc(133 / 119 * 100%);
}

.knowledge-tile--01 .knowledge-tile-rect--02 {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic01-rect02.png);
     width: 168px;
     bottom: -17%;
     right: 3%;
}

.knowledge-tile--01 .knowledge-tile-rect--02::before {
     padding-top: calc(297 / 168 * 100%);
}

.knowledge-tile--01 .knowledge-tile-photo>span {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic-photo01.png);
}

.knowledge-tile--02 {
     margin-top: 80px;
     padding-left: 38px;
}

.knowledge-tile--02 .knowledge-tile-rect--01 {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic02-rect01.png);
     width: 38px;
     top: -9%;
     right: 2%;
}

.knowledge-tile--02 .knowledge-tile-rect--01::before {
     padding-top: calc(67 / 38 * 100%);
}

.knowledge-tile--02 .knowledge-tile-rect--02 {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic02-rect02.png);
     width: 118px;
     bottom: -35%;
     right: 3%;
}

.knowledge-tile--02 .knowledge-tile-rect--02::before {
     padding-top: calc(201 / 118 * 100%);
}

.knowledge-tile--02 .knowledge-tile-inner {
     -webkit-box-orient: horizontal;
     -webkit-box-direction: reverse;
     -ms-flex-direction: row-reverse;
     flex-direction: row-reverse;
}

.knowledge-tile--02 .knowledge-tile-photo>span {
     background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic-photo02.png);
}

.knowledge-tile--02 .knowledge-tile-desc>div {
     left: inherit;
     right: 0;
}

.knowledge-tile--02 .knowledge-tile-desc-rect {
     -webkit-transform: skewX(-10.5deg) translateX(7.8%);
     transform: skewX(-10.5deg) translateX(7.8%);
}

.knowledge-tile--02 .knowledge-tile-desc .o-icon {
     right: 0;
}

.white-paper {
    margin: 80px auto 0 auto;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
     .white-paper {
          padding: 0 20px;
          height: auto;
     }

     .knowledge {
          overflow: hidden;
          margin-top: 48px;
          margin-bottom: 60px;
     }
     .knowledge::before {
          top: 42vw;
     }
     .knowledge__header {
          padding: 0 20px;
     }
     .knowledge-tile {
          position: relative;
     }
     .knowledge .outer-container {
          padding: 0;
     }
     .knowledge__heading:before {
          content: "";
          display: block;
          width: 100vw;
          height: 34.4vw;
          background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/knowledge-sp.svg) left center no-repeat;
          background-size: contain;
          margin-bottom: -22vw;
     }
     .knowledge__heading-content {
          font-size: 24px !important;
          line-height: 34px !important;
     }
     .knowledge__heading-content .sp_only {
          display: inline !important;
     }
     .knowledge-tile-rect {
          position: absolute;
          z-index: 1;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
     }
     .knowledge-tile-rect::before {
          content: "";
          display: block;
          width: 100%;
          height: auto;
     }
     .knowledge-tile-inner {
          position: relative;
          z-index: 2;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
     }
     .knowledge__copy {
          text-align: left;
          font-size: 15px;
          line-height: 28px;
          margin-bottom: 5vw;
          margin-top: 18vw;
     }
     .knowledge-tile-inner>div {
          width: 100%;
     }
     .knowledge-tile-inner:hover .knowledge-tile-desc-rect {
          background: #0E367D url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic-desc-rect-bg-on.png) left center repeat;
     }
     .knowledge-tile-inner:hover .knowledge-tile-number>.o-icon>svg {
          fill: #0f357c;
     }
     .knowledge-tile-inner:hover .knowledge-tile-ttl {
          color: #0f357c;
     }
     .knowledge-tile-inner:hover .knowledge-tile-txt {
          color: #0f357c;
     }
     .knowledge-tile-inner:hover .o-icon--arrow-w>svg {
          fill: #0f357c;
     }
     .knowledge-tile-photo {
          position: relative;
     }
     .knowledge-tile-photo::before {
          content: "";
          display: block;
          width: 100%;
          height: auto;
          padding-top: calc(654 / 750 * 100%);
     }
     .knowledge-tile-photo>span {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
     }
     .knowledge-tile-desc {
          position: relative;
     }
     .knowledge-tile-desc-rect {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background-color: #cc023a;
          webkit-transform: none !important;
          -webkit-transform: none !important;
          transform: none !important;
          width: 100%;
     }
     .knowledge-tile-desc .o-icon {
          width: 8px;
          position: absolute;
          top: 50%;
          right: 15px !important;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
     }
     .knowledge-tile-desc>div {
          padding: 0 calc(35 / 750 * 100vw) calc(108 / 750 * 100vw);
          position: relative;
          top: auto;
          left: auto;
          -webkit-transform: none;
          transform: none;
     }
     .knowledge-tile-number {
          max-width: calc(80 / 750 * 100vw);
          margin-top: calc(78 / 750 * 100vw);
          position: relative;
     }
     .knowledge-tile-number::before {
          content: "";
          display: block;
          width: 100%;
          height: auto;
          padding-top: calc(62 / 54 * 100%);
     }
     .knowledge-tile-number>.o-icon {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          width: 100%;
          -webkit-transform: inherit;
          transform: inherit;
     }
     .knowledge-tile-number>.o-icon>svg {
          fill: #FFF;
     }
     .knowledge-tile-ttl {
          font-size: 18px;
          font-weight: bold;
          color: #FFF;
          margin-top: 32px;
     }
     .knowledge-tile-txt {
          font-size: 14px;
          max-width: 750px;
          color: #FFF;
          margin-top: calc(30 / 750 * 100vw);
          line-height: 2;
     }
     .knowledge-tile--01 {
          padding-right: 0px;
     }
     .knowledge-tile--01 .knowledge-tile-rect--01 {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic01-rect01.png);
          width: calc(120 / 750 * 100vw);
          bottom: -9%;
          right: 7%;
          left: auto;
     }
     .knowledge-tile--01 .knowledge-tile-rect--01::before {
          padding-top: calc(133 / 119 * 100%);
     }
     .knowledge-tile--01 .knowledge-tile-rect--02 {
          background-image: none;
     }
     .knowledge-tile--01 .knowledge-tile-photo>span {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic-photo01-sp.png);
     }
     .knowledge-tile--02 {
          margin-top: calc(100 / 750 * 100vw);
          padding-left: 0px;
     }
     .knowledge-tile--02 .knowledge-tile-rect--01 {
          background-image: none;
     }
     .knowledge-tile--02 .knowledge-tile-rect--02 {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic02-rect02.png);
          width: calc(118 / 750 * 100vw);
          bottom: -13%;
          right: -3%;
     }
     .knowledge-tile--02 .knowledge-tile-rect--02::before {
          padding-top: calc(201 / 118 * 100%);
     }
     .knowledge-tile--02 .knowledge-tile-inner {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
     }
     .knowledge-tile--02 .knowledge-tile-photo>span {
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/about-topic-photo02-sp.png);
     }
     .knowledge-tile--02 .knowledge-tile-desc>div {
          left: inherit;
          right: 0;
     }
     .knowledge-tile--02 .knowledge-tile-desc-rect {
          -webkit-transform: skewX(-10.5deg) translateX(7.8%);
          transform: skewX(-10.5deg) translateX(7.8%);
     }
}


/* event */

.event {
     margin: 0 0 30px;
     position: relative;
     overflow: hidden;
     padding-bottom: 30px;
}


.event-figure {
  position: absolute;
  width: 52px;
  height: 100px;
  bottom: -60px;
  right: -100px;
  background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/case-figure3.png) center center no-repeat;
  background-size: contain;
}

.event__fore {
     position: relative;
     padding-bottom: 50px;
}

.event__header {
     display: flex;
     margin-bottom: 70px;
     align-items: flex-end;
}

.event__header-head {
     margin-right: 70px;
}

.event__label {
     font-size: 120px;
     font-weight: 600;
     font-style: italic;
     color: #0f357c;
     line-height: 1.2;
}

.event__heading {
     font-size: 37px;
     font-weight: bold;
}

.event__sub-heading {
     font-weight: bold;
     margin-top: 15px;
}

.event-shelf__heading {
     font-size: 24px;
     font-weight: bold;
     color: #0f357c;
     text-align: center;
     margin-bottom: 36px;
}

.event-shelf__heading::after {
     content: "";
     display: block;
     width: 64px;
     height: 3px;
     background: #0f357c;
     margin: auto;
}

.event-list {
     max-width: 1060px;
     margin: auto;
}

.event-tile {
     position: relative;
     padding: 4px 0;
     margin-top: 100px;
}

.event-tile::before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     border: 4px solid #0F357C;
     transform: skewX(-13deg);
     background: white;
}

.event-tile__inner {
     position: relative;
     display: flex;
     padding: 25px 50px 25px 25px;
}

.event-tile__inner-leading {
     margin-right: 20px;
}

.event-tile__eyecatch {
     margin-top: -93px;
}

.event-tile__title {
     font-size: 18px;
     font-weight: bold;
}

.event-tile__body {
     margin-top: 25px;
}

.event-tile__date {
     margin-top: 15px;
}

.event-shelf__link {
     margin-top: 55px;
}
@media screen and (max-width: 768px) {
     .event {
          margin: 0;
          padding: 0;
     }
}

.contact {
     position: relative;
     margin-top: 100px;
     height: 384px;
     color: white;
}

.contact__back {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
}

.contact__back::before {
     content: "";
     display: block;
     background-color: #4c4c4c;
     transform: skewX(-10.5deg) translateX(-54px);
     width: 100%;
     height: 100%;
     right: calc( (100% - 1366px) / 2);
     position: absolute;
}

.contact__inner {
     position: relative;
     display: flex;
     padding: 0 75px 0 686px;
     height: 100%;
     align-items: center;
}

.contact__eyecatch {
     position: absolute;
     left: 100px;
     width: 501px;
     height: 438px;
     display: block;
}

.contact__eyecatch img {
    position: absolute;
    left: 0;
    top: 0;
}

.contact__heading {
     font-size: 32px;
     line-height: 42px;
     font-weight: bold;
}

.contact__copy {
     margin-top: 20px;
}

.contact__button {
     margin-top: 30px;
     position: relative;
     display: inline-flex;
     font-weight: bold;
     font-size: 18px;
     height: 64px;
     align-items: center;
     padding: 0 64px;
}

.contact__button, .contact__button:visited {
     color: #cc023a;
}

.contact__button::before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     transform: skew(-15deg);
     background: white;
}

.contact__button-content {
     position: relative;
}

.contact__eyecatch img {
    opacity: 0;
}

.contact__eyecatch img:nth-child(2) {
    transform: translateY(-50px);
}

.contact__eyecatch img:nth-child(3) {
    transform: translateY(50px);
}

.contact__heading,
.contact__copy,
.contact__button {
    opacity: 0;
    transform: translateX(-50px);
}

.contact.in-view--enter .contact__eyecatch,
.contact.in-view--enter .contact__eyecatch img,
.contact.in-view--enter .contact__heading,
.contact.in-view--enter .contact__copy,
.contact.in-view--enter .contact__button {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s, transform 0.5s;
}

.contact.in-view--enter .contact__eyecatch img:nth-child(3) {
    transition-delay: 0.25s;
}

.contact.in-view--enter .contact__eyecatch img:nth-child(1) {
    transition-delay: 0.5s;
}

.contact.in-view--enter .contact__heading {
    transition-delay: 0.75s;
}

.contact.in-view--enter .contact__copy {
    transition-delay: 1s;
}

.contact.in-view--enter .contact__button {
    transition-delay: 1.25s;
}

.contact__button .arrow {
     position: absolute;
     top: 0;
     right: 20px;
     bottom: 0;
     margin: auto;
}

.contact__button:hover::before {
     background-color: #cc023a;
}
.contact__button:hover .arrow path {
     fill: #fff;
}


/* news */

.news {
     padding: 74px 0 120px;
}

.news .top_txt {
     font-size: 32px;
     font-weight: bold;
}

.news .news_list {
     width: 100%;
     max-width: 1150px;
     margin: 50px auto 0;
}

.news .news_list>div {
     background-color: #eeeeee;
     padding: 28px 35px;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-align: start;
     -ms-flex-align: start;
     align-items: flex-start;
     -webkit-box-pack: start;
     -ms-flex-pack: start;
     justify-content: flex-start;
     margin-top: 18px;
}

.news .news_list dt {
     width: 145px;
}

.news .news_list dd {
     width: calc(100% - 145px);
}

.news .news_list dd>a {
     text-decoration: underline;
}

.news .news_list dd>a:hover {
     text-decoration: none;
}

.news .news_link {
     margin-top: 70px;
}

.news .banner-tsunaida-sakini-arumonowo{
     width: 500px;
     margin: 65px auto 0;
}


@media screen and (max-width: 768px) {
     .news {
          padding: calc(80 / 750 * 100%) calc(35 / 750 * 100%) calc(140 / 750 * 100%);
     }
     .news .top_txt {
          font-size: 19px;
          font-weight: normal;
     }
     .news .news_list {
          width: 100%;
          max-width: inherit;
          margin: calc(68 / 750 * 100vw) auto 0;
     }
     .news .news_list>div {
          background-color: #eeeeee;
          padding: calc(33/ 750 * 100vw) calc(40 / 750 * 100vw);
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: start;
          -ms-flex-align: start;
          align-items: flex-start;
          -webkit-box-pack: start;
          -ms-flex-pack: start;
          justify-content: flex-start;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          margin-top: calc(30 / 750 * 100%);
     }
     .news .news_list>div:nth-child(1) {
          margin-top: 0;
     }
     .news .news_list dt {
          width: auto !important;
          font-size: 12px;
     }
     .news .news_list dd {
          width: 100%;
          font-size: 12px;
     }
     .news .news_list dd>a {
          text-decoration: underline;
     }
     .news .news_list dd>a:hover {
          text-decoration: none;
     }
     .news .news_link {
          margin-top: calc(83 / 750 * 100vw);
          padding: 0 calc(35 / 750 * 100%);
     }
     .news .news_link .o-btn--b.o-btn--square {
          height: calc(95 / 750 * 100vw);
     }
     .news .banner-tsunaida-sakini-arumonowo{
     width: 100%;
     }


}


.tip-cards {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 -21px;
    position: relative;
    z-index: 2;
}
.tip-card {
    width: 360px;
    margin: 38px 18px 0;
}
.tip-card a img:hover {
     opacity: 1;
     transition: none;
}
.tip-card a :hover img {
     opacity: .8;
}
.tip-card a :hover .card__link {
     text-decoration: none;
}
.tips .card__body {
  padding: 30px 26px;
  background-color: white;
  min-height: 120px;
}
.tips .card__link {
  font-size: 15px;
  text-decoration: underline;
}
.tips .card__date {
  margin-top: 90px;
}
.tips .card__text {
  font-size: 15px;
  color: black;
}

.tip-card .card {
    background-color: #f4f4f6;
}

.tips {
  padding: 80px 0 120px;
  overflow: hidden;
}
.tips__head {
  margin: 0 0 10px;
}
.tips__head-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.tips__heading {
  flex: 1 0 auto;
  font-size: 42px;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  position: relative;
  line-height: 54px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 30px;
}
.tips__heading::before {
    content: "";
    display: block;
    width: 15px;
    height: 2.15em;
    background: #000;
    transform: skewX(-10deg);
    margin-right: 20px;
    margin-top: 3px;
}
.tips__heading-txt {
  color: #000;
  font-weight: bold;
  font-size: 16px;
}
.tips-figure {
  position: absolute;
  z-index: 2;
  width: 107px;
  height: 295px;
  top: 80px;
  right: 0;
}

.trend {
  position: relative;
  margin: 0 0 120px;
}
.trend-figure-1 {
     position: absolute;
     bottom: 267px;
     left: 0;
     transform: translateX(-50%);
}
.trend-figure-2 {
     position: absolute;
     bottom: 0;
     right: 0;
}
.trend-figure-3 {
     position: absolute;
     bottom: 544px;
     right: 0;
     transform: translateX(50%);
}
.trend-figure-3 img {
     display: block;
}
.trend__head {
  position: relative;
  padding: 95px 0 325px;
}
.trend__head-inner {
  position: relative;
  padding: 0 100px;
}
.trend__head-inner::before {
    content: "";
    display: block;
    width: 532px;
    height: 111px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-trend.svg);
    position: absolute;
    right: -10px;
    top: 0;
}
.trend__head::before {
    content: "";
    display: block;
    width: 100%;
    background-color: #eeeeee;
    position: absolute;
    bottom: 0;
    top: 0;
    left: -51.2%;
    transform: skewX(-9.5deg);
}
.trend__heading {
  flex: 1;
  font-size: 36px;
  color: #000;
  display: flex;
  align-items: center;
  position: relative;
  font-weight: bold;
  line-height: 54px;
}
.trend__heading::before {
    content: "";
    display: block;
    width: 15px;
    height: 2.7em;
    background: #000;
    transform: skewX(-10deg);
    margin-right: 0.8em;
}
.trend__head-inner {
  display: flex;
  align-items: flex-end;
}
.trend__heading-txt {
  width: 46%;
  position: relative;
  font-size: 18px;
  font-weight: bold;
  line-height: 1em;
}

.trend__body {
  margin-top: -200px;
  position: relative;
}

.trend-tile {
  position: relative;
  margin: 0 0 80px;
}
.trend-tile:last-child {
     margin: 0;
}
.trend-tile__back {
    position: relative;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.trend-tile__back::before {
    content: "";
    display: block;
    background:  url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/trend-item-bg.png) center left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    left: calc( (100% - 1366px) / 2);
}
.trend-tile--02 .trend-tile__back::before {
    content: "";
    display: block;
    right: calc( (100% - 1366px) / 2);
    background:  url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/trend-item-bg-r.png) center right;
    background-size: 100% 100%;
    left: auto;
}
.trend-tile__inner {
  position: relative;
  padding: 66px 80px 46px 130px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.trend-tile--02 .trend-tile__inner {
  flex-direction: row-reverse;
  padding-right: 200px;
  padding-left: 80px;
  justify-content: flex-start;
}
.trend-tile__body {
  position: relative;
  max-width: 537px;
  width: 100%;
}
.trend-tile__headset {
}
.trend-tile__keyword {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  font-style: italic;
}
.trend-tile__keyword span {
  display: inline-block;
  padding: 10px 22px 16px;
  background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/trend-keyword-bg.svg) center center no-repeat;
  background-size: contain;
  color: #000;
  font-size: 18px;
  font-weight: bold;
  font-style: italic;
  margin-left: 15px;
}
.trend-tile--02 .trend-tile__keyword span {
     background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/trend-keyword-bg-2.svg) center center no-repeat;
}
.trend-tile--03 .trend-tile__keyword span {
     padding: 7px 22px 16px;
     background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/trend-keyword-bg-3.svg) center center no-repeat;
}
.trend-tile__ttl {
  color: white;
  font-size: 30px;
  line-height: 44px;
  margin-bottom: 28px;
  font-weight: bold;

  opacity: 0;
  transform: translate(-20px, 0);
  transition: 0.6s all;
  transition-delay: 0.1s;
}
.trend-tile__ttl::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/trend-dot.svg) center left no-repeat;
  background-size: cover;
  margin-top: 20px;
}
.trend-tile__img {
  max-width: 500px;
  width: 100%;
  margin-left: 45px;
  position: relative;
}
.trend-tile--02 .trend-tile__img {
  margin-left: 0;
  margin-right: 100px;
}
.trend-tile--03 .trend-tile__img {
  margin-left: 80px;
}

.trend-tile__img-inner::before {
  content: "";
  display: block;
  width: 480px;
  height: 360px;
  background: #4c4c4c;
  position: absolute;
  opacity: 0;
  transition: all 0.6s;
  transition-delay: 1s;
}
.in-view--enter .trend-tile__img-inner::before {
  opacity: 1;
}
.trend-tile__img-inner img {
  vertical-align: top;
  height: auto;
  opacity: 0;
  transform: translate(0, 0);
  transition: all 0.6s;
  transition-delay: 0.8s;
}
.in-view--enter .trend-tile__img-inner img {
  transform: translate(-20px, -20px);
  opacity: 1;
}
.trend-tile--02 .trend-tile__img img {
     transform: translate(20px, -20px);
}
.in-view--enter .trend-tile--02 .trend-tile__img-inner img {
  transform: translate(20px, -20px);
  opacity: 1;
}
.trend-tile__cont {
  color: white;
  font-size: 16px;
  line-height: 32px;

  opacity: 0;
  transform: translate(-20px, 0);
  transition: 0.6s all;
  transition-delay: 0.4s;
}

.trend-tile__more {
     color: #fff;
     font-weight: bold;
     height: 37.43px;
     display: inline-block;
     width: 130px;
     margin-top: 30px;
     position: relative;
     font-size: 14px;

  opacity: 0;
  transform: translate(-20px, 0);
  transition: opacity 0.6s 0.6s, transform 0.6s 0.6s;
  transition-delay: 0.6s;
}
.trend-tile__more svg {
  fill: #fff;
}
.trend-tile__link:hover .trend-tile__more,
.trend-tile__more:hover {
  color: #000;
}
.trend-tile__link:hover .trend-tile__more svg,
.trend-tile__more:hover svg {
  fill: #000;
}

.trend-tile__more::before {
     content: "";
     background: #4c4c4c;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     transform: skewX(-12deg);
}
.trend-tile__link:hover .trend-tile__more::before,
.trend-tile__more:hover::before {
  background-color: #fff;
}

.trend-tile__more-inner {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100%;
     padding: 0 20px;
}

.trend-tile__more.sp_only {
     display: none;
}
@media screen and (max-width: 768px) {
     .trend {
          margin-bottom: 60px;
          padding-top: 60px;
          overflow: hidden;
     }
     .trend-figure-1 {
          position: absolute;
          bottom: 682.5px;
          left: 0;
     }
     .trend-figure-2 {
          display: none;
     }
     .trend-figure-3 {
          display: none;
     }
     .trend__head {
          padding: 0;
     }
     .trend__head::before {
          width: 120vw;
          left: -20vw;
          height: 530px;
     }
     .trend__head-inner::before {
          width: 79.3vw;
          height: 16.5vw;
          right: auto;
          left: 12px;
          top: 0;
          transform: translate(0, -100%);
     }
     .trend__head-inner {
          padding: 60px 20px 0;
          flex-direction: column;
          align-items: flex-start;
     }
     .trend__heading {
          font-size: 23px;
          line-height: 34px;
     }
     .trend__heading::before {
          margin-left: 6px;
     }
     .trend__heading-txt {
          width: 100%;
          color: #000;
          font-size: 15px;
          line-height: 30px;
          margin-top: 30px;
     }
     .trend-tile {
          margin-bottom: 30px;
     }
     .trend__body {
          margin: 30px 0 0;
          padding: 0;
     }
     .trend-tile__body {
          margin: 0 0 45px;
     }
     .trend-tile__back::before {
          background-color: #cc023a;
          left: 20px;
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/trend-item-bg_sp.png);
          background-position:  bottom left;
          background-size: contain;
          background-repeat: no-repeat;

     }
     .trend-tile--02 .trend-tile__back::before {
          background-color: #cc023a;
          left: 20px;
          background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/trend-item-bg_sp.png);
          background-position:  bottom left;
          background-size: contain;
          background-repeat: no-repeat;
     }
     .trend-tile__inner {
          padding: 30px 20px 30px 40px;
          margin: 0;
          display: block;
     }
     .trend-tile__keyword span {
          font-size: 16px;
     }
     .trend-tile__ttl {
          font-size: 20px;
          line-height: 36px;
     }
     .trend-tile__img {
          margin-left: 20px;
     }
     .trend-tile__more {
          margin: 25px auto 0;
          display: inherit;
     }
     .trend-tile__img-inner::before {
          width: 100%;
          height: auto;
          padding-top: 75%;
     }


     .trend-tile--02 .trend-tile__inner {
          padding: 30px 20px 30px 40px;
     }
     .trend-tile--02 .trend-tile__img {
          margin: 0 0 0 20px;
     }
     .trend-tile--03 .trend-tile__img {
          margin: 0 0 0 20px;
     }
     .trend-tile__more.sp_only {
          display: block;
     }
}

.in-view--enter .trend-tile__ttl {
  transform: translate(0, 0);
  opacity: 1;
}
.in-view--enter .trend-tile__cont {
  transform: translate(0, 0);
  opacity: 1;
}
.in-view--enter .trend-tile__more {
  transform: translate(0, 0);
  opacity: 1;
}

.innovation {
  position: relative;
  margin: 0 0 120px;
}
.innovation__head {
  position: relative;
  padding: 95px 0;
}
.innovation__head-inner {
  position: relative;
  padding: 0 100px;
}
.innovation__head-inner::before {
    content: "";
    display: block;
    width: 514px;
    height: 111px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/ttl-bg-innovation.svg);
    position: absolute;
    right: -10px;
    top: 0;
}
.innovation__head::before {
    content: "";
    display: block;
    width: 100%;
    background-color: #eeeeee;
    position: absolute;
    bottom: 0;
    top: 0;
    right: calc((93vw - 100%) * -1);
    transform: skewX(-9.5deg);
}
.innovation__heading {
  flex: 1;
  font-size: 42px;
  line-height: 54px;
  color: #000;
  display: flex;
  align-items: center;
  position: relative;
  font-weight: bold;
  width: 575px;
}
.innovation__heading::before {
    content: "";
    display: block;
    width: 15px;
    height: 2.7em;
    background: #000;
    transform: skewX(-10deg);
    margin-right: 0.8em;
}
.innovation__head-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.innovation__heading-txt {
  flex: 1;
  position: relative;
  font-size: 18px;
  color: #000;
  font-weight: bold;
}
.innovation__body {
  margin-top: -30px;
}
.innovation-tile__inner {
  position: relative;
  height: 396px;
  max-width: 1269px;
}
.innovation-tile__more {
  width: 180px;
}
.innovation-tile__headset {
  display: flex;
  align-items: flex-end;
  margin: 0 0 20px;
}
.innovation-tile__case {
  font-size: 17px;
  text-align: center;
  font-weight: bold;
  line-height: 0.8em;
  font-style: italic;
  position: relative;
  margin-right: 20px;
}
.innovation-tile__case::after {
  content: "";
  display: block;
  width: 90%;
  height: 2px;
  background-color: #000000;
  position: absolute;
  bottom: 0;
}

.innovation-tile__case em {
  font-size: 46px;
  display: block;
  line-height: 1em;
  font-weight: 600;
}
.innovation-tile__ttl {
  font-size: 16px;
  font-weight: bold;
}
.innovation-tile__body {
  margin-top: 86px;
  background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/innovation_white.png) center center no-repeat;
  background-size: 100% 100%;
  position: relative;
  height: 326px;
  width: 674px;
  padding: 36px 100px;
  z-index: 2;
}
.innovation-tile--02 .innovation-tile__body {
  margin-left: auto;
  margin-right: 0;
}
.innovation-tile__img {
  position: absolute;
  top: -86px;
  right: 0;
  width: 720px;
  height: 398px;
}
.innovation-tile--02 .innovation-tile__img {
  right: auto;
  left: 0;
}
.innovation-tile__img-inner {
  width: 702px;
  height: 376px;
  background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/innovation-item-bg.png) center center no-repeat;
  background-size: contain;
}
.innovation-tile__img img {
  transform: translate(-20px, -20px);
}
.innovation-tile--02 .innovation-tile__img img {
  transform: translate(20px, -20px);
}
.innovation-tile__txt {
  color: #000;
  font-size: 24px;
  line-height: 36px;
  margin: 0 0 30px;
  font-weight: bold;
}
@media screen and (max-width: 768px) {
     .innovation {
          margin-bottom: 60px;
          overflow: hidden;
     }
     .innovation__head {
          padding: 40px 0 60px;
     }
     .innovation__head-inner {
          padding: 0 20px;
          flex-direction: column;
          align-items: flex-start;
     }
     .innovation__heading {
          font-size: 23px;
          line-height: 34px;
          width: auto;
          margin: 0 0 30px;
     }
     .innovation__head::before {
          width: 110vw;
          left: -10vw;
          right: auto;
     }
     .innovation-tile__inner {
          display: flex;
          flex-direction: column-reverse;
          height: auto;
     }
     .innovation-tile__body {
     }
     .innovation-tile__img {
          position: relative;
          top: 0;
          width: calc(100% + 40px);
          height: auto;
          margin-left: 20px;
     }
     .innovation-tile__img-inner {
          width: auto;
          height: auto;
     }
     .innovation-tile__img-inner img {
          height: auto;
     }
     .innovation-tile__body {
          margin: 25px 0 60px;
          padding: 0;
          width: auto;
          height: auto;
     }
     .innovation-tile__case {
          font-size: 13px;
          margin-right: 15px;
     }
     .innovation-tile__case em {
          font-size: 36px;
     }
     .innovation-tile__ttl {
          font-size: 15px;
     }
     .innovation-tile__txt {
          font-size: 22px;
     }
     .innovation-tile__txt br {
          display: none;
     }
     .innovation-tile__more {
          height: 46px;
          text-align: center;
     }
     .innovation-tile__more .o-btn--b.o-btn--square {
          display: flex;
          align-items: center;
          height: 100%;
     }
     .innovation-tile__more .o-btn--square::before {
          width: 180px;
          height: 46px;
     }
     .innovation-tile__more .o-btn--arrow .o-icon {
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          right: 10px;
          transform: none;
          width: 6px;
     }
     .innovation-tile--02 .innovation-tile__img {
          left: -20px;
     }
     .innovation-tile--02 .innovation-tile__body {
          margin-bottom: 0;
     }
}

.tips {
  position: relative;
}
.tips-inner {
  padding: 80px 0 100px;
  background-color: #eeeeee;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 768px) {

}

.case-study {
  position: relative;
  padding: 120px 0 120px;
  overflow: hidden;
}
.case-study-figure {
     position: absolute;
     width: 100px;
     height: 176px;
     top: 60px;
     left: -60px;
     background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/case-figure4.png) center center no-repeat;
     background-size: contain;
}
.case-study-figure2 {
  position: absolute;
  width: 126px;
  height: 212px;
  bottom: 0;
  left: 50%;
  transform: translate(-800px, 0);
  background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/case-figure2.png) center center no-repeat;
  background-size: contain;
}
.case-study::before {
     content: "";
     display: block;
     width: 100%;
     height: 584px;
     background-color: #eaedf2;
     position: absolute;
     bottom: 0;
     left: 40%;
     transform: skewX(-9.5deg);
}
.case-study__heading {
  display: flex;
  position: relative;
  height: 170px;
  align-items: flex-end;
  margin: 0 0 67px;
}
.case-study__heading-sub {
  position: absolute;
  color: #eeeeee;
  font-size: 120px;
  left: -30px;
  top: 0;
  line-height: 1em;
  font-style: italic;
}
.case-study__heading-main {
  font-size: 37px;
  line-height: 48px;
  position: relative;
  width: 536px;
  font-weight: bold;
}
.case-study__copy {
  position: relative;
  font-weight: bold;
}

.case-study__body {
    padding-top: 180px;
    padding-bottom: 120px;
    position: relative;
    overflow: hidden;
}

.case-study__body::before {
    content: "";
    display: block;
    width: 100%;
    background-color: #eaedf2;
    position: absolute;
    top: 328px;
    bottom: 460px;
    left: -56%;
    transform: skewX(-9.5deg);
}

.case-study__body-fore {
    position: relative;
}

.case-study__sprite {
    position: absolute;
}

.case-study__sprite:nth-child(1) {
    right: -10px;
    top: 260px;
}

.case-study__sprite:nth-child(2) {
    right: 20px;
    top: 620px;
}

.case-study__sprite:nth-child(3) {
    left: 40px;
    bottom: 50px;
}

.case-study__sprite:nth-child(4) {
    left: 80px;
    bottom: 0;
}

.case-study__case-copy {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 45px;
    text-align: center;
}
.case-tile__title {
  align-items: flex-end;
}
.case-tile__label {
  font-size: 17px;
  font-style: italic;
  font-weight: 600;
}
.case-tile__no {
  font-size: 46px;
  font-style: italic;
  font-weight: 600;
}
.case-tile__more-inner {
  font-size: 14px;
}

@media screen and (max-width: 768px) {
     .case-study-figure {
          display: none;
     }
     .case-study {
          padding-top: 0;
          padding-bottom: 30px;
     }
     .case-study .container {
          padding: 0;
     }
     .case-study .container .container {
          padding: 0 20px;
     }
     .case-study__heading-sub {
          text-indent: -9999px;
          width: 98.8vw;
          height: 39.2vw;
          background: url(/content/dam/nttcom/hq/jp/about-us/we-are-innovative/worklife/img/case-study-sp.svg) left center no-repeat;
          background-size: contain;
          left: 0;
     }
     .case-study__heading {
          flex-direction: column;
          align-items: flex-start;
          padding: 50px 20px 0;
          margin-bottom: 30px;
          font-weight: bold;
          height: auto;
     }
     .case-study__heading-main {
          font-size: 23px;
          line-height: 34px;
     }
     .case-study__copy {
          margin-top: 30px;
     }
     .case-list .case-tile:nth-child(odd) {
          margin: 0;
     }
     .case-tile::before {
          display: none;
     }
     .case-tile {
          background: #cc023a;
          padding: 30px 20px;
     }
     .case-list .case-tile:nth-child(odd) .case-tile__inner {
          margin: 0;
          padding: 0;
          flex-direction: column;
     }
     .case-list .case-tile:nth-child(odd) .case-tile__leading {
          margin: 0;
     }
     .case-list .case-tile:nth-child(even) {
          margin: 0;
     }
     .case-list .case-tile:nth-child(even) .case-tile__inner {
          padding: 0;
          flex-direction: column;
     }
     .case-list .case-tile:nth-child(even) .case-tile__leading {
          margin: 0;
     }
     .case-tile {
          margin: 0 0 30px !important;
     }
     .case-tile__body {
          display: block;
          text-align: center;
          margin-top: 20px;
     }
     .case-tile__body-trailing {
          position: absolute;
          right: 0;
          top: 120px;
     }
     .case-tile__copy {
          text-align: left;
     }
     .case-tile__label {
          font-size: 13px;
     }
     .case-tile__no {
          font-size: 36px;
     }
     .case-tile__title-body {
          font-size: 15px;
          line-height: 28px;
     }
     .case-list__column {
          margin-top: 0;
     }

    .tip-cards {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin: auto;
      position: relative;
      z-index: 2;
    }

    .tip-card {
      width: calc(100% / 2 - (15 / 750 * 100%));
      margin: 15px 0 0;
    }
    
    .tip-card:nth-child(-n+3) {
      margin: 0 auto;
      margin-top: 15px;
    }
    
    .tip-card:nth-child(2n+1) {
      margin-top: 15px;
      margin-right: calc(30 / 750 * 100%);
    }
    
    .tip-card .card {
      background-color: #f4f4f6;
    }
    
    .tip-card .card__body {
      padding: calc(30 / 750 * 100vw);
    }

    .tip-card .card__date {
      margin-top: calc(35 / 750 * 100vw);
    }
    
    .tip-card .card__text {
      margin-top: 0;
    }

    .tips {
         padding: 0;
         margin-bottom: 60px;
    }
    .tips-inner {
         padding: 40px 0 33px;
    }
    .tips__heading {
         font-size: 23px;
         line-height: 34px;
         margin: 0;
    }
    .tips__heading-txt {
         margin-top: 30px;
    }
    .tips__head {
         margin-bottom: 15px;
    }

    .tips-figure {
         display: none;
    }

    .contact {
         display: none;
    }

    .service .o-top_txt--has-bg>span {
         font-size: 19px;
         line-height: 24px;
    }
}