/* btn-common
---------------------------*/
.btn-common a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.btn-common[data-color="white"] {
	color: #fff;
}

.btn-common[data-color="white"] .btn-common__txt::after {
	background-color: #fff;
}

.btn-common[data-color="white"] .btn-common__photo {
	border: 1px solid #fff;
}

.btn-common__txt {
	font-size: 14px;
	border-bottom: 1px solid var(--gray);
	transition: .3s;
	position: relative;
}

.btn-common__txt::after {
	position: absolute;
	bottom: -1px;
	left: 0;
	transform: scaleX(0);
	transform-origin: center left;
	width: 100%;
	height: 1px;
	background-color: var(--green);
	content: '';
	transition: transform .3s ease;
}

.btn-common__photo {
	border: 1px solid var(--black);
	border-radius: 4px;
	padding: 4px;
	transition: .3s;
	display: inline-flex;
}

.btn-common__arrow {
	transition: .3s;
}

.btn-common__arrow--hover {
	display: none;
	transition: .3s;
}

.btn-common a:hover {
	color: var(--green);
}

.btn-common a:hover .btn-common__txt::after {
	transform: scaleX(1);
}

.btn-common a:hover .btn-common__photo {
	background: var(--green);
	border: 1px solid var(--green);
	border-radius: 28px;
}

.btn-common a:hover .btn-common__arrow {
	display: none;
}

.btn-common a:hover .btn-common__arrow--hover {
	display: block;
}

.btn-common[data-color="white"] a:hover {
	color: #fff;
}

.btn-common[data-color="white"] a:hover .btn-common__photo {
	background: #fff;
	border: 1px solid #fff;
}


/* btn-download
---------------------------*/
.btn-download {
	a {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
	}
}

.btn-download__txt {
	font-size: 14px;
	border-bottom: 1px solid var(--gray);
	transition: .3s;
	position: relative;

	&::after {
		position: absolute;
		bottom: -1px;
		left: 0;
		transform: scaleX(0);
		transform-origin: center left;
		width: 100%;
		height: 1px;
		background-color: var(--green);
		content: '';
		transition: transform .3s ease;
	}
}

.btn-download__photo {
	transition: .3s;
}

.btn-download__arrow {
	transition: .3s;
}

.btn-download__arrow--hover {
	display: none;
	transition: .3s;
}

.btn-download {
	a {
		&:hover {
			color: var(--green);

			.btn-download__txt {
				&::after {
					transform: scaleX(1);
				}
			}

			.btn-download__photo {
				transform: translateY(3px);
			}

			.btn-download__arrow {
				display: none;
			}

			.btn-download__arrow--hover {
				display: block;
			}
		}
	}
}

/* btn-card
---------------------------*/
.btn-card a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	border: 1px solid var(--gray);
	background: white;
	border-radius: 4px;
	transition: .3s;
	padding: 23px 24px;
}

.btn-card a:hover {
	color: var(--green);
	background: var(--green-light);
	border: 1px solid var(--green);
}

@media (max-width: 767px) {
	.btn-card a {
		padding: 16px 12px;
		font-size: .875rem;
	}

	.page-template-page-ir_m_plan .btn-card a {
		height: 55px;
	}
}


