@charset "UTF-8";
#contents { margin: 0; overflow: hidden; }

@media (min-width: 960px) { #contents { width: 100%; } }

#bluetomato { font-family: "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "HiraKakuPro-W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS Pgothic", "Osaka", sans-serif, Helvetica, Helvetica Neue, Arial, Verdana; }

#bluetomato div, #bluetomato h1, #bluetomato h2, #bluetomato h3, #bluetomato p, #bluetomato a, #bluetomato span { box-sizing: border-box; }

#bluetomato img { vertical-align: bottom; }

#bluetomato a { text-decoration: none; -webkit-transition: .5s; transition: .5s; }

#bluetomato a:hover { color: #000; -webkit-transition: .5s; transition: .5s; opacity: .7; }

#bluetomato a:hover p { opacity: .7; -webkit-transition: .5s; transition: .5s; }

#bluetomato .inner-wrap { margin: 0 auto; width: 960px; position: relative; box-sizing: border-box; }

#bluetomato .point-img { position: absolute; }

#bluetomato .mainvisual-section { padding-top: 165px; height: 540px; color: #fff; background: url(../images/bluetomato/kv-bg.jpg) no-repeat center center; background-size: cover; box-sizing: border-box; }

#bluetomato .mainvisual-section .title { margin: auto; width: 620px; }

#bluetomato .mainvisual-section .package { left: -13px; top: -127px; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }

#bluetomato .mainvisual-section .tomato { right: 0; top: 78px; margin-right: -169px; }

#bluetomato .point-section { background: #f1f2f4; padding: 80px 0 120px; }

#bluetomato .point-section .banner-area { margin: 0 0 75px; display: block; }

#bluetomato .point-section .point-area { padding-top: 140px; position: relative; }

#bluetomato .point-section .point-area + .point-area { margin-top: 40px; }

#bluetomato .point-section .point-area .inner-wrap { background: #fff; padding: 30px 50px 40px; color: #4b2f2f; }

#bluetomato .point-section .point-area h2 { margin-bottom: 30px; padding-bottom: 25px; font-size: 36px; font-family: "Kaisei Opti", serif; position: relative; }

#bluetomato .point-section .point-area h2::after { content: ""; background: url(../images/bluetomato/under-bar.jpg) no-repeat; width: 100%; height: 6px; position: absolute; left: 0; bottom: 0; }

#bluetomato .point-section .point-area .point-contents { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; }

#bluetomato .point-section .point-area .point-contents-text { margin-right: 40px; width: 540px; font-size: 18px; line-height: 1.4; }

#bluetomato .point-section .point-area .point-contents-text small { margin: 5px 0 10px; display: block; font-size: 12px; }

#bluetomato .point-section .point-area .point-contents-text p + p { margin-top: 33px; }

#bluetomato .point-section .point-area .point-contents-img { width: 280px; border-radius: 10px; overflow: hidden; position: relative; }

#bluetomato .point-section .point-area .point-contents-img img { width: 100%; }

#bluetomato .point-section .foodLoss { background: url(../images/bluetomato/foodLoss-bg.jpg) no-repeat top center; }

#bluetomato .point-section .collaboration { background: url(../images/bluetomato/collaboration-bg.jpg) no-repeat top center; }

#bluetomato .point-section .koji_tomato { background: url(../images/bluetomato/koji_tomato-bg.jpg) no-repeat top center; }

#bluetomato .point-section .koji_tomato .point-contents-img { overflow: visible; }

#bluetomato .point-section .koji_tomato .package { width: 137px; left: 25px; top: -88px; }

#bluetomato .point-section .koji_tomato .tomato { width: 149px; right: 0; top: 38px; margin-right: -9px; }

#bluetomato .recipe-section { padding-bottom: 80px; background: #f1f2f4; }

#bluetomato .recipe-section img { width: 100%; }

#bluetomato .recipe-section .recipe-kv { padding-top: 120px; height: 500px; color: #fff; background: url(../images/bluetomato/recipe-bg.jpg) no-repeat center center; background-size: cover; box-sizing: border-box; }

#bluetomato .recipe-section .recipe-kv h2 { line-height: 1; }

#bluetomato .recipe-section .recipe-kv span { display: block; }

#bluetomato .recipe-section .recipe-kv-title01 { margin-left: 200px; width: 255px; }

#bluetomato .recipe-section .recipe-kv-title02 { margin: 5px auto 8px; width: 410px; }

#bluetomato .recipe-section .recipe-kv-title03 { margin: auto; width: 190px; }

#bluetomato .recipe-section .recipe-wrap { margin-top: -100px; background: #fff; }

#bluetomato .recipe-section .nav-section { padding: 25px 5px 68px; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; background: #fff; }

#bluetomato .recipe-section .nav-section li { position: relative; }

#bluetomato .recipe-section .nav-section li + li::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 70%; background: #ccc; }

#bluetomato .recipe-section .nav-section li::after { content: ""; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-top: 8px solid #4b2f2f; border-right: 7px solid transparent; border-left: 7px solid transparent; }

#bluetomato .recipe-section .nav-section li:first-of-type { width: 20.5%; }

#bluetomato .recipe-section .nav-section li:nth-child(2) { width: 17.5%; }

#bluetomato .recipe-section .nav-section li:nth-child(3) { width: 23%; }

#bluetomato .recipe-section .nav-section li:nth-child(4) { width: 20%; }

#bluetomato .recipe-section .nav-section li:nth-child(5) { width: 19%; }

#bluetomato .recipe-section .nav-section a { padding: 5px 0 20px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; box-sizing: border-box; height: 65px; text-align: center; line-height: 1.2; color: #4b2f2f; font-size: 16px; }

#bluetomato .recipe-section .recipe-whiteArea { padding: 0 10px 10px 10px; }

#bluetomato .recipe-section .recipe-contents { padding-top: 40px; background: #f0f4eb; }

#bluetomato .recipe-section .recipe-contents img { width: 100%; }

#bluetomato .recipe-section .recipe-contents:nth-of-type(even) .material-img { margin-left: 260px; }

#bluetomato .recipe-section .recipe-contents:nth-of-type(even) .material-contents { left: 20px; right: auto; }

#bluetomato .recipe-section .recipe-contents#recipe02 { padding-top: 87px; }

#bluetomato .recipe-section .recipe-contents#recipe02 .material-contents { top: 35px; }

#bluetomato .recipe-section .recipe-contents#recipe03 { padding-top: 85px; }

#bluetomato .recipe-section .recipe-contents#recipe03 .material-contents { top: 47px; }

#bluetomato .recipe-section .recipe-contents#recipe04 { padding-top: 80px; }

#bluetomato .recipe-section .recipe-contents#recipe04 .material-contents { top: 33px; }

#bluetomato .recipe-section .recipe-contents#recipe05 { padding: 80px 0 40px; }

#bluetomato .recipe-section .recipe-contents#recipe05 .material-contents { top: 50px; }

#bluetomato .recipe-section .recipe-contents h3 { margin-bottom: 26px; font-size: 28px; color: #006600; font-weight: bold; line-height: 1.2; }

#bluetomato .recipe-section .material { position: relative; }

#bluetomato .recipe-section .material-img { width: 680px; }

#bluetomato .recipe-section .material-contents { padding: 35px 40px 40px; right: 20px; top: 17px; width: 380px; position: absolute; background: url(../images/bluetomato/material-bg.png) repeat center center; color: #4b2f2f; box-sizing: border-box; box-shadow: 5px 4px 10px 5px rgba(255, 255, 255, 0.2); }

#bluetomato .recipe-section .recipe-title { margin-bottom: 30px; padding-bottom: 12px; font-size: 16px; font-weight: 600; padding-left: 40px; line-height: 1; border-bottom: 2px solid #4b2f2f; position: relative; }

#bluetomato .recipe-section .recipe-title span { font-size: 14px; }

#bluetomato .recipe-section .recipe-title::after { content: ""; background: url(../images/bluetomato/icon-ingredients.svg) no-repeat center center; background-size: cover; width: 32px; height: 17px; position: absolute; left: 0; top: 0; }

#bluetomato .recipe-section .greenCircle { font-size: 14px; }

#bluetomato .recipe-section .greenCircle li { padding-left: 20px; line-height: 1; position: relative; }

#bluetomato .recipe-section .greenCircle li::before { content: "●"; color: #006600; font-size: 7px; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }

#bluetomato .recipe-section .greenCircle li + li { margin-top: 10px; }

#bluetomato .recipe-section .greenCircle + .greenCircle { margin-top: 35px; }

#bluetomato .recipe-section .make { margin: 50px 60px 0; }

#bluetomato .recipe-section .make .recipe-title { margin-bottom: 27px; padding-bottom: 8px; }

#bluetomato .recipe-section .make .recipe-title::after { background: url(../images/bluetomato/icon-make.svg) no-repeat center center; background-size: cover; width: 23px; height: 34px; top: -14px; left: 5px; }

#bluetomato .recipe-section .makeNumber { font-size: 16px; color: #4b2f2f; }

#bluetomato .recipe-section .makeNumber li { padding-left: 33px; position: relative; }

#bluetomato .recipe-section .makeNumber li + li { margin-top: 15px; }

#bluetomato .recipe-section .makeNumber li::after { content: ""; position: absolute; background: url(../images/bluetomato/number-1.svg) no-repeat center center; left: 3px; top: 0; width: 12px; height: 25px; }

#bluetomato .recipe-section .makeNumber li:nth-of-type(2)::after { background: url(../images/bluetomato/number-2.svg) no-repeat center center; width: 16px; }

#bluetomato .recipe-section .makeNumber li:nth-of-type(3)::after { background: url(../images/bluetomato/number-3.svg) no-repeat center center; width: 16px; }

#bluetomato .recipe-section .makeNumber li:nth-of-type(4)::after { background: url(../images/bluetomato/number-4.svg) no-repeat center center; width: 19px; height: 24px; }

#bluetomato .recipe-section .makeNumber li:nth-of-type(5)::after { background: url(../images/bluetomato/number-5.svg) no-repeat center center; width: 16px; }

#bluetomato .recipe-section .makeNumber li:nth-of-type(6)::after { background: url(../images/bluetomato/number-6.svg) no-repeat center center; width: 17px; }

#bluetomato .recipe-section .makeNumber li:nth-of-type(7)::after { background: url(../images/bluetomato/number-7.svg) no-repeat center center; width: 17px; height: 24px; }

#bluetomato .recipe-section .makeNumber li:nth-of-type(8)::after { background: url(../images/bluetomato/number-8.svg) no-repeat center center; width: 17px; }

#bluetomato .recipe-section .makeNumber li:nth-of-type(9)::after { background: url(../images/bluetomato/number-9.svg) no-repeat center center; width: 17px; height: 26px; }

#bluetomato .bluetomato_pagetop { padding-bottom: 40px; text-align: center; background: #f1f2f4; }

#bluetomato .pagetop { display: none; }

#bluetomato .pc-hidden { display: none; }

#bluetomato .sp-hidden { display: block; }

@media only screen and (max-width: 750px) { #contents { width: 100%; } #bluetomato { overflow: hidden; font-family: "メイリオ", Meiryo, "小塚ゴシック Pro L", "Kozuka Gothic Pro L", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } #bluetomato img { width: 100%; vertical-align: bottom; } #bluetomato .inner-wrap { margin: 0 auto; padding: 0 5.3333333333%; width: 100%; position: relative; } #bluetomato a { text-decoration: none; -webkit-transition: .5s; transition: .5s; } #bluetomato a:hover { color: #000; -webkit-transition: .5s; transition: .5s; opacity: .7; } #bluetomato a:hover p { opacity: .7; -webkit-transition: .5s; transition: .5s; } #bluetomato .point-img { position: absolute; } #bluetomato .mainvisual-section { padding: 19.3333333333% 0 25.3333333333%; color: #fff; background: url(../images/bluetomato/kv-bg-sp.jpg) no-repeat center center; background-size: cover; box-sizing: border-box; height: auto; } #bluetomato .mainvisual-section .inner-wrap { padding: 0 16.6666666667%; } #bluetomato .mainvisual-section .title { margin: auto; width: 100%; } #bluetomato .mainvisual-section .package { top: 0; left: 0; padding: 18.9333333333% 76.6666666667% 0 1.3333333333%; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } #bluetomato .mainvisual-section .tomato { margin-right: 0; top: 0; left: 0; padding: 47.6% 0 0 54.5333333333%; } #bluetomato .mainvisual-section .tomato img { position: relative; right: -6.5em; } #bluetomato .point-section { background: #f1f2f4; padding: 16% 0 21.3333333333%; } #bluetomato .point-section .banner-area { margin-bottom: 17.9104477612%; display: block; } #bluetomato .point-section .point-area { margin: 0 2.6666666667%; padding: 26.6666666667% 2.6666666667% 0 2.6666666667%; position: relative; } #bluetomato .point-section .point-area + .point-area { margin-top: 10.2666666667%; } #bluetomato .point-section .point-area .inner-wrap { background: #fff; padding: 8.2089552239% 5.9701492537% 5.9701492537%; color: #4b2f2f; } #bluetomato .point-section .point-area h2 { margin-bottom: 5.4237288136%; padding-bottom: 6.7796610169%; font-size: 7.2vw; font-family: "Kaisei Opti", serif; position: relative; line-height: 1.1; } #bluetomato .point-section .point-area h2::after { content: ""; background: url(../images/bluetomato/under-bar.jpg) no-repeat; background-size: cover; width: 100%; height: 1vw; position: absolute; left: 0; bottom: 0; } #bluetomato .point-section .point-area .point-contents { display: block; } #bluetomato .point-section .point-area .point-contents-text { margin: 0; font-size: 4.2666666667vw; line-height: 1.5; width: 100%; } #bluetomato .point-section .point-area .point-contents-text small { margin: 2px 0 0px; display: block; font-size: 3.2vw; } #bluetomato .point-section .point-area .point-contents-text p + p { margin-top: 8.4745762712%; } #bluetomato .point-section .point-area .point-contents-img { margin-top: 5.0847457627%; width: 100%; border-radius: 10px; overflow: hidden; position: relative; } #bluetomato .point-section .point-area .point-contents-img img { width: 100%; } #bluetomato .point-section .foodLoss { background: url(../images/bluetomato/foodLoss-bg-sp.jpg) no-repeat top center; background-size: contain; } #bluetomato .point-section .collaboration { background: url(../images/bluetomato/collaboration-bg-sp.jpg) no-repeat top center; background-size: contain; } #bluetomato .point-section .koji_tomato { background: url(../images/bluetomato/koji_tomato-bg-sp.jpg) no-repeat top center; background-size: contain; } #bluetomato .point-section .koji_tomato .point-contents-img { overflow: visible; } #bluetomato .point-section .koji_tomato .point-img { position: relative; left: auto; top: auto; } #bluetomato .point-section .koji_tomato .package { padding: 1.6949152542% 0 0 22.7118644068%; display: inline-block; width: 50.5%; } #bluetomato .point-section .koji_tomato .tomato { margin-left: -6.6101694915%; margin-right: 0; display: inline-block; width: 31%; } #bluetomato .point-section .koji_tomato .tomato img { position: relative; top: -1em; } #bluetomato .recipe-section { padding-bottom: 12.6666666667%; } #bluetomato .recipe-section img { width: 100%; } #bluetomato .recipe-section .recipe-kv { padding: 22% 0 27.3333333333%; background: url(../images/bluetomato/recipe-bg-sp.jpg) no-repeat center center; background-size: cover; box-sizing: border-box; height: auto; } #bluetomato .recipe-section .recipe-kv h2 { line-height: 1; } #bluetomato .recipe-section .recipe-kv span { display: block; } #bluetomato .recipe-section .recipe-kv-title01 { margin-left: 0; width: 50%; } #bluetomato .recipe-section .recipe-kv-title02 { margin: 1.6949152542% auto 2.6666666667%; width: 88%; } #bluetomato .recipe-section .recipe-kv-title03 { margin: auto; width: 49%; } #bluetomato .recipe-section .recipe-wrap { margin: -5.3333333333% 2.6666666667% 0 2.6666666667%; padding: 0 0 2.6666666667% 0; width: auto; } #bluetomato .recipe-section .nav-section { padding: 0; display: block; box-sizing: border-box; } #bluetomato .recipe-section .nav-section li { position: relative; width: 100%; display: block; } #bluetomato .recipe-section .nav-section li::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #ccc; } #bluetomato .recipe-section .nav-section li::after { content: ""; position: absolute; top: 50%; right: 6%; left: auto; bottom: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-top: 1.2vw solid #4b2f2f; border-right: 1.2vw solid transparent; border-left: 1.2vw solid transparent; } #bluetomato .recipe-section .nav-section li + li::before { content: ""; position: absolute; left: 0; bottom: 0; top: auto; width: 100%; height: 1px; background: #ccc; } #bluetomato .recipe-section .nav-section li:first-of-type { width: 100%; } #bluetomato .recipe-section .nav-section li:nth-child(2) { width: 100%; } #bluetomato .recipe-section .nav-section li:nth-child(3) { width: 100%; } #bluetomato .recipe-section .nav-section li:nth-child(4) { width: 100%; } #bluetomato .recipe-section .nav-section li:nth-child(5) { width: 100%; } #bluetomato .recipe-section .nav-section a { padding: 4.7887323944% 5.6338028169%; display: block; width: 100%; height: auto; text-align: left; line-height: 1.2; color: #4b2f2f; font-size: 3.7333333333vw; } #bluetomato .recipe-section .recipe-whiteArea { margin-top: 10.5633802817%; padding: 0 1.4084507042%; } #bluetomato .recipe-section .recipe-contents { margin: 0 1.4925373134%; background: #f0f4eb; } #bluetomato .recipe-section .recipe-contents img { width: 100%; } #bluetomato .recipe-section .recipe-contents:nth-of-type(even) .material-img { margin-left: 0; } #bluetomato .recipe-section .recipe-contents:nth-of-type(even) .material-contents { left: auto; right: auto; } #bluetomato .recipe-section .recipe-contents#recipe01 { padding-top: 0; padding-bottom: 16.4179104478%; } #bluetomato .recipe-section .recipe-contents#recipe02 { padding-top: 0; padding-bottom: 17.1641791045%; } #bluetomato .recipe-section .recipe-contents#recipe02 .material-contents { top: auto; } #bluetomato .recipe-section .recipe-contents#recipe03 { padding-top: 0; padding-bottom: 16.4179104478%; } #bluetomato .recipe-section .recipe-contents#recipe03 .material-contents { top: auto; } #bluetomato .recipe-section .recipe-contents#recipe04 { padding-top: 0; padding-bottom: 16.8656716418%; } #bluetomato .recipe-section .recipe-contents#recipe04 .material-contents { top: auto; } #bluetomato .recipe-section .recipe-contents#recipe05 { padding-top: 0; padding-bottom: 10.447761194%; } #bluetomato .recipe-section .recipe-contents#recipe05 .material-contents { top: auto; } #bluetomato .recipe-section .recipe-contents h3 { margin-bottom: 10%; font-size: 6.9333333333vw; color: #006600; font-weight: bold; line-height: 1.2; } #bluetomato .recipe-section .material { position: relative; } #bluetomato .recipe-section .material-img { width: 100%; } #bluetomato .recipe-section .material-contents { position: relative; margin: -5.9701492537% 2.9850746269% 0; padding: 8.9552238806% 5.9701492537%; right: 0; top: 0; width: auto; background: url(../images/bluetomato/material-bg.png) repeat center center; box-shadow: 5px 4px 10px 5px rgba(255, 255, 255, 0.2); } #bluetomato .recipe-section .recipe-title { margin-bottom: 11.8181818182%; padding: 0 0 3.6363636364% 14.5454545455%; font-size: 4.2666666667vw; font-weight: 600; line-height: 1; border-bottom: 2px solid #4b2f2f; position: relative; color: #4b2f2f; } #bluetomato .recipe-section .recipe-title span { font-size: 3.7333333333vw; font-weight: normal; } #bluetomato .recipe-section .recipe-title::after { content: ""; background: url(../images/bluetomato/icon-ingredients.svg) no-repeat center center; background-size: contain; width: 9vw; height: 4.2vw; position: absolute; left: 0; top: 0; } #bluetomato .recipe-section .greenCircle { font-size: 3.7333333333vw; } #bluetomato .recipe-section .greenCircle li { padding-left: 7.2727272727%; line-height: 1; position: relative; } #bluetomato .recipe-section .greenCircle li::before { content: "●"; color: #006600; font-size: 3.2vw; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #bluetomato .recipe-section .greenCircle li + li { margin-top: 3.6363636364%; } #bluetomato .recipe-section .greenCircle + .greenCircle { margin-top: 11.8181818182%; } #bluetomato .recipe-section .make { margin: 0; padding: 9.8507462687% 5.9701492537% 0 5.9701492537%; } #bluetomato .recipe-section .make .recipe-title { margin-bottom: 10.1694915254%; padding: 0 0 2.8813559322% 11.0169491525%; } #bluetomato .recipe-section .make .recipe-title::after { background: url(../images/bluetomato/icon-make.svg) no-repeat center center; background-size: contain; width: 9vw; height: 9.2vw; position: absolute; left: -0.5vw; top: -3.5vw; } #bluetomato .recipe-section .makeNumber { font-size: 4.2666666667vw; color: #4b2f2f; } #bluetomato .recipe-section .makeNumber li { padding-left: 10.1694915254%; position: relative; } #bluetomato .recipe-section .makeNumber li + li { margin-top: 5.0847457627%; } #bluetomato .recipe-section .makeNumber li::after { content: ""; position: absolute; background: url(../images/bluetomato/number-1.svg) no-repeat center center; background-size: contain; left: 0.25vw; top: -1vw; width: 4vw; height: 7.2vw; } #bluetomato .recipe-section .makeNumber li:nth-of-type(2)::after { background: url(../images/bluetomato/number-2.svg) no-repeat center center; background-size: contain; width: 4.5vw; } #bluetomato .recipe-section .makeNumber li:nth-of-type(3)::after { background: url(../images/bluetomato/number-3.svg) no-repeat center center; background-size: contain; width: 4.5vw; height: 7.5vw; } #bluetomato .recipe-section .makeNumber li:nth-of-type(4)::after { background: url(../images/bluetomato/number-4.svg) no-repeat center center; background-size: contain; width: 5vw; height: 7.2vw; } #bluetomato .recipe-section .makeNumber li:nth-of-type(5)::after { background: url(../images/bluetomato/number-5.svg) no-repeat center center; background-size: contain; width: 4.5vw; } #bluetomato .recipe-section .makeNumber li:nth-of-type(6)::after { background: url(../images/bluetomato/number-6.svg) no-repeat center center; background-size: contain; width: 4.5vw; } #bluetomato .recipe-section .makeNumber li:nth-of-type(7)::after { background: url(../images/bluetomato/number-7.svg) no-repeat center center; background-size: contain; width: 4.5vw; height: 7.2vw; } #bluetomato .recipe-section .makeNumber li:nth-of-type(8)::after { background: url(../images/bluetomato/number-8.svg) no-repeat center center; background-size: contain; width: 4.5vw; } #bluetomato .recipe-section .makeNumber li:nth-of-type(9)::after { background: url(../images/bluetomato/number-9.svg) no-repeat center center; background-size: contain; width: 4.5vw; height: 7.2vw; } #bluetomato .pc-hidden { display: block; } #bluetomato .sp-hidden { display: none; } #bluetomato .bluetomato_pagetop { display: none; } .pagetop { margin: 0; padding: 1em; } }