/*
 * サイト全体に適用される基本スタイル
 */
body {
  /* Google Fontを適用 */ /* フォントファミリーを指定 */
  font-family: 'M PLUS Rounded 1c', sans-serif; 
}

/*******************************************************************************
 * --- ノーマルテーマ --- 
 *******************************************************************************/
:root {
  /* ヘッダー */
  --header-color: #000000; /* 文字色定義 */
  --header-background-color: #f9f9f9; /* 背景色定義 */
  --header-border-color: #5f5f5f; /* 境界線色定義 */
  /* フッター */
  --footer-color: #000000; /* 文字色定義 */
  --footer-background-color: #ffe2e2; /* 背景色定義 */
  --footer-border-color: #578ef5; /* 境界線色定義 */
  /* コンテンツ */
  --contents-background-color-start: #e0c3fc; /* グラデーション開始色定義 */
  --contents-background-color-end: #8ec5fc; /* グラデーション終了色定義 */
  /* ハンバーガーメニュー */
  --menu-color: #000000; /* 文字色を定義 */
  --menu-background-color: #dbdbdb; /* 背景色定義 */
  --menu-border-color: #dbdbdb; /* 左線色定義 */
  --menu-item-divider-color: #3a3a3a; /* リストアイテム区切り線定義 */
  --menu-disabled-color: #999; /* 無効化された要素の文字色定義 */
  /* トップへ戻る */
  --scroll-top-background-color: #578ef5; /* 背景色定義 */
  --scroll-top-color: #ffffff; /* 文字色定義 */
  --fab-width:42px; /* ボタン幅定義 */
  --fab-height:42px; /* ボタン高さ定義 */
  --fab-bottom:65px; /* ボタン下からの位置定義 */
  --fab-right:10px; /* ボタン右からの位置定義 */
  /* QRコードモーダル */
  --qrmodal-color: #363636; /* 文字色定義 */
  --qrmodal-background-color: #f0f0f0; /* 背景色定義 */
  --qrmodal-background-image: url('/image/qr-code-b.png'); /* 背景画像定義 */
  --qrmodal-button-text-color: white; /* 文字色定義 */
  --qrmodal-button-background-color: #134cb6; /* 背景色定義 */

}

/*******************************************************************************
 * --- ダークテーマ --- 
 *******************************************************************************/
.theme-dark {
  --header-background-color: #1a1a1a; /* ヘッダー背景色を上書き */
  --header-border-color: #444; /* ヘッダー境界線色を上書き */
  --footer-background-color: #1a1a1a; /* フッター背景色を上書き */
  --footer-border-color: #444; /* フッター境界線色を上書き */
  --menu-background-color: #222; /* メニュー背景色を上書き */
  --button-background-color: #5a9bff; /* ボタン背景色を上書き */
  --button-text-color: #ffffff; /* ボタン文字色を上書き */
  --list-item-divider-color: #555; /* リスト区切り線色を上書き */
  --disabled-text-color: #777; /* 無効テキスト色を上書き */
  --gradient-start-color: #434343; /* グラデーション開始色を上書き */
  --gradient-end-color: #000000; /* グラデーション終了色を上書き */
}


/****************************************************************************
 * --- ヘッダー ---
 ****************************************************************************/
/* ヘッダー全体 */
.header-base-color {
  color: var(--header-color); /* 文字色をCSS変数で指定 */
  background-color: var(--header-background-color); /* 背景色をCSS変数で指定 */
}
#header-area{
  border-bottom: 2px solid var(--header-border-color); /* 下境界線を指定 */
  height: 60px; /* 高さを指定 */ 
}
/* QRコード部 */
#qr-code-button {
  min-height: 44px;   /* 最小タップ領域を確保するために最小高さを指定 */
  display: flex; /* フレックスボックスレイアウトを適用 */
  align-items: center; /* 垂直方向中央揃え */
  padding-left: 12px; /* 左側の内側余白を指定 */
  font-size: small;  /* 文字サイズを少し小さく指定 */
  margin-left: 0px; /* 左側の外側余白を指定 */
}
/* タイトル部 */
#app-title {
  align-items: center; /* 垂直方向中央揃え */
  padding-left: 12px; /* 左側の内側余白を指定 */
  /* 文字サイズを少し大きくする */
  font-size:x-large ; /* 文字サイズを大きく指定 */
  display: flex; /* フレックスボックスレイアウトを適用 */
}
/* ハンバーガーメニュー部 */
/*
#hamburger-menu-button{}



/****************************************************************************
 * --- コンテンツ ---
 ****************************************************************************/
.page__content {
  color: var(--font-color); /* 文字色をCSS変数で指定 */
  /* iOSでのスクロールの挙動をスムーズにする */
  -webkit-overflow-scrolling: touch; /* スクロール慣性を有効化 */
}
/* メインコンテンツの背景グラデーション */
.page__background {
  background-image: linear-gradient(120deg, var(--contents-background-color-start), var(--contents-background-color-end)); /* 線形グラデーションの背景画像を指定 */
}



/****************************************************************************
 * --- フッター ---
 ****************************************************************************/
