@charset "UTF-8";

/* =========================================================
  Project : プロフィールページ専用  p-profile
  配置場所：/wp-content/themes/webnokobako/css/page-profile.css
  ※ 見出し・本文・リスト・表は記事用CSS（c-single__body）をそのまま使う
	========================================================= */

/* =======
  p-profile__hero : アイコン・名前・肩書き
   ======== */
.p-profile__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.4em;
	margin-top: 1.5rem;
	padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.5rem) 1rem;
	background: var(--color-bg);
}

/* アイコン */
.p-profile__icon {
	width: clamp(96px, 80px + 4vw, 120px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-white);
	border: 1px solid var(--color-main);
}
.p-profile__icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 名前・肩書き */
.p-profile__name {
	margin-top: 0.4em;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	font-weight: 700;
}
.p-profile__role {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-accent);
}

/* =======
  p-profile__table : プロフィール表（記事の表を微調整）
   ======== */
/* 行見出しが縦に並ぶので、記事の太い下線を細くそろえる */
.c-single__body .p-profile__table th {
	border-bottom: 1px solid var(--color-border);
	font-weight: 700;
	color: var(--color-sub);
}

/* =======
  p-profile__contact : お問い合わせ
   ======== */
.p-profile__contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25em;
	margin-top: 1.8em;
	padding: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) 1rem;
	background: var(--color-bg);
	text-align: center;
}
/* 記事本文の段落の余白を打ち消す */
.c-single__body .p-profile__contact p {
	margin-top: 0;
}

/* メールボタン（記事本文のリンク色・下線を打ち消す） */
.c-single__body .p-profile__mail {
	max-width: 100%;
	color: var(--color-white);
	text-decoration: none;
	word-break: break-all;
}
.p-profile__mail svg {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0;
}

/* 注釈 */
.c-single__body .p-profile__note {
	font-size: 0.75rem;
	color: var(--color-sub);
}