/* M+ WEBフォントの指定 */
@font-face
{
	font-family: fonts20150614;
	src: url('../fonts/ITlatorilabfonts20150614.woff');
}

body{
	font-family: fonts20150614;
}

html{
	height: 100%;
	width: 100%;
	-webkit-text-size-adjust: 100%;
	font-size:16px;
}

body {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

#navibar{
	top:0;
	position: fixed;
	width: 100%;
	height: auto;
	border-bottom: dotted 1px white;
}

#htitle a{
	color: #000000;
	text-decoration: none;
}

#header{
	width: 50%;
	height: 98px;
	/* rgba(108,194,255,0.7); */
	background-color: rgba(140,206,255,1);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	float: left;
}

#header h1{
	color: black;
	text-shadow: 4px 4px 5px white;
	margin-right: 20px;
}

#header p{
	color :white;
	margin: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#header #sub1 {
	display: block;
	color: rgba(255,255,255,0);
	line-height: 48px;
}
#sub2 {
	display: block;
	clear: both;
}

#menu{
	width: 50%;
	height: 98px;
	line-height: 98px;
	text-align: center;
	overflow: hidden;
	background-color: rgba(140,206,255,1);
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#menu a{
	height: auto;
	width: 20.5%;
	min-width: 122px;
	float: right;
	color: white;
	border: 1px outset white;
	padding: 3px 10px;
	font-size: 20px;
	text-decoration: none;
	box-sizing: border-box;
}
#menu li:nth-child(1) a { 
   background-color: #d1d15a;
}
#menu li:nth-child(2) a { 
   background-color: #E31E00;
}
#menu li:nth-child(3) a { 
   background-color: #ED8100;
}
#menu li:nth-child(4) a {
   background-color: #3774C4;
}
#menu li a:hover{
	text-decoration: underline;
	color:#5998ec;
	background-color:#FFFFFF;
	transition: color 0.5s linear;
	transition: background-color 0.4s linear;
	border: dashed 1px #5998ec;
}
.clear{
	clear: both;
}
#container{
	width: 100%;
	height: auto;
	margin: 0 auto;
}

#contents{
	width: 90%;
	max-width: 850px;
	height: 100%;
	margin: 0 auto;
	margin-top: 130px;
	background-color: rgba(255,255,255,1);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	padding: 20px 100px;
	box-shadow: 1px 1px 10px 1px #285ca0;
}

div#htitle {
	font-size:30px;
	float: left;
	text-shadow: 4px 4px 5px white;
	padding-right: 10px;
}

h1 {
	font-size: 28px;
	border-bottom: 1px solid #3774C4;
	margin-bottom: 30px;
	text-align: center;
}

h2 {
	font-size: 25px;
	border-left:20px #3774C4 double;
	border-bottom: 1px dashed #3774C4;
	padding-left: 30px;
	margin-top: 25px;
	margin-bottom: 15px;
}

h3 {
	font-size: 20px;
	margin-top: 20px;
	border-left:5px #3774C4 solid;
	border-right:5px #3774C4 solid;
	text-align: center;
	background-color: rgba(0,0,255,0.1);
}

#footer{
	max-width: 900px;
	margin: 0 auto;
	margin-top: 10px;
	text-align: center;
	color: gray;
	text-shadow: 1px 1px 2px black;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1; /* for IE6/7 */
}

#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}
.remtable{
	width: 100%;
	border-collapse: collapse;
}
.remtable th{
	width: 25%;
	padding: 6px;
	text-align: left;
	vertical-align: top;
	color: #333;
	background-color: #eee;
	border: 1px solid #b9b9b9;
}
.remtable td{
	padding: 6px;
	background-color: #fff;
	border: 1px solid #b9b9b9;
	width: 50%;
}
.remtable td:nth-child(1){ 
	width: 63%;
}
#welcome{
	text-align: center;
	font-size: 50px;
	text-shadow: 2px 2px 6px rgba(103,164,255,0.43);
}
#welcome span:nth-of-type(1){ 
	color: #3774C4;
}
#welcome span:nth-of-type(3){ 
	color: #E31E00;
}
#welcome span:nth-of-type(2){ 
	color: #DDDB37;
}
#welcome span:nth-of-type(4){
	color: #ED8100;
}
.sample {
	margin-left: 10px;
	padding-left: 10px;
	margin-top: 20px;
	border-left: 3px dashed #777aff;
}
.sample li{
	margin-top: 15px;
	padding-left: 5px;
	background-color: rgba(211,211,255,0.5);
}
textarea {
width: 99%;
}

