@charset "UTF-8";

/*container.css & bootstrap.css reset*/
body {
	background: none;
}

#main {
	height : 0;
	padding: 60px 0px 0px 0px;
}

* {
	font-family: "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
}

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

	body::before {
		background: none;
		content: none;
	}
}

/*common*/
.featureTitle {
	color: #009FB8;
}

a:hover {
	text-decoration: none;
}

/*show=templist*/
#pagecontents {
	width: 1200px;
	margin: 120px auto 60px;
}

#searchArea{
	width:65%;
	float:left;
	margin-left: 20px;
	min-height: 500px;
}

#templateDetailArea{
	width:30%;
	float:left;
}

.template_list_float{
	float:left;
}

.ui-tabs {
	position: inherit;
}

.ui-tabs .ui-tabs-nav {
	display: none;
}

.ui-tabs .ui-tabs-panel{
	padding: 0 1.4em;
}

.template_list_left {
	width:36%;
	margin-right:20px;
}

.template_list_center{
	width:56%;
}

.template_list_back{
	background-color:white;
	text-align: center;
}

.template_list_title{
	border-top: 2px solid #ed6d35;
	padding: 10px;
	border-bottom: solid 1px #CCCCCC;
}

.template_list_contents{
	background-color:white;
	padding: 10px;
	overflow: auto;
}

.template_contents{
	padding: 5px 10px;
	background-color: white;
	text-align: left;
	border: 1px solid gray;
	margin-bottom: 2px;
	cursor: pointer;
}

.template_contents:hover{
	background-color: #f2d58a;
	color:black;
}

.template_selected{
	background-color: #f2d58a !important;
	color: black !important;
}

.template_free{
	margin-left: 15px;
	background-color: #9CC715;
	color: #ffffff;
	padding: 0 3px;
}

.template_new{
	margin-left: 15px;
	background-color: #ff3366;
	color: #ffffff;
	padding: 0 3px;
}

.newicon{
	margin-right:2px;
}

#detail_thumbnail{
	border: 1px solid gray;
	width: 70%;
	padding: 5px 0px;
	display: block;
	margin: 5px auto 8px auto;
	max-height: 300px;
}

#detail_thumbnail img{
	max-height:290px;
}

#detail_info{
	border: 1px solid gray;
	width: 70%;
	padding: 5px;
	display: block;
	margin: 5px auto 8px auto;
	text-align:left;
	line-height: 1.5;
}

.box_shadow{
	box-shadow: 0px 0px 5px 1px rgba(170,170,170,0.43);
	-moz-box-shadow: 0px 0px 5px 1px rgba(170,170,170,0.43);
	-webkit-box-shadow: 0px 0px 5px 1px rgba(170,170,170,0.43);
	-o-box-shadow:0px 0px 5px 1px rgba(170,170,170,0.43);
	-ms-box-shadow:0px 0px 5px 1px rgba(170,170,170,0.43);
}
.borderTopBlueColor{
	border-top:solid 2px #00A0B8;
}

#InfoArea {
	width: 94%;
	margin: 10px auto 0;
}

#makerTable {
	border: solid 1px #D7DBDF;
	width: 100%;
}

.t_title {
	width: 25%;
	text-align: center;
	padding: 10px 0!important;
	background-color: #009fb9;
	color: #FFFFFF;
}

.t_info {
	padding: 10px!important;
}

.FreeTryBtn {
	width: 320px;
	padding: 10px 10px;
	margin: 30px auto;
	display: block;
	border-radius: 4px;
	background-color: #c7243a;
	color: #FFFFFF;
	font-size: 2.6rem;
	text-align: center;
}

.FreeTryBtn:hover {
	opacity: 1.0!important;
	background-color: #8b1928;
}

@media screen and (max-width: 599px){
	#searchArea {
		width: auto;
		float: none;
		margin-left: 0;
		overflow: hidden;
		min-height: 0;
	}
	
	.ui-tabs .ui-tabs-panel {
		padding: 0;
	}
	
	.template_list_left {
		width: 37%;
	}
	.template_free {
		display: inline-block;
	}
	
	#templateDetailArea {
		width: auto;
		float: none;
		margin-top: 20px;
	}
	
	#InfoArea {
		width: auto;
	}
	
	.FreeTryBtn {
		max-width: 100%;
	}
	
	.hinbanListBtn {
		margin: 60px auto 30px;
	}
}

