@charset "Shift-JIS";

.marker {
	color: var(--color-blue);
	font-size: 1.125em;
	font-weight: 700;
	background: linear-gradient(to bottom, transparent 60%, #fef471 60%, #fef471 100%);
}

#tab .tab-panel .tab-unit h4 span::after{
	display: none;
}

@media screen and (min-width : 960px) {


	/*============================
	#tab
	============================*/

	#tab ul.tab-menu {
		display: flex;
		gap: 2px;
	}

	#tab ul.tab-menu > li {
		width: calc((100% - 4px) / 3);
	}

	#tab ul.tab-menu > li button {
		all: unset;
		background-color: #E3E7ED;
		box-sizing: border-box;
		color: var(--color-blue);
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.889rem;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: 0.05em;
		height: 103px;
		width: 100%;
		text-align: center;
	}

	#tab ul.tab-menu > li button[aria-selected="true"] {
		background-color: var(--color-blue);
		color: #fff;
	}

	#tab ul.tab-menu > li button#tab1-btn {
		border-radius: 10px 0 0 0;
	}

	#tab ul.tab-menu > li button#tab2-btn {}

	#tab ul.tab-menu > li button#tab3-btn {
		border-radius: 0 10px 0 0;
	}

	/*============================
	tab-panel
	============================*/
	#tab .tab-panel {
		background-color: #fff;
		border-radius: 0 0 10px 10px;
		padding: 40px 50px;
	}

	#tab .tab-panel .tab-head {
		display: flex;
		gap: 30px;
		margin-bottom: 40px;
	}

	#tab .tab-panel .tab-head .tab-img {
		background-color: var(--color-light-blue);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 356px;
		height: 203px;
	}

	#tab .tab-panel .tab-head .tab-img img {
		height: auto;
	}

	#tab .tab-panel#tab1 .tab-head .tab-img img {
		aspect-ratio: 241 / 165;
		width: 241px;
	}

	#tab .tab-panel#tab2 .tab-head .tab-img img {
		aspect-ratio: 239 / 178;
		width: 239px;
	}

	#tab .tab-panel#tab3 .tab-head .tab-img img {
		aspect-ratio: 224 / 165;
		width: 224px;
	}

	#tab .tab-panel .tab-head p.tab-text {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		width: calc(100% - 386px);
	}

	#tab .tab-panel .tab-unit + .tab-unit {
		margin: 40px 0 0 0;
	}

	#tab .tab-panel .tab-unit .tab-flow {
		display: flex;
		gap: 13px;
	}

	#tab .tab-panel .tab-unit .tab-flow p[data-type="from"],
	#tab .tab-panel .tab-unit .tab-flow p[data-type="to"] {
		background-color: var(--color-blue);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.833rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		height: 4.333rem;
		width: calc((100% - 360px) / 2);
		text-align: center;
	}
	#tab .tab-panel .tab-unit .tab-flow p[data-type="arrow"] {
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color-blue);
		font-size: 0.833rem;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: 0.05em;
		padding: 0.5em 0 0 0;
		position: relative;
		width: 334px;
		text-align: center;
	}
	#tab .tab-panel .tab-unit .tab-flow p[data-type="arrow"]::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 334px;
		height: 20px;
		background-image: url('../img/tab_arrow.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	#tab .tab-panel .tab-unit .tab-comment {
		background-color: var(--color-light-blue);
		border-radius: 16px;
		margin: 20px 0 0 0;
		padding: 24px;
		position: relative;
	}

	#tab .tab-panel .tab-unit .tab-comment::before {
		content: "";
		position: absolute;
		top: -16px;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 0;
		height: 0;
		border-left: 16px solid transparent;
		border-right: 16px solid transparent;
		border-bottom: 16px solid var(--color-light-blue);
	}

	#tab .tab-panel .tab-unit h4 {
		margin: 0 0 2px 0;
	}
	#tab .tab-panel .tab-unit .tab-list + h4 {
		margin-top: 20px;
	}

	#tab .tab-panel .tab-unit ul.tab-list {
		margin: 0 0 0 24px;
	}
	#tab .tab-panel .tab-unit ul.tab-list li {
		font-size: 0.833rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		list-style-type: disc;
	}

	#tab .tab-panel .tab-btn {
		max-width: 17rem;
		margin: 22px auto 0 auto;
	}
	#tab .tab-panel .tab-btn .btn::after {
		transform: rotate(90deg);
		top: 35%;
	}

	#tab .tab-panel .tab-note {
		font-size: 0.833rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		margin: 22px 0 0 0;
	}

	#tab .tab-panel .status {
		padding: 50px 0 0 0;
	}

	#tab .tab-panel .status p.status-title {
		color: #ffffff;
		font-size: 1.111rem;
		line-height: 1.6;
		margin: 0 0 1.667rem 0;
		padding: 0.556rem 0.889rem;
		background: linear-gradient(to right, #056CD8 0%, #57C4F5 100%);
	}

	#tab .tab-panel .status p.status-subtitle {
		margin: 0 0 0.889rem 0;
	}

	#tab .tab-panel .status p.status-subtitle span {
		display: inline-block;
		vertical-align: top;
		color: var(--color-blue);
		font-size: 1.111rem;
		line-height: 1.6;
		padding: 0 0 0.444rem 1.222rem;
		position: relative;
	}
	#tab .tab-panel .status p.status-subtitle span::before{
		content: '';
		display: block;
		background: linear-gradient(to left, #056CD8 0%, #57C4F5 100%);
		box-sizing: border-box;
		width: 0.889rem;
		height: 0.889rem;
		border-radius: 100px;
		position: absolute;
		top: 0.5rem; left: 0;
	}
	#tab .tab-panel .status p.status-subtitle span::after{
		content: '';
		display: block;
		background: linear-gradient(to left, #056CD8 0%, #57C4F5 100%);
		box-sizing: border-box;
		width: 100%;
		height: 0.222rem;
		border-radius: 100px;
		position: absolute;
		bottom: 0; left: 0;
	}

	#tab .tab-panel .status p.status-text + p.status-subtitle {
		margin-top: 2rem;
	}

	#tab .tab-panel .status p.status-text {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}


	/*============================
	#leaflet
	============================*/
	#leaflet {
		padding: 50px 0 0 0;
	}

	#leaflet ul.leaflet-list {
		display: flex;
		justify-content: center;
	}

	#leaflet ul.leaflet-list li {
		width: 220px;
	}

	#leaflet ul.leaflet-list li img {
		width: 100%;
		height: auto;
	}

	#leaflet .btn {
		width: 17rem;
		margin: 30px auto 0 auto;
	}

}

