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

/* pc */
.pc-item { display: block;}
.sp-item { display: none;}

/* font-size */
#interview_top h2, .interview_idx 	h2, .interview_detail 	h2, .other_list 	h2 { font-size: 28px; }
.interview_idx h3, .other_list 	 h3 { font-size: 20px; }
.interview_idx h4, #movies h4 { font-size: 20px; }
.subcate_list select {	font-size: 16px;}
.membergrid .box figcaption { font-size: 14px; }
.membergrid .offce {	font-size: 15px;}
.membergrid .person {	font-size: 14px;}
.membergrid .cmp_tag {	font-size: 9px;}
.bt_more a p {	font-size: 16px;}
#movies .leadtxt {	font-size: 15px;}
#movies .mv h5 {	font-size: 20px;}
#movies .mv h5 span {		font-size: 15px;}
.interview_detail .detailmain .company, .interview_detail .detailmain .factory { font-size: 24px;}
.interview_detail .detailmain .team, .interview_detail .detailmain .person { font-size: 15px;}
.interview_detail .question h3 {	font-size: 20px;}
.interview_detail .question p { font-size: 15px;}
.other_list .membergrid .box p {	font-size: 14px;}
.bt_return a {	font-size: 19px;}
#interview_top a .top_company {font-size: 22px;}
#interview_top a .top_company span.small_company_name{font-size: 12px;}
#interview_top a .title {font-size: 22px;}
#interview_top .bt_top_sspmv a .top_company {font-size: 14px;}
#interview_top .bt_top_sspmv a .top_company span.small_company_name{font-size: 10px;}
#interview_top .bt_top_sspmv a .title {font-size: 18px;}

/* contents base */
#contents_wrap {
	width: 1200px;
	margin: 0 auto;
	padding: 30px 0 120px;
	position: relative;
}
#interview_top, .interview_idx, .interview_detail, .other_list, #movies {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}


/* interview top page */
#interview_top .inner {
	margin: 50px 0 0;
	height: 660px;
	display:flex;
	flex-flow: row wrap;
	justify-content: flex-end;
		align-content: space-between;
}
/* interview top common*/
#interview_top a .title::after {
	content: " ";
	display: block;
	background: url(../img/arrow_top_emerald.png) no-repeat left top / 28px;
	width: 28px;
	height: 28px;
	margin: 28px auto 0;
}
#interview_top a p {
	line-height: 1.2;
	color: #FFF;
	text-align: center;
	font-weight: 500;
	letter-spacing: -0.5px;
	padding-bottom: 4px;
}
/* interview top PRODUCTS spd */
#interview_top .bt_top_spd a {
	display: block;
	width: 320px;
	height: 490px;
	background: url(../img/ph_top_spd_pc.jpg) no-repeat left top;
	position: relative;
}
#interview_top .bt_top_spd a .circle {
	position: absolute;
	box-sizing: border-box;
	width: 232px;
	height: 232px;
	padding: 73px 0 0;
	background: url(../img/bg_caption_spd.png) no-repeat left top / 232px;
	top: 40px;
	left: 50px;
}
/* interview top BEER sbr */
#interview_top .bt_top_sbr a {
	display: block;
	width: 320px;
	height: 490px;
	background: url(../img/ph_top_sbr_pc.jpg) no-repeat left top;
	position: relative;
}
#interview_top .bt_top_sbr a .circle {
	position: absolute;
	box-sizing: border-box;
	width: 232px;
	height: 232px;
	padding: 73px 0 0;
	background: url(../img/bg_caption_sbr.png) no-repeat left top / 232px;
	top: 200px;
	left: 45px;
}
#interview_top .bt_top_sbr a .title::after {
	background: url(../img/arrow_top_yellow.png) no-repeat left top / 28px;
}
/* interview top SPIRITS */
#interview_top .bt_top_ssp a {
	display: block;
	width: 320px;
	height: 490px;
	background: url(../img/ph_top_ssp_pc.jpg) no-repeat left top;
	position: relative;
}
#interview_top .bt_top_ssp a .circle {
	position: absolute;
	box-sizing: border-box;
	width: 232px;
	height: 232px;
	padding: 73px 0 0;
	background: url(../img/bg_caption_ssp.png) no-repeat left top / 232px;
	top: 55px;
	left: 50px;
}
/* interview top SPIRITS MOVIE */
#interview_top .bt_top_sspmv a {
	display: block;
	width: 320px;
	height: 150px;
	background: url(../img/ph_top_sspmv_pc.jpg) no-repeat left top;
	position: relative;
}
#interview_top .bt_top_sspmv a .square {
	position: absolute;
	box-sizing: border-box;
	width: 156px;
	height: 150px;
	padding: 40px 0 0;
	background: #77dd44;
	top: 0;
	right: 0;
}
#interview_top .bt_top_sspmv a .title::after {
	margin: 15px auto 0;
}


