@charset "utf-8";

/*--------------------------------------------
インターンシップ 参加者の声 2025/5
--------------------------------------------*/
/*--------------------------------------------
カテゴリ別カラー設定
--------------------------------------------*/
/*DX*/
#suntory_contents #sec-pagetitle .main_visual .text_box {
	background-color: rgba(85, 85, 211, 0.9);
}

#suntory_contents #sec-pagetitle .main_visual h1 .sub {
	color: #5555DD;
}

#suntory_contents #internship_base .section_title::after {
	background-color: #5555DD;
}

#suntory_contents #sec-past_programs .list_program {
	background-color: #e6e2fa;
}

#suntory_contents #sec-past_programs .list_program li::before {
	background-color: #5555DD;
}

/*--------------------------------------------
COMMON setting
--------------------------------------------*/

/*#sec-pagetitle ------------------------------------*/
#suntory_contents #internship_base #sec-pagetitle {
	padding: 0;
}

#suntory_contents #sec-pagetitle .main_visual {
	width: 100%;
	height: 400px;
	position: relative;
}

#suntory_contents #sec-pagetitle .main_visual .text_box {
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#suntory_contents #sec-pagetitle .main_visual h1 {
	text-align: center;
}

#suntory_contents #sec-voice_qa .list_voice li p strong {
	color: #e60000;
	font-weight: normal;
}



