/*----------------------------------------------------------------------*/
/* メイン画面 - 最適化版 */
/*----------------------------------------------------------------------*/
:root {
  --title-size: 13px;
  --footer-size: 2px;
  --footer-size-mini: 30px;
  --primary-color: #da4646;
  --secondary-color: #8ac6d1;
  --accent-color: #bbded6;
  --text-color: #565656;
  --white: #FFF;
  --border-radius: 5px;
  --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

html, body {
  font-family: "Helvetica Neue", Verdana, Arial, YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height: 1.7;
  font-size: 100%;
  color: var(--text-color);
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
}

a {
  text-decoration: none;
  color: var(--white);
}

.wrapper {
  height: 100%;
  min-height: 100vh;
  position: relative;
  padding-bottom: 20px;
  box-sizing: border-box;
}

/* ヘッダー共通 */
ul.page_title {
  display: flex;
  justify-content: flex-start;
  color: var(--white);
  background: var(--primary-color);
  padding: 5px 10px;
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN";
}

/* top-pageとlearn-page用のヘッダー固定 */
body.top-page ul.page_title,
body.learn-page ul.page_title {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  box-sizing: border-box;
}

body.top-page ul.triple_header,
body.learn-page ul.triple_header {
  position: fixed;
  top: 43px;
  left: 0;
  width: 100%;
  z-index: 999;
  box-sizing: border-box;
}

/* ヘッダー固定時のbody調整 */
body.top-page,
body.learn-page {
  padding-top: 73px;
}

ul.page_title li:nth-of-type(2) {
  flex-basis: 10px;
  box-sizing: border-box;
}

.page_title span {
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
}

/* フッター */
footer {
  width: 100%;
  height: var(--footer-size);
  background-color: var(--primary-color);
  border-top: 1px solid var(--secondary-color);
  text-align: center;
  padding: 0;
  position: fixed;
  bottom: 0;
}

footer.mini {
  width: 100%;
  height: var(--footer-size-mini);
  background-color: var(--primary-color);
  border: 1px solid #000;
  text-align: center;
  padding: 0;
  position: absolute;
  bottom: 20px;
}

.copyright {
  width: 100%;
  text-align: center;
  font-size: 0.2rem;
  color: var(--white);
  position: absolute;
  bottom: 7.5px;
}

/* 基本要素 */
img {
  max-width: 100%;
  height: auto;
  width: 500px;
}

ul {
  list-style: none;
  padding: 0 10px;
}

input:focus {
  box-shadow: 0 0 0 2px rgba(35, 167, 195, 0.3);
  border: 0;
  outline: 0;
}

.button1 {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  color: var(--white);
  background: var(--secondary-color);
  border: 0;
}

.item_name {
  margin: 10px;
  padding: 0 10px;
  border-left: 3px solid #ffb6b9;
}

/*-------------------------------------------------------*/
/* ログイン画面 */
/*-------------------------------------------------------*/
div.page_title_login {
  color: var(--text-color);
  background: #99CCFF;
  height: 20px;
  padding: 10px;
  margin: 0;
  border-bottom: 3px solid #1E90FF;
  text-align: left;
}

.page_title_login span {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
  font-family: serif;
}

.wrapper_login {
  height: calc(100% - var(--title-size) - var(--footer-size-mini));
  overflow: auto;
  margin: 0;
  text-align: center;
  font-size: 1.2rem;
  background-color: #EEFFFF;
}

.introducing {
  color: #787878;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  margin: 20px 10px 10px;
}

.nobreak {
  display: inline-block;
}

/* ログインフィールド */
.login_form fieldset {
  max-width: 25rem;
  margin: 20px auto 0;
  border: 1.5px solid #99CCFF;
  padding: 0;
  background-color: #F0F8FF;
}

.login_form legend {
  padding: 0 10px 0;
  font-size: 1.5rem;
}

.login_form ul {
  max-width: 300px;
  margin: 0 auto;
}

.login_form ul li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 5px;
  margin: 5px 0 0;
}

.login_form ul span:first-of-type {
  flex-basis: 120px;
}

.login_form ul span:nth-of-type(2) {
  flex-grow: 1;
}

.login_form ul input {
  width: 100%;
  box-sizing: border-box;
}

