@charset "UTF-8";
/* ==========================================================================
  Reset
  ========================================================================== */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 100%;
  font-weight: normal;
  font-style: normal;
  vertical-align: baseline; }

article, aside, dialog, figure, footer, header, hgroup, nav, section {
  display: block; }

ul, ol {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote::before, blockquote::after, q::before, q::after {
  content: "";
  content: none; }

img {
  font-size: 0;
  line-height: 0; }

a {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  font-weight: bold;
  font-style: italic;
  color: #000; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted #000;
  cursor: help; }

table {
  border-spacing: 0;
  border-collapse: collapse; }

fieldset, img {
  line-height: 0;
  vertical-align: top; }

hr {
  display: none; }

input, select {
  vertical-align: middle; }

* {
  margin: 0;
  padding: 0; }

img {
  vertical-align: bottom; }

html, body {
  width: 100%;
  height: 100%; }

ul, li {
  list-style: none; }

b {
  font-weight: bold; }

iframe {
  border: none;
  outline: none; }

/* ==========================================================================
  Base
  ========================================================================== */
* {
  box-sizing: border-box; }

body {
  color: #333;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
  font-weight: 400;
  line-height: 1;
  background: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  @media screen and (min-width: 769px) {
    body {
      min-width: 1000px; } }
  @media screen and (max-width: 768px) {
    body {
      font-size: 14px; } }

img {
  width: 100%;
  height: auto; }

::selection {
  background: #d6ba78;
  color: #fff; }

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

.sp {
  display: none; }
  @media screen and (max-width: 768px) {
    .sp {
      display: block; } }

/* ==========================================================================
Font
========================================================================== */
h1, h2, h3, h4, h5, h6, strong {
  font-weight: bold; }

a {
  color: #333;
  text-decoration: none; }
  a:hover {
    text-decoration: none; }
    a:hover img {
      opacity: 0.8; }

@media screen and (min-width: 769px) {
  a:hover, a img {
    transition: .2s ease-out; } }
a.btn {
  position: relative;
  display: block;
  max-width: 250px;
  height: 40px;
  margin: 0 auto;
  color: #e50012;
  text-align: center;
  line-height: 40px;
  padding: 0 10px;
  background: #fff;
  border-radius: 20px;
  transition: opacity .25s ease-out;
  font-weight: bold;
  transition: all .2s ease-out; }
  a.btn span {
    font-weight: bold;
    letter-spacing: .05em; }
  a.btn-red {
    background: #e50012;
    color: #fff; }

@media screen and (min-width: 769px) {
  a:hover.btn {
    text-decoration: none;
    background: #d6ba78;
    color: #fff; } }
/* ==========================================================================
Mixin
========================================================================== */
/* ==========================================================================
  Animation
  ========================================================================== */
.anim-fadeout {
  animation: fadeIn 0.2s 0.2s both ease-out; }

@keyframes fadeIn {
  0% {
    opacity: 1;
    transform: translate(0, 0); }
  100% {
    opacity: 0;
    transform: translate(0, 0); } }
.anim-fadein {
  opacity: 0; }

.anim-fadein.is-show {
  animation: fadeIn 0.8s 0.2s both ease-out; }

@keyframes fadeIn {
  0% {
    transform: translate(0, 30px); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }
.anim-slidein-l {
  opacity: 0; }

.anim-slidein-l.is-show {
  animation: slideInL 0.8s 0.2s both ease-out; }

@keyframes slideInL {
  0% {
    transform: translate(-10vw, 0); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }
.anim-slidein-r {
  opacity: 0; }

.anim-slidein-r.is-show {
  animation: slideInR 0.8s 0.2s both ease-out; }

@keyframes slideInR {
  0% {
    transform: translate(10vw, 0); }
  100% {
    opacity: 1;
    transform: translate(0, 0); } }
/* ==========================================================================
UPDATE 0124 takata2２
========================================================================== */
/* ==========================================================================
Layout
========================================================================== */
.l-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0 auto; }

.l-header,
.l-footer,
.l-main {
  position: relative;
  margin: 0 auto; }

.l-section {
  position: relative; }

.l-inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0 2.5%; }
  @media screen and (min-width: 769px) {
    .l-inner {
      max-width: 1000px;
      padding: 0; } }

/* ==========================================================================
HEADER
========================================================================== */
.l-header {
  position: relative;
  width: 100%;
  height: 60px;
  background: #fff; }
  .l-header::after {
    width: 100%;
    height: 6.5vw;
    position: absolute;
    content: "";
    display: block;
    margin: auto auto;
    top: auto;
    right: auto;
    bottom: -6.5vw;
    left: auto;
    margin: auto auto 0;
    background: url(../images/common/wave-white-top.svg) center -1px no-repeat #e50012;
    background-size: 100% auto;
    z-index: 1; }
  .l-header .logo {
    position: absolute;
    content: "";
    display: block;
    margin: auto auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 30vw;
    max-width: 160px;
    padding: 12px 0 0;
    text-align: center;
    z-index: 99; }
    .l-header .logo a {
      display: block; }

@media screen and (min-width: 769px) {
  .l-header {
    height: 80px; }
    .l-header::after {
      position: absolute;
      content: "";
      display: block;
      margin: auto auto;
      top: auto;
      right: auto;
      bottom: -80px;
      left: auto;
      height: 5vw;
      background: url(../images/common/wave-white-top.svg) center bottom no-repeat #e50012;
      background-size: 100% auto; }
    .l-header .logo {
      position: absolute;
      content: "";
      display: block;
      margin: auto auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 200px;
      max-width: 250px;
      padding: 15px 0; } }
.l-header-sub .logo {
  position: absolute;
  content: "";
  display: block;
  margin: auto auto;
  top: 0;
  right: auto;
  bottom: 0;
  left: 5%; }

.l-header-sub .nav-trigger {
  position: absolute;
  background: transparent;
  width: 50px;
  height: 50px;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 9;
  cursor: pointer; }
  .l-header-sub .nav-trigger .lines {
    position: relative; }
    .l-header-sub .nav-trigger .lines span {
      position: absolute;
      z-index: 2;
      background: #e50012;
      left: 10px;
      transition: all .25s ease-out; }
    .l-header-sub .nav-trigger .lines span:nth-child(1) {
      width: 30px;
      height: 2px;
      top: 20px; }
    .l-header-sub .nav-trigger .lines span:nth-child(2) {
      width: 30px;
      height: 2px;
      top: 30px; }
    .l-header-sub .nav-trigger .lines span:nth-child(3) {
      width: 30px;
      height: 2px;
      top: 40px; }
.l-header-sub .nav-trigger.is-active .lines span:nth-child(1) {
  width: 30px;
  top: 30px;
  transform: rotate(-45deg); }
.l-header-sub .nav-trigger.is-active .lines span:nth-child(2) {
  opacity: 0; }
.l-header-sub .nav-trigger.is-active .lines span:nth-child(3) {
  width: 30px;
  top: 30px;
  transform: rotate(45deg); }

.l-header-sub {
  padding: 0; }
  .l-header-sub .gnav {
    display: none;
    overflow: hidden;
    opacity: 0;
    top: 60px;
    bottom: 0;
    left: 0;
    right: -100vw;
    position: absolute;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 8;
    padding: 0 5% 0;
    transition: right .25s ease-out; }
    .l-header-sub .gnav ul {
      position: relative;
      width: 100%;
      margin: 30px 0 0;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-top: 1px solid #e50012; }
      .l-header-sub .gnav ul li {
        overflow: visible;
        border-bottom: 1px solid #e50012;
        text-align: center; }
        .l-header-sub .gnav ul li a {
          display: block;
          padding: 30px 0;
          font-size: 16px;
          color: #e50012; }
          .l-header-sub .gnav ul li a span {
            font-weight: bold;
            line-height: 1.6; }
          .l-header-sub .gnav ul li a:hover {
            color: #fff;
            background: #e50012;
            text-decoration: none;
            opacity: .75; }
  .l-header-sub .gnav.is-active {
    display: block;
    left: 0;
    right: 0;
    opacity: 1; }

@media screen and (min-width: 769px) {
  .l-header-sub .gnav ul li a {
    font-size: 18px;
    padding: 60px 0; } }
/* ==========================================================================
FOOTER
========================================================================== */
.l-footer {
  position: relative; }
  .l-footer p.copyright {
    padding: 10px 2.5%;
    background: #fff;
    color: #333;
    text-align: center;
    font-size: 10px; }
  .l-footer p.footer-privacylink {
    padding: 25px 2.5% 10px;
    text-align: center;
    font-size: 14px;
    border-top: 4px solid #d6ba78; }
    .l-footer p.footer-privacylink a {
      text-decoration: underline; }
  .l-footer p.footer-privacylink::before {
    display: inline;
    content: "▶";
    padding-right: 2px;
    text-decoration: none; }

@media screen and (max-width: 768px) {
  p.footer-privacylink {
    padding: 20px 2.5% 10px;
    font-size: 10px !important; } }
@media screen and (min-width: 769px) {
  .l-footer p.copyright {
    padding: 20px 0;
    font-size: 12px; } }
/* ==========================================================================
==========================================================================

TOP

==========================================================================
========================================================================== */
#rennyutop {
  /* ==========================================================================
MV
========================================================================== */
  /* ==========================================================================
ABOUT
========================================================================== */ }
  #rennyutop .mv {
    margin-top: 6vw;
    padding: 3vw 0 6vw;
    background: url(../images/top/mv-bg-star.png) center top no-repeat, url(../images/common/hokkaido.svg) center 20px no-repeat #e50012;
    background-size: 150% auto, 80% auto; }
    #rennyutop .mv .mv-inner {
      height: 100%; }
  @media screen and (min-width: 769px) {
    #rennyutop .mv {
      margin-top: 80px;
      padding: 0 0 6.6vw;
      background: url(../images/top/mv-bg-star.png) center top no-repeat, url(../images/common/hokkaido.svg) center 20px no-repeat #e50012;
      background-size: auto 80%, 50% auto; }
      #rennyutop .mv .mv-inner {
        max-width: 1000px;
        margin: 0 auto; } }
  #rennyutop .mv h1 {
    width: 70%;
    margin: 35px auto 15px; }
  #rennyutop .mv h2 {
    width: 50%;
    margin: 0 auto 15px; }
  #rennyutop .mv nav ul {
    margin-bottom: 20px;
    padding: 3vw 3%;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; }
    #rennyutop .mv nav ul li {
      width: 32%; }
  #rennyutop .mv figure {
    position: relative;
    width: 100vw;
    height: 46.1vw; }
    #rennyutop .mv figure img {
      position: absolute;
      width: 95%;
      height: auto;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto auto;
      z-index: 3; }
  #rennyutop .mv .bnr-area {
    margin-top: -2vw;
    position: relative;
    padding: 2vw 0;
    background: #fff; }
    #rennyutop .mv .bnr-area::before, #rennyutop .mv .bnr-area::after {
      content: '';
      position: absolute;
      width: 100%; }
    #rennyutop .mv .bnr-area::before {
      height: 6.6vw;
      top: -6.0vw;
      background: url(../images/common/wave-white-btm.svg) center top no-repeat;
      background-size: cover; }
    #rennyutop .mv .bnr-area::after {
      height: 6vw;
      bottom: -5.8vw;
      background: url(../images/common/wave-white-top.svg) center bottom no-repeat;
      background-size: cover; }
    #rennyutop .mv .bnr-area ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center; }
      #rennyutop .mv .bnr-area ul li {
        width: 70%; }
  #rennyutop .mv .mv-twcp-btn {
    display: block;
    width: 80%;
    height: auto;
    margin: 0 auto; }
    #rennyutop .mv .mv-twcp-btn img {
      width: 100%; }
  @media screen and (min-width: 769px) {
    #rennyutop .mv h1 {
      width: 52%;
      margin: 60px auto 30px; }
    #rennyutop .mv h2 {
      width: 30%;
      margin: 0 auto 15px; }
    #rennyutop .mv nav ul {
      margin-bottom: 20px;
      padding: 3vw 3%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between; }
      #rennyutop .mv nav ul li {
        width: 32%; }
    #rennyutop .mv figure {
      width: 100%;
      max-width: 900px;
      margin: 0 auto;
      height: 400px; }
      #rennyutop .mv figure img {
        position: absolute;
        width: 100%;
        height: auto;
        z-index: 3; }
    #rennyutop .mv .bnr-area {
      margin-top: 0;
      padding: 15px 0; }
      #rennyutop .mv .bnr-area::before, #rennyutop .mv .bnr-area::after {
        content: '';
        position: absolute;
        width: 100%; }
      #rennyutop .mv .bnr-area::before {
        height: 6.6vw;
        top: -6.2vw;
        background: url(../images/common/wave-white-btm.svg) center bottom no-repeat; }
      #rennyutop .mv .bnr-area::after {
        height: 6.6vw;
        bottom: -6.2vw;
        background: url(../images/common/wave-white-top.svg) center top no-repeat; }
      #rennyutop .mv .bnr-area ul {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between; }
        #rennyutop .mv .bnr-area ul li {
          width: 49%; }
    #rennyutop .mv .mv-twcp-btn {
      display: block;
      width: 50%;
      height: auto;
      margin: 0 auto;
      padding-top: 15px; }
      #rennyutop .mv .mv-twcp-btn img {
        width: 100%; } }
  #rennyutop .about {
    padding: 5vw 5vw 8vw;
    background: url(../images/top/about-bg-star.png) center center repeat-y #e50012;
    background-size: 120% auto; }
    #rennyutop .about h2 {
      width: 50%;
      margin: 0 auto 15px; }
    #rennyutop .about p {
      text-align: center;
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      line-height: 1.6; }
    #rennyutop .about ul {
      margin-top: -5vw;
      margin-bottom: 3vw;
      padding: 0;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between; }
      @media screen and (max-width: 768px) {
        #rennyutop .about ul li {
          position: relative;
          width: 50%;
          height: auto;
          min-height: 200px;
          margin: 0 auto;
          padding: 3vw; }
          #rennyutop .about ul li h3 {
            position: absolute;
            bottom: 0; }
          #rennyutop .about ul li a {
            position: absolute;
            top: auto;
            right: 0;
            bottom: 8.5vw;
            left: 0;
            margin: 0 auto auto;
            height: 20px;
            line-height: 20px;
            border-radius: 10px;
            width: 80px;
            transition: all .25s ease-out;
            color: #fff;
            font-size: .8rem;
            letter-spacing: -.1em;
            text-align: center;
            font-weight: bold;
            background: #0a4196;
            zoom: .85; }
          #rennyutop .about ul li.pd01 h3 {
            width: calc(1030px/5.2);
            width: calc(1067px/5.2);
            right: 0; }
          #rennyutop .about ul li.pd01 a {
            left: auto;
            right: 6.5vw; }
          #rennyutop .about ul li.pd02 h3 {
            width: calc(1030px/5.2);
            width: calc(1067px/5.2);
            left: 0; }
          #rennyutop .about ul li.pd02 a {
            left: 6.5vw;
            right: auto; } }
    #rennyutop .about div.pd {
      position: relative;
      width: 50%;
      height: auto;
      min-height: 200px;
      margin: 0 auto;
      padding: 3vw; }
      #rennyutop .about div.pd h3 {
        position: absolute;
        bottom: 0; }
      #rennyutop .about div.pd a {
        position: absolute;
        top: auto;
        right: 0;
        bottom: 8.5vw;
        left: 0;
        margin: 0 auto auto;
        height: 20px;
        line-height: 20px;
        border-radius: 10px;
        width: 80px;
        transition: all .25s ease-out;
        color: #fff;
        font-size: .8rem;
        letter-spacing: -.1em;
        text-align: center;
        font-weight: bold;
        background: #0a4196;
        zoom: .85; }
      #rennyutop .about div.pd span {
        position: absolute; }
    #rennyutop .about div.pd03 {
      width: 100%; }
      #rennyutop .about div.pd03 h3 {
        width: 65%;
        margin-right: 35%; }
      #rennyutop .about div.pd03 a {
        bottom: 8vw;
        left: 15vw;
        right: auto; }
      #rennyutop .about div.pd03 span {
        bottom: -2vw;
        left: 48vw;
        width: calc(762px/ 5);
        height: calc(873px/ 5); }
        #rennyutop .about div.pd03 span img {
          width: 100%;
          height: auto; }
    #rennyutop .about div.pd04 {
      width: 55%;
      margin-left: 45%; }
      #rennyutop .about div.pd04 a {
        bottom: 8vw;
        left: auto;
        right: 8vw; }
      #rennyutop .about div.pd04 span {
        bottom: 1.5vw;
        right: 35vw;
        width: calc(694px/ 4.5);
        height: calc(770px/ 4.5); }
        #rennyutop .about div.pd04 span img {
          width: 100%;
          height: auto; }
    #rennyutop .about .notes {
      position: absolute;
      left: 3vw;
      bottom: 3vw;
      font-size: 11px; }
  @media screen and (min-width: 769px) {
    #rennyutop .about {
      padding: 2vw 0 4vw; }
      #rennyutop .about .about-inner {
        max-width: 1000px;
        margin: 0 auto; }
      #rennyutop .about h2 {
        width: 30%;
        margin: 0 auto 15px; }
      #rennyutop .about p {
        font-size: 20px; }
      #rennyutop .about ul {
        max-width: 1000px;
        margin: 0 auto;
        padding: 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between; }
        #rennyutop .about ul li {
          position: relative;
          width: calc(657px/ 2);
          height: calc(691px/ 2);
          margin: 0 auto;
          background-size: 100% auto;
          padding: 3vw; }
          #rennyutop .about ul li h3 {
            position: absolute;
            bottom: 0; }
          #rennyutop .about ul li a {
            position: absolute;
            top: auto;
            right: 0;
            bottom: 76px;
            left: 0;
            margin: 0 auto auto;
            height: 40px;
            line-height: 40px;
            border-radius: 20px;
            width: 160px;
            transition: all .25s ease-out;
            color: #fff;
            text-align: center;
            font-weight: bold;
            background: #0a4196; }
            #rennyutop .about ul li a:hover {
              background: #e50012; }
          #rennyutop .about ul li.pd01 h3 {
            width: calc(1030px/ 2);
            height: calc(1067px/ 2);
            right: 0;
            bottom: 0; }
          #rennyutop .about ul li.pd01 a {
            left: 20px; }
          #rennyutop .about ul li.pd02 h3 {
            width: calc(1030px/ 2);
            height: calc(1067px/ 2);
            left: 0;
            bottom: 0; }
          #rennyutop .about ul li.pd02 a {
            right: 20px; }
      #rennyutop .about div.pd-wrap {
        display: flex;
        justify-content: space-between; }
      #rennyutop .about div.pd {
        position: relative;
        width: 50%;
        height: 600px;
        margin: 50px auto 0;
        padding: 3vw 0; }
        #rennyutop .about div.pd h3 {
          bottom: 0; }
        #rennyutop .about div.pd a {
          position: absolute;
          top: auto;
          right: 0;
          bottom: 76px;
          left: 0;
          margin: 0 auto auto;
          height: 40px;
          line-height: 40px;
          border-radius: 20px;
          width: 160px;
          transition: all .25s ease-out;
          color: #fff;
          text-align: center;
          font-weight: bold;
          background: #0a4196;
          zoom: 1;
          font-size: 100%; }
          #rennyutop .about div.pd a:hover {
            background: #e50012; }
        #rennyutop .about div.pd span {
          position: absolute; }
      #rennyutop .about div.pd03 {
        width: 53%;
        left: 100px; }
        #rennyutop .about div.pd03 h3 {
          width: 100%;
          margin-right: 0; }
        #rennyutop .about div.pd03 a {
          bottom: 70px;
          left: auto;
          right: 285px; }
        #rennyutop .about div.pd03 span {
          bottom: 0;
          left: calc(-650px/ 4);
          bottom: calc(719px/ 2.5);
          width: calc(734px/ 2);
          height: calc(719px/ 2); }
          #rennyutop .about div.pd03 span img {
            width: 100%;
            height: auto; }
      #rennyutop .about div.pd04 {
        margin-top: 60px;
        width: 43%;
        margin-left: 0; }
        #rennyutop .about div.pd04 a {
          bottom: 70px;
          left: auto;
          right: 80px; }
        #rennyutop .about div.pd04 span {
          bottom: calc(706px/ 2.3);
          right: calc(-673px/ 4);
          width: calc(673px/ 2);
          height: calc(706px/ 2); }
          #rennyutop .about div.pd04 span img {
            width: 100%;
            height: auto; }
      #rennyutop .about .notes {
        position: absolute;
        left: 3vw;
        bottom: 3vw;
        font-size: 12px; } }

