@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: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.05em;
  background: #fff;
  line-height: 1.7;
  -ms-font-feature-settings: "normal";
  font-feature-settings: "palt";
  overflow-x: hidden;
  margin: 0;
  color: #0c121c;
}
.fwBold {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-style: normal;
}
.enGothic {
  font-family: "Barlow", sans-serif;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.1em;
}
.enGothic.fwL {
  font-weight: 400;
}

: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(18px, var(--fs32), 32px);
}
.fs28 {
  font-size: clamp(20px, var(--fs28), 28px);
}
.fs24 {
  font-size: clamp(18px, var(--fs24), 24px);
}
.fs20 {
  font-size: clamp(18px, 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: #0c121c;
  --clrWh: #fff;
  --clrWh1: #f8f9f9;
  --clrGr: #4a4f54;
  --clrLGr: #c9c9c9;
  --clrRed: #9e3b29;
}
body {
  color: #3a4302;
}
.clrBk {
  color: var(--clrBk);
}
.clrWh {
  color: var(--clrWh);
}
.clrWh1 {
  color: var(--clrWh1);
}
.clrGr {
  color: var(--clrGr);
}
.clrLGr {
  color: var(--clrLGr);
}
.clrRed {
  color: var(--clrRed);
}
/* ==================================================
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: 40px auto 80px;
}
@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: 20px 0;
  transition: var(--transition1);
  border: 1px solid var(--clrBk);
}
.btnTypeA a:hover {
  transition: var(--transition1);
  background: var(--clrwh);
  border: 1px solid var(--clrBk);
  color: var(--clrBk);
}

.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;
}