@charset "UTF-8";

#content {
min-width: inherit;
color: #333333;
font-size: 16px;
background-color: #00b9e7;
overflow-x: hidden;
}
#content .campaignInner {
max-width: 1090px;
margin: 0 auto;
padding: 0;
}
#content .dsp {
display: none;
}
#content .dpc {
display: block;
}
#content .topicPath {
margin-bottom: 0;
}
#content main h2{
text-align: center;
position: relative;
}
#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;
}
#content main img {
height: auto;
}
#present .btn01 a:hover {
	text-decoration: none;
}
@media screen and (max-width: 640px) {
#content .campaignInner {
margin: 0 28px;
}
#content .dpc {
display: none;
}
#content .dsp {
display: block;
}
}
/* -----------------------------
mainvisual
------------------------------*/

#content #mainvisual {
	position: relative;
}
#content #mainvisual .mv_bg img {
	position: relative;
	top: -120px;
	left: calc(50% - 960px);
	height: auto;
	width: 1920px;
}
#content #mainvisual h1{
	position: absolute;
	transform: translateX(50%);
	top: -20px;
	right: calc(50% - 200px);
}
#content #mainvisual .content{
	display: flex;
	justify-content: center;
}
#content #mainvisual .panda{
	position: absolute;
	transform: translateX(50%);
	top: 50px;
	left: calc(50% - 800px);
}
#content #mainvisual .date {
	background-color: #e62e8b;
	padding: 17px 0;
	width: 100%;
	text-align: center;
	margin-top: -120px;
}
@media screen and (max-width: 640px) {
#content #mainvisual .mv_bg img {
	top: -60px;
	left: calc(50% - 300px);
	width: 640px;
}
#content #mainvisual h1{
	top: -70px;
	right: 50%;
}
#content #mainvisual .panda{
	top: 180px;
	left: calc(50% - 250px);
}
#content #mainvisual .panda img {
	width: 256px;
	height: auto;
}
#content #mainvisual .date {
	padding: 10px 0;
	margin-top: -60px;
}
#content #mainvisual .date img {
	width: 180px;
	height: auto;
}
#content #mainvisual .content{
	display: block;
	margin: auto;
}
}
@media screen and (max-width: 640px) {
}
/* -----------------------------
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: #009ecb;
  font-weight: bold;
  background: #FFF;
  border-radius: 9999px;
  box-shadow: 0px 5px 0px 0px rgba(26, 160, 198, 0.9);
}
@media screen and (min-width: 641px) {
#content #present ul li .btn01{
width: 250px;
margin: 20px auto 0;
}
#present .btn01 a:hover {
  box-shadow: none;
  transform: translateY(3px);
  opacity: 0.8;
}
#content #present ul li .btn01 a{
	transition: 0.2s ease-in-out;
	position: relative;
	padding-right: 50px;
}
}
#content #present ul li .btn01 a::after{
	content: "";
	background: url("img/icon_01.png") top center /  22px 18px;
	position: absolute;
	width: 22px;
	height: 18px;
	top: 12px;
	right: 54px;
}

@media screen and (max-width: 640px) {
#content #present ul li .btn01 {
width: 34vw;
margin: 17px auto 0;
}
#present .btn01 a {
  padding: 5px 14px 5px 0;
  font-size: 13px;
  box-shadow: 0px 4px 0px 0px rgba(26, 160, 198, 0.9);
}
#content #present ul li .btn01 a::after{
	background: url("img/icon_01.png") top center /  12px 10px;
	width: 12px;
	height: 10px;
	top: 10px;
	right: 16px;
}

}
/* -----------------------------
content_inner
------------------------------*/
#content .content_inner {
background-color: #00C2FA;
position: relative;
}

/* -----------------------------
present
------------------------------*/
#content #present {
position: relative;
padding-top: 90px;
text-align: center;
z-index: 10;
}
#content #present h2 {
margin-bottom: 40px;
}
#content .column01 {
width: 1050px;
margin: 0 auto 110px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#content .column01 li{
position: relative;
width: 250px;
}
#content .column02 {
width: 1050px;
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 .column01 li{
height: 517px;  
}
#content .column02 li{
height: 340px;
}
}

