@charset "utf-8";
/* card */
h2{
  font-size:40px; text-align:center; width:94%; margin:80px auto 0;
}
h2 span{
  color:#00daab; font-size:1rem; display:block; margin-bottom:.5rem; font-weight:900; letter-spacing:.1rem;
}
.barTtl{
  padding:.5rem 0; text-align:center; max-width:960px; font-size:1.8rem; font-weight:700;
  color:#fff; background:var(--pink); border-radius:30px; position:relative; margin:40px auto 20px;
}
.barTtl:before{
  content:""; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent;
  border-top:16px solid var(--pink); display:block; position:absolute; left:calc(50% - 7px); bottom:-15px;
}
#campaign{
  background:var(--bg-soft); padding-top:4em; padding-bottom:140px; box-shadow:none;
}
#campaign > *{
  max-width:var(--max-card); width:94%; margin:auto;
}
#card_info h2 img{ display:block; margin:0 auto; }
.card_lineup{
  width:min(92%, 1020px); padding:2rem; margin:auto; background:#fff; display:grid;
  grid-template-columns:repeat(5, minmax(120px, 1fr)); gap:24px 16px; justify-items:center;
}
.lineup_card{ display:block; margin:0; width:100%; max-width:170px; }
.lineup_card a{ display:block; }
.lineup_card img{ display:block; width:100%; height:auto; }
.btn{
  max-width:460px; width:90%; font-weight:700;
  background:linear-gradient(to left,var(--pink-grad-1) 0%,var(--pink-grad-2) 100%);
  box-shadow:rgba(255,213,185,.8) 0 3px 8px 5px; margin:3rem auto; text-align:center; font-size:18px;
  border-radius:var(--radius-pill); transition:.3s all; outline:none;
}
.btn a{
  display:block; padding:1.2rem 0; width:100%; color:#fff !important; position:relative;
  text-decoration:none !important; border-radius:var(--radius-pill); text-align:center;
}
.btn:hover,.btn a:hover{ background:rgb(255 135 66); }
.btn a img{ width:15px; vertical-align:baseline; margin-left:15px; }
.cardDetail .btn{ margin:24px auto 80px; }
.cardDetail > *,
.cardDetail > dl table{
  width:100%; text-align:left;
}
.cardDetail > table:first-of-type,
.cardDetail > dl{
  background:#fff; box-shadow:var(--shadow-soft);
}
.cardDetail > dl{
  box-shadow:var(--shadow-card); border-bottom-left-radius:var(--radius-lg); border-bottom-right-radius:var(--radius-lg);
}
.cardDetail > table:first-of-type{
  border-bottom:none; border-top-right-radius:var(--radius-lg); border-top-left-radius:var(--radius-lg);
}
.cardDetail > table thead,.cardDetail > table thead tr{ border-radius:var(--radius-lg); }
.cardDetail > table thead th:first-of-type{ border-top-left-radius:var(--radius-lg); }
.cardDetail > table thead th:last-of-type{ border-top-right-radius:var(--radius-lg); }
.cardDetail > table thead th{
  background:#efefef; color:#333; padding:16px; font-size:20px; width:calc(100% / 3);
  border-left:#FFF 1px solid; text-align:center;
}
.cardDetail > table thead th:first-of-type,
.cardDetail > table tbody td:first-of-type{ border-left:none; }
.cardDetail > table tbody td{
  padding:23px; border-left:#F0EEEA 1px solid; vertical-align:top;
}
.cardDetail > table tbody td img{ margin:0 auto; }
.cardDetail > table tbody td:first-of-type img{ display:block; }
.cardDetail > table tbody td:first-of-type img:first-of-type{ margin-bottom:5px; }
.cardDetail > table tbody td:last-of-type img{ margin:0 6px 6px 0; }
.cardDetail > table tbody h4{
  font-size:20px; position:relative; padding-bottom:1rem; margin-bottom:1rem;
}
.cardDetail > table tbody h4:after{
  content:""; display:block; width:100%; height:3px; background:#eea789; position:absolute; bottom:0;
}
.cardDetail > dl dt{
  border:2px solid #efefef; border-right:none; border-left:none; text-align:center; padding:1rem;
  font-weight:700; color:var(--pink); font-size:20px; letter-spacing:.1rem; position:relative; cursor:pointer;
}
.cardDetail > dl dt span{ position:relative; }
.cardDetail > dl dt span:before{
  content:"+"; display:block; height:30px; width:30px; border-radius:50%; color:#fff; background:var(--pink);
  line-height:30px; position:absolute; top:0; left:-35px;
}
.cardDetail > dl dt.open span:before{ content:"−"; }
.cardDetail > dl dd{
  padding:32px; text-align:center; display:none;
}
.cardDetail > dl dd b{ font-weight:700; color:#EF0466; }
.cardDetail > dl dd h4{
  color:#ea749a; border:2px solid #ea749a; border-left:none; border-right:none; display:inline-block;
  padding:.8rem; letter-spacing:.1rem; margin:0 auto 40px; font-size:28px; line-height:140%; min-width:80%;
}
.cardDetail > dl dd h5{
  text-align:left; margin-bottom:24px; color:var(--brown); font-size:26px;
}
.cardDetail > dl dd h5 + p{ text-align:left; }
.cardDetail > dl dd table{ margin:8px auto 40px; }
.cardDetail > dl dd table tr{
  border:1px solid #707070; border-left:none; border-right:none;
}
.cardDetail > dl dd table tr > *{
  padding:1rem 1.5rem; vertical-align:top;
}
.cardDetail > dl dd table tr th{
  background:#F2EFEF; max-width:340px; width:35%; min-width:17.4rem;
}
.cardDetail > dl dd .grantCond h4{
  background:#be907d; border:none; color:#fff; text-align:center; padding:.25em; text-indent:38px; font-size:20px;
}
.cardDetail > dl dd .grantCond h5,
.cardDetail > dl dd .grantCond h6{
  color:#000; margin-bottom:.25em; font-size:1em; text-align:left;
}
.cardDetail > dl dd .grantCond ul,
.cardDetail > dl dd .grantCond ol{
  text-align:left; margin-inline-start:2em;
}
.cardDetail > dl dd .grantCond ul{ list-style:disc; }
.cardDetail > dl dd .grantCond ol{ list-style:decimal; }
.importantNotice{ margin-top:12px; }
.importantNotice_label{
  color:#c40000; font-weight:700; margin-bottom:4px; text-align:center;
}
.importantNotice_link{
  color:#000 !important; text-decoration:underline !important; text-underline-offset:2px;
}
.benefitHead{
  display:flex; align-items:center; gap:.75em; flex-wrap:wrap;
}
.benefitHead .benefitNote{
  color:#e60012; font-size:.7em; font-weight:400; line-height:1.4;
}
a.is-disabled,
.btn a.is-disabled,
.saisonBtn.is-disabled,
#return a.is-disabled{
  pointer-events:none !important; cursor:not-allowed !important; filter:grayscale(100%) !important; opacity:.35 !important;
}
@media screen and (max-width:1023px){
  .card_lineup{ grid-template-columns:repeat(4, minmax(120px, 1fr)); }
}
@media screen and (max-width:767px){
  .card_lineup{
    width:94%; padding:1rem; margin:0 auto; background:transparent; grid-template-columns:repeat(2, 1fr); gap:12px;
  }
  .lineup_card{ max-width:none; }
}
@media screen and (max-width:480px){
  .barTtl{ font-size:1.5rem; border-radius:50px; }
  h2{ font-size:32px; }
  .cardDetail > table thead{ display:none; }
  .cardDetail > table tbody td,
  .cardDetail > dl dd table tr > *{
    width:100% !important; display:block; position:relative; padding-top:90px;
  }
  .cardDetail > table tbody td:before{
    content:"カードの券面・ブランド"; display:block; width:100%; padding:16px 24px; box-sizing:border-box;
    background:var(--brown); color:#fff; position:absolute; left:0; top:0; text-align:center; font-weight:700; font-size:20px;
  }
  .cardDetail > table tbody td:nth-of-type(2):before{ content:"概要"; }
  .cardDetail > table tbody td:nth-of-type(3):before{ content:"便利な機能"; }
  .cardDetail > dl dd{ padding:24px 20px; }
  .cardDetail > dl dd h4{ font-size:20px; padding:.8rem 0; letter-spacing:0; }
  .cardDetail > dl dd table tr > *{ padding:16px; }
  .cardDetail > dl dd h5{ font-size:20px; margin-bottom:16px; }
  .cardDetail > dl dd .grantCond h4{ text-indent:0; }
}