@charset "utf-8";

.pc {
	display:none!important;
}

img {
	width:100%;
	height:auto;
	vertical-align:top;
}

body {
	min-width:320px;
	line-height:1.5;
	color:#333;
	font-family:Shin Maru Go Light;
	-webkit-text-size-adjust: 100%;

}
body #wrap{
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
}



#top header {
	width:100%;
	overflow:hidden;
	background-color: #019ddd;
	color:#fff;
	font-size:10px;
}

#top header h1 {
	float:left;
	width:60%;
	padding:3%;
}

#top header p a {
	float:right;
	background-color: #019ddd;
	color:#fff;
	font-size:23px;
	text-decoration:none;
	padding:2% 4%;
}

#top header p a b {
	display:none;
}

#mainVisual {
	background-image:url(../img/mainvisual_bg_sp.png);
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:100% 100%;
	min-height:410px;
}

#maintitle {
	width:100%;
	overflow:hidden;
	text-align:center;
	color:#fff;
	padding-bottom:1em;
	border-bottom:rgba(255,255,255,0.75) solid 1px;
}

#slider1 {
	width:267px;
	background-image:url(../img/mac_pc.png);
	background-position:0 0;
	background-repeat:no-repeat;
	background-size:100% auto;
	height:146px;
	overflow:hidden;
	margin:2em auto 0;
}

#slider1 li {
	width:187px;
	height:117px;
	left:40px;
	top:7px;
}

#maintitle h1 {
	font-size:25px;
	font-weight:400;
	line-height:1.2;
	padding-top:.5em;
}

#maintitle p {
	font-size:13px;
	line-height:1.4;
	padding:.5em 2.5em 0;
}

#mainVisual dl {
	color:#fff;
	text-align:center;
	padding:1em 0 .3em;
}

#mainVisual dl dt {
	font-size:11px;
}

dd.spbtn {
	width:44%;
	overflow:hidden;
	margin:.5em auto;
}

dd.spbtn li:nth-child(1) {
	float:left;
}

dd.spbtn li:nth-child(2) {
	float:right;
}

dd.spbtn li a {
	display:block;
	font-size:60px;
	width:64px;
	height:64px;
	line-height:64px;
	text-decoration:none;
	color:#fff;
	border-radius:3px;
}

article #point5 section {
	position:relative;
}

article #point5 section:nth-child(2n-1) {
	width:100%;
	overflow:hidden;
	background-color:#019ddd;
}

article #point5 section:nth-child(2n) {
	width:100%;
	overflow:hidden;
	background-color:#f3f3f3;
/* layer fill content */
}

article #point5 section .frame {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}

article #point5 section:nth-child(2n) .frame {

}

article #point5 section .inner {
	position:relative;
}

article #point5 section .img {
	display:none;
}

article #point5 section dl {
	padding:2%;
	overflow:hidden;
	cursor:pointer;
	display:block;
}

article #point5 section dl dd.num {
	float:left;
	padding:4%;
}

article #point5 section dl dd.num img {
	height:28px;
	width:auto;
}

article #point5 section dl dt {
	float:left;
	color:#fff;
	font-size:17px;
	width:75%;
	padding-left:3%;
	line-height:1.2;
	padding-top:.3em;
}

article #point5 section:nth-child(3) dt {
	padding-top:.9em;
}

article #point5 section dl dd.toggle {
	clear:both;
	color:#fff;
	font-size:12px;
	line-height:1.8;
	display:none;
	border-top:rgba(255,255,255,0.78) dotted 1px;
	padding-top:.5em;
}

article #point5 section:nth-child(2n) dl dt,article #point5 section:nth-child(2n) dl dd {
	color:#333;
}

article #point5 section:nth-child(2n) dl dd.toggle {
	border-top:rgba(0,0,0,0.5) dotted 1px;
}

#plan3 h2 {
	width:100%;
	font-size:25px;
	text-align:center;
	font-weight:400;
	padding:.8em 0;
	color:#019ddd;
}

