/* =========================================================
   tipWidget：外部ページから独立したデザイン基盤
   daisyUIや埋め込み先ページのテーマを継承しない
========================================================= */

.tipWidget{
  --tip-widget-background: transparent;
  --tip-widget-blur: 18px;
  --tip-widget-text: #f9fafb;
  --tip-widget-muted-text: #d1d5db;
  --tip-widget-message-text: #f9fafb;
  --tip-widget-chara-max-width: 35vw;
  --tip-widget-chara-max-height: 35vh;
  --tip-widget-border: #263449;

  --tip-widget-amount-bg: #010e1b;
  --tip-widget-amount-text: #f9fafb;
  --tip-widget-amount-border: #263449;
  --tip-widget-amount-radius: 10px;

  --tip-widget-button-bg: #6E6EFF;
  --tip-widget-button-text: #ffffff;
  --tip-widget-button-border: #6E6EFF;
  --tip-widget-button-radius: 12px;

  --tip-widget-secondary-bg: transparent;
  --tip-widget-secondary-text: #d1d5db;
  --tip-widget-secondary-border: #6b7280;
  --tip-widget-secondary-radius: 12px;

  --tip-widget-input-bg: #010e1b;
  --tip-widget-input-text: #f9fafb;
  --tip-widget-input-border: #263449;

  color-scheme: only light;
  color: var(--tip-widget-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* 各要素の幅・高さをpadding / border込みで扱う */
.tipWidget,
.tipWidget *{
  box-sizing: border-box;
}

/* ウィジェット内のフォーム部品は外部ページのフォントを継承しない */
.tipWidget button,
.tipWidget input,
.tipWidget textarea,
.tipWidget select{
  font: inherit;
}


/* ダーク背景を前提にしていたので当初はいれていた装飾。必要な時にまた使ええばいい */
/* body{
  margin: 0;
  background: #111;
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
} */


/* =========================================================
  tipWidget: ガワ（overlay / backdrop / modal）最小CSS
  目的：全画面オーバーレイ＋半透明背景＋中央モーダル
  注意：.tipWidget の外へ影響を出さない
========================================================= */
/* hidden属性が付いている間は確実に非表示 */
.tipWidget .tipOverlay[hidden]{
  display: none!important;
}

/* overlay：画面全体を覆う土台 */
.tipWidget .tipOverlay{
  position: fixed;
  inset: 0;
  z-index: 100000;

  /* ↓ modalを中央に置く ↓ */
  display: flex;
  align-items: center;
  align-items: safe center;
  justify-content: center;
  overflow-y: auto;
  
  /* 端末が小さい時にモーダルが画面端へ貼り付かないようにする */
  box-sizing: border-box;  
  padding: 16px;
}

/* backdrop：背景ページを暗くしない */
.tipWidget .tipBackdrop{
  position: absolute;
  inset: 0;
  background: transparent;
}

/* modal：箱背景を消して、キャラとUIだけを浮かせる */
.tipWidget .tipModal{
  position: relative;
  z-index: 1;

  width: min(429px, calc(100% - 32px));
  box-sizing: border-box;
  padding: 16px;

  background: transparent;
  color: var(--tip-widget-text);
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 文字・操作UIをまとめるグラスパネル */
.tipWidget .tipInfoPanel{
  grid-area: info;
  min-width: 0;
  padding: 16px;
  background: var(--tip-widget-background);
  color: var(--tip-widget-text);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 20px;
  backdrop-filter: blur(var(--tip-widget-blur)) saturate(135%);
  -webkit-backdrop-filter: blur(var(--tip-widget-blur)) saturate(135%);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.14);
  position: relative;
}

/* 操作パネル右上の閉じるボタン */
.tipWidget .panelCloseBtn{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%;
  background: rgba(0,0,0,0.28);
  color: #f9fafb;
  font-size: 22px;
  line-height: 26px;
  cursor: pointer;
}

.tipWidget .panelCloseBtn:hover{
  background: rgba(0,0,0,0.48);
}

.tipWidget .tipSpeech{ padding-right: 30px; }

/* メッセージ文字 */
.tipWidget .tipText{
  color: var(--tip-widget-message-text);
  font-size: var(--tip-widget-message-font-size, 16px);
}

/* 確認画面・完了画面などの通常文字 */
.tipWidget .tipConfirm,
.tipWidget .tipResult,
.tipWidget .amountCustomLabel{
  color: var(--tip-widget-text);
}

/* リンク */
.tipWidget .resultTxHash{
  color: var(--tip-widget-muted-text);
}

/* =========================================================
   キャラ＋メッセージと画面内容の配置
========================================================= */

/*配置対象全体*/
.tipWidget .tipLayout{
  display: grid;
  gap: 16px;
  align-items: start;
}

/*キャラ*/
.tipWidget .tipLayout .tipChara{
  grid-area: chara;
  min-width: 0;
  margin: 0 auto;
}

/*メッセージ*/
.tipWidget .tipLayout .tipSpeech{
  grid-area: speech;
  min-width: 0;
}

/* ワンタップ設定画面ではキャラとメッセージを表示しない */
.tipWidget .tipLayout.is-permission-settings .tipChara,
.tipWidget .tipLayout.is-permission-settings .tipSpeech{
  display: none !important;
}

/* =========================================================
   ワンクリック送金設定
   ジェネレーターの共通配色を使用
========================================================= */

/* 設定画面本体 */
.tipWidget .permissionSettings{
  padding: 12px;
  color: var(--tip-widget-text);
}

/* タイトル */
.tipWidget .permissionTitle{
  margin: 0 0 8px;
  color: var(--tip-widget-text);
  font-size: 21px;
  font-weight: 800;
}

/* 説明 */
.tipWidget .permissionDescription{
  margin: 0 0 12px;
  color: var(--tip-widget-text);
  font-size: 15px;
  line-height: 1.55;
}

/* 設定値を1項目1行にする */
.tipWidget .permissionFieldRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0;
}

/* 項目名 */
.tipWidget .permissionFieldRow label{
  flex: 1 1 auto;
  margin: 0;
  color: var(--tip-widget-text);
  font-size: 16px;
  font-weight: 700;
}

/* 入力欄＋単位 */
.tipWidget .permissionFieldValue{
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--tip-widget-text);
  font-size: 15px;
}

