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

/*****
visual
********/
.area_visual{/*display:flex;*/ min-height:840px; background:url(/images/main/img_visual_bg.jpg)no-repeat 50% 50% / cover; /*align-items:center; justify-content:center;*/}
.visual_txtarea{text-align:center;}
.visual_txtarea h2{padding-top:60px; font-size:38px; color:#222; font-weight:400; font-family: 'Raleway', sans-serif;}
.visual_txtarea h2 em{font-weight:700; font-size:50px;}

.img_box{position:relative; margin-top:66px;}
.img_box .symbol{position:absolute; top:-40px; right:175px; z-index:20;}
.img_box .img{position:absolute;}
.img_box .img a{display:block; position:relative;}
.img_box .img a img{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.img_box .img a .img_bg{position:relative; display:block; padding-top:65%; overflow:hidden; transition:0.5s ease;}
.img_box .img a .img_bg:before{content:''; display:block; position:absolute; top:0; left:-100%; z-index:5; width:100%; height:100%; opacity:0; background:#00b4db; -webkit-background-image:linear-gradient(to right, #00b4db, #0083b0); background-image:linear-gradient(to right, #00b4db, #0083b0); transition:opacity 0.2s ease 0.4s, left 0.6s ease-in-out 0s;}
.img_box .img a:hover{z-index:19;}
.img_box .img a:hover .img_bg{box-shadow:20px 30px 50px rgba(0,0,0,0.2), 0 30px 60px rgba(0,0,0,0.5);}
.img_box .img a:hover .img_bg:before{opacity:0.8; left:0px; transition-delay:0s, 0s;}
.img_box .img a:hover .text_area i{opacity:0.8;}

.img_box .img a .text_area{position:absolute; top:50%; left:0; z-index:6; width:100%; text-align:center; transform:translateY(-50%);}
.img_box .img a .text_area p{color:#fff; font-weight:400; font-size:20px;}
.img_box .img a .text_area p em{font-weight:200;}
.img_box .img a .text_area i{display:block; opacity:0; margin-top:15px; color:#fff; font-size:13px; letter-spacing:1px; transition:opacity 0.5s ease;}
.img_box{position:relative; margin-top:66px; width: 100%; padding-top: 45.8%;}
.img_box .img{position:absolute; margin-top: 20px;}
.img_box .img a{display:block;position:relative;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.img_box .type01{width: 19.167%;height: 0;padding-top: 12.5%;}
.img_box .type02{width:38.334%;height: 0;padding-top: 300px;}
.img_box .type03{width:29.167%;height: 0;padding-top: 19%;}
.img_box .type04{width:23.75%;height: 0;padding-top: 15.44%;}
.img_box .img01{top: 0;right:50%;margin-right: calc(19.167% + 20px);}
.img_box .img02{position: absolute;top: 0;left: 50%;transform: translateX(-50%); margin-top:0;}
.img_box .img03{top: 17.2%;left: 50%;margin-left: calc(19.2% + 20px);}
.img_box .img04{top: 31%;right: 50%;margin-right: calc(19.167% + 20px);}
.img_box .img05{top: 54.5%;right:50%;}
.img_box .img06{top: 54.5%;left:50%;margin-left:20px;}

@media all and (max-width:1080px){
    .area_visual{height:auto !important; min-height:inherit; padding-bottom:30px;}
	.img_box .img a .text_area i{opacity:0.8;}
    .img_box{padding-top:0;}
    .img_box .symbol{display:none;}
    .img_box{width:102%;}
    .img_box .img{position:static; width:31.333%; height:auto; margin:0 2% 2% 0; padding-top:0; float:left; transform:none;}
    .img_box:after{content:""; display:block; clear:both}
    .img_box .img a{position:relative;}
}

@media all and (max-width:840px){
    .visual_txtarea h2{padding-top:40px; font-size:28px;}
    .visual_txtarea h2 em{font-size:38px;}
    .img_box{margin-top:40px;}
    .img_box .img a .text_area p{font-size:18px;}
}


@media all and (max-width:680px){   
    .img_box .img{width:48%;}
}

@media all and (max-width:480px){   
    .visual_txtarea h2{font-size:20px;}
    .visual_txtarea h2 em{font-size:24px;}
    .img_box .img a .text_area p{font-size:15px;}
    .img_box .img a .text_area i{font-size:12px;}
}