@charset "utf-8";
/* ---------------------------------------- /
/
/ index.css
/
/ ---------------------------------------- */

/* --------*** 共通項 ***-------- */
.contents01 h2,.contents05 h2{
	border-bottom: 1px solid #c6c6c6;
}
.contents02 h2,.contents03 h2,.contents04 h2,.contents05 h2{
	margin-bottom:30px;
}
@media screen and (max-width: 768px) {
	.contents02 h2 img,.contents03 h2 img,.contents04 h2 img{
	width:100%;
}
}
/* -------- 経営を支える　多角的なサポート -------- */
.point{
	background:url(../img/index/point_bg.jpg) no-repeat top center;
	-moz-background-size:covoer;
	background-size: cover;	
	border-top: 4px solid #e07c00;
	border-bottom: 4px solid #e07c00;
	padding:20px 10px;
}
.point .point_title{
	text-align:center;
}
.point .point_title img{
	width:100%;
	max-width:430px;
}

/* -- wheelmenu.css -- */
.btn_wp{
	width:100%;
	max-width:830px;
	margin: 0 auto;
	margin-top:40px;
	margin-bottom:20px;
}
.btn_col{
	width:33.33%;
	text-align:center;
	float:left;
}
.btn_col:last-child{
	margin-right:0;
}
.btn_col img{
	max-width:208px;
	width: 100%;
}
.btn_wp-sp{
	display:none;
}
@media screen and (max-width: 768px) {
	.btn_wp{
		display:none;
	}
	.btn_wp{
		margin-top:10px;
		margin-bottom:10px;
	}
	.btn_col{
	width:100%;
	text-align:center;
	float:left;
	margin-bottom:10px;
	}
	.btn_wp-sp{
		display:block;
		width:100%;
		margin: 20px 0 0 0;
	}
	.btn_wp-sp img{
		display:block;
		margin-bottom:10px;
		width:100%;
		}
}
.wheel-button {
    display: block;
    width: 208px;
    height: 206px;
    margin: 0 auto;
    text-align: center;
    color: #fff;
}

.btn_wp .item a{
	display:block;
	width:140px;
	height:160px;
	line-height:18px;
	padding-top:70px;
	text-align:center;
	font-weight:bold;
	color:#fff;
	background:url(../img/wheel_bg.png) no-repeat;
	-moz-background-size: cover;
	background-size:cover;
	/*background-color:rgba(72,54,42,1);*/
	/*border: 2px solid #fff;
	-webkit-border-radius:50%;
	border-radius:50%;*/
	-webkit-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
	opacity: 10;
	-moz-opacity: 10;
	filter: alpha(opacity = 0);
	-webkit-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
}
.btn_wp .item a:hover{
	cursor: default;
}
.btn_wp .item.pt0 a{
	padding-top:60px;
	height:160px;
}

/* -------- 最新情報 -------- */

.news_box .category ul{
	width:280px;
	margin: 0 auto;
	font-size: 1.3rem;
	margin-top: 1em;
}
.news_box .category li{
	float:left;
	border-right: 1px solid #6b6b6b;
	padding: 0 1em;
	line-height:16px;
}
.news_box .category li:last-child{
	border-right: none;
	padding-right:0;
}
.news_box .row{
	margin-top:30px;
}
.news_col h3{
	font-size:1.6rem;
	font-weight:normal;
}
.news_col{
	font-size:1.3rem;
}
.news_col .data{
	font-size:1.3rem;
	color:#e07c00;
	margin-bottom:0.5em;
}
.news_col .data span{
	display: inline-block;
	margin-left:1em;
	font-weight:bold;
	color:#fff;
	font-size: 1.1rem;
	padding: 0 0.5em;
	line-height: 17px;
}
.news_col .data span.media{
	background-color:#2aaae6;
}
.news_col .data span.company{
	background-color:#e07c00;
}
@media screen and (max-width: 768px) {
	.news_box h2{
		margin: 0 10px;
	}
	.news_box .category ul{
		width:204px;
}
	.news_col{
		border-bottom: 1px solid #c6c6c6;
		margin-bottom: 1em;
		padding-bottom:1em;
	}
}
/* -------- サービス&制作実績 -------- */
.contents02 h2,.contents03 h2,.contents04 h2{
	text-align:center;
}
.contents04{
	padding-bottom:0;
}
/* -------- 事業概要 -------- */
.contents03 .container{
	width:100%;
	max-width: 1900px;
}

