@charset "utf-8";
html,body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	box-sizing:border-box;
	background-color:#666;
	/*background-color:#008c89;*/
}
body {
	font-family:"Lucida Grande", "Lucida Sans Unicode", "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", Helvetica, Arial, Verdana, sans-serif;
	font-size:14px;
	line-height:1.5;
}
[id="wrapper"] {
	width:100%;
	position:relative;
	z-index:2;
}
/*背景*/
[id="particles-js"] {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:1;
	background-color:#666;
}
/*ヘッダー*/
[id="header"] {
	width:100%;
	height:60px;
	margin-bottom:40px;
	border-bottom:1px solid #2a2a2a;
	background-color:#333;
	color:#fff;
	text-shadow:1px 1px 0 rgba(0,0,0,.2);
	box-shadow:inset 0 -2px 20px rgba(255,255,255,.1);
	position:relative;
}
/*ロゴ*/
[id="brand"] {
	float:left;
	line-height:60px;
}
/*ナビゲーション*/
[id="navi"] {
	float:right;
}
[id="navi"] ul {
	list-style:none;
	padding:0;
	height:60px;
}
[id="navi"] ul > li {
	float:left;
	padding-top:15px;
}
[id="navi"] ul > li a {
	display:inline-block;
	padding:5px 20px;
	border-left:1px solid rgba(255,255,255,.2);
	color:#fff;
	font-size:12px;
}
[id="navi"] i {
	margin-right:5px;
}
/*スマホ用メニュー表示スイッチ*/
.navbar-toggle {
	position: absolute;
	top:0;
	right:-10px;
	float: none;
	padding: 5px 5px 2px;
	margin:0x;
	color:#fff;
	font-size:24px;
}
/*メインコンテンツ*/
[id="content"],
[id="catch"] {
	width:100%;
	position:relative;
}
[id="content"] {
	z-index:2;
}
[id="content"] > .container {
	padding-top:15px;
	background-color:#f3f3f3;
	box-shadow:0 2px 5px rgba(0,0,0,.2);
}
/*ページトップ*/
[id="pagetop"] {
	position:fixed;
	bottom:40px;
	right:20px;
	z-index:2;
}
[id="pagetop"] a {
	display:inline-block;
	width:48px;
	height:48px;
	line-height:50px;
	border-radius:50%;
	text-align:center;
	font-size:18px;
	background-color:#008c87;
	color:#fff;
}
[id="pagetop"] {
	-webkit-animation: back-pagetop 0.5s 1; /* Safari 4+ */
	-moz-animation:    back-pagetop 0.5s 1; /* Fx 5+ */
	-o-animation:      back-pagetop 0.5s 1; /* Opera 12+ */
	 animation:        back-pagetop 0.5s 1; /* IE 10+ */
}
@-webkit-keyframes back-pagetop {
    0%   {  opacity: 1; -webkit-transform:scale(1); }
    20%   { opacity: 1; -webkit-transform:scale(1.3); }
    100%   { opacity: 0; -webkit-transform:scale(0); }
}
@-moz-keyframes back-pagetop {
    0%   {  opacity: 1; -moz-transform:scale(1); }
    20%   { opacity: 1; -moz-transform:scale(1.3); }
    100%   { opacity: 0; -moz-transform:scale(0); }
}
@-o-keyframes back-pagetop {
    0%   {  opacity: 1; -o-transform:scale(1); }
    20%   { opacity: 1; -o-transform:scale(1.3); }
    100%   { opacity: 0; -o-transform:scale(0); }
}
@keyframes back-pagetop {
    0%   {  opacity: 1; transform:scale(1); }
    20%   { opacity: 1; transform:scale(1.3); }
    100%   { opacity: 0; transform:scale(0); }
}
.jump[id="pagetop"] {
	-webkit-animation: bounce-pagetop 0.3s 1; /* Safari 4+ */
	-moz-animation:    bounce-pagetop 0.3s 1; /* Fx 5+ */
	-o-animation:      bounce-pagetop 0.3s 1; /* Opera 12+ */
	 animation:        bounce-pagetop 0.3s 1; /* IE 10+ */
}
@-webkit-keyframes bounce-pagetop {
    0%   { opacity: 0; -webkit-transform:scale(0); }
    80%   { opacity: 1; -webkit-transform:scale(1.3); }
    100%   { opacity: 1; -webkit-transform:scale(1); }
}
@-moz-keyframes bounce-pagetop {
    0%   { opacity: 0; -moz-transform:scale(0); }
    80%   { opacity: 1; -moz-transform:scale(1.3); }
    100%   { opacity: 1; -moz-transform:scale(1); }
}
@-o-keyframes bounce-pagetop {
    0%   { opacity: 0; -o-transform:scale(0); }
    80%   { opacity: 1; -o-transform:scale(1.3); }
    100%   { opacity: 1; -o-transform:scale(1); }
}
@keyframes bounce-pagetop {
    0%   { opacity: 0; transform:scale(0); }
    80%   { opacity: 1; transform:scale(1.3); }
    100%   { opacity: 1; transform:scale(1); }
}
[id="pagetop"] a:hover {
	background-color:#1abc9c;
}

