@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;}
/*書き換え禁止*/

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

.title p {
  font-family: "Shippori Mincho", serif; /* フォントをしっぽり明朝に */
  font-size: 11vw;
  font-weight: 400;                     /* 太さ（400=通常） */
  color: #323a39;                      /* 文字色 */
  text-align: center;                   /* 中央揃え */
  margin: -28px 0;
  margin-top: 12px;

}

.background {
    /* oval (手前), wagara (奥) の順 */
    background-image: 
        url(https://ikkyosai.com/visitor/56/topics/img/indoor_rest/background_oval.webp),
        url(https://ikkyosai.com/visitor/56/topics/img/indoor_rest/background_wagara.svg);
    
    /* ⭐ 修正箇所: ovalのサイズを2倍に指定。wagaraはcoverを維持 */
    /* background-size: [ovalのサイズ], [wagaraのサイズ]; */
    background-size: 
        250% auto,  /* oval: 親要素の幅の2.5倍（250%）に拡大し、高さは自動 (auto) */
        cover;      /* wagara: 要素全体を覆う */

    /* background-position の設定 (左下寄せ, 中央寄せ) */
    background-position: 100% 0%, center center;
    
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.button_background_color_wrap{
  background-color: #F4F1EC;
}
/*
css概説（復習用　要らなければ消してください）

vol.1 用語の解説

セレクタ…装飾をつけたい対象の要素のこと
属性…セレクタに施したい装飾の種類
値…セレクタに施したい装飾の具体的内容

例：h1{color:red;}
h1がセレクタ　colorが属性　redが値

vol.2 セレクタの指定
①要素名で指定
h1{color:red;}

②class名で指定
.class{color:red;}

③id名で指定
#id{color:red;}

④要素名プラスclass名で指定
div.class{color:red;}

⑤要素名プラスid名で指定
div#id{color:red;}

⑥要素の位置から指定
header div{color:red;}   
↑スペースを入れる（ここではheader内のdiv要素を指定）

vol.3 属性・値の指定

①{属性:値;}の形で記述
{color:red;}

②１つのセレクタに対する指定はまとめて記述できる
h1{
   color:red;
   width:90%;
}

③指定が重複したら後の行にあるものが優先
h1{
   color:red;
   width:90%;
   color:blue;
}
↑ここではh1はblueになる

④指定が重複したらより特定が強いものが優先
h1{
   color:red;
   width:90%;
}
header h1{
   color:blue;
}
↑ここではheader内のh1はcolorがblue、widthが90%になる
*/

/* 背景 */
#loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #f4f1ec; /* 背景色 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* 中央配置 */
.loading-content {
  text-align: center;
}

/* Loading...文字 */
.loading-text {
  font-family: "Noto Serif JP", serif;
  font-size: 20px;
  color: #4d4d4d;
  margin-bottom: 15px;
}

/* くるくる回る画像 */
.loading_circle_img {
  width: 50px; /* 好みで調整可能 */
  height: 50px;
  animation: spin 1s linear infinite; /* 1秒で1回転 */
}

/* 回転アニメーション */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 読み込み完了でフェードアウト */
#loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* ==============================
   画像・SVGのドラッグ・選択防止
============================== */
img, svg {
  user-select: none;            /* 選択不可 */
  -webkit-user-drag: none;      /* Chrome, Safari */
  -khtml-user-drag: none;       /* 古いKonqueror */
  -moz-user-drag: none;         /* Firefox */
  -o-user-drag: none;           /* Opera古い */
  pointer-events: auto;          /* 必要ならクリックは有効に */
}

/* 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;  /* 本体色 トラック色 */
}


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


/*ページ内遷移でふわっとスクロールさせる*/
html {
  scroll-behavior: smooth;
}

body {
    background-color: #F4F1EC;
    font-family: sans-serif;
}

.subhead_wrap{
  margin-top: 30px;
}

.subhead{
  font-family: "Shippori Mincho", serif; /* フォントをしっぽり明朝に */
  font-size: 18px;
  display: flex;                 
  align-items: center;           /* 画像と文字を縦方向中央に揃える */
  position: relative;            /* 子要素の重なり基準にする */
  margin-left: 20px;
  margin-bottom: 3%;
}

.subhead_first{           
  position: relative;            /* z-index を効かせるために必要 */
  z-index: 2;                    /* 文字を最前面に */
  font-size: 27px;
}


.subhead_img{
  height: 50px;
  width: auto;
  margin-right: -23px;           /* ← 画像を文字側に食い込ませる */
  position: relative;
  z-index: 1;                    /* 画像を1段下に */
}

.subhead_right_img{
  height: 50px;
  width: auto;
  margin-right: -23px;           /* ← 画像を文字側に食い込ませる */
  position: relative;
  z-index: 1;                    /* 画像を1段下に */
}

.subhead_left_img{
  height: 50px;
  width: auto;
  margin-right: -23px;           /* ← 画像を文字側に食い込ませる */
  position: relative;
  z-index: 1;                    /* 画像を1段下に */
}


/*⭐ファーストビュー関連*/

.first_view {
  position: relative;
}

.first_view_SM-img {
  display: block;         /* インラインの隙間を消すため */
  width: 100%;
  height: auto;
  opacity: 75%;
}

.first_view_circle-img {
  position: absolute;
  top: 0;
  width: 100%;
}

.title {
  position: absolute;
  top: 0;
  font-family: "Shippori Mincho", serif; /* フォントをしっぽり明朝に */
  color: #323a39;                      /* 文字色 */
  text-align: left;                   /* 中央揃え */
  left: 3%;
  top: 18%;
  transform: scale(0.9);
}

.title-text_1{
  font-size: 11vw;
}

.de{
  font-size: 9vw;
}

.ho{
  position: relative; /* 疑似要素の基準にする */
  display: inline-block; /* サイズを持たせる */
  z-index: 1; /* 文字を前面に */
  font-size: 17vw;
  color: #AE3923;
}

.ho::before {
  content: "";                    /* 疑似要素を生成するための必須指定。空文字でOK */
  position: absolute;             /* 親要素(.ho)を基準に絶対配置できるようにする */
  top: 55%;                       /* 親要素の高さの50%の位置に置く（縦の中央付近） */
  left: 50%;                      /* 親要素の幅の50%の位置に置く（横の中央付近） */
  transform: translate(-50%, -50%); /* top,leftで決めた基準点を、自分の幅・高さの半分だけずらし、
                                       疑似要素自身の「ど真ん中」が親要素の中央にくるように調整 */
  width: 19vw;                   /* 円の横サイズ（1em=文字サイズ基準。文字より少し大きくする設定） */
  height: 19vw;                  /* 円の縦サイズ。横と同じ値にすることで真円になる */
  background-color: #F1ECE5;       /* 円の塗りつぶし色（薄いベージュ系） */
  border-radius: 50%;             /* 四角形を角丸100%にして円形にする */
  z-index: -1;                    /* 疑似要素をテキストの背後に配置する（文字より下に見えるようにする） */
}


.tu{
  position: relative; /* 疑似要素の基準にする */
  display: inline-block; /* サイズを持たせる */
  z-index: 1; /* 文字を前面に */  
  font-size: 12vw;
  color: #AE3923;
  vertical-align: -12px;  
}

.tu::before {
  content: "";                    /* 疑似要素を生成するための必須指定。空文字でOK */
  position: absolute;             /* 親要素(.ho)を基準に絶対配置できるようにする */
  top: 64%;                       /* 親要素の高さの50%の位置に置く（縦の中央付近） */
  left: 50%;                      /* 親要素の幅の50%の位置に置く（横の中央付近） */
  transform: translate(-50%, -50%); /* top,leftで決めた基準点を、自分の幅・高さの半分だけずらし、
                                       疑似要素自身の「ど真ん中」が親要素の中央にくるように調整 */
  width: 12vw;                   /* 円の横サイズ（1em=文字サイズ基準。文字より少し大きくする設定） */
  height: 12vw;                  /* 円の縦サイズ。横と同じ値にすることで真円になる */
  background-color: #F1ECE5;       /* 円の塗りつぶし色（薄いベージュ系） */
  border-radius: 50%;             /* 四角形を角丸100%にして円形にする */
  z-index: -1;                    /* 疑似要素をテキストの背後に配置する（文字より下に見えるようにする） */
}

.title-text_2{
  font-size: 34px;
}

.title-text_2 .js-fade-in:nth-of-type(4) {
  position: relative;
  left: -3vw; /* ← 左に3pxずらす */
}

/* ⭐ファーストビューのアニメーション関連 */
/* アニメーションの初期状態：非表示で、少し下に配置 */
.js-fade-in {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間と種類 */
}

/* アニメーション完了後の状態：完全に表示され、初期位置に戻る */
.js-fade-in.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* ho と tu の文字はアニメーションをゆっくりに（2.5秒） */
.ho, .tu {
    transition: opacity 1.25s ease, transform 1.25s ease; /* 1s -> 1.25s に変更 */
}

/* -------------------------------------------------------------------------- */
/* ⭐ 追加するコード: 登場後のふわふわアニメーション */
/* -------------------------------------------------------------------------- */
.ho.is-show, 
.tu.is-show {
    /* is-showクラスが付いた後に floatアニメーションを適用 */
    animation: up-and-down-float 3s ease-in-out infinite alternate;
    /* または ease-in-out だけでも良い */
    /* animation: up-and-down-float 3s ease-in-out infinite; */
}

/* hoとtuの::beforeの円のアニメーション設定 */
/* 初期状態: 円を小さくしておく (scale: 0) */
.ho::before,
.tu::before {
    /* 既存のtransformにscale(0)を追加し、transitionも追加 */
    transform: translate(-50%, -50%) scale(0);
    transition: transform 1.25s ease; /* 円のアニメーション時間 */
}

/* アニメーション完了後の状態: 円を元のサイズに戻す (scale: 1) */
.ho.is-show::before,
.tu.is-show::before {
    transform: translate(-50%, -50%) scale(1);
}

@keyframes up-and-down-float {
    0% {
        transform: translateY(0)
    }
    50% {
        /* 登場時のtransform(translateY(10px))とは別に、-3pxだけ動かす */
        transform: translateY(-3px); 
    }
    100% {
        transform: translateY(0);
    }
}

/* ⭐ファーストビューのアニメーション関連ここまで */


/* ページ右下に配置するための absolute */
/* (既存のCSSに以下のCSSを追加または変更) */

/* ⭐location-wrapのアニメーション関連 */
/* location-wrapの初期状態: 右にずらして透明にする */
.location-wrap {
  position: absolute;
  bottom: 12%;
  right: 20px;
}  
  /* アニメーション用設定
  opacity: 0; /* 初期状態で透明 */
  /* transform: translateX(30px); /* 初期状態で右に少しずらす */
  /* transition: opacity 1s ease, transform 1s ease; /* アニメーションの時間と種類 */
/* } */

/* アニメーション完了後の状態: 定位置に戻り、表示される */
/* .location-wrap.is-show-location {
  opacity: 1;
  transform: translateX(0);
} */

/* (既存のlocation-wrapの定義はこれに置き換わります) */

/* 背景用の relative */
.location {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative; /* 擬似要素の基準 */
  z-index: 0;
}



.location .pin {
  width: 22px;  /* アイコンサイズ調整 */
  height: auto;
}

.location p{
  display: inline;
  font-family: "Shippori Mincho", serif; /* フォントをしっぽり明朝に */
  font-size: 22px;
}

.location p::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 0px;
  left: -6px;
  right: -20px;
  background: linear-gradient(to right, #e8d173,#f3ebce );
  z-index: -1; /* 背景を文字の下にする */
}



.index_okunai_button{
  text-decoration: none;
  color: #323a39;    
  font-size: 12px;                  /* 文字色 */  
}


.index_tenji_button{
  text-decoration: none;
  color: #323a39;                      /* 文字色 */
  font-size: 12px;  
}

.index_honkan_button{
  text-decoration: none;
  color: #323a39;                      /* 文字色 */
  font-size: 12px;  
}

.index {
  font-family: "Shippori Mincho", serif; /* 元のまま */
  display: flex;                         /* 元のまま */
  align-items: flex-end;
  justify-content: center;               /* ← 変更: space-evenly → center に変更 */
  flex-wrap: nowrap;                       /* ← 追加: 画面が狭いときリンクを折り返す */
  gap: 1rem;                             /* ← 追加: 各リンクの間隔を明示的に設定 */
  padding: 1rem 0;                       /* ← 追加: 上下の余白を追加 */
}
.index a {
  /* display: inline-flex;                   */
  justify-content: center;               /* 元のまま */
  align-items: center;                   /* 元のまま */
  position: relative;                    /* 元のまま */
  text-decoration: none;                 /* 元のまま */
  color: #323a39;                        /* 元のまま */
  font-family: "Shippori Mincho", serif; /* 元のまま */
  text-align: center;                     /* 元のまま */
  
  white-space: nowrap;                    /* ← 追加: 折り返し防止 */
  padding: 0 0.5em;                      /* ← 追加: 固定幅をやめ、文字左右の余白を確保 */
  
  /* width: 90px;  ← 削除: 固定幅はレスポンシブに不向き */
  /* height: 30px; ← 削除: 高さは文字とpaddingで自動調整 */
}

/* .index_okunai_button{
  font-size: 12px;
} */

.big_arrow{
  font-size: 25px;
  margin-top: -13px;
}
/* 通常時：やわらかい黄色のドロップシャドウ */
.index_okunai_button,
.index_tenji_button,
.index_honkan_button {
  text-shadow: 0 0 6px #f7f6f1; /* やわらかい光 */
  transition: text-shadow 0.3s ease;
}

/* ホバー時：より強い光に */
.index_okunai_button:hover,
.index_tenji_button:hover,
.index_honkan_button:hover {
  text-shadow: 0 0 12px rgb(240 216 118); /* 強めの黄色光 */
}

/* 「▼（big_arrow）」にも同じ効果を適用 */
.index .big_arrow {
  text-shadow: 0 0 6px #f7f6f1;
  transition: text-shadow 0.3s ease;
}

.index a:hover .big_arrow {
  text-shadow: 0 0 12px rgb(240 216 118);
}

.big_arrow {
  display: inline-block;
  animation: arrowMove 1.5s ease-in-out infinite;
}

/* ▼ の上下アニメーション */
@keyframes arrowMove {
  0% {
    transform: translateY(0);
  }
  60% {
    transform: translateY(5px); /* 1秒かけて2px下に動く */
  }
  100% {
    transform: translateY(0);   /* 0.5秒かけて元に戻る */
  }
}

/* .index_tenji_button{
  font-size: 15px;
}

.index_honkan_button{
  font-size: 15px;
} */

.index a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -0.5rem;                          /* ← 変更: 文字から少し離して装飾感 */
  top: 50%;                               /* 元のまま */
  transform: translateY(-50%);            /* 元のまま */
  width: 1px;                             /* 元のまま */
  height: 50%;                            /* ← 変更: 元は60%、文字より少し短めにして装飾感 */
  background-color: #323a39;              /* 元のまま */
}


/*⭐屋内休憩所って？関連*/

.okunai_contents_flex{
  margin: auto 5%;
}

.okunai a {
  font-family: "Shippori Mincho", serif; /* フォントをしっぽり明朝に */
}

.okunai p {
  font-family: 'Noto Serif JP', serif;
}

.okunai .okunai_contents_flex p{
  font-size: 10px;
}

.okunai .okunai_contents_flex a{
  font-size: 18px;
}

.tenji p {
  font-family: 'Noto Serif JP', serif;
}
/* 🍞屋内ー本館関連 */
.okunai_honkan_wrap{
  display: flex;
  /* align-items: flex-end; */
  justify-content: center;
  text-decoration: none;             /* 下線を消す（リンクのデフォルト装飾を無効化） */
  color: inherit;                    /* 親要素の文字色を引き継ぐ（リンク色を変えない） */
  gap: 1vw;
  margin-bottom: 10%;
  align-items: stretch
}

.okunai_honkan_wrap {
  position: relative;         /* ::afterの基準位置に */
  transition: transform 0.3s ease;
}

/* 擬似要素で白い半透明レイヤーを作る */
.okunai_honkan_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3); /* 半透明の白 */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* hoverしたときにふわっと白がかかる */
.okunai_honkan_wrap:hover::after {
  opacity: 1;
}

