@charset "UTF-8";
 /* * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Times New Roman", "游明朝", "YuMincho", "ヒラギノ明朝 Pr6 W6",
    "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", "ＭＳ Ｐ明朝", "MS PMincho",
    "Meiryo, serif" !important;
}
ul,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
} 
img{
  max-width: 100%;
}
↑UP時非表示　制作用*/


/* デフォcss削除 */
#system_txt{
      border: none !important;
          margin: 0;
    padding: 0;
    background: #fff;
}

.page_title.pc_view, .page_title.sp_view {
    display: none !important;
}
/* パンくず */
#breadcrumb li, #breadcrumb li a {
  color: #fff !important;
}


/* 価格ズームイン（バウンドして戻る） */
@keyframes zoomInUp {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.94) translateZ(0); /* 初期の縮小を少し緩める */
  }
  45% {
    opacity: 1;
    transform: translateY(-12px) scale(1.14) translateZ(0); /* ここを大きくするとズーム感UP */
  }
  65% {
    transform: translateY(6px) scale(0.99) translateZ(0);
  }
  82% {
    transform: translateY(-2px) scale(1.02) translateZ(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) translateZ(0);
  }
}

/* セクション内のボックスをロード時にズームイン（順番に表示） */
.sec_01 > .system-main_enn,
.sec_01 > .system-main_shimei {
  backface-visibility: hidden;
  transform-origin: center;
  will-change: transform, opacity;
}

.sec_01 > .system-main_enn {
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  /* animation: zoomInUp 760ms cubic-bezier(.22,.9,.27,1) 1 forwards;
  animation-delay: 1s; */
}
/* スクロールで画面に入ったときにアニメーション発火 */
.sec_01 > .system-main_enn.animate-in {
  animation: zoomInUp 760ms cubic-bezier(.22,.9,.27,1) 1 forwards;
}

.sec_01 > .system-main_shimei {
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  animation: zoomInUp 760ms cubic-bezier(.22,.9,.27,1) 1 forwards;
  animation-delay: 1.6s;
}

/* 動き控えめ対応 */
@media (prefers-reduced-motion: reduce) {
  .sec_01 > .system-main_enn,
  .sec_01 > .system-main_shimei {
    animation: none;
    transform: none;
    opacity: 1;
  }
  
  .sec_01 > .system-main_enn.animate-in {
    animation: none;
    transform: none;
    opacity: 1;
  }
}


/* 基本スタイル */
:root {
  --font-size-f60: 60px;
  --font-size-f40: 40px;
  --font-size-f36: 36px;
  --font-size-f30: 30px;
  --font-size-f26: 26px;
  --font-size-f20: 20px;
  --font-size-f18: 18px;
  --pink-color: #ef005a;
  --blue-color: #007bff;
}

.f60 {
  font-size: var(--font-size-f60);
  margin: 0;
}
.f40 {
  font-size: var(--font-size-f40);
  margin: 0;
}
.f36{
  font-size: var(--font-size-f36);
  margin: 0;
}
.f30 {
  font-size: var(--font-size-f30);
  margin: 0;
}
.f26 {
  font-size: var(--font-size-f26);
  margin: 0;
}
.f20 {
  font-size: var(--font-size-f20);
  margin: 0;
}
.f18 {
  font-size: var(--font-size-f18);
  margin: 0;
}
.pink {
  color: var(--pink-color);
}

.banar {
    background: #df0e6f;
    text-align: center;
}

.font-style-italic {
  font-style: italic;
  font-weight: bold;
}