/*フッター*/
[id="footer"] {
	padding:40px 20px;
	text-align:center;
}
[id="footer"] ul {
	width:100%;
	margin:0 0 30px 0;
	padding:0;
	list-style:none;
}
[id="footer"] ul> li,
[id="footer"] ul> li a {
	display:inline-block;
}
[id="footer"] ul> li {
	padding:2px 15px;
	border-left:1px solid rgba(256,256,256,.2);
	font-size:85%;
}
[id="footer"] ul> li:first-child {
	border-left:none;
}
[id="footer"] ul> li a,
[id="copyright"] {
	color:#fff;
}

/*キャッチ画像*/
[id="catch"] {
	margin-bottom:30px;
	z-index:3;
	color:#fff;
	letter-spacing:1px;
}
[id="catch"] h1 {
	margin:0 0 20px;
	padding-right:520px;
	font-size:18px;
	font-weight:normal;
	line-height:42px;
	text-shadow:2px 1px 0 rgba(0,0,0,.2);
	position:relative;
	z-index:4;
}
[id="catch"] h1 > span {
	display:block;
}
[id="catch"] h1 strong {
	font-size:28px;
	font-weight:normal;
	letter-spacing:2px;
}
[id="catch"] .container {
	position:relative;
	min-height:320px;
}
.catchImg {
	position:absolute;
	top:0;
	right:0;
	z-index:3;
}
.catchBtn .btn {
	width:48%;
}
/*バナースペース*/
.bnrArea .container{
	margin-top:-120px;
	padding:15px;
	text-align:center;
	background:url(../image/bg_pattern_01.gif) repeat top left;
}
.bnrArea img {
	width:100%;
	max-width:580px;
	height:auto;
	position:relative;
	z-index:4;
}

/*ページ内リンク*/
.linkInPage {
	margin-top:-15px;
	padding:20px 0 0 0;
}
.linkInPage > div {
	padding-bottom:40px;
	position:relative;
}
.linkInPage .media-left {
	padding-right:15px;
}
.linkInPage .list-group-item {
	position:relative;
}
.linkInPage > div:after {
	position:absolute;
	bottom:0;
	left:0;
	display:block;
	width:100%;
	height:32px;
	line-height:32px;
	text-align:center;
	font-family:'Glyphicons Halflings';
	font-size:24px;
	color:#666;
	content:"\e259";
	-webkit-animation: bounce-fade 1.2s infinite; /* Safari 4+ */
	-moz-animation:    bounce-fade 1.2s infinite; /* Fx 5+ */
	-o-animation:      bounce-fade 1.2s infinite; /* Opera 12+ */
	 animation:        bounce-fade 1.2s infinite; /* IE 10+ */
}
@-webkit-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 35px; }
    100% { opacity: 1; bottom: 0px; }
}
@-moz-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 35px; }
    100% { opacity: 1; bottom: 0px; }
}
@-o-keyframes bounce-fade {
    0%   { opacity: 0; bottom: 35px; }
    100% { opacity: 1; bottom: 0px; }
}
@keyframes bounce-fade {
    0%   { opacity: 0; bottom: 35px; }
    100% { opacity: 1; bottom: 0px; }
}

