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

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

/* font-size */
#interview_top h2, .interview_idx 	h2, .interview_detail 	h2, .other_list 	h2 { font-size: 4.8vw;}
.interview_idx h3, .other_list 	 h3 { font-size: 4vw;}
.interview_idx h3 span.small_name, .other_list h3 span.small_name{font-size: 3vw;}
.interview_idx h4, #movies h4 { font-size: 4.8vw; }
.subcate_list select {	font-size: 3.7333333vw;}
.membergrid .box figcaption { font-size: 4.2666667vw;}
.membergrid .office { font-size: 3.7333333vw;}
.membergrid .person { font-size: 3.7333333vw;}
.membergrid .cmp_tag { font-size: 2.6666667vw;}
.bt_more a p { font-size: 4vw;}
#movies .leadtxt {	font-size: 4vw;}
#movies .mv h5 {	font-size: 3.7333333vw;}
#movies .mv h5 span {		font-size: 3.7333333vw;}
.interview_detail .detailmain .company, .interview_detail .detailmain .factory { font-size: 4.8vw;}
.interview_detail .detailmain .company span.small_name { font-size: 3.7vw;}
.interview_detail .detailmain .team, .interview_detail .detailmain .person { font-size: 3.7333333vw;}
.interview_detail .question h3 {	font-size: 4.2666667vw}
.interview_detail .question p { font-size: 4vw;}
.other_list .membergrid .box p {	font-size: 3.7333333vw;}
.bt_return a {	font-size: 5.0666667vw;}
#interview_top a .top_company {font-size: 4vw;}
#interview_top a .top_company span.small_company_name{font-size: 3vw;}
#interview_top a .title {font-size: 4.2666667vw;}
#interview_top .bt_top_sspmv a .top_company {font-size: 3.466667vw;}
#interview_top .bt_top_sspmv a .top_company span.small_company_name{font-size: 2.6666667vw;}
#interview_top .bt_top_sspmv a .title {font-size: 4.5333333vw;}

/* contents base */
#contents_wrap {
	width: 100%;
	margin: 0 auto;
	padding: 5.3333333vw 0 40vw;
	position: relative;
}
#interview_top, .interview_idx, .interview_detail, .other_list {
	width: 92vw;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

/* interview top page */
#interview_top .inner {
	width: 82.6666667vw;
	margin: 0 auto;
}
/* interview top common*/
#interview_top a .title::after {
	content: " ";
	display: block;
	background: url(../img/arrow_top_emerald.png) no-repeat left top / 5.0666667vw;
	width: 5.0666667vw;
	height: 5.0666667vw;
	margin: 6.9333333vw auto 0;
}
#interview_top a p {
	line-height: 1.5;
	color: #FFF;
	text-align: center;
	font-weight: 500;
	letter-spacing: -0.5px;
}
#interview_top a p.top_company span.small_company_name{
	white-space: nowrap;
}
/* interview top PRODUCTS spd */
#interview_top .bt_top_spd a {
	display: block;
	width: 100%;
	height: 56vw;
	margin-top: 5.3333333vw;
	background: url(../img/ph_top_spd_sp.jpg) no-repeat left top / cover;
	display:flex;
	justify-content: center;
	align-items: center;
}
#interview_top .bt_top_spd a .circle {
	position: absolute;
	box-sizing: border-box;
	width: 44.8vw;
	height: 44.8vw;
	padding: 11.533333vw 0 0;
	background: url(../img/bg_caption_spd.png) no-repeat left top / 44.5333333vw;
}
/* interview top BEER sbr */
#interview_top .bt_top_sbr a {
	display: block;
	width: 100%;
	height: 56vw;
	margin-top: 5.3333333vw;
	background: url(../img/ph_top_sbr_sp.jpg) no-repeat left top / cover;
	display:flex;
	justify-content: center;
	align-items: center;
}
#interview_top .bt_top_sbr a .circle {
	position: absolute;
	box-sizing: border-box;
	width: 44.8vw;
	height: 44.8vw;
	padding: 11.533333vw 0 0;
	background: url(../img/bg_caption_sbr.png) no-repeat left top / 44.5333333vw;
}
#interview_top .bt_top_sbr a .title::after {
	background: url(../img/arrow_top_yellow.png) no-repeat left top / 5.0666667vw;
}
/* interview top SPIRITS */
#interview_top .bt_top_ssp a {
	display: block;
	width: 100%;
	height: 56vw;
	margin-top: 5.3333333vw;
	background: url(../img/ph_top_ssp_sp.jpg) no-repeat left top / cover;
	display:flex;
	justify-content: center;
	align-items: center;
}
#interview_top .bt_top_ssp a .circle {
	position: absolute;
	box-sizing: border-box;
	width: 44.8vw;
	height: 44.8vw;
	padding: 11.533333vw 0 0;
	background: url(../img/bg_caption_ssp.png) no-repeat left top / 44.5333333vw;
}
/* interview top SPIRITS MOVIE */
#interview_top .bt_top_sspmv a {
	display: block;
	width: 100%;
	height: 38.66666667vw;
	margin-top: 5.3333333vw;
	background: url(../img/ph_top_sspmv_sp.jpg) no-repeat left top / cover;
	position: relative;
}
#interview_top .bt_top_sspmv a .square {
	position: absolute;
	box-sizing: border-box;
	width: 40vw;
	height: 100%;
	padding: 9.1vw 0 0;
	background: #77dd44;
	top: 0;
	right: 0;
}
#interview_top .bt_top_sspmv a .title::after {
	background-size: 6.9333333vw;
	width: 6.9333333vw;
	height: 6.9333333vw;
	margin: 3vw auto 0;
}


