@charset "utf-8";

html,body,h1,h2,ul,li,img,p {
  margin:0;
  padding:0;
  line-height:1.0;
}

ul {list-style: none;}

a {text-decoration: none;}

img {vertical-align: bottom;}


/*body*/
body{
  font-size:16px;
}


/*container*/
.container {
  overflow:hidden;
  margin:20px auto;
  width:960px;
}

h1 {
  width:300px;
  margin:10px;
}

.unit {
  margin:0 auto;
  width:320px;
  float:left;
}

li {
  float:left;
  margin:10px;
}/*liにかければ、クラス名box必要ない！*/

.right {
  float:right;
}

/*footer*/
#pc {
  height:70px;
  padding:15px;
  color:#fff;
  background-color:#281605;
  text-align: center;
}

#sp {
  display: none;
}

/*ホバーアニメによるキャプション*/

li.big {
  width:300px;
  height:300px;
  position:relative;
  overflow: hidden;
}

.cap {
  width:100%;
  height:50%;
  padding:10px;
  background:rgba(0,0,0,0.3);
  position:absolute;
  top:100%;
  left:0;
  transition: 0.3s ease;
  color:#fff;
  box-sizing: border-box;
  z-index: 10;
}
/*  position:absolute;では、
z-index: 10;つけるのはルール！（省略できるけど…）*/

li:hover .cap{
  top:50%;
}


h2 {
  padding-bottom:5px;
  line-height:1.3;
  font-size:130%;
}

.cap p{
  line-height:1.5; 
}



li.middleportrait {
  width:140px;
  height:300px;
  position:relative;
  overflow: hidden;    
}

.middleportrait {
  width:100%;
  height:60%;
}

li:hover .middleportrait{
  top:40%;
}


li.middlelandscape {
  width:300px;
  height:140px;
  position:relative;
  overflow: hidden;    
}

.middlelandscape {
  width:100%;
  height:100%;
}

li:hover .middlelandscape{
  top:0;
}

.middleportrait h2 {
  padding-bottom:5px; 
  line-height:1.2;
  font-size:120%;
}

.middleportrait p {
  line-height:1.4;
  font-size:95%;
}


.middlelandscape h2 {
  padding-bottom:5px; 
  line-height:1.2;
  font-size:120%;
}

.middlelandscape p {
  line-height:1.4;
  font-size:95%;
}

li.small {
  width:140px;
  height:140px;
  position:relative;
  overflow: hidden;
}

.small {
  width:100%;
  height:100%;
}

li:hover .small{
  top:0;
}

.small h2 {
  padding-bottom:5px; 
  line-height:1.2;
  font-size:105%;
}

.small p {
  line-height:1.4;
  font-size:85%;
}

/*タブレット*/
@media screen and (max-width:767px) {

.container {
  margin:20px auto;
  width:640px;
}

h1 {
  width:300px;
  margin:10px;
  float:left;
}

.third {
  margin:0 auto;
  width:640px;
  float:left;
}

li {
  float:left;
  margin:10px;
}

#pc {
  display: none;
}

#sp {
  display:block;
  float:left;
  width:300px;
  height:300px;
  margin:10px;
  padding:0;
  background-color:#281605;
}

#sp p {
  color:#fff;
  line-height:300px;
  color:#fff;
  text-align: center;
}


}

/*スマートフォン*/
@media screen and (max-width:480px) {

.container {
  margin:20px auto;
  width:320px;
}

h1 {
  float:none;
}

.unit {
  margin:0 auto;
  width:320px;
  float:none;
}


#pc {
  display:block;
  height:50px;
  padding:15px;
}

#sp {
  display: none;
}

/*スマホのホバーアニメ解除*/

.cap {
  display:none;
}

}