@charset "utf-8";
@import url("http://fonts.googleapis.com/earlyaccess/notosansjapanese.css");

/*for clearFix*/
.cf:after { 
   display: block ;
   height: 0 ;
   visibility: hidden ;
   clear: both ;
   content:".";
}
/ 追加 MacIE 5 と WinIE 7 向け /
.cf {
   display: inline-block ;
}
/*MacIE \*/
* html .cf {
 height: 1em ;
}
.cf {
 display: block ;
}
body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 margin: 0;
 padding: 0;
}



li,ul,ol { 
 margin: 0;
 padding: 0;
}

table {
 border-collapse: collapse ;
 border-spacing: 0 ;
}

fieldset,img { 
 border: 0 ;
}

address,caption,cite,code,dfn,em,strong,th,var {
 font-style: normal ;
 font-weight: normal ;
}
strong{
    font-weight: bold;
    color: #b22222;
}
ol,ul,li {
 list-style: none ;
}

caption,th {
 text-align: left ;
}

h1,h2,h3,h4,h5,h6 {
 font-size: 100% ;
 font-weight: normal ;
}
h2 {
	font-size: 120%;
    background: #b22222;
    color: #fff;
    padding: 10px 6px;
    margin-bottom: 20px;
}

q:before,q:after {
 content:'';
}

abbr,acronym {
 border: 0 ;
}

a:focus{ outline: none ; }

/*基本*/
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	list-style: none;
	font-size: 100%;
	font-weight: 200;
	font-style: normal;
	transition:0.2s;
}*
body{
	color:#666;
	background:#FFEEC7;
	font-size:16px;
}
html,body,input,select,textarea{
	font-family:'Noto Sans Japanese',"メイリオ","Meiryo",arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
}

a{
	text-decoration:none;
	color:#fff;
}
a:hover{
	opacity: 0.5;

}
.right{
	text-align: right;
}
.cl-b {
	clear: both;
}

header div{
	margin: 0 auto;
	background: #8B0000;
	padding: 4px 0px;
}
header div h1{
	text-align: center;
	padding:6px;
	font-size:19px;
}
header div h2{
	text-align: center;
	color:#fff;
}
div.container{
	width:1000px;
	margin: 0 auto;
}
figure{
	text-align: center;
}
.relative{
    position: relative;
    width: 1000px;
    margin: 0 auto;
}
.absolute{
	position: absolute;
	bottom: 40px;
	left: 0;
	font-size: 27px;
	color:#B22222;
	width:100%;
	padding:20px;
	background: rgba(255,255,255,0.5);
	margin: 0 auto;
	display: block;
}
.absolute p{
	font-weight: bold;
	font-size: 35px;
	text-align: right;
}
nav{

}
nav ul li a{
	color:#fff;
	text-align: center;
	display: block;
	padding: 15px 6px;
	border: 1px  solid;
	background: #B22222;
	width: 100%;
}
nav ul li.dog1{
	background-image:url(img/main.jpg) ;
}
span.bold{
    display: block;
    font-weight: bold;
}
ul.pankuzu{
	display:flex;
	margin:10px 0px;
}
p.txt-c{
	text-align: center;
}
ul.pankuzu li:nth-of-type(n+2):before {
    content:'>';
    display:inline-block;
    margin:0 5px;
 }
section{
	display: flex;
	margin: 0px auto;
	width: 1000px;
}
section a{
	color:#666;
}
article{
	text-align: left;
	width:680px;
	float: left;
	margin :0px 0px 19px 0px;
}
article h3{
	margin: 24px 0px 6px 0px;
	font-size:28px;
	color:#B22222;
}
article h3.font{
	font-size: 24px;
	color: #8B0000;
	text-align: center;
	border-bottom: 1px dashed #B22222;
}
article p{
	margin :0px 0px 14px 0px;
}

