@charset "utf-8";
/* CSS Document */
/* 目次
1. リンク関連
2.メニュー上のヘッダー部分　
3.メニュー（グローバルナビ）のスタイル (PC用)
4. バーガーメニュー（グローバルナビ）のスタイル (タブレット&スマホ用) 【注：メニュー部分だけ style.css で他のレスポンシブ関連はlayout.cssにある】
5.ヘッダー背景画像
6. メインのハコ系
7.h関連 + 文字・行間関連の装飾
8. テーブル 【注：フォームで使われてるテーブルは form_style.cssにある】
9. 背景色
10.ボタンいろいろ取り揃えてまっせ 
11.ページごとの設定【覚書：注文ページ、価格ページ、会社概要ページ、チュートリアルページズのデザインを微妙に変えた】
12. フッター
13. SmoothScroll  スムーズスクロールで上まで一気にワープじゃ
14.スクロールフェードイン...つまり、スクロールするとホワ〜ンと出るやつ
15.アコーディオン
16. スライドショー
17.タブ
18.動画
------------------------------------------------------------*/
/* 1.リンク関連
------------------------------------------------------------*/
a{
    color:#1467ED;
	text-decoration:none;
    padding-right:3px;
    padding-left:3px;
    transition:all 0.5s;
}
a:hover, .text_icon a:hover {
	border-bottom:none;
    color: #FF6700;
}
#home a {
color:#3C2167;
}
#toppage  .box_2 a {
color:#888;
}
#toppage .box_2 h2 {
text-align: center;
    margin-bottom: 10px;
}
#nQuery a { 
color:#37c2d6;
}
#snapgene a {
	color:#006280;
}
#geneious section a {
    color:#265791;
}
#home #main a:hover, #nQuery #main a:hover {
    color:#F6B544;
}
a:visited {
	opacity: 0.7;
}
a:hover img, video:hover, a h6:hover {
opacity:0.8;
}
a:hover img {
  transform:scale(1.02,1.02);
  transition:0.5s all;
}
#home #header_img a:hover img {
    opacity:1;
}
video:focus {
	outline:0;
}
#main a i {
    padding-right:3px;
    padding-left:3px;
}
/* 2.メニュー上のヘッダー部分　
------------------------------------------------------------*/
header {
	background-color: #fff;
}
header .headerTop{
	padding:10px 20px 0px 20px;
}
.headerTop #logo {
    width: 15%;
    max-width:120px;
	float: left;
	padding:10px 20px;
}
#shop a, .button_blue a{
	float:right;
	clear:left;
	text-decoration: none;
background: #FF6700;
    text-align: center;
	display: block;
	line-height: 1.2em;
	padding-right: 6px;
	padding-left: 6px;
	border:solid;
	border-color:#FF6700;
	padding:10px 20px;
	margin:10px 0;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	font-weight:bold;
	letter-spacing:1px;
	color: #FFF;
    border-width:1px;
}
#shop a:hover, .button_blue a:hover {
background:none;
	color: #FF6700;
	border-color:#FF6700;
    background-color: #FFFFFF;
}
/* #home
-------------------------------------*/
#home #shop a {
    background: #761C78;
	border-color:#761C78;
}
#home #shop a:hover {
	color: #761C78;
	border-color:#761C78;
     background-color: #FFFFFF;
}
/* #nQuery
-------------------------------------*/
#nQuery #shop a {
    background: linear-gradient(-135deg,#4cb5ab,#2f98d4);
	border-color: #4cb5ab;
}
#nQuery #shop a:hover {
	background:none;
	color: #4cb5ab;
	border-color:#4cb5ab;
     background-color: #FFFFFF;
}
/* #SnapGene　赤メイン
-------------------------------------*/
#snapgene #shop a {
    background: #14BDC8;
	border-color: #14BDC8;
}
#snapgene #shop a:hover {
	background:none;
	color: #14BDC8;
	border-color:#14BDC8;
     background-color: #fff;
}
/* #Geneious
-------------------------------------*/
#geneious #shop a {
    background: #FF7C07;
	border-color: #FF7C07;
}
#geneious #shop a:hover {
	background:none;
	color: #FF7C07;
	border-color:#FF7C07;
     background-color: #fff;
}
/* 3.メニュー（グローバルナビ）のスタイル
------------------------------------------------------------*/
.navDrawr>ul:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.navDrawr>ul>li {
	float: left;
	width: 20%;
	position: relative;
    z-index:210;
}
.navDrawr a {
	display: block;
	color: #fff;
	text-decoration: none;
	background:#4a2c82;
	padding: 10px;
    text-align: center;
}
#home .navDrawr a,#nQuery .navDrawr a, #snapgene .navDrawr a, #geneious .navDrawr a {
    color:#fff;
}
.navDrawr .sub li:last-child a {
	border: none;
}
.navDrawr>ul>li>a {
    	border-right: 1px solid #3C2167;
        background-color:#3C2167;
    transition:font-weight 0.75s;
}
.navDrawr>ul>li>a:hover {
	font-weight: bold;
}
.navDrawr .sub {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 9999;
}
.navDrawr .sub a {
		background-color: rgba(60,33,103,0.9);/*サブメニューはrgbaで指定*/
	border-bottom: 1px solid #fafafa;
	padding: 10px 10px 10px 20px;
}
.navDrawr .sub a:hover, #products #m_products .sub a:hover,#order #m_order .sub a:hover, #support #m_support .sub a:hover {
	background-color: rgba(54,40,95,0.6);/*サブメニューはrgbaで指定*/
}
/* #home #reseller #form仕様
-------------------------------------*/
#home .navDrawr>ul>li>a, #reseller .navDrawr>ul>li>a, #form .navDrawr>ul>li>a {
	border-right: 1px solid #1F296C;
	text-align: center;
    	border-right: 1px solid #1F296C;
        background-color:#1F296C;
}
#home .navDrawr .sub a, #reseller .navDrawr .sub a, #form .navDrawr .sub a{
		background-color: rgba(31, 41, 108, 0.7);/*サブメニューはrgbaで指定*/
}
#home .navDrawr .sub a:hover, #reseller .navDrawr .sub a:hover, #form .navDrawr .sub a:hover{
    background-color: rgba(31, 41, 108, 0.9);
}
/* #nQuery使用
-------------------------------------*/
#nQuery .navDrawr>ul>li>a {
	border-right: 1px solid #4cb5ab;
	text-align: center;
    	border-right: 1px solid #4cb5ab;
        background-color:#4cb5ab;
}
#nQuery .navDrawr .sub a {
	background-color: rgba(57,185,185,0.7);/*サブメニューはrgbaで指定*/
}
#nQuery .navDrawr .sub a:hover {
background: rgba(0,143,202,0.5);/*サブメニューはrgbaで指定*/
}
/* #SnapGene 赤 使用
-------------------------------------*/
#snapgene .navDrawr>ul>li>a {
	border-right: 1px solid #E51916;
	text-align: center;
    	border-right: 1px solid #E51916;
        background-color:#E51916;
}
#snapgene .navDrawr .sub a {
	background-color: rgba(215,35,26,0.75);/*サブメニューはrgbaで指定*/
}
#snapgene .navDrawr .sub a:hover {
background: rgba(215,35,26,0.5);/*サブメニューはrgbaで指定*/
}
/* #Geneious  
-------------------------------------*/
#geneious .navDrawr>ul>li>a {
	border-right: 1px solid #99a4ae;
	text-align: center;
    	border-right: 1px solid #99a4ae;
        background-color:#99a4ae;
}
#geneious .navDrawr .sub a {
	background-color: rgba(153,164,174,0.75);/*サブメニューはrgbaで指定*/
}
#geneious .navDrawr .sub a:hover {
background: rgba(153,164,174,0.5);/*サブメニューはrgbaで指定*/
}
/* 4.バーガーメニュー（グローバルナビ）のスタイル
---------------------------------------------------*/
@media only screen and (max-width: 768px) {
	#wrapper{
		overflow:hidden;
		z-index:220;
	}