@media screen and (max-width: 640px) {
#content #present {
padding-top: 80px;
}
#content #present h2 {
margin-bottom: 17px;
}
#content .column01 {
width: 85vw;
margin: 0 auto 56px;
  justify-content: space-between;
}
#content .column01 li{
position: relative;
width: 39.7vw;
}
#content .column02 {
width: 85vw;
display: block;
margin: 0 auto;
}
#content .column02 li{
width: 85vw;
}
}

/*panda　animation--------------------*/
#content .column01 li:nth-child(1) {
position: relative;
}
#content .column01 li:nth-child(1)::before {
content: "";
background: url("img/ukiwa_panda.webp") top center / 161px 161px;
position: absolute;
width: 161px;
height: 161px;
top: -8px;
left: -147px;
z-index: -5;
animation: floating-01 1.8s ease-in-out infinite alternate-reverse;
}
#content .column02 li:nth-child(2) {
position: relative;
}
#content .column02 li:nth-child(2)::before {
content: "";
background: url("img/ball_panda.webp") top center / 163px 164px;
position: absolute;
width: 163px;
height: 164px;
top: -70px;
right: -96px;
z-index: -5;
animation: floating-02 1.8s ease-in-out infinite alternate-reverse;
}
#content #attArea h2 {
position: relative;
}
#content #attArea h2::before {
content: "";
background: url("img/uchiwa_panda.webp") top center / 208px 208px;
position: absolute;
width: 208px;
height: 208px;
top: -117px;
left: calc(50% - 550px);
z-index: -5;
}
#content .linkList li {
position: relative;
}
#content .linkList li::after {
content: "";
background: url("img/beam_panda.webp") top center / 425px 425px;
position: absolute;
width: 425px;
height: 425px;
top: 9px;
right: -350px;
z-index: -5;
}
@media screen and (max-width: 640px) {
	#content .column01 li:nth-child(1)::before {
	background: url("img/ukiwa_panda.webp") top center / 56px 56px;
	width: 56px;
	height: 56px;
	top: -25px;
	left: -20px;
	}
	#content .column02 li:nth-child(2)::before {
	background: url("img/ball_panda.webp") top center / 57px 57px;
	width: 57px;
	height: 57px;
	top: -26px;
	right: -15px;
	}
	#content .campaignInner .column02 li:nth-child(5){
	position: relative;
	}
	#content .campaignInner .column02 li:nth-child(5)::before {
	content: "";
	position: absolute;
	background: url("img/uchiwa_panda.webp") top center / 74px 74px;
	width: 74px;
	height: 74px;
	top: -76px;
	left: 12px;
	}
	#content .linkList li::after {
	background: url("img/beam_panda.webp") top center / 144px 144px;
	width: 144px;
	height: 144px;
	top: -177px;
	right: -79px;
	}
}

/*text_animation　--------------------*/

#content .text_animation01 {
position: absolute;
animation: slide 10s linear infinite;
top: 0.5%; 
z-index: 5;
}
#content .text_animation02 {
position: absolute;
animation: slide 17s linear infinite;
animation-delay: -3s;
top: 15%; 
z-index: 5;
}
#content .text_animation03 {
position: absolute;
animation: slide 13s linear infinite;
animation-delay: -5s;
top: 39%; 
z-index: 5;
}
#content .text_animation04 {
position: absolute;
animation: slide 17s linear infinite;
animation-delay: 0s;
top: 55.5%; 
z-index: 5;
}
#content .text_animation05 {
position: absolute;
animation: slide 12s linear infinite;
animation-delay: 0s;
top: 72%; 
z-index: 5;
}
#content .text_animation06 {
position: absolute;
animation: slide 14s linear infinite;
animation-delay: 0s;
top: 87%; 
z-index: 5;
}