article ul.thumb h4 {
	text-align: center;
	margin: 0 0 10px 0;
	padding: 0;
	border-bottom: 1px dashed #B22222;
	font-size:20px;
	color:#B22222;
}
h4 {
	text-align: center;
	margin: 0 0 10px 0;
	padding: 0;
	border-bottom: 1px dashed #B22222;
	font-size:24px;
	color:#B22222;
}
article ul.thumb {
    margin: 40px auto 0;
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

article ul.thumb li {
	width: 220px;
    display: flex;
    align-items: flex-start;
    margin: 10px 0 0 0;
    background: #FFF none repeat scroll 0% 0%;
    padding: 10px 10px 10px;
    border-radius: 5px;
}
section article ul.pankuzu h3{
	text-align: center;
	margin: 0 0 10px 0;
	padding: 0;
	border-bottom: 1px dashed #B22222;
	font-size:20px;
	color:#B22222;
}
article h3.border{
	
	text-align: center;
	margin: 0 0 10px 0;
	padding: 0;
	border-bottom: 1px dashed #B22222;
	font-size:20px;
	color:#B22222;
}
span{
	border-bottom: 1px solid;
	border-width: 1px;
	border-color: #B22222;
}
h3  {
	font-size: 30px;
}
aside{
	color:#fff;
	background: #B22222;
	float: right;
	width:400px;
	text-align: center;
	margin:24px 0px 20px 0px;
	border-radius: 7px;
}
aside a{
	color:#fff;
}
aside h3{
	padding: 0 0 0 8px;
}
aside p{
	margin: 6px auto;
}
h3{
	text-align: left;
	margin: 5px 0px 0 0px;
}
h3 span{
	border-bottom:1px dashed #fff;
}
ul.thumb{
	text-align: left;
	margin: 5px 0px 25px 0px;
}
ul.thumb li {
	margin: 5px 0px 15px 25px;
}
ul.thumb span{
	border-bottom:1px dashed #fff;
}
ul.border{
	border-bottom:solid 6px #FFEEC7;
}
ul.category{
	text-align: left;
	margin: 5px 0px 25px 0px;
}
ul.category  h3 span{
	border-bottom:1px dashed #fff;
}
ul.category li,
ul.recommend_list li {
	margin: 5px 0px 15px 25px;
}
ul.category li span,
ul.recommend_list li span {
	border-bottom:1px dashed #fff;
}
ul.category li a{
	border-bottom:1px dashed #fff;
}

ul.recommend_list {
	text-align: left;
	margin: 5px 0px 25px;
}

footer{
	background: #B22222;
	margin: 0 auto;
}
ul.footer{
	display: flex;
	width:1000px;
	margin: 0 auto;
}
ul.footer li{
	width:100%;
	text-align: center;
	padding: 10px 0px 0px 0px;
	border-right: 1px dotted #FFEEC7;
}
ul.recommend_list h3 {
	font-size: 30px;
}
footer p{
	text-align: center;
	color:#fff;
	padding: 15px;
}

@media screen and (min-width: 641px){
	/* ------------------ PC用スタイル ------------------ */
	nav ul,figure i,section{
		width: 1000px;
	}
	article{
		/*width: 700px;*/
	}
	aside{
		width:280px;
	}
	nav{
    display: flex;
    margin: 0 auto;
}
	nav ul{
		display:flex  !important;
	}
	nav ul li{
		margin-left:1px;
		width: 21%;
	}
	nav .menu_open{
		display: none;
	}
	nav ul li:first-child{

		margin-left:0;
	}
	header div,footer div{
		width: 100%;
	}

}
@media screen and (max-width: 640px){
	/* ------------------ スマートフォン用スタイル ------------------ */
	nav ul,figure i,section,nav .menu_open{
		width: 100%;
	}

	*{
  		max-width:100%;
 	}

.relative{
    position:relative;
    width: 100%;
}
.absolute {
	bottom:0px;
	height: 7px;
}
.absolute p {
	font-size:10px;
}
ul.footer {
	display: none;
}
	article,aside{
		width: 100%;
		margin-bottom: 15px;
	}
	nav ul,section{
		flex-direction: column; /* 縦並び */
	}
	nav ul{
		padding: 0 0 1.5%;

	}
	nav ul li{
		width: 100%;
		margin-top: 5px;
		width:100%;
	}
	nav ul li a{
	}
	header div,footer div{
		width: 97%;
	}
	.menu_open{
		text-align: center;
	}
	.menu_open:hover{
	cursor: pointer;
	opacity:0.5;
}	
}