@media only screen and (min-width: 1000px) {
	/*パソコン用*/
	html{
 		background-image:url(../images/webtreats_baby_blue_pattern_49_s3.jpg); 
	    background-attachment: fixed;
	    background-repeat: repeat;
	    background-position: left top;
	}
	#header.dis{
		height: 48px;
		width: 50%;
		float: left;
	}
	.dis #address{
		/*
		display: none;
		*/
		z-index:0;
		color:rgba(255,255,255,0);
		clear: both;
	}
	.dis #sub2 {
		color:rgba(255,255,255,0);
	}
	#header.dis #sub1 {
		color:rgba(255,255,255,1);
	}
	.dis + #menu{
		height: 48px;
		line-height: 48px;
	}
}

@media only screen and (max-width: 1000px) {
	/*タブレット+スマートフォン用*/
	html{
		font-size:12px;
	}
	#navibar{
		position: relative;
		width: 100%;
	}
	#header{
		width: 100%;
	}
	#menu{
		width: 100%;
	}
	#menu ul{
		width: 100%;
	}
	#menu ul li a{
		width: 25%;
		font-size: 15px;
		padding: 0;
		margin: 0;
		min-width: 80px;
	}
	#container{
		margin: 0;
	}
	#contents{
		width: 95%;
		box-shadow: inherit;
		margin: 0 auto;
		padding: 0;
	}
/*
	#header.dis{
		width: 100%;
		height: 98px;
		line-height: 98px;
	}
*/
	#formWrap {
		width:200px;
	}
	#address{
		clear: both;
	}
	h1{
		font-size: 23px;
	}
	h2{
		font-size: 20px;
	}
	h3{
		font-size: 17px;
	}
	.clearfix:after {
	    content: '';
	    display: block;
	    clear: both;
	    width: 0;
	}
	.clearfix {
	    zoom: reset; /* for IE6/7 */
	}
	#formWrap {
		width:100%;
		margin:0;
	}
	#welcome{
		text-align: center;
		font-size: 42px;
		text-shadow: 2px 2px 6px rgba(103,164,255,0.43);
	}
	

}

@media only screen and (max-width: 680px) {
	/* スマートフォン用*/
}


.flexbox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    margin-top: 20px;
}

/* 
TABLE
================================================ */
.flexbox th{
	font-size: 20px;
}

.flexbox table {
    width: 100%;
    border-bottom: 1px solid #ddd;
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
}
.flexbox th, .flexbox td {
    padding: 15px;
  text-align: center;
    vertical-align: top;
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
}
.flexbox tr:nth-child(even)>td,
.flexbox tr:nth-child(even)>th {
    background-color: #efefef;
}
.flexbox th,
.plan-price {
    color: #fff;
}
.plan-price {
    font-size: 2.5rem;
  border-top: 1px solid rgba(255,255,255,.2);
  padding: 25px 0;
}
.plan-price span {
    font-size: 1rem;
}

/* Background colour */
.plan-lbasic th,
.flexbox .plan-lbasic .plan-price {
    background-color:#89d104;
}
.plan-basic th,
.flexbox .plan-basic .plan-price {
    background-color: #009ADB;
}
.plan-premium th,
.flexbox .plan-premium .plan-price{
	background-color: #ff9e00 ;
}
.plan-full th,
.flexbox .plan-full .plan-price{
	background-color: #ff2b2b;
}
.plan-full .strong{
	color: #ff7400;
}
.flexbox table:hover{
	
}

/* 
SHADOW
================================================ */

.flexbox table{
	box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}


/* 
BUTTON
================================================ */
.btn{
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
    background: #6fc173;
    border-radius: 5px;
    box-shadow: 0 3px #449f49 ;
    position: relative;
    display: inline-block;
    top: -2px;
    padding: 15px;
    width: 80%;
    text-align: center;
    margin: 10px 0;
}
.btn:hover {
    box-shadow: 0 1px #449f49;
    top: 1px;
}


/* 
LARGE DISPLAY
================================================ */
@media ( min-width : 700px ){
    .flexbox {
        -webkit-flex-direction: row;
        flex-direction: row;
    }
	.plan-table {
		margin-left: 3%;
	}
	.plan-table:first-of-type {
    	margin-left: 0;
    }
}