@charset "UTF-8";
@import url("https://use.typekit.net/lcu5inz.css");

/* ページ全体設定 */
html {
scroll-behavior: smooth;
}

:root {
/* カラー */
--color-main:#050505;
--color-point: #444444;
--color-accent: #bbef16;
--color-base:  #FFFFFF;
--color-base-2: #d9d9d9;
--color-base-3: #73737e;
}

#header {
z-index: 10;
}

#player2025 {
width: 99.2vw;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3",
"Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック",
"MS PGothic", sans-serif;
font-size: 1rem;
}

#player2025 section {
padding-bottom: 5rem;
}

#player2025 section > div {
max-width: 982px;
}

/* 2025ロゴ */
#player2025 .topImg {
display: block;
text-align: center;
width: 30%;
margin: 40px auto 24px;
}

#player2025 #nav {
padding-bottom: 1rem;
}

#player2025 nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
align-items: center;
}

#player2025 nav a {
color: var(--color-main);
padding: 0.25rem 2rem;
display: block;
font-size: 2rem;
text-align: center;
}

#player2025 nav a:hover {
opacity: 0.8;
}

#player2025 h2,
#player2025 nav {
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: normal;
}

#player2025 h2 {
font-size: 4rem;
padding-top: 5rem;
margin-top: 0;
margin-bottom: 1rem;
position: relative;
}

#player2025 a {
text-decoration: none;
}

/* 背景パターン */
#player2025 .pattern-A,
#player2025 .pattern-B,
#player2025 .pattern-C {
background-size: 100%;
background-repeat: repeat;
}

/* 見出し上線 */
#player2025 .obi {
margin: 3rem auto 1rem;
}

#player2025 .obi:first-child{
  margin-top: 0;
}

#player2025 .heading {
position: relative;
text-align: center;
}

#player2025 .heading::before {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 2px;
display: block;
}

#player2025 .pattern-A .heading::before,
#player2025 .pattern-B .heading::before {
background: var(--color-main);
}

#player2025 .pattern-C .heading::before {
background: var(--color-main);
}

#player2025 .pattern-A h2,
#player2025 .pattern-B h2 {
color: var(--color-main);
}

#player2025 .pattern-C h2 {
color: var(--color-main);
}

#player2025 .info {
text-align: center;
font-size: 1rem;
margin-bottom: 3rem;
color: var(--color-main);
}

#player2025 .info .nowrap{
white-space: nowrap;
}

#player2025 p {
padding: 0;
margin: 0;
}

/* NEWアイコン */
#player2025 .new{
  position: absolute;
  background-color: #ff291e;
  border: solid 2px #FFF;
  top: 0px;
  left: -8px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}

/* カード画像エリア */
#player2025 .player-Area {
width: 100%;
margin: 0 auto;
display: grid;
gap: 56px;
grid-template-columns: repeat(3, 1fr);
}

#player2025 .player {
position: relative;
}

#player2025 .playerImg {
width: 100%;
margin: 0 auto;
}

#player2025 .playerImg img {
width: 100%;
}

#player2025 .pl_name {
text-align: center;
font-size: 1.75rem;
font-weight: bold;
color: var(--color-main);
}

#player2025 .pl_name span {
display: block;
font-size: 1.6rem;
font-family: futura-pt, sans-serif;
font-weight: 400;
font-style: normal;
}

#player2025 .hidden {
visibility: hidden;
}


/* ボタン */
#player2025 .button {
text-align: center;
text-decoration: none;
}

#player2025 .button:hover {
transition: all 0.5s ease;
}

#player2025 .playerPage-link {
color: #222 !important;
text-decoration: none;
}

.player2025 .flex .button,
.contents .flex .button {
display: block;
padding: 0.6rem 1.2rem 0.6rem 0.8rem;
font-size: 0.8rem;
}

#player2025 section:not(.pattern-C) .flex,
#player2025 .pl_name {
width: calc(100% - 10px);
margin: 0 auto;
}

#player2025 .prev {
display: block;
padding: 0.6rem 1.2rem 0.6rem 0.8rem;
}

#player2025 .newTab,
#player2025 .arrow,
#player2025 .prev {
position: relative;
}

#player2025 .newTab::after,
#player2025 .arrow::after {
display: block;
right: 4px;
width: 10px;
height: 10px;
position: absolute;
}

#player2025 .newTab::after {
content: "";
background-image: url("https://gigaplus.makeshop.jp/sdarts/project/sdartsPlayers2025/img/icon_newTab.png");
background-repeat: no-repeat;
background-size: contain;
}

#player2025 .newTab:hover:after {
background-image: url("https://gigaplus.makeshop.jp/sdarts/project/sdartsPlayers2025/img/icon_newTab_hv.png");
transition: all 0.5s ease;
}

#player2025 .arrow::after {
content: "\03e";
}

#player2025 .prev::after {
content: "\03c";
left: 8px;
position: absolute;
}

#player2025 .button-1 {
color: var(--color-main);
background: var(--color-base-2);
}

#player2025 .button-1:visited {
color: var(--color-main);
}

#player2025 .button-2 {
color: var(--color-main);
background: var(--color-accent);
}

#player2025 .button-2:visited {
color: var(--color-main);
}

#player2025 .button-3 {
color: var(--color-base);
background: var(--color-base-3);
}

#player2025 .button-3:visited {
color: var(--color-base);
}

.player2025 .pattern-C .button-1,
.contents .pattern-C .button-1 {
margin: 0.5rem;
width: 15rem;
padding: 1rem;
font-size: 16px;
}

#player2025 .flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#player2025 .pattern-C .flex {
justify-content: space-around;
gap: 1rem;
}

