@CHARSET "UTF-8";

:root {
    --sp-flame-orange: #f16e3e;
}


/* ヘッダー */
#sp_yoyaku_header ul#menu-sp_yoyaku_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(--sp-flame-orange);
		border-top: 3px solid var(--sp-flame-orange);
		border-radius: 1px;
		transform: rotate(135deg);
		left: 0;
		top: calc(50% - 0.25em);
	}
}
#sp_yoyaku_header ul#menu-sp_yoyaku_header li a {
    color: black;
}


/* content */
#sp_content {
	clear: both;

	& .merit {
		font-style: normal;
		font-size: 2.75rem;
		margin-top: 2rem;
		word-break: auto-phrase;

		& strong {
			text-decoration: solid underline var(--blond-col);
			text-underline-offset: -0.3rem;
			text-decoration-thickness: 1rem;
		}
	}

	& .p4_2_list1 {
		margin: 2rem 0 4rem;

		& > div {
			display: flex;
			flex-wrap: wrap;
			gap: 2rem;
			counter-reset: list1_num 0;
			justify-content: center;

			& .has-sp-cream-yellow-background-color {
				border: 1rem solid var(--raicho-cleam-col);
				border-radius: 1rem;
				width: calc(475px - 7rem);
				position: relative;

				& img {
					max-width: 100%;
					max-height: 150px;
					width: auto !important;
					height: auto;
					margin: 1rem auto;
					display: block;
				}
			}
			& .has-sp-cream-yellow-background-color::before {
				counter-increment: list1_num 1;
				content: counter(list1_num);
				position: absolute;
				color: white;
				text-shadow:2px 2px 0 var(--sp-flame-orange),
					 -2px -2px 0 var(--sp-flame-orange),
					-2px 2px 0 var(--sp-flame-orange),
					2px -2px 0 var(--sp-flame-orange),
					0px 2px 0 var(--sp-flame-orange),
					 0-2px 0 var(--sp-flame-orange),
					-2px 0 0 var(--sp-flame-orange),
					2px 0 0 var(--sp-flame-orange);
				font-size: 3rem;
				top: -0.75rem;
				font-style: italic;
				left: 4rem;
			}
			& .has-sp-cream-yellow-background-color::after {
				content: "POINT";
				position: absolute;
				color: white;
				background-color: var(--sp-flame-orange);
				left: -0.5rem;
				top: 0.8rem;
				speak: none;
				transform: skewX(170deg);
				padding: 0 0.5rem;
				font-weight: bold;
			}
			& strong {
				font-size: 1.3rem;
				word-break: auto-phrase;
				display: block;
				margin-left: 5rem;
				margin-top: -0.7rem;
			}
			& em {
				font-size: 0.9rem;
				font-style: normal;
				padding-bottom: 1rem;
				display: block;
			}
		}
	}

	& .screen_title > div {
		display: flex;
		align-items: center;
		margin-bottom: 1rem;
		font-size: 1.2rem;
		flex-wrap: wrap;
	}
	& .screen_title > div .wp-block-image {
		margin: 0 1rem 0 0;

		& img{
			height: 3rem;
		}
	}
	& .screen1_grp,
	& .screen2_grp {
		position: relative;

		& img {
			border: 1px solid var(--gray-col);
		}
		& figcaption {
			text-align: right;
		}
	}

	& .option_grp {
		padding: 1rem 0 2rem;
		margin-bottom: 4rem;

		& .option_title > div {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0 1rem;

			& h3 {
				background-color: var(--sp-flame-orange);
				color: white;
				width: 7em;
				border-radius: 0 0.25em 0.25em 0;
				text-align: center;
				padding: 0.2em 0;
			}
		}
		& .option_parents {
			margin: 2rem 2rem 0;
			padding: 2rem;

			& .wp-block-columns {
				flex-wrap: nowrap;
			}
		}
	}

	& .keybox_grp {
		& h3 {
			font-size: 1.75rem;
			margin-bottom: 1rem;
		}
		& .keybox_txt {
			word-break: auto-phrase;
			padding-bottom: 2rem;

			& strong {
				text-decoration: solid underline var(--cream-col);
				text-underline-offset: -0.3rem;
				text-decoration-thickness: 1rem;
			}
		}
		& .keybox_system {
			align-items: end;
			flex-wrap: nowrap;

			& img {
				margin: 0 auto;
				display: block;
				max-width: 33vw;
				height: auto;
			}
			& > div .center_txt + div img {
				max-width: 11vw;
			}
			& > div .center_txt {
				font-size: 1.25rem;
				margin: 0 auto calc(100px - 4rem);
				word-break: auto-phrase;

				@media (max-width: 600px) {
					font-size: 1rem;
				}
			}
			& > div .center_txt,
			& > div:first-child,
			& > div:last-child {
				position: relative;
			}
			& > div:first-child::before,
			& > div:last-child::before {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				border-top: 20px solid transparent;
				border-right: 15px solid var(--sp-flame-orange);
				border-bottom: 20px solid transparent;
				border-left: 20px solid transparent;
				right: -2rem;
				bottom: calc(1rem + 46px);
			}
			& > div:last-child::before {
				right: unset;
				left: -3rem;
			}
			& > div .center_txt::before,
			& > div .center_txt::after {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				border-top: 15px solid var(--sp-flame-orange);
				border-right: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 20px solid transparent;
				right: -2rem;
				bottom: 4rem;
			}
			& > div .center_txt::after {
				border-top: 20px solid transparent;
				border-bottom: 15px solid var(--sp-flame-orange);
				right: unset;
				left: -2rem;
				bottom: calc(4rem + 20px);
			}
			& figcaption {
				text-align: center;
				word-break: auto-phrase;
			}
		}
	}

	& .select_option {
		& h2 {
			font-size: 2.75rem;
		}
	}
	& .option_tab {
		border-radius: 0.5rem 0.5rem 0 0;
		width: 40%;
	}
	& .option_tub_grp > div {
		display: flex;
		border-bottom: 5px solid var(--sp-flame-orange);
		gap: 1rem;
		align-items:stretch;

		& .option_tab,
		& .option_tab + p {
			word-break: auto-phrase;
			align-items: center;
			display: flex;
		}
	}
	& .splats_key {
		& .splats_key_table {
			flex-wrap: wrap;

			& > div {
				box-shadow: 0 0 0 1px var(--dark-gray-col);
				flex: 1 0 28%;
				margin: 0;
				padding: 1rem 0;

				img {
					margin: 1rem;
					max-width: calc(100% - 2rem);
				}
				& figcaption {
					text-align: center;
				}
			}
		}
	}
	& .plan_grp1,
	& .plan_grp2,
	& .plan_grp3 {
		margin-bottom: 5rem;
		position: relative;


		& .has-sp-sunset-orange-background-color {
			border-radius: 0.5rem 0.5rem 0 0;
		}
		& ul {
			list-style-type: none;
			border: 2px solid var(--orange-col);
			border-radius: 0 0 0.5rem 0.5rem;
			padding: 1rem;

			& li {
				padding-left: 1.5rem;
				position: relative;
			}
			& li::before {
				content: "●";
				color: var(--orange-col);
				position: absolute;
				left: 0;
			}
		}
		& .has-sp-stone-greige-background-color {
			padding: 1rem;
			border-radius: 1rem;
			position: relative;

			@media (max-width: 600px) {
				margin-top: 1rem;
			}
		}
		& .has-sp-stone-greige-background-color::before {
			content: "";
			position: absolute;
			top: 3rem;
			left: 0;
			border-style: solid;
			border-width: 0 16px 16px 0;
			border-color: transparent var(--stone-greige) transparent transparent;
			translate: -100% calc(-50% - 0.4px);
			transform: skew(0, -10deg);
			transform-origin: right;

			@media (max-width: 600px) {
				top: 2px;
				left: 50%;
				border-color: transparent transparent var(--stone-greige);
				translate: calc(-50% - 0.4px) -100%;
				transform-origin: bottom;
			}
		}
		& .option_tub_grp + div {
			margin: 0;
		}
	}
	& .plan_grp3 > div:first-child > p {
		border: 2px solid var(--orange-col);
		border-radius: 0.5rem;
		padding: 1rem;
	}
	& .plan_grp1::after,
	& .plan_grp3::before {
		content: "+";
		color: white;
		background-color: var(--orange-col);
		font-weight: bold;
		font-size: 4rem;
		border-radius: 3rem;
		width: 3.5rem;
		display: block;
		text-align: center;
		line-height: 3rem;
		padding: 0px 0 0.5rem;
		position: absolute;
		left: calc(50% - 1.75rem);
	}
	& .plan_grp1::after {
		bottom: -4.25rem;
	}
	& .plan_grp3::before {
		top: -4.25rem;
	}


	& .step_title > div {
		display: flex;
		align-items: center;
		margin-bottom: 1rem;
		font-size: 1.2rem;
		word-break: auto-phrase;
		flex-wrap: wrap;
	}
	& .step_title > div .wp-block-image {
		margin: 0 1rem 0 0;
	}

	& .step_box,
	& .step_cloud {
		word-break: auto-phrase;
		flex-wrap: wrap;
		gap: 3rem 0;
		align-items: center;
		border-radius: 1rem;

		& .step_num {
			border-radius: 2rem;
			background-color: var(--sp-flame-orange);
			color: white;
			padding: 0.25rem 0;
			width: 2.75rem;
			font-size: 1.5rem;
			text-align: center;
			font-weight: bold;
			margin: 0 auto;
		}
	}
	& .step_cloud {
		flex-wrap: nowrap;

		& > div:first-child,
		& > div:last-child {
			flex: 2;
		}
	}
	& .step_box::after,
	& .step_cloud::after,
	& .step_mail::after {
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border-top: 15px solid var(--sp-flame-orange);
		border-right: 20px solid transparent;
		border-bottom: 20px solid transparent;
		border-left: 20px solid transparent;
		left: calc(50% - 20px);
		bottom: -2.5rem;
	}
	& .step_mail::after {
		bottom: -1.75rem;
	}
	& .wp-block-image,
	& figcaption {
		text-align: center;
	}

	& > div {
		position: relative;
		flex: 0 1 28%;
		word-break: auto-phrase;
	}
	& .step_box:last-child::after {
		content: unset;
	}
}


.parent{
	display: flex;
	justify-content: center;
	padding: 2rem 1rem;

	& img {
		height: auto;
	}
}

.explain{
	font-size:1.2rem;
}

.mail{
	margin-left:4rem;
	size:200%;
}

.mail_receive{
	margin-left:2rem;
}

/* フッター */
#sp_yoyaku_footer {
	border: 5px solid var(--sp-flame-orange);
	border-radius: 1rem;
	margin: 2rem 0;
	text-align: center;
}
#sp_yoyaku_footer div.footer_title {
	background-color: var(--sp-flame-orange);
	color: white;
	padding: 1rem 0;
	font-weight: bold;
}
#sp_yoyaku_footer img.footer_mail {
	width: 60%;
}