@charset "UTF-8";

/*------------------------------
   common
------------------------------*/

html,
body {
  padding: 0;
  margin: 0;
}

hr {
  display: none;
}

#contents_block {
  font-family: "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ",
    Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  overflow: hidden;
}

#contents_block .contents_body * {
  padding: 0;
  margin: 0;
  overflow: hidden;
  text-indent: -100%;
  white-space: nowrap;
  color: transparent;
}

img.img-fluid {
  max-width: 100%;
  height: auto;
}

@media only screen and (min-width: 641px) {
  #contents_block .pc_hidden {
    display: none !important;
  }

  #contents_block .sp_hidden {
    display: inherit !important;
  }
}

@media only screen and (max-width: 640px) {
  #contents_block .pc_hidden {
    display: inherit !important;
  }

  #contents_block .sp_hidden {
    display: none !important;
  }
}

/*------------------------------
   mv
------------------------------*/

#noukou_mv {
  position: relative;
  background-color: #52127d;
}

#noukou_mv .mv_grape,
#noukou_mv .mv_strawberry {
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
}

#noukou_mv .mv_grape a,
#noukou_mv .mv_strawberry a {
  display: block;
  width: 100%;
  height: 100%;
}

#noukou_mv .mv_grape {
  left: 0;
}

#noukou_mv .mv_strawberry {
  right: 0;
}

#noukou_mv {
  height: 730px;
  background: url("../images/25_mv_bg.jpg") no-repeat center;
  background-size: 2000px auto;
  position: relative;
  z-index: 1;
    animation: fadeIn2 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}
#noukou_mv:after {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 730px;
  top: 0;
  left: 0;
  background: url("../images/24_mv_bg.png") no-repeat center;
  background-size: 2000px auto;
  animation: fadeIn1 1.9s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn1 {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
    zoom: 1.4;
    transform: translateY(-2%);
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -o-filter: blur(15px);
    -ms-filter: blur(15px);
    filter: blur(15px);
  }
  50% {
  }
  100% {
    opacity: 1;
    zoom: 1;
    transform: translateY(0%);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}

#noukou_mv .mv_text {
  width: 260px;
  height: 640px;
  margin: auto;
  background: url("../images/25_mv_text.png") no-repeat center;
  background-size: contain;
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  animation: fadeIn2 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
@keyframes fadeIn2 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
    transform: translateY(-0.8%);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
  }
}

@media only screen and (max-width: 640px) {
  #noukou_mv {
    height: 172vw;
    background: url("../images/25_mv_sp.jpg") no-repeat center;
    background-size: cover;
    animation: fadeIn2 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }
  #noukou_mv:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    width: 90%;
    height: 100%;
    top: 0;
    left: 6vw;
    background: url("../images/25_mv_text_sp.png") no-repeat center;
    background-size: 100% auto;
    animation: fadeIn2 1.6s cubic-bezier(0.33, 1, 0.68, 1) forwards;
  }
  #noukou_mv:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../images/25_mv_bg_sp.png") no-repeat center;
    background-size: 100% auto;
  }
}

/*------------------------------
   secret
------------------------------*/

@media only screen and (min-width: 641px) {
  #noukou_secret .secret_milk {
    height: 533px;
    background: url("../images/23_secret_milk.jpg") no-repeat center;
    background-size: 2000px auto;
  }

  #noukou_secret .secret_sauce {
    height: 641px;
    background: url("../images/23_secret_sauce.jpg") no-repeat center;
    background-size: 2000px auto;
  }
}

@media only screen and (max-width: 640px) {
  #noukou_secret .secret_milk {
    height: 146.267vw;
    background: url("../images/23_secret_milk_sp.jpg") no-repeat center;
    background-size: cover;
  }

  #noukou_secret .secret_sauce {
    height: 237.2vw;
    background: url("../images/23_secret_sauce_sp.jpg") no-repeat center;
    background-size: cover;
  }
}

/*------------------------------
   item
------------------------------*/

@media only screen and (min-width: 641px) {
  #noukou_item #noukou_grape {
    height: 630px;
    background: url("../images/23_item_grape.jpg") no-repeat center;
    background-size: 2000px auto;
  }

  #noukou_item #noukou_strawberry {
    height: 640px;
    background: url("../images/23_item_strawberry.jpg") no-repeat center;
    background-size: 2000px auto;
  }
}

