/* ==========================================================================
   LPのコンサルタント・スタッフ紹介（共通パーツ /include_files/lp_staff/）
   見た目は headlesscms の「監修・担当」と同じ。各LPのCSSに左右されないよう lps- で完結させる
   見出し（h2.sec-ttl）だけは各LPの見出しのデザインに合わせる
   ========================================================================== */

.lps{
  --lps-blue:#1b76df;
  --lps-navy:#02239b;
  --lps-text:#2c3a5c;
  --lps-tint:#ebf2fa;
  padding:100px 0;
  background:#fff;
}
.lps *,.lps *::before,.lps *::after{box-sizing:border-box}
.lps__in{max-width:1120px;margin:0 auto;padding:0 20px}
.lps__h{margin-bottom:40px}
.lps__lead{margin:0 0 40px}
/* h3 で出すとき（元がスライダーの h3 だったページ） */
.lps__h--sub{margin:0 0 32px;color:#1a294e;font-size:24px;font-weight:700;line-height:1.5;text-align:center}
/* 見出しなし（ページ側の見出しの中に置く）：余白と背景はページに任せる */
.lps.lps--bare{padding:0;background:none}
.lps--bare .lps__in{max-width:none;padding:0}

/* カードの並び：人数が少ないときはカードが横いっぱいに伸びる（auto-fit） */
.lps__list{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));max-width:1080px;margin:0 auto;padding:0;list-style:none;container-type:inline-size}

