@charset "utf-8";
/* 
# =================================================================
# 共通カラー	# 共通カラー
# ================================================================= */
:root {
  --base1: #005fa8;
  --base2: #29ABE2;
  --base3: #999;
  --base4: #0071bc26;
  --pink1: #F19CA6;
  --rosered: #db535e;
  --black: #000;
  --lightgray:  #e6e6e6;
  --offwhite:  #f6f6f6;
  --white:  #ffffff;
  --lightblue: #0071bc26;
  --ikoma: #E95277;
  --familia: #FFA603;
  --elixir: #379C2A;
  --matsusita: #FABE00;
  --kyotaku: #FABE00; 
  --visit_support: #4FD446;
  --kyotaku: #924898;
  --fitcare: #;
}

/*--------------------------------------------------------
タイトル 
--------------------------------------------------------*/

/*-- タイトル --*/
.page-content{
  margin-bottom: 120px;
}

.page-titile {
  position: relative;
  margin-left: 260px;          
  width: calc(100% - 260px);   
  box-sizing: border-box;
  overflow-x: hidden;          
}

.page-titile-back {
  width: 100%;                 
  height: 200px;
  overflow: hidden;
  box-sizing: border-box;
}

.page-titile-back img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  display: block;
}

/* テキストを中央配置 */
.page-titile-text {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-h1);
  font-weight: bold;
  color: var(--base1);
  text-align: center;
  width: 100%;
  pointer-events: none;
}

/*---------------- 767px--------------*/
@media screen and (max-width:767px) {

/*-- タイトル --*/
.page-content{
  margin-bottom: 60px;
}
.page-titile {
  position: relative;
  padding-top: 60px;
  margin-left: 0px;          
  width: 100%;   
}
.page-titile-back {
  height: 150px;
}
/* テキストを中央配置 */
.page-titile-text {
  top: 65%;
}
}
/*---------------- 1024px--------------*/
@media screen and (max-width:1024px) {
.page-titile {
  position: relative;
  padding-top: 60px;
  margin-left: 0px;          
  width: 100%;   
}
/* テキストを中央配置 */
.page-titile-text {
  top: 66%;
}

}



/*--------------------------------------------------------
医療ページ
--------------------------------------------------------*/

/*-- 各コンテンツ --*/
.page-content-container{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; 
}
.page-pic{
  width: 45%;
  padding-left: 6%;
}
.page-pic img{
  width: 100%;
}
.page-text{
  width: 50%;
  padding-right: 6%;
}
.page-headline h2{
  font-size: var(--fs-h1);
  font-weight: bold;
  border-bottom: solid 1px var(--base1);
  padding-bottom: 20px;
  padding-left: 10px;
  line-height: 1.4em;
}
.page-body{
  margin-top: 20px;
    padding-left: 10px;
    font-size: var(--fs-body);
    line-height: 2em;
}
.page-address{
  margin-top: 30px;
    padding-left: 10px;
    font-size: var(--fs-note);
    line-height: 2em;
}
.page-phone{
  margin-top: 6px;
    padding-left: 10px;
    font-size: var(--fs-h1);
    line-height: 2em;
  font-family: "Inter", sans-serif;
  font-weight: bold;
}

/*---------------- 767px--------------*/
@media screen and (max-width:767px) {

/*-- 各コンテンツ --*/

.page-pic{
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}
.page-text{
  width: 100%;
  padding-right: 5%;
  padding-left: 5%;
}
.page-headline h2{
  font-size: var(--fs-h1);
  font-weight: bold;
  border-bottom: solid 1px var(--base1);
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 20px;
}
.page-body{
  margin-top: 20px;
    padding-left: 10px;
    font-size: var(--fs-body);
    line-height: 2em;
}
.page-address{
  margin-top: 15px;
}
.page-phone{
  margin-top: 6px;
    padding-left: 10px;
    font-size: var(--fs-h1);
    line-height: 2em;
  font-family: "Inter", sans-serif;
  font-weight: bold;
}

}




/* 詳しく見る サークルhover */
/*円エフェクト-moreボタン*/
.more-page-btn {
  text-align: center;
  width: 98%;
	margin: 30px auto 0px;
}

/* ボタン本体 */
.more-page-btn_style {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  background-color: rgba(215, 235, 250, 0.7);
  color: #333;
  padding: 18px 60px;
  font-weight: 700;
    font-size: var(--fs-body);
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.4s ease, color 0.4s ease;
  z-index: 2; /* スタッキング文脈を明確化 */
  box-sizing: border-box;
}