.contents03 .row{
	color:#fff;
}
.contents03 h3{
	font-size:2.8rem;
	text-align:center;
	font-weight:normal;
	margin-bottom:0.7em;
}
.contents03 p{
	font-size:1.6rem;
}
.contents03 .software,
.contents03 .web,
.contents03 .support{
	padding: 30px 22px;
	line-height:2.8rem;
	height:400px;
	position:relative;
}
.contents03 .software{
	background:url(../img/index/smmary_software_bg.jpg) no-repeat left 50%;
	-moz-background-size:cover;
	background-size: cover;
}
.contents03 .web{
	background:url(../img/index/smmary_web_bg.jpg) no-repeat left 50%;
	-moz-background-size:cover;
	background-size: cover;
}
.contents03 .support{
	background:url(../img/index/smmary_support_bg.jpg) no-repeat left 50%;
	-moz-background-size:cover;
	background-size: cover;
}
.contents03 .cover{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background-color: rgba(0,0,0,0.6);
	display:table;
	opacity:0;
	-webkit-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
}
.contents03 .cover:hover{
	opacity:1;
}
.contents03 .cover ul {
    display: table-cell;
    vertical-align: middle;
}

.contents03 .cover li {
    width: 80%;
    padding: 0.5em 0;
    margin: 0 auto;
	margin-bottom:1em;
    text-align: center;
	border: 1px solid rgba(255,255,255,0.8);
	background: rgba(255,255,255,0);
	-webkit-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
	}
.contents03 .cover li:hover {
	background: rgba(255,255,255,0.2);
	}
.contents03 .cover li a,.contents03 .cover li a:visited {
    display: block;
    font-size: 1.4rem;
    color: #fff;
}
.contents03 .cover li a:after{
	content: url("../img/summary_arrow.png");
	display: inline-block;
	position:relative;
	left:3px;
	-webkit-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
	}
.contents03 .cover li a:hover:after{
	content: url("../img/summary_arrow.png");
	display: inline-block;
	position:relative;
	padding-right:-6px;
	left:10px;
	}

@media screen and (max-width: 768px) {
.contents03 .container{
	width:100%;
	padding:0;
	margin: 0 auto;

}
.contents03 .container h2 {
    margin: 0 10px 20px 10px;
}
.contents03 .software h3,
.contents03 .web h3,
.contents03 .support h3{
	padding:30px 0 0 0;
}
.contents03 .software p,
.contents03 .web p,
.contents03 .support p{
	padding: 0 20px;
}
.contents03 .software,
.contents03 .web{
	padding:0;
	height: 340px;
}
.contents03 .support{
	padding:0;
	height:400px;
}
.contents03 .cover{
	width:100%;
	height:100%;
	position:absolute;
	top:20px;
	left:0;
	background-color: rgba(0,0,0,0);
	display:table;
	opacity:1;
}
.contents03 .cover ul {
    vertical-align: bottom;
	padding-bottom:30px;
}
.contents03 .cover li {
	width:100%;
	background: rgba(255,255,255,0.4);
	}
.contents03 .cover li a,.contents03 .cover li a:visited {
	color:#e69628;
	font-weight:bold;
}
}
/* -------- 運営サイト -------- */
.contents05{
	width:100%;
	padding: 40px 0;
}
.contents05 .row img{
	width:100%;
	height:auto;
	margin-bottom:10px;
	}
/* 動画
=============================================================================*/
.movie{
	position: relative;
	padding-bottom:  37.1%;
	width:100%;
	height: 0;
	overflow: hidden;
}
.movie video{
position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.movie .movie_mask{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:url(../img/movie_mask.png) repeat;
	-webkit-transition: all 0.3s linear 0s;
	-o-transition: all 0.3s linear 0s;
	transition: all 0.3s linear 0s;
}
.movie .logo{
	width:438px;
	height:180px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-90px;
	margin-left:-200px;
	z-index:10;
	text-align:center;
}
.movie .logo img{
	margin-bottom:1.5em;
}
.movie .logo-sp{
	display:none;
}
.tablet{
	visibility: hidden;
}

/*社内タブレットに合わせる為、動画のみ1280pxで非表示*/
@media screen and (max-width: 1280px) {
.movie video{
	visibility: hidden;
}
.movie .tablet{
	position: relative;
	padding-bottom:  37.1%;
	width:100%;
	height: 0;
	overflow: hidden;
	visibility: visible;
	background:url(../../movie/movie.jpg);
	-webkit-background-size: cover;
	background-size: cover;
}
.movie .tablet img{
	width: 100%;
	height:100%;
}
.movie .logo-sp{
	position:absolute;
	display:block;
	width:100%;
	height:auto;
	text-align:center;
	top:0;
	left:0;
	margin: 0 auto;
	margin-top:0;
	margin-left:0;
	padding: 112px 20px 0 20px;
	z-index:0;
}
.movie .logo-sp img{
	width:100%;
	max-width:400px;
	height:auto;
}
}
@media screen and (min-width:769px) and (max-width:1010px) {.movie .logo-sp{
	padding: 60px 20px 0 20px;
}
	}
@media screen and (max-width: 768px) {
.movie {
    position: relative;
    padding-bottom: 0;
    width: 100%;
    height: 300px;
    overflow: hidden;
	background:url(../../movie/movie.jpg) no-repeat top center;
	-moz-background-size:cover;
	background-size: cover;
}
.movie .movie_mask{
	visibility:hidden;
}
.movie .tablet{
	height:100%;
}
.movie .logo{
	display:none;
}
.movie .logo-sp{
	padding: 70px 20px 0 20px;
}
}