@charset "utf-8";
/*-------------------*/
/*-- v2 new design --*/
/*-------------------*/
.page-coupon-v2 {

}
.page-coupon-v2 > .page-coupon-v2-inner,
.page-coupon-v2 > .page-coupon-v2-inner *,
.page-coupon-v2 > .page-coupon-v2-inner *:before,
.page-coupon-v2 > .page-coupon-v2-inner *:after {
	box-sizing: border-box;
}
.page-coupon-v2 > .page-coupon-v2-inner {
	font-size: 1.5rem;
	line-height: 1.6;
	background-color: #fff;
	padding: 3rem 2rem;
	max-width: 50rem;
	margin: 0 auto;
	min-height: 100vh;
}

.page-coupon-v2 .coupon-v2-box-total {
	
}
.page-coupon-v2 .coupon-v2-box-total > .box-inner {

}
.page-coupon-v2 .coupon-v2-box-total .coupon-available {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 1rem;
	border-bottom: 1px solid #ddd;
	margin-bottom: 2rem;
}
.page-coupon-v2 .coupon-v2-box-total .coupon-available .t--1 {
	font-weight: bold;
}
.page-coupon-v2 .coupon-v2-box-total .coupon-available .t--2 {
	display: flex;
	align-items: center;
	line-height: 1;
	margin-top: 2rem;
}
.page-coupon-v2 .coupon-v2-box-total .coupon-available .t--2 > .coupon-number {
	/*font-family: "Arial", sans-serif;*/
	font-weight: bold;
	font-size: 3.2rem;
	color: #f1890e;
	padding-right: 1rem;
}
.page-coupon-v2 .coupon-v2-box-total .coupon-btns {

}
.page-coupon-v2 .coupon-btn-group-1,
.page-coupon-v2 .coupon-btn-group-1 *,
.page-coupon-v2 .coupon-btn-group-1 *:before,
.page-coupon-v2 .coupon-btn-group-1 *:after {
	box-sizing: border-box;
}
.page-coupon-v2 .coupon-btn-group-1 {
	
}
.page-coupon-v2 .coupon-btn-group-1 > li {

}
.page-coupon-v2 .coupon-btn-group-1 > li + li {
	margin-top: 1rem;
}
.page-coupon-v2 .coupon-btn-group-1 .btn_style {
	display: block;
	width: 100%;
	min-width: unset;
}
.page-coupon-v2 .coupon-v2-box-definition {
	margin-top: 2rem;
}
.page-coupon-v2 .coupon-v2-box-definition > .box-inner {

}
.page-coupon-v2 .coupon-definition {
	border: 3px solid #eee;
	padding: 1rem;
}
.page-coupon-v2 .coupon-definition .def-title {
	margin-bottom: 1rem;
}
.page-coupon-v2 .coupon-definition .def-title > .title-inner {
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1;
	color: #555;
	display: inline-block;
	background-color: #eee;
	padding: 1rem;
}
.page-coupon-v2 .coupon-definition .def-detail {
	font-size: 1.4rem;
}
.page-coupon-v2 .coupon-definition .def-detail > p {
	line-height: 2;
}
.page-coupon-v2 .coupon-definition .def-detail > p + p {
	
}
.page-coupon-v2 .coupon-v2-box-history {
	margin-top: 4rem;
}
.page-coupon-v2 .coupon-v2-box-history > .box-inner {

}
.page-coupon-v2 .coupon-v2-box-history .box-title {
	color: #555;
	font-weight: bold;
	padding-bottom: .5rem;
	border-bottom: 1px solid #ddd;
	margin-bottom: 2rem;
}
.page-coupon-v2 .coupon-v2-history-list-1 {

}
.page-coupon-v2 .coupon-v2-history-list-1 > li {

}
.page-coupon-v2 .coupon-v2-history-list-1 > li + li {
	margin-top: 2rem;
}
.page-coupon-v2 .coupon-v2-history-list-1 .inner-box {
	border: 1px solid #ddd;
	border-radius: .2rem;
	overflow: hidden;
}
.page-coupon-v2 .coupon-v2-history-list-1 .area-date {
	font-size: 1.2rem;
	color: #333;
	font-weight: bold;
	background-color: #f1f1f1;
	padding: .5rem 1rem;
	border-bottom: 1px solid #ddd;
}
.page-coupon-v2 .coupon-v2-history-list-1 .area-body {
	display: flex;
	align-items: stretch;
	justify-content: center;
}
.page-coupon-v2 .coupon-v2-history-list-1 .area-body .col-detail {
	flex: 1;
	padding: 1rem;
}
.page-coupon-v2 .coupon-v2-history-list-1 .area-body .col-detail .detail-content {
	font-size: 1.3rem;
}
.page-coupon-v2 .coupon-v2-history-list-1 .area-body .col-detail .detail-note {
	font-size: 1.3rem;
	margin-top: 1rem;
}
.page-coupon-v2 .coupon-v2-history-list-1 .area-body .col-num {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30%;
	min-width: 10rem;
	padding: 1rem;
}
.page-coupon-v2 .coupon-v2-history-list-1 > li.plus .area-body .col-num {
	color: #FF2F65;
	background-color: #FFE9EF;
}
.page-coupon-v2 .coupon-v2-history-list-1 > li.minus .area-body .col-num {
	color: #1B91FF;
	background-color: #DDEFFF;
}
.page-coupon-v2 .coupon-v2-history-list-1 .area-body .col-num .num-main {
	font-family: 'Arial', sans-serif;
	font-size: 2rem;
	font-weight: bold;
}
.page-coupon-v2 .coupon-v2-history-list-1 .area-body .col-num .num-note {
	font-weight: bold;
}
.page-coupon-v2 .coupon-v2-history-list-1 .expire-badge {
	display: inline-block;
	text-align: center;
	font-size: 1.2rem;
	line-height: 1;
	color: #fff;
	background-color: #555;
	padding: .5rem;
	border-radius: .5rem;
}
.page-coupon-v2 .coupon-v2-history-list-1.list-coin .area-body .col-num .num-note {
	font-size: 1rem;
}
.page-coupon-v2 .coupon-v2-use-box {
	font-size: 1.5rem;
	color: #555;
	padding: 1rem 1rem 2rem;
	border: .2rem solid #ccc;
}
.page-coupon-v2 .coupon-v2-use-box .box-title {
	font-size: 1.5rem;
	font-weight: bold;
	color: #555;
	background-color: #eee;
	padding: .5rem 1rem;
	margin-bottom: 2rem;
}
.page-coupon-v2 .coupon-v2-use-box > .box-body {

}
.page-coupon-v2 .coupon-v2-use-box .price-row {
	font-size: 1.5rem;
	color: #555;
	padding: 1rem 0;
}
.page-coupon-v2 .coupon-v2-use-box .price-row .col--1 {
	font-size: 1.3rem;
	background-color: #f1f1f1;
	padding: .5rem 1rem;
}
.page-coupon-v2 .coupon-v2-use-box .price-row .col--2 {
	text-align: center;
	margin-top: .5rem;
}
.page-coupon-v2 .coupon-v2-use-box .price-row .t--price-1-num {
	font-size: 1.8rem;
	font-weight: bold;
}
.page-coupon-v2 .coupon-v2-use-box .price-row .t--price-2-num {
	font-size: 1.8rem;
	font-weight: bold;
	color: #f1890e;
}
.page-coupon-v2 .coupon-v2-use-box .price-row .main-num {
	font-size: 1.8rem;
}
.page-coupon-v2 .coupon-v2-use-box .row-bb {
	border-bottom: 1px solid #ccc;
}
.page-coupon-v2 .coupon-v2-use-box .price-row.row-coin-price .col--1 {
	color: #16A9B2;
	font-weight: bold;
}
.page-coupon-v2 .coupon-v2-use-box .input-row {
	padding: 1rem 0;
}
.page-coupon-v2 .coupon-v2-use-box .input-row > * + * {
	margin-top: 1rem;
}
.page-coupon-v2 .coupon-v2-use-box .input-row .coupon-input {
	/*width: 12rem;*/
}
.page-coupon-v2 .coupon-radio {

}
.page-coupon-v2 .coupon-radio > label {
	cursor: pointer;
}
.page-coupon-v2 .coupon-radio input {
	display: none;
}
.page-coupon-v2 .coupon-radio .label-input > input + .input-icon {
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	border: 1px solid #999;
	vertical-align: middle;
	cursor: pointer;
}
.page-coupon-v2 .coupon-radio .label-input > input:checked + .input-icon:after {
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background-color: #f1890e;
}
.page-coupon-v2 .coupon-radio .label-text {
	display: inline-block;
	vertical-align: middle;
}
.page-coupon-v2 .coupon-input {
	
}
.page-coupon-v2 .coupon-input > input {
	box-sizing: border-box;
	display: block;
	width: 100%;
	text-align: right;
	font-size: 1.5rem;
	line-height: 1.5;
	padding: .5rem 1rem;
	border: 1px solid #767676;
	box-shadow: none;
	min-width: unset;
}
.page-coupon-v2 .coupon-input > input.disabled {
	opacity: .3;
}
.page-coupon-v2 .coupon-input > input::placeholder {
	color: #ccc;
}
.page-coupon-v2 .coupon-input-validation-scope {
	position: relative;
}
.page-coupon-v2 .coupon-input-validation-scope .coupon-input-validation-tooltip {
	display: none;
	box-sizing: border-box;
	position: absolute;
	z-index: 10;
	top: calc(100% + 1rem);
	left: 0;
	width: auto;
	background-color: #fff;
	padding: 1rem 1.5rem;
	border-radius: .5rem;
	border: 1px solid #767676;
	filter: drop-shadow(0 0 .5rem rgba(0,0,0,.15));
}
.page-coupon-v2 .coupon-input-validation-scope.on .coupon-input-validation-tooltip {
	display: block;
}
.page-coupon-v2 .coupon-input-validation-scope .coupon-input-validation-tooltip:before {
	content: '';
	display: block;
	position: absolute;
	top: -.57rem;
	left: 2rem;
	width: 1rem;
	height: 1rem;
	background-color: #fff;
	border: 1px solid transparent;
	border-top-color: #767676;
	border-right-color: #767676;
	transform: rotateZ(-45deg);
}
.page-coupon-v2 .coupon-input-validation-scope .coupon-input-validation-tooltip .tooltip-text {
	display: flex;
	align-items: flex-start;
	font-size: 1.3rem;
}
.page-coupon-v2 .coupon-input-validation-scope .coupon-input-validation-tooltip .tooltip-text > .icon {
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	text-indent: 0;
	width: 2.2rem;
	height: 2.2rem;
	font-size: 1.5rem;
	line-height: 1;
	color: #fff;
	background-color: #FFA300;
	border-radius: .2rem;
	margin-right: .5rem;
}
.page-coupon-v2 .coupon-input-validation-scope .coupon-input-validation-tooltip .tooltip-text > .error-list {
	flex: 1;
}
.page-coupon-v2 .coupon-input-validation-scope .coupon-input-validation-tooltip .tooltip-text > .error-list > li {
	display: none;
}
.page-coupon-v2 .coupon-v2-use-box .notice-area {
	font-size: 1.3rem;
}
.page-coupon-v2 .coupon-back-btn {
	box-sizing: content-box;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 3rem;
	font-size: 1.4rem;
	color: #999;
	background-color: #f4f4f4;
	padding: 0 1rem;
	border: 1px solid #ccc;
	border-radius: .3rem;
	transition: background-color .2s linear;
}
.page-coupon-v2 .coupon-back-btn:before {
	content: '';
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	background-image: url(../images/coupon/common/icon-back-btn.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin-right: .5rem;
}
.page-coupon-v2 .coupon-back-btn:hover {
	background-color: #eee;
}

/* coin pages */
.page-coupon-v2 .coin-box-total {

}
.page-coupon-v2 .coin-box-total > .box-inner {

}
.page-coupon-v2 .coin-box-total .num-area {

}
.page-coupon-v2 .coin-box-total .num-area .coin-total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.4rem;
	font-weight: bold;
	padding-bottom: .5rem;
	border-bottom: 1px solid #ccc;
}
.page-coupon-v2 .coin-box-total .num-area .coin-total .main-num {
	display: inline-block;
	font-size: 2rem;
	font-weight: bold;
	color: #16A9B2;
	padding-right: .5rem;
}
.page-coupon-v2 .coin-box-total .btn-area {
	margin-top: 2rem;
}
.page-coupon-v2 .coin-box-total .btn-area .btn_style {
	box-sizing: border-box;
	display: block;
	width: 100%;
	font-size: 1.4rem;
	line-height: 1.5;
	min-width: unset;
	height: unset;
	border-radius: .5rem;
	padding: 1rem;
}
.page-coupon-v2 .coin-shop-list,
.page-coupon-v2 .coin-shop-list *,
.page-coupon-v2 .coin-shop-list *:before,
.page-coupon-v2 .coin-shop-list *:after {
	box-sizing: border-box;
}
.page-coupon-v2 .coin-shop-list {
	font-size: 1.3rem;
}
.page-coupon-v2 .coin-shop-list > li {
	
}
.page-coupon-v2 .coin-shop-list > li + li {
	margin-top: 1rem;
}
.page-coupon-v2 .coin-shop-list .list-row {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	flex-wrap: wrap;
}
.page-coupon-v2 .coin-shop-list > li:first-child .list-row {
	color: #fff;
	background-color: #999;
}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row {
	border: .2rem solid #ccc;
}
.page-coupon-v2 .coin-shop-list .list-row > div {
	flex-grow: 0;
	flex-shrink: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}
