@charset "UTF-8";

@import url(https://cdn.jsdelivr.net/npm/yakuhanjp@3.2.0/dist/css/yakuhanmp-noto.min.css);

@font-face {
	font-family: 'Museo_500';
	src:url('./font/Museo/Museo_500.otf')  format('opentype');
}

@font-face {
	font-family: 'Museo_700';
	src:url('./font/Museo/Museo_700.otf')  format('opentype');
}

.en{font-family: 'Museo_700';}
.jp{ font-size: 0.85em; line-height: 1.8}

/*/////////////////////////
base layout　
//////////////////////////*/



html,body {
	width: 100%;
	font-size: 18px;
}

 
 
body {
	
	font-family:YakuHanMP_Noto,  "Noto Sans Japanese", sans-serif;
    font-style: normal;
    font-weight: 400;
	line-height: 2;
    -webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
    background: #fff; 
    color: var(--color-default);

	text-align: left;
    overflow-y: scroll;
    letter-spacing: 0.1em;

    
    

}
body.windowFixed{
    height: 100%;
    position: fixed !important;
}

body.loadingFinish{ position: relative;}
body.loadingFinish.windowLock{
    height: auto;
    position: relative;
}

a, a:link,a:hover, a:active ,a:visited {
	color: inherit ;
	text-decoration: none;
}
body *{ position: relative;}

body.loadingFinish{}

body.fixed{ overflow-x:hidden; overflow-y: scroll;}
body.fixed #container{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1;}

html.touchDevice,
.touchDevice body{ font-size: 18px;}


#container{ position:relative; opacity: 0;z-index: 3;}


a, a:link, a:visited {

	outline: 0;
}
a:hover, a:active {
	text-decoration: none;
}
a.noline, a.noline:link {
	text-decoration: none !important;
}

#luxy {

    z-index: 50;
will-change: transform;
}


/* tags
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0 auto 20px auto;
	font-weight: 300;
	display: block;
	line-height: 1.5;
}

h1{	font-size: 2.5rem; line-height: 1.3;}
h2{	font-size: 2rem;line-height: 1.3;}
h3{	font-size: 1.75rem;line-height: 1.3;}
h4{	font-size: 1.5rem;}
h5{	font-size: 1.25rem;}
h6{	font-size: 1.1rem;}

section{ position: relative;width: 100%; padding:0; margin:0 auto 0px auto;}


p {	margin-bottom: 2em;}
p:last-child{}
p:nth-of-type(1){}

ul{ margin-bottom: 2em;}
ul li{}
li:first-child 		{/* 親の最初にあったら*/}
li:last-child 		{/* 親の最後にあったら*/}
li:nth-of-type(1) 	{/* n番目*/}
li:nth-child(odd) 	{/* 奇数*/}
li:nth-child(even) 	{/* 偶数*/}




video#player {
 position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  z-index: -1;
  
}

video#player.pc{min-width: 100%; min-height: 100%;width: auto; height: auto;}
video#player.sp{
	  position: fixed;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: none;
}
#playerWrap{
	  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
width:100vw;
height: 100vh;
pointer-events: none;
}


.landscapeMode video#player.sp{min-width: 100%; min-height: 100%;width: auto; height: auto;}

#playerOverlay{
	 position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255,255,255,0.8);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: all 500ms ease;
}

