@charset "utf-8";
/* CSS Document */

@media (max-width: 1020px) {
	.wraper .inner{width: 96%; margin: 0 auto;}
}

@media (max-width: 960px) {
	.sec-pagetitle ul.list04 li{width: 31%;}
	.sec-pagetitle ul.list04 li a{padding:16px 10px;}
}
@media (max-width: 860px) {
	.displayblock{display: block;}
	#footer h1{margin: 40px auto 20px;}
	#footer .t-box .t-cell{display: block;text-align: center;}
	#footer{padding: 8px 0;}
	#footer nav + nav{margin-top: 20px;}
	.menu-icon-container{display: block;}
	#header .gNav{display: none;}
	#header .sabNav{display: none;}
	#header h1 a{text-align: left;}
	#header h1 a img{width: 50%;}

	section + section{margin-top: 40px;}
	section .insection + .insection{margin-top: 20px;}
	section.bgsec{padding: 40px 0;}
	section.sec-product{padding-top: 40px;}

	section .insection.insection02{width: 100%;}
section .insection.insection03{position: inherit;text-align: center;}
section .insection.insection03 img{position:inherit;top:0px;left:0px;width: 90%;height: auto;}
	
	section h2{margin-bottom: 28px;}
	.list04 li{width: 98%;}
	.list04 li a span{width: 15%;}
	.list03 li{width: 47%;margin: 1% 1% 2%;}
	.list05 li{margin: 4% 1%;}
	.list05 li > div{display: block; padding-left: 0;}
	.list05 li > div.imgbox{width: 100%;}
	.list05 li > div.imgbox .text{margin-bottom: 20px;}
	.list05.list05b li{width: 98%;}
	.list07 li {width: 94%;}
	.list08 li{width: 42%;}
.list07.hasarw span.arw{position: absolute; width: 80px; left: inherit; right: 10%; top: 50%; margin-top: -40px; margin-left: -40px;}
.list07.hasarw span.arw img{transform: rotate(90deg);-ms-transform: rotate(90deg);-moz-transform: rotate(90deg);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg);}
	.list07.hasarw li + li{margin-top: 20px;}

	.bnr-2list li{display: block; width: 100%;}
	.bnr-2list li + li{margin-left: 0; margin-top: 10px;}
	.bnr-3list li{display: block; width: 100%;}
	.bnr-3list li + li{margin-left: 0; margin-top: 10px;}

	.sec-pagetitle.ptn01 ul.list04 li{width: 92%; margin: 3% auto;}

	.sitetop .sec-salon ul li.t-cell{display: block;}
	.sitetop .sec-salon ul .btn03 a img{opacity: .4;}
		.sitetop .sec-salon ul .btn03b a img{opacity: .35;}
	.sitetop #footer{margin-top: 0;}

	.wraper.concept .bnr-3list li{background-size: cover; background-repeat: no-repeat; color: #fff; padding: 100px 5%; width: 90%;}
	.wraper.concept .bnr-3list li:nth-child(1){background-image: url(/concept/images/point1.jpg);}
	.wraper.concept .bnr-3list li:nth-child(2){background-image: url(/concept/images/point2.jpg);}
	.wraper.concept .bnr-3list li:nth-child(3){background-image: url(/concept/images/point3.jpg);}
	.wraper.concept .bnr-3list li div img{display: none;}
	.wraper.concept .bnr-3list li div em{position: inherit; left: inherit;top: inherit; margin-top: 0; display: block;margin-bottom: 28px;}
	.wraper.concept .sec-pagetitle{padding: 0; background: url(/concept/images/mvbg2.png) no-repeat center left -120px,url(/concept/images/mvbg.jpg) no-repeat right,#f7f9f8; background-size: 50%,cover,100%;}
	.wraper.concept .sec-pagetitle .t-box{padding: 40px 20px; width: inherit;}
	.wraper.concept .sec-pagetitle .t-cell.middle{display: block;}
	.wraper.concept .sec-pagetitle div.t-cell.middle p img{display: none;}
	.wraper.concept .sec-pagetitle div.t-cell.middle h2{border-right: none; position: inherit; top: inherit; left: inherit; margin-left: 0; margin-bottom: 18px; margin-top: 0; padding: 0;}
	.wraper.concept .sec-pagetitle p.t-cell.middle{padding: 0;}

	.wraper.product.product-in .list05 li{width: 98%;}
	.wraper.product.product-in .list05 li > div.imgbox{text-align: center;}
	.wraper.product.product-in .list05 li > div.imgbox img{max-width: 260px;}
	.wraper.product.product-ingredient .table01.insection{display: block; overflow-x: scroll; padding: 0;}
	.wraper.product.product-ingredient .table01.insection tbody{display: block; width: 860px;}



.wraper.contact .contentswraper form table{width: 100%;}
.wraper.contact .contentswraper form table tr {padding: 20px 0; border-top: 1px dotted #d0d0d0; display: block;;}
.wraper.contact .contentswraper form table tr th{width: auto;display: block;}
.wraper.contact .contentswraper form table tr td{width: auto;display: block;}
.wraper.contact .contentswraper form table tr td input{padding:1%; width: 96% !important;}
.wraper.contact .contentswraper form table tr td input.large{width: auto;}
.wraper.contact .contentswraper form table tr td input.ss{width: 20% !important;}
.wraper.contact .contentswraper form table tr td span.supplement{display: block;}
.wraper.contact .contentswraper form table tr td br{display: none;}
.wraper.contact .contentswraper .comment{width: 100%;}
.wraper.contact .contentswraper form table tr td textarea{padding:2%; width: 96% !important;}
.wraper.contact .contentswraper form table tr td input.icon_box{padding:2%; width: auto !important;}
.wraper.contact .contentswraper .button input{padding:2%; width: 96% !important;display: block;}


.wraper.aboutus .list06 div em{display: block;width: 100%;float: none;}
.wraper.member .list05 li{width: 98%;}
.wraper.member .list05 li .btn02 a{padding: 2%;}


}

@media (max-width: 640px) {
	section h2 em{font-size: 200%;}
	.cate-nav ul {display: inherit; width: inherit; text-align: center;border-left: none; margin-bottom: 0; margin: 0 -1% 10px;}
	.cate-nav li{display: inline-block; width: 47%; margin: 1% 1% 2%;border: none;padding: 8px 0;border-bottom: 1px dotted #e4e4e4;}
	.sec-pagetitle ul.list04{overflow: hidden;}
	.sec-pagetitle ul.list04 li{width: 48%; margin: 1%; display: table; float: left;}
	.sec-pagetitle ul.list04 li a{display: table-cell; vertical-align: middle; position: relative;}
	.sec-pagetitle ul.list04 li a i{float: none; position: absolute;right: 4%;top: 50%;margin-top: -0.6em;}
	.sec-pagetitle.ptn01 .inner{width: 100%;}
	.sec-pagetitle.ptn01 .inner .t-box .t-cell{display: block; width: 100%; text-align: center;}
	.sec-pagetitle.ptn01 .inner .t-box .t-cell.textBox{background: #222; padding: 26px 1%; font-size: 90%;}
	.sec-pagetitle.ptn01 .inner .t-box .t-cell.textBox h2{color: #fff;}
	.sec-pagetitle.ptn01 .inner .t-box .t-cell.textBox h2 em{margin-bottom: 6px;}

	.sec-pagetitle.ptn01 .insection{margin-top: 0;}
	.sec-pagetitle.ptn01 .inner .t-box .t-cell.imgBox .full-image{max-width: 300px;}
	.sec-pagetitle.ptn01 .inner .t-box .t-cell.imgBox .full-image-2{ width:100%; height:auto;}
	.sec-pagetitle.ptn01 ul.list04{margin:20px 1% 1%;}
	.sec-pagetitle.ptn01 ul.list04 li{width: 98%; margin: 0;}
	.sec-pagetitle.ptn01 .title01{background:#fff; color: #222; border:1px solid;}

.list03 li a span.comming,.list03 li a:hover span.comming{display: block; position: absolute; width: 100%; height: 100%; z-index: 5; text-align: center; top: 20%;}
.list03 li a span.comming:before{content: '近日公開予定'; background: #222; color: #fff; font-size: 140%; padding: 4px 10px;}


}


@media (max-width: 400px) {
section h3 em{font-size: 160%;}
.list03 li a span.comming,.list03 li a:hover span.comming{top: 13%;}
.list03 li a span.comming:before{content: '近日公開予定'; background: #222; color: #fff; font-size: 120%; padding: 4px 10px;}

}

@media (min-width: 550px) and (max-width: 735px) {}
@media only screen and (min-device-width:320px) and (max-device-width:320px) and (orientation:landscape) {}
@media only screen and (min-device-width:320px) and (max-device-width:320px) and (orientation:portrait) {}