.navDrawr .sub a:hover, #products #m_products .sub a:hover,#order #m_order .sub a:hover, #support #m_support .sub a:hover{
	background-color: #fff;
}
	.navDrawr {
		background-color: #fff;
		position: fixed;
		width: 260px;/* script.js の var $navW も要変更 */
		top: 60px;
		bottom: 0;
		left: -260px;/* script.js の var $navW も要変更 */
		overflow: auto;
		-webkit-overflow-scrolling: touch;
        z-index:230;
	}
    body.menuOpen #wrapper{
		padding-top:0px;
	}
	.overlay {
		display: none;
		background-color: rgba(0,0,0,0.15);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
        z-index:240;
	}
	header {
		position:relative;
		height: 60px;
		padding:0px;
        z-index:250;
	}
	body.menuOpen header{
		position: fixed;
		top:0;
		width: 100%;
        z-index:260;
	}
	header .headerTop{
		padding:inherit;
	}
	.navDrawrBtn {
		text-align: right;
	}
	.navDrawrBtn span {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		display: block;
		width: 60px;
		height: 60px;
		cursor: pointer;
        z-index:270;
	}
	.navDrawrBtn span::before {
	font-family: "Font Awesome 5 Free";
		font-weight: 900;
		content: "\f0c9";/*バーガーメニューメニューが閉じてるとき [三]*/
		font-size: 26px;
		color: #666666;
		position: absolute;
		left: 15%;
		top:15%;
		width: 100%;
		text-align: center;
		line-height: 60px;
        z-index:280;
				content: url(https://www.mdf-soft.com/Images/icon_burger_menu.svg);/*バーガーメニューメニューが閉じてるとき [三]*/
				width: 35%;
	}
	body.menuOpen .navDrawrBtn span::before {
		font-weight: 900;
		content: "\f00d";/*バーガーメニューメニューを開いた時 [x]*/
				content: url(https://www.mdf-soft.com/Images/icon_close.svg);/*バーガーメニューメニューが閉じてるとき [x]*/
				width: 30%;
}
	.navDrawr a {
		position: relative;
        z-index:280;
		text-align: left;
	}
	.navDrawr a::before {
		position: absolute;
		top: 50%;
		margin-top: -10px;
		right: 15px;
		font-weight: 900;
		font-family: "Font Awesome 5 Free";
		content: "\f054";/*バーガーメニューメニューの矢印 [>]*/
        z-index:290;
	}
	.navDrawr>ul>li {
		float: none;
		width: auto;
	}
	.navDrawr>ul>li>a, #home .navDrawr>ul>li>a,#form .navDrawr>ul>li>a,#reseller .navDrawr>ul>li>a, #nQuery .navDrawr>ul>li>a, #snapgene .navDrawr>ul>li>a {
		text-align: left;
		border-right: none;
		border-bottom: 1px solid #fafafa;
	}
	.navDrawr .sub {
		position: static;
		display: block!important;
	    background-color: #fff;
	}
.navDrawr .sub a, #home .navDrawr .sub a, #form .navDrawr .sub a, #reseller .navDrawr .sub a, #nQuery .navDrawr .sub a, #snapgene .navDrawr .sub a, #geneious .navDrawr .sub a {
	background-color: #fff;
    color:#666666;
	border-bottom: 1px solid #afafaf;
	padding: 10px 10px 10px 25px;
}
.navDrawr .sub a:hover, #home .navDrawr .sub a:hover, #form .navDrawr .sub a:hover, #reseller .navDrawr .sub a:hover, #nQuery .navDrawr .sub a:hover, #snapgene .navDrawr .sub a:hover, #geneious .navDrawr .sub a:hover{
	background-color: #fff;
}
}
/* 5.ヘッダー背景画像
------------------------------------------------------------*/
#header_img, #home #header_img, #nQuery #header_img {
	float: left;
	width: 100%;
    height:440px;
	overflow-y: hidden;
	overflow:hidden;
    margin-bottom:35px;
  position: relative;/*相対配置*/
}
#header_img, #products #header_img {/*Prism*/
  background: linear-gradient(rgba(54,40,95,0.95),rgba(74,44,130,0.8)),
  url("../Images/header_images/header_img6.png");
	  background-size: cover;
background-position: center;
	background-repeat: no-repeat;
}
#nQuery #header_img {
  background: linear-gradient(rgba(75,181,171,0.9),rgba(0,143,202,0.8)),
  url("../Images/nquery_images/nQuery_Sample_Size_Software.png");
	  background-size: cover;
background-position: center;
}
#snapgene #header_img {
  background: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.6)),
  url("../Images/header_images/header_image2.png");
	  background-size: cover;
background-position: center;
}
#geneious #header_img {
  background: linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.5)),
  url("../Images/geneious_images/Geneious_header2.png");
	  background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* 背景の上に文字----*/
#header_img .header_pic {/*親div*/
  position: relative;/*相対配置*/
 z-index:110;
  }
#header_img .header_pic img {/*Prism*/
  width:70%;
  max-width:400px;
  padding-bottom:25px;
  padding-top:30px;
}
#header_img .header_pic p {/*Prism*/
  width:80%;
  max-widht:650px;
  position: absolute;/*絶対配置*/
  color: white;/*文字は白に*/
  font-size: 130%;
   top: 200px;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  z-index:120;
}
#snapgene #header_img .header_pic p, #geneious #header_img .header_pic p {/*SnapGene*/
  color: #555;/*文字は白に*/}
/* #homeを特別仕様
-------------------------------------*/
#home #header_img {/*home 基本的にそれぞれのフォルダのindex.html*/
      background: url("../Images/header_images/header_image1.png");
      background-position: center;
      background-size:cover;
    background-repeat: no-repeat;
}
#home #header_img .header_pic {/*黒の透過部分*/
  width:40%;
  max-widht:250px;
  font-size: 120%;
  z-index:120;
   background: rgba(0,0,0,0.2); 
    padding:50px 80px;
    line-height: 150%;
    text-align: left;
    color: #fff;
    float: left;
    height: inherit;
  }
#home #header_img .header_pic img {
    width:95%;
    padding-bottom:3px;
    padding-top:3px;
}
#home #header_img h1 {
    font-size: 180%;
    font-weight: bold;
    color: #fff;
    line-height: 1.4em;
    text-align: left;
    margin-bottom: 30px;
