@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;
}

/*========================
basic
========================*/
body{
position: relative;
}
.l-container{
color: #242322;
line-height: 1.8;
-webkit-text-size-adjust: 100%;
background: #ffffff;
}
.l-container img{
max-width: 100%;
height: auto;
vertical-align: bottom;
/*transition: ease .4s;*/
transition: width 1s ease-in-out 0.01s;
}
p.note, ul.note > li{
text-align: left;
text-indent: -1em;
padding-left: 1em;
}
.moveit{
visibility: hidden;
}

/*========================
フォント読み込み
========================*/
@font-face{
font-family: 'Quicksand';
src: url("/products/brand/fruits_gummi/common/font/Quicksand-Regular.woff") format('woff');
font-weight: 300;
}

/*========================
コンテンツ
========================*/
.isPC {
display: none;
}
#content_wrap{
position: relative;
overflow: hidden;
font-size: 3.4vw;
letter-spacing: .01em;
background: #fffdf9;
}
#content_wrap > section{
text-align: center;
}
.img_txt{
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
font-size: 0 !important;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
transition: opacity,transform;
transition-duration: .48s;
transition-timing-function: ease-out;
transition-delay: .7s;
}

/* ▽ SP ▽================================================================================================================================== */
/*========================
base
========================*/
.inner{
padding: 0 6vw;
}
#content_wrap p,
#content_wrap a,
#content_wrap figcaption,
#content_wrap div{
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;
}
.information,
.information p
{
font-size: 2.6vw !important;
line-height: 1.9;
}
.txt_left{
text-align: left !important;
}
.txt_right{
text-align: right !important;
}
.txt_center{
text-align: center !important;
}

/*========================
ローディング画面
========================*/
#loading{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
background: #fff0d2;
}
#loading img{
width: 36vw;
position: absolute;
top: calc(50% - 20vw);
left: calc(50% - 18vw);
-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;}
}

/*========================
オンマウス設定
========================*/
.nav_menu a:hover,
.movie_list a:hover,
.btn_details:hover,
#campaign a:hover{
opacity: 0.7;
}
.tag_forecast:hover{
animation-name: swing;
animation-duration: 1s;
}

/*========================
メインビジュアル
========================*/
#mainvisual img{
width: 100%;
}

/*========================
ページ内ナビ
========================*/
.gnav{
width: 100%;
background: #cd3517;
}
.gnav .inner{
padding: 0;
}
.nav_menu{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.nav_menu li{
width: calc(100% / 2);
text-align: center;
}
.nav_menu li h3{
position: relative;
padding: 2.7vw 9.2vw;
}
.nav_menu li:first-child h3:after{
display: block;
content: "";
width: 1px;
height: 3vw;
background: #eaaa9e;
position: absolute;
right: 0;
top: calc(50% - 1.5vw);
}
.nav_menu li:not(:last-child) h3:before{
display: block;
content: "";
width: 3vw;
height: 1px;
background: #eaaa9e;
position: absolute;
left: calc(50% - 1.5vw);
bottom: 0;
}
.deco_01a{
position: absolute;
width: calc(100%*296/767);
left: -13.4vw;
top: 1.3vw;
}
.deco_01b{
position: absolute;
width: calc(100%*131/767);
left: 13.8vw;
top: 10.3vw;
}
.deco_01c{
position: absolute;
width: calc(100%*210/767);
left: 2.2vw;
top: 56.4vw;
}
.deco_02{
position: absolute;
width: calc(100%*436/767);
right: -19vw;
top: -38.4vw;
}
.deco_03{
position: absolute;
width: calc(100%*339/767);
left: -4vw;
top: -24.4vw;
}
.deco_04a{
position: absolute;
width: calc(100%*376/767);
right: -21vw;
top: -56.3vw;
}
.deco_04b{
position: absolute;
width: calc(100%*196/767);
right: -12.7vw;
top: -31.7vw;
}
.deco_04c{
position: absolute;
width: calc(100%*333/767);
right: 3.6vw;
top: -30.9vw;
}

/*========================
キャンペーンバナーなど掲載枠
========================*/
#cmp{
background: #fff0d2;
position: relative;
padding: 9vw 0 2vw;
}
#cmp .inner{
padding: 0 8.5vw;
}

