@charset "utf-8";

/*-----------------------------------
ページ共通
-----------------------------------*/
#campaign-list{
	line-height: 1.6;
}
#campaign-list img{
  width:100%;
}
#campaign-list h2{
	margin-bottom: 40px;
	text-align: center;
}
#campaign-list h2 .c-title-contents-full__en{
	font-size: 45px;
	line-height: 1.5;
}
#campaign-list h2 span{
	display: block;
  font-size: 19px;
}
#campaign-list h3{
	font-weight: 600;
}
#campaign-list .list-wrap+.list-wrap{
	margin-top: 110px;
}
#campaign-list .end-text{
	text-align: center;
  font-size: 25px;
}

@media screen and (min-width:600px){
	.sp-only{
		display: none;
	}
	#campaign-list a:hover img{
		opacity: 1;
	}
}

@media screen and (max-width:599px){
	#campaign-list h2{
		margin-bottom: 25px;
	}
	#campaign-list h2 .c-title-contents-full__en{
		font-size: 28px;
	}
	#campaign-list h2 span{
		font-size: 15px;
	}
	#campaign-list .list-wrap+.list-wrap{
		margin-top: 50px;
	}
	#campaign-list .end-text{
		font-size: 20px;
	}
}


/*-----------------------------------
キャンペーン
-----------------------------------*/
#campaign-list .list-wrap .campaign-wrap{
	display: grid;
  gap: 40px;
}
#campaign-list .list-wrap .campaign-wrap .campaign-item a{
	transition: 0.3s all;
}
#campaign-list .list-wrap .campaign-wrap .campaign-item a .campaign-img{
	margin-bottom: 12px;
}
#campaign-list .list-wrap .campaign-wrap .campaign-item a .campaign-tx{
	margin: 4px 0;
	font-size: 15px;
}
#campaign-list .list-wrap .campaign-wrap .campaign-item a .campaign-period{
	color: #666;
  font-weight: 500;
  font-size: 15px;
}

@media screen and (min-width:600px){
	#campaign-list .list-wrap .campaign-wrap:has(> :only-child){
		grid-template-columns: 1fr;
		max-width: 540px;
		margin: 0 auto;
	}
	#campaign-list .list-wrap .campaign-wrap:has(> :nth-child(2):last-child){
		grid-template-columns: repeat(2, 1fr);
		max-width: 1000px;
		margin: 0 auto;
	}
	#campaign-list .list-wrap .campaign-wrap:has(> :nth-child(3)){
		grid-template-columns: repeat(3, 1fr);
	}
	#campaign-list .list-wrap .campaign-wrap .campaign-item a:hover{
		opacity: 0.7
	}
}

@media screen and (max-width:599px){
	#campaign-list .list-wrap .campaign-wrap{
		grid-template-columns: 1fr;
		gap: 28px;
	}
	#campaign-list .list-wrap .campaign-wrap .campaign-item a .campaign-title{
		font-size: 16px;
	}
	#campaign-list .list-wrap .campaign-wrap .campaign-item a .campaign-tx{
		font-size: 14px;
	}
	#campaign-list .list-wrap .campaign-wrap .campaign-item a .campaign-period{
		font-size: 14px;
	}
}

