/* common.css */

/* 
=================================================== 

  0. Common
  1. Header
  2. Footer
  3. Main
  4. Index
  5. About us
 
=================================================== 
*/


/* 
---------------------------------------------------
  0. Common
---------------------------------------------------
*/

/* ---- transition ---- */

body {
	transition:all ease .5s;
	position: relative;
}
body:before {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background-color: #cbc0b9;
	z-index: 12;
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
}
body.fadeout:before {
	width: 100%;
}

body:after {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background-color: #fff;
	z-index: 12;
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
    transition-delay: 0.6s;
}
body.fadeout:after {
	width: 100%;
}



/* ---- inview ---- */

.inview {
	opacity: 0;
	transition: all ease 0.75s;
}
.inview.fadeIn {
	opacity: 1;
}

.inview2 {
	opacity: 0;
	transition: all ease 0.75s;
	padding-top: 35px;
	transition-delay: 0.35s;
}
.inview2.fadeIn2 {
	opacity: 1;
	padding-top: 0;
}




/* ---- Btn ---- */

.btn {
	font-size: 1.2rem;
    font-family: 'NeueFrutigerDevanagariW1193554';
    letter-spacing: 0.05em;
}
.spBtn {
	display: none;
}
.btn span {
	display: inline-block;
    padding-left: 3px;
    position: relative;
}
.btn span:before {
	content:initial;
}
.btn:hover span:before  {
	animation: arrowLeft .4s;
}
@keyframes arrowLeft {
  50% {
    left: 6px;
  }
  100% {
    left: 3px;
  }
}


.btn a,
.btn .link,
.btn .spLink {
	position: relative;
	display: inline-block;
}
.btn a:before,
.btn .link:before,
.btn .spLink:before {
  content:"";
  position: absolute;
  bottom:-14px;
  left: 0;
  width: 104%;
  height: 1px;
  background-color: #e6e6e6;
  transform: scale(1, 1);
  transform-origin: left top;
  transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
}
.btn a:hover::before,
.btn .link:hover::before,
.btn .spLink:hover::before
 {
  transform-origin: right top;
  transform: scale(0, 1);
}
.btn a:after,
.btn .link:after,
.btn .spLink:after {
  content:"";
  position: absolute;
  bottom:-14px;
  left: 0;
  width: 104%;
  height: 1px;
  background-color: #e6e6e6;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition-delay: 0.3s;
}
.btn a:hover::after,
.btn .link:hover::after,
.btn .spLink:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


/* 
---------------------------------------------------
  1. Header
---------------------------------------------------
*/

/* ---- Common ---- */

header {
	position: absolute;
	top: 52px;
	width: 100%;
	z-index: 1;
}
header > .inner {
	width: 90.4%;
	margin:0 auto;
}


/* ---- Title ---- */

/* home */

body.top header .title .home {
	display: block;
}
body.top header .title .under {
	display: none;
}

body.top header .title .home {
	opacity: 0;
	transition:all ease 0.75s;
	transition-delay: 4.7s;
	margin-top: 25px;
}
body.top.under header .title .home {
	transition:all ease 0.75s;
	transition-delay: 1.6s;
}

body.top header .title img {
	width: 76px;
    height: 26px;
}
body.top header .title .home a {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}
body.pace-done.top header .title .home {
	opacity: 1;
	margin-top: 0;
	display: inline-block;
}


header .title .home span {
	font-size: 1.4rem;
    font-weight: 300;
    font-family: garamond-premier-pro-display, serif;
    letter-spacing: 0.02em;
    margin-left: 32px;
    margin-top: -3px;
    position: relative;
    color: #a6a6a6;
}
header .title .home span:before {
	content:"";
	position: absolute;
	width: 103%;
	left: -1.5%;
	height: 1px;
	background-color: #f0f0f0;
	bottom:-7px;
}


/* under */

body.under header .title .home {
	display: none;
}
body.under.top header .title .home {
	display: block;
}
body.under header .title .under {
	display: inline-block;
	font-size: 1.6rem;
    font-family: 'Levato W01 Medium';
    letter-spacing: 0.14em;
    font-weight: 300;
    text-transform: uppercase;
    padding-left: 0%;
    opacity: 0;
	transition:all ease 1.45s;
	transition-delay: 1.6s;
}
body.under.top header .title .under {
	display: none;
}
body.under header.white .title .under a {
	color:#fff;
}

body.under header .title .under span {
	font-family: 'Avenir LT W01_35 Light1475496';
    font-size: 1.05rem;
    display: block;
    letter-spacing: 0.055em;
    margin-top: 7px;
    text-transform: capitalize;
    opacity: 0.35;
}
body.under header.white .title .under span {
	color:#fff;
	opacity: 1;
}

body.pace-done.under header .title .under {
	opacity: 1;
} 




/* ---- humbBtn ---- */

.humbBtn {
	position: fixed;
	width: 29px;
	height: 15px;
	right: 36px;
	top: 48.7%;
	cursor: pointer;
	z-index: 6;
	transition: all ease .5s;
}

.humbBtn > .inner {
	height: 100%;
	position: relative;
}
.humbBtn span {
	position: absolute;
	display: block;
	right: 0;
	height: 1px;
	width: 100%;
	background-color: #fff;
	transition:all ease .35s;
}
.humbBtn.active span {
	
}
.humbBtn.color span {
	background-color: #fff;
}
.humbBtn.change span {
	background-color: #fff;
}


.humbBtn span:nth-child(1) {
	top: 0;
}
.humbBtn span:nth-child(2) {
	top: 46%;
	visibility: visible;
	opacity: 1;
}
.humbBtn span:nth-child(3) {
	bottom:0;
}

.humbBtn:hover span {
	transition:all ease .35s;
}

/*
before
*/

.humbBtn span:before {
	content:"";
	position: absolute;
	height: 1px;
	background-color: #fff;
	width: 0px;
	top: 0px;
	left: 0px;
	transition:all ease 0.35s;
}
.humbBtn.change span:before {
	background-color: #101010;
}

.humbBtn span:nth-child(1):before {
	transition-delay: 0s;
}
.humbBtn span:nth-child(2):before {
	transition-delay: 0.1s;
}
.humbBtn span:nth-child(3):before {
	transition-delay: 0.2s;
}

.humbBtn:hover span:before {
	width: 29px;
}
.humbBtn.active:hover span:before {
	width: 0px;
}



/*
after
*/

.humbBtn span:after {
	content:"";
	position: absolute;
	height: 1px;
	background-color: #000;
	width: 0px;
	top: 0;
	left: 0px;
	transition:all ease 0.35s;
}
.humbBtn.change span:after {
	background-color: #fff;
}

.humbBtn span:nth-child(1):after {
	transition-delay: 0.4s;
}
.humbBtn span:nth-child(2):after {
	transition-delay: 0.5s;
}
.humbBtn span:nth-child(3):after {
	transition-delay: 0.6s;
}

