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

@PC - common.css v5.0.0

(c) ULM Co.,Ltd. - https://www.ulm-design.com
************************************************/
/* reset */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
hr,
menu,
nav,
section {
  display: block;
}

a,
hr {
  padding: 0;
}

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

ins,
mark {
  background-color: #ff9;
  color: #000;
}

body {
  line-height: 1;
}

li,
ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

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

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

a {
  margin: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: 0 0;
}

ins {
  text-decoration: none;
}

mark {
  font-style: italic;
  font-weight: 700;
}

del {
  text-decoration: line-through;
}

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

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

hr {
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
}

input,
select {
  vertical-align: middle;
}

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

html

-------------------------------*/
html,
body {
  height: 100%;
  font: 16px/1em "LINE Seed JP", "M PLUS Rounded 1c", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  word-wrap: break-word;
  line-height: 1.5;
  font-weight: 700;
  /*-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;*/
  font-feature-settings: "palt";
  /*文字間詰め*/
  -webkit-text-size-adjust: 100%;
  /* adjust */
}
@media screen and (min-width: 1024px) {
  html,
  body {
    font: 16px/1em "LINE Seed JP", "M PLUS Rounded 1c", "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
    font-weight: 700;
    line-height: 2;
  }
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
*:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.hover {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.click {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.click:active {
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  transform: scale(0.95);
}

.w100 {
  width: 100%;
}

img {
  width: 100%;
  vertical-align: middle;
  image-orientation: none;
  height: auto;
}

a {
  transition: all 0.2s ease;
}
@media screen and (min-width: 1024px) {
  a:hover {
    transform: scale(1.05);
  }
}

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

#footer

-------------------------------*/
footer {
  padding: 3em 0 1rem;
  text-align: center;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  footer {
    padding: 3em 0 1rem;
  }
}

.top-link {
  display: inline-block;
  text-align: center;
  background: linear-gradient(to top, #ff6ca5, #a056ff);
  border-radius: 50px;
  text-decoration: none;
  color: #fff;
  font-size: 1.25rem;
  padding: 14px 45px;
  margin-bottom: 2rem;
  border: 3px solid #fff;
  font-family: "LINE Seed JP", sans-serif;
  font-style: normal;
}
@media screen and (min-width: 1024px) {
  .top-link {
    padding: 8px 45px;
  }
}

.cc {
  color: #000;
}
.cc img {
  width: 55%;
}
@media screen and (min-width: 1024px) {
  .cc img {
    width: 27%;
  }
}

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

#main

-------------------------------*/
#main {
  display: block;
}

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

#wrapper

-------------------------------*/
.wrapper {
  width: 100%;
  display: block;
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrapper:before {
  content: "";
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-image: url(../img/bg_sp.webp);
  background-size: cover;
  z-index: -15;
}
@media screen and (min-width: 1024px) {
  .wrapper:before {
    background-image: url(../img/bg_pc.webp);
    background-size: cover;
  }
}

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

#bg-item-fall

-------------------------------*/
#bg-item-fall {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -5;
}
#bg-item-fall .star {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  animation: twinkle 3s infinite;
  opacity: 0;
}
@keyframes twinkle {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

/*--------------------------------------------------
リマケタグの隙間対策
--------------------------------------------------*/
iframe[name=google_conversion_frame] {
  height: 0 !important;
  width: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin-top: -13px;
}

.cs {
  width: 60%;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  .cs {
    width: 400px;
  }
}

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

animation

-------------------------------*/
.fadein {
  opacity: 0;
  transition: all 2s ease;
}

.fadein.fadein-anime {
  animation: fadein 2s ease forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.sp {
  display: block;
}
@media screen and (min-width: 1024px) {
  .sp {
    display: none;
  }
}

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

.mv {
  width: 95%;
  margin: 15% auto 1.5rem;
  max-width: 650px;
}
@media screen and (min-width: 1024px) {
  .mv {
    width: 60%;
    max-width: 725px;
    margin: 2.625em auto 2rem;
  }
}
.mv img {
  width: 100%;
  object-fit: contain;
}

.mv-date {
  width: 85%;
  margin: 0 auto 3rem;
  max-width: 580px;
}
@media screen and (min-width: 1024px) {
  .mv-date {
    width: 30%;
    max-width: 640px;
    margin: 0 auto 4rem;
  }
}
.mv-date img {
  width: 100%;
  height: auto;
}

.lead {
  width: 95%;
  margin: 0 auto 15%;
}
@media screen and (min-width: 1024px) {
  .lead {
    max-width: 700px;
    margin: 0 auto 70px;
    width: 88%;
  }
}
.lead img {
  width: 100%;
  height: auto;
}
.lead picture {
  display: block;
  width: 100%;
}

.lead-text {
  margin-bottom: 1rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.8;
  color: #ff2899;
  font-family: "LINE Seed JP", sans-serif;
  font-style: normal;
  filter: drop-shadow(1px 1px 0 rgb(255, 255, 255)) drop-shadow(-1px 1px 0 rgb(255, 255, 255)) drop-shadow(1px -1px 0 rgb(255, 255, 255)) drop-shadow(-1px -1px 0 rgb(255, 255, 255)) drop-shadow(1px 1px 0 rgb(255, 255, 255)) drop-shadow(-1px 1px 0 rgb(255, 255, 255)) drop-shadow(1px -1px 0 rgb(255, 255, 255)) drop-shadow(-1px -1px 0 rgb(255, 255, 255));
}
@media screen and (min-width: 1024px) {
  .lead-text {
    font-size: 1.25rem;
    line-height: 1.8;
  }
}

.sp-br {
  display: block;
}
@media screen and (min-width: 1024px) {
  .sp-br {
    display: none;
  }
}

.pc-br {
  display: none;
}
@media screen and (min-width: 1024px) {
  .pc-br {
    display: block;
  }
}

.wf {
  padding: 8% 3% 0;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}
@media screen and (min-width: 1024px) {
  .wf {
    padding: 4rem 0 0;
  }
}

.wf-prize {
  position: relative;
  padding: 18% 0.75rem 2.25rem;
  margin-bottom: 7rem;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .wf-prize {
    padding: 5rem 1.5rem 2.5rem;
  }
}
.wf-prize .wf-prize-ttl {
  width: 93%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%) translateY(-50%);
  max-width: 650px;
}
@media screen and (min-width: 1024px) {
  .wf-prize .wf-prize-ttl {
    width: 50%;
    max-width: 370px;
  }
}

.wf-prize-container {
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .wf-prize-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

.wf-prize-container-pc {
  margin: 0 auto;
  width: 95%;
}
@media screen and (min-width: 1024px) {
  .wf-prize-container-pc {
    width: 45%;
  }
}
.wf-prize-container-pc-name {
  text-align: center;
  width: 100%;
  margin: 0 0 1rem;
  padding-bottom: calc(1rem + 5px);
}
.wf-prize-container-pc-name img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  .wf-prize-container-pc-name {
    text-align: left;
    width: 86.6666666667%;
  }
  .wf-prize-container-pc-name img {
    width: 90%;
    margin: 0;
  }
}

.wf-prize-container-img {
  width: 85%;
  margin: 0 auto 1rem;
  max-width: 350px;
}
@media screen and (min-width: 1024px) {
  .wf-prize-container-img {
    width: 45%;
  }
}

.wf-prize-container-txt {
  font-size: 1rem;
  line-height: 1.8;
  font-family: "LINE Seed JP", sans-serif;
  font-style: normal;
  text-align: justify;
}
@media screen and (min-width: 1024px) {
  .wf-prize-container-txt {
    width: 88%;
    margin-bottom: 2rem;
  }
}
.wf-prize-container-txt-from {
  display: block;
  text-align: right;
  font-size: 0.8125rem;
  line-height: 1;
}

.wf-prize-01 {
  color: #8f4eed;
}
.wf-prize-01 .wf-prize-container-pc-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #8f4eed 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.wf-prize-01 .wf-prize-container-txt {
  color: #8f4eed;
}

.wf-prize-02 {
  color: #ff4676;
}
.wf-prize-02 .wf-prize-container-pc-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #ff4676 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.wf-prize-02 .wf-prize-container-txt {
  color: #ff4676;
}

.pre {
  padding: 0 3%;
  margin: 0 auto;
  position: relative;
  max-width: 960px;
}
@media screen and (min-width: 1024px) {
  .pre {
    padding: 0;
  }
}

.frame {
  --frame-cut: 25px;
  --frame-cut-x: 16px;
  --frame-cut-y: 16px;
  --frame-border: 3px;
  --frame-corner-border: calc(var(--frame-border) * 0.5);
  --frame-border-color: #d8a72f;
}
@media screen and (min-width: 1024px) {
  .frame {
    --frame-cut-x: var(--frame-cut);
    --frame-cut-y: var(--frame-cut);
  }
}
.frame--gold {
  --frame-border-color: #d8a72f;
}
.frame {
  position: relative;
  isolation: isolate;
  background: transparent;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--frame-border-color);
  clip-path: polygon(var(--frame-cut-x) 0, calc(100% - var(--frame-cut-x)) 0, 100% var(--frame-cut-y), 100% calc(100% - var(--frame-cut-y)), calc(100% - var(--frame-cut-x)) 100%, var(--frame-cut-x) 100%, 0 calc(100% - var(--frame-cut-y)), 0 var(--frame-cut-y));
  z-index: 0;
  pointer-events: none;
}
.frame::after {
  content: "";
  position: absolute;
  inset: var(--frame-border);
  background: #fff;
  clip-path: polygon(calc(var(--frame-cut-x) - var(--frame-corner-border)) 0, calc(100% - var(--frame-cut-x) + var(--frame-corner-border)) 0, 100% calc(var(--frame-cut-y) - var(--frame-corner-border)), 100% calc(100% - var(--frame-cut-y) + var(--frame-corner-border)), calc(100% - var(--frame-cut-x) + var(--frame-corner-border)) 100%, calc(var(--frame-cut-x) - var(--frame-corner-border)) 100%, 0 calc(100% - var(--frame-cut-y) + var(--frame-corner-border)), 0 calc(var(--frame-cut-y) - var(--frame-corner-border)));
  z-index: 0;
  pointer-events: none;
}
.frame > * {
  position: relative;
  z-index: 1;
}