.linkInPage a.list-group-item .list-group-item-heading {
	font-size:14px;
	line-height:1.5;
	letter-spacing:2px;
	color:#fff;
}
.linkInPage a.list-group-item:link,
.linkInPage a.list-group-item:visited {
	background-color:#1abc9c;
}
.linkInPage a.list-group-item:hover,
.linkInPage a.list-group-item:active {
	background-color:#169E83;
}
.linkInPage .list-group-item-heading span {
	font-size:20px;
	letter-spacing:1px;
}

/*コンテンツ 見出し*/
.ctsTitle {
	position:relative;
	margin:40px 0;
	font-size:16px;
	font-weight:normal;
	letter-spacing:2px;
	text-align:center;
	line-height:1.4;
}
.ctsTitle span {
	font-size:52px;
}
.pageTitle.ctsTitle {
	color:#fff;
}
.title01 {
	position:relative;
	margin:20px 0;
	padding:15px 5px 12px;
	border-bottom:1px solid #e3e3e3;
	font-size:127%;
	font-weight:bold;
	line-height:1.3;
	letter-spacing:1px;
}
.title01:before {
	position:absolute;
	top:0;
	left:0;
	content:"";
	display:block;
	width:100%;
	height:3px;
	background:#ccc;
}
.title01:after {
	position:absolute;
	top:0;
	left:0;
	content:"";
	display:block;
	width:30%;
	height:3px;
	background:#008c89;
}

.section {
	padding:15px 15px;
}
/*特長*/
.feature-catch {
	margin-bottom:20px;
	padding:15px 0;
	border-top:4px double #008c89;
	border-bottom:4px double #008c89;
	text-align:center;
}
.feature-catch strong {
	font-size:150%;
}
.feature-catch span {
	display:block;
}

[id="feature"] h3 {
	margin-top:10px;
	font-size:120%;
	font-weight:bold;
	line-height:1.3;
}
[id="feature"] .panel-heading {
	display:table;
	width:100%;
	margin:0;
	padding:0;
	height:90px;
	text-align:center;
	background:url(../image/bg_pattern_01.gif) repeat center center;
}
[id="feature"] .panel-heading > p {
	display:table-cell;
	vertical-align:middle;
	padding:0;
}
/*ご利用の流れ*/
.flowOrder {
	display:table;
	width:100%;
	margin:0 0 30px 0;
	padding:0;
	list-style:none;
}
.flowOrder li {
	display:table-cell;
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}
.flowOrder li a {
  color: #FFF;
  display: block;
  background: #787878;
  text-decoration: none;
  position: relative;
  height: 80px;
  line-height: 20px;
  padding: 20px 9px 20px 5px;
  text-align: center;
  margin-right: 23px;
}
.flowOrder li a span {
	z-index:3;
	position:relative;
}
.flowOrder li:nth-child(even) a {
  background-color: #666;
}
.flowOrder li:nth-child(even) a:before {
  border-color: #666;
  border-left-color: transparent;
}
.flowOrder li:nth-child(even) a:after {
  border-left-color: #666;
}
.flowOrder li:first-child a {
  padding-left: 15px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px 0 0 4px;
}
.flowOrder li:first-child a:before {
  border: none;
}
.flowOrder li:last-child a {
  margin-right: 0;
  padding-right: 15px;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0;
  border-radius: 0 4px 4px 0;
}
.flowOrder li:last-child a:after {
  border: none;
}
.flowOrder li a:before,
.flowOrder li a:after {
  content: "";
  position: absolute;
  top: 0;
  border: 0 solid #787878;
  border-width: 40px 20px;
  width: 0;
  height: 0;
  z-index:1;
}
.flowOrder li a:before {
  left: -20px;
  border-left-color: transparent;
}
.flowOrder li a:after {
  left: 100%;
  border-color: transparent;
  border-left-color: #787878;
}
.flowOrder li a:hover {
  background-color: #1abc9c;
}
.flowOrder li a:hover:before {
  border-color: #1abc9c;
  border-left-color: transparent;
}
.flowOrder li a:hover:after {
  border-left-color: #1abc9c;
}
.flowOrder li a:active {
  background-color: #16a085;
}
.flowOrder li a:active:before {
  border-color: #16a085;
  border-left-color: transparent;
}
.flowOrder li a:active:after {
  border-left-color: #16a085;
}
.flowBox {
	padding:10px 0 60px;
	position:relative;
	overflow:hidden;
}
.flowBox:after {
	position:absolute;
	bottom:0;
	left:0;
	display:block;
	width:100%;
	text-align:center;
	font-family:'Glyphicons Halflings';
	font-size:32px;
	color:#999;
	content:"\e134";
}
[id="flowStep04"] {
	margin-bottom:30px;
	padding:10px 0 0;
}
[id="flowStep04"]:after {
	content:"";
}
.flowStep {
	display:table;
	width:100%;
	height:100%;
}
.flowStep .label {
	font-weight:normal;
	margin-right:5px;
}
.flowStepHead {
	display:table-cell;
	padding:15px;
	vertical-align:middle;
	text-align:center;
	border-color: #d6e9c6;
	background-color: #dff0d8;
	color: #3c763d;
}

