/**
 * index2.css — 白報会グループ 採用サイト 入口ページ（C案：写真主役）専用スタイル
 * （もとは index2.php 内のインライン <style> を分離したもの）
 */
:root{
  --navy:#1a2744; --navy-dark:#0f1a30;
  --gold:#c9a227; --gold-light:#e8d59a;
  --green:#22c55e;
  --page:#dbe5ee; --ink:#1f2b45;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Noto Sans JP',sans-serif;font-weight:400;
  background:var(--page);
  background-image:linear-gradient(160deg,#eef4f9 0%,#d5e1ea 52%,#c1d2e0 100%);
  background-attachment:fixed;                    /* スクロールしても背景は固定 */
  color:var(--ink);line-height:1.7;
  overflow:hidden;                                /* PC/タブレット/スマホとも1画面固定 */
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit;}

.pf-wrap{width:100%;height:100dvh;min-height:0;overflow:hidden;display:flex;flex-direction:column;}

/* ===== ヒーロー ===== */
.pf-hero{flex:none;text-align:center;padding:44px 24px 30px;}
.pf-hero h1{
  font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:clamp(1.4rem,3.4vw,2.05rem);color:var(--navy);
  letter-spacing:.06em;line-height:1.5;
}
.pf-hero p{margin-top:12px;font-size:.9rem;color:#5b6474;}

/* ===== パネル 2分割 ===== */
/* 左端余白 = パネル間 = 右端余白 を厳密に均等に（左右padding と gap を同値／中央寄せmax-widthは外す）。
   上下(padding-block)は左右と別に、同値かつ大きめに */
.pf-panels{display:flex;flex:1;min-height:0;gap:104px;padding:64px 104px;width:100%;}
.pf-slot{flex:1 1 50%;display:flex;min-height:0;}

/* 写真主役パネル：写真を全面に、最小オーバーレイ＋左上カード */
.pf-panel{
  position:relative;width:100%;min-height:0;height:100%;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;
  box-shadow:0 12px 34px rgba(15,26,48,.18);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
/* 写真本体（この層だけズームする） */
.pf-panel::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:var(--shot) center/cover no-repeat;
  transition:transform .7s var(--ease);
}
.pf-panel.is-empty::before{
  background:repeating-linear-gradient(135deg,#dfe4ea 0 16px,#e8edf3 16px 32px);
}
/* C案の最小オーバーレイ（斜め・左上を暗く） */
.pf-panel::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(125deg,rgba(15,26,48,.6) 0%,rgba(15,26,48,.13) 42%,transparent 64%);
}

/* 左上カード */
.pf-card{position:relative;z-index:3;margin:2rem;text-align:left;}
.pf-en{
  font-family:'Shippori Mincho',serif;font-size:.72rem;letter-spacing:.32em;
  color:var(--gold-light);margin-bottom:.55rem;text-transform:uppercase;
}
.pf-ttl{
  font-family:'Shippori Mincho',serif;font-weight:600;
  font-size:clamp(1.7rem,2.8vw,2.1rem);color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.5);line-height:1.3;
}
.pf-bar{width:46px;height:2px;background:var(--gold);margin:1rem 0;}
.pf-cta{
  display:inline-flex;align-items:center;gap:.5em;color:#fff;
  font-family:'Shippori Mincho',serif;font-size:.95rem;letter-spacing:.04em;
  transition:gap .25s var(--ease);
}
/* 募集職種：バッジ／帯風（紺の半透明＋金の左アクセント） */
.pf-meta{
  position:relative;z-index:3;margin:auto 2rem 2rem;align-self:flex-start;
  display:inline-block;padding:.55em 1em;
  background:rgba(15,26,48,.62);backdrop-filter:blur(2px);
  border-left:3px solid var(--gold);border-radius:5px;
  font-size:.76rem;color:#f2f0ea;letter-spacing:.03em;line-height:1.6;
}

.pf-photo-note{
  position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:.85rem;color:#8a93a4;letter-spacing:.12em;
}

/* ===== コメディカル：緑アクセント＋準備中（ベール＋斜め帯） ===== */
.pf-panel--come{cursor:not-allowed;}
.pf-panel--come .pf-en{color:var(--green);}          /* FOR COMEDICAL STAFF */
.pf-panel--come .pf-bar{background:var(--green);}     /* 見出し下の線 */
.pf-panel--come .pf-meta{border-left-color:var(--green);}  /* 募集職種バッジ左の線 */
.pf-panel--come .pf-veil{
  content:"";position:absolute;inset:0;z-index:4;
  background:rgba(15,20,30,.5);pointer-events:none;
}
.pf-ribbon{
  position:absolute;top:50%;left:50%;z-index:6;
  width:180%;padding:26px 0;text-align:center;
  transform:translate(-50%,-50%) rotate(-16deg);
  background:linear-gradient(135deg,rgba(52,211,153,.94),rgba(22,163,74,.94));color:#fff;
  font-family:'Shippori Mincho',serif;
  font-size:1.05rem;font-weight:600;letter-spacing:.22em;
  box-shadow:0 6px 20px rgba(0,0,0,.25);pointer-events:none;
}

/* ホバー（浮き上がり＋写真ズーム＋CTA矢印が伸びる） */
@media(hover:hover){
  a.pf-panel:hover{transform:translateY(-10px);box-shadow:0 30px 60px rgba(15,26,48,.32);}
  a.pf-panel:hover::before{transform:scale(1.07);}
  a.pf-panel:hover .pf-cta{gap:.9em;}
}

/* 読み込みアニメーション */
@keyframes pfInUp{from{opacity:0;transform:translateY(-24px);}to{opacity:1;transform:translateY(0);}}
@keyframes pfInLeft{from{opacity:0;transform:translateX(-60px);}to{opacity:1;transform:translateX(0);}}
@keyframes pfInRight{from{opacity:0;transform:translateX(60px);}to{opacity:1;transform:translateX(0);}}
.pf-hero{animation:pfInUp .8s var(--ease) backwards;}
.pf-slot--doc{animation:pfInLeft .9s var(--ease) .15s backwards;}
.pf-slot--come{animation:pfInRight .9s var(--ease) .3s backwards;}
@media(prefers-reduced-motion:reduce){
  .pf-hero,.pf-slot--doc,.pf-slot--come{animation:none;}
}

/* ===== レスポンシブ（スマホ：縦積みで1画面に収める・スクロールなし） ===== */
@media(max-width:768px){
  html,body{height:100%;}
  body{overflow:hidden;}                         /* スクロールさせず1画面に固定 */
  .pf-wrap{height:100dvh;min-height:0;overflow:hidden;}

  .pf-hero{flex:none;padding:16px 16px 12px;}
  .pf-hero h1{font-size:clamp(1.1rem,5vw,1.45rem);line-height:1.4;}
  .pf-hero p{margin-top:5px;font-size:.74rem;}

  /* 左右余白・パネル間・上パネル上・下パネル下 をすべて同値で大きく */
  .pf-panels{flex:1;min-height:0;flex-direction:column;gap:24px;padding:24px;}
  .pf-slot{flex:1 1 0;min-height:0;}

  .pf-panel{min-height:0;height:100%;overflow:hidden;border-radius:12px;}
  .pf-card{margin:1.1rem 1.2rem;}
  .pf-en{font-size:.64rem;letter-spacing:.24em;margin-bottom:.35rem;}
  .pf-ttl{font-size:clamp(1.4rem,5.4vw,1.8rem);}
  .pf-bar{margin:.65rem 0;}
  .pf-cta{font-size:.85rem;}
  .pf-meta{margin:auto 1.2rem 1.1rem;font-size:.68rem;padding:.45em .8em;}

  .pf-ribbon{font-size:.9rem;padding:14px 0;letter-spacing:.16em;}  /* 準備中の帯も画面に合わせて控えめに */
}
@media(max-width:400px){
  .pf-ttl{font-size:clamp(1.3rem,6vw,1.55rem);}
}