/* フッター全体 */
.footer-base-color{
  color: var(--footer-color); /* 文字色をCSS変数で指定 */
  background-color: var(--footer-background-color);  /* 背景色をCSS変数で指定 */
}
/* フッター全体 */
.bottom-bar{
  height: 65px;  /* 高さを指定 */ 
  border-top: 2px solid var(--footer-border-color);  /* 上の境界線をCSS変数で指定 */
  border-top-left-radius: 5px;  /* 左上の角を丸める */
  border-top-right-radius: 5px; /* 右上の角を丸める */
  display: flex;  /* フレックスボックスレイアウトを適用 */
  justify-content: center; /* 水平方向中央揃え */
  align-items: center; /* 垂直方向中央揃え */
  padding: 0; /* 内側余白をなくす */
}



/****************************************************************************
 * --- ハンバーガーメニュー ---
 ****************************************************************************/
ons-splitter-side {
  color: var(--menu-color); /* 文字色をCSS変数で指定 */
  background-color: var(--menu-background-color); /* 背景色をCSS変数で指定 */
  border-left: 1px solid var(--menu-border-color); /* 左境界線をCSS変数で指定 */
}
.list {
  color: var(--menu-color); /* 文字色をCSS変数で指定 */
  background-color: var(--menu-background-color); /* 背景色をCSS変数で指定 */
  border-left: 1px solid var(--menu-border-color); /* 左境界線をCSS変数で指定 */
}
.list-item {
  min-height: 44px;   /* 各メニューアイテムの最小高さを確保 */
  border-bottom: 1px solid var(--menu-item-divider-color); /* 下境界線をCSS変数で指定 */
  color: var(--menu-color); /* 文字色をCSS変数で指定 */
}
.list-item--disabled {
  color: var(--menu-disabled-color); /* 無効化されたアイテムの文字色をCSS変数で指定 */
}
/* 設定の子メニューのインデント */
.color-setting-item {
  padding-left: 2em;   /* 2文字分のインデントを指定 */
}



/****************************************************************************
 * --- バナー ---
 ****************************************************************************/
#footer-banner-image {
  width: 350px;  /* バナー画像の幅を固定 */
  height: 50px; /* バナー画像の高さを固定 */
  object-fit: cover;  /* 画像の表示方法を指定（アスペクト比を維持し、要素を完全に覆う） */
  transition: opacity 0.5s ease-in-out;  /* 透明度のアニメーション（変化の時間と速度）を指定 */
}



/****************************************************************************
 * --- QRモーダル ---
 ****************************************************************************/
.qrmodal-base-color {
  color: var(--qrmodal-color); /* 文字色をCSS変数で指定 */
  background-color: var(--qrmodal-background-color); /* 背景色をCSS変数で指定 */
}
.qrmodal-button-base-color{
  color:var(--qrmodal-button-text-color); /* 文字色をCSS変数で指定 */
  background-color:var(--qrmodal-button-background-color); /* 背景色をCSS変数で指定 */
}
.qrmodal-margin-top {
  margin-top: 20px;/* 上部の外側余白を指定 */
}
#qrmodal-content {
  width: 300px;  /* 幅を固定 */
  padding: 1rem; /* 内側余白を指定 */
  text-align: center; /* テキストを中央揃え */
}
#qrmodal-close {
  position: absolute; /* 絶対配置を指定 */
  top: 10px; /* 上からの位置を指定 */
  right: 10px; /* 右からの位置を指定 */
  opacity: 0.7; /* 透明度を指定 */
}
#qrmodal-title {
  /* タイトルのスタイル */
  font-weight: bold; /* 文字の太さを指定 */
  font-size: xx-large; /* 文字サイズを指定 */
  word-break: break-all; /* 単語の改行ルールを指定（どこでも改行） */
}
#qrmodal-image{
  margin-left: 50px; /* 左側の外側余白を指定 */
  background-size: cover; /* 背景画像のサイズを指定（要素を完全に覆う） */
  background-image: var(--qrmodal-background-image); /* 背景画像をCSS変数で指定 */
  width: 200px;  /* QR画像の幅を指定 */
  height: 200px; /* QR画像の高さを指定 */
}



/****************************************************************************
 * --- 共通機能・スタイル ---
 ****************************************************************************/
/* トップへ戻るボタンのスタイル */
ons-fab {
  transition: transform 3.0s ease-in-out; /* 変形アニメーション（時間と速度）を指定 */
}
#scroll-to-top{
  background-color: var(--scroll-top-background-color); /* 背景色をCSS変数で指定 */
  color: var(--scroll-top-color); /* 文字色をCSS変数で指定 */
  bottom:var(--fab-bottom); /* 下からの位置をCSS変数で指定 */
  right:var(--fab-right); /* 右からの位置をCSS変数で指定 */
}
/* 非表示時のスタイル */
ons-fab[disabled] {
  transform: scale(0); /* サイズを0にして非表示にする */
}
/* フェードアウト用クラス */
.fade-out {
  opacity: 0; /* 透明度を0（完全透明）にする */
  transition: 2s; /* アニメーションの時間を指定 */
}
/* フェードイン用クラス */
.fade-in {
  opacity: 1; /* 透明度を1（不透明）にする */
  transition: 2s; /* アニメーションの時間を指定 */
}