/* ---------- ヨーロッパ鉄道ご購入までの流れページ・冒頭部分 ---------- */
.intro-lead {
	text-align: center;
}
.intro-panels {
	display: grid;
}
.intro-panel {
	background-color: #F2F5FC;
	border-block-start-style: solid;
	&.-online {
		border-block-start-color: #2E94CC;
	}
	&.-manual {
		border-block-start-color: #FF6C00;
	}
}
.intro-panel-title {
	font-weight: bold;
	color: #003366;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	&::before {
		content: "";
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}
	&.-online::before {
		background-image: url("data:image/webp;base64,UklGRqwBAABXRUJQVlA4TJ8BAAAvX8AXEBY4tm0tTzLJzCeVG3znYhU904y9PC7u7sR7Rm0kOY4ujnvl2F1156iRJEfiT+VIeJ+xfu99UA6OAAAEomzbNqY2tzVp48S5J9Ts+oA/0OgaPTXZvLvJxgQ83qJbm4+I4tsEQwBFTaoFadaPkI4LuigvHcXwDD5NghfprJYo+wsXUfKxS/9WFeEIsPICNgH1/UKV/XiRfjreadO1rhtrPiy9Cc8GwcfQvOWRE0XlRE6DouxsaKFHg3RwP2xGWIG+QbSYjdFLmH4eEjc7V/KpjucfQlRzI2ovpjh5vzAshl7c/G+PJqjJdu+XTnic25U9kME2Uf/9qMFlbhi69e+HdgI9I/9rblmYlBKP6bighZL05Un2U6wy+CfCiOo4gHm45q7/S4ZIZfyBQ4QPerQ1Fz0B3+Pj4z6DTprNjUPH3X70j7rfZKg3t47qRw8mLY59JxF6gUneC2XRyzzpTjd6YJK59DrP+hiYJe/5jz9DYBroMcvplR7EUHAHVffykIhmL+/GsTdoiovw8eCb2UoeFDW+x+DXM/Ifb78FAA==");
	}
	&.-manual::before {
		background-image: url("data:image/webp;base64,UklGRvoEAABXRUJQVlA4TO0EAAAvS8ASEM/mIJJkV+l9jxzU4F8SEuCF+yLmP2DHtts2GjzwOcd/N+TW3JuLcAF5IwbCg9m0bciatuobGvbhb33nL00xu2BTXbEIBvkKBiHbpvklK80RwgCMCgRggOXgcBBzCHDmzAFzHEDIYMsAGAAYA2eGA4hheHEADjAMO4IAjmEQY2AYKER51oEyhCG6gmiE0KFHIRJRBwLBN02XgkT8Iorg72/wh2i+mfhnohDFRCGSRINIRJIByG+A20C+B3bLSILgFIhPRESHl0BfZ3aDEGLHHIKfO1E/DCKJwZnjcRiu3YU76G/bfzayslsM17vN6WTWtm3b1hjdbd9BBj2etW1jdOy1bXvffyffTb/5Zs7vEf2fAP5vNuukYhMVbvaf9m0B1Cz+YWr/BEcSe2VC7QXPbskL7ob6I/yyEtYVuACjJHlGwpq+90HnP1Ss7T0+14JDmpQ7ABDZrlPdhpsKAKwypGyyDA1S5ev7AWCJR8IbAJhIxf+ZDwAdJGwDEP5dNf5RBOBEbA1zAcyk8he/B7A1NqMUQD/1OB3AothalwDo7oIRALJia2W65DAA1EFXBpzU64ymOYis1euId+UAMPOcoGXIXa9zIFyUbGHvchvBLl26dLlg6dxF+t8xpOZD/PVVAU/ZSAKAu5Z0SN9u7898iDe0ZLdzFvZ0zyyIF7fSeuQvaGzhqZ/dki1KS9Fem8CKgOXLejQajd63rIlK/2Svr2C9wVOrYAKbG9liYmJioseSKN9nL3i4GFjfVjtdivLnz0uxOWBLZQE5LJxmaDUm0FtjbSlWNHaV50wKT5sAQk/I58CCc24itVOlsOY90dh9NeYkuetzoQChX8maEJYHRPUMwzASLS0M6YHY6BkkQqiarAI2JwmSTNM0qyzLTek7JdA7JCxA9ClZCczUBQBw15IO6dtl0L8vLED+W401ZVib7Cb6h4hg1pDViCzU3UTvkSIBopXkXWCGTsbHx8dfssTL/0oS/cOLBCj/ReOzfCxMpsoxURsoQvgV+QyRtbqb6DsaFiD3A3kXmHnOTfQMKxYg95XG6jIsauEm8rAI4V/IGmBlkquCxwoEKK8kK4E552z892OGzPGOMDi0WIBojcZu5VjQ+EsNQ5C53RlyaIEA5luydjVWBFwVPCZC/lOyO7C5kZsYPFwsQLRS4/NSbA4I6rWW+q9j5LCwAOZ7jbWlWNHY4rATnqMihJ6Qz4EF51zi00jSN7BIgLwn2vM87EhySauDQZLUPhcKEDqbG1miU/e7wzxgoWeQCMDshkxNa+cSHLDQOyQsmnKOrTbgnltw4BJJ+veFAUTmX2PKYmBkTFqL9i9t75KHrhb6hwCYH08jDcA3Me3JhkRJ3QX0Himaco1t18Pa3t75zZC50Rn6j5yjsR7Cx7Y8kyCz4rKkn75AMiUN4nG2qiCzQqec9I92/ho8T7TY1n4ZGy9TErrbIdm8z9h52SiOt7NLwpo2VET4YtJDO9tjS9OpVIyxbUhl3bG4FeuOtBTKbl0CoFKteQalN8gHcFyp+Zcp/2I2gMkqLQvQya0ACn9TZ36Ajr4BgK3KzLtMh+cCwCG/GmkGne5pKRgTr8LiFDpefzSs3w1/0rG99C2CDa2o4I2lESiZlkolr09QYo1OReMeZTm3sQ3V9QzcnF3gSMVlKu3/T//jtvzaBNb5AA==");
	}
}
.intro-panel-lead {
	text-align: center;
	border-block-end: 1px dashed #C9C9C9;
}
.intro-step-list {
	display: flex;
	flex-direction: column;
	border-inline-start: 2px solid #d0d0d0;
	counter-reset: intro-step;
}
.intro-step-item {
	counter-increment: intro-step;
	position: relative;
	&::before {
		content: counter(intro-step);
		position: absolute;
		font-weight: bold;
		background-color: #fff;
		border: 2px solid;
		border-radius: 50%;
		display: grid;
		place-items: center;
		aspect-ratio: 1;
	}
	&.-online::before {
		color: #2E94CC;
	}
	&.-manual::before {
		color: #FF6C00;
	}
}
.intro-step-title {
	font-weight: bold;
}
.intro-buttons {
	display: grid;
}
.intro-button {
	font-weight: bold;
	border-radius: 6px;
	display: grid;
	place-content: center;
	&.-online1 {
		background-color: #fff;
		color: #0088cc;
		border: 2px solid;
		box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	}
	&.-online2 {
		color: #fff;
		background-color: #0088cc;
		box-shadow: 0 4px 0 #006699;
	}
	&.-manual1 {
		background-color: #fff;
		color: #f39c12;
		border: 2px solid;
		box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	}
	&.-manual2 {
		color: #fff;
		background-color: #f39c12;
		box-shadow: 0 4px 0 #d35400;
	}
}
@media (width < 768px) {
	.intro-lead {
		line-height: 24px;
		margin-block-start: 70px;
	}
	.intro-panels {
		gap: 40px;
		margin-block-start: 55px;
	}
	.intro-panel {
		border-radius: 5px;
		border-block-start-width: 5px;
		box-shadow: 0 1.5px 3px hsl(0, 0%, 0%, 0.15);
		padding-inline: 11px;
		padding-block-start: 32px;
		padding-block-end: 38px;
	}
	.intro-panel-title {
		font-size: 24px;
		line-height: 36px;
		gap: 13px;
		&.-online::before {
			inline-size: 48px;
			block-size: 48px;
		}
		&.-manual::before {
			inline-size: 38px;
			block-size: 38px;
		}
	}
	.intro-panel-lead {
		line-height: 24px;
		margin-block-start: 40px;
		padding-block-end: 38px;
		margin-block-end: 33px;
	}
	.intro-step-list {
		gap: 35px;
		padding-inline-start: 23px;
		margin-inline-start: 13px;
	}
	.intro-step-item {
		&::before {
			inline-size: 30px;
			left: -40px;
			top: -7px;
		}
	}
	.intro-step-title {
		font-size: 17px;
		line-height: 21px;
	}
	.intro-step-text {
		line-height: 24px;
		margin-block-start: 9px;
	}
	.intro-buttons {
		margin-block-start: 40px;
		gap: 12px;
	}
	.intro-button {
		block-size: 60px;
	}
}
@media (width >= 768px) {
	.intro-lead {
		line-height: 22px;
		margin-block-start: 40px;
	}
	.intro-panels {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		margin-block-start: 80px;
	}
	.intro-panel {
		border-radius: 10px;
		border-block-start-width: 10px;
		box-shadow: 0 3px 6px hsl(0, 0%, 0%, 0.15);
		padding-inline: 29px;
		padding-block-start: 40px;
		padding-block-end: 60px;
	}
	.intro-panel-title {
		font-size: 26px;
		line-height: 36px;
		gap: 15px;
		&.-online::before {
			inline-size: 48px;
			block-size: 48px;
		}
		&.-manual::before {
			inline-size: 45px;
			block-size: 45px;
		}
	}
	.intro-panel-lead {
		line-height: 24px;
		margin-block-start: 20px;
		padding-block-end: 19px;
		margin-block-end: 30px;
	}
	.intro-step-list {
		gap: 45px;
		padding-inline-start: 28px;
		margin-inline-start: 50px;
	}
	.intro-step-item {
		&::before {
			inline-size: 30px;
			left: -45px;
			top: -5px;
		}
	}
	.intro-step-title {
		font-size: 19px;
		line-height: 21px;
	}
	.intro-step-text {
		line-height: 21px;
		margin-block-start: 10px;
	}
	.intro-buttons {
		margin-block-start: 60px;
		gap: 18px;
		justify-items: center;
	}
	.intro-button {
		font-size: 20px;
		block-size: 70px;
		inline-size: 340px;
		transition: transform 0.2s;
		&:hover {
			transform: translateY(3px);
		}
	}
}