@charset "utf-8";

/*　fontstyle
*********************************************************/
html {
  font-size: 62.5%;
}

.indent-f {
  text-indent: 1em;
  padding-left: 1em;
}

.indent-b {
  text-indent: -1em;
  padding-left: 2em;
}

.fs12 {
  line-height: 1.6;
  font-size: 1.2rem;
}
.fs13 {
  line-height: 1.6;
  font-size: 1.3rem;
}
.fs14 {
  line-height: 1.6;
  font-size: 1.4rem;
}
.fs15 {
  line-height: 1.6;
  font-size: 1.5rem;
}
.fs16 {
  line-height: 1.6;
  font-size: 1.6rem;
}
.fs17 {
  line-height: 1.6;
  font-size: 1.7rem;
}
.fs18 {
  line-height: 1.6;
  font-size: 1.8rem;
}
.fs19 {
  line-height: 1.6;
  font-size: 1.9rem;
}
.fs20 {
  line-height: 1.6;
  font-size: 2rem;
}
.fs22 {
  line-height: 1.6;
  font-size: 2.2rem;
}
.fs25 {
  line-height: 1.6;
  font-size: 2.5rem;
}
.fs28 {
  line-height: 1.6;
  font-size: 2.8rem;
}
.fs30 {
  line-height: 1.6;
  font-size: 3rem;
}
.fs35 {
  line-height: 1.6;
  font-size: 3.5rem;
}
.fs40 {
  line-height: 1.6;
  font-size: 4rem;
}
.fs45 {
  line-height: 1.6;
  font-size: 4.5rem;
}
.fs50 {
  line-height: 1.6;
  font-size: 5rem;
}
.fs55 {
  line-height: 1.6;
  font-size: 5.5rem;
}
.fs60 {
  line-height: 1.6;
  font-size: 6rem;
}
.fs65 {
  line-height: 1.6;
  font-size: 6.5rem;
}
.fs70 {
  line-height: 1.6;
  font-size: 7rem;
}
.fs80 {
  line-height: 1.6;
  font-size: 8rem;
}
.fs100 {
  line-height: 1.6;
  font-size: 10rem;
}
.fs120 {
  line-height: 1.6;
  font-size: 12rem;
}
.fs130 {
  line-height: 1.6;
  font-size: 13rem;
}
.fs150 {
  line-height: 1.6;
  font-size: 15rem;
}
.fs200 {
  line-height: 1.6;
  font-size: 20rem;
}

.m10 {
  margin-top: 1rem;
}
.m20 {
  margin-top: 2rem;
}
.m30 {
  margin-top: 3rem;
}
.m40 {
  margin-top: 4rem;
}
.m50 {
  margin-top: 5rem;
}
.m60 {
  margin-top: 6rem;
}
.m70 {
  margin-top: 7rem;
}
.m80 {
  margin-top: 8rem;
}
.m90 {
  margin-top: 9rem;
}
.m100 {
  margin-top: 10rem;
}
.m120 {
  margin-top: 12rem;
}
.m150 {
  margin-top: 15rem;
}
.m200 {
  margin-top: 20rem;
}

.mb20 {
  margin-bottom: 2rem;
}
.mb30 {
  margin-bottom: 3rem;
}
.mb50 {
  margin-bottom: 5rem;
}
.mb60 {
  margin-bottom: 6rem;
}
.mb70 {
  margin-bottom: 7rem;
}
.mb80 {
  margin-bottom: 8rem;
}
.mb100 {
  margin-bottom: 10rem;
}
.mb150 {
  margin-bottom: 15rem;
}

.p0 {
  padding-top: 0;
}
.p10 {
  padding-top: 1rem;
}
.p20 {
  padding-top: 2rem;
}
.p30 {
  padding-top: 3rem;
}
.p40 {
  padding-top: 4rem;
}
.p50 {
  padding-top: 5rem;
}
.p60 {
  padding-top: 6rem;
}
.p70 {
  padding-top: 7rem;
}
.p80 {
  padding-top: 8rem;
}
.p90 {
  padding-top: 9rem;
}
.p100 {
  padding-top: 10rem;
}
.p120 {
  padding-top: 12rem;
}
.p130 {
  padding-top: 13rem;
}
.p150 {
  padding-top: 15rem;
}
.p170 {
  padding-top: 17rem;
}
.p200 {
  padding-top: 20rem;
}

.pb0 {
  padding-bottom: 0rem;
}
.pb10 {
  padding-bottom: 1rem;
}
.pb20 {
  padding-bottom: 2rem;
}
.pb30 {
  padding-bottom: 3rem;
}
.pb40 {
  padding-bottom: 4rem;
}
.pb50 {
  padding-bottom: 5rem;
}
.pb60 {
  padding-bottom: 6rem;
}
.pb70 {
  padding-bottom: 7rem;
}
.pb80 {
  padding-bottom: 8rem;
}
.pb90 {
  padding-bottom: 9rem;
}
.pb100 {
  padding-bottom: 10rem;
}
.pb150 {
  padding-bottom: 15rem;
}