@media screen and (max-width: 640px) {
#content .text_animation01 {
animation: slide 5s linear infinite;
top: 0.5%; 
}
#content .text_animation02 {
animation: slide 10s linear infinite;
animation-delay: -1s;
top: 18%; 
}
#content .text_animation03 {
animation: slide 6s linear infinite;
animation-delay: -5s;
top: 41%; 
}
#content .text_animation04 {
animation: slide 10s linear infinite;
top: 60.5%; 
}
#content .text_animation05 {
animation: slide 8s linear infinite;
animation-delay: -5s;
top: 67.5%; 
}
#content .text_animation06 {
animation: slide 14s linear infinite;
animation-delay: 0s;
top: 91%; 
}
	#content .text_animation01 img {
	width: 100px;
	height: auto;
	}
	#content .text_animation02 img {
	width: 150px;
	height: auto;
	}
	#content .text_animation03 img {
	width: 100px;
	height: auto;
	}
	#content .text_animation04 img {
	width: 130px;
	height: auto;
	}
	#content .text_animation05 img {
	width: 100px;
	height: auto;
	}
	#content .text_animation06 img {
	width: 150px;
	height: auto;
	}
}
/*keyframes　--------------------*/
@keyframes floating-01 {
  0% {
    transform: rotate(0deg) translateY(-65%);
  }
  100% {
    transform: rotate(10deg) translateY(-65%);
  }
}
@keyframes floating-02 {
  0% {
    transform: rotate(0deg) translateY(-65%);
  }
  100% {
    transform: rotate(-10deg) translateY(-65%);
  }
}
@keyframes slide  {
  0% {
  transform: translateX(-100px);
  }

  100% {
  transform: translateX(100vw);
  }
  }

