@charset "UTF-8";



/** テキスト
---------------------------------------------**/
.large{
  font-size: 1.6rem;
  line-height: 1.8;
}

.small{
  font-size: 1.4rem;
  line-height: 1.6;
}

.font-17{
  font-size: 1.7rem;
}

.font-22{
  font-size: 2.2rem;
}

.font-26{
  font-size: 2.6rem;
}

.font-40{
  font-size: 4.0rem;
}

.text-center,
.pc-text-center{
  text-align: center;
}

.text-left{
  text-align: left;
}

.text-right{
  text-align: right;
}


/** テキストカラー
---------------------------------------------**/
.red{
  color: #d92d55;
}

.red-purple{
  color: #d8315d !important;
}

.pink{
  color: #e77290;
}

.purple{
  color: #473a8c !important;
}

.red.large{
  font-size: 2.6rem;
}


/** 太字
---------------------------------------------**/
.bold{
  font-weight: bold;
}


/** margin
---------------------------------------------**/
.m-0{ margin: 0 !important; }
.m-auto{ margin: 0 auto !important; }

/* top */
.mt-0{ margin-top: 0 !important; }
.mt-05{ margin-top: 5px !important; }
.mt-10{ margin-top: 10px !important; }
.mt-15{ margin-top: 15px !important; }
.mt-20{ margin-top: 20px !important; }
.mt-25{ margin-top: 25px !important; }
.mt-30{ margin-top: 30px !important; }
.mt-35{ margin-top: 35px !important; }
.mt-40{ margin-top: 40px !important; } 

/* left */
.ml-0{ margin-left: 0 !important; }
.ml-05{ margin-left: 5px !important; }
.ml-10{ margin-left: 10px !important; }
.ml-15{ margin-left: 15px !important; }
.ml-20{ margin-left: 20px !important; }
.ml-25{ margin-left: 25px !important; }
.ml-30{ margin-left: 30px !important; }
.ml-35{ margin-left: 35px !important; }
.ml-40{ margin-left: 40px !important; }

/* right */
.mr-0{ margin-right: 0 !important; }
.mr-05{ margin-right: 5px !important; }
.mr-10{ margin-right: 10px !important; }
.mr-15{ margin-right: 15px !important; }
.mr-20{ margin-right: 20px !important; }
.mr-25{ margin-right: 25px !important; }
.mr-30{ margin-right: 30px !important; }
.mr-35{ margin-right: 35px !important; }
.mr-40{ margin-right: 40px !important; }

/* bottom */
.mb-0{ margin-bottom: 0 !important; }
.mb-05{ margin-bottom: 5px !important; }
.mb-10{ margin-bottom: 10px !important; }
.mb-15{ margin-bottom: 15px !important; }
.mb-20{ margin-bottom: 20px !important; }
.mb-30{ margin-bottom: 30px !important; }
.mb-35{ margin-bottom: 35px !important; }
.mb-40{ margin-bottom: 40px !important; }

/** padding
---------------------------------------------**/
.p-0{ padding: 0 !important; }

/* top */
.pt-0{ padding-top: 0 !important; }
.pt-5{ padding-top: 5px !important; }
.pt-10{ padding-top: 10px !important; }
.pt-15{ padding-top: 15px !important; }
.pt-20{ padding-top: 20px !important; }
.pt-25{ padding-top: 25px !important; }
.pt-30{ padding-top: 30px !important; }
.pt-35{ padding-top: 35px !important; }
.pt-40{ padding-top: 40px !important; }
.pt-45{ padding-top: 45px !important; }
.pt-50{ padding-top: 50px !important; }
.pt-55{ padding-top: 55px !important; }
.pt-60{ padding-top: 60px !important; }
.pt-100{ padding-top: 100px !important; }

/* left */
.pl-0{ padding-left: 0 !important; }
.pl-5{ padding-left: 5px !important; }
.pl-10{ padding-left: 10px !important; }
.pl-15{ padding-left: 15px !important; }
.pl-20{ padding-left: 20px !important; }
.pl-25{ padding-left: 25px !important; }
.pl-30{ padding-left: 30px !important; }
.pl-35{ padding-left: 35px !important; }
.pl-40{ padding-left: 40px !important; }
.pl-45{ padding-left: 45px !important; }
.pl-50{ padding-left: 50px !important; }
.pl-55{ padding-left: 55px !important; }
.pl-60{ padding-left: 60px !important; }
.pl-100{ padding-left: 100px !important; }

/* right */
.pr-0{ padding-right: 0 !important; }
.pr-5{ padding-right: 5px !important; }
.pr-10{ padding-right: 10px !important; }
.pr-15{ padding-right: 15px !important; }
.pr-20{ padding-right: 20px !important; }
.pr-25{ padding-right: 25px !important; }
.pr-35{ padding-right: 35px !important; }
.pr-40{ padding-right: 40px !important; }
.pr-45{ padding-right: 45px !important; }
.pr-50{ padding-right: 50px !important; }
.pr-55{ padding-right: 55px !important; }
.pr-60{ padding-right: 60px !important; }
.pr-100{ padding-right: 100px !important; }

