/* --------------------------------------------------------------------------
  RECIPES
-------------------------------------------------------------------------- */

:root {
  --white-color: #fff;
  --black-color: #000;
  --main-color-500: #2165a8;
  --main-color-100: #8fc7dc;
  --font-size: 16;
  --font-zen-kaku:'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --font-zen-maru:'Zen Maru Gothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}


/* --------------------------------------------------------------------------
  非表示
-------------------------------------------------------------------------- */
/* PCで非表示 */
@media all and (min-width: 1025px), print {
  .u-hide-pc {
    display: none;
  }
}
/* PC、タブレットで非表示 */
@media all and (min-width: 768px), print {
  .u-hide-tab-pc {
    display: none;
  }
}
/* タブレットのみ非表示 */
@media all and (min-width: 768px) and (max-width: 1024px) {
  .u-hide-tab {
    display: none;
  }
}
/* SPで非表示 */
@media all and (max-width: 767px) {
  .u-hide-sp {
    display: none;
  }
}
/* --------------------------------------------------------------------------
  行揃え
-------------------------------------------------------------------------- */
.u-center {
  text-align: center;
}
/* TAB,PCのみテキストセンター */
@media all and (min-width: 768px), print {
  .u-center-tab-pc {
    text-align: center;
  }
}
/* SPのみテキストセンター */
@media all and (max-width: 767px) {
  .u-center-sp {
    text-align: center;
  }
}

.u-left {
  text-align: left;
}
/* TAB,PCのみテキストセンター */
@media all and (min-width: 768px), print {
  .u-left-tab-pc {
    text-align: left;
  }
}
/* SPのみテキストセンター */
@media all and (max-width: 767px) {
  .u-left-sp {
    text-align: left;
  }
}

.u-right {
  text-align: right;
}
/* TAB,PCのみテキストセンター */
@media all and (min-width: 768px), print {
  .u-right-tab-pc {
    text-align: right;
  }
}
/* SPのみテキストセンター */
@media all and (max-width: 767px) {
  .u-right-sp {
    text-align: right;
  }
}
.u-justify {
  text-align: justify;
  text-justify: inter-ideograph;
}
.u-combine {
  text-combine-upright: all;
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
}
/* --------------------------------------------------------------------------
  強調
-------------------------------------------------------------------------- */
.u-bold {
  font-weight: 700;
}
.u-black {
  font-weight: 900;
}

/* --------------------------------------------------------------------------
  背景
-------------------------------------------------------------------------- */
/* main */
.u-bg-white {
  background-color: var(--white-color);
}
.u-bg-main-100 {
  background-color: var(--main-color-100);
}
.u-bg-main-10 {
  background-color: var(--main-color-10);
}

/* color */
.u-color-white {
  color: var(--white-color);
}
.u-color-main-500 {
  color: var(--main-color-500);
}
.u-color-main-100 {
  color: var(--main-color-100);
}
.u-color-main-10 {
  color: var(--main-color-10);
}


