@charset "utf-8";
/* CSS Document */
/*====================
reset
====================*/
figure{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol{
margin: 0;
padding: 0;
}
div:after, dl:after, ul:after{
content: none;
}
*:focus{
outline: none;
}
img{
box-shadow:#000 0 0 0;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

/*====================
basic
====================*/
body{
position: relative;
}
.l-container{
-webkit-text-size-adjust: 100%;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
}
.l-container a:hover img,
.movie_wrap a:hover{
opacity: 0.7;
}
.lang a:hover img{
opacity: 1 !important;
}
.moveit{
visibility: hidden;
}
/*
.hidden{
display: none;
}
*/

/*====================
コンテンツ
====================*/
.isPC {
display: none;
}
#content_wrap{
position: relative;
overflow: hidden;
}
#content_wrap p{
/*
font-family: 游ゴシック体, YuGothic, 游ゴシック Medium, Yu Gothic Medium, 游ゴシック, Yu Gothic, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, sans-serif;
font-weight: 600;
*/
font-family: Verdana, Geneva, Arial, Helvetica, "Open Sans",sans-serif;
font-weight: 500;
font-size: 2.8vw;
letter-spacing: .04em;
color: #00462c;
line-height: 2;
}
@media (-ms-high-contrast:none) {
::-ms-backdrop, #content_wrap p {
font-family:-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}
}
#content_wrap > section{
text-align: center;
}

/* ▽ SP ▽======================================================================================================================================================== */
/*====================
base
====================*/
.inner{
padding: 0 3.8vw;
}

/*====================
ローディング画面
====================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #66b07f;
}
#loading img{
width: 52.152vw;
position: absolute;
top: calc(50% - 24vw);
left: calc(50% - 26.076vw);
-webkit-animation:blink 2s ease-in-out infinite alternate;
-moz-animation:blink 2s ease-in-out infinite alternate;
animation:blink 2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}
@-moz-keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}
@keyframes blink{
0% {opacity:0;}
90% {opacity:1;}
100% {opacity:1;}
}

/*====================
メインビジュアル
====================*/
#mainvisual{
background: url("/products/brand/agroforestry/en/about/images/mv_sp.png"), #dce7d2;
background-position: top center, top center;
background-repeat: no-repeat, repeat;
background-size: cover, auto;
position: relative;
}
#mainvisual:after{
content: "";
display: block;
width: 100%;
height: 3.1vw;
background: url("/products/brand/agroforestry/en/about/images/moco_green.png") repeat-x left bottom/auto 100%;
position: absolute;
bottom: -0.4vw;
left: 0;
}
h1{
width: 78.488vw;
margin: 0 auto;
padding: 10.6vw 0 3.9vw;
}
.lang{
width: 26.6vw;
position: absolute;
top: 2.4vw;
right: 2.2vw;
}
.lang ul{
display: flex;
}

