@charset "utf-8";

/*------------------------------------------------------------
[SP]
------------------------------------------------------------ */
#suntory_contents .dx_contents {
	display: block;
}

#suntory_contents .dx_contents .detail_container a {
	color: #004AA9;
	text-decoration: underline;
	transition: 0.2s;
}

/*------------------------------------------------------------
[SP] contents_label
------------------------------------------------------------ */
#suntory_contents .contents_label {
	margin: 0 auto 13.333333333333333vw;
	padding: 4vw 0 0;
	width: 92vw;
	font-size: 5.6vw;
	line-height: 1;
}

#suntory_contents .contents_label a {
	color: #0D347F;
	text-decoration: none;
}

#suntory_contents .contents_label a span {
	display: block;
	font-size: 4vw;
	margin-bottom: 1.6vw;
}


/*------------------------------------------------------------
[SP] contents_body
------------------------------------------------------------ */
.contents_body {
	margin: 0 auto 12vw;
	width: 92vw;
}

.contents_body h1 {
	font-size: 6.4vw;
	line-height: 1.3;
	font-weight: normal;
	color: #000000;
	text-align: center;
	position: relative;
	margin-bottom: 9.6vw;
	padding-bottom: 3.2vw;
}

.contents_body h1::after {
	content: '';
	width: 92vw;
	height: 0.53333333vw;
	background: #004aa9;
	background: linear-gradient(to right, #004aa9 0%, #1fcfff 100%);
	position: absolute;
	bottom: 0;
	left: 0;
}

.contents_body h1 .txt_sm {
	font-size: 4.8vw;
}

.contents_body .detail_container h2 {
	margin-bottom: 9.6vw;
	font-size: 5.333333333vw;
	font-weight: 600;
	line-height: 1.5;
	color: #0d347f;
}

.contents_body .detail_container h2.with_notes {
	margin: 0;
}

.contents_body .detail_container h2+p.h2notes {
	margin-bottom: 8vw;
	margin-top: 1.6vw;
	font-size: 3.466666667vw;
	line-height: 1.5;
	font-weight: 600;
	color: #0d347f;
}

.contents_body .detail_container h3 {
	font-size: 4.8vw;
	font-weight: normal;
	margin-bottom: 5.6vw;
	color: #000000;
	line-height: 1.3;
	padding: 3.2vw 0 3.2vw 4vw;
	border-left: 4px solid #6692CB;
	border-bottom: 1px solid #6692CB;
}

.contents_body .detail_container h3 .txt_sm {
	font-size: 4vw;
	margin: 0 0 0 4vw;
}

.contents_body h4 {
	color: #0D347F;
	font-size: 4.266666667vw;
	font-weight: 600;
	margin: 0 0 2.4vw;
	padding: 0 0 0 1.2em;
	position: relative;
}

.contents_body h4::before {
	content: "■";
	display: block;
	position: absolute;
	font-size: 4.266666667vw;
	color: #0D347F;
	left: 0;
}

.contents_body#exchange h4,
.contents_body#ai_policy h4 {
	padding: 0;
}

.contents_body#exchange h4::before,
.contents_body#ai_policy h4::before {
	content: none;
}

.contents_body p {
	font-size: 4vw;
	line-height: 1.8;
}

.contents_body p+p {
	margin-top: 5.6vw;
}

.contents_body p+h3,
.contents_body p+h4 {
	margin-top: 9.6vw;
}

.contents_body p.notes {
	font-size: 3.2vw;
	line-height: 1.6;
	text-indent: -1em;
	margin-left: 1em;
}

.contents_body p.txt_right {
	text-align: right;
}

.contents_body p.notes+p.notes {
	margin-top: 0;
}

.contents_body p.notes.number {
	text-indent: -2em;
	margin-left: 2em;
}

.contents_body p.reference {
	margin-top: 2.4vw;
}

.contents_body .word-break {
	word-break: break-all;
}
.contents_body .wide_dash {
letter-spacing: -0.25em;
margin-right: 0.5em;
}

