@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;
}
.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-size: 2.8vw;
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/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/about/images/moco_green.png") repeat-x left bottom/auto 100%;
position: absolute;
bottom: -0.4vw;
left: 0;
}
h1{
width: 74.45vw;
margin: 0 auto;
padding: 6.6vw 0 5.2vw;
}

/*====================
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/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: 75.7vw;
/*padding: 4vw 11.5vw;*/
}
.gnav{
padding: 4vw 11vw;
}
.nav_menu li:first-child{
/*width: 100%;*/
margin-bottom: 4.3vw;
margin-left: 16.7vw;
}
.nav_menu li:first-child img{
width: 36.8vw;
padding: 2.3vw;
background: #ffffff;
/*background-color:rgba(255,255,255,0.8);*/
border-radius: 1.2vw;
}
.nav_menu li img{
width: 30.6vw;
padding: 2.3vw;
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/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.5vw 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: 2vw;
}
.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/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/about/images/equal.png) no-repeat top center / 100% auto;
position: absolute;
top: 4.7vw;
left: -5.1vw;
}
.what_slider{
margin: 1.4vw 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: 5vw 0 5.6vw;
overflow: hidden;
}
#process:after{
content: "";
display: block;
width: 100%;
height: 3.1vw;
background: url("/products/brand/agroforestry/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 12.8vw;
}
.intro{
padding: 9.4vw 0 1.4vw;
margin: 0 auto;
}
.process_wrap{
height: 316vw;
}
.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.2vw;
padding: 0.2vw 2vw;
}
.deco_l{
width: calc(100%*216/767);
left: calc(100%*-10/767);
top: 20.2vw;
}
.deco_r{
width: calc(100%*136/767);
right: calc(100%*16/767);
top: 16.5vw;
}
.txt01{
left: 20.8vw;
top: 60vw;
}
.txt02{
left: 3vw;
top: 106vw;
}
.txt03{
left: 33.6vw;
top: 131.5vw;
}
.txt04{
left: 37.2vw;
top: 175.7vw;
}
.txt05{
left: 4vw;
top: 206.3vw;
}
.txt06{
left: 38vw;
top: 240vw;
}
.txt07{
left: 3vw;
top: 310vw;
}
.txt08{
left: 41.1vw;
top: 348.2vw;
}
.line01{
width: calc(100%*355/767);
left: 8.9vw;
top: 64.3vw;
}
.line02{
width: calc(100%*379/767);
left: 19.7vw;
top: 110.5vw
}
.line03{
width: calc(100%*388/767);
left: 18.8vw;
top: 141.7vw;
}
.line04{
width: calc(100%*408/767);
left: 26.5vw;
top: 165vw;
}
.line05{
width: calc(100%*260/767);
left: 23.5vw;
top: 192.8vw;
}
.line06{
width: calc(100%*580/767);
left: 4vw;
top: 222.9vw;
}
.line07{
width: calc(100%*301/767);
left: 23.6vw;
top: 250.4vw;
}
.line08{
width: calc(100%*319/767);
left: 49.6vw;
top: 269.9vw;
}
.line09{
width: calc(100%*200/767);
left: 48.4vw;
top: 285vw;
}
.line10{
width: calc(100%*516/767);
left: 10.6vw;
top: 296.4vw;
}
.line11{
width: calc(100%*480/767);
left: 17.6vw;
top: 329.5vw;
}
.start{
width: calc(100%*130/767);
left: 2vw;
top: 59.6vw;
}
.bird{
width: calc(100%*60/767);
left: 7vw;
top: 53vw;
}
.hana01{
width: calc(100%*113/767);
left: 2.7vw;
top: 146.1vw;
}
.hana02{
width: calc(100%*91/767);
right: 4.1vw;
top: 122.3vw;
}
.hana03{
width: calc(100%*72/767);
right: 12.5vw;
top: 190.4vw;
}
.pic_map{
width: calc(100%*383/767);
left: 46.8vw;
top: 77.1vw;
}
.pic_machinami{
width: calc(100%*224/767);
left: 22.8vw;
top: 88.2vw;
}
.pic_koya{
width: calc(100%*224/767);
left: 67.1vw;
top: 66.9vw;
}
.cacaotree{
width: calc(100%*56/767);
left: 84.5vw;
top: 55.1vw;
}
.pic_kouhai{
width: calc(100%*173/767);
left: 7.8vw;
top: 127.3vw;
}
.saibai{
width: calc(100%*130/767);
left: 32.6vw;
top: 124vw;
}
.pic_shokubutsu{
width: calc(100%*186/767);
left: 59.4vw;
top: 138.9vw;
}
.farmer{
width: calc(100%*162/767);
left: 73.8vw;
top: 151vw;
}
.acerola{
width: calc(100%*99/767);
left: 33.3vw;
top: 154.5vw;
}
.oneyear{
/*width: calc(100%*122/767);*/
left: 36.8vw;
top: 168.6vw;
}
.pic_shadetree{
width: calc(100%*354/767);
left: 6.1vw;
top: 178vw;
}
.pic_cacao01{
width: calc(100%*147/767);
left: 2.3vw;
top: 165.4vw;
}
.pic_mori01{
width: calc(100%*152/767);
left: 52.5vw;
top: 192.3vw;
}
.pic_cacao02{
width: calc(100%*203/767);
left: 68.6vw;
top: 202.7vw;
}
.pic_mori02{
width: calc(100%*131/767);
left: 65.6vw;
top: 217.8vw;
}
.fiveyear{
/*width: calc(100%*150/767);*/
left: 3.4vw;
top: 199.4vw;
}
.cacao01{
width: calc(100%*109/767);
left: 7.4vw;
top: 228.3vw;
}
.basket{
width: calc(100%*77/767);
left: 22.8vw;
top: 229.4vw;
}
.twentyyear{
/*width: calc(100%*122/767);*/
left: 36.6vw;
top: 234vw;
}
.syukaku{
width: calc(100%*130/767);
left: 2.8vw;
top: 240.3vw;
}
.pic_syukaku{
width: calc(100%*225/767);
left: 7.4vw;
top: 244.3vw;
}
.pic_cacao03{
width: calc(100%*271/767);
left: 3.1vw;
top: 259.7vw;
}
.hakkou{
width: calc(100%*130/767);
left: 57.2vw;
top: 252vw;
}
.pic_hakkou{
width: calc(100%*175/767);
left: 68.8vw;
top: 254.2vw;
}
.pic_kansou{
width: calc(100%*144/767);
left: 39.5vw;
top: 271.8vw;
}
.kansou{
width: calc(100%*130/767);
left: 31.8vw;
top: 285.4vw;
}
.hat{
width: calc(100%*65/767);
left: 30.1vw;
top: 282.6vw;
}
.pic_souko{
width: calc(100%*203/767);
left: 58.1vw;
top: 300.4vw;
}
.souko{
width: calc(100%*200/767);
left: 67vw;
top: 296.1vw;
}
.monkey{
width: calc(100%*58/767);
left: 87vw;
top: 289.7vw;
}
.cacao02{
width: calc(100%*88/767);
left: 43.7vw;
top: 308.6vw;
}
.kensakakou{
width: calc(100%*130/767);
left: 2.8vw;
top: 302vw;
}
.pic_koujyou{
width: calc(100%*226/767);
left: 2.6vw;
top: 325.5vw;
}
.kansei{
width: calc(100%*130/767);
left: 41.1vw;
top: 340vw;
}
.cacao03{
width: calc(100%* 49 / 767);
left: 30.9vw;
top: 357.1vw;
}
.pkg_naname{
width: calc(100%* 164 / 767);
left: 73.8vw;
top: 335.3vw;
}