/*====================
MOVIE
====================*/
.movie_wrap{
padding: 0 17vw;
margin-bottom: 1.2vw;
}
#modal_movie{
position: relative;
background: #fff;
width: auto;
max-width: 800px;
margin: 0 auto;
}
/* ▽ モーダル ▽ */
.mfp-close {
width: 5.8vw !important;
height: 5.8vw !important;
font-size: 0 !important;
position: absolute;
top: -8vw !important;
right: 2vw !important;
background: url("/products/brand/agroforestry/en/images/btn_close.png") no-repeat center / contain !important;
}
button.mfp-arrow{
display: none;
}
.mfp-iframe-scaler iframe {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.mfp-figure:after {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/*====================
位置固定ナビ
====================*/
.site-header{
position: absolute;
z-index: 99;
}
.site-header.fixed{
position: fixed;
top: 0;
background: #dce7d2;
opacity: 0.95;
transition: 0.2s;
width: 100%;
}
.nav_menu{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 84.4vw;
/*padding: 4vw 11.5vw;*/
}
.gnav{
padding: 4vw 7.8vw;
}
.nav_menu li:first-child{
width: 100%;
/*margin-bottom: 4.3vw;*/
margin: 0 auto 4.2vw;
}
.nav_menu li:first-child img{
width: 37.2vw;
padding: 2.6vw 3.6vw 1.9vw 3.3vw;
background: #ffffff;
/*background-color:rgba(255,255,255,0.8);*/
border-radius: 1.2vw;
}
.nav_menu li img{
width: 34.8vw;
padding: 2.3vw 2.5vw;
background: #ffffff;
/*background-color:rgba(255,255,255,0.8);*/
border-radius: 1.2vw;
}
.hero{
overflow: hidden;
padding: 0 0 41vw;
}

/*====================
アグロフォレストリーとは
====================*/
#what{
background: #66b07f;
position: relative;
padding: 6.4vw 0 11.6vw;
}
#what:after{
content: "";
display: block;
width: 100%;
height: 3.1vw;
background: url("/products/brand/agroforestry/en/about/images/moco_beige.png") repeat-x left bottom/auto 100%;
position: absolute;
bottom: -0.4vw;
left: 0;
}
.box_wrap{
background: #fefbf5;
border-radius: 1.2vw;
padding: 7.8vw 3vw 3.4vw;
}
h3{
padding: 0 9.8vw;
}
.box_wrap p{
padding: 5.5vw 2vw 3.4vw;
}
.word_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 1.3vw;
}
.word_list li{
position: relative;
}
.word_list li:last-child{
margin: 2.2vw 0 0 25.4vw;
}
.word_list li img{
width: 38.4vw;
}
.word_list li:nth-child(2):before {
content: "";
display: block;
width: 3.4vw;
height: 3.2vw;
background: url(/products/brand/agroforestry/en/about/images/plus.png) no-repeat top center / 100% auto;
position: absolute;
top: 4.2vw;
left: -5.7vw;
}
.word_list li:last-child:before {
content: "";
display: block;
width: 3.4vw;
height: 2.5vw;
background: url(/products/brand/agroforestry/en/about/images/equal.png) no-repeat top center / 100% auto;
position: absolute;
top: 4.7vw;
left: -5.1vw;
}
.what_slider{
margin: 3.7vw 0 4vw;
}
.what_slider img{
width: 71.3vw;
margin: 0 auto;
}
.slick-dots {
position: absolute;
bottom: -4vw;
left: calc(50% - 28vw);
display: flex !important;
width: 56vw;
justify-content: space-between;
}
.slick-dots li{
background: #e3ddbc	;
text-indent: -9999px;
width: 12.5vw;
height: 0.6vw;
cursor: pointer;
}
.slick-dots li.slick-active{
background: #e94609	;
}