@media screen and (min-width: 768px) {

	/*--------------------------------------------
インターンシップ 参加者の声  PC
--------------------------------------------*/
	/*base setting ------------------------------------*/
	#suntory_contents #internship_base section {
		padding: 60px 0 100px;
	}

	#suntory_contents #internship_base section .sec_inside {
		width: 1164px;
		margin: 0 auto;
	}

	#suntory_contents #internship_base .section_title {
		margin-bottom: 50px;
		font-size: 30px;
		font-weight: bold;
		text-align: center;
	}

	#suntory_contents #internship_base .section_title::after {
		content: "";
		display: block;
		width: 80px;
		height: 4px;
		margin: 20px auto 0;
	}

	/*#sec-pagetitle ------------------------------------*/
	#suntory_contents #sec-pagetitle .main_visual {
		background: url(../internship/img/dx/mv_pc.webp) no-repeat left top;
	}

	#suntory_contents #sec-pagetitle .main_visual .text_box {
		min-width: 440px;
		padding: 25px;
	}

	#suntory_contents #sec-pagetitle .main_visual h1 .sub {
		display: block;
		width: fit-content;
		margin: 0 auto;
		padding: 0 24px;
		background-color: #fff;
		border-radius: 9999px;
		font-size: 24px;
		line-height: 2;
	}

	#suntory_contents #sec-pagetitle .main_visual h1 .small {
		display: block;
		margin-top: 16px;
		font-size: 30px;
	}

	#suntory_contents #sec-pagetitle .main_visual h1 .large {
		display: block;
		margin-top: 10px;
		font-size: 42px;
	}

	#suntory_contents #sec-pagetitle .lead_text {
		margin-top: 30px;
		font-size: 18px;
		line-height: 1.75;
		text-align: center;
	}

	/*#sec-past_programs ------------------------------------*/
	#suntory_contents #sec-past_programs .list_program {
		display: flex;
		flex-wrap: wrap;
		gap: 28px 0;
		max-width: 950px;
		margin: 0 auto;
		padding: 44px 40px;
		position: relative;
	}

	#suntory_contents #sec-past_programs .list_program li {
		min-width: 26%;
		padding-left: 15px;
		font-size: 18px;
		line-height: 1.3;
		position: relative;
	}

	#suntory_contents #sec-past_programs .list_program li.wide {
		width: 35%;
	}

	#suntory_contents #sec-past_programs .list_program li.wide_max {
		width: 39%;
	}

	#suntory_contents #sec-past_programs .list_program li:not(.etc)::before {
		content: "";
		width: 6px;
		height: 6px;
		border-radius: 9999px;
		position: absolute;
		top: 9px;
		left: 0;
	}

	#suntory_contents #sec-past_programs .list_program li.etc {
		min-width: auto;
		width: fit-content;
		padding-left: 0;
		font-size: 16px;
		position: absolute;
		right: 40px;
		bottom: 25px;
	}

	/*#sec-photo_gallery ------------------------------------*/
	#suntory_contents #sec-photo_gallery ul.list_photo {
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 30px 0;
	}


	/*#sec-voice_qa ------------------------------------*/
	#suntory_contents #sec-voice_qa ul.list_voice {
		width: 900px;
		margin: 0 auto;
	}

	#suntory_contents #sec-voice_qa .list_voice li {
		display: block;
		position: relative;
		padding: 0 0 10px;
	}

	#suntory_contents #sec-voice_qa .list_voice li+li {
		margin-top: 50px;
	}

	#suntory_contents #sec-voice_qa .list_voice li::before {
		content: "";
		display: block;
		position: absolute;
		width: 100px;
		height: 100px;
		bottom: 0;
		background: url(/recruit/challenge/internship/img/voice.png) no-repeat center center / contain;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_left {
		padding-left: 120px;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_left::before {
		left: 0;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_right {
		padding-right: 120px;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_right::before {
		right: 0;
	}

	#suntory_contents #sec-voice_qa .list_voice li p {
		width: 100%;
		position: relative;
		padding: 20px;
		border: 3px solid #d8e6f0;
		border-radius: 20px;
		font-size: 16px;
		color: #000;
		line-height: 1.5;
	}


	#suntory_contents #sec-voice_qa .list_voice li p::before,
	#suntory_contents #sec-voice_qa .list_voice li p::after {
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_left p::before {
		left: -25px;
		bottom: 12px;
		border-bottom: 25px solid #d8e6f0;
		border-left: 25px solid transparent;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_left p::after {
		left: -18px;
		bottom: 15px;
		border-bottom: 25px solid #fff;
		border-left: 25px solid transparent;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_right p::before {
		right: -25px;
		bottom: 12px;
		border-bottom: 25px solid #d8e6f0;
		border-right: 25px solid transparent;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_right p::after {
		right: -18px;
		bottom: 15px;
		border-bottom: 25px solid #fff;
		border-right: 25px solid transparent;
	}


}

@media screen and (max-width: 767px) {

	/*--------------------------------------------
インターンシップ 参加者の声  SP
--------------------------------------------*/
	/*base setting ------------------------------------*/
	#suntory_contents #internship_base section {
		padding: 13.6vw 0 4vw;
	}

	#suntory_contents #internship_base section .sec_inside {
		width: 100%;
		padding: 0 4vw;
	}

	#suntory_contents #internship_base .section_title {
		margin-bottom: 8.8vw;
		font-size: 6.4vw;
		font-weight: bold;
		text-align: center;
	}

	#suntory_contents #internship_base .section_title::after {
		content: "";
		display: block;
		width: 16vw;
		height: 1.066666667vw;
		margin: 6.4vw auto 0;
	}

	/*#sec-pagetitle ------------------------------------*/
	#suntory_contents #sec-pagetitle .main_visual {
		width: 100%;
		height: 100vw;
		background: url(../internship/img/dx/mv_sp.webp) no-repeat left top;
	}

	#suntory_contents #internship_base #sec-pagetitle .sec_inside {
		padding: 0;
	}

	#suntory_contents #sec-pagetitle .main_visual .text_box {
		width: 89.6vw;
		padding: 5.6vw;
	}

	#suntory_contents #sec-pagetitle .main_visual h1 .sub {
		display: block;
		width: fit-content;
		margin: 0 auto;
		padding: 0 5.6vw;
		background-color: #fff;
		border-radius: 9999px;
		font-size: 4.8vw;
		line-height: 2;
	}

	#suntory_contents #sec-pagetitle .main_visual h1 .small {
		display: block;
		margin-top: 4vw;
		font-size: 5.866666667vw;
	}

	#suntory_contents #sec-pagetitle .main_visual h1 .large {
		display: block;
		margin-top: 2.4vw;
		font-size: 8vw;
	}

	#suntory_contents #sec-pagetitle .lead_text {
		display: block;
		padding: 0 4vw;
		margin-top: 5.6vw;
		font-size: 4.266666667vw;
		line-height: 1.5;
	}

	/*#sec-past_programs ------------------------------------*/
	#suntory_contents #sec-past_programs .list_program {
		display: block;
		position: relative;
		padding: 5.6vw;
	}

	#suntory_contents #sec-past_programs .list_program li {
		width: 100%;
		padding-left: 4vw;
		font-size: 4.266666667vw;
		line-height: 1.3;
		position: relative;
	}

	#suntory_contents #sec-past_programs .list_program li+li {
		margin-top: 2.4vw;
	}

	#suntory_contents #sec-past_programs .list_program li:not(.etc)::before {
		content: "";
		width: 1.6vw;
		height: 1.6vw;
		border-radius: 9999px;
		position: absolute;
		top: 2.4vw;
		left: 0;
	}

	/*#sec-photo_gallery ------------------------------------*/
	#suntory_contents #sec-photo_gallery ul.list_photo {
		display: flex;
		flex-flow: column wrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 6.4vw;
	}
		#suntory_contents #sec-photo_gallery .list_photo li {
			width: 100%;
		}

	/*#sec-voice_qa ------------------------------------*/
	#suntory_contents #sec-voice_qa ul.list_voice {
		width: 100%;
	}

	#suntory_contents #sec-voice_qa .list_voice li {
		display: block;
		position: relative;
	}

	#suntory_contents #sec-voice_qa .list_voice li+li {
		margin-top: 4vw;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_left {
		padding-left: 4.8vw;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_left::before {
		left: 0;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_right {
		padding-right: 4.8vw;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_right::before {
		right: 0;
	}

	#suntory_contents #sec-voice_qa .list_voice li p {
		width: 100%;
		position: relative;
		padding: 20px;
		border: 3px solid #d8e6f0;
		border-radius: 6.4vw;
		font-size: 4.266666667vw;
		color: #000;
		line-height: 1.5;
	}


	#suntory_contents #sec-voice_qa .list_voice li p::before,
	#suntory_contents #sec-voice_qa .list_voice li p::after {
		content: "";
		position: absolute;
		display: block;
		width: 0;
		height: 0;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_left p::before {
		left: -6.4vw;
		top: 8vw;
		border-bottom: 6.4vw solid #d8e6f0;
		border-left: 6.4vw solid transparent;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_left p::after {
		left: -4.266666667vw;
		top: 7.2vw;
		border-bottom: 6.4vw solid #fff;
		border-left: 6.4vw solid transparent;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_right p::before {
		right: -6.4vw;
		top: 8vw;
		border-bottom: 6.4vw solid #d8e6f0;
		border-right: 6.4vw solid transparent;
	}

	#suntory_contents #sec-voice_qa .list_voice li.person_right p::after {
		right: -4.266666667vw;
		top: 7.2vw;
		border-bottom: 6.4vw solid #fff;
		border-right: 6.4vw solid transparent;
	}
}