@charset "utf-8";
/* CSS Document */

/* step */
#step div.title{
	padding:2% 3%;
	margin-bottom:3%;
	text-align:center;
	
}
#step h2{
	font-size: 3.5rem;
	margin:1% auto;
	line-height:120%;
}
#step h2 span{
	font-size: 1.7rem;
	font-weight:normal;
}
#step h3{
	font-size:190%;
	color:#9f0d1d;
	margin:0 auto;
}
#step h4.subt{
	font-size: 3rem;
	margin-top: 5%;
}
#step div.start{
	width:90%;
	margin:1% auto;
	font-weight:600;
	text-align:center;
	border:2px solid #c99363;
	font-size: 2.5rem;
	padding:1%;
}
#step div.Box{
	background:  url(../../step/bc_step.png) repeat-y 8%;
	width:100%;
}
#step div.LeftBox{
	float:left;
	width:43%;
	margin:5% 2% 5% 5%;
}
#step div.LeftBox p{
	margin-left:20% !important;
}
#step div.RightBox{
	float:right;
	width:45%;
	margin:5% 5% 5% 0;
}
#step div.RightBox img{
	width:100%;
}
div.step_maru{
	float:left;
	width: 50px;
	height: 50px;
	font-size: 3rem;
	color:#fff;
	border-radius: 50%;
	background:#c99363;
	text-align:center;
	padding:3%;
	margin:1% 4%;
}
@media screen and (max-width: 960px) {
#step h4.subt{
	font-size: 2.5rem;
}
}
@media screen and (max-width: 767px) {
#step h4.subt{
	font-size: 2rem;
}
#step div.start{
	padding:2%;
}
#step div.finish{
	padding:2%;
}
#step div.LeftBox ,#step div.RightBox{
	background:none;
	width:90%;
	clear:both;
	display:block;
}
}

/* report */
#report h2{
	font-size: 3.5rem;
	margin:2% auto 2%;
	line-height:120%;
	text-align:center;
}
#report h2 span{
	font-size: 1.7rem;
	font-weight:normal;
}
#report ul.list{
	width: 98%;
	margin: 1% auto;
	padding: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	display: -webkit-flexbox;
	display: -moz-flexbox;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: flex;
	-webkit-box-lines: multiple;
	-moz-box-lines: multiple;
	-webkit-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
#report ul.list li{
	float:left;
	position: relative;
	width: 16.8%;
	margin: 1% 0.5%;
	padding:1%;
	background:#FCEBCE;
	list-style:none;
}
#report ul.list li.blog{
	float:left;
	position: relative;
	width: 16.8%;
	margin: 1% 0.5%;
	padding:1%;
	background:#cfe9dc;
	list-style:none;
}
#report ul.list li img{
	width:100%;
	height:auto;
	border:1px solid #FFF;
}
#report p.csDetail{
	background:#614c3b;
	text-align: center;
	border-radius: 50px;
	padding:1%;
	color: #fff;
}
#report li.blog p.csDetail{
	background:#3b6152;
	text-align: center;
	border-radius: 50px;
	padding:1%;
}
#report p.csDetail a{
	color:#fff !important;
}
#report p.csTtl{
	text-align:center;
	margin:0 auto !important;
	font-weight:bold;
	font-size: 1.7rem;
	letter-spacing:-0.03em;
}
#report p.csUser{
	text-align:center;
	font-size: 1.5rem;
	margin:0 auto !important;
}

