@charset "UTF-8";
html {
	font-size: calc(112.5% + 0.5vw)
}

 /*　トップ
 ========================================================================== */
.container {
	width: auto;
}
.col-lg-12, .col-md-12, .col-sm-12, .col-xs-12 {
 	padding: 0px;
 }
	.top {
		display: block;
		max-width: 1400px;
		background-color: #10b6da;
		padding: 70px;
		margin: 0 auto;
		position: relative;
	}
	h1 {
		font-size: 6.5em;
		position:relative;
	}
	h1,h2 {
		color: #FFFFFF;
		font-family: 'Times New Roman';
	}
	h1 img {
		width: 31px;
		height: 33px;
		position:absolute;
		top: 47px;
		left: 265px;
	}
	.circle {
		display: inline-block;
		position:relative;
		position:absolute;
		top: 60px;
		right: 80px;
		background-color :#FFFFFF;
		width: 180px;
		height: 180px;
		border-radius: 50%;
	}
	.circle span {
		display: inline-block;
		position: absolute;
	  	left: 0;
	  	top: 50%;
	  	transform: translateY(-50%);
	  	text-align:center;
	  	color: #337ab7;
	  	font-size: 23px;
	  	font-weight: bold;
	  	width: 180px;
	}
	.txt {
		font-size: 1.5em;
		letter-spacing: 0.2em;
		line-height: 1.9em;
		max-width: 1200px;
		width: 60%;
		margin: 50px auto;
	}
	.txt div {
		display: inline-block;
		letter-spacing: 0.1em;
		font-size: 20px;
	}
	.txt p {
		display: inline-block;
		font-size: 35px;
	}

	@media screen and (max-width:850px){
		  .circle {
			top: 75%;
			right: 40px;
			background-color :#337ab7;
			width: 120px;
			height: 120px;
		  }
		  .circle span {
			  left: -25%;
			  top: 55%;
			  color: #ffffff;
			  font-size: 15px;
			}
			.top {
				padding: 40px 70px 80px 40px;
			}
			h1 {
				font-size: 60px;
			}
			h2 {
				font-size: 20px;
			}
			h1 img {
				top: 20px;
				left: 190px;
			}
		}

/*　EMMS内容
 ========================================================================== */
.box {
	text-align: center;
}
.table1 {
	display: inline-block;
	margin: 10px;
	height: 300px;
	text-align: left;
	border: solid 1px #808080;
}
.ttl {
	display: table;
	width: 468px;
	height: 110px;
	background-color: #aae3f9;
	border: none;
}
.ttl img {
	width: 80px;
	height: 80px;
	margin: 15px 0 15px 15px;
}
h3 {
	display: table-cell;
  	vertical-align: middle;
	font-size: 22px;
}
.txt2 {
	padding: 30px;
	line-height: 1.7em;
	font-size: 17px;
	border: none;
}

.org {
	text-align: center;
	height: 100px;
	margin: 40px auto;
	background-color: #aae3f9;
	display: table;
}
.org p {
	font-size: 30px;
	display: table-cell;
  	vertical-align: middle;
}
.price {
	font-size: 17px;
}

@media screen and (max-width:850px) {
	.txt {
		width: 80%;
		letter-spacing: 0;
		font-size: 15px;
	}
	.txt div {
		font-size: 16px;
	}
	.org p {
		font-size: 17px;
		padding-left: 25px;
		padding-right: 25px;
	}
	.box {
		width: 100%;
	}
	.table1 {
		height: 100%;
	}
	.box {
    width: 95%;
}
.price {
	font-size: 15px;
}
}

/*　フッター
 ========================================================================== */

footer {
	position: relative;
	height: 120px;
	width: 100%;
	background-color: #10b6da;
}
footer div {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
  	left: 0;
  	right: 0;
  	bottom: 0;
	text-align: center;
	font-size: 35px;
	font-weight: bold;
}
footer p {
	display: inline-block;
}
footer .adress {
	font-weight: normal;
}
footer img {
	display: inline-block;
	padding: 0 0 0 30px;
}

@media screen and (max-width:850px) {
	footer {
		height: 130px;
	}
	footer div {
		font-size: 20px;
	}
	.col-lg-10 {
		padding-right: 0;
    padding-left: 0;
	}
	footer img {
		width: 25px;
		height: auto;
		padding-left: 0;
}
}

/*　見出し(フロント画面)(管理画面)
 ========================================================================== */

