.pane-footer,
#footer_top { margin-top: 0;}
#pankuzu_wrap .breadcrumb { margin-bottom: 0;}
#block_global_search_contents { z-index: 13;}

.pez * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  word-break: break-all;
}

.pez img {
  max-width: 100%;
  height: auto;
	vertical-align: top;
}
.pez img.w100 {
  width: 100%;
  height: auto;
}

.pez a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 768px) {
	.pc-disp {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .sp-disp {
    display: none !important;
  }
}

@media (hover: hover) {
  .opacity-link {
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
  }
  .opacity-link:hover {
    opacity: 0.6;
    cursor: pointer;
  }
}
button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

/*------------------------------------------
fade up
------------------------------------------*/
.fadeup {
  opacity: 0;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  -webkit-transition: opacity 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out, -webkit-transform 0.7s ease-in-out;
}
.fadeup.is-active {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.7s ease-in-out;
  transition: opacity 0.7s ease-in-out;
}
.fade.is-active {
  opacity: 1;
}

.en {
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/*------------------------------------------
animations
------------------------------------------*/
@-webkit-keyframes wrapper-op {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
		display: none !important;
		z-index: -9999;
  }
}
@keyframes wrapper-op {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
		display: none !important;
		z-index: -9999;
  }
}
@-webkit-keyframes bg-fall {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@keyframes bg-fall {
  0% {
    height: 0;
  }
  100% {
    height: 100%;
  }
}
@-webkit-keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  0%, 100%, 20%, 40%, 60%, 80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
            transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
            transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
            transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
            transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
            transform: scale3d(0.97, 0.97, 0.97);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes mv-pez-pc {
  to {
    background-position: -2112px 0;
  }
}
@keyframes mv-pez-pc {
  to {
    background-position: -2112px 0;
  }
}
@-webkit-keyframes mv-pez-sp {
  to {
    background-position: -1548px 0;
  }
}
@keyframes mv-pez-sp {
  to {
    background-position: -1548px 0;
  }
}
@-webkit-keyframes circle {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  0% {
    -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn);
  }
}
@keyframes circle {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  0% {
    -webkit-transform: rotate(-1turn);
            transform: rotate(-1turn);
  }
}
@-webkit-keyframes bounceInLeft {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-500px, 0, 0);
            transform: translate3d(-500px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-500px, 0, 0);
            transform: translate3d(-500px, 0, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
            transform: translate3d(25px, 0, 0);
  }
  75% {
    -webkit-transform: translate3d(-10px, 0, 0);
            transform: translate3d(-10px, 0, 0);
  }
  90% {
    -webkit-transform: translate3d(5px, 0, 0);
            transform: translate3d(5px, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes bounceInDown {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -500px, 0) rotate(-180deg);
            transform: translate3d(0, -500px, 0) rotate(-180deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) rotate(-180deg);
            transform: translate3d(0, 25px, 0) rotate(-180deg);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) rotate(-180deg);
            transform: translate3d(0, -10px, 0) rotate(-180deg);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) rotate(-180deg);
            transform: translate3d(0, 5px, 0) rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes bounceInDown {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -500px, 0) rotate(-180deg);
            transform: translate3d(0, -500px, 0) rotate(-180deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) rotate(-180deg);
            transform: translate3d(0, 25px, 0) rotate(-180deg);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0) rotate(-180deg);
            transform: translate3d(0, -10px, 0) rotate(-180deg);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0) rotate(-180deg);
            transform: translate3d(0, 5px, 0) rotate(-180deg);
  }
  100% {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes bounceInUp {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  0%, 100%, 60%, 75%, 90% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0);
            transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0);
            transform: translate3d(0, -20px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, 10px, 0);
            transform: translate3d(0, 10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -5px, 0);
            transform: translate3d(0, -5px, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}
