@charset "UTF-8";

/*---------------------------------------------

General Page CSS

for auro-jp.net
coded by ryo at 2017-07-27
imported to /purpose/color_designer.html

---------------------------------------------*/

@import url(default.css);
@import url(base2.css);

body,body{
	width:100vw;
	height:100vh;
	overflow:hidden !important;
}
#main-block ul li{
	display:none;
}
#main-block ul li.active{
	display:block;
}
#main-block ul li div{
	width:100vw;
	height:100vh;
	background-size:cover !important;
	position:absolute;
}
#main-block ul li:nth-of-type(1) div.mask{
	background:url(../img/purpose/color_designer/room1.png) center center no-repeat;
}
#main-block ul li:nth-of-type(2) div.mask{
	background:url(../img/purpose/color_designer/room2.png) center center no-repeat;
}
#main-block ul li:nth-of-type(3) div.mask{
	background:url(../img/purpose/color_designer/room3.png) center center no-repeat;
}
#main-block ul li:nth-of-type(4) div.mask{
	background:url(../img/purpose/color_designer/room4.png) center center no-repeat;
}
#main-block ul li:nth-of-type(5) div.mask{
	background:url(../img/purpose/color_designer/room5.png) center center no-repeat;
}
#main-block ul li:nth-of-type(6) div.mask{
	background:url(../img/purpose/color_designer/room6.png) center center no-repeat;
}
#main-block ul li:nth-of-type(7) div.mask{
	background:url(../img/purpose/color_designer/room7.png) center center no-repeat;
}
#main-block ul li:nth-of-type(8) div.mask{
	background:url(../img/purpose/color_designer/room8.png) center center no-repeat;
}
#main-block ul li:nth-of-type(9) div.mask{
	background:url(../img/purpose/color_designer/room9.png) center center no-repeat;
}
#main-block ul li:nth-of-type(10) div.mask{
	background:url(../img/purpose/color_designer/room10.png) center center no-repeat;
}
/*
#main-block ul li div.foundation{
	background-blend-mode:multiply !important;
}
#main-block ul li:nth-of-type(1) div.foundation{
	background:url(../img/purpose/color_designer/fd_room1.jpg) center center no-repeat #FFF fixed;
	background-blend-mode:multiply !important;
}
#main-block ul li:nth-of-type(2) div.foundation{
	background:url(../img/purpose/color_designer/fd_room2.jpg) center center no-repeat #FFF fixed;
}
#main-block ul li:nth-of-type(3) div.foundation{
	background:url(../img/purpose/color_designer/fd_room3.jpg) center center no-repeat #FFF fixed;
}
#main-block ul li:nth-of-type(4) div.foundation{
	background:url(../img/purpose/color_designer/fd_room4.jpg) center center no-repeat #FFF fixed;
}
#main-block ul li:nth-of-type(5) div.foundation{
	background:url(../img/purpose/color_designer/fd_room5.jpg) center center no-repeat #FFF fixed;
}
#main-block ul li:nth-of-type(6) div.foundation{
	background:url(../img/purpose/color_designer/fd_room6.jpg) center center no-repeat #FFF fixed;
}
#main-block ul li:nth-of-type(7) div.foundation{
	background:url(../img/purpose/color_designer/fd_room7.jpg) center center no-repeat #FFF fixed;
}
#main-block ul li:nth-of-type(8) div.foundation{
	background:url(../img/purpose/color_designer/fd_room8.jpg) center center no-repeat #FFF fixed;
}
#main-block ul li:nth-of-type(9) div.foundation{
	background:url(../img/purpose/color_designer/fd_room9.jpg) center center no-repeat #FFF fixed;
}
#main-block ul li:nth-of-type(10) div.foundation{
	background:url(../img/purpose/color_designer/fd_room10.jpg) center center no-repeat #FFF fixed;
}
*/
#main-block dl{
	position:fixed;
	bottom:0;
	right:0;
	z-index:999;
	background:rgba(255,255,255,0.7);
	font-size:16px;
	padding:17px 0px 12px 30px;
	width:330px;
}
#main-block dl dd{
	padding:5px 0 0 15px;
	line-height:1.6em;
}


