@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/
/*topArea*/
.topArea .topSlide .slide{
width: 100vw;
height: 100vh;
}
.topArea .topSlide .slide{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.topArea .logo{
top: 50px;
left: 5%;
width: 140px;
}
@media screen and (max-width:767px) {
.topArea .logo{
top: 20px;
width: 88px;
}
}
.topArea .txt{
top:50%;
left:50%;
width:90%;
max-width:1100px;
transform: translate(-50%,-50%);
}

.topArea .sliderBtn a{
width:90%;
max-width:235px;
margin: 100px auto 0;
background: rgba(255,255,255,0.6);
height: 55px;
line-height: 55px;
}
@media screen and (max-width: 640px){
.topArea .sliderBtn a{
max-width: 175px;
height: 45px;
line-height: 45px;
margin:30px auto 0;
}
}
.topArea .sliderBtn a:hover{
background: rgba(0,0,0,0.6);
}
.topArea  .arrow{
bottom:50px;
left:50%;
z-index: 10;
width: 18px;
height: 18px;
display: block;
margin-left:-8px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
-webkit-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}
@media screen and (max-width:640px){
#topArea .arrow{
display:none;
}
}
/*messageArea*/
.messageArea{
padding: 100px 0;
}
@media screen and (max-width:767px) {
.messageArea{
padding: 50px 0;
margin-bottom: 40px;
}
}
.messageArea .aboutTtl{
font-size: 4.6rem;
padding: 0 30px;
}
@media screen and (max-width:767px) {
.messageArea .aboutTtl{
font-size: 3rem;
padding: 0 15px;
}
}
.messageArea .rollBtn a{
  max-width: 205px;
}
/*worksArea*/
.worksArea .worksTtlOuter{
width: calc(90% - 13px);
}
.worksArea .groupTtl .jp{
margin-left: 20px;
}
@media screen and (max-width:767px) {
.worksArea .groupTtl .jp{
margin-left: 0;
display: block;
width: 100%;
margin-top: 5px;
}
}
.worksTtlOuter .rollBtn.noline a{
max-width: 75px;
height: 20px;
line-height: 20px;
bottom: 0;
right: 0;
}
@media screen and (max-width:767px) {
.worksTtlOuter .rollBtn.noline{
width: 75px;
margin: 0 0 0 auto;
}
.worksTtlOuter .rollBtn.noline a{
position: relative;
}
}
.worksArea .slick-list {
width: 90%;
margin: 0 auto;
z-index: 10;
overflow: visible;
}
.worksArea .slick-slider li {
margin: 0 13px;
}
.worksArea .slick-slider li .img{
padding-top: 66.6666%;
}
.worksArea .slick-slider li .img img{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height:auto;
transform:translate(-50%,-50%);
}
.worksArea .slick-prev,
.worksArea .slick-next
{
position: absolute;
top:0;
display: block;
cursor: pointer;
border: none;
outline: none;
font-size:0;
width:5%;
height: 100%;
background:rgba(255,255,255,0.7);
padding:0;
z-index:100;
}
.worksArea .slick-prev
{
left:0;
}
.worksArea .slick-next
{
right:0;
}
@media screen and (max-width:767px) {
.worksArea .slick-prev{
padding-left:8px;
}
.worksArea .slick-next{
padding-right:8px;
}
}
.worksArea .slick-prev:after,
.worksArea .slick-next:after{
position: absolute;
top:37%;
width:10px;
height:10px;
border-top: 1px solid #333;
border-right: 1px solid #333;
content: "";
display:block;
}
@media screen and (max-width:767px) {
.worksArea .slick-prev:after,
.worksArea .slick-next:after{
top:50%;
margin-top:-6px;
width:12px;
height:12px;
}
}
.worksArea .slick-next:after{
left:0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.worksArea .slick-prev:after{
right:0;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.memberSlide{
width: 3000px;
margin-left:0;
animation: memberslide 30s linear infinite;
}
@keyframes memberslide {
0% {transform: translate(0,0);}
100% {transform: translate(-100%,0);}
}
.memberSlide-clone{
top: 0;
left: 0;
transform: translate(100%,0);
animation: memberslideclone 30s linear infinite;
}
@keyframes memberslideclone {
0% {transform: translate(100%,0);}
100% {transform: translate(0,0);}
}
.memberSlide li{
width: 200px;
padding:0 25px;
}
.memberSlide li .img{
height: 200px;
}
.memberSlide li .img img{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height:auto;
transform:translate(-50%,-50%);
}
/*contactArea*/
.contactArea{
width:100%;
background: url("../images/common/bg-contact.jpg") center no-repeat;
background-attachment:fixed;
height:680px;
background-size:cover;
overflow: visible;
padding: 50px 0;
}
.spContent .contactArea,
.tabContent .contactArea{
background-attachment: inherit;
background-position: center !important;
}
@media screen and (max-width:980px){
.contactArea{
height:auto;
padding: 50px 0;
background-attachment: inherit;
background-position: center !important;
}
}
.contactAreaIn{
top: 50%;
left: 0;
width: 100%;
transform: translate(0,-50%);
}
@media screen and (max-width:980px){
.contactAreaIn{
position: static;
transform: translate(0,0);
font-size: 1.6rem;
}
}
.contactAreaIn .txtBox{
width: 45%;
}
@media screen and (max-width:980px){
.contactAreaIn .txtBox{
width: 100%;
margin-bottom: 30px;
}
}
.contactAreaIn .txtBox .info{
margin-left: 40px;
}
@media screen and (max-width:980px){
.contactAreaIn .txtBox .info{
font-size: 1.2rem;
margin-bottom: 10px;
}
}
.contactAreaIn .txtBox .icon{
width: 20px;
margin-right: 20px;
margin-left: -40px;
}
.contactAreaIn .form{
width: 50%;
}
@media screen and (max-width:980px){
.contactAreaIn .form{
width: 100%;
}
}
.contactAreaIn .form .inputBlock{
width: 47.5%;
}
@media screen and (max-width:767px){
.contactAreaIn .form .inputBlock{
width: 100%;
}
.contactAreaIn .form .inputBlock:first-child{
margin-bottom: 10px;
}
}