@charset "UTF-8";


#intro {
  width: 100%;
  margin: 74px auto 0;
  background-image:url(../img/company/company_bg.jpg);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  text-align: center;
  padding: 150px 0;
}


.ttl2 {
  position: relative;
  margin: 0 auto;
  padding: 0;
  font-family: "Marcellus", serif;
  color: #fff;
  text-align: center;
  font-weight: normal;
  font-size: 48px;
  font-size: 4.8rem;
  line-height: 1.3;
}


.ttl2 .sub {
  display: block;
  margin: 5px auto 0;
  font-family: "Noto Sans JP";
  font-weight: normal;
  font-size: 14px;
  font-size: 1.4rem;
}


@media screen and (max-width: 768px) {
#intro {
  margin: 67px auto 0;
  padding: 40px 0;
}
 


.ttl2 {
  position: relative;
  margin: 0 auto;
  padding: 0;
  color: #fff;
  text-align: center;
  font-weight: normal;
  font-size: 30px;
  font-size: 3rem;
  line-height: 1.3;
}


.ttl2 .sub {
  display: block;
  margin: 5px auto 0;
  letter-spacing: 0;
  font-weight: normal;
  font-size: 13px;
  font-size: 1.3rem;
}
}



#company {
  position: relative;
  background:  #fff;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  /*padding: 60px 0 0;*/
}


#company h3.en {
   font-family: "Marcellus", serif;
   color: #a0a0a0;
   font-size: 30px;
   text-align: left;
   margin-bottom: 60px;
}


#company h3.jp {
   font-family: "Noto Serif JP", serif;
    color: #000;
    padding-bottom: 20px;
    font-size: 24px;
   text-align: left;
}

@media screen and (max-width: 768px) {
#company h3.en {
   font-size: 24px;
   text-align: center;
   margin-bottom: 20px;
}


#company h3.jp {
    padding-bottom: 0;
    font-size: 22px;
   text-align: center;
}
}



#company .vision {
  width: 100%;
  margin: 30px auto;
  background-image:url(../img/company/vision.jpg);
  background-repeat:no-repeat;
  background-position:right top;
  background-size:cover;
  text-align: center;
  padding: 0 0 150px;
}

    


#company .vision .inner {
   width: 80%;
   max-width: 1100px;
   margin: 0 auto;
   padding-top: 140px;
}


#company .vision .inner .left {
   width: 50%;
   float: left;
}


#company .vision .inner .left p {
    margin-top: 25px;
    line-height: 1.8;
    text-align: left;
}





@media screen and (max-width: 1757px) {
/*#company {
  padding: 30px 0 0;
}*/
#company .vision {
  margin: 10px auto;
  padding: 0 0 70px;
}
#company .vision .inner {
   width: 80%;
   max-width: initial;
   margin: 0 auto;
   padding-top: 80px;
}
}

@media screen and (max-width: 1062px) {
#company .vision {
   margin: 10px auto;
  padding: 0 0 70px;
  background-position:80% 0;
}
#company .vision .inner .left {
   width: 70%;
}

}


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

#company {
  padding: 0;
  margin: 0;
}

#company .vision {
  width: 100%;
  margin: 0 auto;
  background-image:none;
  background: #f6f6f9;
  padding: 20px;
}

#company .vision .inner {
   width: 100%;
   padding-top: 10px;
}


#company .vision .inner .left {
   width: 100%;
   float: none;
}
#company .vision .inner .right {
   width: 100%;
   margin: 20px auto;
}

#company .vision .inner .right img {
   width: 100%;
   height: auto;
}

}





#company .profile {
  width: 100%;
  margin: 80px auto;
  background: #fff;
}

    


#company .profile .inner {
   width: 80%;
   max-width: 1100px;
   margin: 0 auto;
   text-align: left;
   line-height: 1.8;
}


#company .profile .inner .left {
   width: 50%;
   padding-right: 50px;
   float: left;
}

#company .profile .inner .right {
   width: 50%;
   padding-left: 50px;
   float: right;
}

#company .profile .inner .line {
   border-bottom: solid 1px #ccc;
   padding: 20px 0;
}

