main {
  font-feature-settings: "palt";
  padding-top: 0 !important;
  color: #333; }
  @media screen and (max-width: 750px) {
    main {
      font-size: 14px; } }
  main .contents_header {
    background: url(../img/header_bg.png) repeat;
    padding: 50px 20px 70px; }
    @media screen and (max-width: 750px) {
      main .contents_header {
        padding: 20px; } }
    main .contents_header .header_wrap {
      max-width: 1160px;
      margin: auto;
      align-items: end;
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 750px) {
        main .contents_header .header_wrap {
          display: block; } }
      main .contents_header .header_wrap .contents_logo {
        max-width: 630px; }
        @media screen and (max-width: 1130px) {
          main .contents_header .header_wrap .contents_logo {
            width: 48%; } }
        @media screen and (max-width: 750px) {
          main .contents_header .header_wrap .contents_logo {
            width: 100%;
            margin: auto; } }
        main .contents_header .header_wrap .contents_logo .logo {
          position: relative; }
          main .contents_header .header_wrap .contents_logo .logo .img_logo {
            transform-origin: left bottom;
            animation: fade 0.5s forwards;
            animation-delay: 0.5s;
            opacity: 0; }
@keyframes fade {
  0% {
    opacity: 0;
    transform: translateY(30px); }
  100% {
    transform: translateX(0);
    opacity: 1; } }
          main .contents_header .header_wrap .contents_logo .logo div {
            position: absolute;
            right: 0;
            top: 100px;
            transform-origin: left bottom;
            animation: anim 0.5s forwards;
            animation-delay: 1.5s;
            opacity: 0; }
            @media screen and (max-width: 1130px) {
              main .contents_header .header_wrap .contents_logo .logo div {
                top: 50px;
                width: 150px; } }
            @media screen and (max-width: 750px) {
              main .contents_header .header_wrap .contents_logo .logo div {
                width: 120px; } }
@keyframes anim {
  0% {
    opacity: 0;
    scale: 0.1; }
  80% {
    opacity: 1;
    scale: 1.1; }
  100% {
    opacity: 1;
    scale: 1; } }
        main .contents_header .header_wrap .contents_logo .illust_product {
          margin-top: 40px;
          display: flex;
          align-items: center;
          animation: fade 0.5s forwards;
          animation-delay: 0.5s;
          opacity: 0; }
          @media screen and (max-width: 750px) {
            main .contents_header .header_wrap .contents_logo .illust_product {
              justify-content: space-around;
              margin-top: 10px; } }
          main .contents_header .header_wrap .contents_logo .illust_product div {
            margin-right: 25px; }
            @media screen and (max-width: 750px) {
              main .contents_header .header_wrap .contents_logo .illust_product div {
                margin: 0 15px 0 0; } }
      main .contents_header .header_wrap .slide {
        position: relative;
        max-width: 500px;
        height: 415px;
        opacity: 0;
        animation: fade 0.5s forwards;
        animation-delay: 1s; }
@keyframes anim2 {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
        @media screen and (max-width: 1130px) {
          main .contents_header .header_wrap .slide {
            width: 48%;
            height: auto; } }
        @media screen and (max-width: 750px) {
          main .contents_header .header_wrap .slide {
            width: 95%;
            margin: 20px auto 0; } }
        main .contents_header .header_wrap .slide .slider li {
          border-radius: 20px;
          overflow: hidden;
          border: solid 1px #999; }
          @media screen and (max-width: 750px) {
            main .contents_header .header_wrap .slide .slider li {
              height: auto; } }
          @media screen and (max-width: 750px) {
            main .contents_header .header_wrap .slide .slider li img {
              height: auto; } }
    main .contents_header .message {
      max-width: 1160px;
      margin: 20px auto 0;
      animation: fade 0.5s forwards;
      animation-delay: 2s;
      opacity: 0; }
      @media screen and (max-width: 750px) {
        main .contents_header .message {
          margin: 40px auto 0; } }
      main .contents_header .message .inline_text {
        font-family: 'Kiwi Maru', serif;
        font-size: 24px;
        line-height: 1.8;
        background: linear-gradient(transparent 70%, #FECEFF 0%);
        display: inline; }
        @media screen and (max-width: 750px) {
          main .contents_header .message .inline_text {
            font-size: 14px; } }
  main section {
    padding: 60px 20px 80px;
    max-width: 100% !important;
    margin-bottom: 0 !important; }
    @media screen and (max-width: 750px) {
      main section {
        padding: 20px; } }
    main section .unit_title {
      max-width: 1160px;
      margin: 0 auto 60px;
      padding-left: 50px;
      background: url("../img/icon_pen.png") 0 0px no-repeat; }
      @media screen and (max-width: 750px) {
        main section .unit_title {
          padding-left: 30px;
          margin: 0 auto 30px;
          background-size: 12px; } }
      main section .unit_title h2 {
        border-bottom: none;
        font-size: 45px;
        font-family: 'Kiwi Maru', serif;
        display: inline;
        font-weight: 500;
        padding-right: 20px;
        letter-spacing: -0.06em; }
        @media screen and (max-width: 750px) {
          main section .unit_title h2 {
            font-size: 20px; } }
    main section .recipe {
      max-width: 1160px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between; }
      @media screen and (max-width: 750px) {
        main section .recipe {
          display: block; } }
      main section .recipe .inner {
        max-width: 530px; }
        @media screen and (max-width: 1130px) {
          main section .recipe .inner {
            max-width: 48%;
            width: 48%; } }
        @media screen and (max-width: 750px) {
          main section .recipe .inner {
            max-width: 95%;
            width: 95%;
            margin: 60px auto; } }
        main section .recipe .inner .precipe_photo {
          margin-bottom: 30px;
          position: relative; }
          @media screen and (max-width: 750px) {
            main section .recipe .inner .precipe_photo {
              margin-bottom: 20px; }
              main section .recipe .inner .precipe_photo div img {
                width: 100%; } }
          main section .recipe .inner .precipe_photo a {
            display: block;
            position: absolute;
            z-index: 2;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            border: solid 1px #FF4646;
            text-align: center;
            width: 145px;
            height: 145px;
            right: 20px;
            bottom: 20px;
            padding: 25px 0;
            transition: .3s; }
            @media screen and (max-width: 750px) {
              main section .recipe .inner .precipe_photo a {
                padding: 15px 0;
                width: 100px;
                height: 100px;
                right: 10px;
                bottom: 10px; } }
            main section .recipe .inner .precipe_photo a img {
              width: 55%;
              transition: .3s; }
            main section .recipe .inner .precipe_photo a::after {
              content: "";
              display: block;
              width: 133px;
              height: 133px;
              border: dashed 1px #FF4646;
              border-radius: 50%;
              position: absolute;
              top: 4px;
              left: 4px;
              transition: .3s; }
              @media screen and (max-width: 750px) {
                main section .recipe .inner .precipe_photo a::after {
                  width: 88px;
                  height: 88px; } }
            main section .recipe .inner .precipe_photo a:hover {
              background: #fff; }
              main section .recipe .inner .precipe_photo a:hover img {
                transform: scale(1.1); }
          main section .recipe .inner .precipe_photo div {
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            z-index: 1;
            line-height: 0; }
          main section .recipe .inner .precipe_photo::after {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 20px;
            transform: rotate(5deg);
            position: absolute;
            top: 0;
            left: 0; }
        main section .recipe .inner h3 {
          font-size: 20px;
          font-family: 'Kiwi Maru', serif;
          display: inline;
          font-weight: 500;
          background: linear-gradient(transparent 70%, #FFCEA5 0%);
          color: #FF4646;
          padding-right: 20px; }
          @media screen and (max-width: 750px) {
            main section .recipe .inner h3 {
              font-size: 16px; } }
        main section .recipe .inner p {
          margin: 20px 0; }
          @media screen and (max-width: 750px) {
            main section .recipe .inner p {
              margin: 15px 0; } }
          main section .recipe .inner p + a {
            display: inline-block;
            font-weight: bold;
            padding: 10px 60px 10px 40px;
            color: #fff;
            border-radius: 50px;
            position: relative;
            background: url("../img/arrow.svg") right 5px center no-repeat #FF4646;
            transition: .3s; }
            main section .recipe .inner p + a:hover {
              transform: scale(1.1);
              opacity: .7; }
    main section .info {
      max-width: 1160px;
      margin: 60px auto 0;
      border-radius: 20px;
      background: #fff;
      padding: 30px;
      box-shadow: 0px 0px 14px -1px #ccc;
      position: relative; }
      @media screen and (max-width: 750px) {
        main section .info {
          padding: 10px;
          margin: 30px auto 0; } }
      main section .info .wrap {
        background: url(../img/header_bg.png) repeat;
        padding: 30px 30px 10px 30px;
        border-radius: 20px;
        overflow: hidden; }
        @media screen and (max-width: 750px) {
          main section .info .wrap {
            padding: 20px 20px 0 20px; } }
        main section .info .wrap:before {
          content: "?";
          font-size: 700px;
          font-family: serif;
          font-weight: bold;
          color: #aaa;
          display: block;
          opacity: 15%;
          z-index: -1;
          transform: rotate(-30deg);
          position: absolute;
          top: 0;
          height: 100%;
          width: 100%;
          left: 10%;
          line-height: 0.7; }
          @media screen and (max-width: 750px) {
            main section .info .wrap:before {
              font-size: 500px;
              left: 50%;
              line-height: 1; } }
        main section .info .wrap header {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          font-family: 'M PLUS Rounded 1c', sans-serif; }
          main section .info .wrap header div {
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 82px;
            height: 82px;
            border-radius: 50%;
            text-align: center;
            font-size: 25px;
            margin-right: 20px; }
            @media screen and (max-width: 750px) {
              main section .info .wrap header div {
                font-size: 16px;
                width: 50px;
                height: 50px; } }
          main section .info .wrap header h2 {
            font-size: 30px;
            margin: 0;
            border-bottom: 0;
            font-weight: 500;
            color: #555; }
            @media screen and (max-width: 750px) {
              main section .info .wrap header h2 {
                font-size: 20px;
                line-height: 1.4;
                width: 80%; } }
        main section .info .wrap .main_area {
          margin-top: 40px;
          display: flex;
          justify-content: space-between;
          color: #555; }
          @media screen and (max-width: 750px) {
            main section .info .wrap .main_area {
              display: block;
              margin-top: 20px; } }
          main section .info .wrap .main_area .text_area {
            width: 60%; }
            @media screen and (max-width: 750px) {
              main section .info .wrap .main_area .text_area {
                width: 100%; } }
            main section .info .wrap .main_area .text_area p {
              line-height: 1.9; }
          main section .info .wrap .main_area .photo_area {
            width: 35%; }
            @media screen and (max-width: 750px) {
              main section .info .wrap .main_area .photo_area {
                width: 100%;
                text-align: center; } }
    main section.unit01 {
      border-top: solid 10px #FFD80D;
      background: #FFF8DE; }
      main section.unit01 .unit_title h2 {
        background: linear-gradient(transparent 70%, #FFEE97 50%); }
      main section.unit01 .inner .precipe_photo div {
        border: solid 1px #FFD80D; }
      main section.unit01 .inner .precipe_photo::after {
        border: solid 1px #FFD80D; }
      main section.unit01 .info::after {
        content: "";
        display: block;
        position: absolute;
        top: -100px;
        right: 60px;
        width: 90px;
        height: 130px;
        background: url("../img/illust_02.svg") 0 0 no-repeat; }
        @media screen and (max-width: 750px) {
          main section.unit01 .info::after {
            background-size: 70%;
            top: -80px;
            right: 5%; } }
      main section.unit01 .info .wrap {
        position: relative;
        border: solid 10px #FFD80D; }
        @media screen and (max-width: 750px) {
          main section.unit01 .info .wrap {
            border: solid 5px #FFD80D; } }
        main section.unit01 .info .wrap header div {
          background: #FFD80D; }
        main section.unit01 .info .wrap .photo_area {
          text-align: right; }
    main section.unit02 {
      border-top: solid 10px #F99A71;
      background: #FFEEDE; }
      main section.unit02 .unit_title h2 {
        background: linear-gradient(transparent 70%, #FFD5BF 50%); }
      main section.unit02 .inner .precipe_photo div {
        border: solid 1px #FBB18C; }
      main section.unit02 .inner .precipe_photo::after {
        border: solid 1px #FBB18C; }
      main section.unit02 .info::after {
        content: "";
        display: block;
        position: absolute;
        top: -100px;
        right: 60px;
        width: 90px;
        height: 130px;
        background: url("../img/illust_03.svg") 0 0 no-repeat; }
        @media screen and (max-width: 750px) {
          main section.unit02 .info::after {
            background-size: 70%;
            top: -80px;
            right: 5%; } }
      main section.unit02 .info .wrap {
        position: relative;
        border: solid 10px #FBB18C; }
        main section.unit02 .info .wrap::before {
          font-size: 500px;
          line-height: 0.5; }
          @media screen and (max-width: 750px) {
            main section.unit02 .info .wrap::before {
              left: 28%;
              line-height: 1; } }
        @media screen and (max-width: 750px) {
          main section.unit02 .info .wrap {
            border: solid 5px #FBB18C; } }
        main section.unit02 .info .wrap header div {
          background: #F99A71; }
        main section.unit02 .info .wrap .photo_area {
          text-align: right; }
    main section.unit03 {
      border-top: solid 10px #9D79CC;
      background: #FAF5FF; }
      main section.unit03 .unit_title h2 {
        background: linear-gradient(transparent 70%, #E3D2FA 50%); }
      main section.unit03 .inner .precipe_photo div {
        border: solid 1px #9D79CC; }
      main section.unit03 .inner .precipe_photo::after {
        border: solid 1px #9D79CC; }
      main section.unit03 .info::after {
        content: "";
        display: block;
        position: absolute;
        top: -100px;
        right: 60px;
        width: 90px;
        height: 130px;
        background: url("../img/illust_04.svg") 0 0 no-repeat; }
        @media screen and (max-width: 750px) {
          main section.unit03 .info::after {
            background-size: 70%;
            top: -80px;
            right: 5%; } }
      main section.unit03 .info .wrap {
        position: relative;
        border: solid 10px #9D79CC; }
        main section.unit03 .info .wrap::before {
          font-size: 500px;
          line-height: 0.5; }
          @media screen and (max-width: 750px) {
            main section.unit03 .info .wrap::before {
              left: 28%;
              line-height: 1; } }
        @media screen and (max-width: 750px) {
          main section.unit03 .info .wrap {
            border: solid 5px #9D79CC; } }
        main section.unit03 .info .wrap header div {
          background: #9D79CC; }
        main section.unit03 .info .wrap .photo_area {
          text-align: center; }
    main section.unit04 {
      border-top: solid 10px #9CD365;
      background: #F2FDDC; }
      main section.unit04 .unit_title h2 {
        background: linear-gradient(transparent 70%, #D4F1B2 50%); }
      main section.unit04 .inner .precipe_photo div {
        border: solid 1px #9CD365; }
      main section.unit04 .inner .precipe_photo::after {
        border: solid 1px #9CD365; }
      main section.unit04 .info::after {
        content: "";
        display: block;
        position: absolute;
        top: -100px;
        right: 60px;
        width: 90px;
        height: 130px;
        background: url("../img/illust_05.svg") 0 0 no-repeat; }
        @media screen and (max-width: 750px) {
          main section.unit04 .info::after {
            background-size: 70%;
            top: -80px;
            right: 5%; } }
      main section.unit04 .info .wrap {
        position: relative;
        border: solid 10px #9CD365; }
        main section.unit04 .info .wrap::before {
          font-size: 500px;
          line-height: 0.5; }
          @media screen and (max-width: 750px) {
            main section.unit04 .info .wrap::before {
              left: 28%;
              line-height: 1; } }
        @media screen and (max-width: 750px) {
          main section.unit04 .info .wrap {
            border: solid 5px #9CD365; } }
        main section.unit04 .info .wrap header div {
          background: #9CD365; }
        main section.unit04 .info .wrap .photo_area {
          text-align: center; }
  main .product_links {
    background: #FFFDEF;
    padding: 40px 20px; }
    main .product_links ul {
      max-width: 1160px;
      margin: auto;
      display: flex;
      justify-content: space-between; }
      main .product_links ul li {
        width: 48%; }
        main .product_links ul li a {
          display: flex;
          align-items: center;
          padding: 20px;
          border-radius: 20px;
          border: solid 1px #FF4646;
          background: url("../img/arrow2.svg") right 20px center no-repeat #fff;
          color: #FF4646;
          transition: .3s;
          font-weight: bold; }
          @media screen and (max-width: 750px) {
            main .product_links ul li a {
              padding: 15px;
              display: block;
              height: 100%;
              background-image: none; }
              main .product_links ul li a p {
                text-align: center; } }
          main .product_links ul li a:hover {
            border: solid 1px #F21717;
            background: url("../img/arrow2.svg") right 20px center no-repeat #FFECEC; }
            @media screen and (max-width: 750px) {
              main .product_links ul li a:hover {
                background-image: none; } }
          main .product_links ul li a div {
            width: 75px;
            margin-right: 20px; }
            @media screen and (max-width: 750px) {
              main .product_links ul li a div {
                margin: auto; } }
  main .unit_title, main .recipe, main .info {
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px);
    transition: opacity 1s, visibility 1s, transform 1s; }
    main .unit_title.is-fadein, main .recipe.is-fadein, main .info.is-fadein {
      opacity: 1;
      visibility: visible;
      transform: translateX(0); }

/*-- slick --*/
.slider {
  position: relative; }
  .slider::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    border: solid 1px #999;
    border-radius: 20px;
    background: #F5F5F5;
    transform: rotate(5deg);
    position: absolute;
    top: 0;
    left: 10px;
    z-index: -1; }

.slider .slick-slide {
  width: 500px;
  height: 405px;
  margin: 0;
  position: relative;
  overflow: hidden; }

.slider .slick-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; }

.dots .slick-dots {
  text-align: center; }

.dots .slick-dots li {
  display: inline-block; }

.dots .slick-dots button {
  display: block;
  width: 13px;
  height: 13px;
  margin: 6px;
  font-size: 0;
  padding: 0;
  border: 0;
  outline: none;
  cursor: pointer;
  background: #bcbcbc;
  border-radius: 50%; }

.dots .slick-dots .slick-active button {
  background: #3D96FF; }