@charset "utf-8";

/* reset */
html {
	position: relative;
	width: 100%;
	overflow-x: auto;
}
* {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font-style: normal;
	line-height: 1;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption,th {
	text-align: left;
}
q:before,q:after {
	content: '';
}
object,embed {
	vertical-align: top;
}
hr,legend {
	display: none;
}
a {
	color: #fff;
}
a:hover {
	color: #E3911C;
}
img {
	vertical-align: bottom;
}
img,abbr,acronym,fieldset {
	border: 0;
}
ul,ol {
	list-style-type: none;
}
h2 {
	font-size: 17px;
	color: #898989;
	font-family: "Noto Sans JP", sans-serif;
	text-align: center;
	letter-spacing: 1px;
	margin: 0 auto 35px;
    padding-top: 85px;
	padding-bottom: 5px;
    position: relative;
	transition-duration: .5s;
	font-weight: 500;
}
h2::after {
    background-color: #877c4f;
    bottom: -15px;
    content: "";
    display: block;
    height: 3px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 40px;
	border-radius: 3px;
}
h3 {
	margin-bottom: 30px;
	font-size: 22px;
	color: #595757;
	font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho","serif";
	line-height: 1.2em;
	letter-spacing:0.04em;
	text-align: center;  
}
h4{
	font-size: 20px;
	color: #595757;
	text-align: center;
	margin: 0 auto 35px;
    padding-top: 20px;
    position: relative;
	transition-duration: .5s;
}
h4::after {
    background-color: #877c4f;
    bottom: -15px;
    content: "";
    display: block;
    height: 2px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    width: 25px;
}
p {
	font-size: 15px;
	line-height: 1.5em;
	color: #595757;
}
ruby rt {
	font-size: 0.4em;
}
.flex {
	display: flex;
	justify-content: space-between;
}
.center {
	text-align: center !important;
}
/* default */
body {
	position: relative;
	width: 100%;
	color: #afaeae;
	font: 13px arial, helvetica, clean, sans-serif;
	*font-size: small;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden !important;
}
#luxuryheader {
	position: absolute;
	width: 100%;
    z-index: 999;
    top: 0;
}
.header {
	background: #000;
	border-bottom: 1px solid #2c2c2c;
}
.headerWrap {
	margin: 0 auto;
	padding: 21px 0;
	width: 960px;
	position: relative;
}
.globalNavi {
	width: 614px;
	position: absolute;
	bottom: 31px;
	right: 0;
	overflow: hidden;
	zoom: 1;
}
.globalNavi li {
	float: left;
	display: block;
	margin-right: 16px;
	width: 89px;
}
.globalNavi li.contact {
	margin-right: 0;
}
.globalNavi li a {
	color: #fff;
	padding-bottom: 5px;
	display: block;
	text-decoration: none;
	border-bottom: 3px solid #fff;
}
.globalNavi li a:hover,
.globalNavi li.current a {
	color: #e3911c;
	border-bottom: 3px solid #e3911c;
}

/* Toggle Button */
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 13px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101;
}
#nav-toggle div {
    position: relative;
}
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #fff;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {top: 0;}
#nav-toggle span:nth-child(2) {top: 11px;}
#nav-toggle span:nth-child(3) {top: 22px;}

#changelang {
}
#changelang p {
	margin: 7px auto -20px;
	width: 960px;
	text-align: right;
	font-size: 86%;
}
#changelang p a {
	display: inline-block;
	padding: 3px 5px 5px;
	text-decoration: none;
	color: #333;
	background-color: rgba(255,255,255,0.8);
}
#changelang p a.current {
	color: #ddd;
	background-color: rgba(0,0,0,0.8);
}
#changelang p a:hover {
	color: #fff;
	background-color: #E3911C;
}

.footer {
	margin: 55px auto 8px;
	padding: 13px;
	width: 934px;
	background: #232626;
	color: #c1c1c1;
	border: 1px solid #2c2c2c;
	overflow: hidden;
	zoom: 1;
}
.telAddress {
	font-size: 11px;
	letter-spacing: 1px;
	line-height: 1.3;
	text-align: right;
    color: #aaa;
}

