@CHARSET "UTF-8";

:root {
	/* 濃青*/
	--blue-col: #278ece;
	--blue2-col: #60a0d7;
	--sky-col: #b9daf3;
	--sky2-col: #dbecf9;
	--water-col: #e1eaf6;
	--water2-col: #f4f7fc;
	/* 薄青*/

	--beige-col: #e5ddd7;		/* ベージュ */
	--brown-col: #bd9a7e;		/* 茶 */
	--wood-col: #907b6d;		/* 木製 */
	--cream-col: #f9f6f2;		/* クリーム */
	--green-col: #8fb783;		/* 緑 */
}
/*
#sp_bus_header {
	padding-top: 10px;
}
#sp_bus_header > a.sp_title {
	display: block;
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/bus_title.png");
	width: 401px;
	height: 36px;
	float: left;
}
#sp_bus_header ul#menu-sp_bus_header {
	list-style-image: url("/wp-content/themes/relltd2025/image/sp_bus/header_yaji.png");
	padding-top: 15px;
}
#sp_bus_header ul#menu-sp_bus_header li {
	margin-left: 40px;
	float: left;
}
*/
#sp_bus_header ul#menu-sp_bus_header li a {
	color: black;
}
#sp_bus_header ul#menu-sp_bus_header {
	list-style-type: none;
	display: flex;
	justify-content: end;

	& li {
		padding-left: 1em;
		margin-left: 1em;
		position: relative;
	}
	& li::before {
		content: "";
		position: absolute;
		width: 0.5em;
		height: 0.5em;
		display: block;
		border-left: 3px solid var(--blue-col);
		border-top: 3px solid var(--blue-col);
		border-radius: 1px;
		transform: rotate(135deg);
		left: 0;
		top: calc(50% - 0.25em);
	}
}

/* 特徴・機能・構成の機能一覧テーブル */
.front_list {
	background-color: var(--beige-col);
	margin-bottom: 2rem;
}
.front_list table {
	border-collapse: collapse;
	margin: 1rem auto 2rem;
	width: unset;
	background-color: var(--cream-col);
}
.front_list tr:first-child th {
	background-color: var(--sky2-col);
}
.front_list table,
.front_list th,
.front_list td {
	border: 1px solid black;
	font-size: 0.8rem;
}
.front_list th {
	word-break: keep-all;
}
.front_list th,
.front_list td {
	padding: 0.25rem 0.5rem;
}
.front_list tr:nth-child(n+2) th {
	text-align: left;
}
.front_list th:nth-child(n+3) {
	font-size: 0.65rem;
	word-break: keep-all;
}
.front_list td:nth-last-child(-n+2) {
	text-align: center;
}
@media screen and (max-width: 950px){
	.front_list th {
	    word-break: unset;
	}
}


/* content */

H3.front {
	background-color: var(--blue-col);
	color: white;
	padding: 0.25rem 1.5rem 0.25rem 3rem;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	display: inline-block;
}

H2.front1 {
	background-color: var(--blue-col);
	color: white;
	padding: 0.25rem 3rem 0.25rem 1.5rem;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	display: inline-block;
	margin-bottom: 0.5rem;
	word-break: auto-phrase;
}

.ready {
	border: 1px solid var(--dark-gray-col);
	border-radius: 1rem;
	padding: 2rem;
	background-color: var(--water2-col);
	z-index: -2;
	position: relative;
}
h3.ready_title,
h3.get_title {
	margin: 0 2rem -0.75em;
	display: block;
	position: relative;
	width: 8em;
	text-align: center;
	border-left: 1px solid var(--dark-gray-col);
	border-right: 1px solid var(--dark-gray-col);
}
h3.get_title {
	margin: 0 2rem 0.25em;
	width: 15em;
}
h3.ready_title::before {
	content: "";
	position: absolute;
	background-color: white;
	width: 8em;
	height: 1px;
	left: 0;
	bottom: 13px;
	z-index: -1;
}
.get_num {
	color: white;
	background-color: var(--blue-col);
	width: 2rem;
	text-align: center;
	border-radius: 1rem;
	padding: 0.2rem 0;
	font-weight: bold;
	margin-bottom: 1rem;
}

