@charset "UTF-8";
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}
*:before, *:after {
  box-sizing: border-box;
}
*:focus {
  outline: none;
}

html {
  font-size: 62.5%;
  min-height: 100%;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
html::-webkit-scrollbar {
  display: none;
}

body {
  font-family: "LINE Seed JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-size: 1.25vw;
  color: #564444;
  background: #fcfcfc;
}
body.is-fixed {
  position: fixed;
  width: 100%;
}
body.modal-open {
  overflow: hidden;
}
body img {
  max-width: 100%;
  width: 100%;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 3.738vw;
  }
  body img {
    pointer-events: none;
  }
}

.site-frame {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  pointer-events: none;
  transform: translateZ(0);
  box-sizing: border-box;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.01);
  border-width: 100px;
  -o-border-image: url(../images/frame.png) 100 stretch;
     border-image: url(../images/frame.png) 100 fill stretch;
}
@media screen and (max-width: 767px) {
  .site-frame {
    height: 100lvh;
    border-width: 20px;
    -o-border-image: url(../images/sp/frame.png) 40 stretch;
       border-image: url(../images/sp/frame.png) 40 fill stretch;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

.sp_inline {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp_inline {
    display: inline-block;
  }
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}
.flex {
  display: flex;
}

.grid {
  display: grid;
}

section {
  position: relative;
  z-index: 0;
}

.bg-white {
  background: url(../images/chara_bg-pattern.webp) #fcfcfc center top/1.7%;
}
@media screen and (max-width: 767px) {
  .bg-white {
    background: url(../images/chara_bg-pattern.webp) #fcfcfc center top/7.5%;
  }
}
.bg-orange {
  color: #fcfcfc;
  background-color: #ed7428;
}
.bg-blue {
  color: #fcfcfc;
  background-color: #0096c4;
  background-image: url(../images/charatoria_bg-pattern.webp);
  background-size: 4%;
}
@media screen and (max-width: 767px) {
  .bg-blue {
    background-size: 10%;
  }
}

.inner {
  width: 90%;
  margin: 0 auto;
}
.inner-intro {
  max-width: 49vw;
}
@media screen and (max-width: 767px) {
  .inner-intro {
    width: 100%;
    max-width: 92.523vw;
  }
}
.inner-character_story {
  max-width: 75.833vw;
}
@media screen and (max-width: 767px) {
  .inner-character_story {
    width: 100%;
    max-width: 88.785vw;
  }
}
.inner-message {
  max-width: 75.833vw;
  color: #564444;
  background-color: #fcfcfc;
  border-radius: 3.333vw;
  padding: 3.333vw 9.115vw 4.167vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  .inner-message {
    width: 100%;
    max-width: 96.262vw;
    border-radius: 5.607vw;
    padding: 14.953vw 5.607vw 25vw;
  }
}
.inner-charatoria {
  max-width: 75.833vw;
  padding-top: 8vw;
}
@media screen and (max-width: 767px) {
  .inner-charatoria {
    width: 100%;
    max-width: 88.785vw;
  }
}
.inner-campaign {
  max-width: 80.208vw;
}
@media screen and (max-width: 767px) {
  .inner-campaign {
    width: 100%;
    max-width: none;
  }
}

.txt-en {
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.big_txt {
  font-weight: 800;
}

.txt-orange {
  color: #ed7428;
}

.charatoria_plan_li_deco {
  opacity: 0;
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li {
  position: absolute;
  width: 1.822vw;
  height: 2.03vw;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .charatoria_plan_li_deco .charatoria_plan_li_deco_li {
    width: 7vw;
    height: 6.3vw;
  }
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li::before, .charatoria_plan_li_deco .charatoria_plan_li_deco_li::after {
  content: "";
  background-image: url(../images/icon-kira.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li::before {
  content: "";
  width: 1.041vw;
  height: 1.353vw;
  animation: blinking 1s linear alternate-reverse infinite;
}
@media screen and (max-width: 767px) {
  .charatoria_plan_li_deco .charatoria_plan_li_deco_li::before {
    width: 4vw;
    height: 4.6vw;
  }
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li::after {
  content: "";
  width: 0.573vw;
  height: 0.781vw;
  animation: blinking 1s linear alternate-reverse infinite;
  animation-delay: 0.5s;
}
@media screen and (max-width: 767px) {
  .charatoria_plan_li_deco .charatoria_plan_li_deco_li::after {
    width: 2.573vw;
    height: 2.781vw;
  }
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-left {
  top: -5%;
  left: 25%;
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-left::before {
  top: 0;
  left: 0;
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-left::after {
  bottom: 0;
  right: 0;
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-right {
  top: 3%;
  right: 28%;
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-right::before {
  top: 0;
  right: 0;
}
.charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-right::after {
  bottom: 0;
  left: 0;
}

h1 {
  width: 8.1vw;
  position: fixed;
  top: 2.604vw;
  left: 2.604vw;
  z-index: 99;
}
@media screen and (max-width: 767px) {
  h1 {
    width: 17.523vw;
    top: 4.673vw;
    left: 4.673vw;
    z-index: 110;
  }
}

.active .h2-mv {
  opacity: 1;
  transition-delay: 1.1s;
}

h2.h2-mv {
  width: 44.167vw;
  position: fixed;
  bottom: 0;
  right: 9.906vw;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.4s;
}
@media screen and (max-width: 767px) {
  h2.h2-mv {
    width: 94.393vw;
    position: absolute;
    bottom: 8vw;
    bottom: auto;
    top: 130vw;
    right: auto;
    left: 3.271vw;
  }
}
h2.h2-mv.is-absolute {
  position: absolute;
}
h2.h2-intro {
  width: 31.042vw;
  margin: 0 auto;
  padding-top: 6.615vw;
  position: relative;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
h2.h2-intro.active {
  opacity: 1;
  transform: translateY(0);
}
h2.h2-intro::before {
  content: "";
  width: 4.688vw;
  height: 3.281vw;
  background-image: url(../images/icon-crown.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  h2.h2-intro {
    width: 80.374vw;
    padding-top: 16.121vw;
  }
  h2.h2-intro::before {
    width: 14.953vw;
    height: 10.514vw;
  }
}
h2.h2-modal_title {
  font-size: 1.042vw;
  line-height: 1.8;
  letter-spacing: 0.05em;
  text-align: center;
  position: relative;
  padding-bottom: 1.667vw;
}
h2.h2-modal_title::after {
  content: "";
  width: 27.969vw;
  height: 0.9vw;
  background-image: url(../images/modal_title-line.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  h2.h2-modal_title {
    font-size: 3.738vw;
    padding-bottom: 5.14vw;
  }
  h2.h2-modal_title::after {
    width: 77.57vw;
    height: 2.336vw;
  }
}

h3 {
  color: #ed7428;
  font-size: 4.167vw;
  text-align: center;
}
h3 .sub-title {
  display: block;
  color: #fcfcfc;
  font-size: 1.25vw;
  letter-spacing: 0.05em;
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 800;
  margin-top: 1.823vw;
  position: relative;
  z-index: 0;
}
h3 .sub-title::before {
  content: "";
  width: 18.646vw;
  height: 3.125vw;
  background-image: url(../images/subtitle-bg.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
}
h3 .sub-title-type02::before {
  width: 8.906vw;
  background-image: url(../images/subtitle-bg-2.webp);
}
h3 .js-split-text {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}
h3 .js-split-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}
@media screen and (max-width: 767px) {
  h3 .js-split-text .blank-space {
    width: 100%;
    height: 0;
    line-height: 0;
  }
}
h3.active .js-split-text span {
  animation: bounceText 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes bounceText {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (max-width: 767px) {
  h3 {
    font-size: 9.346vw;
  }
  h3 .sub-title {
    font-size: 3.271vw;
    margin-top: 4.673vw;
  }
  h3 .sub-title::before {
    width: 49.065vw;
    height: 8.411vw;
  }
  h3 .sub-title-type02::before {
    width: 23.364vw;
  }
}
h3.h3-txt-white {
  color: #fcfcfc;
}
h3.h3-txt-white .sub-title {
  color: #ed7428;
}
h3.h3-txt-white .sub-title::before {
  filter: brightness(0) invert(1);
}
h3.h3-charatoria .sub-title {
  color: #0096c4;
}
h3.h3-character_story, h3.h3-charatoria_concept, h3.h3-charatoria_plan {
  font-size: 3.125vw;
}
@media screen and (max-width: 767px) {
  h3.h3-character_story, h3.h3-charatoria_concept, h3.h3-charatoria_plan {
    font-size: 7.477vw;
  }
}
h3.h3-character_story {
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
h3.h3-character_story.active {
  opacity: 1;
  transform: translateY(0);
}
h3.h3-charatoria_concept {
  color: #0096c4;
}
h3.h3-charatoria_plan {
  width: 50%;
  line-height: 1.28;
  text-align: left;
  text-shadow: 5px 5px 0px rgba(86, 68, 68, 0.6);
}
@media screen and (max-width: 767px) {
  h3.h3-charatoria_plan {
    width: 100%;
    text-align: center;
  }
}
h3.h3-campaign {
  position: relative;
}
h3.h3-campaign::before, h3.h3-campaign::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  animation: kirakira_scale 1.6s ease-in-out infinite;
}
h3.h3-campaign::before {
  width: 5.052vw;
  height: 5.625vw;
  background-image: url(../images/campaign_deco-left.webp);
  top: 0;
  left: 2.604vw;
}
@media screen and (max-width: 767px) {
  h3.h3-campaign::before {
    width: 11.682vw;
    height: 12.85vw;
    top: auto;
    bottom: -2vw;
    left: 5vw;
  }
}
h3.h3-campaign::after {
  width: 4.688vw;
  height: 5.208vw;
  background-image: url(../images/campaign_deco-right.webp);
  bottom: 0;
  right: 2.604vw;
  animation-delay: -0.8s;
}
@media screen and (max-width: 767px) {
  h3.h3-campaign::after {
    width: 11.682vw;
    height: 12.85vw;
    bottom: -2vw;
    right: 5vw;
  }
}
@keyframes kirakira_scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.3);
  }
}

h4.h4-character_name {
  width: 10.104vw;
  font-size: 1.25vw;
  font-weight: 800;
  text-align: center;
}
h4.h4-character_name span {
  font-size: 2.083vw;
  border-radius: 1.979vw;
  padding: 0.833vw 2.917vw;
  color: #fcfcfc;
  display: block;
  margin-bottom: 2.083vw;
}
@media screen and (max-width: 767px) {
  h4.h4-character_name {
    width: 23.598vw;
    font-size: 2.804vw;
    text-align: left;
  }
  h4.h4-character_name span {
    width: 17.757vw;
    font-size: 3.738vw;
    border-radius: 8.879vw;
    padding: 1.402vw 5.14vw;
    text-align: center;
    margin-bottom: 2.57vw;
    margin-left: 1.636vw;
  }
}
h4.h4-character_name-al {
  color: #a0a2ad;
}
h4.h4-character_name-al span {
  background-color: #a0a2ad;
}
h4.h4-character_name-non {
  color: #ed7428;
}
h4.h4-character_name-non span {
  background-color: #ed7428;
}

.btn_link {
  display: flex;
  align-items: center;
  width: 18.75vw;
  height: 5.521vw;
  color: #fcfcfc;
  background-color: #ed7428;
  border-radius: 3.125vw;
  letter-spacing: 0.05em;
  margin: 0 auto;
  padding: 0 2.083vw;
  transition: all 0.4s;
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 767px) {
  .btn_link:hover {
    background-color: #564444;
  }
  .btn_link:hover .read_more-deco span {
    transform: translate(-50%, -50%) scale(1.4);
  }
  .btn_link:hover .read_more-deco span:first-of-type {
    transform: translate(-50%, -50%) rotate(90deg) scale(1.4);
  }
  .btn_link:hover .read_more-deco-arrow .deco-arrow_inner {
    transform: translateX(70%);
  }
}
.btn_link .read_more-deco {
  width: 2.083vw;
  height: 2.083vw;
  background-color: #fcfcfc;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 1.25vw;
  transform: translateY(-50%);
  transition: all 0.4s;
}
.btn_link .read_more-deco span {
  width: 0.833vw;
  height: 0.156vw;
  border-radius: 0.156vw;
  background-color: #ed7428;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s;
}
.btn_link .read_more-deco span:first-of-type {
  transform: translate(-50%, -50%) rotate(90deg);
}
.btn_link .read_more-deco-arrow {
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0.625vw;
}
.btn_link .read_more-deco-arrow .deco-arrow_inner {
  display: flex;
  align-items: center;
  gap: 1.042vw;
  transform: translateX(0%);
  transition: all 0.4s;
}
.btn_link .read_more-deco-arrow .deco-arrow_svg {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .btn_link {
    width: 65.421vw;
    height: 19.393vw;
    border-radius: 14.019vw;
    padding: 0 7.009vw;
  }
  .btn_link .read_more-deco {
    width: 7.477vw;
    height: 7.477vw;
    right: 4.439vw;
  }
  .btn_link .read_more-deco span {
    width: 3.037vw;
    height: 0.701vw;
    border-radius: 0.701vw;
  }
  .btn_link .read_more-deco-arrow {
    padding-right: 2.103vw;
  }
  .btn_link .read_more-deco-arrow .deco-arrow_inner {
    gap: 4.673vw;
  }
}
.btn_link-blue {
  color: #0096c4;
  background-color: #fcfcfc;
}
.btn_link-blue .read_more-deco {
  background-color: #0096c4;
}
.btn_link-blue .read_more-deco span {
  background-color: #fcfcfc;
}
@media screen and (min-width: 767px) {
  .btn_link-blue:hover {
    color: #fcfcfc;
    background-color: #0096c4;
  }
  .btn_link-blue:hover .read_more-deco {
    background-color: #fcfcfc;
  }
  .btn_link-blue:hover .read_more-deco span {
    background-color: #0096c4;
    transform: translate(-50%, -50%) scale(1);
  }
  .btn_link-blue:hover .read_more-deco span:first-of-type {
    transform: translate(-50%, -50%) rotate(90deg) scale(1);
  }
}
.btn_link-brown {
  color: #564444;
  background-color: #fcfcfc;
  border: 2px solid #564444;
}
.btn_link-brown .read_more-deco {
  background-color: #564444;
}
.btn_link-brown .read_more-deco-arrow .deco-arrow_svg path {
  fill: #fcfcfc;
}
@media screen and (min-width: 767px) {
  .btn_link-brown:hover {
    color: #fcfcfc;
    background-color: #564444;
  }
  .btn_link-brown:hover .read_more-deco {
    background-color: #fcfcfc;
  }
  .btn_link-brown:hover .read_more-deco-arrow .deco-arrow_inner .deco-arrow_svg path {
    fill: #ed7428;
  }
}
.btn_link-brown02 {
  color: #fcfcfc;
  background-color: #564444;
}
.btn_link-brown02 .read_more-deco {
  background-color: #fcfcfc;
}
.btn_link-brown02 .read_more-deco-arrow .deco-arrow_svg path {
  fill: #ed7428;
}
@media screen and (min-width: 767px) {
  .btn_link-brown02:hover {
    color: #564444;
    background-color: #fcfcfc;
    border: 2px solid #564444;
  }
  .btn_link-brown02:hover .read_more-deco {
    background-color: #564444;
  }
  .btn_link-brown02:hover .read_more-deco-arrow .deco-arrow_inner .deco-arrow_svg path {
    fill: #fcfcfc;
  }
}
@media screen and (min-width: 767px) {
  .btn_link-close:hover .read_more-deco span:first-of-type {
    transform: translate(-50%, -50%) scale(1.4);
  }
}
.btn_link-close .read_more-deco span:first-of-type {
  transform: translate(-50%, -50%);
}
.btn_link.btn-back .read_more-deco-arrow {
  justify-content: flex-start;
  padding-left: 0.625vw;
}
@media screen and (min-width: 767px) {
  .btn_link.btn-back:hover .read_more-deco-arrow .deco-arrow_inner {
    transform: translateX(-70%);
  }
}
@media screen and (max-width: 767px) {
  .btn_link.btn-back .read_more-deco-arrow {
    padding-left: 1.8vw;
  }
}
.btn_link.charatoria_modal_btn {
  width: 11.25vw;
  height: 3.594vw;
  font-size: 0.833vw;
  padding: 0 1.25vw;
}
.btn_link.charatoria_modal_btn .read_more-deco {
  width: 1.354vw;
  height: 1.354vw;
}
.btn_link.charatoria_modal_btn .read_more-deco span {
  width: 0.573vw;
  height: 0.104vw;
  border-radius: 0.104vw;
  right: 0.833vw;
}
@media screen and (max-width: 767px) {
  .btn_link.charatoria_modal_btn {
    width: 46.729vw;
    height: 14.953vw;
    font-size: 3.271vw;
    padding: 0 3.738vw;
  }
  .btn_link.charatoria_modal_btn .read_more-deco {
    width: 6.542vw;
    height: 6.542vw;
  }
  .btn_link.charatoria_modal_btn .read_more-deco span {
    width: 2.804vw;
    height: 0.467vw;
    border-radius: 0.467vw;
    right: 2.804vw;
  }
}

.history_btn-scroll p {
  color: #fcfcfc;
  margin-bottom: 0.938vw;
}
.history_btn-scroll .history_btn-scroll-arrow {
  width: 3.594vw;
  height: 4.427vw;
  border: 0.208vw solid #fcfcfc;
  border-radius: 1.823vw;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.history_btn-scroll .history_btn-scroll-arrow span {
  width: 100%;
  height: 100%;
  display: inline-block;
  animation: Move-arrow 1.4s ease infinite;
}
.history_btn-scroll .history_btn-scroll-arrow span::before {
  content: "";
  width: 1.198vw;
  height: 1.301vw;
  background-image: url(../images/icon-arrow-white.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translate(-50%, 0%);
}
.history_btn-scroll .history_btn-scroll-arrow span img {
  width: 1.198vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
  .history_btn-scroll p {
    margin-bottom: 3.271vw;
  }
  .history_btn-scroll .history_btn-scroll-arrow {
    width: 10.514vw;
    height: 13.084vw;
    border: 3px solid #fcfcfc;
    border-radius: 8.178vw;
  }
  .history_btn-scroll .history_btn-scroll-arrow span::before {
    width: 3.505vw;
    height: 5.841vw;
  }
  .history_btn-scroll .history_btn-scroll-arrow span img {
    width: 3.505vw;
  }
}

@media screen and (max-width: 767px) {
  .menu_box-inner {
    flex-direction: column;
  }
}
.menu_box .menu_logo a {
  display: block;
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  .menu_box .menu_logo a:hover {
    opacity: 0.7;
  }
}
.menu_box .menu_mav_li {
  line-height: 1.5;
}
.menu_box .menu_mav_li:last-of-type {
  margin-bottom: 0;
}
.menu_box .menu_mav_li span {
  display: block;
}
.menu_box .menu_mav_li a {
  transition: all 0.4s;
}
.menu_box .menu_share {
  align-self: flex-end;
}
@media screen and (max-width: 767px) {
  .menu_box .menu_share {
    align-self: flex-start;
    padding-left: 4.6vw;
  }
}
.menu_box .menu_share-inner {
  width: 11.979vw;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .menu_box .menu_share-inner {
    width: 39.252vw;
  }
}
.menu_box .menu_share-title {
  margin-bottom: 1.354vw;
}
@media screen and (max-width: 767px) {
  .menu_box .menu_share-title {
    margin-bottom: 3.505vw;
  }
}
.menu_box .menu_share_ul {
  display: flex;
  gap: 2.083vw;
}
@media screen and (max-width: 767px) {
  .menu_box .menu_share_ul {
    gap: 5.607vw;
  }
}
.menu_box .menu_share_li a img {
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  .menu_box .menu_share_li a:hover img {
    transform: scale(1.2);
  }
}
.menu_box .menu_official_li {
  font-weight: 800;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}
.menu_box .menu_official_li svg {
  width: 1.042vw;
  height: 1.042vw;
}
@media screen and (max-width: 767px) {
  .menu_box .menu_official_li svg {
    width: 3.738vw;
    height: 3.738vw;
  }
}
.menu_box .menu_official_li:last-of-type {
  margin-bottom: 0;
}
.menu_box .menu_official_li a {
  transition: all 0.4s;
}

#load {
  background: #ed7428;
  position: fixed;
  height: 100svh;
  width: 100%;
  z-index: 999;
  transition: 0.2s;
  transition-delay: 2s;
}
#load.load_active {
  animation: view 0.5s ease-in-out 1s forwards;
}
@keyframes view {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    pointer-events: none;
  }
}

header .menu_btn {
  width: 6.667vw;
  height: 6.667vw;
  padding: 2.292vw 2.188vw 1.823vw 1.719vw;
  color: #fcfcfc;
  background-color: #ed7428;
  border-bottom-left-radius: 1.667vw;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 120;
}
header .menu_btn.open .menu_btn-inner .menu_btn_li-line.line-01 {
  top: 50%;
  transform: translate(-50%, -50%) rotate(30deg);
}
header .menu_btn.open .menu_btn-inner .menu_btn_li-line.line-02 {
  bottom: 30%;
  transform: translate(-50%, -50%) rotate(-30deg);
}
header .menu_btn-inner {
  width: 3.229vw;
  text-align: center;
  cursor: pointer;
}
@media screen and (min-width: 767px) {
  header .menu_btn-inner:hover .menu_btn_li-line {
    transform: translate(-50%, -50%);
  }
  header .menu_btn-inner:hover .menu_btn_li-line.line-01 {
    top: 50%;
  }
  header .menu_btn-inner:hover .menu_btn_li-line.line-02 {
    bottom: 30%;
  }
}
@media screen and (max-width: 767px) {
  header .menu_btn {
    width: 14.953vw;
    height: 14.953vw;
    padding: 3.972vw 2.103vw 3.738vw;
    border-bottom-left-radius: 3.738vw;
  }
  header .menu_btn-inner {
    width: 10.28vw;
  }
}
header .menu_btn .menu_btn_ul {
  width: 2.083vw;
  height: 1.25vw;
  margin: 0 auto;
  margin-bottom: 0.417vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  header .menu_btn .menu_btn_ul {
    width: 5.607vw;
    height: 3.505vw;
    margin-bottom: 0.935vw;
  }
}
header .menu_btn .menu_btn_li-line {
  width: 100%;
  height: 0.313vw;
  background-color: #fcfcfc;
  border-radius: 3px !important;
  transition: all 0.4s;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
header .menu_btn .menu_btn_li-line.line-01 {
  top: 0;
}
header .menu_btn .menu_btn_li-line.line-02 {
  bottom: 0;
}
@media screen and (max-width: 767px) {
  header .menu_btn .menu_btn_li-line {
    height: 0.935vw;
  }
}
header .menu_btn .menu_btn-txt {
  font-size: 0.729vw;
}
@media screen and (max-width: 767px) {
  header .menu_btn .menu_btn-txt {
    font-size: 2.336vw;
  }
}
header .menu_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: url(../images/chara_bg-pattern.webp) #fcfcfc center top/1.7%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s;
}
header .menu_box.open {
  opacity: 1;
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  header .menu_box {
    display: block;
    padding: 0 16vw 0 12vw;
    background: url(../images/chara_bg-pattern.webp) #fcfcfc center top/7.5%;
  }
}
header .menu_box-inner {
  justify-content: center;
  gap: 3.75vw;
}
@media screen and (max-width: 767px) {
  header .menu_box-inner {
    flex-direction: column;
    gap: 7.477vw;
    overflow-y: scroll;
    height: 100vh;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 11vh;
    padding-bottom: 5vh;
  }
}
header .menu_box .menu_logo {
  width: 14.583vw;
}
@media screen and (max-width: 767px) {
  header .menu_box .menu_logo {
    display: none;
  }
}
header .menu_box .menu_mav_li {
  font-size: 1.042vw;
  margin-bottom: 1.667vw;
  padding-left: 1.667vw;
  position: relative;
}
header .menu_box .menu_mav_li::before {
  content: "";
  width: 0.833vw;
  height: 0.833vw;
  border-radius: 50%;
  background-color: #ed7428;
  position: absolute;
  top: 23%;
  left: 0;
  opacity: 0;
  transition: all 0.4s;
}
header .menu_box .menu_mav_li span {
  font-size: 1.667vw;
}
header .menu_box .menu_mav_li a:hover {
  color: #ed7428;
}
header .menu_box .menu_mav_li.is-active::before {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  header .menu_box .menu_mav_li {
    font-size: 3.271vw;
    margin-bottom: 5.607vw;
    padding-left: 4.673vw;
  }
  header .menu_box .menu_mav_li::before {
    width: 2.804vw;
    height: 2.804vw;
    top: 20%;
  }
  header .menu_box .menu_mav_li span {
    font-size: 4.673vw;
  }
}
header .menu_box .menu_share-title {
  font-size: 1.667vw;
  color: #ed7428;
}
@media screen and (max-width: 767px) {
  header .menu_box .menu_share-title {
    font-size: 4.673vw;
  }
}
header .menu_box .menu_official_ul {
  margin-top: 3.75vw;
}
@media screen and (max-width: 767px) {
  header .menu_box .menu_official_ul {
    margin-top: 7.477vw;
  }
}
header .menu_box .menu_official_li {
  font-size: 1.042vw;
  margin-bottom: 1.667vw;
}
@media screen and (max-width: 767px) {
  header .menu_box .menu_official_li {
    font-size: 3.271vw;
    margin-bottom: 3.972vw;
  }
}
header .menu_box .menu_official_li a svg path {
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  header .menu_box .menu_official_li a:hover {
    color: #ed7428;
  }
  header .menu_box .menu_official_li a:hover svg path {
    fill: #ed7428;
  }
}

main #mv {
  height: 69.219vw;
  background: url(../images/mv_img-bg.webp) no-repeat #ffeac6 center top 10px/92%;
  overflow: hidden;
  overflow-anchor: none;
}
@media screen and (max-width: 767px) {
  main #mv {
    height: 100vh;
    max-height: 186.916vw;
    background: url(../images/sp/mv_img-bg.webp) no-repeat #ffeac6 center top/100%;
  }
}
main #mv.active .mv_img_li-deco {
  transform: translate(-50%, -50%) scale(1);
}
main #mv.active .mv_img_li-main {
  transform: scale(1);
}
main #mv.active .mv_img_li-cake {
  transform: scale(1);
  animation: floating 2.5s ease-in-out 1.1s infinite;
}
main #mv.active .mv_img_li-acrylicstand {
  transform: scale(1);
  transition-delay: 0.7s;
  animation: floating 2.5s ease-in-out 1.1s infinite;
}
main #mv.active .mv_img_li-charapping {
  transform: scale(1);
  transition-delay: 0.7s;
  animation: floating 2.5s ease-in-out 1.5s infinite;
}
main #mv.active .mv_img_li-charatoria {
  transform: scale(1);
  transition-delay: 0.7s;
  animation: floating 2.5s ease-in-out 1.3s infinite;
}
@media screen and (max-width: 767px) {
  main #mv.active .mv_img_li-charatoria {
    animation: floating 2.5s ease-in-out 1.5s infinite;
  }
}
main #mv.active .mv_img_li-kasakko {
  transform: scale(1);
  transition-delay: 0.7s;
  animation: floating 2.5s ease-in-out 1.3s infinite;
}
@media screen and (max-width: 767px) {
  main #mv.active .mv_img_li-kasakko {
    animation: floating 2.5s ease-in-out 1.5s infinite;
  }
}
main #mv.active .mv_img_li-plushie {
  transform: scale(1);
  transition-delay: 0.7s;
  animation: floating 2.5s ease-in-out 1.3s infinite;
}
@media screen and (max-width: 767px) {
  main #mv.active .mv_img_li-al {
    transform: scale(1);
  }
}
main #mv .mv_img_li {
  position: absolute;
}
main #mv .mv_img_li-deco {
  width: 100%;
  height: 70.849vw;
  background-image: url(../images/mv_img-deco.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s;
}
@media screen and (max-width: 767px) {
  main #mv .mv_img_li-deco {
    height: 187.15vw;
    background-image: url(../images/sp/mv_img-deco.webp);
    background-size: cover;
    background-position: center center;
  }
}
main #mv .mv_img_li-main {
  width: 83.333vw;
  top: 1.25vw;
  left: 10.313vw;
  transform: scale(0);
  transform-origin: center bottom;
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.6s;
}
@media screen and (max-width: 767px) {
  main #mv .mv_img_li-main {
    width: 130.841vw;
    top: 11.916vw;
    left: -16.589vw;
  }
}
main #mv .mv_img_li-cake {
  width: 29.271vw;
  top: 7vw;
  left: 12vw;
  transform: scale(0);
  transform-origin: center bottom;
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.6s;
}
@media screen and (max-width: 767px) {
  main #mv .mv_img_li-cake {
    width: 46.729vw;
    top: 33vw;
    left: 1vw;
  }
}
main #mv .mv_img_li-acrylicstand {
  width: 9.01vw;
  top: 38.854vw;
  right: 1.667vw;
  transform: scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
