@charset "UTF-8";
#breadcrumb {
    position: relative;
    z-index: 1;
}
/* --------------------------------------------------------------------------
  MV
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .mv-sec {
        position: relative;
        background: #fffdf8;
    }
    .mv-sec::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        margin-top: calc(-85 / var(--font-size) * 1em);
        width: 100%;
        padding-top: calc(1086 / var(--font-size) * 1em);
        background: url("../img/top/top-img-bg.png") no-repeat center / calc(2560 / var(--font-size) * 1em);
        z-index: 0;
    }
    .mv-sec__in {
        max-width: calc(1320 / var(--font-size) * 1em);
        --mv-w: 1278;
        --l-sec-width: 1280;
        padding-top: calc(29 / var(--font-size) * 1em);
    }
    .mv-sec__body {
        position: relative;
        padding: 0;
        z-index: 1;
    }
    .mv-sec__body::before {
        content: "";
        display: block;
        background: url("../img/top/mv-bg.png") no-repeat center / contain;
        border-radius: calc(20 / var(--font-size) * 1em);
        width: 100%;
        padding-top: calc(520 / var(--l-sec-width) * 100%);
        position: relative;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .mv-bg {
        position: relative;
    }
    .mv-bg::before {
        
    }
    .mv-sec__content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .mv-content {
        --mv-content-w: 420;
        width: calc(var(--mv-content-w) / var(--mv-w) * 100%);
        margin-left: calc(122 / var(--mv-w) * 100%);
        padding-top: calc(124 / var(--mv-w) * 100%);
    }
    .mv-content-logo {
        width: calc(406 / var(--mv-content-w) * 100%);
    }
    .mv-content-txt {
        text-align: center;
        margin-top: calc(24 / var(--mv-content-w) * 100%);
    }
    .mv-content-txt__label {
        color: var(--lightbrown-color);
        font-size: calc(18 / var(--font-size) * 1em);
        font-weight: bold;
        letter-spacing: calc(80 / 1000 * 1em);
        line-height: calc(30 / 18);
    }

}
@media all and (min-width: 768px) and (max-width: 1320px) {
    .mv-content-txt__label {
        font-size: calc(18 / 1320 * 100vw);
    }
}
@media all and (max-width: 767px) {
    .mv-sec {
        position: relative;
        background: #fffdf8;
    }
    .mv-sec::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        margin-top: calc(-115 / 750 * 100vw);
        width: 100%;
        padding-top: calc(1308 / 750 * 100vw);
        background: url("../img/top/top-img-bg_sp.png") no-repeat center / contain;
        z-index: 0;
    }
    .mv-sec__in {
        max-width: calc(1320 / 750 * 100vw);
        --mv-w: 1278;
        --l-sec-width: 1280;
        padding-top: calc(42 / 750 * 100vw);
    }
    .mv-sec__body {
        position: relative;
        padding: 0;
        z-index: 1;
    }
    .mv-sec__body::before {
        content: "";
        display: block;
        background: url("../img/top/mv-bg_sp.png") no-repeat center / contain;
        border-radius: calc(40 / 750 * 100vw);
        width: 100%;
        padding-top: calc(940 / 750 * 100vw);
        position: relative;
        top: 0;
        left: 0;
        z-index: -1;
    }
    .mv-bg {
        position: relative;
    }
    .mv-bg::before {
        
    }
    .mv-sec__content {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .mv-content {
        margin-top: calc(72 / 750 * 100vw);
    }
    .mv-content-logo {
        width: calc(461 / 750 * 100vw);
        margin: 0 auto;
    }
    .mv-content-txt {
        text-align: center;
        margin-top: calc(28 / 750 * 100vw);
    }
    .mv-content-txt__label {
        color: var(--lightbrown-color);
        font-size: calc(24 / 750 * 100vw);
        font-weight: bold;
        letter-spacing: calc(80 / 1000 * 1em);
        line-height: calc(33.6 / 24);
    }

}
/* --------------------------------------------------------------------------
  LINK
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .link-sec {
        background: #fffdf8;
    }
    .link-sec__in {
    }
    .link-sec__body {
        padding-top: calc(48 / var(--sec-width) * 100%);
        padding-bottom: calc(30 / var(--sec-width) * 100%);
    }
    .link-sec__content {
        position: relative;
    }
}
@media all and (max-width: 767px) {
    .link-sec {
        background: #fffdf8;
    }
    .link-sec__in {
    }
    .link-sec__body {
        padding-top: calc(48 / 750 * 100vw);
        padding-bottom: calc(30 / 750 * 100vw);
    }
    .link-sec__content {
        position: relative;
    }
}

/* --------------------------------------------------------------------------
  WHAT
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .what-sec {
        background: #fffdf8;
        --sec-color: var(--blue-color-500);
        --sec-color-10: var(--blue-color-10);
        overflow: hidden;
    }
    .what-sec__in {
    }
    .what-sec__body {
        padding-top: calc(30 / var(--sec-width) * 100%);
        padding-bottom: calc(260 / var(--sec-width) * 100%);
    }
    
    .what-read-btn {
        --btn-w:320;
        width: calc(var(--btn-w) / var(--sec-read-w) * 100%);
        margin-top: calc(27 / var(--sec-read-w) * 100%);
    }
    .what-read-btn .c-btn {
        --btn-bg-color: var(--sec-color);
        --btn-border-color: var(--sec-color);
    }
}
@media all and (min-width: 768px) and (max-width: 1064px) {
    .what-sec .c-header-title__sub-txt {
        font-size: calc(32 / 1064 * 100vw);
    }
    .what-sec .c-header-title__txt {
        font-size: calc(32 / 1064 * 100vw);
    }
    .what-sec .c-btn-txt__label {
        font-size: calc(16 / 1064 * 100vw);
    }
}
@media all and (max-width: 767px) {
    .what-sec {
        --sec-color: var(--blue-color-500);
        --sec-color-10: var(--blue-color-10);
        background: #fffdf8;
        overflow: hidden;
    }
    .what-sec__in {
    }
    .what-sec__body {
        padding-top: calc(40 / 750 * 100vw);
        padding-bottom: calc(290 / 750 * 100vw);
    }
    .what-read::before {
        margin-right: calc(-86 / 750 * 100vw);
        margin-bottom: calc(2 / 750 * 100vw);
    }
    .what-read-btn {
        --btn-w:560;
        width: calc(var(--btn-w) / 750 * 100vw);
        margin: calc(52 / 750 * 100vw) auto 0;
    }
    .what-read-btn .c-btn {
        --btn-bg-color: var(--sec-color);
        --btn-border-color: var(--sec-color);
    }
}
/* --------------------------------------------------------------------------
  RECIPE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .recipe-sec {
        background: var(--pink-color-10);
    }
    .recipe-sec::after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        margin-top: calc(-75 / var(--font-size) * 1em);
        transform: translateX(-50%);
        width: 100%;
        height: 100%;
        background: url("../img/common/recipe-img-bg.png") repeat-y center top / calc(2560 / var(--font-size) * 1em);
        z-index: 0;
    }
    .recipe-sec__container {
    }
    .recipe-sec__in {
        max-width: calc(var(--l-sec-width) / var(--font-size) * 1em);
        --l-sec-width: 1295;
        --l-sec-in-width: 1255;
        position: relative;
        z-index: 1;
    }
    .recipe-sec__body {
        padding-top: 0;
    }
    .recipe-sec__content {
    }
    .recipe-sec__header {
        --sec-read-w: 1180;
    }
    .recipe-sec .c-header-title {
        --header-size: 32;
      }
      .recipe-sec .c-header-title__in {
        position: relative;
        display: block;
        text-align: center;
        padding-bottom: calc(18 / var(--sec-read-w) * 100%);
      }
      .recipe-sec .c-header-title__in::before {
        content: "";
        display: block;
        width: calc(43 / var(--sec-read-w) * 100%);
        padding-top: calc(8 / var(--sec-read-w) * 100%);
        -webkit-mask-image: url("../img/common/sec-ttl-deco.png");
        mask-image: url("../img/common/sec-ttl-deco.png");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        background: var(--white-color);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      } 
      .recipe-sec .c-header-title__sub-txt {
        color: var(--white-color);
        font-size: calc(48 / var(--font-size) * 1em);
        letter-spacing: calc(240 / 1000 * 1em);
        position: relative;
        display: inline-block;
      }
      .recipe-sec .c-header-title__sub-txt::after {
        content: "";
        display: block;
        width: calc(18 / 246 * 100%);
        padding-top: calc(28 / 246 * 100%);
        -webkit-mask-image: url("../img/common/ico-recipe.png");
        mask-image: url("../img/common/ico-recipe.png");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        background: var(--lightbrown-color);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: calc(6 / 246 * 100%);
      }
      .recipe-sec .c-header-title__txt {
        color: var(--lightbrown-color);
        font-size: calc(var(--header-size) / var(--font-size) * 1em);
        font-weight: 500;
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: calc(160 / 1000 * 1em);
      }
      .recipe-sec .c-header-title__txt--small {
        color: var(--lightbrown-color);
        font-size: calc(24 / var(--header-size) * 1em);
        font-weight: bold;
        font-family: var(--font-zen-maru);
        letter-spacing: calc(80 / 1000 * 1em);
        display: block;
        position: relative;
      }
    .recipe-txt {
        margin-bottom: calc(14 / var(--font-size) * 1em);
        position: relative;
        z-index: 1;
    }
    .recipe-content {
        position: relative;
        z-index: 1;
    }
    .recipe-season__container {
    }
    .recipe-season-list {
    }
    .recipe-season-list-item {
    }
    .recipe-season-list-item + .recipe-season-list-item {
        margin-top: calc(72 / var(--font-size) * 1em);
    }
    .recipe-season-list-item--middle {
        --sec-color: var(--green-color-500);
    }
    .recipe-season-list-item--late {
        --sec-color: var(--purple-color-500);
    }
    .recipe-season-list-item--completion {
        --sec-color: var(--pink-color-500);
    }
    .recipe-season-sec {
        position: relative;
        --sec-body-w: 1255;
        padding-top: calc(70 / var(--sec-body-w) * 100%);
    }
    .recipe-season-sec__in {
        background: var(--white-color);
        position: relative;
    }
    .recipe-season-list-item:nth-child(odd) .recipe-season-sec__in {
        border-radius: calc(40 / var(--font-size) * 1em) 0 0 calc(40 / var(--font-size) * 1em);
        margin-right: -50vw;
        padding-right: 50vw;
    }
    .recipe-season-list-item:nth-child(even) .recipe-season-sec__in {
        border-radius: 0 calc(40 / var(--font-size) * 1em) calc(40 / var(--font-size) * 1em) 0;
        margin-left: -50vw;
        padding-left: 50vw;
    }
    .recipe-season-sec__body {
        padding: calc(50 / var(--sec-body-w) * 100%) calc(48 / var(--sec-body-w) * 100%);
        position: relative;
    }
    .recipe-season-sec__body::before {
        content: "";
        display: block;
        width: calc(182 / var(--sec-body-w) * 100%);
        max-width: calc(182 / var(--sec-body-w) * 100%);
        padding-top: calc(174 / var(--sec-body-w) * 100%);
        position: absolute;
        top: 0;
        margin-top: calc(-70 / var(--sec-body-w) * 100%);
    }
    .recipe-season-list-item:nth-child(odd) .recipe-season-sec__body::before {
        left: 0;
        margin-left: calc(48 / var(--sec-body-w) * 100%);
    }
    .recipe-season-list-item:nth-child(even) .recipe-season-sec__body::before {
        right: 0;
        margin-right: calc(48 / var(--sec-body-w) * 100%);
    }
    .recipe-season-list-item--middle .recipe-season-sec__body::before {
        background: url("../img/top/ico-recipe-middle.png") no-repeat center / contain;
    }
    .recipe-season-list-item--late .recipe-season-sec__body::before {
        background: url("../img/top/ico-recipe-late.png") no-repeat center / contain;
    }
    .recipe-season-list-item--completion .recipe-season-sec__body::before {
        background: url("../img/top/ico-recipe-completion.png") no-repeat center / contain;
    }
    .recipe-season-sec-txt {
        margin-bottom: calc(36 / var(--sec-body-w) * 100%);
    }
    .recipe-season-sec-txt .c-txt {
        font-family: var(--font-zen-kaku);
    }
    .recipe-season-list-item:nth-child(odd) .recipe-season-sec-txt {
        margin-left: calc(240 / var(--sec-body-w) * 100%);
    }
    .recipe-season-list-item:nth-child(even) .recipe-season-sec-txt {
        margin-left: calc(68 / 1159 * 100%);
        width: calc(820 / 1159 * 100%);
    }
    .recipe-list__container {
        position: relative;
    }
    .recipe-box-list {
        display: flex;
    }
    .recipe-box-list-item {
        width: calc(376 / 1120 * 100%);
        flex-shrink: 0;
    }
    .recipe-detail-btn__cover {
    }
    .recipe-card {
        margin: 0 calc(8 / 376 * 100%);
    }
    .recipe-detail-btn {
        margin: calc(40 / var(--font-size) * 1em) auto 0;
        width: calc(320 / var(--font-size) * 1em);
    }
    .recipe-detail-btn .c-btn {
        --btn-bg-color: var(--sec-color);
        --btn-border-color: var(--sec-color);
    }
}
@media all and (min-width: 1245px), print {
    .recipe-list {
        justify-content: center;
    }
}
@media all and (min-width: 768px) and (max-width: 1295px) {
    .recipe-card-read-name__label {
        font-size: calc(18 / 1295 * 100vw);
    }
    .recipe-detail-txt__label {
        font-size: calc(14 / 1295 * 100vw);
    }
    .recipe-card-read-version-list-item--time .recipe-detail-txt::before {
        width: calc(20 / 1295 * 100vw);
        padding-top: calc(20 / 1295 * 100vw);
    }
    .recipe-card-read-version-list-item--kcal .recipe-detail-txt::before {
        width: calc(16 / 1295 * 100vw);
      padding-top: calc(20 / 1295 * 100vw);
    }
    .recipe-card-read-version-list-item--salt .recipe-detail-txt::before {
        width: calc(12 / 1295 * 100vw);
        padding-top: calc(20 / 1295 * 100vw);
    }
    .recipe-detail-txt {
        padding-left: calc(var(--ico-w) / 1295 * 100vw);
    }
}
@media all and (min-width: 768px) and (max-width: 1064px) {
    .recipe-sec .c-header-title__sub-txt {
        font-size: calc(48 / 1064 * 100vw);
    }
    .recipe-sec .c-header-title__in {
        font-size: calc(var(--header-size) / 1064 * 100vw);
    }
    .recipe-sec .c-header-title__txt {
        font-size: calc(32 / 1064 * 100vw);
    }
}
@media all and (max-width: 767px) {
    .recipe-sec {
        overflow-y: visible;
    }
    .recipe-sec::after {
        content: "";
        display: block;
        background: url("../img/common/recipe-img-bg_sp.png") repeat-y center top / 100%;
        width: 100%;
        height: 100%;
        position: absolute;
        top: calc(-219 / 750 * 100vw);
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
        clip-path: inset(calc(58 / 750 * 100vw) 0 0 0);
    }
    .recipe-sec__container {
    }
    .recipe-sec__in {
        max-width: calc(var(--l-sec-width) / 750 * 100vw);
        --l-sec-width: 1295;
        --l-sec-in-width: 1255;
    }
    .recipe-sec__body {
        padding-top: 0;
    }
    .recipe-sec__content {
    }
    .recipe-sec__header {
        --sec-read-w: 1180;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .recipe-sec .c-header-title {
        --header-size: 56;
      }
      .recipe-sec .c-header-title__in {
        position: relative;
        display: block;
        text-align: center;
        font-size: calc(var(--header-size) / 750 * 100vw);
        padding-bottom: calc(32 / 750 * 100vw);
        margin-bottom: calc(24 / 750 * 100vw);
      }
      .recipe-sec .c-header-title__in::before {
        content: "";
        display: block;
        width: calc(76 / 750 * 100vw);
        padding-top: calc(15 / 750 * 100vw);
        -webkit-mask-image: url("../img/common/sec-ttl-deco.png");
        mask-image: url("../img/common/sec-ttl-deco.png");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        background: var(--white-color);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      } 
      .recipe-sec .c-header-title__sub-txt {
        color: var(--white-color);
        font-size: calc(56 / 750 * 100vw);
        letter-spacing: calc(240 / 1000 * 1em);
        position: relative;
        font-weight: bold;
      }
      .recipe-sec .c-header-title__sub-txt::after {
        content: "";
        display: block;
        width: calc(29 / 750 * 100vw);
        padding-top: calc(50 / 750 * 100vw);
        -webkit-mask-image: url("../img/common/ico-recipe.png");
        mask-image: url("../img/common/ico-recipe.png");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        background: var(--lightbrown-color);
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: calc(-14 / 750 * 100vw);
      }
      .recipe-sec .c-header-title__sub-txt {
      }
      .recipe-sec .c-header-title__txt {
        color: var(--lightbrown-color);
        font-family: var(--font-zen-maru);
        font-weight: 500;
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: calc(160 / 1000 * 1em);
      }
      .recipe-sec .c-header-title__txt--small {
        color: var(--lightbrown-color);
        font-size: calc(32 / var(--header-size) * 1em);
        font-weight: bold;
        font-family: var(--font-zen-maru);
        letter-spacing: calc(80 / 1000 * 1em);
        display: block;
        position: relative;
      }
    .recipe-txt {
        margin-bottom: calc(14 / 750 * 100vw);
        position: relative;
        z-index: 1;
    }
    .recipe-txt .c-txt {
        letter-spacing: calc(80 / 1000 * 1em);
    }
    .recipe-content {
        position: relative;
        z-index: 1;
    }
    .recipe-season__container {
    }
    .recipe-season-list {
    }
    .recipe-season-list-item {
    }
    .recipe-season-list-item + .recipe-season-list-item {
        margin-top: calc(72 / 750 * 100vw);
    }
    .recipe-season-list-item--middle {
        --sec-color: var(--green-color-500);
    }
    .recipe-season-list-item--late {
        --sec-color: var(--purple-color-500);
    }
    .recipe-season-list-item--completion {
        --sec-color: var(--pink-color-500);
    }
    .recipe-season-sec {
        position: relative;
        --sec-body-w: 1255;
        padding-top: calc(70 / 750 * 100vw);
    }
    .recipe-season-sec__in {
        background: var(--white-color);
        position: relative;
    }
    .recipe-season-list-item:nth-child(odd) .recipe-season-sec__in {
        border-radius: calc(40 / 750 * 100vw) 0 0 calc(40 / 750 * 100vw);
        margin-right: -50vw;
        padding-right: calc(50vw - (40 / 750 * 100vw));
    }
    .recipe-season-list-item:nth-child(even) .recipe-season-sec__in {
        border-radius: 0 calc(40 / 750 * 100vw) calc(40 / 750 * 100vw) 0;
        margin-left: -50vw;
        padding-left: calc(50vw - (40 / 750 * 100vw));
    }
    .recipe-season-sec__body {
        padding: calc(104 / 750 * 100vw) 0;
        position: relative;
    }
    .recipe-season-sec__body::before {
        content: "";
        display: block;
        width: calc(250 / 750 * 100vw);
        padding-top: calc(239 / 750 * 100vw);
        position: absolute;
        top: 0;
        margin-top: calc(40 / 750 * 100vw);
    }
    .recipe-season-list-item:nth-child(odd) .recipe-season-sec__body::before {
        left: 0;
        margin-left: calc(-65 / 750 * 100vw);
    }
    .recipe-season-list-item:nth-child(even) .recipe-season-sec__body::before {
        right: 0;
        margin-right: calc(-65 / 750 * 100vw);
    }
    .recipe-season-list-item--middle .recipe-season-sec__body::before {
        background: url("../img/top/ico-recipe-middle.png") no-repeat center / contain;
    }
    .recipe-season-list-item--late .recipe-season-sec__body::before {
        background: url("../img/top/ico-recipe-late.png") no-repeat center / contain;
    }
    .recipe-season-list-item--completion .recipe-season-sec__body::before {
        background: url("../img/top/ico-recipe-completion.png") no-repeat center / contain;
    }
    .recipe-season-sec-txt {
        width: calc(490 / 750 * 100vw);
    }
    .recipe-season-list-item--middle .recipe-season-sec-txt {
        margin-bottom: calc(64 / 750 * 100vw);
    }
    .recipe-season-list-item--late .recipe-season-sec-txt {
        margin-bottom: calc(28 / 750 * 100vw);
    }
    .recipe-season-list-item--completion .recipe-season-sec-txt {
        margin-bottom: calc(24 / 750 * 100vw);
    }
    .recipe-season-sec-txt .c-txt {
        font-family: var(--font-zen-kaku);
        line-height: 1.6;
    }
    .recipe-season-list-item:nth-child(odd) .recipe-season-sec-txt {
        margin-left: calc(194 / 750 * 100vw);
    }
    .recipe-season-list-item:nth-child(even) .recipe-season-sec-txt {
        margin-left: calc(40 / 750 * 100vw);
    }
    .recipe-list__container {
        position: relative;
        padding: 0 calc(32 / 750 * 100vw);
    }
    .recipe-box-list {
        display: flex;
    }
    .recipe-box-list-item {
        width: calc(376 / 750 * 100vw);
        flex-shrink: 0;
    }
    .recipe-detail-btn__cover {
    }
    .recipe-card {
        margin: 0 calc(8 / 750 * 100vw);
    }
    .recipe-card-img-ico {
        --ico-w: 42;
    }
    .recipe-card-img-ico::after {
        width: calc(20 / 750 * 100vw);
      padding-top: calc(17 / 750 * 100vw);
    }
    .recipe-detail-btn {
        margin: calc(65 / 750 * 100vw) auto 0;
        width: calc(520 / 750 * 100vw);
    }
    .recipe-detail-btn .c-btn {
        --btn-bg-color: var(--sec-color);
        --btn-border-color: var(--sec-color);
    }
    .recipe-detail-btn .c-btn__in::before {
        background: url("../img/top/recipe-detail-btn_sp.png") no-repeat center / contain;
    }
    .recipe-detail-btn .c-btn__body {
        padding: calc(6 / 750 * 100vw) calc(40 / 750 * 100vw);
    }
}

/* --------------------------------------------------------------------------
  RECOMMEND
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
    .recommend-sec {
        position: relative;
        --sec-color: var(--green-color-500);
        --sec-color-10: var(--green-color-10);
        background: var(--pink-color-10);
    }
    .main-container {
        position: relative;
        overflow: hidden;
    }
    .recommend-sec::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding-top: calc(1121 / var(--font-size)* 1rem);
        background: url("../img/top/recommend-img-bg.png") no-repeat center / cover;
        z-index: 0;
    }
    .recommend-sec__container {
        overflow: hidden;
        position: relative;
        z-index: 1;
    }
    .recommend-sec__in {
    }
    .l-sec__body {
    }
    .recommend-sec__body {
        padding-top: calc(50 / var(--sec-width) * 100%);
        padding-bottom: calc(160 / var(--sec-width) * 100%);
    }
    .l-sec__content {
    }
    .recommend-sec-content__container {
        display: flex;
        gap: calc(70 / 1024 * 100%);
        justify-content: center;
        position: relative;
        z-index: 1;
        max-width: calc(898 / var(--font-size) * 1em);
        --content-w: 898;
    }
    .recommend-sec-content__container::before {
        content: "";
        display: block;
        --img-con-w: 360;
        width: calc(var(--img-con-w) / var(--content-w) * 100%);
    }
    .recommend-img__container {
        flex-shrink: 0;
        --img-con-w: 360;
        width: calc(var(--img-con-w) / var(--content-w) * 100%);
        position: absolute;
        top: 0;
        left: 0;
    }    
    .recommend-img-list {
        display: flex;
        gap: calc(6 / var(--img-con-w) * 100%);
        position: relative;
    }
    .recommend-img-list::before {
        content: "";
        display: block;
        background: url("../img/top/recommend-img-deco.png") no-repeat center / contain;
        width: calc(285 / var(--img-con-w) * 100%);
        padding-top: calc(248 / var(--font-size) * 1em);
        position: absolute;
        top: 0;
        left: 0;
        margin-top: calc(-97 / var(--font-size) * 1em);
        margin-left: calc(-358 / var(--font-size) * 1em);
    }
    .recommend-img-list-item {
        flex-grow: 1;
        }
    .recommend-img-list-item-txt {
        text-align: center;
        margin-top: calc(12 / 176 * 100%);
    }
    .recommend-img-list-item-txt__label {
        font-size: calc(14 / var(--font-size) * 1em);
        font-family: var(--font-zen-maru);
        font-weight: 500;
        line-height: calc(16.8 / 14);
    }
    .recommend-img {
        width: calc(152 / 173 * 100%);
        margin: 0 auto;
    }
    .recommend-read {
        width: calc(486 / var(--font-size) * 1em);
        
    }
    .recommend-sec__header {
    }
    .recommend-sec__header .c-header-title {
    }
    .recommend-sec__header .c-header-title__in {
    }
    .recommend-sec__header .c-header-title__sub-txt {
    }
    .recommend-sec__header .c-header-title__txt {
    }
    .recommend-read-txt {
    }
    .recommend-read-txt__label {
        font-family: var(--font-zen-kaku);
    }
    .recommend-read-txt__label--accent {
        color: var(--orange-color-500);
    }
    .recommend-read-btn {
        min-width: calc(240 / var(--font-size) * 1em);
        width: calc(320 / 486 * 100%);
        margin-top: calc(18 / 486 * 100%);
    }
    .recommend-read-btn .c-btn-arrow__label .c-svg {
        width: calc(11 / 25 * 100%);
    }
    .recommend-read-btn .c-btn {
        --btn-bg-color: var(--sec-color);
        --btn-border-color: var(--sec-color);
    }
    .supervision-content {
        margin-top: calc(68 / 1024 * 100%);
        position: relative;
        z-index: 1;
    }
    .supervision-content::before {
        content: "";
        display: block;
        background: url("../img/top/recommend-supervision-deco-01.png") no-repeat center / contain;
        width: calc(101 / var(--font-size) * 1em);
        padding-top: calc(208 / var(--font-size) * 1em);
        position: absolute;
        top: 0;
        left: calc(0 / var(--font-size) * 1em);
        margin-left: calc(-125 / var(--font-size) * 1em);
        margin-top: calc(-111 / var(--font-size) * 1em);
        z-index: -1;
    }
    .supervision-content::after {
        content: "";
        display: block;
        background: url("../img/top/recommend-supervision-deco-02.png") no-repeat center / contain;
        width: calc(258 / var(--font-size) * 1em);
        padding-top: calc(308 / var(--font-size) * 1em);
        position: absolute;
        bottom: 0;
        left: calc(0 / var(--font-size) * 1em);
        margin-left: calc(975 / var(--font-size) * 1em);
        margin-bottom: calc(-130 / var(--font-size) * 1em);
        z-index: -1;
    }
    .supervision-content__in {
        background: var(--white-color);
        padding: 0 calc(61 / 1024 * 100%);
        border-radius: calc(40 / var(--font-size) * 1em);
    }
    .supervision-content__body {
        --item-w: 912;
        padding: calc(25 / var(--item-w) * 100%) 0 calc(40 / var(--item-w) * 100%);
    }
    .supervision-content-head {
        text-align: center;
    }
    .supervision-content-head__label {
        color: var(--orange-color-500);
        font-size: calc(24 / var(--font-size) * 1em);
        font-weight: bold;
        letter-spacing: calc(80 / 1000 * 1em);
    }
    .supervision-content-item {
        margin-top: calc(16 / var(--item-w) * 100%);
    }
    .supervision-content-item__in {
        display: flex;
        align-items: center;
    }
    .supervision-content-item-profile{
        flex-shrink: 0;
    }
    .supervision-content-item-photo{
        max-width:calc(170 / var(--font-size) * 1em);
        width:100%;
    }
    .supervision-content-item-name__object{
        display: flex;
        align-items:flex-end;
        flex-direction: row-reverse;
        position: relative;
        top:calc(2 / var(--font-size) * 1em);
    }
    .supervision-content-item-name {
        color: #2f2f2f;
        font-size: calc(20 / var(--font-size) * 1em);
        font-weight: 500;
        text-align: center;
        position: relative;
        display:flex;
        align-items:center;
    }
    .supervision-content-item-name__label--ruby {
        font-size: calc(10 / 20 * 1em);
        letter-spacing: calc(440 / 1000 * 1em);
        position: relative;
        top:-0.3em;
        margin-left: calc(25 / var(--font-size) * 1em);
    }
    .supervision-content-item-name__label {
        letter-spacing: calc(80 / 1000 * 1em);
    }
    .supervision-content-item-read {
        margin-left: calc(32 / var(--item-w) * 100%);
    }
    .supervision-content-item-txt {
        border-top: dotted calc(4 / var(--font-size) * 1em) var(--orange-color-500);
        padding-top: calc(22 / var(--item-w) * 100%);
        margin-top: calc(12 / var(--item-w) * 100%);
    }
    .supervision-content-item-txt .c-txt {
        text-align: justify;
        text-justify: inter-ideograph;
        color: #2f2f2f;
        --txt-line-height:1.828;
        font-family: var(--font-zen-kaku);
    }
    .supervision-content-item-txt .c-txt + .c-txt{
        margin-top: calc(20 / var(--item-w) * 100%);
    }
    .supervision-content-message{
        padding-top: calc(18 / var(--item-w) * 100%);
        position: relative;
        margin-top: calc(15 / var(--item-w) * 100%);
    }
    .supervision-content-message:before{
        content:"";
        background-color: #fff0e7;
        mask-image: url(../img/common/ico_tri.svg);
        mask-size:contain;
        mask-position:center center;
        mask-repeat:no-repeat;
        display: block;
        width:calc(22 / var(--font-size) * 1em);
        height:calc(22 / var(--font-size) * 1em);
        position: absolute;
        top:0;
        left:calc(97 / var(--font-size) * 1em);
    }
    .supervision-content-message__txt{
        background-color: #fff0e7;
        padding:calc(25.5 / var(--font-size) * 1em) calc(30 / var(--font-size) * 1em);
        border-radius:calc(10 / var(--font-size) * 1em);
        position: relative;
    }
    .supervision-content-message__txt .c-txt{
        line-height:calc(25.6 / 14);
    }

    .supervision-btn-list{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:calc(10 / var(--font-size) * 1em);
        margin-top: calc(16 / var(--font-size) * 1em);
    }
    .supervision-btn {
        max-width: calc(200 / var(--font-size) * 1em);
        width: 100%;
    }
    .supervision-btn .c-btn__in::before{
        padding-top:calc(34 / var(--font-size) * 1em);
        background-image: url("../img/common/btn-deco_02.png");
    }
    .supervision-btn .c-btn__body{
        padding: calc(5 / var(--btn-w) * 100%) calc(73 / var(--btn-w) * 100%) calc(9 / var(--btn-w) * 100%) calc(50 / var(--btn-w) * 100%);
    }
    .supervision-btn .c-btn-arrow{
        width: calc(34 / var(--font-size) * 1em);
    }
    .supervision-btn .c-btn-arrow__label .c-svg {
        width: calc(10 / var(--font-size) * 1em);
    }
    .supervision-btn .c-btn {
        --btn-bg-color: var(--orange-color-500);
        --btn-border-color: var(--orange-color-500);
    }
    .btn-insta-ico{
        background-image: url("../img/common/ico_insta.png");
        background-size:contain;
        background-position:center center;
        background-repeat:no-repeat;
        display: block;
        width:calc(20 / var(--font-size) * 1em);
        height:calc(20 / var(--font-size) * 1em);
    }

    .supervision-read-btn-list{
        display:flex;
        align-items:center;
        justify-content:center;
        gap:calc(8 / var(--font-size) * 1em);
        flex-shrink: 0;
        margin-left: auto;
    }
    .supervision-read-btn {
        min-width:calc(32 / var(--font-size) * 1em);
        height:calc(32 / var(--font-size) * 1em);
    }
    .supervision-read-btn .c-btn__in::before{
        padding-top:calc(34 / var(--font-size) * 1em);
        background-image: url("../img/common/btn-deco_02.png");
    }
    .supervision-read-btn .c-btn__body{
        padding: calc(5 / var(--btn-w) * 100%) calc(73 / var(--btn-w) * 100%) calc(9 / var(--btn-w) * 100%) calc(50 / var(--btn-w) * 100%);
    }
    .supervision-read-btn .c-btn-arrow{
        width: calc(34 / var(--font-size) * 1em);
    }
    .supervision-read-btn .c-btn-arrow__label .c-svg {
        width: calc(10 / var(--font-size) * 1em);
    }
    .supervision-read-btn .c-btn {
        --btn-bg-color: var(--orange-color-500);
        --btn-border-color: var(--orange-color-500);
    }
    .supervision-read-btn__link{
        background-color: var(--orange-color-500);
        border-radius:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:100%;
        transition:0.3s ease;
    }
    .supervision-read-btn__link:hover{
        opacity:0.7;
    }
    .supervision-read-btn__ico{
        display: block;
        max-width:calc(16.5 / var(--font-size) * 1em) !important;
        width:100% !important;
    }
    .supervision-read-btn.--instagram .supervision-read-btn__ico{
        max-width:calc(15.5 / var(--font-size) * 1em) !important;
        width:100% !important;
    }
    .btn-insta-ico{
        background-image: url("../img/common/ico_insta.png");
        background-size:contain;
        background-position:center center;
        background-repeat:no-repeat;
        display: block;
        width:calc(14 / var(--font-size) * 1em);
        height:calc(14 / var(--font-size) * 1em);
    }
}
@media all and (min-width: 768px) and (max-width: 1064px) {
    .recommend-sec__header .c-header-title__sub-txt {
        font-size: calc(32 / 1064 * 100vw);
    }
    .recommend-sec__header .c-header-title__txt {
        font-size: calc(32 / 1064 * 100vw);
    }
    .recommend-read-btn .c-btn-txt__label {
        font-size: calc(var(--btn-txt-font-size) / 1064 * 100vw);
    }
    .recommend-img-list-item-txt__label {
        font-size: calc(14 / 1064 * 100vw);
    }
    .supervision-content-head__label {
        font-size: calc(24 / 1064 * 100vw);
    }
    .supervision-content-item-name {
        font-size: calc(20 / 1064 * 100vw);
    }
}
@media all and (max-width: 767px) {
    .recommend-sec {
        position: relative;
        --sec-color: var(--green-color-500);
        --sec-color-10: var(--green-color-10);
        background: var(--yellow-color-100);
    }
    .recommend-sec::after {
        content: "";
        display: block;
        width: calc(105 / 750 * 100vw);
        padding-top: calc(118 / 750 * 100vw);
        background: url("../img/top/recommend-sec-deco_sp.png") no-repeat center / contain;
        position: absolute;
        top: 0;
        right: calc(30 / 750 * 100vw);
        margin-top: calc(-87 / 750 * 100vw);
    }
    .main-container {
        position: relative;
        background: #fff0e1;
    }
    .bg-wave--strong-sp {
    }
    .bg-wave--strong-sp::before {
        content: "";
        display: block;
        width: 100%;
        padding-top: calc(483 / 750 * 100vw);
        background: url("../img/common/wave-strong-bg-deco_sp.png") no-repeat center / contain;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        margin-top: calc(-483 / 750 * 100vw);
        z-index: 0;
    }
    .recommend-sec__container {
        overflow: hidden;
    }
    .recommend-sec__in {
    }
    .recommend-sec__body {
        padding-top: calc(0 / 750 * 100vw);
    }
    .recommend-sec-content__container {
        position: relative;
        z-index: 1;
    }
    .recommend-img__container {
        --img-con-w: 360;
        margin-top: calc(42 / 750 * 100vw);
        position: relative;
        z-index: 1;
    }
    .recommend-img__container::before {
        content: "";
        display: block;
        content: "";
        display: block;
        background: url("../img/top/recommend-supervision-deco-01.png") no-repeat center / contain;
        width: calc(135 / 750 * 100vw);
        padding-top: calc(178 / 750 * 100vw);
        position: absolute;
        top: 0;
        left: calc(0 / 750 * 100vw);
        margin-left: calc(-57 / 750 * 100vw);
        margin-top: calc(-20 / 750 * 100vw);
        z-index: -1;
    }
    .recommend-img-list {
        display: flex;
        gap: calc(24 / 750 * 100vw);
        justify-content: center;
        position: relative;
    }
    .recommend-img-list::before {
        content: "";
        display: block;
        background: url("../img/top/recommend-img-deco.png") no-repeat center / contain;
        width: calc(285 / 750 * 100vw);
        padding-top: calc(248 / 750 * 100vw);
        position: absolute;
        top: 0;
        left: 0;
        margin-top: calc(-97 / 750 * 100vw);
        margin-left: calc(-358 / 750 * 100vw);
    }
    .recommend-img-list-item {
        }
    .recommend-img-list-item-txt {
        text-align: center;
        margin-top: calc(12 / 176 * 100%);
    }
    .recommend-img-list-item-txt__label {
        font-size: calc(26 / 750 * 100vw);
        font-family: var(--font-zen-maru);
        font-weight: 500;
        line-height: 1.4;
        letter-spacing: calc(80 / 1000 * 1em);
    }
    .recommend-img {
        width: calc(174 / 750 * 100vw);
        margin: 0 auto;
    }
    .recommend-read {
    }
    .recommend-sec__header {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .recommend-sec__header .c-header-title__in {
    }
    .recommend-sec__header .c-header-title__sub-txt {
    }
    .recommend-sec__header .c-header-title__txt {
    }
    .recommend-read-txt {
        text-align: center;
    }
    .recommend-read-txt__label {
        font-family: var(--font-zen-kaku);
        font-size: calc(28 / 750 * 100vw);
        letter-spacing: 0;
        line-height: 1.6;
    }
    .recommend-read-txt__label--accent {
        color: var(--orange-color-500);
        font-weight: bold;
    }
    .recommend-read-btn {
        width: calc(560 / 750 * 100vw);
        margin: calc(18 / 750 * 100vw) auto 0;
    }
    .recommend-read-btn .c-btn-arrow__label .c-svg {
        width: calc(18 / 750 * 100vw);
    }
    .recommend-read-btn .c-btn {
        --btn-bg-color: var(--sec-color);
        --btn-border-color: var(--sec-color);
    }
    .supervision-content {
        margin-top: calc(68 / 750 * 100vw);
        position: relative;
        z-index: 1;
    }
    .supervision-content::after {
        content: "";
        display: block;
        background: url("../img/top/recommend-supervision-deco-02_sp.png") no-repeat center / contain;
        width: calc(315 / 750 * 100vw);
        padding-top: calc(320 / 750 * 100vw);
        position: absolute;
        bottom: 0;
        right: calc(0 / 750 * 100vw);
        margin-right: calc(-128 / 750 * 100vw);
        margin-bottom: calc(-141 / 750 * 100vw);
        z-index: -1;
    }
    .supervision-content__in {
        background: var(--white-color);
        padding: 0 calc(30 / 750 * 100vw);
        border-radius: calc(40 / 750 * 100vw);
    }
    .supervision-content__body {
        --item-w: 912;
        padding: calc(56 / 750 * 100vw) 0 calc(60 / 750 * 100vw);
    }
    .supervision-content-head {
        text-align: center;
    }
    .supervision-content-head__label {
        color: var(--orange-color-500);
        font-size: calc(40 / 750 * 100vw);
        font-weight: bold;
        letter-spacing: calc(80 / 1000 * 1em);
    }
    .supervision-content-item {
        margin-top: calc(34 / 750 * 100vw);
    }
    .supervision-content-item__in {
        position: relative;
    }
    .supervision-content-item-profile{
        position: absolute;
        top:0;
        left:calc(15 / 750 * 100vw);
    }
    .supervision-content-item-photo{
        max-width:calc(250 / 750 * 100vw);
        width:100%;
    }
    .supervision-content-item-name__object{
        position: relative;
    }
    .supervision-content-item-name {
        padding-left: calc(296 / 750 * 100vw);
        color: #2f2f2f;
        font-size: calc(36 / 750 * 100vw);
        font-weight: 500;
        position: relative;
        display:flex;
        justify-content: center;
        flex-direction: column;
        gap: calc(36 / 750 * 100vw);
        min-height:calc(250 / 750 * 100vw);
    }
    .supervision-content-item-name__label--ruby {
        font-size: calc(20 / 750 * 100vw);
        letter-spacing: 0.44em;
        position: relative;
        top:-0.1em;
    }
    .supervision-content-item-name__label {
        letter-spacing: calc(80 / 1000 * 1em);
        line-height: 1;
    }
    .supervision-content-item-read {
        padding:0 calc(15 / 750 * 100vw);
    }
    .supervision-content-item-txt {
        margin-top: calc(34 / 750 * 100vw);
    }
    .supervision-content-item-txt .c-txt {
        font-size: calc(26 / 750 * 100vw);
        text-align: justify;
        text-justify: inter-ideograph;
        color: #2f2f2f;
        --txt-line-height:1.6;
        font-family: var(--font-zen-kaku);
    }
    .supervision-content-item-txt .c-txt + .c-txt{
        margin-top: calc(20 / 750 * 100vw);
    }
    .supervision-content-message{
        padding-top: calc(40 / 750 * 100vw);
        position: relative;
        margin-top: calc(10 / 750 * 100vw);
    }
    .supervision-content-message:before{
        content:"";
        background-color: #fff0e7;
        mask-image: url(../img/common/ico_tri.svg);
        mask-size:contain;
        mask-position:center center;
        mask-repeat:no-repeat;
        display: block;
        width:calc(40 / 750 * 100vw);
        height:calc(40 / 750 * 100vw);
        position: absolute;
        top:0;
        right:calc(80 / 750 * 100vw);
    }
    .supervision-content-message__txt{
        background-color: #fff0e7;
        padding:calc(35 / 750 * 100vw) calc(45 / 750 * 100vw) calc(35 / 750 * 100vw) calc(45 / 750 * 100vw);
        border-radius:calc(20 / 750 * 100vw);
        text-align: justify;
        text-justify: inter-ideograph;
        position: relative;
    }
    .supervision-content-message__txt .c-txt{
        font-size: calc(26 / 750 * 100vw);
        line-height:calc(41.6 / 26);
    }


    .supervision-btn-list{
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction: column;
        gap:calc(10 / var(--font-size) * 1em);
        margin-top: calc(16 / var(--font-size) * 1em);
    }
    .supervision-btn {
        max-width: calc(200 / var(--font-size) * 1em);
        width: 100%;
    }
    .supervision-btn .c-btn__in::before{
        padding-top:calc(34 / var(--font-size) * 1em);
        background-image: url("../img/common/btn-deco_02.png");
    }
    .supervision-btn .c-btn__body{
        padding: calc(5 / 750 * 100vw) calc(96 / 750 * 100vw) calc(9 / 750 * 100vw) calc(81 / 750 * 100vw);
        min-height: calc(80 / 750 * 100vw);
    }
    .supervision-btn .c-btn-arrow{
        width: calc(34 / var(--font-size) * 1em);
    }
    .supervision-btn .c-btn-arrow__label .c-svg {
        width: calc(10 / var(--font-size) * 1em);
    }
    .supervision-btn .c-btn {
        --btn-bg-color: var(--orange-color-500);
        --btn-border-color: var(--orange-color-500);
    }
    .c-btn-txt__label {
        font-size: calc(32 / 750 * 100vw);
    }
    .btn-insta-ico{
        background-image: url("../img/common/ico_insta.png");
        background-size:contain;
        background-position:center center;
        background-repeat:no-repeat;
        display: block;
        width:calc(20 / var(--font-size) * 1em);
        height:calc(20 / var(--font-size) * 1em);
    }

    .supervision-read-btn-list{
        border-bottom: dotted calc(6 / 750 * 100vw) var(--orange-color-500);
        padding-bottom: calc(22 / 750 * 100vw);
        width:100%;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        gap:calc(8 / 750 * 100vw);
        margin-left: auto;
    }
    .supervision-read-btn {
        min-width:calc(80 / 750 * 100vw);
        height:calc(80 / 750 * 100vw);
    }
    .supervision-read-btn .c-btn__in::before{
        padding-top:calc(34 / 750 * 100vw);
        background-image: url("../img/common/btn-deco_02.png");
    }
    .supervision-read-btn .c-btn__body{
        padding: calc(5 / 750 * 100vw) calc(73 / 750 * 100vw) calc(9 / 750 * 100vw) calc(50 / 750 * 100vw);
    }
    .supervision-read-btn .c-btn-arrow{
        width: calc(34 / 750 * 100vw);
    }
    .supervision-read-btn .c-btn-arrow__label .c-svg {
        width: calc(10 / 750 * 100vw);
    }
    .supervision-read-btn .c-btn {
        --btn-bg-color: var(--orange-color-500);
        --btn-border-color: var(--orange-color-500);
    }
    .supervision-read-btn__link{
        background-color: var(--orange-color-500);
        border-radius:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:100%;
        transition:0.3s ease;
    }
    .supervision-read-btn__link:hover{
        opacity:0.7;
    }
    .supervision-read-btn__ico{
        display: block;
        max-width:calc(40 / 750 * 100vw) !important;
        width:100% !important;
    }
    .supervision-read-btn.--instagram .supervision-read-btn__ico{
        max-width:calc(36 / 750 * 100vw) !important;
        width:100% !important;
    }
    .btn-insta-ico{
        background-image: url("../img/common/ico_insta.png");
        background-size:contain;
        background-position:center center;
        background-repeat:no-repeat;
        display: block;
        width:calc(14 / 750 * 100vw);
        height:calc(14 / 750 * 100vw);
    }
}

#gfooter {
    position: relative;
    z-index: 10;
}
@media all and (max-width: 767px) {
    body {
        background: var(--yellow-color-100);
    }
}