@media screen and (max-width : 959px) {

	#tab .sp-tab-head {
		background-color: var(--color-blue);
		border-radius: 2.56vw;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 1rem;
		line-height: 1.44;
		letter-spacing: 0.05em;
		height: 23.6vw;
		padding: 0 4.1vw;
		position: relative;
	}
	#tab .tab-panel + .sp-tab-head {
		margin: 1rem 0 0 0;
	}
	#tab .sp-tab-head[aria-expanded="true"] {
		border-radius: 2.56vw 2.56vw 0 0;
	}
	#tab .sp-tab-head::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 4.1vw;
		width: 8.2vw;
		height: 8.2vw;
		background-image: url('../img/icon_plus.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		transform: translateY(-50%);
	}
	#tab .sp-tab-head[aria-expanded="true"]::after {
		background-image: url('../img/icon_minus.svg');
	}




	/*============================
	tab-panel
	============================*/
	#tab .tab-panel {
		background-color: #fff;
		border-radius: 0 0 2.56vw 2.56vw;
		padding: 10.25vw 5.64vw;
	}

	#tab .tab-panel .tab-head {
		display: flex;
		flex-direction: column-reverse;
		gap: 5.13vw;
		margin-bottom: 5.13vw;
	}

	#tab .tab-panel .tab-head .tab-img {
		background-color: var(--color-light-blue);
		border-radius: 2.56vw;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 44.36vw;
	}

	#tab .tab-panel .tab-head .tab-img img {
		height: auto;
	}

	#tab .tab-panel#tab1 .tab-head .tab-img img {
		aspect-ratio: 241 / 165;
		width: 52.3vw;
	}

	#tab .tab-panel#tab2 .tab-head .tab-img img {
		aspect-ratio: 239 / 178;
		width: 52.3vw;
	}

	#tab .tab-panel#tab3 .tab-head .tab-img img {
		aspect-ratio: 224 / 165;
		width: 48.7vw;
	}


	#tab .tab-panel .tab-head p.tab-text {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	#tab .tab-panel .tab-unit + .tab-unit {
		margin: 40px 0 0 0;
	}

	#tab .tab-panel .tab-unit .tab-flow {
		display: flex;
		flex-wrap: wrap;
		column-gap: 11.8vw;
		position: relative;
		overflow: hidden;
	}

	#tab .tab-panel .tab-unit .tab-flow p[data-type="from"],
	#tab .tab-panel .tab-unit .tab-flow p[data-type="to"] {
		background-color: var(--color-blue);
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 0.833rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		padding: 3.85vw 0;
		width: calc((100% - 11.8vw) / 2);
		text-align: center;
	}
	#tab .tab-panel .tab-unit .tab-flow p[data-type="from"] {
		order: 1;
		z-index: 1;
	}
	#tab .tab-panel .tab-unit .tab-flow p[data-type="to"] {
		order: 2;
		position: relative;
		z-index: 0;
	}
	#tab .tab-panel .tab-unit .tab-flow p[data-type="arrow"] {
		order: 3;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--color-blue);
		font-size: 0.833rem;
		font-weight: 500;
		line-height: 1.6;
		letter-spacing: 0.05em;
		padding: 0.75em 0 0 0;
		width: 100%;
		text-align: center;
	}
	#tab .tab-panel .tab-unit .tab-flow p[data-type="to"]::before {
		content: "";
		position: absolute;
		top: 50%;
		right: 100%;
		width: 80vw;
		height: 5.13vw;
		background-image: url('../img/tab_arrow.svg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		transform: translateY(-50%);
		z-index: -1;
	}

	#tab .tab-panel .tab-unit .tab-comment {
		background-color: var(--color-light-blue);
		border-radius: 2.56vw;
		margin: 4.36vw 0 0 0;
		padding: 5.13vw;
		position: relative;
	}

	#tab .tab-panel .tab-unit .tab-comment::before {
		content: "";
		position: absolute;
		top: -3.5vw;
		left: 0;
		right: 0;
		margin: 0 auto;
		width: 0;
		height: 0;
		border-left: 5vw solid transparent;
		border-right: 5vw solid transparent;
		border-bottom: 6vw solid var(--color-light-blue);
	}

	#tab .tab-panel .tab-unit h4 {
		margin: 0 0 0.111rem 0;
	}
	#tab .tab-panel .tab-unit h4 span {
		font-size: 0.833rem;
	}
	#tab .tab-panel .tab-unit h4 span::before {
		top: 0.3rem;
	}
	#tab .tab-panel .tab-unit .tab-list + h4 {
		margin-top: 1.222rem;
	}

	#tab .tab-panel .tab-unit ul.tab-list {
		margin: 0 0 0 1.5rem;
	}
	#tab .tab-panel .tab-unit ul.tab-list li {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		list-style-type: disc;
	}

	#tab .tab-panel .tab-btn {
		max-width: 17rem;
		margin: 1rem auto 0 auto;
	}
	#tab .tab-panel .tab-btn .btn::after {
		transform: rotate(90deg);
		top: 35%;
	}

	#tab .tab-panel .tab-note {
		font-size: 0.833rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
		margin: 1rem 0 0 0;
	}

	#tab .tab-panel .status {
		padding: 2rem 0 0 0;
	}

	#tab .tab-panel .status p.status-title {
		color: #ffffff;
		font-size: 1.222rem;
		line-height: 1.6;
		margin: 0 0 1.667rem 0;
		padding: 0.556rem 0.889rem;
		background: linear-gradient(to right, #056CD8 0%, #57C4F5 100%);
	}

	#tab .tab-panel .status p.status-subtitle {
		margin: 0 0 0.889rem 0;
	}

	#tab .tab-panel .status p.status-subtitle span {
		display: inline-block;
		vertical-align: top;
		color: var(--color-blue);
		font-size: 1.111rem;
		line-height: 1.6;
		padding: 0 0 0.444rem 1.222rem;
		position: relative;
	}
	#tab .tab-panel .status p.status-subtitle span::before{
		content: '';
		display: block;
		background: linear-gradient(to left, #056CD8 0%, #57C4F5 100%);
		box-sizing: border-box;
		width: 0.889rem;
		height: 0.889rem;
		border-radius: 100px;
		position: absolute;
		top: 0.5rem; left: 0;
	}
	#tab .tab-panel .status p.status-subtitle span::after{
		content: '';
		display: block;
		background: linear-gradient(to left, #056CD8 0%, #57C4F5 100%);
		box-sizing: border-box;
		width: 100%;
		height: 0.222rem;
		border-radius: 100px;
		position: absolute;
		bottom: 0; left: 0;
	}

	#tab .tab-panel .status p.status-text + p.status-subtitle {
		margin-top: 2rem;
	}

	#tab .tab-panel .status p.status-text {
		font-size: 0.889rem;
		line-height: 1.6;
		letter-spacing: 0.05em;
	}

	/*============================
	#leaflet
	============================*/
	#leaflet {
		padding: 12.82vw 0 0 0;
	}

	#leaflet ul.leaflet-list {
		display: flex;
		justify-content: center;
	}

	#leaflet ul.leaflet-list li {
		width: 41vw;
	}

	#leaflet ul.leaflet-list li img {
		width: 100%;
		height: auto;
	}

	#leaflet .btn {
		width: 15rem;
		margin: 5.13vw auto 0 auto;
	}


}