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

/*-------------------------------------------------
	LOADING
--------------------------------------------------*/
#loading {width:100%;height:100%;position:fixed;top:0;left:0;
	background:#f7f4f0;z-index:99999999;text-align: center;}
#loading div {width:100%;height:100%;position:relative;}
#loading div p {position:absolute;top:50%;left:50%;}
#loading div p.logo {margin:0 0 0 -325px;
	animation:logoIn 1.5s ease 0s 1 forwards;}
#loading div p.loader {display:block;
	margin:80px 0 0 -80px;left:50%;width: 160px;height:20px;}

@keyframes logoIn {
	from {opacity:0;}
	to {opacity:1;}
}

#loading_sp {display: none;}

/*-------------------------------------------------
	OPENING
--------------------------------------------------*/
#opening {
	display:none;
	width:100%;height:100%;
	position:fixed;top:0;left:0;
	z-index:99999999;}

#opening > div {
	background:#f7f4f0;
	width:100%;height:50%;
	position:absolute;
	text-align:center;
	transition:all .8s ease;}
#opening > div:before {
	content:"";display:block;
	width:100%;height:100%;
	position:absolute;
	opacity:0.1;}

#opening .up {top:1px;}
#opening .down {bottom:0}

#opening > div > div {
	width:100%;height:100%;
	position:relative;}

#opening .up div p {
	position:absolute;bottom:0;}
#opening .up div p.logo {left:50%;bottom:-50px;margin:0 0 0 -325px;z-index:55;
	animation:imgLogo 1.2s ease-out .5s 1 forwards;transform: translate3d(0,0,0);}
#opening .up div p.kakeru01 {left:50%;margin:0 0 0 -32px;opacity:0;
	animation:imgBatu1 .8s ease .9s 1 forwards;}

@keyframes imgLogo {
	from {transform:translate(0,0);}
	to {transform:translate(0,-130px);}
}
@keyframes imgBatu1 {
	0% {opacity:0;transform:translate(0,-30px);}
	50% {opacity:0.3;}
	100% {opacity:1;transform:translate(0,0);}
}

#opening .down div p {
	position:absolute;top:0;}
#opening .down div p.kakeru02 {left:50%;margin:0 0 0 -32px;opacity:0;
	animation:imgBatu2 .8s ease .9s 1 forwards;}
#opening .down div p.copy {left:50%;top:80px;margin:0 0 0 -325px;opacity:0;
	animation:imgCopy .8s ease 1s 1 forwards;}

@keyframes imgBatu2 {
	0% {opacity:0;transform:translate(0,-30px);}
	50% {opacity:0.3;}
	100% {opacity:1;transform:translate(0);}
}
@keyframes imgCopy {
	0% {opacity:0;transform:translate(0,-120px);}
	100% {opacity:1;transform:translate(0,0);}
}

/* 上下に開く */
#opening .up {
	animation:endUp .8s ease 2.3s 1 forwards;}
#opening .down {
	animation:endDown .8s ease 2.3s 1 forwards;}

@keyframes endUp {
	100% {opacity:0;top:-25%;}
}
@keyframes endDown {
	100% {opacity:0;bottom:-25%;}
}

/* 4秒後にオープニングを非表示 */
#opening {animation:opEnd .5s ease 3.5s 1 forwards;}
@keyframes opEnd {
	100% {opacity:0;visibility:hidden;}
}

/*-------------------------------------------------
	setting
--------------------------------------------------*/
body#index {height:100%;}
#index #mainNav {display:none;}
#index main {padding:0;}

#index header .row {width:100%;max-width:none;}

#index .triggerBtn {margin-left:40px;}

#index header ul#navTop {margin-right:40px;}
#index header ul#navTop li.search > ul {right:40px;}

/*-------------------------------------------------
	main Gallery
--------------------------------------------------*/
#slideWrap {position:relative;top:65px;}

#slideshow {
	width:100%;text-align:left;
	position:relative;overflow:hidden;}
#slideshow ul {
	position:fixed; /* absolute or fixed */
	top:50%;left:50%;width:100%;overflow:hidden;}
#slideshow ul li {
	position:absolute;top:0;left:0;
	width:100%;display:none;}

