@charset "UTF-8";

/* --- キービジュアルとh1 --- */
.tokutenKV {
  width: 100%;
  height: 255px;
  background: #000 url('/service/thecard/_images/_common/bg_h1_PC.jpg') no-repeat center top;
  background-size: 1366px auto;
}
.tokutenKV .ttl01 {
  color: #fff;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  line-height: 1;
  padding: 65px 0 24px;
}
.tokutenKV .sen {
  border: none;
  width: 91px;
  margin: 0 auto;
  border-bottom: 5px solid #e60012;
}
.tokutenKV .en {
  text-align: center;
  padding-top: 24px;
}
.tokutenKV .en img {
  width: 330px;
}

/* --- 各ブロック --- */
.spCenter {
  text-align: left;
}
.benefitType {
  width: 100%;
  padding: 120px 0;
  background-color: #eee;
}
.eachWrapper {
  width: 1100px;
  margin: 0 auto 40px;
  color: #111;
}
.eachBox {
  width: 1060px;
  margin: 0 0 0 40px;
  padding: 33px 64px;
  background-color: #fff;
  box-shadow: 0px 3px 6px #00000029;
  position: relative;
  font-size: 17px;
  line-height: 1.6;
}
.eachBox .icon {
  position: absolute;
  top: 33px;
  left: -40px;
  width: 80px;
}
.eachBox .ttl02 {
  font-size: 21px;
  color: #111;
  font-weight: bold;
}
.eachBox .ttl02 em {
  font-size: 41px;
  color: #e60012;
  font-weight: bold;
  display: block;
}
.eachBox .tx01 {
  font-size: 17px;
  color: #111;
  font-weight: 500;
  padding: 1em 0 0 0;
}
.eachBox .tx01 b {
  color: #e60012;
  font-weight: bold;
  display: inline;
}
.eachBox .tx01a {
  font-size: 17px;
  color: #111;
  font-weight: 500;
  padding: 1em 0 0 0;
}
.eachBox .tx01a b {
  color: #e60012;
  font-weight: bold;
  display: inline;
}
.eachBox .moreBtn {
  font-size: 20px;
  color: #1e77c9;
  cursor: pointer;
  margin-top: 1em;
}

/* --- テキストリンク色 --- */
.eachBox a:link,
.cardCo a:link,
.eachBox a:visited,
.cardCo a:visited,
.eachBox a:active,
.cardCo a:active {
  color: #1e77c9;
  text-decoration: underline;
  opacity: 1;
}
.eachBox a:hover,
.cardCo a:hover {
  opacity: 0.6;
  transition: 0.2s ease-in-out;
}
/* --- もっと見る --- */
.moreInfo {
  display: none;
  margin-top: 20px;
}

.moreInfo .ttl03 {
  font-size: 17px;
  color: #666;
  font-weight: bold;
  border-bottom: 1px solid #666;
  margin-bottom: 1em;
}
.moreInfo .ls01 {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5em 0;
}
.moreInfo .ls01 li {
  font-size: 17px;
  text-indent: -1.1em;
  margin: 0 0 0.1em 1.1em;
  padding: 0;
  color: #666;
  font-weight: 500;
}
.moreInfo .tx03 {
  font-size: 17px;
  color: #666;
  padding-left: 1em;
}

.eachBox .ls02 {
  display: flex;
  font-size: 17px;
  font-weight: bold;
  color: #111;
  box-sizing: border-box;
  margin: 40px 0 0 0;
}
.eachBox .ls02 li {
  margin: 0 40px 0 0;
  font-weight: bold;
  text-align: center;
}
.eachBox .ls02 li img {
  height: 51px;
  width: auto;
  margin-bottom: 3px;
}
.eachBox .ls02 li.oil img {
  height: 46px;
  margin-top: 5px;
}
.eachBox .ls02 li.wiper img {
  height: 41px;
  margin-top: 5px;
  margin-bottom: 8px;
}