body.bgOverlayOn #playerOverlay{ opacity: 1;}


 #globalHeader{ width: 100%; height: 0; position: fixed; top: 0; left: 0; z-index: 100; opacity: 0; transform: translate(0,-100px); transition: all 1000ms ease;}
 
 	.headerView  #globalHeader{ opacity: 1;transform: translate(0,0%);}
 
 	 #globalHeader:before{ content: ''; display: none; width: 100%; height: 120px; background: rgba(255,255,255,0.5);}
      #globalHeader h1.logo{ position: absolute; top: 40px; left: 40px; width: 100px; height: auto;  margin: 0; padding: 0; line-height: 0;}
	  #globalHeader h1.logo img{ width: 100%; height: auto;}

	  #menuBtn{position: fixed; top: 20px; right: 20px; width: 73px; height: 67px;  margin: 0; padding: 0; line-height: 0; cursor: pointer;}
	  #menuBtn .wrap{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 27px;}
	  #menuBtn hr{position: absolute;width: 34px; height: 3px;  margin: 0; padding: 0;  background: var(--color-default);transition: all 250ms ease;}
	  #menuBtn hr:nth-of-type(1) { width: 20px; top: 0;   left: 0; }
	  #menuBtn hr:nth-of-type(2) {  top: 50%; left: 50%; transform: translate(-50%,-50%); }
	  #menuBtn hr:nth-of-type(3) { width: 20px; bottom: 0;   right: 0; }
	  
	  #menuBtn:hover hr{ width: 100%;}
	  
	  body.menuOpen #menuBtn hr{ background: #000;}
	  body.menuOpen #menuBtn hr:nth-of-type(1) { width: 100%; top: 50%;   left: 50%;  transform: translate(-50%,-50%) rotate(-45deg); }
	  body.menuOpen #menuBtn hr:nth-of-type(2) {opacity: 0;}
	  body.menuOpen #menuBtn hr:nth-of-type(3) {  width: 100%; top: 50%;   right: 50%;  transform: translate(50%,-50%) rotate(45deg); }


#spMenu{ background: var(--color-default); position: fixed; width: 100%; height: 100vh; color: #000; opacity: 0; pointer-events: none;transition: all 250ms ease;}

body.menuOpen #spMenu{ opacity: 1; pointer-events: all;}

#spMenu .innerWrap{ padding: 100px;}

#spMenu ul.menu{}
#spMenu ul.menu li{ line-height: 1; padding: 0; margin-bottom: 1.5rem;}
#spMenu ul.menu li a{  line-height: 1;display: inline-block; cursor: pointer;}


#spMenu ul.menu li.main{ font-size: 3rem;}

#spMenu ul.sns{grid-gap: 30px;grid-template-columns: 30px 30px; opacity: 0; transform: translate(0,100%);transition: all 500ms ease;}
	#spMenu.inView ul.sns{ opacity: 1; transform: translate(0,0);}

#globalFooter{
	min-height: 300px;
	background-color: var(--color-default);

}
	#globalFooter .innerWrap{ max-width: none; padding: 100px; position: relative;}
	#globalFooter .logo{ display: inline-block;  width: 100px; height: auto;  margin: 0; padding: 0; line-height: 0;}
	 #globalFooter .logo img{ width: 100%; height: auto;}


	  #globalFooter .sns{ float: right; grid-gap: 40px;grid-template-columns: 40px 40px; } 





