@charset "utf-8";
/* ==============================================
   明和住宅 代表プロフィール専用CSS（profile.css）
   第1版 2026-09-10 PR5（company/Profile.html 専用）
   第2版 2026-09-14 KP1（274回目）第7章「スタッフの写真」を追加。
   第3版 2026-09-14 PR9（275回目）第7章の説明だけ更新（代表プロフィールの
     写真にも使う。指定の値は第2版と同じ）。
   ★使っているページ＝代表プロフィール Profile.html・売却査定 /baikyaku/・
     会社概要 /company/・スタッフプロフィール koide-Profile.html の4ページ
     （直したら4ページとも見た目を確認する）
   ----------------------------------------------
   読み込み順（厳守・Profile.html の head）:
   /css/jquery.bxslider.min.css → /css/meiwa-colors.css →
   /css/category1.css → /css/profile.css（必ず最後）
   ・土台は category1.css（横幅・フッターの見え方＝標準5-2 第26章で
     基準ページ alldata.html と一致済み）。このファイルは
     「トップページのヘッダースライダー（top.css 第5章の写し）」と
     「プロフィールページだけの部品」を足すだけ。
   ・フッター（.backline～#pageTop）の指定はここに書かない
     （標準5-2＝抜粋移植の禁止。category1.css が描く）。
   ----------------------------------------------
   記号:【G】Google基準【W】WCAG【社】当社ルール
   守る数値（下げる変更は不可）: 文字16px以上／PC本文20px／
   行間1.5以上／見出し20px以上／タップ48px以上・隣と8px以上／
   コントラスト 通常文字4.5:1・太字19px以上3:1・枠線3:1
   ============================================== */
/* ================================
   1. ヘッダースライダー（top.css 第5章の写し・値は同じ）
   ================================
   スライダーまわりの背景は#FFF3DBに統一・上下の余白0。
   白の正体はbxslider標準CSSの背景・白枠のため !important で打ち消す */
.bxslider {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* CLS対策：JS起動前から1枚分の高さだけ予約する（起動の瞬間に
   3枚分→1枚分へ縮むガタつきを防ぐ）【G】CLS 0.1以下。削除しないこと。
   ※JS無効の環境では1枚目のみ表示 */
ul.bxslider {
  aspect-ratio: 1000 / 100;
  overflow: hidden;
}
/* 起動後はbxslider側の高さ管理に戻す */
.bx-viewport ul.bxslider {
  aspect-ratio: auto;
  overflow: visible;
}
.bxslider li img {
  width: 100%;
  height: auto;
  display: block;
}
.bx-wrapper {
  margin: 0 auto !important;   /* 下の隙間0（標準は60px） */
  border: 0 !important;        /* 標準の白枠5pxを消す */
  box-shadow: none !important;
  background: #FFF3DB !important;
}
.bx-wrapper .bx-viewport {
  border: 0 !important;
  box-shadow: none !important;
  left: 0 !important;
  background: #FFF3DB !important;
}
/* ページ送りの点：スマホは非表示（画像が低く点が邪魔なため。
   指のスワイプ切替は生きています） */
.bx-wrapper .bx-pager {
  display: none;
  padding: 0 !important;
}
@media (min-width: 768px) {
  /* 【PCのみ】動く●を画像の下・右端に。h1の行の右側の空きスペースに
     重ねる方式なので、画像とh1の隙間は0のまま。●は擬似要素(::after)で描く。
     押せる範囲は24×24px【W】WCAG2.2の下限・縮小不可 */
  .bx-wrapper .bx-pager {
    display: block;
    bottom: -33px !important;  /* h1の行の高さ内に上下中央で収まる値 */
    text-align: right;         /* 右端に寄せる */
    padding: 0 1em 0 0 !important; /* 一番右の●を右端から1文字分内側に */
    line-height: 0;
  }
  #header .bx-wrapper .bx-pager.bx-default-pager a {
    position: relative;
    width: 24px;               /* 【W】24px下限 */
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;   /* 標準の灰色●を消す */
  }
  /* 見た目の●（直径10px・押し枠の右端から2px） */
  #header .bx-wrapper .bx-pager.bx-default-pager
  a::after {
    content: "";
    position: absolute;
    top: 7px;                  /* (24-10)÷2＝上下中央 */
    right: 1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;   /* ふだんは見えない */
  }
  /* ●の色は左から赤・緑・青（社長指定・トップと同じ）。
     3色ともクリーム地#FFF3DBに3:1以上【W】 */
  #header .bx-pager
  .bx-pager-item:nth-child(1) a:hover::after,
  #header .bx-pager
  .bx-pager-item:nth-child(1)
  a:focus-visible::after,
  #header .bx-pager
  .bx-pager-item:nth-child(1) a.active::after {
    background: #DC143C;     /* 赤 4.54:1 */
  }
  #header .bx-pager
  .bx-pager-item:nth-child(2) a:hover::after,
  #header .bx-pager
  .bx-pager-item:nth-child(2)
  a:focus-visible::after,
  #header .bx-pager
  .bx-pager-item:nth-child(2) a.active::after {
    background: #287E51;     /* 緑 4.55:1 */
  }
  #header .bx-pager
  .bx-pager-item:nth-child(3) a:hover::after,
  #header .bx-pager
  .bx-pager-item:nth-child(3)
  a:focus-visible::after,
  #header .bx-pager
  .bx-pager-item:nth-child(3) a.active::after {
    background: #0069E8;     /* 青 4.56:1 */
  }
  /* bxslider標準CSSがoutline:0でフォーカス枠を消すため復活させる【W】 */
  #header .bx-wrapper .bx-pager.bx-default-pager
  a:focus-visible {
    outline: 3px solid #003399;
    outline-offset: 2px;
  }
}
/* h1 の直下の1行（‐株式会社明和住宅 代表取締役 永田明治‐）は
   category1.css 第5章の #header p（16～18px・PC22px）をそのまま使う */