/* おまけ：hover時に少し拡大してリッチな感じに */
.okunai_honkan_wrap:hover {
  transform: scale(1.02);
}

.okunai_honkan_text_wrap{
  display: flex;
  flex-direction: column;
  margin-right: 19px;
}


.okunai_honkan_text{
  font-family: 'Noto Serif JP', serif;
  font-size: 10px;
  text-align: left;
  background-image: url("https://ikkyosai.com/visitor/56/topics/img/indoor_rest/foggy-box_okunai.svg"); /* ←画像ファイル名 */
  background-repeat: no-repeat;            /* 背景画像を繰り返さない（1枚だけ表示） */
  background-position: center;             /* 背景画像の表示位置を中央にする */
  padding: 20px;                           /* 内側の余白をつけて文字が画像にくっつかないようにする */
  position: relative;
}

.okunai_honkan_text::before,
.okunai_honkan_text::after {
  content: "";
  position: absolute;
  pointer-events: none; /* テキスト操作の邪魔をしない */
  background: #666;     /* 線の色（お好みで調整） */
  opacity: 0.6;         /* 少し薄くする */
}

/* 横の線 */
.okunai_honkan_text::before {
    right: 0px;
    bottom: 15px;
    width: 73px;
    height: 1px;
}

/* 縦の線 */
.okunai_honkan_text::after {
    right: 8px;
    bottom: 5px;
    width: 1px;
    height: 39px;
}


