@charset "utf-8";

/*
main {
  padding-top: 0 !important;
}
*/

h1 {font-size:1em; line-height: 1;}
.catch_wrap {
  /* margin-top: 15px; */
  margin-top: 0;
}
.br-768 {display: none;}
@media screen and (max-width: 767px) {
  #catch_wrap {
    /* margin-top: 120px !important; */
    padding: 0;
  }
  .catch_wrap .cell_wrap.left_cell {padding-right: 0;}
  .br-768 {display: block;}
}
.maintenance {width: 100%; max-width: 1260px; padding: 0 10px;}
.maintenance div {width: 100%; margin: 20px auto; border: 1px solid #fffe2b; padding: 10px; background: #ffffdd;}
.maintenance dl {margin-bottom: 0;}
.maintenance dl dt {font-weight: normal; display: inline-block;}
.maintenance dl dt:before {
  content: url(/content/dam/nttcom/hq/jp/personal/services/mobile/one/201707_top/201707_maintenance.jpg);
  display: inline-block;
  margin-right: 5px;
  position: relative;
  bottom: -3px;
}
.maintenance dl dd {display: inline-block; margin-left: 20px;}
@media screen and (max-width: 480px) {
  .maintenance {padding: 0 3.1%;}
}

/* リンク */
#start .content_link a,
#cpBox .content_link a {
  padding: 5px 20px;
  background: #106CA5;
  color: #fff;
  display: inline-block;
  width: 100%;
  max-width: 320px;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
}
.content_link a:hover {opacity: .7;}
#start .content_link a span:before,
#cpBox .content_link a span:before {
  content: url(/content/dam/nttcom/hq/jp/personal/services/mobile/one/img/201707_arrow_w_small.png);
  display: inline-block;
  margin-right: 5px;
  position: relative;
  bottom: -2px;
}