/* ================================
   2. 結論の1文（リード）
   ================================ */
p.prof-lead {
  margin-top: 8px;
}
/* ================================
   3. プロフィール表（dl.prof）
   ================================
   項目名＝緑#007B43（クリーム地4.9:1）・値＝本文色。
   行の下線は情報を持たない装飾（#B87A00の点線） */
dl.prof {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
  clear: both;
}
dl.prof > div {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dotted #B87A00;
}
dl.prof dt {
  flex: 0 0 7em;               /* 項目名の幅 */
  margin: 0;
  color: #007B43;              /* green 4.9:1 */
  font-weight: normal;
}
dl.prof dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
/* 表の中の1行リンク（ブログ・SNS等）はタップ48px【G】。
   行の高さは inline-block の余白で確保（16px×1.75＝28px＋上下10px） */
dl.prof dd a {
  display: inline-block;
  min-height: 48px;
  padding: 10px 4px;
}
@media (min-width: 768px) {
  dl.prof { max-width: 800px; font-size: 20px; }   /* PC本文20px【社】 */
  dl.prof dt { flex-basis: 9em; }
  dl.prof dd a { padding: 7px 4px; }               /* 20px×1.75＝35px＋上下7px＝49px */
}
@media (max-width: 374px) {
  /* 幅374px以下は項目名と値を2段に（文字16pxは縮めない・標準3） */
  dl.prof > div { flex-wrap: wrap; gap: 0 10px; }
  dl.prof dt { flex-basis: 100%; }
}
/* ================================
   4. 保有資格（.shikaku）
   ================================
   行頭マークは「#」（標準8）。資格名のリンク（登録者検索・外部）は
   タップ48px【G】＝行の高さを48pxにそろえ、リンクの無い行も同じ高さ。
   PCは top.css 第9章と同じ2段組（右カラムの先頭を【建物】に固定） */
