@charset "utf-8";

.toppage{
	display: none;
}
.op_animation{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
	background: #fff url(../img/top/opening.png) no-repeat center center;
}

.min{
	font-family: "Sawarabi Mincho";
}


/* top */
#index{
	width: 1000px;
	margin: auto;
}

#index .mv{
	margin-top: 25px;
	min-height: 608px;
}

#index .open{
	margin-top: 110px;
}
#index .open p{
	width: 960px;
	margin: auto;
	font-size: 18px;
	line-height: 27px;
	margin-top: 30px;
	
}
#index .open p a{
	text-decoration:underline;
}

#index .contents{
	margin-top: 120px;
}
#index .contents ul{
	padding: 50px 0 35px;
	font-size: 0;
}
#index .contents ul li{
	display: inline-block;
	vertical-align: top;
}
#index .contents ul li p{
	font-size: 13px;
	line-height: 23px;
	padding-left: 4px;
	margin-top: 10px;
}
#index .contents ul.contentsLink01 li{
	margin-right: 25px;
}
#index .contents ul.contentsLink01 li:nth-child(3n){
	margin-right: 0;
}
#index .contents ul.contentsLink02 li{
	margin-right: 24px;
}
#index .contents ul.contentsLink02 li:nth-child(4n){
	margin-right: 0;
}

#index .campaign{
	margin-top: 50px;
}
#index .campaign figure{
	margin-top: 50px;
}

#index .sns{
	margin-top: 85px;
	padding-bottom: 90px;
}
#index .sns .blog{
	width: 420px;
	float: left;
}
#index .sns .blog p.blogImg{
	margin-top:30px;
	
}

#index .sns .insta{
	width: 500px;
	float: right;
}
.memBG {
    text-align: left;
    font-size: 14px;
    line-height: 20px;
    margin: 30px auto 0;
}
.memBG Ul {
	width: 400px;
    float: left;
    padding: 0 0 15px;
}
.memBG li {
	margin-bottom: 10px;
	border-bottom: 1px dotted #cfcfcf;
	padding: 5px 0 10px 15px;
}
.memBG li::before{
	display: inline-block;
	content: "";
	border-left: 8px solid #3c3c3c;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	padding-right: 5px;
	vertical-align: middle;
}
.memBG a:visited, .memBG a:active, .memBG a:active {
    text-decoration: none;
    margin: 0px 2px 3px 3px;
}
.memBG a:link {
    text-decoration: none;
    margin: 0px 2px 3px 3px;
}

.instaBox{
	margin-bottom: 30px;
}


/* concept */
#concept{
	width: 1000px;
	margin: auto;
	padding-top: 25px;
}
#concept .mv{
	width: 1000px;
	margin: 0 auto;
}
#concept .mv .conceptWrap{
	margin-top: 20px;
}
#concept .mv .conceptTxt{
	padding: 25px 0;
	width: 500px;
	float: left;
}
#concept .mv .conceptTxt p{
	font-size: 14px;
	line-height: 36px;
	padding: 25px 0 20px;
}
#concept .mv .conceptImg{
	width: 320px;
	float: right;
}
#concept .mv ul{
	margin-top: 20px;
}
#concept .mv ul li{
	float: left;
}
#concept .mv ul li:nth-child(1){
	margin-right: 20px;
}
#concept .mv ul li:nth-child(2){
	margin-bottom: 20px;
	margin-right: 20px;
}
#concept .mv ul li:nth-child(3){
	margin-bottom: 20px;
}
#concept .mv ul li:nth-child(4){
	margin-right: 20px;
}

#access{
	padding-top: 60px;
	padding-bottom: 55px;
}
#access .map{
	margin-top: 50px;
}
#access .info{
	width: 900px;
	margin: 35px auto 0;
	box-sizing: border-box;
	padding: 0 5px;
}
#access .info .infoLeft{
	width: 400px;
	float: left;
}
#access .info .infoRight{
	width: 400px;
	float: right;
}
#access .info ul li{
	font-size: 12px;
	line-height: 24px;
	padding: 10px 0 10px 5px;
	border-bottom: 1px dotted #111111;
}
#access .info ul li a{
	font-size: 16px;
}
#access .info ul li span{
	display: inline-block;
	vertical-align: top;
}
#access .info ul li span.name{
	width: 70px;
}