#slideshow ul li img {
	width: 100%;}

#slideshow ul li.mainActive img {
	animation: move 5.1s linear 1;}

@media all and (-ms-high-contrast:none){
	#slideshow ul li.mainActive img {animation:none;}
}


@keyframes move {
  0% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

#slideWrap #innerframe {position:fixed;top:65px;bottom:0;left:0;right:0;
	border-right:solid 40px #FFF;border-left:solid 40px #FFF;
	border-bottom:solid 75px #FFF;
	margin:auto;width:100%;height:100%;text-align:center;z-index:120;}
#slideWrap #txtBox {position:relative;top:0;bottom:0;left:0;right:0;
	margin:auto;width:100%;height:100%;}
#slideWrap #txtBox:before {
	font-family: 'icomoon';
	content: "\e90a";
	font-size:42px;font-size:4.2rem;color:#FFF;
	position:absolute;bottom:5px;left:50%;margin-left:-0.5em;
}

#slideWrap #txtBox h2 {position:absolute;top:50%;left:50%;margin:-120px 0 0 -4em;
	font-size:7.6vw;color:#FFF;/*text-shadow:0px 0px 50px #BFBFBF;*/
	font-family:'Metropolis-SemiBold',Meiryo,"メイリオ", Osaka, sans-serif;}

	@media screen and (min-width:1400px) {
		#slideWrap #txtBox h2 {font-size:110px;font-size:11rem;;}
	}

#slideWrap #txtBox p.btn {width:235px;min-width:inherit;height:45px;
	position:absolute;bottom:80px;left:50%;margin-left:-117px;}

#slideWrap #txtBox div#inNews {width:135px;height:135px;
	font-size:12px;font-size:1.2rem;color:#FFF;line-height:1.2;
	text-align:left;position:absolute;bottom:20px;right:12%;}
	
	@media screen and (min-width:1400px) {
		#slideWrap #txtBox div#inNews {
			left:50%;margin-left:360px;right:inherit;}
	}
	
#slideWrap #txtBox div#inNews a {width:135px;height:135px; display: block;
	position:relative; background: rgba(0,0,0,0.1); color: #FFFFFF;
  border:solid 3px #FFF;padding:20px 15px 0; text-decoration: none;}

#slideWrap #txtBox div#inNews a:hover {background: rgba(136,86,69,0.5);}

#slideWrap #txtBox div#inNews div.inner:before {
	content:"";position:absolute;top:0;left:0;
	width:65px;height:3px;background:#FFF;}
#slideWrap #txtBox div#inNews div.inner p.title {
	font-size:20px;font-size:2.0rem;color:#000;;line-height:1.1;
	font-family:'Metropolis-SemiBold',Meiryo,"メイリオ", Osaka, sans-serif;
	margin:0 0 8px;}

/* SP用 */
#slideWrap_sp {display:none;}

/* Animation */
@media screen and (min-width:770px) {
	#slideWrap #txtBox.anim {animation:animSlideTxt .3s ease-out 0s 1 forwards;}
}
	@keyframes animSlideTxt {
  			100% {opacity:0;top:-25%;}
	}

/*=========================================================
	Wrapper & Contents Common
=========================================================*/
#index #container {overflow:hidden;
	width:100%;text-align:left;/*padding:40px 0 0;*/
	background:#FFF;position:relative;z-index:200;}

 #index h3 {
	font-size:52px;font-size:5.2rem;font-weight:normal;line-height:1.0;
	letter-spacing:0.05em;text-align:center;margin:0 0 55px;
	font-family:'Metropolis-SemiBold',Meiryo,"メイリオ", Osaka,"HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", sans-serif;}
 
#index .btn {letter-spacing:0.1em;
	font-family:'Metropolis-Medium',Meiryo,"メイリオ", Osaka,"HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", sans-serif;}

/*-------------------------------------------------
	Concept
--------------------------------------------------*/
#index #concept {width:100%;margin:0 auto;position: relative;}
#index #concept:before {content:"";display: block;
	padding-top: 45.4%; /* 高さを幅の75%に固定 */}