[id="flow"] .panel dl {
	margin-bottom:0;
}
[id="flow"] .panel dt {
	margin-top:20px;
	margin-bottom:10px;
	padding-bottom:5px;
	border-bottom:2px solid #e3e3e3;
}
[id="flow"] .panel dt:first-child {
	margin-top:0;
}
[id="flow"] .panel-heading span {
	margin-right:5px;
	position:relative;
	top:-2px;
}
/*料金について*/
[id="price"] .container {
	width:100%;
	margin-bottom:30px;
}
.iconok {
	font-size: 27px;
	color: green;
}
.iconno {
	font-size: 27px;
	color: rgb(221, 41, 41);
}
.theader {
	text-align: center;
}
.ptitle {
	font-size: 22px;
	font-weight: bold;
	margin: 7px;
}
.pprice {
	font-size: 17px;
	font-weight: bold;
	padding: 10px;
}
.pprice span {
	font-family:Arial, Helvetica, sans-serif;
	font-size:28px;
}
.cfeature {
	padding: 10px;
	font-weight: bold;
}
.feature {
	margin-bottom: 3px;
}
.infos {
	background: #eaeaea;
}
.free {
	background: #DFF0D8;
}
.theader.free {
	background: #DFF0D8;
	border-bottom: 3px solid #f3f3f3;
}
.standard {
	background: #D9EDF7;
}
.theader.standard {
	background: #D9EDF7;
	border-bottom: 3px solid #f3f3f3;
}
.premium {
	background: #f2dede;
}
.theader.premium {
	background: #f2dede;
	border-bottom: 3px solid #f3f3f3;
}
.ccfreature {
	text-align: center;
	font-size: 2em;
}
.ccfreature span {
	font-size:100%;
}

/*よくある御質問・お問い合わせへのリンクスペース*/
.contactLinkTitle {
	margin-bottom:40px;
	padding:15px 0;
	border-top:1px solid #666;
	border-bottom:1px solid #666;
	text-align:center;
	font-size:18px;
	letter-spacing:2px;
}
.contactLinkArea {
	display:block;
	padding:15px;
	border-radius:4px;
	color:#1b1b1b;
}
.contactLinkArea:hover .media-object {
	-webkit-animation: contactLink 0.5s 1; /* Safari 4+ */
	-moz-animation:    contactLink 0.5s 1; /* Fx 5+ */
	-o-animation:      contactLink 0.5s 1; /* Opera 12+ */
	 animation:        contactLink 0.5s 1; /* IE 10+ */
}
@-webkit-keyframes contactLink {
    0%   {   -webkit-transform:scale(1); }
    50%   {  -webkit-transform:scale(1.2); }
    100%   { -webkit-transform:scale(1); }
}
@-moz-keyframes contactLink {
    0%   {   -moz-transform:scale(1); }
    50%   {  -moz-transform:scale(1.2); }
    100%   { -moz-transform:scale(1); }
}
@-o-keyframes contactLink {
    0%   {   -o-transform:scale(1); }
    50%   {  -o-transform:scale(1.2); }
    100%   { -o-transform:scale(1); }
}
@keyframes contactLink {
    0%   {   transform:scale(1); }
    50%   {  transform:scale(1.2); }
    100%   { transform:scale(1); }
}