/* btn-list
---------------------------*/
.btn-list {
	@media (min-width: 768px) {
		width: 100%;

		a {
			padding-bottom: 16px;
			margin-bottom: 1.43em;
			/* (40 / 28)=1.43 */
			position: relative;
			display: flex;
			align-items: center;

			&:before {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 1px;
				background: var(--gray-100);
			}

			&:after {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				width: 40px;
				height: 1px;
				background: var(--gray);
				transition: .3s;
			}

			&:hover {
				color: var(--green);

				&::after {
					background: var(--green);
				}

				.btn-list__arrow {
					display: none;
				}

				.btn-list__arrow--hover {
					display: block;
				}
			}
		}

		.btn-list__arrow {
			transition: .3s;
		}

		.btn-list__arrow--hover {
			display: none;
			transition: .3s;
		}
	}

	@media (max-width: 767px) {
		position: relative;
		background: var(--gray-300);
		border: 1px solid var(--gray-100);
		padding: .5rem 1.5rem .5rem 1rem;
		border-radius: .25rem;

		&::after {
			transform: translateY(-50%) rotate(45deg);
			width: 6px;
			height: 6px;
			margin-left: 8px;
			border-bottom: 2px solid var(--black);
			border-right: 2px solid var(--black);
			content: '';
			transition: transform .3s;
			position: absolute;
			right: 1em;
			top: 50%;
		}
	}
}

/* btn-bnr
---------------------------*/
.btn-bnr {
	position: relative;

	&:before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(9, 6, 37, 0) 0%, rgba(9, 6, 37, 0) 75%, rgba(9, 6, 37, 1) 100%);
		transition: .3s;
	}
}

.btn-bnr__wrap {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	width: calc(100% - 2rem);
}

.btn-bnr__txt {
	color: #fff;
	border-bottom: 1px solid var(--gray);
	transition: .3s;
	position: relative;

	&::after {
		position: absolute;
		bottom: -1px;
		left: 0;
		transform: scaleX(0);
		transform-origin: center left;
		width: 100%;
		height: 1px;
		background-color: #fff;
		content: '';
		transition: transform .3s ease;
	}
}

.btn-bnr__photo {
	border: 1px solid #fff;
	border-radius: 4px;
	padding: 7px 6.5px;
	transition: .3s;
}

.btn-bnr__arrow {
	transition: .3s;
}

.btn-bnr__arrow--hover {
	display: none;
	transition: .3s;
}

.btn-bnr {
	&:hover {
		&::before {
			background-image: linear-gradient(180deg, rgba(4, 95, 56, 0), rgba(4, 95, 56, 0.5));
		}

		color: var(--green);

		.btn-bnr__txt {
			&::after {
				transform: scaleX(1);
			}
		}

		.btn-bnr__photo {
			background: var(--green);
			border: 1px solid var(--green);
			border-radius: 28px;
		}

		.btn-bnr__arrow {
			display: none;
		}

		.btn-bnr__arrow--hover {
			display: block;
		}
	}
}

/* btn-bnr-common
---------------------------*/
.btn-bnr-common {
	position: relative;
	display: block;
	transition: .3s;
}

.btn-bnr-common p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 100%;
}

.btn-bnr-common:hover {
	filter: brightness(110%);
}


/* btn-bnr-card
---------------------------*/
.btn-bnr-card__wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.btn-bnr-card__txt {
	font-size: 14px;
	border-bottom: 1px solid var(--gray);
	transition: .3s;
	position: relative;

	&::after {
		position: absolute;
		bottom: -1px;
		left: 0;
		transform: scaleX(0);
		transform-origin: center left;
		width: 100%;
		height: 1px;
		background-color: var(--green);
		content: '';
		transition: transform .3s ease;
	}
}

.btn-bnr-card__photo {
	border: 1px solid var(--black);
	border-radius: 4px;
	padding: 4px;
	transition: .3s;
	display: inline-flex;
}

.btn-bnr-card__img {
	transition: .3s;
	width: 120px;

	img {
		aspect-ratio: 1/1;
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 4px 0 0 4px;
	}
}

.btn-bnr-card__arrow {
	transition: .3s;
}

.btn-bnr-card__arrow--hover {
	display: none;
	transition: .3s;
}

a.btn-bnr-card {
	&:hover {
		color: var(--green);

		.btn-bnr-card__txt {
			&::after {
				transform: scaleX(1);
			}
		}

		.btn-bnr-card__photo {
			background: var(--green);
			border: 1px solid var(--green);
			border-radius: 28px;
		}

		.btn-bnr-card__arrow {
			display: none;
		}

		.btn-bnr-card__arrow--hover {
			display: block;
		}

		.btn-bnr-card__img {
			filter: brightness(110%);
		}
	}
}