/*========================
メッセージ
========================*/
#message{
background: #fff0d2;
position: relative;
padding: 24.2vw 0 29.5vw;
}
#message:after{
content: "";
display: block;
width: 100%;
height: 5.2vw;
background: url(/products/brand/fruits_gummi/images/wave_wh.png) repeat-x center bottom /auto 100%;
position: absolute;
bottom: 0;
left: 0;
}
.message_txt01{
width: calc(100%*347/767);
height: 14.9vw;
background-image: url("/products/brand/fruits_gummi/images/message_sp01.png");
margin: 0 auto 8vw;
}
.message_txt02{
width: calc(100%*517/767);
height: 14.5vw;
background-image: url(/products/brand/fruits_gummi/images/message_sp02.png);
margin: 0 auto 8.5vw;
}
.message_txt03{
width: calc(100%*402/767);
height: 41.8vw;
background-image: url(/products/brand/fruits_gummi/images/message_sp03.png);
margin: 0 auto 3vw;
}
.message_txt04{
width: calc(100%*368/767);
height: 14vw;
background-image: url(/products/brand/fruits_gummi/images/message_sp04.png);
margin: 0 auto 8.8vw;
}
.message_txt05{
width: calc(100%*405/767);
height: 13.6vw;
background-image: url("/products/brand/fruits_gummi/images/message_sp05.png");
margin: 0 auto;
}

/*========================
NEWS
========================*/
#news{
position: relative;
padding: 11.8vw 0 30vw;
}
#news:after{
content: "";
display: block;
width: 100%;
height: 5.2vw;
background: url("/products/brand/fruits_gummi/images/wave_or.png") repeat-x center bottom /auto 100%;
position: absolute;
bottom: 0;
left: 0;
}
#news h3{
width: calc(100%*432/767);
margin: 0 auto 7.8vw;
}
.news_list{
text-align: left;
margin-bottom: 8vw;
}
.info_up{
background: #c52d0f;
color: #ffffff;
border-radius: 1.4vw;
display: inline-block;
padding: 2vw;
margin-bottom: 2.2vw;
}
.info_up p{
font-family: 'Quicksand' !important;
line-height: 1;
letter-spacing: 0.1em;
}
.dashed{
position: relative;
}
.dashed p{
line-height: 1.4;
}
.dashed:after{
content: "";
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 1vw, #de8876 1vw, #de8876 2vw);
background-size: 2.4vw 2px;
width: 88.8vw;
height: 2px;
position: absolute;
left: -1vw;
bottom: -2vw;
}
.news_list:last-child{
margin-bottom: 0;
}

/*========================
動画コンテンツ：MOVIE
========================*/
#movie{
background: #ffece3;
position: relative;
padding: 12.3vw 0 38vw;
}
#movie:after{
content: "";
display: block;
width: 100%;
height: 5.2vw;
background: url(/products/brand/fruits_gummi/images/wave_wh.png) repeat-x center bottom /auto 100%;
position: absolute;
bottom: 0;
left: 0;
}
#movie h3{
width: calc(100%*432/767);
margin: 0 auto 7.8vw;
}
#movie .information{
padding-top: 5vw;
}
.movie_list li{
margin-bottom: 11vw;
}
.movie_list li:last-child{
margin-bottom: 0;
}
.thumb{
padding: 0 4vw 2vw;
}
.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/fruits_gummi/common/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);
}

/*========================
動画モーダル
========================*/
#modal_movie{
position: relative;
background: #fff;
width: auto;
max-width: 800px;
margin: 0 auto;
}
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);
}

