.mainCont {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mainCont h2 {
  font-size: 18px;
  margin: 0 0 5px;
}

.mainCont .txt1 {
  color: #333;
  margin-bottom: 25px;
}

.subCont {
  display: flex;
  margin-bottom: 25px;
}

@media (max-width: 767px) {
  .subCont {
    margin-bottom: 0;
    flex-wrap: wrap;
  }
}

.subCont li {
  padding: 0 50px;
  border-right: 1px solid #e5e5e5;
}

@media (max-width: 767px) {
  .subCont li {
    padding: 0;
    margin: 0 0 20px;
    width: 50%;
    border-right: none;
  }
}

@media screen and (min-width:768px) and ( max-width:960px) {
  .subCont li {
    padding: 0 35px;
  }
}

.subCont > :last-child {
  border-right: none;
}

.subCont a {
  color: #777777;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
}

.mainCont a {
  text-decoration: none;
}

@media (max-width: 767px) {
  .subCont a {
    font-size: 14px;
  }
}

.mainCont a:hover,
.subCont a:hover {
  opacity: .6;
}

.dashedBorder {
  margin: 35px 0 20px;
  height: 1px;
  background-image: linear-gradient(to right, #777777, #777777 1px, transparent 1px, transparent 2px);
  background-size: 3px 1px;
  background-position: top;
  background-repeat: repeat-x;
}

.pcbr {
  display: block;
}

.spbr, .sponry {
  display: none;
}

@media (max-width: 767px) {
  .pcbr {
    display: none;
  }
  .spbr, .sponry {
    display: block;
  }
}

@media (max-width: 767px) {
  .dashedBorder {
    margin: 0 0 0;
  }
}

.contList {
  display: flex;
  justify-content: center;
  font-size: 14px;
  margin-bottom: 50px;
}

.contList ul {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: flex-start;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .contList ul {
    justify-content: flex-start;
  }
}

.contList li {
  position: relative;
  width: 25%;
  padding: 20px 30px 30px 30px;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .contList li {
    width: 50%;
    padding: 0 15px 15px;
    margin-bottom: 10px;
  }
}

.contList li:after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 1px;
  width: 100%;
  background-image: linear-gradient(to right, #777777, #777777 1px, transparent 1px, transparent 2px);
  background-size: 3px 1px;
  background-position: top;
  background-repeat: repeat-x;
}

.contList li:before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  height: 100%;
  width: 1px;
  background-image: linear-gradient(to bottom, #777777, #777777 1px, transparent 1px, transparent 2px);
  background-size: 1px 3px;
  background-position: left;
  background-repeat: repeat-y;
}

@media (max-width: 767px) {
  .contList li:before {
    top: 10px;
    height: calc(100% - 10px);
  }
}

.contList li:nth-child(1):after, .contList li:nth-child(2):after, .contList li:nth-child(3):after, .contList li:nth-child(4):after {
  display: none;
}

.contList li:nth-child(1):before, .contList li:nth-child(5):before {
  display: none;
}

@media (max-width: 767px) {
  .contList li:nth-child(1):after, .contList li:nth-child(2):after, .contList li:nth-child(3):after, .contList li:nth-child(4):after, .contList li:nth-child(1):before, .contList li:nth-child(4):before, .contList li:nth-child(7):before {
    display: block;
  }
  .contList li:nth-child(1):after, .contList li:nth-child(2):after, .contList li:nth-child(1):before, .contList li:nth-child(3):before, .contList li:nth-child(5):before, .contList li:nth-child(7):before, .contList li:nth-child(9):before {
    display: none;
  }
}

@media (min-width: 768px) {
  .contList li:nth-child(n+5):nth-child(-n+8):after {
    top: -20px;
  }
}

.contList li a {
  text-decoration: none;
  color: #333;
  display: block;
  text-align: center;
}

@media (max-width: 767px) {
  .contList li a {
    width: 100%;
  }
}

.contList li a .sprite {
  margin: 0 auto;
}

.contList li h2 {
  font-size: 18px;
  text-align: center;
  margin: 15px 0 15px 0;
  color: #333333;
}

@media (max-width: 767px) {
  .contList li h2 {
    font-size: 14px;
    margin: 5px 0 5px 0;
  }
}

.contList li p {
  color: #787878;
}

.contList li a:hover {
  opacity: .6;
}

@media (min-width: 768px) {
  .contList li:nth-child(n+1):nth-child(-n+4) {
    /*width: 25%;*/
    margin-bottom: 20px;
  }
  .contList li:nth-child(n+5):nth-child(-n+8) {
    margin-top: 20px;
  }
}

[data-icon="product"]::before {
  content: "";
  display: inline-block;
  background: url("/content/dam/au-com/new/img/product.svg") left top no-repeat;
  width: 15px;
  height: 25px;
  background-size: 15px 25px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

[data-icon="campaign"]::before {
  content: "";
  display: inline-block;
  background: url("/content/dam/au-com/new/img/campaign.svg") left top no-repeat;
  width: 22px;
  height: 25px;
  background-size: 22px 24px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

[data-icon="support"]::before {
  content: "";
  display: inline-block;
  background: url("/content/dam/au-com/new/img/support.svg") left top no-repeat;
  width: 22px;
  height: 25px;
  background-size: 22px 23px;
  margin-right: 8px;
  vertical-align: middle;
}

[data-icon="search"]::before {
  content: "";
  display: inline-block;
  background: url("/content/dam/au-com/new/img/search.svg") left top no-repeat;
  width: 30px;
  height: 25px;
  background-size: 30px 18px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

[data-icon="money"]::before {
  content: "";
  display: inline-block;
  background: url("/content/dam/au-com/new/img/money.svg") left top no-repeat;
  width: 23px;
  height: 23px;
  background-size: 23px 23px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.sprite {
  width: 100px;
  height: 100px;
}

.sprite:nth-child(1) {
    margin: 0 auto;
}

.sprite[data-sprite="smartphone"] {
  background: url("/content/dam/au-com/new/img/sprite/smartphone.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="internet"] {
  background: url("/content/dam/au-com/new/img/sprite/internet.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="pontapass"] {
  background: url("/content/dam/au-com/new/img/sprite/pontapass_48659272bdb0e708.png") no-repeat center top 18px; background-size: 60px;
}

.sprite[data-sprite="entame"] {
  background: url("/content/dam/au-com/new/img/sprite/entame.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="wallet"] {
  background: url("/content/dam/au-com/new/img/sprite/wallet.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="walletmarket"] {
  background: url("/content/dam/au-com/new/img/sprite/walletmarket.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="wowma"] {
  background: url("/content/dam/au-com/new/img/sprite/wowma.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="online"] {
  background: url("/content/dam/au-com/new/img/sprite/online.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="au-denki"] {
  background: url("/content/dam/au-com/new/img/sprite/au-denki.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="hoken"] {
  background: url("/content/dam/au-com/new/img/sprite/hoken.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="au-home"] {
  background: url("/content/dam/au-com/new/img/sprite/au-home.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

.sprite[data-sprite="card"] {
  background: url("/content/dam/au-com/new/img/sprite/card.png") left top no-repeat;
  background-size: cover;
  background-position-x: 0;
}

/* 20180705追加　スマホのオリエンテーションチェンジ時のセカンダリバナーの対応 */
.cardheightFix {
	height: 282px !important;
}