/*===============================*/
/* variable */
/*===============================*/
:root {
  --color-primary: #49B5A5;
  --color-primary-sub:#00AFD0;
  --color-secondary: #1171DE;
  --color-secondary-sub:#CCEFF6;
  --color-accent: #FE0;
  --color-deco-primary: #DBF0ED;
  --color-bg-base: #ffffff;
  --color-bg-sub: #CFE2F8;
  --color-link: #00b8ff;
}

/*===============================*/
/* svg symbol */
/*===============================*/

.deco-diamond {
  width: 2.5rem;
  height: 2.5rem;
  fill: var(--color-primary);
  margin-right: 1rem;
}

.deco-box {
  display: flex;
  gap:6rem;
  justify-content: center;
}

.deco-box .deco-diamond {
  margin-right: 0;
}

.cp-menu .deco-box  {
  padding-bottom: 3rem;
}

.cp-menu .deco-box .deco-diamond {
  fill:var(--color-secondary-sub);
}

.movie .deco-box  {
  padding-bottom: 8.8rem;
  background-color: var(--color-bg-base);
}

.movie .deco-box .deco-diamond {
  fill:var(--color-deco-primary);
}

/*===============================*/
/* layout */
/*===============================*/

.layout__side--left .pazudora-logo--pc {
  position: absolute;
  top: 4%;
  width: clamp(18rem, 14.644vw + 30.042px, 32rem);
  right: clamp(1.5rem, 32.695vw - 309.55px, 31.8rem);
  max-width: calc(100% - 1.5rem); 
  z-index:2;
}


.layout__side--left {
  --side-bg: url(../img/pc-bg-left.jpg);
  background-position: bottom right;
}

.layout__side--right {
  --side-bg: url(../img/pc-bg-right.jpg);
  background-position: bottom left;
}

.layout__side-inner {
  background-image: linear-gradient(var(--bg-deg), rgba(255, 255, 255, 0.3), transparent);
  background-size: 50px 100%;
  background-repeat: no-repeat;
}

.layout__side--left .layout__side-inner {
  --bg-deg:270deg;
  background-position: top right;
}

.layout__side--right .layout__side-inner {
  --bg-deg:90deg;
  background-position: top left;
}

.deco-character--01 {
  position: absolute;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}

/* =========================================
   左側のキャラクター
========================================= */
.layout__side--left .deco-character--01 {
  width: calc(var(--rw) * (339 / var(--bg-w)));
  aspect-ratio: 678 / 642;
  bottom: calc(var(--rh) * (383 / var(--bg-h)));
  right: calc(var(--rw) * (-106 / var(--bg-w)));
  background-image: url("../img/pc-left-character01.png");
  animation: floating-up 4s ease-in-out infinite alternate-reverse;
  z-index: 2;
}

/* =========================================
   右側のキャラクター
========================================= */
.layout__side--right .deco-character--01 {
  width: calc(var(--rw) * (132 / var(--bg-w)));
  aspect-ratio: 276 / 534;
  bottom: calc(var(--rh) * (160 / var(--bg-h)));
  left: calc(var(--rw) * (-11 / var(--bg-w)));
  background-image: url("../img/pc-right-character01.png");
  animation: floating-down 4s ease-in-out infinite alternate-reverse;
  z-index: 2;
}

@media screen and (max-width: 1023px) {
  .pazudora-logo--pc {
    display: none;
  }
}

@media screen and (max-width: 1200px) {
  .layout__side--left .deco-character--01,
  .layout__side--right .deco-character--01 {
    display: none;
  }
  .layout__side--left {
    --side-bg: url(../img/pc-bg-left-sm.jpg);
  }
  
  .layout__side--right {
    --side-bg: url(../img/pc-bg-right-sm.jpg);
  }
}

/*===============================*/
/* fv */
/*===============================*/

.fv {
  position: relative;
}

.fv::before {
  content: "";
  background-image:linear-gradient(to bottom, transparent, var(--color-primary-sub));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  max-width: 560px;
  width: 100%;
  max-height: 72px;
  height: 100%;
  position: absolute;
  bottom: -1px;
  z-index: 3;
}

.fv__catch {
  width: 71%;
  position: absolute;
  top: 1.5rem;
  left: 19px;
  z-index: 4;
}

