/*----------------------------------------------------------------------
//////////■■■■base style■■■■//////////
----------------------------------------------------------------------*/
html {
  font-size: 62.5%;
}

body {
  background: #fff;
  font-family: 'Noto Sans JP',sans-serif;

  color: #181818;
  min-width: 100%;
  width: 100%;
  overflow-x: hidden;
  position: relative;
  font-size: 1.6rem;
  font-weight: 400;
}



a {
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
}
.pconly{
	display: block;
}
.sponly{
	display: none;
}

@media (max-width: 768px) {

.pconly{
	display: none;
}
.sponly{
	display: block;
}
}

/* ============================================================
 clearfix
============================================================ */
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
 
.clearfix:before {
　　　　content: "";
	display: block;
	clear: both;
}
 
.clearfix {
	display: block;
}
/* ============================================================
 common
============================================================ */

/* ============================================================
フォント指定
============================================================ */
.fjalla{
	font-family: Fjalla One,sans-serif;
}

.brandon{
	font-family: Brandon,sans-serif;
}

/* ============================================================
margin & padding
============================================================ */
.mT5 {
  margin-top: 5px;
}

.mT10 {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .mT10 {
    margin-top: 2%;
  }
}

.mT20 {
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .mT20 {
    margin-top: 3%;
  }
}

.mT30 {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .mT30 {
    margin-top: 4%;
  }
}

.mT40 {
  margin-top: 40px;
}

@media screen and (max-width: 768px) {
  .mT40 {
    margin-top: 5%;
  }
}

.mT50 {
  margin-top: 50px;
}

@media screen and (max-width: 768px) {
  .mT50 {
    margin-top: 6%;
  }
}

.mT60 {
  margin-top: 60px;
}

@media screen and (max-width: 768px) {
  .mT60 {
    margin-top: 7%;
  }
}

.mT70 {
  margin-top: 70px;
}

@media screen and (max-width: 768px) {
  .mT70 {
    margin-top: 8%;
  }
}

.mT80 {
  margin-top: 80px;
}

@media screen and (max-width: 768px) {
  .mT80 {
    margin-top: 9%;
  }
}

.mT90 {
  margin-top: 90px;
}

@media screen and (max-width: 768px) {
  .mT90 {
    margin-top: 10%;
  }
}

.mT100 {
  margin-top: 100px;
}

@media screen and (max-width: 768px) {
  .mT100 {
    margin-top: 11%;
  }
}

.mT110 {
  margin-top: 110px;
}

@media screen and (max-width: 768px) {
  .mT110 {
    margin-top: 12%;
  }
}

.mT120 {
  margin-top: 120px;
}

@media screen and (max-width: 768px) {
  .mT120 {
    margin-top: 13%;
  }
}

.mT130 {
  margin-top: 130px;
}

@media screen and (max-width: 768px) {
  .mT130 {
    margin-top: 14%;
  }
}

.mT140 {
  margin-top: 140px;
}

@media screen and (max-width: 768px) {
  .mT140 {
    margin-top: 15%;
  }
}

.mB10 {
  margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .mB10 {
    margin-bottom: 2%;
  }
}

.mB20 {
  margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .mB20 {
    margin-bottom: 3%;
  }
}

.mB30 {
  margin-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .mB30 {
    margin-bottom: 4%;
  }
}

.mB40 {
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .mB40 {
    margin-bottom: 5%;
  }
}

.mB50 {
  margin-bottom: 50px;
}

@media screen and (max-width: 768px) {
  .mB50 {
    margin-bottom: 6%;
  }
}

.mB60 {
  margin-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .mB60 {
    margin-bottom: 7%;
  }
}

.mB70 {
  margin-bottom: 70px;
}

@media screen and (max-width: 768px) {
  .mB70 {
    margin-bottom: 8%;
  }
}

.mB80 {
  margin-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .mB80 {
    margin-bottom: 9%;
  }
}

.mB90 {
  margin-bottom: 90px;
}

@media screen and (max-width: 768px) {
  .mB90 {
    margin-bottom: 10%;
  }
}