#sp_content {
	clear: both;

	& .task_grp {
		padding: 1rem;
		border: 4px solid var(--blue-col);
		border-radius: 1.5rem;
		position: relative;
	}
	& .task_grp::after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 100px solid transparent;
		border-top: 50px solid var(--blue-col);
		bottom: -150px;
		left: calc(50% - 100px);
	}

	& .task_num > div {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 3rem;

		& p:first-child {
			background-color: black;
			color: white;
			width: 1.6rem;
			border-radius: 2rem;
			display: block;
			text-align: center;
			padding: 0.1rem 0;
			font-weight: bold;
		}
		& p:last-child {
			padding-left: 0.5rem;
		}
	}
	& .task_img > div {
		display: flex;
		align-items: end;
		margin: 1rem 0;
		justify-content: center;

		& .wp-block-image {
			margin-bottom: 0;
		}

		& > .wp-block-image:first-child,
		& > .wp-block-group:first-child {
			margin-right: 3rem;
			position: relative;
		}
		& > .wp-block-image:first-child::after,
		& > .wp-block-group:first-child::after {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border: 20px solid transparent;
			border-left: 15px solid var(--blue-col);
			right: -54px;
			bottom: 1rem;
		}
	}

	& .system_img {
		margin: 2rem 0;
		padding: 1.5rem;
		border-radius: 1.5rem;
	}

	& .front2 {
		border: 5px solid #89c97c;
		background-color: #fff;
		padding: 0.25rem 5rem 0.25rem 5rem;
		border-radius: 2rem;
		display: inline-block;
	}

	& .example {
		padding: 0 2rem 2rem;

		& h3 {
			margin: 0 0 0 -2rem;
		}
	}
	& .kuruma,
	& .server {
		border-radius: 3rem;
		width: 6rem;
		text-align: center;
		padding: 2.25rem 0;
		position: absolute;
		margin-top: 1rem;
	}
	& .server {
		margin-top: -1rem;
	}
	& .kuruma + div,
	& .server + div {
		border-radius: 1rem;

		& p {
			word-break: auto-phrase;
			padding-bottom: 2rem;
		}
		& img {
			margin: 0 auto;
			display: block;
		}
		& figcaption {
			text-align: center;
			word-break: keep-all;
		}
	}
	& .has-sp-pale-sky-background-color {
		margin: 2rem;
	}

	& .box {
        border: 1px solid black;
        margin-bottom: 1rem;
    }
	& .app_store,
		& .google_play {
			border-radius: 0.5rem;
			margin: 0.5rem auto 0;
			padding: 5px 0;
			width: calc(52px + 8rem);

			& img {
				float: left;
				margin: 0 10px;
			}
		}
	        & hr {
            position: relative;
            overflow: visible;
            border-top: 1px solid var(--blue-col);
            margin: 2rem 0;
        }
	        & hr::after {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-top: 15px solid var(--blue-col);
            border-right: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-left: 20px solid transparent;
            left: calc(50% - 20px);
            top: -5px;
            background-color: white;
        }
	
	/* top */
	& div.title_box {
		padding: 1rem;

		& .wp-block-image {
			max-width: 90%;
			margin: 1rem auto;
		}
	}

	& h2 {
		text-align-last: center;
	}

	& h2.task_title {
		margin-top: 2rem;
		margin-bottom: 2rem;
		font-size: 2.5rem;

		& strong {
			font-size: 3rem;
		}
	}

	& .p1_2_icon1,
	& .p1_2_icon2 {
	    margin-bottom: 1rem;

		& div {
			display: flex;
			align-items: center;

			& .p1_2_icon_img {
				margin-bottom: 0;

				& img {
				}
			}
			& h3.p1_2_icon_title {
				font-size: 2rem;
				margin-left: 0.5em;
			}
		}
	}

	& .option {
		border: 1px solid var(--green-col);
		display: inline-block;
		padding: 0.2rem 0.5rem;
	}

	& .p1_2_list1,
	& .p1_2_list2 {
		& .has-sp-mist-green-background-color {
			border: 1rem solid var(--mist-green-col);
			border-radius: 1rem;
			height: calc(100% - 3rem);
		}
		& .has-sp-sky-blue-background-color {
			border: 1rem solid var(--ice-blue-col);
			border-radius: 1rem;
			height: calc(100% - 3rem);
		}
		& strong {
			font-size: 1.3rem;
			word-break: auto-phrase;
			padding-bottom: 1rem;
			display: block;
		}
		& em {
			font-size: 0.9rem;
			font-style: normal;
			padding-bottom: 1rem;
			display: block;
		}
	}

	
	
	
	/* point */
	& div.point_box {
		& h2 {
			margin-top: -90px;
			font-size: 1.75rem;
			margin-bottom: 2rem;

			& .has-sp-turquoise-blue-color {
				font-size: 2.5rem;
			}
		}
		& .wp-block-image {
		}
	}
	& .point_list {
		display: flex;
		flex-wrap: wrap;
		gap: 6rem;
		list-style-type: none;
		counter-reset: list;
		margin-bottom: 3rem;

		& li {
			width: calc(316px - 4rem);
			position: relative;
			clear: both;


			& .has-sp-turquoise-blue-color {
				display: block;
				padding-left: 4.5rem;
				height: 3.5rem;
				position: relative;
				font-size: 0.8rem;
			}
			& .has-sp-turquoise-blue-color > strong,
			& strong > .has-sp-turquoise-blue-color {
				font-size: 1rem;
			}
			& .has-sp-turquoise-blue-color::before {
				content: "POINT";
				position: absolute;
				background-color: var(--turquoise-blue-col);
				color: white;
				font-weight: bold;
				padding: 0.5rem 0 2.5rem;
				font-size: 0.75rem;
				border-radius: 0.5rem;
				width: 4rem;
				text-align: center;
				display: block;
				left: 0;
			}
			& .has-sp-turquoise-blue-color::after {
				counter-increment: list;
				content: counter(list);
				position: absolute;
				top: 1rem;
				color: white;
				left: 1.5rem;
				font-weight: bold;
				font-size: 2rem;
			}

			img {
				margin-top: 1rem;
				float: right;
				width: auto !important;
			}
		}
		& li:nth-child(n+10) {
			& .has-sp-turquoise-blue-color::after {
				left: 0.8rem;
			}
		}

		/* TODO 罫線 */
		& li::before {
			content: "";
/*			border: 1px solid black;*/
			height: 1px;
			background-color: lightgrey;
		}
		& li::after {
		}
	}

	& .option_face {
		border: 10px solid var(--cobalt-green-col);
		border-radius: 20px;
		padding: 1rem;
		position: relative;
		margin-bottom: 2rem;

		& > div {
			min-height: 130px;
		}

		& h3 {
		background-color: var(--turquoise-blue-col);
			color: white;
			position: absolute;
			top: -10px;
			left: -10px;
			padding: 5px 10px;
		}
		& img {
			float: right;
		}
	}

	& .device {
		& h3 {
			width: 12rem;
			margin: 0 auto;
			background-color: var(--turquoise-blue-col);
			color: white;
			padding: 0.5rem 0;
			border-radius: 0 0 1rem 1rem;
		}
		& .bubble {
			position: relative;
			display: inline-block;
			margin: 15px 0 30px;
			padding: 16px;
			border: 2px solid;
			border-radius: 8px;
		}
		& .bubble::before,
		& .bubble::after {
			content: "";
			position: absolute;
			bottom: 0;
			left: 50%;
			border-style: solid;
			translate: -50% 100%;
		}
		& .bubble::before {
			border-width: 17px 10px 0 10px;
			border-color: black transparent transparent;
		}
		& .bubble::after {
			border-width: 15.5px 7.8px 0 7.8px;
			border-color: var(--ice-blue-col) transparent transparent;
		}
		& .device1,
		& .device2_1,
		& .device2_2,
		& .device2_3 {
			text-align: center;
			position: relative;
			padding-bottom: 2rem;
		}
		& .device1 {
			border: 4px dotted var(--turquoise-blue-col);
			margin: 1rem auto;
			padding-bottom: 1rem;
			width: 20rem;
			border-radius: 1rem;
		}
		& .device1::before {
			content: "";
			position: absolute;
			width: 4rem;
			background-color: var(--ice-blue-col);
			display: block;
			height: 1rem;
			bottom: -0.5rem;
			left: calc(50% - 1.85rem);
		}
		& .device1::after {
			content: "or";
			position: absolute;
			font-size: 2rem;
			font-weight: bold;
			bottom: -1.2rem;
			left: calc(50% - 0.8rem);
		}

		.wp-block-columns {
			margin-bottom: 0;
		}
	}

	& .feature {
		padding: 1rem;

		& h3 {
			position: relative;
			text-align: center;
			width: 12rem;
			margin: 1rem auto;
		}
		& h3::before,
		& h3::after {
			content: "";
			position: absolute;
			width: 8px;
			height: 100%;
			border-style: solid;
		}
		& h3::before {
			border-width: 2px 0 2px 2px;
			left: 0;
		}
		& h3::after {
			border-width: 2px 2px 2px 0;
			right: 0;
		}

		padding: 1rem;

		& h4 {
			position: relative;
			padding-left: 1.25rem;
			margin: 0 auto;
			width: 12rem;
		}
		& h4::before {
			content: "";
			position: absolute;
			background-color: var(--turquoise-blue-col);
			width: 0.8rem;
			height: 0.8rem;
			display: block;
			border-radius: 0.25rem;
			left: 0;
			top: calc(50% - 0.3rem);
		}

		& ul {
			margin: 1rem auto;
			width: 12rem;

			& li {
				margin-left: 1rem;
			}
		}
	}

	& .step {
		padding: 1rem;
		margin: 2rem 0;
		border-top: 1rem solid var(--brown-col);
		border-radius: 1rem;

		& h2 {
			font-size: 2.5rem;
		}

		& img {
			margin: 0 auto;
			display: block;
		}

		& ol.merit {
			list-style-type: none;
			counter-reset: list;
			margin-bottom: 2rem;
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(calc(430px - 12rem), calc(430px - 12rem)));
			gap: 4rem;
			place-content: center;

			& li {
				display: block;
				position: relative;
				width: calc(430px - 12rem);
				margin: 0 auto;
				clear: both;

				& strong {
					margin-left: 3.5rem;
					padding-top: 0.25rem;
					display: block;
				}
			}
			& li::before {
				content: "POINT";
				position: absolute;
				background-color: var(--brown-col);
				color: white;
				font-weight: bold;
				padding: 0.5rem 0 1.5rem;
				font-size: 0.75rem;
				border-radius: 3rem;
				width: 3rem;
				text-align: center;
				display: block;
				left: 0;
				top: 0;
			}
			& li::after {
				counter-increment: list;
				content: counter(list);
				position: absolute;
				color: white;
				font-weight: bold;
				text-align: center;
				display: block;
				left: 0;
				top: 3.1rem;
				width: 3rem;
				font-size: 1.5rem;
				margin-top: -34px;
			}
		}
	}

	& .system_img {
		& .drive {
			align-items: end;
			flex-wrap: nowrap;

			& .wp-block-column {
				border: 2px solid var(--brown-col);
				border-radius: 1rem;
				padding: 1rem;
				background-color: white;
				position: relative;

				& .wp-block-image,
				& figcaption {
					text-align: center;
					margin: 0;
				}
			}
			& .wp-block-column::before,
			& .wp-block-column::after {
				content: "";
				position: absolute;
				border-style: solid;
				bottom: 0;
				left: 25%;
				transform: skew(-25deg);
				transform-origin: top;
			}
			& .wp-block-column:first-child::before,
			& .wp-block-column:first-child::after {
				left: 75%;
				transform: skew(55deg);
			}
			& .wp-block-column::before {
				border-width: 20px 20px 0 0;
				border-color: var(--brown-col) transparent transparent;
				translate: -50% 100%;
			}
			& .wp-block-column::after {
				border-width: 15.2px 15.2px 0 0;
				border-color: white transparent transparent;
				translate: calc(-50% - 0.4px) 100%;
			}
		}
		& .bus,
		& .cloud,
		& .system > .wp-block-column {
			position: relative;

			& figcaption {
				text-align: center;
			}
		}
		& .bus img,
		& .cloud img,
		& .system img {
			margin-top: 1rem;
		}
		& .bus::before,
		& .bus::after,
		& .cloud::before,
		& .cloud::after,
		& .system > .wp-block-column::before,
		& .system > .wp-block-column::after {
			content: "";
			position: absolute;
			width: 0;
			height: 0;
			border: 20px solid transparent;
		}
		& .bus::before,
		& .cloud::before,
		& .system > .wp-block-column::before {
			border-top: 15px solid var(--blue-col);
			top: -1rem;
			left: calc(50% - 40px);
		}
		& .bus::after,
		& .cloud::after,
		& .system > .wp-block-column::after {
			border-bottom: 15px solid var(--orange-col);
			top: calc(-2.5rem + 5px);
			left: calc(50% + 0px);
		}
		& .system > .wp-block-column:first-child::before {
			left: unset;
			right: 50px;
		}
		& .system > .wp-block-column:first-child::after {
			left: unset;
			right: 10px;
		}
		& .system > .wp-block-column:last-child::before {
			left: 10px;
		}
		& .system > .wp-block-column:last-child::after {
			left: 50px;
		}
		& .system {
			margin-top: 2rem;
			align-items: stretch;
			flex-wrap: nowrap;

			& > .wp-block-column {
				display: flex;
				align-items: end;
			}
			& > .wp-block-column:first-child {
				justify-content: right;
			}
			& > .wp-block-column:last-child {
				justify-content: left;
			}
		}
	}

	& .pattern {
		padding: 1rem;
		& h2 {
			background-color: var(--yellow-green);
			color: white;
			padding: 1rem;
			margin-bottom: 1rem;
		}
		& ol {
			display: flex;
			flex-wrap: wrap;
			gap: 6rem 0;
			list-style-type: none;
			counter-reset: list;
			margin-bottom: 3rem;

			& li {
				display: block;
				position: relative;
				width: calc(300px - 7rem);
				margin: 1rem 3rem 0;

				& strong {
					margin-left: 3rem;
					padding-top: 0.25rem;
					display: block;
				}
			}
			& li::before {
				counter-increment: list;
				content: counter(list);
				position: absolute;
				background-color: var(--yellow-green);
				color: white;
				font-weight: bold;
				padding: 0.25rem;
				border-radius: 3rem;
				text-align: center;
				display: block;
				left: -3rem;
				width: 1.75rem;
				font-size: 1.2rem;
			}
			& li::after {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				border: 20px solid transparent;
				border-left: 15px solid var(--yellow-green);
				right: -3rem;
				top: calc(50% - 10px);

				@media screen and (max-width: 600px){
					border: 20px solid transparent;
					border-top: 15px solid var(--yellow-green);
					bottom: -5rem;
					left: calc(50% - 3rem - 10px);
					top: unset;
					right: unset;
				}
			}
			& li:last-child::after {
				content: unset;
			}
		}
	}
}