/*show=newsrelease*/
#newsReleaseTable{
	margin: 0 auto;
	width: 100%;
	text-align: center;
	box-shadow: 0px 0px 5px 1px rgba(170,170,170,0.43);
}

#newsReleaseTable th, #newsReleaseTable td{
	padding: 10px 0!important;
}

#newsReleaseTable th{
	border-bottom: solid 1px #CCCCCC;
}

#newsReleaseTable td{
	border-bottom: solid 1px #E9E9E9;
}

#newsReleaseTable tr:nth-child(odd) td {
    background-color: #F9F9F9;
}

#newsReleaseTable tr:hover td {
	background-color: #ebf6f7;
	transition: 1.0s ;
}

#newsReleaseTable th{
	background-color: white;
}

.addPostionFixBottom{
	position:fixed;
	left:0px;
	right:0px;
	bottom:0px;
}

.contentsTd{
	text-align: left;
}

/*show=functions*/
.functionTitle {
	color: #464c59;
	font-size: 240%;
	margin: 30px auto;
	font-weight: bold;
}

@media screen and (max-width: 599px) {
	.functionTitle {
		font-size: 1.9rem!important;
	}
}

/*#feature-1
***************************************/
#feature-1{
	padding: 100px 0px 40px 0px;
	background-color: #ffffff;
	overflow: hidden;
}

#feature-1 h3{
	width: 410px;
	padding: 0px 0px 0px 40px;
	text-align: left;
	font-size: 2.2rem;
	font-weight: bold;
	background-image: url(/images/lp/bg_1.png);
	background-repeat: no-repeat;
	background-position: center left;
}

#feature-1 div.editpic{
	text-align:center;
}

#feature-1 .items dl, #feature-5 dl{
	margin: 20px;
	padding: 10px;
}

#feature-1 .items dt{
	padding:30px 0px 0px 0px;
	color:#009FB8;
	font-size:1.6rem;
	font-weight:bold;
}

#feature-1 .items dd,
#feature-5 dd{
	background-size:100px!important;
	background-repeat: no-repeat!important;
	vertical-align:middle;
	padding-left: 110px;
	height: 8em;
}

@media screen and (max-width: 959px) {
	#feature-1 .items dt{
		height:3em;
	}

	#feature-1 .items dd,#feature-5 dd{
		height:15.5em;
		background-size: 50px!important;
		padding-left: 60px!important;
	}
}

@media screen and (max-width: 599px) {
	#feature-1,#feature-2,#feature-3,#feature-4,#feature-5{
		padding: 100px 10px 20px 10px;
	}

	#feature-1 div.editpic img,#feature-2 div.pic img{
		width: 80%;
	}
	
	#feature-1 div.txt,#feature-2 div.txt{
		width: 100%;
		padding: 0px 0px 20px 0px;
	}
	
	#feature-1 h3,#feature-2 h3,#feature-3 h3,#feature-4 h3{
		width: 100%;
		font-size: 1.6rem;
	}
	
	#feature-1 .items dl,#feature-2 dl {
		width: 100%;
	}

	#feature-1 .items dl, #feature-5 dl{
		margin: 0px 0px 20px 0px;
		width: 90vw;
		clear: both;
	}
	
	#feature-1 .items dd,#feature-5 dd{
		height: 100%;
	}
}

/*#feature-2
***************************************/
#feature-2{
	margin:0px auto 0px auto;
	padding:80px 0px 40px 0px;
	background-color:#FFFFFF;
	overflow:hidden;
	text-align:left;
}

#feature-2 h3{
	width:410px;
	margin:0px auto 0px auto;
	padding:0px 0px 0px 40px;
	text-align:left;
	font-size:2.2rem;
	font-weight:bold;
	background-image:url(/images/lp/bg_2.png);
	background-repeat:no-repeat;
	background-position:center left;
}

#feature-2 div.pic{
	min-width:50%;
	float:right;
	text-align:center;
}