@-webkit-keyframes fadeInRight-2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(7deg);
            transform: translate3d(100%, 0, 0) rotate(7deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(7deg);
            transform: rotate(7deg);
  }
}
@keyframes fadeInRight-2 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate(7deg);
            transform: translate3d(100%, 0, 0) rotate(7deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotate(7deg);
            transform: rotate(7deg);
  }
}
/* =========================================================
splash 
========================================================= */
.splash {
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 769px) {
  .splash {
    background: #fff;
  }
}
.splash .splash__inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.splash .splash__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
}
.splash .splash__cnt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
@media (min-width: 769px) {
  .splash .splash__cnt {
    width: 1315px;
    height: 612px;
  }
}
@media (max-width: 768px) {
  .splash .splash__cnt {
    width: 92vw;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
}
.splash .splash__cnt .logo {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .splash .splash__cnt .logo {
    opacity: 0;
    -webkit-animation: 0.8s forwards ease-out normal bounceIn;
            animation: 0.8s forwards ease-out normal bounceIn;
    -webkit-animation-delay: 1.4s;
            animation-delay: 1.4s;
  }
}
.splash .splash__cnt .img__list {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.splash .splash__cnt .img__list .img--1,
.splash .splash__cnt .img__list .img--2,
.splash .splash__cnt .img__list .img--3 {
  opacity: 0;
  width: 56vw;
  -webkit-animation: 0.6s forwards ease-out normal bounceIn;
          animation: 0.6s forwards ease-out normal bounceIn;
  -webkit-animation-delay: 1.4s;
          animation-delay: 1.4s;
}
.splash .splash__cnt .img__list .img--2 {
  margin: 0 auto;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.splash .splash__cnt .img__list .img--3 {
  margin-left: auto;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.splash .splash__color {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.splash .splash__color > li {
  width: 12.5%;
  height: 0%;
  -webkit-animation: 0.8s forwards ease-out normal bg-fall;
          animation: 0.8s forwards ease-out normal bg-fall;
}
.splash .splash__color > li:nth-child(1), .splash .splash__color > li:nth-child(5) {
  background: #f5db4e;
}
.splash .splash__color > li:nth-child(2), .splash .splash__color > li:nth-child(8) {
  background: #aee24b;
}
.splash .splash__color > li:nth-child(3) {
  background: #66ccfa;
}
.splash .splash__color > li:nth-child(4) {
  background: #ff9c15;
}
.splash .splash__color > li:nth-child(6) {
  background: #ff6e6e;
}
.splash .splash__color > li:nth-child(7) {
  background: #669ffa;
}
.splash .splash__color > li:nth-child(2) {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.splash .splash__color > li:nth-child(3) {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.splash .splash__color > li:nth-child(4) {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.splash .splash__color > li:nth-child(5) {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
.splash .splash__color > li:nth-child(6) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}
.splash .splash__color > li:nth-child(7) {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
.splash .splash__color > li:nth-child(8) {
  -webkit-animation-delay: 0.7s;
          animation-delay: 0.7s;
}

.splash-bg {
  z-index: 9998;
  position: fixed;
  top: 0;
  left: 0;
	bottom: 0;
	right: 0;
	background: #fff;
  opacity: 1;
}
.page-show .splash-bg {
  -webkit-animation: wrapper-op 0.1s linear forwards;
          animation: wrapper-op 0.1s linear forwards;
}

/*------------------------------------------
page-cont
------------------------------------------*/
.pane-contents {
  width: 100%;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  overflow: hidden;
}
body > .wrapper {
	max-width: 100vw;
	overflow-x: hidden;
}

/*------------------------------------------
pagetop
------------------------------------------*/
.pagetop {
  overflow: hidden;
}
@media (min-width: 769px) {
.pagetop {
    z-index: 200;
    right: -10px;
  }
}
@media (max-width: 768px) {
	.pagetop {
    z-index: 20;
    right: -8px;
  }
}
.pagetop a {
  background: url("../../../images/charapla-pez/pagetop.png") no-repeat center/contain;
}
@media (min-width: 769px) {
  .pagetop a {
    width: 155px;
    height: 130px;
  }
}
@media (max-width: 768px) {
  .pagetop a {
    width: 86px;
    height: 77px;
  }
}
.pagetop a::before {
  content: none;
}

/*------------------------------------------
pez
------------------------------------------*/
.pez {
  width: 100%;
}
@media (min-width: 769px) {
  .pez *:hover {
    text-decoration: none;
  }
}

.cmn__inner {
  width: 100%;
  margin: auto;
}
@media (min-width: 769px) {
  .cmn__inner {
    max-width: 1200px;
  }
}
@media (max-width: 768px) {
  .cmn__inner {
    padding: 0 15px;
  }
}

.cmn__ttl {
  line-height: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
}
@media (max-width: 768px) {
  .cmn__ttl {
    gap: 4px;
  }
}
.cmn__ttl .en {
  font-size: 100px;
  text-shadow: 3px 3px 0px #fff;
}
@media (max-width: 768px) {
  .cmn__ttl .en {
    width: 100%;
    font-size: 50px;
  }
}
.cmn__ttl .ja {
  font-weight: 500;
  font-size: 20px;
}
@media (max-width: 768px) {
  .cmn__ttl .ja {
    width: 100%;
    font-size: 14px;
  }
}

.noise__bg {
  position: relative;
  width: 100%;
  height: 100%;
}
.noise__bg::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url("../../../images/charapla-pez/bg_noise.png") repeat center/256px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/*------------------------------------------
mv__container
------------------------------------------*/
.mv__container {
  position: relative;
  z-index: 12;
  width: 100%;
}
.mv__container .mv__img {
  width: 100%;
}
.mv__container .mv__loop {
  width: 100%;
  background: #f6ffef;
  position: relative;
  z-index: 2;
}
@media (min-width: 769px) {
  .mv__container .mv__loop {
    height: 125px;
  }
}
@media (max-width: 768px) {
  .mv__container .mv__loop {
    height: 100px;
  }
}
.mv__container .mv__loop .loop__img {
  position: absolute;
  top: 0;
  left: 0;
}
@media (min-width: 769px) {
  .mv__container .mv__loop .loop__img {
    width: 1056px;
    height: 190px;
    background: url("../../../images/charapla-pez/loop_img.png") no-repeat 0/2112px;
    -webkit-animation: mv-pez-pc 1.5s steps(2) infinite;
            animation: mv-pez-pc 1.5s steps(2) infinite;
  }
}
@media (max-width: 768px) {
  .mv__container .mv__loop .loop__img {
    width: 774px;
    height: 139px;
    background: url("../../../images/charapla-pez/loop_img.png") no-repeat 0/1548px;
    -webkit-animation: mv-pez-sp 1.5s steps(2) infinite;
            animation: mv-pez-sp 1.5s steps(2) infinite;
  }
}
@media (min-width: 769px) {
  .mv__container .splide {
    -webkit-transform: translateY(-30px);
            transform: translateY(-30px);
  }
}
@media (max-width: 768px) {
  .mv__container .splide {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}
.mv__container .splide.no-slide {
  visibility: visible;
}
.mv__container .splide__list {
  width: 100%;
  height: auto;
}
.mv__container .slide--cnt {
  overflow: hidden;
  position: relative;
}
@media (min-width: 769px) {
  .mv__container .slide--cnt {
    aspect-ratio: 1056/190;
  }
}
@media (max-width: 768px) {
  .mv__container .slide--cnt {
    aspect-ratio: 774/139;
  }
}

/*------------------------------------------
nav__container
------------------------------------------*/
.nav__container {
  position: relative;
  z-index: 12;
  background: #aee34c;
}
@media (min-width: 769px) {
  .nav__container {
    padding: 80px 0;
  }
}
@media (max-width: 768px) {
  .nav__container {
    padding: 40px 0 46px;
  }
}
.nav__container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 11;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
@media (min-width: 769px) {
  .nav__container::after {
    background: url("../../../images/charapla-pez/bg_wave3_pc.png") repeat-x left bottom/1361px 100%;
    height: 20px;
    bottom: -20px;
  }
}
@media (max-width: 768px) {
  .nav__container::after {
    background: url("../../../images/charapla-pez/bg_wave3_sp.png") repeat-x left bottom/375px 100%;
    height: 10px;
    bottom: -10px;
  }
}
.nav__container .nav__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (min-width: 769px) {
  .nav__container .nav__list {
    gap: 30px;
  }
}
@media (max-width: 768px) {
  .nav__container .nav__list {
    gap: 14px;
  }
}
.nav__container .nav__list > li {
  width: 100%;
  height: 70px;
}
@media (min-width: 769px) {
  .nav__container .nav__list > li {
    width: calc(33.3333333333% - 20px);
    height: 112px;
  }
}
.nav__container .nav__list > li > a {
  border-radius: 20px;
  text-align: center;
  width: 100%;
  height: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  color: #fff;
  font-size: 30px;
  line-height: 1.2;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
@media (max-width: 768px) {
  .nav__container .nav__list > li > a {
    font-size: 26px;
  }
}
.nav__container .nav__list > li > a::before, .nav__container .nav__list > li > a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}
.nav__container .nav__list > li > a::before {
  width: 46px;
  height: 46px;
  left: 15px;
}
@media (min-width: 769px) {
  .nav__container .nav__list > li > a::before {
    width: 70px;
    height: 70px;
  }
}
.nav__container .nav__list > li > a::after {
  background: url("../../../images/charapla-pez/icon_arrows.png") no-repeat center/100%;
  width: 17px;
  height: 10px;
  right: 20px;
}
@media (min-width: 769px) {
  .nav__container .nav__list > li > a::after {
    width: 25px;
    height: 17px;
    right: 30px;
  }
}
@media (min-width: 769px) {
  .nav__container .nav__list > li > a:hover {
    opacity: 0.6;
    cursor: pointer;
  }
}
.nav__container .nav__list > li.news > a {
  background: #1e2874;
  -webkit-box-shadow: 5px 5px 0px #2f217e;
          box-shadow: 5px 5px 0px #2f217e;
}
.nav__container .nav__list > li.news > a::before {
  background: url("../../../images/charapla-pez/icon_news.png") no-repeat center/100%;
}
.nav__container .nav__list > li.history > a {
  background: #f24646;
  -webkit-box-shadow: 5px 5px 0px #b12526;
          box-shadow: 5px 5px 0px #b12526;
}
.nav__container .nav__list > li.history > a::before {
  background: url("../../../images/charapla-pez/icon_history.png") no-repeat center/100%;
}
.nav__container .nav__list > li.photo > a {
  background: #ff7815;
  -webkit-box-shadow: 5px 5px 0px #a55404;
          box-shadow: 5px 5px 0px #a55404;
}
.nav__container .nav__list > li.photo > a::before {
  background: url("../../../images/charapla-pez/icon_photo.png") no-repeat center/100%;
}

/*------------------------------------------
news__container
------------------------------------------*/
.news__container {
  background: #f5db4d;
  position: relative;
}
@media (min-width: 769px) {
  .news__container {
    padding: 80px 0 120px;
  }
}
@media (max-width: 768px) {
  .news__container {
    padding: 50px 0 74px;
  }
}
.news__container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  z-index: 11;
}
@media (min-width: 769px) {
  .news__container::after {
    background: url("../../../images/charapla-pez/bg_wave_pc.png") repeat-x left bottom/1361px 100%;
    height: 20px;
    bottom: -20px;
  }
}
@media (max-width: 768px) {
  .news__container::after {
    background: url("../../../images/charapla-pez/bg_wave_sp.png") repeat-x left bottom/375px 100%;
    height: 10px;
    bottom: -10px;
  }
}
.news__container .news__circle {
  position: absolute;
  z-index: 11;
}
@media (min-width: 769px) {
  .news__container .news__circle {
    width: 841px;
    height: 831px;
    top: -498px;
    right: -282px;
  }
}
@media (max-width: 768px) {
  .news__container .news__circle {
    width: 329px;
    height: 325px;
    top: -196px;
    right: -110px;
  }
}
.news__container .news__circle::before {
  content: "";
  background: url("../../../images/charapla-pez/bg_circle.png") no-repeat center/100%;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  -webkit-animation: circle 40s linear 0s infinite;
          animation: circle 40s linear 0s infinite;
}
.news__container .cmn__inner {
  position: relative;
  z-index: 12;
}
.news__container .cmn__ttl {
  color: #1e2874;
  margin-bottom: 60px;
}
@media (max-width: 768px) {
  .news__container .cmn__ttl {
    margin-bottom: 30px;
  }
}
.news__container ul {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 22px;
}
@media (min-width: 769px) {
  .news__container ul {
    gap: 30px;
  }
}
.news__container ul > li {
  width: 100%;
}
@media (min-width: 769px) {
  .news__container ul > li {
    width: calc(25% - 22.5px);
  }
}
@media (max-width: 768px) {
  .news__container ul > li {
    padding-bottom: 20px;
    border-bottom: 2px dotted #1e2874;
  }
}
.news__container ul > li > a {
  display: block;
}
@media (max-width: 768px) {
  .news__container ul > li > a {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 20px;
  }
}
.news__container ul > li .photo {
  overflow: hidden;
  border: 1.5px solid #1e2874;
  border-radius: 10px;
}
@media (min-width: 769px) {
  .news__container ul > li .photo {
    width: 100%;
    border: 3px solid #1e2874;
    border-radius: 20px;
    margin-bottom: 14px;
  }
}
@media (max-width: 768px) {
  .news__container ul > li .photo {
    width: 152px;
  }
}
.news__container ul > li .photo img {
  width: 100%;
  height: 100%;
}
.news__container ul > li .date {
  background: #1e2874;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "Lilita One", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  font-size: 14px;
  padding: 3px 5px;
  margin-bottom: 10px;
}
@media (min-width: 769px) {
  .news__container ul > li .date {
    font-size: 16px;
    padding: 3px 6px 2px;
    margin-bottom: 14px;
  }
}
.news__container ul > li .txt {
  color: #1e2874;
  line-height: 1.6;
  font-weight: 700;
  font-size: 13px;
}
@media (min-width: 769px) {
  .news__container ul > li .txt {
    font-size: 16px;
  }
}
@media (max-width: 768px) {
  .news__container ul > li .detail {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}
.news__container .news__btn {
  width: 250px;
  height: 46px;
  margin: 40px auto 0;
}
@media (min-width: 769px) {
  .news__container .news__btn {
    width: 400px;
    height: 74px;
    margin: 60px auto 0;
  }
}
.news__container .news__btn > a {
  border-radius: 30px;
  background: #1e2874;
  -webkit-box-shadow: 3px 3px 0px #2f217e;
          box-shadow: 3px 3px 0px #2f217e;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  font-size: 21px;
  position: relative;
}
@media (min-width: 769px) {
  .news__container .news__btn > a {
    border-radius: 40px;
    font-size: 34px;
  }
}
.news__container .news__btn > a::before, .news__container .news__btn > a::after {
  content: "";
  position: absolute;
}
.news__container .news__btn > a::before {
  background: url("../../../images/charapla-pez/btn_icon.png") no-repeat center/100%;
  width: 59px;
  height: 74px;
  left: 0;
  bottom: -11px;
}
@media (min-width: 769px) {
  .news__container .news__btn > a::before {
    width: 91px;
    height: 114px;
    left: 2px;
    bottom: -21px;
  }
}
.news__container .news__btn > a::after {
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  background: url("../../../images/charapla-pez/icon_arrows.png") no-repeat center/100%;
  width: 17px;
  height: 10px;
  right: 16px;
}
@media (min-width: 769px) {
  .news__container .news__btn > a::after {
    width: 25px;
    height: 17px;
    right: 27px;
  }
}

/*------------------------------------------
history__container
------------------------------------------*/
.history__container {
  background: #f7e0a9;
  position: relative;
}
@media (min-width: 769px) {
  .history__container {
    padding: 100px 0 160px;
  }
}
@media (max-width: 768px) {
  .history__container {
    padding: 50px 0 220px;
  }
}
.history__container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 11;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
@media (min-width: 769px) {
  .history__container::after {
    background: url("../../../images/charapla-pez/bg_wave4_pc.png") repeat-x left bottom/1361px 100%;
    height: 20px;
    bottom: -20px;
  }
}
@media (max-width: 768px) {
  .history__container::after {
    background: url("../../../images/charapla-pez/bg_wave4_sp.png") repeat-x left bottom/375px 100%;
    height: 10px;
    bottom: -10px;
  }
}
.history__container .cmn__ttl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #ce3233;
}
@media (min-width: 769px) {
  .history__container .cmn__ttl {
    margin: 0 auto 30px;
  }
}
@media (max-width: 768px) {
  .history__container .cmn__ttl {
    margin: 0 0 38px 10px;
  }
}
.history__container .history__cnt {
  width: 100%;
  background: #fff;
  position: relative;
  z-index: 11;
}
@media (min-width: 769px) {
  .history__container .history__cnt {
    max-width: 840px;
    margin-left: 300px;
    padding: 40px 60px;
  }
}
@media (max-width: 768px) {
  .history__container .history__cnt {
    margin: 0 auto;
    padding: 30px 20px;
  }
}
.history__container .history__cnt::before {
  content: "";
  background: url("../../../images/charapla-pez/history_cnt_ill.png") no-repeat center/100%;
  position: absolute;
  opacity: 0;
}
@media (min-width: 769px) {
  .history__container .history__cnt::before {
    width: 235px;
    height: 235px;
    left: -212px;
    bottom: -84px;
  }
}
@media (max-width: 768px) {
  .history__container .history__cnt::before {
    width: 68px;
    height: 68px;
    top: -47px;
    right: -15px;
  }
}
.history__container .history__cnt.is-active::before {
  opacity: 1;
}
@media (min-width: 769px) {
  .history__container .history__cnt.is-active::before {
    -webkit-animation: 1s forwards ease-out normal fadeInLeft;
            animation: 1s forwards ease-out normal fadeInLeft;
  }
}
@media (max-width: 768px) {
  .history__container .history__cnt.is-active::before {
    -webkit-animation: 1s forwards ease-out normal fadeInRight;
            animation: 1s forwards ease-out normal fadeInRight;
  }
}
.history__container .history__cnt .txt {
  letter-spacing: 0;
  line-height: 2;
  color: #ce3232;
  font-size: 18px;
}
@media (max-width: 768px) {
  .history__container .history__cnt .txt {
    font-size: 13px;
  }
}
.history__container .ill--item {
  position: absolute;
  z-index: 11;
}
.history__container .ill--item.type--1 {
  width: 464px;
  height: 700px;
  opacity: 0;
}
@media (min-width: 769px) {
  .history__container .ill--item.type--1 {
    top: -148px;
    left: -72px;
  }
}
@media (max-width: 768px) {
  .history__container .ill--item.type--1 {
    width: 135px;
    height: 203px;
    top: -56px;
    right: 8px;
  }
}
@media (min-width: 769px) {
  .history__container .ill--item.type--1.is-active {
    -webkit-animation: 1s forwards ease-out normal fadeInLeft;
            animation: 1s forwards ease-out normal fadeInLeft;
  }
}
@media (max-width: 768px) {
  .history__container .ill--item.type--1.is-active {
    -webkit-animation: 1s forwards ease-out normal fadeInRight;
            animation: 1s forwards ease-out normal fadeInRight;
  }
}
@media (min-width: 769px) {
  .history__container .ill--item.type--2 {
    z-index: 0;
    width: 270px;
    height: 627px;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
}
@media (max-width: 768px) {
  .history__container .ill--item.type--2 {
    width: 475px;
    height: 149px;
    left: 0;
    bottom: 35px;
  }
}
.history__container .ill--item.type--2::after {
  content: "";
  position: absolute;
  height: 100%;
  background-position: 0 0;
  top: 0;
}
@media (min-width: 1025px) {
  .history__container .ill--item.type--2::after {
    background: url("../../../images/charapla-pez/history_ill_2_pc.png") no-repeat center/100%;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .history__container .ill--item.type--2::after {
    background-image: url("../../../images/charapla-pez/history_ill_2_sp.png");
    background-repeat: repeat-x;
    background-size: 475px auto;
    width: 475px;
    -webkit-animation: loop-sp 30s linear infinite;
            animation: loop-sp 30s linear infinite;
  }
}

@-webkit-keyframes loop-pc {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -1662px;
  }
}

@keyframes loop-pc {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -1662px;
  }
}
@-webkit-keyframes loop-sp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -950px 0;
  }
}
@keyframes loop-sp {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -950px 0;
  }
}
/*------------------------------------------
photo__container
------------------------------------------*/
.photo__container {
  position: relative;
}
@media (min-width: 769px) {
  .photo__container {
    background: #ea7825 url("../../../images/charapla-pez/bg_pez.png") repeat -8px top/132px 130px;
    padding: 70px 0 120px;
  }
}
@media (max-width: 768px) {
  .photo__container {
    background: #ea7825 url("../../../images/charapla-pez/bg_pez.png") repeat left top/61px 60px;
    padding: 40px 0 50px;
  }
}
.photo__container .photo__ttl {
  position: relative;
  z-index: 11;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
  color: #fff;
}
@media (min-width: 769px) {
  .photo__container .photo__ttl {
    margin: 0 auto 34px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__ttl {
    margin: 0 auto 20px;
  }
}
.photo__container .photo__ttl .line--2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 769px) {
  .photo__container .photo__ttl .line--2 {
    gap: 54px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__ttl .line--2 {
    gap: 24px;
  }
}
.photo__container .photo__ttl .en {
  text-shadow: 3px 3px 0px #a55403;
}
@media (min-width: 769px) {
  .photo__container .photo__ttl .en {
    font-size: 120px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__ttl .en {
    font-size: 49px;
  }
}
.photo__container .photo__ttl .ja {
  background: #fff;
  color: #dd7021;
  font-weight: 900;
}
@media (min-width: 769px) {
  .photo__container .photo__ttl .ja {
    font-size: 26px;
    padding: 5px 10px 6px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__ttl .ja {
    font-size: 10px;
    padding: 3px 5px;
  }
}
.photo__container .lead {
  position: relative;
  z-index: 11;
  color: #fff;
  text-align: center;
  text-shadow: 0px 3px 0px #a55403;
}
@media (min-width: 769px) {
  .photo__container .lead {
    line-height: 1.6;
    font-size: 24px;
    margin-bottom: 56px;
  }
}
@media (max-width: 768px) {
  .photo__container .lead {
    line-height: 2;
    font-size: 15px;
    margin-bottom: 40px;
  }
}
.photo__container .photo__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (min-width: 769px) {
  .photo__container .photo__list {
    gap: 0px 50px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-bottom: 85px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list {
    gap: 20px;
    margin-bottom: 75px;
  }
}
.photo__container .photo__list > li {
  width: 100%;
  padding: 7px 14px 20px;
  background: #794e4e;
  position: relative;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li {
    width: calc(50% - 25px);
    padding: 10px 20px 30px;
  }
  .photo__container .photo__list > li:nth-child(even) {
    margin-top: 90px;
  }
}
.photo__container .photo__list > li::before {
  content: "";
  background: url("../../../images/charapla-pez/photo_list_pin.png") no-repeat center/100%;
  position: absolute;
  top: 0;
  right: 0;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li::before {
    width: 90px;
    height: 20px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li::before {
    width: 62px;
    height: 14px;
  }
}
.photo__container .photo__list > li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #f0dbbf;
  z-index: 1;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li::after {
    height: 250px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li::after {
    height: 204px;
  }
}
.photo__container .photo__list > li .content {
  position: relative;
  z-index: 12;
}
.photo__container .photo__list > li .content .ttl__area > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li .content .ttl__area > a {
    margin-bottom: 10px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li .content .ttl__area > a {
    margin-bottom: 7px;
  }
}
.photo__container .photo__list > li .content .ttl__area > a .left {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li .content .ttl__area > a .left {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    gap: 20px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li .content .ttl__area > a .left {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    gap: 10px;
  }
}
.photo__container .photo__list > li .content .ttl__area > a .left .icon {
  border-radius: 100%;
  overflow: hidden;
  aspect-ratio: 1/1;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li .content .ttl__area > a .left .icon {
    width: 70px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li .content .ttl__area > a .left .icon {
    width: 47px;
  }
}
.photo__container .photo__list > li .content .ttl__area > a .left .user {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li .content .ttl__area > a .left .user {
    font-size: 20px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li .content .ttl__area > a .left .user {
    font-size: 15px;
  }
}
@media (min-width: 769px) {
  .photo__container .photo__list > li .content .ttl__area > a .right {
    width: 72px;
    margin-bottom: 10px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li .content .ttl__area > a .right {
    width: 50px;
  }
}
.photo__container .photo__list > li .content .photo {
  overflow: hidden;
  aspect-ratio: 1/1;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li .content .photo {
    border: 6px solid #fff;
    margin-bottom: 23px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li .content .photo {
    border: 4px solid #fff;
    margin-bottom: 14px;
  }
}
.photo__container .photo__list > li .content .photo .splide {
  overflow: hidden;
}
.photo__container .photo__list > li .content .photo .splide.no-slide {
  visibility: visible;
}
.photo__container .photo__list > li .content .photo .splide.no-slide .splide__arrows {
  display: none;
}
.photo__container .photo__list > li .content .photo .splide.no-slide .splide__slide {
  width: 100%;
}
.photo__container .photo__list > li .content .photo .splide__wrapper {
  position: relative;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .photo__container .photo__list > li .content .photo .splide__wrapper {
    width: 100%;
  }
}
.photo__container .photo__list > li .content .photo .splide__slide {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li .content .detail .sub__ttl {
    max-width: 444px;
    margin: 0 auto 25px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li .content .detail .sub__ttl {
    width: 300px;
    margin: 0 auto 18px;
  }
}
.photo__container .photo__list > li .content .detail .txt {
  color: #794e4e;
  font-weight: 700;
  line-height: 1.7;
}
@media (min-width: 769px) {
  .photo__container .photo__list > li .content .detail .txt {
    font-size: 18px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__list > li .content .detail .txt {
    font-size: 14px;
  }
}
.photo__container .photo__option {
  position: relative;
  z-index: 11;
  background: #f0dbbf;
  width: 100%;
  margin: 0 auto;
  letter-spacing: 0;
}
@media (min-width: 769px) {
  .photo__container .photo__option {
    border-radius: 120px;
    max-width: 800px;
    padding: 0 130px 52px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__option {
    border-radius: 30px;
    padding: 0 22px 34px;
  }
}
.photo__container .photo__option .op__ttl {
  color: #fff;
  background: #794e4e;
  border-radius: 45px;
  text-align: center;
  font-weight: 500;
  margin: 0 auto;
  -webkit-transform: translateY(-24px);
          transform: translateY(-24px);
}
@media (min-width: 769px) {
  .photo__container .photo__option .op__ttl {
    font-size: 23px;
    padding: 8px 10px 13px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__option .op__ttl {
    width: 240px;
    font-size: 16px;
    padding: 8px 10px 12px;
  }
}
.photo__container .photo__option .text {
  line-height: 1.7;
  color: #794e4e;
  font-size: 20px;
  text-align: center;
}
@media (max-width: 768px) {
  .photo__container .photo__option .text {
    font-size: 15px;
  }
}
.photo__container .photo__option .text.txt--1 {
  margin-bottom: 15px;
}
@media (max-width: 768px) {
  .photo__container .photo__option .text.txt--1 {
    margin-bottom: 10px;
  }
}
.photo__container .photo__option .text.txt--2 .hash {
  margin-right: 12px;
  background: #fff;
  padding: 3px 10px;
}
@media (max-width: 768px) {
  .photo__container .photo__option .text.txt--2 .hash {
    padding: 3px 5px;
    margin-right: 8px;
  }
}
.photo__container .photo__option::before, .photo__container .photo__option::after {
  content: "";
  position: absolute;
  z-index: 2;
  opacity: 0;
}
.photo__container .photo__option::before {
  background: url("../../../images/charapla-pez/photo_btn_icon_1.png") no-repeat center/100%;
}
@media (min-width: 769px) {
  .photo__container .photo__option::before {
    width: 182px;
    height: 191px;
    bottom: -20px;
    left: -69px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__option::before {
    width: 76px;
    height: 80px;
    top: -19px;
    left: 2px;
  }
}
.photo__container .photo__option::after {
  -webkit-transform: rotate(7deg);
          transform: rotate(7deg);
  background: url("../../../images/charapla-pez/photo_btn_icon_2.png") no-repeat center/100%;
}
@media (min-width: 769px) {
  .photo__container .photo__option::after {
    width: 125px;
    height: 220px;
    bottom: 31px;
    right: -20px;
  }
}
@media (max-width: 768px) {
  .photo__container .photo__option::after {
    width: 63px;
    height: 110px;
    top: -39px;
    right: 6px;
  }
}
.photo__container .photo__option.is-active::before {
  -webkit-animation: 1s forwards ease-out normal fadeInLeft;
          animation: 1s forwards ease-out normal fadeInLeft;
}
.photo__container .photo__option.is-active::after {
  -webkit-animation: 1s forwards ease-out normal fadeInRight-2;
          animation: 1s forwards ease-out normal fadeInRight-2;
}

@-webkit-keyframes photo_l_pc {
  to {
    background-position: -350px 0;
  }
}

@keyframes photo_l_pc {
  to {
    background-position: -350px 0;
  }
}
@-webkit-keyframes photo_l_sp {
  to {
    background-position: -136px 0;
  }
}
@keyframes photo_l_sp {
  to {
    background-position: -136px 0;
  }
}
@-webkit-keyframes photo_r_pc {
  to {
    background-position: -306px 0;
  }
}
@keyframes photo_r_pc {
  to {
    background-position: -306px 0;
  }
}
@-webkit-keyframes photo_r_sp {
  to {
    background-position: -136px 0;
  }
}
@keyframes photo_r_sp {
  to {
    background-position: -136px 0;
  }
}
@media (min-width: 769px) {
  .l--bg {
    width: 175px;
    height: 3153px;
    background: url("../../../images/charapla-pez/photo_bg_1.png") no-repeat 0/350px;
    -webkit-animation: photo_l_pc 1.5s steps(2) infinite;
            animation: photo_l_pc 1.5s steps(2) infinite;
  }
}
@media (max-width: 768px) {
  .l--bg {
    width: 68px;
    height: 1218px;
    background: url("../../../images/charapla-pez/photo_bg_1.png") no-repeat 0/136px;
    -webkit-animation: photo_l_sp 1.5s steps(2) infinite;
            animation: photo_l_sp 1.5s steps(2) infinite;
  }
}

@media (min-width: 769px) {
  .r--bg {
    width: 153px;
    height: 2916px;
    background: url("../../../images/charapla-pez/photo_bg_2.png") no-repeat 0/306px;
    -webkit-animation: photo_r_pc 1.5s steps(2) infinite;
            animation: photo_r_pc 1.5s steps(2) infinite;
  }
}
@media (max-width: 768px) {
  .r--bg {
    width: 64px;
    height: 1220px;
    background: url("../../../images/charapla-pez/photo_bg_2.png") no-repeat 0/128px;
    -webkit-animation: photo_r_sp 1.5s steps(2) infinite;
            animation: photo_r_sp 1.5s steps(2) infinite;
  }
}

.l__loop,
.r__loop {
  position: absolute;
  top: 0;
  z-index: 0;
}
.l__loop .splide.no-slide,
.r__loop .splide.no-slide {
  visibility: visible;
}
.l__loop .splide__wrapper,
.r__loop .splide__wrapper {
  width: 100%;
}
.l__loop .splide__list,
.r__loop .splide__list {
  width: 100%;
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.l__loop .splide__list > li,
.r__loop .splide__list > li {
  width: 100%;
  height: 100%;
}

@media (min-width: 769px) {
  .l__loop {
    width: 175px;
    left: -40px;
  }
}
@media (max-width: 768px) {
  .l__loop {
    width: 68px;
    left: -18px;
  }
}
@media (min-width: 769px) {
  .l__loop .splide__list > li {
    height: 3153px;
  }
}
@media (max-width: 768px) {
  .l__loop .splide__list > li {
    height: 1218px;
  }
}

@media (min-width: 769px) {
  .r__loop {
    width: 153px;
    right: -60px;
  }
}
@media (max-width: 768px) {
  .r__loop {
    width: 64px;
    right: -26px;
  }
}
@media (min-width: 769px) {
  .r__loop .splide__list > li {
    height: 2916px;
  }
}
@media (max-width: 768px) {
  .r__loop .splide__list > li {
    height: 1220px;
  }
}

/*------------------------------------------
sns__container
------------------------------------------*/
.sns__container {
  background: #f5db4e;
  position: relative;
  z-index: 12;
}
@media (min-width: 769px) {
  .sns__container {
    padding: 86px 0 100px;
  }
}
@media (max-width: 768px) {
  .sns__container {
    padding: 20px 0 40px;
  }
}
.sns__container::before, .sns__container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
}
@media (min-width: 769px) {
  .sns__container::before, .sns__container::after {
    background: url("../../../images/charapla-pez/bg_wave_pc.png") repeat-x left bottom/1361px 100%;
    height: 20px;
  }
}
@media (max-width: 768px) {
  .sns__container::before, .sns__container::after {
    background: url("../../../images/charapla-pez/bg_wave_sp.png") repeat-x left bottom/375px 100%;
    height: 10px;
  }
}
@media (min-width: 769px) {
  .sns__container::before {
    top: -20px;
  }
}
@media (max-width: 768px) {
  .sns__container::before {
    top: -10px;
  }
}
.sns__container::after {
  -webkit-transform: scale(1, -1);
          transform: scale(1, -1);
  bottom: -20px;
}
@media (max-width: 768px) {
  .sns__container::after {
    bottom: -10px;
  }
}
.sns__container .sns__info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
@media (min-width: 769px) {
  .sns__container .sns__info {
    gap: 80px;
  }
}
.sns__container .sns__cnt {
  width: 100%;
}
@media (min-width: 769px) {
  .sns__container .sns__cnt {
    width: 422px;
  }
}
.sns__container .cmn__ttl {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: #1e2874;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .sns__container .cmn__ttl {
    gap: 15px;
  }
  .sns__container .cmn__ttl .en,
  .sns__container .cmn__ttl .ja {
    width: auto;
  }
}
.sns__container .sns__img {
  width: 100%;
}
@media (min-width: 769px) {
  .sns__container .sns__img {
    width: 470px;
  }
}
@media (max-width: 768px) {
  .sns__container .sns__img {
    margin-bottom: 20px;
  }
}
.sns__container .sns__txt {
  color: #1e2874;
  letter-spacing: 0;
  line-height: 1.7;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  margin: 20px auto;
}
@media (min-width: 769px) {
  .sns__container .sns__txt {
    font-size: 24px;
    margin: 40px auto 60px;
  }
}
.sns__container .sns__btn {
  width: 100%;
  height: 65px;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .sns__container .sns__btn {
    height: 80px;
  }
}
.sns__container .sns__btn > a {
  border-radius: 40px;
  background: #1e2874;
  -webkit-box-shadow: 3px 3px 0px #2f217e;
          box-shadow: 3px 3px 0px #2f217e;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 1.5;
  position: relative;
  text-align: center;
}
@media (min-width: 769px) {
  .sns__container .sns__btn > a {
    font-size: 18px;
  }
}
.sns__container .sns__btn > a::before, .sns__container .sns__btn > a::after {
  content: "";
  position: absolute;
}
.sns__container .sns__btn > a::before {
  background: url("../../../images/charapla-pez/btn_icon_x.png") no-repeat center/100%;
  width: 40px;
  height: 40px;
  top: 0;
  left: 12px;
  bottom: 0;
  margin: auto;
}
@media (min-width: 769px) {
  .sns__container .sns__btn > a::before {
    width: 50px;
    height: 50px;
    left: 15px;
  }
}
.sns__container .sns__btn > a::after {
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  background: url("../../../images/charapla-pez/icon_arrows.png") no-repeat center/100%;
  width: 17px;
  height: 10px;
  right: 16px;
}
@media (min-width: 769px) {
  .sns__container .sns__btn > a::after {
    width: 25px;
    height: 17px;
    right: 27px;
  }
}

/*------------------------------------------
official__container
------------------------------------------*/
.official__container {
  background: #aee24b;
  padding: 100px 0 80px;
  position: relative;
}
@media (max-width: 768px) {
  .official__container {
    padding: 50px 0 40px;
  }
}
.official__container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 11;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
@media (min-width: 769px) {
  .official__container::after {
    background: url("../../../images/charapla-pez/bg_wave3_pc.png") repeat-x left bottom/1361px 100%;
    height: 20px;
    bottom: -20px;
  }
}
@media (max-width: 768px) {
  .official__container::after {
    background: url("../../../images/charapla-pez/bg_wave3_sp.png") repeat-x left bottom/375px 100%;
    height: 10px;
    bottom: -10px;
  }
}
.official__container .bnr {
  width: 100%;
  margin: 0 auto;
}
@media (min-width: 769px) {
  .official__container .bnr {
    max-width: 700px;
  }
}

/*------------------------------------------
items__container
------------------------------------------*/
.items__container {
  overflow: hidden;
  position: relative;
}
@media (min-width: 769px) {
  .items__container {
    background: #f5db4e url("../../../images/charapla-pez/bg_pez2.png") repeat -8px top/132px 130px;
    padding: 60px 0 150px;
  }
}
@media (max-width: 768px) {
  .items__container {
    background: #f5db4e url("../../../images/charapla-pez/bg_pez2.png") repeat left top/61px 60px;
    padding: 45px 0 80px;
  }
}
.items__container .items__ttl {
  background: #fff;
  border-radius: 50px;
  color: #1e2874;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  position: relative;
}
@media (min-width: 769px) {
  .items__container .items__ttl {
    width: 394px;
    height: 98px;
    font-size: 23px;
  }
}
@media (max-width: 768px) {
  .items__container .items__ttl {
    width: 260px;
    height: 65px;
    font-size: 15px;
  }
}
.items__container .items__ttl::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 24px solid white;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
@media (max-width: 768px) {
  .items__container .items__ttl::before {
    bottom: -13px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 15px solid white;
  }
}
.items__container .items__btn {
  width: 300px;
  height: 70px;
  margin: 30px auto 0;
}
@media (min-width: 769px) {
  .items__container .items__btn {
    width: 100%;
    max-width: 560px;
    height: 90px;
    margin: 50px auto 0;
  }
}
.items__container .items__btn > a {
  border-radius: 45px;
  background: #1e2874;
  -webkit-box-shadow: 3px 3px 0px #2f217e;
          box-shadow: 3px 3px 0px #2f217e;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  font-size: 28px;
  position: relative;
}
@media (min-width: 769px) {
  .items__container .items__btn > a {
    border-radius: 60px;
    font-size: 34px;
  }
}
.items__container .items__btn > a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  background: url("../../../images/charapla-pez/icon_arrows.png") no-repeat center/100%;
  width: 17px;
  height: 10px;
  right: 16px;
}
@media (min-width: 769px) {
  .items__container .items__btn > a::after {
    width: 25px;
    height: 17px;
    right: 27px;
  }
}
.items__container .ill--item {
  position: absolute;
  opacity: 0;
}
.items__container .ill--item.type--1 {
  z-index: 2;
  -webkit-transform: rotate(-180deg);
          transform: rotate(-180deg);
  left: -24px;
}
@media (min-width: 769px) {
  .items__container .ill--item.type--1 {
    width: 400px;
    height: 330px;
    top: -95px;
  }
}
@media (max-width: 768px) {
  .items__container .ill--item.type--1 {
    width: 132px;
    height: 109px;
    top: -36px;
  }
}
@media (min-width: 769px) {
  .items__container .ill--item.type--2 {
    width: 368px;
    height: 344px;
    bottom: -110px;
    right: -5px;
  }
}
@media (max-width: 768px) {
  .items__container .ill--item.type--2 {
    width: 117px;
    height: 110px;
    right: 0;
    bottom: -30px;
  }
}
.items__container.is-active .ill--item.type--1 {
  opacity: 1;
  -webkit-animation: 1s forwards ease-out normal bounceInDown;
          animation: 1s forwards ease-out normal bounceInDown;
}
.items__container.is-active .ill--item.type--2 {
  opacity: 1;
  -webkit-animation: 1s forwards ease-out normal bounceInUp;
          animation: 1s forwards ease-out normal bounceInUp;
}

.nothing__txt {
  color: #1E2874;
  text-align: center;
  font-weight: 700;
  font-size: 24px;
}
@media (max-width: 768px) {
  .nothing__txt {
    font-size: 15px;
  }
}

.cmn-global-nav .menu-list a,
.cmn-page-footer .footer-bottom .ft-bottom-nav li a{
  color: #084e96;
}

.charapla-news-item .image {
  position: relative;
	width: 100%;
  margin-bottom: 15px;
  padding: 75% 0 0;
}
.charapla-news-item .image figure {
  width: 100%;
  height: 100%;
  border: #F0F5F7 1px solid;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.charapla-news-item .image img {
  width: 100%;
  border-radius: 0;
  vertical-align: top;
}
@media (max-width: 768px) {
  .charapla-news-item .image {
    width: 130px;
    padding-top: calc(130px * .75);
    margin: 0 0 10px 0;
  }
  .charapla-news-item .image figure {
    border-radius: 15px;
  }
  .charapla-news-item .desc {
    width: calc(100% - 145px);
  }
}