/* ボタン共通スタイル */
.login_button {
  width: 250px;
  color: var(--white);
  background: #668ad8;
  border: 0;
  border-radius: var(--border-radius);
  padding: 5px;
  margin: 20px 0;
  font-size: 1.2rem;
  cursor: pointer;
}

p.signup_button a {
  color: #000000;
  position: relative;
  display: table;
  width: 250px;
  text-align: center;
  padding: 1px;
  z-index: 2;
  color: var(--white);
  background-color: #ff69b4;
  border: 1px solid #003399;
  border-radius: var(--border-radius);
  padding: 5px;
  margin: 20px auto;
  font-size: 1.2rem;
}

.back_login {
  width: 100px;
  background: var(--white);
  border: 1.5px solid var(--accent-color);
  border-radius: var(--border-radius);
  padding: 5px;
  margin: 20px 0;
  cursor: pointer;
}

/*---------------------------------------------------------------------*/
/* マップ画面 */
/*---------------------------------------------------------------------*/
#viewMap {
  height: calc(100% - var(--title-size) - var(--footer-size));
  max-width: 100%;
  background-color: #aaa;
}
/* 現在地取得ボタンのカスタマイズ - 四角形ボタンに変更 */
.esri-track {
  background: #003399 !important;
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(76, 175, 80, 0.4) !important;
  width: 120px !important;
  height: 40px !important;
  margin-top: 0px !important;
  margin-left: 0px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ボタン全体を完全にリセット */
.esri-track * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.esri-track .esri-widget--button {
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  font-size: 0 !important;
  right: 10px;/*左にずらす*/
}

/* テキストを直接ボタン要素に追加 */
.esri-track::before {
  content: "現在地を表示" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: bold !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  z-index: 1000 !important;
  background: transparent !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

/* 取得中のホバー効果 */
.esri-track.tracking:hover {
  background: #F57C00 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.6) !important;
}

.esri-track.tracking:active {
  transform: scale(0.98) !important;
  background: #E65100 !important;
}

/* ホバー効果を維持 */
.esri-track:hover {
  background: #45a049 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.6) !important;
}

.esri-track:active {
  transform: scale(0.98) !important;
  background: #3d8b40 !important;
}

/* 全てのアイコンを強制的に非表示 */
.esri-track .esri-icon-locate,
.esri-track .esri-icon-compass,
.esri-track .esri-icon,
.esri-track [class*="esri-icon"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* ボタン内の全ての要素を非表示 */
.esri-track .esri-widget--button > * {
  display: none !important;
  visibility: hidden !important;
}

/* 「現在地を表示」テキストを追加 - 最高優先度で表示 */
.esri-track .esri-widget--button::before {
  display: none !important;
}

/* 元のafter疑似要素を削除 */
.esri-track .esri-widget--button::after {
  display: none !important;
}

/* Compassウィジェット（方角表示）のカスタマイズ */
.esri-compass {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 2px solid #da4646 !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3) !important;
  width: 40px !important;
  height: 40px !important;
}

.esri-compass .esri-widget--button {
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  height: 100% !important;
}

.esri-compass .esri-icon-compass {
  color: #da4646 !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.esri-compass:hover {
  background: rgba(255, 255, 255, 1) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 15px rgba(218, 70, 70, 0.4) !important;
}

.esri-popup__main-container {
  z-index: 3;
}

.explanation_map_text {
  height: 28px;
  padding: 0;
  margin: 0;
  color: var(--text-color);
  background-color: var(--secondary-color);
  font-size: 0.6rem;
}

.explanation_map_button {
  height: 28px;
  padding: 0;
  margin: 0;
  color: var(--text-color);
  background-color: var(--accent-color);
  font-size: 0.6rem;
  border: 1.5px solid white;
}

ul.explanation_map {
  display: flex;
  justify-content: flex-start;
  color: var(--text-color);
  background: var(--secondary-color);
  height: 28px;
  padding: 0 10px 5px;
  margin: 0;
  border-bottom: 3px solid var(--secondary-color);
}

ul.explanation_map li:nth-of-type(1) {
  flex-grow: 1;
  box-sizing: border-box;
}

ul.explanation_map li:nth-of-type(2) {
  flex-basis: 60px;
  box-sizing: border-box;
}

/* 説明・ボタン共通 */
.explanation_button,
.explanation_mission_button {
  position: absolute;
  display: table;
  top: 85px;
  right: 10px;
  height: 40px;
  margin: 0;
  background: #4CAF50;
  border: 2px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(76, 175, 80, 0.4);
  z-index: 2;
  transition: all 0.2s ease;
}

.explanation_button {
  width: 120px;
}

.explanation_mission_button {
  width: 120px;
  top: 135px;
}

.explanation_button a,
.explanation_mission_button a {
  display: table-cell;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  font-family: "Helvetica Neue", Arial, sans-serif;
  white-space: nowrap;
}

/* ホバー効果を現在地ボタンと統一 */
.explanation_button:hover,
.explanation_mission_button:hover {
  background: #45a049;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.6);
}

.explanation_button:active,
.explanation_mission_button:active {
  transform: scale(0.98);
  background: #3d8b40;
}

.tutorial_button {
  position: absolute;
  display: table;
  top: 110px;
  right: 10px;
  height: 40px;
  width: 200px;
  margin: 0;
  background: #FF9800;
  border: 2px solid #ffffff;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(255, 152, 0, 0.4);
  z-index: 2;
  transition: all 0.2s ease;
}

.tutorial_button a {
  display: table-cell;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.tutorial_button:hover {
  background: #F57C00;
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(255, 152, 0, 0.6);
}

.tutorial_button:active {
  transform: scale(0.98);
  background: #E65100;
}

/* ヘッダー（3分割） */
ul.triple_header {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

ul.triple_header li:nth-of-type(1),
ul.triple_header li:nth-of-type(2),
ul.triple_header li:nth-of-type(3),
ul.triple_header li:nth-of-type(4) {
  flex-grow: 1;
  width: 25%;
  box-sizing: border-box;
}

.header_button {
  height: 30px;
  width: 100%;
  z-index: 2;
  color: var(--text-color);
  font-size: 0.8rem;
  font-weight: bold;
  background-color: var(--white);
  border: 3px solid var(--primary-color);
  border-right: 1.5px solid var(--accent-color);
  cursor: pointer;
}

/* ポップアップ・ボタン */
.spot_title_category {
  font-size: 1.5rem;
  font-weight: lighter;
}

.edit_btn,
.visit_btn {
  display: inline-block;
  padding: 0.3em 0.5em;
  width: 15em;
  margin: 0.3em 0;
  position: relative;
  left: 10px;
  text-decoration: none;
  font-size: 1rem;
  color: var(--white);
  border: 2px solid;
  cursor: pointer;
}

.edit_btn {
  background: #666666;
  border-color: var(--text-color);
}

.visit_btn {
  background: #668ad8;
  border-color: #003399;
}

.edit_btn:active,
.visit_btn:active {
  transform: translateY(4px);
  border-bottom: none;
}
/* テキストエリア */
.area {
  padding: 5px 5px 5px 0;
  margin: 1px 0;
  position: relative;
  font-size: 0.8rem;
  line-height: 1.2;
}

.textarea {
  top: 0;
  left: 0;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  padding: 5px 10px;
  min-height: 40px;
  max-height: 80px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 1px solid #b6c3c6;
  border-radius: 4px;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  resize: none;
}

.textarea:focus {
  box-shadow: 0 0 0 2px rgba(35, 167, 195, 0.3);
  outline: 0;
}

.times {
  margin: 0 0 5px;
  width: 40px;
  cursor: pointer;
}

ul.page_title2 {
  display: flex;
  justify-content: flex-start;
  color: var(--text-color);
  background: var(--accent-color);
  height: 30px;
  padding: 10px;
  margin: 0;
  border-bottom: 3px solid var(--secondary-color);
}

ul.page_title li:nth-of-type(2) {
  flex-basis: 10px;
  box-sizing: border-box;
}


/*-----------------------------------------------------------------*/
/* 共有・リスト画面 */
/*-----------------------------------------------------------------*/
.container {
  height: calc(100% - var(--title-size) - var(--footer-size-mini));
  overflow: auto;
}

#plan-all-contents {
  width: 100%;
}

ul.sharing_plan,
ul.plan_list {
  padding: 0 10px;
  list-style: none;
}

ul.plan_list li {
  line-height: 1;
  border-bottom: 1px solid #d8d8d8;
  padding: 12px 0;
}

ul.plan_list li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  text-decoration: none;
}

ul.plan_list li .title {
  margin: 0 auto 0 0;
  font-size: 18px;
  font-weight: bold;
}

ul.plan_list li .comment {
  margin: 10px auto 0 0;
  font-size: 18px;
  color: gray;
}

ul.plan_list li .usr_name {
  color: var(--secondary-color);
  margin: 10px 0 0 auto;
}

ul.plan_list li .date {
  color: var(--secondary-color);
  font-size: 0.8rem;
  margin: 10px 15px 0 auto;
}

ul.plan_list li .bought,
ul.plan_list li .detail_button {
  margin: 10px 0 0 auto;
}

ul.plan_list li .detail_button form button {
  margin: 10px 0 0 auto;
  font-weight: bold;
  padding: 0.25em 0.5em;
  right: 0;
  color: var(--text-color);
  background: var(--white);
  border: 2px solid var(--secondary-color);
}

/* ページネーション */
.pager {
  margin: 18px 0 0 0;
}

.paginationjs-pages > ul > li > a {
  padding: 4px 12px;
  color: white;
  background-color: #ffb6b9;
  border: 1.5px solid #fae3d9;
}

.paginationjs-pages > ul > li > a:hover,
.paginationjs-pages > ul > li.active > a,
.paginationjs-pages > ul > li.disabled > a {
  color: black;
  background-color: white;
}

.paginationjs-prev {
  margin: 0 8px 0 0;
}

.paginationjs-next {
  margin: 0 0 0 8px;
}

.paginationjs-page {
  margin: 0 2px;
}

.paginationjs-pages > ul {
  display: flex;
  align-items: baseline;
}

.paginationjs-pages > ul > li.paginationjs-ellipsis.disabled > a {
  border: none;
  color: black;
  margin: 0 4px;
  padding: 0;
}

/*----------------------------------------------------*/
/* ミッション画面 */
/*----------------------------------------------------*/
.mission_page {
  height: calc(100% - var(--title-size) - var(--footer-size-mini));
  overflow: auto;
  margin: 0;
  text-align: left;
  font-size: 1.2rem;
  background-color: #EEFFFF;
  padding: 0 10px;
}

ul.mission_info {
  padding: 0 0 0 2px;
  list-style: none;
}

.list {
  line-height: 1;
  position: relative;
  padding: 7px 0 15px 0;
}

.list .cleared,
.list .reward_button {
  margin: 0;
  font-size: 1rem;
  position: absolute;
  right: 5px;
  /* 10px から 5px に変更 */
  top: 65%;
  transform: translateY(-50%);
  cursor: pointer;
}

.list .cleared {
  color: #5ab4bd;
  width: auto;
}

.list .reward_button {
  width: 100px;
}

.list .reward_button form button {
  width: 100px;
  height: 30px;
  font-weight: bold;
  padding: 0.25em 0.5em;
  color: var(--text-color);
  background: var(--white);
  border: 2px solid var(--secondary-color);
  cursor: pointer;
  margin: 0;
  position: relative;
  left: 10px;
  /* margin を追加して余白を削除 */
}

.list span.content {
  font-size: 1rem;
  font-weight: bold;
  color: #000000;
  display: block;
}

.mission_subtitle {
  display: block;
  font-size: 0.9rem;
  color: #555;
  font-weight: bold;
  margin: -12px -12px 5px;
  padding: 8px 15px;
  line-height: 1.2;
  background: linear-gradient(135deg, #e8f4f8 0%, #d1ebf0 100%);
  border: 2px solid #8ac6d1;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(138, 198, 209, 0.2);
}

.mission_rank {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin: 3px 0;
  font-style: italic;
}

/*---------------------------------------------------------------------------------*/
/* モーダルウィンドウ */
/*---------------------------------------------------------------------------------*/
/* モーダルウィンドウを出すボタン */
ul.modal_footer {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

ul.modal_footer li:nth-of-type(1) {
  flex-grow: 1;
  width: 100%;
  box-sizing: border-box;
}

.footer_modal_button {
  position: relative;
  display: table;
  height: 30px;
  width: 100%;
  padding: 1px;
  z-index: 2;
  color: var(--white);
  font: inherit;
  background-color: var(--text-color);
  cursor: pointer;
}

.modal {
  text-decoration: none;
  display: table-cell;
  color: var(--white);
  width: 100%;
  z-index: 4;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
}

.modal_button {
  position: relative;
  display: table;
  height: 25px;
  width: 50px;
  margin: 1px 1px 1px 15px;
  color: var(--white);
  background: var(--primary-color);
  border: 2px solid var(--white);
  z-index: 2;
}

.modal_login_button,
.modal_login_button_white {
  color: #000000 ;
  position: relative;
  display: table;
  width: 300px;
  text-align: center;
  padding: 1px;
  z-index: 2;
  color: var(--white);
  border: 1px solid #003399;
  border-radius: var(--border-radius);
  padding: 5px;
  margin: 20px auto;
  font-size: 1.2rem;
}

.modal_login_button {
  background-color: #668ad8;
}

.modal_login_button_white {
  background-color: #b6c3c6;
}

.modal_2 {
  text-decoration: none;
}


/* モーダルウィンドウの各種設定 */
#modal-win {
  width: 100%;
  position: absolute;
}

#modal-win-inner {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
  position: relative;
  z-index: 101;
  border-radius: 10px;
}

#modal-win-inner > * {
  border-radius: 10px;
}

#modal-bg {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  cursor: pointer;
}

/* モーダルウィンドウの内容 */
#explanation1, #explanation2, #explanation3, #explanation4, #explanation5,
#explanation6, #explanation7, #explanation8, #explanation9, #explanation10,
#explanation11, #explanation12, #explanation13, #explanation14, #explanation15,
#explanation16, #menu1, #menu2 {
  display: none;
  background-color: var(--primary-color);
  padding: 10px 0;
  width: 100%;
  max-width: 500px;
}