@media screen and (max-width: 767px) {
  main #mv .mv_img_li-acrylicstand {
    width: 17.056vw;
    top: 75.935vw;
    right: 3.738vw;
  }
}
main #mv .mv_img_li-charapping {
  width: 5.833vw;
  top: 15.417vw;
  left: 6.875vw;
  transform: scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
@media screen and (max-width: 767px) {
  main #mv .mv_img_li-charapping {
    width: 11.682vw;
    top: 16.121vw;
    left: 32.71vw;
  }
}
main #mv .mv_img_li-charatoria {
  width: 6.615vw;
  top: 57.344vw;
  left: 51.563vw;
  transform: scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
@media screen and (max-width: 767px) {
  main #mv .mv_img_li-charatoria {
    width: 13.084vw;
    top: 162.383vw;
    left: 11.916vw;
  }
}
main #mv .mv_img_li-kasakko {
  width: 7.083vw;
  top: 30.052vw;
  left: 2.708vw;
  transform: scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
@media screen and (max-width: 767px) {
  main #mv .mv_img_li-kasakko {
    width: 14.953vw;
    top: 87.383vw;
    left: 3.738vw;
  }
}
main #mv .mv_img_li-plushie {
  width: 23.438vw;
  top: 43.646vw;
  left: 2.708vw;
  transform: scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
