/* ---------- 共通？ ---------- */
a,
a:hover{
  text-decoration: none;
}
a:focus {
  outline: none;
}
.inner{
  display: block;
  text-align: center;
}

.title{
  font-size: 150%;
}

.item-title{
  margin-top: 5px;
  font-weight: bold;
  margin-bottom: 3px;
}

button.submit{
  width:50%;
  height: 45px;
  font-size: 110%;
  color: #fff;
  background-color: #00e600;
  border: 4px solid #00e600;
  border-radius: 5px;
  /* padding-right:138px;
  padding-left: 138px; */
  margin-bottom: 100px;
  margin-left: 30px;
  margin-right: 30px;
  outline: none;
}

.other-textbox{
  margin-top: 0px;
  width: 100%;
}

.short{
  width: 25%;
}

.middle{
  width: calc(50% - 3px);
}

.long{
  width: 100%;
}

figure img {
  max-width: 1000%;
}

/* ---------- ログイン画面 ---------- */
.login-form{
  width: 100%;
}
/* 「パスワードをお忘れの方はこちら」を表示 */
#passwordResetLink {
  display: none;
}

/* ---------- ページ上部遷移ボタン ---------- */
/*ボタンの領域*/
#re-top {
	position:absolute; /*画面に固定*/
	bottom:8%; /*画面下へ*/
	right:5%; /*画面右へ*/
	z-index:10; /*レイヤー順序を上に*/
	background-color:transparent; /*領域の背景色（透明）*/
}
/*丸ボタン*/
.re-topB {
	position:relative;
	display:block; 
	color: #fff; /*三角と文字色*/
	text-decoration:none;
	font-weight:bold;
	font-size:8px;
	width:40px;
	height:40px;
	text-align:center;
	line-height:12px;
	border-radius:20px;
	padding-top:20px;
  box-sizing:border-box;
  cursor: pointer;
}

/*三角部分*/
.re-topB:before {
	content:'\25B2';
	position:absolute;
	top:5px;
	left:0;
	width:100%;
	text-align:center;
	font-size:15px;
}

/* =========================================
   入力欄
========================================= */
/* 共通フォーム全体の外枠余白をリセット */
#CommonSelectForm > div.col-12 {
    padding: 0px 20px !important; 
}
/* すべての入力系（テキスト、セレクト、テキストエリア） */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea,
.form-control,
.login-form {
    border-radius: 5px !important;
    border: 1.5px solid var(--theme-input-border);
    transition: all 0.2s ease-in-out;
    outline: none;
    color: var(--theme-text-main);
    padding: 0.3rem;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
.form-control,
.login-form {
  height: 40px;
}
textarea {
  height: 80px;
}
input[type=checkbox].checkbox,
input[type=radio].raddio-button {
  border-color: var(--theme-main-color);
}
/* フォーカス時 */
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--theme-main-color) !important;
    background-color: var(--theme-main-color-thin) !important;
    box-shadow: 0 0 0 4px rgba(6, 186, 219, 0.2) !important;
    outline: none !important;
}
/* チェックボックス・ラジオボタンのフォーカス時の上書き
   （薄い背景色で上書きされてしまうのを防ぐ） */
input[type="checkbox"]:focus,
input[type="radio"]:focus {
    background-color: #FFFFFF !important;
}
input[type="checkbox"]:checked:focus {
    background-color: var(--theme-main-color) !important;
    border-color: var(--theme-main-color) !important;
}
input[type="radio"]:checked:focus {
    background-color: #FFFFFF !important; /* ラジオボタンの土台は白をキープ */
    border-color: var(--theme-main-color) !important;
}
input[type="radio"]:checked:focus:before {
    background-color: var(--theme-main-color) !important;
}
/* セレクトボックス（郵便番号・住所の調整） */
.select-zipaddress::after {
  margin-top: 24.5px !important;
}
/* jQuery UI Datepicker（カレンダー）の崩れ修正 */
/* 「年」と「月」を綺麗に1行に横並び中央揃えにする */
.ui-datepicker .ui-datepicker-title {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
}
/* カレンダー内のセレクトボックスが縦に潰れたり、横に広がりすぎるのを防ぐ */
.ui-datepicker .ui-datepicker-title select {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    padding: 2px 9px 2px 3px !important; /* 矢印のスペースを確保 */
    margin: 0 !important;
    font-size: 14px !important;
}

