@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;}
.sp_br {word-break: break-all;}

html,body { font-size:95%; line-height: 1.7; }
img {max-width: 100%;}
ul.disc li{margin-left: 6%;} /*リスト黒丸 出す*/
.p_cnt {text-align: center;}


/* トップページへボタン
-------------------- */
.pagetop {bottom: 32px;right: 16px;}

/* header
-------------------- */
header#header { position: fixed; width: 100%; height: 60px; background: #fff; overflow: visible!important; z-index: 1000; }
	#header_inner { background:#fff; width: 100%;}

/* logo
-------------------- */
div#logo {/*position: absolute;left: 5px;top: 15px;*/ width: 50%; margin: 10px;  }
div#logo a { height: 50px; background-size: contain;}

/* gnav
-------------------- */
nav.gnavi ul li { font-size: 130%; width: 48%;}
nav.gnavi ul li a { padding: 4% 1%; }
nav.gnavi ul li::after {
  position: absolute;
  top: 50%;
  right: .5em;
  content: '';
  border-left: 7px solid transparent; /* 下三角 */
  border-right: 7px solid transparent; /* 下三角 */
  border-top: 7px solid #fff; /* 下三角 */
}

/* nav-ハンバーガー
-------------------- */
/* button */
div#nav {}
div#gnav_btn {
	position: absolute;
	right: 30px;
	top: 10px;
	display: block;
	font-size: 0.8rem;
	text-align: center;
	width: 35px;
	font-weight: bold;
	z-index: 10;
	background-color: #fff;
	border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	color: #00a0e9;
}
div#gnav_btn span.bar {
	display: block;
	border-bottom: 4px solid #00a0e9;
	width: 35px;
	margin-bottom: 2px;
}
div#gnav_btn span.bar::before,
div#gnav_btn span.bar::after {
	content: '';
	display: block;
	border-bottom: 4px solid #00a0e9;
	width: 35px;
	margin-bottom: 6px;
}

.active_nav {	display: block!important; margin-top: 0!important; transition: all 300ms 0s ease;}
nav#gnav  {margin-top: -10px;}
nav#gnav ul {
	transition: all 300ms 0s ease;
	margin-top: -250px;
	background-color: #fff;
	border: 1px solid #ccc;
}
nav#gnav ul li {}
nav#gnav ul li a {display: block; padding: 12px 24px; text-decoration: none; font-size:90%;}
nav#gnav ul li a::before {
	content: '';
	width: 8px;
	height: 8px;
	background-color: #b5b5b5;
	border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	display: inline-block;
	margin-right: 12px;
	margin-bottom: 2px;
}
nav#gnav ul li.here a::before {background-color: #00a0e9;}
nav#gnav ul li.here a {background-color: #c9e9fd; color:#00a0e9;}
nav#gnav ul li:not(:last-child) {border-bottom: 1px solid #ccc;}

.certification {padding-top: 65px;}


/* inner-width
-------------------- */
div#container_inner,
div#footer_inner { padding: 0 4%; }

/* breadclumb
-------------------- */
ul#breadclumb {margin: 12px 30px 0;}

/* container
-------------------- */
div#container {margin-top: 20px;}

/* section
-------------------- */
section:not(:last-child) {margin-bottom: 48px;}
section p {}
section p:not(:last-child) {margin-bottom: 5px;}

.col2 div:not(:last-child) {margin-bottom: 32px;}
div.col2-box p {display: table-cell; vertical-align: middle;}
div.col2-box p.image { width: 25%;}
div.col2-box p.image_phone {width: 60%; text-align: center;}
div.col2-box p.image_phone img {width: 40%; text-align: center;}
div.col2-box p.app { width: 38%;}
div.col2-box .table-cr{display:block;}