#index #concept .flex {position: absolute;top:0;left:0;bottom:0;right:0;
	display:-webkit-flex;display:-ms-flexbox;display:flex;
	-webkit-justify-content:flex-end;-ms-justify-content:flex-end;justify-content:flex-end;}

@media screen and (min-width:1400px) {
	#index #concept {height:635px;}
	#index #concept:before {display:none;}}

#index #concept h3 {font-size:68px;font-size:6.8rem;text-align:left;margin:0 0 10px;}
#index #concept .h3sup,
#index #concept .h3sup{font-size:22px;font-size:2.2rem;line-height:1.0;
	font-weight:bold;margin:0 0 9%;}

#index #concept .cntLft {width:48.2%;
	background:url(../images/index/concept/main.jpg) no-repeat;
	background-size: cover;}

#index #concept .cntRht {width:51.8%;
	background: linear-gradient(#f6f6f6, #e9e9e9);}

@media all and (-ms-high-contrast:none){
	#index #concept .cntRht img {max-width:675px;}
}
#index #concept .cntRht img {margin:0 0 0 auto;}

#index #concept .cntRht .bx-wrapper .bx-pager {
	text-align:left;margin:0 0 0 50px;position:relative;top:-50px;}
#index #concept .cntRht .bx-wrapper .bx-pager.bx-default-pager a {
	width: 20px;height: 5px;margin: 0 5px;border-radius:0;}

#index #concept .cntRht .bxslider li img { -webkit-backface-visibility:hidden;backface-visibility:hidden;}

#index #concept .inner {
	position: absolute;top:0;left:0;bottom:0;right:0;z-index:130;padding:5% 0 0;}
	@media screen and (min-width:1400px) {
		#index #concept .inner {padding:120px 0 0;}}

#index #concept .column {font-size:14px;font-size:1.4rem;
	border-left:solid 2px #FFF;padding:5px 13% 5px 40px;}
#index #concept .column p {margin-left:7px;}

/* Animation */
@media screen and (min-width:820px) {
	#index #concept .column {opacity:0;}
	#index #concept .column.anim {
		animation:fadeInUp .5s ease-out 0s 1 forwards;}
}
/*-------------------------------------------------
	Japan premium Quality
--------------------------------------------------*/
#index #quality {padding:100px 0 0;}
#index #quality .title {text-align:center;position:relative;z-index:99;}
#index #quality .title .inlineBl {display:inline-block;text-align:left;}
#index #quality .title .inlineBl h3 {font-size:5vw;margin:0 0 10px;}
	@media screen and (min-width:1400px) {
		#index #quality .title .inlineBlock h3 {font-size:68px;font-size:6.8rem;}}

#index #quality .title .inlineBl .h3sup {
	font-size:22px;font-size:2.2rem;color:#333;font-weight:bold;
	line-height:1.0;margin:0 0 20px;}

#index #quality .title .inlineBl ul {font-size:12px;font-size:1.2rem;line-height:1.1;font-weight:bold;
	font-family:'Metropolis-Medium',Meiryo,"メイリオ", Osaka,"HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", sans-serif;
	display:-webkit-flex;display:-ms-flexbox;display:flex;
	-webkit-align-items:center;-ms-align-items:center;align-items:center;}
#index #quality .title .inlineBl ul li {
	border-left:solid 2px #000;padding:0 0 0 10px;margin:0 20px 0 0;}
#index #quality .title .inlineBl ul li a {color:#000;text-decoration:none;}
#index #quality .title .inlineBl ul li a:hover {text-decoration:underline;}

#index #quality .item {margin-top:-80px;}
#index #quality .block {height:720px;position: relative;}
#index #quality .block+.block {margin-top:-100px;}

#index #quality .block .inBox {
	position: absolute;top:0;left:0;bottom:0;right:0;z-index:20;}
#index #quality .block .inBox .txtBox {font-size:14px;font-size:1.4rem;line-height:1.4;
	width:45%;max-width:555px;border-left:solid 2px #bcbcbc;padding:10px 0  0 40px;
	margin:210px 0 0}
