@charset "utf-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form, label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,summary,time,mark,audio,video,a,input,textarea{ margin:0;padding:0; border:0; font-size:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{ display:block;}
nav ul{ list-style:none;}
ul{ list-style:none; }
blockquote,q{ quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none;}
pre,code,kbd,samp{ font-family:monospace,monospace; font-size:inherit;}
table{ border-collapse:collapse; border-spacing:0;}
img{ border:0;}
address,caption,cite,code,dfn,em,th,var{ font-style:normal; font-weight:normal;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal}
sup{ vertical-align:text-top; font-size:75%;}
sub{ vertical-align:text-bottom; font-size:75%;}
input,textarea,select{ z-index:auto; font-family:inherit; font-size:inherit; font-weight:inherit; vertical-align:middle;}
a{ outline:none;}
audio:not([controls]){ display:none;}
time{ display:inline;}
[hidden]{ display:none;}
input::-ms-clear,input::-ms-reveal,input:focus::-ms-clear,input:focus::-ms-reveal{visibility:hidden; display:none;}
button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{ padding:0; border:0;}
/*==================================================== */
body,
input,
button,
textarea,
select{-webkit-text-size-adjust:100%; -webkit-font-smoothing:antialiased; font-family:SanFranciscoText-Regular, 游ゴシック体, YuGothic, HiraginoSans-W0, "ヒラギノ角ゴシック W0", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", 游ゴシック体, "Yu Gothic", YuGothic, メイリオ, Meiryo, sans-serif; line-height:1.75;}

a:link{ color:#303030; text-decoration:none;}
a:visited{ color:#303030; text-decoration:none;}
a:hover{ color:#999;}
a:active{ color:#999;}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.clr{clear:both;}
.clr{clear:both;}
section {clear:both; zoom:1;}
article:after,section:after,.clrFx:after{content:''; clear:both; display:block;}
.swap img + img{display:none;}

article{padding-top:70px;}

/* section > header
========================================================= */
header#top{background:#212121; height:70px; position:fixed; width:100%; left:0; top:0; min-width:1000px; z-index:100; color: #ffffff; font-weight: bold;}
header#top div{width:140px; position:absolute; left:50%; top:16px; margin-left:-500px;}
header#top nav{width:1000px; height:50px; padding:10px 0 0; margin:0 auto;}
header#top nav ul{height:50ppx; float:right;}
header#top nav li{height:50px; float:left; line-height:50px;}
header#top nav li a{color:#fff; display:inline-block; padding:0 20px;}
header#top nav li:last-child{margin: 7px 0 0 15px; font-size: 15px; line-height: 35px;}
header#top nav li:last-child a{border:1px #fff solid; border-radius:5px; width: 180px; background:url(../images/icon_download.png) no-repeat 150px center;}
header .toggle{display:none;}

/* main visual
========================================================= */
article > header{background:url(../images/bg02.png) repeat-y center 0; background-size: 100% 1px; position:relative; min-width:1000px; text-align: center;}
article > header .wrap{background:url(../images/bg01.jpg) no-repeat center 0; height:1050px;}
article > header .head{padding: 55px 0 0;}
article > header .foot{position: absolute; left: 50%; bottom:33px; margin: 0 0 0 -500px; line-height: 0; overflow: hidden; width: 1000px;}
article > header .foot .lead{float: left; margin: 0 0 85px; width: 100%;}
article > header .foot .box1{float: left;}
article > header .foot .box2{float: right;}

article > header .head a.conceptMovie{width: 85px; height: 85px; display: block; background:url(../images/btn_movie.png) no-repeat; text-indent:-9999px; position: absolute; left: 50%; margin-left: -45px; top: 520px;}

/* section
========================================================= */
article > section > header{background:#333333; min-width: 1000px; position:relative; padding:20px 0 30px; text-align:center; color:#fff;}
article > section > header:after{content:''; background:url(../images/tip.png) no-repeat center bottom; width:60px; height:16px; position:absolute; left:50%; bottom:-16px; margin-left:-30px;}
article > section > header span{display: block; margin: 7px 0 0;font-size:18px; font-weight: bold;}

/* about
========================================================= */
#about{background-color: #F5F7F7;}
#about > header + section{width:1000px; margin:0 auto; padding:30px 0 40px;}
#about section > p{margin: 0 0 30px; text-align: center; font-size:20px;}
#about section div{width:320px; float:left; margin:0 20px 20px 0; height:450px; border-radius:15px; padding:270px 20px 0; background-color: #ffffff; background-repeat: no-repeat; background-position: center 30px;background-size: 200px auto;}
#about section div h2{font-size:20px; text-align:center; line-height:1.3; margin-bottom:20px; font-weight: bold;}
#about section div p{font-size:15px;}
#about section div.box1{background-image: url(../images/fig01.png);}
#about section div.box2{background-image:url(../images/fig02.png);}
#about section div.box3{background-image:url(../images/fig03.png); margin-right:0;}

/* system
========================================================= */
#system{background: url(../images/system_bg.png) no-repeat center bottom #B0DEDD; height: 730px;}
#system section figure{margin: 40px auto 0; width: 1000px;}

/* price
========================================================= */
#price{background:#F5F7F7; padding:0 0 60px;}
#price section{width:1000px; margin:0 auto;}
#price figure{margin: 60px 0 0;}
#price ul{margin: 10px 0 0; font-size: 14px;}
#price ul li{margin: 0 0 5px; padding: 0 0 0 1em; text-indent: -1em;}

#price table{
	width: 100%;
	margin: 40px 0 10px 0 ;
	border: solid #CED7DB 1px;
	background: #fff;
}

#price table td,table th{
	border: solid #CED7DB 1px;
	padding: 20px 20px;
	text-align: right;
	font-size: 26px;
	font-weight: bold;
}

#price table th{
	background: #1080C3;
	color: #fff;
	text-align: center;
}
#price table td.name{
	background: #4C9BD5;
	color: #fff;
	text-align: center;
}

#price table td span{
	font-size: 16px;
	padding-left: 15px;
}




/* contact
========================================================= */
#contact{}
#contact section{width:1000px; margin:0 auto; padding:70px 0;}
#contact section h1{font-size:48px; text-align:center;}
#contact section p{text-align:center; margin-bottom:30px; clear:both;}
#contact section em{color:#f00;}
#contact section dl{width:480px; float:left;}
#contact section dl + dl {float:right;}
#contact section dl dd{margin-bottom:20px;}
#contact section dl dd label{position: relative; display: inline-block; margin: 11px; width: 210px; cursor: pointer;}
#contact section dl dd label input{opacity: 0;}
#contact section dl dd label span{display: inline-block; margin: 0 0 0 15px;}
#contact section dl dd label span:before{position: absolute; left: 0; top: 50%; content: ''; display: block; margin: -10px 0 0; background: url(../images/radio.png) no-repeat 0 -19px; background-size: 19px auto; width: 19px; height: 19px;}
#contact section dl dd label input:checked + span:before{background-position: 0 0;}
#contact section input[type=text],
#contact section input[type=email],
#contact section input[type=tel],
#contact section select,
#contact section textarea{width:100%; height:50px; padding:10px; border:1px #ddd solid;}
#contact section input.half{float: left; width: 48%;}
#contact section input.half + input.half{float: right;}
#contact section textarea{height:246px;}
#contact a{color:#ff5252; text-decoration:underline;}
#contact a:hover{text-decoration:none;}
#contact button[type=submit]{background: rgb(38,172,193); background: linear-gradient(to bottom, rgba(38,172,193,1) 0%,rgba(0,165,146,1) 100%); padding:20px 100px; color:#fff; font-size:22px; border:0 none; border-radius:7px; cursor:pointer;}
#contact button:hover{opacity:.7;}
#contact section dl.confirm{width:100%; float:none; margin-bottom:30px;}
#contact section dl.confirm dt{color:#666;}
#contact section dl.confirm dd{border-bottom:1px #ddd solid; font-size:18px;}
#contact p{position:relative;}
#contact p button[type=button]{background:#666; padding:10px 30px; color:#fff; font-size:18px; border:0 none; border-radius:30px; cursor:pointer; position:absolute; left:0; top:0;}

#contact a.mailSend{ background: -webkit-linear-gradient(#1A91D1, #19B1C6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #1A91D1; padding:20px 100px; color:#fff; font-size:40px; border:0 none; border: 1px solid #19B1C6; display: block; margin: 20px 20px; text-align: center;}


#contact .download{margin: 60px auto; width: 900px;}
#contact .download h3{font-size: 17px;}
#contact .download .item{margin: 35px 0;}
#contact .download .img{float: left; width: 450px;}
#contact .download .img img{width: 100%;}
#contact .download .body{float: right; width: 430px; line-height: 1.3;}
#contact .download .body p{margin: 10px 0; font-size: 14px; text-align: left;}
#contact .download .body ul{margin: 40px 0 0; font-size: 18px;}
#contact .download .body a{display: block; width: 280px; height: 70px; padding: 24px 0 0; background-color: #00c752; border-radius: 35px; text-align: center; text-decoration: none; color: #ffffff;}
#contact .download .back{margin: 0 auto; width: 280px; font-size: 18px;}
#contact .download .back a{display: block; width: 280px; height: 70px; padding: 18px 0 0; border: 2px solid #212121; border-radius: 35px; text-align: center; text-decoration: none; color: #000000;}

#contact section .piTxt{ clear: both; background: #f3f3f3; border: 1px solid #ababab; padding: 30px 40px; color: #43464b; font-size: 12px; text-align: left; margin: 20px; height: 200px; overflow: scroll;}
#contact section .piTxt p{ text-align: left !important; padding: 0; margin-bottom: 10px;}
#contact section .piTxt h2{font-size: 20px; font-weight: bold; border-bottom: 1px solid #ababab; margin-bottom: 10px;}
#contact section .piTxt h3{font-size: 14px; font-weight: bold;}



/* footer
========================================================= */
footer{background:#212121; color:#fff;}
footer a:link,
footer a:visited{color:#fff;}
footer a:hover{text-decoration:underline;}
footer > div {padding:30px 0; width:1000px; margin:0 auto;}
footer dl{float:left; margin-right:100px;}
footer dl dt{float:left; padding-right:25px;}
footer dl dd{white-space:nowrap; font-size:14px; line-height:1.4; padding-top:10px; padding-left:150px;}
footer ul{float:right; line-height:1.5; font-size:14px;}
footer p{clear:both; text-align:center; font-size:12px; padding:20px; color:#eee;}
a.top{display:block; width:60px; height:60px; position:fixed; right:20px; bottom:40px; background:url(../images/top.png) no-repeat center center rgba(26,144,208,.8); background-size:40px; border-radius:30px; line-height:60px; text-align:center; text-indent:-9999px; display:none; border:1px #fff solid;}
footer dl.flight{margin: 0 0 15px;}
footer dl.flight img{margin: 0 0 0 20px;}
footer dl.flight dd{padding-top: 5px;}




@media screen and (max-width:768px){
article{padding-top:50px; font-size:14px; line-height:1.5;}
.swap img{display:none;}
.swap img+img{display:block;}

/* section > header
========================================================= */
header#top{height:50px; min-width:0; position:fixed;}
header#top div{width:91px; position:absolute; left:50%; top:13px; margin-left:-45px;}
header#top div img{width:100%; height:auto;}
header#top nav{width:100%; height:auto; background:#fff;  position:fixed; left:0; top:50px; width:100%; padding:0; display:none;}
header#top nav ul{height:auto; float:none;}
header#top nav li{height:auto; float:none; line-height:1.2; text-align:center; font-size: 12px; border-bottom: 1px solid #DBDBEA;}
header#top nav li a{color:#212121; padding:13px;}
header#top nav li:last-child{margin:0 15px 0 0; font-size: 12px; line-height: 1.2;}
header#top nav li:last-child a{border:none; border-radius:25px; color:#13A3B6; display:inline-block; padding:15px 25px; background-image: url(../images/icon_downloadsp.png); background-position: right center; background-size: 14px auto; width: auto;}
header .toggle{display:block; width:45px; height:50px; position:absolute; left:0; top:0; background:url(../images/menu.png) no-repeat center center; background-size:25px; text-indent:-9999px;}
header .toggle.open{background:url(../images/close.png) no-repeat center center; background-size:25px;}

/* main visual
========================================================= */
article > header{background-image: url(../images/bg01sp.jpg); min-width:100%;}
article > header img{width: 100%;}
article > header .wrap{height:auto;}
article > header .head{padding: 0;}
article > header .foot{position: relative; left:0; bottom:0; margin: 0; width: auto;}
article > header .foot .lead{float: none; margin: 0;}
article > header .foot .box1{float: none;}
article > header .foot .box2{float: none;}

/* section
========================================================= */
article > section > header{padding:12px 0; min-width: 100%;}
article > section > header:after{background-size: 30px 8px; width:30px; height:8px; bottom:-8px; margin-left:-15px;}
article > section > header img{width: auto; height: 26px;}
article > section > header span{margin: 5px 0 0;font-size:9px;}

article > header .head a.conceptMovie{width: 40px; height: 40px; display: block; background:url(../images/btn_moviesp.png) no-repeat; text-indent:-9999px; position: absolute; left: 50%; margin-left: -20px; top: 313px;}

/* about
========================================================= */
#about > header + section{width:auto; padding:17px 0 20px;}
#about section > p{margin: 0 0 17px;font-size:12px;}
#about section div{width:auto; float:none; margin:0 10px 10px; height:auto; border-radius:7px; padding:190px 10px 20px; background-size: 150px auto; background-position: center 20px;}
#about section div h2{font-size:14px; margin-bottom:10px;}
#about section div p{font-size:12px; line-height:1.5;}
#about section div.box3{ margin:0 10px 10px;}

/* system
========================================================= */
#system{background-image: url(../images/system_bgsp.png); background-position: center center; background-size: cover; height: auto; padding: 0 0 30px;}
#system section figure{margin: 20px auto 0; width: 65%;}
#system section img{width: 100%;}

/* price
========================================================= */
#price{padding:0 0 20px;}
#price section{width:auto; padding: 0 10px;}
#price section img{width: 100%;}
#price figure{margin: 20px 0 0;}
#price ul{font-size: 9px;}

#price table td,table th{padding:15px 5px;font-size:initial}
#price table td span{font-size:12px;padding-left:0}

/* contact
========================================================= */
#contact{}
#contact section{width:100%; margin:0 auto; padding:0 0 20px;}
#contact section h1{font-size:24px;}
#contact section p{margin-bottom:20px; padding:0 20px; clear:both; font-size:12px;}
#contact section dl{width:100%; float:none; padding:0 20px;}
#contact section dl + dl {float:none;}
#contact section dl dd{margin-bottom:20px;}
#contact section dl dd label{margin: 5px 10px 0; width: auto;}
#contact section input[type=text],
#contact section input[type=email],
#contact section input[type=tel],
#contact section select,
#contact section textarea{font-size:16px;}
#contact section textarea{height:200px;}
#contact button[type=submit]{padding:15px 50px; border-radius:3px; font-size: 11px;}
#contact button:hover{opacity:.7;}
#contact section dl.confirm + p button[type=submit]{width:60%;}
#contact section dl.confirm + p button[type=button]{position:static; padding:15px; left:auto; top:auto; width:30%; margin-right:10%;}

#contact a.mailSend{ font-size: 30px; padding: 10px;}

#contact .download{margin: 30px auto; width: auto;}
#contact .download h3{font-size: 15px;}
#contact .download .item{margin: 15px auto; width: 90%; max-width: 350px;}
#contact .download .img{float: none; margin: 10px 0 5px; padding: 0;}
#contact .download .img{width: 100%;}
#contact .download .body{float: none; width: auto;}
#contact .download .body p{margin: 5px 0; padding: 0; font-size: 12px;}
#contact .download .body ul{margin: 25px auto 0; width: 200px; font-size: 12px;}
#contact .download .body a{display: block; width: auto; height: 50px; padding: 17px 0 0; border-radius: 25px;}
#contact .download .back{margin: 25px auto; padding: 0; width: 200px; font-size: 12px;}
#contact .download .back a{width: auto; height: 50px; padding: 14px 0 0; border: 1px solid #212121; border-radius: 25px;}

/* footer
========================================================= */
footer > div {padding:20px 0 0; width:100%;}
footer dl{float:none; margin-right:0; text-align:center; margin-bottom:10px; padding:0 20px;}
footer dl dt{float:none; padding-right:0;}
footer dl dt img{width:70px; height:auto;}
footer dl dd{white-space:normal; font-size:12px; padding-top:10px; padding-left:0; border-bottom:1px #eee solid; text-align:left; padding-bottom:10px; line-height:1.6;}
footer ul{float:none; line-height:1.8; font-size:14px; padding:0 20px;}
footer p{padding:20px 0; font-size:10px;}
a.top{width:40px; height:40px; right:20px; bottom:20px; background-size:30px; border-radius:20px; line-height:40px;}
footer dl.flight{margin: 0 0 15px;}
footer dl.flight img{margin: 0;}
footer dl.flight dd{border: none;}

}