/* ここから旧画面設定
.page_top_title {
	align-items: center;
}
.problem_image {
	padding: 2rem;
	position: relative;
	margin-bottom: 1.75vw;
}
.problem_image::before {
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% - 12vw);
	border: 12vw solid transparent;
	border-top: 3vw solid var(--blue-col);
}

.merit {
	padding: 2rem;
	border-radius: 1.5rem;
	border-top: 1.5rem solid var(--brown-col);
}
.merit_image {
	padding: 1rem;
}

.front_list,
.flow {
	margin-top: 1rem;
}

H3.front {
	background-color: var(--blue-col);
	color: white;
	padding: 0.25rem 1.5rem 0.25rem 3rem;
	border-top-right-radius: 2rem;
	border-bottom-right-radius: 2rem;
	display: inline-block;
}

ul, ol {
	list-style: none;
}
ul.front {
	margin: 2rem 0;
	display: flex;
	position: relative;
	padding: 1.5rem 0;
}
ul.front:first-of-type {
	padding: 1.5rem 1rem;
}
ul.front:first-of-type {
	border: 1px solid black;
	border-radius: 1rem;
	background-color: var(--water2-col);
}
ul.front > li:first-child {
	position: absolute;
	top: -0.75rem;
	left: 2rem;
}
ul.front:first-of-type > li:first-child {
	background: linear-gradient(180deg, white 0%, white 50%, #f4f7fc 50%, #f4f7fc 100%);
}
ul.front > li:first-child::before {
	content: "";
	border-left: 1px solid black;
	padding-right: 1rem;
}
ul.front > li:first-child::after {
	content: "";
	border-right: 1px solid black;
	padding-left: 1rem;
}
ul.front:first-of-type > li:nth-child(n+3) {
	border-left: 1px dotted black;
	padding-left: 1rem;
	margin-left: 1rem;
}
ul.front > li:nth-child(n+2) {
	flex: 1;
	font-weight: bold;
	color: var(--blue-col);
}
ul.front:first-of-type > li > ul {
	padding-left: 40%;
	background-repeat: no-repeat;
	background-size: 35%;
	background-position-y: center;
	height: 100%;
	min-height: 10rem;
}
ul.front:first-of-type > li:nth-child(2) > ul {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/ready1.png");
}
ul.front:first-of-type > li:nth-child(3) > ul {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/ready2.png");
}
ul.front > li:nth-child(n+2) > ul {
	font-weight: normal;
	color: black;
	font-size: 0.9rem;
}
ul.front > li:nth-child(2) > ul > li:last-child {
	list-style: "※";
	margin-left: 0.9rem;
	padding-left: 0.25rem;
	font-size: 0.8rem;
}
ul.front:first-of-type > li:nth-child(3) > ul > li:first-child {
	border: 1px solid black;
	text-align: center;
	background-color: white;
}
ul.front:first-of-type > li:nth-child(3) > ul > li {
	font-weight: bold;
}
ul.front > li:nth-child(3) > ul > li > ul {
	display: flex;
	flex-wrap: wrap;
}
ul.front > li:nth-child(3) > ul > li > ul > li {
	font-weight: normal;
	list-style: "・";
	margin-left: 1rem;
}

body {
	counter-reset: barcode_no 0;
}
ul.front:nth-of-type(2) > li:nth-child(n+3) {
	padding-left: 1.5rem;
	margin-left: 1.5rem;
	border-left: 1px solid #278ece;
}
ul.front:nth-of-type(2) > li:nth-child(n+2)::before {
	counter-increment: barcode_no 1;
	content: counter(barcode_no);
	position: absolute;
	top: 1.5rem;
	background-color: var(--blue2-col);
	color: white;
	border-radius: 2rem;
	width: 1.5rem;
	height: 1.5rem;
	text-align: center;
}
ul.front:nth-of-type(2) > li:nth-child(n+3)::after {
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -0.5rem;
	width: 0.8rem;
	height: 0.8rem;
	border-top: 1px solid #278ece;
	border-right: 1px solid #278ece;
	display: block;
	background-color: white;
	transform: rotate(45deg);
	margin-left: -1.95rem;
}
ul.front:nth-of-type(2) > li:nth-child(n+2) {
	padding-top: calc(80px + 3rem);
	background-repeat: no-repeat;
	background-size: auto 80px;
	background-position-x: center;
	background-position-y: 2rem;
}
ul.front:nth-of-type(2) > li:nth-child(2) {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/barcode1.png");
}
ul.front:nth-of-type(2) > li:nth-child(3) {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/barcode2.png");
}
ul.front:nth-of-type(2) > li:nth-child(4) {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/barcode3.png");
}
ul.front:nth-of-type(2) > li:nth-child(5) {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/barcode4.png");
}



.front_example {
	background-color: var(--sky-col);
    padding-bottom: 1rem;
}
.front_example > div > ul {
	display: flex;
	background-color: var(--sky2-col);
	height: 100%;
	border-radius: 0.5rem;
	justify-content: space-between;
}
.front_example > div > ul {
	font-size: 0.9rem;
	margin: 1rem 3rem 0;
	padding: 0 1rem;
}
.front_example > div > ul > li:first-child {
	position: absolute;
	background-color: var(--blue2-col);
	color: white;
	border-radius: 3rem;
	padding: 1.3rem 0.6rem;
	font-weight: bold;
	margin-left: -3rem;
	margin-top: 0.5rem;
}
.front_example > div > ul > li:nth-child(2) {
	margin-left: 3rem;
}
.front_example > div > ul > li:nth-child(n+2) {
	padding-top: 7rem;
	padding-bottom: 1rem;
	text-align: center;
}
.front_example > div > ul > li:nth-child(3) {
	padding-top: 2rem;
}
.front_example > div > ul:nth-child(2) > li {
	background-repeat: no-repeat;
	background-position-x: center;
	background-size: auto 5rem;
	background-position-y: 1rem;
}
.front_example > div > ul:nth-child(2) > li:nth-child(2) {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/OBU1.png");
}
.front_example > div > ul:nth-child(2) > li:nth-child(4) {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/OBU2.png");
}
.front_example > div > ul:nth-child(2) > li:nth-child(5) {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/OBU3.png");
	margin-left: 3rem;
	margin-right: 3rem;
	position: relative;
}
.front_example > div > ul:nth-child(2) > li:nth-child(5)::before {
	content: "";
	height: 90%;
	width: 1px;
	display: block;
	position: absolute;
	border-left: 1px dotted black;
	top: 5%;
	margin-left: -4rem;
}
.front_example > div > ul:last-child > li:nth-child(n+2) {
	padding: 1rem 0;
}
.front_example > div > ul:last-child > li:nth-child(2),
.front_example > div > ul:last-child > li:nth-child(3) {
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/server1.png");
	background-repeat: no-repeat;
	background-position-x: center;
	background-size: auto 4rem;
	background-position-y: 4.5rem;
	margin-bottom: 1rem;
	width: 6rem;
}
.front_example > div > ul:last-child > li:nth-child(4) {
	width: calc(100% - 18rem);
	text-align: left;
}
.front_example > div > ul:last-child > li > ul > li:first-child {
	float: right;
	height: 2.5rem;
}
.front_example > div > ul:last-child > li > ul > li:nth-child(2),
.front_example > div > ul:last-child > li > ul > li:nth-child(3) {
	float: right;
	padding-top: 4.5rem;
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/server2.png);
	background-repeat: no-repeat;
	background-position-x: center;
	background-size: auto 4rem;
	background-position-y: top;
	width: 6rem;
	text-align: center;
}
.front_example > div > ul:last-child > li > ul > li:nth-child(2) {
    clear: both;
	background-image: url("/wp-content/themes/relltd2025/image/sp_bus/server3.png");
}

.pattern_image {
	padding: 2rem;
	border: 5px solid var(--green-col);
}

.merit ol {
	display: flex;
	flex-wrap: wrap;
	counter-reset:list;
}
.merit ol > li {
	width: calc(50% - 6rem);
	position: relative;
	padding-top: 1rem;
	padding-left: 4rem;
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--wood-col);
	margin-top: 2rem;
	white-space: nowrap
}
.merit ol > li:nth-child(odd) {
	margin-right: 1.5rem;
}
.merit ol > li:nth-child(even) {
	margin-left: 1.5rem;
}
.merit ol > li::before{
	counter-increment: list;
	content: counter(list);
	position: absolute;
	top: 0;
	left: 0;
	background-color: var(--wood-col);
	border-radius: 3rem;
	padding: 1.1rem 1.2rem 0rem;
	font-weight: bold;
	color: white;
	font-size: 1.5rem;
}
.merit ol > li::after{
	content: "POINT";
	position: absolute;
	top: 0;
	left: 0;
	color: white;
	font-size: 0.7rem;
	padding-left: 0.7rem;
	padding-top: 0.5rem;
	font-weight: normal;
}
.merit ul {
	position: relative;
}
.merit ul::before,
.merit ul::after {
	content: "";
	position: absolute;
}
.merit ul::before {
	height: 1px;
	width: calc(100% + 4rem);
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit_line_w.png);
	top: -4rem;
	left: -4.5rem;
}
.merit ul::after {
	height: calc(100% + 2.5rem);
	width: 1px;
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit_line_h.png);
	right: -1rem;
	top: -2.9rem;
}
.merit ol > li:first-child > ul::before {
	content: unset;
}
.merit ol > li:nth-child(even) > ul::after {
	content: unset;
}
.merit ul > li {
	padding-left: 8rem;
	font-size: 0.9rem;
	font-weight: normal;
	color: black;
	padding-top: 1rem;
	white-space: break-spaces;
}
.merit ol > li {
	background-repeat: no-repeat;
	background-size: 11rem;
	background-position-y: 4rem;
}
.merit ol > li:first-child {
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit1.png);
}
.merit ol > li:nth-child(2) {
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit2.png);
}
.merit ol > li:nth-child(3) {
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit3.png);
}
.merit ol > li:nth-child(4) {
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit4.png);
}
.merit ol > li:nth-child(5) {
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit5.png);
}
.merit ol > li:nth-child(6) {
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit6.png);
}
.merit ol > li:nth-child(7) {
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit7.png);
}
.merit ol > li:nth-child(8) {
	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/merit8.png);
}
旧画面設定ここまで */


