@charset "UTF-8";
/* カラー指定　*/
body {
  font-size: 1.1rem;
}

p > a:hover,
li > a:hover {
  text-decoration: underline;
}

/* =====================
  共通
===================== */
/* PC改行解除用*/
@media screen and (min-width: 960px) {
  .u-sp {
    display: none;
  }
}
/* SPスタイル打消し */
.content {
  padding: 5vw;
}

.sp-content {
  padding: 0;
}

.pc-contentInner {
  max-width: 1200px;
  margin: 0 auto;
}

/* PCだけflex */
.pc-flex {
  display: flex;
}

/* 見出し */
.title {
  font-size: 2.25rem;
  color: #333;
  line-height: 1.8;
}
.title span {
  font-size: 1.25rem;
}

/* リンクボタン */
.btn {
  font-size: 1.5rem;
  filter: drop-shadow(12px 12px 0px rgba(0, 0, 0, 0.1));
  transition: all 0.3s;
}
.btn::before {
  right: 2rem;
}
.btn:hover {
  translate: 0 -3px;
  filter: brightness(1.2);
  filter: drop-shadow(16px 16px 0px rgba(0, 0, 0, 0.1));
  background: #00A695;
}

/* キャプション */
ol.caption li {
  font-size: 0.75rem;
}

ul.caption li {
  font-size: 0.75rem;
}

p.caption {
  font-size: 0.75rem;
}

/* dlリスト */
dl dt {
  font-size: 1rem;
}

dl dd {
  font-size: 1rem;
}

/* =====================
  header
===================== */
.header {
  height: 60px;
  padding: 0 5%;
}
.header .smcc {
  width: 230px;
}
.header .meitetsu {
  width: 130px;
}

/* =====================
  メインビジュアル
===================== */
.mv img {
  width: 100%;
}
.mv ol {
  width: 40em;
  margin: 0 auto;
  padding: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =====================
  キャンペーン概要
===================== */
.campaign h3 {
  font-size: 1.375rem;
}
.campaign h3 img {
  margin-top: 1rem;
}
.campaign-list {
  flex-direction: row;
  align-items: stretch;
  gap: 20px;
}
.campaign-list > li {
  padding: 2rem;
  width: 80%;
}
.campaign-list li > ul li {
  font-size: 0.75rem;
  margin-bottom: 0.5em;
}
.campaign-list .campaign-add {
  width: 100px;
  height: 100px;
  margin-top: 15vw;
}
.campaign .limit {
  font-size: 0.875rem;
}
.campaign .dlList {
  margin: 1rem 0;
}
.campaign dl {
  width: 18em;
}

/* =====================
  6つのメリット
===================== */
.merit {
  padding-bottom: 100px;
}
.merit .merit-list {
  align-items: stretch;
}
.merit .merit-list li {
  width: calc((100% - 2px) / 3);
  padding: 2em;
  margin-bottom: 0;
  gap: 1em;
}
.merit .merit-list li::before {
  border-width: 74px 74px 0px 0px;
  left: 0;
}
.merit .merit-list li::after {
  font-size: 1.5rem;
  left: 0.5em;
  top: 0.1em;
}
.merit h3 {
  font-size: 1.375rem;
  min-height: 0;
}
.merit h3 span.sup {
  font-size: 0.75rem;
}
.merit h3 img {
  margin-top: 1em;
}
.merit p {
  font-size: 1rem;
}
.merit ol.caption {
  gap: 2em;
}
.merit .zero {
  width: 85px;
}

/* =====================
  ポイント使い方
===================== */
.point .point-list {
  gap: 4%;
}
.point .point-list > li {
  padding: 50px 2rem 40px;
  margin-bottom: 2rem;
}
.point .point-list > li::before {
  font-size: 1.25rem;
  width: 55px;
  height: 45px;
  padding-top: 0.5em;
}
.point .point-list > li:nth-child(1) {
  width: 68%;
}
.point .point-list > li:nth-child(2) {
  width: 28%;
}
.point h3 {
  font-size: 1.5rem;
}
.point h3 strong {
  font-size: 1.75rem;
}
.point p {
  font-size: clamp(0.875rem, 0.625rem + 0.42vw, 1.125rem);
}
.point-link {
  font-size: 1.125rem;
  width: fit-content;
  padding: 0.3em 1em;
  display: inline-block;
  transition: all 0.3s;
}
.point-link:hover {
  color: #fff;
  text-decoration: none;
  background: #004A99;
}

/* =====================
  この「まち」にぴったりのクレカ。
===================== */
.catchcopy {
  background: url(../images/deco-bg.svg) no-repeat 0 7vw;
  background-size: 100% auto, cover;
}
.catchcopy h2 {
  font-size: 1.875rem;
}
.catchcopy-image {
  width: 660px;
  margin: 5vw auto;
}
.catchcopy picture {
  width: 46%;
}
.catchcopy picture::after {
  border-radius: 10px;
  transform: translate(15px, 15px);
}

/* =====================
  注意事項
===================== */
.attention label {
  font-size: 1.5rem;
}
.attention li {
  font-size: 0.75rem;
  margin-bottom: 0.5em;
}
.attention-benefit {
  font-size: 1.125rem;
}

small {
  font-size: 0.75rem;
}

/* =====================
  フローティングボタン
===================== */
.btn-entry a {
  font-size: 1.125rem;
  width: 180px;
  height: 180px;
  border: 5px solid #00A695;
  filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.1));
  transition: all 0.3s;
}
.btn-entry a::after {
  width: 64px;
  height: 85px;
  bottom: -25px;
}
.btn-entry a:hover {
  translate: 0 -3px;
  filter: brightness(1.2);
  filter: drop-shadow(16px 16px 0px rgba(0, 0, 0, 0.1));
}
.btn-entry a span {
  font-size: 0.857rem;
  padding-top: 2.5rem;
}