@charset "UTF-8";
/*書き換え禁止*/
* ,*::before,*::after{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.iks_logo_left, .iks_logo_right {display: none !important;}
#header_bot {display: none !important;}
/*書き換え禁止*/

/*ここから書いてね*/

main {
  font-family: "Sawarabi Mincho", serif;
  margin-bottom: 0;
}

img.piece_sp {
  content: url('/visitor/topics/img/indoor_rest/common_img/footer_piece.svg');
  position: relative;
  z-index: 100;
}

img.piece_pc {
  content: url('/visitor/topics/img/indoor_rest/common_img/footer_piece.svg');
  /* position: relative; */
  /* z-index: 3; */
}

.piece {
    max-width: 100vw;
    margin-bottom: -2.5vw;
}

/* Chrome, Edge, Safari 対応 */
::-webkit-scrollbar {
  width: 12px; /* スクロールバーの太さ */
}

::-webkit-scrollbar-track {
  background: #f1f1f1; /* 背景（トラック部分） */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #e8d173; /* バー本体の色 */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #D9BF54; /* ホバー時の少し濃い色 */
}

/* Firefox 対応 */
* {
  scrollbar-width: thin;              /* 細めに設定 */
  scrollbar-color: #e8d173 #f1f1f1;  /* 本体色 トラック色 */
}

footer {
  position: relative;
  z-index: 100;
  margin-top: -15vh;
}

.footer_wrapper {
  background-color: #999999;
  position: relative;
}

.hamburger-fade__wrapper {
  background-color: 〇〇; /*ハンバーガーメニューの背景色を変えられるよ*/
}

.title p {
  font-size: 11vw;
  font-weight: 400;                     /* 太さ（400=通常） */
  color: #323a39;                      /* 文字色 */
  text-align: center;                   /* 中央揃え */
  margin: -28px 0;
  margin-top: 12px;

}

.hamburger-fade__wrapper {
  background-color: #dab826; /*ハンバーガーメニューの背景色を変えられるよ*/
}

/* 読み込み中の画面（Loading... の文字だけ）。読み込みが終わったらふわっと消す（.is-loaded は indoor_rest.php の最後の script で付ける） */
.loading_screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

.loading_screen.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* FV の題名（21・教室のすゝめ）は、読み込み中の画面が消え始めてから動かす。
   それまでは止めておく（animation-delay の待ち時間も進まない）。.is-ready は indoor_rest.php の最後の script で付ける */
.first_view:not(.is-ready) .num_21,
.first_view:not(.is-ready) .char {
  animation-play-state: paused;
}

.loading_text {
  color: #dab826;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  display: flex;
  align-items: baseline;
}

.loading_text .fv_dot {
  opacity: 0;
  animation: dotFade 1.2s infinite ease-in-out;
}

.loading_text .d1 { animation-delay: 0s; }
.loading_text .d2 { animation-delay: 0.3s; }
.loading_text .d3 { animation-delay: 0.6s; }

@keyframes dotFade {
  0%, 20% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

/* 「動きを減らす」設定の端末では点を点滅させない */
@media (prefers-reduced-motion: reduce) {
  .loading_text .fv_dot {
    animation: none;
    opacity: 1;
  }
}

.first_view {
  position: relative;
  align-content: center;
  width: 100vw;
  height: calc(62.5 * var(--vh));
  overflow: hidden;
  margin: 0 auto;
  background-image: url('/visitor/topics/img/indoor_rest/phone_img/fv_1.png');
}

.fv_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-image: url('/visitor/topics/img/indoor_rest/phone_img/fv_1.png');
}

.fv_1, .fv_2, .fv_3, .fv_4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}

.fv_1 {
  background-image: url('/visitor/topics/img/indoor_rest/phone_img/fv_1.png');
}

.fv_2 {
  background-image: url('/visitor/topics/img/indoor_rest/phone_img/fv_2.png');
}

.fv_3 {
  background-image: url('/visitor/topics/img/indoor_rest/phone_img/fv_3.png');
}

.fv_4 {
  background-image: url('/visitor/topics/img/indoor_rest/phone_img/fv_4.png');
}

.fv_1 { animation: slide-animation-01 24s linear infinite 2.5s; opacity: 1; }
.fv_2 { animation: slide-animation-02 24s linear infinite 2.5s; }
.fv_3 { animation: slide-animation-03 24s linear infinite 2.5s; }
.fv_4 { animation: slide-animation-04 24s linear infinite 2.5s; }

@keyframes slide-animation-01 {
  0%   { opacity: 1; transform: scale(1.0); }
  20%  { opacity: 1; }
  25%  { opacity: 0; transform: scale(1.08); }
  95%  { opacity: 0; transform: scale(1.0); }
  100% { opacity: 1; transform: scale(1.0); }
}

@keyframes slide-animation-02 {
  0%   { opacity: 0; transform: scale(1.0); }
  20%  { opacity: 0; transform: scale(1.0); }
  25%  { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.0); }
}

@keyframes slide-animation-03 {
  0%   { opacity: 0; transform: scale(1.0); }
  45%  { opacity: 0; transform: scale(1.0); }
  50%  { opacity: 1; }
  70%  { opacity: 1; }
  75%  { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.0); }
}

@keyframes slide-animation-04 {
  0%   { opacity: 0; transform: scale(1.0); }
  70%  { opacity: 0; transform: scale(1.0); }
  75%  { opacity: 1; }
  95%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.08); } 
}

.fv_content {
  position: relative;
  width: 100vw;
  box-sizing: border-box;
  z-index: 10;
  background-color: rgba(255, 256, 256, 0.6);
  height: fit-content;
  padding: 4% 2%; 
}

.band {
  width: 100vw;
}

.subtitle,.location {
  position: relative;
  display: inline-flex;
  line-height: 1.4;
  background: linear-gradient(to right,rgba(236,219,146,0.8),rgba(218,184,38,0.8));
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.fv_title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 0;
}

.fv_title_line {
  display: inline-flex;
  height: 18vw;
  align-items: center;
  padding: 4px 8px;
  position: relative;
}

.fv_title_line1 {
  background: linear-gradient(to right,#ecdb92,#dab826);
}

.fv_title_line2 {
  background: linear-gradient(to right,#ecdb92,#dab826);
  margin-left: 45%;
}

.num_21 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20vw;
  height: 20vw;
  background-color: #ffffff;
  border-radius: 50%;
  color: #d6a616;
  font-size: 16vw;
  margin-right: 8px;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  animation: fadeInUp 0.6s ease-out forwards;
}

.char {
  color: #333333;
  font-size: 16vw;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.4s ease-out forwards;
}

.c1 { animation-delay: 0.5s; } 
.c2 { animation-delay: 0.7s; }
.c3 { animation-delay: 0.9s; }
.c4 { animation-delay: 1.1s; }
.c5 { animation-delay: 1.3s; }
.c6 { animation-delay: 1.5s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.index {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}

.v {
  position: relative; 
  z-index: 2;
  display: block;
  height: 4vw;
}

.index_button {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  width: 100vw;
  height: calc(12.5 * var(--vh));
  background-size: cover;
}

.index_about_button {
  background-image: url('/visitor/topics/img/indoor_rest/common_img/background_index_about.png');
}

.index_about_button:hover .index_about_font{
  font-size: clamp(24px, 7.47vw, 31px);
}

.index_tenji_button {
  background-image: url('/visitor/topics/img/indoor_rest/common_img/background_index_tenji.png');
}

.index_tenji_button:hover .index_tenji_font{
  font-size: clamp(24px, 7.47vw, 31px);
}

.index_honkan_button {
  background-image: url('/visitor/topics/img/indoor_rest/common_img/background_index_honkan.png');
}

.index_honkan_button:hover .index_honkan_font{
  font-size: clamp(24px, 7.47vw, 31px);
}

.index_about_font, .index_honkan_font {
  position: relative; 
  z-index: 2;
  font-size: clamp(21px, 6.4vw, 27px);
  color: #ffffff;
  transition: font-size 0.4s ease 0s;
  
}

.index_tenji_font{
  position: relative; 
  z-index: 2;
  font-size: clamp(21px, 6.4vw, 27px);
  color: #dab826;
  filter: drop-shadow(2px 2px 4px #ffff00);
  transition: font-size 0.4s ease 0s;
}

.index_about_button::before,.index_honkan_button::before {
  content: '';
  position: absolute;
  width: 100vw;
  height: calc(12.5 * var(--vh));
  background-color: rgba(218,184,38,0.9);
}

.index_tenji_button::before {
  content: '';
  position: absolute;
  width: 100vw;
  height: calc(12.5 * var(--vh));
  background-color: rgba(255,255,255,0.85)
}

.subhead {
  display: flex;
  flex-flow: column;
  width: 100vw;
  height: calc(25 * var(--vh));
  background-size: cover;
}

.subhead_title {
  position: relative; 
  z-index: 3;
  font-size: clamp(24px, 7.47vw, 32px);
  color: #3d3939;
}

.subhead_title_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  height: calc(6.5 * var(--vh));
  width: 85vw;
  background: linear-gradient(to right, #ecdb92, #dab826);
  margin-top: 20%;
}

.subhead_title_box::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%); 
  border-style: solid;
  border-width: calc(3.25 * var(--vh)) 0 calc(3.25 * var(--vh)) 7vw;
  border-color: transparent transparent transparent #dab826;
}

.subhead_explanation_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 3;
  background-color: #b3b3b3;
  width: 90vw;
  height: calc(5 * var(--vh));
  margin: 0 auto;
  margin-top: 3%;
  box-shadow: inset 0 0 20px rgba(256, 256, 256, 1);
}

.subhead_explanation {
  position: relative;
  z-index: 2;
  /* font-size: clamp(12.5px, 3.73vw, 16px); */
  color: #ffffff;
  margin: 0;
  padding: 3%;
  text-align: left;
}

.subhead_about {
  background-image: url('/visitor/topics/img/indoor_rest/common_img/subhead_about.png') ;
}

.subhead_about::before {
  content: '';
  position: absolute;
  width: 100vw;
  height: calc(25 * var(--vh));
  background-color: rgba(255,255,255,0.85);
}

.about_contents_background {
  height: calc(50 * var(--vh));
  width: 100vw;
  background: linear-gradient(#ecdb92,#dab826);
}

.about_wrap {
  display: flex;
  position: relative;
  width: 95%;
  cursor: pointer;
}

.about_honkan_wrap {
  justify-content: flex-end;
  margin-top: 5%;
}

.about_img {
  width: 75%;
  margin-top: 10%;
  margin-left: 5%;
}

.about_tenji_img {
  margin-right: 5%;
  box-shadow: -5px 5px 0 #999999;
}

.about_honkan_img {
  box-shadow: -5px 5px 0 #999999;
}

.about_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 3;
  width: 45vw;
  height: 45vw;
  top: 15vw;
  border-radius: 50%;
  box-shadow: 0px 0px 6px rgba(255, 255, 0, 0.6);
  padding: 3%;
  box-sizing: border-box;
  background-color: #ffffff;
  transition: background-color 0.7s ease 0s,transform 0.9s ease 0s;
}

.about_text:hover {
  background-color: #dab826;
}

.about_text:hover .about_title {
  color: #ffffff;
}

.about_text:hover .about_explanation{
  color: #ffffff;
}

.about_text:hover .v2{
  background-image: url('/visitor/topics/img/indoor_rest/common_img/v_white.png') ;
}

.about_text:active {
  transform: scale(0.9);
}

.about_text_tenji {
  margin-left: 50vw;
}

.about_text_honkan {
  right: 45vw;
}

.about_title {
  font-size: clamp(14.5px, 4.53vw, 19px);
  margin: 0 0 2% 0;
  color: #333333;
  transition: color 0.8s ease 0s,transform 0.9s ease 0s;
}

.about_explanation {
  font-size: clamp(10.5px, 3.33vw, 14px);
  margin: 0;
  line-height: 1.4;
  color: #333333;
  transition: color 0.8s ease 0s,transform 0.9s ease 0s;
}

.v2 {
  width: 23%;
  height: 9%;
  margin-top: 8%;
  background-size: cover;
  background-image: url('/visitor/topics/img/indoor_rest/common_img/v_black.png') ;
  animation: fluffy 3s infinite;
  transition: background-image 0.8s ease 0s,transform 0.9s ease 0s;
}

@keyframes fluffy {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-50%);
  }
}

.about_object_background {
  width: 100vw;
  height: calc(25 * var(--vh));
  background-color: #dab826;
  display: flex;
  align-items: center;
}

.about_object_fixed {
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
}

.about_object {
  position: relative;
  width: 35vw;
}

.about_object_kogito {
  margin-left: 5vw;
}

.about_object_kanematsu {
  margin-left: 20vw;
}

.about_object_background {
  width: 100vw;
  height: calc(25 * var(--vh));
  background-color: #dab826;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.about_object_fixed {
  position: relative;
  display: flex;
  align-items: center;
  width: 100vw;
  height: 100%;
}

.about_object {
  position: relative;
  width: 35vw;
}

.about_object_kogito {
  margin-left: 5vw;
}

.about_object_kanematsu {
  margin-left: 20vw;
}

.stage_box {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  pointer-events: none;
}

.stage {
  position: relative;
  display: flex;
  align-items: center;
  width: 57%;
  height: 100%;
  overflow: hidden;
}

.character {
  position: relative;
  bottom: -5%;
  left: -10cqi;
  width: auto;
  height: auto;
  font-size: clamp(10px, 2.8cqi, 16px);
  animation: walk-across 8s linear infinite, bobbing 0.6s ease-in-out infinite alternate;
}