/* --- 編集不可状態 --- */
input[readonly],
textarea[readonly],
select:disabled,
select:has(option:disabled) {
  background-color: var(--theme-input-uneditable) !important;
}
input[readonly]:focus,
textarea[readonly]:focus,
select:disabled:focus,
select:has(option:disabled):focus {
  background-color: var(--theme-input-uneditable) !important;
}
input[readonly]:focus,
textarea[readonly]:focus,
select:disabled:focus,
select:has(option:disabled):focus,
input[type="radio"]:disabled:focus,
.radio-group:has(input[type="radio"]:disabled) input:focus,
.radio-group:has(input[type="radio"]:disabled) label:focus,
input[type="checkbox"]:disabled:focus,
input[type="checkbox"][onclick*="return false"]:focus {
  box-shadow: none !important;
  border-color: var(--theme-input-border) !important;
}
input[type=radio]:disabled, 
.radio-group:has(input[type="radio"]:disabled) input,
input[type=checkbox]:disabled,
input[type=checkbox][onclick*="return false"] {
  border-color: var(--theme-input-uneditable) !important;
}
input[type=radio]:disabled:checked:before, 
.radio-group:has(input[type="radio"]:disabled) input:checked:before,
input[type=checkbox]:disabled:checked,
input[type=checkbox][onclick*="return false"]:checked {
  background-color: var(--theme-input-uneditable) !important;
}

/* =========================================
   ボタン
========================================= */
/* ボタンの共通設定 */
.btn, 
button:not(.close):not(.navbar-toggler):not(.btn-img-delete), 
input[type="submit"], 
input[type="button"],
.point-menu-btn {
    transition: all 0.2s ease-out;
    cursor: pointer;
    position: relative;
    top: 0; /* 動きの基準点 */
}
/* 次に遷移するボタンに三角を付けるための準備 */
button:not(.close):not(.navbar-toggler):not(.btn-back):not(.btn-img-delete):not(.btn-filter-save) {
    padding-right: 13px !important; /* 右側に三角用のスペースを確保 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 右端の三角アイコン */
button:not(.close):not(.navbar-toggler):not(.btn-back):not(.btn-img-delete):not(.btn-filter):not(.btn-filter-save)::after {
    content: "\25B6"; /* 「▶」の文字化けしない安全な暗号 */
    position: absolute;
    right: 12px;          /* 右端からの距離 */
    font-size: 0.7em;     /* 三角の大きさ */
    top: 50%;
    transform: translateY(-50%); /* 垂直中央に配置 */
}
/* ホバー時（PCでマウスを乗せたとき） */
@media (hover: hover) {
    .btn:hover, 
    button:not(.close):not(.navbar-toggler):hover {
        filter: brightness(0.95); /* 少し暗くする */
        color: var(--theme-main-color);
    }
}
/* アクティブ時（ボタンを押し込んだとき） */
.btn:active, 
button:not(.close):not(.navbar-toggler):active {
    transform: translateY(1px); /* 1px押し込む（沈ませる） */
    filter: brightness(0.9);  /* もう少し暗くする */
}
/* 2つボタンが並ぶ場合の間隔調整 */
/* 「戻る（col-4）」と「登録（col-8）」が隣り合って2つ同時に存在する場合のみ適用 */
#formBtn > .col-4:has(.btn-back) + .col-8:has(#submit) {
    padding-left: 0px !important;
}

#formBtn > .col-4:has(.btn-back) {
    padding-right: 0px !important;
}

/* =========================================
   エラー
========================================= */
/* 入力欄　枠線 */
.form-group input.input-error-frame {
  border-color: var(--theme-error-color) !important;
}
/* エラーメッセージ */
.form-error-message {
  color: var(--theme-error-color) !important;
  padding-left: 0 !important;
  font-size: 100% !important;
  height: unset !important;
  margin-top: 3px !important;
}

