@charset "UTF-8";
/* gran meal
-------------------- */
.product-inner img {
    display: inline-block;
    width: 100%;
    height: auto;
    vertical-align: top
}
.productHeadBody {
    position: relative;
    width: min(100%, 980px);
    margin: auto;
    overflow: hidden
}
.productInfo {
    display: grid;
    grid-template-columns: 50% 50%;
    background: #d6a503 url("/assets/images/product/bg_info.jpg") left top / cover;
}
.granmeal .productInfo {
    padding-bottom: 3%;
    background: #e7d7c3 url("/assets/images/product/bg_info_granmeal.jpg") left top / cover
}
.granmeal .itemName {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding: .55em 1em .55em 0;
    font-size: 4.1vw;
    font-weight: bold;
    line-height: 1.34;
}
.granmeal .btnDetail {
    margin-top: 0;
}
.granmeal .itemName span {
    display: inline-block;
}
.granmeal .itemImg {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    margin-top: -18.5%;
}
.granmeal .itemImg img {
    display: block;
    width: 80%;
    margin-inline: auto;
    transform: translateX(2%);
}
.granmeal .itemLink {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}
.btnDetail {
    display: block;
    width: 87%;
    margin: 0.5em 0 1.2em
}
.granmeal-ichigo .productHead {
    background: #c7034d;
    background: linear-gradient(#c7034d 8%, #a0043f 90%)
}
.granmeal-nuts .productHead {
    background: #d8880b;
    background: linear-gradient(#d8880b 8%, #754901 90%)
}
.productName {
    width: 100%
}
.granmeal .productName {
    position: absolute;
    top: 0;
    left: 0;
}
.granmeal {
    background-color: #ede2d2;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}
.granmealWrap {
    width: 94.4%;
    margin: 0 auto 6%;
}
.granmealTtl {
    margin-bottom: 1em;
}
.granmealMaterial {
    display: grid;
    grid-template-rows: max-content max-content auto;
}
.granmealMaterial .granmealTtl {
    order: 1;
}
.granmealMaterial .granmealTxt {
    order: 3;
    padding: 0 1.2em;
    font-size: 4vw;
    line-height: 1.6;
    color: #663504;
}
.granmealMaterial .granmealImg {
    order: 2;
}
.granmealMaterial .granmealImg img {
    display: block;
    width: 66.35%;
    margin: 2% auto 5%;
    border-radius: .5em;
}
.granmealIngredients ul {
    display: grid;
    grid-gap: 1.3em;
    width: 98%;
    margin: 5.5% auto 11.4%;
}
.granmealIngredients li {
    display: grid;
    grid-template-columns: 44.5% auto;
    grid-gap: 3%;
}
.granmealIngredients li img {
    order: 1;
    margin-top: 3%;
    border-radius: .5em;
}
.granmealIngredients li dl {
    order: 2;
    font-size: 3.7333vw;
    font-feature-settings: "palt";
    color: #663504;
}
.granmealIngredients li dt {
    margin-bottom: .3em;
    padding-bottom: .2em;
    font-size: 1.191428571em;
    font-weight: bold;
    border-bottom: 1px dashed #cf9201;
}
.granmealIngredients span {
    display: inline-block;
}
.granmealSupport {
    margin-bottom: 10.4%;
}
.granmealSupport .granmealTtl {
    margin-bottom: 1.4em;
}
.granmealRrecommend ul {
    margin: 7% auto 7.5%;
}
.granmealRrecommend li:nth-child(1) {
    width: 77.97%;
    margin: 0 0 0 1%;
}
.granmealRrecommend li:nth-child(2) {
    width: 61.16%;
    margin: -7% -.8% 0 auto;
}
.granmealRrecommend li:nth-child(3) {
    margin: -17.8% 0 0;
    transform: translateX(-1.2%);
}
.granmealRecipe {
    display: flow-root;
}
.granmealRecipe .granmealTtl {
    width: 94.4%;
    margin: 0 auto 8.3%;
}
.granmeal-nuts .granmealRecipe .granmealTtl {
    margin: 0 auto 9.6%;
}
.granmealRecipeWrap {
    margin-bottom: 13.2%;
    padding-bottom: 11.2%;
    background: url("../images/product/granmeal-nuts/line.png") no-repeat bottom center / 100% auto;
}
.granmeal-ichigo .granmealRecipeWrap.recipe01 {
    margin-bottom: 11.2%;
}
.granmeal-ichigo .granmealRecipeWrap.recipe02 {
    margin-bottom: 9%;
    padding-bottom: 10.5%;
}
.granmeal-ichigo .granmealRecipeWrap.recipe03 {
    margin-bottom: 0;
    padding-bottom: 10%;
}
.granmeal-nuts .granmealRecipeWrap.recipe02 {
    margin-bottom: 1em;
    padding-bottom: 8%;
}
.granmeal .recipeMaterial {
    width: 70%;
    margin: 0 auto 14%;
    font-size: 3.7333vw;
    color: #663504;
}
.granmeal.granmeal-ichigo .recipe03 .recipeMaterial {
    margin-bottom: 16%
}
.granmeal.granmeal-nuts .recipe01 .recipeMaterial {
    margin-bottom: 18%
}
.granmeal.granmeal-nuts .recipe02 .recipeMaterial {
    margin-bottom: 16%
}
.granmeal .recipeMaterialTtl {
    margin-bottom: .4em;
    font-size: 1.09em;
    font-weight: bold;
    letter-spacing: .15em;
}
.granmeal .recipeMaterialTtl small {
    display: inline-block;
    font-size: .75em;
}
.granmeal .recipeMaterialLabel {
    margin-bottom: .5em;
    font-feature-settings: "palt";
}
.granmeal .recipeMaterial ul {
    margin-bottom: 2.5em;
    line-height: 1.3;
}
.granmeal .recipeMaterial li {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: .58em;
    background: url("../images/product/granmeal-nuts/dot.png") repeat-x left bottom .5em / auto .22em;
}
.granmeal .recipeMaterial li > span {
    position: relative;
    font-feature-settings: "palt";
    background: #ede2d2;
}
.granmeal .recipeMaterial li > span:first-child {
    padding-right: .2em;
}
.granmeal .recipeMaterial li > span:last-child {
    padding-left: .32em;
}
.granmeal .recipeMaterial li > span span {
    display: block;
}
.howTo {
    position: relative;
    display: flow-root;
    padding-bottom: 13%;
    font-size: 3.7307vw;
    font-feature-settings: "palt";
    color: #663504;
}
.granmeal-ichigo .recipe01 .howTo {
    padding-bottom: 3%;
    background: #edcec5 url("../images/product/granmeal-ichigo/recipe01_pct.png") no-repeat bottom 26.5% right 11.5% / 15.6% auto;
}
.granmeal-ichigo .recipe02 .howTo {
    padding-bottom: 9%;
    background: #edcec5 url("../images/product/granmeal-ichigo/recipe02_pct.png") no-repeat bottom 10.5% right 8.8% / 11.8% auto;
}
.granmeal-ichigo .recipe03 .howTo {
    padding-bottom: 4%;
    background: #edcec5 url("../images/product/granmeal-ichigo/recipe03_pct.png") no-repeat bottom 30.6% right 11.2% / 14.5% auto;
}
.granmeal-nuts .recipe01 .howTo {
    padding-top: 13.5%;
    background: #d6e0be url("../images/product/granmeal-nuts/recipe01_pct.png") no-repeat bottom 2.2% right 8.8% / 16.5% auto;
}
.granmeal-nuts .recipe02 .howTo {
    padding-bottom: 14%;
    background: #d6e0be url("../images/product/granmeal-nuts/recipe02_pct.png") no-repeat bottom 5.2% right 13.8% / 13.5% auto;
}
.granmeal-nuts .recipe01 .howTo li:nth-child(4) {
    margin-top: 15%;
}
.howToTtl {
    position: absolute;
    top: 0;
    left: 0;
    width: 34.27%;
    margin: -8.5% 0 -2% 2.5%;
}
.howToLabel {
    margin-left: .5em;
}
.granmeal-nuts .howToLabel {
    font-size: 1em;
    color: #5c8202;
}
.granmeal .howTo ol {
    width: 92%;
    margin: 2.72em auto 1.6em;
    padding: 0;
    color: #663504;
}
.granmeal.granmeal-ichigo .recipe02 .howTo ol {
    margin-top: 2.9em;
}
.granmeal.granmeal-nuts .recipe01 .howTo ol {
    margin: 1.1em auto 1.6em;
}
.granmeal.granmeal-nuts .recipe02 .howTo ol {
    margin: 3.4em auto 1.6em;
}
.granmeal .howTo li {
    display: grid;
    grid-template-columns: 1.27em auto;
    grid-gap: .55em;
}
.granmeal .howTo li:not(:last-child) {
    margin-bottom: 1.8em;
}
.granmeal .howTo li img {
    display: block;
    margin-top: .1em;
}
.granmeal .howTo li span {
    display: inline-block;
    transform: translateY(-.1em);
}
.granmeal .howTo .granmealNotes {
    width: 80%;
    margin: 3.5em 3em 1em 1.3em;
    line-height: 1.55;
}
.granmeal.granmeal-ichigo .recipe03 .howTo .granmealNotes {
    margin-top: 2.1em;
}
.recipeArrange {
    position: relative;
    display: grid;
}
.recipeArrangeTtl {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    margin: 13% 0 0 4%;
    width: 39.6%;
}
.recipeArrangeImg {
    order: 1;
    position: relative;
    z-index: 1;
    width: 62.4%;
    margin: 4% 3% 0 auto;
}
.recipeArrangeTxt {
    order: 2;
    display: grid;
    justify-content: center;
    width: 77.87%;
    margin: -.7em auto 0;
    padding: .75em 1.5em;
    box-sizing: border-box;
    font-size: 4vw;
    line-height: 1.55;
    color: #663504;
    border: 2px dashed #8f2136;
}
.recipeArrangeTxt span {
    display: inline-block;
}
.granmealNotes {
    width: 92%;
    margin: 1.8em auto 3.5em;
    font-size: 3.2vw;
    color: #663504;
}
.granmealNotes small {
    display: grid;
    grid-template-columns: 1em auto;
    font-size: 1em;
}
.granmealNotes span {
    display: inline-block;
}
@media only screen and (min-width: 641px) {
    .granmeal .btnDetail {
        width: min(39%, 12em);
    }
    .granmeal .productInfo {
        padding-bottom: 1.5%;
        background: #e7d7c3 url("/assets/images/product/bg_info_granmeal_pc.jpg") left top / cover
    }
    .granmeal .itemName {
        padding: 1.7em 1em 1.5em 0;
        font-size: min(1.9388vw, 19px);
    }
    .granmeal .itemImg {
        margin-top: -9.3%;
    }
    .granmeal .itemImg img {
        width: 41.5%;
        margin: 0 5.3% 0 auto;
        transform: translateX(0);
    }
    .productInfo {
        grid-template-columns: 49% 51%;
        background: #d6a503 url("/assets/images/product/bg_info_pc.jpg") left top;
        background-size: cover
    }
    .btnDetail {
        width: 12em;
        margin: 0.8em 0 1.5em
    }
    .granmealTtl {
        margin-bottom: 1.5em;
    }
    .granmealWrap {
        width: 100%;
    }
    .granmealIntro {
        display: flow-root;
        width: min(100%, 980px);
        margin: 0 auto;
    }
    .granmealIntroTtl {
        width: 100%;
        margin: 0 auto;
    }
    .granmealIntroTxt {
        width: min(100%, 980px);
        margin: 0 auto;
    }
    .granmealMaterial .granmealTxt {
        padding: 0 .8em;
        font-size: min(1.8764vw, 17px);
        line-height: 1.4;
    }
    .granmealMaterial .granmealTxt span {
        display: inline-block;
    }
    .granmealMaterial .granmealImg img {
        width: 93.5%;
        margin: 0 auto 5.2%;
    }
    .granmealIngredients ul {
        grid-gap: 2.3em;
        width: 94%;
        margin: 4.4% auto 11.5%;
    }
    .granmealIngredients li {
        grid-template-columns: 42.5% auto;
        grid-gap: 1.1em;
    }
    .granmealIngredients li img {
        margin-top: 1%;
    }
    .granmealIngredients li dl {
        width: 90%;
        font-size: min(1.65vw, 17px);
        line-height: 1.4;
    }
    .granmealIngredients li dt {
        margin-bottom: .3em;
        padding-bottom: .1em;
        border-bottom: 2px dashed #cf9201;
    }
    .granmealColumn {
        display: grid;
        grid-template-columns: 41.55% auto;
        grid-gap: 1.8em 1.8em;
        width: min(92.45%, 906px);
        margin: 0 auto;
    }
    .granmealMaterial {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        margin-bottom: 1.4em;
    }
    .granmealIngredients {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }
    .granmealSupport {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .granmealSupport .granmealTtl {
        margin-bottom: 1.3em;
    }
    .granmealRrecommend {
        width: min(100%, 992px);
        margin: 1em auto;
    }
    .granmealRrecommend ul {
        position: relative;
        margin: 4.3% auto 3.6%;
    }
    .granmealRrecommend ul::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 26.25%;
        height: 0;
        margin: 1.6% 0 0 4.7%;
        padding-top: 21%;
        background: url("../images/product/granmeal-nuts/recommendation_txt01_s_pc.png") no-repeat top left / contain;
    }
    .granmealRrecommend li:nth-child(1) {
        position: relative;
        z-index: 2;
        width: 32.36%;
        margin: 0 0 0 3.6%;
    }
    .granmealRrecommend li:nth-child(2) {
        position: relative;
        z-index: 1;
        width: 28.63%;
        margin: -1.9% 0 0 14.6%;
    }
    .granmealRrecommend li:nth-child(3) {
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        width: 62.4%;
        margin: -1.8% 0 0 34.7%;
        transform: translateX(0);
    }
    .granmeal-nuts .granmealRecipe .granmealTtl {
        margin: 0 auto 4.9%;
    }
    .granmeal .recipeMaterial {
        font-size: min(1.9694vw, 18px);
    }
    .recipeWrap02 {
        display: grid;
        grid-template-columns: 50.4% auto;
        grid-gap: 0 1.8em;
        margin: 0 0 1.6em;
    }
    .granmeal-nuts .recipe01 .recipeWrap02 {
        display: block
    }
    .granmeal-nuts .recipe02 .recipeWrap02 {
        margin-bottom: 2.5%;
    }
    .granmeal-nuts .recipe01 .recipeMaterial {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 0 1.8em;
        margin: 0 0 1.6em;
    }
    .granmeal.granmeal-nuts .recipe01 .recipeMaterial {
        margin-bottom: 3.5%
    }
    .granmeal.granmeal-ichigo .recipe03 .recipeMaterial {
        margin-bottom: 8.5%
    }
    .granmeal.granmeal-nuts .recipe02 .recipeMaterial {
        margin-bottom: 8%
    }
    .granmeal-nuts .recipe01 .recipeMaterial ul {
        width: 94%;
        margin-bottom: 1.5em;
    }
    .granmeal-nuts .recipe01 .recipeMaterial .recipeMaterialLabel:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .granmeal-nuts .recipe01 .recipeMaterial ul:nth-child(3) {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .granmeal-nuts .recipe01 .recipeMaterial .recipeMaterialLabel:nth-child(4) {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .granmeal-nuts .recipe01 .recipeMaterial ul:nth-child(5) {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    .granmeal-nuts .recipe01 .recipeMaterial .recipeMaterialLabel:nth-child(6) {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        transform: translateY(2em);
    }
    .granmeal-nuts .recipe01 .recipeMaterial ul:nth-child(7) {
        grid-column: 2 / 3;
        grid-row: 5 / 6;
        transform: translateY(2em);
    }
    .granmealRecipeWrap {
        margin-bottom: 6.3%;
        padding-bottom: 5.2%;
        background: url(../images/product/granmeal-nuts/line_pc.png) no-repeat bottom center / 100% auto;
    }
    .granmeal-ichigo .granmealRecipeWrap.recipe01 {
        margin-bottom: 4.8%;
    }
    .granmeal-ichigo .granmealRecipeWrap.recipe02 {
        margin-bottom: 4.4%;
        padding-bottom: 7%;
    }
    .granmeal-ichigo .granmealRecipeWrap.recipe03 {
        margin-bottom: 2.5em;
        padding-bottom: 6%;
    }
    .granmeal-nuts .granmealRecipeWrap.recipe02 {
        margin-bottom: 2.7em;
        padding-bottom: 6.3%;
    }
    .granmeal .recipeMaterial ul {
        line-height: 1.7;
    }
    .granmeal .recipeMaterialTtl small {
        font-size: .8em;
    }
    .granmeal .recipeMaterial li {
        margin-bottom: .55em;
    }
    .granmeal.granmeal-nuts .recipeMaterial li {
        margin-bottom: .3em;
    }
    .granmealRecipe {
        width: min(100%, 992px);
        margin: .8em auto;
    }
    .granmealRecipe .granmealTtl {
        width: 100%;
        margin: 0 auto 4.7%;
    }
    .granmeal-ichigo .granmealRecipe .granmealTtl {
        margin: 0 auto 4%;
    }
    .recipeWrap02 {
        width: 90%;
        margin: 5% auto 0;
    }
    .recipe01 .recipeWrap02 {
        position: relative;
        margin: 4.5% auto 0;
    }
    .granmeal-ichigo .recipe01 .recipeWrap02 {
        margin: 5.4% auto 0;
    }
    .granmeal-ichigo .recipe02 .recipeWrap02 {
        grid-template-columns: 47% auto;
        margin: 7.8% auto 5%;
    }
    .granmeal-ichigo .recipe03 .recipeWrap02 {
        margin: 5.4% auto 0;
    }
    .granmeal-ichigo .recipe03 .recipeWrap02 .recipePhoto {
        order: 2;
        margin: -6% -.5% 0 0;
    }
    .recipe01 .recipePhoto {
        position: absolute;
        top: 0;
        right: 0;
        width: 46.4%;
        margin: -.1% .9% 0 0;
    }
    .granmeal-ichigo .recipe01 .recipePhoto {
        margin: -2.8% -.3% 0 0;
    }
    .granmeal-ichigo .recipe02 .recipePhoto {
        width: 98.5%;
        margin: -12.8% 0 0 -4%;
    }
    .granmeal .recipeMaterial {
        width: 100%;
        margin: 0 0 9%;
    }
    .granmealRecipeName {
        width: min(59.68%, 592px);
        margin: 0 auto;
    }
    .granmeal-ichigo .granmealRecipeName {
        width: min(60.4838%, 600px);
        margin: 0 auto;
    }
    .howTo {
        width: 91.5%;
        margin: 0 auto;
        padding-bottom: 2.2%;
        font-size: min(1.9694vw, 18px);
    }
    .granmeal-ichigo .recipe01 .howTo {
        padding-bottom: .8%;
        background: #edcec5 url("../images/product/granmeal-ichigo/recipe01_pct.png") no-repeat bottom 16.5% right 4.8% / 7.4% auto;
    }
    .granmeal-ichigo .recipe02 .howTo {
        padding-bottom: 4.5%;
        background: #edcec5 url("../images/product/granmeal-ichigo/recipe02_pct.png") no-repeat bottom 8.5% right 8.8% / 6% auto;
    }
    .granmeal-nuts .recipe01 .howTo {
        padding-top: 0;
        background: #d6e0be url("../images/product/granmeal-nuts/recipe01_pct.png") no-repeat bottom 15.2% right 8.8% / 12% auto;
    }
    .granmeal-nuts .recipe02 .howTo {
        padding-bottom: 7.8%;
        background: #d6e0be url("../images/product/granmeal-nuts/recipe02_pct.png") no-repeat bottom 8.0% right 7.4% / 7.6% auto;
    }
    .granmeal-ichigo .recipe03 .howTo {
        padding-bottom: .8%;
        background: #edcec5 url("../images/product/granmeal-ichigo/recipe03_pct.png") no-repeat bottom 30.0% right 5.0% / 9.0% auto;
    }
    .granmeal .howTo ol {
        width: 83.2%;
        margin: 2.2em auto 1.6em;
    }
    .granmeal.granmeal-ichigo .recipe02 .howTo ol {
        width: 88%;
        margin: 2.3em auto 1.6em 4.1em;
    }
    .granmeal.granmeal-nuts .recipe01 .howTo ol {
        width: auto;
    }
    .granmeal.granmeal-nuts .recipe02 .howTo ol {
        margin: 3.5em auto 1.6em;
        width: 90.0%;
    }
    .howToTtl {
        width: 19%;
        margin: 0 0 -2.5% -.3%;
        transform: translateY(-59%);
    }
    .granmeal-nuts .recipe02 .howToTtl {
        margin-bottom: -2%;
    }
    .howToLabel {
        margin-left: 2.5em;
    }
    .granmeal.granmeal-nuts .recipe01 .howToLabel {
        margin-top: 3em;
    }
    .granmeal.granmeal-nuts .recipe01 ol + .howToLabel {
        margin-top: 1em;
    }
    .granmeal.granmeal-nuts .recipe01 .howTo ol {
        margin: .3em 2em 1.6em 2.5em;
    }
    .granmeal .howTo li {
        grid-template-columns: 1.1em auto;
        grid-gap: .7em;
    }
    .granmeal .howTo li:not(:last-child) {
        margin-bottom: 1.0em;
    }
    .granmeal.granmeal-nuts .recipe01 .howTo li:nth-child(4) {
        margin-top: 2em;
    }
    .granmeal .howTo .granmealNotes {
        margin: -.75em 3em 1em 7.2em;
    }
    .granmeal.granmeal-ichigo .recipe03 .howTo .granmealNotes {
        margin-top: -.6em;
    }
    .recipeArrangeTtl {
        right: 0;
        left: inherit;
        width: 22%;
        margin: 2.4% 2% 0 auto;
    }
    .recipeArrangeImg {
        position: absolute;
        top: 0;
        left: 0;
        width: 35.3%;
        margin: 2% auto 0 3.2%;
        transform: rotate(-16.2deg);
    }
    .recipeArrangeTxt {
        display: block;
        width: 80%;
        margin: 4.5em 4% 4.2em auto;
        padding: 1.6em 1.6em 1.6em 26%;
        font-size: min(1.8145vw, 18px);
        line-height: 1.8;
        border: none;
        background-image: repeating-linear-gradient(90deg, #8f2136, #8f2136 14px, transparent 14px, transparent 22px), repeating-linear-gradient(180deg, #8f2136, #8f2136 14px, transparent 14px, transparent 22px), repeating-linear-gradient(90deg, #8f2136, #8f2136 14px, transparent 14px, transparent 22px);
        background-position: left top, right top, left bottom;
        background-repeat: repeat-x, repeat-y, repeat-x;
        background-size: 100% 3px, 3px 100%, 100% 3px;
    }
    .granmealNotes {
        width: 90%;
        margin: 2.5em auto 5.2em;
        font-size: min(1.5121vw, 15px);
    }
    .granmealNotes br {
        display: none;
    }
}
@media (hover: hover) {
    .btnDetail a {
        transition: opacity 0.3s
    }
    .btnDetail a:hover {
        opacity: 0.7
    }
}