.moreInfo .ttl03b {
  margin-bottom: 1em;
}
.moreInfo .ttl03b b {
  display: inline-block;
  line-height: 1.4;
  font-size: 17px;
  color: #e60012;
  font-weight: bold;
  border-bottom: 4px solid #e60012;
}

/* --- Tポイント ランク--- */
.spUnderRed {
  display: none;
}
.pointTB {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.pointTB .tx04 {
  width: 100%;
}
.pointTB .tx04 s {
  display: inline-block;
  width: 416px;
  opacity: 0;
}
.pointTB .tx04 em {
  display: inline-block;
  text-align: center;
  line-height: 1.16;
  width: 376px;
  background-color: #cf2c2b;
  color: #fff;
  font-size: 14px;
  padding: 6px;
}
.pointTB .tx05 {
  width: 228px;
  height: 170px;
  text-align: center;
  display: block;
}
.pointTB .tx05 s {
  display: block;
  height: 73px;
  opacity: 0;
}
.pointTB .tx05 em {
  display: block;
  height: 96px;
  background-color: #eeeeee;
  font-size: 15px;
  color: #111;
  padding-top: 10px;
  border-top: 1px solid #cdcdcd;
  border-left: 1px solid #cdcdcd;
  border-bottom: 1px solid #cdcdcd;
}
.pointTB .tx05 b {
  font-size: 17px;
  font-weight: bold;
  display: block;
}
.pointTB dl {
  width: 188px;
  height: 169px;
  text-align: center;
  display: block;
  border-top: 1px solid #cdcdcd;
  border-left: 1px solid #cdcdcd;
  border-bottom: 1px solid #cdcdcd;
}
.pointTB dt {
  height: 73px;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #cdcdcd;
  text-align: left;
  line-height: 73px;
}
.pointTB .bronze dt {
  background-color: #f4ded5;
  color: #cc6132;
}
.pointTB .sapphir dt {
  background-color: #dbe9f3;
  color: #529cc7;
}
.pointTB .diamond dt {
  background-color: #fbf2d5;
  color: #e0a43b;
}
.pointTB .diamond {
  border-right: 1px solid #cdcdcd;
}
.pointTB dt img {
  vertical-align: top;
  margin-right: 0.5em;
  margin-left: 10px;
}
.pointTB .bronze img {
  width: 50px;
  margin-top: 10px;
}
.pointTB .sapphir img {
  width: 45px;
  margin-top: 8px;
}
.pointTB .diamond img {
  width: 55px;
  margin-top: 7px;
}
.pointTB dd {
  font-size: 15px;
  line-height: 93px;
}
.pointTB dd b {
  font-size: 21px;
  font-weight: bold;
}
.pointTB .bronze dd {
  color: #111;
}
.pointTB .sapphir dd {
  color: #e60012;
}
.pointTB .diamond dd {
  color: #e60012;
}
.moreInfo .tx06a {
  font-size: 15px;
  margin: 0.5em 0 1em;
}
.moreInfo .tx06 {
  font-size: 17px;
  margin: 1em 0 2em;
}
.moreInfo .tx07 {
  font-size: 17px;
  margin-bottom: 0.7em;
}

/* --- ETC --- */
.moreInfo .etcTB {
  width: 640px;
  display: flex;
  flex-wrap: nowrap;
  box-sizing: border-box;
}
.moreInfo .etcTB .cpt {
  width: 130px;
}
.moreInfo .etcTB .cpt s {
  display: block;
  height: 73px;
}
.moreInfo .etcTB .cpt b {
  display: block;
  height: 95px;
  text-align: center;
  line-height: 96px;
  background-color: #eeeeee;
  font-weight: bold;
  font-size: 17px;
  border-top: 1px solid #cdcdcd;
  border-bottom: 1px solid #cdcdcd;
  border-left: 1px solid #cdcdcd;
}

.moreInfo .etcTB table {
  width: 512px;
  height: 168px;
  border-top: 1px solid #cdcdcd;
  border-right: 1px solid #cdcdcd;
}
.moreInfo .etcTB th {
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
  height: 36px;
  background-color: #eeeeee;
  border-bottom: 1px solid #cdcdcd;
  border-left: 1px solid #cdcdcd;
}
.moreInfo .etcTB td {
  font-size: 15px;
  text-align: center;
  vertical-align: middle;
  color: #e60012;
  font-weight: bold;
  border-bottom: 1px solid #cdcdcd;
  border-left: 1px solid #cdcdcd;
}
.moreInfo .etcTB td b {
  display: none;
}
.moreInfo .ttl03c {
  margin: 1em 0;
}
.moreInfo .ttl03c b {
  display: inline-block;
  line-height: 1.4;
  font-size: 17px;
  color: #e60012;
  font-weight: bold;
  border-bottom: 4px solid #e60012;
}
.moreInfo .kome {
  font-size: 17px;
  text-indent: -1.1em;
  margin: 1em 0 0.1em 1.1em;
  padding: 0;
  color: #666;
  font-weight: 500;
}
.moreInfo .tx08 {
  font-size: 17px;
  color: #111;
  font-weight: 500;
  margin: 0 0 1.5em 0;
}

/* --- さらに2倍 --- */
.moreInfo .tx09 {
  color: #666;
  padding-bottom: 0.5em;
  font-size: 17px;
}
.moreInfo .tx10 {
  color: #111;
  margin-top: 1em;
  font-size: 17px;
}
.moreInfo .tx10 em {
  font-weight: bold;
}
.moreInfo .tx10 b {
  font-weight: bold;
  color: #e60012;
}
.moreInfo .kome2 {
  font-size: 17px;
  text-indent: -1.1em;
  margin: 0 0 0.1em 1.1em;
  padding: 0;
  color: #666;
  font-weight: 500;
}

/* --- ロードサービス --- */
.moreInfo .whichOne {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.moreInfo .whichOne a {
  display: block;
  width: 48%;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  border: 1px solid #cdcdcd;
  box-shadow: 4px 4px 4px #00000029;
  border-radius: 8px;
  padding: 6px 0;
}
.moreInfo .whichOne a:link,
.moreInfo .whichOne a:visited,
.moreInfo .whichOne a:active {
  text-decoration: none;
  color: #111;
}

/* --- 選べるカード会社 --- */
.cardCo {
  width: 1100px;
  margin: 0 auto;
  padding-top: 120px;
}
.cardCo .ttl02 {
  font-size: 33px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}
.cardCo .tx01 {
  font-size: 17px;
  text-align: center;
  margin-bottom: 30px;
}
.cardCo .tx01 b {
  color: #e60012;
  font-weight: bold;
}
.cardCo .eachCardInfo {
  width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
  background-image: linear-gradient(90deg, #fdf2f3 0%, #fdf2f3 50%, #fdece5 50%, #fdece5 100%);
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 40px;
}
.cardCo .nicosCd,
.cardCo .oricoCd {
  width: 50%;
  box-sizing: border-box;
  text-align: center;
  font-size: 17px;
}
.cardCo .nicosCd img {
  width: 136px;
  margin: 40px 0 5px;
}
.cardCo .oricoCd img {
  width: 170px;
  margin: 45px 0 12px;
}
.cardCo .ttl03 {
  width: 100%;
  margin: 40px 0 24px;
  box-sizing: border-box;
  text-align: center;
}
.cardCo .ttl03 b {
  width: 462px;
  margin: 0 auto;
  font-size: 17px;
  font-weight: bold;
  color: #666;
  text-align: center;
  display: block;
  background-color: #fff;
  border-radius: 26px;
  padding: 5px 0;
}

.cardCo .tx02 {
  width: 50%;
  font-size: 17px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.6;
}
.cardCo .tx02 b {
  font-weight: bold;
  font-size: 17px;
}
.cardCo .tx03 {
  width: 50%;
  font-size: 17px;
  box-sizing: border-box;
  text-align: center;
  line-height: 1.6;
}
.cardCo .tx03 b {
  font-weight: bold;
  font-size: 17px;
}

.cardCo .tx03 .uper {
  margin-bottom: 0.7em;
}
.cardCo .tx04 {
  font-size: 17px;
  text-align: center;
  line-height: 1.6;
  margin-top: 2em;
}
/* ---------------------------- スマホ --------------------------- */
@media screen and (max-width: 767px) {
  .tokutenKV {
    width: 100vw;
    height: 42vw;
    background: #000 url('/service/thecard/_images/_common/bg_h1_SP.jpg') no-repeat center top;
    background-size: 100% auto;
  }
  .tokutenKV .ttl01 {
    font-size: 7vw;
    padding: 1.45em 0 5vw;
  }
  .tokutenKV .sen {
    width: 14vw;
  }
  .tokutenKV .en {
    padding-top: 4.3vw;
  }
  .tokutenKV .en img {
    width: 53vw;
  }

  /* --- 各ブロック --- */
  .spCenter {
    text-align: center;
  }
  .benefitType {
    width: 100vw;
    padding: 27vw 0 8vw 0;
    overflow: hidden;
  }
  .eachWrapper {
    width: 100%;
    margin: 0 auto 14vw;
  }
  .eachBox {
    width: 100%;
    margin: 0;
    padding: 10vw 4.2vw 7vw;
    box-shadow: none;
    position: relative;
    font-size: 4vw;
    line-height: 1.6;
  }
  .eachBox .icon {
    position: absolute;
    top: -7.2vw;
    left: 42.8vw;
    width: 14.4vw;
  }
  .eachBox .ttl02 {
    text-align: center;
    font-size: 4vw;
    line-height: 1.4;
  }
  .eachBox .ttl02 em {
    font-size: 7vw;
    display: block;
  }
  .eachBox .tx01 {
    font-size: 4vw;
    padding: 1em 0;
  }
  .eachBox .tx01a {
    font-size: 4.5vw;
    padding: 1em 0;
  }
  .eachBox .moreBtn {
    font-size: 4.5vw;
    cursor: auto;
    text-align: center;
  }
  /* --- テキストリンク色 --- */
  .eachBox a:link,
  .cardCo a:link,
  .eachBox a:visited,
  .cardCo a:visited,
  .eachBox a:active,
  .cardCo a:active,
  .eachBox a:hover,
  .cardCo a:hover {
    color: #1e77c9;
    text-decoration: underline;
    opacity: 1;
  }

  /* --- もっと見る --- */
  .moreInfo {
    display: none;
    margin-top: 4.5vw;
  }
  .moreInfo .ttl03 {
    font-size: 4vw;
    margin-bottom: 1em;
  }
  .moreInfo .ls01 {
    padding: 0 0 0.5em 0;
  }
  .moreInfo .ls01 li {
    font-size: 4vw;
  }
  .moreInfo .tx03 {
    font-size: 4vw;
  }
  .eachBox .ls02 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 4vw;
    margin: 10vw 0 7vw 0;
  }
  .eachBox .ls02 li {
    width: 45.5vw;
    margin: 0 0 4.5vw 0;
  }
  .eachBox .ls02 li img {
    height: 13vw;
    width: auto;
    margin-bottom: 3px;
  }
  .eachBox .ls02 li.oil img {
    height: 11.7vw;
    margin-top: 1.3vw;
  }
  .eachBox .ls02 li.wiper img {
    height: 10.4vw;
    margin-top: 1.3vw;
    margin-top: 1.3vw;
  }
  .moreInfo .ttl03b {
    margin-bottom: 0;
    text-align: center;
  }
  .moreInfo .ttl03b b {
    display: inline-block;
    line-height: 1.6;
    font-size: 4.5vw;
    border: none;
  }

  /* --- Tポイント ランク--- */
  .spUnderRed {
    display: block;
    border: none;
    border-top: 4px solid #e60012;
    width: 49vw;
    margin: 0.5em auto 1.5em auto;
  }
  .pointTB {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
  }
  .pointTB .tx04 {
    width: 100%;
  }
  .pointTB .tx04 s {
    display: inline-block;
    width: 33%;
    opacity: 0;
  }
  .pointTB .tx04 em {
    display: inline-block;
    text-align: center;
    line-height: 1.3;
    width: 67%;
    color: #fff;
    font-size: 3.7vw;
    padding: 0.4em;
  }
  .pointTB dl {
    height: auto;
    text-align: center;
    display: block;
  }
  .pointTB .bronze {
    width: 33%;
  }
  .pointTB .sapphir {
    width: 33%;
  }
  .pointTB .diamond {
    width: 34%;
  }

  .pointTB dt {
    height: 73px;
    font-size: 3.7vw;
    font-weight: bold;
    border-bottom: 1px solid #cdcdcd;
    text-align: center;
    line-height: 1.5;
  }
  .pointTB dt img {
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
  }
  .pointTB .bronze img {
    width: 36px;
    margin-top: 7px;
  }
  .pointTB .sapphir img {
    width: 34px;
    margin-top: 6px;
  }
  .pointTB .diamond img {
    width: 40px;
    margin-top: 5px;
  }
  .pointTB dd {
    font-size: 4vw;
    line-height: 1.6;
    padding: 60px 0 14px 0;
  }
  .pointTB dd b {
    font-size: 5.5vw;
  }
  .pointTB .tx05 {
    position: absolute;
    width: 84vw;
    /* height:1.8em; */
    height: auto;
    /* line-height:1.8em; */
    line-height: 1.4;
    border-radius: 1.8em;
    text-align: center;
    display: block;
    background-color: #eeeeee;
    top: 133px;
    left: 4vw;
  }
  .pointTB .tx05 s {
    display: none;
  }
  .pointTB .tx05 em {
    display: inline;
    height: 1.8em;
    font-size: 4vw;
    padding-top: 0;
    border: none;
  }
  .pointTB .tx05 b {
    font-size: 4vw;
    /* font-weight:bold; */
    font-weight: bold;
    display: inline;
  }
  .moreInfo .tx06a {
    font-size: 4vw;
  }
  .moreInfo .tx06 {
    font-size: 4.1vw;
    margin: 1em 0 2em;
  }
  .moreInfo .tx07 {
    font-size: 4.5vw;
    margin-bottom: 0.7em;
  }

  /* --- ETC --- */
  .moreInfo .ttl03c {
    margin-bottom: 0;
    text-align: center;
  }
  .moreInfo .ttl03c b {
    display: inline-block;
    line-height: 1.5;
    font-size: 4.5vw;
    border: none;
  }
  .moreInfo .etcTB {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    box-sizing: border-box;
  }
  .moreInfo .etcTB .cpt {
    display: none;
  }
  .moreInfo .etcTB table {
    width: 100%;
    height: 157px;
  }
  .moreInfo .etcTB th {
    font-size: 4vw;
    text-align: center;
    vertical-align: middle;
    height: 36px;
  }
  .moreInfo .etcTB th.narrow {
    font-size: 3.9vw;
    letter-spacing: -0.8px;
  }
  .moreInfo .etcTB td {
    font-size: 4.5vw;
    text-align: center;
    vertical-align: middle;
    color: #e60012;
    font-weight: bold;
    width: 33%;
  }
  .moreInfo .etcTB td b {
    display: block;
    font-size: 4vw;
    text-align: center;
    color: #111;
    line-height: 1.2;
  }
  .moreInfo .kome {
    font-size: 4vw;
  }
  .moreInfo .tx08 {
    font-size: 4.5vw;
    color: #111;
    font-weight: 500;
    margin: 0 0 1.5em 0;
  }

  /* --- さらに2倍 --- */
  .moreInfo .tx09 {
    color: #666;
    padding-bottom: 0.5em;
    font-size: 4vw;
    text-align: center;
  }
  .moreInfo .tx10 {
    color: #111;
    margin-top: 1em;
    font-size: 4.5vw;
  }
  .moreInfo .kome2 {
    font-size: 4vw;
    text-indent: -1.1em;
    margin: 0.5em 0 0.1em 1.1em;
    padding: 0;
    color: #666;
    font-weight: 500;
  }

  /* --- ロードサービス --- */
  .moreInfo .whichOne {
    width: 100%;
    display: block;
  }
  .moreInfo .whichOne a {
    display: block;
    width: 83vw;
    margin: 0 auto 5vw auto;
    text-align: center;
    font-size: 4vw;
    font-weight: bold;
    line-height: 1.7;
    border: 1px solid #cdcdcd;
    box-shadow: 4px 4px 4px #00000029;
    border-radius: 8px;
    padding: 6px 0;
  }
  .moreInfo .whichOne a b {
    font-size: 5.3vw;
    font-weight: bold;
  }

  /* --- 選べるカード会社 --- */
  .cardCo {
    width: 100%;
    margin: 0;
    padding-top: 20vw;
  }
  .cardCo .ttl02 {
    font-size: 6.7vw;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10vw;
  }
  .cardCo .tx01 {
    font-size: 4.5vw;
    text-align: left;
    margin-bottom: 10vw;
    padding: 0 4.2vw;
  }
  .cardCo .eachCardInfo {
    width: 100%;
    margin: 0;
    padding-bottom: 10vw;
    overflow: hidden;
  }
  .cardCo .nicosCd,
  .cardCo .oricoCd {
    width: 50%;
    box-sizing: border-box;
    text-align: center;
    font-size: 3.5vw;
    letter-spacing: -0.4px;
  }
  .cardCo .nicosCd img {
    width: 19vw;
    margin: 10vw 0 0.7em;
  }
  .cardCo .oricoCd img {
    width: 24vw;
    margin: 10vw 0 0.3em;
  }
  .cardCo .ttl03 {
    width: 100%;
    margin: 8.5vw 0 4vw;
    box-sizing: border-box;
    text-align: center;
  }
  .cardCo .ttl03 b {
    width: 50vw;
    margin: 0 auto;
    font-size: 4vw;
    font-weight: bold;
    color: #666;
    text-align: center;
    display: block;
    background-color: #fff;
    border-radius: 2em;
    padding: 0.4em 0;
  }
  .cardCo .tx02 {
    width: 50%;
    font-size: 3.8vw;
    box-sizing: border-box;
    text-align: center;
    line-height: 1.5;
    padding: 0 2.5vw;
    letter-spacing: -0.3px;
  }
  .cardCo .tx02 b {
    font-weight: bold;
    font-size: 4vw;
  }
  .cardCo .tx03 {
    width: 50%;
    font-size: 3.7vw;
    box-sizing: border-box;
    text-align: left;
    line-height: 1.5;
    padding: 0 2.5vw;
    letter-spacing: -0.3px;
  }
  .cardCo .tx03 b {
    font-weight: bold;
    font-size: 4vw;
  }
  .cardCo .tx03 .uper {
    margin-bottom: 0.7em;
  }
  .cardCo .tx03 i {
    font-size: 3.46vw;
  }
  .cardCo .tx03 .uper.spex {
    text-align: center;
  }
  .cardCo .tx02.spex2 {
    text-align: left;
  }
  .cardCo .tx02.spex3 {
    padding-top: 0.5em;
  }
  .cardCo .tx03 .uper.spex {
    letter-spacing: -0.5px;
  }
  .cardCo .tx03 .uper.spex5 {
    padding-top: 1.5em;
  }
  .cardCo .tx03 .spex6 {
    text-align: center;
  }
  .cardCo .tx04 {
    font-size: 4.5vw;
    text-align: left;
    line-height: 1.6;
    margin-top: 2em;
    padding: 0 3vw;
  }
  .cardCo .tx04 .spex7 {
    display: block;
    margin-top: 0.5em;
    font-size: 4.5vw;
    letter-spacing: 0;
  }
} /* スマホ */