.w100 {
  width: 100%;
}
.w95 {
  width: 95%;
}
.w90 {
  width: 90%;
}
.w80 {
  width: 80%;
}
.w70 {
  width: 70%;
}
.w60 {
  width: 60%;
}
.w50 {
  width: 50%;
}
.w40 {
  width: 40%;
}
.w30 {
  width: 30%;
}
.w20 {
  width: 20%;
}
.w10 {
  width: 10%;
}

.mcenter {
  margin-left: auto;
  margin-right: auto;
}

.bld {
  font-weight: 800;
}

.nml {
  font-weight: normal;
}
.str {
  text-decoration: line-through;
}
.und {
  text-decoration: underline;
}
.wav {
  text-decoration: underline wavy;
}
.dou {
  text-decoration: underline double;
}
.dot {
  text-decoration: underline dotted;
}

.red {
  color: #ff2a2e;
}
.pink {
  color: #ff2b74;
}
.blue {
  color: #3485ff;
}
.sky {
  color: #00abff;
}
.yellow {
  color: #ffff00;
}
.orange {
  color: #febb48;
}
.orange-k {
  color: #ff7f00;
}
.green {
  color: #4ea63e;
}
.bk {
  color: #000000;
}
.wt {
  color: #ffffff;
}
.gray {
  color: #adadad;
}
.blown {
  color: #440808;
}
.beige {
  color: #e7b05e;
}

.gold {
  background: repeating-linear-gradient(
    0deg,
    #b67b03 0.1em,
    #daaf08 0.2em,
    #fee9a0 0.3em,
    #daaf08 0.4em,
    #b67b03 0.5em
  );
  -webkit-background-clip: text;
  color: transparent;
}
.gold2 {
  background-image: linear-gradient(
    0deg,
    #b8751e 0%,
    #ffce08 37%,
    #fefeb2 47%,
    #fafad6 50%,
    #fefeb2 53%,
    #e1ce08 63%,
    #b8751e 100%
  );
  -webkit-background-clip: text;
  color: transparent;
}
.gold3 {
  background-image: linear-gradient(
    135deg,
    #b8751e 0%,
    #ffce08 37%,
    #fefeb2 47%,
    #fafad6 50%,
    #fefeb2 53%,
    #e1ce08 63%,
    #b8751e 100%
  );
  -webkit-background-clip: text;
  color: transparent;
}
.gold4 {
  color: transparent;
  background: repeating-linear-gradient(
    135deg,
    #b67b03 0.1em,
    #daaf08 0.2em,
    #fee9a0 0.3em,
    #daaf08 0.4em,
    #b67b03 0.5em
  );
  -webkit-background-clip: text;
}

.silver {
  color: transparent;
  background: repeating-linear-gradient(
    135deg,
    #757575 0.1em,
    #9e9e9e 0.2em,
    #e8e8e8 0.3em,
    #9e9e9e 0.4em,
    #757575 0.5em
  );
  -webkit-background-clip: text;
}

.silver2 {
  color: transparent;
  background: repeating-linear-gradient(
    0deg,
    #757575 0.1em,
    #9e9e9e 0.2em,
    #e8e8e8 0.3em,
    #9e9e9e 0.4em,
    #757575 0.5em
  );
  -webkit-background-clip: text;
}

.bg-y {
  background: #fff000;
  padding: 0 1rem;
}

.bg-bk {
  background: #000000;
}

.bg-r {
  background-color: #de2024;
  padding: 0 1rem;
}

.bg-red {
  background-color: #b60003;
}

.bg-g {
  background-color: #4ea63e;
}
.bg-vio {
  background-color: #5d23ba;
}
.bg-lg {
  background-color: #bbdd64;
}
.bg-bl {
  background-color: #1c54a8;
}
.bg-sky {
  background-color: #0fc1b2;
}
.bg-gr {
  background-color: #ececec;
}
.bg-dgr {
  background-color: #7e7e7e;
}
.bg-o {
  background-color: #febb48;
}
.bg-wt {
  background-color: #ffffff;
  padding: 0 1rem;
}
.bg-pk {
  background-color: #ff2b74;
}
.bg-p {
  background-color: #ffcbde;
}

.center {
  /* display:block; */
  text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}

.prl10 {
  padding-right: 1.6rem;
  padding-left: 1.6rem;
}

.br5 {
  border-radius: 0.5rem;
}
.br10 {
  border-radius: 1rem;
}

.area-gr {
  background: #f7f6f4;
  border: 1px solid #dddddd;
}

