@charset "utf-8";

/* MakingTitle
------------------------------------------*/
.MakingTitle {
	position: relative;
	padding: 10px 20px;
	border: 2px solid #55d4ff;
	background-color: #55d4ff;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 3.2rem;
	font-weight: 700;
	color: #fff;
	text-align: left;
}

.MakingTitle.-orange {
	border: 2px solid #ffad2a;
	background-color: #ffad2a;
}

.MakingTitle::after {
	position: absolute;
	top: 4px;
	left: 4px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	content: "";
	border: 2px solid #fff;
}

@media (max-width: 767px) {
	.MakingTitle {
		font-size: 2rem;
	}
}

/* MakingText
------------------------------------------*/
.MakingText {
	font-family: "Noto Sans JP", sans-serif;
	text-align: left;
}

/* MakingBubble
------------------------------------------*/
.MakingBubble {
	display: flex;
	align-items: center;
}

.MakingBubble + .MakingBubble {
	margin-top: 40px;
}

.MakingBubble.-reverse {
	flex-direction: row-reverse;
}

.MakingBubble_thumb {
	padding-right: 30px;
}

.MakingBubble.-reverse .MakingBubble_thumb {
	padding-right: 0;
	padding-left: 30px;
}

.MakingBubble_textBox {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px;
	text-align: center;
	color: #ddffc3;
	background-color: currentColor;
	font-family: "Noto Sans JP", sans-serif;
}

.MakingBubble_textBox::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-right: 15px solid currentColor;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	left: -15px;
}

.MakingBubble_text {
	color: #333;
}

.MakingBubble_textEm {
	color: #399e3b;
	font-weight: 700;
	font-size: 2.2rem;
}

.MakingBubble_textEm.-black {
	color: #000000;
	text-shadow: 2px 2px 10px rgb(255 255 255);
}
.MakingBubble_textEm.-blue {
	color: #0749bc;
}
.MakingBubble_textEm.-orange {
	color: #f7931e;
}
.MakingBubble_textEm.-purple {
	color: #800080;
}

.MakingBubble.-reverse .MakingBubble_textBox::after {
	border-right: 0;
	border-left: 15px solid currentColor;
	left: auto;
	right: -15px;
}

.MakingBubble.-yellow .MakingBubble_textBox {
	color: #fffca7;
}
.MakingBubble.-green .MakingBubble_textBox {
	color: #ddffc3;
}
.MakingBubble.-blue .MakingBubble_textBox {
	color: #d3f4ff;
}
.MakingBubble.-orange .MakingBubble_textBox {
	color: #ffeed2;
}
.MakingBubble.-purple .MakingBubble_textBox {
	color: #ebbfff;
}

@media (max-width: 767px) {
	.MakingBubble_thumb {
		padding-right: 20px;
	}

	.MakingBubble.-reverse .MakingBubble_thumb {
		padding-right: 0;
		padding-left: 20px;
	}

	.MakingBubble_img {
		max-width: 80px;
		max-height: 80px;
		width: auto;
		height: auto;
	}

	.MakingBubble_textEm {
		font-size: 1.6rem;
	}
}

/* MakingBox
------------------------------------------*/
.MakingBox {
	padding: 60px;
	background: #fff;
	border: solid 3px #95d09d;
	border-radius: 10px;
	margin-bottom: 60px;
	box-shadow: 0 5px 15px rgb(0 0 0 / 8%);
}

.MakingBox.-blue {
	border: solid 3px #55d4ff;
}
.MakingBox.-orange {
	border: solid 3px #f7931e;
}

@media (max-width: 767px) {
	.MakingBox {
		padding: 40px 20px;
	}
}

/* MakingBoxBubble
------------------------------------------*/
.MakingBoxBubble {
	display: flex;
}

.MakingBoxBubble.-reverse {
	flex-direction: row-reverse;
}

.MakingBoxBubble_thumb {
	flex-basis: 25%;
	padding-left: 20px;
}

.MakingBoxBubble_img {
	width: 100%;
	height: auto;
}

.MakingBoxBubble_textBox {
	position: relative;
	flex-basis: 75%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	text-align: center;
	color: #ddffc3;
	background-color: currentColor;
}

.MakingBoxBubble_textBox::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 15px solid currentColor;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	right: -15px;
}

.MakingBoxBubble_textBox.-blue {
	color: #d3f4ff;
}
.MakingBoxBubble_textBox.-orange {
	color: #ffeed2;
}

.MakingBoxBubble_text {
	color: #555;
	font-family: "Noto Sans JP", sans-serif;
}

.MakingImgText.-white {
	color: #ffffff;
	text-shadow: 1px 1px 6px black;
}

.MakingBoxBubble_textEm {
	font-weight: 700;
	font-size: 2.2rem;
}

.MakingBoxBubble_textEm.-blue {
	color: #0749bc;
}
.MakingBoxBubble_textEm.-orange {
	color: #f7931e;
}

.MakingBoxBubble_textSmall {
	font-size: 1.4rem;
}

@media (max-width: 767px) {
	.MakingBoxBubble {
		flex-direction: column;
		align-items: center;
	}

	.MakingBoxBubble.-reverse {
		flex-direction: column-reverse;
	}

	.MakingBoxBubble_thumb {
		padding-left: 0;
		width: 100px;
		margin-top: 30px;
	}

	.MakingBoxBubble_textBox::after {
		top: auto;
		left: 0;
		right: 0;
		margin: auto;
		bottom: -13px;
		border-left: 20px solid transparent;
		border-top: 20px solid transparent;
		border-bottom: 20px solid currentColor;
		transform: rotate(45deg);
	}

	.MakingBoxBubble_text {
		font-size: 1.4rem;
	}

	.MakingBoxBubble_textEm {
		font-weight: 700;
		font-size: 1.6rem;
	}

	.MakingBoxBubble_textSmall {
		font-size: 1.2rem;
	}
}

/* MakingImgText
------------------------------------------*/
.MakingImgText {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px;
	margin: auto;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: bold;
	font-size: 2rem;
	text-align: center;
	text-shadow: 2px 2px 10px rgb(255 255 255);
	color: #000;
}

.MakingImgText.-white {
	color: #ffffff;
	text-shadow: 1px 1px 6px black;
}

@media (max-width: 767px) {
	.MakingImgText {
		font-size: 1.4rem;
	}
}

/* MakingImgIcon
------------------------------------------*/
.MakingImgIcon {
	text-align: center;
	font-size: 3rem;
}

@media (max-width: 767px) {
	.MakingImgText {
		font-size: 1.4rem;
	}
}