/*//////////ここはレスポンシブにするレイアウトのCSS //////////*/
/*//////////覚書：@media記述はCSSの一番最後に //////////*/
html,
body,
#wrapper {
	height: 100%;
}
#wrapper {
    min-height: 100%;
    height: auto !important;
    position: relative;
    overflow: hidden;
    color: #333;
}
body {
    background-color: #fff;
}
@media only screen and (min-width: 769px)and (max-width: 1023px)  {
.container, .fafafa .container_m, .f8f8f8 .container_m { 
	width: auto;
}
#home #header_img {
	max-height: 500px;
}
#header_img {
	max-height: 420px;
}
#reseller #header_img .header_pic p {
  color: #666;/*文字は白に*/
}
}
@media only screen and (min-width: 769px)and (max-width: 1000px)  {
	.navDrawr ul li {
	font-size: 78%;
}
}
/*//////////ここはスマホ横からiPad mini縦にするレイアウトのCSS //////////*/
@media only screen and (min-width: 568px) and (max-width: 768px){/*-.-.-.-.スマホ横からiPad mini縦-.-.-.-.*/
    .container, .fafafa .container_m, .f8f8f8 .container_m {
	width: auto;
        padding-left:5%;
        padding-right:5%;
}
	header .headerTop{
	padding-top:10px;
	margin-top:-10px;
}
#home #header_img .header_pic h1 {
        font-size: 120%;
        font-weight:bold;
        margin-bottom: 15px;
    }
	#home .no_display {
		display:none;
	}
.navDrawrBtn span::before {
		font-size:28px;
		top:20%;
	}
.headerTop #logo {
    width: 15%;
    max-width:100px;
	padding-top:15px;
float: right;
	}
#shop a {
	clear:both;
	line-height: 1.2em;
	padding: 10px;
    margin:10px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	font-weight:normal;
	display:none;
}
#shop .no_display {/*スマホでは決して表示させてやらねぇ...*/
display:none;
}
#header_img .header_pic {
		top: 0px;
	} 
.box_2_3rd {
        margin-top:-20px;
    }
.box_2,.box_3,.box_2_3rd, #case_study .box_2_3rd, .flex .box_3, .box_4, .box_4_5th, .box_5 { 
		float: none;
        margin-left:auto;
        margin-right:auto;
		width: 94%;
        margin-top:15px;
	}
#handbook .box_5 a {font-size:180%}
#handbook .box_5 img {border:1px solid #999;}
#mugshot .box_5 {float:left;width:20%;margin:10px;}
#product_info .box_4 { /*取扱製品*/
		float: left;
		width: 46%;　
		background-color:#fff;
		margin:2%;
	}
	.flex .box_3  { 
		flex-direction: column;
	}
	.flex {
  display:flex;
  flex-flow:row wrap;
	}
.box_2 img,.box_3 img, .box_2_3rd img {
       margin-bottom:30px;
	}
	#header_img .box_3 {
        float:left;
        width:48%;
    }
#case_study .box_2_3rd {
	padding-right:0px;
	border-right:none;
}
    /*youtubeの設定変更*/
#youtube .box_3  {
		height:500px;
	}
#youtube .box_3 iframe {
		height:350px;
	}
#footer .box_2 .box_2 {
        float:left;
        width:49%;
    }
/*-.-.-.-.ぐぐぐぅのグーグルサーチボックス-.-.-.-.*/
  #google_search_box #wrap {
  margin-right:3px;
  margin-top:18px;
	  display: none;
    }
 #google_search_box input[type="text"]:focus {/*クリックした時に出てくる検索フィールド*/
  width: 210px;
  height:30px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
  background:#fff;
  padding:5px 0px;
  margin-top:-10px;
  z-index:999;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
}
@media only screen and (max-width: 480px) {
    /*-.-.-.-.-.-.-.-.-.-.-.-.スマホ縦-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.*/
.container,.fafafa .container_m, .pale_blue .container_m, .f8f8f8 .container_m  {
	width: auto;
}
.fafafa .nest, .pale_blue .nest, .f8f8f8 .nest {
	width: auto;
}
h1 {
        font-size:200%;
        line-height: 130%;
    }
h2,#nQuery h2, #snapgene h2 {
	font-size: 150%;
    line-height: 120%;
}
.h_small {font-size: 120%;margin-top:-25px;margin-bottom:30px;text-align: center;}
#snapgene .h_small {font-size: 110%;margin-top:-5px;}
#geneious .h_small {font-size: 110%;margin-top:-5px;}
#nquery .h_small {font-size: 110%;margin-top:-5px;}
#home .h_small {font-size: 110%;margin-top:-5px;}