/* menu*/
#menu{
    margin-top: 25px;
    padding-top: 55px;
}
#menu h2{
	width: 1000px;
	margin: auto;
}
#menu .mvBox{
	width: 100%;
	margin-top: 40px;
	background: url(../img/menu/mv_menu.png) no-repeat center center;
	background-size: 100% auto;
}
#menu .mvBox .mvBG{
	padding: 25px 0;
	background: url(../img/menu/bg_menuMV.png) repeat;
}
#menu .mvBox .mvBG .whBox{
	width: 860px;
	margin: auto;
	background: rgba(255,255,255,0.8);
	box-sizing: border-box;
	padding: 25px 35px;
}
#menu .mvBox .mvBG .whBox h3{
	font-size: 16px;
	line-height: 26px;
}
#menu .mvBox .mvBG .whBox h3::after{
	display: inline-block;
	content: url(../img/menu/img_menu.png);
	vertical-align: middle;
	padding-left: 25px;
	line-height: 100%;
}
#menu .mvBox .mvBG .whBox p.menuTxt{
	font-size: 14px;
	line-height: 30px;
	padding-bottom: 20px;
	border-bottom: 1px dotted #000;
}
#menu .mvBox .mvBG .whBox ul{
	font-size: 0;
}
#menu .mvBox .mvBG .whBox ul li{
	display: inline-block;
	font-size: 13px;
	line-height: 25px;
	margin-top: 20px;
}
#menu .mvBox .mvBG .whBox ul li:nth-child(1){
	margin-right: 15px;
}
#menu .mvBox .mvBG .whBox ul li:nth-child(2)::after,
#menu .mvBox .mvBG .whBox ul li:nth-child(3)::after,
#menu .mvBox .mvBG .whBox ul li:nth-child(4)::after{
	display: inline-block;
	content: "｜";
}

#menu .menu{
	width: 900px;
	margin: 20px auto 0;
	padding-bottom: 60px;
}
#menu .menu h4{
	padding-top: 40px;
}
#menu .menu ul{
	margin-top: 15px;
}
#menu .menu ul li{
	font-size: 14px;
	line-height: 26px;
	padding: 10px 5px;
	border-bottom: 1px dotted #000;
}
#menu .menu ul li span.menuL{
	display: block;
	float: left;
	width: 88%;
}
#menu .menu ul li span.menuR{
	display: block;
	float: right;
	width: 12%;
}
#menu .menu p{
	font-size: 12px;
	margin-top: 15px;
}
/* afterservice */
#afterservice{
    padding: 40px 0;
    margin-bottom: 120px;
    background: #dfedf4 url(../img/menu/bg_after.png);
}
#afterservice h4{
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
    text-align: center;
}
#afterservice h4::before{
    display: inline-block;
    vertical-align: middle;
    content: url(../img/menu/ico_after_ribbon_Left.png);
    line-height: 100%;
}
#afterservice h4::after{
    display: inline-block;
    vertical-align: middle;
    content: url(../img/menu/ico_after_ribbon_Right.png);
    line-height: 100%;
}
#afterservice h4 + p{
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    margin-bottom: 40px;
}
#afterservice .serviceBox{
    width: 1000px;
    padding: 30px 50px;
    margin: 0 auto 40px;
    background: #fff;
    box-sizing: border-box;
}
#afterservice .serviceBox ul li{
    width: 48%;
    float: left;
}
#afterservice .serviceBox ul li:last-child{
    float: right;
}
#afterservice .serviceBox ul li .title{
    color: #658ea2;
    font-size: 15px;
    line-height: 25px;
    font-weight: bold;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #658ea2;
}
#afterservice .serviceBox ul li .text{
    font-size: 13px;
    line-height: 23px;
    padding-left: 1em;
    text-indent: -1em;
}
#afterservice .philosophyBox{
    width: 1000px;
    padding: 30px 50px;
    margin: auto;
    background: #fff;
    box-sizing: border-box;
}
#afterservice .philosophyBox ul li{
    width: 48%;
    height: 220px;
    float: left;
    color: #333;
    background: #FEFBE5;
    font-size: 13px;
    line-height: 26px;
    padding: 20px;
    box-sizing: border-box;
}
#afterservice .philosophyBox ul li:last-child{
    float: right;
}
#afterservice .philosophyBox ul li span{
    display: inline-block;
    color: #658ea2;
    font-size: 15px;
    line-height: 25px;
    font-weight: bold;
    margin-bottom: 5px;
}
/* staff */
#staff{
	width: 1000px;
	margin: auto;
	margin-top: 25px;
	padding-top: 55px;
	padding-bottom: 30px;
}
#staff .staffBox{
	width: 900px;
	margin: 60px auto 0;
}
#staff .staffBox .staffImg{
	width: 230px;
	float: left;
}
#staff .staffBox .staffTxt{
	width: 670px;
	float: right;
}
#staff .staffBox .staffTxt p{
	font-size: 13px;
	line-height: 26px;
}
#staff .staffBox .staffTxt p.staffName{
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 20px;
}


