@CHARSET "UTF-8";

:root {
    --sp-leaf-green: #5bbb47;
}


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

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

	/* top */
	& div.title_box {
		display: flex;
		justify-content: center;
		padding: 2rem 1rem;

/*		& > div.wp-block-group__inner-container {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
		& .wp-block-image {
			max-width: 90%;
			margin: 1rem auto;
		}*/
	}

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

	& h2.merit {
		margin-top: 2rem;
		margin-bottom: 2rem;
		font-size: 3rem;
	}

	& .p3_2_list1 {
		& > 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-leaf-green),
					 -2px -2px 0 var(--sp-leaf-green),
					-2px 2px 0 var(--sp-leaf-green),
					2px -2px 0 var(--sp-leaf-green),
					0px 2px 0 var(--sp-leaf-green),
					 0-2px 0 var(--sp-leaf-green),
					-2px 0 0 var(--sp-leaf-green),
					2px 0 0 var(--sp-leaf-green);
				font-size: 3rem;
				top: -0.75rem;
			}
			& .has-sp-cream-yellow-background-color::after {
				content: "便利な設定";
				position: absolute;
				color: var(--sp-leaf-green);
				transform: rotate(-20deg);
				left: -0.5rem;
				top: -1.5rem;
				text-decoration: underline;
				text-underline-offset: 0.25rem;
				speak: none;
			}
			& strong {
				font-size: 1.3rem;
				word-break: auto-phrase;
				padding-bottom: 1rem;
				display: block;
				margin-left: 4rem;
			}
			& em {
				font-size: 0.9rem;
				font-style: normal;
				padding-bottom: 1rem;
				display: block;
			}
		}
	}

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

		& img{
			height: 3rem;
		}
	}
	& .screen1_grp,
	& .screen2_grp,
	& .screen3_grp {
		position: relative;
		margin-bottom: 5rem;

		& .screen1_img > img,
		& .screen2_img > img,
		& .screen3_img > img {
			border: 1px solid var(--gray-col);
		}
		& .bubble1,
		& .bubble2,
		& .bubble3,
		& .bubble4,
		& .bubble5 {
			position: absolute;

			@media (max-width: 950px) {
				& img {
					max-width: 35vw;
				}
			}
		}
		& .bubble1 {
			top: 210px;

			@media (max-width: 950px) {
				top: 21vw;
			}
		}
		& .bubble2 {
			bottom: -50px;
			left: 140px;

			@media (max-width: 950px) {
				top: 45vw;
				left: 15vw;
			}
		}
		& .bubble3 {
			top: 150px;
			right: 0;

			@media (max-width: 950px) {
				top: 15vw;
				right: 0;
			}
		}
		& .bubble4 {
			bottom: -60px;
			right: 0;

			@media (min-width: 600px) and (max-width: 950px) {
				top: 20vw;
				left: calc(50% + 1rem);
			}
			@media (max-width: 600px) {
				top: calc(50% + 2rem);
				right: 0;
			}
		}
		& .bubble5 {
			top: 20px;
			right: 0;

			@media (min-width: 600px) and (max-width: 950px) {
				top: 2vw;
				right: 0;
			}
			@media (max-width: 600px) {
				top: 15vw;
				right: 0;
			}
		}
	}

	& .more1,
	& .more2 {
		margin: 2rem 0;
		padding: calc(83px - 1rem) 2rem 1rem;
		position: relative;

		& .more1_title,
		& .more2_title {
			position: absolute;
			top: -1rem;
		}

		& .more_toptxt > div {
			display: flex;
			align-items: center;
			word-break: auto-phrase;
			flex-wrap: wrap;
			gap: 1rem;
			padding-bottom: 2rem;

			& h3 {
				font-size: 2rem;
				word-break: keep-all;
				padding-right: 1rem;
			}
			& strong {
				text-decoration: solid underline var(--cream-col);
				font-size: 1.5rem;
				text-underline-offset: -0.3rem;
				text-decoration-thickness: 1rem;
			}
		}

		& .more_step {
			margin: 2rem 0;
			flex-wrap: wrap;
			gap: 3rem 0;

			& strong {
				text-decoration: solid underline var(--cream-col);
				text-underline-offset: -0.3rem;
				text-decoration-thickness: 0.75rem;
				word-break: auto-phrase;
			}

			& > div {
				position: relative;
				word-break: auto-phrase;
				flex: 0 1 28%;

				& .wp-block-image,
				& figcaption {
					text-align: center;
				}
			}
			& > div::after {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				border-top: 20px solid transparent;
				border-right: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 15px solid var(--sp-leaf-green);
				right: -2.5rem;
				top: calc(50% - 10px);

				@media (max-width: 600px) {
					border-top: 15px solid var(--sp-leaf-green);
					border-right: 20px solid transparent;
					border-bottom: 20px solid transparent;
					border-left: 20px solid transparent;
					right: calc(50% - 10px);
					top: unset;
					bottom: -2.5rem;
				}
			}
			& > div:last-child::after {
				content: unset;
			}
		}
	}

	& .step {
		padding: 1rem;

		& .step_title > div {
			display: flex;
			align-items: center;
			margin-bottom: 1rem;
			font-size: 1rem;
			word-break: auto-phrase;

			& strong {
				text-decoration: solid underline var(--cream-col);
				text-underline-offset: -0.3rem;
				text-decoration-thickness: 0.75rem;
				word-break: auto-phrase;
				font-size: 1.5rem;
			}
		}
		& .step_title > div .wp-block-image {
			margin: 0 1rem 0 0;
		}

		& .step_list {
			word-break: auto-phrase;
			flex-wrap: wrap;
			gap: 3rem 0;

			& .step_num {
				border-radius: 2rem;
				background-color: var(--sp-leaf-green);
				color: white;
				padding: 0.25rem 0;
				width: 2.75rem;
				font-size: 1.5rem;
				text-align: center;
				font-weight: bold;
			}

			& .wp-block-image,
			& figcaption {
				text-align: center;
			}

			& > div {
				position: relative;
				flex: 0 1 28%;
				word-break: auto-phrase;

				& .p3_2_img09,
				& .p3_2_img11 {
					position: absolute;
					right: 0;
					left: 0;

					@media (max-width: 600px) {
						position: static;
					}
				}
				& .p3_2_img09 {
					top: calc(50% - 77px);
				}
				& .p3_2_img11 {
					top: calc(50% - 23px);
				}
			}
			& > div::after {
				content: "";
				position: absolute;
				width: 0;
				height: 0;
				border-top: 20px solid transparent;
				border-right: 20px solid transparent;
				border-bottom: 20px solid transparent;
				border-left: 15px solid var(--sp-leaf-green);
				right: -2.5rem;
				top: calc(50% - 10px);

				@media (max-width: 600px) {
					border-top: 15px solid var(--sp-leaf-green);
					border-right: 20px solid transparent;
					border-bottom: 20px solid transparent;
					border-left: 20px solid transparent;
					right: calc(50% - 10px);
					top: unset;
					bottom: -2.5rem;
				}
			}
			& > div:last-child::after {
				content: unset;
			}
		}
	}

}

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