/* ページ全体 */

/*body{*/
  /*margin:0; /* ブラウザ標準の外側余白を削除 */
  /*padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  /*background:#ffffff; /* ページ全体の背景色 */
  /*color:#111827; /* ページ全体の基本文字色 */
  /*font-family:sans-serif; /* ページ全体で使用するフォント */
/*}*/


/* ポップアップ表示エリア */
/*.x-button-popup_wrap{
 /* position:relative; /* ポップアップ配置エリアの基準にする */
/*  width:100%; /* 画面幅に合わせて横幅を縮小 */
/*  max-width:760px; /* 最大横幅。値を大きくすると表示エリアが横に広がる */
 /* min-height:620px; /* 最小高さ。値を大きくすると表示エリアが高くなる */
/*  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
/*  border:1px solid #e5e7eb; /* 表示エリアを囲む枠線 */
 /* border-radius:20px; /* 表示エリアの角丸。値を大きくすると丸みが強くなる */
 /* background:#f8fafc; /* 表示エリアの背景色 */
 /* box-sizing:border-box; /* borderを横幅へ含める */
 /* overflow:hidden; /* 表示エリアからはみ出した部分を非表示 */
/*}*/

/* ポップアップ配置エリア */

a {
text-decoration: none;
}
.x-button-popup_popup{
  position:absolute; /* 表示エリア内へポップアップを重ねて配置 */
	  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 420px;
  display:flex; /* ポップアップを中央配置する */
  justify-content:center; /* 横方向の中央へ配置 */
  align-items:center; /* 縦方向の中央へ配置 */
  padding:32px; /* 周囲32pxの余白。値を大きくすると画面端との間隔が広がる */
  box-sizing:border-box; /* paddingを横幅へ含める */
  pointer-events:none; /* 配置エリア自体ではクリック操作を受け取らない */
}

/* ポップアップ本体 */
.x-button-popup_box{
  position:relative; /* ×ボタンの配置基準にする */
  width:100%; /* 親要素の横幅に合わせて縮小 */
  max-width:460px; /* 最大横幅。値を大きくするとポップアップが横に広がる */
  padding:48px 32px 40px; /* 上48px・左右32px・下40px。値を大きくすると内側余白が広がる */
  border-radius:20px; /* ポップアップの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* ポップアップの背景色 */
  box-shadow:0 20px 50px rgba(15,23,42,.18); /* 20px・50pxを変更すると影の位置や広がりが変わる */
  text-align:center; /* 内容を中央揃えにする */
  box-sizing:border-box; /* paddingを横幅へ含める */
  pointer-events:auto; /* ポップアップ本体では通常の操作を有効にする */
}

/* 非表示状態 */
.x-button-popup_box.x-button-popup_hide{
  display:none; /* ×ボタンを押したあとポップアップを非表示にする */
}

/* ×ボタン */
.x-button-popup_close{
  position:absolute; /* ポップアップ右上へ配置 */
  top:16px; /* 上端から16px。値を大きくすると下方向へ移動する */
  right:16px; /* 右端から16px。値を大きくすると左方向へ移動する */
  width:40px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:40px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の余白を削除 */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:50%; /* 円形のボタンにする */
  background:#f1f5f9; /* ボタンの背景色 */
  color:#475569; /* ×の文字色 */
  font-size:26px; /* ×の文字サイズ。値を大きくすると×が大きくなる */
  line-height:1; /* ×の行間を1にする */
  cursor:pointer; /* マウスポインターを指の形にする */
}

/* 見出し */
.x-button-popup_heading{
  margin:0 0 20px; /* 下側20pxの余白。値を大きくするとメッセージとの間隔が広がる */
  font-size:24px; /* 見出しの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:600; /* 見出しを太字にする */
  color:#f16228; /* 見出しの文字色 */

}

/* メッセージ */
.x-button-popup_message{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#1b4fa2; /* メッセージの文字色 */
  font-size:20px; /* メッセージの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:600; /* 見出しを太字にする */
  line-height:2; /* メッセージの行間。値を大きくすると行間が広がる */
}
.x-button-popup_message2{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  color:#3f872c; /* メッセージの文字色 */
  font-size:20px; /* メッセージの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:600; /* 見出しを太字にする */
  line-height:2; /* メッセージの行間。値を大きくすると行間が広がる */
}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* ポップアップ表示エリア */
  .x-button-popup_wrap{
    min-height:520px; /* スマートフォンでは表示エリアの最小高さを520pxにする */
  }

  /* ポップアップ配置エリア */
  .x-button-popup_popup{
    padding:24px 18px; /* スマートフォンでは周囲の余白を小さくする */
  }

  /* ポップアップ本体 */
  .x-button-popup_box{
    padding:44px 24px 32px; /* スマートフォンでは内側余白を小さくする */
  }

  /* 見出し */
  .x-button-popup_heading{
    font-size:28px; /* スマートフォンでは見出しを28pxにする */
  }

  /* メッセージ */
  .x-button-popup_message{
    font-size:18px; /* スマートフォンではメッセージを18pxにする */
  }

}