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

@media screen and (max-width : 971px ){

  /*画面幅が780pxまでの時*/
/*formatting style*/
* {
	font-style: normal;
	margin: 0px;
	padding: 0px;
}

/*toppage articlepage*/
/*body style*/
img{
max-width: 100%;
height: auto;
width /***/:auto;
}
	
body {
	font-family: sans-serif;
	font-size: 75%;
	line-height: 1.6em;
	color: #000;
	margin: 0px auto;
	width: 100%;
}

hr {
	border-top: 2px solid #666;
	top: 10px;
	width: 100%;
}
	
/*link style-------------*/
.wrap {
	overflow: hidden;
}
a:link {
	color: #000;
	text-decoration: none;
}
a:visited {
	color: #000;
}
a:hover {
	color: #999;
	text-decoration: underline;
}

/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 500ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
	
/*heade style------------*/


header {
	width: auto;
    height: auto;
    display: block;
    padding-top: 20px;
	margin-right: auto;
	margin-left: auto;
	background-color: #716F6F;
}

 
.header p{
   
	 font-size: 14px;
    font-style: normal;
    line-height: 1.5em;
    font-weight: normal;
    color: #000;
	 padding: 50px auto 10px;
	text-align: center;
  font-family: "Arial Black", Gadget, sans-serif;
}	
	

.header  h1{
	margin: auto;
	text-align: center;
	width: 40%;
	hight: auto;
	background-color: #716F6F;
}

 

 
.header  ul li .toggle  {
	
	cursor:pointer;
}


.header ul li .inner.child {
	
	display: none;
	
}

.head {
		display: none;
		}	

/*メイン*/
.main {
	height: auto;
	width: 100%;
	margin: 20px auto ;
	padding-bottom: 20%;
	
	
}
	


/*slick・topビュー*/	
#main_img {
	z-index: 1;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	width: 100%;
}
#main_img li {
	height: auto;
	width: 100%;
	margin: 0px auto 20px;
	text-align: center;
}
.main_img {
	z-index: 1;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	width: 100%;
}
.main_img li {
	height: auto;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.main .container #breadcrumb {
	float: left;
	width: 80%;
	margin-bottom: 50px;
	color: #999;
	margin-left: 60px;
}
.main .container a {
	color: #666;
}

.main .container #breadcrumb ul li {
	height: 20px;
	width: auto;
	float: left;
	margin-left: 10px;
}

.main .container {
		width: 100%;
		height: auto;
	margin-top: 5%;
	}

.main .container li  {
	margin-top: auto;
	height: 210px;
	width: 200px;
	float: left;
	list-style: none;
	text-decoration: none;
	margin-bottom: auto;
}




.main .container li p {
	list-style: none;
	font-size: 12px;
	text-align: justify;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 10px;
}





	
/*コンセプト*/
.main .concept {
    height: auto;
    width: 90%;
    margin: 50px auto 80Px;
   
	 
}
	.main .concept h1{
	font-size: 16px;
	color: #333;
	font-family: "Sawarabi Mincho";
	text-align: center;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	margin-top: 20px;
		
	}	
	.main .concept h2{
	font-size: 14px;
	color: #333;
	font-family: "Sawarabi Mincho";
	text-align: center;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	margin: 30px auto;
		
	}	
	.main .concept p {
	font-size: 14px;
	font-family: "Sawarabi Mincho";
	line-height: 2em;
	margin-top: 40px;
	color: #333;
	text-align: left;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 40px;
}

/*お知らせ*/
.main .concept .infobox {
	height: 20em;
	border: 1px none #CCC;
	overflow: auto;
	width: 90%;
	margin: auto;
	padding-top: 30px;
	
}
.main .concept .infobox li {
	width: 90%;
	font-family: Arial, Helvetica, sans-serif;
	height: auto;
	border-bottom: 1px dotted #CCC;
	text-align: left;
	line-height: 3em;
		padding-left:1em;
	text-indent:-1em;

	
}

.main .concept .infobox li a:link {
	color: #312F2F;
	text-decoration: underline;
}



/*topページ　product*/
	
 .reindex {
	height: auto;
	width: 100%;
	margin: 20px auto;
	
}
 .reindex h1 {
	font-size: 20px;
	color: #333;
	font-family: "Sawarabi Mincho";
	text-align: center;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
padding-bottom: 20px;
}
	.reindex ul{
	padding-bottom: 20px;
	}
.reindex li {
	
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 2%;
}
	

	

.reindex li img{
	width: 80%;
	margin:10px auto; 
   transition:1s all;
}
.reindex li img:hover{
  transform:scale(1.2,1.2);
  transition:1s all;
}	
	
.reindex li p {
		
		margin-left : 10px ;
	}
	
.sakka {
	width: 100%;
		height: auto;
	margin:  auto;
	}
	.sakka ul{
	padding-bottom: 20px;
	}
	.sakka li {
	padding-bottom: 20px;	
	list-style: none;
	margin: 2% auto  ;
 }
	
.sakka li img{
	width:  90%;
	height: auto;
	margin: auto  5%; 
	
	}
	
.sakka li h2 {
		font-size: 14px;
	  margin: auto 5%;
font-family: Arial, Helvetica, sans-serif;
	font-weight: lighter;
	}
	
