/* --- リセット --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  overflow: auto;
}

/* --- プリロード --- */
body::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: 
    url(../images/top/img_chara_01.png) 
    url(../images/top/img_chara_02.png) 
    url(../images/top/img_chara_03.png) 
    url(../images/top/img_chara_04.png);
}

/* --- 領域 --- */
.center {
  width: 1000px;
  aspect-ratio: 4 / 3;
  
  margin: 0 auto; 

  --scale: min(1, calc(100vw / 1000));
  transform: scale(var(--scale));
  
  transform-origin: top center;

  position: relative;
  background-color: #ffffff;
  border: 2px solid #747474;
  border-radius: 7px;
}

/* --- 背景 --- */
.frameBox {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background-image: url(../images/top/bg_image.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* --- キャラクターアニメーション --- */
.full-chara-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  animation: charaFullLoop 1s infinite steps(1);
  
  pointer-events: none; 
}

/* --- ループ  --- */
@keyframes charaFullLoop {
  0%   { background-image: url(../images/top/img_chara_01.png); }
  12.5% { background-image: url(../images/top/img_chara_02.png); }
  25%   { background-image: url(../images/top/img_chara_03.png); }
  37.5% { background-image: url(../images/top/img_chara_04.png); }
  50%   { background-image: url(../images/top/img_chara_04.png); }
  62.5% { background-image: url(../images/top/img_chara_03.png); }
  75%   { background-image: url(../images/top/img_chara_02.png); }
  87.5% { background-image: url(../images/top/img_chara_01.png); }
  100%  { background-image: url(../images/top/img_chara_01.png); }
}

/* --- ボタンエリア --- */
.button-wrapper {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: fit-content;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 7px;
  padding: 20px 15px;
  z-index: 20;
}

/* --- ボタンコンテナ --- */
.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

/* --- ボタン色 --- */
.nav-button {
  width: 190px;
  height: 95px;
  background-color: #ffbd4d;
  border-radius: 7px;
  box-shadow: 6px 6px 0px #8b5a2b;
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  
  color: #ffffff;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.2;
  -webkit-text-stroke: 2.5px #000;
  paint-order: stroke fill;
  
  transition: all 0.1s ease;
  cursor: pointer;
  border: none;
  position: relative;
  top: 0;
  left: 0;
}

/* --- ホバー、クリック --- */
.nav-button:hover {
  background-color: #ffc970;
  top: 4px;
  left: 4px;
  box-shadow: 2px 2px 0px #8b5a2b;
}

.nav-button:active {
  top: 6px;
  left: 6px;
  box-shadow: 0px 0px 0px #8b5a2b;
}

/* --- 画像内ボタン --- */
.pdf-button {
  position: absolute;
  bottom: 170px; 
  right: 9.5%;
  width: 160px;
  height: 48px;
  background-color: #ffbd4d;
  border-radius: 7px;
  box-shadow: 2px 2px 0px #8b5a2b;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
  font-weight: 900;
  font-size: 18px;
  -webkit-text-stroke: 2px #000;
  paint-order: stroke fill;
  transition: all 0.1s ease;
  z-index: 30;
}

.pdf-button:hover {
  background-color: #ffbd4d;
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #8b5a2b;
}

.pdf-button:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px #ffbd4d;
}

/* --- 共通領域 --- */
.contents-base {
  width: 100%;
  height: 100%;
  background-color: #fff9b8;
  border-radius: 5px;
  
  background-image: url(../images/common/base.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  
  position: relative;
  overflow: hidden;
}

/* --- 目次 --- */
.mokuji-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 125% 125%;
  background-image: url(../images/mokuji/mokuji.png);
  background-position: center; 
  background-repeat: no-repeat;
  z-index: 5;
  pointer-events: none;
}

/* --- 戻るボタン --- */
.back-button {
  position: absolute;
  bottom: 25px;
  left: 5%;
  padding: 10px 25px;
  background-color: #ffbd4d;
  color: #fff;
  font-weight: 900;
  -webkit-text-stroke: 1px #000;
  border-radius: 7px;
  text-decoration: none;
  box-shadow: 4px 4px 0px #8b5a2b;
  z-index: 10;
  transition: all 0.1s ease;
}

.back-button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #8b5a2b;
}

.navigation-footer {
  position: absolute;
  bottom: 25px;
  left: 5%;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
}

.nav-sub-button {
  display: flex;
  align-items: center;
  width: 200px;
  height: 40px;
  background-color: #ffffff;
  border: 2px solid #999;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  font-weight: 700;
  font-size: 16px;
  position: relative;
  transition: all 0.1s ease;
  overflow: hidden;
}

.navigation-footer {
  position: absolute;
  bottom: 15px;
  left: 5%;
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
}

.nav-sub-button {
  display: flex;
  align-items: center;
  width: 220px;
  height: 40px;
  background-color: #ffffff;
  border: 2px solid #999;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
  font-weight: 700;
  font-size: 16px;
  position: relative; 
  overflow: hidden;
  transition: all 0.1s ease;
}

.icon-wrap {
  position: absolute;
  top: -0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  width: 38px;
  background-color: transparent;
  z-index: 2;
}

.nav-sub-button:not(.icon-right) .icon-wrap {
  left: 1px;
}

.icon-right .icon-wrap {
  right: 1px;
}

.btn-text {
  width: 100%;
  text-align: center;
  z-index: 1;
  padding: 0 40px;
  display: inline-block;
}

.icon-right .btn-text {
  transform: translateX(-1em);
}

.icon-wrap img {
  width: 65%;
  height: auto;
  object-fit: contain;
}