.siteMenu {
	float: left;
	width: 460px;
}
.siteMenu dl {
	margin: 5px 0;
	float: left;
	width: 140px;
}
.siteMenu dt {
	margin-bottom: 8px;

}
.siteMenu dd ul li {
	margin-left: 2em;
	margin-bottom: 5px;
	list-style-type: disc;
	font-size: 93.2%;
	color: #777;
}
.siteMenu dd ul li a {
	text-decoration: none;
	font-size: 93.2%;
	color: #aaa;
}
.siteMenu dd ul li a:hover {
	text-decoration: underline;
}
.signature {
	float: right;
	width: 450px;
	padding: 5px 0 5px 20px;
	font-size: 85.4%;
	text-align: right;
	color: #aaa;
	border-left: 1px solid #333;
}
.signature .logoMark {
	margin: 0 0 8px;
	color: #fff;
	font-size: 150%;
	font-weight: bold;
	font-family: "Garamond","Times New Roman",Times,serif;
	letter-spacing: 1px;
}
.copyRight {
	margin: 0 auto 34px;
	width: 960px;
	font-size: 85.4%;
	letter-spacing: 0.05em;
	color: #525454;
}

/* contents */
.contents {
	margin: 20px auto 0;
	width: 100%;
	overflow: hidden;
	zoom: 1;
	color: #333;
	font-size: 93.2%;
}
#mainvisual {
    height: 100vh;
	z-index: 100;
}
.mainVisual-luxury {
	display: none;
    width: auto;
    height: 100vh;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-image: url(../luxury/images/mainvisual.jpg);
}
.mainTitle {
	position: absolute;
	right:50.5%;
	bottom: 45px;
	width: 30%;
	padding: 10px 30px 18px;
	/*padding: 25px 30px 18px;*/
	color: #fff;
    background-color: rgba(114,113,113,0.50);
}
.mainTitle img{
	width: 100%;
}
.mainTitle h1 {
	color: #fff;
	font-size: 75px;
	/*font-size: 50px;*/
	font-weight: normal;
	/*font-family: 'Sorts Mill Goudy', serif;*/
	font-family: 'Pinyon Script', cursive;
	font-style: italic;
}
.mainTitle p {
	/*margin-top: 5px;*/
	font-size: 23px;
	font-family: "Shippori Mincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	color: #fff;
}
.catchcopy {
	position: absolute;
	left: 50%;
	margin-left: -161px;
	margin-top: 73px;
	padding-top: 4%; 
	line-height: 1em;
	text-align: center;
	font-size: 48px;
	font-family: "Shippori Mincho", "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	color: #231815;
	text-shadow: 1px 1px 1px #fff, -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff;
}
.catchcopy span {
	font-size: 0.6em;
}
.tracking {
	letter-spacing: -0.1em;
}

#Topic1 {
	position: relative;
	background: url(../luxury/images/paratest-Img2.png);
	background-position: center 150px;
	background-repeat: no-repeat;
	background-size: contain;
}
#Topic2 {
	position: relative;
}
#Topic3 {
	position: relative;
}
.rfw980 {
	width: 980px;
	margin: 0 auto;
}
.TextArea {
	display: block;
	margin: 0 auto;
	width: 980px;
	text-align: center;
	z-index: 10;
}
.conceptArea {
	position: relative;
	/*height: 950px !important;*/
	padding-bottom: 80px;
}
.conceptArea img {
    width: 340px;
	height: auto;
}
.TextBox {
	padding: 40px 50px;
	font-size: 15px;
	line-height: 1.8em;
	color: #000;
	text-align: left;
	border: solid 3px #fff;
    box-shadow: 0 0 0 1px #fff, 0 0 0 7px #e5e5e5;
	background-color: #e5e5e5;
	margin: 7px 0;
	opacity: 0.8;
}
.conceptImg {
	position: absolute;
	top: 0;
	width: 100%;
	margin-top: 200px;
	text-align: center;
	z-index: 2;
}
.conceptImg img {
	width: 100%;
}

.conceptImgBox {
	width: 420px;
	height: 320px;
	background-color: #ccc;
}

