/*- enquete CSS -----------------------------------------*/



/* チェックボックスボタン */


/* ----------------------------- */
/* color */
.bg-welcolor {
  background-color: #007FFF; /* 背景色*/
}

/* 移動ボタン */
/* icon up */

.back-to-top {
  /* 固定表示させる */
  position: fixed;
  bottom: 20px; /* 下からの距離 */
  right: 20px;  /* 右からの距離 */
  z-index: 1000; /* 他の要素の上に表示させる */

  /* ボタンの共通デザイン */
  background-color: #007bff; /* ボタンの背景色 */
  border: none;             /* ボーダーなし */
  border-radius: 50%;       /* 丸い形にする */
  width: 50px;              /* 幅 */
  height: 50px;             /* 高さ */
  cursor: pointer;          /* カーソルをポインターにする */
  box-shadow: 0 2px 5px rgba(0,0,0,.2); /* 影 */

  /* SVG画像を背景として設定 */
  background-image: url('./../images/up01.svg'); /* 通常時のSVGファイルのパス */
  background-repeat: no-repeat;
  background-position: center; /* 画像を中央に配置 */
  background-size: 80%; /* ボタン内で画像のサイズを調整 */

  /* スムーズな表示/非表示のためのトランジション */
  transition: opacity 0.3s, visibility 0.3s;

  /* 初期状態では非表示にする */
  opacity: 0;
  visibility: hidden;
}

/* ホバー時のSVG画像切り替え */
.back-to-top:hover {
  background-image: url('./../images/up01_on.svg'); /* ホバー時のSVGファイルのパス */
  /* 必要であれば、ホバー時のボタン背景色なども変更できます */
  background-color: #0056b3; /* 例: 少し濃い青 */
}


/* ボタンが表示されるときのスタイル */
.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

/* 一般ボタン */

.button01 {
  display       : inline-block;
  font-size     : 11pt;
  text-align    : center;
  cursor        : pointer;
  padding       : 10px 10px;
  background    : #007fff;
  color         : #ffffff;
  line-height   : 1em;
  transition    : .3s;
  box-shadow    : none;
  border        : 2px solid #007fff;
  text-shadow	  : initial;
}

.button01 a{
  display       : inline-block;
  border-radius : 40px;
  font-size     : 11pt;
  text-align    : center;
  cursor        : pointer;
  padding       : 10px 10px;
  background    : #007fff;
  color         : #ffffff;
  line-height   : 1em;
  transition    : .3s;
  box-shadow    : none;
  border        : 2px solid #007fff;
  text-shadow	  : initial;
}
.button01 a:hover{
  background:#FFFFFF;
  color:#007FFF;
  margin-left:0px;
  margin-top:0px;
  border:2px solid #007FFF;
  box-shadow:none;
  text-shadow	  : initial;
}


/* 送信ボタン */

.button02 {
  display       : inline-block;
  border-radius : 20px;
  font-size     : 11pt;
  text-align    : center;
  cursor        : pointer;
  padding       : 12px 50px;
  background    : #007fff;
  color         : #ffffff;
  line-height   : 1em;
  transition    : .3s;
  box-shadow    : none;
  border        : 2px solid #007fff;
  text-shadow	  : initial;
}
.button02:hover {
  display       : inline-block;
  border-radius : 20px;
  font-size     : 11pt;
  text-align    : center;
  cursor        : pointer;
  padding       : 12px 50px;
  background    : #666666;
  color         : #ffffff;
  line-height   : 1em;
  transition    : .3s;
  box-shadow    : none;
  border        : 2px solid #007fff;
  text-shadow	  : initial;
}


/* ボタン03 */

.button03 {
  display       : inline-block;
  border-radius : 5px;
  font-size     : 11pt;
  text-align    : center;
  cursor        : pointer;
  padding       : 12px 12px;
  background    : #007fff;
  color         : #ffffff;
  line-height   : 1em;
  transition    : .3s;
  box-shadow    : none;
  border        : 2px solid #007fff;
  text-shadow	  : initial;
}
.button03:hover {
  display       : inline-block;
  border-radius : 5px;
  font-size     : 11pt;
  text-align    : center;
  cursor        : pointer;
  padding       : 12px 12px;
  background    : #ffffff;
  color         : #007fff;
  line-height   : 1em;
  transition    : .3s;
  box-shadow    : none;
  border        : 2px solid #007fff;
  text-shadow	  : initial;
}

/* tooltip */

/* ツールチップのコンテナ */
.tooltip-container {
  position: relative;
  display: inline-block;
  margin-left: 5px;
}

/* ⚠️ ここが主な変更点：テキストアイコンのスタイル ⚠️ */
.info-icon {
  display: inline-block; /* text-alignなどを適用するため */
  width: 1.2em; /* アイコンの幅 */
  height: 1.2em; /* アイコンの高さ */
  line-height: 1.2em; /* テキストを縦方向中央に */
  text-align: center; /* テキストを中央揃え */
  background-color: #007bff; /* アイコンの背景色 */
  color: #fff; /* アイコンの文字色 */
  border-radius: 50%; /* 円形にする */
  font-weight: bold; /* 文字を太く */
  cursor: help; /* マウスカーソルをヘルプの形にする */
  font-size: 0.9em; /* 文字サイズ */
  vertical-align: middle; /* テキストとアイコンの縦位置を揃える */
}

/* ツールチップのコンテナ */
.tooltip-container {
  position: relative; /* ★重要：これを基準にtooltip-textが配置されます */
  display: inline-block; /* インライン要素として扱い、幅と高さを内容に合わせる */
  margin-left: 5px; /* アイコンと入力欄の間隔 */
  vertical-align: middle; /* テキストや入力欄とアイコンの縦方向の位置を揃える */
}

/* テキストアイコンのスタイル */
.info-icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  line-height: 1.2em;
  text-align: center;
  background-color: #007bff;
  color: #fff;
  border-radius: 50%;
  font-weight: bold;
  cursor: help;
  font-size: 0.9em;
}

/* ポップアップするヒントテキストのスタイル */
.tooltip-text {
  visibility: hidden;
  width: 250px; /* ポップアップの幅を広げました */
  background-color: #eee;
  color: #333;
  text-align: left; /* 左寄せにしました */
  border-radius: 6px;
  padding: 8px 10px; /* 内側の余白を調整 */
  position: absolute; /* tooltip-containerを基準に配置 */
  z-index: 1000; /* 他の要素の手前に確実に表示 */

  /* ★配置の調整：アイコンの右横に表示されるように */
  top: 50%;            /* アイコンの縦方向中央に */
  left: 100%;          /* アイコンの右端に */
  transform: translateY(-50%) translateX(10px); /* 縦方向中央に調整し、アイコンから少し離す */

  opacity: 0;
  transition: opacity 0.3s;
  white-space: normal; /* テキストが折り返されるように */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 少し影を付けて見やすく */
}

/* 矢印を作成 (ポップアップの左側に配置されるように調整) */
.tooltip-text::before { /* ::afterの代わりに::beforeを使用 */
  content: "";
  position: absolute;
  top: 50%;
  right: 100%; /* ポップアップの左端から */
  margin-top: -5px; /* 縦方向の中央に */
  border-width: 5px;
  border-style: solid;
  border-color: transparent #eee transparent transparent; /* 左向きの矢印 */
}

/* ホバー時に表示 */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}