/*====================
アグロフォレストリーミルクチョコレートができるまで
====================*/
#process{
background: #ede5d7;
position: relative;
padding: 5.6vw 0;
overflow: hidden;
}
#process:after{
content: "";
display: block;
width: 100%;
height: 3.1vw;
background: url("/products/brand/agroforestry/en/about/images/moco_green.png") repeat-x left bottom/auto 100%;
position: absolute;
bottom: -0.4vw;
left: 0;
}
#process .inner{
padding: 0;
}
#process h3{
padding: 0 17vw;
}
.intro{
padding: 10vw 0 0;
margin: 0 auto;
}
.process_wrap{
height: 339.6vw;
position: relative;
}
.process_wrap > *{
position: absolute;
}
.process_wrap p{
font-size: 2.4vw !important;
text-align: left;
}
.dashed_box{
background: #ffffff;
border: dashed 0.2vw;
border-radius: 1.6vw;
padding: 0.2vw 2vw;
}
.deco_l{
width: calc(100%*216/767);
left: -1.5vw;
top: -32vw;
}
.deco_r{
width: calc(100%*136/767);
right: 2.1vw;
top: -35.9vw;
}
.txt01{
left: 22.8vw;
top: 8.4vw;
}
.txt02{
left: 4vw;
top: 54.8vw;
}
.txt03{
left: 33.8vw;
top: 81.8vw;
}
.txt04{
left: 31.4vw;
top: 125.7vw;
}
.txt05{
left: 5.5vw;
top: 163.5vw;
}
.txt06{
left: 42.4vw;
top: 202.1vw;
}
.txt07{
left: 4.8vw;
top: 283.8vw;
}
.txt08{
left: 23.8vw;
top: 323.7vw;
}
.line01{
width: calc(100%*355/767);
left: 9.1vw;
top: 13vw;
}
.line02{
width: calc(100%*379/767);
left: 20.1vw;
top: 60.3vw;
}
.line03{
width: calc(100%*388/767);
left: 19.3vw;
top: 92.1vw;
}
.line04{
width: calc(100% * 455 / 767);
left: 20.8vw;
top: 114.9vw;
}
.line05{
width: calc(100%*260/767);
left: 22vw;
top: 147vw;
}
.line06{
width: calc(100% * 574 / 767);
left: 4vw;
top: 181.7vw;
}
.line07{
width: calc(100% * 282 / 767);
left: 22.5vw;
top: 215.2vw;
}
.line08{
width: calc(100%*319/767);
left: 50.7vw;
top: 236.7vw;
}
.line09{
width: calc(100%*200/767);
left: 49.4vw;
top: 252.1vw;
}
.line10{
width: calc(100%*516/767);
left: 10.7vw;
top: 266.1vw;
}
.line11{
width: calc(100%*480/767);
left: 18vw;
top: 304.1vw;
}
.start{
width: calc(100% * 134 / 767);
left: 2vw;
top: 8.3vw;
}
.bird{
width: calc(100%*60/767);
left: 7.2vw;
top: 1.5vw;
}
.hana01{
width: calc(100%*113/767);
left: 3vw;
top: 101.9vw;
}
.hana02{
width: calc(100%*91/767);
right: 4.6vw;
top: 63.8vw;
}
.hana03{
width: calc(100%*72/767);
right: 12.5vw;
top: 190.4vw;
}
.pic_map{
width: calc(100%*383/767);
left: 47.9vw;
top: 26.2vw;

}
.pic_machinami{
width: calc(100%*224/767);
left: 23.3vw;
top: 37.5vw;
}
.pic_koya{
width: calc(100%*224/767);
left: 68.6vw;
top: 15.7vw;
}
.cacaotree{
width: calc(100%*56/767);
left: 86.5vw;
top: 3.5vw;
}
.pic_kouhai{
width: calc(100%*173/767);
left: 8vw;
top: 77.6vw;
}
.saibai{
width: calc(100% * 180 / 767);
left: 33.2vw;
top: 74.1vw;
}
.pic_shokubutsu{
width: calc(100%*186/767);
left: 60.9vw;
top: 89.4vw;
}
.farmer{
width: calc(100%*162/767);
left: 75.4vw;
top: 101.6vw;
}
.acerola{
width: calc(100%*99/767);
left: 30vw;
top: 103.6vw;
}
.oneyear{
/*width: calc(100%*122/767);*/
left: 30.4vw;
top: 118.1vw;
}
.pic_shadetree{
width: calc(100%*354/767);
left: 5.1vw;
top: 132.8vw;
}
.pic_cacao01{
width: calc(100% * 147 / 767);
left: 2.2vw;
top: 120.4vw;
}
.pic_mori01{
width: calc(100%*152/767);
left: 55.5vw;
top: 143.1vw;
}
.pic_cacao02{
width: calc(100%*203/767);
left: 70.3vw;
top: 154.9vw;
}
.pic_mori02{
width: calc(100%*131/767);
left: 66.6vw;
top: 171.1vw;
}
.fiveyear{
/*width: calc(100%*150/767);*/
left: 3.4vw;
top: 156.4vw;
}
.cacao01{
width: calc(100%*109/767);
left: 8.1vw;
top: 190.1vw;
}
.basket{
width: calc(100%*77/767);
left: 22.4vw;
top: 193.3vw;
}
.twentyyear{
/*width: calc(100%*122/767);*/
left: 39.9vw;
top: 195.1vw;
}
.syukaku{
width: calc(100% * 180 / 767);
left: 3.1vw;
top: 204.6vw;
}
.pic_syukaku{
width: calc(100% * 225 / 767);
left: 7.5vw;
top: 208.7vw;
}
.pic_cacao03{
width: calc(100% * 318 / 767);
left: 3.3vw;
top: 223.5vw;
}
.hakkou{
width: calc(100% * 224 / 767);
left: 52vw;
top: 219.4vw;
}
.pic_hakkou{
width: calc(100%*175/767);
left: 72.5vw;
top: 221.1vw;
}
.pic_kansou{
width: calc(100%*144/767);
left: 41.7vw;
top: 240vw;
}
.kansou{
width: calc(100% * 134 / 767);
left: 29.3vw;
top: 251.7vw;
}
.hat{
width: calc(100%*65/767);
left: 27.5vw;
top: 249.5vw;
}
.pic_souko{
width: calc(100%*203/767);
left: 59.6vw;
top: 269.2vw;
}
.souko{
width: calc(100% * 359 / 767);
left: 47vw;
top: 260.7vw;
}
.monkey{
width: calc(100%*58/767);
left: 88vw;
top: 257.6vw;
}
.cacao02{
width: calc(100%*88/767);
left: 45.6vw;
top: 279.4vw;
}
.kensakakou{
width: calc(100% * 331 / 767);
left: 3vw;
top: 273.2vw;
}
.pic_koujyou{
width: calc(100%*226/767);
left: 2.8vw;
top: 300vw;
}
.kansei{
width: calc(100% * 183 / 767);
left: 51.2vw;
top: 316vw;
}
.cacao03{
width: calc(100%* 49 / 767);
left: 13.9vw;
top: 331.9vw;
}
.pkg_naname{
width: calc(100%* 164 / 767);
left: 76.2vw;
top: 306.1vw;
}

