@charset "utf-8";

#zone_middle_floor {
  max-width: 100%;
}

/* メインビジュアル */
.s_main_visual {
  content: url(../image/sitetop/img-mv.png);
  position: relative;
  top: 6rem;
  z-index: -1;
  width: 100%;
  height: calc(800 / 1920 * 100vw) !important;
  object-fit: cover;
  max-height: 1024px;
  min-height: 240px;
  -webkit-animation-name: slideinLeft;
  animation-name: slideinLeft;
  -webkit-animation-fill-mode: backwards;
  animation-fill-mode: backwards;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 0.25s;
  animation-delay: 0.25s;
  -webkit-animation-direction: normal;
  animation-direction: normal;
}
@-webkit-keyframes slideinLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideinLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@media screen and (max-width: 1024px) {
  .s_main_visual {
    content: url(../image/sitetop/img-mv-sp.png);
    height: auto!important;
  }
}
.s_main_visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 上部リンクボタン */
.s_top_btn_section {
  margin: 0 6rem;
}
@media screen and (max-width: 885px) {
  .s_top_btn_section {
    margin: 0 3rem;
    padding-top: 3rem;
  }
}
.s_top_btn_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1400px;
  width: 90%;
  margin: 6rem auto;
  /* padding: 0 1rem; */
  list-style: none;
  justify-items: center;
  align-items: center;
  justify-content: center;
  align-content: center;
}
@media screen and (max-width: 1309px) {
  .s_top_btn_list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-content: center;
    max-width: 864px;
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .s_top_btn_list {
    flex-direction: column;
  }
}
@media screen and (max-width: 690px) {
  .s_top_btn_list {
    gap: 24px;
    margin: 4rem 0;
  }
}
.s_top_btn_list > a {
  display: block;
  position: relative;
  width: 100%;
  max-width: 400px;
}
@media screen and (max-width: 1309px) {
  .s_top_btn_list > a {
    max-width: 320px;
  }
}
@media screen and (max-width: 767px) {
  .s_top_btn_list > a {
    max-width: 360px;
  }
}
.s_top_btn_list > a::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  width: 75%;
  height: 90%;
  border-radius: 50%;
  box-shadow: 0px 0px 64px 16px rgba(117,201,255,0.5);
  transition: 0.5s all;
}
@media screen and (max-width: 767px) {
  .s_top_btn_list > a::after {
    content: none;
  }
}
.s_top_btn_item {
  position: relative;
  background-color: #b4e0fa;
  width: 100%;
  max-width: 400px;
  height: 216px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
  border-radius: 16px;
  transition: 0.5s all;
  transform: translateY(0);
}
.s_top_btn_item:hover {
  transform: translateY(-10px);
}
@media screen and (max-width: 1309px) {
  .s_top_btn_item {
    width: 100%;
    max-width: 320px;
    height: 180px;
    padding: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .s_top_btn_item {
    max-width: 360px;
    height: 48px;
    border-radius: 24px;
    padding: 0;
  }
}
/* @media screen and (max-width: 690px) {
  .s_top_btn_item {
    height: 160px;
  }
} */
.s_top_btn_item > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  /* max-width: 360px; */
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .s_top_btn_item > div {
    position: relative;
    justify-content: center;
  }
}
/* .s_top_btn_list > a:hover .s_top_btn_item::after {
  box-shadow: initial;
} */
.s_top_btn_item p {
  width: 100%;
  height: auto;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  border-radius: 40px;
  font-size: clamp(0.875rem, 0.738rem + 0.59vw, 1.25rem);
  font-weight: 500;
  color: #57a7fa;
  padding: 0.2rem 0;
}
@media screen and (max-width: 767px) {
  .s_top_btn_item p {
    background: transparent;
    color: initial;
  }
}
.s_top_btn_item img {
  display: block;
  width: auto;
  /* object-fit: cover; */
  height: 66%;
  margin: 16px auto;
}
@media screen and (max-width: 885px) {
  .s_top_btn_item img {
    height: 60%;
  }
}
@media screen and (max-width: 767px) {
  .s_top_btn_item img {
    position: absolute;
    margin: 0;
    width: auto !important;
    height: 46px;
    bottom: 0;
    z-index: -1;
  }
  .s_top_btn_list > a:first-of-type .s_top_btn_item img {
    height: 28px;
    bottom: initial;
  }
  .s_top_btn_list > a:nth-child(odd) .s_top_btn_item img {
    right: 0;
  }
  .s_top_btn_list > a:nth-child(even) .s_top_btn_item img {
    left: 0;
  }
}

