@charset "UTF-8";




/*----base----*/

html {
        font-size: 62.5%;
        overflow-y:scroll;
}

body {
        color: #black;
        text-align: center;
        font-size: 1.3rem;
        font-family: 'Playfair Display SC', "Hiragino Mincho Pro",  "MS P明朝",  serif;
        letter-spacing:1px;
        background-color: #fff;
        line-height: 2;
        margin:0;
      
}

a {
        text-decoration: none;
        color:black;
        transition: all 0.3s ease-in;
        -webkit-transition:all 0.3s ease-in;
        -moz-transition:all 0.3s ease-in;
        -o-transition:all 0.3s ease-in;
}

a:hover {
        color: #D5D5D5}
        
a:visited { 
        text-decoration: none;
        color:black;
}

a:active {
    text-decoration:none;
}

*, *::before, *::after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

/*----header----*/

.header { 
        width:100%;
        padding-top : 35px;
        padding-bottom:30px;
        background-color: rgba(255, 255, 255,0.5);

}

.header h1 {	
        width:600px;
        margin-left:auto;
        margin-right:auto;
        font-size: 1.5rem;
        font-weight:700;
        letter-spacing:3px;
        margin-top:0;
        margin-bottom:0;	

}

.mb-ul{
        display:none;
}

.global-nav ul  {
        list-style-type:none;
        margin-top: 0;
        margin-bottom:0;
        padding-left:0;
	 	 }
	 
.global-nav li   { 
        display: inline-block;
        font-size:1rem;
        letter-spacing:2px;
        margin:10px;
}

.global-nav {
        width:650px;
        margin-left:auto;
        margin-right:auto;
        text-align: center;
}

.global-nav a {
        text-decoration: none;
        color:black;
        transition: all 0.3s ease-in;
        -webkit-transition:all 0.3s ease-in;
        -moz-transition:all 0.3s ease-in;
        -o-transition:all 0.3s ease-in;}

.global-nav a:hover {
        color: #D5D5D5;
}

.nav-li-active a {	
        color: #003;
        text-decoration:underline;
}
        

/*----images----*/

.mainimage {
        width:100%;
        background-image:url(../images/by02.jpg);
        background-repeat:no-repeat;
        background-position:center ;
        background-attachment:scroll;
        background-size: cover;
        padding-top:400px;
        padding-bottom:500px;
              
}

.aboutimage {
        width:100%;
        background-image:url(../images/pg01.jpg);
        background-repeat:no-repeat;
        background-position:center ;
        background-attachment:scroll;
        background-size: cover;
        padding-top:320px;
        padding-bottom:320px;
        
}

.scentsimage {
        width:100%;
        background-image:url(../images/pg03.jpg);
        background-repeat:no-repeat;
        background-position:left ;
        background-attachment:scroll;
        background-size: cover;
        padding-top:370px;
        padding-bottom:370px;
}

.workimage {
        width:100%;
        background-image:url(../images/pg05.jpg);
        background-repeat:no-repeat;
        background-position:center ;
        background-attachment:scroll;
        background-size: cover;
        padding-top:370px;
        padding-bottom:370px;
}

.contactimage {
        width:100%;
        background-image:url(../images/pg02.jpg);
        background-repeat:no-repeat;
        background-position:center ;
        background-attachment:scroll;
        background-size: cover;
        padding-top:330px;
        padding-bottom:330px;
}

.firstimage {
        width:100%;
        background-image:url(../images/by02.jpg);
        background-repeat:no-repeat;
        background-position:left bottom ;
        background-attachment:scroll;
        background-size: cover;
        padding-top:300px;
        padding-bottom:330px;
        margin-bottom:40px;
}

.secondimage {
        width:100%;
        background-image:url(../images/by03.jpg);
        background-repeat:no-repeat;
        background-position:right bottom ;
        background-attachment:scroll;
        background-size: cover;
        padding-top:300px;
        padding-bottom:330px;
        margin-bottom:40px;
}


.thirdimage {
        width:100%;
        background-image:url(../images/by01.jpg);
        background-repeat:no-repeat;
        background-position:center bottom ;
        background-attachment:scroll;
        background-size: cover;
        padding-top:180px;
        padding-bottom:180px;
        
               
}

.artworks{background-color: rgba(255, 255, 255,0.2);}

/*----index----*/
.textspace {
        background-color: rgba(255, 255, 255,0.1);
}

.text {
        width:630px;
        margin-left:auto;
        margin-right:auto;
        padding: 40px ;
        padding-bottom:20px;
        margin-bottom:0px;
        
 
}

.text h1  {
        font-size: 1.4rem;
        font-weight:700;
        letter-spacing:5px;
        margin-top:0;

}

.text h2 {
        font-size: 1.3rem;
        font-weight:700;
        letter-spacing:5px;
        margin-bottom:30px;
   
}

.text p {text-align: center;}
	
.text .notojima {text-align:center;}	

/*----about----*/

.abouttext {
        width:630px;
        margin-left:auto;
        margin-right:auto;
        padding: 40px ;
        padding-bottom:40px;
        margin-bottom:0px;
        text-align: center;
 
}

.nov {letter-spacing:3px}

.abouttext h1  {
        font-size: 1.4rem;
        font-weight:700;
        letter-spacing:5px;
        margin-top:0;

}

.abouttext h2 {
        font-size: 1.3rem;
        font-weight:700;
        letter-spacing:5px;
        margin-bottom:30px;
   
}

.abouttext p {text-align:left;} 

/*----archives----*/

.archives {
        width:630px;
        margin-left:auto;
        margin-right:auto;
        padding: 40px ;
        padding-bottom:40px;
        margin-bottom:0px;
        text-align: center;
 
}

.archives h1  {
        font-size: 1.4rem;
        font-weight:700;
        letter-spacing:5px;
        margin-top:0;

}

.archives h2 {
        font-size: 1.3rem;
        font-weight:700;
        letter-spacing:5px;
        margin-bottom:30px;
   
}

.archives p{font-size: 1.1rem;
            text-align:center;
}

/*----contact----*/
.contactspace {
        background-color: rgba(255, 255, 255,0.1);
}

.contact {
        width:630px;
        margin-left:auto;
        margin-right:auto;
        padding: 40px ;
        padding-bottom:40px;
        margin-bottom:0px;
        text-align: center;
 
}

.contact h1  {
        font-size: 1.4rem;
        font-weight:700;
        letter-spacing:5px;
        margin-top:0;
        margin-bottom:20px;

}

.contact h2 {
        font-size: 1.4rem;
        font-weight:700;
        letter-spacing:5px;
        margin-bottom:30px;
   
}

.contact p{
        font-size: 1.3rem;
        text-align:center;
}


/*----footer----*/

.footer {margin-bottom:40px;}


/*----other----*/

#Topbotan {
        right: 15px;
        bottom: 15px;
        width: 45px;
        height: 45px;
        line-height: 45px;
        color: #424242;
        font-size: 15px;
        text-align: center;
        display: none;
        background: rgba(216, 214, 213, 0.5);
        position: fixed;
        z-index: 100;
        border-radius: 5px;
        -webkit-transform: translateZ(0);
        text-decoration:none;
}

