@charset "UTF-8";

#footer, .pageTop {
  position: relative;
  background-color: #fff;
  z-index: 13;
}
#content {
min-width: inherit;
color: #333333;
font-size: 16px;
}
#content .contentInner{
background-color: #fadce2;
position: relative;
}
#content main {
background-color: #fea7c2;
position: relative;
}
#content .campaignInner {
max-width: 1105px;
margin: 0 auto;
padding: 0;
position: relative;
z-index: 7;
}
#content h2{
text-align: center;
}
#content a {
color: #0078ff;;
}
#content p+p {
margin-top: 20px;
}
#content p {
line-height: 1.7;
}
#content p,
#content dt,
#content dd,
#content li {
text-align: justify;
}
@media screen and (max-width: 640px) {
#content .campaignInner {
margin: 0 28px;
}
#content main {
padding-top: 45px;
}
}
/* -----------------------------
mainvisual
------------------------------*/

#content #mainvisual{
  position: relative;
}

#content #mainvisual h1::before{
  content: "";
  background: url("img/logo.webp") no-repeat center/ 287px 65px;
  width: 287px;
  height: 65px;
  position: absolute;
  top: 40px;
  left: calc(50% - 520px);
  z-index: 10;
}
#content #mainvisual h1{
  text-align: center;
  position: relative;
  bottom: 0;
  z-index: 7;
  padding-top: 25px;
}
#content #mainvisual::after{
  content: "";
  background: url("img/mv_bottom.webp") no-repeat center/ 100% 338px;
  width: 100%;
  height: 338px;
  position: absolute;
  bottom: -290px;
  z-index: 5;
}

#content #mainvisual h1 img{
  width: 100%;
  height: auto;
  max-width: 1034px;
  text-align: center;
  position: relative;
  bottom: 0;
}
@media screen and (max-width: 640px) {
#content #mainvisual h1::before{
  background: url("img/logo_s.webp") no-repeat center/ 170px 36px;
  width: 170px;
  height: 36px;
  top: 24px;
  left: 6%;
}
	
#content #mainvisual::after{
  background: url("img/mv_bottom_s.webp") no-repeat center/ 100% 80px;
  height: 80px;
  bottom: -49px;
}
#content #mainvisual h1{
  bottom: 0;
  padding-top: 25px;
}
#content #mainvisual h1 img{
  width: 90%;
}
}

/* -----------------------------
btn
------------------------------*/
#present .btn01 {
text-align: center;
}
#present .btn01 a {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
  max-width: 240px;
  padding: 10px 25px;
  color: #fff;
  font-weight: bold;
  background: #58c4cc;
  border-radius: 9999px;
  border-bottom: solid 5px #4fb1b8;
  padding-right: 60px;
  font-size: 18px;
}
#present .btn01 a::after{
  content: "";
  background: url("img/icon.webp") 0 0 / 24px 20px;
  width: 24px;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  right: calc(50% - 70px);
}
@media screen and (min-width: 641px) {
#content #present ul li .btn01{
width: 250px;
margin: 20px auto 0;
}
#present .btn01 a:hover {
  border-bottom: solid 2px #cccccc;
  transform: translateY(3px);
  opacity: 0.8;
  text-decoration: none;
}
#content #present ul li .btn01 a{
transition: 0.2s ease-in-out;
}
}

@media screen and (max-width: 640px) {
#content #present ul li .btn01 {
width: 142px;
margin: 16px auto 0;
}
#present .btn01 a {
  padding: 5px 0 5px 22px;
  font-size: 12px;
  display: block;
  text-align: left;
}
#present .btn01 a::after{
  background: url("img/icon.webp") 0 0 / 16px 13px;
  width: 16px;
  height: 13px;
  top: calc(50% - 7px);
  right: calc(50% - 50px);
}}
/* -----------------------------
present
------------------------------*/
#content #present {
position: relative;
padding-top: 80px;
text-align: center;
}
#content #present h2 {
margin-bottom: 30px;
}