/* --- 目次 --- */
.list-item {
  left: 13%;
  width: 30%;
  height: 2%;
}
/* --- 位置調整 --- */
.list-1  { top: 15%; }
.list-2  { top: 17%; }
.list-3  { top: 19%; }
.list-4  { top: 21%; }
.list-5  { top: 23%; }
.list-6  { top: 25%; }
.list-7  { top: 27%; }
.list-8  { top: 29%; }
.list-9  { top: 31%; }
.list-10 { top: 33%; }
.list-11 { top: 35%; }
.list-12 { top: 41.6%; }
.list-13 { top: 43.6%; }
.list-14 { top: 45.6%; }
.list-15 { top: 47.6%; }
.list-16 { top: 49.6%; }
.list-17 { top: 56.2%; }
.list-18 { top: 58.2%; }
.list-19 { top: 60.2%; }
.list-20 { top: 62.2%; }
.list-21 { top: 64.2%; }
.list-22 { top: 66.2%; }
.list-23 { top: 68.2%; }
.touch-area-list {
  position: absolute;
  display: block;
  z-index: 15;
  cursor: pointer;
  transition: all 0.2s ease;
}
.touch-area-list:hover {
  background-color: rgba(255, 249, 184, 0.3);
}

.touch-area {
  position: absolute;
  display: block;
  z-index: 15;
  cursor: pointer;
  transition: all 0.2s ease;
}
.touch-area:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.photo-1 {
  top: 32%;
  left: 54.5%;
  width: 18%;
  height: 13.5%;
}
.photo-2 {
  top: 63.5%;
  left: 54.5%;
  width: 18.5%;
  height: 13.5%;
}
.photo-3 {
  top: 32%;
  left: 73.5%;
  width: 18.5%;
  height: 13.5%;
}
.photo-4 {
  top: 63.5%;
  left: 73%;
  width: 19.5%;
  height: 13.5%;
}

.contents-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 125% 125%;
  background-position: center; 
  background-repeat: no-repeat;
  z-index: 5;
  pointer-events: none;
}

.contents01-layer {
  background-image: url(../images/contents/p01.png);
}
.contents02-layer {
  background-image: url(../images/contents/p02.png);
}
.contents03-layer {
  background-image: url(../images/contents/p03.png);
}
.contents04-layer {
  background-image: url(../images/contents/p04.png);
}
.contents05-layer {
  background-image: url(../images/contents/p05.png);
}
.contents06-layer {
  background-image: url(../images/contents/p06.png);
}
.contents07-layer {
  background-image: url(../images/contents/p07.png);
}
.contents08-layer {
  background-image: url(../images/contents/p08.png);
}
.contents09-layer {
  background-image: url(../images/contents/p09.png);
}
.contents10-layer {
  background-image: url(../images/contents/p10.png);
}
.contents11-layer {
  background-image: url(../images/contents/p11.png);
}
.contents12-layer {
  background-image: url(../images/contents/p12.png);
}
.contents13-layer {
  background-image: url(../images/contents/p13.png);
}
.contents14-layer {
  background-image: url(../images/contents/p14.png);
}
.contents15-layer {
  background-image: url(../images/contents/p15.png);
}
.contents16-layer {
  background-image: url(../images/contents/p16.png);
}
.contents17-layer {
  background-image: url(../images/contents/p17.png);
}
.contents18-layer {
  background-image: url(../images/contents/p18.png);
}
.contents19-layer {
  background-image: url(../images/contents/p19.png);
}
.contents20-layer {
  background-image: url(../images/contents/p20.png);
}
.contents21-layer {
  background-image: url(../images/contents/p21.png);
}
.contents22-layer {
  background-image: url(../images/contents/p22.png);
}
.contents23-layer {
  background-image: url(../images/contents/p23.png);
}
.contents24-layer {
  background-image: url(../images/contents/p24.png);
}
.contents25-layer {
  background-image: url(../images/contents/p25.png);
}
.contents26-layer {
  background-image: url(../images/contents/p26.png);
}

.v-hidden {
  visibility: hidden;
  pointer-events: none;
}

.video-modal {
  border: none;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.video-modal[open] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.video-modal .modal-content {
  width: 90%;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-modal video {
  width: 100%;
  height: 100%;
  display: block;
}

.page02-link-1 {
    top: 29%;
    left: 8.3%;
    width: 8%;
    height: 8.3%;
}
.page02-link-2 {
    top: 19%;
    left: 85.8%;
    width: 6%;
    height: 8%;
}
.page03-link-1 {
    top: 20.2%;
    left: 38.5%;
    width: 6%;
    height: 8%;
}
.page04-link-1 {
    top: 13%;
    left: 39.5%;
    width: 5%;
    height: 8%;
}
.page14-link-1 {
    top: 6%;
    left: 7.5%;
    width: 5.5%;
    height: 6.5%;
}
.page18-link-1 {
    top: 78.2%;
    left: 86.15%;
    width: 5.25%;
    height: 5.6%;
}
/* P23リンク用) */
.page23-link-1 {
    top: 19.6%;
    left: 25%;
    width: 3.8%;
    height: 5.1%;
}
.page23-link-2 {
    top: 40.8%;
    left: 89.3%;
    width: 3%;
    height: 4.1%;
}
.page23-link-3 {
    top: 45.8%;
    left: 89.3%;
    width: 3%;
    height: 4.1%;
}
.page23-link-4 {
    top: 50.3%;
    left: 89.3%;
    width: 3%;
    height: 4.1%;
}
.page23-link-5 {
    top: 61%;
    left: 89.3%;
    width: 3%;
    height: 4.1%;
}
.page23-link-6 {
    top: 80%;
    left: 40.8%;
    width: 3.4%;
    height: 4.9%;
}
.page26-link-1 {
    top: 78.8%;
    left: 72.8%;
    width: 3.5%;
    height: 4.9%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}