@charset "UTF-8";

@font-face{
font-family:'Matricula Espanola';
src:local('Matricula Espanola'),
local('Matricula Espanola'),
url(font/MESPREG.ttf) format('truetype');
}

@font-face{
font-family:'Matricula Espanola';
src:url("commons/fonts/MESPREG.woff") format("woff"), url("font/MESPREG.ttf") format("truetype"), url("font/MESPREG.otf") format("opentype"), url("font/MESPREG.svg") format("svg");
font-style:normal;
font-weight:normal;
}

body,html{
margin:0;
padding:0;
width:100%;
height:auto;
z-index:0;
font-family:"游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
color:#333;
}


img{
max-width:100%;
height:auto;
width /***/:auto;
}
html{
min-height:100%;
position:relative;
}
#main{
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  
 background-image: url("../img/caihowBk.jpg");
  background-size: cover;
  background-position: center;
}



#top .topPc li{
width:162px;
height:112px;
float:left;
}

#top .topPc li a{
display: block;
width:162px;
height:112px;
}



#top .topPc li:first-child a:hover img,
#top .topPc li:last-child a:hover img{
display:none;
}

#top .topPc li:first-child a:hover{
background:url(../img/aboutBtn_hover.jpg) no-repeat left top;
background-size:contain;
}


#top .topPc li:last-child a:hover{
background:url(../img/contactBtn_hover.jpg) no-repeat left top;
background-size:contain;}







h1 {
display: block;
max-width: 348px;
width: 90%;
padding: 0 5%;
}

h1 img{
max-width: 348px;
width: 100%;
}


#footer{
margin:0 auto;
z-index:5;
width:100%;
bottom:0;
left:0;
right:0;
position:absolute;
text-align:center;
font-size:9px;
}








#header{
width:100%;
opacity:.9;
z-index:2;
background: rgba(47,70,81,.1);
}

.headIn{
margin:0 auto;
width:90%;
padding: 0 5%;
}

.headIn h1{
float:left;
padding: 0;
}

.headIn h1,.headIn h1 img{
width:100px;
padding:5px 0;
}

.headIn h1 a:hover{
opacity:.5;
transition:.5s;
}

.headIn .headPc{
float:right;
}

.headIn .headPc li{
float:left;

}

.headIn .headPc li a{
transition:.5s;
}

.headIn .headPc li a img{
height: 20px;
margin-top: 15px;
}

.headIn .headPc li a:hover{
opacity: .5;
transition:.5s;
}



.aboutBox,
.contactBox,
.worksBox{
margin:0 auto;
}


 h3{
 text-align: center;
 font-size: 12px;
 }
#aboutTxt h3,
#contactTxt h3{
margin:70px auto 0;
}


#aboutTxt h3 img,
#contactTxt h3 img,
#snsTxt h3 img{
margin-bottom:13px;
}

#history h3,
#snsTxt h3{
margin-bottom:74px;
}

#aboutTxt h3 img,
#history h3 img,
#contactTxt h3 img,
#snsTxt h3 img{
width:207px;
margin-bottom:0;
}

#history h3 img{
margin-bottom:4px;
}

.tgt{
display:block;
letter-spacing:3px;
font-size:13px;
margin:74px auto 0;
padding-bottom:170px;
text-align:center;
line-height:30px;
font-weight:bold;
height:auto;
overflow:hidden;
}


#history{
display:block;
height:auto;
padding-bottom:100px;
}

#history dl{
width:100%;
text-align:center;
font-size:13px;
}

#member dl{
letter-spacing:1px;
line-height:24px;
}



#history dl dt{
font-weight:bold;
}

#history dl dd{
padding:10px 0 60px;
}

.tgt span{
display:none;
float:left;
}

.tgt span.cur{
display:block;
}

#contactTxt span,
#snsTxt span{
display:inline-block;
border:1px solid #000;
float:none;
}

#contactTxt span a,
#snsTxt span a{
text-decoration:none;
color:#333;
display:block;
margin:0 auto;
padding:10px 20px;
transition:.5s;
}

#contactTxt span a:hover,
#snsTxt span a:hover{
color:#fff;
background:#2f4651;
transition:.5s;
}

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

#main{
 background-image: url("../img/caihowBk2.jpg");
  background-size:cover;
  background-repeat: no-repeat;
}


#top .topPc li{
width:50%;
height:auto;
float:left;
}

#top .topPc li a{
width:100%;
height:auto;
}

#top .topPc li:first-child a:hover img,
#top .topPc li:last-child a:hover img{
display:inherit;
}
#top .topPc li:first-child a:hover,
#top .topPc li:last-child a:hover{
background: none;
}

h1 {
display: block;
width: 80%;
padding: 0 10%;
}

}