@media (max-width: 1023px) {
	.btn-bnr-card__img {
		width: 100%;

		img {
			aspect-ratio: 2/1;
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: 4px 4px 0 0;
		}
	}
}

/* btn-li
---------------------------*/
.btn-li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--gray);
	background: white;
	transition: .3s;
	padding: 16px;

	&:hover {
		color: var(--green);
		background: var(--green-light);
		border-bottom: 1px solid var(--green);
	}

	@media (max-width: 767px) {
		padding: 16px 12px;
		font-size: .875rem;
	}

	&:hover {
		.btn-li__arrow {
			display: none;
		}

		.btn-li__arrow--hover {
			display: block;
		}
	}
}

.btn-li__arrow {
	transition: .3s;
}

.btn-li__arrow--hover {
	display: none;
	transition: .3s;
}

/* btn-lg
---------------------------*/
.btn-lg {
	max-width: 450px;
	width: 100%;
	margin: 0 auto;
}

.btn-lg a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	background: #fff;
}

.btn-lg[data-color="white"] a {
	background: var(--green);
	color: #fff;
}

.btn-lg[data-color="white"] .btn-lg__photo {
	border: 1px solid #fff;
	background: #fff;
}

.btn-lg__txt {
	font-size: 1.125rem;
	transition: .3s;
	position: relative;
}

.btn-lg__photo {
	border: 1px solid var(--green);
	border-radius: 4px;
	padding: 7px 6.5px;
	transition: .3s;
	display: inline-flex;
}

.btn-lg__arrow {
	transition: .3s;
}

.btn-lg__arrow--hover {
	display: none;
	transition: .3s;
}

.btn-lg a:hover .btn-lg__photo {
	border: 1px solid #fff;
	background: var(--green) !important;
	border-radius: 28px;
}

.btn-lg a:hover .btn-lg__arrow {
	display: none;
}

.btn-lg a:hover .btn-lg__arrow--hover {
	display: block;
}

.btn-lg[data-color="white"] a {
	background: transparent !important;
}

.btn-lg[data-color="white"] a:hover .btn-lg__photo {
	background: #fff;
	border: 1px solid #fff;
}

@media (max-width: 767px) {
	.btn-lg {
		max-width: 330px;
	}

	.btn-lg__txt {
		font-size: 1rem;
	}

	.btn-lg__photo {
		padding: 6px 5.5px;
	}
}

/* btn-product
---------------------------*/
.btn-product {
	width: 100%;
}

.btn-product a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 13px 0;
	width: 100%;
}

.btn-product__txt {
	font-size: 14px;
	color: var(--green);
	transition: .3s;
	position: relative;
}

.btn-product__photo {
	border: 1px solid var(--green);
	border-radius: 4px;
	padding: 4px;
	transition: .3s;
	display: inline-flex;
}

.btn-product a:hover {
	background: var(--green);
}

.btn-product a:hover .btn-product__txt {
	color: #fff;
}

.btn-product a:hover .btn-product__photo {
	background: #fff;
	border: 1px solid #fff;
	border-radius: 28px;
}

@media (max-width: 425px) {
	.btn-product a {
		gap: 5px;
	}

	.btn-product__txt {
		font-size: 12px;
	}
}

.ir-contact {
	&:hover {
		.multiply {
			opacity: 0.4;
		}

		color: var(--green);

		.btn-common__txt {
			&::after {
				transform: scaleX(1);
			}
		}

		.btn-common__photo {
			background: var(--green);
			border: 1px solid var(--green);
			border-radius: 28px;
		}

		.btn-common__arrow {
			display: none;
		}

		.btn-common__arrow--hover {
			display: block;
		}
	}
}