@media screen and (max-width: 767px) {
#report ul.list{
	width: 90%;
	margin:1% auto;
	padding:0;
}
#report ul.list li{
	width: 44%;
	padding:2%;
	margin: 1% 0.5%;
}
}
/* features */
#features h2,#features_detail h2{
	font-size: 3.5rem;
	margin:2% auto 2%;
	line-height:120%;
	text-align:center;
}
#features h2 span,#features_detail h2 span{
	font-size: 1.7rem;
	font-weight:normal;
}
#features h3{
	font-size: 2rem;
	text-align:center;
}
#features_detail h3{
	font-size: 2.5rem;
	text-align:center;
	color:#0068b7;
	background:#fff;
	padding:1%;
	border-radius:50px;
}
#features h3.detail,#features h3.detail{
	text-align:center;
}
#features h4,#features_detail h4{
	font-size: 2.2rem;
	text-align:center;
	border-top:1px solid #ddd;
	border-bottom:1px solid #ddd;
	padding-top:1%;
	padding-bottom:1%;
}
#features_detail h5{
	font-size: 2rem;
	text-align:center;
	margin:1% auto 0;
	color:#0068b7;
}
#features span.new{
	background:#0068b7;
	color:#fff;
	font-size: 1.5rem;
	font-weight:normal;
	margin:0 2%;
	padding:1%;
}
#features ul.Box{
	width:100%;
	margin:2% auto;
	display: flex;
	flex-wrap: wrap;
}
#features ul.Box li{
	float:left;
	width:24%;
	padding:4% 4% 2%;
	border-right:solid #aa8668 1px;
	border-bottom:solid #aa8668 1px;
	list-style:none;
}
#features ul.Box li.right{
	border-right:none;
}
#features ul.Box li.point,#features ul.Box li.point2{
	width:40%;
}
#features ul.Box li.point h3,#features ul.Box li.point2 h3{
	font-size: 2.5rem;
}
#features ul.Box img{
	width:100%;
}
#features ul.Box li.point2 img{
	width:100%;
}
#features p.csDetail{
	background:#614c3b;
	text-align: center;
	border-radius: 50px;
	padding:1%;
	color:#ffff !important;
}
#features_detail p.csDetail{
	width:50%;
	background:#614c3b;
	text-align: center;
	border-radius: 50px;
	padding:1%;
	color:#ffff !important;
}
#features a.iframe{
	color:#fff !important;
}
#features div.video_box,#features_detail div.video_box{
	position: relative;
	text-align:center;
}
#features div.video,#features_detail div.video{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	margin:0;
	padding:0;
}
#features div.video img,#features_detail div.video img{
    width:100%;
	opacity:0.7;
}
#features_detail div.Box{
	width:95%;
	margin:1% auto;
	clear:both;
}
/*#features_detail div.point{
	width:80%;
	margin:1% auto;
	background:#a7c5db;
	height:auto;
	overflow:hidden;
	padding:2%;
	border-radius:20px;
	position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
}*/

.balloon1 {
	position: relative;
	display: inline-block;
	width:80%;
	margin:2% auto;
	padding: 2%;
	background:#a7c5db;
	border-radius:20px;
	text-align:left;
}
.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #a7c5db;
}
.balloon1 p {
  margin: 0;
  padding: 0;
}
#features_detail div.LeftBox{
	float:left;
	width:46%;
	margin-left:2%;
}
#features_detail div.RightBox{
	float:right;
	width: 46%;
	margin-right: 2%;
}
#features_detail div.LeftBox img ,#features_detail div.RightBox img{
	width:100%;
}
@media screen and (max-width: 767px) {
#features ul.Box{
	width:100%;
	margin:1% auto;
	padding:0;
}
#features ul.Box li{
	width:100%;
	margin:0;
	border-right:none;
	border-bottom:2px dotted #666;
}
#features ul.Box li.point,#features ul.Box li.point2{
	width:100%;
	border-bottom:none;
	border-bottom:2px dotted #666;
}
#features ul.Box li.point2 img{
	width:100%;
}
#features div.video img{
    width:60%;
}
.balloon1 {
	width:95%;
	padding:0%;
}
#features div.LeftBox,#features_detail div.LeftBox{
	width:100%;
	clear:both;
	display:block;
}
#features div.RightBox,#features_detail div.RightBox{
	width:96%;
	clear:both;
	display:block;
	margin:2%;
}
#features_detail div.LeftBox{
	margin-left:auto;
}
#features_detail p.csDetail{
	width:90%;
}
}

/* functionslist */