@media screen and (max-width: 640px) {
#content #present {
padding-top: 0;
}
#content #present h2 {
margin-bottom: 15px;
}
}
#content .column01 {
width: 1105px;
margin: 0 auto 110px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content .column01 li{
width: 250px;
z-index: 10;
position: relative;
}
#content .column01 li:nth-child(1)::before{
content: "";
background: url("img/right.webp") 0 0 / 159px 181px;
width: 159px;
height: 181px;
position: absolute;
top: -182px;
left: -30px;
animation: yurayura 3s ease-in-out infinite alternate;
  display: inline-block;
transform-origin: center bottom;
}
@keyframes yurayura {
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}
#content .column02 {
width: 985px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content .column02 li{
position: relative;
width: 475px;
}
@media screen and (min-width: 641px) {
#content .column02 li:nth-child(2)::after{
content: "";
background: url("img/left.webp") 0 0 / 160px 188px;
width: 160px;
height: 188px;
position: absolute;
top: -170px;
right: -155px;
animation: fuwafuwa 3s cubic-bezier(0.11, 0.12, 0.6, 0.54) infinite alternate;
  display: inline-block;
  margin-top: 15px;
}
}
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-4deg);
  }
  50% {
    transform:translate(0, -20px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

@media screen and (min-width: 641px) {
#content .column01 li{
height: 517px;  
}
#content .column02 li{
height: 340px;
}
}

@media screen and (max-width: 640px) {
#content .column01 {
width: 85vw;
margin: 0 auto 56px;
justify-content: center;
}
#content .column01 li{
position: relative;
width: 40vw;
}
#content .column01 li:nth-of-type(2n+1){
margin-right: 5vw;
}
#content .column02 {
width: 85vw;
display: block;
margin: 0 auto;
}
#content .column02 li{
width: 85vw;
}
#content .column01 li:nth-child(1)::before{
background: url("img/right.webp") 0 0 / 69px 79px;
width: 69px;
height: 79px;
top: -80px;
left: 0;
}
}
@keyframes fuwafuwa_sp {
  0% {
    transform:translate(0, 0) rotate(-4deg);
  }
  50% {
    transform:translate(0, -10px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}

@media screen and (min-width: 641px) {
#content #present ul.sp li img {
max-width: 250px;
width: 100%;
}
#content .column01 li + li,#content .column02 li + li{
margin-left: 35px;
}
#content .column01 li:nth-of-type(4n+1),#content .column02 li:nth-of-type(2n+1){
margin-left: 0;
}
#content .column01 li:nth-of-type(n+5),#content .column02 li:nth-of-type(n+3){
margin-top: 50px;
}

}
@media screen and (max-width: 640px) {
#content .column01 li:nth-of-type(n+3){
margin-top: 40px;
}
}
#content #present ul.pc li img {
max-width: 600px;
width: 100%;
}

@media screen and (max-width: 640px) {
#content #present h2 img {
width: auto;
height: 30px;
}
#content #present ul img{
    width: 100%;
	height: auto;
  }
#content #present ul.pc li + li {
margin-top: 45px;
  }
