/* ===== architect 専用差分 ===== */

/* PC（印刷/PC共通） */
@media print, (min-width: 768px) {
  .key-visual.key-visual-archi {
    margin-bottom: 0px;
    background-image: url("https://msd-group.co.jp/wps/wp-content/themes/fcvanilla/img/group/recruit/top/fv_main_archi.jpg");
  }
}

/* SP */
@media only screen and (max-width: 767.98px) {
  .key-visual.key-visual-archi {
	margin-bottom: 0px;
    background-image: url("https://msd-group.co.jp/wps/wp-content/themes/fcvanilla/img/group/recruit/top/sp/fv_main_archi_sp.jpg");
  }

}


/* =========================
   Architect JOB セクション専用
   ========================= */
.section-gr-job--archi { padding-left: 0; padding-right: 0; }
.section-gr-job--archi .archi-job-wrap{
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* =========================
   共通
   ========================= */
.section-gr-job--archi .job-box { width: 100%; }
.section-gr-job--archi .job-logo img { display: block; height: auto; }
.section-gr-job--archi .job-text .job-smalltitle, /* 後方互換用 */
.section-gr-job--archi .job-smalltitle { font-weight: 600; }
.section-gr-job--archi .job-media img { width: 100%; height: auto; display: block; }

/* =========================
   SP ～767.98px
   ========================= */
@media only screen and (max-width: 767.98px) {
  .section-gr-job--archi .job-box,
  .section-gr-job--archi .job-box.reverse {
    display: block;
    margin-bottom: 50px;
  }

  .section-gr-job--archi .job-body { margin-bottom: 18px;  padding-left: 0.45rem; padding-right: 0.45rem; }

  .section-gr-job--archi .job-logo img { width: 120px; margin: 0 auto 10px; }
  .section-gr-job--archi .job-smalltitle { font-size: 10px; text-align: center; margin-bottom: 10px; }

  .section-gr-job--archi .job-catch { font-size: 18px; font-weight: 700; line-height: 1.5; text-align: center; margin-bottom: 14px; }
  .section-gr-job--archi .job-desc  { font-size: 12px; line-height: 1.9; }
}

/* =========================
   PC 768px～（完全リライト / テキスト側だけ外側余白）
   ========================= */
@media print, (min-width: 768px) {
  .section-gr-job--archi {
    --edge: 0;
    --gap: 48px;
    --text-edge: clamp(16px, 3vw, 48px);
    padding-left: 0;
    padding-right: 0;
  }

  .section-gr-job--archi .job-box {
    display: flex;
    align-items: center;
    gap: var(--gap);
    margin-bottom: 0;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
  }
  .section-gr-job--archi .job-box.reverse { flex-direction: row; }

  /* === カラム比率 === */
  .section-gr-job--archi .job-body  {
    flex: 0 1 calc(35% - var(--gap)/2);
    max-width: calc(35% - var(--gap)/2);
    min-width: 0;
    text-align: center;
    padding-inline: 0;
  }
  .section-gr-job--archi .job-media {
    flex: 0 1 calc(65% - var(--gap)/2);
    max-width: calc(65% - var(--gap)/2);
    min-width: 0;
  }

  /* 1段目（画像｜文章）→ 文章は右が外側なので右だけ余白 */
  .section-gr-job--archi .job-box:not(.reverse) .job-body {
    padding-right: var(--text-edge);
  }
  /* 2段目（文章｜画像）→ 文章は左が外側なので左だけ余白 */
  .section-gr-job--archi .job-box.reverse .job-body {
    padding-left: var(--text-edge);
  }

  /* ロゴ */
  .section-gr-job--archi .job-logo img {
    width: 180px;
    display: block;
    margin: 0 auto 12px;
  }

  /* smalltitle / catch = 常に縦積み＋中央 */
  .section-gr-job--archi .job-smalltitle,
  .section-gr-job--archi .job-catch {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 12px;
    text-align: center;
  }

  /* タイポ */
  .section-gr-job--archi .job-smalltitle { font-size: 10px; }
  .section-gr-job--archi .job-catch      { font-size: 20px; font-weight: 700; line-height: 1.45; margin-bottom: 18px; }

  /* 本文 */
  .section-gr-job--archi .job-desc {
    text-align: left;
    margin: 0 auto;
    max-width: 75ch;
    line-height: 2;
    font-size: 12px;
  }

  /* 画像 */
  .section-gr-job--archi .job-media img {
    display: block;
    width: 100%;
    height: auto;
  }

  @supports not (width: fit-content) {
    .section-gr-job--archi .job-smalltitle,
    .section-gr-job--archi .job-catch { display: table; margin: 0 auto 12px; width: auto; }
  }
}

@media print, (min-width: 768px) {



  .section-gr-job--archi .job--stap .job-logo img { width: 100px; }


  .section-gr-job--archi .job--muwaku .job-logo img { width: 200px; }
}



/* ===== Recruit: 募集要項 セクション（共通） ===== */
.section-job-description { margin: 0 0 48px; }


.section-job-description .ttl_rec_architect img{
  display:block;
  margin:0 auto;
  width:30%;
  height:auto;
}


.section-job-description h3{
  font-size:26px;
  text-align:center;
  font-weight:800;
  margin:24px 0 16px;
}


.msd-job-specs-table{ width:100%; border-collapse:collapse; }
.msd-job-specs-table tr{ border-top:1px solid #e1e1e1; }
.msd-job-specs-table tr:first-child { border-top:1px solid #e1e1e1; }
.msd-job-specs-table tr:last-child { border-bottom:1px solid #e1e1e1; }


.msd-job-specs-table th,
.msd-job-specs-table td{
  padding:12px 10px;
  vertical-align:top;
  line-height:1.8;
  font-size:16px;
}

.msd-job-specs-table th{
  width:11em;
  color:#333;
  text-align:left;
  white-space:nowrap;
}


.section-job-description .msd-job-specs-table th h4{
  margin:0;
  font-size:17px;
  font-weight:900;
}

/* ===== SP差分（〜767.98px） ===== */
@media only screen and (max-width: 767.98px){

  .section-job-description .ttl_rec_architect img{
    width:70%;
    max-width:440px;
  }


  .msd-job-specs-table th,
  .msd-job-specs-table td{
    display:block;
    width:100%;
    padding:10px 8px;
    font-size:15px;
    line-height:1.8;
  }


  .msd-job-specs-table th{
    width:auto;
    padding-bottom:4px;
    white-space:normal;
  }
}




/* ========== Works========== */


.section-residence-works { background:#000; }

/* --- グリッド --- */
@media print, (min-width: 768px){
  .section-residence-works .area-works{
    display:flex; flex-wrap:wrap;
    margin:0; padding:0; list-style:none;
  }
  .section-residence-works .area-works .works-item{ width:50%; position:relative; }
}
@media only screen and (max-width: 767.98px){
  .section-residence-works{ border-top:1px solid #4d4d4d; padding-bottom:0px; }
  .section-residence-works .area-works{
    display:block; margin:0; padding:0; list-style:none;
  }
  .section-residence-works .area-works .works-item{ width:100%; position:relative; }
}

/* --- クリック領域（a） --- */
.section-residence-works .area-works .item-wrapper{
  display:block; position:relative; text-decoration:none; color:inherit;
}

/* --- 背景画像の器 --- */
.section-residence-works .area-works .item-background{
  position:relative; overflow:hidden;
}
@media print, (min-width: 768px){
  .section-residence-works .area-works .item-background{ min-height:45vh; }
}
@media only screen and (max-width: 767.98px){
  .section-residence-works .area-works .item-background{ height:375px; }
}

/* 背景画像：全面カバー */
.section-residence-works .area-works .item-background > img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; max-width:none; z-index:0;
}

/* 暗転レイヤー（PCはホバー時のみ） */
.section-residence-works .area-works .item-background::before{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.6);
  opacity:0; transition:opacity .3s ease; pointer-events:none; z-index:1;
}

/* --- タイトルオーバーレイ（中央寄せ） --- */
.section-residence-works .area-works .item-title{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; color:#fff;
  padding:20px; z-index:3; opacity:0; transition:opacity .3s ease;
}
.section-residence-works .area-works .item-title h3{ font-weight:600; }
.section-residence-works .area-works .item-title h3 span{ display:block; font-weight:400; margin:10px 0; }

@media print, (min-width: 768px){
  .section-residence-works .area-works .item-title h3{ font-size:22px; }
  .section-residence-works .area-works .item-title h3 span{ font-size:14px; }
  .section-residence-works .area-works .item-wrapper:hover .item-background::before{ opacity:1; }
  .section-residence-works .area-works .item-wrapper:hover .item-title{ opacity:1; }
}

@media only screen and (max-width: 767.98px){
  .section-residence-works .area-works .item-title{
    opacity:1; background:rgba(0,0,0,.6);
  }
  .section-residence-works .area-works .item-title h3{ font-size:18px; }
  .section-residence-works .area-works .item-title h3 span{ font-size:12px; }
}

/* ========== Modal========== */
/* .is-open を付与して開閉（JS側） */
.section-residence-works .modal{
  display:none; position:fixed; inset:0; z-index:9999;
}
.section-residence-works .modal.is-open{ display:block; }

.section-residence-works .modal-bg{
  position:absolute; inset:0; background:rgba(0,0,0,.7);
}

.section-residence-works .modal-content{
  position:absolute; background:#fff; overflow:auto;
}
@media print, (min-width: 768px){
  .section-residence-works .modal-content{ height:96vh; width:94%; top:3%; left:3%; }
}
@media only screen and (max-width: 767.98px){
  .section-residence-works .modal-content{ height:100vh; width:94%; top:0; left:3%; }
}

/* ヘッダー・テキスト */
.section-residence-works .modal-content .modal_header{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:0;
  padding:20px; border-bottom:1px solid #eee;
}
.section-residence-works .modal-content .modal_header img{ margin:0 40px 0 0; }
.section-residence-works .modal-content .modal_header .ttl{ font-weight:600; font-size:16px; margin-bottom:5px; }
.section-residence-works .modal-content .modal_header .ttl span{ font-weight:400; font-size:12px; margin-left:15px; }
.section-residence-works .modal-content .modal_header p{ font-size:12px; margin:0; }

@media only screen and (max-width: 767.98px){
  .section-residence-works .modal-content .modal_header{ padding:15px; }
  .section-residence-works .modal-content .modal_header img{ margin:0 0 20px 0; }
  .section-residence-works .modal-content .modal_header .ttl{ font-size:14px; }
  .section-residence-works .modal-content .modal_header .ttl span{ font-size:12px; margin-left:10px; }
  .section-residence-works .modal-content .modal_header p{ font-size:12px; }
}

/* 内容グリッド（任意） */
.section-residence-works .modal-content .modal_content{
  padding:14px; display:grid; gap:10px;
}
.section-residence-works .modal-content .modal_content img{
  width:100%; height:auto; display:block;
}

/* 閉じるボタン（右上固定） */
.section-residence-works .js-modal-close.btn-close{
  position:fixed; background:transparent; border:0; padding:0; cursor:pointer;
}
@media print, (min-width: 768px){
  .section-residence-works .js-modal-close.btn-close{ top:calc(3% + 30px); right:calc(3% + 30px); }
}
@media only screen and (max-width: 767.98px){
  .section-residence-works .js-modal-close.btn-close{ top:10px; right:calc(3% + 10px); width:45px; height:45px; }
}







/* ===== Architect Interview ===== */
.architect-interview { width:100%; margin:60px 0 60px; }


/* 2枚横並び（PC） */
.architect-interview .ai-grid{
  display:flex;
  flex-wrap:wrap;
  gap:0;
}
.architect-interview .ai-item{
  width:50%;
  display:block;
  line-height:0;       /* 画像下の隙間防止 */
  overflow:hidden;
  position:relative;
  text-decoration:none;
  color:inherit;
}
.architect-interview .ai-item img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;    /* 画像のトリミングで高さ揃え */
  aspect-ratio:16/9;   /* 必要に応じて比率変更可（例：2/1, 3/2 等） */
  transition:transform .35s ease;
}
.architect-interview .ai-item:hover img{ transform:scale(1.02); }

/* SP：左→右の順で縦並び（991.98px基準） */
@media (max-width: 991.98px){
  .architect-interview .ai-item{ width:100%; }
  .architect-interview .ai-item img{ aspect-ratio:4/3; }
}






.item-title h3 span:first-of-type { display: inline-block; padding: 0.2em 0.6em; border: 0.5px solid #fff; }