@charset "utf-8";

/*
 recruit common
==============================*/

/* common ----------*/
.JS #Contents { margin: 0; padding: 0; }
#Contents > .GridSet { width: 100%; }
.JS #Contents > .GridSet { margin: 0; }
.JS #Contents .Grid4, .JS #Contents .Grid3, .JS #Contents .Grid1 { padding: 0; }
#Contents .rc_inner { max-width: 965px; margin: auto; }
.JS #Contents .rc_inner { padding: 0 15px; }
#Contents .ib { display: inline-block; }
.JS #Contents h2, .JS #Contents .LV1LinkSet { margin-left: 0; margin-right: 0; }
#Contents a { transition: all 0.2s ease-out; }
#Contents a:hover { opacity: 0.6; }
@media screen and (min-width:737px) { /* iPhone 横以上 */
	#Contents .sp { display:none !important; }
}
@media screen and (max-width:736px) { /* iPhone 横 */
	#Contents .pc { display:none !important; }
}
@media screen and (max-width:767px) {
	#Contents .pc { display: none; }
	#ContentsX {
		margin-left: -16px;
		margin-right: -16px;
	}
}


/* rc_header ----------*/
#rc_header { background-color: #000; }
#rc_header .nav { position: relative; display: flex; }
#rc_header .nav > a { display: block; width: calc(100% / 6); padding: 20px 2px; color: #FFF; text-align: center; text-align: center; text-decoration: none; line-height: 1.2; font-size: 16px; font-weight: bold; }
#rc_header .nav > a:hover { opacity: 1; color: #333; background-color: #FFF; }
#rc_header .nav div { position: absolute; z-index: 100; top: 100%; width: calc((100% / 6) + 40px); overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.2s ease-out; }
#rc_header .nav div:before { content: ""; position: absolute; top: 0; left: 0; right: 0; margin: auto; width:0; height:0; border:10px solid transparent; border-bottom:10px solid rgba(0, 0, 0, 0.75); }
#rc_header .nav div.sn1 { left: -20px; }
#rc_header .nav div.sn2 { left: calc((100% / 6) - 20px); }
#rc_header .nav div.sn3 { left: calc(((100% / 6) * 2) - 20px); }
#rc_header .nav div.sn4 { left: calc(((100% / 6) * 3) - 20px); }
#rc_header .nav div.sn5 { left: calc(((100% / 6) * 4) - 20px); }
#rc_header .nav div.sn6 { left: calc(((100% / 6) * 5) - 20px); }
#rc_header .nav div:hover { opacity: 1; pointer-events: auto; }
#rc_header .nav > a:hover + div { opacity: 1; pointer-events: auto; }
#rc_header .nav ul { margin-top: 20px; padding: 15px 10px; background-color: rgba(0, 0, 0, 0.75); }
#rc_header .nav ul li { width: 100%; padding: 5px 0; box-sizing: border-box; }
#rc_header .nav ul li a { display: block; color: #FFF; text-decoration: none; text-align: center; font-size: 14px; font-weight: bold; }
#rc_header #nav_bar { position: absolute; z-index: 110; right: 0; display: none; width: 50px; height: 50px; }
#rc_header #nav_bar:hover { cursor: pointer; }
#rc_header #nav_bar span { position: relative; display: block; width: inherit; height: inherit; }
#rc_header #nav_bar:after, #rc_header #nav_bar span:before, #rc_header #nav_bar span:after { position: absolute; left: 25%; content: ""; display: block; width: 50%; height: 2px; background-color: #FFF; transition: all 0.2s ease-out; }
#rc_header #nav_bar:after { top: 28%; }
#rc_header #nav_bar span:before { top: calc(50% - 1px); }
#rc_header #nav_bar span:after { bottom: 28%; }
#rc_header #nav_bar:hover:after { top: 35%; }
#rc_header #nav_bar:hover span:after { bottom: 35%; }
	#rc_header.nav_open #nav_bar:after { top: calc(50% - 1px); -webkit-transform: rotate(135deg); transform: rotate(135deg); }
	#rc_header.nav_open #nav_bar span:before { opacity: 0; }
	#rc_header.nav_open #nav_bar span:after { bottom: calc(50% - 1px); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); }