#feature-2 div.txt{
	min-width:50%;
	float:left;
}

#feature-2 dl{
	width:450px;
	margin:0px auto 0px auto;
}

#feature-2 dt{
	padding:30px 0px 0px 0px;
	color:#009FB8;
	font-size:1.6rem;
	font-weight:bold;
}

/*#feature-3
***************************************/
#feature-3{
	margin:0px auto 0px auto;
	padding:50px 0px 40px 0px;
	background-color:#F7F7F7;
	overflow:hidden;
}

#feature-3 h3{
	width:410px;
	padding:0px 0px 0px 40px;
	text-align:left;
	font-size:2.2rem;
	font-weight:bold;
	background-image:url(/images/lp/bg_3.png);
	background-repeat:no-repeat;
	background-position:center left;

}

/*#feature-3 & #feature-4*/
.txt,
.pic {
	padding: 10px;
	width: 50%;
	float: left;
	box-sizing: border-box;
}

.txt {
	padding: 10px 30px;
}

.pic {
	padding: 10px;
	text-align: center;
}

#feature-3 dt,
#feature-4 dt {
	color: #009fb8;
	font-size: 1.6rem;
	font-weight: bold;
}

.pic img {
	width: 100%;
}

#feature-3 dd,
#feature-4 dd {
	margin-bottom: 30px;
}

@media screen and (max-width: 959px) {	
	.txt,
	.pic {
		width: auto;
		float: none;
	}
	
	.txt {
		padding: 10px 25px;
	}
	
	#feature-4 div.pic {
		padding-bottom: 50px;
	}
}

@media screen and (min-width: 600px) and (max-width: 959px) {
	#feature-3 div.pic img,
	#feature-4 div.pic img {
		width: 80%;
	}
}

@media screen and (max-width: 599px) {
	.txt {
		padding: 10px 15px;
	}
}

/*#feature-4
***************************************/
#feature-4{
	margin:0px auto 0px auto;
	padding:50px 0px 40px 0px;
	background-color:#FFFFFF;
	overflow:hidden;
}

#feature-4 h3{
	width:410px;
	margin:0px auto 0px auto;
	padding:0px 0px 0px 40px;
	text-align:left;
	font-size:2.2rem;
	font-weight:bold;
	background-image:url(/images/lp/bg_4.png);
	background-repeat:no-repeat;
	background-position:center left;
}

#feature-4 #startGuideDiv{
	text-align: center;
	margin-bottom: 50px;
}

@media screen and (max-width: 1105px) {
	#feature-4 #startGuideImg{
		width: 90%;
	}
}

/*#feature-5
***************************************/
#feature-5{
	margin:0px auto 0px auto;
	padding:50px 0px 40px 0px;
	background-color:#F7F7F7;
	overflow:hidden;
}

#feature-5 h3{
	width:410px;
	padding:0px 0px 0px 40px;
	text-align:left;
	font-size:2.2rem;
	font-weight:bold;
	background-image:url(/images/lp/bg_5.png);
	background-repeat:no-repeat;
	background-position:center left;
}

#feature-5 div.pic{
	width: 50%;
	float:left;
	text-align:center;
}

#feature-5 dl{
	margin: 20px;
}

#feature-5 dt{
	padding:30px 0px 0px 0px;
	color:#009FB8;
	font-size:1.6rem;
	font-weight:bold;
}

/*#webapi
***************************************/
#webapi{
	background-color :#FFFFFF;
	padding: 50px 0px 40px 0px;
	margin: 0 auto;
}

.apiTop {
	width: 50%;
	float: left;
}

.apibox {
	margin: 1em 4em;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}

.apibox .apibox-title {
	font-size: 1.2em;
	background: #474B59;
	padding: 4px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	letter-spacing: 0.05em;
}

.apibox p {
	padding: 15px 20px;
	margin: 0;
	min-height: 185px;
}

@media screen and (max-width: 959px) {
	.apiTop {
		width: auto;
		float: none;
	}
	
	.apibox p {
		min-height: auto;
	}
}

@media screen and (max-width: 599px) {
	.apibox {
		margin: 1em 10px;
	}
	
}