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

html{
	font-size: 100%;
}
/* main */
div.top_box_pc{
	display:block;
	width:90%;
	margin:0 auto;
	padding:0;
}
div.top_box_sp{
	display:none;
}
div.top_txt{
	float:left;
	width:30%;
	padding:0;
	margin:0;
	margin-left:3%;
	text-align:center;
}
div.top_txt h1{
	margin:0;
	padding:0;
}
div.top_txt h1 img{
	width:100%;
	max-width:450px;
}
div.top_txt h2{
	font-size:calc(112.5% + 0.4vw);
	margin:3% auto 3%;
	padding:0;
}
div.top_txt h3{
	font-size:80%;
	font-weight:500;
}
div.top_txt p{
	font-size:75%;
	line-height:170%;
	text-align:left;
	letter-spacing:-0.02em;
}
div.top_txt img.app{
	width:100%;
	max-width:151px;
	text-align:center;
	margin-top:5%;
}
div.top_img{
	width:100%;
	background: url('../img/mainimg_pc.png') no-repeat right top;
	margin:0 auto;
	padding-bottom:50%;
    -webkit-background-size: contain;
    background-size: contain;
}
/*div.top_img{
	background: url('../img/bc_main.png') no-repeat left 0;
	float:left;
	width:65%;
	padding:0;
	margin:0;
}*/

/*div.top_img_iphone{
    position: absolute;
  top: 80%;
  right: 40%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
	z-index:20;
}*/

@media only screen and (max-width: 960px) {
div.top_box_pc{
	display:none;
}
div.top_box_sp{
	display: grid;
	gap:5px;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	width:100%;
	margin:0;
	padding:0;
}
div.top_txt{
	width:100%;
	clear:both;
	margin:0;
	padding:0;
	text-align:center;
}
div.top_txt h2{
}
div.top_txt p{
	font-size:80%;
	text-align:center;
}
div.top_txt img.app{
	margin-top:1%;
}
div.top_img{
	width:100%;
	background: url('../img/mainimg_sp.png') no-repeat center top;
	margin:0 auto;
	padding-bottom:60%;
    -webkit-background-size: contain;
    background-size: contain;
}
div.top_img_ipad_pc{
	display:none;
}
}
@media only screen and (max-width: 736px) {
div.top_box_sp{
	display: grid;
	gap:5px;
	grid-template-rows: auto;
	grid-template-columns: 1fr;
}
div.top_img{
	width:100%;
}
div.top_txt h1 img{
	width:90%;
	margin:1% auto;
}
div.top_txt h2{
	width:90%;
}
div.top_txt{
    width: 100%;
	clear:both;
}
div.top_txt p{
	margin:0 3% !important;
	font-size: 70%;
}
div.top_txt p.lead_pc{
	display:none;
}
}

@media screen and (max-width: 736px) {
ul.ico{
	width:95%;
	margin:1% auto;
	padding:0;
	clear:both;
	display:block;
}
ul.ico li{
	width:25%;
	float:left;
	height:auto;
	margin:1% auto 10%;
}
}

/* 特徴 */
div.features{
	background-color:#ededed;
	margin:0;
	padding:0;
}
div.features h2{
	font-size:calc(112.5% + 0.4vw);
	text-align: center;
	padding:3%;
	padding-bottom:0;
}
div.features p{
	font-size:75%;
	line-height:160%;
}
div.features_list_pc h3,div.features_list_sp h3{
	font-size:calc(80% + 0.4vw);
	font-weight:300;
	text-align: center;
	padding:3%;
	clear: both;
	color:#00a0e9;
}
div.features_list_pc h3 span,div.features_list_sp h3 span{
	background:#fff000;
	padding:0.5% 1%;
	margin:auto 3%;
	font-size:80%;
}
@media screen and (max-width: 736px) {
div.features{
	background-color:#FFF;
}
div.features h2{
	margin:3% 0 0;
}
}
div.features_list_pc{
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	max-width: 1200px;
	width:100%;
	margin:1% auto;
}
div.features_list_sp{
	display: none;
}
div.features_list01,div.features_list02,div.features_list03.features_list04{
	margin:0;
	padding:0;
}
div.features_list_pc div,div.features_list_sp div{
	margin:0px;
	padding:0;
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
div.features_list_pc video {
	width:100%;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	margin:18px 0 0;
}
div.features_list_pc div.video {
	margin:1%;
	padding:0;
}

div.features_list_pc div img,div.features_list_sp div img{
	width:100%;
}
@media screen and (max-width: 960px) {
div.features_list_pc{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
}
div.features_list_pc div,div.features_list_sp div{
	margin:1%;
}
}
div.feature01{
	background-color:#c1d2dd;
}
div.feature02{
	background-color:#FFF;
}
div.feature03{
}
div.feature04{
	background-color:#FFF;
}
div.feature05{
}
div.feature06{
	background-color:#FFF;
}
div.feature07{
}
div.feature08{
	background-color:#c1d2dd;
}
div.feature09{
	background-color:#c1d2dd;
}
div.feature10{
}
div.feature11{
}
div.feature12{
}
div.feature13{
}
@media screen and (max-width: 736px) {
div.features_list_pc{
	display: none;
}
div.features_list_sp{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
}
div.features_list_pc div,div.features_list_sp div {
	text-align:center;
	background:#FFF;
}
div.features_list_pc div img,div.features_list_sp div img{
	width:60%;
}
}
div.features_list_other h2{
	font-size:25px;
	text-align: left;
	padding:0;
	padding-bottom:0;
}
div.features_list_other{
	width:95%;
	font-size:70%;
	margin:0% auto 5%;
	padding:1%;
}
div.features_list_other ul{
	width:100%;
	margin:0;
	padding:0;
}
div.features_list_other ul li{
	float: left;
	width:44%;
	margin:auto 3%;
}
div.features_list_other ul li span{
	background:#fff000;
	padding:0.5% 1%;
}
@media screen and (max-width: 960px) {
div.features_list_other h2{
	font-size:20px;
}
}
@media screen and (max-width: 736px) {
div.features_list_other{
	width:80%;
	margin:0% auto;
	font-size:75%;
}
div.features_list_other ul li{
	width:100%;
    line-height: 160%;
}
}

/* 特長詳細 */
#feature_detail{
	padding: 3%;
	background-color:#FFF;
	font-size:80%;
	width: 90%;
	margin: 5% auto 10%;
}