/* gallery */
#gallery,#salonwork,#collection{
	width: 1000px;
	margin: auto;
	margin-top: 25px;
	padding-top: 55px;
	padding-bottom: 105px;
}
#gallery ul,
#salonwork ul,
#collection ul{
	width: 920px;
	max-height: 840px;
	margin: 0 auto;
	font-size: 0;
	overflow: scroll;
}
#gallery ul li,
#salonwork ul li,
#collection ul li{
	display: inline-block;
	padding: 15px 28px 15px 0;
}
#gallery ul li:nth-child(4n),
#salonwork ul li:nth-child(4n),
#collection ul li:nth-child(4n){
	padding-right: 0;
}

#gallery h3,
#salonwork h3,
#collection h3{
	margin: 30px 0 10px 50px;
}

#salonwork h3:not(:first-of-type){
	margin-top: 60px;
}

/* recommend */
#recommend{
	width: 1000px;
	margin: auto;
	margin-top: 25px;
	padding-top: 55px;
	padding-bottom: 120px;
}
#recommend .Box01{
	background: url(../img/recommend/bg_recommend.png) no-repeat 480px 35px;
}
#recommend .recBox{
	margin-top: 70px;
}
#recommend .recBox h3{
	font-size: 16px;
	float: left;
}
#recommend .recBox h3::before{
	display: inline-block;
	vertical-align: middle;
	content: url(../img/recommend/ribbon_Left.png);
	line-height: 100%;
}
#recommend .recBox h3::after{
	display: inline-block;
	vertical-align: middle;
	content: url(../img/recommend/ribbon_Right.png);
	line-height: 100%;
}
#recommend .recBox figure{
	float: right;
}
#recommend .recBox .recTxt{
	float: left;
	width: 625px;
	font-size: 13px;
	line-height: 28px;
	margin-top: 15px;
	box-sizing: border-box;
	padding-left: 10px;
}
#recommend .recBox .recTxt .blueBox{
	width: 380px;
	background: #dfedf4;
	padding: 10px 15px;
	font-size: 14px;
	line-height: 28px;
	font-weight: bold;
	margin-top: 10px;
}
#recommend .recBox .recTxt p{
	margin-top: 15px;
}
#recommend .recBox .recTxt .bold{
	font-weight: bold;
}


/* products */
#products{
	width: 1000px;
	height: 100%;
	margin: 25px auto 0;
	padding-top: 55px;
	padding-bottom: 120px;
	font-size: 0;
}

#products p.productsInfo{
	font-size:13px;
	margin-top: 20px;
}
	
#products .productsBox{
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	border: 1px solid #cccccc;
}
#products .productsBox:nth-of-type(3){
	margin-right: 30px;
}
#products .Box01{
	width: 1000px;
	margin: 40px auto 0;
	box-sizing: border-box;
	padding: 20px 25px 20px;
}