/* --------------------------------------------------------------------------
  フォント
-------------------------------------------------------------------------- */
.main-container button,
.main-container input,
.main-container optgroup,
.main-container select,
.main-container textarea {
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
.main-container h1,
.main-container h2,
.main-container h3,
.main-container h4,
.main-container h5,
.main-container h6 {
  font-weight: 700;
  font-family: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
}
.u-font-zen-kaku {
  font-family: var(--font-zen-kaku);
}
.u-font-zen-maru {
  font-family: var(--font-zen-maru);
}

.u-space{
  letter-spacing: -3px;
}

/* ==========================================================================
  TEXT COMPONENT
========================================================================== */
/* --------------------------------------------------------------------------
  テキスト
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .c-txt {
    --txt-font-size: 16;
    --txt-line-height: 1.8;
    --txt-font-famliy: var(--font-zen-kaku);
    font-size: calc(var(--txt-font-size) * 1px);
    line-height: var(--txt-line-height);
    font-family: var(--txt-font-famliy);
    letter-spacing: calc(50 / 1000 * 1em);
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

  .c-txt sub{
    top: -0.5em;
  }

  .c-txt sub {
    bottom: -0.1em;
  }

  .c-txt a {
    word-break: break-all;
  }

  /* L */
  .c-txt--xxxxl {
    --txt-font-size: 28;
  }
  .c-txt--xxxl {
    --txt-font-size: 24;
  }
  .c-txt--xxl {
    --txt-font-size: 22;
  }
  .c-txt--xl {
    --txt-font-size: 20;
  }
  .c-txt--l {
    --txt-font-size: 18;
  }

  /* M */
  .c-txt--m {
    --txt-font-size: 16;
  }

  /* S */
  .c-txt--s {
    --txt-font-size: 14;
  }
  .c-txt--xs {
    --txt-font-size: 12;
  }
  .c-txt--xxs {
    --txt-font-size: 11;
  }
  .c-txt--xxxs {
    --txt-font-size: 10;
  }
  .u-text-link {
    text-decoration: underline;
  }
  .u-text-link:hover {
    text-decoration: none;
  }

}
@media all and (max-width: 767px) {
  .c-txt {
    --txt-font-size: 16;
    --txt-line-height: 1.8;
    font-size: calc(var(--txt-font-size) / var(--font-size) * 1em);
    line-height: var(--txt-line-height);
    font-family: var(--font-zen-kaku);
    font-weight: 500;
  }
  .c-txt sub,
  .c-txt sub {
    font-size: 0.5em;
  }

  .c-txt sub{
    top: -0.5em;
  }

  .c-txt sub {
    bottom: -0.1em;
  }
  .c-txt a {
    word-break: break-all;
  }

  /* L */
  .c-txt--xxxxl {
    --txt-font-size: 18;
  }
  .c-txt--xxxl {
    --txt-font-size: 24;
  }
  .c-txt--xxl {
    --txt-font-size: 22;
  }
  .c-txt--xl {
    --txt-font-size: 20;
  }
  .c-txt--l {
    --txt-font-size: 18;
  }

  /* M */
  .c-txt--m {
    --txt-font-size: 32;
  }
  .c-txt--m-sp {
    --txt-font-size: 32;
  }
  .c-txt--s-sp {
    --txt-font-size: 28;
  }

  /* S */
  .c-txt--s {
    --txt-font-size: 28;
  }
  .c-txt--xs {
    --txt-font-size: 24;
  }
  .c-txt--xxs {
    --txt-font-size: 22;
  }
  .c-txt--xxxs {
    --txt-font-size: 20;
  }

  .u-text-link {
    text-decoration: underline;
  }

}