/* 数値入力 */
.tipWidget .permissionFieldValue input{
  width: 76px;
  height: 36px;
  min-width: 0;
  padding: 4px 7px;
  border: 1px solid var(--tip-widget-input-border);
  border-radius: 7px;
  background: var(--tip-widget-input-bg);
  color: var(--tip-widget-input-text);
  font-size: 17px;
  text-align: right;
}

/* 保存済み設定は改行を維持して縦積みにする */
.tipWidget #permissionStatus{
  margin: 10px 0 10px;
  padding: 7px 10px;
  border: 1px solid var(--tip-widget-input-border);
  border-radius: 8px;
  background: var(--tip-widget-input-bg);
  color: var(--tip-widget-text);
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
}

/* 設定・解除 */
.tipWidget .permissionActionRow{
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}

/* 設定画面のボタン共通サイズ */
.tipWidget #permissionSetupBtn,
.tipWidget #permissionDeleteBtn,
.tipWidget #permissionAddDeviceBtn,
.tipWidget #permissionRemoveAllOpenBtn,
.tipWidget #permissionSettingsBackBtn{
  width: auto;
  min-width: 72px;
  min-height: 44px;
  padding: 7px 14px;
  font-size: 17px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* 設定・端末の追加：メインボタン色 */
.tipWidget #permissionSetupBtn,
.tipWidget #permissionAddDeviceBtn{
  background: var(--tip-widget-button-bg);
  color: var(--tip-widget-button-text);
  border: 1px solid var(--tip-widget-button-border);
  border-radius: var(--tip-widget-button-radius);
}

/* 解除・全解除・戻る：サブボタン色 */
.tipWidget #permissionDeleteBtn,
.tipWidget #permissionRemoveAllOpenBtn,
.tipWidget #permissionSettingsBackBtn{
  background: var(--tip-widget-secondary-bg);
  color: var(--tip-widget-secondary-text);
  border: 1px solid var(--tip-widget-secondary-border);
  border-radius: var(--tip-widget-secondary-radius);
}

/* 端末追加と全解除を左詰めで横並びにする */
.tipWidget .permissionDeviceActionRow{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin: 0 0 12px;
}

/* 端末追加側を必要以上に広げない */
.tipWidget #permissionDeviceEnrollmentControls{
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
}

/* 端末管理の2ボタンは高さと文字サイズを揃える */
.tipWidget #permissionAddDeviceBtn,
.tipWidget #permissionRemoveAllOpenBtn{
  min-height: 48px;
  padding: 9px 12px;
  font-size: 15px;
  line-height: 1.3;
  white-space: nowrap;
}

.tipWidget #permissionRemoveAllOpenBtn{
  flex: 0 0 auto;
}

