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

page- company CSS

-------------------------------------------------------------*/
/*-------------------------------------------------------------
  理念
-------------------------------------------------------------*/
.box_rinen{
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
}

/*-------------------------------------------------------------
  会社概要
-------------------------------------------------------------*/
.box_googlemap{
  width: 100%;
}
.box_googlemap iframe{
  width: 100%;
  height: 450px;
}
.box_company{
  width: 100%;
  padding: 70px 20px;
}
.box_company .company_area{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.box_company .company_area dl.company_info{
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch; 
  background-color: #fff;
  padding: 15px;
  margin: 10px 0;
}
.box_company .company_area dl.company_info dt{
  width: 25%;
  border-right: 3px solid #00bfff;
  padding-right: 15px;
  font-weight: bold;
}
.box_company .company_area dl.company_info dd{
  width: 75%;
  padding-left: 15px;
}

@media screen and (max-width: 768px) {
  .box_company{
    padding: 20px 15px;
  }
}

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

page- flow CSS

-------------------------------------------------------------*/
.flow_area{
  width: 100%;
}
.flow_area .flow_box{
  width: 100%;
  margin: 100px 0;
  padding: 20px;
  position: relative;
}
.flow_area .flow_box::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 0;
  right: 0;
  bottom: -70px;
  margin: 0 auto;
  border-top: 40px solid #00bfff;
  border-right: 40px solid transparent;
  border-left: 40px solid transparent;
}
.flow_area .flow_box:last-child::before{
  content: none;
}
.flow_area .flow_box .flow_box_inner{
  width: 100%;
  padding: 20px;
  background-color: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.flow_area .flow_box .flow_box_inner .flow_box_img{
  width: 40%;
}
.flow_area .flow_box .flow_box_inner .flow_box_txt{
  width: 55%;
  margin-left: 5%;
}
.flow_no {
  counter-reset: h4;
}
.flow_no h4{
  display: flex;
  line-height: 3rem;
  font-size: 1.5rem;
  margin-bottom: 20px;
}
.flow_no h4:before {
  counter-increment: h4;
  content: counter(h4);
  background-color: #00bfff;
  color: #fff;
  text-align: center;
  width: 3rem;
  height: 3rem;
  line-height: 3rem;
  font-size: 1.5rem;
  margin-right: 1.0rem;
  border-radius: 50%;
  flex-shrink: 0;
}

/* 問い合わせボタン */
.flow_area .flow_box .flow_contact_box{
  width: 100%;
  margin-top: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
.flow_area .flow_box .flow_contact_box a.flow_contact_tel,
.flow_area .flow_box .flow_contact_box a.flow_contact_mail {
  display: block;
  width: 48%;
	background: linear-gradient(to right, #00bfff, #87cefa);
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  color: #fff;
}
.flow_area .flow_box .flow_contact_box a.flow_contact_tel:hover,
.flow_area .flow_box .flow_contact_box a.flow_contact_mail:hover {
	background: #00bfff;
}
.flow_area .flow_box .flow_contact_box a.flow_contact_tel p.free_tel span{
	position:relative;
	line-height:24px;
	padding-left:35px;
  font-size: 24px;
}
.flow_area .flow_box .flow_contact_box a.flow_contact_tel p.free_tel span:before{
	position:absolute;
	top: 3px;
	left:0;
	content:"";
	display:inline-block;
	width:24px;
	height:24px;
	background:url(../img/flow/free_tel_icon.svg) no-repeat;
	background-size:contain;
}
.flow_area .flow_box .flow_contact_box a.flow_contact_mail p.contact_btn{
  font-size: 20px;
  line-height:24px;
}

@media screen and (max-width: 768px) {
  .flow_area .flow_box .flow_box_inner .flow_box_img{
    width: 100%;
  }
  .flow_area .flow_box .flow_box_inner .flow_box_txt{
    width: 100%;
    margin-left: 0;
    margin-top: 15px;
  }
  .flow_area .flow_box .flow_contact_box a.flow_contact_tel,
  .flow_area .flow_box .flow_contact_box a.flow_contact_mail {
    width: 100%;
    margin-top: 15px;
  }
}

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

news CSS

-------------------------------------------------------------*/
/* -----------------------------------
   一覧用
------------------------------------- */
.info_area{
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  .info_area{
      flex-direction: row;
  }
}

/* info_main_area ----------------- */
.info_area .info_main_area{
  width: 75%;
  margin-left: 5%;
}
.info_area .info_main_area .info_list{
  width: 100%;
  margin-bottom: 30px;
  padding-bottom: 50px;
  border-bottom: 1px solid #ccc;
}
.info_area .info_main_area .info_list p.day{
  width: 100%;
  margin-bottom: 10px;
  font-size: 14px;
}
.info_area .info_main_area .info_list a.title_link{
  width: 100%;
  display: block;
}
.info_area .info_main_area .info_list h3.title{
  width: 100%;
  color: #000;
  font-size: 20px;
  line-height: 25px;
  padding: 10px 0;
  border-bottom: solid 5px #00bfff;
  margin-bottom: 15px;
}
.info_area .info_main_area .info_list .info_cat_area{
  width: 100%;
  margin: 10px 0;
  line-height: 1.5;
}
.info_area .info_main_area .info_list span.cat_icon{
  display: inline-block;
  padding: 3px 10px;
  color:#fff;
  font-size: 14px;
  background-color:#00bfff;
}

.info_area .info_main_area .info_list .info_more{
  width: 100%;
  margin-top: 30px;
  text-align: right;
}
.info_area .info_main_area .info_list .info_more a{
  display: inline-block;
  padding: 8px 15px;
  border:solid 1px #00bfff;
  color: #00bfff;
  font-size: 16px;
}
.info_area .info_main_area .info_list .info_more a:hover{
  color: #fff;
  background-color: #00bfff;
}
.info_area .info_main_area .info_list .main_txt{
  width: 100%;
  margin-top: 20px;
  line-height: 1.5rem;
}
.info_area .info_main_area .info_list .main_txt img{
  width: auto;
  max-width: 100%;
}
/* singleページ用一覧へ戻るボタン */
.info_area .info_main_area .back_list{
  width: 100%;
  margin: 10px 0 30px 0;
  text-align: center;
}
.info_area .info_main_area .back_list a{
  display: inline-block;
  padding: 8px 15px;
  border:solid 1px #00bfff;
  color: #00bfff;
  font-size: 16px;
}
.info_area .info_main_area .back_list a:hover{
  color: #fff;
  background-color: #00bfff;
}

/* singleページ用前後の記事ボタン */
.info_area .info_main_area .back_next_list{
  width: 100%;
  margin: 30px 0 10px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.info_area .info_main_area .back_next_list .back_page{
  width: 50%;
  text-align: left;
}
.info_area .info_main_area .back_next_list .next_page{
  width: 50%;
  text-align: right;
}
.info_area .info_main_area .back_next_list a{
  display: inline-block;
  padding: 8px 15px;
  border:solid 1px #00bfff;
  color: #00bfff;
  font-size: 16px;
}
.info_area .info_main_area .back_next_list a:hover{
  color: #fff;
  background-color: #00bfff;
}

/* info_side_area ----------------- */
.info_area .info_side_area{
  width: 20%;
}
.info_area .info_side_area .side_box{
  width: 100%;
  margin-bottom:50px;
}
.info_area .info_side_area .side_box ul{
  width: 100%;
  padding: 0;
}
.info_area .info_side_area .side_box ul li{
  padding: 15px 10px;
  list-style-type: none!important;
  border-bottom: 1px solid #ccc;
}
.info_area .info_side_area .side_box ul li.head {
  padding: 10px 10px;
  border-bottom:none;
  color:#fff;
  background: linear-gradient(to right, #00bfff, #87cefa);
}
@media screen and (max-width: 768px) {
  .info_area .info_main_area{
      width: 100%;
      margin-left: 0%;
      margin-bottom:30px;
  }
  .info_area .info_main_area .info_list{
      margin-bottom: 20px;
      padding-bottom: 30px;
  }
  .info_area .info_side_area{
      width: 100%;
  }
  .info_area .info_side_area .side_box{
      margin-bottom:30px;
  }
  .info_area .info_side_area .side_box ul li{
      padding: 10px 10px;
  }
}

/* -----------------------------------
 ページャー
------------------------------------- */
.pagenation{
  border-radius: 7px;
  overflow: hidden;
}
.pagenation ul{
  display: flex;
  justify-content: center;
  list-style-type: none;
}
.pagenation .active{
  background-color: #00bfff;
  color: #fff;
  font-size: 12px;
  padding: 10px 15px;
}
.pagenation a{
  font-size: 12px;
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  background-color: #ebe4dd;
  color: #000;
  border-right: 1px solid white;
}

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

page- public CSS

-------------------------------------------------------------*/
/* -----------------------------------
   一覧用
------------------------------------- */
.public_area_list{
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.public_area_list a.public_area_pagelink{
  display: block;
  width: 23%;
  margin: 10px 1%;
  padding: 15px 30px 15px 15px;
  border: solid 3px #00bfff;
  color: #000;
  font-weight: bold;
  position: relative;
  transition: 0.3s;
}
.public_area_list a.public_area_pagelink:hover{
  background-color: #d2eeff;
}
.public_area_list a.public_area_pagelink::after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 15px;
  width: 8px;
  height: 8px;
  border-top: 3px solid #00bfff;
  border-right: 3px solid #00bfff;
  transform: translateY(-50%) rotate(135deg);
}
@media screen and (max-width: 768px) {
  .public_area_list a.public_area_pagelink{
    display: block;
    width: 48%;
    margin: 5px 1%;
    padding: 10px 30px 10px 10px;
  }
}

/* 各エリア別リスト */
.public_list{
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.public_list h4.area_name{
  width: 100%;
  margin-bottom: 20px;
  padding: 15px 15px 15px 40px;
  background: linear-gradient(to right, #00bfff, #87cefa);
  color: #fff;
  position: relative;
}
.public_list h4.area_name span::before {
  content: "";
  position: absolute;
  background: #fff;
  top: 50%;
  left: 14px;
  margin-top :-10px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
}
.public_list .public_box{
  width: 23%;
  margin: 10px 1%;
  padding: 10px;
  border: #87cefa 3px solid;
}
.public_list .public_box .public_box_img{
  width: 100%;
  margin-bottom: 10px;
}
.public_list .public_box h5.public_box_name{
  width: 100%;
  margin-bottom: 10px;
  text-align: center;
}
.public_list .public_box .public_box_more{
  width: 100%;
  text-align: center;
}
.public_list .public_box .public_box_more a{
  width: 50%;
  text-align: center;
  border: 1px solid #00bfff;
  padding: 3px 15px;
  color: #00bfff;
  display: inline-block;
  border-radius: 5px;
  transition: 0.3s;
}
.public_list .public_box .public_box_more a:hover{
  color: #fff;
  background-color: #00bfff;
}

@media screen and (max-width: 768px) {
  .public_list .public_box{
    width: 48%;
  }
}

/* -----------------------------------
   詳細用
------------------------------------- */
.public_detail{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
.public_detail h3.public_detail_title{
  width: 100%;
  margin-bottom: 30px;
  padding-bottom: 10px;
  border-bottom: 5px solid #00bfff;
  font-size: 20px;
}
.public_detail .public_detail_main_img{
  width: 100%;
  margin-bottom: 30px;
}
.public_detail h3.public_main_title{
  width: 100%;
  margin-bottom: 10px;
  font-size: 1.2rem;
  color: #00bfff;
}
.public_detail h4.public_detail_contents{
  width: 100%;
  margin: 50px 0 30px 0;
  padding: 15px 15px 15px 40px;
  background: linear-gradient(to right, #00bfff, #87cefa);
  position: relative;
  color: #fff;
}
.public_detail h4.public_detail_contents span::before {
  content: "";
  position: absolute;
  background: #fff;
  top: 50%;
  left: 14px;
  margin-top :-10px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
}
.public_detail .public_detail_room_img{
  width: 100%;
  margin-bottom: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.public_detail .public_detail_room_img .room_img_box{
  width: 31%;
  margin: 10px 1%;
  text-align: center;
}
/* table ------------- */
.public_detail table.public_table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}
.public_detail table.public_table th{
  padding: 5px;
  background-color: #00bfff;
  color: #fff;
  text-align: left;
  vertical-align:middle
}
.public_detail table.public_table td{
  padding: 5px;
  text-align: left;
  border: #00bfff solid 1px;
  vertical-align:middle
}
.public_detail .public_more_price{
  width: 100%;
  margin: 15px 0 30px 0;
  padding: 15px;
  background-color: #d7f5ff;
}
.public_detail .public_more_price h5.more_price_h5{
  width: 100%;
  margin-bottom: 10px;
  padding-left: 30px;
  position: relative;
  color: #00bfff;
}
.public_detail .public_more_price h5.more_price_h5 span::before {
  content: "";
  position: absolute;
  background: #00bfff;
  top: 50%;
  left: 0px;
  margin-top :-10px;
  height: 20px;
  width: 20px;
  border-radius: 50%;
}
.public_detail .public_googlemap{
  width: 100%;
  margin-bottom:15px;
}
.public_detail .public_googlemap iframe{
  width: 100%;
  height: 450px;
}
.public_detail .public_pdf_link{
  width: 100%;
  margin: 20px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
}
.public_detail .public_pdf_link a{
  width: 21%;
  margin: 10px 2%;
  padding: 10px;
  display: block;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 15px;
  transition: 0.3s;
}
.public_detail .public_pdf_link a.important_pdf{
  background-color: #ff4747;
}
.public_detail .public_pdf_link a.important_pdf:hover{
  background-color: #ff7676;
}
.public_detail .public_pdf_link a.disclose_pdf{
  background-color: #ff7547;
}
.public_detail .public_pdf_link a.disclose_pdf:hover{
  background-color: #ffaa8d;
}
@media screen and (max-width: 768px) {
  .public_detail h3.public_main_title{
    font-size: 1.0rem;
  }
  .public_detail h3.public_detail_title{
    margin-bottom: 15px;
    font-size: 18px;
  }
  .public_detail h4.public_detail_contents{
    margin: 30px 0 15px 0;
  }
  .public_detail .public_detail_room_img .room_img_box{
    width: 48%;
    margin: 10px 1%;
  }
  .public_detail .public_pdf_link a{
    width: 48%;
    margin: 10px 1%;
  }
}

/* 訪問介護用 ---------------------------- */
.public_detail .public_houmon_main_img{
  width: 100%;
  margin-bottom: 30px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}
.public_detail .public_houmon_main_img .houmon_img_box{
  width: 48%;
}
.public_detail .public_houmon_service{
  width: 100%;
  margin-bottom: 30px;
}
.public_detail .public_houmon_service .public_houmon_service_box{
  width: 100%;
  margin-bottom: 20px;
}
.public_detail .more_corporation{
  width: 100%;
  margin: 50px 0;
  text-align: center;
}
.public_detail .more_corporation a{
  width: 80%;
  max-width: 500px;
  background-color: #00bfff;
  text-align: center;
  display: inline-block;
  color: #fff;
  border-radius: 10px;
  border: 2px solid #00bfff;
  padding: 20px 10px;
  font-weight: bold;
  transition: 0.3s;
}
.public_detail .more_corporation a:hover{
  background-color: #fff;
  color: #00bfff;
}



@media screen and (max-width: 768px) {
  .public_detail .public_houmon_main_img{
    margin-bottom: 15px;
  }
  .public_detail .public_houmon_main_img .houmon_img_box{
    width: 100%;
    margin-bottom: 15px;
  }
}

/* -----------------------------------
   空室状況
------------------------------------- */
.room_area{
  width: 100%;
  background-color: #EDF6F9;
  padding: 50px 10px;
}
table.room_table{
  width: 100%;
  max-width: 1000px;
  text-align: center;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 5px 10px;
}
table.room_table thead th{
  background-color: #87cefa;
  font-weight: bold;
  padding: 10px;
}
table.room_table tbody th{
  background-color: #87cefa;
  font-weight: bold;
  padding: 10px;
}
table.room_table tbody td{
  background-color: #fff;
  padding: 10px;
}
.room_area .room_comment{
  width: 100%;
  max-width: 1000px;
  margin: 20px auto 0 auto;
  background-color: #fff;
  padding: 20px;
}
.room_area .room_col_red{ color: #f00; }
.room_area .room_col_greem{ color: #008000; }
.room_area .room_col_blue{ color: #00f; }

/* レスポンシブ対応 */
.table_scroll {
  overflow: hidden;
}
p.scroll_text{
  display: none;
}
@media screen and (max-width: 768px) {
  .room_area{
    padding: 20px 10px;
  }
  .table_scroll {
    overflow: scroll;
  }
  table.room_table{
    width: 800px;
    max-width: none;
  }
  p.scroll_text{
    display: block;
    font-size: 14px;
  }  
}

/* -----------------------------------
   職員メッセージ
------------------------------------- */
.message_area{
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.message_area .message_box{
  width : 29%;
  margin: 30px 2%;
}
.message_area .message_box .message_img{
  width : 100%;
  margin-bottom: 15px;
}
.message_area .message_box .message_tag{
  background-color: #87cefa;
  font-size: 75%;
  padding: 1px 10px;
  display: inline-block;
  font-weight: bold;
}
.message_area .message_box h4.message_h4{
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .message_area .message_box{
    width : 46%;
    margin: 15px 2%;
  }
}
/* 個別ページ ------- */
.message_single_area{
  width: 100%;
  margin-bottom: 100px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  flex-direction: row-reverse;
}
.message_single_area .message_single_img{
  width: 40%;
  margin-left: 5%;
}
.message_single_area .message_single_note{
  width: 55%;
}
.message_single_area .message_single_tag{
  background-color: #87cefa;
  padding: 1px 10px;
  display: inline-block;
  font-weight: bold;
}
.message_single_area h4.message_single_h4{
  width: 100%;
  margin: 20px 0;
  font-size: 120%;
  padding-bottom: 10px;
  border-bottom: 3px solid #00bfff;
}
.message_single_area .message_single_content{
  width: 100%;
}
@media screen and (max-width: 768px) {
  .message_single_area .message_single_img{
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
  }
  .message_single_area .message_single_note{
    width: 100%;
  }
}