@charset "UTF-8";
/* default
---------------------------------------------------- */

/* フォントファイルの読み込み
ページが重くなるのでたくさん読み込むのは望ましくない */
@font-face {
  font-family: 'MyFont_ShueiNGoKinStdN';
  src: local('AP-OTF-ShueiNGoKinStdN-B.otf'), url("../../../../../common/font/AP-OTF-ShueiNGoKinStdN-B.otf");
  font-display: swap;
  font-weight: 400;
}

@font-face {
  font-family: 'MyFont_GOTHICB';
  src: local('GOTHICB.TTF'), url("../../../../../common/font/GOTHICB.TTF");
  font-display: swap;
  font-weight: 700;
}

/* グローバルのCSS変数
ここの値を変更すれば対応箇所がすべて変更される */
:root {
  --black-color: #3a2c20;
  --green-color: #75be43;
  --pink-color: #f1777c;
  --yellow-color: #f9eb21;
  --title-f-size: 25px;
  --sbtitle-f-size: 20px;
  --btn-f-size: 20px;
  --txt-f-size: 15px;
  --remark-f-size: 13px;
  --big-f-size: 1.6em;
  --padding: 5%;
}


/* 画面100%表示用↓ここから */
.mainContentMT {
  width: 100%;
}

/*　パンくずの表示くずれ防止　*/
.rootMT ul {
  overflow: hidden;
  width: 940px !important;
  margin: 0 auto;
}

/* 画面100%表示用↑ここまで */

tr,
th,
td,
div,
span,
a,
p {
  color: inherit;
}

/* spring_present
---------------------------------------------------- */
#spring_present {
  font-family: "MyFont_ShueiNGoKinStdN", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
  width: min(100%, 1920px);
  margin: 0 auto;
  position: relative;
  color: var(--black-color);
  overflow: hidden;
  font-feature-settings: "palt";
  letter-spacing: 0.08em;
}

#spring_present * {
  box-sizing: border-box;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
}

#spring_present img {
  max-width: 100%;
  vertical-align: bottom;
  font-size: 0;
}

#spring_present .pc {
  display: block !important;
}

#spring_present .sp {
  display: none !important;
}


#spring_present ol,
#spring_present ul {
  list-style-type: none;
}

#spring_present a {
  outline: none;
  font-size: inherit;
  text-decoration: none;
}

#spring_present #contents {
  position: relative;
  z-index: 3;
  background: url(../img/egg_back.svg) repeat, #e4f3e0;
  background-size: 600px;
  background-attachment: fixed;
  padding: var(--padding) 0;
  transition: all ease 1s;
}

#spring_present #contents.special {
  background: url(../img/back_g.svg) repeat, #ffffda;
  background-size: 600px;
  background-attachment: fixed;
}

#spring_present #contents.monthly {
  background: url(../img/back_p.svg) repeat, #fdefef;
  background-size: 600px;
  background-attachment: fixed;
}

/* font
---------------------------------------------------- */

#spring_present .title {
  font-size: var(--title-f-size);
  font-weight: 700;
  line-height: 1.2;
}

#spring_present .subtitle {
  font-size: var(--sbtitle-f-size);
  font-weight: 700;
  line-height: 1.5;
}

#spring_present .text {
  font-size: var(--txt-f-size);
  font-weight: 400;
  line-height: 2;
}

#spring_present .remark {
  font-size: var(--remark-f-size);
  font-weight: 400;
  line-height: 2;
}

#spring_present .big {
  font-size: var(--big-f-size);
  font-weight: 700;
}

#spring_present .txt_center {
  text-align: center;
}

#spring_present .txt_left {
  text-align: left;
}

#spring_present .txt_right {
  text-align: right;
}


#spring_present .number {
  font-family: "MyFont_GOTHICB", "MyFont_ShueiNGoKinStdN", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans Japanese", "Arial", "Meiryo", sans-serif;
  font-size: 2em;
}

#spring_present .line {
  background: linear-gradient(to right, var(--yellow-color) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 200% 0.5em;
  background-position: 100% 0.8em;
  transition: 0.8s;
  transition-delay: 0.5s;

}