#explanation1 ul, #explanation2 ul, #explanation3 ul, #explanation4 ul,
#explanation5 ul, #explanation6 ul, #explanation7 ul, #explanation8 ul,
#explanation9 ul, #explanation10 ul, #explanation11 ul, #explanation12 ul,
#explanation13 ul, #explanation14 ul, #explanation15 ul, #explanation16 ul,
#menu1 ul, #menu2 ul {
  width: 100%;
  max-width: 500px;
}

#explanation1 img, #explanation2 img, #explanation3 img, #explanation4 img,
#explanation5 img, #explanation6 img, #explanation7 img, #explanation8 img,
#explanation9 img, #explanation10 img, #explanation11 img, #explanation12 img,
#explanation13 img, #explanation14 img, #explanation15 img, #explanation16 img,
#menu1 img, #menu2 img {
  width: 100%;
  right: 0;
}

ul.modal-contents {
  display: flex;
  color: var(--white);
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  text-align: center;
}

ul.modal-contents li:nth-of-type(1),
ul.modal-contents li:nth-of-type(2) {
  flex-grow: 1;
  width: 100%;
  box-sizing: border-box;
}

ul.modal-move-button {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  text-align: center;
}

ul.modal-move-button li:nth-of-type(1),
ul.modal-move-button li:nth-of-type(2) {
  flex-grow: 1;
  width: 50%;
  box-sizing: border-box;
}