/* =========================================
   各要素　色設定
========================================= */
/* 戻る・削除ボタン */
button.btn-back{
  background-color: var(--theme-btn-back);
  border: 4px solid var(--theme-btn-back);
}
button.btn-delete{
  background-color: var(--theme-btn-delete);
  border: 4px solid var(--theme-btn-delete);
}
/* 新規登録ボタン */
button.btn-signup{
  background-color: var(--theme-btn-signup);
  border: 4px solid var(--theme-btn-signup);
}
.signup-color {
  color: var(--theme-btn-signup);
}
.signup-bgcolor {
  background-color: var(--theme-btn-signup);
}
.signup-border {
  border-color: var(--theme-btn-signup);
}
.signup-fill{
  fill: var(--theme-btn-signup);
}

/* =========================================
   画面タイトル下の画像
========================================= */
img.title-img-article{  
  content: url("../image/pic/newspaper-1.svg");
}
img.title-img-calendar{  
  content: url("../image/pic/calendar-4.svg");
}
img.title-img-enquete{  
  content: url("../image/pic/questionnaire-1.svg");
}
img.title-img-document{  
  content: url("../image/pic/paper-2.svg");
}
img.title-img-contact{  
  content: url("../image/pic/mail-1.svg");
}
img.title-img-link{  
  content: url("../image/pic/door-1.svg");
}

/* =========================================
   絞り込み機能（ボタン＆モーダル）
========================================= */
/* --- 絞り込みボタン --- */
.btn-filter {
  color: var(--theme-main-color) !important;
}
.btn-filter::before {
  content: "";
  -webkit-text-fill-color: transparent !important; /* 共通の▼の文字だけを透明化して消す */
  background-image: url('../image/pic/icon-filter-unfiltered.svg');
}

/* 絞り込み済み状態のスタイル */
.btn-filter.filtered::before {
  background-image: url('../image/pic/icon-filter-filtered.svg');
}

/* --- モーダル --- */
/* 条件選択ボタン（label） */
.btn-outline-filter {
  border-radius: 20px !important;
  border: 1px solid var(--theme-main-color) !important;
  color: var(--theme-main-color) !important;
}
/* 条件選択済み */
.btn-outline-filter:has(input[type="checkbox"]:checked) {
  background-color: var(--theme-main-color) !important;
}
/* この条件を保存ボタン */
.btn-filter-save {
  background-color: var(--theme-main-color-thin);
  color: var(--theme-main-color) !important;
}
.btn-filter-save::before {
  content: "" !important;
  background-image: url('../image/pic/icon-star.svg') !important;
}
/* 絞り込むボタン */
.btn-filter-submit {
  background-color: var(--theme-main-color) !important;
}

/* =========================================
   保有ポイント
========================================= */
/* 表示エリア */
.point-display-container {
  border-radius: 10px;
}