.TextBox-inverse {
	padding: 20px 20px 30px;
	font-size: 15px;
	line-height: 1.8em;
	color: #000;
	border: solid 3px #e5e5e5;
    box-shadow: 0 0 0 1px #e5e5e5, 0 0 0 7px #fff;
	background-color: #fff;
	margin: 7px 0;
	opacity: 1;
}
.conceptback {
	-webkit-height: max-content;
	-moz-height: max-content;
	height: max-content;	
}
.mateBox {
	display: inline-block;
	width: 420px;
	margin-bottom: 95px;
}
.mateBox p {
	margin-bottom: 20px;
}
.materialback {
	-webkit-height: max-content;
	-moz-height: max-content;
	height: max-content;
	background-color: #e5e5e5;
}
.makingback {
	-webkit-height: max-content;
	-moz-height: max-content;
	height: max-content;
	background: -moz-linear-gradient(top, #FFF 40%, #e5e5e5);
	background: -webkit-linear-gradient(top, #FFF 40%, #e5e5e5);
	background: linear-gradient(to bottom, #FFF 40%, #e5e5e5);
}
.makingArea {
	margin: 40px 0 0;
	padding-bottom: 85px;
}
.makingBox {
	display: inline-block;
	width: 32%;
	text-align: center;
}
.no1 {
	animation-delay: .3s;
	-moz-animation-delay: .3s;
	-webkit-animation-delay: .3s;
	-o-animation-delay: .3s;
}
.no2 {
	animation-delay: .6s;
	-moz-animation-delay: .6s;
	-webkit-animation-delay: .6s;
	-o-animation-delay: .6s;
}
.no3 {
	animation-delay: .9s;
	-moz-animation-delay: .9s;
	-webkit-animation-delay: .9s;
	-o-animation-delay: .9s;
}
.makingBox p {
	padding-top: 20px;
	text-align: left;
}
.frameArea  {
	position: relative;
	margin-bottom: 30px;
}
.frameArea p {
	position: absolute;
	top: 40px;
	display: inline-block;
	padding-left: 50px;
	vertical-align: middle;
}
.order {
	/*-webkit-height: min-content;
	-moz-height: min-content;
	height: min-content;
	background: url(../luxury/images/orderback2.jpg) top center;
	background-repeat: no-repeat;
	background-size: cover;*/
}
.sampleBox {
	width: 300px;
	margin-bottom: 40px;
}
.sampleBox img {
	width: 100%;
}
p.number{
	margin-bottom: 8px;
	padding: 5px 0;
	font-family: "Arial", Gadget, "sans-serif";
	color: #fff;
	background-color: #857A4E;
	text-align: center;
}
.sampleBox table {
	width: 100%;
	border: none;
	color: #595757;
}
.sampleBox table th {
	padding: 7px 0;
	border-bottom: 1px solid #727171;
}
.sampleBox table th:before {
	display: inline-block;
	content: "";
	width: 8px;
	height: 8px;
	margin-right: 5px;
	margin-bottom: 1px;
	background-color: #999899;
}
.sampleBox table td {
	padding: 7px 0;
}
.howtoorder{
	margin: 40px 20px 25px;
	text-align: center;
}
section {
	position: relative;
   /* height: 500px;
    height: 100vh;*/
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    -o-transition: -o-transform 0.5s;
    transition: transform 0.5s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#pagetop {
    position: fixed;
    right: 20px;
    bottom: 30px;
    display: none;
    z-index: 999;
    cursor: pointer;
}
.pcsize {
	display: block;
}
.spsize {
	display: none;
}
@media only screen and (max-width: 1040px) {
	.headerWrap {
		width: 100%;
	}
	.rfw980 {
		width: auto;
		margin: 0 30px;
	}
	.mainTitle {
		width: 37%;
	}
	.conceptArea {
		height: auto !important;
		padding-bottom: 50px;
	}
	.TextArea {
		display: block;
		margin: 0 30px;
		width: auto;
		text-align: center;
		z-index: 10;
	}
	.mateBox {
		width: 41.8%;
	}
	.mateBox img {
		width: 100%;
	}
	.makingBox img {
		width: 100%;
	}
	.frameArea img {
		width: 53%;
	}
	.sampleBox {
		width: 32%;
	}
}
@media only screen and (max-width: 962px) {
	/*.footer {
		margin: 55px auto 8px;
		padding: 13px;
		width: auto;
		background: #232626;
		color: #c1c1c1;
		border: 1px solid #2c2c2c;
		overflow: hidden;
		zoom: 1;
	}*/
	.siteMenu dl {
		width: 125px;
	}
	.siteMenu {
		float: left;
		width: 50%;
	}
	.signature {
		float: right;
		width: 45%;
		padding: 5px 0 5px 20px;
		font-size: 85.4%;
		text-align: right;
		color: #aaa;
		border-left: 1px solid #333;
	}
	#changelang p {
		width: auto;
	}
	.footer {
		width: auto;
	}
	.copyRight {
		width: auto;
		margin: 0 auto 14px;
		text-align: center;
	}
}
@media only screen and (max-width: 801px) {
	.siteMenu {
		display: flex !important;
		justify-content: space-around;
		width: 100%;
	}
	.signature {
		display: block;
		width: 100%;
		padding: 5px 0 5px 20px;
		font-size: 85.4%;
		text-align: left;
		color: #aaa;
		border-left: none;
	}
	.telAddress {
		display: block;
		text-align: left;
		width: 100%;
	}
}

@media only screen and (max-width: 789px) {
	.headerWrap {
		padding: 10px 0;
	}
	.headerWrap h1 {
		padding-left: 15px;
	}
	.header nav {
		position: absolute;
		right: -280px;
		top: 385px;
		width:50%;
		padding:0 10px;
		-webkit-transition:.5s ease-in-out;
		-moz-transition:.5s ease-in-out;
		transition:.5s ease-in-out;
		text-align:left;
	}
	.globalNavi {
		width: 260px;
		background:rgba(0,0,0,.7);
		margin: 0;
		padding: 0 0 0 20px; 
	}
	.globalNavi li {
		display:block;
		width: 260px;
		margin:0;
	}
	.globalNavi li a {
		display:block;
		line-height:3 !important;
}
	.globalNavi li::after {
		content:''
	}
	.globalNavi li:last-child {
		margin-bottom: 20px;
	}
	#nav-toggle {display:block}
	.openNav #nav-toggle span:nth-child(1) {
		top: 11px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		transform:rotate(-45deg)}
	.openNav #nav-toggle span:nth-child(2),
	.openNav #nav-toggle span:nth-child(3) {
		top: 11px;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		transform:rotate(45deg)}
	.openNav nav {
		-moz-transform: translateX(-280px);
		-webkit-transform: translateX(-280px);
		transform: translateX(-280px)}

	.mainTitle {
		right: 0;
		bottom: 45px;
		width: 100%;
		padding: 10px 0 18px;
		/*padding: 25px 0 18px;*/
		color: #fff;
		text-align: center;
	}
	#Topic2 .flex,
	#Topic3 .flex {
		display: block !important;
	}
	.conceptArea img {
		width: 60%;
	}
	.rfw980 {
		margin: 0 50px;
	}
	.conceptImg {
		position: absolute;
		top: 0;
		left: -18%;
		width: 136%;
		margin-top: 240px;
		text-align: center;
		z-index: 2;
	}
	.conceptImg img {
		width: 100%;
	}
	#Topic2 {
		padding-bottom: 50px;
	}
	.mateBox {
		display: block;
		width: auto;
	}
	.mateBox {
		margin-bottom: 45px;
	}
	.frameArea img {
		display: block;
		width: 100%;
	}
	.frameArea p {
		position: static;
		display: block;
		padding: 0;
		text-align: center;
	}
	.makingBox {
		display: block;
		margin: 0 auto;
		padding-top: 40px;
		width: 60%;
	}
	.makingBox p {
		padding-top: 20px;
	}
	.order .flex { 
	display: block;
	}
	.sampleBox {
		display: block;
		width: 100%;
	}
	.no2 {
		animation-delay: .3s;
		-moz-animation-delay: .3s;
		-webkit-animation-delay: .3s;
		-o-animation-delay: .3s;
	}
	.no3 {
		animation-delay: .3s;
		-moz-animation-delay: .3s;
		-webkit-animation-delay: .3s;
		-o-animation-delay: .3s;
	}
}
@media only screen and (max-width: 599px) {
	h3 {
		padding: 0 10px;
	}
	.pcsize {
		display: none !important;
	}
	.spsize {
		display: block;
	}
	.catchcopy {
		position: absolute;
		left: 50%;
		margin-top: 62px;
		padding-top: 7%;
		line-height: 1em;
		text-align: center;
		font-size: 48px;
	}
	.conceptArea img {
		width: 75%;
	}
	/*.conceptArea {
		height: 850px !important;
	}*/
	.layer-base.conceptArea img {
		width: 280px;
	}
	.TextArea {
		margin: 0 30px !important;
		width: auto !important;
	}
	.TextBox {
		padding: 30px 5px 30px;
		font-size: 14px;
	}
	#Topic2 .flex {
		display: block !important;
	} 
	.rfw980 {
		margin: 0 30px;
	}
	.mateBox {
		display: block;
		width: auto;
	}
	.makingBox {
		width: 85%;
	}
}