.page-coupon-v2 .coin-shop-list > li:first-child .list-row > div {
	padding: .5rem;
	text-align: center;
}
/* width control */
.page-coupon-v2 .coin-shop-list > li:first-child .list-row > div:nth-child(1) {
	width: 30%;
}
.page-coupon-v2 .coin-shop-list > li:first-child .list-row > div:nth-child(2) {
	width: 40%;
}
.page-coupon-v2 .coin-shop-list > li:first-child .list-row > div:nth-child(3) {
	width: 30%;
	justify-content: center;
}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row > div:nth-child(1) {
	width: 33%;
	position: relative;
	color: #16A9B2;
	font-size: 1.5rem;
	font-weight: bold;
	padding-left: 3rem;
	justify-content: flex-start;
}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row > div:nth-child(1):before {
	content: '\f1c0';
	font-family: 'fontAwesome';
	display: block;
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.8rem;
	line-height: 1;
	color: #16A9B2;
}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row > div:nth-child(1) .innner-text {

}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row > div:nth-child(1) .main-num {
	display: inline-block;
	font-size: 1.6rem;
}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row > div:nth-child(2) {
	width: 30%;
}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row > div:nth-child(2) {
	color: #555;
	font-size: 1.3rem;
	font-weight: bold;
}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row > div:nth-child(3) {
	width: 36%;
	justify-content: flex-end;
	color: #555;
	font-size: 1.3rem;
	font-weight: bold;
}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row > div:nth-child(3) .main-num {
	font-size: 1.6rem;
}
.page-coupon-v2 .coin-shop-list > li:not(:first-child) .list-row > div:nth-child(4) {
	width: 100%;
	padding-top: 0;
}
.page-coupon-v2 .coin-shop-list .list-row > div:nth-child(4) > .btn_style {
	font-size: 1.4rem;
	line-height: 1.5;
	min-width: 15rem;
	height: unset;
	border-radius: .5rem;
	padding: 1rem;
}
.page-coupon-v2 .coin-history-table-box .box-title {
	font-size: 1.8rem;
	font-weight: bold;
	color: #555;
	margin-bottom: 2rem;
}