/* #TOPページ */
/* ==========================================================================
==========================================================================

練乳かけるだけ

==========================================================================
========================================================================== */
#kakerudake {
  /* ==========================================================================
MV
========================================================================== */
  /* ==========================================================================
RECIPE
========================================================================== */
  /* ==========================================================================
twittercp
========================================================================== */
  /* ==========================================================================
FOOTER
========================================================================== */ }
  #kakerudake .mv {
    margin-top: 6vw;
    padding: 0 0 8vw;
    background: url(../images/common/star.svg) center top no-repeat, url(../images/common/hokkaido.svg) center 10px no-repeat #e50012;
    background-size: 180% auto, 50% auto; }
    #kakerudake .mv::before, #kakerudake .mv::after {
      content: "";
      position: absolute;
      display: block;
      z-index: 2; }
    #kakerudake .mv::before {
      position: absolute;
      top: 3vw;
      right: auto;
      bottom: 0;
      left: -11vw;
      width: 30vw;
      height: 45vw;
      background: url(../images/kakerudake/mv-ph01.png) no-repeat;
      background-size: 100% auto; }
    #kakerudake .mv::after {
      position: absolute;
      top: 2vw;
      right: -7vw;
      bottom: 0;
      left: auto;
      width: 30vw;
      height: 45vw;
      background: url(../images/kakerudake/mv-ph02.png) no-repeat;
      background-size: 100% auto; }
  @media screen and (min-width: 769px) {
    #kakerudake .mv {
      background: url(../images/common/star.svg) center top no-repeat, url(../images/common/hokkaido.svg) center 0 no-repeat #e50012;
      background-size: 190% auto, 50% auto;
      margin-top: 80px;
      padding: 0 0 10vw; }
      #kakerudake .mv::before {
        position: absolute;
        top: -30px;
        right: auto;
        bottom: 0;
        left: -30px;
        width: 24vw;
        height: 45vw; }
      #kakerudake .mv::after {
        position: absolute;
        top: -30px;
        right: -30px;
        bottom: 0;
        left: auto;
        width: 24vw;
        height: 45vw; } }
  #kakerudake .mv h1 {
    width: 60%;
    padding-top: 6vw;
    margin: 0 auto 15px; }
  #kakerudake .mv h2 {
    width: 50%;
    margin: 0 auto 15px; }
  #kakerudake .mv p {
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6; }
  #kakerudake .mv ul {
    margin-top: -5vw;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; }
    @media screen and (max-width: 768px) {
      #kakerudake .mv ul li {
        position: relative;
        width: 50%;
        height: auto;
        min-height: 200px;
        margin: 0 auto;
        padding: 3vw; }
        #kakerudake .mv ul li h3 {
          position: absolute;
          bottom: 0; }
        #kakerudake .mv ul li a {
          position: absolute;
          top: auto;
          right: 0;
          bottom: 8.5vw;
          left: 0;
          margin: 0 auto auto;
          height: 20px;
          line-height: 20px;
          border-radius: 10px;
          width: 80px;
          transition: all .25s ease-out;
          color: #fff;
          font-size: .8rem;
          letter-spacing: -.1em;
          text-align: center;
          font-weight: bold;
          background: #0a4196;
          zoom: .85; }
        #kakerudake .mv ul li.pd01 h3 {
          width: calc(1030px/ 5.2);
          height: calc(1067px/ 5.2);
          right: 0; }
        #kakerudake .mv ul li.pd01 a {
          left: auto;
          right: 6.5vw; }
        #kakerudake .mv ul li.pd02 h3 {
          width: calc(1030px/ 5.2);
          height: calc(1067px/ 5.2);
          left: 0; }
        #kakerudake .mv ul li.pd02 a {
          left: 6.5vw;
          right: auto; } }
  @media screen and (min-width: 769px) {
    #kakerudake .mv h1 {
      width: 43%;
      margin: 60px auto 30px; }
    #kakerudake .mv h2 {
      width: 30%;
      margin: 0 auto 15px; }
    #kakerudake .mv p {
      font-size: 20px; }
    #kakerudake .mv ul {
      padding: 0;
      width: 720px;
      margin: 30px auto 0; }
      #kakerudake .mv ul li {
        position: relative;
        width: calc(657px/ 2);
        height: calc(691px/ 2);
        margin: 0 auto;
        background-size: 100% auto;
        padding: 3vw; }
        #kakerudake .mv ul li h3 {
          position: absolute;
          bottom: 0; }
        #kakerudake .mv ul li a {
          position: absolute;
          top: auto;
          right: 0;
          bottom: 76px;
          left: 0;
          margin: 0 auto auto;
          height: 40px;
          line-height: 40px;
          border-radius: 20px;
          width: 160px;
          transition: all .25s ease-out;
          color: #fff;
          text-align: center;
          font-weight: bold;
          background: #0a4196; }
          #kakerudake .mv ul li a:hover {
            background: #e50012; }
        #kakerudake .mv ul li.pd01 h3 {
          width: calc(1030px/ 2);
          height: calc(1067px/ 2);
          right: 0;
          bottom: 0; }
        #kakerudake .mv ul li.pd01 a {
          left: 20px; }
        #kakerudake .mv ul li.pd02 h3 {
          width: calc(1030px/ 2);
          height: calc(1067px/ 2);
          left: 0;
          bottom: 0; }
        #kakerudake .mv ul li.pd02 a {
          right: 20px; } }
  #kakerudake .recipe {
    background: url(../images/kakerudake/dot.png) no-repeat center top #f7f0e0;
    background-size: cover; }
    #kakerudake .recipe::before {
      position: absolute;
      content: "";
      display: block;
      margin: auto auto;
      top: -7vw;
      right: auto;
      bottom: auto;
      left: auto;
      background: url(../images/kakerudake/wave-beige-top.svg) no-repeat center bottom;
      background-size: 100% auto;
      width: 100%;
      height: 7vw;
      z-index: 1; }
  #kakerudake .recipe {
    padding: 30px 0; }
    #kakerudake .recipe h2 {
      width: 70vw;
      margin: 0 auto 15px;
      position: relative; }
      #kakerudake .recipe h2::before, #kakerudake .recipe h2::after {
        width: 10vw;
        height: 24.2vw;
        z-index: 1; }
      #kakerudake .recipe h2::before {
        position: absolute;
        content: "";
        display: block;
        margin: auto auto;
        top: 0;
        right: auto;
        bottom: 0;
        left: -13vw;
        background: url(../images/kakerudake/recipe-pd01.png) no-repeat center bottom;
        background-size: 100% auto; }
      #kakerudake .recipe h2::after {
        position: absolute;
        content: "";
        display: block;
        margin: auto auto;
        top: 0;
        right: -13vw;
        bottom: 0;
        left: auto;
        background: url(../images/kakerudake/recipe-pd02.png) no-repeat center bottom;
        background-size: 100% auto; }
    #kakerudake .recipe p {
      text-align: center;
      color: #e50012;
      font-size: 16px;
      font-weight: bold;
      line-height: 1.6;
      margin-bottom: 15px; }
  @media screen and (min-width: 769px) {
    #kakerudake .recipe {
      background: url(../images/kakerudake/dot.png) no-repeat center top #f7f0e0;
      background-size: 100% auto; }
      #kakerudake .recipe::before {
        position: absolute;
        content: "";
        display: block;
        margin: auto auto;
        top: -6.8vw;
        right: auto;
        bottom: auto;
        left: auto;
        background: url(../images/kakerudake/wave-beige-top.svg) no-repeat center bottom;
        background-size: 100% auto;
        width: 100%;
        height: 7vw; }
    #kakerudake .recipe {
      padding: 30px 0; }
      #kakerudake .recipe h2 {
        width: calc(1063px/ 2);
        height: calc(349px/ 2);
        margin: 0 auto 30px; }
        #kakerudake .recipe h2::before, #kakerudake .recipe h2::after {
          width: 7vw;
          height: 14vw; }
      #kakerudake .recipe p {
        font-size: 20px;
        margin-bottom: 30px; } }
  #kakerudake .recipe-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; }
    #kakerudake .recipe-wrap ul li {
      width: 50%;
      padding: 0 2vw;
      margin-bottom: 12vw;
      position: relative; }
      #kakerudake .recipe-wrap ul li p {
        width: auto;
        height: 50px;
        position: absolute;
        top: auto;
        right: 0;
        bottom: -40px;
        left: 0;
        z-index: 2; }
        #kakerudake .recipe-wrap ul li p img {
          width: auto !important;
          height: 100% !important; }
      @media screen and (max-width: 768px) {
        #kakerudake .recipe-wrap ul li:nth-child(odd) p {
          left: -9vw; }
        #kakerudake .recipe-wrap ul li:nth-child(even) p {
          right: -9vw; }
        #kakerudake .recipe-wrap ul li:nth-child(3) p {
          height: 46px; }
        #kakerudake .recipe-wrap ul li:nth-child(4) p {
          height: 42px; }
        #kakerudake .recipe-wrap ul li:nth-child(6) p {
          height: 64px; }
        #kakerudake .recipe-wrap ul li:nth-child(7) p {
          height: 44px; }
        #kakerudake .recipe-wrap ul li:nth-child(8) p {
          height: 84px;
          bottom: -50px; }
        #kakerudake .recipe-wrap ul li:nth-child(10) p {
          height: 64px; }
        #kakerudake .recipe-wrap ul li:nth-child(11) p {
          height: 64px; } }
  @media screen and (min-width: 769px) {
    #kakerudake .recipe-wrap {
      position: relative; }
      #kakerudake .recipe-wrap::before, #kakerudake .recipe-wrap::after {
        width: 20%;
        height: 48.4%;
        z-index: 1; }
      #kakerudake .recipe-wrap::before {
        position: absolute;
        content: "";
        display: block;
        margin: auto auto;
        top: -50vw;
        right: auto;
        bottom: 0;
        left: -10vw;
        background: url(../images/kakerudake/recipe-pd01.png) no-repeat center bottom;
        background-size: 100% auto; }
      #kakerudake .recipe-wrap::after {
        position: absolute;
        content: "";
        display: block;
        margin: auto auto;
        top: auto;
        right: -10vw;
        bottom: 5vw;
        left: auto;
        background: url(../images/kakerudake/recipe-pd02.png) no-repeat center bottom;
        background-size: 100% auto; }
      #kakerudake .recipe-wrap ul {
        max-width: 900px;
        margin: 0 auto; }
        #kakerudake .recipe-wrap ul li {
          width: 33%;
          padding: 0 10px;
          margin-bottom: 50px;
          position: relative; }
          #kakerudake .recipe-wrap ul li p {
            width: auto;
            height: 70px;
            position: absolute;
            top: auto;
            right: 0;
            bottom: -40px;
            left: 0;
            z-index: 2; }
            #kakerudake .recipe-wrap ul li p img {
              width: auto !important;
              height: 100% !important; }
          #kakerudake .recipe-wrap ul li:nth-child(4), #kakerudake .recipe-wrap ul li:nth-child(9) {
            margin-left: 17%; }
          #kakerudake .recipe-wrap ul li:nth-child(5), #kakerudake .recipe-wrap ul li:nth-child(10) {
            margin-right: 17%; } }
      @media screen and (min-width: 769px) and (min-width: 769px) {
        #kakerudake .recipe-wrap ul li:nth-child(1) p {
          left: -9vw;
          height: 70px; }
        #kakerudake .recipe-wrap ul li:nth-child(2) p {
          right: -4vw; }
        #kakerudake .recipe-wrap ul li:nth-child(3) p {
          right: -9vw; }
        #kakerudake .recipe-wrap ul li:nth-child(4) p {
          left: -7vw;
          height: 60px; }
        #kakerudake .recipe-wrap ul li:nth-child(5) p {
          bottom: -4vw;
          right: -8vw;
          height: 80px; }
        #kakerudake .recipe-wrap ul li:nth-child(6) p {
          left: -5vw;
          height: 90px; }
        #kakerudake .recipe-wrap ul li:nth-child(7) p {
          bottom: -4vw;
          height: 65px; }
        #kakerudake .recipe-wrap ul li:nth-child(8) p {
          height: 124px;
          right: -8vw;
          bottom: -5vw; }
        #kakerudake .recipe-wrap ul li:nth-child(9) p {
          height: 70px;
          left: -5vw;
          bottom: -4vw; }
        #kakerudake .recipe-wrap ul li:nth-child(10) p {
          height: 86px;
          right: -8vw;
          bottom: -4vw; }
        #kakerudake .recipe-wrap ul li:nth-child(11) p {
          left: -5vw;
          height: 90px; } }

  #kakerudake .l-footer.kakerudake-footer {
    position: relative; }
    #kakerudake .l-footer.kakerudake-footer p.copyright {
      padding: 10px 2.5%;
      background: #fff;
      color: #333;
      text-align: center;
      font-size: 10px; }
  @media screen and (min-width: 769px) {
    #kakerudake .l-footer.kakerudake-footer p.copyright {
      padding: 20px 0;
      font-size: 12px; } }

