@charset "UTF-8";

/* ▼▼▼ MIO-VP
=====================================*/
/* 共通 */
section{
    max-width: 1000px;
    margin: 0 auto;
	padding: 50px 20px;
    }
.main_img{
    max-width: 1000px;
    margin: 0 auto;
	padding: 50px 20px 0;
	}
	.main_img img{
		width: 100%;
		}
p.read{
    margin: 0 auto 50px;
	}

.vp_list{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto 50px;
	}
	.vp_list li{
		overflow: hidden;
		width: 48%;
		}

	.vp_list li:nth-child(odd){
		margin-right: 4%;
		}
	.vp_list li:not(:nth-child(-n + 2)){
		margin-top: 20px;
		}
	.vp_list li div{
		max-width: 184px;
		width: 100%;
		}
	.vp_list li div.txt_area{
		display: table-cell;
		background: #FAF7F7;
		vertical-align: middle;
		width: 60%;
		padding: 0 20px;
		position: relative;
		}
		.vp_list li div.txt_area:after{
			font-family: "FontAwesome";
			content: "\f105";
			color: #A25E5E;
			font-size: 20px;
			position: absolute;
			top: 50%;
			right: 10px;
			transform: translate(-0%,-50%);
			-webkit-transform: translate(-0%,-50%);
			}
	.vp_list li div.txt_area h3{
		color: #A25E5E;
		margin-bottom: 10px;
		}
	.vp_list li a{
		display: table;
		}
p.desc{
	color: #A25E5E;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	}

/* スタッフ詳細 */
.shop_data{
	margin-bottom: 50px;
	}
.staff{
	display: table;
	max-width: 600px;
	margin: 0 auto 50px;
	overflow: hidden;
	}
	.staff div{
		display: table-cell;
		width: 45%;
		}
	.staff div.txt_area{
		background: #FAF7F7;
		vertical-align: middle;
		width: 55%;
		padding: 20px 40px;
		}
		.staff div.txt_area02{
			width: 55%;
			padding-left: 20px;
		    vertical-align: top;
			}
	.staff div.txt_area h3{
		border-bottom: 1px dotted #A25E5E;
		color: #A25E5E;
		font-size: 18px;
		font-weight: bold;
		padding-bottom: 20px;
		margin-bottom: 20px;
		}
	.staff div.txt_area p{
		font-size: 18px;
		font-weight: bold;
		}
	.staff div.txt_area p span{
		display: block;
		font-size: 16px;
		font-weight: normal;
		}
.bg_txt.from_staff{
	background: #FAF7F7;
	}
	.bg_txt.from_staff p{
		padding-left: 80px;
		text-align: left;
		position: relative;
		}
	.bg_txt.from_staff p:before{
		content: "";
		background: url(../img/mio_vp/from_staff.svg) no-repeat center/contain;
		width: 44.6px;
		height: 52.11px;
		position: absolute;
		left: 10px;
		}
.other_staff{
	border-top: 1px dotted #ccc;
	font-size: 22px;
	text-align: center;
	margin: 50px 0 30px;
	padding-top: 50px;
	}

/* ▼▼▼ 480px〜768px
=====================================*/
@media screen and (max-width: 768px) {
/* 共通 */
section{
    padding: 0 20px 30px;
    }

.main_img{
    max-width: 1000px;
    margin: 0 auto;
	padding: 0 0 30px;
	}
p.read{
    margin: 0 auto 50px;
	}

.vp_list{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 auto 50px;
	}
	.vp_list li{
		overflow: hidden;
		width: 100%;
		}

	.vp_list li:nth-child(odd){
		margin-right: 0;
		}
	.vp_list li:not(:first-child){
		margin-top: 20px;
		}
	.vp_list li div{
		width: 100%;
		}
	.vp_list li div.txt_area{
		width: 60%;
		padding: 0 15px;
		}
	.vp_list li div.txt_area h3{
		margin-bottom: 5px;
	    font-feature-settings: 'palt'1;
		}
p.desc{
	font-size: 15px;
    margin-bottom: 10px;
	}

/* スタッフ詳細 */
.shop_data{
	margin-bottom: 30px;
	}
.staff{
	display: table;
	max-width: 600px;
	margin: 0 auto 30px;
	overflow: hidden;
	}
	.staff div{
		display: table-cell;
		width: 45%;
		}
	.staff div.txt_area{
		background: #FAF7F7;
		vertical-align: middle;
		width: 55%;
		padding: 0 15px;
		}
		.staff div.txt_area02{
			width: 55%;
			padding-left: 20px;
		    vertical-align: top;
			}
	.staff div.txt_area h3{
		border-bottom: 1px dotted #A25E5E;
		color: #A25E5E;
		font-size: 14px;
		font-weight: bold;
		padding-bottom: 10px;
		margin-bottom: 10px;
		}
	.staff div.txt_area p{
		font-size: 15px;
		font-weight: bold;
		}
	.staff div.txt_area p span{
		display: block;
		font-size: 13px;
		font-weight: normal;
		}
.bg_txt.from_staff{
	background: #FAF7F7;
	}
	.bg_txt.from_staff p{
		padding-left: 60px;

		}
	.bg_txt.from_staff p:before{
		left: 0;
		top: 50%;
		transform: translate(-0%,-50%);
		-webkit-transform: translate(-0%,-50%);
		}
.other_staff{
	font-size: 15px;
	margin: 20px 0 10px;
	padding-top: 20px;
	}
}

/* ▼▼▼ 340px
=====================================*/
@media screen and (max-width: 340px) {
.staff div.txt_area h3{
	font-size: 13px;
	padding-bottom: 5px;
	margin-bottom: 5px;
	}

}