@charset "UTF-8";
/* 冒頭でimport */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);


body	{margin: 0;
	font-size: 1em;
  font-family: 'Noto Sans JP';
background: linear-gradient(#f9f8f2, #fff);
}



/* サイト名 */
.site h1 a	{
	color: #7A2626;
	text-decoration: none;
	font-size: 24px;
}

.site h1	{margin: 0;
	font-size: 30px}

.site img	{border: none}


/* ヘッダー画像 */
.topimg	{max-width: 100%;
	height: auto;
	vertical-align: bottom}

/* キャッチコピー */
.catch	{margin: 0;
	padding: 15px;
	background-color: rgba(255,255,255,0.7);
	font-size: 28px}

/* ヘッダー画像にキャッチコピーを重ねる */
.top	{position: relative}

.catch	{position: absolute;
	bottom: 7%;
	left: 3%}



/* 概要 */
.gaiyou a	{display: block;
	background-color: #222222;
	color: #ffffff;
	text-align: center;
	text-decoration: none}

.gaiyou a:hover	{opacity: 0.8}

.gaiyou i	{display: block;
	padding-top: 40px;
	padding-bottom: 40px;
	font-size: 38px}

.gaiyou .fa-database	{background-color: #bfbd13}

.gaiyou .fa-bar-chart-o	{background-color: #c58839}

.gaiyou .fa-envelope	
{background-color: #859f46}

.gaiyou h1	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 20px;
	font-weight: normal}

.gaiyou p	{margin-top: 0;
	margin-bottom: 0;
	padding-top: 15px;
	padding-bottom: 10px;
	background-color: #524e3c;
	font-size: 12px}
.software_titile {
	width: 95%;
	color: #ed746e;
	font-weight:bold;
}
.highlight{
	font-size:17px;
	background:linear-gradient(transparent 50%, #fff 0%);
}

/* お知らせ */
.news	{padding: 20px;
	border: solid 5px #dddddd}

.news h1	{margin-top: 0;
	margin-bottom: 5px;
	font-size: 18px;
	color: #666666}

.news ul	{margin: 0;
	padding: 0;
	list-style: none}

.news li a	{display: block;
	padding: 5px;
	border-bottom: dotted 2px #dddddd;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.news li a:hover	{background-color: #eeeeee}

.news time	{color: #888888;
	font-weight: bold}

.news a:after	{content: "";
	display: block;
	clear: both}

.news time	{float: left;
	width: 60px}

.news .text	{float: none;
	width: auto;
	margin-left: 60px}


/* SNSメニュー */
.follow ul	{margin: 0;
	padding: 0;
	list-style: none}

.follow li a	{display: block;
	margin-bottom: 10px;
	padding: 10px;
	border-radius: 4px;
	color: #ffffff;
	font-size: 14px;
	text-decoration: none}

.follow li a:hover	{opacity: 0.8}

.follow-tw	{background-color: #63bafb}
.follow-fb	{background-color: #5288f7}
.follow-gp	{background-color: #f65d4a}

.follow i	{margin-right: 10px;
	font-size: 24px;
	vertical-align: middle}


/* 補足説明 */
.follow-info	{margin-top: 0;
	margin-bottom: 20px;
	padding: 10px;
	background-color: #dddddd;
	font-size: 14px;
	text-align: center}

.follow-info {
	position: relative;
	background: #dddddd;
}
.follow-info:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(221, 221, 221, 0);
	border-top-color: #dddddd;
	border-width: 15px;
	margin-left: -15px;
}



/* 記事 */
.kiji h1	{
	margin-top: 0;
	margin-bottom: 20px;
	font-size: 36px;
	font-weight: normal;
	text-align: center;
	color: #7c2827;
}

.kiji h2 {
    color: #7c2827;
    margin-bottom: 10px;
    padding-left: 10px;
    border-bottom: solid 1px #fdeded;
    font-size: 1.2em;
    border-left: solid 20px #ed746e;
}

.flow h2	{
	margin-bottom: 20px;
	padding-left: 20px;
	border-bottom: solid 1px #fdeded;
	font-size: 28px;
	font-weight: normal;
border-left: solid 20px #ed746e;}

.kiji h2 i	{margin-right: 7px;
	color: #888888}

.kiji p	{max-width: 640px;
	margin-top: 0;
	margin-bottom: 10px}

.lead p	{
	text-align: left;
	font-size: 20px;
	color: #666666}

.kijiimg	{max-width: 100%;
	height: auto;
	margin-bottom: 20px}

/* 本文 */
.honbun	{margin-top: 40px;
	-moz-column-count: 2;
	-moz-column-gap: 40px;
	-webkit-column-count: 2;
	-webkit-column-gap: 40px;
	column-count: 2;
	column-gap: 40px}




/* パンくずリスト */


.bread ol	{margin: 0;
	padding: 0;
	list-style: none}

.bread li a	{display: inline-block;
	padding: 5px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.bread li a:hover	{background-color: #eeeeee}

.bread ol:after	{content: "";
	display: block;
	clear: both}

.bread li	{float: left;
	width: auto}

.bread li:after	{content: '\003e';
	margin-left: 10px;
	margin-right: 10px;
	color: #888888}


/* サイドメニュー */


.sidemenu h1	{margin: 0;
	padding: 10px;
	font-size: 16px;
	font-weight: normal;
background-color: #fdeded}

.sidemenu h1 i	{margin-right: 5px;
	color: #ed746e;
	font-size: larger}

.sidemenu ul	{margin: 0;
	padding: 0;
	list-style: none}

.sidemenu li a	{display: block;
	padding: 10px;
	border-top: solid 1px #dddddd;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.sidemenu li a:hover	{background-color: #eeeeee}



/* コピーライト */
.copyright p	{margin: 0;
	color: #434343;
	font-size: 14px}


/* BOX5をバーの形にする */
.box5	{padding-top: 15px;
	padding-bottom: 15px;
	background-color: #dddddd}


/* ボックスの左右 */
.boxA, .box4, .box5, .box6, .box7
	{padding-left: 15px;
	padding-right: 15px}


/* ボックスの上下 */
.boxA	{padding-top: 20px;
	padding-bottom: 10px}

.box4	{padding-top: 20px;
	padding-bottom: 20px}

.box4-1	{padding-bottom: 20px}

.box6	{padding-top: 20px;
width: 90%}

.box6-1, .box6-2, .box6-3
	{padding-bottom: 10px}

.box7	{
	padding-bottom: 25px}


/* ########### 359px以下 ########### */
@media (max-width: 359px) {

/* サイト名 */
.site img	{width: 225px;
	height: auto}

}


/* ########### 599px以下 ########### */
@media (max-width: 599px) {

/* ナビゲーション */
.menu li a	{padding: 10px 7px;
	font-size: 11px}

/* キャッチコピー */
.catch	{padding: 5px 10px;
	font-size: 12px}

/* 記事 */
.kiji h1	{font-size: 26px}

.kiji h2	{font-size: 20px}

.kiji .lead	{font-size: 16px}

}



/* ########### 767px以下 ########### */
@media (max-width: 767px) {
/*サイト名*/
.site h1 a	{
	color: #7A2626;
	text-decoration: none;
	font-size: 1em;
}

.site h1	{margin: 0;
	font-size: 1em;
	font-weight:600;
}
	
	.site img{
		max-width: 70%;
		height: auto
	}
	
	/*メッセージ*/
	.demo p{
		font-size:0.7em
	}
/* トグルボタン */
#menubtn	{padding: 6px 12px;
	border: solid 1px #aaaaaa;
	border-radius: 5px;
	background-color: #ffffff;
	position: absolute;
	top: 20px;
	right: 15px;
	cursor: pointer}

#menubtn:hover	{background-color: #dddddd}

#menubtn:focus	{outline: none}

#menubtn i	{color: #888888;
	font-size: 18px}

#menubtn span	{display: inline-block;
	text-indent: -9999px}

/* ナビゲーションメニュー（縦並び） */
.menu	{display: none}

.menu ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu li a	{display: block;
	padding: 5px;
	color: #7c2728;
	font-size: 14px;
	text-decoration: none}

.menu li a:hover	{background-color: #eeeeee}
	
	.contact{
	width: 100%;
	text-align: left;
		margin-left: 0;
		margin-right: auto;
	margin-bottom: 50px;
		padding-left: 0;
}
	#page_top{
 width: 50px;
  height: 50px;
  position: fixed;
		z-index: 1;
  right: 0;
  bottom: 0;
  background:#ed746e;
  border-radius: 50%;
	box-shadow: 2px 2px 4px gray;
}
	
	#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  content: '▲';
  font-size: 20px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

}


/* ########### 768px以上 ########### */
@media (min-width: 768px) {
.site h1 a	{
	color: #7A2626;
	text-decoration: none;
	font-size: 24px;
}

.site h1	{margin: 0;
	font-size: 30px;
	font-weight:600;
}
/*メッセージ*/
	.demo p{
		font-size:1em
	}
/* トグルボタン */
#menubtn	{display: none}

/* ナビゲーション */
#menu	{display: block !important}

.menu ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu li a	{display: block;
	padding: 10px 15px;
	color: #7c2728;
	font-size: 15px;
	text-decoration: none}

.menu li a:hover	{background-color: #eeeeee}

.menu ul:after	{content: "";
	display: block;
	clear: both}

.menu li	{float: left;
	width: auto}

/* BOX1とBOX2を横に並べる設定 */
.boxA:after	{content: "";
	display: block;
	clear: both}

.box1	{float: left;
	width: auto}

.box2	{float: right;
	width: auto}

/* BOX4-1とBOX4-2を横に並べる設定 */
.box4:after	{content: "";
	display: block;
	clear: both}

.box4-1	{float: left;
	width: 70%;
	padding-right: 35px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}

.box4-2	{float: left;
	width: 30%}


/* BOX6-1、BOX6-2、BOX6-3を横に並べる設定 */
.box6:after	{content: "";
	display: block;
	clear: both}

.box6-1	{float: left;
	width: 32%;
	margin-right: 2%}

.box6-2	{float: left;
	width: 32%;
	margin-right: 2%}

.box6-3	{float: left;
	width: 32%}


/* BOX7-1とBOX7-2を横に並べる設定 */
.box7:after	{content: "";
	display: block;
	clear: both}

.box7-1	{float: right;
	width:100%;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}

.box7-2	{float:left;
	position: fixed;
	padding-bottom: 50px}
.contact{
	width: 50%;
	text-align: left;
		margin-left: auto;
		margin-right: auto;
	margin-bottom: 50px;
}

}


/* ########### 1190px以上 ########### */
@media (min-width: 1190px) {

/* 全体の横幅を固定 */
.box3, .box4, .boxA-inner, .box5-inner, .box6, .box7
	{width: 1190px;
	margin-left: auto;
	margin-right: auto}

/* BOX Aの下に罫線を挿入 */
.boxA	{margin-bottom: 20px;}

}

.email_button 
	{color: #fff;
		margin-top: 0;
	margin-bottom: 20px;
	padding: 10px;
	background-color: #ed746e;
	font-size: 14px;
		border-radius: 10px;
	text-align: center
}

.square_btn {
	width: auto;
    position: relative;
	text-align: center;
    display: block;
    padding: 10px;
	margin-bottom: 30px;
    text-decoration: none;
    color: #FFF;
    background: #ed746e;/*色*/
    border-radius: 10px;
}

.square_btn:hover{
	cursor: pointer;
	background-color: #E44F47
}

.square_btn:active {/*押したとき*/
    border: solid 1px #bf5755;
    box-shadow: none;
    text-shadow: none;
}

.copyright {
	text-align: center;
}

.contact li{
	line-height: 1.5;
  padding: 0.4em 0;
color: #7c2827;
	font-size: 20px;
	font-weight: bolder;
	list-style: none
}

.contact li span{
	color: #595757;
}



.product_feature01
 {
	margin-top: 30px;
	margin-bottom: 30px;
	padding: 20px;
}
.product_feature02 {
	background-color: #fdeded;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 20px;
}

.feature-box {
	padding-bottom: 30px;
	padding-top: 10px
}

.sub_title {
	margin-left: auto;
	margin-right: auto;
text-align: center;	
	font-size: 20px;
	color: #7c2827;
}


/*画面の特長ボックス*/
.boxZ:after{
	content: "";
		display:block;
	clear: both;
	margin-bottom: 10px
}

.boxZ p{
	padding-right: 15px;
}
.box01{
	display: block;
	width: 50%;
}

.box02{
	display: block;
	width: 50%
}

/*product_featureのリストデザイン*/
.product_feature03-1 ul{
  counter-reset:list;
  list-style-type:none;
  padding:0;
}

.f_01, .f_02, .f_03, .f_04, .f_05{
  position:relative;
  margin: 10px 0 10px 0px;
	padding: 5px;
	color: #565656;
  font-size:20px;
  line-height: 30px;
	background-color:#F4F4F4;
	border: solid 1px #fdeded;
  border-radius:20px;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}

.f_01:before{
	 content: "\f019";
    position: relative;
	width:2em;
  height: 2em;
	padding: 5px;
  background:#ed746e;
  border-radius: 50%;
  margin-right: 10px;
    font-family: FontAwesome;
    color:#fff; /* 文字色 */
    font-size: 100%; /* フォントの大きさ */

}

.f_02:before{
	 content: "\f15c";
    position: relative;
	width:2em;
  height: 2em;
	padding: 5px;
  background:#ed746e;
  border-radius: 50%;
  margin-right: 10px;
    font-family: FontAwesome;
    color:#fff; /* 文字色 */
    font-size: 100%; /* フォントの大きさ */

}

.f_03:before{
	 content: "\f108";
    position: relative;
	width:2em;
  height: 2em;
	padding: 5px;
  background:#ed746e;
  border-radius: 50%;
  margin-right: 10px;
    font-family: FontAwesome;
    color:#fff; /* 文字色 */
    font-size: 100%; /* フォントの大きさ */

}

.product_feature03-2 ul{
  counter-reset:list;
  list-style-type:none;
  padding:0;
}
.f_04:before{
	 content: "\f044";
    position: relative;
	width:2em;
  height: 2em;
	padding: 5px;
  background:#ed746e;
  border-radius: 50%;
  margin-right: 10px;
    font-family: FontAwesome;
    color:#fff; /* 文字色 */
    font-size: 100%; /* フォントの大きさ */

}

.f_05:before{
	 content: "\f11c";
    position: relative;
	width:2em;
  height: 2em;
	padding: 5px;
  background:#ed746e;
  border-radius: 50%;
  margin-right: 10px;
    font-family: FontAwesome;
    color:#fff; /* 文字色 */
    font-size: 100%; /* フォントの大きさ */

}
/*ソフトウェアの説明*/
.product_feature02 ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0;
}
.product_feature02 ol li{
  position: relative;
  padding: 0.5em;
  line-height: 1.5em;
  background: #fff;
  border-left : solid 35px #ed746e;
	border-radius: 5px;
  margin-bottom: 10px;
	font-size: 20px
}
.product_feature02 ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  color: white;
  font-weight:bold;
  font-size: 15px;
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
  left: -35px;
  width: 35px;
  height: 1em;
  line-height: 1;
  text-align:center;
}

/*画面の特長ボックス*/
.boxZ:after{
	content: "";
		display:block;
	clear: both;
}
.box01{
	float: left;
	width: 50%
}

.box02{
	float: right;
	width: 50%
}
.product_feature03-1 {
	margin-top:10px;
	padding-left: 20px;
	padding-right: 20px;
	border:solid 3px #fdeded;
	border-radius: 10px
}

.product_feature03-2 {
	margin-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border:solid 3px #fdeded;
	border-radius: 10px
}
/*リスト*/
.cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin:20px auto;
color: #ffffff;
}
.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}
.cp_actab label {
	font-weight: bold;
	line-height: 3;
	position: relative;
	display: block;
	padding: 0 0 0 1em;
	cursor: pointer;
	margin: 0 0 1px 0;
	background-color: #7c2827;
}
.cp_actab .cp_actab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.35s;
transition: max-height 0.35s;
color: #333333;
background: #fff;
}
.cp_actab .cp_actab-content p {
margin: 1em;
}
/* :checked */
.cp_actab input:checked ~ .cp_actab-content {
max-height: 200em;
}
/* Icon */
.cp_actab label::after {
line-height: 3;
position: absolute;
top: 0;
right: 0;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}
.cp_actab input[type=checkbox] + label::after {
content: '+';
}
.cp_actab input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}

.product_feature04 h3 {
	background-color: #fdeded;
	padding-top:10px;
	padding-left: 10px;
	padding-bottom:10px;
	color: #7c2827
}

/*内蔵シナリオチョイ見せのリスト*/
.product_feature04 li{
}
table {
	display: table-cell;
	float: left;
	margin-left: 5px;
	margin-top: 30px;
	margin-bottom: 30px;
	border-collapse: collapse;
}

.product_feature05 h3{
	color: #ed746e;
	background-color: #fdeded;
	width: 90%;
	padding: 10px
}

table th {
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: #fdeded;
	color: #ed746e
}

table td {
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: small
}
table th, table td{
	border: solid 1px #fdeded;
}

.ts {
	display: block;
	clear: both;
	background-color: #fdeded;
}

.product_feature05 {
	padding-top: 30px
}

/*termの部分*/
.term01_1, .term01_2, .term02_1, .term02_2, .term02_3, .term03_1, .term03_2, .term04_1 {
	display:table-cell;
	float: left;
	max-height: 495px;
	width: 49%;
}



.flow ul{
	
}
.flow li{
	
}
.term01, .term02, .term03, .term04 {
	margin-top: 20px;
	display: table;
	position: relative;
	width: 100%;
	clear: both;
}

.term02:after{
	content: "";
	display: block;
	clear: both
}
.cp_actab p{
	/* color: #3D3D3D; */
	font-size: 20px;
}
.sidemenu {
	border: solid 3px #fdeded
}


.scenario_btn {
	width: auto;
    position: relative;
	text-align: center;
    display: block;
    padding: 10px;
	margin-bottom: 30px;
    text-decoration: none;
    color: #FFF;
    background: #ed746e;/*色*/
    border-radius: 10px;
}
.box_left {
	display: block;
	float: left;
	width: 50%;
}

.box_right {
	display: block;
	float: left;
	width: 50%;
}

.demo {
	position:relative;
}

.demo p{
	position: absolute;
	text-align: center;
	width:auto;
	max-height: 100%;
	background:rgba(255,255,255,0.7);
	border-radius: 5px;
  top: 50%;
  left: 50%;
	padding:20px;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
	
}

.demo img{
	width: 100%
}

.backbord{
	margin-top:50px;
	margin-bottom: 50px;
	width: auto;
}