@charset "UTF-8";
/* =========================================================
   Base Settings (Color Palette & Senior-Friendly Typography)
========================================================= */
/* ベースのコンテナ設定（読みやすい文字幅に制限） */
#profile{
background-color: var(--bg-light);
}
#profile .container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  color: #333;
  font-family: "Noto Sans JP", sans-serif; /* 日本語フォント例 */
  line-height: 1.8;
  letter-spacing: 0.05em; /* 文字間隔を少し広げて読みやすく */
}

/* 導入部分 */
.profile-intro {
  margin-bottom: 50px;
}

.sub_title {
  font-size: 1.4em;
  color: #8b0000; /* 情熱や老舗感を示す深い赤（任意で変更してください） */
  text-align: center;
  margin-bottom: 30px;
  line-height: 1.6;
  font-weight: bold;
}

/* スマホ用改行（PCでは非表示） */
.sp-br {
  display: none;
}

.profile-intro p {
  margin-bottom: 1.5em;
}

.profile-intro .greeting {
  font-weight: bold;
  font-size: 1.1em;
}

/* 章立て部分（カード風デザイン） */
.profile-chapters {
  display: flex;
  flex-direction: column;
  gap: 40px; /* 章と章の間の余白 */
  margin-bottom: 50px;
}

.chapter {
  background: #fdfdfd;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); /* 軽い影で浮き上がらせる */
}

.chapter-title {
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #333;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 「第○章」の部分を目立たせるアクセント */
.chapter-title span {
  background: #333;
  color: #fff;
  font-size: 0.8em;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}

.chapter-content p {
  margin-bottom: 1.2em;
}

.chapter-content p:last-child {
  margin-bottom: 0;
}

/* 署名部分（右寄せ） */
.profile-sign {
  text-align: right;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px dashed #ccc;
}

.profile-sign p {
  margin: 0;
  font-size: 1em;
}

.profile-sign .name {
  font-size: 1.5em;
  font-weight: bold;
  display: block;
  margin-top: 10px;
}

/* スマートフォン向けのレスポンシブ対応 */
@media (max-width: 768px) {
  .sub_title {
    font-size: 1.2em;
    text-align: left; /* スマホでは左揃えの方が読みやすい場合があります */
  }
  
  .sp-br {
    display: block; /* スマホではここで改行させる */
  }

  .chapter {
    padding: 20px 15px;
  }
  
  .chapter-title {
    font-size: 1.1em;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .chapter-title span {
    margin-bottom: 5px;
  }
}