@charset "utf-8";
/* CSS Document */


/*　共通　*/

/* PC and Tablet ////////////////////////*/
@media screen and (min-width: 600px){

body#HOME h1 img{ position: absolute; margin-left:-269px; margin-top:-80px; left:50%; top:50%; z-index: 10; }

/* slider */
.mainImg{ width:100%; height:625px; border-top: 2px solid #EDF0F1; border-bottom:10px solid #FFF; position:relative;}
.mainImg ul,.mainImg li{ width:100%; height:625px; }
.mainImg ul{ text-align:center; position:relative; z-index: 0; }
.mainImg li{ position:relative; text-align:center; overflow: hidden;}
.mainImg li img{ width: 100%; min-height:625px; min-width:1500px; position: absolute; bottom:0; left:50%;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
transform: translate(-50%,0);}


.ttl{ margin-bottom:10px; font-size: 153.9%; font-weight:bold; }
a:hover .ttl{ color:#347CCD; }

section.RinenBox,section.GroupBox,section.WorksBox,section.InfoBox,section.RecBox,section.ContactBox{ box-sizing:border-box; display: block; float:left;border-bottom:10px solid #FFF; }
section.GroupBox,section.InfoBox,section.RecBox,section.ContactBox{ padding:30px; }
}

/* SmartPhone  ////////////////////////*/
@media screen and (max-width: 599px){
	
body#HOME header{ background: none;}
body#HOME header img.logoImg{ display:none; }

body#HOME h1 img{ width:90%; position: absolute; margin-top:-10%; left:5%; top:50%; z-index: 5; }

/* slider */
.mainImg{ height:300px;}
.mainImg ul,.mainImg li{ width:100%; height:100%; }
.mainImg ul{ text-align:center; position:relative; z-index: 0; background:#CCC; }
.mainImg li{ position:relative; text-align:center; overflow: hidden;}
.mainImg li img{ /*width: 100%;*/ height:300px; position: absolute; bottom:0; left:50%;
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
transform: translate(-50%,0);}

.ttl{ margin-bottom:10px; font-size: 110%; font-weight:bold; }
a:hover .ttl{ color:#347CCD; }

section.RinenBox,section.GroupBox,section.WorksBox,section.InfoBox,section.RecBox,section.ContactBox{ box-sizing:border-box; display: block; float:left;border-bottom:4px solid #FFF; }
section.GroupBox,section.InfoBox,section.RecBox,section.ContactBox{ padding:20px 5px 20px 10px; }
}

/* １段目 */

/* PC and Tablet ////////////////////////*/
@media screen and (min-width: 600px){
	
div.firstLine section p{ width:50%; }
.RinenBox,.GroupBox{ width:50%; height:240px; }
a section.RinenBox,a section.GroupBox{ color:#000; text-decoration: none; }

.RinenBox{ border-left: 10px solid #FFF;border-right: 5px solid #FFF; background-image:url(rinen_bg.jpg); background-size: cover; background-repeat:no-repeat; background-position: center bottom; }
.RinenBox div{ box-sizing:border-box; width:100%; height:100%; padding:30px; }
a:hover .RinenBox div{ background-color:rgba(255,255,255,0.6); }

.GroupBox{ border-left: 5px solid #FFF;border-right: 10px solid #FFF; background-image:url(group_bg.png); background-size: contain; background-repeat:no-repeat; background-position: 98% 0; }
a:hover section.GroupBox{ background-color: #DBE6EF; }

}

/* SmartPhone  ////////////////////////*/
@media screen and (max-width: 599px){
	
/*div.firstLine{ margin-top:600px; }*/

div.firstLine section p{ width:100%; }
.RinenBox,.GroupBox{ width:50%; height:200px; }
a section.RinenBox,a section.GroupBox{ color:#000; text-decoration: none; }

.RinenBox{ border-left: 4px solid #FFF;border-right: 2px solid #FFF; background-image:url(rinen_bg.jpg); background-size: cover; background-repeat:no-repeat; background-position: center bottom; }
.RinenBox div{ box-sizing:border-box; width:100%; height:100%; padding:20px 5px 20px 10px; }
a:hover .RinenBox div{background-color:rgba(255,255,255,0.6); }

.GroupBox{ border-left: 2px solid #FFF;border-right: 4px solid #FFF; background-image:url(group_bg.png); background-size: cover; background-repeat:no-repeat; background-position:50% 0; }
a:hover section.GroupBox{ background-color: #DBE6EF; }

}


/* ２段目 */

/* PC and Tablet ////////////////////////*/
@media screen and (min-width: 600px){

.WorksBox{ width:100%; border-left: 10px solid #FFF;border-right: 10px solid #FFF; background:#000; }
.WorksBox:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }

.WorksBox h2,.WorksBox a.thum{ box-sizing: border-box;display:block; width:20%; height:240px; float:left; color:#FFF; }

.WorksBox h2{ margin-bottom:0; padding: 70px 0 0 0; text-align:center; background-image:url(works_bg.png); background-repeat: no-repeat; background-size: 25%; background-color:#3F7FA9; background-position: 50% 65%;}
.WorksBox a:hover h2{ color: #FFF; background-color:#579FC5 ;}

.WorksBox a.thum{ font-size:85%; text-decoration:none; position:relative; text-align:center; overflow:hidden;}
.WorksBox a.thum img{ width:100%; height:auto; min-width:270px; min-height:240px; position: absolute; z-index: 5; left:50%; top:50%;-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); }
/*.WorksBox a.thum:nth-last-of-type(1){ display:none;}*/
.WorksBox a.thum div{ box-sizing:border-box; width: 100%; min-height:240px; padding: 20px; background-color:rgba(0,0,0,0.4); text-align:left; position:absolute; z-index:10; }
.WorksBox a.thum:nth-child(2n) div{ background-color:rgba(0,0,0,0.6); }
.WorksBox a.thum:hover div{ background-color:rgba(0,0,0,0.2); }
.WorksBox a.thum div h3{ margin-bottom:8px; color: inherit; font-weight: bold; }


.WorksBox a.thum div .new_mark_area {
	height:0 ;
	margin:0 !important;
	padding:0 !important;
	}

.WorksBox a.thum div .new_mark_area .icon_new {
	min-width:45px !important;
	min-height:16px !important;
	width:48px !important;
	height:20px !important;
	position: inherit; z-index: 5; left:0px;
	-webkit-transform: translate(0%,50%);
    -moz-transform: translate(0%,50%);
    transform: translate(0%,50%);
	}

.WorksBox a.thum div .new_mark_area .icon_90,
.WorksBox a.thum div .new_mark_area .icon_180,
.WorksBox a.thum div .new_mark_area .icon_365 {display:none;}

.WorksBox a.thum div .new90  {height:20px !important; margin: -10px 0 15px !important;}
.WorksBox a.thum div .new180 {height:20px !important; margin: -10px 0 15px !important;}
.WorksBox a.thum div .new365 {height:20px !important; margin: -10px 0 15px !important;}

.WorksBox a.thum div .new90 .icon_90 {display:block !important;}
.WorksBox a.thum div .new180 .icon_180 {display:block !important;}
.WorksBox a.thum div .new365 .icon_365 {display:block !important;}



.sp {display:none;}

}

/* SmartPhone  ////////////////////////*/
@media screen and (max-width: 599px){

.WorksBox{ width:100%; border-left: 4px solid #FFF;border-right: 4px solid #FFF; background:#000; }
.WorksBox:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }
.WorksBox h2,.WorksBox a.thum{ box-sizing: border-box;display:block; width:33.33333%; height:140px; float:left; color:#FFF; }

.WorksBox h2{ margin-bottom:0; padding: 50px 0 0 0; text-align:center; background-image:url(works_bg.png); background-repeat: no-repeat; background-size: 25%; background-color:#3F7FA9; background-position: 50% 65%;}
.WorksBox a:hover h2{ color: #FFF; background-color:#579FC5 ;}

.WorksBox a.thum{ font-size:80%; line-height:1.3em; text-decoration:none; position:relative; text-align:center; overflow:hidden; }
.WorksBox a.thum img{ width:100%; min-width:158px; height:140px; position: absolute; z-index: 5; left:50%; top:50%;-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
transform: translate(-50%,-50%); }

.WorksBox a.thum div{ box-sizing:border-box; width:100%; min-height:140px; padding:15px 10px; background-color:rgba(0,0,0,0.2); text-align:left; position:absolute; z-index:10; }
.WorksBox a.thum:nth-child(2n) div{ background-color:rgba(0,0,0,0.5); }
.WorksBox a.thum div h3{ font-size:100%; margin-bottom:5px; color: inherit; font-weight: bold; }

.WorksBox a.thum div .new_mark_area {
	height:0 ;
	margin:0 !important;
	padding:0 !important;
	}

.WorksBox a.thum div .new_mark_area .icon_new {
	min-width:40px !important;
	min-height:auto !important;
	width:40px !important;
	height:auto !important;
	position: inherit; z-index: 5; left:0px;
	-webkit-transform: none;
    -moz-transform: none;
    transform: none;
	}

.WorksBox a.thum div .new_mark_area .icon_90,
.WorksBox a.thum div .new_mark_area .icon_180,
.WorksBox a.thum div .new_mark_area .icon_365 {display:none;}

.WorksBox a.thum div .new90  {height:20px !important; margin: 0 0 5px !important;}
.WorksBox a.thum div .new180 {height:20px !important; margin: 0 0 5px !important;}
.WorksBox a.thum div .new365 {height:20px !important; margin:  0 0 5px !important;}

.WorksBox a.thum div .new90 .icon_90 {display:block !important;}
.WorksBox a.thum div .new180 .icon_180 {display:block !important;}
.WorksBox a.thum div .new365 .icon_365 {display:block !important;}

.pc {display:none;}

/*.WorksBox a.thum:hover div{ background-color:rgba(0,0,0,0.0); }

/* thumnail
.WorksBox{ box-sizing:border-box; width:100%; padding-bottom:15px; border-left:4px solid #FFF; border-right:4px solid #FFF; border-bottom:4px solid #FFF; }
.WorksBox:after{ content:".";clear:both;display:block;height:0;visibility:hidden; }

.WorksBox a{ box-sizing:border-box; display: block; float: left; width:33.33333%; height:140px; font-size:80%; line-height:1.3em;  text-decoration: none; border-bottom: 4px solid #FFF; position:relative; text-align:center; overflow:hidden; }
.WorksBox a:nth-child(3n+1) { border-right:2px solid #FFF; }
.WorksBox a:nth-child(3n+2) { border-left:2px solid #FFF;border-right:2px solid #FFF; }
.WorksBox a:nth-child(3n) { border-left:2px solid #FFF; }
.WorksBox a img{ height:140px; position: absolute; z-index: 5; left:50%;-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
transform: translate(-50%,0); }
.WorksBox a div{ box-sizing:border-box; width: 100%; padding:15px 10px; font-size:85%; color:#FFF; text-align:left; position:absolute; z-index:10; }
.WorksBox a div h3{ font-size:100%; margin-bottom:5px; color: inherit; font-weight: bold; }
 */
 
}

/* ３段目 */

/* PC and Tablet ////////////////////////*/
@media screen and (min-width: 600px){

.InfoBox,.RecBox,.ContactBox{ width:33.333333333%; height:300px; text-align:center;}
.InfoBox h2,.RecBox h2,.ContactBox h2{ margin-bottom:15px;}

.InfoBox{ border-left: 10px solid #FFF;border-right: 5px solid #FFF; background:#FFF; }
.InfoBox li a{ padding-left: 15px; display:block; margin-bottom:12px; text-align:left !important; color:#444; line-height:1.4em; background-image: url(blog_arrow.gif); background-repeat: no-repeat; background-position: 0px 5px; }
.InfoBox li a:hover{background-image: url(blog_arrow_r.gif); color:#347CCD;}
 
.RecBox{ border-left: 5px solid #FFF;border-right: 5px solid #FFF; }
.RecBox p{ margin-bottom:15px; }
.RecBox a{ box-sizing:border-box; display:block; width: 85%; height:50px; margin: 7px auto; padding-top:14px; background-image:url(rec_bt_bg.jpg); background-position: right top; background-size: cover; color:#FFF; font-size:114%; font-weight: bold; text-decoration:none;}
.RecBox a:hover{background-image:url(rec_bt_bg_r.jpg);}
.RecBox a img{ float:right; height:50px; margin-right:15px; margin-top:-14px; vertical-align: middle;} 


.ContactBox{border-left: 5px solid #FFF;border-right: 10px solid #FFF; }
.ContactBox img{ margin-top:25px; margin-bottom:5px; width: 130px;}
a .ContactBox{ color:#000; }
a:hover .ContactBox{ background-color: #DBE6EF; }
}

/* SmartPhone  ////////////////////////*/
@media screen and (max-width: 599px){

.InfoBox,.RecBox,.ContactBox{ padding-top:30px; text-align:center; overflow:hidden;}
.InfoBox{ width:100%;}
.RecBox,.ContactBox{ width:50%; height:220px; padding-left:5px !important; padding-right:5px !important;}
.InfoBox h2,.RecBox h2,.ContactBox h2{ font-size:120%; margin-bottom:10px;}
.RecBox p,.ContactBox p{ box-sizing: border-box; padding:0 5px;line-height:1.3em; font-size:83%; text-align:left;}

.InfoBox{ border-left: 4px solid #FFF;border-right: 4px solid #FFF; background:#FFF; }
.InfoBox li a{ padding-left: 15px; display:block; margin-bottom:12px; text-align:left !important; color:#444; line-height:1.4em; background-image: url(blog_arrow.gif); background-repeat: no-repeat; background-position: 0px 5px; }
.InfoBox li a:hover{background-image: url(blog_arrow_r.gif); color:#347CCD;}
 
.RecBox{ border-left: 4px solid #FFF;border-right: 2px solid #FFF; }
.RecBox p{ margin-bottom:20px; }
.RecBox a{ box-sizing:border-box; display:block; width: 100%; height:40px; margin-top: 0; padding-top:10px; background-image:url(rec_bt_bg.jpg); background-position: right top; background-size: cover; color:#FFF; font-size:88%; font-weight: bold; text-decoration:none;}
.RecBox a:hover{background-image:url(rec_bt_bg_r.jpg);}
.RecBox a img{ float:right; height:100%; margin-right:10px; margin-top:-5px; vertical-align: middle;} 

.ContactBox{border-left: 2px solid #FFF;border-right: 4px solid #FFF; }
.ContactBox img{ margin-top:25px;width: 70%;}
a .ContactBox{ color:#000; }
a:hover .ContactBox{ background-color: #DBE6EF; }
}