/* 9月28日に追記：承認済みトップWhy GP?専用スタイル。 */
/* 9月25日に追記：トップ追加セクション。背景と装飾文字は支給素材を使用。 */
#why-gp, #why-gp * { box-sizing: border-box; }
#why-gp { position:relative; width:100%; min-height: min(55.31vw, 885px); padding:clamp(54px,6vw,96px) 3.5%; background:#000 url('../img/top_new/why-gp-20260928/whygp_bg.webp') center / cover no-repeat; color:#fff; overflow:hidden; }
#why-gp .gp-top-why__visual { position:absolute; top:10%; left:2%; width:49%; height:auto; opacity:.52; }
#why-gp .gp-top-why__content { position:relative; width:49%; margin-left:auto; text-align:right; }
#why-gp h2 { margin:0; color:#ff0; font-size:clamp(24px,2.2vw,32px); line-height:1.5; font-weight:700; letter-spacing:.04em; }
#why-gp p { margin:20px 0 0; font-size:clamp(14px,1.3vw,18px); line-height:1.9; font-weight:700; letter-spacing:0; text-shadow:0 1px 4px #0008; }
#why-gp .gp-top-why__link { display:flex; width:min(100%,315px); min-height:44px; margin:24px 0 0 auto; align-items:center; justify-content:center; border:1px solid #ff0; border-radius:24px; color:#ff0; font:500 18px/1.4 'Oswald',sans-serif; text-decoration:none; transition:background .2s,color .2s; }
#why-gp .gp-top-why__link:hover { background:#ff0; color:#000; }
#why-gp .gp-top-why__link:focus-visible { outline:3px solid #fff; outline-offset:5px; }
/* 9月25日に追記：中間幅での文章の回り込みを許容し、左右の重なりを防止。 */
@media (min-width:768px) and (max-width:1100px) {
  #why-gp { min-height:560px; padding-top:60px; }
  #why-gp .gp-top-why__visual { width:37%; top:15%; }
  #why-gp .gp-top-why__content { width:58%; }
  #why-gp .gp-desktop-break { display:none; }
}
/* 9月25日に追記：SPは装飾・見出し・本文・ボタンを縦に配置。 */
@media (max-width:767px) {
  #why-gp { min-height:580px; padding:42px 24px 160px; background-position:48% bottom; }
  #why-gp .gp-top-why__visual { position:relative; inset:auto; display:block; width:min(82%,330px); margin:0 auto 30px; }
  #why-gp .gp-top-why__content { width:100%; text-align:center; }
  #why-gp h2 { font-size:24px; }
  #why-gp p { margin-top:20px; font-size:15px; line-height:1.9; text-shadow:0 1px 5px #000; }
  #why-gp .gp-desktop-break { display:none; }
  #why-gp .gp-top-why__link { margin:24px auto 0; background:#0006; }
  #why-gp .gp-top-why__link:hover { background:#ff0; }
}
/* 9月25日に追記：動きを抑える設定。 */
@media (prefers-reduced-motion:reduce) { #why-gp .gp-top-why__link { transition:none; } }