@charset "utf-8";

/*===============================================
●共通
===============================================*/
* {box-sizing: border-box;}
body {
	color: #000;
	background-color :#ffffff;
	font-size: 100%; /* 1em=16pxに設定 */
	position: relative;
}
body,
th,
td {
	font-family: "Amiri", serif;
	line-height:1.3em;
}
p {
	text-align: inherit;
	text-justify:distribute;
}
img {
	max-width:100%;
	height:auto;
	vertical-align:middle;
	-ms-interpolation-mode:bicubic;
}
a {text-decoration: none;}
a:link {color:#000;}
a:visited {color:#000;}
a:hover {text-decoration:none;}
a:active {color:#000;}
a:hover img {opacity: 0.8;}

/* ロゴタイトル */
.trademark {
	text-align: center;
	line-height: 1.5;
	width: 100%;
	margin: 0 auto;
	padding: 0.3em 0 0;
}

/* ボタン */
.arrowBtn {
	display: inline-block;
	padding: 0.5em 1em;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
	border: 1px solid #000;
}
.arrowBtn svg {
	width: 12px;
	height: 13px;
	margin-left: 1.5em;
	vertical-align: -0.05em;
	transition: all 0.3s;
}

.clipBtn {
	display: inline-block;
	padding: 0.5em 1.2em 0.3em;
	transition-duration: 0.3s;
	transition-timing-function: ease-in;
	border: 1px solid #000;
}
.clipBtn svg {
	width: 14px;
	height: 16px;
	vertical-align: -0.15em;
	margin-right: 0.6em;
	transition: all 0.3s;
}

#pageTop a {display: block;}

/* 動画 */
.movieBox {
	display: block;
	position: relative;
	width: 100%;
}

.movieBox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.txtNoWrap {
	display: inline-block;
	white-space: pre-line;
}


/* header
---------------------------------------- */
#header .headerSign {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#header .headerLogo {display: flex;}
#mainMenu li:last-child {padding-right:0;}

#mainMenu .langList {
	display: flex;
	justify-content: space-between;
	position: relative;
	width: 47.9%;
}
div#mainMenu .langList p {
	min-width: 129px;
}
div#mainMenu .langList ul {
	position: absolute;
	top: 0;
	right: 0;
	text-align: center;
	width: 48%;
}
/*#mainMenu .langList ul {
	display: flex;
}*/
div#mainMenu div.langList li {
	font-size: 14px;
	
	padding-right: 0!important;
	width: 100%;
}
div#mainMenu div.langList li:not(:first-child) {
	background-color: #fff;
}
#mainMenu .langList ul li:not(:last-child) {
	position: relative;
}
div#mainMenu div.langList li:not(:first-child) {
	display: none;
}
div#mainMenu div.langList li:nth-child(2) {
	border: 1px solid #C7C7C9!important;
	border-bottom: none!important;
}

div#mainMenu div.langList li:last-child {
	border: 1px solid #C7C7C9!important;
	border-top: none!important;
}

div#mainMenu div.langList li:not(:first-child) {
	border: 1px solid #C7C7C9;
	border-top: none;
	border-bottom: none;
}
div#mainMenu div.langList a {
	display: inline-block;
}
div#mainMenu .langList li:not(:first-child) a {
	width: 100%;
	text-align: center;
	line-height: 2em;
}
div#mainMenu .langList li:not(:first-child) a:hover {
	background-color: rgba(121, 123, 133, 0.1);
}
/*#mainMenu .langList ul li:not(:last-child):after {
	content: "/";
	position: absolute;
	top: 0;
	right: 0;
	display: block;
}*/
#header .exLinkList a {
	position: relative;
	display: inline-block;
	padding-left: 1em;
}
#header .exLinkList a:before {
	position: absolute;
	content: "";
	display: inline-block;
	width: 2em;
	height: 1em;
	background: url(../../../images/passion/icon-exlink.png) no-repeat center left;
}

/* 各言語 */

.passionEn .passion01 {background-image: url(../../../images/passion/en/mapEN.png) }
.passionEs .passion01 {background-image: url(../../../images/passion/es/mapES.png);}
.passionNl .passion01 {background-image: url(../../../images/passion/nl/mapNL.png);}
.passionDe .passion01 {background-image: url(../../../images/passion/de/mapDE.png);}
.passionFr .passion01 {background-image: url(../../../images/passion/fr/mapFR.png);}
.passionZh .passion01 {background-image: url(../../../images/passion/zh/mapZh.png) }

