@charset "UTF-8";
@media screen and (max-width: 639px) {
/* 639px 以下 */
ul#breadclumb li br,
nav#gnav ul li br,
pc,
h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { display: none; }

.pc { display: none!important;}
.sp { display: block!important;}

/* all
-------------------- */
html, body {height: 100%; font-size: 14px;line-height: 1.7;}

/* inner-width
-------------------- */
div#header_inner,
div#footer_inner { width: 100%;}
/* header
-------------------- */
header#header {padding: 4% 0; margin: 0 auto;}
div.logo_top {display: flex; justify-content: space-between;}
div.logo_top .logo {width: 50%; margin-left: 0.5rem;}
/* サポートページへボタン
-------------------- */
.support { float: right; padding-right: 4%; margin-bottom: 0!important;}
.support a {
 display: inline-block;
 margin: 0.3rem auto 0;
 padding: .5rem 0.5rem;
 font-size: 0.8rem;
 color: #0071bb;
 border: none;
 border-bottom: 2px solid #27acd9;
 border-radius: 100vh;
 box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
 -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
 transition: 0.5s;
}
 
 
/* container
-------------------- */
div#container {height:100%; padding: 0 3% 20% 3%; }
/* section
-------------------- */
section{margin-bottom: 100px;}
section p{font-size: 16px;}
/* footer
-------------------- */
footer#footer { padding: 2% 0; margin-top: 6%;}

div#logo a {height: 30px;width: 170px; margin-bottom: 3%;}

.pagetop {display: block; width: 100%; margin: 0 auto;}
.pagetop a {display: block; font-size: 80%; padding: 8px;}
 

/* breadclumb
-------------------- */
ul#breadclumb { margin: 2.5% 0 2% 0; float:left; padding-left:2%;}
ul#breadclumb li:first-child {padding-left: 1rem;}
 

/* TOPイメージ内タイトル・製品紹介はこちらボタン
-------------------------- */
.main-img{ margin: 0 auto; position: relative;}

.product-info { margin: 0 auto; text-align: center;}
.product-info a { display: block; width: 90%; padding: 0.6rem 0;	font-size: 1.3rem;}
.support-ttl{
  width: 90%;
  position: absolute;
  top: 30%;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
}

div#gnav {display: flex; margin-top: 0; padding: 0 4%;}
ul.gnav_cat_sub {font-size: 90%;}
ul.gnav_cat_sub li:not(:last-child) {
	border-bottom: 1px solid #fff;
}
div#gnav_support,
div#gnav_download {width: 50%;}
div#gnav_support ul.gnav_cat_sub li { width: 98%!important; }
div#gnav_support ul.gnav_cat_sub li {width: 98%;}
ul.gnav_cat_sub li a {
	padding: 8px; margin-bottom: 6px; border-radius: 50px;
}



/* pdf
-------------------- */
ul#list_pdf,
ul#list_pdf_col {
	display: inline-block;
  margin-top: 3.125%;/* 20px */
}
ul#list_pdf li,
ul#list_pdf_col li {
  float: left;
  padding-left: 7.8125%;/* 50px */
  margin: 0 0 5px 10px;
}

 
/* Manual
---------------------------------------------*/
ul.Mnual { margin-bottom: 3rem; display: block; }
ul.Mnual li {width: 80%; margin: 0 auto; margin-bottom: 3rem;}
 ul.Mnual li > h3 .frame {font-size: 1rem;}
 
/* Manual pdf 2column 
-------------------- */
div.PDFcol2 {
  overflow: hidden;
}
div.PDFcol2 div.box {
  width: 100%;
  margin-bottom: 10px;
	text-align: left;
	padding-bottom: 2%;
	border-bottom: solid 1px #ccc;
}
div.PDFcol2 div.box br { display: none;}
div.PDFcol2 div.box p {
	text-align: left;
	font-size: 90%;
}