/*========================
商品ラインナップ：LINEUP
========================*/
#lineup{
position: relative;
padding: 13.2vw 0 29.4vw;
}
#lineup:after{
content: "";
display: block;
width: 100%;
height: 5.2vw;
background: url("/products/brand/fruits_gummi/images/wave_ye.png") repeat-x center bottom /auto 100%;
position: absolute;
bottom: 0;
left: 0;
}
#lineup h3{
width: calc(100%*432/767);
margin: 0 auto 3.5vw;
}
.lineup_list{
display: flex;
flex-wrap: wrap;
}
.btn_details{
background: #c52d0f;
color: #ffffff;
border-radius: 50vw;
display: inline-block;
padding: 1.8vw 6vw 1.8vw 5vw;
margin-top: 0.6vw;
}
.btn_details p{
position: relative;
line-height: 1;
font-size: 3vw;
}
.btn_details p:after{
content: "";
position: absolute;
width: 0.9vw;
height: 0.9vw;
border-right: 0.28vw solid #fff;
border-top: 0.28vw solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: -3vw;
top: calc(50% - 0.7vw);
}
/* 中央以外のスライド */
.lineup_list .slick-slide figure {
height: auto;
/*opacity: .6; // スライドを薄くする*/
transform: scale(.8); /*// スライドのサイズを80%にする*/
transition: opacity .5s, transform .5s; /*// スライド透過率と拡大のアニメーション時間を0.5秒に設定*/
width: 100%;
}
/* 中央のスライド */
.lineup_list .slick-center figure {
opacity: 1; /*// 中央のスライドは透過しない*/
transform: scale(1); /*// 中央のスライドは小さくしない*/
}
.lineup_list .slick-slide img {
margin: 0 auto;
}
.slick-prev,
.slick-next{
width: 4.4vw;
height: 7.6vw;
text-indent: -9999px;
border: none;
cursor: pointer;
z-index: 300;
background-color: transparent;
position: absolute;
top: -3vw;
}
.slick-prev{
background-image: url("/products/brand/fruits_gummi/common/images/btn_prev.png");
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
left: 15.6vw;
}
.slick-next{
background-image: url("/products/brand/fruits_gummi/common/images/btn_next.png");
background-repeat: no-repeat;
background-position: top left;
background-size: contain;
right: 15.6vw;
}
.slick-prev:hover,
.slick-next:hover{
opacity: 0.7;
}

/*========================
商品詳細モーダル
========================*/
.lineup_modal{
position: relative;
width: 88vw;
margin: 0 auto;
background: #fffdf9;
border-radius: 2vw;
text-align: center;
color: #242322;
}
.lineup_detail{
padding: 6.6vw 6vw 6vw;
}
.lineup_detail h2 figure{
position: relative;
}
.lineup_detail h2 figure .label{
position: absolute;
left: 4.6vw;
top: -3.4vw;
width: 33vw;
}
/* スマートパックのみラベル位置調整 */
.lineup_detail h2 figure .label_smart{
position: absolute;
left: 4.6vw;
top: 1vw;
width: 33vw;
}
.lineup_detail h2 figure img{
width: 52.4vw;
}
.lineup_detail h2 p{
position: relative;
margin-top: 2.8vw;
margin-bottom: 6vw;
}
.lineup_detail h2 p img{
width: 76vw;
}
.lineup_detail h2 p:after{
content: "";
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 1vw, #de8876 1vw, #de8876 2vw);
background-size: 2.4vw 2px;
width: 101%;
height: 2px;
position: absolute;
left: -1vw;
bottom: -2.7vw;
}
.lineup_detail 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-size: 3.2vw;
text-align: left;
}
.chart img{
width: 76vw;
margin-top: 4.2vw;
}

/*========================
グミサイト回遊バナー・SDGs・SNS
========================*/
/*#brand_footer{
background: #fff0d2;
position: relative;
padding: 15.2vw 0 10vw;
}
#brand_footer .inner{
padding: 0 14vw;
}
.gummisite_list li:not(:first-child){
margin-top: 7.6vw;
}*/
#brand_footer{
background: #fff0d2;
position: relative;
padding: 15.2vw 0 10vw;
}
.gummisite_list{
padding: 0 8vw;
}
.gummisite_list li:not(:first-child){
margin-top: 7.9vw;
}
.sdgs{
background: #ffffff;
border-radius: 1.6vw;
padding: 3.2vw;
margin-top: 7.9vw;
text-align: left;
font-size: 3vw !important;
}
.sdgs_list{
display: flex;
align-items: center;
}
.sdgs_list li:first-child{
width: 34vw;
margin-right: 3vw;
}
.sns{
margin-top: 10.2vw;
}
.sns_list {
display: flex;
justify-content: center;
}
.sns_list li {
width: 11.6vw;
}
.sns_list li:not(:first-child) {
margin-left: 5.2vw;
}
.share{
width: 26.8vw;
margin-bottom: 2.2vw;
}
.pagetop{
position: fixed;
bottom: 8vw;
right: 3.6vw;
width: 11.6vw;
z-index: 50;
}
.pagetop a{
display: block;
}	

/* ～767px For SP
====================================================*/
@media screen and (max-width: 767px){
.isPC{
display: none;
}
}