.box4 {
	position: relative;
	min-width: 992px;
	max-width: 1200px;
	margin: 0 auto;
}
.step1 {
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

.step2 {
	display: inline-block;
	position: absolute;
	top: 460px;
	left: 0;
}

.front {
	display: inline-block;
	position: relative;
	background-color: #337ab7;
	color: #ffffff;
	writing-mode: vertical-rl;
	text-align: center;
	font-size: 25px;
	width: 40px;
	height: 460px;
}
.triangle1 {
	display: inline-block;
	position: absolute;
  	width: 0;
	height: 0;
	border-style: solid;
	border-width: 230px 0 230px 35px;
	border-color: transparent transparent transparent #337ab7;
}
.cms {
	display: inline-block;
	position: relative;
	background-color: #C3608A;
	color: #ffffff;
	writing-mode: vertical-rl;
	text-align: center;
	font-size: 25px;
	width: 40px;
	height: 1380px;
}
.triangle2 {
	display: inline-block;
	position: absolute;
  	width: 0;
	height: 0;
	border-style: solid;
	border-width: 690px 0 690px 35px;
	border-color: transparent transparent transparent #C3608A;
}

.sp_container {
	display: none;
}

@media screen and (max-width:850px) {
	.box4,.triangle1,.triangle2 {
		display: none;
	}
	.sp_container {
		display:inline-block;
		width: 100%;
	}
	.step1,.step2 {
		margin-top: 40px;
	}
	.cms {
		font-size: 25px;
		width: 40px;
		height: 460px;
	}
	.step3 {
		display: inline-block;
		position: absolute;
		top: 1000px;
	}
	.step4 {
		display: inline-block;
		position: absolute;
	}
	.step5 {
		display: inline-block;
		position: absolute;
	}
	.step5 .cms {
		top: 0px;
		height: 1490px;
	}
}

/*　各管理アカウントによる情報管理
 ========================================================================== */
	.box5 {
		background-color: #7cb7de;
		text-align: center;
		margin-top: 40px;
		padding: 10px 0 10px 0;
	}
	.box7 {
		background-color: #e5bdc2;
		text-align: center;
		padding: 10px 0 10px 0;
	}
	.box6 {
		display: inline-block;
		width: 400px;
		height: 400px;
		margin: 20px;
		padding: 40px;
		background-color: #ffffff;
	}
	.box6 .img1 {
	  	object-fit: contain;
	 	width: 320px;
	 	height: 220px;
	 	background-color: #ffffff;
	}
	.box6 .img2 {
	  	object-fit: contain;
	 	width: 280px;
	 	height: 280px;
	 	background-color: #ffffff;
	}
	.box6 .title {
		display: block;
		font-size: 25px;
		color: #337ab7;
	}
	.txt3 {
		display: block;
		font-size: 16px;
		text-align: left;
		position: relative;
	}
	.txt3 .img3 {
	 	width: 120px;
	 	height: 159px;
	 	position: absolute;
	 	top: 40px;
	 	left: 50%;
	 	transform: translateX(-50%);
	}
	.box8 {
		display: inline-block;
		width: 840px;
		height: 400px;
		margin: 20px;
		padding: 30px;
		background-color: #ffffff;
	}
	.box8 .title {
		display: block;
		font-size: 25px;
		color: #337ab7;
		text-align: left;
	}

	@media screen and (max-width:850px) {
		.table1,.txt2,.ttl {
			width: 100%;
			table-layout: fixed;
			}
		.txt2 {
			font-size: 15px;
		}
		h3 {
			display: contents;
			display: inline-block;
			margin: 20px;
			font-size:15px;
			vertical-align:  middle;
		}
		.ttl img {
			width: 40px;
			height: auto;
		}
		.ttl {
			height: 0;
			width: 100%;
		}
		.sp_br2 { display:block; }

		div.box8 {
			width: 85%;
			height: 550px;
			margin-left: 0;
			margin-right: 0;
		}
		.box8 .title {
			font-size: 20px;
		}
		div.box6 {
			width: 85%;
		}
		.img1,.img2 {
			max-width: 100%;
			height: auto;
		}
		.txt3 .img3 {
			width: 65px;
			height: auto;
			top: 75px;
		}
		.box6 .title {
			font-size: 19px;
		}
		.box9 {
			margin-top: 40px;
		}
		.table1 {
			width: 98%;
		}
		div.box {
			margin-right: -1px;
		}
		h3.text_width {
			margin-left: 20px;
			margin-right: 0;
		}
		.txt3 {
			font-size: 13px;
		}
	}
/*　表
 ========================================================================== */

.tab1 {
	width: 840px;
	margin: 20px auto 0 auto;
	position: relative;
}
.tabbox {
	display: inline-block;
	position: absolute;
	right: 0;
}
.tab {
	display: table-cell;
	vertical-align: middle;
	width: 156px;
	height: 30px;
	background-color: #10b6da;
	border: 1px solid #ffffff;
	border-radius: 10px 10px 0 0;
	color: #ffffff;
}
.table2 {
	margin: 50px auto 0 auto;
	width: 780px;
	height: 200px;
}
.table2,td,th {
	border: 1px solid #595959;
	border-collapse: collapse;
}
td, th {
	padding: 3px;
	width: 150px;
	height: 25px;
}
th {

	text-align: center;
}
th.system{
	background-color: #9fcfff;
}
th.cm {
	background-color: #ffd5e5;
}
th.staff {
	background-color: #b5e3bd;
}
.lower td {
	background-color: #fcf7b9;
}
td.ng {
	background-color: #d3d3d3;
}
.even {
	background: #fbf8f0;
}
.odd {
	background: #fefcf9;
}
.txt4 {
	display: block;
	text-align: right;
	margin-top: 10px;
}

.table3 {
	display:none;
}

@media screen and (max-width:850px) {
.table2,.tabbox,.txt4 {
		display: none;
}
.table3 {
	display:inline-block;
	margin: 10px 0;
	width: 100%;
  }
.table3 td {
    display: block;
    text-align: right;
    width: 113%;
  }
.table3 td:first-child {
    color: #595959;
    font-weight: bold;
    text-align: center;
  }
.table3 td:before {
    content: attr(data-label);
    float: left;
    font-weight: bold;
    margin-right: 10px;
	}
	.system {
		background: #9fcfff;
	}
	.shop {
		background: #ffd5e5;
	}
	.staff {
		background: #b5e3bd;
	}
}

/*　メールフォーム
 ========================================================================== */

form {
	border: 1px solid black;
	max-width: 992px;
	padding: 20px;
	text-align: center;
	margin: auto;
}
form p {
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	margin: 30px auto;
}
form.form-group {
	display: table;
	text-align: center;
}
label {
	font-size: 17px;
	color: gray;
	white-space: nowrap;
	padding: 10px;
}
.form-control {
	display: inline-block;
	max-width: 500px;
}
.check {
	margin: 10px auto 30px auto;
}