/* bottom */
.pb-0{ padding-bottom: 0 !important; }
.pb-5{ padding-bottom: 5px !important; }
.pb-10{ padding-bottom: 10px !important; }
.pb-15{ padding-bottom: 15px !important; }
.pb-20{ padding-bottom: 20px !important; }
.pb-25{ padding-bottom: 25px !important; }
.pb-35{ padding-bottom: 35px !important; }
.pb-40{ padding-bottom: 40px !important; }
.pb-45{ padding-bottom: 45px !important; }
.pb-50{ padding-bottom: 50px !important; }
.pb-55{ padding-bottom: 55px !important; }
.pb-60{ padding-bottom: 60px !important; }
.pb-100{ padding-bottom: 100px !important; }

/** width
---------------------------------------------**/
.w100{ width: 100px !important; }
.w110{ width: 110px !important; }
.w120{ width: 120px !important; }
.w130{ width: 130px !important; }
.w140{ width: 140px !important; }
.w150{ width: 150px !important; }
.w160{ width: 160px !important; }
.w170{ width: 170px !important; }
.w180{ width: 180px !important; }
.w190{ width: 190px !important; }
.w200{ width: 200px !important; }
.w210{ width: 210px !important; }
.w220{ width: 220px !important; }
.w230{ width: 230px !important; }
.w240{ width: 240px !important; }
.w250{ width: 250px !important; }
.w260{ width: 260px !important; }
.w270{ width: 270px !important; }
.w280{ width: 280px !important; }
.w290{ width: 290px !important; }
.w300{ width: 300px !important; }
.w310{ width: 310px !important; }
.w320{ width: 310px !important; }

/** float左右
---------------------------------------------**/
.alignleft{
  margin-right: 20px;
}

.alignright {
  margin-left: 20px;
}

@media screen and (max-width: 768px) {
  /** テキスト
  ---------------------------------------------**/
  .large{
    font-size: 1.6rem;
    line-height: 1.6;
  }
  
  .font-17{
    font-size: 1.6rem;
  }

  .font-22{
    font-size: 1.6rem;
  }
  
  .font-26{
    font-size: 1.8rem;
  }

  .font-40{
    font-size: 3.0rem;
  }

  .pc-text-center{
    text-align: left;
  }

  .small{
    font-size: 1.3rem;
  }


  /** margin
  ---------------------------------------------**/
  /* top */
  .mt-05{ margin-bottom: 3px !important; }
  .mt-10{ margin-bottom: 5px !important; }
  .mt-15,
  .mt-20{ margin-top: 10px !important; }
  .mt-35{ margin-top: 15px !important; }
  .mt-40{ margin-top: 20px !important; }

  /* left */
  .ml-05{ margin-left: 3px !important; }
  .ml-10{ margin-left: 5px !important; }
  .ml-15,
  .ml-20{ margin-left: 10px !important; }
  .ml-35{ margin-left: 15px !important; }
  .ml-40{ margin-left: 20px !important; }

  /* right */
  .mr-05{ margin-right: 3px !important; }
  .mr-10{ margin-right: 5px !important; }
  .mr-15,
  .mr-20{ margin-right: 10px !important; }
  .mr-35{ margin-right: 15px !important; }
  .mr-40{ margin-right: 20px !important; }

  /* bottom */
  .mb-05{ margin-bottom: 3px !important; }
  .mb-10{ margin-bottom: 5px !important; }
  .mb-15,
  .mb-20{ margin-bottom: 10px !important; }
  .mb-30{ margin-bottom: 15px !important; }
  .mb-35{ margin-bottom: 15px !important; }
  .mb-40{ margin-bottom: 20px !important; }


  /** margin(sp)
  ---------------------------------------------**/
  .sp-mb-10{
    margin-bottom: 10px !important;
  }
  

  /** padding
  ---------------------------------------------**/
  /* top */
  .pt-5{ padding-top: 3px !important; }
  .pt-10{ padding-top: 5px !important; }
  .pt-20{ padding-top: 10px !important; }
  .pt-35{ padding-top: 15px !important; }
  .pt-40{ padding-top: 20px !important; }
  .pt-60{ padding-top: 30px !important; }

  /* left */
  .pl-5{ padding-left: 3px !important; }
  .pl-10{ padding-left: 5px !important; }
  .pl-20{ padding-left: 10px !important; }
  .pl-35{ padding-left: 15px !important; }
  .pl-40{ padding-left: 40px !important; }
  
  /* right */
  .pr-5{ padding-right: 3px !important; }
  .pr-10{ padding-right: 5px !important; }
  .pr-20{ padding-right: 10px !important; }
  .pr-35{ padding-right: 15px !important; }
  .pr-40{ padding-right: 20px !important; }

  /* bottom */
  .pb-5{ padding-bottom: 3px !important; }
  .pb-10{ padding-bottom: 5px !important; }
  .pb-20{ padding-bottom: 20px !important; }
  .pb-35{ padding-bottom: 15px !important; }
  .pb-40{ padding-bottom: 20px !important; }
  .pb-100{ padding-bottom: 45px !important; }

  /** float左右
  ---------------------------------------------**/
  .alignleft { 
    margin-right: 0
  }
  .alignright {
    margin-left: 0
  }
  
}