/***********************************************************************
media queries setting
**********************************************************************/
.br-pc {
  display: block; }

.br-sp {
  display: none; }

.pc {
  display: block; }

.sp {
  display: none !important; }

@media (max-width: 768px) {
  .br-pc {
    display: none; }

  .br-sp {
    display: block; }

  .pc {
    display: none !important; }

  .sp {
    display: block !important; } }
/***********************************************************************
page style
**********************************************************************/
html {
  scroll-behavior: smooth; }

.lemon-curd-wrapper {
  /*center-head*/
  /*concept*/
  /*beginning-wrapper*/
  /*product-wrapper*/
  /*recipe-wrapper*/ }
  .lemon-curd-wrapper h1, .lemon-curd-wrapper h2, .lemon-curd-wrapper h3, .lemon-curd-wrapper h4, .lemon-curd-wrapper p, .lemon-curd-wrapper li {
    font-feature-settings: "palt"; }
  .lemon-curd-wrapper p {
    font-size: clamp(14px, 1.8vw, 16px); }
  .lemon-curd-wrapper .center-head {
    font-size: clamp(23px, 3.9vw, 48px);
    font-weight: normal;
    position: relative;
    letter-spacing: 5px;
    text-align: center; }
    @media (max-width: 768px) {
      .lemon-curd-wrapper .center-head {
        font-weight: bold;
        letter-spacing: 1px; } }
    .lemon-curd-wrapper .center-head span {
      border-bottom: 3px solid #ffc30d;
      padding: 0 4rem 1rem;
      position: relative; }
      @media (max-width: 768px) {
        .lemon-curd-wrapper .center-head span {
          padding: 0 .5rem 1.5rem; } }
      .lemon-curd-wrapper .center-head span::before, .lemon-curd-wrapper .center-head span::after {
        content: "";
        background: #ffc30d;
        border-radius: 50%;
        display: block;
        height: 13px;
        width: 13px;
        position: absolute;
        bottom: -8px; }
      .lemon-curd-wrapper .center-head span::before {
        left: 0; }
      .lemon-curd-wrapper .center-head span::after {
        right: 0; }
    .lemon-curd-wrapper .center-head + .en {
      color: #9c9c9c;
      font-size: 14px;
      letter-spacing: 5px;
      margin-top: 2rem;
      text-align: center; }
      @media (max-width: 768px) {
        .lemon-curd-wrapper .center-head + .en {
          font-size: 10px;
          letter-spacing: 1px; } }
  .lemon-curd-wrapper .concept-text .desc {
    margin: 3rem auto 0;
    text-align: center;
    width: 85%; }
  .lemon-curd-wrapper .img-list {
    display: flex;
    margin-top: 7rem;
    justify-content: space-between; }
    @media (max-width: 768px) {
      .lemon-curd-wrapper .img-list {
        flex-wrap: wrap;
        margin-top: 3.5rem;
        justify-content: center; } }
    .lemon-curd-wrapper .img-list li {
      width: 19%; }
      @media (max-width: 768px) {
        .lemon-curd-wrapper .img-list li {
          padding: 1%;
          width: 30%; } }
      .lemon-curd-wrapper .img-list li img {
        width: 100%; }
  .lemon-curd-wrapper .beginning-wrapper {
    margin: 7rem auto 0;
    max-width: 925px;
    width: 85%; }
    @media (max-width: 768px) {
      .lemon-curd-wrapper .beginning-wrapper {
        margin: 3rem auto 0; } }
    .lemon-curd-wrapper .beginning-wrapper .center-head {
      font-size: clamp(18px, 2.4vw, 28px);
      font-weight: bold; }
    .lemon-curd-wrapper .beginning-wrapper .desc {
      margin: 3rem auto 0; }
  .lemon-curd-wrapper .product-wrapper {
    background: #f4f4f4;
    margin-top: 7rem;
    padding: 5rem 0;
    /*product-list*/ }
    @media (max-width: 768px) {
      .lemon-curd-wrapper .product-wrapper {
        margin-top: 3rem;
        padding: 4rem 0; } }
    .lemon-curd-wrapper .product-wrapper .inner {
      margin: auto;
      max-width: 828px;
      width: 85%;
      /*item*/ }
      .lemon-curd-wrapper .product-wrapper .inner .item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        /*text-box*/ }
        @media (max-width: 768px) {
          .lemon-curd-wrapper .product-wrapper .inner .item {
            display: block; } }
        .lemon-curd-wrapper .product-wrapper .inner .item .image {
          width: 50%; }
          @media (max-width: 768px) {
            .lemon-curd-wrapper .product-wrapper .inner .item .image {
              width: 100%; } }
        .lemon-curd-wrapper .product-wrapper .inner .item .text-box {
          width: 44%; }
          @media (max-width: 768px) {
            .lemon-curd-wrapper .product-wrapper .inner .item .text-box {
              margin-top: 1rem;
              width: 100%; } }
          .lemon-curd-wrapper .product-wrapper .inner .item .text-box .name {
            font-size: clamp(17px, 2.4vw, 24px);
            font-weight: bold;
            padding: 0;
            margin: 0;
            line-height: 140%; }
          .lemon-curd-wrapper .product-wrapper .inner .item .text-box .place {
            background: #fff;
            display: inline-block;
            padding: 8px 12px; }
            @media (max-width: 768px) {
              .lemon-curd-wrapper .product-wrapper .inner .item .text-box .place {
                font-size: 13px;
                padding: 4px 12px; } }
          .lemon-curd-wrapper .product-wrapper .inner .item .text-box .desc {
            margin: 0; }
          @media (max-width: 768px) {
            .lemon-curd-wrapper .product-wrapper .inner .item .text-box .item-link {
              text-align: center; } }
          .lemon-curd-wrapper .product-wrapper .inner .item .text-box .item-link a {
            float: none;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
            margin-top: 3rem;
            padding: 2rem 0;
            width: 100%; }
            @media (max-width: 768px) {
              .lemon-curd-wrapper .product-wrapper .inner .item .text-box .item-link a {
                background-image: url(../img/product/arrow.png);
                font-size: 17px;
                margin: 1.5rem auto 0;
                padding: 2rem 0;
                width: 82%; } }
        .lemon-curd-wrapper .product-wrapper .inner .item + .item {
          margin-top: 4rem; }
          @media (max-width: 768px) {
            .lemon-curd-wrapper .product-wrapper .inner .item + .item {
              margin-top: 2rem; } }
    .lemon-curd-wrapper .product-wrapper .desc-box {
      background: #ffd215;
      border-radius: 8px;
      margin-top: 3rem;
      padding: 1.5rem 2rem; }
      @media (max-width: 768px) {
        .lemon-curd-wrapper .product-wrapper .desc-box {
          margin: 2rem auto 0;
          padding: 1rem 1rem;
          width: 90%; } }
      .lemon-curd-wrapper .product-wrapper .desc-box .sub-head {
        font-size: 15px;
        font-weight: bold;
        margin: 0; }
        @media (max-width: 768px) {
          .lemon-curd-wrapper .product-wrapper .desc-box .sub-head {
            font-size: 13px; } }
      .lemon-curd-wrapper .product-wrapper .desc-box p {
        font-size: 13px;
        margin: 0.5rem 0 0; }
  .lemon-curd-wrapper .recipe-wrapper {
    margin-top: 7rem;
    /*recipe-detail*/ }
    @media (max-width: 768px) {
      .lemon-curd-wrapper .recipe-wrapper {
        margin-top: 3rem; } }
    .lemon-curd-wrapper .recipe-wrapper .center-head {
      margin-bottom: 3rem; }
    .lemon-curd-wrapper .recipe-wrapper .page-link {
      margin: auto;
      text-align: center;
      width: 90%; }
      .lemon-curd-wrapper .recipe-wrapper .page-link li {
        display: inline; }
      .lemon-curd-wrapper .recipe-wrapper .page-link a {
        background: #ffd215;
        border-radius: 25px;
        color: #000;
        display: inline-block;
        margin-bottom: 1rem;
        padding: .5rem 1rem;
        text-decoration: none; }
        .lemon-curd-wrapper .recipe-wrapper .page-link a:hover {
          text-decoration: underline; }
    .lemon-curd-wrapper .recipe-wrapper .inner {
      margin: 4rem auto 0; }
      @media (max-width: 768px) {
        .lemon-curd-wrapper .recipe-wrapper .inner {
          margin: 2rem auto 0; } }
    .lemon-curd-wrapper .recipe-wrapper .recipe-detail {
      position: relative;
      /*text-box*/ }
      .lemon-curd-wrapper .recipe-wrapper .recipe-detail + .recipe-detail {
        margin-top: 7.5rem; }
        @media (max-width: 768px) {
          .lemon-curd-wrapper .recipe-wrapper .recipe-detail + .recipe-detail {
            margin-top: 4.5rem; } }
      .lemon-curd-wrapper .recipe-wrapper .recipe-detail.back-gray {
        background: #f4f4f4;
        padding: 6rem 0; }
        @media (max-width: 768px) {
          .lemon-curd-wrapper .recipe-wrapper .recipe-detail.back-gray {
            padding: 4.5rem 0 4.5rem; } }
        .lemon-curd-wrapper .recipe-wrapper .recipe-detail.back-gray .cross-head {
          background: #fff !important; }
      .lemon-curd-wrapper .recipe-wrapper .recipe-detail .detail-inner {
        margin: auto;
        max-width: 920px;
        width: 85%; }
      .lemon-curd-wrapper .recipe-wrapper .recipe-detail .sticky-image {
        float: left;
        position: sticky;
        top: 3rem;
        width: 35%; }
        @media (max-width: 768px) {
          .lemon-curd-wrapper .recipe-wrapper .recipe-detail .sticky-image {
            float: none;
            margin: auto;
            width: 100%;
            position: relative;
            top: 0; } }
        .lemon-curd-wrapper .recipe-wrapper .recipe-detail .sticky-image img {
          width: 100%; }
      .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box {
        float: right;
        width: 60%;
        /*how-to-make*/ }
        @media (max-width: 768px) {
          .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box {
            float: none;
            margin-top: 1rem;
            width: 100%; } }
        .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .recipe-name {
          background: url("../img/lemon-curd/icon-circle.png") no-repeat 0 center;
          font-size: clamp(16px, 2.2vw, 20px);
          margin: 0;
          padding-left: 2rem; }
          @media (max-width: 768px) {
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .recipe-name {
              padding-left: 2rem; } }
        .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .cross-head {
          background: #f4f4f4;
          font-size: clamp(13px, 1.8vw, 15px);
          font-weight: bold;
          padding: .5rem 1rem;
          margin: 2.5rem 0 1rem; }
          @media (max-width: 768px) {
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .cross-head {
              margin-top: 1.5rem; } }
        .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .material,
        .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make,
        .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .comment {
          font-size: clamp(13px, 1.7vw, 14px);
          padding-left: .5rem; }
        .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .material {
          padding-left: .5rem; }
        .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make {
          margin-top: 1.5rem;
          /*li*/ }
          .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li {
            padding-left: 3rem;
            position: relative; }
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li::before {
              content: "1";
              background: #ffd215;
              border-radius: 50%;
              font-size: 15px;
              font-weight: bold;
              padding: 1px 10px;
              position: absolute;
              top: -3px;
              left: 0; }
              @media (max-width: 768px) {
                .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li::before {
                  font-size: 13px;
                  padding: 2px 9px 1px; } }
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li:nth-child(2)::before {
              content: "2"; }
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li:nth-child(3)::before {
              content: "3"; }
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li:nth-child(4)::before {
              content: "4"; }
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li:nth-child(5)::before {
              content: "5"; }
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li:nth-child(6)::before {
              content: "6"; }
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li:nth-child(7)::before {
              content: "7"; }
            .lemon-curd-wrapper .recipe-wrapper .recipe-detail .text-box .how-to-make li + li {
              margin-top: 1.5rem; }

/*lemon-curd*/