#features table {
	width:80%;
	margin: 0 auto;
	border: none;
	border-collapse: separate;
	background:#FFF;
}
#features table th {
	width:40%;
	vertical-align: middle;
	margin: 0;
	padding:2%;
	text-align: left;
	background:#e4c7a0;
	font-weight:normal;
}
#features table th.ttl {
	background:#fff;
	font-size: 2rem;
	font-weight:600;
	margin-top:3%;
}
#features table td {
	width:60%;
	margin: 0;
	padding:2%;
	border: none;
	vertical-align: middle;
	border-bottom: solid 1px #666;
}
#features table td:fst-child {
	padding: 0 0 0 10px;
	vertical-align: middle;
}
#features table td.bar {
	height: 1px;
	width: 100%;
	border-top: solid 1px #34495e;
}
#features table span{
	background:#9f0d1d;
	padding:1%;
	color:#fff;
	margin-left:2%;
	font-weight:normal;
}
#features ul.caution{
	list-style:none;
	margin-left:7%;
}
#features div.ico_feature{
	width:70%;
	margin:1% auto;
	text-align:center;
}
@media screen and (max-width: 767px) {
#features table{
	width:95%;
	margin:1% auto;
}
#features table th,#features table td{
		width:50%;
		clear:both;
}
#features ul.caution{
	margin-left:0;
}
#features div.ico_feature img{
	width:100%;
}
}

/* compare */
#compare div.title{
	margin-bottom:3%;
	text-align:center;
}
#compare div.main{
	margin:1% auto;
	width:60%;
}
#compare div.main img{
	width:100%;
}
#compare h2{
	font-size: 3.5rem;
	margin:1% auto;
	line-height:120%;
}
#compare h2 span{
	font-size: 1.7rem;
	font-weight:normal;
}
#compare h4{
	font-size: 2.5rem;
	margin:3% auto;
	line-height:120%;
}
#compare div.menu{
	width:75%;
	margin:2% auto;
	padding:2%;
	border:1px solid #9d8a87;
	border-radius:10px;
}
#compare ul{
	float:left;
	margin-left:2%;
}
#compare div.Box{
	width:95%;
	margin:1% auto;
}
#compare div.CenterBox{
	width:100%;
	margin:2% 2% 2% 0;
}
#compare div.LeftBox{
	float:left;
	width:48%;
	margin:1% 1% 1% 0;
}
#compare div.RightBox{
	float:right;
	width:48%;
	margin:1% 0 1% 1%;
}
#compare div.CenterBox img ,#compare div.LeftBox img ,#compare div.RightBox img{
	width:100%;
}
@media screen and (max-width: 960px) {
#compare div.main{
	width:80%;
}
#compare h3{
	margin-bottom:7%;
	text-align:center;
}
#compare ul{
	margin-top:-3%;
}
#compare div.LeftBox{
	width:100%;
	clear:both;
	display:block;
}
#compare div.RightBox{
	width:100%;
	clear:both;
	display:block;
}
}
@media screen and (max-width: 767px) {
#compare img{
	width:95%;
}
#compare h4{
}
}
#compare table {
	width:90%;
	margin: 2% auto 1%;
	border: none;
	border-collapse: separate;
	background:#FFF;
}
#compare table th {
	width:25%;
	vertical-align: middle;
	margin: 0;
	padding:1%;
	text-align: left;
	background:#FCEBCE;
	font-weight:normal;
}
#compare table th.detail {
	width:5%;
	text-align:center;
}
#compare table td.ttl {
	width:27%;
	text-align: center;
	background:#111111;
	font-weight:600;
	color:#fff;
}
#compare table td {
	margin: 0;
	padding:1%;
	border: none;
	vertical-align: middle;
	border-bottom: solid 1px #666;
	text-align:center;
}
#compare table td:fst-child {
	padding: 0 0 0 10px;
	vertical-align: middle;
}
#compare table span{
	background:#614c3b;
	padding:1%;
	margin-left:2%;
	font-weight:normal;
}
#compare table span a{
	color:#fff !important;
}
#compare table strong{
	color:#FF0000;
	font-weight:normal;
}
#compare table caption{
	font-weight:bold;
	font-size: 2rem;
}
#compare table th.pname{
	font-weight:bold;
}
@media screen and (max-width: 767px) {
#compare table{
	width:95%;
	margin:1% auto;
}
#compare table th {

}
#features table th,#features table td{
		width:50%;
		clear:both;
}
#compare ul.caution{
	margin-left:0;
}
}
/* comic */
#comic h2{
	font-size: 3.5rem;
	margin: 5% auto 2%;
	line-height: 120%;
	text-align: center;
}
#comic{
	text-align: center;
}
#comic div.navi{
	width:60%;
	margin:1% auto;
}
#comic div.navi .back{
	float:left;
	width:30%;
}
#comic div.navi .next{
	float:right;
	width:30%;
}
@media screen and (max-width: 767px) {
#comic img{
	width:100%;
}
#comic div.navi{
	width:90%;
	margin:1% auto;
}
}


