@charset "UTF-8";

/* CSS Document */

* {
     margin: 0;
     padding: 0;
     text-decoration: none;
     font-size: 100%;
}

body,div,dl,dt,dd,ul,ol,li,.maintitle,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p
,blockquote,th,td {
     margin: 0;
     padding: 0;
}
html {
     overflow-y: scroll;
}

body{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#242424+0,5d5d5d+26,5d5d5d+76,242424+100 */
	background-image:url(../img/.png) ;
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
line-height: 1.625;
	letter-spacing: 0.3px;
	color: #333;
}

.popup-btnlist{
	text-align: center;
}
.popup-btnlist > li{
	display: inline-block;
	vertical-align: top;
	margin: 0 15px 10px;
}
.popup-btnlist > li a{
	display: inline-block;
	padding: 6px 12px;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: 1pt;
	text-decoration: none;
	background-color: #F15A24;
}
#mega_logo{
    background: #222 none repeat scroll 0 0;
    color: #aaa;
    line-height: 40px;
    min-height: 40px;
    position: relative;
    width: 100%;
    z-index: 10005;
}
#logo {
    float: left;
    width: 125px;
    margin: 0 0 0 4%;
}
#logo a {
    background: rgba(0, 0, 0, 0) url("../img/megalogo.png") no-repeat scroll left center / 100% auto;
    display: block;
    height: 0;
    overflow: hidden;
    padding: 40px 0 0;
}
#wrapper{
	background-color: #eef0f1;
}

h2{
	font-weight: bold;
	font-size: 150%;
	margin-top: 10px;
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
h4{
	font-size:27px;
	padding: 10px 0 20px;
	color: #0078da;
	font-size: 150%;
}
h4 span{
	font-size: 90%;
}
#main{
	background: #DBDBDB;
	overflow: hidden;
	margin: 70px 0 0;
	padding: 30px 0;
	height: 530px;
	background:url("../img/main_bg.jpg")  center no-repeat;
	background-size: auto 100%;
}
#main_in{

	margin: 0 auto;
	position: relative;
}
#main_logo{
	width:50%;
}
#main_logo img{
	margin: 0 auto;
	width:100%;
}
#main_sp{
	position: absolute;
	top:60px;
	right:150px;
	z-index: 10;
}
#main_title{
	position: absolute;
	top:87px;
	left:200px;
	color: #0078da;
	z-index: 11;
}

#main_title_sub2{
	font-weight: bold;
	font-size: 220%;
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
	line-height: 1.4;
}
#mh{
	background: linear-gradient(to right, #F7F7F7, #e1e1e1);
	overflow:hidden;
}
#mh_in{
	margin:0 auto;
	width:900px;
	padding:40px 0;
	overflow:hidden;
}
#mh_left{
	float:left;
	width:47%;
}
#mh_left #what_title{
	font-size:150%;
}
#mh_right{
	float:right;
	width:52%;
}
#mh_right img{
	width:100%;
}

#donyu{
	margin-top: 20px;
}
#donyu span{
	border-radius: 20px;
    background-image: linear-gradient(to right, #0078da 0%, #00beff 100%);
	color: #fff;
	font-size: 130%;
	padding: 7px 20px;
	display: inline;
	font-weight: bold;
	text-align: center;
}
#ajax-wrap{
	background:url(../img/scene.jpg)  center no-repeat;
	background-size: auto 100%;
}
#ajax-wrap h4{
	text-align: center;
}
/* 241008 追記 */
.popup_howto{
	position: fixed;
	z-index: 1000;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	max-width: 1600px;
	max-height: 800px;
	height: 85vh;
	width: 90%;
	background: url(../img/scene.jpg)  center no-repeat;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	margin: 0 auto;
	overflow-y: scroll;
	transition: .3s ease-in-out;
}
.popup_howto.js-open{
	opacity: 1;
	visibility: visible;
}
.popup_howto h4{
	text-align: center;
}
.popup_howto .scene_item{
	display: flex;
	justify-content: space-between;
}
.popup_howto .balloon-right{
	text-align: left;
}
.popup_howto .exercise_end{
	padding: 48px;
	font-size: 110%;
	font-weight: bold;
	margin-top: 10px;
	text-align: left;
}
.popup_area{
	cursor: pointer;
}
#overlay{
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	opacity: 0;
	visibility: hidden;
}
#overlay.js-open{
	opacity: 1;
	visibility: visible;
}
/* 241008 追記 END */
#new{
	padding: 25px 0;
	overflow: hidden;
	background: #3D3D3D;
}
#new_in{
	width: 50%;
	margin: 0 auto;
}
#new_logo{
	float: left;
	font-weight: bold;
	font-size: 130%;
	color: #0078da;
	background: -webkit-linear-gradient(0deg, #0078da, #00beff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline;
	margin-right: 20px;
}
#new_img{
	float: left;
	margin-right: 20px;
}
#new_txt{
	float: left;
	font-size: 130%;
	border-left: 1px solid #C0C0C0;
	padding-left: 20px;
	color: #fff;
}
#what_title{
	color: #0D0D0D !important;
	font-size: 170%;
	font-weight: bold;
	margin-bottom: 10px;
}

#what_slide{
	margin: -30px auto 0;
	background-image:url("../img/bg3.jpg");
	background-repeat: no-repeat;
	background-position: left;
}
#what_slide2{
	margin: 50px auto 0;
	background-image:url("../img/bg4.jpg");
	background-repeat: no-repeat;
	background-position: top right;
}
#what_slide_in{
	margin: 0 auto;
	width: 80%;
	overflow: hidden;
}
#slider{
	background:url(../img/slide/iphone_slide.png)  center;
	background-repeat: no-repeat;
	background-size: 115% auto;
	float: left;
	width: 40%;
}