.humbBtn:hover span:after {
	width: 29px;
}
.humbBtn.active:hover span:after {
	width:0px;
}


.humbBtn.active span:nth-child(1) {
	width: 0;
	transition-delay: .55s;
}
.humbBtn.active span:nth-child(2) {
	width: 0;
	transition-delay: .65s;
}
.humbBtn.active span:nth-child(3) {
	width: 0;
	transition-delay: .75s;
}
.humbBtn.active {
	width: 0;
	transition-delay: .85s;
	z-index: -1;
}


/* ---- humbClose ---- */

.humbClose {
	position: fixed;
	width: 29px;
	height: 16px;
	right: 2.8%;
	top: 4.7%;
	cursor: pointer;
	z-index: 6;
	transition: all ease .5s;
	visibility: hidden;
	opacity: 0;
}
.humbClose.active {
	opacity: 1;
	visibility: visible;
}
.humbClose > .inner {
	height: 100%;
	position: relative;
}
.humbClose span {
	position: absolute;
	display: block;
	right: 0;
	height: 1px;
	width: 100%;
	background-color: #000;
	transition:all ease 0.55s;
	opacity: 0;
	transition-delay: 1.75s;
}
.humbClose.active span {
	opacity: 1;
}
.humbClose span:nth-child(1) {
	top: 55%;
	transform: rotate(45deg);
}
.humbClose span:nth-child(2) {
	bottom:39%;
	transform: rotate(-45deg);
}



/* ---- humbMenu ---- */

/* common */

.wrapper > .inner {
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
    transition-delay: 1.25s;
}
.wrapper.humbActive > .inner {
	opacity: 0;
	transition-delay: 0s;
}
body.fadeout .wrapper > .inner {
	opacity: 0;
	transition-delay: 0s;
}

body.home .wrapper > .inner > .inner {
  opacity: 0;
  -webkit-transition: 1s cubic-bezier(.6,0,.25,1);
  transition: 1s cubic-bezier(.6,0,.25,1);
  transition-delay: 3.6s;
}
body.under .wrapper > .inner > .inner {
  opacity: 0;
  -webkit-transition: 1s cubic-bezier(.6,0,.25,1);
  transition: 1s cubic-bezier(.6,0,.25,1);
  transition-delay: 0.6s;
}
body.pace-done .wrapper > .inner > .inner {
  opacity: 1;
}



.humbCont {
	position: fixed;
	background-color: #d9cdc6;
	width: 0%;
	height: 100%;
	z-index: 5;
	top: 0;
	right: 0;
	visibility: hidden;
	opacity: 1;
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
	transition-delay: .75s;
}
.humbCont.active {
	visibility: visible;
	opacity: 1;
	width: 100%;
	transition-delay: 0s;
	right: initial;
}
.humbCont > .inner {
	height: 100%;
}

/* title */

.humbCont .title {
	position: absolute;
	top: 55px;
	left: 4.8%;
	font-size: 1.8rem;
	font-family:'Levato W01 Bold';
	color:#fff;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0;
	transition:all ease .75s;
	transition-delay: 0s;
	z-index: 1;
}
.humbCont .title a {
	color:#fff;
}
.humbCont.active .title {
	opacity: 1;
	transition-delay: 0.95s;
}

.humbCont .title span {
	font-family:'Avenir LT W01_35 Light1475496';
	font-size: 1.1rem;
	display: block;
	letter-spacing: 0.05em;
	margin-top: 7px;
	text-transform: capitalize;
	opacity: 0.5;
}

/* humbInfo */

.humbInfo {
	position: absolute;
	bottom:40px;
	left: 4.5%;
	color:#fff;
	opacity: 0;
	transition:all ease .75s;
	transition-delay: 0s;
	z-index: 1;
}
.humbCont.active .humbInfo {
	opacity: 1;
	transition-delay: 0.75s;
}
.humbInfo a {
	color:#fff;
}
.humbInfo ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.humbInfo ul li {
	font-size: 1.4rem;
	position: relative;
}
.humbInfo ul li + li {
	padding-left: 33px;
}
.humbInfo ul li + li:before {
	content:"";
	position: absolute;
	height: 11px;
	width: 1px;
	background-color: rgba(255,255,255,0.4);
	top: 52%;
	transform: translateY(-50%);
	left: 16px;
}

.humbInfo ul li span {
	font-family:'Levato W01 Bold';
}
.humbInfo ul li a {
	font-family:'Avenir LT W01_55 Roman1475520';
	margin-left: 8px;
	letter-spacing: 0.025em;
}

/* humbSNS */

.humbSNS {
	position: absolute;
	right: 3.6%;
	bottom:31px;
	opacity: 0;
	transition:all ease .75s;
	transition-delay: 0s;
}
.humbCont.active .humbSNS {
	opacity: 1;
	transition-delay: 1.75s;
}
.humbSNS ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center
}
.humbSNS ul li + li {
	margin-left: 17px;
}

.humbSNS ul li a {
	font-size: 1.8rem;
	transition: all ease .35s;
}
.humbSNS ul:hover > li a{
  opacity: 0.5;
}
/* 1つの記事をホバーしたとき、透明度を元に戻す */
.humbSNS ul > li a:hover {
  opacity: 1;
}


/* humbInner */

/*
common
*/

.humbInner {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	width: 100%;
	margin:0 auto;
	height: 100%;
}

/*
humbNav
*/

