@charset "UTF-8";

body{
    overflow-x: hidden;
    background-color:#fff;
}
img{
    width: 100%;
}
a:focus{
    outline:none;
}

#pagechenge {
  width: 100%;
  height: 100vh;
  background-image: url(/content/dam/nttcom/hq/jp/business/lp/smb/img/situation/page_cover.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  right: 0;
  z-index:1000;
}
#pagechenge_logo {
  position: absolute;
  z-index: 1001;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  opacity: 0;
}
#pagechenge_logo.slidein{
  animation: slidein .4s ease .2s;
  animation-fill-mode:forwards;
}
@keyframes slidein{
  0% {
    transform: translateX(120%) translateY(-50%);
  }
  100% {
    transform: translateX(-50%) translateY(-50%);
    opacity: 1;
  }
}
#pagechenge.slideout{
  animation: slideout .8s ;
  animation-fill-mode:forwards;
}
@keyframes slideout{
  0% {
  }
  90%{
    transform: translateX(-120%);
    opacity: 0;
  }
  100% {
    transform: translateX(-120%);
    display: none;
}
}

#main{
  opacity: 0;/*はじめは透過0に*/
}

#main.show{
  animation-name:PageAnimeAppear;
  animation-duration:1s;
  animation-delay: 0.4s;
  animation-fill-mode:forwards;
  opacity: 0;
  margin-top:25px;
}

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


/* グロナビpc */
.glonav_pc{
  position: fixed;
  z-index: 15;
  right: 0;
  top: 70px;
}
.nav_item{
  width: 7.937vw;
  margin-bottom: 8px;
}
@media screen and (min-width:1260px) {
  .nav_item{
      width: 120px;
  }
}
.background{
  padding-bottom: 50px;
  position: relative;
  width: 100vw;
}
.background::after{
  content: "";
  position: absolute;
  width: 100vw;
  height: 27.778vw;
  z-index: -1;
  background-color: #88D08E;
  bottom: 0;
  left: 0;
}
.background::before{
  content: "";
  position: absolute;
  z-index: -1;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 0 0 100vw ;
  border-color: transparent transparent transparent #88D08E;
  bottom: 27.778vw;
  left: 0;
}
.sol_top{
  font-size: 30px;
  margin:0 auto 36px;
  color: #1F1F1F;
  max-width: 800px;
  font-weight: 700;
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
}
.sol_top img{
  width: 490px;
  vertical-align: bottom;
  color: #1F1F1F;
}
.solgood_wrapper{
  width: 95.238vw;
  margin: 0 auto;
}
.sol_feature{
  position: relative;
  background-image: url(/content/dam/nttcom/hq/jp/business/lp/smb/img/situation/sol_feature_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 65.079vw;
  height: 14.286vw;
  margin: 0 auto 30px;
}
.sol_feature_txt{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-60%);
  color: #1F1F1F;
  font-size: 2.54vw;
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-family: 'Noto Sans JP', sans-serif;
}
.sol_feature_ai{
  position: absolute;
  width: 11.905vw;
  bottom: -4.762vw;
  right: -8vw;
  z-index: 1;
}
.sol_main{
  max-width: 79.365vw;
  background-color: #fff;
  border-radius: 1.984vw;
  padding: 2.381vw 2.381vw 3.175vw;
  position: relative;
  margin: 0 auto 30px;
}
.sol_main_inner{
  display: flex;
  margin-bottom: 2.8vw;
}
.sol_main_logo{
  margin-right: 20px;
}
.sol_main_logo img{
  width: 200px;
  border: solid 1px #707070;
}
.point_img{
  display: block;
  width: 100px;
}
.sol_main_point{
  color: #2EC33A;
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
  font-family: 'Noto Sans JP', sans-serif;
}
.sol_main_txt{
  font-family: Hiragino Kaku Gothic ProN;
  color: #1F1F1F;
  font-size: 18px;
  margin-bottom: 24px;
}
.sol_main .sol_ddl_link{
  display: block;
  width: 450px;
  line-height: 50px;
  border-radius: 37px;
  background-color: #E64141;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  margin: 0 auto;
  font-family: 'Noto Sans JP', sans-serif;
}
.sol_main_ai{
  width: 11.905vw;
  position: absolute;
  bottom: -6.746vw;
  left: -7.937vw;
}
.sol_btnarea{
  display: flex;
  width: 400px;
  margin: 0 auto;
  justify-content: space-between;
}
.sol_btnarea .sol_btn{
  display: block;
  width: 190px;
  line-height: 40px;
  font-size: 20px;
  color: #fff;
  text-align: center;
  font-weight: 700;
  background-color: #487609;
  border-radius: 37px;
  font-family: 'Noto Sans JP', sans-serif;

}
.sol_other{
  background-color: #88D08E;
  padding-bottom: 80px;
}
.sol_other_inner{
  max-width: 79.365vw;
  margin: 0 auto;
}
.sol_other_tlt{
  position: relative;
  width: 330px;
  margin-bottom: 24px;
}
.sol_other_tlt img{
  width: 300px;
}
.sol_other_tlt::after{
  content: "";
  position: absolute;
  width: 20px;
  height: 26px;
  background-image: url(/content/dam/nttcom/hq/jp/business/lp/smb/img/situation/btn_arrow.png);
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(90deg);
  right: 0;
  top: 9px;
}
.sol_other_sum{
  display: flex;
}
.sol_other_item{
  width: fit-content;
}
.sol_other_sum .sol_other_item{
  margin-right: 2.302vw;
}
.sol_other_sum .sol_other_item:last-child{
  margin-right: 0;
}
.sol_other_itemimg{
  width: 24.921vw;
  height: 14.127vw;
  object-fit: cover;
box-shadow: 0px 3px 6px #00000029;
}