@media screen and (max-width: 767px) {
  main #mv .mv_img_li-plushie {
    width: 42.991vw;
    top: 108.879vw;
    left: -3.738vw;
  }
}
@media screen and (max-width: 767px) {
  main #mv .mv_img_li-deco-sp {
    width: 49.065vw;
    top: 0;
    left: 0;
  }
  main #mv .mv_img_li-al {
    width: 55.607vw;
    top: 95.794vw;
    right: 3.738vw;
    transform: scale(0);
    transform-origin: center bottom;
    transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.6s;
  }
  main #mv .mv_img_li-frame {
    width: 100vw;
    top: 0;
    left: 0;
  }
}
main #intro {
  padding-top: 5.052vw;
  padding-bottom: 20vw;
  background-image: url(../images/intro_bg-cloud-left.webp), url(../images/intro_bg-cloud-right.webp);
  background-repeat: no-repeat, no-repeat;
  background-position: bottom left, bottom right;
  background-size: 30%, 30%;
  position: sticky;
  top: var(--sticky-top, 0px);
}
main #intro::before, main #intro::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  transform: scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
main #intro::before {
  content: "";
  width: 16.927vw;
  height: 13.594vw;
  background-image: url(../images/intro_deco-ribbon-yellow.webp);
  top: 16.667vw;
  left: 1.042vw;
  transform-origin: left center;
}
@media screen and (max-width: 767px) {
  main #intro::before {
    width: 22.196vw;
    height: 18.692vw;
    background-size: cover;
    background-position: right bottom;
    top: 40vw;
    left: 0;
  }
}
main #intro::after {
  content: "";
  width: 15.937vw;
  height: 15.937vw;
  background-image: url(../images/intro_deco-ribbon-blue.webp);
  top: 21.354vw;
  right: 0;
  transform-origin: right center;
}
@media screen and (max-width: 767px) {
  main #intro::after {
    width: 20.561vw;
    height: 23.131vw;
    background-position: left bottom;
    top: 80vw;
    right: 0;
  }
}
main #intro.active::before, main #intro.active::after {
  transform: scale(1);
  transition-delay: 0.5s;
  animation: floating 2.5s ease-in-out 0.9s infinite;
}
main #intro p {
  text-align: center;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-bottom: 2.5vw;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
main #intro p.active {
  opacity: 1;
  transform: translateY(0);
}
main #intro p:last-of-type {
  margin-bottom: 0;
}
main #intro p.big_txt {
  font-size: 2.083vw;
  margin-top: 3.333vw;
  margin-bottom: 4.167vw;
}
@media screen and (max-width: 767px) {
  main #intro {
    padding-top: 13.084vw;
    padding-bottom: 40vw;
    background-image: url(../images/sp/intro_bg-cloud.webp);
    background-repeat: no-repeat;
    background-position: bottom -20vw center;
    background-size: contain;
  }
  main #intro p {
    margin-bottom: 7.477vw;
  }
  main #intro p.big_txt {
    font-size: 4.5vw;
    margin-top: 9.346vw;
    margin-bottom: 14.953vw;
  }
}
main #character {
  margin-top: -4vw;
  padding-top: 8.333vw;
  padding-bottom: 20vw;
  -webkit-mask-image: url("../images/top-wave.png"), linear-gradient(#fff, #fff);
  mask-image: url("../images/top-wave.png"), linear-gradient(#fff, #fff);
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: auto 4.167vw, 100% calc(100% - 4.167vw);
  mask-size: auto 4.167vw, 100% calc(100% - 4.167vw);
  position: sticky;
  top: var(--sticky-top, 0px);
  z-index: 1;
}
main #character::before, main #character::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}
main #character.active::before, main #character.active::after {
  animation: floating 2.5s ease-in-out infinite;
}
@media screen and (max-width: 767px) {
  main #character {
    padding-top: 15.421vw;
    padding-bottom: 60vw;
    -webkit-mask-size: auto 6.075vw, 100% calc(100% - 6.075vw);
    mask-size: auto 6.075vw, 100% calc(100% - 6.075vw);
  }
}
main #character::before {
  width: 16.146vw;
  height: 14.063vw;
  background-image: url(../images/chara_deco-ribbon-02-left.webp);
  top: 66.146vw;
  left: 0;
}
@media screen and (max-width: 767px) {
  main #character::before {
    width: 26.636vw;
    height: 26.869vw;
    top: 146vw;
  }
}
main #character::after {
  width: 14.896vw;
  height: 16.667vw;
  background-image: url(../images/chara_deco-ribbon-02-right.webp);
  top: 61.458vw;
  right: 0;
}
@media screen and (max-width: 767px) {
  main #character::after {
    width: 22.43vw;
    height: 25.234vw;
    top: 74vw;
  }
}
main #character .character_copy {
  font-size: 2.604vw;
  line-height: 1.6;
  text-align: center;
  letter-spacing: 0.05em;
  width: 58.594vw;
  margin: 0 auto;
  margin-top: 3.385vw;
  margin-bottom: 2.865vw;
  position: relative;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
main #character .character_copy::before, main #character .character_copy::after {
  content: "";
  width: 11.927vw;
  height: 10.313vw;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 1.042vw;
  transform: scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
@media screen and (max-width: 767px) {
  main #character .character_copy {
    font-size: 5.607vw;
    width: 92.523vw;
    margin-top: 2.336vw;
    margin-bottom: 9.346vw;
    padding-top: 6.542vw;
  }
  main #character .character_copy::before, main #character .character_copy::after {
    content: "";
    width: 20.327vw;
    height: 17.523vw;
    top: 0;
  }
}
main #character .character_copy::before {
  background-image: url(../images/chara_deco-ribbon-01-left.webp);
  left: 0;
  transform-origin: right center;
}
main #character .character_copy::after {
  background-image: url(../images/chara_deco-ribbon-01-right.webp);
  right: 0;
  transform-origin: left center;
}
main #character .character_copy.active {
  opacity: 1;
  transform: translateY(0);
}
main #character .character_copy.active::before, main #character .character_copy.active::after {
  transform: scale(1);
  transition-delay: 0.7s;
}
main #character .character_profile {
  position: relative;
}
main #character .character_profile-img {
  width: 39.427vw;
  margin: 0 auto;
  margin-left: 27.708vw;
}
@media screen and (max-width: 767px) {
  main #character .character_profile-img {
    width: 90.654vw;
    margin: 0 auto;
    padding-bottom: 7.477vw;
    border-bottom: 2px dashed #ed7428;
  }
}
main #character .character_profile-img.active .character_profile-img_ul {
  opacity: 1;
  transform: translateY(0);
}
main #character .character_profile-img .character_profile-img_ul {
  display: flex;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
main #character .character_profile-img .character_profile-img_li-al {
  width: 13.75vw;
}
main #character .character_profile-img .character_profile-img_li-non {
  width: 25.885vw;
  position: relative;
}
main #character .character_profile-img .character_profile-img_li-non .non-img {
  opacity: 0;
  transform: scale(1);
  transition: all ease 0.5s;
}
main #character .character_profile-img .character_profile-img_li-non .non-img.non-02 {
  position: absolute;
  width: 24.479vw;
  top: 3.646vw;
}
main #character .character_profile-img .character_profile-img_li-non .non-img.active {
  opacity: 1;
  animation: none;
  animation: Move-non-remove02 0.45s ease-in-out forwards;
}
main #character .character_profile-img .character_profile-img_li-non .non-img.active.non-02 {
  animation: Move-non-remove02 0.45s ease-in-out forwards;
}
@keyframes Move-non-remove {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes Move-non-remove02 {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.12); /* 軽めにポッと膨らむ */
  }
  75% {
    transform: scale(0.9); /* ここで1.0より少し縮ませるのがポイント */
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  main #character .character_profile-img .character_profile-img_li-al {
    width: 39.019vw;
  }
  main #character .character_profile-img .character_profile-img_li-non {
    width: 74.766vw;
    margin-left: -23.364vw;
  }
  main #character .character_profile-img .character_profile-img_li-non .non-img {
    opacity: 0;
  }
  main #character .character_profile-img .character_profile-img_li-non .non-img.non-02 {
    position: absolute;
    width: 65.187vw;
    top: 36vw;
  }
  main #character .character_profile-img .character_profile-img_li-non .non-img.active {
    opacity: 1;
  }
}
main #character .character_profile-txt {
  justify-content: space-between;
  position: absolute;
  top: 4.688vw;
  left: 12.083vw;
  width: 79.479vw;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  main #character .character_profile-txt {
    flex-direction: column;
    gap: 9.346vw;
    position: static;
    width: 100%;
    max-width: 74.766vw;
    margin: 0 auto;
    margin-top: 7.477vw;
  }
}
main #character .character_profile-txt .character_profile-txt-box {
  width: 29%;
  position: relative;
  z-index: 0;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