nav p.color_title{
	height:80px;
	line-height:80px;
	white-space:nowrap;
	font-size:27px;
	padding-left:60px;
	letter-spacing:2px;
	background:#FFF;
	margin-bottom:30px;
}
nav dl{
	border:none !important;
}
nav dl dt{
	font-size:18px;
}
nav dd ul{
	overflow:hidden;
	margin-top:6px;
	margin-bottom:40px;
}
nav dl.room dd ul li{
	width:160px;
	float:left;
	margin:0 40px 20px 0;
	position:relative;
	cursor:pointer;
}
nav dl.room dd ul li span img{
	position:absolute;
	top:0px;
	left:0px;
	width:31px;
}
nav dl.color dd ul li{
	width:100px;
	height:50px;
	float:left;
	margin:0 15px 15px 0;
	border:#9e9e9e 1px solid;
	position:relative;
	box-sizing:border-box;
	cursor:pointer;
	text-indent:-99999px;
}
nav dl.color dd ul li span img{
	position:absolute;
	top:-1px;
	left:-1px;
	width:31px;
}
nav dl.color dd ul li:nth-of-type(1){
	background:#fbecd1;
}
nav dl.color dd ul li:nth-of-type(2){
	background:#fae5c1;
}
nav dl.color dd ul li:nth-of-type(3){
	background:#f9ddb1;
}
nav dl.color dd ul li:nth-of-type(4){
	background:#f3d29d;
}
button img{
	width:65px;
}









