@charset "utf-8";
/* campaign.css
++++++++++++++++++++++++++++++++++++++++
* NOTE
++++++++++++++++++++++++++++++++++++++++
- Charset: utf-8
- Return code: LF
++++++++++++++++++++++++++++++++++++++++ */
@media (min-width: 768px) {
  .l-main.campaign-index-main {
    width: 1200px;
  }
}



/* share-links
++++++++++++++++++++++++++++++++++++++++ */
.m-share-links {
  margin: 0;
}
.share-links-wrap {
  text-align: center;
  padding: 32px 0;
  background-color: #f8f8f8;
}
.share-links-title {
  margin: 0 auto;
  width: 210px;
  height: 24px;
  font-size: 14px;
  line-height: 24px;
  color: #fff;
  background-color: #0a1f33;
}
.share-links-read {
  color: #0a1f33;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  margin: 16px auto;
}
@media (max-width: 767.98px) {
  .share-links-wrap {
    margin-left: -16px;
    margin-right: -16px;
  }
  .share-links-title {
    border-radius: 36px;
  }
  .m-campaign-card-wrap {
    border-top: none;
  }
}
@media (min-width: 768px) {
  .share-links-wrap {
    border-radius: 8px;
  }
  .share-links-title {
    border-radius: 28px;
  }
}


/* 
++++++++++++++++++++++++++++++++++++++++ */
.campaign-cta {

} 
.campaign-cta > .m-cta_panel {
  margin-top: 0;
  margin-bottom: 0;
}
/* @media (max-width: 767.98px) {
}
@media (min-width: 768px) {
  .campaign-cta > .m-cta_panel {
    margin-top: 0;
  }
} */


/* article
++++++++++++++++++++++++++++++++++++++++ */
.campaign-index > article > h3 > a::after,
.campaign-ended > article > h3 > a::after {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  
  background: no-repeat center/contain;
  background-image: url(/assets/images/icon/link/icon-link-arrow.svg);
  vertical-align: middle;
  content: "";

  top: -0.075em;
  margin-left: 0.3em;
}


/* badge +++++++++++++++++++ */
.camp-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100vh;
  color: #fff;
  line-height: 1;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}
.camp-badge.-camp {
  background-color: #024f95;
}
.camp-badge.-event {
  background-color: #e64e1c;
  background-color: #187a6e;
  background-color: #9f710c;
}
.camp-badge.-benefit {
  background-color: #a72424;
}

/* index +++++++++++++++++++ */
.campaign-index > article {
  position: relative;
  border-top: 1px solid #dde0e5;
  line-height: 1.5;
}
.campaign-index > article:first-of-type {
  border-top-width: 0;
}
.campaign-index > article > figure {
  margin: 0;
}
.campaign-index > article > h3 {
  margin: 0;
  font-weight: bold;
}
.campaign-index > article > h3 > a {
  text-decoration: none;
}
.campaign-index > article > h3 > a::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
.campaign-index > article > p {
  margin: 0;
  color: rgba(10, 31, 51, 0.8);/* rich-black */
}

@media (hover: hover) {
  .campaign-index > article > h3 > a::before {
    transition: background-color 0.3s ease;
  }
  .campaign-index > article > h3 > a:hover::before  {
    background-color: rgba(114,184,206,0.15);
  }
}

@media (max-width: 767.98px) {
  .campaign-index {
    margin-top: 16px;
    margin-bottom: 32px;
  }
  .campaign-index > article {
    margin: 0 -16px;
    padding: 56px 16px 24px;
  }
  .campaign-index > article > figure > img {
    border-radius: 4px;
  }
  .campaign-index > article > i {
    position: absolute;
    top: 20px;
    left: -10px;
    width: 120px;
    height: 24px;
    font-size: 1.2rem;
  }
  .campaign-index > article > h3 {
    margin-top: 12px;
    font-size: 1.6rem;
    line-height: 1.75;
  }
  .campaign-index > article > p {
    margin-top: 8px;
  }
}
@media (min-width: 768px) {
  .campaign-index {
    margin-top: 24px;
    margin-bottom: 48px;
  }
  .campaign-index > article {
    display: flow-root;
    padding: 32px 12px;
  }
  .campaign-index > article > figure {
    float: left;
    width: 370px;
    margin-right: 48px;
  }
  .campaign-index > article > figure > img {
    border-radius: 8px;
  }
  .campaign-index > article > i {
    width: 128px;
    height: 24px;
    padding: 2px 0 0;
    font-size: 1.4rem;
  }
  .campaign-index > article > h3 {
    overflow: hidden;
    margin-top: 16px;
    font-size: 2rem;
  }
  .campaign-index > article > p {
    overflow: hidden;
    margin-top: 8px;
  }
}

/* ended +++++++++++++++++++ */
.campaign-ended {
}

.campaign-ended > h2 {
  /* padding: 0 16px 0.4em;
  line-height: 1.3333; */
  line-height: 1.5;
  text-align: center;
  font-weight: normal;
  /* border-bottom: solid 4px #f3f4f5; */
}

.campaign-ended > article {
  position: relative;
  line-height: 1.5;
}

.campaign-ended > article > h3 {
  margin: 0;
  font-weight: bold;
}
.campaign-ended > article > h3 > a {
  text-decoration: none;
}
.campaign-ended > article > p {
  margin: 0;
  color: var(--color-rich-black-060);
}

@media (hover: hover) {
  .campaign-ended > article > h3 > a:hover {
    text-decoration: underline;
  }
}

@media (max-width: 767.98px) {
  .campaign-ended > h2 {
    margin-top: 72px;
    margin-bottom: 32px;
    font-size: 2.4rem;
  }

  .campaign-ended > article {
    margin: 0;
    padding: 16px 4px;
  }
  .campaign-ended > article > h3 {
    font-size: 1.4rem;
  }
  .campaign-ended > article > p {
    margin-top: 4px;
    font-size: 1.2rem;
  }
}
@media (min-width: 768px) {
  .campaign-ended {
    width: 888px;
    margin-right: auto;
    margin-left: auto;
  }
  .campaign-ended > h2 {
    margin-top: 96px;
    margin-bottom: 48px;
    font-size: 3.2rem;
  }
  .campaign-ended > article {
    padding: 16px 0;
  }
  .campaign-ended > article > h3 {
    font-size: 1.6rem;
  }
  .campaign-ended > article > p {
    margin-top: 4px;
    font-size: 1.4rem;
  }
}