@charset "UTF-8";

/*----------------------------------------
position
----------------------------------------*/

.position_title{
width: 100%;
position: relative;
background: linear-gradient(90deg,rgba(227, 171, 178, 0.2) 0%, rgba(221, 204, 178, 0.2) 30%, rgba(205, 220, 155, 0.2) 60%, rgba(160, 213, 210, 0.2) 100%);
}

.position_title_text{
width: 100%;
position: absolute;
top: 0;
left: 0;
}

.position_title_text h2{
font-size: clamp(20px, -2.500px + 2.93vw, 35px);
font-weight: 600;
font-style: normal;
text-align: center;
letter-spacing: 3px !important;
padding: 60px 0 20px 0;
}

.position_title_text p{
font-size: clamp(12px, 7.500px + 0.586vw, 15px);
line-height: 2;
font-weight: 300;
font-style: normal;
text-align: center;
}

.position_title_img{
width: 100%;
}

.position_title_img2{
position: absolute;
top: 0;
left: 0;
width: 100%;
}


.position1{
width: 100%;
height: calc(100vh - 110px);
will-change: transform;
z-index: -1;
background-image: url(../images/position_03.jpg);
background-size: cover;
background-position: right bottom;
position: relative;
}

.position1 h2{
font-size: clamp(30px, 12.222px + 2.315vw, 40px);
font-weight: 600;
font-style: normal;
letter-spacing: 3px !important;
padding: 80px;
color: #fff;
position: absolute;
left: 0;
top: 0;
width: 100%;
text-align: left;
}

.position1_cap{
position: absolute;
right: 0;
bottom: 0;
color: #fff;
font-size: 1rem !important;
line-height: 1 !important;
width: 100%;
text-align: right;
padding: 5px;
}

.position1_contents{
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
padding: 80px;
}

.position1_contents p{
font-size: clamp(12px, 7.500px + 0.586vw, 15px);
line-height: 2;
font-weight: 300;
font-style: normal;
text-align: left;
}


.position2_bg{
background: linear-gradient(90deg,rgba(227, 171, 178, 0.2) 0%, rgba(221, 204, 178, 0.2) 30%, rgba(205, 220, 155, 0.2) 60%, rgba(160, 213, 210, 0.2) 100%);
}

.position2{
width: 100%;
padding: 20px 0 80px 0;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

.position2 h2{
font-size: clamp(20px, -2.500px + 2.93vw, 35px);
font-weight: 600;
font-style: normal;
text-align: center;
letter-spacing: 3px !important;
padding: 0 0 40px 0;
}

.position2_item{
width: 48%;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}

.position2 h4{
display: flex;
justify-content: flex-start;
align-items: flex-start;
}

.position2_item h4 span{
display: flex;
justify-content: center;
align-items: center;
width: 20px;
height: 20px;
font-family: "greycliff-cf", sans-serif;
font-size: 1.4rem;
font-weight: 600;
line-height: 1 !important;
margin: 0 5px 0 0;
background-color: #981040;
color: #fff;
position: relative;
top: 5px;
}



.position_future {
display: flex;
overflow: hidden;
width: 100%;
margin-top: 20px;
}

.position_future ul {
display: flex;
list-style: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
animation: scroll-left 20s infinite linear .5s both;
}

.position_future ul li {
width: calc(100vw / 2);
margin: 0 40px;
}

.position_future ul li img {
display: block;
width: 100%;
opacity: 0.5;
}

@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}


@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {

.position1_contents{
height: auto;
padding: 80px 20px;
position: static;
top: 0;
margin-bottom: 0;
}

}


/*-- sp--*/

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

.position_future ul li {
width: calc(100vw / 1);
margin: 0 20px;
}


.position_title_text h2{
font-size: 20px;
letter-spacing: 0 !important;
padding: 30px 0 20px 0;
}


.position_title_text p{
font-size: 12px;
line-height: 1.5;
text-align: left;
padding: 0 15px;
width: 100%;
}


.position1_bg{
background-image: url(../images/position_bg.jpg);
background-size: cover;
background-position: center center;
}

.position1{
width: 100%;
height: auto;
will-change: transform;
background-image: none;
position: relative;
z-index: 1;
}

.position1 h2{
font-size: 20px;
letter-spacing: 0px !important;
padding: 40px 10px;
text-align: center;
position: static;
color: #333;
}

.position1_contents{
height: auto;
padding: 40px 20px;
position: relative;
top: 2px;
margin-bottom: 2px;
background-color: transparent;
}

.position1_contents p{
font-size: clamp(12px, 7.500px + 0.586vw, 15px);
line-height: 2;
font-weight: 300;
font-style: normal;
text-align: left;
color: #333 !important;
}

.position1_contents h3{
color: #333 !important;
}

.position2{
padding: 20px 10px 40px 10px;
}

.position2 h2{
font-size: 20px;
letter-spacing: 0px !important;
padding: 0 0 20px 0;
}

.position2_item{
width: 100%;
}

.position2_item h4{
flex-direction: column;
}


.position2_item h4 span{
margin: 0 0 10px 0;
}

}