.fv__content {
  width: 100%;
  position: absolute;
  bottom: -28rem;
  z-index: 4;
}

.fv__title {
  margin: 0 auto 1.5rem;
}

.bg-video {
  position: relative;
  width: 100%;
  height: 100%;
}

.bg-video__player {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 0;
}

/*===============================*/
/* intro */
/*===============================*/

.intro {
  padding-top: 28rem;
  background-color: var(--color-primary-sub);
}

.intro__period-img {
  width:47.2rem;
  margin: 0 auto;
}

.intro__lead-line {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: .8rem;
}

.intro__lead-line:last-child {
  margin-bottom: 2.5rem;
}

.intro__lead-line em {
  font-style: normal;
}

.intro__highlight {
  background-color:var(--color-bg-inverse);
  color:var(--color-text-inverse);
  padding: .2rem .6rem 0.4rem;
}

.deco__highlight {
  background-color:var(--color-bg-inverse);
  color:var(--color-text-inverse);
  padding:0 .6rem;
}

/*===============================*/
/* menu */
/*===============================*/

.cp-menu__list {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding:0 1.6rem;
  gap:1rem;
  margin-bottom: 2.5rem;
}

.cp-menu__item {
/* ジャンプ時間(0.4秒) + 待機時間(3秒) = 合計3.4秒で設定 */
  animation-name: jump;
  animation-duration: 3.4s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}

.cp-menu__item.is-item--1 {
  animation-delay: 0s;
}

.cp-menu__item.is-item--2 {
  animation-delay: 0.5s;
}

@keyframes jump {
  0% { 
    transform: translateY(0); 
  }
  3.5% {
    transform: translateY(-15px); 
  }
  7% {
    transform: translateY(0); 
  }
  9.5% {
    transform: translateY(-4px);
  }
  12% {
    transform: translateY(0); 
  }
  100% { 
    transform: translateY(0); 
  }
}

/*===============================*/
/* section */
/*===============================*/
.contents-section {
  padding-bottom: 4rem;
  background-color: var(--color-bg-sub);
}

.section-title {
  width: 100%;
  height: 9.9rem;
  position: relative;
  text-align: center;
}

.section-title__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--color-bg-base);
}
.section-title__bg::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--title-bg-img, none); 
  background-size: var(--title-bg-size, auto 100%);
}
.section-title--movie {
  --title-bg-img: url(../img/section-title-bg-movie.png);
  --title-bg-size: 38.3rem 100%;
}
.section-title--campaign {
  --title-bg-img: url(../img/section-title-bg-campaign.png);
  --title-bg-size: 56rem 100%;
}

.section-title__heading {
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1.4rem;
  left: 0;
  width: 100%;
  height: 10rem;
  z-index: 2;
}

.section-title__heading-img {
  display: block;
  width: 16rem;
  height: 3rem;
}

#cp-wrapper .section-title__main {
  color:var(--color-secondary);
  background-color:var(--color-bg-base);
  border:solid .2rem var(--color-secondary);
}

.section-title__main {
  font-size: 2rem;
  letter-spacing: -0.1em;
  padding: 0 2.5rem;
  color:var(--color-primary);
  background-color:var(--color-bg-base);
  border:solid .2rem var(--color-primary);
}

#cp-wrapper {
  padding-bottom: 8rem;
}

.section-read {
  color:var(--color-primary);
  font-size:var(--font-size-xlarge);
  text-align: center;
  font-weight: var(--font-weight-bold);
  margin-bottom: 1.6rem;
  padding-top: 0.7rem;
  line-height: 1.35;
}

/*===============================*/
/* movie */
/*===============================*/
.movie {
  position: relative;
  overflow: hidden;
  padding-top: 9rem;
  background-color: var(--color-bg-base);
}