.more-page-btn_style > a {
  position: relative;
  display: flex; /* ←横並びに */
  justify-content: center; /* 中央寄せ（お好みでstart/endでもOK） */
  align-items: center;      /* 縦方向の中央揃え */
  gap: 10px;                /* テキストとアイコンの間隔 */
   color: inherit; 
  text-decoration: none;
  z-index: 2;
  transition: color 0.4s ease;

}

/* 円 */
.more-page-btn_style .circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;

    background: var(--base1);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  pointer-events: none;
   z-index: 0;
}

/* hover時：#69AEB4の円が広がる */
.more-page-btn_style:hover .circle {
  transform: translate(-50%, -50%) scale(5);
  opacity: 0.3;
}

/* リンクの状態別指定 */
.more-page-btn_style > a:link,
.more-page-btn_style > a:visited,
.more-page-btn_style > a:hover,
.more-page-btn_style > a:active {
  color: #333;
  text-decoration: none;
}

/*---------------- 767px--------------*/
@media screen and (max-width:767px) {
/* 詳しく見る サークルhover */
/*円エフェクト-moreボタン*/
.more-page-btn {
  text-align: center;
  width: 98%;
	margin: 10px auto 0px;
}
}


/*--------------------------------------------------------
メッセージ ページ
--------------------------------------------------------*/
/*-- 各コンテンツ --*/
.page-message-content{
    margin-left: 260px;
  width: calc(100% - 260px);
  margin-top: 120px;
  margin-bottom: 120px;
  overflow-x: hidden;
}

.page-message-text-block{
  width: 80%;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.08);
  border-radius: 4px; /* （任意）角を少し丸くして柔らかい印象に */
  background-color: #fff; /* （任意）白背景をつけると影が映える */
  padding: 80px 100px;
  margin-left: 10%;
  margin-bottom: 120px;
}
.page-message-title{
  font-size: var(--fs-h1);
  font-weight: bold;
  border-bottom: solid 1px var(--base1);
  padding-bottom: 20px;
  padding-left: 10px;
  text-align: center;
  color: var(--base1);
}
.page-message-headline{
  font-size: var(--fs-h2);
  font-weight: bold;
  margin-top: 40px;
  padding-left: 10px;
  text-align:left;
  line-height: 2em;
}
.page-message-body{
  margin-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: var(--fs-body);
    line-height: 2.4em;
}
.page-message-name{
      font-size: var(--fs-lead);
      text-align: right;
      margin-top: 40px;
      padding-right: 10px;
}

/*---------------- 1024px--------------*/
@media screen and (max-width:1024px) {
  
  .page-message-text-block{
  width: 90%;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.08);
  border-radius: 4px; /* （任意）角を少し丸くして柔らかい印象に */
  background-color: #fff; /* （任意）白背景をつけると影が映える */
  padding: 5%;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 60px;
}
}

/*--------------------------------------------------------
取り組み
--------------------------------------------------------*/

.page-activities-block{
  width: 80%;
  margin-left: 10%;
  margin-bottom: 60px;
}

.page-activities-headline{
  font-size: var(--fs-h2);
  font-weight: bold;
  border-bottom: solid 1px var(--base1);
  padding-bottom: 20px;
  padding-left: 30px;
  padding-top: 20px;
  text-align: left;
  color: var(--base1);
  background-color: #f6f6f6;
}
.page-activities-lead{
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: var(--fs-lead);
    line-height: 1.8em;
    color:#0092D8;
}
.page-activities-body{
  margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: var(--fs-body);
    line-height: 2em;
}
.page-activities-img{
  width: 100%;
  margin: 40px auto;
  text-align: center;
}
.page-activities-img img {
  display: inline-block;
}

.page-activities-chart img{
  width: 100%;
}
.page-activities-document img{
  width: 40%;
}
.page-activities-document2 img{
  width: 80%;
}
.page-activities-link{
  display: inline-block;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: var(--fs-body);
    line-height: 2em;
    border-bottom: solid 1px var(--base1);
    transition: opacity 0.5s ease;
}
.page-activities-link:hover {
  opacity: 0.6;
}

/*---------------- 詳しく見る--------------*/
.more-activities-btn{
  width: 40%;
  margin: 0 auto;
}

/*---------------- 767px--------------*/
@media screen and (max-width:767px) {
  
.page-activities-block{
  width: 90%;
  margin: 0 auto 30px;
}
.page-activities-headline{
  font-size: 18px;
  font-weight: bold;
  border-bottom: solid 1px var(--base1);
  padding-bottom: 10px;
  padding-left: 20px;
  padding-top: 10px;
  text-align: left;
  color: var(--base1);
  background-color: #f6f6f6;
}
.more-activities-btn{
  width: 90%;
  margin: 0 auto;
}

}

