/* CSSコード */
/*common
------------------------------------------------------------------------------------------------------------------------------------ */
@-webkit-keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
@keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
main.fruvie a { color: #000; text-decoration: none;  }
main.fruvie a:hover { opacity: 1; -webkit-animation: flash 1s; animation: flash 1s; }
main.fruvie a.none:hover { opacity: 1; -webkit-animation: flash 0; animation: flash 0; }

/* 共通 */
@media screen and (max-width:767px) {
	main.fruvie { line-height: 1.6; font-size: 3.333333vw; color: #444444; }
	main.fruvie::before { content: ""; display: block; position: fixed; left: 0; bottom: 0; right: 0; width: 100%; height: 100vh; background: url(../images/bg_sp.jpg) center top no-repeat; background-size: cover; z-index: -1; }
	.forPC { display: none; }
	.forSP { display: inline; }
	img { max-width: 100%; height: auto; -webkit-touch-callout: none; }
	#Contents .wakuwakunokura { margin: 0; padding: 30px 20px; background: #fff!important; }
}
@media screen and (min-width: 768px) {
	main.fruvie { color: #444444; font-size: 1.6rem; color: #444444; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: url(../images/bg_pc.jpg) center top no-repeat;background-attachment: fixed; }
	.forPC { display: inline; }
	.forSP { display: none; }
	#Contents .wakuwakunokura { margin: 0; padding: 50px 0; background: #fff!important; }
}
/* KV */

@media screen and (max-width:767px) {
	main.fruvie .kv { margin: 0; }
	main.fruvie .kv img { width: 100%; }
	main.fruvie .kv .bg { position: relative; margin: 0; }
	main.fruvie .kv .image,
	main.fruvie .kv .text { position: absolute; top: 0; left: 0; z-index: 2; }
}
@media screen and (min-width: 768px) {
	main.fruvie .kv { margin: 0; }
	main.fruvie .kv img { width: 100%; }
	main.fruvie .kv .bg { position: relative; margin: 0; }
	main.fruvie .kv .image,
	main.fruvie .kv .text { position: absolute; top: 0; left: 0; z-index: 2; }
}

@media screen and (max-width:767px) {
	main.fruvie .intro { margin: 0; padding: 9.5vw 0 15vw; position: relative; }
	main.fruvie .intro .introImage { position: absolute; width: 24.2vw; top: -28.5vw; left: 0;}
	main.fruvie .intro p { margin: 5vw 5vw 0 33vw; padding-bottom: 0; font-size: 3.4444vw; line-height: 2; }
}
@media screen and (min-width: 768px) {
	main.fruvie .intro { margin: 0 0 60px 0; position: relative; }
	main.fruvie .intro .bg { width: auto; }
	main.fruvie .intro h3 { margin: 0 auto 25px auto; padding-top: 50px; width: 100%; text-align: center; }
	main.fruvie .intro h3 img { width: 428px; }
	main.fruvie .intro p { font-size: 1.4rem; line-height: 3; text-align: center; }
	main.fruvie .introImage { position: absolute; z-index: 5; right: 9.4vw; top: -15.5vw; }
	main.fruvie .introImage img { width: 130px; }
}

@media screen and (max-width:767px) {
	main.fruvie .scene { margin: 0; padding: 0; }
	main.fruvie .scene img { width: 100%; }
}
@media screen and (min-width: 768px) {
	main.fruvie .scene { margin: 0; }
	main.fruvie .scene img { width: 100%; }
	main.fruvie .scene ul { display: flex; flex-wrap: nowrap; justify-content: space-between; }
	main.fruvie .scene ul li { width: 33.333333333%; }
	main.fruvie .scene ul li img { width: 100%; }
}
@media screen and (max-width:767px) {
	main.fruvie .howto { margin-bottom: 2vw; padding: 10vw 0 0 0;  }
	main.fruvie .howto h3 { margin-bottom: 5vw; }
	main.fruvie .howto ul li { margin-bottom: 10vw; }
	main.fruvie .howto ul li dd { margin: 2.5vw 4.4vw; }
	main.fruvie .howto ul li dd .inner h4 { margin-bottom: 2vw; height: 10vw; line-height: 10vw; font-weight: normal; }
	main.fruvie .howto ul li dd .inner.cassis h4 { padding-left: 11vw;background: url(../images/icon_cassis.png) left top no-repeat; background-size: 10vw 10vw; }
	main.fruvie .howto ul li dd .inner.zakuro h4 { padding-left: 11vw; background: url(../images/icon_zakuro.png) left top no-repeat; background-size: 10vw 10vw; }
	main.fruvie .howto ul li dd .inner p { padding: 0 2vw; line-height: 1.5; }
}
@media screen and (min-width: 768px) {
	main.fruvie .howto { padding: 80px 0; }
	main.fruvie .howto h3 { margin: 0 auto 40px auto; width: 497px; height: 90px; }
	main.fruvie .howto h3 img { width: 100%; }
	main.fruvie .howto ul { display: flex; flex-wrap: nowrap; justify-content: space-between; }
	main.fruvie .howto ul li { width: 50%; }
	main.fruvie .howto ul li dt { margin-bottom: 40px; }
	main.fruvie .howto ul li dd { padding: 0 75px; }
	main.fruvie .howto ul li dd .inner { padding-left: 65px; }
	main.fruvie .howto ul li dd .inner.cassis { background: url(../images/icon_cassis.png) left top no-repeat; background-size: 50px 50px; }
	main.fruvie .howto ul li dd .inner.zakuro { background: url(../images/icon_zakuro.png) left top no-repeat; background-size: 50px 50px; }
	main.fruvie .howto ul li dd .inner h4 { margin-bottom: 10px; font-size: 1.6rem; font-weight: normal;}
	main.fruvie .howto ul li dd .inner p { font-size: 1.4rem; line-height: 1.6; }
	main.fruvie .howto ul li img { width: 100%; }
}

@media screen and (max-width:767px) {
	main.fruvie .recipe { margin-bottom: 2vw; }
	main.fruvie .recipe h3 { margin-bottom: 5vw; }
	main.fruvie .recipe dl {  }
	main.fruvie .recipe dt {}
	main.fruvie .recipe dd { }
	main.fruvie .recipe ul li { margin-bottom: 10vw; }
	main.fruvie .recipe ul li dd { margin: 2.5vw 4.4vw; }
	main.fruvie .recipe ul li dd .inner h4 { margin-bottom: 2vw; font-size: 4vw; line-height: 1.5;  font-weight: normal;}
	main.fruvie .recipe ul li dd .inner h4 span { font-size: 3vw; }
	main.fruvie .recipe ul li dd .inner.cassis h4 { padding-left: 11.5vw;background: url(../images/icon_cassis.png) left top no-repeat; background-size: 10vw 10vw; }
	main.fruvie .recipe ul li dd .inner.zakuro h4 { padding-left: 11.5vw; background: url(../images/icon_zakuro.png) left top no-repeat; background-size: 10vw 10vw; }
	main.fruvie .recipe ul li dd .inner p { padding: 0 2vw; line-height: 1.5; }
}
@media screen and (min-width: 768px) {
	main.fruvie .recipe { margin-bottom: 100px; }
	main.fruvie .recipe img { width: 100%; }
	main.fruvie .recipe ul { display: flex; flex-wrap: nowrap; justify-content: space-between; }
	main.fruvie .recipe ul li { width: 33.333333333%; }
	main.fruvie .recipe ul li dt { margin-bottom: 40px; }
	main.fruvie .recipe ul li dd { padding: 0 25px; }
	main.fruvie .recipe ul li dd .inner h4  { font-size: 2rem; font-weight: bold; line-height: 1.5; font-weight: normal;}
	main.fruvie .recipe ul li dd .inner h4 span { font-size: 1.4rem;}
	main.fruvie .recipe ul li dd .inner { padding-left: 65px; }
	main.fruvie .inner.cassis { background: url(../images/icon_cassis.png) left top no-repeat; background-size: 50px 50px; }
	main.fruvie .inner.zakuro { background: url(../images/icon_zakuro.png) left top no-repeat; background-size: 50px 50px; }
	main.fruvie .recipe ul li dd .inner h4 { margin-bottom: 10px; font-size: 1.6rem; }
	main.fruvie .recipe ul li dd .inner p { font-size: 1.4rem; line-height: 1.6; }
	main.fruvie .recipe ul li img { width: 100%; }
}

/* product */
@media screen and (max-width:767px) {
	main.fruvie .product { margin: 20vw auto 0 auto; padding-top: 12vw; background: url(../images/spec_bg.png) center top no-repeat; background-size: 100% auto; }
	main.fruvie .productWrap .detail { padding: 0 5vw; }
	main.fruvie .productWrap .title { margin-bottom: 8vw; }
	main.fruvie .productWrap .detail p { margin: 7vw 0 5vw; line-height: 1.7; font-size: 3.4444vw; }
	main.fruvie .productWrap .spec { display: table; padding: 15px 0; border-top: 1px solid #808080; width: 100%; }
	main.fruvie .productWrap .spec dt { display: table-cell; width: 21%; font-size: 3.4444vw; line-height: 1.6; }
	main.fruvie .productWrap .spec dd { display: table-cell; width: 79%; font-size: 3.4444vw; line-height: 1.6; }
	main.fruvie .btnShop { margin-top: 2vw!important; padding: 0; width: 100%; }
	main.fruvie .bgProduct { display: none; }
}
@media screen and (min-width: 768px) {
	main.fruvie .product { position: relative; width: 100%; }
	main.fruvie .productWrap { position: absolute; left: 20%; top: 40px; width: 580px; }
	main.fruvie .productWrap .title { margin-bottom: 20px; width: 523px; }
	main.fruvie .productWrap .title img { width: 100%; }
	main.fruvie .productWrap .detail p { margin-bottom: 20px; line-height: 1.8; font-size: 1.5rem; }
	main.fruvie .productWrap .spec { display: table; padding: 12px 0; border-top: 1px solid #808080; width: 580px; }
	main.fruvie .productWrap .spec dt { display: table-cell; width: 14%; font-size: 1.4rem; line-height: 1.6; }
	main.fruvie .productWrap .spec dd { display: table-cell; width: 86%; font-size: 1.4rem; line-height: 1.6; }
	main.fruvie .btnShop { margin: 15px 0 0 -8px; width: 200px; }
	main.fruvie .btnShop img { width: 100%; }
	main.fruvie .bgProduct { width: 100%; }
	main.fruvie .productImage { display: none; }
}

/* フェードイン(初期値) */
.js-fadeUp {
	opacity: 0; /* 最初は非表示 */
	transform: translateY(30px); /* 下に30pxの位置から */
	transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
  /* フェードイン(スクロールした後) */
.js-fadeUp.is-inview {
	opacity: 1; /* 表示領域に入ったら表示 */
	transform: translateY(0); /* 30px上に移動する */
	transition-delay: .2s; /* フェード開始を0.5秒遅らせる */
}


/* メインビジュアルアニメーション */
.fadeUpMain {
    animation-name:fadeUpAnimeMain;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity: 0;
    }
    @keyframes fadeUpAnimeMain{
      from {
        opacity: 0;
        transform: translateY(0px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* アニメーションスタートの遅延時間を決めるCSS*/
    .delay-time01 { animation-delay: 1s; }
    .delay-time03 { animation-delay: 2s; }
    .delay-time02 { animation-delay: 3s; }



.wakuwakunokura {
	margin: 60px 20px;
	text-align: center
}

.wakuwakunokura img {
	max-width: 100%
}

.wakuwakunokura-anchor img {
	-webkit-transition-duration: .2s;
	transition-duration: .2s;
	-webkit-transition-property: opacity;
	transition-property: opacity
}

@media (any-hover:hover) {
	.wakuwakunokura-anchor:hover img {
	opacity: .6
	}
}