main #character .character_profile-txt .character_profile-txt-box::before {
  content: "";
  width: 20.104vw;
  height: 20.104vw;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  z-index: -1;
  transform: scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.3s;
}
main #character .character_profile-txt .character_profile-txt-box.active {
  opacity: 1;
  transform: translateY(0);
}
main #character .character_profile-txt .character_profile-txt-box.active::before {
  transform: scale(1);
  transition-delay: 0.8s;
}
main #character .character_profile-txt .character_profile-txt-box-al::before {
  background-image: url(../images/chara_deco-chara-02.webp);
  bottom: -16.667vw;
  right: -4.167vw;
}
main #character .character_profile-txt .character_profile-txt-box-non::before {
  background-image: url(../images/chara_deco-chara-01.webp);
  top: -12.5vw;
  right: -4.167vw;
}
@media screen and (max-width: 767px) {
  main #character .character_profile-txt .character_profile-txt-box {
    width: 100%;
  }
  main #character .character_profile-txt .character_profile-txt-box::before {
    display: none;
  }
}
main #character .character_profile-txt .character_profile-txt-name {
  flex-direction: column;
}
main #character .character_profile-txt .character_profile-txt-name .character_profile-txt-profile {
  font-size: 1.042vw;
  line-height: 1.8;
  margin-top: 1.667vw;
}
@media screen and (max-width: 767px) {
  main #character .character_profile-txt .character_profile-txt-name .character_profile-txt-name-txt {
    display: flex;
    align-items: center;
  }
  main #character .character_profile-txt .character_profile-txt-name .character_profile-txt-name-txt .character_profile-txt-name-img {
    width: 16.822vw;
    margin-right: 3.738vw;
  }
  main #character .character_profile-txt .character_profile-txt-name .character_profile-txt-profile {
    font-size: 3.271vw;
    margin-top: 3.738vw;
  }
}
main #character .character_profile .caharacter_btn-stylechange {
  width: 14.792vw;
  position: absolute;
  top: 28.646vw;
  right: 16.458vw;
  text-align: center;
}
@media screen and (max-width: 767px) {
  main #character .character_profile .caharacter_btn-stylechange {
    width: 34.234vw;
    top: 107.477vw;
    right: auto;
    left: 8.318vw;
  }
}
main #character .character_profile .caharacter_btn-stylechange .character_btn_title {
  margin-bottom: 1.25vw;
}
@media screen and (max-width: 767px) {
  main #character .character_profile .caharacter_btn-stylechange .character_btn_title {
    font-size: 3.5vw;
    margin-bottom: 3.738vw;
  }
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_ul {
  gap: 1.25vw;
}
@media screen and (max-width: 767px) {
  main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_ul {
    gap: 0;
    justify-content: center;
  }
}
@keyframes shake-and-flicker {
  0%, 100% {
    transform: rotate(0deg);
    filter: brightness(1);
  }
  /* 5%〜20%の短い時間で、左右に首を振りながらチカチカ光る */
  5% {
    transform: rotate(-6deg);
    filter: brightness(1.2); /* チカッ（明るく） */
  }
  10% {
    transform: rotate(5deg);
    filter: brightness(1); /* 元の明るさ */
  }
  15% {
    transform: rotate(-4deg);
    filter: brightness(1.2); /* チカッ（明るく） */
  }
  20% {
    transform: rotate(0deg);
    filter: brightness(1); /* ここから100%までは静止して待機 */
  }
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li {
  position: relative;
  cursor: pointer;
  transform-origin: center bottom;
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li:not(.active) {
  animation: shake-and-flicker 3s infinite ease-in-out;
}
@media screen and (min-width: 767px) {
  main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li:not(.active):hover {
    animation: none;
    filter: brightness(1.1);
  }
}
@media screen and (max-width: 767px) {
  main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li {
    width: 20.561vw;
  }
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li::before {
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s;
  opacity: 0;
  z-index: 1;
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li .chara_btn_inner {
  width: 95%;
  height: 95%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask-image: url("../images/chara_btn-change-01.webp");
  mask-image: url("../images/chara_btn-change-01.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li .chara_btn_inner::after {
  content: "";
  width: 6.771vw;
  height: 6.771vw;
  background-image: url();
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li .chara_btn_inner::after {
    width: 19.86vw;
    height: 19.86vw;
  }
}
@media screen and (min-width: 767px) {
  main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li:hover .chara_btn_inner::after {
    transform: translate(-50%, -50%) scale(1.2);
  }
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li.active::before {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li.active {
    display: none;
  }
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li-01::before {
  background-image: url(../images/chara_btn-change-01_hover.webp);
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li-01 .chara_btn_inner::after {
  background-image: url(../images/select-01.webp);
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li-02::before {
  background-image: url(../images/chara_btn-change-02_hover.webp);
}
main #character .character_profile .caharacter_btn-stylechange .character_btn-stylechange_li-02 .chara_btn_inner::after {
  background-image: url(../images/select-02.webp);
}
main #character .character_story {
  height: 42.708vw;
  margin-top: 3.125vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url(../images/chara_story-bg.webp) no-repeat center center/contain;
  text-shadow: 0px 0px 6px rgb(199, 86, 14);
}
main #character .character_story p {
  text-align: center;
  line-height: 2;
  margin-bottom: 2.083vw;
  color: #fcfcfc;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
main #character .character_story p.active {
  opacity: 1;
  transform: translateY(0);
}
main #character .character_story p:last-of-type {
  margin-bottom: 0;
}
main #character .character_story p:first-of-type {
  margin-top: 2.917vw;
}
@media screen and (max-width: 767px) {
  main #character .character_story {
    height: 128.972vw;
    margin-top: 18.692vw;
    padding: 0 4.673vw;
    background: url(../images/sp/chara_story-bg.webp) no-repeat center center/contain;
  }
  main #character .character_story p {
    margin-bottom: 7.477vw;
  }
  main #character .character_story p:first-of-type {
    margin-top: 7.477vw;
  }
}
main #history {
  margin-top: -4vw;
  padding-top: 8.333vw;
  -webkit-mask-image: url("../images/top-wave.png"), linear-gradient(#fff, #fff);
  mask-image: url("../images/top-wave.png"), linear-gradient(#fff, #fff);
  -webkit-mask-position: top left, bottom left;
  mask-position: top left, bottom left;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: auto 4.167vw, 100% calc(100% - 4.167vw);
  mask-size: auto 4.167vw, 100% calc(100% - 4.167vw);
  position: sticky;
  top: var(--sticky-top, 0px);
  z-index: 10;
  background-color: #ed7428;
}
@media screen and (max-width: 767px) {
  main #history {
    padding-top: 21vw;
    -webkit-mask-size: auto 6.075vw, 100% calc(100% - 6.075vw);
    mask-size: auto 6.075vw, 100% calc(100% - 6.075vw);
  }
}
main #history .history_intro_box {
  width: 100%;
  height: 100vh;
  padding-top: 8vw;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: #ed7428;
  -webkit-mask-image: linear-gradient(#fff 80%, transparent);
  mask-image: linear-gradient(#fff 80%, transparent);
  -webkit-mask-position: bottom left;
  mask-position: bottom left;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media screen and (max-width: 767px) {
  main #history .history_intro_box {
    display: block;
    padding-top: 25vw;
  }
}
main #history .history_intro {
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 4.219vw;
  margin-bottom: 5.417vw;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
@media screen and (max-width: 767px) {
  main #history .history_intro {
    margin-top: 15.421vw;
    margin-bottom: 13.084vw;
  }
}
main #history .history_intro.active {
  opacity: 1;
  transform: translateY(0);
}
main #history .history_ad {
  justify-content: space-between;
  align-items: center;
  width: 35vw;
  margin: 0 auto;
  position: relative;
  transition: all ease-in-out 0.6s;
}
main #history .history_ad::before {
  content: "";
  width: 50%;
  height: 0.104vw;
  background-color: #fcfcfc;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1, 1);
  transition: all ease-in-out 0.6s;
}
main #history .history_ad.active {
  width: 50vw;
}
main #history .history_ad.active::before {
  width: 60%;
}
@media screen and (max-width: 767px) {
  main #history .history_ad {
    width: 66.822vw;
  }
  main #history .history_ad::before {
    width: 40%;
    height: 0.467vw;
  }
  main #history .history_ad.active {
    width: 84vw;
  }
  main #history .history_ad.active::before {
    width: 50%;
  }
}
main #history .history_ad-txt {
  font-size: 2.604vw;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  main #history .history_ad-txt {
    font-size: 5.374vw;
  }
}
main #history .history_btn-scroll {
  text-align: center;
  position: fixed;
  bottom: 2.083vw;
  right: 2.083vw;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  main #history .history_btn-scroll {
    bottom: 10.748vw;
    right: 3.738vw;
  }
}
main #history {
  /* 外枠のコンテナ：画面外に出たテキストを隠す */
}
main #history .marquee-container {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  width: 100vw;
  color: #fff;
  font-size: 8.333vw;
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  main #history .marquee-container {
    font-size: 18.692vw;
  }
}
main #history {
  /* アニメーションするテキストブロック */
}
main #history .marquee-text {
  display: flex;
  flex-shrink: 0;
  will-change: transform;
  backface-visibility: hidden;
  animation: scroll-left 40s linear infinite;
}
main #history {
  /* 左へ移動させるアニメーションのキーフレーム */
}
@keyframes scroll-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}
main {
  /* --- 左下の年月表示（フリップアニメーション風） --- */
}
main .date-flip-container {
  position: fixed;
  bottom: 3.854vw;
  left: 4.583vw;
  display: flex;
  z-index: 100;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  main .date-flip-container {
    bottom: 18.692vw;
    left: 7.477vw;
  }
}
main {
  /* 1文字ごとの枠（この中で数字がスライドする） */
}
main .digit-wrapper {
  position: relative;
  display: inline-block;
  height: 7.292vw;
  line-height: 7.292vw;
  overflow: hidden;
  margin: 0 0.104vw;
}
@media screen and (max-width: 767px) {
  main .digit-wrapper {
    height: 13.084vw;
    line-height: 13.084vw;
    margin: 0 0.234vw;
  }
}
main .digit-text {
  display: block;
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 7.292vw;
  font-weight: 900;
  color: #fcfcfc;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, opacity;
}
@media screen and (max-width: 767px) {
  main .digit-text {
    font-size: 13.084vw;
  }
}
main {
  /* --- アニメーション用のクラス --- */
  /* 消えていく古い数字（上にスライドしながらフェードアウト） */
}
main .digit-text.is-leaving {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
}
main {
  /* 現れる新しい数字（下から定位置へスライドしながらフェードイン） */
}
main .digit-text.is-entering {
  transform: translateY(50%);
  opacity: 0;
}
main {
  /* 定位置にいる状態 */
}
main .digit-text.is-active {
  transform: translateY(0);
  opacity: 1;
}
main .tunnel-wrapper {
  position: relative;
}
main .tunnel-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  perspective: 1000px;
  transition: background 0.5s ease;
}
main .tunnel-sticky::before {
  content: "";
  width: 44.167vw;
  height: 35.156vw;
  background-image: url(../images/history_deco-left.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  main .tunnel-sticky::before {
    width: 100%;
    height: 100vh;
    background-image: url(../images/sp/history_deco.webp);
    background-size: cover;
    background-position: center center;
  }
}
main .tunnel-sticky::after {
  content: "";
  width: 32.917vw;
  height: 100vh;
  background-image: url(../images/history_deco-right.webp);
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main .tunnel-sticky::after {
    display: none;
  }
}
main #js-items-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
main #js-tunnel-sticky[data-theme=theme-2] .tunnel-item {
  box-shadow: 10px 10px 0px 0px rgba(237, 116, 40, 0.3);
}
main #js-tunnel-sticky[data-theme=theme-2] .tunnel-item.type-news {
  box-shadow: none;
}
main #js-tunnel-sticky[data-theme=theme-2] .tunnel-item.type-news .item-text {
  text-shadow: 0px 0px 6px rgb(237, 116, 40);
}
main #js-tunnel-sticky[data-theme=theme-3] .tunnel-item {
  box-shadow: 10px 10px 0px 0px rgba(0, 150, 196, 0.3);
}
main #js-tunnel-sticky[data-theme=theme-3] .tunnel-item.type-news {
  box-shadow: none;
}
main #js-tunnel-sticky[data-theme=theme-3] .tunnel-item.type-news .item-text {
  text-shadow: 0px 0px 6px rgb(0, 150, 196);
}
main #js-tunnel-sticky[data-theme=theme-4] .tunnel-item {
  box-shadow: 10px 10px 0px 0px rgba(189, 16, 16, 0.3);
}
main #js-tunnel-sticky[data-theme=theme-4] .tunnel-item.type-news {
  box-shadow: none;
}
main #js-tunnel-sticky[data-theme=theme-4] .tunnel-item.type-news .item-text {
  text-shadow: 0px 0px 6px rgb(237, 116, 40);
}
main {
  /* --- カード要素のベース --- */
}
main .tunnel-item {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  color: #564444;
  text-align: center;
  border-radius: 64px;
  border-radius: 3.333vw;
  box-shadow: 10px 10px 0px 0px rgba(237, 116, 40, 0.3);
  box-sizing: border-box;
  transform-origin: center center;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
}
@media screen and (max-width: 767px) {
  main .tunnel-item {
    border-radius: 24px;
    box-shadow: 5px 5px 0px 0px rgba(237, 116, 40, 0.3);
  }
}
main .tunnel-item .card-img,
main .tunnel-item .item-text,
main .tunnel-item .card-desc,
main .tunnel-item figure,
main .tunnel-item .img-201907,
main .tunnel-item .img-201907-sp {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
}
main .tunnel-item .img-201907 {
  transform: translateY(-30%);
}
main .tunnel-item.is-active .card-img,
main .tunnel-item.is-active .item-text,
main .tunnel-item.is-active .card-desc,
main .tunnel-item.is-active figure,
main .tunnel-item.is-active .img-201907,
main .tunnel-item.is-active .img-201907-sp {
  opacity: 1;
  transform: translateY(0);
}
main .tunnel-item.is-active .img-201907 {
  transform: translateY(-50%);
}
main .tunnel-item.is-active .img-202607-02::before, main .tunnel-item.is-active .img-202607-02::after {
  transform: translateY(-50%) scale(1);
  transition-delay: 0.7s;
}
main .tunnel-item.is-active .card-img,
main .tunnel-item.is-active .img-201907,
main .tunnel-item.is-active .img-201907-sp {
  transition-delay: 0.1s;
}
main .tunnel-item.is-active .item-text,
main .tunnel-item.is-active .card-desc,
main .tunnel-item.is-active figure {
  transition-delay: 0.2s;
}
main .tunnel-item.is-active.is-reo .card-desc {
  transition-delay: 0.6s;
}
main {
  /* 沿革（デフォルト）のデザイン */
}
main .tunnel-item.type-history {
  width: 39.583vw;
  padding: 1.667vw 0 3.594vw;
}
main .tunnel-item.type-history .item-text {
  line-height: 2;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  main .tunnel-item.type-history {
    width: 369px;
    padding: 22px 0 32px;
  }
}
main .tunnel-item.is-reo {
  left: 39%;
}
@media screen and (max-width: 767px) {
  main .tunnel-item.is-reo {
    left: 50%;
  }
}
main .tunnel-item.is-25th {
  width: 45.833vw;
}
@media screen and (max-width: 767px) {
  main .tunnel-item.is-25th {
    width: 369px;
  }
}
main .tunnel-item.is-end .card-desc {
  line-height: 2;
}
main .tunnel-item.is-end .scroll_icon {
  position: relative;
}
main .tunnel-item.is-end .scroll_icon span {
  display: inline-block;
  width: 1.25vw;
  height: 0.625vw;
  position: absolute;
  bottom: -1.6vw;
  left: 50%;
  transform: translateX(-50%);
  animation: updown 2s infinite ease-in-out;
}
main .tunnel-item.is-end .scroll_icon span::before, main .tunnel-item.is-end .scroll_icon span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.052vw);
  width: 0.104vw;
  height: 0.781vw;
  border-radius: 520.781vw;
  background-color: #fcfcfc;
  transform-origin: 50% calc(100% - 1px);
}
main .tunnel-item.is-end .scroll_icon span::before {
  transform: rotate(45deg);
}
main .tunnel-item.is-end .scroll_icon span::after {
  transform: rotate(-45deg);
}
@media screen and (max-width: 767px) {
  main .tunnel-item.is-end .scroll_icon span {
    width: 5.607vw;
    height: 3.271vw;
    bottom: -8vw;
  }
  main .tunnel-item.is-end .scroll_icon span::before, main .tunnel-item.is-end .scroll_icon span::after {
    left: calc(50% - 0.234vw);
    width: 0.467vw;
    height: 3.505vw;
    border-radius: 2336.215vw;
  }
}
main .tunnel-item.is-end,
main .tunnel-item.is-reo-sp {
  background-color: transparent;
  color: #fcfcfc;
  box-shadow: none !important;
}
main {
  /* 時事ニュースのデザイン */
}
main .tunnel-item.type-news {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 45.313vw;
  background-color: transparent;
  font-weight: 800;
  text-align: left;
  box-shadow: none;
}
@media screen and (max-width: 767px) {
  main .tunnel-item.type-news {
    width: 369px;
    max-width: none;
    text-align: center;
  }
}
main .tunnel-item.type-news .item-text {
  color: #fcfcfc;
  line-height: 2;
  text-shadow: 0px 0px 6px rgb(199, 86, 14);
}
main .tunnel-item.type-news .custom-card {
  text-align: left;
}
@media screen and (max-width: 767px) {
  main .tunnel-item.type-news .custom-card {
    text-align: center;
  }
}
main .tunnel-item.type-news .badge-area {
  display: inline-block;
  background: #fcfcfc;
  color: #ed7428;
}
main {
  /* --- ★テンプレート内で自由に使うカスタムクラス --- */
}
main .custom-card {
  text-align: center;
}
main .custom-card .badge-area {
  display: inline-block;
  background: #ed7428;
  color: #fff;
  padding: 0.313vw 1.25vw;
  border-radius: 1.198vw;
  margin-bottom: 1.667vw;
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.25vw;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@media screen and (max-width: 767px) {
  main .custom-card .badge-area {
    margin-bottom: 16px;
    font-size: 14px;
    padding: 6px 24px;
    border-radius: 23px;
  }
}
main .custom-card .card-img {
  width: 100%;
  height: auto;
}
main .custom-card .card-desc {
  font-size: 1.667vw;
  line-height: 1.5;
  letter-spacing: 0.05em;
  margin-bottom: 1.667vw;
}
@media screen and (max-width: 767px) {
  main .custom-card .card-desc {
    font-size: 16px;
    margin-bottom: 16px;
  }
}
main {
  /* 個々設定 */
}
main .img-200108 img {
  width: 13.021vw;
}
@media screen and (max-width: 767px) {
  main .img-200108 img {
    width: 184px;
  }
}
main .img-200901 img {
  width: 15.625vw;
}
@media screen and (max-width: 767px) {
  main .img-200901 img {
    width: 234px;
  }
}
main .cafereo-2011-flex {
  width: 34.479vw;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
main .cafereo-2011-flex .card-desc {
  width: 69%;
  margin-bottom: 0;
}
main .cafereo-2011-flex .img-201107 {
  width: 12.031vw;
}
@media screen and (max-width: 767px) {
  main .cafereo-2011-flex {
    width: 343px;
  }
  main .cafereo-2011-flex .img-201107 {
    width: 125px;
  }
}
main .img-201404 img {
  width: 15.625vw;
}
@media screen and (max-width: 767px) {
  main .img-201404 img {
    width: 200px;
  }
}
main .img-201508 img {
  width: 7.813vw;
}
@media screen and (max-width: 767px) {
  main .img-201508 img {
    width: 97px;
  }
}
main .cafereo-2016-flex {
  width: 34.479vw;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
main .cafereo-2016-flex .card-desc {
  width: 69%;
  margin-bottom: 0;
}
main .cafereo-2016-flex .img-201107 {
  width: 12.031vw;
}
@media screen and (max-width: 767px) {
  main .cafereo-2016-flex {
    width: 315px;
  }
  main .cafereo-2016-flex .img-201107 {
    width: 120px;
  }
}
main .img-201709 img {
  width: 14.063vw;
}
@media screen and (max-width: 767px) {
  main .img-201709 img {
    width: 146px;
  }
}
main .img-201907 {
  position: absolute;
  width: 40%;
  top: 50%;
  right: -50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  main .img-201907 {
    display: none;
  }
}
main .img-201907-sp img {
  width: 183px;
}
main .custom-card .card-desc.card-desc-201907 {
  margin-bottom: 0;
}
main .img-202407 {
  margin-bottom: 1.667vw;
}
main .img-202407 img {
  width: 29.688vw;
}
@media screen and (max-width: 767px) {
  main .img-202407 {
    margin-bottom: 16px;
  }
  main .img-202407 img {
    width: 183px;
  }
}
main .custom-card .card-desc.card-desc-202407 {
  margin-bottom: 0;
}
main .img-202607-01 img {
  width: 26.042vw;
}
@media screen and (max-width: 767px) {
  main .img-202607-01 img {
    width: 280px;
  }
}
main .img-202607-02 {
  position: relative;
}
main .img-202607-02::before, main .img-202607-02::after {
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
main .img-202607-02::before {
  width: 8.958vw;
  height: 15.417vw;
  background-image: url(../images/history_img/deco-left.webp);
  left: 3.646vw;
}
@media screen and (max-width: 767px) {
  main .img-202607-02::before {
    width: 54px;
    height: 99px;
    left: 30px;
  }
}
main .img-202607-02::after {
  width: 9.531vw;
  height: 16.771vw;
  background-image: url(../images/history_img/deco-right.webp);
  right: 3.646vw;
}
@media screen and (max-width: 767px) {
  main .img-202607-02::after {
    width: 64px;
    height: 113px;
    right: 30px;
  }
}
main .img-202607-02 img {
  width: 18.698vw;
}
@media screen and (max-width: 767px) {
  main .img-202607-02 img {
    width: 157px;
  }
}
main .bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
}
main {
  /* 各レイヤーに指定の背景色を設定 */
}
main #bg-1 {
  background: linear-gradient(180deg, rgb(255, 193, 93) 0%, rgb(237, 116, 40) 100%);
  opacity: 1;
}
main #bg-2 {
  background: linear-gradient(180deg, rgb(255, 189, 69) 0%, rgb(255, 207, 80) 100%);
}
main #bg-3 {
  background: linear-gradient(180deg, rgb(177, 229, 236) 0%, rgb(108, 208, 255) 100%);
}
main #bg-4 {
  background: #ed7428;
}
main {
  /* ==========================================
     タイムラインコントロール (SKIP & シークバー)
  ========================================== */
}
main .timeline-controls {
  position: fixed;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  left: 0;
  width: 100%;
  height: 40px;
  z-index: 999999;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  main .timeline-controls {
    /* スマホ版もズレないようにpxで固定（高さはお好みで調整してください） */
    bottom: 17vh;
  }
}
main {
  /* ==========================================
   ★SP版のみ「線のタッチ」と「ドットのタッチ」を無効化し、「つまみ」だけ生かす魔法
   ========================================== */
}
@media screen and (max-width: 768px) {
  main #js-timeline-seekbar {
    /* 線（トラック）全体へのタッチ判定を消し去る */
    pointer-events: none;
  }
  main #js-timeline-seekbar::-webkit-slider-thumb {
    /* つまみ（丸ぽっち）部分だけは、特別にタッチ判定を復活させる！ */
    pointer-events: auto;
  }
  main #js-timeline-seekbar::-moz-range-thumb {
    pointer-events: auto;
  }
  main {
    /* ★追加：ドット（年号）のタッチ判定も完全に消し去る！ */
  }
  main .timeline-milestone {
    pointer-events: none;
  }
}
main {
  /* シークバーとメモリをまとめる枠 */
}
main .timeline-seekbar-wrapper {
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 70%;
  max-width: 643px;
  max-width: 33.49vw;
  height: 20px;
  /* ★ここにも念のため pointer-events を明示してタップ貫通を防ぐ */
  pointer-events: auto;
}
@media screen and (max-width: 767px) {
  main .timeline-seekbar-wrapper {
    width: 80%;
    max-width: 643px;
    left: 50%;
  }
}
main {
  /* シークバー本体 */
}
main .timeline-seekbar {
  touch-action: pan-x;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 100%;
  height: 2px;
  background: rgba(252, 252, 252, 0.5);
  border-radius: 1px;
  outline: none;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  /* つまみの共通スタイル */
}
main .timeline-seekbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fcfcfc;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3);
  -webkit-transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* ★ここにも pointer-events を明示 */
  pointer-events: auto;
}
main .timeline-seekbar::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
}
main .timeline-seekbar::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fcfcfc;
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.3);
  -moz-transition: transform 0.2s ease, box-shadow 0.2s ease;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  /* ★ここにも pointer-events を明示 */
  pointer-events: auto;
}
main .timeline-seekbar::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.4);
}
main {
  /* 年代の区切り（メモリ） */
}
main .timeline-milestones {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 1;
}
main .timeline-milestone {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px; /* ★画像を再現した小さなドット */
  height: 6px;
  background: #fcfcfc;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}
main .timeline-milestone:hover {
  transform: translate(-50%, -50%) scale(1.5);
}
main .timeline-milestone {
  /* 年号のテキスト */
}
main .timeline-milestone .milestone-text {
  position: absolute;
  bottom: 16px; /* ★ドットの「上」に配置 */
  left: 50%;
  transform: translateX(-50%);
  color: #fcfcfc;
  font-size: 0.833vw;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  main .timeline-milestone .milestone-text {
    font-size: 1.1rem;
    bottom: 14px;
  }
}
main {
  /* SKIPボタンのスタイル */
}
main .timeline-skip-btn {
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fcfcfc;
  font-size: 1.667vw;
  line-height: 1;
  padding-right: 1.042vw;
  cursor: pointer;
  transition: all 0.3s ease;
  position: absolute;
  bottom: 0;
  right: 3.75vw;
}
main .timeline-skip-btn::before {
  content: "";
  width: 0.625vw;
  height: 1.25vw;
  background-image: url(../images/icon-arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  transition: all 0.4s;
}
@media screen and (min-width: 768px) {
  main .timeline-skip-btn:hover::before {
    right: -3%;
  }
}
@media screen and (max-width: 767px) {
  main .timeline-skip-btn {
    font-size: 4.206vw;
    padding-right: 3.505vw;
    right: 5.607vw;
    bottom: -15.7vw;
  }
  main .timeline-skip-btn::before {
    content: "";
    width: 1.636vw;
    height: 3.037vw;
  }
}
main #message {
  background-color: #fcfcfc;
  padding-bottom: 40vw;
  z-index: 20;
}
@media screen and (max-width: 767px) {
  main #message {
    padding-bottom: 80vw;
  }
}
main #message .bg_mask-massage {
  padding-top: 6.25vw;
  padding-bottom: 10.417vw;
  -webkit-mask-image: url("../images/wave.png"), linear-gradient(#fff, #fff);
  mask-image: url("../images/wave.png"), linear-gradient(#fff, #fff);
  -webkit-mask-position: bottom left, top left;
  mask-position: bottom left, top left;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: auto 4.167vw, 100% calc(100% - 4.167vw);
  mask-size: auto 4.167vw, 100% calc(100% - 4.167vw);
}
@media screen and (max-width: 767px) {
  main #message .bg_mask-massage {
    padding-top: 21vw;
    padding-bottom: 25vw;
    -webkit-mask-size: auto 6.075vw, 100% calc(100% - 6.075vw);
    mask-size: auto 6.075vw, 100% calc(100% - 6.075vw);
  }
}
main #message p {
  font-size: 1.042vw;
  line-height: 1.8;
  margin-bottom: 1.875vw;
}
main #message p:last-of-type {
  margin-bottom: 3.958vw;
}
@media screen and (max-width: 767px) {
  main #message p {
    font-size: 3.738vw;
    margin-bottom: 6.776vw;
  }
  main #message p:last-of-type {
    margin-bottom: 13.084vw;
  }
}
main #message p.message_name {
  font-size: 1.771vw;
  line-height: 1.2;
  text-align: right;
  margin-top: 1.927vw;
  margin-bottom: 0.208vw;
}
main #message p.message_name span {
  font-size: 0.833vw;
  display: block;
  margin-bottom: 0.521vw;
}
@media screen and (max-width: 767px) {
  main #message p.message_name {
    font-size: 4.673vw;
    margin-top: 7.009vw;
    margin-bottom: 4.673vw;
  }
  main #message p.message_name span {
    font-size: 3.271vw;
    margin-bottom: 2.336vw;
  }
}
main #message .read_more {
  margin-top: -5.729vw;
}
@media screen and (max-width: 767px) {
  main #message .read_more {
    margin-top: -25.701vw;
  }
}
main #message .massage_txt_box {
  max-height: 43.229vw;
  overflow: hidden;
  transition: max-height 0.4s ease;
  position: relative;
}
main #message .massage_txt_box::after {
  content: "";
  width: 100%;
  height: 15.625vw;
  background: #fcfcfc;
  background: linear-gradient(0deg, rgb(252, 252, 252) 0%, rgba(252, 252, 252, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  transition: opacity 0.4s ease;
}
main #message .massage_txt_box.is-open {
  max-height: 104.167vw;
}
main #message .massage_txt_box.is-open::after {
  opacity: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  main #message .massage_txt_box {
    max-height: 140.187vw;
  }
  main #message .massage_txt_box::after {
    height: 44.393vw;
  }
}
main #charatoria {
  margin-top: -21vw;
  padding-bottom: 7.813vw;
  margin-bottom: -11.979vw;
  background: transparent;
  z-index: 30;
}
@media screen and (max-width: 767px) {
  main #charatoria {
    margin-top: -15vw;
    padding-bottom: 17.056vw;
    margin-bottom: -14vw;
  }
}
main #charatoria .bg-area {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  -webkit-mask-image: url("../images/circle_top.png"), url("../images/circle_bottom.png"), linear-gradient(#fff, #fff);
  mask-image: url("../images/circle_top.png"), url("../images/circle_bottom.png"), linear-gradient(#fff, #fff);
  -webkit-mask-position: top center, bottom center, center;
  mask-position: top center, bottom center, center;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat, no-repeat;
  -webkit-mask-size: 100% 54.688vw, 100% 46.406vw, 100% calc(100% - 54.688vw);
  mask-size: 100% 54.688vw, 100% 46.406vw, 100% calc(100% - 54.688vw);
}
@media screen and (max-width: 767px) {
  main #charatoria .bg-area {
    -webkit-mask-size: 100% 54.673vw, 100% 54.673vw, 100% calc(100% - 54.673vw);
    mask-size: 100% 54.673vw, 100% 54.673vw, 100% calc(100% - 54.673vw);
  }
}
main #charatoria .charatoria_logo {
  width: 36.458vw;
  position: absolute;
  top: -11vw;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_logo {
    width: 93.458vw;
    top: -34vw;
  }
}
main #charatoria .header-container {
  position: absolute;
  top: -19vw;
  width: 100%;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  main #charatoria .header-container {
    top: -59vw;
  }
}
main #charatoria .curve-svg {
  display: block;
  width: 100%; /* 画面幅に合わせて伸縮 */
  height: auto; /* 高さは比率を保ったまま自動調整 */
  /* ▼ min-width: 1000px; を削除してスマホでの縮小を許可 ▼ */
}
main #charatoria .svg-curve-txt {
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  fill: #dcedf2;
}
main #charatoria {
  /* --- PC用の表示設定（769px以上） --- */
}
main #charatoria .svg-pc {
  display: block;
}
main #charatoria .svg-sp {
  display: none;
}
main #charatoria .txt-pc {
  font-size: 70px;
}
main #charatoria {
  /* --- SP用の表示設定（768px以下） --- */
}
@media (max-width: 768px) {
  main #charatoria .svg-pc {
    display: none;
  }
  main #charatoria .svg-sp {
    display: block;
  }
  main #charatoria .txt-sp {
    font-size: 120px;
  }
}
main #charatoria .charatoria_intro {
  line-height: 2;
  text-align: center;
  margin-top: 3.438vw;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_intro {
    margin-top: 11.682vw;
  }
}
main #charatoria .charatoria_intro.active {
  opacity: 1;
  transform: translateY(0);
}
main #charatoria .charatoria_illustrator_interview {
  display: flex;
  justify-content: space-between;
  margin-top: 2.917vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview {
    flex-direction: column;
    margin-top: 7.477vw;
  }
}
main #charatoria .charatoria_illustrator_interview-img {
  width: 33.385vw;
  height: 47.188vw;
  position: sticky;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview-img {
    width: 100%;
    height: auto;
    position: static;
  }
}
main #charatoria .charatoria_illustrator_interview-txt {
  width: 51%;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview-txt {
    width: 100%;
    margin-top: 7.477vw;
  }
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name {
  align-items: flex-end;
  gap: 2.083vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name {
    gap: 5.607vw;
  }
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name .illustrator_name {
  font-size: 1.042vw;
  letter-spacing: 0.05em;
  color: #ffcf50;
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name .illustrator_name span {
  font-size: 2.604vw;
  display: block;
  margin-top: 0.781vw;
  color: #fcfcfc;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name .illustrator_name {
    font-size: 3.271vw;
  }
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name .illustrator_name span {
    font-size: 7.477vw;
    margin-top: 3.738vw;
  }
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name .illustrator_link a {
  display: block;
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name .illustrator_link a img {
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name .illustrator_link a:hover img {
    transform: scale(1.2);
  }
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview-txt_name .illustrator_link a {
    width: 8.645vw;
  }
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa {
  margin-bottom: 4.167vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa {
    margin-bottom: 13.084vw;
  }
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa.charatoria_illustrator_interview_qa-01 {
  margin-top: 2.917vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa.charatoria_illustrator_interview_qa-01 {
    margin-top: 5.607vw;
  }
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa:last-of-type {
  margin-bottom: 0;
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa.active .charatoria_illustrator_interview-box {
  transform: scale(1);
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa.active .charatoria_illustrator_interview-box.charatoria_illustrator_interview-a {
  transition-delay: 0.4s;
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box {
  width: 100%;
  padding: 1.667vw;
  border-radius: 1.667vw;
  font-size: 1.042vw;
  transform: scale(0);
  transition: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box {
    padding: 5.14vw 4.673vw 7.477vw;
    border-radius: 3.738vw;
    font-size: 3.271vw;
  }
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box p {
  position: relative;
  padding-left: 3.125vw;
  line-height: 2;
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box p::before {
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2.083vw;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box p {
    padding-left: 0;
  }
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box p::before {
    font-size: 5.607vw;
    display: block;
    position: static;
    margin-bottom: 2.336vw;
  }
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box.charatoria_illustrator_interview-q {
  color: #564444;
  background: #fcfcfc;
  box-shadow: 6px 6px 0px 0px rgb(0, 179, 209);
  margin-bottom: 1.563vw;
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box.charatoria_illustrator_interview-q p::before {
  content: "Q.";
  color: #0096c4;
  top: -0.521vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box.charatoria_illustrator_interview-q {
    margin-bottom: 5.607vw;
  }
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box.charatoria_illustrator_interview-a {
  background-color: #564444;
  box-shadow: 6px 6px 0px 0px rgb(252, 252, 252);
}
main #charatoria .charatoria_illustrator_interview .charatoria_illustrator_interview_qa .charatoria_illustrator_interview-box.charatoria_illustrator_interview-a p::before {
  content: "A.";
}
main #charatoria .charatoria_concept_wrapper {
  position: relative;
  width: 100%;
}
main #charatoria .charatoria_concept {
  width: 100%;
  max-width: 97.917vw;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  margin-top: 6.25vw;
  background: url(../images/charatoria_concept-bg.webp) no-repeat #fcfcfc center center/35%;
  border-radius: 6.25vw;
  color: #564444;
  position: sticky;
  top: 0;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  main #charatoria .charatoria_concept {
    height: 65dvh;
  }
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept {
    max-width: 96.262vw;
    height: 100dvh;
    background: url(../images/charatoria_concept-bg.webp) no-repeat #fcfcfc center center/85%;
    border-radius: 7.477vw;
  }
}
main #charatoria .charatoria_concept_inner {
  padding: 5.208vw 31.875vw 8.333vw;
  text-align: center;
  line-height: 2;
  height: auto;
  will-change: transform;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_inner {
    padding: 9.346vw 5.6vw;
  }
}
main #charatoria .charatoria_concept_inner p {
  margin-bottom: 2.5vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_inner p {
    margin-bottom: 6.776vw;
  }
}
main #charatoria .charatoria_concept_inner p:nth-of-type(2) {
  margin-bottom: 5.469vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_inner p:nth-of-type(2) {
    margin-bottom: 13.084vw;
  }
}
main #charatoria .charatoria_concept_inner p:last-of-type {
  font-size: 1.667vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_inner p:last-of-type {
    font-size: 4.673vw;
  }
}
main #charatoria .charatoria_concept_inner p.Outlined_txt-charatoria {
  width: 100%;
  max-width: 32.813vw;
  margin: 0 auto;
  margin-bottom: 1.875vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_inner p.Outlined_txt-charatoria {
    max-width: 83vw;
    margin-bottom: 3.271vw;
  }
}
main #charatoria .charatoria_concept_inner p.Outlined_txt-product {
  width: 100%;
  max-width: 30vw;
  margin: 0 auto;
  margin-bottom: 1.875vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_inner p.Outlined_txt-product {
    max-width: 84.112vw;
    margin-bottom: 7.009vw;
  }
}
main #charatoria .charatoria_concept_inner .charatoria-text {
  font-weight: 800;
  paint-order: stroke fill;
  stroke: #fcfcfc;
  stroke-width: 0.521vw;
  stroke-linejoin: round;
  font-size: 0;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_inner .charatoria-text {
    stroke-width: 14px;
  }
}
main #charatoria .charatoria_concept_inner .product-text {
  paint-order: stroke fill;
  stroke: #fcfcfc;
  stroke-width: 0.521vw;
  stroke-linejoin: round;
  font-size: 0;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_inner .product-text {
    stroke-width: 3.271vw;
  }
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_inner .charactoria_concept_img {
    margin-bottom: 14.019vw;
  }
}
main #charatoria .charatoria_concept_deco_ul {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_concept_deco_ul {
    display: none;
  }
}
main #charatoria .charatoria_concept_deco_li {
  position: absolute;
  top: 4vw;
}
main #charatoria .charatoria_concept_deco_li img {
  height: 93vh;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: none;
}
@media screen and (max-width: 1024px) {
  main #charatoria .charatoria_concept_deco_li img {
    height: 63vh;
  }
}
main #charatoria .charatoria_concept_deco_li-left {
  width: 23%;
  left: 7vw;
}
main #charatoria .charatoria_concept_deco_li-right {
  width: 22%;
  right: 8vw;
}
main #charatoria .charatoria_plan {
  margin-top: 5.938vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan {
    margin-top: 18.692vw;
    position: relative;
  }
}
main #charatoria .charatoria_plan .charatoria_plan_title {
  justify-content: space-between;
  width: 100%;
  max-width: 75.833vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_title {
    flex-direction: column;
    max-width: 86vw;
  }
}
main #charatoria .charatoria_plan .charatoria_plan_title p {
  width: 60%;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: 2.865vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_title p {
    width: 100%;
    margin-top: 5.5vw;
    text-align: center;
  }
}
main #charatoria .charatoria_plan .charatoria_plan_wrapper {
  position: relative;
  width: 100%;
}
main #charatoria .charatoria_plan .charatoria_plan_box {
  width: 100%;
  position: relative;
  overflow: hidden;
}
main #charatoria .charatoria_plan .charatoria_plan_box::before {
  content: "";
  width: 103.854vw;
  height: 9.583vw;
  background-image: url(../images/charatoria_plan-shelf.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  bottom: -1.042vw;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_box {
    position: sticky;
    top: 0;
  }
  main #charatoria .charatoria_plan .charatoria_plan_box::before {
    width: 100%;
    height: 20.561vw;
    background-image: url(../images/sp/charatoria_plan-shelf.webp);
    top: 158vw;
  }
}
main #charatoria .charatoria_plan .charatoria_plan_ul {
  width: 100%;
  max-width: 72.448vw;
  margin: 0 auto;
  margin-top: 3.333vw;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_ul {
    width: 232.71vw;
    max-width: none;
    margin-top: 14.019vw;
    padding: 0 11.215vw;
    will-change: transform;
  }
}
main #charatoria .charatoria_plan .charatoria_plan_li {
  position: relative;
  width: 24.479vw;
  height: 34.427vw;
  z-index: 0;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_li {
    width: 100vw;
    height: 114.486vw;
  }
}
main #charatoria .charatoria_plan .charatoria_plan_li::before {
  content: "01";
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.875vw;
  color: #0096c4;
  width: 5.99vw;
  height: 5.781vw;
  background-image: url(../images/charatoria_plan-star-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -2.083vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_li::before {
    font-size: 5.374vw;
    width: 19.626vw;
    height: 18.925vw;
    top: -7.009vw;
  }
}
main #charatoria .charatoria_plan .charatoria_plan_li::after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../images/charatoria_plan-bottle-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
main #charatoria .charatoria_plan .charatoria_plan_li .charatoria_plan_txt {
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
  text-shadow: 0px 0px 6px rgb(0, 150, 196);
  padding-top: 10.938vw;
  margin-bottom: 2.604vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_li .charatoria_plan_txt {
    font-size: 4.206vw;
    padding-top: 28vw;
    margin-bottom: 7.477vw;
  }
}
@media screen and (min-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_li-01:hover {
    transform: translateY(-5%) rotate(-5deg);
  }
  main #charatoria .charatoria_plan .charatoria_plan_li-01:hover .charatoria_plan_li_deco {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_li-01:active {
    transform: translateY(-5%) rotate(-5deg);
  }
  main #charatoria .charatoria_plan .charatoria_plan_li-01:active .charatoria_plan_li_deco {
    opacity: 1;
  }
}
main #charatoria .charatoria_plan .charatoria_plan_li-02::before {
  content: "02";
  color: #e55082;
  background-image: url(../images/charatoria_plan-star-02.webp);
}
main #charatoria .charatoria_plan .charatoria_plan_li-02::after {
  background-image: url(../images/charatoria_plan-bottle-02.webp);
}
main #charatoria .charatoria_plan .charatoria_plan_li-02 .charatoria_plan_txt {
  text-shadow: 0px 0px 6px rgb(228, 75, 126);
}
@media screen and (min-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_li-02:hover {
    transform: translateY(-5%);
  }
  main #charatoria .charatoria_plan .charatoria_plan_li-02:hover .charatoria_plan_li_deco {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_li-02:active {
    transform: translateY(-5%);
  }
  main #charatoria .charatoria_plan .charatoria_plan_li-02:active .charatoria_plan_li_deco {
    opacity: 1;
  }
}
main #charatoria .charatoria_plan .charatoria_plan_li-03::before {
  content: "03";
  color: #ee782e;
  background-image: url(../images/charatoria_plan-star-03.webp);
}
main #charatoria .charatoria_plan .charatoria_plan_li-03::after {
  background-image: url(../images/charatoria_plan-bottle-03.webp);
}
main #charatoria .charatoria_plan .charatoria_plan_li-03 .charatoria_plan_txt {
  text-shadow: 0px 0px 6px rgb(238, 120, 46);
}
@media screen and (min-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_li-03:hover {
    transform: translateY(-5%) rotate(5deg);
  }
  main #charatoria .charatoria_plan .charatoria_plan_li-03:hover .charatoria_plan_li_deco {
    opacity: 1;
  }
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan .charatoria_plan_li-03:active {
    transform: translateY(-5%) rotate(5deg);
  }
  main #charatoria .charatoria_plan .charatoria_plan_li-03:active .charatoria_plan_li_deco {
    opacity: 1;
  }
}
main #charatoria .charatoria_plan_thx {
  font-size: 1.667vw;
  line-height: 2;
  letter-spacing: 0.08em;
  text-align: center;
  margin-top: 2.344vw;
}
@media screen and (max-width: 767px) {
  main #charatoria .charatoria_plan_thx {
    font-size: 4.673vw;
    margin-top: 0;
  }
}
main #campaign {
  width: 98%;
  margin: 0 auto;
  padding-top: 26vw;
  padding-bottom: 12.5vw;
  margin-bottom: -13.021vw;
  border-bottom-left-radius: 6.25vw;
  border-bottom-right-radius: 6.25vw;
  z-index: 20;
  scroll-margin-top: -26vw;
}
@media screen and (max-width: 767px) {
  main #campaign {
    width: 97%;
    padding-top: 28vw;
    padding-bottom: 16vw;
    margin-bottom: -5vw;
    border-bottom-left-radius: 5.607vw;
    border-bottom-right-radius: 5.607vw;
    scroll-margin-top: -58vw;
  }
}
main #campaign .campaign_box {
  width: 100%;
  max-width: 54.688vw;
  margin: 0 auto;
  margin-bottom: 8vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box {
    max-width: none;
    height: 223vw;
    overflow: hidden;
    padding-top: 21vw;
    margin-bottom: 0;
  }
}
main #campaign .campaign_box::before {
  content: "";
  width: 62.604vw;
  height: 62.917vw;
  background-image: url(../images/campaign_bg.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box::before {
    width: 196.729vw;
    height: inherit;
  }
}
main #campaign .campaign_box .campaign_copy-01 {
  width: 35.26vw;
  margin: 0 auto;
  margin-top: 2.188vw;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_copy-01 {
    width: 89.252vw;
    margin-top: 6.075vw;
  }
}
main #campaign .campaign_box .campaign_copy-02 {
  width: 55.729vw;
  margin: 0 auto;
  margin-top: 0.417vw;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_copy-02 {
    width: 80.374vw;
    margin-top: 0;
  }
}
main #campaign .campaign_box .campaign_box_inner {
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
main #campaign .campaign_box .campaign_box_inner.active {
  opacity: 1;
  transform: translateY(0);
}
main #campaign .campaign_box .campaign_txt {
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
  margin-top: 2vw;
}
main #campaign .campaign_box .campaign_txt a {
  color: #ed7428;
  text-decoration: underline;
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  main #campaign .campaign_box .campaign_txt a:hover {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_txt {
    margin-top: 4vw;
  }
}
main #campaign .campaign_box .campaign_date {
  width: 48.333vw;
  height: 6.042vw;
  margin: 0 auto;
  margin-top: 2.5vw;
  margin-bottom: 2.917vw;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_date {
    flex-direction: column;
    width: 85.047vw;
    height: auto;
    margin-top: 7.477vw;
    margin-bottom: 7.477vw;
    text-align: center;
  }
}
main #campaign .campaign_box .campaign_date .campaign_date_title {
  width: 19%;
  font-size: 1.458vw;
  color: #fcfcfc;
  background-color: #ed7428;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 0.833vw;
  border-bottom-left-radius: 0.833vw;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_date .campaign_date_title {
    width: 100%;
    font-size: 3.738vw;
    padding: 1.869vw 0;
    border-top-left-radius: 3.738vw;
    border-top-right-radius: 3.738vw;
    border-bottom-left-radius: 0;
  }
}
main #campaign .campaign_box .campaign_date .campaign_date_period {
  width: 81%;
  background-color: #fcfcfc;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: 0.833vw;
  border-bottom-right-radius: 0.833vw;
}
main #campaign .campaign_box .campaign_date .campaign_date_period span {
  font-size: 2.083vw;
  line-height: 1.5;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_date .campaign_date_period {
    width: 100%;
    padding: 3.738vw 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 3.738vw;
    border-bottom-right-radius: 3.738vw;
  }
  main #campaign .campaign_box .campaign_date .campaign_date_period span {
    font-size: 4.673vw;
  }
}
main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li {
  position: absolute;
  animation: floating-campaign 2.5s ease-in-out 1.1s infinite;
}
main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-charatoria {
  width: 9.688vw;
  top: 10.417vw;
  left: -14.062vw;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-charatoria {
    width: 16.822vw;
    top: 0;
    left: 3.738vw;
  }
}
main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-plushie {
  width: 14.115vw;
  bottom: -8.333vw;
  left: -10.937vw;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-plushie {
    width: 31.542vw;
    bottom: 2.336vw;
    left: 2.103vw;
  }
}
main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-kasakko {
  width: 7.969vw;
  top: 7.813vw;
  right: -11.979vw;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-kasakko {
    width: 16.822vw;
    top: 0;
    right: 3.738vw;
  }
}
main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-charapping {
  width: 7.396vw;
  top: 23.438vw;
  right: -12.5vw;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-charapping {
    width: 14.019vw;
    top: 133.178vw;
    right: 3.738vw;
  }
}
main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-acrylicstand {
  width: 9.063vw;
  bottom: -10.937vw;
  right: -6.771vw;
}
@media screen and (max-width: 767px) {
  main #campaign .campaign_box .campaign_box_deco_ul .campaign_box_deco_li-acrylicstand {
    width: 18.925vw;
    bottom: 7.009vw;
    right: 2.103vw;
  }
}
main #future .header-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}
main #future .curve-svg {
  display: block;
  width: 100%;
  height: auto;
}
main #future .svg-curve-txt {
  font-size: 70px;
  fill: #ffcf50;
}
main #future p {
  text-align: center;
  font-size: 2.396vw;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-top: -18vw;
  opacity: 0;
  transform: translateY(10%);
  transition: all ease-in-out 0.6s;
}
main #future p.active {
  opacity: 1;
  transform: translateY(0);
}
@media screen and (max-width: 767px) {
  main #future p {
    font-size: 5.607vw;
    margin-top: -15vw;
  }
}