/*====================
アグロフォレストリーミルクチョコレートの役割
====================*/
#role{
background: #66b07f;
position: relative;
padding: 6.4vw 0 29.2vw;
}
#role .box_wrap{
padding: 7.5vw 2.7vw 3.4vw;
}
.btn_sustainability a{
width: 71vw;
background: #e94609;
border-radius: 1.2vw;
box-shadow: 0 0.8vw 0 #7d3b23;
display: block;
text-align: center;
margin: 5.4vw auto 4.7vw;
padding: 1.5vw 1vw 1vw;
}
.btn_sustainability p{
font-size: 3.35vw !important;
color: #ffffff !important;
font-weight: 500 !important;
padding: 0;
}
.link_page{
margin-top: 10vw;
}
.pagetop{
position: fixed;
bottom: 10vw;
right: 6vw;
width: 10vw;
z-index: 15;
}
.pagetop a{
display: block;
}	

/* ▽ PC ▽======================================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{

.isSP {
display: none;
}
.isPC {
display: block;
}
body{
min-width: 950px;
}
.inner{
width: 874px;
margin: 0 auto;
padding: 0 0 !important;
}
body{
min-width: 950px;
}

/*====================
コンテンツ
====================*/
/*#content_wrap,*/
#content_wrap p{
font-size: 17.2px;
line-height: 2.1;
}

/*====================
ローディング画面
====================*/
#loading img{
width: 400px;
top: calc(50% - 200px);
left: calc(50% - 200px);
}

/*====================
メインビジュアル
====================*/
#mainvisual{
background: #dce7d2;
position: relative;
}
#mainvisual:after{
height: 22px;
bottom: -1px;
}
.mv_l_acaitree{
position: absolute;
bottom: 51px;
left: calc(50% - 717px);
}
.mv_l_palmtree{
position: absolute;
bottom: -9px;
left: calc(50% - 578px);
}
.mv_l_passionfruits2{
position: absolute;
top: -45px;
left: calc(50% - 714px);
}
.mv_l_pepper{
position: absolute;
top: -45px;
left: calc(50% - 602px);
}
.mv_l_pepper2{
position: absolute;
top: -45px;
left: calc(50% - 713px);
}
.mv_l_cacaotree{
position: absolute;
bottom: -81px;
left: calc(50% - 874px);
}
.mv_l_tocotoucan{
position: absolute;
bottom: 124px;
left: calc(50% - 666px);
}
.mv_r_passionfruits2{
position: absolute;
bottom: -12px;
right: calc(50% - 559px)
}
.mv_r_passionfruits{
position: absolute;
top: -15px;
right: calc(50% - 732px);
}
.mv_r_palmtree{
position: absolute;
bottom: -7px;
right: calc(50% - 656px);
}
.mv_r_monkey{
position: absolute;
top: 124px;
right: calc(50% - 551px);
}
.mv_r_cacaotree{
position: absolute;
bottom: 1px;
right: calc(50% - 720px);
}
h1{
width: 602px;
padding: 85px 0 61px;
}
.lang{
width: 170px;
top: 17px;
right: 20px;
}

/*====================
MOVIE
====================*/
.movie_wrap{
padding: 0;
margin-bottom: 16px;
}
/* ▽ モーダル ▽ */
.mfp-close {
width: 50px !important;
height: 50px !important;
top: -64px !important;
right: 10px !important;
}
button.mfp-arrow{
display: none;
}