/* coin history table */
.page-coupon-v2 .coupon-v2-table-2,
.page-coupon-v2 .coupon-v2-table-2 * {
	box-sizing: border-box;
}
.page-coupon-v2 .coupon-v2-table-2 {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.5rem;
	background-color: #fff;
}
.page-coupon-v2 .coupon-v2-table-2 th,
.page-coupon-v2 .coupon-v2-table-2 td {
	vertical-align: middle;
	height: 100%;
	border: 1px solid #ccc;
}
.page-coupon-v2 .coupon-v2-table-2 .cell-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 1rem;
}
.page-coupon-v2 .coupon-v2-table-2 .cell-inner.j-start {
	justify-content: flex-start;
}
.page-coupon-v2 .coupon-v2-table-2 > thead > tr > th {
	background-color: #999;
	color: #fff;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td > .cell-inner {
	min-height: 7rem;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td:not(:nth-child(4)) {
	text-align: center;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td:nth-child(3) > .cell-inner {
	padding: 1rem 2rem;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td:nth-child(3) {

}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr.plus > td:nth-child(3) {
	background-color: #FFE9EF;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr.minus > td:nth-child(3) {
	background-color: #DDEFFF;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td:nth-child(3) .cell-text {
	text-align: center;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td:nth-child(3) .t--num {
	font-size: 1.8rem;
	font-weight: bold;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr.plus > td:nth-child(3) .t--num {
	color: #FF2F65;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr.minus > td:nth-child(3) .t--num {
	color: #1B91FF;
}
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td:nth-child(3) .t--note {
	color: #000;
	font-size: 1.2rem;
	margin-top: .5rem;
}
/* width control */
.page-coupon-v2 .coupon-v2-table-2 > thead > th > td:nth-child(1) > .cell-inner,
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td:nth-child(1) > .cell-inner {
	max-width: 13rem;
}
.page-coupon-v2 .coupon-v2-table-2 > thead > th > td:nth-child(2) > .cell-inner,
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td:nth-child(2) > .cell-inner {
	max-width: 23rem;
}
.page-coupon-v2 .coupon-v2-table-2 > thead > th > td:nth-child(4) > .cell-inner,
.page-coupon-v2 .coupon-v2-table-2 > tbody > tr > td:nth-child(4) > .cell-inner {
	max-width: 25rem;
}
/* check coin expiration modal */
.modal_window.dialog_check-coin-expiration {
	box-sizing: border-box;
	width: calc(100% - 2rem);
}
.dialog_check-coin-expiration .modal_inner {

}
.dialog_check-coin-expiration .area-total {

}
.dialog_check-coin-expiration .area-total .area-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.4rem;
	font-weight: bold;
	color: #555;
	padding-bottom: .5rem;
	border-bottom: 1px solid #ccc;
}
.dialog_check-coin-expiration .area-total .t--2 {
	text-align: right;
}
.dialog_check-coin-expiration .area-total .main-num {
	font-size: 2rem;
	font-weight: bold;
	color: #000;
}
.dialog_check-coin-expiration .area-title {
	text-align: left;
	color: #000;
	font-size: 1.5rem;
	padding: .5rem 1rem;
	margin-top: 2rem;
	background: #fff;
}
.dialog_check-coin-expiration .area-check-coin {
	box-sizing: border-box;
	height: calc(50vh - 12rem);
	min-height: 16.5rem;
	margin-top: 1.5rem;
	/* padding: .5rem; */
}
.dialog_check-coin-expiration .area-check-coin.purchased {
	border: 1px solid #DDDDDD;
}
.dialog_check-coin-expiration .area-check-coin.service {
	border: 1px solid #DDDDDD;
}
.dialog_check-coin-expiration .area-check-coin > .inner-scroll {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: auto;
	/* padding: .5rem; */
}
.dialog_check-coin-expiration .area-check-coin > .inner-scroll::-webkit-scrollbar {
	width: .6rem;
}
.dialog_check-coin-expiration .area-check-coin > .inner-scroll::-webkit-scrollbar-track {

}
.dialog_check-coin-expiration .area-check-coin > .inner-scroll::-webkit-scrollbar-thumb {
	border-radius: .3rem;
	background-color: rgba(0,0,0,.3);
}
.dialog_check-coin-expiration .coin-check-list {
	font-size: 1.3rem;
}
.dialog_check-coin-expiration .coin-check-list > li {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dialog_check-coin-expiration .coin-check-list > li + li {
	padding: 1rem 1.6rem 0;
}
.dialog_check-coin-expiration .coin-check-list > li:nth-child(1) {
	padding-bottom: .5rem;
	border-bottom: 1px solid #ccc;
	background: #DDDDDD;
	padding: 1.2rem 1.6rem;
}
.dialog_check-coin-expiration .area-check-coin.purchased .coin-check-list > li:nth-child(1) .title,
.dialog_check-coin-expiration .area-check-coin.purchased .coin-check-list > li:nth-child(1) .num {
	color: #000;
	font-weight: bold;
}
.dialog_check-coin-expiration .area-check-coin.service .coin-check-list > li:nth-child(1) .title,
.dialog_check-coin-expiration .area-check-coin.service .coin-check-list > li:nth-child(1) .num {
	color: #000;
	font-weight: bold;
}
.dialog_check-coin-expiration .coin-check-list .num {
	font-size: 1.5rem;
}

.fa-info-circle2 {
	width: 16px; 
	height: 16px;
	display: inline-block;
	background-image: url(../images/coupon/common/fa-info.svg);
	background-size: cover;
  }


  /* NJ-49747 START */
/* coin expiration modal */
.modal_window.dialog_check-coin-expiration-new {
    width: 34.4rem;
    height: auto;
    max-width: 100%;
    margin-left: 0 !important;
    transform: translateX(-50%);
    box-sizing: border-box;
    padding: 5.7rem 1.8rem 4.2rem;
}

.dialog_check-coin-expiration-new .coin-box {
    margin: 0 auto;
    box-sizing: border-box;
}

.dialog_check-coin-expiration-new .coin-header-cont {
    text-align: center;
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
	margin-bottom: 4.1rem;
}

.dialog_check-coin-expiration-new .coin-header-cont span {
    color: #092846;
    font-size: 2.8rem;
    margin-left: 5rem;
  
    position: relative;
}

.dialog_check-coin-expiration-new .coin-header-cont span::before {
    content: "";
    position: absolute;
    width: 2.9rem;
    height: 2.9rem;
    background-image: url(https://nativecamp-public-web-production.s3.ap-northeast-1.amazonaws.com/user/webroot/mobile/images/coin/coin.webp);
    background-repeat: no-repeat;
    background-size: contain;
    top: 55%;
    transform: translateY(-50%);
    left: -3.5rem;
}

.dialog_check-coin-expiration-new .tab-menu {
    display: flex;
    justify-content: center;
    margin-bottom: 3.1rem;
	gap: 5.7rem;
}

.dialog_check-coin-expiration-new .tab-link {
    padding-bottom: 6px;
    font-size: 1.5rem;
    font-weight: 400;
    color: #333333;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
	box-sizing: border-box;
}

.dialog_check-coin-expiration-new .tab-link:first-child {
	width: 9.5rem;
}

.dialog_check-coin-expiration-new .tab-link:last-child {
	width: 11.1rem;
}

.dialog_check-coin-expiration-new .tab-link.active {
    color: #F1890C;
    position: relative;
	font-weight: 700;
}

.dialog_check-coin-expiration-new .tab-link.active:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #F1890C;
}

.dialog_check-coin-expiration-new .tab-content {
    display: none;
    height: 20.5rem;
    box-sizing: border-box;
	overflow-y: scroll;
}

.dialog_check-coin-expiration-new .tab-content.active {
    display: block;
}

.dialog_check-coin-expiration-new .tab-info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.dialog_check-coin-expiration-new .tab-info.header-new {
    font-size: 1.6rem;
    font-weight: bold;
    color: #F1890C;
	margin-bottom: 1.3rem;
}

.dialog_check-coin-expiration-new .tab-info.small {
    font-size: 1.3rem;
    color: #666;
    border: none;
    position: relative;
    margin-bottom: 3.7rem;
}

.dialog_check-coin-expiration-new .coin-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dialog_check-coin-expiration-new .coin-item {
    display: flex;
    justify-content: space-between;
    font-size: 1.4rem;
    margin-bottom: 2.4rem;
}

.dialog_check-coin-expiration-new .coin-item:last-child {
    border-bottom: none;
}

.modal_window.dialog_check-coin-expiration-new .btn_close {
	padding-right: unset;
}
  /* NJ-49747 END */

/* NJ-59376 Start */

/* Reset and base styles */
.page_wrapper.coupon {
  font-size: 1rem;
  background-color: #FFFFFF;
  min-height: 100vh;
  padding: 2rem 1.6rem 0;
}

/* Top Navigation Tabs */
.page_wrapper.coupon .menu-coin-list {
  margin-bottom: 3.2rem;
}

.page_wrapper.coupon .menu-coin-list ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.page_wrapper.coupon .menu-coin-list li {
  position: relative;
}

.page_wrapper.coupon .menu-coin-list li a {
  display: block;
  padding: 0.4rem 0;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  color: #1F1F1F;
  line-height: 1.2;

}

.page_wrapper.coupon .menu-coin-list li a.active {
  color: #1F1F1F;
  border-top: 0.4rem solid #F1890E;
}

/* Use Coupon Button */
.page_wrapper.coupon .btn-sect {
  margin: 0 1.6rem 2.4rem;
}

.page_wrapper.coupon .btn-section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
}

.page_wrapper.coupon .btn--use-coupon {
  width: 34.3rem;
  display: block;
  background-color: #02C9A9;
  color: #FFFFFF;
  text-align: center;
  height: 4.8rem;
  line-height: 4.8rem;
  border-radius: 0.4rem;
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;

  transition: background-color 0.2s ease;
}

.page_wrapper.coupon .btn--use-coupon:hover {
  background-color: #01b893;
}

/* Sub Navigation Tabs */
.page_wrapper.coupon .tab-nav {
	display: flex;
	padding: 4rem 0 3rem;
	margin: 0 auto;
	justify-content: space-around;
}

.page_wrapper.coupon .tab-nav a {
  display: block;
  padding: 0 0 0.6rem;
  text-decoration: none;
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  color: #333333;
  line-height: 1.45;

  position: relative;
}

.page_wrapper.coupon .tab-nav a.active {
  color: #F1890E;
  font-weight: 500;
  width: auto;
}

.page_wrapper.coupon .tab-nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0.2rem;
  background-color: #F1890E;
}

/* Filter Section */
.page_wrapper.coupon .middle-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2.4rem;
}

.page_wrapper.coupon .middle-header .filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3.2rem;
  margin: 0 1.6rem;
}

.page_wrapper.coupon .coin-item:first-child {
    padding-top: 0;
}

.page_wrapper.coupon .filter {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-size: 1.4rem;
  color: #333333;
  line-height: 1.2;

}

.page_wrapper.coupon .filter img {
  width: 1rem;
  height: 0.6rem;
}

.page_wrapper.coupon .receive-all-btn {
  background-color: #F1890E;
  color: #FFFFFF;
  border: none;
  border-radius: 0.4rem;
  padding: 0.9rem 1.2rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.45;

  cursor: pointer;
  transition: background-color 0.2s ease;
}

.page_wrapper.coupon .receive-all-btn:hover {
  background-color: #e07a00;
}

/* Coupon List Items */
.page_wrapper.coupon .coin-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  border-bottom: 0.1rem solid #E0E0E0;
  padding: 1.6rem 0;
}

