@charset "UTF-8";
/* --------------------------------------------------------------------------
  MV
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .mv-sec {
    position: relative;
  }
  .mv-sec__in {
    padding: 0;
    height: calc(570 / 1440 * 100vw);
  }
  .mv-sec__body {
    padding-top: calc(48 / 1440 * 100vw);
    padding-bottom: calc(48 / 1440 * 100vw);
    height: 100%;
  }
  .mv-sec__content {
  }
  .mv-bg {
  }
  .mv-bg::before {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    background: url("../img/mv_bg.png") no-repeat center / contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .mv-read {
  }
  .mv-read__in {
  }
  .mv-read__body {
  }
  .mv-read-title {
    width: calc(428 / 1440 * 100vw);
    margin: 0 auto;
    position: relative;
    padding-bottom: calc(63 / 1440 * 100vw);
    margin-bottom: calc(28 / 1440 * 100vw);
  }
  .mv-read-title::before {
    content: "";
    display: block;
    background: url("../img/mv_deco_title.png") no-repeat center / contain;
    width: calc(81 / 1440 * 100vw);
    padding-top: calc(42 / 1440 * 100vw);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
  .mv-read-txt {
    text-align: center;
    margin-top: calc(28 / 1440 * 100vw);
  }
  .mv-read-txt__label {
    font-size: calc(22 / 1440 * 100vw);
    font-family: var(--font-zen-maru);
  }
  .mv-read-txt-img {
    width: calc(418 / 1440 * 100vw);
    margin: calc(20 / 1440 * 100vw) auto 0;
  }
}
@media all and (max-width: 767px) {
  .mv-sec {
    position: relative;
  }
  .mv-sec__in {
    padding: 0;
    height: calc(900 / 750 * 100vw);
  }
  .mv-sec__body {
    padding-top: calc(27 / 750 * 100vw);
    padding-bottom: calc(48 / 750 * 100vw);
    height: 100%;
  }
  .mv-sec__content {
  }
  .mv-bg {
  }
  .mv-bg::before {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    background: url("../img/mv_bg_sp.png") no-repeat center / contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .mv-read {
  }
  .mv-read__in {
  }
  .mv-read__body {
  }
  .mv-read-title {
    width: calc(447 / 750 * 100vw);
    margin: 0 auto;
    position: relative;
    padding-bottom: calc(66 / 750 * 100vw);
  }
  .mv-read-title::before {
    content: "";
    display: block;
    background: url("../img/mv_deco_title.png") no-repeat center / contain;
    width: calc(74 / 750 * 100vw);
    padding-top: calc(39 / 750 * 100vw);
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
  }
  .mv-read-txt {
    text-align: center;
    margin-top: calc(16 / 750 * 100vw);
  }
  .mv-read-txt__label {
    font-size: calc(24.5 / 750 * 100vw);
    font-family: var(--font-zen-maru);
    letter-spacing: calc(75 / 1000 * 1em);
  }
  .mv-read-txt-img {
    width: calc(287 / 750 * 100vw);
    margin: calc(12 / 750 * 100vw) auto 0;
  }
}

/* --------------------------------------------------------------------------
  INTRO
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .intro-sec {
    background: var(--bg-rough);
  }
  .intro-sec__in {
  }
  .intro-sec__body {
    padding-top: calc(56 / var(--font-size) * 1em);
  }
  .link-list__container {
  }
  .link-list {
    display: flex;
    gap: calc(32 / var(--font-size) * 1em);
  }
  .link-list-item {
    width: calc((100% - (96 / var(--font-size) * 1em)) / 4);
  }
  .link-card {
    transition: all .3s ease;
  }
  .link-card__in {
  }
  .link-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .link-card-heading {
    width: calc(59 / var(--font-size) * 1em);
    margin: 0 auto;
  }
  .link-card-txt {
    text-align: center;
    margin-top: calc(8 / var(--font-size) * 1em);
  }
  .link-card-txt__label {
    color: var(--main-color-100);
    font-size: calc(16 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: bold;
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .link-card-txt__label--small {
    font-size: calc(12 / 16 * 1em);
  }
  .link-card-ico {
    width: calc(32 / var(--font-size) * 1em);
    height: 100%;
    aspect-ratio: 1 / 1;
    margin-top: calc(8 / var(--font-size) * 1em);
  }
  .link-card-ico__in {
    background: var(--white-color);
    border: solid 1px var(--black-color);
    position: relative;
    border-radius: 50%;
  }
  .link-card-ico__in svg {
    width: calc(7 / var(--font-size) * 1em);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%) rotate(90deg);
  }
  .intro-content {
    margin-top: calc(48 / var(--font-size) * 1em);
  }
  .intro-content__in {
  }
  .intro-content__body {
  }
  .intro-content-txt {
  }
  .intro-content-img-list__container {
    margin-top: calc(38 / var(--font-size) * 1em);
  }
  .intro-content-img-list {
    display: flex;
    justify-content: center;
    gap: calc(48 / var(--font-size) * 1em);
  }
  .intro-content-img-list-item {
    width: calc(310 / var(--font-size) * 1em);
  }
}
@media all and (max-width: 767px) {
  .intro-sec {
    background: var(--bg-rough);
  }
  .intro-sec__in {
  }
  .intro-sec__body {
    padding-top: calc(57 / var(--font-size) * 1em);
    padding-bottom: calc(82 / var(--font-size) * 1em);
  }
  .link-list__container {
  }
  .link-list {
    display: flex;
    justify-content: space-between;
  }
  .link-list-item {
    width: calc(100% / 4);
  }
  .link-card {
    display: block;
    height: 100%;
  }
  .link-card__in {
    height: 100%;
  }
  .link-card__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
  }
  .link-card-heading {
    width: calc(77 / var(--font-size) * 1em);
    margin: 0 auto;
  }
  .link-card-txt {
    text-align: center;
    margin-top: calc(16 / var(--font-size) * 1em);
  }
  .link-card-txt__label {
    color: var(--main-color-100);
    font-size: calc(22 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: bold;
    letter-spacing: calc(-20 / 1000 * 1em);
    line-height: calc(33 / 22);
  }
  .link-card-ico {
    width: calc(32 / var(--font-size) * 1em);
    aspect-ratio: 1 / 1;
    margin-top: calc(18 / var(--font-size) * 1em);
  }
  .link-card-ico__in {
    background: var(--white-color);
    border: solid 1px var(--black-color);
    position: relative;
    border-radius: 50%;
  }
  .link-card-ico__in svg {
    width: calc(8 / var(--font-size) * 1em);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%) rotate(90deg);
  }
  .intro-content {
    margin-top: calc(72 / var(--font-size) * 1em);
  }
  .intro-content__in {
  }
  .intro-content__body {
  }
  .intro-content-txt {
  }
  .intro-content-img-list__container {
    margin-top: calc(48 / var(--font-size) * 1em);
  }
  .intro-content-img-list {
    display: flex;
    justify-content: center;
    gap: calc(24 / var(--font-size) * 1em);
  }
  .intro-content-img-list-item {
    width: calc(296 / var(--font-size) * 1em);
  }
}

/* --------------------------------------------------------------------------
  ABOUT
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .about-sec .c-header-title__txt {
  }
  .about-sec {
    background: var(--bg-wood);
  }
  .about-sec .c-header-title {
    --header-w: 296;
  }
  .about-sec__in {
    position: relative;
  }
  .about-sec__in::before {
    content: "";
    display: block;
    background: url("../img/about_deco_01.png") no-repeat center / contain;
    width: calc(273 / var(--font-size) * 1em);
    height: calc(215 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    left: 0;
    margin-left: calc(998 / var(--font-size) * 1em);
    margin-top: calc(-98 / var(--font-size) * 1em);
  }
  .about-sec__in::after {
    content: "";
    display: block;
    background: url("../img/about_deco_04.png") no-repeat center / contain;
    width: calc(186 / var(--font-size) * 1em);
    height: calc(158 / var(--font-size) * 1em);
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: calc(1026 / var(--font-size) * 1em);
    margin-bottom: calc(-82 / var(--font-size) * 1em);
  }
  .about-sec__body {
  }
  .about-content {
  }
  .about-content-list__container {
  }
  .about-content-list {
  }
  .about-content-list-item {
    position: relative;
  }
  .about-content-list-item + .about-content-list-item {
    margin-top: calc(58 / var(--font-size) * 1em);
  }
  .about-content-list-item--what {
  }
  .about-content-list-item--what::before {
    content: "";
    display: block;
    background: url("../img/about_deco_02.png") no-repeat center / contain;
    width: calc(135 / var(--font-size) * 1em);
    padding-top: calc(128 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    right: 0;
    margin-top: calc(765 / var(--font-size) * 1em);
    margin-right: calc(1072 / var(--font-size) * 1em);
  }
  .about-content-list-item--nutrition {
  }
  .about-content-list-item--nutrition::before {
    content: "";
    display: block;
    background: url("../img/about_deco_03.png") no-repeat center / contain;
    width: calc(60 / var(--font-size) * 1em);
    padding-top: calc(93 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: calc(100 / var(--font-size) * 1em);
    margin-left: calc(1103 / var(--font-size) * 1em);
  }
  .about-card {
    background: rgba(255, 255, 255, 0.8);
  }
  .about-card__in {
  }
  .about-card__body {
    padding: calc(57 / var(--font-size) * 1em) 0;
  }
  .about-card-heading .l-sec__header {
    margin-bottom: calc(36 / var(--font-size) * 1em);
  }
  .about-content-list-item--nutrition .c-header-lv2-txt::before {
    background: url("../img/about_nutrition_deco_ttl.png") no-repeat center / contain;
  }
  .about-content-list-item--nutrition .c-header-lv2 {
    --ico-w: 67;
    --ico-h: 57;
  }
  .about-card-mv {
  }
  .about-card-mv__in {
  }
  .about-card-read {
    margin-top: calc(32 / var(--font-size) * 1em);
  }
  .about-card-read__in {
    padding: 0 calc(72 / var(--font-size) * 1em);
  }
  .about-card-read-txt__container {
  }
  .about-card-read-graph + .about-card-read-txt__container {
    margin-top: calc(24 / var(--font-size) * 1em);
  }
  .about-card-read-txt {
  }
  .about-card-read-txt-note {
    margin-top: calc(4 / var(--font-size) * 1em);
  }
  .about-card-read-graph {
    margin-top: calc(20 / var(--font-size) * 1em);
  }
  .about-content-list-item--nutrition .about-card-read-graph {
    margin-top: calc(20 / var(--font-size) * 1em);
  }
  .about-card-read-graph-img {
  }
  .about-card-read-graph-note {
    margin-top: calc(18 / var(--font-size) * 1em);
  }
}
@media all and (min-width: 768px) and (max-width: 1200px) {
  .about-sec__in::before {
    margin-left: calc(850 / var(--font-size) * 1em);
    width: calc(273 / var(--font-size) * .8rem);
    height: calc(215 / var(--font-size) * .8rem);
  }
  .about-sec__in::after {
    margin-right: calc(906 / var(--font-size) * 1em);
    width: calc(186 / var(--font-size) * .8rem);
    height: calc(158 / var(--font-size) * .8rem);
  }
  .about-content-list-item--what::before {
    margin-right: calc(964 / var(--font-size) * 1em);
    width: calc(135 / var(--font-size) * .8rem);
    padding-top: calc(128 / var(--font-size) * .8rem);
  }
  .about-content-list-item--nutrition::before {
    margin-left: calc(990 / var(--font-size) * 1em);
    width: calc(60 / var(--font-size) * .8rem);
    padding-top: calc(93 / var(--font-size) * .8rem);
  }
}
@media all and (max-width: 767px) {
  .about-sec .c-header-title__txt {
  }
  .about-sec {
    background: var(--bg-wood);
  }
  .about-sec .l-sec__header{
    margin-bottom: calc(56 / var(--font-size) * 1em);
  }
  .about-sec .c-header-title {
    --header-w: 300;
  }
  .about-sec__in {
    position: relative;
  }
  .about-sec__in::before {
    content: "";
    display: block;
    background: url("../img/about_deco_01.png") no-repeat center / contain;
    width: calc(197 / var(--font-size) * 1em);
    height: calc(155 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    right: 0;
    margin-right: calc(-7 / var(--font-size) * 1em);
    margin-top: calc(-58 / var(--font-size) * 1em);
  }
  .about-sec__in::after {
    content: "";
    display: block;
    background: url("../img/about_deco_04.png") no-repeat center / contain;
    width: calc(186 / var(--font-size) * 1em);
    height: calc(158 / var(--font-size) * 1em);
    position: absolute;
    bottom: 0;
    left: 0;
    margin-left: calc(11 / var(--font-size) * 1em);
    margin-bottom: calc(-49 / var(--font-size) * 1em);
  }
  .about-sec__body {
  }
  .about-content {
  }
  .about-content-list__container {
  }
  .about-content-list {
  }
  .about-content-list-item {
    position: relative;
  }
  .about-content-list-item + .about-content-list-item {
    margin-top: calc(58 / var(--font-size) * 1em);
  }
  .about-content-list-item--what {
  }
  .about-content-list-item--what::before {
    content: "";
    display: block;
    background: url("../img/about_deco_02.png") no-repeat center / contain;
    width: calc(135 / var(--font-size) * 1em);
    padding-top: calc(128 / var(--font-size) * 1em);
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: calc(-96 / var(--font-size) * 1em);
    margin-left: calc(-20 / var(--font-size) * 1em);
    z-index: 1;
  }
  .about-content-list-item--nutrition {
  }
  .about-content-list-item--nutrition::before {
    content: "";
    display: block;
    background: url("../img/about_deco_03.png") no-repeat center / contain;
    width: calc(60 / var(--font-size) * 1em);
    padding-top: calc(93 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    right: 0;
    margin-top: calc(1062 / var(--font-size) * 1em);
    margin-right: calc(-12 / var(--font-size) * 1em);
  }
  .about-card {
    background: rgba(255, 255, 255, 0.8);
  }
  .about-card__in {
  }
  .about-card__body {
    padding: calc(57 / var(--font-size) * 1em) 0;
  }
  .about-card-heading .l-sec__header {
    margin-bottom: calc(36 / var(--font-size) * 1em);
  }
  .about-content-list-item--nutrition .c-header-lv2-txt::before {
    background: url("../img/about_nutrition_deco_ttl.png") no-repeat center / contain;
  }
  .about-content-list-item--nutrition .c-header-lv2 {
    --ico-w: 75;
    --ico-h: 65;
  }
  .about-card-mv {
  }
  .about-card-mv__in {
  }
  .about-card-read {
    margin-top: calc(32 / var(--font-size) * 1em);
  }
  .about-card-read__in {
    padding: 0 calc(30 / var(--font-size) * 1em);
  }
  .about-card-read-txt__container {
  }
  .about-card-read-graph + .about-card-read-txt__container {
    margin-top: calc(24 / var(--font-size) * 1em);
  }
  .about-card-read-txt {
  }
  .about-card-read-txt-note {
    margin-top: calc(4 / var(--font-size) * 1em);
  }
  .about-card-read-graph {
    margin-top: calc(32 / var(--font-size) * 1em);
  }
  .about-content-list-item--nutrition .about-card-read-graph {
    margin-top: calc(30 / var(--font-size) * 1em);
  }
  .about-card-read-graph-img {
  }
  .about-card-read-graph-note {
    margin-top: calc(20 / var(--font-size) * 1em);
  }
  .about-card-read-graph-note .c-txt + .c-note{
    margin-top: calc(2 / var(--font-size) * 1em);
  }
}

/* --------------------------------------------------------------------------
  LINEUP
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .lineup-sec {
    background: var(--bg-rough);
  }
  .lineup-sec .l-sec__header {
    margin-bottom: calc(42 / var(--font-size) * 1em);
  }
  .lineup-sec .c-header-title {
    --header-w: 309;
  }
  .lineup-sec__in {
  }
  .lineup-sec__body {
  }
  .lineup-content {
  }
  .lineup-content-txt {
  }
  .lineup-list__container {
    margin-top: calc(32 / var(--font-size) * 1em);
  }
  .lineup-list {
    display: flex;
    flex-wrap: wrap;
    gap: (40 / var(--font-size) * 1em) 0;
    justify-content: space-between;
  }
  .lineup-list-item--no-sugar {
    --thema-color-100: var(--no-sugar-color-100);
    --thema-color-10: var(--no-sugar-color-10);
  }
  .lineup-list-item--original {
    --thema-color-100: var(--original-color-100);
    --thema-color-10: var(--original-color-10);
  }
  .lineup-list-item--triple {
    --thema-color-100: var(--triple-color-100);
    --thema-color-10: var(--triple-color-10);
  }
  .lineup-list-item {
    width: calc((100% - (40 / var(--font-size) * 1em)) / 2);
  }
  .lineup-list-item--triple.lineup-list-item {
    width: 100%;
    margin-top: calc(36 / var(--font-size) * 1em);
  }
  .lineup-card {
    padding-top: calc(136 / var(--font-size) * 1em);
  }
  .lineup-list-item--triple .lineup-card {
    padding-top: calc(81 / var(--font-size) * 1em);
  }
  .lineup-card__in {
    background: rgba(255, 255, 255, 0.8);
    padding: 0 calc(32 / var(--font-size) * 1em);
    position: relative;
  }
  .lineup-card__body {
    padding: calc(47 / var(--font-size) * 1em) 0 calc(57 / var(--font-size) * 1em);
  }
  .lineup-card__body::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(216 / var(--font-size) * 1em);
  }
  .lineup-list-item--triple .lineup-card__body::before {
    width: calc(230 / var(--font-size) * 1em);
    padding-top: 0;
  }
  .lineup-list-item--triple .lineup-card__body {
    display: flex;
    align-items: center;
    padding-bottom: calc(37 / var(--font-size) * 1em);
  }
  .lineup-card-img {
    width: calc(298 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(-136 / var(--font-size) * 1em);
    z-index: 1;
  }
  .lineup-list-item--triple .lineup-card-img {
    width: calc(119 / var(--font-size) * 1em);
    left: 0;
    margin-left: calc(78 / var(--font-size) * 1em);
    margin-top: calc(-81 / var(--font-size) * 1em);
    transform: translate(0);
  }
  .lineup-card-img::before {
    content: "";
    display: block;
    -webkit-mask-image: url("../img/lineup_bg_card.png");
    mask-image: url("../img/lineup_bg_card.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(--thema-color-10);
    width: calc(378 / var(--font-size) * 1em);
    padding-top: calc(189 / var(--font-size) * 1em);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: calc(-37 / var(--font-size) * 1em);
    z-index: -1;
  }
  .lineup-list-item--triple .lineup-card-img::before {
    -webkit-mask-image: url("../img/lineup_bg_card_small.png");
    mask-image: url("../img/lineup_bg_card_small.png");
    width: calc(183 / var(--font-size) * 1em);
    padding-top: calc(119 / var(--font-size) * 1em);
  }
  .lineup-card-read {
  }
  .lineup-card-read-heading {
    margin-bottom: calc(16 / var(--font-size) * 1em);
  }
  .lineup-list-item--triple .lineup-card-read-heading {
    margin-bottom: calc(10 / var(--font-size) * 1em);
  }
  .lineup-card-read-heading-sub {
    text-align: center;
  }
  .lineup-card-read-heading-sub__label {
    font-size: calc(18 / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .lineup-card-read-heading-txt {
    text-align: center;
    position: relative;
    padding-bottom: calc(16 / var(--font-size) * 1em);
  }
  .lineup-card-read-heading-sub + .lineup-card-read-heading-txt {
    margin-top: calc(12 / var(--font-size) * 1em);
  }
  .lineup-list-item--triple .lineup-card-read-heading-txt,
  .lineup-list-item--triple .lineup-card-read-heading-sub,
  .lineup-list-item--triple .lineup-card-read-txt {
    text-align: left;
  }
  .lineup-card-read-heading-txt::before {
    content: "";
    display: block;
    background: url("../img/lineup_deco_heading_card.png") no-repeat center / contain;
    width: calc(154 / var(--font-size) * 1em);
    padding-top: calc(16 / var(--font-size) * 1em);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .lineup-list-item--triple .lineup-card-read-heading-txt {
    margin-bottom: calc(4 / var(--font-size) * 1em);
    padding-bottom: 0;
  }
  .lineup-list-item--triple .lineup-card-read-heading-txt::before {
    content: none;
  }
  .lineup-card-read-heading-txt__label {
    font-size: calc(28 / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .lineup-card-read-heading-txt__label--deco {
    background: radial-gradient(circle at center, var(--thema-color-100) 10%, transparent 20%) repeat-x top right / 1.05em calc(4 / 28 * 1em);
    padding-top: calc(2 / var(--font-size) * 1em);
  }
  .lineup-card-read-txt {
    text-align: center;
  }
  .lineup-card-read-txt__label {
    color: var(--main-color-500);
    font-size: calc(16 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    line-height: calc(28.8 / 16);
  }
  .lineup-card-read-note {
    margin-top: calc(6 / var(--font-size) * 1em);
  }
  .lineup-card-btn {
    margin-top: calc(32 / var(--font-size) * 1em);
  }
  .lineup-list-item--triple .lineup-card-btn {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: calc(87 / var(--font-size) * 1em);
    margin-right: calc(43 / var(--font-size) * 1em);
    width: calc(206 / var(--font-size) * 1em);
  }
  .lineup-card-btn .c-btn {
    --btn-bg-color: var(--thema-color-100);
    --btn-border-color: var(--thema-color-100);
  }
  .lineup-card-btn .c-btn__body {
    flex-direction: column;
  }
}
@media all and (max-width: 767px) {
  .lineup-sec {
    background: var(--bg-rough);
  }
  .lineup-sec .c-header-title {
    --header-w: 309;
  }
  .lineup-sec__in {
  }
  .lineup-sec__body {
    padding-top: calc(78 / var(--font-size) * 1em);
  }
  .lineup-content {
  }
  .lineup-content-txt {
  }
  .lineup-list__container {
    margin-top: calc(32 / var(--font-size) * 1em);
  }
  .lineup-list {
  }
  .lineup-list-item--no-sugar {
    --thema-color-100: var(--no-sugar-color-100);
    --thema-color-10: var(--no-sugar-color-10);
  }
  .lineup-list-item--original {
    --thema-color-100: var(--original-color-100);
    --thema-color-10: var(--original-color-10);
  }
  .lineup-list-item--triple {
    --thema-color-100: var(--triple-color-100);
    --thema-color-10: var(--triple-color-10);
  }
  .lineup-list-item {
  }
  .lineup-list-item + .lineup-list-item {
    margin-top: calc(56 / var(--font-size) * 1em);
  }
  .lineup-card {
    padding-top: calc(176 / var(--font-size) * 1em);
  }
  .lineup-list-item--triple .lineup-card {
    padding-top: calc(100 / var(--font-size) * 1em);
  }
  .lineup-card__in {
    background: rgba(255, 255, 255, 0.8);
    padding: 0 calc(20 / var(--font-size) * 1em);
    position: relative;
  }
  .lineup-card__body {
    padding: calc(47 / var(--font-size) * 1em) 0 calc(57 / var(--font-size) * 1em);
  }
  .lineup-card__body::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: calc(250 / var(--font-size) * 1em);
  }
  .lineup-card-img {
    width: calc(360 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: calc(-176 / var(--font-size) * 1em);
    z-index: 1;
  }
  .lineup-list-item--triple .lineup-card__body::before {
    padding-top: calc(246 / var(--font-size) * 1em);
  }
  .lineup-list-item--triple .lineup-card-img {
    width: calc(138 / var(--font-size) * 1em);
    margin-top: calc(-100 / var(--font-size) * 1em);
  }
  .lineup-card-img::before {
    content: "";
    display: block;
    -webkit-mask-image: url("../img/lineup_bg_card.png");
    mask-image: url("../img/lineup_bg_card.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(--thema-color-10);
    width: calc(453 / var(--font-size) * 1em);
    padding-top: calc(228 / var(--font-size) * 1em);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: calc(-37 / var(--font-size) * 1em);
    z-index: -1;
  }
  .lineup-list-item--triple .lineup-card-img::before {
    -webkit-mask-image: url("../img/lineup_bg_card_small.png");
    mask-image: url("../img/lineup_bg_card_small.png");
    width: calc(306 / var(--font-size) * 1em);
    padding-top: calc(200 / var(--font-size) * 1em);
  }
  .lineup-card-read {
  }
  .lineup-card-read-heading {
  }
  .lineup-card-read-heading-sub {
    text-align: center;
  }
  .lineup-card-read-heading-sub__label {
    font-size: calc(28 / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .lineup-card-read-heading-txt {
    text-align: center;
    position: relative;
    padding-bottom: calc(22 / var(--font-size) * 1em);
    margin-bottom: calc(20 / var(--font-size) * 1em);
  }
  .lineup-card-read-heading-sub + .lineup-card-read-heading-txt {
    margin-top: calc(24 / var(--font-size) * 1em);
  }
  .lineup-card-read-heading-txt::before {
    content: "";
    display: block;
    background: url("../img/lineup_deco_heading_card.png") no-repeat center / contain;
    width: calc(173 / var(--font-size) * 1em);
    padding-top: calc(18 / var(--font-size) * 1em);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .lineup-list-item--triple .lineup-card-read-heading-txt {
    margin-bottom: calc(10 / var(--font-size) * 1em);
    padding-bottom: 0;
  }
  .lineup-list-item--triple .lineup-card-read-heading-txt::before {
    content: none;
  }
  .lineup-card-read-heading-txt__label {
    font-size: calc(32 / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    letter-spacing: calc(80 / 1000 * 1em);
  }
  .lineup-card-read-heading-txt__label--deco {
    background: radial-gradient(circle at center, var(--thema-color-100) 10%, transparent 20%) repeat-x top right / 1.05em calc(6 / 32 * 1em);
    padding-top: calc(4 / var(--font-size) * 1em);
  }
  .lineup-card-read-txt {
    text-align: center;
  }
  .lineup-list-item--triple .lineup-card-read-txt {
    margin-top: calc(16 / var(--font-size) * 1em);
  }
  .lineup-card-read-txt__label {
    color: var(--main-color-500);
    font-size: calc(24 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    line-height: calc(43.2 / 24);
    letter-spacing: calc(40 / 1000 * 1em);
  }
  .lineup-card-read-note {
    margin-top: calc(6 / var(--font-size) * 1em);
  }
  .lineup-card-btn {
    width: calc(630 / var(--font-size) * 1em);
    margin: calc(40 / var(--font-size) * 1em) auto 0;
  }
  .lineup-list-item--triple .lineup-card-btn {
    width: calc(304 / var(--font-size) * 1em);
  }
  .lineup-card-btn .c-btn {
    --btn-bg-color: var(--thema-color-100);
    --btn-border-color: var(--thema-color-100);
  }
  .lineup-card-btn .c-btn__body {
    flex-direction: column;
  }
}

/* --------------------------------------------------------------------------
  VOICE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .voice-sec {
    background: var(--bg-wood);
  }
  .voice-sec .c-header-title {
    --header-w: 248;
  }
  .voice-sec__in {
    position: relative;
  }
  .voice-sec__in::after {
    content: "";
    display: block;
    width: calc(186 / var(--font-size) * 1em);
    padding-top: calc(141 / var(--font-size) * 1em);
    background: url("../img/recipes_deco_01.png") no-repeat center / contain;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: calc(-103 / var(--font-size) * 1em);
    margin-right: calc(1020 / var(--font-size) * 1em);
    z-index: 1;
  }
  .voice-sec__in::before {
    content: "";
    display: block;
    width: calc(367 / var(--font-size) * 1em);
    padding-top: calc(237 / var(--font-size) * 1em);
    background: url("../img/voice_deco_01.png") no-repeat center / contain;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: calc(-47 / var(--font-size) * 1em);
    margin-left: calc(1012 / var(--font-size) * 1em);
  }
  .voice-sec__body {
  }
  .voice-list__container {
    max-width: calc(880 / var(--font-size) * 1em);
    margin: 0 auto;
  }
  .voice-list {
  }
  .voice-list-item {
  }
  .voice-list-item + .voice-list-item {
    margin-top: calc(54 / var(--font-size) * 1em);
  }
  .voice-card {
    background: rgba(255, 255, 255, 0.8);
  }
  .voice-card__in {
    padding: 0 calc(40 / var(--font-size) * 1em);
  }
  .voice-card__body {
    padding: calc(24 / var(--font-size) * 1em) 0;
    display: flex;
    align-items: center;
    position: relative;
  }
  .voice-card__body::before {
    content: "";
    display: block;
    width: calc(152 / var(--font-size) * 1em);
  }
  .voice-card__body::after {
    content: "";
    display: block;
    width: calc(155 / var(--font-size) * 1em);
  }
  .voice-card-read {
  }
  .voice-card-ico {
    width: calc(112 / var(--font-size) * 1em);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .voice-list-item:nth-child(odd) .voice-card-ico {
    left: 0;
  }
  .voice-list-item:nth-child(even) .voice-card-ico {
    right: 0;
  }
  .voice-card-drink {
    width: calc(119 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    margin-top: calc(-30 / var(--font-size) * 1em);
  }
  .voice-list-item:nth-child(odd) .voice-card-drink {
    right: 0;
  }
  .voice-list-item:nth-child(even) .voice-card-drink {
    left: 0;
  }
  .voice-card-read-head {
  }
  .voice-card-read-head__label {
    color: var(--main-color-500);
    font-size: calc(20 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: bold;
    line-height: calc(32 / 20);
  }
  .voice-card-read-txt {
    margin-top: calc(14 / var(--font-size) * 1em);
  }
  .voice-card-read-txt__label {
    color: var(--main-color-500);
    font-size: calc(16 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: 500;
    line-height: calc(28.8 / 16);
  }
}
@media all and (min-width: 768px) and (max-width: 1200px) {
  .voice-sec__in::before {
    margin-left: calc(870 / var(--font-size) * 1em);
    width: calc(367 / var(--font-size) * .8rem);
    padding-top: calc(237 / var(--font-size) * .8rem);
  }
  .voice-sec__in::after {
    margin-right: calc(890 / var(--font-size) * 1em);
    width: calc(186 / var(--font-size) * .8rem);
    padding-top: calc(141 / var(--font-size) * .8rem);
  }
}
@media all and (max-width: 767px) {
  .voice-sec {
    background: var(--bg-wood);
  }
  .voice-sec .l-sec__header {
    margin-bottom: calc(57 / var(--font-size) * 1em);
  }
  .voice-sec .c-header-title {
    --header-w: 248;
  }
  .voice-sec__in {
    position: relative;
  }
  .voice-sec__in::before {
    content: "";
    display: block;
    width: calc(339 / var(--font-size) * 1em);
    padding-top: calc(219 / var(--font-size) * 1em);
    background: url("../img/voice_deco_01.png") no-repeat center / contain;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: calc(-152 / var(--font-size) * 1em);
    margin-right: calc(-121 / var(--font-size) * 1em);
  }
  .voice-sec__body {
    padding-bottom: calc(82 / var(--font-size) * 1em);
  }
  .voice-list__container {
    max-width: calc(880 / var(--font-size) * 1em);
    margin: 0 auto;
  }
  .voice-list {
  }
  .voice-list-item {
  }
  .voice-list-item + .voice-list-item {
    margin-top: calc(57 / var(--font-size) * 1em);
  }
  .voice-card {
    padding-top: calc(56 / var(--font-size) * 1em);
  }
  .voice-card__in {
    background: rgba(255, 255, 255, 0.8);
    padding: 0 calc(40 / var(--font-size) * 1em);
  }
  .voice-card__body {
    padding: calc(74 / var(--font-size) * 1em) 0 calc(24 / var(--font-size) * 1em);
    position: relative;
  }
  .voice-card__body::before {
  }
  .voice-card-read {
  }
  .voice-card-ico {
    width: calc(112 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50% , -50%);
  }
  .voice-card-drink {
    width: calc(144 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    margin-top: calc(-34 / var(--font-size) * 1em);
  }
  .voice-list-item:nth-child(odd) .voice-card-drink {
    right: 0;
    margin-right: calc(-88 / var(--font-size) * 1em);
  }
  .voice-list-item:nth-child(even) .voice-card-drink {
    left: 0;
    margin-left: calc(-88 / var(--font-size) * 1em);
  }
  .voice-card-read-head {
    text-align: center;
  }
  .voice-card-read-head__label {
    color: var(--main-color-500);
    font-size: calc(28 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: bold;
    line-height: calc(50.4 / 28);
  }
  .voice-card-read-txt {
    margin-top: calc(8 / var(--font-size) * 1em);
    text-align: center;
  }
  .voice-card-read-txt__label {
    color: var(--main-color-500);
    font-size: calc(24 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: 500;
    line-height: calc(38.4 / 24);
  }
}

/* --------------------------------------------------------------------------
  RECIPES
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .recipes-sec {
    background: var(--bg-rough);
    position: relative;
  }
  .recipes-sec__in {
    max-width: calc(1200 / 1440 * 100vw);
  }
  .recipes-sec__body {
    padding-bottom: calc(200 / var(--font-size) * 1em);
  }
  .recipe-content {
  }
  .recipe-content-txt {
    margin-bottom: calc(52 / var(--font-size) * 1em);
  }
  .recipe-list__outer {
    position: relative;
  }
  .recipe-list__container {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw + (110 / 1440 * 100vw));
    margin-left: calc(-55 / 1440 * 100vw);
  }
  .recipe-list {
    align-items: end;
  }
  .recipe-list-item {
  }
  .swiper-slide-active {
  }
  .recipe-list-item {
    padding-bottom: calc(82 / 1440 * 100vw);
    transition: all .5s ease;
    min-height: calc(360 / 1440 * 100vw);
    display: flex;
    align-items: end;
  }
  .recipe-list-item.swiper-slide-active.swiper-slide {
    width: calc(450 / 1440 * 100vw) !important;
  }
  .recipe-card {
    width: 100%;
  }
  .recipe-card__in {
  }
  a.recipe-card__in:hover {
    opacity: 1;
  }
  a.recipe-card__in img {
    transition: all .3s ease;
  }
  .recipe-card__body {
    position: relative;
  }
  .recipe-card-img__container {
  }
  .recipe-card-img {
  }
  .recipe-card-img {
    position: relative;
  }
  .recipe-list-item--new .recipe-card-img::before {
    content: "";
    display: block;
    background: #eaaa58;
    width: calc(80 / 1440 * 100vw);
    padding-top: calc(36 / 1440 * 100vw);
    border-radius: 0 0 calc(20 / 1440 * 100vw) 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .recipe-card-img::before,
  .recipe-card-img::after {
    z-index: 1;
  }
  .recipe-list-item--new .recipe-card-img::after {
    content: "";
    background: url("../img/recipe_ico_new.svg") no-repeat center / contain;
    display: block;
    width: calc(41 / 1440 * 100vw);
    padding-top: calc(22 / 1440 * 100vw);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: calc(7 / 1440 * 100vw);
    margin-left: calc(20 / 1440 * 100vw);
  }
  .recipe-card .recipe-card-img-ico {
    background: var(--white-color);
    width: calc(37 / 1440 * 100vw);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: calc(10 / 1440 * 100vw);
    margin-right: calc(8 / 1440 * 100vw);
    transition: all .3s ease;
  }
  .recipe-card .recipe-card-img-ico:hover {
    opacity: 0.7;
  }
  .recipe-card-img-ico::before {
    content: "";
    display: block;
    width: calc(17 / 1440 * 100vw);
    padding-top: calc(17 / 1440 * 100vw);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(2 / 1440 * 100vw);
    margin-left: calc(0.5 / 1440 * 100vw);
    transform: translate(-50% , -50%);
  }
  .i-fav[data-fav="off"].recipe-card-img-ico::before {
    background: url("../img/recipes_ico_favorite.png") no-repeat center / contain;
  }
  .i-fav[data-fav="on"].recipe-card-img-ico::before {
    background: url("../img/recipes_ico_favorite_current.png") no-repeat center / contain;
  }
  .recipe-card-read {
    min-height: calc(40 / 1440 * 100vw);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
  }
  .recipe-card-read-txt {
    margin-top: calc(18 / 1440 * 100vw);
  }
  .recipe-card-read-txt__label {
    color: var(--main-color-500);
    font-size: calc(18 / 1440 * 100vw);
    font-family: var(--font-zen-kaku);
    font-weight: 500;
    line-height: calc(28.8 / 18);
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .swiper-slide-active .recipe-card-read-txt__label {
    font-size: calc(20 / 1440 * 100vw);
  }
  .recipe-swiper-btn__container {
    width: calc(112 / 1440 * 100vw);
    display: flex;
    align-items: center;
    gap: calc(12 / 1440 * 100vw);
    position: absolute;
    top: 0;
    right: 0;
  }
  .recipe-swiper-btn-next,
  .recipe-swiper-btn-prev {
    background: #7cccd9;
    width: calc(50 / 1440 * 100vw);
    height: 100%;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    position: relative;
    margin-top: 0;
    left: auto;
    right: auto;
    transition: all .3s ease;
  }
  .recipe-swiper-btn-next:hover,
  .recipe-swiper-btn-prev:hover {
    opacity: 0.7;
  }
  .recipe-swiper-btn-next::after,
  .recipe-swiper-btn-prev::after {
    content: "";
    display: block;
    -webkit-mask-image: url("../img/ico_arrow.svg");
    mask-image: url("../img/ico_arrow.svg");
    -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);
    width: calc(8 / 1440 * 100vw);
    padding-top: calc(14 / 1440 * 100vw);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }
  .recipe-swiper-btn-prev::after {
    transform: translate(-50% , -50%) rotate(-180deg);
  }
  .recipe-swiper-btn-next {
  }
  .recipe-swiper-btn-prev {
  }
}
@media all and (max-width: 767px) {
  .recipes-sec {
    background: var(--bg-rough);
    position: relative;
  }
  .recipes-sec__in {
    position: relative;
    max-width: calc(1200 / var(--font-size) * 1em);
  }
  .recipes-sec__in::before {
    content: "";
    display: block;
    width: calc(186 / var(--font-size) * 1em);
    padding-top: calc(141 / var(--font-size) * 1em);
    background: url("../img/recipes_deco_01.png") no-repeat center / contain;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: calc(-32 / var(--font-size) * 1em);
    margin-left: calc(14 / var(--font-size) * 1em);
  }
  .recipes-sec__body {
    padding-bottom: calc(230 / var(--font-size) * 1em);
  }
  .recipes-sec .c-header-title {
    --header-w: 345;
  }
  .recipe-content {
  }
  .recipe-content-txt {
    margin-bottom: calc(36 / var(--font-size) * 1em);
  }
  .recipe-list__outer {
    position: relative;
  }
  .recipe-list__container {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100vw + (60 / var(--font-size) * 1em));
    margin-left: calc(-30 / var(--font-size) * 1em);
  }
  .recipe-list {
    align-items: end;
  }
  .recipe-list-item {
  }
  .swiper-slide-active {
  }
  .recipe-list-item {
    padding-bottom: calc(100 / var(--font-size) * 1em);
    transition: all .5s ease;
    min-height: calc(345 / var(--font-size) * 1em);
    display: flex;
    align-items: end;
  }
  .recipe-list-item.swiper-slide-active {
    width: calc(400 / var(--font-size) * 1em) !important;
  }
  .recipe-card {
  }
  .recipe-card__in {
  }
  .recipe-card__body {
    position: relative;
  }
  .recipe-card-img__container {
  }
  .recipe-card-img {
  }
  .recipe-card-img {
    position: relative;
  }
  .recipe-list-item--new .recipe-card-img::before {
    content: "";
    display: block;
    background: #eaaa58;
    width: calc(80 / var(--font-size) * 1em);
    padding-top: calc(36 / var(--font-size) * 1em);
    border-radius: 0 0 calc(20 / var(--font-size) * 1em) 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .recipe-list-item--new .recipe-card-img::after {
    content: "";
    background: url("../img/recipe_ico_new.svg") no-repeat center / contain;
    display: block;
    width: calc(41 / var(--font-size) * 1em);
    padding-top: calc(22 / var(--font-size) * 1em);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: calc(7 / var(--font-size) * 1em);
    margin-left: calc(20 / var(--font-size) * 1em);
  }
  .recipe-card .recipe-card-img-ico {
    background: var(--white-color);
    width: calc(37 / var(--font-size) * 1em);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: calc(8 / var(--font-size) * 1em);
    margin-right: calc(8 / var(--font-size) * 1em);
  }
  .recipe-card-img-ico::before {
    content: "";
    display: block;
    width: calc(18 / var(--font-size) * 1em);
    padding-top: calc(18 / var(--font-size) * 1em);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: calc(1 / var(--font-size) * 1em);
    transform: translate(-50% , -50%);
  }
  .i-fav[data-fav="off"].recipe-card-img-ico::before {
    background: url("../img/recipes_ico_favorite.png") no-repeat center / contain;
  }
  .i-fav[data-fav="on"].recipe-card-img-ico::before {
    background: url("../img/recipes_ico_favorite_current.png") no-repeat center / contain;
  }
  .recipe-card-read {
    min-height: calc(40 / var(--font-size) * 1em);
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
  }
  .recipe-card-read-txt {
    margin-top: calc(16 / var(--font-size) * 1em);
  }
  .recipe-card-read-txt__label {
    color: var(--main-color-500);
    font-size: calc(28 / var(--font-size) * 1em);
    font-family: var(--font-zen-kaku);
    font-weight: 500;
    line-height: calc(39.2 / 28);
    letter-spacing: calc(60 / 1000 * 1em);
  }
  .recipe-swiper-btn__container {
    display: none;
  }
  .mc-breadcrumb {
    margin-top: calc(-70 / var(--font-size) * 1em);
  }
}

/* --------------------------------------------------------------------------
  RECIPE-BTN
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .resipe-btn__container {
    text-align: center;
    margin-top: calc(68 / var(--font-size) * 1em);
  }
  .resipe-btn-read {
    position: relative;
    display: flex;
    justify-content: center;
    gap: calc(20 / var(--font-size) * 1em);
    margin-bottom: calc(30 / var(--font-size) * 1em);
  }
  .resipe-btn-read::before,
  .resipe-btn-read::after {
    content: "";
    display: block;
    background: url("../img/deco_btn_txt.png") no-repeat center / contain;
    width: calc(28 / var(--font-size) * 1em);
    padding-top: calc(37 / var(--font-size) * 1em);
  }
  .resipe-btn-read::after {
    transform: scale(-1 , 1);
  }
  .resipe-btn-read-txt {
    text-align: center;
  }
  .resipe-btn-read-txt__label {
    font-size: calc(16 / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    line-height: calc(25.6 / 16);
  }
  .resipe-btn {
    width: calc(440 / var(--font-size) * 1em);
    margin: 0 auto;
    position: relative;
    z-index: 0;
  }
  .resipe-btn .c-btn {
    --btn-bg-color: var(--black-color);
    --btn-border-color: var(--black-color);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    --btn-min-height: 86;
    --btn-px: 70;
    transition: all .3s ease;
  }
  .resipe-btn a.c-btn:hover {
    --btn-bg-color: var(--black-color);
    --btn-border-color: var(--black-color);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    opacity: 1;
    transform: translate(calc(-6 / var(--font-size) * 1em) , calc(6 / var(--font-size) * 1em));
  }
  .resipe-btn .c-btn__in {
    position: relative;
  }
  .resipe-btn .c-btn__in::before {
    content: "";
    display: block;
    width: 100%;
    height: calc(var(--btn-min-height) / var(--font-size) * 1em);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1em);
    border: solid var(--black-color) 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(calc(-6 / var(--font-size) * 1em) , calc(6 / var(--font-size) * 1em));
    z-index: -1;
    transition: all .3s ease;
  }
  .resipe-btn a.c-btn:hover .c-btn__in::before{
    transform: translate(0);
  }
  .resipe-btn .c-btn-arrow__label {
    margin-left: calc(24 / var(--font-size) * 1em);
  }
  .resipe-btn .c-btn-arrow__label .c-svg {
    width: calc(12 / var(--font-size) * 1em);
  }
}
@media all and (max-width: 767px) {
  .resipe-btn__container {
    text-align: center;
    margin-top: calc(68 / var(--font-size) * 1em);
  }
  .resipe-btn-read {
    position: relative;
    display: flex;
    justify-content: center;
    gap: calc(20 / var(--font-size) * 1em);
    margin-bottom: calc(40 / var(--font-size) * 1em);
  }
  .resipe-btn-read::before,
  .resipe-btn-read::after {
    content: "";
    display: block;
    background: url("../img/deco_btn_txt.png") no-repeat center / contain;
    width: calc(44 / var(--font-size) * 1em);
    padding-top: calc(60 / var(--font-size) * 1em);
  }
  .resipe-btn-read::after {
    transform: scale(-1 , 1);
  }
  .resipe-btn-read-txt {
    text-align: center;
  }
  .resipe-btn-read-txt__label {
    font-size: calc(24 / var(--font-size) * 1em);
    font-family: var(--font-zen-maru);
    font-weight: bold;
    line-height: calc(38.4 / 24);
  }
  .resipe-btn {
    width: calc(560 / var(--font-size) * 1em);
    margin: 0 auto;
    position: relative;
    z-index: 0;
  }
  .resipe-btn .c-btn {
    --btn-bg-color: var(--black-color);
    --btn-border-color: var(--black-color);
    --btn-txt-color: var(--white-color);
    --btn-arrow-color: var(--white-color);
    --btn-min-height: 128;
    --btn-px: 70;
    transition: all .3s ease;
  }
  .resipe-btn .c-btn__in {
    position: relative;
  }
  .resipe-btn .c-btn__in::before {
    content: "";
    display: block;
    width: 100%;
    height: calc(var(--btn-min-height) / var(--font-size) * 1em);
    border-radius: calc(var(--btn-radius) / var(--font-size) * 1em);
    border: solid var(--black-color) 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(calc(-10 / var(--font-size) * 1em) , calc(10 / var(--font-size) * 1em));
    z-index: -1;
    transition: all .3s ease;
  }
  .resipe-btn .c-btn-arrow__label {
    margin-left: calc(8 / var(--font-size) * 1em);
  }
  .resipe-btn .c-btn-arrow__label .c-svg {
    width: calc(24 / var(--font-size) * 1em);
  }
}

/* --------------------------------------------------------------------------
  TOP-BANNER
-------------------------------------------------------------------------- */
.l-sec__banner-text{
  display: block;
  margin: 0 auto;
}
.l-sec__banner-link{
  display: block;
  margin: 0 auto;
}
@media all and (min-width: 768px), print {
  .l-sec__banner-text{
    padding: 38px 0 10px;
    width: 423px;
  }
  .l-sec__banner-link{
    width: 607px;
  }
  .l-sec__banner-link{
    transition: all 300ms ease;
  }
}
@media all and (max-width: 767px) {
  .l-sec__banner-text{
    padding: 19px 0 7px;
    width: calc(500 / var(--font-size) * 1em);
  }
  .l-sec__banner-link{
    width: calc(640 / var(--font-size) * 1em);
  }
}

@media all and (min-width: 768px), print {
  .gfooter__inner {
    margin-top: 0;
  }
}