a {
  color: #207cf5;
  transition: all 0.2s;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
}

a:hover {
  color: #0e40c9;
}

a:active {
  color: #0a2e91;
}

div {
  font-family: 'Inter', sans-serif;
}

.btn-primary {
  display: inline-block;
  padding: 5 30 5 30;
  text-align: center;
  background-color: #15e896;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  transition: all 0.3s;
}

.btn-primary:hover {
  background-color: #13b978;
  color: #fff;
}

.btn-secondary {
  display: inline-block;
  padding: 5 30 5 30;
  text-align: center;
  background-color: #777777;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  transition: all 0.3s;
}

.btn-secondary:hover {
  background-color: #5d5d5d;
  color: #fff;
}

.btn-blue {
  display: inline-block;
  padding: 5 30 5 30;
  text-align: center;
  background-color: #1662ff;
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  font-size: 20px;
  transition: all 0.3s;
}

.btn-blue:hover {
  background-color: #124bc3;
  color: #fff;
}

p {
  font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
}

.mds1 {
  font-size: 30px;
  color: #4788ff;
}

.mds1:before {
  position: absolute;
  bottom: 110px;
  left: calc(50% - 30px);
  width: 60px;
  height: 5px;
  content: '';
  border-radius: 3px;
  background: #007eff;
}

.mds2 {
  color: #fff;
  font-size: 30px;
  background: #0070ff;
  border-radius: 10px;
  text-align: center;
  padding: 5px 15px 5px 15px;
}

.infotable {
  width: 100%;
  margin: auto;
}

.infotable .tbtitle {
  text-align: center;
  font-size: 22px;
  border: solid 1px #555;
  border-radius: 10px 10px 0px 0px;
  background-color: #0070ff;
  color: #fff;
  padding: 5px;
}

.infotable .tbtext {
  text-align: left;
  font-size: 18px;
  border: solid 1px #555;
  border-top: solid 0px #000;
  border-radius: 0px 0px 10px 10px;
  background-color: #fafafa;
  padding: 10px
}

@media screen and (min-width: 700px) {
  .imgsdw {
    max-width: 100%;
    max-height: 100%;
    transition: 0.5s;
    border-radius: 10px;
  }

  .imgsdw:hover {
    transform: translateX(-5px) translateY(-5px);
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
  }

  .imgsdw:active {
    transform: scale(0.95, 0.95);
  }

  .ineimg {
    width: 500px;
    height: 300px;
    display: inline-block;
    margin: 0px 30px 70px 30px;
  }

  .imgsdw2 {
    max-width: 100%;
    max-height: 100%;
    transition: 0.5s;
    border-radius: 100px;
  }

  .imgsdw2:hover {
    border-radius: 15px;
  }

  .imgsdw2:active {
    transform: scale(0.95, 0.95);
  }

  .ineimg2 {
    width: 200px;
    height: 200px;
    display: inline-block;
    margin: 0px 30px 70px 30px;
  }

  .iconback {
    width: 100%;
  }

  .gamescr {
    width: 500px;
    height: 300px;
    display: inline-block;
    margin: 0px 30px 20px 30px;
  }

  .margtext1 {
    margin: 80px;
  }
}

@media screen and (max-width: 700px) {
  .imgsdw {
    max-width: 100%;
    max-height: 100%;
    transition: 0.5s;
    border-radius: 10px;
  }

  .imgsdw:hover {
    transform: translateX(-5px) translateY(-5px);
    filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
  }

  .imgsdw:active {
    transform: scale(0.95, 0.95);
  }

  .ineimg {
    width: 300px;
    height: 270px;
    display: inline-block;
    margin: 0px 5px -10px 5px;
  }

  .imgsdw2 {
    max-width: 100%;
    max-height: 100%;
    transition: 0.5s;
    border-radius: 100px;
  }

  .imgsdw2:hover {
    border-radius: 15px;
  }

  .imgsdw2:active {
    transform: scale(0.95, 0.95);
  }

  .ineimg2 {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: 0px 30px 70px 30px;
  }

  .iconback {
    width: 100%;
  }

  .gamescr {
    width: 300px;
    height: 230px;
    display: inline-block;
    margin: 0px 5px -10px 5px;
  }

  .margtext1 {
    margin: 10px;
  }
}

/* h1に最適 */
.mds3 {
  position: relative;
  padding: 45px 1rem;
  text-align: center;
}
.mds3:before {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 100px);
  width: 200px;
  height: 6px;
  content: '';
  border-radius: 3px;
  background: -webkit-linear-gradient(0deg, #1294ff, #07e6a3);
}

/* h1に最適 */
.mds4 {
  position: relative;
  padding: 45px 1rem;
  text-align: center;
}
.mds4:before {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 100px);
  width: 200px;
  height: 6px;
  content: '';
  border-radius: 3px;
  background: -webkit-linear-gradient(0deg, #f51651, #9805fa);
}

