@charset "UTF-8";
* {
  zoom: 1;
  font-family: Verdana, Roboto, "Droid Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
}
body {
  font-size: 16px;
  color: #3f4c54;
  background-color: #FFF;
	line-height: 1.5;
}
@media screen and (max-width:480px){
body {
  font-size: 14px;
	line-height: 1.4;
}}
a {
	text-decoration: none;
	color: #3C8DBC;
  transition: all .3s ease;
}
a:hover {
	text-decoration: underline;
  /*filter: alpha(opacity=70);
  opacity: 0.70;
  -moz-opacity: 0.70;*/
}
a[target="_blank"]:after {
	content: url(../img/icon_blankLink.png);
	margin-left: 5px;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb50 {
	margin-bottom: 50px !important;
}
.ml20 {
	margin-left: 20px !important;
}
.mt15 {
	margin-top: 15px !important;
}
.floatL {
	float:left !important;
}
.floatR {
	float: right !important;
}
.txtC {
	text-align:center !important;
}
.txtR {
	text-align:right !important;
}
img{
	max-width: 100%;
	height: auto;
	display:block;
	border-radius: 4px;
}
img.border{
	border: 2px solid #eee;
}
/*i {
	margin-right: 10px;
}*/
.cap {
	font-size: 90%;
}
.caution {
	display: list-item;
	list-style: none outside;
	padding-left: 1em;
	margin-bottom: 5px;
}
.caution:before {
	content: "※";
	margin-left: -1em;
}
.img-responsive-overwrite{
    margin: 0 auto;
}
.bgGray {
	background-color: #f7f9f9;
}

/*------------------------------------
           clear fix
------------------------------------*/
.cf:before,
.cf:after {
    content: " ";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}
img .fluid{
     max-width: 100%;
     height: auto;
     display:block;
}

/*------------------------------------
           btn
------------------------------------*/
.cvBtn, .detailBtn, .linkBtn {
	display: inline-block;
	font-size:20px;
	background-color: #F3CE85;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  transition: all .3s ease;
	/*box-shadow:rgba(204, 204, 204, 0.65098) 5px 5px 0px 0px;
	-webkit-box-shadow:rgba(204, 204, 204, 0.65098) 5px 5px 0px 0px;
	-moz-box-shadow:rgba(204, 204, 204, 0.65098) 5px 5px 0px 0px; */
}
.cvBtn:hover, .detailBtn:hover, .linkBtn:hover {
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
@media screen and (max-width:768px){
.cvBtn, .detailBtn, .linkBtn {
	margin: 20px auto;
}}
@media screen and (max-width:480px){
.cvBtn, .detailBtn, .linkBtn {
	margin-top: 20px;
	font-size:17px;
}}
.cvBtn a, .detailBtn a, .linkBtn a {
	display: block;
	padding: 20px 40px;
	color: #fff;
}
.cvBtn a:hover, .detailBtn a:hover {
	background-color: #E4B558;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	text-decoration: none;
}

.detailBtn {
	background-color: #3f4c54;
	font-size: 18px;
	margin-top: 20px;
}
.detailBtn a {
	padding: 10px 20px;
}
.detailBtn a:hover,
.cvBtn a:hover {
  filter: alpha(opacity=100);
  opacity: 1.00;
  -moz-opacity: 1.00;
}
.linkBtn {
	background-color: #f7f9f9;
	font-size: 18px;
	margin: 5px 5px 20px;
}
.linkBtn a {
	padding: 10px 20px;
	color: #888;
}
.linkBtn a:hover {
	color: #3C8DBC;
	text-decoration: none;
}

/*------------------------------------
           header
------------------------------------*/
.header {
	width: 100%;
	height: auto;
	position:relative;
	/*border-bottom: 3px solid #3f4c54;*/
}
.headerIn {
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
.header .telBox {
	width: 100%;
	margin-top: 10px;
	padding-right: 15px;
}
.header .telBox img {
	float: right;
}
.header h1 img {
	height: 30px;
}
.header .navbar-brand {
	padding: 20px 0 0;
}	
.header .navbar-toggle {
	background-color: #3C8DBC;
}
.header .navbar-toggle:hover,
.header .navbar-toggle:focus {
	background-color: #267AAA;
}
.header .navigation {
	float: right;
}
.header .navigation,
.header .navigation a {
	color: #3f4c54;
}
.header .navigation ul {
  font-size: 0;
}
.header .navigation li {
	display: inline-block;
	margin: 10px 0 0;
	float: none;
  font-size: 15px;
}
.header li.nav a {
	padding: 15px;
}
.header li.nav a:hover,
.header li.nav a:focus,
.header li.nav a.active {
	color: #3C8DBC;
	/*border-bottom: 10px solid #3C8DBC;*/
	position: relative;
	text-decoration: none;
	background-color: inherit;
}
/*.header li.nav a:hover:before,
.header li.nav a:focus:before,
.header li.nav a.active:before{
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0px;
	border: 8px solid transparent;
	border-bottom: 8px solid #3C8DBC;
	margin-left: -8px;
}*/
.header li.navBtnNew,
.header li.navBtnLogin {
	display: inline-block;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	margin-left: 10px;
	font-size: 14px;
  transition: all .3s ease;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.header li.navBtnNew:hover,
.header li.navBtnLogin:hover {
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.18), 0 2px 8px 0 rgba(0, 0, 0, 0.15);
}
.header li.navBtnNew a,
.header li.navBtnLogin a {
	display: block;
	padding: 8px 15px;
}
.header li.navBtnNew a:hover,
.header li.navBtnLogin a:hover,
.header li.navBtnNew a:focus,
.header li.navBtnLogin a:focus {
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	text-decoration: none;
}
.header li.navBtnNew {
	background-color: #F3CE85;
}
.header li.navBtnNew a {
	color: #fff !important;
}
.header li.navBtnNew a:hover, .header li.navBtnNew a:focus {
	background-color: #E4B558;
}
.header li.navBtnLogin {
	background-color: #ececec;
}
.header li.navBtnLogin a:hover, .header li.navBtnLogin a:focus {
	color: #3f4c54;
}
.header li.navBtnLogin a:hover, .header li.navBtnLogin a:focus {
	background-color: #ddd;
	color: #3f4c54;
}
@media screen and (max-width:768px){
.header .navigation {
	float: none;
	width: 100%;
	background-color: #fff;
	padding: 0 30px;
	border-top: 1px solid #3C8DBC;
}
.header .navigation li {
	display: inherit;
	margin: 0;
	text-align: center;
}
.header li.nav a,
.header li.navBtnNew a,
.header li.navBtnLogin a {
	padding: 10px 0;
}
.header li.nav a:hover,
.header li.nav a:focus,
.header li.nav a.active {
	color: #3C8DBC;
	border-bottom: none;
	text-decoration: none;
	background-color: none;
}
.header li.nav a:hover:before,
.header li.nav a:focus:before,
.header li.nav a.active:before{
	border: none;
}
.header li.navBtnNew,
.header li.navBtnLogin {
	border-radius:0;
	background-color: #fff;
}
.header li.navBtnNew {
	border-top: 1px solid #3C8DBC;
}
.header li.navBtnNew a,
.header li.navBtnLogin a {
	color: #888 !important;
}
.header li.navBtnNew a:hover,
.header li.navBtnNew a:focus,
.header li.navBtnLogin a:hover,
.header li.navBtnLogin a:focus {
	color: #3C8DBC !important;
	background-color: #fff;
}
.header .navigation img {
	margin: 0 auto 10px;
}
}
/*------------------------------------
           h2
------------------------------------*/
h2{
	font-size: 26px;
	font-weight: normal;
	text-align: center;
	margin-bottom: 30px;
	color: #3C8DBC;
}
@media screen and (max-width:480px){
h2 {
	font-size: 23px;
}}

/*------------------------------------
           main
------------------------------------*/
.main {
	background-color: #3C8DBC;
	padding: 20px 0;
	width: 100%;
}
.mainIn {
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
  display: table;
}
.main .mainImgBox {
	width: 31%;
	display: table-cell;
	vertical-align: middle;
}
.main .mainImgBox img {
	margin: 0 auto;
}
.main .mainTxtBox {
	width: 54%;
	display: table-cell;
	vertical-align: middle;
	margin: 20px 0 0 10px;
	color: #fff;
	font-size: 18px;
	padding-right: 10px;
}
.main .mainTxtBox h2 {
	font-size: 30px;
	color: #fff;
	margin-left: 10px;
}
.main .mainTxtBox p {
	margin: 0 0 30px 10px;
}
.main .mainTxtBox p.cvBtn {
	margin: 0 auto;
}
@media screen and (max-width:768px){
.mainIn {
	width: 100%;
}
.main .mainImgBox {
	width: 45%;
}
.main .mainTxtBox {
	width: 50%;
	margin: 20px 0 0 10px;
}}
@media screen and (max-width:480px){
.mainIn {
	position: relative;
	height: 800px;
}
.main .mainImgBox {
	position:absolute;
	top:0;
}
.main .mainTxtBox  {
	position:absolute;
	top:400px;
}
.main .mainImgBox, .main .mainTxtBox  {
	width: 100%;
	display: block;
	box-sizing: border-box;
	margin: 0 auto 20px;
	padding: 0 10px;
}
.main .mainImgBox img {
	margin: 0 auto;
}}

/*------------------------------------
           service
------------------------------------*/
.service {
	width: 100%;
	padding: 40px 0;
}
.serviceIn {
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
.service1, .service2, .service3 {
	width: 31.5%;
	margin: 0 1%;
	float: left;
}
.serviceL, .serviceR {
	width: 32%;
	margin: 0 8%;
	float: left;
}
.serviceBox {
	margin-bottom: 30px;
	overflow:hidden;
}
.service dd {
	margin: 0 ;
	font-size: 14px;
}
.service dd.title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 600;
	text-align:center;
}
.service1, .service2 {
		margin-right: 0.5%;
}
.service img{
	margin: 0 auto 15px;
}
.service ul {
	list-style: inherit;
	margin: 0 auto;
	width: 80%;
	padding-left: 20px;
}
@media screen and (max-width:768px){
.service1, .service2, .service3, .serviceL, .serviceR {
	width: 100%;
}
.service dt {
	float: left;
	margin-right: 20px;
	width:45%;
}
.service dd,
.service dd.title {
	margin-bottom: 10px;
}

.serviceBox {
	margin-bottom: 0;
}
}
@media screen and (max-width:480px){
.service1, .service2, .service3, .serviceL, .serviceR {
	margin: 0 auto;
	box-sizing: border-box;
}
.service1, .service2, .serviceL {
	margin-bottom: 30px;
}
.service dt {
	float: none;
	margin-right: 0;
	width:100%;
}
.service dd,
.service dd.title {
	width:80%;
	margin: 0 auto 10px;
}
.service dd.title {
	margin-bottom: 10px;
}
.serviceBox {
	margin-bottom: 30px;
}
}

/*------------------------------------
           sec01-03
------------------------------------*/
.secA, .secB {
	width: 100%;
	padding: 40px 0;
	display: table;
}
.secIn {
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}
.secIn img {
	margin: 0 auto;
}
.secIn .txtBox,
.secIn .imgBox {
	display: table-cell;
	vertical-align: middle;
}
.secIn .txtBox {
	width: 62%;
}
.secIn .imgBox {
	width: 30%;
}
.secA .txtBox {
	float: right;
	margin-right: 10px;
}
.secA .imgBox {
	padding: 0 20px 0 10px;;
}
.secB .txtBox {
	float: left;
	margin-left: 20px;
}
.secB .imgBox {
	padding: 0 10px 0 20px;;
}
.secIn p {
	margin-bottom: 15px;
}
.secIn p:last-child {
	margin-bottom: 0;
}
.secIn li {
	list-style: disc;
	margin-left: 20px;
}
.secIn .cvBtn {
	background-color: #333;
	font-size: 18px;
	margin-top: 20px;
}
.secIn .cvBtn a {
	padding: 10px 20px;
}
.secIn .cvBtn a:hover {
  filter: alpha(opacity=100);
  opacity: 1.00;
  -moz-opacity: 1.00;
}
@media screen and (max-width:768px){
.secIn .txtBox,
.secIn .imgBox {
	width: 100%;
	float: none;
	margin: 0 auto;
	display:block;
	padding: 0;
}
.secIn .txtBox{
	width: 80%;
}
.secIn {
	display: block;
	padding: 0 10px;
	box-sizing: border-box;
}
.secIn .imgBox img {
	margin: 20px auto 0;
}}
@media screen and (max-width:480px){
.secIn .txtBox{
	width: 100%;
}
}

/*------------------------------------
           apiBox
------------------------------------*/
.apiBox img {
	height: 40px;
	display: inline-block;
	margin: 20px 40px;
}
@media screen and (max-width:768px){
.apiBox {
	width: 90%;
	margin: 0 auto;
}
.apiBox img {
	margin: 20px 5%;
}
}
@media screen and (max-width:480px){
.apiBox img {
	display: block;
	margin: 25px auto 0;
	height: 30px;
}
}
/*------------------------------------
           cvBox
------------------------------------*/
.cvBox {
	padding: 80px 0;
	text-align: center;
	background-color: #f7f9f9;
}
.cvBox p.txt {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 30px;
}

/*------------------------------------
           info
------------------------------------*/
.info {
	padding: 40px 0;
	margin-bottom: 40px;
}
.info dl {
	width: 80%;
	margin: 0 auto;
}
.info dt, .info dd{
	border-top: 1px solid #c7dce8;
}
.info .last {
	border-bottom: 1px solid #c7dce8 !important;
}
.info dt:first-child,
.info dt:first-child + dd {
	border:none;
}
.info dt {
	float: left;
	width: 160px;
	padding: 10px 0 10px 10px;
}
.info dd {
	margin-left: 160px;
	padding: 10px;
}
@media screen and (max-width:768px){
.info {
	margin-bottom: 20px;
}
}
@media screen and (max-width:480px){
.info dl {
	width: 100%;
}
.info dt {
	width: 140px;
}
.info dd {
	margin-left: 140px;
}
}

/*------------------------------------
           footer
------------------------------------*/
.footer {
  width: 100%;
	background-color: #384147;
  font-size: 14px;
	padding-bottom: 10px;
	color:#fff;
	padding-top: 10px;
	border-bottom: 20px solid #454357;
}
.footer a {
	color:#fff;
}
.footer a:hover {
	color: #3C8DBC;
	text-decoration: none;
}
.footerIn {
  margin: 20px auto;
	padding: 0 15px;
}
.footer .linkBox {
	margin-bottom: 50px;
}
.footer dl.sitemap {
	width: 65%;
	float:left;
}
.footer dl.relatedLinks {
	width: 30%;
	float: right;
}
.footer dt {
	border-bottom: 1px solid #3C8DBC;
	padding:10px;
}
.footer dd {
	padding:20px 10px 10px;
}
.footer .linkBox ul {
	float: left;
	margin-right: 60px;
}
.rightul {
	float: left;
	margin-right: 0px !important;
}
.footer dl.sitemap ul:last-child {
	margin-right: 0;
}
.footer .linkBox li {
	background: url(../img/icon_link.png) no-repeat top 5px left;
	padding-left: 10px;
	margin-bottom: 5px;
}
.footer .copyright {
	font-size: 12px;
	text-align: center;
	color: #3C8DBC;
}

.footer .snsBox ul {
    clear:both;
}

.footer .snsBox  {
	margin-top: 20px;
	overflow: hidden;
}
.footer .snsBox .ft_sns {
	width: 255px;
	margin: 0 auto 20px;
	overflow: hidden;
}
.footer .snsBox .ft_sns li {
	float: left;
	padding-left: 20px;
}
.footer .snsBox .ft_sns li img{
	max-width: 58px;
	width: auto;
	height: auto;
}
.footer .snsBox .ft_sns li a:hover img{
  filter: alpha(opacity=70);
  opacity: 0.70;
  -moz-opacity: 0.70;
}
.footer .snsBox .ft_sns a[target="_blank"]:after {
	content: "";
	margin-left: 0;
}

@media screen and (max-width:768px){
.footer {
	padding-bottom: 10px;
}
.footerIn {
  margin: 20px auto 0;
}
.footer dl.sitemap,
.footer dl.relatedLinks {
	width: 100%;
	float:none;
}
.footer dl.sitemap{
	margin-bottom: 30px;
}
.footer dt {
	color: #3C8DBC;
}
.footer ul {
	float: none;
}
}
@media screen and (max-width:480px){
.footer li {
  font-size: 13px;
}
.footer dl.sitemap ul:last-child {
	margin-right: 60px;
}
}

/*------------------------------------
           page top
------------------------------------*/
#page-top {
  position: fixed;
  bottom: 0;
  right: 20px;
  font-size: 77%;
  filter: alpha(opacity=80);
  opacity: 0.80;
  -moz-opacity: 0.80;
}
#page-top a {
    background: #333;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 20px 0;
    text-align: center;
    display: block;
		border-radius: 5px 5px 0 0;
}
@media screen and (max-width:480px){
#page-top {
	right: 10px;
}
#page-top a {
    padding: 10px 0;
}}