/* =========================================
   ポイントホーム画面
========================================= */
/* --- 保有ポイント表示エリア --- */
.point-main-card {
  border: 5px solid var(--theme-main-color) !important;
}
.point-main-card .point-number,
.point-main-card .point-unit {
  color: var(--theme-main-color) !important;
}
.point-main-card .point-number {
  /* グラデーション */
  background-image: linear-gradient(180deg, var(--theme-main-color) 50%, #0073C6 100%) !important; /* 上から下へのグラデーション */
}

.login-bonus-item {
  border: 5px solid var(--theme-main-color-thin) !important;
  color: var(--theme-main-color-thin) !important;
}
.login-bonus-dot::before,
.login-bonus-dot::after {
  background-color: var(--theme-main-color-thin) !important;
}
/* 達成済みデザイン */
.login-bonus-item.active {
  color: #FFFFFF !important;
  background-color: var(--theme-main-color) !important;
  border-color: var(--theme-main-color) !important;
}
.login-bonus-dot.active::before,
.login-bonus-dot.active::after {
  background-color: var(--theme-main-color) !important;
}
.bonus-note-line::before,
.bonus-note-line::after {
  background-color: var(--theme-main-color) !important;
}
.bonus-note-text {
  color: var(--theme-main-color) !important;
}
/* 下部ボタン */
.bonus-footer-btn {
  background-color: var(--theme-main-color-thin) !important;
  color: var(--theme-main-color) !important;
}
.bonus-footer-btn:hover {
  color: var(--theme-main-color) !important;
}

/* =========================================
   スキャン画面
========================================= */
/* カメラ映像のコンテナ */
.qr-video-container {
    /* app-frameの枠の仕様（枠の高さ、上下ボーダー合計、ヘッダーフッターの高さ から高さを計算 */
    height: calc(min(var(--pc-layout-height), var(--pc-layout-max-height)) - calc(var(--pc-layout-border-width) * 2) - var(--header-height)) !important;
}
@media screen and (max-width: 414px) {
  .qr-video-container {
    height: calc(100svh - var(--header-height)) !important;
  }
}
/* スキャン枠をカメラ映像の中央に配置 */
.scan-region-overlay {
    border: 8px solid var(--theme-main-color) !important;
    /* スマホ画面に合わせて、中央に正方形の枠を作る */
}

/* =========================================
   スキャン完了画面
========================================= */
.complete-message.complete-message--point { /* 特典系の完了画面でも利用 */
  /* 画面の上下中央に配置 */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  /* app-frameの枠の仕様（枠の高さ、上下ボーダー合計、ヘッダーフッターの高さ、見た目調整分 から高さを計算 */
  min-height: calc(min(var(--pc-layout-height), var(--pc-layout-max-height)) - calc(var(--pc-layout-border-width) * 2) - (var(--header-height) + var(--footer-height)) - 30px);
}
@media screen and (max-width: 414px) {
  .complete-message.complete-message--point {
    min-height: calc(100svh - calc(var(--header-height) + var(--content-padding-top) + var(--content-padding-bottom)) - 5px);
  }
}
/* ポイント数 */
.complete-message.complete-message--point .point-number {
  font-size: 3.38rem;
}
.complete-message.complete-message--point .point-unit {
  font-size: 2.25rem;
}
/* メッセージ（スキャン完了画面以外でも利用） */
.complete-message.complete-message--point .complete-message-text {
  font-weight: normal;
  font-size: 1.125rem;
  word-break: break-all;
}
/* 完了アイコン表示 */
.complete-message.complete-message--point::before {
  content: "";
  display: block;
  width: 70px;  
  height: 70px;
  margin-bottom: 20px;
  background-image: url('../image/pic/icon-check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* =========================================
   スポットメニュー・特典メニュー画面
========================================= */
/* ボタン アイコン */
.point-menu-btn::after {
  content: "" !important;
  display: block;
  width: 3.45rem;
  height: 3.45rem;
  margin-top: 7px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.point-menu-button-grid--spot .point-menu-btn--spot-list::after {
  background-image: url('../image/pic/icon-point.svg') !important;
}
.point-menu-button-grid--spot .point-menu-btn--spot-history::after {
  background-image: url('../image/pic/icon-book.svg') !important;
}
.point-menu-button-grid--reward .point-menu-btn--reward-list::after {
  background-image: url('../image/pic/icon-present.svg') !important;
}
.point-menu-button-grid--reward .point-menu-btn--reward-history::after {
  background-image: url('../image/pic/icon-ticket.svg') !important;
}
/* ボタン 色 */
.point-menu-button-grid--spot .point-menu-btn { /* スポット */
  background-color: var(--theme-main-color) !important;
}
.point-menu-button-grid--reward .point-menu-btn { /* 特典 */
  background-color: var(--theme-accent-color) !important;
}
/* 文言変更 */
.point-menu-button-grid--reward .point-menu-btn-subtext ruby {
  display: none;
}
.point-menu-button-grid--reward .point-menu-btn-subtext::before {
  content: "クーポン";
}

/* =========================================================================
   記事のデザイン上書き
   ※当テンプレートではスポット・特典系画面 全体・一覧と記事を同じデザインとする
========================================================================= */
.main-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.content-body-area:not(:has(.qr-video-container)) { /* QRコード読み取り画面以外の余白設定 */
  padding-right: 15px !important;
  padding-left: 15px !important;
}

/* リストアイテム */
.top-topics-list {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 30px 10px 15px;
  margin-bottom: 10px;
  background-color: #FFFFFF;
  border: none !important;
  border-radius: 10px;
  color: inherit !important;
  overflow: hidden; /* 左側画像エリアのはみ出しをカット（角丸からはみ出すのを防ぐ） */
  min-height: 90px;
  text-decoration: none !important;
}

.top-topics-list:last-child {
  margin-bottom: 0;
}
/* アクション矢印 */
.top-topics-list::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border-top: 2.5px solid var(--theme-text-sub);
  border-right: 2.5px solid var(--theme-text-sub);
  transform: translateY(-50%) rotate(45deg);
}
/* ホバー時（PCでマウスを乗せたとき） */
@media (hover: hover) {
  .top-topics-list:hover,
  .top-topics-list:focus {
    color: var(--theme-text-main);
    filter: brightness(0.97); /* 少し暗くする */
    outline: none;
    text-decoration: none;
  }
}
/* アクティブ */
.top-topics-list:active {
  transform: translateY(1px); /* 1px押し込む（沈ませる） */
  filter: brightness(0.92);  /* もう少し暗くする */
}
/* 画像表示エリア */
.top-topics-list-l {
  flex-shrink: 0;
  align-self: stretch; /* 上下いっぱいに広げる */
  margin-top: -10px;   /* 親のpaddingを相殺 */
  margin-bottom: -10px;/* 親のpaddingを相殺 */
  margin-left: -15px;  /* 親のpaddingを相殺 */
  margin-right: 13px;  /* 中央テキストとの間隔 */
  width: 90px;
  background-color: var(--img-area-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
/* エリア内の画像 */
.top-topics-list-l img {
  width: 100% !important;
  height: 100% !important;
  max-height: 90px;
  object-fit: cover;       /* 比率維持で満たす */
  object-position: center; /* 画像の中心を基準にトリミング */
  box-sizing: border-box;
  border-radius: 0;
}
.top-topics-list-l [src=""] {
  opacity: 0;
}

.top-topics-list-l:has(img[src=""]), 
.top-topics-list-l:has(img:not([src])) {
  background-image: url('../image/pic/no_image.png')!important;
  background-size: cover!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
}
/* コンテンツエリア */
.top-topics-list-r {
  flex-grow: 1; /* 限界まで広く場所を確保する */
  min-width: 0; /* 文字が長すぎるときは素直に縮むように制限を解除し、「…」を表示させる */
  height: stretch;
}

/* タイトル */
.top-topics-title {
  margin-top: 5px;
  word-break: break-all;
}
.top-topics-list-r .top-topics-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: unset;
}
.top-topics-title {
  font-weight: bold;
}

/* 説明 */
.top-topics-text {
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===========================================
   ページャー（活性：水色 / 非活性：背景なし）
=========================================== */
.contents-pagination .page-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-shrink: 0 !important; 
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    margin: 0 2px !important;
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
    position: relative !important;
    font-size: 13.5px !important;
}

/* ボタンの中のリンク */
.contents-pagination .page-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--theme-text-sub) !important;
    font-size: 15.9px;
    font-weight: 600;
}

/* 現在位置以外のボタン */
.contents-pagination .page-item:not(.current):not(.disabled):not(.omitted) {
    background-color: var(--theme-main-color-thin) !important; 
}
.contents-pagination .page-item:not(.current):not(.disabled):not(.omitted) .page-link {
    color: var(--theme-main-color) !important; 
}

/* 省略記号（…）の背景は無し */
.contents-pagination .page-item.omitted {
    background-color: transparent !important;
}

/* 矢印 */
.contents-pagination #previous::before,
.contents-pagination #next::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    background: transparent !important;
    border-left: 2px solid var(--theme-text-sub) !important; 
    border-bottom: 2px solid var(--theme-text-sub) !important; 
}
/* 矢印「前へ（＜）」の中心位置と向き */
.contents-pagination #previous::before {
    left: 50% !important;
    transform: translate(-35%, -50%) rotate(45deg) !important;
}
/* 矢印「次へ（＞）」の中心位置と向き */
.contents-pagination #next::before {
    left: 50% !important;
    transform: translate(-65%, -50%) rotate(-135deg) !important;
}

