/************************************************************/
/************************************************************/
/*共通パーツ
/************************************************************/
/************************************************************/
html{}

body {
	width:100%;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;	
}

input,textarea,select,button {
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

/*画像リンク*/
a img:hover{animation: flash 1s;}


/*基本非表示*/
.none{display:none}


:placeholder-shown {color:#BFBFBF;}
::-webkit-input-placeholder {color:#BFBFBF;}
:-moz-placeholder {color:#BFBFBF; opacity:1;}
::-moz-placeholder {color:#BFBFBF; opacity:1;}
:-ms-input-placeholder {color:#BFBFBF;}
	
/*基本ボタン*/
.btn          {text-align:left;}
.btn-is-center{text-align:center}
.btn-is-right {text-align:right}

#wpmem_login .buttons,
#wpmem_reg .buttons,
.btn a,
.btn input[type="submit"]{
	display: inline-block;
	height:50px;
	line-height:50px;
	padding:0 80px;
	margin:0 auto;
	border-radius: 3px;
	box-sizing:border-box;
	font-size:13px;
	font-weight:bold;
	border: 1px solid #3F3F3F;
	background:#3F3F3F;
	color:#FFF;
	text-decoration:none;
}
#wpmem_login .buttons:hover,
#wpmem_reg .buttons:hover,
.btn a:hover,
.btn.current a,
.btn input[type="submit"]:hover{
	background:transparent;
	border: 1px solid #325A8C;
	color: #325A8C;
	/* transition: 0.2s; */
}

/*基本ボタンREDバージョン*/
.btn-is-red a{
	background:#B82C2C;
	border: 1px solid #B82C2C;
}
/*基本ボタンREDバージョン2(hoverホワイト)*/
.btn-is-red2 a{
	background:#B82C2C;
	border: 1px solid #B82C2C;
}
.btn-is-red2 a:hover{
	background:transparent;
	border: 1px solid #fff;
	color: #fff;
	transition: 0.2s;
}

/*基本ボタンダウンロードバージョン*/
.btn-is-download a{
	width:200px;
	height:auto;
	line-height:1.5;
	padding:10px 20px;
	font-weight:normal;
	text-align:center;
	margin-bottom:10px;
}
.btn-is-download a.big{
	font-weight:bold;
	background:#B82C2C;
	border: 1px solid #B82C2C;
}
.btn-is-download a.big:hover{
	background:transparent;
	border: 1px solid #B82C2C;
	color: #B82C2C;
	transition: 0.2s;
}

.btn-is-download a span{
	display:block;
	font-size:9px;
}





/*基本ボタンクリアバージョン*/
.btn-is-clear a{
	position: relative;
	overflow: hidden;
	background:rgba(0, 0, 0, 0.62);
/* 	background:#0f0f0f; */
	color:#fff;
/* 	border:#fff solid 1px; */
/* 	box-shadow:1px 1px 1px #3F3F3F inset,1px 1px 1px #3F3F3F; */
	z-index: 2;
	transition: 0.2s;
}
.btn-is-clear a:hover {
/* 	border:#fff solid 1px; */
	border:#151414 solid 1px;
	color: #fff;
/* 	text-shadow: 1px 1px 1px #000000; */
	transition: 0.2s;
	background:#0f0f0f; 
}
.btn-is-clear a::after {
	content: '';
	position: absolute;
	top: -100%;
	left: -100%;
	width: 100%;
	height: 100%;
	z-index: -1;
}
.btn-is-clear a:hover::after {
	top: 0;
	left: 0;
	background-color: #fff;
	background-color: #1e1c1bc9;
	box-shadow:1px 1px 1px #3F3F3F;
	transition: 0.2s;
}

/*基本マージンボトム(ブロックエリアでのみ使用)*/
.mb-is-0  {margin-bottom:0    !important;}
.mb-is-10 {margin-bottom:10px !important;}
.mb-is-20 {margin-bottom:20px !important;}
.mb-is-30 {margin-bottom:30px !important;}
.mb-is-40 {margin-bottom:40px !important;}
.mb-is-60 {margin-bottom:60px !important;}
.mb-is-80 {margin-bottom:80px !important;}
.mb-is-100{margin-bottom:100px!important;}


/*基本フォントカラー(ブロックエリアでのみ使用)*/
.c-is-white{color:#ffffff !important;}
.c-is-light{color:#D8D8D8 !important;}
.c-is-gray {color:#7F7F7F !important;}
.c-is-dark {color:#3F3F3F !important;}
.c-is-red  {color:#B92C2C !important;}
.c-is-pink {color:#DB4984 !important;}
.c-is-green{color:#37684E !important;}
.c-is-blue {color:#325A8C !important;}
.c-is-wordpress{color:#B92C2C !important;}
.c-is-seo      {color:#DB4984 !important;}
.c-is-idea_material{color:#FABE00 !important;}
.c-is-marketing{color:#325A8C !important;}
.c-is-coding   {color:#534970 !important;}
.c-is-design   {color:#248696 !important;}


/*基本背景カラー(ブロックエリアでのみ使用)*/
.bgc-is-red  {background:#B92C2C !important;}
.bgc-is-pink {background:#DB4984 !important;}
.bgc-is-green{background:#37684E !important;}
.bgc-is-blue {background:#325A8C !important;}
.bgc-is-wordpress{background:#B92C2C !important;}
.bgc-is-seo      {background:#DB4984 !important;}
.bgc-is-idea_material{background:#FABE00 !important;}
.bgc-is-marketing{background:#325A8C !important;}
.bgc-is-coding   {background:#534970 !important;}
.bgc-is-design   {background:#248696 !important;}



/*マウスオーバーフラッシュ*/
@keyframes flash {
0%  {opacity: 0.5;}
100%{opacity: 1.0;}
}


/************************************************************/
.key {
	position: relative;
	width:100%;
	text-align:center;
}
.key-is-top {/* background: url(../img/top/key_top02.jpg) no-repeat center bottom fixed; */background-size: cover;height: auto;min-height: 50vh;z-index:2;}
.key-is-about {
	background: url(../img/about/key_about.jpg) no-repeat center bottom fixed;
	background-size: cover;
    height: 400px;
	z-index:2;
}
.key-is-service {
    height: 400px;
	z-index:2;
}
.key-is-service-is-homepage  {background: url(../img/service/key_serviceHomepage.jpg) no-repeat center bottom fixed;background-size: cover;}
.key-is-service-is-marketing {background: url(../img/service/key_serviceMarketing.jpg) no-repeat center bottom fixed;background-size: cover;}
.key-is-service-is-seo       {background: url(../img/service/key_serviceSeo.jpg) no-repeat center bottom fixed;background-size: cover;}
.key-is-service-is-consulting{background: url(../img/service/key_serviceConsulting.jpg) no-repeat bottom center fixed;background-size: cover;}
.key-is-service-is-logo      {background: url(../img/service/key_serviceLogo.jpg) no-repeat center bottom fixed;background-size: cover;}
.key-is-wptheme {
	background: url(../img/wptheme/key_wptheme.jpg) no-repeat center center;
	background-size: cover;
    height: 200px;
	z-index:2;
}
.key-is-works {
	background: url(../img/works/key_works.jpg) no-repeat center center;
	background-size: cover;
    height: 200px;
	z-index:2;
}
.key-is-news {
	background:#EFEFEF;
    height: 200px;
}
.key-is-contact {
	background: url(../img/contact/key_contact.jpg) no-repeat center center;
	background-size: cover;
    height: 200px;
	z-index:2;
}

.key-is-blog {
	background: url(../img/blog/key_blog.jpg) no-repeat center bottom fixed;
	background-size: cover;
    height: 400px;
	z-index:2;
}

.key-is-blog::after{
	background-color: rgba(0,0,0,.25);
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:50px;
	content:'';
	z-index:-1;
}

.key-is-top::after,
.key-is-about::after,
.key-is-service::after,
.key-is-wptheme::after,
.key-is-works::after,
.key-is-contact::after{
	/* background-color: rgba(0,0,0,.25); */
	/* background-image: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%); */
	/* background-size: 2px 2px; */
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	content:'';
	z-index:-1;
}


/*キービジュアルの内枠(ブログでは不使用)*/
.key__inner{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 200px;
	left: 0;
	margin: auto;
	width: 1000px;
	height:auto;
	text-align:center;
}
.key-is-top .key__inner{/* height: 300px; */}
.key-is-news .key__inner{height:50px;}
.key-is-about .key__inner,
.key-is-service .key__inner{height:120px;}
.key-is-wptheme .key__inner,
.key-is-works .key__inner,
.key-is-contact .key__inner{height:70px;}



.key__subtitle{
/*	position: relative;
	font-family: 'Anton';*/
	font-size:70px;
	letter-spacing:2px;
	text-shadow: 1px 1px 1px #000000;
	margin-bottom:30px;
	color: #ffffff;
}

.key-is-top .key__subtitle{font-size: 2.3rem;}
.key-is-blog .key__subtitle{margin-top:116px;}
.key-is-blog .key__subtitle a{ text-decoration:none}


.key__title{/*	font-family: "Sawarabi Mincho";*/transform: rotate(0.001deg);font-size: 2.2rem;font-weight: normal;letter-spacing:2px;color:#ffffff;text-shadow: 1px 1px 1px #000000;margin-bottom:50px;}
.key-is-blog .key__title{margin-bottom:40px;}

.txtNewyear {position: absolute;top: -110px;right: 10%;left: 10%;font-size:2.2em;border-bottom:1px solid #fff;color: #fff;}
.txtNewyear span {font-size:0.8; color:#fff}

@media screen and (max-width: 719px) {
	.txtNewyear {font-size:1.1em;}
}


/*ナビエリア(トップページ専用)*/
.key-is-top .key__navi{
	/* margin: 10% auto; */
	/* margin-bottom:50px; */
	width:100%;
	/* height: 200px; */
	position: absolute;
	top: 80%;
}
.key-is-top .key__navi .btn{
	float:left;
	width:235px;
	text-align:center;
	margin-right:20px;
	text-shadow: 1px 1px 1px #000000;
}
.key-is-top .key__navi .btn:last-child{margin-right:0;}
.key-is-top .key__navi .btn a{
	display:block;
	font-size: 1.2rem;
    padding: 0;
    color: #fff;
	}



/*ナビエリア(ブログ専用)*/
.key-is-blog .key__navi{
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	height:50px;
	line-height:50px;
}

/*トグル設定*/
.key-is-blog .key__navi #key__toggle{display: none;}
.key-is-blog .key__navi .key__toggle__switch{
	display:block;
	position: relative;
	width:100%;
	height:50px;
	line-height:50px;
	font-weight:bold;
	font-size:16px;
	color:#FFF;
	cursor:pointer;
}
.key-is-blog .key__navi .key__toggle__switch:hover{animation: flash 1s;}
.key-is-blog .key__navi .key__toggle__switch::before{
	content:"";
	display:inline-block;
	background:url(../img/blog/icon_category.svg) no-repeat;
	width:14px;
	height:14px;
	margin-right:5px;
}
.key-is-blog .key__navi .key__toggle__switch::after{
	content:"OPEN";
	display:inline-block;
	margin-left:5px;
}
.key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch::after{
	content:"CLOSE";
}
/*トグルopen*/
.key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch + ul{
	position:absolute;
	top:50px;
	left:-40px;
	width:1080px;
	height:150px;
	background-color: rgba(0,0,0,0.90);
	border-bottom:#000000 1px solid;
	transition: 0.5s;	
}
.key-is-blog .key__navi ul{
	height:0;
	overflow: hidden;
}
.key-is-blog .key__navi ul li{
	width:50%;
	height:50px;
	line-height:50px;
	float:left;
	color:#FFF;
	text-align:center;
	border-top:#3F3F3F 1px solid;
	border-bottom:#191919 1px solid;
	border-right:#191919 1px solid;
	box-sizing:border-box;
}
.key-is-blog .key__navi ul li:hover{ background:#000;}
.key-is-blog .key__navi ul li:nth-child(even) {border-left:#3F3F3F 1px solid;border-right: none;}
.key-is-blog .key__navi ul li a{text-decoration:none; display:block;}






/*テキストエリア(トップページ専用)*/
.key__text{
	font-weight:bold;
	font-size:18px;
	color:#ffffff;
	text-shadow: 1px 1px 1px #000000;
	margin-bottom: 50px;
}
.key__text b{font-size:32px;}


/*ページscrollボタン(トップページ専用)*/
.key__scroll{
	position: relative;
	display:block;
	width:40px;
	height:60px;
	top: 100%;
	margin: 10% auto;
}
.key__scroll::before{
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin:0 0 0 0;
	width: 40px;
	height: 40px;
	border:#fff solid 1px;
	border-radius: 50%;
	box-shadow:1px 1px 1px #3F3F3F inset,1px 1px 1px #3F3F3F;
	box-sizing: border-box;
}
.key__scroll::after{
    position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 14px 0 0 16px;
    width: 8px;
    height: 8px;
	border-bottom:#fff solid 1px;
	border-right:#fff solid 1px;
	transform: rotate(45deg);
	box-shadow:1px 1px 1px #3F3F3F;
}
.key__scroll:hover::before{
	background:#fff;
	box-shadow:1px 1px 1px #3F3F3F;
	transition: 0.2s;
}
.key__scroll:hover::after{
	border-bottom:#ffffff solid 1px;
	border-right:#ffffff solid 1px;
	transition: 0.2s;
}
.key__scroll span{
	display:block;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0 0 0 -5px;
    text-shadow: 1px 1px 1px #000000;
    color: #fff;
    font-size: 10px;
    width: 50px;
}

/*検索窓エリア(ブログ専用)*/
.key-is-blog .foam__blogInput{width:270px; height:30px; line-height:30px; padding:0 10px; box-sizing:border-box; }
.key-is-blog .foam__blogBtn{width:30px; height:30px; background:#3F3F3F url(../img/blog/icon_search.svg) no-repeat center center; text-indent: -9999px;}



/*=============================================================================================================================
1024px以下
====================================================*/
@media only screen and (max-width: 1024px){

	.key-is-top .key__navi {
		margin: 10% auto;
		/* margin-bottom: 50px; */
		width: 100%;
		/* height: 50px; */
	}

}

/*=============================================================================================================================
812px以下
====================================================*/
@media only screen and (max-width: 812px){

	.key-is-top {
	/*	background: url(../img/top/key_top02.jpg) no-repeat 65% bottom;*/
	background-size: cover;
	height: auto;
	min-height: 78vh;
	z-index:2;
	}


	.key-is-about {
		background: url(../img/about/key_about.jpg) no-repeat center bottom;
		background-size: cover;
		padding:60px 0 40px 0;
		z-index:2;
	}

	.key-is-service {
		padding:60px 0 40px 0;
		z-index:2;
	}

	.key-is-service-is-homepage  {background: url(../img/service/key_serviceHomepage.jpg) no-repeat center bottom;background-size: cover;}
	.key-is-service-is-marketing {background: url(../img/service/key_serviceMarketing.jpg) no-repeat center bottom;background-size: cover;}
	.key-is-service-is-seo       {background: url(../img/service/key_serviceSeo.jpg) no-repeat center bottom;background-size: cover;}
	.key-is-service-is-consulting{background: url(../img/service/key_serviceConsulting.jpg) no-repeat bottom center;background-size: cover;}
	.key-is-service-is-logo      {background: url(../img/service/key_serviceLogo.jpg) no-repeat center bottom;background-size: cover;}
	.key-is-wptheme {
		background: url(../img/wptheme/key_wptheme.jpg) no-repeat center center;
		background-size: cover;
		padding:60px 0 40px 0;
		z-index:2;
	}


	.key-is-works {
		background: url(../img/works/key_works.jpg) no-repeat center bottom;
		background-size: cover;
		padding:60px 0 40px 0;
		z-index:2;
	}


	.key-is-contact {
		background: url(../img/contact/key_contact.jpg) no-repeat center bottom;
		background-size: cover;
		padding:60px 0 40px 0;
		z-index:2;
	}


	.key-is-blog {
		background: url(../img/blog/key_blog.jpg) no-repeat center bottom;
		background-size: cover;
		padding:80px 0 70px 0;
		z-index:2;
	}

	.key-is-blog::after{
		background-color: rgba(0,0,0,.25);
		position:absolute;
		bottom:0;
		left:0;
		width:100%;
		height:40px;
		content:'';
		z-index:-1;
	}

	.key-is-top::after,
	.key-is-about::after,
	.key-is-service::after,
	.key-is-wptheme::after,
	.key-is-works::after,
	.key-is-contact::after{
		/* background-color: rgba(0,0,0,.25); */
		/* background-image: linear-gradient(90deg, rgba(0,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(0,0,0,.25) 50%, transparent 50%); */
		background-size: 2px 2px;
		position:absolute;
		top:0;
		right:0;
		bottom:0;
		left:0;
		content:'';
		z-index:-1;
	}



	/*キービジュアルの内枠(ブログでは不使用)*/
	.key__inner{
		width : calc(100% - 40px);
		margin:auto;
	}
	.key-is-top .key__inner{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		height: 180px;
	}


	.key__subtitle{
	/*	font-family: 'Anton';*/
		font-size:38px;
		letter-spacing:2px;
		line-height: 1.1;
		color:#ffffff;
		text-shadow: 1px 1px 1px #000000;
		margin:0 auto 10px auto;
	}
	.key-is-top .key__subtitle{font-size:38px;}
	.key-is-blog .key__subtitle a{ text-decoration:none}


	.key__title{/*	font-family: "Sawarabi Mincho";*/font-size: 2.2rem;font-weight:normal;letter-spacing:2px;line-height: 1.5;color:#ffffff;text-shadow: 1px 1px 1px #000000;margin:0 auto 20px auto;}
	.key-is-top .key__title{margin-bottom:30px;}


	/*ナビエリア(トップページ専用)*/
	.key-is-top .key__navi{
		margin:0 auto;
		/* margin: auto; */
		width: 247px;
		text-align: center;
		/* top: 0px; */
		bottom: 0px;
		right: 0;
		left: 0;
	}
	.key-is-top .key__navi .btn{
		float:left;
		width: 274px;
		text-align:center;
		margin: auto;
	}








	.key-is-top .key__navi .btn a{font-size: 12px;display:block;padding:0;color: #fff;margin: auto;}


	/*ナビエリア(ブログ専用)*/
	.key-is-blog .key__navi{
		position: absolute;
		bottom:0;
		left:0;
		width:100%;
		height:40px;
		line-height:40px;
	}

	/*トグル設定*/
	.key-is-blog .key__navi #key__toggle{display: none;}
	.key-is-blog .key__navi .key__toggle__switch{
		display:block;
		position: relative;
		width:100%;
		height:40px;
		line-height:40px;
		font-weight:bold;
		font-size:16px;
		color:#FFF;
		cursor:pointer;
	}
	.key-is-blog .key__navi .key__toggle__switch:hover{animation: flash 1s;}
	.key-is-blog .key__navi .key__toggle__switch::before{
		content:"";
		display:inline-block;
		background:url(../img/blog/icon_category.svg) no-repeat;
		width:14px;
		height:14px;
		margin-right:5px;
	}
	.key-is-blog .key__navi .key__toggle__switch::after{
		content:"OPEN";
		display:inline-block;
		margin-left:5px;
	}
	.key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch::after{
		content:"CLOSE";
	}
	/*トグルopen*/
	.key-is-blog .key__navi #key__toggle:checked + .key__toggle__switch + ul{
		position:absolute;
		top:40px;
		left:0;
		width:100%;
		height:120px;
		background-color: rgba(0,0,0,0.90);
		border-bottom:#000000 1px solid;
		transition: 0.5s;	
	}
	.key-is-blog .key__navi ul{
		height:0;
		overflow: hidden;
	}
	.key-is-blog .key__navi ul li{
		width:50%;
		height:40px;
		line-height:40px;
		float:left;
		color:#FFF;
		font-size:12px;
		text-align:center;
		border-top:#3F3F3F 1px solid;
		border-bottom:#191919 1px solid;
		box-sizing:border-box;
	}
	.key-is-blog .key__navi ul li:hover{ background:#000;}
	.key-is-blog .key__navi ul li:nth-child(even) {border-left:#3F3F3F 1px solid;border-right: none;}
	.key-is-blog .key__navi ul li a{text-decoration:none; display:block;}


	/*テキストエリア(トップページ専用)*/
	.key__text{
		font-weight:bold;
		font-size: 1.3rem;
		line-height:1.25;
		width:90%;
		margin:0 auto 0 auto;
		color:#ffffff;
		text-shadow: 1px 1px 1px #000000;
	}
	.key__text b{font-size:28px;}


	/*ページscrollボタン(トップページ専用)*/
	.key__scroll{ display:none;}

}