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

/******* 社長メッセージ *******/
h2.message_head {background: linear-gradient(-45deg, #FFF 0%, #FFF 11%, #0F218B 11%, #0F218B 100%); display: flex; width:100%; color: #FFF; font-family:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; padding:8px 0 8px 10px; font-size: 20px; margin: 40px 0 20px;}

p.message_txt{margin-left: 10px;}
p.message_txt.shukatsu{margin:0;}
p.message_txt.shukatsu img{width: 170px; height: auto; margin:0 20px 0 0; float: left;}
.title_message_box{display: inline-block; margin: 30px 3% 0; font-family:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; color: #FFF;}
.page_title{font-size: 25px; padding: 0 0 10px; border-bottom: 1px solid #FFF;}
.name{text-align:left; padding: 10px 0 0; font-size: 12px; line-height: 1.7;}
.name span{font-size: 20px;}

/******* 丸文の取り組み *******/
.lead_match{ font-family:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; text-align: center; font-size: 26px; line-height: 1.6em; margin: 40px 0;}
.match_txt{margin: 0 0 0 150px;}
h2.koremade{background: url(../images/match_bg_l.png) no-repeat left top, linear-gradient(90deg, #0f218b 30%, #FFF 100%); background-size: auto 100%; color: #FFF; font-family:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; padding:8px 0 8px 30px; font-size: 20px; margin: 0 0 20px;}
.koremade_img_pc,.korekara_img_pc{display: none;}
.koremade_img_sp,.korekara_img_sp{margin:0; width:130px; float: left;}
.koremade_img_sp img,.korekara_img_sp img{width: 100%; height: auto;}
h2.korekara{background: url(../images/match_bg_r.png) no-repeat right top, linear-gradient(90deg, #FFF 30%, #0f218b 90%); background-size: auto 100%; color: #0f218b; font-family:"Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif; padding:8px 0 8px; font-size: 20px; margin: 40px 0 20px;}
.links{width: 100%; list-style: none; text-align: right; margin:40px 0;}
.links li{display: inline-block; margin: 0 0 0 20px; background: url(../images/icon_ex_link_bk.png) no-repeat 99% 50%; padding-right: 15px;}

/******* オフィス紹介 *******/
.title_office_fukidashi{width: 94%; margin: 30px auto 0; text-align: center;}
.title_office_fukidashi img{width: 100%; max-width: 500px; height: auto;}
.office_bg_box{background:#e7f3ff; padding: 40px 0 0;}
.floor_box{position: relative; margin: 0 0 40px;}
.floor_box h3{color:#0f218b; font-size: 22px; font-weight: normal;}
.photo_box{width: 100%; margin: 0 auto 3px;}
.photo_box img{width: 100%; height: auto;}
.txt_box{width: 100%; background: rgba(255,255,255,0.95); box-shadow: 3px 3px 3px rgba(0,0,0,0.3); padding: 10px;}

/******* 丸文の魅力 *******/
.features_bg_box{background:#e7f3ff;}
.lead_features{font-weight: bold; font-size: 18px; line-height: 1.7em; padding: 40px 0;}
.features_col2,
.features_c{background: #FFF; width: 100%; padding: 20px; margin-bottom: 10px;}
.features_bg_box h2{font-weight: normal; font-size: 28px; margin: 0 0 10px;}
.features_img{width: 100%; margin: -20px 0 15px;}
.features_img img{width: 100%; height: auto;}

#bunri_img{margin:-15px 0 15px;}
h2#gijuturyoku, h2#kenshu{font-size:24px; line-height: 1.5em;}
h2#gijuturyoku span, h2#kenshu span{display: inline-block; font-weight: bold; font-size:34px;}
#gijuturyoku_img{width: 40%; max-width: 200px; float: right; margin: 0 0 0 10px;}
h2#hatsu{font-weight: bold; font-size:60px; color:#0f218b; line-height: 1em;}
#hatsu_img{width: 40%; max-width: 200px; float: right; margin: 0 0 0 10px;}
#kenshu_img{width:100%; max-width: 230px; margin: 0 auto 15px;}

.update{font-size: 12px; text-align: right;}

/******* 社内制度 *******/
ul.anchor_list{list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; border-top: 1px solid #0F218B; border-left: 1px solid #0F218B; margin:0;}
ul.anchor_list li{width: 50%; border-bottom: 1px solid #0F218B; border-right: 1px solid #0F218B;}
ul.anchor_list li a{color: #0F218B; display: block; padding: 5px 10px; background: url("../images/arrow_down.png") no-repeat 95% 50%; background-size: 15px auto;}
h2.h2_benefit{text-align: center; color:#0f218b; font-size:22px; padding: 40px 0 20px;}
.lead_benefit{font-weight: bold; font-size:15px; margin-bottom: 20px;}
h3.h3_benefit{font-size:18px; padding:0 0 5px;}
ul.benefit_content{list-style: none; width:100%;}
ul.benefit_content li{background: #FFF; border-radius:10px; box-shadow: 0px 0px 8px rgba(0,0,0,0.3); padding: 15px; margin: 25px 0;}
.icon_box{width:70px; float: left;}
.icon_box img{width:100%; height: auto;}
.benefit_txt_box{width: calc(100% - 90px); margin-left: 90px;}
.benefit_bg_box{background:#e7f3ff; padding:0 0 20px; margin: 40px 0 0;}
.benefit_content dl dt{border-left: 4px solid #0F218B; font-size: 15px; font-weight: bold; line-height: 1; padding-left: 10px; margin: 10px 0 5px;}
.benefit_content dl dd{padding-left: 14px; line-height: 1.6;}
.training_pickup>h3{font-size:18px; margin: 30px 0 20px; text-align: center;}
.training_pickup dl dt{font-size: 14px; font-weight: bold; padding:0 0 0 10px; margin: 15px 0 5px; line-height: 1; padding-left: 10px;}
.training_pickup dl dt.shikaku{border-left: 4px solid #67bdd1;}
.training_pickup dl dt.mokuteki{border-left: 4px solid #519ece;}
.training_pickup dl dt.keihatsu{border-left: 4px solid #3574b0;}
.training_pickup dl dd{padding:0 0 0 14px;}
.club_fig{margin: 20px 0;}
.club_fig img{max-width: 100%; height: auto;}
.club_name{font-size: 18px; color: #0f218b; padding:5px 30px; background: url("../images/club_bg.png") no-repeat left bottom;}
.update{text-align: right; font-size: 11px; padding: 10px 0 0;}

/******* フッターメニュー *******/
.footer_link_box{width: 100%; margin: 60px 0 0;}
ul.footer_link{width: 100%; list-style: none;}
ul.footer_link li{display: block; color: #FFF;}
ul.footer_link li a{ display: block; background:url(../images/arrow.png) no-repeat 94% 50%, linear-gradient(-15deg, #0f218b 0%, #2234a2 100%) ; color: #FFF; padding: 10px 0;}
ul.footer_link li.footer_link_active{opacity: 0.5; padding: 10px 0;  background:linear-gradient(-15deg, #0f218b 0%, #2234a2 100%);}
ul.footer_link li img{width:35px; height: auto; vertical-align: middle; margin: 0 15px 0;}

@media print, screen and (min-width: 767px) {

/******* 社長メッセージ *******/
h2.message_head{background: linear-gradient(-45deg, #FFF 0%, #FFF 7%, #0F218B 7%, #0F218B 100%); padding:15px 0 15px 150px; width: 76%; font-size: 32px; margin: 80px 0 30px;}
p.message_txt{margin:0 150px;}
p.message_txt.shukatsu{margin:0 150px 0 0;}
p.message_txt.shukatsu img{width: 220px; margin:0 15px 0 0; float: left;}
.title_message_box{margin: 80px 0 0 30px;}
.title_message_box_pc{max-width: 1000px; margin: auto;}
.page_title{font-size: 56px; padding: 0 0 20px; border-bottom: 1px solid #FFF;}
.name{text-align: right; padding: 20px 0 0; font-size: 14px;}
.name span{font-size: 26px;}

/******* 丸文の取り組み *******/
.lead_match{ font-size: 40px; line-height: 1.4em; margin: 80px 0;}
.match_txt{margin: 0 0 0 90px;}
h2.koremade{padding:10px 0 10px 60px; font-size: 30px; margin: 0 0 20px 30px;}
.koremade_img_sp,.korekara_img_sp{display: none;}
.koremade_img_pc{display: block; margin: 40px 0 0;}
h2.korekara{padding:10px 0 10px 60px; font-size: 30px; margin: 80px 30px 20px 30px;}
.korekara_img_pc{display: block; margin: 40px 0 0; text-align: right;}
.links{margin: 80px 0;}

/******* オフィス紹介 *******/
.title_office_fukidashi{width:1000px; margin: 30px auto 0;}
.title_office_fukidashi img{width:765px; max-width:inherit; height: auto;}
.office_bg_box{padding: 80px 0 1px;}
.floor_box{position: relative; margin: 0 0 50px;}
.floor_box h3{font-size: 38px; line-height: 1.2em; position: absolute; z-index: 9998;}
.photo_box{width:1000px; margin: 0 auto; position: static; z-index: 9997;}
.photo_box img{width:auto; height: auto;}
.txt_box{width:450px; position: absolute; padding: 20px; z-index: 9998;}

#eigyo_floor{left:0; top:115px;}
#eigyo_photo{text-align: right;}
#eigyo_txt{left:0; bottom:-20px;}

#kanri_floor{right:0; top:35px;}
#kanri_photo{text-align:left; padding: 40px 0 0 90px;}
#kanri_txt{right:0; top:95px;}

#lounge_floor{left:0; top:90px;}
#lounge_photo{text-align:right; padding: 0 120px 0 0;}
#lounge_txt{left:0; top:150px;}

#info_floor{right:0; top:110px;}
#info_photo{text-align:left; padding: 0 0 0 120px;}
#info_txt{right:0; top:170px;}

#entrance_floor{left:0; top:80px;}
#entrance_photo{text-align:right; padding: 0 120px 0 0;}
#entrance_txt{left:0; top:140px;}

/******* 丸文の魅力 *******/
.features_bg_box{padding: 0 0 1px;}
.lead_features{text-align: center; font-size: 22px; line-height: 1.5em; padding: 60px 0;}
.features_col2_box{display: flex; width: 100%; justify-content: space-between;}

.features_col2{width: 49.5%; padding:30px 25px; margin-bottom: 10px;}
.features_c{width: 100%; padding:30px 25px; margin-bottom: 10px;}
.features_bg_box h2{font-size: 36px; margin: 0 0 25px;}
.features_img{ margin: -35px 0 15px;}

#bunri_img{width: 48%; float: right; margin:-50px 0 0 4%; }
h2#gijuturyoku, h2#kenshu{font-size:30px; line-height: 1.5em;}
h2#gijuturyoku span, h2#kenshu span{font-size:40px;}
#gijuturyoku_img{width: 36%; max-width:inherit; margin: 0 0 0 20px;}
#hatsu_img{width: 36%; max-width:inherit; margin: 0 0 0 20px;}
#kenshu_img{width:25%; float: right; margin: -20px 0 0 4%;}

/******* 社内制度 *******/
ul.anchor_list{list-style: none; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; border-top: 1px solid #0F218B; border-left: 1px solid #0F218B; margin:0;}
ul.anchor_list li{width:20%; border-bottom: 1px solid #0F218B; border-right: 1px solid #0F218B; font-size: 15px;}
ul.anchor_list li a{color: #0F218B; display: block; padding: 10px 10px; transition: 0.3s ease-in-out; background: url("../images/arrow_down.png") no-repeat 95% 50%; background-size: 21px auto;}
ul.anchor_list li a:hover,ul.anchor_list li a:focus{color: #FFF; display: block; padding: 10px 10px; background: url("../images/arrow_down_white.png") no-repeat 95% 50% #0F218B; transition: 0.3s ease-in-out;}
h2.h2_benefit{font-size: 24px; padding: 80px 0 30px;}
.lead_benefit{font-size: 18px; margin-bottom: 30px; text-align: center;}
h3.h3_benefit{font-size:20px; margin-bottom: 5px;}
ul.benefit_content{display: flex; justify-content: space-between; flex-wrap: wrap;}
ul.benefit_content li{width: 48.5%; padding: 25px; margin:16px 0;}
.icon_box{width:90px; float: left;}
.benefit_txt_box{width: calc(100% - 100px);margin-left: 100px;}
.benefit_bg_box{padding:0 0 40px; margin: 80px 0 0;}
.training_pickup>h3{font-size:20px; text-align: left;}
.training_pickup dl dt{font-size: 15px; font-weight: bold; padding:0 0 0 10px; margin: 20px 0 5px; line-height: 1; padding-left: 10px;}
.training_pickup dl dd{padding:0 0 0 14px;}
.club_fig{margin: 50px 0;}
.club_name{font-size: 20px; padding:10px 35px;}
.club_txt{text-align: center;}
.update{ font-size: 12px; padding: 5px 0 0;}

/******* フッターメニュー *******/
.footer_link_box{margin: 90px auto 40px; width:100%; max-width: 1000px;}
ul.footer_link li{width:calc(100% / 5); float: left;}
ul.footer_link li a{ background:url(../images/arrow.png) no-repeat 94% 50%, linear-gradient(-80deg, #0f218b 0%, #2234a2 100%) ;}
ul.footer_link li a:hover{opacity: 0.8; transition: 0.3s ease-in-out;}
ul.footer_link li img{width:25px; height: auto; vertical-align: middle; margin:0 5px 0 10px;}

}