main.taiwan-inbound {
	h2,h3 {
		text-wrap: auto;
	}
	& .keyv-area {
		background-image: url('/assets/img/mv_taiwan.webp');
		& h1 {
			font-family: var(--font-jp);
			font-size: 3.75rem;
			font-weight: 700;
			&:lang(en) {
				font-family: var(--font-en);
				font-weight: 600;
			}
			@media screen and (max-width: 820px) {
				font-size: var(--21px);
			}
		}
	}
	
	
	& .main-content-area {
		width: calc(100% - 60px);
		margin: 0 auto;
		background-color: #e5f2ff;
		color: var(--color-dark-gray);
		position: relative;
		@media screen and (max-width: 820px) {
			width: calc(100% - (40 / var(--calc)));
			background-color: #ffffff;
		}
		& .main-content-inner {
			padding: 50px 0 100px;
			width: 100%;
			margin: 0;
			background-color: #e5f2ff;
			@media screen and (max-width: 820px) {
				padding: calc(65 / var(--calc)) 0 calc(80 / var(--calc));
				background-color: #ffffff;
			}
			& .main-title-group {
				width: calc(100% - var(--header-gaps));
				max-width: 1240px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				@media screen and (max-width: 820px) {
					width: max-content;
					flex-direction: column;
				}
				& .main-title {
					width: 50%;
					@media screen and (max-width: 820px) {
						width: 100%;
					}
					& span {
						display: block;
						width: max-content;
						color: var(--color-blue);
						font-size: 2.625rem;
						font-weight: 800;
						letter-spacing: 0.05em;
						line-height: 1;
						text-align: center;
						margin: auto;
						padding: 32px 20px;
						border-block: 1px solid var(--color-blue);
						@media screen and (max-width: 820px) {
							margin: 0 auto;
							font-size: var(--17px);
							padding: var(--21px) var(--30px);
						}
					}
				}
				& .img-wrapper {
					width: 50%;
					& img {
						display: block;
						width: min(64%, 395px);
						margin-left: auto;
					}
				}
			}
		}
		& .content {
			width: calc(100% - var(--header-gaps));
			max-width: 1440px;
			margin: 50px auto 0;
			padding: 100px 100px 65px;
			background-color: #ffffff;
			box-shadow: 0px 0px 10px 0px rgba(0, 76, 129, 0.1);
			position: relative;
			& + .content {
				margin-top: 80px;
			}
			@media screen and (max-width: 820px) {
				width: calc(100% - var(--header-gaps));
				max-width: var(--container-width);
				margin-top: calc(70 / var(--calc));
				padding: 0;
				box-shadow: none;
				& + .content {
					margin-top: calc(110 / var(--calc));
				}
			}
			& .content-title-group {
				@media screen and (max-width: 820px) {
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: calc(30 / var(--calc));
					margin-top: calc(70 / var(--calc));
				}
			}
			& .content-num {
				position: absolute;
				background-color: var(--color-blue);
				color: #ffffff;
				font-family: var(--font-en);
				font-size: var(--20px);
				font-weight: 600;
				letter-spacing: 0.05em;
				line-height: 1;
				padding: 8px 15px 8px 30px;
				top: 30px;
				left: -15px;
				& span {
					margin-left: 0.2em;
					font-size: var(--24px);
				}
				@media screen and (max-width: 820px) {
					position: relative;
					font-size: var(--21px);
					padding: 0.4rem 0.78rem;
					inset: 0;
					& span {
						font-size: var(--25px);
					}
				}
			}
			& .content-title {
				color: var(--color-blue);
				font-size: 2rem;
				font-weight: 900;
				letter-spacing: 0.05em;
				width: max-content;
				padding-bottom: 10px;
				border-bottom: 1px solid var(--color-blue);
				@media screen and (max-width: 820px) {
					font-size: var(--20px);
					line-height: 1.5;
					text-align: center;
					width: 100%;
					padding-bottom: calc(20 / var(--calc));
				}
			}
			& .content-text {
				margin-top: 22px;
				color: var(--color-dark-gray);
				font-size: var(--16px);
				font-weight: 500;
				line-height: 2;
				@media screen and (max-width: 820px) {
					margin-top: calc(33 / var(--calc));
					color: #666666;
					font-size: var(--14px);
					font-weight: 500;
					line-height: 1.72;
				}
			}
		}
		& .flex-wrapper {
			justify-content: space-between;
			margin-top: 48px;
			&:has(.w33) {
				justify-content: space-around;
			}
			@media screen and (max-width: 820px) {
				margin-top: calc(46 / var(--calc));
				&:has(.w33) {
					justify-content: space-between;
				}
			}
		}
		& .flex-item.w25 {
			width: calc(25% - 30px);
			@media screen and (max-width: 820px) {
				& + .flex-item.w25 {
					margin-top: calc(45 / var(--calc));
				}
			}
		}
		& .flex-item.w33 {
			width: 27.18%;
			@media screen and (max-width: 820px) {
				width: calc(370 / var(--calc));
				margin-inline: auto;
				& + .flex-item.w33 {
					margin-top: calc(30 / var(--calc));
				}
			}
		}
		& .flex-item.w40 {
			width: 36.7%;
			@media screen and (max-width: 820px) {
				& + .flex-item.w60 {
					margin-top: calc(75 / var(--calc));
				}
			}
		}
		& .flex-item.w50 {
			width: calc(50% - 50px);
			@media screen and (max-width: 820px) {
				& + .flex-item.w50 {
					margin-top: calc(75 / var(--calc));
				}
			}
		}
		& .flex-item.w60 {
			width: 54%;
			@media screen and (max-width: 820px) {
				& + .flex-item.w40 {
					margin-top: calc(75 / var(--calc));
				}
			}
		}
		@media screen and (max-width: 820px) {
			& .flex-item.w25,
			& .flex-item.w40,
			& .flex-item.w50,
			& .flex-item.w60 {
				width: 100%;
			}
		}
	}

	& .contact-btn-area {
		width: 100%;
		max-width: 546px;
		margin: 40px auto 0;
		line-height: 1;
		@media screen and (max-width: 820px) {
			max-width: var(--container-width);
			margin: calc(95 / var(--calc)) auto 0;
			line-height: 1.357;
		}
		& .btn.secondary-btn:lang(en) {
			font-weight: 700;
		}
	}

	& .notes {
		color: var(--color-dark-gray);
		font-size: var(--12px);
		font-weight: 500;
		text-align: left;
		margin-top: 1.5em;
		@media screen and (max-width: 820px) {
			font-size: var(--10px);
		}
	}

	& .more-arrow {
		position: relative;
		&::before {
			content: "";
			display: block;
			position: absolute;
			width: 100%;
			height: 201px;
			clip-path: polygon(0 0, 100% 0, 50% 100%);
			background-color: #e5f2ff;
			left: 0;
			top: calc(100% - 1px);
			@media screen and (max-width: 820px) {
				height: calc(80 / var(--calc) + 1px);
				background-color: #ffffff;
			}
		}
		& .more-arrow-text {
			color: var(--color-blue);
			font-size: 2.625rem;
			font-weight: 700;
			letter-spacing: 0.05em;
			line-height: 1.6;
			text-align: center;
			@media screen and (max-width: 820px) {
				font-size: var(--20px);
				line-height: 1.5;
			}
		}
	}
	
	& .bg-gradient {
		background: url('/assets/img/tte/bg-gradient.webp');
		background-size: cover;
		padding: 300px 0 135px;
		width: 100%;
		margin: 0;
		@media screen and (max-width: 820px) {
			padding: calc(170 / var(--calc)) 0 calc(165 / var(--calc));
		}
		& .content.bnr {
			max-width: var(--container-width);
			background-color: #ffffff;
			padding: 40px;
			& a {
				text-decoration: none;
			}
			@media screen and (max-width: 820px) {
				padding: calc(40 / var(--calc));
			}
		}
		& .bnr-inner {
			display: flex;
			@media screen and (max-width: 820px) {
				flex-direction: column-reverse;
			}
		}
		& .bnr-img-wrapper {
			width: 50%;
			@media screen and (max-width: 820px) {
				width: 100%;
			}
		}
		& .bnr-text-wrapper {
			width: 50%;
			background-color: var(--color-blue);
			color: #ffffff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			& .bnr-title {
				font-size: var(--36px);
				font-weight: 700;
				letter-spacing: 0.05em;
				line-height: 1.625;
				text-align: center;
				& span {
					display: block;
					font-family: var(--font-en);
					font-size: var(--22px);
					font-weight: 600;
				}
			}
			& .bnr-text {
				width: 360px;
				margin-top: 16px;
				font-feature-settings: "palt";
				font-size: var(--16px);
				font-weight: 500;
				line-height: 2;
				text-align: center;
			}
			& .bnr-btn {
				width: 240px;
				min-height: 46px;
				border: 2px solid #ffffff;
				border-radius: 92px;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 32px;
				background-color: #ffffff;
				color: var(--color-blue);
				font-size: var(--16px);
				font-weight: 700;
				transition: var(--transition-timing) ease;
				&:hover {
					background-color: transparent;
					color: #ffffff;
				}
			}
			@media screen and (max-width: 820px) {
				width: 100%;
				& .bnr-title {
					font-size: var(--18px);
					line-height: 1.39;
					margin-top: calc(65 / var(--calc));
					& span {
						font-size: var(--11px);
					}
				}
				& .bnr-text {
					width: calc(100% - (90 / var(--calc)));
					margin-top: 1em;
					font-size: var(--10px);
				}
				& .bnr-btn {
					width: calc(240 / var(--calc));
					min-height: calc(46 / var(--calc));
					border-radius: calc(46 / var(--calc));
					margin-block: calc(25 / var(--calc)) calc(65 / var(--calc));
					font-size: var(--10px);
				}
			}
			@media screen and (min-width: 821px) and (max-width: 1200px) {
				& .bnr-title {
					font-size: var(--30px);
					& span {
						display: block;
						font-family: var(--font-en);
						font-size: var(--20px);
						font-weight: 600;
					}
				}
				& .bnr-text {
					width: calc(100% - 10px);
					margin-top: 16px;
					font-feature-settings: "palt";
					font-size: var(--16px);
					font-weight: 500;
					line-height: 2;
					text-align: center;
				}
			}
		}
	}
}