/* h2に最適 */
.mds5 {
  position: relative;
  padding: 45px 1rem;
  text-align: center;
}
.mds5:before {
  position: absolute;
  bottom: 20px;
  left: calc(50% - 75px);
  width:150px;
  height: 6px;
  content: '';
  border-radius: 3px;
  background: -webkit-linear-gradient(0deg, #f51651, #f5b82a);
}

/* h3に最適 */
.mds6 {
  position: relative;
  padding: 40px 1rem;
  text-align: center;
}
.mds6:before {
  position: absolute;
  bottom: 18px;
  left: calc(50% - 50px);
  width:100px;
  height: 6px;
  content: '';
  border-radius: 3px;
  background: -webkit-linear-gradient(0deg, #0526fa, #1eccf7);
}
.mds6-2 {
  position: relative;
  padding: 30px 0px 15px 0px;
}
.mds6-2:before {
  position: absolute;
  bottom: 0px;
  width:100%;
  height: 5px;
  content: '';
  border-radius: 2.5px;
  background: -webkit-linear-gradient(0deg, #0526fa, #1eccf7);
}
.acbord1{
  border-radius: .25rem;
  position:relative;
  z-index: 1;
  border:1px solid rgba(0,0,0,0)!important;
  border-left-color: #1294ff!important;
  border-right-color: #07e6a3!important;
  background: -webkit-linear-gradient(0deg, #1294ff, #07e6a3);
}
.acbord1:before{
  position:absolute;
  top:0;
  left:0;
  z-index: -1;
  width: 100%;
  height:100%;
  background:#fff;
  border-radius: .25rem;
  content: "";
}
.cdbord1{
  border-radius: .25rem;
  position:relative;
  z-index: 1;
  border:1px solid rgba(0,0,0,0)!important;
  border-left-color: #1294ff!important;
  border-right-color: #07e6a3!important;
  background: -webkit-linear-gradient(0deg, #1294ff, #07e6a3);
}
.cdbord1:before{
  position:absolute;
  top:0;
  left:0;
  z-index: -1;
  width: 100%;
  height:100%;
  background:#fff;
  border-radius: .25rem;
  content: "";
}

.btn2 {
  --border-size: 5px;

  position: relative;
  padding: 0.3rem 1.8rem; /* しっかり余白 */
  min-height: 48px;
  border-radius: 18px;
  border: none;

  /* 白〜薄グラデ背景 */
  background: linear-gradient(
    180deg,
    #ffffff,
    #f4f4f4
  );

  color: #222;
  /* font-weight: 600; */
  font-size: 0.95rem;
  letter-spacing: .35px;
  cursor: pointer;
  isolation: isolate;

  transition: transform .12s ease;

  text-decoration: none;
}

/* 疑似ボーダー */
.btn2::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: var(--border-size);
  border-radius: inherit;
  background: var(--border-color);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* Primary用：内側に色がにじむ */
.btn2::after {
  content: "";
  position: absolute;
  inset: var(--border-size);
  border-radius: calc(18px - var(--border-size));
  background: var(--border-color);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: -1;
}

.btn2:disabled {
  pointer-events: none;
  opacity: 0.65;
}

/* hover（Primaryのみ色演出） */
.btn2.primary:hover::after {
  opacity: 0.15;
}

/* hover時：ボーダーアニメーション（Primaryのみ） */
.btn2.primary:hover::before {
  animation: border-slide 2s linear infinite;
}

/* active：最小限 */
.btn2:active {
  transform: translateY(1px);
}

/* =========================================
   Primary（指定グラデ・2色直結）
========================================= */

/* #1294ff → #07e6a3 */
.btn-primary-a {
  --border-color: linear-gradient(120deg, #1294ff, #07e6a3);
}
/* .btn-primary-a { composes: primary; } */

/* #f51651 → #9805fa */
.btn-primary-b {
  --border-color: linear-gradient(120deg, #f51651, #9805fa);
}
/* .btn-primary-b { composes: primary; } */

/* 共通フラグ */
.btn-primary-a,
.btn-primary-b {
  color: #111;
}

.btn-primary-a,
.btn-primary-b {
  --is-primary: 1;
}

/* =========================================
   非プライマリ（単色ボーダー）
========================================= */

.btn-success {
  --border-color: #0aa37a;
}

.btn-warning {
  --border-color: #e6a400;
}

.btn-danger {
  --border-color: #d32f4c;
}

.btn-info {
  --border-color: #1aa6d9;
}

.btn-dark {
  --border-color: #333;
}

.btn-light {
  --border-color: #dcdcdc;
}

/* hover：単色は軽く濃く */
.btn-success:hover::before { --border-color: #087f5b; }
.btn-warning:hover::before { --border-color: #c28a00; }
.btn-danger:hover::before  { --border-color: #b71c3a; }
.btn-info:hover::before    { --border-color: #1486b1; }
.btn-dark:hover::before    { --border-color: #111; }
.btn-light:hover::before   { --border-color: #c0c0c0; }

/* =========================================
   アニメーション
========================================= */

@keyframes border-slide {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

.nav-item a{
  height:100%;
}

.nav-dropdown {
  display: none;
  position: absolute;
  left: 0;
  background-color: #fff;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 8px;
  padding: 20px 10px;
  list-style: none;
  width: 100%;
}

.nav-item:hover .nav-dropdown {
  display: block;
}

.nav-dropdown li {
  padding: 6px 8px;
  margin: 5px 0;
  position: relative;
}

.nav-dropdown li a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: #0046c8;
  opacity: 0;
  transition: all 0.15s ease-in-out;
  pointer-events: none;
}

.nav-dropdown li a.color-b3d::after {
  background: #0099ff;
}
.nav-dropdown li a.color-bp::after {
  background: #ff4800;
}
.nav-dropdown li a.color-sp::after {
  background: #00109e;
}
.nav-dropdown li a.color-ca::after {
  background: #0820ff;
}
.nav-dropdown li a.color-ce::after {
  background: #00d19d;
}

.nav-dropdown li a.color-youtube::after {
  background-color: #ff0033;
}
.nav-dropdown li a.color-twitter::after {
  background-color: #18a9ff;
}

.nav-dropdown li a:hover::after {
  opacity: 1;
}

.nav-dropdown li a:hover {
  color: #333;
}

.nav-dropdown li a {
  color: #111;
  text-decoration: none;
  display: block;
}

.nav-dropdown-lists {
  padding-top:10px;
  padding:10px 10px 0 10px;
}

.nav-dropdown-header {
  position: relative;
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 600;
  color: #222;
  padding-bottom: 0.75rem;
  text-decoration: none;
}

.nav-dropdown-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: -webkit-linear-gradient(0deg, #1294ff, #07e6a3);
  border-radius: 3px;
}

.nav-dropdown-header .arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height:1;
  margin-left: 1rem;
  border-radius: 50%;
  color: #fff;
  background: -webkit-linear-gradient(90deg, #1294ff, #07e6a3);
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .nav-dropdown {
    position: static;
    box-shadow: none;
    padding: 10px 0;
    background-color: transparent;
    /* grid-template-columns: 1fr; */
  }
  .nav-item:hover .nav-dropdown {
    display: none;
  }
  .nav-item.open .nav-dropdown {
    display: block;
  }
}

.nav-blur{
  /* background-color:rgba(255, 255, 255, 0.8); */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: linear-gradient(135deg, #FAFAFA22 40%,  #00CEB522, #009AFF22, #FF006A22), rgba(255, 255, 255, 1);
  /* border-bottom:3px solid rgba(0, 0, 0, 1)!important; */
}

.nav-blur::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00CEB5 33%, #009AFF 33% 66%, #FF006A 66% 100%);
}

.footer-link {
  color: #fff;
  text-decoration: none;
  position: relative;
}

.footer-link:hover {
  color: #ddd;
  text-decoration: none;
  position: relative;
}

.footer-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: #207cf5;
  opacity: 0;
  transition: all 0.15s ease-in-out;
  pointer-events: none;
}

.footer-link:hover::after {
  opacity: 1;
}

.footer-link-discord::after {
  background-color: #5865f2;
}
.footer-link-youtube::after {
  background-color: #ff0033;
}
.footer-link-twitter::after {
  background-color: #18a9ff;
}

.footer-logo {
  width: 300px;
  max-width: 100%;
}

.card-header-inside {
  padding: .5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, .03);
  border-top: 1px solid rgba(0, 0, 0, .125);
  border-bottom: 1px solid rgba(0, 0, 0, .125);
}

.download-card-windows {
  border-color: #004aff!important;
}
.download-card-windows .card-header {
  background-color: #004aff;
  color: #fff;
}

.download-card-android {
  border-color: #00b84d!important;
}
.download-card-android .card-header {
  background-color: #00b84d;
  color: #fff;
}

.game-card {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06);
  overflow: hidden;
  transition: 0.25s ease;
  height: 100%;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

.game-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.game-info {
  padding: 18px 20px 14px;
}

.game-title {
  position: relative;
  padding-left: 12px;
}

.game-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: 80%;
  background: -webkit-linear-gradient(-90deg, #1294ff, #07e6a3);
  border-radius: 4px;
}

.game-title.color2::before {
  background: -webkit-linear-gradient(-90deg, #4b00ed, #b505fa);
}
.game-title.color3::before {
  background: -webkit-linear-gradient(-90deg, #000fdc, #0590fa);
}

.game-title.color-b3d::before {
  background: #0099ff;
}
.game-title.color-bp::before {
  background: #ff4800;
}
.game-title.color-sp::before {
  background: #00109e;
}
.game-title.color-ca::before {
  background: #0820ff;
}
.game-title.color-ce::before {
  background: #00d19d;
}


.game-desc {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 10px;
}

.game-footer-btn {
  display: block;
  width: 100%;
  text-align: right;
  padding: 8px 16px;
  background: -webkit-linear-gradient(0deg, #1294ff, #07e6a3);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  transition: opacity 0.2s;
}

.game-footer-btn.color2 {
  background: -webkit-linear-gradient(0deg, #4b00ed, #b505fa);
}
.game-footer-btn.color3 {
  background: -webkit-linear-gradient(0deg, #000fdc, #0590fa);
}

.game-footer-btn:hover {
  opacity: 0.85;
  color: #fff;
}

.game-hero {
  padding: 50px 20px;
  color: #fff;
  margin-top: 20px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

.game-hero::before {
  content: "";
  /* background-color:#000; */
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  background-image: repeating-linear-gradient(
          -45deg,
          transparent,
          transparent 30px,
          rgba(255, 255, 255, 0.03) 30px,
          rgba(255, 255, 255, 0.03) 60px
        );
  z-index: -999;
}

.hero-title {
  position: relative;
  font-size: 3.6rem;
  font-weight: bold;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  margin-bottom: 10px;
  padding-bottom: 15px;
  opacity: 0.85;
}
.hero-title:before {
  position: absolute;
  bottom: 0px;
  width:100%;
  height: 5px;
  content: '';
  border-radius: 2.5px;
  background-color: rgba(255, 255, 255, 0.85);
}

.hero-desc {
  font-size: 1.35rem;
  opacity: 0.95;
  line-height: 1.6;
}

.hero-images img {
  border: 4px solid #fffa;
  border-radius: 8px;
}

@media screen and (max-width: 992px){
  .resp-hidden{
    display: none;
  }
  .hero-title {
    font-size: 2.6rem;
  }
  .hero-title:before {
    position: absolute;
    bottom: 0px;
    /* left: calc(50% - 75px); */
    width:100%;
    height: 5px;
    content: '';
    border-radius: 2.5px;
    background-color: rgba(255, 255, 255, 0.85);
  }
}

.game-hero.color-b3d {
  /* background: linear-gradient(135deg, #0eb3ff, #4dbeff); */
  background:
    linear-gradient(0deg, #ffffff 0%, transparent 30%),
    linear-gradient(135deg, #0eb3ff, #4dbeff);
}
.game-hero.color-bp {
  /* background: linear-gradient(135deg, #ff6a45, #ff8585); */
  background:
    linear-gradient(0deg, #ffffff 0%, transparent 30%),
    linear-gradient(135deg, #ff6a45, #ff8585);
}
.game-hero.color-sp {
  /* background: linear-gradient(135deg, #002184, #001ea2); */
  background:
    linear-gradient(0deg, #ffffff 0%, transparent 30%),
    linear-gradient(135deg, #002184, #001ea2);
}
.game-hero.color-ca {
  /* background: linear-gradient(135deg, #0044f0, #0048ff); */
  background:
    linear-gradient(0deg, #ffffff 0%, transparent 30%),
    linear-gradient(135deg, #0044f0, #0048ff);
}
.game-hero.color-ce {
  /* background: linear-gradient(135deg, #00bb74, #00d19d); */
  background:
    linear-gradient(0deg, #ffffff 0%, transparent 30%),
    linear-gradient(135deg, #00bb74, #00d19d);
}

.hero-theme-green {
  background: linear-gradient(135deg, #60d394, #7ae5a8 50%, #a8f3c4);
}

.hero-theme-light {
  background: linear-gradient(135deg, #ffffff, #f5f8ff 50%, #e9f2ff);
  color: #333;
}

.hero-intro {
  padding:30px;
}

.hero-intro-text {
  position: relative;
  font-size: 3.6rem;
  font-weight: bold;
  letter-spacing: -0.5px;
  color:#fff;
  margin-bottom: 10px;
  padding-bottom: 15px;
  opacity: 0.85;
}

.hero-intro-text.color-b3d {
  text-shadow: 
    0 0px 16px rgba(0, 123, 255, 1),
    0 0px 16px rgba(0, 123, 255, 1),
    0 0px 16px rgba(0, 123, 255, 1);
}

.header-accent-circle {
  display:inline-block;
  position: relative;
  top:calc(50% - 10px);
  width:20px;
  height:20px;
  background-color:#00ffff;
}