@charset "UTF-8";


#main {
	background: rgb(245,245,245);
	background: -moz-linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 33%, rgba(245,245,245,0) 33%);
	background: -webkit-linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 33%, rgba(245,245,245,0) 33%);
	background: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 33%, rgba(245,245,245,0) 33%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#277abd",endColorstr="#277ab7",GradientType=1);
}

/*
	FV LAYOUT
******************/

#fv .wrap {
	text-align:center;
    position:relative;
    background:url(../img/top/fv2.jpg) no-repeat center center/cover;
    padding:0;
}
#fv .wrap::before {
    content:'';
    background-color:rgba(39,122,183,.2);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
}
#fv .contents {
    height:640px;
	text-align:left;
    position:relative;
    z-index:1;
}
#fv .contents h2 {
	font-family: 'Lato', sans-serif;
	color:#FFFFFF;
	font-size:5.0rem;
	font-weight:500;
	line-height:1.2;
	margin-bottom:.3em;
	text-shadow:5px 5px 0 #277AB7;
}
#main #fv .contents p {
	width:100%;
	font-size:2.2rem;
	line-height:1.4;
	color:#FFFFFF;
	font-weight:500;
	margin:0;
	text-shadow:3px 3px 0 #277AB7;
}


/*
	Content LAYOUT
******************/

.contents_inner {
	width: 100%;
	margin-bottom:60px;
}
.contents_inner h2 {
	width:30%;
	font-family: 'Lato', sans-serif;
	font-size:3.6rem;
	font-weight:400;
	line-height:1;
}
.contents_inner h2 span {
	font-family: 'Noto Sans JP', sans-serif;
	display:block;
	font-size:1.4rem;
	color:#277AB7;
	font-weight:600;
	padding-top:.5em;
	letter-spacing:.1em;
}
#main .contents_inner > p {
	width:calc(70% - 50px);
	margin:0;
}


/*
	Service LAYOUT
******************/

#service .wrap {
	padding-top:90px;
}
#service .service {
	width:100%;
}
#service .service li {
	width:calc(50% - 20px);
	position:relative;
}
#service .service li::before {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background: rgb(39,122,189);
	background: -moz-linear-gradient(140deg, rgba(39,122,189,0.75) 0%, rgba(39,122,183,0) 75%);
	background: -webkit-linear-gradient(140deg, rgba(39,122,189,0.75) 0%, rgba(39,122,183,0) 75%);
	background: linear-gradient(140deg, rgba(39,122,189,0.75) 0%, rgba(39,122,183,0) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#277abd",endColorstr="#277ab7",GradientType=1);
}
#service .service li::after {
	content:'';
	border-top: 15px solid #ffffff;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	position:absolute;
	right:4px;
	bottom:10px;
	transform-origin:right top;
	transform:rotate(-45deg);
}
#service .service li:first-child {
	background:url(../img/top/service1.jpg) no-repeat center center/cover;
}
#service .service li:last-child {
	background:url(../img/top/service2.jpg) no-repeat center center/cover;
}
#service .service li a {
	display:block;
	padding-top:50%;
	position:relative;
	z-index:1;
}
#service .service h3 {
	font-family: 'Lato', sans-serif;
	font-size:2.8rem;
	color:#FFFFFF;
	line-height:1;
	font-weight:400;
	position:absolute;
	top:.75em;
	left:1em;
	z-index:2;
	text-shadow:3px 3px 0 rgba(0,0,0,.5);
}
#service .service h3 span {
	font-family: 'Noto Sans JP', sans-serif;
	display:block;
	font-size:1.8rem;
	font-weight:500;
	padding-top:.75em;
}
#service .service li a::before {
	content:'';
	display:block;
	width:0;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	z-index:1;
    background-color:rgba(39,122,183,.5);
	transition:.3s;
}
#service .service li a:hover::before {
	width:100%;
}


/*
	Product LAYOUT
******************/