.mB100 {
  margin-bottom: 100px;
}

@media screen and (max-width: 768px) {
  .mB100 {
    margin-bottom: 11%;
  }
}

.mB110 {
  margin-bottom: 110px;
}

@media screen and (max-width: 768px) {
  .mB110 {
    margin-bottom: 12%;
  }
}

.mB120 {
  margin-bottom: 120px;
}

@media screen and (max-width: 768px) {
  .mB120 {
    margin-bottom: 13%;
  }
}

.mB130 {
  margin-bottom: 130px;
}

@media screen and (max-width: 768px) {
  .mB130 {
    margin-bottom: 14%;
  }
}

.mB140 {
  margin-bottom: 140px;
}

@media screen and (max-width: 768px) {
  .mB140 {
    margin-bottom: 15%;
  }
}

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

.mLa {
  margin-left: auto;
}

.pT10 {
  padding-top: 10px;
}

@media screen and (max-width: 768px) {
  .pT10 {
    padding-top: 2%;
  }
}

.pT20 {
  padding-top: 20px;
}

@media screen and (max-width: 768px) {
  .pT20 {
    padding-top: 3%;
  }
}

.pT30 {
  padding-top: 30px;
}

@media screen and (max-width: 768px) {
  .pT30 {
    padding-top: 4%;
  }
}

.pT40 {
  padding-top: 40px;
}

@media screen and (max-width: 768px) {
  .pT40 {
    padding-top: 5%;
  }
}

.pT50 {
  padding-top: 50px;
}

@media screen and (max-width: 768px) {
  .pT50 {
    padding-top: 6%;
  }
}

.pT60 {
  padding-top: 60px;
}

@media screen and (max-width: 768px) {
  .pT60 {
    padding-top: 7%;
  }
}

.pT70 {
  padding-top: 70px;
}

@media screen and (max-width: 768px) {
  .pT70 {
    padding-top: 8%;
  }
}

.pT80 {
  padding-top: 80px;
}

@media screen and (max-width: 768px) {
  .pT80 {
    padding-top: 9%;
  }
}

.pT90 {
  padding-top: 90px;
}

@media screen and (max-width: 768px) {
  .pT90 {
    padding-top: 10%;
  }
}

.pT100 {
  padding-top: 100px;
}

@media screen and (max-width: 768px) {
  .pT100 {
    padding-top: 11%;
  }
}

.pT110 {
  padding-top: 110px;
}

@media screen and (max-width: 768px) {
  .pT110 {
    padding-top: 12%;
  }
}

.pT120 {
  padding-top: 120px;
}

@media screen and (max-width: 768px) {
  .pT120 {
    padding-top: 13%;
  }
}

.pT130 {
  padding-top: 130px;
}

@media screen and (max-width: 768px) {
  .pT130 {
    padding-top: 14%;
  }
}

.pT140 {
  padding-top: 140px;
}

@media screen and (max-width: 768px) {
  .pT140 {
    padding-top: 15%;
  }
}

.pT150 {
  padding-top: 150px;
}

@media screen and (max-width: 768px) {
  .pT150 {
    padding-top: 16%;
  }
}

.pT160 {
  padding-top: 160px;
}

@media screen and (max-width: 768px) {
  .pT160 {
    padding-top: 17%;
  }
}

.pT170 {
  padding-top: 170px;
}

@media screen and (max-width: 768px) {
  .pT170 {
    padding-top: 18%;
  }
}

.pT180 {
  padding-top: 180px;
}

@media screen and (max-width: 768px) {
  .pT180 {
    padding-top: 19%;
  }
}

.pT190 {
  padding-top: 190px;
}

@media screen and (max-width: 768px) {
  .pT190 {
    padding-top: 20%;
  }
}

.pT200 {
  padding-top: 200px;
}

@media screen and (max-width: 768px) {
  .pT200 {
    padding-top: 21%;
  }
}

.pB10 {
  padding-bottom: 10px;
}

@media screen and (max-width: 768px) {
  .pB10 {
    padding-bottom: 2%;
  }
}