footer {
  width: 100%;
  padding: 17.5vw 8.594vw 4.167vw;
  color: #fcfcfc;
  background-color: #ed7428;
}
@media screen and (max-width: 767px) {
  footer {
    padding: 14.953vw 13.318vw 19.626vw;
  }
}
footer .menu_box-inner {
  gap: 5.729vw;
}
@media screen and (max-width: 767px) {
  footer .menu_box-inner {
    gap: 7.477vw;
  }
}
footer .menu_box .menu_logo {
  width: 18.2vw;
  margin-right: 4.688vw;
}
@media screen and (max-width: 767px) {
  footer .menu_box .menu_logo {
    width: 32.71vw;
    margin: 0 auto;
  }
}
@media screen and (max-width: 767px) {
  footer .menu_box .menu_nav {
    display: none;
  }
}
footer .menu_box .menu_mav_li {
  font-size: 0.833vw;
  margin-bottom: 1.042vw;
}
footer .menu_box .menu_mav_li span {
  font-size: 1.25vw;
}
footer .menu_box .menu_mav_li a:hover {
  opacity: 0.7;
}
@media screen and (max-width: 767px) {
  footer .menu_box .menu_share {
    align-self: center;
    padding-left: 0;
  }
}
@media screen and (max-width: 767px) {
  footer .menu_box .menu_share-inner {
    width: 46.262vw;
    margin: 0 auto;
  }
}
footer .menu_box .menu_share-title {
  font-size: 1.458vw;
}
@media screen and (max-width: 767px) {
  footer .menu_box .menu_share-title {
    font-size: 4.673vw;
  }
}
footer .menu_box .menu_official_ul {
  margin-top: 3.125vw;
}
@media screen and (max-width: 767px) {
  footer .menu_box .menu_official_ul {
    margin-top: 7.477vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
footer .menu_box .menu_official_li {
  font-size: 1.042vw;
  margin-bottom: 1.25vw;
}
@media screen and (max-width: 767px) {
  footer .menu_box .menu_official_li {
    font-size: 3.271vw;
    margin-bottom: 4.673vw;
  }
}
footer .menu_box .menu_official_li a svg path {
  fill: #fcfcfc;
}
@media screen and (min-width: 767px) {
  footer .menu_box .menu_official_li a:hover {
    opacity: 0.7;
  }
}
footer .copylight_txt {
  font-size: 0.729vw;
  margin-top: -1.042vw;
}
@media screen and (max-width: 767px) {
  footer .copylight_txt {
    font-size: 2.336vw;
    margin-top: 7.477vw;
    text-align: center;
  }
}
footer .btn_top {
  font-size: 1.042vw;
  position: absolute;
  bottom: 4.167vw;
  right: 8.75vw;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  footer .btn_top {
    font-size: 3.738vw;
    bottom: 5.607vw;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (min-width: 767px) {
  footer .btn_top:hover {
    opacity: 0.6;
  }
}
footer .btn_top span {
  display: inline-block;
  width: 1.25vw;
  height: 0.625vw;
  position: absolute;
  top: -1.042vw;
  left: 50%;
  transform: translateX(-50%);
  animation: updown 2s infinite ease-in-out;
}
footer .btn_top span::before, footer .btn_top span::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% - 0.078vw);
  width: 0.156vw;
  height: 0.875vw;
  border-radius: 520.781vw;
  background-color: #fcfcfc;
  transform-origin: 50% 1.5px;
}
@keyframes updown {
  0% {
    transform: translate(-50%, 0%);
  }
  50% {
    transform: translate(-50%, -10px);
  }
  100% {
    transform: translate(-50%, 0%);
  }
}
footer .btn_top span::before {
  transform: rotate(51.35deg);
}
footer .btn_top span::after {
  transform: rotate(-51.35deg);
}
@media screen and (max-width: 767px) {
  footer .btn_top span {
    width: 5.607vw;
    height: 3.271vw;
    top: -4vw;
  }
  footer .btn_top span::before, footer .btn_top span::after {
    left: calc(50% - 0.35vw);
    width: 0.701vw;
    height: 4.252vw;
    transform-origin: 50% 1.5px;
  }
  footer .btn_top span::before {
    transform: rotate(43.65deg);
  }
  footer .btn_top span::after {
    transform: rotate(-43.65deg);
  }
}

.modal-box {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  top: 0;
  left: 0;
  z-index: 120;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-box .modal-content {
  width: 35%;
  max-width: 50vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-content {
    width: 89%;
    max-width: 92.523vw;
  }
}
.modal-box .modal-content::-webkit-scrollbar {
  display: none;
  -webkit-appearance: none;
}
.modal-box .modal-body {
  width: 35vw;
  height: 37.083vw;
  margin: 0 auto;
  padding: 2.708vw 3.542vw;
  background-image: url(../images/modal_frame-charatoria.webp);
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 10px 0px 10px 0px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 0;
}
.modal-box .modal-body-01 {
  background-image: url(../images/modal_frame-charatoria-01.webp);
}
.modal-box .modal-body-02 {
  background-image: url(../images/modal_frame-charatoria-02.webp);
}
.modal-box .modal-body-03 {
  background-image: url(../images/modal_frame-charatoria-03.webp);
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body {
    width: 100%;
    height: auto;
    background-image: url(../images/sp/modal_frame-charatoria.webp);
    padding: 9.346vw 5.607vw 6.514vw;
  }
  .modal-box .modal-body-01 {
    background-image: url(../images/sp/modal_frame-charatoria-01.webp);
  }
  .modal-box .modal-body-02 {
    background-image: url(../images/sp/modal_frame-charatoria-02.webp);
  }
  .modal-box .modal-body-03 {
    background-image: url(../images/sp/modal_frame-charatoria-03.webp);
  }
}
.modal-box .modal-body_inner-img {
  width: 100%;
  margin-top: 0.313vw;
  margin-bottom: 1.042vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-img {
    margin-top: 1.402vw;
    margin-bottom: 4.439vw;
  }
}
.modal-box .modal-body_inner-img figure {
  height: 14.583vw;
  text-align: center;
}
.modal-box .modal-body_inner-img figure img {
  height: inherit;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-img figure {
    height: 42.523vw;
  }
}
.modal-box .modal-body_inner-txt {
  width: 100%;
  padding-top: 0.26vw;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt {
    width: 100%;
    padding-top: 0;
  }
}
.modal-box .modal-body_inner-txt .modal-goods_info_txt {
  font-size: 0.833vw;
  line-height: 2.43;
  letter-spacing: 0.05em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cline x1='0' y1='100%25' x2='100%25' y2='100%25' stroke='%23BFCBD9' stroke-width='2' stroke-dasharray='6, 5' /%3E%3C/svg%3E");
  background-size: 100% 2.43em;
  background-repeat: repeat-y;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner-txt .modal-goods_info_txt {
    font-size: 3.271vw;
    line-height: 2;
    background-size: 100% 2em;
  }
}
.modal-box .modal-body_inner .goods_detail_img .slider_goodsimg_inner {
  height: 14.583vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-box .modal-body_inner .goods_detail_img .slider_goodsimg_inner img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .goods_detail_img .slider_goodsimg_inner {
    height: 42.523vw;
  }
}
.modal-box .modal-body_inner .goods_detail_img {
  /* 画像サイズ調整 */
}
.modal-box .modal-body_inner .goods_detail_img .swiper-slide img {
  height: auto;
  width: 100%;
}
.modal-box .modal-body_inner {
  /* ページネーションの余白 */
}
.modal-box .modal-body_inner .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.modal-box .modal-body_inner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 0.208vw;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
  .modal-box .modal-body_inner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 0.701vw;
  }
}
.modal-box .modal-body_inner .swiper-horizontal > .swiper-pagination-bullets,
.modal-box .modal-body_inner .swiper-pagination-bullets.swiper-pagination-horizontal,
.modal-box .modal-body_inner .swiper-pagination-custom,
.modal-box .modal-body_inner .swiper-pagination-fraction {
  bottom: -1.562vw;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .swiper-horizontal > .swiper-pagination-bullets,
  .modal-box .modal-body_inner .swiper-pagination-bullets.swiper-pagination-horizontal,
  .modal-box .modal-body_inner .swiper-pagination-custom,
  .modal-box .modal-body_inner .swiper-pagination-fraction {
    bottom: -5vw;
  }
}
.modal-box .modal-body_inner {
  /* ページネーションのサイズと色 */
}
.modal-box .modal-body_inner .swiper-pagination-bullet {
  background-color: #fcfcfc;
  border: 2px solid #ed7428;
  height: 0.833vw;
  width: 0.833vw;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .modal-box .modal-body_inner .swiper-pagination-bullet {
    width: 2.103vw;
    height: 2.103vw;
  }
}
.modal-box .modal-body_inner .swiper-pagination-bullet-active {
  background-color: #ed7428;
}
.modal-box .close {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: -2.604vw;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.458vw;
  letter-spacing: 0.05em;
  color: #fcfcfc;
  cursor: pointer;
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  .modal-box .close:hover {
    opacity: 0.6;
  }
}
@media screen and (max-width: 767px) {
  .modal-box .close {
    font-size: 3.738vw;
    bottom: -10vw;
  }
}
.modal-box .no {
  position: absolute;
  font-family: "dela-gothic-one", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.146vw;
  color: #0096c4;
  width: 4.375vw;
  height: 4.219vw;
  padding-top: 0.2vw;
  background-image: url(../images/charatoria_plan-star-01.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -2.5vw;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-box .no.no02 {
  color: #e55082;
  background-image: url(../images/charatoria_plan-star-02.webp);
}
.modal-box .no.no03 {
  color: #ee782e;
  background-image: url(../images/charatoria_plan-star-03.webp);
}
@media screen and (max-width: 767px) {
  .modal-box .no {
    font-size: 4.439vw;
    width: 17.29vw;
    height: 16.822vw;
    top: -10.5vw;
  }
}
.modal-box .no .charatoria_plan_li_deco {
  opacity: 1;
}
.modal-box .no .charatoria_plan_li_deco .charatoria_plan_li_deco_li {
  transform: scale(0.9);
}
.modal-box .no .charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-left {
  top: 0;
  left: -1.823vw;
}
.modal-box .no .charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-right {
  top: 1.406vw;
  right: -1.719vw;
}
@media screen and (max-width: 767px) {
  .modal-box .no .charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-left {
    top: 3vw;
    left: -7vw;
  }
  .modal-box .no .charatoria_plan_li_deco .charatoria_plan_li_deco_li.charatoria_plan_li_deco-right {
    top: 8vw;
    right: -6vw;
  }
}
.modal-box .prev,
.modal-box .next {
  width: 4.583vw;
  aspect-ratio: 88/88;
  background-color: #fcfcfc;
  border-radius: 50%;
  box-shadow: 5px 5px 0px 0px rgb(0, 150, 196);
  display: block;
  position: absolute;
  top: 50%;
  transform: translateX(0%) translateY(-50%);
  z-index: 2;
  transition: all 0.4s;
  cursor: pointer;
}
.modal-box .prev::before,
.modal-box .next::before {
  content: "";
  width: 1.667vw;
  height: 1.667vw;
  background: url(../images/icon-arrow-blue.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  .modal-box .prev,
  .modal-box .next {
    width: 11.916vw;
    top: auto;
    bottom: -20vw;
  }
  .modal-box .prev::before,
  .modal-box .next::before {
    width: 4.673vw;
    height: 4.673vw;
  }
}
.modal-box .prev {
  left: -7vw;
}
@media screen and (min-width: 767px) {
  .modal-box .prev:hover {
    transform: translateX(-20%) translateY(-50%);
  }
}
@media screen and (max-width: 767px) {
  .modal-box .prev {
    left: 5vw;
  }
}
.modal-box .next {
  right: -7vw;
}
.modal-box .next::before {
  transform: translate(-50%, -50%) scale(-1, 1);
}
@media screen and (min-width: 767px) {
  .modal-box .next:hover {
    transform: translateX(20%) translateY(-50%);
  }
}
@media screen and (max-width: 767px) {
  .modal-box .next {
    right: 5vw;
  }
}

/* ==========================================
   紙吹雪（Confetti）のスタイル
   ========================================== */
#intro,
#charatoria .bg-area {
  position: relative;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -50px;
  width: 14px;
  height: 24px;
  border-radius: 2px;
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
  animation-play-state: paused;
}
@media screen and (max-width: 767px) {
  .confetti-piece {
    top: -50px;
    width: 10px;
    height: 16px;
  }
}
.is-active .confetti-piece {
  animation: confetti-fall linear forwards;
  animation-play-state: running;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    /* JSでランダムに設定した落下位置まで落とす */
    transform: translateY(var(--fall-height)) rotate(var(--fall-rotation));
    opacity: 0;
  }
}
#js-date-display-container {
  opacity: 1;
  transition: opacity 1s ease;
  will-change: opacity;
}

body.is-timeline-before #js-date-display-container,
body.is-timeline-before #history .history_btn-scroll,
body.is-timeline-before .timeline-controls {
  opacity: 0 !important;
  pointer-events: none;
}

/* --- エンディング用フェードアウト設定 --- */
#js-date-display-container,
.tunnel-wrapper,
.tunnel-wrapper .tunnel-sticky::before,
.tunnel-wrapper .tunnel-sticky::after,
.tunnel-wrapper .marquee-container,
#history .history_btn-scroll {
  transition: opacity 1s ease;
  will-change: opacity;
}

