@charset "UTF-8";
/* ぼかしから出現 */
/* その場で */
.fadeIn {
  -webkit-animation-name: fadeInAnime;
          animation-name: fadeInAnime;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOutAnime;
          animation-name: fadeOutAnime;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeOutAnime {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeOutAnime {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/*したから*/
.fadeUp {
  -webkit-animation-name: fadeUpAnime;
          animation-name: fadeUpAnime;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
}

@-webkit-keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    -webkit-transform: translateY(100px);
            transform: translateY(100px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0;
}

html {
  font-size: 62.5%;
}

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

html body {
  margin: 0;
  color: white;
  font-family: 'メイリオ','ヒラギノ角ゴ Pro W3','ＭＳ Ｐゴシック',sans-serif;
  font-size: calc(1.4rem + (1vw - 0.32rem) * 0.3571);
}

@media screen and (min-width: 1440px) {
  html body {
    font-size: 1.8rem;
  }
}

html body .tac {
  text-align: center;
}

html body a {
  text-decoration: none;
  color: inherit;
  font-size: 1.8rem;
}

html body .button {
  text-align: center;
  margin: 3em auto;
  padding-bottom: 3em;
}

html body .button a {
  border: .5px solid white;
  border-radius: 5em;
  padding: .8em 2em;
  color: white;
}

html body .button a:hover {
  background-color: white;
  color: black;
  opacity: .8;
}

html body .button a:active {
  background-color: white;
  color: black;
}

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

html body li {
  list-style-type: none;
}

.loader {
  position: fixed;
  z-index: 555;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  background-color: rgba(43, 35, 35, 0.4);
}

.loader .loadimg {
  width: 60%;
  max-width: 300px;
}

.bg {
  background-position: 60%;
  background-size: cover;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
  background-attachment: fixed;
  /*スクロール時に固定。 */
}

.bglayer {
  background-color: rgba(43, 35, 35, 0.4);
  width: 90%;
  margin: auto;
  position: relative;
}

@media screen and (min-width: 768px) {
  .bglayer {
    background-color: unset;
  }
}

@media screen and (min-width: 768px) {
  .bglayer {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 1440px) {
  .bglayer {
    width: 80%;
    margin-left: auto;
    margin-right: 0;
  }
}

.inner {
  width: 90%;
  margin: auto;
}

.sp_none {
  display: none;
}

@media screen and (min-width: 768px) {
  .sp_none {
    display: block;
  }
}

@media screen and (min-width: 768px) {
  .pc_none {
    display: none;
  }
}

.top .xmaslogo {
  width: 25%;
  margin: auto;
  padding: 5rem 0;
}

@media screen and (min-width: 768px) {
  .top .xmaslogo {
    margin: 0;
  }
}

.top p span {
  font-size: .8em;
}

@media screen and (min-width: 768px) {
  .top .pc_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .top .h1_wrapper {
    width: 70%;
  }
  .top .button {
    margin: 0;
  }
  .top .topslideshow {
    background-color: rgba(47, 23, 23, 0.47);
  }
  .top .slick_xmas li > div {
    margin: 1rem;
  }
}

.slick-track {
  padding-top: 2em;
  padding-bottom: 2em;
}

.slick-slide img {
  height: 30vw;
  max-height: 400px;
  min-height: 180px;
  -o-object-fit: contain;
     object-fit: contain;
}

.message {
  color: #3B3B3B;
  position: relative;
  height: 100vh;
  margin-top: 50px;
}

.message .bglayer {
  background-size: 90%;
  height: 100vh;
  background-color: rgba(43, 35, 35, 0.4);
}

@media screen and (min-width: 768px) {
  .message .bglayer {
    background-color: unset;
    position: absolute;
    height: auto;
  }
}

.message .message_wrapper {
  background-position: center;
  background-size: cover;
  padding: 5rem 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.message .message_text {
  padding: 9.5vw;
}

.message h2 {
  font-size: 2.6rem;
  font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.message h2 span {
  color: #9D2929;
  display: block;
  text-align: right;
}

.message_tea {
  width: 40%;
  height: 100px;
  position: absolute;
  bottom: 0px;
  right: 30px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (min-width: 768px) {
  .message {
    height: auto;
  }
  .message .message_wrapper {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    padding: 0;
    width: 80%;
    margin-left: auto;
    min-height: 330px;
    height: 30vw;
    max-height: 500px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .message .message_text {
    width: calc(49rem + (1vw - 0.77rem) * 16.3690);
    /*490-600*/
    max-width: 60rem;
    padding: 2.5rem 0;
  }
  .message .message_text h2 {
    width: 70%;
    margin: 0 auto;
  }
  .message .message_text p {
    font-size: calc(1.4rem + (1vw - 0.77rem) * 0.2976);
    /*14-16*/
  }
  .message .message_tea {
    position: relative;
    margin-left: auto;
    height: 150px;
  }
}

@media screen and (min-width: 1440px) {
  .message .message_text p {
    font-size: 1.6rem;
  }
}

.series article[class^="series_"] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.series .tea_icon {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 25%;
  height: calc(8rem + (1vw - 0.32rem) * 7.1429);
  /*8-16*/
  margin-left: auto;
  margin-right: 1rem;
  margin-bottom: 3rem;
}

.series .tea_icon:nth-of-type(2) {
  margin-left: 1rem;
  margin-right: auto;
  width: 35%;
  height: calc(10rem + (1vw - 0.32rem) * 8.9286);
  /*10-20*/
}

.series .series_milk {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

@media screen and (min-width: 768px) {
  .series .tea_icon {
    margin-top: -4em;
    margin-bottom: 0;
  }
}

@media screen and (min-width: 1024px) {
  .series {
    max-width: 1008px;
    margin: auto;
  }
  .series .tea_icon {
    height: 16rem;
  }
  .series .tea_icon:nth-of-type(2) {
    height: 20rem;
  }
}

.for_me, .for_you {
  color: #3B3B3B;
}

.for_me .slick-slide > div, .for_you .slick-slide > div {
  width: 85%;
  margin: auto;
  padding: 2rem 1rem;
}

.for_me .paper, .for_you .paper {
  background-color: #FAF5F5;
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.61);
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.61);
  position: relative;
}

.for_me .paper::before, .for_me .paper::after, .for_you .paper::before, .for_you .paper::after {
  position: absolute;
  content: '';
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.for_me p, .for_you p {
  font-size: 1rem;
}

.for_me .for_me1 .paper, .for_me .for_you1 .paper, .for_you .for_me1 .paper, .for_you .for_you1 .paper {
  rotate: -2deg;
}

.for_me .for_me1 .paper::before, .for_me .for_me1 .paper::after, .for_me .for_you1 .paper::before, .for_me .for_you1 .paper::after, .for_you .for_me1 .paper::before, .for_you .for_me1 .paper::after, .for_you .for_you1 .paper::before, .for_you .for_you1 .paper::after {
  width: 100px;
  height: 70px;
}

.for_me .for_me1 .paper::before, .for_me .for_you1 .paper::before, .for_you .for_me1 .paper::before, .for_you .for_you1 .paper::before {
  top: -2rem;
  left: -2rem;
}

.for_me .for_me1 .paper::after, .for_me .for_you1 .paper::after, .for_you .for_me1 .paper::after, .for_you .for_you1 .paper::after {
  bottom: -2rem;
  right: -2rem;
}

.for_me .for_me2 .paper, .for_me .for_you2 .paper, .for_you .for_me2 .paper, .for_you .for_you2 .paper {
  rotate: 2deg;
}

.for_me .for_me2 .paper::before, .for_me .for_me2 .paper::after, .for_me .for_you2 .paper::before, .for_me .for_you2 .paper::after, .for_you .for_me2 .paper::before, .for_you .for_me2 .paper::after, .for_you .for_you2 .paper::before, .for_you .for_you2 .paper::after {
  width: 80px;
  height: 50px;
}

.for_me .for_me2 .paper::before, .for_me .for_you2 .paper::before, .for_you .for_me2 .paper::before, .for_you .for_you2 .paper::before {
  top: -2rem;
  left: -1rem;
}

.for_me .for_me2 .paper::after, .for_me .for_you2 .paper::after, .for_you .for_me2 .paper::after, .for_you .for_you2 .paper::after {
  bottom: -2rem;
  right: -1rem;
}

@media screen and (min-width: 768px) {
  .for_me h2, .for_you h2 {
    width: 50%;
  }
  .for_me .pc_flex, .for_you .pc_flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 80%;
    margin: auto;
  }
  .for_me .pc_flex .voiceimg, .for_me .pc_flex .voicetxt, .for_you .pc_flex .voiceimg, .for_you .pc_flex .voicetxt {
    width: 48%;
  }
}

@media screen and (min-width: 1024px) {
  .for_me, .for_you {
    max-width: 1008px;
    margin: auto;
  }
  .for_me .pc_flex_2, .for_you .pc_flex_2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .for_me .pc_flex_2 > div, .for_you .pc_flex_2 > div {
    width: 50%;
  }
  .for_me .pc_flex_2 .pc_flex, .for_you .pc_flex_2 .pc_flex {
    width: 90%;
  }
}

.giftset {
  max-width: 1008px;
  margin: auto;
  padding-bottom: 100px;
}

.giftset a {
  display: block;
}
/*# sourceMappingURL=specialpage202211.css.map */