/* ページトップバナー */
.s_top_banner {
  max-width: 1400px;
  width: 90%;
  margin: 0 auto;
}
.s_top_banner a {
  display: block;
  width: clamp(320px, 100%, 640px);
  margin: 0 auto;
}
.s_top_banner a:hover {
  opacity: 0.5;
}

/* お知らせ */
.s_info_section {
  margin: 12rem 2rem;
}
@media screen and (max-width: 768px) {
  .s_info_section {
    margin: 4rem auto;
    padding: 5rem 1rem 0;
  }
}
.s_info_section_inner {
  max-width: 1500px;
  width: 90%;
  margin: 0 auto;
  /* padding: 0 2rem; */
}
@media screen and (max-width: 425px) {
  .s_info_section_inner {
    width: 100%;
  } 
}
.s_info_container {
  position: relative;
  margin: 4rem auto;
}
@media screen and (max-width: 768px) {
  .s_info_container {
    margin: 2rem auto 1rem;
  }
}
.s_info_container::after {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  content: '';
  width: 100%;
  height: 100%;
  /* width: 1500px;
  height: 240px; */
  filter: blur(80px);
  background-color: transparent;
  background-image:
    radial-gradient(circle at 92% 72%, rgba(133, 224, 154, 0.5) 0px, transparent 50%),
    radial-gradient(circle at 14% 90%, rgba(112, 199, 250, 0.5) 0px, transparent 50%),
    radial-gradient(circle at 30% 54%, rgba(205, 231, 249, 0.5) 0px, transparent 50%),
    radial-gradient(circle at 80% 13%, rgba(163, 222, 250, 0.5) 0px, transparent 50%),
    radial-gradient(circle at 9% 20%, rgba(189, 250, 212, 0.5) 0px, transparent 50%);
}
.s_info_inner iframe {
  /* height: 720px; */
  height: 290px;
}
@media screen and (max-width: 1042px) {
  .s_info_inner iframe {
    /* height: 393px; */
    height: 142px;
  }
}

/* 地域看護学とは */
.s_about_section {
  background-image: url('../image/common/img-bg1.png');
  background-repeat: no-repeat;
  background-size: cover;
  /* background-image: url('../image/common/noise.png');
  background-repeat: repeat;
  background-size: 200px;
  background-color:#ffffff; */
  margin: 12rem 0 6rem;
}
.s_about_section_inner {
  margin: 0 2rem;
  /* width: 90%; */
}
@media screen and (max-width: 768px) {
  .s_about_section_inner {
    margin: 0;
  }
}
.s_about_inner {
  position: relative;
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8rem 0;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .s_about_inner {
    padding: 6rem 1rem;
  }
}
@media screen and (max-width: 425px) {
  .s_about_inner {
    width: 100%;
  }
}
.s_about_inner::after {
  position: absolute;
  content: url("../image/common/img-kyoto.svg");
  max-width: 380px;
  width: 100%;
  height: auto;
  bottom: -7%;
  left: 50%;
  z-index: -1;
  transform: translateX(-50%);
}
@media screen and (max-width: 768px) {
  .s_about_inner::after {
    max-width: 220px;
    width: 50%;
    top: -7%;
    left: initial;
    right: 10% !important;
    transform: initial;
  }
}
.s_about_inner .unit_side_imgarea {
  flex-direction: row!important;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
.s_about_inner .unit_side_imgarea .img_wrap {
  position: relative;
  width: 40%;
  margin: 0 0 0 1rem;
}
@media screen and (max-width: 768px) {
  .s_about_inner .unit_side_imgarea .img_wrap {
    width: calc(100% - 32px);
    margin: 0 auto 40px;
    max-width: 440px;
  }
}
.s_about_inner .unit_side_imgarea .img_wrap::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%,-50%);
  background-color:hsla(0,0%,100%,0);
  background-image:
    radial-gradient(at 14% 63%, hsla(192,95%,56%,0.5) 0px, transparent 30%),
    radial-gradient(at 89% 12%, hsla(192,95%,56%,0.5) 0px, transparent 30%),
    radial-gradient(at 80% 100%, hsla(181,89%,81%,0.5) 0px, transparent 30%),
    radial-gradient(at 9% 10%, hsla(206,89%,80%,0.5) 0px, transparent 30%);
  filter: blur(75px);
}
.s_about_inner .text_wrap {
  max-width: 615px;
  min-width: 394px;
}
@media screen and (max-width: 768px) {
  .s_about_inner .text_wrap {
    margin: 0 auto;
    min-width: initial;
    width: 100%;
  }
}
.s_about_inner .text_wrap > p {
  font-size: clamp(1rem, 0.817rem + 0.78vw, 1.5rem);
  font-weight: 500;
  line-height: 2;
}
.s_about_inner .bpts_btn_fuwa {
  font-size: clamp(1rem, 0.817rem + 0.78vw, 1.5rem);
  margin: 0;
}
@media screen and (max-width: 768px) {
  .s_about_inner .bpts_btn_fuwa {
    margin: 0 auto;
  }
}