.shikaku {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
  clear: both;
}
.shikaku .adr-note {
  font-size: 16px;             /* 【G】16px下限 */
  line-height: 1.5;
  margin: 0 0 6px;
}
.shikaku-grp { break-inside: avoid; }
.shikaku h3 {
  margin: 10px 0 2px;
  font-size: inherit;          /* 本文と同じ大きさ（16px・PC20px） */
  font-weight: normal;
  color: #007B43;              /* green 4.9:1 */
}
.shikaku ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.3em;
}
.shikaku li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 48px;            /* リンク行と同じ高さ【G】 */
  margin: 0;
}
.shikaku li::before {
  content: "#";
  position: absolute;
  left: -1.1em;
  top: 50%;
  transform: translateY(-50%);
}
.shikaku li a {
  display: inline-block;
  min-height: 48px;            /* 【G】タップ48px */
  padding: 10px 4px 10px 0;
}
@media (min-width: 768px) {
  /* 【PCのみ】2段組・左右余白2px・列間16px。窓が狭いときだけ文字を
     自動で縮小（下限16px【G】）→いちばん長い
     「２級ファイナンシャル・プランニング技能士」（20字）が1行で入る */
  .shikaku {
    max-width: none;
    padding: 0 2px;
    font-size: 16px;           /* 旧ブラウザ保険（標準18） */
    font-size: clamp(16px, 2vw, 20px);
  }
  .shikaku .adr-note { font-size: inherit; }
  .shikaku-cols {
    columns: 2;
    column-gap: 16px;
  }
  .shikaku-cols > .adr-note { column-span: all; }
  .col2-start {
    break-before: column;
    -webkit-column-break-before: always;
  }
  .shikaku li { min-height: 49px; }
  .shikaku li a { padding: 7px 4px 7px 0; }        /* 20px×1.75＝35px＋上下7px＝49px */
}
@media (max-width: 767px) {
  /* 【スマホのみ】左右を6pxまで詰める（top.css 第9章と同じ） */
  .shikaku { padding-left: 6px; padding-right: 6px; }
}
/* ================================
   5. あゆみ（dl.ayumi）＝年月日 ＋ できごと
   ================================ */
dl.ayumi {
  max-width: 720px;
  margin: 6px auto;
  padding: 0 8px;
  clear: both;
}
dl.ayumi > div {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dotted #B87A00;
}
dl.ayumi dt {
  flex: 0 0 9.5em;
  margin: 0;
  color: #003399;              /* kon 9.9:1 */
  font-weight: bold;
}
dl.ayumi dd {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
@media (min-width: 768px) {
  dl.ayumi { max-width: 800px; font-size: 20px; }
  dl.ayumi dt { flex-basis: 10.5em; }
}
@media (max-width: 374px) {
  dl.ayumi > div { flex-wrap: wrap; gap: 0 10px; }
  dl.ayumi dt { flex-basis: 100%; }
}
/* ================================
   6. 本文中の1行リンク（p.link-line）＝押し領域48px以上
      （top.css U39 と同じ。文字16px×1.75＝28px＋上下10px）
   ================================ */
p.link-line a {
  display: inline-block;
  padding: 10px 8px;
}
/* ================================
   7. スタッフの写真（figure.staff-photo・KP1 2026-09-14）
   ================================
   代表プロフィール（Profile.html・PR9）とスタッフプロフィール（koide-Profile.html）の
   基本情報の表の上。
   中央寄せ・スマホ幅240px／PC 260px。縦横比は img の width/height 属性
   （650×650）で予約する＝読み込み時にずれない【G】CLS。角丸8pxは装飾。
   売却査定・会社概要では使っていない */
figure.staff-photo {
  max-width: 240px;
  margin: 8px auto 4px;
}
figure.staff-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
@media (min-width: 768px) {
  figure.staff-photo { max-width: 260px; }
}
/* ================================================
   微調整のあとの再確認メモ
   □ 文字16px未満・見出し20px未満になっていないか
   □ タップ高さ48px未満・リンク同士の間隔8px未満がないか
   □ 色を変えたらコントラスト比を再測定
   □ ul.bxslider の aspect-ratio（CLS対策）を消していないか
   □ フッターの指定をこのファイルに足していないか（標準5-2）
   ================================================ */