@charset "UTF-8";
@import url("menu.css");

a, abbr, acronym, address, applet, article, aside, audio, 
b, big, blockquote, body, caption, canvas, center, cite, code,
dd, del, details, dfn, dialog, div, dl, dt, em, embed, 
fieldset, figcaption, figure, form, footer, 
header, hgroup, h1, h2, h3, h4, h5, h6, html, 
i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav,
object, ol, output, p, pre, q, ruby, 
s, samp, section, main, small, span, strike, strong, sub, summary, 
tt, table, tbody, textarea, tfoot, thead, time, tr, th, td,
u, ul, var, video { 
    font-family: -apple-system, 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', 'メイリオ', meiryo, sans-serif;
	font-size: 100%; 
	font-weight: inherit; 
	font-style: inherit; 
	vertical-align: baseline; 
	white-space: normal;
	text-align: left; 
	margin: 0; 
	padding: 0; 
	border: 0; 
	outline: 0;
	background: transparent; 
}

.size{
    font-size:0.9em;
}

ul{
    list-style: none;
}

hr{
    clear:both;
}

a{
    text-decoration: none;
    color:#555;
}

a:hover{
    opacity: 0.6;
}


img{
    max-width:100%;
}

textarea{
    background:#fff;
    border:1px solid #ccc;
}

html,
body{
    font-size:85%;
    color:#555;
    background:#fff;
}

.div33,
.div50,
.div66,
.div100{
    width:100%;
}

.headbox{
    padding:10px;
}
.headbox img{
    max-width:85%;
    margin-top:3px;
}


.centertxt{
    text-align:center;
}

.white{
    color:#fff;
}

.shadow{
    text-shadow: 1px 1px 3px #000;
}

.spacebottom{
    margin-bottom:30px;
}

.inner_con{
    width:94%;
    margin:0 auto;
}

#merit_box{
    padding:70px 0 40px;
}

#scene_box,
#solutions_box,
#news_box,
#toiawase_box,
#etc_box{
    padding:70px 0 40px;
}


#mainimg_box{
    background: url(../img/main_sp2.jpg) no-repeat -470px -50px; 
    padding: 0 0 50px 0; 
    margin:0;
}

#mainimg_box h2{
    padding:100px 0 0 10px;
}

#mainimg_box h3{
    color:#fff;
    padding:40px 0 0 10px;
}

#solutions_box,
#news_box{
    background:#FFE800;
}

html.body,h1,a{
    margin:0;
    padding:0;
}

p{
    margin:10px 0 0 0;
    padding:0;
}

.div66 p{
    margin-left:1%;
    margin-right:1%;
}

h3{
    font-size:1.3em;
    font-weight:bold;
    text-align:center;
    margin:20px 0;
}

h4{
    font-size:1.0em;
    font-weight:bold;
    text-align:center;
    margin:0 0 5px 0;
}

.boldtxt{
    font-size:1.3em;
    font-weight:bold;
    line-height:1.6em;
}

.rightbox{
    margin-top:10px;
    float:right;
}

.linkbtn{
    float:right;
    color:#fff;
    font-size:1.3em;
    font-weight:bold;
    margin:20px auto;
    width:6em;
}

.linkbtn a,
.instagram_more a{
    color:#fff;
    background:#999;
    padding:8px;
    display:block;
    text-align:center;
    border-radius:5px;
}

.linkbtn a:hover,
.instagram_more a:hover{
    background:#666;
}

.instagram_more{
    color:#fff;
    font-size:1.3em;
    font-weight:bold;
    margin:20px auto;
    width:10em;
}

.downloadbox{
    border:1px solid #555;
    font-size:1.3em;
    margin:20px auto;
    padding:10px;
    width:17em;
    text-align:center;
}

.downloadlinkbox{
    margin:0 auto;
    width:80%;
}

.downloadlinkbox img{
    max-width:100%;
}

.ioslink{
    max-width:49%;
    float:left;
    font-size:0.7em;
}

.googlelink{
    max-width:49%;
    float:right;
    font-size:0.7em;
}
.linktextcenter{
    text-align:center;
}

.downloadlinkbox:after, .downloadlinkbox:before,
#instafeed:after,#instafeed:before{
    content: "";
    clear: both;
    display: block;
}

#merit_box span{
    font-size:1.3em;
}

ul.scenelist{
    list-style-type:none;
    margin-top:20px;
    margin-bottom:20px;
}

