@import url("./_component.css");
@import url("./_layout.css");
@import url("./_page.css");

/* 変数登録 */
:root {
  /* Color */
  --keyColor: #f00;
  --white: #fff;
  --black: #000;
  --black-l: #363636;
  --bgColor: rgba(177, 89, 124, 0.10);
  --pail-purple: #E4E1E8;
  --purple: #7B7089;
  --line_glay: #C5C5C5;

  /* Space */
  --secPadding: 90px;
  --secPadding-sp: 60px;
  --secPaddingLg: 120px;
  --secPaddingLg-sp: 80px;

  /* Width */
  --contentWidth: 1170px;
  --contentWidth-lg: 1200px;

  /* Font */
  --fontSize: 16px;
  --fontSize-sp: 14px;
  --fontShippori: "Shippori Mincho";
  --fontZenKaku: "Zen Kaku Gothic New", sans-serif;;

  /* Animation */
  --transition: 0.2s ease-in-out;
}



/********************************************/

/* Media Query */
/*
コピペ用
@media screen and (max-width: 568px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 1024px) {}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 1280px) {}

@media screen and (min-width: 568px) {}
@media screen and (min-width: 768px) {}
@media screen and (min-width: 1024px) {}
@media screen and (min-width: 1200px) {}
@media screen and (min-width: 1280px) {}
*/

/********************************************/
/* Base */
/********************************************/


/********************************************/
/* Utility */
/********************************************/
.u-bgColor {
  background-color: var(--bgColor);
}

.u-only--pc{
  display: block;
  @media screen and (max-width: 1024px) {
    display: none;
  }
}
.u-only--sp{
  display: none;
}
@media screen and (max-width: 1024px) {
  .u-only--sp{
    display: block;
  }
}
.u-under--768 {
  display: none;
  @media screen and (max-width: 768px) {
    display: block;
  }
}
.u-not-under--768 {
  display: block;
  @media screen and (max-width: 768px) {
    display: none;
  }
}