/* #kakerudake */
#kakerudake .mv .cp-btn {
  width: 90%;
  max-width: 500px;
  margin: 0 auto; }
  @media screen and (max-width: 768px) {
    #kakerudake .mv .cp-btn {
      width: 60%;
      margin: 0 auto; } }
  #kakerudake .mv .cp-btn a {
    display: block; }
  @media screen and (max-width: 768px) {
    #kakerudake .mv .cp-btn img {
      width: 100%;
      height: auto; } }

/* ==========================================================================
  twitterキャンペーン　22.03.30
  ========================================================================== */
#kakerudake .recipe {
  padding: 0; }

#kakerudake .recipe-bottom {
  position: relative;
  padding: 20vw 0 0;
  margin-top: 0px; }

#kakerudake .recipe-bottom::before {
  position: absolute;
  top: 1.9vw;
  right: auto;
  bottom: auto;
  left: auto;
  content: "";
  display: block;
  margin: auto auto;
  background: url(../images/kakerudake/wave-red-btm.svg) no-repeat center bottom;
  background-size: 100% 100%;
  width: 100%;
  height: 18.5vw;
  z-index: 1; }

#kakerudake .recipe-bottom::after {
  position: absolute;
  top: -9vw;
  right: 6vw;
  bottom: auto;
  left: auto;
  content: "";
  display: block;
  margin: auto auto;
  background: url(../images/kakerudake/footer-pd.png) no-repeat center top;
  background-size: 100% auto;
  width: 18vw;
  height: 24.2vw;
  z-index: 2; }

