@charset "UTF-8";

.character_list {
  --pc-width: 1200; /*PCデザイン幅*/
  --sp-width: 750; /*SPデザイン幅*/
  --pc-artboard-width: 750; /*SP共通デザイン幅*/
  --sp-artboard-width: 750; /*PC共通デザイン幅*/
  --formula: calc(var(--formula) * var(--ratio)); /*SP→PC 可変設定*/
  --formula_pc: calc(var(--formula) * 1); /*PC 1400以上は固定*/
}

/* PC画面幅 1200px以上 固定 */
@media (min-width: 1201px) {
  .character_list {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --formula: 1px; /* 固定値（可変しない） */
  }
}
/* PC画面幅 768～1200px 可変 */
@media (min-width: 768px) and (max-width: 1200px) {
  .character_list {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width)); /* PCとSPのデザイン幅の比率 */
    --formula: calc(100vw / var(--pc-width)); /* 画面幅に基づく可変値 */
  }
}
/* SP画面幅 767px以下 可変 */
@media (max-width: 767px) {
  .character_list {
    --ratio: 1; /* 比率は1（変わらない） */
    --formula: calc(100vw / var(--sp-width)); /* 画面幅に基づく可変値 */
  }
}


/* ------------------- モーダル表示制御するためのCSS ------------------- */
/* モーダル表示を制御するためのCSS */
.modal-close-btn {
  width: calc(70 * (100vw / 750));
  position: absolute;
  top: calc(-42 * (100vw / 750));
  left: calc(-13 * (100vw / 750));
  z-index: 10;
  /* position: absolute;
  top: -0.75rem;
  right: -0.75rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e5e7eb;
  color: #374151;
  font-weight: 600;
  border-radius: 9999px;
  transition-property: background-color;
  transition-duration: 200ms;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  z-index: 60; */
}

