html,
body,
#wrapper,
#contents,
.lp-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.pc{
  display: block;
}

.sp{
  display: none;
}

.introduce.pc{
  display: flex;
}

.introduce.sp{
  display: none;
}
.birth-message.pc{
  display: flex;
}

.birth-message.sp{
  display: none;
}

.anker-wrap {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 101;
}

.anker {
  display: flex;
}
.anker-wrap.is-show{
  .anker{
  gap: calc(30 / 1440 * 100vw);
  }
}
.anker-wrap.is-small{
  .anker{
  gap: calc(10 / 1440 * 100vw);
  }
}
.anker img {
  width: calc(170 / 1440 * 100vw);
  transition: width 0.6s ease, transform 0.6s ease;
  filter: drop-shadow(0px 1px 4px rgba(0,0,0,0.4));
}

.anker-wrap.is-small .anker img {
  width: calc(90 / 1440 * 100vw);
}
.anker-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(20px);

  transition:
    opacity 0.5s ease,
    transform 0.5s ease,
    visibility 0.5s;
  }

.anker-wrap.is-show {
  gap: calc(10 / 1440 * 100vw);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);}

/* hover */
.anker a:hover img {
  transform: translateY(-10px);
}


.fix-top {
  position: fixed;
  z-index: 100;
  right: 30px;
  bottom: 30px;
  width: 110px;
}

.fix-top img {
  transition: transform 0.3s ease;
}

.fix-top a:hover img {
  transform: translateY(-10px);
}
body {
	font-family: YakuHanJP, "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin: 0;
}
.top {
  background-color: #ffe100 ;
  position: relative;
  overflow: hidden;
  min-height: 85vh;
  padding: 230px 0;
}

.top-mv {
  position: relative;
  left: 50%;
  width: 1400px;
  height: 650px;
  transform: translateX(-50%);
  padding-top: 200px;
}

.top-mv .mv-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  height: auto;
    transform: translate(-50%, -45%);
  opacity: 0;
  animation:anime-bg 1s .3s forwards;
}
@keyframes anime-bg {
  0% {
    opacity: 0;
    transform: translate(-50%, -45%);
  }
  100% {
    opacity: 1;
   transform: translate(-50%, -50%);
  }
}
.top-mv .mv-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(581 * 1px);
  height: 500px;
  transform: translate(-50%, -50%);
  mask-image: url(../img/mv-circle.webp);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  background-color: #fff;
}

.top-mv .mv-chara {
  position: absolute;
  top: 55%;
  left: 50%;
  width: calc(340 * 1px);
  height: auto;
    transform: translate(-50%, 145%);
  animation:anime-chara 1.4s .8s  forwards;
}

@keyframes anime-chara {
  0% {
    transform: translate(-50%, 100%) scale(0);
  }
  50% {
  transform: translate(-50%, -33%);
  }
  75% {
    transform: translate(-50%, -33%);
  }
  80% {
    transform: translate(-50%, -33%) rotate(1deg);
  }
  85% {
    transform: translate(-50%, -33%) rotate(-1deg);
  }
  90% {
    transform: translate(-50%, -33%) rotate(1deg);
  }
  95% {
    transform: translate(-50%, -33%) rotate(-1deg);
  }
  100% {
    transform: translate(-50%, -33%);
  }
}

.top-mv .mv-balloon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(153 * 1px);
  height: auto;
  transform: translate(85%, -180%) scale(0);
  transform-origin: left bottom;
  animation:anime-balloon .3s 2.5s forwards;
}

@keyframes anime-balloon {
  0% {
  transform: translate(85%, -180%) scale(0);
  }
  100% {
  transform: translate(85%, -180%);
  }
}

.top-mv .mv-title {
  position: absolute;
  top: 52%;
  left: 50%;
  width: calc(748 * 1px);
  height: auto;
  transform: translate(-50%, -200%) scale(0);
  animation:anime-title .8s 3.1s forwards;
}
@keyframes anime-title {
  0% {
  transform: translate(-50%, 50%);
  }
  100% {
  transform: translate(-50%, -200%);
  }
}


.top-bottom{
	display: flex;
	justify-content: center;
	position: relative;
    bottom: calc(-250 / 1440 * 100vw);
	width: 100%;
}

.top-cloud{
	position: absolute;
  bottom: -1px;
	width: 100%;
}