.contents_body span.txt_sub {
	font-size: 80%;
	vertical-align: baseline;
}

.contents_body .dot_list {
	margin: 0;
	padding: 0 0 0 1.5em;
}

.contents_body .dot_list li {
	font-size: 4vw;
	line-height: 1.8;
}

.contents_body .dot_list+p {
	margin-top: 2.4vw;
}

/*.contents_body picture {
	margin: 9.6vw 0 0;
	height: auto;
			text-align: center;
}
*/
.contents_body img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.contents_body picture,
.contents_body figure {
	margin: 9.6vw 0 0;
	text-align: center;
}

.contents_body .img_flex,
.contents_body .img_scroll {
	margin: 9.6vw 0 0;
}

.contents_body .img_scroll figure,
.contents_body .img_scroll picture,
.contents_body .img_flex figure,
.contents_body .img_flex picture {
	margin: 0;
}

.contents_body .img_scroll+h3,
.contents_body .img_scroll+h4,
.contents_body .img_scroll+p,
.contents_body picture+h4,
.contents_body picture+h3,
.contents_body picture+p,
.contents_body p.piccaption+p,
.contents_body figure+h4,
.contents_body figure+h3,
.contents_body figure+p,
.contents_body .img_flex+h4,
.contents_body .img_flex+h3,
.contents_body .img_flex+p {
	margin-top: 9.6vw;
}


/*------------------------------------------------------------
[SP] list_container
------------------------------------------------------------ */
.list_container ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.list_container h2.heading {
	font-size: 5.333333333333333vw;
	line-height: 1;
	font-weight: normal;
	padding: 5.06666667vw 0 1.06666667vw 4vw;
	margin-bottom: 6.4vw;
	position: relative;
}

.list_container h2.heading::before {
	content: "";
	display: block;
	width: 1.333333333333333vw;
	height: 7.466666667vw;
	position: absolute;
	background: #6692CB;
	left: 0;
	top: 4vw;
}

.list_container h2.heading:first-child {
	margin-top: -4vw;
}

.list_container ul+h2.heading {
	margin-top: 8vw;
}

.list_container li {
	background: #F5F5F5;
	padding: 8vw 4vw;
}

.list_container li+li {
	margin-top: 6.4vw;
}

.list_container li h2,
.list_container li h3 {
	margin-bottom: 4vw;
	font-size: 5.866666667vw;
	font-weight: bold;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
}

.list_container li a {
	color: #004AA9;
	text-decoration: none;
}

.list_container li h3 .txt_sm {
	font-size: 4vw;
}

.list_container li picture {
	width: 64vw;
	margin: 0 auto 4vw;
}

.list_container li picture img {
	width: 100%;
	height: auto;
}

.list_container li .text {
	margin-bottom: 5.6vw;
	font-size: 4vw;
	line-height: 1.6;
}