#plan4 h2 {
	width:100%;
	font-size:25px;
	text-align:center;
	font-weight:400;
	padding:.8em 0;
	color:#58bada;
}

#plan4 li {
	width:100%;
	overflow:hidden;
}

#plan4 .inner > ul > li strong {
	color:#fff;
	display:block;
	font-size:11px;
	padding:.3em 0;
	background:#cda95c;
	text-align:center;
}

#plan4 .inner > ul > li > div {
	float:left;
	width:36%;
	padding:2%;
}
#plan4 .inner > ul > li > div ul{
    padding-top: 1em;
}

#plan4 .inner > ul > li > dl {
	padding-left:42%;
	padding-top:1em;
	position:relative;
	font-size:12px;
	padding-bottom:60px;
}

#plan4 .inner > ul > li > dl dt {
	font-size:15px;
	line-height:1.2;
	padding-bottom:.5em;
	color:#c1a148;
}

#plan4 .inner > ul > li > dl dt span {
	display:block;
	font-size:9px;
}

#plan4 .inner dd ul {
	width:36%;
	position:absolute;
	left:2%;
	bottom:10%;
}

#plan4 .inner div ul li {
	text-align:center;
	background:#fff;
	border-radius:3px;
	color:#cda95c;
	border:#cda95c dotted 1px;
	margin-bottom:.5em;
	font-size: .8em
}

#plan4 .inner li dl dd a {
	position:absolute;
	bottom:10px;
	left:42%;
	text-align:center;
	text-decoration:none;
	border-radius:2px;
	color:#fff;
	display:inline-block;
	line-height:2.8;
	width:160px;
	height:40px;
	font-size:15px;
}