.contactLinkArea:link,
.contactLinkArea:visited {
	background-color:#e3e3e3;
}
.contactLinkArea:hover,
.contactLinkArea:active {
	color:#008c87;
	background-color:#dff0d8;
	text-decoration:none;
}
.contactLinkArea .media-left {
	padding-right:20px;
}
.contactLinkArea .media-heading {
	margin-bottom:10px;
	font-weight:bold;
	font-size:18px;
	letter-spacing:1px;
}
.contactLinkArea .media, .media-body {
	overflow:visible;
}

/*よくあるご質問*/
.faq .panel-body .row > div:nth-child(2n+1) {
	clear:both;
}
.faq .panel-body h5 {
	margin-top:30px;
	padding-bottom:5px;
	border-bottom:3px solid #e3e3e3;
	font-size:16px;
}
.faq .panel-body .row > div:first-child h5 {
	margin-top:10px;
}

/*メールフォーム*/
.formConfirm dt {
	clear:left;
	float:left;
	width:180px;
	padding:15px;
	background-color:rgba(0,0,0,.08);
}
.formConfirm dd {
	margin:0 0 2px 182px;
	padding:15px;
	background-color:rgba(0,0,0,.02);
}
.formConfirm .error {
	color:#b35b59;
}
.confirmBtn {
	margin-bottom:20px;
}
.confirmBtn .btn {
	margin:10px 20px;
}
.wtn_copyright { display:none; }

/*文字サイズ*/
.fontsize-s { font-size:85%; }

/*余白*/
.mgn-t-0 { margin-top:0 !important; }
.mgn-t-xs { margin-top:10px !important; }
.mgn-t-s { margin-top:20px !important; }
.mgn-t-m { margin-top:30px !important; }
.mgn-t-l { margin-top:40px !important; }
.mgn-b-0 { margin-bottom:0 !important; }
.mgn-b-xs { margin-bottom:10px !important; }
.mgn-b-s { margin-bottom:20px !important; }
.mgn-b-m { margin-bottom:30px !important; }
.mgn-b-l { margin-bottom:40px !important; }

/*リンク エフェクト*/
a.btn,
[id="pagetop"] a,
.linkInPage a.list-group-item,
.flowOrder li a,
.flowOrder li a:before,
.flowOrder li a:after,
.contactLinkArea,
[id="footer"] ul> li a {
	transition-property: .2s ease-in-out 0s;
		-moz-transition: .2s ease-in-out 0s;
		-webkit-transition: .2s ease-in-out 0s;
		-o-transition: .2s ease-in-out 0s;
}


/*Bootstrap スタイル上書き*/
.btn { border-radius: 3px; }