/*--------------------------------------------------------
▶︎12/2　追加
--------------------------------------------------------*/
/* クラスなし ul を txtlist と同じ見た目にする */
.sidebox ul:not(.txtlist) {
list-style: disc;
padding-left: 1.2em;
font-size: var(--fs-body);
line-height: 1.8;
}

.sidebox ul:not(.txtlist) li {
margin-bottom: 0em;
}

/* li 内の span に本文スタイルを適用 */	
.sidebox ul:not(.txtlist) li span {
font-size: var(--fs-body);
line-height: 1.8;
margin: 0;
display: inline;
}

/* =================================================
お知らせ一覧 　news.html 
==================================================== */

.page-message-text-block.portal-news{
      box-shadow: none;
      padding: 0;
      width: 90%;
      margin-left: 5%;
}
.page-message-text-block.portal-news h2{
    text-align: left;
    line-height: 1.4;
}
.sidebox ul:not(.txtlist) {
    font-size: var(--fs-caption);
}

.news-facility-name {
  border: solid 1px var(--base1);
  padding: 5px 20px;
  text-align: center;
  font-size: var(--fs-caption);
  display: inline-flex;
  margin-right: .5rem;
}
/* 施設：白庭病院 */
.news-facility-name.bid_3 {
  color: var(--base1);
  border: solid 1px var(--base1);
}
/* 施設：東生駒病 */
.news-facility-name.bid_4 {
  color: var(--ikoma);
  border: solid 1px var(--ikoma);
}
/* 施設：グランファミリア */
.news-facility-name.bid_7 {
  color: var(--familia);
  border: solid 1px var(--familia);
}
/* 施設：エリクシール */
.news-facility-name.bid_8 {
  color: var(--elixir);
  border: solid 1px var(--elixir);
}
/* 施設：松下内科リハビリクリニック */
.news-facility-name.bid_6 {
  color: var(--matsusita);
  border: solid 1px var(--matsusita);
}
/* 施設：居宅介護支援事業所 */
.news-facility-name.bid_10 {
  color: var(--kyotaku);
  border: solid 1px var(--kyotaku);
}
/* 施設：東生駒地域包括支援センター */
.news-facility-name.bid_11 {
  color: var(--visit_support);
  border: solid 1px var(--visit_support);
}
/* 施設：居宅介護支援事業所 */
.news-facility-name.bid_11 {
  color: var(--kyotaku);
  border: solid 1px var(--kyotaku);
}
/* 施設：フィットケア */
.news-facility-name.bid_9 {
  color: var(--matsusita);
  border: solid 1px var(--matsusita);
}

@media screen and (min-width:768px) {
	.page-message-text-block.portal-news .sidebox {
   		padding-top: 0;
	}
}


/* 全体レイアウト（上書き） */
.newsbox {
  display: block;
  width: 100%;
  margin: 0 auto 60px;
  padding: 0;
  box-sizing: border-box;
}

.newsbox .newslist li {
    border: none;
    display: block;
    text-align: left;
    border-bottom: 1px solid #eeeeee;
    box-sizing: border-box;
    line-height: 20px;
}
#contents .newsbox .newslist ul > li {
  margin-bottom: 0;
}

/* 左：newslist */
.newslist {
  order: 1;
  width: 100%;
  box-sizing: border-box;
}

.newslist h3.head03 + ul > li:first-child {
  margin-top: 1.5em; /* 数値は調整してください */
}

.newslist time {
  font-family: Inter, sans-serif;
  font-size: var(--fs-h6);
  font-weight: 500;
  color: #333;
  background-color: var(--lightgray);
  padding: 0.3em 0.8em;
  display: inline-block;
  border-radius: 3px;
  margin: 0 10px 7px 0;
}
.newslist .text {
  font-size: var(--fs-body);
  font-weight: 500;
  padding: 1em;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  padding: 10px 0 0;
  line-height: 1.6;
}



#contents .news-date.date ~ div > p:first-of-type img {
  margin: 0 auto 30px;
}