.page_wrapper.coupon .coin-item:last-child {
  border-bottom: none;
}

.page_wrapper.coupon .coin-item-icon .icon-circle {
	position: relative;
	top: -3.2rem;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.page_wrapper.coupon .coin-item-icon img {
  width: 2.8rem;
  height: 2.8rem;
}

.page_wrapper.coupon .coin-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.page_wrapper.coupon .coin-item-content .first-row {
  font-size: 1.3rem;
  font-weight: 500;
  color: #333333;
  line-height: 1.45;

}

.page_wrapper.coupon .coin-item-content .second-row {
  font-size: 1.3rem;
  font-weight: 400;
  color: #333333;
  line-height: 1.2;

}

.page_wrapper.coupon .coin-item-content .third-row p {
  font-size: 2.3rem;
  font-weight: 700;
  color: #333333;
  line-height: 1.87;
}
.page_wrapper.coupon .coin-item-content .third-row span {
  font-size: 1.5rem;
}
.page_wrapper.coupon .receive-button {
  flex-shrink: 0;
  padding: 0.9rem 1.2rem;
  border: none;
  background-color: #F1890E;
  color: #FFFFFF;
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 0.5;
  cursor: pointer;
  transition: background-color 0.2s ease;
  height: 3.2rem;
}

.page_wrapper.coupon .receive-button:hover {
  background-color: #e07a00;
}

.page_wrapper.coupon .receive-button.disabled {
  background-color: #F4F4F4;
  color: #CCCCCC;
  cursor: not-allowed;
}

.page_wrapper.coupon .receive-button.disabled:hover {
  background-color: #F4F4F4;
  color: #CCCCCC;
}

/* Total Coupon Section */
.page_wrapper.coupon .total-coupon-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin: 0 1.6rem 3.2rem;
}