.slider{
    margin: 0 auto;
    width: 53%;
}
.slider img{
    height: auto;
    width: 100%;
	padding: 80px 0;
}
#what{
	margin: 90px 0;
	float: right;
	width: 50%;
	text-align: left;
}
#what2{
	margin: 20px auto 20px;
	text-align:center;

}
#what_title_sub{
	font-weight: bold;
	font-size: 150%;
}
#what_txt{
	color: #141414;
	font-size: 1.1rem;
	line-height: 180%;
	margin-bottom: 30px;
}
#what_txt p{
	font-size: 15px;
	padding:15px 0;
	line-height: 1.5;
}
#what_txt a{
	color: #0078da;
	text-decoration: underline;
}
#video{
	width:60%;
	margin:0 auto 70px;
text-align:center;

}

#video video{
	width:430px;
  height: 570px;
  object-fit: cover; /* この一行を追加するだけ！ */
}

.slick-prev:before,
.slick-next:before {
    color: #000;
}
#data_button {
    position:relative;
    z-index:1;
    border-radius:2em;
    padding:10px;
    width:200px;
    background:linear-gradient(to right, #0078da, #00beff);
    text-align:center;
	color: #0078da;
}
#data_button:hover {

}
    #data_button::before {
        position:absolute;
        top:0;
        left:0;
        z-index:-1;
        box-sizing:border-box;
        border-radius:2em;
        padding:2px;
        width:100%;
        height:100%;
        background:#fff;
        background-clip:content-box;
        content:"";
    }
    #data_button::before:hover {
    background-image: linear-gradient(to right, #0078da 0%, #00beff 100%);
    }
.small{
	font-size: 80%;
}

.remote{
	overflow: hidden;
	width: 900px;
	margin: 40px auto 0;
}
.remote_left{
	float: left;
	width: 40%;
}
.remote_left img{
	width: 100%;
}
#movie_left img:hover{
	opacity: 0.7;
}
#movie{
	width: 543px;
	height: 675px;
}
.remote_right{
	float: right;
	text-align: left;
	width: 55%;
}
.remote_title{
	font-weight: bold;
	font-size: 160%;
	color: #0078da;
}


/*使い方*/
#scene{
	overflow:hidden;
	background: url(../img/performance_bg.png) no-repeat top left;
	margin: 30px 0;
}
.scene_in {
    margin: 20px auto 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
    width: 900px;
	overflow: hidden;
}
.scene_cate {
	background-color:rgba(255,255,255,1);
    border-radius: 8px;
    padding: 20px;
	border: 2px solid #B7B7B7;
	margin: 0 auto;
  cursor: pointer;
}
.scene_cate p{
	color: #333;
	padding-top: 5px;
}
.scene_cate:hover {
	border: 2px solid #0078da;
}
.scene_cate img{
	margin: 10px 0;
}
.scene_cate h3{
	font-size: 130%;
	font-weight: bold;
	color: #0078da;
}
.scene_name{
	background: linear-gradient(to left,#0078da, #00beff);
	color: #fff;
	margin-bottom: 10px;
	padding: 5px;
	font-weight: bold;
}
.builder{
	background: url(../img/builder.png) no-repeat;
	background-position: right top;
}
.owner{
	background: url(../img/owner.png) no-repeat;
	background-position: right top;
}
.owner2{
	background: url(../img/owner2.png) no-repeat;
	background-position: right top;
}
.craftsman{
	background: url(../img/craftsman.png) no-repeat;
	background-position: right top;
}
.husband{
	background: url(../img/husband.png) no-repeat;
	background-position: right top;
}
.son{
	background: url(../img/son.png) no-repeat;
	background-position: right top;
}
.daughter{
	background: url(../img/daughter.png) no-repeat;
	background-position: right top;
}
.scene_wrap{
	width: 70%;
	margin: 0 auto;
}
.scene_name2{
	background: #0078da;
	color: #fff;
	margin-bottom: 10px;
	padding: 5px;
	font-weight: bold;
	font-size: 120%;
	text-align: center;
}


.balloon-left p,.balloon-right p {
  margin: 0;
  padding: 0;
}
.balloon-left ul,.balloon-right ul{
	list-style: disc;
}
.balloon-left ul li{
	margin-left: 25px;
}
.balloon-left ul li{
	margin-right: 25px;
}
.balloon-left {
  position: relative;
  display: inline-block;
  margin: 0 0 1.5em 15px;
	padding: 20px 15px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #878787;
  box-sizing: border-box;
}

.balloon-left:before {
  content: "";
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.balloon-left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #878787;
  z-index: 1;
}

.balloon-left p {
  margin: 0;
  padding: 0;
}
.balloon-right {
  position: relative;
  display: inline-block;
  margin: 0 180px 1.5em 0;
  padding: 20px 15px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #878787;
  box-sizing: border-box;
}

.balloon-right:before {
  content: "";
  position: absolute;
  top: 50%;
  right: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-left: 12px solid #FFF;
  z-index: 2;
}

.balloon-right:after {
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-left: 14px solid #878787;
  z-index: 1;
}

.balloon-right p {
  margin: 0;
  padding: 0;
}
.talk{
	margin: 0 auto 30px;
	line-height: 2;
	width:85%;
}

#exercise_end{
	font-size: 110%;
	font-weight: bold;
	margin-top: 10px;
}


@media only screen and (max-width: 1400px){
#main_img_pc img,h1 img{
	width: 100%;
}
}