@media screen and (min-width: 769px) {
  #kakerudake .recipe-bottom {
    padding: 20vw 0 0; }

  #kakerudake .recipe-bottom::before {
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: auto;
    content: "";
    display: block;
    margin: auto auto;
    width: 100%;
    height: 20vw; }

  #kakerudake .recipe-bottom::after {
    position: absolute;
    top: -5vw;
    right: 9vw;
    bottom: auto;
    left: auto;
    content: "";
    display: block;
    margin: auto auto;
    background: url(../images/kakerudake/footer-pd.png) no-repeat center top;
    background-size: 100% auto;
    width: 16vw;
    height: 22vw; } }
#kakerudake .twittercp .l-inner {
  width: 1000px;
  margin: 0 auto; }

#kakerudake .twittercp .l-inner h3 {
  width: 715px;
  height: auto;
  margin: 35px auto; }

#kakerudake .twittercp .l-inner .cp-area {
  margin: 60px auto 0;
  text-align: center;
  border-radius: 10px;
  background: #fff; }

#kakerudake .twittercp .l-inner .cp-area .cp-area-bg {
  padding: 15px 0;
  border-radius: 10px 10px 0 0;
  background: #fce700; }

#kakerudake .twittercp .l-inner .cp-area .cp-area-bg .cparea-ttl {
  width: 100%;
  height: auto;
  margin: 0 auto; }

