@charset "UTF-8";


html {	
  /* height:100svh;	 */
  position:relative;	
  }

body {
  margin: 0;
  font-family: "ヒラギノ角ゴシック", -apple-system, BlinkMacSystemFont, Roboto,	
    "Segoe UI", "Helvetica Neue", HelveticaNeue, "游ゴシック体", YuGothic,	
    "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "メイリオ",	
    sans-serif;	
  /* height:100svh;	 */
  /* min-height: 100%;	 */
  position:relative;	
  /* height:100%;	 */
}

.container {
  min-height: 100svh;
  display:flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color:#2B2B2B;
}

.top {
  position: relative;
  background-color:#A0D7DD;
  /* background-image:url("../img/waves68.png"); */
  padding:0 60px;
}


.title {
  min-width: 345px;
  min-height: 150px;
  position:absolute;
  z-index: 1;
  top: 62px;
  left: 0;
  background: url(../img/shiori23935.png) no-repeat right center / cover;
}

.title h1 {	
  color:#FFFFFF;	
  font-size:23px;	
  line-height: 1.1;	
  margin:0;	
  margin:33px 77px 33px 52px;	
  font-family:Hiragino Maru Gothic Pro;	
  }

.title span{
  font-size: 52px;
}


@media (max-width: 768px) {
  .top {
    position: relative;
    /* background-image:url("../img/waves68.png"); */
    /* background-size: 225px; */
    padding: 0 20px;
    background-size:777px;
  }
  

  .title {
    max-width: 230px;
    min-width: auto;
    min-height: 138px;
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: url(../img/shiori_sp23951.png) no-repeat top center / contain;
  }

  .title h1 {
    color:#FFFFFF;	
    font-size: 19px;	
    float:left;	
    position:absolute;	
    top:25px;	
    left:0;	
    right:0;	
    margin:auto;	
    padding:0;	
    line-height:1.2;	
    width:fit-content;	
    text-align:center;	
    }

  .title span{
    font-size: 36px;
  }
}


.map {
  padding-bottom: 28px;
  display:flex;
  justify-content: center;
  align-items: center;
}

.map img {
  width: 100%;
  max-width: 987px;
  height: auto;
  /* margin-left:83px; */
  margin-top: 220px;
}



@media screen and (max-width: 768px) {
  .map {
    display:flex;
    justify-content: center;
    align-items: center;
  }

  .map img {
    width: 100%;
    max-width: 768px;
    height: auto;
    margin-left:0;
    margin-top:151px;
    margin-bottom:5px;
  }
}


.main {
  padding-bottom: 60px;
  padding-top: 49px;
  position:relative;
}

.main::before {
  content: "";
  display:inline-block;
  background: url(../img/svg.svg)repeat-x 100% 100%;
  width: 100%;
  height: 14px;
  position:absolute;
  top:-13px;
}