.head {
  width: 0.7em;
  height: 0.7em;
  background: #333333;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.body {
  width: 0.5em;
  height: 1.1em;
  background: #444444;
  margin: 0.05em auto 0;
  border-radius: 0.4em 0.4em 0.3em 0.3em;
  position: relative;
  z-index: 3;
}

.arm {
  position: absolute;
  width: 0.35em;
  height: 1.2em;
  top: 0.9em;
  left: 50%;
  margin-left: -0.2em;
  border-radius: 0.3em;
  transform-origin: 50% 0.3em;
}

.leg {
  position: absolute;
  width: 0.4em;
  height: 1.4em;
  top: 1.5em;
  left: 50%;
  margin-left: -0.19em;
  border-radius: 0.5em;
  transform-origin: 50% 0.4em;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
}

.arm_left, .leg_left {
  background: #222222;
  z-index: 1;
}

.arm_right, .leg_right {
  background: #555555;
  z-index: 4;
}

.arm_right { animation: swing-arm 1.2s ease-in-out infinite alternate; }
.arm_left  { animation: swing-arm 1.2s ease-in-out infinite alternate-reverse; }

.leg_right { animation: swing-leg 1.2s ease-in-out infinite alternate; }
.leg_left  { animation: swing-leg 1.2s ease-in-out infinite alternate-reverse; }


@keyframes walk-across {
  0%   { left: -10cqi; }
  100% { left: 100%; }
}

@keyframes bobbing {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-0.3em); }
}

@keyframes swing-arm {
  0%   { transform: rotate(-30deg); }
  100% { transform: rotate(30deg); }
}

@keyframes swing-leg {
  0%   { transform: rotate(25deg); }
  100% { transform: rotate(-25deg); }
}

.tenji {
  position: relative;
  z-index: 6;
}

.subhead_tenji {
  background-image: url('/visitor/topics/img/indoor_rest/common_img/subhead_tenji.png') ;
}

.subhead_tenji::before {
  content: '';
  position: absolute;
  width: 100vw;
  height: calc(25 * var(--vh));
  background-color: rgba(255,255,255,0.85);
}

.tab_area {
  width: 100%;
  min-height: calc(50 * var(--vh));
}

.tenji_buttons {
  display: grid;
  gap: 2vw;
  padding: 2%;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: calc(25 * var(--vh));
  background-color: rgba(218, 184, 38, 0.85);
  box-sizing: border-box;
}

.tenji_button_label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.tenji_button {
  display: flex;
  flex-direction: column;
  align-content: center;
  width: 46vw;
  height: 100%;
  padding: 2%;
  border-radius: 15px;
  background-color: #ffffff;
  box-shadow: 3px 4px #808080;
  overflow: hidden;
}

.tenji_button:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

.tenji_button:active {
  transform: scale(0.95);
  transition: 0s;
}

.tenji_button_title_box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 2%;
}

.tenji_button_title {
  font-size: clamp(13px, 4vw, 17px);
  color: #333333;
  transition: color 5s ease 0; 
}

.tenji_button_imgdetail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tenji_button_img {
  width: 60%;
  height: auto;
  display: block;
}

.tenji_button_detail {
  display: flex;
  width: auto;
  cursor: pointer;
  user-select: none;
  justify-content: center;
}

.tenji_button_detail_text_box {
  transition: color 5s ease 0; 
}

.tenji_button_detail_text {
  font-size: clamp(12px, 3.47vw, 15px);
  
  transition: color 1s ease 0s; 
}

.arrow_wrap {
  display: flex;
  align-items: center;  
  position: absolute;
  margin-left: 10%;
  margin-top: 3%;
  width: 8vw;
  height: calc(1.5 * var(--vh));
  transform: scaleX(-1);
}

.arrow_line_wrap,
.circle_wrap {
  transition: transform 0.4s ease-out; 
}

.arrow_line_wrap {
  position: relative;
  top: 80%;
}

.circle::after {
  content:'';
  position: relative;
  display: block;
  margin-left: 1.6vw;
  margin-top: calc(-0.1 * var(--vh));
  height: 1px;
  background: #4d4d4d;
  transform: rotate(-45deg) translateY(-50%);
  transform-origin: left bottom;
  transition: background 1s ease 0s; 
}

.circle::before {
  content:'';
  position: relative;
  display: block;
  margin-left: 1.5vw;
  margin-top: calc(1.7 * var(--vh));
  width: 28vw;
  height: 1px;
  background: #4d4d4d;
  transform: translateY(-50%);
  z-index: 1;
  transition: background 1s ease 0s; 
}

.circle {
  width: 6vw;
  height: 6vw;
  background-color: #EADBAD;
  border-radius: 50%;
  position: relative;
  display: block;
  margin-top: calc(-0.5 * var(--vh));
  margin-left: -8.8vw;
  margin-bottom: 0px;
  transition: background-color 1s ease 0s; 
}


.theme_circle::after {
  content:'';
  position: relative;
  display: block;
  margin-left: 1.6vw;
  margin-top: calc(-0.1 * var(--vh));
  height: 1px;
  background: #4d4d4d;
  transform: rotate(-45deg) translateY(-50%);
  transform-origin: left bottom;
  transition: background 1s ease 0s; 
}

.theme_circle::before {
  content:'';
  position: relative;
  display: block;
  margin-left: 1.5vw;
  margin-top: calc(1.7 * var(--vh));
  width: 45vw;
  height: 1px;
  background: #4d4d4d;
  transform: translateY(-50%);
  z-index: 1;
  transition: background 1s ease 0s; 
}

.theme_circle {
  width: 6vw;
  height: 6vw;
  background-color: #EADBAD;
  border-radius: 50%;
  position: relative;
  display: block;
  margin-top: calc(-0.5 * var(--vh));
  margin-left: -8.8vw;
  margin-bottom: 0px;
  transition: background-color 1s ease 0s; 
}

.tab_content {
  display: none;
  width: 100%;
  height: 100%;
  clear: both;
  overflow: hidden;
}

.tab_content img {
  width: 100%;
  height: auto;
  display: block;
}

input[type="radio"] {
  display: none;
}

#blackboard:checked ~ .tab_area #blackboard_content,
#kamiten:checked ~ .tab_area #kamiten_content,
#gakuten:checked ~ .tab_area #gakuten_content,
#ecocap:checked ~ .tab_area #ecocap_content {
  display: block;
}

#blackboard:checked ~ .tenji_buttons .tenji_button_blackboard,
#kamiten:checked ~ .tenji_buttons .tenji_button_kamiten,
#gakuten:checked ~ .tenji_buttons .tenji_button_gakuten,
#ecocap:checked ~ .tenji_buttons .tenji_button_ecocap {
  background-color: #dab826;
  color: #fff;
  transform: translateY(0px);
}

#blackboard:checked ~ .tenji_buttons .tenji_button_blackboard .tenji_button_title {
  color: #fff;
}

#kamiten:checked ~ .tenji_buttons .tenji_button_kamiten .tenji_button_title {
  color: #fff;
}

#gakuten:checked ~ .tenji_buttons .tenji_button_gakuten .tenji_button_title {
  color: #fff;
}

#ecocap:checked ~ .tenji_buttons .tenji_button_ecocap .tenji_button_title {
  color: #fff;
}

.tenji_slider {
  position: relative;
  width: 100%;
  height: calc(25 * var(--vh));
  margin: 0 auto;
  overflow: hidden;
}

.tenji_slider input[type="radio"] {
  display: none;
}

.slides {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 0.5s ease;
  animation: autoSlide 9s infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  object-position: left;
}

@keyframes autoSlide {
  0%, 28%      { transform: translateX(0%); }
  33.3%, 61.3% { transform: translateX(-33.333%); }
  66.6%, 94.6% { transform: translateX(-66.666%); }
  100%         { transform: translateX(0%); }
}

.nav-arrows {
  display: none;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  justify-content: space-between;
  padding: 0 2%;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 5;
}

.nav-arrows label {
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  background: rgba(218, 184, 38, 0.7);
  border-radius: 50%;
  width: 10%;
  height: auto;
  aspect-ratio: 1 / 1;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
  position: relative;
  z-index: 1;
}

.nav-arrows label:hover {
  transform: scale(1.08);
}

.nav-arrows label:active {
  transform: scale(0.95);
}

