@charset "UTF-8";
/* CSS Document */
#index #wrapper #contents nav:after{
	content:"";
	display:block;
	height: 0; 
    font-size:0;	
    clear: both; 
    visibility:hidden;
}
#index #wrapper #contents nav{
	max-width:1000px;
	margin:0 auto 30px auto;
}
#index #wrapper #contents nav ul li{
	width:300px;
	height:300px;
	line-height:300px;
	display:block;
	text-align:center;
}
/*#index #wrapper #contents nav ul li{
	width: 33%;
	list-style: none;
	text-decoration: none;
	display: inline-block !important;
}*/
#index #wrapper #contents nav ul li p a{
	color:#FFF;
	font-family:"TeX Gyre Adventor";
	text-decoration:none;
	text-align:center;
}
#index #wrapper #contents nav ul li p a:hover{
	color:#050748;
}
/*#index #wrapper #contents nav ul li:nth-of-type(2){
	margin:15px 61px;	
}*/
/*#index #wrapper #contents nav ul li a{
	display:block;
	
}
*/
/*==============================
20180328 Style
==============================*/
/*.block_contents_in {
    letter-spacing: -0.4em;
	display: -webkit-flex; 
	  display: flex;
	  flex-wrap: wrap;
}
#index #wrapper #contents nav ul li {
    width: 33%;
    height: 300px;
    line-height: 300px;
    display: block;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center center;
}
.block_contents_in li:nth-child(2) {
    width: 34%;
}*/


/*collect*/
.block_content_img_in.fade {
    letter-spacing: -0.4em;
}
.block_content_img {
    width: 30%;
    height: 300px;
    background-repeat: no-repeat;
	background-size: contain;
    background-position: center center;
    content: " ";
    display: inline-block;
	margin-bottom: 5%;
	vertical-align: top;
}
.block_content_img:hover {
    width: 30%;
    height: 300px;
    background-repeat: no-repeat;
	background-size: contain;
    background-position: center center;
    content: " ";
    display: inline-block;
	margin-bottom: 5%;
	vertical-align: top;
}
.block_content_img:nth-child(1) {
	background-image:url(../image/top_image/about_us_a.jpg);
}
.block_content_img:nth-child(1):hover {
    background-image: url(../image/top_image/about_b.jpg);
}
.block_content_img:nth-child(2) {
	background-image:url(../image/top_image/order_a.jpg);
	margin-right:5%;
	margin-left:5%;
}
.block_content_img:nth-child(2):hover {
    background-image: url(../image/top_image/order_b.jpg);
	margin-right:5%;
	margin-left:5%;
}

.block_content_img:nth-child(3) {
	background-image:url(../image/top_image/contact_a.jpg);
}
.block_content_img:nth-child(3):hover {
    background-image: url(../image/top_image/contact_b.jpg);
}
.block_content_img:nth-child(4) {
	background-image:url(../image/top_image/blog_a.jpg);
}
.block_content_img:nth-child(4):hover {
    background-image: url(../image/top_image/blog_b.jpg);
}
.block_content_img:nth-child(5) {
	background-image:url(../image/top_image/aokitailor.jpg);
	margin-right:5%;
	margin-left:5%;
}
.block_content_img:nth-child(5):hover {
    background-image: url(../image/top_image/aokitailor.jpg);
	margin-right:5%;
	margin-left:5%;
}
.block_content_img:nth-child(6) {
	background-image:url(../image/top_image/calendar_a.jpg);
}
.block_content_img:nth-child(6):hover {
    background-image: url(../image/top_image/calendar_b.jpg);
}
.block_content_img:nth-child(7) {
	background-image:url(../image/top_image/archives_a.jpg);
}
.block_content_img:nth-child(7):hover {
    background-image: url(../image/top_image/archives_b.jpg);
}
.block_content_img:nth-child(8) {
	background-image:url(../image/top_image/repair_a.jpg);
	margin-right:5%;
	margin-left:5%;
}
.block_content_img:nth-child(8):hover {
    background-image: url(../image/top_image/repair_b.jpg);
	margin-right:5%;
	margin-left:5%;
}
.block_content_img:nth-child(9) {
	background-image:url(../image/top_image/online_shop_a.jpg);
}
.block_content_img:nth-child(9):hover {
    background-image: url(../image/top_image/online_shop_b.jpg);
}


/*.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9{
	max-width:300px;
	max-height:300px;
}*/

