@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{
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;
}
@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: #46b135;
}
#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{
position: relative;
}
.mv_main{
width: 100%;
height: 0;
padding-top: 63.88526727509778%;
background: url("/products/brand/agroforestry/images/mv_main_sp.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#mainvisual:after{
content: "";
display: block;
width: 100%;
height: 3.1vw;
background: url("/products/brand/agroforestry/images/moco_lightgreen.png") repeat-x left bottom/auto 100%;
position: absolute;
bottom: -0.4vw;
left: 0;
}

/*====================
PRODUCT
====================*/
#product{
background: #dce7d2;
position: relative;
padding: 10vw 0 12.5vw;
overflow: hidden;
}
/*------ ▽ ココから：バナー類の掲載ありの時 ▽ ------*/
#product:after{	
content: "";
display: block;
width: 100%;
height: 3.1vw;
background: url("/products/brand/agroforestry/images/moco_brown.png") repeat-x left bottom/auto 100%;
position: absolute;
bottom: -0.4vw;
left: 0;
}
/*------ △ ココまで △ ------*/
.intro_wrap{
position: relative;
padding-bottom: 40vw;
}
h3{
padding: 0 16vw;
}
.catchcopy{
padding: 8.9vw 11.8vw 4.2vw;
}
.intro{
padding: 0 8vw 2.5vw;
line-height: 2.8;
}
.prod_list{
padding: 0 16.5vw;
margin-bottom: 4vw;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.prod_list li{
width: 30.2vw;
margin-bottom: 4vw;
}
/* 店舗検索バナー */
.bnr_storesmap{
width: 71.8vw;
margin: 0 auto;
}
.deco_l{
position: absolute;
width: calc(100%*288/767);
left: -11.9vw;
bottom: -1vw;
}
.deco_rt{
position: absolute;
width: calc(100%*288/767);
right: -9.6vw;
top: -9.3vw;
}
.deco_txt{
position: absolute;
width: 28.9434vw;
right: 1.6vw;
bottom: 16.1vw;
}
.deco_r{
position: absolute;
width: calc(100%*108/767);
right: 6.3vw;
bottom: 4vw;
z-index: 10;
}

/*====================
MOVIE
====================*/
.movie_wrap{
padding: 0 7.4vw;
}
.movie_wrap p{
margin: 5.5vw 0 0.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);
}
.link_page{
padding: 0 3.8vw;
}
.pagetop{
position: fixed;
bottom: 12.5vw;
right: 6vw;
width: 11vw;
z-index: 15;
}
.pagetop a{
display: block;
}	
/* ▽ SNSボタン ▽ */
.sns {
display: flex;
justify-content: center;
margin-top: 9.4vw;
}
.sns li {
width: 11vw;
}
.sns li:not(:first-child) {
margin-left: 4vw;
}

/*====================
外部バナー
====================*/
/*------ ▽ ココから：バナー類の掲載ありの時 ▽ ------*/
#others{
background: #4f1e06;
padding: 5vw 10.8vw 6.6vw;
position: relative;
}
/*------ △ ココまで △ ------*/

/* ▽ PC ▽======================================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
.isSP {
display: none;
}
.isPC {
display: block;
}
body{
/*min-width: 950px;*/
width: 100%
}
.inner{
/*width: 874px;*/
max-width: 874px;
margin: 0 auto;
padding: 0 0 !important;
}

/*====================
コンテンツ
====================*/
#content_wrap,
#content_wrap p{
font-size: 16px;
}

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

/*====================
メインビジュアル
====================*/
#mainvisual{
position: relative;
}
.mv_main{
width: 100%;
height: 0;
padding-top: 55.55%;
background: url("/products/brand/agroforestry/images/mv_main_pc.jpg");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
#mainvisual:after{
height: 22px;
bottom: -1px;
}

/*====================
PRODUCT
====================*/
#product{
padding: 50px 0 90px;
overflow: hidden;
}
/*------ ▽ ココから：バナー類の掲載ありの時 ▽ ------*/
#product:after{
height: 22px;
bottom: -1px;
}
/*------ △ ココまで △ ------*/
.intro_wrap{
padding-bottom: 71px;
}
h3{
padding: 0;
width: 428px;
margin: 0 auto;
}
.catchcopy{
padding: 58px 0 42px;
width: 490px;
margin: 0 auto;
}
.naname{
padding: 0;
width: 273px;
margin: 0 auto;
}
.intro{
padding: 0 0 32px;
margin: 0 auto;
line-height: 3;
}
.prod_list{
padding: 0;
flex-wrap: nowrap;
justify-content: space-between;
width: 692px;
margin: 0 auto;
}
.prod_list li{
width: 152px;
margin-bottom: 46px;
}
/* 店舗検索バナー */
.bnr_storesmap{
width: 420px;
margin: 0 auto;
}
.deco_l{
position: absolute;
width: 288px;
left: -198px;
bottom: 492px;
}
.deco_rt{
position: absolute;
width: 301px;
right: -175px;
top: -59px;
}
.deco_txt{
position: absolute;
width: 222px;
right: -47px;
bottom: 109px;
}
.deco_r{
position: absolute;
width: 108px;
right: -11px;
bottom: 14px;
}

/*====================
MOVIE
====================*/
.mds_movie{
width: 226px;
margin: 0 auto;
}
.movie_wrap{
padding: 0;
}
.movie_wrap p{
margin: 36px 0 -8px;
}
/* ▽ モーダル ▽ */
.mfp-close {
width: 50px !important;
height: 50px !important;
top: -64px !important;
right: 10px !important;
}
button.mfp-arrow{
display: none;
}
.link_page{
padding: 0;
}
.pagetop{
bottom: 90px;
right: 50px;
width: 66px;
}

/*====================
SNSボタン
====================*/
.sns{
margin-top: 66px;
}
.sns li {
width: 66px;
}
.sns li:not(:first-child){
margin-left: 38px;
}

/*====================
外部バナー
====================*/
/*------ ▽ ココから：バナー類の掲載ありの時 ▽ ------*/
#others{
padding: 35px 0 50px;
}
#others img{
width: 600px;
margin: 0 auto;
}
/*------ △ ココまで △ ------*/
}

/* ▽ PC ▽======================================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 1024px), print{
.mv_main{
padding-top: 38.8%;
}
}

/* ▽ PC ▽======================================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 1460px), print{
.mv_main{
padding-top: 28%;
}
}