/*====================
位置固定ナビ
====================*/
.site-header{
left: 0;
right: 0;
}
.site-header.fixed{
position: fixed;
top: 0;
}
.gnav{
padding: 17px 0;
}
.nav_menu{
width: 830px;
/*padding: 17px 0;*/
margin: 0 auto;
}
.nav_menu li:first-child,
.nav_menu li{
width: calc(100% / 3);
margin: 0;
}
.nav_menu li:first-child img{
width: 140px;
padding: 26px 50px;
border-radius: 10px;
margin: 0 auto;
}
.nav_menu li img{
width: 220px;
padding: 14px 10px;
border-radius: 10px;
}
.hero{
padding: 0 0 166px;
}

/*====================
アグロフォレストリーとは
====================*/
#what{
padding: 50px 0 90px;
}
#what:after{
height: 22px;
bottom: -1px;
}
.box_wrap{
border-radius: 10px;
padding: 60px 28px 30px;
}
h3{
padding: 0;
}
.box_wrap p{
padding: 37px 0 27px;
}
.word_list{
flex-wrap: nowrap;
margin-bottom: -10px;
}
.word_list li{
margin-right: 44px;
}
.word_list li:last-child{
margin: 0;
}
.word_list li,
.word_list li img{
width: 300px;
}
.word_list li:nth-child(2):before {
width: 24px;
height: 22px;
top: 27px;
left: -38px;
}
.word_list li:last-child:before {
width: 23px;
height: 16px;
top: 30px;
left: -39px;
}
.nouhou{
position: relative;
width: 818px;
height: 477px;
}
.what_list{
margin: 0 auto;
}
.what_list img{
width: 384px;
}
.nouhou .method_01{
position: absolute;
top: 0;
left: 10px;
}
.nouhou .method_02{
position: absolute;
top: 0;
right: 22px;
}
.nouhou .method_03{
position: absolute;
bottom: 0;
right: 10px;
}
.nouhou .method_04{
position: absolute;
bottom: 0;
left: 37px;
}
.method_01_arrow img,
.method_02_arrow img,
.method_03_arrow img{
width: auto;
}
.nouhou .method_01_arrow{
position: absolute;
top: 35px;
left: 350px;
}
.nouhou .method_02_arrow{
position: absolute;
top: 190px;
right: 183px;
}
.nouhou .method_03_arrow{
position: absolute;
top: 251px;
left: 350px;
}