/* QRコード表示中は端末追加領域を全幅にする */
.tipWidget .permissionDeviceActionRow:has(
  #permissionDeviceEnrollmentPanel:not([hidden])
) #permissionDeviceEnrollmentControls{
  flex: 1 1 100%;
  width: 100%;
}

.tipWidget .permissionDeviceNote{
  margin: 0 0 7px;
  color: var(--tip-widget-text);
  font-size: 14px;
  line-height: 1.5;
}

.tipWidget #permissionDeviceEnrollmentPanel{
  margin-top: 10px;
  text-align: center;
}

.tipWidget #permissionDeviceEnrollmentStatus{
  margin: 0 0 8px;
  color: var(--tip-widget-text);
  font-size: 15px;
  line-height: 1.5;
}

/*各画面の内容*/
.tipWidget .tipLayout .btnParts,
.tipWidget .tipLayout .tipConfirm,
.tipWidget .tipLayout .tipResult,
.tipWidget .tipLayout .sendModeChoice,
.tipWidget .tipLayout .permissionSettings{
  grid-area: content;
  min-width: 0;
}

/*既存の確認・完了画面の上余白を配置用gapへ統一*/
.tipWidget .tipLayout .tipConfirm,
.tipWidget .tipLayout .tipResult{
  margin-top: 0;
}

/*上：キャラの下に情報パネル*/
.tipWidget .tipLayout[data-visual-position="top"]{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "chara"
    "info";
}

/*下：情報パネルの下にキャラ*/
.tipWidget .tipLayout[data-visual-position="bottom"]{
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "info"
    "chara";
}

/*左：キャラを情報パネルの左へ配置*/
.tipWidget .tipLayout[data-visual-position="left"]{
  width: min(760px, calc(100% - 32px));
  grid-template-columns: minmax(0, 42%) minmax(0, 58%);
  grid-template-areas:
    "chara info";
}

/*右：キャラを情報パネルの右へ配置*/
.tipWidget .tipLayout[data-visual-position="right"]{
  width: min(760px, calc(100% - 32px));
  grid-template-columns: minmax(0, 58%) minmax(0, 42%);
  grid-template-areas:
    "info chara";
}

/*キャラ未設定時は情報パネルだけ表示*/
.tipWidget .tipLayout[data-has-chara="false"]{
  width: min(429px, calc(100% - 32px));
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "info";
}

/*ワンクリック設定画面も情報パネルだけ表示*/
.tipWidget .tipLayout.is-permission-settings{
  width: min(429px, calc(100% - 32px));
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "info";
}

.tipWidget .tipChara[hidden]{
  display: none !important;
}

/*キャラ枠*/
.tipWidget .tipChara{
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 12px;
  overflow: visible;
}

/*キャラ動画・画像：素材比率を維持し、画面サイズを基準に拡大縮小*/
.tipWidget .tipCharaVid,
.tipWidget .tipCharaImg{
  display: block;
  flex-shrink: 0;
  width: auto;
  height: auto;
  max-width: min(
    var(--tip-widget-chara-max-width),
    calc(100vw - 32px)
  );
  max-height: min(
    var(--tip-widget-chara-max-height),
    calc(100vh - 32px)
  );
  object-fit: contain;
}

/*左・右配置では操作UIと同じ横幅を共有するため、キャラ列からはみ出させない*/
.tipWidget .tipLayout[data-visual-position="left"] .tipCharaVid,
.tipWidget .tipLayout[data-visual-position="left"] .tipCharaImg,
.tipWidget .tipLayout[data-visual-position="right"] .tipCharaVid,
.tipWidget .tipLayout[data-visual-position="right"] .tipCharaImg{
  max-width: min(
    100%,
    var(--tip-widget-chara-max-width)
  );
}

/*キャラ動画・画像がhiddenの時は確実に非表示*/
.tipWidget .tipCharaVid[hidden],
.tipWidget .tipCharaImg[hidden]{
  display: none !important;
}

/* =========================================================
   tipWidget：金額・操作ボタン
   目的：キャラとセリフを主役にし、操作UIを内容幅へ小型化
========================================================= */
/* サイト上に表示する投げ銭開始ボタン */
.tipWidget .startBtn{
  width: auto;
  min-width: 0;
  padding: 7px 14px;
  border: 1px solid transparent;
  line-height: 1.2;
  font-weight: 700;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* 金額ボタン */
.tipWidget .amountGrid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* 金額ボタン群の右下にワンクリック設定・管理を配置 */
.tipWidget #permissionSettingsOpenBtn{
  display: block;
  width: auto;
  min-width: 0;
  margin: 8px 0 0 auto;
  padding: 4px 0;
  border: none;
  background: transparent;
  color: var(--tip-widget-text);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* 非対応環境では設定ボタンを表示しない */
.tipWidget #permissionSettingsOpenBtn[hidden]{
  display: none !important;
}