/* interview index */
.interview_idx 	h2, .interview_detail 	h2, .other_list 	h2 {
	line-height: 1;
}
.interview_idx h3, .other_list h3 {
	margin: 15px 0 0;
	line-height: 1;
}
.interview_idx h3 span.small_name, .other_list h3 span.small_name{
	font-size: 15px;
}
.interview_idx h4 {
	font-weight: bold;
	margin: 30px 0 0;
	line-height: 1;
}


/* interview index member*/
.interview_idx .membergrid {
	margin: 0 0 60px;
	display:flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: stretch;
}
.interview_idx .membergrid:last-child {
	margin: 0;
}
.interview_idx .membergrid .box {
	width: 310px;
	margin: 20px 15px 0 0;
	background: #EEE;
}
.interview_idx .membergrid div:nth-of-type(3n) {
	margin-right: 0;
}
.interview_idx .membergrid .box figure {
	margin: 0;
	width: 100%;
	height: 144px;
	position: relative;
	overflow: hidden;
}
.interview_idx .membergrid .box figure img {
	position: absolute;
	width: auto;
	height: 144px;
	top:0;
	left:0;
	z-index: 1;
}
.interview_idx .membergrid .box figcaption {
	position: absolute;
	top:0;
	right:0;
	box-sizing: border-box;
	padding: 0 3px 0 25px;
	width: 164px;
	height: 144px;
	color: #fff;
	line-height: 1.5;
	background: no-repeat left center / 200px;
	display:flex;
	align-items: center;
	overflow: hidden;
	z-index: 2;
}
.interview_idx .membergrid .box.at-spd figcaption {	background-image: url(../img/bg_caption_spd.png);}
.interview_idx .membergrid .box.at-sbr figcaption {	background-image: url(../img/bg_caption_sbr.png);}
.interview_idx .membergrid .box.at-ssp figcaption {	background-image: url(../img/bg_caption_ssp.png);}

.interview_idx .membergrid .txt_area {
	padding: 10px 20px 25px;
	background: url(../img/arrow_right.png) no-repeat right 20px center / 10px;
}
.interview_idx .membergrid .cmp_tag {
	display: inline-block;
	padding: 0 10px;
	height: 22px;
	background: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 22px;
}
.interview_idx .membergrid .box.at-spd .cmp_tag { color: #22ccbb;}
.interview_idx .membergrid .box.at-sbr .cmp_tag { color: #eeaa22;}
.interview_idx .membergrid .box.at-ssp .cmp_tag { color: #77dd44;}

.interview_idx .membergrid .office {
	margin-top: 5px;
	line-height: 1.4;
	font-weight: bold;
}
.interview_idx .membergrid .person {
	margin-top: 5px;
	line-height: 1.4;
}

/* interview index select */
#suntory_contents .subcate_list {
	box-sizing: border-box;
	position: absolute;
	display: block;
	top: 10px;
	right:0;
	width: 400px;
	height: 60px;
	border: 1px solid #11aaee;
}
#suntory_contents .subcate_list select {
	font-family: 'Roboto','Noto Sans JP', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","メイリオ", Meiryo, sans-serif;
	display: block;
	width: 100%;
	height: 100%;
	padding: 12px;
	color: #444;
	background: url(../img/arrow_pulldown.png) no-repeat right 12px center / 34px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0;
	cursor: pointer;
	border: none;
	outline: none;
	box-shadow: none;
}

/* interview index bt_more*/
.bt_more {
	padding: 30px 0 0;
}
.bt_more a {
	display: block;
	margin: 20px auto 0;
	width: 460px;
	height: 70px;
	border: 10px solid;
	display:flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
}
.bt_more a.bt-spd {	border-color: #22ccbb; background: #cffaf6;}
.bt_more a.bt-sbr {	border-color: #eeaa22; background: #FCECD3;}
.bt_more a.bt-ssp {	border-color: #77dd44; background: #e4f9da;}

.bt_more a img {
	width: 115px;
	height: 70px;
}
.bt_more a p {
	width: calc(100% - 115px);
	font-weight: bold;
	text-align: center;
}
.bt_more a p span.small_name{
	font-size: 12px;
}

/* ssp movie*/
#movies {
	margin: 50px 0;
}
#movies h4 {
	font-weight: bold;
	line-height: 1;
}
#movies .leadtxt {
font-weight: 500;
	margin: 20px 0 0;
		line-height: 1;
}
#movies .inner {
	margin: 25px 0 0;
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
#movies .mv {
	box-sizing: border-box;
	margin-bottom: 40px;
	width: 470px;
	padding: 20px 25px 25px;
}
#movies .mv.area-haku {	background: #d7ecdb;}
#movies .mv.area-yama {	background: #f1e8db;}
#movies .mv.area-azu {	background: #d9f4fb;}
#movies .mv.area-osa {	background: #fae8e8;}

#movies .mv.area-msg {
	margin-bottom:0;
	width: 960px;
	padding: 20px 160px 25px;
	background: #eeeeee;
}
#movies .mv h5 {
	margin: 0;
	font-weight: bold;
	line-height: 1.8;
}
#movies .mv h5 span {
	display: block;
	font-weight: normal;
}
#movies .mv .movie {
	position: relative;
	width: 100%;
	margin: 15px 0 0;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}