/* 活性状態の矢印 */
.contents-pagination #previous:not(.disabled),
.contents-pagination #next:not(.disabled) {
    background-color: var(--theme-main-color-thin) !important;
}
.contents-pagination #previous:not(.disabled)::before,
.contents-pagination #next:not(.disabled)::before {
    border-left-color: var(--theme-main-color) !important;
    border-bottom-color: var(--theme-main-color) !important;
}

.contents-pagination .page-item.disabled,
.topics-page-item.current {
    background-color: transparent !important;
}
.topics-page-item.current .page-link {
    color: var(--theme-text-sub) !important;
}
.contents-pagination .page-item.disabled {
    opacity: 0.35 !important;
}
@media (max-width: 767px) {
    .topics-pager {
        margin: 20px 0 0 0 !important;
    }
}
/* =========================================
   記事詳細画面
========================================= */
.detail-content-file {
  padding: 15px 20px !important;
}
#ArticleDetail a {
  color: var(--theme-main-color) !important;
}

/* タグ全体を包んでいる親div特定 */
#topics-detail-contents .ml-3:has(.topics-living) {
    width: 100% !important;
    overflow: hidden !important;
    white-space: unset;
    text-overflow: ellipsis !important;
}
/* =========================================
   スポット・特典系画面 全体・一覧
========================================= */
.point-list-item {
  border-radius: 10px;
}
/* ホバー時（PCでマウスを乗せたとき） */
@media (hover: hover) {
  a.point-list-item:hover,
  a.point-list-item:focus {
    color: var(--theme-text-main) !important;
  }
}
/* アクション矢印 */
a.point-list-item::after {
  border-top: 2.5px solid var(--theme-text-sub) !important;
  border-right: 2.5px solid var(--theme-text-sub) !important;
}
/* ホバー時（PCでマウスを乗せたとき） */
@media (hover: hover) {
  a.point-list-item:hover,
  a.point-list-item:focus {
    color: var(--theme-text-main) !important;
  }
}
/* 画像表示エリア */
.point-item-left {
  margin-top: -10px;   /* 親のpaddingを相殺 */
  margin-bottom: -10px;/* 親のpaddingを相殺 */
  margin-left: -15px;  /* 親のpaddingを相殺 */
  background-color: var(--img-area-bg) !important;
}
.point-item-left:has(img[src=""]), 
.point-item-left:has(img:not([src])) {
  background-image: url('../image/pic/no_image.png') !important;
}
.point-value-get,
.reward-exchange-period {
  color: var(--theme-main-color) !important;
}
.point-value-use {
  color: var(--theme-accent-color) !important;
}

