@charset "UTF-8";
/* =================================================
   profile.css - プロフィール
   SP: XD SPモック（AB 390）/ PC: XD "Profile"（AB 1200x2975）実測

   PC主要座標: ヘッダー緑罫y168 -> MV y168-753(1200x585)
     見出し「プロフィール」ベースラインy453(x100)
     リード ベースラインy830（Black20 lh34・中央・3行）
     写真帯 #EFEFEF (0,957) 1200x275 / 写真 211x137 を x=100,363,626,889 (y991)
     ビジョンボタン (532,1164) 137x30
     学歴・職歴 薄緑帯 (0,1230) 1200x415 / 写真 (100,1284) 212x311
     見出し・年カラム x369(幅116) / 内容カラム x506(幅594) / 行送り28px
   ================================================= */

/* MVは画面幅100%・縦横比1200:585 固定（クライアント指定）。上限幅は掛けない。
   重ねている見出しは % で置いて、写真の中での位置を一定に保つ */
.profile-mv {
  position: relative;
  /* SPはヘッダー（お問い合わせボタン地y119）とMV天y129の間に10pxの余白がある。PCは緑罫に接する */
  margin-top: 10px;
}

.profile-mv-photo {
  display: block;
  width: 100%;
  aspect-ratio: 390 / 497;
  object-fit: cover;
}

/* XDでは写真の上に緑文字を直接置いている。仮写真では読みにくいため白の下敷きを入れてある（要確認） */
.profile-mv-title {
  position: absolute;
  top: 22px;
  left: 15px; /* 下敷きの左パディング12pxぶん戻して文字の左端をXD実測のx27に合わせる */
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.85);
  font-size: 28px;
  font-weight: 900;
  line-height: 40px;
  color: var(--color-primary);
}

/* XD実測: PCは3行 / SPは4行（改行はマークアップ側の <br class="sp-only">）。
   SPの最長行「土木、建設、道路関係課などに勤務」は16字=320pxで、
   コンテンツ幅340pxにはギリギリ収まるが360px幅の端末では折り返してしまう。
   そこで約370px未満は文字サイズを幅に比例させ、どの端末でも同じ位置で改行させる。
     f = (100vw - 50px) / 16   ※20pxで頭打ち＝PC・390pxではXD実測値のまま */
.profile-lead {
  padding: 34px 25px 0;
  font-size: min(20px, calc(6.25vw - 3.125px));
  font-weight: 900;
  line-height: min(34px, calc(10.625vw - 5.3125px));
  text-align: center;
  color: var(--color-primary);
}

/* ---------- 活動写真の帯 + ビジョン導線 ---------- */
.profile-photos {
  margin-top: 34px;
  padding: 36px 0 33px;
  background: #efefef;
  text-align: center;
}

/* SPは2点表示（XD実測: 155x100 を x35 と x200）。3点目から先は矢印で送る */
.photo-scroller {
  padding-inline: 35px;
}

.profile-photos-track {
  display: flex;
  gap: 10px;
}

.profile-photos-track li {
  flex: 0 0 155px;
}

.profile-photos-track .photo-zoom {
  width: 100%;
}

.profile-photos-track img {
  display: block;
  width: 100%;
  aspect-ratio: 211 / 137;
  object-fit: cover;
}

.profile-photos .button {
  margin-top: 27px;
}

/* ---------- 学歴・職歴 ---------- */
.profile-history {
  padding: 33px 25px 33px; /* 帯天y1055 -> 写真天y1088 / 最終行の地から帯地まで33px */
  background: var(--color-bg-tint);
}

.profile-history-photo {
  display: block;
  width: 212px;
  aspect-ratio: 212 / 311;
  margin: 0 auto;
  object-fit: cover;
}

.profile-history-title {
  margin-top: 18px;
  font-size: 20px;
  font-weight: 900;
  line-height: 29px;
  text-align: center;
  color: var(--color-text);
}

.profile-history-list {
  margin-top: 37px; /* 見出しベースラインy1440 -> 1行目ベースラインy1500 */
}

/* SPは「年」と「内容」を2行に積む（XD SP実測 lh22） */
.profile-history-row {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.profile-history-row:first-child {
  margin-top: 0;
}

.profile-history-list dd {
  margin: 0;
}

/* =================================================
   PC（768px〜）XD "Profile" 実測
   ================================================= */
@media (min-width: 768px) {
  .profile-mv {
    margin-top: 0;
  }

  .profile-mv-photo {
    aspect-ratio: 1200 / 585;
  }

  /* XD準拠で下敷きなし・写真の上に直接置く */
  .profile-mv-title {
    top: 43.2479%; /* 1200px時 253px（MV天y168 -> 文字ボックス天y420.8）*/
    left: 8.3333%; /* 1200px時 x=100 */
    padding: 0;
    background: none;
  }

  .profile-lead {
    margin-top: 51px; /* MV地y753 -> リードボックス天y804.3 */
    padding: 0;
  }

  .profile-photos {
    margin-top: 51px; /* リード地y906.3 -> 帯天y957 */
    padding: 34px 0 38px;
  }

  /* PCは4点を等間隔（211x137 / 段間52px）で並べる。
     211x4 + 52x3 = 1000px でコンテンツ幅にちょうど収まるため、通常はスクロールしない
     （＝矢印も出ない）。写真が5点以上になったら自動的に横送りになる */
  .photo-scroller {
    width: min(var(--content-width), 100% - var(--content-pad) * 2);
    margin-inline: auto;
    padding-inline: 0;
  }

  .profile-photos-track {
    gap: 52px;
  }

  .profile-photos-track li {
    flex: 0 0 211px;
  }

  /* PCはコンテンツ幅の外（帯の余白）に矢印を置く */
  .profile-photos .photo-scroller-arrow--prev {
    left: -40px;
  }

  .profile-photos .photo-scroller-arrow--next {
    right: -40px;
  }

  .profile-photos .button {
    margin-top: 36px;
  }

  /* 学歴・職歴: 写真212px + 右カラム731px（年116 + 内容594・段間21） */
  .profile-history {
    display: grid;
    grid-template-columns: 212px 731px;
    column-gap: 57px; /* 写真右端x312 -> 右カラムx369 */
    justify-content: center;
    padding: 54px 0 46px; /* 帯天y1230 -> 写真天y1284 / 帯地y1645 */
  }

  .profile-history-photo {
    width: 212px;
    margin: 0;
  }

  .profile-history-title {
    margin-top: -1px; /* 見出しボックス天y1283.8 = 写真天y1284 とほぼ同じ */
    text-align: left;
  }

  .profile-history-list {
    margin-top: 6px; /* 見出し地y1312.8 -> リストボックス天y1319.2 */
  }

  .profile-history-row {
    display: flex;
    gap: 21px;
    margin-top: 0;
    line-height: 28px;
  }

  .profile-history-list dt {
    flex: none;
    width: 116px;
  }

  .profile-history-list dd {
    width: 594px;
  }

  .page-profile .sns-section {
    margin-top: 94px;
  }
}