.slide_button {
  width: 40%;
  height: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.slide_left_button {
  width: 0;
  height: 0;
  border-top: 35cqh solid transparent;
  border-bottom: 35cqh solid transparent;
  border-right: 40cqh solid #ffffff;
  position: relative;
  left: -10%;
}

.slide_right_button {
  width: 0;
  height: 0;
  border-top: 35cqh solid transparent;
  border-bottom: 35cqh solid transparent;
  border-left: 40cqh solid #ffffff;
  position: relative;
  right: -10%;
}

.tenji_slider input[type="radio"]:not(:checked) ~ .blackboard_slide_arrow_1,
.tenji_slider input[type="radio"]:nth-of-type(1):checked ~ .blackboard_slide_arrow_1 {
  display: flex;
}

.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .blackboard_slide_arrow_1,
.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .blackboard_slide_arrow_1 {
  display: none;
}

.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .blackboard_slide_arrow_2 {
  display: flex;
}

.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .blackboard_slide_arrow_3 {
  display: flex;
}

.tenji_slider input[type="radio"]:not(:checked) ~ .kamiten_slide_arrow_1,
.tenji_slider input[type="radio"]:nth-of-type(1):checked ~ .kamiten_slide_arrow_1 {
  display: flex;
}

.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .kamiten_slide_arrow_1,
.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .kamiten_slide_arrow_1 {
  display: none;
}

.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .kamiten_slide_arrow_2 {
  display: flex;
}

.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .kamiten_slide_arrow_3 {
  display: flex;
}

.tenji_slider input[type="radio"]:not(:checked) ~ .gakuten_slide_arrow_1,
.tenji_slider input[type="radio"]:nth-of-type(1):checked ~ .gakuten_slide_arrow_1 {
  display: flex;
}

.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .gakuten_slide_arrow_1,
.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .gakuten_slide_arrow_1 {
  display: none;
}

.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .gakuten_slide_arrow_2 {
  display: flex;
}

.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .gakuten_slide_arrow_3 {
  display: flex;
}

.tenji_slider input[type="radio"]:not(:checked) ~ .ecocap_slide_arrow_1,
.tenji_slider input[type="radio"]:nth-of-type(1):checked ~ .ecocap_slide_arrow_1 {
  display: flex;
}

.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .ecocap_slide_arrow_1,
.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .ecocap_slide_arrow_1 {
  display: none;
}

.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .ecocap_slide_arrow_2 {
  display: flex;
}

.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .ecocap_slide_arrow_3 {
  display: flex;
}

.controls {
  position: absolute;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 60px;
  z-index: 10;
}

.dot {
  width: 12px;
  height: 12px;
  background-color: #cccccc;
  border-radius: 50%;
  pointer-events: none;
  cursor: default;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.controls .dot:nth-child(1) { animation: dotActive1 9s infinite; }
.controls .dot:nth-child(2) { animation: dotActive2 9s infinite; }
.controls .dot:nth-child(3) { animation: dotActive3 9s infinite; }

@keyframes dotActive1 {
  0%, 28%, 100% { background-color: #dab826; transform: scale(1.2); }
  33.3%, 94.6%  { background-color: #cccccc; transform: scale(1); }
}
@keyframes dotActive2 {
  0%, 28%, 66.6%, 100% { background-color: #cccccc; transform: scale(1); }
  33.3%, 61.3%          { background-color: #dab826; transform: scale(1.2); }
}
@keyframes dotActive3 {
  0%, 61.3%, 100% { background-color: #cccccc; transform: scale(1); }
  66.6%, 94.6%    { background-color: #dab826; transform: scale(1.2); }
}

.tenji_slider input[type="radio"]:nth-of-type(1):checked ~ .slides,
.tenji_slider input[type="radio"]:nth-of-type(1):checked ~ .controls .dot {
  animation-delay: 0s;
}

.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .slides,
.tenji_slider input[type="radio"]:nth-of-type(2):checked ~ .controls .dot {
  animation-delay: -3s;
}

.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .slides,
.tenji_slider input[type="radio"]:nth-of-type(3):checked ~ .controls .dot {
  animation-delay: -6s;
}

.tenji_slider_detail {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 2%;
  margin-top: 0;
  width: 100%;
  min-height: calc(25 * var(--vh));
  background-color: rgba(218, 184, 38, 0.85);
  box-sizing: border-box;
  padding: calc(2 * var(--vh)) 6.2vw;
}

.tenji_slider_detail_title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
}

.tenji_slider_detail_title_text {
  margin: 0;
  font-size: clamp(19px, 5.87vw, 25px);
  color: #ffffff;
  white-space: nowrap;
}

.circle_wrapper {
  position: relative;
  width: 16vw;
  height: 16vw;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 2%;
  margin-bottom: -4%;
}

.graph_circle {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg) scaleX(-1);
  overflow: visible;
}

.graph_circle .circle_bg {
  fill: none;
  stroke: transparent;
}

.graph_circle .circle_val {
  fill: none;
  stroke: rgba(51, 51, 51, 0.6);
  stroke-dasharray: 140 200;
  stroke-dashoffset: -28;
  stroke-width: 1.5px;
}

.titleline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 69%;
  margin-left: 0%;
  right: 2%;
}

.arrange_21_line {
  position: relative;
  bottom: 0;
  width: 69vw;
  height: 2px;
  top: -6px;
  background-color: rgba(51, 51, 51, 0.6);
  transform: skewX(300deg);
}

.circle_text {
  position: absolute;
  font-size: 7vw;
  color: rgba(51, 51, 51, 0.3);
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tenji_slider_detail_explanation {
  height: calc(10 * var(--vh));
  display: flex;
  align-items: center;
}

.tenji_slider_detail_explanation_text {
  position: relative;
  font-size: clamp(12.5px, 3.73vw, 16px);
  color: #333333;
}

.subhead_honkan {
  background-image: url('/visitor/topics/img/indoor_rest/common_img/subhead_honkan.png') ;
}

.subhead_honkan::before {
  content: '';
  position: absolute;
  width: 100vw;
  height: calc(25 * var(--vh));
  background-color: rgba(255,255,255,0.85);
}

.honkan_map_background {
  opacity: 1;
  display: flex;
  flex-direction: column;
  width: 100vw;
  padding-bottom: calc(15 * var(--vh));
  height: calc(70 * var(--vh));
  box-sizing: border-box;
  background: linear-gradient(135deg, #dab826, #f4eabe);
  position: relative;
  z-index: 14;
}

.honkan_map_background input[type="radio"] {
  display: none;
}

.honkan_map_button_area {
  display: contents;
}

.honkan_map_buttons {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2vw;
  width: 100vw;
  margin-bottom: 3vw;
  z-index: 6;
}

.honkan_button_all {
  width: 92vw;
  height: 12vw;
  margin-top: 4vw;
}

.honkan_map_button_floor {
  display: flex;
  justify-content: center;
  gap: 2vw;
  width: 100%;
}

.honkan_map_button {
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: 2px 3px #808080;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.5s ease 0s;
}

.honkan_button_1f,
.honkan_button_2f,
.honkan_button_3f {
  width: 29vw;
  height: 12vw;
}

.honkan_button_label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
}

.honkan_map_button:hover {
  transform: scale(1.08);
}

.honkan_button_title {
  margin: 0;
  font-size: clamp(15px, 4.53vw, 19px);
  color: #333333;
}

#all:checked ~ .honkan_map_button_area .honkan_button_all,
#first:checked ~ .honkan_map_button_area .honkan_button_1f,
#second:checked ~ .honkan_map_button_area .honkan_button_2f,
#third:checked ~ .honkan_map_button_area .honkan_button_3f {
  background-color: #dab826;
  transform: translateY(0px);
  filter: drop-shadow(0 0 0.75rem rgba(256, 256, 256, 0.5));
}

#all:checked ~ .honkan_map_button_area .honkan_button_all .honkan_button_title,
#first:checked ~ .honkan_map_button_area .honkan_button_1f .honkan_button_title,
#second:checked ~ .honkan_map_button_area .honkan_button_2f .honkan_button_title,
#third:checked ~ .honkan_map_button_area .honkan_button_3f .honkan_button_title {
  color: #ffffff;
}

.honkan_map_area {
  order: 2;
  width: 100vw;
  margin: 0 auto 5vw;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
}

.tab_content {
  display: none;
}

.tab_content img {
  width: 100%;
  height: 100%;
  display: block;
}

#all:checked ~ .honkan_map_area #all_content,
#first:checked ~ .honkan_map_area #first_content,
#second:checked ~ .honkan_map_area #second_content,
#third:checked ~ .honkan_map_area #third_content {
  display: block;
}

.ecocap_1 {
  width: 100vw;
  height: calc(25 * var(--vh));
  background-size: cover;
  background-image: url('/visitor/topics/img/indoor_rest/common_img/ecocap/1.png');
}

.ecocap_3 {
  width: 100vw;
  height: calc(25 * var(--vh));
  background-size: cover;
  background-image: url('/visitor/topics/img/indoor_rest/common_img/ecocap/3.png');
}

.honkan_map_tab_area {
  order: 3;
  display: flex;
  justify-content: space-evenly;
  width: 92vw;
  margin: 0 auto 5vw;
  z-index: 6;
}

.honkan_map_tab_3d,
.honkan_map_tab_serch {
  height: 20vw;
  width: 40vw;
  background-color: #fff;
  box-shadow: 2px 3px #333333;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.5s ease 0s;
}

.honkan_map_tab_3d:hover {
  transform: scale(1.08);
}

.honkan_map_tab_serch:hover {
  transform: scale(1.08);
}

.honkan_map_tab_3d:hover,
.honkan_map_tab_serch:hover {
  opacity: 0.9;
}

.honkan_map_tab_3d_text,
.honkan_map_tab_serch_text {
  margin: 0;
  color: #dab826;
  filter: drop-shadow(2px 2px 3px #ffff00);
  font-size: clamp(15px, 4.53vw, 19px);
  text-align: center;
}



.map-wrapper {
  display: flex;
  width: 100%;
  height: 80%;
  gap: 2%;
}

.map_container {
  position: relative;
  width: 85%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  padding: 2%;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.floor-label {
  position: absolute;
  left: 20%;
  font-size: clamp(12px, 1.8vw, 22px);
  font-weight: bold;
  color: #333;
}

.f3 { top: 17%; }
.f2 { top: 37%; }
.f1 { top: 57%; }

.all_room {
  position: absolute;
  padding: 0.5%;
}

.bg-yellow { background-color: #d6af27; }
.bg-light-yellow { background-color: #e5cd83; }
.bg-gray { background-color: #7d8285; }
.text-white { color: #ffffff; }

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

.r35-36 { top: 15%; left: 26%; width: 15%; height: 19%; }
.r32-33 { top: 15%; left: 41.5%; width: 9%;  height: 19%; }
.r31    { top: 15%; left: 51%; width: 14%; height: 19%; }
.r3-no-pass { top: 15%; left: 65%; width: 3.5%; height: 19%; }
.r30    { top: 15%; left: 69.5%; width: 10.5%; height: 19%; }

.r25-26 { top: 35%; left: 26%; width: 15%; height: 19%; }
.r22-23 { top: 35%; left: 41.5%; width: 9%;  height: 19%; }
.r21    { top: 35%; left: 51%; width: 17.5%; height: 7%; }

.room_explanation {
  font-size: clamp(5px, 0.7vw, 10px);
  font-weight: bold;
  color: #ffffff;
  height: clamp(10px, 1.1vw, 15px);
  margin-top: 2.5%;
  margin-left: 5%;
}

.passable-banner {
  position: absolute;
  top: 41.5%;
  left: 51%;
  width: 17.5%;
  height: 6%;
  background-color: #d6af27;
  color: #fff;
  font-weight: bold;
  font-size: clamp(8px, 0.8vw, 11px);
}

.r2-rest { top: 47.5%; left: 51%; width: 17.5%; height: 6.4%; }
.r20    { top: 35%; left: 69.5%; width: 10.5%; height: 19%; }

.r1-left     { top: 55%; left: 26%; width: 15%; height: 19%; }
.r1-no-entry { top: 55%; left: 41.5%; width: 27%; height: 19%; }
.r1-right    { top: 55%; left: 69.5%; width: 10.5%; height: 19%; }

.all_badge-group {
  position: absolute;
  top: 8%;
  right: 5%;
  display: flex;
  gap: 2px;
}

.all_badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: clamp(10px, 1.1vw, 15px);
  height: clamp(10px, 1.1vw, 15px);
  background-color: #e5cd83;
  border-radius: 50%;
  font-weight: bold;
  font-size: clamp(7px, 0.7vw, 10px);
  color: #333;
}

.pos-right {
  position: absolute;
  right: 5%;
  top: 8%;
}

.vertical-text {
  writing-mode: vertical-rl;
  font-weight: bold;
  font-size: 1.2vw;
  letter-spacing: -0.2em;
}

.no-entry {
  font-size: clamp(14px, 1.8vw, 26px);
  font-weight: bold;
  letter-spacing: 0.15em;
}

.staircase-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.stair-step_box {
  position: relative;
  width: 100%;
  height: 100%;
}

.stair-step {
  position: absolute;
  width: 5.5%;
  height: 4%;
  background-color: #ba9300;
}

.stair-bottom_left {
  transform: scaleY(-1);
}

.stair-step::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 350%;
  background-color: #ba9300;
}

.stair-step1  { left: 14.4%; top: 0%; }
.stair-step2  { left: 20.3%; top: 10.4%; }
.stair-step3  { left: 26.2%; top: 20.5%; }
.stair-step4  { left: 32.1%; top: 30.6%; }
.stair-step5  { left: 38%; top: 40.7%; }
.stair-step6  { left: 43.9%; top: 50.8%; }
.stair-step7  { left: 49.7%; top: 60.9%; }
.stair-step8  { left: 55.6%; top: 70.9%; }
.stair-step9  { left: 60.9%; top: 81.1%; }
.stair-step10 { left: 66.5%;    top: 91.2%; }

.stair-step1::after {
  content: "";
  position: absolute;
  bottom: 20%;
  right: 100%;
  width: 40%;
  height: 191.5%;
  background-color: #ba9300;
}

.stair-step10::after {
  content: "";
  position: absolute;
  bottom: -234%;
  left: 109%;
  width: 120%;
  height: 74%;
  background-color: #ba9300;
}


.stair-step_right {
  position: absolute;
  width: 10%;
  height: 4%;
  background-color: #ba9300;
}


.stair-step_right::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 350%;
  background-color: #ba9300;
}

.stair-step_right1  { left: -5%; top: -5%; }
.stair-step_right2  { left: 5.2%; top: 5%; }
.stair-step_right3  { left: 15.4%; top: 15.5%; }
.stair-step_right4  { left: 25.3%; top: 25.6%; }
.stair-step_right5  { left: 35.2%; top: 35.7%; }
.stair-step_right6  { left: 45.2%; top: 45.8%; }
.stair-step_right7  { left: 56%; top: 55.9%; }
.stair-step_right8  { left: 66.2%; top: 65.9%; }
.stair-step_right9  { left: 77.3%; top: 76.1%; }
.stair-step_right10 { left: 87.3%;    top: 86.2%; }

.stair-step_right10::after {
  content: "";
  position: absolute;
  bottom: -240%;
  left: 109%;
  width: 70%;
  height: 74%;
  background-color: #ba9300;
}

.stair-top_right {
  transform: scaleY(-1);
}

.small-text {
  font-weight: bold;
  font-size: clamp(4.9px, 0.8vw, 12px);
  color: #333;
}

.all_room-labels-1f {
  position: absolute;
  top: 8%;
  right: 5%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 45%;
}

.label-box {
  background-color: #e5cd83;
  padding: 2% 2%;
  font-size: clamp(3px, 0.55vw, 9px);
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  width: auto;
}

.icon-box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: clamp(12px, 1.3vw, 18px);
  height: clamp(12px, 1.3vw, 18px);
  font-size: clamp(8px, 0.8vw, 11px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.icon-elevator {
  position: absolute;
  top: 8%;
  left: 5%;
}

.bottom-right {
  position: absolute;
  bottom: 6%;
  right: 5%;
}

.icon-group {
  display: flex;
  gap: 2px;
}

.elevator-line {
  position: absolute;
  top: 22%;
  left: 28%;
  width: 2px;
  height: 42%;
  background-color: #333;
  z-index: 10;
}

.elevator-node {
  position: absolute;
  left: -3px;
  width: 8px;
  height: 8px;
  background-color: #333;
  border-radius: 50%;
}

.node-3f { top: 0%; }
.node-2f { top: 48%; }
.node-1f { top: 96%; }

.honkan_object_kanematsu_box {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 18%;
  height: auto;
  bottom: 17%;
  left: 81%;
}

.honkan_object_kanematsu {
  width: 100%;
}

.honkan_text_kanematsu {
  width: 80%;
  margin: 3%;
  border: 0.2vw solid #000000;
  background-color: #ffffff;
  font-size: clamp(10px, 2.93vw, 12.5px);
  text-align: center;
}

.honkan_object_kogito_box {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 18%;
  height: auto;
  bottom: 17%;
  left: 2%;
}

.honkan_object_kogito {
  width: 100%;
}

.honkan_text_kogito {
  width: 80%;
  margin: 3%;
  border: 0.2vw solid #000000;
  background-color: #ffffff;
  font-size: clamp(10px, 2.93vw, 12.5px);
  text-align: center;
}

.notice-banner {
  position: absolute;
  bottom: 5%;
  right: 3%;
  width: 48%;
  height: 12%;
  background-color: #d8572a;
  color: #ffffff;
  font-size: clamp(8px, 2.67vw, 11.5px);
  font-weight: bold;
  padding: 0 2%;
  border-radius: 2px;
}

.map_tab_content {
  display: none;
  width: 100%;
  height: 100%;
  clear: both;
  overflow: hidden;
}

.map_all {
  width: 100%;
  height: auto;
  display: block;
}

.map_container {
  position: relative;
  width: 100%;
  height: calc(25 * var(--vh));
  padding: 2%;
  box-sizing: border-box;
  background: transparent;
}

.map_inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.icon_explanationall {
  position: absolute;
  width: 15%;
  left: 3%;
  top: 10%;
}

.icon_explanation {
  position: absolute;
  width: 20%;
  left: 4%;
  top: 10%;
}

.room {
  position: absolute;
  background-color: #ffffff;
  border: 0.15vw solid #333333;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}

.room:has(.modal_state_input:checked) {
  background-color: #dab826;
}

.forbidden_area {
  position: absolute;
  background-color: #7d8285;
  border: 0.15vw solid #333333;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.room_num {
  width: 3.5vw;
  height: 3.5vw;
  background-color: #f4e39d;
  border: 0.12vw solid #cba235;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.8vw;
  color: #1a1a1a;
  z-index: 100;
  box-shadow: 0 0.2vw 0.4vw rgba(0, 0, 0, 0.15);
  animation: floatAnimation 2s ease-in-out infinite;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.4vw);
  }
  100% {
    transform: translateY(0);
  }
}

.modal_state_input:checked + .room_click_label .room_num {
  animation-play-state: paused;
  
  background-color: #ffffff; 
  border-color: #ffffff;
  color: #cba235; 
  transform: scale(1.1);
}

.stair_v {
  position: absolute;
  box-sizing: border-box;
  background-color: #ffffff;
  background-image: 
    linear-gradient(to right, #333333 0.12vw, transparent 0.12vw),
    linear-gradient(to bottom, #333333 0.12vw, transparent 0.12vw);
  background-size: 50% 20%;
  background-repeat: repeat;
}

.stair_v::before,
.stair_v::after {
  content: "";
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  background-color: #ffffff;
}

.stair_v::before {
  top: -20%;
  height: 20%;
  width: 102%;
  border-top: 0.12vw solid #333333;
  border-right: 0.12vw solid #333333;
  background-image: 
    linear-gradient(to right, #333333 0.12vw, transparent 0.12vw);
  background-size: 100% 100%;
}

.stair_v::after {
  top: 100%;
  height: 39%;
  width: 102%;
  border-top: 0.12vw solid #333333;
  border-bottom: 0.12vw solid #333333;
  border-right: 0.12vw solid #333333;
  background-image: 
    linear-gradient(to right, #333333 0.12vw, transparent 0.12vw);
  background-size: 100% 100%;
  z-index: 2;
}


.stair_top_left { 
  top: calc(7.5% + (14.7% * 0.125));
  left: 41.3%; 
  width: 6.7%; 
  height: calc(14.8% * 0.625);
}

.stair_top_right { 
  top: calc(7.5% + (14.7% * 0.125)); 
  left: 56.9%; 
  width: 6.6%; 
  height: calc(14.8% * 0.625); 
  border-right: 0.12vw solid #333333;
}


.stage_1f_box {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.stage_1f {
  width: 100%;
  height: 100%;
}

.surprise-runner {
  position: absolute;
  bottom: 23%;
  left: -10cqi;
  width: auto;
  height: auto;
  font-size: clamp(10px, 2.8cqi, 16px);
  z-index: 100;
  animation: surprise_walk_across 6s linear infinite;
}

.surprise-runner_head {
  width: 0.7em;
  height: 0.7em;
  background: #333333;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.surprise-runner_body {
  width: 0.5em;
  height: 1.1em;
  background: #444444;
  margin: 0.05em auto 0;
  border-radius: 0.4em 0.4em 0.3em 0.3em;
  position: relative;
  z-index: 3;
}

.surprise-runner_arm {
  position: absolute;
  width: 0.35em;
  height: 1.2em;
  top: 0.7em;
  left: 50%;
  margin-left: -0.2em;
  border-radius: 0.3em;
  transform-origin: 50% 0.3em;
}

.surprise-runner_leg {
  position: absolute;
  width: 0.4em;
  height: 1.4em;
  top: 1.5em;
  left: 50%;
  margin-left: -0.19em;
  border-radius: 0.5em;
  transform-origin: 50% 0.4em;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
}

.surprise-runner_arm-left, 
.surprise-runner_leg-left {
  background: #222222;
  z-index: 1;
}

.surprise-runner_arm-right, 
.surprise-runner_leg-right {
  background: #555555;
  z-index: 4;
}

.surprise-runner_arm-right { animation: surprise_arm_right 6s linear infinite; }
.surprise-runner_arm-left  { animation: surprise_arm_left 6s linear infinite; }
.surprise-runner_leg-right { animation: surprise_leg_right 6s linear infinite; }
.surprise-runner_leg-left  { animation: surprise_leg_left 6s linear infinite; }

@keyframes surprise_walk_across {
  0%          { left: -10cqi; opacity: 0; }
  50%, 98%    { left: calc(100% - 2% - 1em); opacity: 1; }
  98.1%, 100% { left: -10cqi; opacity: 0; }
  100% {opacity: 0;}
}

@keyframes surprise_arm_right {
  0%                     { transform: rotate(-35deg); }
  8.333%                 { transform: rotate(35deg); }
  16.666%                { transform: rotate(-35deg); }
  25.0%                  { transform: rotate(35deg); }
  33.333%                { transform: rotate(-35deg); }
  41.666%                { transform: rotate(35deg); }
  50%, 100%              { transform: rotate(35deg); }
}

@keyframes surprise_arm_left {
  0%                     { transform: rotate(35deg); }
  8.333%                 { transform: rotate(-35deg); }
  16.666%                { transform: rotate(35deg); }
  25.0%                  { transform: rotate(-35deg); }
  33.333%                { transform: rotate(35deg); }
  41.666%                { transform: rotate(-35deg); }
  50%, 100%              { transform: rotate(35deg); }
}

@keyframes surprise_leg_right {
  0%                     { transform: rotate(28deg); }
  8.333%                 { transform: rotate(-28deg); }
  16.666%                { transform: rotate(28deg); }
  25.0%                  { transform: rotate(-28deg); }
  33.333%                { transform: rotate(28deg); }
  41.666%                { transform: rotate(-28deg); }
  50%, 100%              { transform: rotate(-28deg); }
}

@keyframes surprise_leg_left {
  0%                     { transform: rotate(-28deg); }
  8.333%                 { transform: rotate(28deg); }
  16.666%                { transform: rotate(-28deg); }
  25.0%                  { transform: rotate(28deg); }
  33.333%                { transform: rotate(-28deg); }
  41.666%                { transform: rotate(28deg); }
  50%, 100%              { transform: rotate(-28deg); }
}

.stage_2f_box {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.stage_2f {
  width: 100%;
  height: 100%;
}

.r25-26 { position: absolute; top: 35%; left: 26%; width: 15%; height: 19%; }
.r22-23 { position: absolute; top: 35%; left: 41.5%; width: 9%; height: 19%; }
.r21    { position: absolute; top: 35%; left: 51%; width: 17.5%; height: 7%; }
.r20    { position: absolute; top: 35%; left: 69.5%; width: 10.5%; height: 19%; }


.walk-right-runner-2f {
  position: absolute;
  top: 39%;
  left: 26%;
  height: auto;
  font-size: clamp(10px, 2.8cqi, 16px);
  animation: walk_across_screen_2f 6s linear infinite;
}

.walk-right-runner-2f_head {
  width: 0.7em;
  height: 0.7em;
  background: #333333;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.walk-right-runner-2f_body {
  width: 0.5em;
  height: 1.1em;
  background: #444444;
  margin: 0.05em auto 0;
  border-radius: 0.4em 0.4em 0.3em 0.3em;
  position: relative;
  z-index: 3;
}

.walk-right-runner-2f_arm {
  position: absolute;
  width: 0.35em;
  height: 1.2em;
  top: 0.7em;
  left: 50%;
  margin-left: -0.2em;
  border-radius: 0.3em;
  transform-origin: 50% 0.3em;
}

.walk-right-runner-2f_leg {
  position: absolute;
  width: 0.4em;
  height: 1.4em;
  top: 1.5em;
  left: 50%;
  margin-left: -0.19em;
  border-radius: 0.5em;
  transform-origin: 50% 0.4em;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
}

.walk-right-runner-2f_arm-left, 
.walk-right-runner-2f_leg-left {
  background: #222222;
  z-index: 1;
}

.walk-right-runner-2f_arm-right, 
.walk-right-runner-2f_leg-right {
  background: #555555;
  z-index: 4;
}

/* --- 手足のアニメーション（6秒移動の速度に合わせて1.2秒周期でゆったり歩行） --- */
.walk-right-runner-2f_arm-right { animation: runner_arm_swing_2f 1.2s linear infinite; }
.walk-right-runner-2f_arm-left  { animation: runner_arm_swing_2f 1.2s linear infinite; animation-delay: -0.6s; }
.walk-right-runner-2f_leg-right { animation: runner_leg_swing_2f 1.2s linear infinite; animation-delay: -0.6s; }
.walk-right-runner-2f_leg-left  { animation: runner_leg_swing_2f 1.2s linear infinite; }


@keyframes walk_across_screen_2f {
  0% { 
    left: 30%; 
    opacity: 0; 
  }
  4% { 
    opacity: 1; /* 25教室から出ながらくっきり表示 */
  }
  94% { 
    left: 75%; /* 20教室の右端 (69.5% + 10.5%) 到着 */
    opacity: 1; 
  }
  98%, 100% { 
    left: 75%; 
    opacity: 0;
  }
}

/* 2. 腕の振り */
@keyframes runner_arm_swing_2f {
  0%, 100% { transform: rotate(-35deg); }
  50%      { transform: rotate(35deg); }
}

/* 3. 脚の振り */
@keyframes runner_leg_swing_2f {
  0%, 100% { transform: rotate(-28deg); }
  50%      { transform: rotate(28deg); }
}


.stage_3f_box {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.stage_3f_box {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.stage_3f {
  width: 100%;
  height: 100%;
}

.sit-runner-3f {
  position: absolute;
  top: 22%;
  left: 41.5%;
  width: 1.6%;
  height: auto;
  font-size: clamp(8px, 2.1cqi, 13px);
  z-index: 50;
  animation: sit_walk_across_3f 6s linear infinite;
}

.sit-runner-3f_head {
  width: 0.7em;
  height: 0.7em;
  background: #333333;
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}

.sit-runner-3f_body {
  width: 0.5em;
  height: 1.1em;
  background: #444444;
  margin: 0.05em auto 0;
  border-radius: 0.4em 0.4em 0.3em 0.3em;
  position: relative;
  z-index: 3;
}

.sit-runner-3f_arm {
  position: absolute;
  width: 0.35em;
  height: 1.2em;
  top: 0.7em;
  left: 50%;
  margin-left: -0.2em;
  border-radius: 0.3em;
  transform-origin: 50% 0.3em;
}

.sit-runner-3f_leg-wrap {
  position: absolute;
  width: 0.4em;
  height: 1.4em;
  top: 1.5em;
  left: 50%;
  margin-left: -0.19em;
  transform-origin: 50% 0.1em;
}

.sit-runner-3f_thigh {
  width: 50%;
  height: 45%;
  background: inherit;
  border-radius: 0.3em;
  transform-origin: 50% 0%;
}

.sit-runner-3f_shin {
  width: 100%;
  height: 85%;
  background: inherit;
  margin-top: -0.1em;
  border-radius: 0.3em;
  transform-origin: 50% 0.1em;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
}

.sit-runner-3f_thigh {
  width: 100%;
  height: 50%;
  background: inherit;
  border-radius: 0.3em;
  transform-origin: 50% 0%;
}

.sit-runner-3f_shin {
  width: 100%;
  height: 85%;
  background: inherit;
  margin-top: -0.2em;
  border-radius: 0.3em;
  transform-origin: 50% 0.1em;
  clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
}

.sit-runner-3f_arm-left {
  z-index: 1;
  background: #222222;
}

.sit-runner-3f_leg-wrap-left {
  z-index: 1;
}

.sit-runner-3f_arm-right {
  z-index: 4;
  background: #555555;
}
.sit-runner-3f_leg-wrap-right {
  z-index: 4;
}

.sit-runner-3f_leg-wrap-left .sit-runner-3f_thigh,
.sit-runner-3f_leg-wrap-left .sit-runner-3f_shin {
  background: #222222;
}

.sit-runner-3f_leg-wrap-right .sit-runner-3f_thigh,
.sit-runner-3f_leg-wrap-right .sit-runner-3f_shin {
  background: #555555;
}

.sit-runner-3f_chair {
  position: absolute;
  top: 1.7em;
  left: -0.25em;
  width: 0.9em;
  height: 1.0em;
  border-top: 0.18em solid #666666;
  border-left: 0.18em solid #666666;
  border-right: 0.18em solid #666666;
  opacity: 0;
}

.sit-runner-3f_chair::before {
  content: "";
  position: absolute;
  bottom: 100%;
  right: -0.14em;
  width: 0.9em;
  height: 1.0em;
  background-color: transparent;
  border-left: 0.18em solid #666666;
  border-radius: 0.1em 0.1em 0 0;
}

.sit-runner-3f_arm-right { animation: sit_arm_right_3f 6s linear infinite; }
.sit-runner-3f_arm-left  { animation: sit_arm_left_3f 6s linear infinite; }

.sit-runner-3f_leg-wrap-right          { animation: sit_thigh_right_3f 6s linear infinite; }
.sit-runner-3f_leg-wrap-right .sit-runner-3f_shin { animation: sit_shin_right_3f 6s linear infinite; }

.sit-runner-3f_leg-wrap-left           { animation: sit_thigh_left_3f 6s linear infinite; }
.sit-runner-3f_leg-wrap-left .sit-runner-3f_shin  { animation: sit_shin_left_3f 6s linear infinite; }

.sit-runner-3f_chair { animation: sit_chair_show_3f 6s linear infinite; }

@keyframes sit_walk_across_3f {
  0% { 
    left: 41.5%; 
    transform: translateY(0);
    opacity: 0; 
  }
  5% { 
    opacity: 1; 
  }
  45% { 
    left: 53%;
    transform: translateY(0);
    opacity: 1;
  }
  50%, 95% { 
    left: 53%; 
    transform: translateY(0.35em);
    opacity: 1; 
  }
  98%, 100% { 
    left: 41.5%; 
    transform: translateY(0);
    opacity: 0; 
  }
}

@keyframes sit_arm_right_3f {
  0%, 16.666%, 33.333%  { transform: rotate(-35deg); }
  8.333%, 25.0%, 41.666% { transform: rotate(35deg); }
  50%, 100%              { transform: rotate(-35deg); } 
}

@keyframes sit_arm_left_3f {
  0%, 16.666%, 33.333%  { transform: rotate(35deg); }
  8.333%, 25.0%, 41.666% { transform: rotate(-35deg); }
  50%, 100%              { transform: rotate(-35deg); } 
}

@keyframes sit_thigh_right_3f {
  0%, 16.666%, 33.333%  { transform: rotate(28deg); }
  8.333%, 25.0%, 41.666% { transform: rotate(-28deg); }
  50%, 100%              { transform: rotate(-90deg); } 
}

@keyframes sit_thigh_left_3f {
  0%, 16.666%, 33.333%  { transform: rotate(-28deg); }
  8.333%, 25.0%, 41.666% { transform: rotate(28deg); }
  50%, 100%              { transform: rotate(-90deg); }
}

@keyframes sit_shin_right_3f {
  0%, 41.666% { transform: rotate(0deg); }
  50%, 100%   { transform: rotate(90deg); } 
}

@keyframes sit_shin_left_3f {
  0%, 41.666% { transform: rotate(0deg); }
  50%, 100%   { transform: rotate(90deg); }
}

@keyframes sit_chair_show_3f {
  0%, 44%   { opacity: 0; }
  45%, 95%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}
.stage_3f_box {
  container-type: inline-size;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.stage_3f {
  width: 100%;
  height: 100%;
}


.teacher-runner-3f {
  position: absolute;
  top: 22%;
  right: 38%;
  width: auto;
  height: auto;
  font-size: clamp(8px, 2.1cqi, 13px);
  z-index: 55;
  opacity: 1;
  animation: teacher_appear_cycle_3f 6s linear infinite;
}

.teacher-runner-3f_head {
  width: 0.7em;
  height: 0.7em;
  background: #333333;
  border-radius: 50%;
  position: relative;
  z-index: 3;
}

.teacher-runner-3f_body {
  width: 0.7em;
  height: 1.4em;
  background: #555555;
  position: relative;
  z-index: 3;
}

.teacher-runner-3f_arm {
  position: absolute;
  width: 0.3em;
  top: 0.7em;
  border-radius: 0em 0em 0.3em 0.3em;
  transform-origin: 50% 0.2em;
}

.teacher-runner-3f_arm-right {
  height: 1.1em;
  left: -0.15em;
  top: 0.75em;
  background: #555555;
  z-index: 4;
  transform: rotate(40deg);
}

.teacher-runner-3f_arm-left {
  height: 0.7em;
  right: -0.2em;
  top: 0.75em;
  background: #555555;
  z-index: 1;
  transform: rotate(-40deg);
}

.teacher-runner-3f_pointer {
  position: absolute;
  height: 0.8em;
  width: 0.25em;
  right: -0.4em;
  top: 0.6em;
  background: #555555;
  border-radius: 0.3em 0.3em 0.3em 0.3em;
  z-index: 1;
  transform-origin: bottom center;
  animation: pointer_swing_3times_in_3s 6s linear infinite;
}

.teacher-runner-3f_pointer::before {
  content: "";
  position: absolute;
  bottom: 0.7em;
  left: 35%;
  width: 0.11em;
  height: 1.2em;
  background: #555555;
  border-radius: 0.06em;
  transform: rotate(0deg);
}

@keyframes teacher_appear_cycle_3f {
  0%, 46% { 
    opacity: 0; 
  }
  50% { 
    opacity: 1; 
  }
  92% { 
    opacity: 1;
  }
  98%, 100% { 
    opacity: 0;
  }
}

@keyframes pointer_swing_3times_in_3s {
  0%, 50.00% {
    transform: scaleX(1) rotate(0deg);
  }
  
  58.33% {
    transform: scaleX(1) rotate(40deg);
  }
  66.66% {
    transform: scaleX(1) rotate(0deg);
  }

  75.00% {
    transform: scaleX(1) rotate(40deg);
  }
  83.33% {
    transform: scaleX(1) rotate(0deg);
  }

  91.66% {
    transform: scaleX(1) rotate(40deg);
  }
  100% {
    transform: scaleX(1) rotate(0deg);
  }
}

.teacher-runner-3f_leg {
  position: absolute;
  width: 0.27em;
  height: 1.3em;
  top: 1.8em;
  border-radius: 0.1em 0.1em 0.3em 0.3em;
  transform-origin: 50% 0.2em;
}

.teacher-runner-3f_leg-right {
  left: 0.0em;
  background: #555555;
  z-index: 4;
}

.teacher-runner-3f_leg-left {
  right: 0em;
  background: #555555;
  z-index: 1;
}

.room_20 {
  top: 0%;
  left: 48%;
  width: 9.1%;
  height: 22.3%;
  z-index: 5;
}

.room_21 {
  top: 22.2%;
  left: 41.3%;
  width: 22.2%;
  height: 30%;
  border-top: transparent;
  background-color: #dab826;
  color: #ffffff;
}

.room_21 .room_num {
  background-color: #f4e39d;
  color: #1a1a1a;
}

.link_about {
  text-decoration: underline;
}

.link_about:hover {
  color: #dab826;
}

.link_about:active {
    transform: scale(0.9);
}

.room_text_group {
  text-align: center;
  margin-top: 3%;
}

.room_title {
  text-align: center;
  margin: 0;
  font-size: 1.5vw;
  font-weight: bold;
}

.room_sub {
  text-align: center;
  margin: 0;
  font-size: 1.3vw;
}

.room_22 {
  top: 52.0%;
  left: 41.3%;
  width: 8.5%;
  height: 17.7%;
  border-bottom: transparent;
  z-index: 4;
}

.center_passage {
  position: absolute;
  top: 52.0%;
  left: 49.6%;
  width: 5.5%;
  height: 17.5%;
  background-color: #ffffff;
  border-top: 0.15vw solid #333333;
  border-bottom: none;
  box-sizing: border-box;
  z-index: 0;
}

.room_23 { top: 52.0%; left: 55.0%; width: 8.5%; height: 17.7%; border-bottom: transparent;}

.corridor {
  position: absolute;
  top: 69.5%;
  left: 18.8%;
  width: 65.8%;
  height: 8.7%;
  border-top: 0.15vw solid #333333;
  border-bottom: 0.15vw solid #ffffff;
  background: #ffffff;
  z-index: 4;
}

.area_24 { top: 69.5%; left: 0%; width: 18.8%; height: 25.3%; z-index: 5;}

.room_25 { top: 77.9%; left: 18.6%; width: 15.7%; height: 16.9%; z-index: 4; }

.stair_bottom_left  { top: 80%; left: 34.2%; width: 7.2%; height: 10.6%; }
.stair_bottom_right { top: 80%; left: 63.5%; width: 7.2%; height: 10.6%; }

.room_26 { top: 78%; left: 41.3%; width: 22.3%; height: 22%; z-index: 5; }

.icon_ev {
  position: absolute;
  top: 57.7%;
  left: 78.7%;
  width: 6.0%;
  height: 12%;
  border: 0.12vw solid #333333;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.toilet_area {
  position: absolute;
  top: 78%;
  left: 70.5%;
  width: 14.3%;
  height: 16.8%;
  display: flex;
  border: 0.15vw solid #333333;
  box-sizing: border-box;
  z-index: 4;
}

.toilet_box {
  flex: 3;
  background: #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toilet_male {
  border-right: 0.1vw solid #333333;
}

.mele_img {
  width: 10%;
}

.area_28 { top: 69.5%; left: 84.6%; width: 15.4%; height: 25.3%; z-index: 5;}

.male_img {
  width: 35%;
  height: auto;
  display: block;
}

.female_img {
  width: 40%;
  height: auto;
  display: block;
}

.ev_icon_img {
  width: 50%;
  height: auto;
  display: block;
}
.modal_state_input {
  display: none;
}

.room_click_label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 4;
}

.modal_overlay,
.modal_overlay_2 {
  display: none;
  position: absolute;
  top: 2%;
  z-index: 99;
  width: 260px;
  max-width: 40%;
  background-color: #ffffff;
  border: 0.15vw solid #333333;
  border-radius: 6px;
  padding: 12px;
  box-sizing: border-box;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal_overlay {
  width: 150px;
  max-width: 30%;
}

.modal_overlay_2 {
  right: 2%;
}

.map_container:has(.map_inner .modal_state_input:checked) .modal_overlay_2 {
  display: block;
}

.map_container:has(.map_inner .modal_state_input.is-right:checked) .modal_overlay {
  display: block;
  right: 2%;
  left: auto;
}

.map_container:has(.map_inner .modal_state_input.is-left:checked) .modal_overlay {
  display: block;
  right: 2%;
}

.modal_info {
  display: none;
}

.modal_backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100 * var(--vh));
  z-index: 2;
  background: transparent;
  cursor: default;
}

.map_container:has(.map_inner .modal_state_input:checked) .modal_backdrop {
  display: block;
}

.map_container:has(#modal_close:checked) .modal_backdrop,
.map_container:has(#tab2_modal_close_reset:checked) .modal_backdrop {
  display: none !important;
}

.modal_overlay,
.modal_overlay_2 {
  z-index: 6;
}

.map_container:has(#select_room_top_left:checked) .info_room_top_left,
.map_container:has(#select_room_top_right:checked) .info_room_top_right,
.map_container:has(#select_no_entry:checked) .info_no_entry,
.map_container:has([id$="select_room_20"]:checked) .info_room_20,
.map_container:has([id$="select_room_21"]:checked) .info_room_21,
.map_container:has([id$="select_room_22"]:checked) .info_room_22,
.map_container:has([id$="select_room_23"]:checked) .info_room_23,
.map_container:has([id$="select_room_25"]:checked) .info_room_25,
.map_container:has([id$="select_room_26"]:checked) .info_room_26,
.map_container:has([id$="select_room_30"]:checked) .info_room_30,
.map_container:has([id$="select_room_31"]:checked) .info_room_31,
.map_container:has([id$="select_room_32"]:checked) .info_room_32,
.map_container:has([id$="select_room_33"]:checked) .info_room_33,
.map_container:has([id$="select_room_35"]:checked) .info_room_35,
.map_container:has([id$="select_room_36"]:checked) .info_room_36 {
  display: block;
  animation: modalContentFadeIn 0.22s ease-out forwards;
}

.modal_close {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 1.4rem;
  line-height: 1;
  color: #666666;
  cursor: pointer;
  z-index: 10;
}

.modal_close:hover {
  color: #000000;
}

@keyframes modalContentFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal_close {
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 1.4rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
}

.modal_close:hover {
  color: #000;
}

.modal_header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.modal_room_badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5vw;
  height: 5vw;
  background-color: #f4e39d;
  border: 0.12vw solid #cba235;
  border-radius: 50%;
  font-weight: bold;
  font-size: 3vw;
  color: #1a1a1a;
}

.modal_title {
  margin: 0;
  font-size: clamp(11px, 3.2vw, 13.5px);
  font-weight: bold;
  color: #333333;
}

.modal_body_daytime {
  margin: 0;
  font-size: clamp(9px, 2.53vw, 11px);
  color: #555555;
  line-height: 1.3;
}

.modal_body_title {
  margin: 0;
  font-size: clamp(11px, 3.2vw, 13.5px);
  color: #555555;
  line-height: 1.3;
  text-decoration: underline;
}

.room_30 {
  top: 0%;
  left: 48%;
  width: 9.0%;
  height: 22.3%;
  z-index: 4;
}

.room_31 {
  top: 22.2%;
  left: 41.3%;
  width: 22.2%;
  height: 30%;
  color: #ffffff;
  border-top: transparent;
  border-bottom: transparent;
}

.pylon_cone_3 {
  position: absolute;
  width: 2.5%;
}

.pylon_cone_3_right {
  top: 19%;
  left: 43.5%;
  z-index: 3;
}

.pylon_cone_3_left {
  top: 19%;
  left: 58.8%;
  z-index: 3;
}

.room_31 .room_num {
  background-color: #f4e39d;
  color: #1a1a1a;
}

.room_32 {
  top: 52.0%;
  left: 41.3%;
  width: 8.5%;
  height: 17.7%;
  border-bottom: transparent;
  z-index: 4;
}

.room_33 { top: 52.0%; left: 55.0%; width: 8.5%; height: 17.7%;  border-bottom: transparent;}

.area_34 { top: 69.5%; left: 0%; width: 18.8%; height: 25.3%; z-index: 5;}

.room_35 { top: 78%; left: 18.6%; width: 15.7%; height: 16.9%; z-index: 5; }

.room_36 { top: 78%; left: 41.3%; width: 22.3%; height: 22%; z-index: 5; }

.area_38 { top: 69.5%; left: 84.6%; width: 15.4%; height: 25.3%; z-index: 5; }

.oval_badge {
  width: 82%;
  height: 48%;
  background-color: #ebd99f;
  border: 0.12vw solid #cba235;
  border-radius: 500px;
  box-shadow: 0 0.15vw 0.3vw rgba(0, 0, 0, 0.1);
  animation: floatAnimation 2s ease-in-out infinite;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.room_top_left {
  top: 0%;
  left: 26.4%;
  width: 15.3%;
  height: 23%;
  z-index: 4;
}

.room_top_right {
  top: 0%;
  left: 69.9%;
  width: 15.3%;
  height: 23.1%;
  z-index: 5;
}

.little_mtgroom {
  position: absolute;
  background-color: #7d8285;
  border: 0.15vw solid #333333;
  box-sizing: border-box;
  top: 0%;
  left: 63.2%;
  width: 6.9%; 
  height: 10.7%;
  z-index: 2;
}

.little_mtgroom::before {
  content: "";
  position: absolute;
  background-color: #ffffff;
  border-bottom: 0.15vw solid #333333;
  box-sizing: border-box;
  top: 102%;
  left: -2%;
  width: 103%; 
  height: 121%;
  z-index: 2;
}

.stair_v_grid {
  position: absolute;
  box-sizing: border-box;
  background-color: #ffffff;
  border-right: 0.1vw solid #1a1a1a;
  border-left: 0.1vw solid #1a1a1a;
  border-bottom: 0.1% solid #1a1a1a;
  background-image: linear-gradient(to bottom, #1a1a1a 0.1vw, transparent 0.1vw);
  background-size: 100% 25%;
  z-index: 2;
}

.first_stair_top_left { top: 7.1%; left: 44.8%; width: 3.5%; height: 7%; z-index: 2;}

.first_stair_top_right { top: 7.1%; left: 56.5%; width: 3.5%; height: 7%; z-index: 2;}

.first_stair_bottom_left { top: 79.5%; left: 34.3%; width: 3.84%; height: 7%; z-index: 2;}

.first_stair_bottom_right { top: 79.5%; left: 66.8%; width: 3.84%; height: 7%; }


.first_stair_top_left::before { 
  content: "";
  position: absolute;
  box-sizing: border-box;
  background-color: #ffffff;
  border-right: 0.1vw solid #1a1a1a;
  border-left: 0.1vw solid #1a1a1a;
  border-bottom: 0.1vw solid #1a1a1a;
  background-image: linear-gradient(to bottom, #1a1a1a 0.1vw, transparent 0.1vw);
  background-size: 100% 50%;
  top: 0;
  right: 98%;
  width: 108%;
  height: 52.5%;
}

.first_stair_top_right::before { 
  content: "";
  position: absolute;
  box-sizing: border-box;
  background-color: #ffffff;
  border-right: 0.1vw solid #1a1a1a;
  border-left: 0.1vw solid #1a1a1a;
  border-bottom: 0.1vw solid #1a1a1a;
  background-image: linear-gradient(to bottom, #1a1a1a 0.1vw, transparent 0.1vw);
  background-size: 100% 50%;
  top: 0;
  left: 100%;
  width: 106%;
  height: 52.5%;
}

.first_stair_bottom_left::before { 
  content: "";
  position: absolute;
  box-sizing: border-box;
  background-color: #ffffff;
  border-right: 0.1vw solid #1a1a1a;
  border-left: 0.1vw solid #1a1a1a;
  border-bottom: 0.1vw solid #1a1a1a;
  background-image: linear-gradient(to bottom, #1a1a1a 0.1vw, transparent 0.1vw);
  background-size: 100% 50%;
  top: 0;
  left: 100%;
  width: 100%;
  height: 52.5%;
}

.first_stair_bottom_right::before { 
  content: "";
  position: absolute;
  box-sizing: border-box;
  background-color: #ffffff;
  border-right: 0.1vw solid #1a1a1a;
  border-left: 0.1vw solid #1a1a1a;
  border-bottom: 0.1vw solid #1a1a1a;
  background-image: linear-gradient(to bottom, #1a1a1a 0.1vw, transparent 0.1vw);
  background-size: 100% 50%;
  top: 0;
  right: 100%;
  width: 104%;
  height: 52.5%;
}

.stair_back_bottom_left {
  position: absolute;
  box-sizing: border-box;
  background-color: #ffffff;
  top: 75.4%;
  left: 34.4%;
  width: 7.1%;
  height: 11%; 
  z-index: 2;
}

.stair_back_bottom_right {
  position: absolute;
  box-sizing: border-box;
  background-color: #ffffff;
  top: 75.4%;
  left: 63.3%;
  width: 7.2%;
  height: 11%; 
  z-index: 2;
}

.toilet_top_male, .toilet_top_female,
.toilet_bottom_male, .toilet_bottom_female {
  position: absolute;
  box-sizing: border-box;
  border: 0.1vw solid #1a1a1a;
  background-color: #e6e6e6;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.toilet_top_male   { top: 0%; left: 41.5%; width: 6.8%; height: 7.3%; }
.toilet_top_female { top: 0%; left: 56.5%; width: 6.8%; height: 7.3%; }

.toilet_bottom_female { top: 86.3%; left: 34.3%; width: 7.5%; height: 9.4%; }
.toilet_bottom_male   { top: 86.3%; left: 63.2%; width: 7.5%; height: 9.4%; }

.first_male_img, .first_female_img {
  height: 72%;
  width: auto;
  display: block;
}

.top_corridor_line_left {
  position: absolute;
  top: 8.9%;
  left: 48.3%;
  width: 2.2%;
  height: 0.1vw;
  background-color: #1a1a1a;
}
.top_corridor_line_left::after {
  content: "";
  position: absolute;
  right: 0;
  top: -0.5vw;
  width: 0.1vw;
  height: 1.1vw;
  background-color: #1a1a1a;
  z-index: 2;
}

.top_corridor_line_right {
  position: absolute;
  top: 8.9%;
  left: 54.3%;
  width: 2.2%;
  height: 0.1vw;
  background-color: #1a1a1a;
}
.top_corridor_line_right::after {
  content: "";
  position: absolute;
  left: 0;
  top: -0.5vw;
  width: 0.1vw;
  height: 1.1vw;
  background-color: #1a1a1a;
  z-index: 2;
}

.center_corridor_top {
  position: absolute;
  top: 9.2%;
  left: 41.5%;
  width: 21.8%;
  height: 29.1%;
  background-color: #ffffff; /* 白背景 */
  border-left: 0.12vw solid #1a1a1a;
  border-right: 0.12vw solid #1a1a1a;
  box-sizing: border-box;
  z-index: 1;
}

.forbidden_area_center {
  position: absolute;
  top: 28.4%;
  left: 41.5%;
  width: 21.8%;
  height: 41.0%;
  background-color: #7d8285;
  border-right: 0.12vw solid #1a1a1a;
  border-left: 0.12vw solid #1a1a1a;
  border-top: 0.12vw solid #1a1a1a;
  color: #ffffff;
  z-index: 2;
}

.forbidden_text {
  margin: 0;
  font-size: 1.7vw;
  font-weight: 500;
  letter-spacing: 0.15vw;
  color: #ffffff;
}

.pylon_cone_1 {
  position: absolute;
  width: 4%;
}

.pylon_cone_1_top {
  top: 23%;
  left: 50.5%;
  z-index: 6;
}

.pylon_cone_1_bottom {
  top: 64%;
  left: 50.5%;
  z-index: 6;
}

.horizontal_divider_corridor {
  position: absolute;
  top: 69.4%;
  left: 0;
  width: 100%;
  height: 8.8%;
  background-color: #ffffff; 
  border-top: 0.12vw solid #1a1a1a;
  border-bottom: 0.12vw solid #1a1a1a;
  box-sizing: border-box;
  z-index: 2;
}

.right_l_corridor {
  position: absolute;
  top: 51.8%;
  left: 72%;
  width: 3%;
  height: 11.1%;
  background-color: #cccccc;
  border-left: 0.12vw solid #1a1a1a;
  border-right: 0.12vw solid #1a1a1a;
  box-sizing: border-box;
  z-index: 4;
}

.right_l_corridor_bottom {
  position: absolute;
  top: 62.6%;
  left: 70.5%;
  width: 6%;
  height: 7.0%;
  background-color: #cccccc;
  border-top: 0.12vw solid #1a1a1a;
  border-left: 0.12vw solid #1a1a1a;
  border-right: 0.12vw solid #1a1a1a;
  box-sizing: border-box;
  z-index: 3;
}

.right_l_corridor_top {
  position: absolute;
  top: 44.1%;
  left: 72%;
  width: 27.4%;
  height: 8.0%;
  background-color: #cccccc;
  border-left: 0.12vw solid #1a1a1a;
  border-top: 0.12vw solid #1a1a1a;
  border-bottom: 0.12vw solid #1a1a1a;
  box-sizing: border-box;
  z-index: 3;
}

.first_icon_ev {
  position: absolute;
  top: 60.2%;
  left: 78.2%;
  width: 6.2%;
  height: 9.2%;
  border: 0.12vw solid #1a1a1a;
  background-color: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
}

.ev_icon_img {
  width: 65%;
  height: auto;
}

.center_corridor_bottom {
  position: absolute;
  top: 77.8%;
  left: 50%;
  width: 4.8%;
  height: 22%;
  background-color: #ffffff;
  z-index: 2;
}

.bottom_gray_large_left {
  position: absolute;
  top: 78%;
  left: 0.6%;
  width: 33.8%;
  height: 17.8%;
  background-color: #7d8285;
  border: 0.1vw solid #1a1a1a;
  z-index: 5;
}

.bottom_gray_large_right {
  position: absolute;
  top: 78%;
  left: 70.5%;
  width: 28.9%;
  height: 17.8%;
  background-color: #7d8285;
  border: 0.1vw solid #1a1a1a;
  z-index: 5;
}

.bottom_gray_center_left {
  position: absolute;
  top: 78%;
  left: 41.5%;
  width: 8.5%;
  height: 22%;
  background-color: #7d8285;
  border: 0.1vw solid #1a1a1a;
  z-index: 5;
}

.bottom_gray_center_right {
  position: absolute;
  top: 78%;
  left: 54.8%;
  width: 8.5%;
  height: 22%;
  background-color: #7d8285;
  border: 0.1vw solid #1a1a1a;
  z-index: 5;
}

.accessible_room {
  position: absolute;
  top: 78%;
  left: 54.8%;
  width: 4.3%;
  height: 7.4%;
  border: 0.1vw solid #1a1a1a;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  z-index: 6;
}

.accessible_restroom {
  position: absolute;
  top: 85.1%;
  left: 54.8%;
  width: 4.3%;
  height: 7.4%;
  border: 0.1vw solid #1a1a1a;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  z-index: 6;
}

.wheelchair_icon {
  width: 60%;
}

.accessible_text {
  margin-top: 0.2vw;
  font-size: 0.95vw;
  text-align: center;
  line-height: 1.1;
  font-weight: 600;
  color: #1a1a1a;
}



/*ここから書いてね*/

.title {
  position: absolute;
  top: 0;
  color: #323a39;
  text-align: left;
  left: 3%;
  top: 18%;
  transform: scale(0.9);
}


/* ▼ 1024px未満のとき、中央スライドを画面の80%に */
@media screen and (max-width: 1023px) {
  .swiper-slide {
    /* width: 80vw !important;      ← 画面幅の80% */
    transition: transform 0.3s ease;
  }

  /* 両サイドのスライドを少し小さく */
  .swiper-slide-prev,
  .swiper-slide-next {
    transform: scale(0.85);
    opacity: 0.7;
  }

  /* 中央スライドを強調 */
  .swiper-slide-active {
    transform: scale(1);
    opacity: 1;
  }
}


/* スマホ対応 */
@media (max-width: 768px) {
  .swiper-slide {
    transform: scale(0.95);
  }
  .swiper-slide-active {
    transform: scale(1.02);
  }
  
}

.okunai_honkan_button:hover .arrow_line_wrap {
  transform: translateX(-5px);
}

.okunai_honkan_button:hover .circle-arrow {
  transform: scale(0.8);
}

.arrow_line_wrap,
.circle-arrow {
  /* 縮小と移動の両方にトランジションを適用 */
  transition: transform 0.4s ease-out; 
}


/*PC版*/
@media screen and (min-width:1024px) {
  /*書き換え禁止*/
 .hamburger-fade {display: none;}
 main {padding-top: 65px;}
  /*書き換え禁止*/

  
 .first_view {
  width: 100vw;
  height: calc(100vh *5 / 6);
  display: grid;
  align-items: center;
  object-fit: none;
  background-image: url('/visitor/topics/img/indoor_rest/pc_img/fv_1.png');
 }

 .fv_1 {
  background-image: url('/visitor/topics/img/indoor_rest/pc_img/fv_1.png');
 }

 .fv_2 {
  background-image: url('/visitor/topics/img/indoor_rest/pc_img/fv_2.png');
 }

 .fv_3 {
  background-image: url('/visitor/topics/img/indoor_rest/pc_img/fv_3.png');
 }

 .fv_4 {
  background-image: url('/visitor/topics/img/indoor_rest/pc_img/fv_4.png');
 }

.fv_title_box {
  display: flex;
  justify-content: center;
}
  
.fv_content {
  position: relative;
  top: 20%;
  padding: 0;
  width: 100vw;
  padding: 2%;
  box-sizing: border-box;
  z-index: 10;
  background-color: rgba(256,256,256,0.6);
}

.band {
  width: 100vw;
}

.subtitle,.location {
  position: relative;
  display: inline-flex;
  line-height: 1.4;
  background: linear-gradient(to right,rgba(236,219,146,0.8),rgba(218,184,38,0.8));
  color: #ffffff;
  font-size: 4vw;
}

.subtitle {
  left: 10%;
}
  
.location {
  left: 9.5vw;
  margin-left: -2%;
}
  
.fv_title {
  position: relative;
  width: 82vw;
  display: flex;
  flex-direction: row;
  align-items: start;
  justify-content: center;
  margin-left: 0;
  background: linear-gradient(to right,#ecdb92,#dab826);
}

.fv_title_line {
  display: inline-flex;
  height: 14vw;
  align-items: center;
  padding: 4px 8px;
  position: relative;
}

.fv_title_line1 {
  background: transparent;
}

.fv_title_line2 {
  background: transparent;
  margin-left: -2%;
  margin-right: 3%;
}

.num_21 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15vw;
  height: 15vw;
  background-color: #ffffff;
  border-radius: 50%;
  color: #d6a616;
  font-size: 11vw;
  margin-right: 8px;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  animation: fadeInUp 0.6s ease-out forwards;
}

.char {
  color: #333333;
  font-size: 11vw;
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.4s ease-out forwards;
}

.c1 { animation-delay: 0.5s; } 
.c2 { animation-delay: 0.7s; }
.c3 { animation-delay: 0.9s; }
.c4 { animation-delay: 1.1s; }
.c5 { animation-delay: 1.3s; }
.c6 { animation-delay: 1.5s; }
  
 .index {
  display: flex;
  flex-direction: row;
  text-align: center;
 }
  
 .index_button {
  font-size: 15px;
  width: calc(100vw / 3);
  height: calc(100vh / 6);
  object-fit: cover;
 }

 .index_about_font, .index_honkan_font {
  font-size: clamp(24px, 2.08vw, 34px);
 }

 .index_tenji_font{
  position: relative; 
  z-index: 2;
  font-size: clamp(24px, 2.08vw, 34px);
  color: #dab826;
 }

 .index_about_button::before,.index_honkan_button::before {
  content: '';
  position: absolute;
  width: calc(100vw / 3);
  height: calc(100vh / 6);
  background-color: rgba(218,184,38,0.8)
 }

 .index_tenji_button::before {
  content: '';
  position: absolute;
  width: calc(100vw / 3);
  height: calc(100vh / 6);
  background-color: rgba(255,255,255,0.85)
 }

  .v {
    position: relative;
    z-index: 2;
    display: block;
    height: 3vh;
}
  
 .about {
    width: 100vw;
    height: 100vh;
    background-image: url('/visitor/topics/img/indoor_rest/common_img/subhead_about.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .about::before {
    content: '';
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: rgba(256,256,256,0.7);
  }
  
.subhead {
  display: flex;
  height: 25vh;
  width: 100vw;
  position: relative;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  background-image: none;
}

.subhead_about,subhead_tenji,subhead_honkan,.subhead_title_box {
  margin-top: 0 !important;
  position: relative;
  top: unset;
}

.subhead_explanation_box {
  height: auto;
  margin: 0 0 0 5vw;
}

.subhead_about {
  position: relative;
  justify-content: start;
  align-items: center;
  padding-top: 0 !important;
  height: 30vh;
  margin-bottom: 2vh;
}
  
.subhead_about::before {
  height: 100%;
  background-image: none;
  background: transparent !important;
}
  
  .subhead_title_box {
    width: 50vw;
    height: 17vh;
    position: relative;
    margin-top: 0vh;
    margin-left: 0;
    flex-shrink: 0;
  }

  .subhead_title_box::after {
  border-width: 8.5vh 0 8.5vh 4vw; 
  }

  .subhead_title {
    font-size: clamp(36px, 3.06vw, 52px);
  }

  .subhead_explanation_box {
    position: relative;
    width: 40vw;
    height: 17vh;
    margin: 0 0 0 7vw;
    flex-shrink: 0;
  }

  .subhead_explanation {
    font-size: clamp(17px, 1.39vw, 23px);
    text-align: left;
    padding: 1.5vw;
  }

  .about_contents_background {
    display: flex;
    align-items: start;
    position: relative;
    height: auto;
    min-height: 50vh;
    box-sizing: border-box;
    background: transparent !important;
  }

  .about_wrap {
    display: flex;
    width: 47vw;
    margin-top: 0;
    margin-left: 2vw;
  }

  .about_honkan_wrap {
    justify-content: start;
    margin-top: 0;
    margin-right: 0vw;
  }

  .about_img {
    width: 35vw;
    height: auto;
    margin-top: 0;
    margin-left: 0;
  }

  .about_tenji_img {
    margin-left: 0;
  }
  
  .about_honkan_img {
    margin-left: 0;
  }
  
  .about_text {
    width: 24vw;
    height: 24vw;
    top: 0%;
    padding: 20px;
    margin-top: 6vh;
    margin-left: 23vw;
    background-color: #ffffff;
    transition: background-color 0.7s ease 0s,transform 0.9s ease 0s;
  }

  
.about_text:hover {
  background-color: #dab826;
}

.about_text:hover .about_title {
  color: #ffffff;
}

.about_text:hover .about_explanation {
  color: #ffffff;
}

  .about_text_honkan {
    right: 0;
  }

  .about_title {
    font-size: clamp(21px, 1.94vw, 32px);
  }

  .about_explanation {
    font-size: clamp(13px, 1.18vw, 19.5px);
  }

  .about_object_background {
    height: 20vh;
    background: transparent !important;
 }

  .about_object {
    width: 19.5vw;
    height: auto;
    margin-bottom: 5vh;
  }

  .about_object_kogito {
    margin-left: 3vw;
  }

  .about_object_kanematsu {
    margin-left: 29vw;
    right: 3vw;
  }

.stage_box {
  justify-content: start;
}
  
.stage {
  width: 46%;
  left: 12%;
}
  
.tenji {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/visitor/topics/img/indoor_rest/common_img/subhead_tenji.png');
}

.tenji::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(256, 256, 256, 0.7);
}
.subhead_tenji {
  position: relative;
  justify-content: start;
  align-items: center;
  padding-top: 0 !important;
  height: 30vh;
  margin-bottom: 2vh;
}
  
.subhead_tenji::before {
  height: 100%;
  background-image: none;
  background: transparent !important;
}
  
.tabs {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-evenly;
  width: 100vw;
  height: 60vh;
}

.tab_area {
  position: relative;
  width: 60vw;
}

.tab_content {
  display: none;
  position: relative;
  width: 60vw;
}

.tenji_slider {
  position: relative;
  width: 100%;
  height: 60vh;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
}

.slides {
  display: flex;
  width: 300%;
  height: 100%;
  animation: autoSlide 9s infinite;
}

.slide {
  width: 100%;
  height: 100%;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes autoSlide {
  0%, 28%      { transform: translateX(0%); }
  33.3%, 61.3% { transform: translateX(-33.333%); }
  66.6%, 94.6% { transform: translateX(-66.666%); }
  100%         { transform: translateX(0%); }
}

.tenji_slider_detail_title {
  position: absolute;
  width: auto;
  height: auto;
  top: 5%;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: start;
  padding: 1% 3%;
  background:  rgba(218, 184, 38, 0.85);
  box-sizing: border-box;
}

.tenji_button_detail:hover .tenji_button_detail_text{
  color: #ffffff;
}

.tenji_button_detail:hover .circle {
  background-color: #333333;
}

.tenji_button_detail:hover .circle::before,
.tenji_button_detail:hover .circle::after {
  background: #ffffff;
}

.circle_wrapper {
  width: 5vw;
  height: 5vw;
  left: 0; 
}

.circle_text {
  font-size: 2vw;
}

.tenji_slider_detail_title_text {
  margin: 0;
  font-size: clamp(22px, 1.94vw, 32px);
}

.arrange_21_line {
  width: 107%;
  min-width: 27vw;
  height: 0.2vw;
  margin-top: 1%;
}

.tenji_slider_detail {
  display: flex;
  min-height: 0;
  padding: 0px 0px;
}
  
.tenji_slider_detail_explanation {
  position: absolute;
  align-items: start;
  bottom: 5%;
  right: 0;
  z-index: 10;
  width: 55%;
  height: 35%;
  container-type: inline-size;
  background-color: rgba(218, 184, 38, 0.85);
  padding: 1% 2%;
}

.tenji_slider_detail_explanation_text {
  height: 70%;
  font-size: clamp(18px, 1.18vw, 19.5px);
  color: #333333;
}

.nav-arrows {
  display: none;
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  justify-content: space-between;
  padding: 0 15px;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 5;
}



  
.controls {
  left: 30%;
}

.tenji_buttons {
  display: grid;
  gap: 0vw;
  padding: 0vw;
  align-items: center;
  justify-content: space-between;
  width: 30vw;
  height: 60vh;
  display: flex;
  background-color: transparent;
  flex-direction: column;
}
  
.tenji_button {
  width: 100%;
  height: 14vh;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
}

.tenji_button_label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-align: center;
  height:  100%;
}

.tenji_button_title_box {
  height: 7vh;
  align-items: center;
}

.tenji_button_title {
  margin: 0 0 0 0;
  font-size: clamp(30px, 1.39vw, 23px);
  font-weight: bold;
  color: #333333;
}

.tenji_button_detail_text {
  margin: 0;
  font-size: clamp(13px, 0.97vw, 16px);
  color: #555555;
  align-items: start;
  text-align: center;
  left: 0;
}

.tenji_button_imgdetail {
  display: flex;
  margin: 0%;
}

.tenji_button_img {
  display: none;
}

.ecocap_1 {
  background-image: url('/visitor/topics/img/indoor_rest/common_img/ecocap/4.png');
  width: 100%;
  height: 100%;
}

.ecocap_3 {
  background-image: url('/visitor/topics/img/indoor_rest/common_img/ecocap/5.png');
  width: 100%;
  height: 100%;
}

.tenji_button_detail {
  display: flex;
  flex-direction: column;
  margin-left: 0;
  margin-top: 0;
  position: absolute;
  bottom: 5%;
  right: 0;
  z-index: 11;
  width: auto;
  height: auto;
  padding: 1% 2%;
}

.titleline {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 67%;
  right: 0;
}

.arrow_wrap {
  display: flex;
  align-items: start;
  position: relative;
  margin-left: 0;
  margin-top: 0;
  width: 11vw;
  transform: scaleX(-1);
  z-index: 0;
}
  
.arrow_wrap_theme {
  display: flex;
  align-items: start;
  position: relative;
  margin-left: 0;
  margin-top: 0;
  width: 17vw;
  transform: scaleX(-1);
  z-index: 0;
}

.arrow_line_wrap,
.circle_wrap {
  transition: transform 0.4s ease-out; 
}

.arrow_line_wrap {
  position: relative;
  top: 80%;
}

.circle::after {
  content:'';
  position: absolute;
  display: block;
  margin-left: 1vw;
  margin-top: 0;
  bottom: 30%;
  width: 1.5vw;
  height: 1px;
  background: #4d4d4d;
  transform: rotate(-45deg) translateY(-50%);
  transform-origin: left bottom;
}

.circle::before {
  content:'';
  position: absolute;
  display: block;
  margin-left: 1vw;
  margin-top: 0;
  bottom: 30%;
  width: 9vw;
  height: 1px;
  background: #4d4d4d;
  transform: translateY(-50%);
  z-index: 1;
}

.circle {
  width: 1.5vw;
  height: 1.5vw;
  background-color: #EADBAD;
  border-radius: 50%;
  position: relative;
  display: block;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 0;
  bottom: 100%;
}
  
.theme_circle::after {
  content:'';
  position: absolute;
  display: block;
  margin-left: 1%;
  margin-top: 0;
  bottom: 30%;
  width: 1.5vw;
  height: 1px;
  background: #4d4d4d;
  transform: rotate(-45deg) translateY(-50%);
  transform-origin: left bottom;
}

.theme_circle::before {
  content:'';
  position: absolute;
  display: block;
  margin-left: 1%;
  margin-top: 0;
  bottom: 30%;
  width: 1050%;
  height: 1px;
  background: #4d4d4d;
  transform: translateY(-50%);
  z-index: 1;
}

.theme_circle {
  width: 1.5vw;
  height: 1.5vw;
  right: 0;
  background-color: #EADBAD;
  border-radius: 50%;
  position: relative;
  display: block;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 0;
  bottom: 100%;
}

input[type="radio"] {
  display: none;
}

#blackboard:checked ~ .tab_area #blackboard_content,
#kamiten:checked ~ .tab_area #kamiten_content,
#gakuten:checked ~ .tab_area #gakuten_content,
#ecocap:checked ~ .tab_area #ecocap_content {
  display: block;
}

#blackboard:checked ~ .tenji_buttons .tenji_button_blackboard,
#kamiten:checked ~ .tenji_buttons .tenji_button_kamiten,
#gakuten:checked ~ .tenji_buttons .tenji_button_gakuten,
#ecocap:checked ~ .tenji_buttons .tenji_button_ecocap {
  background-color: #dab826;
}

#blackboard:checked ~ .tenji_buttons .tenji_button_blackboard .tenji_button_title,
#kamiten:checked ~ .tenji_buttons .tenji_button_kamiten .tenji_button_title,
#gakuten:checked ~ .tenji_buttons .tenji_button_gakuten .tenji_button_title,
#ecocap:checked ~ .tenji_buttons .tenji_button_ecocap .tenji_button_title,
#blackboard:checked ~ .tenji_buttons .tenji_button_blackboard .tenji_button_detail_text,
#kamiten:checked ~ .tenji_buttons .tenji_button_kamiten .tenji_button_detail_text,
#gakuten:checked ~ .tenji_buttons .tenji_button_gakuten .tenji_button_detail_text,
#ecocap:checked ~ .tenji_buttons .tenji_button_ecocap .tenji_button_detail_text {
  color: #ffffff;
}

 
.honkan {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/visitor/topics/img/indoor_rest/common_img/subhead_tenji.png');
}

.honkan::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(256, 256, 256, 0.7);
}

.subhead_honkan {
  position: relative;
  justify-content: start;
  align-items: center;
  padding-top: 0 !important;
  height: 30vh;
  margin-bottom: 2vh;
}
  
.subhead_honkan::before {
  height: 100%;
  background-image: none;
  background: transparent !important;
}

.honkan_map_background {
    position: relative;
    width: 100vw;
    height: 75vh;
    padding: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 0;
    box-sizing: border-box;
    background: transparent;
    padding-bottom: 0;
  }

  .room_title {
  text-align: center;
  margin: 0;
  font-size: 0.9vw;
  font-weight: bold;
}

.room_sub {
  text-align: center;
  margin: 0;
  font-size: 0.7vw;
}

  .honkan_map_button_area {
    width: 20vw;
    height: 60vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0;
  }

  .honkan_map_buttons {
    display: contents;
    flex-direction: column;
    gap: 1vh;
    width: 100%;
    margin-bottom: 1vh;
  }

  .honkan_button_all {
    width: 100%;
    height: 9vh;
    margin-top: 0;
  }

  .honkan_map_button_floor {
    display: flex;
    flex-direction: column-reverse;
    gap: 1vh;
    width: 100%;
  }

  .honkan_button_1f,
  .honkan_button_2f,
  .honkan_button_3f {
    width: 100%;
    height: 9vh;
  }

  .honkan_map_tab_area {
    display: contents;
    flex-direction: column;
    gap: 1vh;
    width: 100%;
    margin: 0;
  }

  .honkan_map_tab_3d,
  .honkan_map_tab_serch {
    width: 100%;
    height: 9vh;
    gap: 1vh;
    border-radius: 15px;
    box-sizing: border-box;
  }

  .honkan_map_tab_3d_text,
  .honkan_map_tab_serch_text {
    font-size: clamp(18px, 1.53vw, 25px);
    font-weight: bold;
    line-height: 1.3;
  }

  .honkan_map_area {
    width: 70vw;
    height: 60vh;
    margin: 0;
    box-sizing: border-box;
  }


  .map_container {
    height: 100%;
  }

  
.modal_room_badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2vw;
  height: 2vw;
  background-color: #f4e39d;
  border: 0.12vw solid #cba235;
  border-radius: 50%;
  font-weight: bold;
  font-size: 1.2vw;
  color: #1a1a1a;
}

.modal_title {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: bold;
  color: #333333;
}

.modal_body_daytime {
  margin: 0;
  font-size: clamp(12.5px, 0.97vw, 16px);
  color: #555555;
  line-height: 1.3;
}

.modal_body_title {
  margin: 0;
  font-size: clamp(15px, 1.25vw, 20px);
  color: #555555;
  line-height: 1.3;
  text-decoration: underline;
}
  
.vertical-text {
  writing-mode: vertical-rl;
  font-weight: bold;
  font-size: 1.4vh;
  letter-spacing: -0.3em;
}

  .honkan_text_kogito {
  border: 0.1vw solid #000000;
  width: auto;
  padding: 0% 5%;
  font-size: clamp(12px, 0.97vw, 16px);
}

  .honkan_text_kanematsu {
  border: 0.1vw solid #000000;
  width: auto;
  padding: 0% 5%;
  font-size: clamp(12px, 0.97vw, 16px);
}
  
.accessible_text {
  font-size: 9px;
}
  

}
  
/* ==========================================================
   ここから下は indoor_demo の調整。
   上は css/indoor_rest.css（担当者の 2026-10-31 01:38 までの編集を含む）から次の5点だけ変えている
   ・スマホ用の部分（「PC版」より前）の vh を calc(N * var(--vh)) に置き換えた（30行）
   ・回転マーク（.orientation_warning）を消した。横向きでも崩れなくなったため
   ・扉が開く読み込みの演出（.door_loading_wrapper 〜 @keyframes openDoorRight）を消した（不採用）
   ・文字の大きさを clamp(下限, vw, 上限) に書き換えた（37箇所。下の「文字の大きさ」を参照）
   ・画像の URL を https://ikkyosai.com/visitor/57/topics/… から /visitor/topics/… にした（301 の転送をなくす）
   行ごとの一覧は indoor_demo_書き換え一覧.xlsx
   ========================================================== */

/* 横向きのスマホ：高さを vh（画面の高さ）で決めているため、横向きでは高さだけが
   極端に縮んで文字（vw）と重なっていた。横向きのときは「縦長スマホ（375×812）で
   同じ幅だったら」の高さを使い、縦向きと同じ比率のまま大きく表示する */
:root {
  --vh: 1vh;
}

@media screen and (max-width: 1023px) and (orientation: landscape) {
  :root {
    --vh: calc(100vw * 812 / 375 / 100);
  }
}

/* PC で横に少しスクロールできるのを止める（100vw がスクロールバーの幅だけはみ出すため）。
   はみ出しているのは基準の親が無い absolute の要素（.fv_img .stage_box など）で、
   main で切っても効かないのでページ全体で切る */
html {
  overflow-x: clip;
}

/* 展示企画：画像は 16:9（横16・縦9）で、切り取りは中央から */
.tenji_slider {
  /* height: 100%; */
  aspect-ratio: 16 / 9;
}

.slide img {
  object-position: center;
}

.ecocap_1,
.ecocap_3 {
  width: 100%;
  height: 100%;
  background-position: center;
}

/* ----------------------------------------------------------
   展示企画のレイアウト（組み直し）
   PC  ：上に4つのタブを横一列、その下に「画像（16:9）｜説明の帯」を左右に並べる。
         画像と説明は同じ高さで、説明は画像に重ねない
   スマホ：タブ（2×2）→ 画像 → 説明 の縦並び。タブの高さは中身に合わせる
   ---------------------------------------------------------- */

/* スマホ */
@media screen and (max-width: 1023px) {


  .tenji_buttons {
    /* height: auto; */
    gap: 10px;
    padding: 12px;
  }

  .tenji_button {
    /* width: auto; */
    /* height: auto; */
    padding: 8px 6px 10px;
    gap: 6px;
  }

  .tenji_button_title_box {
    margin-top: 0;
  }

  .tenji_button_img {
    /* width: 100%; */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    /* border-radius: 6px; */
  }

  .tenji_slider_detail {
    /* min-height: 0; */
    gap: 12px;
    padding: 18px 6vw 22px;
  }
}

/* PC */


/* スマホ */
@media screen and (max-width: 1023px) {
  /* 地図を横いっぱい近くまで広げる（中の文字が小さすぎるため） */
  .map_container {
    width: 100%;
    padding: 1.5%;
  }

  /* ALL：注意書きを 10px にすると3行になり「立入禁止」に重なるので、
     下端いっぱいの幅にして2行に収める（講義棟側・兼松講堂側の札のすぐ下に入る） */
  .notice-banner {
    left: 2%;
    right: 2%;
    bottom: 1.5%;
    width: auto;
    min-height: 0;
    padding: 0.2em 2%;
    line-height: 1.3;
  }

  /* 1F：モーダルの幅。スマホは「応」の手前までが広いので、そこまで使う */
  .map_container:has(.map_inner .modal_state_input.is-left:checked) .modal_overlay,
  .map_container:has(.map_inner .modal_state_input.is-right:checked) .modal_overlay {
    width: 32%;
    max-width: 32%;
  }

  /* ALL：21教室の下の「屋内休憩所 兼 連絡通路」。一行のまま 4.9px → 6px */
  .small-text {
    font-size: 5px;
    letter-spacing: -0.05em;
    white-space: nowrap;
  }

  /* ALL の地図の 1F / 2F / 3F の表示 */
  .floor-label {
    font-size: 14px;
  }
}

/* ----------------------------------------------------------
   文字の大きさ
   文字は clamp(下限, vw, 上限) で指定する（上の元の CSS の値を直接書き換えた。37箇所）。
   入れ物（丸・帯・ボタン・地図）の大きさが vw で決まっているので、文字も一緒に伸び縮みさせ、
   小さすぎ・大きすぎにならないよう下限と上限を付ける。
   真ん中の vw は、スマホは幅 375px、PC は幅 1440px のときに次の大きさになる値
   目安：本文 スマホ 14px・PC 17px／大見出し 28px・44px／大きいボタン 15〜17px・20〜28px。
   次のものは入れ物と一体なので vw のまま残している
   ・FV の題名（21教室のすゝめ）と帯（本館 2F 屋内休憩所特集）
   ・地図の中の文字（教室名・番号・通り抜け可能 など）
   ・モーダルの番号の丸と、スマホの展示の題名の横の「21」
   ---------------------------------------------------------- */

/* スマホ */
@media screen and (max-width: 1023px) {
  /* 大見出しの下の説明は 14px で2〜3行になるので、枠と帯の高さは中身に合わせる
     （帯は画面の高さの 25% で固定されていて、狭い画面では説明の枠が押しつぶされていた） */
  .subhead {
    position: relative;
    /* height: auto; */
    min-height: calc(25 * var(--vh));
    padding-bottom: calc(2 * var(--vh));
  }

  .subhead_explanation {
    line-height: 1.6;
  }

  .subhead_explanation_box {
    flex-shrink: 0;
    height: auto;
    min-height: calc(5 * var(--vh));
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  .tenji_slider_detail_explanation {
    height: auto;
  }

  .tenji_slider_detail_explanation_text {
    line-height: 1.7;
  }

  /* 2F・3F のモーダルは地図の中に収め、企画の多い教室（36 など）は中でスクロールする */
  .modal_overlay_2 {
    max-height: 96%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* PC：元の CSS に PC 用の指定が無かったもの */
@media screen and (min-width: 1024px) {
  .subhead_explanation {
    line-height: 1.6;
  }

  /* 目次：ホバーで少し大きく（1440px 幅で 30px → 35px） */
  .index_about_button:hover .index_about_font,
  .index_tenji_button:hover .index_tenji_font,
  .index_honkan_button:hover .index_honkan_font {
    font-size: clamp(28px, 2.43vw, 40px);
  }

  /* ALL / 1F / 2F / 3F（元はスマホ用の 4vw のままで、1440px 幅で 57.6px になっていた） */
  .honkan_button_title {
    font-size: clamp(22px, 1.94vw, 32px);
  }

  /* 注意書き */
  .notice-banner {
    font-size: clamp(11.5px, 0.9vw, 14.5px);
  }
}

/* ----------------------------------------------------------
   ページの一番下（フッターのパズル）
   パズルの絵（灰色）のすき間から、ページの地の色（ほぼ白）が見えていた。
   担当者の案（footer を 15vh 上に重ね、本館の注意事項の下に 15vh の余白を取る）と同じく、
   パズルを最後の段の上に重ねて、すき間から段の背景（スマホは黄色、PC は写真）が見えるようにする。
   重ねる量はパズルの高さに合わせる。パズルの高さは画面の幅で決まるので、15vh（高さ）ではなく
   幅から決める（--piece-x。灰色のフッターが始まる位置までの高さ。幅を変えて実測した値より少し多め）
   ---------------------------------------------------------- */
:root {
  --piece-x: calc(17vw + 4px);     /* スマホ用のパズル（piece_sp） */
}

@media screen and (min-width: 768px) {
  :root {
    --piece-x: calc(8.7vw + 16px); /* PC 用のパズル（piece_pc）。切り替えは共通の CSS と同じ 768px */
  }
}

footer {
  margin-top: calc(-1 * var(--piece-x));
}

/* パズルの2段目が灰色のフッター（.footer_wrapper）と重なって、1枚につながって見えていた。
   上の元の CSS の .piece { margin-bottom: -2.5vw; } でフッターがパズルの2段目まで引き上げられるため。
   共通の CSS と同じ値に戻し、フッターはパズルの下の端から始める */
.piece {
  margin-bottom: -6px;
}

@media screen and (min-width: 768px) {
  .piece {
    margin-bottom: 0;
  }
}

/* スマホ：最後の段は .honkan_map_background（黄色）。高さの固定（画面の 70%）をやめて中身に合わせ、
   下にパズルの分の余白を足す（ボタンの下に空いていた大きな余白も無くなる） */
@media screen and (max-width: 1023px) {
  .honkan_map_background {
    height: auto;
    padding-bottom: calc(28px + var(--piece-x));
  }

  /* 「兼松講堂側」が2行に割れていた */
  .honkan_text_kogito,
  .honkan_text_kanematsu {
    width: max-content;
    white-space: nowrap;
  }
}

/* PC：最後の段は .honkan（写真＋白い膜）。高さの固定（画面の 100%）をやめて中身に合わせ、
   下にパズルの分の余白を足す。白い膜も段の高さいっぱいにする */
@media screen and (min-width: 1024px) {
  .honkan {
    height: auto;
    min-height: 100vh;
    padding-bottom: var(--piece-x);
  }

  .honkan::before {
    height: 100%;
  }
}

/* パズルの上の部分が切れていた。共通の CSS は、拡大して表示するパズル（スマホ 2倍・PC 1.15倍）が
   上にはみ出す分を .piece の上の余白で取っているが、上の元の CSS（.piece { padding-top: 0; }）が
   それを 0 にしていた。はみ出す分だけ余白を戻す（切り替えは共通の CSS と同じ 768px） */
.piece {
  /* スマホ：絵の高さ（幅の 161.58/1938.74）の半分がはみ出す */
  padding-top: calc(100vw * 161.58 / 1938.74 / 2 + 2px);
}

@media screen and (min-width: 768px) {
  .piece {
    /* PC：共通の CSS の値（max(10px, 0.7%)）では幅 1920px で 1px ほど切れたので少し多めに */
    padding-top: max(10px, 0.6%);
  }
}

@media screen and (max-width: 1023px) {
  .arrow_wrap.arrow_wrap_theme {
    margin-left: 26vw;
    margin-top: 17px;
  }
}