@charset "utf-8";


.section-wrap-wide{max-width: 1100px;}
/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
サービス案内
.top-service-info
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.top-service-info-bg{background-color: #DFFFF7;}
.top-service-info{padding: 4rem 0 10rem;}
.top-service-info-text{text-align: center;}

.top-service-info-list{}
.top-service-info-list li{display: flex; justify-content: space-between;align-items: center;margin-top: 3rem;}

.top-service-info-image{width: 49%; height: 21rem; overflow: hidden;}
.top-service-info-image img{width: 100%;}

.top-service-info-list dl{width: 49%;}
.top-service-info-list dt{text-align: center;font-size: 1.9rem; font-weight: 600;}
.top-service-info-list dd{}
.top-service-info-list p{line-height: 1.75; margin: 1.5rem 0;}

.top-service-info-link{text-align: center;}
.top-service-info-link a{
   background-color: #12A581; margin: 0 auto;
  padding: 0.5rem 2.5rem; border-radius: 50px;
  color: #FFF; display:inline-block; font-weight: 500;
  transition: .3s;  -webkit-transform: scale(1);
  transform: scale(1);}
.top-service-info-link a:hover{
   background-color: #1497BC;border-radius: 0;
  -webkit-transform: scale(1.1); transform: scale(1.1);}

@media screen and (max-width: 768px) {
.top-service-info{padding: 4rem 0 5rem;}

.top-service-info-list li{flex-direction: column;margin-top: 3.5rem;}
.top-service-info-image{width: 100%; height: 13rem;}
.top-service-info-list dl{width: 100%;}

.top-service-info-list dt{font-size: 1.5rem;margin-top: 1.5rem}
.top-service-info-list p{line-height: 1.75; margin: 1.2rem 0 1.3rem;}
}



/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
banner領域
.top-banner
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.top-banner-bg{background-color: #f7f9f9;}
.top-banner-wrap{display: flex;justify-content: space-around;}
.top-banner{padding: 5rem 0 7rem;}
.top-banner-wrap li{width: 48%;}
.top-banner-wrap img{width: 100%;}

@media screen and (max-width: 768px) {
.top-banner-wrap{flex-direction: column;}
.top-banner-wrap li{width: 100%;margin-bottom:1rem ;}
.top-banner{padding: 5rem 0 4rem;margin-bottom: 0;}
}

@charset "utf-8";

/*------------------------------------
「安心」して「楽しく暮らせる」
.sakoju
 ------------------------------------*/
.ttl-bg{background-image: url(/sendai-aoba/common/img/sakoju-bg.jpg);}

/*------------------------------------
「安心」して「楽しく暮らせる」
.message
 ------------------------------------*/
.message-bk{background-repeat: no-repeat;background-size: cover;
   background-image: url(../img/kaigotsuki_img01.jpg);}
.message-wrap{padding: 8rem 0 10rem;}

@media screen and (max-width: 768px) {
.message-wrap{padding: 2rem 0 5rem;}
}

/*------------------------------------
施設の3つの特徴
.feature
 ------------------------------------*/

.feature-bg{background-color: #DFFFF7;}
.feature-wrap{padding: 5rem 0 8rem;}
.feature-wrap p{margin-bottom: 2rem;}

.feature-list{display: flex;justify-content: space-between;}
.feature-list li{width: 30%;}

.feature-img{
   width: 100%;height: 18rem;border-radius: 0.5rem;background-repeat: no-repeat;
   position: relative;margin-bottom: 2rem;background-size:cover; background-position: center;}
.feature-img span{
   font-size: 1.8rem; background-color: #12A581;padding: 0.2rem 1rem;border-radius: 0.3rem;
   color: #FFF;display: inline-block;position: absolute;bottom: -1.5rem;left: 50%;transform: translateX(-50%);}

.feature-list dt{font-size: 1.4em;font-weight: 600;margin-bottom: 0.8rem;text-align: center;font-feature-settings: "palt";}
.feature-list dd{line-height: 1.75;}

.feature-list-link{width: 100%;text-align: center;}

.__f-img01{background-image: url(../img/sakoju_img01.jpg);}
.__f-img02{background-image: url(../img/sakoju_img02.jpg);}
.__f-img03{background-image: url(../img/sakoju_img03.jpg);}

@media screen and (max-width: 768px) {
.feature-wrap{padding: 3rem 0 0;}
.feature-list{flex-direction: column;}
.feature-list li{width: 100%;margin-bottom: 4rem;}
}

/*------------------------------------
安心・安全のサポート体制
.support
 ------------------------------------*/

.support-link-wrap{text-align: right;}
@media screen and (max-width: 768px) {
.support-link-wrap{margin-bottom: 3vw;}
}
/*------------------------------------
住まいについて
.eligible-residents
 ------------------------------------*/

.eligible-residents{
}

.eligible-residents ul {
    display: flex;
    flex-wrap: wrap;
    margin: 2rem 0 0;
}

.eligible-residents li {
    width: 23%;
    margin: 0.4rem 0;
    position: relative;
    padding-left: 20px;
}

.eligible-residents li:before {
    content: "";
    position: absolute;
    top: 0.4em;
    left: 0;
    width: 10px;
    height: 10px;
    background-color: #d8edee;
    border-radius: 50%;
}

.eligible-residents .w100{ width: 100%;}

@media screen and (max-width: 768px) {
.eligible-residents ul {margin: 5vw 0;justify-content: space-between;}
.eligible-residents li { width: 44%; font-size: 80%; padding-left: 4vw;}
}

.eligible-residents-list ul{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
   row-gap: 1em;
   column-gap: 1em;
   margin: 2rem 0;
}

.eligible-residents-list li{ position: relative; padding-left: 20px;}

.eligible-residents-list li:before {
   content: "";
   position: absolute;
   top: 0.4em;
   left: 0;
   width: 10px;
   height: 10px;
   background-color: #d8edee;
   border-radius: 50%;
}

@media screen and (max-width: 768px) {
   .eligible-residents-list ul{ grid-template-columns: 1fr 1fr; row-gap: 0.8em;column-gap: 0.8em;}
   .eligible-residents-list li{font-size: 80%;}
}


/*------------------------------------
住まいについて
.residence
 ------------------------------------*/

.residence-wrap{margin: 8rem 0 10rem;}
.residence-text{margin:-0.5rem 0 3rem 0;text-align: center;}

@media screen and (max-width: 768px) {.residence-wrap{margin: 4rem 0 5rem;}}


.residence-img{width: 100%; margin: 2rem 0;margin: 2rem 0;position: relative;overflow: hidden;}
.residence-img img{width: 100%;margin: 1.2rem 0;}


.residence-list-clm{width: 70vw;margin: 0 auto;}
.residence-list >li{margin-bottom: 8rem;}
.residence-ttl{
      display: flex; justify-content: space-between;align-items: flex-end;
      border-bottom: 3px solid #12A581;padding: 0 0 0.5rem 0;margin-bottom: 2rem;}
.residence-ttl h3{font-weight: 500;font-size: 1.8rem;}
.residence-list-wrap{display: flex; justify-content: space-between;}

.residence-list-img{height: 18rem; width: 100%;margin-bottom: 1rem;
overflow: hidden; border-radius: 0.3rem; display: flex; align-items: center;}
.residence-list-img img{width: 100%;}

@media screen and (max-width: 1280px) {
.residence-img {height: 33rem;}
.residence-list-clm{width: 80vw;margin: 0 auto;}
}

@media screen and (max-width: 768px) {
   .residence-list-clm{width: 100%;}
   .residence-list-wrap{flex-direction: column;}
   .residence-ttl{flex-direction: column;align-items: center;}
   .residence-ttl h3{font-size: 1.6rem;}
   .residence-list >li{margin-bottom: 4rem;}
   .residence-img {height: 50vw;}
   .residence-list-img{margin-bottom: 3vw;}
}




/*--第一段リリース用--------------------------*/
.residence-list-sam{display: flex;flex-wrap: wrap;justify-content: space-between;}
.residence-list-sam >li{width: 48%;display: flex;flex-wrap: wrap;margin-bottom: 1.8rem;}
.residence-facility-sam{display: flex;flex-wrap: wrap;}
.residence-facility-sam li{
   color: #707070;padding: 0.2rem 0.5rem; border: 1px #707070 solid;
   margin: 0 0.5rem 0.5rem 0;}
.residence-ttl-sam{
      display: flex; justify-content: space-between; align-items: flex-end;
      padding: 0.8rem ;margin-bottom: 0.8rem;border-radius: 0.3rem;
      background-color: #12A581;color: #FFF;}
.residence-ttl-sam h3{font-weight: 500;font-size: 1.3rem;}
.residence-image{margin-top: 1.5rem;}
.residence-image-at{text-align: right; font-size: 1rem;margin: 0 0 1.8rem 0;}

.residence-ttl-sam-dl{width: 70vw;margin: 1em auto 0;}


@media screen and (max-width: 768px) {
.residence-image{width:100%;}
.residence-image img{width:100%;}
.residence-list-sam >li{width: 100%;}
.residence-ttl-sam{align-items: center;padding: 0.3em 0.5em;}
.residence-ttl-sam span{display: block; text-align: right;font-size: 1rem;margin-top: 0.2rem;}
.residence-image-at{text-align: left;}
.residence-ttl-sam-dl{width:100%;}
}

/*ーーーーーーーーーーーーーーーー
画像入れ替えCSS
ーーーーーーーーーーーーーーーーーー*/
.gallery img {width: 100%;vertical-align: top;}
.gallery {
   width: 70%;  display: flex;  position: relative;
   padding-top: 66.6666666667%;  box-sizing: border-box;}

@media screen and (min-width: 600px) {.gallery {padding-top: 490px;}}
.gallery__img {
   position: absolute;  top: 0;  left: 0;  opacity: 0;
  transition: opacity 0.3s ease-in-out;}
.gallery__thumb {padding-top: 6px;  margin: 6px;  display: block;cursor: pointer;}
.gallery__selector {position: absolute;opacity: 0;visibility: hidden;}
.gallery__selector:checked + .gallery__img {opacity: 1;}
.gallery__selector:checked ~ .gallery__thumb > img {box-shadow: 0 0 0 3px #12A581;}

@media screen and (max-width: 768px) {.gallery {width: 100%;}}

/*ーーーーーーーーーーーーーーーー
設備リスト
ーーーーーーーーーーーーーーーーーー*/
.residence-facility{width: 28%;}
.residence-facility dt{
   font-size: 1.3rem; font-weight: 600; border-bottom: 1px #707070 solid;
   padding: 0 0 0.5rem 0; margin-bottom: 0.8rem;}
.residence-facility ul{display: flex;flex-wrap: wrap;}
.residence-facility li{
   color: #707070;padding: 0.5rem 0.8rem; border: 1px #707070 solid;
   margin: 0 0.5rem 0.5rem 0;}

@media screen and (max-width: 768px) {
   .residence-facility{width: 100%;margin-top: 1rem;}
}





/*------------------------------------
フロアマップ
.floormap
 ------------------------------------*/
.floormap-bg{background-color: #F1F4F5;}
.floormap-wrap{padding: 8rem 0;}

.floormap-slide-img img{width: 100%;}



/*タブ切り替え全体のスタイル*/
.tabs,.tabs2 {
  margin-top: 50px;
  padding: 4rem 0 0;
  background-color: #F1F4F5;
  width: 100%;
  margin: 0 auto;}

/*タブのスタイル*/
.tab_item,.tab_item2 {
  width: calc(100%/5 - 0.5rem);
  height: 50px;
  border-radius: ;
  background-color: #D3D3D3;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  margin-right: 1rem;
  border-radius: 6px 6px 0px 0px;
  font-size: 20px;
  cursor: pointer;
}
.tab_item:hover {
  opacity: 0.75;
}
.tab_item2:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*ラジオボタンを全て消す*/
input[name="tab_item2"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 2rem 0;
  clear: both;
  overflow: hidden;
  border-top: 3px solid #12A581;
}


/*選択されているタブのコンテンツのみを表示*/
#tab01_A:checked ~ #tab01_A_content,
#tab01_B:checked ~ #tab01_B_content,
#tab01_C:checked ~ #tab01_C_content,
#tab01_D:checked ~ #tab01_D_content,
#tab02_A:checked ~ #tab02_A_content,
#tab02_B:checked ~ #tab02_B_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #12A581;
  color: #fff;
}

.tabs2 input:checked + .tab_item2 {
  background-color: #12A581;
  color: #fff;
}

@media screen and (max-width: 768px) {
.tabs,.tabs2 {padding: 0;}
.tab_item, .tab_item2 {width: calc(100%/4 - 1rem);font-size: 17px;}
}

/*--------------
scroll設定
---------------*/
.scroll-wrap{width: 100%;margin: 0 auto;}
.floormap-slide{overflow-x: auto;white-space:nowrap;padding: 0 0 4rem;}
.floormap-slide::-webkit-scrollbar {height: 12px;background-color: #d5d5d5;border-radius: 10px;}
.floormap-slide::-webkit-scrollbar-thumb {background-color: #12A581;border-radius: 10px;cursor:pointer;}

.floormap-slide li{
   display: inline-block;
   width:50%;
   margin:0 2rem 0 0;
   border-radius: 0.8rem;
   box-shadow: 0px 7px 10px -6px rgba(0,0,0,0.75);
   background-color: #fff;
   padding: 2rem 3.5rem;
}

@media screen and (max-width: 768px) {
.floormap-wrap{padding: 5rem 0;}
.scroll-wrap{ width: 100%;margin: 0 auto;}
.floormap-slide{ padding: 0 0 2rem;}
.floormap-slide li {width:70%; margin:0 4vw 0 0;padding: 1vw;}
}



/*------------------------------------
介護体制について　など
.caresystem
 ------------------------------------*/


.caresystem-wrap{padding: 8rem 0;}
.caresystem-ttl-txt{text-align: center;}

.caresystem-box{display: flex;justify-content: space-between;margin: 4rem 0 2rem;}
.caresystem-box-img{width: 48%;}
.caresystem-box-img img{width: 100%;}
.caresystem-box-txt{width: 48%;}
.caresystem-box-txt h3{font-size: 1.7rem; margin-bottom: .8rem;}

.caresystem-mgt{margin: 5rem auto 5.5rem!important;}

@media screen and (max-width: 768px) {
.caresystem-wrap{padding: 5rem 0;}
.caresystem-ttl-txt{text-align: left;}
.caresystem-box{flex-direction: column-reverse;}
.caresystem-box-img{width: 100%;}
.caresystem-box-txt{width: 100%; margin-bottom: 1rem;}
.caresystem-box-txt h3{font-size: 1.4rem; margin-bottom: .8rem;}
.caresystem-mgt{margin: 4rem auto 2rem!important;}
}

/*------------------------------------
お食事　など
.food
 ------------------------------------*/

.food{padding: 3rem;margin: 3rem 0 0;border-radius: 1rem;}
.food h3{font-size: 1.8rem; margin-bottom: 1rem;color: #00b1b3;display: flex;align-items: center;}
.food h3 >img{width: 1.3em; margin-right: 0.3em;}
.food-image{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;
margin-top: 1.5rem;}
.food-image li{width: 32%; overflow: hidden; border-radius: 0.3rem; aspect-ratio: 3 / 1.8;position: relative;}
.food-image img{width: 100%;}
.food-image span{position: absolute; bottom: 0; right: 0; background-color: #00b1b3; color: #FFF; 
padding:0.2em 0.8em;}
@media screen and (max-width: 768px) {
.food{padding:8vw;border-radius: 0.5rem;}
.food h3{font-size: 5.8vw;}
.food-image{flex-wrap: wrap;}
.food-image li{width: 49%;}
.food-image li:nth-child(1){display: none;}
.food-image span{font-size: 3vw;}
.food-image-top{width: 100%; overflow: hidden; border-radius: 0.3rem;margin-bottom: 1em;aspect-ratio: 3 / 1.8;}
.food-image-top img{width: 100%;}
}


.text-center{text-align: center;}
.p-text-center{text-align: center;}
@media screen and (max-width: 768px) {.p-text-center{text-align: left;}}




/*------------------------------------
ご入居までの流れ

 ------------------------------------*/
.kaigotsuki-wrap{margin: 3rem 0;}

.service-flow-list-wrap{position: relative;}
.service-flow-list-line{position: absolute; z-index: -5;border-right: 6px solid #12A581;
height: 100%;width: 78px;}
.service-flow-list{}

.service-flow-list li{display: flex;justify-content: space-between;align-items: center;margin-bottom: 4rem;}

.service-flow-list-step-wrap{width: 15%;}

.service-flow-list-step{
width: 150px;height: 150px;border-radius: 50%; border: 6px solid #12A581;
line-height: 80px;text-align: center;align-items: center;font-size: 1.8rem;
position: relative; background-color: #FFF;}
.service-flow-list-st{line-height: 1rem;}
.service-flow-list-nam{display: block;font-size: 4rem;}


.service-flow-ttl-wrap{display: flex; justify-content: space-between;align-items: center;width: 84%;}
.service-flow-list-img{width: 15%; text-align: center;}
.service-flow-list-img img{width: 70%;}

.service-flow-list dl{width: 85%;}
.service-flow-list dt{font-size: 1.8rem; font-weight: 500;}
.service-flow-list dd{line-height: 1.5;margin-top: 0.5rem;}


@media screen and (max-width: 768px) {

.service-flow-list-line{width: 32px;}
.service-flow-list-step{width: 60px;height: 60px;}
.service-flow-list-step-wrap{width: 20%;}

.service-flow-list li{align-items: center;}
.service-flow-list-step{line-height: 25px;font-size: 0.8rem;}
.service-flow-list-nam{font-size: 1.6rem;font-weight: 500;}

.service-flow-ttl-wrap{width: 80%;flex-direction: column;}

.service-flow-list-img{width: 30%; text-align: center;}
.service-flow-list-img img{width: 100%;}

.service-flow-list dl{width: 100%;}
.service-flow-list dt{font-size: 1.4rem;text-align: center;}
}


/*------------------------------------
ご入居当日までにご準備いただく各証書

 ------------------------------------*/
.service-certificate{display: flex;justify-content: space-between;border-top: 1px solid #D3D3D3;
margin-top: 3rem; padding-top:3rem;}
.service-certificate-wrap h4{font-size: 1.5rem;margin-bottom: 0.8em;margin-left: 1em; position: relative;}
.service-certificate-wrap h4::before{position: absolute;left: -1em;
content: '-'; display: inline-block; margin-right: .5em; color: #00b1b3;}

 .service-certificate-wrap{width: 48%;flex-shrink: 0;}
@media screen and (max-width: 768px) {
.service-certificate{flex-direction: column;margin-top: 2rem;
    padding-top: 2rem;}
.service-certificate-wrap{width: 100%;margin-bottom: 4vw;}
.service-certificate-wrap h4{font-size: 6vw;margin-bottom: 0.8em; line-height: 1.3;}

}

.service-certificate-wrap ul{}
.service-certificate-wrap li {
list-style-type: none;position: relative; padding-left: 1em; margin-bottom: 1rem;line-height: 1.35;}
.service-certificate-wrap li:before {
border-radius: 50%; width: 10px; height: 10px;display: block;
position: absolute; left: 0;  top: 0.35em; content: "";background: #D3D3D3; }
.service-certificate-wrap dl{margin-bottom: 1.5em;}
.service-certificate-wrap dt{
background-color: #d8edee;color: #00b1b3;padding:0.2em 0.8em;display: inline-block;margin-bottom: 0.8em;}





/*------------------------------------
ご入居条件について

 ------------------------------------*/


/*------------------------------------
ご利用料金

 ------------------------------------*/


.service-cost{display:flex; justify-content: space-between;}
.service-cost-inner{width: 47%;}

.service-cost-wrap h3{font-size: 1.5em;margin: 2rem 0 0;padding: 0.5em 1em;
background-color: #00b1b3;color: #FFF;}

.service-cost-wrap table{width: 100%;}
.service-cost-wrap table tr{border-bottom: 1px solid #D3D3D3;}
.service-cost-wrap table th,td{vertical-align: middle;}
.service-cost-wrap table th{background-color: #F1F4F5;padding: 1rem;font-weight: 500;width: 20%;text-align: center;  }
.service-cost-wrap table td{padding: 1rem 0 1rem 2rem;;font-size: 1.4rem;}
.tax{margin-left: 0.3rem; font-size: 80%;}
.total{font-size: 1.8rem;font-weight: 500;}
.service-cost-inner .supplement{display: block;font-size: 60%;}
.service-cost-text{margin-top: 2rem;}
.service-cost-text .supplement{font-size: 90%;text-align: right;margin-bottom: 1em;}

@media screen and (max-width: 768px) {
   .service-cost{flex-direction: column;}
   .service-cost-inner{width: 100%;}

   .service-cost-wrap table th {width: 30%;}
   .service-cost-wrap table td {padding: 3vw; font-size: 5vw;}
   
   .service-cost-wrap h3 { font-size: 5vw;}
   .supplement {font-size: 50%;}
   .service-cost-wrap dt {padding: 2vw 1vw;}
   .tax{margin-left: 0.1rem; font-size: 60%;}
   .total{font-size: 1.3rem;font-weight: 500;}
   .supplement{display: block;font-size: 70%;}
   .service-cost-inner .supplement{display: block;font-size: 60%;}
   .service-cost-text .supplement{font-size: 80%; display: block;text-align: left;}
   }

/*------------------------------------
注意事項

 ------------------------------------*/

.service-notes-wrap{margin: 8rem 0 0;}



/*------------------------------------
協力医療機関

 ------------------------------------*/

.medicalcare-bg{background-color: #DFFFF7;}
.medicalcare-wrap{padding: 8rem 0 10rem;}
.medicalcare-ttl-txt{text-align: center;}

.medicalcare-list{display: flex; justify-content: space-around;flex-wrap: wrap;margin-top: 3rem;}


.medicalcare-list li {
   width: 40%;
display: inline-block;
    background: #FFF;
    text-align: center;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
    padding: 0.8rem 0;

}


@media screen and (max-width: 768px) {
.medicalcare-wrap{padding: 5rem 0;}
.medicalcare-list{flex-direction: column;}
.medicalcare-list li {width: 100%;}
.medicalcare-ttl-txt{text-align: left;}
}

/*------------------------------------
ポップアップ

 ------------------------------------*/
#modal-container {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, .6);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
#modal-container > div {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
#modal-container > div > img {
  max-width: calc(100vw - 30px);
  max-height: calc(100vh - 30px);
}
img.popup {
  cursor: pointer;
  transition: 0.3s;
}
img.popup:hover{transform: scale(1.1);}

.facility-image{display: grid;  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto); gap: 1rem;margin-top: 1rem;}

.facility-image img{width: 100%;}

.facility-image li,.floormap-image li{position: relative; overflow: hidden;}
.facility-image h5,.floormap-image h5{position: absolute; top:0;left:0; font-size: 90%;
background-color: #00b1b3;color: #FFF;padding:0.3em 1em; font-weight: 500;z-index: 1;}


.floormap-image{width: 100%;
display: grid;  grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, auto);gap: 1rem;}
.floormap-image img{width: 100%;}

.floormap-image-wrap {margin: 1rem 0;}

.floormap-image-wrap h4 {position: relative; width: 100%; border-top: 1px solid #00b1b3;display: block;
margin: 3rem 0 2rem;}
.floormap-image-wrap h4 > span{position: absolute;transform: translateY(-50%) translateX(-50%);z-index: 1;left: 50%;
background-color: #FFF; color: #00b1b3; font-size: 1.8rem; padding:0 1em;}

@media screen and (max-width: 768px) {
.facility-image{display: grid;  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4 auto); gap: 1rem;margin-top: 1rem;}

.floormap-image-wrap h4{border-top: 0;    margin: 2rem 0 1rem; text-align: center;}
.floormap-image-wrap h4 > span{ font-size: 5.8vw;position: relative;transform: translateY(0) translateX(0);z-index: 1;left: 0%; padding:0;}
.floormap-image{ grid-template-columns: repeat(2, 1fr)}
}

.top-contents-wrap02{margin-top: 3rem;}

.service-contents-about-list{display: flex;justify-content: space-between; align-items: stretch;}
.service-contents-about-list li{width: 23%;  box-sizing: border-box;overflow: hidden;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1); border-radius: 0.5rem; position: relative;}
.service-contents-about-br{display: inline;}
.service-contents-about-list h4 { line-height: 1.25;  margin: 1rem 0 0.3rem;
text-align: center;  font-size: 1.4rem;
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-image: linear-gradient(90deg, rgba(0, 175, 187, 1) 10%, rgba(0, 190, 128, 1) 90%);}
.service-contents-about-list h4 {line-height: 1.2;}
.service-contents-about-list p{padding: 0 1rem 1rem;}
.service-contents-about-list-icon{ aspect-ratio: 225 / 110;width: 100%;overflow: hidden;}
.service-contents-about-list-icon img{width: 100%;}
.service-contents-about-list .note-info{font-size: 70%; display: block; line-height: 1.2;}

@media screen and (max-width: 768px) {
.service-contents-about-list{flex-wrap: wrap;}
.service-contents-about-list li{width: 48%;margin-bottom: 2rem;}}

@media screen and (max-width: 430px){
.service-contents-about-list li{width: 100%;}
.service-contents-about-br{display: none;}
}