@charset "utf-8";

/* ヘッダー部分
------------------------------- */
/* ########### 833px以下 ########### */
@media (max-width: 833px) {
#header{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	z-index: -1;
	opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
	top:0;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background-color:  rgba(76, 73, 62, 0.85);
    /*動き*/
	transition: all 0.3s;
}
#header {
	text-align: center
}
/*アクティブクラスがついたら透過なしにして最前面へ*/
#header.panelactive{
	opacity: 1;
	z-index:998;
}

/*ナビゲーションの縦スクロール*/
#header.panelactive .main-nav{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 998; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* ヘッダーインナー設定 */
	.h_wrapper {
	display: block;
	width: 100%;
    margin-left: auto;
	margin-right: auto;

}
/* ロゴ設定 */
h1.pc{display: none
	}
h1.hei{
	width: 0px;
	margin-top: 0px;}
	
	
/* メニュー設定 */	
	nav{display: none
	}
	
/*矢印の位置と向き*/
.has-menu > a::before {
content: '\f078';
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 10px
}
.has-menu > a:hover{
background: #06B4EA;
}
/* プルダウンメニュー出現状態 */
nav li.has-menu:hover > a{background: #06B4EA;}
	
/* プルダウンメニュー形状 */
nav li.has-menu ul li {	}
nav li.has-menu ul li a {
	align-items: center;
	font-size: 15px;
    color: #fff;
    text-decoration: none; 
    background-color:  rgba(76, 73, 62, 0.7);
	padding-top: 12px;
	padding-bottom: 8px;
	padding-left: 34%;
	margin-bottom: 0px;
	text-align: left;
	letter-spacing: 0rem;
	font-weight: normal;
	box-sizing: border-box;
}
nav li.has-menu ul li img{
	width: 24px;
	height: 24px;
	margin-right: 8px
}
nav li.has-menu ul li a:hover, 
nav li.has-menu ul li a:active{
color: #fff;
background: crimson;
}

/* ----取扱商品---- */
.accordion {
  min-width: 300px;
  margin: 0 auto;
  padding: 0;
}
.accordion a{
  text-align: center;
	color: #fff;
	font-family: "M PLUS 1p";
}

.accordion .ac-content {
  margin: 0;
  padding: 0;
}
.accordion input {
  display: none;
}
.accordion label {
  display: block;
  cursor: pointer;
  padding: 30px;
  color: #fff;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
}
/*矢印の位置と向き*/
.tori ::after {
content: '\f078';
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-left: 10px
}
.com{
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.accordion label:hover {
  background: #06B4EA;
}
.accordion .ac-cont {
  transition: 0.2s;
  height: 0;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
  box-sizing: border-box;
}
.accordion input:checked + .ac-cont {
  height: auto;
  padding: 10px 0px 10px 0px;
  box-sizing: border-box;
}
.ac-cont {width: 100%;display: block;
}
.ac-cont a{width: 100%;
display: block;
text-align: left;
padding-left: 15%;
	padding-top: 12px;
	padding-bottom: 12px
}
.ac-cont a:hover {
  background: crimson;
}
.ac-cont img {
  width: 24px;
	height: 24px;
	margin-right: 8px
}
}
/* ########### 834px以上 ########### */

@media (min-width: 834px) {
.accordion{
	display: none}	
/* メニュー高さ可変 */
/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
#header.HeightMin{
	top:-100px;
    z-index: 998;
	height:70px;
	animation: DownAnime 0.5s forwards;
	background-color:  rgba(76, 73, 62, 0.85);
}
.HeightMin h1.pc{
	display: none}	
@keyframes DownAnime{
  from {
  	opacity: 0;
	transform: translateY(-170px);
  }
  to {
  	opacity: 1;
	transform: translateY(0);
  }
}
/* メニュー */	
.HeightMin nav ul li a {
padding-top: 25px;
padding-bottom: 22px;
}
/* プルダウンメニュー */
.HeightMin nav li.has-menu ul{
	left:0;
    top: 70px;
}
/* メニュー高さ可変ここまで */	
	
/* ヘッダー設定 */
#header {
	width: 100%;
	height: 100px;
	position: sticky;
	top:0px;
	padding-left:0%;
	padding-right:0%;
	transition: all 0.8s ease;
	z-index: 998;/*最前面へ*/
	text-align: center;
	
}
/* ヘッダーインナー設定 */
	.h_wrapper {
	display: flex;
    justify-content: space-between;
    margin-left: auto;
	margin-right: auto;
		height: 100px;
}
/* メニュー設定 */
nav{text-align: center;
	color: #fff;
	font-family: "M PLUS 1p";
	}