/* =========================================
   特典系画面 共通
========================================= */
/* ボタン */
.btn.btn-reward {
  background-color: var(--theme-accent-color) !important;
  border-color: var(--theme-accent-color) !important;
}
.complete-message .btn {
  margin-top: 25px;
}

/* =========================================
   特典詳細画面
========================================= */
#RewardDetailContentsArea .detail-content-info {
  margin-top: 8px !important;
}
#RewardDetailContentsArea .point-value-use {
  font-size: 0.94rem;
}
#RewardDetail #formBtn .col-4, 
#RewardUseConfirm #formBtn .col-4 {
  text-align: left !important;
}
#RewardDetail #formBtn .btn-back,
#RewardUseConfirm #formBtn .btn-back {
  width: 100%;
}
#RewardDetail #formBtn .col-8, 
#RewardUseConfirm #formBtn .col-8 {
  text-align: right !important;
}
#RewardDetail #formBtn #submit, 
#RewardUseConfirm #formBtn #submit {
  width: 90%;
}

/* =========================================
   特典交換完了画面
========================================= */
/* メッセージ */
.complete-message.complete-message--point.complete-message--reward .complete-message-text {
  margin: 15px 0;
}

/* =========================================
   保有特典一覧画面
========================================= */
.reward-nav-tabs {
  border-bottom-color: var(--theme-text-main) !important;
}
.reward-nav-tabs .nav-link {
  font-size: 0.875rem;
  color: var(--theme-text-main) !important;
  transition: all 0.2s ease-in-out;
}
/* ホバー時・選択時のスタイル調整 */
.reward-nav-tabs .nav-link:not(.active):hover {
  border-bottom-color: var(--theme-text-main) !important;
  background-color: var(--theme-tab-hover-bg) !important;
}
.reward-nav-tabs .nav-link.active {
  color: var(--theme-main-color) !important;
  border-bottom-color: var(--theme-main-color) !important;
}
/* 利用済み */
.point-list-group--reward-used .topics-category-wrapper,
.point-list-group--reward-used .topics-category-wrapper .topics-living {
  overflow: unset;
  white-space: unset;
  text-overflow: unset;
  user-select: unset;
  -webkit-user-select: unset;
  pointer-events: unset;
}
.point-list-group--reward-used .topics-category-wrapper .topics-living {
  max-width: 100% !important;
  margin-bottom: 3px;
  word-break: break-all;
}