text-shadow: 1px 1px 1px #808080;}
/* #resellerと#formを特別仕様
-------------------------------------*/
#reseller #header_img, #form #header_img {
      background: url("../Images/header_images/header_image6.png");
      background-position: center;
      background-size:cover;
    background-repeat: no-repeat;
}
#reseller #header_img .header_pic p, #form #header_img .header_pic p {
  color: #666;/*文字は白に*/
}
/* 背景の上に文字終わり----*/
/* 6. メインのハコ系
------------------------------------------------------------*/
hr {
    margin:15px 0px 20px 0px;
    border: 0.25px #f2f2f2 solid;
}
#breadcrumbs a {
	color:#666;
}
#breadcrumbs i {
	margin-left:15px;
	margin-right:15px;
}
.fright {
	float: right;
	padding-left: 5px;
	padding-bottom:5px;
}
.fright .img300 {
	width:98%; 
	max-width:250px; 
	padding-left:20px;
}
.container, .container_m {
    margin:20px 0px 20px 0px;
}
.container,.fafafa .container_m,.pale_blue .container_m,.f8f8f8 .container_m { 
    width: 98%;
    max-width: 1000px;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: auto;
	margin-left: auto;
}
section {
	padding-top:20px;
	padding-bottom:10px;
	clear:both;
}
.box_2 {
    float: left;
    width: 48%;
    margin: 1%;
}
.box_3 {
    float: left;
    width: 31.33333333%;
    margin: 1%;
}
.box_2_3rd {
    float: left;
    width: 62.66666666%;
    margin: 1%;
}
.box_4 {
    float: left;
    width: 22.5%;
    margin: 1%;
}
#product_info .box_4 { /*取扱製品*/
		float: left;
	height:80px;
		width: 23%;
	padding-bottom: 0px;}
#case_study .box_2_3rd {
    width: 60%;
	padding-right:40px;
	border-right:1px solid #BBBBBB;
}
.box_3 .tutorial_img {/*チュートリアルページはちょっと特別*/
    height:140px;
    padding:0px 5px 30px 5px;
}
.box_3 .tutorial_img img {
    width:100%;
    max-width: 220px;
}
.box_3 .tutorial_img iframe {
    width:100%;
}
.box_5 {
	float:left;
	width:20%;
	text-align: center;
}
.box_5 img {
	positon:absolute;
	padding:10px;
	width:90%;
}
.box_5 a {
    line-height: 1.2em;
}
.box_4_5th {
	float:left;
	width:78%;
    margin-right:1%;
}
.nest {
	padding:20px;
    paddng-left:30px;
    padding-right:30px;
}
.box_border .nest {
	padding: 20px;
	border:1px solid #BBBBBB;
}
.nest_align {
	text-align: left;
}
.box_3 .nest {
	text-align:left;
}
.scroll {
	height: 280px;
	overflow: scroll;
	width: 94%;
	margin-right: auto;
	margin-left: auto;
	line-height: 1.8em;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-right: 2%;
	padding-left: 2%;
	padding-top: 10px;
	padding-bottom:10px;
	border: 1px solid #A0A0A0;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background:#fff;
}
.space_30 {
    height:30px;
    clear:both;
}
/* ボックスの高さをそろるワザ | 基本的に、ボックスの親要素に display: flex; を指定する
------------------------------------------------------------*/
.flex {
    display: flex;
	align-items: stretch;
}
.flex .box_3, .flex .box_2 {
    display:flex;
	align-items: stretch;
}
/* 7. h関連 + 文字・行間関連の装飾
------------------------------------------------------------*/
.h_small {font-size: 120%;margin-top:-25px;margin-bottom:30px;text-align: center;}
#snapgene .h_small {font-size: 120%;margin-top:-25px;margin-bottom:30px;text-align:center;color:#E51916;}
#geneious .h_small {font-size: 120%;margin-top:-25px;margin-bottom:30px;text-align:center;color:#FF7C07;}
#nquery .h_small {font-size: 120%;margin-top:-25px;margin-bottom:30px;text-align:center;color:#008FCA;}
#home .h_small {font-size: 120%;margin-top:-25px;margin-bottom:30px;text-align:center;color:#761C78;}

h1 {
	font-size: 250%;
	line-height:50px;
	color:#4a2c82;
	margin-bottom: 50px;
	text-align: center;
    font-weight: nomal;
    letter-spacing:0.01em;
}
h1 img {width:50%;}/* トップページで画像をh1にして使ってる
------------------------------------*/
h2, #nQuery h2 {
	font-size: 175%;
	color:#36313F;
    padding-top:15px;
	padding-bottom: 20px;
	text-align: center;
	letter-spacing: 0.01em;
}
#home h1, #home .box_2 h2 {
	color:#1F296C;
}
#nQuery h1 {	
    color:#4cb5ab;
}
#nQuery h2 {
	color:#008FCA;
}
#home h2 {
    color:#761C78;
}
#snapgene h1, #geneious h1  {
    color:#252525;
}
#geneious h1  {
    color:#09193A;
}
#snapgene h2 {
    font-size:190%;
    color:#E51916;
	letter-spacing: 0.5px;
}
#geneious h2 {
    font-size:190%;
	color: #FF7C07;
    line-height: 1.2em;
	margin-bottom:15px;
}
#geneious #backbone h2 {
    font-size:170%;
	color: #2483DB;
	letter-spacing: 0.5px;
}
.box_2 h2 {
	font-size: 150%;
	color:#1F296C;
    padding-top:10px;
    padding-bottom:5px;
}
h3 {
	color:#ffffff;
	font-size:120%;
	padding:10px;
	font-family: 'Roboto', sans-serif;
	clear:both;
	margin-top:30px;
	margin-bottom:30px;
	background:#3c2167;
}
#home .box_3 h3, #reseller .box_3 h3, #form .box_3 h3{
	background: #1F296C;
}
#nQuery h3 {
	font-size:140%;
	background: none;
	padding:0px;
}
#nQuery .box_3 h3, #nQuery .box_4 h3 {
	color:#4cb5ab;
	background:none;
	font-size:180%;
	text-align: center;
}
#snapgene h3 {
	font-size:140%;
	color: #14BDC8;
	background:none;
}
#snapgene .box_3 h3,#snapgene .box_2 h3  {
    background:none;
    color:#252525;
    font-size:180%;
}
#geneious h3 {
	font-size:140%;
	color: #265791;
	background:none;
}
.box_2 h3, .box_3 h3 {
	margin-top:0px;
} 
.box_3 h3 a, .box_3 h3 a:visited, .box_2 h3 a, .box_2 h3 a:visited  {
    color: #fff;
	display: block;
    padding:0px;
}
#support .box_3 h4 a {
    color:#761C78;
}
h4 {	
	font-weight: bold;
	color:#761c78;
	border-bottom:solid 1px #761C78;
	margin-top:20px;
	margin-bottom: 15px;
	text-align: left;
	clear:both;
}
#nQuery h4 {
	color: #008FCA;
	border-bottom:solid 1px #008FCA;
}
#snapgene h4 {
	color: #53b4c4;
	border-bottom:solid 1px #53b4c4;}
#geneious h4 {
	color: #FF7C07;
	border-bottom:solid 1px #FF7C07;}