.wf-prize-01 {
  --frame-border-color: #9e67ed;
}
.wf-prize-01::after {
  background: linear-gradient(to bottom, #fff, rgb(237.88, 228.12, 251.96));
}

.wf-prize-02 {
  --frame-border-color: #ff4676;
}
.wf-prize-02::after {
  background: linear-gradient(to bottom, #fff, rgb(255, 232.8, 238.56));
}

.pre-prize {
  position: relative;
  padding: 18% 0.75rem 2.25rem;
  margin-bottom: 7rem;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  .pre-prize {
    padding: 5rem 1.5rem 2.5rem;
  }
}
.pre-prize .pre-prize-ttl {
  width: 93%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%) translateY(-50%);
  max-width: 370px;
}
@media screen and (min-width: 1024px) {
  .pre-prize .pre-prize-ttl {
    width: 50%;
  }
}
.pre-prize .pre-prize-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin: 0 auto;
}
.pre-prize .pre-prize-container-img {
  width: 65%;
  margin: 0 auto 1rem;
  max-width: 350px;
}
@media screen and (min-width: 1024px) {
  .pre-prize .pre-prize-container-img {
    width: 28%;
  }
}
.pre-prize .pre-prize-container-texts {
  width: 95%;
}
@media screen and (min-width: 1024px) {
  .pre-prize .pre-prize-container-texts {
    padding-right: 10%;
    width: 49%;
    margin-bottom: 1rem;
  }
}
.pre-prize .pre-prize-container-name {
  text-align: center;
  width: 100%;
  margin: 0 0 1rem;
  padding-bottom: calc(1rem + 5px);
}
.pre-prize .pre-prize-container-name img {
  display: block;
  width: 80%;
  height: auto;
  margin: 0 auto;
}
@media screen and (min-width: 1024px) {
  .pre-prize .pre-prize-container-name {
    text-align: left;
  }
  .pre-prize .pre-prize-container-name img {
    width: 90%;
    margin: 0;
  }
}
.pre-prize .pre-prize-container-txt {
  font-size: 1rem;
  line-height: 1.8;
  font-family: "LINE Seed JP", sans-serif;
  font-style: normal;
}
.pre-prize .pre-prize-container-txt-from {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  margin-top: 5px;
}