#features_pc p,.case_in p,.features_s_txt{
	font-size: 17px;
	line-height: 170%;
}
#menu_pc{
	background-color:#121212;
	overflow:hidden;
}
#menu_pc ul{
	margin:0 auto;
	width:872px;
}
#menu_pc li{
	float:left;
	padding:10px 8px 12px;
	list-style:none;
	font-size: 120%;

}
#menu_pc a{
	color:#909090;
	margin-left:15px;

}
#menu_pc a:hover{
	color: #00beff;
}
.triangle_bottom{
	width: 50px;
	height: 50px;
	border: 6px solid;
	border-color:  transparent transparent #959595 #353535;
	transform: rotate(-45deg);
	margin:0 auto;
}


.maintitle{
	color:#0089b8;
	font-size:39px;
	text-align:center;
	margin:15px 0 20px;
	font-weight:bold;
	font-style: italic;
	letter-spacing: 2px;
}
.maintitle span{
	font-size:48px;
	font-style: italic;
}
/*#movie{
	background-image:url(../img/m.jpg) ;
	padding: 80px 0;
	margin: 50px 0 100px;
	background-position:center top;
	background-repeat:no-repeat;
	-moz-background-size:cover;
	background-size:cover;
}*/

.video-container {
	margin-bottom:50px;
}


.cate_title{
	font-size: 29px;
	color: #141414;
	text-align: center;
	font-weight: bold;
	margin-top: 60px;
}
.cate_title_s{
	font-size: 70%;
	text-align: center;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	color: #3fa0f0;
}


.dl a{
	color:#fff;
	font-weight: bold;
}
.dl {
	background:#0078da;
	background-image:url(../img/top_dl_hover.png);
	background-position: 180px;
	background-repeat:no-repeat;
	color:#fff;
	border:1px solid #a1a1a1;
	border-radius: 5px;		/* CSS3草案 */
	-webkit-border-radius: 5px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 5px;	/* Firefox用 */
	width:200px;
	padding:8px 0 8px 40px;
	font-size:20px;
}
.dl:hover a{
	color:#2aa6d0;
}
.dl:hover{
	background:url(../img/top_dl.png) no-repeat 180px;
	color:#2aa6d0;
	border:1px solid #2aa6d0;
	border-radius: 8px;		/* CSS3草案 */
	-webkit-border-radius: 8px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 8px;	/* Firefox用 */
	padding:8px 0 8px 40px;
}

#features_pc{
	background-color:#F7F7F7;
  background: -moz-linear-gradient(left, #F7F7F7, #e1e1e1);
  background: -webkit-linear-gradient(left, #F7F7F7, #e1e1e1);
  background: linear-gradient(to right, #F7F7F7, #e1e1e1);
	padding: 20px 0;
}
#features_sp{
	background-color:#F7F7F7;
  background: -moz-linear-gradient(left, #F7F7F7, #e1e1e1);
  background: -webkit-linear-gradient(left, #F7F7F7, #e1e1e1);
  background: linear-gradient(to right, #F7F7F7, #e1e1e1);
	padding: 20px 0;
}

.features{
	overflow:hidden;
}
.features_in{
	margin: 0 auto;
	width: 900px;
	overflow: hidden;
	padding: 40px 0;
	border-bottom: 1px solid #fff;
}
.features_in2{
	margin: 0 auto;
	width: 900px;
	overflow: hidden;
	padding: 40px 0;
}
.features_left{
	width: 40%;
	float:left;
	text-align:left;
}
.features_left a img:hover{
	opacity:0.7;
}
.features_right{
	width: 56%;
	float:right;
	text-align:left;
}
.features_right a{
	text-decoration: underline !important;
	color: #333;
}
.features_left2{
	width: 55%;
	float:left;
	text-align:left;
}
.features_right2{
	width: 40%;
	float:right;
	text-align:left;
}
.features_right img,.features_right2 img,.features_left img,.features_left2 img{
	width: 100%;
}
.features_btn{
	background: #F7F7F7;
	color: #0078da;
	border: 1px solid #0078da;
	border-radius: 5px;
	padding: 5px 15px;
	margin: 15px 0 0 0;
	display: inline-block;
}
.features_btn:hover{
	background: #0078da;
	color: #fff;
}

.features_title{
	font-size:23px;
	padding:5px 0 0;
	font-weight: bold;
	color:#0078da;
}

.features_title2{
	font-size:28px;
	padding-bottom: 5px;
}
.features_title2 span{
	font-weight:bold;
}

#features_pc a,#features_sp a{
	color: #0078da;
	font-size: 95%;
	font-weight:bold;
}


#case1{
	background: url(../img/performance01.png) no-repeat;
	width: 317px;
	height: 317px;
	float: left;
	margin: 5px 5px;
	display: table;
}

#case1 p{
	display: table-cell;
	vertical-align: middle;
}
#case2{
	background: url(../img/performance02.png) no-repeat;
	width: 317px;
	height: 317px;
	float: left;
	margin: 5px 5px;
	display: table;
}
#case2 p{
	display: table-cell;
	vertical-align: middle;
}
#case3{
	background: url(../img/performance03.png) no-repeat;
	width: 317px;
	height: 317px;
	float: left;
	margin: 5px 5px;
	display: table;
}
#case3 p{
	display: table-cell;
	vertical-align: middle;
}
.features_s{
	overflow: hidden;
	width: 980px;
	margin: 60px auto 0;
	background-color:#d1e7ee;
}
.features_s_img{
	float: left;
}
.features_s_txt{
	float: right;
	width: 650px;
}
.features_s_txt_in{
	font-weight:bold;
	font-size:26px;
	padding:10px 3px 5px 0 ;
	margin-bottom: 8px;
}
.features_s_txt_in span{
	font-size: 24px;
	font-weight: bold;
	background: #fff;
	color:#0078da;
	font-style: italic;
	margin: 10px 0;
}

