@charset "UTF-8";

/*@import "../../css/ZZZ.css";*/

/*/==========================================================
/ 
/ お客さまからのお褒めの声
/
==========================================================/*/

/*----------------------------------

 冒頭文

----------------------------------*/
#top_msg{
	display:block;
	overflow:hidden;
}

#top_msg > img{
	float:left;
	margin-right:10px;
}

#top_msg > p{
	margin:0;
}

#top_msg > p + p{
	margin-top:1em;
}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#top_msg > img{
		width: min(25vw,131px);
		height:auto;
	}
}

/*----------------------------------

 本文切り替えタブ

----------------------------------*/
#ul_tab{
	display:block;
	overflow:hidden;
	position:relative;
	margin:var(--mgn-m) 0;
}

#ul_tab::after{
	content:"";
	display:block;
	width: 100%;
	height:2px;
	border-bottom: 2px solid #3498db;
	position: relative;
	top:-2px;
}


#ul_tab > ul{
	display:flex;
	gap:0 10px;
	justify-content:space-between;
	padding:0 10px;
}

#ul_tab > ul > li{
	flex:1;
	border: 2px solid #3498db;
}

#ul_tab > ul > li > label{
	display:block;
	overflow:hidden;
	cursor:pointer;
}

#ul_tab > ul > li > label > input{
	display:none;
}

#ul_tab > ul > li > label > span{
	display:block;
	overflow:hidden;
	padding:0.25em 0.5em;
	text-align:center;
	color:#3498db;
}
#ul_tab > ul > li > label > span:hover{
	background-color:#d9f0ff;
}

#ul_tab > ul > li > label > input:checked + span{
	color:#ffffff;
	background-color:#3498db;
}

/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	#ul_tab > ul{
		flex-wrap:wrap;
		gap:10px 10px;
	}

	#ul_tab > ul > li{
		flex:auto;
		width:calc(50% - 10px);
	}

	#ul_tab > ul > li:first-child{
		width:100%;
	}
}


/*----------------------------------

 本文記事

----------------------------------*/
#voice_list{
	display:block;
	overflow:hidden;
}

section[id^='tab_']{
	display:none;
	overflow:hidden;
}

section[id^='tab_'] > ul{
	display:block;
	overflow:hidden;
}

section[id^='tab_'] > ul > li{
	display:flex;
	align-items:flex-start;
	gap:0 0;
}

section[id^='tab_'] > ul > li + li{
	margin-top: var(--mgn-m);
}

/*.tb00 section[id^='tab_'],*/
.tb00 #tab_content1,
.tb01 #tab_content2,
.tb02 #tab_content3,
.tb03 #tab_content4,
.tb04 #tab_content5{
	display:block;
}

.dialog > p {
	padding:0.75em 1.0em;
	position: relative;
	border: solid 3px #33CC99;
	border-radius: 10px;
	margin:0 0 0 20px;
}

.dialog > p:before {
	content: "";
	position: absolute;
	top: 50%;
	left: -24px;
	margin-top: -12px;
	border: 12px solid transparent;
	border-right: 12px solid #ffffff;
	z-index: 2;
}

.dialog > p:after {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -14px;
	border: 15px solid transparent;
	border-right: 14px solid #33CC99;
	z-index: 1;
}


.dlg_02 .dialog > p{
	border-color:#6633FF;
}
.dlg_02 .dialog > p:after{
	border-right: 14px solid #6633FF;
}

.dlg_03 .dialog > p{
	border-color:#0066CC;
}
.dlg_03 .dialog > p:after{
	border-right: 14px solid #0066CC;
}

.dlg_04 .dialog > p{
	border-color:#FF6699;
}
.dlg_04 .dialog > p:after{
	border-right: 14px solid #FF6699;
}



/* for Narrow --------------------*/
@media screen and ( max-width:979px) {


}


/* for Sp --------------------*/
@media screen and ( max-width:768px) {

	section[id^='tab_'] > ul > li img{
		width: min(25vw,150px);
		height:auto;
	}

	.dialog > p:before {
		content: "";
		position: absolute;
		top: 34px;
		left: -24px;
		margin-top: -12px;
		border: 12px solid transparent;
		border-right: 12px solid #ffffff;
		z-index: 2;
	}

	.dialog > p:after {
		content: "";
		position: absolute;
		top: 34px;
		left: -30px;
		margin-top: -14px;
		border: 15px solid transparent;
		border-right: 14px solid #33CC99;
		z-index: 1;
	}

}