#Topbotan:hover {
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
        opacity: 0.6;
}

.button {
	
        display: inline-block;
        width: 150px;
        padding: 10px;
        border: 1px solid gray;
        border-radius: 4px;
        
        color: black;
        text-decoration: none;
        letter-spacing: 5px;
        font-size: 1rem;
        font-weight:700;
        margin-top:20px;
        margin-bottom:40px
        
}

.button:hover{
        opacity:0.5;
}


.scentslogo{
        width:200px;
        margin-top:0px;}


/*----fade----*/

#fadejs {
        position : fixed;
        top : 0;
        left : 0;
        width: 100%;
        height : 100%;
        background-color : #FFF;
        z-index: 500;
}

#loading {
        display: none;
        position:absolute; 
        top:0;
        left:0;
        right: 0;
        bottom:0;
        width: 10px;
        height: 10px;
        z-index: 100;
        margin:auto
}

#fadecover {
        width: 100%;
        height: 100%;
        display: none;
        background-color: #fff;
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 50;
}
	


/*------------mobile------------*/

@media (max-width: 1024px) {
	
.mainimage {
        background-image:url(../images/by02_1200.jpg);
}

.aboutimage {
        background-image:url(../images/pg01_1200.jpg);
}

.scentsimage {
        background-image:url(../images/pg03_1200.jpg);
}

.workimage {
        background-image:url(../images/pg05_1200.jpg);
}

.contactimage {
        background-image:url(../images/pg02_1200.jpg);

}

.firstimage {
        background-image:url(../images/by02_1200.jpg);
 
}

.secondimage {
        background-image:url(../images/by03_1200.jpg);
  
}


.thirdimage {
        background-image:url(../images/by01_1200.jpg);
        
}
	
}


