@charset "utf-8";

/* CSS Document */

html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p,
form, input, div {
  margin: 0;
  padding: 0;
}

li  {
  list-style: none;
}







body {

	margin: 0px;

	padding: 0px;

	font-family: "nimbus-sans",
    "a-otf-gothic-bbb-pr6n",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
	
	scroll-behavior:smooth;

}





.container{
width: 1400px;
margin: 0 auto;
}



.header-logo-sp{
display: none;
width:160px;
z-index: 10;
position: fixed;
left: 50%;
top:20px;
margin: 0px 0px 0px -80px;

}

.sp-header-right{
display: none;
width:351px;

z-index: 10;
position:fixed;
left: 50%;
top:60px;
margin: 0px 0px 0px -160px;

line-height: 30px;
float:right;
}

.sp-header-right{

margin-top:10px;
font-size: 15px;

}

.sp-header-right li{
float: left;
padding-right: 30px;
}


.sp-header-right a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: black;
  
}
.sp-header-right a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1.2);
  transform-origin: center top;
  transition: transform .3s;
}
.sp-header-right a:hover::after {
  transform: scale(1, 1.2);
}

.sp-header-right .fa{
padding-top:7px
}

#Button1{
display: none;
}



header{
padding:40px 100px;
height: 30px;
color: black;
background-color: white;
position:fixed;
width:100%;
z-index: 3;
top:0;
display: flex;
}










.header-left{

margin-top:0px;

}

.left-title{

font-size: 14px;
color:black;
letter-spacing: 1px;
}

.left-p{

font-size: 10.9px;
color:black;
margin-top: 2px;

}


.header-logo{
width:210px;
margin: 0 auto;
cursor: pointer;

}




.header-right{

margin-top:10px;
font-size: 15px;

}

.header-right li{
float: left;
padding-right: 30px;
}


.header-right a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: black;
  
}
.header-right a::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  content: '';
  width: 100%;
  height: 2px;
  background: #333;
  transform: scale(0, 1.2);
  transform-origin: center top;
  transition: transform .3s;
}
.header-right a:hover::after {
  transform: scale(1, 1.2);
}


.sns a{

color:black;
padding-right: 15px;
padding-top: 22px;
position: relative;
left:15px;

}






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


.header-left{
display: none;
}


.header-logo{
display: none;
}


.header-right{
display: none;
}

.sp-header-right{
display: block;
}

.header-logo-sp{
display: block;
}

.box{
display: none;
}

 }





.grid {
padding-top: 140px; 
width:70%;
margin: 0 auto;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

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

.grid {
padding-top: 140px; 
width:100%;
margin: 0 auto;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

}



.item{

position: relative;
overflow:hidden;
}




.photo {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  overflow:hidden;
 
    }

.photo-p{
color: white;
position: absolute;
top:45%;
left:10%;
font-size: 14px;
letter-spacing: 0.3px;
opacity: 0;
object-fit: cover;
line-height: 1.2;
width:100%;
}

.photo-p::first-line{
font-size: 23px;


}


.photo:hover {
  
  transition-duration: 0.6s;
  filter: brightness(0.5);
  opacity: 1;
  transform: scale(1.1, 1.1);
 

}

.photo:hover + .photo-p {
opacity: 1;
transition:all 2s ease;

}


.arrow{
    position: relative;
    display: block;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
	padding-top:10px;
	text-align: center;
	margin: 0 auto;

}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0%;
    left: 50%;
	margin: 0px 0px 0px -25px;
    content: "";
    vertical-align: middle;
}


footer{
height:180px;
 text-align:center;
 margin:0 auto;
 padding-top:60px;

}





.sample5-6::before{
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border: 1px solid black;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.sample5-6::after{
    left: 50%;
		margin: 0px 0px 0px -10px;
	top:20px;
    width: 20px;
    height: 20px;
    border-top: 1px solid black;
    border-right: 1px solid black;
    -webkit-transform: rotate(90deg);
    transform: rotate(-45deg);
}

.arrow:hover{
opacity:0.5;
}





HTML CSSResult
EDIT ON
/* キャンパス設定 */
html, body {
  height: 100%;
}





/* アニメーション設定 */
.arrow-scrollWrap {
  position: fixed;
  right: 0;
  bottom: 0;
  height: 685px
}

.arrow-scrollInner p {
  font-size: 13px;
  text-align: end;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.arrow-scroll {
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  position: relative;
  overflow: hidden;
}

.arrow-scroll::before {
  content: '';
  width: 1px;
  height: 100px;
  margin: 50px auto 0;
  background-color: #000;
  position: absolute;
  top: -150px;
  left: 0;
  -webkit-animation: arrow-scroll 2.5s ease 0s infinite normal;
  animation: arrow-scroll 2.5s ease 0s infinite normal;
}

@keyframes arrow-scroll {
  0% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  60% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 100px, 0);
    transform: translate3d(-50%, 100px, 0);
  }
}

.footer-title{
font-size:13px;
color:black;
margin-top:60px;
letter-spacing: 1px;
}


.footer-p{
font-size:8px;
color:black;
margin-top:8px;
letter-spacing: 1px;
}


.work-wrapper{
margin-top:150px;
text-align: center;
display: block;

}


.work-photo{
width:45%;
text-align: center;
display: block;
margin: 10px auto;

}




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


.work-photo{
width:70%;
}


 }

.work-photo-detail{
margin-top: 30px;
}


.work-title{

font-size: 17px;
color:black;
letter-spacing: 0.5px;
}

.work-p{

font-size: 12px;
color:black;
margin-top: 4px;
margin-bottom: 30px;
letter-spacing: 0.5px;
}


.about-p{
font-size: 12px;
line-height: 20px;
margin-top:20px
}

#contact_colum{
width: 360px;
margin: 0 auto;
margin-top:170px;

}




.contact-p{
font-size: 15px;
letter-spacing: 0.5px;
}


#contact_colum2{
width: 500px;
margin: 0 auto;
font-size: 14px;
margin-top:170px;
text-align: center;
}


textarea{
width:90%;

}



.btn{
margin-top: 20px;
}