/*背景*/
@keyframes bg {
  0%, 100% { background-color: #1e90ff; }
  25% { background-color: #39d24a; }
  50% { background-color: #ffe244; }
  75% { background-color: #ff36a3; }
}

body {
  height: 100vh;
  overflow: auto;
  background: 
    radial-gradient(circle at bottom, #fff, transparent 80%),    
    linear-gradient(to top, dodgerblue 0%, transparent 70%),    
    linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.4) 70%),
    #1e90ff;
  animation: bg 30s infinite;
}

/*背景ここまで*/

body, html {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  height: 100vh; /* 画面の高さに合わせる */
  flex-direction: row; /* 横並びに配置 */
  align-items: center; /* 垂直方向の中央揃え */
}

.container a {
  display:block;
  text-decoration:none;
}

.container h2,.container p {
	color:black;
}

.box {
  height:60%;
  flex: 1; /* 各々のboxに等しい幅を割り当てる */
  display: flex;
  flex-direction: column; /* 項目を縦に並べる */
  align-items: center; /* 垂直方向の中央揃え */
  justify-content: center; /* 水平方向の中央揃え */
  text-align: center; /* テキストを中央揃え */
  background-color:white;
  margin:0% 2% 0% 2%;
}

.box #left {
  width: 40%;
  }

.box #right {
  width: 60%;
  padding:10% 0 10% 0;
  }

@media (min-width: 481px) {  
.left {
	margin:0% 2.5% 0% 5%;
}

.right {
	margin:0% 5% 0% 2.5%;
}


}
/* 480px以下の画面幅で適用されるスタイル */
  @media (max-width: 480px) {
  .container {
    flex-direction: column; /* 縦並びに配置 */
    height: auto; /* コンテナの高さを内容に合わせる */
  }

  .box #left {
    width: 50%; /* 画像が画面幅いっぱいになるようにする */
  }

  .box #right {
    width: 60%; /* 画像が画面幅いっぱいになるようにする */
  }

.left {
	margin:2% 5% 2% 5%;
}

.right {
	margin:2% 5% 2% 5%;
}


}

@media screen and (max-height:400px) {
.box {
  height:95%;
}

}