.modal-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #FFC45E;
  /* background-color: rgba(17, 24, 39, 0.5); */
  z-index: 40;
}
.modal-section {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(630 * (100vw / 750)); /* w-11/12 */
  background: #FBFAE3;
  border: 1px solid #000000;
  padding: calc(60 * (100vw / 750)) calc(55 * (100vw / 750)) calc(100 * (100vw / 750)) calc(40 * (100vw / 750)); /* p-6 */
  border-radius: calc(40 * (100vw / 750)); /* rounded-xl */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
  z-index: 50;
  max-height: 60vh;
  /* overflow-y: auto;
  overflow-x: hidden; */
}
.hidden {
  display: none;
}
/* アニメーション関連 */
.fade-in {
  animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.scale-in-center {
  animation: scaleInCenter 0.3s forwards;
}

@keyframes scaleInCenter {
  from {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.pcOnly {
  display: block;
}
.spOnly {
  display: none;
}
@media screen and (max-width: 767px) {
  .spOnly {
    display: block;
  }
  .pcOnly {
    display: none;
  }
}
/* 
========================================================================
  SP
========================================================================
*/

/* ------------------- Layout ------------------- */
.character_lp {
  background: #FFC45E;
  padding-bottom: calc(180 * (100vw / 750));
}
.container {
  width: calc(630 * (100vw / 750));
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  grid-gap: calc(40 * (100vw / 750)) calc(30 * (100vw / 750));
  margin-top: calc(82 * (100vw / 750));
}
.modal-open_box {
  width: calc(630 * (100vw / 750));
  margin: 0 auto;
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  margin-top: calc(82 * (100vw / 750));
  gap: calc(50 * (100vw / 750)) calc(30 * (100vw / 750));
}
.modal-btn {
  width: calc(300 * (100vw / 750));
  transition-property: background-color;
  transition-duration: 200ms;
  cursor: pointer;
}
.modal-btn .character_name {
  font-size: calc(30 * (100vw / 750));
  margin-top: calc(30 * (100vw / 750));
  text-align: center;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.modal_name {
  color: #723E11;
  font-size: calc(60 * (100vw / 750));
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 900;
  font-style: normal;
  justify-content: start !important;
}
.character_sp .modal-content-box .heading__box__ttl p {
  font-family: "zen-kaku-gothic-new", sans-serif !important;
  font-weight: 900 !important;
  font-style: normal;
}
.modal_txtbox {
  display: flex;
  flex-direction: column;
  gap: calc(20 * (100vw / 750)) 0;
  margin-top: calc(52 * (100vw / 750));
}
.modal_txtbox p:nth-of-type(1) {
  font-size: calc(20 * (100vw / 750));
  white-space: nowrap;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: flex;
  margin-left: calc(20 * (100vw / 750));
}
.modal_txtbox p:nth-of-type(1) span {
  font-size: calc(22 * (100vw / 750));
  margin-left: calc(5 * (100vw / 750));
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.modal_txtbox p:nth-of-type(2) {
  font-size: calc(20 * (100vw / 750));
  white-space: nowrap;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: flex;
}
.modal_txtbox p:nth-of-type(2) span {
  font-size: calc(20 * (100vw / 750));
  margin-left: calc(3 * (100vw / 750));
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  margin-top: calc(-7 * (100vw / 750));
  display: inline-block;
}
.modal_txtbox p:nth-of-type(3) {
  font-size: calc(20 * (100vw / 750));
  /* white-space: nowrap; */
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: flex;
}
.modal_txtbox p:nth-of-type(3) span {
  font-size: calc(20 * (100vw / 750));
  margin-left: calc(5 * (100vw / 750));
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  margin-top: calc(-7 * (100vw / 750));
  display: inline-block;
  width: calc(407 * (100vw / 750));
  text-align: justify;
}
@media screen and (max-width: 767px) {
  #modal4 .modal_txtbox p:nth-of-type(3),
  #modal8 .modal_txtbox p:nth-of-type(3) {
    margin-top: calc(40 * (100vw / 750));
  }
}
.modal_border {
  width: calc(520 * (100vw / 750));
  margin: calc(80 * (100vw / 750)) auto 0;
}
.connection {
  margin-top: calc(59 * (100vw / 750));
}
.connection_ttl {
  font-size: calc(24 * (100vw / 750));
  text-align: center;
  letter-spacing: -0.02em;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.connection_box {
  width: 100%;
  margin: calc(50 * (100vw / 750)) auto 0;
  display: flex;
  justify-content: center;
  gap: 0 calc(20 * (100vw / 750));
}
.connection_box.flex02 {
  width: calc(390 * (100vw / 750));
  gap: 0;
  justify-content: space-between;
}
.connection_box .item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.connection_box .item img {
  width: calc(170 * (100vw / 750));
}
.connection_box .item p:nth-of-type(1) {
  font-size: calc(20 * (100vw / 750));
  margin-top: calc(22 * (100vw / 750));
  text-align: center;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}
.connection_box .item p:nth-of-type(2) {
  /* width: calc(160 * (100vw / 750)); */
  font-size: calc(16 * (100vw / 750));
  margin-top: 6px;
  line-height: 1.8;
  text-align: left;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.all_btn {
  margin: calc(59 * (100vw / 750)) auto calc(50 * (100vw / 750));
}

/* ------------------- 各種フォント ------------------- */
.heading__box__ttl p {
  font-family: "futura-pt", sans-serif;
  font-weight: 800;
  font-style: normal;
}

/* ------------------- top_obi ------------------- */
.top_obi {
  width: calc(750 * (100vw / 750));
  margin: 0 auto;
}


/* ------------------- heading__box ------------------- */
.heading__box__ttl {
  display: flex;
  overflow: hidden;
  justify-content: center;
}
.heading__box__ttl.top {
  margin-top: calc(130 * (100vw / 750));
}
.modal .modal-content-box {
  transition: scale 0.5s;
  scale: 0;
}
.modal.is-active .modal-content-box {
  transition: scale 0.5s;
  scale: 1;
}
.modal .heading__box__ttl.top {
  margin-top: 0;
}
.heading__box__ttl.btm {
  margin-top: calc(15 * (100vw / 750));
}
.heading__box__ttl.btm p {
  font-size: calc(34 * (100vw / 750));
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-style: normal;
}
.heading__box__ttl p {
  color: #fff;
  font-size: calc(80 * var(--formula));
  font-weight: bold;
  letter-spacing: .03em;
  margin: 0;
  /* ここからアニメーション関係 */
  transform: translateY(2em);
  animation: textanimation 1s forwards;
}
/* 1文字目 */
.heading__box__ttl p:nth-child(1) {
  animation-delay: 0.025s
}
/* 2文字目 */
.heading__box__ttl p:nth-child(2) {
  animation-delay: 0.05s
}
/* 3文字目 */
.heading__box__ttl p:nth-child(3) {
  animation-delay: 0.075s
}
/* 4文字目 */
.heading__box__ttl p:nth-child(4) {
  animation-delay: 0.1s
}
/* 5文字目 */
.heading__box__ttl p:nth-child(5) {
  animation-delay: 0.125s
}
/* 6文字目 */
.heading__box__ttl p:nth-child(6) {
  animation-delay: 0.15s
}
/* 7文字目 */
.heading__box__ttl p:nth-child(7) {
  animation-delay: 0.175s
}
/* 8文字目 */
.heading__box__ttl p:nth-child(8) {
  animation-delay: 0.2s
}
/* 9文字目 */
.heading__box__ttl p:nth-child(9) {
  animation-delay: 0.225s
}
/* 10文字目 */
.heading__box__ttl p:nth-child(10) {
  animation-delay: 0.25s
}
/* 11文字目 */
.heading__box__ttl p:nth-child(11) {
  animation-delay: 0.275s
}
/* 12文字目 */
.heading__box__ttl p:nth-child(12) {
  animation-delay: 0.3s
}

@keyframes textanimation {
  0% {
    transform: translateY(1em);
  }
  100% {
    transform: translateY(0);
  }
}

.js-fade-in {
  transform: translateY(2em);
  animation: textanimation_txt 1.5s forwards;
}
@keyframes textanimation_txt {
  0% {
    opacity: 0;
    transform: translateY(2em);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll_box .modal_name p {
  color: unset;
  font-size: unset;
  font-weight: unset;
  letter-spacing: unset;
  margin: unset;
}


/* ------------------- modal__box ------------------- */
/* ネイティブなdialog要素の背景をカスタマイズ */
/* dialog.modal-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
} */

/* 
========================================================================
  PC
========================================================================
*/
@media screen and (min-width: 768px) {
.character_lp {
  padding-bottom: 5rem;
}
@media screen and (min-width: 768px) {
  html, body {
    overflow-x: clip !important;
  }
  .wrapBottom {
    padding-top: 0 !important;
  }
}
.character_pc .container {
  display: grid;
  margin: 0 auto;
  grid-template-columns: 36.94% 26.04% 37.01%;
  width: 100%;
  grid-gap: 0;
}
.character_pc .left_contents {
  width: 100%;
  grid-column: 1;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
}
.character_pc .center_contents {
  width: 100%;
  grid-column: 2;
  grid-row: 1;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
  padding-bottom: 9rem;
}
.character_pc .right_contents {
  width: 100%;
  grid-column: 3;
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

.character_pc .left_contents .heading__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.character_pc .left_contents .heading__box__ttl {
  display: flex;
  overflow: hidden;
  justify-content: center;
}
.character_pc .left_contents .heading__box__ttl.top {
  margin-top: 0;
}
.character_pc .left_contents .heading__box__ttl.btm {
  margin-top: 0;
}
.character_pc .left_contents .heading__box__ttl.btm p {
  margin-top: 3rem;
  font-size: 3.2rem;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-style: normal;
}
.character_pc .left_contents .heading__box__ttl p {
  color: #fff;
  font-size: 7rem;
  letter-spacing: 0.03em;
}

/* right_contents */
.character_pc .right_contents .detil_contents {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.character_pc .right_contents .container {
  width: 31.5rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  grid-gap: 2rem 1.5rem;
  margin-top: 4.1rem;
}
.character_pc .right_contents .modal-btn {
  width: 15rem;
  transition-property: background-color;
  transition-duration: 200ms;
  cursor: pointer;
}
.character_pc .right_contents .modal-btn .character_name {
  font-size: 1.5rem;
  margin-top: 0.5rem;
  text-align: center;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.character_pc .right_contents .modal_name {
  color: #723E11;
  font-size: 4.8rem;
  margin: 0;
  justify-content: flex-start;
}
.character_pc .right_contents .modal_name p {
  color: unset;
  font-size: unset;
  font-weight: unset;
  letter-spacing: unset;
  margin: unset;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.character_pc .right_contents .modal_txtbox {
  display: flex;
  flex-direction: column;
  gap: 1rem 0;
  margin-top: 2.7rem;
}
.character_pc .right_contents .modal_txtbox p:nth-of-type(1) {
  font-size: 1.2rem;
  white-space: nowrap;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: flex;
  margin-left: 0.1rem;
  margin-top: 0.2rem;
}
.character_pc .right_contents .modal_txtbox p span.pc_span_01 {
  width: 12.3rem;
  font-size: 1.2rem;
  white-space: nowrap;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
  margin-left: 1.3rem;
  line-height: normal !important;
  margin: 0 !important;
  text-align: right;
}
.character_pc .right_contents .modal_txtbox p:nth-of-type(1) span.pc_span_02 {
  font-size: 1.4rem;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
  width: 40.7rem;
  margin-left: 0.1rem;
  margin-top: 0.2rem; 
}
.character_pc .right_contents .modal_txtbox p:nth-of-type(2) {
  font-size: 1.2rem;
  white-space: nowrap;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: flex;
}
.character_pc .right_contents .modal_txtbox p:nth-of-type(2) span.pc_span_02 {
  font-size: 1.2rem;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 2;
  margin-top: -0.3rem;
  display: inline-block;
  width: 40.7rem;
  margin-left: 0.1rem;
}
.character_pc .right_contents .modal_txtbox p:nth-of-type(3) {
  font-size: 1.2rem;
  white-space: nowrap;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
  display: flex;
}
.character_pc .right_contents .modal_txtbox p:nth-of-type(3) span.pc_span_02 {
  font-size: 1.2rem;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.8;
  margin-top: -0.2rem;
  display: inline-block;
  width: 40.7rem;
  margin-left: 0rem;  
}
.character_pc .right_contents .modal_border {
  width: 100%;
  margin: 3rem auto 0;
}
.character_pc .right_contents .connection {
  margin-top: 3rem;
}
.character_pc .right_contents .connection_ttl {
  font-size: 1.8rem;
  text-align: center;
  letter-spacing: -0.02em;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.character_pc .right_contents .connection_box {
  width: 100%;
  margin: 2.5rem auto 0;
  display: flex;
  justify-content: center;
  gap: 0 2rem;
}
.character_pc .right_contents .connection_box.c_box02 {
  justify-content: space-between;
  gap: 0;
}
.character_pc .right_contents .connection_box .item img {
  width: 100%;
}
.character_pc .right_contents .connection_box .item {
  width: 11rem;
}
.character_pc .right_contents .connection_box .item p:nth-of-type(1) {
  font-size: 1.3rem;
  margin-top: 1.5rem;
  text-align: center;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}
.character_pc .right_contents .connection_box .item p:nth-of-type(2) {
  width: 100%;
  font-size: 1.2rem;
  margin-top: 0.8rem;
  line-height: 1.8;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 500;
  font-style: normal;
}
.character_pc .right_contents .all_btn {
  margin: 2.7rem auto 0;
}
.character_pc .right_contents .item_character.item_chara01 {
  width: 26rem;
  position: absolute;
  top: -3rem;
  right: -8rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara02 {
  width: 19rem;
  position: absolute;
  top: 4rem;
  right: -8.4rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara03 {
  width: 21rem;
  position: absolute;
  top: -1rem;
  right: -7rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara04 {
  width: 20rem;
  position: absolute;
  top: -3rem;
  right: -6rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara05 {
  width: 24rem;
  position: absolute;
  top: -1rem;
  right: -8rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara06 {
  width: 19rem;
  position: absolute;
  top: -4rem;
  right: -6rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara07 {
  width: 21rem;
  position: absolute;
  top: -4rem;
  right: -7rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara08 {
  width: 15rem;
  position: absolute;
  top: -1rem;
  right: -5rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara09 {
  width: 20rem;
  position: absolute;
  top: -5rem;
  right: -5rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara10 {
  width: 20rem;
  position: absolute;
  top: 1rem;
  right: -5rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara11 {
  width: 17rem;
  position: absolute;
  top: -2rem;
  right: -6rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara12 {
  width: 22rem;
  position: absolute;
  top: -6rem;
  right: -6rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara13 {
  width: 21rem;
  position: absolute;
  top: -5rem;
  right: -3rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara14 {
  width: 18rem;
  position: absolute;
  top: -2rem;
  right: -5rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara15 {
  width: 17rem;
  position: absolute;
  top: -6rem;
  right: -6rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara16 {
  width: 18rem;
  position: absolute;
  top: -6rem;
  right: -4rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara17 {
  width: 22rem;
  position: absolute;
  top: -8rem;
  right: -6rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara18 {
  width: 22rem;
  position: absolute;
  top: -4rem;
  right: -3rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara19 {
  width: 18rem;
  position: absolute;
  top: -2rem;
  right: -2rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara20 {
  width: 20rem;
  position: absolute;
  top: -9rem;
  right: -4rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara21 {
  width: 18rem;
  position: absolute;
  top: -7rem;
  right: -1rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara22 {
  width: 19rem;
  position: absolute;
  top: -7rem;
  right: -3rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara23 {
  width: 26rem;
  position: absolute;
  top: -2rem;
  right: -5rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara24 {
  width: 20rem;
  position: absolute;
  top: -6rem;
  right: -4rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara25 {
  width: 25rem;
  position: absolute;
  top: -3rem;
  right: -4rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara26 {
  width: 17rem;
  position: absolute;
  top: -7rem;
  right: -6rem;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .item_character.item_chara27 {
  width: 21rem;
  position: absolute;
  top: -7rem;
  right: 0;
  z-index: 10;
  pointer-events: none;
}
.character_pc .right_contents .c_box02 {
  width: 65%;
}


/* center_contents */
.character_pc .center_contents .top_obi {
  max-width: 75rem;
  width: 100%;
  position: sticky;
  top: 0;
}
.character_pc .center_contents.btn-wrapper .btn_flex {
  width: 31.5rem;
  margin: 9.3rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 1.5rem;
}
.character_pc .center_contents .btn {
  width: 15rem;
  cursor: pointer;
  transition: color 0.3s ease;
}
.character_pc .center_contents .btn_flex .btn img {
  transition: 0.5s all;
}
.character_pc .center_contents .btn_flex .btn img:hover {
  transform:scale(1.1,1.1);
  transition: 0.5s all;
}
.character_pc .center_contents .character_name {
  font-size: 1.5rem;
  margin-top: 1rem;
  text-align: center;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.character_pc .btn {
  position: relative;
}
.character_pc .btn.is-switch img {
  background-color: #F49420;
  border-radius: 18px;
  padding: 0.5rem;
  /* transform: scale(1.1); */
}
.character_pc .box {
  display: none;
  margin-inline: auto;
  width: 50rem;
  padding: 4rem;
  background-color: #FBFAE3;
  border: 1px solid #000;
  border-radius: 12px;
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
  transition: opacity 0.5s ease;
}
.character_pc .box.is-switch {
  display: flex;
  flex-direction: column;
}
.character_pc .box {
  transition: scale 0.5s;
  scale: 0;
}
.character_pc .box.is-switch {
  transition: scale 0.5s;
  scale: 1;
}
}


#footer {
  margin-top: 0 !important;
}

/* ------------------- Layout ------------------- */


/* ------------------- 各種モーダル ------------------- */
.character_sp .modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000,endColorstr=#80000000); 
  background: rgba(0, 0, 0, 0.5);
}

.character_sp .modal-wrap {
  height: 100%;
  padding: 0 30px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.character_sp .modal-content {
  height: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.character_sp .modal-table-wrap {
  display: table;
  table-layout: fixed;
  height: 100%;
  width: 100%;
}

.character_sp .modal-table-cell {
  display: table-cell;
  padding: 60px 0 60px;
  vertical-align: middle;
}

.character_sp .modal-content-box {
  position: relative;
  margin: 0 auto;
  width: calc(630 * (100vw / 750));
  background: #FBFAE3;
  border-radius: calc(40 * (100vw / 750));
  border: 1px solid #000;
}

.character_sp .modal-content-inner {
  padding: calc(60 * (100vw / 750)) calc(39 * (100vw / 750)) calc(72 * (100vw / 750)) calc(50 * (100vw / 750));
}

.character_sp .modal-btn-close {
  position: absolute;
  top: calc(-40 * (100vw / 750));
  left: calc(-13 * (100vw / 750));
  z-index: 9;
  width: calc(80 * (100vw / 750));
  cursor: pointer;
}
@media only screen and (max-width: 768px) {
  .character_sp .modal-wrap {
    padding: 0 3.125%;
  }
}

.character_sp .post-set .heading__box__ttl p {
  color: unset;
  font-size: unset;
  font-weight: unset;
  letter-spacing: unset;
  font-family: "zen-kaku-gothic-new", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.character_sp .item_character {
  position: absolute;
  z-index: 10;
}

/* item_chara01 */
.character_sp .item_character.item_chara01 {
  width: calc(313 * (100vw / 750));
  top: calc(-78 * (100vw / 750));
  right: calc(-50 * (100vw / 750));
}
.character_sp .all_btn.all01 {
  width: calc(470 * (100vw / 750));
}

/* item_chara02 */
.character_sp .item_character.item_chara02 {
  width: calc(276 * (100vw / 750));
  top: calc(-108 * (100vw / 750));
  right: calc(-40 * (100vw / 750));
}
.character_sp .all_btn.all02 {
  width: calc(520 * (100vw / 750));
}

/* item_chara03 */
.character_sp .item_character.item_chara03 {
  width: calc(244 * (100vw / 750));
  top: calc(-68 * (100vw / 750));
  right: calc(-20 * (100vw / 750));
}
.character_sp .all_btn.all03 {
  width: calc(470 * (100vw / 750));
}

/* item_chara04 */
.character_sp .item_character.item_chara04 {
  width: calc(282 * (100vw / 750));
  top: calc(-100 * (100vw / 750));
  right: calc(-60 * (100vw / 750));
}
.character_sp .all_btn.all04 {
  width: calc(470 * (100vw / 750));
}
#modal4 .connection_box {
  width: calc(560 * (100vw / 750));
}
#modal4 .connection_box .item.item03 {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}
#modal4 .connection_box .item.item03 p {
  white-space: nowrap;
}

/* item_chara05 */
.character_sp .item_character.item_chara05 {
  width: calc(334 * (100vw / 750));
  top: calc(-128 * (100vw / 750));
  right: calc(-60 * (100vw / 750));
}
.character_sp .all_btn.all05 {
  width: calc(470 * (100vw / 750));
}

/* item_chara06 */
.character_sp .item_character.item_chara06 {
  width: calc(257 * (100vw / 750));
  top: calc(-120 * (100vw / 750));
  right: calc(-30 * (100vw / 750));
}
.character_sp .all_btn.all06 {
  width: calc(470 * (100vw / 750));
}

/* item_chara07 */
.character_sp .item_character.item_chara07 {
  width: calc(271 * (100vw / 750));
  top: calc(-80 * (100vw / 750));
  right: calc(0 * (100vw / 750));
}
.character_sp .all_btn.all07 {
  width: calc(520 * (100vw / 750));
}

/* item_chara08 */
.character_sp .item_character.item_chara08 {
  width: calc(177 * (100vw / 750));
  top: calc(-100 * (100vw / 750));
  right: calc(-29 * (100vw / 750));
}
.character_sp #modal8 .item.item01,
.character_sp #modal8 .item.item02 {
  width: calc(168 * (100vw / 750));
}
.character_sp .all_btn.all08 {
  width: calc(470 * (100vw / 750));
}



/* item_chara09 */
.character_sp .item_character.item_chara09 {
  width: calc(235 * (100vw / 750));
  top: calc(-100 * (100vw / 750));
  right: calc(10 * (100vw / 750));
}
.character_sp .all_btn.all09 {
  width: calc(470 * (100vw / 750));
}

/* item_chara10 */
.character_sp .item_character.item_chara10 {
  width: calc(264 * (100vw / 750));
  top: calc(-90 * (100vw / 750));
  right: calc(-50 * (100vw / 750));
}
.character_sp #modal10 .connection_box.flex02 {
  width: calc(410 * (100vw / 750));
}
.character_sp #modal10 .item.item02 p:nth-of-type(2){
  width: calc(170 * (100vw / 750));
  text-align: justify;
}
.character_sp .all_btn.all10 {
  width: calc(470 * (100vw / 750));
}

/* item_chara11 */
.character_sp .item_character.item_chara11 {
  width: calc(213 * (100vw / 750));
  top: calc(-110 * (100vw / 750));
  right: calc(-20 * (100vw / 750));
}
.character_sp .all_btn.all11 {
  width: calc(470 * (100vw / 750));
}

/* item_chara12 */
.character_sp .item_character.item_chara12 {
  width: calc(257 * (100vw / 750));
  top: calc(-110 * (100vw / 750));
  right: calc(-60 * (100vw / 750));
}
.character_sp .all_btn.all12 {
  width: calc(470 * (100vw / 750));
}

/* item_chara13 */
.character_sp .item_character.item_chara13 {
  width: calc(290 * (100vw / 750));
  top: calc(-110 * (100vw / 750));
  right: calc(-20 * (100vw / 750));
}
.character_sp .all_btn.all13 {
  width: calc(520 * (100vw / 750));
}

/* item_chara14 */
.character_sp .item_character.item_chara14 {
  width: calc(276 * (100vw / 750));
  top: calc(-130 * (100vw / 750));
  right: calc(-50 * (100vw / 750));
}
.character_sp .all_btn.all14 {
  width: calc(520 * (100vw / 750));
}

/* item_chara15 */
.character_sp .item_character.item_chara15 {
  width: calc(207 * (100vw / 750));
  top: calc(-101 * (100vw / 750));
  right: calc(16 * (100vw / 750));
}
.character_sp .all_btn.all15 {
  width: calc(520 * (100vw / 750));
}

/* item_chara16 */
.character_sp .item_character.item_chara16 {
  width: calc(251 * (100vw / 750));
  top: calc(-130 * (100vw / 750));
  right: calc(0 * (100vw / 750));
}
.character_sp .all_btn.all16 {
  width: calc(520 * (100vw / 750));
}

/* item_chara17 */
.character_sp .item_character.item_chara17 {
  width: calc(328 * (100vw / 750));
  top: calc(-170 * (100vw / 750));
  right: calc(0 * (100vw / 750));
}
.character_sp .all_btn.all17 {
  width: calc(520 * (100vw / 750));
}

/* item_chara18 */
.character_sp .item_character.item_chara18 {
  width: calc(254 * (100vw / 750));
  top: calc(-100 * (100vw / 750));
  right: calc(-20 * (100vw / 750));
}
.character_sp .all_btn.all18 {
  width: calc(520 * (100vw / 750));
}

/* item_chara19 */
.character_sp .item_character.item_chara19 {
  width: calc(212 * (100vw / 750));
  top: calc(-40 * (100vw / 750));
  right: calc(10 * (100vw / 750));
}
.character_sp .all_btn.all19 {
  width: calc(520 * (100vw / 750));
}

/* item_chara20 */
.character_sp .item_character.item_chara20 {
  width: calc(277 * (100vw / 750));
  top: calc(-110 * (100vw / 750));
  right: calc(-10 * (100vw / 750));
}
.character_sp .all_btn.all20 {
  width: calc(520 * (100vw / 750));
}

/* item_chara21 */
.character_sp .item_character.item_chara21 {
  width: calc(256 * (100vw / 750));
  top: calc(-140 * (100vw / 750));
  right: calc(-10 * (100vw / 750));
}
.character_sp .all_btn.all21 {
  width: calc(520 * (100vw / 750));
}

/* item_chara22 */
.character_sp .item_character.item_chara22 {
  width: calc(306 * (100vw / 750));
  top: calc(-140 * (100vw / 750));
  right: calc(-30 * (100vw / 750));
}
.character_sp .all_btn.all22 {
  width: calc(520 * (100vw / 750));
}

/* item_chara23 */
.character_sp .item_character.item_chara23 {
  width: calc(324 * (100vw / 750));
  top: calc(-50 * (100vw / 750));
  right: calc(-50 * (100vw / 750));
}
.character_sp .all_btn.all23 {
  width: calc(520 * (100vw / 750));
}

/* item_chara24 */
.character_sp .item_character.item_chara24 {
  width: calc(246 * (100vw / 750));
  top: calc(-110 * (100vw / 750));
  right: calc(-40 * (100vw / 750));
}
.character_sp .all_btn.all24 {
  width: calc(520 * (100vw / 750));
}

/* item_chara25 */
.character_sp .item_character.item_chara25 {
  width: calc(362 * (100vw / 750));
  top: calc(-90 * (100vw / 750));
  right: calc(-60 * (100vw / 750));
}

/* item_chara26 */
.character_sp .item_character.item_chara26 {
  width: calc(222 * (100vw / 750));
  top: calc(-150 * (100vw / 750));
  right: calc(0 * (100vw / 750));
}
.character_sp .all_btn.all26 {
  width: calc(520 * (100vw / 750));
}

/* item_chara27 */
.character_sp .item_character.item_chara27 {
  width: calc(313 * (100vw / 750));
  top: calc(-110 * (100vw / 750));
  right: calc(-20 * (100vw / 750));
}
.character_sp .all_btn.all27 {
  width: calc(520 * (100vw / 750));
}

.character_sp .all_btn {
  margin: calc(59 * (100vw / 750)) auto calc(0 * (100vw / 750));
}

.inview-fade {
  opacity: 0;
  visibility: hidden;
  transition: all 2s;
  transform: translateY(50px);
}
.inview-fade.fade-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media screen and (min-width: 768px) {
  .header__inner--center,
  ul.header__inner--right {
    display: none !important;
  }
}