.pB20 {
  padding-bottom: 20px;
}

@media screen and (max-width: 768px) {
  .pB20 {
    padding-bottom: 3%;
  }
}

.pB30 {
  padding-bottom: 30px;
}

@media screen and (max-width: 768px) {
  .pB30 {
    padding-bottom: 4%;
  }
}

.pB40 {
  padding-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .pB40 {
    padding-bottom: 5%;
  }
}

.pB50 {
  padding-bottom: 50px;
}

@media screen and (max-width: 768px) {
  .pB50 {
    padding-bottom: 6%;
  }
}

.pB60 {
  padding-bottom: 60px;
}

@media screen and (max-width: 768px) {
  .pB60 {
    padding-bottom: 7%;
  }
}

.pB70 {
  padding-bottom: 70px;
}

@media screen and (max-width: 768px) {
  .pB70 {
    padding-bottom: 8%;
  }
}

.pB80 {
  padding-bottom: 80px;
}

@media screen and (max-width: 768px) {
  .pB80 {
    padding-bottom: 9%;
  }
}

.pB90 {
  padding-bottom: 90px;
}

@media screen and (max-width: 768px) {
  .pB90 {
    padding-bottom: 10%;
  }
}

.pB100 {
  padding-bottom: 100px;
}

@media screen and (max-width: 768px) {
  .pB100 {
    padding-bottom: 11%;
  }
}

.pB110 {
  padding-bottom: 110px;
}

@media screen and (max-width: 768px) {
  .pB110 {
    padding-bottom: 12%;
  }
}

.pB120 {
  padding-bottom: 120px;
}

@media screen and (max-width: 768px) {
  .pB120 {
    padding-bottom: 13%;
  }
}

.pB130 {
  padding-bottom: 130px;
}

@media screen and (max-width: 768px) {
  .pB130 {
    padding-bottom: 14%;
  }
}

.pB140 {
  padding-bottom: 140px;
}

@media screen and (max-width: 768px) {
  .pB140 {
    padding-bottom: 15%;
  }
}

.pB150 {
  padding-bottom: 150px;
}

@media screen and (max-width: 768px) {
  .pB150 {
    padding-bottom: 16%;
  }
}

.pB160 {
  padding-bottom: 160px;
}

@media screen and (max-width: 768px) {
  .pB160 {
    padding-bottom: 17%;
  }
}

.pB170 {
  padding-bottom: 170px;
}

@media screen and (max-width: 768px) {
  .pB170 {
    padding-bottom: 18%;
  }
}

.pB180 {
  padding-bottom: 180px;
}

@media screen and (max-width: 768px) {
  .pB180 {
    padding-bottom: 19%;
  }
}

.pB190 {
  padding-bottom: 190px;
}

@media screen and (max-width: 768px) {
  .pB190 {
    padding-bottom: 20%;
  }
}

.pB200 {
  padding-bottom: 200px;
}

@media screen and (max-width: 768px) {
  .pB200 {
    padding-bottom: 21%;
  }
}

/* ============================================================
font style
============================================================ */
.f11 {
  font-size: 11px;
}

.f12 {
  font-size: 12px;
}

.f13 {
  font-size: 13px;
}

.f14 {
  font-size: 14px;
}

.f15 {
  font-size: 15px;
}

.f16 {
  font-size: 16px;
}

.f17 {
  font-size: 17px;
}

.f18 {
  font-size: 18px;
}

.f19 {
  font-size: 19px;
}

.f20 {
  font-size: 20px;
}

.f21 {
  font-size: 21px;
}

.f22 {
  font-size: 22px;
}

.f23 {
  font-size: 23px;
}

.f24 {
  font-size: 24px;
}

.f25 {
  font-size: 25px;
}

.f26 {
  font-size: 26px;
}

.f27 {
  font-size: 27px;
}

.f28 {
  font-size: 28px;
}

.f29 {
  font-size: 29px;
}

.f30 {
  font-size: 30px;
}

.f31 {
  font-size: 31px;
}

.f32 {
  font-size: 32px;
}