.drawer-nav{
	position:fixed;
	z-index:9999999;
	top:0;
	width:670px;
	height:100%;
	color:#222;
	background:rgba(255,255,255,0.7);
	color:#333030;
	overflow:scroll;
}
.drawer-brand{
	font-size:1.5rem;font-weight:700;line-height:3.75rem;display:block;padding-right:.75rem;padding-left:.75rem;text-decoration:none;color:#222
}
.drawer-menu{
	margin:0;padding:0;list-style:none
}
.drawer-menu-item{
	font-size:1rem;display:block;padding:.75rem;text-decoration:none;color:#222
}
.drawer-menu-item:hover{
	text-decoration:underline;color:#555;background-color:transparent
}
.drawer-overlay{
	position:fixed;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:rgba(0,0,0,0.0);
}
.drawer-open header{
	background-color:rgba(0,0,0,0.0);
}
.drawer-open .drawer-overlay{
	display:block
}
.drawer--top .drawer-nav{
	top:-100%;left:0;width:100%;height:auto;max-height:100%;-webkit-transition:top .6s cubic-bezier(.19,1,.22,1);transition:top .6s cubic-bezier(.19,1,.22,1)
}
.drawer--top.drawer-open .drawer-nav{
	top:0
}
.drawer--top .drawer-hamburger,.drawer--top.drawer-open .drawer-hamburger{
	right:0
}
.drawer--left .drawer-nav{
	left:-600px;-webkit-transition:left .6s cubic-bezier(.19,1,.22,1);transition:left .6s cubic-bezier(.19,1,.22,1)
}
.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger{
	left:70px;
}
.drawer--left.drawer-open .drawer-nav{
	left:0px;
}
.drawer--left.drawer-open .drawer-hamburger{
	left:670px;
}
.drawer--right .drawer-nav{
	right:-16.25rem;-webkit-transition:right .6s cubic-bezier(.19,1,.22,1);transition:right .6s cubic-bezier(.19,1,.22,1)
}
.drawer--right .drawer-hamburger,.drawer--right.drawer-open .drawer-nav,.drawer--right.drawer-open .drawer-navbar .drawer-hamburger{
	right:0
}
.drawer--right.drawer-open .drawer-hamburger{
	right:16.25rem
}
.drawer-hamburger{
	position:fixed;
	z-index:4;
	top:50%;
	display:block;
	box-sizing:content-box;
	padding:0;
	-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);
	transition:all .6s cubic-bezier(.19,1,.22,1);
	-webkit-transform:translateZ(0);
	transform:translateZ(0);
	border:0;
	outline:0;
	background-color:transparent;
}
.drawer-hamburger:hover{
	cursor:pointer;background-color:transparent
}
.drawer-hamburger-icon{
	position:relative;display:block;margin-top:10px
}
.drawer-hamburger-icon,.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
	width:100%;height:3px;-webkit-transition:all .6s cubic-bezier(.19,1,.22,1);transition:all .6s cubic-bezier(.19,1,.22,1);background-color:#222
}
.drawer-hamburger-icon:after,.drawer-hamburger-icon:before{
	position:absolute;top:-10px;left:0;content:' '
}
.drawer-hamburger-icon:after{
	top:10px
}
.drawer-open .drawer-hamburger-icon{
	background-color:transparent
}
.drawer-open .drawer-hamburger-icon:after,.drawer-open .drawer-hamburger-icon:before{
	top:0
}
.drawer-open .drawer-hamburger-icon:before{
	-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)
}
.drawer-open .drawer-hamburger-icon:after{
	-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)
}
.sr-only{
	position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px;margin:-1px;padding:0;border:0
}
.sr-only-focusable:active,.sr-only-focusable:focus{
	position:static;overflow:visible;clip:auto;width:auto;height:auto;margin:0
}
.drawer--sidebar,.drawer--sidebar .drawer-contents{
	background-color:#fff
}
@media (min-width:64em){
	.drawer--sidebar .drawer-hamburger{
		display:none;visibility:hidden
	}
	.drawer--sidebar .drawer-nav{
		display:block;-webkit-transform:none;-ms-transform:none;transform:none;position:fixed;width:12.5rem;height:100%
	}
	.drawer--sidebar.drawer--left .drawer-nav{
		left:0;border-right:1px solid #ddd
	}
	.drawer--sidebar.drawer--left .drawer-contents{
		margin-left:12.5rem
	}
	.drawer--sidebar.drawer--right .drawer-nav{
		right:0;border-left:1px solid #ddd
	}
	.drawer--sidebar.drawer--right .drawer-contents{
		margin-right:12.5rem
	}
	.drawer--sidebar .drawer-container{
		max-width:48rem
	}
}
@media (min-width:75em){
	.drawer--sidebar .drawer-nav{
		width:16.25rem
	}
	.drawer--sidebar.drawer--left .drawer-contents{
		margin-left:16.25rem
	}
	.drawer--sidebar.drawer--right .drawer-contents{
		margin-right:16.25rem
	}
	.drawer--sidebar .drawer-container{
		max-width:60rem
	}
}
.drawer--navbarTopGutter{
	padding-top:3.75rem
}
.drawer-navbar .drawer-navbar-header{
	border-bottom:1px solid #ddd;background-color:#fff
}
.drawer-navbar{
	z-index:3;top:0;width:100%
}
.drawer-navbar--fixed{
	position:fixed
}
.drawer-navbar-header{
	position:relative;z-index:3;box-sizing:border-box;width:100%;height:3.75rem;padding:0 .75rem;text-align:center
}
.drawer-navbar .drawer-brand{
	line-height:3.75rem;display:inline-block;padding-top:0;padding-bottom:0;text-decoration:none
}
.drawer-navbar .drawer-brand:hover{
	background-color:transparent
}
.drawer-navbar .drawer-nav{
	padding-top:3.75rem
}
.drawer-navbar .drawer-menu{
	padding-bottom:7.5rem
}
@media (min-width:64em){
	.drawer-navbar{
		height:3.75rem;border-bottom:1px solid #ddd;background-color:#fff
	}
	.drawer-navbar .drawer-navbar-header{
		position:relative;display:block;float:left;width:auto;padding:0;border:0
	}
	.drawer-navbar .drawer-menu--right{
		float:right
	}
	.drawer-navbar .drawer-menu li{
		float:left
	}
	.drawer-navbar .drawer-menu-item{
		line-height:3.75rem;padding-top:0;padding-bottom:0
	}
	.drawer-navbar .drawer-hamburger{
		display:none
	}
	.drawer-navbar .drawer-nav{
		position:relative;left:0;overflow:visible;width:auto;height:3.75rem;padding-top:0;-webkit-transform:translateZ(0);transform:translateZ(0)
	}
	.drawer-navbar .drawer-menu{
		padding:0
	}
	.drawer-navbar .drawer-dropdown-menu{
		position:absolute;width:16.25rem;border:1px solid #ddd
	}
	.drawer-navbar .drawer-dropdown-menu-item{
		padding-left:.75rem
	}
}
.drawer-dropdown-menu{
	display:none;box-sizing:border-box;width:100%;margin:0;padding:0;background-color:#fff
}
.drawer-dropdown-menu>li{
	width:100%;list-style:none
}
.drawer-dropdown-menu-item{
	line-height:3.75rem;display:block;padding:0;padding-right:.75rem;padding-left:1.5rem;text-decoration:none;color:#222
}
.drawer-dropdown-menu-item:hover{
	text-decoration:underline;color:#555;background-color:transparent
}
.drawer-dropdown.open>.drawer-dropdown-menu{
	display:block
}
.drawer-dropdown .drawer-caret{
	display:inline-block;width:0;height:0;margin-left:4px;-webkit-transition:opacity .2s ease,-webkit-transform .2s ease;transition:opacity .2s ease,-webkit-transform .2s ease;transition:transform .2s ease,opacity .2s ease;transition:transform .2s ease,opacity .2s ease,-webkit-transform .2s ease;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);vertical-align:middle;border-top:4px solid;border-right:4px solid transparent;border-left:4px solid transparent
}
.drawer-dropdown.open .drawer-caret{
	-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)
}
.drawer-container{
	margin-right:auto;margin-left:auto
}
@media (min-width:64em){
	.drawer-container{
		max-width:60rem
	}
}
@media (min-width:75em){
	.drawer-container{
		max-width:70rem
	}
}
@media screen and (max-width:770px){
.drawer-nav{
	width:350px;
}
.drawer-nav dl{
	margin-left:1em;
}
nav dl.room dd ul li{
	width:145px;
	margin:0 15px 20px 0;
}
nav dl.color dd ul li{
	width:91px;
}
.drawer--left.drawer-open .drawer-hamburger{
	left:348px;
}
nav p.color_title{
	height:60px;
	line-height:60px;
	font-size:20px;
	padding-left:25px;
	margin-bottom:20px;
}
.drawer--left .drawer-nav{
	left:-280px;
}
#main-block dl{
	font-size:14px;
	padding:12px 0px 8px 15px;
	width:270px;
}
#main-block dl dd{
	padding-left:10px;
}
}
@media screen and (max-width:439px){
.drawer-nav{
	width:200px;
}
.drawer-nav dl{
	margin-left:0em;
}
nav dl.room dd ul li{
	width:84px;
	margin:0 15px 15px 0;
}
nav dl.room dd ul li:nth-of-type(2n),
nav dl.color dd ul li:nth-of-type(3n){
	margin-right:0;
}
nav dl.room dd ul li span img,
nav dl.color dd ul li span img{
	width:25px;
}
nav dl.color dd ul li{
	width:51px;
}
nav p.color_title{
	height:50px;
	line-height:50px;
	font-size:16px;
	padding-left:5px;
}
.drawer--left.drawer-open .drawer-hamburger{
	left:198px;
}
.drawer--left .drawer-nav{
	left:-160px;
}
.drawer--left .drawer-hamburger,.drawer--left.drawer-open .drawer-navbar .drawer-hamburger{
	left:39px;
}
#main-block dl{
	font-size:13px;
	padding:10px 0px 6px 15px;
	width:230px;
}
#main-block dl dd{
	padding-left:5px;
}
}