main.system-main {
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 2rem;
}
section.sec_01 {
  background: url(https://tensei-r.com/img/upload/code/system_bk.png) repeat;
  padding: 2rem 2rem 2.5rem;
}
.system-main_title h2 {
  font-size: 20px;
  text-align: center;
  font-weight: bold;
  margin: 0 0 2rem;
}
.system-main_title span {
  display: block;
  font-weight: bold;
    font-style: italic;
}

.system_top_lien::after {
  content: "";
  display: block;
  width: 100%;
  height: 17px;
  background: url(https://tensei-r.com/img/upload/code/system_top_lien.png) no-repeat center;
  margin: 0 auto;
  background-size: 78%;
  max-width: 416px;
  position: relative;
  bottom: 10px;
}

.system-main_enn,
.system-main_shimei {
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 1rem;
  text-align: center;
  font-weight: bold;
  margin: 0 0 2rem;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
}

.system-main_enn-p {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  gap: 0.5rem;
}
.system-main_enn-p span,.harf {
  font-style: italic;
  font-weight: bold;
}


.sec_01 .pink {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  font-weight: bold;
}

.sec_01 .pink:before {
  content: "（転生時間）";
  position: absolute;
  left: -8px;
  bottom: 73%;
  font-size: 14px;
  color: var(--pink-color);
      font-weight: bold;
    font-style: italic;
}
.sec_01 .pink .unit {
  font-size: var(--font-size-f30);
  line-height: 1;
  transform: translateY(-0.15em);
  display: inline-block;
  margin-left: 0.15ch;
}
.system-main_text {
  text-align: center;
}
.harf .unit {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
}
.unit_26{
    font-size: 26px;
}
/* 転生オプション */
.option_title{
  position: relative;
  text-align: center;
  margin: 4rem auto 0;
  width: 100%;
  max-width: 740px;
  padding: 0.3rem 0;
  display: block;
}

.option_title span {
  position: relative;
  display: block;
  padding: 10px 1.2rem;
  font-weight: bold;
  font-style: italic;
}

.option_title::before, .option_title::after,
.option_title span::before, .option_title span::after {
  background-color: #000;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all 0.8s ease;
}

/* 左上から右横線（上） */
.option_title::before {
  width: 0px;
  height: 1px;
  left: -1px;
}

/* 右下から左横線（下） */
.option_title::after {
  width: 0px;
  height: 1px;
  right: -1px;
}

/* 左上から下縦線（左） */
.option_title span::before {
  width: 1px;
  height: 0px;
  left: -1px;
  top: -1px;
  bottom: auto;
}

/* 右上から下縦線（右） */
.option_title span::after {
  width: 1px;
  height: 0px;
  bottom: -1px;
  right: -1px;
}

/* 左上スタート：右横線→下縦線 */
.option_title.animate::before {
  width: calc(100% + 1px);
  transition:
    width 0.8s linear 0s;
}

.option_title.animate span::after {
  height: calc(100% + 1px);
  transition:
    height 0.8s linear 0.8s;
}

/* 右下スタート：上縦線→左横線（同時スタート） */
.option_title.animate span::before {
  height: calc(100% + 1px);
  transition:
    height 0.8s linear 0s;
}

.option_title.animate::after {
  width: calc(100% + 1px);
  transition:
    width 0.8s linear 0.8s;
}





/* コスチューム転生 */
section.sec_02,
section.sec_03,section.sec_04 {
  padding: 4rem 0 0;
  max-width: 750px;
  margin: 0 auto;
}
section.sec_02.pa10{
  padding-top: 10rem;
}
.sec_02 h2 {
  text-align: center;
  position: relative;
}

.sec_02 h2:after {
    content: "";
    position: absolute;
    border: 3px solid #999999;
    bottom: -10%;
    left: 50%;
    transform: translateX(-50%);
    width: 15%;
    border-radius: 5rem;
}

.sec_02 p{
  text-align: center;
  margin: 2rem 0 0;
  font-weight: bold;
}

.sec_02 ul {
  display: flex;
    flex-wrap: wrap;
    margin: 2rem 0 0;
    justify-content: center;
}

.sec_02 ul li {
  position: relative;
  width: calc(100%/2);
  flex-basis: calc(100%/2);
  background: #000;
  display: block;
  flex-shrink: 0;
  flex-grow: 0;
}

.sec_02 li a {
    position: relative;
    width: 100%;
    display: block;
    height: 0;
    padding-top: 147.55%;
    box-sizing: border-box;
}
.sec_02 ul li h3 {
  width: 100%;
    text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  z-index: 10;
  font-size: 30px;
  margin: 0;
}
.sec_02 img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.sec_02 img.zoom-in {
  opacity: 1;
  transform: scale(1);
}

.shatter__original {
  z-index: 1;
}
/* セクション3 .sec_03 */
.sec_03 h2 a {
  display: block;
  text-align: center;
  padding: 2rem;
  background-color: #fdf001;
  width: 100%;
  border-radius: 4rem;
  font-weight: bold;
  box-sizing: border-box;
}
.sec_03 p {
  text-align: center;
  margin: 2rem 0 5rem;
  font-weight: bold;
}
.sec_03 p a {
  display: inline-block;
  color: var(--pink-color) !important;
  font-weight: bold;
}
.sec_03 .sec_03-text{
  margin: 0 0 2rem;
}
.system-main_text p{
  font-weight: bold;
  font-family: "Lucida Grande", Meiryo, メイリオ, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", sans-serif !important;
}
/* 下向き矢印 */
.down_arrow {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  text-align: center;
  margin: 2rem auto;
  animation: arrowBounce 1.5s ease-in-out infinite;
}

@keyframes arrowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(50px);
  }
}

