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

/* Common
   ------------------------------------------------------  */
 .ttl_h2{
	 background:#f9f1df;
	 padding:20px 0;
	 text-align:center;
	 display: block;
	 width:100%;
	 } 


#subnav ul li{
	background:#ded4bc;
	width:20%;
	float:left;
	cursor:pointer;
	}
#subnav ul li a{
	display: block;
	padding:12px 0;
	border-left:1px solid #fff;
	text-align:center;
	color:#000;
	font-size:14px;
	font-size:1.4rem;
	font-weight:bold;
	}

	
#subnav ul li a:link    { text-decoration:none; }
#subnav ul li a:visited { text-decoration:none; }
#subnav ul li a:active  { text-decoration:none; }
#subnav ul li a:hover   { text-decoration:none; background:#eccc81; }


#subnav ul li.current {
	position: relative;
	background: #eccc81;
}

#subnav ul li.current:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(236, 204, 129, 0);
	border-top-color: #eccc81;
	border-width: 10px;
	margin-left: -10px;
}

.photo_list .ph{
	text-align:center;
	padding:5px 0;
	margin:0 auto;
	}
/*
 .photo_list ul li a .photo{
	height:230px;
	width:180px;
	display:table;
	margin:0 auto;
}
	
.photo_list ul li a .photo .inner{
	display:table-cell;
	 vertical-align: middle;
	 text-align:center;
}

.photo_list ul li a .photo .inner img{
	max-height:200px;
	max-width:150px;
	}


	
.photo_list ul li a h4{
	padding:0;
	margin: 0;
	color:#000;
	display: block;
	font-weight:bold;
	border-bottom:1px dotted #ccc;
	}
.photo_list ul li a p{
	font-size:14px;
	font-size:1.4rem;
	padding:5px 0;
	display: block;
	text-align:left;*/
	
.photo_list ul{
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap:         wrap;
	}
.photo_list ul li{
	margin: 5px;
	border:1px solid #ccc;
		text-align:center;

}

.photo_list ul li a{
	display:block;
	height:100%;
	padding:10px;
	}
	
.photo_list ul li a p{
	color:#000;
	font-size:14px;
	font-size:0.8rem;
	margin: 0 0 10px;
    padding: 5px 0;
	border-top:1px dotted #ccc;
	text-align:center;
	}

.photo_list ul li a h4{
	color:#000;
	font-weight:bold;
	border-bottom:1px dotted #ccc;
	text-align:center;
	padding:5px 0;
	margin:0 0 10px 0;
	}
	
.img95{
	width: 95%;
	}
	
.img90{
	width: 90%;
	}
	
.img85{
	width:85%;
	}	
	
.img75{
	width: 75%;
	}	
	
.img70{
	width: 70%;
	}	
	
.photo_list .ph{
	display:block;
	vertical-align: middle;
	text-align:center;
	max-width: 200px;
	max-height: 200px;
	margin:0 auto; 
	margin-top:8px;
	}
.photo_list .ph .bg{
	display:table-cell;
	vertical-align:middle;
	width: 200px;
	height: 160px;
	margin:0 auto; 
	border:1px solid #ddd;
	box-shadow:2px 1px 8px -3px #414841;
	-moz-box-shadow:2px 1px 8px -3px #414841;
	-webkit-box-shadow:2px 1px 8px -3px #414841;
	}
/* PC
   ------------------------------------------------------  */
@media screen and (min-width:961px){
	
 	 
 #subnav ul li.dummy{
	display: none;
	}
	
.photo_list{
	width:100%;
	margin:40px auto 0 auto;
	}
	  
.photo_list h3{
	font-size:30px;
	font-size:3.0rem;
	font-weight:bold;
	padding:10px 0;
	margin-bottom:10px;
	text-align:center;
	background:url(../img/itm_title_pc.png) no-repeat;
	background-position:center;
	}
	
.photo_list .txt{
	text-align:center;
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
	margin-bottom:20px;
	}
	/*	
.photo_list ul{
	overflow: hidden;
	display: block;
	}

.photo_list ul li{
	width: 25%;
	display: block;
	float:left;

	}
.photo_list ul li a{
	display: block;
	margin:10px;
	padding:10px;
	text-align:center;
	border:1px solid #ccc;
	font-size:14px;
	font-size:1.4rem;
	color:#000;
	height: 380px;
	
	}*/
	
