@charset "UTF-8";

blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0
}

address,
caption,
cite,
code,
dfn,
em,
i,
th,
var {
  font-style: normal;
  font-weight: 400
}

fieldset,
img,
object {
  border: 0;
  vertical-align: bottom
}

img {
  font-size: 0;
  line-height: 0;
  -ms-interpolation-mode: bicubic
}

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

caption,
th {
  text-align: left
}

ul {
  list-style-type: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 400
}

q:after,
q:before {
  content: ""
}

abbr,
acronym {
  border: 0;
  font-variant: normal
}

input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit
}

body,
legend {
  color: #000
}

body {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, ヒラギノ角ゴ ProN W3, Hiragino Kaku Gothic ProN, メイリオ, Meiryo, ＭＳ\ Ｐゴシック, Arial, verdana, sans-serif
}

html {
  font-size: 62.5%
}

body {
  font-size: 10px;
  font-size: 1rem
}

* {
  box-sizing: border-box
}

article,
aside,
audio,
canvas,
details,
figcaption,
figure,
footer,
header,
mark,
menu,
nav,
section,
summary,
time,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  display: block
}

@-webkit-keyframes menu-bounce {
  0% {
    -webkit-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0)
  }

  50% {
    -webkit-transform: translateX(-50%) scale(1.2);
    transform: translateX(-50%) scale(1.2)
  }

  70% {
    -webkit-transform: translateX(-50%) scale(.9);
    transform: translateX(-50%) scale(.9)
  }

  90% {
    -webkit-transform: translateX(-50%) scale(1.1);
    transform: translateX(-50%) scale(1.1)
  }

  to {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1)
  }
}

@keyframes menu-bounce {
  0% {
    -webkit-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0)
  }

  50% {
    -webkit-transform: translateX(-50%) scale(1.2);
    transform: translateX(-50%) scale(1.2)
  }

  70% {
    -webkit-transform: translateX(-50%) scale(.9);
    transform: translateX(-50%) scale(.9)
  }

  90% {
    -webkit-transform: translateX(-50%) scale(1.1);
    transform: translateX(-50%) scale(1.1)
  }

  to {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1)
  }
}

@-webkit-keyframes menu-scale-down {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1)
  }

  to {
    -webkit-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0)
  }
}

@keyframes menu-scale-down {
  0% {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1)
  }

  to {
    -webkit-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0)
  }
}

@-webkit-keyframes sns-bounce {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  35% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@keyframes sns-bounce {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1)
  }

  35% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
  }

  70% {
    -webkit-transform: scale(.9);
    transform: scale(.9)
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes pagetop-bounce {
  0% {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0)
  }

  20% {
    -webkit-transform: translateY(-2%) rotate(.8deg);
    transform: translateY(-2%) rotate(.8deg)
  }

  40% {
    -webkit-transform: translateY(-4%) rotate(0);
    transform: translateY(-4%) rotate(0)
  }

  60% {
    -webkit-transform: translateY(-1.25%) rotate(-.8deg);
    transform: translateY(-1.25%) rotate(-.8deg)
  }

  80% {
    -webkit-transform: translateY(1.5%) rotate(0);
    transform: translateY(1.5%) rotate(0)
  }

  to {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0)
  }
}

@keyframes pagetop-bounce {
  0% {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0)
  }

  20% {
    -webkit-transform: translateY(-2%) rotate(.8deg);
    transform: translateY(-2%) rotate(.8deg)
  }

  40% {
    -webkit-transform: translateY(-4%) rotate(0);
    transform: translateY(-4%) rotate(0)
  }

  60% {
    -webkit-transform: translateY(-1.25%) rotate(-.8deg);
    transform: translateY(-1.25%) rotate(-.8deg)
  }

  80% {
    -webkit-transform: translateY(1.5%) rotate(0);
    transform: translateY(1.5%) rotate(0)
  }

  to {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0)
  }
}

