/* #はIDセレクターで、特定の要素を1つだけ選ぶ。.`はクラスセレクターで、複数の要素をまとめて選ぶ。 */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ヘッダーの設定
header {
    background-image:url("聖地さがし隊ヘッダー.png");
    background-size:cover;                 
    width:100%;     
    height:300px;  
    margin: 0;
}
    */

/* お気に入り作品ページのタイトル設定 */
#favorite_title {
    font-size: 2.0em;/* フォントサイズ */
    font-weight: bold;/* フォント太さ */
    padding-top: .5em;
    padding-left: .5em;
    padding-bottom: .5em;
    margin-bottom: 1em;
    background-color: #ebf4f6;/* 背景色 */
    border-left: 10px solid #318496;/* 左の線 */
    border-bottom: 2px solid #cccccc;/* 下の線 */
    color: #318496;/* フォント色 */
}

.remove {
    margin-left: 10px;
    color: red;
    cursor: pointer;
}

/* お気に入り作品数の設定 */
#favorite_count {
    margin-left: 20px;
    font-size:25px;
}
/* 検索結果のデザインを管理(お気に入り作品) */
#favorite_list {
    margin-left: 2em;
    padding: 0;
    text-align: left;
    font-size: 24px;
}

#favorite_area li {
    margin: 5px 0;
}

.favarite_link {
    color: skyblue;
    text-decoration: none;
}

/* 自動で消えるカスタムアラートの設定 */
.custom-alert {
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #4274e2;
    color: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 1000;
}

.custom-alert.hide {
    opacity: 0;
}

/* 舞台表示ページのタイトル設定 */
#stage_title {
    font-size: 2.0em;/* フォントサイズ */
    font-weight: bold;/* フォント太さ */
    padding-top: .5em;
    padding-left: .5em;
    padding-bottom: .5em;
    margin-bottom: 1em;
    background-color: #ebf4f6;/* 背景色 */
    border-left: 10px solid #318496;/* 左の線 */
    border-bottom: 2px solid #cccccc;/* 下の線 */
    color: #318496;/* フォント色 */
}

/*
header > h1 {
    margin-top: 30px;
    width: 100%;
    height: 200px;
    font-size: 40px;
    line-height: 180px;  
    padding-left: 20px;  
    color: #010079;
    text-shadow: 0 0 5px white;
    border-left: solid 15px #010079;
    background: -webkit-repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);
    background: repeating-linear-gradient(-45deg, #cce7ff, #cce7ff 3px,#e9f4ff 3px, #e9f4ff 7px);

}*/

/* 検索ボタンのデザインを管理 */
/* 検索ボタンのデザインを管理2 */

.container {
    display: flex;
    flex-wrap: wrap; /* 小さい画面で折り返し可能にする（必要なら） */
    align-items: center;
    justify-content: flex-start;/*space-between;(変更,消していいかも)*/
    gap: 10px;
    padding: 10px;
    width: 97%;
    box-sizing: border-box;
}

/* 検索バー */
#searchInput {
    flex: 1 1 70%; /* 拡大縮小に対応・最小70%くらいで収まるように */
    min-width: 200px;
    padding: 10px;
    height: 60px;
    font-size: 20px;
    margin-left: 10px;
    box-sizing: border-box;
}

/* 検索ボタン */
#searchButton {
    width: 150px;
    /*flex: 0 0 20%;（変更,消していいかも）*/ /* 固定幅ではなく、親の幅の20%を占める */
    min-width: 100px;
    height: 60px;
    font-size: 20px;
    background-color: #73c3e7;
    color: white;
    border: 1px solid #73c3e7;
    border-radius: 5px;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
}

/* 検索ボタン配置変更*/
.search-area {
    display: flex;
    gap: 10px;
    max-width: 80%; /* ← ここで変更 */
    width: 100%;
    padding-right: 10px;
}

/* お気に入りリンクのエリア */
#favorite_area {
    flex: 1 1 100%; /* 幅いっぱい使うように折り返し */
    margin-top: 10px;
}

/* お気に入り作品 */
#favorite_area {
    flex: 1 1 100%; /* 幅いっぱい使うように折り返し */
    margin-top: 25px;
    margin-left: 7px;  /* お気に入り、〇行ともに7px空ける */
    background: #fdf9c4;
    padding: 5px;
    border-radius: 8px;
    font-size: 20px;
}