/*div.feature_detail_in{
	width:80%;
	font-size:80%;
	border-radius:20px;
	margin:1% auto 0 auto;
	padding: 3%;
	background-color:#FFF;
}*/
#feature_detail h1{
	position: relative;
	font-size:150%;
	font-weight:600;
	line-height:150%;
	text-align:center;
	margin:1% auto 1%;
	padding-bottom: 2%;
}
#feature_detail h1:after{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 7px;
	background: #b457f2; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #b457f2 0%, #5d48eb 34%, #5d48eb 34%, #0099dd 67%, #00d2d4 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  #b457f2 0%,#5d48eb 34%,#5d48eb 34%,#0099dd 67%,#00d2d4 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  #b457f2 0%,#5d48eb 34%,#5d48eb 34%,#0099dd 67%,#00d2d4 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b457f2', endColorstr='#00d2d4',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
#feature_detail img{
	width:100%;
}
#feature_detail span{
	background:url(../common/img/wave-skyblue.png) bottom repeat-x;
	background-size: 20px;
	font-size:100%;
	font-weight:600;
	color:#363f92;
	letter-spacing:-0.02em;
	padding:5px;
}
div.LeftBox{
	float:left;
	width:41%;
	margin:1%;
}
div.RightBox{
	float:right;
	width:53%;
	margin:1%;
}

@media screen and (max-width: 960px) {
div.feature_detail_in{
	width:90%;
}
div.LeftBox,div.RightBox{
	width:100%;
	clear:both;
	display:block;
}
}
@media screen and (max-width: 736px) {
#feature_detail{
	width: 90%;
	margin-top:10%;
}
div.feature_detail_in{
	width:94%;
	margin:1% auto;
	padding:3%;
}
#feature_detail h1{
	font-size:120%;
}
}
/* ターゲット */
div.tar h2{
	font-size:35px;
	color:#000;
	text-align: center;
	margin:2% auto 1%;
	padding-top:2%;
	line-height: 150%;
}
div.tar{
	width:100%;
	box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.2);
	padding:0;
	margin:0;
}
div.tar_in{
	width:75%;
	margin:5% auto 3%;
	padding:2% 5%;
}
div.tar ul{
	width:100%;
	list-style:none;
	margin:1% auto;
	padding:0;
	display:inline-block;
}
div.tar ul li{
	float:left;
	width:16.6%;
	font-size:75%;
	line-height:130%;
	margin: 0;
	text-align:center;
	/display:inline;
	/zoom:1;
	vertical-align:top
}
div.tar ul li img{
}
@media screen and (max-width: 960px) {
div.tar{
	width:100%;
	margin-top: 10%;
}
div.tar_in{
	width:auto;
}
div.tar h2{
	font-size:25px;
}
div.tar ul li{
	font-size:65%;
}
div.tar ul li img{
	width:60%;
}
}
@media screen and (max-width: 736px) {
div.tar h2{
	font-size:20px;
	margin:2% 0;
	text-align:center;
}
div.tar ul {
	text-align: center;
}
div.tar ul li{
	width:31%;
	font-size:60%;
	line-height:130%;
	margin: 1% 1%;
	text-align:center;
  display: inline-block;
  /display: inline;
  /zoom: 1;
}
div.tar ul li img{
	width:70%;
}
}
div.bottom_pic{
	background: #000;
	margin:0;
	padding:0;
}
div.bottom_pic_in{
	width:100%;
	background: url('../img/bc_bottom.jpg') no-repeat center top ;
	margin:0 auto;
	padding:2% 0;
    -webkit-background-size: cover;
    background-size: cover;
}
div.logo_bot{
	width:50%;
	margin:0 auto;
}
div.logo_bot img{
	width:35%;
}
div.bottom_pic img.app{　
}
p.try{
	font-size:85%;
	font-weight:500;
	color:#FFF;
	margin-bottom:0 !important;
	padding:0;
}
p.manual{
	font-size:75%;
	font-weight:300;
}
p.manual a:link{
	color:#FFF;
}
p.manual a:visited {
	color:#FFF;
}
@media screen and (max-width: 960px) {
div.logo_bot img{
	width:60%;
}
}
@media screen and (max-width: 736px) {
div.logo_bot img{
	width:90%;
}
}
ul.bana{
	width:80%;
	margin:1% auto;
	padding:0;
}
ul.bana li{
	float:left;
	width:46%;
	margin:1% 2%;
	list-style:none;
}
ul.bana li.bana_sp{
	display:none;
}
ul.bana li img,ul.bana li.bana_sp img{
	width:100%;
}
@media screen and (max-width: 736px) {
ul.bana{
	width:90%;
	margin:1% auto;
	padding:0;
}
ul.bana li.bana_sp{
	display:block;
	width:95%;
	margin:3% auto;
}
ul.bana li.bana_pc{
	display:none;
}
}
/* TW */