@media screen and (max-width:767px) {
	#rc_header { height: 50px; overflow: hidden; transition:height 0.3s ease-out; }
	#rc_header.nav_open { height: 750px; }
	#rc_header .nav { display: block; padding-top: 50px; }
	#rc_header .nav > a { width: 100%; padding: 10px 2px; }
	#rc_header .nav div { position: inherit; opacity: 1; width: 100%; left: 0 !important; margin-top: -10px; pointer-events: auto; }
	#rc_header .nav div:before {  border-bottom:10px solid rgba(255, 255, 255, 0.2); }
	#rc_header .nav ul { background-color: rgba(255, 255, 255, 0.2); }
	#rc_header #nav_bar { display: block; }
}

/* rc_contents ----------*/
#rc_contents { width: 100%; overflow: hidden; }
#rc_contents .rc_sec { padding: 50px 0; }
#rc_contents .rc_sec_top { padding: 50px 0 0 0; }
#rc_contents h2 { margin-left: 0 !important; background-image: none; line-height: 1; font-weight: bold; }
#rc_contents h2 span { margin: 0; background-color: transparent; padding: 0; display: inline-block; }
#rc_contents .rc_h2 { color: #CC0022; font-size: 36px; }
#rc_contents .rc_h2c { text-align: center; }
#rc_contents .rc_h2 small { color: #333; font-size: 16px; font-weight: bold; }
#rc_contents .rc_ph2 { font-size: 22px; color: #333; }
#rc_contents .rc_ph3 { font-size: 34px; color: #CC0022; line-height: 1.5; border-bottom: solid 3px #CC0022; margin-bottom: 30px; }
#rc_contents .rc_ph3 small { font-size: 20px; }
#rc_contents h3 { margin-left: 0; padding-left: 0; border: none; }
#rc_contents .rc_h3 { color: #333; font-size: 24px; font-weight: bold; }
#rc_contents h4 { margin-left: 0; padding-left: 0; border: none; }
#rc_contents .rc_h4 { color: #CC0022; font-size: 18px; font-weight: bold; }
#rc_contents .rc_h5 { color: #333; font-size: 20px; font-weight: bold; text-align: center; line-height: 2; }
#rc_contents .bt { display: inline-block; width: 100%; max-width: 285px; padding: 15px 10px; border-radius: 4px; color: #FFF; background-image: url(/image/hsl/about/recruit_new/common/icon_bt_next.svg); background-position: right 10px center; background-repeat: no-repeat; background-color: #CC0022; text-align: center; text-decoration: none; line-height: 1.2; font-weight: bold; font-size: 16px; box-sizing: border-box; }
#rc_contents .bt-white { color: #CC0022; background-color: #FFF; background-image: url(/image/hsl/about/recruit_new/common/icon_bt_next2.svg); }
#rc_contents .youtube_wrap { position: relative; height: 0; overflow: hidden; padding-bottom: 56.25%; }
#rc_contents .youtube_wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* rc_pmv ----------*/
#rc_pmv { width: 100%; height: 300px; background-repeat: no-repeat; background-position: center; background-size: cover; }
#rc_pmv .rc_inner { position: relative; height: inherit; }
#rc_pmv h1 { position: absolute; bottom: 30px; left: 20px; display: block; color: #CC0022; line-height: 1; font-size: 36px; font-weight: bold; }
#rc_pmv h1 span { display: block; padding-top: 10px; color: #FFF; font-size: 16px; }
@media screen and (max-width:767px) {
	#rc_pmv { height: 40vw; }
}