/*====================
アグロフォレストリーミルクチョコレートの役割
====================*/
#role{
background: #66b07f;
position: relative;
padding: 6.4vw 0 29.2vw;
}
.box_wrap{
background: #fefbf5;
border-radius: 1.2vw;
padding: 7.5vw 3vw 3.4vw;
}
.btn_sustainability a{
width: 48vw;
background: #e94609;
border-radius: 1.2vw;
box-shadow: 0 0.8vw 0 #5d4e3c;
display: block;
text-align: center;
margin: 5vw auto 3vw;
padding: 1.5vw 1vw 1vw;
}
.btn_sustainability p{
font-size: 3.6vw !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: 16px;
}

/*====================
ローディング画面
====================*/
#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% - 600px);
}
.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% - 650px);
}
.mv_r_palmtree{
position: absolute;
bottom: -7px;
right: calc(50% - 656px);
}
.mv_r_monkey{
position: absolute;
top: 436px;
right: calc(50% - 551px);
}
.mv_r_cacaotree{
position: absolute;
bottom: 1px;
right: calc(50% - 720px);
}
h1{
width: 571px;
padding: 50px 0 40px;
}

/*====================
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: 770px;
/*padding: 17px 0;*/
margin: 0 auto;
}
.nav_menu li:first-child{
margin: 0;
}
.nav_menu li:first-child img,
.nav_menu li img{
width: 184px;
padding: 14px;
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: 40px 0 30px;
}
.word_list{
flex-wrap: nowrap;
margin-bottom: 2vw;
}
.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: 40px 0 122px;
}
#process:after{
height: 22px;
bottom: -1px;
}
#process .inner{
width: 936px;
}
#process h3{
padding: 0;
}
.mds_movie{
width: 226px;
margin: 0 auto;
}
.intro{
padding: 40px 0 0;
margin: 0 auto;
}
.process_wrap{
height: 1788px;
position: relative;
}
.process_wrap p{
font-size: 14px !important;
}
.dashed_box{
background: #ffffff;
border: dashed 1px;
border-radius: 10px;
padding: 5px 24px;
}
.deco_l{
width: 216px;
left: -15px;
top: -226px;
}
.deco_r{
width: 136px;
right: 51px;
top: -217px;
}
.txt01{
left: 169px;
top: 47px;
}
.txt02{
left: 37px;
top: 208px;
}
.txt03{
left: 302px;
top: 392px;
}
.txt04{
left: 502px;
top: 606px;
}
.txt05{
left: 48px;
top: 743px;
}
.txt06{
left: 321px;
top: 880px;
}
.txt07{
left: 36px;
top: 1434px;
}
.txt08{
left: 452px;
top: 1700px;
}
.line01{
width: 355px;
left: 75px;
top: 45px;
}
.line02{
width: 379px;
left: 209px;
top: 277px;
}
.line03{
width: 388px;
left: 240px;
top: 422px;
}
.line04{
width: 408px;
left: 294px;
top: 523px;
}
.line05{
width: 260px;
left: 337px;
top: 711px;
}
.line06{
width: 580px;
left: 46px;
top: 901px;
}
.line07{
width: 301px;
left: 317px;
top: 1066px;
}
.line08{
width: 319px;
left: 482px;
top: 1185px;
}
.line09{
width: 200px;
left: 479px;
top: 1306px;
}
.line10{
width: 516px;
left: 79px;
top: 1340px;
}
.line11{
width: 480px;
left: 260px;
top: 1564px;
}
.start{
width: 130px;
left: 18px;
top: 8px;
}
.bird{
width: 60px;
left: 58px;
top: -43px;
}
.pic_map{
width: 383px;
left: 555px;
top: 89px;
}
.pic_machinami{
width: 224px;
left: 378px;
top: 176px;
}
.pic_koya{
width: 224px;
left: 694px;
top: 19px;
}
.cacaotree{
width: 56px;
left: 831px;
top: -75px;
}
.pic_kouhai{
width: 173px;
left: 113px;
top: 329px;
}
.saibai{
width: 130px;
left: 294px;
top: 336px;
}
.pic_shokubutsu{
width: 186px;
left: 617px;
top: 411px;
}
.farmer{
width: 162px;
left: 773px;
top: 490px;
}
.acerola{
width: 99px;
left: 482px;
top: 445px;
}
.oneyear{
/*width: 122px;*/
left: 500px;
top: 555px;
}
.pic_shadetree{
width: 354px;
left: 184px;
top: 592px;
}
.pic_cacao01{
width: 147px;
left: 73px;
top: 555px;
}
.hana01{
width: 113px;
left: 5px;
top: 444px;
}
.hana02{
width: 91px;
right: 25px;
top: 922px;
}
.hana03{
width: 72px;
right: 54px;
top: 721px;
}
.pic_mori01{
width: 152px;
left: 507px;
top: 688px;
}
.pic_cacao02{
width: 203px;
left: 643px;
top: 767px;
}
.pic_mori02{
width: 131px;
left: 602px;
top: 865px;
}
.fiveyear{
/*width: 150px;*/
left: 46px;
top: 690px;
}
.cacao01{
width: 109px;
left: -7px;
top: 853px;
}
.basket{
width: 77px;
left: 114px;
top: 842px;
}
.twentyyear{
/*width: 122px;*/
left: 320px;
top: 827px;
}
.syukaku{
width: 130px;
left: 84px;
top: 963px;
}
.pic_syukaku{
width: 225px;
left: 120px;
top: 993px;
}
.pic_cacao03{
width: 271px;
left: 87px;
top: 1114px;
}
.hakkou{
width: 130px;
left: 585px;
top: 1074px;
}
.pic_hakkou{
width: 175px;
left: 676px;
top: 1089px;
}
.pic_kansou{
width: 144px;
left: 386px;
top: 1197px;
}
.kansou{
width: 130px;
left: 317px;
top: 1297px;
}
.hat{
width: 65px;
left: 303px;
top: 1280px;
}
.pic_souko{
width: 203px;
left: 592px;
top: 1398px;
}
.souko{
width: 200px;
left: 717px;
top: 1370px;
}
.monkey{
width: 58px;
left: 873px;
top: 1319px;
}
.cacao02{
width: 88px;
left: 810px;
top: 1513px;
}
.kensakakou{
width: 130px;
left: 17px;
top: 1377px;
}
.pic_koujyou{
width: 226px;
left: 67px;
top: 1536px;
}
.kansei{
width: 130px;
left: 453px;
top: 1641px;
}
.cacao03{
width: 49px;
left: 661px;
top: 1778px;
}
.pkg_naname{
width: 164px;
left: 712px;
top: 1598px;
}

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