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

p,li {
	font-size: 16px;
	color: #000;
	line-height: 180%;
}
.mb10 { margin-bottom: 10px !important; }
.red { color: #f00; }

#suntory_contents {
    padding-bottom: 0;
}

#main_visual_wrap {
	width: 100%;
	height: 315px;	
	background: url(/recruit/group/sun/img/top_mv2000.png) center top no-repeat;
	background-size: 2000px 315px;
	margin-bottom: 40px;
}
#main_visual {
	width: 1164px;
	height: 315px;	
	margin: 0 auto;
	background: url(/recruit/group/sun/img/top_mv1164.png) center top no-repeat;
	background-size: 1164px 315px;
}
#main_visual h1 {
	padding: 100px 0 0 45px;
	font-size: 40px;
	font-weight: bold;
	line-height: 140%;
}
@media screen and (max-width: 1164px) {
#main_visual_wrap {
	background: none; 
	height: auto;
	margin-bottom: 3.4%;
}
#main_visual {
	width: 100%;
	height: auto;
	padding-bottom: 27%;
	background: url(/recruit/group/sun/img/top_mv1164.png) center top no-repeat;
	background-size: 100% auto;
	position: relative;
}
#main_visual h1 {
	position: absolute;
	top: 0;
	left: 0;
	padding: 8.5% 0 0 3.8%;
	font-size: 38px;
	line-height: 130%;
}		
}
@media screen and (max-width: 960px) {
#main_visual_wrap {
	background: none; 
	height: auto;
	margin-bottom: 33px;
}
#main_visual {
	width: 960px;
	height: auto;
	padding-bottom: 260px;
	background: url(/recruit/group/sun/img/top_mv1164.png) center top no-repeat;
	background-size: 100% auto;
	position: relative;
}
#main_visual h1 {
	font-size: 36px;
}		
}


#news_block {
	margin:0 0 40px 40px;
	overflow: hidden;
}
#news_block h2#news_title {
    font-size: 16px;
	font-weight: bold;
	float: left;
	letter-spacing: 0.5px;
}
#news_block dl#news {
    float: left;
	margin-left: 40px;
	font-size: 14px;
	color: #444;
    line-height: 160%;
}
#news_block dl#news span {
	display: block;
}
#news_block dl#news span dt {
    display: block;
    float: left;
	width: 140px;
}
#news_block dl#news span dd {
	display: inline-block;
}
#news_block dl#news span dd a {
	color: #444;
}
#news_block dl#news span dd a:hover {
    text-decoration: underline;
	cursor: pointer;
	opacity: 0.7;
}
#news_block dl#news span dd span.bold {
	display: inline;
	font-weight: bold;
}
#news_block dl#news span dd span.detail {
	margin-left: 1.5em;
}



#contents .recruit_block {
	width: calc(100% - 80px);
    margin-bottom: 80px;
    overflow: hidden;
    padding: 40px 40px 10px 40px;
}
#contents .recruit_block .contents_title_block {
	width: 20%;
	float: left;
}
#contents .recruit_block .contents_title_block h2 {
	font-size: 30px;
	color: #000;
	font-weight: bold;
	margin-top: 2vw;
}
#contents .recruit_block .contents_block {
	width: 80%;
	float: right;
	overflow: hidden;
}
#contents .recruit_block .contents_block .contents_sub_block {
	width: 100%;
	margin-bottom: 30px;
	overflow: hidden;
	position: relative;
}
#contents .recruit_block .contents_block .contents_sub_block h3 {
	width: calc( 100% - 700px );
	float: left;
	font-size: 24px;
    font-weight: bold;
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
    left: 0;
}
#contents .recruit_block .contents_block .contents_sub_block.long h3 {
    transform: translateY(-100%);
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap {
	width: 700px;
	float: right;
	
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn {
	width: 100%;
	overflow: hidden;
	padding: 0;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li {
	width: 330px;
	height: 100px;
	margin-right: 40px;
	float: left;
	list-style-type: none;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li:nth-child(even) {
	margin-right: 0;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li a {
	display: block;
	width: 330px;
	height: 100px;
	position: relative;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li a h4 {
		font-size: 20px;
        font-weight: bold;
        color: #000;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 60px;
		margin: 0;
}
p.comment {
	margin-top: 10px;
	text-align: right;
	font-size: 12px;
	color: #444;
}


#contents #fresh_block {
	background: url(/recruit/group/sun/img/pc_fresh_square.png) left top no-repeat;
	background-size: 10% auto;
	background-color: #ffe6c1;
}
#contents #fresh_block .contents_block .btn_wrap ul.fresh_btn li a {
	background: url(/recruit/group/sun/img/btn1.png) left top no-repeat;
	background-size: 100% auto;
}
#contents #fresh_block .contents_block .btn_wrap ul.fresh_btn li a:hover {
	background: url(/recruit/group/sun/img/btn1_on.png) left top no-repeat;
	background-size: 100% auto;
	cursor: pointer;
}

#contents #careers_block {
	background: url(/recruit/group/sun/img/pc_keiken_square.png) left top no-repeat;
	background-size: 10% auto;
	background-color: #fff0bb;
}

#contents #careers_block .contents_block .btn_wrap ul.careers_btn li a {
	background: url(/recruit/group/sun/img/btn2.png) left top no-repeat;
	background-size: 100% auto;
}
#contents #careers_block .contents_block .btn_wrap ul.careers_btn li a:hover {
	background: url(/recruit/group/sun/img/btn2_on.png) left top no-repeat;
	background-size: 100% auto;
	cursor: pointer;
}

