@charset "utf-8";

/*			見出しの横に罫線▼pc
---------------------------------*/

/*        TOP
================================*/

section.main {
width:100%;
height:100vh;
}

section.main ul {
display: flex;
/*	justify-content: space-between;*/
flex-direction: column; 
}
section.main ul li {
/*  width:50%;*/
width:100%;
position: relative;
overflow: hidden;
transition: .3s ease-in-out;
}
section.main ul li:hover {
opacity: 0.7;
}

section.main ul li:nth-child(1):after {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(../img/index/bg_arata.jpg) center center no-repeat;
background-size: cover;
transition: .3s ease-in-out;
pointer-events: none;
}
section.main ul li:nth-child(1) .logo_arata_Wrap {
width:240px;
position: absolute;
top: 50%;
left: 85%;
transform: translate(-50%, -50%);
/*padding: 20px 30px 6px;*/
padding: 20px 1em 6px;
background: #001428;
z-index:5;
transition: .3s ease-in-out;
}
section.main ul li:nth-child(1) h2.logo_arata {
width:100%;
/* width:45%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:5; */
}
section.main ul li:nth-child(2):after  {
position: absolute;
content: "";
display: block;
width: 100%;
height: 100%;
top: 0;
background: url(../img/index/bg_shimoarata.jpg) center center no-repeat;
background-size: cover;
transition: .3s ease-in-out;
pointer-events: none;
}
section.main ul li:nth-child(2) .logo_shimoarata_Wrap {
width:240px;
position: absolute;
top: 50%;
left: 15%;
transform: translate(-50%, -50%);
/*padding: 20px 30px 6px;*/
padding: 20px 1em 6px;
/*  background: linear-gradient(90deg, rgba(138, 122, 106, 1) 0%, rgba(124, 106, 87, 1) 100%);*/
background: #8a7a6a;
z-index:5;
transition: .3s ease-in-out;
}
section.main ul li:nth-child(2) h2.logo_shimoarata {
width:90%;
margin: 0 auto;
/* width:40%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index:5; */
}

.arrow{
/* display:inline-block;
background:#d13415; */
width: 100%;
padding:40px 0 0 0;
text-align:center;
color:#FFF;
cursor:pointer;
position: relative;
text-decoration: none;
}
.arrow::after{
content: "";
display: block;
position: absolute;
top: calc(50% - 5px);
left: 70px;
width: 100px;
height: 5px;
border: none;
border-right: 2px solid #FFF;
border-bottom: 1px solid #FFF;
transform: skew(45deg);
transition: .3s;
}


section.main ul li a {
display: block;
/*	height:100vh;*/
height:50vh;
transition: .3s;
}
/* section.main ul li a:hover {
opacity: .5;
transition: .3s;
} */
section.main ul li:hover:after {
/* transition: .3s ease-in-out; */
/* transform: scale(1.1); */
/* opacity: .8; */
cursor:pointer;
}
section.main ul li a:hover > div {
transition: .3s ease-in-out;
/*opacity: .7;*/
/*filter: brightness(1.5);*/
}
section.main ul li:hover .arrow::after{
left: 70px;
width: 120px;
}