#products .Box01 .series{
	width: 570px;
	float: left;
	padding-bottom: 15px;
}
#products .productsBox .series h3{
	font-size: 16px;
	line-height: 28px;
}
#products .productsBox .series h3 .small{
	font-size: 12px;
	font-weight: normal;
}
#products .Box01 .series h3 + p{
	width: 570px;
	margin-top: 10px;
	font-size: 13px;
	line-height: 24px;
}
#products .Box01 .image{
	float: right;
	display: table;
	
}
#products .Box01 .image p{
	display: table-cell;
	height: 300px;
	vertical-align: middle;
}
#products .productsBox .item{
	float: left;
	width: 570px;
	border-top: 1px dotted #000;
}
#products .productsBox .item h4{
	font-size: 13px;
	margin-top: 10px;
}
#products .productsBox .item h4 + p{
	font-size: 13px;
	line-height: 24px;
	letter-spacing: -0.6px;
}
#products .Box02{
	width: 485px;
	margin: 40px auto 0;
	box-sizing: border-box;
	padding: 20px 25px 20px;
}
#products .Box02 .series h3 + p{
	width: 440px;
	margin-top: 10px;
	font-size: 13px;
	line-height: 24px;
	letter-spacing: -0.78px;
}
#products .Box02 figure{
	text-align: center;
	padding: 15px 0 30px;
}


