@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%;
	padding-bottom: 53.3%;
	background: url(/recruit/group/sun/img/top_mv_sp.png) center top no-repeat;
	background-size: 100% auto;
	position: relative;
	margin-bottom: 5.5%;
}
#main_visual {
	width: 100%;
}
#main_visual h1 {
	width: 100%;
	position: absolute;
	top: 10%;
	font-size: 6vw;
	font-weight: bold;
	line-height: 140%;
	text-align: center;
}

#news_block {
	width: 100%;
	margin: 0 0 30px 0;
}
#news_block h2#news_title {
    font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.5px;
	margin-bottom: 10px;
	text-align: center;
}
#news_block dl#news {
	font-size: 14px;
	color: #444;
    line-height: 160%;
	margin: 0 4%;
}
#news_block dl#news span {
	display: block;
	margin-bottom: 10px;
}
#news_block dl#news span dt {
	
}
#news_block dl#news span dd {
	padding-left: 1em;
    text-indent: -1em;
}
#news_block dl#news span dd a {
	color: #444;
}
#news_block dl#news span dd span.bold {
	display: inline;
   font-weight: bold;
}
#news_block dl#news span dd span.detail {
    margin-left: 0.5em;
    text-indent: 0;
    padding-left: 0;
}


#contents .recruit_block {
	width: 100%;
    margin-bottom: 5.3%;
	padding-top: 7%;
}
#contents .recruit_block .contents_title_block {
	width: 100%;
}
#contents .recruit_block .contents_title_block h2 {
	font-size: 5.5vw;
	color: #000;
	font-weight: bold;
	text-align: center;
	margin-bottom: 2%;
}
#contents .recruit_block .contents_block {
	width: 100%;
	overflow: hidden;
}
#contents .recruit_block .contents_block .contents_sub_block {
	width: 100%;
	margin-bottom: 30px;
	overflow: hidden;
}
#contents .recruit_block .contents_block .contents_sub_block h3 {
	width: 100%;
	text-align: center;
	font-size: 5vw;
    font-weight: bold;
	line-height: 120%;
	margin: 0 0 2% 0;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap {
	width: 90%;
	margin: 0 auto;
	
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn {
	width: 100%;
	padding: 0;
	overflow: hidden;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li {
	width: 48%;
	height: 13vw;
	margin-right: 4%;
	float: left;
}
#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: 100%;
	height: 13vw;
	position: relative;
}
#contents .recruit_block .contents_block .contents_sub_block .btn_wrap ul.btn li a h4 {
		font-size: 4vw;
        font-weight: bold;
        color: #000;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 15%;
}
p.comment {
	text-align: center;
    font-size: 2.1vw;
	color: #444;
	margin-top: 2vw;
}


#contents #fresh_block {
	background: url(/recruit/group/sun/img/sp_fresh_square.png) left top no-repeat;
	background-size: 20% auto;
	background-color: #ffe6c1;
}
#contents #fresh_block .contents_block .btn_wrap ul.fresh_btn li a {
	background: url(/recruit/group/sun/img/btn1_sp.png) left top no-repeat;
	background-size: 100% auto;
}


#contents #careers_block {
	background: url(/recruit/group/sun/img/sp_keiken_square.png) left top no-repeat;
	background-size: 20% auto;
	background-color: #fff0bb;
}
#contents #careers_block .contents_block .btn_wrap ul.careers_btn li a {
	background: url(/recruit/group/sun/img/btn2_sp.png) left top no-repeat;
	background-size: 100% auto;
}




#introduction_wrap {
	width: 100%;
	padding-bottom: 102%;
	background: url(/recruit/group/sun/img/top_foot_sp.png) center top no-repeat;
	background-size: 100% auto;
	position: relative;
}
#introduction {
	width: calc( 100% - 20px );
	position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}
#introduction h2 {
	font-size: 6vw;
    font-weight: bold;
    color: #000;
    margin-bottom: 5%;
    text-align: center;
}
#introduction ul#company {
	width: 100%;
    padding-bottom: 60%;
	position: relative;
}
#introduction ul#company li {
    width: calc( 94% / 3 );
    position: absolute;
	top: 0;
	box-shadow: 0 5px 10px 0 rgba(204,136,51,0.2);
}
#introduction ul#company li:nth-child(1) {
	left: 0;
}
#introduction ul#company li:nth-child(2) {
	left: 34%;
}
#introduction ul#company li:nth-child(4) {
	left: 68%;
}
#introduction ul#company li a {
	display: block;
	width: 100%;
	padding-bottom: 75%;
	background: url(/recruit/group/sun/img/intro_bg1_sp.png) center top no-repeat;
	background-size: 100% auto;
}

#introduction ul#company li a h4,
#introduction ul#company li#intro h4 {
    font-size: 4.2vw;
    font-weight: bold;
    color: #000;
    text-decoration: none;
    position: absolute;
    top: 20%;
	left: 15%;
	line-height: 100%;
}
#introduction ul#company li#intro h4 {
	left: 5%;
}
#introduction ul#company li a h4 span {
	display: block;
	font-size: 60%;
	margin-bottom: 5px;
}

#introduction ul#company li#intro {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	padding-bottom: 23%;
	background: url(/recruit/group/sun/img/intro_bg2_sp.png) center top no-repeat;
	background-size: 100% auto;
}
#introduction ul#company li#intro #intro_inner {
	position: absolute;
	top: 50%;
    left: 5%;
	width: 90%;
}
#introduction ul#company li#intro #intro_inner p {
    position: absolute;
    top: 0;
}
#introduction ul#company li#intro #intro_inner p#intro1 {
	left: 0;
    width: 40%;
}
#introduction ul#company li#intro #intro_inner p#intro2 {
	left: 40%;
    width: 30%;
}
#introduction ul#company li#intro #intro_inner p#intro3 {
	left: 70%;
    width: 30%;
}
#introduction ul#company li#intro #intro_inner p a {
	font-size: 3.2vw;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	display: inline-block;
    width: 100%;
    height: auto;
	padding-bottom: 0;
    background: url(/recruit/group/sun/img/arrow.png) right 15% top 30% no-repeat;
    background-size: 18px auto;
}