/* ▽ PC ▽================================================================================================================================== */
/* 768px～ For PC
====================================================*/
@media screen and (min-width: 768px), print{
/*========================
base
========================*/
.isSP {
display: none;
}
.isPC {
display: block;
}
body{
min-width: 950px;
}
.l-container{
line-height: 2;
}
.inner{
width: 950px;
margin: 0 auto;
padding: 0 !important;
}
.information,
.information p{
font-size: 13px !important;		
}
#content_wrap,
#content_wrap p{
font-size: 18px;
}

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

/*====================
ページ内ナビ
====================*/
.nav_menu{
flex-wrap: nowrap;
}
.nav_menu li{
width: calc(100% / 3);
}
.nav_menu li h3{
padding: 18px 52px 22px;
}
.nav_menu li:first-child h3:after,
.nav_menu li h3:after{
display: block;
content: "";
width: 1px;
height: 18px;
background: #eaaa9e;
position: absolute;
right: 0;
top: calc(50% - 9px);
}
.nav_menu li:first-child h3:before{
display: block;
content: "";
width: 1px;
height: 18px;
background: #eaaa9e;
position: absolute;
left: 0;
top: calc(50% - 9px);
}
.nav_menu li:not(:first-child) h3:before{
content: none;
}
.deco_01a{
width: 296px;
left: calc(50% - 700px);
top: 26px;
}
.deco_01b{
width: 131px;
left: calc(50% - 467px);
top: 126px;
}
.deco_01c{
width: 210px;
left: calc(50% - 515px);
top: 280px;
}
.deco_02{
width: 436px;
right: calc(50% - 738px);
top: -353px;
}
.deco_03{
width: 339px;
left: calc(50% - 677px);
top: -51px;
}
.deco_04a{
width: 376px;
right: calc(50% - 736px);
/*top: -590px;　動画3つの場合*/
top: -420px;
}
.deco_04b{
width: 196px;
right: calc(50% - 672px);
/*top: -397px;　動画3つの場合*/
top: -227px;
}
.deco_04c{
width: 333px;
right: calc(50% - 544px);
/*top: -391px;　動画3つの場合*/
top: -221px;
}

/*========================
キャンペーンバナーなど掲載枠
========================*/
#cmp{
padding: 70px 0 0;
}
#cmp .inner{
width: 840px;
}

/*========================
メッセージ
========================*/
#message{
padding: 100px 0 134px;
}
#message:after{
height: 40px;
}
.message_txt01{
width: 632px;
height: 48px;
background-image: url("/products/brand/fruits_gummi/images/message_pc01.png");
margin: 0 auto 66px;
}
.message_txt02{
width: 460px;
height: 90px;
background-image: url("/products/brand/fruits_gummi/images/message_pc02.png");
margin: 0 auto 80px;
}
.message_txt03{
width: 592px;
height: 180px;
background-image: url("/products/brand/fruits_gummi/images/message_pc03.png");
margin: 0 auto 30px;
}
.message_txt04{
width: 596px;
height: 31px;
background-image: url("/products/brand/fruits_gummi/images/message_pc04.png");
margin: 0 auto 68px;
}
.message_txt05{
width: 562px;
height: 41px;
background-image: url("/products/brand/fruits_gummi/images/message_pc05.png");
margin: 0 auto;
}

/*========================
NEWS
========================*/
#news{
padding: 56px 0 138px;
}
#news:after{
height: 40px;
}
#news h3{
width: 336px;
margin: 0 auto 54px;
}
#news .inner{
width: 800px;
/*width: 730px;*/
}
.news_list{
margin-bottom: 27px;
display: flex;
align-items: flex-start;
}
.info_up{
border-radius: 8px;
padding: 10px;
margin-bottom: 0;
margin-right: 20px;
width: 122px;
}
.info_up p{
font-size: 20px !important;
}
.dashed p{
padding-top: 7px;
}
.dashed:after{
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 8px, #de8876 6px, #de8876 16px);
background-size: 16px 2px;
background-repeat: repeat-x;
width: 645px;
/*width: 594px;*/
height: 2px;
position: absolute;
left: -12px;
bottom: -8px;
}
.news_list:last-child{
margin-bottom: 0;
}

