@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%; /* 16px * 62.5% = 10px */
  width: 100%;
  box-sizing: border-box;
}

body {
  color: rgb(0, 0, 0); /* RGB */
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
  font-weight: 500;
  font-size: 2.0em;
  line-height: 2.4rem;
  text-align: left;
  background-color: #f6e1e1;
}

section h2 {
  font-size: 3.6rem;
}

.none {
  display: none;
}

a { text-decoration: none; }

ul {list-style: none;}

/* クリックしたときの青い枠線を消す */
*:focus {
  outline: none;
}

/* タップしたときの青い四角を消す */
a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}

.textalign-center {
  text-align: center;
}

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

/* Container */
.container {
  width: 84%;
  max-width: 1024px;
  margin: 0 auto;
}

.content__container {
  width: 300px;
  margin: 0 auto;
  padding-bottom: 60px;
}

@media (max-width:375px) {
  .white-container {
    width: 95%;
    margin: 0 auto;
    background-color: #FFF;
    border-radius: 10px;
  }
}

/* font-family */
.font-family_kan415typos {
  font-family: kan415typos-std, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-family__noto-sans-cjk-jp {
  font-family: noto-sans-cjk-jp,sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* Color */
.bc-white {
  background-color: #FFF;
}

.bc-pink {
  background-color: #e83859
}

.bc-red {
  background-color: #e3002c;
}

.color-red {
  color: #e3002c;
}

.color-white {
  color: #FFF;
}

.color-black {
  color: rgb(0, 0, 0)
}

/* fontsize */
.font-size10 {
  font-size: 1.0rem;
}

.font-size12 {
  font-size: 1.2rem;
}

.font-size14 {
  font-size: 1.4rem;
}

.font-size16 {
  font-size: 1.6rem;
}

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

.font-size20 {
  font-size: 2.0rem;
}

.font-size24 {
  font-size: 2.4rem;
}

.font-size25 {
  font-size: 2.5rem;
}

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

.font-size36 {
  font-size: 3.6rem;
}

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

.font-size50 {
  font-size: 5.0rem;
}

/* lineheight */
.lh-48px {
  line-height: 4.8rem;
}

.lh-30px {
  line-height: 3.0rem;
}

/* Padding, Margin */
.p-10px {
  padding: 10px;
}

.ptb10px-rl16px {
  padding: 10px 16px;
}

.ptb40px-rl30px {
  padding: 40px 30px;
}

.ptb-15px {
  padding: 15px 0;
}

.ptb-40px {
  padding: 40px 0;
}

.pt-20px {
  padding-top: 20px;
}

.pt-60px {
  padding-top: 60px;
}

.pl-10px {
  padding-left: 10px;
}

.pb-10px {
  padding-bottom: 10px;
}

.pb-15px {
  padding-bottom: 15px;
}

.pb-20px {
  padding-bottom: 20px;
}

.pb-30px {
  padding-bottom: 30px;
}

.pb-60px {
  padding-bottom: 60px;
}

.pb-80px {
  padding-bottom: 80px;
}

.pb-90px {
  padding-bottom: 90px;
}

.pb-100px {
  padding-bottom: 100px;
}

.pb-130px {
  padding-bottom: 130px;
}

.pb-150px {
  padding-bottom: 150px;
}

.pb-200px {
  padding-bottom: 200px;
}

.pt-5px {
  padding-top: 5px;
}

.pt-90px {
  padding-top: 90px;
}

.pt-100px {
  padding-top: 100px;
}

.mt-30px {
  margin-top: 30px;
}

.mt-50px {
  margin-top: 50px;
}

.mr-8px {
  margin-right: 8px;
}

.mb-15px {
  margin-bottom: 15px;
}

.mb-20px {
  margin-bottom: 20px;
}

.mb-60px {
  margin-bottom: 60px;
}

.mb-100px {
  margin-bottom: 100px;
}

/* border */
.bb-red {
  border-bottom: solid 2px #e3002c;
}

.br-10px {
  border-radius: 10px;
}

/* Modal */
/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
	background:#e3002c;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
	background:#e3002c;
}

.modaal-container {
  background: #f6e1e1;
}

@media (max-width:599px) {
  .modaal-inner-wrapper {
    padding: 25px 5px;
  }

}

/* other */
.alignitems-center {
  align-items: center;
}

.fw-bold {
  font-weight: bold;
}

.scale {
  transform:scale(1.1,1.1);
}

/* PACE */
.pace-running .scrollblock{
  opacity:0;
  }

.pace-done .scrollblock{
  opacity:1;
  
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s; 
  }

  /* Modaal */
body.fixed {
  position: fixed;
  left: 0;
}