@charset "UTF-8";


/*! 埋め込み動画をレスポンシブ対応させる */

/*--------------------------------------------------------------------
 *	共通
 *--------------------------------------------------------------------*/
.f_left,
.f_right {
	text-align: center;
}

.f_left_txt {
	float: left;
	margin: 0;
	text-align: left;
}

.f_left_txt_migi {
	float: left;
	margin: 0 0 0 3em;
	text-align: left;
}
.f_right_txt {
	float: right;
	margin: 0;
	text-align: left;
}
body.voice ul.photo_list {
	margin: 0;
	list-style: none;
	text-align: center;
}
body.voice ul.photo_list li img {
	max-width: 640px;
	width: 100%;
}
body#interview dl.yl_voice::after {
	display: block;
	clear: both;
	content: "";
}
body#interview dl.yl_voice dt {
	display: table-cell;
	float: right;
	margin: 0 0 0 30px;
	text-align: center;
}
body#interview dl.yl_voice dt span {
	display: table-cell;
	vertical-align: middle;
}
body#interview dl.yl_voice dt img {
	border-radius: 60px;
}
body#interview dl.yl_voice dd {
	position: relative;
	display: table-cell;
}
body#interview dl.yl_voice dd::before {
	position: absolute;
	top: 20%;
	right: -20px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 20px;
	border-color: transparent transparent transparent #e25618;
	content: "";
	z-index: 1;
}
body#interview dl.yl_voice dd::after {
	position: absolute;
	top: 20%;
	right: -18px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 15px 0 15px 20px;
	border-color: transparent transparent transparent #fff;
	content: "";
	z-index: 2;
}
body#interview dl.yl_voice dd span {
	display: block;
	padding: 10px;
	border: 1px solid #e25618;
	border-radius: 15px;
	background-color: #fff;
	
}

 
 
/*--------------------------------------------------------------------
 *	737px未満用（SP用）の記述
 *--------------------------------------------------------------------*/
@media screen and (max-width: 736px), print {

body#interview dl.yl_voice dt {
	width: 20%;
}
body#interview dl.yl_voice dd {
	width: 80%;
	vertical-align: middle;
}
body#interview dl.yl_voice dd::before {
	top: 40%;
}
body#interview dl.yl_voice dd::after {
	top: 40%;
}
body#communication article p,
body#handicraft article p {
	margin: 1em auto;
}



}

@media screen and (max-width: 590px), print {

body#interview dl.yl_voice dt {
	width: 25%;
}
body#interview dl.yl_voice dd {
	width: 75%;
}


}


/*--------------------------------------------------------------------
 *	737px以上用（PC用）の記述
 *--------------------------------------------------------------------*/
@media screen and (min-width: 737px), print {
/* 737px以上用（PC用）の記述 */

/*! 埋め込み動画をレスポンシブ対応させる */

.f_left {
	float: left;
	margin: 0 1em 1em 0;
}
.f_right {
	float: right;
	margin: 0 0 1em 1em;
}

body#interview div.comments {
	float: left;
	width: 25%;
	width : -webkit-calc(100% / 4 ) ;
	width : calc(100% / 4 ) ;
}

body#comments div.voice:nth-child(5),
body#comments div.voice:nth-child(9),
body#comments div.voice:nth-child(13) {
	clear: left;
}
body.voice ul.photo_list li {
	float: left;
	width: 32.3%;
	margin-right: 1.5%;
}
body.voice ul.photo_list li:nth-child(3n) {
	margin-right: 0;
}
body.voice ul.photo_list li img {
	width: 100%;
	height: auto;
}
body#interview dl.yl_voice dt {
	width: 120px;
}
body#interview dl.yl_voice dt span {
	width: 120px;
}
body#interview dl.yl_voice dd {
	width: 874px;
}
body#interview dl.yl_voice dd::before,
body#interview dl.yl_voice dd::after {
	top: 30%;
}
body#communication article p,
body#handicraft article p {
	margin: 2em auto;
}

/* 737px以上用（PC用）の記述 end */



/*------------------------------------------ clear */

body {
	zoom: 100%;
}

body:after,
c_fix::after {
	content: ".";
	display: block;
	visibility: hidden;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
	clear: both;
}