@charset "utf-8";
body {
}
/*ヘッダー*/
#header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 81px;
	z-index: 100;
	background-color: rgba(0,0,0,0.68);
}
#header .inner{
	position: relative;
}
#header .logo{
	float: left;
	line-height: 74px;
	padding-left: 10px;
}
#header .g_nav{
	float: right;
	padding-right: 140px;
}
#header #nav-toggle{
	float: right;
	line-height: 74px;
}
#header .g_nav li{
	float: left;
	padding-left: 30px;
	line-height: 74px;
	color: #fff;
}
#header .g_nav a{
	font-size: 12px;
	font-size: 1.2rem;
	color: #FFFFFF;

}
#header .to_form a{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: 81px;
	line-height: 74px;
	padding: 0px;
	font-size: 14px;
	font-size: 1.4rem;
	background: url(../img/mail_icon.png) no-repeat center center;
	background-color: #d4ce26;
	color: #fff;
}
.sp_menu{
	position: absolute;
    display: block;
    width: 100%;
	top: 72px;
    background: rgba(0,0,0,0.88);
	text-align:left;
    z-index: 100;
}
.sp_menu ul li {
	padding:20px;
	border-bottom: dotted 1px #fff;
}
.sp_menu ul li a{
	color: #fff;
	display: inline-block;
	width: 100%;
}
/*メインビジュアル*/
/*↓動画用に修正*/
.main_visual .key01{
	padding: 0;
	/*background: url(../img/01.jpg) no-repeat center center;
	background-size: cover;*/
	text-align: center;
	overflow: hidden;
	width: 100%;
	width: 100vw;
	min-height: 900px;
	height: 100%;
	height: 100vh;
}
/*↓動画用に追加*/
.main_visual .key01 .inner{
	position: absolute;
	z-index: 2;
	padding: 200px 0 60px 0;
	width: 100%;
  text-align: center;
}
/*↓動画用に追加*/
.main_visual .key01 video{
	position: relative;
	display: block;
	z-index: 1;
	padding: 0;
	width: 200vw;
  left: -webkit-calc((200vw - 100vw)/-2);
  left: calc((200vw - 100vw)/-2);
  top: -webkit-calc((200vw - 100vh)/-2 + 30vw);
  top: calc((200vw - 100vh)/-2 + 40vw);
}

.main_visual .key01 p.fc_key{
	color: #36c7c3;
	font-weight: 600;
}
.main_visual .key01 .link01{
	margin-top: 70px;
}
.main_visual .key01 .link02{
	margin-top: 15px;
}
.main_visual .key02{
	position: relative;
}
.main_visual .key02:after {
	content: '';
	margin-left: -150px;
	position: absolute;
	left: 50%;
}
.main_visual .key02 .inner{
	position: relative;
}
.main_visual .key02 .txt01{
	position: absolute;
	top: -380px;
	right: 0;
}
.main_visual .key02 .txt02{
	padding: 130px 0 50px;
	text-align: center;
	color: #fff;
	font-size: 30px;
	font-size: 3rem;
	font-weight: 600;
}
.main_visual .key02 .txt02 span{
	font-size: 40px;
	font-size: 4rem;
	color: #fce519;
	font-weight: 600;
}
/*フッター*/
#footer_nav{
	background-color:#F0E92C;
	font-size: 12px;
	font-size: 1.2rem;
	padding: 20px;

}
.foot_nav{
	float: left;
	padding: 20px;

}
.foot_nav li{
	margin-bottom: 4px;

}
.pull-right{
	text-align: center;
	background-color: #000000;

}
#footer{
	padding: 10px 0;
	background-color: #000000;
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
	text-align: center;
}
#footer .foot_info{
	display: inline-block;
}
#footer .foot_nav{
	float: right;
}
#footer .foot_nav ul li{
	display: inline-block;
}
#footer .foot_nav ul li + li{
	padding-left: 16px;
	margin-left: 10px;
	background: url(../img/foot_nav_border.png) no-repeat left center;
}
#footer .foot_nav ul li a{
	color: #fff;
}
.copyright{
	margin-top: 10px;
}
/*共通*/

h3 {
	margin-bottom: 10px;
	/*font-size: 3px;*/
	font-size: 5rem;
	font-weight: 700;
	color: #FFFFFF;
}

h4{
	font-size:1.8rem;
	color: #FFFFFF;

}

p{
	color: #FFFFFF;
	font-size: 14px;
}

.title{
	font-size: 18px;
	font-weight: 500;
	position: relative;
    padding-bottom: .5em;
    border-bottom: 4px solid #ccc;

}

.title::after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #d4ce26;
}