/* FlexBox
-------------------- */
ul.flex {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.flex li.item { margin-bottom: 4%; }
ul.flex li.item_img { margin: 0 auto;}
ul.flex.alcnt { align-items: center;}

/* Photo FlexBox
-------------------- */
ul.photo-flex {display: flex; flex-wrap: wrap; justify-content: space-between;}
ul.photo-flex li {display: flex; flex-direction: column;}
ul.photo-flex li.item1 { flex-basis: 42%; margin: 1%; }
ul.photo-flex li.item-arrow { flex-basis: 3%;margin:1%; margin-top: 13%; }
ul.photo-flex li figure { text-align: left!important; font-size: 80%; line-height: 1.5;}
ul.photo-flex li.item_img { margin: 10px;}
ul.photo-flex.alcnt { align-items: center;}

ul.photo-flex li.item-L { flex-basis: 70%; margin-left: 5%; }
ul.photo-flex li.item-arrow_red { flex-basis: 15%; margin:5px; margin-top: 17%; margin-right: 5%; }

.scroll {overflow-x: scroll;}
.Over { width: 100%; min-width: 900px;}
/*スクロールバー全体の高さ*/
.scroll::-webkit-scrollbar { height: 4px;}
/*スクロールバー全体の背景*/
.scroll::-webkit-scrollbar-track { background: #eee;}
/*スクロールバーの動く部分*/
.scroll::-webkit-scrollbar-thumb { background: #aaa; border: none;}

.item-list {}
.item {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}
.item:nth-child(-n+2) {
  margin-top: 0;
}


/* トップページ YouTube
-------------------- */
.youtube{
width: 100%;
margin: 0 auto;
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* TOP
-------------------- */
.main_img {
  max-width: 100%;
  max-height: auto;
  margin: 0px auto;
  padding-top: 70px;
}
.sub_img {
  width: 100%;
  margin: 0 auto;
  padding-top: 20px;
}


/* contents
-------------------- */
.contents_main_img { max-width: 100%;}

/* top
-------------------- */
div.features .features-item { width: 43%; padding:2%; margin: 1%; }

/* パウダーペリオ・対象・仕様パウダー
-------------------- */
.powder_subttl {font-size: 100%;}

/* サポートページ アンカーリンクボタン */
ul.support_btn li { display: flex;  align-items: center; font-size: 100%; width: 48%;}
ul.support_btn li a { display: flex;  align-items: center; padding: 2% 0%; }
ul.support_btn li::after {
  position: absolute;
  top: 50%;
  right: .5em;
  content: '';
  border-left: 5px solid transparent; /* 下三角 */
  border-right: 5px solid transparent; /* 下三角 */
  border-top: 5px solid #fff; /* 下三角 */
}


/* Manual-PDF
-------------------- */
div.Mnual-PDF{
width: 100%;
margin-bottom: 30px;
display:flex;
flex-wrap: wrap;
justify-content: space-around;
}
div.Mnual-PDF2{
width: 100%;
margin-bottom: 30px;
display:flex;
flex-wrap: wrap;
}
div.Mnual-PDF .item,
div.Mnual-PDF .item2,
div.Mnual-PDF2 .item {
width: 40%;
}
div.Mnual-PDF .item:nth-child(2){
margin-right: 0;
}
div.Mnual-PDF p {
text-align: center;
}
div.Mnual-PDF .item #manual1,
div.Mnual-PDF .item #manual2,
div.Mnual-PDF .item #manual3,
div.Mnual-PDF .item #manual4,
div.Mnual-PDF .item #manual5
{width: 100%; margin: 0 auto;}


/* download
-------------------- */
div.download {padding-left: 2%; padding-right: 2%; padding-bottom: 4%!important;}
div.download ul.download_btn {display: block;}
div.download ul.download_btn li a { font-size: 90%; padding: 3%; }
div.download div.download_ttl {font-size: 1.4rem;line-height: 1.5;margin-bottom: 0;}
div.download ul.download_btn li ul.PDF_mark {display: flex; justify-content:space-between; align-items: center;}
div.download ul.download_btn li ul.PDF_mark li.icon a {
  display: inline-block;
	background-color: #fff;
	border-radius: 4px;
	color: #333;
	font-weight: bold;
  width: 20%;
  }
div.download ul.download_btn li ul.PDF_mark li.txt {width: 80%; text-align: left;}

/* Movie List
---------------------------------------------*/
.movieList {display:flex; flex-wrap: wrap; justify-content: space-between;}
.movieList .item { width: 47%;  border: 1px solid #ccc;  margin-bottom: 6%;}
.movie_ttl,.movie_txt { margin: 2% 0; padding: 4% 4%; font-size: 100%; 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;
}

/* 操作、メンテナンスアイコン
-------------------- */
.icon_sousa::before {
  content:"";
  background: url(../../img/icon_sousa.png) left top no-repeat;
  background-size: 75%;
  padding-left: 30px;
}
.icon_maintenance::before {
  content:"";
  background: url(../../img/icon_maintenance.png) left top no-repeat;
  background-size: 75%;
  padding-left: 30px;
}

	
/* font Title
-------------------- */
h1.ttl {font-size: 1.8rem;line-height: 1.7;margin-bottom: 24px; padding: 0 4%;}
h1.ttl span.small { display:block; line-height: -1em!important; letter-spacing: 0.2em; font-size: 60%; background: none;}
h1.ttl::before {margin-right: 16px;}
h1.ttl::after {margin-left: 16px;}
h2.sub_ttl {font-size: 1.2rem; line-height: 1.5; margin-bottom: 16px;}
h3.sub_ttl {font-size: 1.2rem; line-height: 1.5; margin-bottom: 16px; font-weight: bold;}
h3.num {font-size:200%; text-align: center; }
h4.sub_ttl { color: #72c2a3; font-size: 140%; line-height: 1.5; margin-bottom: 2%; }
h4.sub_ttl2 { color: #72c2a3; font-size: 140%; }
h5 {color: #666; font-size: 140%; }
h4.cat_ttl { width: 100%;}

.fs14 {font-size:85%; display:block; line-height: 1.2}
.fs15 {font-size:90%;}
.fs16 {font-size:100%;}
.fs18 {font-size:100%;}
.fs20 {font-size:100%;}
.fs22 {font-size:100%;}
.fs24 {font-size:140%;}
.fs130 {font-size:130%;}
.sp-fs80{font-size: 80%;}
.f_n {font-weight:normal;}
.blue {color:#2692EE;}
.small{font-size:small;}
		

/* Table
-------------------- */
.scroll { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;}
.scroll::-webkit-scrollbar{height: 5px;}/*tableにスクロールバーを追加*/ 
.scroll::-webkit-scrollbar-track{ background: #F1F1F1;}/*tableにスクロールバーを追加*/
.scroll::-webkit-scrollbar-thumb { background: #BCBCBC;}/*tableにスクロールバーを追加*/
table {table-layout: fixed;}
table.tbl_style_01{width: 100%;}
table.tbl_style_02{min-width: 960px;}

table.tbl_style_01,table.tbl_style_02 { font-size:90%; }
table.tbl_style_01 th,
table.tbl_style_01 td,
table.tbl_style_02 th,
table.tbl_style_02 td { white-space: normal; padding: 1%;}
table.tbl_style_02 td sp-br { display: none;}
table.tbl_style_02 td img {width: 50px;}

/* Table Spec
-------------------- */
ul.list_style_tb { border-top: 0;}
ul.list_style_tb li div.list_tb_ttl { border-top: 1px solid #aaa;}
ul.list_style_tb li p { display: table; padding: 3% 0; width: 100%; }


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


/* width
-------------------- */
.spw10 { width: 10%; } .spw15 { width: 15%; } .spw20 { width: 20%; } .spw25 { width: 25%; } .spw30 { width: 30%; } .spw35 { width: 35%; } .spw40 { width: 40%; } .spw45 { width: 45%; } .spw48 { width: 48%; } .spw50 { width: 50%; } .spw55 { width: 55%; } .spw60 { width: 60%; } .spw65 { width: 65%; } .spw70 { width: 70%; } .spw75 { width: 75%; } .spw80 { width: 80%; } .spw85 { width: 85%; } .spw90 { width: 90%; } .spw95 { width: 95%; } .spw100 { 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; }

/* padding-left
-------------------- */	
.pdl5 { padding-left: 5px; } .pdl10 { padding-left: 10px; } .pdl15 { padding-left: 15px; } .pdl20 { padding-left: 20px; }

	
/* margin
-------------------- */
.mg0a{margin:  0 auto;} .mg0 {margin: 0 auto!important;} .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
-------------------- */
.mgt5 { margin-top: 5px; } .mgt10 { margin-top: 10px; } .mgt15 { margin-top: 15px; } .mgt20 { margin-top: 20px; } .mgt40 { margin-top: 40px; }
	
	
/* margin-bottom
-------------------- */
.mgb10 { margin-bottom: 10px; } .mgb20 { margin-bottom: 20px!important; } .mgb30 { margin-bottom: 30px; } .mgb40 { margin-bottom: 40px; } .mgb50 { margin-bottom: 50px; } .mgb56 { margin-bottom: 56px; } .mgb60 { margin-bottom: 60px; } .mgb70 { margin-bottom: 70px; } .mgb80 { margin-bottom: 80px; } .mgb90 { margin-bottom: 90px; } .mgb100 { margin-bottom: 100px; }
.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; } .mgl20 { margin-left: 20px; }
}