#method{
	margin-top: 40px;
	width: 960px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
}
#method_title{
	font-size:27px;
	color:#fff;
	text-align:center;
	font-weight:bold;
	margin:40px 0 10px;	
}
#method_title2{
	font-size:28px;
	color:#141414;
	text-align:center;
	font-weight:bold;
	margin:30px 0 10px;	
}
#method_title2 span{
  position: relative;
  padding: 1rem .7rem;
}

#method_title2 span:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  background-image: -webkit-gradient(linear, left top, right top, from(#0078da), to(#00beff));
  background-image: -webkit-linear-gradient(left, #0078da 0%, #00beff 100%);
  background-image: linear-gradient(to right, #0078da 0%, #00beff 100%);
}
.method_in{
	background:#fff;
	border-radius: 10px;		/* CSS3草案 */
	-webkit-border-radius: 10px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 10px;	/* Firefox用 */
	border: 2px solid #B7B7B7;
	background:#F7F7F7;
}

.step{
	color: #0078da;
	font-size: 90%;
	font-weight: bold;
}
.method_in_title{
	font-weight:bold;
	font-size:23px;
	padding:8px 0 5px;
}
.method_inner{
	padding:13px;
	text-align:center;

}
.button{
	background-color: transparent;
	border: none;
	cursor: pointer;
}
.case_in{
	padding: 20px;
	overflow: hidden;
}
.case_left{
	float: left;
	width: 58%;
}
.case_right{
	float: right;
	width: 40%;
}
.case_right img{
	width: 100%;
}
.case_in span{
	color: #ff,,f;
	background-color: #333333;
	padding: 3px 5px;
}
.case_title{
	font-size: 150% !important;
	font-weight: bold;
	color: #235364;
	padding: 5px 0;
}
.case_in p{
	font-size: 105%;
	line-height: 150%;
}
.close {
	text-align: right;
	padding-right: 10px;
}
#pc{
	background: #626262;
	overflow:hidden;
	border-bottom:1px solid #c4c4c4;
	color:#fff;
}
#sp{
	background: #626262;
	overflow:hidden;
	color:#fff;
}
#pc_in{
	width:960px;
	margin:0 auto;
}
.dl_title{
	color:#fff;
	font-size:27px;
	font-weight:bold;
	line-height:140%;
	padding-bottom:10px;
}
.dl_left,.dl_left2{
	float:left;
	width:420px;
	padding-top:15px;
	margin:0 auto;
	text-align:center;
}

.dl_right{
	float:right;
	width:500px;
	padding:35px 0 0 0;
	text-align: left;
}
.dl_right span{
	font-size:60%;
}
.dl_right p{
	padding:0 0 20px 0;
	font-weight: normal;
	font-size: 18px;
}
#footer{
	background:#000;
	text-align:right;
	overflow:hidden;
}
#app ul{
	overflow: hidden;
	float: left;
}
#app li{
	margin-right: 3px;
	list-style: none;
	width: 30%;
	display: inline-block;
	vertical-align: bottom;
}
#app img{
	width: 100%;
}
#app li.qr{
	width: 17%;
}
#app li.qr img{
	width: 100%;
}
#app a:hover{,
	opacity:0.8;
}
#footer a{
	color:#c5c5c5;
}
#footer a:hover{
	opacity: 0.8;
}
#footer_in{
	margin:0 auto 10px;
	overflow:hidden;
}
#footer ul{
	margin:15px 20px 25px 0;
	text-align:right;
	overflow:hidden;
}
#footer ul li{
	float:right;
	color:#fff;
	list-style:none;
	font-size:14px;
	padding-left:20px;
}

#copy,#copy a{
	color:#c5c5c5;
	font-size:14px;
	text-align:center;
}


@media only screen and (max-width: 640px){
#wrapper,#header,h1,h1 img,ul,#what_left,#what_left img,.features_left img,.features_right2 img,#logo_sp,#main_img_sp,#main_img_sp img,.features_s,.features_s_img,#method_in,#what,#mh_left,#mh_right{
	width:100% !important;
}
.features_left,.features_right,#footer_in,#pc_in,.dl_left,.dl_left2,.dl_right,.features_s_txt,.cate_title,#what_txt_sp,.remote_left,.remote_right{
	width:98%;
	margin: 0 auto;
}
#what_title{
	font-size: 140%;
	text-align:left;
}
.features_in,.features_in2{
	width:96%;
	margin: 0 auto;
}
#mh_in{
	width:90%;
	margin: 0 auto;
}
 #video {
	top:0;
	width: 90%;
	height: 80%;
	background: #000;/*背景を黒で表示*/
 }
	
h1{
	display:none;
}
h2 {
    margin-top: 0;
  font-size: 130%;
}
h4{
	font-size:130%;
}
	#top-head{
		display: none;
	}
#main_img_pc,#maintitle_pc,#menu_pc,#page-top{
	display: none;
}
#main {
	margin: 0;
}
#new{
	width: 100%;
	margin: 0 !important;
}
	#new_in{
		width: 80%;
	}
#new_txt{
	border-left: none;
	padding: 0;
}

#main_sp{
	position: absolute;
	top:240px;
	right:0;
	text-align: center;
}
#main_sp img{
	width: 70%;
	text-align: center;
	margin: 0 auto;
}
#main_title{
	position: absolute;
	top:10px;
	left:10px;
	color: #0078da;
}
#main_title_sub2 {
    font-size: 200%;
}
#slider{
	background:url(../img/slide/iphone_slide.png)  center;
	float: none;
	width: 100%;
}