#spring_present .zoomOut .line {
  background-position: 0 0.8em
}


/* .flex
---------------------------------------------------- */

#spring_present .flex {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

#spring_present .flex.limited {
  margin: 0 0 var(--padding);
}

/* .btn
---------------------------------------------------- */

#spring_present #btn {
  padding: 0 0 8%;
}

#spring_present .btn {
  text-align: center;
  position: fixed;
  width: 100%;
  padding: 1.2em 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 4;
  opacity: 0;
}

#spring_present .btn.non-fixed {
  box-shadow: none;
  padding: 0;
  background: none;
  position: relative;
}

#spring_present .btn a {
  display: block;
  width: 90%;
  max-width: 640px;
  border-radius: 5em;
  margin: 0 auto;
  font-size: var(--btn-f-size);
  padding: 0.8em 0;
  text-decoration: none;
  text-align: center;
  font-weight: 700;
  transition: all ease .3s;
  position: relative;
  color: #fff;
  background-color: #ee5a24;
  overflow: hidden;
  z-index: 2;
  /*  animation: poyopoyo 2s ease-out infinite; */
}

#spring_present .btn a:hover {
  background-color: var(--green-color);
}

#spring_present .btn a:hover:after {
  color: var(--green-color);
}

@keyframes poyopoyo {

  0%,
  40%,
  60%,
  80% {
    transform: scale(1.0);
  }

  50%,
  70% {
    transform: scale(0.95);
  }
}

#spring_present .btn a::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1em;
  margin: auto;
  z-index: 1;
  width: 1.5em;
  height: 1.5em;
  background: #fff;
  border-radius: 50%;
}

#spring_present .btn a::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 1.55em;
  margin: auto;
  z-index: 2;
  width: 0.4em;
  height: 0.4em;
  border-top: 0.15em solid;
  border-right: 0.15em solid;
  transform: rotate(45deg);
  color: #ee5a24;
}

#entry.UpMove {
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 0;
    transform: translateY(100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#entry.DownMove {
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 1;
    transform: translateY(100%);
  }
}

/* .contents
---------------------------------------------------- */

#spring_present .contents {
  width: min(100%, 1200px);
  margin: 0 auto;
  position: relative;
}


/* #spring_present_head
---------------------------------------------------- */

#spring_present #spring_present_head {
  position: relative;
  color: #fff;
  background: #84d076;
}

#spring_present #spring_present_head .head_back {
  position: relative;
  width: min(200%, 1920px);
  left: 50%;
  transform: translateX(-50%);
  max-width: inherit;
}


#spring_present #spring_present_head img.wakupre-icn {
  width: min(10%, 120px);
  position: absolute;
  top: 2.5%;
  left: calc(((100% - 1200px) / 2) + 2.5%);
  animation: 15s linear infinite rotation1;
}

@keyframes rotation1 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}


#spring_present #spring_present_head .title_all {
  width: min(100%, 1200px);
  height: fit-content;
  padding: 0 var(--padding);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

#spring_present #spring_present_head .title_svg {
  width: min(37.75%, 450px);
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 15%));
  transform: translateZ(0);
}

.poyonTrigger {
  opacity: 0;
}

.poyon {
  animation-name: poyon;
  animation-duration: 1.1s;
  animation-fill-mode: forwards;
}


@keyframes poyon {
  0% {
    opacity: 0;
    transform: scale(0.8, 1.4) translate(0%, -100%);
  }

  10% {
    opacity: 1;
    transform: scale(0.8, 1.4) translate(0%, -15%);
  }

  20% {
    transform: scale(1.4, 0.6) translate(0%, 30%);
  }

  30% {
    transform: scale(0.9, 1.1) translate(0%, -10%);
  }

  40% {
    transform: scale(0.95, 1.2) translate(0%, -30%);
  }

  50% {
    transform: scale(0.95, 1.2) translate(0%, -10%);
  }

  60% {
    transform: scale(1.1, 0.9) translate(0%, 5%);
  }

  70% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
  }

  100% {
    transform: scale(1.0, 1.0) translate(0%, 0%);
    opacity: 1;
  }
}