.list_container li .btn_more a {
	margin: 0 auto;
	display: block;
	width: 48vw;
	height: 13.6vw;
	background: url(../img/svg/text_viewmore.svg) no-repeat 9.333333333333333vw center,
		url(../img/svg/arrow_right.svg) no-repeat right 3.2vw center #00B1DD;
	background-size: 26.4vw auto, 3.2vw auto;
	text-indent: -99999px;
}


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

	/*------------------------------------------------------------
[SP] individual setting
------------------------------------------------------------ */
	.contents_body p sup {
		font-size: 2.666666667vw;
	}

	.contents_body .img_flex {
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
		gap: 4vw;
	}

	.contents_body h6.img_title+.img_flex {
		margin-top: 4vw;
	}

	.contents_body .img_flex picture.pc_item+picture.sp_item {
		margin-top: 0;
	}

	.contents_body figure+p.piccaption,
	.contents_body picture+p.piccaption,
	.contents_body figcaption {
		display: block;
		width: 100%;
		padding: 0 1.6vw;
		margin: 3.2vw 0 0;
		font-size: 3.466666667vw;
		line-height: 1.6;
		text-align: center;
	}

	.contents_body#dsh .img_flex.dsh-first picture img {
		width: 100%;
	}

	.contents_body#dsh .img_flex.dsh-second picture img {
		width: 100%;
	}

	.contents_body#dsh .img_flex.dsh-third figure:first-child img {
		height: 64vw;
		width: auto;
	}

	.contents_body#dsh .img_flex.dsh-third figure:last-child img {
		width: 100%;
	}

	.contents_body#hrd .img_flex.hrd-photos figure+figure {
		margin-top: 8vw;
	}

	.contents_body#hrd .img_flex.hrd-photos figure+figure img {
		border: 1px solid #ddd;
	}

	/*例・事例囲み*/
	.contents_body .example {
		border: 1px solid #ccc;
		padding: 4vw;
		margin: 8vw 0;
	}

	.contents_body h4+.example {
		margin-top: 3.2vw;
	}

	.contents_body .example h5 {
		font-weight: 600;
		font-size: 4.266666667vw;
		line-height: 1.5;
		margin: 0 0 8vw 2em;
		text-indent: -2em;
	}

	/*画像タイトル*/
	.contents_body h6.img_title {
		width: 100%;
		font-weight: 600;
		font-size: 4.266666667vw;
		line-height: 1.5;
		text-align: center;
		margin: 0 0 1em;
	}

	.contents_body#exchange .example h5~picture {
		margin-top: 8vw;
	}

	.contents_body#exchange .example h5+.img_flex {
		margin-top: 8vw;
	}

	.contents_body#exchange .example picture+p {
		margin-top: 8vw;
	}

	.contents_body#exchange .img_flex.xai {
		justify-content: space-between;
		align-items: flex-start;
	}

	.contents_body#exchange .img_flex.xai .right_part {
		width: 100%;
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
	}

	.contents_body#exchange .img_flex.xai .right_part h6 {
		width: 100%;
		font-weight: 600;
		font-size: 4vw;
		line-height: 1;
		margin: 8vw 0 2.4vw;
		text-align: center;
	}

	.contents_body#exchange .img_flex.xai .right_part figcaption {
		margin: 2.4vw 0 0;
	}

	.contents_body#security .img_first picture {
		margin: 2.4vw 0 8vw;
	}

	.contents_body#factory p.sub_head {
		font-weight: 600;
		margin-top: 4vw;
	}

	.contents_body#factory p.sub_head+p {
		margin-top: 0;
	}

	.contents_body p .txt_kome {
		font-size: 3.2vw;
	}

	.contents_body#ai p.point {
		font-weight: bold;
	}

	.contents_body#ai p.point+p.point {
		margin-top: 3.2vw;
	}
	.contents_body#jihanpi .txt_img_flex ol.pi_flow {
				width: 100%;
		margin: 6.4vw 0 0;
		padding-left: 2em;
		line-height: 1.8;
		font-size: 4.533333333vw;
		font-weight: bold;
		color: #0d347f;
	}
		.contents_body#jihanpi ol.pi_flow.first {
		margin: 0;
	}
	.contents_body#jihanpi .txt_img_flex .part_img {
		width: 100%;
				margin: 4vw 0 0;
		text-align: center;
	}

	.contents_body#jihanpi ol.pi_flow li p {
		font-size: 4vw;
		line-height: 1.8;
		color: #000;
		font-weight: normal;
	}

	/*大サイズイメージ横スクロール*/
	.contents_body .img_scroll {
		overflow-y: scroll;
		position: relative;
	}

	.contents_body .img_scroll picture img,
	.contents_body .img_scroll figure img {
		max-width: 640px;
	}

	/*	横スクロールメッセージ*/
	.flash-text {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		visibility: hidden;
		z-index: 1;
	}

	.visible .flash-text {
		animation: fade-in-out 4s ease 0s forwards;
	}

	.flash-text .inner {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		width: 48vw;
		height: 28vw;
		margin: 0;
		padding: 19.2vw 0 0;
		border-radius: 3.6vw;
		background: rgba(0, 0, 0, .5) url(/company/digital/assets/img/contents/icon_slide.svg) no-repeat center 4vw / 14.4vw;
	}

	.flash-text p {
		margin: 0;
		font-size: 3.466666667vw;
		font-weight: normal;
		text-align: center;
		color: #fff;
	}

	@keyframes fade-in-out {
		0% {
			visibility: hidden;
			opacity: 0;
		}

		30% {
			visibility: visible;
			opacity: 1;
		}

		70% {
			visibility: visible;
			opacity: 1;
		}

		100% {
			visibility: hidden;
			opacity: 0;
		}
	}

}