/* お問い合わせ */
.s_contact_section {
  position: relative;
  width: clamp(1300px, 100%, 1920px);
  max-height: 600px;
  height: 600px;
  /* margin: 0 auto; */
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 1024px) {
  .s_contact_section {
    max-height: 400px;
    min-width: 1300px;
  }
}
@media screen and (max-width: 768px) {
  .s_contact_section {
    max-height: 320px;
    min-width: 900px;
    width: 100%;
  }
}
.s_bubble {
  position: absolute;
  content: url("../image/common/img-contact-bubble-min.svg");
  z-index: -1;
  height: auto;
}
.bubble_1 {
  top: 0;
  left: -7%;
  width: 290px;
  animation: fuwafuwa01 5s ease-in-out infinite alternate;
}
@media screen and (max-width: 768px) {
  .bubble_1 {
    left: -3%;
    width: 210px;
  }
}
.bubble_2 {
  top: -24px;
  left: 22%;
  width: 36px;
  transform: rotate(-90deg);
  animation: fuwafuwa02 7s ease-in-out infinite alternate;
}
.bubble_3 {
  top: 25%;
  left: 20%;
  width: clamp(120px, 10vw, 170px);
  transform: rotate(90deg);
  animation: fuwafuwa03 9s ease-in-out infinite alternate;
}
.bubble_4 {
  top: 62%;
  left: 28%;
  width: 60px;
  animation: fuwafuwa01 5s ease-in-out infinite alternate;
}
@media screen and (max-width: 768px) {
  .bubble_3 {
    display: none;
  }
  .bubble_4 {
    display: none;
}
}
.bubble_5 {
  bottom: 5%;
  right: 30%;
  width: 36px;
  transform: rotate(-180deg);
  animation: fuwafuwa04 11s ease-in-out infinite alternate;
}
.bubble_6 {
  top: 15%;
  right: 15%;
  width: 50px;
  transform: rotate(-90deg);
  animation: fuwafuwa02 7s ease-in-out infinite alternate;
}
.bubble_7 {
  top: 42%;
  right: 5%;
  width: clamp(57px, 10vw, 107px);
  transform: rotate(90deg);
  animation: fuwafuwa03 9s ease-in-out infinite alternate;
}
@keyframes fuwafuwa01 {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -48px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}
@keyframes fuwafuwa02 {
  0% {
    transform:translate(0, 0) rotate(-82deg);
  }
  50% {
    transform:translate(0, 56px) rotate(-90deg);
  }
  100% {
    transform:translate(0, 0) rotate(-97deg);
  }
}
@keyframes fuwafuwa03 {
  0% {
    transform:translate(0, 0) rotate(82deg);
  }
  50% {
    transform:translate(0, -56px) rotate(90deg);
  }
  100% {
    transform:translate(0, 0) rotate(97deg);
  }
}
@keyframes fuwafuwa04 {
  0% {
    transform:translate(0, 0) rotate(172deg);
  }
  50% {
    transform:translate(0, 48px) rotate(180deg);
  }
  100% {
    transform:translate(0, 0) rotate(188deg);
  }
}
.s_contact_inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1500px;
  width: 100vw;
  height: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}
.s_contact_btn {
  position: absolute;
  /* max-width: 518px; */
  max-height: 540px;
  /* width: 100%; */
  width: clamp(307px, 38%, 518px);
  height: 100%;
  transition: 0.5s all;
}
.s_contact_btn > div {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(2.5rem, 0.22rem + 5.46vw, 5rem);
  font-weight: 500;
  text-align: center;
  line-height: 0.7;
}
.s_contact_btn > div > span {
  font-size: clamp(0.875rem, 0.463rem + 1.76vw, 2rem);
}
.s_contact_btn > img {
  position: absolute;
  max-width: 518px;
  width: 100%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: -1;
  transition: 0.5s all;
}
.s_contact_btn:hover img {
  width: 95%;
  height: auto;
}
@media screen and (max-width: 1024px) {
  .s_contact_btn > img {
    height: 100%;
  }
}

/* フッター前画像 */
.s_footer_before_section {
  margin-top: 6rem;
}
.s_footer_before_section > img {
  object-fit: cover;
  object-position: top;
  width: 100%;
  max-height: 660px;
}

/* フッター */
#zone_footer #f_imageArea {
  display: none;
}