/*ukiwa　--------------------*/
@media screen and (min-width: 641px) {
#content .column01 li:nth-child(3) {
position: relative;
}
#content .column01 li:nth-child(3)::before {
content: "";
background: url("img/ukiwa.webp") top center / 264px 264px;
position: absolute;
width: 264px;
height: 264px;
top: -130px;
left: 110px;
z-index: -5;
}
#content .column01 li:nth-child(4) {
position: relative;
}
#content .column01 li:nth-child(4)::before {
content: "";
background: url("img/ukiwa.webp") top center / 501px 500px;
position: absolute;
width: 501px;
height: 500px;
top: -10px;
left: -440px;
z-index: -5;
}
#content .campaignInner h2.pc{
position: relative;
}
#content .campaignInner h2.pc::after {
content: "";
background: url("img/ukiwa.webp") top center / 200px 200px;
position: absolute;
width: 200px;
height: 200px;
top: -20px;
right: 140px;
z-index: -5;
}
#content .column02 li:nth-child(4) {
position: relative;
}
#content .column02 li:nth-child(4)::after {
content: "";
background: url("img/ukiwa.webp") top center / 438px 438px;
position: absolute;
width: 438px;
height: 438px;
top: 100px;
right: -370px;
z-index: -5;
}
#content .decoration02 div dl:nth-child(1) {
position: relative;
}
#content .decoration02 div dl:nth-child(1)::before {
content: "";
background: url("img/ukiwa.webp") top center / 356px 356px;
position: absolute;
width: 356px;
height: 356px;
top: 130px;
left: -230px;
z-index: -5;
}
#content .linkInner h2 {
position: relative;
}
#content .linkInner h2::before {
content: "";
background: url("img/ukiwa.webp") top center / 235px 235px;
position: absolute;
width: 235px;
height: 235px;
top: -200px;
right: calc(50% - 730px);
z-index: -5;
}
#content .linkList li {
position: relative;
}
#content .linkList li::before {
content: "";
background: url("img/ukiwa.webp") top center / 460px 460px;
position: absolute;
width: 460px;
height: 460px;
top: 70px;
left: calc(50% - 1010px);
z-index: -5;
}
}
@media screen and (max-width: 640px) {
	#content .column01 li:nth-child(2) {
	position: relative;
	}
	#content .column01 li:nth-child(2)::after {
	content: "";
	position: absolute;
	z-index: -5;
	background: url("img/ukiwa.webp") top center / 161px 161px;
	width: 161px;
	height: 161px;
	top: -10px;
	left: calc(50% - 20px);
	}
	#content .column01 li:nth-child(6) {
	position: relative;
	}
	#content .column01 li:nth-child(6)::after {
	content: "";
	position: absolute;
	z-index: -5;
	background: url("img/ukiwa.webp") top center / 211px 211px;
	width: 211px;
	height: 211px;
	top: -50px;
	right: calc(50% + 120%);
	}
	#content .column02 li:nth-child(1) {
	position: relative;
	}
	#content .column02 li:nth-child(1)::after {
	content: "";
	position: absolute;
	z-index: -5;
	background: url("img/ukiwa.webp") top center / 250px 250px;
	width: 250px;
	height: 250px;
	top: -100px;
	right: -170px;
	}
	#content .column02 li:nth-child(3) {
	position: relative;
	}
	#content .column02 li:nth-child(3)::before {
	content: "";
	position: absolute;
	z-index: -5;
	background: url("img/ukiwa.webp") top center / 100px 100px;
	width: 100px;
	height: 100px;
	top: -40px;
	left: -50px;
	}
	#content .column02 li:nth-child(5) {
	position: relative;
	}
	#content .column02 li:nth-child(5)::after {
	content: "";
	position: absolute;
	z-index: -5;
	background: url("img/ukiwa.webp") top center / 100px 100px;
	width: 100px;
	height: 100px;
	top: -40px;
	right: -55px;
	}
	#content .column02 li:nth-child(6) {
	position: relative;
	}
	#content .column02 li:nth-child(6)::before {
	content: "";
	position: absolute;
	z-index: -5;
	background: url("img/ukiwa.webp") top center / 200px 200px;
	width: 200px;
	height: 200px;
	top: 80px;
	left: -110px;
	}
	#content .linkInner h2::before {
	content: "";
	position: absolute;
	z-index: -5;
	background: url("img/ukiwa.webp") top center / 120px 120px;
	width: 120px;
	height: 120px;
	top: -123px;
	left: -36px;
	}
}


@media screen and (min-width: 641px) {
#content #present ul.sp li img {
max-width: 250px;
width: 100%;
}
#content .column01 li + li{
margin-left: 130px;
}
#content .column02 li + li{
margin-left: 60px;
}
#content .column01 li:nth-of-type(3n+1),#content .column02 li:nth-of-type(2n+1){
margin-left: 0;
}
#content .column01 li:nth-of-type(n+4),#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%;
  }
#content #present ul.pc li + li {
margin-top: 45px;
  }
}

/* -----------------------------
attArea
------------------------------*/
#content #attArea {
position: relative;
padding-top: 110px;
padding-bottom: 96px;
color: #009ecb;
z-index: 10;
}
#content #attArea .inner{
  margin: 0 auto;
  padding: 0;
}
#content #attArea .inner > div{
  width: 1000px;
  display: flex;
	margin: auto;
	margin-top: 40px;
}
#content #attArea .inner > div dl + dl{
margin-left: 40px;
}
#content #attArea h3 {
margin-bottom: 14px;
font-size: 26px;
text-align: center;
font-weight: bold;
}
@media screen and (min-width: 641px) {
#content #attArea dl {
background-color: #fff;
padding: 24px 30px 30px;
border: 2px solid #00bae9;
border-radius: 20px;
word-break: break-all;
font-size: 16px;
width: 480px;
}
}
#content #attArea dl div + div{
margin-top: 10px;
}
#content #attArea dl dt {
font-weight: bold;
position: relative;
padding-left: 19px;
font-size: 16px;
margin-bottom: 6px;
}
#content #attArea dl dt::before {
content: "●";
position: absolute;
font-size: 24px;
left: -5px;
top: -6px;
}
#content #attArea .decoration01 dd{
position: relative;
}
#content #attArea .decoration01 dd::after {
content: "";
position: absolute;
background: url("img/icon_03.webp") no-repeat top center/ 105px 165px;
width: 105px;
height: 165px;
bottom: 0;
right: 0;
}
#content #attArea .decoration03 dd{
position: relative;
}
#content #attArea .decoration03 dd::after {
content: "";
position: absolute;
background: url("img/icon_02.webp") no-repeat top center/ 173px 147px;
width: 173px;
height: 147px;
bottom: -17px;
right: 0;
}