/* 下部バナー */
#player2025 .banner {
display: block;
width: 100%;
margin-top: 2rem;
border: #fff 2px solid;
box-shadow: 2px 2px 2px rgba(199, 199, 199, 0.404);
transition: all 0.3s;
}

#player2025 .banner img {
width: 100%;
}

/* ページトップ */
#page-top {
position: fixed;
right: 5px;
bottom: 20px;
text-decoration: none;
opacity: 0.8;
display: block;
z-index: 999;
}

#page-top img {
width: 50px;
}


#player2025 section > div {
margin: 2rem auto 0;
}

#page-top img{
  opacity: 0.8;
}

#page-top img:hover {
opacity: 1;
transform: translate(0, 0);
}

/* PC表示 */
@media screen and (min-width: 769px) {
#player2025 {
  width: 99.2vw;
  overflow: hidden;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}

/* 見出し上線 */
#player2025 .heading::before {
  top: 40px;
}

/* 一覧ページのみ選手名 余白調整 */
.player2025 .pl_name {
  margin-top: 0.5rem !important;
  margin-bottom: 0.3rem !important;
}

.player2025 .pl_name span {
  line-height: 1.4rem;
}

/* カード画像のホバーエフェクト */
#player2025 .playerPage-link:hover img {
  transform: scale(1.03);
  opacity: 0.7;
  transition: all 0.5s ease;
}

/* ボタン */
.player2025 section:not(.pattern-C) .flex p {
  width: calc(94% / 2);
}
#player2025 .pattern-C .flex {
  justify-content: center;
  gap: 1rem;
  width: 94%;
  margin: 2rem auto 0;
}

#player2025 .arrow::after {
  top: calc(1rem / 2);
}

#player2025 .newTab::after {
  top: calc(1.8rem / 2);
}

#player2025 .prev::after {
  top: calc(1.1rem / 2);
}

#player2025 .button-1:hover {
  color: var(--color-main);
  background-color: var(--color-base-3);
}

#player2025 .button-2:hover {
  color: var(--color-main);
  background-color: #82a317;
}

#player2025 .button-3:hover {
  color: var(--color-base-3);
  background-color: #353535;
}

#player2025 .banner:hover {
  box-shadow: 2px 5px 2px rgba(199, 199, 199, 0.404);
}
}

/* SP */
@media screen and (max-width: 768px) {
#player2025 section {
  padding-bottom: 2rem;
}

#player2025 section > div {
  /* width: 90%; */
  margin: auto;
}

#player2025 #nav {
  padding-bottom: 0px;
}
/* 2025ロロゴ */
#player2025 .topImg {
  width: 60%;
  margin: 0px auto 10px;
}

#player2025 nav a {
  font-size: 1.2rem;
  padding: 0.25rem 0.5rem;
}

#player2025 h2 {
  padding-top: 2rem;
  font-size: 2.4rem;
}

a{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 見出し上線 */
#player2025 .heading::before {
  width: 90%;
  margin: 0 5%;
  top: 10px;
}

#player2025 .info {
  font-size: 0.8rem;
  margin-bottom: 2rem;
}

#player2025 .player-Area {
  width: 90%;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}

/* NEWアイコン */
#player2025 .new{
  top: -0.4rem;
  left: -0.5rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
}

/* カード画像エリア */
#player2025 .pl_name {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

#player2025 .katakana{
  font-size: 1.2rem !important;
}

#player2025 .pl_name span {
  font-size: 1rem;
}

/* ボタン */
.player2025 .flex .button {
  padding: 0.6rem 0.3rem;
}

#player2025 section:not(.pattern-C) .flex {
  display: block;
}

#player2025 section:not(.pattern-C) .newTab {
  display: block;
  margin-bottom: 0.5rem;
}

#player2025 .arrow::after {
  top: calc(1rem / 2);
}

#player2025 .newTab::after {
  width: 10px;
  height: 10px;
  right: 3px;
  top: calc(2.4rem / 2);
}
#player2025 .pattern-C .flex {
  justify-content: center;
  row-gap: 0;
  column-gap: 8px;
  flex-direction: row;
}
#player2025 .pattern-C .button-1 {
  width: calc((99.2vw * 0.7) / 2);
}

/* 一覧ページのみ ボタンアイコン調整 */
.player2025 .newTab::after {
  top: calc(1.9rem / 2);
}

#player2025 .prev::after {
  top: calc(1.3rem / 2);
}

#player2025 .hidden {
  display: none;
}

/* ▼▼スマホのhover対応▼▼ */
#player2025 nav a:active {
opacity: 0.8;
}

/* ボタン */
#player2025 .button:active {
transition: all 0.5s ease;
}

#player2025 .newTab:active:after {
background-image: url("https://gigaplus.makeshop.jp/sdarts/project/sdartsPlayers2025/img/icon_newTab_hv.png");
transition: all 0.5s ease;
}

/* ページトップ */
#page-top img:active {
  opacity: 1;
  transform: translate(0, 0);
}

/* カード画像のホバーエフェクト */
#player2025 .playerPage-link:active img {
  transform: scale(1.03);
  opacity: 0.7;
  transition: all 0.5s ease;
}

/* ボタン */
#player2025 .button-1:active {
  color: var(--color-main);
  background-color: var(--color-base-3);
}

#player2025 .button-2:active {
  color: var(--color-main);
  background-color: #82a317;
}

#player2025 .button-3:active {
  color: var(--color-base-3);
  background-color: #353535;
}

#player2025 .banner:active {
  box-shadow: 2px 5px 2px rgba(199, 199, 199, 0.404);
}

/* カード画像エリア */
#player2025 .playerPage-link:active img {
  transform: scale(1);
}

/* 下部バナー */
#player2025 .banner:active {
  box-shadow: none;
}
/* ▲▲スマホのhover対応▲▲ */
}