@charset "utf-8";
/* CSS Document */

.full{height:100%; width:100%; position: fixed; z-index: 1;}

.full div {
  background-repeat: no-repeat;
  background-size:cover;
  background-position:center 20%;
  height: 100vh;
  margin: 0;
  position: static;
  z-index: 1;
}
.full div.img01{background-image:url(../images/main01_sp.jpg);}
.full div.img01 .copy{width:90%; margin: 200px auto 350px;}
.full div.img01 .copy picture img{width:100%; height: auto;}
.full div.img02{background-image:url(../images/main02_sp.jpg);}
.full .slick-dots { bottom: 4%; z-index: +1;}
* {box-sizing: border-box;}

.catchcopy2{padding: 200px 15px; width:95%; margin: auto;}
.catchcopy2 img{width:100%; height: auto;}

.menu_area_left{width: 95%; background: rgba(15,33,139,0.8); padding:20px 5%; margin: 20px 0;}
.menu_area_right{width: 95%; background: rgba(15,33,139,0.8); padding:20px 5%; float: right; margin: 20px 0;}
.menu_txt{width:100%;}
.menu_txt h2{color: #FFF; font-size:40px; font-weight: normal; line-height: 1em;}
.menu_txt h2 span.en{font-size: 20px; display: block;}
.menu_txt p{color: #FFF; font-size: 13px; margin: 10px 0 0;}

ul.menu_about,
ul.menu_work{list-style: none; width: 90%; margin: 20px auto;}
ul.menu_about li,
ul.menu_work li{font-size: 11px; width: 46%; float: left; margin: 2%; text-align: center;}
ul.menu_about li a{display: block; color: #FFF; border: 1px solid #FFF; border-radius: 3px; padding: 100px 0 0;}
ul.menu_about li#menu_message a{ background: url(../images/icon_message.png) no-repeat 50% 20%; background-size:auto 70%;}
ul.menu_about li#menu_match a{ background: url(../images/icon_match.png) no-repeat 50% 20%; background-size:auto 70%;}
ul.menu_about li#menu_office a{ background: url(../images/icon_office.png) no-repeat 50% 20%; background-size:auto 70%;}
ul.menu_about li#menu_features a{ background: url(../images/icon_features.png) no-repeat 50% 20%; background-size:auto 70%;}

ul.menu_work li a{display: block; color:#0F218B; transition: 0.2s ease-in-out;}
ul.menu_work li a:hover{opacity: 0.8; transition: 0.2s ease-in-out;}
ul.menu_work li a div.work_btn{background: #FFF; border-radius: 3px; line-height: 2.4em;}
ul.menu_work li a img{width: 100%; height: auto;}

.menu_person{width: 75%; min-width: 240px; margin: 20px auto;}
#menu_job{width:100%; min-width: 240px; margin: 20px auto;}
#menu_job img{width: 100%; height: auto; border: 3px solid #FFF; border-radius: 3px;}
.menu_person ul li{width:100%; text-align: center; margin: 20px 0; list-style: none;}
.menu_person ul li img{width: 100%; height: auto; border: 3px solid #FFF; border-radius: 3px;}

.menu_crosstalk{width:100%; min-width: 240px; margin: 20px auto; list-style: none;}
.menu_crosstalk li{margin: 20px auto;}
.menu_crosstalk img{width: 100%; height: auto; border: 3px solid #FFF; border-radius: 3px;}


.map_box{ margin: 50px 0 0;}
.map{color: #FFF; background: #5b6ee1; text-align: center; font-size: 18px; line-height: 2.5em;}
#googlemap{width: 100%; height: 360px; vertical-align:bottom;}

.menu_movie{width:100%;}
.menu_movie img{width: 100%; height: auto;}
.btn_movie{margin: 20px 0; width: 160px; text-align: center;}
.btn_movie a{display: block; color: #FFF; padding: 5px; border: 1px solid #FFF; border-radius: 3px; transition: 0.2s ease-in-out;}

@media print, screen and (min-width: 767px) {

.full div.img01{background-image:url(../images/main01.jpg);}
.full div.img01 .copy{width:1000px; max-width: 1200px; margin: 250px auto; padding:0 10% 0 5%;}
.full div.img02{background-image:url(../images/main02.jpg);}
.catchcopy2{padding: 180px 0 240px 0px; width:65%; max-width: 650px; margin: 0 auto; text-align: center;}
.catchcopy2 img{max-width: 980px;}

.menu_area_left{padding:60px 8%; margin:40px 0;}
.menu_area_left .menu_txt{width: 43%; float: left;}
.menu_area_right{padding:60px 9% 60px 7%; margin:40px 0;}
.menu_area_right .menu_txt{width: 40%; float:right;}
.menu_txt h2{font-size:54px;}
.menu_txt h2.headline_movie{font-size:52px;}
.menu_txt h2 span.en{font-size: 26px;}
.menu_txt p{font-size: 14px; margin: 20px 0 0;}

ul.menu_about{float:left; width:57%; max-width: 750px; margin:0;}
ul.menu_about li{font-size: 12px; width:23%; margin: 1%;}
ul.menu_about li a{padding: 150px 0 10px; line-height: 1.4; transition: 0.2s ease-in-out;}
ul.menu_about li a:hover{color:#0F218B; transition: 0.2s ease-in-out;}

ul.menu_about li#menu_message a,
ul.menu_about li#menu_match a,
ul.menu_about li#menu_office a,
ul.menu_about li#menu_features a,
ul.menu_about li#menu_benefit a{ background-size:120px;}
ul.menu_about li#menu_message a:hover{ background: url(../images/icon_message_blue.png) no-repeat 50% 20% #FFF; background-size:120px;}
ul.menu_about li#menu_match a:hover{ background: url(../images/icon_match_blue.png) no-repeat 50% 20% #FFF; background-size:120px;}
ul.menu_about li#menu_office a:hover{ background: url(../images/icon_office_blue.png) no-repeat 50% 20% #FFF; background-size:120px;}
ul.menu_about li#menu_features a:hover{ background: url(../images/icon_features_blue.png) no-repeat 50% 20% #FFF; background-size:120px;}

ul.menu_work{float:right; width: 50%; margin:0 40px 0 0;}
ul.menu_work li{font-size: 14px; max-width: 215px;}
ul.menu_work li .work_img{min-height: 130px;}

.menu_person{float:right; width: 50%; margin:0;}
.menu_person a:hover{opacity: 0.8; transition: 0.2s ease-in-out;}
#menu_job{width:98%; margin:0 auto 10px;}
#menu_job img{width: 100%; height: auto; border: 3px solid #FFF; border-radius: 3px;}
.menu_person ul{display: flex; justify-content:space-between;}
.menu_person ul li{width:31.5%; margin:0 auto;}
.menu_person ul li img{width: 100%; height: auto; border: 3px solid #FFF; border-radius: 3px;}

.menu_crosstalk{float: left; width:37%; margin: 0 0 0 90px;}
.menu_crosstalk a:hover{opacity: 0.8; transition: 0.2s ease-in-out;}
.menu_crosstalk li{margin: 20px auto;}
.menu_crosstalk img{width: 100%; height: auto; border: 3px solid #FFF; border-radius: 3px;}

.map_box{ margin: 80px 0 0;}
.map{font-size: 30px;}
#googlemap{min-width: 960px; height: 460px; margin: 0;}

.menu_movie{float:right; width: 50%;}
.btn_movie a:hover{display: block; color:#031460; padding: 5px; border: 1px solid #FFF; background: #FFF; border-radius: 3px; transition: 0.2s ease-in-out;}

}