#index #quality .block .inBox .txtBox h4 {
	font-size:38px;font-size:3.8rem;font-weight:normal;line-height:1.1;
	font-family:'Metropolis-SemiBold',Meiryo,"メイリオ", Osaka,"HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", sans-serif;
	margin:0 0 20px;letter-spacing:-0.02em;}
#index #quality .block .inBox .txtBox p.btn {width:235px;height:45px;margin:25px 0 0 auto;}
#index #quality .block .inBox .txtBox p.btn a {height:45px;}
#index #quality .block .inBox .txtBox p.btn.line a:after {width:20px;}


#index #quality .block .qualityPhoto {position:absolute;right:0;top:0;
	width:44%;/*margin :0 0 0 56%;*/z-index: 5;overflow:hidden;}
#index #quality .block .qualityPhoto svg {display: block;}

/* Maintenance */
#index #quality .block.mainte {height:450px;}
#index #quality .block.mainte .inBox .txtBox {margin:20px 0 0;}
/* Fitting */
#index #quality .block.fit .inBox .txtBox {margin:100px 0 0;}

/* Animation */
@media screen and (min-width:820px) {
	#index #quality .title .inlineBl h3,
	#index #quality .title .inlineBl .h3sup,
	#index #quality .title .inlineBl ul,
	#index #quality .block .inBox .txtBox {opacity:0;}
	
	#index #quality .title .inlineBl h3.anim {
		animation:fadeZoomIn .6s ease-out 0s 1 forwards;}
	#index #quality .title .inlineBl .h3sup.anim {
		animation:fadeIn .3s ease-out .1s 1 forwards;}
	#index #quality .title .inlineBl ul.anim {
		animation:fadeIn .3s ease-out .2s 1 forwards;}
	#index #quality .block .inBox .txtBox.anim {
		animation:fadeIn .8s ease-out 0s 1 forwards;}
	
	#index #quality .block .qualityPhoto svg {opacity:0;}
	#index #quality .block .qualityPhoto.anim svg {
		animation:rhtSlideIn .5s ease-out 0s 1 forwards;}
	#index #quality .block.mainte .qualityPhoto.anim svg {
		animation:lftSlideIn .5s ease-out 0s 1 forwards;}
}


/*-------------------------------------------------
	SERVICE
--------------------------------------------------*/
#index #service {width:100%;margin-top:0;z-index:99;
	background:#000;position:relative;color:#FFF;height:450px;}
#index #service:before {
	content: "";position: absolute;display: block;
	top: -180px;left: 0px;
	width: 100%;height: 360px;
	padding-top: 0px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0,0v1.55h1.6v-1z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
	background-size: 100% 100%;}
#index #service:after {
	content: "";position: absolute;display: block;
	bottom: 0;left: 0px;
	width: 100%;height: 360px;
	padding-top: 0px;
	transform: translate(0, 50%);
    background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0,0.5v0.5h1v-1z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
	background-size: 100% 100%;}

#index #service .contents {position:relative;padding-bottom:40px;z-index:1;}

#index #service .block {display:-webkit-flex;display:-ms-flexbox;display:flex;}
#index #service .block .column {width:20%;}
#index #service .block .column h4 {
	font-size:28px;font-size:2.8rem;font-weight:normal;line-height:1.0;
	letter-spacing:0.2em;text-align:center;margin:0 0 20px;
	font-family:'Metropolis-SemiBold',Meiryo,"メイリオ", Osaka,"HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", sans-serif;}
#index #service .block .column .photo {position:relative;}
#index #service .block .column .photo .btn {position:absolute;bottom:0;right:0;
	width:115px;;min-width:inherit;height:25px;}
#index #service .block .column .photo .btn a {width:115px;min-width:inherit;height:25px;}

/* Ordermade */
#index #service .block .column:nth-child(4) h4 {letter-spacing:0;}


/* Animation */
@media screen and (min-width:820px) {
	#index #service h3,
	#index #service .block .column {opacity:0;}
	
	#index #service h3.anim {
		animation:fadeZoomIn .4s ease-out 0s 1 forwards;}
	#index #service .block .column.anim {
		animation:fadeInUp .5s ease-out 0s 1 forwards;}
	#index #service .block .column:nth-child(even).anim {
		animation:fadeInDown .5s ease-out 0s 1 forwards;}
	#index #service .block .column:nth-child(2).anim
		{animation-delay:.1s;}
	#index #service .block .column:nth-child(3).anim
		{animation-delay:.2s;}
	#index #service .block .column:nth-child(4).anim
		{animation-delay:.3s;}
	#index #service .block .column:nth-child(5).anim
		{animation-delay:.4s;}
	
}