ul.modal-move-button2 li:nth-of-type(3) {
  flex-grow: 1;
  box-sizing: border-box;
}

ul.modal-move-button p {
  margin: 0;
  height: 30px;
  width: 98%;
  z-index: 2;
  color: var(--text-color);
  font: inherit;
  background-color: var(--white);
  border: 1.5px solid var(--primary-color);
  cursor: pointer;
}

ul.modal-move-button2 p {
  margin: 0;
  cursor: pointer;
  text-align: center;
}

ul.modal-move-button p a {
  color: var(--text-color);
  display: block;
}

/*---------------------------------------------------------------------------*/
/* サイドバー */
/*---------------------------------------------------------------------------*/
.btn_menu {
  display: inline-block;
  position: fixed;
  top: 5px;
  right: 5px;
  margin: 0;
  width: 80px;
  text-decoration: none;
  background: #af1313;
  color: var(--white);
  border: 2px solid var(--white);
  border-bottom: solid 2px var(--white);
  border-radius: 2px;
  z-index: 9000;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.btn_menu:hover {
  background: #c13e3e;
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.btn-menu:active {
  transform: translateY(4px);
  border-bottom: none;
}

.sidebar {
  position: fixed;
  font-size: 18px;
  color: var(--text-color);
  z-index: 99;
  overflow-y: scroll;
}

.sidebar.right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 270px;
  background: #F0F8FF;
  opacity: 95%;
}

/* サイドバーの中身 */
ul.sidebar_userinfo {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: #ed6472;
  border-bottom: 1px solid #9f1010;
}

ul.sidebar_userinfo li a {
  color: var(--text-color);
}

ul.sidebar_userinfo li .sidebar_score {
  font-weight: normal;
  display: flex;
}

li.li_side {
  display: flex;
}

/* サイドバーのメニュー項目 */
ul.sidebar_menu {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}

ul.sidebar_menu li {
  height: max-content;
  float: left;
  width: 3000px;
  margin: 0;
  padding: 0;
  border-top: 1px solid #9e1414;
  background: #e7a6b5;
  border-bottom: 1px solid #b11a24;
  font-weight: bold;
}

ul.sidebar_menu li a {
  margin: 2px 0 2px 10px;
  font-size: 15px;
  font-weight: bold;
  color: white;
  display: block;
  width: 100%;
}

ul.sidebar_menu li a.nowthis {
  border-bottom: 5px solid #5ab4bd !important;
}
/* サイドバーテキスト・サブメニュー */
ul.sidebar_text,
ul.sidebar_sub_menu {
  margin: 5px 0 15px 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}

ul.sidebar_text {
  margin: 0;
}

ul.sidebar_text li {
  font-weight: bold;
  float: left;
  margin: 5px 0 0;
  padding: 0;
}

ul.sidebar_text li a {
  font-size: 18px;
  font-weight: bold;
  color: var(--text-color);
  width: 30px;
}

ul.sidebar_sub_menu {
  width: 270px;
}

ul.sidebar_sub_menu li {
  height: max-content;
  width: 270px;
  float: left;
  margin: 10px 0 0;
  padding: 0;
  border-bottom: 1px solid #00BFFF;
}

ul.sidebar_sub_menu li a {
  font-size: 15px;
  font-weight: bold;
  color: var(--text-color);
  display: block;
  width: 100%;
}

ul.sidebar_text li a.nowthis,
ul.sidebar_sub_menu li a.nowthis {
  border-bottom: 3px solid #5ab4bd !important;
}

ul.sidebar_sub_menu br {
  display: block;
  content: "";
  margin: 0;
}

/*************
/* 学習コンテンツ - 最適化版
*************/
#learn.main {
  float: right;
  width: 680px;
  padding: 15px 0 0 0;
}