#content #present .campaignInner .pc-image-inner h2{
position: relative;
}
#content #present .campaignInner .pc-image-inner h2::after{
content: "";
background: url("img/left.webp") 0 0 / 63px 75px;
position: absolute;
width: 63px;
height: 75px;
top: -50%;
right: 0;
animation: fuwafuwa_sp 3s cubic-bezier(0.11, 0.12, 0.6, 0.54) infinite alternate;
}
}
/* -----------------------------
attArea
------------------------------*/
#content #attArea {
width: auto;
position: relative;
padding-bottom: 100px;
margin: 64px auto 0;
z-index: 7;
}
#content #attArea .attAreaBox {
margin: 110px auto 0;
}
#content #attArea h2 {
margin-bottom: 30px;
text-align: center;
}
#content #attArea .attAreaInner{
border-radius: 999px 999px 0 0;
color: #f88cb0;
position: relative;
}
#content #attArea .attAreaInner ul{
width: 1100px;
margin: 0 auto;
}
#content #attArea dl {
word-break: break-all;
font-size: 16px;
}
#content #attArea dl dt {
font-weight: bold;
position: relative;
padding-left: 20px;
font-size: 18px;
}
#content #attArea dl dt::before {
content: "●";
margin-right: 3px;
position: absolute;
top: -1px;
left: 0;
}
#content #attArea dl dd {
margin-bottom: 20px;
}
#content #attArea ul li {
position: relative;
padding-left: 1.2em;
line-height: 1.6;
}
#content #attArea ul li h3{
font-size: 26px;
font-weight: bold;
color: #ef467b;
text-align: center;
padding-bottom: 10px;
}
#content #attArea .setList{
display: flex;
justify-content: space-between;
color: #f07a9f;
}
#content #attArea .setList > li {
position: relative;
background-color: #fff;
border-radius: 20px;
border: 2px solid #f07a9f;
padding: 20px 30px;
width: 48%;	
}
#content #attArea .setList .setSP::before{
content: "";
position: absolute;
background: url("img/odoroki.webp") 0 0 / 174px 159px;
width: 174px;
height: 159px;
top: -100px;
left: 0;
z-index: -1;
animation: updown 1.5s steps(2) infinite alternate;
  display: inline-block;
}
@keyframes updown {
  0% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, -10px);
  }
}
#content #attArea .setList .setSP::after{
content: "";
position: absolute;
background: url("img/icon_2.webp") 0 0 / 106px 164px;
width: 106px;
height: 164px;
bottom: 20px;
right: 30px;
}
#content #attArea .setList .setPC::after{
content: "";
position: absolute;
background: url("img/icon_3.webp") 0 0 / 173px 147px;
width: 173px;
height: 147px;
bottom: 20px;
right: 30px;
}
#content #attArea .setList > li + li{
margin-left: 40px;
}
#content #attArea ul.attList{
line-height: 1.2;
padding-top: 20px;
}
#content #attArea ul.attList li {
position: relative;
padding-left: 1.2em;
font-size: 14px;
text-align: center;
color: #fff;
}
#content #attArea ul.attList li:before {
content: "※";
position: absolute;
top: 0;
left: 290px;
}
#content #attArea ol {
counter-reset: number 0;
}
#content #attArea ol li {
position: relative;
padding-left: 1.2em;
line-height: 1.6;
}
#content #attArea ol li:before {
counter-increment: number 1;
content: counter(number) ". ";
position: absolute;
top: 0;
left: 0;
}
@media screen and (max-width: 640px) {
#content #attArea {
margin: 0;
padding: 0 0 30px;
}
#content #attArea .attAreaBox {
margin-top: 46px;
}
#content #attArea h2{
margin-bottom: 15px;
text-align: center;
}
#content #attArea .attAreaInner{
padding: 0 15px;
}
#content #attArea h2 img{
width: auto;
height: 42px;
}
#content #present h2 img {
width: auto;
height: 40px;
}
#content #attArea ul li h3{
font-size: 19px;
padding-bottom: 15px;
}
#content #attArea dl {
font-size: 16px;
}
#content #attArea dl dt {
font-size: 16px;
}
#content #attArea dl dd {
margin-bottom: 16px;
font-size: 13px;
}
#content #attArea ul.attList{
line-height: 1.5;
padding-top: 15px;
}
#content #attArea ul.attList li {
font-size: 14px;
text-align: left;
}
#content #attArea ul.attList li:before {
left: 0;
}