#spring_present #spring_present_head .text {
  margin: 2em 0 0;
  width: min(37.75%, 450px);
}


/* illust
---------------------------------------------------- */

#spring_present .shadow {
  mix-blend-mode: multiply;
  position: relative;
  z-index: -1;
}

#spring_present .illust {
  position: absolute;
  z-index: -1;
}

#spring_present .egg_period {
  position: absolute;
  width: min(37.5%, 450px);
  right: 0;
  top: -230px;
}

#spring_present .egg_period .illust {
  left: 0;
  top: 0;
}

#spring_present .illust01 {
  left: 0;
  top: 0;
  width: min(32.5%, 390px);
}

#spring_present .illust02 {
  right: 0;
  top: 12%;
  width: min(25%, 300px);
}

#spring_present .illust03 {
  left: 0;
  top: 24%;
  width: min(25%, 300px);
}

#spring_present .illust04 {
  right: 0;
  top: 51%;
  width: min(31.8%, 382px);
}

#spring_present .illust05 {
  left: 0;
  top: 60%;
  width: min(23.2%, 278px);
}

#spring_present .illust06 {
  right: 0;
  top: 93%;
  width: min(31.8%, 382px);
}


/* theme_svg
---------------------------------------------------- */

#spring_present .theme {
  padding: var(--padding) 0;
}

#spring_present .theme_title {
  padding: 0 0 var(--padding);
}

#spring_present .theme_svg {
  width: min(26.75%, 321px);
  margin: 0 auto;
  position: relative;
}

#spring_present .theme_svg.limited::before {
  content: "毎月\A抽選";
  white-space: pre;
  font-size: var(--sbtitle-f-size);
  line-height: 1.25;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5em;
  height: 5em;
  border-radius: 50%;
  color: #fff;
  background-color: var(--green-color);
  position: absolute;
  top: -4em;
  left: -4em;
  z-index: 1;
}

#spring_present .theme_svg.limited::after {
  content: "";
  position: absolute;
  top: -2em;
  left: -3em;
  border: solid 2em transparent;
  border-left: solid 5em var(--green-color);
  rotate: 45deg;
  z-index: 0;
}

#spring_present .theme_title .title {
  margin: 1em 0 0;
}


/* .prize_box
---------------------------------------------------- */


#spring_present .prize_box img {
  display: block;
  margin: 0 auto;
  padding: 1%;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 15%);
  background-color: #fff;
  border-radius: 50%;
}

#spring_present .prize_box.special img {
  width: min(80%, 500px);
  background: rgb(209, 177, 22);
  background: linear-gradient(135deg, rgba(209, 177, 22, 1) 0%, rgba(255, 217, 25, 1) 50%, rgba(180, 126, 5, 1) 100%);
}

#spring_present .prize_box.monthly {
  width: 40%;
}

#spring_present .prize_box.monthly img {
  width: min(80%, 350px);
  padding: 1.5%;
}

#spring_present .prize_box.limited {
  width: 30%;
}

#spring_present .prize_box.limited img {
  width: min(95%, 280px);
  padding: 2%;
}

#spring_present .prize_text {
  margin: 3em 0 0;
}

#spring_present .copy {
  margin: 1em auto 0;
}



#spring_present .winner p {
  display: inline-block;
  line-height: 1;
  padding: 0.25em 3em;
  border-radius: 5em;
  color: #fff;
  margin: 1em 0 0;
}

#spring_present .winner.special p {
  background: rgb(209, 177, 22);
  background: linear-gradient(135deg, rgba(209, 177, 22, 1) 0%, rgba(255, 217, 25, 1) 50%, rgba(180, 126, 5, 1) 100%);
}

#spring_present .winner.monthly p {
  background-color: var(--pink-color);
}

#spring_present .winner.limited p {
  background-color: var(--green-color);
}