#kakerudake .twittercp .l-inner .cp-area .cp-area-bg .cparea-ttl img {
  width: auto;
  height: 80px;
  margin: 0 auto; }

#kakerudake .twittercp .l-inner .cp-area .cp-area-inner {
  padding: 30px 50px 50px;
  margin: 0 auto; }

#kakerudake .twittercp .l-inner .cp-pay img {
  width: auto;
  height: 45px; }

#kakerudake .twittercp .l-inner ul {
  margin: 35px 0 0;
  text-align: left;
  font-size: 24px;
  color: #000; }

#kakerudake .twittercp .l-inner ul li {
  line-height: 1.6em; }

#kakerudake .twittercp .l-inner ul li .tag-btn {
  display: inline-block;
  padding: 5px 15px 7px;
  line-height: 1em;
  margin: 0 10px;
  color: #fff;
  font-size: 0.8em;
  font-weight: bold;
  border-radius: 15px;
  background: #0693dd; }

#kakerudake .twittercp .l-inner span.tag-color {
  color: #0693dd; }

#kakerudake .twittercp .l-inner .font-s {
  margin: 10px 0 0;
  font-size: 1em;
  line-height: 1.5em;
  text-align: left; }

#kakerudake .twittercp .l-inner .cp-area h4 {
  width: 60%;
  height: auto;
  margin: 40px auto 55px; }