.page_wrapper.coupon .total-coupon {
  display: flex;
}

.page_wrapper.coupon .total-icon img {
  width: 2.9rem;
  height: 1.8rem;
}

.page_wrapper.coupon .total-number {
	position: relative;
	font-size: 3.6rem;
	font-weight: 500;
	color: #092846;
	line-height: 1.22;
	left: 2rem;
}

.page_wrapper.coupon .total-coupon-section .expiry-check-button {
  text-align: center;
}

.page_wrapper.coupon .total-coupon-section .expiry-check-button a {
  font-size: 1.2rem;
  color: #3777F1;
  text-decoration: none;
  line-height: 1.2;

}

.page_wrapper.coupon .total-coupon-section .expiry-check-button a:hover {
  text-decoration: underline;
}

/* Container and layout adjustments */
.page_wrapper.coupon .coin-container {
  max-width: 37.5rem;
  margin: 0 auto;
  background-color: #FFFFFF;
}

.page_wrapper.coupon .coin-section {
  background-color: #FFFFFF;
}

/* Hide elements properly */
.page_wrapper.coupon .hide {
  display: none;
}

/* Accessibility improvements */
.page_wrapper.coupon img {
  max-width: 100%;
  height: auto;
}

/* Ensure proper semantic structure */
main.page_wrapper {
  display: block;
}

.page_wrapper.coupon nav {
  display: block;
}

.page_wrapper.coupon section {
  display: block;
}