.okunai_honkan_button_wrap {
  display: flex;
  align-items: center; /* 縦位置をそろえる */
  gap: 3px; /* ボタンと矢印の間隔 */
  margin-left: 22px;
}


.okunai_honkan_button{
  text-decoration: none;
  color: #323a39;                      /* 文字色 */
  display: inline-flex;       /* テキストと矢印を横並び */
  align-items: center;        /* 縦をそろえる */
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  color: #323a39;
  text-decoration: none;
  gap: 0.5em;                 /* テキストと矢印の間隔 */
  white-space: nowrap;

}

.burger_img{
  height: 117px;
  width: 156px;
}

.burger_img_wraps_wrap{

  z-index: 1;               /* 前面に出す */
  display: block;           /* 余白を消す */
  max-width: 100%;          /* 画像サイズに合わせる */
  margin-right: 18px;
  margin-bottom: -5px;
}

.burger_img_wrap{
  position: relative;       /* 疑似要素の基準にする */  
}

.burger_img_wrap::before{
  content: "";              /* 疑似要素を作成 */
  position: absolute;
  top: 6px;                /* 下方向にずらす */
  left: 11px;               /* 右方向にずらす */
  width: 100%;              /* 元画像と同じ幅 */
  height: 100%;             /* 元画像と同じ高さ */
  background-color: #f0e0c0; /* 背景色（ベージュっぽい色） */
  z-index: -1;              /* 背面に置く */
}

/* 🍞屋内ー展示関連 */
.okunai_tenji_wrap{
  display: flex;
  flex-direction: row-reverse;
  /* align-items: flex-end; */
  /* margin-top: 30px; */
  margin-bottom: 5%;
  justify-content: center;
  text-decoration: none;             /* 下線を消す（リンクのデフォルト装飾を無効化） */
  color: inherit;                    /* 親要素の文字色を引き継ぐ（リンク色を変えない） */
  gap: 1vw;
  align-items: stretch
}

.okunai_tenji_wrap {
  position: relative;         /* ::afterの基準位置に */
  transition: transform 0.3s ease;
}

/* 擬似要素で白い半透明レイヤーを作る */
.okunai_tenji_wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3); /* 半透明の白 */
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* hoverしたときにふわっと白がかかる */
.okunai_tenji_wrap:hover::after {
  opacity: 1;
}

/* おまけ：hover時に少し拡大してリッチな感じに */
.okunai_tenji_wrap:hover {
  transform: scale(1.02);
}

.okunai_tenji_text{
  font-family: 'Noto Serif JP', serif;
  font-size: 10px;
  text-align: left;
  background-image: url("https://ikkyosai.com/visitor/56/topics/img/indoor_rest/foggy-box_okunai.svg"); /* ←画像ファイル名 */
  background-repeat: no-repeat;            /* 背景画像を繰り返さない（1枚だけ表示） */
  background-position: center;             /* 背景画像の表示位置を中央にする */
  padding: 20px;                           /* 内側の余白をつけて文字が画像にくっつかないようにする */
  position: relative;
}