/* footer */
#sp_bus_footer {
	border: 5px solid var(--blue-col);
	border-radius: 1rem;
	margin: 2rem 0;
	text-align: center;
	/*position: relative;*/
}
#sp_bus_footer div.footer_title {
	background-color: var(--blue-col);
	/*position: absolute;*/
	/*width: 100%;*/
	color: white;
	padding: 1rem 0;
	font-weight: bold;;
}
#sp_bus_footer img.footer_mail {
	width: 60%;
}
#sp_bus_footer a.tel {
	display: inline-block;
	margin-top: 4rem;
	font-size: 3rem;
	position: relative;

	background-image: url(/wp-content/themes/relltd2025/image/sp_bus/tel.png);
	background-repeat: no-repeat;
	background-size: 2.5rem;
	background-position-y: center;
	padding-left: 3rem;
}
#sp_bus_footer div.tel_time {
	margin-bottom: 1rem;
}



/* ここから旧画面設定
@media screen and (min-width: 901px){
	.merit ol > li:nth-child(2) > ul::before{
		content: unset;
	}
	.merit ul > li {
		height: 11rem;
	}
}
@media screen and (max-width: 1000px){
	#sp_bus_header > a.sp_title {
		width: 100%;
		background-size: contain;
		background-repeat: no-repeat;
	}
	ul.front {
		flex-flow: column;
		margin: 2rem 1rem;
	}
	ul.front:first-of-type > li:nth-child(n+3) {
		border-left: none;
		padding-left: 0;
		margin-left: 0;
		border-top: 1px dotted black;
		padding-top: 1rem;
		margin-top: 1rem;
	}
	ul.front:nth-of-type(2) > li:nth-child(n+3) {
		padding-left: 0;
		margin-left: 0;
		border-left: none;
		margin-top: 1rem;
		border-top: 1px solid var(--blue-col);
	}
	ul.front:nth-of-type(2) > li:nth-child(n+3) {
		position: relative;
	}
	ul.front:nth-of-type(2) > li:nth-child(n+3)::after {
		transform: rotate(135deg);
		margin-left: 0;
		left: 50%;
		top: 0;
	}
	.front_list th {
	    word-break: unset;
	}

	.front_example > div > ul:nth-child(2) {
		flex-flow: column;
	}
	.front_example > div > ul > li:nth-child(2) {
		margin-left: 0;
	}
	.front_example > div > ul:nth-child(2) > li:nth-child(5)::before {
		margin-left: 0;
		border-left: none;
		border-top: 1px dotted black;
		width: 100%;
	}
	.front_example > div > ul:last-child {
		flex-flow: wrap;
		justify-content: start;
	}
	.front_example > div > ul:last-child > li:nth-child(2),
	.front_example > div > ul:last-child > li:nth-child(3) {
		padding-bottom: 5rem;
	}
	.front_example > div > ul:last-child > li:nth-child(4) {
		width: unset;
	}
	.front_example > div > ul:last-child > li > ul > li:first-child {
		height: 5rem;
	}

	.merit ul > li {
		min-height: 11rem;
	}
	.merit ol > li {
		width: calc(100% - 4rem);
	}
	.merit ol > li:nth-child(odd),
	.merit ol > li:nth-child(even) {
		margin-left: 0;
		margin-right: 0;
	}
	.merit ul::after {
		content: unset;
	}
	.merit ol > li {
		white-space: break-spaces;
	}
	.merit ol > li {
		background-position-y: bottom;
	}
	#sp_bus_footer a.tel {
		font-size: 10vw;
	}
}

@media screen and (max-width: 460px){
	.merit ol > li {
		font-size: 4vw;
	}
}
旧画面設定ここまで */