@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap');

.notosans {
  font-family: 'Noto Sans JP', sans-serif !important;
}

/* heroセクション */
#mv {
	height: 100vh;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.mv-bg {
	-webkit-transform: translateX(-50%);
	left: 50%;
	max-height: initial;
	max-width: initial;
	min-height: 100vh;
	min-width: 100%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	z-index: -1;
}

.slide {
  position: relative; /* 親要素にrelativeを指定 */
  background-color: #ffffff;
  width: 20vw;
  height: 100vh;
 }
  
 .slide img {
  position: absolute; /* absoluteで画像を重ねる */
  display: none; /* 画像を非表示に非表示 */
  left:16rem;
  top: 5rem;
 }

 .slide-sp {
  position: relative; /* 親要素にrelativeを指定 */
  background-color: #ffffff;
  width: 100vw;
  height: 66vh;
 }
  
 .slide-sp img {
  position: absolute; /* absoluteで画像を重ねる */
  display: none; /* 画像を非表示に非表示 */
  left: 4.5rem;
  top: 2rem;
 }

.underline-title {
  background: linear-gradient(transparent 75%, #FFEC00 75%);
  margin: 0 4rem;
}


.underline-title-sp {
  background: linear-gradient(transparent 70%, #FFEC00 75%);
  margin: 0 4.5rem;
}
  
 /* heroセクション終わり */

 .sns-bg {
  background-image: url(../img/sns_bg.jpg);
  background-size:cover;
  background-repeat:no-repeat;
}

.max-w-custom {
  max-width: 428px;
}

.fw-medium {
  font-weight: 500 !important;
}

.bg-howto {
  background-color: #E2F7FD;
}

.bg-water {
  background-color: #4ED1DB;
}

.bg-charge {
  background-color: #BBE2FF;
}

.underline-blue {
  text-decoration:underline;
  text-decoration-color:#33A9FF;
}

.underline-yellow {
  border-bottom: solid 4px #FFEC00;
  margin: 0rem 2rem;
  border-radius: 3px;
}

.gradation-v {
  background: -moz-linear-gradient(top, #2651E1, #02C5FF); 
  background: -webkit-linear-gradient(top, #2651E1, #02C5FF); 
  background: linear-gradient(to bottom, #2651E1, #02C5FF); 
}

.gradation-l {
  background: -moz-linear-gradient(left, #2651E1, #02C5FF); 
  background: -webkit-linear-gradient(left, #2651E1, #02C5FF); 
  background: linear-gradient(to right, #2651E1, #02C5FF); 
}

.fuchidori {
  color: #239AE4;
  -webkit-text-stroke: 1px #FFF;
  text-stroke: 1px #FFF;
}

.card-text {
  font-size: 13px;
}

.card-rounded {
  border-radius: 0.75rem !important;
}

.gradation-text{
  color: #02C5FF;
  background: -webkit-linear-gradient(top, #2651E1, #02C5FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-lightblue {
  color: #239AE4;
}

.text-3point {
  color: #182444;
}

.text-step {
  color: #FA6770;
}

.bg-howto {
  background-color: #84BDFF;
}

.bg-lightblue {
  background-color: #239AE4 !important;
}

.btn-lightblue {
  color: #fff !important;
  background-color: #239AE4 !important;
  border-color: #239AE4 !important;
}

.btn-outline-line {
  color: #239AE4 !important;
  border: 2px solid #239AE4 !important;
  background-color: #fff !important;
}

.btn-outline-line:hover {
  color: #fff !important;
  background-color: #239AE4 !important;
  border-color: #239AE4 !important;
}

.btn-outline-line-rev {
  color: #fff !important;
  border: 2px solid #fff !important;
  background-color: #239AE4 !important;
}

.btn-outline-line-rev:hover {
  color: #239AE4 !important;
  background-color: #fff !important;
  border-color: #fff !important;
}

.about-text {
  font-size: 1.4rem;
  line-height: 50px;
}

.upper-text {
  vertical-align: super;
  font-size: 0.5rem;  
}

.feature-text {
  font-size: 1.4rem;
  line-height: 45px;
}

.feature-text-sp {
  line-height: 28px;
}

.function-text-sp {
  line-height: 30px;
}


.monthly-bg {
  background-image: url(../img/monthly.png);
  background-size: cover;
}

.banner-bg {
  background-image: url(../img/banner.jpg);
  background-size: cover;
}

.feature1-bg {
  background-image: url(../img/feature1_bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.feature1-bg-sp {
  background-image: url(../img/feature1_bg_sp.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.feature2-bg {
  background-image: url(../img/feature2_bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.feature3-bg {
  background-image: url(../img/feature3_bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.feature3-bg-sp {
  background-image: url(../img/feature3_bg_sp.png);
  background-size: 100%;
  background-repeat: no-repeat;
}

.carousel-caption-howto {
  /* position: absolute; */
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 0rem;
  padding-bottom: 4rem;
  color: #000;
  text-align: center;
}

.container-nallow {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto; }

@media (min-width: 576px) {
  .container-nallow {
    max-width: 540px; } }

@media (min-width: 768px) {
  .container-nallow {
    max-width: 720px; } }

@media (min-width: 992px) {
  .container-nallow {
    max-width: 820px; } }

@media (min-width: 1200px) {
  .container-nallow {
    max-width: 1020px; } }