.sp-only {
  display: none;
}

@media screen and (max-width: 800px) {
  .pc-only {
    display: none;
  }
  
  .sp-only {
    display: block;
  }
}

.canpaign-list .campaign-tab {
  margin-block: 30px 40px;
}

.canpaign-list .campaign-tab__list {
  display: flex;
  min-width: max-content;
  border-bottom: 1px solid #45433E;
}

.canpaign-list .campaign-tab__item {
  border-right: 1px solid #D3D2CF;
}

.canpaign-list .campaign-list__item.is-hide {
  display: none;
}

.canpaign-list .campaign-tab__button {
  display: block;
  padding: 8px 14px;
  font-size: 1.4rem;
  font-weight: 500;
  text-align: center;
  transition: background-color .3s ease-out;
}

.canpaign-list .campaign-tab__item.is-active {
  border-right-color: #fff;
}

.canpaign-list .campaign-tab__item.is-active .campaign-tab__button {
  background-color: #45433E;
  color: #FFF;
}

@media (hover: hover) {
  .canpaign-list .campaign-tab__item:hover {
    border-right-color: #fff;
  }
  .canpaign-list .campaign-tab__item:hover .campaign-tab__button {
    background-color: #45433E;
    color: #FFF;
  }
}

@media screen and (min-width: 1120px) {
  .canpaign-list .campaign-tab__button {
    width: 240px;
  }
  .canpaign-list .campaign-tab__button br {
    display: none;
  }
}

@media (max-width: 800px) {
  .canpaign-list .campaign-tab {
    overflow-x: auto;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    margin-block: 30px 20px;
  }

  .canpaign-list .campaign-tab__list {
    display: flex;
    column-gap: 3px;
    min-width: max-content;
  }

  .canpaign-list .campaign-tab__item {
    flex-shrink: 0;
    white-space: nowrap;
    border-right: none;
  }

  .canpaign-list .campaign-tab__button {
    display: block;
    padding: 3px 14px;
    font-size: 1.2rem;
    background-color: #F4F4F5;
  }

  .canpaign-list .campaign-tab__item.is-active .campaign-tab__button {
    color: #FFF;
  }
}

.canpaign-list .campaign-list {
  margin-top: 20px;
}

.canpaign-list .campaign-list__item {
  margin-bottom: 20px;
  border-bottom: 1px solid #D3D2CF;
  word-wrap: break-word;
}

.canpaign-list .campaign-list__inner {
  display: grid;
  grid-template-columns: calc(160/1244*100%) 1fr calc(300/1244*100%);
  grid-column-gap: calc(30/1244*100%);
  grid-row-gap: 0px;
  padding-block: 20px 27px;
}

.canpaign-list .campaign-list__image {
  grid-area: 1 / 1 / 5 / 2;
}

.canpaign-list .campaign-list__image img {
  width: 100%;
}

.canpaign-list .campaign-list__data {
  grid-area: 1 / 2 / 2 / 3;
}

.canpaign-list .campaign-list__title {
  grid-area: 2 / 2 / 3 / 3;
  font-size: 1.6rem;
	overflow-wrap: break-word;
  word-break: break-all;
}

.canpaign-list .campaign-list__period {
  grid-area: 3 / 2 / 4 / 4;
  margin-top: 15px;
  font-size: 1.2rem;
}

.canpaign-list .campaign-list__period > dd {
  margin-top: 5px;
}

.canpaign-list .campaign-list__description {
  grid-area: 4 / 2 / 5 / 4;
  margin-top: 10px;
  font-size: 1.2rem;
	overflow-wrap: break-word;
  word-break: break-all;
}

.canpaign-list .campaign-list__button {
  grid-area: 1 / 3 / 3 / 4;
}

.canpaign-list .campaign-list__tag {
  margin-bottom: 4px;
}

.canpaign-list .campaign-list__tag .tag__item.is-done {
  background-color: #45433e;
  border: 1px solid #45433e;
  color: #fff;
}

.canpaign-list .campaign-list__tag .tag__item.is-end {
  background-color: #D3D2CF;
  border: 1px solid #D3D2CF;
  color: #807F7D;
}

.canpaign-list .campaign-list__tag .tag__item.is-clickable {
  cursor: pointer;
}

.canpaign-list .campaign-list__tag .tag__item:not(.is-clickable) {
  cursor: default;
}

.canpaign-list .campaign-list__orderHistory {
  margin-bottom: 15px;
  font-size: 1.4rem;
}

.canpaign-list .campaign-list__orderHistory > br {
  display: none;
}

.canpaign-list .campaign-list__button .btn {
  width: 100%;
  max-width: 300px;
  flex: 0 0 auto;
}