.box_3 h4 {
	font-size: 100%;
    font-weight:100;
    color:#1467ED;
   color:#FF6700;
    padding-bottom: 0px;
	text-align: left;
	border-bottom:1px #FF6700 solid;
}
#support .box_2 h4 {
	font-size: 100%;
    font-weight:100;
    color:#36313F;
   color:#36313F;
    padding-bottom: 0px;
	text-align: left;
	border-bottom:1px #36313F solid;
}
.box_2 h4 {
     color:#FF6700;
    font-weight:100;
	border-bottom:1px #FF6700 solid;
}
#home .box_2 h4 {
	color:#1F296C;
	font-weight:bold;
	border-bottom:1px #1F296C solid;
}
#nQuery .box_2 h4 {
	font-size: 130%;
	color:#4cb5ab;
    line-height: 1.5em;
	border-bottom: none;
}
#snapgene .box_2 h4 {
	font-size: 120%;
	color:#14BDC8;
	border-bottom: 1px #14BDC8 solid;
}
h5 {
	font-size:110%;
	padding-bottom:20px;
}
#tutorial_movies h5 i {
	font-size:150%;
	padding-bottom:20px;
}
h6 {
	font-size: 150%;
	color:#3C2167;
    letter-spacing:0.05em;
    padding-bottom:12px;
}
h6 i {
    font-size: 200%;
}
.box_3 h6 {
    font-size:130%;
}
.box_3 h6 a {
		color:#761C78;
}
#home .box_3 h6 {
	font-size: 150%;
	color:#1F296C;
    letter-spacing:0.05em;
    padding-bottom:12px;
}
/*以下、リストの装飾*/
dl dt {
	color: #1F296C;
	font-weight: bold;
	margin-top: 10px;
	font-size: 95%;
}
#snapgene dl dt, #geneious dl dt {
	color: #555;
}
#snapgene #whats_new ul li, #geneious #whats_new ul li {
	margin:5px 0px 5px 10px;
	font-size: 90%;
}
#snapgene #whats_new ul li li, #geneious #whats_new ul li li {
	list-style-type:    circle;
}
dl dd {
	margin-bottom:20px;
}
#nQuery .scroll dl dt a {
    color: #2f98d4;
}
#main ul {
    padding:15px 15px 15px 15px;
    font-size: 110%;
}
#main ul li {
    list-style: disc;
    list-style-position:outside;
    font-size:110%;
	line-height: 1.4;
	padding-bottom:15px;
}
#main .purple_BB ul{
    margin:0px 20px 20px 20px;
    width:96%;
}
#main .purple_BB ul li {
    font-size:1.15em;
    line-height:1.8em;
    list-style-position:outside;
        list-style-type: none;
        position: relative;
        padding-left: 1em;
    margin-top:0.5em;
        margin-left:-20px;

}
#main .purple_BB ul li:before {
    border-radius: 50%;
    width: 5px;
    height: 5px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.75em;
    content: "";
    background:#9B248E;
}
#main .emerald_BB ul{
    margin:-15px 20px 20px 10px;
    width:96%;
}
#main .emerald_BB ul li {
    font-size:1.15em;
    line-height:1.6em;
    list-style-position:outside;
        list-style-type: none;
        position: relative;
        padding-left: 1.5em;
    margin-top:0.5em;
        margin-left:-20px;

}
#main .emerald_BB ul li:before {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: block;
    position: absolute;
    left: 0;
    top: 0.55em;
    content: "";
    background:#4cb5ab;
}
/*以下、フォントの装飾とか*/
.font_130 {
    font-size:130%;
}
.line_height_narrow {/*行間を狭め太郎*/
    line-height: 150%;
    padding-left:15px;
    padding-bottom:25px;
}
.line_height_narrow2 {/*パディングなしで行間を狭め太郎*/
    line-height: 150%;
}
.intro_pon {/*目次のbox_3のイントロ*/
    line-height: 1.35em; font-size: 90%; margin-bottom:20px; padding-bottom:20px; border-bottom: 1px solid #EEEEEE; color:#666;
}
.ref {/*小さくリファレンす*/
    line-height: 1.35em; 
    font-size:90%; 
    color:#666;
    margin-bottom:10px;
}
.font_small {/*主張しな亥之介*/
    color:#555; 
    font-size:0.8rem; 
    width:98%; 
    margin-top:15px;
}
#nQuery .scroll dd .font_small {
    color:#666;
    line-height: 1.4em;
}
.text_icon {/*Fontawesomeを絵として使っタロウ*/
	color:#999;
	font-size:6rem;
	text-align: center;
}
.text_icon a {/*Fontawesomeを絵として使っタロウ*/
	font-size:6rem;
	text-align: center;
}
.highlight {/*文字黄色*/
    color:#FF6700;
}
#home .highlight, #reseller .highlight, #form .highlight {/*文字黄色*/
	color:#f5a418;
}
.highlight_2 {/*文字紫*/
    color:#761C78;
}
.attention {/*文字白で背景紫*/
	background:#761c78;
    color:#fff;
    padding:5px 18px 5px 18px;
    letter-spacing: 0.1em;
}
#faq .attention {
    margin-left: 0px;
}
.hissori_attention {/*線紫でひっそり主張*/
	color:#761c78;
	border-bottom: 1px solid #761c78;
    padding:5px 0px 2px 0px;
    letter-spacing: 0.1em;
	margin-left:15px;
}
a .attention {
    padding:10px;
    transition:all 0.5s;

}
a .attention:hover {
	color:#761c78;
    border: 1px solid #761c78;
    background:#fff;
}
#snapgene a .attention {
	color:#fff;
    border: 1px solid #20B2BC;
    background:#20B2BC;
    border-radius: 8px;
}
#snapgene a .attention:hover {
	color:#20B2BC;
    border: 1px solid #20B2BC;
    background:#fff;
}
#geneious a .attention {
	color:#fff;
    border: 1px solid #265791;
    background:#265791;
    border-radius: 8px;
}
#geneious a .attention:hover {
	color:#265791;
    border: 1px solid #265791;
    background:#fff;
}
#prism a .attention {
	color:#fff;
    border: 1px solid #FF6700;
    background:#FF6700;
    border-radius: 8px;
}
#prism a .attention:hover {
	color:#FF6700;
    border: 1px solid #FF6700;
    background:#fff;
}
/*8.テーブル
------------------------------------------------------------*/
th {
  background-color: #fafafa;
  border: solid 1px #ccc;
  padding: 5px;
  font-size:0.85rem;
}
td {
  font-size:0.85rem;
}
#nQuery th ,#snapgene th{
    width:70%;
    padding-left:10px;
}
#nQuery .nquery_tutorial th{
  background-color:#fff;
}
#nQuery td {
    width:10%;
}
#nQuery .nquery_tutorial th {
    width:65%;
}
#nQuery .nquery_tutorial td {
    width:35%;
}
#nQuery .nquery_tutorial .table2 th {
    width:50%;
}
#nQuery .nquery_tutorial .table2 td {/*ラベル1+列２の場合：なぜか上の35%にひきづられるので、苦肉の策----------------*/
    width:25%;
}
th i {
	font-size:1.2rem;
    color:#666;
    vertical-align: middle;
}
td {
  border: solid 1px #ccc;
  padding: 5px;
}

label:hover {
    color:#005CC8;
}
#nQuery td, #snapgene td {
    text-align:center;
    vertical-align: middle;
}
#nQuery table, #snapgene table {
    margin-bottom:20px;
}
/* 9.背景色
------------------------------------------------------------*/
.fafafa {
    background: #fafafa;
    width:100%;
    padding:10px 0px 10px 0px;
}
.f8f8f8 {
	background:#F7F6F7;
	width:100%;
    padding:10px 0px 10px 0px;
}