@media screen and (max-width:768px) {

  .loading,
  img {
    width: 100%
  }

  .loading {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background: url(/products/brand/yukimi/assets/img/top/bg_top_pattern_sp.png) 0 0 repeat;
    background-size: 64px auto;
    z-index: 1000
  }

  .for-pc {
    display: none !important
  }

  .content-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    padding-top: 18px;
    padding-left: 25px;
    padding-right: 25px;
    background: url(/products/brand/yukimi/assets/img/bg_header_sp.png) 50% 0 no-repeat;
    background-size: 100% 90px;
    z-index: 20
  }

  .header-logo-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
  }

  .header-logo-block .logo-lotte {
    width: 55px;
    margin-top: 10px
  }

  .header-logo-block .logo-yukimi {
    width: 119px;
    margin-top: 2px
  }

  .header-logo-block a {
    display: block
  }

  .header-menu-btn {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 40px;
    height: 46px;
    background: url(/products/brand/yukimi/assets/img/btn_menu_sp.png) 50% 0 no-repeat;
    background-size: 40px auto;
    cursor: pointer
  }

  .header-menu-btn.is-active {
    background-image: url(/products/brand/yukimi/assets/img/btn_menu_close_sp.png)
  }

  .header-menu-block {
    display: none;
    position: absolute;
    top: 73px;
    left: 0;
    width: 100%;
    height: calc(100vh - 73px);
    background-color: rgba(0, 0, 0, .6);
    z-index: 5;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch
  }

  .header-menu-block-inner {
    padding-top: 44px;
    padding-bottom: 71px;
    background: url(/products/brand/yukimi/assets/img/bg_menu_sp.png) 50% 100% no-repeat;
    background-size: 100% auto
  }

  .header-menu-list li {
    margin-top: 5.8666666667vw;
    margin-left: auto;
    margin-right: auto
  }

  .header-menu-list a {
    position: relative;
    display: block;
    padding-top: 2.9333333333vw;
    padding-bottom: 2.9333333333vw
  }

  .header-menu-list a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0);
    display: block;
    width: 13.3333333333vw;
    height: 10.4vw;
    background: url(/products/brand/yukimi/assets/img/bg_nav_current_sp.png) 50% 0 no-repeat;
    background-size: 13.3333333333vw auto;
    z-index: 0
  }

  .header-menu-list a.is-current:before {
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1)
  }

  .header-menu-list a img {
    position: relative
  }

  .header-menu-list .menu-lineup {
    width: 18.9333333333vw;
    margin-top: 0
  }

  .header-menu-list .menu-cm {
    width: 18.1333333333vw
  }

  .header-menu-list .menu-campaign {
    width: 25.3333333333vw
  }

  .header-menu-list .menu-recipe {
    width: 26.1333333333vw
  }

  .header-menu-list .menu-gotouchi_recipe {
    width: 26.9333333333vw
  }

  .header-sns-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 36.6666666667vw;
    margin-top: 9.3333333333vw;
    margin-left: auto;
    margin-right: auto
  }

  .header-sns-block li {
    width: 14.1333333333vw
  }

  .whole {
    overflow: hidden;
    padding-top: 140px;
    background: url(/products/brand/yukimi/assets/img/bg_content_body_sp.png) 50% 0 repeat-y;
    background-size: 100% auto
  }

  .content-body {
    position: relative;
    margin-left: 6.6666666667vw;
    margin-right: 6.6666666667vw
  }

  .content-footer {
    height: 327px;
    margin-top: 125px;
    background: url(/products/brand/yukimi/assets/img/bg_footer_sp.png) 50% 0 repeat-x;
    background-size: 375px 327px
  }

  .content-footer .container {
    position: relative;
    padding-top: 59px
  }

  .btn-pagetop {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: -85px;
    left: 50%;
    width: 252px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 2
  }

  .footer-sns-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
  }

  .footer-sns-block li {
    margin-left: 4px;
    margin-right: 4px
  }

  .footer-link-list {
    margin-top: 40px
  }

  .footer-link-list li {
    position: relative;
    width: 325px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto
  }

  .footer-link-list li:first-child {
    margin-top: 0
  }

  .footer-link-list a {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 40px;
    border-radius: 20px;
    background-color: #c61521;
    color: #fff;
    font-size: 14px;
    text-decoration: none
  }

  .footer-link-list a:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 7px;
    height: 13px;
    background: url(/products/brand/yukimi/assets/img/icon_footer_arrow_sp.png) 50% 0 repeat-x;
    background-size: 7px auto
  }

  .footer-text-block {
    margin-top: 28px
  }

  .footer-text-block .logo-lotte {
    width: 73px;
    margin-left: auto;
    margin-right: auto
  }

  .footer-text-block .logo-lotte a {
    display: block
  }

  .footer-text-block .copyright {
    margin-top: 13px;
    color: #fff;
    text-align: center
  }
}

