@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: 46% 1fr;
    background: #e7d7c3 url("/assets/images/product/granola-kitchen-roast/intro-bg-sp.jpg") center / cover;
}

@media (min-width: 641px) {
    .productInfo {
        grid-template-columns: 49% 51%;
        padding-bottom: 1.5%;
        background: #e7d7c3 url("/assets/images/product/granola-kitchen-roast/intro-bg.jpg") center / cover;
    }
}


.granola-kitchen .itemName {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    padding: 1em .5em 1em 0;
    font-size: 3.86666vw;
    font-weight: bold;
    line-height: 1.31034;
    letter-spacing: 0.05em;
    font-feature-settings: "palt";
}
.granola-kitchen-roast.granola-kitchen .itemName {
    padding-right: 1em;
}

.granola-kitchen .btnDetail {
    margin-top: 0;
}

.granola-kitchen .itemName span {
    display: inline-block;
}

.granola-kitchen .itemImg {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    margin-top: -19.5%;
}

.granola-kitchen .itemImg img {
    display: block;
    position: relative;
    left: -2%;
    width: 87%;
    margin-inline: auto;
}

.granola-kitchen .itemLink {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

.btnDetail {
    display: block;
    width: 80%;
    margin: .5em 0 1.2em
}

.granola-kitchen-cacao .productHead {
    background: #fff9de;
    background: linear-gradient(#fff9de 31%, #fcdeb3 90%)
}

.granola-kitchen-roast .productHead {
    background: #fdcc00;
    background: linear-gradient(#fdcc00 26%, #c15800 92%)
}

.productName {
    width: 100%
}

.granola-kitchen {
    background-color: #f6f0e7;
    overflow-wrap: anywhere;
    word-break: normal;
    line-break: strict;
}

.granola-kitchenWrap {
    width: 94.4%;
    margin: 0 auto 6%;
}

.granola-kitchenTtl {
    margin-bottom: 1em;
}

.granola-kitchenMaterial {
    display: grid;
    grid-template-rows: max-content max-content auto;
}

.granola-kitchenMaterial .granola-kitchenTtl {
    order: 1;
}

.granola-kitchenMaterial .granola-kitchenTxt {
    order: 3;
    width: 90%;
    margin-inline: auto;
    padding: 0 0 2%;
    font-size: 4vw;
    line-height: 1.6;
    color: #663504;
}

.granola-kitchenMaterial .granola-kitchenImg {
    order: 2;
}

.granola-kitchenMaterial .granola-kitchenImg img {
    display: block;
    width: 66.35%;
    margin: 1.2% auto 5%;
    border-radius: .5em;
}

.granola-kitchenIngredients ul {
    display: grid;
    grid-gap: 1.3em;
    width: 98%;
    margin: 4.5% auto 13%;
}

.granola-kitchenIngredients li {
    display: grid;
    grid-template-columns: 44.5% auto;
    grid-gap: 3%;
}

.granola-kitchenIngredients li img {
    order: 1;
    margin-top: 3%;
    border-radius: .5em;
}

.granola-kitchenIngredients li dl {
    order: 2;
    font-size: 3.7333vw;
    font-feature-settings: "palt";
    color: #663504;
}

.granola-kitchenIngredients li dt {
    margin-bottom: .3em;
    padding-bottom: .2em;
    font-size: 1.191428571em;
    font-weight: bold;
    border-bottom: 1px dashed #cf9201;
}

.granola-kitchenIngredients span {
    display: inline-block;
}

/* 充実の健康サポート */
.granola-kitchenSupport {
    margin-bottom: 13.4%;
}

.granola-kitchenSupport .granola-kitchenTtl {
    margin-bottom: 1.3em;
}

.nutritional-support-txt {
    width: 98%;
    margin-inline: auto;
}

/* おすすめの食べ方 */
.granola-kitchenRrecommend ul {
    margin: 7% auto 7.5%;
}

.granola-kitchenRrecommend li:nth-child(1) {
    width: 77.97%;
    margin: 0 0 0 1%;
}

.granola-kitchenRrecommend li:nth-child(2) {
    width: 61.16%;
    margin: -7% -.8% 0 auto;
}

.granola-kitchenRrecommend li:nth-child(3) {
    width: 54.2%;
    margin: -17.8% 0 0;
    transform: translateX(-3%);
}

.granola-kitchen-cacao .granola-kitchenRrecommend li:nth-child(3) {
    transform: translateX(-1%);
}

.eating-tips-photo {
    width: 69.9%;
    margin: -14% -1.8% 14% auto;
}

.granola-kitchen-cacao .eating-tips-photo {
    width: 66.9%;
    margin: -17% -.9% 15.5% auto;
}

.granola-kitchenRecipe {
    display: flow-root;
}

.granola-kitchenRecipe .granola-kitchenTtl {
    width: 94.4%;
    margin: 0 auto 8.6%;
}

.granola-kitchenRecipeWrap {
    margin-bottom: 9.5%;
    padding-bottom: 8.4%;
    background: url("../images/product/granola-kitchen-roast/line-sp.png") no-repeat bottom center / 92% auto;
}

@media (min-width: 641px) {
    .granola-kitchenRecipeWrap {
        margin-bottom: 4.5%;
        padding-bottom: 4.4%;
        background: url("../images/product/granola-kitchen-roast/line.png") no-repeat bottom center / 100% auto;
    }
}

.granola-kitchen-cacao .granola-kitchenRecipeWrap.recipe01 {
    margin-bottom: 13.2%;
}

.granola-kitchen-cacao .granola-kitchenRecipeWrap.recipe02 {
    margin-bottom: 0;
    padding-bottom: 10.5%;
}

.granola-kitchen-roast .granola-kitchenRecipeWrap.recipe02 {
    margin-bottom: 1.8em;
    padding-bottom: 14%;
}

.granola-kitchen .recipe-ingredient {
    width: 92%;
    margin: 0 auto 14%;
    font-size: 3.7333vw;
    color: #663504;
}

.granola-kitchen .ingredient-title {
    margin-bottom: .4em;
    font-size: 1.09em;
    font-weight: bold;
    letter-spacing: .15em;
}

.granola-kitchen .ingredient-title small {
    display: inline-block;
    font-size: .7em;
    font-feature-settings: "palt";
}

@media (min-width: 641px) {
    .granola-kitchen .ingredient-title small {
        font-size: 1em;
    }
}


.granola-kitchen .recipe-ingredientLabel {
    margin-bottom: .5em;
    font-feature-settings: "palt";
}

.howTo {
    position: relative;
    display: flow-root;
    padding-bottom: 13%;
    font-size: 3.7307vw;
    color: #663504;
    background: #cedccc;
}

.granola-kitchen-roast .howTo {
    background: #cedccc;
}

.granola-kitchen-cacao .howTo {
    padding-bottom: 4%;
    background: #efcfd0;
}

.granola-kitchen-roast .recipe01 .howTo {
    padding-bottom: 7%;
    background: #cedccc url("../images/product/granola-kitchen-roast/recipe-greek-yogurt-bowl-img-yogurt-sp.png") no-repeat bottom 5.5% right 4.5% / 15.6% auto;
}

@media (min-width: 641px) {
    .granola-kitchen-roast .recipe01 .howTo {
        padding-bottom: 4%;
        background: #cedccc url("../images/product/granola-kitchen-roast/recipe-greek-yogurt-bowl-img-yogurt-sp.png") no-repeat bottom 21.5% right 3.5% / 7.2% auto
    }
}


.granola-kitchen-roast .recipe02 .howTo {
    padding-bottom: 4%;
}

.howToTtl {
    position: absolute;
    top: 0;
    left: 0;
    width: 34.27%;
    margin: -8.5% 0 -2% 2.5%;
}

.howToLabel {
    margin-left: .5em;
}

.granola-kitchen-roast .howToLabel {
    font-size: 1em;
    color: #5c8202;
}

.granola-kitchen .howTo ol {
    width: 92%;
    margin: 11% auto 1.6em;
    padding: 0;
    color: #663504;
}

.granola-kitchen .howTo li {
    display: grid;
    grid-template-columns: 1.27em auto;
    grid-gap: .55em;
}

.granola-kitchen .howTo li:not(:last-child) {
    margin-bottom: 1.5em;
}

.granola-kitchen .howTo li img {
    display: block;
    margin-top: .1em;
}

.granola-kitchen .howTo .granola-kitchenNotes {
    width: 80%;
    margin: 1.5em 3em 1em 1.3em;
    line-height: 1.55;
}
.granola-kitchen .howTo li span {
  display: inline-block;
}

@media (max-width: 640px) {
  .granola-kitchen.granola-kitchen-cacao .recipe02 .howTo li:nth-child(5) span {
    display: inline;
  }
}


.recipeArrange {
    position: relative;
    display: grid;
}

.recipeArrangeTtl {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    margin: 13% 0 0 4%;
    width: 39.6%;
}

.granola-kitchen-cacao .recipeArrangeTtl {
    margin-top: 16%;
}

.recipeArrangeImg {
    order: 1;
    position: relative;
    z-index: 1;
    width: 62.4%;
    margin: 4% 3% 0 auto;
}

.granola-kitchen-cacao .recipeArrangeImg {
    margin-top: 6.2%;
}

.recipeArrangeTxt {
    order: 2;
    display: grid;
    justify-content: center;
    width: 77.87%;
    margin: -.7em auto 0;
    padding: .75em 1.5em 1em;
    box-sizing: border-box;
    font-size: 4vw;
    line-height: 1.55;
    color: #663504;
    border: 2px dashed #8f2136;
}

.recipeArrangeTxt span {
    display: inline-block;
}

.granola-kitchenNotes {
    width: 92%;
    margin: 1.8em auto 3.5em;
    font-size: 3.2vw;
    color: #663504;
}

.granola-kitchenNotes small {
    display: grid;
    grid-template-columns: 1em auto;
    font-size: 1em;
}

.granola-kitchenNotes span {
    display: inline-block;
}

@media (min-width: 641px) {
    .granola-kitchen .btnDetail {
        width: min(39%, 12em);
    }

    .granola-kitchen .itemName {
        padding: 1.7em 1em 1.5em 0;
        font-size: min(1.9388vw, 19px);
    }

    .granola-kitchen .itemImg {
        margin-top: -9.3%;
    }

    .granola-kitchen .itemImg img {
        width: 41.5%;
        margin: 0 5.3% 0 auto;
        transform: translateX(0);
    }



    .btnDetail {
        width: 12em;
        margin: 0.8em 0 1.5em
    }

    .granola-kitchenTtl {
        margin-bottom: .5em;
    }

    .granola-kitchenWrap {
        width: 100%;
    }

    .granola-kitchenIntro {
        display: flow-root;
        width: min(100%, 1174px);
        margin: 0 auto;
    }

    .granola-kitchenIntroTtl {
        width: 100%;
        margin: 0 auto;
    }

    .granola-kitchenIntroTxt {
        width: 100%;
        margin: 0 auto;
    }

    .granola-kitchenMaterial .granola-kitchenTxt {
        padding: 0 .8em;
        font-size: min(1.8764vw, 17px);
        line-height: 1.4;
    }

    .granola-kitchenMaterial .granola-kitchenTxt span {
        display: inline;
    }

    .granola-kitchenMaterial .granola-kitchenImg img {
        width: 100%;
        margin: 0 auto 3%;
    }

    .granola-kitchenIngredients ul {
        grid-gap: 2.3em;
        width: 94%;
        margin: 0 auto 11.5%;
    }

    .granola-kitchenIngredients li {
        grid-template-columns: 42.5% auto;
        grid-gap: 1.1em;
    }

    .granola-kitchenIngredients li img {
        margin-top: 1%;
    }

    .granola-kitchenIngredients li dl {
        font-size: min(1.65vw, 17px);
        line-height: 1.4;
    }

    .granola-kitchenIngredients li dt {
        margin-bottom: .3em;
        padding-bottom: .1em;
        font-size: 1.25em;
        letter-spacing: .1em;
        border-bottom: 2px dashed #cf9201;
    }

    .granola-kitchenIngredients li dd {
        letter-spacing: .1em;
    }

    .granola-kitchenColumn {
        display: grid;
        grid-template-columns: 41.55% auto;
        grid-gap: .3em 1.8em;
        width: min(92.45%, 906px);
        margin: 0 auto;
    }

    .granola-kitchenMaterial {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        margin-bottom: 1.4em;
    }

    .granola-kitchenIngredients {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    .granola-kitchenSupport {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }

    .granola-kitchenSupport .granola-kitchenTtl {
        margin-bottom: 1em;
    }

    .granola-kitchenRrecommend {
        width: min(100%, 992px);
        margin: 2em auto;
    }

    .granola-kitchenRrecommend ul {
        position: relative;
        margin: 1.7% auto 3.6%;
    }

    .granola-kitchenRrecommend li:nth-child(1) {
        position: relative;
        z-index: 1;
        width: 31%;
        margin: 0 0 0 3.6%;
    }

    .granola-kitchenRrecommend li:nth-child(2) {
        position: relative;
        z-index: 2;
        width: 28.63%;
        margin: -.9% 0 0 11.6%;
    }

    .granola-kitchenRrecommend li:nth-child(3) {
        position: absolute;
        z-index: 1;
        top: 38%;
        right: 0;
        width: 23.0%;
        margin: -1.7% 3.5% 0 35.7%;
    }

    .eating-tips-photo {
        width: 38%;
        margin: -41.5% 0 17% 36%;
    }

    .granola-kitchen-cacao .eating-tips-photo {
        width: 38.2%;
        margin: -44.8% 0 20% 36%;
    }

    .granola-kitchen-roast .granola-kitchenRecipe .granola-kitchenTtl {
        margin: 0 auto 4.9%;
    }

    .granola-kitchen .recipe-ingredient {
        width: 100%;
        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;
    }

    .granola-kitchen-cacao .recipe02 .recipeWrap02 {
        margin-bottom: 7%;
    }


    .granola-kitchen-roast .granola-kitchenRecipeWrap.recipe02 {
        margin-bottom: 1.2em;
        padding-bottom: 2.3%;
    }

    .granola-kitchen-cacao .granola-kitchenRecipeWrap.recipe01 {
        margin-bottom: 4.8%;
    }

    .granola-kitchen-cacao .granola-kitchenRecipeWrap.recipe02 {
        margin-bottom: 1.9%;
        padding-bottom: 7%;
    }


    .granola-kitchenRecipe {
        width: min(100%, 992px);
        margin: .8em auto;
    }

    .granola-kitchenRecipe .granola-kitchenTtl {
        width: 100%;
        margin: 0 auto 4.7%;
    }

    .granola-kitchen-cacao .granola-kitchenRecipe .granola-kitchenTtl {
        margin: 0 auto 4%;
    }

    .recipeWrap02 {
        width: 90%;
        margin: 5% auto 0;
    }

    .recipe01 .recipeWrap02 {
        grid-template-columns: 52% 1fr;
        grid-gap: .6em;
        margin: 4.5% auto 4.4%;
    }

    .granola-kitchen-roast .recipe02 .recipeWrap02 {
        grid-template-columns: 44% auto;
        align-items: center;
        gap: 3.7em;
        width: 95%;
        margin: 2% auto 6%;
    }

    .granola-kitchen-roast .recipe02 .recipe-ingredient {
        width: 90%;
    }
    .granola-kitchen-cacao .recipe01 .recipeWrap02 {
        grid-template-columns: 1fr 52%;
        align-items: center;
        gap: 4em;
    }

    .granola-kitchen-roast .recipe01 .recipeWrap02 {
        grid-template-columns: 51.5% 1fr;
        gap: 1em;
    }

    .granola-kitchen-cacao .recipe01 .recipe-ingredient {
        margin-bottom: 5em;
    }








    .recipe01 .recipePhoto {
        order: 2;
    }

    .granola-kitchen-cacao .recipe01 .recipePhoto {
        margin: -2.8% -.3% 0 0;
    }

    .granola-kitchen-cacao .recipe02 .recipePhoto {
        width: 98.5%;
        margin: -3.8% 0 0 -5.5%;
    }

    .granola-kitchen .recipe-ingredient {
        order: 1;
        margin: 0;
    }

    .granola-kitchenRecipeName {
        width: min(42.9435%, 426px);
        margin: 0 auto;
    }

    .granola-kitchen-roast .recipe02 .granola-kitchenRecipeName {
        width: min(69.3545387%, 688px);
    }

    .granola-kitchen-cacao .recipe01 .granola-kitchenRecipeName {
        width: min(69.3545387%, 688px);
    }

    .granola-kitchen-cacao .recipe02 .granola-kitchenRecipeName {
        width: min(73.891129%, 433px);
    }

    .howTo {
        width: 91.5%;
        margin: 0 auto;
        padding-bottom: 2.2%;
        font-size: min(1.9694vw, 18px);
    }
    .granola-kitchen-cacao .howTo {
        padding-bottom: 2%;
    }

    .granola-kitchen .howTo ol {
        width: 90%;
        margin: 2.2em auto 1.6em;
    }

    .granola-kitchen.granola-kitchen-roast .recipe02 .howTo ol {
        margin: 2.3em auto .5em;
    }

    .howToTtl {
        width: 19%;
        margin: 0 0 -2.5% -.3%;
        transform: translateY(-59%);
    }

    .granola-kitchen-roast .recipe02 .howToTtl {
        margin-bottom: -2%;
    }

    .howToLabel {
        margin-left: 2.5em;
    }

    .granola-kitchen.granola-kitchen-roast .recipe01 .howToLabel {
        margin-top: 3em;
    }

    .granola-kitchen.granola-kitchen-roast .recipe01 ol+.howToLabel {
        margin-top: 1em;
    }

    .granola-kitchen.granola-kitchen-roast .recipe01 .howTo ol {
        margin: 3.2em 2em 1em 2.6em;
    }

    .granola-kitchen .howTo li {
        grid-template-columns: 1.1em auto;
        grid-gap: .7em;
    }

    .granola-kitchen .howTo li:not(:last-child) {
        margin-bottom: .9em;
    }

    .granola-kitchen .howTo .granola-kitchenNotes {
        margin: 1em 3em 1em 5.5em;
    }

    .recipeArrangeTtl {
        right: 0;
        left: inherit;
        width: 22%;
        margin: 2.4% 2.7% 0 auto;
    }

    .granola-kitchen-cacao .recipe01 .recipeArrangeTtl {
        margin: 3.5% 3% 0 auto;
    }

    .recipeArrangeImg {
        position: absolute;
        top: 0;
        left: 0;
        width: 33%;
        margin: 1.7% auto 0 3.7%;
    }

    .granola-kitchen-cacao .recipe01 .recipeArrangeImg {
        margin: 2.7% auto 0 3.2%;
    }

    .recipeArrangeTxt {
        display: block;
        width: 79.5%;
        margin: 4.5em 5% 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;
    }

    .granola-kitchen-cacao .recipe01 .recipeArrangeTxt {
        margin-top: 5em;

    }

    .granola-kitchenNotes {
        width: 90%;
        margin: 2.5em auto 5.2em;
        font-size: min(1.5121vw, 15px);
    }

    .granola-kitchenNotes br {
        display: none;
    }
}

@media (hover: hover) {
    .btnDetail a {
        transition: opacity 0.3s
    }

    .btnDetail a:hover {
        opacity: 0.7
    }
}


.ingredient-list {
    list-style: none;
    padding: 0;
}

.ingredient-item {
    display: flex;
    align-items: flex-end;
    padding: 0 0 .3rem;
}

.ingredient-list .name {
    flex: 1;
    overflow: hidden;
}

@media (min-width: 641px) {
    .granola-kitchen .pc-none {
        display: none;
    }
}

.ingredient-list .name::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1em;
    margin-left: 0.5em;
    margin-right: -100%;
    vertical-align: baseline;

    background-image: radial-gradient(circle, #663504 1px, transparent 1px);
    background-size: .5em 100%;
    background-repeat: repeat-x;
    background-position: left bottom -.25em;
}

@media (min-width: 641px) {
    .ingredient-list .name::after {
        background-image: radial-gradient(circle, #663504 1.8px, transparent 1px);
        background-size: .8em 100%;
    }
}



.ingredient-list .amount {
    font-feature-settings: "tnum";
    padding-left: .5em;
    white-space: nowrap;
}

.granola-kitchen-Notes {
    list-style: none;
    width: 92%;
    margin: 1.8em auto 4em;
    font-size: 3.2vw;
    color: #663504;
}

.granola-kitchen-Notes li {
    display: grid;
    grid-template-columns: 1em 1fr;
}

@media (min-width: 641px) {
    .granola-kitchen-Notes {
        width: 83%;
        margin: 0 auto 5.2em;
        font-size: min(1.5121vw, 15px);
        font-feature-settings: "palt";
    }

    .granola-kitchen-cacao .recipe02+.granola-kitchen-Notes {
        width: 90%;
    }
}