#movies .mv .movie iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* interview_detail detailmain*/
.interview_detail {
	margin-bottom: 90px;
}
.interview_detail .detailmain {
	margin: 50px 0 0;
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
.interview_detail figure {
	margin: 0;
	width: 400px;
}
.interview_detail figure img {
	width: 100%;
}
.interview_detail .txt_area {
	width: 520px;
}
.interview_detail .detailmain .company,
.interview_detail .detailmain .factory {
	line-height: 1.5;
	font-weight: bold;
}
.interview_detail .detailmain .company span.small_name{
	font-size: 16px;
}
.interview_detail .detailmain .team {
	line-height: 1.8;
}
.interview_detail .detailmain .person {
	margin: 20px 0 0;
	line-height: 1.8;
}

/* interview_detail question*/
.interview_detail .question {
	margin: 30px 0 0 0;
}
.interview_detail .question h3 {
	display: block;
	box-sizing: border-box;
	padding: 0 0 0 80px;
	width: 100%;
	font-weight: bold;
	line-height: 60px;
	position: relative;
}
.interview_detail .question h3 .number {
	display: block;
	width: 60px;
	position: absolute;
	top: 0;
	left: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: no-repeat center center / 38px;
}
.interview_detail .question h3 .no1 { background-image: url(../img/img_detail_no01.png);}
.interview_detail .question h3 .no2 { background-image: url(../img/img_detail_no02.png);}
.interview_detail .question h3 .no3 { background-image: url(../img/img_detail_no03.png);}
.interview_detail .question h3 .no4 { background-image: url(../img/img_detail_no04.png);}
.interview_detail .question h3 .no5 { background-image: url(../img/img_detail_no05.png);}
.interview_detail .question h3 .no6 { background-image: url(../img/img_detail_no06.png);}
.interview_detail .question h3 .no7 { background-image: url(../img/img_detail_no07.png);}
.interview_detail#spd_detail .question h3 { background-color: #cffaf6;}
.interview_detail#spd_detail .question h3 .number { background-color: #22ccbb;}
.interview_detail#sbr_detail .question h3 { background-color: #FCECD3;}
.interview_detail#sbr_detail .question h3 .number { background-color: #eeaa22;}
.interview_detail#ssp_detail .question h3 { background-color: #e4f9da;}
.interview_detail#ssp_detail .question h3 .number { background-color: #77dd44;}

.interview_detail .question .txtarea {
	width: 100%;
}
.interview_detail .question p {
	margin: 30px 50px 0;
	line-height: 2;
}
.interview_detail .question.withimg {
	display:flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: flex-start;
}
.interview_detail .question.withimg .txtarea {
	width: 520px;
}
.interview_detail .question.withimg figure {
	width: 400px;
}
.interview_detail .question.withimg figure img {
	width: 100%;
}

/* other_list member*/
.other_list {
	padding: 40px 0 0;
	border-top: 1px solid #959595;
}
.other_list .membergrid {
	margin: 0;
	display:flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-content: stretch;
}
.other_list .membergrid .box {
	width: 144px;
	margin: 20px 19px 20px 0;
}
.other_list .membergrid div:nth-of-type(6n) {
	margin-right: 0;
}
.other_list .membergrid .box a {
	color: #579ab9;
}
.other_list .membergrid .box figure {
	margin: 0 0 10px;
	width: 144px;
	height: 144px;
	border-radius: 50%;
	overflow: hidden;
}
.other_list .membergrid .box figure img {
	width: 100%;
	height: 100%;
}
.other_list .membergrid .box p {
	line-height: 1.5;
	text-align: center;
}
.other_list .membergrid .box p.depart_type {
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	letter-spacing: -0.05em;
}

/*bt_return*/
.bt_return {
	margin: 50px 0 0;
}
.bt_return a {
	display: block;
	margin: 0 auto;
	width: 345px;
	height: 56px;
	color: #FFF;
	line-height: 56px;
	text-align: center;
	background: #11aaee url(../img/arrow_left_wh-aqua.png) no-repeat left 35px center / 12px;
}

/* subcate_nav */
.subcate_nav {
	margin: 30px auto 60px;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
.subcate_nav li a {
	border: 1px #11aaee solid;
	background: url(../img/arrow_down.svg) no-repeat right 15px center;
	background-size: 20px auto;
	font-size: 18px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 0;
	padding:0 40px 0 15px;
	box-sizing: border-box;
}
.subcate_nav li.nav01,
.subcate_nav li.nav01 a {
	width: 200px;
}
.subcate_nav li.nav02,
.subcate_nav li.nav02 a {
	width: 280px;
	letter-spacing: -0.05em;
}
.subcate_nav li.nav03,
.subcate_nav li.nav03 a {
	width: 200px;
}
.subcate_nav li.nav04,
.subcate_nav li.nav04 a {
	width: 200px;
}