@charset "utf-8";
/*=================================
ABOUTレイアウト
===================================*/
.area p{
font-size: 15px;
line-height: 1.6em;
letter-spacing: 0.05em;
text-align:justify;
color: #000;
	
}
.area ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

/*プロフィール*/
table {}
.tbl {
width: 100%;
font-size: 14px;
color: #000;
text-align:left;
letter-spacing: 0.1em;
border-spacing:0px;
margin-top: auto;
}
.tbl tr {}

.tbl th {
width: 40%;

border-bottom: 1px solid #265CFF;
padding:9px 0px 9px 5px;
}
.tbl td {
width: 60%;
border-bottom: 1px solid #265CFF;
padding:9px 0px 9px 5px;
}

/* ########### 529px 以下 ########### */
@media screen and (max-width: 529px) {

/*内容*/
.area img{
width: 100%;
height: auto;
}

/*一行*/
.area ul.area-1-box{
margin-bottom: 0px;
}
/*複数行*/
.area ul.area-3-box{
margin-bottom: 0px;
}
/*複数行*/
.area ul.area-2-box{
margin-bottom: 30px;
}
.area li{
width: 100%;
}
.area li.stylist-text{
width: 100%;
}
.area li.area-text{
width: 100%;
}
.area-1-1 , .area-1-4{
margin-bottom: 20px;
}
.area-1-2 img{
width: 100%;
height: auto;
text-align:right;
display: block;	
margin: 0 0 0 auto
}
.area-1-3 img{
width: 100%;
height: auto;
display: block;	
}

/*空間の複数行*/
.area li.area-3{
width: 47%;
display: flex;
flex-direction: column; 
}
.area li.area-3 img{
width:100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px
}
/*空間のテキストエリア*/
.area p.space-text{
background: #fff;
font-size: 14px;
line-height: 1.4em;
padding:12px;
	letter-spacing: 0em;
flex-grow: 1; 
	}
/*スタイリスト*/
.area ul.area-4-box{
margin-bottom: 50px;
}
.area li.area-4-2{
display: flex;
flex-direction: column;
}
.area-4-1 img{
width: 100%;
height: auto;
display: block;	
}
/*プロフィール*/
table {}
.tbl {
width: 100%;
font-size: 14px;
color: #333;
text-align:left;
letter-spacing: 0.15em;
border-spacing:0px;
margin-top: auto;
margin-bottom: 20px
}
/*入れ替え*/
.area-4-1{
order: 2;
}
.area-4-2{
order: 1;
}
.area-1-4{
order: 1;
}
.area-1-3{
order: 2;
}
}

/* ########### 530pxから768pxまで ########### */
@media screen and (min-width: 530px) and (max-width: 768px) {

/*内容*/
.area img{
width: 100%;
height: auto;
}
/*一行*/
.area ul.area-1-box , .area-3-box{
margin-bottom: 0px;
}
/*複数行*/
.area ul.area-2-box{
margin-bottom: 50px;
}

.area li{
width: 50%;
}
.area li.stylist-text{
width: 100%;
}
.area li.area-text{
width: 100%;
}
.area-1-2 img{
width: 90%;
height: auto;
text-align:right;
display: block;	
margin: 0 0 0 auto
}
.area-1-3 img{
width: 90%;
height: auto;
display: block;	
}

/*空間の複数行*/
.area li.area-3{
width: 48%;
margin-bottom: 20px;
display: flex;
flex-direction: column; 
}
.area li.area-3 img{
width:100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px
}
/*空間のテキストエリア*/
.area p.space-text{
background: #fff;
font-size: 14px;
line-height: 1.4em;
padding:13px;
flex-grow: 1; 
	}

/*スタイリスト*/
.area ul.area-4-box{
margin-bottom: 50px;
}
.area li.area-4-2{
display: flex;
flex-direction: column;
}
/*スタイリストのテキストエリア*/
.area p.sty-text{
margin:0px 0px 30px 0px; 
	}
.area-4-1 img{
width: 90%;
height: auto;
display: block;	
}
}

/* ########### 769px 以上 ########### */
@media screen and (min-width: 769px) {
/*内容*/

.area img{
width: 100%;
height: auto;
}

/*一行*/
.area ul.area-1-box , .area-3-box{
margin-bottom: 0px;
}
/*複数行*/
.area ul.area-2-box{
margin-bottom: 50px;
}

.area li{
width: 50%;
}
.area li.stylist-text{
width: 100%;
}
.area li.area-text{
width: 100%;
}
.area-1-2 img{
width: 90%;
height: auto;
text-align:right;
display: block;	
margin: 0 0 0 auto
}
.area-1-3 img{
width: 90%;
height: auto;
display: block;	
}

/*空間の複数行*/
.area li.area-3{
width: 30%;

margin-bottom: 20px;
display: flex;
flex-direction: column; 

}
.area li.area-3 img{
width:100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px
}
/*空間のテキストエリア*/
.area p.space-text{
background: #fff;
font-size: 14px;
line-height: 1.4em;
padding:15px 15px 15px 15px;
flex-grow: 1; 
	}
	
/*スタイリスト*/
.area ul.area-4-box{
margin-bottom: 50px;
}
.area li.area-4-2{
display: flex;
flex-direction: column;
}
/*スタイリストのテキストエリア*/
.area p.sty-text{
margin:0px 0px 30px 0px; 
	}
	
.area-4-1 img{
width: 90%;
height: auto;
display: block;	
}
}