/* ここから修正！ */

.photo_list ul li{
	width: 32%;
}


}
   
/* Tablet
   ------------------------------------------------------ */
@media screen and (min-width:641px)and (max-width:960px){

	 
	 
#subnav ul li.dummy{
	display: none;
	}
.photo_list{
	width: 98%;
	margin:40px auto 20px auto;
	}  

.photo_list h3{
	font-size:30px;
	font-size:3.0rem;
	font-weight:bold;
	padding:10px 0;
	margin-bottom:10px;
	text-align:center;
	background:url(../img/itm_title_pc.png) no-repeat;
	background-position:center;
	}
	
.photo_list .txt{
	text-align:center;
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
	margin-bottom:20px;
	}


/* ここから修正！ */
.photo_list ul{
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap:         wrap;
	}
.photo_list ul li{
	width: 46%;
	margin: 8px;
	border:1px solid #ccc;
}

.photo_list ul li a{
	display:block;
	height:100%;
	padding:10px;
	}
	
.photo_list ul li a p{
	color:#000;
	}

.photo_list ul li a img{
	width: 100%;
	}
	
	.photo_list ul li a img.img95{
	width: 95%;
	}
	
.photo_list ul li a img.img90{
	width: 90%;
	}
	
.photo_list ul li a img.img85{
	width:85%;
	}	
	
.photo_list ul li a img.img75{
	width: 75%;
	}	
	
.photo_list ul li a img.img70{
	width: 70%;
	}
}
   
   
/* SmartPhone
   ------------------------------------------------------  */
@media screen and (max-width:640px){	

 .ttl_h2 img{
	 height:60px;
	 }



#subnav ul li{
	/*background:#eccc81;*/
	width:50%;
	float:left;
	}
#subnav ul li a{
	display: block;
	padding:12px 0;
	border-left:1px solid #fff;
	border-bottom:1px solid #fff;
	text-align:center;
	color:#000;
	font-size:12px;
	font-size:1.2rem;
	}
	
#subnav ul#recipe li.current {
	background: #eccc81;
}

#subnav ul li.current:after {
display: none;
}
	
.photo_list{
	width: 98%;
	margin:20px auto 20px auto;
	} 
	
.photo_list h3{
	font-size:22px;
	font-size:2.2rem;
	font-weight:bold;
	padding:10px 0;
	margin-bottom:10px;
	text-align:center;
	background:url(../img/itm_title_sp.png) no-repeat;
	background-size:auto;
	
	background-position:center;
	}
	
	
/*.photo_list ul li{
	width: 50%;
	display: block;
	float:left;

	}
	
.photo_list ul li a{
	display: block;
	margin:5px;
	padding:5px;
	text-align:center;
	border:1px solid #ccc;
	font-size:14px;
	font-size:1.4rem;
	color:#000;
	height:580px;
	} 
	


#subnav ul li.current:after {
	display: none;
}


.photo_list .ph{
	display:block;
	vertical-align: middle;
	text-align:center;
	max-width: 200px;
	max-height: 200px;
	margin:0 auto; 
	}*/
.photo_list .ph .bg{
	display:table-cell;
	vertical-align:middle;
	width: 200px;
	height: 160px;
	margin:0 auto;


	}
	
#content .photo_list .ph .bg{
	padding: 0;
	}
	
	
/* ここから修正！ */
.photo_list ul{
	 display: -webkit-flex; /* Safari */
  display: flex;
   -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
 /* display: -webkit-flex;

  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;*/

	}
.photo_list ul li{
	width:100%;
	border:1px solid #ccc;

}

.photo_list ul li a{
	display:block;
	height:100%;
	padding:10px;
	}
	
.photo_list ul li a p{
	color:#000;
	}


.photo_list ul li a img{
	width: 100%;
	}	
	
.photo_list ul li a img.img95{
	width: 95%;
	}
	
.photo_list ul li a img.img90{
	width: 90%;
	}
	
.photo_list ul li a img.img85{
	width:85%;
	}	
	
.photo_list ul li a img.img75{
	width: 75%;
	}	
	
.photo_list ul li a img.img70{
	width: 70%;
	}

	
	}