@charset "UTF-8";
/******共通↓******/
.wrapper {
  width:100%;
}
.inner {
  margin:0 auto;
  width:970px;
}
body {
      font-family: -apple-system, 'Lucida Grande', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', "メイリオ", meiryo, "游ゴシック", YuGothic, sans-serif;
}
* {
  color:#333;
  font-size: 14px;
}
a {
  text-decoration: none;
  color:#333;
}
.nav li {
  float: left;
  margin: -10px 2px 10px;
}
.about {
  display: block;
  height: 61px;
  width: 157px;
  background: url(../images/img002.jpg) no-repeat;
}
.about:hover {
  background: url(../images/img002under.jpg) no-repeat;
}
.philosophy {
  display: block;
  height: 61px;
  width: 157px;
  background: url(../images/img003.jpg) no-repeat;
}
.philosophy:hover {
  background: url(../images/img003under.jpg) no-repeat;
}
.media {
  display: block;
  height: 61px;
  width: 157px;
  background: url(../images/img004under.jpg) no-repeat;
}
/*.media:hover {
  background: url(../images/img004under.jpg) no-repeat;
}*/
.business {
  display: block;
  height: 61px;
  width: 157px;
  background: url(../images/img005.jpg) no-repeat;
}
.business:hover {
  background: url(../images/img005under.jpg) no-repeat;
}
.recruit {
  display: block;
  height: 61px;
  width: 157px;
  background: url(../images/img006.jpg) no-repeat;
}
.recruit:hover {
  background: url(../images/img006under.jpg) no-repeat;
}
.contact {
  display: block;
  height: 61px;
  width: 161px;
  background: url(../images/img007.jpg) no-repeat;
}
.contact:hover {
  background: url(../images/img007under.jpg) no-repeat;
}
.cf::after {
  display: block;
  clear: both;
  content: "";
}
/*****追記*****/
.nav2 {
  display:none;
}
/*****追記*****/
/******共通↑******/
.magCont {
  padding-top:20px; 
}
.magImg {
  float: left;
  width: 25%;
  padding-left: 27px;
}
.magRight {
  float: left;
  width: 70%;
  margin-left: 20px;
}
.magUl li{
  float: left;
  padding: 0 15px 0 0;
}
.magSub {
  font-weight: bold;
  padding-bottom: 10px;
}
.magTtl {
  font-size: 30px;
  font-weight: bold;
  padding-bottom: 10px;
}
.magTxt {
  line-height: 22px;
  margin-bottom: 20px;
}
.magTtlImg {
  padding-top:20px; 
}
/******共通↓******/
.footer {
  background: #d3dce8;
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-top: 50px;
}
/******共通↑******/




/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
/*↓↓↓↓レスポンシブ↓↓↓↓*/
/*↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓*/
@media screen and (max-width:970px){
.footer {
    width: 970px;
    margin: 50px auto 0;
}

}



/**********************/
/*****タブレット版*****/
/**********************/
@media screen and (max-width:768px){
  
/******共通↓******/
.wrapper{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.inner{
  width: 100%;
}
.rogo img {
  width: 100px;
}
.nav ul {
  text-align: center;
}
.main {
  padding-top:20px;
}
.nav li {
  float: none;
  display: inline-block;
}
.about,
.philosophy,
.media,
.business,
.recruit,
.contact{
    height: 43px;
    width: 110px !important;
    background-size: contain;
}
.about:hover,
.philosophy:hover,
.media:hover,
.business:hover,
.recruit:hover,
.contact:hover {
  	background-size: contain;
}
/*****追記*****/
.nav {
  display:none;
}
.nav2 {
  display:block;
}
.nav2 li {
 float:left;
 width: 16.5%;
 text-align: center;
 padding: 0px 1px 0 0px;
}

.nav2 a {
  display:block;
  font-weight:bold;
  font-size:4.375vw;
}
.nav2 a img {
  width: 100%;

}

 ul {
    padding: 0 10px;
}

.nav2 a img:hover {
  border-bottom:solid 1px #333;
}
.border img{
  border-bottom: solid 1px #333;
  box-sizing:border-box;
}
/*****追記*****/
.mainImg img{
  width: 100%;
}
/******共通↑******/

.magRight {
    width: 50%;
}
.magImg {
    width: 240px; 
}
.magUl li:nth-child(1){
  padding-bottom:15px; 
}
.magUl img {
    width: 140px;
}
.magUl li {
    padding: 0;
    width: 50%;
}
.magTtlImg {
    padding-top: 50px;
}
/******共通↓******/
.footer {
  font-size: 12px;
  width: 100%;
}
/******共通↑******/


}



/********************/
/******スマホ版******/
/********************/
@media screen and (max-width:640px){
/******共通↓******/
.wrapper{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.inner{
  width: 100%;
}
.rogo {
  text-align:center;
  border-bottom:solid 1px #333;
  margin: 0 0 12px 0;
}
.rogo img {
  width: 60px;
}
ul {
    padding-left:20px;
}
.nav ul {
  text-align: center;
}
.nav li {
  float: none;
  display: inline-block;
}
.nav li a{
  width: 150px;
}
.mainImg img{
  width: 100%;
}
/********追記********/

.rogo img {
    width: 50px;
}
.rogo {
    text-align: center;
    border-bottom: solid 1px #333;
    margin: 0 0 2px 0;
}

.nav2 li {
  background:url(../images/li_line.png) no-repeat 100% 40%;
  width: 16%;
  text-align: center;
  padding: 0px 1px 0 0px;
}
.border img{
  border-bottom: solid 1px #333;
  box-sizing:border-box;
}
.nav2 li:last-child {
  background:none;
}
.magTxt {
  text-align: left;
}
/********追記********/

/******共通↑******/

.magImg {
  float: none;
  width: 100%;
  padding-left: 0px;
  display: block;
  text-align: center;
}

.magRight {
  float: none;
  width: 100%;
  margin-left: 0px;
  text-align: center;
  padding: 0 10px;
  box-sizing: border-box;
}
.magUl li{
  padding: 0 ;
  width: 50%;
}
.magUl img{
  width: 120px;
}
.magUl li:nth-child(1){
  padding-bottom:15px; 
}
.magSub {
  padding-top:10px; 
}
.magCont {
  padding-bottom: 25px;
}
.magTtlImg {
    padding-top: 50px;
}


/******共通↓******/
.footer {
  font-size: 12px;
  width: 100%;
}
/******共通↑******/
}