#kakerudake .twittercp .l-inner .cp-area h4 img {
  width: 100%;
  height: auto; }

#kakerudake .twittercp .l-inner .cp-area .tohyo-area {
  position: relative;
  padding: 0 45px 10px;
  background: #fcedf1;
  border-radius: 15px; }

#kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-date {
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: -15px;
  text-align: center; }

#kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-date img {
  width: 65%;
  height: auto; }

#kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-kinenbi {
  display: inline-block;
  color: #ed6c00;
  font-weight: 600;
  margin: 40px 0 30px;
  font-size: 2rem;
  text-align: center; }

#kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-main {
  width: 100%;
  height: auto; }

#kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-btn {
  position: relative;
  width: 90%;
  height: auto;
  margin: 25px auto;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 60px;
  color: #fff;
  background: #e60012;
  border-radius: 30px;
  display: block; }

#kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-btn:after {
  content: '';
  border: 0;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg); }

#kakerudake .twittercp .l-inner .cp-area a:hover {
  opacity: 0.8; }

#kakerudake .twittercp .l-inner .cp-area .recommend-btn {
  position: relative;
  width: 90%;
  height: auto;
  margin: 25px auto;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 60px;
  color: #e60012;
  background: #fff;
  border: 2px solid #e60012;
  border-radius: 30px;
  display: block; }

#kakerudake .twittercp .l-inner .cp-area .recommend-btn:after {
  content: '';
  border: 0;
  border-top: solid 2px #e60012;
  border-right: solid 2px #e60012;
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%) rotate(45deg); }

#kakerudake .twittercp .l-inner .cp-area .tohyo-other {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }

#kakerudake .twittercp .l-inner .cp-area .tohyo-other li {
  width: 48%;
  height: auto;
  margin: 0 0 20px; }

#kakerudake .twittercp .l-inner .cp-area .cp-attention {
  margin-top: 30px;
  font-size: 18px;
  text-align: left;
  line-height: 1.5em; }

#kakerudake .twittercp .l-inner .cp-area .cp-attention-box {
  width: 100%;
  overflow: hidden; }

#kakerudake .twittercp .l-inner .cp-area .cp-attention-box .cp-attention-r {
  margin-top: 0;
  text-align: left;
  float: right; }

#kakerudake .twittercp .l-inner .cp-area .cp-area-inner .cp2-area-conts {
  margin-top: 50px;
  display: flex;
  justify-content: space-between; }

#kakerudake .twittercp .l-inner .cp-area .cp-area-inner .cp2-area-conts .cp2-area-conts-text {
  width: 55%;
  font-size: 24px;
  line-height: 1.5em;
  text-align: left; }

#kakerudake .twittercp .l-inner .cp-area .cp-area-inner .cp2-area-conts .cp2-area-conts-img {
  width: 43%; }

@media screen and (max-width: 768px) {
  #kakerudake .twittercp {
    padding: 50px 0 30px;
    margin: -70px 0 0;
    background: url(../images/kakerudake/gingam-bg_sp.png) no-repeat center top;
    background-size: 100%; }

  #kakerudake .twittercp .l-inner {
    width: 100%;
    margin: 0 auto;
    padding: 0 3%;
    box-sizing: border-box; }

  #kakerudake .twittercp .l-inner h3 {
    width: 90%;
    height: auto;
    margin: 0 auto 5%; }

  #kakerudake .twittercp .l-inner .cp-date {
    width: 90%;
    height: auto;
    margin: 0 auto; }

  #kakerudake .twittercp .l-inner .cp-area {
    margin: 5% auto 0;
    text-align: center;
    border-radius: 10px;
    background: #fff; }

  #kakerudake .twittercp .l-inner ul {
    font-size: 16px;
    margin: 20px 0 0; }

  #kakerudake .twittercp .l-inner .cp-area .cp-area-bg {
    padding: 5%;
    border-radius: 10px 10px 0 0;
    background: #fce700; }

  #kakerudake .twittercp .l-inner .cp-area .cp-area-bg .cparea-ttl {
    width: 100%;
    height: auto;
    margin: 0 auto; }

  #kakerudake .twittercp .l-inner .cp-area .cp-area-bg .cparea-ttl img {
    width: 100%;
    height: auto;
    margin: 0 auto; }

  #kakerudake .twittercp .l-inner .cp-area .cp-area-inner {
    padding: 8% 3%;
    margin: 0 auto; }

  #kakerudake .twittercp .l-inner .cp1-area .cp-ttl {
    width: 100%;
    height: auto;
    margin: 0 auto 5%; }

  #kakerudake .twittercp .l-inner .cp2-area .cp-ttl {
    width: 100%;
    height: auto;
    margin: 0 auto 5%; }

  #kakerudake .twittercp .l-inner .cp-area h4 {
    width: 90%;
    height: auto;
    margin: 30px auto; }

  #kakerudake .twittercp .l-inner .cp-area h4 img {
    width: 100%;
    height: auto; }

  #kakerudake .twittercp .l-inner .cp-pay img {
    width: 100%;
    height: auto; }

  #kakerudake .twittercp .l-inner .cp-area .tohyo-area {
    position: relative;
    padding: 3%;
    background: #fcedf1;
    border-radius: 15px; }

  #kakerudake .twittercp .l-inner .font-s {
    font-size: 1em; }

  #kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-date {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: -10px;
    text-align: center; }

  #kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-date img {
    width: 100%;
    height: auto; }

  #kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-kinenbi {
    display: inline-block;
    color: #ed6c00;
    font-weight: 600;
    margin: 15px 0;
    font-size: 1.3rem;
    text-align: center; }

  #kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-main {
    width: 80%;
    height: auto;
    margin: 0 auto 5%; }

  #kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-btn {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 auto 15px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 60px;
    color: #fff;
    background: #e60012;
    border-radius: 30px;
    display: block; }

  #kakerudake .twittercp .l-inner .cp-area .tohyo-area .tohyo-btn:after {
    content: '';
    border: 0;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); }

  #kakerudake .twittercp .l-inner .cp-area a:hover {
    opacity: 0.8; }

  #kakerudake .twittercp .l-inner .cp-area .recommend-btn {
    position: relative;
    width: 100%;
    height: auto;
    margin: 25px auto;
    text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 60px;
    color: #e60012;
    background: #fff;
    border: 2px solid #e60012;
    border-radius: 30px;
    display: block; }

  #kakerudake .twittercp .l-inner .cp-area .recommend-btn:after {
    content: '';
    border: 0;
    border-top: solid 2px #e60012;
    border-right: solid 2px #e60012;
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%) rotate(45deg); }

  #kakerudake .twittercp .l-inner .cp-area .tohyo-other {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }

  #kakerudake .twittercp .l-inner .cp-area .tohyo-other li {
    margin: 0 0 20px; }

  #kakerudake .twittercp .l-inner .cp-area .cp-attention {
    margin-top: 30px;
    font-size: 14px;
    text-align: left;
    line-height: 1.5em; }

  #kakerudake .twittercp .l-inner .cp-area .cp-attention-r {
    margin-top: 0;
    text-align: right; }

  #kakerudake .twittercp .l-inner .cp-area .cp-area-inner .cp2-area-conts {
    margin-top: 30px;
    display: block;
    justify-content: space-between; }

  #kakerudake .twittercp .l-inner .cp-area .cp-area-inner .cp2-area-conts .cp2-area-conts-text {
    width: 100%;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.5em;
    text-align: left; }

  #kakerudake .twittercp .l-inner .cp-area .cp-area-inner .cp2-area-conts .cp2-area-conts-img {
    width: 100%; } }