#midasi {
    font-size: 1.5em;/* フォントサイズ */
    font-weight: bold;/* フォント太さ */
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: .5em;
    margin-bottom: 2em;
    background-color: #ebf4f6;/* 背景色 */
    border-left: 5px solid #318496;/* 左の線 */
    border-bottom: 2px solid #cccccc;/* 下の線 */
    color: #318496;/* フォント色 */
}

h2 {
    margin-left: 7px;
    font-size: 1.5em;/* フォントサイズ */
    font-weight: bold;/* フォント太さ */
    padding-top: .5em;
    padding-bottom: .5em;
    padding-left: .5em;
    background-color: #ebf4f6;/* 背景色 */
    border-left: 5px solid #318496;/* 左の線 */
    border-bottom: 2px solid #cccccc;/* 下の線 */
    color: #318496;/* フォント色 */
    width: 98%;
}

h3 {
    margin-left: 20px;
    
}

.container {
    margin: 1em;
    padding: 0;
    text-align: left;
}

/* 検索結果のデザインを管理 */
.result { 
    margin: 1em;
    padding: 0;
    text-align: left;
    font-size: 24px;
}

.t_area {
    overflow:auto;
    width: 100%;
    /* height: 15vh; */
    border: solid 1px #ccc;
}

ul {
    margin: auto;
}

li {
    margin-bottom: 12px;
}

.result_div {
    /* width: 300px; */
    margin: 1em;
    padding: 0;
    height: 80vh;
    /* border: solid 1px; */
    overflow: auto;
    text-align: left;
}

#loading {
    display: table;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.8;
}

#loading .loadingMsg {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    padding-top: 140px;
    background: url("image/load-earth.gif") center center no-repeat;
}

/* カーソルを重ねる要素 */
.tooltip {
    position: relative; /* ツールチップの位置の基準に */
    cursor: pointer; /* カーソルを当てたときにポインターに */
}

/* ツールチップのテキスト */
.tooltip-text {
    opacity: 0; /* はじめは隠しておく */
    visibility: hidden; /* はじめは隠しておく */
    position: absolute; /* 絶対配置 */
    left: 70%; /* 親に対して中央配置 */
    transform: translateX(-30%); /* 親に対して－30％左に配置 */
    top: -32px; /* 親要素上からの位置 */
    display: inline-block;
    padding: 5px; /* 余白 */
    white-space: nowrap; /* テキストを折り返さない */
    font-size: 0.8rem; /* フォントサイズ */
    line-height: 1.3; /* 行間 */
    background: #333; /* 背景色 */
    color: #fff; /* 文字色 */
    border-radius: 3px; /* 角丸 */
    transition: 0.3s ease-in; /* アニメーション */
}

/* ホバー時にツールチップの非表示を解除 */
.tooltip:hover .tooltip-text {
    opacity: 1;
    visibility: visible;
}

/* ツールチップに吹き出しを追加（疑似要素で三角形を追加) */
.tooltip-text:before {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 30%;
	margin-left: -7px;
	border: 7px solid transparent;
	border-top: 7px solid #333;
    border-left: 7px solid #333;
}

#map-container {
    display: flex;
    width: 100%;
}
#map {
    height: 700px; 
    width: 70%; 
    margin-top: 20px; 
    margin-left: 20px;
}

#images img {
    width: 500px;
}

/* iframe を中央に表示するためのラッパー */
.iframe-wrapper {
    display: flex;
    justify-content: center;  /* 水平方向中央 */
    align-items: center;      /* 垂直方向中央 */
    height: 100vh;            /* 画面全体の高さに合わせる */
}

/* iframe 自体のデザイン */
.iframe-wrapper iframe {
    width: 95%;
    height: 95%;
    border: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    background: white
}

#no_stage_p  {
    font-size: 48px;
    text-align: center;
    font-weight: bold;/* フォント太さ */
    padding-top: .5em;
    padding-left: .5em;
    padding-bottom: .5em;
    margin-bottom: 1em;
    background-color: #ebf4f6;/* 背景色 */
    color: #318496;/* フォント色 */
    margin-bottom: 10px;
}

#stage_photo {
    font-size: 30px;
}

#photo_text {
    font-size: 24px;
}

#go_photo {
    margin-top: 200px;
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* 任意の背景色 */
}

#go_photo img {
    width: 80%;                /* 画像サイズは自由に調整 */
    height: auto;
}

/*舞台リンクの色々*/
.custom-caption a {
    font-size: 20px;
    text-decoration: none; /* 下線を消す（消してもしてもOK） */
}

.no-result-img {
    width: 80vw;
    max-width: 500px;
    height: auto;
    margin: auto;
    display: block;
}