#content #attArea ul.attList {
margin-top: 28px;
padding-left: 40px;
}
#content #attArea ul.attList li {
position: relative;
padding-left: 1.2em;
color: #fff;
text-align: center;

}
#content #attArea ul.attList li:before {
content: "※";
position: absolute;
top: 0;
left: calc(50% - 296px);
}
#content #attArea ol {
counter-reset: number 0;
}
#content #attArea ol li {
position: relative;
padding-left: 1.2em;
line-height: 1.4;
font-size: 14px;
}
#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: 45px 16px 65px;
}
#content #attArea h2 img{
width: auto;
height: 30px;
}
#content #attArea h3{
margin-bottom: 3px;
font-size: 18px;
}
#content #attArea .inner {
width: 100%;
}
#content #attArea .inner > div{
  width: 345px;
  display: block;
	margin-top: 20px;
}
#content #attArea dl {
padding: 15px 13px 20px;
font-size: 16px;
background-color: #fff;
border: 2px solid #00bae9;
border-radius: 10px;
word-break: break-all;
}
#content #attArea .inner > div dl + dl{
margin-left: 0px;
margin-top: 20px;
}
#content #attArea ul.attList {
margin-top: 14px;
padding: 0 20px;
font-size: 12px;
}
#content #attArea .decoration01 dd::after {
background: url("img/icon_03.webp") no-repeat top center/ 53px 82px;
width: 53px;
height: 82px;
bottom: 0;
right: 0;
}
#content #attArea .decoration03 dd::after {
content: "";
position: absolute;
background: url("img/icon_02.webp") no-repeat top center/ 87px 74px;
width: 87px;
height: 74px;
bottom: 0px;
right: 0;
}
#content #attArea ul.attList li {
text-align: left;
}
#content #attArea ul.attList li:before {
top: 0;
left: 0;
}
}
#content #attArea .decoration02{
position: relative;
}
#content #attArea .decoration02::before {
position: absolute;
content: "";
}
@media screen and (min-width: 641px) {
}
@media screen and (max-width: 640px) {
#content #attArea .decoration02::before{
background-size: 71px 86px;
top: -120px;
right: -12px;
width: 71px;
height: 86px;
}
}
/* -----------------------------
campaign
------------------------------*/
#content #campaign {
background-color: #28cdfd;
width: 100%;
padding: 100px 0 160px;
position: relative;
} 
#content #campaign .linkInner {
position: relative;
z-index: 10;
} 
#content #campaign .linkList {
padding-top: 40px;
width: 820px;
margin: auto;
}
#content #campaign .linkList li + li{
margin-top: 40px;
}
#content #campaign .linkList a {
display: block;
text-align: center;
box-shadow: 3.536px 3.536px 12px 0px rgb(0 185 231 / 80%);
}
@media screen and (min-width: 641px) {
#content #campaign .linkList a:hover {
opacity: 0.7;
}
}
#content #campaign .linkList img {
width: 100%;
}
@media screen and (max-width: 640px) {
#content #campaign {
padding: 60px 0;
}
#content #campaign h2 img {
width: auto;
height: 26px;
}
#content #campaign .linkInner {
width: 100%;
}
#content #campaign .linkList {
width: 323px;
padding: 20px 30px 0;
}
#content #campaign .linkList li + li{
margin-top: 16px;
}
}