body{
  font-size: 16px;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
}

.content{
	overflow: hidden;
}

h1,h2{
  margin: 1em 0 ;
  font-weight: 700;
}

h3{
  margin: 1em 0 ;
  font-weight: 600;
}

h4{
  margin: 1em 0 ;
  font-weight: 600;
  font-size: medium;
}

img {
  border-radius: 5px;
}

header {
  background-image: url(/kani-robo/images/bg-image@2x.jpg);
  background-position: left center; 
}

header .inner {
	max-width: 600px;
	margin: 0 auto;
}

main {
  margin: auto;
  padding:2em 2em 0 2em;
  text-align: center;
}

.section1{
  background-color: #EAEAEA;
  background-size: auto 100%;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
  padding:2em;
}

.section{
  background-color: #FFF;
  background-size: auto 100%;
	margin: 0 calc(50% - 50vw);
	width: 100vw;
  padding:2em;
}

p{
  padding: 0.5em 1em; /* 左右のpaddingを少し減らすか、必要に応じて調整 */
  /* width: 700px; */ /* この行を削除またはコメントアウト */
  max-width: 700px; /* 最大幅を指定することで、PC表示では700pxに、スマホでは100%に */
  text-align: justify;
  margin: auto;
  line-height: 160%;
  word-wrap: break-word; /* 長い単語がはみ出さないように強制改行 */
  overflow-wrap: break-word; /* 同上 (新しいプロパティ名) */
}

p.center{
  text-align: center;
}

p.left{
  text-align: left;
}

footer {
  background-color: rgb(44, 41, 41);
  overflow: hidden
}

footer .inner {
	width: 600px;
	max-width: 100%;
	margin: 0 auto;
  padding:2em 1em;
  color: #FFF;
}

footer .inner ul{
  list-style: none;
  line-height: 2;
  padding-left: 0;
}

footer a {
  color: #FFF;
}

table {
  margin: 0 auto; /* 左右のマージンを自動に設定して中央寄せ */
  border-collapse: collapse;
}
.left-align {
  text-align: left; /* このクラスが適用されたセルだけ左寄せ */
}