@media only screen and (max-width: 640px) {
  #noukou_item #noukou_grape {
    height: 272vw;
    background: url("../images/23_item_grape_sp.jpg") no-repeat center;
    background-size: cover;
  }

  #noukou_item #noukou_strawberry {
    height: 270.667vw;
    background: url("../images/23_item_strawberry_sp.jpg") no-repeat center;
    background-size: cover;
  }
}

/*------------------------------
   notes
------------------------------*/

#noukou_notes {
  display: flex;
  align-items: center;
  text-align: center;
  color: #444;
  justify-content: center;
}

#noukou_notes * {
  align-items: center;
  padding: 0;
  margin: 0;
  line-height: 1.5;
}

#noukou_notes img {
  width: 100%;
  max-width: 160px;
}

#noukou_notes .notes_name {
  font-weight: bold;
  padding-left: 8px;
}

#noukou_notes .notes_date {
  font-weight: bold;
}

@media only screen and (min-width: 641px) {
  #noukou_notes {
    padding: 60px 0;
  }

  #noukou_notes .notes_lineup {
    width: 190px;
    text-align: left;
  }

  #noukou_notes .notes_name {
    margin-bottom: 2px;
    font-size: 19px;
  }

  #noukou_notes .notes_date {
    margin-bottom: 5px;
    font-size: 28px;
  }

  #noukou_notes .notes_shop {
    margin-bottom: 3px;
    font-size: 17px;
  }

  #noukou_notes .notes_area {
    font-size: 13px;
  }
}

@media only screen and (max-width: 640px) {
  #noukou_notes {
    flex-direction: column;
    padding: 30px 0;
  }
  #noukou_notes > * {
    padding: 10px 0;
  }
  #noukou_notes br {
    display: none;
  }

  #noukou_notes > * {
    padding: 10px 0;
  }
  #noukou_notes .notes_name {
    margin-bottom: 3px;
    font-size: 14px;
  }

  #noukou_notes .notes_date {
    margin-bottom: 4px;
    font-size: 17px;
  }

  #noukou_notes .notes_shop {
    font-size: 15px;
  }

  #noukou_notes .notes_area {
    font-size: 11px;
  }
}

/*------------------------------
   mulch
------------------------------*/

#noukou_mulch {
  align-items: center;
  text-align: center;
  justify-content: center;
  margin-bottom: 55px;
}

#noukou_mulch * {
  align-items: center;
  padding: 0;
  margin: 0;
}

#noukou_mulch img {
  width: 90%;
  max-width: 660px;
}

@media only screen and (max-width: 640px) {
  #noukou_mulch {
    margin-bottom: 30px;
  }
}

/*------------------------------
   noukou_sns
------------------------------*/

#noukou_sns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 90%;
  max-width: 1000px;
  gap: 20px;
}

#noukou_sns > * {
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 20px 0 0;
  width: 80%;
  max-width: 470px;
}

#noukou_sns img {
  width: 100%;
}

@media only screen and (max-width: 640px) {
  #noukou_sns {
    flex-direction: column;
    padding: 30px 0 0;
  }
  #noukou_sns > * {
    padding: 0px 0;
    margin: 0;
  }
}

/*--------------------------------------------------

  .shareFoot

--------------------------------------------------*/
#contents_block .shareFoot {
  width: 100%;
  margin: 30px 0;
  background-color: #ffffff;
}

#contents_block .shareFoot .shareBox {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

#contents_block .shareFoot .c01 {
  width: 100px;
  height: auto;
  padding-bottom: 11px;
  padding-right: 20px;
}

#contents_block .shareFoot .c02 {
  width: 40px;
  height: auto;
  padding-right: 25px;
}

#contents_block .shareFoot .c03 {
  width: 40px;
  padding-right: 10px;
  height: auto;
}

#contents_block .shareFoot a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

@media screen and (max-width: 640px) {
  #contents_block .shareFoot {
    width: 100%;
    margin: 6.25vw 0;
    background-color: #ffffff;
  }

  #contents_block .shareFoot .shareBox {
    width: 90%;
    margin: 0 auto;
  }

  #contents_block .shareFoot .c01 {
    width: 30%;
    height: auto;
    padding-bottom: 1.2em;
    padding-right: 2em;
  }

  #contents_block .shareFoot .c02 {
    width: 15%;
    height: auto;
    padding-right: 2em;
  }

  #contents_block .shareFoot .c03 {
    width: 15%;
    height: auto;
  }
}

/*--------------------------------------------------

  print

--------------------------------------------------*/

@media print {
  body #contents_block .print_none {
    background-image: none !important;
  }
}