/* =========================================
   特典利用画面
========================================= */
/* タブ */
.staff-presentation-message {
  position: sticky;
  top: var(--header-height);
  left: 0;
  width: 100%;
  margin-top: calc(var(--content-padding-top) * -1);
  margin-bottom: 20px;
  background-color: var(--theme-notice-bg) !important;
  color: var(--theme-notice-color) !important;
  font-size: 1.0rem !important;
  z-index: 990;
  box-shadow: 0 0 0 50px var(--theme-notice-bg); /* 左右の隙間を背景色で塗りつぶす */
  clip-path: inset(0 -50px); /* 塗りつぶした影の、上下だけをカットして左右だけ残す */
}
/* --- スタッフ提示モーダル --- */
.staff-modal-title {
  color: var(--theme-notice-color) !important;
}

/* =========================================
   特典利用完了画面
========================================= */
/* メッセージ */
.complete-message.complete-message--point.complete-message--reward_use .complete-message-text {
  margin: 5px 0;
}

/* =========================================
   ログイン履歴画面
========================================= */
.calendar-grid .calendar-cell {
    min-height: 65px;
}
.calendar-header {
    background-color: var(--theme-main-color) !important; 
    color: #FFFFFF !important; 
}
.weekday-header > div,
.calendar-grid .calendar-cell {
    border-color: var(--theme-list-separate-line) !important;
}
.calendar-header .calendar-header-dot {
    display: inline-flex !important;
}
.month-text-number {
    font-family: 'Bakbak One', sans-serif;
}
.month-text {
    font-family: 'Noto Serif', sans-serif;
}
.saturday-text {
    color: var(--theme-main-color) !important;
}
.sunday-text {
    color: var(--theme-accent-color) !important;
}
.stamp-wrap {
    background-image: url('../image/pic/login_stamp.svg');
}
.stamp-wrap::before {
    content: none !important;
}
/* キャラクター画像 */
.character-container {
    display: block !important;
    position: relative;
    overflow: hidden;
    min-height: 80px; 
    clear: both;
    container-type: inline-size; 
    margin-left: calc(-15px - 1rem);
    margin-right: calc(-15px - 1rem);
}
.running-char {
    position: absolute;
    top: 5px;
    left: 0;
    width: 55px;
    height: 70px;
    z-index: 100;
    animation: righttoleft 8s step-start infinite;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../image/pic/pointhome-main-2.png');
}
@keyframes righttoleft {
    0%, 14% { transform: translateX(calc(93cqw - 51.1px)) rotate(15deg); opacity: 1; }
    16%, 30% { transform: translateX(calc(69.75cqw - 38.325px)) rotate(-15deg); }
    32%, 46% { transform: translateX(calc(46.5cqw - 25.55px)) rotate(15deg); }
    48%, 62% { transform: translateX(calc(23.25cqw - 12.775px)) rotate(-15deg); }
    64%, 78% { transform: translateX(0) rotate(15deg); opacity: 1; }
    78.1% { transform: translateX(0) rotate(15deg); opacity: 0; }
    99.9%, 100% { transform: translateX(calc(93cqw - 51.1px)) rotate(15deg); opacity: 0; }
}