/*====================
アグロフォレストリーミルクチョコレートができるまで
====================*/
#process{
padding: 42px 0 64px;
}
#process:after{
height: 22px;
bottom: -1px;
}
#process .inner{
width: 936px;
}
#process h3{
padding: 0;
}
.mds_movie{
width: 226px;
margin: 0 auto;
}
.intro{
padding: 30px 0 0;
margin: 0 auto;
}
.process_wrap{
height: 1978px;

}
.process_wrap p{
font-size: 14px !important;
}
.dashed_box{
background: #ffffff;
border: dashed 1px;
border-radius: 10px;
padding: 5px 18px;
}
.deco_l{
width: 216px;
left: -15px;
top: -195px;
}
.deco_r{
width: 136px;
right: 51px;
top: -186px;
}
.txt01{
left: 190px;
top: 70px;
}
.txt02{
left: 38px;
top: 250px;
}
.txt03{
left: 308px;
top: 424px;
}
.txt04{
left: 389px;
top: 666px;
}
.txt05{
left: 60px;
top: 857px;
}
.txt06{
left: 390px;
top: 1125px;
}
.txt07{
left: 32px;
top: 1607px;
}
.txt08{
left: 402px;
top: 1845px;
}
.line01{
width: 355px;
left: 75px;
top: 77px;
}
.line02{
width: 379px;
left: 208px;
top: 308px;
}
.line03{
width: 388px;
left: 240px;
top: 475px;
}
.line04{
width: 455px;
left: 235px;
top: 582px;
}
.line05{
width: 260px;
left: 324px;
top: 785px;
}
.line06{
width: 628px;
left: 38px;
top: 972px;
}
.line07{
width: 282px;
left: 241px;
top: 1172px;
}
.line08{
width: 319px;
left: 482px;
top: 1327px;
}
.line09{
width: 200px;
left: 479px;
top: 1448px;
}
.line10{
width: 519px;
left: 104px;
top: 1500px;
}
.line11{
width: 480px;
left: 260px;
top: 1727px;
}
.start{
width: 134px;
left: 18px;
top: 40px;
}
.bird{
width: 60px;
left: 58px;
top: -12px;
}
.pic_map{
width: 383px;
left: 555px;
top: 120px;
}
.pic_machinami{
width: 224px;
left: 378px;
top: 207px;
}
.pic_koya{
width: 224px;
left: 694px;
top: 50px;
}
.cacaotree{
width: 56px;
left: 831px;
top: -44px;
}
.pic_kouhai{
width: 173px;
left: 113px;
top: 360px;
}
.saibai{
width: 180px;
left: 294px;
top: 367px;
}
.pic_shokubutsu{
width: 186px;
left: 617px;
top: 474px;
}
.farmer{
width: 162px;
left: 773px;
top: 533px;
}
.acerola{
width: 99px;
left: 492px;
top: 506px;
}
.oneyear{
/*width: 122px;*/
left: 502px;
top: 617px;
}
.pic_shadetree{
width: 354px;
left: 184px;
top: 655px;
}
.pic_cacao01{
width: 147px;
left: 73px;
top: 618px;
}
.hana01{
width: 113px;
left: 5px;
top: 506px;
}
.hana02{
width: 91px;
right: 42px;
top: 949px;
}
.hana03{
width: 72px;
right: 24px;
top: 777px;
}
.pic_mori01{
width: 152px;
left: 523px;
top: 751px;
}
.pic_cacao02{
width: 203px;
left: 661px;
top: 801px;
}
.pic_mori02{
width: 131px;
left: 650px;
top: 917px;
}
.fiveyear{
/*width: 150px;*/
left: 47px;
top: 803px;
}
.cacao01{
width: 109px;
left: 73px;
top: 997px;
}
.basket{
width: 77px;
left: 203px;
top: 970px;
}
.twentyyear{
/*width: 122px;*/
left: 364px;
top: 1074px;
}
.syukaku{
width: 180px;
left: 85px;
top: 1099px;
}
.pic_syukaku{
width: 225px;
left: 120px;
top: 1136px;
}
.pic_cacao03{
width: 283px;
left: 87px;
top: 1257px;
}
.hakkou{
width: 224px;
left: 521px;
top: 1208px;
}
.pic_hakkou{
width: 175px;
left: 676px;
top: 1232px;
}
.pic_kansou{
width: 144px;
left: 386px;
top: 1340px;
}
.kansou{
width: 134px;
left: 317px;
top: 1440px;
}
.hat{
width: 65px;
left: 303px;
top: 1423px;
}
.pic_souko{
width: 203px;
left: 592px;
top: 1543px;
}
.souko{
width: 359px;
left: 539px;
top: 1476px;
}
.monkey{
width: 58px;
left: 854px;
top: 1452px;
}
.cacao02{
width: 88px;
left: 810px;
top: 1655px;
}
.kensakakou{
width: 331px;
left: 18px;
top: 1550px;
}
.pic_koujyou{
width: 226px;
left: 67px;
top: 1708px;
}
.kansei{
width: 183px;
left: 404px;
top: 1785px;
}
.cacao03{
width: 49px;
left: 661px;
top: 1921px;
}
.pkg_naname{
width: 164px;
left: 712px;
top: 1740px;
}

/*====================
アグロフォレストリーミルクチョコレートの役割
====================*/
#role{
padding: 50px 0 70px;
}
#role:after{
height: 22px;
bottom: -1px;
}
#role .box_wrap{
padding: 60px 28px 30px;
}
#role img{
margin: 0 auto;
}
.btn_sustainability a{
width: 410px;
border-radius: 10px;
box-shadow: 0 6px 0 #7d3b23;
margin: 38px auto 24px;
padding: 12px 0 8px;
}
.btn_sustainability p{
font-size: 18.5px !important;
padding: 0;
}
.btn_sustainability a:hover {
box-shadow: 0 1px 0 #7d3b23;
transform: translate3d(0, 5px, 0); /* 影が減った分、ボタンを下へ移動させる */
transition: 0.2s;
}
.link_page{
margin-top: 70px;
}
.pagetop{
bottom: 70px;
right: 50px;
width: 66px;
}
}

/*====================
言語切替ボタン位置調整
====================*/
@media screen and (min-width: 1280px), print{
.lang{
right: 154px;
}
}

@media screen and (min-width: 1500px), print{
.lang{
right: 200px;
}
}