@charset "UTF-8";
:root {
  --background-color: #e7dcbb;
  --background-init-color: #e0d0a1;
  --background-profile-color: #FFF;
  --loading-bgcolor: #F9F6ED;
  
  --primary-color: #0aa8d0;
}
::selection{background:var(--primary-color);color:var(--background-color);}
html{font-size:14px;line-height:1.4em;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%; width:100%;}

body{color:var(--primary-color);background-color:var(--background-color);
	text-rendering: optimizeLegibility;
	font-feature-settings: 'palt';
	font-weight: normal;
	font-family: "Noto Serif JP", serif;
	-webkit-font-smoothing : antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* font */
.is--cormorant{font-family: "Cormorant", serif;}
.wf-loading{opacity:0;}​
.wf-active{opacity:1;}​

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

COMMON
-basic

-------------------------------------------------- */
.c-imageWrap{line-height:0;}
.c-imageContainer{position:relative;width:100%;height:auto;}
img{vertical-align:bottom;}
a{text-decoration:none;}
svg{position:relative;width:100%;height:auto;display:inline-block;overflow:unset;transform: translateZ(0);}
svg path{
  transform-origin:50% 50%;
  /*+++++++++++++++++++++++++++*/
  /* if I remove this rule the pen won't work properly on Chrome for Mac, FF, Safari
  Will still work properly on Chrome for PC & Opera*/
  transform-box: fill-box;
  /*Alternatively  I can use transform-origin:15px 15px;*/
  /*+++++++++++++++++++++++++++*/
  animation: rotateBox 3s linear infinite;
}

/* br */
br.is--sp{display:none;}
br.is--pc{display:inline-block;}
@media screen and (max-width:767px){
	br.is--sp{display:inline-block;}
	br.is--pc{display:none;}
	}
	
/*　--------------------------------------------------
Loading
-------------------------------------------------- */
.c-pageloadingWrap{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;background:var(--loading-bgcolor);text-align:center;display:flex;justify-content:center;align-items:center;z-index:-1;}
.c-pageloadingContainer{}	
.ball-clip-rotate > div{border: 1px solid #999;border-top:1px solid #dadada;border-right:1px solid #FFF;border-bottom-color: transparent;}

.is--loaded.c-pageloadingWrap{animation: loadedlogo 1s ease-out 0s forwards;}

@keyframes loadedlogo {
  0% {
	  opacity:1;
  }
  99% {
	  width:100vw;height:100vh;height:100dvh;
  }
  100% {
	  opacity:0; width:0;height:0;z-index:-1;
  }
}

/*　--------------------------------------------------
Recommened Scroll
-------------------------------------------------- */
.scroll-prompt{position:fixed;bottom:3vh;left:50%;transform:translateX(-50%);text-align:center;opacity:0;transition:opacity 0.5s ease;z-index:9999;}
.scroll-prompt span{font-size:12px;color:var(--primary-color);display:block;margin-bottom:4px;font-style:italic;}
.scroll-prompt .line{width:1px;height:20px;margin:10px auto 0;background:var(--primary-color);animation:grow 1.5s infinite ease-in-out;}

.scroll-prompt.is--show{opacity:1;}
.scroll-prompt.is--hide{opacity:0;pointer-events:none;}
@keyframes grow{0%,100%{height:5px;}50%{height:20px;}}




/*　--------------------------------------------------
Nav
-------------------------------------------------- */
.c-nav{position:fixed;top:2vh;right:2vw; z-index:1000;opacity:0;transform:translateX(calc(100% + 2vw));transition:transform 0.4s ease,opacity 0.4s ease;}
.c-nav ul{position:relative;height:98vh; display:flex;flex-direction:column;align-items:flex-end;}
.c-nav li{position:relative;margin:0 0 2em 0; display:flex;flex-direction:column;align-items:flex-end;}
.c-nav p,
.c-nav a{color:#000;font-size:min(3vw,16px);font-style:italic;letter-spacing:-0.05em;/* background-color:#FFF; */}
/*
.c-nav a::after,
.c-nav p::after{content:'';position:relative;width:10px;height:10px;border-radius:10px;margin-left:8px; background-color:red;display:inline-block;opacity:0;}
*/
.c-nav .p-anchor{position:relative;cursor:pointer;padding:.4em 0;font-size:min(6vw,14px);right:-1vw;}
.c-nav .p-profile,
.c-nav .p-title,
.c-nav .c-contact{font-size:min(10vw,24px);}
.c-nav .c-contact span{position:relative;top:1px;margin-right:.2em; color:var(--primary-color);font-size:70%;}
.c-nav .p-title{margin-bottom:.3em; position:absolute;right:110px;}
/* .c-nav p.is--active::after{opacity:1;} */
.c-nav p.is--active{/* background-color:var(--background-color); */transition:all .2s ease-out;}
.c-nav p.is--active::after{content:'';position:absolute;top:60%;left:0;width:calc(100% - 16px);height:1px;background-color:#111;transform:translateY(-50%);}
.c-nav .item-works span{position:relative;top:2px; font-size:14px;color:var(--primary-color);display:inline-block;margin-left:.2em;}
.c-nav .item-contact{position:absolute;bottom:0vh;}

.is--loaded.c-nav{opacity:1;}
.c-nav.is--show{transform:translateX(0);opacity:1;}

.c-observe-point{position:absolute;top:0;height:80vh;}

.menu-toggle{display:none;position:fixed;top:3.5vh;right:4vw;z-index:1100;width:40px;height:40px;background:transparent;border:none;flex-direction:column;justify-content:center;align-items:center;gap:6px;cursor:pointer;}
.menu-toggle span{display:block;width:28px;height:1px;background:#000;border-radius:1px;transition:transform 0.2s ease-out,opacity 0.2s ease;margin:9px 0;}
.menu-toggle.is--open span:first-child{transform:rotate(45deg) translate(3px,4px);}
.menu-toggle.is--open span:last-child{transform:rotate(-45deg) translate(3px,-4px);}

@media screen and (min-width:768px){	
	.c-nav{transform:none;opacity:1;transition:none;}
	.c-nav .p-anchor:hover{color:var(--primary-color);}
	.c-nav .c-contact:hover{background-color:var(--primary-color);color:#FFF;}
	.c-nav .c-contact:hover span{color:#FFF;}
	.c-nav .item-works .p-anchor:hover span{right:1px;}
	
	.menu-toggle{display:none;}
	}
	
@media screen and (max-width:767px){
	.c-nav{top:0;right:0;background-color:#f5f5f5;height:100vh;padding:10vh 4vw 0 4vw;}
	.c-nav ul{height:100vh;}
	.c-nav p,
	.c-nav a{background-color:transparent;}
	.c-nav .p-anchor{padding:.2em 0 .2em .4em;margin-bottom:.5em;}
	.c-nav .p-profile,
	.c-nav .p-title,
	.c-nav .c-contact{font-size:6vw;}
	.c-nav .p-title{margin-bottom:.3em; position:relative;right:inherit;}
	.menu-toggle{display:flex;}
	.c-nav .item-contact{position:relative; bottom:inherit;}
	}


/*　--------------------------------------------------
Shutter
-------------------------------------------------- */
.shutter{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;}
.shutter-top,
.shutter-bottom{position:absolute;width:100%;height:50%;background:var(--primary-color);transform:translateY(-100%);transition:transform 0.2s cubic-bezier(0.06, 1, 0.53, 1);}
.shutter-bottom{top:auto;bottom:0;transform:translateY(100%);}
.shutter.is--active .shutter-top{transform:translateY(0);}
.shutter.is--active .shutter-bottom{transform:translateY(0);}
.shutter.is--done .shutter-top{transform:translateY(-100%);}
.shutter.is--done .shutter-bottom{transform:translateY(100%);}

/*　--------------------------------------------------
Black Out
-------------------------------------------------- */
.blackout,
.blackout-2{position:fixed;top:0;left:0;width:0;height:100vh;background-color:var(--primary-color);z-index:8999;opacity:1;}
.blackout-2{background-color:var(--background-color);z-index:8998;opacity:1; mix-blend-mode:multiply;}

.profile-in .blackout,
.profile-in .blackout-2{width:0;}

/*　--------------------------------------------------
Header
-------------------------------------------------- */
header{position:fixed;top:4vh;left:2vw;z-index:9990;}
header h1{font-size:min(2.4vw,24px);color:#222;font-weight:300;line-height:.9;}
header h1 span{position:relative;font-size:min(1.3vw,13px);font-weight:500;}
header h1 em{position:relative;}
header h1 span>span{letter-spacing:1.14em;padding-left:0.13em;}
header h1 span>span::after,
header h1 em::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--background-init-color);display:inline-block;}
header h1 span>span::after{width:86%;transition:all .4s cubic-bezier(0.06, 1, 0.53, 1);transition-delay:.2s;}
header h1 em::after{transition:all .2s ease-in;}

/*
header h1 span>span:nth-child(1)::after{transition-delay:.1s;}
header h1 span>span:nth-child(2)::after{transition-delay:.2s;}
header h1 span>span:nth-child(3)::after{transition-delay:.29s;}
header h1 span>span:nth-child(4)::after{transition-delay:.37s;}
header h1 span>span:nth-child(5)::after{transition-delay:.46s;}
header h1 span>span:nth-child(6)::after{transition-delay:.55s;}
header h1 span>span:nth-child(7)::after{transition-delay:.64s;}
header h1 span>span:nth-child(8)::after{transition-delay:.73s;}
*/

header.is--show h1 span>span::after{width:0;left:7vw;}
header.is--show h1 em::after{width:0;left:7vw;}

@media screen and (max-width:767px){
	header{left:4vw;}
	header h1{font-size:5vw;}
	header h1 span{font-size:2.75vw;}
	}

/*　--------------------------------------------------
Main
-------------------------------------------------- */
.site-content{visibility:hidden;}
main{visibility:hidden;position:relative;z-index:1;background-color:var(--background-init-color);transition:all 1.5s ease-out;}
main.is--open{background-color:var(--background-color);}

.hero-done main{background-color:var(--background-profile-color);transition:background-color .4s ease-out;}

/*　--------------------------------------------------
Floating
-------------------------------------------------- */
.c-floating{position:fixed;bottom:2vh;left:1vw;transform:translate(-100%,0) rotate(90deg);transform-origin:bottom right; display:inline-block;z-index:9999;}
.c-floating p{color:#222;font-style:italic;}
.c-floating .p-based{font-size:min(1.8vw,18px);font-weight:300;margin-left:-1em;}
.c-floating .p-text{font-size:min(1vw,10px);font-weight:500;}

.c-floating .p-based span.is--off,
.c-floating .p-text span.is--off{opacity:0.2;}

@media screen and (max-width:767px){
	.c-floating{bottom:calc(2vh + 2.15vw);}
	.c-floating .p-based{font-size:3vw;}
	.c-floating .p-text{font-size:1.5vw;}
	}
/*　--------------------------------------------------
Hero
-------------------------------------------------- */
.c-hero{position:sticky;top:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;z-index:9909;}
.c-heroWrap{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);}
.c-hero p{position:relative; font-weight:300;line-height:.9;font-style:italic; text-align:center;white-space:nowrap;}
.c-hero p span.is--profile{display:none;}

.c-hero .p-ryo{font-size:min(calc(30vw / 1.2),300px);font-weight:300;line-height:.62;}
.c-hero .p-higuchi{font-size:min(calc(37vw / 1.2),370px);font-weight:300;line-height:.75;}
.c-hero .p-photographer{font-size:min(calc(3.2vw / 1.2),32px);font-weight:500; position:absolute;left:100%;transform:translateX(-100%);}

.is--centered .c-hero .p-photographer{left:50%;}

.p-ryo,
.p-higuchi,
.p-photographer{filter:blur(40px);animation:focusShake 1.2s infinite alternate ease-in-out;transition:filter 1.2s cubic-bezier(0.42, 0.9, 0.55,-0.54), opacity 1.2s cubic-bezier(0.42, 0.9, 0.55,-0.54);opacity:.7;}
.is--focused .p-ryo,
.is--focused .p-higuchi,
.is--focused .p-photographer{filter:blur(0);opacity:1;animation-name:none;}

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

@keyframes focusShake{
	from{transform:translateX(-5%);}
	to{transform:translateX(0%);}
}

.hero-done .c-hero{position:absolute;}

.profile-in .c-hero{}
.profile-in .c-heroWrap{}
.profile-in .c-hero .p-ryo span,
.profile-in .c-hero .p-higuchi span,
.profile-in .c-hero .p-photographer span{display:none;}
.profile-in .c-hero p{position:relative;left:0;font-size:min(10.2vw,102px);text-align:right;font-weight:300;line-height:1.05;}
.profile-in .c-hero p span.is--profile{display:inline-block;}


/*　--------------------------------------------------
Profile
-------------------------------------------------- */
.c-profile{position:relative;height:auto;text-align:center;z-index:9910;}
.hero-done .c-profile{margin-top:100vh;}

/* .c-profile h2{position:absolute;top:60%;color:var(--background-init-color); font-size:min(calc((100vw - 680px)/2),332px);font-weight:300;font-style:italic;transform:translate(-12%,0%) rotate(-90deg);z-index:111;letter-spacing:-0.05em;} */

.c-profile .c-header{position:relative;top:0%;left:50%;transform:translate(-50%,0%); padding-top:100vh;  max-width:680px;width:80vw; display:flex;flex-wrap:wrap;align-items:flex-end;}
.c-profile .c-header .p-name{font-size:min(1.8vw,18px);color:#222;font-weight:300;line-height:.9;text-align:left;}
.c-profile .c-header .p-name em{position:relative;}
.c-profile .c-header .p-name span{position:relative;font-size:min(1vw,10px);font-weight:500;}
.c-profile .c-header .p-name > span{margin-left:.15em;}
.c-profile .c-header .c-imageWrap{position:relative;width:100px;height:auto;display:inline-block;margin-right:12px;overflow:hidden;}
.c-profile .c-header .c-imageWrap::before,
.c-profile .c-header .c-imageWrap::after{content:'';position:absolute;top:0;left:0;width:100%;height:51%;background-color:var(--primary-color);display:inline-block; transition:all .4s cubic-bezier(0, 0.9, 0.25, 1);z-index:99;}
.c-profile .c-header .c-imageWrap::after{top:50%;}
.c-profile .c-header .c-imageContainer{transform:scale(1.2);opacity:.5; transition:all 1s cubic-bezier(0.05, 0.86, 0.69, 1);}
.c-profile .c-header .p-name{color:#222;display:inline-block; opacity:1;transition:opacity .4s ease-out;}
.c-profile .c-header .p-text{color:#222;display:block; padding-left:40px;text-align:left;font-size:16px;line-height:1.8;margin-top:40px; opacity:1;transition:opacity .4s ease-out;transition-delay:.3s;}

.c-profile .c-header .p-copy{color:var(--background-init-color); font-size:min(10vw,100px);font-weight:300;line-height:.8;font-style:italic; text-align:center;margin:15vh auto 0vh;}

.profile-image-in .c-profile .c-header .c-imageContainer{transform:scale(1);opacity:1;}
.profile-image-in .c-profile .c-header .c-imageWrap::before{height:0;}
.profile-image-in .c-profile .c-header .c-imageWrap::after{height:0;top:100%;}
.profile-image-in .c-profile .c-header .p-name{opacity:1;}
.profile-image-in .c-profile .c-header .p-text{opacity:1;}

	
@media screen and (max-width:767px){
	.hero-done .c-profile{}
	
	.c-profile{}
		
	.c-profile h2{font-size:calc(32.2vw);right:-20vw;top:40%;}
	.c-profile .c-header{top:0%;}
	.c-profile .c-header .p-name{font-size:5vw;}
	.c-profile .c-header .p-name span{font-size:3vw;}
	}
/*　--------------------------------------------------
Works
-------------------------------------------------- */
.c-works{position:relative;padding:0 0 10vh;}

.c-works li{position:relative;display:flex;justify-content:center;padding:10vh 0;pointer-events:none;}
.c-works .c-header{position:fixed;bottom:calc(2vh + 308px);left:1vw;z-index:999;mix-blend-mode:difference;}
.c-works .c-header h3{font-size:min(7vw,70px);}
.c-works .c-header h3 span{letter-spacing:-0.03em;opacity:0;transition-delay:3s;transition:all 1s ease-out; color:#b35a33;}
.c-works .c-imageWrap{width:92vw;max-width:2000px;opacity:.05;transition:all .6s ease-out;}

.c-works .c-header h3.is--active span{opacity:1;}
.c-works .works-image-in .c-imageWrap{opacity:1;}

.char{display:inline-block;}

@media screen and (max-width:767px){
	.c-works li{padding:12vh 0 0;}
	.c-works .c-header{bottom:calc(2vh + 46vw);left:2.6vw;bottom:2vh;}
	.c-works .c-header h3{font-size:12vw;}
	}
/*　--------------------------------------------------
------------------------------------------------------

-footer


-------------------------------------------------- */
.c-footer{position:relative;width:100%;text-align:center;z-index:9999;}
.c-footer .c-cp{position:absolute;bottom:10px;left:50%;transform:translateX(-50%) scale(.75);transform-origin:center; font-size:10px; color:#222;letter-spacing:.03em; display:inline-block;}

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