/*-------------------------------------------------
	PICK UP
--------------------------------------------------*/
#index #pickup {padding:120px 0 160px;position:relative;z-index:100;}
#index #pickup .column {overflow:hidden;}
#index #pickup .btn {width:235px;height:45px;margin:0 0 0 auto;}
#index #pickup .btn a {width:235px;height:45px;}


/* Animation */
@media screen and (min-width:820px) {
	#index #pickup h3,
	#index #pickup .column {opacity:0;}
	
	#index #pickup h3.anim {
		animation:fadeIn 1.5s ease-out 0s 1 forwards;}
	#index #pickup .column.anim {
		animation:fadeZoomIn .3s ease-out 0s 1 forwards;}
	#index #pickup .column:nth-child(2).anim {animation-delay:.1s;}
	#index #pickup .column:nth-child(3).anim {animation-delay:.2s;}
	#index #pickup .column:nth-child(4).anim {animation-delay:.3s;}
	#index #pickup .column:nth-child(5).anim {animation-delay:.4s;}
	#index #pickup .column:nth-child(6).anim {animation-delay:.5s;}
	#index #pickup .column:nth-child(7).anim {animation-delay:.6s;}
	#index #pickup .column:nth-child(8).anim {animation-delay:.7s;}
}


/*-------------------------------------------------
	NEWS
--------------------------------------------------*/
#index #topNews {background:#f9f7f7;position:relative;padding:0 0 80px;}
#index #topNews:before {
	content: ""; position: absolute; display: block;
	top: -180px;left: 0px;
	width: 100%;height: 360px;
	padding-top: 0px;
  	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0,0.5v0.5h1v-1z%22%20fill%3D%22%23f9f7f7%22%2F%3E%3C%2Fsvg%3E");
	background-size: 100% 100%;
    transform: none; }

#index #topNews .contents {position:relative;z-index:1}

#index #topNews dl {font-size:18px;font-size:1.8rem;line-height:1.2;margin:0 11.8%;
	display:-webkit-flex;display:-ms-flexbox;display:flex;}

#index #topNews dl dt {flex:1 0 130px;width:14%;font-weight:bold;
	border-right:solid 1px #cecece;padding:0 20px 0 0;margin:0 0 10px;}
#index #topNews dl dd {width:86%;margin:0 0 10px 20px;}
#index #topNews dl dd a {
	text-decoration:none;display:block;position:relative;padding:0 20px 0 0;}
#index #topNews dl dd a:hover {text-decoration:underline;}
#index #topNews dl dd a:after {
	font-family: 'icomoon';
	content: "\e900";
	font-size:14px;font-size:1.4rem;color:#999;
	position:absolute;top:2px;right:0;}

#index #topNews .btn {width:235px;height:45px;margin:20px 0 0 auto;}
#index #topNews .btn a {width:235px;height:45px;}


/*-------------------------------------------------
	Animation PC Only
--------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity:0;}
	100% {opacity:1;}
}
@keyframes fadeOut {
	0% {opacity:1;}
	100% {opacity:0;}
}
@keyframes fadeInUp {
	0% {opacity:0;margin-top:100px;}
	100% {opacity:1;margin-top:0;}
}
@keyframes fadeInDown {
	0% {opacity:0;margin-top:-100px;}
	100% {opacity:1;margin-top:0;}
}
@keyframes fadeZoomIn {
	0% {opacity:0;transform: scale3d(.3, .3, .3);}
	100% {opacity:1;}
}
@keyframes rhtSlideIn {
	0% {opacity:0;transform:translate(-100px,0);}
	40% {opacity:0.2;}
	100% {opacity:1;transform:translate(0,0);}
}
@keyframes lftSlideIn {
	0% {opacity:0;transform:translate(100px,0);}
	100% {opacity:1;transform:translate(0,0);}
}


/*=================================================================================
　　SP設定
=================================================================================*/

