@charset "UTF-8";

/*-------------------------
mystyle
body
--------------------------*/
img{
	max-width:100%;
	max-height:100%;
}
.no-flexbox .flex {
	text-align:center;
}
.no-flexbox  .flex * {
	margin:auto;
}
.no-flexbox .flex + * {
	clear:both;
}
h4{
	font:bold 1.5em 'メイリオ';
	color: #66CC33;
}
h3{
	font-size:24px;
	line-height:35px;
	color:#3F9932;
	font-weight:100;
	border-left:solid 12px #6C3;
	margin:0 0 30px;
	padding:0 0 0px 18px;
}
ol{
	margin:0;
	padding: 0;
}
.column {
	margin:7.5% 10px;
	width:auto;
	text-align:left;
}
.banner{
	display:block;
	text-align:center;
	margin:5% 0;
}
.banner img{
	transition:.3s ease;
	-webkit-transition:.3s ease;
}
.banner img:hover{
	opacity:0.8;
	transform:translateY(-3px);
}
.flexbox .main{
	width:100%;
  max-width:980px;
}
.trunkInteri{
    margin: 0 0 30px;
    display: -webkit-flex;
    display: flex;
    flex-flow: row nowrap;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-justify-content: center;
    justify-content: center;
    clear: both;
}
/*-------------------------
info >info-title,infoGraph
--------------------------*/
@keyframes iG-anime {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@keyframes iG-item-anime {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}
#infoGraph{
	animation: iG-anime 30s linear -2s infinite;
}
#iG-mainItem , #infoGraph .iG-item{
	animation: iG-item-anime 30s linear -2s infinite;
}
.info-wrap{
	display: -webkit-flex;
	display: flex;
	flex-flow:row wrap;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
	padding:20px 0;
	position:relative;
	background:none;
}
.info-titleSentence,.info-title{
	padding: 10px;
}
.info-titleSentence{
	display:none;
	font:bold 1.25em 'メイリオ';
}
@media (min-width: 980px) {
.info-titleSentence{
	display:block;
}
}
#infoGraph{
	display:block;
	flex-shrink:0;
	width:325px;
	height:325px;
}
.iG-mainItem-content ,.iG-item-content{
	border-radius:50%;
	transition:.3s ease;
	-webkit-transition:.3s ease;
}
#iG-mainItem{
	position:absolute;
	top: 0;
	left: 0;
	right:0;
	bottom:0;
	margin:auto;
	width:135px;
	height:135px;
}
.iG-item{
	display:inline-block;
	position:absolute;
	top: 0;
	left: 0;
	width:85px;
	height:85px;
	text-align:center;
}
.iG-item-content:hover ,.iG-item-content:active{
	-webkit-filter:brightness(110%);
	transform: scale(1.3);
	box-shadow: 0px 0px 30px #fff;
}

@media (min-width: 780px) {
.info-wrap{
 	padding: 10px 0;
	margin-bottom:60px;
	background:url(../images/interi_office.jpg) center;
	background-size: 100%;
}
.info-title{
	display:block;
}
#infoGraph{
	width:400px;
	height:400px;
}
#iG-mainItem{
	width:175px;
	height:175px;
}
.iG-item{
	width:100px;
	height:100px;
}
}
/*-------------------------
.iG-infoText
--------------------------*/
.iG-infoText{
	z-index:10;
	display:none;
	position:absolute;
	left:0;
	right:0;
	bottom:-2em;
	border:1px solid #999;
	border-radius:10px;
	font-weight:normal;
	background:#fff;
	transition:.3s ease;
	-webkit-transition:.3s ease;
}
.iG-infoText{
	border:2px solid;
	font-weight:bold;
}
.iG-item-content:hover + .iG-infoText{
	display:inline;
}
.iG-item-content:hover + .iG-infoText{
	bottom:-3.5em;
}
#iT-elec{
	color:#FC4D32;
}
#iT-commu{
	color:#EC008C;
	border-color:#EC008C;
}
#iT-camera{
	color:#533A97;
	border-color:#533A97;
}
#iT-air{
	color:#00AEEF;
}
#iT-led{
	color:#FAA61A;
	border-color:#FAA61A;
}
/*-------------------------
threePoint
--------------------------*/
.threePoint{
	display: flex;
 	display: -webkit-flex;
	-js-display: flex;
 	flex-wrap:wrap;
}
.threePoint div{
	margin: 20px 0;
	width:240px;
	text-align:center;
	flex-grow:1;
}
.threePoint img{
	transition:.3s ease;
	-webkit-transition:.3s ease;
}
.threePoint img:hover{
	transform: rotate(360deg);
}
/*-------------------------
case
--------------------------*/
.case{
	display: -webkit-flex;
	display: flex;
	-js-display: flex;
 	flex-flow:row wrap;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
.case-picture{
	margin:5px;
	width:80%;
	box-shadow:0px 0px 10px #555;
}
.case-arrow{
	display:none;
}
@media (min-width: 780px) {
.case-picture{
	width:350px;
}
}
@media (min-width: 980px) {
.case-picture{
	width:400px;
}
.case-arrow{
	display:block;
}
}
.case-work{
	margin:20px 0;
	padding:10px;
	border:2px solid #6c3;
	border-radius:3px;
	text-align:center;
}
.case-workList{
	display: -webkit-flex;
	display: flex;
	-js-display: flex;
 	flex-flow:row wrap;
	-webkit-justify-content: center;
	justify-content: center;
	text-align:left;
}
/*-------------------------
>info no-js .no-cssanimations
--------------------------*/
.no-js .info-wrap,
.no-cssanimations .info-wrap{
	padding:30px 0;
	height:auto;
	text-align:center;
}
.no-cssanimations .info-wrap{
	background:none;
}
.no-js .info-titleSentence,
.no-js .info-title,
.no-cssanimations .info-titleSentence,
.no-cssanimations .info-title{
	display:none;
}
.no-js #infoGraph,
.no-cssanimations #infoGraph{
	display:inline-block;
	position:relative;
	width:100%;
	height:auto;
	margin: 0 auto;
	text-align:center;
}
.no-cssanimations #infoGraph{
	display:inline-block;
}
.no-js #iG-mainItem,
.no-js .iG-item,
.no-cssanimations #iG-mainItem,
.no-cssanimations .iG-item{
	position:relative;
	margin:auto;
}
.no-js .iG-infoText,
.no-cssanimations .iG-infoText{
	display:inline;
	bottom:-2em;
} 
.no-js .case-arrow{
	display:none;
}
/*-------------------------
.no-flexbox
--------------------------*/
.no-flexbox .info-titleSentence,.no-flexbox .case-arrow{
	display:none;
}
.no-flexbox .case{
	text-align:center;
}
/*-------------------------
touchE
--------------------------*/
.touchevents .iG-infoText{
	display:inline;
}