nav ul{
	display: flex;
	justify-content: center;
	}
nav ul ul{
	display:block
	}
nav ul li{
position: relative
	}
nav ul li a {
display: block;
color: #fff;
padding-top: 36px;
transition: all .3s;
padding-left: 30px;
padding-right: 30px;
}
nav ul li a:hover {
color: #fff;
background-color: #06B4EA
}	
/* プルダウンメニューのあるメニュー */
.has-menu > a::before {
content: '\f078';
font-family: "Font Awesome 5 Free";
font-weight: 900;
padding-right: 10px
}
.has-menu > a:hover{
background: #06B4EA;
}
/* プルダウンメニュー出現状態 */
nav li.has-menu:hover > a{background: #06B4EA;}
	
/* プルダウンメニュー */
nav li.has-menu ul{
 position: absolute;
	left:0;
    top: 100px;
	z-index: 4;
	width: 240px;
	visibility: hidden;
	opacity: 0;
	transition: .2s;
}
nav li.has-menu:hover > ul,
nav li.has-menu ul li:hover > ul,
nav li.has-menu:active > ul,
nav li.has-menu ul li:active > ul{visibility: visible;
	opacity: 1;}
	
/* アクション */
nav li.has-menu ul li{
	overflow: hidden;
	height: 0;
	transition: .3s;
	}
nav li.has-menu:hover ul li{
	overflow: visible;
	 height: 44px;}	
	
/* プルダウンメニュー形状 */		
nav li.has-menu ul li a {
	align-items: center;
	font-size: 15px;
    color: #fff;
    text-decoration: none; 
    background-color:  rgba(76, 73, 62, 0.7);
	padding-top: 12px;
	padding-bottom: 8px;
	padding-left: 15px;
	margin-bottom: 0px;
	text-align: left;
	letter-spacing: 0rem;
	font-weight: normal;
	box-sizing: border-box;
}
nav li.has-menu ul li img{
	width: 24px;
	height: 24px;
	margin-right: 8px
}
	
nav li.has-menu ul li a:hover, 
nav li.has-menu ul li a:active{
color: #fff;
background: crimson;
}
/* お問合せメニュー */
.con-menu a{
background-color: crimson;}
.con-menu a:hover {transition: all .3s; 
background-color: #06B4EA}
}

/* ########### 834pxから1199pxまで ########### */
@media screen and (min-width: 834px) and (max-width: 1199px) {
/* メニュー高さ可変 */
/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/
.HeightMin h1.hei{
	width: 250px;
	margin-top: 15px}

.HeightMin nav ul li a {
padding-bottom: 25px;
}
/* メニュー高さ可変ここまで */		
/* ヘッダーインナー設定 */
.h_wrapper {
max-width: 95%;
}
/* ロゴ設定 */
h1.pc{
	width: 180px;
	margin-top: 25px;}
h1.hei{
	width: 0px;
	margin-top: 0px;}
	
/* メニュー設定 */	
nav ul li a {
padding-bottom: 44px;
font-size: 0.85rem;
letter-spacing:0.1rem;
}
}	
/* ########### 1200px 以上 ########### */
@media screen and (min-width:1200px) {
/* メニュー高さ可変 */
/*HeightMinというクラス名がついたら高さを小さく、上部固定に*/

.HeightMin h1.hei{
	width: 300px;
	margin-top: 10px}	
/* メニュー高さ可変ここまで */	
	
/* ヘッダーインナー設定 */
.h_wrapper {
max-width: 1100px;
}
/* ロゴ設定 */
h1.pc{
	width: 210px;
	margin-top: 22px;}
h1.hei{
	width: 0px;
	margin-top: 0px;}
	
/* メニュー設定 */	
nav ul li a {
font-size: 1rem;
letter-spacing:0.3rem;
padding-bottom: 41px;
}
	
}