@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
.main{padding-bottom: 100px; background:#f8f9f9;}
.main .mainVisual{position:relative; height:600px; background:url(../img/main_visual.jpg) no-repeat top center;}
.main .mainVisual p{position:absolute; top:180px; left:50%; width:1180px; margin-left:-590px; color:#fff; }
.main .mainVisual p span{display:block; line-height:1; text-transform: uppercase; text-shadow: 0 0 18px rgba(0,0,0,.1);}
.main .mainVisual p span br{display:none;}
.main .mainVisual p span strong{font-size:50px; font-weight:500; letter-spacing: -0.05em;}
.main .mainVisual p span.txt01{margin-bottom:20px; font-family: 'Roboto', sans-serif; font-size:20px; opacity:0.5; color:#fff;}
.main .mainVisual p span.txt03{margin-top:30px; font-size:24px; font-weight:500;}

.main .bottom{position:relative; width:1180px; margin:-50px auto 0; z-index:1;}
.main .bottom .mainLink a{display:block; position:relative; float:left; width:calc((100% - 40px) / 3); color:#333; line-height:1; line-height:150%;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -ms-transition:all 0.3s ease;
    transition:all 0.3s ease;
}
.main .bottom .mainLink a+a{margin-left:20px;}
.main .bottom .mainLink a p{width:calc(100% - 30px); padding:40px 0 40px 125px; background-color:#fff; background-repeat:no-repeat; background-position:30px center; background-size:62px 59px; box-shadow: 3px 3px 30px rgba(0,0,0,.2);
    -webkit-transition:box-shadow 0.3s ease;
    -moz-transition:box-shadow 0.3s ease;
    -ms-transition:box-shadow 0.3s ease;
    transition:box-shadow 0.3s ease;
}
.main .bottom .mainLink .link01{background-image:url(../img/ico_main_link01.png);}
.main .bottom .mainLink .link02{background-image:url(../img/ico_main_link02.png);}
.main .bottom .mainLink .link03{background-image:url(../img/ico_main_link03.png);}
.main .bottom .mainLink a strong{display:block; margin-bottom:15px; font-size:22px; font-weight:500;}
.main .bottom .mainLink a:before{content:""; display:block; position:absolute; top:0; right:0; width:0; height:0; border-top:15px solid transparent; border-right:15px solid transparent; border-bottom:15px solid #fff; border-left:15px solid #fff;}
.main .bottom .mainLink a:after{content:""; display:block; position:absolute; bottom:0; right:0; width:30px; height:calc(100% - 30px); background:#fff; box-shadow: 5px 5px 5px rgba(0,0,0,.05);
    -webkit-transition:box-shadow 0.3s ease;
    -moz-transition:box-shadow 0.3s ease;
    -ms-transition:box-shadow 0.3s ease;
    transition:box-shadow 0.3s ease;
}
.main .bottom .mainLink a:hover p{box-shadow: 3px 3px 30px rgba(0,0,0,.5);}
.main .bottom .mainLink a:hover:after{box-shadow: 5px 5px 5px rgba(0,0,0,.08);}

.main .recently{position:relative; margin-top:50px; padding:40px; background:#005c7e;}
.main .recently:after{content:""; display:block; position:absolute; top:0; right:0; width:0; height:0; border-top:15px solid #f8f9f9; border-right:15px solid #f8f9f9; border-bottom:15px solid #005c7e; border-left:15px solid #005c7e;}
.main .recently .tit_board{display:inline-block; font-size:40px; font-family: 'Roboto', sans-serif; color:#fff; font-weight:700; line-height:1;
    -webkit-transition:all 0.15s ease;
    -moz-transition:all 0.15s ease;
    -ms-transition:all 0.15s ease;
    transition:all 0.15s ease;
}
.main .recently .tit_board:after{content:""; display:inline-block; width:30px; height:30px; margin-left:20px; background:url(../img/ico_main_link.png) no-repeat top left; background-size:cover; border-radius:50%;
    -webkit-transition:all 0.15s ease;
    -moz-transition:all 0.15s ease;
    -ms-transition:all 0.15s ease;
    transition:all 0.15s ease;
}
.main .recently .tit_board:hover{text-shadow:0 5px 10px rgba(0,0,0,.5);}
.main .recently .tit_board:hover:after{box-shadow:0 5px 10px rgba(0,0,0,.5);}
.main .recently ul{margin-top:30px;}
.main .recently ul li{float:left; width:calc((100% - 60px) / 4);}
.main .recently ul li+li{margin-left:20px;}
.main .recently ul li a{display:block; position:relative; height:150px; padding:40px 30px 30px; background:#fff; color:#666;
    -webkit-transition:all 0.15s ease;
    -moz-transition:all 0.15s ease;
    -ms-transition:all 0.15s ease;
    transition:all 0.15s ease;
}
.main .recently ul li a strong{display:block; max-height:50px; margin-bottom:15px; font-size:20px; font-weight:700; color:#333; line-height:120%; overflow:hidden; word-break: break-all;}
.main .recently ul li a .date{display:block; position:absolute; bottom:30px; left:30px; font-size:14px; color:#999; line-height:1; font-weight:400;}
.main .recently ul li a:after{content:""; display:block; position:absolute; bottom:0; right:0; width:40px; height:40px; background:url(../img/ico_more.gif) no-repeat top left;}
.main .recently ul li a:hover{
    box-shadow: 0 5px 20px rgba(0,0,0,.5);
}
.main .recently ul li a:hover strong{color:#005c7e;}

@media screen and (max-width:1200px){
    .main{padding-bottom: 70px;}
    .main .mainVisual p{left:0; width:auto; margin-left:0; padding:0 20px;}
    .main .mainLink{display:-webkit-flex; display:-moz-flex; display:-ms-flex; display:flex;}
    .main .bottom{width:auto; padding:0 20px;}
    .main .bottom .mainLink a p{height:100%;}
}

@media screen and (max-width:1024px){
    .main .mainVisual{height:250px; background-size:cover;}
    .main .mainVisual p{top:50px; left:0; width:100%; margin-left:0; padding-left:20px;}
    .main .mainVisual p span br{display:block;}
    .main .mainVisual p span strong{font-size:23px; line-height:130%;}
    .main .mainVisual p span.txt01{margin-bottom:10px; font-size:11px;}
    .main .mainVisual p span.txt03{margin-top:10px; font-size:13px;}

    .main .mainLink{display:block;}
    .main .bottom{margin-top:-25px;}
    .main .bottom .mainLink a{float:none; width:100%;}
    .main .bottom .mainLink a+a{margin-top:10px; margin-left:0;}
    .main .bottom .mainLink a p{width:calc(100% - 20px); padding:25px 0 25px 60px; background-position:15px center; background-size:36px 34px; white-space:nowrap; line-height:1;}
    .main .bottom .mainLink a p br{display:none;}
    .main .bottom .mainLink a strong{margin-bottom:10px; font-size:14px;}
    .main .bottom .mainLink a:before{border-top:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #fff; border-left:10px solid #fff;}
    .main .bottom .mainLink a:after{width:20px; height:calc(100% - 20px);}

    .main .recently{margin-top:40px; padding:15px;}
    .main .recently:after{border-top:10px solid #f8f9f9; border-right:10px solid #f8f9f9; border-bottom:10px solid #005c7e; border-left:10px solid #005c7e;}
    .main .recently .tit_board{font-size:20px;}
    .main .recently .tit_board:after{width:20px; height:20px; margin-left:10px; vertical-align: middle;;}
    .main .recently ul{margin-top:15px;}
    .main .recently ul li a{height:100px; padding:15px 10px 10px;}
    .main .recently ul li a strong{max-height:32px; margin-bottom:10px; font-size:14px;}
    .main .recently ul li a .date{bottom:15px; left:15px; font-size:11px;}
    .main .recently ul li a:after{width:30px; height:30px; background-image:url(../img/ico_more_m.gif); background-size:30px 30px;}
}

@media screen and (max-width:767px){
    .main .bottom .mainLink a p{padding:20px 0 20px 60px;}

    .main .recently ul li{width:calc((100% - 10px) / 2); margin-top:10px;}
    .main .recently ul li+li{margin-left:0;}
    .main .recently ul li:nth-of-type(2n){margin-left:10px;}
    .main .recently ul li:nth-child(-n+2){margin-top:0;}
}