/* ------------------- Lower layer -------------------------*/
/* ------------------------------------------------------------
  toppage Link
------------------------------------------------------------ */
.toppageLink {
	text-align: center;
	margin: 50px 0;
}
.toppageLink a {
	padding: 20px;
	background-color: #f7f9f9;
	color: #888;
	border-radius: 5px;
}
.toppageLink a:hover{
	color: #888;
  filter: alpha(opacity=80);
  opacity: 0.80;
  -moz-opacity: 0.80;
	text-decoration: none;
}

/* ------------------------------------------------------------
  pageTitle
------------------------------------------------------------ */
.pageTitle {
	width: 100%;
	background-color: #3C8DBC;
}
.pageTitle h2 {
	text-align: left;
	color: #fff;
  margin: 0 auto;
	padding: 20px 15px;
	font-size: 16px;
}
@media screen and (max-width:768px){
.pageTitle h2 {
	margin-left: 10px;
}}

/* ------------------------------------------------------------
  breadcrumb
------------------------------------------------------------ */
.breadcrumb {
	background-color: transparent;
	margin: 0 auto;
	border: none;
	width: 100%;
  padding-left: 15px;
  padding-right: 15px;
}
.breadcrumb i {
	margin-right: 3px;
}

/* ------------------------------------------------------------
  linkBox
------------------------------------------------------------ */
.linkBox ul.linkBox {
	width: 80%;
	margin: 0 auto 20px;
}