.humbNav {
	width: 50%;
	position: relative;
}
.humbNav ul {
	position: absolute;
	top: 50.5%;
	left: 48%;
	transform: translate(-50%,-50%);
	opacity: 0;
	transition:all ease .75s;
	transition-delay: 0s;
}
.humbCont.active .humbNav ul {
	opacity: 1;
	transition-delay: 0.95s;
}
.humbNav ul li {
	font-family: 'Levato W01 Regular';
    font-size: 3.8rem;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.humbNav ul li a {
	color:#fff;
	transition: all ease .35s;
}
.humbNav ul:hover > li a{
  opacity: .7;
}
/* 1つの記事をホバーしたとき、透明度を元に戻す */
.humbNav ul > li a:hover {
  opacity: 1;
}


.humbNav ul li + li {
	margin-top: 47px;
}


/*
humbImage
*/

.humbImage {
	width: 50%;
	position: relative;
}
.humbImage:before {
	content:"";
	position: absolute;
	background-color: #fff;
	height: 100%;
	width: 0%;
	right: 0;
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
    transition-delay: 0.75s;
    z-index: -1;
}
.humbCont.active .humbImage:before {
	width: 100%;
}

.humbImage .image {
	width: 65%;
    height: 71.5%;
	position: absolute;
	top: 50%;
	left: 51%;
	transform: translate(-50%,-50%);
	z-index: 1;
	 overflow:hidden;
	opacity: 0;
	transition: all ease 1s;
    transition-delay: 0s;
}
.humbCont.active .humbImage .image {
	opacity: 1;
	transition-delay: 1.75s;
}


.humbImage .image figure {
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	height: 100%;
	width: 100%;
	position: relative;
	opacity: 0;
	transition: all ease .75s;
	transform: scale(1);
}
.humbImage .image.opacity figure {
	opacity: 1;
	transform: scale(1.05);
}


.humbImage .image.first figure {
	background-image: url("http://brand.studio-has.work/wp-content/uploads/2020/08/main.jpg");
}
.humbImage .image.message figure {
	background-image: url(https://images.unsplash.com/photo-1591872289205-0563790e2ef0?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80);
}
.humbImage .image.philosophy figure {
	background-image: url(http://brand.studio-has.work/wp-content/uploads/2020/07/message-1.jpg);
}
.humbImage .image.about figure {
	background-image: url(https://images.unsplash.com/photo-1504768698754-83a2eef21732?ixlib=rb-1.2.1&auto=format&fit=crop&w=1651&q=80);
}
.humbImage .image.join figure {
	background-image: url(https://images.unsplash.com/photo-1587476821668-7e1391103e49?ixlib=rb-1.2.1&auto=format&fit=crop&w=1652&q=80);
}



/* 
---------------------------------------------------
  2. Footer
---------------------------------------------------
*/


/* ---- coomon ---- */

footer {
	background-color: #101010;
	color:#fff;
}
footer > .inner {
	width: 91.2%;
    margin: 80px auto 0;
    padding-top: 130px;
}



/* ---- footTop ---- */

/* commmon */

.footTop > .inner {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	width: 86%;
	margin:0 auto;
}

/* footNav */

.footNav {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	font-family:'Avenir LT W01_35 Light1475496';
	font-size: 1.5rem;
	line-height: 3.6;
	letter-spacing: 0.02em;
}
.footNav ul + ul {
	margin-left: 103px;
}
.footNav ul > li a {
	color:rgba(255,255,255,0.7);
	transition: all ease .35s;
}
.footNav:hover ul > li a{
  opacity: 0.7;
}
/* 1つの記事をホバーしたとき、透明度を元に戻す */
.footNav ul > li a:hover {
  opacity: 1;
}


/* produced */

.produced {
	width: 260px;
	margin-left: auto;
	margin-top: 11px;
	margin-right: 6.3%;
    padding-left: 92px;
	position: relative;
}
.produced:before {
	content:"";
	position: absolute;
	left: 0;
	width: 1px;
	height: 110%;
	background-color: rgba(255,255,255,0.2);
}
.produced .title {
	font-size: 3.3rem;
	font-family:'Levato W01 Regular';
	letter-spacing: 0.12em;
}
.produced .title span {
	font-size: 1rem;
	font-family:'Avenir LT W01_35 Light1475496';
	letter-spacing: 0.03em;
	display: block;
	opacity: 0.6;
    margin-bottom: 9px;
	margin-left: 2px;
}

.produced p.desc {
	margin-top: 21px;
    font-family: 'Avenir LT W01_35 Light1475496';
    font-size: 1.1rem;
    opacity: 0.5;
    line-height: 2.3;
    letter-spacing: 0.025em;
}

.produced .url {
	font-size: 1.15rem;
	margin-top: 27px;
	font-family: 'Avenir LT W01_35 Light1475496';
    letter-spacing: 0.04em;
}
.produced .url a  {
	color:#fff;
	opacity: 0.5;;
	position: relative;
}
.produced .url a:before {
  content:"";
  position: absolute;
  bottom:-11px;
  left: 0;
  width: 105%;
  height: 1px;
  background-color: #cec6b7;
  transform: scale(1, 1);
  transform-origin: left top;
  transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
}
.produced .url a:hover::before {
  transform-origin: right top;
  transform: scale(0, 1);
}
.produced .url a:after {
  content:"";
  position: absolute;
  bottom:-11px;
  left: 0;
  width: 105%;
  height: 1px;
  background-color: #cec6b7;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition-delay: 0.3s;
}
.produced .url a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


/* ---- footBottom ---- */

/* commmon */

.footBottom {
	margin-top: 210px;
	padding-bottom: 35px;
}
.footBottom > .inner {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	width: 96%;
	margin:0 auto;
	align-items: center
}

/* copyright */

.copyright {
	font-size: 1.25rem;
	font-family:'Avenir LT W01_35 Light1475496';
	color:#fff;
	opacity: 0.6
}
.copyright span {
	margin-right: 5px;
}


/* footSNS */

.footSNS {
	margin-left: auto;
	margin-right: 13.7%;
}
.footTop .footSNS {
	display: none;
}
.footSNS ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center
}
.footSNS ul li {
	height: 47px;
    width: 47px;
	border-radius: 100%;
	border:1px solid rgba(255,255,255,0.2);
}
.footSNS ul li a {
	font-size: 1.9rem;
	color:rgba(255,255,255,0.55);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.footSNS ul li + li {
	margin-left: 8px;
}
.footSNS ul li img {
	width: 88%;
}
.footSNS ul > li a{
  transition:all ease .35s;
}
.footSNS:hover ul > li a{
  opacity: 0.5;
}
/* 1つの記事をホバーしたとき、透明度を元に戻す */
.footSNS ul > li a:hover {
  opacity: 1;
}


/* toTop */

.toTop {
	position: absolute;
	width: 55px;
	height: 55px;
	border:1px solid rgba(255,255,255,0.2);
	right: 37px;
    bottom: 36px;
	cursor: pointer;
	line-height: 5.4;
	text-align: center;
	 transition: all ease 1.05s;
}
.toTop:hover {
	animation: totop .4s;
}
@keyframes totop {
  50% {
    line-height: 4.8;
  }
  100% {
    line-height: 5.4;
  }
}



/* 
---------------------------------------------------
  3. Main
---------------------------------------------------
*/

/* ---- sectCommon ---- */

.sectCommon + .sectCommon > .inner{
	margin-top: 190px;
    padding-top: 10px;
	border-top:1px solid #ededed;
}
.sectCommon + section.information > .inner {
	margin-top: 220px;
	padding-top: 50px;
}


/* ---- MV ---- */

/* common */

section.mv {
	height: 100vh;
	max-height: 60vw;
	transition:all ease .75s;
}
section.mv.opacity {
	opacity: 0;
}

section.underMv.aboutMv, section.underMv.joinMv {
	display: none;
}

section.mv > .inner {
	height: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}


/* left */

/*
common
*/

section.mv .left {
	background-color: initial;
	width: 51%;
	position: relative;
}


/*
copy
*/

section.mv .copy {
	position: absolute;
	top: 33.3%;
	left: 52%;
	transform: translateX(-50%);
	opacity: 0;
	transition:all ease 0.75s;
	transition-delay: 4.7s;
}
body.pace-done.home section.mv .copy {
	opacity: 1;
	top: 32.3%;
}

section.mv .copy .main {
	font-size: 4.6rem;
    font-family: 'Levato W01 Regular';
    text-transform: uppercase;
    letter-spacing: 0.17em;
    line-height: 1.9;
	white-space: nowrap;
}
section.mv .copy .sub {
	font-size: 1.15rem;
	font-family:'Avenir LT W01_35 Light1475496';
	color: #a6a6a6;
	letter-spacing: 0.035em;
	line-height: 2.7;
	margin-top: 20px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction: column;
	display: none;
}
section.mv .copy .sub span {
	display:inline-block;
}
section.mv .copy .sub span.inner {
	position: relative;
}
section.mv .copy .sub span.inner:before {
	content:"";
	position: absolute;
	width: 103%;
	left: -1.5%;
	height: 0px;
	bottom: 2px;
	background-color:#f0f0f0;
}


/*
title
*/

section.mv .cont {
	position: absolute;
	top: 57%;
	left: 52.8%;
	white-space: nowrap;
	transform: translate(-50%,-50%);
	opacity: 0;
	transition:all ease 0.75s;
	transition-delay: 1.6s;
}
body.pace-done section.mv .cont {
	opacity: 1;
	top: 53.5%;
}


section.mv .title {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-direction:column;
	font-weight: 300;
}


section.mv .title span.jpn {
	order: 1;
    font-size: 3.5rem;
    font-family: a-otf-ryumin-pr6n, serif;
    letter-spacing: 0.14em;
}
section.mv .title span.eng {
	order: 2;
    font-family: garamond-premier-pro-display, serif;
    font-size: 1.7rem;
    color: #b6a992;
    letter-spacing: 0.08em;
    margin-left: 2px;
    margin-top: 17px;
    text-transform: capitalize;
}


section.mv .desc {
    margin-top: 45px;
    font-family: a-otf-ryumin-pr6n, serif;
    font-size: 1.55rem;
    letter-spacing: 0.18em;
    line-height: 3.45;
    position: relative;
    margin-left: 1px;
}
section.mv .desc:before {
	content:"";
	position: absolute;
	top: -20px;
	left: 2px;
	width: 14px;
	background-color: #aaa;
	height:0px;
}



/* right */

section.mv .right {
	width: calc(49% - 5px);
	position: relative;
}

section.mv .right .image {
	width: 100%;
	height: calc(100% - 10px);
    margin-top: 5px;
	position: relative;
	overflow: hidden;
}

section.mv .right .image:before {
	content:"";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	background-color: #fff;
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
    transition-delay: 3.8s;
    z-index: 1;
}
section.mv.underMv .right .image:before {
	transition-delay: 0.7s;
}

body.pace-done section.mv .right .image:before {
	width: 0;
}

section.mv .right .image figure {
	height: 100%;
	width: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	transform: scale(1.2);
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
    transition-delay: 3.8s;
}
section.mv.underMv .right .image figure {
	transition-delay: 0.7s;
}
body.pace-done section.mv .right .image figure {
	transform: scale(1);
}

section.messageMv .image figure {
	background-image:url(https://images.unsplash.com/photo-1484387486138-aea8315f893a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
}
section.philosophyMv .image figure {
	background-image:url(http://brand.studio-has.work/wp-content/uploads/2020/07/message-1.jpg);
}


/* ---- Scroll ---- */

.scroll {
	position: absolute;
	width: 69px;
	height: 69px;
	border-radius: 100%;
	border: 1px solid #e3e3e3;
	bottom: 37px;
    left: 50px;
	text-align: center;
	line-height: 6.3;
	cursor: pointer;
	box-shadow: 0px 0px 2.3px 1.1px rgba(0,0,0,0.035);
	opacity: 0;
	transition:all ease 1.05s;
	transition-delay: 4.7s;
	    display: none;
}
section.mv.underMv .scroll {
	transition-delay: 1.6s;
}

body.pace-done .scroll {
	opacity: 1;
}

.scroll:hover {
	animation: arrow .4s;
	border: 1px solid #dbdbdb;
}
@keyframes arrow {
  50% {
    line-height: 6.8;
  }
  100% {
    line-height: 6.3;
  }
}

.scroll a {
	display: inline-block;
	width: 100%;
	height: 100%;
}

	
/* ---- underDesc ---- */


/*
common
*/

.underDesc > .inner {
	width: 70%;
    margin: 177px auto 0;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}


/*
Left
*/

.underDesc .left {
	width: 54%;
}

.underDesc .lead {
	font-size: 3.45rem;
    font-family: a-otf-ryumin-pr6n, serif;
    font-weight: 300;
    line-height: 1.9;
    letter-spacing: 0.11em;
    position: sticky;
    top: 100px;
    padding-bottom: 120px;
}
.underDesc .lead span {
	display: block;
    font-size: 1.7rem;
    font-family: garamond-premier-pro-display, serif;
    font-weight: 300;
    letter-spacing: 0.07em;
    color: #958977;
    margin-top: 15px;
    margin-left: 2px;
}



/*
Right
*/

.underDesc .right {
	width: 46%;
}

.underDesc .desc {
    font-size: 1.6rem;
    font-family: a-otf-ryumin-pr6n, serif;
    font-weight: 300;
    letter-spacing: 0.15em;
    line-height: 3.4;
    margin-top: -1px;
}


/* ---- underNext ---- */

section.underNext {
	width: 90%;
    margin: 280px auto 60px;
    border-top: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
}
section.thougtSect + .underNext {
    margin-top: 130px;
}

section.underNext > .inner {
	width: 93%;
	margin: 55px auto;
}
.underNav ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.underNav ul li {
	width: 50%;
}
.underNav ul li .navCont {
	position: relative;
	transition:all ease .35s;
}
.underNav ul li .navCont:hover {
	opacity: 0.7;
}
.underNav ul li .navCont:before {
	content:"";
	position: absolute;
	height: 19px;
	width: 19px;
	z-index: -1;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
}
.underNav ul li .navCont a {
	display: inline-block;
}
.underNav ul li.prev .navCont a {
	padding-left: 45px;
}
.underNav ul li.prev .navCont:before {
	left: 0;
	top: 10px;
	background-image: url(http://brand.studio-has.work/wp-content/themes/Magazine_Brand_20200614/assets/img/common/circleArrowLeft.svg);
}


.underNav ul li.next .navCont a {
	padding-right: 45px;
}
.underNav ul li.next .navCont:before {
	right: 0;
	top: 10px;
	background-image: url(http://brand.studio-has.work/wp-content/themes/Magazine_Brand_20200614/assets/img/common/circleArrowRight.svg);
}


.underNav ul li .jpn {
	font-size: 2.3rem;
    font-family: a-otf-ryumin-pr6n, serif;
    font-weight: 300;
    line-height: 1.55;
    letter-spacing: 0.1em;
}
.underNav ul li .eng {
	display: block;
	font-size: 1.4rem;
    font-family: garamond-premier-pro-display, serif;
    font-weight: 300;
    letter-spacing: 0.1em;
    color: #958977;
    margin-top: 6px;
}
.underNav ul li.prev .eng {
	margin-left: 4px;
}
.underNav ul li.next .eng {
	margin-right: 5px;
}


.underNav ul li.next {
	text-align: right;
	position: relative;
}
.underNav ul li.next:before {
	content: "";
    position: absolute;
    width: 1px;
    height: 51px;
    background-color: #e4e4e4;
    display: inline-block;
    left: 6px;
    top: 2px;
    transform: rotate(26deg);
}



/* ---- thoughtSect ---- */

/* common */

section.thougtSect {
    width: 91.2%;
    margin: 240px auto 0;
    border-top: 1px solid #ededed;
}
section.thougtSect > .inner {
	width: 90%;
	margin: 30px auto 0;
	position: relative;
}

/* list */


/*
nav
*/

#stalker { 
  position: fixed;
  -webkit-transform:
  translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #ccc;
  width: 0px;
  height: 0px;
  border-radius: 100%;
  transition: all 0.2s ease;
  opacity: 0.2;
  pointer-events: none;
  z-index: 99;
}
#stalker.active {
  transform: scale(3);
}
#stalker.change {
  left: -50%;
  -webkit-transform:
  translate(-50%, -50%) scale(1);
  transform: translate(-50%, -50%) scale(1);
  width: 75px;
  height: 75px;
  opacity: 1;
  transition: all 0s ease;
  background-color: rgb(204, 204, 204, 0.6);
}
#stalker.change:before {
  content:"";
  position: absolute;
  top: 44%;
  left: 63%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #666;
  border-right: 2px solid #666;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
#stalker.change:after {
  content:"";
  position: absolute;
  top: 44%;
  left: 22%;
  width: 7px;
  height: 7px;
  border-top: 2px solid #666;
  border-right: 2px solid #666;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}




/*
common
*/

.thoughtList li {
    position: relative;
    z-index: 0;
}
.thoughtList li + li {
	margin-top: 130px;
}
.thoughtList li > .inner {
	width: 100%;
	margin:0 auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	padding-top: 100px;
}



/*
arrow
*/

.slick-arrow {
	display: none !important;
}


/*
left
*/

.thoughtList li .left {
	width: 45%;
}

.thoughtList li .left .image {
	width: 100%;
	height: 44vw;
	background-color: #fff;
	margin:0 auto;
	overflow:hidden;
	position: relative;
}

.thoughtList li .left .image figure {
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	transform: scale(1.2);
    transition: all ease 1.25s;
    opacity: 0;
    transition-delay: 0s;
    position: relative;
}
.thoughtList .slick-active li.fadeIn4 .left .image figure {
	transform: scale(1);
	opacity: 1;
}
.thoughtList li.fadeIn4 .left .image figure.active {
	transform: scale(1.05);
	transition: all ease .5s;
	transition-delay: 0s;
}

.thoughtList li .left .image figure:before {
	content:"";
	position: absolute;
	height: 100%;
	width: 100%;
	right: 0;
	background-color: #fff;
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
    transition-delay: 0.2s;
    z-index: 2;
}
.thoughtList .slick-active li.fadeIn4 .left .image figure:before {
	width: 0%;
}


.thoughtList li .left .image.story figure {
	background-image: url(https://images.unsplash.com/photo-1498709112912-9be3173d30be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80);
}

.thoughtList li .left .image.vision figure {
	background-image: url(http://brand.studio-has.work/wp-content/uploads/2020/06/philosophy.jpg);
}
.thoughtList li .left .image.value figure {
	background-image: url(https://images.pexels.com/photos/1846422/pexels-photo-1846422.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
}


/*
right
*/

.thoughtList li .right {
	width: 55%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center
}
.thoughtList li .cont {
    width: 45%;
    margin: 0 auto;
    padding-left: initial;
    margin-top: 5%;
    opacity: 0;
    transition:all ease .75s;
    transition-delay: 0.9s;
}
.thoughtList .slick-active li.fadeIn4 .cont {
	margin-top: -4%;
	opacity: 1;
}

.thoughtList .slick-counter {
	font-size: 2.4rem;
    font-family: cormorant-garamond, serif;
    font-variant: small-caps;
    letter-spacing: 0.05em;
    margin-left: 4px;
    display: inline-block;
    position: relative;
}

.thoughtList li .title {
	font-family: a-otf-ryumin-pr6n, serif;
    font-weight: 300;
    font-size: 3.6rem;
    letter-spacing: 0.125em;
    margin-top: 11.2vw;
    white-space: nowrap;
}
.thoughtList li .title span {
	display: block;
    font-family: garamond-premier-pro-display, serif;
    font-size: 1.8rem;
    color: #b6a992;
    letter-spacing: 0.07em;
    margin-top: 17px;
    margin-left: 2px;
}
.thoughtList li .btn {
	margin-top: 11vw;
	cursor: pointer;
}


/* ---- thoughtSlide ---- */

/* thoughtClose */

.thoughtSlide .topClose {
	position: fixed;
	width: 29px;
	height: 16px;
	right: 2.8%;
	top: 4.7%;
	cursor: pointer;
	z-index: 6;
	transition: all ease .5s;
	visibility: hidden;
	opacity: 0;
}
.thoughtSlide.active .topClose {
	opacity: 1;
	visibility: visible;
}
.thoughtSlide .topClose > .inner {
	height: 100%;
	position: relative;
}
.thoughtSlide .topClose span {
	position: absolute;
	display: block;
	right: 0;
	height: 1px;
	width: 100%;
	background-color: #000;
	transition:all ease 0.75s;
	opacity: 0;
	transition-delay: 0s;
}
.thoughtSlide.active .topClose span {
	transition-delay: 3s;
	opacity: 1;
}
.thoughtSlide .topClose span:nth-child(1) {
	top: 54%;
	transform: rotate(45deg);
}
.thoughtSlide .topClose span:nth-child(2) {
	bottom:38%;
	transform: rotate(-45deg);
}


/* thoughtBg */

.thoughtBg {
	position: fixed;
	width: 0%;
	right: 0;
	height: 100%;
	z-index: 8;
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
    overflow: hidden;
    transition-delay: 0.65s;
}
.thoughtBg.zIndex {
	z-index: 10;
}
.thoughtBg.active {
	width: 100%;
	transition-delay: 0s;
}

.thoughtBg:before {
	content:"";
	background-color: #cbc0b9;
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
    transition-delay: 0.55s;
    z-index: 2;
}
.thoughtBg.active:before {
	transition-delay: 0.55s;
	width: 0;
}

.thoughtBg figure {
	width: 100%;
	height: 100%;
	background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    transform: scale(1.1);
    transition:all ease 3s;
    transition-delay: 0.3s;
}
.thoughtBg.active figure {
	transition-delay: 0.6s;
	transform: scale(1);
}
.thoughtBg.half figure {
	-webkit-transition: 2.3s cubic-bezier(.6,0,.25,1);
    transition: 2.3s cubic-bezier(.6,0,.25,1);
	transition-delay: 0s;
	width:calc(100% - 754px);
}


.thoughtBg.story figure {
	background-image: url(https://images.unsplash.com/photo-1498709112912-9be3173d30be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80);
}
.thoughtBg.vision figure {
	background-image: url(http://brand.studio-has.work/wp-content/uploads/2020/06/philosophy.jpg);
}
.thoughtBg.value figure {
	background-image: url(https://images.pexels.com/photos/1846422/pexels-photo-1846422.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
}


/* contents */

.thoughtSlide {
	position: fixed;
	background-color: #fff;
	height: 100vh;
	width: 754px;
	z-index: 8;
	box-shadow: -3px 0px 11px -1px rgba(0,0,0,0.15);
	overflow-y: scroll;
	right: -765px;
	-webkit-transition: 1.5s cubic-bezier(.6,0,.25,1);
    transition: 1.5s cubic-bezier(.6,0,.25,1);
    transition-delay: 0.35s;
}
.thoughtSlide.zIndex {
	z-index: 11;
}
.thoughtSlide.active {
	transition-delay: 1.7s;
	right: 0;
}
.thoughtSlide > .inner {
	width: 59.4%;
	margin:156px auto 0px;
	opacity: 0;
	transition: all ease .75s;
	padding-top: 25px;
	transition-delay: 0s;
}
.thoughtSlide.active > .inner {
	transition-delay: 3.3s;
	padding-top: 0;
	opacity: 1;
}


/* inner */


.thoughtSlide .title {
	font-family: a-otf-ryumin-pr6n, serif;
    font-weight: 300;
    font-size: 3.25rem;
    letter-spacing: 0.13em;
}
.thoughtSlide .title span {
    display: block;
    font-family: garamond-premier-pro-display, serif;
    font-size: 1.9rem;
    color: #b6a992;
    font-style: italic;
    letter-spacing: 0.09em;
    margin-top: 21px;
}

.thoughtSlide .desc {
	font-size: 1.6rem;
    font-family: a-otf-ryumin-pr6n, serif;
    font-weight: 300;
    letter-spacing: 0.12em;
    line-height: 3.4;
    margin-top: 65px;
}

.thoughtSlide .underClose {
	margin-top: 65px;
	font-size: 1.4rem;
	font-family:'Avenir LT W01_35 Light1475496';
	letter-spacing: 0.03em;
	width: 102%;
	margin-left: -1%;
	position: relative;
	display: block;
	cursor: pointer;
	line-height: 67px;
    text-align: center;
    border: 1px solid #e2e2e2;
    border-radius: 33px;
    height: 67px;
    background-color: #fafafa;
    transition:all ease .35s;
}
.thoughtSlide .underClose:hover {
	background-color: #e8e8e8;
}

.thoughtSlide .underClose span {
	display: inline-block;
	padding-left: 33px;
	position: relative;
	margin-left: -9px;
}
.thoughtSlide .underClose span:before {
	content:"";
	position: absolute;
	background-image: url(/Magazine_Brand/wp-content/themes/Magazine_Brand/assets/img/common/arrowHorizontal.svg);
	width: 15px;
	height: 7px;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
}
.thoughtSlide .underClose:hover span:before  {
	animation: arrowLeft .4s;
}
@keyframes arrowLeft {
  50% {
    left: 9px;
  }
  100% {
    left: 6px;
  }
}


/* slideNext */

/*
common
*/

.slideNext {
	width: 80.5%;
    margin: 230px auto 90px;
	border-top: 1px solid #ededed;
	border-bottom: 1px solid #ededed;
	cursor: pointer;
	opacity: 0;
	transition: all ease 0.75s;
	transition-delay: 0.55s;
}
.slideNext.fadeIn6 {
	opacity: 1;
	margin-top: 190px;
	transition-delay: 0s;
}

.slideNext .inner {
	width: 96.6%;
	margin:73px auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}

/*
left
*/

.slideNext .left {
	width: 57%;
}
.slideNext .left .subTitle {
	font-size: 1.35rem;
    font-family: garamond-premier-pro-display, serif;
    font-variant: small-caps;
    letter-spacing: 0.07em;
    margin-left: 4px;
    display: inline-block;
    position: relative;
    margin-top: 7px;
}
.slideNext .left .subTitle:before {
	content: "";
    position: absolute;
    width: 102%;
    height: 1px;
    background-color: #ededed;
    bottom: -7px;
    left: -2%;
}

.slideNext .left .slideTitle {
	margin-top: 225px;
	font-family: a-otf-ryumin-pr6n, serif;
    font-weight: 300;
    font-size: 2.45rem;
    letter-spacing: 0.13em;
    transition:all ease .5s;
}
.slideNext:hover .left .slideTitle {
	opacity: 0.8;
}
.slideNext .left .slideTitle span {
	display: block;
    font-family: garamond-premier-pro-display, serif;
    font-size: 1.6rem;
    color: #b6a992;
    font-style: italic;
    letter-spacing: 0.08em;
    margin-top: 9px;
}




/*
right
*/

.slideNext .right {
	width: 43%;
}
.slideNext .image {
	height: 315px;
	background-color: #ccc;
	overflow: hidden;
}
.slideNext .image figure {
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	transition:all ease .75s;
}
.slideNext:hover .image figure {
	transform:scale(1.075);
	transition:all ease .75s;
}

.slideNext.vision .image figure {
	background-image: url(http://brand.studio-has.work/wp-content/uploads/2020/06/philosophy.jpg);
}
.slideNext.value .image figure {
	background-image: url(https://images.pexels.com/photos/1846422/pexels-photo-1846422.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260);
}
.slideNext.philosophy .image figure {
	background-image: url(http://brand.studio-has.work/wp-content/uploads/2020/07/message-1.jpg);
}




/* 
---------------------------------------------------
  4. Index
---------------------------------------------------
*/

/* ---- Common - Section ---- */


/* common */

.sectCommon >  .inner {
	width: 91.2%;
	margin:0 auto;
}

/* sectTitle */

.sectCommon .sectTitle {
	width: 94%;
	margin:0 auto;
	display: none;
	font-family:'Levato W01 Regular';
}
.sectCommon .sectTitle span.num {
	font-size: 1.45rem;
    color: #b6a992;
    letter-spacing: 0.08em;
    margin-right: 1.1em;
}
.sectCommon .sectTitle span.txt {
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: 0.17em;
}



/* ---- Message - Section ---- */


/* common */

section.message {
	padding-top: 25px;
	margin-top: 30px;
}


/* sectCont */

section.message .sectCont {
	width: 87.5%;
	margin: 105px auto 0;
}
section.message .sectCont > .inner {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center
}

/*
image
*/

section.message .sectCont .image {
	width: 47.3%;
	height: 45vw;
	background-color: #ccc;
	overflow: hidden;
	transition:all ease 0.75s;
	transition-delay: .5s;
}
section.message .sectCont .image.fadeIn {
	transition-delay: 0s;
}
section.message .sectCont .image figure {
	width: 100%;
	height: 100%;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
	transform:scale(1.1);
	transition:all ease 1.5s;
	transition-delay: 0s;
}
section.message .sectCont .image figure {
	background-image: url(https://images.unsplash.com/photo-1587997960202-8ed415501e33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=939&q=80);
}
section.message.philosophy .sectCont .image figure {
	background-image: url(https://images.unsplash.com/photo-1484387486138-aea8315f893a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);
}


section.message .sectCont .image.fadeIn figure {
	transform:scale(1);
}
section.message .sectCont .image.fadeIn figure.transition {
	transition:all ease .75s;
}
section.message .sectCont .image.fadeIn figure.active {
	transform:scale(1.05);
}



/*
cont
*/

section.message .sectCont .cont {
	width: 52.7%;
	margin-top: -7px;
}
section.message .sectCont .cont > .inner {
	width: 52%;
	margin:0 auto;
	padding-left: 3%;
}

section.message .sectCont .cont .lead {
	font-family: a-otf-ryumin-pr6n, serif;
	font-weight: 300;
	font-size: 3.55rem;
    line-height: 1.9;
    letter-spacing: 0.1em;
	white-space: nowrap;
}
section.message .sectCont .cont .lead span {
	display: block;
	font-family: garamond-premier-pro-display, serif;
	font-size: 1.8rem;
	color:#b6a992;
	font-style: italic;
	letter-spacing: 0.075em;
    margin-left: 3px;
	margin-top: 15px;
}

section.message .sectCont .cont .txt {
	margin-top: 50px;
    font-family: a-otf-ryumin-pr6n, serif;
    font-size: 1.5rem;
    letter-spacing: 0.15em;
    margin-left: 2px;
    line-height: 3.6;
    white-space: nowrap;
}

section.message .sectCont .btn {
	margin-top: 76px;
}


/* messImage */

/*
commmon
*/

.messImage {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	overflow:hidden;
}
.messImage figure {
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	transform:scale(1.1);
	transition:all ease 1.5s;
}
.messImage.fadeIn4 figure {
	transform:scale(1);
}


/*
one
*/

.messImage.one {
    width: 36vw;
    height: 45vw;
	margin-left: auto;
	margin-right: 7.5%;
	margin-top: 18%;
	opacity: 0;
	transition:all ease .75s;
	transition-delay: 0.35s;
}
.messImage.one.fadeIn4 {
	margin-top: 15%;
	opacity: 1;
}
.messImage.one figure {
	background-image: url(https://images.unsplash.com/photo-1580439527610-212eb31ce1fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=557&q=80);
}


/*
two
*/

.messImage.two {
	width: 29vw;
    height: 36vw;
    margin-left: 10.5%;
	margin-top: 14%;
}
.messImage.two.fadeIn {
	margin-top: 11%;
}

.messImage.two figure {
	background-image: url(https://images.unsplash.com/photo-1586944623958-71ac364b50c2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80);
}


/* ---- Philosophy & Information - Section ---- */


/* infoCont */

/*
common
*/

section.sectCommon .infoCont {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	width: 94.2%;
    margin: 110px auto 0;
    align-items: center
}
section.philosophy .infoCont {
	flex-direction: row-reverse;
}
section.information {
	padding-bottom: 50px;
}


/*
left
*/

section.sectCommon .infoCont .left {
	width: 38.8%;
}


/*
cont
*/

section.philosophy .infoCont .left .cont {
	width: 57.5%;
	margin:0 auto;
}
section.philosophy .infoCont .left .cont .title {
	font-family: 'Levato W01 Regular';
	font-weight: 300;
    font-size: 3.75em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 7vw;
}
section.philosophy .infoCont .left .cont .title span {
	display: block;
	font-size: 1.35rem;
	font-family: a-otf-ryumin-pr6n, serif;
	letter-spacing: 0.19em;
	margin-left: 2px;
	margin-top: 15px;
	color: #6f6f6f;
}
section.philosophy .infoCont .left .cont .btn {
	margin-top: 7.8vw;
}


/*
infoList
*/

section.sectCommon .infoList {
	width: 78%;
	margin:0 auto;
}


/*
infoNav
*/

section.sectCommon .infoCont .left .infoNav {
	font-family:'Levato W01 Regular';
	font-size: 3.5em;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	line-height: 1.7;
	width: 50%;
}

section.sectCommon .infoNav li a {
	transition:all ease .3s;
	position: relative;
	white-space: nowrap;
}
section.sectCommon .infoNav li a:hover {
	padding-left: 24px;
	opacity: 1;
}

section.sectCommon .infoNav li a:before {
	content:"";
	display: inline-block;
	height: 1px;
	width: 0px;
	background-color: #ccc;
	transition:all ease .25s;
	position: absolute;
	top: 50%;
	left: 0;
}
section.sectCommon .infoNav li a:hover:before {
	width: 16px;
}

/*
infoCopy
*/

section.sectCommon .infoCont .left .infoCopy {
    font-size: 1.3rem;
    font-family: 'Avenir LT W01_35 Light1475496';
    color: #a6a6a6;
    letter-spacing: 0.035em;
    line-height: 2.8;
    margin-top: 33px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    flex-direction: column;
}
section.sectCommon .infoCont .left .infoCopy span {
	display:inline-block;
}
section.sectCommon .infoCont .left .infoCopy span.inner {
	position: relative;
}
section.sectCommon .infoCont .left .infoCopy span.inner:before {
	content:"";
	position: absolute;
	width: 103%;
	left: -1.5%;
	height: 1px;
	bottom: 3px;
	background-color:#f0f0f0;
}


/*
right
*/

section.sectCommon .infoCont .right {
	width: 61.2%;
	height: 39.4vw;
	position: relative;
}
section.philosophy .infoCont .right .image{
	margin-left: -2.2%;
}

section.sectCommon .infoCont .right .image {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	overflow: hidden;
}
section.sectCommon .infoCont .right .image.one {
	visibility: visible;
	opacity: 1;
}
section.sectCommon .infoCont .right .image.two {
	visibility: hidden;
	opacity: 0;
}
section.sectCommon .infoCont .right .image.three {
	visibility: hidden;
	opacity: 0;
}

section.sectCommon .infoCont .right .image figure {
	height: 100%;
	width: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	transition:all ease .5s;
	transform: scale(1.1);
    transition: all ease 1.5s;
    position: relative;
}
section.sectCommon .infoCont .right.fadeIn3 .image figure {
	transform: scale(1);
}
section.sectCommon .infoCont .right .image.transition figure {
	transition:all ease .75s;
	transition-delay: 0s;
}


section.philosophy .infoCont .right .image figure  {
	background-image: url(https://images.pexels.com/photos/1750566/pexels-photo-1750566.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260);
}
section.information .infoCont .right .image.first figure  {
	background-image: url(http://brand.studio-has.work/wp-content/uploads/2020/07/information.jpg);
	opacity: 0;
}
section.information .infoCont .right .image.about figure  {
	background-image: url(https://images.unsplash.com/photo-1504768698754-83a2eef21732?ixlib=rb-1.2.1&auto=format&fit=crop&w=1651&q=80);
	opacity: 0;
}
section.information .infoCont .right .image.join figure  {
	background-image: url(https://images.unsplash.com/photo-1587476821668-7e1391103e49?ixlib=rb-1.2.1&auto=format&fit=crop&w=1652&q=80);
	opacity: 0;
}

section.sectCommon .infoCont .right .image.opacity figure {
	opacity: 1;
	transform: scale(1.015);
}



/* 
---------------------------------------------------
  5. About us
---------------------------------------------------
*/

/* ---- MV ---- */

/* common */

section.underSubMv {
	height: 100vh;
}
section.underSubMv >  .inner {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	height: 100%;
}


/* left */

section.underSubMv .left {
	width: 39%;
	height: 100%;
}
section.underSubMv .image {
	height: calc(100% - 24px);
    margin-top: 12px;
    margin-left: 12px;
}
section.underSubMv .image figure {
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center center;
	position: relative;
}
section.underSubMv .image figure:before {
	content:"";
	position: absolute;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	-webkit-transition: 1s cubic-bezier(.6,0,.25,1);
    transition: 1s cubic-bezier(.6,0,.25,1);
    transition-delay: 0.7s;
}
body.pace-done section.underSubMv .image figure:before {
	width: 0%;
}

section.aboutMv .image figure {
	background-image: url(https://images.unsplash.com/photo-1504768698754-83a2eef21732?ixlib=rb-1.2.1&auto=format&fit=crop&w=1651&q=80);
}
section.joinMv .image figure {
	background-image: url(https://images.unsplash.com/photo-1587476821668-7e1391103e49?ixlib=rb-1.2.1&auto=format&fit=crop&w=1652&q=80);
}


/* right */

/*
common
*/

section.underSubMv .right {
	width: calc(61% - 100px);
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
}

section.underSubMv .right .aboutInfo {
	width: 52%;
	margin: 0px auto 0;
	opacity: 0;
    transition: all ease 0.75s;
    transition-delay: 1.6s;
    padding-left: 5%;
}
body.pace-done section.underSubMv .right .aboutInfo {
	margin:-23px auto 0;
	opacity: 1;
}

section.underSubMv .aboutInfo .url {
	font-family: 'Avenir LT W01_35 Light1475496';
    letter-spacing: 0.02em;
}
section.underSubMv .aboutInfo .url a  {
	position: relative;
}
section.underSubMv .aboutInfo .url a:before {
  content:"";
  position: absolute;
  bottom:-9px;
  left: -1%;
  width: 102%;
  height: 1px;
  background-color: #cec6b7;
  transform: scale(1, 1);
  transform-origin: left top;
  transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
}
section.underSubMv .aboutInfo .url a:hover::before {
  transform-origin: right top;
  transform: scale(0, 1);
}
section.underSubMv .aboutInfo .url a:after {
  content:"";
  position: absolute;
  bottom:-9px;
  left: -1%;
  width: 102%;
  height: 1px;
  background-color: #cec6b7;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition-delay: 0.3s;
}
section.underSubMv .aboutInfo .url a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}


/*
one
*/

section.underSubMv .aboutInfo .one {

}
section.underSubMv .aboutInfo .one .name {
	font-size: 2.55rem;
	font-family:'Levato W01 Regular';
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

section.underSubMv .aboutInfo .one .url {
	margin-top: 24px;
}

section.underSubMv .aboutInfo .one .mail {
	font-family: 'Avenir LT W01_35 Light1475496';
    letter-spacing: 0.02em;
    margin-top: 30px;
}
section.underSubMv .aboutInfo .one .mail span:after {
	content:":";
	margin-left: 2px;
	margin-right: 3px;
}

.aboutSns ul {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	margin-top: 34px;
	margin-left: -5px;
}
.aboutSns ul li {
	font-size: 1.9rem;
	text-align: center;
	border: 1px solid #ebebeb;
	border-radius: 100%;
}
.aboutSns ul li a {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 43px;
	width: 43px;
	position: relative;
}
.aboutSns ul li img {
}

.aboutSns ul li + li {
	margin-left: 7px;
}


/*
two
*/

section.underSubMv .aboutInfo .two {
	margin-top: 58px;
}
section.underSubMv .aboutInfo .two .name {
	font-size: 2.75rem;
	font-family:'Levato W01 Regular';
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
section.underSubMv .aboutInfo .two .name span {
	font-size: 1rem;
	font-family: 'Avenir LT W01_35 Light1475496';
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 10px;
    text-transform: initial;
}

section.underSubMv .aboutInfo .two .cont {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	font-size: 1.25rem;
	font-family: 'Avenir LT W01_35 Light1475496';
    letter-spacing: 0.045em;
    line-height: 2.3;
    margin-top: 30px;
}

section.underSubMv .aboutInfo .two .telMail {
	margin-left: 53px;
}
section.underSubMv .aboutInfo .two .telMail span {
	display: inline-block;
	width: 23px;
}

section.underSubMv .aboutInfo .two .url {
	margin-top: 34px;
}



/* 
---------------------------------------------------
  6. Join us
---------------------------------------------------
*/

/* right */

.joinInfo {
	width: 52%;
	margin:0 auto;
	padding-left: 9%;
}
.joinInfo .title {
	font-size: 4.3rem;
	font-family:'Levato W01 Regular';
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.joinInfo .desc {
	margin-top: 31px;
    font-family: a-otf-ryumin-pr6n, serif;
    font-size: 1.45rem;
    letter-spacing: 0.05em;
    line-height: 3.1;
}
.joinInfo .mail {
	margin-top: 50px;
	font-size: 1.5rem;
	font-family: 'Avenir LT W01_35 Light1475496';
    letter-spacing: 0.035em;
}
.joinInfo .mail span:after {
	content:":";
	margin-left: 6px;
	margin-right: 6px;
}

.joinInfo .mail a {
	position: relative;
}
.joinInfo .mail a:before {
  content:"";
  position: absolute;
  bottom:-11px;
  left: -2%;
  width: 104%;
  height: 1px;
  background-color: #cec6b7;
  transform: scale(1, 1);
  transform-origin: left top;
  transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
}
.joinInfo .mail a:hover::before {
  transform-origin: right top;
  transform: scale(0, 1);
}
.joinInfo .mail a:after {
  content:"";
  position: absolute;
  bottom:-11px;
  left: 0;
  width: 105%;
  height: 1px;
  background-color: #cec6b7;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: -webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition: transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1),-webkit-transform 0.4s cubic-bezier(0.08, 0.92, 0.35, 1);
  transition-delay: 0.3s;
}
.joinInfo .mail a:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}