/* about.css — about.html 専用スタイル */

.about {
  position: relative;
  z-index: 2;
  padding: 40px 5% 34px;   /* フッターまでの間を詰める（以前は 160px） */
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.about h2 {
  font-size: clamp(1.7rem, 7.4vw, 2.6rem);   /* PHILOSOPHY と同じ大きさ */
  margin-bottom: 56px;
  letter-spacing: 4px;
}

.about p {
  font-size: 1.45rem;
  line-height: 2.0;
  max-width: 720px;
  margin: 0 auto 40px;
  opacity: 0.95;
  color: var(--fg);
}

.about a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.6);
}

.about a:hover {
  opacity: 0.7;
}

/* 企業ロゴ：カプセルと社名 */
.about-logo { margin: 0 auto 36px; }
.about-mark { display: block; width: min(220px, 52vw); height: auto; margin: 0 auto; color: #111; }
.about-mark .lm-heart { fill: #ff4d5e; }
.about .about-word {
  margin: 18px auto 0;
  font-size: clamp(1.4rem, 5.6vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}
/* キャラの下の「Welcome!!」 */
.about .about-welcome {
  margin: 0 auto 28px;
  font-size: clamp(1.3rem, 5.2vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 1;
}

/* 連絡先ボタン：メールのアイコン＋CONTACT */
.about a.about-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 13px 28px;
  border: 2px solid #111;
  border-radius: 2px;
  border-bottom: 2px solid #111;
  color: #111;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  transition: background 0.2s ease, color 0.2s ease;
}
.about-contact-btn .mail-ico {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round;
}
.about a.about-contact-btn:active { background: #111; color: #fff; opacity: 1; }
@media (hover: hover) {
  .about a.about-contact-btn:hover { background: #111; color: #fff; opacity: 1; }
}