#spring_present .egg p {
  background: url(../img/egg.svg) no-repeat;
  color: #fff;
  background-size: contain;
  background-position: center;
  display: inline-block;
  padding: 1.5em 1.3em;
  line-height: 1;
  margin: 0 0 1em;
}

/* #footer
---------------------------------------------------- */

#spring_present #footer {
  padding: 2em 0;
  position: relative;
  z-index: 2;
}

#spring_present #footer .remark {
  width: min(90%, 740px);
  margin: 0 auto;
}

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

  #spring_present #spring_present_head img.wakupre-icn {
    left: 2.5%;
  }

  #spring_present .egg_period {
    top: -140px;
    right: 5%;
  }
}



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

  :root {
    --title-f-size: 22px;
    --sbtitle-f-size: 20px;
    --txt-f-size: 15px;
    --btn-f-size: 18px;
    --border-radius: 10px;
    --big-f-size: 1.4em;
    --padding: 18%;
  }


  article p,
  article li {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  /*　左右余白削除　*/
  #fftop_recomDetail section {
    padding: 0;
  }

  #spring_present .sp {
    display: block !important;
  }

  #spring_present .pc {
    display: none !important;
  }


  .delay-time05,
  .delay-time1,
  .delay-time15 {
    animation-delay: 0s !important;
  }

  /* .btn
---------------------------------------------------- */

  #fftop_recomDetail #spring_present #btn {
    padding: 0 0 var(--padding);
  }

  #spring_present .btn {
    padding: 0 0 2em;
  }

  #spring_present .btn a {
    padding: 0.9em 0;
  }

  /* #spring_present_head
---------------------------------------------------- */

  #spring_present #spring_present_head {
    min-height: 100vh;
  }

  #spring_present #spring_present_head img.wakupre-icn {
    width: 20%;
    top: 2.5vw;
    left: 2.5vw;
  }

  #spring_present #spring_present_head .head_back {
    width: 100%;
  }

  #spring_present #spring_present_head .title_all {
    position: relative;
    padding: 0 0 20%;
  }

  #spring_present #spring_present_head .title_svg {
    width: 70%;
    margin: 0 auto
  }

  #spring_present #spring_present_head .text {
    width: inherit;
  }


  /* #contents
---------------------------------------------------- */

  #spring_present #contents {
    background-size: 400px !important;
    padding: 20% 0 var(--padding);
  }

  #spring_present .egg_period {
    width: 70%;
    top: -35vw;
  }

  #spring_present .theme_svg {
    width: 70%;
  }

  /* .prize_box
---------------------------------------------------- */

  #spring_present .prize_box {
    padding: 0 7.5% var(--padding);
  }

  #spring_present .prize_box.monthly,
  #spring_present .prize_box.limited {
    width: 100%;
  }

  #spring_present .prize_box img {
    padding: 2% !important;
    width: 100% !important;
  }

  #spring_present .prize_box .copy {
    text-align: left;
  }

  #spring_present .prize_text {
    margin: 1.5em 0 0;
  }

  #spring_present .theme_svg.limited::before {
    top: -6em;
    left: -2em;
  }

  #spring_present .theme_svg.limited::after {
    top: -4em;
    left: -1em;
    border: solid 1.5em transparent;
    border-left: solid 5em var(--green-color);
  }

  #spring_present .flex.limited {
    margin: 0;
  }

  /* illust
---------------------------------------------------- */

  #spring_present .illust01 {
    left: -3%;
    top: -0.9%;
    width: 50%;
  }

  #spring_present .illust02 {
    width: 40%;
    top: 12.5%;
  }

  #spring_present .illust03 {
    left: -3%;
    top: 27%;
    width: 45%;
  }

  #spring_present .illust04 {
    right: 2%;
    top: 38%;
    width: 50%;
  }

  #spring_present .illust05 {
    left: -5%;
    top: 91%;
    width: 50%;
  }

  #spring_present .illust06 {
    right: -5%;
    top: 98.5%;
    width: 50%;
  }

}



.Android #spring_present * {
  font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Meiryo", sans-serif;
}