#main .button_2 a, #seminar #header_img .button_2 a, #header_img .button_mitsumori a, #snapgene .button_2 a, #geneious .button_2 a,#products #header_img .button_2 a {border-radius: 12px;font-size:110%;font-weight: bold;}
	
	.no_display, #product_info {/*-.-.-.-.決して表示させてやらねぇ-.-.-.-.*/
        display: none;
    }
header .headerTop{
	padding-top:5px;
}
#wrapper {
        positon:relative;
		padding-top:0px;
        z-index:100;
	}
.headerTop #logo {
    width: 23%;
    max-width:120px;
	float:right;
	left:50%;
	padding-top:18px;
}
#shop a {
	clear:both;
	padding: 8px;
    margin:10px 10px 10px 15px;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	font-weight:normal;
	display:none;
}
/*-.-.-.-.ぐぐぐぅのグーグルサーチボックス -.-.-.-.*/
  #google_search_box #wrap {
  margin-right:-2px;
  margin-top:18px;
display:none;	  
    }
 #google_search_box input[type="text"]:focus {/*クリックした時に出てくる検索フィールド*/
  width: 260px;
  height:30px;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
  background:#fff;
  padding:5px 0px;
  margin-top:-8px;
  z-index:999;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
/*-.-.-.-.ヘッダー画像-.-.-.-.*/
#header_img, #home #header_img, #form #header_img, #reseller #header_img, #nQuery #header_img {
    height:260px;
}
#header_img .header_pic p{
    width:80%;
    left:50%;
    top:120px;
    font-size:110%;
    font-weight:bold;  
    line-height: 140%;
    }
#home #header_img .header_pic h1 {
        font-size: 120%;
        font-weight:bold;
        margin-bottom: 15px;
    }
    
#header_img .header_pic .h_img {
         width: 100%;
          object-fit: cover;
    }
#home #header_img .header_pic  {
  width:50%;
  max-widht:220px;
  height:100%;
    font-size:85%;
    font-weight:100;
   top: 0%;
  left: 0%;
  -ms-transform: translate(0%);
  -webkit-transform: translate(0%);
  transform: translate(0%);
  z-index:120;
    padding:30px;
    border-radius:0px; 
    line-height: 150%;
  }
#header_img .header_pic .button_1 a, #header_img .header_pic .button_2 a{
  padding       : 10px 5px;   /* 余白       */
  line-height   : 1.25em;         /* 1行の高さ  */
  margin: 5px 2px 5px 2px; 
  color:#fff;
	}
/*-.-.-.-.#main-.-.-.-.*/
	#main {
		margin-top:-80px;
	}
.box_2,.box_3, .box_2_3rd, #main ul, .flex .box_3,#case_study .box_2_3rd, .box_4, .box_4_5th, .box_5 { 
		float: none;
        margin-left:auto;
        margin-right:auto;
		width: 100%;
        margin-top:15px;
	}
.flex .box_3  { 
		flex-direction: column;
	}
#case_study .box_2_3rd {
	padding-right:0px;
	border-right:none;
}
#handbook .box_5 a {font-size:130%}
#handbook .box_5 img {border:1px solid #999;}
.slide {
		height:200px;
		padding-bottom: 30px;
	}
.box_2 img,.box_3 img {
       margin-bottom:30px;
	}
.box_2 .nest,.box_3 .nest {
       padding:10px 10px 5px 10px;
	}
.fright {
	float: none;
    clear:both;
    margin-left:auto;
    margin-right:auto;
}
.fright .img300,.nest img {
	width:96%; 
	max-width:460px; 
	padding:10px 0px 10px 0px;
}
    .flex {
  display:flex;
  flex-flow:row wrap;
	}	
#price h4, #form #price h4 {
    font-size:1.1rem;
}
#price h5, #form #price h5 {
    font-size:0.8rem;
    margin-bottom:15px;
    margint-top:10px;
		}
#nQuery th {
    font-size: 90%;
    line-height: 1.2em;
}
#products .box_5, #nQuery .box_5 {
		width: 100%;
	}
#products .box_5 img, #nQuery .box_5 img {
		float: none;
        margin-left:auto;
        margin-right:auto;
		width: 50%;
	}
#nQuery .box_5 img {
		width: 100%;
	}
#nQuery .box_5 img {
		float: none;
        margin-left:auto;
        margin-right:auto;
		width: 50%;
	}
#snapgene_tutorial p img {
    width:90%;
}
	.buy a {
	line-height: 0.8em;
	padding:10px;
    font-size:0.8rem;
}
#main .purple_BB ul li, #main .emerald_BB ul li {
    width:90%;
}
#footer {
		font-size:12px;
	}
#footer .box_2 .box_2 {
        float:left;
        width:49%;
    }}