@charset "UTF-8";

/*===========================================================
@nifty with ドコモ光
index.htm
============================================================*/
/*layout*/
body{
  color: #333;
}
.sticky{
  z-index: 10;
}
.mt-auto{
  margin-top: auto;
}
.font-blue{
  color: #188faa;
}

.docomo-top .ttl-sec{
  font-size: 30px;
}
.num-adjust .comma {
  font-size: 80%;
  position: relative;
  top: -0.02em;
}

.blank{
  display: none;
}
.inline-b{
  display: inline-block;
}
@media screen and (max-width: 768px){
  .docomo-top .ttl-sec{
    font-size: 23px;
  }
}

.ttl-ribbon{
  padding: 2px 10px;
  position: absolute;
  color: #fff;
  font-weight: bold;
  background: #333333;
  top: 0;
  left: 0;
}
.ttl-ribbon:before {
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  right: -8px;
  z-index: 1;
  border-style: solid;
  border-width: 14px 8px 14px 0;
  border-color: #333333 transparent;
  content: '';
}

@media screen and (max-width: 768px){
  .ttl-ribbon:before {
    border-width: 13px 8px 13px 0;
  }
}



/*bg*/
.bg-dotted{
  background:#ffffff url("/docomo/images/top/bg-dotted.png") repeat;
  background-size: 12px;
}
.bg-dotted.is-gray{
  background:#f3f1ef url("/docomo/images/top/bg-dotted.png") repeat;
  background-size: 12px;
}


/*********************************
topArea
**********************************/
.top-area.is-top {
  background:#ff423d;
  position: relative;
}