#company .profile .inner .line .tit {
   width: 20%;
   float: left;
   font-weight: bold;
   color: #222;
}
#company .profile .inner .line .text {
   width: 80%;
   float: right;
}

#company .profile .inner .line .text span {
   padding-left: 30px;
   font-size: 80%;
}

@media screen and (max-width: 1137px) {
#company .profile .inner .left {
   padding-right: 20px;
}

#company .profile .inner .right {
   padding-left: 20px;
}

}

@media screen and (max-width: 990px) {
#company .profile {
  margin: 40px auto;
}
#company .profile .inner {
   width: 70%;
}
#company .profile .inner .left {
   width: 100%;
   padding-right: 0;
   float: none;
}

#company .profile .inner .right {
   width: 100%;
   padding-left: 0;
   float: none;
}

}

@media screen and (max-width: 768px) {
#company .profile .inner {
   width: 90%;
}

#company .profile .inner .line .tit {
   width: 25%;
}
#company .profile .inner .line .text {
   width: 75%;
}
}



#company #map {
  width: 100%;
   padding: 80px 0 100px;
}

    


#company #map .inner {
   width: 80%;
   margin: 0 auto;
}

a.map {
       position:relative;
       display: block;  
       font-family: "Noto Serif JP", serif;
       margin: 50px auto 0;
       text-decoration: none;
       width: 300px!important; 
       height: 50px;
       line-height:50px; 
       text-align:center; 
       color:#fff; 
       background: #a37e39;
       font-size: 16px; 
        -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   
}



a.map:hover {
	opacity: 0.7;
        cursor:pointer;
}


a.c_btn {
       position:relative;
       display: block;  
       font-family: "Noto Serif JP", serif;
       margin: 50px auto 0;
       text-decoration: none;
       width: 300px!important; 
       height: 50px;
       line-height:50px; 
       text-align:center; 
       color:#fff; 
       background: #a0a0a0;
       font-size: 16px; 
        -webkit-transition: all 0.5s ease-in-out;
   -moz-transition: all 0.5s ease-in-out;
   -o-transition: all 0.5s ease-in-out;
   -ms-transition: all 0.5s ease-in-out;
   transition: all 0.5s ease-in-out;
   
}



a.c_btn:hover {
	opacity: 0.7;
        cursor:pointer;
}


#access {
    width: 100%;
    position: relative;
    height: 600px;
    overflow: hidden;
}



#office_map{
  position: relative; 
  width: 100%;
  height: 600px;
 
}

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

#company #map {
  padding: 30px 0;
}

    


#company #map .inner {
   width: 90%;
}

#access {
    width: 100%;
    position: relative;
    height: 400px;
    overflow: hidden;
}



#office_map{
  position: relative; 
  width: 100%;
  height: 400px;
 
}

}



#company .message {
  width: 100%;
  margin: 0 auto;
  background: #f6f6f9;
}

    


#company .message .inner {
   width: 80%;
   max-width: 1100px;
   margin: 0 auto;
   padding: 100px 0;
}


#company .message .inner .left {
   width: 50%;
   padding-right: 50px;
   float: left;
}


#company .message .inner .left p {
    margin-top: 25px;
    line-height: 1.8;
    text-align: left;
}


#company .message .inner .left p.name {
    margin-top: 35px;
    line-height: 1.8;
    text-align: right;
    font-size: 135%;
}

#company .message .inner .left p.name span.name_s {
    font-size: 75%;
    padding-right: 30px;
}


#company .message .inner .right {
   width: 50%;
   padding-left: 50px;
   float: right;
}

#company .message .inner .right img {
   width: 100%;
   height: auto;
}


@media screen and (max-width: 768px) {
#company .message {
  margin: 0 auto 10px;
  padding: 20px 0;
}


#company .message .inner {
   width: 90%;
   padding: 20px 0;
}


#company .message .inner .left {
   width: 100%;
   padding-right: 0;
   float: none;
}
#company .message .inner .right {
   width: 100%;
   padding-left: 0;
   margin-top: 35px;
   float: none;
}


}