#products .product {
	width:100%;
}
#products .product li {
	width:calc(25% - 15px);
	position:relative;
}
#products .product li::before {
	content:'';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background: rgb(39,122,189);
	background: -moz-linear-gradient(135deg, rgba(39,122,189,0.75) 0%, rgba(39,122,183,0) 75%);
	background: -webkit-linear-gradient(135deg, rgba(39,122,189,0.75) 0%, rgba(39,122,183,0) 75%);
	background: linear-gradient(135deg, rgba(39,122,189,0.75) 0%, rgba(39,122,183,0) 75%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#277abd",endColorstr="#277ab7",GradientType=1);
}
#products .product li::after {
	content:'';
	border-top: 15px solid #ffffff;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	position:absolute;
	right:4px;
	bottom:10px;
	transform-origin:right top;
	transform:rotate(-45deg);
}
#products .product li:first-child {
	background:url(../img/top/product1.jpg) no-repeat center center/cover;
}
#products .product li:nth-child(2) {
	background:url(../img/top/product2.jpg) no-repeat center center/cover;
}
#products .product li:nth-child(3) {
	background:url(../img/top/product3.jpg) no-repeat center center/cover;
}
#products .product li:last-child {
	background:url(../img/top/product4.jpg) no-repeat center center/cover;
}
#products .product li a {
	display:block;
	padding-top:100%;
	position:relative;
	z-index:1;
}
#products .product h3 {
	font-family: 'Lato', sans-serif;
	font-size:2.3rem;
	color:#FFFFFF;
	line-height:1;
	font-weight:400;
	position:absolute;
	top:.75em;
	left:.75em;
	z-index:2;
	text-shadow:3px 3px 0 rgba(0,0,0,.5);
}
#products .product h3 span {
	font-family: 'Noto Sans JP', sans-serif;
	display:block;
	font-size:1.6rem;
	font-weight:500;
	padding-top:.75em;
}
#products .product li a::before {
	content:'';
	display:block;
	width:0;
	height:100%;
	position:absolute;
	top:0;
	right:0;
	z-index:1;
    background-color:rgba(39,122,183,.5);
	transition:.3s;
}
#products .product li a:hover::before {
	width:100%;
}

/*
	News LAYOUT
******************/

#news .contents_inner .news {
	width:calc(70% - 50px);
	margin:0;
}
#news .contents_inner .news dl {
	width:100%;
	border-bottom:2px dotted #cccccc;
	padding:.75em 0;
	font-size:1.6rem;
	line-height:1.4;
}
#news .contents_inner .news dt {
	color:#277AB7;
	font-family: 'Lato', sans-serif;
	width:8em;
}
#news .contents_inner .news dd {
	width:calc(100% - 8em);
}

@media screen and (max-width:1500px){

}

@media screen and (max-width:1200px){

}

@media screen and (max-width:1024px){

}

@media screen and (max-width: 768px){

}

@media screen and (max-width:640px){

/*
	FV LAYOUT
******************/

#fv .wrap {
	height:300px;
}
#fv .contents {
    height:300px;
}
#fv .contents h2 {
	font-size:4.0rem;
}
#main #fv .contents p {
	font-size:1.8rem;
	margin:0;
}


/*
	Content LAYOUT
******************/

.contents_inner {
	margin-bottom:20px;
}
.contents_inner h2 {
	font-size:3.0rem;
	margin-bottom:.75em;
}
#main .contents_inner > p {
	width:100%;
	margin:0;
	font-size:1.5rem;
	line-height:1.4;
}


/*
	Service LAYOUT
******************/

#service .wrap {
	padding-top:60px;
}
#service .service li {
	width:100%;
}
#service .service li:first-child {
	margin-bottom:5px;
}
#service .service li a {
	padding-top:28%;
}
#service .service h3 {
	font-size:2.4rem;
}
#service .service h3 span {
	font-size:1.6rem;
}
#service .service li::after {
	border-top: 10px solid #ffffff;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
#service .service li a:hover::before {
	width:0;
}


/*
	Product LAYOUT
******************/

#products .product {
	width:100%;
}
#products .product li {
	width:100%;
}
#products .product li:not(:last-child) {
	margin-bottom:5px;
}
#products .product li::after {
	border-top: 10px solid #ffffff;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
#products .product li a {
	padding-top:30%;
}
#products .product h3 {
	font-size:2.2rem;
}
#products .product h3 span {
	font-size:1.5rem;
	padding-top:.5em;
}
#products .product li a:hover::before {
	width:0;
}

/*
	News LAYOUT
******************/

#news .contents_inner .news {
	width:100%;
	margin:0;
}
#news .contents_inner .news dl {
	padding:.5em 0;
	font-size:1.4rem;
}
#news .contents_inner .news dt {
	width:7em;
}
#news .contents_inner .news dd {
	width:calc(100% - 7em);
}

}
	
@media screen and (max-width:480px){

}
	
@media screen and (max-width:360px){

}