.linkBox ul.linkBox li {
	display: inline-block;
	margin: 0 10px;
}
.linkBox ul.linkBox li i {
	margin-right: 3px;
}

/* ------------------------------------------------------------
  application
------------------------------------------------------------ */
.application {
	width: 100%;
	margin: 0 auto 0;
}
.application .appTopBox,
.application .appBox {
	padding: 0 15px;
	margin: 0 auto 50px;
}
@media screen and (min-width:1024px){
.application .appTopBox,
.application .appBox {
	width: 80%;
}}
.application h3 {
	color: #3f4c54;
	padding: 30px;
	font-weight: 600;
	text-align: center;
	font-size: 24px;
	border-top: 10px solid #f7f9f9;
}
@media screen and (max-width:480px){
.application h3 {
	font-size: 20px;
}}
.application .appTopBox img {
	margin: 20px auto 0;
}
.application .appTopBox p,
.application .appBox p:not(.detailBtn) {
	width: 90%;
	margin: 0 auto 15px;
}
.application .appBox ul {
	width: 80%;
	list-style: disc;
	margin: 0 auto 15px;
}
.application .appBox ul.check {
	list-style-image: url(../img/icon_check.png);
}
.application .appBox li {
	margin-bottom: 5px;
}
.application .appBox dl.list {
	width: 80%;
	margin: 0 auto 15px;
}
.application .appBox .list dt {
	font-weight: 600;
	display:list-item;
	list-style-image: url(../img/icon_check.png);
}
.application .appBox .list dd {
	margin: 0 0 20px 20px;
}
.application .appBox i.fa-circle {
	color:#EEEEEE !important;
}
.application .appBox i.fa-inverse {
	color: #3C8DBC !important;
}
.application .appBox .txtBox {
	width: 55%;
	float: left;
	margin-right: 2%;
}
.application .appBox .txtOnlyBox {
	width: 47%;
}
.application .appBox .txtBox p, .application .appBox .txtOnlyBox p {
	width: 100%;
}
.application .appBox .txtBox h4, .application .appBox .txtOnlyBox h4 {
	margin-bottom: 20px;
	font-size: 18px;
}
.application .appBox .imgBox {
	width: 42%;
	float: right;
}
@media screen and (max-width:480px){
.application .appBox .txtBox, .application .appBox .txtOnlyBox {
	width: 100%;
	float: none;
	margin-right: 0;
}
.application .appBox .txtBox h4, .application .appBox .txtOnlyBox h4 {
	margin-bottom: 10px;
	font-size: 14px;
}
.application .appBox .imgBox {
	width: 100%;
	float: none;
	margin: 0 auto;
}
.application .appBox .txtOnlyBox.floatL,
.application .appBox .txtOnlyBox.floatR {
	float: none;
}
.application .appBox .txtOnlyBox.floatL{
	margin-bottom: 50px;
}
}
/*-------------- index --------------*/
.appList {
	width: 100%;
	padding: 0 0 40px;
}
.appListIn {
	margin: 0 auto;
	padding: 0 15px;
}
/*@media screen and (min-width:1024px){
.appListIn {
	padding-left: 15px;
    padding-right: 15px;
}}*/
.appList1, .appList2, .appList3 {
	width: 32.5%;
	float: left;
	padding: 1%;
	border: 1px solid #a3b4be;
	border-radius: 4px;
	min-height: 380px;
	position: relative;
}
.appListBox {
	margin-bottom: 20px;
	overflow:hidden;
}
.appList dd {
	margin: 0 ;
	font-size: 14px;
}
.appList dd.title {
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 600;
	text-align:center;
}
.appList1, .appList2 {
		margin-right: 1%;
}
.appList img{
	margin: 0 auto 15px;
}
@media screen and (max-width:768px){
.appList1, .appList2, .appList3 {
	width: 100%;
	margin-bottom: 15px;
	min-height: 0;
	padding: 2% 1%;
}
.appList dt {
	float: left;
	margin-right: 20px;
	width:45%;
}
.appList dd,
.appList dd.title {
	margin-bottom: 10px;
	width: 50%;
	float: right;
}
.appListBox {
	margin-bottom: 0;
}
}
@media screen and (max-width:480px){
.appList1, .appList2, .appList3 {
	margin: 0 auto;
	box-sizing: border-box;
	margin-bottom: 15px;
}
.appList dt {
	float: none;
	margin-right: 0;
	width:100%;
}
.appList dd,
.appList dd.title {
	width:80%;
	float: none;
	margin: 0 auto 10px;
}
.appList dd.title {
	margin-bottom: 10px;
}
}
.appList .appListBox a {
	color: #333;
}
.appList .appListBox a:hover {
	color: #333;
}
.appList .appListBox a:hover img,
.appList .appListBox a:hover dt,
.appList .appListBox a:hover dd {
  filter: alpha(opacity=70);
  opacity: 0.7;
  -moz-opacity: 0.7;
}
.appList .appListBox dd.appBtnBox {
	position: absolute;
	bottom: 10px;
	width: 93%;
}
.appList .appListBox dd p.price {
	display: block;
	padding: 5px;
	text-align: center;
	left: 0;
	float: left;
	background-color: #a3b4be;
	width: 80px;
	font-size: 12px;
	color: #fff;
	margin-top: 11px;
}
.appList .appListBox dd p.appDetailBtn {
	display: block;
	padding: 10px 25px;
	text-align: center;
	right: 0;
	float: right;
	background-color: #3C8DBC;
	color: #fff;
	border-radius: 4px;
}
@media screen and (max-width:768px){
.appList .appListBox dd.appBtnBox {
	margin-top: 20px !important;
	position: relative;
	width: 50%;
	float: right;
	margin-right: 10px;
	bottom: 0;
	margin-bottom: 0;
}}
@media screen and (max-width:480px){
.appList .appListBox dd.appBtnBox {
	margin-top: 20px !important;
	position: relative;
	width: 80%;
	float: none;
	margin: 0 auto 10px;
}}
.appList p.free {
	text-align: center;
	color: #3C8DBC;
	margin-top: 50px;
	font-weight: 600;
}