.area-y {
  background: #ffee3a;
}
.area-dy {
  background: #ffd92a;
}
.area-0404 {
  background: #ffffff;
}

.lh1 {
  line-height: 1 !important;
}
.lh11 {
  line-height: 1.1 !important;
}
.lh12 {
  line-height: 1.2 !important;
}
.lh13 {
  line-height: 1.3 !important;
}
.lh14 {
  line-height: 1.4 !important;
}
.lh15 {
  line-height: 1.5 !important;
}

.area-wt {
  background-color: #ffffff;
}
.area-rd {
  background-color: #c83231;
}
.area-bk {
  background-color: #000000;
}
.area-lgr {
  background-color: #cff2a2;
}
.area-lg {
  background-color: #b0e860;
  margin-left: -4rem;
}
.area-bl {
  background-color: #bb6900;
}
.area-pk {
  background-color: #ff2b74;
}
.area-nv {
  background-color: #081831;
}

.area-bbk {
  border: 0.2rem solid #000000;
}
.area-bwt {
  border: 0.2rem solid #ffffff;
}
.area-bpk {
  border: 0.2rem solid #ff2b74;
}
.area-double {
  border: 0.5rem double #000000;
}
.area-double-wt {
  border: 0.5rem double #ffffff;
}

.area-p5 {
  padding: 0.5rem;
}
.area-p10 {
  padding: 1rem;
}
.area-p20 {
  padding: 2rem;
}
.area-p30 {
  padding: 3rem;
}
.area-p40 {
  padding: 4rem;
}

.area-ss {
  filter: drop-shadow(10px 10px 0px rgba(0, 0, 0, 0.4));
}

.border-td {
  border-top: 1px dashed #9e9e9e;
}
.border-bd {
  border-bottom: 1px dashed #9e9e9e;
}

.area-dot {
  background-image: url("https://www.transparenttextures.com/patterns/white-carbon.png");
}

.shadow {
  box-shadow: 0 0px 25px #000000;
}

.shadow-s {
  box-shadow: 0 0px 10px #9e9e9e;
}

.shadow-f {
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.3));
}

.shadow-v {
  box-shadow: 20px 20px 0px rgba(0, 0, 0, 0.4);
}

.shadow-in {
  box-shadow: 0 0px 30px #000000 inset;
}

.flash-wt {
  filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, 1));
}

.flash-sky {
  filter: drop-shadow(0px 0px 20px rgba(83, 224, 252, 1));
}

.flash-in {
  box-shadow: 0 0 13px 5px #ffffff inset;
}

.t-shadow {
  text-shadow: 0 2px 15px rgba(0, 0, 0, 1);
}

.t-shadow_f {
  text-shadow: 0 -2px 1px #fff;
}

.box-dou {
  padding: 10px;
  border: 0.5rem solid #000000;
  box-shadow: rgba(104, 66, 30, 0.5) 0px 0px 15px 5px inset;
  -webkit-box-shadow: rgba(104, 66, 30, 0.5) 0px 0px 15px 5px inset;
  -moz-box-shadow: rgba(104, 66, 30, 0.5) 0px 0px 15px 5px inset;
}

.area-cwt {
  background-color: rgba(255, 255, 255, 0.7);
}

.area-cbk {
  background-color: rgba(0, 0, 0, 0.5);
}

.area-cgr {
  background-color: rgba(20, 170, 0, 0.5);
}

.marker {
  background: linear-gradient(transparent 60%, #fdf38c 60%);
}

.marker-r {
  background: linear-gradient(transparent 60%, #c01111 60%);
}

.marker-y {
  background: linear-gradient(transparent 60%, #fffb0e 60%);
}

.clr {
  clear: both;
}
.fr {
  float: right;
}
.fr-c {
  float: right;
}
.fl {
  float: left;
}

.clearfix:after {
  content: "";
  clear: both;
  display: block;
}

.vt {
  vertical-align: top;
}
.vm {
  vertical-align: middle;
}
.vb {
  vertical-align: bottom;
}

.grad {
  animation: example 3s linear infinite;
  width: 100%;
  background: linear-gradient(to right, #eedd95 0%, #e1e0e5 50%, #eedd95 100%)
    0% center / 200% auto;
  text-shadow: none;
  display: inline-block;
}

@keyframes example {
  to {
    background-position-x: 200%;
  }
}

.mincho1 {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 300;
}

.mincho2 {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 500;
}

.mincho3 {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 700;
}

.mincho4 {
  font-family: "Noto Serif JP", sans-serif;
  font-weight: 900;
}

/*sponly  pconly*/
.sponly {
  display: none;
}

.pconly {
  display: block;
}

@media screen and (max-width: 768px) {
  .sponly {
    display: block;
  }
  .pconly {
    display: none;
  }
}