@charset "UTF-8";

/* ////////////////////////////////////////////////////////////////////
///// 全ページ共通CSS ///////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////// */
/* ==================================================
FONT SETTING
================================================== */
html {
  font-size: 2.97vw;
}
@media screen and (min-width: 768px) {
  html {
    font-size: 2.47vw;
  }
}
@media screen and (min-width: 961px) {
  html {
    font-size: 1.35vw;
  }
}
@media screen and (min-width: 1281px) {
  html {
    font-size: 17px;
  }
}

html body {
  /*ゴシック系*/
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.06em;
  background: #000000;
  line-height: 1.6;
  -ms-font-feature-settings: "normal";
  font-feature-settings: "palt";
  overflow-x: hidden;
  margin: 0;
  color: #fff;
}
.fwBold {
  font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 700;
  font-style: normal;
}
.enGothic {
  font-family: "bebas-neue-pro", sans-serif;
  font-weight: 400; /*300 or 400 or 600*/
  font-style: normal;
}
.enGothic.fwM {
  font-weight: 300;
}
.enGothic.fwBold {
  font-weight: 600;
}

:root {
  --fs48: 6vw;
  --fs40: 5.8vw;
  --fs32: 5vw;
  --fs28: 5vw;
  --fs24: 4.6vw;
  --fs20: 3.8vw;
  --fs18: 3.6vw;
  --fs16: 3.2vw;
  --fs15: 3vw;
  --fs14: 2.8vw;
}
@media screen and (min-width: 768px) {
  :root {
  }
}
@media screen and (min-width: 961px) {
  :root {
  }
}
.fs48 {
  font-size: clamp(30px, var(--fs48), 48px);
  letter-spacing: 0.04em;
}

.fs40 {
  font-size: clamp(32px, var(--fs40), 40px);
  letter-spacing: 0;
}
.fs32 {
  font-size: clamp(28px, var(--fs32), 32px);
}
.fs28 {
  font-size: clamp(20px, var(--fs28), 28px);
}
.fs24 {
  font-size: clamp(18px, var(--fs24), 24px);
}
.fs20 {
  font-size: clamp(16px, var(--fs20), 20px);
}
.fs18 {
  font-size: clamp(18px, var(--fs18), 18px);
  letter-spacing: 0.1em;
}
.fs16 {
  font-size: clamp(15px, var(--fs16), 16px);
}
.fs15 {
  font-size: clamp(15px, var(--fs15), 15px);
}
.fs14 {
  font-size: clamp(15px, var(--fs14), 14px);
}

.fwBold {
  font-weight: 600;
}
@media screen and (min-width: 961px) {
  .pcFBig {
    font-size: 120%;
  }
}

/* ==================================================
font line height
================================================== */
.js-setLoad .spinner {
  width: 84vw;
  height: 10vw;
  max-width: 420px;
  max-height: 50px;
}
/* ==================================================
color
================================================== */
:root {
  --clrBk: #000000;
  --clrBk1: #051011;
  --clrGr: #5c5c5c;
  --clrLGr: #c5c5c5;
  --clrWh: #fff;
  --clrNv: #082d50;
  --clrBl: #01cee2;
  --clrBl1: #3f60df;
  --clrGrn: #0de247;
  --clrPnk: #f80085;
  --clrYe: #ffc200;
  --clrGrd: linear-gradient(90deg, #3f60df 10%, #0de247 90%);
}
.clrBk {
  color: var(--clrBk);
}
.clrBk1 {
  color: var(--clrBk1);
}
.clrGr {
  color: var(--clrGr);
}
.clrLGr {
  color: var(--clrLGr);
}
.clrWh {
  color: var(--clrWh);
}
.clrNv {
  color: var(--clrNv);
}
.clrBl {
  color: var(--clrBl);
}
.clrBl1 {
  color: var(--clrBl1);
}
.clrGrn {
  color: var(--clrGrn);
}
.clrPnk {
  color: var(--clrPnk);
}
.clrYe {
  color: var(--clrYe);
}
body {
  color: var(--clrWh);
}

/* ==================================================
kadoR
 ================================================== */
:root {
  --kadoR80: 80px;
  --kadoR16: 16px;
  --kadoR8: 8px;
  --kadoR36: 36px;
}
@media (width <= 900px) {
  :root {
    --kadoR80: 40px;
    --kadoR16: 16px;
    --kadoR8: 6px;
    --kadoR36: 22px;
  }
}
:root {
  --transition1: 0.2s ease;
  --transition2: 0.6s ease;
}

#gigyaShare {
  margin: 120px auto 0;
}
@media screen and (max-width: 759px) {
  #gigyaShare {
  }
}

.btnTypeA {
  width: min(80%, 380px);
  margin: 0 auto;
  text-align: center;
}
.btnTypeA a {
  background: var(--clrBk);
  color: var(--clrWh);
  line-height: 1;
  width: 100%;
  padding: 0;
  transition: var(--transition1);
  border: 1px solid var(--clrWh);
  border-radius: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btnTypeA a:hover {
  transition: var(--transition1);
  background: var(--clrLGr);
  color: var(--clrBk);
}
.btnTypeA a .icon {
  width: min(1.2em, 24px);
  display: block;
  height: min(1.2em, 24px);
  margin: 0 0.5em 0 0;
  padding: 0.1em 0 0;
}
.btnTypeA a .icon img {
}

.btnTypeB {
  width: min(80%, 380px);
  margin: 0 auto;
  text-align: center;
}
.btnTypeB a {
  background: var(--clrWh);
  color: var(--clrBk);
  line-height: 1;
  width: 100%;
  padding: 20px 0;
  transition: var(--transition1);
  border: 1px solid var(--clrBk);
}
.btnTypeB a:hover {
  transition: var(--transition1);
  background: var(--clrLGr);
  border: 1px solid var(--clrBk);
  /* color: var(--clrWh); */
}

a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}

.ttlTyprA {
}
.ttlTyprA::before {
  content: "";
}