/*-------------- reportBox --------------*/
.reportBox {
	margin-bottom: 30px;
	overflow:hidden;
}
.report1, .report2, .report3 {
	width: 31.5%;
	margin: 0 1%;
	float: left;
}
.report4, .report5 {
	width: 31.5%;
	margin: 0 9%;
	float: left;
}
.reportBox dd {
	margin: 0 ;
	font-size: 14px;
}
.reportBox dd.title {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 600;
	text-align:center;
}
.report1, .report2 {
		margin-right: 0.5%;
}
.reportBox img{
	margin: 0 auto 10px;
}
@media screen and (max-width:768px){
.report1, .report2, .report3, .report4, .report5 {
	width: 100%;
}
.reportBox dt {
	float: left;
	margin-right: 20px;
	width:45%;
}
.reportBox dd,
.reportBox dd.title {
	margin-bottom: 10px;
}

.reportBox {
	margin-bottom: 0;
}}
@media screen and (max-width:480px){
.report1, .report2, .report3, .report4, .report5 {
	margin: 0 auto;
	box-sizing: border-box;
}
.report1, .report2 {
	margin-bottom: 30px;
}
.reportBox dt {
	float: none;
	margin-right: 0;
	width:100%;
}
.reportBox dd,
.reportBox dd.title {
	width:80%;
	margin: 0 auto 10px;
}
.reportBox dd.title {
	margin-bottom: 10px;
}
.reportBox {
	margin-bottom: 30px;
}}

/*-------------- example --------------*/
.application .appBox .example {
	width: 95%;
	margin: 30px auto 0;
	border-top: 2px solid #f7f9f9;
	padding: 1.5em  1.5em 0;
}
.application .appBox .example ul,
.application .appBox .example p {
	width: 100%;
}
.application .appBox .example li.title {
	list-style-image: url(../img/icon_check.png);
	width: 95%;
	margin: 0 auto;
}
.application .appBox .example li.title span {
	font-weight:600;
}
.application .appBox .exampleBox {
	overflow: hidden;
	width: 95%;
	margin: 15px auto 10px;
}
.application .appBox .exampleBoxItem {
	width: 45%;
	float: left;
}
.application .appBox .exampleBoxItem:first-child {
	margin-right: 5%;
}
@media screen and (max-width:768px){
.application .appBox .exampleBoxItem {
	width: 100%;
	float: none;
	margin-bottom: 15px;
}
.application .appBox .exampleBoxItem:first-child {
	margin-right: 0;
}}
.application .appBox .example .txtBox {
	width: 95%;
	margin: 0 auto 30px;
}
/*-------------- p.title --------------*/
.application .appBox p.title {
	background-color: #F7F9F9;
	padding: 10px;
}
/*-------------- cautionBox --------------*/
.application .cautionBox {
	width: 70%;
	border: 2px solid #3C8DBC;
	border-radius: 4px;
	margin: 0 auto 30px;
	background-color: #3C8DBC;
}
.application .cautionBox h4 {
	text-align: center;
	color: #fff;
	padding: 20px;
	font-size: 18px;
	background-color: #3C8DBC;
	font-weight: 400;
}
.application .cautionTxtBox {
	padding: 20px;
	background-color: #fff;
}
.application .cautionBox p {
	margin-bottom: 20px;
}
@media screen and (max-width:768px){
.application .cautionBox {
	width: 95%;
}}