.passionEn .passion01 .frontier {background-color: #F6FFF9;}
.passionEs .passion01 .frontier {background-color: #FFF9FA;}
.passionNl .passion01 .frontier {background-color: #FFF9F3;}
.passionDe .passion01 .frontier {background-color: #FAFFE5;}
.passionFr .passion01 .frontier {background-color: #F2F8FF;}
.passionZh .passion01 .frontier {background-color: #FFF8EF;}

.passionEn .frontier .infoBox table th {color: #0BB23A;}
.passionEs .frontier .infoBox table th {color: #F90014;}
.passionNl .frontier .infoBox table th {color: #FF7A00;}
.passionDe .frontier .infoBox table th {color: #E6E600;}
.passionFr .frontier .infoBox table th {color: #0026A2;}
.passionZh .frontier .infoBox table th {color: #E5BE90;}

.passionEn .frontier .infoBox table tr:not(:last-of-type) th {border-bottom: 1px solid #0BB23A;}
.passionEs .frontier .infoBox table tr:not(:last-of-type) th {border-bottom: 1px solid #F90014;}
.passionNl .frontier .infoBox table tr:not(:last-of-type) th {border-bottom: 1px solid #FF7A00;}
.passionDe .frontier .infoBox table tr:not(:last-of-type) th {border-bottom: 1px solid #E6E600;}
.passionFr .frontier .infoBox table tr:not(:last-of-type) th {border-bottom: 1px solid #0026A2;}
.passionZh .frontier .infoBox table tr:not(:last-of-type) th {border-bottom: 1px solid #E5BE90;}

.passionEn #footer .langList {background: #0BB23A;}
.passionEs #footer .langList {background: #F90014;}
.passionNl #footer .langList {background: #FF7A00;}
.passionDe #footer .langList {background: #E6E600;}
.passionFr #footer .langList {background: #002395;}
.passionZh #footer .langList {background: #E5BE90;}
body.passionEn #mainMenu a.en {
	background-color: rgba(121, 123, 133, 0.1);
	background-image: url(../../../images/passion/checkOption.svg);
	background-repeat: no-repeat;
	background-position-x: 10px;
	background-position-y:center;
}
body.passionEs #mainMenu a.es {
	background-color: rgba(121, 123, 133, 0.1);
	background-image: url(../../../images/passion/checkOption.svg);
	background-repeat: no-repeat;
	background-position-x: 10px;
	background-position-y:center;
}
body.passionNl #mainMenu a.nl {
	background-color: rgba(121, 123, 133, 0.1);
	background-image: url(../../../images/passion/checkOption.svg);
	background-repeat: no-repeat;
	background-position-x: 10px;
	background-position-y:center;
}
body.passionDe #mainMenu a.de {
	background-color: rgba(121, 123, 133, 0.1);
	background-image: url(../../../images/passion/checkOption.svg);
	background-repeat: no-repeat;
	background-position-x: 10px;
	background-position-y:center;
}
body.passionFr #mainMenu a.fr {
	background-color: rgba(121, 123, 133, 0.1);
	background-image: url(../../../images/passion/checkOption.svg);
	background-repeat: no-repeat;
	background-position-x: 10px;
	background-position-y:center;
}
body.passionZh #mainMenu a.zh {
	background-color: rgba(121, 123, 133, 0.1);
	background-image: url(../../../images/passion/checkOption.svg);
	background-repeat: no-repeat;
	background-position-x: 10px;
	background-position-y:center;
}
span#earthIcon {
	padding: 0 5px;
}
span#earthIcon svg {
	width: 11px;
	height: 11px;
}
span#arrowSelect {
	padding: 0 10px;
}
#arrowSelect svg {
	width: 6px;
	height: 6px;
}

/* 各言語 */
.passionEn #mainImageWrap .headingBox h1::after {
	background: url(../../../images/passion/en/icon-SDGs.svg) no-repeat center / 100%;
}
.passionEs #mainImageWrap .headingBox h1::after {
	background: url(../../../images/passion/es/icon-SDGs.svg) no-repeat center / 100%;
}
.passionNl #mainImageWrap .headingBox h1::after {
	background: url(../../../images/passion/nl/icon-SDGs.svg) no-repeat center / 100%;
}
.passionDe #mainImageWrap .headingBox h1::after {
	background: url(../../../images/passion/de/icon-SDGs.svg) no-repeat center / 100%;
}
.passionFr #mainImageWrap .headingBox h1::after {
	background: url(../../../images/passion/fr/icon-SDGs.svg) no-repeat center / 100%;
}
.passionZh #mainImageWrap .headingBox h1::after {
	background: url(../../../images/passion/zh/icon-SDGs.svg) no-repeat center / 100%;
}

/* pageTop
---------------------------------------- */
#pageTop a {display: block;}

/* footer
---------------------------------------- */

#footer,
#footer a {color: #fff;}
#footer .langList .inner {
	color: #fff;
}
#footer .langList .inner ul {
	display: flex;
	justify-content: space-between;
}
#footer .langList ul li:first-child {display: none;}
#footer .langList ul li:not(:last-child) {position: relative;}
#footer .langList ul li:not(:last-child):after {
	content: "/";
	position: absolute;
	top: 0;
	display: block;
}
#footer .footerSign {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 各言語 */
.passionEn #footer .langList a.en,
.passionEs #footer .langList a.es,
.passionNl #footer .langList a.nl,
.passionDe #footer .langList a.de,
.passionFr #footer .langList a.fr,
.passionZh #footer .langList a.zh {font-weight: bold;}

#footer .footerInner .footerSign {
	display: flex;
	max-width: 174px;
}

#footer .exLinkList a {
	position: relative;
	display: inline-block;
	padding-left: 1em;
}
#footer .exLinkList a:before {
	position: absolute;
	content: "";
	display: inline-block;
	width: 2em;
	height: 1em;
	background: url(../../../images/passion/icon-exlink-w.png) no-repeat center left / 0.8em auto;
	left: 0;
	top: 0.25em;
}
#footer .contactLink a {
	color: #fff;
	text-align: center;
	border: 1px solid #fff;
}
#footer .privacyLink a {
	position: relative;
	display: inline-block;
	padding-left: 1.5em;
	color: #bbb;
}
#footer .privacyLink a:before {
	position: absolute;
	content: "";
	display: inline-block;
	width: 2em;
	height: 2em;
	background: url(../../../images/passion/icon-blank-w.png) no-repeat center left / 1.12em auto;
	left: 0;
}
#footer small {color: #bbb;}


/* メインイメージ
---------------------------------------- */
#mainImageWrap {
	height: 550px;
	position: relative;
}
#mainImageWrap::before {
	position: absolute;
	content: "";
	display: block;
	width: 18.6%;
	height: 92.5%;
	right: 0;
	bottom: 0;
}

.passionEn #mainImageWrap::before {background-color: #0BB23A;}
.passionEs #mainImageWrap::before {background-color: #F90014;}
.passionNl #mainImageWrap::before {background-color: #FF7A00;}
.passionDe #mainImageWrap::before {background-color: #FFF000;}
.passionFr #mainImageWrap::before {background-color: #0026A2;}
.passionZh #mainImageWrap::before {background-color: #E5BE90;}