/* interview index */
.interview_idx 	h2, .interview_detail 	h2, .other_list 	h2 {
	line-height: 1;
}
.interview_idx h3, .other_list  h3 {
	font-weight: normal;
	margin-top: 3.2vw;
	line-height: 1;
}
.interview_idx h4 {
	margin: 6.6666667vw 0 0;
	line-height: 1;
}


/* interview index member*/
.interview_idx .membergrid {
	margin: 0 0 12vw;
}
.interview_idx .membergrid:last-child {
	margin: 0;
}
.interview_idx .membergrid .box {
	width: 100%;
	margin-top: 5.3333333vw;
	background: #EEE;
}
.interview_idx .membergrid .box figure {
	margin: 0;
	width: 100%;
	height: 42.6666667vw;
	position: relative;
	overflow: hidden;
}
.interview_idx .membergrid .box figure img {
	position: absolute;
	width: auto;
	height: 42.6666667vw;
	top:0;
	left:0;
	z-index: 1;
}
.interview_idx .membergrid .box figcaption {
	position: absolute;
	top:0;
	right:0;
	box-sizing: border-box;
	padding: 0 4vw 0 6.6666667vw;
	width: 50vw;
	height: 42.6666667vw;
	color: #fff;
	line-height: 1.5;
	background: no-repeat left center / 72.8vw;
	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: 2.6666667vw 2.6666667vw 6.6666667vw;
	background: url(../img/arrow_right.png) no-repeat right 4.8vw center / 2.6666667vw;
}
.interview_idx .membergrid .cmp_tag {
	display: inline-block;
	padding: 0 2.6666667vw;
	height: 6.6666667vw;
	background: #fff;
	font-weight: bold;
	text-align: center;
	line-height: 6.6666667vw;
}
.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: 2.6666667vw;
	line-height: 1.4;
	font-weight: bold;
}
.interview_idx .membergrid .person {
	margin-top: 1.3333vw;
	line-height: 1.4;
}

/* interview index select */
#suntory_contents .subcate_list {
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 13.333333vw;
	margin: 6.6666667vw auto 0;
	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: 2vw;
	color: #444;
	background: url(../img/arrow_pulldown.png) no-repeat right 2vw center / 8.666667vw;
	-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: 6.6666667vw 0;
}
.bt_more a {
	display: block;
	margin: 6.6666667vw auto 0;
	width: 74vw;
	height: 26.6666667vw;
	border: 2.6666667vw 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: 25.3333333vw;
	height: 26.6666667vw;
}
.bt_more a p {
	width: calc(100% - 25.3333333vw);
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	padding: 0 1.6vw;
}
.bt_more a p span{
	display: inline-block;
}
.bt_more a p span.small_name{
	font-size: 3vw;
	white-space: nowrap;
}