@media screen and (max-width: 1164px) {
#contents .recruit_block {
	width: calc( 100% - 60px );
    margin-bottom: 70px;
    padding: 30px 30px 10px 30px;
}
#contents .recruit_block .contents_block .contents_sub_block h3 {
	width: calc( 100% - 80% );
	font-size: 24px;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap {
	width: 80%;	
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li {
	width: 47%;
	height: 8vw;
	margin-right: 6%;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li a {
	width: 100%;
	height: 8vw;
}
#contents .recruit_block .contents_title_block h2 {font-size: 28px;}
#contents .recruit_block .contents_block .contents_sub_block h3 {font-size: 22px;}	
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li a h4 {font-size: 18px;}
	
}

@media screen and (max-width: 960px) {
#contents .recruit_block {
	width: calc( 960px - 60px );
    margin-bottom: 60px;
    padding: 30px 30px 10px 30px;
}
#contents .recruit_block .contents_block {
	width: 720px;
}
#contents .recruit_block .contents_title_block {
	width: 180px;
}
#contents .recruit_block .contents_block .contents_sub_block h3 {
	width: 154px;
	font-size: 22px;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap {
	width: 566px;	
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li {
	width: 266px;
	height: 77px;
	margin-right: 34px;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li a {
	width: 100%;
	height: 77px;
}
#contents .recruit_block .contents_title_block h2 {font-size: 26px;}
#contents .recruit_block .contents_block .contents_sub_block h3 {font-size: 20px;}	
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li a h4 {font-size: 16px;}
	
}




#introduction_wrap {
	width: 100%;
	height: 380px;
	background: url(/recruit/group/sun/img/top_foot2000.png) center top no-repeat;
	background-size: 2000px 380px;
}
#introduction {
	width: 1080px;
	height: 380px;	
	margin: 0 auto;
	background: url(/recruit/group/sun/img/top_foot1080.png) center top no-repeat;
	background-size: 1080px 380px;
}
#introduction h2 {
	font-size: 30px;
	font-weight: bold;
	color: #000;
	margin-bottom: 60px;
}
#introduction ul#company {
	width: 100%;
	height: 200px;
}
#introduction ul#company li {
	width: 240px;
	height: 200px;
	margin-right: 40px;
	float: left;
    box-shadow: 0 10px 15px 0 rgba(0,0,0,0.35);
}
#introduction ul#company li:last-child {
	margin-right: 0;
}
#introduction ul#company li a {
	display: block;
	width: 240px;
	height: 200px;
	background: url(/recruit/group/sun/img/intro_bg1.png) left top no-repeat;
	background-size: 100% auto;
}
#introduction ul#company li a:hover {
	cursor: pointer;
	background: url(/recruit/group/sun/img/intro_bg1_on.png) left top no-repeat;
	background-size: 100% auto;
}
#introduction ul#company li a h4,
#introduction ul#company li#intro h4 {
    padding: 40px 0 0 30px;
	font-size: 22px;
	font-weight: bold;
	color: #000;
	display: inline-block;
	text-decoration: none;
}
#introduction ul#company li a h4 span {
	display: block;
	font-size: 60%;
}

#introduction ul#company li#intro {
	background: url(/recruit/group/sun/img/intro_bg2.png) left top no-repeat;
	background-size: 100% auto;
}
#introduction ul#company li#intro #intro_inner {
    margin: 20px 0 0 10%;
    padding: 0 0 0 30px;
    position: relative;
    width: 65%;
	padding-bottom: 30%;
}
#introduction ul#company li#intro #intro_inner p {
	position: absolute;
	left: 0;
	width: 100%;
}
#introduction ul#company li#intro #intro_inner p#intro1 {
	top:0;
}
#introduction ul#company li#intro #intro_inner p#intro2 {
 	top: 28%;	
}
#introduction ul#company li#intro #intro_inner p#intro3 {
	top: 56%;
}
#introduction ul#company li#intro #intro_inner p a {
	font-size: 16px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	display: inline-block;
    width: calc( 100% - 5px );
	padding-left: 5px;
    height: auto;
	background: url(/recruit/group/sun/img/arrow.png) right 10px bottom 11px no-repeat;
	background-size: 25px 13px;
}
#introduction ul#company li#intro #intro_inner p a:hover {
	cursor: pointer;
	background: url(/recruit/group/sun/img/arrow_on.png) right 10px bottom 11px no-repeat;
	background-size: 25px 13px;
	background-color: #ffb111;
}
@media screen and (max-width: 1080px) {
#introduction_wrap {
	height: auto;
	background: none;
}
#introduction {
	width: 100%;
	height: auto;	
	padding-bottom: 5%;
	background: url(/recruit/group/sun/img/top_foot1080.png) center top no-repeat;
	background-size: 100% auto;
}
#introduction h2 {
	font-size: 28px;
	margin-bottom: 5.55%;
}
#introduction ul#company {
	height: 18.3vw;
}
#introduction ul#company li {
	width: calc( ( 100% - 11.1% ) / 4 );
	height: 18.3vw;
	margin-right: 3.7%;
}
#introduction ul#company li a {
	width: 100%;
	height: 18.3vw;
}
#introduction ul#company li a h4,
#introduction ul#company li#intro h4 {
    padding: 15% 0 0 12%;
	font-size: 20px;
}

#introduction ul#company li#intro #intro_inner p a {
	font-size: 14px;
}
}
@media screen and (max-width: 960px) {
#introduction {
	width: 960px;
	height: 338px;	
	padding-bottom: 0;
	background: url(/recruit/group/sun/img/top_foot1080.png) center top no-repeat;
	background-size: 960px 338px;
}
#introduction ul#company {
	height: 175px;
}
#introduction ul#company li {
	height: 175px;
}
#introduction ul#company li a {
	height: 175px;
}

}