/*===============================================
  見やすさ設定
===============================================*/
@media screen and (max-width:1100px) {
	
	/*-------------------------------------------------
	　setting
	--------------------------------------------------*/
	#index header .row {padding:0;}

	/*-------------------------------------------------
	　Concept
	--------------------------------------------------*/
	#index #concept .inner {padding:5% 0 0;}
	#index #concept h3 {font-size:56px;font-size:5.6rem;margin:0 0 5px;}
	#index #concept .h3sup,
	#index #concept .h3sup{font-size:20px;font-size:2.0rem;margin:0 0 4%;}
	
	/*-------------------------------------------------
	　Seravice
	--------------------------------------------------*/
	#index #service {margin-top:-5px;}
	#index #service .block .column h4 {
		font-size:22px;font-size:2.2rem;letter-spacing:0;}
}

/*===============================================
●画面の横幅が769pxまで（タブレット）
===============================================*/

@media screen and (max-width:769px) {
	
	/*-------------------------------------------------
	　setting
	--------------------------------------------------*/
	#index header .row {padding:0 10px;}
	
	#index .triggerBtn {margin-left:0;}
	#index header ul#navTop {margin-right:0;}
	
	/*-------------------------------------------------
	　main Gallery
	--------------------------------------------------*/
	#slideWrap {top:45px;}
	
	#slideWrap #innerframe {position:fixed;top:45px;
		border-right:solid 10px #FFF;border-left:solid 10px #FFF;
		border-bottom:solid 35px #FFF;}
	#slideWrap #txtBox h2 {margin:-20px 0 0 -4em;}
	
	#slideWrap #txtBox p.btn {
		width:180px;height:40px;bottom:50px;margin-left:-90px;}
	#slideWrap #txtBox p.btn a:after {width:15%;}
	
	#slideWrap #txtBox div#inNews {bottom:20px;right:20px;}
	
	#slideWrap #txtBox div#inNews div.inner p.title {
		font-size:18px;font-size:1.8rem;}
	

	/*===============================================
	　Wrapper & Contents Common
	===============================================*/
	#index h3 {
		font-size:42px;font-size:4.2rem;font-weight:normal;line-height:1.0;margin:0 0 35px;}

	/*-------------------------------------------------
	　Concept
	--------------------------------------------------*/
	#index #concept {height:320px;}
	#index #concept:before {display:none;}
	#index #concept h3 {font-size:32px;font-size:3.2rem;margin:0 0 5px;}
	#index #concept .h3sup,
	#index #concept .h3sup {font-size:16px;font-size:1.6rem;margin:0 0 10px;}

	#index #concept .cntLft,
	#index #concept .cntRht {width:50%;}
	#index #concept .cntRht .bx-wrapper {margin:0;padding:0 0 0;}
	
	#index #concept .cntRht .bx-wrapper .bx-controls {margin-top:-20px;}
	#index #concept .cntRht .bx-wrapper .bx-pager {margin:0 0 0 30px;top:0;}
	#index #concept .cntRht .bx-wrapper .bx-pager.bx-default-pager a {
		width: 15px;height: 3px;margin:0 3px;}

	#index #concept .inner {padding:40px 2% 0;}

	#index #concept .column {font-size:12px;font-size:1.2rem;padding:5px 0 5px 15px;}
	
	/*-------------------------------------------------
	　Japan premium Quality
	--------------------------------------------------*/
	#index #quality {padding:60px 0 0;}
	#index #quality .title {margin:0 0 20px;padding:0 10px;}
	#index #quality .title .inlineBl h3 {font-size:6vw;margin:0 0 10px;}
	#index #quality .title .inlineBl .h3sup {
		font-size:18px;font-size:1.8rem;margin:0 0 15px;}
	
	#index #quality .title .inlineBl ul {font-size:12px;font-size:1.2rem;}
	
	#index #quality .item {margin:0;}
	#index #quality .block {height:auto;position: relative;}
	#index #quality .block+.block {margin-top:0;}

	#index #quality .block .inBox {position: relative;padding:20px 0;}
	#index #quality .block .inBox .txtBox {font-size:12px;font-size:1.2rem;
		width:440px;max-width:none;/*border:none;padding:0;*/margin:0 auto;}
	#index #quality .block .inBox .txtBox h4 {font-size:5vw;line-height:1.0;}
	#index #quality .block .inBox .txtBox p.btn {width:235px;height:35px;margin:25px 0 0;}
	#index #quality .block .inBox .txtBox p.btn a {height:35px;}
	
	#index #quality .block .qualityPhoto {position:relative;width:100%;}
	#index #quality .block .qualityPhoto img {width: 100%;}

	/* Maintenance */
	#index #quality .block.mainte {height:auto;margin-top:-20px;}
	#index #quality .block.mainte .inBox .txtBox {margin:0 auto;}
	
	/* Fitting */
	#index #quality .block.fit .inBox .txtBox {margin:0 auto;}

	/*-------------------------------------------------
	　SERVICE
	--------------------------------------------------*/	
	#index #service {margin-top:10px;height:auto;padding:15px 0 0;}
	#index #service:before {top: -140px;height:300px;
		background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0,0v1.62h1.5v-1z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
		background-size: 100% 100%;}
	#index #service:after {bottom: 0;height: 300px;
		transform: translate(0, 50%);
    	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0,0.4v0.7h1v-1z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E");
		background-size: 100% 100%;}

	#index #service .block {
		-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;
		-webkit-justify-content:center;-ms-justify-content:center;justify-content:center;}
	#index #service .block .column {width:33.3%;max-width:220px;margin:0 0 25px}
	#index #service .block .column h4 {
		font-size:3.5vw;letter-spacing:0.1em;margin:0 0 5px;}
	#index #service .block .column .photo .btn {font-size:12px;font-size:1.2rem;}
	#index #service .block .column .photo .btn a {width:100%;;}

	/*-------------------------------------------------
	　PICK UP
	--------------------------------------------------*/
	#index #pickup {padding:20px 0 80px;}
	#index #pickup .btn {width:180px;min-width:inherit;height:35px;}
	#index #pickup .btn a {width:180px;min-width:inherit;height:35px;}
	
	/*-------------------------------------------------
	　NEWS
	--------------------------------------------------*/
	#index #topNews {padding:0 0 50px;}
	#index #topNews:before {top: -140px;height:300px;
  	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221%22%20height%3D%221%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0,0.4v0.7h1v-1z%22%20fill%3D%22%23f9f7f7%22%2F%3E%3C%2Fsvg%3E");
	background-size: 100% 100%;}

	#index #topNews dl {font-size:14px;font-size:1.4rem;margin:0 8%;}
	
	#index #topNews dl dt {flex:1 0 100px;}
	
	#index #topNews dl dd a {padding:0 12px 0 0;}
	#index #topNews dl dd a:after {font-size:10px;font-size:1.0rem;top:1px;}

	#index #topNews .btn {width:180px;min-width:inherit;height:35px;}
	#index #topNews .btn a {width:180px;min-width:inherit;height:35px;}


}