.okunai_tenji_text_wrap{
  display: flex;
  flex-direction: column;
  margin-right: 19px;
}

.okunai_tenji_text::before,
.okunai_tenji_text::after {
  content: "";
  position: absolute;
  pointer-events: none; /* テキスト操作の邪魔をしない */
  background: #666;     /* 線の色（お好みで調整） */
  opacity: 0.6;         /* 少し薄くする */
}

/* 横の線 */
.okunai_tenji_text::before {
    right: 0px;
    bottom: 5px;
    width: 73px;
    height: 1px;
}

/* 縦の線 */
.okunai_tenji_text::after {
    right: 9px;
    bottom: -8px;
    width: 1px;
    height: 39px;
}

.blackboard_okunai_img_wraps_wrap{
  z-index: 1;               /* 前面に出す */
  display: inline-block; /* ✅ これで画像サイズに合わせる */
  max-width: 100%;          /* 画像サイズに合わせる */
}

.blackboard_okunai_img_wrap {
  position: relative;       /* 疑似要素の基準にする */

}

.blackboard_okunai_img {
  display: block;        /* ✅ 画像下の隙間を消す */
  height: 117px;
  width: 156px;
  margin-left: 5px;  
}

.blackboard_okunai_img_wrap::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px;
  width: 100%;
  height: 100%;
  background-color: #f0e0c0;
  z-index: -1;          /* 背面に置く */
}

.okunai_tenji_button_wrap {
  display: flex;
  align-items: center; /* 縦位置をそろえる */
  gap: 3px; /* ボタンと矢印の間隔 */
  margin-left: 22px;
}


.okunai_tenji_button{
  text-decoration: none;
  color: #323a39;                      /* 文字色 */
}

.circle-arrow {
  width: 25px;                /* 丸のサイズ */
  height: 25px;               /* 丸のサイズ */
  background-color: #EADBAD;  /* 背景色（ベージュ系） */
  border-radius: 50%;         /* 丸にする */
  position: absolute;         /*⭐ 中の矢印を配置するための基準 */
  display: flex;              /* 中央寄せ */
  align-items: center;        /* 縦中央 */
  justify-content: center;    /* 横中央 */
  margin-left: -12.5px;
  z-index: -1;
  
}
/* okunai_tenji_button はテキスト＋矢印を横並びにするためのクラス */
.okunai_tenji_button {
  display: inline-flex;       /* テキストと矢印を横並び */
  align-items: center;        /* 縦をそろえる */
  font-family: "Noto Serif JP", serif;
  font-size: 1rem;
  color: #323a39;
  text-decoration: none;
  gap: 0.5em;                 /* テキストと矢印の間隔 */
  white-space: nowrap;
}

/* ホバー時に色や微拡大させたい場合（任意） */
.okunai_tenji_button:hover {
  color: #1f2a27; /* 色を濃くする */
}
.okunai_tenji_button:active .arrow-icon::before,
.okunai_tenji_button:active .arrow-icon::after {
  transform: translateY(-50%) scale(0.98) rotate(var(--slash-angle)); /* 押した感 */
}

/* 通常時の白いドロップシャドウ */
.okunai_honkan_button {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8); /* 白の柔らかい光 */
  transition: text-shadow 0.3s ease; /* なめらかに変化 */
}

/* ホバー時の黄色いシャドウ */
.okunai_honkan_button:hover {
  text-shadow: 0 0 10px rgb(240 216 118); /* 黄色く光る */
}


.okunai_honkan_button,
.okunai_tenji_button {
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  transition: text-shadow 0.3s ease;
}

.okunai_honkan_button:hover,
.okunai_tenji_button:hover {
  text-shadow: 0 0 10px rgb(240 216 118);
}


/* 矢印をまとめるラッパー */
.arrow-wrap {
  display: flex;
  align-items: center;  
  position: relative;
  width: 32px;    /* 矢印全体の幅 */
  height: 12px;   /* 矢印全体の高さ */
  transform: scaleX(-1); /* ← 左右反転（右向きにする） */
  z-index: 0;
}

/* 横棒 */
.horizontal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 1px;
  background: #4d4d4d;
  transform: rotate(-45deg) translateY(-50%);
  transform-origin: left bottom;
}

/* 斜め棒 */
.diagonal {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 1px;
  background: #4d4d4d;
  transform: translateY(-50%);
}

/*⭐展示関連*/
/*====================================================================
slick
====================================================================*/

html, body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}
.sliderArea.w300 {
  max-width: 300px;
}
.slick-slide {
  margin: 0 5px;
}
.slick-slide img {
  width: 100%;
  height: auto;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out .3s;
  opacity: .2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: .7;
}

/*====================================================================
.full-screen-o
====================================================================*/
/* 
.full-screen-o .slick-list {
  overflow: visible;
}
.full-screen-o.slider {
  max-width: 300px;
  margin: 0 auto;
}
.full-screen-o .slick-dots {
  bottom: -33px;
}
.full-screen-o .slick-dots li {
  position: relative;
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.full-screen-o .slick-dots li button {
  font-size: 0;
  line-height: 0;
  padding: 0;
  cursor: pointer;
  color: transparent;
  border: 0;
  text-indent: -9999px;
  display: block;
  width: 8px;
  height: 8px;
  margin: 0 8px;
  outline: 0;
  border-radius: 5px;
  transition-duration: 0.3s;
}
.full-screen-o .slick-dots li button:before {
  content: none;
}
.full-screen-o .slick-dots li:nth-child(1) button {
  background: #f5d1c3;
}
.full-screen-o .slick-dots li:nth-child(2) button {
  background: #a9b7ba;
}
.full-screen-o .slick-dots li:nth-child(3) button {
  background: #c4d7d1;
}
.full-screen-o .slick-dots li:nth-child(4) button {
  background: #b4b1a0;
}
.full-screen-o .slick-dots li:nth-child(5) button {
  background: #e5dfd3;
}
.full-screen-o .slick-dots li button:hover, .full-screen-o .slick-dots li.slick-active button {
  border-radius: 0px;
  width: 12px;
  height: 12px;
} */

/* =============================
   Swiper カルーセル設定
============================= */
.swiper {
  width: 90%;
  max-width: 900px;
  margin: 50px auto;
  overflow: visible;
}

.swiper-slide {
  text-align: center;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.swiper-slide img {
  width: 100%;
}

.swiper-slide p {
  margin-top: 10px;
  font-size: 14px;
  color: white;
  font-family: "Noto Serif JP", serif;
}

.swiper-slide-active {
  transform: scale(1.1); /* 中央の画像を拡大 */
  z-index: 2;
}

/* ----------------------------------------------------
   【1】共通設定: スライドに position: relative を設定
   ---------------------------------------------------- */
.swiper-slide {
  position: relative; /* ::before の基準とするため */
}

/* ----------------------------------------------------
   【2】オーバーレイの作成: 普段は見えない（透明な）レイヤー
   ---------------------------------------------------- */
.swiper-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* 黒のオーバーレイ */
  opacity: 0; /* 普段は透明 */
  z-index: 10; /* 画像やテキストより上 */
  transition: opacity 0.3s ease; /* アニメーションを追加 */
}