@media (max-width: 769px) {
	
a { -webkit-tap-highlight-color: transparent; }

.header  { padding-bottom:35px;}
	
/*mobil-nav*/

.global-nav {display: none;}

.mb-ul{
        display: none;
        list-style-type:none;
        width:100%;
        position:fixed;
        background-color: rgba(255, 255, 255,0.9);
        text-align:center;
        padding:0;
        top:0;
        margin:0

}

       
.mb-li-active p {	
        color: #BEBEBE;	
}
                
        

.mb-ul p{letter-spacing:4px;}


.mb-nav{ 
	  width: 30px; 
	  height:30px; 
	  top: 40px; 
	  right: 0px;
	  position:fixed; 
	  z-index: 20;}
.mb-nav1{ 
	  width:30px; 
	  height:1px; 
	  background-color:#6C6C6C; 
	  top:0px; 
	  right: 00px;
	  position:absolute; } 
.mb-nav2{ 
	  width:30px; 
	  height:1px; 
	  background-color:#6C6C6C; 
	  top:10px; 
	  right: 00px;
	  position:absolute; } 
.mb-nav3{ 
	  width:30px; 
	  height:1px; 
	  background-color:#6C6C6C; 
	  top:20px; 
	  right: 00px;
	  position:absolute; } 

.mb-nav1,.mb-nav2,.mb-nav3{ 
	  -moz-transition: all 0.05s linear; 
	  -o-transition: all 0.05s linear; 
	  -ms-transition: all 0.05s linear; 
	  -webkit-transition: all 0.05s linear; 
	  transition: all 0.05s linear;
	   }
  
.mb-navclick1{ 
	  top:15px;	  
	  -moz-transform: rotate(45deg);
	  -o-transform: rotate(45deg);	  
	  -ms-transform: rotate(45deg);
	  -webkit-transform: rotate(45deg);
	  transform: rotate(45deg); 
	  }
	  
.mb-navclick2{ 
	  opacity:0;}

.mb-navclick3{ 
	  top:15px;
	  -moz-transform: rotate(-45deg);
	  -o-transform: rotate(-45deg);
	  -ms-transform: rotate(-45deg);	  
	  -webkit-transform: rotate(-45deg);	  
	  transform: rotate(-45deg); 
	  }   
/*mobil-nav-end*/

	
.header h1{	
        width:100%;
        }

.global-nav {
        width:100%;
        }
        
.archives,.abouttext,.contact,.text {	
        width:100%;
        }   
        
.abouttext p {
        font-size: 1.1rem;
} 

.text p {
        text-align:center;
        font-size: 1.1rem;

}

.archives p {
        font-size: 1rem;
        text-align:center;
	
}

/*------------mobileimage------------*/

.aboutimage  {
        padding-top:250px;
        background-position:center bottom ;
        background-image:url(../images/pg01_1000.jpg);
                       
}

.mainimage {
        padding-top:250px;
        background-position:center bottom ;
        background-image:url(../images/bymob.jpg);
}

.scentsimage  {
        padding-top:250px;
        background-size: cover;
        background-position:center ;
        background-image:url(../images/pg03_1000.jpg);
}

.workimage {
        padding-top:250px;
        background-size: cover;
        background-position:center ;
        background-image:url(../images/pg05_1000.jpg);
}
.contactimage {
        padding-top:250px;
        background-size: cover;
        background-position:right ;
        background-image:url(../images/pg02_1000.jpg);
	
}
.firstimage{
        padding-top:100px;
        background-position:left;
        background-image:url(../images/by02_1000.jpg);

}
.secondimage{
        padding-top:100px;
        background-position:right;
        background-image:url(../images/by03_1000.jpg);
}

.thirdimage{
        padding-top:40px;
        background-position:right;
        background-image:url(../images/by01_1000.jpg);
}


#Topbotan {
        right: 0px;
        bottom: 15px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        color: #424242;
        font-size: 15px;
        text-align: center;
        display: none;
        background: rgba(216, 214, 213, 0.1);
        position: fixed;
        z-index: 100;
        border-radius: 5px;
        -webkit-transform: translateZ(0);
        text-decoration:none;
}	

}

