/* CSS Document */
body {
  background-color: #FFFFFF;
}

@media(max-width: 1025px){
  .pcLayout-br{
    display:none;
  }
}

@media(min-width: 700px) {
  .pcLayout__content-wrapper {
    max-width: 700px;
    margin: 0 auto;
  }
}
/*--- トップ部分 ---*/
.waterstation-logo {
  width: 100%;
  margin: 0 auto;
}
/* マイボトルで～貢献しよう */
.section-overview {
  background-color: #37BEF0;
  padding-top: 30px;
}
.section-overview__message {
  padding: 0 30px;
}
.section-overview__message h2 {
  font-size: 20px;
  line-height: 150%;
  margin-bottom: 30px;
  color: #ffffff;
}
.section-overview__message p {
  text-align: left;
  color: #ffffff;
}
.section-overview__link-button {
  display: inline-block;
  width: 300px;
  height: 35px;
  padding-top: 7px;
  margin-top: 25px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  background-color: white;
  color: #005BFF;
}
/* モーダル関連 */
/*infoエリアをはじめは非表示*/
#post-info {
  display: none;
}
/*モーダルの横幅を変更したい場合*/
.modaal-content-container {
  padding: 30px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(165, 253, 255, 1) 51%, rgba(158, 239, 255, 1) 100%);
}
.modaal-container {
  max-width: 600px;
}
/*モーダルのボタンの色を変更したい場合*/
.modaal-close:after, .modaal-close:before {
  background: #ccc;
}
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
  background: #666;
}
.section-overview__story-modal h2 {
  display: inline-block;
  color: #ffffff; /* 文字の色 */
  font-size: 18pt; /* 文字のサイズ */
  line-height: 150%;
  text-shadow:
    1px 1px 1px #005BFF, -1px 1px 1px #005BFF, 1px -1px 1px #005BFF, -1px -1px 1px #005BFF, 1px 0px 1px #005BFF, 0px 1px 1px #005BFF, -1px 0px 1px #005BFF, 0px -1px 1px #005BFF; /* 文字の影 */
}
.section-overview__story-modal h3 {
  color: #005BFF;
  margin-top: 30px;
  line-height: 180%;
  letter-spacing: -2px;
}
.section-overview__story-modal p {
  margin-top: 10px;
  text-align: left;
  font-size: 14px;
  line-height: 180%;
}
.section-overview__story-modal__image {
  width: 80%;
  margin-top: 30px;
}
.section-overview__line-wave {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 50px;
  transform: translateY(10px);
}
@media(min-width: 1025px) {
  .section-overview__message h2 {
    font-size: 30px;
    line-height: 130%;
  }
  .section-overview__message p {
    font-size: 22px;
    line-height: 130%;
  }
  .section-overview__link-button {
    width: 350px;
    height: 50px;
    font-size: 20px;
    padding-top: 13px;
  }
  .section-overview__story-modal {
    padding: 30px;
  }
  .section-overview__story-modal h2 {
    font-size: 30px;
  }
  .section-overview__story-modal h3 {
    font-size: 24px;
    margin-top: 30px;
  }
  .section-overview__story-modal p {
    font-size: 20px;
  }
}
/* 給水方法 */
.section-steps {
  padding-top: 30px;
}
.section-steps__content-wrapper {
  padding: 0 30px;
}
.section-steps h2 {
  font-size: 24px;
  color: #37BEF0;
  font-weight: bold;
}
.section-steps__step {
  margin: 20px 0 40px;
}
.section-steps__step h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  background-color: #37BEF0;
  color: #FFFFFF;
  padding: 5px;
}
.section-steps__step-description {
  padding: 0 15px;
  margin-bottom: 15px;
  text-align: left;
}
.section-steps__step p {
  text-align: left;
  margin-bottom: 5px;
}
.section-steps__step-attention {
  font-size: 12px;
}
.section-steps__image-spotlist {
  width: 80%;
}
.section-steps__image-supply {
  width: 80%;
}
.section-steps__image-qrread {
  width: 80%;
}
.section-steps__step-last {
  margin-bottom: 0;
}
.section-steps__line-wave {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 50px;
  transform: translateY(10px);
}
.section-steps__sticker{
  margin: 0 auto;
}
.section-steps__sticker p{
  font-weight: 600;
  width: 80%;
  border-radius: 15px;
  margin-bottom: 5px;
  background-color: #37BEF0;
  color: #FFFFFF;
  padding: 5px;
  margin: 0 auto;
}
.section-steps__image-sticker{
  width: 80%;
  margin: 15px auto 0;
  border: solid 1px;
}
@media(min-width: 1025px) {
  .section-steps {
    margin: 0 auto;
  }
  .section-steps h2 {
    font-size: 30px;
    padding: 20px 0;
  }
  .section-steps__step {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
  }
  .section-steps__step h3 {
    font-size: 24px;
    padding: 10px 5px;
  }
  .section-steps__step p {
    font-size: 20px;
    line-height: 150%;
  }
  .section-steps__step-attention {
    font-size: 14px;
  }
  .pcLayout__section-steps__step-left {
    width: 325px;
  }
  .section-steps__image-spotlist {
    width: 300px;
  }
  .section-steps__image-supply {
    width: 300px;
  }
  .section-steps__image-qrread {
    width: 300px;
  }
  .pcLayout__section-steps__step-line {
    border-bottom: 3px dotted #37BEF0;
    margin: 0 auto;
  }
  .section-steps__step-last {
    margin-bottom: 30px;
  }
  
  .section-steps__sticker p{
    font-size: 20px;
    line-height: 120%;
  }
}
/* ウォーターステーションを探す */
.section-waterspots {
  background-color: #37BEF0;
  padding: 30px;
}
.section-waterspots h2 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #ffffff;
}
/*==================================================
スライダーのためのcss
===================================*/
.slider img {
  width: 100%; /*スライダー内の画像を横幅100%に*/
  height: auto;
}
/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
  margin: 0 10px; /*スライド左右の余白調整*/
}
.section-waterspots p {
  margin-top: 20px;
  color: #ffffff;
}
.section-waterspots__link-button {
  display: block;
  margin: 15px auto 0;
  padding-top: 7px;
  width: 230px;
  height: 35px;
  background-color: #FFFFFF;
  border-radius: 10px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  color: #005BFF;
}
@media(min-width: 1025px) {
  .section-waterspots h2 {
    font-size: 30px;
    margin-bottom: 30px;
  }
  .section-waterspots p {
    font-size: 20px;
  }
  .section-waterspots__link-button {
    width: 300px;
    height: 50px;
    font-size: 20px;
    padding-top: 13px;
  }
}
.section-waterspots__attention {
  margin-top: 5px;
  color: white;
  font-weight: bold;
}

/*--- アプリリンク ---*/
.section-app-link{
  opacity: 0.8;
  padding: 40px 0;
}

.section-app-link__wrapper{
  width: 350px;
  margin: 0 auto;
}
.section-app-link h2{
  margin-bottom: 20px;
  font-size: 20px;
  color: #005BFF;
}
.section-app-link__dl-button{
  display: flex;
  align-items: center;
  justify-content:space-evenly;
}

/*--- ストアボタン用 ---*/
.appstore-button{
  width: 124px;
  height: 40px;
  position: relative;
  left: -9px;
}

.playstore-button{
  width: 132px;
  height: 51px;
}

@media(min-width:1025px){
  .section-app-link__wrapper{
    width: 560px;
  }
  
  .section-app-link h2{
    font-size: 24px;
  }
  
  .appstore-button{
    width: 155px;
    height: 50px;
    position: relative;
    left: -9px;
  }

  .playstore-button{
    width: 165px;
    height: 64px;
  }
}