/* ----------------------------------------------------
   【3】ホバー時の設定: 触れたスライドのオーバーレイのみを可視化
   ---------------------------------------------------- */
.swiper-slide:hover::before {
  opacity: 0.4; /* ホバー時に半透明（60% = 0.4の不透明度）にする */
}


/* ⭐ no-hoverクラスがついたスライドは無効化 */
/* .swiper-slide.no-hover:hover::before {
  opacity: 0 !important;
} */


/* ----------------------------------------------------
   【不要なCSS】元のCSSは削除してください
   ---------------------------------------------------- */
/*
.swiper:hover {
  opacity: 60%; 
}
*/

.swiper-slide-next,
.swiper-slide-prev {
  transform: scale(0.85);
  opacity: 0.7;
}

/* 矢印 */
.swiper-button-next,
.swiper-button-prev {
  color: white;
  transition: opacity 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 0.7;
}



/*⭐本館関連*/
.honkan .text {
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* .honkan .text::before,
.honkan .text::after {
  content: "";
  position: absolute;
  pointer-events: none; 
  background: #666;    
  opacity: 0.6; 
} */

/* 横の線 */
.honkan .text::before {
    right: 20px;
    bottom: 2px;
    width: 73px;
    height: 1px;
}

/* 縦の線 */
.honkan  .text::after {
    right: 30px;
    bottom: -9px;
    width: 1px;
    height: 39px;
}

.honkan .text p {
  font-family: 'Noto Serif JP', serif;
  font-size: 12px;
  text-align: center;
  background-image: url("https://ikkyosai.com/visitor/56/topics/img/indoor_rest/foggy-box_honkan.svg"); /* ←画像ファイル名 */
  background-repeat: no-repeat;            /* 背景画像を繰り返さない（1枚だけ表示） */
  background-position: center;             /* 背景画像の表示位置を中央にする */
  padding: 20px;                           /* 内側の余白をつけて文字が画像にくっつかないようにする */
}

.honkan_bold{
  font-weight: 600;/*かえるかも*/
}

.download {
  font-family: "Shippori Mincho", serif; /* フォントをしっぽり明朝に */
}

.other_projects {
  font-family: "Shippori Mincho", serif; /* フォントをしっぽり明朝に */
}

.button_wrap{
  display: flex; 
  align-items: center;
  flex-direction: column;

  gap: 10px;
  padding-top: 20px;
  padding-bottom: 40px;
}

.button_bottom{
  display: inline-flex;           /* インライン要素のように横並びできる＋中身をflexで中央揃え */
  align-items: center;            /* flexで縦方向の中央揃え */
  justify-content: center;        /* flexで横方向の中央揃え */

  width: 270px;                   /* ボタン全体の横幅 */
  height: 30px;                   /* ボタン全体の高さ */
  padding: 0 12px;                /* テキストと枠の間の余白。横幅固定なのでお好みで調整 */

  background-color: #FFFFFF;      /* 背景色を白に設定 */
  color: #323a39;                    /* テキストの色（濃いグレー） */
  border-radius: 15px;            /* 角を丸める。高さ30pxの半分=15pxで両端が半円になる */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08); /* うっすらと影をつけて浮いているように見せる */
  cursor: pointer;                /* マウスを乗せると「手の形」になる */
  font-size: 18px;                /* テキストの大きさ */
  line-height: 1;                 /* 行の高さを最小限にして余白を詰める */
  font-family: inherit;           /* 親要素と同じフォントを使う */
  user-select: none;              /* テキストをドラッグで選択できないようにする */
  text-decoration: none;
}

/* ホバーやフォーカス時に効果をつける */
.button_bottom:hover,
.button_bottom:focus {
  opacity: 0.6;                 /* 半透明にしている */
  box-shadow: 0 4px 10px #FFFFFF; /* 影を強くして浮き上がる感じに */
  transform: translateY(1px);             /* 少し上に動かしてボタンっぽい反応に */
  outline: none;                           /* フォーカス枠を消す（必要なら独自スタイル追加可） */
}

/* ボタンが無効化されているときの見た目 */
.button_bottom:disabled {
  opacity: 0.6;                 /* 半透明にして無効感を出す */
  cursor: not-allowed;          /* マウスを乗せても禁止マーク */
  box-shadow: none;             /* 影を消す */
  transform: none;              /* 浮き上がりをなくす */
}


/*⭐タブ関係*/

  /* タブ切り替えコンテナ */
  .floor_tab {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
    gap: 0px;
    max-width: 100%;
    font-weight: 500;
    font-family: "Shippori Mincho", serif; /* フォントをしっぽり明朝に */
  }

  /* ラジオボタンは非表示 */
  .floor_tab input[type="radio"] {
    display: none;
  }

  /* タブラベル */
  .floor_tab > label {
    flex: 1 1 0;
    order: -1;
    position: relative;
    background-color:#ECE3D8;
    color: #9c835c;
    text-align: center;
    cursor: pointer;
    transition: 0.3s all;
    padding: 16px 0;
    border-top: 1px solid #D7C6AF;
    border-right: 1px solid #D7C6AF;
    border-bottom: 2px solid #D7C6AF;
    user-select: none;
    padding: 0.7em 0.5em;
    font-size: 18px;
  }


    
  .floor_tab > label:hover{
    background-color: #C3A98B;
    color: #3E3A39;
    border-top: 2px solid #D7C6AF;
    border-right: 2px solid #D7C6AF;
    border-left: 2px solid #D7C6AF;
    border-bottom: 2px solid transparent;
    z-index: 2;
    
  }


  /* タブコンテンツは初期非表示 */
  .tab-content {
    display: none;
    width: 100%;
    padding: 1.5em 1em;
    background: #FFFFFF;
    box-sizing: border-box;
    margin-top: -2px;
    position: relative;
  }

  /* チェックされたラジオの兄弟コンテンツを表示 */
  #tab1:checked ~ #tab1_content,
  #tab2:checked ~ #tab2_content,
  #tab3:checked ~ #tab3_content,
  #tab4:checked ~ #tab4_content,
  #tab5:checked ~ #tab5_content {
    display: block;
  }

/* ここはGPTに聞いて、書き足した。被りあるかも */
/* ▼ タブ全体コンテナ */
.floor_tab {
  display: block; /* いったん block に戻す */
  max-width: 100%;
  font-weight: 500;
  font-family: "Shippori Mincho", serif;
}