.twitter-timeline{
	max-width: 400px !important;
}


/* 新機能紹介 */

#new_feature{
	padding: 0;
	background-color:#FFF;
	width: 90%;
	margin: 5% auto 10%;
}
div.new_feature_ttl{
	background:url('../img/new_ttl01.png') no-repeat left;
	background-size:cover;
	padding-bottom:15%;
}
#new_feature h1{
	font-size:250%;
	color:#fff;
	float:left;
	width:90%;
	margin:0 0 2% 5%;
	line-height:120%;
	text-align:left;
}
#new_feature h1 span{
	font-size:45%;
	font-weight:normal;
	color:#fff;
}
#new_feature h2{
	background:url('../img/device_both.png') no-repeat left;
	padding:30px 0 30px 90px;
	font-size:170%;
	margin:4% 0 3% 7%;
	font-weight:bold;
}
#new_feature h3{
	font-size:150%;
	font-weight:normal;
	color:#218dbe;
	float:left;
	width:95%;
	margin:1%;
	text-align:left;
	padding-bottom:1%;
}
#new_feature p{
	font-size:90%;
	margin:2% 6%!important;
	line-height:170%;
}
@media screen and (max-width: 736px) {
#new_feature p{
	margin:8% 6%!important;
	font-size:80%;
	line-height:180%;
}
}
#new_feature strong{
	font-size:90%;
	font-weight:900;
}
#new_feature p.cap{
	font-size:80%;
	margin-bottom:3% !important;
}
#new_feature p.notes{
	font-size:80%;
}
#new_feature ul{
	font-size:90%;
	width:80%;
	margin:1% auto;
}
#new_feature img.CenterImg{
	width:60% !important;
	margin:3% auto 0;
	display:block;
}
#new_feature div.otherlink{
	border:1px solid #218dbe;
	padding:1%;
	width:90%;
	margin:1% auto -3%;
}
#new_feature div.otherlink img.ThumImg{
	width:60%;
	float:left;
	margin:3% auto 6%;
	padding:2%;
}
#new_feature div.otherlink table{
	width:90%;
	padding:2%;
}
#new_feature div.otherlink table th{
	width:20%;
	border-bottom:1px solid #ddd;
}
#new_feature div.otherlink table td{
	width:80%;
	border-bottom:1px solid #ddd;
	text-align:left;
}
#new_feature div.memo{
	width:90%;
	font-size:80%;
	margin:2% auto 0;
	padding:2%;
	border:1px solid #999;
	border-radius:10px;
}
#new_feature div.memo h4{
	font-size:110%;
	margin:0% auto;
	height:50px;
	padding-left:50px;
	background: url('../img/hint.png') no-repeat left top;
}
#new_feature div.memo p{
	margin:0 !important;
	padding:0;
}
#new_feature div.otherlink{
	font-size:90%;
	border:1px solid #218dbe;
	padding:0;
	width:90%;
	margin:1% auto -3%;
}
#new_feature div.otherlink h3{
	font-size:100%;
	margin:2% 3%;
}

@media screen and (max-width: 736px) {
#new_feature{
	width: 100%;
}
div.new_feature_ttl{
	padding-bottom:30%;
	margin-top:15%;
}
#new_feature h1{
	line-height:130%;
}
#new_feature h1{
	font-size:150%;
}
#new_feature h3{
	font-size:80%;
	margin:1% 2%;
}
#new_feature h2{
	font-size:100%;
	clear:both;
	display:block;
}
#new_feature img.CenterImg{
	width:90% !important;
	clear:both;
	display:block;
}
#new_feature div.otherlink{
	font-size:80%;
	width:90%;
	line-height:150%;
}
}