/* ssp movie*/
#movies {
	margin-top: 26.6666667vw;
	width: 100%;
}
#movies h4 {
	width: 92vw;
	margin: 0 auto;
	font-weight: bold;
	line-height: 1;
}
#movies .leadtxt {
		width: 92vw;
	margin: 2.6666667vw auto 0;
	line-height: 1.5;
}
#movies .inner {
	margin: 5.3333333vw 0 0;
}
#movies .mv {
	box-sizing: border-box;
	width: 100%;
	padding: 6.6666667vw 4vw 8vw;
}
#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 {	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: 3.2vw 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 {
	width: 100%;
		margin-bottom: 12vw;
}
.interview_detail h2 {
	width: 92vw;
		margin: 0 auto;
}
.interview_detail .detailmain {
	width: 92vw;
	margin: 5.3333333vw auto 0;
}
.interview_detail figure {
	margin: 0;
	width: 100%;
}
.interview_detail figure img {
	width: 100%;
}
.interview_detail .txt_area {
	margin: 6.6666667vw 0 0;
	width: 100%;
}
.interview_detail .detailmain .company,
.interview_detail .detailmain .factory {
	line-height: 1.5;
	font-weight: bold;
}
.interview_detail .detailmain .team {
	line-height: 1.8;
}
.interview_detail .detailmain .person {
	margin: 2.6666667vw 0 0;
	line-height: 1.5;
}

/* interview_detail question*/
.interview_detail .question {
	margin: 6.6666667vw 0 0 0;
}
.interview_detail .question h3 {
	display: block;
	box-sizing: border-box;
	padding: 3.7333333vw 3.7333333vw 3.7333333vw 18vw;
	width: 100%;
	font-weight: bold;
	line-height: 1.3;
	position: relative;
}
.interview_detail .question h3 .number {
	display: block;
	width: 13.3333333vw;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	background: no-repeat center top 4vw / 7.7333333vw;
}
.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,
.interview_detail .question.withimg .txtarea {
	width: 100%;
}
.interview_detail .question p {
	width: 92vw;
		margin: 4vw auto 0;
	line-height: 1.8;
}
.interview_detail .question.withimg {
}
.interview_detail .question.withimg figure {
	width: 92vw;
		margin: 4vw auto 0;
}
.interview_detail .question.withimg figure img {
	width: 100%;
}

/* other_list member*/
.other_list {
	padding: 12vw 0 0;
	border-top: 1px solid #959595;
}
.other_list .membergrid {
width: 85.6vw;
margin: 0 auto;
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: stretch;
}
.other_list .membergrid .box {
	width: 40vw;
	margin: 6.6666667vw 0 0;
}
.other_list .membergrid .box a {
	color: #579ab9;
}
.other_list .membergrid .box figure {
	margin: 0 0 2.6666667vw;
	width: 40vw;
	height: 40vw;
	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 {
	line-height: 1.5;
	text-align: center;
	letter-spacing: -1px;
}

/*bt_return*/
.bt_return {
	margin: 6.6666667vw 0;
}
.bt_return a {
	display: block;
	margin: 0 auto;
	width: 92vw;
	height: 14.6666667vw;
	color: #FFF;
	line-height: 14.6666667vw;
	text-align: center;
	background: #11aaee url(../img/arrow_left_wh-aqua.png) no-repeat left 9.3333333vw center / 3.2vw;
}


/* subcate_nav */
.subcate_nav {
	margin: 4vw auto 8vw;
	padding: 0;
	display: flex;
	justify-content: space-between;
}
.subcate_nav li a {
	border: 1px #11aaee solid;
	background: url(../img/arrow_down.svg) no-repeat center bottom 1.2vw;
	background-size: 2.9333333333333vw auto;
	font-size: 2.6666666666667vw;
	letter-spacing: -0.025em;
	height: 9.3333333333333vw;
	display: flex;
	align-items: center;
	justify-content: center;
	padding:0 0 1.6vw;
}
.subcate_nav li.nav01,
.subcate_nav li.nav01 a {
	width: 20vw;
}
.subcate_nav li.nav02,
.subcate_nav li.nav02 a {
	width: 30.6666666666667vw;
	letter-spacing: -0.05em;
}
.subcate_nav li.nav03,
.subcate_nav li.nav03 a {
	width: 20vw;
}
.subcate_nav li.nav04,
.subcate_nav li.nav04 a {
	width: 13.3333333333333vw;
}