.movie__inner {
  position: relative;
  padding: 0 4% 23rem;
  background-image: 
    url(../img/pattern-dot.png), 
    linear-gradient(to bottom, #ffffff 0%, 14%, #DBF0ED, 80%, #ffffff 90%);
  background-size: 1.4rem 1.4rem, 100% 100%;
  background-position: center, center top;
  background-repeat: repeat, no-repeat;
  background-color: #DBF0ED;
}

.movie__title {
  max-width: 80%;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
@media screen and (min-width:431px){
  .movie__title {
    max-width: 76%;
  }
}

.movie__box {
  position: relative;
  z-index: 999;
}

/* --YouTube-- */
.video-embed {
  width: 100%;
  margin: 0 auto 5rem;
}

.video-embed__inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.video-embed__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*===============================*/
/* cp */
/*===============================*/

.cp {
  position: relative;
}

.cp--01 {
  --theme-color: var(--color-bg-base);
  padding-bottom: 8rem;
}

.cp__title {
  font-size:var(--font-size-xlarge);
  margin: 0 1rem 1.5rem;
  color: var(--color-text-inverse);
  background-color:var(--color-secondary);
  padding: .55rem 0 .64rem 0;
  text-align: center;
  border-radius: 9999px;
}

.cp__read {
  color: var(--color-text-base);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.5;
  text-align: center;
}

.cp__read--mb-md {
  margin-bottom: 2rem;
}

.cp__img {
  margin-bottom: 2rem;
  padding:0 1rem;
}

.cp__text {
  font-size:var(--font-size-large);
  font-weight: var(--font-weight-bold);
  margin-bottom: 4rem;
  padding:0 1rem;
}

.cp__prize {
  padding: var(--space-md);
}

.cp__note {
  margin-top: 1rem;
}

.cp__note-list {
  color: var(--color-text-base);
  font-size: var(--font-size-annotation);
}

.cp__note-list li {
  font-weight: var(--font-weight-medium) !important;
  text-indent: -1em;
  padding-left: 1em;
}

/*============ cp-method ============*/
.cp-method__content {
  padding: 0 1rem;
}

.cp-method__block {
  margin-bottom: 4rem;
}
.cp-method__block:last-child {
  margin-bottom: 0;
}

.cp-method__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1rem;
  padding-top:1rem;
  padding-bottom: .8rem;
  border-bottom: solid 0.2rem var(--color-secondary);
}

.cp-method__header .deco-diamond {
  width: 3.5rem;
  height: 3.5rem;
  padding-left:1rem;
  fill: var(--color-secondary);
}

.cp-method__heading {
  color: var(--color-secondary);
  font-size: var(--font-size-large);
  text-align: left;
}

.cp-method__text {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-base);
}

.cp-method__text--mb-sm {
  margin-bottom: 1rem;
}

.cp-method__note {
  color: var(--color-text-base);
  font-size: var(--font-size-annotation);
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: -0.05rem;
  text-indent: -1em;
  padding-left: 1em;
}

/*============ step ============*/
.step-board {
  background-color: var(--color-bg-base);
  border: solid .3rem var(--color-secondary);
  border-radius: 16px;
  padding: 1.9rem 1.5rem;
  margin-bottom: 1rem;
}
.step-board:last-child {
  margin-bottom: 0;
}

.step-board__icon {
  display: inline-block;
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse); 
  background-color: var(--color-secondary);
  border-radius: 9999px;
  padding: .5rem 2.5rem .4rem;
  margin-bottom: 2rem;
  line-height: 1;
}

.step-board__text {
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-bold);
  text-align: center;
  line-height: 1.5;
}

.step-board__text--mb-sm {
  margin-bottom: 1rem;
}

.step-board__text--mb-lg {
  margin-bottom: 3rem;
}

.step-board__img {
  margin-bottom: 2rem;
}

.step-board__note {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 3rem;
}

.btn__icon--arrow {
  max-width: 40px;
  margin: 0 auto;
}

/*===============================*/
/* caution */
/*===============================*/
.caution {
  position: relative;
}

/*===============================*/
/* c-note */
/*===============================*/
.c-note {
  position: relative;
  height: 38rem;
  border: 0.1rem solid var(--color-text-base);
  background-color: var(--color-bg-base);
  box-sizing: border-box;
  padding: 1rem .7rem 1rem 2rem;
}

.c-note__inner {
  height: 36rem;  
  box-sizing: border-box;
  overflow-y: auto;
  padding-right: 2rem;
}

.c-note__inner::-webkit-scrollbar {
  width: 8px; 
}

.c-note__inner::-webkit-scrollbar-track {
  background: transparent; 
}