#plan4 .inner li:nth-child(1) dl dd a {
	background:#d7b97d;
	background:-moz-linear-gradient(top,#d7b97d 0%,#d7b97d 50%,#cda95b 50%,#cda95b 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d7b97d),color-stop(50%,#d7b97d),color-stop(50%,#cda95b),color-stop(100%,#cda95b));
	background:-webkit-linear-gradient(top,#d7b97d 0%,#d7b97d 50%,#cda95b 50%,#cda95b 100%);
	background:-o-linear-gradient(top,#d7b97d 0%,#d7b97d 50%,#cda95b 50%,#cda95b 100%);
	background:-ms-linear-gradient(top,#d7b97d 0%,#d7b97d 50%,#cda95b 50%,#cda95b 100%);
	background:linear-gradient(to bottom,#d7b97d 0%,#d7b97d 50%,#cda95b 50%,#cda95b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d7b97d',endColorstr='#cda95b',GradientType=0);
}

#plan4 .inner li:nth-child(2) strong {
	background-color:#4d4b9a;
}

#plan4 .inner li:nth-child(2) dt {
	color:#4d4b9a;
}

#plan4 .inner li:nth-child(2) dd ul li {
	color:#4d4b9a;
	border-color:#4d4b9a;
}

#plan4 .inner li:nth-child(2) dl dd a {
	background:#a095c8;
	background:-moz-linear-gradient(top,#a095c8 50%,#4d4b9a 50%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#a095c8),color-stop(50%,#4d4b9a));
	background:-webkit-linear-gradient(top,#a095c8 50%,#4d4b9a 50%);
	background:-o-linear-gradient(top,#a095c8 50%,#4d4b9a 50%);
	background:-ms-linear-gradient(top,#a095c8 50%,#4d4b9a 50%);
	background:linear-gradient(to bottom,#a095c8 50%,#4d4b9a 50%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a095c8',endColorstr='#4d4b9a',GradientType=0);
}

#plan4 .inner li:nth-child(3) strong {
	background-color:#389bbd;
}

#plan4 .inner li:nth-child(3) dt {
	color:#389bbd;
}

#plan4 .inner li:nth-child(3) dd ul li {
	color:#389bbd;
	border-color:#389bbd;
}

#plan4 .inner li:nth-child(3) dl dd a {
	background:#91c2d6;
	background:-moz-linear-gradient(top,#91c2d6 50%,#389bbd 50%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#91c2d6),color-stop(50%,#389bbd));
	background:-webkit-linear-gradient(top,#91c2d6 50%,#389bbd 50%);
	background:-o-linear-gradient(top,#91c2d6 50%,#389bbd 50%);
	background:-ms-linear-gradient(top,#91c2d6 50%,#389bbd 50%);
	background:linear-gradient(to bottom,#91c2d6 50%,#389bbd 50%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#91c2d6',endColorstr='#389bbd',GradientType=0);
}

#plan4 .inner li:nth-child(4) strong {
	background-color:#f51b39;
}

#plan4 .inner li:nth-child(4) dt {
	color:#f51b39;
}

#plan4 .inner li:nth-child(4) dd ul li {
	color:#f51b39;
	border-color:#f51b39;
}

#plan4 .inner li:nth-child(4) dl dd a {
	background:#f74961;
	background:-moz-linear-gradient(top,#f74961 50%,#f51b39 51%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,#f74961),color-stop(51%,#f51b39));
	background:-webkit-linear-gradient(top,#f74961 50%,#f51b39 51%);
	background:-o-linear-gradient(top,#f74961 50%,#f51b39 51%);
	background:-ms-linear-gradient(top,#f74961 50%,#f51b39 51%);
	background:linear-gradient(to bottom,#f74961 50%,#f51b39 51%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f74961',endColorstr='#f51b39',GradientType=0);
}

#plan4 .inner li dl dd a i {
	padding-right:.3em;
}

#plan4 .inner > ul > li:nth-child(1) {
	background:#fffdf8;
}

#plan4 .inner li:nth-child(4) {
	background:#f7f7f7;
}


#FreeSurvice {
	padding-top:1em;
}

#FreeSurvice h2 {
	text-align:center;
	padding:0 .5em;
	color:#888888;
	font-size:25px;
	font-weight:400;
	line-height:1.2;
	text-align:center;
}

#FreeSurvice p {
	color:#888888;
	padding:.2em 2em;
	font-size:13px;
	line-height:1.4;
	text-align:center;
}

#FreeSurvice .inner {
	padding:2%;
	width:auto;
	overflow:hidden;
}

#FreeSurvice .inner dl {
	width:100%;
	overflow:hidden;
}

#FreeSurvice .inner dt {
	width:96%;
	overflow:hidden;
	background:#888888;
	color:#fff;
	line-height:1;
	font-weight:400;
	padding:2%;
}

#FreeSurvice .inner dt span {
	float:right;
	font-size:10px;
	padding:5px 5px 0 0;
}

#FreeSurvice .inner dd {
	background:rgba(255,255,255,0.9);
	border:1px solid #888888;
	font-size:12px;
	color:#888888;
	margin-top:5px;
	padding:1em;
}

#FreeSurvice .inner dl:nth-child(2) dt {
	background:none repeat scroll 0 0 #888888;
	margin-top:5px;
}

#FreeSurvice .inner dl:nth-child(2) dd {
	color:#888888;
	border-color:#888888;
}

#contact {
	color:#019ddd;
	padding:2em 0;
	text-align:center;
}

#contact h2 {
	font-size:17px;
	font-weight:400;
	line-height:1.4;
}

#contact .spbtn a {
	background:#fff;
	color:#019ddd;
}


footer .inner > p {
	display:none;
}

footer .inner > div {
	display:block;
	width:85%;
	margin:1em auto;
}

footer .inner > div ul {
	width:90%;
	padding-top:1em;
	overflow:hidden;
}

footer .inner > div ul li {
	float:left;
	padding-right:1em;
}

footer .inner > div ul li a {
	color:#019ddd;
	font-size:13px;
}

footer .inner > div ul li a i {
	padding-right:.2em;
}

