@charset "utf-8";


/*==================================================
一覧
===================================*/
.rookies_list { width:100%; display:grid; grid-template-columns:1fr; row-gap:50px; margin-bottom:50px; }
.rookies_list li a { display:block; color:#000; }
.rookies_list_photo { width:100%; aspect-ratio:4 / 3; position:relative; overflow:hidden; }
.rookies_list_photo img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.6s ease; }
.rookies_list li a:hover .rookies_list_photo img { transform:scale(1.05); }
.rookies_list_copy { width:100%; position:absolute; left:0; bottom:0; padding:40px 14px 12px 14px; font-size:16px; line-height:1.5em; letter-spacing:0.05em; color:#fff; background:linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0)); }
.rookies_list_name { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:16px; row-gap:4px; margin-top:12px; }
.rookies_list_name strong { font-size:20px; letter-spacing:0.05em; }

/*ローマ字（一覧・詳細共通）*/
.rookies_roman { font-family:"Helvetica Neue", Arial, sans-serif; font-weight:bold; font-size:14px; letter-spacing:0.05em; color:#B3212B; }


/*==================================================
詳細
===================================*/
.rookies_detail { margin-bottom:60px; }

/*プロフィール*/
.rookies_profile { padding:96px 0 40px 0; }
.rookies_profile .contents { display:flex; flex-direction:column; gap:24px; }
.rookies_profile_photo { width:100%; aspect-ratio:4 / 3; overflow:hidden; }
.rookies_profile_photo img { width:100%; height:100%; object-fit:cover; display:block; }
.rookies_profile_head { position:relative; padding-bottom:8px; border-bottom:1px solid #B3212B; }
.rookies_label { display:block; font-size:13px; letter-spacing:0.1em; color:#999; margin-bottom:2px; }
.rookies_name { position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:baseline; column-gap:14px; font-size:26px; line-height:1.4em; letter-spacing:0.05em; }
.rookies_num { position:absolute; right:0; bottom:-2px; font-size:56px; line-height:1; color:rgba(179,33,43,0.1); }
.rookies_profile_list { padding-top:16px; font-size:14px; letter-spacing:0.08em; }
.rookies_profile_list div { display:flex; line-height:2em; margin-bottom:10px; }
.rookies_profile_list div:last-child { margin-bottom:0; }
.rookies_profile_list dt { width:120px; flex-shrink:0; font-weight:bold; }
.rookies_profile_list dd { flex:1; }

/*インタビュー*/
.rookies_interview { position:relative; overflow:hidden; background:#B3212B; padding:50px 0 60px 0; }
.rookies_interview_english { position:absolute; top:-0.13em; right:-0.08em; font-size:64px; line-height:1; color:rgba(255,255,255,0.12); white-space:nowrap; pointer-events:none; }
.rookies_interview .contents { position:relative; z-index:1; }
.rookies_interview_copy { display:block; font-size:20px; line-height:1.6em; letter-spacing:0.05em; color:#fff; margin-bottom:30px; }
.rookies_qa { background:#fff; padding:30px 20px; margin-bottom:30px; }
.rookies_qa:last-child { margin-bottom:0; }
.rookies_q { font-size:16px; line-height:1.6em; letter-spacing:0.08em; font-weight:bold; color:#B3212B; margin-bottom:16px; }
.contents p.rookies_a { width:100%; display:block; font-size:14px; line-height:2em; letter-spacing:0.08em; }
.rookies_a em { font-weight:bold; color:#B3212B; }
.rookies_qa_photo { width:100%; max-width:300px; aspect-ratio:3 / 4; object-fit:cover; display:block; margin:24px auto 0 auto; }

/*ページ送り*/
.rookies_pager { background:#E5E5E5; }
.rookies_pager .contents { height:60px; display:flex; align-items:center; justify-content:space-between; }
.rookies_pager a { display:flex; align-items:center; gap:8px; color:#000; transition:opacity 0.3s ease; }
.rookies_pager a:hover { opacity:0.6; }
.rookies_pager em { font-size:13px; letter-spacing:0.05em; }
.rookies_pager_name { font-size:13px; font-weight:bold; letter-spacing:0.05em; }
.rookies_pager .nav_arrow { width:24px; height:24px; flex-shrink:0; overflow:hidden; border-radius:50%; border:1px solid #000; display:flex; align-items:center; justify-content:center; }
.rookies_pager .nav_arrow img { width:11px; filter:brightness(0); }
.rookies_pager a.next:hover .nav_arrow img { animation:arrowLoop 1s linear infinite; }
.rookies_pager a.prev .nav_arrow img { transform:scaleX(-1); }
.rookies_pager a.prev:hover .nav_arrow img { animation:rookiesArrowLoopReverse 1s linear infinite; }

@keyframes rookiesArrowLoopReverse {
  0%   { transform:scaleX(-1) translateX(0); opacity:1; }
  49%  { transform:scaleX(-1) translateX(70px); opacity:0; }
  50%  { transform:scaleX(-1) translateX(-70px); opacity:0; }
  51%  { opacity:1; }
  100% { transform:scaleX(-1) translateX(0); opacity:1; }
}


@media screen and (min-width:768px) {
  /*一覧*/
  .rookies_list { grid-template-columns:repeat(2, 1fr); column-gap:18px; row-gap:80px; padding-top:20px; margin-bottom:100px; }
  .rookies_list_copy { padding:50px 16px 14px 16px; }
  .rookies_list_name { margin-top:14px; }
  .rookies_list_name strong { font-size:24px; }
  .rookies_list_name .rookies_roman { font-size:16px; }

  /*詳細*/
  .rookies_detail { margin-bottom:100px; }
  .rookies_profile { padding:60px 0 55px 0; }
  .rookies_profile .contents { flex-direction:row; align-items:flex-start; gap:50px; }
  .rookies_profile_photo { width:37%; flex-shrink:0; }
  .rookies_profile_text { flex:1; }
  .rookies_label { font-size:15px; }
  .rookies_name { column-gap:16px; font-size:32px; }
  .rookies_name .rookies_roman { font-size:16px; }
  .rookies_num { font-size:80px; }
  .rookies_profile_list { padding-top:20px; font-size:15px; }
  .rookies_profile_list div { line-height:32px; margin-bottom:16px; }
  .rookies_profile_list dt { width:150px; }

  .rookies_interview { padding:65px 0 140px 0; }
  .rookies_interview_english { font-size:140px; }
  .rookies_interview_copy { font-size:36px; line-height:1.5em; margin-bottom:55px; }
  .rookies_qa { padding:50px; margin-bottom:60px; }
  .rookies_q { font-size:18px; margin-bottom:20px; }
  .contents p.rookies_a { font-size:15px; line-height:32px; }
  .rookies_qa_body.has_photo { display:flex; align-items:flex-start; gap:55px; }
  .rookies_qa_body.has_photo .rookies_a { flex:1; }
  .rookies_qa_photo { width:32%; max-width:none; flex-shrink:0; margin:0; }

  .rookies_pager .contents { height:80px; }
  .rookies_pager a { gap:10px; }
  .rookies_pager em { font-size:14px; }
  .rookies_pager_name { font-size:15px; }
}

@media screen and (min-width:1024px) {
  .rookies_list { grid-template-columns:repeat(3, 1fr); }
  .rookies_list_copy { font-size:clamp(15px, 1.35vw, 18px); }

  .rookies_qa { padding:75px; }
}