body.is-timeline-finished #js-date-display-container,
body.is-timeline-finished .tunnel-wrapper .tunnel-sticky::before,
body.is-timeline-finished .tunnel-wrapper .tunnel-sticky::after,
body.is-timeline-finished .tunnel-wrapper .marquee-container,
body.is-timeline-finished #history .history_btn-scroll,
body.is-timeline-finished .timeline-controls {
  opacity: 0 !important;
  pointer-events: none;
}

/* ネズミ */
/* CSS */
.mouse_box {
  width: 100%;
  height: 38vw;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .mouse_box {
    height: 60vw;
  }
}

.hole-area {
  position: absolute;
  right: 17vw;
  top: 12vw;
  width: 70px;
  height: 70px;
}
@media screen and (max-width: 767px) {
  .hole-area {
    right: 0px;
    top: 35vw;
    transform: scale(0.7);
  }
}

.yellow-hole {
  width: 4vw;
  height: 4vw;
  background-color: #ffcc33;
  border-radius: 50%;
  position: absolute;
  top: -1vw;
  left: -2vw;
  z-index: 1;
  transform: scale(1);
  transition: all ease-in-out 0.4s;
}
@media screen and (max-width: 767px) {
  .yellow-hole {
    width: 17vw;
    height: 17vw;
    top: -5vw;
    left: -8vw;
  }
}

