.container{
  max-width:unset;
  width:80vw;
}

/* トップ */
.top-section{
  position:relative;
  height:400px;
  width:100vw;
  background-image: url("../img/mizu_main.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  display: none;
}

.top-mark{
  position:absolute;
  top:40%;
  left:50%;
  transform:translateX(-50%);
  width:120px;
  display: none;
}

.top-message{
  width:100%;
  padding:50px 0;
  font-size:30px;
  text-align:center;
  line-height: 60px;
  font-weight: bold;
  border-bottom: 10px solid #3C9FE5;
  display: none;
}

/* ビオトープ */

.biotope-section,.roten-section{
  width:100%;
  border-bottom: 2px solid #3C9FE5;
}
.section-about,.biotope-section-contents{
  padding:50px 0;
  display:flex;
  align-items: center;
  justify-content: space-between;
}
.water-section-contents{
  align-items: flex-start;
}
.section-left{
  width:45%;
}
.section-left img{
  width:100%;
}
.section-right{
  width:45%;
}
.section-title{
  font-size:40px;
  font-weight: 900;
  color:#3C9FE5;
}
.section-subtitle{
  line-height: 40px;
  font-size:24px;
  color:#3C9FE5;
  padding:10px 0;
}
.section-message{
  line-height: 36px;
  font-size:20px;
}
.biotope-about{
  border-bottom: 2px solid #3C9FE5;
}

.hotaru,.medaka{
  width:45%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-title{
  font-size:40px;
  font-weight: 900;
  color:#3C9FE5;
}
.content-image{
  padding:20px 0;
  width:90%;
  display: flex;
  justify-content: center;
}
.hotaru .content-image img{
  margin-right:-90px;
}
.content-message{
  line-height: 36px;
  font-size:20px;
}

/* 露天風呂セクション */
.roten-section-about{
  flex-direction: row-reverse;
}

/* 壁泉セクション */
.hekisen-section{
  width:100%;
}

/* フォントをまず決める */



/* タブレット対応 */
@media(max-width:1100px){
  .section-about{
    flex-direction: column;
  }
  .section-left,.section-right{
    width:90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .section-title{
    padding-top:20px;
    text-align: center;
  }
  .section-subtitle{
    text-align: center;
  }
  .section-message{
    width:90%;
  }

  .biotope-about{
    padding-bottom: 50px;
    border-bottom: 2px solid #3C9FE5;
  }

  .biotope-section-contents{
    flex-direction: column;
    align-items:center;
  }
  .hotaru{
    padding-bottom: 50px;
  }
  .hotaru,.medaka{
    width:90%;
  }
}
/* スマホ対応 */
@media(max-width:650px){
  .container{
    width:90vw;
  }
  .top-section{
    background-image: url("../img/mizu_main_mobile.jpg");
    height:300px;
    background-position-y: top;
  }
  .top-mark{
    top:40%;
    left:50%;
    transform:translateX(-50%);
    width:70px;
  }
  .top-message{
    padding:40px 0;
    font-size:16px;
    line-height: 30px;
    border-bottom: 6px solid #3C9FE5;
  }
  .section-about,.biotope-section-contents{
    padding:40px 0;
  }
  .section-title{
    font-size:26px;
  }
  .section-subtitle{
    width:120%;
    line-height: 20px;
    font-size:15px;
  }
  .section-subtitle span{
    margin-left:-6px;
  }
  .section-message{
    line-height: 20px;
    font-size:14px;
  }

  .content-title{
    font-size:26px;
  }
  .content-image{
    width:70%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  .content-image img{
    display: block;
    height:auto;
    width:100%;
  }
  .hotaru .content-image img{
    display: block;
    width:125%;
    height:auto;
    margin-right:-50px;
  }
  .content-message{
    width: 90%;
    line-height: 20px;
    font-size:14px;
  }
}