@media (max-width: 440px){
	
#Topbotan {
        right: 0px;
        bottom: 15px;
        width: 40px;
        height: 40px;
        line-height: 40px;
        color: #424242;
        font-size: 15px;
        text-align: center;
        display: none;
        background: rgba(216, 214, 213, 0.3);
        position: fixed;
        z-index: 100;
        border-radius: 5px;
        -webkit-transform: translateZ(0);
        text-decoration:none;
}	

.mainimage{
        padding-bottom:100px;
        background-position:center bottom;
        background-image:url(../images/bymob.jpg);
        }
.text h1 {font-size: 1.2rem;
          letter-spacing:4px;}
.text h2 {font-size: 1rem;
          letter-spacing:2px;}
.text p {
        text-align:center;
        font-size: 1rem
}




.firstimage{
          padding-bottom:160px;
          background-position:center;
	margin-bottom:15px;
	background-image:url(../images/by02_750.jpg);
}
.secondimage{
	padding-bottom:190px;
          background-position:left;
	margin-bottom:15px;
	background-image:url(../images/by03_750.jpg);
}
.thirdimage{
	padding-bottom:130px;
          background-position:left;
	margin-bottom:0px;
	background-image:url(../images/by01_750.jpg);
}

.aboutimage{
	padding-bottom:60px;
          background-position:left;
	margin-bottom:0px;
	background-image:url(../images/pg01_750.jpg);
}

.abouttext h1 {
	font-size: 1.1rem;
	letter-spacing:1px;}
.abouttext h2 {
	font-size: 1rem;
          letter-spacing:1px;}
.abouttext p {
        text-align:left;
        font-size: 1rem
          }


.scentsimage{
	padding-bottom:80px;
          background-position:center;
	background-image:url(../images/pg03_750.jpg);
	}

.scentstext h1 {
	font-size: 1.1rem;
	letter-spacing:3px;}
.scentstext h2 {
	font-size: 1.1rem;
          letter-spacing:3px;}

.scentslogo{
          width:150px;
          }

.workimage{
	padding-bottom:80px;
          background-position:center bottom;
	background-image:url(../images/pg05_750.jpg);
	}

.archives h1 {
	font-size: 1.1rem;
	letter-spacing:3px;}
.archives h2 {
	font-size: 1.1rem;
          letter-spacing:2px;}

.archives p{
	font-size: 1rem;
	}
	
.contactimage{
	padding-bottom:80px;
          background-position:right bottom;
	background-image:url(../images/pg02_750.jpg);
	}

.contact h1 {
	font-size: 1.2rem;
	letter-spacing:3px;}
.contact h2 {
	font-size: 1.1rem;
          letter-spacing:2px;}

.contact p{
	font-size: 1rem;
	}	
	

.text .notojima {text-align:center;}

.header h1 {font-size: 1.2rem;}

}