.contentsWrap{ }
body:not(#top):before{ content: ''; display: block; width: 100%; height: 50vh; position: fixed; bottom:-20vh; left: 0;  background-color: var(--color-default);}
body#contactform:before{ display: none;}
body:not(#top) .contentsWrap{ color: #000;    background-color: #fff;}

section .innerWrap{ padding:240px 10%; max-width: 1100px; margin: auto; box-sizing: content-box;}
	body:not(#top) section .innerWrap{ padding:140px 10%; }


section .innerUnit:not(:last-child){ margin-bottom: 6rem; }

section .titleSection{margin-bottom: 6rem;}
section .titleSection h2{ font-size: 9rem; letter-spacing: 0.05em; line-height: 1.2; margin-bottom: 1rem; }
section .titleSection .subTitle{ font-size: 1.8rem; font-weight: 700 !important; letter-spacing: 0.1em; line-height: 1; margin-bottom: 3rem; }
section .titleSection .exTitle{ font-size: 0.7rem; font-weight: 500 !important; letter-spacing: 0.1em; line-height: 1; color:#fff; }

	section .titleSection.mini h2{font-size: 2.6rem;}
	section .titleSection.mini .subTitle{font-size: 0.9rem;}
	
section .contentWrap{}
section .contentWrap .contentTitle{margin-bottom: 3rem;}
section .contentWrap .contentTitle h3{ font-size: 3.3rem; letter-spacing: 0.1em; line-height: 1; margin-bottom: 1.2rem;}
section .contentWrap .contentTitle .subTitle{ font-size: 1.6rem;font-weight:  700 !important; letter-spacing: 0.1em; line-height: 1;}

section .contentWrap .contentBody,
section .contentWrap{ letter-spacing: 0;}
section .contentWrap .contentBody.visibleIcon{ padding-left: 250px;} 
section .contentWrap .contentBody .contentsIcon{ display: block; position: absolute; top: 0; left: 0; width: 200px; height: auto;}
section .contentWrap .contentBody .contentsIcon.iconPolicy{}



section.top{height: 100vh;}
section.top .words{ display: grid; width: 100%; height: 100vh;align-content: center; text-align: center; font-size: 3rem; line-height: 1.2;}



section#about{ padding-bottom: 8rem;}
section#about .innerWrap{ padding-bottom: 0;}

    

section#services{}
section#services .innerWrap{ padding-top: 0;}

section#services .linkBannerArea{ padding-top: 2rem;}
section#services .linkBannerArea a.regeria{ width: 400px;}
section#services .linkBannerArea a.biteki_bar{ width: 130px; margin-left: 100px;}
section#services .linkBannerArea a.lemon_bar{ width: 130px;}



section#information{}
section#information .innerWrap{ }

section#information .titleSection{ margin-bottom: 0;}

section#history{}
section#history .contentBody{ color: #000;}
section#history .innerUnit:nth-of-type(1) { margin-bottom: 5rem;}

section#company {}
section#company .readArea{ font-size: 1.2rem; margin-bottom: 3rem;}


section#contact .titleSection{ color: var(--color-default);}

section#contact #contactForm_iframe{ width: 100%; min-height: 100px; overflow: hidden;}




body#contactform{ background: #000; color: #fff; overflow: hidden;}

body#contactform #globalFooter{ display: none;}
body#contactform #container{ opacity: 1 !important; }
body#contactform .screen-reader-response,
body#contactform .wpcf7-response-output{ display: none; opacity: 0; visibility: hidden;}
body#contactform .wpcf7-validation-errors{ text-align: center; font-size: 0.8em; padding: 0.5em; background: var(--color-default); color: #000; margin-top: 3rem;}





.floatMessage{ position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 500; background-color: rgba(0,0,0, 0.6); display: none;}

.floatMessage p{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.floatMessage p span{ display: inline-block; padding: 2rem 4rem;font-weight: 700 !important;  line-height: 1.2; border-radius: 5px;}

#formMessageFinish  p span{ background-color: var(--color-default); color: #fff;}
#formMessageError  p span{ background-color: var(--color-default); color: #fff;}


.spView	.moreArea{ text-align: center; padding-top: 3rem}

.spView	 .floatMessage{ font-size: 1rem;  }
.spView	 .floatMessage span{  padding: 2rem 2rem; white-space: nowrap;}



#scrollDown{ position: fixed; width: 50px; height: 50px; bottom: 30px; left: 50%; transform: translate(-50%,0);  opacity: 0;   transition: all 500ms ease;}
#scrollDown.active{ opacity: 1;
	animation: sdb 1500ms ease-in-out infinite;
}
#scrollDown.deactive{ opacity: 0 !important;}
	#scrollDown span{position: absolute; width: 100%; height: 100%; }


#landscapeMessage{ display: none; position: fixed; z-index: 50001; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.8);}
#landscapeMessage .icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; font-size: 0.7rem;}
#landscapeMessage .icon:before{ content: ''; display: block; width: 10vw; height: 10vw; background: url(./img/icon/icon_landscape.svg) center top no-repeat; background-size:contain;  margin: 0 auto 0.5rem auto;
}

body.landscapeMode #landscapeMessage{ display: block;}


.post-header{ margin-bottom: 3rem;}
	.post-header .post-title{ font-size: 2.2rem;margin-bottom: 0.5rem;}
	.post-header .post-label{ font-size: 1.0rem; font-weight: 700;}

.entry-header{margin-bottom: 3rem;}
	.entry-header .entry-date{font-size: 0.8rem; margin-bottom: 1rem;}
	.entry-header .entry-title{ font-size: 1.3rem;margin-bottom: 0rem; line-height: 1.5; font-weight: 700;}
	

.entry-content{margin-bottom: 6rem; font-size: 0.85rem;}
	.entry-content p{}
	.entry-content a{color: var(--color-default);}
	.entry-content a:after{ content: ''; display: block; height: 1px; width: 0; background-color: var(--color-default); position: absolute; bottom: 0; left: 0;  transition: width 200ms ease-in-out;	}
	.entry-content a:hover:after{ width: 100%;}
	
	.entry-content img.size-full{ max-width: 100%; height: auto;}
	.entry-content img.aligncenter{ display: block; margin: auto;}

	.entry-content .movFull{ display: block;}
	.entry-content .movFull:before{ content: ''; display: block; width: 100%; height: 0; padding-top: 56.25%;}
	.entry-content .movFull iframe{ position: absolute; top: 0; left: ; width: 100%; height: 100%;	}


@media screen and (max-width:1000px) {

	body{ }
	.en{ line-height: 1.5;}
	.jp{ line-height: 1.8;}
	
	.touchDevice #globalHeader h1.logo{ width: 21vw; left: 6vw; top: 6vw;}
	.touchDevice #spMenu ul.sns{grid-gap: 5vw;grid-template-columns: 10vw 10vw;}
	.touchDevice #menuBtn{ width:20vw; height: 20vw; top: 0; right: 0;}
	  .touchDevice #menuBtn .wrap{width: 10vw; height: 6vw;}
	  .touchDevice #menuBtn hr{position: absolute;width: 100%; height: 1vw; }
	  .touchDevice #menuBtn hr:nth-of-type(1) { width: 5vw;  }
	 .touchDevice  #menuBtn hr:nth-of-type(2) { }
	  .touchDevice #menuBtn hr:nth-of-type(3) { width: 5vw; }
	
	#scrollDown{    bottom: 10vw;}
	
	
	#spMenu .innerWrap{ padding: 20vw 10vw;}
	
	section .innerWrap{ padding:20vw  6vw; overflow: hidden;}
	
	section .titleSection h2{    font-size: 4rem;}
	
	
	section .titleSection,
	section .contentWrap .contentTitle{ text-align: center;}
	section .contentWrap .contentTitle h3{    font-size: 2.2em;}
	section .contentWrap .contentTitle .subTitle{    font-size: 1.0rem;}
	section .contentWrap .contentBody.visibleIcon{ padding: 300px 0 0 0; }
	section .contentWrap .contentBody .contentsIcon{ left: 50%; transform: translate(-50%,0);}
	
	.innerUnit.grid{ display: block;}
	

	
	
	
				
			#globalFooter .innerWrap{    padding: 6vw 6vw;}
			#globalFooter .logo{ width: 25vw;}

			#globalFooter .sns{grid-gap: 5vw;grid-template-columns: 9vw 9vw;}
			
			
		section.top .words{    
				padding: 6vw;
			    align-content: end;
				text-align: left;
		        font-size: 14vw;
		        height: calc(var(--vh, 1vh) * 90);
		}	
		
		
		section#services #beauty_health h3 .word2{ display: block !important; padding: 0.1em 0;}
		section#services #space h3 .word3{ display: block !important; padding: 0.1em 0;}











	
}

@media screen and (max-width:900px) {

}

@media screen and (max-width:768px) {
	
	
	
	}
/* ▲ max-width:768  */




@keyframes sdb {
  0% {
    transform: translate(-50%, 0);
  }

  50% {
    transform:  translate(-50%, 10px);
  }
}