#what_slide_in{
	padding: 30px 0;
	margin: 0 auto;
	width: 90%;
	overflow: hidden;
}
#what2{
	width: 90%;
}
	#data_button{
		margin: 0 auto;
	}
.slider img{
    height: auto;
    width: 100%;
	padding: 30px 0;
}
	#slider{
		background:url(../img/slide/iphone_slide.png)  center;
		background-repeat: no-repeat;
		background-size: 100% auto;
		float: none;
		margin-top: 10px;
	}
	.slider{
		margin: 20px auto;
		width: 47%;
	}
.maintitle{
	font-size:25px;
	margin-bottom:25px;
}
.maintitle span{
	font-size:32px;
	font-style: italic;
}
#what{
	margin: 0;
	float: none;
}

#what_right{
	margin-top:0px;
	margin-bottom:20px;
}
	.remote{
		width: 96%;
		margin: 5% auto;
	}

#features_sp .features_in,#features_sp .features_in2{
	widows: 92% !important;
	padding:0;
	margin: 0 auto 3%;
}
.features_title {
  font-size: 21px;
}
.features_title2{
	font-size:23px;
}
.features_left{
	padding:1% 0 0 1%;
}
.features_right{
	padding:10px 0 10px 1%;
}

#method{
	margin: 1% auto !important;
	width:96%;
	overflow: hidden;
	grid-template-columns: 1fr;
}
.method_in{
	width: 90%;
	margin:0 auto 10px;
	float: none;
}
.method_inner{
	padding:2% 4% 5% !important;
	text-align:center;

}
.method_inner img{
	text-align:center;
	margin:0 auto;
	width: 100%;
}
.method_inner p{
	width:96%;
	text-align:left;
}
.method_in_title{
	padding:6px 0 4px !important;
}

.cate_title{
	font-size: 24px;
	padding-top: 15px;
	margin: 0;
}
	.button{
		width: 90%;
	}
	#case1{
		width: 100%;
	}
	#case1_sp,#case2_sp,#case3_sp{
		background: #2aa6d0;
		font-size: 70%;
		margin-bottom: 15px;
		color: #fff;
	}
	#case1_sp p,#case2_sp p,#case3_sp p{
		padding: 15px 0;
	}
.builder,.owner,.owner2,.craftsman,.husband,.son,.daughter{
	background-size: 26%;
}
.scene_cate {
    padding: 0 0 20px;
}
	.scene_cate img{
		width: 80%;
	}
	.scene_cate p{
		padding:0 10px;
	}
	#exercise_end{
		padding:10px;
	}
	.popup_howto .exercise_end{
		padding:10px;
	}
.scene_in {
    display: grid;
    grid-template-columns: 1fr;
    width: 96%;
    overflow: hidden;
	margin: 0 auto;
}
.balloon-right {
    width: 96%;
	margin: 80px auto 10px;
}
	#ajax-wrap{
		width: 100%;
	}
#ajax-wrap {
    padding: 1% !important;
}
.popup_howto{
	padding: 1% !important;
	width: 90%;
	height: 80vh;
}
.scene_wrap {
    width: 100%;
}
.features_s_img img{
	margin: 0 auto;
	display: block;
	width: 90%;
}
#pc{
	margin-top:30px;
}
.dl_right{
	padding:20px 0;
}
.dl_left img{
	width:80%;
}
.dl_left2 img{
	width:80%;
}
#logo_sp{
	display:block;
}
.dl,#app img{
	margin:0 auto;
	display:block;
}

#menu li{
	float:left;
	font-weight:bold;
	padding:3px 7px;
	list-style:none;
}
	#video{}
	.features_in1{
		height: 800px;
	}
#features_pc{
		display: none;
	}
#faq{
	width:100%;
}
.Contents{
	width:98% !important;
	margin:0 auto;
}
.ContentInner{
	width:98%;
	padding-left:1%;
}
.ContentInner ul{
	list-style:none;
	padding-left:2%;
}
.ContentInner ul li{
	width:96%;
	padding:2% 0;
}
		.case_left,.case_right{
		width:100%;	
	}
#spec{
	width:100%;
}
#spec table th{
	width:100%;
	display:block;
	clear:both;
	border-top:1px solid #5e8fab;
	border-left:1px solid #5e8fab;
	border-right:1px solid #5e8fab;

}
#spec table td{
	width:100%;
		border-top:1px solid #5e8fab;
		display:block;
}
#spec table th.last,#spec table td.last{
	border-bottom:none;
}
#spec h4{
	text-align:center;
	font-size:22px;
	margin-top:5%;
}
#download_main{
	width: 100% ;
}
.downloadinner{
	width: 96%;
	margin:0 auto;
}
#attention{
	width: 98%;
}
#attentionin{
	width: 98%;
	padding: 1%;
}
#download ul,#download h4{
	padding: 0;
}
#case1,#case2,#case3{
	display: none;
}
	.app img{
		text-align: center;
	}
}



@media only screen and (min-width: 641px){
h1{
	display:block;
}
.logo_sp,#main_img_sp,#maintitle_sp,#what_txt_sp{
	display: none;
}
}
@media only screen and (min-width: 801px) {
#logo_sp,#case1_sp,#case2_sp,#case3_sp,#menu_sp{
	display:none;
}
}
@media only screen and (min-width: 601px) {
#logo_sp,#menu_sp{
	display:none;
}
}
@media only screen and (min-width: 641px) and (max-width: 1024px){
	#wrapper,#main_img_pc,#main_img_pc img,#header,h1,h1 img,ul,#what_left img,#method,#logo_sp,#logo_sp img,.features_in1,.features_in2,.features_in2,.features_in3,#features,.features_left img,.features_right p,{
	width:100% !important;
}
	