/* top.phpページ専用の画像サイズ調整 */
body.top-page section.content img {
  max-width: 350px !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  position: relative;
  right: 10px;
}

section.content article {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ebebeb;
  overflow: hidden;
}

* html section.content article {
  height: 1%;
}

section.content p {
  margin-bottom: 5px;
}

h3.heading {
  font-weight: bold;
  padding: 0 10px;
  line-height: 36px;
  color: var(--text-color);
  background: #fff0da;
}

section.content img {
  max-width: 100%;
  height: auto;
}

.alignleft {
  float: left;
  clear: left;
  margin: 3px 10px 10px 0;
}

.alignright {
  float: right;
  clear: right;
  margin: 3px 0 10px 10px;
}

.search_button {
  margin: 3px 0 0 auto;
  width: 100px;
  font-size: 1rem;
  float: left;
  position: absolute;
  right: 10px;
  cursor: pointer;
}

.search_button form button {
  margin: 0 0 0 auto;
  width: 100px;
  height: 30px;
  font-weight: bold;
  padding: 0.25em 0.5em;
  right: 0;
  color: var(--text-color);
  background: var(--white);
  border: 2px solid var(--secondary-color);
  cursor: pointer;
}

#learn.wrapper {
  margin: 0 auto;
  padding: 0 1%;
  width: 98%;
  position: relative;
  background: var(--white);
}