/* 10. ボタンいろいろ取り揃えてまっせ
------------------------------------------------------------*/
.button_1 a { /*--ボタン1 オレンジ Prismページ--*/
  display       : inline-block;
  font-size     : 10pt;      
  text-align    : center;    
  cursor        : pointer;    
  padding       : 10px;  
  background    :#FF6700;  
  line-height   : 1em;        
  border        : 1px solid #FF6700;   
  margin: 15px 5px 15px 5px; 
  color:#fff;
　opacity: 0.8;
  letter-spacing:0.05em;
  transition:all 0.7s;
}
.button_1 a:hover {/*ボタン1 オレンジ hover -- 背景透過--*/
background:rgba(0,0,0,0);  
    border: 1px solid #FF6700;    
  color         : #FF6700;   
}
.button_prism a {/* Prism橙ボタン */
  display       : inline-block;
  font-size     : 10pt;      
  text-align    : center;   
  cursor        : pointer;   
  padding       : 10px;  
  line-height   : 1em;       
  margin: 15px 5px 15px 5px; 
  color:#fff;
  letter-spacing:0.05em;
	transition:all 0.7s;
	background: #FF6700;
  border: 1px solid #FF6700; 
  color: #fff;
　float: none;
}
.button_prism a:hover {
	background: rgba(0,0,0,0);
    border: 1px solid #FF6700; 
  color: #FF6700;
}
/*------------ボタン1 イエロー--*/
#home .button_1 a, #nQuery .button_1 a, #reseller .button_1 a {/*--ボタン1　イエロー--*/
  background    :#F6B544;   
  border        : 1px solid #F6B544;    
 color:#fff;  
}
#home .button_1 a:hover, #nQuery .button_1 a:hover{/*-- ボタン1　イエロー hover 背景透過 background-colorとbackgroundの透過を指定せよ--*/
　background:rgba(0,0,0,0);  
  background-color:rgba(0,0,0,0);
  border : 1px solid #F6B544;    
 color:#F6B544;  
}
#reseller #header_img .button_1 a:hover {/* ボタン1　イエロー hover --背景白 #header_img外すなよ--*/
  background    : #fff;   
  border: 1px solid #F6B544;    
  color         : #F6B544;    
}
#header_img .button_1 a:hover, #seminar #header_img .button_2 a:hover, #header_img .button_mitsumori a:hover,#nQuery #header_img .button_mitsumori a:hover{/* hoverすると透過 ボーダー白*/
  background    : rgba(0,0,0,0);   
border: 1px solid #fff;    
  color         : #fff;     /* colorを一番最後に持ってこないと文字が潰れる？ */
}
/*------------ボタン2 黒の透過--*/
#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 {/*--ボタン2 黒の透過--*/
  display       : inline-block;
  font-size     : 10pt;        
  text-align    : center;    
  cursor        : pointer;    
  padding       : 10px;  
  background    : rgba(0,0,0,0.4);  
  line-height   : 1.5em;   
  transition    : .3s;       
  margin: 15px 5px 15px 5px; 
  color:#fff;
  letter-spacing:0.05em;
    transition:all 0.8s;
	border: 1px solid rgba(0,0,0,0.4);
	border-radius: 2px;
}
#seminar #header_img .button_2 a {/*-ウェビナー申込ボタン--*/
  background:#299DFB ;
 transition:all 0.8s;
 color:#fff;
}
#header_img .button_mitsumori a {/*-見積申し込みボタン--*/
  background    :#FF6700 ;
  letter-spacing:0.1em;
transition:all 0.8s;
  color:#fff;
}
#header_img .button_2 a:hover, #products #header_img .button_2 a:hover {
  color         : #fff;    
  background    : rgba(0,0,0,0);   
 border: 1px solid #fff;  
}
/*------------ボタン2 黒の透過 ホームとサポート--*/
#home .button_2 a, #reseller .button_2 a {/*--ボタン2 黒の透過 ホームとサポート--*/
  display       : inline-block;
  font-size     : 10pt;      
  text-align    : center;      
  cursor        : pointer;    
  padding       : 10px;  
  background    : rgba(0,0,0,0.4); 
  line-height   : 1em;      
  transition    : .3s;       
  border        : 1px solid #666;    
  margin: 15px 5px 15px 5px; 
  color:#fff;
  letter-spacing:0.05em;
}
#main .button_2 a:hover, #home #main .button_2 a:hover, #reseller .button_2 a:hover,  #snapgene #main .button_2 a:hover, #snapgene #header_img .button_2 a:hover, #geneious #main .button_2 a:hover, #geneious #header_img .button_2 a:hover {/*--ボタン2 黒の透過のhover #snapgeneは#mainと#headerの2つを用意しとかなあかん--*/
  color         : #222;    
  background    : rgba(0,0,0,0);   
 border: 1px solid #444;   
}
/*------------商品価格ページの購入ボタン--*/
.buy a {/*--購入ボタン--*/
	text-decoration: none;
	background-color: #FF6700;
    text-align: center;
	display: block;
	line-height: 1em;
	border:solid 1px;
	border-color:#FF6700;
	padding:12px;
	margin:-8px 5px 0px 0px;
	color: #FFF;
    float:right;
    font-size:0.7em;
    font-weight:normal;
    -webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
    transition:all 0.5s;
}
.buy a:hover {
	color:#FF6700;
    background-color: #fff;
    	border:solid 1px #FF6700;
}
/*------------三角ボタンをhover時に右から上へ コード例 <i class="fas fa-caret-right"></i>--*/
a:hover .fa-caret-right  {
	transform: rotate(-90deg);
}
/*------------三角ボタンをhover時に右から下へ--*/
a .fa-rotate-90  {
	transform: rotate(90deg);
}
a:hover .fa-rotate-90  {
	transform: rotate(180deg);
}
/*------------nQueryスペシアル--*/
#nQuery .emerald_button a {/*--エメラルドボタン nQuery用--*/
	float:none;
	text-decoration: none;
background: linear-gradient(-135deg,#4cb5ab,#2f98d4);
    text-align: center;
	display: block;
	line-height: 1.2em;
	border:solid;
	border-color:#4cb5ab;
	padding:10px 20px;
	margin:10px 0;
    margin-left:auto;
    margin-right: auto;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	font-weight:bold;
	letter-spacing:1px;
	color: #FFF;
    border-width:1px;
    transition:all 0.7s;
}
#nQuery #main .emerald_button a:hover {/*#mainとったらあかん */
background:none;
	color: #4cb5ab;
	border-color:#4cb5ab;
    background-color: #FFFFFF;
}
.box_3 #main .emerald_button a {
	width:40%;
  color:#fff;
}
/*------------SnapGeneスペシアル--*/
#snapgene .button_1 a {/* SnapGene赤ボタン */
	background: #E51916;
  border: 1px solid #E51916; 
  color: #fff;
}
#snapgene .button_lightblue a {/* SnapGene青ボタン */
  display       : inline-block;
  font-size     : 10pt;      
  text-align    : center;   
  cursor        : pointer;   
  padding       : 10px;  
  line-height   : 1em;       
  margin: 15px 5px 15px 5px; 
  color:#fff;
  letter-spacing:0.05em;
	transition:all 0.7s;
  color: #fff;
　float: none;
	background: #53b4c4;
  border: 1px solid #53b4c4; 
  color: #fff;
}
#snapgene .button_1 a:hover {　/* SnapGeneボタン background-colorとbackgroundの透過を指定せよ*/ 
 background:rgba(0,0,0,0); 
