@charset "utf-8";


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
「安心」して「楽しく暮らせる」
.sakoju
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
.ttl-bg{
   background-image: url(/hamamatsu-higashi/common/img/sakoju-bg.jpg);
   background-size: cover; height: 750px;
   position: relative;
   background-position: top center;
   background-repeat: no-repeat; position: relative;}


.ttl-line{
   background-image: linear-gradient(90deg, rgba(0, 175, 187, 0.9) 10%, rgba(0, 190, 128, 0.9) 90%);
   position: absolute;
   bottom: 0; padding: 2.5rem 0; width: 100%; color: #FFF;}

.ttl-line h2{font-size: 2.8rem;font-weight: 500;margin-bottom: 0!important;}
.ttl-line p{font-size: 1.8rem; font-weight: 400;}

@media screen and (max-width: 768px) {
.ttl-bg{height: 600px;}
.ttl-line{padding: 2rem 0;}
.ttl-line h2{font-size: 1.9rem;}
.ttl-line p{font-size: 5vw; line-height: 1.35;margin-top: 1rem;}
}


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

.support-link-wrap{text-align: right;}
 @media screen and (max-width: 768px) {
.support-link-wrap{margin-bottom: 3vw;}
.support-link{width: 100%; text-align: center;}
 }


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
「安心」して「楽しく暮らせる」
.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: 32%;}

.feature-img{
   width: 100%;height: 20rem;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.4rem;font-weight: 600;margin-bottom: 0.8rem;text-align: center;}
.feature-list dd{line-height: 1.75;}

.__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: 5rem 0;}
.feature-list{flex-direction: column;}
.feature-list li{width: 100%;margin-bottom: 4rem;}
}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
住まいについて
.eligible-residents
 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.eligible-residents{
}

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

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

.eligible-residents 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 ul {margin: 5vw 0;}
.eligible-residents li { width: 48%; 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;height: 50rem;margin: 2rem 0;position: relative;overflow: hidden;}
.residence-img img{width: 100%;position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}


.residence-list{}
.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;}

@media screen and (max-width: 1280px) {
.residence-img {height: 33rem;}
}

@media screen and (max-width: 768px) {
   .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-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;width: 100%;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;}

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

/*ーーーーーーーーーーーーーーーー
画像入れ替え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-inner{
   width: 80%;
   min-width: 900px;
   background-color: #FFF;
   padding:2rem 10%;
   margin: 0 auto;
}
.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) {
   .mobile-scroll {width: 100%; overflow-x: scroll;}
.floormap-wrap{padding: 5rem 0;}
.scroll-wrap{ width: 100%;margin: 0 auto;}
.floormap-slide{ padding: 0 0 2rem;}
.floormap-slide li {width:160%; margin:0 1rem 0 0;padding: 2rem 1.5rem;}
}



/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
介護体制について　など
.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{display: flex;padding: 3rem;margin: 3rem 0 0;justify-content: space-between;border-radius: 1rem;}
.food-img{width: 49%;border-radius: 0.8rem;overflow: hidden;} .food-img img{width: 100%;}
.food-txt{width: 49%;}

@media screen and (max-width: 414px) {
.food{flex-direction: column;padding: 7vw 5vw 5vw;margin: 3vw 0 0;}
.food-img{border-radius: 0.4rem;width: 100%;height: 50vw;}.food-txt{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;}
 .service-certificate-wrap{width: 48%;flex-shrink: 0;}
@media screen and (max-width: 768px) {
 .service-certificate{flex-direction: column;}
  .service-certificate-wrap{width: 100%;margin-bottom: 13vw;}}

 .service-certificate-wrap ul{}
 .service-certificate-wrap li {
    list-style-type: none; /*点を非表示*/
    position: relative; /*基準位置*/
    padding-left: 1em;
    margin-bottom: 1rem;
    }
.service-certificate-wrap li:before {
    border-radius: 50%; /*丸くする*/
    width: 10px; /*点の幅*/
    height: 10px; /*点の高さ*/
    display: block;
    position: absolute; /*絶対配置*/
    left: 0; /*点の位置*/
    top: 0.45em; /*点の位置*/
    content: "";
    background: #12A581; /*点の色*/
    }


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

 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/


/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ご利用料金

 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.service-cost-wrap{}
.service-cost-wrap ul{margin-bottom: 3rem;}
.service-cost-wrap li{border-bottom: 1px solid #D3D3D3;}
.service-cost-wrap li:last-child{border-bottom:0;}

.service-cost-wrap dl{display: flex;align-items: center;box-sizing: border-box;}
.service-cost-wrap dt{background-color: #F1F4F5;padding: 2rem 4rem;font-weight: 500;width: 20%;text-align: center;}
.service-cost-wrap dd{padding: 0 0 0 5rem;font-size: 1.4rem;}
.tax{margin-left: 0.3rem; font-size: 80%;}
.total{font-size: 1.8rem;font-weight: 500;}
.supplement{display: block;font-size: 70%;}


.service-cost-wrap h3{font-size: 1.8rem; margin: 1rem 0 2rem;border-left: 5px solid #12A581;padding: 0 0 0 1rem;}

@media screen and (max-width: 768px) {
.service-cost-wrap dt{padding: 2.8rem 0;width: 28%;font-size: 80%;} 
.service-cost-wrap dd{width: 77%;padding: 0 0 0 0.5rem;font-size: 1.3rem;}

.tax{margin-left: 0.1rem; font-size: 70%;display: block;}
.total{font-size: 1.3rem;font-weight: 500;}
.supplement{display: block;font-size: 70%;}
}


@media screen and (max-width: 414px) {
.service-cost-wrap h3 { font-size: 5.8vw;}
.supplement {font-size: 50%;}
.service-cost-wrap dt {padding: 12vw 0;}

}

/*ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
注意事項

 ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/

.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-evenly;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;}
}