/*twitter 投稿エリア*/
#kakerudake .twittertokou {
  padding: 80px 0;
  text-align: center;
  background: url(../images/kakerudake/toukou_bg.png) no-repeat center center #e50012;
  background-size: 1600px; }

#kakerudake .twitter-tokou-ttl {
  width: 550px;
  height: auto;
  margin: 0 auto 30px; }

#kakerudake .twitter-tokou-box {
  width: 560px;
  min-height: 460px;
  padding: 15px;
  margin: 0 auto;
  background: #fff;
  position: relative;
  border-radius: 12px; }

@media screen and (max-width: 768px) {
  #kakerudake .twittertokou {
    padding: 8% 3%;
    text-align: center;
    background: url(../images/kakerudake/toukou_bg.png) no-repeat center center #e50012;
    background-size: 100%; }

  #kakerudake .twitter-tokou-ttl {
    width: 90%;
    height: auto;
    margin: 0 auto 3%; }

  #kakerudake .twitter-tokou-box {
    width: 100%;
    min-height: 300px;
    padding: 15px;
    margin: 0 auto;
    background: #fff;
    position: relative; } }
/*twitter キャンペーン概要*/
#kakerudake .twittergaiyo {
  padding: 35px 45px;
  background: #e50012; }

#kakerudake .twittergaiyo .l-inner {
  width: 1000px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px;
  overflow: hidden; }

#kakerudake .twittergaiyo .accordion_header {
  background: #fff;
  color: #e50012;
  font-size: 26px;
  font-weight: bold;
  padding: 30px 11%;
  text-align: center;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s; }

#kakerudake .twittergaiyo .accordion_header:hover {
  opacity: .8; }

#kakerudake .twittergaiyo .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 3%;
  width: 40px;
  height: 40px;
  margin-top: -25px;
  box-sizing: border-box;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s; }

#kakerudake .twittergaiyo .accordion_header .i_box .one_i {
  display: block;
  width: 18px;
  height: 18px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative; }

#kakerudake .twittergaiyo .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg); }

#kakerudake .twittergaiyo .accordion_header .i_box .one_i:before,
#kakerudake .twittergaiyo .accordion_header .i_box .one_i:after {
  display: flex;
  content: '';
  background-color: #e50012;
  border-radius: 10px;
  width: 30px;
  height: 3px;
  position: absolute;
  top: 13px;
  left: 0;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  transform-origin: center center; }

#kakerudake .twittergaiyo .accordion_header .i_box .one_i:before {
  width: 3px;
  height: 30px;
  top: 0;
  left: 13px; }

#kakerudake .twittergaiyo .accordion_header.open .i_box .one_i:before {
  content: none; }

#kakerudake .twittergaiyo .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg); }

#kakerudake .twittergaiyo .accordion_inner {
  display: none;
  padding: 30px 30px;
  box-sizing: border-box;
  position: relative; }

#kakerudake .twittergaiyo .accordion_inner .gaiyo_line {
  width: 100px;
  height: 4px;
  position: absolute;
  top: 0;
  left: 50%;
  -moz-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translate(-50%);
  background-color: #e50012; }

#kakerudake .twittergaiyo .accordion_inner .txt_a_ac {
  margin: 0; }

#kakerudake .twittergaiyo .accordion_inner .txt_a_ac a {
  text-decoration: underline;
  color: #000; }

#kakerudake .twittergaiyo .accordion_inner .txt_a_ac dl {
  margin-bottom: 50px;
  font-size: 16px;
  line-height: 1.5em; }

#kakerudake .twittergaiyo .accordion_inner .txt_a_ac dl dt {
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: bold; }

#kakerudake .twittergaiyo .accordion_inner .txt_a_ac dl dd {
  padding-left: 10px; }

#kakerudake .twittergaiyo .accordion_inner .txt_a_ac dl dd ul li {
  margin-left: 1.4em; }

#kakerudake .twittergaiyo .accordion_inner .txt_a_ac dl dd ul.gaiyo-list li {
  list-style: disc; }

#kakerudake .twittergaiyo .accordion_inner .txt_a_ac dl dd ul.gaiyo-list-sub {
  padding-left: 10px; }

#kakerudake .twittergaiyo .accordion_inner .txt_a_ac dl dd ul.gaiyo-list-sub li {
  list-style: circle; }

@media screen and (max-width: 1024px) {
  #kakerudake .twittergaiyo .accordion_header {
    font-size: 18px; }

  #kakerudake .twittergaiyo .accordion_header .i_box {
    width: 30px;
    height: 30px;
    margin-top: -15px; } }
@media screen and (max-width: 768px) {
  #kakerudake .twittergaiyo .accordion_header {
    font-size: 20px;
    text-align: center; }

  #kakerudake .twittergaiyo {
    padding: 0 3%;
    background: #e50012; }

  #kakerudake .twittergaiyo .l-inner {
    width: 100%;
    margin: 0 auto;
    background: #fff; }

  #kakerudake .twittergaiyo .accordion_header .i_box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: 3%;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    box-sizing: border-box;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s; }

  #kakerudake .twittergaiyo .accordion_header .i_box .one_i {
    display: block;
    width: 18px;
    height: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
    transition-duration: 0.2s;
    position: relative; }

  #kakerudake .twittergaiyo .accordion_header.open .i_box {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); }

  #kakerudake .twittergaiyo .accordion_header .i_box .one_i:before,
  #kakerudake .twittergaiyo .accordion_header .i_box .one_i:after {
    display: flex;
    content: '';
    background-color: #e50012;
    border-radius: 10px;
    width: 20px;
    height: 3px;
    position: absolute;
    top: 8px;
    left: 0;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    transform-origin: center center; }

  #kakerudake .twittergaiyo .accordion_header .i_box .one_i:before {
    width: 3px;
    height: 20px;
    top: 0;
    left: 8px; }

  #kakerudake .twittergaiyo .accordion_inner {
    display: none;
    padding: 30px 0 2%;
    box-sizing: border-box;
    position: relative; } }