.page_wrapper.coupon .total-number::before {
	content: "";
	position: absolute;
	width: 2.9rem;
	height: 1.7rem;
	background-image: url(https://nativecamp-public-web-production.s3.ap-northeast-1.amazonaws.com/user/webroot/images/coin/icon/coupon.svg);
	background-repeat: no-repeat;
	background-size: contain;
	top: 45%;
	transform: translateY(-50%);
	left: -3.8rem;
}
/* .page_wrapper.coupon .filter-selector {
    width: auto;
    min-width: 8.6rem;
    height: auto;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: 'Noto Sans JP', sans-serif;
} */

.page_wrapper.coupon .filter-section,
.page_wrapper.coupon .month-filter {
    position: relative;
    display: inline-block;
    min-width: 8.6rem;
}

/* Style the select */
.page_wrapper.coupon .filter-selector {
    -webkit-appearance: none; /* Remove default arrow (iOS/Safari) */
    appearance: none;
    width: 100%;
    padding: 0.4rem 2rem 0.4rem 0.5rem; /* Right padding for the arrow */
    border: none;
    background: transparent;
    color: #333;
    -webkit-text-fill-color: #333; /* Ensure color on iOS */
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    cursor: pointer;
}

/* Custom arrow on the wrapper */
.page_wrapper.coupon .filter-section::after{
    content: "";
    position: absolute;
    right: -2.4rem;
    top: 53%;
    transform: translateY(-50%);
    width: 5rem;
    height: 0.6rem;
    background-image: url(https://nativecamp-public-web-production.s3.amazonaws.com/user/webroot/images/icon/icon_arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
.page_wrapper.coupon .month-filter::after {
    content: "";
    position: absolute;
    right: -3.4rem;
    top: 53%;
    transform: translateY(-50%);
    width: 5rem;
    height: 0.6rem;
    background-image: url(https://nativecamp-public-web-production.s3.amazonaws.com/user/webroot/images/icon/icon_arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}
/*-------------------*/
/*-- Figma Design Implementation - Exact Match --*/
/*-------------------*/

/* Base styles for Figma design */
.page_wrap.page_wrapper.coupon {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #FFFFFF;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon * {
    box-sizing: border-box;
}

/* Page header */
.page_wrapper.coupon .page-header {
    padding: 0 0 1.6rem;
}

.page_wrapper.coupon .page-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1F1F1F;
    margin: 0;
    line-height: 1.45;
}

.page_wrapper.coupon .coupon-max-width {
    max-width: 34.3rem;
    margin: 0 auto;
}

/* Main coupon section */
.page_wrapper.coupon .coupon-use-section {
    background-color: #FFFFFF;
    border: 0.1rem solid #DDDDDD;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

/* Section header */
.page_wrapper.coupon .section-header {
    background-color: #EEEEEE;
}

.page_wrapper.coupon .section-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1F1F1F;
    margin: 0;
    line-height: 1.45;
}

/* Section content */
.page_wrapper.coupon .section-content {
    padding: 1.6rem  1.6rem 2.4rem;
}

/* Price breakdown */
.page_wrapper.coupon .price-breakdown {
    margin-bottom: 2.4rem;
}

/* Monthly fee group */
.page_wrapper.coupon .monthly-fee-group {
    margin-bottom: 1.6rem;
}

.page_wrapper.coupon .fee-main {
    position: relative;
    height: 4.7rem;
}

.page_wrapper.coupon .fee-label {
    position: absolute;
    left: 0;
    top: 0.7rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .fee-date {
    position: absolute;
    right: 0;
    top: 3rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    text-align: right;
}

.page_wrapper.coupon .fee-price {
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}

.page_wrapper.coupon .tax-label {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .price-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1F1F1F;
    line-height: 1.45;
}

/* Plan details */
.page_wrapper.coupon .plan-details {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    padding: 0 0 0 1.6rem;
}

.page_wrapper.coupon .plan-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_wrapper.coupon .plan-name {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .plan-price {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    text-align: right;
}

.page_wrapper.coupon .total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_wrapper.coupon .total-label {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .total-price {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}

/* Coupon section */
.page_wrapper.coupon .coupon-section {
    margin-bottom: 1.6rem;
}

.page_wrapper.coupon .available-coupons {
    position: relative;
    height: 6rem;
    border-top: 0.1rem solid #DDDDDD;
    border-bottom: 0.1rem solid #DDDDDD;
}

.page_wrapper.coupon .coupon-label {
    position: absolute;
    left: 0;
    top: 2.4rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .coupon-amount {
    position: absolute;
    right: 0;
    top: 1.7rem;
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

.page_wrapper.coupon .coupon-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1F1F1F;
    line-height: 1.45;
}

.page_wrapper.coupon .coupon-text {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

/* Form styling */
.page_wrapper.coupon .input-area {
    margin-bottom: 2.4rem;
}

.page_wrapper.coupon .input-row {
    margin-bottom: 1.6rem;
}

/* Radio button styling */
.page_wrapper.coupon .coupon-radio {
    margin-bottom: .8rem;
}

.page_wrapper.coupon .coupon-radio label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .coupon-radio .label-input {
    margin-right: 0.4rem;
}

.page_wrapper.coupon .coupon-radio input[type="radio"] {
    display: none;
}

.page_wrapper.coupon .coupon-radio .input-icon {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.1rem solid #AAAAAA;
    border-radius: 50%;
    position: relative;
    background-color: #FFFFFF;
}

.page_wrapper.coupon .coupon-radio input[type="radio"]:checked + .input-icon {
    border-color: #AAAAAA;
}

.page_wrapper.coupon .coupon-radio input[type="radio"]:checked + .input-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.2rem;
    height: 1.2rem;
    background-color: #F1890E;
    border-radius: 50%;
}

/* Input field styling */
.page_wrapper.coupon .coupon-input {
    margin-bottom: 0.6rem;
}

.page_wrapper.coupon .coupon-input input {
    text-align: end;
    width: 100%;
    height: 4rem;
    padding: 0 1.6rem;
    border: 0.1rem solid #DDDDDD;
    border-radius: 0.4rem;
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    background-color: #FFFFFF;
    line-height: 1.2;
}

.page_wrapper.coupon .coupon-input input:focus {
    outline: none;
    border-color: #F1890E;
}

.page_wrapper.coupon .coupon-input input::placeholder {
    color: #AAAAAA;
}

/* Validation tooltip styling - exact Figma match */
.page_wrapper.coupon .coupon-input-validation-scope {
    position: relative;
}

.page_wrapper.coupon .coupon-input-validation-tooltip {
    display: none;
    position: absolute;
    top: calc(100% + 1.8rem);
    left: 0;
    width: 100%;
    height: 5.2rem;
    background-color: #FFFFFF;
    border: 0.1rem solid #808080;
    border-radius: 0.4rem;
    box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.page_wrapper.coupon .coupon-input-validation-scope.on .coupon-input-validation-tooltip {
    display: block;
}

/* Tooltip arrow - matches Figma exactly */
.page_wrapper.coupon .coupon-input-validation-tooltip::before {
    content: '';
    position: absolute;
    top: -1.3rem;
    left: 1.8rem;
    width: 0;
    height: 0;
    border-left: 1.1rem solid transparent;
    border-right: 1.1rem solid transparent;
    border-bottom: 1.3rem solid #808080;
}

.page_wrapper.coupon .coupon-input-validation-tooltip::after {
    content: '';
    position: absolute;
    top: -1.1rem;
    left: 1.9rem;
    width: 0;
    height: 0;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-bottom: 1.2rem solid #FFFFFF;
}

.page_wrapper.coupon .tooltip-text {
    display: flex;
    align-items: center;
    padding: 1.7rem 1rem 1.7rem 0.9rem;
    height: 100%;
}

.page_wrapper.coupon .tooltip-text .icon {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-indent: 0;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.5rem;
    line-height: 1;
    color: #fff;
    background-color: #ffa300;
    border-radius: 0.2rem;
    margin-right: 0.5rem;
}

.page_wrapper.coupon .error-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.page_wrapper.coupon .error-list li {
    font-size: 1.3rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.15;
    margin: 0;
    padding: 0;
    display: none;
}

.page_wrapper.coupon .error-list li.coupon-use-input-error-1,
.page_wrapper.coupon .error-list li.coupon-use-input-error-2,
.page_wrapper.coupon .error-list li.coupon-use-input-error-3 {
    display: none;
}

/* Notice area */
.page_wrapper.coupon .notice-area {
  margin-bottom: 2.4rem;
}

.page_wrapper.coupon .notice-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page_wrapper.coupon .ui_notice_list[class*='listmark'] ul li {
  padding-left: 1em;
  text-indent: 0em;
}
.page_wrapper.coupon .notice-area li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 1.2rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    margin-bottom: 0.8rem;
}

.page_wrapper.coupon .notice-area li::before {
    content: '※';
    position: absolute;
    left: 0;
    top: 0;
}

/* Button area */
.page_wrapper.coupon .btn-area {
    height: 3.8rem;
}

.page_wrapper.coupon .coupon-btn-group-1 {
    display: flex;
    gap: 1.1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.page_wrapper.coupon .coupon-btn-group-1 li {
    flex: 1;
}

.page_wrapper.coupon .btn_style {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    line-height: 3.8rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.page_wrapper.coupon .btn_gray {
  background-color: #999999;
  color: #FFFFFF;
}

.page_wrapper.coupon .btn_gray:hover {
  background-color: #888888;
}

.page_wrapper.coupon .btn_next{
  background-color: #F1890E;
  color: #FFFFFF;
  cursor: pointer;
  display: flex;
  padding: 0.8125rem 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.625rem;
  border: none;
  max-width: 15rem;
  width: 100%;
  height: 3.8rem;
  border-radius: 0.4rem;
  font-size: 1.6rem;
  font-weight: 700;
}

.page_wrapper.coupon .btn_next:hover {
  background-color: #e07a00;
}

.page_wrapper.coupon .btn_next:disabled {
  background-color: #F4F4F4;
  color: #CCCCCC;
  cursor: not-allowed;
}

.page_wrapper.coupon .btn_green-2 {
    background-color: #F1890E;
    color: #FFFFFF;
}

.page_wrapper.coupon .btn_green-2:hover {
  background-color: #e07a00;
}

/* Coin purchase section - exact Figma match */
.page_wrapper.coupon .coupon-v2-use-box {
    background-color: #FFFFFF;
    border: 0.1rem solid #DDDDDD;
    margin-bottom: 4rem;
    overflow: hidden;
}

.page_wrapper.coupon .coupon-v2-use-box .box-title {
    background-color: #EEEEEE;
    padding: 0.8rem 1.6rem;
    text-align: center;
}

.page_wrapper.coupon .coupon-v2-use-box .box-title p {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1F1F1F;
    margin: 0;
    line-height: 1.45;
}

.page_wrapper.coupon .coupon-v2-use-box .box-body {
    padding: 1.6rem 1.6rem 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page_wrapper.coupon .coupon-v2-use-box .box-body p {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    margin: 0;
    text-align: left;
    margin-bottom: 2.4rem;
}

.page_wrapper.coupon .coupon-v2-use-box .btn-area {
    width: 100%;
    height: auto;
}

.page_wrapper.coupon .coupon-v2-use-box .btn-area .btn_style {
    width: 100%;
    height: auto;
    padding: 1.3rem 1.6rem;
    background-color: #F1890E;
    color: #FFFFFF;
    border: none;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.page_wrapper.coupon .coupon-v2-use-box .btn-area .btn_style:hover {
    background-color: #e07a00;
}

/* Modal container */
.modal_window.coupon-modal {
    display: none;
    border: none;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    max-width: 29.8rem;
    height: 41.9rem;
    box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.2);
}
/* Show modal */
.coupon-modal.show {
  display: block;
}

/* Modal overlay background */
.coupon-modal-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* Expiry modal specific styling - matches Figma exactly */
#coupon-expiry-modal .coupon-modal-content {
  overflow: hidden;
}

/* Modal body */
#coupon-expiry-modal .modal-body {
	height: calc(100% - 2rem);
	display: flex;
	flex-direction: column;
}

.modal_window.expiry-modal {
    max-width: 34.3rem;
    border: 3px solid #707070;
    height: 38.5rem;
}
.modal_window.receive-modal{
    height: 41.9rem;
} 
.modal_window.receive-all-modal{
    height: 38.7rem;
} 

/* Total coupon display with icon */
#coupon-expiry-modal .total-coupon-display {
	text-align: center;
	margin: 2rem 0 3.2rem;
	position: relative;
}

#coupon-expiry-modal .coupon-number {
 
  font-size: 3.6rem;
  font-weight: 500;
  color: #092846;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  margin-left: 3.7rem;
}

/* Coupon icon using ::before pseudo-element */
#coupon-expiry-modal .coupon-number::before {
  content: "";
  position: absolute;
  width: 2.9rem;
  height: 1.768rem;
  background-image: url('https://nativecamp-public-web-production.s3.ap-northeast-1.amazonaws.com/user/webroot/images/coin/icon/coupon.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  top: 50%;
  transform: translateY(-50%);
  left: -3.7rem;
}

/* Expiry content container */
#coupon-expiry-modal .coupon-expiry-content {
  flex: 1;
  overflow: hidden;
}

/* Scroll container */
#coupon-expiry-modal .scroll-container {
	height: 24.3rem;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior-block: contain;
}

/* Validity info */
#coupon-expiry-modal .validity-info {
 
  font-size: 1.3rem;
  font-weight: 400;
  color: #1F1F1F;
  line-height: 1.2;
  margin: 0 0 2.4rem 0;
  text-align: left;
}

/* Expiry header */
#coupon-expiry-modal .expiry-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.8rem;
}

#coupon-expiry-modal .expiry-header span {
 
  font-size: 1.4rem;
  font-weight: 700;
  color: #F1890E;
  line-height: 1.45;
}

/* Expiry list */
#coupon-expiry-modal .expiry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

#coupon-expiry-modal .expiry-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0.8rem;
  gap: 8.1rem;
}

#coupon-expiry-modal .expiry-list li span:first-child {
 
  font-size: 1.4rem;
  font-weight: 400;
  color: #1F1F1F;
  line-height: 1.2;
  text-align: left;
  flex: 1;
}

