@charset "utf-8";

/**********   cssReset   **********/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	font-weight:normal;
}

/**********   indexWrap   **********/
html, body, #wrapper{
  width:100%;
  height:100%;
  background-color:#f9f4f0;
  font-family: 'Helvetica',"YakuHanJP","游ゴシック",YuGothic,"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
  font-feature-settings : "palt";
}
@media all and (-ms-high-contrast:none) {
	body {
		font-family: 'Helvetica',"YakuHanJP","メイリオ",Meiryo,"游ゴシック",YuGothic,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",sans-serif;
		  font-feature-settings : "palt";
	}
}

::selection {
    background: #000;
    color: #fff;
}
//Firefox
::-moz-selection {
    background: #000;
    color: #fff;
}

/**********   content   **********/

#wrapper {
    position: relative;
    top:0;
    right:0;
    bottom:0;
    left:0; 
}
.box {
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
	
.title {
  top: 0;
  left: 140px;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
	
.title p {
margin-top:0px;
	margin-bottom:22px;
text-align:right;
vertical-align: top;
font-size:80px;
	font-weight: 600;
	letter-spacing:-0.01em;
}
.title a{
padding:0 0 0 130px;
text-align:right;
vertical-align: top;
font-size:22px;
	font-weight:200;
	color: #666666;
	letter-spacing:0.08em;
}

.topmenu {
    position: absolute;
  top: 108%;
  left: 92%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
.topmenu a{
padding:0 0 0 0;
text-align:left;
vertical-align: top;
font-size:22px;
	font-weight:200;
	color: #000000;
	letter-spacing:0.16em;
	line-height: 34px; 
}

.topmenu a { color: #333333; text-decoration: none; transition: 0.5s;}
.topmenu a:link { color: #333333; text-decoration: none;}
.topmenu a:visited { color: #000000;;text-decoration: none; }
.topmenu a:hover { color: #000000; text-decoration: none; cursor:pointer;}
.topmenu a:active { color: #333333; text-decoration: none;}

#BT {
    background-color: #fff;
    top: 0;
    height: 26px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 0;
}
#BL {
    background-color: #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 26px;
    z-index: 0;
}
#BR {
    background-color: #fff;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 26px;
    z-index: 0;
}
#BB {
    background-color: #fff;
	bottom: 0;
    height: 26px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 0;
}
.borderLeftRight {
    display: inline-block;
    position: relative;
    color: hsl(222, 25%, 14%);
  }
  
.borderLeftRight::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: hsl(0, 0%, 0%);
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  .borderLeftRight:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }
  
.fadein {
	opacity: 0;
	animation: fadein 3s ease forwards;
}
@keyframes fadein {
	100% {	opacity: 1;}
}

/*以下遅延の指定*/
.txt01 {animation-delay: 0.05s;}
.txt02 {animation-delay: 0.5s;}
.txt03 {animation-delay: 1s;}
.txt04 {animation-delay: 1.3s;}
.txt05 {animation-delay: 1.6s;}
.txt06 {animation-delay: 16s;}


@media screen and (max-width: 750px) {
	  .sp_non {
    display: none;
  }
#wrapper {
	   max-width: 480px;
  margin: 0 auto;
}
.box {
  width: 100%;
	height: 100%;
}
	
.title {
	position: fixed;
	  width: 213px;
	top:35%;
	left:50%;
}
	
.title p {
	margin-bottom:5px;
text-align:left;
vertical-align: top;
font-size:45px;
	font-weight: 600;
	letter-spacing:-0.01em;
}
.title a{
padding:0 0 0 3px;
text-align:left;
vertical-align: top;
font-size:14px;
	font-weight:200;
	color: #666666;
	letter-spacing:0.08em;
}

.topmenu {
		position: fixed;
	  width: 213px;
	top:60%;
	left:51%;
	padding:30px 0 0 0;
}
.topmenu a{
padding:0 0 0 0;
text-align:left;
vertical-align: top;
font-size:16px;
	font-weight:200;
	color: #000000;
	letter-spacing:0.16em;
	line-height: 18px; 
}

.topmenu a { color: #000000; text-decoration: none; transition: 0.5s;}
.topmenu a:link { color: #000000; text-decoration: none;}
.topmenu a:visited { color: #000000;;text-decoration: none; }
.topmenu a:hover { }
.topmenu a:active { color: #333333; text-decoration: none;}

.borderLeftRight {

  }
  
.borderLeftRight::after {

  }
  
  .borderLeftRight:hover::after {

  }	
	
#BT {
    background-color: #fff;
    top: 0;
    height: 16px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 0;
}
#BL {
    background-color: #fff;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 16px;
    z-index: 0;
}
#BR {
    background-color: #fff;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    width: 16px;
    z-index: 0;
}
#BB {
    background-color: #fff;
	bottom: 0;
    height: 16px;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 0;
}
	}