/* トップページナビ
-------------------- */
ul.topnavi{ display: flex; justify-content: space-between;flex-wrap: wrap;}
ul.topnavi li{ width: 48%; background: #fff; text-align: center; margin: 10px 0;}
ul.topnavi li div.main-btn h3{font-size:18px;}
ul.topnavi li div.main-btn a{
  display: block;
  font-size: 110%;
  color: #3171bb;
  text-decoration: none;
  padding:10px;
}
ul.topnavi li .main-btn a:hover{background: #eee;border-radius: 6px;}
ul.topnavi li div.main-btn img{width: 160px;}

ul.topnavi li > div.btn a{
 display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: 1rem auto;
	padding: 0.5rem 0.5rem;
	color: #0071bb;
 font-size: 1rem;
	border:none;
	border-bottom: 2px solid #27acd9;
	border-radius: 100vh;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	transition: 0.5s;
}
ul.topnavi li div.btn a:hover{background: #0071bb; color:#fff;}
ul.topnavi li div.Line2 a {padding:1% 0; font-size: 100%; line-height: 1.4;}

h4.bnr{margin-top: 30px; color: #3171bb;}

/* ナビ
-------------------- */

ul.navi li{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48%;
  border: 1px solid #3171bb;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  padding: 2% 0;
  margin: 1% 0.2%;
}
ul.navi li a p.item_ttl{
  font-size: 100%;
  padding: 1% 2%;
  line-height: 1.2;
}
ul.navi li a{
  display: block;
  font-size: 110%;
  color: #3171bb;
  text-decoration: none;
}
ul.navi li a p.item_ttl{
  font-size: 100%;
  padding: 1% 2%;
  line-height: 1.2;
}

nav#gnav {
	margin-bottom: 20px;
	overflow: hidden;
}
nav#gnav ul li {
	float: left;
	width: 47%;
	margin: 1%;
	padding: 2% 0;
	border-radius: 6px;        /* CSS3草案 */  
    -webkit-border-radius: 6px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 6px;   /* Firefox用 */ 
	border: solid 1px #3171bb;
}
nav#gnav ul li a { padding: 3.125% 0;font-weight:normal;font-size:120%;color: #3171bb;}
nav#gnav ul li a:hover {	color: #6a97c1;}
	
	
/* navi_sub
-------------------- */
ul.nav_sub{ padding: 0px;margin-bottom: 15px;}
ul.nav_sub li{ display: inline-block; width: 30%;	height: auto;	margin: 0.9%; text-align: center;}
ul.nav_sub li a{ color: #fff; text-decoration: none;}

 
/*　contents 
-------------------- */
 div.content_menu {display: block;}
 div.content_menu >.box { width: 100%; margin-bottom: 2rem;}
 
 
/* topic 
 -------------------- */
 #InfoBox { margin-bottom: 2rem;}
 
 
 
 
 
 
/* div
-------------------- */
div.single:not(:last-child),
div.col2:not(:last-child),
div.col3:not(:last-child),
div.col4:not(:last-child),
article.article {margin-bottom: 20%;}


div.col2 div.boxR {text-align: center;}
/*div img:not(:last-child) { margin-bottom: 2.34375%; 15px }*/

div div.box { overflow: hidden; }
div div.box:not(:last-child) { margin-bottom: 6.25%; }/* 40px */
	
div.col2 div.box_p { float: left;
 /* width: 48.95833333333333%;/* 470px */}

/* single */
div.single:first-child { margin-top: 6.25%;/* 40px */}
	
/* layout
-------------------- */
/* img-layout */
.img_left, .img_right { margin-bottom: 3.125%;/* 20px */}

/* text-layout */
.txt_left, .txt_right { margin-bottom: 3.125%;/* 20px */}

.cnt {text-align:center;}
video {	max-width: 100%;	height: auto;}
.spNone {display: none;}

div.DL{width: 90%; margin: 0 auto;}
div.DL a{
  width: 90%;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 2% 0;
  text-align: center;
  font-size: 18px;
}

/* Manual-PDF
-------------------- */
div.Mnual-PDF,
div.Mnual-PDF2 {
margin-bottom: 4%;
display:flex;
justify-content: space-around;
}
div.Mnual-PDF .item,
div.Mnual-PDF2 .item,
div.Mnual-PDF .item2{
width: 45%;
margin: 2%;
text-align: left;
}
div.Mnual-PDF .item img {
width: 100%;
}
div.Mnual-PDF .item2 img {
width: 100%;
}


/* Movie List
---------------------------------------------*/
.movieList {display:flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem;}
.movieList .item { width: 47%;  margin-bottom: 2%;}
.movie_ttl,.movie_txt { margin: 2% 0; padding: 4% 4% 2% 0; font-size: 1.2rem; font-weight: normal;}
.movie_img:after {
  content:"";
  position: absolute;
  background: url(../img//icon_movie_play.png) no-repeat;
  background-size: contain;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px;
  width: 50px;
  height: 50px;
}
 h4.movie_ttl2 {margin-bottom: 1rem; padding: 0.5rem 1rem 0 0; font-size: 0.8rem;}

/* Q&A
---------------------------------------------*/
.faq_box{margin: 0 auto 20px; display:flex; justify-content: flex-start; flex-wrap: wrap;}
.faq_box .item {padding-bottom: 4%; }
 
ul.faq_box { width: 100%; margin: 0 auto 2rem;}
ul.faq_box li a { margin: 0 auto; padding: 0.5rem 0.5rem; font-size: 1rem;}
ul.faq_box.spFlexNo {display: block;}
ul.faq_box.spFlexNo li {width: 95%;}
 
 
div.btn a { padding: 0.5rem 0.5rem; font-size: 1.2rem;}
 
 
/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {min-height: 1px;}

/* サポート
---------------------------------------------*/
.manual_img{
  width: 45%;
  height: auto;
  margin: 2%;
  vertical-align: bottom;
}	
.manual{
  width: 45%;
  height: auto;
  margin: 2%;
  float: left;
  vertical-align: bottom;
}	
	

/* シュアファイル
---------------------------------------------*/
h1.sure {
	font-size: 120%;
  font-weight: bold;
  float: left;
  margin: 0 20px 0 0;
  color: #0071BC;
  letter-spacing: normal;
}
.sure_img{width: 20%;height: auto;}
.tit_sub{	font-size: 50%;}
.tit_sub2{	font-size: 60%;line-height: 1.5em;}
.title_box {overflow: hidden;margin-top: 20px;}
div#language {width: 200px;float: right;text-align: right;}
.font_75 {font-size: 75%; line-height: 1.5em; }
.small{font-size:small;}
	
/*使用承諾契約*/
.agreementBox {
	overflow: scroll;
	overflow-x: hidden;
	height: 250px;
	margin: 10px 0 40px 0;
	padding: 10px;
	background: #fcfcfc;
	border: 1px solid #999;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
	
/*software内table*/
.tablecenter{margin:0 auto;}
.table{
	display:table;
	font-size:13px;
	mergin: 0;
	padding: 0;
}
.table li{clear: both;}
.table li div{display: block;	float: left;}
.tcol1{
	width: 90%;
	background-color: #eeeeee;
	font-weight: bold;
	padding: 5px 15px;
}
.tcol2{width: 90%;padding: 5px 15px;background-color: #fff;}
.table li div{list-style: none;}
.head{}
	
.tb_dot {
	border-top:1px dotted #333;
	border-bottom:1px dotted #333;
	padding:20px;
	margin:0 0 40px 0;
}
	
/*---SDカードフォーマット---*/
.numberColor{
	color:#0A6988;
	font-size:170%;
	margin:0 5px 0 0;
	font-weight:bold;
}
.img-cnt{	margin: 0 0 30px 0;	text-align: center;}
.sd img {	width: 50%;	height: auto;}
	
/*---ファームウェアダウンロード---*/
.download {width: 100%;	margin: 20px auto;}
.download p {
	background: #3171bb;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.download p a {
	width: 100%;
	padding: 15px 0;
	display: block;
	text-decoration: none;
	color: #fff;
	font-size: 140%;
	text-align: center;
}
	.download p a:hover {
	background: #4988d0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/* list-style-table
-------------------- */
ul.list_style_tb { border-top: 0;}
ul.list_style_tb li div.list_tb_ttl {border-top: 1px solid #aaa;}

/* h1-h6
-------------------- */
h1 { font-size: 160%; line-height: 1.5; text-align: center;}
h2 { font-size: 140%; line-height: 1.5; }
h3 { font-size: 110%; line-height: 1.5;color:#2692EE;}
h4 {font-size: 100%; line-height: 1.5;}
h4.toptit {color: #3171bb; font-size: 110%; padding: 5px;}
h5 {font-size: 100%; line-height: 1.5;}
h6 {font-size: 90%; line-height: 1.5;}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  display: block;
  /*font-size: 65%;*/
  font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 2.34375%;/* 15px */
}
	
h1.blueBG{
	background: #0a69b8;
	padding:10px 0 10px 0;
	width: 100%;
	color: #fff;
	text-align: center;
}
h3.step{font-size: 170%;}
h3.category{
  background: #0071bb;
  border-radius: 50px;
  color: #fff;
  font-weight: normal;
  text-align: center;
  padding: 10px;
  margin-bottom: 10px;
}
.title {
	background: url(../img/tit_bar.png);
	font-size: 16px;
	font-weight: normal;
	color: #fff;
	padding: 5px 0 5px 10px;
}
  
div.title_box { display:flex; width: 100%; margin: 0 auto; }
div.title_box .item1 {margin-left: auto; margin-right: 2%;}

/* トップ/ファームウェア　タイトル調整
-------------------- */
.lh1-9 { padding: 0; }


.fs_s {font-size: 80%;}
.fs14 {font-size:14px;}
	

/* Table
-------------------- */
table{
width:100%;
}
.scroll{
	white-space: nowrap;
	overflow: auto;  /*tableをスクロールさせる*/
}
.scroll::-webkit-scrollbar{ /*tableにスクロールバーを追加*/ height: 5px;}
-webkit-overflow-scrolling: touch;
.scroll::-webkit-scrollbar-track{ /*tableにスクロールバーを追加*/ background: #F1F1F1;}
.scroll::-webkit-scrollbar-thumb { /*tableにスクロールバーを追加*/ background: #BCBCBC;}
	
table.table_deco1 td, table.table_deco1 th { padding: 1%;}
table.table_deco2 td, table.table_deco2 th { padding: 1%;}
	
/* Image Size
-------------------- */	
img.wi20 { width: 20%; height: auto;}
img.wi30 { width: 30%; height: auto;}
img.wi40 { width: 40%; height: auto;}
img.wi50 { width: 50%; height: auto;}
img.wi60 { width: 60%; height: auto;}
img.wi70 { width: 70%; height: auto;}
img.wi80 { width: 80%; height: auto;}
	
	
.p_cnt {text-align: center;}


	

/* width
-------------------- */
.spw100 { width: 15.625%; } .spw110 { width: 17.1875%; } .spw120 { width: 18.75%; } .spw130 { width: 20.3125%; } .spw140 { width: 21.875%; } .spw150 { width: 23.4375%; } .spw160 { width: 25%; } .spw170 { width: 26.5625%; } .spw180 { width: 28.125%; } .spw190 { width: 29.6875%; }
.spw200 { width: 31.25%; } .spw210 { width: 32.8125%; } .spw220 { width: 34.375%; } .spw230 { width: 35.9375%; } .spw240 { width: 37.5%; } .spw250 { width: 39.0625%; } .spw260 { width: 40.625%; } .spw270 { width: 42.1875%; } .spw280 { width: 43.75%; } .spw290 { width: 45.3125%; }
.spw300 { width: 46.875%; } .spw310 { width: 48.4375%; } .spw320 { width: 50%; } .spw330 { width: 51.5625%; } .spw340 { width: 53.125%; } .spw350 { width: 54.6875%; } .spw360 { width: 56.25%; } .spw370 { width: 57.8125%; } .spw380 { width: 59.375%; } .spw390 { width: 60.9375%; }
.spw400 { width: 62.5%; } .spw410 { width: 64.0625%; } .spw420 { width: 65.625%; } .spw430 { width: 67.1875%; } .spw440 { width: 68.75%; } .spw450 { width: 70.3125%; } .spw460 { width: 71.875%; } .spw470 { width: 73.4375%; } .spw480 { width: 75%; } .spw490 { width: 76.5625%; }
.spw500 { width: 78.125%; }  .spw510 { width: 79.6875%; } .spw520 { width: 81.25%; } .spw530 { width: 82.8125%; } .spw540 { width: 84.375%; } .spw550 { width: 85.9375%; } .spw560 { width: 87.5%; } .spw570 { width: 89.0625%; } .spw580 { width: 90.625%; } .spw590 { width: 92.1875%; }
.spw600 { width: 93.75%; }  .spw610 { width: 95.3125%; } .spw620 { width: 96.875%; } .spw630 { width: 98.4375%; } .spw640 { width: 100%; }

/* padding
-------------------- */
.pd5 { padding: 2%; }.pd10 { padding: 10px; } .pd20 { padding: 20px; } .pd30 { padding: 30px; } .pd40 { padding: 40px; } .pd50 { padding: 50px; } .pd60 { padding: 60px; } .pd70 { padding: 70px; } .pd80 { padding: 80px; } .pd90 { padding: 90px; } .pd100 { padding: 100px; }
.pd110 { padding: 110px; } .pd120 { padding: 120px; } .pd130 { padding: 130px; } .pd140 { padding: 140px; } .pd150 { padding: 150px; } .pd160 { padding: 160px; } .pd170 { padding: 170px; } .pd180 { padding: 180px; } .pd190 { padding: 190px; } .pd200 { padding: 200px; }
	
.pdt5 { padding-top: 5px; } .pdt20 { padding-top: 20px; }

	
/* margin
-------------------- */
.mg0a {margin:  0 auto;} .mg0 { margin: 0; } .mg10 { margin: 10px; } .mg20 { margin: 20px; } .mg30 { margin: 30px; } .mg40 { margin: 40px; } .mg50 { margin: 50px; } .mg60 { margin: 60px; } .mg70 { margin: 70px; } .mg80 { margin: 80px; } .mg90 { margin: 90px; } .mg100 { margin: 100px; }
.mg110 { margin: 110px; } .mg120 { margin: 120px; } .mg130 { margin: 130px; } .mg140 { margin: 140px; } .mg150 { margin: 150px; } .mg160 { margin: 160px; } .mg170 { margin: 170px; } .mg180 { margin: 180px; } .mg190 { margin: 190px; } .mg200 { margin: 200px; }

/* margin-top
-------------------- */
.mgts5 { margin-top: 5px; } .mgts10 { margin-top: 10px; } .mgts15 { margin-top: 15px; }
	
	
/* margin-bottom
-------------------- */
.mgb10 { margin-bottom: 10px; } .mgb20 { margin-bottom: 20px; } .mgb30 { margin-bottom: 30px; } .mgb40 { margin-bottom: 40px; } .mgb50 { margin-bottom: 50px; } .mgb60 { margin-bottom: 2.5rem!important; } .mgb70 { margin-bottom: 70px; } .mgb80 { margin-bottom: 80px; } .mgb90 { margin-bottom: 90px; } .mgb100 { margin-bottom: 3rem!important; }
.mgb110 { margin-bottom: 110px; } .mgb120 { margin-bottom: 120px; } .mgb130 { margin-bottom: 130px; } .mgb140 { margin-bottom: 140px; } .mgb150 { margin-bottom: 150px; } .mgb160 { margin-bottom: 160px; } .mgb170 { margin-bottom: 170px; } .mgb180 { margin-bottom: 180px; } .mgb190 { margin-bottom: 190px; } .mgb200 { margin-bottom: 200px; }


/* margin-right
-------------------- */
.mgr5 { margin-right: 5px; } .mgr10 { margin-right: 10px; } .mgr15 { margin-right: 15px; } .mgr20 { margin-right: 20px; } 
/* margin-left
-------------------- */
.mgl5 { margin-left: 5px; } .mgl10 { margin-left: 10px; } .mgl15 { margin-left: 15px; }.mgl20 { margin-left: 20px; }
 
}