ul.scenelist li{
    line-height:1.5em;
    margin:10px 0;
    padding:10px 0 10px 30px;
    background-image:url("../img/check.png");
    background-repeat:no-repeat;
    background-position:0px 4px;
}


#canvas_wrapper {
  max-width: 100%;
  margin: auto;
}

#canvas_wrapper img {
  max-width: none;
}

#map_canvas{
    width:100%;
    margin-top:40px;
	position: relative;
	padding: 0 0 56%;
    min-height:100px;
	height: 0;
	overflow: hidden;
}

#nomargin{
    margin-top:-40px;
}

.mapreturn{
    position: absolute;
    top:0;
    right:0;
    z-index:999;
}

#news_box ul{
    width:100%;
    margin:20px 0 0 0;
}

#news_box ul li{
    margin:10px 0 0 0;
    line-height:2.0em;
}

.spnews{
    text-align:center;
    width:100px;
}

.news_List_Ymd{
    color:#fff;
    background:#0087b2;
    padding:5px;
}

.news_List_Title{
    padding:5px;
}

table {
    width: 90%;
    margin:0 auto;
}

 table th,
    table td {
        display: block;
        padding:5px 0 ;
    }

input,
textarea{
	width:90%;
	font-size:1.1em;
	padding:8px;
    margin-left:5%;
	border:solid 1px #DEDEDE;
	}

input.submit_btn{
	width:200px;
	height:55px;
	background-color:#0087b2;
	color:#FFFFFF;
	border-radius:5px;
	cursor: pointer;
	}

input:hover.submit_btn{
	background-color:#00a0d4;
	}

input.reset_btn{
	width:200px;
	height:55px;
	background-color:#ddd;
	border-radius:5px;
	cursor: pointer;
    margin-bottom:20px;
	}

input:hover.reset_btn{
	background-color:#eee;
	}

input.prv_btn{
	width:200px;
	height:55px;
	background-color:#E5A94B;
	border-radius:5px;
	cursor: pointer;
    margin-bottom:20px;
	}

input:hover.prv_btn{
	background-color:#ECC17C;
	}

footer{
    background:#555;
    color:#fff;
    padding:1px 0 5px 0;
}

.sp{
    display:inline;
}

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

html,
body{
    font-size:80%;
    color:#555;
    background:#f5f4f4;
}

#mainimg_box{
    background: url(../img/main_sp2.jpg) no-repeat -520px -70px; 
    padding: 0 0 100px 0; 
    margin:0;
}

}

@media screen and (min-width: 750px) {

html,
body{
    font-size:100%;
    color:#555;
}

    .div33{
        width:33%;
        float:left;
    }
    
    .div50{
        width:50%;
        float:left;
    }
    
    .div66{
        width:66%;
        float:left;
    }
    
    .div33 img{
        max-width:98%;
    }
    
.div100{
    width:100%;
}
    
    .div100:after {
    content: "";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;
}

.div66 p{
    margin-left:5%;
    margin-right:5%;
}
    
    .sp{
        display:noen;
    }
    
    .inner_con{
        max-width:1024px;
        margin:0 auto;
    }

#merit_box{
    padding:70px 0 70px;
}

#scene_box,
#solutions_box,
#news_box,
#toiawase_box{
    padding:70px 0 70px;
}
    
    #mainimg_box{
        background: url(../img/main_pc2.jpg) no-repeat center center; 
        -moz-background-size:cover;
        background-size:cover;
        padding: 0 0 100px 0; 
        height:500px;
}

#mainimg_box h2{
    padding:120px 0 120px;
    text-align:center;
}

#mainimg_box h3{
    color:#fff;
    padding:40px 0 20px 10px;
}

#canvas_wrapper {
  max-width: 100%;
  margin: auto;
}

#map_canvas{
    width:100%;
    margin-top:40px;
	position: relative;
	padding: 0;
    min-height:400px;
	height: 0;
	overflow: hidden;
}

.downloadlinkbox{
    margin:0 auto;
    width:20em;
}


ul.scenelist li{
    line-height:2.2em;
    margin:10px 0;
    padding:0 0 0 30px;
    background-image:url("../img/check.png");
    background-repeat:no-repeat;
    background-position:0px 4px;
}
    
    .left_margin{
        margin-left:100px;
    }

    #news_box ul{
    width: 90%;
    margin:20px auto 0;
}

.news_List_Title{
    padding:5px 5px 5px 20px;
}


.sp{
    display: none;
}

}