#main_in{
	width: 95%;
	margin: 0 auto;
	position: relative;
}
#main_logo img{
	margin: 0 auto;
}
#main_sp{
	position: absolute;
	top:60px;
	right:10px;
	z-index: 10;
}
#main_title{
	position: absolute;
	top:30px;
	left:10px;
	color: #0078da;
	z-index: 11;
}	
	
	
	
#main_title {

}
#main_sp {

}
	#menu_pc,#method{
		width: 100%;
	}
	#menu_pc ul{
		margin: 0 0 0 90px;
		width: 100%;
	}
	#menu_pc a{
		margin: 0;
	}
#new_in {
  width: 90%;
  margin: 0 auto;
}
#what,#what_right,.method_inner p,#footer_in,#pc_in,.features_in,.features_in2{
	width:98%;
}
.features_in,.features_in2{
	width:90%;
}
.features_in,.features_in2{
	padding:0;
}
.features_title2{
	padding:5px 0;
}
#what_left,.features_left,.dl_left,.dl_left2{
	width:39%;
}
	.scene_in{
		width: 98%;
	}
#what {
  margin: 90px 0 0;
}
	#slider{
		background:url(../img/slide/iphone_slide.png)  center;
		background-repeat: no-repeat;
		background-size: 100% auto;
		width: 75%;
	}
	.slider{
		margin: 20px auto;
		width: 46%;
	}
	.features_in {
	  margin: 0 auto 20px;
	}
.features_left{
	padding:1% 0 1% 1%;
}
.features_right{
	padding:1% 1% 0 0;
}
#what_right,.features_right{
	width:39%;
}
.dl_right{
	width:46%;
}
.maintitle{
	font-size:25px;
}

#what_right{
	margin-top:10px;
	margin-bottom:30px;
}
#what_right p{
	font-size:16px;
}
.features_title2{
	font-size:20px;
}
#method{
	margin-bottom:50px;
}
.method_in{
	margin-bottom:10px;
}
	.method_in img{
		width: 100%;
	}
	#case1{
		width: 100%;
	}
	#case1_sp,#case2_sp,#case3_sp{
		background: #2aa6d0;
		font-size: 70%;
		margin-bottom: 15px;
	}
	#case1_sp p,#case2_sp p,#case3_sp p{
		padding: 15px 0;
	}
	.button{
		width: 90%;
	}
	#case1,#case2,#case3{
	display: none;
}
}


/*動作環境*/
.title_sub{
	font-size:18px;
	font-weight: bold;
	color: #494949;
	text-align: center;
	padding: 3px 5px;
}

#spec{
	width:960px;
	padding:40px 0 5%;
	color:#141414;
	margin:80px auto 0;
}

table{
	width:85%;
	margin:6% auto;
}
table li{
	padding:2px 0;
	list-style:none;
}

#spec table th{
	border-right:1px solid #0078da ;
	border-top:1px solid #0078da ;
	color: #0078da;
	font-weight: bold;
	padding:3%;
	width:30%;
	background:#fff;
}
#spec table td{
	border-top:1px solid #0078da ;
	padding:3%;
}
#spec table th.last,#spec table td.last{
	border-bottom:1px solid #0078da ;
}
#spec h4{
	text-align:center;
	font-size:25px;
	margin-top:5%;
	font-weight: bold;
	padding-bottom: 0;
}



@media only screen and (min-width: 641px) and (max-width: 1024px){
#spec{
	width:100%;
	padding-bottom:5%;
}
table{
	width:95%;
}
}
@media only screen and (max-width: 640px){
#spec{
	width:100%;
}
	#spec table th{
		border: none;
		width: 100%;
		padding: 0 0 10px 0;
	}
	#spec table td{
		padding: 0;
	}
	table{
		width: 98%;
		
	}
}


/*料金プラン*/

#price{
	width:960px;
	margin:0 auto;
	text-align:center;
	padding:120px 0 5%;
}
#price table{
		font-size:19px;
}
#price table th.white{
	border-right:1px solid #A7A7A7 ;
	border-top:1px solid #A7A7A7 ;
	padding:1%;
	width:20%;
	color:#fff;
	background:#A7A7A7;
}

#price table td{
	border-top:1px solid #0078da ;
	border-right:1px solid #0078da ;
	padding:3%;
	width:20%;
}

#price .none2{
	border-top:none;
}
#price h4{
	text-align:center;
	font-size:24px;
	margin-top:5%;
}
#price table th.last,#price table td.last{
	border-bottom:1px solid #0078da ;
}
#price table th.last2,#price table td.last2{
	border-right:none;
}
#price table td.none{
	border-top:none;
	border-right:none;
}
#price table td.plan{
	color:#fff;
	background-image: linear-gradient(to right, #0078da 0%, #00beff 100%);
	font-weight:bold;
	font-size:20px;
	border:none;
}

#price a{
	color:#fff;
}
#txt a:hover{
	color:#5e8fab;
}

#free{
	border:1px solid #0078da;
	padding:10px;
	margin:0 auto 10px;
	width:60%;
	background:#fff;
}
#txt{
	font-size:110%;
	margin-top:30px;
}
#txt a{
	color:#0078da;
	text-decoration: underline;
}