@media screen and (max-width: 480px){
		
	.toppage{
		display: none;
	}
	.op_animation{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: url(../img/top/opening.png) no-repeat center center;
		background-size: 90% auto;
	}
	
	/* top */
	#index{
		width: 100%;
		padding-bottom: 30px;
	}
	
	#index .mv{
		width: 100%;
		margin-top: 25px;
		min-height: 0;
		padding-top: 60%;
		background-size: contain;
	}
	#index .mv img{
		width: 100%;
		height: auto;
	}
	
	#index .open{
		width: 96%;
		margin: 20px auto 0;
	}
	#index .open img{
		width: 80%;
		height: auto;
	}
	#index .open p{
		width: 100%;
		margin: auto;
		font-size: 13px;
		line-height: 23px;
		margin-top: 20px;
	}
	
	#index .contents{
		width: 94%;
		margin: 50px auto 0;
	}
	#index .contents ul{
		padding: 0;
		font-size: 0;
	}
	#index .contents ul li{
		display: block;
	}
	#index .contents ul li img{
		max-width: 100%;
		height: auto;
	}
	#index .contents ul li p{
		font-size: 13px;
		line-height: 23px;
		padding-left: 4px;
		margin-top: 5px;
	}
	#index .contents ul.contentsLink01 li{
		width: 100%;
		max-width: 316px;
		margin: 30px auto 0;
	}
	#index .contents ul.contentsLink01 li:nth-child(3n){
		margin-right: auto;
	}
	#index .contents ul.contentsLink02 li{
		width: 232px;
		margin: 30px auto 0;
	}
	#index .contents ul.contentsLink02 li:nth-child(4n){
		margin-right: auto;
	}

	#index .campaign{
		width: 94%;
		margin: 50px auto 0;
	}
	#index .campaign figure{
		text-align: center;
		margin-top: 20px;
	}
	#index .campaign figure img{
		width: 100%;
		height: auto;
	}
	
	#index .sns{
		width: 94%;
		margin: 50px auto 0;
		padding-bottom: 20px;
	}
	#index .sns .blog{
		width: 100%;
		float: none;
	}
	#index .sns .blog p.blogImg{
		text-align:center;
	
}

	#index .sns .insta{
		width: 100%;
		float: none;
		margin-top: 30px;
	}
	.memBG {
		text-align: left;
		font-size: 14px;
		line-height: 20px;
		margin: 20px auto 0;
	}
	.memBG Ul {
		width: 100%;
		float: left;
		padding: 0 0 15px;
	}
	.memBG li {
		margin-bottom: 10px;
		border-bottom: 1px dotted #cfcfcf;
		padding: 5px 0 10px 15px;
	}
	.instagram{
		width: 100%;
		margin: 20px auto 0;
	}
	.instagram-placeholder{
		width: 48%;
		float: left;
	}
	.instagram div:nth-child(odd){
		margin-right: 2%;
		margin-left: 0;
	}
	.instagram div:nth-child(even){
		margin-left: 2%;
		margin-right: 0;
	}
	.instagram-placeholder img{
		width:100%;
		height:160px;
	}
	
	
	/* concept */
	#concept{
		width: 94%;
		margin: auto;
		margin-top: 25px;
		padding-top: 0;
	}
	#concept .mv{
		width: 100%;
		margin: 0 auto;
	}
	#concept .mv > figure img{
		width: 100%;
		height: auto;
	}
	#concept .mv .conceptWrap{
		margin-top: 20px;
	}
	#concept .mv .conceptTxt{
		padding: 0 0 10px;
		width: 94%;
		float: none;
		margin: auto;
	}
	#concept .mv .conceptTxt p{
		font-size: 14px;
		line-height: 30px;
		padding: 5px 0;
	}
	#concept .mv .conceptImg{
		width: 100%;
		float: none;
		text-align: center;
	}
	#concept .mv p{
		font-size: 14px;
		line-height: 24px;
		padding: 10px 0 0;
	}
	#concept .mv ul li{
		float: none;
		text-align: center;
	}
	#concept .mv ul li:nth-child(1){
		margin-bottom: 15px;
		margin-right: 0;
	}
	#concept .mv ul li:nth-child(2){
		margin-bottom: 15px;
		margin-right: 0;
	}
	#concept .mv ul li:nth-child(3){
		margin-bottom: 15px;
	}
	#concept .mv ul li:nth-child(4){
		margin-bottom: 15px;
		margin-right: 0;
	}
	#concept .mv ul li img{
		max-width: 100%;
	}
	
	#access{
		padding-top: 50px;
		padding-bottom: 40px;
	}
	#access .map{
		margin-top: 20px;
	}
	#access .map iframe{
		width: 100%;
	}
	#access .info{
		width: 90%;
		margin: 10px auto 0;
		box-sizing: border-box;
		padding: 0;
	}
	#access .info .infoLeft{
		width: 100%;
		float: none;
	}
	#access .info .infoRight{
		width: 100%;
		float: none;
	}
	#access .info ul li{
		font-size: 12px;
		line-height: 24px;
		padding: 10px 0 10px 5px;
		border-bottom: 1px dotted #111111;
	}
	#access .info ul li a{
		font-size: 16px;
	}
	#access .info ul li span{
		display: inline-block;
		vertical-align: top;
	}
	#access .info ul li span.name{
		width: 50px;
	}
	
	
	/* menu*/
	#menu{
		padding-top: 25px;
    	margin-top: 0;
	}
	#menu .mv{
		padding-top: 0;
	}
	#menu h2{
		width: 94%;
		margin: auto;
	}
	#menu .mvBox{
		width: 100%;
		margin-top: 20px;
		background: url(../img/menu/mv_menu.png) no-repeat center center;
		background-size: auto 100%;
	}
	#menu .mvBox .mvBG{
		padding: 25px 0;
		background: url(../img/menu/bg_menuMV.png) repeat;
	}
	#menu .mvBox .mvBG .whBox{
		width: 92%;
		margin: auto;
		background: rgba(255,255,255,0.8);
		box-sizing: border-box;
		padding: 25px 3% 20px;
	}
	#menu .mvBox .mvBG .whBox h3{
		font-size: 14px;
		line-height: 26px;
	}
	#menu .mvBox .mvBG .whBox h3::after{
		display: inline-block;
		content: url(../img/menu/img_menu.png);
		vertical-align: middle;
		padding-left: 15px;
		line-height: 100%;
	}
	#menu .mvBox .mvBG .whBox p.menuTxt{
		font-size: 14px;
		line-height: 24px;
		margin-top: 10px;
		padding-bottom: 10px;
		border-bottom: 1px dotted #000;
	}
	#menu .mvBox .mvBG .whBox ul{
		font-size: 0;
		margin-top: 10px;
	}
	#menu .mvBox .mvBG .whBox ul li{
		display: block;
		font-size: 12px;
		line-height: 18px;
		margin-top: 5px;
	}
	#menu .mvBox .mvBG .whBox ul li:nth-child(1){
		margin-right: 0;
	}
	#menu .mvBox .mvBG .whBox ul li:nth-child(2)::after,
	#menu .mvBox .mvBG .whBox ul li:nth-child(3)::after,
	#menu .mvBox .mvBG .whBox ul li:nth-child(4)::after{
		display: none;
	}
	
	#menu .menu{
		width: 90%;
		margin: 20px auto 0;
		padding-bottom: 40px;
	}
	#menu .menu h4{
		padding-top: 30px;
	}
	#menu .menu ul{
		margin-top: 5px;
	}
	#menu .menu ul li{
		font-size: 14px;
		line-height: 26px;
		padding: 8px 5px;
		border-bottom: 1px dotted #000;
	}
	#menu .menu ul li span.menuL{
		display: block;
		float: left;
		width: 80%;
	}
	#menu .menu ul li span.menuR{
		display: block;
		float: right;
		width: 19%;
	}
    /* afterservice */
    #afterservice{
        padding: 20px 0;
        margin-bottom: 40px;
        background: #dfedf4 url(../img/menu/bg_after.png);
    }
    #afterservice h4{
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 20px;
        text-align: center;
    }
    #afterservice h4::before{
        display: inline-block;
        vertical-align: middle;
        content: url(../img/menu/ico_after_ribbon_Left.png);
        line-height: 100%;
    }
    #afterservice h4::after{
        display: inline-block;
        vertical-align: middle;
        content: url(../img/menu/ico_after_ribbon_Right.png);
        line-height: 100%;
    }
    #afterservice h4 + p{
        font-size: 14px;
        line-height: 24px;
        text-align: center;
        margin-bottom: 30px;
    }
    #afterservice .serviceBox{
        width: 92%;
        padding: 30px 5% 20px;
        margin: 0 auto 20px;
        background: #fff;
        box-sizing: border-box;
    }
    #afterservice .serviceBox ul li{
        width: 100%;
        float: none;
        margin-bottom: 30px;
    }
    #afterservice .serviceBox ul li:last-child{
        float: none;
        margin-bottom: 0;
    }
    #afterservice .serviceBox ul li .title{
        color: #658ea2;
        font-size: 15px;
        line-height: 25px;
        font-weight: bold;
        padding-bottom: 8px;
        margin-bottom: 10px;
        border-bottom: 1px solid #658ea2;
    }
    #afterservice .serviceBox ul li .text{
        font-size: 13px;
        line-height: 23px;
        padding-left: 1em;
        text-indent: -1em;
    }
    #afterservice .philosophyBox{
        width: 90%;
        padding: 30px 5% 20px;
        margin: auto;
        background: #fff;
        box-sizing: border-box;
    }
    #afterservice .philosophyBox ul li{
        width: 100%;
        height: auto;
        float: none;
        color: #333;
        background: #FEFBE5;
        font-size: 13px;
        line-height: 23px;
        padding: 5%;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    #afterservice .philosophyBox ul li:last-child{
        float: none;
        margin-bottom: 0;
    }
    #afterservice .philosophyBox ul li span{
        display: inline-block;
        color: #658ea2;
        font-size: 14px;
        line-height: 24px;
        font-weight: bold;
        margin-bottom: 5px;
        padding-left: 1em;
        text-indent: -1em;
    }
	
	/* staff */
	#staff{
		width: 100%;
		margin: 25px auto 0;
		padding-top: 0;
		padding-bottom: 40px;
	}
	#staff h2{
		width: 94%;
		margin: auto;
	}
	#staff .staffBox{
		width: 100%;
		margin: 30px auto 0;
	}
	#staff .staffBox .staffImg{
		width: 100%;
		float: none;
		text-align: center;
	}
	#staff .staffBox .staffTxt{
		width: 84%;
		float: none;
		margin: 10px auto 0;
	}
	#staff .staffBox .staffTxt p{
		font-size: 13px;
		line-height: 26px;
	}
	#staff .staffBox .staffTxt p.staffName{
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 3px;
	}


	/* gallery */
	#gallery,#salonwork,#collection{
		width: 94%;
		margin: auto;
		padding-top: 25px;
		padding-bottom: 40px;
	}
	#gallery ul,
	#salonwork ul,
	#collection ul{
		width: 100%;
		height: 350px;
		margin: 5px auto 0;
		font-size: 0;
	}
	#gallery ul li,
	#salonwork ul li,
	#collection ul li{
		display: inline-block;
		width: 48%;
		padding: 5px 4% 5px 0;
	}
	#gallery ul li:nth-child(2n),
	#salonwork ul li:nth-child(2n),
	#collection ul li:nth-child(2n){
		padding-right: 0;
	}
	#gallery ul li img,
	#salonwork ul li img,
	#collection ul li img{
		width: 100%;
		height: auto;
	}
		
	#gallery h3,
	#salonwork h3,
	#collection h3{
		margin: 20px 0 10px 0;
	}

	#salonwork h3:not(:first-of-type){
		margin-top: 40px;
	}

	
	/* recommend */
	#recommend{
		width: 94%;
		margin: 25px auto 0;
		padding-top: 0;
		padding-bottom: 40px;
	}
	#recommend .Box01{
		background: url(../img/recommend/bg_recommend.png) no-repeat 480px 35px;
	}
	#recommend .recBox{
		margin-top: 30px;
	}
	#recommend .recBox h3{
		font-size: 14px;
		line-height: 40px;
		float: none;
		text-align: center;
	}
	#recommend .recBox h3::before{
		display: inline-block;
		vertical-align: middle;
		content: url(../img/recommend/ribbon_Left.png);
		line-height: 100%;
	}
	#recommend .recBox h3::after{
		display: inline-block;
		vertical-align: middle;
		content: url(../img/recommend/ribbon_Right.png);
		line-height: 100%;
	}
	#recommend .recBox figure{
		float: none;
		text-align: center;
		margin-top: 10px;
	}
	#recommend .recBox figure img{
		max-width: 100%;
	}
	#recommend .recBox .recTxt{
		float: none;
		width: 90%;
		font-size: 13px;
		line-height: 23px;
		margin: 10px auto 0;
		box-sizing: border-box;
		padding-left: 0;
	}
	#recommend .recBox .recTxt .blueBox{
		width: 100%;
		background: #dfedf4;
		box-sizing: border-box;
		padding: 10px 15px;
		font-size: 14px;
		line-height: 28px;
		font-weight: bold;
		margin-top: 10px;
	}
	#recommend .recBox .recTxt p{
		margin-top: 15px;
	}
	#recommend .recBox .recTxt .bold{
		font-weight: bold;
	}

	
	/* products */
	#products{
		width: 94%;
		margin: 25px auto 0;
		padding-top: 0;
		padding-bottom: 40px;
		font-size: 0;
	}
	#products .productsBox{
		display: block;
		vertical-align: top;
		box-sizing: border-box;
		border: 1px solid #cccccc;
	}
	#products .productsBox:nth-of-type(3){
		margin-right: 30px;
	}
	#products .Box01{
		width: 100%;
		margin: 20px auto 0;
		box-sizing: border-box;
		padding: 20px 6%;
	}
	
	#products .Box01 .series{
		width: 100%;
		float: none;
		padding-bottom: 0;
	}
	#products .productsBox .series h3{
		font-size: 16px;
		line-height: 28px;
	}
	#products .productsBox .series h3 .small{
		font-size: 12px;
		font-weight: normal;
	}
	#products .Box01 .series h3 + p{
		width: 100%;
		margin-top: 10px;
		font-size: 13px;
		line-height: 24px;
	}
	#products .Box01 .image{
		float: none;
		display: block;
		
	}
	#products .Box01 .image p{
		display: block;
		height: auto;
		vertical-align: middle;
		padding: 15px 0;
	}
	#products .Box01 .image p img{
		width: 100%;
		height: auto;
	}
	#products .productsBox .item{
		float: none;
		width: 100%;
		border-top: 1px dotted #000;
	}
	#products .productsBox .item h4{
		font-size: 13px;
		margin-top: 10px;
	}
	#products .productsBox .item h4 + p{
		font-size: 13px;
		line-height: 24px;
		letter-spacing: normal;
	}
	#products .Box02{
		width: 100%;
		margin: 20px auto 0;
		box-sizing: border-box;
		padding: 20px 7%;
	}
	#products .Box02 .series h3 + p{
		width: 100%;
		margin-top: 5px;
		font-size: 13px;
		line-height: 24px;
		letter-spacing: normal;
	}
	#products .Box02 figure{
		text-align: center;
		padding: 10px 0;
	}
}