/*-----------------------------------
クーポン
-----------------------------------*/
#campaign-list .list-wrap .coupon-list {
	max-width: 1000px;
  margin: 0 auto;
	text-align: center;
}
#campaign-list .list-wrap .coupon-list .coupon-item+.coupon-item{
	margin-top: 60px;
}
#campaign-list .list-wrap .coupon-list .coupon-item .coupon-title{
	padding-bottom: 4px;
	font-size: 28px;
	border-bottom: 1px dashed #202020;
}
#campaign-list .list-wrap .coupon-list .coupon-item .coupon-period{
	margin: 10px 0 20px;
	font-size: 20px;
}
#campaign-list .list-wrap .coupon-list .coupon-item .code-box{
	display: flex;
	align-items: center;
  gap: 70px;
}
#campaign-list .list-wrap .coupon-list .coupon-item .code-box .code-wrap{
	display: flex;
  width: 65%;
}
#campaign-list .list-wrap .coupon-list .coupon-item .code-box .code-wrap .code-title{
  display: flex;
  align-items: center;
  justify-content: center;
	width: 40%;
  font-size: 24px;
  font-weight: 500;
  background: #cd4f0c;
	color: #fff;
}
#campaign-list .list-wrap .coupon-list .coupon-item .code-box .code-wrap .code-area{
	width: 65%;
	font-size: 60px;
  font-weight: 600;
  letter-spacing: 0.04em;
	border: 2px solid #cd4f0c;
	color: #cd4f0c;
}
#campaign-list .list-wrap .coupon-list .coupon-item .code-box .js-copy-btn{
	position: relative;
  padding: 15px;
	width: calc((100% - 70px) - 65%);
	color: #cd4f0c;
  font-size: 18px;
  border-radius: 100vh;
  text-align: center;
  border: 2px solid #cd4f0c;
  font-weight: 500;
  box-shadow: #cd4f0c 0px 3px 0px;
	background: #fff3ed;
}
#campaign-list .list-wrap .coupon-list .coupon-item .code-box .js-copy-btn.-add-fukidashi::before{
	position: absolute;
	z-index: 3;
	top: -23px;
	left: 50%;
	width: 120px;
	padding: 5px;
	text-align: center;
	font-size: 14px;
	background: #555;
	border-radius: 5px;
	pointer-events: none;
	content: "コピー完了";
	color: #fff;
	transform: translate(-50%);
}
#campaign-list .list-wrap .coupon-list .coupon-item .code-box .js-copy-btn.-add-fukidashi::after{
	position: absolute;
	z-index: 2;
	top: 3px;
	left: 50%;
	width: 11px;
	height: 11px;
	background: #555;
	pointer-events: none;
	content: "";
	transform: translateX(-50%) rotate(45deg);
	border-radius: 2px;
}
#campaign-list .list-wrap .mail-area{
  position: relative;
  margin: 100px auto 0;
  padding: 40px;
  max-width: 1000px;
	text-align: center;
  border: 1px solid #c20d0d;
  background: #fff3f3;
}
#campaign-list .list-wrap .mail-area .mail-title{
  margin: 0 auto 10px;
  padding-bottom: 4px;
	font-size: 28px;
	border-bottom: 1px dashed #202020;
}
#campaign-list .list-wrap .mail-area .mail-title .fukidashi{
  padding: 10px 50px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 100vh;
  border: 1px solid #c20d0d;
	font-size: 19px;
  color: #c20d0d;
}
#campaign-list .list-wrap .mail-area .mail-title .fukidashi::before{
	position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, 50%) rotate(45deg);
  background: #fff;
  border-bottom: 1px solid #c20d0d;
  border-right: 1px solid #c20d0d;
}
#campaign-list .list-wrap .mail-area .mail-title .fukidashi .fukidashi-tx{
 	position: relative;
  padding-left: 43px;
	display: inline-block;
}
#campaign-list .list-wrap .mail-area .mail-title .fukidashi .fukidashi-tx::before{
	position: absolute;
  content: "";
  top: 50%;
  left: 0;
  width: 32px;
  height: 32px;
  background: url(/d_images/campaign/images/mail-icon.png) no-repeat center / contain;
  transform: translateY(-50%);
}
#campaign-list .list-wrap .mail-area .mail-tx{
	font-size: 18px;
}
#campaign-list .list-wrap .mail-area .mail-btn{
	width: 420px;
  margin: 30px auto 0;
}
#campaign-list .list-wrap .mail-area .mail-btn a{
	position: relative;
	display: block;
  padding: 15px 30px;
	font-size: 18px;
  background: #333;
  color: #fff;
	transition: 0.3s all;
	border-radius: 3px;
}
#campaign-list .list-wrap .mail-area .mail-btn a::after{
	position: absolute;
  content: "";
  top: 50%;
  right: 20px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translateY(-50%) rotate(45deg);
	transition: 0.3s all;
}

@media screen and (min-width:600px){
	#campaign-list .list-wrap .coupon-list .coupon-item .code-box .js-copy-btn{
		height: 65px;
	}
	#campaign-list .list-wrap .coupon-list .coupon-item .code-box .js-copy-btn:hover{
		text-decoration: underline;
	}
	#campaign-list .list-wrap .mail-area .mail-btn a:hover{
		opacity: 0.7;
	}
}

@media screen and (max-width:599px){
	#campaign-list .list-wrap .coupon-list .coupon-item+.coupon-item{
		margin-top: 40px;
	}
	#campaign-list .list-wrap .coupon-list .coupon-item .coupon-title{
		font-size: 21px;
	}
	#campaign-list .list-wrap .coupon-list .coupon-item .coupon-period{
		margin: 6px auto 17px;
		font-size: 17px;
	}
	#campaign-list .list-wrap .coupon-list .coupon-item .code-box{
		flex-direction: column;
		gap: 25px;
	}
	#campaign-list .list-wrap .coupon-list .coupon-item .code-box .code-wrap{
		flex-direction: column;
		width: 100%;
	}
	#campaign-list .list-wrap .coupon-list .coupon-item .code-box .code-wrap .code-title{
		width: 100%;
		padding: 4px 10px;
		font-size: 18px;
	}
	#campaign-list .list-wrap .coupon-list .coupon-item .code-box .code-wrap .code-area{
		width: 100%;
		padding: 5px 10px;
		font-size: 50px;
	}
	#campaign-list .list-wrap .coupon-list .coupon-item .code-box .js-copy-btn{
		padding: 12px 20px;
		width: 80%;
		font-size: 17px;
	}
	#campaign-list .list-wrap .mail-area{
		margin: 85px auto 0;
		padding: 47px 20px 30px;
	}
	#campaign-list .list-wrap .mail-area .mail-title{
		font-size: 20px;
	}
	#campaign-list .list-wrap .mail-area .mail-title .fukidashi{
		padding: 10px 30px;
		width: 80%;
		font-size: 17px;
		line-height: 1.4;
	}
	#campaign-list .list-wrap .mail-area .mail-title .fukidashi .fukidashi-tx{
		padding-left: 53px;
	}
	#campaign-list .list-wrap .mail-area .mail-title .fukidashi .fukidashi-tx::before{
		width: 37px;
		height: 37px;
	}
	#campaign-list .list-wrap .mail-area .mail-tx{
		font-size: 16px;
	}
	#campaign-list .list-wrap .mail-area .mail-btn{
		width: 90%;
		margin: 20px auto 0;
	}
	#campaign-list .list-wrap .mail-area .mail-btn a{
		padding: 13px 30px;
		font-size: 17px;
	}
	#campaign-list .list-wrap .mail-area .mail-btn a::after{
		right: 17px;
		width: 9px;
		height: 9px;
	}
}