background-color: rgba(0,0,0,0); 
  border: 1px solid #E51916; 
   color:#E51916;
}
#snapgene .buy a {/* SnapGeneボタン*/
	background: #53b4c4;
  border: 1px solid #53b4c4; 
  color: #fff;
}
#snapgene #main .buy a:hover,#snapgene #main .button_lightblue a:hover {/* SnapGeneボタン*/
	color:#14BDC8;
    background-color: #fff;
    border:solid 1px #14BDC8;
}
/*------------Geneiousスペシアル--*/
#geneious .button_1 a {/* geneious橙ボタン */
	background: #FF7C07;
  border: 1px solid #FF7C07; 
  color: #fff;
}
#geneious .button_lightblue a {/* geneious青ボタン */
  display       : inline-block;
  font-size     : 10pt;      
  text-align    : center;    
  cursor        : pointer;    
  padding       : 10px;  
  background    :#FF6700;  
  line-height   : 1em;        
  border        : 1px solid #FF6700;   
  margin: 15px 5px 15px 5px; 
  color:#fff;
　opacity: 0.8;
  letter-spacing:0.05em;
  transition:all 0.7s;    
    background: #2483DB;
  border: 1px solid #2483DB; 
  color: #fff;  
}
#geneious .button_1 a:hover {　/* geneiousボタン background-colorとbackgroundの透過を指定せよ*/ 
 background:rgba(0,0,0,0); 
background-color: rgba(0,0,0,0); 
  border: 1px solid #FF7C07; 
   color:#FF7C07;
}
#geneious .buy a {/* geneiousボタン*/
	background: #238EC5;
  border: 1px solid #238EC5; 
  color: #fff;
}
#geneious #main .buy a:hover,#geneious #main .button_lightblue a:hover {/* geneiousボタン*/
	color:#2483DB;
    background-color: #fff;
    border:solid 1px #2483DB;
}
.button_1:focus, .button_2:focus, .buy:focus {
    outline: 0;
}
/*11.ページごとの設定
------------------------------------------------------------*/

#price h4, #form #price h4, #snapgene #price h4 {
	font-weight:normal;
    color:#444;
    font-size:130%;
    margin-top:-3px;
    margin-bottom:10px;
	border-bottom:solid 1px #888;
    padding-left:2px;
}
#price h5, #form #price h5, #reseller h5 {
    font-size:95%;
	padding:0px 0px 5px 2px;
    color:#565656;
}
#snapgene #price h4{
	font-size:130%;
}
#order h2  {
    margin-bottom:15px;
}
#company dl dt {
	color: #444;
	font-weight: bold;
     float: left;
    margin-top: 0px;
    margin-bottom:20px;
}
#company dl dd {
    margin-left: 100px;
     margin-bottom:20px;
}
#price #main .box_2, 
#price #main .box_3,
#reseller #main .box_2, 
#reseller #main .box_3, 
#trial #main .box_3 {/*boxの中はホワイトでー*/
	background: #fff;
}
#trial .no_display, #reseller .no_display, #price #main .no_display, #reseller #shop, #reseller #google_search_box,
#form #shop, #form #google_search_box{
    display: none;
}
/*以下、チュートリアルページ祭りィィィ*/
#tutorial #main ul, #tutorial #main ol,#tutorial #main dl {
	font-size:1rem;
	line-height: 2rem;
}
#tutorial #main ul  {
	margin: 20px 15px 20px 15px;
    width:94%;
}
#tutorial #main ul li, #faq #main ul li {
	list-style-position: outside;
	list-style-type: disc;
	margin-left: 5px;
}
#tutorial #main ul li ul li {
	position: relative; /*基準位置*/
    list-style-type: none; /*点を非表示*/
    padding-left: 0.8em;
	margin:5px 0px 5px 0px;
}
#tutorial #main ul li ul li {
	 list-style: none;
	padding-left:8px;
    }
#tutorial #main ul li ul li:before {
    border-radius: 50%; /*丸くする*/
    width: 5px; /*点の幅*/
    height: 5px; /*点の高さ*/
    display: block;
    position: absolute; /*絶対配置*/
    left: 0; /*点の位置*/
    top: 0.9em; /*点の位置*/
    content: "";
    background: #00376F; /*点の色*/
    margin-right:40px;
    }
#tutorial #main ul li dt {
	margin-left: 15px;
	padding-bottom: 5px;
    padding-top:5px;
    color:#00376F;
	font-weight:bold;
}
#tutorial #main ul li dd {
	margin-left: 15px;
}
#tutorial #main ul li a {
	text-decoration: none;
}
#tutorial #main section ul li a:hover {
	text-decoration: underline;
}
#tutorial #main ol li {
	list-style-position: outside;
	list-style-type: decimal;
	margin-left: 20px;
	padding-bottom: 8px;
}
#tutorial h3 {
	margin-top:10px;
	padding:3px 0px 3px 10px;
}
#tutorial #main .font_small {
	margin-top:20px;
	padding-top:5px;
}
#tutorial #main .fright .font_small {
	border-top:none;
	color:#761C78;
}
.fright .img300 {
	width:98%; 
	max-width:220px; 
	padding-left:20px;
	margin-bottom:10px;
} 
/*以下、snapgeneチュートリアル祭りィィィィ ステップバイステップガイド*/
#snapgene_tutorial a:hover, #snapgene #main a:hover {
	color: #ff0000;
}
#snapgene_tutorial h2 {
    margin:50px 0px 30px 0px;
    font-size:170%;
    color: #fff;
    background:#53b4c4;
    padding:0px 10px;
    text-align: left;
}
#snapgene_tutorial h3 {
    font-size:130%;
    border-bottom:#53b4c4 1px solid;
    border-top:#53b4c4 1px solid;
    color: #53b4c4;
    line-height: 1.3em;
    font-weight:400;
    vertical-align: middle;
}
#snapgene_tutorial h4 {
    font-size:130%;
    color: #53b4c4;
    border-bottom:#53b4c4 1px solid;
    border-left:#53b4c4 5px solid;
    font-weight: normal;
    padding-left:4px;
    line-height: 1.4em;
    width:50%;
    margin-top:20px;
}
#snapgene_tutorial .box_2 h4 {
    border-left:#53b4c4 5px solid;
	border-bottom: none;
    width:96%;
    height:26px;
}
#snapgene_tutorial p img, #geneious_tutorial p img {/*画像を中央に揃えたいときはdisplay:blockじゃぁぁ pは外すな*/
    margin:20px 0px 40px 0px;
    padding:0px;
    display: block;
    margin-left:auto;
    margin-right:auto;
    width:85%;
    border: #999 1px solid;
}
#snapgene_tutorial h4 img {/*画像を中央に揃えたいときはdisplay:blockじゃぁぁ*/
    margin-left:0px;
    margin-right:0px;
    float:left;
    border: none;
}
#snapgene ol {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
        counter-reset: section;
    list-style-type: none;
}
#snapgene ol ol {
  padding-left: 1em;
}
#snapgene ol li{
  text-indent: -1.3em;
  padding-left: 1.3em;
}
#snapgene ol li:before {
  padding-right: .5em;
        counter-increment: section;
    content: counters(section, "-") ".";
}
/*以下、geneiousチュートリアル祭りィィィィ ステップバイステップガイド*/
#geneious_tutorial a:hover, #geneious #main a:hover {
	color: #E07019;
}
#geneious_tutorial h2 {
    margin:50px 0px 30px 0px;
    font-size:170%;
    color: #fff;
    background:#F7984E;
    padding:10px;
    text-align: left;
}
#geneious_tutorial h3 {
    font-size:130%;
    border-bottom:#265791 1px solid;
    border-top:#265791 1px solid;
    color: #265791;
    line-height: 1.3em;
    font-weight:400;
    vertical-align: middle;
}
#geneious_tutorial h3 a {
    color:#09193A;;
}