.top-area.is-top .inner {
  padding: 40px 0;
  position: relative;
}
.top-area.is-top .top-mv{
  position: relative;
  display: block;
  margin-top: 18px;
}
.top-area.is-top .mv-text-1{
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  position: relative;
}
.top-area.is-top .mv-text-1 .bg-slash{
  display: inline-block;
  padding: 0 30px;
  background-image: url(/docomo/images/top/bg-slash-l.svg), url(/docomo/images/top/bg-slash-r.svg);
  background-position: left bottom, right bottom;
  background-size:  auto 82%, auto 82% ;
  background-repeat: no-repeat, no-repeat;
}
.top-area.is-top .mv-text-2{
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.top-area.is-top .top-mv .mv-text{
  position: absolute;
  top: 0;
  left: 300px;
}

.top-area .btn-wrap {
  margin:auto;
  max-width: 660px;
}
.top-area .arrow-btn {
  color: #333;
  background: #ffe219;
}
.top-area .arrow-btn:hover {
  color: #fff;
  background: #d00f31;
}
.docomo-top .ttl-text{
  text-align: center;
}
.toukuten-bnr{
  margin: 40px auto 0;
  max-width: 928px;
  border: solid 2px #fff;
  position: relative;
}
.toukuten-bnr .ttl{
  position: absolute;
  top: 0;
  left: 50%;
  padding: 5px 25px;
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.1em;
  background: #ff423d;
  transform: translate(-50%, -50%);
}
.toukuten-bnr .bnr-inner{
  padding: 30px;
}
.toukuten-bnr .bnr-ipv4{
  position: relative;
}
.toukuten-bnr .bnr-ipv4 .ipv4-protocol {
  position: absolute;
  left: 50%;
  top: -20px;
  margin-left: -134px;
  z-index: 2;
}

@media screen and (max-width: 768px) {
  .top-area.is-top .inner {
    padding: 12px 12px 40px;
  }
  .top-area.is-top .mv-text-1{
    font-size: 18px;
    line-height: 1.5;
  }
  .top-area.is-top .mv-text-1 .bg-slash{
    padding: 0 25px;
    background-position: left center, right center;
    background-size: auto 56%, auto 56%;
  }
  .top-area.is-top .mv-text-2{
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.4;
  }
  .top-area.is-top .top-mv .mv-text{
    left: 25%;
  }
  .docomo-top .ttl-text{
    text-align: left;
  }
  .toukuten-bnr{
    margin-top: 40px;
    max-width: 500px;
  }
  .toukuten-bnr .ttl{
    white-space: normal;
    font-size: 16px;
  }
  .toukuten-bnr .ttl .inline-b{
    white-space: nowrap;
  }
  .toukuten-bnr .bnr-inner{
    padding: 30px 15px 5%;
  }
}

@media screen and (max-width: 426px){
  .top-area.is-top .mv-text {
    font-size: 14px;
  }
  .top-area.is-top .top-mv .mv-text{
    left: 22%;
  }
}
@media screen and (max-width: 376px){
  .top-area.is-top .mv-text {
    font-size: 12px;
  }
}

@media screen and (max-width: 321px){
  .top-area.is-top .mv-text {
    font-size: 10px;
  }
  .top-area.is-top .top-wrap {
    font-size: 12px;
  }
}

/*koneta*/
.koneta-bnr-box{
  border: 1px solid #dcdcde;
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}
.koneta-bnr-box a{
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #8c8f94;
}
.koneta-bnr-box a:hover{
  text-decoration: underline;
}
.wp-embed-grid{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  -o-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.wp-embed-text{
  width: 80%;
}
.wp-embed-featured-image {
  width: 20%;
  margin-left: 20px;
}
.wp-embed-heading{
  font-size: 20px;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}
.wp-embed-footer{
  margin-top: 15px;
  font-size: 12px;
}
.wp-embed-site-icon {
  margin-right: 10px;
}

@media screen and (max-width: 768px){
  .wp-embed-featured-image {
    width: 100%;
    float: initial;
    margin-left: 0;
    text-align: center;
    margin-bottom: 10px;
  }
  .wp-embed-text{
    width: 100%;
  }
  .wp-embed-grid{
    display: block;
  }
  .wp-embed-heading {
    font-size: 16px;
    margin-bottom: 10px;
  }
}

/*------------------------------
tokuten-area
-------------------------------*/
.tokuten-box {
  width: 49%;
  border: 2px solid #333;
  background: #fff;
}

.tokuten-text{
  width: 100%;
  padding: 25px;
  border-bottom: 2px solid #333;
  font-weight: bold;
}
.tokuten-text>.left{
  text-align: center;
  padding-right: 15px;
  width: 33%;
}
.tokuten-text>.right{
  width: 67%;
}
.right .ttl{
  margin-top: 10px;
  font-size: 24px;
  line-height: 1.2;
}
.right .ttl .ttl-sub{
  float: left;
  font-size: 16px;
}
.right .ttl .red-text{
  font-size: 37px;
  color: #d00f31;
}

@media screen and (max-width: 768px) {
  .tokuten-box {
    width: 100%;
  }
  .tokuten-box+.tokuten-box{
    margin-top: 10px;
  }
  
  .tokuten-text{
    padding: 15px;
  }
  .tokuten-text>.right,
  .tokuten-text>.left {
    width: 100%;
    text-align: center;
  }
  .tokuten-text>.left {
    padding-right: 0;
    padding-bottom: 10px;
  }
  .right .ttl{
    font-size: 20px;
  }
  .right .ttl .ttl-sub {
    float: inherit;
  }
  .right .ttl .red-text {
    font-size: 26px;
  }
}

/*------------------------------
top-apply-area
-------------------------------*/
.top-apply-area {
  background-color: #ffe219;
}
.docomo-top .top-apply-area .inner{
  padding: 20px 0 40px;
}
.ttl-apply-area {
  font-weight: bold;
  font-size: 26px;
  text-align: center;
  background-color: #f0fcff;
}
.btn-apply-area {
  display: flex;
  justify-content: space-between;
  padding: 0 50px;
}
.btn-apply-area .btn-wrap {
  width: 430px;
}
.btn-apply-area .btn-wrap+.btn-wrap .btn{
  display: flex;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 768px){
  .btn-apply-area {
    display: block;
    padding: 0;
  }
  .docomo-top .top-apply-area .inner{
    padding: 30px 12px;
  }
  .btn-apply-area .btn-wrap {
    width: 100%;
    padding: 10px 0 10px;
  }
  .btn-apply-area .btn-wrap .btn {
    padding: 15px 35px;
    font-size: 18px;
  }
}


/*------------------------------
price-area
-------------------------------*/
/*============================
type-group
==============================*/
.type-group{
  padding: 0 100px;
}
.box-type {
  padding: 20px;
  text-align: center;
  background: #fcf2f2;
}
.box-type .year-type{
  padding: 0px 10px;
  border-radius: 99px;
  color: #fff;
  background: #333;
  margin-right: 10px;
}

.img-type {
  position: relative;
  padding-left: 65px;
}
.img-type:before {
  position: absolute;
  content: "";
  width: 48px;
  height: 42px;
  background: url("/docomo/images/top/img-type-house.svg") no-repeat center;
  background-size: contain;
  left: 50%;
  bottom: 50%;
  margin-left: -24px;
  margin-bottom: -21px;
}
.img-type.is-apart:before {
  width: 30px;
  height: 42px;
  background: url("/docomo/images/top/img-type-apart.svg") no-repeat center;
  background-size: contain;
  margin-left: -15px;
}

.box-type .num {
  color: #d00f31;
  font-size: 56px;
  font-weight: bold;
  line-height: 1.2;
}

.box-type .num .unit {
  color: #333333;
  font-size: 16px;
  position: relative;
}
.box-type .num .unit sup{
  top: -1.5em;
  left: -3.5em;
  font-weight: normal;
}

@media screen and (max-width: 768px){
  .type-group{
    padding: 0;
  }
  .box-type {
    padding: 15px;
  }
  .img-type {
    padding-left: 45px;
  }
  .img-type:before{
    width: 36px;
    height: 30px;
    margin-left: -18px;
    margin-bottom: -15px;
  }
  .img-type.is-apart:before{
    width: 20px;
    height: 32px;
    margin-left: -10px;
    margin-bottom: -16px;
  }
  
    .box-type .num {
      margin-top: 5px;
      font-size: 30px;
    }
    .box-type .num .unit {
      font-size: 14px;
    }
  .box-type .num .unit sup{
    top:0;
    left:0;
  }
}

/*============================
box-frame
==============================*/
.box-frame {
  padding: 20px;
  border: 2px solid #333333;
  position: relative;
}
.box-frame:before{
  position: absolute;
  content: "";
  width: 27px;
  height: 27px;
  background: url("/docomo/images/top/icon-plus.svg") no-repeat center;
  background-size: contain;
  top: -13.5px;
  left: 50%;
  margin-left: -13.5px;
}

.box-frame .heading{
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #333333;
  padding-bottom: 15px;
  text-align: center;
}

.box-frame .content {
  padding: 20px 30px;
}
.box-frame .content-wrap{
  font-size: 18px;
  font-weight: bold;
}
.box-frame .content-wrap .img{
  margin-right: 20px;
}

/*set-box*/
.set-box{
  margin-top: 15px;
  padding: 30px 35px;
  background: #f3f1ef;
  text-align: center;
  position: relative;
}

.text-balloon{
  margin-top: 10px;
  padding: 3px 15px;
  border: 1px solid #333;
  border-radius: 99px;
  text-align: center;
  background: #fff;
}
.set-box .text-lead{
  margin-bottom: 10px;
}

.set-price .circle-sustainedly {
  width: 64px;
  height: 64px;
  border-radius: 999em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #fff;
  line-height: 1.2;
  background: #333;
}

.price-wrap{
  font-weight: bold;
}
.set-price.is-big .price-wrap{
  color: #d00f31;
  font-size: 22px;
  padding: 0 15px;
}
.set-price.is-big .price-wrap+.price-wrap{
  text-align: left;
  padding: 0;
}

.set-price .price-wrap sup{
  font-size: 12px;
  font-weight: normal;
  color: #333;
}

.set-price .num-lead {
  font-size: 46px;
  line-height: 1.0;
  font-weight: bold;
}
.set-price.is-big .num-lead {
  font-size: 74px;
  line-height: 0.7;
}
.set-price .yen{
  position: relative;
}
.set-price .yen .kome{
  position: absolute;
  top: -0.5em;
  left: 0;
}

/*btn*/
.box-frame .btn-wrap{
  margin: 30px auto 0;
  max-width: 660px;
}

@media screen and (max-width: 768px) {
  .box-frame {
    padding: 15px 10px;
  }
  .box-frame .heading{
    font-size: 18px;
    padding-bottom: 12px;
  }
  .box-frame .content {
    padding: 12px 0 0;
  }
  .box-frame .content-wrap{
    font-size: 16px;
    text-align: center;
  }
  .box-frame .content-wrap .img {
    margin-right:0;
  }
  
  /*set-box*/
  .set-box {
    margin-top: 10px;
    padding: 30px 10px 15px;
  }
  .set-price .circle-sustainedly {
    width: 40px;
    height: 40px;
    font-size: 12px;
  }
  .set-price.is-big .price-wrap {
    font-size: 16px;
    padding: 0 10px;
    padding: 0 5px;
    line-height: 1.1;
  }
  .set-price .num-lead {
    font-size: 22px;
  }
  .set-price.is-big .num-lead {
    font-size: 30px;
  }
  
  .box-frame .btn-wrap {
    margin: 15px auto 0;
  }
}


/*------------------------------
feature-area
-------------------------------*/
.docomo-top .feature-area {
  background-color: #d00f31;
}

/*============================
box-feature
==============================*/
.box-feature {
  padding: 25px;
  background: #fff;
  border: 2px solid #333;
  position: relative;
}

.box-feature+.box-feature {
  margin-top: 20px;
}

.coin-R,.coin-L{
  position: absolute;
  width: 110px;
  height: 130px;
  bottom: 0;
}
.coin-R{
  background: url("/docomo/images/top/img-coinR.png") no-repeat center;
  background-size: contain;
  right: 0;
}
.coin-L{
  background: url("/docomo/images/top/img-coinL.png") no-repeat center;
  background-size: contain;
  left: 0;
}

.box-feature>.head {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #333333;
  font-size: 20px;
  font-weight: bold;
}

.feature-list{
  padding: 8px 30px;
  border-radius: 99em;
  background: #f3f1ef;
}
.feature-list+.feature-list{
  margin-top: 15px;
}
.feature-list dt{
  width: 130px;
  margin-right: 15px;
  padding: 0 20px 0 40px;
  position: relative;
  font-size: 20px;
  font-weight: bold;
  color: #d00f31;
  border-right: 2px dashed #c4c4c4;
}
.feature-list dt:before{
  position: absolute;
  content: "";
  width: 35px;
  height: 32px;
  background: url("/docomo/images/top/icon-check.svg") no-repeat center;
  background-size: contain;
  left: 0;
  top: 50%;
  margin-top: -16px;
}
.point-wrap-1{
  width: 828px;
  margin: 0 auto;
}
.point-wrap-2{
  width: 570px;
  margin: 30px auto 0;
}
.point-wrap-1 .point-box{
  text-align: center;
  width: 390px;
}
.point-wrap-2 .point-box{
  text-align: center;
  width: 100%;
}
.point-box+.point-box{
  position: relative;
}
.point-plus {
  display: flex;
  content: "";
  width: 27px;
  background: url(/docomo/images/top/icon-plus.svg) no-repeat center;
  background-size: contain;
  background-position: center;
}

.box-feature .ttl-ribbon{
  position: relative;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.box-feature .ttl-ribbon:after {
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: -8px;
  z-index: 1;
  border-style: solid;
  border-width: 14px 0 14px 8px ;
  border-color: #333333 transparent;
  content: '';
}
.point-box .gray-box{
  background: #f3f1ef;
  padding: 15px 0 5px;
}
.point-wrap-1 .gray-box{
  width: 385px;
}
.point-box .num-point{
  font-size: 36px;
  font-weight: bold;
  color: #d00f31;
}
.point-box .note{
  margin: 5px 20px;
  padding: 4px 0 0;
  font-size: 13px;
  border-top: 1px solid #333;
}


@media screen and (max-width: 768px) {
  .box-feature {
    padding: 12px;
  }
  .coin-R, .coin-L {
    position: absolute;
    width: 59px;
    height: 70px;
    z-index: 0;
  }
  .box-feature>.head {
    margin-bottom: 10px;
    padding-bottom: 12px;
    font-size: 18px;
  }
  .box-feature>.content{
    position: relative;
    z-index: 1;
  }
  
  .feature-list {
    padding: 10px;
    border-radius: 10px;
  }
  .feature-list dt {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
    padding: 0 35px 2px;
    font-size: 18px;
    border-right: 0;
    border-bottom: 1px dashed #c4c4c4;
  }
  .feature-list dt:before {
    width: 26px;
    height: 24px;
    margin-top: -13px;
  }
  .point-wrap-1,
  .point-wrap-2{
    width: 90%;
    max-width: 415px;
  }
  .point-wrap-2{
    margin: 20px auto 0;
  }
  .point-wrap-1 .point-box,
  .point-wrap-2 .point-box{
    width: 100%;
  }
  .point-wrap-1 .point-box:nth-child(2){
    margin-top: 20px;
  }
  .point-wrap-1 .gray-box,
  .point-wrap-2 .gray-box{
    width: calc(100% - 10px);
    margin: 0 auto;
  }
  .box-feature .ttl-ribbon {
    padding: 3px 2px;
    position: relative;
    width: 95%;
    text-align: center;
    font-size: 13px;
  }
  .box-feature .ttl-ribbon:before{
    border-width: 13.5px 8px 13.5px 0;
  }
  .box-feature .ttl-ribbon:after{
    border-width: 13.5px 0 13.5px 8px;
  }
  .box-feature .ttl-ribbon-L:before{
    border-width: 22.5px 8px 25.5px 0px;
  }
  .box-feature .ttl-ribbon-L:after{
    border-width: 22.5px 0px 25.5px 8px;
  }
  .point-box{
    width: 100%;
  }
  .point-plus{
    margin: 7px 0;
    width: 100%;
    height: 20px;
  }
  .point-box .num-point {
    font-size: 22px;
  }
  .point-box .note{
    margin: 5px 14px;
    font-size: 12px;
  }
}

/* .ipv6-grid */
.ipv6-grid{
  margin-top: 15px;
}
.ipv6-grid > .img{
  width: 50%;
}
.ipv6-grid > .txt{
  width: 50%;
}
.ipv6-grid .set-box {
  padding: 35px 15px 15px;
  text-align: left;
}
.box-feature .ipv6-grid .ttl-ribbon {
  position: absolute;
  width: 100px;
  margin: 0 auto;
  text-align: center;
}
.box-feature .ipv6-grid .ttl-ribbon:after{
  content: none;
}

@media screen and (max-width: 768px){
  .ipv6-grid > .img,.ipv6-grid > .txt{
    width: 100%;
  }
}

/*============================
users-group
==============================*/
.users-group .balloon{
  color: #d00f31;
  font-size: 20px;
  font-weight: bold;
  padding: 4px 25px;
  background: #fff;
}
.users-group .balloon:before {
  border-top-color: #ffffff;
}
.users-ttl{
  margin-bottom: 15px;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
.users-box {
  padding: 10px;
  width: 25%;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .users-group .balloon {
    font-size: 16px;
    padding: 4px 20px;
  }
  .users-ttl {
    font-size: 18px;
  }
  .users-box {
    width: 50%;
  }
  .users-box .img img{
    width: 60%;
  }
}


/*------------------------------
service-area
-------------------------------*/
.service-area{
  background: #f3f1ef;
}
.box-service_op>.head {
  padding: 20px 15px;
  background: #fff;
  text-align: center;
  border: 1px solid #333;
}
.box-service_op>.head .logo{
  margin-bottom: 5px;
}
.box-service_op>.head .logo img{
  max-width: 250px;
}

.box-service_op>.content {
  padding:10px;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  background: #ffe219;
  position: relative;
  border: 1px solid #333;
}
.box-service_op>.content:before {
    position: absolute;
    content: "";
    width: 310px;
    height: 27px;
    background: url(/docomo/images/top/bg-service_op.png) no-repeat center;
    background-size: contain;
    top: -15px;
    left: -1px;
}

.slash-text{
  text-align: center;
  font-weight: bold;
  position: relative;
}
.slash-text span{
  position: relative;
}
.slash-text .slash-L{
  left: -5px;
}
.slash-text .slash-R{
  right: -5px;
}

.service-ttl{
  margin: 15px 0;
  padding: 5px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  background: #333;
}
.service-ttl .toku-text{
  color: #ffe219;
  font-size: 20px;
}

.service-area .btn-wrap {
  margin: auto;
  max-width: 660px;
}


@media screen and (max-width: 768px){
  .box-service_op>.content:before {
    width: 100%;
    background-size: cover;
    left: 0;
  }
  .slash-text{
    padding: 0 10px;
  }
  .slash-text span{
    position: absolute;
    top: 50%;
    margin-top: -11px;
  }
}

/*------------------------------
flow-area
-------------------------------*/
.flow-area{
  background: #d00f31;
}
.flow-area .tab {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: normal;
  color: #333;
  background: #e5e5e5;
}

.flow-area .tab.active {
  width: 100%;
  background: #333333;
  color: #fff;
  font-weight: bold;
  cursor: auto;
}

.flow-area .tab-wrap.is-03 .tab {
  width: 33%;
}

.flow-area .tab-box {
  border: 2px solid #333333;
  padding: 40px;
}

.grid-special>.col:first-child {
  padding-right: 20px;
}

.grid-special>.col:last-child {
  padding-left: 20px;
}

.text-point-star {
  font-size: 22px;
  padding-left: 27px;
  position: relative;
}

.text-point-star+.text-point-star {
  margin-top: 2px;
}

.text-point-star:before {
  content: "";
  width: 16px;
  height: 19px;
  background: url("/docomo/images/top/icon-point-star.svg") no-repeat;
  position: absolute;
  top: 7px;
  left: 0;
}

.flow-group {
  padding: 50px 30px 20px;
  position: relative;
}

.flow-wrap {
  position: relative;
}

.flow-wrap:before {
  content: "";
  width: 10px;
  height: 100%;
  background: #ddd;
  position: absolute;
  top: 0;
  left: 4.5%;
}

.box-flow {
  position: relative;
}

.box-flow+.box-flow {
  margin-top: 20px;
}

.box-flow+.box-flow:before {
  content: "";
  width: 90%;
  border-top: 1px dashed #c4c4c4;
  position: absolute;
  top: -10px;
  right: 0;
}

.grid-flow>.head {
  width: 10%;
}

.grid-flow>.content {
  width: 87%;
  padding: 15px;
}

.box-note{
  background: #ffffff;
  padding: 15px;
}

.box-note>.head{
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px dashed #c4c4c4;
}

.flow-btn{
  padding: 0 60px;
}
.flow-btn .box .arrow-btn{
  padding: 18px;
  color: #333;
  background: #ffe219;
}
.flow-btn .box .arrow-btn:hover{
  padding: 18px;
  color: #fff;
  background: #d00f31;
}
.flow-btn .box .arrow-btn:before {
  height: 22px;
  width: 22px;
  top: auto;
  bottom: 0;
}
.flow-btn .box .arrow-btn:after {
  height: 4px;
  width: 18px;
  top: auto;
  right: 1px;
  bottom: 8px;
  margin-top: 0;
}


@media screen and (max-width: 768px) {
  .flow-area .tab {
    font-size: 14px;
  }
  .flow-area .tab-box {
    padding: 20px;
  }
  .flow-area .tab-box .btn-wrap {
    text-align: center;
  }
  .grid-special>.col:first-child {
    width: 100px;
    padding-right: 0;
  }
  .grid-special>.col:last-child {
    padding-left: 0;
    margin-top: 10px;
  }

  .text-point-star {
    font-size: 15px;
    padding-left: 20px;
    position: relative;
  }
  .text-point-star:before {
    width: 12px;
    height: 16px;
    background-size: 12px auto;
    top: 4px;
  }
  
  .flow-group {
    padding: 30px 12px 15px;
    position: relative;
  }

  .flow-wrap:before {
    width: 5px;
    left: calc(5% + 3px);
  }
  .box-flow {
    width: 100%;
  }
  .box-flow+.box-flow:before {
    width: 84%;
  }
  .grid-flow>.head {
    width: 13%;
  }
  .grid-flow>.content {
    width: 84%;
    padding: 10px;
  }
  .list-faq {
    width: 95%;
  }
  
  .flow-btn{
  padding: 0;
  }
}


/*------------------------------
faq-area
-------------------------------*/
.docomo-top .faq-group .ac-ttl,
.docomo-top .faq-group .ac-content{
  padding: 20px 62px 20px 66px;
}

.docomo-top .faq-group .icon-q,
.docomo-top .faq-group .icon-a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 20px;
  margin-top: -15px;
  background: #fff;
}
.docomo-top .faq-group .icon-q {
  border: 2px solid #d00f31;
  color: #d00f31;
}
.docomo-top .faq-group .icon-a {
  border: 2px solid #333;
  color: #333;
}

.docomo-top .faq-group .ac-ttl:after{
  content: none;
}
.docomo-top .faq-group .ac-ttl:before {
  width: 8px;
  height: 8px;
  border: none;
  border-top: 2px solid #d00f31;
  border-right: 2px solid #d00f31;
  right: 25px;
  transform:rotate(135deg);
  background-color: transparent;
}
.docomo-top .faq-group .ac-ttl.active:before {
  transform: rotate(-45deg);
}

.docomo-top .faq-area .btn-wrap {
  margin: auto;
  max-width: 660px;
}

@media screen and (max-width: 768px){
  .docomo-top .faq-group .ac-ttl,
  .docomo-top .faq-group .ac-content {
    padding: 15px 25px 15px 45px;
  }
  .docomo-top .faq-group .icon-q,
  .docomo-top .faq-group .icon-a{
    top: 20px;
    left: 5px;
    margin-top: 0;
  }
  .docomo-top .faq-group .ac-ttl:before {
    right: 5px;
  }
}


/*------------------------------
koneta-area
-------------------------------*/
.koneta-area{
  background: repeating-linear-gradient(90deg, #ffef64, #ffef64 7px, #fff3a5 0, #fff3a5 14px);
}
.koneta-box{
  border: 2px solid #333;
  background: #fff;
}
.koneta-box .img{
  padding: 25px;
  padding-bottom: 0;
}
.koneta-box .text{
  padding:0 25px 20px;
}
.koneta-box .arrow-btn{
  border-top: 2px solid #333;
}

@media screen and (max-width: 768px){
  .koneta-box .img {
    padding: 15px;
    padding-bottom: 0;
  }
  .koneta-box .text {
    padding: 0 15px 15px;
  }
}



/*************************************
news-area カタログ管理
**************************************/
#news-area {
  display: none;
}

.news-area {
  background: #f0fcff;
}

.important-news-wrap {
  border: 3px solid #d00f31;
}

.important-news-wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.important-news-head {
  width: 20%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.important-news-head::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 100%;
  background: #d00f31;
  right: 0;
  top: 0;
}

.important-news-head-inner {
  padding-top: 50px;
  color: #d00f31;
  font-weight: bold;
  position: relative;
  margin: 0 auto;
}

.important-news-head-inner::after {
  position: absolute;
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d00f31 url(/common_new/images/important-news-icon.svg) no-repeat center 7px;
  background-size: 18px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.important-news-box+.important-news-box {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #d00f31;
}

.important-news-article {
  padding: 20px 30px;
  width: 80%;
}

.important-news-ttl {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 5px;
}

.important-news-ttl {
  color: #d00f31;
}

.important-news-date {
  display: block;
}

.important-news-text, .usually-news-text {
  font-size: 16px;
}

.important-news-wrap+.usually-news-wrap {
  margin-top: 20px;
}

.usually-news-wrap {
  border-top: 1px dashed #333;
  border-bottom: 1px dashed #333;
  padding: 10px 20px;
}

.usually-news-wrap::after {
  content: "";
  display: block;
  clear: both;
}

.usually-news-head {
  width: 130px;
  float: left;
}

.usually-news-head-inner {
  background: #333;
  color: #fff;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  padding: 3px;
}

.usually-news-article {
  padding: 0px 20px;
  width: calc(100% - 130px);
  float: left;
}

.usually-news-box {
  display: block;
  color: #333;
  text-decoration: none;
}

.usually-news-box:hover {
  text-decoration: underline;
}

.usually-news-box-inner {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

.usually-news-date {
  width: 120px;
  font-weight: bold;
}

.usually-news-text {
  width: calc(100% - 120px);
}

@media screen and (max-width: 768px) {
  .news-wrap {
    padding: 15px;
  }
  .important-news-wrap, .usually-news-wrap {
    padding: 20px 10px 20px 10px;
  }
  .important-news-wrap, .usually-news-wrap {
    display: block;
  }
  .important-news-head, .usually-news-head {
    width: 100%;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .important-news-head::after, .usually-news-head::after {
    height: 1px;
    width: 100%;
    top: auto;
    bottom: 0;
  }
  .important-news-article, .usually-news-article {
    padding: 0 10px;
    width: 100%;
  }
  .important-news-ttl, .usually-news-date {
    font-size: 15px;
  }
  .important-news-text, .usually-news-text {
    font-size: 14px;
  }
  .usually-news-box-inner {
    display: block;
  }
  .usually-news-date {
    width: 100%;
  }
  .usually-news-text {
    width: 100%;
  }
}

/*===========================================================
20200727 
============================================================*/
.tokuten-text .title{
  margin-bottom: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.tokuten-text .list{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  font-size: 18px;
  background-color: #fff0f4;
}
.tokuten-text .list+.list{
  margin-top: 10px;
}
.tokuten-text .block{
  font-size: 16px;
  vertical-align: middle;
  margin-right: 15px;
  padding: 5px 10px;
  border: 2px solid #333;  
}
.tokuten-text .col2 .block{
  padding: 10px;
}
.tokuten-text .text .col{
  display: flex;
  align-items: center;
  line-height: 1.3;
}
.tokuten-text .text.text-mr{
  margin-right: 30px;
}
.tokuten-text .red-txt{
  color: #d00f31;
  font-size: 32px;
}
@media screen and (max-width: 768px){
.tokuten-text .title{
  font-size: 20px;
}
.tokuten-text .list{
  font-size: 14px;
}
.tokuten-text .block {
  margin-right: 10px;
  font-size: 13px;
}
.tokuten-text .col2 .block{
  padding: 10px 5px;
}
.tokuten-text .text.text-mr{
  margin-right: 12px;
}
.tokuten-text .red-txt{
  font-size: 28px;
}
}

/*===========================================================
@nifty with ドコモ光
set_price.htm
============================================================*/
.set_price .box-frame {
  padding: 0;
  border: 0;
  position: relative;
}
.set_price .box-frame:before{
  content: none;
}
/*===========================================================
@nifty with ドコモ光
price/index.htm
============================================================*/
.price-tokuten-area .inner{
  padding: 0 30px 0;
}
@media screen and (max-width: 768px){
  .price-tokuten-area .inner{
    padding: 15px 12px 25px;
  }
}


/*20200813 クリエイティブ*/
sup.kome1 {
  top: 20px;
  font-weight: normal;
  right: -12px;
}
.apart-border{
  border-left: 2px solid #d8d8d8;
}
.apart-border>.box-type.is-apart {
  border-left: none;
}
@media screen and (max-width: 768px){
sup.kome1 {
  top: 10px;  
  right: -20px;
  }
.apart-border{
  border-left: none;
}
}