.mouse {
  position: absolute;
  z-index: 2;
  width: 4vw;
  offset-path: path("M 500 10 C 250 50, 200 100, 150 -50 C 100 -150, -10 -60, 0 0");
  offset-rotate: auto 255deg;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .mouse {
    width: 17vw;
    offset-path: path("M -600 -120 C -455 -57 -400 -50 -253 -55 C -108 -82 -15 -71 0 0");
  }
}

.mouse_box.is-active .mouse {
  animation: runAndHide 4s ease-in-out infinite forwards;
}

@keyframes runAndHide {
  0% {
    offset-distance: 0%;
    transform: scale(1);
    opacity: 1;
  }
  80% {
    offset-distance: 100%;
    transform: scale(1);
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    transform: scale(0);
    opacity: 0;
  }
}
.mouse_box-02 {
  width: 100%;
  height: 20vw;
  position: absolute;
  bottom: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 767px) {
  .mouse_box-02 {
    height: 30vw;
    overflow: hidden;
  }
}

.mouse_box-02.is-visible {
  opacity: 1;
}

.hole-area-02 {
  position: absolute;
  left: 8vw;
  bottom: 3vw;
  width: 70px;
  height: 70px;
}
@media screen and (max-width: 767px) {
  .hole-area-02 {
    transform: scale(0.7);
    bottom: 4.6vw;
    left: 9vw;
  }
}