/* =========================================
   アンケート画面
========================================= */
.questionnaire-tittle {
    font-size: 110% !important;
}
/* 説明 */
.ck-content p {
  font-weight:normal !important;
  margin-bottom: 0 !important;
}
#CommonSelectForm input[type=checkbox], input[type=radio] {
  margin: .2rem .4rem .4rem 0 !important;
}
button.image_browse_button::after {
  display: none !important;
  content: none !important;
}
[id^="feature_enquete"] .modal-footer button::after {
  display: none !important;
  content: none !important;
}

/* =========================================
   会員情報変更画面
========================================= */
/* 「氏名」タイトル・入力欄を非表示 */
div[id^="feature_mypage/profile_"] div:has(> .form_itemtype_cd__name) {
    display: none !important;
}
/* 確認画面の「氏名」を非表示 */
.confirm div[id^="feature_mypage/profile_"] .form_itemtype_cd__name,
.confirm div[id^="feature_mypage/profile_"] .questionnaire-contents:has(+ .form_itemtype_cd__name) {
    display: none !important;
}

/* =========================================
   パスワード変更画面
========================================= */
#mailchange .mailchange-explain,
#mailchange .mailchange-mail__title,
#mailchange .mailchange-mail__input {
  display: none !important;
}
#mailchange input.pw-change {
  top: -40px !important;
}
#mailchange .svg-pw-change,
#mailchange .form-login-password + .svg-new-pw-change {
  bottom: 40px;
}
#mailchange .mailchange-password-text {
  margin-top: -30px !important;
  margin-left: 0 !important;
}
#mailchange .form-group,
#mailchange .form-error-message {
  margin: 0 !important;
}
#mailchange .mailchange-current-pwd__input .form-error-message {
  margin-top: -30px !important;
}

/* =========================================
   パスワード変更確認画面
========================================= */
#mailchangeConfirm .mailchangeConfirm-new-pwd {
  padding: 0 !important;
}
#mailchangeConfirm .mailchangeConfirm-new-pwd__title,
#mailchangeConfirm .mailchangeConfirm-new-pwd__input {
  margin: 0 !important;
  padding: 8px !important;
}
/* ボタンエリア */
#mailchangeConfirm .mailchangeConfirm-btn-area {
  display: flex;
  flex-wrap: nowrap;
  margin: 15px 20px 0 20px;
}
#mailchangeConfirm .mailchangeConfirm-btn-area > div {
  padding: 0;
}
#mailchangeConfirm .mailchangeConfirm-btn-area > div:first-child {
  width: 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
  text-align: left !important;
}
#mailchangeConfirm .mailchangeConfirm-btn-area > div:last-child {
  width: 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
  text-align: right !important;
  display: block !important;
}
#mailchangeConfirm .mailchangeConfirm-btn-area > div:last-child .btn {
  width: 100%;
}

/* =========================================
   パスワード再設定画面
========================================= */
#resetModal .form-group .text-right svg.svg-password + div:not(.form-error-message) {
    margin-top: -28px !important;
    margin-left: 0 !important;
}
#notice-new-password ~ div.col-12 {
    padding: 0 !important;
}
#newPasswordConfirmation ~ .text-right .form-error-message {
    margin-top: -25px !important;
}

/* =========================================
   ログイン画面
========================================= */
/* 入力欄の幅調整 */
#LoginForm > div[class^="m"],
#LoginForm > div[class*=" m"] {
  margin: 0 !important;
}