@media (min-width:768px) and (max-width:991px) {
/*キャッチ画像*/
[id="catch"] h1 {
	padding-right:200px;
	line-height:30px;
}
[id="catch"] h1 > span {
	display:inline-block;
	margin:5px 0;
	padding:5px 5px 0 5px;
	background-color:rgba(0,0,0,.6);
}
.catchImg img {
	max-width:375px;
	height:auto;
}
.catchBtn {
	width:350px;
}
/*ページ内リンク*/
.linkInPage .media-object {
	width:36px;
	height:auto;
}
/*特長*/
.feature-catch {
	font-size:120%;
}
}
@media (min-width:992px) {
/*キャッチ画像*/
[id="catch"] h1 {
	padding-right:320px;
}
.catchImg img {
	max-width:400px;
	height:auto;
}
.catchBtn {
	width:560px;
}
/*特長*/
.feature-catch {
	font-size:130%;
}
/*料金について*/
.infos {
	text-align:right;
}
/*よくあるご質問*/
.faq .panel-body h5 {
	margin-top:10px;
}
.faq .panel-body .row > div:first-child h5 {
	margin-top:10px;
}

}
@media (min-width:1200px) {
/*キャッチ画像*/
[id="catch"] h1 {
	padding-right:520px;
}
.catchImg img {
	max-width:560px;
	height:auto;
}
.catchBtn {
	width:640px;
}
/*バナースペース*/
.bnrArea .container{
	text-align:left;
}
}
@media (max-width:767px){
[id="wrapper"] {
	padding-top:80px;
}	
.section {
	padding:15px 0;
}
	
/*ヘッダー*/
[id="header"] {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:999;
}

/*ナビゲーション*/
[id="navi"] {
	float:none;
	margin:0 -30px !important;
	position:relative;
	top:-1px;
	z-index:9;
}
[id="navi"] ul {
	width:100%;
	height:auto;
}
[id="navi"] ul > li {
	float:none;
	padding-top:0;
}
[id="navi"] ul > li a {
	display:block;
	padding:15px 15px;
	border-left:none;
	border-top:1px solid rgba(256,256,256,.05);
	border-bottom:1px solid rgba(0,0,0,.15);
	background-color:#333;
	font-size:14px;
}
/*ページトップ*/
[id="pagetop"] {
	bottom:30px;
	right:20px;
}
/*フッター*/
[id="footer"] ul> li,
[id="footer"] ul> li a {
	display:block;
}
[id="footer"] ul {
}
[id="footer"] ul> li {
	margin-bottom:2px;
	padding:0;
	border:none;
	font-size:100%;
}
[id="footer"] ul> li a {
	padding:15px 15px 15px 40px;
	background-color:#f3f3f3;
	color:#333;
	text-align:left;
	position:relative;
}
[id="footer"] ul> li a:before {
	position:absolute;
	top:50%;
	left:10px;
	display:inline-block;
	width:20px;
	height:20px;
	line-height:20px;
	margin-top:-10px;
	text-align:center;
	font-family:'Glyphicons Halflings';
	content:"\e029";
}
[id="footer"] ul> li:first-child a {
	border-radius:4px 4px 0 0;
}
[id="footer"] ul> li:last-child a {
	border-radius:0 0 4px 4px;
}
[id="footer"] ul> li a:hover {
	background-color:#fcfcfc;
}

/*見出し*/
.ctsTitle {
	position:relative;
	margin:40px 0 20px;
	padding-top:10px;
}
.pageTitle.ctsTitle {
	padding-top:0;
	margin:40px 0;
}

/*キャッチ画像*/
[id="particles-js"] {
	height:100%;
}
[id="catch"] h1 {
	padding-right:0;
	line-height:1.4;
}
[id="catch"] .container {
	min-height:0;
}
.catchImg {
	position:static;
	text-align:center;
}
.catchImg img {
	max-width:100%;
	height:auto;
}
.catchBtn {
	width:100%;
}
.catchBtn .btn {
	width:100%;
	margin-bottom:10px;
}
[id="catch"] h1 > span {
	display:inline;
}
[id="catch"] h1 strong {
	font-size:inherit;
	font-weight:bold;
}
/*バナースペース*/
.bnrArea .container {
	margin-top:0;
}
/*特長*/
.feature-catch {
	text-align:left;
}
/*ご利用の流れ*/
.flowStep {
	padding-bottom:10px;
}
/*料金について*/
.ptitle {
	font-size: 100%;
}
.pprice span {
	font-size:85%;
}
/**/
.contactLinkArea {
	margin-top:10px;
}
.contactLinkArea .media-object {
	width:42px;
	height:auto;
}
.contactLinkTitle {
	margin-bottom:20px;
}
/*よくあるご質問*/
.faq .title01 {
	margin-top:60px;
}
/*メールフォーム*/
.formConfirm dt {
	float:none;
	width:inherit;
	margin-bottom:2px;
}
.formConfirm dd {
	margin:0 0 10px 0;
}
.confirmBtn .btn {
	display:block;
	width:100%;
	margin:10px 0;
}

}