/* news&campaign */
.news_menu {
  -js-display: flex;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 10px;
}
.news_menu li {flex: 1;}
.news_menu li:first-child {margin-right: 5px;}
.news_menu li:last-child {margin-left: 5px;}
.news_menu li a {
  background: #106CA5;
  display: block;
  width: 100%;
  padding: 2% 0;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
.news_menu li a:hover {opacity: .7;}
.news_menu li a span:before {
  content: url(/content/dam/nttcom/hq/jp/personal/services/mobile/one/img/201707_arrow_w_small.png);
  display: inline-block;
  margin-right: 5px;
  position: relative;
}
@media screen and (max-width: 468px) {
  .news_menu {display: block;}
  .news_menu li {margin: 0 0 10px !important;}
}
/* news&campaign end */

/* page_nav_area */
.mom_top .page_nav_wrap {
    width: 100%;
    max-width: 1280px;
    margin: 10px auto 0;
    padding: 0 10px;
}
.fixed ul {
  margin: 0 auto !important;
}
@media screen and (max-width: 480px) {
  .mom_top .page_nav_wrap {
    padding: 0 3.1%;
  }
}
/* page_nav_area end */

#start .sectionInner {width: 100%; max-width: 1240px;}

/* =======================選べる2つのはじめ方================================*/

.startBox {
  border-bottom: inherit;
}
.startBox img {
  width: auto;
  max-width: 100%;
}

.startBox .ttl {padding: 10px 10px; border-bottom: transparent; margin-top: 20px; margin-bottom: 20px; position: relative;}
.startBox.smartphone .ttl {background: #e9f0f8; color: #014c9a}
.startBox.smartphone .ttl:after {content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 20px 30px 0 30px; border-color: #e9f0f8 transparent transparent transparent; position: absolute; bottom: -20px; right: 0; left: 0; margin: auto;}
.startBox.simonly .ttl {background: #f1f1f1;}
.startBox.simonly .ttl:after {content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 20px 30px 0 30px; border-color:#f1f1f1 transparent transparent transparent; position: absolute; bottom: -20px; right: 0; left: 0; margin: auto;}

.startBox .txt {text-align: center;}
.startBox .txt ul {display: inline-block; margin-top: 20px;}
.startBox .txt ul li {text-align: left; font-weight: normal; line-height: 1.8em; display: inline-block;}
.startBox.smartphone .txt ul li:first-child {margin-right: 10px;}

.startBox .txt ul li span:before {
  content: url(/content/dam/nttcom/hq/jp/personal/services/mobile/one/201707_top/201707_img_check_small.png);
  display: inline-block;
  margin-right: 5px;
}

@media screen and (min-width: 769px) {
  .startBox.smartphone {
    width: 60%;
    padding-top: 0;
  }
  .startBox.simonly {
    width: 40%;
    padding-top: 0;
  }
  .startBox.smartphone, .startBox.simonly {
    position: relative;
  }
}

@media screen and (max-width: 768px) {
  #start .bt1 img, #start img, #start .startBox.simonly .bt2 img {
    width: auto;
    max-width: 100%;
  }
  .startBox .ttl, .startBox .txt p, .section h2.blueBg {
    font-size: 130%;
  }
}
@media screen and (max-width: 479px) {
  .startBox.simonly a {
    display: block;
  }
  .startBox.simonly a img.mgr10 {
    margin-right: 0 !important;
    margin-bottom: 10px;
  }
  .startBox .ttl, .startBox .txt p, .section h2.blueBg {
    /* font-size: 110%; */
  }
  a.button.w350 {width: 100% !important;}
}
#start .startBox.smartphone .ttl {position: relative;}
#start .startBox.smartphone .ttl:before {
  position: absolute;
  left: -20px;
  top: -30px;
  content: " ";
  display: inline-block;
  width: 120px;
  height: 128px;
  background: url(/content/dam/nttcom/hq/jp/personal/services/mobile/one/201707_top/201707_img_recommend_s.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}
#start .startBox.smartphone .ttl.sale {position: relative;}
#start .startBox.smartphone .ttl.sale:before {
  position: absolute;
  left: -20px;
  top: -30px;
  content: " ";
  display: inline-block;
  width: 120px;
  height: 128px;
  background: url(/content/dam/nttcom/hq/jp/personal/services/mobile/one/201707_top/sale_img_recommend_s.png);
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

#start .sectionInner .startWrap .startBox .txt > div:nth-of-type(1) img {height: 15em; width: auto;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) {background: #e9f0f8; padding: 20px; position: relative;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) {background: #f1f1f1; padding: 20px; position: relative;}

#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(1) {font-weight: normal;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) {margin-bottom: 20px;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) span {font-size: 28px;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) span:first-child {color: #f02600;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) span:last-child {color: #006bbc;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div {color: #cc0000; margin-bottom: 60px;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div > p {font-size: 30px; line-height: .9em;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div > div > p:first-of-type {font-size: 72px;line-height: .8em;vertical-align: bottom;margin: 0 0 0;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div > div > p:first-of-type span {font-size: 40px;}
#start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div > div > p:last-of-type {margin-right: 34px;font-weight: normal;font-size: 11px;line-height: .6em;text-align: right;}

#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) p:first-of-type {font-weight: normal; font-size: 12px;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div {margin-bottom: 60px;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div:first-of-type {margin-bottom: 30px;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > p {text-align: left;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > p span {font-size: 22px;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div:first-of-type > p span {font-weight: bold; color: #f02600;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div:last-of-type > p span {font-weight: bold; color: #006bbc;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div {/*margin: 0 0 0 auto;*/}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > p  {font-weight: bold !important; font-size: 20px !important; line-height: 1em; margin-left: 20px;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > div > p:first-of-type {text-align: left;font-size: 40px;font-weight: bold;line-height: 1em;vertical-align: bottom;margin: 0 0 0;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > div > p:first-of-type span {font-size: 28px;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > div > p:last-of-type {font-weight: normal; font-size: 11px; line-height: 1em; text-align: right; margin-right: 22px;}
#start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div p {color: #cc0000;}

#start .sectionInner .startWrap .startBox .txt > div:nth-of-type(2) > .content_link {position: absolute; bottom: 20px; right: 0; left: 0; margin: auto; text-align: center;}
#start .sectionInner .startWrap .startBox .txt > div:nth-of-type(2) > .content_link a {margin: 0 auto;}

@media screen and (max-width: 1024px) and (min-width: 991px) {

  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > p:first-of-type {font-size: 12px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > p span {font-size: 16px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > p {font-size: 14px !important; margin-left: 10px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > div > p:first-of-type {font-size: 28px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > div > p:first-of-type span {font-size: 16px !important;}
}

@media screen and (max-width: 991px) {
  #start .sectionInner .startWrap .startBox .txt > div:nth-of-type(1) img {height: auto; width: auto; max-width: 70%;}
  #start .startWrap {display: block !important;}
  #start .startBox {padding-top: 0; width: 100%; margin-right: transparent !important;}
  #start .startBox .txt ul,
  #start .startBox .txt ul li {display: block; text-align: center;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div > div > p:first-of-type span {font-size: 28px;}
  #start .sectionInner .startWrap .startBox.smartphone {border-bottom: 1px dotted #3978bf; border-right: transparent;}
  #start .sectionInner .startWrap .startBox.simonly {border-bottom: transparent;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) {font-size: 16px;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) span {font-size: 22px;}

  #start .sectionInner .startWrap .startBox.smartphone .txt > p:nth-of-type(1),
  #start .sectionInner .startWrap .startBox.simonly .txt > p:nth-of-type(1) {font-size: 16px;}

  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) {font-size: 16px;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) span {font-size: 22px;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div > p {font-size: 20px; line-height: 1em;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div > div > p:first-of-type {font-size: 40px; line-height: 1em;}

  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) p:first-of-type {font-size: 12px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > div > p:first-of-type span {font-size: 20px;}

  #start .startBox.smartphone .ttl:before {
    left: -10px;
    top: -15px;
    width: 70px;
    height: 70px;
  }
  #start .startBox.smartphone .ttl.sale:before {
    left: -10px;
    top: -15px;
    width: 70px;
    height: 70px;
  }
}
@media screen and (max-width: 479px) {
  .startBox.smartphone .ttl:after,
  .startBox.simonly .ttl:after {content: ""; border-width: 15px 15px 0 15px; bottom: -15px;}

  #start .startBox .txt > div {padding: 0 20px;}
  #start .startBox.simonly .txt img {width: 70%;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) {padding: 10px;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > p:nth-of-type(1) {font-size: 12px;}
  #start .sectionInner .startWrap .startBox.smartphone .txt ul {margin-top: 10px}
  #start .sectionInner .startWrap .startBox.smartphone .txt ul li {font-size: 11px;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(1) {font-size: 10px;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) {font-size: 10px;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > p:nth-of-type(2) span {font-size: 11px;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div > p {font-size: 20px; line-height: 1em;}
  #start .sectionInner .startWrap .startBox.smartphone .txt > div:nth-of-type(2) > div > div > p:first-of-type {font-size: 40px; line-height: 1em;}

  #start .sectionInner .startWrap .startBox.simonly .txt > p:nth-of-type(1) {font-size: 12px;}
  #start .sectionInner .startWrap .startBox.simonly .txt ul {margin-top: 10px}
  #start .sectionInner .startWrap .startBox.simonly .txt ul li {font-size: 11px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) p:first-of-type {font-size: 10px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) p:first-of-type span {font-size: 15px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > p  {font-size: 10px !important; margin-left: 10px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > div > p:first-of-type {font-size: 20px;}
  #start .sectionInner .startWrap .startBox.simonly .txt > div:nth-of-type(2) > div > div > div > p:first-of-type span {font-size: 14px;}

  #start .content_link a {width: 96%;}

}

/* ====================OCN モバイル ONEとは====================================*/
#cpBox {padding-bottom: 20px !important;}
#cpBox .whatwrap {margin-top: 10px;}
#cpBox .whatwrap > div:first-of-type {margin-bottom: 30px;}
#cpBox .whatwrap > div:first-of-type p {text-align: center; font-size: 24px;}
#cpBox .whatwrap > div:first-of-type p em {font-weight: bold; font-size: 32px; display: inline-block; margin-bottom: 20px;}
#cpBox .whatwrap > div:first-of-type p em span {color: #2163a9;}
#cpBox .point .content_link {text-align: right; margin-top: 20px;}

#cpBox .whatwrap > div:nth-of-type(2) > div {flex: 1; text-align: center; padding: 0 20px 20px;}
#cpBox .whatwrap > div:nth-of-type(2) > div:not(:last-of-type) {border-right: 1px dotted #3978bf;}
#cpBox .whatwrap > div:nth-of-type(2) > div > p:first-of-type {background: #3978bf; padding: 10px 0; margin-bottom: 20px; position: relative; color: #fff;}
#cpBox .whatwrap > div:nth-of-type(2) > div > p:first-of-type:after {content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 5px 10px 0 10px; border-color: #3978bf transparent transparent transparent; position: absolute; bottom: -5px; right: 0; left: 0; margin: auto;}
#cpBox .whatwrap > div:nth-of-type(2) > div > p > img {width: auto; height: 2em;}
#cpBox .whatwrap > div:nth-of-type(2) > div > img {margin-bottom: 20px; width: 100%; max-width: 200px;}
#cpBox .whatwrap > div:nth-of-type(2) > div > p:last-of-type {font-size: 16px; font-weight: bold;}
#cpBox .whatwrap > div:nth-of-type(2) > div > p:last-of-type span {font-size: 30px; color: #2163a9;}

#cpBox .point {padding: 0 20px;}
#cpBox .point h3 {background: #e9f0f8; font-weight: bold; margin: 30px auto 20px;}
#cpBox .point h3 span {color: #2163a9; font-size: 30px;}
#cpBox .point h3 img {width: 120px; margin-right: 10px;}

#cpBox .point1 > div > p,
#cpBox .point1 > div > img,
#cpBox .point1 > div div,
#cpBox .point2 > div:first-of-type > p,
#cpBox .point2 > div:first-of-type > img,
#cpBox .point2 > div:first-of-type > div {display: inline-block;}

#cpBox .point1 > div,
#cpBox .point2 > div:first-of-type {padding: 10px 0;}
#cpBox .point1 > div > p > img,
#cpBox .point2 > div > p > img {width: 200px;}

#cpBox .point1 p,
#cpBox .point2 p {font-weight: bold; font-size: 16px;}
#cpBox .point1 p strong,
#cpBox .point2 p strong {font-size: 30px;color: #fe0104;}
#cpBox .point1 p small,
#cpBox .point2 p small {font-weight: normal;}
#cpBox .point1 > div {padding-left: 20px;}
#cpBox .point1 > div > p:first-of-type {margin: 0 auto 0 0;}
#cpBox .point1 > div > div {margin: 0 0 0 auto; height: 100%;}

#cpBox .point2 > div:first-of-type {border-bottom: 1px dotted #3978bf; padding-left: 20px;}
#cpBox .point2 > div:first-of-type > div:first-of-type {border-right: 1px dotted #3978bf;}
#cpBox .point2 > div:first-of-type > div {/*max-width: 500px; margin: 0 0 0 auto;*/padding: 20px 0; flex: 1;}
#cpBox .point2 > div:first-of-type p {text-align: center;}
#cpBox .point2 > div:first-of-type p strong {font-size: 28px;color: #fe0104;}

#cpBox .point2 > div:last-of-type > h4 img {width: 40px; height: auto; margin-right: 10px;}
#cpBox .point2 > div:last-of-type > h4 {text-align: center; font-weight: bold; font-size: 20px; margin: 30px auto 20px;}
#cpBox .point2 > div:last-of-type div h4 img {width: 40px; height: auto; margin-right: 10px;}
#cpBox .point2 > div:last-of-type > div {margin-bottom: 20px; text-align: center; flex: 1;}
#cpBox .point2 > div:last-of-type > div > div {padding: 0 20px 20px; flex: 1;}
#cpBox .point2 > div:last-of-type > div > div:not(:last-of-type) {border-right: 1px dotted #3978bf;}
#cpBox .point2 > div:last-of-type > div > div > p:nth-of-type(1) {font-weight: normal; margin-bottom: 20px; font-size: 18px;}
#cpBox .point2 > div:last-of-type > div > div > img {margin-bottom: 20px;}
#cpBox .point2 > div:last-of-type > div > div > p:nth-of-type(2) span {font-size: 24px;}
#cpBox .point2 > div:last-of-type > div > div:first-of-type > p:nth-of-type(3) {font-weight: normal; font-size: 12px;}
#cpBox .point2 > div:last-of-type div img {width: 100%; max-width: 100px; height: auto;}

#cpBox .point3 > div > div {flex: 1; text-align: center;}
#cpBox .point3 > div > div:first-of-type {border-right: 1px dotted #3978bf;}
#cpBox .point3 > div > div p {font-size: 16px; margin-bottom: 20px;}
#cpBox .point3 > div > div p span {font-size: 24px; font-weight: bold;}
#cpBox .point3 > div > div img {margin-bottom: 20px;}
#cpBox .point3 > div > div p:last-of-type {font-size: 12px;}
#cpBox .point3 > div > div:first-of-type img {width: 100px; height: auto;}
#cpBox .point3 > div > div:last-of-type img {width: 100%; max-width: 340px;}

@media screen and (max-width: 768px) {
  #cpBox .point1 > div.flex_box,
  #cpBox .point2 > div.flex_box {display: block !important; padding-left: 0;}
  #cpBox .point2 > div:first-of-type {border-bottom: transparent;}
  #cpBox .point2 > div:first-of-type > div {border-bottom: 1px dotted #3978bf; padding-bottom: 20px;}
  #cpBox .point2 > div:last-of-type {padding: 0 15px;}
  #cpBox .point2 > div:last-of-type > div.flex_box {display: block !important;}
  #cpBox .point2 > div:last-of-type > h4 {margin: 20px auto 10px; border-bottom: 1px dotted #3978bf; padding-bottom: 10px;}
  #cpBox .point2 > div:last-of-type > div > div:not(:last-of-type) {border-right: transparent; border-bottom: 1px dotted #3978bf; margin-bottom: 20px;}
  #cpBox .point2 > div:last-of-type > div > div:last-of-type {padding-bottom: 0;}

  #cpBox .point3 > div.flex_box {display: block !important;}
  #cpBox .point3 > div > div:first-of-type {border-right: transparent; border-bottom: 1px dotted #3978bf; margin-bottom: 20px;}
  #cpBox .point .content_link {text-align: center; width: 100%;}
  #cpBox .point2 > div:first-of-type > div {max-width: 100%; width: 100%;}
  #cpBox .point1 > div > div {width: 100%;}


  #cpBox .whatwrap > div:first-of-type p {font-size: 20px;}
  #cpBox .whatwrap > div:nth-of-type(2) > div > p:first-of-type {padding: 5px 20px;}
  #cpBox .whatwrap > div:nth-of-type(2) > div {padding: 0 10px 10px;}
  #cpBox .whatwrap > div:nth-of-type(2) > div > p:last-of-type {font-size: 12px;}
  #cpBox .whatwrap > div:nth-of-type(2) > div > p:last-of-type span {font-size: 18px;}

  #cpBox .point1 > div > p:first-of-type strong,
  #cpBox .point2 > div:first-of-type p strong {font-size: 20px;}
  #cpBox .point h3 {font-size: 18px;}
  #cpBox .point h3 span {font-size: 20px;}
  #cpBox .point h3 img {width: 100px;}
  #cpBox .point3 > div > div p {font-size: 14px;}

  #cpBox .point2 > div:first-of-type {display: block !important;}
  #cpBox .point2 > div:first-of-type > div:first-of-type {padding-top: 0; border-right: transparent; width: 100% !important; margin: 0 auto; border-bottom: 1px dotted #3978bf;}
  #cpBox .point2 > div:first-of-type > div {padding: 20px 0;}
}
@media screen and (max-width: 768px) and (min-width: 479px) {
  #cpBox .point1 > div.flex_box > p:first-of-type,
  #cpBox .point2 > div.flex_box > p:first-of-type {width: 70%;}
  #cpBox .point1 > div.flex_box > p:last-of-type,
  #cpBox .point2 > div.flex_box > p:last-of-type {width: 28%; margin: 0 0 0 auto;}
  #cpBox .point1 > div.flex_box > p:last-of-type img,
  #cpBox .point2 > div.flex_box > p:last-of-type img {width: 100%; height: auto;}
}

@media screen and (max-width: 479px) {
  #cpBox .whatwrap > div:first-of-type p {font-size: 14px;}
  #cpBox .whatwrap > div:first-of-type p em {font-size: 26px; margin-bottom: 10px;}

  #cpBox .whatwrap > div:nth-of-type(2) > div > p:first-of-type {padding: 5px 0;}
  #cpBox .whatwrap > div:nth-of-type(2) > div {padding: 0 1px 10px;}
  #cpBox .whatwrap > div:nth-of-type(2) > div > p:last-of-type {font-size: 10px;}
  #cpBox .whatwrap > div:nth-of-type(2) > div > p:last-of-type span {font-size: 14px;}

  #cpBox .point {padding: 0 5px;}
  #cpBox .point h3 {font-size: 12px;}
  #cpBox .point h3 span {font-size: 14px;}
  #cpBox .point h3 img {width: 60px; margin-right: 5px;}

  #cpBox .point1 > div > p:first-of-type,
  #cpBox .point2 > div:first-of-type p {font-size: 12px !important;}
  #cpBox .point1 > div > p:first-of-type strong,
  #cpBox .point2 > div:first-of-type p strong {font-size: 16px;}
  #cpBox .point1 > div > div p,
  #cpBox .point2 > div:first-of-type > div p {font-size: 12px;}
  #cpBox .point1 > div > div p small,
  #cpBox .point2 > div:first-of-type p small {font-size: 10px;}

  #cpBox .point2 > div:last-of-type > h4 {font-size: 16px;}
  #cpBox .point2 > div:last-of-type > div > div > p:nth-of-type(1) {font-size: 14px; margin-bottom: 10px;}
  #cpBox .point2 > div:last-of-type > div > div > img  {margin-bottom: 10px;}
  #cpBox .point2 > div:last-of-type > div > div > p:nth-of-type(2) {font-size: 12px;}
  #cpBox .point2 > div:last-of-type > div > div > p:nth-of-type(2) span {font-size: 18px;}
  #cpBox .point2 > div:last-of-type > div > div:first-of-type > p:nth-of-type(3) {font-size: 10px;}

  #cpBox .point3 > div > div p {font-size: 11px; margin-bottom: 10px;}
  #cpBox .point3 > div > div p span {font-size: 16px; font-weight: bold;}
  #cpBox .point3 > div > div img {margin-bottom: 10px;}
  #cpBox .point3 > div > div p:last-of-type {font-size: 10px;}

  #cpBox .point1 > div.flex_box > p:first-of-type {width: 70%;}
  #cpBox .point1 > div.flex_box > p:last-of-type {width: 28%;}
  #cpBox .point2 > div.flex_box > p:first-of-type,
  #cpBox .point2 > div.flex_box > p:last-of-type {width: 100%;}
  #cpBox .point1 > div.flex_box > p:last-of-type,
  #cpBox .point2 > div.flex_box > p:last-of-type {text-align: center;}
  #cpBox .point1 > div.flex_box > p:last-of-type img,
  #cpBox .point2 > div.flex_box > p:last-of-type img {width: 100%; max-width: 200px; height: auto;}

  #cpBox .whatwrap > div:nth-of-type(2) > div > p > img {height: 1.3em;}
}



/*
#cpBox .whatwrap {
  padding: 0 2% 2%;
}
#cpBox .whatwrap p {
  font-weight: bold;
  font-size: 18px;
}
#cpBox .whatwrap .sim-type p {
  font-size: 24px;
}
@media screen and (max-width: 768px) {
  #cpBox .whatwrap .sim-type p { font-size: 20px }

}
#cpBox .whatwrap > div {
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
  .flex {
    -js-display: flex; display: -webkit-flex; display: -ms-flexbox; display: flex;
  }
}
#cpBox .whatwrap .top-img img {
  width: auto;
  max-width: 100%;
}
#cpBox .whatwrap .flex div img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto !important;
  max-width: 100%;
}
#cpBox .whatwrap > .flex > div:first-of-type {
  max-width: 173px;
  margin-right: 10px;
}

#cpBox .whatwrap > .flex:first-of-type div img {
  font-size: 0;
}
#cpBox .whatwrap > .flex div img {
  width: auto;
  height: auto;
  display: inline-block;
  margin: 0 0 10px;
}



#cpBox .whatwrap .flex.mobile-pack .flex {
  border: 4px solid #e798ae;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
#cpBox .whatwrap .flex.mobile-pack .flex p {
  width: 100%;
  margin-bottom: 0;
}
#cpBox .whatwrap .flex.mobile-pack .flex p:first-child {
  font-size: 20px;
  line-height: 1.2em;
}
#cpBox .whatwrap .flex.mobile-pack .flex p:first-child span {
  font-size: 26px;
}
#cpBox .whatwrap .flex.mobile-pack .flex p:first-child small {
  font-size: .7em;
  font-weight: normal;
}
#cpBox .whatwrap .flex.mobile-pack .flex p:last-child {
  -js-display: flex; display: -webkit-flex; display: -ms-flexbox; display: flex;
  -webkit-justify-content: center; justify-content:center; -ms-flex-pack: center;
  -webkit-align-items: center; -ms-flex-align: center; align-items: center;
}
#cpBox .whatwrap .flex.mobile-pack .flex p:last-child img {
  margin: 0 !important;
}
#cpBox .whatwrap .flex.mobile-pack .flex p span {
  color: #e798ae;
}
#cpBox .whatwrap .flex.mobile-pack .flex img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

#cpBox .whatwrap .flex.sim-free {
  border: 4px solid #de5419;
  border-radius: 10px;
  padding: 10px;
}
#cpBox .whatwrap .flex.sim-free p {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
}
#cpBox .whatwrap .flex.sim-free div,
#cpBox .whatwrap .flex.sim-free > p {
  width: 50%;
}
#cpBox .whatwrap .flex.sim-free p span{
  font-size: 20px;
  font-weight: bold;
}
#cpBox .whatwrap .flex.sim-free > p {
  position: relative;
}
#cpBox .whatwrap .flex.sim-free p a {
  display: block;
  background: #0259a1;
  padding: 5px 10px;
  color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
}
.swicth-img p {
  display: none !important;
}
@media screen and (min-width: 768px) {
  .flex-768 {
    -js-display: flex; display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-wrap: nowrap;
  }
  .flex-768 li {
    margin: 3px;
  }
  .flex-768 li img {
    width: 100%;
  }
  #cpBox .whatwrap .flex.mobile-pack > div:last-child,
  #cpBox .whatwrap > .flex:last-of-type > div:last-of-type {
    flex: 1;
  }
}
@media screen and (max-width: 768px) {
  #cpBox .whatwrap .flex {
    display: block;
  }
  #cpBox .whatwrap .flex img {
    width: 100% !important;
  }
  #cpBox .whatwrap .flex.mobile-pack .flex img {
    width: auto !important;
  }
  #cpBox .whatwrap .flex.sim-free div,
  #cpBox .whatwrap .flex.sim-free > p {
    width: 100%;
  }
  #cpBox .whatwrap > .flex > div:first-of-type {
    max-width: 100%;
    background: #de5419;
    color: #fff;
  }
  #cpBox .whatwrap > .flex > div:first-of-type p {
    padding: 5px;
  }
  .swicth-img img {
    display: none !important;
  }
  .swicth-img p {
    display: block !important;
  }
  #cpBox .whatwrap .flex.sim-free p a {
    position: relative;
    margin: 0 auto;
  }
}

.reasonH3 {
  font-size: 24px;
}




.set-list {
  padding: 20px !important;
  box-sizing: border-box;
}
.set-list li {
  width: 50%;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 0 10px;
}
.set-list img {
  width: 100%;

  height: auto;
}
.set-list .slick-next, .set-list .slick-prev {
  window
}
.thumb-list {

  padding: 0 20px 20px !important;
}
.thumb-list li {

  width: 20%;
}
.thumb-list img {
  width: 100%;
}
*/



/*
.point1 > div:first-of-type > div, .point1 > div:first-of-type > p, .point1 > div:last-of-type, .point2 > div, .point3 > div {
  border: 2px solid #3977BE;
  margin-bottom: 10px;
}
.point strong {line-height: 1.6em;}
.point p {font-size: 20px; line-height: 1.3em;}
.point h3 {border-bottom: 2px solid #3977be; font-weight: bold;}
.point h3 span {background: #3977be; color: #fff; padding:5px 15px 1px; margin-right: 5px; display: inline-block;}
.point .b-red {color: #e02712; font-weight: bold; font-size: 24px;}
.point .b-black {font-weight: bold; font-size: 24px;}
.point2 strong, .point3 strong {font-size: 30px; font-weight: bold; color: #e02712; line-height: 1.3em;}

#cpBox .whatwrap .point1 > div:first-of-type > p {text-align: center;}
.f-1 {flex: 1;}
.f-2 {flex: 2;}
.point1 > .flex_box > p {margin-right: 10px;}
.point1 > div:last-of-type strong {font-size: 30px; color: #106ca5;}
.point1 > div:last-of-type .flex_box div:nth-of-type(2) strong {}
.point .pad10 {padding: 10px;}
.point3 p span {color: #e02712;}
.point .content_link {height: 100%; position: relative;}
.point .content_link a {position: absolute; bottom: 0; right: 0; display: block;}
.point1 > div:first-of-type > div > p {margin-bottom: 22px;}
*/