#coupon-expiry-modal .expiry-list li span:last-child {
 
  font-size: 1.4rem;
  font-weight: 400;
  color: #1F1F1F;
  line-height: 1.2;
  text-align: right;
  flex-shrink: 0;
}

/* Scrollbar styling for webkit browsers */
#coupon-expiry-modal .scroll-container::-webkit-scrollbar {
  width: 0.4rem;
}

#coupon-expiry-modal .scroll-container::-webkit-scrollbar-track {
  background: transparent;
}

#coupon-expiry-modal .scroll-container::-webkit-scrollbar-thumb {
  background-color: #D9D9D9;
  border-radius: 0.15rem;
}

/* Close button */
.coupon-modal .close-modal {
	position: absolute;
    top: -1.5rem;
    right: -1.3rem;
	width: 3rem;
	height: 3rem;
	background: url(https://nativecamp-public-web-production.s3.ap-northeast-1.amazonaws.com/user/webroot/images/coin/icon/modal_close-button.png) no-repeat center center;
	background-size: cover;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 10;
}
.coupon-modal .close-modal-receive {
	position: absolute;
    top: -2.5rem;
    right: -2.5rem;
    width: 5.5rem;
    height: 5.5rem;
	background: url(https://nativecamp-public-web-production.s3.ap-northeast-1.amazonaws.com/user/webroot/images/coin/icon/modal_close-button.png) no-repeat center center;
	background-size: cover;
	border: none;
	cursor: pointer;
	padding: 0;
	z-index: 10;
}
/* Receive All Modal - matches Figma design exactly */
#coupon-receive-all-modal .coupon-modal-content,
#coupon-receive-modal .coupon-modal-content {
    max-width: 29.8rem;
    padding: 0;
    border-radius: 1.2rem;
    overflow: hidden;
 
}

/* Modal header for receive-all */
#coupon-receive-all-modal .modal-header,
#coupon-receive-modal .modal-header {
  padding: 4.1rem 3.5rem 0;
  text-align: center;
}

#coupon-receive-all-modal .modal-header h2,
#coupon-receive-modal .modal-header h2  {
  font-size: 1.8rem;
  font-weight: 700;
  color: #333333;
  margin: 0;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

/* Modal body for receive-all */
#coupon-receive-all-modal .modal-body,
#coupon-receive-modal .modal-body {
  height: calc(100% - 8.7rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Teddy illustration */
#coupon-receive-modal .teddy-illustration,
#coupon-receive-all-modal .teddy-illustration{
  text-align: center;
  margin: 3.8rem 0 4.6rem;
  width: 13.9rem;
  height: 14.9rem;
}

#coupon-receive-all-modal .teddy-illustration img,
#coupon-receive-modal .teddy-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Coupon amount display */
#coupon-receive-all-modal .coupon-amount, 
#coupon-receive-modal .coupon-amount {
	text-align: center;
	font-size: 2.7rem;
	font-style: normal;
	font-weight: 700;
}

#coupon-receive-all-modal .amount-text,
#coupon-receive-modal .amount-text {
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.7rem;
	font-weight: 700;
	color: #333333;
	line-height: 1.45;
}
#coupon-receive-modal .expiry-date {
    width: 100%;
    margin: 2rem;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    color: #333;
}

/* Confirm section specific styles */
.page_wrapper.coupon .coupon-confirm-section {
    background-color: #FFFFFF;
    border: 0.1rem solid #DDDDDD;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.page_wrapper.coupon .coupon-confirm-section .section-content {
    padding: 0;
}

.page_wrapper.coupon .coupon-confirm-section .section-title-box {
    width: 100%;
    height: 3.6rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page_wrapper.coupon .coupon-confirm-section .section-title-box h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1F1F1F;
    margin: 0;
    line-height: 1.45;
}