@media all and (min-width: 768px), print {
  .recipes-sec {
    position: relative;
  }
  .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 {
    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%;
  }
  a.recipe-card__in:hover {
    opacity: 1;
  }
  a.recipe-card__in img {
    transition: all .3s ease;
  }
  .recipe-card__body {
    position: relative;
  }
  .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("/brand/assets/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%;
    border-color: transparent;
    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("/brand/tonyugurt/assets/img/top/recipes_ico_favorite.png") no-repeat center / contain;
  }
  .i-fav[data-fav="on"].recipe-card-img-ico::before {
    background: url("/brand/tonyugurt/assets/img/top/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 {
    font-size: calc(18 / 1440 * 100vw);
    font-weight: 500;
    line-height: calc(28.8 / 18);
    letter-spacing: calc(50 / 1000 * 1em);
  }

  .recipe-swiper-btn__container {
    width: calc(112 / 1440 * 100vw);
    display: flex;
    align-items: center;
    gap: calc(12 / 1440 * 100vw);
    position: absolute;
    top: 0;
    right: calc(202 / 1440 * 100vw);
  }
  .recipe-swiper-btn-next,
  .recipe-swiper-btn-prev {
    background: #07913a;
    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("/brand/assets/img/ico_arrow.svg");
    mask-image: url("/brand/assets/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);
  }
  .c-lineup-section .c-recipe-container__title{
    margin-top: 80px;
  }
  .c-lineup-section .c-recipe-container__title img {
    margin: 0 auto 0;
  }
}
@media all and (max-width: 767px) {
  .recipes-sec {
    position: relative;
  }
  .recipes-sec__in {
    position: relative;
    max-width: calc(1200 / var(--font-size) * 1em);
  }
  .recipes-sec .c-header-title {
    --header-w: 345;
  }
  .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 {
    padding-bottom: calc(100 / var(--font-size) * 1em);
    transition: all .5s ease;
    min-height: calc(240 / var(--font-size) * 1em);
    display: flex;
    align-items: end;
  }
  .recipe-list-item.swiper-slide-active {
    width: calc(230 / var(--font-size) * 1em) !important;
  }
  .recipe-card__body {
    position: relative;
  }
  .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("/brand/assets/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);
    border-color: transparent;
    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("/brand/tonyugurt/assets/img/top/recipes_ico_favorite.png") no-repeat center / contain;
  }
  .i-fav[data-fav="on"].recipe-card-img-ico::before {
    background: url("/brand/tonyugurt/assets/img/top/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 {
    font-size: 14px;
    font-family: var(--font-zen-kaku);
    font-weight: 500;
    line-height: calc(39.2 / 28);
    letter-spacing: calc(6 / 1000 * 1em);
  }
  .recipe-swiper-btn__container {
    display: none;
  }
  .c-lineup-section .c-recipe-container__title img{
    margin: 0 auto;
    max-height: 60px;
  }
}

.recipe-list__outer {
  position: relative;
}

/* --------------------------------------------------------------------------
  RECIPE-BTN
-------------------------------------------------------------------------- */
.resipe-btn__container {
  text-align: center;
}
.resipe-btn{
  margin: 0 auto;
  position: relative;
  z-index: 0;
}
.resipe-btn .c-btn{
  background-color: #039252;
  border: 2px solid #039252;
  border-radius: 999px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 300ms ease;
}
.resipe-btn .c-btn__body {
  position: relative;
}
.resipe-btn .c-button__text{
  height: auto;
  fill: #ffffff;
  display: inline-block;
}
.resipe-btn .c-btn-arrow{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.resipe-btn .c-btn-arrow__label{
  display: flex;
  align-items: center;
  margin-left: calc(10 / 16 * 1em);
  height: 100%;
}
.resipe-btn .c-btn-arrow__label i {
  mask: url(/brand/tonyugurt/assets/img/common/ico_arrow.svg) no-repeat center center / contain;
  -webkit-mask: url(/brand/tonyugurt/assets/img/common/ico_arrow.svg) no-repeat center center / contain;
  background: #fff;
  display: block;
  position: absolute;
}
.resipe-btn__container {
  font-size: 16px;
}
@media all and (min-width: 768px), print {
  .resipe-btn__container {
    margin-top: calc(52 / var(--font-size) * 1em);
  }
  .resipe-btn{
    width: calc(428 / 16 * 1em);
  }
  .resipe-btn .c-btn{
    min-height: 80px;
  }
  .resipe-btn .c-btn:hover{
    background-color: #fff;
  }
  .resipe-btn .c-btn:hover .c-button__text{
    fill: #039252;
  }
  .resipe-btn .c-btn__body {
    padding: 0 calc(10 / 16 * 1em);
  }
  .resipe-btn .c-button__text{
    width: calc(240 / 16 * 1em);
  }

  .resipe-btn .c-btn-arrow{
    width: calc(70 / 16 * 1em);
    height: calc(86 / 16 * 1em);
  }
  .resipe-btn .c-btn-arrow__label {
    margin-left: calc(24 / var(--font-size) * 1em);
  }
  .resipe-btn .c-btn-arrow__label i {
    width: calc(12 / 16 * 1em);
    height: calc(12 / 16 * 1em);
    transition: all 0.3s;
    right: calc(46 / 16 * 1em);
    z-index: 5;
  }
  .resipe-btn .c-btn:hover .c-btn-arrow__label i{
    background-color: #039252;
  }
}
@media all and (max-width: 767px), print {
  .resipe-btn__container {
    margin-top: calc(32 / var(--font-size) * 1em);
  }
  .resipe-btn{
    width: calc(280 / 16 * 1em);
  }
  .resipe-btn .c-btn{
    min-height: 50px;
  }
  .resipe-btn .c-btn:hover{
    background-color: #fff;
  }
  .resipe-btn .c-btn:hover .c-button__text{
    fill: #039252;
  }
  .resipe-btn .c-btn__body {
    padding: 0 1em;
  }
  .resipe-btn .c-button__text{
    width: calc(150 / 16 * 1em);
  }

  .resipe-btn .c-btn-arrow{
    width: calc(30 / 16 * 1em);
    height: calc(26 / 16 * 1em);
  }
  .resipe-btn .c-btn-arrow__label {
    margin-left: calc(24 / var(--font-size) * 1em);
  }
  .resipe-btn .c-btn-arrow__label i {
    width: calc(10 / 16 * 1em);
    height: calc(10 / 16 * 1em);
    transition: all 0.3s;
    right: calc(25 / 16 * 1em);
    z-index: 5;
  }
  .resipe-btn .c-btn:hover .c-btn-arrow__label i{
    background-color: #039252;
  }
}