/* spec */
#spec #content_in{
	width:70%;
	margin:1% auto !important;
}
#spec #content{
}
#spec h3{
	font-size: 3rem;
	margin:5% auto 2%;
	line-height:120%;
	text-align:center;
}
table.spec {
	margin: 0 auto;
	width: 100%;
	border: none;
	border-top: solid 1px #666;
	border-bottom: solid 1px #666;
	border-collapse: separate;
	border-spacing: 0 10px;
	background:#FFF;
}
table.spec th {
	width:40%;
	vertical-align: middle;
	border-right: solid 1px #666;
	margin: 0;
	padding:1%;
	text-align: center;
	color: #333;
	font-weight: bold;
}
table.spec td.data {
	width:60%;
	padding: 0;
	margin: 0;
	padding:1% 2%;
	border: none;
	text-align: left;
	vertical-align: middle;
	/* white-space: nowrap;
	overflow: hidden;*/
}
table.spec td:fst-child {
	padding: 0 0 0 10px;
	vertical-align: middle;
}
table.spec td.bar {
	height: 1px;
	width: 100%;
	border-top: solid 1px #34495e;
}
#spec span{
	color:#ff0000;
}

@media screen and (max-width: 767px) {
#spec #content_in{
	width:90%;
	margin:1% auto !important;
}
#spec h3{
	font-size: 2rem;
}
table.spec{
	width:100%;
	border-spacing: 0;
}
table.spec th {
	display:block;
	width:96%;
	border-right: none;
	border-bottom:1px dotted #34495e;
	background:#eee;
}
table.spec td.data{
	width:100%;
	clear:both;
	display:block;
}
}

/* faq */
#faq #content_in{
	width:80%;
	margin:1% auto !important;
}
#faq h2{
	font-size: 3.5rem;
	margin:5% auto 2%;
	line-height:120%;
	text-align:center;
}
#faq h3{
	color:#151515;
	text-align:center;
	border-top:1px solid #151515;
	border-bottom:1px solid #151515;
	padding:1%;
	font-size: 2.5rem;
}
#faq div.menu{
	width:90%;
	margin:1% auto;
}
#faq h4{
	float:left;
	width:25%;
	padding-left:80px;
	padding-top: 2%;
	height:70px;
	font-size: 2rem;
}
#faq h4.buy{
	background: url(../../faq/ico_buy.png) no-repeat;
	background-size:20%;
}
#faq h4.feature{
	background: url(../../faq/ico_features.png) no-repeat;
	background-size:20%;
}
#faq h4.other{
	background: url(../../faq/ico_other.png) no-repeat;
	background-size:20%;
}
#faq span.qa_q{
	font-size: 2rem;
	color:#fff;
	width:20px;
	height:20px;
	background-color:#1a69b3;
	margin-right:1%;
	font-weight:bold;
	border-radius: 50%;
	padding:1%;
	display:inline-block;
	line-height: 100%;
}
#faq li.qa_a::after{
	float:left;
	content: "A";
	font-size: 1.7rem;
	color:#fff;
	width:20px;
	height:20px;
	padding:1%;
	margin:0 0 0 3%;
	background-color:#d63818;
	font-weight:bold;
	border-radius: 50%;
	display:inline-block;
	line-height: 100%;
	text-align:center;
}
#faq li.qa_a p{
	float:right;
	width:92%;
	margin:0 auto 5%!important;
	padding:0;
}
div.accordion {
	width: 95%;
	margin:1% auto;
}
div.accordion ul{
	list-style:none;
	padding: 0;
}
div.accordion ul li{
	clear:both;
	display:block;
	margin:2%;
}
div.accordion .toggle{
	padding-right:45px;
}
div.accordion > ul > li > a {
  display: block;
	font-size: 1.7rem;
  text-decoration: none;
  background-color: #FFF;
  cursor: pointer;
  padding: 10px 12px;
  position: relative;
	padding:1%;
}
div.accordion > ul > li > a:hover{
}
div.accordion > ul > li > a:after, div.accordion > ul > li > a.active:after{
	font-size: 1.7rem;
  position: absolute;
  right: 12px;
  top: 16px;
  color: #1a69b3;
}
div.accordion > ul > li > a:after{
  content: "▼";
}
div.accordion > ul > li > a.active:after{
  content: "▲";
}
div.accordion > ul > li > ul {
  display: none;
}
div.accordion > ul > li > ul > li > a{
  display: block;
	font-size: 1.7rem;
  padding: 6px 12px;
  position: relative;
}
@media screen and (max-width: 960px) {
#faq div.menu{
	display:none;
}
div.accordion .toggle{
	font-size:100%;
}
#faq li.qa_a p{
	width:85%;
}
}
@media screen and (max-width: 736px) {
#faq #content_in{
	width:95%;
	margin:1% auto;
}
#faq h3{
	font-size: 2rem;
}
}