/* ▼ タブラベルを包むラッパーを追加した想定（HTMLに追加しなくてもOK） */
.floor_tab label {
  display: inline-block;
  width: 20%; /* 各タブの幅を20%に固定 */
  background-color:#ECE3D8;
  color: #9c835c;
  text-align: center;
  cursor: pointer;
  transition: 0.3s all;
  padding: 0.7em 0.5em;
  border-top: 1px solid #D7C6AF;
  border-right: 1px solid #D7C6AF;
  border-bottom: 2px solid #D7C6AF;
  font-size: 18px;
  box-sizing: border-box;
}



/* ▼ ホバー */
.floor_tab > label:hover {
  background-color: #C3A98B;
  color: #3E3A39;
  border-top: 2px solid #D7C6AF;
  border-right: 2px solid #D7C6AF;
  border-left: 2px solid #D7C6AF;
  border-bottom: 2px solid transparent;
}

/* ▼ コンテンツ */
.tab-content {
  display: none;
  width: 100%; /* コンテンツ部分は全幅 */
  padding: 1.5em 1em;
  background: #FFFFFF;
  box-sizing: border-box;
  margin-top: -2px;
}

/* チェックされたラジオのコンテンツだけ表示 */
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content {
  display: block;
}

/* 2025年10月25日GPTに書いてもらったのの書き写し */
/* タブ切り替え全体 */
.floor_tab {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* ラジオボタンは非表示 */
.floor_tab input[type="radio"] {
  display: none;
}

/* ===== ▼ ラベル（タブ）設定 ===== */
.floor_tab > label {
  display: inline-block;
  background-color: #ECE3D8;
  color: #9c835c;
  text-align: center;
  cursor: pointer;
  transition: 0.3s all;
  padding: 0.7em 1em;
  border: 1px solid #D7C6AF;
  border-bottom: none;
  font-size: 18px;
  user-select: none;
}

/* 横並びを維持するための調整 */
.floor_tab > label {
  order: -1; /* inputより上に出す */
}



/* アクティブタブ */
.floor_tab input[type="radio"]:checked + label {
  background-color: #FFFFFF;
  color: #3E3A39;
  border-top: 2px solid #D7C6AF;
  border-right: 2px solid #D7C6AF;
  border-left: 2px solid #D7C6AF;
  border-bottom: none; /* ← 白線ではなく完全に削除 */
  z-index: 3;
}

/* コンテンツ部分 */
.tab-content {
  display: none;
  width: 100%;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 1.5em 1em;
  border-top: 2px solid #D7C6AF;
  margin-top: 0; /* ← -2pxを削除 */
  order: 1;
  z-index: 1;
}


/* ホバー時 */
.floor_tab > label:hover {
  background-color: #C3A98B;
  color: #3E3A39;
  border-top: 2px solid #D7C6AF;
  border-right: 2px solid #D7C6AF;
  border-left: 2px solid #D7C6AF;
  border-bottom: 2px solid transparent;
  z-index: 2;
}

/* ===== ▼ コンテンツ部分 ===== */
.tab-content {
  display: none;
  width: 100%;
  background: #FFFFFF;
  box-sizing: border-box;
  padding: 1.5em 1em;
  border-top: 2px solid #D7C6AF; /* 上だけ線を残す */
  border-left: none;
  border-right: none;
  border-bottom: none;
  margin-top: -2px;
  order: 1;
  z-index: 1;
}


/* チェックされたラジオの兄弟コンテンツを表示 */
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content {
  display: block;
}

/* ===== ▼ 新規追加: タブエリアを上にまとめる ===== */
.floor_tab::before {
  content: "";
  display: block;
  order: -1;
  width: 100%;
}

.floor_tab > label {
  flex: 0 0 auto; /* 幅固定で横並びに */
}

/* ラベルをまとめる横並びブロックを作る */
.floor_tab > label:first-of-type {
  margin-left: auto;
}
.floor_tab > label:last-of-type {
  margin-right: auto;
}


.honkan_all_img{
  width: 100%;
}

.map_marks_img{
  width: 70%;
}
.map_marks_img_wrap{
  text-align: center;
  background-color: #FFFFFF;
}
.map1F_wrap{
  position: relative;
}

.map2F_wrap{
  position: relative;
}

.map3F_wrap{
  position: relative;
}

.map-outline {
  position: absolute;
  /* top: 20px;              
  left: 50%;
  transform: translateX(-50%); */
  width: 180px;           /* map-popup と同じくらいのサイズに調整 */
  height: 80px;
  border: 2px solid #dcc89c; /* 黄色い枠線 */
  border-radius: 8px;     /* map-popupと似た角丸 */
  background: transparent; /* 中は透明 */
  z-index: 10;            /* map-backgroundより前に出す */
  color: #000;
  font-size: 12px;
  text-align: center;
  display: flex;             /* 中央寄せに便利 */
  align-items: center;       /* 縦中央揃え */
  justify-content: center;   /* 横中央揃え */
  background: linear-gradient(to right, #ffffff, #fff2bf);
  display: block;
  left: 50%;
  top: -54px;
  transform: translate(-50%, -50%);  
  /* ★中央揃えのポイント★ */
  display: flex;
  align-items: center;      /* 縦方向中央揃え */
  justify-content: center;  /* 横方向中央揃え */  
}

/* 丸いボタン */



.map_btn_10 {
  position: absolute;
  left: 26%;
  top: 12%;
  width: 14vw;      /* 横長の長方形 */
  height: 5vw;      /* 高さを指定 */
  border-radius: 2.5vw; /* ← 高さの半分にすると自然な“丸端” */
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
  font-size: 2vw;
}

.map_btn_10:active {
  transform: scale(0.95);
}

.map_btn_11 {
  position: absolute;
  left: 61%;
  top: 12%;
  width: 14vw;      /* 横長の長方形 */
  height: 5vw;      /* 高さを指定 */
  border-radius: 2.5vw; /* ← 高さの半分にすると自然な“丸端” */
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
  font-size: 2vw;  
}
.map_btn_11:active {
  transform: scale(0.95);
}


.map_btn {
  position: absolute;
  left: 20px;   /* ボタンの位置を調整（必要なら変更） */
  top: 20px;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #fff;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
}
.map_btn:active {
  transform: scale(0.95);
}


.map_btn_20 {
  position: absolute;
  left: 47.75%;
  top: 11%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_20:active {
  transform: scale(0.95);
}

.map_btn_21 {
  position: absolute;
  left: 42%;
  top: 27%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_21:active {
  transform: scale(0.95);
}

.map_btn_22 {
  position: absolute;
  left: 42%;
  top: 55%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_22:active {
  transform: scale(0.95);
}

.map_btn_23 {
  position: absolute;
  left: 54%;   /* ボタンの位置を調整（必要なら変更） */
  top: 55%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_23:active {
  transform: scale(0.95);
}

.map_btn_25 {
  position: absolute;
  left: 25%;
  top: 79%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_25:active {
  transform: scale(0.95);
}

.map_btn_26 {
  position: absolute;
  left: 47.75%;
  top: 81%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_26:active {
  transform: scale(0.95);
}



.map_btn_30 {
  position: absolute;
  left: 48%;   /* ボタンの位置を調整（必要なら変更） */
  top: 4%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_30:active {
  transform: scale(0.95);
}

.map_btn_31 {
  position: absolute;
  left: 42%;   /* ボタンの位置を調整（必要なら変更） */
  top: 25%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_31:active {
  transform: scale(0.95);
}

.map_btn_32 {
  position: absolute;
  left: 42%;   /* ボタンの位置を調整（必要なら変更） */
  top: 51%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_32:active {
  transform: scale(0.95);
}

.map_btn_33 {
  position: absolute;
  left: 54%;   /* ボタンの位置を調整（必要なら変更） */
  top: 51%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_33:active {
  transform: scale(0.95);
}

.map_btn_35 {
  position: absolute;
  left: 22%;   /* ボタンの位置を調整（必要なら変更） */
  top: 75%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_35:active {
  transform: scale(0.95);
}

.map_btn_36 {
  position: absolute;
  left: 42%;   /* ボタンの位置を調整（必要なら変更） */
  top: 75%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_36:active {
  transform: scale(0.95);
}


.map_btn_30 {
  position: absolute;
  left: 47.75%;
  top: 11%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_30:active {
  transform: scale(0.95);
}

.map_btn_31 {
  position: absolute;
  left: 42%;
  top: 27%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_31:active {
  transform: scale(0.95);
}

.map_btn_32 {
  position: absolute;
  left: 42%;
  top: 55%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_32:active {
  transform: scale(0.95);
}

.map_btn_33 {
  position: absolute;
  left: 54%;   /* ボタンの位置を調整（必要なら変更） */
  top: 55%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_33:active {
  transform: scale(0.95);
}

.map_btn_35 {
  position: absolute;
  left: 25%;
  top: 79%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_35:active {
  transform: scale(0.95);
}

.map_btn_36 {
  position: absolute;
  left: 47.75%;
  top: 81%;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn_36:active {
  transform: scale(0.95);
}

.map_btn {
  position: absolute;
  left: 20px;   /* ボタンの位置を調整（必要なら変更） */
  top: 20px;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  border: 2px solid #dcc89c;
  background: #e8dab2;
  color: #000;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.1s ease;
  z-index: 10;
  font-family: 'Noto Serif JP', serif;
}
.map_btn:active {
  transform: scale(0.95);
}




/* 画像ポップアップ */
.map-popup {
  position: absolute;
  display: none;
  width: 180px;
  height: 80px;
  background: #fff;
  padding: 8px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 20;
}

/* .map-popup img {
  width: 100%;
  height: auto;
  border-radius: 6px;
} */

/* 表示時 */
.map-popup.show {
  display: block;
}

/* 地図の背景画像 */
.map-background {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 90px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: -1.5vw;
}

/* ボタンの位置を地図上で調整（必要に応じて） */
.map_btn {
  position: absolute;
  left: 60%;   /* ←横位置（% で調整） */
  top: 40%;    /* ←縦位置（% で調整） */
}

/* ポップアップ画像を地図上に表示 */
.map-popup {
  position: absolute;
  top: 10%;
  left: 65%;
  display: none;
}

.map-area {
  position: relative;
  display: inline-block;
  width: 100%;
}

.map-popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  display: none;
}

.map-popup.show {
  display: none;
  left: 50%;
  top: -54px;
  transform: translate(-50%, -50%);  
}

/* .map-popup img {
  max-width: 80%;
  height: auto;
  border: 2px solid #fff;
} */


/*ここはカルーセル関連*/
/* ======= PICKUPスライダー（Swiper版） ======= */

/* 見出し装飾 */
#midasi-3 {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
#midasi-3 h1::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 50px;
  background: url(https://ikkyosai.com/shinkan/56/img/index/PICKUPBOX.svg)
    center/contain no-repeat;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#midasi-3 h1,
#midasi-3 h3 {
  position: absolute;
  color: var(--white);
  text-align: center;
}
#midasi-3 h3 {
  top: 26%;
}

#pickup {
  padding: 20px 0 100px 0;
}

/* スライダー本体 */
.mySwiper {
  width: 80%;
  max-width: 1200px;
  margin: 0px auto;
  overflow: hidden;
}

/* 各スライド */
.swiper-slide {
  transition: transform 0.8s ease, opacity 0.8s ease;
  transform: scale(0.85);
  opacity: 0.8;
  overflow: hidden;
  background: white;
  box-shadow: 0 5px 15px #EADCB5;
}

.swiper-slide img {
  width: 100%;
  display: block;
}

.swiper-slide p {
  padding: 15px;
  font-family: "Shippori Mincho", serif;
  font-size: 10px;
  color: #333;
  text-align: center;
}
.swiper-slide a {
  text-decoration: none;
  color: inherit; /* 文字色も親要素に合わせる（必要なら） */
}

/* 中央スライド強調 */
.swiper-slide-active {
  transform: scale(1.1);
  opacity: 1;
  z-index: 3;
  box-shadow: 0 8px 25px #EADCB5;
}

/* 左右スライド */
.swiper-slide-next,
.swiper-slide-prev {
  transform: scale(0.85);
  opacity: 0.8;
}

/* 非表示領域 */
.swiper-slide:not(.swiper-slide-active):not(.swiper-slide-next):not(.swiper-slide-prev) {
  opacity: 0;
  transition: none;
}

/* ドット */
.swiper-pagination-bullet {
  background: #d6c488;
  opacity: 0.5;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}
/* ▼ Swiperデフォルト矢印を非表示にする */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none !important;
}

/* ▼ Swiperデフォルト非表示にする */
.swiper {
  padding: 5% !important;
}


/* ▼ ページネーション（●）を非表示にする */
.swiper-pagination {
  display: none !important;
}

/* ▼ カスタム矢印（三角形）設定 */
.swiper-button-prev,
.swiper-button-next {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  top: 50%;                     /* ← スライド縦の中央 */
  transform: translateY(-50%);  /* ← 縦位置を中央に調整 */
  z-index: 10;
  opacity: 1;                   /* ← 完全不透明 */
}

/* 左側（◀） */
.swiper-button-prev {
  border-width: 30px 25px 30px 0;                /* ← サイズ調整 */
  border-color: transparent #EADCB5 transparent transparent; /* ← 色 */
  left: -80px;                                   /* ← スライド外側に出す */
}

/* 右側（▶） */
.swiper-button-next {
  border-width: 30px 0 30px 25px;
  border-color: transparent transparent transparent #EADCB5;
  right: -80px;
}

.swiper-button-prev,
.swiper-button-next {
  color: #333; /* ボタン矢印の色 */
  width: 40px;
  height: 40px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 20px; /* 矢印の大きさ */
}

html {
  scroll-behavior: smooth; /* スムーススクロールを有効にする */
}

/*** 以下は見た目や動作確認用のCSS ***/

body {
    height: 150vh; /* 長いページを生成 */
    margin: 0;
    padding: 0;
}
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
}
.scroll-to-top:active {
    background-color: #0056b3;
}

/* ▼ 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);
  }
  
}

/* ----------------------------------------------------
   【修正1】ボタン全体にホバー時の矢印（棒）の動き
   ---------------------------------------------------- */
/* ホバー対象を親要素の .okunai_honkan_button に変更 */
/* .arrow_line_wrap.float:hover のCSSは不要になります */

.okunai_honkan_button:hover .arrow_line_wrap { /* ボタン全体にホバーしたら */
  transform: translateX(-10px); /* 矢印の棒を動かす */
}

/* ----------------------------------------------------
   【修正2】ボタン全体にホバー時の丸の動き
   ---------------------------------------------------- */
/* ホバー対象を親要素の .okunai_honkan_button に変更 */
/* .circle-arrow:hover のCSSは不要になります */

.okunai_honkan_button:hover .circle-arrow { /* ボタン全体にホバーしたら */
  transform: scale(0.5); /* 丸を縮小する */
}


/* ----------------------------------------------------
   【その他】要素のtransition設定
   ---------------------------------------------------- */

/* ホバーで動かす要素（.arrow_line_wrap と .circle-arrow）に transition を設定 */

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


/* ----------------------------------------------------
   【修正1】ボタン全体にホバー時の矢印（棒）の動き
   ---------------------------------------------------- */
/* ホバー対象を親要素の .okunai_honkan_button に変更 */
/* .arrow_line_wrap.float:hover のCSSは不要になります */

.okunai_tenji_button:hover .arrow_line_wrap { /* ボタン全体にホバーしたら */
  transform: translateX(-10px); /* 矢印の棒を動かす */
}

/* ----------------------------------------------------
   【修正2】ボタン全体にホバー時の丸の動き
   ---------------------------------------------------- */
/* ホバー対象を親要素の .okunai_honkan_button に変更 */
/* .circle-arrow:hover のCSSは不要になります */

.okunai_tenji_button:hover .circle-arrow { /* ボタン全体にホバーしたら */
  transform: scale(0.5); /* 丸を縮小する */
}


/* ----------------------------------------------------
   【その他】要素のtransition設定
   ---------------------------------------------------- */

/* ホバーで動かす要素（.arrow_line_wrap と .circle-arrow）に transition を設定 */

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

.arrow_line_wrap {
  position: relative;
  top: 3px; /* ← 下方向に3pxずらす */
}

.info-for-check1{
  color: red;
}



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


  /*ここから書いてね*/
.index br {
  display: none;
}

.index a{
  font-size: 30px;
}

.subhead{
  font-size: 36px;
  margin-left: 10vw;
}
.subhead_first{
  font-size: 60px;
}

.subhead_img{
  height: 100px;
}

.subhead_img{
  margin-right: -46px;
}

.okunai_contents_flex{
  display: flex;
  justify-content: space-evenly;
  width: 77%;
  margin: 0 auto;
}

.okunai_contents_flex .okunai_honkan_text p,
.okunai_contents_flex .okunai_tenji_text p {
  font-size: 20px;
}

.okunai_honkan_button,
.okunai_tenji_button {
  font-size: 20px;
}



.okunai_honkan_wrap{
  flex-direction: row-reverse
}

.swiper-slide p{
  font-size: 16px;
}
.swiper-slide .blackboard_tenji_text_small {
  font-size: 11px;
}



.honkan .text p{
  font-size: 20px;
}

.first_view_circle-img {
  top: -44vw;
}

.title{
  transform: scale(0.75);
  left: 2%;
  top: -10%;
}

.first_view_SM-img{
  content: url("https://ikkyosai.com/visitor/56/topics/img/indoor_rest/first_view_PC.png");
  opacity: 75%;
}
.location p{
  font-size: 4.5vw;
  margin-right: 3vw;
}

.location p::before {
    top: 9px;
    bottom: 0px;
    left: -1vw;
    right: -20px;
}

.location .pin {
    width: 4.5vw;
}
/* .location-wrap{


} */


.honkan .text p{
 background-size: 50%;
}

.map_marks_img {
    width: 30%;
}

.map-background{
  width: 60%;
  margin-top: 150px;
  margin-left: 19%;
}

.map-popup{
  width: 30%;
  height: 140px;
}

.honkan_all_img{
  display: block;
  margin: 0 auto;
  width: 60%;
}

.button_wrap a.button_bottom {
  font-size: 20px;   /* 文字サイズを20pxに */
}

.button_bottom{
  width: 300px;
}


.big_arrow{
  font-size: 30px;
}

/* ここからフロアマップのボタン関連 */
.map_btn_10{
  left: 35%;
  top: 12%;
  font-size: 1.75vw;
  width: 12vw;
  height: 4vw;  
}

.map_btn_11{
  left: 56%;
  top: 12%;
  font-size: 1.75vw;
  width: 12vw;
  height: 4vw;
}


.map_btn_20 {
  left: 48.25%;
  top: 9%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_21 {
  left: 48.25%;
  top: 32%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_22 {
  left: 44.75%;
  top: 54%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_23 {
  left: 51.76%;
  top: 54%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_25 {
  left: 34.5%;
  top: 77%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_26 {
  left: 48.25%;
  top: 80%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}


.map_btn_30 {
  left: 48.25%;
  top: 9%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_31 {
  left: 48.25%;
  top: 32%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_32 {
  left: 44.75%;
  top: 54%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_33 {
  left: 51.76%;
  top: 54%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_35 {
  left: 34.5%;
  top: 77%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}
.map_btn_36 {
  left: 48.25%;
  top: 80%;
  font-size: 2vw;
  width: 4vw;
  height: 4vw;
}

.floor_tab label{
  width: 15%;
}

.map-popup.show {
    top: -10%;
  height: 10vw;

}

.map-outline{
  width: 30%;
  height: 10vw;
  top: -4vw;
  font-size: 20px;
}

}

html {
  scroll-behavior: smooth; /* スムーススクロールを有効にする */
}

/*** 以下は見た目や動作確認用のCSS ***/

.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;

    /* サイズを正方形に */
    width: 50px;
    height: 50px;

    /* テキスト中央寄せ */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 背景・文字など */
    background-color: #e8d17399;
    color: #ffffff99;
    border: none;

    /* 丸くする！ */
    border-radius: 50%;

    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    z-index: 100;

    /* 影をつけて浮かせてもきれい */
    box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}

.scroll-to-top:active {
    background-color: #d4c060;
    transform: scale(0.95); /* 押した感を出す */
}

@media screen and (max-width: 1024px) {
  .floor_tab > label {
    flex: 0 0 25%;      /* 幅を25%に固定 */
    box-sizing: border-box;
    margin: 0;          /* 余白をなくす */
    padding: 0.7em 0;   /* 縦だけ余白（横は調整不要） */
    font-size: 16px;    /* スマホでは少し小さめに */
  }

  .floor_tab {
    justify-content: space-between; /* タブ間の隙間を自動調整 */
  }  

}