.f33 {
  font-size: 33px;
}

.f34 {
  font-size: 34px;
}

.f35 {
  font-size: 35px;
}

.f36 {
  font-size: 36px;
}

.f37 {
  font-size: 37px;
}

.f38 {
  font-size: 38px;
}

.f39 {
  font-size: 39px;
}

.f40 {
  font-size: 40px;
}

@media screen and (max-width: 768px) {
  .f12 {
    font-size: 1rem;
  }
  .f20 {
    font-size: 1.5rem;
  }
  .f22 {
    font-size: 1.6rem;
  }
  .f23 {
    font-size: 1.6rem;
  }
  .f24 {
    font-size: 1.7rem;
  }
  .f25 {
    font-size: 1.8rem;
  }
  .f26 {
    font-size: 1.8rem;
  }
  .f27 {
    font-size: 1.9rem;
  }
  .f28 {
    font-size: 2.2rem;
  }
  .f29 {
    font-size: 1.8rem;
  }
  .f30 {
    font-size: 2.6rem;
  }
  .f32 {
    font-size: 2.6rem;
  }
  .f34 {
    font-size: 2.6rem;
  }
  .f40 {
    font-size: 2.6rem;
  }
}

@media screen and (max-width: 414px) {
  .f18 {
    font-size: 1.4rem;
  }
  .f20 {
    font-size: 1.6rem;
  }
  .f22 {
    font-size: 1.6rem;
  }
  .f24 {
    font-size: 1.6rem;
  }
  .f28 {
    font-size: 1.7rem;
  }
  .f30 {
    font-size: 2rem;
  }
  .f32 {
    font-size: 2.1rem;
  }
  .f34 {
    font-size: 1.9rem;
  }
  .f40 {
    font-size: 2.7rem;
  }
}

.nse {
  font-family: "Noto Serif JP", serif;
}

.nsa {
  font-family: "Noto Sans JP", sans-serif;
}

.caliban {
  font-family: caliban-std,sans-serif;
  font-weight: 400;
  font-style: normal;
}

.robot {
  font-family: 'Roboto', sans-serif;
}

.red {
  color: #ad0000;
}

.yellow {
  color: #d9bc47;
}

.orng {
  color: #ff6600;
}

.gray {
  color: #666;
}

.lgray {
  color: #ccc;
}

.blk {
  color: #111;
}

.Bparp {
  color: #1a34bb;
}

.wht {
  color: #fff;
}

.italic {
  font-style: italic;
}

.bold {
  font-weight: 700;
}

.light {
  font-weight: 300;
}

.regular {
  font-weight: 400;
}

.medium {
  font-weight: 500;
}

.bold {
  font-weight: 700;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.lft768 {
  text-align: center;
}

.lttsp{
letter-spacing: -2px;
}

@media screen and (max-width: 768px) {
  .lft768 {
    text-align: left;
  }
}

.lft414 {
  text-align: center;
}

@media screen and (max-width: 414px) {
  .lft414 {
    text-align: left;
  }
}

/*-----------------  line-height  -----------------*/
.lh10 {
  line-height: 1;
}

.lh11 {
  line-height: 1.1;
}

.lh12 {
  line-height: 1.2;
}

.lh13 {
  line-height: 1.3;
}

.lh14 {
  line-height: 1.4;
}

.lh15 {
  line-height: 1.5;
}

.lh16 {
  line-height: 1.6;
}

.lh17 {
  line-height: 1.7;
}

.lh18 {
  line-height: 1.8;
}

.lh19 {
  line-height: 1.9;
}

.lh20 {
  line-height: 2;
}

.lh21 {
  line-height: 2.1;
}

.lh22 {
  line-height: 2.2;
}

.lh23 {
  line-height: 2.3;
}

.lh24 {
  line-height: 2.4;
}

/* ============================================================
 clearfix
============================================================ */
.clearfix {
  zoom: 1;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

/* ============================================================
display: none
============================================================ */
@media screen and (max-width: 414px) {
  .mbnone {
    display: none;
  }
}

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

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

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