/*========================
動画コンテンツ：MOVIE
========================*/
#movie{
padding: 56px 0 118px;
}
#movie:after{
height: 40px;
}
#movie h3{
width: 336px;
margin: 0 auto 54px;
}
#movie .information{
padding-top: 40px;
padding-left: 20px;
}
.movie_list{
display: flex;
/*flex-wrap: wrap;*/
justify-content: space-around;
}
.movie_list li{
/*width: calc(100% / 2);*/
margin-bottom: 0;
}
.thumb{
width: 580px;
margin: 0 auto 14px;
padding: 0;
}

/*========================
動画モーダル
========================*/
.mfp-close {
width: 54px !important;
height: 54px !important;
top: -70px !important;
right: 0 !important;
}

/*========================
商品ラインナップ：LINEUP
========================*/
#lineup{
padding: 57px 0 140px;
}
#lineup:after{
height: 40px;
}
#lineup h3{
width: 336px;
margin:0 auto 22px;
}
.btn_details{
border-radius: 100px;
padding: 10px 30px;
margin-top: 4px;
}
.btn_details p{
font-size: 16px !important;
}
.btn_details p:after{
width: 7px;
height: 7px;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
right: -18px;
top: calc(50% - 5px);
}
/* 中央以外のスライド */
.lineup_list .slick-slide figure {
height: auto;
/*opacity: .6; // スライドを薄くする*/
transform: scale(.75); /*// スライドのサイズを75%にする*/
transition: opacity .5s, transform .5s; /*// スライド透過率と拡大のアニメーション時間を0.5秒に設定*/
width: 100%;
}
/* 中央のスライド */
.lineup_list .slick-center figure {
opacity: 1; /*// 中央のスライドは透過しない*/
transform: scale(1); /*// 中央のスライドは小さくしない*/
}
.slick-prev,
.slick-next{
width: 24px;
height: 42px;
top: -28px;
}
.slick-prev{
left: calc(50% - 240px);
}
.slick-next{
right:  calc(50% - 240px);
}
.lineup_list li figure .new{
top: -10px;
left: calc(50% - 117px);
width: 98px;
}

/*========================
商品詳細モーダル
========================*/
.lineup_modal{
width: 870px;
border-radius: 14px;
}
.lineup_detail{
padding: 46px 24px 46px 55px;
display: flex;
flex-direction: row-reverse;
align-items: flex-end;
}
.txt_detail{
text-align: left;
}
.lineup_detail h2 figure .label{
left: -48px;
top: -22px;
width: 222px;
}
/* スマートパックのみラベル位置調整 */
.lineup_detail h2 figure .label_smart{
left: -48px;
top: 6px;
width: 222px;
}
.lineup_detail h2 figure img{
width: 360px;
}
.lineup_detail h2 p{
margin-top: 46px;
margin-bottom: 36px;
}
.lineup_detail h2 p.long_txt{
margin-top: 26px;
}
.lineup_detail h2 p img{
width: 404px;
}
.lineup_detail h2 p:after{
background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 8px, #de8876 6px, #de8876 16px);
background-size: 16px 2px;
background-repeat: repeat-x;
width: 422px;
position: absolute;
left: -4px;
bottom: -16px;
}
.lineup_detail p{
font-size: 16px;
line-height: 1.8;
}
.chart img{
width: 410px;
margin: 18px 0 8px
}
.short_txt{
margin-bottom: 16px;
}

/*========================
グミサイト回遊バナー・SDGs・SNS
========================*/
#brand_footer{
padding: 90px 0 60px;
}
#brand_footer .inner{
width: 840px;
}
.gummisite_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0;
}
.gummisite_list li{
width: 400px;
}
.gummisite_list li:not(:first-child){
margin-top: 0;
}
.gummisite_list li:nth-child(n+3){
margin-top: 40px;
}
.gummisite_list li img{
width: 400px;
}
.sdgs{
border-radius: 10px;
padding: 20px;
margin-top: 60px;
font-size: 16px !important;
width: 800px;
margin: 60px auto 0;
}
.sdgs_list li:first-child{
width: 94px;
margin-right: 26px;
}
.sns{
margin-top: 60px;
}
.sns_list li {
width: 60px;
}
.sns_list li:not(:first-child) {
margin-left: 40px;
}
.share{
width: 124px;
margin-bottom: 8px;
}
.pagetop{
bottom: 50px;
right: 30px;
width: 75px;
}
}

/* ▽ 表示調整 ▽================================================================================================================================== */
/* 1024px以下
====================================================*/
@media screen and (max-width: 1023px), print{
.lineup_list .slick-slide img {
max-width: 340px;
width: 100%;
}
}