/* main-title ==================================================================== */
#main-title {
	margin: 0 auto 10px;
	width: 1000px;
}
#main-title #main-title-inner {
	position: relative;
	margin: 0 -150px;
	width: 1300px;
	height: 640px;
}
#main-title #main-title-inner .main-title-h {
	position: absolute;
	z-index: 3;
	font-size: 60px;
	line-height: 1;
	font-weight: normal;
	font-family: 'Roboto', sans-serif;
	text-align: center;
}
#main-title #main-title-inner .main-title-sub {
	position: absolute;
	z-index: 2;
	font-size: 16px;
	line-height: 1;
	text-align: center;
}
#main-title #main-title-inner .main-title-img {
	position: absolute;
	z-index: 1;
}
.product-top .main-title-h {
	top: 270px;
	left: 490px;
	color: #fff;
}
.product-top .main-title-sub {
	top: 335px;
	left: 610px;
	color: #fff;
}
.gel .main-title-h {
	top: 55px;
	left: 600px;
}
.gel .main-title-sub {
	top: 120px;
	left: 700px;
}
.serum .main-title-h {
	top: 55px;
	left: 730px;
	color: #fff;
}
.serum .main-title-sub {
	top: 120px;
	left: 860px;
	color: #fff;
}
.soap .main-title-h {
	top: 55px;
	left: 440px;
}
.soap .main-title-sub {
	top: 120px;
	left: 565px;
}
.shampoo .main-title-h {
	top: 55px;
	left: 390px;
	color: #ffffff;
	font-size: 55px !important;
}
.shampoo .main-title-sub {
	top: 180px;
	left: 480px;
	color: #ffffff;
}
.voice .main-title-h {
	top: 260px;
	left: 495px;
}
.voice .main-title-sub {
	top: 330px;
	left: 610px;
}

/* lnav ==================================================================== */
.nav-frame {
	position: absolute;
	background-color: rgba(0,0,0,0.6);
	bottom: 0;
	z-index: 20;
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.nav-frame .lnav {
	overflow: hidden;
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.nav-frame .lnav li {
	display: inline-block;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.nav-frame .lnav a {
	position: relative;
	display: block;
	height: 80px;
	color: #ffffff;
	text-decoration: none;
	font-size: 16px;
	padding: 15px 30px 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.nav-frame .lnav a:after {
	font-family: 'FontAwesome';
	content: "\f107";
	position: absolute;
	top: 47px;
	line-height: 1;
	font-size: 30px;
	right: 50%;
	margin-right: -0.5em;
}
.nav-frame .lnav a span {
	display: block;
	font-size: 13px;
	font-family: 'Roboto', sans-serif;
}
.nav-frame .lnav a:hover {
	color: #fff791;
	background-color: rgba(255, 247, 145,0.1);
}

/* ページ内リンク ==================================================================== */
#about01,
#about02,
#howto,
#voice {
	padding-top: 190px;
	margin-top: -190px;
}

/* btn-set ==================================================================== */
.btn-set {
	margin: 0 auto 80px;
	overflow: hidden;
}
.btn-set .btn-left {
	float: left;
	width: 480px;
}
.btn-set .btn-right {
	float: right;
	width: 480px;
}
.btn-set .btn-right .btn-cap {
	text-align: center;
	padding: 5px;
	font-size: 15px;
}
.btn-set .btn-box {
	background: #eaeaea;
	padding:10px 30px 30px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.btn-set .btn-box .copy-box01 {
	padding-top: 28px;
	margin-bottom: 10px;
	text-align: center;
}
.btn-set .btn-box .copy-box01-2 {
	padding-top: 36px;
	margin-bottom: 10px;
	text-align: center;
}
.btn-set .btn-box .copy-box02 {
	margin-bottom: 10px;
	text-align: center;
}
.btn-set .btn-box .copy-box02-2 {
	margin-bottom: 10px;
	text-align: center;
}
.btn-set .product-title-en {
	font-family: 'Roboto', sans-serif;
	font-size: 30px;
	text-align: center;
	padding-top: 10px;
}
.btn-set .product-sub {
	text-align: center;
	font-size: 16px;
	margin-bottom: 10px;
}
.btn-set .btn-list {
	overflow: hidden;
}
.btn-set .btn-list li {
	width: 50%;
	float: left;
	padding-right: 10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.btn-set .btn-list li:nth-child(even) {
	padding-right: 0;
}

/* ************************************************************************************************ */
@media screen and (max-width: 768px) {
/* main-title ==================================================================== */
#main-title {
	padding-top: 0;
	margin: 0 auto 10px;
	width: auto;
}
#main-title #main-title-inner {
	position: static;
	margin: 0;
	width: auto;
	height: auto;
}
#main-title #main-title-inner .main-title-h {
	position: static;
	font-size: 26px;
	text-align: center;
	background: #000000;
	padding: 10px 0 2px;
	color: #ffffff;
}
#main-title #main-title-inner .main-title-sub {
	position: static;
	font-size: 12px;
	text-align: center;
	padding: 4px 0 10px;
	background: #000000;
	color: #ffffff;
}
#main-title #main-title-inner .main-title-img {
	position: static;
}
.gel .main-title-h {
	top: inherit;
	left: inherit;
}
.gel .main-title-sub {
	top: inherit;
	left: inherit;
}
.soap .main-title-h {
	top: inherit;
	left: inherit;
}
.soap .main-title-sub {
	top: inherit;
	left: inherit;
}
.shampoo .main-title-h {
	top: inherit;
	left: inherit;
	font-size: 22px !important;
}
.shampoo .main-title-sub {
	top: inherit;
	left: inherit;
}
.voice .main-title-h {
	top: inherit;
	left: inherit;
}
.voice .main-title-sub {
	top: inherit;
	left: inherit;
}

/* lnav ==================================================================== */
.nav-frame {
	position: static;
	background-color: #2c2c2c;
	bottom: inherit;
	width: auto;
}
.nav-frame .lnav {
	width: auto;
}
.nav-frame .lnav li {
	display: block;
}
.nav-frame .lnav a {
	position: relative;
	height: auto;
	display: block;
	color: #ffffff;
	font-size: 12px;
	padding: 10px 5px 20px;
	border-bottom: solid 1px #000000;
}
.nav-frame .lnav a:after {
	top: inherit;
	bottom: 0;
	font-size: 26px;
	right: 50%;
	margin-right: -0.4em;
}
.nav-frame .lnav a span {
	font-size: 11px;
}
.nav-frame .lnav a:hover {
	color: #ffffff;
	background-color: #2c2c2c;
}

/* ページ内リンク ==================================================================== */
#about01,
#about02,
#howto,
#voice {
	padding-top: 0;
	margin-top: 0;
}

