@charset "utf-8";


/*** charity.css ***/


.return-info .return-title{
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0.8em 0.5em 0.4em 1.5em;
  width: 94%;
  max-width: 20em;
  display: block;
  border-radius: 1em 1em 0 0;
  background: #e6f8ff;
  color: #00aeef;
  font-size: var(--font-size-xl);
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-align: center;
}

.return-info .return-title:after{
  position: absolute;
  top: -1em;
  left: -0.5em;
  margin: 0;
  width: 10.8rem;
  height: 7.2rem;
  display: block;
  background: url(/funding/common/img/angel.svg) center center no-repeat;
  background-size: contain;
  transform: scale(-1, 1)  rotate(30deg);
  animation: angel 2s ease-in-out infinite;
  content: "";
}


.return-info .return-title br{ display: none;}
@media screen and (max-width: 640px) {

.return-info .return-title br{ display: block;}

}/* End max 640 */



@media screen and (max-width: 480px) {

.return-info .return-title{
  margin: 0 auto -1em;
  padding: 0.8em 0.5em 0.4em 0.5em;
  font-size: var(--font-size-xl);
  line-height: 1.4;
}

.return-info .return-title:after{
  top: -1.2em;
  left: -0.8em;
}

.return-info .return-notice{
  padding: 1em;
  font-size: var(--font-size-m);
}


}/*480*/


/* IMAGE */

.charity .illust-image{
  margin: auto;
  width: 100%;
  max-width: 24rem;
  display: block;
}

@media screen and (max-width: 640px) {

.charity .illust-image{ max-width: 18rem;}
}/* End max 640 */







/* charity item list */

.charity-item-list,
.charity-item-list-mini{
  margin: auto;
  width: 94%;
  max-width: 100rem;
  display: flex;
/*  justify-content: space-between;*/
  justify-content: space-around;
  flex-wrap: wrap;
}

.charity-item-list .item-block{
  margin: 1em 0;
  padding: 1rem;
  width: calc(33% - 1em);
  background-color: #fff;
}

.charity-item-list-mini .item-block{
  position: relative;
  margin: 1em 0;
  padding: 1rem;
  width: calc(25% - 1em);
  background-color: #fff;
}

.charity-item-list-mini .item-block.no-item::after{
  position: absolute;
  content: "在庫なし";
  top: 0;
  left: 0;
  background: #ff7070;
  color: #fff;
  font-size: 1.5rem;
  padding: 0.2rem 1.5rem 0 1.5rem;
}

.charity-item-list .photo-gallery-slider{}
.charity-item-list .photo-gallery-slider .swiper-wrapper{padding: 0;}
.charity-item-list .photo-gallery-slider{ aspect-ratio: 1 / 1;}

.charity-item-list .photo-gallery-slider .swiper-button-prev::after,
.charity-item-list .photo-gallery-slider .swiper-button-next::after{ margin: 0;}




@media screen and (max-width: 640px) {

.charity-item-list .item-block{ width: calc(50% - 1em);}
.charity-item-list-mini .item-block{ width: calc(33.333333333333333333333333333333333333333333333333333333333% - 0.5em);}

}/* End max 640 */

@media screen and (max-width: 480px) {

.charity-item-list{ justify-content: center;}
.charity-item-list .item-block{ width: 90%;}
.charity-item-list-mini .item-block{ width: calc(50% - 0.5em);}

}/* End max 640 */












/* TAB */

.donation-tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.tab-label {
  position: relative;
  margin: 0;
  padding: 0.8em 0.3em;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1em 1em 0 0;
  border: solid 0.2rem #00aeef;
  border-bottom: none;
  background-color: #00aeef;
  color: #fff; 
  text-align: center;
  line-height: 1.4;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}

.tab-label br{ display: none;}

.tab-content {
  position: relative;
  flex: 100%;
  display: none;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0 0 1em 1em;
  border: none;
  padding: 0;
}


input[name="tab-switch"] { display: none;}

.donation-tab input + .tab-label::after {
  position: absolute;
  bottom: 0.5em;
  left: 0;
  right: 0;  
  margin: auto;
  width: 0.8em;
  height: 0.8em;
  display: block;
  border-bottom: solid 0.4rem #00aeef;
  border-right: solid 0.4rem #00aeef;
  transform: rotate( 45deg );
  content: '';
  opacity: 0;
  transition: all 0.4s 0.3s ease;
}

.donation-tab input:checked + .tab-label {
  color: #00aeef;
  background-color: #fff;
}

.donation-tab input:checked + .tab-label::after {
  position: absolute;
  bottom: 0;
  opacity: 1;
}

#TAB01:checked ~ #TAB01-content,
#TAB02:checked ~ #TAB02-content{
  display: block;
  padding:  2em 1.5em;
  opacity: 1;
  border: solid 0.2rem #00aeef;
  border-top: none;
  background-color: #fff;
}

@media screen and (max-width: 640px) {

.tab-label br{ display: block;}
#TAB01:checked ~ #TAB01-content,
#TAB02:checked ~ #TAB02-content{ padding:  2em 1em;}

}/* End max 640 */

@media (hover: hover) {

.tab-label { transition: all .4s ease;}
.tab-label:hover { opacity: 0.8;}

}/* End hover */

.donation-info{
  margin: 0;
  padding: 0;
}

.donation-info dt{
  margin: 0;
  padding: 0.5rem 0;
  font-weight: 600;
}
.donation-info dd{
  margin: 0;
  padding: 0.5rem 0 1em 1em;
}

.donation-info .bank{
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
.donation-info .bank dt{
  margin: 0;
  padding: 0.5rem 0;
  width: 4.5em;
  font-weight: 400;
}
.donation-info .bank dd{
  margin: 0;
  padding: 0.5rem 0 0.5rem 0.5em;
  width: calc(100% - 4.5em);
}

@media screen and (max-width: 768px) {

.donation-info .size-50{
  margin: 0;
  padding: 0;
  width: 100%;
}

}/* End max 768 */