@charset "UTF-8";

/* all
-------------------- */
html, body {
  background-color: #fff;
		margin: 0;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, Arial, Helvetica, Tahoma, Verdana,sans-serif;
	-webkit-font-smoothing: antialiased;
  font-feature-settings : "palt";
}

a:link, a:visited { color: #c11022; }
a:hover, a:active { color: #fa162d; }
a img {transition: 0.3s}
a img:hover,
div#logo:hover,
nav#gnav li:hover {
  opacity:0.7;
		filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha(opacity=70)";
}

.entry-icon-new{
    background: #fff;
    color: red;
    display: inline-block;
    font-size: 100%;
    margin-bottom: 4px;
    padding: 4px 30px;
    text-align: center;
    border: 2px solid #f00;
    line-height: normal;
}

/* wrapper
-------------------- */
div#wrapper {
  width: 100%;
	position: relative;
  height: auto !important;
  height: 100%;
  min-height: 100%;
}
/* header
-------------------- */
header#header { height:100%; border-top: 5px solid #00a0e9;}
div.logo_top {display: flex; justify-content: space-between;}
div.logo_top .logo {width: 25%;max-width:190px; margin-left: 1rem;}

/* サポートページへボタン
-------------------- */
.support a{
 display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: 0 1rem;
	padding: 0.5rem 1.5rem;
	font-size: 1rem;
	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;
}
.support a:hover{background: #0071bb; color:#fff;}

/* article
-------------------- */
article.article {display:inline; height:100%;}

/* section
-------------------- */
section {height:100%; overflow: hidden;}

/* footer
-------------------- */
footer#footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: #00a0e9;
  text-align: center;
}
footer#footer small { color: #fff; font-size: 85%;}
footer#footer2 { width: 100%; background-color: #000; text-align: center;}
footer#footer2 small { color: #fff; font-size: 85%;}

div#logo a {
  background: url(../img/logo.gif) left top no-repeat;
  background-size: contain;
  display: block;
  overflow: hidden;
  text-indent: -9999px;
}

