
/* CSSコード */
/*common
------------------------------------------------------------------------------------------------------------------------------------ */
@-webkit-keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
@keyframes flash { 0% { opacity: .6; } 100% { opacity: 1; } }
main.amakute a { color: #000; text-decoration: none;  }
main.amakute a:hover { opacity: 1; -webkit-animation: flash 1s; animation: flash 1s; }
main.amakute a.none:hover { opacity: 1; -webkit-animation: flash 0; animation: flash 0; }
main.amakute .food .tomato,
main.amakute .lineup .tomato dt { color: #ff2828; font-weight: bold; }
main.amakute .food .carrot,
main.amakute .lineup .carrot dt { color: #ff8c38; font-weight: bold; }

/* 共通 */
main.amakute { line-height: 1.6; color: #c7c7c7; background-image: linear-gradient(90deg, #414141, #101010 50%, #414141); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media screen and (max-width:767px) {
	main.amakute { font-size: 3.333333vw;}
	.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.amakute { font-size: 1.6rem; }
	.forPC { display: inline; }
	.forSP { display: none; }
	#Contents .wakuwakunokura { margin: 0; padding: 50px 0; background: #fff; }
}

/* KV */
@media screen and (max-width:767px) {
	main.amakute .kv { position: relative; }
	main.amakute .kv .bg { width: 100%; }
	main.amakute .kv .tomato { position: absolute; top: 0; left: 0; z-index: 2; width: 46.5384vw; }
	main.amakute .kv .carrot { position: absolute; top: 0; right: 0; z-index: 3; width: 46.5384vw; }
	main.amakute .kv .new { display: none; }
	main.amakute .kv .text { position: absolute; left: 0; right: 0; margin: auto;z-index: 1; width: 14.743vw; }
	main.amakute .kv img { width: 100%; }
	main.amakute .kv figure { margin: 0; padding: 0; }
}
@media screen and (min-width: 768px) {
	main.amakute .kv { position: relative; }
	main.amakute .kv .bg { width: 100%; }
	main.amakute .kv .tomato { position: absolute; top: 0; left: 11.5%; z-index: 2; width: 30.85vw; }
	main.amakute .kv .carrot { position: absolute; top: 0; right: 11.5%; z-index: 3; width: 30.85vw; }
	main.amakute .kv .new { position: absolute; top: 0; right: 8.6%; z-index: 1; width: 10vw; }
	main.amakute .kv .text { position: absolute; left: 0; right: 0; margin: auto;z-index: 1; width: 5.43vw; }
	main.amakute .kv img { width: 100%; }
	main.amakute .kv figure { margin: 0; padding: 0; }
}

/* intro */
@media screen and (max-width:767px) {
	main.amakute .intro { margin: 17vw 0 15vw ; }
	main.amakute .intro ul { margin: 0 8.9743vw; }
	main.amakute .intro ul li:first-child { margin-bottom: 12vw; }
	main.amakute .intro ul li:nth-child(2) { display: none; }
	main.amakute .intro ul li dt { text-align: center;}
	main.amakute .intro ul li dd { margin-top: -4vw; text-align: center; }
	main.amakute .intro ul li dd p { margin-top: 4vw; text-align: center; line-height: 1.8; font-size: 3.444vw; }
	main.amakute .intro ul li dt img { }
	main.amakute .intro ul li dd img {  }
}
@media screen and (min-width: 768px) {
	main.amakute .intro { padding: 70px 0; margin: 50px 0; }
	main.amakute .intro ul { display: flex; flex-wrap: nowrap; justify-content: space-between; width: 960px; margin: 0 auto; }
	main.amakute .intro ul li  { width: 380px; }
	main.amakute .intro ul li:nth-child(2) { width: 27px; }
	main.amakute .intro ul li:nth-child(2) img { width: 27px; }
	main.amakute .intro ul li dt { text-align: center; margin-bottom: 10px; }
	main.amakute .intro ul li dd { text-align: center; }
	main.amakute .intro ul li dd p { margin-top: 10px; text-align: center; line-height: 1.8; }
	main.amakute .intro ul li dt img { width: 190px; }
	main.amakute .intro ul li dd img { width: 286px; }
}

/* recommend */
@media screen and (max-width:767px) {
	main.amakute .recommend { padding: 30vw 0 0 0; background: url(../images/border_01_sp.png) center top no-repeat; background-size: 100% auto; }
	main.amakute .recommend.second { padding: 35vw 0 0 0; background: url(../images/border_02_sp.png) center top no-repeat; background-size: 100% auto; }
	main.amakute .recommend h2 { padding:0; margin-bottom: 10vw; }
	main.amakute .recommend h2 img { width: 100%; }
	main.amakute .recommend h3 { margin: 8vw 0 5vw; text-align: center; font-size: 4.4vw;}
	main.amakute .recommend h3 + p { margin-bottom: 8vw; font-size: 3.5vw; line-height: 1.8; }
	main.amakute .recommend ul { margin: 0 8.9743vw; }
	main.amakute .recommend ul li dt { position: relative; }
	main.amakute .recommend ul li { margin-bottom: 12vw; }
	main.amakute .recommend ul li p { line-height: 1.6; }
}
@media screen and (min-width: 768px) {
	main.amakute .recommend { padding: 120px 0; margin: 0 auto; background: url(../images/border_01.png) center top no-repeat; background-size: 100% auto; }
	main.amakute .recommend.second { margin-top: -100px; padding: 20vw 0 0 0; background: url(../images/border_02.png) center top no-repeat; background-size: 100% auto; }
	main.amakute .recommend h2 { margin-bottom: 65px; text-align: center; }
	main.amakute .recommend h2 img { width: 337px; }
	main.amakute .recommend ul { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; width: 980px; }
	main.amakute .recommend ul li { width: 300px; }
	main.amakute .recommend ul li h3 { margin: 30px 0; font-size: 1.8rem; text-align: center; }
	main.amakute .recommend ul li p { font-size: 1.5rem; line-height: 1.7; }
	main.amakute .recommend ul img { width: 300px; }
}



/* lineup */
main.amakute .btnShop a { position: relative; display: block; width: 100%; padding: 2em 0; text-align: center; font-weight: bold; border-radius: 10px; }
main.amakute .btnShop a::before { content: ''; width: 10px; height: 10px; border: 0; transform: rotate(45deg); position: absolute; top: 0; right: 20px; bottom: 0; margin: auto; }
main.amakute .tomato .btnShop a { border: 2px solid #ff2828; color: #ff2828; }
main.amakute .tomato .btnShop a:hover { background: #ff2828; color: #fff; }
main.amakute .tomato .btnShop a::before { border-top: solid 2px #ff2828; border-right: solid 2px #ff2828; }
main.amakute .tomato .btnShop a:hover::before { border-top: solid 2px #fff; border-right: solid 2px #fff; }
main.amakute .carrot .btnShop a { border: 2px solid #ff8c38; color: #ff8c38; }
main.amakute .carrot .btnShop a:hover { background: #ff8c38; color: #fff; }
main.amakute .carrot .btnShop a::before { border-top: solid 2px #ff8c38; border-right: solid 2px #ff8c38; }
main.amakute .carrot .btnShop a:hover::before {border-top: solid 2px #fff; border-right: solid 2px #fff; }

@media screen and (max-width:767px) {
	main.amakute .lineup {  padding: 35vw 0 10vw; text-align: center; box-sizing: border-box; background: url(../images/border_02_sp.png) center top no-repeat; background-size: 100% auto;  }
	main.amakute .lineup .lineupInner { margin: 0 8.9743vw; }
	main.amakute .lineup dl:first-child .name { background: url(../images/icon_tomato.png) center top no-repeat; background-size: 133px 69px; }
	main.amakute .lineup dl:last-child .name { background: url(../images/icon_carrot.png) center top no-repeat; background-size: 133px 69px; }
	main.amakute .lineup .image { margin: 5vw 0 10vw 0; text-align: center; }
	main.amakute .lineup .name { padding-top: 22vw; margin-bottom: 8vw; }
	main.amakute .lineup .image img,
	main.amakute .lineup .name img { width: 100%; }
	main.amakute .lineup .catch { margin: 0 0 10vw 0 }
	main.amakute .lineup .text { margin-bottom: 6vw; line-height: 1.7; font-size: 3.4444vw; }
	main.amakute .lineup .spec { display: table; width: 100%; padding: 2.8vw 0; border-top: 1px solid #808080; }
	main.amakute .lineup .spec dt { display: table-cell; font-size: 3.46666666vw; vertical-align: top; line-height: 1.7; white-space: nowrap; }
	main.amakute .lineup .spec dd { display: table-cell; font-size: 3.46666666vw; vertical-align: top; line-height: 1.7;  }
	main.amakute .lineup dl:first-child { margin-bottom: 15vw; }
	main.amakute .lineup .spec { display: block; width: 100%; padding: 2.8vw 0; border-top: 1px solid #808080; }
	main.amakute .btnShop { margin-top: 3vw; }
}
@media screen and (min-width: 768px) {
	main.amakute .lineup { margin: 0; padding: 20vw 0 80px 0; background: url(../images/border_02.png) center top no-repeat; background-size: 100% auto;  }
	main.amakute .lineup .lineupInner { display: flex; flex-wrap: nowrap; justify-content: space-between; margin: 0 auto; width: 1000px; }
	main.amakute .lineup dl { margin: 0 auto; padding: 0 50px; width: 500px; }
	main.amakute .lineup dl .name { margin-bottom: 46px; padding-top: 100px;  text-align: center; }
	main.amakute .lineup dl:first-child .name { background: url(../images/icon_tomato.png) center top no-repeat; background-size: 133px 69px; }
	main.amakute .lineup dl:last-child .name { background: url(../images/icon_carrot.png) center top no-repeat; background-size: 133px 69px; }
	main.amakute .lineup .name img { width: 289px; }
	main.amakute .lineup .image { text-align: center; }
	main.amakute .lineup .image img { width: 234px; height: auto; }
	main.amakute .lineup .catch { margin: 40px 0 30px; }
	main.amakute .lineup .text { margin-bottom: 30px; line-height: 1.7; font-size: 1.4rem; }
	main.amakute .lineup .spec { display: table; padding: 15px 0; margin: 0; border-top: 1px solid #808080; width: 100%;  }
	main.amakute .lineup .spec dt { display: table-cell; width: 20%; font-size: 1.4rem; line-height: 1.6; }
	main.amakute .lineup .spec dd { display: table-cell; width: 80%; font-size: 1.4rem; line-height: 1.6; }
	main.amakute .btnShop { margin-top: 20px; }
}

/* フェードイン(初期値) */
.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秒遅らせる */
}

.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
	}
}



/* メインビジュアルアニメーション */
.fadeUpMain {
    animation-name:fadeUpAnimeMain;
    animation-duration:2.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-time02 { animation-delay: 2s; }
    .delay-time03 { animation-delay: 3s; }
	.delay-time04 { animation-delay: 4s; }