@media screen and (min-width:769px) {

  .loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/products/brand/yukimi/assets/img/top/bg_top_pattern_pc.png) 0 0 repeat;
    z-index: 1000
  }

  .for-sp {
    display: none !important
  }

  .container {
    max-width: 950px;
    margin-left: auto;
    margin-right: auto
  }

  .content-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 170px;
    padding-top: 24px;
    background: url(/products/brand/yukimi/assets/img/bg_header_pc.png) 50% 0 no-repeat;
    z-index: 20
  }

  .header-logo-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 253px;
    margin-left: auto;
    margin-right: auto
  }

  .header-logo-block .logo-lotte {
    width: 90px
  }

  .header-logo-block .logo-yukimi {
    width: 153px
  }

  .header-logo-block a {
    display: block
  }

  .header-menu-btn {
    display: none
  }

  .header-menu-block {
    margin-top: 11px
  }

  .header-menu-block-inner {
    width: 570px;
    margin-left: auto;
    margin-right: auto
  }

  .header-menu-block-inner,
  .header-menu-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
  }

  .header-menu-list {
    width: 400px
  }

  .header-menu-list a {
    position: relative;
    display: block;
    padding-top: 12px;
    padding-bottom: 12px
  }

  .header-menu-list a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%) scale(0);
    transform: translateX(-50%) scale(0);
    display: block;
    width: 53px;
    height: 41px;
    background: url(/products/brand/yukimi/assets/img/bg_nav_current_pc.png) 50% 0 no-repeat;
    z-index: 0;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-name: menu-scale-down;
    animation-name: menu-scale-down;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
  }

  .header-menu-list a:hover:before {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-name: menu-bounce;
    animation-name: menu-bounce;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
  }

  .header-menu-list a.is-current:before {
    -webkit-animation: none;
    animation: none;
    -webkit-transform: translateX(-50%) scale(1);
    transform: translateX(-50%) scale(1)
  }

  .header-menu-list a.is-current:hover:before {
    -webkit-animation: none;
    animation: none
  }

  .header-menu-list a img {
    position: relative
  }

  .header-sns-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    width: 90px
  }

  .header-sns-block a:hover img {
    -webkit-animation-duration: .44s;
    animation-duration: .44s;
    -webkit-animation-name: sns-bounce;
    animation-name: sns-bounce;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
  }

  .whole {
    overflow: hidden;
    padding-top: 240px;
    padding-bottom: 350px;
    background: url(/products/brand/yukimi/assets/img/bg_header_pc.png) 50% 0 no-repeat;
    background-attachment: fixed
  }

  .content-body {
    position: relative;
    max-width: 950px;
    margin-left: auto;
    margin-right: auto
  }

  .content-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 163px;
    padding-top: 45px;
    background: url(/products/brand/yukimi/assets/img/bg_footer_pc.png) 50% 0 repeat-x;
    z-index: 10;
    -webkit-transform: translateY(180%);
    transform: translateY(180%);
    -webkit-transition: -webkit-transform .44s ease-in-out;
    transition: -webkit-transform .44s ease-in-out;
    transition: transform .44s ease-in-out;
    transition: transform .44s ease-in-out, -webkit-transform .44s ease-in-out
  }

  .content-footer.is-show {
    -webkit-transform: translateY(0);
    transform: translateY(0)
  }

  .content-footer .container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between
  }

  .btn-pagetop {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: -88px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
  }

  .btn-pagetop:hover img {
    -webkit-animation-duration: .36s;
    animation-duration: .36s;
    -webkit-animation-name: pagetop-bounce;
    animation-name: pagetop-bounce;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
  }

  .footer-link-block {
    margin-top: 10px
  }

  .footer-sns-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
  }

  .footer-sns-block li {
    margin-right: 10px
  }

  .footer-link-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-top: 25px
  }

  .footer-link-list li {
    position: relative;
    margin-left: 13px;
    padding-left: 13px
  }

  .footer-link-list li:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 10px;
    width: 1px;
    background-color: #fff
  }

  .footer-link-list li:first-child {
    margin-left: 0;
    padding-left: 0
  }

  .footer-link-list li:first-child:before {
    display: none
  }

  .footer-link-list a {
    position: relative;
    display: block;
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none
  }

  .footer-link-list a:before {
    content: "";
    display: block;
    position: absolute;
    bottom: -2px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 1px;
    width: 0;
    background-color: #fff;
    opacity: 0;
    -webkit-transition: opacity, width;
    transition: opacity, width;
    -webkit-transition-duration: .24s;
    transition-duration: .24s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out
  }

  .footer-link-list a:hover:before {
    width: 100%;
    opacity: 1
  }

  .footer-text-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column
  }

  .footer-text-block .logo-lotte {
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end
  }

  .footer-text-block .logo-lotte a {
    display: block
  }

  .footer-text-block .copyright {
    margin-top: 25px;
    color: #fff;
    font-size: 1.1rem
  }
}