/*------------------------------------------------------------
[PC]
------------------------------------------------------------ */
@media print,
screen and (min-width:768px) {

	#suntory_contents .dx_contents {
		display: block;
	}

	#suntory_contents .dx_contents .detail_container a:hover {
		color: #0E7AC4;
		text-decoration: underline;
	}

	/*------------------------------------------------------------
[PC] contents_label
------------------------------------------------------------ */
	#suntory_contents .contents_label {
		margin: 0 auto 60px;
		padding: 0;
		width: 1160px;
		height: 60px;
		display: flex;
		align-items: center;
		font-size: 32px;
		line-height: 1;
	}

	#suntory_contents .contents_label a {
		color: #0D347F;
		text-decoration: none;
	}

	#suntory_contents .contents_label a span {
		display: inline;
		font-size: 26px;
		margin: 0 3px 0 0;
	}

	/*------------------------------------------------------------
[PC] contents_body
------------------------------------------------------------ */
	.contents_body {
		margin: 0 auto;
		width: 1160px;
	}

	.contents_body a {
		transition: 0.2s;
	}

	.contents_body h1 {
		font-size: 36px;
		line-height: 1;
		font-weight: normal;
		color: #000000;
		text-align: center;
		position: relative;
		margin-bottom: 50px;
		padding-bottom: 25px;
	}

	.contents_body h1::after {
		content: '';
		width: 1160px;
		height: 2px;
		background: #004aa9;
		background: linear-gradient(to right, #004aa9 0%, #1fcfff 100%);
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.contents_body h1 .txt_sm {
		font-size: 28px;
	}

	.detail_container {
		margin: 0 100px;
	}

	.contents_body .detail_container h2 {
		margin: 0 0 50px;
		font-size: 24px;
		font-weight: 600;
		line-height: 1.5;
		color: #0d347f;
	}

	.contents_body .detail_container h2.with_notes {
		margin: 0;
	}

	.contents_body .detail_container h2+p.h2notes {
		margin: 5px 0 50px;
		font-size: 16px;
		line-height: 1.5;
		font-weight: 600;
		color: #0d347f;
	}

	.contents_body .detail_container h3 {
		font-size: 20px;
		font-weight: normal;
		margin-bottom: 20px;
		color: #000000;
		line-height: 50px;
		padding: 0 0 0 16px;
		border-left: 4px solid #6692CB;
		border-bottom: 1px solid #6692CB;
	}

	.contents_body .detail_container h3 .txt_sm {
		font-size: 15px;
		margin: 0 0 0 20px;
	}

	.contents_body h4 {
		color: #0D347F;
		font-size: 18px;
		font-weight: 600;
		margin: 0 0 5px;
	}

	.contents_body h4::before {
		content: "■";
		font-size: 18px;
		color: #0D347F;
		margin-right: 5px;
	}

	.contents_body p {
		font-size: 16px;
		line-height: 1.8;
	}

	.contents_body p+p {
		margin-top: 20px;
	}

	.contents_body p+h3,
	.contents_body p+h4 {
		margin-top: 40px;
	}

	.contents_body p.notes {
		font-size: 14px;
		line-height: 1.6;
		text-indent: -1em;
		margin-left: 1em;
	}

	.contents_body p.reference {
		margin-top: 10px;
	}

	.contents_body p sup {
		font-size: 10px;
	}

	.contents_body .dot_list li {
		font-size: 15px;
		line-height: 1.8;
	}

	.contents_body .dot_list+p {
		margin-top: 10px;
	}

	.contents_body picture,
	.contents_body figure,
	.contents_body .img_flex,
	.contents_body .img_scroll {
		margin: 40px 0 0;
	}

	.contents_body .img_flex {
		display: flex;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		gap: 15px;
	}

	.contents_body h6.img_title+.img_flex {
		margin-top: 15px;
	}

	.contents_body figcaption {
		display: block;
		width: 100%;
		margin: 15px 0 0;
		font-size: 14px;
		line-height: 1.6;
		text-align: center;
	}

	.contents_body figure+p.piccaption,
	.contents_body picture+p.piccaption {
		display: block;
		width: 840px;
		margin: 15px auto 0;
		font-size: 14px;
		line-height: 1.6;
		text-align: center;
	}

	.contents_body .img_scroll+h3,
	.contents_body .img_scroll+h4,
	.contents_body .img_scroll+p,
	.contents_body picture+h4,
	.contents_body picture+h3,
	.contents_body picture+p,
	.contents_body p.piccaption+p,
	.contents_body figure+h4,
	.contents_body figure+h3,
	.contents_body figure+p,
	.contents_body .img_flex+h4,
	.contents_body .img_flex+h3,
	.contents_body .img_flex+p {
		margin-top: 40px;
	}

	/*大サイズイメージ横スクロール非表示*/
	.contents_body .img_scroll {
		overflow-y: hidden;
	}

	.contents_body .img_scroll .flash-text {
		display: none;
	}

	/*例・事例囲み*/
	.contents_body .example {
		border: 1px solid #ccc;
		padding: 30px 20px;
		margin: 50px 0;
	}

	.contents_body h4+.example {
		margin-top: 10px;
	}

	.contents_body .example h5 {
		width: 100%;
		font-weight: 600;
		font-size: 16px;
		line-height: 1;
		margin: 0 0 30px;
	}

	/*画像タイトル*/
	.contents_body h6.img_title {
		width: 100%;
		font-weight: 600;
		font-size: 18px;
		line-height: 1;
		text-align: center;
		margin: 0 0 10px;
	}

	/*------------------------------------------------------------
[PC] list_container
------------------------------------------------------------ */
	.list_container h2.heading {
		margin: 0 auto 35px;
		width: 1000px;
		font-size: 28px;
		line-height: 1;
		font-weight: normal;
		border: none;
		padding: 26px 0 6px 20px;
		position: relative;
	}

	.list_container h2.heading::before {
		content: "";
		display: block;
		width: 5px;
		height: 40px;
		position: absolute;
		background: #6692CB;
		left: 0;
		top: 20px;
	}

	.list_container h2.heading:first-child {
		margin-top: -20px;
	}

	.list_container ul+h2.heading {
		margin: 50px auto 35px;
	}

	.list_container li {
		margin: 0 auto;
		width: 1000px;
		background: #F5F5F5;
		padding: calc(40px - .5em) 0 20px 50px;
		position: relative;
		min-height: 250px;
	}

	.list_container li+li {
		margin-top: 35px;
	}

	.list_container li h2,
	.list_container li h3 {
		margin-bottom: calc(18px - .5em);
		font-size: 24px;
		text-align: left;
		width: 600px;
	}

	.list_container li a:hover {
		color: #0E7AC4;
	}

	.list_container li h3 .txt_sm {
		font-size: 18px;
	}

	.list_container li picture {
		margin: 0;
		width: 290px;
		position: absolute;
		top: 20px;
		right: 20px;
		transition: 0.2s;
	}

	.list_container li picture img {
		width: 100%;
		height: auto;
	}

	.list_container li a:hover picture {
		opacity: 0.8;
	}

	.list_container li .text_block {
		width: 600px;
	}

	.list_container li.img_none {
		padding-right: 50px;
		padding-bottom: 40px;
		min-height: auto;
	}

	.list_container li.img_none .text_block {
		width: 100%;
	}

	.list_container li .text {
		margin-bottom: 10px;
		font-size: 15px;
		line-height: 1.6;
	}

	.list_container li p.btn_more {
		margin: 0;
		position: absolute;
		left: 50px;
		bottom: 40px;
	}

	.list_container li.img_none p.btn_more {
		margin: 30px 0 0;
		position: static;
		left: 0;
		bottom: 0;
	}

	.list_container li .btn_more a {
		margin: 0;
		width: 180px;
		height: 50px;
		background: url(../img/svg/text_viewmore.svg) no-repeat 30px center,
			url(../img/svg/arrow_right.svg) no-repeat right 12px center #00B1DD;
		background-size: 107px auto, 12px auto;
	}

	.list_container li .btn_more a:hover {
		background: url(../img/svg/text_viewmore.svg) no-repeat 30px center,
			url(../img/svg/arrow_right.svg) no-repeat right 12px center #21C3EE;
		background-size: 107px auto, 12px auto;
	}

	/*------------------------------------------------------------
[PC] individual setting
------------------------------------------------------------ */
	.contents_body#dsh .img_flex.dsh-first {
		align-items: flex-start;
	}

	.contents_body#dsh .img_flex.dsh-first picture {
		height: 150px;
	}

	.contents_body#dsh .img_flex.dsh-third picture {
		height: 220px;
	}

	.contents_body#factory .img_flex picture {
		height: 200px;
	}

	.contents_body#hrd .img_flex.hrd-photos figure+figure {
		margin-left: 40px;
	}

	.contents_body#hrd .img_flex.hrd-photos figure+figure img {
		border: 1px solid #ddd;
	}

	.contents_body#exchange .img_flex.xai {
		justify-content: space-between;
		align-items: flex-start;
	}

	.contents_body#exchange .img_flex.xai .right_part {
		width: 320px;
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}

	.contents_body#exchange .img_flex.xai .right_part h6 {
		width: 100%;
		font-weight: 600;
		font-size: 16px;
		line-height: 1;
		margin: 0 0 8px;
	}

	.contents_body#exchange .img_flex.xai .right_part figure+h6 {
		margin: 20px 0 8px;
	}

	.contents_body#exchange .img_flex.xai .right_part figcaption {
		margin: 8px 0 0;
	}

	.contents_body#security .img_first picture {
		margin: 30px 80px 50px;
	}

	.contents_body#factory p.sub_head {
		font-weight: 600;
		margin-top: 20px;
	}

	.contents_body#factory p.sub_head+p {
		margin-top: 0;
	}

	.contents_body p .txt_kome {
		font-size: 12px;
	}

	.contents_body#ai p.point {
		font-weight: bold;
	}

	.contents_body#ai p.point+p.point {
		margin-top: 10px;
	}

	.contents_body#jihanpi .txt_img_flex {
		display: block;
		position: relative;
	}

	.contents_body#jihanpi .txt_img_flex .part_img {
		width: 320px;
		text-align: center;
		position: absolute;
		right: 0;
		top: 0;
	}

	.contents_body#jihanpi .txt_img_flex ol.pi_flow {
		width: 600px;
		margin: 50px 0 0;
		padding-left: 2em;
		line-height: 1.8;
		font-size: 18px;
		font-weight: bold;
		color: #0d347f;
	}

	.contents_body#jihanpi ol.pi_flow.first {
		margin: 0;
	}

	.contents_body#jihanpi ol.pi_flow li p {
		font-size: 16px;
		line-height: 1.8;
		color: #000;
		font-weight: normal;
	}
	.contents_body#citizen #img_citizen_3 img{
		width: 600px;
	}


}