#mainImageWrap .mainImage div {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #ccc;
}

#mainImageWrap .mainImage .slick-slide {
	background-repeat: no-repeat;
	height: 100%!important;
}
#mainImageWrap .mainImage .image01 {background-image: url(../../../images/passion/mainImage/image01.jpg);}
#mainImageWrap .mainImage .image02 {background-image: url(../../../images/passion/mainImage/image02.jpg);}
#mainImageWrap .mainImage .image03 {background-image: url(../../../images/passion/mainImage/image03.jpg);}
#mainImageWrap .mainImage .image04 {background-image: url(../../../images/passion/mainImage/image04.jpg);}
#mainImageWrap .mainImage .image05 {background-image: url(../../../images/passion/mainImage/image05.jpg);}


/* プログレスバー */
#mainImageWrap .slideCounter {
	position: absolute;
	right: 0;
	color: #fff;
	font-weight: bold;
	letter-spacing: 0.02em;
	text-align: center;
}
#mainImageWrap .progress .bar {
	display: block;
	width: 2px;
	height: 0;
	background-color: #fff;
}

.passionEn .progress {background-color: #8DFFAD;}
.passionEs .progress {background-color: #FF949C;}
.passionNl .progress {background-color: #FCBA7D;}
.passionDe .progress {background-color: #000;} /*#EBEB00*/
.passionFr .progress {background-color: #839BE9;}
.passionZh .progress {background-color: #EECD70;}


/* h1 */
.passionEn #mainImageWrap .headingBox p {color: #0BB23A;}
.passionEs #mainImageWrap .headingBox p {color: #F90014;}
.passionNl #mainImageWrap .headingBox p {color: #FF7A00;}
.passionDe #mainImageWrap .headingBox p {color: #E6E600;}
.passionFr #mainImageWrap .headingBox p {color: #0026A2;}
.passionZh #mainImageWrap .headingBox p {color: #E5BE90;}

/* youtube
---------------------------------------- */

/* サムネイル */
.movieWrap .movie a {
	display: block;
	position: relative;
	outline: none;
}
.movieWrap .movie a:hover {
	background-color: #000;
	opacity: 1;
}
.movieWrap .movie a:hover img {opacity: 0.8;}
.movieWrap .movie a:after,
.movieWrap .movie a:before {
	content: "";
	display: inline-block;
	position: absolute;
	z-index: 10;
}
.movieWrap .movie a:after {background: url("../../../images/passion/playBtn.png") no-repeat center center / contain;}
.movieWrap .movie a:hover:after {background: url("../../../images/passion/playBtn_hover.png") no-repeat center center / contain;}

/* ポップアップ */
.movieWrap #cboxOverlay {
	opacity: 1!important;
	display: flex;
	align-items: center;
	text-align: center;
	pointer-events: none;
}
.movieWrap #cboxLoadedContent {
	background-color: transparent;
	border: none;
}
.movieWrap .cboxIframe {background: transparent;}
.movieWrap #cboxContent {margin-top: 30px;}
.movieWrap #colorbox {
	max-width: 1280px;
	width: 100%;
	height: auto;
}
.movieWrap #cboxClose {
	background: url("../../../images/passion/cross.svg") no-repeat center center / contain;
	width: 20px;
	height: 20px;
	right: 0;
	top: -28px;
	outline: none;
	transition: all 0.3s;
}

/* contents
---------------------------------------- */

/* 背景 */
.passionEn .bgBotanical {background: url(../../../images/passion/en/en_bg.jpg) center / 85% auto;}
.passionEs .bgBotanical {background: url(../../../images/passion/es/es_bg.jpg) center / 20% auto;}
.passionNl .bgBotanical {background: url(../../../images/passion/nl/nl_bg.jpg) center / 85% auto;}
.passionDe .bgBotanical {background: url(../../../images/passion/de/de_bg.jpg) center / 20% auto;}
.passionFr .bgBotanical {background: url(../../../images/passion/fr/fr_bg.jpg) center / 20% auto;}
.passionZh .bgBotanical {background: url(../../../images/passion/zh/zh_bg.jpg) center / 20% auto;}

.passionEn .bgBox {background-color: #F6FFF9;}
.passionEs .bgBox {background-color: #FFF5F6;}
.passionNl .bgBox {background-color: #FFF6EE;}
.passionDe .bgBox {background-color: #FAFFE5;}
.passionFr .bgBox {background-color: #F6F8FF;}
.passionZh .bgBox {background-color: #FFF8EF;}

.passionWrap header .headerText p span {
	display: inline-block;
	background-color: #000;
	color: #fff;
	text-align: center;
}

/*各言語*/
.passionEn .passion02 .policy h3 {color: #0BB23A;}
.passionEs .passion02 .policy h3 {color: #F90014;}
.passionNl .passion02 .policy h3 {color: #FF7A00;}
.passionDe .passion02 .policy h3 {color: #EBEB00;}
.passionFr .passion02 .policy h3 {color: #0026A2;}
.passionZh .passion02 .policy h3 {color: #E5BE90;}

.passionEn .passion02 .policy ul li {
	background-color: #F6FFF9;
	border: 1px solid #0BB23A;
}
.passionEs .passion02 .policy ul li {
	background-color: #FFF9FA;
	border: 1px solid #F90014;
}
.passionNl .passion02 .policy ul li {
	background-color: #FFF9F3;
	border: 1px solid #FF7A00;
}
.passionDe .passion02 .policy ul li {
	background-color: #FAFFE5;
	border: 1px solid #E6E600;
}
.passionFr .passion02 .policy ul li {
	background-color: #F2F8FF;
	border: 1px solid #0026A2;
}
.passionZh .passion02 .policy ul li {
	background-color: #FFF8EF;
	border: 1px solid #E5BE90;
}

.passionWrap .frontier article:not(:last-of-type) {margin-bottom: 10.4%;}
.passionWrap .frontier .infoBox table {
	width: 100%;
	margin-top: 1.1em;
}
.passionWrap .frontier .infoBox table th,
.passionWrap .frontier .infoBox table td {
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.passionWrap .frontier .infoBox table tr:not(:last-of-type) td {border-bottom: 1px solid #DFDFDF;}
.passionWrap .frontier .imageBox img:not(:last-of-type) { margin-bottom: 1.1em;}

.quality {
	max-width: 1100px;
	margin: 0 auto;
	border: 10px solid #000;
	padding: 1.25em;
}
.quality .inner {
	background-color: #F3F3F3;
	padding: 5.7%;
}
.quality article {padding-top: 6.5%;}
.quality h3 {
	font-size: 1.55em;
	font-weight: bold;
	text-align: center;
	line-height: 1.42;
	margin-bottom: 5%;
}
.quality article h4 {
	position: relative;
	font-weight: bold;
	font-size: 1.22em;
	padding-left: 1em;
	display: block;
	margin-bottom: 0.65em;
}
.quality article h4::before{
	content: "";
	background: url(../../../images/passion/icon-circle.svg) no-repeat center 5px / 12px 12px;
	display: inline-block;
	width: 12px;
	height: 100%;
	color: #AB9242;
	position: absolute;
	left: 0;
	top: 0;
}
.quality article p {margin-bottom: 1em;}
.quality article table {
	width: 100%;
	padding: 1em;
	margin-bottom: 2%;
}
.quality article table tr:not(:last-of-type) {border-bottom: 1px solid #F3F3F3;}
.quality article table tr:nth-child(1n) {background-color: #FFF;}
.quality article table tr:nth-child(2n) {background-color: #FAFAFA;}
.quality article table th {
	font-weight: bold;
	padding: 1em;
}
.quality article table td {
	line-height: 1.55em;
	padding: 1em 1em 1em 0;
}
.quality article .clipBtn {margin-bottom: 1.66em;}

/* passion06 */
.passion06 article p {margin-bottom: 1em;}
.passion06 article .inner {
	max-width: 960px;
	text-align: center;
}
.passion06 article h3 {
	font-size: 1.77em;
	font-weight: bold;
	text-align: center;
	padding-left: 1.6em;
	display: inline-block;
	padding-top: 0.9em;
	margin: 0 auto 1em;
}

.passion06 article h3 {
	background-repeat: no-repeat;
	background-position: left top;
	background-size: auto 2em;
	line-height: 1.2em;
}
.passionEn .passion06 article h3 {background-image: url(../../../images/passion/en/icon-twincube.svg);}
.passionEs .passion06 article h3 {background-image: url(../../../images/passion/es/icon-twincube.svg);}
.passionNl .passion06 article h3 {background-image: url(../../../images/passion/nl/icon-twincube.svg);}
.passionDe .passion06 article h3 {background-image: url(../../../images/passion/de/icon-twincube.svg);}
.passionFr .passion06 article h3 {background-image: url(../../../images/passion/fr/icon-twincube.svg);}
.passionZh .passion06 article h3 {background-image: url(../../../images/passion/zh/icon-twincube.svg);}

.passionEn .passion06 article h3 span {color: #0BB23A;}
.passionEs .passion06 article h3 span {color: #F90014;}
.passionNl .passion06 article h3 span {color: #FF7A00;}
.passionDe .passion06 article h3 span {color: #EBEB00;}
.passionFr .passion06 article h3 span {color: #002395;}
.passionZh .passion06 article h3 span {color: #E5BE90;}




/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){

	/* 全般
	---------------------------------------- */
	body {
		min-width: 320px;
		-webkit-text-size-adjust: none;
		line-height: 1.5em;
	}
	.spNone {display: none;}
	.inner {padding: 0 1.5em;}

	/* trademark */
	.trademark {
		font-size: 1.25em;
	}

	/* ボタン */
	.arrowBtn {margin-bottom: 1.25em;}

	/* pageTop */
	#pageTop img {
		max-width: 3em;
		width: 100%;
		height: auto;
	}
	#pageTop {right: 1em;}

	/* ヘッダー
	---------------------------------------- */
	@keyframes line_w {
		0% { width:0; }
		100% {width:100%; }
	}

	#header {
		position: fixed;
		width: 100%;
		height: 76px;
		top: 0;
		left: 0;
		z-index: 9999;
		/* transition: all 0.3s; */
		transition: all 0.3s ease-in-out;
	}
	#header .headerInner {
		height: 76px;
		padding: 0 20px;
		position: relative;
		background-color: #fff;
	}
	#header .headerInner:before {
		content: "";
		display: block;
		position: absolute;
		left: 0;
		top: 75px;
		background-color: #fff;
		width: 100%;
		height: 1px;
	}
	#header.ov .headerInner:before {
		background-color: #AAAAAA;
		width: 0;
		animation: line_w 0.5s 0.3s;
		animation-fill-mode: both;
	}
	#header .headerSign {
		max-width: 165px;
		line-height: 76px;
		font-size: 1.25em;
	}

	/* menuBtn */
	#menuBtn {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
	}
	#menuBtn a {
		display: block;
		width: 36px;
		height: 20px;
		position: relative;
		z-index: 100;
	}
	#menuBtn a span {
		display: inline-block;
		position: absolute;
		width: 36px;
		height: 1px;
		background-color: #000;
		-webkit-transition: all .4s;
		transition: all .4s;
	}
	#menuBtn span:nth-child(1) {top: 0px;}
	#menuBtn span:nth-child(2) {top: 10px;}
	#menuBtn span:nth-child(3) {top: 20px;}

	#menuBtn .close span:nth-child(1) {transform: translateY(8px) rotate(-40deg);}
	#menuBtn .close span:nth-child(2) {opacity: 0;}
	#menuBtn .close span:nth-child(3) {transform: translateY(-12px) rotate(40deg);}

	/* mainMenu */
	#mainMenu {
		background-color: #fff;
		display: none;
		position: absolute;
		top: 76px;
		left: 0;
		width: 100%;
		padding: 0.5em 20px 0.7em 20px;
		z-index: 10;
		box-sizing: border-box;
	}
	#mainMenu .langList {
		display: flex;
		padding: 1em 0;
		width: 100%!important;
	}
	#mainMenu .langList p {font-size: 1.25em;}
	#mainMenu .langList ul {
		font-size: 0.87em;
		top: calc(50% - 10px)!important;
		width: 7em;
	}
	div#mainMenu .langList li:not(:first-child) a {line-height: 3em;}
	#mainMenu .langList ul li:not(:last-child) {padding-right: 1.5em;}
	#mainMenu .langList ul li:not(:last-child):after {right: 0.5em;}
	#mainMenu .spMenu {margin-bottom: 1.87em;}
	#mainMenu .spMenu li {
		border-bottom: 1px solid #D9D9D9;
		background: url(../../../images/passion/icon-arrow.png) no-repeat center right / auto 0.6em;
	}
	#mainMenu .spMenu li:first-child {border-top: 1px solid #D9D9D9;}
	#mainMenu .spMenu li a {
		display: flex;
		align-items: center;
		font-size: 0.81em;
		padding: 1em 1.5em 1em 0;
		line-height: 1em;
	}
	#mainMenu .spMenu li a .memuNo {
		display: inline-block;
		min-width: 88px;
		line-height: 2.15em;
	}
	.passionEs #mainMenu .spMenu li a .memuNo span {
		color: #F90014;
	}
	.passionNl #mainMenu .spMenu li a .memuNo span {
		color: #FF7A00;
	}
	.passionDe #mainMenu .spMenu li a .memuNo span {
		color: #FFF000;
	}
	.passionFr #mainMenu .spMenu li a .memuNo span {
		color: #0026A2;
	}
	.passionZh #mainMenu .spMenu li a .memuNo span {
		color: #E5BE90;
	}
	#mainMenu .spMenu li a .memuNo span {
		display: inline-block;
		font-size: 2.15em;
		color: #0BB23A;
		margin: 0 0.8em 0 0.2em;
		letter-spacing: -0.07em;
	}

	#mainMenu .exLinkList,
	#mainMenu .contactLink {margin-bottom: 1.25em;}
	#mainMenu .exLinkList a {margin-right: 1em;}
	#mainMenu .contactLink a {
		font-size: 0.87em;
		display: block;
		max-width: 178px;
		color: #fff;
		text-align: center;
		line-height: 2.5em;
		border-radius: 1.25em;
	}
	#header .exLinkList a:before {
		background-size: 0.8em auto;
		left: 0;
		top: 0.25em;
	}

	#mainMenu .contactLink a {
		font-size: 0.87em;
		display: block;
		max-width: 178px;
		color: #fff;
		text-align: center;
		line-height: 2.5em;
		border-radius: 1.25em;
	}
	.passionEn #mainMenu .contactLink a {background: #0BB23A;}
	.passionEs #mainMenu .contactLink a {background: #F90014;}
	.passionNl #mainMenu .contactLink a {background: #FF7A00;}
	.passionDe #mainMenu .contactLink a {background: #E6E600;}
	.passionFr #mainMenu .contactLink a {background: #0026A2;}
	.passionZh #mainMenu .contactLink a {background: #E5BE90;}

	#header .privacyLink a {
		position: relative;
		display: inline-block;
		padding-left: 1.6em;
		margin-right: 1em;
		font-size: 0.75em;
	}
	#header .privacyLink a:before {
		position: absolute;
		content: "";
		display: inline-block;
		width: 2em;
		height: 1em;
		background: url(../../../images/passion/icon-blank.png) no-repeat center left / 1.25em auto;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	/* pageTop
	---------------------------------------- */
	#pageTop {right: 1em;}
	#pageTop img {
		max-width: 3em;
		width: 100%;
		height: auto;
	}

	/* 動画 */
	.movieBox {	width: 100%;}

	/* main
	---------------------------------------- */
	main {margin-top: 76px;}

	/* メインイメージ
	---------------------------------------- */

	#mainImageWrap .mainImage .image01 {background-position: 50% top; background-size: cover;}
	#mainImageWrap .mainImage .image02 {background-position: center; background-size: cover;}
	#mainImageWrap .mainImage .image03 {background-position: 58% top; background-size: cover;}
	#mainImageWrap .mainImage .image04 {background-position: 57% top; background-size: cover;}
	#mainImageWrap .mainImage .image05 {background-position: center; background-size: cover;}

	#mainImageWrap .mainImage {
		width: calc(100% - 40px);
	}
	#mainImageWrap .headingBox {
		margin-right: 18.6%;
	}
	#mainImageWrap .headingBox .inner {
		min-height: 8.75em;
		padding: 1.25em;
	}
	#mainImageWrap .headingBox p {
		font-size: 2.5em;
		line-height: 1em;
		margin-bottom: 0.5em;
	}
	#mainImageWrap .headingBox h1 {
		display: inline-block;
		/* width: 56%; */
		padding: 0 4.6em 0 2em;
		line-height: 1.2em;
		position: relative;
		font-size: 0.93em;
		font-weight: bold;
	}
	#mainImageWrap .headingBox h1::before {
		content: "";
		display: block;
		width: 1.3em;
		height: 1px;
		background-color: #000;
		position: absolute;
		left: 0;
		top: 0.5em;
	}
	#mainImageWrap .headingBox h1::after {
		position: absolute;
		content: "";
		height: 3.6em;
		width: 3.6em;
		background: url(../../../images/passion/en/icon-SDGs.png) no-repeat center / 100%;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	/* プログレスバー */
	#mainImageWrap .slideCounter {
		bottom: 1.5em;
		width: 40px;
	}
	#mainImageWrap .progress {
		width: 2px;
		height: 182px;
		margin: 0.5em auto;
	}

	img.passionNo { max-width: 107px;}
	.passionWrap {padding-top: 4.68em;}
	.passionWrap .leadSection {text-align: center;}
	.passionWrap header {
		margin-bottom: 1em;
		display: inline-block;
		text-align: left;
	}
	.passionWrap header h2 {
		font-size: 1.75em;
		line-height: 1.12em;
		padding: 0.25em 0;
	}
	.passionWrap header h2 span {
		font-size: 0.5em;
		display: inline-block;
		line-height: 1.25;
	}
	.passionWrap header .headerText p span {
		font-size: 0.87em;
		padding: 0 0.28em;
		text-align: left;
		margin-bottom: 2px;
		/* display: inline; */
	}
	.passionWrap header .leadText {margin-bottom: 1.87em;}
	.passionWrap .imgBox img {
		width: 100%;
		/* margin-bottom: 1em; */
	}
	

	/* youtube
	---------------------------------------- */
	.movieWrap .movie a:after,
	.movieWrap .movie a:hover:after {
		width: 3.4em;
		height: 3.4em;
		top: calc(50% - 1.7em);
		left: calc(50% - 1.7em);
	}

	/* 各passionの項目
	---------------------------------------- */
	/* passion02 */
	.passion02 .headerText p {text-align: left;}
	.passion02 .infoBox {padding-top: 3.5em;}
	.passion02 .teaGarden .altitude {padding-top: 0!important;}

	/* passion05 */
	.passion05 .bgBotanical {padding: 1.5em 0;}
	.passionEn .passion05 .bgBotanical {background-size: 300% auto;}
	.passionEs .passion05 .bgBotanical {background-size: 300% auto;}
	.passionNl .passion05 .bgBotanical {background-size: 300% auto;}
	.passionDe .passion05 .bgBotanical {background-size: 100% auto;}
	.passionFr .passion05 .bgBotanical {background-size: 100% auto;}
	.passionFz .passion05 .bgBotanical {background-size: 100% auto;}


	/* passion06 */
	.passion06 article .inner {
		padding: 3.6% 0 5.8%;
	}
	.passion06 .leadSection img {margin-bottom: 2%;}
	.passion06 article .inner {
		padding: 1em 1.5em;
	}
	.passion06 article h3 {
		background-size: auto 1.5em;
	}

	.passion06 .imgBox > img,
	.passion06 .imgBox .movieBox > .movie {
		margin-bottom: 1em;
	}

	.quality article table th {padding: 1em 0.5em;}
	/* footer
	---------------------------------------- */
	#footer {
		background: url("../../../images/passion/footerBg.jpg") #fff repeat-x left bottom / contain;
		/* padding: 0 0 1.25em; */
		box-sizing: border-box;
	}
	#footer .langList {
		/* height: 2em; */
		line-height: 2em;
	}
	#footer .langList .inner {
		justify-content: space-between;
		line-height: 2.28em;
	}
	#footer .langList .inner ul {
		font-size: 0.87em;
		flex-wrap: wrap;
		line-height: 2em;
		justify-content: flex-start;
		padding-bottom: 0.2em;
	}
	#footer .langList ul li:not(:last-child) {padding-right: 1.5em;}
	#footer .langList ul li:not(:last-child):after {right: 0.5em;}
	#footer .footerInner {
		/*height: 260px;*/
		padding: 1em 20px 1.25em;
	}
	#footer .footerSign {
		max-width: 175px;
		height: 60px;
		font-size: 1.31em;
		color: #fff;
		margin: 0 auto 1em;
		font-size: 1.31em;
	}
	#footer .exLinkList {
		display: flex;
		justify-content: space-between;
		margin: 0 auto 1em;
	}
	.passionEn #footer .exLinkList {
		max-width: 170px;
	}
	.passionEs #footer .exLinkList {
		max-width: 190px;
	}
	.passionNl #footer .exLinkList {
		max-width: 220px;
	}
	.passionDe #footer .exLinkList {
		max-width: 170px;
	}
	.passionFr #footer .exLinkList {
		max-width: 170px;
	}
	.passionZh #footer .exLinkList {
		max-width: 170px;
	}
	#footer .exLinkList a {font-size: 0.875em;}
	#footer .contactLink {
		max-width: 178px;
		margin: 0 auto 0.7em;
	}
	#footer .contactLink a {
		font-size: 0.87em;
		display: block;
		line-height: 2.5em;
		border-radius: 1.25em;
	}
	#footer .privacyLink {
		font-size: 0.75em;
		text-align: center;
		margin-bottom: 1.6em;
	}

	#footer small {
		display: block;
		text-align: center;
	}

}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px){

	/* 全般
	---------------------------------------- */
	body, th, td {font-size: 18px;}
	body {line-height: 1.55em;}

	#menuBtn,
	.pcNone {display: none!important;}
	.inner {
		width: 100%;
		max-width: 1080px;
		padding: 0 10px;
		margin: 0 auto;
		box-sizing: border-box;
	}

	/* ボタン hover時(PCのみ)*/
	.arrowBtn:hover {
		background-color: #000;
		color: #fff;
	}
	.arrowBtn:hover svg {
		transform: translateY(3px);
		transition-duration: 0.3s;
		transition-timing-function: ease-in;
		fill: #fff;
	}

	.clipBtn:hover {
		background-color: #000;
		color: #fff;
	}
	.clipBtn:hover svg {
		transform: translateY(3px);
		transition-duration: 0.3s;
		transition-timing-function: ease-in;
		fill: #fff;
	}

	/* pagetop */
	#pageTop {right: 1.87em;}

	/* ヘッダー
	---------------------------------------- */
	#header {
		height: 100px;
		width: 100%;
		position: fixed;
		z-index: 9999;
		background: #FFF;
	}
	#header .headerInner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 1220px;
		height: 100px;
		margin: 0 auto;
		padding: 0 10px;
		position: relative;
	}
	#header .signWrap {
		width: 34.5%;
		min-width: 370px;
		display: flex;
		align-items: center;
	}
	#header .headerSign {
		width: 48%;
		min-width: 180px;
	}
	#header .exLinkList {
		width: 45%;
		min-width: 270px;
		display: flex;
		align-items: center;
	}
	#header .exLinkList a {
		font-size: 0.88em;
		margin-left: 9%;
	}
	#header .headerTrademark {font-size: 1.22em;}
	#header .headerLogo {text-align: center;}

	/* mainMenu */
	#mainMenu {
		display: flex!important;
		width: 48%;
		max-width: 550px;
		min-width: 450px;
		justify-content: space-between;
		align-items: center;
	}
	#mainMenu .langList {
		width: 63%;
		max-width: 330px;
		min-width: 230px;
	}
	#mainMenu .langList p {
		width: 39.3%;
		/*min-width: 130px;*/
		margin-right: 3%;
		font-size: 1.11em;
	}

	#mainMenu .langList ul {
		width: 51.5%;
		max-width: 170px;
		/*display: flex;
		justify-content: space-between;*/
		font-size: 0.77em;
	}
	#mainMenu .langList ul li:not(:last-child) {padding-right: 10%;}
	#mainMenu .langList ul li:not(:last-child):after {
		right: 5%;
	}
	#mainMenu .langList li a:hover {color:#000;}
	#mainMenu .contactLink {
		display: block;
		width: 34.5%;
		max-width: 190px;
		min-width: 145px;
	}
	#mainMenu .contactLink a {
		/* font-size: 1.125em; */
		display: block;
		text-align: center;
		line-height: 2em;
		border-radius: 1em;
		border: 1px solid #000;
	}
	#header .exLinkList a:before {
		background-size: 0.72em auto;
		left: 0;
		top: 0.25em;
	}
	#mainMenu .contactLink a:hover {
		color: #fff;
	}
	#passion {
		overflow-x: hidden;
	}
	.passionEn #mainMenu .contactLink a:hover,
	.passionEn #footer .contactLink a:hover {
		background-color: #0BB23A;
		border-color: #0BB23A;
	}
	.passionEs #mainMenu .contactLink a:hover,
	.passionEs #footer .contactLink a:hover {
		background-color: #F90014;
		border-color: #F90014;
	}
	.passionNl #mainMenu .contactLink a:hover,
	.passionNl #footer .contactLink a:hover {
		background-color: #FF7A00;
		border-color: #FF7A00;
	}
	.passionDe #mainMenu .contactLink a:hover,
	.passionDe #footer .contactLink a:hover {
		background-color: #EBEB00;
		border-color: #EBEB00;
	}
	.passionFr #mainMenu .contactLink a:hover,
	.passionFr #footer .contactLink a:hover {
		background-color: #0026A2;
		border-color: #0026A2;
	}
	.passionZh #mainMenu .contactLink a:hover,
	.passionZh #footer .contactLink a:hover {
		background-color: #E5BE90;
		border-color: #E5BE90;
	}

	/* メインイメージ
	---------------------------------------- */

	#mainImageWrap .mainImage .image01 {background-position: center; background-size: cover;}
	#mainImageWrap .mainImage .image02 {background-position: center; background-size: cover;}
	#mainImageWrap .mainImage .image03 {background-position: center; background-size: cover;}
	#mainImageWrap .mainImage .image04 {background-position: center; background-size: cover;}
	#mainImageWrap .mainImage .image05 {background-position: center; background-size: cover;}


	#mainImageWrap .mainImage {
		width: calc(100% - 85px);
		height: 550px;
	}
	#mainImageWrap .headingBox {
		margin-right: 18.6%;
		margin-left: auto;
		max-width: 1210px;
	}

	#mainImageWrap .headingBox .inner {
		display: flex;
		align-items: center;
		height: 6.66em;
		padding: 0 5.3em 0 1.11em;
	}
	#mainImageWrap .headingBox p {
		font-size: 3.33em;
		line-height: 0.75em;
		white-space: nowrap;
	}
	#mainImageWrap .headingBox h1 {
		display: inline-block;
		width: 100%;
		padding: 0 1.77em 0 9%;
		position: relative;
		font-size: 1.11em;
		font-weight: bold;
	}
	#mainImageWrap .headingBox h1::before {
		content: "";
		display: block;
		width: 5%;
		height: 1px;
		background-color: #000;
		position: absolute;
		left: 5%;
		top: 50%;
		transform:translateY(-50%);
	}
	#mainImageWrap .headingBox h1::after {
		position: absolute;
		content: "";
		height: 78px;
		width: 78px;
		right: -3.5em;
		top: 50%;
		transform: translateY(-50%);
	}

	/* プログレスバー */
	#mainImageWrap .slideCounter {
		bottom: 60px;
		width: 85px;
		font-size: 0.88em;
	}
	#mainImageWrap .progress {
		width: 2px;
		height: 182px;
		margin: 10px auto;
	}


	/* youtube
	---------------------------------------- */
	.movieWrap .movie a:after,
	.movieWrap .movie a:hover:after {
		width: 3.4em;
		height: 3.4em;
		top: calc(50% - 1.7em);
		left: calc(50% - 1.7em);
	}


	/* コンテンツ 全言語共通
	---------------------------------------- */
	main {padding-top: 100px;}
	.passionWrap {padding-top: 7.29%;}/*1366pxの時100px*/
	.passionWrap .inner {
		max-width: 980px;
		margin: 0 auto;
	}
	.passionWrap .flexReverse {flex-direction: row-reverse;}
	.passionWrap header {margin-bottom: 4.44em;}

	.passionWrap header.horizonTitle {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.passionWrap header.verticalTitle {
		text-align: center;
	}
	.passionWrap header h2 {
		font-size: 2.88em;
		line-height: 1em;
		padding: 0.25em 0;
	}
	.passionWrap header h2 span {
		position: relative;
		display: inline-block;
		font-size: 0.5em;
		line-height: 1em;
	}
	.passionWrap header .headerText {padding-left: 1.87em;}
	.passionWrap header .headerText p span {
		font-size: 1.55em;
		padding: 0.28em;
	}
	.passionWrap header .headerText p span:not(:last-of-type) {margin-bottom: 0.3em;}

	.passionWrap .frontier article {
		display: flex;
		justify-content: space-between;
	}
	/* /*.passionWrap .frontier article:not(:last-of-type) {margin-bottom: 10.4%;} */

	.passionWrap .frontier .infoBox {
		width: 45.8%;
		max-width: 440px;
	}
	.passion01 .frontier .infoBox h3 {font-size: 1.37em;}
	/* .passionWrap .frontier .infoBox table {
		width: 100%;
		margin-top: 1.1em;
	}
	.passionWrap .frontier .infoBox table th,
	.passionWrap .frontier .infoBox table td {
		padding-top: 0.5em;
		padding-bottom: 0.5em;
	} */

	.passionWrap .frontier .infoBox table th {
		width: 34%;
		max-width: 150px;
		font-weight: bold;
		vertical-align: top;
	}

	.passionWrap .frontier .infoBox table td {
		width: 66%;
		max-width: 290px;
		padding-left: 10%;
	}
	.passionWrap .frontier .infoBox table tr:not(:last-of-type) td {border-bottom: 1px solid #DFDFDF;}
	.passionWrap .frontier .imageBox {
		width: 46.8%;
		max-width: 450px;
	}
	.passionWrap .frontier .imageBox img:not(:last-of-type) { margin-bottom: 1.1em;}
	.passionWrap .frontier .movieBox {
		/*padding-top: 55.5%;*/ /* 動画ポップアップ変更のためコメントアウト */
		margin-bottom: 1.25em;
	}

	/* passion02 */
	.passion02.passionWrap header h2 span {
		display: block;
		padding-top: 0.5em;
	}
	.passion02 .teaGarden .movieBox {
		/*padding-top: 55.5%;*/ /* 動画ポップアップ変更のためコメントアウト */
		max-width: 350px;
	}
	.passion02 .teaGarden .movieBox.aleft {margin: 0 auto 1.25em 0;}
	.passion02 .teaGarden .movieBox.aright {margin: 0 0 1.25em auto;}

	/* passion03 passion04*/
	.horizonBox .inner {
		display: flex;
		justify-content: space-between;
	}

	/* passion06 */
	.passion06 article .inner {padding: 5% 0 5.8%;}
	.passion06 .leadSection {text-align: center;}
	.passion06 .leadImage {position: relative;}

	/* footer
	---------------------------------------- */
	#footer {
		background: url("../../../images/passion/footerBg.jpg") #fff repeat-x left bottom / contain;
		box-sizing: border-box;
	}
	#footer .langList {
		height: 2em;
		line-height: 2em;
	}
	#footer .langList .inner {
		display: flex;
		line-height: 2em;
		padding: 0 1.25em;
	}
	#footer .langList p {
		font-size: 1.11em;
		margin-right: 2em;
	}
	#footer .langList .inner ul {
		font-size: 0.77em;
	}
	#footer .langList ul li:not(:last-child) {margin-right: 2em}
	#footer .langList ul li:not(:last-child):after {right: -1em;}
	#footer .footerInner {
		max-width: 960px;
		/* height: 260px; */
		padding: 2.22em 20px 1.11em;
		margin: 0 auto;
	}
	#footer .footerNav {
		display: flex;
		align-items: center;
		margin-bottom: 2em;
	}
	#footer .footerSign {
		min-width: 175px;
		height: 60px;
		font-size: 1.22em;
		color: #fff;
		margin: 0 2.27em 0 0;
	}
	#footer .exLinkList {
		display: flex;
		font-size: 0.88em;
	}
	#footer .exLinkList li {margin-right: 1em;}
	#footer .contactLink {
		width: 20%;
		min-width: 190px;
		margin-left: auto;
	}
	#footer .contactLink a {
		font-size: 1.12em;
		display: block;
		line-height: 2.15em;
		border-radius: 1.7em;
	}
	#footer .footerCredit {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
	}
	#footer .privacyLink {
		text-align: center;
		font-size: 0.66em;
	}
	#footer small {font-size: 0.66em;}
}

/* レイアウト崩れ防止 */
@media screen and (min-width: 770px) and (max-width: 910px) {

	#mainMenu {
		width: 50%;
		min-width: 300px;
	}
	#mainMenu .langList {
		flex-wrap: wrap;
		margin-right: 5px;
	}
	#mainMenu .langList p {width: 100%;}
	#mainMenu .langList ul {width: 100%;}
	div#mainMenu .langList p {
		min-width: unset;
		width: 49%;
		text-align: right;
	}
}