@media screen and (min-width:1260px){
  .wrapper{
    width: 1200px;
  }
  .sol_feature{
    max-width: 820px;
    height: 180px;
  }
  .sol_feature_txt{
    font-size: 30px;
  }
  .sol_feature_ai{
    width: 150px;
    bottom: -60px;
    right: -80px;
  }
  .sol_main{
    max-width: 1000px;
    border-radius: 25px;
    margin-bottom: 30px;
    padding: 30px 30px 40px;
  }
  .sol_main_inner{
    margin-bottom: 30px;
  }
  .sol_main_logo{
    margin-right: 25px;
  }
  .sol_main_logo img{
    width: 230px;
  }
  .point_img{
    width: 130px;
  }
  .sol_main_point{
    font-size: 24px;
  }
  .sol_main_txt{
    font-size: 20px;
  }
  .sol_main .sol_ddl_link{
    width: 640px;
    line-height: 60px;
    font-size: 26px;
    font-weight: 700;
  }
  .sol_main_ai{
    width: 150px;
    bottom: -85px;
    left: -100px;
  }
  .sol_btnarea{
    width: 520px;
  }
  .sol_btnarea .sol_btn{
    width: 250px;
    line-height: 50px;
    font-size: 23px;
  }
  .sol_other{
    background-color: #88D08E;
    padding-bottom: 80px;
  }
  .sol_other_inner{
    max-width: 1000px;
    margin: 0 auto;
  }
  .sol_other_inner .sol_other_item{
    margin-right: 29px;
  }
  .sol_other_inner .sol_other_item:last-child{
    margin-right: 0;
  }
  .sol_other_itemimg{
    width: 314px;
    height: 178px;
  }
}
@media screen and (max-width:767px){
  .background{
    padding-bottom: 16vw;
  }
  .background::after{
    height: 200vw;
  }
  .background::before{
    border-width: 100px 0 0 100vw ;
    bottom: 200vw;
  }
  .sol_top{
    font-size: 5.333vw;
    margin-bottom:2.667vw;
    max-width: 73.333vw;
  }
  .sol_top img{
    width: 100%;
  }
  .sol_feature{
    background-image: url(/content/dam/nttcom/hq/jp/business/lp/smb/img/situation/sol_feature_bgsp.png);
    max-width: 93.333vw;
    height: 66.667vw;
    margin-bottom:0;
  }
  .sol_feature_txt{
    width: 90vw;
    font-size: 5.6vw;
    line-height: 1.4;
  }
  .sol_feature_ai{
    width: 19.5vw;
    top: -9.333vw;
    right: -2.667vw;
  }
  .sol_main{
    max-width: 93.333vw;
    border-radius: 3.333vw;
    padding:18.667vw 4.667vw 8.667vw;
    margin-bottom:10.667vw;
  }
  .sol_main_inner{
    display: block;
    margin-bottom: 8.667vw;
  }
  .sol_main_logo{
    width: 66.667vw;
    margin: 0 auto 6.667vw;
  }
  .sol_main_logo img{
    width: 100%;
  }
  .point_img{
    width: 29.333vw;
  }
  .sol_main_point{
    font-size: 4.8vw;
    margin-bottom: 12px;
  }
  .sol_main_txt{
    font-size: 4vw;
    margin-bottom: 0;
  }
  .sol_main_txt:first-of-type{
    margin-bottom: 5.333vw;
  }
  .sol_main .sol_ddl_link{
    width: 100%;
    line-height: 17.333vw;
    border-radius: 8.667vw;
    font-size: 4.4vw;
  }
  .sol_main_ai{
    width: 24.667vw;
    top:-18vw;
    left: -8.667vw;
  }  
  .sol_btnarea{
    display: block;
    width: auto;
  }
  .sol_btnarea .sol_btn{
    width: 86.667vw;
    line-height: 17.333vw;
    font-size: 4.4vw;
    border-radius: 8.667vw;
    margin: 0 auto;
  }
  .sol_btn:first-of-type{
    margin-bottom: 4vw;
  }
  .sol_other{
    padding-bottom: 16vw;
  }
  .sol_other_inner{
    max-width: 73.333vw;
  }
  .sol_other_tlt{
    width: 62.667vw;
    margin: 0 auto 6.667vw;
  }
  .sol_other_tlt img{
    width: 54.667vw;
  }
  .sol_other_tlt::after{
    width: 4.8vw;
    height: 6.133vw;
    right: 0;
    top: 0.267vw;
  }
  .sol_other_sum{
    display: block;
  }
  .sol_other_sum .sol_other_item{
    margin-right: 0;
    margin-bottom: 6.667vw;
  }
  .sol_other_sum .sol_other_item:last-of-type{
    margin-bottom: 0;
  }
  .sol_other_itemimg{
    width: 73.333vw;
    height: 42.667vw;
  }  
}