/* Payment details section */
.page_wrapper.coupon .payment-details {
    padding: 1.6rem 1.6rem 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* Payment date */
.page_wrapper.coupon .payment-date {
    width: 31.1rem;
    height: 1.7rem;
    margin: 0 auto;
}

.page_wrapper.coupon .payment-date p {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    margin: 0;
    text-align: left;
}

/* Plan details */
.page_wrapper.coupon .payment-details .plan-details {
    width: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
    padding-left: 1.6rem;
    position: relative;
}

.page_wrapper.coupon .payment-details .plan-row {
    width: 100%;
    height: 1.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_wrapper.coupon .payment-details .plan-name {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    text-align: left;
}

.page_wrapper.coupon .payment-details .plan-price {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    text-align: right;
}

/* Total section */
.page_wrapper.coupon .total-section {
    width: 100%;
    margin: 0 auto;
}

.page_wrapper.coupon .total-section .total-row {
    width: 100%;
    height: 2.6rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    bottom: 1.7rem;
    left: 0;
}

.page_wrapper.coupon .total-section .total-label {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .total-section .total-price {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}

.page_wrapper.coupon .total-section .price-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1F1F1F;
    line-height: 1.45;
}

.page_wrapper.coupon .total-section .tax-label {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .plan-details .total-divider {
    width: 31.1rem;
    height: 0.1rem;
    background-color: #DDDDDD;
    position: absolute;
    bottom: -1.6rem;
    left: 0.1rem;
}

/* Notice section */
.page_wrapper.coupon .notice-section {
    padding: 0 1.6rem 2.4rem;
}

.page_wrapper.coupon .notice-item {
    width: auto;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 0.2rem;
}

.page_wrapper.coupon .notice-mark {
    font-size: 1.2rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    flex-shrink: 0;
}

.page_wrapper.coupon .notice-item p {
    font-size: 1.2rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    margin: 0;
    flex: 1;
}

/* Button section - exact Figma match */
.page_wrapper.coupon .button-section {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    align-items: center;
    margin-bottom: 2.4rem;
}

.page_wrapper.coupon .button-section form {
    width: 100%;
    max-width: 33.5rem;
}

.page_wrapper.coupon .button-section .btn {
    width: 100%;
    max-width: 33.5rem;
    height: auto;
    padding: 1.3rem 1.6rem;
    border: none;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: block;
}

.page_wrapper.coupon .btn-primary {
    background-color: #F1890E;
    color: #FFFFFF;
}

.page_wrapper.coupon .btn-primary:hover {
    background-color: #e07a00;
}

.page_wrapper.coupon .btn-primary.disabled {
    background-color: #CCCCCC;
    color: #999999;
    cursor: not-allowed;
}

.page_wrapper.coupon .btn-secondary {
    background-color: #999999;
    color: #FFFFFF;
}

.page_wrapper.coupon .btn-secondary:hover {
    background-color: #888888;
}

/* Back link section */
.page_wrapper.coupon .back-link-section {
    padding: 0 2rem 4rem;
    text-align: center;
}

.page_wrapper.coupon .back-link {
    font-size: 1.4rem;
    font-weight: 400;
    color: #3777F1;
    line-height: 1.2;
    text-decoration: none;
}

.page_wrapper.coupon .back-link:hover {
    text-decoration: underline;
}

/*-------------------*/
/*-- Coupon Complete Page - Figma Design --*/
/*-------------------*/

/* Completion message */
.page_wrapper.coupon .completion-message {
    padding: 0 0 1.6rem;
}

.page_wrapper.coupon .completion-message p {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    margin: 0;
    text-align: left;
}

/* Complete section specific styles */
.page_wrapper.coupon .coupon-complete-section {
    background-color: #FFFFFF;
    border: 0.1rem solid #DDDDDD;
    margin-bottom: 2.4rem;
    overflow: hidden;
}
.page_wrapper.coupon .coupon-use-section .section-header,
.page_wrapper.coupon .coupon-v2-use-box .section-header{
    width: 100%;
    margin-bottom: 1.6rem;
}
.page_wrapper.coupon .coupon-complete-section .section-title-box,
.page_wrapper.coupon .coupon-use-section .section-title-box,
.page_wrapper.coupon .coupon-v2-use-box .section-title-box {
    width: 100%;
    height: 3.6rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.page_wrapper.coupon .coupon-complete-section .section-title-box h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1F1F1F;
    margin: 0;
    line-height: 1.45;
}

/* Complete page payment details - same as confirm but with adjusted spacing */
.page_wrapper.coupon .coupon-complete-section .payment-details {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.page_wrapper.coupon .coupon-complete-section .payment-date {
    width: 31.1rem;
    height: 1.7rem;
    margin: 0 auto;
}

.page_wrapper.coupon .coupon-complete-section .payment-date p {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    margin: 0;
    text-align: left;
}

.page_wrapper.coupon .coupon-complete-section .plan-details {
    width: auto;
    padding: 0 0 0 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    position: relative;;
}

.page_wrapper.coupon .coupon-complete-section .plan-row {
    width: 100%;
    height: 1.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page_wrapper.coupon .coupon-complete-section .plan-name {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    text-align: left;
}

.page_wrapper.coupon .coupon-complete-section .plan-price {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
    text-align: right;
}

.page_wrapper.coupon .coupon-complete-section .total-section {
    width: 100%;
    margin: 0 auto;
}

.page_wrapper.coupon .coupon-complete-section .total-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: .9rem;
}

.page_wrapper.coupon .coupon-complete-section .total-label {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .coupon-complete-section .total-price {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
}

.page_wrapper.coupon .coupon-complete-section .price-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1F1F1F;
    line-height: 1.45;
}

.page_wrapper.coupon .coupon-complete-section .tax-label {
    font-size: 1.4rem;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 1.2;
}

.page_wrapper.coupon .coupon-complete-section .total-divider {
    width: 31.1rem;
    height: 0.1rem;
    background-color: #DDDDDD;
    position: absolute;
    bottom: -1rem;
    left: -0.1rem;
}

/* Complete page button section */
.page_wrapper.coupon .button-section-complete {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_wrapper.coupon .btn-complete {
    width: 33.5rem;
    height: 3.8rem;
    background-color: #F1890E;
    color: #FFFFFF;
    border: none;
    border-radius: 0.4rem;
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    line-height: 5.4rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_wrapper.coupon .btn-complete:hover {
    background-color: #e07a00;
}

/*-------------------*/
/*-- Empty State Styling - Figma Design --*/
/*-------------------*/

/* Empty state container */
.page_wrapper.coupon .empty-state-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.page_wrapper.coupon .empty-state-message {
    font-size: 1.4rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.2;
    text-align: center;
    margin: 0;
}

/* Ensure proper spacing when empty state is shown */
.page_wrapper.coupon .content-list-wrapper .empty-state-container {
    width: 100%;
    margin-top: 0;
}

/* Hide receive all button when no coupons available */
.page_wrapper.coupon .empty-state-container ~ .middle-header .receive-all-btn {
    display: none;
}

/* History filter section */
.page_wrapper.coupon .history-filter-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 2.4rem;
}

/* History items list */
.page_wrapper.coupon .history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
    border-bottom: 0.1rem solid #E0E0E0;
    gap: 1.6rem;
}
.page_wrapper.coupon .history-item:first-child {
    padding-top: 0;
}
.page_wrapper.coupon .history-item:last-child {
    border-bottom: none;
}

.page_wrapper.coupon .history-content {
    flex: 1;
    display: flex;
    gap: 1.5rem;
}

.page_wrapper.coupon .history-date {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.2;
}

.page_wrapper.coupon .history-description {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #333333;
    line-height: 1.2;
}

.page_wrapper.coupon .history-amount {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.45;
    flex-shrink: 0;
    text-align: right;
}

.page_wrapper.coupon .history-amount.plus {
    color: #FF2F65;
}

.page_wrapper.coupon .history-amount.minus {
    color: #1A91FF;
}

/* Tab switching functionality */
.page_wrapper.coupon .content-list-wrapper.hide {
    display: none;
}

.page_wrapper.coupon .content-list-wrapper.history-tab {
    display: block;
}

.page_wrapper.coupon .content-list-wrapper.history-tab.hide {
    display: none;
}

.hide_use_coupon {
    display: none !important;
}

.loading-spinner .spinner {
border: .3rem solid #f3f3f3;
border-top: .3rem solid #555;
border-radius: 50%;
width: 2.4rem
height: 2.4rem;
animation: spin 0.8s linear infinite;
margin: 0 auto;
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.page_wrapper.coupon .coupon-input input.disabled {
    border: 1px solid #ccc; 
    color: #ccc;             
    cursor: not-allowed;
    pointer-events: none;   
    opacity: 0.5;       
}

html[lang="pt-BR"] #coupon-receive-modal .modal-header{
   padding: 3.1rem 3.5rem 0;
}
/* NJ-59376 END */