@charset "UTF-8";
 html{padding-right: 0!important;} section{position: relative;z-index: 3; letter-spacing: 0.4px;}
a:hover {cursor: pointer;}
video {width: 100%;}
.imgsp, .br420, .br1100, .br900{display: none;} .myfont {font-family: "Bubblegum Sans", sans-serif;}
.zenmaru{font-family: "Zen Maru Gothic", serif;}
.f45 {font-size: 2.8rem;}
.f32 {font-size: 2rem;font-family: "Mochiy Pop One", sans-serif;line-height: 2.8rem;}
.f24, .bg-pink-inner{font-size: 1.5rem;}
.f20 {font-size: 1.25rem;}
.bg-pink-inner span, .f16{font-size: 1rem;}
.cha-modal > p {font-family: "Mochiy Pop One", sans-serif;font-size: 1.2rem;line-height: 1.5rem;} main{padding-top: 6rem;}
h2 {z-index: 2; position: absolute; top: 29rem; left: 50%; transform: translateX(-50%);padding: 0;} .bg-pink-inner{background: #FF75A6; position: relative;height: 2200px;font-family: "Bubblegum Sans", sans-serif; }
.bg-pink-inner::after{position: absolute; content: ''; display: inline-block; width: 100%; height: 400px; background-image: url(//garten-of-banban.com/wp-content/themes/GoB/img/pink-bottom.png); background-size: contain; vertical-align: middle; bottom: -19rem; background-repeat: no-repeat; z-index: -1; background-position: bottom;}
.backbtn{margin-top: 14rem;padding-bottom: 10rem;}
.cloud01 {position: relative; top: 2%; left: 4%;max-width: 457px;}
.cloud02 {position: absolute; top: 2%; right: 3%; max-width: 610px;}
.cloud03 {position: absolute; top: 38%; left: 1%; max-width: 716px;}
.cloud04 {position: absolute; bottom: 20%; right: 5%; max-width: 610px;}
.cha-01 {position: absolute; left: 3%; top: 10%; max-width: 300px;}
.cha-02 {position: absolute; left: 30%; top:2%; max-width: 290px;}
.cha-03{position: absolute;right: 27%; top:5%;  max-width: 246px; }
.cha-04{position: absolute;right: 5%; top: 8%; max-width: 312px;}
.cha-05{position: absolute;top: 29%; left: 12%; max-width: 320px;}
.cha-06{position:absolute; top: 31%; left: 44%; max-width: 295px;}
.cha-07{position:absolute; top: 28%; right: 10%; max-width: 330px;}
.cha-08{position:absolute; top: 49%; left: 10%; max-width: 275px;}
.cha-09{position:absolute; top: 53%; left: 40%; max-width: 290px;}
.cha-10{position:absolute; top: 52%; right: 9%; max-width: 264px;}
.cha-11{position:absolute; bottom: 17%; left: 10%; max-width: 376px;}
.cha-12{position:absolute; bottom: 15%; right: 17%; max-width: 560px;}
.cha-13{position:absolute; bottom: 1%; left: 29%; max-width: 363px;}
.cha-14{position:absolute; bottom: -1%; right: 8%; max-width: 352px;}
.cha-02 img {transform: rotate(20deg);}
.fuwafuwa img{-webkit-animation:fuwafuwa 3s infinite linear alternate;
animation:fuwafuwa 4s infinite linear alternate;}
.fuwafuwa2 img{-webkit-animation:fuwafuwa2 5s infinite linear alternate;
animation:fuwafuwa 5s infinite linear alternate;}
@-webkit-keyframes fuwafuwa {
0% {-webkit-transform:translate(0, 0) rotate(0deg);}
50% {-webkit-transform:translate(0, -15px) rotate(5deg);}
100% {-webkit-transform:translate(0, 0)rotate(3deg);}
}
@keyframes fuwafuwa {
0% {transform:translate(0, 0) rotate(0deg);}
50% {transform:translate(0, -15px) rotate(5deg);}
100% {transform:translate(0, 0)rotate(3deg);}
}
@-webkit-keyframes fuwafuwa2 {
0% {-webkit-transform:translate(0, 0) rotate(0deg);}
50% {-webkit-transform:translate(-3px, -10px) rotate(-10deg);}
100% {-webkit-transform:translate(0, 0)rotate(0deg);}
}
@keyframes fuwafuwa2 {
0% {transform:translate(0, 0) rotate(0deg);}
50% {transform:translate(-3px, -10px) rotate(-10deg);}
100% {transform:translate(0, 0)rotate(0deg);}
}
.cha-01 p {text-align: center; position: absolute; left: 40%; padding-bottom: 3rem; top: 0%;}
.cha-02 p {text-align: center; position: absolute;top: 20%; left: 0;}
.cha-03 p {text-align: center; position: absolute;top: 6%; left: 25%;}
.cha-04 p {text-align: center; position: absolute; right: 0; top: -15%;}
.cha-05 p {text-align: center; position: absolute; right: -27%;top: 30%;}
.cha-06 p {text-align: center; position: absolute;top: 45%; left: -25%;}
.cha-07 p {text-align: center; position: absolute;top: 20%; right: 5%;}
.cha-08 p {text-align: center; position: absolute;top: 15%; right: -20%;}
.cha-09 p {text-align: center; position: absolute;top: -5%; right: -20%;}
.cha-10 p {text-align: center; position: absolute;top: -3%; right: 5%;}
.cha-11 p {text-align: center; position: absolute;top: -3%; right: -13%;}
.cha-12 p {text-align: center; position: absolute;top: 12%; left: 45%;}
.cha-13 p {text-align: center; position: absolute;top: 70%; right: 0%;}
.cha-14 p {text-align: center; position: absolute;top: 30%; left: -11%;}
.detail-r span {margin-left: 1rem;font-weight: bold;}
.cha-flx {display: flex;flex-wrap: wrap;justify-content: space-between;}
.cha-flx div {width: calc(98%/2); margin: 0.3rem 0.2rem;align-self: center;}
.cha-flx div img{border: 8px solid #fff;filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, .29));height: 237px;object-fit: cover;} .modalInner-item {position: relative; margin-bottom: 3rem; }
.modalInner-item .detail-r{width: 56%;  margin-left: auto;}
.modalInner-item .detail-r dl{padding: 1rem 0;}
.modalInner-item p{color: #4F5DD4;margin-bottom: 1.5rem;}
.modalInner-item dt, .modalInner-item p {text-align: center;}
.modalInner-item dd {line-height: 1.8rem;}
.modalInner-item dt {margin-bottom: 0.5rem;line-height: 2rem;} .imgpc{width: 100%;max-width: 200px;position: absolute;  top: -4rem;left: 2rem; text-align: -webkit-center;z-index: 1;}
.modal01 .imgpc, .modal03 .imgpc, .modal14 .imgpc{top: -3rem;left: 3rem;}
.modal02 .imgpc {top: -5rem;}
.modal05 .imgpc{top: -7rem;}
.modal06 .imgpc {max-width: 270px;top: -4rem;}
.modal04 .imgpc,.modal13 .imgpc, .modal07 .imgpc{max-width: 270px;top: -3rem;}
.modal08 .imgpc{max-width: 230px;}
.modal08 .imgpc, .modal09 .imgpc{top: -2rem;}
.modal10 .imgpc{top: 0;}
.modal11 .imgpc {max-width: 320px;top: 0;left: 0;}
.modal12 .imgpc {max-width: 350px;top: 0;left: -2rem;}
@media screen and (max-width: 1540px){
.bg-pink-inner::after{bottom: -16rem;}
}
@media screen and (max-width: 1400px){
.cha-01 {max-width: 255px;}
.cha-02 {max-width: 252px;}
.cha-03{max-width: 196px; }
.cha-04{max-width: 249px;}
.cha-05{max-width: 208px;}
.cha-06{max-width: 236px;}
.cha-07{max-width: 288px;}
.cha-08{max-width: 220px;}
.cha-09{max-width: 232px;}
.cha-10{max-width: 211px;}
.cha-11{max-width: 300px;}
.cha-12{max-width: 448px;}
.cha-13{max-width: 290px;}
.cha-14{max-width: 281px;}
.cha-03 p {left: 0; top: 0;}
.cha-04 p {top: -23%;}
.cha-05 p {right: -45%;}
.cha-08 p {right: -37%;}
.cha-09 p {top: -12%; right: -20%;}
.cha-11 p {top: -8%; right: -25%;}
.cha-12 p {top: 7%; left: 41%;}
.cha-13 p {top: 70%; right: -10%;}
.cha-14 p {left: -21%;}
}
@media screen and (max-width: 1230px){
.bg-pink-inner::after{bottom: -14rem;}
.cha-07 {right: 5%;}
.cha-12 {right: 10%;}
.cha-13 {left: 26%;}
.cha-10 {top: 49%;}
}
@media screen and (max-width: 1100px){
.swiper-button-next, .swiper-button-prev{top: 41%!important;}
.br1100{display: block;}
}
@media screen and (max-width: 1080px){
.bg-pink-inner::after{bottom: -11rem;}
.cha-flx div img{height: auto;}
}
@media screen and (max-width: 1000px){
.bg-pink-inner {height: 2500px;}
h2 {top: 24rem;}
.cha-01 { left: 4%; top: 28%; max-width: 255px;}
.cha-02 { left: 4%; top:6%; max-width: 252px;}
.cha-03{left: 50%; transform: translateX(-50%); top: 0%;  max-width: 196px; }
.cha-04{right: 5%; top: 5%; max-width: 249px;}
.cha-05{top: 23%; right: 7%; left: inherit; max-width: 208px;}
.cha-06{ top: 24%; left: 41%; max-width: 236px;}
.cha-07{ top: 43%; left: 5%; max-width: 288px;}
.cha-08{ bottom: 28%; left: 20%; top: inherit;max-width: 220px;}
.cha-09{ top: 40%;right: 18%; left: inherit; max-width: 232px;}
.cha-10{ bottom: 33%; right: 10%;top: inherit;max-width: 211px;}
.cha-11{ bottom: 15%; left: 10%; max-width: 300px;}
.cha-12{ bottom: 16%; right: 7%; max-width: 448px;}
.cha-13{ bottom: 0%; left: 10%; max-width: 290px;}
.cha-14{ bottom: 0%; right: 8%; max-width: 281px;}
.cha-01 p {left: 20%;}
.cha-03 p { left: 12%; top: 90%;}
.cha-05 p { top: 100%;right: inherit;}
.cha-06 p{top: 100%; left: 34%;}
.cha-11 p {top: 100%;right: 50%;}
.cha-08 p {	top: 66%; right: -45%;}
.cha-09 p { right: -40%; top: 63%;}
.cha-13 p {top: 70%;}
.cloud01 {top: 35%;}
.cloud03 {top: inherit; bottom: 10%;}
.cloud04 {bottom: 35%;}
.modal04 .imgpc, .modal07 .imgpc{left: 0;}
.modal12 .imgpc {left: -3.5rem;}
}
@media screen and (max-width: 950px){
.btn-area{width: 100%;}
.backbtn {margin-top: 9rem;padding-bottom: 4rem;}
.cha-flx div {width: calc(97%/2);}
main{padding-top: 3rem;}
}
@media screen and (max-width: 900px){
.imgsp {display: block; max-width: 280px;  margin: 0 auto;}
.imgpc {display: none;}
.bg-pink-inner {height: 2200px;}
.bg-pink-inner::after {bottom: -8rem;}
.modalInner-item .detail-r {width: 100%;}
.br900{display: block;}
h2 {top: 21rem;}
.cha-01 img{max-width: 204px;}
.cha-02 img{max-width: 201px;}
.cha-03 img{max-width: 180px;}
.cha-04 img{max-width: 199px;}
.cha-05 img{max-width: 200px;}
.cha-06 img{max-width: 188px;}
.cha-07 img{max-width:230px; }
.cha-08 img{max-width: 190px;}
.cha-09 img{max-width: 185px;}
.cha-10 img{max-width: 168px;}
.cha-11 img{max-width: 250px;}
.cha-12 img{max-width: 358px;}
.cha-13 img{max-width: 232px;}
.cha-14 img{max-width: 224px;}
.cha-01 {top: 30%;}
.cha-02 {left: 7%;}
.cha-03 {top: 1%;}
.cha-04 {top: 6%;}
.cha-06 {top: 27%;}
.cha-07 {top: 43%;}
.cha-08 {bottom: 33%;}
.cha-09 {top: 40%;}
.cha-10 {bottom: 35%;}
.cha-11 {bottom: 22%;}
.cha-12 {bottom: 20%;}
.cha-13 {bottom: 6%;}
.cha-14 {bottom: 7%;}
.cha-01 p {top: -15%;}
.cha-02 p {left: -12%;}
.cha-07 p{top: 15%;}
.cha-08 p { top: 20%;right: -50%;}
.cha-09 p {right: -60%;}
.cha-10 p {right: -6%;top: -13%;}
.cha-12 p { top: -8%;left: 24%;}
.cha-13 p {right: -20%; top: 61%;}
.cha-14 p {left: -33%;}
.modal12 .imgsp {max-width: 450px;}
.modal02 .imgsp, .modal05 .imgsp, .modal08 .imgsp {max-width: 210px;}
.cloud01 {top: 31%;}
.cloud04 {bottom: 40%;}
.cloud02, .cloud03 {max-width: 530px;}
.cloud03 {bottom: 20%;}
.cloud04 {max-width: 457px;}
}
@media screen and (max-width: 850px){
.cha-02 img{max-width: 191px;}
.cha-04 img{max-width: 189px;}
.cha-05 img{max-width: 200px;}
.cha-06 img{max-width: 188px;}
.cha-07 img{max-width:220px; }
.cha-12 img{max-width: 348px;}
.cha-12 {right: 4%;}
.cha-10 p {right: -7%;}
.cha-flx div {margin: 0.3rem 0;}
.modal-contents{padding: 4rem 3rem;}
}
@media screen and (max-width: 650px){
.bg-pink-inner {height: 1900px;}
.bg-pink-inner::after {bottom: -6rem;}
.f32 {font-size: 1.5rem;line-height: 2.4rem;}
.f45 {font-size: 2rem;}
.cha-modal > p {font-size: 0.875rem;line-height: 1rem;}
.bg-pink-inner span, .f16 {font-size: 0.9rem;}
h2 img {width: 254px;}
.cha-flx div {width: 100%;}
.cha-02 img, .cha-05 img, .cha-01 img {max-width: 180px;}
.cha-04 img {max-width: 160px;}
.cha-06 img, .cha-09 img, .cha-08 img {max-width: 170px;}
.cha-07 img {max-width: 190px;}
.cha-11 img {max-width: 220px;}
.cha-12 img {max-width: 320px;}
.cha-13 img {max-width: 210px;}
.cha-14 img {max-width: 200px;}
.cha-02 p {left: -22%;}
.cha-04 p {right: -5%; top: -32%;}
.cha-06 p {left: 20%;}
.cha-08 p {right: -55%;}
.cha-12 p {top: -5%;}
.cha-05 {top: 23%; right: 2%;}
.cha-06 {top: 26%;}
.cha-01 {top: 28%;}
.cha-09 {top: 41%;}
.cha-10 {bottom: 33%;}
.cha-12 {right: 0%;}
.cha-08 {bottom: 32%;left: 17%;}
.cha-11 {bottom: 21%; left: 5%;}
.cha-13 {left: 7%;}
.cha-14 {bottom: 6%;}
.cloud02, .cloud03 {max-width: 243px;}
.cloud01, .cloud04{max-width: 188px;}
.modal-contents{padding: 3rem 1rem;}
.modalInner-item img{max-width: 200px;margin: 0 auto;}
.modalInner-item {margin-bottom: 0;}
.modalInner-item img.wid1{max-width: 290px;}
.modalInner-item img.wid-thin{max-width: 150px;}
.modalInner-item img.wid180{max-width: 180px;}
.modalList-item .modal-contents{border: 6px solid #333;}
}
@media screen and (max-width: 550px){
h2 {top: 19rem;}
.cha-01 {left: 0;}
.cha-06 {left: 36%;top: 25%;}
.cha-08 {left: 10%;}
.cha-12{right: -2%;}
.cha-11 {bottom: 20%;}
.cha-13 {bottom: 5%;}
.cha-14 {right: 3%;}
.cha-01 p{top: -25%;}
.cha-02 p {left: -17%; top: 10%;}
.cha-06 p {left: 12%;}
.cha-03 p {left: -7%;}
.cha-08 p {right: -72%;}
.cha-07 p {right: 20%;}
.cha-09 p {right: -63%;}
.cha-10 p {right:  -18%;}
.cha-11 p {right: -40%;}
.cha-12 p{top: -20%;}
.cha-13 p {right: -30%;}
.cha-14 p {left: -42%;top: 21%;}
.cha-02 img, .cha-05 img, .cha-01 img {	max-width: 140px;}
.cha-06 img, .cha-09 img, .cha-08 img { max-width: 132px;}
.cha-04 img {max-width: 138px;}
.cha-07 img {max-width: 151px;}
.cha-10 img {max-width: 138px;}
.cha-11 img {max-width: 155px;}
.cha-12 img {max-width: 260px;}
.cha-13 img {max-width: 152px;}
.cha-14 img {max-width: 148px;}
}
@media screen and (max-width: 500px){
.bg-pink-inner::after {bottom: -4.5rem}
.modal-inner {padding: 3em 0.5em;}
.cha-07 p { right: 34%;  top: 6%;}
.top1 {right: 0%;}
.top2 a {padding-right: 0;}
.backbtn{margin-top: 7rem;}
.backbtn {margin-top: 3rem;padding-bottom: 2rem;}
}
@media screen and (max-width: 420px){
.br420 {display: block;}
.bg-pink-inner {height: 1600px;}
.bg-pink-inner::after {bottom: -4rem;}
h2 {top: 16rem;}
.cha-modal > p {font-size: 0.875rem;}
.bg-pink-inner span, .f16 {font-size: 0.8rem;}
.cha-02 img, .cha-05 img, .cha-01 img {max-width: 120px;}
.cha-03 img {width: 92px;}
.cha-04 img {max-width: 118px;}
.cha-06 img, .cha-09 img, .cha-08 img {max-width: 112px;}
.cha-07 img {max-width: 141px;}
.cha-10 img {max-width: 100px;}
.cha-11 img {max-width: 137px;}
.cha-12 img {max-width: 203px;}
.cha-13 img {max-width: 132px;}
.cha-14 img {max-width: 128px;}
.cha-01 p {top: -27%;}
.cha-02 p {left: -8%; top: 12%;}
.cha-03 p {left: 0;top: 85%;}
.cha-04 p {right: 0;}
.cha-04 p {top: -38%;}
.cha-06 p {left: 4%; top: 95%;}
.cha-07 p {left: 3%; top: -15%;right: auto;}
.cha-08 p {right: -78%;top: 68%;}
.cha-09 p {right:  -67%;top: 60%;}
.cha-10 p {right: -16%; top: -20%;}
.cha-12 p {top: -19%;left: 11%;}
.cha-11 p {right: -35%;top: 90%;}
.cha-13 p {right: -35%;}
.cha-14 p {top: 10%;left: -50%;}
.cha-01 {left: 0%;}
.cha-02 {left: 5%;top: 5%;}
.cha-03 {top: 2%;}
.cha-04 {top: 7%;}
.cha-05 {right: 1%;}
.cha-06 {left: 35%;top: 25%;}
.cha-07 {left: 0;top: 45%;}
.cha-08 {left: 13%;}
.cha-09 {top: 38%;right: 25%;}
.cha-10 {bottom: 36%;}
.cha-11 {left: 2%; bottom: 19%;}
.cha-12 {right: -2%; bottom: 19%;}
.cha-13 {left: 4%;}
.cha-14 {right: 3%;}
.modalInner-item dd {line-height: 1.4rem;}
.f32{font-size: 1.3rem;line-height: 2rem;}
.modalInner-item p{margin-bottom: 0.75rem;}
.modal-contents {padding: 2.5rem 1rem;}
.modalInner-item .detail-r dl{padding: 0.5rem 0;}
}