/*-------------- now --------------*/
table.nowTable {
	border-top: 1px solid #a3b4be;
	border-left: 1px solid #a3b4be;
	margin: 0 auto 20px;
	width: 100%;
}
table.nowTable th,
table.nowTable td {
	border-bottom: 1px solid #a3b4be;
	border-right: 1px solid #a3b4be;
	padding:5px 10px;
	vertical-align: middle;
	text-align: center;
}
table.nowTable td.double {
	border-bottom: 3px double #a3b4be;
}
table.nowTable th {
	background-color: #f7f9f9;
	font-weight: 600;
}
table.nowTable th.img,
table.nowTable td.img {
	width: 30%;
}
table.nowTable td.img img {
	margin: 0 auto;
	width: 140px;
}
table.nowTable th.condition,
table.nowTable td.condition {
	width: 20%;
}
table.nowTable th.txt,
table.nowTable td.txt {
	width: 50%;
}
table.nowTable td.txt {
	text-align: left;
}

/* ------------------------------------------------------------
  social
------------------------------------------------------------ */
.sns{ list-style-type:none; }
/* display:inline-block;を指定 */
.sns li{
    display:inline-block;
    margin-right:5px;
    vertical-align:bottom;
    *display: inline;
    zoom: 1;
}
.socialBox {
	overflow: hidden;
	padding: 50px 0;
}
.socialBox .socialFB {
	margin-bottom: 20px;
}

/*------------------------------------------------------------
	sns style
------------------------------------------------------------*/
ul.top-sns-btns li,
ul.list-sns-btns li,
ul.sns-btns li {
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  -ms-font-smoothing: antialiased;
  -o-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-rendering: geometricPrecision;
  -moz-text-rendering: geometricPrecision;
  -ms-text-rendering: geometricPrecision;
  -o-text-rendering: geometricPrecision;
  -moz-osx-font-smoothing: grayscale;
}

/* post
--------------------------------------*/
ul.sns-btns {
  letter-spacing: -.35em;
  overflow: hidden;
	width: 60%;
	margin: 0 auto;
}

ul.sns-btns li a span:empty,
ul.top-sns-btns li a span:empty {
  display: none;
}

ul.sns-btns li {
	display: inline-block;
	width: 27%;
	margin: 0 2%;
  vertical-align: bottom;
  letter-spacing: normal;
  white-space: normal;
	cursor: pointer;
}
ul.sns-btns li a,
ul.sns-btns li a:visited {
  text-decoration: none !important;
  color: #fff;
  font-size: 25px;
  line-height: 100%;
  font-weight: normal;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  background-color: #333;
  padding: 6px;
}
ul.sns-btns li a:hover,
ul.sns-btns li a:visited:hover {
  text-decoration: none !important;
  opacity: 0.7;
}
ul.sns-btns li a i {
	width: 40px;
}
ul.sns-btns li a span.shareNumber {
  display: inline-block;
  vertical-align: top;
  font-weight: 600;
  color: #fff;
  font-size: 18px;
  line-height: 40%;
  text-align: center;
  padding: 10px 0;
	margin-bottom: 10px;
}
ul.sns-btns li a span.shareTxt {
  display: inline-block;
	font-size: 14px;
  line-height: 40%;
  font-weight: 600;
  padding: 10px 0;
  color: #fff;
  vertical-align: top;
}

@media screen and (max-width: 767px) {
ul.sns-btns {
	width: 80%;
}
ul.sns-btns li {
	display: inline-block;
	width: 29%;
	margin: 0 2%;
}
ul.sns-btns li a, ul.sns-btns li a:visited {
	padding: 15px;
}}

@media screen and (max-width: 480px) {
  ul.sns-btns {
    height: auto;
    overflow: visible;
	width: 100%;
  }

ul.sns-btns li {
	display: inline-block;
	width: 31%;
	margin: 0 1%;
}
  ul.sns-btns li a,
  ul.sns-btns li a:visited {
    font-size: 30px;
    line-height: 100%;
		padding: 12px;
  }
  ul.sns-btns li a span {
    font-size: 14px;
    line-height: 100%;
    padding: 8px 10px 0 2px;
  }
ul.sns-btns li a span.shareTxt {
	display: block;
}}

.socialBox {
	margin: 30px 0;
}
.socialBox ul.sns-btns li a,
.socialBox ul.sns-btns li a:visited {
  padding: 15px;
}
.socialBox ul.sns-btns li {
	min-width: 60px;
}

/* chrome only */
@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  ul.top-sns-btns li a span {
    padding: 5px 12px 0 3px;
  }
}
/* color
------------------------------------*/
ul.top-sns-btns li.fb a,
ul.top-sns-btns li.fb a:visited,
ul.list-sns-btns li.fb a,
ul.list-sns-btns li.fb a:visited,
ul.sns-btns li.fb a,
ul.sns-btns li.fb a:visited {
  background-color: #3c599c;
}

ul.top-sns-btns li.tw a,
ul.top-sns-btns li.tw a:visited,
ul.list-sns-btns li.tw a,
ul.list-sns-btns li.tw a:visited,
ul.sns-btns li.tw a,
ul.sns-btns li.tw a:visited {
  background-color: #1dadeb;
}

ul.top-sns-btns li.gp a,
ul.top-sns-btns li.gp a:visited,
ul.list-sns-btns li.gp a,
ul.list-sns-btns li.gp a:visited,
ul.sns-btns li.gp a,
ul.sns-btns li.gp a:visited {
  background-color: #d85252;
}
	
/* ------------------------------------------------------------
  otherLink
------------------------------------------------------------ */
.otherLink {
	margin: 40px auto;
	width: 100%;
}
.otherLink h4 {
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 20px;
}
.otherLink ul {
	width: 80%;
	margin: 0 auto;
}
@media screen and (min-width:1024px){
.otherLink {
	padding-left: 15px;
    padding-right: 15px;
}
.otherLink ul {
	width: 95%;
}}
.otherLink li {
	display:inline-block;
	margin: 5px 3px 5px 0;
}
.otherLink li:after {
	content: " |";
	color: #888;
}
.otherLink li.disable {
	cursor: default;
}
.otherLink li.disable a,
.otherLink li.disable a:hover {
	color: #888;
  filter: alpha(opacity=100);
  opacity: 1.00;
  -moz-opacity: 1.00;
	text-decoration: none;
}
@media screen and (max-width:768px){
.otherLink li {
	display:block;
	margin: 5px;
	background-color: #f7f9f9;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	text-align: center;
}
.otherLink li:after {
	content: none;
}
.otherLink li a {
	display: block;
	padding: 10px;
	text-decoration: none;
}}