.learn.inner {
  margin: 0 auto;
  width: 100%;
}

/* ページネーション（学習用） */
ul.pageNav01 {
  margin: 0 0 10px;
  padding: 10px 10px 5px;
  background: #fff0da;
  text-align: center;
}

ul.pageNav01 li {
  display: inline;
  margin: 0 2px;
  padding: 0;
}

ul.pageNav01 li span {
  display: inline-block;
  margin-bottom: 5px;
  padding: 1px 8px;
  background: #f2a64b;
  border: 1px solid #aaa;
  text-decoration: none;
  vertical-align: middle;
}

ul.pageNav01 li a {
  display: inline-block;
  margin-bottom: 5px;
  padding: 1px 8px;
  background: var(--white);
  border: 1px solid #aaa;
  text-decoration: none;
  vertical-align: middle;
  font-size: 100%;
  color: var(--text-color);
}

ul.pageNav01 li a:hover {
  background: #eeeff7;
  border-color: #00f;
}

/* サイドバー（学習用） */
#learnbar ul {
  padding: 10px;
}

#learnbar li {
  margin-bottom: 10px;
  padding-bottom: 10px;
  list-style: none;
  border-bottom: 1px dashed #ebebeb;
}

#learnbar li:last-child {
  border: 0;
  margin-bottom: 0;
}

