@charset "UTF-8";

/* ////////////////////////////////////////////////////////////////////
///// 全ページ共通CSS ///////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////// */
/* ==================================================
FONT SETTING
================================================== */
/**
 * @license
 *
 * Font Family: Ekster
 * Designed by: Ilya Naumoff
 * URL: https://www.fontstore.com/font/ekster
 *
 * Page-views per Month: 5m
 * License: https://api.fontstore.com/downloads/licenses/fonts
 *
 * Font Styles:
 * Ekster Bold
 *
 * © 2020 Fontstore
*/

/* @import must be at top of file */
@import url("////api.fontstore.com/count/97fb518a-ce0a-4d13-9401-d1404ed33a18");

@font-face {
  font-family: "Ekster-Bold";
  src: url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Bold.eot");
  src: url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Bold.eot?#iefix") format("embedded-opentype"), url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Bold.woff2") format("woff2"), url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Bold.woff") format("woff"),
    url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/**
* Font Styles:
 * Ekster Regular
 *
 * © 2020 Fontstore
*/

/* @import must be at top of file */
@import url("////api.fontstore.com/count/2fe11d27-d188-426f-8237-af0565a85379");

@font-face {
  font-family: "Ekster-Regular";
  src: url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Regular.eot");
  src: url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Regular.eot?#iefix") format("embedded-opentype"), url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Regular.woff2") format("woff2"),
    url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Regular.woff") format("woff"), url("https://www.j-wave.co.jp/assets_v2020/fonts/ekster/Ekster-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

html {
  font-size: 2.97vw;
}
@media screen and (min-width: 769px) {
  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;
  }
}

body {
  /*ゴシック系*/
  font-family: "m-plus-1c", sans-serif;
  font-weight: 500;
  font-style: normal;
  /*明朝系
    font-family: "游明朝", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;*/
  letter-spacing: 0.05em;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "palt" 1;
  font-feature-settings: "palt" 1;
  font-variant-ligatures: no-common-ligatures;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
.imgSetP {
  font-weight: 500;
}
.fwBold {
  font-weight: 700;
}
.fwHeavy {
  font-weight: 800;
}

.enGothic {
  font-family: "Ekster-Regular";
  font-weight: normal;
  font-style: normal;
}

.enGothic.fwBold {
  font-family: "Ekster-Bold";
  font-weight: normal;
  font-style: normal;
}

:root {
  --XsTxt: 1.98vw;
  --STxt: 2.5vw;
  --MTxt: 2.8vw;
  --LTxt: 3.4vw;
  --STitle: 4vw;
  --MTitle: 5vw;
  --MlTitle: 6.8vw;
  --LTitle: 7.05vw;
  --XlTitle: 8.75vw;
}
@media screen and (min-width: 769px) {
  :root {
    --XsTxt: 1.48vw;
    --STxt: 1.56vw;
    --MTxt: 1.6vw;
    --LTxt: 2vw;
    --STitle: 2.35vw;
    --MTitle: 4.17vw;
    --MlTitle: 4.64vw;
    --LTitle: 5.21vw;
    --XlTitle: 7.29vw;
  }
}
@media screen and (min-width: 961px) {
  :root {
    --XsTxt: 1.04vw;
    --STxt: 1.15vw;
    --MTxt: 1.35vw;
    --LTxt: 1.88vw;
    --STitle: 1.88vw;
    --MTitle: 3.2vw;
    --MlTitle: 4vw;
    --LTitle: 4.5vw;
    --XlTitle: 5.63vw;
  }
}

.XsTxt {
  font-size: 1.01rem;
}
.STxt {
  font-size: clamp(11px, var(--STxt), 14px);
}
.MTxt {
  font-size: clamp(12px, var(--MTxt), 16px);
  letter-spacing: 0.1em;
  line-height: 1.8;
  letter-spacing: 0.06em;
}
.LTxt {
  font-size: clamp(12px, var(--LTxt), 20px);
  letter-spacing: 0.06em;
}
.STitle {
  font-size: clamp(12px, var(--STitle), 26px);
  line-height: 1.4;
  letter-spacing: 0;
}
.MTitle {
  font-size: clamp(14.5px, var(--MTitle), 32px);
}
.MlTitle {
  font-size: clamp(20px, var(--MlTitle), 36px);
}
.LTitle {
  font-size: clamp(26px, var(--LTitle), 56px);
}
.XlTitle {
  font-size: clamp(28px, var(--LTitle), 72px);
}

h1 {
  line-height: 1.2;
  letter-spacing: 0;
}

/* ==================================================
font line height
================================================== */
.js-setLoad .spinner {
  width: 84vw;
  height: 10vw;
  max-width: 420px;
  max-height: 50px;
}
/* ==================================================
shadow transition
================================================== */
:root {
  --boxshadow: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.1));
  --btnshadow: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.1));
  --transition_all: all 0.8s;
}
/* ==================================================
color
================================================== */
:root {
  --baseClr: #1c1c1c;
  --mainClr: #474a4d;
  --iconClr: #d8377d;
  --clrWh: #ffffff;
  --clrNavy: #3730c2;
  --clrBlue: #3f37c9;
  --clrPink: #f72585;
  --clrMagenta: #f72585;
  --clrYellow: #fcf300;
  --clrYellow2: #fff45c;
  --clrLBlue: #3b97ff;
  --clrLPink: #fd95f2;
  --clrPink2: #f72585;
  --clrBlue2: #324aed;
  --clrGrey: #8c8b8b;
}