/* 右：sidebox */
.sidebox {
  order: 2;
  width: 25%;
  box-sizing: border-box;
  border-left: 1px solid var(--lightgray);
  padding-left: 2em;
  padding-top: 4.5em;
}
.sidebox ul li {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.sidebox .cate {
  font-size: var(--fs-h6);
  color: var(--base1);
  background-color: var(--lightblue);
  padding: 10px 20px;
  text-align: center;
  font-family: Inter, sans-serif;
}

.sidebox .arc,
.sidebox .widget-list-item {
  color: var(--base3);
  text-align: left;
  border-bottom: solid 1px var(--lightgray);
  transition: all 1s ease-in-out;
  font-family: Inter, sans-serif;
}
.sidebox .arc a,
.sidebox .widget-list-item a {
  padding: 10px 20px;
  display: block;
  text-decoration: none !important;
}
#contents .sidebox .arc,
#contents .sidebox .cate,
.sidebox .widget-list-item ul > li {
  margin-bottom: 0;
}

/* ホバー時：liに背景や角丸を適用 */
.sidebox .arc:hover,
.sidebox .widget-list-item:hover {
  background-color: var(--base4);
  border-radius: 3px;
}

/* 中のaの文字色を変える（hover時の親に反応） */
.sidebox .arc:hover a,
.sidebox .widget-list-item:hover  a {
  color: var(--white);
}

.newslist .pagination {
  display: flex;
  justify-content: center;  /* 中央揃え */
  align-items: center;
  gap: 0.8em;                /* 数字の間に余白 */
  margin-top: 2em;           /* 上にスペース */
  flex-wrap: wrap;           /* 長くなったとき折り返し */
  font-family: Inter, sans-serif;
}

/* ホバー効果 */
.newsbox .newslist a {
    display: block;
    padding-top: 25px ;
    padding-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
    text-decoration: none !important;
}
.newsbox .newslist a:hover{
    background-color: #f7f7f7;
    transition: all 500ms 0s ease;
}

/* ▼ 共通スタイルとして必要な設定 ▼ */
.newslist ul li a {
  display: block;
  position: relative;
  padding: 1em;
  transition: background-color 1s ease;
  overflow: hidden;
}

/* ▼ 疑似要素：初期は透明 ▼ */
.newslist ul li a::before,
.newslist ul li a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: background 1s ease;
  z-index: 0;
}

/* ::before ＝ 背景色（hover時に変化） */
.newslist ul li a::before {
  background: rgba(0, 0, 0, 0);
}

/* ::after ＝ 白いオーバーレイ（hover時に表示） */
.newslist ul li a::after {
  background: rgba(255, 255, 255, 0);
}

/* hover時：背景色と白オーバーレイ */
.newslist ul li a:hover::before {
  background: var(--base4);
}
.newslist ul li a:hover::after {
  background: rgba(255, 255, 255, 0.1);
}

.news-group.mt_70 {
  margin: 40px auto 70px;
}

/* --------- ページネーション --------- */
/* 数字やリンクの共通スタイル */
.newslist .pagination .current_page,
.newslist .pagination .link_page {
  font-size: 16px;
  padding: 10px 12px;
  text-decoration: none;
  border: 1px solid var(--lightgray);
  border-radius: 4px;
  color: var(--base3);
}

/* 現在のページ（強調表示） */
.newslist .pagination .current_page {
  background-color: var(--lightgray);
  font-weight: bold;
}

/* 次へのリンク */
.newslist .pagination .link_next a {
  margin-left: 1em;
  text-decoration: none;
  color: var(--base3);
  font-size: 14px;
}

/* ホバー効果 */
.newslist .pagination .link_page:hover {
  background-color: var(--lightblue);
  color: var(--base1);
  transition: all 0.3s ease;
}



/* スマホ対応 */
@media screen and (max-width: 768px) {
  .newsbox {
    flex-wrap: wrap; /* 折り返しを許可 */
    width: 90%;
    gap: 0;
  }

  .newslist,
  .sidebox {
    width: 100%;       /* 両方100%幅に */
    padding-left: 0;   /* 余白リセット */
    border-left: none; /* サイドボーダーを消す */
  }

  #contents .newslist ul,
  #contents .sidebox ul{
      padding: 0;
  }
  #contents .newsbox ul li a {
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    padding-right: 5px;
  }
  #contents .newsbox ul li a span {
    display: block;
    padding: 10px 0 0;
  }

  .sidebox {
    order: 2;          /* .sideboxは下に */
    padding-top: 4em;  /* 上余白を小さく */
    border-left: none;
  }

  .newslist {
    order: 1;          /* .newslistは上に */
  }
  .newslist .pagination {
    gap: 0.1em;
  }
  .newsbox .newslist .pagination a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #contents .newslist h3.head03 {
    margin-top: 0;
  }

}

/* =================================================
お知らせ詳細 　news.html　▶︎12/2　追加
==================================================== */
.newsbox.detail .news-date {
    margin-left: 0px;
    margin-bottom: 30px;
}
#contents .newsbox.detail .head02 {
	margin-bottom: 15px;
    background-color: transparent;
    padding: 0.6rem 1.5rem 0.6rem 0;
}
#contents .newsbox.detail .btn01 {
	text-align: right;
}