/* good */
.good_base{
  position: relative;
  width: 100vw;
  height: 22.222vw;
}
.good{
  width: 23.81vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.goodfuwafuwa {
  animation: goodfuwafuwa 5s infinite ease-in-out;
  display: inline-block;
}
@keyframes goodfuwafuwa {
  0% {
    transform:translate(0, 0) rotate(0deg);
  }
  25% {
    transform:translate(-5px, -5px) rotate(-2deg);
  }
  50% {
    transform:translate(0, 0) rotate(0deg);
  }
  75% {
    transform:translate(5px,-5px) rotate(2deg);
  }
  100% {
    transform:translate(0, 0) rotate(0deg);
  }
}
.good_lead{
  position: absolute;
  left: 50%;
  bottom: 4.762vw;
  transform: translateX(-50%);
  font-size: 1.905vw;
  color: #20B405;
  text-align: center;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
}
.JumpText{
  display: inline-block;
  animation: jumpAnimation 0.4s ease-in;
}
@keyframes jumpAnimation {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}
.crack{
  width: 7.937vw;
  position: absolute;
  bottom: 2.381vw;
  left: 20.635vw;
}
.gladhum{
  width: 7.937vw;
  position: absolute;
  bottom: 0.794vw;
  right: 21.429vw;
}
.fuwafuwa{
  animation: fuwafuwa 3s infinite ease-in-out;
}
@keyframes fuwafuwa {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(0, -15px) rotate(-5deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
.yurayura{
  animation: yurayura 3s infinite ease-in-out;
}
@keyframes yurayura {
  0% , 100%{
    transform: rotate(7deg);
  }
50%{
    transform: rotate(-7deg);
  }
}
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
.blink {
	animation: blinking 1.5s ease-in-out infinite alternate;
}
.good_confetti_l{
  position: absolute;
  z-index: -1;
  width: 15.873vw;
  top: 2vw;
  left: 25%;
}
.good_confetti_r{
  position: absolute;
  z-index: -1;
  width: 15.873vw;
  top: 2vw;
  right: 25%;
}
.hanntenn{
  opacity: 0;
  transform: scaleX(-1);
}
.good_head{
  max-width: 79.365vw;
  margin: 0 auto 8px;
}
.good_head_inner{
  position: relative;
  background-image: url(/content/dam/nttcom/hq/jp/business/lp/smb/img/situation/good_head_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 69.048vw;
  height: 9.127vw;
  margin-left: auto;
}
.good_head_txt{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-60%)translateX(-50%);
  width: 55.556vw;
  color: #1F1F1F;
  font-size: 1.6vw;
  font-weight: 500;
  line-height: 1.3;
  font-family: 'Noto Sans JP', sans-serif;
}
.good_head_ai{
  position: absolute;
  width: 19.444vw;
  top: 0;
  left: -15.873vw;
}
@media screen and (min-width:1260px){
  .good_base{
    height: 280px;
  }  
  .good{
    width: 300px;
  }
  .good_lead{
    bottom: 60px;
    font-size: 24px;
  }
  .crack{
    width: 100px;
    bottom: 30px;
    left: 260px;
  }
  .gladhum{
    width: 100px;
    bottom: 10px;
    right: 270px;
  }
  .good_confetti_l{
    width: 200px;
    top: 50px;
  }
  .good_confetti_r{
    width: 200px;
    top: 50px;
  }
  .good_head{
    max-width: 1000px;
    margin: 0 auto 8px;
  }
  .good_head_inner{
    max-width: 870px;
    height: 115px;
  }
  .good_head_txt{
    width: 700px;
    font-size: 20px;
  }
  .good_head_ai{
    width: 245px;
    left: -200px;
  }
}
@media screen and (max-width:767px){
  .good_base{
    height: 80vw;
  }  
  .good{
    width: 60vw;
    top: 10%;
  }
  .good_lead{
    bottom: 49.333vw;
    font-size: 5.333vw;
  }
  .crack{
    width: 20vw;
    bottom: 12vw;
    left: 21.333vw;
  }
  .gladhum{
    width: 22.667vw;
    bottom: 8vw;
    right: 21.333vw;
  }
  .good_confetti_l{
    width: 40vw;
    top: 13.333vw;
    left: -4vw;
    transform: rotate(-90deg);
  }
  .good_confetti_r{
    width: 40vw;
    top: 13.333vw;
    right: -4vw;
    transform: rotate(90deg);
  }
  .good_head{
    max-width: 92vw;
    margin: 0 auto 8px;
  }
  .good_head_inner{
    background-image: url(/content/dam/nttcom/hq/jp/business/lp/smb/img/situation/good_head_bgsp.png);
    max-width: 100%;
    height: 50.667vw;
    margin: 0;
  }  
  .good_head_txt{
    width: 90%;
    font-size: 4.533vw;
    text-align: center;
  }
  .good_head_ai{
    width: 48vw;
    left: 0;
    top: -13.333vw;
  }
}

/* フローティング */
.more_fl_base{
  position: relative;
  width: 100%;
}
.more_fl{
  position: fixed;
  z-index: 100;
  width: 10vw;
  bottom: 2vw;
  right: 0.5vw;
}
.more_fl.bottom_zero{
  bottom: 0;
}
@media screen and (min-width:1260px){
  .more_fl{
    width: 140px;
    bottom: 20px;
    right: 20px;
  }  
}
@media screen and (max-width:767px){
  .more_fl_base{
    height: 30px;
  }  
  .more_fl{
    width: 20vw;
    bottom: 5vw;
    right: 0.5vw;
  }  
}

/*hover*/
.logo_link.logo_link_hover{
    opacity:0.7;
}
.logo_link.logo_link_hover img{
    box-shadow:1px 3px 5px 0px #00000029;
    transform:translateY(-2px);
}


/*sp*/
/*767px以下のみ*/
@media screen and (max-width:767px){
  .only-pc{
      display: none;
  }
}
/*pc*/
/*768px以上のみ*/
@media screen and (min-width:768px){
  .only-sp{
      display: none;
  }
}
/*1260px以上のみ*/
@media screen and (max-width:1259px){
  .only-1260{
      display: none;
  }
}