@media (max-width: 720px) {
  .syatyou {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .syatyou-photo img {
    width: clamp(140px, 48vw, 220px);
  }
  .syatyou-text h3 {
    font-size: 1.6rem;
  }
}


h2 {
    /* 文字色を濃いグレーに変更 */
    color: var(--main-text-color); 
    font-size: 3rem; 
    text-align: center;
    margin-top: 200px;
    margin-bottom: 50px;
    letter-spacing: 0.2em; 
    font-weight: bold;
}




.syamei{
    /* 画像の大きさ */
    max-width: 100%;

    margin: 0 auto;

    height: auto;
}

.syamei{
    display: flex;
    justify-content: center;

    margin-bottom: 100;
    margin: 0 auto;

    max-width: 90%;
    height: auto;

}

.rinen-conteiner{
    /* 画像の大きさ */
    max-width: 100%;

    margin: 0 auto;

    height: auto;
}

.rinen-conteiner h2{
    margin: 20px auto 50px;
}



.rinen-conteiner img{
    display: flex;
    justify-content: center;

    margin: 0 auto;

    max-width: 90%;
    height: auto;

}


/* ========== 社長セクション ========== */
.syatyou {
  display: flex;
  align-items: center;      /* 画像と本文の縦位置をそろえる */
  gap: 32px;
  max-width: 900px;
  width: 100%;
  margin: 50px auto;
  padding: 20px;
}

/* 写真＋肩書き・名前 */
.syatyou-photo {
  text-align: center;
  flex: 0 0 auto;           /* 画像側の幅を固定気味に */
}

.syatyou-photo img {
  /* ハートの“きれい比率”を保ちつつサイズ可変 */
  width: clamp(160px, 28vw, 240px);
  height: auto;
  display: block;
  margin: 0 auto;
}

.name {
  margin-top: 8px;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #333;
}

/* 本文側 */
.syatyou-text {
  flex: 1;
  color: #333;
  line-height: 1.9;
}

.syatyou-text h3 {
  /* ここに「全責任は私が持ちます。」だけを入れる */
    font-size: 1.8rem;
    margin: 0 0 16px;
    border-left: 6px solid #000;
    padding-left: 12px;
    font-style: italic;       /* 斜体で“サイン感” */
}

.syatyou-text p {
    margin: 0 0 10px;
    /*white-space: normal; */     /* ← 折り返しOK（nowrapは外す） */
}


.syoukai-conteiner {
    display: flex;
    justify-content: center;      /* 真ん中にそろえる */
    align-items: flex-start;      /* 上をそろえる */
    gap: 60px;                    /* 各カードの間隔を広めに */
    flex-wrap: wrap;              /* 横幅が足りないとき折り返す */

    max-width: 1000px;            /* 画面幅の中心を基準に */
    margin: 60px auto;            /* 上下にも少し余白 */
    text-align: center;           /* 文字も中央に */
}

.syoukai {
    flex: 1 1 220px;              /* 各要素の幅を均等に扱う */
    max-width: 240px;             /* 大きくなりすぎ防止 */
}

.syoukai img {
    width: 80%;                  /* 枠いっぱいに */
    height: auto;
    display: block;
    margin: 0 auto 10px;          /* 画像の下に余白 */
}

.names {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #333;
    line-height: 1.5;
}

.intro {
  margin-top: 10px;
}


.history{
    text-align: center;
    margin: 80px auto;
}

.history h2{
    font-size: 2.5em;
    margin-bottom: 40px;
}

.history-text{
    max-width: 600px;
    margin: 0 auto;

    text-align: left;
}

.history-text p{
    display: flex;
    font-size: 1.1em;
    line-height: 1.8;
    margin-bottom: 20px;
}

.history-text p .day{
    width: 150px;
    flex-shrink: 0;
    font-weight: bold;
}

.history .history-text p text {
    flex: 1;
}