/* ------------------------------------------------------------
  pricing
------------------------------------------------------------ */
.pricing {
	width: 100%;
	margin: 0 auto 0;
}
.pricing .priceBox {
	padding: 0 10px;
	margin: 0 auto 50px;
}
@media screen and (min-width:1024px){
.pricing .priceBox {
	padding-left: 15px;
    padding-right: 15px;
}}
.pricing h3 {
	color: #3f4c54;
	padding: 30px;
	font-weight: 600;
	text-align: center;
	font-size: 24px;
	border-top: 10px solid #f7f9f9;
}
@media screen and (max-width:480px){
.pricing h3 {
	font-size: 20px;
}}
.pricing .priceList {
	width: 80%;
	margin: 0 auto;
}
@media screen and (max-width:768px){
.pricing .priceList {
	width: 100%;
}}
.priceList table {
	border-top: 1px solid #a3b4be;
	border-left: 1px solid #a3b4be;
	margin: 0 auto 20px;
	width: 100%;
}
.priceList table th,
.priceList table td {
	border-bottom: 1px solid #a3b4be;
	border-right: 1px solid #a3b4be;
	padding: 5px 10px;
	vertical-align: middle;
}
.priceList table th {
	background-color: #f7f9f9;
	text-align: center;
	font-weight: 600;
}
.pricing p {
	margin: 0 auto 15px;
	width: 90%;
}
.pricing ul.description li {
	list-style-image: url(../img/icon_check.png);
	margin: 0 auto 15px;
	width: 90%;
}
.pricing img {
	margin: 15px auto 20px;
}
.pricing .example {
	width: 100%;
	margin: 30px auto 0;
	border-top: 2px solid #f7f9f9;
	padding: 1.5em  1.5em 0;
}

/* ------------------------------------------------------------
  howto
------------------------------------------------------------ */
.howto {
	width: 100%;
	margin: 0 auto 0;
}
.howto .howtoBox {
	padding: 0 10px;
	margin: 0 auto 50px;
}
@media screen and (min-width:1024px){
.howto .howtoBox {
	padding-left: 15px;
    padding-right: 15px;
}}
.howto h3 {
	color: #3f4c54;
	padding: 30px;
	font-weight: 600;
	text-align: center;
	font-size: 24px;
	border-top: 10px solid #f7f9f9;
}
@media screen and (max-width:480px){
.howto h3 {
	font-size: 20px;
}}
.howto dl {
	width: 60%;
	margin: 0 auto;
	border-bottom: 1px solid #a3b4be;
	overflow: hidden;
	position: relative;
}
.howto dl.arrow:before{
	content: "";
	position: absolute;
	left: 6%;
	top: 0;
	border: 15px solid transparent;
	border-top: 15px solid #a3b4be;
}
.howto dt {
	width: 25%;
	float: left;
	padding: 20px;
	font-weight: 600;
}
.howto dd {
	width: 70%;
	float: left;
	padding: 20px;
}
@media screen and (max-width:768px){
.howto dl {
	width: 80%;
}
.howto dl.arrow:before{
	left: 8%;
}}
@media screen and (max-width:480px){
.howto dl {
	width: 100%;
}
}
/* ------------------------------------------------------------
  support
------------------------------------------------------------ */
.support {
	width: 100%;
	margin: 0 auto 0;
}
.support .supportBox {
	padding: 0 10px;
	margin: 0 auto 50px;
}
@media screen and (min-width:1024px){
.support .supportBox {
	padding-left: 15px;
    padding-right: 15px;
}}
.support h3 {
	color: #3f4c54;
	padding: 30px;
	font-weight: 600;
	text-align: center;
	font-size: 24px;
	border-top: 10px solid #f7f9f9;
}
@media screen and (max-width:480px){
.support h3 {
	font-size: 20px;
}}
.support ul {
	width: 82%;
	margin: 0 auto;
}
.supportBox ul li {
	list-style: disc;
	margin-bottom: 10px;
}
.support ol {
	margin-left: 30px;
}
.supportBox ol li {
	list-style: decimal;
	margin-bottom: 10px;
}
.support .guide p {
	width: 90%;
	margin: 0 auto 15px;
}
.support dl.support {
	width: 90%;
	margin: 0 auto 20px;
}
.support dl.support dt {
	font-weight: 600;
	margin-bottom: 10px;
}
.support dl.support dd {
	display: list-item;
	width:90%;
	margin: 0 auto 5px;
}
.support dl.support dd.itemAll {
	text-align: right;
	list-style: none;
}
.support dl.support dd.itemAll:before {
	content:"\f0a9";
	color: #3C8DBC;
	font-family: FontAwesome;
}
@media screen and (max-width:768px){
.support dl.support {
	width: 100%;
}
.support dl.support dd {
	width:85%;
}}
.faq h4 {
	padding: 10px;
	background-color: #f7f9f9;
	margin-bottom: 10px;
}
.faq dl {
	width: 95%;
	margin: 0 auto 30px;
}
.faq dl dt, .faq dl dd {
	display: list-item;
	list-style: none;
}
.faq dl dt {
	margin-bottom: 5px;
	font-weight: 600;
	padding-left: 1.5em;
}
.faq dl dd {
	margin-bottom: 20px;
	border-bottom: 1px solid #f7f9f9;
	padding: 0 0 10px 1.5em;
}
.faq dl dt:before {
	content:"Q.";
	color: #F3CE85;
}
.faq dl dd:before {
	content:"A.";
	color:#3C8DBC;
	font-weight: 600;
}
.faq dl dt:before,
.faq dl dd:before {
	margin-right: 5px;
	margin-left: -1.5em;
}

/* ------------------------------------------------------------
  requirements
------------------------------------------------------------ */
.requirements {
	width: 100%;
	margin: 0 auto 0;
}
.requirements .enviBox {
	padding: 0 10px;
	margin: 0 auto 50px;
}
@media screen and (min-width:1024px){
.requirements .enviBox {
	padding-left: 15px;
    padding-right: 15px;
}}
.requirements h3 {
	color: #3f4c54;
	padding: 30px;
	font-weight: 600;
	text-align: center;
	font-size: 24px;
	border-top: 10px solid #f7f9f9;
}
@media screen and (max-width:480px){
.requirements h3 {
	font-size: 20px;
}}
.requirements .enviList {
	width: 80%;
	margin: 0 auto;
}
@media screen and (max-width:768px){
.requirements .enviList {
	width: 100%;
}}
.enviList table {
	border-top: 1px solid #a3b4be;
	border-left: 1px solid #a3b4be;
	margin: 0 auto 20px;
	width: 100%;
}
.enviList table th,
.enviList table td {
	border-bottom: 1px solid #a3b4be;
	border-right: 1px solid #a3b4be;
	padding: 5px 10px;
	vertical-align: middle;
}
.enviList table th {
	background-color: #f7f9f9;
	text-align: center;
	font-weight: 600;
}