/*===============================================
●画面の横幅が640pxまで（SP）
===============================================*/

@media screen and (max-width:640px) {
	
	/*-------------------------------------------------
	　LOADING
	--------------------------------------------------*/
	#loading,#opening {display:none;}
	
	/* SP ----------------------------------------------*/
	#loading_sp {display:block;width:100%;height:100%;position:fixed;top:0;left:0;
		background:#f7f4f0;z-index:99999999;text-align: center;}
	#loading_sp div {width:100%;height:100%;position:relative;}
	#loading_sp div p {position:absolute;top:50%;left:50%;}
	#loading_sp div p.logo {width:260px;margin:-30px 0 0 -130px;
		animation:logoIn 1s ease 0s 1 forwards;}
	#loading_sp div p.loader {display:block;
		margin:20px 0 0 -20px;left:50%;width:40px;height:40px;}

	/*===============================================
	　Wrapper & Contents Common
	===============================================*/
	#index h3 {font-size:32px;font-size:3.2rem;margin:0 0 15px;}
	
	/*-------------------------------------------------
	　main Gallery
	--------------------------------------------------*/
	/* PC用 */
	#slideWrap {display:none;}
	
	/* SP用 */
	#slideWrap_sp {display:block;;position:relative;top:45px;
		border:solid 10px #FFF;}
	#slideWrap_sp h2 {position:absolute;top:50%;left:50%;margin:-0.5em 0 0 -4em;
		font-size:8vw;color:#FFF;z-index:110;
	font-family:'Metropolis-SemiBold',Meiryo,"メイリオ", Osaka, sans-serif;}
	
	#viewer {margin: 0 auto;width: 100%;position: relative;overflow: hidden;}
	#viewer ul {width: 100%;overflow: hidden;position: relative;}
	#viewer ul li {top: 0;left: 0;width: 100%;position: absolute;}
	#viewer ul li img {width: 100%;}
	/* sideNavi------------------------- */
	#viewer .btnPrev,
	#viewer .btnNext {margin-top: -25px;top: 50%; width: 50px;height: 50px;
		position: absolute;z-index: 101;}
	#viewer .btnPrev {left: 10px;
		background: #ccc url(../img/btnPrev.jpg) no-repeat center center;}
	#viewer .btnNext {right: 10px;
		background: #ccc url(../img/btnNext.jpg) no-repeat center center;}
	
	/*=========================================================
	　Wrapper & Contents Common
	=========================================================*/
	#index #container {padding:0;z-index:inherit;margin:45px 0 0;}
	
	/*-------------------------------------------------
	　Concept
	--------------------------------------------------*/	
	#index #concept .inner {padding:5% 2% 0;}
	#index #concept h3 {font-size:20px;font-size:2.0rem;}
	#index #concept .cntRht .bx-wrapper {padding:10% 0 0;}
		
	/*-------------------------------------------------
	　Japan premium Quality
	--------------------------------------------------*/
	#index #quality .title .inlineBl .h3sup {
		font-size:16px;font-size:1.6rem;}
	#index #quality .title .inlineBl ul {
		-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
	#index #quality .title .inlineBl ul li {margin:0 20px 8px 0;}
	
	#index #quality .block .inBox {padding:30px 0;}
	#index #quality .block .inBox .txtBox h4 {font-size:6vw;}
	#index #quality .block .inBox .txtBox {width:100%;padding:0 5%;border:none;}
	
	#index #service .block .column .photo .btn {width:80%;}

}