.down_arrow::before,
.down_arrow::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 1px);
  width: 2px;
  height: 36px;
  border-radius: 9999px;
  background-color: #000000;
  transform-origin: 50% calc(100% - 0px);
}

.down_arrow::before {
  transform: rotate(54deg);
}

.down_arrow::after {
  transform: rotate(-54deg);
}






/* 転生画像　クリックしたら画像が割れるアニメーション */
:root {
  --piece-size: 80px; /* 破片の大きさの基準（分割粒度） */
  --fade-duration: 500ms;
}
@media screen and (max-width: 600px) {
  :root {
    --piece-size: 30px;
    --fade-duration: 300ms;
  }
}

/* 破片コンテナ（クリック後にJSで生成） */
.shatter__pieces {
  position: absolute;
  inset: 0;
  pointer-events: none; /* 破片はクリック不可 */
  overflow: visible;
  z-index: 5;
}

/* 破片要素 */
.shatter__piece {
  position: absolute;
  background-size: var(--w) var(--h);
  background-repeat: no-repeat;
  will-change: transform, opacity;
  border: 1px solid rgba(255,255,255,0.3);
  background-color: rgba(255,255,255,0.15); /* ガラスの光沢 */
  opacity: 0.85;
  backdrop-filter: blur(1px); /* ガラス感を強調 */
}

/* クリックターゲット（見えないボタン） */
.shatter__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: transparent;
  border: 0;
  z-index: 20;
}

/* 元画像をフェードアウト */
.shatter--fading .shatter__original {
  animation: fadeOut var(--fade-duration) ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; }
}

/* ※破片コンテナ（クリック後にJSで生成）ここまで */


/* pc */
@media screen and (min-width: 900px) {
  .system-main_enn, .system-main_shimei{
        max-width: 750px;
  margin: 0 auto 2rem;
  }
  }
  
  
  /* sp */
  @media screen and (max-width: 600px) {
    section.sec_01{
      padding: 2rem 1rem 2.5rem;
    }
    .f40:not(.f40.system_top_lien) {
      font-size: 34px;
  }
  .sec_01 .pink .unit {
      font-size: 24px;
  }
  .sec_01 .pink:before{
  bottom: 90%
  }
  .system-main_enn {
      padding-top: 1.8rem;
  }
  .system-main_shimei .f20,
  .sec_03 h2 a {
      font-size: var(--font-size-f18);
  }
  .system-main_text p {
      font-size: 12px;
  }
  .sec_02 p,.sec_03 .sec_03-text {
    font-size: 16px;
}
  .sec_02 ul {
    margin: 2rem 0 0;
}

  section.sec_02, section.sec_03,section.sec_04 {
      padding: 3rem 1rem 0;
  }
  .sec_02 ul li h3 {
    font-size: 20px;
}
.sec_03 h2 a {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.option_title {
  width: 80%;
}
  
  }