#footerBtns {
	width:100%;
	overflow:hidden;
	border-top:#019ddd solid 1px;
	border-bottom:#019ddd solid 1px;
}

#footerBtns li {
	float:left;
	width:50%;
}

#footerBtns li a {
	display:block;
	padding:2em 0 1.3em;
	font-size:11px;
	text-align:center;
	text-decoration:none;
	color:#019ddd;
}

#footerBtns li a i,#footerBtns li a span.phone {
	font-size:3em;
	line-height:1;
}

#footerBtns li a strong {
	display:block;
	line-height:2;
}

#footerBtns li:last-child a {
	border-left:#019ddd solid 1px;
}

#copy {
	font-size:.3em;
	color:#019ddd;
	text-align:center;
	padding:1em 0;
}

/****************************************************
detailpage
plan01.html
****************************************************/
#plan01.plan #wrap{border-top:#bb9749 solid 10px;}
#plan01 header {color:#bb9749;}
#plan01.plan #wrap {background:#fffdf8;}
#plan01 .pageback{border-bottom:#bb9749 solid 5px;}

#plan02.plan #wrap{border-top: #4faaff solid 10px;}
#plan02 header{color: #4faaff;}
#plan02.plan #wrap{background: #fff;}
#plan02 .pageback{border-bottom:#4faaff solid 5px;}

#plan03.plan #wrap{border-top: #62d037 solid 10px;}
#plan03 header{color: #62d037;}
#plan03.plan #wrap{background: #fff;}
#plan03 .pageback{border-bottom:#62d037 solid 5px;}

#plan04.plan #wrap{border-top: #f51b39 solid 10px;}
#plan04 header{color: #f51b39;}
#plan04.plan #wrap{background: #f7f7f7;}
#plan04 .pageback{border-bottom:#f51b39 solid 5px;}

.plan a {
	color:#58bada;
}



#shadow {
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background:linear-gradient(-80deg,rgba(0,0,0,0.02) 50%,rgba(0,0,0,0) 1px) repeat scroll 0 0 rgba(0,0,0,0);
}

.plan article {
	position:relative;
	z-index:999;
	width:100%;
	height: 100%;
	text-align:center;
}

.plan article header h1 {
	font-size:28px;
	font-weight:400;
	line-height:1.2;
	padding-top:1em;
}

.plan article header p {
	font-size:17px;
}

section#data {
	width:100%;
	overflow:hidden;
	padding-top:1em;
	position:relative;
}

section#data #mainvisual {
	width:80%;
	margin:0 auto 1em;
}

section#data dl#plantext {
	padding:2%;
}

section#data dl#plantext dt {
	font-size:20px;
	line-height:1.2;
	padding-bottom:.5em;
}

section#data dl#plantext dd:nth-child(2) {
	font-size:12px;
	text-align:left;
	padding-bottom:1em;
	border-bottom:rgba(51,51,51,0.68) solid 1px;
}

section#data dl#plantext dd:nth-child(3) {
	padding-top:1em;
}

section#data dl#plantext dd:nth-child(3) strong {
	font-size:20px;
	font-weight:400;
	padding-bottom:.5em;
}

section#data dl#plantext dd:nth-child(3) ul {
	width:auto;
	background:#fff;
	border-radius:6px;
	overflow:hidden;
	padding:5px;
}

section#data dl#plantext dd:nth-child(3) ul li {
	float:left;
	width:30px;
	height:30px;
	margin-right:5px;
	background:#bbb;
	border-radius:3px;
}

section#data dl#plantext dd:nth-child(3) ul li.off {
	background:#ddd;
}

#Chart {
	width:90%;
	margin:0 auto;
	border-bottom:rgba(51,51,51,0.68) solid 1px;
}

#canvas {
}

dl#exsample {
	padding-top:1em;
}

dl#exsample dt {
	font-size:20px;
	padding-bottom:.5em;
}