.sliders{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.slidertool {
  width: 100vw;
  margin:0 calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
  position: relative;
}


.slick-track {
  display: flex;
  justify-content: center;
  margin-left: calc(((100vw - 90px) / 6) / 2);  /* 左側を少し見せる */
  margin-right: calc(((100vw - 90px) / 6) / 2); /* 右側を少し見せる */
}

@media screen and (max-width: 768px) {
  .slick-track {
    display: flex;
    justify-content: center;
    margin-left: auto;  /* 左側を少し見せる */
    margin-right: auto; /* 右側を少し見せる */
  }
}

.slide-list {
  display: block;
  padding: 0 7.5px;
}

.slide-list img {
  width: 100%;
  height: 10.41666667vw;
  border-radius: 8px;
  object-fit: cover;
}
@media screen and (max-width: 767px) {

  .slide-list img {
    width: 100%;
    height: 38.66vw;
    border-radius: 8px;
    object-fit: cover;
  }
}

.slide-list p {
  font-size:15px;
  margin-top:11px;
  margin-bottom:12px;
  overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}



.slide-list span {
  background-color: #50B7C3;
  border-radius: 3px;
  background-color:#50B7C3;
  color:#FFFFFF;
  font-size:12px;
  padding: 5px 7px;
}

.arrow_box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.prev-arrow,
.next-arrow {
  position: absolute;
  top: 35%;
  margin: auto;
  width: clamp(40px, 3.90625vw ,50px);
  height: clamp(40px, 3.90625vw ,50px);
  z-index: 10;
}

.prev-arrow {
  left: 2.734375vw;
}

.next-arrow {
  right: 2.734375vw;
}

@media screen and (max-width: 900px) {
  .prev-arrow,
  .next-arrow {
    top: 25%;
  }
}

.slick-dots {
  display:flex;
  justify-content: center;
  gap: 5px;
  padding:0;
  position: absolute;
  bottom: 11px;
  right: 0;
  left: 0;
  margin: auto;
}

.slick-dots button {
  display:none;
}

.slick-dots li {
  width: 10px;
  height: 10px;
  background-color: #BEE8ED;
  border-color:#BEE8ED;
  border-radius: 50%;
  list-style-type: none;
  opacity: 0.3s;
}

.slick-dots li:hover,
.slick-dots li.slick-active {
  background-color: #50B7C3;
  border-color: #50B7C3;
}

/* .slick-dots li button {
  font-size: 0;
  width: 100%;
  height: 100%;
  background-color: #50B7C3;
  border-color:#50B7C3;
  border-radius: 50%;
  margin-right:5px;
} */



.slide {
  margin-top:36px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

footer {
  height: 41px;
  background-color:#50B7C3;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom:0;
  margin-top: auto;
}

footer p {
  color:#FFFFFF;
  margin:0;
}

@media screen and (max-width: 768px) {
  .main {
    padding-top: 49px;
  }

footer {
  height: 41px;
  background-color:#50B7C3;
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
}

footer p {
  color:#FFFFFF;
  margin:0;
  font-size: 10px;
}

.slide-list p {
  font-size: 15px;
  margin-top: 8px;
  margin-bottom: 12px;
  margin-left: 4px;
}

.slick-track {
  margin-bottom: 11px;
}

}

header {
  height:94px;
  background-image: url("../img/img_header.footer.png");
  position:relative;
}

header::after {
  content: "";
  display:inline-block;
  background: url(../img/svg.svg)repeat-x 100% 100%;
  width: 100%;
  height: 16px;
  position:absolute;
  top:78px;
}


.title_ {
  min-width: 345px;
  min-height: 150px;
  position:absolute;
  top: 60px;
  left: 0;
  background: url(../img/shiori23935.png) no-repeat right center / contain;
  z-index:1;
  font-family:Hiragino Maru Gothic Pro;
  color:#FFFFFF
}	

.title_ h1 {	
color:#FFFFFF;	
font-size: 23px;	
float:left;	
position:absolute;	
top:33px;	
left:60px;	
margin:0;	
padding:0;	
line-height:1.1;	
}

.title_ span{
  font-size: 52px;
}

.secound_top {
  display: flex;
  justify-content: center;
  align-items: center;
  padding:0 60px;
}



.top-img {
  margin-top:78px;
  border-radius: 8px;
  overflow: hidden;
  max-width: 760px;
  max-height: 500px;
  width: 100%;
  height: auto;
}

.top-img img {
  width:100%;
  height: auto;
  object-fit: contain;
  /* max-width:760px; */
  /* margin-top:78px; */
  border-radius: 8px;
}


@media (max-width: 768px) {
  header {
    height:64px;
    position: relative;
  }

  header::after {
    content: "";
    display:inline-block;
    background: url(../img/svg.svg)repeat-x 100% 100%;
    width: 100%;
    height: 14px;
    position:absolute;
    top:52px;
  }

  .title_ {
    max-width: 230px;
    min-width: auto;
    min-height: 138px;
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: url(../img/shiori_sp23951.png) no-repeat top center / contain;
  }

  .title_ h1 {
    color:#FFFFFF;	
    font-size: 19px;	
    float:left;	
    position:absolute;	
    top:25px;	
    left:0;	
    right:0;	
    margin:auto;	
    padding:0;	
    line-height:1.25;	
    width:fit-content;	
    text-align:center;	
    }

  .title_ span{
    font-size: 43px;
  }

  .secound_top {
    padding:0 40px;
    display:flex;
    justify-content: center;
    align-items: center;
  }

  .top-img {
    margin-top:104px;
  }

  .top-img img {
    width: 100%;
    /* max-width: 295px; */
    height: auto;
  }

}


.t-section {
  padding: 0 60px;
}

.text {
  max-width: 1040px;
  margin: 0 auto;
}

.top-text {
  text-align: left;
  margin-top:62px;
  margin-bottom: 62px;
}

.top-text h1{
  font-size:34px;
  margin-top:18px;
  margin-bottom:41px;
  font-weight:500;
}

.top-text p {
  margin-top:54px;
}

.text-list {
  text-align: left;
  max-width: 1040px;
}

.top-text span {
  display:inline-block;
  border-radius: 3px;
  background-color: #50B7C3;
  color:#FFFFFF;
  font-size:16px;
  padding: 5px 15px 4px 15px;
}

h2 {
  border:solid 2px #50B7C3;
  border-radius: 3px;
  border-left:solid 10px #50B7C3;
  color:#50B7C3;
  font-size:23px;
  padding:6px 0 6px 16px;
  margin-bottom:41px;
}

h3 {
  font-size: 18px;
  color: #50B7C3;
  border-bottom:solid 2px #50B7C3;
  display: inline-block;
  margin:0;
  margin-bottom:13.5px;
}

.text p {
  font-size:15px;
  margin:0;
  margin-bottom: 15px;
  line-height:1.6;
}

.text p:first-child {
  margin-bottom: 0;
}

.list p{
  margin-bottom: 32px;
}

.list:last-child p{
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .t-section {
    padding: 0 20px;
  }

  .text {
    /* max-width: 335px; */
    margin:0 auto;
  }

  .top-text h1 {
    font-size: 22px;
    margin-bottom: 32px;
    margin-top:14px;
  }

  .top-text span {
    font-size:14px;
    padding:4px 15px 4px 15px;
  }

  .top-text {
    margin-top:54px;
    margin-bottom:48px
  }
 
  .text p{
    line-height:25px;
  }

  h2 {
    font-size: 20px;
    padding:9px 0 8px 16px;
    margin-bottom:35px;
  }

  h3{
    margin-bottom: 10.5px;
  }

  .list p {
    margin-bottom:24px;
  }
}


.introduction {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width:396px;
  width: 100%;
  margin:0 auto;
  box-sizing: border-box;
}

.intro_card{
  background-color:#EBEBEB;
  border-radius: 12px;
  display: flex;
  /* align-items: center; */
  /* max-width:396px; */
  width:396px;
  margin-bottom:64px;
  margin-top:26px;
  padding:30px;
  gap:20px;
  position:relative;
  height:96px;
}


.intro_img {
  object-fit: cover;
  margin-top:7px;
}

.intro_text{
  display:block;
}


.intro_text_item {
  font-size:12px;
  margin:0;
  padding:0;
  color:#50B7C3;
  position:relative;
  margin-left:14px;
  margin-bottom:16px;
  height:12px;
}


.intro_text_item::before {
  content: "";
  display:block;
  background:url(../img/img_penicon_new.png)no-repeat center /contain;
  width:13px;
  height:18px;
  position: absolute;
  top:6px;
  bottom:0;
  left:-14px;
  margin:auto;
}

.intro_text_school {
  font-size:13px;
  margin:0;
  padding:0;
  height:13px;
  margin-bottom:8px;
}

.intro_text_name{
  font-size:22px;
  margin:0;
  padding:0;
  height:22px;
}

@media (max-width: 768px) {
  .introduction {
    padding:0 40px;
    margin-bottom:65px;
  }

  .intro_card {
    width: 100%;
    width:295px;
    margin:0 auto;
    margin-top:56px;
    padding:19px;
  }

  .intro_img {
    max-width:93px;
    max-height:95px;
    flex: 1;
  }

  .intro_img img{
    width:100%;
    height: 93px;
    object-fit: cover;
  }

}

.return{
 margin:0 auto;
 display: flex;
 align-items:center;
 justify-content: center;
 margin-bottom:80px;
 color:#FFFFFF;
 font-size:18px;
 border: solid 3px #50B7C3;
 border-color: #50B7C3;
 background-color:#50B7C3;
 width:274px;
 padding:10px 0;
 position: relative;
 border-radius: 7px;
 transition:0.5s all;
}

.return::before {
  transition:0.5s all;
  content: "";
  display: block;
  mask-image: url(../img/img_arrow_white.svg);
  background-color: #FFFFFF;
  width: 12px;
  height: 12px;
  position:absolute;
  top:0;
  bottom:0;
  left:20px;
  margin:auto;
  color:#FFFFFF
}

.return:hover::before {	
  background-color: #50B7C3;	
  }	

  .return:hover {	
  transition:0.5s all;	
  background-color:#FFFFFF;	
  border-color: #FFFFFF;	
  color:#50B7C3;	
  border-color:#50B7C3;	
  }

.footer-img {
  background-image: url("../img/img_header.footer.png");
  height: 112px;
  position:relative;
}

.footer-img::before {
  content: "";
  display:inline-block;
  background: url(../img/img_wave_footer.svg)repeat-x 100% 100%;
  width: 100%;
  height: 14px;
  position:absolute;
  top:-1px;
}