#content #attArea .attAreaInner ul{
display: block;
margin: 0 auto;
width: auto;
}
#content #attArea .setList .setSP::before{
background: url("img/odoroki.webp") 0 0 / 78px 72px;
width: 78px;
height: 72px;
top: -47px;
left: 0;
}
#content #attArea .setList .setSP::after{
background: url("img/icon_2.webp") 0 0 / 53px 82px;
width: 53px;
height: 82px;
bottom: 13px;
right: 12px;
}
#content #attArea .setList .setPC::after{
background: url("img/icon_3.webp") 0 0 / 87px 74px;
width: 87px;
height: 74px;
bottom: 13px;
right: 12px;
}
#content #attArea .setList > li {
border-radius: 20px;
padding: 15px 14px;
margin: 0 auto;
width: auto;	
}
#content #attArea .setList > li + li{
margin-left: 0;
margin-top: 19px;
}
}

/* -----------------------------
bg ponpon
------------------------------*/
#content .contentInner .ponpon{
position: fixed;
padding: 0;
margin: 0;
top: -100px;
left: 150px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
z-index: 6;
}
#content .contentInner .ponpon li{
position: absolute;
top: -100px;
}
#content .contentInner .ponpon li:nth-child(1){
  left: 80vw;
  animation: fall2 10s linear 2s infinite,
             rotate1 25s ease-in-out 0s infinite alternate;
}
#content .contentInner .ponpon li:nth-child(2){
  left: -20vw;
  animation: fall3 17s linear 0s infinite, 
             rotate1 10s ease-in-out 5s infinite alternate; 
}
#content .contentInner .ponpon li:nth-child(3){
  left: 10vw;
  animation: fall 10s linear 2s infinite,
             rotate1 2s ease-in-out 2s infinite alternate;
}
#content .contentInner .ponpon li:nth-child(4){
  left: 10vw;
  animation: fall3 12s linear 3s infinite,
             rotate1 3s ease-in-out 1s infinite alternate;
}
#content .contentInner .ponpon li:nth-child(5){
  left: 60vw;
  animation: fall2 18s linear 5s infinite,
             rotate1 3s ease-in-out 3s infinite alternate;
}
#content .contentInner .ponpon li:nth-child(6){
  left: 70vw;
  animation: fall 12s linear 4s infinite,
             rotate1 1s ease-in-out 0s infinite alternate;
}



/*keyframes------------------*/
@keyframes fall {
   0%   { transform: translateY(-40px) translateX(0px) rotate(-10deg); opacity:1; }
  15%  { transform: translateY(35vh) translateX(-80px) rotate(70deg); }
  50%  { transform: translateY(75vh) translateX(40px) rotate(-20deg); }
  100% { transform: translateY(150vh) translateX(-40px) rotate(5deg); }
}

@keyframes fall2 {
   0%   { transform: translateY(-40px) translateX(0px) rotate(-10deg); opacity:1; }
  40%  { transform: translateY(35vh) translateX(-100px) rotate(90deg); }
  70%  { transform: translateY(80vh) translateX(-40px) rotate(-90deg); }
  100% { transform: translateY(150vh) translateX(60px) rotate(5deg); }
}

@keyframes fall3 {
   0%   { transform: translateY(-40px) translateX(0px) rotate(-10deg); opacity:1; }
  20%  { transform: translateY(50vh) translateX(100px) rotate(90deg); }
  40%  { transform: translateY(70vh) translateX(60px) rotate(-20deg); }
  80%  { transform: translateY(120vh) translateX(60px) rotate(60deg); }
  100% { transform: translateY(150vh) translateX(60px) rotate(5deg); }
}
@keyframes fallSP {
  0%   { transform: translateY(-40px) translateX(0px) rotate(-10deg); opacity:1; }
  20%  { transform: translateY(60vh) translateX(80px) rotate(100deg); }
  50%  { transform: translateY(100vh) translateX(50px) rotate(-20deg); }
  100% { transform: translateY(150vh) translateX(0px) rotate(5deg); }
}

@keyframes fallSP2 {
  0%   { transform: translateY(-40px) translateX(0px) rotate(-5deg); opacity:1; }
  40%  { transform: translateY(50vh) translateX(40px) rotate(70deg); }
  60%  { transform: translateY(90vh) translateX(-30px) rotate(-10deg); }
  100% { transform: translateY(150vh) translateX(0px) rotate(5deg); }
}