.box{
	margin-bottom: 70px;
}
.box .tit01{
	text-align: center;
	font-size: 40px;
	font-size: 4rem;
	color: #36c7c3;
	font-weight: 600;
}
.box .tit01 .fc_key{
	color: #e94b41;
	font-weight: 600;
}
.box .tit02{
	text-align: center;
	font-size: 24px;
	font-size: 2.4rem;
	color: #e94b41;
	font-weight: 600;
}
.box .tit03{
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: 600;
}
.box .tit04{
	text-align: center;
	font-size: 30px;
	font-size: 3rem;
	font-weight: 600;
}
.box .tit05{
	text-align: center;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: 600;
}
.box .text_area p{
	margin-bottom: 30px;
}
.box .text_area .linear {
  background: linear-gradient(transparent 60%, #fce519 0%);
}
.box .text_area .bold{
	font-weight: 600;
}
.box .border{
	height: 6px;
	width: 100%;
	margin-bottom: 70px;
	background: url(../img/border01.png) no-repeat center center;
}
.download{
	padding: 45px 0;
	background-color: #36c7c3;
	text-align: center;
}
ul.indent_list li{
	padding-left:1em;
	text-indent:-1em;
	margin-bottom: 10px;
}
.scroll_box{
	max-width: 470px;
	width: 100%;
	height: 100px;
	margin: 0 auto 30px;
	overflow: scroll;
	border: solid 1px #b5b5b5;
	padding: 3px 20px;
}
.scroll_box ul li{
	font-size: 12px;
	font-size: 1.2rem;
	margin-bottom: 0;
}
/*3カラム*/
.col_3{
	float: left;
	width : 33.33333% ;
	width : -webkit-calc(100% / 3) ;
	width : calc(100% / 3) ;
	padding: 0 20px;
}
/*テーブル*/
.table{
	color: #FFFFFF;
	font-weight: 100%;
	font-size: 14px;
	font-size: 1.4rem;
	table-layout:fixed;
	margin-bottom: 30px;
	border:none;

}
.table th, .table td{
	border: 1px solid #ddd;
	border-bottom:solid 1px silver;
}
.table td:first-child {
    border-right:solid 1px silver;
}
.company_table{
	color: #FFFFFF;
	font-weight: 100%;
	font-size: 14px;
	font-size: 1.4rem;
	table-layout:fixed;

}
.company_table th, .company_table td{
	/*padding: 10px;*/
	border: 1px solid #ddd;
}
.cmn_table {
	width: 100%;
	border-collapse: collapse;
}
.cmn_table th, .cmn_table td {
	width : 33.33333%;
	width : -webkit-calc(100% / 3);
	width : calc(100% / 3);
	padding: 5px;
	border: 2px solid #b5b5b5;
	text-align: center;
	font-weight: 600;
}
.cmn_table .table_head th{
	background-color: #36c7c3;
	color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
}
.cmn_table .table_head th .sub_tit{
	font-weight: 500;
	font-size: 16px;
	font-size: 1.6rem;
}
.cmn_table .table_head th.on{
	background-color: #279390;
}
.cmn_table tr:nth-child(odd) {
	background: #ededed;
}
.cmn_table td.possible{
	color: #e94b41;
}
.cmn_table .recommend{
	position: relative;
}
.cmn_table .recommend .pin{
	position: absolute;
	top: -35px;
	left: 0;
	right: 0;
	width: 100%;
	text-align: center
}
/*こんな方にオススメです*/
.box .list_box01{
	border: solid 8px #36c7c3;
	padding: 40px 58px;
}
.box .list_box01 ul li{
	background: url(../img/sec2_icon.png) no-repeat left 5px;
	padding-left: 20px;
	font-weight: 600;
}
.box .list_box01 ul li + li{
	margin-top: 15px;
}
/*料金プラン*/
.plan_table{
	table-layout: fixed;
}
.plan_table tr,
.plan_table tr:nth-child(odd) {
	background: #f5f5f5;
}
.plan_table th,
.plan_table td {
	padding: 20px 15px;
}
.plan_table td .line{
	text-decoration: line-through;
	font-weight: 600;
}
.plan_table td .price{
	font-weight: 600;
	font-size: 24px;
	font-size: 2.4rem;
}
.plan_table td .discount{
	color: #e94b41;
	font-weight: 600;
	margin-bottom: 20px;
}
.plan_table tr.last td{
	position: relative;
	padding-bottom: 100px;
}
.plan_table tr.last td .to_form{
	position: absolute;
	bottom: 20px;
	width: 100%;
    left: 0;
    right: 0;
    padding: 0 20px;
	text-align: center;
}
.plan_table tr.last td ul li{
	float: left;
	width: 50%;
	text-align: left;
	font-size: 14px;
	font-size: 1.4rem;
}
/*ブログ集客を次のステージへ*/
.next_stage{
	padding: 70px 0 10px;
	background-color: #fce519;
}
/*サービスの流れ*/
#flow{
	padding-top: 76px;
}
.flow_list ul li{
	position: relative;
	float: left;
	width: 20%;
	padding: 0 10px;
}
.flow_list ul li .arrow{
	position: absolute;
	top: 60px;
	right: -6px;
}
.flow_list ul li dl{
	min-height: 144px;
	border: solid 2px #cfcfcf;
}
.flow_list ul li dl dt{
	padding: 3px;
	background-color: #fce519;
	font-weight: 600;
}
.flow_list ul li dl dd{
	padding: 5px;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: 600;
}
/*Youtube*/
.movie-wrap {
	text-align: center;
	padding-top: 76px;
	margin-bottom: 70px;
}
/*お問い合わせフォーム*/
.form_table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 40px;
}
.form_table th, .form_table td {
	padding: 5px;
	border: 2px solid #b5b5b5;
	text-align: left;
}
.form_table th{
	vertical-align: top;
	padding: 15px 20px 15px 40px;
	background-color: #f5f5f5;
	width: 40%;
}
.form_table td{
	padding: 10px 30px 10px 20px;
	width: 60%;
}
.equired{
	display: block;
	padding: 2px 8px;
	float: right;
	background-color: #e94b41;
	color: #fff;
	font-size: 12px;
	font-size: 1.2rem;
}
input[type=email],
input[type=text],
input[type=tel]{
	border:#b5b5b5 1px solid;
	width:100%;
	height:30px;
	padding:0 5px;
	font-size: 16px;
	font-size: 1.6rem;
}
textarea {
	border:#b5b5b5 1px solid;
	width:100%;
	height: 15em;
	resize: vertical;
	padding:5px;
	font-size: 16px;
	font-size: 1.6rem;
}
input#image-btn{
	cursor: pointer;
	display: block;
	width: 244px;
	height: 46px;
	border: none;
	text-indent: -9999px;
	margin: 0 auto;
	background: url(../img/submitbtn.png) no-repeat 0 0;
}
@media (min-width: 768px) {
	/*共通*/
	 .box .text_area{
		padding: 0 80px;
	}
}
@media (min-width: 992px) {
}
@media (min-width: 1220px) {
	/*ヘッダー*/
	.g_nav,
	#header .to_form{
		display: block;
	}
	.sp_menu,
	#nav-toggle{
		display: none;
	}
}
@media (max-width: 1219px) {
	/*ヘッダー*/
	.g_nav,
	#header .to_form{
		display: none;
	}
	.sp_menu,
	#nav-toggle{
		display: block;
	}
	/*メインビジュアル*/
	/*↓動画用に修正*/
	.main_visual .key01{
		/*padding: 124px 0 280px;*/
	}
}
@media (max-width: 991px) {
	/*↓動画用に追加*/
	/*メインビジュアル*/
	.main_visual .key01{
		padding: 0;
		background: url(../img/01.jpg) no-repeat center center;
		background-size: cover;
		text-align: center;
	}
	/*↓動画用に追加*/
	.main_visual .key01 .inner {
    position: static;
    padding: 200px 0 60px 0;
    width: 100%;
    text-align: center;
	}
	/*↓動画用に追加*/
	/*カンパニー*/
	#company_policy {
	    margin-top: 0;
	}
	/*Youtube*/
	.movie-wrap {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 30px;
		height: 0;
		overflow: hidden;
	}
	/*Youtube*/
	.movie-wrap iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	/*お問い合わせフォーム*/
	.form_table th {
		padding: 10px 20px 15px 10px;
	}
}
@media screen and (max-width: 767px) {
	h3 {
	    margin-bottom: 10px;
	    font-size: 2.5px;
	    font-size: 2.5rem;
	    font-weight: 700;
	    color: #FFFFFF;
	}
	.overlay{
		background-size: cover;
	    background-position: center;
		height: 100%;
		width: 100%;
	    background-attachment: fixed;
		background-color:rgba(0,0,0,0.65);
	}
	.company_table th, .company_table td{
	padding: 10px;
	border: 1px solid #ddd;
	}
	.company_table th{

	}

	.company_table th, .company_table td{
		width: 100%;
		display: block;
		border-top: none;
	}
	#company table.table td a {
	 color: #FFFFFF;
	 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 #recruit p a {
	color: #FFFFFF;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

	/*メインビジュアル*/
	.main_visual .key02 .txt01{
		top: -205px;
	}
	.main_visual .key01 p.fc_key{
		font-size: 24px;
		font-size: 2.4rem;
	}
	.main_visual .key01{
		padding: 0;
		text-align: center;
	}
	.main_visual .key02 .txt02 span{
		font-size: 30px;
		font-size: 3rem;
	}
	.main_visual .key02 .txt02{
		font-size: 24px;
		font-size: 2.4rem;
	}
	.main_visual .key01 .link01 {
		margin-top: 30px;
	}
	.main_visual .key02{
		margin-bottom: 50px;
	}
	.main_visual .key02:after {
		border-top: 32px solid #36c7c3;
		border-right: 80px solid transparent;
		border-left: 80px solid transparent;
		margin-left: -80px;
	}
	/*3カラム*/
	.col_3{
		float: none;
		width : 100% ;
		margin-bottom: 30px;
	}
	/*サービスの流れ*/
	.flow_list ul li{
		width: 50%;
		margin-bottom: 20px
	}
	/*料金プラン*/
	.plan_table{
		width: 100%;
		min-width: 800px;
		table-layout: fixed;
	}
	.cmn_table .recommend .pin{
		position: static;
		margin-bottom: 5px;
	}
	.scroll{
		overflow-x: auto;
	}
	/*お問い合わせフォーム*/
	.form_table th,
    .form_table td{
		width: 100%;
		display: block;
		border-top: none;
    }
	.form_table tr:first-child th { border-top: 2px solid #b5b5b5; }
	/*フッター*/
	#footer .foot_nav{
		float:none;
		margin: 20px 0;
	}
	/*共通*/
	.box{
		margin-bottom: 40px;
	}
	.box .tit01{
		font-size: 30px;
		font-size: 3rem;
	}
	.box .tit02{
		font-size: 18px;
		font-size: 1.8rem;
	}
	.box .tit03{
		font-size: 16px;
		font-size: 1.6rem;
	}
	.box .tit04{
		font-size: 24px;
		font-size: 2.4rem;
	}
	.box .tit05{
		font-size: 14px;
		font-size: 1.4rem;
	}
	.box .list_box01{
		padding: 20px;
	}
}
/*レイアウト*/
/*01*/
#company_policy{
	background: url(../img/10.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	color: #222222;
}
#company_policy .overlay{
	height: 100%;
	background-attachment: fixed;
	padding: 10% 5% 30% 5%;
}
/*02*/
#business{
	background: url(../img/07.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	color: #222222;
}
#business .overlay{
	height: 100%;
	background-attachment: fixed;
	padding: 10% 5% 30% 5%;
}
/*03*/
#works{
	background: url(../img/works_bg.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
}
#works .overlay{
	height: 100%;
	background-attachment: fixed;
	padding: 10% 5% 30% 5%;
}