.sakka li p {
	font-size: 11px;
	margin : 1.5% 5%;
		
	
	}
	
	
	
	/*toppageコラムリスト*/
.main .list {
	padding-top: 50px;
	clear: both;
	width: 100%;
	height: auto;
	margin-left: -4.5%;
	margin-right: auto;
}
.main .list h1 {
    font-size: 18px;
	color: #333;
	font-family: "Sawarabi Mincho";
	text-align: center;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	margin-left: 10%;
	margin-right: auto;
	margin-bottom: 20px ;
	}

	.main .list ul{
		width:90%;
		margin: auto 14%;
	}		
 .main .list li {
	display: inline-block;
	height: auto;
	width: 45%;
	
	
}
 .main .list li  img {
	padding-left: 0px;
	border: 1px none #FFF;
}


.main .list li p {
	text-align: center;
	width: 90%;

}
 .main .list li p a {
	color: #000;
}




/*pagetop ボタン*/


#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
 
#pageTop a {
	display: block;
	z-index: 999;
	padding: 8px 0 0 8px;
	border-radius: 30px;
	width: 30px;
	height: auto;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
}
 
#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}


/*フッター*/
footer { 
	width: 100%;
	 clear: both;
	height: auto;
	background-color: #716F6F;
	text-align: left;
	margin:  auto ;
 
}
.footer {
	width: 90%;
	margin: 30px auto ;
padding-left:30px;
}


.footer ul {
	float: left;
	height: 220px;
	width: 50%;
}

.footer ul h2 {
	height: 30px;
	margin-top: 20px;
	margin-bottom: 10px;
	font-family: Arial, Helvetica, sans-serif;
}




.footer ul li {
	list-style: none;
	padding-left: 1%;
	width: 210px;
	font-size: 9px;
}
#linepng {
	display: none;
}

.footer ul li  {
	cursor: pointer;
}

.footer  ul .inner.child {
	display: none;
	height: auto;
	width: 210px;
	background-color: #716F6F;
}
.footer  li .inner.child li {
	text-align: left;
	height: 15px;
	width: auto;
	clear: both;
	float: left;
	margin-left: 10px;
	
}





#footer_lower {
    background-color: #716F6F;
    clear: both;
    height: 60px;
    width: auto;
	
	
}
#footer_lower address {
    width: 80%;
	text-alight: center;
    margin-right: auto;
	margin-left: auto;
	margin-top: 15px;
}

/*webfont*/

wf-sawarabimincho { font-family: "Sawarabi Mincho"; }

/*　ハンバーガーボタン　*/
.hamburger {
	display : block;
	position: fixed;
	z-index : 3;
	right : 13px;
	top   : 8px;
	width : 42px;
	height: 10px;
	cursor: pointer;
	text-align: center;
}
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 6px;
  background : #ccc;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
  top: 10px;
}
.hamburger span:nth-child(2) {
  top: 20px;
}
.hamburger span:nth-child(3) {
  top: 30px;
}

/* ナビ開いてる時のボタン */
.hamburger.active {
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition     : all 0.3s ease-in-out;
  transition        : all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay     : 0.6s;
  transition-delay        : 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform    : rotate(45deg);
  -o-transform     : rotate(45deg);
  transform        : rotate(45deg);
}
.hamburger.active span:nth-child(2){
  width: 0px;
}
.hamburger.active span:nth-child(1),
.hamburger.active span:nth-child(3){
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.hamburger.active span:nth-child(1){
  -webkit-transform: translateY(4px);
  -ms-transform    : translateY(4px);
  -o-transform     : translateY(4px);
  transform        : translateY(4px);
}

.hamburger.active span:nth-child(3){
  -webkit-transform: translateY(-16px) rotate(90deg);
  -ms-transform: translateY(-16px) rotate(90deg);
  -o-transform : translateY(-16px) rotate(90deg);
  transform    : translateY(-16px) rotate(90deg);
}


nav.globalMenuSp {
	position: fixed;
	z-index : 2;
	top  : 0;
	left : 0;
	color: #000;
	text-align: center;
	transform: translateX(100%);
	transition: all .9s;
	width: 100%;
	background-color: #fff;
}

nav.globalMenuSp ul {
	background: #ccc;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto;
}

nav.globalMenuSp ul li {
	list-style-type: none;
	padding: 0;
	width: 100%;
	border-bottom: 1px solid #fff;
	line-height: 3em;
	height: 60px;
	font-family: "Sawarabi Mincho";
}
nav.globalMenuSp ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
nav.globalMenuSp ul li:hover{
  background :#ddd;
}

nav.globalMenuSp ul li a {
  display: block;
  color: #000;
  padding: 1em 0;
  text-decoration :none;
}
nav.globalMenuSp ul li .toggle  {
	cursor: pointer;
}

nav.globalMenuSp ul li .inner.child {
	z-index: 2;
	display: none;
	background-color: #FFF;
	position: absolute;
	width: 100%;
	text-align: center;
	height: auto;
}
nav.globalMenuSp ul li .inner.child li {
	text-align: center;
	height: auto;
	width: auto;
	clear: both;
	float: none;
	margin-right: auto;
	margin-left: auto;
	font-size: 12px;
	font-weight: normal;
	line-height: 0.8em;
	font-family: "Sawarabi Mincho";
}
/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}
	
}