/*.grid1 a,
.grid2 a,
.grid3 a,
.grid4 a,
.grid5 a,
.grid6 a,
.grid7 a,
.grid8 a,
.grid9 a{
	display:block;
}
.grid1 a span,
.grid2 a span,
.grid3 a span,
.grid4 a span,
.grid5 a span,
.grid6 a span,
.grid7 a span,
.grid8 a span,
.grid9 a span{
	visibility: hidden;
}
*//*.grid1 a{
	background-image:url(../image/top_image/about_us_a.jpg);
}
*/
/*.grid1 a:hover{
	background-image:url(../image/top_image/about_b.jpg);
}*/
.clearfix:after{
	content=:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
/*.grid1{
width: 300px;
height: 300px;
background:url(../image/top_image/about_us_a.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid1:hover{
background:url(../image/top_image/about_b.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid2{
width: 300px;
height: 300px;
background:url(../image/top_image/order_a.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid2:hover{
background:url(../image/top_image/order_b.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid3{
width: 300px;
height: 300px;
background:url(../image/top_image/contact_a.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid3:hover{
background:url(../image/top_image/contact_b.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid4{
width: 300px;
height: 300px;
background:url(../image/top_image/blog_a.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid4:hover{
background:url(../image/top_image/blog_b.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid5{
width: 300px;
height: 300px;
background:url(../image/top_image/aokitailor.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid5:hover{
background:url(../image/top_image/aokitailor_hover.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid6{
width: 300px;
height: 300px;
background:url(../image/top_image/calendar_a.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid6:hover{
background:url(../image/top_image/calendar_b.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid7{
width: 300px;
height: 300px;
background:url(../image/top_image/archives_a.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid7:hover{
background:url(../image/top_image/archives_b.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid8{
width: 300px;
height: 300px;
background:url(../image/top_image/repair_a.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid8:hover{
background:url(../image/top_image/repair_b.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid9{
width: 300px;
height: 300px;
background:url(../image/top_image/online_shop_a.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
.grid9:hover{
background:url(../image/top_image/online_shop_b.jpg);
transition: background 2s linear 0;
-moz-transition: background 2s linear 0;
-webkit-transition: background 2s linear 0;
-o-transition: background 2s linear 0;
-ms-transition: background 2s linear 0; 
}
*/
.block_content_img_in.fade_sp {
    display: none;
}

.block_content_img02 img {
    max-width: 100%;
    height: auto;
}
.block_content_img_in02.fade {
    letter-spacing: -0.4em;
}
.block_content_img02 {
	width:30%;
    display: inline-block;
	vertical-align:top;
	margin-bottom: 5%;
}
.block_content_img02 a {
    display: block;
}
.block_content_img02:nth-child(2) {
    margin: 0 5%;
}
.block_content_img02:nth-child(5) {
    margin: 0 5%;
}
.block_content_img02:nth-child(8) {
    margin: 0 5%;
}




@media screen and (max-width: 767px) {
.block_content_img:nth-child(2),
.block_content_img:nth-child(5),
.block_content_img:nth-child(8)
  {
    margin-right: 0;
	margin-left: 0;
}
.block_content_img {
    width: 48%;
	margin: 0 1%;
}
.block_content_img:nth-child(2):hover,
.block_content_img:nth-child(5):hover,
.block_content_img:nth-child(8):hover {
    margin-right: 0;
	margin-left: 0;
}
.block_content_img:hover {
    width: 48%;
	margin: 0 1%;
}
.block_content_img {
    width: 48%;
	height:230px;
	margin: 0 1%;
}
.block_content_img:hover {
    width: 48%;
	height:230px;
	margin: 0 1%;
}
.block_content_img:nth-child(2) {
    width: 48%;
	height:230px;
	margin: 0 1%;
}
.block_content_img:nth-child(2):hover {
    width: 48%;
	height:230px;
	margin: 0 1%;
}

.block_content_img:nth-child(4) {
    width: 48%;
	height:230px;
	margin: 0 1%;
}
.block_content_img:nth-child(4):hover {
    width: 48%;
	height:230px;
	margin: 0 1%;
}

.block_content_img:nth-child(5) {
    width: 48%;
	height:230px;
	margin: 0 1%;
	display: none !important;
}
.block_content_img:nth-child(5):hover {
    width: 48%;
	height:230px;
	margin: 0 1%;
}
.block_content_img:nth-child(6) {
    width: 48%;
	height:230px;
	margin: 0 1%;
}
.block_content_img:nth-child(6):hover {
    width: 48%;
	height:230px;
	margin: 0 1%;
}
.block_content_img:nth-child(8) {
    width: 48%;
	height:230px;
	margin: 0 1%;
}
.block_content_img:nth-child(8):hover {
    width: 48%;
	height:230px;
	margin: 0 1%;
}
header::after {
    width: 105px;
    height: 105px;
}
header img {
    height: 85px;
}
header {
    margin: 0 auto !important;
}
.block_content_img_in.fade {
    letter-spacing: -0.4em;
    display: none;
}
.block_content_img_in.fade_sp {
    display: block;
	letter-spacing:-0.4em;
}
.block_content_img a {
    width: 100%;
    height: 230px;
    display: block;

}
/*.block_content_img02:nth-child(2) {
    margin: 0;
}
.block_content_img02:nth-child(5) {
    margin: 0;
	display:none !important;
}
.block_content_img02:nth-child(8) {
    margin: 0;
}
.block_content_img02 {
    width: 48%;
    display: inline-block;
    vertical-align: top;
    margin: 1% !important;
}
*/
}