/* ページタイトル */
.sub-page-title {
  font-size: 3.0rem;
  font-weight: 100;
  color: #b0b0b0;
  letter-spacing: 0.12em;
  margin-bottom: 60px;
  text-align: left;
}

/* ページ全体のベース */
.sub-page-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 20px 80px;
}
/* About ページ */
/* 本文ブロック */
.about-block.en {
    max-width: 700px;
    margin: 0 auto 120px;
    text-align: left;
}

.about-block.en p {
    font-size: 0.95rem;
    line-height: 1.5; /* 行間を広く */
    color: #333;
    margin-bottom: 2rem;
    letter-spacing: 0.03em;
}

/* デザイナーセクション */
.about-designer {
    margin-top: 80px;
    border-top: 1px solid #eee;
    padding-top: 60px;
    max-width: 800px; /* ページ全体の幅に合わせる */
    margin-left: auto;
    margin-right: auto;
}

/* Designerラベル部分 */
.designer-head {
    display: flex;
    margin-top: 5px;      /* 下端揃えのためマージン除去 */
    flex-shrink: 0;        /* 幅を固定 */
}

.designer-label {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #666;
    writing-mode: vertical-lr;
}

/* プロフィールレイアウト */
.designer-media {
    display: flex;
    align-items: flex-start; /* 全要素を下端で揃える */
    gap:20px;            /* 画像とラベル、プロフィールの間隔を詰める */
    margin: 0;            /* 左寄せにするため auto を解除 */
    text-align: left;
}
/* 画像とプロフィールのラッパー：ここを「下揃え」にする */
.designer-content-combined {
    display: flex;
    align-items: flex-end;   /* 画像とテキストを下端で揃える */
    gap: 30px;               /* 画像とテキストの距離 */
}

.designer-image-wrapper {
    flex-shrink: 0;
}

.designer-image-wrapper img {
    width: 280px;            /* 画像サイズ */
    height: auto;
    display: block;
}

.designer-media img {
    width: 360px; /* プロフィール画像は少し小さめに */
    height: auto;
}

.designer-profile {
    text-align: left;
    font-size: 0.75rem;
    line-height: 2;
    color: #666;
}

/* プロフィールテキスト：左寄せ・下寄せ */
.designer-profile-wrapper {
    text-align: left;
    padding-bottom: 5px;  /* 微調整用 */
}

.designer-profile-wrapper p {
    font-size: 0.75rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 0.5rem;
}

.designer-profile-wrapper p:last-child {
    margin-bottom: 0;
}

/* Iwata ページ */
.iwata-reference {
  margin-top: 180px;
}

/* ---------- Header ---------- */

.reference-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 48px;
}

.reference-title {
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #555;
  white-space: nowrap;
}

.reference-bar {
  width: 36px;
  height: 1px;
  background: #bbb;
  flex-shrink: 0;
}

.reference-sub {
  font-size: 0.8rem;
  color: #777;
  line-height: 1.6;
}

/* ---------- 共通：画像 ---------- */

.reference-image {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.reference-image img {
  display: block;
  cursor: zoom-in;
}

/* ---------- 2カラム：画像＋テキスト ---------- */

.reference-main {
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
	align-items: flex-start;
}

.reference-main .reference-image,
.reference-main .reference-vertical {
  width: 50%;
  box-sizing: border-box;
}
/* 高さ基準で画像サイズ決定 */
.reference-main:not(.single-only) .reference-image {
  height: 350px;              /* ← 画像の基準高さ（調整可） */
}
.reference-main:not(.single-only) .reference-image img {
  height: 100%;
  width: auto;
  max-width: 100%;
}

/* 右：縦書き本文 */
.reference-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 0 12px 12px 12px;
  font-size: 0.9rem;
  line-height: 1.8;
  color: #555;
}

/* 右：横書き本文 */
.reference-horizontal {
	vertical-align: top;
	width: 50%;
  box-sizing: border-box;
	padding: 0 12px 12px 12px;
	font-size: 0.85rem;
  line-height: 1.9;
  color: #555;
}

/* ---------- 1カラム：画像のみ ---------- */

.reference-main.single-only {
  display: block;
}

.reference-main.single-only .reference-image {
  width: 100%;
}

/* ---------- 下段説明 ---------- */

.reference-description {
  margin-top: 30px;
  max-width: 800px;
  font-size: 0.85rem;
  line-height: 1.8;
  color: #666;
}

.reference-block {
  margin-bottom: 120px; /* ← 史料1と史料2の間隔 */
}