#buy:hover{
	border:1px solid #ff8400;
	background:#eef0f1;
	color:#ff8400;
	border-radius: 8px;		/* CSS3草案 */
	-webkit-border-radius: 8px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 8px;	/* Firefox用 */
}
#buy{
	border:1px solid #ff8400;
	background:#ff8400;
	color:#fff;
	border-radius: 8px;		/* CSS3草案 */
	-webkit-border-radius: 8px;	/* Safari,Google Chrome用 */
	-moz-border-radius: 8px;	/* Firefox用 */
	text-decoration:none;
	width:300px;
	padding:10px 0;
	font-weight: bold;
	margin:30px auto 0;
	font-size:22px;
}

#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
}
#page-top a {
	border: 1px solid #2aa6d0;
    text-decoration: none;
    color: #2aa6d0;
    width: 80px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 50%;
	font-weight: normal;
}
#page-top a:hover {
    text-decoration: none;
    background: #2aa6d0;
	color: #fff;
	font-weight: normal;
}

@media only screen and (max-width: 640px){
#what_slide2{
	background-position: center;
}
#video video{
	width:100%;
  height: 570px;
  object-fit: cover; /* この一行を追加するだけ！ */
}
#price{
	width:100%;
}
#price table{
	width:98%;
	display:block;
	clear:both;
	font-size:90%;
}

#price table th.last,#spec table td.last{
	border-bottom:none;
}
#price h4{
	text-align:center;
	font-size:22px;
	margin-top:5%;
}
#price table td.plan{
	font-size:90%;
}
#free{
	width:90%;
}
}


@media only screen and (min-width: 641px) and (max-width: 1024px){
#price{
	width:100%;
	padding-bottom:5%;
}
table{
	width:95%;
}
}



/*よくあるご質問*/
.displayNone {
display: none;
}
.accordion li {
	padding-bottom: 5px;
}
.accordion a {
display: block;
}
.contentWrap {
margin: 10px;
}
.switch {
cursor:pointer;
padding:10px 40px 10px 20px;
font-size: 16px;
background: #eee;
border-bottom: 2px solid #eef0f1;
position: relative;
}.faq_title{
	font-weight: bold;
	text-align: left;
	color: #0078da;
	font-size: 23px;
	margin-bottom: 10px;
}

#faq{
	margin:0 auto;
}
#faq_txt{
	color:#141414;
	text-align:center;
	margin-bottom:20px;
	padding-top: 30px;
}
#faq_txt a{
	color:#141414;
	text-align:center;
	margin-bottom:20px;
	text-decoration:underline;
}
#faq h2{
	font-size:130%;
	color:#5e8fab;
	margin-bottom:8px;
}
.Contents{
	margin:0 0 20px;
	width:960px;
}
.ContentInner{
	padding:15px 0 15px 15px;
	background-color: #eef0f1;
	color: #141414;
}
.ContentInner ul{
	padding-left:20px;
}
.ContentInner ul li{
	padding:3px 0;
}
.ContentInner ul li span{
	color:#1b4aab;
}
.ContentInner a{
	color:#141414;
	border-bottom:1px dashed #8C8C8C;
}
.ContentInner p.pagetop_s{
	text-align:right;
}
.ContentInner ol li{
	margin:0 0 8px 20px;
}
.Q{
	background:url(../img/icon_q.png) no-repeat 10px 10px;
	background-color: #fff;
	padding:16px 15px 16px 50px;
	color:#141414;
}
.A{
	background:url(../img/icon_a.png) no-repeat left top;
	padding:5px 0 10px 55px;
	margin-bottom:10px;
}
.switch:after {
position: absolute;
top: 60%;
right: 10px;
margin-top: -18px;
content: '▶';
font-size: 18px;
font-weight: bold;
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-moz-transition: all, 0.25s, linear;
-o-transition: all, 0.25s, linear;
-webkit-transition: all, 0.25s, linear;
transition: all, 0.25s, linear;
font-family: sans-serif;
color: #1b4aab;
}
.switch.open:after {
-moz-transform: translate(0, 50%);
-ms-transform: translate(0, 50%);
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
font-family: sans-serif;
}

@media only screen and (min-width: 641px) and (max-width: 1024px){
#faq{
	width:100%;
}
.Contents{
	width:98%;
	margin:0 auto;
}
.ContentInner{
	width:98%;

}
.ContentInner ul li{
	width:96%;
}
}


/*ダウンロード*/
#download{
	width:960px;
	padding:40px 0 5%;
	color:#141414;
	margin:80px auto 0;
}
#download h4{
	font-size: 20px;
	padding: 20px 0 0 0;
}
#download ul{
	padding-left: 20px;

}
#download_main{
	background: #fff;
	color: #000;
	width: 960px;
	margin: 50px auto;
}
#download_main_in{
	width:96%;
	margin:0 auto;
}
.downloadinner{
	margin: 10px auto 20px;

}
#download .dl a{
	color: #ff8400;
	text-decoration: none;
}
#download .dl a:hover{
	color: #fff;
	text-decoration: none;
}
#download a{
	font-weight: bold;
	color: #ff8400;
}

#attention{
	border: 1px solid #999;
	margin: 0 auto 20px;
}
#attentionin{

}
#method_title3{
	font-size:28px;
	color:#141414;
	text-align:center;
	font-weight:bold;
	margin:30px 0 10px;	
}
#method_title3 span{
  position: relative;
  padding: 1rem .7rem;
}

@media only screen and (max-width: 736px){

#method_title3{
	font-size:24px;
	color:#141414;
	text-align:center;
	font-weight:bold;
	margin:30px 0 10px;	
}
#method_title3 span{
  position: relative;
  padding: 1rem .7rem;
}

