@charset "UTF-8";

.card01 {
	background-color: #dbeaf8;
	border-radius: 20px;
	border: 3px solid #91a1af;
	font-weight: bold;
	padding: 1em 2em;
	margin: 0 1em 1em;
}

.rec_comment {
	position: absolute;
	left: 17%;
	font-weight: bold;
	font-size: 76%;
	text-align: center;
	border-radius: 99px;
	border: 2px solid #666;
	background-color: #fff;
	padding: 1em 1.5em;
}
.rec_comment::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	border-style: solid;
	border-width: 0 10px 20px 10px;
	border-color: transparent transparent #666;
	translate: -50% -100%;
}
.rec_comment::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	border-style: solid;
	border-width: 0 7px 15px 7px;
	border-color: transparent transparent #fff;
	translate: -50% -100%;
}
.comment_bottom::before {
	top: auto;
	bottom: 0;
	border-width: 20px 10px 0px 10px;
	border-color: #666 transparent transparent;
	translate: -50% 100%;
}
.comment_bottom::after {
	top: auto;
	bottom: 0;
	border-width: 15px 7px 0 7px ;
	border-color: #fff transparent transparent;
	translate: -50% 100%;
}
#rec_box01 figcaption, #rec_box03 figcaption, #rec_box04 figcaption, #rec_box06 figcaption  {
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 20%;
	font-size: 160%;
	line-height: 1.2;
	letter-spacing: 0.1em;
	text-shadow: black 1px 1px 2px, black -1px 1px 2px,
		black 1px -1px 2px, black -1px -1px 2px;
}
#rec_box02 {
	flex: 25%;
}
#rec_box01 figcaption, #rec_box06 figcaption {
	color: #ff0;
}
#rec_box03 figcaption {
	color: #19a7ff;
	left: 10%;
}
#rec_box04 figcaption {
	color: #f00;
}
.comment_box {
	position: relative;
}
#rec_box01 .rec_comment {
	top: 200px;
}
#rec_box02 .rec_comment {
	top: -30px;
}
#rec_box03 .rec_comment {
	top: 240px;
}
#rec_box05 figure {
	margin-top: 40px;
}
#rec_box08 {
	flex: 60%;
}
#rec_box10 {
	flex: 57%;
}

/* タブレット（768px〜834px）*/
@media (min-width: 760px) and (max-width: 819px) {
	#rec_box02 .rec_comment, #rec_box05 .rec_comment, #rec_box06 .rec_comment {
		left: 30%;
	}
	#rec_box03 .rec_comment {
		top: 320px;
		left: 30%;
	}
}
@media (min-width: 760px) and (max-width: 819px) {
	#rec_box02 .rec_comment, #rec_box05 .rec_comment, #rec_box06 .rec_comment {
		left: 30%;
	}
	#rec_box03 .rec_comment {
		top: 320px;
		left: 30%;
	}
}

/* タブレット（768px〜834px）*/
@media (min-width: 820px) and (max-width: 1049px) {
	.rec_comment {
		padding: 1em 1em;
	}
	#rec_box01 figcaption, #rec_box03 figcaption, #rec_box04 figcaption, #rec_box06 figcaption {
		font-size: 120%;
	}
	#rec_box01 .rec_comment, #rec_box03 .rec_comment {
		top: 110px;
	}
	#rec_box02 figure.tp-imgcol3_box_Img {
		margin-top: 100px;
	}
	#rec_box05 figure.tp-imgcol3_box_Img {
		margin-top: 50px;
	}
}

#special_notes {
	align-items: flex-end;
}
.notes_img img {
	width: auto;
}
.notes_comment {
	border: 2px solid #666;
	border-radius: 50px;
	padding: 1em 4em;
	position: relative;
}
.notes_comment::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	border-style: solid;
	border-width: 10px 0 10px 32px;
	border-color: transparent transparent transparent #666;
	translate: 100% -50%;
}
.notes_comment::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	border-style: solid;
	border-width: 7px 0 7px 25px;
	border-color: transparent transparent transparent #fff;
	translate: 100% -50%;
}

@media only screen and (max-width: 768px) {
	.notes_comment::before {
		top: auto;
		right: auto;
		bottom: 0;
		border-width: /*32px 10px 0 10px*/27px 2px 0 28px;
		border-color: #666 transparent transparent;
		translate: -50% 100%;
	}
	.notes_comment::after {
		top: auto;
		right: auto;
		bottom: 0;
		border-width: /*25px 7px 0 7px*/22px 0px 0 23px;
		border-color: #fff transparent transparent;
		translate: -50% 100%;
	}
	.tp-imgcol2_box.notes_img {
		text-align: center;
		margin-top: 20px;
	}

}