.canpaign-list .campaign-list__button .btn__inner {
  align-items: center;
  background-color: #fff;
  border: 1px solid #d3d2cf;
  color: #45433e;
  display: flex;
  font-size: 1.35rem;
  height: 100%;
  justify-content: center;
  line-height: 20px;
  overflow: hidden;
  padding: 17px 20px;
  position: relative;
  text-align: center;
  width: 100%;
  z-index: 5;
}

.canpaign-list .campaign-list__button .btn.is-emphasis .btn__inner {
    background-color: #45433e;
    color: #fff;
}

.canpaign-list .campaign-list__button .btn__inner > span {
    pointer-events: none;
}

@media (hover: hover) {
  .canpaign-list .campaign-list__item:hover .btn__inner > span {
    animation: btnhover-animation-out .3s forwards,btnhover-animation-in .4s .4s forwards
  }
}

.canpaign-list .campaign-list__item:not(:has(.campaign-list__image)) .campaign-list__data {
  grid-column-start: 1;
}

.canpaign-list .campaign-list__item:not(:has(.campaign-list__image)) .campaign-list__title {
  grid-column-start: 1;
}

.canpaign-list .campaign-list__item:not(:has(.campaign-list__image)) .campaign-list__period {
  grid-column-start: 1;
}

.canpaign-list .campaign-list__item:not(:has(.campaign-list__image)) .campaign-list__description {
  grid-column-start: 1;
}

.canpaign-list .campaign-list__item:not(:has(.campaign-list__image)) .campaign-list__data {
  grid-column-end: 4;
}

.canpaign-list .campaign-list__item:not(:has(.campaign-list__button)) .campaign-list__title {
  grid-column-end: 4;
}

.canpaign-list .bottom-buttons {
  margin-top: 40px;
}

.canpaign-list .more-button {
  margin-top: 20px;
}

.canpaign-list .mypagetop-button {
  margin-top: 20px;
}

@media (max-width: 800px) {
  .canpaign-list .campaign-list {
    margin-top: 15px;
  }

  .canpaign-list .campaign-list__item {
    margin-bottom: 0;
  }

  .canpaign-list .campaign-list__inner {
    grid-template-columns: 90px 1fr;
    grid-column-gap: 20px;
    padding-block: 40px 30px;
  }

  .canpaign-list .campaign-list__image {
    grid-area: 1 / 1 / 3 / 2;
  }

  .canpaign-list .campaign-list__image img {
    width: 100%;
  }

  .canpaign-list .campaign-list__data {
    grid-area: 1 / 2 / 2 / 3;
  }

  .canpaign-list .campaign-list__title {
    grid-area: 2 / 2 / 3 / 3;
    font-size: 1.6rem;
  }

  .canpaign-list .campaign-list__period {
    grid-area: 3 / 1 / 4 / 3;
    margin-top: 15px;
    font-size: 1.2rem;
  }

  .canpaign-list .campaign-list__period > dd {
    margin-top: 5px;
  }

  .canpaign-list .campaign-list__description {
    grid-area: 4 / 1 / 5 / 3;
    margin-top: 10px;
    font-size: 1.2rem;
  }

  .canpaign-list .campaign-list__orderHistory > br {
    display: block;
  }

  .canpaign-list .campaign-list__button {
    grid-area: 5 / 1 / 6 / 3;
    margin-top: 40px;
  }

  .canpaign-list .campaign-list__button .btn {
    max-width: 240px;
  }
}

.canpaign-list .modal__inner > p {
	text-align: left;
	word-wrap: break-word;
}

.canpaign-list .modal__inner > p + p {
	margin-top: 15px;
}

.canpaign-list .modal__inner > p > a {
	text-decoration: underline;
}

@media (hover: hover) {
  .canpaign-list .modal__inner > p > a:hover {
    text-decoration: none;
  }
}

.canpaign-list .modal-close {
  position: absolute;
  right: 32px;
  top: 32px;
  width: 20px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.canpaign-list .modal-close::before,
.canpaign-list .modal-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: #333;
  transform-origin: center;
}

.canpaign-list .modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.canpaign-list .modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.-modal-show .canpaign-list {
  overflow: hidden;
}

.-modal-show .canpaign-list .modal-box:not([inert]) {
  opacity: 1;
}

.-modal-active .canpaign-list .modal-box:not([inert]) {
  visibility: visible;
}

@media(max-width: 1023px) {
  .canpaign-list .modal-box {
    padding: 10px;
  }

  .canpaign-list .modal-box__content {
    padding: 40px;
  }

  .canpaign-list .modal-close {
    right: 20px;
    top: 20px;
  }
}