/* rc_footer ----------*/
#rc_footer { background-color: #CC0022; }
#rc_footer a { text-decoration: none; }
#rc_footer .rc_h2 { color: #FFF; }
#rc_footer .rc_h2 small { color: #FFF; }
#rc_footer .w { max-width: 360px; margin: auto; margin-bottom: 40px; }
#rc_footer .w .links { display: flex; margin-bottom: 25px; }
#rc_footer .w .links a { display: block; width: calc((100% - 65px) / 2); padding: 15px 0; border-bottom: solid 2px #FFF; color: #FFF; background-image: url(/image/hsl/about/recruit_new/common/icon_bt_next.svg); background-position: right center; background-repeat: no-repeat; font-size: 16px; font-weight: bold; }
#rc_footer .w .links a:first-child { margin-right: 65px; }
#rc_footer .w .movie { display: block; width: 100%; padding: 15px; border: solid 2px #FFF; color: #FFF; text-align: center; font-size: 16px; font-weight: bold; box-sizing: border-box; }
#rc_footer .entry { display: block; max-width: 620px; margin: auto; padding: 20px; background-color: #FFF; text-align: center; box-sizing: border-box; -webkit-transform: skew(-45deg); transform: skew(-45deg); }
#rc_footer .entry span { display: block; color: #CC0022; font-size: 24px; font-weight: bold; -webkit-transform: skew(45deg); transform: skew(45deg); }
@media screen and (max-width:800px) {
	#rc_footer .w .links a { width: calc((100% - 30px) / 2); }
	#rc_footer .w .links a:first-child { margin-right: 30px; }
	#rc_footer .entry { max-width: 85%; }
}

/* rc_news ----------*/
#rc_news {}
#rc_news .list { display: flex; flex-wrap: wrap; }
#rc_news .list a { width: calc((99.9% - 60px) / 3); margin: 0 10px; margin-bottom: 20px; background-color: #F2F2F2; }
#rc_news .list a { display: block; text-decoration: none; }
#rc_news .list a span { display: block; }
#rc_news .list a .pw { width: 100%; padding-top: 55%; background-repeat: no-repeat; background-position: center; background-size: cover; }
#rc_news .list a .tw { padding: 30px 20px; box-sizing: border-box; }
#rc_news .list a .h { margin-bottom: 20px; padding-bottom: 10px; border-bottom: solid 4px #CC0022; color: #CC0022; font-size: 18px; font-weight: bold; }
#rc_news .list a .t { color: #333; font-size: 16px; margin-bottom: 10px; }
#rc_news .list a .d { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px; }
#rc_news .list a .cw {}
#rc_news .list a .cw .c, #rc_news_search .cw .c, #rc_news_page .cw .c { margin-right: 10px; display: inline-block; font-size: 15px; font-weight: bold; color: #CC0022; line-height: 1; padding: 7px 12px; background-color: #FFF; border-radius: 50px; }
#rc_news .list a .cw .c:last-child, #rc_news_search .cw .c:last-child, #rc_news_page .cw .c:last-child { margin-right: 0; }
#rc_news .btw { text-align: center; }
#rc_news_search { width: 100%; background-color: #1C1B1B; display: flex; margin-bottom: 30px; }
#rc_news_search > span { display: block; }
#rc_news_search > span.h { background-color: #545454; color: #FFF; padding: 8px 60px; font-size: 15px; font-weight: bold; }
#rc_news_search > span.cw { padding: 3px 15px; }
#rc_news_search > span.cw .c { margin-top: 5px; margin-bottom: 5px; }
#rc_news_search > span.cw .c:hover { cursor: pointer; opacity: 0.6; }
#rc_news_search > span.cw .c.active {background-color: #CC0022 ; color: #FFF; }
@media screen and (max-width:800px) {
	#rc_news .list a { width: calc((99.9% - 40px) / 2); margin: 0 10px !important; }
}
@media screen and (max-width:428px) { /* iPhone 縦 s */
	#rc_news .list a { width: 100%; margin-right: 0 !important; }
	#rc_news_search { flex-wrap: wrap; }
	#rc_news_search > span.h { width: 100%; text-align: center; }
	#rc_news_search > span.cw { width: 100%; }
	#rc_news_search > span.cw .c { font-size: 12px; }
}