.pre-prize01 {
  --frame-border-color: #b582fe;
  color: #9457ec;
}
.pre-prize01::after {
  background: linear-gradient(to bottom, rgb(237.88, 228.12, 251.96), #fff);
}
.pre-prize01 .pre-prize-container-img img {
  border: solid 4px #9457ec;
}
.pre-prize01 .pre-prize-container-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #9457ec 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.pre-prize02 {
  --frame-border-color: #ff4676;
  color: #ff4676;
}
.pre-prize02::after {
  background: linear-gradient(to bottom, rgb(255, 232.8, 238.56), #fff);
}
.pre-prize02 .pre-prize-container-img img {
  border: solid 4px #ff4676;
}
.pre-prize02 .pre-prize-container-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #ff4676 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.pre-prize03 {
  --frame-border-color: #42d1ff;
  color: #33bfec;
}
.pre-prize03::after {
  background: linear-gradient(to bottom, rgb(230.52, 247.32, 252.72), #fff);
}
.pre-prize03 .pre-prize-container-img img {
  border: solid 4px #33bfec;
}
.pre-prize03 .pre-prize-container-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #33bfec 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.pre-prize04 {
  --frame-border-color: #8560a1;
  color: #694a9b;
}
.pre-prize04::after {
  background: linear-gradient(to bottom, rgb(235.48, 229.56, 239.96), #fff);
}
.pre-prize04 .pre-prize-container-img img {
  border: solid 4px #694a9b;
}
.pre-prize04 .pre-prize-container-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #694a9b 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}
.pre-prize04 .pre-prize-container-txt-from {
  text-align: left;
}

.pre-prize05 {
  --frame-border-color: #fea7c9;
  color: #fe73a9;
}
.pre-prize05::after {
  background: linear-gradient(to bottom, rgb(254.92, 243.8, 248.12), #fff);
}
.pre-prize05 .pre-prize-container-img img {
  border: solid 4px #fe73a9;
}
.pre-prize05 .pre-prize-container-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #fe73a9 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.pre-prize06 {
  --frame-border-color: #ffdc63;
  color: #f8bf00;
}
.pre-prize06::after {
  background: linear-gradient(to bottom, rgb(254.65, 251.8, 242.25), #fff);
}
.pre-prize06 .pre-prize-container-img img {
  border: solid 4px #f8bf00;
}
.pre-prize06 .pre-prize-container-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #f8bf00 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.pre-prize07 {
  --frame-border-color: #5de3f3;
  color: #33d1e4;
}
.pre-prize07::after {
  background: linear-gradient(to bottom, rgb(238.68, 251.32, 252.84), #fff);
}
.pre-prize07 .pre-prize-container-img img {
  border: solid 4px #33d1e4;
}
.pre-prize07 .pre-prize-container-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #33d1e4 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.pre-prize08 {
  --frame-border-color: #bd7bec;
  color: #b364ec;
}
.pre-prize08::after {
  background: linear-gradient(to bottom, rgb(246.64, 237.95, 252.91), #fff);
}
.pre-prize08 .pre-prize-container-img img {
  border: solid 4px #b364ec;
}
.pre-prize08 .pre-prize-container-name {
  background-image: radial-gradient(circle closest-side at 25% 50%, #b364ec 99%, transparent);
  background-size: 10px 5px;
  background-repeat: repeat-x;
  background-position: left bottom;
}

.yushu,
.nyusho {
  padding: 0 3%;
  margin: 0 auto;
  max-width: 960px;
}
@media screen and (min-width: 1024px) {
  .yushu,
  .nyusho {
    padding: 0;
  }
}

.yushu-prize,
.nyusho-prize {
  position: relative;
  padding: 4.25rem 0.5rem 1.25rem;
  margin-bottom: 7rem;
}
@media screen and (min-width: 1024px) {
  .yushu-prize,
  .nyusho-prize {
    padding: 7rem 2rem 4.25rem;
  }
}

.yushu-prize {
  --frame-border-color: #ff7f52;
  color: #ff7241;
}

.nyusho-prize {
  --frame-border-color: #42e1c8;
  color: #0fcbae;
  margin-bottom: 2rem !important;
}
@media screen and (min-width: 1024px) {
  .nyusho-prize {
    margin-bottom: 7 !important;
  }
}

.yushu-prize-ttl,
.nyusho-prize-ttl {
  width: 93%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%) translateY(-50%);
  max-width: 370px;
}
@media screen and (min-width: 1024px) {
  .yushu-prize-ttl,
  .nyusho-prize-ttl {
    width: 50%;
  }
}

.yushu-prize-container,
.nyusho-prize-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
}
.yushu-prize-container-item,
.nyusho-prize-container-item {
  text-align: center;
  width: 43%;
}
@media screen and (min-width: 1024px) {
  .yushu-prize-container-item,
  .nyusho-prize-container-item {
    width: 20%;
    padding: 0 0.5rem 1.5rem;
  }
}
.yushu-prize-container-item-img,
.nyusho-prize-container-item-img {
  margin-bottom: 0.4rem;
  border: solid 1px #ddd;
}
.yushu-prize-container-item-name,
.nyusho-prize-container-item-name {
  margin-bottom: 1.7rem;
  font-size: 0.87rem;
  font-family: "LINE Seed JP", sans-serif;
  font-style: normal;
}
.yushu-prize-container-item-name span,
.nyusho-prize-container-item-name span {
  margin-right: 0.5em;
}
@media screen and (min-width: 1024px) {
  .yushu-prize-container-item-name,
  .nyusho-prize-container-item-name {
    margin-bottom: 0;
  }
}

.yushu-prize-container-item-img {
  border: solid 3px #ff7241;
}

.nyusho-prize-container-item-img {
  border: solid 3px #0fcbae;
}/*# sourceMappingURL=style.css.map */