/* ------------------------------------------------------------
  ga
------------------------------------------------------------ */
.ga {
	width: 100%;
	margin: 0 auto 0;
}
.ga .gaBox {
	padding: 0 10px;
	margin: 0 auto 50px;
}
@media screen and (min-width:1024px){
.ga .gaBox {
	padding-left: 15px;
    padding-right: 15px;
}}
.ga h3 {
	color: #3f4c54;
	padding: 30px;
	font-weight: 600;
	text-align: center;
	font-size: 24px;
	border-top: 10px solid #f7f9f9;
}
@media screen and (max-width:480px){
.ga h3 {
	font-size: 20px;
}}
.ga h4 {
	padding:10px;
	border-top: 3px solid #f7f9f9;
	margin-bottom: 15px;
}
.ga .gaBox p {
	width: 90%;
	margin: 0 auto 15px;
}
.ga .gaBox ul {
	width: 85%;
	list-style: disc;
	margin: 0 auto 15px;
}
.ga .gaBox li.check ul {
	width: 90%;
}
.ga .gaBox li.check {
	list-style-image: url(../img/icon_check.png);
}
.ga .gaBox li {
	margin-bottom: 5px;
}
.ga .gaBox li.check span {
	font-weight: 600;
}
.ga .gaPrice {
	background-color: #f9f8f7;
	border-radius: 4px;
	padding: 10px 0 20px;
}
.ga .gaPrice h4 {
	text-align: center;
	color: #3C8DBC;
	font-weight: 600;
	margin-bottom: 0;
}
.ga .gaPrice table {
	border: none;
	margin: 0 auto;
}

	
/* ------------------------------------------------------------
  contact
------------------------------------------------------------ */
.contact {
	width: 100%;
	margin: 0 auto 0;
}
.contact .contactBox {
	padding: 0 10px;
	margin: 0 auto 50px;
}
@media screen and (min-width:1024px){
.contact .contactBox {
	width: 80%;
}}
.contact h3 {
	color: #3f4c54;
	padding: 30px;
	font-weight: 600;
	text-align: center;
	font-size: 24px;
	border-top: 10px solid #f7f9f9;
}
@media screen and (max-width:480px){
.contact h3 {
	font-size: 20px;
}}
.contact .txtBox {
	width: 90%;
	padding:20px 20px 5px;
	background-color: #f7f9f9;
	margin: 0 auto;
}
@media screen and (max-width:768px){
.contact .txtBox {
	width: 100%;
}}
.contact h4 {
	margin-bottom: 15px;
}
.contact .contactBox p {
	width: 90%;
	margin: 0 auto 15px;
}
.contact .contactBox p.link {
	background: url(../img/icon_link.png) no-repeat 0 0.4em;
	padding-left: 10px;
}
.contact .formBox {
	width: 90%;
	margin: 40px auto;
}
.contact .formBox .item {
	margin: 20px 0;
	clear:both;
}
.contact .formBox p {
	width: 25%;
	float: left;
	margin-top: 10px;
}
.contact .formBox .item:nth-child(4) p {
	margin-top: 0;
}
.contact .formBox p.required:after {
	content: "必須";
	font-size: 11px;
	padding: 5px;
	background-color: #FC8675;
	color: #fff;
	margin-left: 10px;
}
@media screen and (max-width:768px){
.contact .formBox p {
	width: 100%;
	float: none;
	margin-top: 0;
}
.contact .formBox p {
	font-weight: 600;
}}
/*---------------- form -----------------*/
.contact form input[type="text"],
.contact form input[type="email"],
.contact form input[type="tel"],
.contact form textarea {
width: 70%;
padding: 10px;
border-radius: 5px;
border: 2px solid #ccc;
font-size: 14px;
}
.contact form input:focus,
.contact form textarea:focus {
	border: 2px solid #3C8DBC;
	outline: 0;
}
@media screen and (max-width:768px){
.contact form input,
.contact form textarea {
width: 100%;
}}
/*---------------- submit -----------------*/
.contact form input[type="submit"] {
	padding: 15px 20px;
	background-color: #F3CE85;
	border: none;
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	-webkit-appearance: none;
	border-radius: 5px;
	margin-top: 30px;
	outline: 0;
	width: 30%;
}
.contact form input[type="submit"]:hover {
	background-color: #E4B558;
}
.contact form input[type="submit"][disabled] {
	background-color: #ccc;
	cursor: default;
}

/*---------------- checkbox -----------------*/
.contact input[type=checkbox] {
	display: inline-block;
	margin-right: 6px;
}
.contact input[type=checkbox] + label {
	position: relative;
	display: inline-block;
	margin-right: 12px;
	font-size: 16px;
	line-height: 30px;
	cursor: pointer;
}
@media (min-width: 1px) {
	.contact input[type=checkbox] {
		display: none;
		margin: 0;
	}
	.contact input[type=checkbox] + label {
		padding: 0 0 0 24px;
	}
	.contact input[type=checkbox] + label::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		background: #FFF;
	}
	.contact input[type=checkbox] + label::before {
		border: 2px solid #999;
	}
	.contact input[type=checkbox]:checked + label::after {
		content: "";
		position: absolute;
		top: 50%;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: block;
	}
	.contact input[type=checkbox]:checked + label::after {
		left: 3px;
		width: 16px;
		height: 8px;
		margin-top: -8px;
		border-left: 3px solid #3C8DBC;
		border-bottom: 3px solid #3C8DBC;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
}
/*---------------- confirm -----------------*/
.contact.confirm .formBox p {
	width: 25%;
	float: left;
	margin-top: 0;
}
.contact.confirm .formBox div.formContent {
	width: 75%;
	margin-left: 25%;
}
@media screen and (max-width:768px){
.contact.confirm .formBox p {
	width: 100%;
	float: none;
	margin-bottom: 10px;
}
.contact.confirm .formBox div.formContent {
	width: 100%;
	margin-left: 10px;
}}
/*---------------- complete -----------------*/
.contact .complete {
	margin: 0 auto 40px;
	padding: 0 15px;
	width: 60%;
}
.contact .complete p {
	margin-bottom: 15px;
}
.contact .complete .well {
	background-color: #F8FAFA;
	margin-top: 20px;
}


