@charset "UTF-8";

/*****************************
  top
*****************************/
.topsec{
  padding: 10rem 0;
}
.bginner{
  background: rgba(216, 138, 146,.8);
  color: #fff;
  min-height: 50vh;
  padding: 5rem 2rem ;
}
.bginner .content{
  overflow: hidden;
}
.bginner .ttlbox{
  margin-bottom: 1rem;
}
.bginner .ttlbox .ttl{
  font-size: 2vw;
}
.bginner .txtbox p {
  font-size: 1.2vw;
}
.bginner .morebtn1 a{
  color: #fff;
  font-size: 1vw;
}
.bginner .morebtn1 i::after{
  border-color: #fff;
}
@media only screen and (max-width: 1440px) {
  .bginner .ttlbox .ttl{
    font-size: 2.8rem;
  }
  .bginner .txtbox p {
    font-size: 1.6rem;
  }
  .bginner .morebtn1 a{
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 1280px) {
  .bginner {
    padding: 3rem 2rem 7rem;
  }
}
@media only screen and (max-width: 1180px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec {
    padding: 8rem 0;
  }
}

/*****************************
topsec-fv 
*****************************/
.topsec-fv {
  padding: 4rem 0 6rem;
}
.topsec-fv .splide{
  margin: 0 auto;
  width: 95%;
}
.topsec-fv .splide__slide{
  border-radius: 50px;
  height: calc(100vh - 10rem);
  overflow: hidden;
}
.topsec-fv .splide__slide img{
  object-fit: cover;
  height: 100%;
  width: 100%;
  transition: 5s linear;
}
.topsec-fv .splide__slide.is-active img {
  transform: scale(1.1);
}
.topsec-fv .catch{
  position: absolute;
  top: 60%;
  left: 5%;
  transform: translateY(-50%);
  top: 40%;
  left: 6%;
}
.topsec-fv .catch::before{
  content: "";
  aspect-ratio: 89/75;
  background: url(../images/common/logo_pass.svg) no-repeat center / cover;
  opacity: .4;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(-50%, -50%);
  width: 120%;
}
.topsec-fv .catch .main{
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  /* gap: 1rem; */
  position: relative;
}
.topsec-fv .catch .main > span{
  /* background: #fff; */
  display: inline-block;
  font-size: 4vw;
  font-weight: bold;
  line-height: 1.5;
  /* padding: 1rem 3rem 1rem 5rem; */
  text-shadow: 1px 1px 0px #fff, -2px 1px 0px #fff, 1px -2px 0px #fff, -2px -2px 0px #fff, 1px -1px 0px #fff, -1px 1px 0px #fff, -2px -1px 0px #fff, -1px -2px 0px #fff, 2px 2px 1px #fff, -2px 2px 1px #fff, 2px -2px 1px #fff, -2px -2px 1px #fff, 2px 0px 1px #fff, -1px 2px 1px #fff, -2px -1px 1px #fff, -1px -2px 1px #fff;
}
.topsec-fv .catch .main > span span{
  color: #d88a92;
  font-weight: bold;
}
@media only screen and (max-width: 1180px) {
  .topsec-fv .catch .main > span {
    font-size: 4.8rem;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 820px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-fv .catch .main > span{
    font-size: 9vw;
  }
}

/*****************************
topsec-about
*****************************/
.topsec-about .manatee{
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.topsec-about .manatee{
  top: -30%;
}
.topsec-about .manatee::before{
  content: "";
  aspect-ratio: 742 / 785;
  background: url(../images/ob/manatee1.svg) no-repeat center / contain;
  position: absolute;
  top: 0;
  right: -7%;
  width: 28%;
}
.topsec-about .flexbox1{
  gap: 3%;
}
.topsec-about .fbg{
  aspect-ratio: 3/2;
  background: url(../images/top/about.webp) no-repeat center / cover;
  border-radius: 0 50px 50px 0;
  box-shadow: 0 10px #9f656b,10px 10px #9f656b;
  overflow: hidden;
  margin-top: -10rem;
  margin-left: -2rem;
  width: 55%;
}
.topsec-about .ftxtbox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5rem;
  width: 38%;
}
.topsec-about .morebtn1{
  position: relative;
  text-align: right;
  z-index: 1;
}
@media only screen and (max-width: 1280px) {

}
@media only screen and (max-width: 1180px) {
  .topsec-about .fbg{
    aspect-ratio: 4/3;
    width: 55%;
  }
  .topsec-about .ftxtbox{
    width: 40%;
  }
}
@media only screen and (max-width: 1024px) {
  .topsec-about .fbg {
    aspect-ratio: 1/1;
  }
}
@media only screen and (max-width: 1023px) {
  .topsec-about .manatee {
    top: -20%;
  }
  .topsec-about .manatee::before {
    width: 38%;
  }
  .topsec-about .fbg {
    aspect-ratio: 2 / 1;
    width: 60%;
  }
  .topsec-about .ftxtbox{
    margin: 3rem auto 0;
    width: 80%;
  }
}
@media only screen and (max-width: 820px) {
  .topsec-about .fbg {
    aspect-ratio: 3/ 2;
    width: 80%;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-about .manatee {
    top: -15%;
  }
  .topsec-about .manatee::before {
    width: 55%;
  }
  .topsec-about .fbg {
    aspect-ratio: 3 / 2;
    width: 100%;
  }
  .topsec-about .ftxtbox{
    width: 95%;
  }
}

/*****************************
topsec-facility
*****************************/
.topsec-facility {
  padding: 15rem 0 10rem;
}
.topsec-facility .manatee{
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.topsec-facility .manatee{
  top: -22%;
}
.topsec-facility .manatee::before{
  content: "";
  aspect-ratio: 153/101;
  background: url(../images/ob/manatee2.svg) no-repeat center / contain;
  position: absolute;
  top: 0;
  left: -15%;
  width: 50%;
}

.topsec-facility .flexbox1{
  gap: 3%;
}
.topsec-facility .fbg{
  aspect-ratio: 3/2;
  background: url(../images/top/facility.webp) no-repeat center / cover;
  border-radius: 50px 0 0 50px ;
  box-shadow: 0 10px #9f656b,-10px 10px #9f656b;
  overflow: hidden;
  margin-top: -10rem;
  margin-right: -2rem;
  width: 55%;
}
.topsec-facility .ftxtbox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5rem;
  width: 38%;
}
.topsec-facility .morebtn1{
  position: relative;
  margin-right: 5rem;
  z-index: 1;
}
@media only screen and (max-width: 1280px) {

}
@media only screen and (max-width: 1180px) {
  .topsec-facility .fbg{
    aspect-ratio: 4/3;
    width: 55%;
  }
  .topsec-facility .ftxtbox{
    width: 40%;
  }
}
@media only screen and (max-width: 1024px) {
  .topsec-facility .fbg {
    aspect-ratio: 1/1;
  }
}
@media only screen and (max-width: 1023px) {
  .topsec-facility .manatee {
    top: -19%;
  }
  .topsec-facility .manatee::before {
    left: -22%;
    width: 65%;
  }
  .topsec-facility .fbg {
    aspect-ratio: 2 / 1;
    width: 60%;
  }
  .topsec-facility .ftxtbox{
    margin: 3rem auto 0;
    width: 80%;
  }
}
@media only screen and (max-width: 820px) {
  .topsec-facility .fbg {
    aspect-ratio: 3/ 2;
    width: 80%;
  }
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-facility {
    padding: 10rem 0 0;
  }
  .topsec-facility .manatee {
    top: -16%;
  }
  .topsec-facility .manatee::before {
    left: -36%;
    width: 95%;
  }
  .topsec-facility .fbg {
    aspect-ratio: 3 / 2;
    width: 100%;
  }
  .topsec-facility .ftxtbox{
    width: 95%;
  }
  .topsec-facility .morebtn1{
    margin-right: 0;
  }
}

/*****************************
topsec-news 
*****************************/
.topsec-news{
  padding-bottom: 5rem;
}
.topsec-news .manatee{
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
.topsec-news .manatee{
  top: -10%;
}
.topsec-news .manatee::before{
  content: "";
  aspect-ratio: 745/647;
  background: url(../images/ob/manatee3.svg) no-repeat center / contain;
  position: absolute;
  top: 0;
  right: -7%;
  width: 30%;
}


.topsec-news .morebtn1{
  margin-top: 8rem;
}

.topsec-news input[type="radio"] {
  display: none;
}
.topsec-news .panel{
  display: none;
}
.topsec-news .tabarea .tab:hover,
.topsec-news #newsbtn1:checked ~ .tabarea .newstab1,
.topsec-news #newsbtn2:checked ~ .tabarea .newstab2,
.topsec-news #newsbtn3:checked ~ .tabarea .newstab3,
.topsec-news #newsbtn4:checked ~ .tabarea .newstab4,
.topsec-news #newsbtn5:checked ~ .tabarea .newstab5,
.topsec-news #newsbtn6:checked ~ .tabarea .newstab6{
  background: #E08A18;
  color: #fff;
}

.topsec-news #newsbtn1:checked ~ .panelarea #newspanel1,
.topsec-news #newsbtn2:checked ~ .panelarea #newspanel2,
.topsec-news #newsbtn3:checked ~ .panelarea #newspanel3,
.topsec-news #newsbtn4:checked ~ .panelarea #newspanel4,
.topsec-news #newsbtn5:checked ~ .panelarea #newspanel5,
.topsec-news #newsbtn6:checked ~ .panelarea #newspanel6{
  display:block;
}

@media only screen and (max-width: 1180px) {
  .topsec-news .morebtn1{
    margin-right: 5rem;
  }
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 1023px) {
  .topsec-news .manatee {
    top: -5%;
  }
  .topsec-news .manatee::before {
    width: 36%;
  }
}
@media only screen and (max-width: 820px) {

}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 767px) {
  .topsec-news .manatee{
    top: -2%;
  }
  .topsec-news .manatee::before {
    right: -15%;
    width: 69%;
  }
}