@charset "UTF-8";

body{
	margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
	background: #0c0000 ;
	width:100%;
}
img {
	max-width: 100%;
	height: auto;
}
br.pc{
  display: none;
}
br.tab{
  display: none;
}
h1{
	margin: 0 auto;
	text-align: center;
	background-color: #643250;
	font-size:1.3em;
	padding:10px 0;
	color:#fff;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}
h2{
	margin: 0 auto;
	text-align: center;
	background-color: #671016;
	font-size:1.1em;
	padding:10px 0;
	color:#fff;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}
h3{
	margin: 0 auto;
	text-align: center;
	font-size:1.1em;
	padding:10px 0;
	color:#5c494f;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}
.h-ttl{
 	margin: 0 auto;
	text-align: center;
	background-color: #003e78;
	font-size:1.3em;
	padding:15px 0;
	color:#000; 
  width: 100%;
}
a:link {
  color:#000; 
  text-decoration: none; 
}
a:visited {
  color:#000; 
  text-decoration: none; 
}
a:hover {
  color:#8d6d51; 
  text-decoration: none; 
} 
a:active {
  color:#8d6d51; 
  text-decoration: none; 
} 
.b{
  font-weight: bold;
}

/*effect*/
.container {
  width:540px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
}
.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}
.empty-box {
  height: 300px;
  margin-bottom: 20px;
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.element {
  margin-bottom: 20px;
}
.element img {
  width: 100%;
  vertical-align: top;
} 


nav {
	background-color: #4c3623;
	color: #FFFFFF;
}
nav ul {
	margin:0;
	list-style-type: none;
	display: flex;
	justify-content: space-around;
	padding:10px 5px 20px 5px;
}
nav ul li {
	padding: 5px;
	font-size:0.8em;
  border-bottom:dotted 1px #fff;
}
nav ul li a{
	text-decoration: none;
}
nav ul li a:link { 
	color: #fff; 
}
nav ul li a:visited { 
	color: #fff; 
}
nav ul li a:hover { 
	color: #a68933; 
	opacity:0.8;
}
nav ul li a:active { 
	color: #fff; 
}
	
/*header*/
header .header-innner .header_pc {
	display: none;
}
header .header-innner .header_sp {
	display: block;
}
header p{
	margin:0;
}
.sp_header{
  padding:10px 10px 30px 10px;
}

/*news*/
.news {
	color: #000000;
  background: #fce8e0;
}
.news .news-innner{
	background-color: #fce8e0;
  padding:40px 0;
  font-size: 0.8em;
  width: 90%;
  margin: 0 auto;
}
.news p{
	margin:0;
}
.news .caution2{
  margin-bottom:0;
}
.news .news-innner .caution{
  color:#671016;
  margin-bottom: 10px;
  text-align: center;
  font-size: 1.1em;
}
.news .news-innner .caution-b{
  color:#671016;
  font-weight:bold;
  text-align: center;
  font-size: 1.3em;
}
.news .bn{
  background: #f4da8f;
  border-radius: 10px;
  padding:10px;
  max-width: 400px;
  text-align: center;
  margin-bottom: 20px;
}
.news ul{
  padding:20px;
}

/*sec01*/
.sec01 {
	color: #5c494f;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
  background: #fff;
}
.sec01 .sec01-innner{
	background-color: #ffffff;
}
.sec01 p{
	margin:0 0 10px 0;
	padding:5px;
	font-size: 0.8em;
	line-height:1.7em;
}
.sec01-p img{
  width: 70%;
}
.sec01 .sec01-innner .sec01-p{
	text-align: center;
	padding:60px 0 0 0;
  width: 90%;
  margin: 0 auto;
}
.sec01 .sec01-innner .sec01-txt{
	padding:10px 0 30px 0;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}
.sec01 .sec01-innner .sec01-logo{
	display: flex;
	-webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
	-ms-flex-pack: distribute;
	justify-content: space-around;	
	margin:0 auto;
}
.sec01 .sec01-innner .sec01-ttl{
	font-weight:bold;
	font-size:0.9em;
  text-align: left;
}

/*sec02*/
.sec02 .sec02-innner{
	background-color: #ffffff;
	padding:30px 0;
  font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;
}
.sec02 .sec02-innner .sec02-photo-out{
    width:100%;
    margin:0;
    padding:0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;  
    -webkit-box-pack: center;
    -ms-flex-pack: center;
   justify-content: center;
}
.sec02 .sec02-innner .sec02-photo{
	text-align: center;
  margin-bottom: 20px;
  width:46%;
  border:solid 2px #f1e4be;
  position: relative; 
  margin-left:5px;
}
.sec02 .sec02-innner .sec02-photo img{
	width:100%;
}
.sec02 .sec02-innner .sec02-photo p{
	margin: 5px 5px 0 5px;
}
.sec02 .sec02-innner .sec02-photo .cap{
	font-size:0.8em;
	margin:0 5px !important;
  line-height: 1.5em;
  padding:10px 0;
  color: #755f1e;
  text-align: left;
  border-top:dotted 2px #f1e4be;
}
.sec02 .copy{
  font-size: 0.8em;
  text-align: center;
}

/*article*/
.article-ttl{
	margin: 0 auto;
	text-align: center;
	background-color: #003e78;
	font-size:1.3em;
	padding:5px 0;
	color:#ffffff;
}
.article h4{
	color:#005a5a;
	font-size:1.2em;
	margin:10px auto;
  background: #fff;
  padding:5px;
  border-radius: 5px;
  text-align: center;
  font-weight: normal;
}
.article .article-out{
	background-color:#005a5a;	
	padding:10px 0;
  color:#fff;
}
.article .article_innner{
	margin:10px auto;
	width:90%;
  padding: 10px 0;
}
.article .article_innner p{
	margin:0;
  text-align: center;
}
.article .article_innner .caution{
	font-size:0.7em;
}
.article .article_innner .haikei-i{
  font-size: 0.7em;
  text-align: right;
}
.article .price{
  font-size:0.7em;
  margin-left:5px;
}

/*footer*/
.footer{
	background: #5c494f;
	margin:0;
	font-size: 0.8em;
	padding:5px 10px;
	text-align: center;
  color: #fff;
}
.footer a:link { 
  color: #fff;
  text-decoration: none;
}
.footer a:visited { 
  color: #fff;
}
.footer a:hover { 
  color: #fff;
	opacity:0.8;
}
.footer a:active { 
  color: #fff;
}


/*common*/
.common-innner{
	background-color: #ffffff;
	padding:10px;
}

/* ########### 640px以上 ########### */
@media screen and (min-width: 640px){
  body{
    margin: 0 auto;
  }
  br.sp{
    display: none;
  }
  br.pc{
    display: block;
  }
  br.tab{
    display: block;
  }
	/*nav*/
	nav ul {
		width: 80%;
		margin:0 auto;
	}
	nav ul li {
		font-size:1.0em;
	}

	/*header*/
	header .header-innner {
		margin:0 auto;	
	}
	header .header-innner .header_sp {
		display: none;
	}
	header .header-innner .header_pc {
		display: block;
		margin:0 auto;
    text-align: center;
    background:#0c0000;
    padding:20px;
  }
  header .header-innner .header_pc .header_pc_photo img{
    max-width: 95%;
  }
  .sp_header{
    padding:0;
  }
  
  /*news*/
	.news .news-innner{
		padding:30px 20px;
	}
  .news .news-innner .caution{
    text-align: right;
  }
  .news .news-innner .caution-b{
    font-size: 1.3em;
  }
  
  /*sec01*/
	.sec01{
		margin-top:0;
	}
	.sec01 .sec01-innner{
		margin:0 auto;
		display: flex;
		-webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
		padding:30px 5px;
	}
	.sec01 .sec01-innner .sec01-p{
		width: 50%;
		padding:20px 0 15px 10px;
	}
	.sec01 .sec01-innner .sec01-txt{
		width: 50%;
		font-size: 1.0em;
		line-height: 1.0em;
    padding-right:10px;
	}
  .sec01 p{
	  line-height:1.5em;
  }
  .sec01-p img{
    width: 90%;
  }
	
	/*sec02*/
	.sec02 .sec02-innner{
		margin:0 auto;
		padding:50px 5px;
	}
  .sec02 .sec02-innner .sec02-photo .cap{
    text-align: center;
  }
  .sec02 .sec02-innner .sec02-photo{
    margin-left:10px;
  }

 	/*article*/
  .out-bottom{
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;  
    margin:20px 0;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
  #article,#article2{
    width:47%;
    background: #005a5a;
  }
 .article .article-out{
    margin:0 auto;
  }
  .article h4{
    font-size: 1.2em;
    width:25%;
  }
  .article .article_innner{
    padding:10px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width:95%;
  }
  .article .article_innner p{
    width:60%;
    text-align: left;
  }
  #article4 .article_innner p,#article5 .article_innner p{
    margin: 0 auto;
    width:auto;
    text-align: center;
  }
  .article{
    background: #fff;
  }
  #article2 .onsale{
    width:100% !important;
    margin-left:20px;
  }
  .article .inner-bottom{
    width:70%;
  }

  /*common*/
	.common-innner{
		margin:0 auto;
		text-align: center;
	}

}

/* ########### 1200px以上 ########### */
@media screen and (min-width: 1200px){
  h1{
    font-size:1.8em;
  }
  h2{
    font-size:1.6em
  }
	header .header-innner {
		margin:0 auto;	
	}
  header .header-innner .header_pc .header_pc_photo img{
    max-width: 80%;
  }
  header .header-innner .header_pc {
    width:80%;
    background: #fff;
    padding:0;
  }
  .h-ttl{
    width: 100%;
  }
  nav{
    width:80%;
    margin:0 auto;
  }
  br.tab{
    display: none;
  }
  /*news*/
  .news{
    width:80%;
    margin:0 auto 60px auto;
  }
	.news .news-innner{
		padding:60px 30px;
    font-size:1.0em;
	}
  .news .news-innner .c-out{
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;  
    margin:20px 0;
  }
  .news .news-innner .c-out .c-innner{
    width:80%;
    margin:0 auto;
    padding:0 20px;
  }
  
 /*main*/
  .main{
    width:80%;
    margin:0 auto 30px auto;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    background: #fff;
    border-top:dotted 3px #f1e4be;
 }
 
  
  /*sec01*/
  .sec01{
    width:40%;
    margin:0 auto 30px auto;
  }
	.sec01 .sec01-innner .sec01-txt{
		line-height: 1.3em;
		font-size: 1.4em;
	}
	.sec01 .sec01-innner{
		padding:60px 30px 0 30px;
    width: 100%;
    display:block;
	}
	.sec01 .sec01-innner .sec01-p{
		width: 60%;
		padding:20px 0;	
  }
	.sec01 .sec01-innner .sec01-txt{
		width: 100%;
		padding:10px 20px 10px 10px;
	}
	.sec01 .sec01-innner p{
		font-size: 0.8em;
		line-height: 1.3em;
	}
	.sec01 .sec01-innner .sec01-logo{
		-webkit-box-pack: start;
    -ms-flex-pack: start;
   	justify-content: flex-start;
	}
	.sec01 .sec01-innner .sec01-logo .sec01-logo-innner{
		margin-left:10px;
	}
  .sec01-p img{
    width: 90%;
  }
  .sec01 .sec01-innner .sec01-ttl{
    font-size:1.0em;
  }


	/*sec02*/
  .sec02{
    width:60%;
    background: #fff;
    margin:0 auto 60px auto;
  }
	.sec02 .sec02-innner{
		padding:60px 30px 0 30px;
    width:90%;
	}
  .sec02 .sec02-innner .sec02-photo-out-pc{
    margin: 20px;
  }
  .sec02 .sec02-innner .sec02-photo{
    width: 46%;
    margin-bottom: 30px;
  }
  .sec02 .sec02-innner .sec02-photo .cap{
    font-size: 0.8em;
  }
  .sec02 .copy{
    font-size: 1.0em;
  }
  

	/*article*/
  .out-bottom{
    width:80%;
    margin: 100px auto;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
     justify-content: space-between;
  }
	.article .article-out .article_innner{
		font-size:1.2em;
		margin:20px auto 0 auto;
    width: 80%;
	  padding:20px 0;
  }
  #article2 .article-out .article_innner{
    width:80%;
  }
  .article h4{
    margin:10px auto 20px auto;
    width:30%;
 }
  .article .inner-bottom{
    width:60%;
  }
  #article,#article2{
    width:48%;
  }
  #article4,#article5{
  width:80%;
  margin: 100px auto;
}

  .footer{
    width:100%;
    margin:0 auto;
  }
	/*common*/
	.common-innner{
		padding:1.6em 0;
	}
	.common-innner .common-txt{
		line-height: 1.2em;
		font-size: 1.2em;
		padding:5px;
	}
	.common-innner .common-txt h3{
		margin: 0 auto;
		width: 80%;
		text-align:center;
	}
	.common-innner .common-txt + .common-txt{
		padding-top: 1em;
	}
  .caution-b{
    margin-left:100px;
  }

}