.come{
	font-family: "font-family:Helvetica,Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic,“ヒラギノ角ゴ ProN W3″,“Hiragino Kaku Gothic ProN”, “メイリオ”,Meiryo, sans-serif";
	font-weight: normal;
	margin-top: 10px;
	margin-bottom: 20px;
	padding: 20 0 20 0;
}

#works .col-md-4{
	padding-bottom: 10px;
}

.space{
	padding: 10%;
}
/*04*/
#company{
	background: url(../img/company_bg.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	color: #222222;
}
#company .overlay{
	height: 100%;
	background-attachment: fixed;
	padding: 10% 5% 30% 5%;
}
/*05*/
#recruit{
	background: url(../img/recruit_bg.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	color: #222222;
}
#recruit .overlay{
	height: 100%;
	background-attachment: fixed;
	padding: 10% 5% 60% 5%;
}

/*06*/
#access{
	background: url(../img/access_bg.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	color: #222222;
}

#access .overlay{
	height: 100%;
	/*height: 1500px;*/
	background-attachment: fixed;
	padding: 10% 5% 35% 5%;
}

.access{
	padding: 5% 0 0

}



.section-title_left{
	float: left;

}
/*07*/
#foot_facebook{
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	color: #222222;
}
#foot_facebook .mb5{
	text-align: center;
	padding-bottom: 20px;

}
.facebook{
	text-align: center;

}
.foot{
	color: #000000;
	text-align: center;

}

#foot_facebook .overlay_0{
	height: 100%;
	padding: 10% ;
}
/*　ページトップ　*/

#pageTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

#pageTop a {
  display: block;
  z-index: 999;
  padding: 60px 0 0 60px;
  border-radius: 30px;
  width: 35px;
  height: 35px;
	background-image: url(../img/page_top.png);
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  text-align: center;
}

#pageTop a:hover {
  text-decoration: none;
  opacity: 0.7;
}
#contact{
	padding-top: 30px;
	background-color: #000000;

}

/*　ローディング画面　*/

/*#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}
*/