.c-note__inner::-webkit-scrollbar-thumb {
  background-color: #666;
  border-radius: 9999px;
}

.c-note__inner::-webkit-scrollbar-button {
  display: none; /* 上下の矢印ボタンを非表示にする */
}

/* --- 見出し・テキスト設定 --- */
h4.c-note__title {
  font-size: var(--font-size-xsmall);
  font-weight: var(--font-weight-bold);
  text-align: center;
  margin-bottom: 2.4rem;
}

.c-note__heading,
.c-note__item {
  font-size: var(--font-size-xsmall);
  line-height: 1.6;
  letter-spacing: 0.02rem;
  font-feature-settings: "palt";
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: .5rem;
}

.c-note__heading {
  font-weight: var(--font-weight-bold);
}

.c-note__item {
  font-weight: var(--font-weight-regular);
}

.c-note__read {
  font-weight: var(--font-weight-regular);
  margin-bottom: 3rem;
}

.c-note__item:last-child {
  margin-bottom: 3rem;
}


.u-link-border {
  border-bottom: 0.1rem solid var(--color-text-base);
}


/*===============================*/
/* gimmick */
/*===============================*/

/*Google Chrome、Safariへの対応*/
.contents_box::-webkit-scrollbar {
  display: none;
}

.fancybox-is-open .fancybox-bg {
  background-color: var(--color-deco-primary);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
}

.fancybox-slide {
  padding: 48px 16px;
}

.fancybox-button, .fancybox-button:link, .fancybox-button:visited
 {
    color: var(--color-deco-primary);
}

.fancybox-button {
    background: var(--color-primary);
}

@media screen and (min-width: 1106px) {
  .fancybox-slide--video .fancybox-content {
    width: 1000px !important;
    height: 562.5px !important;
  }
}

/*============ js data-show ============*/
[data-show] {
  transition: opacity 0.5s ease, transform 0.8s ease;
}

[data-show="false"] {
  opacity: 0;
  transform: translateY(50px);
}

[data-show="true"] {
  opacity: 1;
  transform: translateY(0);
}

/*============ js data-pop ============*/
[data-pop] {
  transition: opacity 0.5s ease, transform 0.8s ease;
}

[data-pop="false"] {
  opacity: 0;
}

[data-pop="true"] {
  opacity: 1;
  animation: jump 0.4s ease-out;
}

/* ===============================
   Button
=============================== */
.btn__pagetop {
  width: 22.4rem;
  margin:0 auto;
}

.deco-bg__gradation {
  background-image: linear-gradient(to bottom, #ffffff, var(--color-deco-primary));
  padding:3rem 0 1.9rem;
}

.deco-bg__gradation--intro {
  background-image: linear-gradient(to top, #ffffff 45%, var(--color-primary-sub));
}

.deco-bg__gradation--cp01 {
  background-image: linear-gradient(to bottom, #ffffff 45%, var(--color-bg-sub));
  padding: 4.5rem 0 2rem;
}

.deco-drop {
  --drop-width: auto;
  --drop-top: auto;
  --drop-left: auto;
  --drop-right:auto;

  width: var(--drop-width);
  height: auto;
  position: absolute;
  top:var(--drop-top);
  right: var(--drop-right);
  left: var(--drop-left);
  pointer-events: none; 
  will-change: transform;
  z-index: 10;
}

.deco-drop--red {
  --drop-width: 13.4rem;
  --drop-top: 24.5rem;
  --drop-right: 0;
}

.deco-drop--purple {
  --drop-width: 8.6rem;
  --drop-top: -11.5rem;
  --drop-left: 0;
}

.deco-drop--blue {
  --drop-width: 9rem;
  --drop-top: 79.5rem;
  --drop-left: 0;
}

.deco-drop--green {
  --drop-width: 10rem;
  --drop-top: 49.5rem;
  --drop-right: 0;
}

.deco-drop--yellow {
  --drop-width: 8rem;
  --drop-top: 105rem;
  --drop-left: 12rem;
}

@keyframes floating-up {
  0% {
    transform: translateY(-6%);
  }

  100% {
    transform: translateY(2%);
  }
}

@keyframes floating-down {
  0% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(-6%);
  }
}