/*===============================================
●画面の横幅が480pxまで（スマホ）
===============================================*/
@media screen and (max-width:480px) {
	
	/*-------------------------------------------------
	　Concept
	--------------------------------------------------*/
	#index #concept {height:500px;}
	#index #concept:before {display:none;}
	#index #concept .flex {display:block;height:500px;}
	#index #concept .cntLft,
	#index #concept .cntRht {width:100%;display:block;}
	#index #concept .cntLft {height:300px;}
	#index #concept .cntRht {height:200px;overflow:hidden;}
	#index #concept .cntRht .bx-wrapper,
	#index #concept .cntRht .bx-wrapper .bx-viewport,
	#index #concept .cntRht .bx-wrapper .bx-viewport img {max-height:260px;}
	
	#index #concept .cntRht .bx-wrapper {top:-60px;}
	#index #concept .cntRht .bx-wrapper .bx-controls {margin-top:0;}
	#index #concept .cntRht .bx-wrapper .bx-pager{top:-70px;}
		

	/*-------------------------------------------------
	　Japan premium Quality
	--------------------------------------------------*/
	#index #quality .block .inBox .txtBox h4 {font-size:7vw;}
	
	/*-------------------------------------------------
	　NEWS
	--------------------------------------------------*/
	#index #topNews dl {display:block;}
	
	#index #topNews dl dt {
		flex:none;width:inherit;border:none;padding:0;margin:0 0 5px;}
	#index #topNews dl dd {width:inherit;margin:0 0 15px;}
	#index #topNews dl dd a:after {font-size:16px;font-size:1.6rem;
		top:50%;margin-top:-12px;}


}

/*===============================================
●画面の横幅が320px以下（小さいスマホ）
===============================================*/
@media screen and (max-width:319px) {
	
}