#faq,#spec,#price,#download{
	margin:0 auto;
	padding: 0 0 5%;
}
	#features_pc{
		display: none;
	}

	.features_s_txt p{
		padding: 8px 0 5px;	
	}
	.features_s{
		margin: 0 0 20px;
		padding: 15px 0;
	}
	#main_img,#main_img img{
		width: 100%;
	}
	#download,#download_main{
	width:100% !important;
}
}
@media only screen and (min-width: 738px){
	#features_sp{
		display: none;
	}
#faq{
	width:960px;
	margin:0 auto 0;
	padding:120px 0 5%;
}
}
@media screen and (min-width: 641px) and (max-width: 768px) {
.features_s,.features_s_img img{
		width: 100%;
	}

	.features_s_img{
		width: 45%;
	}
	.features_s_txt{
		width: 54%;
	}
	#method_in{
		width: 100%;
	}
}



/*高画質ページ*/

#highresolution{
	width: 1260px;
	margin: 15px auto;
	text-align: center;
	font-size: 22px;
}
#highresolution_maintxt{
	margin: 50px;
	font-size: 25px;
	line-height:220%;
}
.highresolution_cate{
	text-align: left;
	margin-top: 70px;
}
.highresolution_cate_txt span{
		font-size: 17px;
}
.highresolution_cate_title{
	padding: 0 0 0 45px;
	font-size: 30px;
	font-weight: bold;
	background:url(../img/highresolution/highresolution_08.png)  no-repeat left;
	margin: 0;
}
.highresolution_cate_txt{
	margin: 20px 0 40px 0;
	padding: 0;
}
.highresolution_left{
	float: left;
	padding: 30px 0 0 0;
}
.highresolution_right{
	float: right;
	padding: 30px 0 0 0;
}
#desinerseries{
	background: #fff;
	overflow: hidden;
	margin: 40px 0 20px;
}
#desinerseries_in{
	width: 1100px;
	margin: 0 auto;
	padding: 40px;
	overflow: hidden;
}
.desinerseries_txt{
	width:640px;
	line-height: 180%;
	font-size: 18px;
}
#highresolution_situation{
	margin: 100px 0;
}
#highresolution_cate_img{
	margin-top:70px; 
}
#update{
	width: 1160px;
	background:url(../img/highresolution/highresolution_09.png)  no-repeat ;
	margin: 40px auto;
	padding-bottom: 20px;
	font-size: 23px;
	text-align: center;
}
#highresolution_btn a{
	border: 1px solid #333;
	border-radius: 5px;
	padding: 15px;
	margin: 30px 0 20px;
	color: #333;
	width: 250px;
	text-align: center;
	display: block;
}
#highresolution_btn a:hover{
	border: 1px solid #333;
	border-radius: 5px;
	padding: 15px;
	margin: 30px 0 20px;
	color: #fff;
	background-color: #333;
	width: 250px;
}	

#update_title{
	font-size: 30px;
	font-weight: bold;
	color: #0094c0;
	margin: 30px 0 25px;
}
#update_btn a{
	border: 1px solid #0094c0;
	border-radius: 5px;
	padding: 15px;
	margin: 30px auto 60px;
	color: #0094c0;
	width: 250px;
	display: block;
}
#update_btn a:hover{
	border: 1px solid #0094c0;
	border-radius: 5px;
	padding: 15px;
	margin: 30px auto 60px;
	color: #fff;
	background-color: #0094c0;
	width: 250px;
}

@media only screen and (min-width: 641px){
		.highresolution_left_sp{
		display: none;
	}

	
}

@media only screen and (max-width: 1024px){
	#highresolution, #highresolution p img, #desinerseries p, #update,#desinerseries_in,.desinerseries_txt{
		width: 100%;
}
	#desinerseries p,#desinerseries p img,.highresolution_left,.highresolution_left img,#highresolution_maintxt{
		width: 98%;
		margin: 0 1%;
}
	#update_btn{
		font-size: 80%;
	}
	.highresolution_cate_title{
		margin: 0 1%;
	}
	.highresolution p{
		padding: 10px 0;
	}
	.highresolution_left{
		padding: 10px 0 0 0;
	}
	.highresolution_left{
		display: none;
	}
	.highresolution_left_sp{
		width: 100%;
	}
	.highresolution_left_sp img{
		width: 40%;
		display: block;
		margin: 0 auto;
		text-align: center;
	}
.highresolution_cate_title{
	font-size: 26px;
}
	#desinerseries_in{
		padding: 0;
	}
	#update{
		background: none;	
	}
#update_btn a,#update_btn a:hover{
	margin: 20px auto 0;
}
	#highresolution_situation,#highresolution_cate_img{
		margin: 20px 0;
	}
	#highresolution_maintxt{
		line-height: 150%;
		font-size: 21px;
		margin: 20px 0;
	}

	#desinerseries_in_title{
		margin: 20px 0 0 0 !important;
	}
.highresolution_cate{
	text-align: left;
	margin-top: 30px;
}
	#highresolution_btn a,	#highresolution_btn a:hover{
		margin: 20px auto 20px;
		display: block;
		text-align: center;
	}
#highresolution_situation{
	margin: 20px 0 !important;
}

@media only screen and (max-width: 640px){
	#desinerseries p img{
		width: 100%;
	}
	#update_title,.highresolution_cate_txt{
		font-size: 95%;
	}
	#update_title_txt{
		text-align: left;
		width: 98%;
		margin: 0 1%;
		font-size: 95%;
	}
	.highresolution_cate_txt{
		margin: 15px 1% !important;
	}
	#update_title{
		margin: 10px !important;
	}
	
}
@media only screen and (min-width: 641px) and (max-width: 1024px){
#desinerseries p img{
	width: 70%;
}
#highresolution_maintxt {
    margin: 40px 0;
}
.highresolution_cate_txt{
    margin: 20px 1% !important;
}
}