.ind {text-indent: 1em;}
img {height: auto; max-width: 100%;}
.middle img{vertical-align:middle;}
img.lp {border: 1px solid #a9a9a9;}
ul li {list-style-type: none;}
/* text-layout */
.txt_left {float: left;word-wrap:break-word;}
.txt_right {float: right;word-wrap:break-word;}
.cnt {text-align:center;}
.no-wrap {display: inline-block;}
.frame {border: 1px solid #0071BB; border-radius: 3px; background: #CAD4FF; padding:2px 4px;}


div.List-nom ol li {list-style-type: decimal; margin-left: 40px; font-size:115%;}

.strong{font-weight: bold;}

/*別窓アイコン表示*/
.blank {background:url(../img/blank.png) right center no-repeat;padding:0 20px 0 0;}

.lh1 { line-height: 1em!important; } .lh1-5 { line-height: 1.5em!important; } .lh1-9 { line-height: 1.9em!important; }.lh2 { line-height: 2em!important; } .lh2-5 { line-height: 2.5em!important; }
.ls1 { letter-spacing: 1em!important; }

/* トップページへボタン
-------------------- */
/* ボタンのスタイル */
#page-top {
  /* buttonタグのリセットCSS */
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
  /* ボタンの装飾 */
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 100;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #115582;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
/* 矢印のスタイル */
#page-top::before {
  content: "";
  width: 12px;
  height: 12px;
  margin-bottom: -6px;
  border-top: solid 3px #fff;
  border-right: solid 3px #fff;
  transform: rotate(-45deg);
}
/* ホバー時のスタイル */
#page-top:hover { transform: scale(1.1);}


/* gnav
-------------------- */
div#gnav {
	border-top: 1px solid #0071BB;
	margin-top: 8px;
	margin-bottom: 8px;
	text-align: center;
}
div#gnav a {display: block;text-decoration: none;}
div.gnav_cat { font-size: 130%; color: #0071BB;	padding: 10px; font-weight: 600;}
ul.gnav_cat_sub {
	background-color: #fff;
	font-size: 110%;
	width: 100%;
}
ul.gnav_cat_sub li a {
	background-color: #0071BB;
	color: #fff;
	padding: 18px 5px;
}
ul.gnav_cat_sub li a:hover { background-color: #719EBC; }


/* breadclumb
-------------------- */
ul#breadclumb {	display: block; list-style: none; overflow: hidden;}
ul#breadclumb li { display: inline-block;}
ul#breadclumb li:first-child {  background: url(../img/icon_home.gif) left center no-repeat;}
ul#breadclumb li:not(:first-child):before { content: " > "; display: inline; font-weight: normal;}
ul#breadclumb li:last-child { font-weight: bold;}

/*topへ戻るボタン
-------------------- */
img.homeback a{
	width:87px;
	height:30px;
	float:right;
	margin:0 20px 0 0;
}

/*ボタン
-------------------- */
.product-info a {
 display: inline-block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: 1rem auto;
	padding: 2rem 2rem;
	font-size: 1.6rem;
	color: #0071bb;
 background: #fff;
	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;
}
.product-info a:hover{background: #0071bb; color:#fff;}


div.btn {margin: 6px auto;}
div.btn a{
 display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: 1rem auto;
	padding: 1rem 0.5rem;
	font-size: 1.3rem;
	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;
}
div.btn a:hover{background: #0071bb; color:#fff;}

div.LinkBtn {margin: 1rem auto;}
div.LinkBtn a{
 display: inline-block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	padding: 1rem 2.5rem;
	font-size: 1.3rem;
 font-weight: bold;
	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;
}
div.LinkBtn a:hover{
  border-collapse:separate;
  background: #0071bb;
  color: #fff;
}

/* pdf
-------------------- */
ul#list_pdf,
ul#list_pdf_col {
  list-style: none;
}
ul#list_pdf li,
ul#list_pdf_col li {
  background: url(../img/pdf_icon_24x24.gif) left center no-repeat;
}

.pdf {
  display: inline-block;
  background: url(../img/pdf_icon_24x24.gif) left center no-repeat;
  padding-left: 30px;
}
.pdf_r {
  display: inline-block;
  background: url(../img/pdf_icon_24x24.gif) right center no-repeat;
  padding-right: 24px;
}

.pdf_icon {
  display: inline-block;
  background: url(../img/pdf_icn_red.png) left center no-repeat;
  padding-left: 30px;
	background-size: contain;
}
.pdf_icon_en {
  display: inline-block;
  background: url(../img/pdf-icon.png) left center no-repeat;
  padding-left: 50px;
	background-size: contain;
}
.DL_icon {
  display: inline-block;
  background: url(../img/dl_mark.png) left center no-repeat;
  padding-left: 50px;
	background-size: contain;
}
.movie_icon {
  display: inline-block;
  background: url(../img/icn_movie.png) right center no-repeat;
  padding-right: 35px;
	background-size: contain;
}

/* arrow
-------------------- */
.arrow{
  display: inline-block;
  background: url(../img/arrow_right.gif) left center no-repeat;
  padding-left: 20px;
}


/* gnav
-------------------- */
nav#gnav {}
nav#gnav ul { width: 100%;}
nav#gnav ul li { text-align: center;}
nav#gnav ul li a { display: block; text-decoration: none;}


/* トップ　コンテンツメニュー
-------------------- */
div.content_menu {max-width: 960px; display: flex; flex-wrap: wrap; justify-content: space-between;}
div.content_menu >.box {width: 48%; margin-bottom: 2rem;}

h3.category{
  background: #0071bb;
  border-radius: 50px;
  color:#fff;
  font-weight: normal;
  text-align: center;
  padding: 10px;
  margin-bottom: 20px;
}


/* ナビ */
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;
	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;}


/* Manual
---------------------------------------------*/
ul.Mnual { margin-bottom: 60px; display: flex; flex-wrap: wrap; justify-content: space-around;}
ul.Mnual li {width: 48%;}
ul.Mnual li .image {width: 50%; margin: 0 auto;}
ul.Mnual li .image2 {width: 80%; margin: 0 auto;}
ul.Mnual li > h3 {font-size: 1.5rem; text-align: center; color:#094e94;}
ul.Mnual li > h3 .frame { display: inline-block; border: 1px solid #0071BB; border-radius: 3px; background: #CAD4FF; padding: 2px 4px;}
ul.Mnual li > p span.frame_red {display: inline-block; border: 1px solid red; border-radius: 3px; background: red; padding: 0.1rem 1rem; color:#fff; line-height: 1.2;}

/* Movie List
---------------------------------------------*/
h3.movie_ttl {color:#232584;}
h4.movie_ttl2 {
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1.2rem;
  border-bottom: 1px solid #0071bb;
}
.movieList{width:100%; display:flex; flex-wrap: wrap; margin-bottom: 4rem;}
.movieList .item a{
  width: 100%;
  color: #05161a;
  text-decoration: none;
  outline: none;
  }
.movie_img {
  position: relative;
  display: block;
  background-color: #05161a;
  line-height: 0;
}
.movie_img img {
  width: 100%;
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
}


/* Q&A
---------------------------------------------*/
ul.faq_box{width:90%; margin: 0 auto 4rem; display:flex; justify-content: space-around; flex-wrap: wrap;}
ul.faq_box li { width: 45%;  margin: 0 2%;}
ul.faq_box li a {
 display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	margin: 1rem auto;
	padding: 1rem 0.5rem;
	font-size: 1.2rem;
	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;
}
ul.faq_box li a:hover{background: #0071bb; color:#fff;}
@media screen and (min-width:768px){
	ul.faq_box li a.line2 {
		font-size: 1.1rem;
		line-height: 1.4;
		min-height: 2.8rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}


/* 更新情報
---------------------------------------------*/
#InfoBox{
	border:1px solid #ccc;
	border-radius: 12px;
	padding:0 15px;
	margin-bottom: 8rem;
}
#InfoList{
	margin:2%;
	padding:0;
}
#InfoList li{
	list-style-type:none;
	margin:2% 0 2% 0;
	padding: 7px 0 7px 0;
	border-bottom:dotted 1px #999;
}
#InfoList li.last {
  border-bottom: 0;
}

	/* Sample
---------------------------------------------*/
.sampleTable td{
	border-right:1px #ccc solid;
	border-bottom:1px #ccc solid;
	padding:6px;
}
a.zoomIcon{
	height:18px;
	width:18px;
	background:url(../img/zoom.gif) left center no-repeat;
	padding:0 0 0 20px;
	margin:0;
}


/* table decoration setting
------------------------------------------ */
table.table_deco1 {
  clear: both;
	border: 1px solid #ccc;
  width: 100%;
}
table.table_deco1 td {
	background-color: #eee;
  border-bottom: 1px solid #ccc;
	border-collapse: collapse;
  /* border-right: 1px solid #999; */
	border-spacing: 0;
}
table.table_deco1 th {
  border-bottom: 1px solid #ccc;
	background-color: #EEEEEE;
	/* border-right: 1px solid #999; */
	color: #333;
}

table.table_deco2 {
	clear: both;
	border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
	width: 100%;
}
table.table_deco2 td {
	vertical-align: middle;
	border-bottom: 1px solid #ccc;
	border-collapse: collapse;
	/* border-right: 1px solid #999; */
	border-spacing: 0;
}
table.table_deco2 th {
	vertical-align: middle;
	background-color: #EEEEEE;
	border-bottom: 1px solid #ccc;
	/* border-right: 1px solid #999; */
	text-align: left;
}
table.table_deco2 th.line{
border-left: 1px solid #ccc;
}

/* list-style-table
-------------------- */
ul.list_style_tb { border: 1px solid #aaa; list-style: none;}
ul.list_style_tb li:not(:last-child) {}
ul.list_style_tb li.even {}
ul.list_style_tb li.odd {}
ul.list_style_tb li div.list_tb_ttl {
  border-bottom: 1px solid #aaa;
  text-align: center;
  font-weight: bold;
  width: 100%;
  color: #333;
  background-color: #eee;
}
ul.list_style_tb li p { padding: 1.0416666666666665%;/* 10px */}

/* list
-------------------- */
/* none */
ul.list_style_none { list-style: none;}

/* default */
ul.list_style_def { list-style: circle;}

/* number-list
-------------------- */
/* default */
ol.list_style_def { list-style: decimal;}

/* underLine
-------------------- */
.uline {border-bottom: solid 1px #0F73D6;}


/* 特長リスト
-------------------- */
ul.menu_features{
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
}

/* TOP 特長リスト
-------------------- */
ul.top_menufeatures{
  display: flex;
  justify-content: space-between;
  flex-flow: row nowrap;
}
ul.top_menufeatures li{
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  text-align: center;
  margin: 0 1%;
  padding:0;
}
ul.top_menufeatures li a{
  display: block;
  font-size: 110%;
  color: #333;
  text-decoration: none;
}
ul.top_menufeatures li:hover{ background: #eee;}
ul.top_menufeatures li a p.item_ttl{ font-size: 110%; padding: 6% 2%;}
ul.top_menufeatures li img{ border-radius: 4px;}


/* clearfix
-------------------- */
.clearfix:after{
	content:"";    /* 説明１  */
	display:block;    /* 説明２  */
	clear:both;    /* 説明３  */
}