/* ------------------------------------------------------------
  terms
------------------------------------------------------------ */
.terms {
	width: 100%;
	margin: 20px auto;
}
.terms .txtBox {
	width: 85%;
	margin: 0 auto;
	padding: 20px 40px;
	overflow: hidden;
	font-size: 14px;
}
@media screen and (min-width:1024px){
.terms .txtBox {
	padding-left: 15px;
    padding-right: 15px;
}}
@media screen and (max-width:768px){
.terms .txtBox {
	width: 100%;
}}
@media screen and (max-width:480px){
.terms .txtBox {
	padding: 20px;
}}
.terms .txtBox h3,
.terms .txtBox dt {
	color: #3C8DBC;
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 10px;
}
.terms .txtBox dl {
	margin-top: 20px;
	counter-reset: count 0;
}
.terms .txtBox dd {
	margin: 0 0 5px 40px;
}
.terms .txtBox dd:before {
	counter-increment: count;
	content: counter(count) ". ";
	margin-left: -1.5em;
}
.terms .txtBox dd.styleNone:before {
	content:"";
	margin-left: 0;
}
.terms .txtBox dd ul {
	list-style: disc;
	margin-left: 30px;
}
.terms .txtBox dd ol li {
	padding-left: 2.8em;
	counter-increment: cnt;
	list-style:none;
}
.terms .txtBox dd ol li:before {
	margin-left: -2.5em;
	content: '（' counter(cnt) '）';
	display: inline-block;
	width: 2.5em;
}
.terms .txtBox p.sign {
	margin: 40px 0 20px;
	text-align: right;
}
.terms table {
	border-top: 1px solid #a3b4be;
	border-left: 1px solid #a3b4be;
	margin: 10px auto;
	width: 80%;
}
@media screen and (max-width:480px){
.terms table {
	width: 100%;
}}
.terms table th,
.terms table td {
	border-bottom: 1px solid #a3b4be;
	border-right: 1px solid #a3b4be;
	padding: 5px 10px;
	vertical-align: middle;
}
.terms table th {
	background-color: #f7f9f9;
	text-align: center;
	font-weight: 600;
}

/* ------------------------------------------------------------
  law
------------------------------------------------------------ */
.law {
	width: 100%;
	margin: 20px auto 60px;
}
@media screen and (min-width:1024px){
.law {
	padding-left: 15px;
    padding-right: 15px;
}}
.law table {
	width: 90%;
	margin: 0 auto;
}
.law table th,
.law table td {
	padding: 15px;
}
.law table th {
	width: 30%;
	background-color: #F7F9F9;
	font-weight: 400;
	border-radius: 4px;
	border-bottom: 1px solid #fff;
}
.law table td {
	width: 67%;
}
.law table ul {
	list-style: disc;
	margin-left: 20px;
}
@media screen and (max-width:768px){
.law table {
	width: 95%;
}}

/* ------------------------------------------------------------
  case
------------------------------------------------------------ */
.case {
	width: 100%;
	margin: 0 auto 0;
}
.case .caseBox {
	padding: 0 10px;
	margin: 0 auto 50px;
}
@media screen and (min-width:1024px){
.case .caseBox {
	padding-left: 15px;
    padding-right: 15px;
}}
.case h3 {
	color: #3f4c54;
	padding: 30px;
	font-weight: 600;
	text-align: center;
	font-size: 24px;
	border-top: 10px solid #f7f9f9;
}
@media screen and (max-width:480px){
.case h3 {
	font-size: 20px;
}}
.case h4 {
	padding:10px;
	border-top: 3px solid #f7f9f9;
	margin-bottom: 15px;
}
.case .caseBox p {
	width: 90%;
	margin: 0 auto 15px;
}
.case .caseBox .caseTop {
	border-bottom: 5px solid #f7f9f9;
	padding: 0 10px 30px;
}
.case .caseBox .imgBox {
	width: 35%;
	float: left;
	padding-right: 10px;
}
.case table {
	border-top: 1px solid #a3b4be;
	border-left: 1px solid #a3b4be;
	margin: 0 auto 20px;
	word-break: break-all;
	width: 65%;
	float: right;
}
.case table th,
.case table td {
	border-bottom: 1px solid #a3b4be;
	border-right: 1px solid #a3b4be;
	padding: 5px 10px;
	vertical-align: middle;
}
.case table th {
	background-color: #f7f9f9;
	text-align: center;
	font-weight: 600;
}
.case .caseBox table.caseInfo td.title {
	width: 20%;
}
.case .caseBox dl {
	width: 90%;
	margin: 20px auto 0;
}
.case .caseBox dt {
	font-weight: 600;
	display:list-item;
	list-style-image: url(../img/icon_check.png);
	width: 15%;
	float: left;
	padding: 10px 0;
	color: #3C8DBC;
}
.case .caseBox dd {
	margin: 0 0 0 15%;
	padding: 10px;
}
@media screen and (max-width:768px){
.case .caseBox .imgBox {
	width: 100%;
	float: none;
	padding-right: 0;
}
.case .caseBox .imgBox img {
	margin: 0 auto;
}
.case table {
	margin: 20px auto 0;
	width: 100%;
	float: none;
}
.case .caseBox dt {
	width: auto;
	float: none;
	padding: 0;
}
.case .caseBox dd {
	padding: 0;
	margin: 10px 0 20px;
}}

/* ------------------------------------------------------------
  404
------------------------------------------------------------ */
.notFound {
	position:relative;
	width: 663px;
	margin: 20px auto 80px;
	height: 532px;
	background: url(../img/404.jpg) no-repeat center;
}
.NFtxtBox {
	position: absolute;
	width: 330px;
	bottom: 14%;
	left: 6%;
}
.NFtxtBox ul {
	margin-top: 15px;
}
.NFtxtBox li {
	background: url(../img/icon_link.png) no-repeat top 5px left;
	padding-left: 10px;
}

/* ------------------------------------------------------------
  social
------------------------------------------------------------ */
.sns{ list-style-type:none; }
/* display:inline-block;を指定 */
.sns li{
    display:inline-block;
    margin-right:5px;
    vertical-align:bottom;
    *display: inline;
    zoom: 1;
}
.socialBox {
	overflow: hidden;
	padding: 50px 0;
}
.socialBox .socialFB {
	margin-bottom: 20px;
}

/* ---------------------------------------------------------------
     auth login
----------------------------------------------------------------*/
.panel .panel-heading h2 {
	font-size: 16px;
	font-weight: 400;
	padding: 15px 0;
	text-align: center;
	margin: 0;
}
.panel-body .input-group i {
	color:#737677;
}
.panel-body .input-group-addon {
	border-bottom-right-radius: 0;
	border-top-right-radius:0;
	background-color: #F2F7F9;
	border: 1px solid #dce4ec;
	border-right: none;
}
.panel-body .form-control:last-child {
	border-bottom-left-radius: 0;
	border-top-left-radius:0;
}
.panel-default>.panel-heading h2 {
	color: #737677;
}
.form-control {
	padding: 10px 5px;
}
.panel-body i {
	margin-right: 0;
}
.auth {
	margin: 60px 0;
}