body {
  font-family: Arial, sans-serif;
  background-color: #eee;
  margin: 0;
  padding: 0; /* ★追加：bodyのパディングをリセット */
  flex-direction: column; /* ★追加：子要素を縦に並べる */
  min-height: 100vh; /* ★追加：ビューポートの高さまでbodyを拡張 */
}
.info {
  width: 100%;
  text-align: center;
  flex-shrink: 0; /* ★追加：縮まないように */
  padding-bottom: 20px; /* hrとの間隔 */
}
.info_title{
  font-size: 30px;
  font-weight: bold;
}
.box {
  max-width: 480px;
  width: 95%;
  min-height: 400px;
  text-align: center;
  border: solid 1px;
  background-color: #FAFAFA;
  border-radius: 10px 10px 10px 10px;
  margin: 10px auto 0 auto;
  position: relative;
}
.wrap {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  flex-grow: 1; /* ★追加：残りの垂直スペースを占める */
  display: flex; /* wrapをflexコンテナにして、中の要素を縦に並べる */
  flex-direction: column;
  justify-content: center; /* コンテンツを中央寄せに */
}
.title{
font-size: 40px;
text-align: center;
margin: 15px 0 0 0;
color:yellowgreen;
font-weight:bold;
}
.title span{
display: inline-block;
}
.to{
font-size: 20px;
margin: 5px 0 0px 0;;
text-align: center;
}
.contents{
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.session{
margin: 20px;
}
.session-button{
margin: 50px 0px;
height: 30px;
}
.text{
font-size: 25px;
}
.text span{
display: inline-block;
}
.input-text{
border: 2px solid #ddd;
border-radius: 5px;
font-size: 25px;
width: 85%;
height: 100%;
}
.text-a{
font-size: 20px;
}
.button{
background-color: yellowgreen;
border-radius: 20px;
border: 2px solid rgba(0,0,0,0.2);
font-size: 25px;
width: 320px;
color: black;
}
.button:hover {opacity:0.8;}
.button:active {
-webkit-transform: translate(0,2px);
-moz-transform: translate(0,2px);
transform: translate(0,2px);
border-bottom:none;
}
a, a:visited {
color: blue;
}

footer {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background-color: #FAFAFA; /* ★修正：bodyの背景色と合わせるか、統一色に */
  text-align: center; /* ★修正：右寄せではなく中央寄せに */
  padding: 10px 0; /* 上下パディング */
  flex-shrink: 0; /* ★追加：フッターが縮まないようにする */
  margin-top: auto; /* ★追加：Flexboxでフッターを最下部に押し出す */
  border-top: 1px solid #ddd; /* ★追加：コンテンツとの区切り */
  color: #555; /* テキストの色 */
  font-size: 0.85em;
}

footer .footer-content div {
  margin: 2px 0; /* フッター内の各行の上下マージン */
}
footer a, footer a:visited {
  color: blue;
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}