.tipWidget .amountBtn{
  width: auto;
  min-width: 56px;
  padding: 7px 12px;
  border: 1px solid var(--tip-widget-amount-border);
  border-radius: var(--tip-widget-amount-radius);
  background-color: var(--tip-widget-amount-bg);
  color: var(--tip-widget-amount-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* 選択中の金額 */
.tipWidget .amountBtn.is-selected,
.tipWidget .customAmountApplyBtn.is-selected{
  background-color: #ffffff;
  color: #111827;
  border: 2px solid #111827;
  box-shadow: 0 0 0 2px #ffffff;
  outline: none;
}

/* 任意金額 */
.tipWidget .amountCustom{
  margin-top: 10px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tipWidget .amountCustomLabel{
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-size: 16px;
  white-space: nowrap;
}

/* 任意金額入力 */
.tipWidget .customAmountInput{
  flex: 0 1 120px;
  width: 120px;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--tip-widget-input-border);
  border-radius: var(--tip-widget-amount-radius);
  background-color: var(--tip-widget-input-bg);
  color: var(--tip-widget-input-text);
  appearance: textfield;
}

.tipWidget .customAmountInput::placeholder{
  color: var(--tip-widget-input-text);
  opacity: 0.55;
}

.tipWidget .customAmountInput:focus{
  border-color: var(--tip-widget-button-border);
  outline: none;
  box-shadow: none;
}

/* この金額にする・次へ・送金する */
.tipWidget .customAmountApplyBtn,
.tipWidget .nextBtn,
.tipWidget .sendBtn{
  width: auto;
  min-width: 72px;
  padding: 8px 16px;
  border: 1px solid var(--tip-widget-button-border);
  border-radius: var(--tip-widget-button-radius);
  background-color: var(--tip-widget-button-bg);
  color: var(--tip-widget-button-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* 次へは金額設定の下で中央に置く */
.tipWidget .nextBtn{
  display: block;
  margin: 10px auto 0;
}

/* 送金成功前の「完了へ」は確実に非表示 */
.tipWidget #sendingCompleteBtn[hidden]{
  display: none !important;
}

/* ジェネレーターの非選択シーンも確実に非表示 */
.tipWidget .preview-screen[hidden]{
  display: none !important;
}

/* 戻る・キャンセル・閉じる */
.tipWidget .backBtn,
.tipWidget .closeBtn,
.tipWidget #sendModeCancelBtn,
.tipWidget #permissionSettingsBackBtn{
  width: auto;
  min-width: 72px;
  padding: 8px 16px;
  border: 1px solid var(--tip-widget-secondary-border);
  border-radius: var(--tip-widget-secondary-radius);
  background-color: var(--tip-widget-secondary-bg);
  color: var(--tip-widget-secondary-text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* 確認・完了画面の操作ボタン */
.tipWidget .tipConfirm .sendBtn,
.tipWidget .tipConfirm .backBtn,
.tipWidget .tipResult .closeBtn{
  margin-top: 8px;
}

/* =========================================================
   送金確認画面
========================================================= */
/* 最終確認の詳細4項目 */
.tipWidget .tipConfirmMeta{
  margin: 0 0 12px;
  padding: 10px;
  border:1px solid rgba(0,0,0,.12);
  border-radius: 10px;
}
/* 最後の行だけ下余白を消す */
.tipWidget .tipConfirmMeta .tipConfirmLine:last-child{
  margin-bottom: 0;
}
/* 受取先名・アドレスは長いので折り返せるようにする */
.tipWidget .confirmRecipientLabel,
.tipWidget .confirmRecipientAddress{
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* =========================================================
   tipWidget：送金完了
========================================================= */
/* 最終確認・完了画面を最低限見やすく */
.tipWidget .tipConfirm,.tipWidget .tipResult{
  margin-top:12px;
}

/* タイトルっぽく */
.tipWidget .tipConfirmTitle,.tipWidget .tipResultTitle{
  margin: 0 0 8px;
  font-weight: 800;
}

/* 行 */
.tipWidget .tipConfirmLine,.tipWidget .tipResultLine{
  margin: 0 0 12px;
}

/* TxHashリンクは長いので、完了画面の中で折り返す */
.tipWidget .resultTxHash{
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* =========================================================
   tipWidget：送金エラー
========================================================= */
.tipWidget .tipError{
  margin-top: 8px;
  padding:8px 10px;
  border: 1px solid rgba(0,0,0,.2);
  border-radius:10px;
  font-size: 12px;
  line-height: 1.4em;
}

/* =========================================================
   送金元ウォレット
========================================================= */
.tipWidget .walletConnectionPanel{
  margin: 0 0 16px;
}

.tipWidget .walletConnectionTitle{
  margin: 0 0 6px;
  font-weight: bold;
}

.tipWidget #walletAccountSelect{
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--tip-widget-input-border);
  border-radius: var(--tip-widget-button-radius);
  background: var(--tip-widget-input-bg);
  color: var(--tip-widget-input-text);
}

.tipWidget .walletConnectionActions{
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* ウォレット接続ボタンと選択メニュー */
.tipWidget .walletConnectMenu{
  position: relative;
  flex: 1;
  min-width: 0;
}

.tipWidget #walletConnectBtn,
.tipWidget #walletResetBtn{
  min-width: 0;
  padding: 8px 10px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.tipWidget #walletConnectBtn{
  width: 100%;
  border: 1px solid var(--tip-widget-button-border);
  border-radius: var(--tip-widget-button-radius);
  background: var(--tip-widget-button-bg);
  color: var(--tip-widget-button-text);
}

.tipWidget #walletResetBtn{
  flex: 1;
  border: 1px solid var(--tip-widget-secondary-border);
  border-radius: var(--tip-widget-secondary-radius);
  background: var(--tip-widget-secondary-bg);
  color: var(--tip-widget-secondary-text);
}

/* 対応ウォレット一覧 */
.tipWidget .walletPicker[hidden]{
  display: none !important;
}

.tipWidget .walletPicker{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 6px;
  border: 1px solid var(--tip-widget-input-border);
  border-radius: 10px;
  background: #111827;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28);
}

.tipWidget .walletPickerOption{
  display: block;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f9fafb;
  text-align: left;
  cursor: pointer;
}

/* =========================================================
   スマホ：投げ銭UIをコンパクトにする
========================================================= */
@media (max-width: 600px){

  /* 埋め込み先サイトの大きな文字サイズを引き継がない */
  .tipWidget{
    font-size: 16px;
    line-height: 1.3;
  }

  /* 画面外周の余白を減らす */
  .tipWidget .tipOverlay{
    padding: 8px;
  }

  .tipWidget .tipModal{
    padding: 4px;
  }

  /* キャラと操作パネルの間隔 */
  .tipWidget .tipLayout{
    gap: 6px;
  }

  .tipWidget .tipChara{
    margin-bottom: 4px;
  }

  /* 操作パネル本体 */
  .tipWidget .tipInfoPanel{
    padding: 10px;
    border-radius: 16px;
  }

  /* クリエイターのメッセージ */
  .tipWidget .tipText{
    margin: 0 0 8px;
    line-height: 1.3;
  }

  /* ウォレット部分 */
  .tipWidget .walletConnectionPanel{
    margin: 0 0 8px !important;
  }

  .tipWidget .walletConnectionTitle{
    margin: 0 0 3px !important;
  }

  .tipWidget #walletAccountSelect{
    padding: 7px 8px !important;
  }

  .tipWidget .walletConnectionActions{
    gap: 6px;
    margin-top: 6px;
  }

  .tipWidget #walletConnectBtn,
  .tipWidget #walletResetBtn{
    padding: 9px 6px;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* 固定金額 */
  .tipWidget .amountGrid{
    gap: 6px;
  }

  .tipWidget .amountBtn{
    min-width: 52px;
    padding: 9px 13px;
    line-height: 1.2;
  }

  /* 任意金額 */
  .tipWidget .amountCustom{
    margin-top: 6px;
    gap: 6px;
  }

  .tipWidget .amountCustomLabel{
    line-height: 1.2;
  }

  .tipWidget .customAmountInput{
    padding: 5px 8px;
    line-height: 1.2;
  }

  /* 金額指定・次へ・送金 */
  .tipWidget .customAmountApplyBtn,
  .tipWidget .nextBtn,
  .tipWidget .sendBtn{
    padding: 9px 13px;
    line-height: 1.2;
  }

  .tipWidget .nextBtn{
    margin-top: 6px;
  }

  /* スマホでは任意金額の3項目を横並びに収める */
  .tipWidget .amountCustomLabel{
    font-size: 14px;
  }

  .tipWidget .customAmountInput{
    font-size: 14px;
    padding: 5px 6px;
  }

  .tipWidget .customAmountApplyBtn{
    flex: 0 0 auto;
    padding: 9px 8px;
    font-size: 14px;
    white-space: nowrap;
  }
}