/* share */
#share h2{
	background:  url(../../share/ttl_bc.jpg) no-repeat;
	background-position: center center;
	font-size: 3.5rem;
	margin:1% auto 2%;
	padding-top:2%;
	line-height:120%;
	text-align:center;
	padding-bottom:22%;
	background:cover;
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
#share h2 span{
	font-size: 1.7rem;
	font-weight: normal;
}
#share h3{
	font-size: 2.5rem;
}
#share h3 span{
	border-radius:10px;
	color:#fff;
	font-size: 1.7rem;
	background:#aa8668;
	font-weight:normal;
	padding:1%;
	margin-right:1%;
}
#share ul.menu{
	width:90%;
	margin:1% auto;
	padding: 0;
}
#share ul.menu li{
	float:left;
	width:33%;
	list-style:none;
	border-left:1px solid #ddd;
	border-right:1px solid #ddd;
	text-align:center;
}
#share ul.menu li img{
	width:70%;
}
#share div.Box_out{
	background:#f5e9dd;
	width:100%;
	margin:0;
	padding:0;
}
#share div.Box{
	width:80%;
	margin:3% auto;
}
#share div.LeftBox{
	float:left;
	width:63%;
	margin:2% 2% 2% 0;
}
#share div.RightBox{
	float:right;
	width: 31%;
	margin-right: 2%;
	padding-top:6%;
}
#share div.LeftBox img ,#share div.RightBox img{
	width:100%;
	
}
#share div.LeftBox p{
	margin-left:3% !important;
}
#share img.flow{
	width:80%;
}
@media screen and (max-width: 736px) {
#share ul.menu{
	display:none;
}
#share div.Box{
	width:90%;
}
#share div.LeftBox{
	width:100%;
	clear:both;
	display:block;
}
#share div.RightBox{
	width:100%;
	clear:both;
	display:block;
}
#share img.flow{
	width:100%;
}
}

/* download */
#download div.title{
	margin-bottom:3%;
	text-align:center;
}
#download h2{
	font-size: 3.5rem;
	line-height:120%;
	text-align:center;
}
#download h2 span{
	font-size: 1.7rem;
	font-weight: normal;
}
#download h4{
	font-size: 2rem;
	text-align:center;
	background:#f5e9dd;
	padding:1%;
}
#download div.how{
	width:80%;
	margin:1% auto;
	background:#f5e9dd;
	border-radius:15px;
	padding:1%;
	text-align:center;
}
#download .iframeWrapper{
    position:relative;
    width:60%;
	margin:1% auto;
    height:0;
    padding-top:30%;
}
#download .iframeWrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
#download div.DlBox{
	width:80%;
	margin:1% auto;
	padding:0;
}
#download div.DlBox ul li{
	width:43%;
	float:left;
	margin:2% 3%;
	list-style:none;
	text-align:center;

}
#download div.DlBox ul li img{
	width:100%;
	border:1px solid #614c3b;
}
#download div.DlBox .btn_ss{
	width:80%;
}
@media screen and (max-width: 736px) {
#download h3{
	width:80%;
	margin:3% auto;
}
#download div.how{
	width:90%;
}
#download .iframeWrapper{
    width:90%;
    padding-top:60%;
}
#download div.DlBox{
	width:100%;
}
#download div.DlBox ul{
	width:95%;
	margin:1% auto;
	padding:0;
}
#download div.DlBox ul li{
	width:95%;
	clear:both;
	margin-top:8%;
}
}