#learnbar li a {
  color: #333;
  display: block;
}

#learnbar li a:hover {
  color: blue;
}

#learnbar ul.list li {
  clear: both;
  margin-bottom: 5px;
  padding: 5px 0;
  overflow: hidden;
  border: 0;
}

address {
  clear: both;
  padding: 3px;
  text-align: center;
  font-style: normal;
  font-size: 12px;
  color: #5f3700;
  /*background:#dbdbdb;*/
}

h3.source {
  font-weight: bold;
  padding: 0 5px;
  line-height: 24px;
  color: var(--text-color);
  background: #fff0da;
  font-size: 1.0rem;
  border: 1.5px solid white;
}

.mission_subtitle {
  display: block;
  font-size: 0.9rem;
  color: #555;
  font-weight: bold;
  margin-bottom: 5px;
  margin-left: -12px;
  margin-right: -12px;
  padding: 8px 15px;
  line-height: 1.2;
  background: linear-gradient(135deg, #e8f4f8 0%, #d1ebf0 100%);
  border: 2px solid #8ac6d1;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(138, 198, 209, 0.2);
}

h3.source {
  font-weight: bold;
  padding: 0 5px;
  line-height: 24px;
  color: var(--text-color);
  background: #fff0da;
  font-size: 1.0rem;
  border: 1.5px solid white;
}

.mission_subtitle {
  display: block;
  font-size: 0.9rem;
  color: #555;
  font-weight: bold;
  margin-bottom: 5px;
  margin-left: -12px;
  margin-right: -12px;
  padding: 8px 15px;
  line-height: 1.2;
  background: linear-gradient(135deg, #e8f4f8 0%, #d1ebf0 100%);
  border: 2px solid #8ac6d1;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(138, 198, 209, 0.2);
}

.logout_section {
  text-align: center;
  margin: 30px 0 20px 0;
  padding: 20px;
}

.logout_button {
  display: inline-block;
  padding: 8px 18px;
  background: var(--primary-color);
  color: var(--white) !important;
  text-decoration: none !important;
  border-radius: var(--border-radius);
  font-weight: bold;
  font-size: 1.1rem;
  transition: background-color 0.3s;
  border: 2px solid var(--primary-color);
}

.logout_button:hover {
  background: #c13e3e;
  border-color: #c13e3e;
}

/* 距離表示要素（訪問ボタンを含む）を最前面に */
#distanceDisplay {
  z-index: 10000 !important;
}

/* アンケートボタンのz-indexを下げる */
.btn_menu {
  display: inline-block;
  position: fixed;
  top: 5px;
  right: 5px;
  margin: 0;
  width: 80px;
  text-decoration: none;
  background: #af1313;
  color: var(--white);
  border: 2px solid var(--white);
  border-bottom: solid 2px var(--white);
  border-radius: 2px;
  z-index: 9000;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}