#geneious_tutorial .box_3 h3,#geneious_tutorial .box_2 h3 {
    border-bottom:#84A6CD 1px solid;
    border-top:#84A6CD 1px solid;
    background:none;
}
#geneious_tutorial h4 {
    font-size:130%;
    color: #238EC5;
    border-bottom:#238EC5 1px solid;
    border-left:#238EC5 5px solid;
    font-weight: normal;
    padding-left:4px;
    line-height: 1.4em;
    width:50%;
    margin-top:20px;
}
#geneious_tutorial .box_2 h4 {
    border-left:#238EC5 5px solid;
	border-bottom: none;
    width:96%;
    height:26px;
}
#geneious_tutorial p img {/*画像を中央に揃えたいときはdisplay:blockじゃぁぁ pは外すな*/
    margin:20px 0px 50px 0px;
    padding:0px;
    display: block;
    margin-left:auto;
    margin-right:auto;
    width:85%;
    border: #999 1px solid;
}
#geneious_tutorial h4 img {/*画像を中央に揃えたいときはdisplay:blockじゃぁぁ*/
    margin-left:0px;
    margin-right:0px;
    float:left;
    border: none;
}
#geneious ol {
  counter-reset: item;
  list-style-type: none;
  padding-left: 0;
        counter-reset: section;
    list-style-type: none;
}
#geneious ol ol {
  padding-left: 1em;
}
#geneious ol li{
  text-indent: -1.3em;
  padding-left: 1.3em;
}
#geneious ol li:before {
  padding-right: .5em;
        counter-increment: section;
    content: counters(section, "-") ".";
}
#geneious_tutorial li a {
        color:#09193A;
}
#geneious_tutorial li a:hover {
        color:#265791;
}
#feature ul li {
	margin-top:10px;
}
#feature ul li ul {
	margin-top:-20px;
}
#feature ul li ul li {
	list-style-type: circle;
	line-height: 1.1em;
}
/*以下、Prismチュートリアル小規模な祭り*/
#prism_tutorial h2 {
    margin:50px 0px 30px 0px;
    font-size:170%;
    color: #fff;
    background:#3C2167;
    padding:0px 10px;
    text-align: left;
}
#prism_tutorial h3 {
	border-bottom:#3C2167 1px solid;
	border-left:#3C2167 5px solid;
	background:none;
	color:#3C2167;
	line-height: 1em;
}
#prism_tutorial p img {/*画像を中央に揃えたいときはdisplay:blockじゃぁぁ pは外すな*/
    margin:20px 0px 40px 0px;
    padding:0px;
    display: block;
    margin-left:auto;
    margin-right:auto;
    width:68%;
    border: #999 1px solid;
}
#statistics ul li {/*prismの統計解析機能リストのフォント*/
	font-size: 96%;
}
/*祭り終了*/
/*12.フッター
***********************************************************/
#footer, #home #footer, #nQuery #footer, #snapgene #footer {
background: linear-gradient(#3c2167,#4f2e8a);
    padding-top: 40px;
    padding-bottom: 10px;
	clear:both;
}
#home #footer {
background: linear-gradient(-135deg,#1F296C,#162056);
}
#nQuery #footer {
    background: linear-gradient(-135deg,#4cb5ab,#008FCA);
}
#snapgene #footer {
  background: linear-gradient(#14BDC8,#00A0A4);
}
#snapgene #footer {/*--あか--*/
  background: linear-gradient(#E51916,#D63838);
}
#geneious #footer {/*--あか--*/
  background: url("../Images/geneious_images/geneious_footer_bgimage.png");
}
#footer p {
	color:#fff;
    font-size:100%;
	line-height:1.2rem;
}
#footer h5 {
    color:#fff;
    font-size:115%;
    font-weight:bold;
}
#footer a {
	color:#fff;
	font-size:100%;
}
#footer a:hover {
    color:#F6B544;
}
#footer i:hover {
    font-size: 130%;
}
#snapgene #footer a:hover {
    color:#fff;
    font-weight: bold;
}
#footer .icon {
	margin-top:-40px;
	font-size: 50px;
	letter-spacing: 3px;
}
#footer .font_small {
    margin:30px 0px 20px 0px;
}
#footer .font_small {
    color:#fff;
    font-size:90%;
    margin:0px 10px 0px 10px;
}
address{
	color:#fff;
	clear:both;
	padding-top:20px;
	font-size: 80%;
    text-align: center;
}
#geneious #footer p, #geneious #footer a, #geneious #footer h5 {
	color: #777;
}
#geneious #footer a:hover {
	color: #FF7C07;
}
/* 13. SmoothScroll  スムーズスクロールで上まで一気にワープじゃ
------------------------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 8px;
	right: 8px;
	font-size: 85%;
}
#page-top a {
	text-decoration: none;
	color: #fff;
	text-align: center;
	display: block;
	background-color: #FF6700;
	line-height: 1.2em;
	opacity: 0.8;
	display:inline-block;
	padding:17px 20px;
	margin:10px 20px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	z-index: 99999;
        border:#fff 1px solid;
}
#snapgene #page-top a {/*snapgene*/
    background-color:#14BDC8;
}
#home #page-top a {/*home*/
    background-color:#761C78;
}
#nQuery #page-top a {/*nQuery*/
    background-color: none;
    background: linear-gradient(-135deg,#4cb5ab,#2f98d4);
}
#page-top a:hover {
    text-decoration: none;
	opacity:1.0;
	color: #fff;
}
#postmail #page-top {
	display: none;
}
/*14. スクロールフェードイン...つまり、スクロールするとホワ〜ンと出るやつ
ホワ〜ンと出てくる位置の指定はscript.jsで指定
------------------------------------------------------------*/
/* Bnr
-----------------------------------------*/
.Bnr{
  position: relative;
  margin: 0 auto;
  padding:20px;
  width: 100%;
  display: none;
  line-height:1.25em;
  font-family: "メイリオ","Meiryo","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック",Osaka,sans-serif !important;
}
.Bnr .Bnr__img{
	-webkit-border-top-right-radius: 10px;
	-moz-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-top-left-radius: 10px;
	border-top-left-radius: 10px;
  position: fixed;
  bottom: 0;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  z-index: 88;
}
.Bnr .Bnr__img a {
	color:#888;
    font-weight: bold;
    transition: all 0.5s;
}
.Bnr .Bnr__img a:hover {
	color:#f5a418;
}
.Bnr__img__inner{
  width: 100%;
  box-sizing:border-box;
  padding: 10px;
  background-color: #fafafa;
  opacity:0.9;
	-webkit-border-top-right-radius: 10px;
	-moz-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-top-left-radius: 10px;
	border-top-left-radius: 10px;
    text-align: center;
}
.Bnr .Bnr__img__inner a {
  display: block;
  padding-top:10px;
font-size:1.1rem;
}
.Bnr .Bnr__img__inner i {
 padding:10px;
        transition: all 0.5s;

}
.Bnr .Bnr__img__inner a:hover, .Bnr .Bnr__img__inner a:hover i:hover {
 color: #f5a418;
}
.Bnr .Bnr__img p.close{
  position: absolute;
  right: 1px;
  top:5px;
}
.Bnr .Bnr__img p.close a{
  display: block;
  width: 30px;
  height: 25px;
  text-align: center;
}
.Bnr .Bnr__img p.close a span{
  display: block;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.Bnr .Bnr__img p.close a i {
  font-size: 18px;
  z-index: 888;
  color: #666;
}
/*15. アコーディオン（主にFAQページで使用）
------------------------------------------------------------*/
#contact .navAccordion_sample dd, #products .navAccordion_sample dd, #order .navAccordion_sample dd {
 margin-top:0px;
}
.navAccordion_sample > dt,
.navAccordion_sample > dd {
	background:rgba(0,0,0,0);
	border: 1px solid #36313F;
}
.navAccordion_sample > dt:hover {
	background: #FF6700;
	border: none;
	color:#fff;
    opacity: 0.8;
}
#home .navAccordion_sample > dt:hover {
	background: #761C78;
	border: none;
	color:#fff;
    opacity(0.8);
}
#nQuery .navAccordion_sample > dt:hover {
	background: rgba(57,185,185,1);
	border: none;
	color:#fff;
    opacity: 0.9;
}
#snapgene .navAccordion_sample > dt:hover {
    background: rgba(255,0,0,1);
	border: none;
	color:#fff;
	opacity: 0.9;
}
#geneious .navAccordion_sample > dt:hover {
    background: rgba(119,119,119,1);
	border: none;
	color:#fff;
	opacity: 0.9;
}
.navAccordion_sample > dt {
	position: relative;
	padding: 10px 20px;
	color: #656565;
	cursor: pointer;
	outline: none; 
	letter-spacing: 0.1rem;
}
.navAccordion_sample > dt:focus {
	background: #FF6700;
	color:#fff;
    border:none;
}
#home .navAccordion_sample > dt:focus {
	background: #761C78;
}
#nQuery .navAccordion_sample > dt:focus {
	background-color: #4cb5ab;
}
#snapgene .navAccordion_sample > dt:focus {
	background-color: #ff0000;
		color:#fff;
}
#geneious .navAccordion_sample > dt:focus {
	background-color: #E4E2E2;
		color:#888888;
}
.navAccordion_sample dt::before {
		font-family: "Font Awesome 5 Free";
	content: "\f059";
	padding-right:8px;
}
#how_to_install .navAccordion_sample dt::before {
		font-family: "Font Awesome 5 Free";
	content: "\f019";
	padding-right:8px;
}
#how_to_install #SWIT .navAccordion_sample dt::before {
		font-family: "Font Awesome 5 Free";
	content: "\f362";
	padding-right:8px;
}
#contact .navAccordion_sample dt::before, #products .navAccordion_sample dt::before, #order .navAccordion_sample dt::before,#snapgene_tutorial .navAccordion_sample dt::before,#geneious_tutorial .navAccordion_sample dt::before {
font-family: "Font Awesome 5 Free";content: "";padding-right:0px;
}
.navAccordion_sample > dt::after {
	position: absolute;
	top: 0.8em;
	right: 10px;
	font-family: "Font Awesome 5 Free";
	content: "\f078";
}
.navAccordion_sample > dt.open::after {
	font-family: "Font Awesome 5 Free";
	content: "\f077";
}
.navAccordion_sample > dt:first-child {/*アコーディオンの一番上にくるliの上の線*/
	border-top: 1px solid #36313F;
}
.navAccordion_sample > dt:first-child:focus, .navAccordion_sample > dt:first-child:hover {/*アコーディオンの一番上にくるliの上の線*/
	border-top: none;
}
.navAccordion_sample > dd {
	border-left: solid 1px #EEE;
	border-right: solid 1px #EEE;
	border-bottom: solid 1px #EEE;
	border-top: solid 1px #EEE;
	background: #FFF;
	color: #333;
	padding: 20px;
}

