body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  color: #333;
}

header {
  padding: 20px;
  text-align: center;
}
header img {
  max-width: 70%;
  margin: 0px auto 0;
}
h1 {
  font-size: 2em;
  margin-bottom: 10px;
	margin-top: 0;
}

main {
  padding: 20px;
	width: 768px;
	margin: auto;
}

section {
  margin-bottom: 40px;
}

h2 {
  position: relative; /* 相対配置 */
  display: inline-block; /* インラインブロック要素にする */
  padding-left: 15px; /* 棒の分の左側パディング */
}

h2::before { /* ::before 疑似要素を使用 */
  content: ""; /* 疑似要素の内容は空 */
  position: absolute; /* 絶対配置 */
  top: 50%; /* 垂直方向中央 */
  left: 0; /* 左端に配置 */
  transform: translateY(-50%); /* 垂直方向に中央揃え */
  width: 3px; /* 棒の太さ */
  height: 100%; /* 棒の高さ */
  background-color: #000; /* 棒の色（薄いグレー） */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto 0;
}


.top {
  background-color: #333;
  color: #fff;
  padding: 5px;
  text-align: center;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

/* セクション1のテキストを明朝体にする */
section:nth-child(1) {
  font-family:  "Yu Kantei Ryu", "MS Mincho", "ＭＳ 明朝", serif;
	text-align: center;
	line-height: 1.8em;
}

.pc {
	display:block;
	}
.sp{
	display: none;
	}
.center{
	text-align: center;
	}
.left{
	text-align: left;
	}
.right{
	text-align: right;
	}
.red{
	color: #970000;
	}
.big{
	font-size: 1.5em;
	font-weight: bold;
	}
/* プロフィール */
.profile {
  display: flex;
  align-items: center; /* 垂直方向中央揃え */
  padding: 0px;
}

.image {
  width: 200px;
  margin-right: 30px;
}

.buken-image img{
   width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
    margin-bottom: 20px;
	margin-top: 0;
  }
	

.image img {
  width: 100%;
  border-radius: 0%; /* 画像を丸くする */
}

.description {
  flex: 1; /* 説明文が残りのスペースを埋める */
}

/* テーブル */
.container {
  display: flex;
  flex-wrap: wrap;
  padding: 0px;
}

.box {
  width: 50%; /* PC画面では2つの要素が横並びになるように */
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #ccc;
}
.box p{
	margin-block-start: 0em;
    margin-block-end: 0em;
	}
.box-left {
  background-color: #f0f0f0;
}

/* PC画面 */
@media (min-width: 769px) { /* 769px以上の画面サイズ */
  .box-left {
    width: 30%; /* PC画面では左の要素が30%の幅になるように */
  }

  .box:not(.box-left) { /* 左以外の要素 */
    width: 70%; /* PC画面では右の要素が70%の幅になるように */
  }
}

/* LINE誘導 */
.line-button {
  display: flex; /* アイコンとテキストを横並びにする */
  align-items: center; /* 垂直方向に中央揃え */
  justify-content: center; /* 水平方向に中央揃え */
  background-color: #00b900; /* LINEのテーマカラー */
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease; /* ホバー時のアニメーション */
  margin: 0 auto; /* 水平方向に中央揃えにするために追加 */
  width: fit-content; /* ボタンの幅を内容に合わせて調整 */
	font-size: 2em;
}

.line-button:hover {
  background-color: #009300; /* ホバー時に少し暗い色にする */
}

.line-button i {
  font-size: 30px; /* アイコンサイズ */
  margin-right: 10px;
}

.line-button span {
  font-weight: bold;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
header img {
  max-width: 100%;
}
section:nth-child(1) {
	font-weight: bold;
	line-height: 1.8em;
	text-align: left;
}
  main {
    width: 100%; /* main の幅を100%にする */
    padding: 0px; /* main の左右のpaddingを調整 */
  }
  section {
    padding: 0 20px; /* section の左右のpaddingを追加 */
  }	
	
  h1 {
    font-size: 1.5em;
  }

  h2 {
    font-size: 1.2em;
  }
.pc {
	display: none;
	}
.sp{
	display:block;
	}

/* プロフィール */	
  .profile {
    flex-direction: column; /* 縦方向に配置 */
    align-items: center; /* 水平方向中央揃え */
	  padding: 0;
  }

  .image {
    margin-right: 0;
    margin-bottom: 20px;
  }	

/* テーブル */	
  .box {
    width: 100%; /* box の幅を100%にする */
    margin: 0px 0; /* box の上下marginを追加 */
    padding: 10px; /* box のpaddingを調整 */
  }
  .big {
    font-size: 1.2em; /* スマホサイズで文字サイズを調整 */
  }

  .line-button {
    font-size: 1.5em; /* スマホサイズで文字サイズを調整 */
  }	
}