@charset "UTF-8";

/* yellow */
:root {
  --tx_col: #1D1D1D;
  --white: #fff;
  --gray: #4F5A61;
  --light-gray: #D9D9D9;
  --bg: #fff;
  --tit: #F38200;
  --btn: #F3BA00;
  --b-1: #B2EFF1;
  --b-2: #ECF3C8;
  --b-3: #E6E1FF;
  --b-4: #FDEDC7;
  --b-1-dark: #38C4E6;
  --b-2-dark: #7AB200;
  --b-3-dark: #8756DE;
  --b-4-dark: #FFAA00;
  --gradation: transparent linear-gradient(90deg, #F3BA00 0%, #F38200 100%) 0% 0% no-repeat padding-box;
  --b-1-g: #B2EFF1 0% 0% no-repeat padding-box;
  --b-2-g: #ECF3C8 0% 0% no-repeat padding-box;
  --b-3-g: #E6E1FF 0% 0% no-repeat padding-box;
  --b-4-g: #FDEDC7 0% 0% no-repeat padding-box;
}

/* ---------------
base
-------------- */
body {
  color: var(--tx_col);
}

/* ---------------
btn
-------------- */
.btn {
  padding: 0.7em 1.5em;
  display: flex;
  line-height: 1.2;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: solid 2px var(--btn);
  color: var(--white);
  background-color: var(--btn);
}

.btn-frame {
  border: solid 2px var(--btn);
  color: var(--btn);
  background-color: var(--white);
}

.btn-paint {
  border: solid 2px var(--btn);
  color: var(--white);
  background-color: var(--btn);
}

/* ---------------
main
-------------- */
.fixed-bg {
  background-image: url(../img/bg_b.jpg);
}

/* ---------------
header
-------------- */
header {
  background-color: #fff;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.head-c {
  color: var(--tx_col);
}

.head-r .btn-frame {
  background: var(--btn);
  color: #fff;
  border-color: var(--btn);
}

.head-r .btn-paint {
  background: var(--tit);
  border-color: var(--tit);
}

/* ---------------
footer
-------------- */
footer {
  color: #fff;
  background-color: #606060;
}