dl#exsample dd ul {
	width:auto;
	padding:2%;
	overflow:hidden;
}

dl#exsample dd ul li {
	width:100%;
	overflow:hidden;
	text-align:left;
	position:relative;
	margin-bottom:2em;
}

dl#exsample dd ul li a.site {
	float:left;
	width:50%;
	display:block;
	padding-right:2%;
}

dl#exsample dd ul li strong {
	display:block;
	font-size:13px;
	font-weight:700;
	margin-left:52%;
}

dl#exsample dd ul li p {
	line-height:1.5;
	font-size:12px;
	text-align:left;
	margin-left:52%;
	width:auto;
	overflow:hidden;
	padding-bottom:3em;
}

dl#exsample dd ul li a.btn {
	position:absolute;
	right:17%;
	bottom:0;
	width:30%;
}

section#price {
	width:auto;
	padding:4% 2%;
	margin:0 2%;
	overflow:hidden;
	color:#888888;
	text-align:center;
	border-radius:6px;
	background: rgba(255,255,255,0.6);
}

section#price h2 {
	font-size:15px;
	font-weight:normal;
	padding-bottom: .3em;
}

#first dl {
	width:100%;
	overflow:hidden;
	margin-bottom:.2em;
}

#first dl dt {
	background:#888888;
	color:#fff;
	font-size:12px;
	font-weight:400;
	padding:.5em;
	text-align:center;
	line-height:1.2;
}

#first dl dd {
	color:#888888;
	font-size:30px;
	line-height:1;
	padding:.5em 0;
	border:#888888 solid 1px;
	background:rgba(255,255,255,0.8);
}

#first dl dd span {
	display:block;
	font-size:13px;
}
#first .attention{
    font-size: 11px;
    text-align: left;
    line-height: 1.2;
    padding-bottom: 2em;
}






.tablebox table {
	border-collapse:separate;
	border-spacing:1px;
	clear:both;
	width:100%;
}

.tablebox table th {
	background:#888888;
	color:#fff;
	font-size:12px;
	font-weight:400;
	padding:.5em;
	text-align:left;
	vertical-align:middle;
}

.tablebox div {
	width:100%;
	overflow:hidden;
}

.tablebox div table {
	width:100%;
}

.tablebox div table th {
	width:30%;
	padding:.5em 0 .5em .5em;
}

.tablebox div table td {
	border:#888888 solid 1px;
	vertical-align:middle;
	padding:.5em 0 .5em .5em;
	font-size:12px;
	text-align:left;
	background:rgba(255,255,255,0.8);
}

.tablebox div table td small {
	font-size:.8em;
}

#option {
	clear:both;
	text-align:center;
	padding:1em 0;
	font-size:12px;
}

#option a i {
	padding-right:.3em;
}

.pageback{
    border-top:#58bada dotted 1px;
    margin: 1em auto 0;
    padding: 2em 0 2em;

    position: relative;
}

.pageback a{
border-radius: 2px;
color: #fff !important;
display: inline-block;
font-size: 15px;
height: 40px;
padding: 0 1em;
line-height: 2.8;
text-align: center;
text-decoration: none;
}

#plan01 .pageback a{
background: linear-gradient(to bottom, #d7b97d 0%, #d7b97d 50%, #cda95b 50%, #cda95b 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

#plan02 .pageback a{
background: linear-gradient(to bottom, #61b3ff 50%, #4fa9ff 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

#plan03 .pageback a{
background: linear-gradient(to bottom, #81d95f 50%, #61cf37 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

#plan04 .pageback a{
background: linear-gradient(to bottom, #f74961 50%, #f51b39 51%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

/****************************************************
thenks
****************************************************/

#top.thanks #form .inner h2{
  color: #3bb2d8;
  padding: 1em 0;
}
#top.thanks #form .inner p{
    font-size: 12px;
    padding: 1em;
}
#top.thanks #form .inner p a{
    color: #3bb2d8;
    line-height: 1.8;
}