/* btn-set ==================================================================== */
/*.btn-set {
	margin: 0 auto 40px;
}
.btn-set .btn-left {
	float: left;
	width: 49%;
}
.btn-set .btn-right {
	float: right;
	width: 49%;
}
.btn-set .btn-box {
	padding: 15px;
}*/
.btn-set {
	margin: 0 auto 30px;
}
.btn-set .btn-left {
	float: none;
	width: auto;
	margin-bottom: 5px;
}
.btn-set .btn-right {
	float: none;
	width: auto;
}
.btn-set .btn-right .btn-cap {
	font-size: 13px;
}
.btn-set .btn-box {
	padding: 10px;
}
.btn-set .btn-box .copy-box01 {
	padding: 0 12%;
}
.btn-set .btn-box .copy-box01-2 {
	padding: 0 12%;
}
.btn-set .btn-box .copy-box02 {
}
.btn-set .btn-box .copy-box02-2 {
	padding: 0 12%;
}
.btn-set .product-title-en {
	font-family: 'Roboto', sans-serif;
	font-size: 24px;
	text-align: center;
	padding-top: 5px;
}
.btn-set .product-sub {
	text-align: center;
	font-size: 13px;
	margin-bottom: 10px;
}
.btn-set .btn-list {
	overflow: hidden;
}
.btn-set .btn-list li {
	width: auto;
	float: none;
	padding-right: 0;
	margin-bottom: 10px;
}

}

/* ************************************************************************************************ */
@media screen and (max-width: 480px) {
/* btn-set ==================================================================== */
.btn-set {
	margin: 0 auto 30px;
}
.btn-set .btn-left {
	float: none;
	width: auto;
	margin-bottom: 5px;
}
.btn-set .btn-right {
	float: none;
	width: auto;
}
.btn-set .btn-box {
	padding: 10px;
}
}