@charset "UTF-8";
/* CSS Document */
body,div,pre,p,blockquote,
form,fieldset,input,textarea,select,option,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
table,th,td,embed,object{
	margin: 0;
	padding: 0;
}


body{
	font-family:   'Noto Sans JP', 'ヒラギノ角ゴシック','Hiragino Sans','メイリオ','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Osaka' ,'Yu Gothic','Yu Mincho Light','YuMincho','Yu Mincho','游明朝体','Arial', sans-serif , serif;
	font-size:96%;
	color:#000;
	line-height:190%;
	-webkit-text-size-adjust: 100%;
	word-break:break-all;
}
img{
	border:none;
	vertical-align:bottom;
	max-width:100%;
	height:auto;
	margin:0;
	padding:0;
	display:block;
	margin:0px auto;
	 margin-left: auto;
   margin-right: auto;
}
li{
	list-style-type:none;	
}
a{
	text-decoration:none;
	color:#231815;
}
a:hover{
	text-decoration:none;
	cursor: pointer;
}
a img{
    -webkit-transition: 0.3s ease-in-out;
       -moz-transition: 0.3s ease-in-out;
         -o-transition: 0.3s ease-in-out;
            transition: 0.3s ease-in-out;
			outline:none;
}
a:hover img{
	opacity:0.7;
	-moz-opacity:0.7;
}
.clear{
	clear:both;
}
.pc{
	display: block!important;
}
.sp{
	display: none!important;
}
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeUpTrigger{
    opacity: 0;
}



/*PC*/
#wrapperTop{
	position:relative;
	width:100vw;
	height:100vh;
	overflow:hidden;
}
.upper{
	width:10%;
	margin:0 auto;
	position:relative;
	padding:6% 0 0 0;
}
.logo{
	width:100%;
	margin:0 auto;
	overflow:hidden;
}
.portfolio{
	margin:80px auto 40px auto;
	text-align:center;
	font-weight:500;
	font-size:105%;
	color:#111;
}
.contact{
	margin:0 auto;
	text-align:center;
	font-weight:500;
	font-size:105%;
	color:#111;
}
.portfolio a{
	color:#111;
	transition:.3s;
	letter-spacing: 1px;
}
.contact a{
	color:#111;
	transition:.3s;
	letter-spacing: 4px;
}
.portfolio a:hover{
	color:#a0a0a0;
}
.contact a:hover{
	color:#a0a0a0;
}
.footer{
	position:absolute;
	bottom:1%;
	margin:auto;
	left:0;
	right:0;
}
.footerLogo{
	margin:0 auto;
	text-align:center;
	font-weight:500;
	letter-spacing: 3px;
	font-size:95%;
}
.footerAdd{
	margin:0 auto;
	text-align:center;
	font-weight:400;
	font-size:85%;
	letter-spacing: 2px;
}
.footerAdd a{
	color:#111;
	pointer-events:none;
}
.br1{
	padding:0 15px;
}

@media screen and (max-width: 1550px) {
.upper{
	width:12%;
}
.portfolio{
	margin:60px auto 30px auto;
}
}
@media screen and (max-width: 1200px) {
.upper{
	width:14%;
}
}
@media screen and (max-width: 1024px) {
.upper{
	width:16%;
}
.footerAdd{
		line-height:170%;
}
.br1{
	display:block;
	padding:0;
}
.br2{
	display:block;
}
}
@media screen and (max-width: 850px) {
.upper{
	width:20%;
	padding:10% 0 0 0;
}
}
@media screen and (max-width:770px) {
#wrapperTop{
	width:100svw;
	height:100svh;
}
}
@media screen and (max-width: 680px) {
.footerLogo{
	font-size:100%;
}
.br0{
	display:block;
}
}
@media screen and (max-width: 640px) {
.upper{
	width:25%;
	padding:15% 0 0 0;
}
}
@media screen and (max-width: 580px) {
.upper{
	width:30%;
	padding:20% 0 0 0;
}
}
@media screen and (max-width: 440px) {
.upper{
	width:35%;
	padding:25% 0 0 0;
}
}