/*index専用*/
@media screen and (max-width:868px) {
	
body {position:relative;}
.index {
	background-color:#000;
}
	
/*言語切替*/
.flag-icon {
    position: absolute;
    left: 7px;
    top: 64%;
    transform: translateY(-64%);
    width: 18px;
    height: auto;
    pointer-events: none;
}
.selectbox {
	display: block !important;
    position: fixed;
	z-index: 1000;
	top: 18px;
	right: 19%;
}
.selectbox::before,
.selectbox::after {
    position: absolute;
    right: 10px;
    width: 9px;
    height: 6px;
    background-color: #535353;
    content: '';
    pointer-events: none;
}
.selectbox::before {
    top: calc(50% - 6px);
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.selectbox::after {
    bottom: calc(50% - 8px);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}
.selectbox select {
    appearance: none;
    width: 95px;
    height: 1.7em;
    padding: .1em calc(.4em + 20px) .1em calc(.4em + 20px);
    border: 1px solid #d0d0d0;
    border-radius: 25px;
    background-color: #eee;
    color: #333333;
    font-size: 13px;
    cursor: pointer;
}

.main_content_area_map {
	position: relative;
	width:100%;
	padding-top:0;
	overflow: hidden;
}
.main_content_area_map .map_box {
}
.main_content_area_map .map_box img{
}

.wrapper{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position:relative;
}
.wrapper .blackbg {
	width: 100%;
	height: 100vh;
	background-color: rgba(0 0 0 / 30%);
	position:absolute;
	top:0;
	left:0;
}
.wrapper .wrapper__video{
	object-fit: cover;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*tr organic検索BOX*/
.organic-materials_box {
	position: absolute;
    bottom: 3%;
 	left: 50%;
	transform: translateX(-50%);
	background-color:rgba(0 0 0 / 50%);
	padding:20px;
	border-radius:20px;
	width: 85%;
	box-sizing: border-box;
}
.organic-materials_box a {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width: 150px!important;
}
.organic-materials_box img{
	width: 150px!important;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
}
.organic-materials_box input {
	display: block;
	line-height:1.8em;
	width: 95%;
	padding: 2px 5px;
	margin: 0 auto 5px;
} 
.organic-materials_box button {
	display:block;
	width:95%;
	margin: 10px auto 0;
	padding: 5px 0;
	border-radius: 1.8rem;
	background-color: rgb(226, 222, 220);
	color: #50331f;
	font-weight:bold;
	line-height:1.5em;
	font-size:13.5px;
	letter-spacing: -0.02em;
	border: 0;
	cursor: pointer;
	box-sizing: border-box;
}
.organic-materials_box button span {
	font-size: 10px;
}
	
/*お知らせ*/		
.news_box {
	position: absolute;
	top: 12%;
 	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	box-sizing: border-box;
	font-size: 13.5px;
	color: #fffce5;
}
.news_box ul li {
	position: relative;
	text-shadow:
	  1px 1px 0px rgba(0, 0, 0, 1),
	  2px 2px 0px rgba(0, 0, 0, 1),
	  3px 3px 1px rgba(0, 0, 0, 0.9),
	  4px 4px 2px rgba(0, 0, 0, 0.8),
	  5px 5px 3px rgba(0, 0, 0, 0.7);
}
.news_box ul li:before {
    content: "";
    position: absolute;
	top: 6px;
	left: -15px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fffce5;
}
.news_box ul li .p-index__news--date {
    font-weight: 600;
	
}
.news_box ul li .p-index__news--content{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.news_box ul li .p-index__news--content a{
    font-weight: 600;
	color: #fffce5;
	text-decoration: none !important;
}

/*.news_box dl {
	position: relative;
	text-shadow:
	  1px 1px 0px rgba(0, 0, 0, 1),
	  2px 2px 0px rgba(0, 0, 0, 1),
	  3px 3px 1px rgba(0, 0, 0, 0.9),
	  4px 4px 2px rgba(0, 0, 0, 0.8),
	  5px 5px 3px rgba(0, 0, 0, 0.7);
}
.news_box dl:before {
    content: "";
    position: absolute;
	top: 6px;
	left: -15px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fffce5;
}
.news_box dl dt {
    font-weight: 600;
}
.news_box dl dd{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.news_box dl dd a{
    font-weight: 600;
	color: #fffce5;
	text-decoration: none !important;
}*/

/*世界地図・ポインター設定*/
.map_box  {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
	width: 100%;
	margin-top: 0;
}
.map_box .mapBG {
	width:500px;
	overflow: scroll;
	margin: 0 auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	cursor: url('../img/map_cursor.png') 35 35, ew-resize;
	/*cursor: ew-resize;*/
	position: relative;

}
.map_box .mapBG::-webkit-scrollbar{
  display: none;
}

.map_box .mapBG .img_world_map img{
	width: 190%;
}

.map_box .mapBG .point {
	position: absolute;
	width: 34px;
	height: 34px;
	background-image: url('../img/icon_point.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block;
	cursor: pointer;
	animation: pulse 1.5s infinite ease-in-out;
	transition: all 0.3s ease;
}

/* アニメーションの設定 */
@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.8;
  }
}

.map_box .mapBG .point:hover {
    transform: scale(1.05); /* ホバー時に拡大 */
    filter: 
        drop-shadow(0 0 10px rgba(215, 104, 30, 1)) /* オレンジ色の強い影 */
        brightness(1.4) /* 明るさを強調 */
        contrast(1.2) /* コントラストを強調 */
        saturate(1.5); /* 色の鮮やかさを強調 */
}

.p_Mexico {
  left: 152px;
  bottom: 266px;
  transition: all 0.3s ease;
}
.p_Germany {
  left: 502px;
  bottom: 356px;
  transition: all 0.3s ease;
}
.p_Morocco {
  left: 422px;
  bottom: 326px;
  transition: all 0.3s ease;
}
.p_Israel {
  left: 532px;
  bottom: 316px;
  transition: all 0.3s ease;
}
.p_Japan {
  left: 832px;
  bottom: 326px;
  transition: all 0.3s ease;
}
.p_Chile {
  left: 232px;
  bottom: 116px;
  transition: all 0.3s ease;
}
.p_Namibia {
  left: 482px;
  bottom: 156px;
  transition: all 0.3s ease;
}
.p_India {
  left: 658px;
  bottom: 276px;
  transition: all 0.3s ease;
}
.p_Malaysia {
  left: 732px;
  bottom: 206px;
  transition: all 0.3s ease;
}
.p_China {
  left: 752px;
  bottom: 306px;
  transition: all 0.3s ease;
}

.map_box .mapBG img {
	width:100%;
}


/******************************************/

/*モーダルを開くボタン*/
.modal-open{
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 50px;
  font-weight: bold;
  color: #fff;
  margin: auto;
  cursor: pointer;
  transform: translate(-50%,-50%);
}
/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	z-index: 9999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transform: scale(1.1);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
	transform: scale(1);
}
.modal-container.fade-out {
	opacity: 0;
	transform: scale(1.1);
	visibility: visible; /* アニメーション中はvisibleに */
	pointer-events: none;
}
/* モーダル枠の指定 */
.modal-body {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 560px;
	width: 95%;
	height: 75%;
	border: 2px solid #837a64;
	border-radius: 1rem;
	overflow: hidden; /* はみ出さないようにする */
	box-sizing: border-box;
	box-shadow: 0px 0px 7px 7px rgba(54, 54, 54, 0.7);
}
/* スクロール用ラッパー */
.modal-content-wrapper {
	height: 100%;
	background: rgba(252,247,236,0.8);
	width: calc(100% - 5px);
	overflow-y: auto;
	padding: 8px 8px 8px 0;
	box-sizing: content-box;
}
/* モーダルを閉じるボタンの指定 */
.modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 40px;
	height: 40px;
	font-size: 30px;
	color: #111;
	z-index: 10;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* モーダル内のコンテンツの指定 */
.modal-content {
	text-align: left;
	padding: 30px;
	height: 100%;
	overflow-y: auto; /* 縦スクロール可能に */
	box-sizing: border-box;
	position: relative;
	cursor: default !important;
}
.modal-content::-webkit-scrollbar {
	width: 6px;
}
.modal-content::-webkit-scrollbar-track {
	background: #e2ddd1;
}
.modal-content::-webkit-scrollbar-thumb {
	background: #a7a193; /* スクロールつまみ部分 */
	border-radius: 5px;
}
.modal-content a{
	color: #824821;
	font-weight: bold;
	font-size: 120%;
	text-decoration: none;
}
.modal-content a:hover{
  color: #b07e5c;
}

/* ページトップジャンプ */
#page-top{
	display: none !important;
}

	
	
	
	

}