/*
$newsColor: (
  col01: #238561,
  col02: #67a2b7,
  col03: #d2843e,
  col04: #cf775b,
  col05: #cf9942,
  col06: #926c28,
  col07: #cc7175,
  col08: #608ea1,
  col09: #5b609a,
  col10: #487390,
  col11: #4e9386,
  col12: #79a153,
  col13: #817499
);
*/
main {
  position: relative;
  background: url("../img/recipe/bg.jpg") center top repeat;
  background-size: 100% auto; }
  @media screen and (min-width: 769px) {
    main {
      padding-bottom: 10rem; } }
  @media screen and (max-width: 768px) {
    main {
      padding-bottom: 20rem; } }

main h1 {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #fff; }
@media screen and (min-width: 769px) {
  main h1 {
    height: 24.5rem;
    padding-bottom: 2rem;
  }
}
@media screen and (max-width: 768px) {
  main h1 {
    height: 40rem;
    padding-bottom: 2rem;
  }
}

main h1 img {
  position: relative;
  display: block; }
  @media screen and (min-width: 769px) {
    main h1 img {
      width: 82.8rem; } }
  @media screen and (max-width: 768px) {
    main h1 img {
      width: 52.8rem; } }
main h1 + p {
  background: #fff;
  line-height: 1;
  font-weight: 900;
  text-align: center;
  color: #ff447e;
}
@media screen and (min-width: 769px) {
  main h1 + p {
    padding: 0.5rem 0 4rem;
    font-size: 2.6rem;
  }
}
@media screen and (max-width: 768px) {
  main h1 + p {
    padding: 0 0 5rem;
    font-size: 2.8rem;
  }
}

.back_btn {
  position: relative; }

.back_btn a {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("../img/btn_bg.jpg") center center no-repeat;
  background-size: 120% auto;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    .back_btn a {
      width: 32.4rem;
      height: 6.8rem;
      border-radius: 3.4rem; } }
  @media screen and (max-width: 768px) {
    .back_btn a {
      width: 42rem;
      height: 9rem;
      border-radius: 4.5rem; } }

.back_btn a p {
  position: relative;
  color: #fff;
  transition: .6s ease-in-out;
  font-weight: 700; }
  @media screen and (min-width: 769px) {
    .back_btn a p {
      line-height: 1em;
      font-size: 2.1rem;
      letter-spacing: 0.05em; } }
  @media screen and (max-width: 768px) {
    .back_btn a p {
      line-height: 1em;
      font-size: 3rem;
      letter-spacing: 0.05em; } }

.back_btn a span {
  position: absolute;
  display: block;
  transition: .6s ease-in-out; }
  @media screen and (min-width: 769px) {
    .back_btn a span {
      top: 2.3rem;
      left: 3rem;
      width: 1.3rem; } }
  @media screen and (max-width: 768px) {
    .back_btn a span {
      top: 3rem;
      left: 4rem;
      width: 1.8rem; } }

@media screen and (min-width: 769px) {
  .back_btn a:hover p {
    opacity: .6; } }

@media screen and (min-width: 769px) {
  .back_btn a:hover span {
    transform: translateX(-1rem); } }