/* 同じ行のカードどうしで「写真・肩書きの欄」と「本文」の高さをそろえ、本文の書き出しを合わせる */
.lps__item{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:20px;align-content:start;min-width:0;margin:0;padding:24px 24px 26px;background:var(--lps-tint);border-radius:15px;list-style:none}
.lps__item>*{min-width:0}
/* 背景が色付きのページ用：カードを白に（タグ・肩書きの白は薄い水色にして区別） */
.lps--white .lps__item{background:#fff}
.lps--white .lps__role,.lps--white .lps__chips span,.lps--white .lps__photo{background:var(--lps-tint)}

/* 左に肩書き → 名前 → タグ、右端に写真（カードの右端に余白なし・左側だけ角丸） */
.lps__head{display:grid;grid-template-columns:minmax(0,1fr) 160px;grid-template-rows:auto auto auto 1fr;gap:0 20px;align-items:start;align-self:stretch;margin:0 -24px 2px 0}
.lps__photo{grid-column:2;grid-row:1/-1;position:relative;display:block;overflow:hidden;aspect-ratio:624/784;border-radius:.8rem 0 0 .8rem;background:#fff}
/* 拡大はしない。枠に合わせて切るときは上端を基準にして、頭の上の余白を残す */
.lps__img{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;max-width:none;margin:0;padding:0;border:0;border-radius:0;object-fit:cover;object-position:50% 0}

.lps__role{grid-column:1;grid-row:1;justify-self:start;position:relative;z-index:2;display:inline-block;margin:0;padding:4px 16px;background:#fff;border:1px solid var(--lps-blue);border-radius:20px;color:var(--lps-blue);font-size:14px;font-weight:700;line-height:1.5;letter-spacing:.02em;white-space:nowrap}
.lps__name{grid-column:1;grid-row:2;position:relative;margin:14px 0 0;padding:0;color:var(--lps-navy);font-size:21px;font-weight:700;line-height:1.3;letter-spacing:.02em}
.lps__en{display:block;margin:8px 0 0;color:var(--lps-text);font-size:13px;font-weight:500;line-height:1.3;letter-spacing:.08em}
.lps__chips{grid-column:1;grid-row:3;position:relative;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:10px 0 0;color:var(--lps-text);font-size:13px;line-height:1.9;letter-spacing:.02em;word-break:keep-all;overflow-wrap:anywhere}
.lps__chips span{display:block;padding:2px 10px;background:#fff;border:1px solid rgba(26,41,78,.14);border-radius:999px;white-space:nowrap}

.lps__body{align-self:start}
.lps__txt{margin:0;padding:0;color:var(--lps-text);font-size:16px;font-weight:400;line-height:1.9;letter-spacing:.02em;text-align:left;word-break:normal;overflow-wrap:anywhere;line-break:strict}

/* Xのリンク（ローマ字の後ろ） */
.lps__x{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:8px;vertical-align:middle;border-radius:50%;background:#000;color:#fff;text-decoration:none}
.lps__x svg{width:13px;height:13px}

/* 経歴の年表（「経歴を見る」で開く） */
.lps__career{margin:16px 0 0}
.lps__career summary{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;background:#fff;border:1px solid var(--lps-blue);border-radius:999px;color:var(--lps-blue);font-size:14px;font-weight:700;line-height:1.5;cursor:pointer;list-style:none}
.lps__career summary::-webkit-details-marker{display:none}
.lps__career summary::after{content:"";width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.lps__career[open] summary::after{margin-top:4px;transform:rotate(-135deg)}
.lps__tl{margin:14px 0 0;padding:0;list-style:none;border-left:2px solid rgba(27,118,223,.3)}
.lps__tl li{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:8px;margin:0;padding:4px 0 4px 14px;color:var(--lps-text);font-size:14px;line-height:1.7}
.lps__tl b{color:var(--lps-blue);font-weight:700}

/* SPの「もっと見る」（PCでは出さない） */
.lps__more{display:none}


/* 写真の幅：2〜3カラムのときは正方形・カード幅の46%（3カラムは40%） */
@media (min-width:769px){
  /* 4人のときは「3枚＋1枚」にせず 2列×2段 */
  .lps__list:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
  @container (min-width:624px){
    .lps__list:has(>:nth-child(2)) .lps__head{grid-template-columns:minmax(0,1fr) calc((100cqi - 24px) / 2 * .46)}
    .lps__list:has(>:nth-child(2)) .lps__photo{aspect-ratio:1/1}
  }
  @container (min-width:948px){
    .lps__list:has(>:nth-child(3):last-child) .lps__head{grid-template-columns:minmax(0,1fr) calc((100cqi - 48px) / 3 * .40)}
  }
}

@media (max-width:768px){
  .lps{padding:64px 0}
  .lps__in{padding:0 5vw}
  .lps.lps--bare{padding:0}
  .lps--bare .lps__in{padding:0}
  .lps__h{margin-bottom:30px}
  .lps__h--sub{margin-bottom:24px;font-size:20px}
  .lps__item{padding:20px}
  .lps__head{grid-template-columns:minmax(0,1fr) 130px;column-gap:16px;margin-right:-20px}
  .lps__txt{font-size:15px}
  .lps--more:not(.is-open) .lps__item:nth-child(n+2){display:none}
  .lps__more{display:flex;align-items:center;justify-content:center;gap:10px;margin:24px auto 0;padding:10px 28px;background:#fff;border:1px solid var(--lps-blue);border-radius:999px;color:var(--lps-blue);font-size:16px;font-weight:700;line-height:1.5;cursor:pointer}
  .lps__more::after{content:"";width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
  .lps.is-open .lps__more::after{margin-top:4px;transform:rotate(-135deg)}
}

/* タグなしのカード：写真の下が空かないよう、写真を横長（元画像と同じ 552:400）・カード幅の約半分に
   （.lps__head はカードの右余白24pxぶんはみ出しているので、カード幅の半分 = 50% + 12px） */
.lps__list .lps__item.is-notag .lps__head{grid-template-columns:minmax(0,1fr) calc(50% + 12px)}
.lps__list .lps__item.is-notag .lps__photo{aspect-ratio:552/400}
/* 3列のときはカードが細く、肩書き（長いもの：コンテンツディレクター等）が写真にかぶるので
   写真はカード幅の42%、写真との間と肩書きの左右の余白を少し詰める */
@media (min-width:769px){
  @container (min-width:948px){
    .lps__list:has(>:nth-child(3):last-child) .lps__head{column-gap:14px}
    .lps__list:has(>:nth-child(3):last-child) .lps__role{padding-left:12px;padding-right:12px}
    .lps__list:has(>:nth-child(3):last-child) .lps__item.is-notag .lps__head{grid-template-columns:minmax(0,1fr) calc(42% + 10px)}
    /* 3列のときは写真（人物）を120%に拡大。上端を基準にして頭の上は切らない */
    .lps__list:has(>:nth-child(3):last-child) .lps__img{transform:scale(1.2);transform-origin:50% 0}
  }
}
@media (max-width:768px){
  /* SPはカードが細いので、写真はカード幅の42%＋写真との間を詰める（半分だと肩書きが入らない） */
  .lps__list .lps__item.is-notag .lps__head{grid-template-columns:minmax(0,1fr) calc(42% + 8px);column-gap:12px}
  .lps__item.is-notag .lps__role{padding-left:12px;padding-right:12px}
}

/* 1人だけのとき：写真はカードの右上（右にも余白をとり四隅を角丸・やや縦長4:5）。
   肩書き・名前・タグ・本文はすべて写真の左に並べる（PC）。SPはほかのカードと同じ並び */
@media (min-width:769px){
  .lps__list>.lps__item:only-child{grid-row:auto;grid-template-rows:auto auto auto auto 1fr;grid-template-columns:minmax(0,1fr) 240px;column-gap:40px;row-gap:0}
  .lps__list>.lps__item:only-child .lps__head{display:contents}
  .lps__list>.lps__item:only-child .lps__photo{grid-column:2;grid-row:1/-1;align-self:start;aspect-ratio:4/5;border-radius:.8rem}
  .lps__list>.lps__item:only-child .lps__role{grid-column:1;grid-row:1}
  .lps__list>.lps__item:only-child .lps__name{grid-column:1;grid-row:2}
  .lps__list>.lps__item:only-child .lps__chips{grid-column:1;grid-row:3}
  .lps__list>.lps__item:only-child .lps__body{grid-column:1;grid-row:4;margin-top:20px}
}
@media (max-width:768px){
  .lps__list>.lps__item:only-child .lps__head{grid-template-columns:minmax(0,1fr) 38%;margin-right:0}
  .lps__list>.lps__item:only-child .lps__photo{aspect-ratio:4/5;border-radius:.8rem}
}

/* LP側に「セクション内の p・li の文字サイズを !important で固定」する指定があるページ（internal-seo など）でも
   カードの文字サイズが崩れないよう、詳細度を上げて固定する */
html body .lps.lps.lps .lps__role{font-size:14px!important;line-height:1.5!important;white-space:nowrap!important}
html body .lps.lps.lps .lps__name{font-size:21px!important;line-height:1.3!important}
html body .lps.lps.lps .lps__chips{font-size:13px!important;line-height:1.9!important}
html body .lps.lps.lps .lps__txt{font-size:16px!important;line-height:1.9!important}
html body .lps.lps.lps .lps__career summary{font-size:14px!important;line-height:1.5!important}
html body .lps.lps.lps .lps__tl li{font-size:14px!important;line-height:1.7!important}
@media (max-width:768px){
  html body .lps.lps.lps .lps__txt{font-size:15px!important}
  /* SPで肩書きが長い（取締役CCO・プロデューサー等）ときは、写真にかぶらないよう折り返す */
  html body .lps.lps.lps .lps__role{white-space:normal!important;border-radius:14px}
  /* 肩書きを <span> で区切っているときは、区切りの位置で改行する（例：取締役CCO・／制作責任者） */
  html body .lps.lps.lps .lps__role>span{display:inline-block}
}