/* ==========================================================================
==========================================================================

練乳ソフト

==========================================================================
========================================================================== */
#rennyusoft {
  /* ==========================================================================
HEADER
========================================================================== */
  /* ==========================================================================
MV
========================================================================== */
  /* ==========================================================================
ABOUT
========================================================================== */
  /* ==========================================================================
RECIPE
========================================================================== */ }
  #rennyusoft .l-header::after {
    background: url(../images/common/wave-white-top.svg) center -1px no-repeat #f7f0e0;
    background-size: 100% auto; }
  @media screen and (min-width: 769px) {
    #rennyusoft .l-header::after {
      background: url(../images/common/wave-white-top.svg) no-repeat center bottom #f7f0e0;
      background-size: 100% auto; } }
  #rennyusoft p.footer-privacylink {
    padding: 0px 2.5% 10px;
    border-top: none; }
  #rennyusoft .mv {
    background: url(../images/common/wave-white-btm2.svg) center bottom no-repeat #f7f0e0;
    background-size: 100% auto;
    text-align: center;
    padding: 10vw 0 10vw; }
    #rennyusoft .mv h1 {
      width: 95%;
      margin: 0 auto; }
  @media screen and (min-width: 769px) {
    #rennyusoft .mv {
      margin: 80px 0 0;
      padding: 2vw 0 8vw; }
      #rennyusoft .mv h1 {
        max-width: 960px; } }
  #rennyusoft .about {
    margin-top: -1px;
    background: #fff;
    text-align: center;
    padding: 5vw 0 10vw;
    background: url(../images/rennyusoft/bg-dot.png) center center no-repeat;
    background-size: 120% auto; }
    #rennyusoft .about h3 {
      width: 90%;
      margin: 0 auto 2vw; }
    #rennyusoft .about figure {
      width: 90%;
      margin: 0 auto; }
    #rennyusoft .about .notes {
      padding-right: 2.5%;
      padding-top: 10px;
      font-size: 11px;
      text-align: right; }
  @media screen and (min-width: 769px) {
    #rennyusoft .about {
      padding: 2vw 0 6vw;
      background: url(../images/rennyusoft/bg-dot.png) center center no-repeat;
      background-size: 100% auto; }
      #rennyusoft .about h3 {
        width: 90%;
        max-width: 960px;
        margin: 0 auto 2vw; }
      #rennyusoft .about figure {
        width: 90%;
        max-width: 960px;
        margin: 0 auto; }
      #rennyusoft .about .notes {
        width: 100%;
        max-width: 960px;
        margin: 0 auto;
        padding-top: 10px;
        font-size: 12px;
        text-align: right; } }
  #rennyusoft .recipe {
    width: 95%;
    margin: 0 auto 30px;
    background: #f7f0e0;
    text-align: center;
    padding: 5vw 0 5vw; }
    #rennyusoft .recipe h2 {
      position: relative;
      width: 60%;
      margin: 0 auto 20px; }
      #rennyusoft .recipe h2::before {
        position: absolute;
        display: block;
        content: '';
        width: 20vw;
        height: 19.36vw;
        left: auto;
        right: -21vw;
        top: -10vw;
        bottom: auto;
        margin: auto auto;
        background: url(../images/rennyusoft/recipe-deco.png) no-repeat;
        background-size: contain; }
    #rennyusoft .recipe ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between; }
      #rennyusoft .recipe ul li {
        position: relative;
        width: 47.5%;
        margin-bottom: 30px;
        background: #fff;
        padding: 5% 2.5%; }
        #rennyusoft .recipe ul li::before {
          position: absolute;
          display: block;
          content: '';
          width: 8vw;
          height: 4vw;
          left: 0;
          right: 0;
          top: -1.5vw;
          bottom: auto;
          margin: auto auto; }
        #rennyusoft .recipe ul li:nth-child(odd)::before {
          background: url(../images/rennyusoft/recipe-tape-l.png) no-repeat;
          background-size: contain; }
        #rennyusoft .recipe ul li:nth-child(even)::before {
          background: url(../images/rennyusoft/recipe-tape-r.png) no-repeat;
          background-size: contain; }
        #rennyusoft .recipe ul li h3 {
          text-align: center;
          height: 5vw;
          margin-bottom: 1.2vw; }
          #rennyusoft .recipe ul li h3 img {
            width: auto;
            height: 100%; }
        #rennyusoft .recipe ul li figure {
          margin-bottom: 1.2vw; }
        #rennyusoft .recipe ul li p {
          margin-bottom: 15px;
          font-size: 12px;
          line-height: 1.4;
          color: #e50012;
          font-weight: bold; }
        #rennyusoft .recipe ul li a {
          font-size: 12px;
          color: #fff;
          background: #0a4196; }
    #rennyusoft .recipe .notes {
      font-size: 11px;
      text-align: right; }
  @media screen and (min-width: 769px) {
    #rennyusoft .recipe {
      width: 95%;
      max-width: 960px;
      margin: 0 auto 60px;
      padding: 2.5%; }
      #rennyusoft .recipe h2 {
        max-width: 400px;
        margin: 0 auto 40px; }
        #rennyusoft .recipe h2::before {
          width: 15vw;
          height: 13.2vw;
          right: -18vw;
          top: -8vw; }
      #rennyusoft .recipe ul {
        justify-content: space-between; }
        #rennyusoft .recipe ul li {
          position: relative;
          width: 48%;
          margin-bottom: 40px;
          padding: 5% 2.5% 2.5%; }
          #rennyusoft .recipe ul li::before {
            width: 6vw;
            height: 3vw; }
          #rennyusoft .recipe ul li h3 {
            height: 40px;
            margin-bottom: 15px; }
          #rennyusoft .recipe ul li figure {
            margin-bottom: 15px; }
          #rennyusoft .recipe ul li p {
            font-size: 16px; }
          #rennyusoft .recipe ul li a {
            width: 100%;
            max-width: inherit;
            font-size: 12px;
            color: #fff;
            background: #0a4196; }
      #rennyusoft .recipe .notes {
        font-size: 13px; } }

/* #rennyusoft */
/* ==========================================================================
GALLERY
========================================================================== */
/*.gallery {
  // background: url(../images/kakerudake/gellery-b.png) no-repeat center top colors(#e50012);
  // background-size: cover;
  background: url(../images/kakerudake/gallery-bg.png) center top repeat #e50012;
  @include media(sp) {
    background-size: 200% auto;
  }
  .intro{
    padding-bottom: 70px;
  h2{
    width: 60%;
    margin: 0 auto 20px;
  }
  h3{
    width: 70%;
    margin: 0 auto;
    position: relative;
    &::before ,&::after {
      position: absolute;
      content: '';
      top: 0;
      bottom: 0;
      margin: auto;
      width: 49px;
      height: 84px;
    }
    &::before {
      left: -22%;
      right: auto;
      background: url(../images/kakerudake/gallery-deco1.png) no-repeat;
      background-size: 100% auto;
    }
    &::after {
      left: auto;
      right: -22%;
      background: url(../images/kakerudake/gallery-deco2.png) no-repeat;
      background-size: 100% auto;
    }
  }
  @include media(pc) {
    &::before ,&::after {
      width: 98px;
      height: 168px;
    }
    &::before {
      left: -22%;
      right: auto;
    }
    &::after {
      left: auto;
      right: -22%;
    }
  }
}
ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  li{
    width: 40%;
    margin: 0 auto;
  }
  p{
    padding: 15px 0 30px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    font-weight: bold;
    line-height: 1.4;;
  }
}

@include media(pc) {
  
  .intro{
    padding-bottom: 100px;
  h2{
    width: 50%;
    margin: 0 auto 20px;
  }
  h3{
    width: 60%;
    margin: 0 auto;
  }
}

ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  li{
    width: 27%;
    margin: 0 auto;
  }
  p{
    padding: 15px 0 25px;
    color: #fff;
    font-size: 22px;
    text-align: center;
    font-weight: bold;
  }
}
}

.l-inner p.notes {
  font-size: 12px;
  padding: 0;
  margin-top: 40px !important;
  margin-bottom: 0;
  text-align: left;
  color: #fff !important;
}

@media screen and (min-width: 769px) {
.l-inner p.notes {
    font-size: 14px;
  }
}
}*/
#kakerudake #recipe .l-inner p.notes {
  font-size: 12px;
  padding: 0;
  margin-top: 40px !important;
  margin-bottom: 0;
  text-align: left;
  color: #000 !important; }

@media screen and (min-width: 769px) {
  #kakerudake #recipe .l-inner p.notes {
    font-size: 14px; } }