.yellow-hole-02 {
  width: 4vw;
  height: 4vw;
  background-color: #ffcc33;
  border-radius: 50%;
  position: absolute;
  top: -1.7vw;
  left: -2vw;
  z-index: 1;
  transform: scale(1);
  transition: all ease-in-out 0.4s;
}
@media screen and (max-width: 767px) {
  .yellow-hole-02 {
    width: 17vw;
    height: 17vw;
    top: -8vw;
    left: -9vw;
  }
}

.mouse-02 {
  position: absolute;
  z-index: 2;
  width: 4vw;
  offset-path: path("M 0 0 C 19 79 -77 94 -130 45 C -173 -39 -284 11 -265 90 C -278 214 -360 215 -403 140");
  offset-rotate: auto 255deg;
  transform: scale(0);
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .mouse-02 {
    width: 17vw;
    offset-path: path("M 0 0 C 25 18 68 39 92 21 C 169 -7 226 5 285 30 C 377 71 431 37 600 14");
  }
}

.mouse_box-02.is-active .mouse-02 {
  animation: runOutLeft 3s ease-in-out infinite forwards;
}

@keyframes runOutLeft {
  0% {
    offset-distance: 0%;
    transform: scale(0);
    opacity: 0;
  }
  15% {
    offset-distance: 0%;
    transform: scale(1);
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    transform: scale(1);
    opacity: 1;
  }
}
/* ステータスバー透過防止 */
.for-status-bars {
  position: fixed;
  top: 0;
  z-index: 9999;
  isolation: isolate;
  pointer-events: none;
  height: 5px;
  width: 100%;
  background-color: #000;
  mix-blend-mode: lighten;
}

/* タブバー透過防止 */
.for-tab-bars {
  position: fixed;
  bottom: 0;
  z-index: 9999;
  isolation: isolate;
  pointer-events: none;
  height: 4px;
  width: 100%;
  background-color: #000;
  mix-blend-mode: lighten;
}

/* ==========================================
   ページ全体のスクロールチラつき（再描画バグ）防止用
   ========================================== */
html,
body {
  /* スマホの端でビヨーンと伸びる動き（バウンス）を止め、スクロール計算を安定させる */
  overscroll-behavior-y: none;
}

body {
  /* スクロール時のテキストのジャギ（再レンダリング）によるチラつきを防止 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 一番負荷がかかっている「波型の切り抜き」を持つ要素にだけ、
  fixed（固定要素）を壊さない安全なプロパティでGPU描画をサポートする
*/
#character,
#message .bg_mask-massage,
#charatoria .bg-area {
  backface-visibility: hidden;
}/*# sourceMappingURL=style.css.map */