@charset "utf-8";
.b_text{
background-color:#024AD8;
color:#ffffff;
padding:0.25em;
  word-break: auto-phrase;
}

.button{ word-break: auto-phrase;}

.check-list {
margin:0 20px;
  list-style: none; 
  padding:20px;
  border:3px solid #000000; 
  border-radius:0 30px 0 0;
}

.check-list li {
  position: relative;
  padding-left: 50px;
  padding-top:5px;
  margin-bottom: 10px;
  font-size:24px;
  word-break: auto-phrase;
}

.check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border:1px solid #518CFF;
  color: #518CFF;
  border-radius: 50%; 
  text-align: center;
  line-height: 44px; 
  font-size: 32px;
}

.two_block {display:flex;align-items:center;width:100%;;}
.two_block .text_area{width:55%;}
.two_block .img_area{text-align:center; width:45%;}

@media screen and (max-width: 1024px) {
.two_block {display:block;}
.two_block .text_area,
 .two_block .img_area{width:100%;padding:20px 0;}
}


.num_title {margin:70px 20px 0 20px;display:flex;align-items:center;}
.num_title .num {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 35px;
    color: white;
    background-color:#024AD8;
    margin-bottom: 0;
}

.num_title .title_area{font-size:22px;line-height:30px;text-align:left;color:#024AD8;margin:0 90px 0 20px;word-break: auto-phrase;}

.navipato {position:absolute;right:0;}
.navipato img {width:100%;}
.n01{top:-120px;width:80px;}
.n02{top:-100px;width:88px;}
.n03{top:-120px;width:80px;}
.n04{top:-112px;width:80px;}


@media screen and (max-width: 1024px) {
.num_title {display:block;}
.num_title .title_area{padding:10px 110px 10px 0;width:100%;}
}

.detail_img {margin:0 20px 30px 20px; border:1px solid #024AD8;text-align:center;padding:0 20px 30px 20px;position:relative;}
.detail_img > img{width:90%;}

.gray_box {
    background-color: #f7f7f7;
    padding: 20px;
    margin-top: 2em;
}


.login_img {
     width:100%;
    min-height:600px;
    background-image: url(/content/dam/jp-ext-hp-com/jp/ja/partner/common/images/navi/login.png);
    background-repeat: no-repeat;
    background-size: 200px;
    background-position: bottom 16px right 30px;
    position:relative;
}

.Bubble_left,.Bubble_left2{
  position: relative;
  display: inline-block;
  margin: 0 50px 0 20px;
  padding: 16px;
  border: 2px solid #000000;
  border-radius: 8px;
  background-color: #f2f2f2;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  word-break: auto-phrase;
}

.Bubble_left::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 10px 0 10px 50px;
  border-color: transparent transparent transparent #000000;
  translate: 100% -50%;
  transform: skew(0, 34deg);
  transform-origin: left;
}

.Bubble_left::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 8px 0 8px 39.8px;
  border-color: transparent transparent transparent #f2f2f2;
  translate: 100% -50%;
  transform: skew(0, 34deg);
  transform-origin: left;
}


.Bubble_left2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 0 0 20px 50px;
  border-color: transparent transparent transparent #000000;
  translate: 100% -50%;
  transform: skew(0, -22deg);
  transform-origin: left;
}

.Bubble_left2::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  border-style: solid;
  border-width: 0 0 15.8px 39.6px;
  border-color: transparent transparent transparent #f2f2f2;
  translate: 100% calc(-50% - 0.1px);
  transform: skew(0, -22deg);
  transform-origin: left;
}

ol.num_circle  {
  position: relative;
  margin: 0;
  padding: 0
}
ol.num_circle li  {
  list-style: none;
  list-style-position: outside;
  margin: 0;
  padding-left: 1.25em
}
ol.num_circle li span {
  position: absolute;
  left: 0;
  margin: 0
}
@media screen and (max-width: 767px) {
.button_center{text-align:center!important;} 
.Bubble_left::before,.Bubble_left::after,
.Bubble_left2::before,.Bubble_left2::after{display:none;}

}

.blue_Bubble {
  position: relative;
  display: inline-block;
  margin-left: 35px;
  padding: 20px;
  border-radius: 12px;
  background-color: #c9e0fc;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
}

.blue_Bubble::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 0;
  border-style: solid;
  border-width: 0 35px 20px 0;
  border-color: transparent #c9e0fc transparent transparent;
  translate: -100% calc(-50% - 0.2px);
  transform: skew(0, -10deg);
  transform-origin: right;
}

@media screen and (min-width: 1025px) {
.pc {display: inherit!important;}
.sp {display: none!important;}
}

@media screen and (max-width: 1024px) {
.sp{display: inherit!important;}
.pc {display: none!important;}
}

.arrow01{position:absolute;top:5%;right:230px;font-size:1.0em;}
.arrow02{position:absolute;top:32%;right:230px;font-size:1.0em;}
.arrow03{position:absolute;bottom:28%;right:230px;font-size:1.0em;}

@media screen and (max-width: 1024px) {
.arrow01{position:absolute;top:-2%;}
.arrow02{position:absolute;top:38%;}
.arrow03{position:absolute;bottom:27%;}
}

@media screen and (max-width: 768px) {
.arrow01{position:absolute;top:0;font-size:0.75em;}
.arrow02{position:absolute;top:38%;font-size:0.75em;}
.arrow03{position:absolute;bottom:27%;font-size:0.75em;}
}

@media screen and (max-width: 480px) {
.login_img{ background-position: bottom 10px right 0;}
.Bubble_left,.Bubble_left2{padding:5px 8px;}
.arrow01{position:absolute;top:-3%;right:160px;font-size:0.5em;}
.arrow02{position:absolute;top:32%;right:160px;font-size:0.5em;}
.arrow03{position:absolute;bottom:22%;right:160px;font-size:0.5em;}
}