body {
  color: var(--baseClr);
}
.mainColor {
  color: var(--mainClr);
}
.iconColor {
  color: var(--iconClr);
}
.titColor {
  color: #5a1e0f;
}
.weakColor {
  color: #454545;
}
.backColor {
  color: #fffffc;
}
.attention {
  color: #a80028;
}

.clrWh {
  color: var(--clrWh);
}
.clrNavy {
  color: var(--clrNavy);
}
.clrBlue {
  color: var(--clrBlue);
}
.clrPink {
  color: var(--clrPink);
}
.clrMagenta {
  color: var(--clrMagenta);
}
.clrYellow {
  color: var(--clrYellow);
}
.clrYellow2 {
  color: var(--clrYellow2);
}
.clrPink2 {
  color: var(--clrPink2);
}
.clrBlue2 {
  color: var(--clrBlue2);
}
.clrGrey {
  color: var(--clrGrey);
}

.bgWh {
  background-color: var(--clrWh);
}
.bgNavy {
  background-color: var(--clrNavy);
}
.bgBlue {
  background-color: var(--clrBlue);
}
.bgPink {
  background-color: var(--clrPink);
}
.bgMagenta {
  background-color: var(--clrMagenta);
}
.bgYellow {
  background-color: var(--clrYellow);
}

/* ==================================================
link
 ================================================== */

a:link {
  text-decoration: underline;
}
a:visited {
  /* color: var(--baseClr); */
  text-decoration: underline;
}
a:active {
  color: var(--baseClr);
  text-decoration: underline;
}
.weakColor a:link {
  color: var(--bg_blueClr);
  text-decoration: underline;
}
.weakColor a:visited {
  color: var(--bg_blueClr);
  text-decoration: underline;
}
.weakColor a:active {
  color: var(--bg_blueClr);
  text-decoration: underline;
}
.backColor a:link {
  color: var(--whClr);
  text-decoration: underline;
}
.backColor a:visited {
  color: var(--whClr);
  text-decoration: underline;
}
.backColor a:active {
  color: var(--whClr);
  text-decoration: underline;
}
.swiper-slide a,
.ftrMenuList a,
.mainMenuList a,
.btnCenter a {
  text-decoration: none;
}

