@charset "UTF-8";
/* CSS Document */

/*====================
PCを基本設計にする
 - 1280px〜：大型PC
 - 960px〜1279px：小型PC
 - 600px〜959px：タブレット
 - 480px〜599px：スマートフォン横
 -〜479px：スマートフォン縦

====================*/


 

body{
   background-image: url("img/bg3.jpg");    /* 背景画像指定 */
	background-size: 100%;/*サイズの指定*/
	
 }



#container{
	  max-width: 1280px;
}

#main{
	margin-top: 100px;
	text-align:center;
}

h1{
	font-size: 1.5em;
	
	letter-spacing :2px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	background-color:rgba(0,0,0,0.60);
	padding: 10px;
	width:inherit;
	
}


 .tiles{
   display:flex;/* 横一列表示 */
   flex-wrap:wrap;/* 折り返す */
   list-style:none;
   margin:0 5%;
   padding:0;
 justify-content:space-between;
	 
 }
.tile{
    margin:1% auto;
	position:relative;/* maskのための記述 */
   justify-content: center;/*中央に配置 */
}

.tiles .tile {
  text-align: left;
  opacity: 0.99;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05);
}



.tiles .tile:before {
  content: "";
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.9) 100%);
  width: 100%;
  height: 50%;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  transition-property: top, opacity;
  transition-duration: 0.3s;
;
	}

.tiles .tile img {
  display: block;
  max-width: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tiles .tile .details{
  font-size: 16px;
  padding: 25px;

  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
	 }

 
.tiles .tile .details span {
  display: block;
  opacity: 0;
  position: relative;
  top: 100px;
  transition-property: top, opacity;
  transition-duration: 0.3s;
  transition-delay: 0s;
}

.tiles .tile .details .title {
  line-height: 1.5;
  font-weight: 600;
  font-size: 17px;
}
.tiles .tile:focus:before,
.tiles .tile:focus span, .tiles .tile:hover:before,
.tiles .tile:hover span {
  opacity: 1;
}
.tiles .tile:focus:before, .tiles .tile:hover:before {
  top: 50%;
}
.tiles .tile:focus span, .tiles .tile:hover span {
  top: 0;
}
.tiles .tile:focus .title, .tiles .tile:hover .title {
  transition-delay: 0.15s;
}
.tiles .tile:focus .info, .tiles .tile:hover .info {
  transition-delay: 0.25s;
	
}

address{
color:#AAAAAA;
width:80%;
}



/* 〜479px：SP縦
------------------------------ */
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
#main{
	margin-top: 80px;
	text-align:center;
}

h1{
	font-size: 1.3em;
	letter-spacing :2px;
	font-family: "ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
	background-color:rgba(0,0,0,0.60);
	padding: 5px;
	width:inherit;
	
}
}