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

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 100;
}
@font-face {
  font-family: "Helvetica Neue";
  src: local("Helvetica Neue Regular");
  font-weight: 200;
}


body{
	margin: 0;
	background-image: url("../img/bg_img.jpg");
	background-repeat: repeat;
    color: #483B37;
}

h2 {font-family: Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	font-size: 36px;
	text-align: center;
	margin: 15px 0px 0px 0px;
	padding: 0px;}
	
h3 {font-size: 21px;
	margin: 0px 0px 15px 0px;}

p {font-size: 15px;
　 line-height: 1.5;
   margin: 0px;}   
   
a.anchor{
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}

/*ヘッダー*/

.site-header{background: #028f80;
             display: flex;
			 padding-top:15px;
			 padding-bottom:15px;
			 position:fixed;
	         justify-content: space-between;
			 width:100%;
}
			 
.gnav_menu{display: flex;
           padding-right: 50px;}

.gnav_menu_item{margin-left: 20px;}

.gnav_menu_item a{text-decoration: none;
   				  font-size: 15px;
　                line-height: 1.5;
                  margin: 0px;
			      color: #fff;
} 

.gnav_menu_item a:hover{color: #a4cfc4;} 

nav ul{list-style: none; color: #fff;}


/*コンテンツ*/

.wrapper {max-width:1080px;
          margin: auto;
}		  

.content{background: #F6F3F0;
         padding: 100px 0px;
		 display: grid;
		 grid-template-columns: repeat(11, 1fr);
		 grid-gap: 20px;
		 }

.keyimg {grid-column-start: 1;
         grid-column-end: 12;}
.keyimg img{width: 100%;}


.site-logo{margin:8px 0px 0px 20px;}

/*トップページ*/

.deschome{margin-bottom: 20px;
         grid-column-start: 1;
         grid-column-end: 12;
		 font-feature-settings: "palt";
}

/*ラインナップページ*/

.desclup01{
         grid-column-start: 2;
         grid-column-end: 5;
		 background: #F9F9F9;
		 padding: 10px;
		 font-feature-settings: "palt";
}

.desclup02{
         grid-column-start: 5;
         grid-column-end: 8;
		 background: #F9F9F9;
		 padding: 10px;
		 font-feature-settings: "palt";
}

.desclup03{
         grid-column-start: 8;
         grid-column-end: 11;
		 background: #F9F9F9;
		 padding: 10px;
		 font-feature-settings: "palt";
}

.productimg img{width: 100%;}


.productname{font-size: 17px;}

.description_use{border:1px dotted;
                 padding: 10px;
				 font-size: 13px;}

.type_sengan{background: #67BCB3;
             font-size:14px;
			 color: #fff;
			 text-align: center;
			 width: max;
			 padding: 3px;
	}
	

.type_hokyu{background: #dcca2f;
             font-size:14px;
			 color: #fff;
			 text-align: center;
			 width: max;
			 padding: 3px;
	}	


.type_hofuku{background: #ea9ddb;
             font-size:14px;
			 color: #fff;
			 text-align: center;
			 width: max;
			 padding: 3px;
	}
	
/*ダウンロードページ*/	

.descdownload{
         grid-column-start: 2;
         grid-column-end: 11;
		 font-feature-settings: "palt";
		 
}

.download01{
         grid-column-start: 2;
         grid-column-end: 4;
		 max-width: 50%;
         margin:20px auto  0 auto;

}

.download02{
         grid-column-start: 4;
         grid-column-end: 6;
		 max-width: 50%;
         margin:20px auto  0 auto;
}

.download03{
         grid-column-start: 6;
         grid-column-end: 8;
		 max-width: 50%;
         margin:20px auto  0 auto;
}

.download04{
         grid-column-start: 8;
         grid-column-end: 10;
		 max-width: 50%;
         margin:20px auto  0 auto;
}


/*ページ内リンク*/

.pagelink{
　　　　　margin:20px 0px;
          grid-column-start: 2;
          grid-column-end: 11;}

.pagelink a{text-decoration: none;
            color: #483B37;
			display: inline-block;
}		

.pagelink a:hover{text-decoration: none;
            color: #BC9C95;
			display: inline-block;
}	  

.pagelink p.w-nomal{
  word-wrap: normal;
}

.pagetop{text-align: right;
　　　　 margin:20px 40px;
         grid-column-start: 2;
         grid-column-end: 11;}

.pagetop a{text-decoration: none;
            color: #483B37;
			}			 

.pagetop a:hover{text-decoration: none;
            color: #BC9C95;
}	


/*その他装飾*/

.border01{border-bottom:solid 1px #483B37;
　　　　　margin:0px 40px 40px 40px;
         grid-column-start: 2;
         grid-column-end: 11;}

/*フッター*/
.site-footer{background: #028f80;
             display: flex;
			 padding-left: 20px;
			 padding-top:15px;
			 padding-bottom:15px;
			 width:100%;
}

.site-footer p{font-size: 8px;
			          color: #fff;
}

/*スマートフォン*/

@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */

/*ダウンロードページ*/
.descdownload{
         grid-column-start: 2;
         grid-column-end: 11;
		 font-feature-settings: "palt";}

.download01{
         grid-column-start: 2;
         grid-column-end: 6;
		 max-width: 50%;
         margin: 0 auto;

}

.download02{
         grid-column-start: 6;
         grid-column-end: 12;
		 max-width: 50%;
         margin: 0 auto;
}

.download03{
         grid-column-start: 2;
         grid-column-end: 6;
		 max-width: 50%;
         margin: 0 auto;
}

.download04{
         grid-column-start: 6;
         grid-column-end: 12;
		 max-width: 50%;
         margin: 0 auto;
	}


/*ラインナップ*/

.descdownload{
         grid-column-start: 2;
         grid-column-end: 11;
		 font-feature-settings: "palt";}

.desclup01{
         grid-column-start: 2;
         grid-column-end: 11;
         margin: 0 auto;

}

.desclup02{
         grid-column-start: 2;
         grid-column-end: 11;
         margin: 0 auto;
}

.desclup03{
         grid-column-start: 2;
         grid-column-end: 11;
         margin: 0 auto;
}

.desclup04{
         grid-column-start: 6;
         grid-column-end: 11;
         margin: 0 auto;
	}


}


@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */

h2 {line-height: 120%;
font-size: 25px;}
	
h3 {font-size: 17px;}	

.deschome{margin-bottom: 20px;
         grid-column-start: 2;
         grid-column-end: 11;
		 font-feature-settings: "palt";
}
	
		
.descdownload{
         grid-column-start: 2;
         grid-column-end: 11;
		 font-feature-settings: "palt";}

.download01{
         grid-column-start: 2;
         grid-column-end: 12;
		 max-width: 50%;
         margin: 0 auto;

}

.download02{
         grid-column-start: 2;
         grid-column-end: 12;
		 max-width: 50%;
         margin: 0 auto;
}

.download03{
         grid-column-start: 2;
         grid-column-end: 12;
		 max-width: 50%;
         margin: 0 auto;
}

.download04{
         grid-column-start: 2;
         grid-column-end: 12;
		 max-width: 50%;
         margin: 0 auto;
	}
	
	
/*ハンバーガーメニュー*/

#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #fff;
  display: block;
  content: '';
  cursor: pointer;
  align: left;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

#nav-drawer {margin: 15px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;/*最前面に*/
  width: 70%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;/*最大幅（調整してください）*/
  height: 100%;
  background: #028f80;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(-105%);
  transform: translateX(-105%);/*左に隠しておく*/
}


#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .5;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

.gnav_menu{
  display: block;
           padding-right: 50px;}


.gnav_menu_item {
	padding :10px;
  display: block;
}
}	
		
		
/*ハンバーガーメニュー*/

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
}