/* ==================================================
common
================================================== */
.new::after {
  color: #d83232;
  font-family: "Work Sans", sans-serif;
  padding: 0 0 0 1rem;
}
.stckrCircle {
  background: #d4510f;
  color: #fff;
  width: 1.5em;
  height: 1.5em;
  border-radius: 100%;
  text-align: center;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bdrCnts {
  border-bottom: 1px solid #aeaeae;
}

svg {
  fill: var(--iconClr);
}

input {
  -webkit-appearance: none;
}

.scrollArrow span {
  width: 1px;
}

.js-appSlidein {
  transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.js-nowPage {
  position: relative;
}

.js-nowPage::after {
  content: "";
  display: none;
  background: #000;
  width: 70%;
  height: 1px;
  position: absolute;
  bottom: 5px;
  left: 8vw;
}

.effGradation {
  background: linear-gradient(51deg, #f7b8aa, #c73d6f);
  background-size: 400% 400%;

  -webkit-animation: animeGradation 4s ease infinite alternate;
  animation: animeGradation 4s ease infinite alternate;
}

@-webkit-keyframes animeGradation {
  0% {
    background-position: 0% 86%;
  }

  50% {
    background-position: 100% 15%;
  }

  100% {
    background-position: 0% 86%;
  }
}

@keyframes animeGradation {
  0% {
    background-position: 0% 86%;
  }

  50% {
    background-position: 100% 15%;
  }

  100% {
    background-position: 0% 86%;
  }
}
.sholderPoint {
  border: 1px solid #2e2e2e;
  border-radius: 2em;
  padding: 0.3em 1.5em 0.4em;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}
@media screen and (min-width: 769px) {
  .js-nowPage::after {
    left: 4vw;
  }
}

@media screen and (min-width: 961px) {
  .js-nowPage::after {
    bottom: -5px;
    left: 50%;
    width: 80%;
    transform: translate(-50%, 0);
  }
}

@media screen and (min-width: 1281px) {
  .menuOnline {
    display: none;
  }
}

/* ==================================================
BtnSet
================================================== */
.btnBlk {
  width: 100%;
  background: #ffc600;
  border-radius: 8px;
  line-height: 1;
  margin: 28px auto 0;
}
.btnBlk a {
  background: #fcf300;
  width: 100%;
  padding: 1em 0;
  border-radius: 8px;
  position: relative;
  top: -6px;
  text-decoration: none;
  line-height: 1;
  height: 100%;
  transition: 0.1s;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
}
.btnBlk a:hover {
  top: 0px;
  transition: 0.1s;
}

@media screen and (min-width: 900px) {
  .btnBlk a {
    padding: 1em 0;
    /* top: 0; */
  }
}

/* ==================================================
js-setLoad
================================================== */
.double-bounce1,
.double-bounce2 {
  background-color: #292929;
}

button.nl {
  height: 60px;
  width: 40px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  border-top: 2px solid #0081c3;
  border-right: 2px solid transparent;
  border-bottom: none;
  border-left: none;
  -webkit-animation: spinner5 700ms linear infinite;
  animation: spinner5 700ms linear infinite;
}

@-webkit-keyframes spinner5 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinner5 {
  to {
    transform: rotate(360deg);
  }
}

.loadingSet {
  display: none;
  width: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loadingSet p img {
  max-width: 80px;
  width: 30%;
  height: auto;
}

.loadingSet figure {
  width: 100%;
  margin: 20px auto 0;
}

.loadingSet figure svg {
  width: 140px;
  height: 32px;
  fill: #dc042a;
}

.loadingSet figure figcaption {
  line-height: 1.5;
  margin: 5px auto 0;
  text-align: center;
  font-weight: bold;
}

.js-setLoad .loadingSet {
  display: block;
}

/* ==================================================
header
================================================== */

#hdrSct {
  width: auto;
  position: absolute;
  right: 0;
  top: 0;
  max-width: 180px;
  z-index: 10;
}
#hdrSct .hdrlogoBlk {
}
#hdrSct .hdrlogoBlk a {
}

@media screen and (min-width: 900px) {
  #hdrSct .hdrlogoBlk {
  }
  #hdrSct .hdrlogoBlk a {
  }
}

/* ==================================================
footer
================================================== */
#ftrSct {
  margin: 0 auto 0;
  text-align: center;
  box-sizing: border-box;
  background: var(--clrNavy);
  padding: 60px 10% 60px;
}

#ftrSct .ftrLogo {
  width: 55%;
  margin: 0 auto;
  max-width: 220px;
}
#ftrSct .ftrLogo a {
  width: 100%;
}
#ftrSct .ftrImgTxtSet {
  display: flex;
  flex-flow: column;
  justify-content: center;
  margin: 60px auto 0;
}
#ftrSct .ftrImgTxtSet .imgObj {
  width: 75%;
  margin: 0 auto;
  max-width: 240px;
}
#ftrSct .ftrImgTxtSet .txtObj {
  margin: 1em auto 0;
}

@media screen and (min-width: 900px) {
  #ftrSct {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 80px 3% 60px;
  }

  #ftrSct .ftrLogo {
    margin: 0 auto 0 0;
  }
  a {
  }
  #ftrSct .ftrImgTxtSet {
    margin: 0 0 0 auto;
  }
  #ftrSct .ftrImgTxtSet .imgObj {
    width: 100%;
  }
  #ftrSct .ftrImgTxtSet .txtObj {
    margin: 0.5em 0 0;
    text-align: right;
  }
}