.top-anker{
	img{
    width: calc(180 / 1440 * 100vw);
	}
	position: relative;
    bottom: calc(-85 / 1440 * 100vw);
	z-index: 2;
}

/* introduce */
.introduce{
	padding-top: calc(80 / 1440 * 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(100 / 1440 * 100vw);
	background-color: #fff;
}
.introduce-wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.introduce-title{
    width: calc(541 / 1440 * 100vw);
}
.introduce-subtitle{
    width: calc(345 / 1440 * 100vw);
}
.introduce-text{
    font-size: calc(24 / 1440 * 100vw);
    font-weight: 700;
    line-height: 2;
    margin-top: 0;
}
.introduce-spin img{
    width: calc(265 / 1440 * 100vw);
}

/* card */
.cards{
  position: relative;
  padding-top: 100px;
  padding-bottom: calc(300 / 1440 * 100vw);
}

.cards img {
  max-width: 100%;
}

.cards h2 {
  display: flex;
  justify-content: center;
  width: 650px;
  margin:  0 auto;
}
.cards__wrap {
  width: 800px;
  margin:  40px auto 0;
}
.cards__box {
    position: sticky;
    top: 20px;
    display: flex;
    justify-content: center;
    margin-bottom: calc(40 / 1440 * 100vw);
}
.cards-cloud{
  position: absolute;
  bottom: -2px;
}

.acco{
  background-color: #ffe100;
  padding-bottom: calc(90 / 1440 * 100vw);
}

.acco-top{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.acco-askme{
	width: calc(186 / 1440 * 100vw);
}

.acco-title{
	width: calc(733 / 1440 * 100vw);
}

.faq-item {
  width: calc(848 / 1440 * 100vw);
  margin: 0 auto 20px;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(30 / 1440 * 100vw);

  padding:
    calc(10 / 1440 * 100vw)
    calc(10 / 1440 * 100vw)
    calc(10 / 1440 * 100vw)
    calc(50 / 1440 * 100vw);

  background: #17ace3;

  border: calc(2 / 1440 * 100vw) solid #000;
  border-radius: calc(60 / 1440 * 100vw);

  cursor: pointer;
}

.faq-q-img {
  width: calc(38 / 1440 * 100vw);
  flex-shrink: 0;
}

.faq-q-text {
  flex: 1;
  text-align: left;
  color: #000;
  font-size: calc(24 / 1440 * 100vw);
  font-weight: bold;
}


/* icon */

.faq-icon {
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  width: calc(80 / 1440 * 100vw);
  flex-shrink: 0;
}

.faq-icon img {
  display: block;

  width: calc(50 / 1440 * 100vw);
  height: calc(50 / 1440 * 100vw);
}


/* + / - */

.faq-icon {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

.faq-icon img {
  position: relative;
  z-index: 1;

  display: block;
  width: 50px;
  height: 50px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 16px;
  height: 4px;

  background: #fff;
  border-radius: 10px;

  transform: translate(-50%, -50%);

  /* SVG보다 위 */
  z-index: 2;
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-q.is-open .faq-icon::after {
  opacity: 0;
}

/* 답변 */

.faq-a {
  display: none;
  position: relative;
  margin-top: calc(-2 / 1440 * 100vw);
  padding:
    calc(45 / 1440 * 100vw)
    calc(50 / 1440 * 100vw);

  background: #fff;
  border: calc(2 / 1440 * 100vw) solid #000;
  border-radius: calc(40 / 1440 * 100vw);
  overflow: hidden;
}

.faq-a-img {
  position: absolute;

  top: calc(40 / 1440 * 100vw);
  left: calc(50 / 1440 * 100vw);

  width: calc(38 / 1440 * 100vw);
}

.faq-a-text {
  padding-left: calc(68 / 1440 * 100vw);
  font-size: calc(18 / 1440 * 100vw);
  line-height: 1.6;
}

.faq-a-text--bold {
  font-weight: bold;
}


.faq-chara {
  position: absolute;
  right: calc(70 / 1440 * 100vw);
  bottom: 0;
  width: calc(145 / 1440 * 100vw);
}

.faq-chara.--w125{
  width: calc(125 / 1440 * 100vw);
}

.faq-q.--pink{
  background-color: #fa3257 !important;
}
.faq-q.--green{
  background-color: #45c42b !important;
}
.faq-q.--orange{
  background-color: #ff930f !important;
}

.gallery{
  background-color: #ffe100;
  padding-top: calc(90 / 1440 * 100vw);
}

.gallery-top{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-bg{
  position: absolute;
  width: 100%;
}

.gallery-chara{
  width: calc(192 / 1440 * 100vw);
  margin-bottom: 10px;
}

.gallery-title{
  width: calc(579 / 1440 * 100vw);
  margin-bottom: 30px;
}


.chara-row {
  overflow: hidden;
  width: 100%;
}

.chara-track {
  display: flex;
  width: max-content;
  gap: 20px;
}

.chara-item {
  width: 180px;
  flex-shrink: 0;
  cursor: pointer;
}

.chara-row-top .chara-track {
  animation: slide-left 30s linear infinite;
}

.chara-row-bottom .chara-track {
  animation: slide-right 30s linear infinite;
}

@keyframes slide-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-1200px);
  }
}

@keyframes slide-right {
  from {
    transform: translateX(-1400px);
  }

  to {
    transform: translateX(0);
  }
}

.chara-modal {
  display: none;

  position: fixed;
  inset: 0;

  z-index: 9999;
}

.chara-modal-bg {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, .6);
}

.chara-modal-inner {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

.chara-modal-img {
  max-height: calc(500 / 1440 * 100vw);
  max-width: none;
}

.chara-modal-close {
  position: absolute;
  top: calc(-5 / 1440 * 100vw);
  right: 0;
  z-index: 100;
  width: calc(50 / 1440 * 100vw);
  height: calc(50 / 1440 * 100vw);

  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.chara-modal-close img {
  display: block;
  width: 100%;
  height: 100%;
}

.birth{
  position: relative;
  background-color: #f2f2f2;
}
.birth-top{
  width: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
}

.birth-bottom{
  width: 100%;
  position: absolute;
  bottom: -1px;
  pointer-events: none;
}

.birth-title-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.birth-chara{
  width: calc(236 / 1440 * 100vw);
  margin-top: 100px;
  margin-bottom: 20px;
}

.birth-title{
  width: calc(711 / 1440 * 100vw);
}

.birth-pink{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.birth-pink-bg{
  position: relative;
  z-index: 0;
  width: calc(848 / 1440 * 100vw);
}
.birth-pink-title{
  position: absolute;
  top: calc(60 / 1440 * 100vw);
  left: calc(530 / 1440 * 100vw);
  z-index: 1;
  width: calc(380 / 1440 * 100vw);
}
.birth-pink-text{
  position: absolute;
  top: calc(100 / 1440 * 100vw);
  font-size: calc(18 / 1440 * 100vw);
  text-align: center;
  line-height: 2;
}
.birth-pink01{
  position: absolute;
  bottom: calc(-80 / 1440 * 100vw);
  left: calc(350 / 1440 * 100vw);
  width: calc(150 / 1440 * 100vw);
}
.birth-pink02{
  position: absolute;
  bottom: calc(100 / 1440 * 100vw);
  right: calc(250 / 1440 * 100vw);
  width: calc(192 / 1440 * 100vw);
}

.birth-green{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.birth-green-bg{
  position: relative;
  z-index: 0;
  width: calc(848 / 1440 * 100vw);
}
.birth-green-title{
  position: absolute;
  top: calc(60 / 1440 * 100vw);
  z-index: 1;
  width: calc(285 / 1440 * 100vw);
}
.birth-green-text{
  position: absolute;
  top: calc(100 / 1440 * 100vw);
  font-size: calc(18 / 1440 * 100vw);
  text-align: center;
  line-height: 2;
}
.birth-green01{
  position: absolute;
  bottom: calc(36 / 1440 * 100vw);
  left: 30%;
  width: calc(530 / 1440 * 100vw);
}

.birth-message{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(50 / 1440 * 100vw);
    margin-top: calc(70 / 1440 * 100vw);
  }
.birth-message-left{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.birth-message-left img{
  width: calc(436 / 1440 * 100vw);
}
.birth-message-right img{
  width: calc(160 / 1440 * 100vw);
  margin-top: calc(-20 / 1440 * 100vw);
}
.birth-message-balloon{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 30px;
}
.birth-message-balloon img{
  position: absolute;
  z-index: 1;
  width: calc(516 / 1440 * 100vw);
  max-width: none;
}
.birth-message-text{
  position: relative;
  z-index: 2;
  width: calc(411 / 1440 * 100vw);
  color: #fff;
  font-weight: bold;
  font-size: calc(18 / 1440 * 100vw);
}
.birth-sns{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(80 / 1440 * 100vw);
    padding-bottom: calc(120 / 1440 * 100vw);

  }
.birth-sns-title{
    font-size: calc(18 / 1440 * 100vw);
    font-weight: bold;
}
.birth-sns-wrap{
  display: flex;
  gap: calc(25 / 1440 * 100vw);
}
.birth-sns-x{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  width: calc(150 / 1440 * 100vw);
  height: calc(50 / 1440 * 100vw);
  color: #fff;
  gap: calc(15 / 1440 * 100vw);
  border-radius: 6px;
  box-shadow: 0px 5px #000;
  img{
    width: calc(25 / 1440 * 100vw);
  }
}
.birth-sns-x:hover{
  opacity: 0.6;
  transition: all .5s;
}
.birth-sns-facebook{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1f69b9;
  width: calc(150 / 1440 * 100vw);
  height: calc(50 / 1440 * 100vw);
  color: #fff;
  gap: calc(15 / 1440 * 100vw);
  border-radius: 6px;
  box-shadow: 0px 5px #0d4e86;
  img{
    width: calc(25 / 1440 * 100vw);
  }
}
.birth-sns-facebook:hover{
  opacity: 0.6;
  transition: all .5s;
}
.birth-sns-wrap a {
  text-decoration: none;
}
.birth-sns-line{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #06c755;
  width: calc(150 / 1440 * 100vw);
  height: calc(50 / 1440 * 100vw);
  color: #fff;
  gap: calc(15 / 1440 * 100vw);
  border-radius: 6px;
  box-shadow: 0px 5px #00913b;

  img{
    width: calc(25 / 1440 * 100vw);
  }
}
.birth-sns-line:hover{
  opacity: 0.6;
  transition: all .5s;
}

.banner{
  background-color: #ffe100;
  padding: calc(80 / 1440 * 100vw) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.banner-img{
  width: calc(637 / 1440 * 100vw);
}
.banner-bye{
  width: calc(750 / 1440 * 100vw);
  margin-top: calc(70 / 1440 * 100vw);
}
.anniversary{
  display: flex;
  justify-content: center;
  margin: calc(80 / 1440 * 100vw) auto !important;
}
.anniversary img{
  display: flex;
  justify-content: center;
  width: calc(637 / 1440 * 100vw);
}
.anniversary a{
  display: inline-block;
}
@media screen and (max-width: 768px) {
.pc{
  display: none;
}

.sp{
  display: block;
}
.introduce.pc{
  display: none;
}

.introduce.sp{
  display: block;
}
.birth-message.pc{
  display: none;
}

.birth-message.sp{
  display: block;
}
.anker-wrap{
  bottom: 5px;
    gap: 8px;
}

.anker{
  display: flex;
  gap: 8px;
}
.anker img{
  width: calc(80 / 390 * 100vw);
  max-width: none !important;
}
  .anker-wrap {
    top: calc(420 / 390 * 100vw);
    bottom: auto;
    transition:
      top 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.3s ease;
      gap: 8px;
  }

  .anker-wrap.is-small {
    top: calc(95% - 90px);
    gap: 8px;
  }
  .anker-wrap.is-small.is-show {
    left: 60%;
  }

.anker-wrap.is-small .anker img {
  width: calc(60 / 390 * 100vw) !important;
  max-width: none !important;
}
.anker-wrap.is-small {
    .anker {
        gap: calc(10 / 390 * 100vw);
    }
}

.fix-top{
  position: fixed;
  z-index: 100;
  right: calc(10 / 390 * 100vw);
  width: calc(88 / 390 * 100vw);
  padding-bottom: 100px;
}
.fix-top {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.fix-top.is-show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.top {
  background-color: #ffe100 ;
  position: relative;
  overflow: hidden;
  min-height: calc(250 / 390 * 100vw);
  padding: calc(160 / 390 * 100vw) 0 calc(130 / 390 * 100vw);
}

.top-mv {
  position: relative;
  left: 50%;
  width: calc(390 / 390 * 100vw);
  height: calc(125 / 390 * 100vw);
  transform: translateX(-50%);
  padding-top: calc(240 / 390 * 100vw);
}

.top-mv .mv-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  object-fit: cover;
  height: auto;
  transform: translate(-50%, -50%);
}
.top-mv .mv-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(248 / 390 * 100vw);
  height: 100%;
  transform: translate(-50%, -50%);
}
.top-mv .mv-chara {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(140 / 390 * 100vw);
  height: auto;
  transform: translate(-50%, 145%);
  animation:anime-chara 1.4s .8s  forwards;
  
}
.top-mv .mv-balloon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(84 / 390 * 100vw);
  height: auto;
  transform: translate(85%, -180%) scale(0);
}
.top-mv .mv-title {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(301 / 390 * 100vw);
  height: auto;
  transform: translate(-50%, -200%) scale(0);
}

.top-bottom{
	display: flex;
	justify-content: center;
	position: relative;
    bottom: calc(-250 / 390 * 100vw);
	width: 100%;
}

.top-cloud{
	position: absolute;
  bottom: -1px;
	width: 100%;
}

.top-anker{
	img{
    width: calc(180 / 390 * 100vw);
	}
	position: relative;
    bottom: calc(-85 / 390 * 100vw);
	z-index: 2;
}

/* introduce */
.introduce{
	padding-top: calc(80 / 390 * 100vw);
	display: flex;
  flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(100 / 390 * 100vw);
	background-color: #fff;
}
.introduce-wrap{
	display: flex;
	flex-direction: column;
	align-items: center;
}
.introduce-title{
    width: calc(350 / 390 * 100vw);
}
.introduce-subtitle{
    width: calc(225 / 390 * 100vw);
}
.introduce-text-wrap{
  display: flex;
  justify-content: center;
  margin-top: calc(45 / 390 * 100vw);
}
.introduce-text{
    font-size: calc(20 / 390 * 100vw);
    font-weight: 700;
    text-align: center;
    line-height: 2;
}
.introduce-spin img{
    width: calc(160 / 390 * 100vw);
}
.introduce-spin{
    width: calc(160 / 390 * 100vw);
    margin-top: calc(40 / 390 * 100vw);
}

/* card */
.cards{
  position: relative;
  padding-top: calc(100 / 390 * 100vw);
  padding-bottom: calc(100 / 390 * 100vw);
}

.cards img {
  max-width: 100%;
}

.cards h2 {
  width: calc(300 / 390 * 100vw);
  margin:  0 auto;
}
.cards__wrap {
  width: calc(350 / 390 * 100vw);
  margin:  40px auto 0;
}
.cards__box {
    position: sticky;
    top: calc(30 / 390 * 100vw);
    margin-bottom: calc(25 / 390 * 100vw);
}
.cards-cloud{
  position: absolute;
  bottom: -2px;
}

.acco{
  background-color: #ffe100;
}

.acco-top{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.acco-askme{
	width: calc(143 / 390 * 100vw);
  margin-top: calc(50 / 390 * 100vw);
}

.acco-title{
	width: calc(300 / 390 * 100vw);
  margin-top: calc(20 / 390 * 100vw);
  margin-bottom: calc(20 / 390 * 100vw);
}

.faq-item {
  width: calc(350 / 390 * 100vw);
  margin: 0 auto 20px;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(10 / 390 * 100vw);

  padding:
    calc(10 / 390 * 100vw)
    calc(0 / 390 * 100vw)
    calc(10 / 390 * 100vw)
    calc(20 / 390 * 100vw);

  background: #17ace3;

  border: calc(2 / 390 * 100vw) solid #000;
  border-radius: calc(60 / 390 * 100vw);

  cursor: pointer;
}

.faq-q-img {
  width: calc(38 / 390 * 100vw);
  flex-shrink: 0;
}

.faq-q-text {
  flex: 1;
  text-align: left;
  color: #000;
  font-size: calc(18 / 390 * 100vw);
  font-weight: bold;
}


/* icon */

.faq-icon {
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  width: calc(80 / 390 * 100vw);
  flex-shrink: 0;
}

.faq-icon img {
  display: block;

  width: calc(40 / 390 * 100vw);
  height: calc(40 / 390 * 100vw);
}


/* + / - */

.faq-icon::before,
.faq-icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: calc(16 / 390 * 100vw);
  height: calc(4 / 390 * 100vw);

  background: #fff;
  border-radius: calc(10 / 390 * 100vw);

  transform: translate(-50%, -50%);
}

.faq-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

/* 열렸을 때 - */

.faq-q.is-open .faq-icon::after {
  opacity: 0;
}


/* 답변 */

.faq-a {
  display: none;
  position: relative;
  margin-top: calc(-2 / 390 * 100vw);
  padding: calc(25 / 390 * 100vw);

  background: #fff;
  border: calc(2 / 390 * 100vw) solid #000;
  border-radius: calc(40 / 390 * 100vw);
  overflow: hidden;
}

.faq-a-img {
  position: absolute;

  top: calc(20 / 390 * 100vw);
  left: calc(30 / 390 * 100vw);

  width: calc(38 / 390 * 100vw);
}

.faq-a-text {
  padding-left: calc(55 / 390 * 100vw);
  padding-bottom: calc(100 / 390 * 100vw);
  font-size: calc(15 / 390 * 100vw);
  line-height: 1.6;
}

.faq-a-text--bold {
  font-weight: bold;
}


.faq-chara {
  position: absolute;
  right: calc(120 / 390 * 100vw);
  bottom: 0;
  width: calc(110 / 390 * 100vw);
}

.faq-chara.--bottom{
  bottom: calc(-30 / 390 * 100vw);
}
.faq-chara.--w125{
  width: calc(125 / 390 * 100vw);
}

.faq-q.--pink{
  background-color: #fa3257 !important;
}
.faq-q.--green{
  background-color: #45c42b !important;
}
.faq-q.--orange{
  background-color: #ff930f !important;
}

.gallery{
  background-color: #ffe100;
  padding-bottom: calc(100 / 390 * 100vw);
  padding-top: calc(90 / 390 * 100vw);
}

.gallery-top{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gallery-bg{
  position: absolute;
  width: 100%;
}

.gallery-chara{
  width: calc(150 / 390 * 100vw);
  margin-bottom: 10px;
}

.gallery-title{
  width: calc(300 / 390 * 100vw);
  margin-bottom: 30px;
}


.chara-row {
  overflow: hidden;
  width: 100%;
}

.chara-track {
  display: flex;
  width: max-content;
  gap: 20px;
}

.chara-item {
  width: 180px;
  flex-shrink: 0;
  cursor: pointer;
}

.chara-row-top .chara-track {
  animation: slide-left 20s linear infinite;
}

.chara-row-bottom .chara-track {
  animation: slide-right 40s linear infinite;
}

@keyframes slide-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes slide-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

.chara-modal {
  display: none;

  position: fixed;
  inset: 0;

  z-index: 9999;
}

.chara-modal-bg {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, .6);
}

.chara-modal-inner {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

.chara-modal-img {
  max-height: calc(460 / 390 * 100vw);
}

.chara-modal-close {
  position: absolute;
  top: calc(-5 / 390 * 100vw);
  right: 0;

  width: calc(50 / 390 * 100vw);
  height: calc(50 / 390 * 100vw);

  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.chara-modal-close img {
  display: block;
  width: 100%;
  height: 100%;
}

.birth{
  position: relative;
  overflow: hidden;
  padding-top: calc(50 / 390 * 100vw);
  margin-top: calc(-50 / 390 * 100vw);
}
.birth-top{
  width: 100%;
  position: absolute;
  top: 0;
}

.birth-bottom{
  width: 100%;
  position: absolute;
  bottom: -1px;
}

.birth-title-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.birth-chara{
  width: calc(188 / 390 * 100vw);
  margin-top: calc(50 / 390 * 100vw);
  margin-bottom: 20px;
}

.birth-title{
  width: calc(300 / 390 * 100vw);
}

.birth-pink{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.birth-pink-bg{
  position: relative;
  z-index: 0;
  width: calc(380 / 390 * 100vw);
}
.birth-pink-title{
  position: absolute;
  top: calc(60 / 390 * 100vw);
  left: calc(80 / 390 * 100vw);
  z-index: 1;
  width: calc(230 / 390 * 100vw);
}
.birth-pink-text{
  position: absolute;
  width: calc(320 / 390 * 100vw);
  top: calc(160 / 390 * 100vw);
  font-size: calc(16 / 390 * 100vw);
  text-align: center;
  line-height: 2;
}
.birth-pink01{
  position: absolute;
  bottom: calc(-40 / 390 * 100vw);
  left: calc(140 / 390 * 100vw);
  width: calc(119 / 390 * 100vw);
}
.birth-pink02{
  position: absolute;
  top: calc(-20 / 390 * 100vw);
  right: calc(-37 / 390 * 100vw);
  width: calc(128 / 390 * 100vw);
}

.birth-green{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.birth-green-bg{
  position: relative;
  z-index: 0;
  width: calc(380 / 390 * 100vw);
}
.birth-green-title{
  position: absolute;
  top: calc(60 / 390 * 100vw);
  z-index: 1;
  width: calc(285 / 390 * 100vw);
}
.birth-green-text{
  position: absolute;
  top: calc(100 / 390 * 100vw);
  width: calc(300 / 390 * 100vw);
  font-size: calc(16 / 390 * 100vw);
  text-align: center;
  line-height: 2;
}
.birth-green01{
  position: absolute;
  bottom: calc(27 / 390 * 100vw);
  left: 11%;
  width: calc(300 / 390 * 100vw);
}

.birth-message{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: calc(50 / 390 * 100vw);
    margin-top: calc(70 / 390 * 100vw);
  }

.birth-message-left{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.birth-message-left img{
  width: calc(436 / 390 * 100vw);
}
.birth-message-title{
  width: calc(203 / 390 * 100vw) !important;
  padding-bottom: calc(30 / 390 * 100vw);
}
.birth-message-chara{
  width: calc(160 / 390 * 100vw) !important;
}

.birth-message-right img{
  width: calc(160 / 390 * 100vw);
  margin-top: calc(-20 / 390 * 100vw);
}
.birth-message-balloon{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 30px;
}
.birth-message-balloon img{
  position: absolute;
  z-index: 1;
  width: calc(360 / 390 * 100vw);
  margin-top: calc(10 / 390 * 100vw);
}
.birth-message-text{
  position: relative;
  z-index: 2;
  width: calc(317 / 390 * 100vw);
  color: #fff;
  font-weight: bold;
  font-size: calc(16 / 390 * 100vw);
  line-height: 2;
  margin-bottom: calc(10 / 390 * 100vw);
}
.birth-sns{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(40 / 390 * 100vw);
    padding-bottom: calc(120 / 390 * 100vw);

  }
.birth-sns-title{
    font-size: calc(18 / 390 * 100vw);
    font-weight: bold;
}
.birth-sns-wrap{
  display: flex;
  gap: calc(8 / 390 * 100vw);
}
.birth-sns-x{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000;
  width: calc(120 / 390 * 100vw);
  height: calc(40 / 390 * 100vw);
  color: #fff;
  gap: calc(15 / 390 * 100vw);
  border-radius: 6px;
  box-shadow: 0px 5px #000;
  img{
    width: calc(25 / 390 * 100vw);
  }
}
.birth-sns-facebook{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1f69b9;
  width: calc(120 / 390 * 100vw);
  height: calc(40 / 390 * 100vw);
  color: #fff;
  gap: calc(15 / 390 * 100vw);
  border-radius: 6px;
  box-shadow: 0px 5px #0d4e86;
  img{
    width: calc(25 / 390 * 100vw);
  }
}
.birth-sns-line{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #06c755;
  width: calc(120 / 390 * 100vw);
  height: calc(40 / 390 * 100vw);
  color: #fff;
  gap: calc(15 / 390 * 100vw);
  border-radius: 6px;
  box-shadow: 0px 5px #00913b;
  img{
    width: calc(25 / 390 * 100vw);
  }
}

.banner{
  background-color: #ffe100;
  padding: calc(80 / 390 * 100vw) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.banner-img{
  width: calc(350 / 390 * 100vw);
}
.banner-bye{
  width: calc(240 / 390 * 100vw);
  margin-top: calc(70 / 390 * 100vw);
}
.anniversary img{
}
.anniversary {
  display: flex;
  justify-content: center;
  margin: calc(80 / 390 * 100vw) auto;
}

.anniversary a {
  display: inline-block;
  width: fit-content;
  height: fit-content;
  line-height: 0;
}

.anniversary img {
  display: block;
  width: calc(350 / 390 * 100vw);
  height: auto;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.fix-top{
  width: calc(88 / 768 * 100vw);
  bottom: calc(20 / 768 * 100vw);
}

}
@media (min-width: 769px) and (max-width: 1024px) {
    .birth-green01 {
        bottom: calc(10 / 390 * 100vw);
    }
}