/*16. スライドショー
------------------------------------------------------------*/
 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 100%;
  height     : 400px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
/*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 30s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 5s }
.slide img:nth-of-type(3) { animation-delay: 10s }
.slide img:nth-of-type(4) { animation-delay: 15s }
.slide img:nth-of-type(5) { animation-delay: 20s }
.slide img:nth-of-type(6) { animation-delay: 25s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   8% { opacity: 1 }
  16% { opacity: 1 }
  24% { opacity: 0 }
 100% { opacity: 0 }
}
/*==================================================
16-2. スライダーのためのcss
===================================*/
.slider {
    position:relative;
	z-index: 1;
	/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/
}
.slider-item {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:100vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
	z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 20px;
    width: 20px;
}
.slick-prev {/*戻る矢印の位置と形状*/
    left:4.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:4.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slick-dots {
	position: relative;
	z-index: 3;
    text-align:center;
	margin:-5px 0 0 0;
}

.slick-dots li {
    display:inline-block;
	margin:0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width:12px;/*ドットボタンのサイズ*/
    height:12px;/*ドットボタンのサイズ*/
    display:block;
    border-radius:50%;
	border:none;
    background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
    background:#888;/*ドットボタンの現在地表示の色*/
}
/*17. タブ（nQueryの価格のところで使用）
------------------------------------------------------------*/
.tab-wrap {
	background: White;
	box-shadow: 0 0 5px rgba(0,0,0,.1);
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}
#snapgene .tab-wrap,#reseller .tab-wrap  {
	box-shadow: none;
}
.tab-label {
	color: #888;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}
#snapgene .tab-label {
	color:#006280;
	font-weight: 100;
    border-bottom:#006280 1px solid;
}
#reseller .tab-label {
	color:#1F296C;
	font-weight: 100;
    border-bottom:#1F296C 1px solid;
}
.tab-label img {
    margin-bottom:10px;
}
.tab-label:hover {
    background: rgba(57,185,185,0.2);
    color: #4cb5ab;
}
#snapgene .tab-label:hover {
	background:#fff;
	color:#E51916;
    border-bottom:#E51916 1px solid;
}
#reseller .tab-label:hover {
    background: rgba(31,41,108,0.7);
	color:#fff;
}
.tab-switch:checked + .tab-label {
	color: #4cb5ab;
}
#snapgene .tab-switch:checked + .tab-label {
    border-bottom: none;
    font-weight: bold;
}
#reseller .tab-switch:checked + .tab-label {/*--選択されている時--*/
    border-bottom: none;
    font-weight: bold;
    color:#fff;
    background:#1F296C;
}
.tab-label::after {
	background: #4cb5ab;
	bottom: 0;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}
#snapgene .tab-label::after {
	background: #006280;
    height: 2px;
}
#reseller .tab-label::after {
	background: #1F296C;
    height: 2px;
}
.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}
.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}
.tab-content {
	height:0;
	opacity:0;
	padding: 0 20px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}
.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}
.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}
.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}
.tab-switch {
	display: none;
}
/*1. 動画からコントロールバーを消す
------------------------------------------------------------*/
.movie{
	position: relative;
	width: 60%;
	margin:0 auto;
}
.movie video{
	width: 100%;
}
.movie .play-btn1, .movie .play-btn2, .movie .play-btn3 {
	display: block;
	width: 20%;
	position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translateY(-50%) translateX(-50%);
	  -webkit- transform: translateY(-50%) translateX(-50%);
}
.movie .play-btn1.playActive{display:none;}
.movie .play-btn2.playActive{display:none;}
.movie .play-btn3.playActive{display:none;}