@keyframes fallSP3 {
  0%   { transform: translateY(-40px) translateX(0px) rotate(-10deg); opacity:1; }
  40%  { transform: translateY(40vh) translateX(-100px) rotate(90deg); }
  70%  { transform: translateY(100vh) translateX(-40px) rotate(-90deg); }
  100% { transform: translateY(150vh) translateX(60px) rotate(5deg); }
}

@media screen and (max-width: 640px) {
	#content .contentInner .ponpon li img {
width: 100%;
height: auto;
display: block;
}	
#content .contentInner .ponpon li:nth-child(1){
    width: 80px;
    left: -20vw;
    animation: fallSP3 20s linear 0s infinite,
               rotate1 30s ease-in-out 0s infinite alternate;
  }
  #content .contentInner .ponpon li:nth-child(2){
    width: 60px;
    left: -40vw;
    animation: fallSP2 16s linear 0s infinite,
               rotate1 10s ease-in-out 0s infinite alternate;
  }
  #content .contentInner .ponpon li:nth-child(3){
    width: 35px;
    left: 10vw;
    animation: fallSP 14s linear 0s infinite,
               rotate1 2s ease-in-out 0s infinite alternate;
  }
  #content .contentInner .ponpon li:nth-child(4){
    width: 80px;
    left: 40vw;
    animation: fallSP2 15s linear 3s infinite,
               rotate1 3s ease-in-out 0s infinite alternate;
  }
  
  #content .contentInner .ponpon li:nth-child(5){
    width: 60px;
    left: 60vw;
    animation: fallSP 18s linear 5s infinite,
               rotate1 3s ease-in-out 0s infinite alternate;
  }
  #content .contentInner .ponpon li:nth-child(6){
		width: 35px;
		left: -10vw;
		animation: fallSP3 18s linear 4s infinite,
				   rotate1 1s ease-in-out 0s infinite alternate;
	  } 
}

/* -----------------------------
campaign
------------------------------*/
#content #campaign {
background-color: #fadce2;
padding: 100px 0;
position: relative;
}
#content #campaign h2{
margin-bottom: 30px;
}
#content #campaign .campaignBox{
position: relative;
z-index: 7;
width: 1100px;
margin: 0 auto;
}
#content #campaign .linkInner {
position: relative;
margin: 0 auto;
} 
#content #campaign .panda {
  position: absolute;
  right: 130px;
  top: 10px;
  padding-top: 50px;
}
#content #campaign ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
}
#content #campaign ul li {
  width: 49%;
}
#content #campaign ul li:nth-child(2n) {
  margin-left: 2%;
}
@media screen and (min-width: 641px) {
#content #campaign .linkInner::after {
content: "";
position: absolute;
background: url("img/ouen.webp") 0 0 / 198px 202px;
width: 198px;
height: 202px;
bottom: 283px;
right: 100px;
}
#content #campaign .linkList a:hover {
opacity: .7;
}
} 
#content #campaign .linkList a {
display: block;
text-align: center;
box-shadow: 3.536px 3.536px 12px 0px #f2d9df;
}
#content #campaign .linkList img {
width: 100%;
height: auto;
}
@media screen and (max-width: 640px) {
#content #campaign {
padding-top: 30px;
padding-bottom: 0px;
}
#content #campaign .campaignBox{
width: auto;
margin: 0 auto;
}
#content #campaign h2{
margin-bottom: 0;
}
#content #campaign h2 img {
    width: auto;
    height: 42px;
}
#content #campaign .linkInner {
width: 100%;
}
#content #campaign .linkList {
  padding: 16px 30px 40px;
  display: block;
}
#content #campaign .linkList li{
width: auto;
margin-bottom: 20px;
}
#content #campaign .linkList li + li{
margin: 0;
}
#content #campaign .campaignBox h2::after {
content: "";
position: absolute;
background: url("img/ouen.webp") 0 0 / 82px 85px;
width: 82px;
height: 85px;
top: 10px;
right: 3%;
}
}